bloque2 html correcto y accesible

8/2/2019 Bloque2 HTML Correcto y Accesible

1/12

TML correcto y accesible

Ya hemos comentado que el HTML (HyperText Markup Languageo Lenguaje de Marcado de Hipertexto) es un lenguaje utilizadopara la elaboracin de pginas web.

Tatuaje HTML, por webmove

En esta unidad veremos cmo es e l HTML , cmo debe ser un documento HTML correcto y por qu la correccin es importante.

Tambin profundizaremos en una afirmacin que ya hemos hecho: que una cosa es e l con ten ido (HTML) y o t ra l a apa r ienc ia(CSS).

Por ltimo, ap rende remos HTML: su sintaxis, y algunas peculiaridades de EducaMadrid y su editor de cdigo HTML.

Como ya hemos dicho, HTML significa HyperText Markup Language (Lenguaje de Marcado de Hipertexto).

Co n s is t e e n u n c on j u n to d e e t i q u e ta s q u e p e r m i t e n d e f i n i r l a e st r u c tu r a d e u n d o cu m e n to : qu es un ttulo, qu unprrafo, qu un enlace...

La idea: el hipertexto como forma de organizar el conocimiento en un conjunto de pginas interconectadas que los usuarios puedan

navegar. El hipertexto -los hiperenlaces- son la base del lenguaje de etiquetas creado por Tim Berners-Lee.

Pero atencin a esto: e l HTML no fue pensado pa ra de f i n i r l a p r esen tac in (al principio no haba etiquetas para especificarfuentes, colores...). Era un lenguaje para transmitir y organizar informacin (contenidos).

Este esquema, creado por Csar Acebal, resume cmo fun c iona la Web :

Este es un ejemplo del cd igo de un documen t o HTML:

H T M L c o r r e c t o y a c c e s i b l e

1 . I n t r o d u c c i n
http://www.flickr.com/people/daniello/http://cesaracebal.blogspot.com/http://cesaracebal.blogspot.com/http://www.flickr.com/people/daniello/


2/12

Pese a que el HTML no estaba pensado para definir la presentacin, los diseadores emplearon "trucos" para maquetar sus pginas(ponan imgenes irrelevantes para el contenido para mejorar su apariencia, usaban complejas tablas para colocar todo dondequeran, etc.).

En 1996 (hace mucho tiempo!), el W3C (una asociacin internacional que trabaja para el desarrollo de estndares web) public laespecificacin de CSS, un lenguaje pensado para definir la apariencia de lenguajes de etiquetas como el HTML.

CSS = Cascading Style Sheets(Hojas de estilo en cascada).

De manera que:

Por una parte tenemos el l a es t ruc tu ra y e l con ten ido (HTML).Por otra tenemos su apar ienc ia , que se define mediante CSS.

Comb inando HTML y CSS podemos t ene r un con ten ido semn t i camen te co r rec to con l a apa r iencia que n oso t rosq u e r a m o s: un ttulo ser un ttulo, no un texto normal con la letra muy grande; una imagen ser una imagen relevante, no unaimagen usada slo con fines decorativos; una tabla se usar para mostrar datos tabulados, no para maquetar mi pgina y ponerunas cosas a la izquierda y otras a la derecha (para eso estn los CSS), etc.

HTML y CSS son estndares definidos por el consorcio W3C, que trabaja para promover la evolucin de la web garantizando que lasdiferentes tecnologas funcionen bien conjuntamente. Eso nos conviene a todos; por eso vamos a desar ro l l a r con es tnda res .

Venta j as de hacer las cosas as:

1. Con un cdigo ms limpio obtendremos pginas ms ligeras y menores tiempos de descarga.2. Con un cdigo semnticamente correcto crearemos pginas con informacin ms til (los buscadores como Google no ven el

diseo final, sino que leen cdigo. Si nuestra pgina es toda ella una imagen muy bonita con mucha informacin, la imagen estah, pero para los buscadores es como si la informacin que visualmente contiene no estuviese: no estoy ayudando a crear una

red de informacin y conocimiento. Si nuestras pginas estn bien estructuradas, es ms fcil que otros puedan beneficiarse desu informacin).3. Con un cdigo sintctica y semnticamente correcto, nuestras pginas sern ms accesibles.

Hasta ahora hemos hablado de dos capas:

1. Estructura y contenido2. Apariencia

En realidad, hay una te rce ra capa: e l compor tam ien to .

Con HTML definimos el con ten ido (por ejemplo, un formulario con una serie de campos).Con CSS, damos d iseo a nuestro contenido.Pero podramos ir ms all: podramos mejorar la experiencia de usuario si le avissemos, segn escribe o cuando vaa enviar el formulario, por ejemplo, de que un determinado valor introducido no es correcto. Eso se consigueutilizando JavaScript. Podemos mejorar la experiencia de usuario aadiendo c o m p o r t a m i e n to a nuestras pginas.

El esquema f i na l ( l as t res capas p resen tes en una pg ina w eb ) se r a e l s i gu ien te :

Lo im presc ind ib le es e l con ten ido . Las otras dos capas sirven para mejorar la presentacin y la experiencia deusuario.

En este curso no vamos a profundizar en JavaScript, pero si alguien se anima, encontrar recursos para saber ms enel ltimo apartado de esta unidad: "Recursos avanzados del bloque 1".

1 . 1 . Se p a r a c i n d e a p a r i e n c i a y c o n t e n i d o

Las tres capas de una pgina web

Para saber ms...
http://www.w3c.es/http://www.w3c.es/


3/12

Creacin de sitios web mediante estndares(PDF. 2,5 MB. Csar F. Acebal. Gira 2004 del W3C, Oviedo).Esta presentacin tiene varios aos, pero sigue siendo recomendable. Ofrece una visin ampliada de lo visto en estaintroduccin.

El HTML es el lenguaje con el que se escriben las pginas web que son vistas por el usuario a travs de un navegador. Es unlenguaje de etiquetas.

Para crear o editar un documento HTML no hace falta ms que un editor de texto, como el bloc de notas.

Edi t o res de cd igo

Hay editores potentes y especficos, con sistemas de ayuda y autocompletado, coloreado del cdigo para hacer la tarea mssencilla, etc.

Ejemplos de editores gratuitos (hay bastantes ms):

Bluefish(para Linux)Notepad++(para Windows)Taco HTML Edit (para Mac)

Edi t o res WYSI WYG ( ed i to r es con v is ta d iseo)

Tambin hay editores WYSIWYG (What You See Is What You Get en ingls, "lo que ves es lo que obtienes"). Nos permiten irdiseando o escribiendo mientras el propio programa genera el cdigo HTML.

KompoZer (para Windows, Macintosh, GNU/Linux)Amaya (para Windows, Macintosh, GNU/Linux o UNIX)

Edi t o res WYSI WYG on l ine

Tambin hay editores WYSIWYG creados para funcionar en las propias pginas web. En ellos podemos escribir, y el propio editor seencarga de generar el cdigo HTML correspondiente.

Un ejemplo es TinyMCE, que es el editor que encontramos en el administrador de contenidos de EducaMadrid. En esta unidad

aprenderemos a sacarle ms partido.

Este es el aspecto de TinyMCE:

Y aqu podemos ver un ejemplo del editor TinyMCE.

Este es el cdigo de un documento HTML:

1 . 2 . E l c d i g o H T M L y l o s e d i t o r e s W Y S I W Y G

2 . H T M L
http://www.google.es/url?sa=t&source=web&cd=1&ved=0CBwQFjAA&url=http%3A%2F%2Fwww.w3c.es%2Fgira%2Fparadas%2Fpresentaciones%2FAcebal_EstandaresWeb.pdf&rct=j&q=desarrollo%20web%20mediante%20estandares%20cesar%20acebal&ei=XfuuTLK2HI2OjAeHnYRt&usg=AFQjCNEnM_t-dlaed3-4olhX5-_XepTaIw&sig2=7wTrRhvJHvh-uSuSjIc3SA&cad=rjahttp://www.google.es/url?sa=t&source=web&cd=1&ved=0CBwQFjAA&url=http%3A%2F%2Fwww.w3c.es%2Fgira%2Fparadas%2Fpresentaciones%2FAcebal_EstandaresWeb.pdf&rct=j&q=desarrollo%20web%20mediante%20estandares%20cesar%20acebal&ei=XfuuTLK2HI2OjAeHnYRt&usg=AFQjCNEnM_t-dlaed3-4olhX5-_XepTaIw&sig2=7wTrRhvJHvh-uSuSjIc3SA&cad=rjahttp://bluefish.openoffice.nl/http://bluefish.openoffice.nl/http://notepad-plus-plus.org/http://notepad-plus-plus.org/http://tacosw.com/http://kompozer.net/http://www.w3.org/Amaya/http://tinymce.moxiecode.com/examples/full.phphttp://tinymce.moxiecode.com/examples/full.phphttp://www.w3.org/Amaya/http://kompozer.net/http://tacosw.com/http://notepad-plus-plus.org/http://bluefish.openoffice.nl/http://www.google.es/url?sa=t&source=web&cd=1&ved=0CBwQFjAA&url=http%3A%2F%2Fwww.w3c.es%2Fgira%2Fparadas%2Fpresentaciones%2FAcebal_EstandaresWeb.pdf&rct=j&q=desarrollo%20web%20mediante%20estandares%20cesar%20acebal&ei=XfuuTLK2HI2OjAeHnYRt&usg=AFQjCNEnM_t-dlaed3-4olhX5-_XepTaIw&sig2=7wTrRhvJHvh-uSuSjIc3SA&cad=rja


4/12

Al final de este apartado comprenderemos este cdigo y mucho ms.

HTML es un l engua je de e t i que tas .

A travs de las etiquetas vamos definiendo los elementos del documento (enlaces, prrafos, imgenes, etc.).

Una etiqueta se abre: Y se cierra:

Por ejemplo: la etiqueta para un prrafo es "p".

Si quisiese escribir un p r r a fo en HTML, abrira la etiqueta, introducira el texto del prrafo y cerrara la etiqueta. As:

Soy un prrafo.

Par tes de un documen t o HTML

Las ms importantes son:

Cabecera (head)Cuerpo (body)

Un documento HTML contiene ambas, de manera que su estructura ms bsica sera:

En la etiqueta HEAD se incluirn los encabezados (ttulo de la pgina -etiqueta title-, metainformacin y otros elementos queveremos ms adelante, como la llamada a las hojas de estilo CSS.

En la etiqueta BODY ir, como su propio nombre indica, el cuerpo de la pgina (los prrafos, las imgenes, las listas, etc.).

Y tanto el head como el body formarn parte del HTML; estn dentrode la etiqueta HTML.

Ya estamos en condiciones de entender este cdigo:

Ejemplo 1

Un ejemplo sencillo de HTML

Hola.

Te doy la bienvenida al maravilloso mundo del HTML.

Copiadlo, pegadlo en un documento en blanco del bloc de notas, guardadlo con extensin .html (ejemplo:ejemplo_1.html) y abridlo con un navegador (Firefox, Safari, Opera, Google Chrome, Internet Explorer...).

Eso es una pg ina w eb . Como vemos, lo que hemos escrito en el title se ve en la parte superior del navegador(tomemos nota de este detalle: se volver a hablar de eso cuando se trate de la explotacin de las tecnologas SEO).

La finalidad de este curso no es convertirse en un experto en HTML, sino aprender lo suficiente para sacar partido a lasherramientas de EducaMadrid para conseguir hacer pginas semnticamente correctas y con el mayor nivel de accesibilidad posible.

Sin embargo, saber a lgo m s de HTML es muy recomendab le . A mayor conocimiento, mayor control de nuestras pginas, desu apariencia y de su nivel de accesibilidad.

2 . 1 . S i n t a x i s

Creacin de una pgina HTML


5/12

Manual de HTML de DesarrolloWeb.com

No vamos a ver en profundidad todas las etiquetas HTML, pero s las ms utilizadas en EducaMadrid para poder tener nuestras pginasms controladas.

T tu los

Hay ttulos de diferentes niveles (de 1 a 6, siendo el primero el de mayor importancia).

Cuando l os usem os , debemos hacer lo con cohe renc ia, como ha r amos en un t raba jo escr i to : el ttulo de primer nivel espara todo el trabajo; los ttulos de segundo nivel para los principales apartados; los de tercer nivel estn englobados dentro de unode segundo nivel, y as sucesivamente.

Por qu hay que hacerlo as? Para que nuestro documento tenga una estructura correcta. Recordemos que no lo vamos a leer slonosotros; tambin los robots de los buscadores, otras personas, tal vez personas que usan un lector de pantalla y primero recorrenlos ttulos de determinado nivel, etc. Comprenderemos esto mejor despus del punto 3 de esta unidad: Accesibilidad web.

Las e t i que tas pa ra l os t tu l os en HTML son : h1 , h2, h3, h4, h5 y h6; y se abren y cierran, tal y como hemos comentado antes:

Ejemplo:

Ttulo de tercer nivel

Prra fos

Los prrafos en HTML se definen con la etiqueta p.

Ejemplo:

En un lugar de la Mancha, de cuyo nombre no quiero acordarme...

L is tados

Hay listados de dos tipos:

Numerados (ol - ordered list)

No numerados (ul - unordered list)

Los elementos de los listados son, en ambos casos li, de manera que una lista ordenada tendra el siguiente cdigo HTML:

Soy el primer elementoSoy el segundo elementoSoy el tercer elemento

Os animamos a crear un documento HTML con un listado ordenado y otro desordenado para ver la diferencia.

Es t i l o de l t ex to

Negritas = strongCursiva = em

Y se definiran igual que haramos en el papel. Escribimos un prrafo, y despus definimos las negritas. Ejemplo:

En un lugar de la Mancha, de cuyo nombre no quiero acordarme...

Se mostrara as:

En un lugar de la Mancha, de cuyo nombre no qu ie ro aco rda rm e ...

Enlaces

Esta etiqueta es muy importante, porque nos permite movernos entre diferentes pginas HTML. Nos permiten navega r . La etiquetaHTML para los enlaces es a, y un enlace tiene varias propiedades importantes:

La d i r ecc in a l a qu e en l aza ( e l a t r i bu t o h r e f )

Es una direccin web (a una pgina, a un documento, a una imagen...). Su ruta se puede establecer:

De forma absoluta http://www.educa2.madrid.org/web/revista-digital/noticiasDe forma relativa noticias.

Atencin, porque un enlace con ruta relativa se define a partir de la direccin en la que nos encontramos.

Es decir: si estamos aqu

Para saber ms...

2 . 2 . P r i n c i p a l e s e l e m e n t o s o e t i q u e t a s
http://www.desarrolloweb.com/manuales/21/http://www.desarrolloweb.com/manuales/21/


6/12

http://www.educa2.madrid.org/web/revista-digital/noticiasy queremos incluir un enlace aquhttp://www.educa2.madrid.org/web/revista-digital/eventos

Es suficiente con que la ruta de nuestro enlace sea eventos, porque ambas pginas pertenecen al mismo dominio yestn en el mismo nivel. A eso se llama enlace con ruta relativa. La ruta absoluta sera la ruta completa (tambinfuncionara, por supuesto).

El t t u l o (e l a t r i bu to t i t l e )

Al pasar con el ratn por encima de algunos enlaces, aparece un pequeo texto explicativo. Ese es el title del enlace.

Cundo usar lo ?

Cuando haya varios enlaces con el mismo texto (algo que debemos evitar, por cierto, porque no para todo el mundo est tan claroa dnde lleva cada enlace). Ejemplo: los tpicos enlaces de leer ms. Leer ms sobre qu? En el ttulo podemos especificarlo.

Cuando el texto del enlace no sea suficientemente claro. Ejemplo: un artculo que enlaza a una revista muy interesante. Qurevista? El ttulo ofrece informacin adicional (Revista Digital de EducaMadrid, por ejemplo).

Ejem plos de en laces

Un enlace sencillo a Google:

Google

Un prrafo con un enlace con title a Google:

Este es un prrafo que incluye un enlace a un buscador.

Como vemos, las etiquetas se abren y se cierran en el orden adecuado.

Como hemos v i s to , a lgunas e t i que tas , como los en laces , t i enen a t r i bu tos (href, title...) A cada a t r i bu t o l e damos unva lo r (lo que va entrecomillado).

I m g e n e s

Las imgenes tambin tienen varios atributos:

src = ruta de la imagen (relativa o absoluta)alt = texto alternativo. No todos los navegadores lo muestran de la misma forma, pero es importante ponerlo, porque aportainformacin sobre la imagen. Es una breve descripcin de la imagen: una vista alternativa de la misma (textual).title = el ttulo de la imagen. Su funcin no es tanto describir la imagen como titularla. Lo veremos mejor con un ejemplo.width = ancho de la imagen (en pxeles)height = alto de la imagen (en pxeles)

Un e jemp lo :

Si queremos insertar esta imagen :http://morguefile.com/data/imageData/public/files/p/ppdigital/preview/fldr_2005_03_26/file000473730809.jpgQue tendr el siguiente t t u l o: TroncoY el siguiente t e x t o a l t er n a t i v o : Primer plano de la vista superior de un tronco seco cortado

Escribiramos el siguiente cdigo HTML:

Y el resultado sera este:
http://www.educa2.madrid.org/web/revista-digitalhttp://www.educa2.madrid.org/web/revista-digital


7/12

De nuevo un caso especial! La etiqueta imagen no se y luego se , sino que se cierra dentro de la propia etiqueta.

Eso sucede con otras etiquetas, como algunos tipos de campo de formulario o los saltos de lnea. Un salto de lnea se codifica as:

Atencin: eso (
) es XHTML, que es lo que usamos en EducaMadrid. XHTML es una especificacin ms moderna.Una reformulacin del HTML, compatible con XML. Ventajas? Como es XML, se pueden usar herramientas deprocesamiento de XML para procesar los documentos, por ejemplo.

Pero eso escapa a la finalidad del curso, de manera que os dejamos un par de enlaces para quien quiera profundizar enlas diferencias entre HTML y XHTML. Los encontraris en el apartado "Para saber ms...", al final de esta pgina.

Capas

La etiqueta div define una capa.

Ejemplo:

Contenido de la capa.

Las capas no t i enen va lo r semn t i co . Un prrafo es un prrafo; un ttulo es un ttulo... Una capa sirve para albergar contenido;no aporta nada ms.

Usam os l as capas pa ra est ruc t u ra r l a i n fo rm ac in .

Tablas

Muchos usuarios de EducaMadrid estn acostumbrados a usar tablas para maquetar sus pginas (si no lo habis hecho, y estaafirmacin os choca, no os preocupis; pronto entenderis el porqu de la misma).

Muchos crean las tablas, por ejemplo, utilizando el editor de HTML del administrador de contenidos (el que vemos en el cuerpo detexto de un contenido cuando lo creamos o editamos). Las usan para poder colocar unos elementos a la derecha, otros a laizquierda....

Eso es un error, porque l a s tab las no deben usa rse pa ra m aque ta r . Para colocar los elementos usaremos CSS.

Igual que slo usamos la etiqueta p para hacer prrafos, usaremos las tablas slo para mostrar datos tabulados, que es para lo queson. Si rven pa ra m os t ra r una re j i l l a de da tos re lac ionados en t re s po r f i l as y co lumnas , no para maquetar.

Qu ganamos u sndo las as? Tendremos pginas ms ligeras, ms accesibles, con un diseo ms controlable. En definitiva:mejores. Y adems tardaremos menos en hacer nuestras pginas (es ms fcil cambiar la apariencia de una pgina con CSS quetener que tocar todo el cdigo HTML para mover cosas de un sitio a otro). Usaremos las tablas slo para lo que son.

El editor TinyMCE, que usaremos constantemente en EducaMadrid tiene una herramienta para la generacin de tablas muycompleta y fcil de usar. Ahora no vamos a explicar detalladamente la estructura de una tabla HTML, pero habiendo visto lo quehemos visto hasta ahora, no resulta difcil comprenderla. Basta decir que:

table = tablacaption = ttulo de la tablathead = cabecera de la tablatbody = cuerpo de la tabla

tr = fila (table row)th = celda-ttulotd = celda

Y estas etiquetas se anidan y combinan entre s para hacer una tabla:

Ciclistas

NombreApellido

Roberto Heras

Federico Bahamontes

Os animamos a crear un documento HTML con ese cdigo para comprender cmo son las tablas.

HTML y XHTML


8/12

Si queris aprender ms sobre las tablas, visitad el enlace recomendado que encontraris un poco ms abajo en esta mismapgina.

Manual de XHTML (como veris, la estructura y los contenidos no varan con respecto al manual de HTML que hemosrecomendado anteriormente)Diferencias entre HTML y XHTMLCompleta explicacin de las tablas en XHTML(parte del Manual de XHTML recomendado)

I d e n t i f i ca d ore s

Veremos claramente cmo se definen y para qu sirven con ejemplos:

Contenido de la cabecera de mi web.

Contenido central de mi pgina.

Pie de pgina.

Como vemos, hemos dado un identificador (id) a cada capa (ojo: un id ent i f i cador debe ser S I EMPRE n ico). Luego, con CSS,podremos hacer que cada capa tenga una apariencia diferente. Ya veremos cmo.

Clases

Adems de identificadores, podramos usar clases.

Ejemplo: imaginemos que nuestro contenido tiene tres noticias que compartirn apariencia. Podramos hacer:

Contenido de la noticia.



Las clases sirven para identificar elementos con caractersticas comunes.

Si quisiese distinguir una noticia de otra, podra dar un identificador a cada una.

Ejemplo:




Cuando veamos cmo utilizar CSS, veremos lo prctico que es esto. Podramos decir, por ejemplo: que todas las noticias tenganfondo negro y t exto blanco, excepto la not icia 3, que debe tener fondo amarillo y letr as negras.

La clase noticia nos permitir lo primero (que todas compartan colores de fondo y de texto).El identificador nos permitir hacer una definicin especial que se salte la regla general.

Incluso podramos hacerlo de otra forma:




Para saber ms...

2 . 3 . I d e n t i f i c a d o r e s y c l a s e s
http://manual-xhtml.blogspot.com/http://www.ignside.net/man/html/a_xhtml.phphttp://manual-xhtml.blogspot.com/2006/05/tablas.htmlhttp://manual-xhtml.blogspot.com/2006/05/tablas.htmlhttp://manual-xhtml.blogspot.com/2006/05/tablas.htmlhttp://www.ignside.net/man/html/a_xhtml.phphttp://manual-xhtml.blogspot.com/


9/12

Como vemos, un e lem en to puede t ene r dos c lases. En este caso, hay varias noticias, pero unas son pares y otras son impares.En nuestro CSS podramos decir, por ejemplo: que las noticias tengan fondo negro y t exto blanco, y que las noticias pares tenganfondo amarillo y letras negras. De esta forma, todas las noticias pares compartiran apariencia.

Todas esas def in ic iones de apar ienc ia las har em os con CSS. Ya veremos cmo.

No s lo l as capas pueden t ene r i den t i f i cado res y c lases, por supuesto; tambin las imgenes, los prrafos, los

listados...Es im po r tan t e que l os i den t i f i cado res y c lases hagan re fe renc ia a su con ten ido , no a su apariencia. Esto secomprende mejor con un ejemplo: hemos quedado en que podemos decir "que la capa A tenga fondo rojo" utilizandoCSS. Si luego quiero que sea azul, y he llamado a mi capa "capa-roja", no tendra mucho sentido. Adems, loimportante es el contenido; estructurmoslo correctamente y llamemos a las cosas por su nombre ("menu" al men,"contenido" al contenido, etc.). Estaremos aportando informacin adicional sobre la estructura de nuestrodocumento.Debemos recordar que l o s i den t i f i cado res deben se r n i cos, y que no pueden combinarse. Este identificador nosera vlido: "noticia par". Este s: "noticia-1". Las clases s pueden combinarse, y varios elementos pueden tener lamisma clase.Ni identificadores ni clases pueden empezar por guin o por un nmero.

Acabamos de mencionarla en el punto anterior. Qu es la accesib i l idad?

Tim Berners-Lee, creador de la WWW, nos dijo: El poder de la Web est en su universalidad. El acceso de todo el mundo conindependencia de su discapacidad es un aspecto esencial.

Esa frase define muy bien la accesibilidad:

Que todo el mundo pueda acceder a la informacin, con independencia de su contexto de navegacin (pueda ver o no,pueda manejar un ratn o no, tenga una conexin buena o no, tenga un navegador moderno o antiguo, lo haga desde unporttil o desde un mvil...) Eso es la accesibilidad web.

Y cmo se consigue?

Para empezar, con HTML semntica y sintcticamente correcto (cumpliendo la sintaxis especificada por el W3C para que la

informacin pueda rastrearse y organizarse lo mejor posible, para que los navegadores sepan como interpretarla, para que loslectores de pantalla que usan quienes no pueden ver puedan leerla bien, etc.).

Es decir, utilizando un HTML correcto y accesible y separando el contenido de su presentacin (utilizando CSS para definir laapariencia, el diseo).

Profundizar en la accesibilidad web no forma parte los objetivos de este curso, pero l a accesib i l i dad web es muy im po r tan t e , demanera que vamos a hacer un brevsimo resumen que nos sirva para comprender cmo hacer pginas web ms accesibles.

Existen unos documentos denominados Pau tas de Acces ib il i dad a l Con ten ido en l a Web (WCAG) que explican cmo hacer que elcontenido Web sea accesible para personas con discapacidad.

La WCAG 2.0 es la ltima recomendacin del W3C. Se public en el ao 2008.

La recomendac in W CAG 2 .0 es tab lece 4 p r i nc ip ios fundam en ta les que deben ap l i ca rse a l os con ten idos en l a w eb .Deben ser:

1. Percept ib les: que todos puedan percibirlos (una persona que no ve, por ejemplo, no percibir una imagen si no le hemos dadoun texto alternativo).

2. Operab les: fcilmente navegables, que den tiempo suficiente para hacer lo que haya que hacer (por ejemplo: leer un artculo orellenar un formulario), que sean navegables utilizando el teclado...

3. Comprensib les: fcilmente legibles, de estructura predecible...4. Robustos: que puedan ser interpretados por diferentes agentes de usuario (incluidas las tecnologas asistivas, como lectores de

pantalla, etc.).

W CAG 2.0 y W CAG 1.0

La primera versin de las Pau tas de Acces ib il i dad a l Con ten ido en l a Web (WCAG1.0) sigue teniendo mucho peso en lacomunidad de desarrolladores, y algunas de las principales herramientas automticas para la revisin de la accesibilidad web serigen conforme a esa versin.

Las pautas contienen una serie de pun tos d e ve r i f i cac in que ayudan a detectar posibles errores. Estos puntos tienen diferentesniveles:

Pr io r i dad 1 : un desarrollador web los tiene que cumplir ya que, de otra manera, ciertos grupos de usuarios no podr an accedera la informacin del sitio.

No olvidemos que...

3 . A c c e s i b i l i d a d w e b

3 . 1 . P a u t a s d e A c c e s i b i l i d a d a l Co n t e n i d o e n l a W e b


10/12

Pr io r i dad 2 : un desarrollador web los debera cumplir ya que, si no fuese as, sera mu y d i f ci l acceder a la informacin paraciertos grupos de usuarios.Pr io r i dad 3 : un desarrollador web los debera cumplir ya que, de otra forma, algunos usuarios experimentaran c ie r tasd i f i cu l t ades para acceder a la informacin.

En funcin a estos puntos de verificacin se establecen los n ive les de con fo rm idad :

A: se cumplen todos los puntos de verificacin de prioridad 1.AA: se cumplen todos los puntos de verificacin de prioridad 1 y 2.AAA: se cumplen todos los puntos de verificacin de prioridad 1,2 y 3.

WCAG 2.0Resumen de la WCAG 2.0.Web Content Accessibility Guidelines (WCAG) 2.0 (texto completo original, en ingls).Pautas de Accesibilidad de Contenido Web 2.0 (traduccin de Sal Gonzlez Fernndez).Puntos de verificacin de las Pautas de Accesibilidad al Contenido Web (WCAG) 2.0.

WCAG 1.0Web Content Accessibility Guidelines (WCAG) 1.0 (texto completo original, en ingls).Pautas de Accesibilidad de Contenido Web 1.0 (traduccin de Carlos Egea, Alicia Sarabia y Alan Chuter).Gua Breve de Accesibilidad Web del W3C.

Norm a UNE 1398 03 :200 4

En Espaa, "las leyes aprobadas en 2007 obligan a que determinadas aplicaciones web (Administracin Pblica, entidadesbancarias, aseguradoras, etc.) cumplan con los niveles de prioridad 1 y 2 de la Norma UNE 139803:2004" (Usable y accesible, blogde Olga Carreras).

Sin embargo, los desarrolladores estn acostumbrados a trabajar con las WCAG.

Tal y como Olga nos indica en su artculo Diferencias de prioridad entre los requisitos UNE 139803:2004 y los puntos de control delas WCAG 1.0, si queremos que nuestra web cumpla los niveles de prioridad 1 y 2 de esta norma, deber cumplir los puntos deverificacin de prioridad 1 y prioridad 2 de las WCAG 1.0, adems de:

1. Identificar el idioma.2. Incluir un resumen en las tablas.3. Ser navegable utilizando el tabulador.

Legislacin espaola:

Referencia sobre legislacin espaola relacionada con la accesibilidad webCorrespondencia entre los requisitos de la Norma UNE 139803, los puntos de control de las WCAG 1.0 y los criteriosde xito de las WCAG 2.0Diferencias de prioridad entre los requisitos UNE 139803:2004 y los puntos de control de las WCAG 1.0

Reco rdemos que l a r ecom endac in W CAG 2 .0 es tab lece 4 p r i nc ip ios fundam en ta les que d eben ap l i carse a l oscon ten idos en l a w eb . Deben ser:

1. Perceptibles.2. Operables.3. Comprensibles.4. Robustos.

Vamos a dar una serie de recomendaciones que s iempre debe r an tene rse en cuen ta a l a ho ra de c rea r pg inasw e b o t r a b a j a r c o n c o n ten i d o s. No son, ni mucho menos, las nicas medidas a adoptar, pero s nos han parecidomedidas representativas y de fcil comprensin; por eso las hemos seleccionado.

Para saber ms...

3 . 2 . L e g i s l a c i n e n E s p a a

Para saber ms...

3 . 3 . A p l i c a c i n d e l a s p a u t a s d e a c c e s i b i l i d a d

Cmo conseguir todo esto?
http://www.triplea.es/wcag2/http://www.w3.org/TR/WCAG20/http://www.codexexempla.org/traducciones/pautas-accesibilidad-contenido-web-2.0.htmhttp://qweos.net/blog/2009/01/28/guias-practicas-para-profesionales-web-puntos-de-verificacion-de-las-pautas-de-accesibilidad-al-contenido-web-wcag-20/http://www.w3.org/TR/WCAG10/http://www.discapnet.es/web_accesible/wcag10/WAI-WEBCONTENT-19990505_es.htmlhttp://www.w3c.es/divulgacion/guiasbreves/accesibilidadhttp://olgacarreras.blogspot.com/2007/01/diferencias-de-prioridad-entre-los.htmlhttp://olgacarreras.blogspot.com/2007/01/diferencias-de-prioridad-entre-los.htmlhttp://olgacarreras.blogspot.com/2005/01/referencia-sobre-legislacin-espaola.htmlhttp://olgacarreras.blogspot.com/2009/03/correspondencia-entre-los-requisitos-de.htmlhttp://olgacarreras.blogspot.com/2009/03/correspondencia-entre-los-requisitos-de.htmlhttp://olgacarreras.blogspot.com/2007/01/diferencias-de-prioridad-entre-los.htmlhttp://olgacarreras.blogspot.com/2007/01/diferencias-de-prioridad-entre-los.htmlhttp://olgacarreras.blogspot.com/2009/03/correspondencia-entre-los-requisitos-de.htmlhttp://olgacarreras.blogspot.com/2009/03/correspondencia-entre-los-requisitos-de.htmlhttp://olgacarreras.blogspot.com/2005/01/referencia-sobre-legislacin-espaola.htmlhttp://olgacarreras.blogspot.com/2007/01/diferencias-de-prioridad-entre-los.htmlhttp://olgacarreras.blogspot.com/2007/01/diferencias-de-prioridad-entre-los.htmlhttp://www.w3c.es/divulgacion/guiasbreves/accesibilidadhttp://www.discapnet.es/web_accesible/wcag10/WAI-WEBCONTENT-19990505_es.htmlhttp://www.w3.org/TR/WCAG10/http://qweos.net/blog/2009/01/28/guias-practicas-para-profesionales-web-puntos-de-verificacion-de-las-pautas-de-accesibilidad-al-contenido-web-wcag-20/http://www.codexexempla.org/traducciones/pautas-accesibilidad-contenido-web-2.0.htmhttp://www.w3.org/TR/WCAG20/http://www.triplea.es/wcag2/


11/12

Seguir estas recomendaciones es fcil, y podremos cumplir todas ellas utilizando las herramientas de EducaMadrid y sinnecesidad de editar a mano el cdigo HTML.

Cm o hace r con ten idos w eb pe rcep t ib les

Dando a las imgenes un texto alternativo.Ofreciendo alternativas a audios y vdeos.Utilizando colores y fuentes con contraste suficiente y fcilmente legibles.

Cm o hace r con ten idos w eb ope rab les

Permitiendo a los usuarios parar las animaciones.No limitando el tiempo que tienen para realizar una accin, como rellenar un formulario.Incluyendo ttulos en las pginas. Esto es importante. Igual que estructuramos correctamente una memoria o un trabajo (conttulos de primer nivel, de segundo y tercer nivel, etc.), debemos estructurar bien nuestros contenidos web. Su estructura debeser limpia, clara y coherente.

Cm o hace r con ten idos w eb compr ens ib les

Debemos proporcionar una navegacin consistente. Que los elementos de nuestra web estn siempre en el mismo sitio,que tengan un diseo homogneo... Si cada pgina de nuestro sitio web tiene un diseo y el men est en un sitiodiferente, al usuario le costar mucho ubicarse. Eso es poco accesible.

Cm o hacer con ten idos w eb robus tos

Si nuestros contenidos tienen un cdigo limpio y correcto (aprenderemos cmo lograr un HTML correcto en este mismocurso), aseguraremos que puedan ser vistos correctamente de diferentes formas.

Para qu vamos a volvernos locos maquetando una lista utilizando tablas y buscando imgenes para hacer los"puntos" de la lista cuando podemos hacer un listado HTML y luego hacer que se vea como nosotros queremosutilizando CSS?

Los editores WYSIWYG (como el que usamos para escribir el cuerpo de un contenido en EducaMadrid) nos permiten

hacer una lista igual que la haramos en un editor de texto como Word (simplemente pulsando un botn). Ese cdigo esms limpio, ms ligero, ms fcil de modificar y reutilizar y, lo ms importante de todo, es correcto, porque una l i s tadebe se r una l i s ta , i gua l que un t tu l o debe ser un t tu l o , en l uga r de un tex to m uy g r ande .

As es como se crean contenidos web ms accesibles.

Durante este curso vamos a trabajar dentro de las herramientas de EducaMadrid, de manera que gran parte del cdigo XHTML estgenerado por la propia aplicacin, y poco o nada podemos hacer para modificarlo.

Nosotros podemos crear pginas desde Administrar pginas.Podemos dar un nombre a cada pgina (aparecer en el men).

Un ttulo que aparecer en la parte superior del navegador (s: es el title del HTML del que ya hemos hablado).Una url (la direccin web que tendr la pgina), etc.

Pero no tenemos control absoluto sobre todos los elementos de la pgina. Al crear una pgina, esta tiene varios elementos sobrecuyo contenido no podemos influir. S podremos influir sobre su apariencia (eso lo veremos ms adelante; de momento, vamos acentrarnos en el contenido).

Entonces, cmo inc lu imos cd igo XHTML en nuestras pg inas de EducaMadr id?

Pues, por ejemplo, creando un contenido y colocndolo en una pgina. Para editar nuestros contenidos de EducaMadrid, contamoscon el editor TinyMCE:

Simplificar es importante

4 . H T M L a c c e s i b l e e n Ed u c a M a d r i d ( e d i t o r W Y SI W Y G T i n y M C E)


12/12

Como veris, en el editor WYSIWYG de EducaMadrid, hay un botn que nos permite abrir una ventana que muestra el cdigo HTMLde cuanto vayamos escribiendo. Incluso podemos editarlo. De manera que ya tenemos m ed ios pa ra crea r con ten idos con unHTML cor rect o y accesib le desde las her ram ient as de EducaMadr id .

Como vemos al abrir el cdigo HTML, no est todo el cdigo de la pgina web (con su HEAD, su BODY, etc.); slo est el cdigo denuestro contenido. Lo dems, lo incorporar directamente el portal EducaMadrid a la pgina resultante.

Ms adelante, en este mismo curso, veremos cmo crear contenidos e insertarlos en nuestras pginas. Si noencontris el editor WYSIWYG en EducaMadrid, podis hacer estas pruebas directamente en la pgina de ejemplo delEditor TinyMCE.No podemos tocar lo que el portal EducaMadrid inserta automticamente, pero s podemos ser cuidadosos a la horade crear nuestros contenidos y con t ro la r su cd igo fuen te para que sea ms limpio y ms accesible.Esto nos servir, adems, para con t ro la r m e jo r su apa r ienc ia. Ya llegaremos a eso cuando profundicemos enCSS.Antes de empezar a crear contenidos -dentro o fuera de EducaMadrid- os recomendamos que asimilis bien lasegunda unidad de este mismo bloque ("Tratamiento y optimizacin de imgenes para Internet"). Un buent ra t amien to de l as im genes es fundam en ta l pa ra consegu i r pg inas web de ca l idad .

Acces ib i l idad w eb en EducaMadr id

En este apartado hemos ofrecido una visin general sobre la accesibilidad web, pero, qu p asa con EducaMadr id ? Cmoponemos en prctica todo esto?

Os aconsejamos que despus de haber estudiado este apartado ("HTML correcto y accesible"), leis el documen to de apoyo de lb loque 1 (Algunos consejos para mejorar vuestras pginas). Leed lo de ten idamen t e y ten iendo en cuen ta l o ap rend idosob re HTML y accesib i l i dad w eb .

Veris que poner en prctica esos consejos es muy fcil. Apenas requiere esfuerzo adicional. Sin duda, merece la pena hacerlo. Si lohacis, vuestras pginas sern mejores, ms fciles de usar y ms accesibles.

Tened t odo es to b ien p r esen te cuando c re i s con ten idos pa ra vues t ras pg inas . Aprenderis cmo trabajar con contenidosen el bloque 2.

Los conocimientos adquiridos en este apartado deben tenerse en cuenta s iem pre que se cree un con ten ido w eb , den t r o ofuera de EducaMadr id . Si lo hacemos, estaremos contribuyendo a mejorar la Web.

Ignacio Gros Aymerich

Esta obra est bajo una licencia de Creative Commons.

Departamento de TICCRI F " Las Acacias"

Recordemos que...
http://tinymce.moxiecode.com/examples/full.phphttp://tinymce.moxiecode.com/examples/full.phphttp://tinymce.moxiecode.com/examples/full.phphttp://creativecommons.org/licenses/by-nc-sa/3.0/es/http://creativecommons.org/licenses/by-nc-sa/3.0/es/http://creativecommons.org/licenses/by-nc-sa/3.0/es/http://creativecommons.org/licenses/by-nc-sa/3.0/es/http://creativecommons.org/licenses/by-nc-sa/3.0/es/http://tinymce.moxiecode.com/examples/full.phphttp://tinymce.moxiecode.com/examples/full.php

bloque2 html correcto y accesible

Documents