Hace unos meses me propuse ponerme a estudiar HTML5 y CSS3, ambos estándares traen tremendas mejoras, y luego de varios libros y algún curso me decidí a probar los distintos navegadores con una página muy sencilla.

Mi sorpresa fue que a pesar de lo que había leído varios navegadores no se comportaban como yo esperaba, incluso haciendo uso del código js de @jon_neal disponible desde su web(iecss pre proccessor), o desde google(html5shiv).

En teoría HTML5 es retro-compatible, lo que significaría que la presentación de una página HTML5 no debería romperse, tampoco deberían aplicarse los estilos a los elementos desconocidos, pero las cosas deberían verse mas o menos en el lugar que fueron puestas. Esto no es así debido a la implementación de HTML que hace cada navegador.

Para comenzar debo decir que los navegadores tienen 2 modos de renderizado: “quirks mode” y “standards mode”. Cuando no se define un DOCTYPE al comienzo del documento HTML el navegador renderiza en modo quirks, compatible con contenido antiguo(ej html3), y cuando se define un DOCTYPE el navegador renderiza en modo estandar, utilizando la versión de html indicada. Actualmente hay unos 15 doctypes que disparan el modo estandar en los navegadores.

Una breve introducción:
En el modo estandar los navegadores dan un correcto tratamiento a los elementos de acuerdo a la especificación implementada de HTML.

Una página HTML es una serie de elementos anidados. La estructura de la página es como un árbol, algunos elementos son hermanos, como las ramas que salen de un tronco y otros pueden ser como hijos, anidados dentro de otros elementos, siendo html el elemento raíz.

HTML5 es la quinta revisión del lenguaje básico de desarrollo web HTML (Hypertext Markup Language), que es el principal lenguaje utilizado en la World Wide Web. 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>.

Document Object Model

El Document Object Model o DOM (‘Modelo de Objetos del Documento’ o ‘Modelo en Objetos para la representación de Documentos’) es esencialmente una interfaz de programación de aplicaciones (API) que proporciona un conjunto estándar de objetos para representar documentos HTML y XML, un modelo estándar sobre cómo pueden combinarse dichos objetos, y una interfaz estándar para acceder a ellos y manipularlos. A través del DOM, los programas pueden acceder y modificar el contenido, estructura y estilo de los documentos HTML y XML, que es para lo que se diseñó principalmente. El responsable del DOM es el World Wide Web Consortium (W3C). <WIKI>

El problema de retrocompatibilidad de HTML5 comienza cuando verificamos que todos los navegadores implementan la API para representar documentos HTML de forma diferente. Una de las características de la presentación HTML es que el usuario no ve ningún error cuando la página está mal formada, ya sea porque le falta el cierre de un tag o porque tiene un error de sintaxis. El usuario a lo sumo verá alguna inconsistencia en el diseño. Esto que en principio es una ventaja se convierte en desventaja cuando utilizamos nuevos elementos y estos no se renderizan correctamente. Afortunadamente existen tests(html5test.com), y librerías(modernizr) para detectar y evitar algunos problemas.

Otro problema se presenta con IE6 e IE7, mientras que Firefox desde su versión 3.0 anida los elementos desconocidos, aunque por defecto solo es posible aplicarle unas pocas propiedades css como fuente y tamaño, IE6 e IE7 tratan a los nuevos elementos sin aplicarle ninguna propiedad quedando estos a la altura del body en cuanto a anidación se refiere.

Para solucionar este problema @jon_neal creó iess pp(http://code.google.com/p/html5shiv/), un pequeño script que por medio de javascript declara los nuevos elementos de html5 en el elemento html del DOM permitiendo que el navegador los anide correctamente, pero por desgracia en IE tampoco se aplican bien los estilos.

Esto hace que nos desanimemos un poco ya que los únicos navegadores que renderizan correctamente los elementos básicos de HTML5 y CSS3 son Opera desde su versión 10, Chrome desde su versión 11, Firefox desde su versión 5, y de manera muy limitada IE9. IE8 aunque hace algún avance no supera a Firefox 3.5 renderizando HTML5.

Existen algunas cosas que podemos hacer para utilizar los nuevos elementos de marcado de HTML5 y que se visualicen bien en navegadores antiguos, pero esto es solo una muy pequeña porción de lo que trae html5, e igualmente seguiremos sin poder utilizar las propiedades de estos elementos.

Los elementos(tags) que podemos comenzar a utilizar logrando que se visualicen correctamente en navegadores que originalmente no soportan html5 son:
article, aside, command, details, summary, figure, figcaption, footer, header, hgroup, mark, meter, nav, progress, ruby, rt, rp, section, time, wbr y canvas

Entonces, ¿conviene comenzar a diseñar en HTML5?
Bueno, todo depende del público objetivo de la web y de los navegadores que utilicen. ¿Estamos dispuestos a romper la web para los usuarios que tienen un navegador de antes de 2010?. Teniendo en cuenta que muchos internautas utilizan el navegador que viene con el SO, y que no hay nuevas versiones de IE para windows XP, nos encontramos en un dilema: ¿romper la web o no romperla? :)

Es posible comenzar a utilizar ahora las etiquetas anteriormente mencionadas pensando en el soporte futuro del estándar, pero en cuanto queramos hacer una implementación completa de html5 en una página nos encontraremos con que muchísimos elementos no funcionan o no lo hacen como deberían, como por ejemplo los nuevos elementos de formulario. Los nuevos tipos para input no funcionarán como deben en muchos navegadores y veremos en su lugar un input type text, esto es debido a que el estándar html define que los tipos desconocidos de elementos de formulario se traten de esa manera, y como puede apreciarse en el gráfico al inicio de este post, no podemos despreciar las visitas de navegadores obsoletos.

El gráfico muestra las ultimas 15000 visitas de un sitio online de noticias de Argentina, por lo que la muestra es bastante amplia como para como para ser representativa de la realidad local. En el gráfico puede apreciarse que solo el 36%(Chrome, IE9, FF5/6) de los usuarios disponen de un navegador capaz de renderizar correctamente una página hecha en HTML5, por lo que hay un 64% que vería nuestra web rota. Cabe aclarar que a la fecha de este artículo ningún navegador soporta completamente el nuevo estandar, por lo que actualmente ningún navegador ha implementado correctamente todos los elementos y modificaciones introducidos por la nueva especificación.

Si solo utilizamos HTML5 de forma parcial como vimos en este artículo, el porcentaje de usuarios que podrá visualizar el sitio será mucho mayor, por sobre el 76% de ellos, pero aún existirá un 24% de visitantes tendrá una mala experiencia de navegación.

Otro dato interesante de ese gráfico es que el 36% de los usuarios cuenta con una pantalla de 1024 pixels de ancho. Este es un buen dato a tener en cuenta a la hora de diseñar una web.

¿Cuando comenzar a utilizar HTML5?
Por desgracia Microsoft no publica nuevas versiones de Internet Explorer para Windows Xp, y dado que en Argentina tiene más del 50% del mercado, y más del 40% a nivel mundial, no hay buenas expectativas de que sea pronto. De acuerdo al gráfico IE6 e IE7 suman 21% y IE8 cuenta con el 28%, esto quiere decir que casi el 90% de los usuarios de Windows Xp utilizan el navegador que viene con windows, obstaculizando el avance de las nuevas tecnologías, porque las empresas no realizaran webs que no puedan ver la mitad de los visitantes.

Como dije anteriormente podemos comenzar a utilizar algunos elementos de html5 utilizando varios trucos, pero para tener una mejor idea del tiempo que suele demorar la adopción de un estandar, la versión HTML 4.01 que se utiliza actualmente fue publicada en diciembre del año 1999, y recién en 2009 comenzamos a ver su verdadero potencial.

Seguramente pasen algunos años para que HTML 5 sea lo que HTML 4.01 es hoy, pero las mejoras que aporta la nueva versión son tan impresionantes, que pueden afectar su velocidad de su adopción.

En próximas entregas avanzaré con algunos ejemplos sobre Firefox 6, mientras tanto hay que convencer a nuestros conocidos que dejen de utilizar Internet Explorer.


Deja un comentario

Desarrollado por AnimacionyWeb     Stats