> Manuales > Taller de HTML5

HTML5 es una recopilación de tecnologías, la mayoría de las cuales siguen evolucionando.

Aunque mucho de lo que se ha escrito sobre HTML5 no contribuye a clarificar el panorama, HTML5 es más bien una serie de proyectos que un estándar completo e integral, al menos de momento. HTML5 es una recopilación de tecnologías, la mayoría de las cuales siguen evolucionando. Todo esto empezó cuando la comunidad de desarrollo Web tuvo que reconocer las muchas deficiencias de HTML4 y el XHTML asociado, que van desde incoherencias sintácticas de tipo menor a un inadecuado soporte para los contenidos multimedia. HTML5 pretende ser la solución para toda esta serie de defectos. Pero para conseguir avances rápidos, HTML5 está siendo homologado por partes: las piezas más sencillas y que generan menos controversia como son las nuevas definiciones de "input" van antes, y las más complicadas (y sujetas a debate), como WebSockets o el vídeo, van con más retraso.

Si eres un desarrollador Web y quieres experimentar con los nuevos estándares, esta situación te obliga a recurrir a una guía de confianza que te permita saber qué es lo mejor para tus sitios web.

Especificaciones HTML5 estables

Lo primero que tenemos que hacer es distinguir entre tecnologías estables y emergentes. Las tres especificaciones que a día de hoy son más estables y están preparadas para su uso son la Geolocalización, el Canvas y los gráficos SVG. Todas ellas están ya soportadas por los navegadores actuales como Chrome, Internet Explorer 9 y Firefox. Podemos ver estas tecnologías en acción en estos sitios:
  1. EL Comecocos más grande del mundo
  2. Disney Tron Legacy
  3. La música de The Killers
  4. Campamentos Web HTML5
O también puedes leer algunos artículos técnicos que explican cómo implementarlos en tu propio sitio:
  1. HTML5 en la trastienda de Disney Tron Legacy
  2. Cómo crear una página que utiliza información de localización
  3. Cómo utilizar el Canvas para crear juegos
En segundo lugar, volvamos atrás para ver con una perspectiva amplia HTML5, como un todo integrado. Podremos darnos cuenta de que cada navegador entiende la estandarización de forma diferente. Algunos ya anuncian la disponibilidad de IndexedDB, por ejemplo, a pesar de que el borrador del estándar sigue en fase de revisión y probablemente va a cambiar. Otros asumen una posición más conservadora. El riesgo para ellos es quedarse fuera de la categoría de "pioneros en la adopción", pero los desarrolladores pueden confiar en que si un día cambian las especificaciones, no va a suponer un auténtico problema para sus sitios web. Los desarrolladores, por consiguiente, deben elegir el momento de implementar estas tecnologías a partir de su experimentación y las pruebas que realicen con los navegadores que utilizan sus clientes.

Especificaciones HTML5 en fases preliminares y experimentales

Un conjunto de estándares HTML5 emergentes están rompiendo los límites de lo que los desarrolladores pueden conseguir en la Web. Funcionalidades como IndexedDB (almacenamiento de datos en el navegador), WebSockets (conexiones de red de altas prestaciones), FileAPI (operaciones de sistema de archivos) y Media Capture (integración de la interfaz de voz) serán posibles en la Web en un futuro próximo. Ahora podemos empezar a experimentar con ellas desde el sitio web HTML5Labs, una web que se puso en marcha a finales de 2010 para ayudar a los usuarios con los estándares Web en fases preliminares. En los párrafos siguientes iremos viendo lo que podemos conseguir.


IndexedDB: Una base de datos sencilla para la Web

Supón que eres un diseñador de primera línea que trabaja en una aplicación que tiene que gestionar transacciones de cliente –pedidos, pagos, reclamaciones, etc. Para manipular los datos de interés, tendrías que escribir tu propio código AJAX para sincronizar la presentación con las bases de datos maestras del lado del servidor, quizá con la ayuda de cookies y variables de sesión. Probablemente utilizarás, al menos de forma parcial, alguno de los sofisticados marcos de trabajo de Javascript que existen. Probablemente llegarás a la conclusión de que todavía tienes que resolver unos cuantos problemas relacionados con el rollback de transacciones o con la escalabilidad.

Hay una estrategia mejor: IndexedDB. Analistas muy expertos que colaboran en el World Wide Web Consortium han estado dándole vueltas a los problemas de gestión de datos en el lado de cliente más frecuentes en las aplicaciones Web y han elaborado un borrador de interfaz de programación de aplicaciones llamado "IndexedDB" que estructura adecuadamente las soluciones. Con él se puede escribir ya mismo un código HTML que aproveche las funciones createIndex(), transaction() y otras más que se definen en este documento.

Cuando estés preparado para "arrancar", muchos navegadores ya habrán implementado IndexedDB, y se espera que las bibliotecas de compatibilidad del runtime estén disponibles para todos los demás en un plazo corto. En el peor de los casos, tu código tendrá que cargar algunas librerías Javascript adicionales y ejecutar IndexedDB para conseguir los mismos resultados. El tener que utilizar estas librerías de compatibilidad es un precio realmente nimio a pagar por las ventajas que supone el poder programar con el API más inteligente, pensado para realizar consultas de datos asíncronas de alta velocidad en el lado del cliente.

WebSockets: un API lleno de controversia

WebSockets es una parte de HTML5 que ilustra claramente la importancia de HTML5 Labs. Para saber en qué consiste es preciso tener un cierto nivel previo de conocimientos.

La arquitectura básica de la web se compone de un navegador que envía una petición a un servidor solicitando una página que va a presentar en pantalla. "¿Quieres más datos?, pide una página". Esta estrategia de "reclamación" tiene unas limitaciones obvias, sobre todo que no hay forma de que el servidor pueda avisar "¡Eh, navegador, que tengo aquí algo para ti!". No existe el concepto de "push" (envío no solicitado).

La definición de la comunicación entre el servidor Web y el navegador se ha ido ampliando en varias líneas durante los últimos 20 años para adaptarse a canales cada vez más sofisticados. En este sentido, la definición de WebSockets introduce capacidades de comunicación bidireccional full-duplex que hacen posible que el servidor y el navegador puedan enviar y recibir datos en cualquier momento y de manera eficiente.

Algunas consecuencias son previsibles. Los entusiastas de los juegos estaban entre los primeros a la hora de desarrollar con WebSockets puesto que se les abrían nuevas oportunidades para crear interacciones multi-jugador. Casi al momento empezaron a surgir problemas de seguridad. WebSockets "rompe los límites" de lo que es posible con las arquitecturas de red convencionales y los errores son inevitables.

El resultado: algunos navegadores no han soportado WebSockets en ningún momento, algunos han admitido WebSockets de una u otra forma y algunos otros han soportado la interfaz en algún momento pero ya han dejado de soportarla.

En este caso, HTML5 Labs trata a WebSockets como un "prototipo" y aquí los desarrolladores pueden disponer de:

El "entorno ejecutable" puede ser cualquier cosa, desde una pequeña librería de Javascript que, al menos en principio, puede cargar cualquier navegador, hasta un instalador complejo que incluya CSS y ActiveX exclusivamente.

FileAPI reunifica los mundos de la Web y el escritorio

La especificación FileAPI de HTML5 sigue siendo experimental en el momento de escribir este artículo. Podríamos pensar que una especificación de archivo es algo sencillo; los sistemas de escritorio, sin duda, se basan desde hace décadas en carpetas y archivos. El contexto de un navegador Web, no obstante, introduce una serie de problemas de seguridad para establecer una definición adecuada de una interfaz de archivo, especialmente si tenemos cuenta que los objetos del FileAPI tienen que ser consistentes entre los distintos hilos o "threads" de las aplicaciones Web que los utilizan. Entre otras ventajas, un FileAPI bien definido conseguirá que las subidas de archivos desde las aplicaciones Web sean más rápidas, naturales y transparentes para los usuarios.

El FileAPI publicado ya ha cambiado una vez, y aún no está terminado. El prototipo, de todas maneras, está disponible y los desarrolladores pueden experimentar con esta nueva interfaz tan importante.

API de Captura de Medios

La más "verde" de las cuatro interfaces es el API denominada Media Capture. HTML5Labs ni siquiera dispone de una biblioteca de prototipo en este caso. Aunque sí es posible que se publique una que soporte solo las capacidades de audio.

¿Qué se supone que tiene que hacer Media Capture?. Pensemos por un momento en un formulario normal dentro de una aplicación Web. Necesitamos introducir nuestra dirección, elegir la provincia y rellenar otros datos. Hasta aquí, lo que hemos hecho ha sido "teclear" en la parte correspondiente de la pantalla, o en algo equivalente. Con Media Capture y un poco de programación realmente fácil, el usuario final será capaz de decirle al navegador "Almería" o "España" y el navegador decodificará correctamente la selección a partir de la transducción de la señal de voz capturada desde un micrófono.

Desde el experimento al sitio web en producción

Los desarrolladores realmente necesitan un sitio como HTML5 Labs donde poder aprender, experimentar y reconocer si una especificación está suficientemente madura para utilizarla en un sitio Web en producción. Los navegadores juegan un papel importante a la hora de determinar la estabilidad de una especificación, ya que eligen el momento en que adoptan los estándares. Tal y como Jean Paoli, Director General de Estrategia de Interoperabilidad de Microsoft dice, "Los desarrolladores deben estar tranquilos y confiar en que los navegadores se basan en un HTML5 estable" HTML5 Labs es sin duda un buen lugar para hacerse una opinión propia y saber qué suponen estas especificaciones para nuestros sitios web.

Cameron Laird

Manual