Gua bsica de HTML 5 para diseadores web

Hace 10 aos que se actualiz por ltima vez el HTML con la especificacin 4.01. Desde entonces, la web ha cambiado radicalmente como tambin lo ha hecho el modo de disear y desarrollar pginas. Se han estandarizado una serie de elementos como los encabezados o el men, se utiliza Ajax para recargar el contenido dinmicamente y todo el mundo usa CSS para definir los atributos visuales de la pgina. El nuevo HTML 5 intenta adaptarse al nuevo escenario y presenta elementos para desarrollar pginas dndole un valor especial a la semntica, es decir, que se pueda reconocer desde el propio cdigo el tipo de contenido que se est mostrando. Conviene recordar, que en sus orgenes el HTML no era ms que un lenguaje de etiquetas sencillo orientado a poner en lneas trabajos acadmicos. Por eso, por ejemplo, tenemos seis niveles de ttulos (<h1>, <h2> <h6>) que casi nadie usa en su totalidad. El estado actual del HTML 5 es el de un borrador que est madurando. La primera versin sali a la luz en enero de 2008 pero ha sido revisada varias veces. Sin embargo, navegadores como Firefox 3.5 o Internet Explorer 8 ya pueden interpretarlo y tienen soporte para las etiquetas y tecnologas que vienen de la mano.

Las novedades
El borrador del HTML 5 es un documento complejo y extenso. Hice la prueba de convertilo a PDF obtuve un documento de 1737 hojas tamao A4. Sin embargo, hay mucha informacin estrictamente tcnica que no afecta al diseo web como dice Eric Meyer . Por ejemplo, el cmo hacer un anlsis sintctico (parsear) del componente tiempo o cmo moverse por el historial del navegador. En lo que es estrictamente diseo lo ms importante son las etiquetas del HTML 5. Pero antes avanzar conviene recordar que -como es habitual en el W3C- se asegura la compatibilidad hacia atrs con lo cual podemos seguir escribiendo en el viejo HTML 4 sin miedo porque los navegadores seguirn mostrando correctamente las pginas. Sin embargo, profesionalmente nos vamos a quedar atrs y en algn momento debemos encarar la transicin. Mejor hacerlo ahora.

Etiquetas que salen

Con la llegada del CSS muchas etiquetas del HTML que afectaban la presentacin de los elementos de pantalla cayeron en desuso. Ahora definitivamente se eliminan. Todas pueden ser perfectamente reempalzadas por atributos en las hojas de estilo. El listado de etiquetas que caen en desuso -porque ya existe una forma de hacer lo mismo con CSS- es el siguiente:
FONT CENTER STRIKE BASEFONT BIG S STRIKE TT U

El HTML 5 elimina completamente el uso de frames (marcos) por razones de usabilidad y accesibilidad. No ocurre lo mismo con el IFRAME que seguir siendo vlido. Por lo tanto, las etiquetas vinculadas con los frames que salen son:
FRAME FAMESET NOFRAMES

Para terminar, encontramos etiquetas que ya no se usan porque creaban confusin o hacan lo mismo que otras ya existes. Estas son:
ACRONYM APPLET ISINDEX DIR

Etiquetas que entran

Como mencion anteriormente, una prioridad del HTML 5 es darle valor semntico al cdigo para que se pueda reconocer fcilmente la funcin de los elementos en una pgina. Por eso, aparecen muchos indicadores de secciones y contenedores para tipos de contenido especficos. Hay 22 nuevas etiquetas y son las siguientes:
1. 2. 3. 4. SECTION ARTICLE ASIDE HGROUP

5. 6. 7. 8. 9.

HEADER FOOTER NAV DIALOG FIGURE

10. VIDEO 11. EMBED 12. MARK 13. PROGRESS 14. METER 15. TIME 16. RUBY (RT y RP) 17. CANVAS 18. COMMAND 19. DETAILS 20. DATALIST 21. KEYGEN 22. OUTPUT

Tambin tenemos etiquetas que soportan nuevos atributos. Por ejemplo, anteriormente en INPUT solo podas escoger entre botones, casillas de verificacin, campos de texto o clave y pocas opciones ms. Ahora tenemos atributos especficos como SEARCH si se trata de un campo de bsqueda, EMAIL si el usuario tiene que introducir un correo electrnico o DATE si es una fecha. Tambin aparece el atributo AUTOFOCUS para poder poner el foco de un formulario en un lugar concreto sin tener que recurrir al JavaScript.

Primeros pasos con HTML 5

Voy a intentar explicar algunas de las nuevas etiquetas (las ms importantes en mi opinin) a travs de un ejemplo prctico. Supongamos que tenemos un sitio clsico formado por el encabezado, men a la izquierda, contenido y pide de pgina. En HTML 4.01 hubisemos usado algo as:

Esquema de una pgina en HTML 4

Mientras que en HTML 5 podemos hacer ms explcito el contenido de cada seccin en lugar de usar identificadores para los DIVs.

Esquema de una pgina en HTML 5

Claramente podemos adivinar que HEADER sive para definir el encabezado del sitio, NAV contiene los enlaces para navegar y FOOTER la informacin del pie de pgina.

Luego aparecen una serie de etiquetas para especificar dentro del rea de contenido el tipo de informacin que agregamos. SECTION obviamente marca el inicio y fin de una seccin, ARTICLE sirve para indicar cada artculo (muy til en un blog, por ejemplo) mientras que FIGURE es usado para sealar que un elemento se trata de una ilustracin que acompaa un texto. Estos elementos puede ser tanto una imagen, como un video o un audio. Pasemos este esquema a cdigo HTML 5:
HTML | copy code |? 01 02 <html> 03 <head> 04 <title>Mi Sitio </title> 05 </head> 06 07 <body> 08 <header> 09 <h1><a href= /home>El nombre o ttulo de mi Sitio</a></h1> 10 </header> 11 12 <nav> 13 <ul> 14 <li><h2>Sitio</h2> 15 <ul> 16 <li><a href="/home/">Inicio</a></li> 17 <li><a href=" /acerca">Acerca De</a></li> 18 <li><a href="/contacto">Contacto</a></li> 19 </ul> 20 </li> 21 </ul> 22 </nav> 23

24 <section> 25 <article> 26 <h2><a href="/html-5">Las novedades del HTML 5</a></h2> <p>La nueva versin del lenguaje ya est aqu y llega con nuevos 27 cambios... </p> 28 </article> 29 30 <article> 31 <h2><a href="/tutoriales-con-CSS">Tutoriales con CSS</a></h2> <p>Nueva serie de tutoriales con CSS sobre la posiblidad de crear efectos con nuestras imagenes...</p> 33 <figure> 34 <video src= /video></video> 35 <legend>Video explicativo sobre uso de CSS para efectos</legend> 36 </figure> 37 </article> 38 32 39 <nav> 40 <a href="/blog/page/2/">Ms articulos</a> 41 </nav> 42 43 </section> 44 45 <footer> 46 <p>Copyright 2009 por mi</p> 47 </footer> 48 49 </body> 50 </html> 51

Este ejemplo es muy simple pero sirve para analizar la estructura bsica de una pgina web en HTML 5. Como se puede ver, en este caso us la etiqueta FIGURE para insertar un video y que acompa con LEGEND para agregarle el epgrafe. El HTML 5 tambin tiene etiquetas para tipos de contenidos muy especficos. Muchas se pueden comprender fcilmente: TIME para mostrar la hora, DATE para las fechas, AUDIO para insertar sonidos o METER para representar una magnitud de medicin (el espacio en el disco rgido, por ejemplo). Otras no lo son tanto pero su uso es interesante. Un par de ejemplos

ASIDE: Es para lo que en periodismo se llaman apostillas, esto es, una informacin adicional sobre un tema pero que no hace al centro del a cuestin. Como los recuadros que acompaan a veces la nota central de una revista.

PROGRESS: Para representar el avance de una tarea como puede ser el proceso de registro o suscripcin en una web.

El adis a los plugins que no fue Una de las propuestas ms controvertidas del HTML 5 fue su intencin de trabajar con estndares abiertos para el tratamiento del contenido multimedia. Hay que recodar que la llegada del video y la animacin a la web fue de la mano de estndares cerrados como Quick Time y Flash respectivamente. La intencin del W3C fue apostar fuerte por soluciones de cdigo abierto como Ogg Theora para manejar la reproduccin multimedia. Sin embargo, las presiones de la industria hicieron que la propuesta se retirara y aun no hay una definicin concreta a respecto. Pero lo cierto es que las etiquetas OBJECT y EMBED que se utilizan para agregar contenido multimedia con plugins siguen siendo soportadas. En el caso de OBJECT desaparecen algunos atributos como ARCHIVE, CLASSID, CODEBASE, CODETYPE, DECLARE y STANDBY. Estos atributos se pueden mantener por razones de compatibilidad con HTML 4 pero no tienen funcin alguna en la nueva versin. La etiqueta APPLET usada casi exclusivamente para embeber un programa en Java dentro de una pgina- no tuvo la misma suerte y fue retirada. Formularios ms complejos Uno de los aspectos en el cual el HTML 4 exhibe ms limitaciones es la hora de trabajar con formulario. Ahora el nuevo HTML 5 nos permite trabajar con componentes especficos para algunos tipos de datos como fechas, un cdigo postal o una direccin de e-mail. Por ejemplo, un formulario clsico donde pedimos al usuario su nombre, correo y pgina web queda del siguiente modo:

HTML | copy code |? 1 <input id="nombre" name="nombre" type="text" /> 2 <input id="correo" name="correo" type="email" /> 3 <input id="web" name="web" type="url" />

Uno de los aspectos ms interesantes de HTML con los formularios es que podemos hacer validaciones de datos sin recurrir a JavaScript. Aunque ya tenemos tipos de datos especficos como correo, fechas o telfono siempre es interesante verificar que el usuario realmente escribe datos de forma correcta en los campos. Para realizar la validacin empleamos el atributo PATTERN. La validacin se realiza con un mtodo estndar como son las expresiones regulares definidas en ECMAScript. No vamos a desarrollar ac el tema de expresiones regulares pero veamos un ejemplo sencillo de cmo evitar que nos metan cdigo malicioso en un formulario:

HTML | copy code |? 1 <input title="Por favor, no ingreses cdigo en este campo" name="texto" />