1

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.

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.

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

2

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.

3

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.

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

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

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

4

condiciones dependen de la versin de HTML.

Los elementos generalmente tienen una etiqueta de inicio y una

etiqueta de cierre , y sus atributos estn contenidos dentro de la

etiqueta de inicio, dejando el contenido entre las dos etiquetas contenido). Algunas etiquetas, tales como

(etiqueta para imagen) se cierran a s mismas e incluso algunas como 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

5

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.

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.

Contiene la informacin visible para el usuario, que por tanto constituye el

contenido en s mismo de la pgina web.

Ejemplo:

Ttulo de la pgina

Contenido de la pgina web

6

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 o

.

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.

7

P: prrafos

Es el elemento que genera, agrupa y diferencia las lneas de texto para formar prrafos.

Ejemplo:

Ttulo de la pgina Tema principal Contenido del tema principal Tema secundario Contenido del tema secundario Otro tema Contenido de otros temas 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.

8

Ejemplo: La etiqueta titlees utilizada para

definir el idioma del ttulo principal de la pgina.

Tambin se recomienda definir el idioma principal de la pgina en la

declaracin del documento HTML. Ejemplo: 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: Ingreso al sitio web del SENA!

Q y BLOCKQUOTE

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

9

Ejemplo:

Nunca consideres el estudio como una obligacin, sino

como una oportunidadbpara penetrar en el bello y

maravilloso mundo del saber. Albert Einstein.

Listas

Las etiquetas y 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:

Internet Explorer.

Mozilla Firefox.

Google Chrome.

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.

10

Ejemplo de lista desordenada:

Internet Explorer.

Mozilla Firefox.

Google Chrome.

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

Equivalencias

(pautas

WCAG)

Requisitos

3.1.2.4.

1.2.1.

Subttulos (en directo): se deben proporcionar

subttulos para todo el contenido de audio en directo

de los multimedia sincronizados.

3.1.2.5.

1.2.5.

Audiodescripcin (grabado): se debe proporcionar

una audiodescripcin para todo el contenido de video

grabado dentro de contenido multimedia sincronizado.

3.1.2.6.

1.2.6.

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.

11

La etiqueta 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 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

e identificar las estructuras de filas utilizando la etiqueta para

encabezados de tabla, para pies de tabla y 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

12

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:

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:

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.

Tienda online

Suscrbase a nuestro boletn

Cmo llegar

13

Ejemplo:

Ejemplo:

Ejemplo: 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 e identificarlos con la etiqueta .

14

Ejemplo: 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:

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.

Nombre:

Datos personales

Nombre:

Email:

Mensaje

Escriba su

mensaje.

15

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 Dependencia Fecha

Autores Ministerio de Tecnologas de la Informacin y la Comunicacin y Programa Gobierno en Lnea.

2011

Revisin y ajustes Luz Clarena Arias

Gonzlez

Comunicadora social -Guionista lnea de produccin

Centro Agroindustrial Regional Quindo

22 de Agosto de 2012

Ana Mara Mora Jaramillo

Comunicadora social - Lder guionistas lnea de produccin

Centro Agroindustrial Regional Quindo

25 de agosto de 2012