UNIDAD 1. 2. EL LENGUAJE DE MARCADO Y SU EVOLUCIN.

A travs de la Norma Tcnica Colombiana de Accesibilidad a pginas web NTC 5854, los diseadores y desarrolladores de sitios web encuentran los parmetros que deben cumplir sus portales para ser realmente asequibles y poder ser utilizados eficientemente por la mayora de las personas. Sin embargo, estos requerimientos demandan en la mayora de los casos, intervenir directamente el cdigo HTML para hacerlo realmente de fcil ingreso.

Imagen tomada de: http://www.flickr.com

Anteriormente se explicaba que todos los usuarios no pertenecen a un mismo perfil, ya que cada uno tiene intereses y necesidades diferentes con respecto al uso de la tecnologa; sin embargo, todos deben tener el mismo derecho para acceder oportuna y eficientemente a la informacin mediada por internet. Al recordar los diferentes grupos de usuarios, debe reflexionarse sobre la forma correcta de realizar el diseo del sitio web, pues muchos de esos usuarios pueden no ser capaces de ver, escuchar, desplazarse, comprender fcilmente la informacin o pueden tener dificultades para utilizar dispositivos como el mouse o el teclado. El diseo accesible y universal de toda pgina web tiene sus bases tcnicas en el marcado del documento, es decir, en la gramtica del cdigo HTML. Desarrollar una pgina web realmente accesible puede suponer en la mayora de los casos un esfuerzo inferior al que se puede imaginar y tiene su fundamento en el cdigo HTML: el marcado correcto que haga de este, disminuir el tiempo que se emplea en corregir los posibles fallos de accesibilidad, caracterstica que favorecer el sitio web. A travs de esta unidad se da a conocer diferentes tcnicas para lograr importantes mejoras en la accesibilidad desde el mismo instante en que s e codifica la pgina web; adems, ofrece fundamentos tcnicos para cumplir con la mayora de puntos de revisin de la norma tcnica.

Qu es un lenguaje de marcado? Un lenguaje de marcado es un conjunto de etiquetas o marcas que indican al agente de usuario la forma en que debe interpretarse la informacin enmarcada dentro de estas etiquetas. Comnmente se confunden los lenguajes de marcado con los lenguajes de programacin, siendo estos diferentes aunque complementarios en algunos casos, como en las pginas web dinmicas, en donde la programacin puede estar desarrollada en un lenguaje como PHP o JSP y la salida de datos est codificada en el lenguaje de marcado HTML para ser interpretado por el navegador web. En trminos generales, se pueden encontrar dos grandes clasificaciones para los lenguajes de marcado:

1. Marcado descriptivo o semntico Define la presentacin del texto, indicando al agente de usuario la forma en que debe presentar la informacin. Sin embargo, tambin es visible para el usuario que crea el documento, lo que eleva sus posibilidades de uso, pero exige conocimiento especfico por parte del usuario. Este tipo de lenguajes aaden una serie de etiquetas al texto que modifican la forma en la que es presentado en pantalla, permitiendo editar textos con una gran cantidad de efectos de formato. Uno de los formatos de lenguaje de marcado procedimental ms utilizado es TeX. Este tipo de marcado se utiliza en actividades de edicin y produccin profesional de textos, por las inmensas posibilidades de formato que ofrece; sin embargo, su complejidad lo hace poco usable para el usuario promedio.

2. Marcado procedimental Debe usarse tags o etiquetas para describir la informacin, pero no especifica cmo debe ser presentada o en qu orden. Los lenguajes descriptivos ms utilizados y de los cuales se desprenden otros ms especficos (como el HTML) son el SGML y el XML.

Imagen tomada de: http://www.flickr.com

Uno de los lenguajes de marcado descriptivo ms utilizados es el HTML (Hyper Text Markup Language), puesto que es el ms predominante para la elaboracin de sitios web. Es empleado para describir la informacin de la pgina web a travs de etiquetas y dada su flexibilidad se usa en conjunto con otros lenguajes de marcado para modificar la presentacin o con lenguajes de programacin para definir el comportamiento.

EL LENGUAJE HTML El lenguaje de marcado HTML naci como fruto de las investigaciones de Tim Berners-Lee durante la dcada de los ochenta en el CERN, quien como resultado de su trabajo defini el lenguaje HTML como un subconjunto del conocido lenguaje SGML y elabor el concepto del www, el World Wide Web, y en 1991 program el primer navegador web en modo texto y corriendo sobre un sistema operativo UNIX.

Foto: Tim Berners-Lee considerado el padre de la web. Tomada de http://www.taringa.net/

Varios aos despus, el lenguaje de marcado HTML se convirti en norma internacional con la introduccin de la norma ISO 15445 del 15 de mayo del ao 2000, basada en la recomendacin HTML 4.01 del W3C. Desde ese entonces, HTML ha sido el principal lenguaje usado para describir la estructura y el contenido en las pginas web y hasta un cierto punto, la apariencia y comportamiento de un documento mediante la inclusin de hojas de estilos y scripts de Java. Los elementos son la estructura bsica del contenido HTML y son dos sus propiedades bsicas: atributo y contenido. Cada atributo y contenido tiene ciertas condiciones de uso para que se considere vlida la gramtica y sintaxis del documento HTML y estas

condiciones dependen de la versin de HTML. Los elementos generalmente tienen una etiqueta de inicio <etiqueta> y una etiqueta de cierre </etiqueta>, y sus atributos estn contenidos dentro de la etiqueta de inicio, dejando el contenido entre las dos etiquetas <etiqueta atributo="valor">contenido</ etiqueta>). Algunas etiquetas, tales como <img> (etiqueta para imagen) se cierran a s mismas e incluso algunas como <br> no tienen contenido y se cierran as mismas. Etiquetas para documentos HTML A continuacin, se explican las etiquetas bsicas que componen cualquier documento HTML. Tipo de documento Todo documento HTML debe contener una declaracin del tipo de documento que define la versin de HTML que debe interpretar el navegador para ese contenido web, la cual debe definir en el inicio y comenzando con el delimitador <!DOCTYPE html, seguido del identificador del DTD (definicin del tipo de documento PUBLIC "-//w3C//DTD XHTML 1.0 Transitional //EN" <http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>. Ejemplo: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Etiquetas bsicas de la estructura del texto Es la etiqueta de apertura en donde se indica al navegador que debe interpretar un documento; dentro de esta, se encuentran las dems etiquetas encerradas. Cualquier documento HTML (independientemente de su versin o DTD) debe contener al menos las siguientes etiquetas:

<hml> Es la etiqueta de apertura, en donde se indica al navegador que debe interpretar un documento; dentro de esta, se encuentran las dems etiquetas encerradas. <head> </head> Contiene informacin que no va a ser visible para el usuario, pero que aporta informacin importante sobre el documento, como el ttulo, enlaces a hojas de estilo CSS o informacin de posicionamiento en motores de bsqueda. <body> </body> Contiene la informacin visible para el usuario, que por tanto constituye el contenido en s mismo de la pgina web. </html> Ejemplo: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Ttulo de la pgina</title> </head> <body> Contenido de la pgina web </body> </html>

Estructura y metadatos del documento Resulta muy importante que pueda proveer informacin semntica a las herramientas de indexacin, motores de bsqueda y herramientas de asistencia tcnica sobre el sitio web que est creando. Esta informacin se denomina metadatos y si estn bien elaborados pueden proporcionar a los usuarios informacin orientativa acerca del documento. Los elementos HTML de uso ms comn y relevante que proporcionan informacin incluyen: TITLE: ttulo del documento La etiqueta TITLE aparece una vez en un documento HTML y tiene como funcin establecer el ttulo de la pgina, el cual es interpretado por el navegador mostrndolo sobre la parte superior de la ventana, as como por motores de bsqueda para la indexacin de contenido. No confundirla con el atributo title, el cual se puede utilizar junto a varias etiquetas como <a> o <img>. META: etiquetas de metadatos Este elemento puede especificar metadatos para un documento HTML, tales como palabras clave, descripcin del sitio, informacin sobre el autor, actualizaciones del sitio, ubicacin y tipo de tecnologa, entre otros. Esta informacin es especialmente til para los motores de bsqueda y algunas etiquetas proporcionan informacin al navegador. !DOCTYPE: declaracin del tipo de documento Es necesario que siempre se declare el tipo de documento HTML para que el navegador pueda interpretar correctamente las etiquetas disponibles. H1, H2, H3, H4, H5 y H6: encabezados de seccin Los encabezados de seccin son imprescindibles para generar la estructura semntica del documento y describir la jerarqua y correspondencia de los contenidos.

P: prrafos Es el elemento que genera, agrupa y diferencia las lneas de texto para formar prrafos. Ejemplo: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>T&iacute;tulo de la p&aacute;gina</title> <meta name="keywords" content="palabras clave" /> <meta name="description" content="descripcin del sitio" /> <meta name="generator" content="Joomla! 1.6-Open Source Content Management" /> </head> <body> <h1>Tema principal</h1> <p>Contenido del tema principal</p> <h2>Tema secundario</h2> <p>Contenido del tema secundario</p> <h2>Otro tema</h2> <p>Contenido de otros temas</p> </body> </html>

Informacin sobre el idioma Es necesario que siempre se facilite la identificacin del idioma de la pgina y del texto a travs del atributolang, para que tanto el usuario como el navegador y las ayudas tcnicas interpreten correctamente la informacin. La identificacin del idioma es til en los casos en que los usuarios acceden a la pgina web a travs de herramientas de asistencia como lectores de pantalla o teclados braille, ya que el atributo lang le permite al software de asistencia la generacin de cdigos correctos para proporcionar la informacin al usuario, por ejemplo, al permitirle al lector de pantalla identificar en dnde hay un cambio de idioma para cambiar as mismo la pronunciacin y acentuacin del sintetizador de voz.

Ejemplo:
<p>La etiqueta <span lang="en">title</span>es utilizada para definir el idioma del ttulo principal de la pgina.</p>

Tambin se recomienda definir el idioma principal de la pgina en la declaracin del documento HTML. Ejemplo: <html lang="es">

Etiquetado y formato de texto EM y STRONG Estas etiquetas tienen como objetivo proporcionar nfasis semntico y estructural al texto, al tiempo que ofrecen un efecto visual. Nunca deben usarse las etiquetas B e I que slo ofrecen un efecto visual y no proporcionan informacin semntica. ABBR y ACRONYM Estas etiquetas son utilizadas para sealar las abreviaturas y acrnimos presentes en los textos. Ejemplo: <p>Ingreso al sitio web del <acronym title="Servicio Nacional de Aprendizaje">SENA</acronym>! Q y BLOCKQUOTE

Estas etiquetas sirven para sealar citas en lnea y en bloques respectivamente.

Ejemplo: <blockquote cite=" http://www.proverbia.net/citasautor.asp?autor=327"> <p>Nunca consideres el estudio como una obligacin, sino como una oportunidadbpara penetrar en el bello y maravilloso mundo del saber. Albert Einstein.</p>
</blockquote>

Listas Las etiquetas <ol> y <ul> se utilizan para crear listas ordenadas (numeral) y desordenadas (vieta) respectivamente, e indican al usuario la correspondencia entre los distintos elementos que componen la lista. A travs de la aplicacin de estilos CSS pueden definirse los estilos de los nmeros y de las vietas para todos los tipos de lista, no solamente las ordenadas. Debe evitarse el uso de imgenes como vietas para listas desordenadas creadas con los elementos DL, DT, y DD. Recordar que cualquier imagen utilizada con fines decorativos y que no transmite mayor informacin al usuario debe declararse en la hoja de estilos CSS. Ejemplo de lista ordenada:
<ol>

<li>Internet Explorer.</li> <li>Mozilla Firefox.</li> <li>Google Chrome.</li>

</ol>

Este cdigo sera interpretado por el navegador web o las ayudas tcnicas de la siguiente manera: 1. Internet Explorer. 2. Mozilla Firefox. 3. Google Chrome.

Ejemplo de lista desordenada:

<ul>

<li>Internet Explorer.</li> <li>Mozilla Firefox.</li> <li>Google Chrome.</li>

</ul>

Este cdigo sera interpretado por el navegador web o las ayudas tcnicas de la siguiente manera: 1. Internet Explorer. 2. Mozilla Firefox. 3. Google Chrome. Tablas Numeral de la norma 3.1.2.4.

Equivalencias (pautas Requisitos WCAG)

1.2.1.

Subttulos (en directo): se deben proporcionar subttulos para todo el contenido de audio en directo de los multimedia sincronizados. Audiodescripcin (grabado): se debe proporcionar una audiodescripcin para todo el contenido de video grabado dentro de contenido multimedia sincronizado. Lengua de seas (grabado): se debe proporcionar una interpretacin en lengua de seas para todo el contenido de audio grabado dentro de contenido multimedia sincronizado.

3.1.2.5.

1.2.5.

3.1.2.6.

1.2.6.

10

La etiqueta <table> permite crear espacios de datos relacionados entre filas y columnas (matrices de datos), comnmente llamados tablas. Las tablas pueden ser muy tiles para representar informacin relacionada, pero, si no se tienen en cuenta ciertos aspectos de accesibilidad, puede resultar muy difcil para algunos usuarios acceder a esta informacin. Al crear una tabla de datos debe proporcionarse un ttulo descriptivo mediante el elemento <caption> y un resumen que relate el objetivo de la tabla a travs del atributo summary. El ttulo y el resumen de la tabla resultan muy tiles para personas que navegan con lectores de pantalla o teclados braille, pues le ofrecen al usuario una descripcin de la tabla. Para la relacin entre filas y columnas, se deben proporcionar subttulos descriptivos para las etiquetas de encabezado de tabla con el atributo abbr de <th> e identificar las estructuras de filas utilizando la etiqueta <thead> para encabezados de tabla, <tfoot> para pies de tabla y <tbody> para grupos de fila. Los diseadores y desarrolladores de sitios web deben ser conscientes de que las tablas de datos son elementos cuya funcin es relacionar contenido y que bajo ninguna circunstancia deben ser usadas para maquetar un sitio web. Vnculos Los enlaces son uno de los elementos ms importantes y ms utilizados en las pginas web, pues son la base principal de la navegacin por internet, al permitir al usuario ir de un sitio a otro a travs de los destinos de los enlaces; por lo tanto, debe prestarse especial atencin a la forma en que se crean los enlaces, a sus textos y su comportamiento. Al escribir el texto para un enlace, este deber ser lo suficientemente descriptivo para que el usuario pueda intuir lo que encontrar al acceder a dicho vnculo, razn por la cual frases como haga clic aqu, ver ms o similares estn completamente desaconsejados, pues obligan al usuario a conocer el

11

contexto de la pgina de antemano para anticiparse a lo que encontrarn tras el enlace y esto puede generar dificultad particularmente la navegacin para usuarios ciegos o con problemas cognitivos. Adems de textos adecuados en los enlaces, especificar una descripcin clara del mismo a travs valor del atributo title. Ejemplo:
<a href="ventas.html">Tienda online</a> <a href="suscribe.hml" title="Al hacer clic se suscribir a nuestro boletn"> Suscrbase a nuestro boletn</a> <a href="mapa.html" target="_blank" title="El mapa de Google se abrir en una nueva ventana">Cmo llegar</a>

Aunque siempre debe procurarse utilizar textos y no imgenes como enlaces, cuando se usa una imagen como vnculo hay que especificar un texto alternativo para esta, en caso de que no pueda ser visualizada, de forma tal que el enlace no pierda su valor semntico. Ejemplo:
<a href="ayuda.html"><img src="help.jpg" alt="Ayuda y soporte tcnico"></a>

ETIQUETAS PARA IMGENES, AUDIO, VIDEO Y FORMULARIOS Imgenes

Uno de los elementos multimedia ms utilizados son las imgenes, por la capacidad para transmitir informacin. Sin embargo, si el usuario no puede ver la imagen por alguna causa (persona ciega, conexin a internet lenta, navegador no soportado, etc.) estos datos no pueden ser transferidos. Para solucionar este inconveniente se proporciona un equivalente textual con el atributo alt, y cuando sea necesario, una descripcin completa de la imagen con el atributo longdesc.

12

Ejemplo:
<img src="logo_empresa.jpg" alt="Nombre de la empresa">

Ejemplo:
<img src="estadisticas.gif" alt="Estadsticas de uso del portal" longdesc="estadsticas.html">

Ejemplo:
<a href="ayuda.html"><img src="help.jpg" alt="Ayuda y soporte tcnico"></a>

En el segundo ejemplo se ofrece un enlace a la pgina estadisticas.html en donde se ofrece una descripcin detallada de la imagen estadisticas.gif en el caso en que el usuario necesite una descripcin detallada. Audio y video En el caso de utilizar elementos multimedia como audio, video o animaciones debe ofrecerse una alternativa textual, al igual que con las imgenes, de forma tal que un usuario ciego, sordo o que simplemente no puede ver el video o escuchar el audio, porque no tiene instalados los plugins necesarios, pueda acceder a una versin alternativa del elemento. Formularios Los formularios son elementos que permiten el intercambio de datos en las pginas web y la interaccin de los usuarios con los servicios del sitio. Debido a la importancia de estos, es necesario codificarlos de forma tal que favorezcan la accesibilidad y el uso para la mayora de usuarios. Todo formulario est compuesto por diferentes elementos de entrada de informacin como campos de texto, mens de seleccin, botones y campos de seleccin, los cuales se deben agrupar segn su funcin en el formulario a travs de la etiqueta <fieldset> e identificarlos con la etiqueta <legend>.

13

Ejemplo:
<form action="send.php" method="post"> <fieldset> <legend>Datos personales</legend> <label for="nombre">Nombre: </label> <input type="text" id="nombre" tabindex="1" name="nombre"> <label for="email">Email: </label> <input type="text" id="email" tabindex="2" name="email" > </fieldset> <fieldset> <legend>Mensaje</legend> <textarea name=mensaje rows="20" cols="80"> Escriba su mensaje. </textarea> <input type="submit" value="Enviar mensaje"> </fieldset> </form>

Una etiqueta se asocia implcitamente con su control de formulario, bien sea mediante las marcas o por su posicin en la pgina. El ejemplo siguiente muestra cmo una etiqueta y un control de formulario pueden asociarse implcitamente mediante marcadores. Ejemplo:
<label for="nombre">Nombre: <input type="text" id="nombre" tabindex="1"> </label>

REFERENCIAS Instituto Colombiano de Normas Tcnicas y Certificacin. (2011). Accesibilidad a Pginas Web: NTC 5854.Bogot, Colombia. ICONTEC. Programa Agenda de Conectividad, Estrategia de Gobierno en lnea. (2011). Manual 3.0 para la Implementacin de la Estrategia de Gobierno en Lnea En las Entidades del Orden Nacional de la Repblica de Colombia . Bogota, Colombia. Ministerio de Tecnologas de la Informacin y las Comunicaciones.

14

Programa Gobierno en lnea, agenda de conectividad.(2011). Curso Diseo y Desarrollo de sitios web accesibles para Diseadores y Programadores. pdf. Colombia. Ministerio de Tecnologas de la Informacin y las Comunicaciones. WC3. (diciembre de 2008). Web Content Accessibility Guidelines WCAG 2.0: Recomendacin del W3C del 11 de diciembre de 2008. En: http://www.w3.org/TR/WCAG20/

Control del documento Nombre Cargo Autores Ministerio de Tecnologas de la Informacin y la Comunicacin y Programa Gobierno en Lnea. Revisin y Comunicadora ajustes Luz Clarena Arias social Gonzlez Guionista lnea de produccin Comunicadora social - Lder Ana Mara Mora Jaramillo guionistas lnea de produccin Dependencia Fecha 2011

Centro Agroindustrial Regional Quindo Centro Agroindustrial Regional Quindo

22 de Agosto de 2012 25 de agosto de 2012

15