1.
PROYECTO
MAPOTECA
PARA EDUC.AR
Manuel Razzari
Junio 12, 2012
Agosto 8, 2013

2.
SUMARIO
Contexto del proyecto
Cosas que salieron bien
Otras que salieron mal
Técnicas y herramientas
Cómo lo encaramos

3.
CON VISTA AL MAR
Un estudio de diseño y desarrollo de interfaces
web que trabaja con estándares web,
usabilidad y accesibilidad.

4.
MAPOTECA.EDUC.AR
Aplicación web para que estudiantes interactúen
con mapas escolares. A ser instalada en las
3 millones de netbooks de Conectar Igualdad.

5.
Página principal

6.
Mapa

7.
Zoom con tiles

8.
Superponer capas

9.
Dibujar, imprimir o descargar
lo dibujado

10.
Actividades didácticas

11.
Actividad con metadatos

12.
LIMITES DE UN ESTUDIO WEB
No hay especialistas
Tiempos cortos
Costos por hora
Otras prioridades
Sin control punta a punta

13.
ACCESO UNIVERSAL
Icono IE por http://fav.me/dlx6z0
HTML5…
¿SVG?
¿¡Canvas!?

14.
Ancho de banda
Congestión,
concurrencia
Fuera de Cap.Fed.
Offline!
ACCESO UNIVERSAL
Foto por @joseallona a bordo del 152 http://instagr.am/p/LwHiiTF_02/

15.
ALGUNAS COSAS
SALIERON BIEN

16.
¡DESDE EL VAMOS!
El “antes y después”
La accesibilidad incorporada desde el comienzo,
transversal al trabajo de cada miembro del equipo.
No una “revisión sorpresa” al final.

17.
NAVEGACIÓN POR TECLADO
Todos es navegable y activable por teclado.
Interactivos: menúes desplegables, sliders
Ayudar al foco mediante JS.
Foco más visible

18.
SALTEAR REDUNDANCIAS
http://john.foliot.ca/aria-hidden/

19.
ARIA LANDMARK ROLES
banner
main complementary
navigation search
contentinfo
http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/

20.
INDICAR DESPLEGABLES
La forma “correcta”
La infinita especificación de WAI ARIA para menúes desplegables: http://www.w3.org/WAI/PF/aria-practices/#menu

21.
INDICAR DESPLEGABLES
La forma fácil
Lo más sencillo: usar un componente que use ARIA, como http://yuilibrary.com/yui/docs/node-menunav/

22.
INDICAR DESPLEGABLES
No tan correcto... ¡pero realista!
<a aria-expanded="false"
aria-controls="menu-1">Menú</a>
<ul id="menu-1">
<li>...</li>
<li>...</li>
</ul>
Ya tenemos el menú hecho y nos olvidamos de ARIA, ¿cómo lo emparchamos? www.marcozehe.de/?p=218

23.
ALGUNAS COSAS
NO SALIERON
TAN BIEN

24.
TEXTO ALTERNATIVO
Confusión @alt y
epígrafe.
Alt con nombre de
imagen “bioma jujuy
06”.
Errores de tipeo.
¡Se los capacitó!

25.
Sin alteración Deuteranomalia (6% hombres)
Protanopia (1% hombres) Deuteranopia (1% hombres)Protanopia (1% hombres)Protanopia (1% hombres)
PROBLEMAS DE COLOR
http://en.wikipedia.org/wiki/Color_blindness

26.
PROBLEMAS DE COLOR
http://vischeck.com/

27.
EL TRACKPAD
Dibujar con trackpad
no resulta tan fácil.
http://flic.kr/p/bDXYK7

28.
“Observen el mapa y anoten las coordenadas...”
“Observen las siguientes imágenes de paisajes
áridos. Identifiquen el factor erosivo...”
ACTIVIDADES VISUALES

29.
¿QUIÉN QUEDA AFUERA?
Dibujar require
puntero.
Ver los mapas
requiere... ver.
@longdesc
imposible
Falta info al
respecto.

30.
MAPAS INTERACTIVOS
Paneo
Zoom
Dibujo
Capas
“Accesibilidad de mapas = navegación por teclado”

31.
MAPAS INTERACTIVOS
http://www.alistapart.com/articles/takecontrolofyourmaps/
Servidor de mapas
Caché de mosaicos
Cliente visualizador
Datos geo-espaciales

32.
MOSAICOS DE MAPAS
¡Texto como imágenes!

33.
MAPAS TÁCTILES
Atlas for the blind, 1837.
http://www.davidrumsey.com/blog/2012/5/21/atlas-for-the-blind-1837

34.
MAPAS EN iOS6
¡Un nuevo comienzo!
Mapas vectoriales.
VoiceOver en calles y marcadores.
Ver video
http://youtu.be/FwCwxgMn-_w?t=2m13s

35.
NO EMPEZAR
DE CERO

36.
GESTOR DE CONTENIDO
RTE que genere HTML válido
Diálogos para texto @alt y marcado semántico
Plantillas que separen lógica de HTML
Frameworks y sus comunidades

37.
COMPONENTES ACCESIBLES
Testearlo en nuestros browsers objetivo
Puedo usarlo con el teclado
Escalable (text zoom)
Si hay links, que apunten a una URL
¿Dice ser accesible?
Librerías

38.
HERRAMIENTAS
Firefox Accessibility Extension
Examinator
Firefox + NVDA
DOM Inspector Accessible Tree
http://asurkov.blogspot.com.ar/2012/02/dom-inspector-as-accessibility-tool.html

39.
Firefox DOM Inspector
Accessible Tree

40.
80/20
Menos de una semana
Buen diseño puede ser accesible
¡Si se quiere, se puede!

41.
MUCHAS GRACIAS!
@mrazzari
http://goo.gl/5w5m7