Introducción a HTML5
Mistela&Tweets

Alberto García Garrigós
@albertogargar // algargar.com
13 de diciembre de 2012

¿Qué es HTML5?

Si crees que HTML sigue representando solamente las siglas del Hypertext Markup Language, es que no has entendido nada.

HTML5 engloba: HTML + CSS + JS.

¿Qué abarca HTML5? (por ahora)

¿Por qué es importante?

HTML5 es el presente de la web y si no estás asimilando lo que está pasando, ya eres parte de la vieja generación de desarrolladores.
Esto tendría que tenerte preocupado.

@freddier

Nuevos tags de estructura

¿Para qué utilizar div id="header", existiendo una etiqueta con ese mismo fin?

Otros nuevos elementos importantes en HTML5

Almacenamiento en HTML5

Web Storage
Las cookies están limitadas, 4KB máximo por cookie y 100KB por dominio.
Web Storage soluciona este problema. Son variables que puedes guardar en el disco del usuario, hasta 5MB y no sólo texto.

Web SQL
Base de datos tipo SQLite controlable con sólo Javascript. Internet Explorer 9 declaró que no la implementará, este estándar desaparecerá en breve.

IndexedDB
Al igual que Web Storage, es una sencilla asignación de valores y claves, admite índices similares a los de las bases de datos relacionales, por lo que la búsqueda de un campo específico es rápida.

Ejemplo de <video>:

	    <video width="270" controls="controls">
	      <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
	      <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
	      <source src="http://www.w3schools.com/html/mov_bbb.webm" type="video/webm">
	      Your browser does not support the video tag.
	    </video>
	  

Ejemplo de <audio>:

	    <audio controls>
	      <source src="http://www.w3schools.com/html/horse.ogg" type="audio/ogg">
	      <source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
	    Your browser does not support the audio element.
	    </audio>
	  

Todo esto es muy bonito pero... ¿Qué pasa con los navegadores antiguos?

Se podría decir que el principal "archienemigo" de la implantación de HTML5 es Internet Explorer en sus versiones inferiores a IE 9. Ignorará todas las etiquetas HTML5 e impedirá dar estilo a su contenido.

Esto se puede evitar, agregando las siguientes líneas en el < head > de nuestra web:

	    <!--[if lt IE 9]>
	    <script src=”http://HTML5shim.googlecode.com/svn/trunk/HTML5.js”>
	    </script>
	    <![endif]-->
	  

Si esta solución no nos sirve, nos queda "Modernizr". Es una librería javascript que detecta las funcionalidades que soporta tu navegador. Y en caso de no soportar algo, te tocaría escribir la alternativa ;-)

Podemos descargarlo en: modernizr.com

Arrancar un proyecto con HTML5 en 15 segundos...