Después del primer módulo, donde se sensibiliza al webmáster sobre la importancia de hacer sitios de acceso universal, empezamos este segundo módulo para ofrecerle ejemplos de buenas prácticas, a través de diferentes temáticas: Imágenes, multimedia, estándares y estructura, lenguaje y comprensión, color, tablas y formularios.
Se trata de ir tocando puntos de las directrices WCAG, a través de ejemplos prácticos, donde se muestra el problema en un escenario de uso, luego se plantea la solución. Con esto pretendo no solo que el estudiante conozca las WCAG, sino que las asimile y las incluya dentro de sus hábitos de trabajo.
1. Módulo 2 /
Buenas prácticas en Accesibilidad Web
“Cómo resolver problemas
cotidianos en el diseño web”
2. 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
3. Buenas prácticas
¡A trabajar! TallerNº 4
Autoevaluación en HTML
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 .
4. Buenas prácticas
Respuestas TallerNº 4
Autoevaluación en HTML
• Las etiquetas <h1>, <h2> y <h3> corresponden
a:
– Hipervínculos
– Encabezados
– Listas
– Tablas
5. Buenas prácticas
Respuestas TallerNº 4
Autoevaluación en HTML
• Para provocar la apertura de un enlace en una
ventana nueva, el atributo a usar es:
– target=quot;_parentquot;
– target=quot;_selfquot;
– target=quot;_topquot;
– target=quot;_blankquot;
6. Buenas prácticas
Respuestas TallerNº 4
Autoevaluación en HTML
• 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
7. Buenas prácticas
Respuestas TallerNº 4
Autoevaluación en HTML
• Una tabla de datos se distingue por contener
las siguientes etiquetas:
– <th>, <tr>, <td>
– <ol>, <ul>, <li>
– <h1>, <h2>, <h3>
– <form>, <legend>, <label>
8. Buenas prácticas
Respuestas TallerNº 4
Autoevaluación en HTML
• La forma correcta de crear un comentario es:
– <--! Aquí va el comentario -->
– <-- Aquí va el comentario --!>
– <-- Aquí va el comentario !-->
– <!-- Aquí va el comentario -->
9. Buenas prácticas
Respuestas TallerNº 4
Autoevaluación en HTML
• En la siguiente línea de código para insertar una imagen existe
un error, identifícalo: <imgscr=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
10. Buenas prácticas
Respuestas TallerNº 4
Autoevaluación en HTML
• Las etiquetas <ol> y <li> hacen referencia a:
– Una tabla de datos
– Una lista ordenada
– Una tabla de maquetación
– Una lista sin orden
11. Buenas prácticas
Respuestas TallerNº 4
Autoevaluación en HTML
• Las etiquetas <head> y </head> se usan para
delimitar en una página web:
– El encabezado
– El cuerpo
– Los formularios
– Los párrafos
12. Buenas prácticas
Respuestas TallerNº 4
Autoevaluación en HTML
• Para crear un hipervínculo se utiliza la
etiqueta:
– <link>
– <blink>
– <a>
– <href>
13. Buenas prácticas
Respuestas TallerNº 4
Autoevaluación en HTML
• La etiqueta <a href=quot;mailto:sunombre@suempresa.comquot;>
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
14. Buenas prácticas
Respuestas TallerNº 4
Autoevaluación en HTML
• La etiqueta <blockquote> se utiliza para
definir:
– Un título
– Un acrónimo
– Un formulario
– Una cita
15. Buenas prácticas
Respuestas TallerNº 4
Autoevaluación en HTML
• 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>
16. Buenas prácticas
Respuestas TallerNº 4
Autoevaluación en HTML
• La etiqueta <summary> se utiliza para hacer
un resumen en:
– Listas
– Formularios
– Encabezados
– Tablas
17. Buenas prácticas
Respuestas TallerNº 4
Autoevaluación en HTML
• En un formulario, la etiqueta utilizada para
agrupar campos es:
– <fieldset>
– <form>
– <legend>
– <label>
18. Buenas prácticas
Respuestas TallerNº 4
Autoevaluación en HTML
• 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
19. Buenas prácticas
Interpretación TallerNº 4
de los resultados
• ¿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.
20. Buenas prácticas
Interpretación TallerNº 4
de los resultados
• ¿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.
21. Buenas prácticas
Interpretación TallerNº 4
de los resultados
• ¿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?
22. 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
23. Buenas prácticas
“El 99,9% de los
sitios Web están
mal diseñados”
- Jeffrey Zeldman
31. Buenas prácticas
Nivel 1
“¿HTML? Son esas etiquetas que usan para
hacer el texto en negrillas o itálicas ”
32. Buenas prácticas
Nivel 2
“ (o FrontPage) se ve
Diseño en Dreamweaver
bien en Explorer, así que ¿por qué debo
siquiera ver el HTML?”
33. 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”
34. Buenas prácticas
Nivel 4
“¿Cómo puedo crear una tabla de datos con divs
y spans en vez de tablas? ”
35. Buenas prácticas
Nivel 5
“Mmm. Creo que estructuralmente es mejor
usar listas de definición en esta parte del
documento”
36. 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 ”
38. Buenas prácticas
Nivel 0
“Mmm… CSS… ¿será la última versión de
PhotoShop?”
39. Buenas prácticas
Nivel 1
“Sí, lo utilizo para eliminar el subrayado de los
enlaces algunas veces”
40. Buenas prácticas
Nivel 2
“No, no me gustan los divs. Las tablas son
mucho mejor para maquetar una página Web”
41. Buenas prácticas
Nivel 3
“Sí, he oído que está bien trabajar con CSS pero
yo no lo utilizo por…”
42. Buenas prácticas
Nivel 4
“¡Claro que sé qué es CSS! Utilizo divs en todas
mis plantillas”
43. Buenas prácticas
Nivel 5
“Utilizo CSS para el diseño, es mejor que las
tablas porque…”
44. Buenas prácticas
Nivel 6
“¿Qué versión de CSS? Sí, lo he hecho. Has leído
mi libro sobre…”
45. Buenas prácticas
Fórmula para páginas web
torpes:
Usar las etiquetas por su
Usar etiquetas Páginas web
efecto visual y no por su
obsoletas torpes
significado estructural
55. Buenas prácticas
¡A trabajar! TallerNº 5
Hola Mundo
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”.
56. Buenas prácticas
¡A trabajar! TallerNº 5
Hola Mundo
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 mario@astrolabio.com.co para la revisión grupal.
57. Buenas prácticas
¡A trabajar! TallerNº 5
Hola Mundo
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 QuirksMode.
3. Valida en el sitio del W3C, el HTML y corrobóralo con el
plugin HTML Validator.
58. 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.
64. 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
65. 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
66. Buenas prácticas
Ventajas para la organización
• Ahorro de transferencia
• Sencillo mantenimiento
• Compatibilidad al futuro
• Mejor posicionamiento en
buscadores
69. Buenas prácticas
¡A trabajar! TallerNº 6
Una breve práctica en CSS
• 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”.
70. Buenas prácticas
¡A trabajar! TallerNº 6
Una breve práctica en CSS
• 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=quot;estilos-pantalla.cssquot; rel=quot;stylesheetquot;
type=quot;text/cssquot; media=quot;screenquot; />
71. Buenas prácticas
¡A trabajar! TallerNº 6
Una breve práctica en CSS
• 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/
72. Buenas prácticas
¡A trabajar! TallerNº 6
Una breve práctica en CSS
• 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=quot;estilos-impresion.cssquot; rel=quot;stylesheetquot;
type=quot;text/cssquot; media=quot;printquot; />
• Genera estilos únicamente para impresión y verifica el
resultado a través de la vista previa de impresión de tu
navegador.
73. Buenas prácticas
¡A trabajar! TallerNº 6
Una breve práctica en CSS
• [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=quot;estilos-celular.cssquot; rel=quot;stylesheetquot;
type=quot;text/cssquot; media=quot;handheldquot; />
74. Buenas prácticas
¡A trabajar! TallerNº 6
Una breve práctica en CSS
• Cuando hayas terminado, comprime la carpeta en formato
.ZIP y envíala al correo del profesor
mario@astrolabio.com.co, 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.
79. 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
83. Buenas prácticas
Imágenes decorativas:
Atributo alt nulo y vacío
• Nulo: para que el lector de pantalla “salte” la
imagen. Ej: <imgsrc=”archivo.jpgquot; alt=quot;quot; />
• Vacío: el lector de pantalla tiene en cuenta la
imagen pero no lee texto alternativo.
Ej:<imgsrc=”archivo.jpgquot; alt=quot; quot; />
84. Buenas prácticas
Recomendación:
quot;No olvides cerrar la etiqueta de imagenquot;
Mal:
<imgsrc=quot;archivo.jpgquot; alt=quot;Descripción de la imagenquot;>
Bien:
<imgsrc=quot;archivo.jpgquot; alt=quot;Descripción de la imagenquot; />
85. ¿Un ciego cómo accedería
a un contenido visual en la
Web?
86. Buenas prácticas
Errores más comunes...
• No se ha definido el atributo alt
87. Buenas prácticas
Errores más comunes...
• El atributo alt tiene una descripción
inoportuna
88. Buenas prácticas
¡A trabajar! TallerNº 7
Textos alternativos en imágenes
• 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.
90. Buenas prácticas
Cómo usar el atributo longdesc
<imgsrc=quot;dominios.jpgquot; alt=quot;Gráfico estadístico de dominios
TLD en el mundoquot; longdesc=quot;dominios.htmlquot; />
Ejemplo...
91. Buenas prácticas
¡A trabajar! TallerNº 8
Imágenes con descripciones largas
• Visitael 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.
92. 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.
04
Es hora de hacerlos accesibles.
95. 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.
96. 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
97. Buenas prácticas
¡A trabajar! TallerNº 9
Subtitulando videos en YouTube
• 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!
98. Buenas prácticas
TallerNº 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.000
Esto debe aparecer del segundo 1 hasta el segundo 10
0:00:13.00,0:00:20.000
Esto debe aparecer del segundo 13 hasta el segundo 20
99. Buenas prácticas
TallerNº 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.000
Esto debe aparecer del segundo 1 hasta el segundo 10
0:00:13.00,0:00:20.000
Esto debe aparecer del segundo 13 hasta el segundo 20
101. 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.
102. 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.
103. 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
104. Buenas prácticas
¡A trabajar! TallerNº 10
Generando un PodCast accesible
• 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.
106. 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/
107. 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.
109. Buenas prácticas
¡A trabajar! TallerNº 11
Contenido alternativo en Flash
• 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.
110. 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
05
medios.
111. 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
112. Buenas prácticas
Cómo identificar el idioma principal
en la etiqueta <html>
• Si el documento es HTML
<htmllang=“es”>
• Si el documento es XHTML (servido como HTML)
<htmllang=“es” xml:lang=“es”>
• Si el documento es XHTML (servido como XML)
<htmlxml:lang=“es”>
114. Buenas prácticas
Juan David y su auto Nissan Ruge
—quot;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 Designquot;
115. 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.
116. 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 <spanlang=quot;enquot;>Any Clarke</span>, cuyo
título es <spanlang=quot;enquot;>Transcending CSS: The Fine Art
of Web Design</span></p>
117. Buenas prácticas
¡A trabajar!
Identificando el idioma de TallerNº 12
un documento
• 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!
118. 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 loveYou
(inglés), Je t'aime (francés), IchliebeDich (alemán), Mi amas vin
(esperanto), Ñucayaquirini (quechua)”.
—Tomado del artículo quot;Theloversquot;, traducido por GuiseppeFiumarelli
120. 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
121. 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.
122. 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
124. 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>.
139. 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
140. 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: quot;indéxame, no me
indexes, busca nuevos enlaces, no sigas los enlacesquot;.
141. Buenas prácticas
¡A trabajar!
Titulando correctamente TallerNº 13
una página web
• 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.
142. Buenas prácticas
¡A trabajar!
Titulando correctamente TallerNº 13
una página web
• 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.
144. 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
145. 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”.
146. Buenas prácticas
El sobrino...
quot;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.”
147. Buenas prácticas
El sastre...
quot;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.”
148. Buenas prácticas
La esposa...
quot;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.”
149. Buenas prácticas
El cuñado...
quot;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.”
150. Buenas prácticas
El juez amigo...
quot;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.”
151. Buenas prácticas
¡A trabajar!
Recordando reglas de TallerNº 14
ortografías
• 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.
152. Buenas prácticas
¡A trabajar!
Recordando reglas de TallerNº 14
ortografías
• 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.
153. 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
155. Buenas prácticas
Al intentar llenar este formulario, Kristopher no
entendió qué día debería marcar como preferido...
156. Buenas prácticas
El formulario que originalmente diseñó el
webmáster fue...
Tomado del blog de Olga Carreras
http://olgacarreras.blogspot.com/2006/09/daltonismo-y-accesibilidad-un-caso-real.html
158. 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. GulfBreeze, FL USA
159. 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!
160. 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 quot;débilquot; círculo marrón
161. 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 quot;débilquot; cuadrado marrón
162. 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
163. Buenas prácticas
Ahora, una prueba pero al
revés...
Puedes tomarla también en:
http://www.cs.unm.edu/~aaron/creative/colorT
est.htm
Diseñada por: Aaron Clauset
164. Buenas prácticas
Tratar de encontrar un número...
Respuesta: los daltónicos deberían ver un número... ¿cuál?
165. Buenas prácticas
Tratar de encontrar una figura geométrica...
Respuesta: los daltónicos deberían ver un círculo
166. 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).
170. 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.
171. Buenas prácticas
¡A trabajar!
Evaluando el color desde TallerNº 15
el punto de vista del daltónico
• Entra a Flickr y realiza una búsqueda avanzada.
• Busca 5 fotografías sobre Cartagena, licenciadas con
CreativeCommons 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
172. Buenas prácticas
TallerNº 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.
173. Buenas prácticas
TallerNº 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).
175. 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.
182. Buenas prácticas
Herramientas para evaluar el color:
Juicy Studio
http://juicystudio.com/services/colourcontrast-es.php
183. Buenas prácticas
Herramientas para evaluar el color:
HERA verificador de colores
http://www.sidar.org/hera/color.php
184. Buenas prácticas
Herramientas para evaluar el color:
CCA: Colour Contrast Analyser
http://www.accessibleinfo.org.au/
185. Buenas prácticas
¡A trabajar!
Evaluando el contraste TallerNº 16
en el color
• 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.
186. 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
192. Buenas prácticas
¡A trabajar!
No a las tablas TallerNº 17
de maquetación
• 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.
193. 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:
quot;Tabla con cuatro columnas y cinco filas. Las tres páginas
más populares en el mundo. PageRank, TrafficRank, 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 tablaquot;.
198. Buenas prácticas
Veamos el código en acción
<tableborder=quot;1”> <tbody> <th>YouTube</th>
<caption>Las tres páginas más populares <tr> <td>10</td>
en el mundo </caption> <th>Yahoo</th> <td>3</td>
<thead> <td>9</td> <td>246</td>
<tr> <td>1</td> </tr>
<td></td> <td>550</td> </tbody>
<th>PageRank</th> </tr> </table>
<th>TrafficRank</th> <tr>
<th>Visitas mensuales (millones)</th> <th>Google</th>
</tr> <td>10</td>
</thead> <td>2</td>
<tfoot> <td>332</td>
<tr> </tr>
<tdcolspan=quot;4quot;>Datos tomados en <tr>
septiembre de 2008</td>
</tr>
</tfoot>
199. Buenas prácticas
Atributo “summary”
<tablesummary=quot;Esta tabla muestra datos
relacionados con el posicionamiento de los tres
sitios web más visitados del mundoquot;>
200. Buenas prácticas
Atributo “headers”
<tableborder=quot;1quot; summary=quot;Esta <tfoot> <tr>
tabla muestra datos relacionados con <tr> <th id=quot;googlequot;>Google</th>
el posicionamiento de los tres sitios <tdcolspan=quot;4quot;>Datos tomados en <tdheaders=quot;pagegooglequot;>10</td>
web más visitados del mundoquot;> septiembre de 2008</td> <tdheaders=quot;trafficgooglequot;>2</td>
<caption>Las tres páginas más </tr>
populares en el mundo</caption> <tdheaders=quot;visitas googlequot;>332</td>
</tfoot> </tr>
<thead>
<tbody> <tr>
<tr>
<tr> <th id=quot;youtubequot;>YouTube</th>
<td></td>
<thid=quot;yahooquot;>Yahoo</th> <tdheaders=quot;pageyoutubequot;>10</td>
<th id=quot;pagequot;>PageRank</th>
<tdheaders=quot;pageyahooquot;>9</td> <tdheaders=quot;trafficyoutubequot;>3</td>
<th id=quot;trrafficquot;>TrafficRank</th>
<tdheaders=quot;trafficyahooquot;>1</td> <tdheaders=quot;visitas youtubequot;>246</td>
<th id=quot;visitasquot;>Visitas mensuales
(millones)</th> <tdheaders=quot;visitas yahooquot;>550</td> </tr>
</tr> </tr> </tbody>
</thead> </table>
202. Buenas prácticas
¡A trabajar!
Marcando tablas accesibles TallerNº 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”.
203. 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
08
formulario accesible
204. Buenas prácticas
Recordemos las etiquetas más
comunes para hacer un formulario...
205. Buenas prácticas
Para abrir y cerrar un formulario
<form>
</form>
206. Buenas prácticas
Campo de texto
<inputtype=quot;textquot; />
Otros atributos:
• name
• title
• size
207. Buenas prácticas
Clave o contraseña
<inputtype=quot;passwordquot; />
Otros atributos:
• name
• title
• size
208. Buenas prácticas
Botón de envío
<inputtype=quot;buttonquot; value=quot;enviarquot; />
209. Buenas prácticas
Asociación implícita
de controles de formulario
• Etiqueta <label>
Ejemplo
<label>Nombre
<inputname=quot;nombrequot; type=quot;text”/>
</label>
210. Buenas prácticas
Asociación explícita
de controles de formulario
• Etiqueta <label>
• Atributos idy for
Ejemplo
<labelfor=quot;nombrequot;>Nombre</label>
<inputname=quot;nombrequot; type=quot;textquot;id=quot;nombrequot; />
211. Buenas prácticas
¡A trabajar!
Creando un formulario TallerNº 19
de acceso accesible
• 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.
212. Buenas prácticas
Casilla de verificación
<inputtype=quot;checkboxquot; /> El texto aquí...
Otro atributos:
• checked
• value
213. Buenas prácticas
Radio-botones
<inputtype=quot;radioquot; name=quot;grupoAquot; /> El texto aquí
Otro atributos:
• checked
• value
215. Buenas prácticas
Áreas de texto
<textareacols=quot;40quot; rows=quot;6”></textarea>
216. Buenas prácticas
Agrupa campos relacionados
• Etiqueta <fieldset>
• Etiqueta <legend>
Ejemplo
<fieldset>
<legend>Acceso a zona privada</legend>
<labelfor=quot;nombrequot;>Nombre</label><inputtype=quot;textquot; name=quot;nombrequot; id=quot;nombrequot; />
<labelfor=quot;contraseñaquot;>Contraseña</label><inputtype=quot;passwordquot; name=quot;contraseñaquot; id=quot;contraseñaquot; />
</fieldset>
217. Buenas prácticas
¡A trabajar!
Creando un formulario TallerNº 20
de acceso accesible
• 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.
218. Buenas prácticas
Listas de selección
<select>
<optionvalue=“rojo”>Rojo</option>
<optionvalue=“azul”>Azul</option>
</select>
Otro atributos:
• size
• multiple
220. Buenas prácticas
¡A trabajar!
Arreglando un formulario complejo TallerNº 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/encues
ta2009.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.
221. Buenas prácticas
Más info...
Más info:
• Mario Carvajal
• www.astrolabio.com.co
• mario@astrolabio.com.co
• Tel: +57 (1) 341948
• Cel: +57 (315) 4109020
• Skype: astromario
• MSN: astromario@hotmail.com