Escuela Superior de Arte y Espectáculos




                Usabilidad
              Navegabilidad y
Revisemos los
Escuela Superior de Arte y Espectáculos


                                                  conceptos

     ...
Escuela Superior de Arte y Espectáculos
Escuela Superior de Arte y Espectáculos


                            Accesibilidad
Escuela Superior de Arte y Espectáculos


                            Accesibilidad
Escuela Superior de Arte y Espectáculos




                     Usabilidad
                                  Accesibilidad
Escuela Superior de Arte y Espectáculos




                     Usabilidad
                                  Accesibilidad
Escuela Superior de Arte y Espectáculos




            Navegabilidad
                            Usabilidad
             ...
Escuela Superior de Arte y Espectáculos

                                                           Definiciones
          ...
Escuela Superior de Arte y Espectáculos




                  fundo...
             Accesibilidad: Más a
Escuela Superior de Arte y Espectáculos

                                                                Legislación

    ...
Escuela Superior de Arte y Espectáculos

                                                                             En E...
Escuela Superior de Arte y Espectáculos

                                                                              En ...
Escuela Superior de Arte y Espectáculos

                                                        Perfiles


               ...
Escuela Superior de Arte y Espectáculos

                                                   Discapacitados
               ...
Escuela Superior de Arte y Espectáculos

                               Móviles
Escuela Superior de Arte y Espectáculos

                                             Ejercicio

                         ...
Escuela Superior de Arte y Espectáculos

                                                      Evaluación

               ...
Escuela Superior de Arte y Espectáculos

                                          Ejemplos de integración


             ...
Escuela Superior de Arte y Espectáculos
Escuela Superior de Arte y Espectáculos
Escuela Superior de Arte y Espectáculos
Escuela Superior de Arte y Espectáculos




                Usabilidad: Más a fundo
¿Qué piden los
Escuela Superior de Arte y Espectáculos


                                                        usuarios?...
La interacción Persona-
Escuela Superior de Arte y Espectáculos


                                             Ordenador (...
Conceptos
Escuela Superior de Arte y Espectáculos


                                                  fundamentales
      ...
Escuela Superior de Arte y Espectáculos




                ¿Sólo son apariencias?
Elementos
Escuela Superior de Arte y Espectáculos


                                                 fundamentales
       ...
Escuela Superior de Arte y Espectáculos

                                                  Uso de Colores
                ...
Escuela Superior de Arte y Espectáculos

                               Colores-Barra de Menú
Escuela Superior de Arte y Espectáculos

                                              Colores-Vínculos

                 ...
Escuela Superior de Arte y Espectáculos


                                 fondo
                            Colores-Color...
Escuela Superior de Arte y Espectáculos


                                 fondo



        NO
                           ...
Escuela Superior de Arte y Espectáculos




                  SI
                                 fondo



        NO
    ...
Escuela Superior de Arte y Espectáculos

                               Colores-Alertas
Escuela Superior de Arte y Espectáculos

                                                   Uso de Fuentes

              ...
Escuela Superior de Arte y Espectáculos




         dejarlo...
                      E!o, por ejemplo, mejor
Escuela Superior de Arte y Espectáculos

                                              Redactar para la web

             ...
Escuela Superior de Arte y Espectáculos

                                                         Títulos

               ...
Escuela Superior de Arte y Espectáculos

                                                     Categorias


               ...
Escuela Superior de Arte y Espectáculos

                                                         Enlaces


              ...
Escuela Superior de Arte y Espectáculos

                                                         Textos
                 ...
Escuela Superior de Arte y Espectáculos

                               Tamaño de Pantallas
Escuela Superior de Arte y Espectáculos

                                                Reducir el peso

                ...
Escuela Superior de Arte y Espectáculos




                S.O.S
Escuela Superior de Arte y Espectáculos

                                               Gestionar Errores

               ...
Escuela Superior de Arte y Espectáculos

                                            Secciones de Ayuda

                 ...
Escuela Superior de Arte y Espectáculos




                Ejemplos Comparativos
Escuela Superior de Arte y Espectáculos




                                          http://www.battaletras.com.ar/
     ...
Escuela Superior de Arte y Espectáculos




                Aspectos técnicos
Escuela Superior de Arte y Espectáculos

                                                  Integrar estilo

              ...
Escuela Superior de Arte y Espectáculos

                                                    Validación CSS

             ...
Escuela Superior de Arte y Espectáculos

                                                       Ejercicio


              ...
Próxima SlideShare
Cargando en…5
×

N&U Curso 3 Y 4

431 visualizaciones

Publicado el

Publicado en: Viajes, Empresariales
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
431
En SlideShare
0
De insertados
0
Número de insertados
69
Acciones
Compartido
0
Descargas
10
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

N&U Curso 3 Y 4

  1. 1. Escuela Superior de Arte y Espectáculos Usabilidad Navegabilidad y
  2. 2. Revisemos los Escuela Superior de Arte y Espectáculos conceptos • Accesibilidad • Usabilidad • Navegabilidad
  3. 3. Escuela Superior de Arte y Espectáculos
  4. 4. Escuela Superior de Arte y Espectáculos Accesibilidad
  5. 5. Escuela Superior de Arte y Espectáculos Accesibilidad
  6. 6. Escuela Superior de Arte y Espectáculos Usabilidad Accesibilidad
  7. 7. Escuela Superior de Arte y Espectáculos Usabilidad Accesibilidad
  8. 8. Escuela Superior de Arte y Espectáculos Navegabilidad Usabilidad Accesibilidad
  9. 9. Escuela Superior de Arte y Espectáculos 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.
  10. 10. Escuela Superior de Arte y Espectáculos fundo... Accesibilidad: Más a
  11. 11. Escuela Superior de Arte y Espectáculos 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
  12. 12. Escuela Superior de Arte y Espectáculos 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.
  13. 13. Escuela Superior de Arte y Espectáculos 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.
  14. 14. Escuela Superior de Arte y Espectáculos Perfiles • Personas con discapacidades • Dispositivos móviles
  15. 15. Escuela Superior de Arte y Espectáculos 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
  16. 16. Escuela Superior de Arte y Espectáculos Móviles
  17. 17. Escuela Superior de Arte y Espectáculos Ejercicio Principios WAI: Perceptibilidad Operabilidad Comprensibilidad Robustez
  18. 18. Escuela Superior de Arte y Espectáculos 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
  19. 19. Escuela Superior de Arte y Espectáculos Ejemplos de integración • Tamaños de letra : http://www.assignia.com/ presentacion/ • Integración de vídeos: www.mundo21.org
  20. 20. Escuela Superior de Arte y Espectáculos
  21. 21. Escuela Superior de Arte y Espectáculos
  22. 22. Escuela Superior de Arte y Espectáculos
  23. 23. Escuela Superior de Arte y Espectáculos Usabilidad: Más a fundo
  24. 24. ¿Qué piden los Escuela Superior de Arte y Espectáculos usuarios? Los usuarios definen 4 causas principales para volver a visitar un site: • Contenidos y servicios. • Actualizaciones. • Rapidez. • Facilidad de Uso.
  25. 25. La interacción Persona- Escuela Superior de Arte y Espectáculos Ordenador (IPO) Hansen (1971) en su libro "User Engineering Principles for Interactive Systems": 1. Conocer al usuario 2. Minimizar la memorización 3. Optimizar las operaciones 4. Facilitar buenos mensajes de error y crear diseños que eviten los errores más comunes
  26. 26. Conceptos Escuela Superior de Arte y Espectáculos fundamentales Repasamos: • estructura clara • seguir las convenciones • enlaces visibles • secciones • minimizar ruido
  27. 27. Escuela Superior de Arte y Espectáculos ¿Sólo son apariencias?
  28. 28. Elementos Escuela Superior de Arte y Espectáculos fundamentales • Uso de colores • Uso de fuentes • Escribir para la web • Urls • Tamaños de pantalla
  29. 29. Escuela Superior de Arte y Espectáculos 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
  30. 30. Escuela Superior de Arte y Espectáculos Colores-Barra de Menú
  31. 31. Escuela Superior de Arte y Espectáculos Colores-Vínculos • No-Saturados vs Saturados • El ejemplo básico: Puedo hacer clic Ya he hecho clic
  32. 32. Escuela Superior de Arte y Espectáculos fondo Colores-Color de
  33. 33. Escuela Superior de Arte y Espectáculos fondo NO Colores-Color de
  34. 34. Escuela Superior de Arte y Espectáculos SI fondo NO Colores-Color de
  35. 35. Escuela Superior de Arte y Espectáculos Colores-Alertas
  36. 36. Escuela Superior de Arte y Espectáculos 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).
  37. 37. Escuela Superior de Arte y Espectáculos dejarlo... E!o, por ejemplo, mejor
  38. 38. Escuela Superior de Arte y Espectáculos 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)
  39. 39. Escuela Superior de Arte y Espectáculos Títulos • No demasiado largos • Factibles • En las imágenes: no usar evitar Nº de referencia
  40. 40. Escuela Superior de Arte y Espectáculos Categorias • Comprensibles : evitar metaforías
  41. 41. Escuela Superior de Arte y Espectáculos Enlaces • Unas palabras... • ...que corresponden al título de la página siguiente
  42. 42. Escuela Superior de Arte y Espectáculos 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
  43. 43. Escuela Superior de Arte y Espectáculos Tamaño de Pantallas
  44. 44. Escuela Superior de Arte y Espectáculos Reducir el peso • No sólo diseñar para ADSL • Del buen uso de las imágenes (reducir peso, alt)
  45. 45. Escuela Superior de Arte y Espectáculos S.O.S
  46. 46. Escuela Superior de Arte y Espectáculos 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?
  47. 47. Escuela Superior de Arte y Espectáculos Secciones de Ayuda • Fácilmente accesible • Estructura adaptada (categorias, tagcloud) • FAQs
  48. 48. Escuela Superior de Arte y Espectáculos Ejemplos Comparativos
  49. 49. Escuela Superior de Arte y Espectáculos http://www.battaletras.com.ar/ http://www.paperrad.org/oldindex2009.html http://www.hectorwilliam.com/spanish.htm http://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
  50. 50. Escuela Superior de Arte y Espectáculos Aspectos técnicos
  51. 51. Escuela Superior de Arte y Espectáculos Integrar estilo • CSS: Cascading Style Sheet • Frames : ¿si o no? • Y Flash? • Ajax: ¿nueva moda, peligrosa?
  52. 52. Escuela Superior de Arte y Espectáculos 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/
  53. 53. Escuela Superior de Arte y Espectáculos Ejercicio • Escribir para una web: “Mundo 21”

×