Traducción y adaptación de: HTML 5 for Beginners. Use it now, its easy!
Hay un montón de artículos sobre HTML5, especialmente desde que llegó Google Wave (porque es la primera app reconocida en ese lenguaje, pero toda la información que necesitas para poder empezar a usarlo
ahora mismo es algo más complicado de encontrar. En este artículo vamos a simplificar un poco las cosas.
Estoy seguro de que ya lo sabeis, Internet Explorer no soporta HTML5. Sorpresa, sorpresa!. Así que lo primero que aprenderemos a hacer será:
Hackear IE usando javascript Hay un buen sitio llamado
HTML5Doctor que nos da la solución perfecta. Se trata de un script en javascript que fuerza a IE a 'ver' los siguientes tags de HTML5:
<article>, <aside>, <audio>, <bb>, <canvas>, <datagrid>, <datalist>,
<details>, <dialog>, <eventsource>, <figure>, <footer>, <header>, <hgroup>,
<mark>, <menu>, <meter>, <nav>, <output>, progress>, <section>, <time>,
and last but not least <video>.
Se puede descargar desde
aquí Obviamente usar javascript no es la mejor forma de fijar el problema, ya que si lo desactivamos la página dejará de funcionar. Lo único que podemos hacer es asegurarnos que con JS desactivado la página funcionará correctamente.
HTML5 también tiene problemas con Firefox 2 y Camino 1 ya que estos dos navegadores usan Gecko para renderizar las páginas. Este problema es más difícil de parchear, pero afortunadamente esos dos navegadores tienen solo una pequeña parte del mercado. Si aún así no quieres ignorar esas versiones, HTML5doctor explica como parchearlos.
Ahora los navegadores más reconocidos del mercado reconocerán nuestros códigos (IE, Safari, Chrome, Firefox, Opera)
Empezando a usar HTML5 Uno de los principales beneficios de HTML5 es que podemos deshacernos en gran parte del código duplicado. No hay que seguir definiendo todo por una id o una clase porque los elementos por defecto ya están construidos.
Entre otros elementos, para tus cabeceras puedes usar <header>, para la navegación <nav>, para el pié, adivina..., <foot>. También, con el tag <section> puedes dividir tu contenido usando <article>. Con esos tags podemos lograr que los navegadores capten la relevancia del contenido de una forma más simple, eso nos ayudará con el SEO y, por supuesto, significa menos tiempo codeando. De todas formas podemos seguir usando <div id="header"> pero las nuevas etiquetas tienen un mejor y más simple uso
Hay otros dos grandes avances en HTML5 con el que se hará la vida más fácil a los desarrolladores. La primera es:
El tag <video> Para usar el tag <video> tenemos que hacerlo así:
<video src="/video.ogv" >
<p> Su navegador no puede ver este video. <a href="/video.ogv">Descárguelo</a>
</video>
La línea entre <video> y </video> es para aquellos navegadores que no usen HTML5.
Un problema con este tag es que Apple decidió no dar soporte al formato abierto OGG en Safari. Así que para dar soporte a todos los navegadores tendremos que poner 2 sources
<video width=320 height=240 controls>
<source src="/video.ogv" type="video/ogg">
<source src="/video.mp4"; type="video/mp4";>
<p> Su navegador no puede ver este video. <a href="/video.ogv">Descárguelo</a>
</video>
El segundo avance es:
Validación de formularios Desafortunadamente la mayoría de navegadores aún no dan soporte. De echo, estoy bastante seguro que Opera es el único que da soporte de momento. De todas formas he decidido incluirlo porque creo que será una característica brillante...
Con HTML5 seremos capaces de validar la información de un input simplemente indicandole que tipo de dato esperamos.
<input type="email" required>
<input type="date">
<input type="url">
También podemos usar el autofocus, de esta forma:
<input type="email" required autofocus>
Que simple es!
Mostrar Mensajes
