A pesar de que la especificación de HTML 5.0 esta programada para ser un estándar en el 2014, ya es una tecnología que esta teniendo una amplia adopción y un uso creativo a través de Internet. Nuevas formas de visualizar, consumir e interactuar con información y medios está siendo posible con la evolución natural del lenguaje HTML. HTML5 es una herramienta versátil que podrá ser usada realizar tareas y presentar información a través de Internet, consumidos de distintas formas en computadoras de escritorio y dispositivos móviles por igual.
Este artículo proporciona una visión general de HTML5, los que es y lo que no, lo que debe importarnos y como beneficia y cambia la manera en que desarrollamos aplicaciones web, y enlista una serie de recursos que nos servirán para conocer HTML5 más a fondo.
¿Qué es HTML5?
Como muchas personas, deberás estar preguntándote que es HTML5 exactamente.
En un estricto sentido, HTML es un leguaje de marcado basado en texto usado para dar formato a la información distribuida a través de Internet. En un nivel más alto, HTML es un lenguaje que se usa para estructurar u presentar texto e imágenes con una interfaz. HTML5 es un aumento a la especificación actual, HTML4.01, que agrega nuevas características que permitirán a diseñadores y desarrolladores crear su propio contenido.
Algunos de los cambios más notables en HTML5 es la adición de etiquetas para soportar elementos multimedia y gráficos dinámicos. Esto incluye la etiqueta <audio> para reproducir sonidos, <video> para videos y <canvas > para gráficos dinámicos, todo esto dentro del web browser y sin depender de software externo. Los nuevos elementos multimedia habilitan a los browsers modernos para proveer experiencias enriquecidas y gráficos dinámicos a partir del código HTML.
El soporte para usar video, manipular imágenes, y visualización de datos permitirá a los diseñadores y desarrolladores crear experiencias ricas y atractivas que funcionen en múltiples plataformas (El impulsor de HTML5).
Además de multimedia, HTML5 introduce la habilidad de ligar o embeber gráficos vectoriales SVG y MathML directamente en contenido HTML. La inclusión de gráficos vectoriales en el lenguaje HTML permite a los diseñadores y desarrolladores incluir complejas imágenes basadas en vectores sin la necesidad de incluir imágenes directamente ni depender de plataformas de terceros. Esto no solo permite todo el contenido en un solo archivo HTML también da la capacidad de interactuar con contenido SVG a través de JavaScript. Interactuar con contenido de vectores puede ser tan simple como cambiar los colores de una forma o tan complejos como animarlas, agregar interacción a los gráficos vectoriales o incluso crearlos dinámicamente en tiempo de ejecución.
HTML5 también introduce nuevos tipos de elementos de formularios. Estos nuevos tipos permiten especificar simplemente tipos de entradas y confiarle al browser y a métodos nativos el manejo de la entrada, validación y formateo de la información que es capturada. Los nuevos tipos incluyen número de teléfono, email, URL, fecha, hora, color y varios formatos numéricos y sus diferentes permutaciones. Cada browser, dispositivo y sistema operativo tiene su propio paradigma para la interacción del usuario y entrada de datos. Los nuevos elementos de formularios de HTML5 permiten son mas robustos para capturar datos para documentos HTML, lo que mantendrá dentro del paradigma nativo, sin la necesidad de estar manteniendo librerías JavaScript.
Otra capacidad que HTML5 trae a la mesa es la introducción de etiquetas de marcado semántico. Las etiquetas semánticas te permiten estructurar el contenido HTML de manera que la estructura del documento proporciona la semántica y el significado al contenido. Esto incluye las etiquetas <article>, <section>, <header>, <footer>, <aside>, <nav> y <figure> que se usan para crear documentos HTML auto descriptivo. Estas te permiten denotar que partes del documento HTML son para la navegación, cuales para el layout, y que partes del documentos tienen contenido significativo o relacionado. Las nuevas etiquetas semánticas permiten un mayor nivel de organización en el documento HTML y puede ser usado para crear contenido que sea más fácil de leer por buscadores, agregadores u otras aplicaciones que consuman contenido, por lo tanto facilitan en mayor medida la comunicación entre dispositivos, el consumo de contenido y la difusión de información.
Además de estas características, HTML5 introduce una etiqueta DOCTYPE de una sintaxis más simple que las versiones anteriores de HTML. El tipo de documento HTML ha sido simplificado drásticamente y documentos HTML5 válidos son esencialmente estructuras XML válidas. Las versiones anteriores de HTML están basadas en SGML (Standard Generalized Markup Language). Que requiere definiciones de tipo de documento (DTS’s) especificas para validar la estructura apropiada del mismo. Con HTML5, el contenido esta basado en XML y debe seguir las reglas de formato validas para XML. A pesar de que el contenido HTML5 no requiere un DTD, el simple <!DOCTYPE HTML> es requerido para asegurar que los browsers se comporten apropiadamente.
Aunque técnicamente es un lenguaje de marcado, HTML5 también incluye varias APIs DOM nuevas, que son expuestas por los navegadores en su implementación DOM de JavaScript. Con las nuevas etiquetas multimedia, nuevas APIs están disponibles para consumir e interactuar con contenido multimedia. Esto incluye controles para audio y video dentro de un elemento <canvas>. Además de multimedia HTML5 también introduce varias APIs de JavaScript con soporte de aplicaciones offline, drag & drop nativo, contenido editable por el usuario, integración mejorada en el historial del browser e incluso la posibilidad de registrar tipos de archivos con una aplicación web.
Aunque esta no es una lista exhaustiva de los cambios que vienen con HTML5, debe de darte una idea de lo que será posible con este nuevo estándar. Para mayores detalles de los últimos cambios de HTML5, asegúrate de revisar la especificación y cambios publicados por la W3C de HTML4 o explorar la especificación en línea completa de HTML5.
¿Qué no es HTML5?
Cuando se habla de HTML5, es igualmente importante diferenciar lo que no es parte de la especificación HTML5. En el transcurso del tiempo, los medios digitales han agrupado aspectos de CSS3 como animaciones, transiciones, transformaciones, gradientes y tipografías web, así como nuevas APIs de JavaScript para mejorar las capacidades de los browsers como la geolocalización, bajo el termino singular de “HTML5”. La especificación HTML5 no abarca estos términos y tecnologías, sin embargo están estrechamente relacionados a los browsers actuales y son de suma importancia para entregar experiencias ricas al usuario, por lo que se confunden fácilmente. CSS3 se refiere a la revisión 3 de las hojas de estilo en cascada, y es un lenguaje para definir la presentación del contenido. CSS3 define como se ven las cosas y como pueden ser usadas en conjunto con el contenido estructurado de HTML5, donde este define como esta estructurado el contenido en realidad. Con las nuevas APIs de JavaScript, si no están incluidas en el estándar HTML5, son solo “APIs”. Estas API’ son interfaces para exponer funcionalidad avanzada a través de JavaScript, que hace accesibles las aplicaciones web HTML5 y que son parte integral del desarrollo web. Sin embargo, estas APIs, no son técnicamente parte de la especificación HTML5
En resumen, las siguientes tecnologías se enlistan a menudo en el contexto de HTML5, aunque no son parte de su especificación: WebGL, FileReader, querySelector(All), Geolocation, CSS3, Web Workers, Web Sockets, y JavaScript.
¿Qué significa todo esto?
En general, HTML5 es una evolución del lenguaje HTML que pretende traer estándares más ricos basados en contenidos para el mundo de la web y multidispositivos. Su objetivo es simplificar algunas de las complejidades y estructuras de la especificación actual de HTML 4.01, permitiendo así la fácil creación y consumo de medios enriquecidos, gráficos dinámicos e interfaces de usuario complejas y fomentar un entorno donde se pueda confiar en una experiencia consistente en todos los browsers y dispositivos que soporten las capacidades de HTML5. En esencia, HTML5 promete cambiar la premisa de que HTML es solo para contenido textual estático. Los paradigmas del desarrollo web están cambiando y HTML5 promete convertirse en una plataforma para la programación web y no solo un lenguaje de marcado.
Las etiquetas HTML5 pueden ser usadas en la web hoy en día, y son compatibles con las etiquetas actuales de HTML4 por lo que no rompen el contenido indicado por estas etiquetas. Toda el conocimiento sobre la estructura HTML y el formato no se pierde, pues HTML5 sigue las mismas reglar. Si las características específicas de HTML5 no son compatibles con la plataforma de destino, se puede usar JavaScript para detectar la falta de esas características y proporcionar así soluciones de contingencia.
La gran mayoría de los browsers de escritorio cuentan con soporte a las características de HTML5 en cierto modo (aunque no todos soportan HTML5 por igual) así como los browsers de smartphones y tabletas electrónicas líderes en el mercado. HTML5 puede ser una solución atractiva para multidispositivos y aplicaciones multipantalla por el amplio soporte que tiene. No solo HTML5 es la opción para desarrollar experiencias ricas en el browser, varios fabricantes de aplicaciones de escritorio y tabletas proveen kits de desarrollo de software (SDKs) dirigidos específicamente al desarrollo de aplicaciones nativas usando la sintaxis y estructura de HTML5
¿A dónde ir desde aquí?
A pesar de que HTML5 no está estandarizado, es posible usarlo actualmente. HTML5 esta madurando y es una solución tecnológica viable. Dispositivos de Apple iOS, Android, Blackberry 6 y HP/Palm WebOS soportan las características de HTML5 al igual que los últimos browsers de escritorio (Safari, Chrome, Opera, Internet Explorer). En la actualidad no todos los browsers soportan todas las características de HTML5 por lo que su uso debe ser determinado por los usuarios finales, las plataformas y dispositivos.
Restarle importancia a HTML5 en este punto sería un error. HTML5 puede ser una gran adición a tu set de herramientas como desarrollador web. Dado que las tecnologías evolucionan, también lo hacen la forma y la estructura de como estas tecnologías son implementadas. HTML5 pretende ser una prueba del futuro. Los documentos HTML creados usando el doctype HTML5 deben seguir las reglas de parseo de XML/XHTML y deberán ser estructuras válidas que puedan trabajar indefinidamente en el futuro, aun cuando el lenguaje continúe evolucionando.
Además, el contenido basado en HTML5 debe ser fácil de consumir por agregadores de contenidos así como por una variedad cada vez mayor de dispositivos. Hoy en día es posible consumir contenido basado en HTML5 desde una computadora de escritorio, un teléfono móvil, una tableta y tal vez incluso desde un automóvil. Desarrollando contenidos enfocados en el estándar HTML5 puede abrir puertas no previstas en un futuro. Quién sabe, tal vez mañana, el refrigerador, la lavadora, la bomba de gas consuman contenidos ricos basados en el estándar HTML.
Éstos son algunos recursos útiles HTML5 para empezar:
- http://en.wikipedia.org/wiki/HTML5
- http://www.html5rocks.com/
- http://html5demos.com/
- http://www.html5test.com/
- http://www.w3schools.com/html5/html5_reference.asp
- http://dev.w3.org/html5/html4-differences/
También asegúrate de probar los Chrome Experiments, un showcase de proyectos web construidos con HTML5 y otras tecnologías. Y qué mejor forma de dominar estas tecnologías que con nuestro curso de HTML5.
Este artículo lo compartimos aquí bajo licencia Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License, la versión original puedes encontrarla en este link.