![Page 1: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/1.jpg)
Módulo 2 /
Buenas prácticas en Accesibilidad Web
“Cómo resolver problemas cotidianos en el diseño web”
![Page 2: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/2.jpg)
Buenas prácticas
¿Recuerdas algo de HTML?
Antes de entrar en materia, nos cae bien una pequeña autoevaluación en el lenguaje base de la Web. ¿O creías que el HTML está “pasado de moda”? 01
![Page 3: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/3.jpg)
Buenas prácticas
¡A trabajar!Autoevaluación en HTML
Taller Nº 4
1. Del cuestionario entregado en clase por el profesor responde las preguntas.
2. Tómate unos minutos y verifica las respuestas y cuenta aquellas en que acertaste.
3. Con el cuadro propuesto a continuación interpreta los resultados .
![Page 4: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/4.jpg)
Buenas prácticas
RespuestasAutoevaluación en HTML
Taller Nº 4
• Las etiquetas <h1>, <h2> y <h3> corresponden a:– Hipervínculos– Encabezados– Listas– Tablas
![Page 5: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/5.jpg)
Buenas prácticas
RespuestasAutoevaluación en HTML
Taller Nº 4
• Para provocar la apertura de un enlace en una ventana nueva, el atributo a usar es:
– target="_parent"– target="_self"– target="_top"– target="_blank"
![Page 6: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/6.jpg)
Buenas prácticas
RespuestasAutoevaluación en HTML
Taller Nº 4
• La etiqueta <p> se utiiza para:
– Indicar el cierre de otra etiqueta– Crear un salto de línea– Marcar un párrafo– Indicar la existencia de un hipervínculo
![Page 7: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/7.jpg)
Buenas prácticas
RespuestasAutoevaluación en HTML
Taller Nº 4
• Una tabla de datos se distingue por contener las siguientes etiquetas:
– <th>, <tr>, <td>– <ol>, <ul>, <li>– <h1>, <h2>, <h3>– <form>, <legend>, <label>
![Page 8: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/8.jpg)
Buenas prácticas
RespuestasAutoevaluación en HTML
Taller Nº 4
• La forma correcta de crear un comentario es:
– <--! Aquí va el comentario -->– <-- Aquí va el comentario --!>– <-- Aquí va el comentario !-->– <!-- Aquí va el comentario -->
![Page 9: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/9.jpg)
Buenas prácticas
RespuestasAutoevaluación en HTML
Taller Nº 4
• En la siguiente línea de código para insertar una imagen existe un error, identifícalo: <img scr=logo.png>
– La etiqueta img no es válida– La extensión png no corresponde a imágenes– Faltan comillas que delimiten el nombre del objeto– El atributo src no debe acompañar a la etiqueta img
![Page 10: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/10.jpg)
Buenas prácticas
RespuestasAutoevaluación en HTML
Taller Nº 4
• Las etiquetas <ol> y <li> hacen referencia a:
– Una tabla de datos– Una lista ordenada– Una tabla de maquetación– Una lista sin orden
![Page 11: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/11.jpg)
Buenas prácticas
RespuestasAutoevaluación en HTML
Taller Nº 4
• Las etiquetas <head> y </head> se usan para delimitar en una página web:
– El encabezado– El cuerpo– Los formularios– Los párrafos
![Page 12: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/12.jpg)
Buenas prácticas
RespuestasAutoevaluación en HTML
Taller Nº 4
• Para crear un hipervínculo se utiliza la etiqueta:
– <link>– <blink>– <a>– <href>
![Page 13: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/13.jpg)
Buenas prácticas
RespuestasAutoevaluación en HTML
Taller Nº 4
• La etiqueta <a href="mailto:[email protected]"> indica que existe:
– Un enlace a una página web del mismo sitio web– Un enlace de correo electrónico– Un enlace no textual– Un enlace a una página web en otro sitio web
![Page 14: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/14.jpg)
Buenas prácticas
RespuestasAutoevaluación en HTML
Taller Nº 4
• La etiqueta <blockquote> se utiliza para definir:
– Un título– Un acrónimo– Un formulario– Una cita
![Page 15: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/15.jpg)
Buenas prácticas
RespuestasAutoevaluación en HTML
Taller Nº 4
• Identifique cuál de las siguientes afirmaciones es cierta:
– La etiqueta <ol> debe ir anidada dentro de la etiqueta <li>– La etiqueta <p> debe ir anidada dentro de la etiqueta
<strong>– La etiqueta <li> debe ir anidada dentro de la etiqueta <ul>– La etiqueta <html> debe ir anidada dentro de la etiqueta
<body>
![Page 16: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/16.jpg)
Buenas prácticas
RespuestasAutoevaluación en HTML
Taller Nº 4
• La etiqueta <summary> se utiliza para hacer un resumen en:
– Listas– Formularios– Encabezados– Tablas
![Page 17: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/17.jpg)
Buenas prácticas
RespuestasAutoevaluación en HTML
Taller Nº 4
• En un formulario, la etiqueta utilizada para agrupar campos es:
– <fieldset>– <form>– <legend>– <label>
![Page 18: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/18.jpg)
Buenas prácticas
RespuestasAutoevaluación en HTML
Taller Nº 4
• Si en una página web no se declara el tipo de documento (DTD), el navegador:
– No abrirá la página– No sabrá mostrarla correctamente al usuario– Abrirá la página más rápido de lo normal– Abrirá el código fuente de la página en el bloc de notas
![Page 19: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/19.jpg)
Buenas prácticas
Interpretaciónde los resultados
Taller Nº 4
• ¿Acertaste entre 0 y 5 respuestas?
Tus conocimientos sobre HTML son escasos, pero visitar algunos recursos en Internet sobre el tema y practicar bastante te ayudará a aprender más cada día.
![Page 20: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/20.jpg)
Buenas prácticas
Interpretaciónde los resultados
Taller Nº 4
• ¿Acertaste entre 6 y 12 respuestas?
¡Bien! Se nota que te has acercado a este lenguaje, pero aún tienes dudas que puedes resolver estudiando más sobre HTML, y sobre todo, practicando.
![Page 21: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/21.jpg)
Buenas prácticas
Interpretaciónde los resultados
Taller Nº 4
• ¿Acertaste entre 13 y 15 respuestas?
¡Excelente! Tus conocimientos en cuanto a HTML son altos, te has metido de lleno en el tema. Pero, ¿por qué no repasar un poco más?
![Page 22: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/22.jpg)
Buenas prácticas
Estándares y estructura
Para evitar caer en el caos y para que la Web alcance su máximo potencial, se ha creado el Consorcio W3C, que entre otras cosas emite estándares para la industria.
02
![Page 23: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/23.jpg)
Buenas prácticas
“- Jeffrey Zeldman
“El 99,9% de los sitios Web están mal diseñados”
![Page 24: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/24.jpg)
Buenas prácticas
Lectura altamente recomendada
Diseño con estándares Web, Editorial Anaya, España.
Amazon: USD $28
![Page 25: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/25.jpg)
Buenas prácticas
TimBernersLee
HTML(1990)
![Page 26: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/26.jpg)
Buenas prácticas
¿Para qué el HTML?
Compartir documentos entre científicos
![Page 27: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/27.jpg)
Buenas prácticas
(1994)HTML: Rumbo comercial
![Page 28: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/28.jpg)
Buenas prácticas
CSS(1997)BertBoss
![Page 29: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/29.jpg)
Buenas prácticas
Por Roger Johanssonhttp://www.456bereastreet.com/archive/200605/levels_of_html_knowledge/
Tus niveles de HTML
![Page 30: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/30.jpg)
Buenas prácticas
Nivel 0
“¿HTML quéeee?”
![Page 31: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/31.jpg)
Buenas prácticas
Nivel 1
“¿HTML? Son esas etiquetas que usan para hacer el texto en negrillas o itálicas ”
![Page 32: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/32.jpg)
Buenas prácticas
“
Nivel 2
Diseño en Dreamweaver (o FrontPage) se ve bien en Explorer, así que ¿por qué debo
siquiera ver el HTML?”
![Page 33: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/33.jpg)
Buenas prácticas
Nivel 3
“Sí, sí, he escuchado algo de esa nueva etiqueta ul y h1, pero me va bien con las etiquetas
table, img y br”
![Page 34: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/34.jpg)
Buenas prácticas
Nivel 4
“¿Cómo puedo crear una tabla de datos con divs y spans en vez de tablas? ”
![Page 35: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/35.jpg)
Buenas prácticas
Nivel 5
“Mmm. Creo que estructuralmente es mejor usar listas de definición en esta parte del
documento”
![Page 36: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/36.jpg)
Buenas prácticas
Nivel 6
“Creo que las especificaciones HTML 4.01 y XHTML 2 son muy limitados semánticamente,
así que estoy trabajando en un lenguaje de marcado de nuevo tipo ”
![Page 37: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/37.jpg)
Buenas prácticas
Por Emil Stenström
http://friendlybit.com/css/levels-of-css-knowledge/
Tus niveles de CSS
![Page 38: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/38.jpg)
Buenas prácticas
Nivel 0
“Mmm… CSS… ¿será la última versión de PhotoShop?”
![Page 39: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/39.jpg)
Buenas prácticas
Nivel 1
“Sí, lo utilizo para eliminar el subrayado de los enlaces algunas veces”
![Page 40: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/40.jpg)
Buenas prácticas
Nivel 2
“No, no me gustan los divs. Las tablas son mucho mejor para maquetar una página Web”
![Page 41: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/41.jpg)
Buenas prácticas
Nivel 3
“Sí, he oído que está bien trabajar con CSS pero yo no lo utilizo por…”
![Page 42: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/42.jpg)
Buenas prácticas
Nivel 4
“¡Claro que sé qué es CSS! Utilizo divs en todas mis plantillas”
![Page 43: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/43.jpg)
Buenas prácticas
Nivel 5
“Utilizo CSS para el diseño, es mejor que las tablas porque…”
![Page 44: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/44.jpg)
Buenas prácticas
Nivel 6
“¿Qué versión de CSS? Sí, lo he hecho. Has leído mi libro sobre…”
![Page 45: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/45.jpg)
Buenas prácticas
Fórmula para páginas web torpes:
![Page 46: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/46.jpg)
Buenas prácticas
Etiquetas desaconsejadas en HTML
![Page 47: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/47.jpg)
Buenas prácticas
<head></head>
CABECERA
DECLARACIÓN
CUERPO
<html>
</html>
<body></body>
Etiquetas estructurales
![Page 48: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/48.jpg)
Buenas prácticas
¡Marcar según la estructura!
![Page 49: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/49.jpg)
Buenas prácticas
![Page 50: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/50.jpg)
Buenas prácticas
Etiquetas para listas
![Page 51: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/51.jpg)
Buenas prácticas
Listas con orden específico
![Page 52: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/52.jpg)
Buenas prácticas
Listas sin orden específico
![Page 53: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/53.jpg)
Buenas prácticas
Listas de definiciones
![Page 54: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/54.jpg)
Buenas prácticas
Lectura altamente recomendada
Transcending CSS: the fine art of web design, Andy Clarke
Amazon: USD $32
![Page 55: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/55.jpg)
Buenas prácticas
¡A trabajar!Hola Mundo
Taller Nº 5
1. Abre el bloc de notas o programa similar. Y escribe manualmente la estructura básica de HTML.
2. Guarda tu documento con tu nombre en el escritorio, por ejemplo “mario_carvajal.html”, no olvidando escribir la extensión .html en minúsculas.
3. Dentro del cuerpo del documento, copia y pega el texto proporcionado por el profesor, llamado “El Factor Humano.rtf”.
![Page 56: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/56.jpg)
Buenas prácticas
¡A trabajar!Hola Mundo
Taller Nº 5
4. Aplica las etiquetas en HTML que consideres apropiadas, por ejemplo <h1>, <h2>, <h3>, <p>, <ul>, <a>, <img>, <dl>, <strong>, <em>, etc.
5. Verifica en el navegador Firefox permanentemente, la visualización del documento y cuando lo tengas todo listo, envíalo a [email protected] para la revisión grupal.
![Page 57: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/57.jpg)
Buenas prácticas
¡A trabajar!Hola Mundo
Taller Nº 5
1. Declara un tipo de documento.
2. Verifica en la barra Web Developer que el renderizado del documento se realiza según estándares y no en Quirks Mode.
3. Valida en el sitio del W3C, el HTML y corrobóralo con el plugin HTML Validator.
![Page 58: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/58.jpg)
Buenas prácticas
Un corto ejercicio...
La primera línea
1. Abre en Firefox los sitios: YouTube, El Tiempo y Wikipedia.
2. Copia la primera línea y pégala en un bloc de notas.
3. Analiza el código de cada uno de los tres ejemplos.
![Page 59: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/59.jpg)
Buenas prácticas
¡Por el amor de Dios, declara un tipo de documento!
![Page 60: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/60.jpg)
Buenas prácticas
Ejemplos de DOCTYPE
![Page 61: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/61.jpg)
Buenas prácticas
Quirks Mode: ¡modo chambón!
Modo chapucero
Modo de compilación correcto
![Page 62: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/62.jpg)
Buenas prácticas
CSS para el diseño
![Page 63: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/63.jpg)
Buenas prácticas
¿Vale la pena diseñar con CSS?
![Page 64: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/64.jpg)
Buenas prácticas
Ventajas para el usuario
• Páginas más livianas• Mayor accesibilidad• Mejora en la usabilidad• Estilos para impresión y
dispositivos móviles
![Page 65: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/65.jpg)
Buenas prácticas
Ventajas para el diseñador
• Eficacia en cambios gráficos• Más posibilidades gráficas• Mayor control sobre el diseño• Redefinición de etiquetas• Adiós a etiquetas
desaconsejadas
![Page 66: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/66.jpg)
Buenas prácticas
Ventajas para la organización
• Ahorro de transferencia• Sencillo mantenimiento• Compatibilidad al futuro• Mejor posicionamiento en
buscadores
![Page 67: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/67.jpg)
Buenas prácticas
¿Diseñar con CSS limita la imaginación y las posibilidades del diseñador?
NO
![Page 68: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/68.jpg)
Buenas prácticas
CSS Zen Garden
![Page 69: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/69.jpg)
Buenas prácticas
¡A trabajar!Una breve práctica en CSS
Taller Nº 6
• Descarga del ftp del curso, el archivo “factor-humano.zip”; descomprímelo y guarda esta carpeta en tu escritorio.
• Abre Dreamweaver o el bloc de notas y guarda un archivo con el nombre “estilos-pantalla.css” dentro de la carpeta “factor-humano”.
![Page 70: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/70.jpg)
Buenas prácticas
¡A trabajar!Una breve práctica en CSS
Taller Nº 6
• Abre en Dreamweaver o en el bloc de notas cada uno de los seis documentos HTML. Y en el encabezado (es decir, entre las etiquetas <head> y </head>) vincula la hoja de estilos, con un código como este:
<link href="estilos-pantalla.css" rel="stylesheet" type="text/css" media="screen" />
![Page 71: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/71.jpg)
Buenas prácticas
¡A trabajar!Una breve práctica en CSS
Taller Nº 6
• Modifica el diseño del sitio, creando reglas dentro de la hoja de estilos, que modifiquen el diseño predeterminado de las etiquetas.
http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/
![Page 72: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/72.jpg)
Buenas prácticas
¡A trabajar!Una breve práctica en CSS
Taller Nº 6
• Ahora, ¿por qué no generas una hoja de estilo para impresión? Es muy sencillo, debes crear otro documento al que puedes llamar “estilos-impresion.css”.
<link href="estilos-impresion.css" rel="stylesheet" type="text/css" media="print" />
• Genera estilos únicamente para impresión y verifica el resultado a través de la vista previa de impresión de tu navegador.
![Page 73: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/73.jpg)
Buenas prácticas
¡A trabajar!Una breve práctica en CSS
Taller Nº 6
• [OPCIONAL] Y si todo esto te ha gustado, te invito a que diseñes una hoja de estilo para dispositivos de mano (celulares, PDA, etc.), con una hoja de estilos nueva llamada “estilos-celular.css”, incrustándola a través del siguiente código en el encabezado de cada uno de los seis documentos HTML:
<link href="estilos-celular.css" rel="stylesheet" type="text/css" media="handheld" />
![Page 74: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/74.jpg)
Buenas prácticas
¡A trabajar!Una breve práctica en CSS
Taller Nº 6
• Cuando hayas terminado, comprime la carpeta en formato .ZIP y envíala al correo del profesor [email protected], para publicarla en la web del curso y revisarla con el resto de compañeros.
• A través del sitio oficial del W3C (www.w3c.org) valida la hoja de estilos y verifica que no tenga errores. Este proceso de validación puedes hacerlo localmente, a través de la barra Web Developer.
![Page 75: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/75.jpg)
Buenas prácticas
Firefox y sus complementos: ¡indispensables!
![Page 76: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/76.jpg)
Buenas prácticas
Firebug: para entender el código y mucho más...
![Page 77: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/77.jpg)
Buenas prácticas
Validator: validación al instante
![Page 78: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/78.jpg)
Buenas prácticas
Web Developer: ¿podrías vivir sin ella?
![Page 79: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/79.jpg)
Buenas prácticas
Imágenes
Las imágenes de un sitio web deben tener un texto equivalente que contenga la misma información que la imagen transmite, para ello se usa el atributo alt y longdesc.
03
![Page 80: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/80.jpg)
Buenas prácticas
Para imágenes sencillas, una descripción breve
![Page 81: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/81.jpg)
Buenas prácticas
Cómo usar el atributo “alt”
<img src="rene_higuita.jpg" alt="Arquero René Higuita haciendo El Escorpión" />
![Page 82: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/82.jpg)
Buenas prácticas
¿Y si un usuario tiene las imágenes deshabilitadas?
![Page 83: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/83.jpg)
Buenas prácticas
Imágenes decorativas:Atributo alt nulo y vacío
• Nulo: para que el lector de pantalla “salte” la imagen. Ej: <img src=”archivo.jpg" alt="" />
• Vacío: el lector de pantalla tiene en cuenta la imagen pero no lee texto alternativo. Ej:<img src=”archivo.jpg" alt=" " />
![Page 84: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/84.jpg)
Buenas prácticas
Recomendación:
"No olvides cerrar la etiqueta de imagen"
Mal:<img src="archivo.jpg" alt="Descripción de la imagen">
Bien:<img src="archivo.jpg" alt="Descripción de la imagen" />
![Page 85: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/85.jpg)
¿Un ciego cómo accedería a un contenido visual en la Web?
![Page 86: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/86.jpg)
Buenas prácticas
Errores más comunes...
• No se ha definido el atributo alt
![Page 87: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/87.jpg)
Buenas prácticas
Errores más comunes...
• El atributo alt tiene una descripción inoportuna
![Page 88: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/88.jpg)
Buenas prácticas
¡A trabajar!Textos alternativos en imágenes
Taller Nº 7
• Descarga desde el ftp del curso, el archivo comprimido “macbook.zip”, guárdalo en tu escritorio y descomprímelo.
• Abre el archivo index.html y observa las imágenes que
componen la página.
• Define el atributo alt que consideres más adecuado, para cada una de las imágenes, teniendo en cuenta, textos descriptivos, alt nulo y alt vacío.
![Page 89: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/89.jpg)
Buenas prácticas
Imágenes complejas:atributo longdesc
![Page 90: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/90.jpg)
Buenas prácticas
Cómo usar el atributo longdesc
<img src="dominios.jpg" alt="Gráfico estadístico de dominios TLD en el mundo" longdesc="dominios.html" />
Ejemplo...
![Page 91: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/91.jpg)
Buenas prácticas
¡A trabajar!Imágenes con descripciones largas
Taller Nº 8
• Visita el sitio www.elpais.com.co y busca en cualquier sección, las imágenes que necesiten descripción alternativa.
• Selecciona una de ellas y: a) Asígnale el atributo longdesc; b) Desarrolla el HTML correspondiente a la descripción extensa.
![Page 92: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/92.jpg)
Buenas prácticas
Multimedia
La web ha dejado de ser solo texto e imagen. Los avances tecnológicos, han permitido enriquecer los contenidos de los sitios web, al punto de convertirlos en elementos cotidianos para los usuarios.Es hora de hacerlos accesibles.
04
![Page 93: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/93.jpg)
CASO 1.
GERARDO TIENE DAÑADA LA TARJETA DE SONIDO
![Page 94: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/94.jpg)
Buenas prácticas
Gerardo necesita ver un video de Lee Lefever sobre RSS
• http://www.youtube.com/watch?v=0klgLsSxGsU
![Page 95: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/95.jpg)
Buenas prácticas
¿Cómo le ayudaríamos a Gerardo?
• Le arreglaría la tarjeta de sonido.• Le agregaría subtítulos a la banda sonora y haría un
resumen del contenido más importante.• Le sugeriría que pidiera un computador prestado.
![Page 96: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/96.jpg)
Buenas prácticas
Recomendación:
Cómo poner subtítulos a los videos
http://dotsub.com/view/69aa48a4-a95f-4bc8-a511-bb0a1ee95e12
http://astrolabio.com.co/clientes/cintel/modulo2-conceptos-y-buenas-practicas/multimedia/respuestas/transcripcion_video_lee_lefever.html
![Page 97: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/97.jpg)
Buenas prácticas
¡A trabajar!Subtitulando videos en YouTube
Taller Nº 9
• Si aún no tienes cuenta en YouTube, ¡crea una!• Con la cámara proporcionada por el profesor, graba
un video de 20 segundos, donde digas tu nombre y respondas a la pregunta ¿por qué es importante subtitular un video?
• Descarga el video a tu computador y ¡súbelo a YouTube!
![Page 98: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/98.jpg)
Buenas prácticas
Taller Nº 9
• Crea en el bloc de notas un archivo al que debes nombrar como “subtitulo.sub” y guárdalo en tu computador. Cuida que la extensión no quede .txt.
• Transcribe el audio que grabaste.• Aplica el formato SUB
0:00:01.00,0:00:10.000Esto debe aparecer del segundo 1 hasta el segundo 10
0:00:13.00,0:00:20.000Esto debe aparecer del segundo 13 hasta el segundo 20
![Page 99: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/99.jpg)
Buenas prácticas
Taller Nº 9
• Crea en el bloc de notas un archivo al que debes nombrar como “subtitulo.sub” y guárdalo en tu computador. Cuida que la extensión no quede .txt.
• Transcribe el audio que grabaste.• Aplica el formato SUB
0:00:01.00,0:00:10.000Esto debe aparecer del segundo 1 hasta el segundo 10
0:00:13.00,0:00:20.000Esto debe aparecer del segundo 13 hasta el segundo 20
![Page 100: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/100.jpg)
Caso 2. Juliana navega
desde una biblioteca
![Page 101: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/101.jpg)
Buenas prácticas
¿Cuál es el problema de Juliana, si está en un ambiente sin ruido?
Necesita escuchar el podcast del profesor Alex Hernández para su trabajo sobre el taller literario... Pero... No puede acceder al audio.
![Page 102: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/102.jpg)
Buenas prácticas
¿Cómo le ayudaríamos a Juliana?
• Le sugeriría que se fuera para su casa, donde puede encender los parlantes.
• Le prestaría unos audífonos.• Transcribiría en la misma página web todo el audio.• No usaría podcast en el sitio.
![Page 103: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/103.jpg)
Buenas prácticas
¡Transcribe el audio!
http://mercadeoglobal.com/articulos/articles/349/1/Cual-es-el-Objetivo-de-las-Paginas-de-Captacion-de-Suscriptores-/Pagina1.html
![Page 104: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/104.jpg)
Buenas prácticas
¡A trabajar!Generando un PodCast accesible
Taller Nº 10
• Graba una entrevista de máximo un minuto.• Súbela a cualquiera de los servicios de PodCast que
hay en la Web.• Crea un archivo HTML y pega ahí el archivo de audio
en streaming.• Escribe bajo el archivo de audio, toda la información
relacionada con el mismo (peso, formato, posibilidad de descarga, etc.) y, por supuesto, la transcripción.
![Page 105: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/105.jpg)
Caso 3. Santiago usa Jaws, un
lector de pantalla
![Page 106: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/106.jpg)
Buenas prácticas
Santiago desea acceder al mapa de Bogotá (¡está en Flash!)
Jaws no puede leer el contenido de un objeto en Flash... ¡Ops!
http://gobiernobogota.gov.co/
![Page 107: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/107.jpg)
Buenas prácticas
¿Cómo le ayudaríamos a Santiago?
• Le sugeriría que una persona no invidente le ayudara, usando el ratón.
• Agregaría un equivalente textual, con hipervínculos redundantes.
• No usaría animaciones Flash en el sitio.• Haría la sugerencia para que la próxima versión de
Jaws lea el contenido de Flash.
![Page 108: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/108.jpg)
Buenas prácticas
¡Contenido alternativo!<object width="640" height="255" data="nombre-de-tu-archivo-en-flash.swf" type="application/x-shockwave-flash"> <param name="WMode" value="transparent"/> <param name="quality" value="high"/> <param name="menu" value="false"/> <param name="movie" value="nombre-de-tu-archivo-en-flash.swf"/> <p>Aquí ponemos el contenido alternativo.</p>
</object>
![Page 109: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/109.jpg)
Buenas prácticas
¡A trabajar!Contenido alternativo en Flash
Taller Nº 11
• Crea un nuevo archivo HTML, donde incluirás el video de YouTube que elaboraste en el Taller Nº 9 y el audio que grabaste en el Taller Nº 10.
• Utiliza el código proporcionado por el profesor.• Verifica que este código valide con cero errores en XHTML.• Corrobora que es accesible, el contenido, para aquellos
casos donde el usuario no tenga habilitado el plugin de Flash.
![Page 110: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/110.jpg)
Buenas prácticas
Lenguaje y comprensión
Escribir para la Web tiene unas implicaciones diferentes: la titulación, el marcado estructural, los metadatos, hacen que la labor del escritor web sea un poco diferente del trabajo tradicional para otros medios.
05
![Page 111: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/111.jpg)
Buenas prácticas
Identifica idioma principal
Existen varios métodos para identificar el idioma principal:• atributos lang o xml:lang de la etiqueta <html>• etiqueta meta correspondiente al encabezado HTTP• campo Content-Language en el encabezado de una
respuesta HTTP
![Page 112: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/112.jpg)
Buenas prácticas
Cómo identificar el idioma principal en la etiqueta <html>
• Si el documento es HTML<html lang=“es”>
• Si el documento es XHTML (servido como HTML)<html lang=“es” xml:lang=“es”>
• Si el documento es XHTML (servido como XML)<html xml:lang=“es”>
![Page 113: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/113.jpg)
UN RÁPIDO VIAJE AL FUTUROAño 2012
![Page 114: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/114.jpg)
Buenas prácticas
Juan David y su auto Nissan Ruge
—"Tal vez uno de los mejores libros que he leído sobre CSS es el de Andy Clarke, cuyo título es Transcending CSS: The Fine Art of Web Design"
![Page 115: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/115.jpg)
Buenas prácticas
¿Cómo le ayudaríamos a Juan David?
• Escribiría únicamente en español los textos.• Sinceramente no creo que la gente navegue en el futuro
de esa forma, es imposible.• Marcaría todo el contenido que esté en otro idioma.• Grabaría a una persona que narre el contenido y lo
subiría en MP3 para que Juan Felipe active el audio que yo he proporcionado.
![Page 116: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/116.jpg)
Buenas prácticas
Identifica el cambio de idioma
<p>Tal vez uno de los mejores libros que he leído sobre CSS es el de <span lang="en">Any Clarke</span>, cuyo título es <span lang="en">Transcending CSS: The Fine Art of Web Design</span></p>
![Page 117: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/117.jpg)
Buenas prácticas
¡A trabajar!Identificando el idioma de un documento Taller Nº 12
• Crea un nuevo archivo HTML, en Dreamweaver.• Pega el contenido proporcionado por el profesor en el
documento HTML y estructúralo.• Identifica tanto el idioma principal, como los respectivos
cambios parciales de idioma.• RETO: a través de la hoja de estilo CSS, identifica
mediante algún cambio en el diseño tipográfico el cambio de idioma (sin usar clases, sin usar estilos en línea). ¡Sí se puede!
![Page 118: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/118.jpg)
Buenas prácticas
Texto a pegar...
Día del amor y la amistad
A propósito del inicio de otoño, me gustaría contaros que en Colombia se celebra el Día de San Valentín en septiembre y no en febrero. Veamos este texto que leí hace poco:
“Se acerca el día del amor y la amistad. Es septiembre y en la Torre de Babel de nuestro campus, solo escuchamos frases como I love You (inglés), Je t'aime (francés), Ich liebe Dich (alemán), Mi amas vin (esperanto), Ñuca yaquirini (quechua)”.
—Tomado del artículo "The lovers", traducido por Guiseppe Fiumarelli
![Page 119: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/119.jpg)
Buenas prácticas
La audiencia globalEl caso del fotógrafo brasilero
![Page 120: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/120.jpg)
Buenas prácticas
Joao busca información sobre la técnica HDR para fotografías de paisajes
• Joao Oliveira – Fotógrafo brasilero• Arturo Bernal – Blogger guatemalteco
![Page 121: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/121.jpg)
Buenas prácticas
¿Qué recomendación le darías a Arturo?
• Arturo... en tu blog deberías considerar la traducción al inglés y al portugués.
• Arturo... escribe en un español más sencillo y universal, sin jerga, ni costumbrismos.
• Arturo... coloca en tu blog el servicio automático de traducción a 10 idiomas.
![Page 122: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/122.jpg)
Buenas prácticas
¡Usar un lenguaje claro y sencillo!
• Usar encabezados• Ubicar la idea principal al inicio• Emplear un vocabulario sencillo• Crear listas• Destacar las palabras importantes• Texto formateado
![Page 123: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/123.jpg)
Buenas prácticas
Hanna y la Embajada de Colombia en Francia
![Page 124: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/124.jpg)
Buenas prácticas
¿Qué haríamos para ayudarle a Anna?
• Crearía un Newsletter para enviarle al correo todas las novedades y mantenerla informada sobre Colombia.
• Le pondría un icono de favoritos, con el escudo de Colombia.
• Utilizaría la etiqueta <h1> para dar el título al documento.
• Titularía la página web a través de <title>.
![Page 125: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/125.jpg)
Buenas prácticas
¡Escribe metadata!
Metadatos = datos sobre los datos
![Page 126: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/126.jpg)
Buenas prácticas
Metadatos en fotografías
![Page 127: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/127.jpg)
Buenas prácticas
Metadatos en música
![Page 128: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/128.jpg)
Buenas prácticas
Metadatos en páginas web
![Page 129: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/129.jpg)
Buenas prácticas
El titulo de una página web (para qué diablos sirve)
Etiqueta <title>
![Page 130: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/130.jpg)
Buenas prácticas
Título para la ventana
![Page 131: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/131.jpg)
Buenas prácticas
Título en la barra de tareas
![Page 132: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/132.jpg)
Buenas prácticas
Título en la pestaña
![Page 133: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/133.jpg)
Buenas prácticas
Historial de navegación
![Page 134: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/134.jpg)
Buenas prácticas
Favoritos o marcadores
![Page 135: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/135.jpg)
Buenas prácticas
Titulos SERP
![Page 136: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/136.jpg)
Buenas prácticas
Marcadores del.icio.us
![Page 137: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/137.jpg)
Buenas prácticas
Botón “atrás”
![Page 138: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/138.jpg)
Buenas prácticas
Entonces... ¿Por qué diantres no ponerle titulo a un documento?
![Page 139: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/139.jpg)
Buenas prácticas
Consejos para titular una página web
• Títulos diferentes• Decoración ASCII• Longitud • Claridad y brevedad • El nombre del portal • Coincidencias con el contenido
![Page 140: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/140.jpg)
Buenas prácticas
Los elementos META
• Description: proporciona el sumario o resumen.• Keyword: señala las palabras clave del documento.• Author: es la persona u organización que escribió el
documento.• Robots: para indicarle a los motores de búsqueda
cómo comportarse en la página: "indéxame, no me indexes, busca nuevos enlaces, no sigas los enlaces".
![Page 141: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/141.jpg)
Buenas prácticas
¡A trabajar!Titulando correctamente una página web Taller Nº 13
• En tu navegador ingresa a Google. • Busca todas las páginas web de El País que están
indexadas en Google. Recuerda que esto lo puedes hacer con la búsqueda “site:www.elpais.com.co”.
• De los resultados arrojados, observa los primeros 20 resultados y sácalos en un documento de Word.
![Page 142: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/142.jpg)
Buenas prácticas
¡A trabajar!Titulando correctamente una página web Taller Nº 13
• Elabora una tabla en el documento de Word, y escribe en la primera columna los títulos actuales que aparecen en Google y en la segunda columna los títulos propuestos por ti, según las observaciones vistas en clase.
• Visita las páginas de El País y verifica el uso de etiquetas META.
• Reflexiona sobre las ventajas del cambio de títulos de nuestro periódico, en clase con tus compañeros.
![Page 143: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/143.jpg)
Buenas prácticas
Ortografía y ortotipografía
¡A escribir bien, señores!
![Page 144: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/144.jpg)
Buenas prácticas
El Testamento de Facundo (o el peligro de no usar puntuación)
Yo dejo mis bienes a mi hijo no a mi sobrino tampoco nunca se pagará la cuenta del sastre no dejo mis bienes a mi esposa no a mi cuñado. Que mis deseos sean lo que dispongas tu amigo Facundo Fonseca
![Page 145: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/145.jpg)
Buenas prácticas
El hijo...
“Yo dejo mis bienes a mi hijo, no a mi sobrino. Tampoco nunca se pagará la cuenta del sastre. No dejo mis bienes a mi esposa, no a mi cuñado. Que mis deseos sean lo que dispongas. Tu amigo, Facundo Fonseca”.
![Page 146: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/146.jpg)
Buenas prácticas
El sobrino...
"Yo dejo mis bienes: ¿a mi hijo? No. A mi sobrino. Tampoco nunca se pagará la cuenta del sastre. No dejo mis bienes a mi esposa, no a mi cuñado. Que mis deseos sean lo que dispongas. Tu amigo, Facundo Fonseca.”
![Page 147: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/147.jpg)
Buenas prácticas
El sastre...
"Yo dejo mis bienes: ¿a mi hijo? No. ¿A mi sobrino? Tampoco. ¡Nunca! Se pagará la cuenta del sastre. No dejo mis bienes a mi esposa, no a mi cuñado. Que mis deseos sean lo que dispongas. Tu amigo, Facundo Fonseca.”
![Page 148: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/148.jpg)
Buenas prácticas
La esposa...
"Yo dejo mis bienes: ¿a mi hijo? No. ¿A mi sobrino? Tampoco. Nunca se pagará la cuenta del sastre, no. Dejo mis bienes a mi esposa, no a mi cuñado. Que mis deseos sean lo que dispongas. Tu amigo, Facundo Fonseca.”
![Page 149: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/149.jpg)
Buenas prácticas
El cuñado...
"Yo dejo mis bienes: ¿a mi hijo? No. ¿A mi sobrino? Tampoco. Nunca se pagará la cuenta del sastre. No dejo mis bienes a mi esposa, no. A mi cuñado. Que mis deseos sean lo que dispongas. Tu amigo, Facundo Fonseca.”
![Page 150: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/150.jpg)
Buenas prácticas
El juez amigo...
"Yo dejo mis bienes: ¿a mi hijo? No. ¿A mi sobrino? Tampoco. Nunca se pagará la cuenta del sastre. No dejo mis bienes a mi esposa. No a mi cuñado. Que mis deseos sean lo que dispongas tú, amigo. Facundo Fonseca.”
![Page 151: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/151.jpg)
Buenas prácticas
¡A trabajar!Recordando reglas de ortografías Taller Nº 14
• En tu navegador ingresa a este sitio: http://concurso.cnice.mec.es/cnice2006/material100/index.htm y responde las preguntas.
• Descarga del FTP del curso el archivo “Google Apps.txt.zip” y descomprímelo.
![Page 152: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/152.jpg)
Buenas prácticas
¡A trabajar!Recordando reglas de ortografías Taller Nº 14
• Edita el contenido de este documento: ortografía, ortotipografía, subtitulación, sintaxis...
• Crea con este texto un documento en HTML que tenga en cuenta todos los conceptos vistos en el capítulo relacionado con Lenguaje, de este curso de accesibilidad.
![Page 153: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/153.jpg)
Buenas prácticas
Color
En la selección del color para la interfaz de usuario, hay unos aspectos técnicos que el diseñador debe contemplar antes de decidir (subjetivamente) qué color usar y cómo usarlo.
06
![Page 154: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/154.jpg)
Buenas prácticas
Kristopher y su forma de ver el mundo
![Page 155: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/155.jpg)
Buenas prácticas
Al intentar llenar este formulario, Kristopher no entendió qué día debería marcar como preferido...
![Page 156: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/156.jpg)
Buenas prácticas
El formulario que originalmente diseñó el webmáster fue...
Tomado del blog de Olga Carrerashttp://olgacarreras.blogspot.com/2006/09/daltonismo-y-accesibilidad-un-caso-real.html
![Page 157: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/157.jpg)
Buenas prácticas
Entonces... ¿qué pasó?
8%daltónicos
![Page 158: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/158.jpg)
Buenas prácticas
Antes de continuar... una pequeña prueba
Puedes tomarla también en:http://colorvisiontesting.com/
Diseñada por: Terrace L. Waggoner, O.D. Gulf Breeze, FL USA
![Page 159: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/159.jpg)
Buenas prácticas
Trate de encontrar un círculo, una estrella y un cuadrado, en tres segundos...
Respuesta: todo el mundo está en capacidad de ver un círculo, una estrella y un cuadrado... ¡No hay por qué entusiasmarse!
![Page 160: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/160.jpg)
Buenas prácticas
Trate de encontrar un círculo, una estrella y/o un cuadrado, en tres segundos...
Respuesta: los daltónicos deben ver el cuadrado amarillo. Individuos con visión normal deberían ver el cuadrado amarillo y un "débil" círculo marrón
![Page 161: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/161.jpg)
Buenas prácticas
Trate de encontrar un círculo, una estrella y/o un cuadrado, en tres segundos...
Respuesta: los daltónicos deben ver el círculo amarillo. Individuos con visión normal deberían ver el círculo amarillo y un "débil" cuadrado marrón
![Page 162: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/162.jpg)
Buenas prácticas
Tratar de encontrar un perro, un barco, un globo, o un coche...
Respuesta: los daltónicos no deben ver nada. Individuos con visión normal deberían ver un leve barco marrón
![Page 163: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/163.jpg)
Buenas prácticas
Ahora, una prueba pero al revés...
Puedes tomarla también en:http://www.cs.unm.edu/~aaron/creative/colorTest.htm
Diseñada por: Aaron Clauset
![Page 164: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/164.jpg)
Buenas prácticas
Tratar de encontrar un número...
Respuesta: los daltónicos deberían ver un número... ¿cuál?
![Page 165: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/165.jpg)
Buenas prácticas
Tratar de encontrar una figura geométrica...
Respuesta: los daltónicos deberían ver un círculo
![Page 166: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/166.jpg)
Buenas prácticas
Siguiendo con el caso de Kristopher... ¿si tú fueras el webmáster qué harías?
• Además de transmitir la información en colores, lo haría con marcadores o variaciones tipográficas.
• No usaría un calendario.• Haría el calendario en blanco y negro.• Pondría una nota que advirtiera que el calendario no es
apto para daltónicos (y que además debe verse en Internet Explorer con resolución de pantalla de 800 x 600).
![Page 167: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/167.jpg)
Buenas prácticas
Susan y su impresora láser en blanco y negro
![Page 168: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/168.jpg)
Buenas prácticas
Susan imprimió el informe para presidencia en su impresora láser blanco y negro, este es el resultado...
![Page 169: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/169.jpg)
Buenas prácticas
Realmente, en la página web de donde copió el gráfico, se ve así...
![Page 170: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/170.jpg)
Buenas prácticas
¿Si tú fueras el webmáster qué harías?
• Representaría el gráfico no en barras, sino en pastel.• No presento un gráfico, sino una tabla.• Además de usar la leyenda que explica el equivalente de
color, marcaría al lado de cada barra, la serie a la que pertenece.
• Sugeriría que si va a imprimir el gráfico, es necesario hacerlo en impresoras a color.
![Page 171: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/171.jpg)
Buenas prácticas
¡A trabajar!Evaluando el color desde el punto de vista del daltónico Taller Nº 15
• Entra a Flickr y realiza una búsqueda avanzada.• Busca 5 fotografías sobre Cartagena, licenciadas con
Creative Commons y descárgalas. • Realiza la simulación de cómo vería un daltónico esta
foto, a través de la web: www.vischeck.com
![Page 172: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/172.jpg)
Buenas prácticas
Taller Nº 15
• Ingresa a la web de Color Hunter.• Sube una de las cinco fotografías de Cartagena que
bajaste de Flickr.• Guarda la paleta de colores, para el siguiente taller.
![Page 173: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/173.jpg)
Buenas prácticas
Taller Nº 15
• Ingresa a www.technosite.es/SRV/accesibilidadsite1.html para descargar la barra AIS. Hazlo e instálala en tu Internet Explorer.
• Ingresa al sitio web www.elpais.com.co y revisa la página de inicio y 5 páginas internas, convirtiéndolas a blanco y negro a través de la barra AIS (Color > Escala de grises).
![Page 174: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/174.jpg)
Buenas prácticas
Alberto y su brillante presentación
![Page 175: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/175.jpg)
Buenas prácticas
¿Si tú fueras el webmáster qué harías?
• Usaría siempre texto negro sobre fondo blanco.• No diseñaría texto gris.• Comprobaría que el contraste en brillo y color supera el
umbral establecido por el W3C.• Diseñaría los sitios con fondo negro y letra blanca.• Programaría un JavaScript que calibre automáticamente
el monitor del usuario.
![Page 176: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/176.jpg)
Buenas prácticas
Fórmula para establecer la diferencia de brillo
1
2
3 125 umbral mínimo
€
Rojo× 299( ) + Verde × 587( ) + Azul×114( )[ ]
1000
€
Brillo del color 1 - Brillo del color 2 = Umbral
![Page 177: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/177.jpg)
Buenas prácticas
Ejemplo 1 de cómo evaluar la diferencia de brillo
1
2
3
€
Brillo del color negro =0× 299( ) + 0× 587( ) + 0×114( )[ ]
1000= 0
€
Brillo del color amarillo =255× 299( ) + 255× 587( ) + 153×114( )[ ]
1000= 243
243 – 0 = 243.
243 > 125 ¡Es correcto!
![Page 178: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/178.jpg)
Buenas prácticas
Ejemplo 2 de cómo evaluar la diferencia de brillo
1
2
3
255 – 195 = 60.
60 < 125 ¡Es insuficiente!
€
Brillo del color azul =153× 299( ) + 204 × 587( ) + 255×114( )[ ]
1000= 195
€
Brillo del color blanco =255× 299( ) + 255× 587( ) + 255×114( )[ ]
1000= 255
![Page 179: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/179.jpg)
Buenas prácticas
Fórmula para establecer la diferencia de color
1
2 500 umbral mínimo€
+máximo rojo1,rojo2( ) − mínimo rojo1,rojo2( )[ ]
máximo verde1,verde2( ) − mínimo verde1,verde2( )[ ]máximo azul1,azul2( ) − mínimo azul1,azul2( )[ ]
= Umbral
![Page 180: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/180.jpg)
Buenas prácticas
Ejemplo 1 de cómo establecer la diferencia de color
1
2 510 > 500 ¡Es correcto!
€
+255−102[ ]
255−102[ ]
204 − 0[ ]
= 510
![Page 181: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/181.jpg)
Buenas prácticas
Ejemplo 2 de cómo establecer la diferencia de color
1
2 459 > 500 ¡Es insuficiente!€
+255−153[ ]
204 −102[ ]
255− 0[ ]
= 459
![Page 182: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/182.jpg)
Buenas prácticas
Herramientas para evaluar el color:
Juicy Studio
http://juicystudio.com/services/colourcontrast-es.php
![Page 183: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/183.jpg)
Buenas prácticas
Herramientas para evaluar el color:
HERA verificador de colores
http://www.sidar.org/hera/color.php
![Page 184: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/184.jpg)
Buenas prácticas
Herramientas para evaluar el color:
CCA: Colour Contrast Analyser
http://www.accessibleinfo.org.au/
![Page 185: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/185.jpg)
Buenas prácticas
¡A trabajar!Evaluando el contraste en el color Taller Nº 16
• Identifica si hay algún tipo de contenido que transmita información a través de color. ¿Cómo plantearías un diseño accesible para cada caso?
• Selecciona de tu diseño cuatro combinaciones de color de primer plano y fondo. Evalúa la diferencia de brillo y de color.
![Page 186: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/186.jpg)
Buenas prácticas
Tablas
¿Por qué no es buena idea usar las tablas para maquetar? Bien, trataremos este agudo tema, pero también te comentaremos para qué son buenas las tablas y cómo se deben usar de forma correcta. 07
![Page 187: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/187.jpg)
Buenas prácticas
Steve aún diseña con tablas
![Page 188: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/188.jpg)
Buenas prácticas
El típico flujo de diseño web
![Page 189: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/189.jpg)
Buenas prácticas
El típico flujo de diseño web
![Page 190: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/190.jpg)
Buenas prácticas
Fireworks exporta basurita...
<table border="0" cellpadding="0" cellspacing="0" width="737”> <tr> <td><img src="images/spacer.gif" width="220" height="1" border="0" alt="" /></td> <td><img src="images/spacer.gif" width="517" height="1" border="0" alt="" /></td> <td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td> </tr> <tr>
... etc
![Page 191: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/191.jpg)
Buenas prácticas
¡No maquetes con tablas! Usa CSS
![Page 192: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/192.jpg)
Buenas prácticas
¡A trabajar!No a las tablas de maquetación Taller Nº 17
• Identifica si hay algún tipo de tabla en la página de inicio y páginas internas.
• Evalúa si se trata de una tabla de datos o una tabla de maquetación.
• En caso de encontrar tablas usadas para maquetar, en Dreamweaver realiza la marcación correcta del XHTML y luego llega al mismo resultado gráfico a través de CSS.
![Page 193: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/193.jpg)
Buenas prácticas
Escucha el siguiente audio, que corresponde a la lectura de una tabla
de datos a partir del software Jaws
Transcripción del audio:
"Tabla con cuatro columnas y cinco filas. Las tres páginas más populares en el mundo. PageRank, Traffic Rank, Visitas mensuales abre paréntesis millones cierra paréntesis. Datos tomados en septiembre de 2008. Yahoo nueve, uno, quinientos cincuenta. Google diez, dos, trescientos treinta y dos. YouTube diez, tres, doscientos cuarenta y seis. Final de tabla".
![Page 194: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/194.jpg)
Buenas prácticas
¡Visualmente esta es la tabla!
![Page 195: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/195.jpg)
Buenas prácticas
El código que todos usamos...
<table border="1"> <tr> <td> </td> <td>PageRank</td> <td>TrafficRank</td> <td>Visitas mensuales (millones)</td> </tr> <tr> <td>Yahoo</td> <td>9</td> <td>1</td> <td>550</td> </tr>
<tr> <td>Google</td> <td>10</td> <td>2</td> <td>332</td> </tr> <tr> <td>YouTube</td> <td>10</td> <td>3</td> <td>246</td> </tr></table>
![Page 196: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/196.jpg)
Buenas prácticas
Etiquetas importantes para hacer tablas accesibles
El código que pocos usan...
![Page 197: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/197.jpg)
Buenas prácticas
Ejemplo de una tabla accesible
![Page 198: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/198.jpg)
Buenas prácticas
Veamos el código en acción
<table border="1”><caption>Las tres páginas más populares
en el mundo </caption> <thead> <tr> <td></td> <th>PageRank</th> <th>TrafficRank</th> <th>Visitas mensuales (millones)</th> </tr> </thead> <tfoot> <tr> <td colspan="4">Datos tomados en
septiembre de 2008</td> </tr> </tfoot>
<tbody> <tr> <th>Yahoo</th> <td>9</td> <td>1</td> <td>550</td> </tr> <tr> <th>Google</th> <td>10</td> <td>2</td> <td>332</td> </tr> <tr>
<th>YouTube</th> <td>10</td> <td>3</td> <td>246</td> </tr> </tbody> </table>
![Page 199: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/199.jpg)
Buenas prácticas
Atributo “summary”
<table summary="Esta tabla muestra datos relacionados con el posicionamiento de los tres sitios web más visitados del mundo">
![Page 200: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/200.jpg)
Buenas prácticas
Atributo “headers”
<table border="1" summary="Esta tabla muestra datos relacionados con el posicionamiento de los tres sitios web más visitados del mundo"><caption>Las tres páginas más populares en el mundo</caption>
<thead><tr><td></td><th id="page">PageRank</th><th id="trraffic">TrafficRank</th><th id="visitas">Visitas mensuales (millones)</th></tr></thead>
<tfoot><tr><td colspan="4">Datos tomados en septiembre de 2008</td></tr></tfoot>
<tbody><tr><th id="yahoo">Yahoo</th><td headers="page yahoo">9</td><td headers="traffic yahoo">1</td><td headers="visitas yahoo">550</td></tr>
<tr><th id="google">Google</th><td headers="page google">10</td><td headers="traffic google">2</td><td headers="visitas google">332</td></tr>
<tr><th id="youtube">YouTube</th><td headers="page youtube">10</td><td headers="traffic youtube">3</td><td headers="visitas youtube">246</td></tr></tbody></table>
![Page 201: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/201.jpg)
Buenas prácticas
Gracias al atributo headers, ahora Jaws podrá leerá así
• Yahoo, PageRank 9• Yahoo, TrafficRank 1• Yahoo, Visitas mensuales 550• Google, PageRank 10• Google, TrafficRank 2• Google, Visitas mensuales 332• YouTube, PageRank 10• YouTube, TrafficRank 3• YouTube, Visitas mensuales 246
![Page 202: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/202.jpg)
Buenas prácticas
¡A trabajar!Marcando tablas accesibles Taller Nº 18
• Identifica si hay algún tipo de tabla de datos en la página de inicio y páginas internas (altamente recomendado: tarifario).
• Evalúa la marcación actual de dicha tabla.• En Dreamweaver realiza los cambios a que haya lugar, para
hacer la tabla más accesible. Recuerda marcar con etiquetas como <th>, <thead>, <tfoot>, <theader>, <tbody>, <caption> y atributos como “id” y “headers” y “summary”.
![Page 203: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/203.jpg)
Buenas prácticas
Formularios
A través de los sitios web, muchas organizaciones buscan interactuar con sus usuarios, no solo para brindarles información, sino también para recibirla de ellos.Veamos cómo hacer un formulario accesible
08
![Page 204: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/204.jpg)
Buenas prácticas
Recordemos las etiquetas más comunes para hacer un formulario...
![Page 205: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/205.jpg)
Buenas prácticas
Para abrir y cerrar un formulario
<form>
</form>
![Page 206: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/206.jpg)
Buenas prácticas
Campo de texto
<input type="text" />
Otros atributos:• name• title• size
![Page 207: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/207.jpg)
Buenas prácticas
Clave o contraseña
<input type="password" />
Otros atributos:• name• title• size
![Page 208: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/208.jpg)
Buenas prácticas
Botón de envío
<input type="button" value="enviar" />
![Page 209: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/209.jpg)
Buenas prácticas
Asociación implícitade controles de formulario
• Etiqueta <label>
Ejemplo
<label>Nombre<input name="nombre" type="text” /></label>
![Page 210: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/210.jpg)
Buenas prácticas
Asociación explícitade controles de formulario
• Etiqueta <label>• Atributos id y for
Ejemplo
<label for="nombre">Nombre</label> <input name="nombre" type="text" id="nombre" />
![Page 211: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/211.jpg)
Buenas prácticas
¡A trabajar!Creando un formulario de acceso accesible Taller Nº 19
• En Dreamweaver genera un formulario con los siguientes campos:– Nombre de usuario– Contraseña– Botón ingreso
• Recuerda utilizar la etiqueta <label> para asociar el rótulo con el control de formulario. No olvides usar los atributos id y for.
• Asigna reglas CSS para darle un formato que represente una mejora estética y de facilidad de uso.
![Page 212: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/212.jpg)
Buenas prácticas
Casilla de verificación
<input type="checkbox" /> El texto aquí...
Otro atributos:• checked• value
![Page 213: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/213.jpg)
Buenas prácticas
Radio-botones
<input type="radio" name="grupoA" /> El texto aquí
Otro atributos:• checked• value
![Page 214: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/214.jpg)
Buenas prácticas
Anexos
<input type="file" />
![Page 215: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/215.jpg)
Buenas prácticas
Áreas de texto
<textarea cols="40" rows="6”></textarea>
![Page 216: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/216.jpg)
Buenas prácticas
Agrupa campos relacionados
• Etiqueta <fieldset>• Etiqueta <legend>
Ejemplo
<fieldset> <legend>Acceso a zona privada</legend> <label for="nombre">Nombre</label> <input type="text" name="nombre" id="nombre" /> <label for="contraseña">Contraseña</label> <input type="password" name="contraseña" id="contraseña" />
</fieldset>
![Page 217: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/217.jpg)
Buenas prácticas
¡A trabajar!Creando un formulario de acceso accesible Taller Nº 20
• En Dreamweaver genera un formulario con los mismos campos del formulario de publicación de clasificados de El País.
• Recuerda utilizar la etiqueta <label> para asociar el rótulo con el control de formulario. No olvides usar los atributos id y for.
• Utiliza las etiquetas fieldset y legend para agrupar lógicamente los campos del formulario.
• Finalmente, asigna reglas CSS para darle un formato que represente una mejora estética y de facilidad de uso.
![Page 218: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/218.jpg)
Buenas prácticas
Listas de selección
<select> <option value=“rojo”>Rojo</option> <option value=“azul”>Azul</option></select>
Otro atributos:• size• multiple
![Page 219: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/219.jpg)
Buenas prácticas
Agrupa opciones de selección
• Etiqueta <optgroup>• Atributo label
Ejemplo
<select id="programa" name="programa"> <optgroup label="Sistemas Operativos"> <option value="Windows" selected="selected">Windows</option> <option value="Mac">Mac</option> <option value="Linux">Linux</option> <option value="Other">Otro</option> </optgroup> <optgroup label="Navegadores"> <option value="Internet Explorer" selected="selected">Internet Explorer</option> <option value="Firefox">Firefox</option> <option value="Safari">Safari</option> <option value="Opera">Opera</option> <option value="Other">Otro</option> </optgroup></select>
![Page 220: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/220.jpg)
Buenas prácticas
¡A trabajar!Arreglando un formulario complejo Taller Nº 21
• Descarga la primera página de la encuesta de satisfacción 2009 de El País, de: http://www.elpais.com.co/paisonline/encuesta_elpais/encuesta2009.php y haz el milagro de volverla accesible.
• Finalmente, asigna reglas CSS para darle un formato que represente una mejora estética y de facilidad de uso.
![Page 221: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/221.jpg)
Buenas prácticas
Más info...Más info:
• Mario Carvajal• www.astrolabio.com.co• [email protected]• Tel: +57 (1) 341948• Cel: +57 (315) 4109020• Skype: astromario• MSN: [email protected]
![Page 222: Curso de accesibilidad web - Módulo 2: Buenas prácticas](https://reader033.vdocumento.com/reader033/viewer/2022061118/5468bc17af7959c23c8b4ac6/html5/thumbnails/222.jpg)
Buenas prácticas
www.astrolabio.com.co