El pasado día 29 de Marzo, asistimos al evento MSDN: WebCamps que Microsoft organizó en el parque tecnológico de Zamudio, en Bilbao. Una mañana muy interesante en la que se debatieron temas como la migración de XHTML 1.0 a HTML5, las novedades para desarrolladores que implementa el nuevo Internet Explorer 9, o la manera más optima de programar webs multi-navegador.

En este artículo pretendemos hacer un breve resumen de lo que fue la primera conferencia de este evento: Migración de XHTML 1.0 estricto a HTML5. En sucesivos artículos abordaremos el resto de exposiciones.

1.- Migración de XHTML 1.0 a HTML5: No es para tanto.

Tienes una Web en html, y no te atreves a migrarla al nuevo estándar (HTML5) por miedo a que sea muy complejo, o que te lleve mucho tiempo? Pues nada más lejos de la realidad, ya que estas migraciones resultan mucho más livianas de lo que pueda parecer en un principio. Métete este concepto en la cabeza: Casi todo lo que vas a tener que hacer es quitar código, resumiéndolo y haciéndolo más ligero.

En la siguiente tabla, se resumen los puntos básicos a tener en cuenta a la hora de migrar cualquier página web a HTML5. En este caso, estamos comparando las nuevas especificaciones con el lenguaje XHTML 1.0 estricto.

XHTML 1.0 strict HTML5
!DOCTYPE <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <!DOCTYPE html>
Encoding <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/> <meta charset=”utf-8″ />
Links <link rel=”stylesheet” href=”style.css”/> <link rel=stylesheet href=style.css>
Scripts <script src=”jquery.js”></script> <script src=jquery.js></script>

2.- Nuevas etiquetas HTML5: No son tantas.

A parte de estos mínimos cambios ya citados, que lo que pretenden es hacer la Web más semántica, hay nuevas etiquetas HTML que apoyan esta idea. Las más importantes tienen que ver con la estructura del sitio, aunque hay otras cuantas más. Son las siguientes:

ETIQUETA DESCRIPCIÓN
<article> Es la manera que tiene HTML5 de indicar a los robots que lo que esta leyendo es un artículo, y por lo tanto, su contenido es de máxima relevancia dentro de la propia página web. Es decir, esta etiqueta define un contenido idenpendiente y auto-contenido de la web. El artículo debe tener sentido por si solo.
<aside> Etiqueta que define información adicional sobre el contenido en el que esta situado. Puede ser una “sidebar” dentro de un artículo, por ejemplo.
<audio> Igual que el <video>, pero con archivos de audio.
<canvas> Espacio para gráficos, generados en el momento de visualización de la web. Con esta etiqueta y ayuda de javascript, ahora si que diremos definitivamente adios! A flash.
<command> Dibuja en pantalla un botón de comando (radiobutton, checkbox o botón normal). Tiene que ir obligatoriamente dentro de un elemento <menu> (si no lo está no se mostrará, pero podrá usarse para definir atajos de teclado).
<datalist> Es el “<select>” de toda la vida, se usa para definir una lista de opciones. Se debe usar junto con el elemento <input>, para indicar qué valores puede tomar el elemento input. Ej:

<input list=”ejemplo” />
<datalist>
<option value=”uno”>
<option value=”dos”>
<option value=”tres”>
<option value=”cuatro”>
</datalist>

<details> Define detalles adicionales sobre la información proporcionada. La etiqueta details tiene la propiedad de poder ocultarse o mostrarse según se necesite en cada momento, pero no debería ser visible hasta que el atributo “open” este especificado. Los detalles contenidos por esta etiqueta debería llevar un titular, que tiene que ser definido por la etiqueta “<summary>”. El título será visible, y el resto cuando el usuario haga click, por ejemplo.
<figcaption> Es la leyenda de un elemento “figure” padre. Debería ser el primer o el último hijo del elemento <figure>.
<figure> Se utiliza para agrupar ciertos elementos: Imágenes, listas, diagramas, listas de código, etc. Tiene que ser información relevante con respecto a al contenido principal que lo engloba, pero en el supuesto que se elimine esta información, no debe afectar a la comprensión general del documento.
<footer> Etiqueta que crea un módulo para maquetar el pie de página
<header> Etiqueta para la especificación de la cabecera de una página web
<hgroup> Sirve para agrupar headers etiquetados con <h1>, <h2>, etc. El mayor titular contenido es el principal y el resto son sub-titulares. (en castellano queda un poco mal esta palabra, en inglés es “sub-headings”).
<keygen> Esta etiqueta especifica un campo de contraseña dentro de un formulario, creando una pareja de contraseñas (una pública y otra privada).Es una manera de encriptar las contraseñas introducidas en formularios.
<mark> Una especie de subrayado para destacar palabras dentro de un texto, como los rotuladores amarillos fosforitos de toda la vida.
<meter> La etiqueta <meter> define una medición. Sólo se utiliza para las mediciones con valores mínimo y máximo conocidos. Esto también se conoce como un indicador. Ej.:

<meter value=”2″ min=”0″ max=”10″>2 out of 10</meter><br />
<meter value=”0.6″>60%</meter>

<nav> Etiqueta que define un módulo de navegación principal o auxiliar, generalmente menús o listas de enlaces.
<output> Resulta que ahora se pueden hacer operaciones lógicas con HTML, asi que esta etiqueta sirve para mostrar el resultado. Ej.:

<input name=”numa” type=”number”> +
<input name=”numb” type=”number”> =
<output name=”result” onforminput=”value=numa.valueAsNumber + numb.valueAsNumber”></output>
<progress> Una de las etiquetas más útiles, ya que define  una barra de progreso.
<section> Etiqueta que crea un módulo dónde iran incluidos los textos relevantes de la web (artículos, posts, etc)
<source> Esta etiqueta define la fuente para los elementos multimedia, como el <video> o el <audio>. Tiene como atributos el “src” que indica la ruta del archivo y type para el tipo de archivo.
<summary> Como ya hemos explicado anteriormente, es el header dentro de la etiqueta <details>.
<time> Una etiqueta con la que marcar todo tipo de fechas en nuestra web, o palabras que indiquen cualquier tipo de referencia de tiempo. Ej.: “Hoy”, “Mañana”, etc. Ej.:

<p>Tengo una cita el <time datetime=”2008-02-14″>día de San Valentín</time></p>

<video> Como su propio nombre indica…para incluir video en nuestra web sin necesidad de usar eso que llaman “flash”.

3.- Compatibilidad de HTML5 con navegadores web: No hay que tener miedo.

Y ahora la pregunta del millón… que pasa con los navegadores que todavía no soportan HTML5? Como es lógico, estos navegadores no entenderán las nuevas etiquetas html5, por lo que nuestra página será completamente incomprensible para ellos.

Afortunadamente existen algunos trucos para asegurarnos que nuestra web se visualice correctamente en todos los navegadores web, independientemente de si implementen html5 o no. El más efectivo para mi gusto es la inclusión del siguiente código en el header de nuestra web. Con ello nos aseguraremos que todo sea interpretando correctamente:

<!– [if lt IE 9]>
<script src=”https://html5shim.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>
.

4.- Últimas novedades y actualizaciones sobre HTML5: Para los más aplicados.

Si le teníais miedo al HTML5, sabed que ya sabéis todo lo que hay que saber. Quedaos tranquilos, porque no hay nada más. Eso si, de vez en cuando salen nuevas etiquetas con cuentagotas, o por el contrario otras son desestimadas, así que hay que seguir un poco atento. Para ello nada mejor que la web oficial del w3schools:

https://www.w3schools.com/html5/

Me he dejado alguna etiqueta? Diez puntos para el que descubra alguna y lo comente!