Your SlideShare is downloading. ×
  • Like
Curso de accesibilidad web - Módulo 2: Buenas prácticas
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Curso de accesibilidad web - Módulo 2: Buenas prácticas

  • 2,749 views
Published

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 …

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.

Published in Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
2,749
On SlideShare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
220
Comments
2
Likes
12

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 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
  • 24. Buenas prácticas Lectura altamente recomendada Diseño con estándares Web, Editorial Anaya, España. Amazon: USD $28
  • 25. Buenas prácticas Tim BernersLee HTML (1990)
  • 26. Buenas prácticas ¿Para qué el HTML? Compartir documentos entre científicos
  • 27. Buenas prácticas HTML: Rumbo comercial (1994)
  • 28. Buenas prácticas CSS Boss Bert (1997)
  • 29. Buenas prácticas Tus niveles de HTML Por Roger Johansson http://www.456bereastreet.com/archive/200605/levels_of_html_knowledge/
  • 30. Buenas prácticas Nivel 0 “¿HTML quéeee?”
  • 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 ”
  • 37. Buenas prácticas Tus niveles de CSS Por Emil Stenström http://friendlybit.com/css/levels-of-css-knowledge/
  • 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
  • 46. Buenas prácticas Etiquetas desaconsejadas en HTML
  • 47. Buenas prácticas Etiquetas estructurales DECLARACIÓN <html> <head> CABECERA </head> <body> CUERPO </body> </html>
  • 48. Buenas prácticas ¡Marcar según la estructura!
  • 49. Buenas prácticas
  • 50. Buenas prácticas Etiquetas para listas
  • 51. Buenas prácticas Listas con orden específico
  • 52. Buenas prácticas Listas sin orden específico
  • 53. Buenas prácticas Listas de definiciones
  • 54. Buenas prácticas Lectura altamente recomendada Transcending CSS: the fine artof web design, Andy Clarke Amazon: USD $32
  • 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.
  • 59. Buenas prácticas ¡Por el amor de Dios, declara un tipo de documento!
  • 60. Buenas prácticas Ejemplos de DOCTYPE
  • 61. Buenas prácticas QuirksMode: ¡modo chambón! Modo chapucero Modo de compilación correcto
  • 62. Buenas prácticas CSS para el diseño
  • 63. Buenas prácticas ¿Vale la pena diseñar con CSS?
  • 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
  • 67. Buenas prácticas ¿Diseñar con CSS limita la imaginación y las posibilidades del diseñador? NO
  • 68. Buenas prácticas CSS Zen Garden
  • 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.
  • 75. Buenas prácticas Firefox y sus complementos: ¡indispensables!
  • 76. Buenas prácticas Firebug: para entender el código y mucho más...
  • 77. Buenas prácticas Validator: validación al instante
  • 78. Buenas prácticas Web Developer: ¿podrías vivir sin ella?
  • 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
  • 80. Buenas prácticas Para imágenes sencillas, una descripción breve
  • 81. Buenas prácticas Cómo usar el atributo “alt” <imgsrc=quot;rene_higuita.jpgquot; alt=quot;Arquero René Higuita haciendo El Escorpiónquot; />
  • 82. Buenas prácticas ¿Y si un usuario tiene las imágenes deshabilitadas?
  • 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.
  • 89. Buenas prácticas Imágenes complejas: atributo longdesc
  • 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.
  • 93. CASO 1. GERARDO TIENE DAÑADA LA TARJETA DE SONIDO
  • 94. Buenas prácticas Gerardo necesita ver un video de Lee Lefever sobre RSS • http://www.youtube.com/watch?v=0klgLsSxGsU
  • 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
  • 100. Caso 2. Juliana navega desde una biblioteca
  • 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.
  • 105. Caso 3. Santiago usa Jaws, un lector de pantalla
  • 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.
  • 108. Buenas prácticas ¡Contenido alternativo! <objectwidth=quot;640quot; height=quot;255quot; data=quot;nombre-de-tu-archivo-en- flash.swfquot; type=quot;application/x-shockwave-flashquot;> <paramname=quot;WModequot; value=quot;transparentquot;/> <paramname=quot;qualityquot; value=quot;highquot;/> <paramname=quot;menuquot; value=quot;falsequot;/> <paramname=quot;moviequot; value=quot;nombre-de-tu-archivo-en-flash.swfquot;/> <p>Aquí ponemos el contenido alternativo.</p> </object>
  • 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”>
  • 113. UN RÁPIDO VIAJE AL FUTURO Año 2012
  • 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
  • 119. Buenas prácticas La audiencia global El caso del fotógrafo brasilero
  • 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
  • 123. Buenas prácticas Hanna y la Embajada de Colombia en Francia
  • 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>.
  • 125. Buenas prácticas ¡Escribe metadata! Metadatos = datos sobre los datos
  • 126. Buenas prácticas Metadatos en fotografías
  • 127. Buenas prácticas Metadatos en música
  • 128. Buenas prácticas Metadatos en páginas web
  • 129. Buenas prácticas El titulo de una página web (para qué diablos sirve) Etiqueta <title>
  • 130. Buenas prácticas Título para la ventana
  • 131. Buenas prácticas Título en la barra de tareas
  • 132. Buenas prácticas Título en la pestaña
  • 133. Buenas prácticas Historial de navegación
  • 134. Buenas prácticas Favoritos o marcadores
  • 135. Buenas prácticas Titulos SERP
  • 136. Buenas prácticas Marcadores del.icio.us
  • 137. Buenas prácticas Botón “atrás”
  • 138. Buenas prácticas Entonces... ¿Por qué diantres no ponerle titulo a un documento?
  • 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.
  • 143. Buenas prácticas Ortografía y ortotipografía ¡A escribir bien, señores!
  • 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
  • 154. Buenas prácticas Kristopher y su forma de ver el mundo
  • 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
  • 157. Buenas prácticas Entonces... ¿qué pasó? 8% daltónicos
  • 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).
  • 167. Buenas prácticas Susan y su impresora láser en blanco y negro
  • 168. Buenas prácticas Susan imprimió el informe para presidencia en su impresora láser blanco y negro, este es el resultado...
  • 169. Buenas prácticas Realmente, en la página web de donde copió el gráfico, se ve así...
  • 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).
  • 174. Buenas prácticas Alberto y su brillante presentación
  • 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.
  • 176. Buenas prácticas Fórmula para establecer la diferencia de brillo 1 2 3 125 umbral mínimo
  • 177. Buenas prácticas Ejemplo 1 de cómo evaluar la diferencia de brillo 1 2 243 – 0 = 243. 243 > 125 ¡Es correcto! 3
  • 178. Buenas prácticas Ejemplo 2 de cómo evaluar la diferencia de brillo 1 2 255 – 195 = 60. 60 < 125 ¡Es insuficiente! 3
  • 179. Buenas prácticas Fórmula para establecer la diferencia de color 1 2 500 umbral mínimo
  • 180. Buenas prácticas Ejemplo 1 de cómo establecer la diferencia de color 1 2 510 > 500 ¡Es correcto!
  • 181. Buenas prácticas Ejemplo 2 de cómo establecer la diferencia de color 1 2 459 > 500 ¡Es insuficiente!
  • 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
  • 187. Buenas prácticas Steve aún diseña con tablas
  • 188. Buenas prácticas El típico flujo de diseño web
  • 189. Buenas prácticas El típico flujo de diseño web
  • 190. Buenas prácticas Fireworks exporta basurita... <tableborder=quot;0quot; cellpadding=quot;0quot; cellspacing=quot;0quot; width=quot;737”> <tr> <td><imgsrc=quot;images/spacer.gifquot; width=quot;220quot; height=quot;1quot; border=quot;0quot; alt=quot;quot; /></td> <td><imgsrc=quot;images/spacer.gifquot; width=quot;517quot; height=quot;1quot; border=quot;0quot; alt=quot;quot; /></td> <td><imgsrc=quot;images/spacer.gifquot; width=quot;1quot; height=quot;1quot; border=quot;0quot; alt=quot;quot; /></td> </tr> <tr> ... etc
  • 191. Buenas prácticas ¡No maquetes con tablas! Usa CSS
  • 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;.
  • 194. Buenas prácticas ¡Visualmente esta es la tabla!
  • 195. Buenas prácticas El código que todos usamos... <tableborder=quot;1quot;> <tr> <tr> <td>Google</td> <td></td> <td>10</td> <td>PageRank</td> <td>2</td> <td>TrafficRank</td> <td>332</td> <td>Visitas mensuales (millones)</td> </tr> </tr> <tr> <tr> <td>YouTube</td> <td>Yahoo</td> <td>10</td> <td>9</td> <td>3</td> <td>1</td> <td>246</td> <td>550</td> </tr> </tr> </table>
  • 196. Buenas prácticas Etiquetas importantes para hacer tablas accesibles El código que pocos usan...
  • 197. Buenas prácticas Ejemplo de una tabla accesible
  • 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>
  • 201. 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
  • 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
  • 214. Buenas prácticas Anexos <inputtype=quot;filequot; />
  • 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
  • 219. Buenas prácticas Agrupa opciones de selección Ejemplo • Etiqueta <optgroup> <selectid=quot;programaquot; name=quot;programaquot;> <optgrouplabel=quot;Sistemas Operativosquot;> <optionvalue=quot;Windowsquot; • Atributo label selected=quot;selectedquot;>Windows</option> <optionvalue=quot;Macquot;>Mac</option> <optionvalue=quot;Linuxquot;>Linux</option> <optionvalue=quot;Otherquot;>Otro</option> </optgroup> <optgrouplabel=quot;Navegadoresquot;> <optionvalue=quot;Internet Explorerquot; selected=quot;selectedquot;>Internet Explorer</option> <optionvalue=quot;Firefoxquot;>Firefox</option> <optionvalue=quot;Safariquot;>Safari</option> <optionvalue=quot;Operaquot;>Opera</option> <optionvalue=quot;Otherquot;>Otro</option> </optgroup> </select>
  • 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
  • 222. Buenas prácticas www.astrolabio.com.co