Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

Creación de contenidos accesibles

y usables

Bajo licencia: Creative Commons –

Reconocer el autor: Edison Monsalve

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

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

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

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

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

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.

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

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.

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

Usabilidad

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

¿Es claro o requiere conocimientos previos?

¿Se puede compartir o tiene restricciones?

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

¿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

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

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

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

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.

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

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

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

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.

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

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 …

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

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

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

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

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

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.

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

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?

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

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.

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

¿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:

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

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.

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

¿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.

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

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.

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

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

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

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.

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

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).

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

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

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

¡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/

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

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/

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

¿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

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

Sistemas operativos preparados – usuarios no.

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

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

¿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.

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

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.

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

Desde la web a mp3

http://soundgecko.com

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

Díctale online

http://ctrlq.org/dictation/

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

Captura tu pantalla

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

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

Revisa la accesibilidad web de tu sitio

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

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

A leer: Te recomiendo

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

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

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

Subtitulando

Dot subCaptiontube

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

¿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.

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

Preguntas?

?

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

Contacto

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

Soft

ware

Fre

ed

om

day

– C

art

ag

en

a

20

12

Ed

ison

Mon

salv

e -

@m

orp

heu

sco

Créditos

Imágenes logos de Iconfinder.com