n&u curso 3 y 4
TRANSCRIPT
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Navegabilidad y Usabilidad
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos Revisemos los
conceptos
• Accesibilidad
• Usabilidad
• Navegabilidad
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Accesibilidad
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Accesibilidad
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Accesibilidad
Usabilidad
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Accesibilidad
Usabilidad
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Accesibilidad
Usabilidad
Navegabilidad
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Definiciones• La accesibilidad web se refiere a la capacidad de acceso a la Web y a sus
contenidos por todas las personas independientemente de la discapacidad (física, intelectual o técnica) que presenten o de las que se deriven del contexto de uso (tecnológicas o ambientales). Esta cualidad está íntimamente relacionada con la usabilidad.
• “La usabilidad” (dentro del campo del desarrollo web) es la disciplina que estudia la forma de diseñar sitios web para que los usuarios puedan interactuar con ellos de la forma más fácil, cómoda e intuitiva posible.
• Podríamos definir la navegabilidad de un sitio web como aquellas propiedades de la interactividad del sitio que permiten que el usuario del mismo sea capaz de moverse por su estructura e identificar las diferentes secciones y contenidos de una forma sencilla y efectiva y sin perderse en él.
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Accesibilidad: Más a fundo...
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Legislación
• Internacional
• Europea:
Resolución del Parlamento Europeo sobre la Comunicación de la Comisión “eEurope 2002: Accesibilidad de las sitios Web públicos y de su contenido” (COM(2001) 529 – c5-0074/2002 – 2002/2032(COS)). Abril del 2002. En el punto 30: “Subraya que para que los sitios web sean accesibles es fundamental que satisfagan el nivel doble A y que se aplique en su totalidad la prioridad 2 de las Pautas WAI
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
En España
La ley 34/2002, de 11 de julio, de servicios de la sociedad de la información y de comercio electrónico (LSSICE). Publicada en el B.O.E. el 12 de julio.
Sobre accesibilidad la ley dice, en sus disposiciones adicionales:
Quinta. Accesibilidad para las personas con discapacidad y de edad avanzada a la información proporcionada por medios electrónicos.Uno. Las Administraciones Públicas adoptarán las medidas necesarias para que la información disponible en sus respectivas páginas de Internet pueda ser accesible a personas con discapacidad y de edad avanzada de acuerdo con los criterios de accesibilidad al contenido generalmente reconocidos antes del 31 de diciembre de 2005. Asimismo, podrán exigir que las páginas de Internet cuyo diseño o mantenimiento financien apliquen los criterios de accesibilidad antes mencionados.Dos. Igualmente, se promoverá la adopción de normas de accesibilidad por los prestadores de servicios y los fabricantes de equipos y software, para facilitar el acceso de las personas con discapacidad o de edad avanzada a los contenidos digitales.
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
En España
LEY 51/2003, de 2 de diciembre, de igualdad de oportunidades, no discriminación y accesibilidad universal de las personas con discapacidad.
Disposición final séptima. Condiciones básicas de accesibilidad y no discriminación para el acceso y utilización de las tecnologías, productos y servicios relacionados con la sociedad de la información y medios de comunicación social.
1. En el plazo de dos años desde la entrada en vigor de esta ley, el Gobierno aprobará, según lo previsto en su artículo 10, unas condiciones básicas de accesibilidad y no discriminación para el acceso y utilización de las tecnologías, productos y servicios relacionados con la sociedad de la información y de cualquier medio de comunicación social, que serán obligatorias en el plazo de cuatro a seis años desde la entrada en vigor de esta ley para todos los productos y servicios nuevos, y en el plazo de ocho a diez años para todos aquellos existentes que sean susceptibles de ajustes razonables.
2. En el plazo de dos años desde la entrada en vigor de esta ley, el Gobierno deberá realizar los estudios integrales sobre la accesibilidad a dichos bienes o servicios que se consideren más relevantes desde el punto de vista de la no discriminación y accesibilidad universal.
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Perfiles
• Personas con discapacidades
• Dispositivos móviles
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Discapacitados
• Tipos de Limitaciones
• Dispositivos
• http://www.desarrolloweb.com/articulos/accesibilidad-web-tecnologias-auxiliares.html
• http://www.desarrolloweb.com/articulos/ejemplos/este_articulo_jaws.mp3
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Móviles
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Ejercicio
Principios WAI:PerceptibilidadOperabilidad
ComprensibilidadRobustez
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Evaluación
• Automática
• Manual : http://www.visionaustralia.org.au/ais/toolbar/ y https://addons.mozilla.org/en-US/firefox/addon/60
• Test de Usuarios
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Ejemplos de integración
• Tamaños de letra : http://www.assignia.com/presentacion/
• Integración de vídeos: www.mundo21.org
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Usabilidad: Más a fundo
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos ¿Qué piden los
usuarios?Los usuarios definen 4 causas principales para volver a
visitar un site:
• Contenidos y servicios.
• Actualizaciones.
• Rapidez.
• Facilidad de Uso.
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos La interacción Persona-
Ordenador (IPO)
Hansen (1971) en su libro "User Engineering Principles for Interactive Systems":
1. Conocer al usuario2. Minimizar la memorización3. Optimizar las operaciones4. Facilitar buenos mensajes de error y crear diseños que eviten los errores más comunes
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos Conceptos
fundamentalesRepasamos:
• estructura clara
• seguir las convenciones
• enlaces visibles
• secciones
• minimizar ruido
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
¿Sólo son apariencias?
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos Elementos
fundamentales
• Uso de colores
• Uso de fuentes
• Escribir para la web
• Urls
• Tamaños de pantalla
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Uso de Colores
• ¿Por qué una buena elección es fundamental?
• Hacerlo dentro del rango de 256 colores pero no más de 3...
• Armonizar los colores (contrastes y familia tonal)
• Elección en función de factores objetivos: marketing, corporativo, significación
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Colores-Barra de Menú
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Colores-Vínculos
• No-Saturados vs Saturados
• El ejemplo básico:
Puedo hacer clic
Ya he hecho clic
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos Colores-Color de
fondo
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos Colores-Color de
fondo
NO
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos Colores-Color de
fondo
NO
SI
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Colores-Alertas
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Uso de Fuentes
• Tamaño : 12 pt. Nunca menos de 9pt.
• Fuentes comunes : Times New Roman, Georgia (serif fonts), Arial, Helvetica, o Verdana (sans serif fonts).
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
E!o, por ejemplo, mejor
dejarlo...
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Redactar para la web
• ¿Por qué es fundamental? > credibilidad de la web
• ¿Por qué limitarlo? > evitar memorización
• ¿Cómo reducirlos? (2 firts sentences, titles, no conversion necesary)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Títulos
• No demasiado largos
• Factibles
• En las imágenes: no usar evitar Nº de referencia
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Categorias
• Comprensibles : evitar metaforías
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Enlaces
• Unas palabras...
• ...que corresponden al título de la página siguiente
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Textos
• REDUCIRLOS: 20 palabras por frase, 6 frases por párrafos
• Para los expertos y los mortales
• Evitar jerga
• Utilizar palabras comunes
• Definir acrónimos y abreviaciones
• Evitar textos en mayúsculas
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Tamaño de Pantallas
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Reducir el peso
• No sólo diseñar para ADSL
• Del buen uso de las imágenes (reducir peso, alt)
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
S.O.S
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Gestionar Errores
• Un sitio web no ha de tratar al usuario de manera hostil.
• En ningún caso un sitio web puede venirse abajo o producir un resultado inesperado.
• ¿Cómo gestionar los posibles errores?
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Secciones de Ayuda
• Fácilmente accesible
• Estructura adaptada (categorias, tagcloud)
• FAQs
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Ejemplos Comparativos
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
http://www.battaletras.com.ar/http://www.paperrad.org/oldindex2009.htmlhttp://www.hectorwilliam.com/spanish.htmhttp://www.tusitioya.com.ar/
http://www.asturias.es http://www.mapfre.com http://www.mjusticia.es http://support.euro.dell.com/support/index.aspx?c=es&cs=esdhs1&l=es&s=dhs
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Aspectos técnicos
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Integrar estilo
• CSS: Cascading Style Sheet
• Frames : ¿si o no?
• Y Flash?
• Ajax: ¿nueva moda, peligrosa?
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Validación CSS
• El documento se coloca en el servidor y se adjunta la llamada <link rel="stylesheet" href="MiHojaDeEstilo.css"> en todas las paginas web en la parte del <head>
• http://jigsaw.w3.org/css-validator/
Escu
ela
Supe
rior
de
Art
e y
Espe
ctác
ulos
Ejercicio
• Escribir para una web: “Mundo 21”