¡Familiarízate con HTML5!

Chris Mills. 14 de enero de 2011. Publicado en: HTML5, web abierta

Introducción

La mayor parte del currículo de estándares web se basa en la última versión estable de HTML HTML 4.01. La especificación de HTML 4.01 se completó en 1999, hace más de 10 años, en el momento de escribir esto. Pero a menos que hayas estado escondido bajo una roca durante el último año, poco más o menos, serás muy consciente de que hay una nueva versión de HTML en la producción ¡HTML5!

Así... ¿por qué te hemos estado enseñando HTML 4.01, a pesar de todo? En este artículo daremos respuesta a esta pregunta, y a muchas más. Te daremos la base esencial necesaria para saber por qué se creó HTML5 y dónde y cómo está ahora mismo. Te aconsejaremos sobre cómo encajarlo en tu aprendizaje actual, aunque seas un diseñador o desarrollador web novel, y veremos algunas de las principales características de HTML5, para que puedas ver que suma al ya de por sí potente lenguaje HTML.

¿Por qué HTML5?

Cuando HTML 4 estaba a punto de cerrarse, el W3C decidió (en un taller organizado en 1998) que, en cuanto a lenguajes de marcado, el futuro de la Web era XML y XHTML, no HTML (comparación de XHTML y HTML). Así que el W3C dibujó una línea bajo HTML 4.01 y se concentró en la especificación XHTML 1.0, acabada a principios de 2000. XHTML 1.0 es exactamente igual que HTML 4.01, pero usando las reglas de sintaxis de marcado de XML. Pronto le siguió XHTML 2.0, que añadía un montón de nuevas y poderosas características y un 'mime-type' exclusivamente XML, y estaba destinado a ser el próximo gran éxito en la web.

El problema de XHTML 2.0 es que no era compatible con el marcado ya existente en la web los elementos funcionaban de manera diferente, el mimetype de XHTML (application / xhtml + xml) no funciona de ninguna forma en IE, que todavía tenía la mayor cuota de mercado de navegadores en el momento de escribir esto, las herramientas de desarrollo disponibles no estaban preparadas para trabajar con XML, y no reflejaba realmente lo que los desarrolladores web estaban haciendo realmente ahí en la web en estado salvaje.

En 2004, un grupo de desarrolladores e implementadores de opiniones similares (incluyendo representantes de Opera, Mozilla y, un poco más tarde, Apple) se reunieron y formaron un grupo separado de especificaciones llamado WHATWG, con el objetivo de escribir una mejor especificación de marcado HTML, capaz de soportar la creación de la nueva generación de aplicaciones web, sin y esto es fundamental romper la compatibilidad con el HTML existente.

El resultado fue la especificación Web Applications 1.0, que documentaba los comportamientos y características existentes e interoperables de los navegadores, así como nuevas características para la pila web, como APIs y nuevas reglas de análisis del DOM. Después de muchas discusiones entre los miembros del W3C, el 7 de marzo de 2007 se reanudó el trabajo en HTML con un nuevo Grupo de Trabajo de HTML en un proceso de participación abierta. En pocos días cientos de participantes se apuntaron a seguir trabajando en la siguiente versión de HTML. Una de las primeras decisiones del Grupo de Trabajo de HTML fue adoptar la especificación Web Applications 1.0 y llamarla HTML5.

HTML5 ya es muy buena cosa para los desarrolladores web y diseñadores, ya que:

Es muy compatible con lo que ya existe no hace falta aprender idiomas completamente nuevos para utilizar HTML5. Las nuevas características de marcado funcionan igual que las antiguas (aunque la semántica de algunos elementos ha cambiado cubriremos estas diferencias en un próximo artículo), y las nuevas APIs se basan en el mismo JavaScript y DOM con que programan los desarrolladores desde hace años.
Añade nuevas y potentes características de HTML que antes sólo estaban disponibles en la web usando tecnologías como el plugin de Flash, o con JavaScript y hacks complejos. La validación de formularios y el vídeo son los principales ejemplos.
Es más adecuado para escribir aplicaciones dinámicas que las versiones anteriores de HTML (HTML fue diseñado originalmente para la creación de documentos estáticos).
Tiene un algoritmo de interpretación claramente definido, de forma que todos los navegadores que implementen HTML5 crearán un mismo DOM a partir de un mismo marcado, independientemente de la validez de este. Esto representa una enorme victoria para la interoperabilidad.

¿Qué significa HTML5 para mí?

Para empezar, respondamos a esa pregunta que te da vueltas por la cabeza desde que has empezado a leer este artículo: ¿por qué te hemos enseñado la mayor parte del currículo de estándares web con HTML 4.01, si ya HTML5 está en el horizonte? En primer lugar, cuando se publicó por primera vez el CEW en 2008, HTML5 estaba mucho más en flujo que ahora, y no queríamos enseñar algo que probablemente cambiaría posteriormente.

En segundo lugar, y más importante, HTML5 es retrocompatible: en términos prácticos esto significa que todo lo que hay en HTML 4.01 está también en HTML5. Así que al aprender HTML 4.01 ya estás aprendiendo una gran parte de HTML5. Este artículo, y los otros de esta sección, pretende completar las lagunas de conocimiento mediante la enseñanza de las capas extra que HTML5 añade sobre HTML 4.01 como, por ejemplo, los elementos semánticos añadidos y las nuevas APIs que permiten controlar la reproducción de vídeo y dibujar sobre un lienzo. Daremos un montón de referencias a más información sobre estas características al final del artículo.

Algunas partes de HTML5 ya están implementadas de manera lo suficientemente estable en los navegadores como para usarse de forma segura incluso en un sitio en producción (como siempre, hay que tomar decisiones teniendo en cuenta el público objetivo del sitio y sus características). Además, si una característica no es compatible con algunos navegadores, existen soluciones alternativas los artículos las mostrarán, en el momento adecuado.

Para darle una respuesta breve y concluyente, HTML5 es el futuro de la Web, y una gran parte de tu futuro como diseñador o desarrollador web. Me gustaría recomendarte que empieces a aprender HTML5 en cuanto estés preparado muchas de las nuevas características facilitarán mucho tu trabajo actual, y protegerá tus conocimientos para el futuro. Si eres estudiante en la universidad y el profesor aún no sabe nada de HTML5, o no está dispuesto a cubrirlo en su curso, muéstrales este artículo.

Características de HTML5

HTML5 contiene muchas nuevas características para hacer HTML mucho más potente y adecuadas para la creación de aplicaciones web. En la siguiente lista hemos resumido las principales que realmente deberías conocer.

Algunas de las características enumeradas a continuación no son realmente parte de la especificación HTML5 en sí, sino que se definen en especificaciones estrechamente relacionadas, y por tanto siguen siendo piezas válidas del nuevo movimiento para conseguir aplicaciones web modernas, y te es útil conocerlas.

Nuevos elementos semánticos: Como ya sabes, la semántica es muy importante en HTML: siempre debemos utilizar el elemento apropiado para cada función. En HTML 4.01 tenemos un problema: sí, hay muchos elementos para definir determinados recursos, como tablas, listas o encabezados, pero también hay muchas características comunes a muchas páginas web que que carecen de elementos para definirlas. Piensa en las cabeceras, pies de página, menús de navegación, etc. Hasta ahora las hemos definido usando <div id="xxx"> </ div>, que nosotros somos capaces de entender, pero las máquinas no, sin mencionar que diferentes desarrolladores web usan identificadores y clases diferentes. Afortunadamente, HTML5 viene con nuevos elementos semánticos como <nav>, <header>, <footer> y <article>. Puedes aprender acerca de estos en el artículo Los nuevos elementos estructurales de HTML5.
Nuevas características de formularios: HTML 4.01 ya permite crear formularios usables y accesibles, pero algunas características comunes son menos cómodas de lo que deberían ser, y requieren el uso de hacks para ponerlas en práctica. HTML5 proporciona una forma estandarizada y fácil de implementar características tales como selectores de fecha, deslizadores y validación en el cliente. Los formularios HTML5 se tratan en detalle en el artículo Las Nuevas Características de Formularios de HTML5.
Audio y vídeo nativos: Durante años, el audio y vídeo en la Web se ha hecho con Flash, en general. De hecho, la razón por la que Flash se hizo tan popular en los albores del siglo XXI es que los estándares abiertos no proporcionaban un mecanismo compatible entre navegadores para su implementación: los diferentes navegadores implementaban maneras diferentes de hacerlo, en competencia unos con otros (por ejemplo, <object> y <embed>), complicando mucho todo el proceso. Flash daba una forma fácil y de gran calidad de publicar vídeo multinavegador.

HTML5 incluye elementos <audio> y <video> para implementar reproductores de audio y vídeo nativos sin usar más que estándares abiertos, y también incluye una API que permite implementar fácilmente controles de reproducción personalizados. Hay muchos artículos en dev.opera.com sobre el audio y vídeo de HTML5, pero el mejor lugar para comenzar es el artículo inaugural de Bruce Lawson y Pat Lauke Introducción al Vídeo HTML5. También vale la pena visitar More accessible HTML5 video player.
API de dibujo en Canvas: El elemento <canvas> (lienzo) y la API asociada permiten definir un área de la página sobre la que dibujar y usar comandos JavaScript para dibujar líneas, formas y texto, importar y manipular gráficos y vídeo, exportar en diferentes formatos de imagen y mucho más. Para más información sobre el lienzo de HTML5, comienza por El lienzo de HTML5: Fundamentos, de Mihai Sucan.
Web Sockets: Esta API (definida en la especificación de web sockets, separada de la especificación HTML5) permite establecer una conexión continua entre un servidor y un cliente en un puerto específico y enviar datos en ambas direcciones hasta que el puerto se cierre. Esto mejora mucho la eficiencia de las aplicaciones web, ya que pueden intercambiarse datos de forma continua y precisa entre el cliente y el servidor sin recargas de página continuas y sin tener que consultar constantemente el servidor para ver si hay actualizaciones disponibles. Introducing Web Sockets es un buen punto de inicio.
Aplicaciones web offline: HTML5 proporciona una serie de características que permiten a las aplicaciones web ejecutarse sin conexión. Los cachés de aplicación permiten guardar una copia de todos los elementos y archivos necesarios para ejecutar aplicaciones web localmente, y las bases de datos Web SQL permiten guardar una copia local de los datos de una aplicación web. En conjunto, permiten seguir utilizando una aplicación cuando uno se queda sin conexión y luego sincronizar los cambios con la versión principal en el servidor cuando la red vuelva a estar disponible.
Almacenamiento Web: Las cookies nos permiten un cierto grado de almacenamiento de datos locales, pero su uso es bastante limitado. El Almacenamiento Web de HTML5 nos permite almacenar muchos más datos, y hacer mucho más con ellos. Puedes leer Web Storage: easier, more powerful client-side data storage, de Shwetank Dixit, para obtener más información.
Web workers: Un problema común para las aplicaciones web es que su rendimiento se resiente cuando se requiere una gran cantidad de procesamiento de datos, puesto que todo sucede en un único proceso o subproceso (sólo puede haber una única carga de procesado). Los 'trabajadores web' mitigan este problema porque permiten crear procesos de fondo para hacerse cargo de parte del cálculo, permitiendo que el proceso principal siga adelante con otras cosas. Para leer más sobre los 'trabajadores web', puedes leer Web Workers rise up! de Daniel Davis.
Geolocalización: La especificación de geolocalización (de nuevo, fuera de la especificación de HTML5) define una API que permite a una aplicación web acceder fácilmente a los datos de localización que se hayan puesto a disposición previamente, por ejemplo, a través de las capacidades GPS de un dispositivo. Esto permite añadir todo tipo de útiles funciones de localización a las aplicaciones como, por ejemplo, resaltar el contenido más relevante para la ubicación actual. Para ver una introducción básica, consulta How to use the W3C Geolocation API

Nota: CSS3 DEFINITIVAMENTE NO es parte de HTML5 y nunca lo será. No dejes que tu departamento de marketing te diga lo contrario.

Resumen

Así acaba nuestra introducción a HTML5. Espero que la hayas encontrado útil y que continuarás leyendo el resto de artículos sobre HTML5 que hemos referenciado.