HTML5

HTML 5 presenta una gran cantidad de herramientas geniales para los diseñadores que desean que su código sea legible y semánticamente significativo.

En este tutorial les voy a enseñar cómo crear un diseño común utilizando algunos de los nuevos elementos semánticos de HTML5 y luego implementaremos JavaScript y CSS para que sea compatible con IE, incluso con el maldito IE6.

REVISIÓN RÁPIDA DE LOS ELEMENTOS EN HTML5

HTML5 pone a nuestra disposición un conjunto de nuevos elementos semánticamente significativos para describir el diseño típico de una página web. Utilizarlos hace que sea más fácil para uno leer y reconocer el código, y les facilita a los motores de búsqueda y a los lectores leer y organizar el contenido.

Los elementos HTML 5 que estaremos utilizando son:

  • header
  • footer
  • nav
  • article
  • hgroup

Simplemente leyendo los nombres de los elementos tendrán una buena idea de para qué sirven, y ese es el punto. Ahora se puede parar de abusar del tag <div> en todos los diseños carentes de tablas, y en su lugar crear titulares <header> y pies de página en base a <footer>.

El elemento que puede no ser tan obvio es <hgroup>. Este elemento simplemente define un grupo de encabezados (<h1> – <h6>) para que puedas agrupar el título y subtítulo de un artículo de un blog juntos, por ejemplo. Sería algo así como la cabecera de la sección de contenido.

PASO 1: HTML

Vamos a recrear el diseño más común de la web, el de 2 columnas:

Cuerpo con HTM5

Este layout usualmente se logra con una cascada de elementos <div> pero con HTML5 se puede lograr de una forma muy natural:

1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPE html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <html>
        <head>
            <title><!-- Your Title --></title>
        </head>
        <body>
            <header><!-- ... --></header>
            <nav><!-- ... --></nav>
            <div id="main"><!-- ... --></div>
            <footer><!-- ... --></footer>
        </body>
     </html>

Y además, dentro de elemento “main”, vamos a agregar algunos templates simples de artículos:

1
2
3
4
5
6
7
8
9

<article>
    <hgroup>
        <h2>Title</h2>
        <h3>Subtitle</h3>
    </hgroup>
       <p>
        <!-- --->
       </p>
</article>

Ahora tenemos un esqueleto completo en HTML5 que no utiliza más que las etiquetas significativas para todo el contenido. Fácil de leer, de analizar y de diseñar.

Si se preguntan por qué no se utilizó el elemento “section”, en lugar de un <div> para la columna principal: la razón es que el elemento section no es un elemento contenedor genérico. Cuando un elemento se necesita para propósitos de estilo o como conveniencia para scripting, es recomendable utilizar el elemento <div>.

PASO 2: CSS

Posicionar todos estos elementos sería fácil si todos fueran divs, ya que sabemos la forma en que son manejados por todos los navegadores, así que sabemos cómo escribir CSS para ellos.

Sin embargo, además, todos los navegadores aplican una hoja de estilo predeterminada a una página. Incluso si no has especificado ninguna, hay CSS aplicándose cada vez que una página que has escrito se carga en Firefox o IE.

Por ejemplo, aquí está el estilo aplicado a un <div> en el archivo “html.css” por defecto que viene con Firefox:

1
2
3

html, div, map, dt, isindex, form {
display: block;
}

¿Pero qué sucede cuando un navegador se encuentra con un elemento que no reconoce? Nosotros no podemos estar seguros. Puede ser que no consiga ningún estilo; podría heredar un cierto estilo por defecto; es posible que no se muestre en absoluto.

Por lo tanto, debemos aseguramos de dar estilo a todos y cada uno de nuestros nuevos elementos en nuestro propio CSS. Sin hacer suposiciones:

1
2
3
4
5

/* Hacer que los elementos de HTML 5 tengan display:block
para mantener una coherencia */
header, nav, article, footer, address {
display: block;
}

Ahora podemos tratar a estos elementos como divs, seguros de que se mostrarán de forma consistente.

EL PROBLEMA

Echemos un vistazo a nuestra disposición hasta el momento. Vean  nuestro diseño en Safari 4:

HTML demo Safari
Sin embargo, miren lo que sucede en Internet Explorer 6:
HTML demo ie roto

¿Qué hay de malo en esta imagen? Al establecer explícitamente display:block; en CSS, deberíamos haber comunicado al navegador nuestras intenciones para este elemento.

Desafortunadamente, IE está haciendo caso omiso de los elementos que no reconoce, independientemente del CSS. Nuestro contenido se queda flotando en el contenedor padre, como si los elementos de HTML5 no existieran.

De alguna manera, tenemos que hacer que IE renderice esos elementos desconocidos, y ya notamos que un estilo de la manera adecuada no va a lograrlo.

PASO 3: JAVASCRIPT

Afortunadamente, hay una forma de lograr que IE reconozca los nuevos elementos con un poco de Javascript.

Esta técnica fue difundida en el blog de Jhon Resig, se llama “HTML 5 Shiv”:

resig

Consiste simplemente en involucrar la llamada document.createElement() para cada elemento nuevo que no se reconoce.

Tradicionalmente harías esta llamada para inyectar un elemento de forma directa en alguna rama del DOM; en otras palabras, en un contenedor existente dentro de una etiqueta <body>.

Puedes utilizar esto para arreglar el problema de los elementos desconocidos también. Sin embargo, este truco también funciona llamando document.createElement() en la etiqueta <head>, sin tener que hacer referencia a un elemento contenedor. Esto lo hace todavía mucho más fácil de leer y escribir:

1
2
3
4
5

document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");

Ahora que hemos añadido el JavaScript, veamos otra vez a Internet Explorer 6:

htmldemo_ie_fixed

Perfecto. Internet Explorer 6 ahora está renderizando el código HTML 5 tan bien como Safari 4. :D

CONCLUSIÓN

HTML 5 es realmente excitante para cualquier diseñador web que desee generar código limpio, fácil de leer y semánticamente significativo. Y con sólo un par de pasos simples, una línea de CSS y una de JS por elemento, podemos comenzar a implementar HTML5 en nuestros sitios sin problemas hoy mismo.

¿Ya has probado esta técnica?

Fuente | EL WebMaster