La web única. piensa en todos tus usuarios
-
Upload
fer-torres -
Category
Documents
-
view
320 -
download
3
Transcript of La web única. piensa en todos tus usuarios
![Page 1: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/1.jpg)
La Web únicaPiensa en todos tus usuarios
.com
No olvides coger tu dossier a la entrada!!!
![Page 2: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/2.jpg)
Somos bicompatible
Nayra QuesadaEspecialista en Tecnologías Web
Fer TorresEspecialista en Experiencia de Usuario
Un pequeño estudio de diseño y desarrollo especializado en usabilidad y accesibilidad Web
![Page 3: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/3.jpg)
Un vistazo rápido
Bloque 1
Afrontando una nueva realidad
Bloque 2
Implementando la accesibilidad
Bloque 3
Mejorando la experiencia móvil
![Page 4: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/4.jpg)
Afrontando una nueva realidadBloque 1
![Page 5: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/5.jpg)
No hace mucho tiempo...
![Page 6: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/6.jpg)
Más tarde...
![Page 7: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/7.jpg)
![Page 8: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/8.jpg)
![Page 9: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/9.jpg)
Cambio radical. Más dispositivos, tamaños de pantalla, resoluciones, orientaciones...
![Page 10: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/10.jpg)
El futuro ya está aquí:la Web Móvil
![Page 11: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/11.jpg)
![Page 12: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/12.jpg)
![Page 13: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/13.jpg)
![Page 14: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/14.jpg)
![Page 15: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/15.jpg)
Los paradigmas cambian
![Page 16: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/16.jpg)
Responsive Design
![Page 17: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/17.jpg)
Mobile First
![Page 18: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/18.jpg)
Content First
![Page 19: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/19.jpg)
Responsive Design
![Page 20: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/20.jpg)
Workflow
![Page 21: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/21.jpg)
Ingredientes
![Page 22: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/22.jpg)
Layout fluído
width font-size
margin padding
![Page 23: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/23.jpg)
Imágenes flexibles
< IE6
![Page 24: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/24.jpg)
Problemáticas
Background-imagebackground-size, posicionamiento absoluto, soluciones javascript ()
Ancho de bandapenalización usuarios móviles, fragmentación, diferentes soluciones
![Page 25: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/25.jpg)
Iconos
![Page 26: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/26.jpg)
Media query
![Page 27: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/27.jpg)
Media query
![Page 28: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/28.jpg)
Media query
![Page 29: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/29.jpg)
Enriquecimiento progresivo
![Page 30: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/30.jpg)
Implementando la accesibilidadBloque 2
![Page 31: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/31.jpg)
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.
![Page 32: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/32.jpg)
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
![Page 33: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/33.jpg)
Tipos de Discapacidad
FísicasProblemas de Motricidad, Falta de coordinación...
SensorialesCeguera, Sordera...
CognitivasTrastornos de Déficit de Atención, Dislexia...
Del EntornoEquipamiento y dispositivos anticuados
![Page 34: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/34.jpg)
Todos somos o hemos sido discapacitados alguna vez
![Page 35: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/35.jpg)
![Page 36: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/36.jpg)
Web Accessibility Initiative
La WAI es un proyecto del W3C para desarrollar estrategias, guías y recursos para ayudar a hacer la Web más accesible
w3.org/WAI/
![Page 37: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/37.jpg)
Web Content Accessibility Guidelines
Guía para crear contenido accesible, tanto en páginas como en aplicaciones Web, incluyendo:
● Textos, imágenes y sonidos● Código o marcado de la estructura, la
presentación, etc.
![Page 38: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/38.jpg)
Otras guías de la WAI
● ATAG Authoring Tool Accessibility Guidelines
● UAAGUser Agent Accessibility Guidelines
● WAI-ARIAAccessible Rich Internet Applicatios suite
![Page 39: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/39.jpg)
WCAG Versiones
WCAG 1.0W3C Recommendation 5 Mayo 1999
WCAG 2.0W3C Recommendation 11 Diciembre 2008
![Page 40: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/40.jpg)
Los 4 principios de la accesibilidad
PerceptibleLos usuarios deben de ser capaces de percibir la información
OperableLos usuarios deben ser capaces de operar con la interfaz
ComprensibleLos usuarios deben ser capaces de comprender la información y el funcionamiento de la interfaz de usuario
RobustoLos usuarios deben ser capaces de acceder independientemente de la tecnología
![Page 41: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/41.jpg)
Las 12 pautas
Proporcionan los objetivos básicos que se deben lograr con el objetivo de crear un contenido más accesible para los usuarios
Ejemplos:
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.)
![Page 42: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/42.jpg)
Los 3 niveles de conformidad
Según se cumplan los requisitos de las pautas se cumplirá con la accesibilidad a diferente nivel
● A● AA● AAA
![Page 43: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/43.jpg)
Ventajas de la accesibilidad Web
● Se llega a más usuarios● Se beneficia al SEO● Se cumple con la legalidad● Se refuerza la imagen
![Page 44: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/44.jpg)
Recomendaciones básicas
![Page 45: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/45.jpg)
Tipografía
Que sea legible, con un tamaño suficiente (16px mínimo) y line-height espaciosos,
suficiente contraste de color, párrafos no muy largos...
![Page 46: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/46.jpg)
Tipografía
![Page 47: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/47.jpg)
Color
Usar un esquema de colores con un contraste suficiente, teniendo en cuenta
los problemas visuales que pueden haber. No usar color para significado.
![Page 48: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/48.jpg)
Color
![Page 49: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/49.jpg)
Color
![Page 50: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/50.jpg)
Interfaz de Usuario (UI)
Ayudarnos de iconos y elementos gráficos que proporcionen información extra a
personas con problemas cognitivos.
![Page 51: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/51.jpg)
Interfaz de Usuario (UI)
![Page 52: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/52.jpg)
Interfaz de Usuario (UI)
![Page 53: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/53.jpg)
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>
![Page 54: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/54.jpg)
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>
![Page 55: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/55.jpg)
Marcado semántico
Usar títulos, párrafos, listas... No usar divs para todo
![Page 56: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/56.jpg)
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.
![Page 57: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/57.jpg)
Texto alternativo para imágenes
![Page 58: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/58.jpg)
Texto alternativo para imágenes
![Page 59: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/59.jpg)
Texto alternativo para imágenes
![Page 60: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/60.jpg)
Texto alternativo para imágenes
![Page 61: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/61.jpg)
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 de uso de los diferentes navegadores web"longdesc="files/graficodescrito.html" />
![Page 62: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/62.jpg)
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>
![Page 63: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/63.jpg)
Algunas herramientas
![Page 64: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/64.jpg)
Validador del W3C
validator.w3.org
![Page 65: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/65.jpg)
Test de Accesibilidad Web (TAW)
tawdis.net
![Page 66: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/66.jpg)
Juicy Studio Color Contrast Analyser
juicystudio.com
![Page 67: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/67.jpg)
Accessibility Color Wheel
gmazzocato.altervista.org
![Page 68: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/68.jpg)
WAVE Toolbar
wave.webaim.org
![Page 69: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/69.jpg)
Web Anywhere ScreenReader
webanywhere.cs.washington.edu
![Page 70: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/70.jpg)
Mejorando la experiencia móvilBloque 3
![Page 71: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/71.jpg)
Buenas prácticas en Web Móvil
![Page 72: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/72.jpg)
Diseña para una Web Única
![Page 73: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/73.jpg)
Confía en los estándares web
![Page 74: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/74.jpg)
Evita riesgos conocidos
![Page 75: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/75.jpg)
Sé prudente con las limitaciones
![Page 76: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/76.jpg)
Optimiza la navegación
![Page 77: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/77.jpg)
Comprueba gráficos y colores
![Page 78: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/78.jpg)
Hazlo en pequeño
![Page 79: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/79.jpg)
Economiza el uso de la red
![Page 80: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/80.jpg)
Facilita la entrada de datos
<input type="text" /> <input type="url" />
<input type="number" /> <input type="email" />
![Page 81: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/81.jpg)
Piensa en los usuarios
![Page 82: La web única. piensa en todos tus usuarios](https://reader033.fdocumento.com/reader033/viewer/2022042602/55845615d8b42a5b0a8b4f94/html5/thumbnails/82.jpg)
GRACIAS!.com
fb.me/bicompatible@bicompatible
No olvides rellenar la encuesta!!!goo.gl/47J0B