Creación de contenidos accesibles y usables - SFD cgena2012

Creación de contenidos accesibles

y usables

Bajo licencia: Creative Commons –

Reconocer el autor: Edison Monsalve

Sobre la conferencia.

¿Para quién? Para todos.¿Conocimientos previos? No, solo ganas¿Esto es un tutorial? Nop, conferencia.

¿Me regala la presentación? Claro! Bájela de Slidesharehttp://www.slideshare.net/morpheus_co/creacin-de-contenidos-accesibles-y-usables-sfd-cgena2012

Sobre el tema y el conferencista

¿Donde bajo mas información? Pronto en la lupa digital (Blog de Colombia Digital)En esta presentación y durante hay links interesantes¿Puedo grabar? Por supuesto!

Mi nombre: Edison Monsalve - @morpheuscoMi blog: http://morpheus-co.blogspot.comEl otro blog: Lupa digital

Accesibilidad

El objetivo es simple, acceso universal al contenido, independiente del hardware, software, idioma, cultura, capacidades de los usuarios, etc. Ej; Si tu página está realizada 100% en Adobe Flash, no eres accesible.

La U y el mundo se puede equivocar.

¿Que ellos miren a ver como hacen?O ¿le enseñamos a todos los docentes lenguaje de señas?

Mejor iniciemos con consciencia.

Usabilidad

¿Qué tan fácil de usar es tu contenido?

¿Es claro o requiere conocimientos previos?

¿Se puede compartir o tiene restricciones?

¿A quién estamos dirigidos?

Pero es más que eso: ¿Quién usa gafas? ¿Quién es zurdo?¿Quién sabiendo que necesita gafas no las usa?

Fuente: Accesibilidad-web.net http://www.accesibilidad-web.net/documentacion-oficial/preguntas-frecuentes-sobre-pautas-accesibilidad-contenido-web.html

Tiempos de carga y precarga

Simple, ¿se demora? Que valga la pena.

Y mientras tanto….Si el contenido no carga de inmediato, coloca un estado de avance.

Ej; Neostream

Los enlaces – no reinventes.

Existe la posibilidad de subrayar los textos en HTML, no lo hagas, pensarán que es un hipervínculo.Simple: No subrayes, si es hipervínculo que funcione, sino, entonces que no parezca.

Interfaces – reinventa con cuidado

Las barras de menús o herramientas van arriba, ¿las quieres al centro y redondas? Ok -> pero ten cuidado, a veces se acierta, otras no.Ej; PreziIokio Camera Finder

Si quieren ver mi contenido que tengan X y

Y y Z y las versiones adecuadas

Muerto Flash, la liga de la justicia decidió adoptar HTML 5 -> el nuevo super héroe.

Aprovecha el contenido digital

Leer en pantalla cuesta mucho (No se te ocurran los fondos negros y letras blancas) y recuerda que nadie quiere leer el libro directamente en una página, ¿recuerdas los hipervínculos? Ej; si desea ver mas información sobre accesibilidad, revisa el link de …

Los daltónicos y otras “modificaciones visuales”

Algunos expertos registran que aproximadamente el 15% de usuarios podría registrar alguna variación de captación de color.

¿Quieres ver como ven ellos? http://www.vischeck.com/daltonize/runDaltonize.php

Que se lea, ¡para eso publicamos!

Texto grande, fondos contrastados – ¡Vamos! No es tan difícil.

¡La letra mas cool! ¿Y la forma de escritura?…..:::: Software Freedom Day::!!

En cerio, skrIViR HacI No T ase + Kool

El logo no solo adorna

Existen convenciones no declaradas, si colocamos un objeto, que sea funcional, si es solo visual entonces piensa: ¿El usuario pierde algo si se desactiva? – Más allá del efecto decorativo.Ej; El logo es index.html – las imágenes de fondo sin color de fondo.

Recorre el camino

Las “migas de pan” te dicen donde estás, o si llegaste desde un enlace externo entonces a donde caíste.

Home –> Boletines -> Prensa -> Política

Pdta: En serio ¿home?

Recuerda tus pasos

¿Ya estuviste aquí? -> Que chévere que existiera un selector Css para mostrarle a la gente que ya estuvo por aquí… ¡Espera! Si existe, úsalo.

Pongámosle lógica también a los menús, a los pasos.

Ej; Inicio – Accesorios – Tal¿Inicio – Apagar? -> No importa que lleve años, puede no estar bien.

¿En donde estoy? ¡En serio!

¿Vas a colocar un formulario? – Que el foco esté claro, ¿es una aplicación tipo Windows form o similar? Que el usuario “VEA” donde está ubicado y respeta la tabulación –ah! Pregunta lo que realmente necesites.

Nombre:Dirección:Celular:Email:

Valida la información, pero entrega información

Un mensaje como “Ha ocurrido un error de conexión de las manchas solares” en verdad no dejará tranquilo a ningún usuario, mejor si validas localmente o por lo menos ponte en el lugar del usuario.Ej; Pantalla azul de la muerte XD.

¿Accesible y usable es más difícil?

¡Es más completo! Tendrá un mayor impacto, requiere mas esfuerzo en algunos puntos pero vale la pena. Ahora, debes estudiar el tema, hacer pruebas y aprender a prestar atención a los detalles, esto puede que no te vuelva sabio, pero si mejor profesional.

Te recomiendo: 10 mitos sobre la usabilidad – Teleclase con Mario Carvajal en el blog Cacharreando.

Imágenes sin descripción o código alt

¿Tu ves la imagen?, ¿a ti te carga? ¿Al resto del mundo también? Por lo menos pon descripción, también existen navegadores que “le dicen” al usuario de que se trata y utiliza estas etiquetas.Ej; Navegar en Jaws.

Haga click aquí.

No es un error en la presentación, ver más…

Nota: Esta diapositiva no tiene error, solo necesita más información para ser consumida. XD

Todos los textos justificados

¡Dios! Permite que el procesador de texto antes de hacer caso pregunte: ¿En verdad quieres justificar todo el texto y convertirlo en un ladrillo?El texto justificado no ayuda a los disléxicos, la separación “arbitraria” del texto no aporta nada al contenido.

No seas dependiente de la versión o el software

Esta presentación NO está optimizada para un navegador especial, no está optimizada para un dispositivo especial, esto la convierte en un contenido MUY ESPECIAL.Un contenido web debería ser puesto a prueba en diversos navegadores y escenarios (incluye dispositivos).

El gusto en color

Para gustos, los colores, pero AUNQUE SEA, mide el contraste.

http://www.joedolson.com/color-contrast-tester.php?granularity=80&pass=on&partial=on&color=%23CECECE&type=wcag2

¡No soy diseñador pero tengo un gustazo!

No sobra estudiar lo básico sobre “Teoría de color”, por lo menos déjate ayudar por herramientas y no le cuentes a nadie sino quieres.

• Collor: http://colllor.com/ (contraste)

• Color Scheme Designer: http://colorschemedesigner.com/

• Color scheme chooser: http://websitetips.com/colortools/sitepro/

• Check my colours : http://www.checkmycolours.com/

Y el lenguaje de señas ¿para quién es?

Mucha gente es consciente de la necesidad de la segunda lengua, para una persona con disminución auditiva el “Español” puede ser una segunda lengua y para ti también, pero ten en cuenta los detalles.

Curso de señas en video: http://mail.colombiaaprende.edu.co:8080/recursos/lengua_senas/

¿El sistema operativo es accesible?

Inicio – Programas – Accesorios - accesibilidadRecursos para invidentes o con discapacidad visual• Tenemos lectores de pantalla -> Jaws por ejemplo• Lupas para pantalla• Browsers adaptados

Sistemas operativos preparados – usuarios no.

Ver más recursos en el portal uruguayo para discapacidad visual: http://www.discapacidaduruguay.org/index.php/accesibilidadciegos

¿Yo no soy sordo entonces no me importa?

No diseñamos, no producimos, no escribimos para nosotros -> re piensa.No siempre debo tener disminución en alguno de los sentidos, a veces hay otros factores.

Los dispositivos nuevos – nuevas interfaces, nuevas formas

¿Tienes dedos gordos? ¿Intentaste alguna vez dar clic en una tablet pequeña? ¿oprimir una tecla del miniteclado del celular?

Señores – A diseñar contenidos enfocados, aunque el dispositivo sea mas pequeño, los botones no pueden ser mas pequeños.

Desde la web a mp3

http://soundgecko.com

Díctale online

http://ctrlq.org/dictation/

Captura tu pantalla

http://www.screenr.com/http://www.screencast-o-matic.com/

Revisa la accesibilidad web de tu sitio

http://www.intergraphicdesigns.com/tools/test-usabilidad-web/

A leer: Te recomiendo

Tienes 5 segundos – http://tienes5segundos.cl/libro/

No me hagas pensar – Nosolousabilidad - www.nosolousabilidad.com

Subtitulando

Dot subCaptiontube

¿Lenguaje de señas en vivo?

¿Cómo instalar Ubuntu en Virtual Box? En lenguaje de señas

http://morpheus-co.blogspot.com/2012/08/como-instalar-ubuntu-en-virtualbox-en.html

Prueba Present.me – Puede ser solución.

Preguntas?

Contacto

Edison MonsalveDocente Universidad Tecnológica de Bolívar@morpheuscohttp://morpheus-co.blogspot.com

Créditos

Imágenes logos de Iconfinder.com

Creación de contenidos accesibles y usables - SFD cgena2012

Education

Transcript of Creación de contenidos accesibles y usables - SFD cgena2012

Guía de Instalación de SFD - 2013

Madrid Recursos accesibles.

Tecnologías educativas accesibles.

Guía de farmacias accesibles.

restaurantyes accesibles

Programa de Cultura Institucional 2 sfd

Criterios y reglas para elaborar contenidos usables y atractivos, que satisfagan audiencias (2)

Anexo. COyM SFD

Reconocimiento a Escala del Prospecto en Cualquier Parte · El uso de SFD® como herramienta independiente puede ayu-dar a reducir el riesgo de la exploración. SFD® (Stress Field

Finanzas digitales bien implementadas: ENFOQUESdocuments.worldbank.org/curated/en/...servicios financieros digitales (SFD) 1. más accesibles y asequibles. En efecto, las pruebas obtenidas

ciu46 - Ciudades Accesibles

Las mejores playas accesibles.

(24fÄA) ¥1,080 74 ¥7 (SFD.30) ¥3,240 E ¥5,400 ¥4,590 piole ... · (24fÄA) ¥1,080 74 ¥7 (SFD.30) ¥3,240 E ¥5,400 ¥4,590 piole AK ASHI ¥4,910 ¥3,009 naturall ¥3,240 ¥3,240

Imagenes accesibles

Red de ciudades accesibles.

Sistemas usables

Videojuegos Accesibles

Establecimientos turísticos accesibles.

Maquinas Virtuales SFD 2010

Módulo 1: Implementación de y usables