Micaela 22 de febrero de 2010 a las 08.00
   Imprimir artículo
elWebmaster.com

Cómo hacer que todos los navegadores rendericen HTML5 (incluso IE6)


html5HTML 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 de 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:

2_column_layout

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

  1. <!DOCTYPE html>
  2.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  3.    
  4.     <html>
  5.         <head>
  6.             <title><!-- Your Title --></title>
  7.         </head>
  8.        
  9.         <body>
  10.             <header>
  11.                 <!-- ... -->
  12.             </header>
  13.        
  14.             <nav>
  15.                 <!-- ... -->
  16.             </nav>
  17.        
  18.             <div id="main">
  19.                 <!-- ... -->
  20.             </div>
  21.        
  22.             <footer>
  23.                 <!-- ... -->
  24.             </footer>
  25.         </body>
  26.     </html>

Y adem√°s, dentro de elemento “main”, vamos a agregar algunos templates simples de art√≠culos:

  1. <article>
  2.     <hgroup>
  3.         <h2>Title</h2>
  4.         <h3>Subtitle</h3>
  5.     </hgroup>
  6.    
  7.     <p>
  8.         <!-- --->
  9.     </p>
  10. </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. html, div, map, dt, isindex, form {
  2.     display: block;
  3. }

¬Ņ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. /* Hacer que los elementos de HTML 5 tengan display:block
  2. para mantener una coherencia */
  3. header, nav, article, footer, address {
  4.     display: block;
  5. }

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:

htmldemo_safari

Sin embargo, miren lo que sucede en Internet Explorer 6:

htmldemo_ie_broken

¬Ņ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. document.createElement("article");
  2. document.createElement("footer");
  3. document.createElement("header");
  4. document.createElement("hgroup");
  5. 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. :)

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: Net Tuts


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (22)

  1. Eddie Gamba dice:

    Me parece excelente la información brindada, me gustaría saber cómo le doy alineación derecha o izquierda a un texto?

  2. Alejandra dice:

    Hola! Si lo haces con CSS, deber√°s darle como atributo: “text-align:righ;” si lo quieres alineado a la derecha o “text-align:left;” si prefieres alinearlo a la izquierda. Espero que te sirva…

  3. Onasis dice:

    Está interesante la propuesta semántica que ofrece HTML 5. Por el momento, nos conformamos con la versión 4.01 de HTML o el XHTML 1.0 porque no todos los navegadores soportan las nuevas tecnologías. Después vendrá una nueva transición, similar a la que se dio de hacer el layout con etiquetas HTML a realizarlas con CSS 2.1 ó 3.

    @Eddie: Para alinear texto se utiliza la propiedad text-align y puede tener los valores: left, right, center, justify e inherit. Ejemplo: p {text-align: right;}

  4. DriverOp dice:

    El truco para que funcione en IE6 es simple, pero falta un detalle crucial: saber si el navegador es realmente el IE6. si se pone el script así nomás los navegadores que sí reconocen los nuevos tags estarán inyectando más código que el que la página realmente contiene.

    Otra cosa, faltó el tag .

  5. mi opinión dice:

    Eddie Gamba: ¬ŅTe has leido un manual de CSS alguna vez?

  6. AlejandroBriz dice:

    El post chicos es un gran trabajo.
    Pero no veo razón para difundir hacks para IE6, es algo muerto hoy en día y así debe de ser.
    En Europa y Am√©rica del norte el uso es m√≠nimo en los √ļltimos meses esperemos a fin de a√Īo solo dos usen IE6.
    Seria muy interesante usar Javascript para avisar al usuario de que realice una actualización de navegador y no forzar a que el DOM se coma los nuevos tags de Html5.

    Es mi humilde opinión, saludos.

  7. Pablo Gazzola dice:

    Muy buena información.
    Sin duda a m√°s de uno nos vamos a recurrir a estos trucos a la hora de dise√Īar.
    Un saludo!

  8. Jorge Bravo dice:

    Vengo a comentar bastante tarde pero no me pude resistir la verdad jejejjeje, muy buen tip, no lo conocía y esta muy bien sobre todo para ir implementando desde ya algo que veníamos esperando desde hacia muchísimo tiempo. Ojala salgo similar para poder implementar CSS3 sin problemas.

    Con respecto al tema de IE6 no se hasta que punto se deba seguir dando soporte para algo que deber√≠a morir a como de lugar ūüėÄ creo que lo m√°s adecuado es hacer simplemente que el sitio web sea lo m√°s navegable posible pero sin llegar a re adaptar toda su estructura y mostrar alg√ļn tipo de aviso que indique al usuario que convive con un zombie ūüėõ

    Saludos.

  9. Sarai dice:

    Buena la info, en el caso del tag de video que se hace?

  10. Miguel dice:

    Genial!!!! Aunque odio el Explorer no queda mas remedio que acoplarse porque mucha gente no sabe cambiar de navegador, pero yo he desarrollado para Firefox/Chrome y con poner el codigo me lo ha acoplado todo a Explorer, si hubiera tenido que cambiar mas prefiero perder visitas.

  11. Ignacio dice:

    Alejandro, por un lado me encataría finalmente dejar de pensar en los que usan ramitas para hacer fuego (ie6) y obviar los hacks. Pero cuando terminas una web, y tu cliente dice que la ve mal, la solución no es tratarlo de arcaico y dejar las cosas como están, porque su queja viene por los potenciales vistantes en los que el piensa en ese momento.
    Por supuesto que se lo puede educar, pero al menos ac√°, estamos lejos de los porcentajes que manejan EEUU y Europa, y no queda otra opci√≥n m√°s que seguir luchando contra ese horrible monstruo de la e azul hasta que los n√ļmeros por ac√° sean los que deben ser.

  12. An dice:

    Muy bueno voy a probarlo!

  13. jhon fredi ortega dice:

    Lamentablemente debemos hacer que nuestra pagina web se vea bien en el internet esplorer, ya que el usuario no es informatico ni sabe nada navegadores, aunque alla otros como el mozilla y otros mejores que el IE, Pero microsost aprovecha la ignorancia del usuario para de una o otra manera dominar atravez de windows y su ie. Por lo cual si nuetra pagina no se ve bien en el ie Aunque sea una m…a de navegador, pues tendremso pocos visitantes en nuetra web o la del cliente.

  14. Emilio Su√°rez dice:

    Eso se pod√≠a hacer desde los primeros tiempos del html con un simple “”. Est√°n reinvent√°ndose a s√≠ mismos con chorradas en un 80%. Que pongan verdaderos avances, como son :st√©ndares de v√≠deo que hagan competencia real a Flash, conexiones con base de datos sin tener que usar scripts php o asp, etc, etc.

  15. Emilio Su√°rez dice:

    Vaya, lo siento quise decir un simple “table” pero al ponerlo entre los tags del html, no me lo escribe

  16. Referencia HTML5 : jmocana – maquetador web dice:

    […] 6 C√≥mo hacer que todos los navegadores rendericen HTML5 (incluso IE6) […]

  17. Problemas con HTML5 « Hechoencostarica's Blog dice:

    […] es un truco para crear una estructura web que sea reconocida por los navegadores de IE, leer aqu√≠. LikeBe the first to like this […]

  18. Mani dice:

    Si quiren aprender Html 5 y ademas en espa√Īol pueden vistar este sitio:
    http://www.showbizreal.com/html5/index.html

  19. Jes√ļs Maldonado dice:

    Veo que todos est√°n descontentos con MS IE 6. Personalmente uso GNU-Linux, sin embargo no estoy en contra de Microsoft, ni le tiro tierra a su viejo navegador. Creo que fue muy √ļtil en su momento, y se han sabido renovar (IE 9). Simplemente ya no esta en el contexto actual. Finalmente para aquellos que somos desarrolladores debemos de darle al cliente lo que pide, revisar que navegador es y generar una versi√≥n para IE 6 no est√° de m√°s.
    Muchas gracias por la información, empezaré a utilizar HTML5 hoy mismo :)

  20. HTML5 MIGUEL dice:

    Hola muy buen artículo,

    Para saber m√°s sobre HTML5 os recomiendo

    http://www.foroshtml5.com

    saludos!

  21. Jose Ignacio dice:

    Me parece excelente este tema, pero la estructura es header, nav, section (->article), aside, es muy importante explicar bien la estructura para no confundir en un futuro a los desarrolladores que se encuentran en proceso, saludos sigamos trabajando para la web.

  22. Lionela dice:

    Ni logro que mi pagina quede centrada respetando la etiqueta contenedor con los margenes, etc… en IE. Tampoco lee el degrade de fondo y el fondo sombreado del section.

    Espero ayuda Saludos.

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder