Como decía en el post anterior, HTML 5 establece una serie de nuevos elementos y atributos, algunos de ellos son técnicamente similares a las etiquetas <div> y <span>, pero tienen un significado semántico, como por ejemplo <nav> (bloque de navegación del sitio web) y <footer>.

HTML5 añade etiquetas para manejar la Web Semántica (Web 3.0): header, footer, article, nav, time(fecha del contenido), link rel=” (tipo de contenido que se enlaza). Estas etiquetas permiten describir cual es el significado del contenido. Por ejemplo su importancia, su finalidad y las relaciones que existen entre ellas. No tienen especial impacto en la visualización, se orientan a buscadores. Los buscadores podrán indexar e interpretar esta meta información para no buscar simplemente apariciones de palabras en el texto de la página.

HTML 5 está formado por varios módulos distintos, cuyo grado de especificación está en niveles dispares. Casi todas las características de HTML 5 están ya listas para ser implementadas, y las versiones más nuevas de casi todos los navegadores implementan algunas de las características de HTML 5. Pero para que una web se vea bien en todos los sistemas, hay que utilizar sólo aquellas partes que funcionan en todos los navegadores, por lo que realmente son pocas si queremos hacer un sitio web compatible.

Manos a la obra :)
En este artículo voy a tratar los recursos a implementar para poder comenzar a utilizar la nueva marcación html5, en concreto las etiquetas: article, aside, command, details, summary, figure, figcaption, footer, header, hgroup, mark, meter, nav, progress, ruby, rt, rp, section, time, wbr y canvas.

Utilizaré un ejemplo sencillo que represente la estructura básica de cualquier página web, por ejemplo, lo más común es encontrar una web con las secciones <div class=” header, navigation, content, sidebar y footer “>.Traducido a HTML5 sería:

<!DOCTYPE HTML>
<html>
<head>
    <title>Prueba de HTML5 y CSS3</title>
</head>
<body>
  <div class="wrap"><div class="page">
    <header>
        <h1>Titulo 1</h1>
        <h2>Titulo 2</h2>
        <h3>Titulo 3</h3>
        <nav><li> Hola mundo! </li><li> Contacto </li></nav>
    </header>
    <div class="cuerpo">
        <aside>
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
            </ul>
        </aside>
        <article>
            <h1>Titulo</h1>
            <h2>Subtitulo</h2>
            <p>Texto de prueba, contenido.</p>
        </article>
        <div style="clear:both;"></div>
    </div><!-- cuerpo -->
    <footer>
        <p>Pie de pagina y creditos.</p>
    </footer>
  </div><!-- wrap --></div><!-- page -->
</body>
</html>

Reseteando los estilos del navegador
Antes de seguir debo mencionar que todos los navegadores cuentan con una hoja de estilos CSS que aplican por defecto, esto quiere decir que cuando nosotros no sobrescribimos el estilo de un elemento se aplican las propiedades definidas en la hoja de estilos del navegador. Esta es una de las razones por las que vemos diferencias en el diseño entre un navegador y otro.

Para solucionar esto muchos desarrolladores y diseñadores utilizamos hojas de estilos que “resetean” los estilos aplicados por el navegador, haciendo que nuestros diseños necesiten menos modificaciones para verse igual en todos los navegadores.

Particularmente yo utilizo las hojas de estilos reset.css, base.css y fonts.css de YUI, un framework javascript/css desarrollado y mantenido por Yahoo. Este framework es muy extenso y tiene cientos de funciones, pero vamos a limitarnos a estas hojas de estilos de http://developer.yahoo.com/yui/:
Archivo reset.css – versión comprimida reset-min.css
Archivo base.css – versión comprimida base-min.css
Archivo fonts.css – versión comprimida fonts-min.css

Personalmente junté el contenido de estos 3 archivos en una versión semi-comprimida, y para utilizarlo simplemente lo incluimos en la sección head como el resto de los estilos de la página:
<link type=”text/css” rel=”stylesheet” href=”reset.css”>

La imagen anterior muestra como se ve el anterior código html en IE7 y Firefox 3.6 antes y despues de aplicar el estilo del archivo reset.css, como se puede apreciar, las diferencias de presentación se minimizaron bastante.

IE Print Protector – ieCSS
El siguiente paso es proporcionarle a IE los medios para renderizar páginas HTML5. IE Print Protector es un pequeño programa javascript que permite visualizar páginas HTML5 en Internet Explorer. IE Print Protector posibilita que IE renderice elementos HTML5 correctamente por pantalla e impresora. Podemos descargar ieCSS desde http://www.iecss.com/print-protector/ o desde http://code.google.com/p/html5shiv/
http://www.iecss.com/print-protector/javascript/iepp.1-6-2.js
http://html5shim.googlecode.com/svn/trunk/html5.js
La forma de utilizarlo es mediante un comentario condicional introducido por Microsoft en Internet Explorer en la versión 5 del navegador:
<!–[if lt IE 9]>
<script src=”html5.js”></script>
<![endif]–>

Este código javascript permite que las versiones anteriores a IE9 aniden correctamente las nuevas etiquetas HTML5 en el DOM.

Aplicando un estilo
Ahora apliquemos un estilo para ubicar los elementos de manera que sean rápidamente identificables por el usuario, solo utilizaremos unos estilos básicos.

<style type="text/css">
header,article,nav,aside,footer{ margin:5px; padding:10px; }
h1,h2,h3{ margin:5px; }
.wrap{ margin:0px; padding:5px; width:700px; }
.page{ margin-left:35px; padding:10px; width:600px; border:1px solid #777; }
header,footer{ background:#aaa; border:2px solid #369; border-radius:10px; }
header nav{ height:33px; float:right; margin-top:-35px; padding:0px; border:2px dotted #369; }
header nav li{ color:#963; margin:3px; padding:3px; background:#fed; float:left; border:none; }
footer p{ margin:0; padding:0px; text-align:center;}
.cuerpo{ margin:5px; padding:5px; border:2px solid #789; background:#ccc; border-radius:3px; }
article{ border:2px solid #779; background:#999; width:360px; }
article p{ margin:0px; padding:5px; }
aside{ border:2px solid #779; width:150px; float:right; padding-top:0px; }
li{ margin-left:-15px; line-height:20px; border-bottom:2px dotted #369; }
</style>

Estilo aplicado visto con Internet Explorer 6:

Estilo aplicado visto con Internet Explorer 7:

Estilo aplicado visto con Internet Explorer 8:

Estilo aplicado visto con Internet Explorer 9:

Estilo aplicado visto con Firefox 3.6:

Estilo aplicado visto con Firefox 4:

Como podemos ver Internet Explorer 6, 7 y 8 aún no muestran la página correctamente y Firefox 3.6 lo hace con algunos errores, esto se debe a que estos navegadores aplican la propiedad display:inline de css a los elementos desconocidos, sobrescribiendo con display:block veremos algunos cambios. Este código lo podemos añadir al archivo reset.css:

<style type="text/css">
article,aside,command,details,summary,figure,figcaption,footer,header,hgroup,
mark,meter,nav,progress,ruby,rt,rp,section,time,wbr,canvas{display:block}
</style>

Internet Explorer 7(la versión 6 se ve peor):

Internet Explorer 8:

Firefox 3.6

En estas capturas se puede apreciar como se comportan los diferentes navegadores con el nuevo estandar. IE9 y FF4 hacen un gran trabajo, IE8 y FF 3.6 renderizan de manera más que aceptable luego de aplicar las herramientas y métodos descritos más arriba en este post.

Si solo utilizamos HTML5 de forma parcial como vimos en este artículo, y teniendo en cuenta los datos del artículo anterior, el porcentaje de usuarios que podrá visualizar el sitio será cercano al 76%, pero aún existirá un 24% de visitantes tendrá una mala experiencia de navegación.

IE6 e IE7 la verdad me desaniman bastante, en cuanto tenga tiempo veré como mejorar la presentación en IE7, pero no tengo muchas esperanzas(ni ganas). La verdad, no veo la hora de que estas dos versiones desaparezcan :)

Pueden ver el ejemplo de este artículo funcionando en: http://www.animacionyweb.com.ar/pruebas/html5/


Un comentario para “HTML5 primeros pasos”

  1. marlon martos Says:

    gracias por la informacion. ahora entiendo un poko mas sobre reset, entre otras cosas. salu2

Deja un comentario

Desarrollado por AnimacionyWeb     Stats