Actuálmente me encuentro maquetando una web en HTML5 y una de las funciones que debemos incorporar a la misma es la carga de módulos de HTML5 vía Ajax con jQuery.
Una vez incorporada la he probado como siempre en primer lugar en Firefox y todo perfecto. Como siempre después de firefox viene Internet Exploer y es en este punto donde empiezan los malos rollos 
. Al pinchar sobre uno de los enlaces del menú de navegación y realizarse la carga, los nuevos contenidos cargados han aparecido sin los estilos aplicados. El problema es que la librera Modernizr que utilizo para generar las nuevas etiquetas HTML5 solo se ejecuta la primera vez que cargamos la página por lo que todo el código que carguemos a posteriori vía Ajax no será reconocido por el navegador y por tanto saldrá sin los estilos asignados en la CSS.
Buscando un poco por Mr. Google he encontrado la librería innerShiv de tan solo 1kb aproximadamente que permite reconocer las nuevas etiquetas HTML5 añadidas al DOM ya sea vía JavaScript o Jquery.
Lo único que hay que hacer para que funcione es insertar la función innerShiv() dentro de la función que vayamos a utilizar para añadir el código ya sea de javascript o Jquery, con la única diferencia de que si utilizamos jquery tendremos que pasar un segundo parámetro a la función innerShiv, más concretamente una variable booleana false.
Os pongo dos ejemplos de como se utilizaría la función con javaScript y con jQuery
Ejemplo javaScript
s.appendChild(innerShiv("<section>Happy section loves CSS. (:</section>"));
Ejemplo jquery
$(this).html(innerShiv(html, false))
Podéis encontrar toda la información sobre la librería creada por joe bartlett en http://jdbartlett.com/innershiv/
Fxcanvas es una implementación del elemento canvas de HTML5 para Internet Explorer. El proyecto esta desarrollado por Google y la librería tiene los siguientes requisitos:
Requisitos
- Flash Player 9+ en Internet Explorer (Algunas versiones a partir de la 10.1 puede que no funcionen correctamente)
- IE 5.5 +. (IE9 no lo soporta por ahora)
Fxcanvas nos permite trabajar solo con gráficos en dos dimensiones.
Uso
Descargar el comprimido en el directorio publico del servidor y pegar las siguientes llamadas js en la sección head de nuestro documento.
<head>
<script type="text/javascript" src="/public/path/jooscript.js"></script>
<script type="text/javascript" src="/public/path/fxcanvas.js"></script>
<!--[if IE]><script type="text/javascript" src="/public/path/flash_backend.js"></script><![endif]-->
<comment><script type="text/javascript" src="/public/path/canvas_backend.js"></script></comment>
</head>
Manuales de canvas
Si todavía no habéis trasteado demasiado con canvas podéis echar un vistazo a estos tutoriales
Ejemplo
A continuación realizaré un ejemplo muy básico en el que usaremos tanto imagenes como textos. Pongamos por ejemplo que nos piden realizar una gráfica con los resultados de las votaciones del balón de oro.
ver ejemplo
descargar ejemplo (86 Kb)
Leer el resto de esta entrada »
Web storage es un API de HTML5 que nos permite guardar datos estructurados en el cliente. Sustituye a las famosas cookies que son enviadas en las cabeceras HTTP. Los datos almacenados en disco solo podrán ser accedidos desde el cliente y no desde el servidor, se busca con esto aumentar la seguridad de la información enviada, además el tamaño de los datos almacenados en disco podrá ser mayor, aproximadamente de 5 Mb.
Web Storage define dos tipos de almacenamiento: sessionStorage y localStorage
sessionStorage
La información manejada mediante este mecanismo podrá ser accedida solo durante la sesión y en caso de tener varias ventanas abiertas la información mostrada en cada una de ellas podrá ser distinta. Los datos se perderán una vez se cierre el navegador.
localStorage
Permite guardar datos que podrán ser accedido una vez cerremos el navegador. La información será la misma en todas las ventanas abiertas dentro de una misma sesión.
Tanto sessionStorage como localStorage pueden hacer uso de los siguientes métodos y atributos:
Respecto al soporte que ofrecen los navegadores web para esta API lo podéis ver en la siguiente tabla: Fuente: caniuse.com
Leer el resto de esta entrada »
Si estáis pensando en empezar a maquetar vuestras páginas con HTML5 quizás os pueda interesar esta guía de referencia.
- 1. Breve presentación de HTML5. Se nos muestra resumidamente mediante diapositivas todas las novedades que nos ofrece HTML5: Presentación HTML5
- 2. Podéis encontrar toda la documentación de la W3C sobre HTML5 en http://dev.w3.org/html5/spec/Overview.html
- 3. Os paso dos manuales bastante completos sobre HTML5: Dive Into HTML5html5doctor.com
- 4. Hoja de estilos de partida “reset.css” para HTML5: html5reset.org/
- 5. El gran problema con el que nos vamos a encontrar a la hora de implementar nuestras webs con HTML5 consiste en que no todos los navegadores web dan soporte HTML5. Os paso a continuación una tabla con el soporte HTML5, CSS3, etc de los principales navegadores. Tabla soporte HTML5, CSS3 de los navegadores
Si nos fijamos en la tabla “New semantic elements” veremos que tan solo Google Chrome nos ofrece un soporte completo mientras que internet Explorer ni en su versión 8.0 es capaz de reconocer etiquetas de HTML5. Por desgracia un gran porcentaje de los usuarios que entran a nuestras webs utilizan Internet Explorer por lo que se hace necesario buscar una solución a esta falta de soporte en algunos navegadores.
- 6. Cómo hacer que todos los navegadores rendericen HTML5 (incluso IE6)
- 7. Otra forma de renderizar nuestro código HTML5 es mediante la librería de javascript “Modernizr”
Modernizr no solo nos permite usar elementos de HTML5 sino que además se encarga de crear clases en la etiqueta con las propiedades que soporta y las que no nuestro navegador, lo cual nos da mayor liberatad a la hora de dar estilo a nuestra página. Por ejemplo accediendo a la página de Modernizr desde mi navegador Firefox 3.6.13, se me genera en la etiqueta la siguiente clase:
Código HTML5
<html class="js flexbox canvas canvastext no-webgl no-touch geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity no-cssanimations csscolumns cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions fontface video audio localstorage sessionstorage webworkers applicationcache svg no-inlinesvg no-smil svgclippaths"><7span>
- 8. HTML5Rocks: Página para formación de HTML5 ofrecida por Google
- 9. Validador de HTML5
- 10. HTML5 for Web Designers