La web única. piensa en todos tus usuarios

486 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
486
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

La web única. piensa en todos tus usuarios

  1. 1. No olvides coger tu dossier a la entrada!!!La Web únicaPiensa en todos tus usuarios .com
  2. 2. Somos bicompatibleUn pequeño estudio de diseño ydesarrollo especializado enusabilidad y accesibilidad Web Nayra Quesada Especialista en Tecnologías Web Fer Torres Especialista en Experiencia de Usuario
  3. 3. Un vistazo rápidoBloque 1Afrontando una nueva realidadBloque 2Implementando la accesibilidadBloque 3Mejorando la experiencia móvil
  4. 4. Afrontando unanueva realidadBloque 1
  5. 5. No hace mucho tiempo...
  6. 6. Más tarde...
  7. 7. Cambio radical. Más dispositivos, tamañosde pantalla, resoluciones, orientaciones...
  8. 8. El futuro ya está aquí: la Web Móvil
  9. 9. Los paradigmas cambian
  10. 10. Responsive Design
  11. 11. Mobile First
  12. 12. Content First
  13. 13. Responsive Design
  14. 14. Workflow
  15. 15. Ingredientes
  16. 16. Layout fluído width font-size margin padding
  17. 17. Imágenes flexibles < IE6
  18. 18. ProblemáticasBackground-imagebackground-size, posicionamiento absoluto, soluciones javascript ()Ancho de bandapenalización usuarios móviles, fragmentación, diferentes soluciones
  19. 19. Iconos
  20. 20. Media query
  21. 21. Media query
  22. 22. Media query
  23. 23. Enriquecimiento progresivo
  24. 24. Implementandola accesibilidadBloque 2
  25. 25. Concepto de Accesibilidad Hablar de Accesibilidad Web es hablar de un acceso universal a la Web,independientemente del tipo de hardware, software, infraestructura de red, idioma, cultura, localización geográfica y capacidades de los usuarios.
  26. 26. Concepto de Accesibilidad"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." — Sir Tim Berners-Lee
  27. 27. Tipos de DiscapacidadFísicasProblemas de Motricidad, Falta de coordinación...SensorialesCeguera, Sordera...CognitivasTrastornos de Déficit de Atención, Dislexia...Del EntornoEquipamiento y dispositivos anticuados
  28. 28. Todos somos o hemos sidodiscapacitados alguna vez
  29. 29. Web Accessibility InitiativeLa WAI es un proyecto del W3C paradesarrollar estrategias, guías y recursospara ayudar a hacer la Web más accesible w3.org/WAI/
  30. 30. Web Content AccessibilityGuidelinesGuía para crear contenido accesible, tantoen páginas como en aplicaciones Web,incluyendo: ● Textos, imágenes y sonidos ● Código o marcado de la estructura, la presentación, etc.
  31. 31. Otras guías de la WAI● ATAG Authoring Tool Accessibility Guidelines● UAAG User Agent Accessibility Guidelines● WAI-ARIA Accessible Rich Internet Applicatios suite
  32. 32. WCAG VersionesWCAG 1.0W3C Recommendation 5 Mayo 1999WCAG 2.0W3C Recommendation 11 Diciembre 2008
  33. 33. Los 4 principios de la accesibilidadPerceptibleLos usuarios deben de ser capaces de percibir la informaciónOperableLos usuarios deben ser capaces de operar con la interfazComprensibleLos usuarios deben ser capaces de comprender la información y el funcionamiento de lainterfaz de usuarioRobustoLos usuarios deben ser capaces de acceder independientemente de la tecnología
  34. 34. Las 12 pautasProporcionan los objetivos básicosque se deben lograr con el objetivode crear un contenido másaccesible para los usuariosEjemplos:Pauta 1.1. Alternativas textuales (Imágenes, Vídeos, CAPTCHAS, etc.)Pauta 2.1. Navegable (Títulos de Páginas, Encabezados, etc.)Pauta 3.1. Legible. (Idioma, Abreviaturas, etc.)
  35. 35. Los 3 niveles de conformidadSegún se cumplan los requisitos delas pautas se cumplirá con laaccesibilidad a diferente nivel ● A ● AA ● AAA
  36. 36. Ventajas de la accesibilidad Web ● Se llega a más usuarios ● Se beneficia al SEO ● Se cumple con la legalidad ● Se refuerza la imagen
  37. 37. Recomendaciones básicas
  38. 38. TipografíaQue sea legible, con un tamaño suficiente (16px mínimo) y line-height espaciosos,suficiente contraste de color, párrafos no muy largos...
  39. 39. Tipografía
  40. 40. Color Usar un esquema de colores con un contraste suficiente, teniendo en cuentalos problemas visuales que pueden haber. No usar color para significado.
  41. 41. Color
  42. 42. Color
  43. 43. Interfaz de Usuario (UI)Ayudarnos de iconos y elementos gráficos que proporcionen información extra a personas con problemas cognitivos.
  44. 44. Interfaz de Usuario (UI)
  45. 45. Interfaz de Usuario (UI)
  46. 46. Links para saltar al contenido<ul id="nav"> <li><a href="home.html">Inicio</a></li> <li><a href="who.html">Quiénes somos</a></li> <li><a href="what.html">Qué hacemos</a></li> <li><a href="contact.html">Contacto</a></li></ul><div id="#content"> <h1>Titulo</h1> ...</div>
  47. 47. Links para saltar al contenido<a id="skipnav" href="#content" title="Saltar al contenido">Saltar al contenido</a><ul id="nav"> <li><a href="home.html">Inicio</a></li> <li><a href="who.html">Quiénes somos</a></li> <li><a href="what.html">Qué hacemos</a></li> <li><a href="contact.html">Contacto</a></li></ul><div id="#content"> <h1>Titulo</h1> ...</div>
  48. 48. Marcado semántico Usar títulos, párrafos, listas... No usar divs para todo
  49. 49. Texto alternativo para imágenes Incluir atributo alt para las imágenes, de forma que pueda accederse a la información si no están disponibles.
  50. 50. Texto alternativo para imágenes
  51. 51. Texto alternativo para imágenes
  52. 52. Texto alternativo para imágenes
  53. 53. Texto alternativo para imágenes
  54. 54. Texto alternativo para imágenes<img src="/images/bandera.jpg" width="180" height="135"/><img alt="bandera" src="/images/bandera.jpg" width="180"height="135"/><img alt="Bandera tricolor blanca, azul y amarilla"src="/images/bandera.jpg" width="180" height="135" /><img src="grafico.gif" alt="Estadística sobre el porcentaje deuso de los diferentes navegadores web"longdesc="files/graficodescrito.html" />
  55. 55. Tab-index y access-keys<ul id="nav"> <li><a href="home.html" tabindex="4">Inicio</a></li> <li><a href="who.html" tabindex="1">Quiénes somos</a></li> <li><a href="what.html" tabindex="2">Qué hacemos</a></li> <li><a href="contact.html" tabindex="3">Contacto</a></li></ul><ul id="nav"> <li><a href="home.html" accesskey="a">Inicio</a></li> <li><a href="who.html" accesskey="b">Quiénes somos</a></li> <li><a href="what.html" accesskey="c">Qué hacemos</a></li> <li><a href="contact.html" accesskey="d">Contacto</a></li></ul>
  56. 56. Algunas herramientas
  57. 57. Validador del W3C validator.w3.org
  58. 58. Test de Accesibilidad Web (TAW) tawdis.net
  59. 59. Juicy Studio Color ContrastAnalyser juicystudio.com
  60. 60. Accessibility Color Wheel gmazzocato.altervista.org
  61. 61. WAVE Toolbar wave.webaim.org
  62. 62. Web Anywhere ScreenReader webanywhere.cs.washington.edu
  63. 63. Mejorando laexperienciamóvilBloque 3
  64. 64. Buenas prácticas en Web Móvil
  65. 65. Diseña para una Web Única
  66. 66. Confía en los estándares web
  67. 67. Evita riesgos conocidos
  68. 68. Sé prudente con las limitaciones
  69. 69. Optimiza la navegación
  70. 70. Comprueba gráficos y colores
  71. 71. Hazlo en pequeño
  72. 72. Economiza el uso de la red
  73. 73. Facilita la entrada de datos <input type="text" /> <input type="url" /> <input type="number" /> <input type="email" />
  74. 74. Piensa en los usuarios
  75. 75. No olvides rellenar la encuesta!!! goo.gl/47J0BGRACIAS! info@bicompatible.com .com fb.me/bicompatible @bicompatible

×