En el mes de enero del 2011, la W3C (por sus siglas en inglés, World Wide Web Consortium) comenzó una fuerte campaña de publicidad para HTML5, desde la publicación del logotipo oficial hasta un gran movimiento viral en redes sociales, blogs y webs. Ésto se debe a que HTML5 es uno de los últimos esfuerzos de la W3C para consolidar una Web nativa y semántica, libre de plugins de terceros (como el de Flash), con nuevas etiquetas y características, pero sin tirar a la basura las etiquetas de sus antecesores HTML4 y XHTML. Además, por su características de código libre, renderizable desde el navegador, flexibilidad y ligereza, hace que HTML5 sea una gran opción para los dispositivos móviles (iPad, iPhone, Blackberry y más).
Los antecesores a HTML5 tuvieron ciertos problemas con el DOM (por sus siglas en inglés, Document Object Model), una API que proporciona un conjunto estándar de objetos para representar documentos HTML y XML en forma de árbol, el cual es utilizado para la manipulación de éstos. El DOM se volvería una verdadera pesadilla a la hora de crear páginas Web dinámicas, ya que distintos navegadores lo leen con diferencias, por lo que es necesario el desarrollo de hacks en JavaScript para su manipulación eficiente.
HTML5 incluye las siguientes características:
- DOCTYPE, elemento raíz HTML y meta: El Doctype se simplificó a sólo <!DOCTYPE html> , así como el elemento raíz <html> a <html lang=»es»> , lang es el lenguaje del sitio Web, «es» español, «en» inglés y más. La etiqueta meta a <meta charset=»utf-8″ />
- <header>, <section> , <footer> , <nav>, <article> y más: son etiquetas las cuales favorecen la semántica y estructura de la página Web, ya que especifican con su nombre la sección del sitio. Actualmente muchos utilizamos algo por el estilo: <div id=»header»> o <div id=»footer»>.
- Canvas: se utiliza para de crear gráficos en 2D y 3D.
- Audio y Video: utilizado para reemplazar el plugin de flash, y volver nativo el control del audio y video con <video> y <audio>
- Aplicaciones offline: esta funcionalidad permite el desarrollo de sitios o aplicaciones Web trabajen de modo offline utilizando LocalStorage y Application Cache.
- Geolocalización: permite obtener la ubicación del usuario via dirección IP, conexión de red inalámbrica, etcétera.
- Base de datos locales: Web SQL Database, desde el navegador se podrá acceder a bases de datos locales, algo por el estilo de las Cookies, pero pensadas para un mayor almacenaje de datos.
- Web workers: proporcionan una forma estándar para ejecutar código JavaScript en segundo plano. Con los web workers, se pueden generar varios «hilos» los cuales se ejecutan al mismo tiempo.
- Websockets: es una técnica de comunicación bidireccional a través de un TCP (Protocolo de Control de Transmisión), un tipo de tecnología PUSH.
- Nuevos tipos de inputs: para cada input del formulario se agregó un tipo dependiendo su uso específico: search, number, ranger, color, tel, url, email, date, datetime, datetime-local, week, month, time .
- Drag & drop: «arrastrar y soltar», es una funcionalidad nativa de HTML5, muy utilizada con jQuery UI para brindar mayor experiencia al usuario.
- Microdata: funcionan para proporcionar semántica adicional a los sitios Web de forma estandarizada con el fin de que las maquinas comprendan el significado del documento. No se confundan con los previamente establecidos microformats y RDFa.
- Otros más: ContentEditable, postMessage (cross & same domain).
Es importante señalar que no todos los navegadores lo soportan, por lo que su uso e implementación debe comenzar con detectar las etiquetas soportadas por el navegador. Es aquí, donde el DOM juega un papel fundamental, entendámoslo así: después de que el navegador lee la página Web, construye la colección de elementos individuales HTML, si las etiquetas que agregamos en nuestro sitio no se incluyen como nodos del árbol del DOM, éstas no se mostrarán.
Para no tener problemas de este tipo, podemos usar la librería de JavaScript llamada Modernizr, la cual detecta de manera sencilla si el navegador soporta características de HTML5 y CSS3.
Un ejemplo de su uso, al agregarlo dentro de las etiquetas <head> de nuestro sitio Web, éste se activa y genera variables booleanas para todas las etiquetas: true o false. Si queremos conocer si soporta canvas, se agrega:
if (Modernizr.canvas) {
// si lo soporta
} else {
// no lo soporta
}
Cada uno de las nuevas etiquetas del HTML5 y CSS3 se pueden detectar con Modernizr, tan solo cambiar Modernizr.canvas por Modernizr.geolocation, y así sucesivamente. Si el elemento no existe en el DOM, se puede crear con JavaScript, por ejemplo la nuevas etiquetas <header>, <footer> y <section>:
document.createElement("header");
document.createElement("footer");
document.createElement("section");
Navegadores Web
A continuación se en lista las distintas características de HTML5 que soporta cada uno de los navegadores Web modernos:
 |
 |
 |
 |
 |
|---|---|---|---|---|
| Chrome 9+ | Firefox 3.6+ | Internet Explorer 8 | Safari 5+ | Opera 11+ |
|
|
|
|
|
Para conocer el soporte de HTML5 en cualquier otro navegador, entra a Modernizr Test Suite.
Ejemplos
Es imposible en una sola entrada poder incluir todos los ejemplos para cada una de las nuevas características de HTML5, pero sí los dos básicos: canvas y video. Nuestra base de todo el documento, para que sea valido como HTML5 debe lucir de la siguiente manera:
<!DOCTYPE html> <html lang="es"> <meta charset="utf-8" /> <head> <title>Nombre de la página</title> <script type="text/javascript" src="modernizr-1.7.min.js"></script> <script> //Aquí se utilizará para las validaciones de Modernizr </script> <style type="text/css"> /*CSS*/ </style> </head> <body> <h1>Título</h1> <p>Página de prueba</p> </body> </html>
Canvas
Es importante que el código de JavaScript se utilicé antes de cerrar la etiqueta <body>, ya que si no se usa de esta manera, no funcionará este ejemplo.
JavaScript:
var canvas = document.getElementById('prueba');
var context = canvas.getContext('2d');
context.fillStyle = "rgb(500,0,0)" ;
context.fillRect (20, 20, 150, 150);
context.beginPath();
context.fillStyle = "#fff" ;
context.arc(85, 85, 50, 0, 2 * Math.PI, false);
context.fill();
HTML:
<canvas id="prueba" width="150" height="150"></canvas>
Explicación:
- Se crea la variable canvas la cual se inicializa con el valor del elemento HTML de id prueba.
- get.Context: contexto o método de dibujo.
- fillStyle: el color del dibujo, puede ser en RGB o de forma hexadecimal #.
- fillRect: de dibuja un rectangulo o cuadrado, las coordenadas son (x,y, width, height).
- beginPath(): reinicia el método context a cero, para empezar un nuevo dibujo.
- arc(): arc(x, y, radio, ÁngulodeInicio, ÁnguloFinal, [sentidoContrarioManezillasdelReloj]) crea un circulo, donde el ángulo inicial como final son valores en radianes.
- Fill(): relleno, en este ejemplo, rellena el circulo creado con el arc(), notarán que no lo utilice para fillRect, ya que el mismo método lo hace.
Resultado:
Ver ejemplo de Canvas funcionando.
Video
Para audio y video las etiquetas son sencillas: <audio> y <video>, a cada uno se le puede incorporar sus controles nativos, pero ojo, los formatos son limitados, se aceptan: mp4, ogg, h264.
HTML
<video controls="controls">
<source src="leerPoderFinal.mp4" type="video/mp4"/>
</video>
Explicación:
- <video>: la etiqueta de video se incluyen los controles por default con el atributo controls
- source: se incluye el archivo junto con su tipo, mp4
Resultado:
Ver ejemplo de Video funcionando. Este ejemplo sólo se puede visualizar en Google Chrome.
Lecturas recomendadas
