Your SlideShare is downloading. ×
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
La web única. piensa en todos tus usuarios
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

La web única. piensa en todos tus usuarios

294

Published on

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

No Downloads
Views
Total Views
294
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. No olvides coger tu dossier a la entrada!!!La Web únicaPiensa en todos tus usuarios .com
  • 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. Un vistazo rápidoBloque 1Afrontando una nueva realidadBloque 2Implementando la accesibilidadBloque 3Mejorando la experiencia móvil
  • 4. Afrontando unanueva realidadBloque 1
  • 5. No hace mucho tiempo...
  • 6. Más tarde...
  • 7. Cambio radical. Más dispositivos, tamañosde pantalla, resoluciones, orientaciones...
  • 8. El futuro ya está aquí: la Web Móvil
  • 9. Los paradigmas cambian
  • 10. Responsive Design
  • 11. Mobile First
  • 12. Content First
  • 13. Responsive Design
  • 14. Workflow
  • 15. Ingredientes
  • 16. Layout fluído width font-size margin padding
  • 17. Imágenes flexibles < IE6
  • 18. ProblemáticasBackground-imagebackground-size, posicionamiento absoluto, soluciones javascript ()Ancho de bandapenalización usuarios móviles, fragmentación, diferentes soluciones
  • 19. Iconos
  • 20. Media query
  • 21. Media query
  • 22. Media query
  • 23. Enriquecimiento progresivo
  • 24. Implementandola accesibilidadBloque 2
  • 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. 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. 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. Todos somos o hemos sidodiscapacitados alguna vez
  • 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. 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. Otras guías de la WAI● ATAG Authoring Tool Accessibility Guidelines● UAAG User Agent Accessibility Guidelines● WAI-ARIA Accessible Rich Internet Applicatios suite
  • 32. WCAG VersionesWCAG 1.0W3C Recommendation 5 Mayo 1999WCAG 2.0W3C Recommendation 11 Diciembre 2008
  • 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. 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. Los 3 niveles de conformidadSegún se cumplan los requisitos delas pautas se cumplirá con laaccesibilidad a diferente nivel ● A ● AA ● AAA
  • 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. Recomendaciones básicas
  • 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. Tipografía
  • 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. Color
  • 42. Color
  • 43. Interfaz de Usuario (UI)Ayudarnos de iconos y elementos gráficos que proporcionen información extra a personas con problemas cognitivos.
  • 44. Interfaz de Usuario (UI)
  • 45. Interfaz de Usuario (UI)
  • 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. 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. Marcado semántico Usar títulos, párrafos, listas... No usar divs para todo
  • 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. Texto alternativo para imágenes
  • 51. Texto alternativo para imágenes
  • 52. Texto alternativo para imágenes
  • 53. Texto alternativo para imágenes
  • 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. 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. Algunas herramientas
  • 57. Validador del W3C validator.w3.org
  • 58. Test de Accesibilidad Web (TAW) tawdis.net
  • 59. Juicy Studio Color ContrastAnalyser juicystudio.com
  • 60. Accessibility Color Wheel gmazzocato.altervista.org
  • 61. WAVE Toolbar wave.webaim.org
  • 62. Web Anywhere ScreenReader webanywhere.cs.washington.edu
  • 63. Mejorando laexperienciamóvilBloque 3
  • 64. Buenas prácticas en Web Móvil
  • 65. Diseña para una Web Única
  • 66. Confía en los estándares web
  • 67. Evita riesgos conocidos
  • 68. Sé prudente con las limitaciones
  • 69. Optimiza la navegación
  • 70. Comprueba gráficos y colores
  • 71. Hazlo en pequeño
  • 72. Economiza el uso de la red
  • 73. Facilita la entrada de datos <input type="text" /> <input type="url" /> <input type="number" /> <input type="email" />
  • 74. Piensa en los usuarios
  • 75. No olvides rellenar la encuesta!!! goo.gl/47J0BGRACIAS! info@bicompatible.com .com fb.me/bicompatible @bicompatible

×