Hoy voy a hacer una breve introducción a la especificación HTML5. Ya sabes que la especificación de HTML5 es la más potente que se conoce hasta ahora y que permite cosas tan maravillosas como empotrar vídeo y audio de forma nativa sin necesidad de plugins adicionales que dejarán de ser necesarios. En este post solo introduciremos algunos de los nuevos elementos de la nueva especificación, en próximas entregas ahondaremos en cada uno de ellos.
La web de hoy en día no sería lo que es si no fuera por la innovadora inclusión del elemento img
el 22 de Septiembre de 1995 en la especificación de HTML 2.0. Se lo que estás pensando, y si, efectivamente, tampoco sería lo que es sin la inestimable ayuda de la industria del porno que ha estado siempre en la cúspide de la innovación, pero eso es harina de otro costal y además da para escribir uno o varios posts al respecto.
El caso es que hasta la introducción del elemento img
que posibilitaba la inclusión de imágenes en la web, ésta, no había tenido gran éxito fuera del ámbito académico y científico. Eso junto la adición del lenguaje de lado cliente JavaScript fue lo que hizo que la web fuera lanzada y poco a poco fuera convirtiéndose en el referente de lo que la abstracta palabra Internet significa. Hoy en día, la web es un sitio maravilloso donde procrastinar como campeones y navegar como jamás Chanquete lo hubiera siquiera imaginado.
Beneficios
Con las especificaciones de HTML que había hasta ahora, si un desarrollador web deseaba publicar vídeo o audio debía de utilizar tecnologías propietarias en forma de plugin como Flash o Silverlight con los problemas que ello conlleva:
-
No son abiertas
-
No han sido creadas por la comunidad
-
No se acogen a ningún tipo de estándar
-
Están sometidas a los designios de corporaciones privadas
-
No son flexibles
Utilizar tecnologías propietarias como Flash en nuestros proyectos, cubría unas necesidades que las especificaciones de HTML (como HTML 4 y XHTML 1.0) no cubrían, pero perdíamos gran parte de nuestra independencia. Además, son de sobra conocidos los problemas de seguridad que esas tecnologías han tenido y los problemas de compatibilidad con algunos Sistemas Operativos como GNU/Linux.
Existió una época dorada del desarrollo web con Adobe Flash donde los diseñadores web nos ofrecieron tremendos esperpentos venidos directamente del inframundo para azotar nuestras córneas y nuestros oídos ya que se puso muy de moda el tremendo error de añadir pistas de audio (super cutres por regla general) a páginas web completamente desarrolladas en Flash y de toda índole.
Así es como se pusieron muy de moda lo que yo he venido a denominar los “chachi menús“ que consistían en botones y links de todo tipo que al pulsarlos debías incondicionalmente de sufrir una dolorosa animación de entre 3 y 4 segundos donde iban apareciendo texto e imágenes en un baile de luces y colores que más de un club de carretera hubiese deseado para sí. En algunos casos provocaban incluso ataques epilépticos descontrolados.
Fue la época en la que cualquier diseñador gráfico vendía lo que ellos denominaban “webs dinámicas“ infumables por 300 euros y que ya todos conocemos las consecuencias que ha tenido para los y las profesionales del desarrollo y el diseño web.
La nueva especificación de HTML5 nos es beneficiosa hasta límites insospechados entre otros muchos motivos porque:
-
Sigue un estándar
-
No está en manos de corporaciones privadas
-
Es flexible
-
Es innecesario instalar software de terceras partes
Si todo eso no te convence, haz memoria y acuérdate de la época desde el 2000 hasta el 2005 aproximadamente y como estaba el panorama web por aquel entonces… ¿a que te ha convencido ya?. Pues eso.
Multimedia
Muchos han sido los avances en servir contenidos multimedia, estos son algunos de ellos
Canvas
Como bien he apuntado ya antes, la inclusión del elemento img
en 1995 fue un impulso enorme para el desarrollo de la web. Pero desde entonces, las imágenes han permanecido estáticas, dando lugar a otro esperpento de la tecnología, el formato gif del que ya hablaremos en otro momento. La nueva especificación de HTML 5 incluye el elemento canvas
que es un entorno donde pueden crearse imágenes dinámicas.
Utilizando una API en JavaScript podemos manipular el elemento canvas para dibujar en él lo que queramos en el momento que queramos pudiendo crear gráficos dinámicos de todo tipo incluidas interfaces de aplicaciones web completas. Como bien indica Javier Holguera en los comentarios, la API JavaScript a la que hacemos referencia tiene su propia especificación en marcha.
Audio
¿A quien no le gusta entrar a una web al azar y escuchar a toda pastilla una canción sin posibilidad de parar la reproducción?. La respuesta es obvia, así que no, por favor, no uses el nuevo elemento audio
para hacer eso. El nuevo elemento permite empotrar archivos de audio en diferentes formatos incluyendo mp3 y ogg y provee de una interfaz de control sobre la reproducción del mismo con una API en JavaScript sin necesidad de plugins de ningún tipo. Realmente, el formato a utilizar en nuestros desarrollos vendrá impuesto por el fabricante del navegador, que soportará uno u otro formato, y no por el estándar
Aquí tenemos un ejemplo práctico que podréis disfrutar todos aquellos que uséis un navegador que soporte la etiqueta audio
:
Vídeo
Como es habitual, los usuarios de una tecnología son en gran medida los que determinan su futuro. Estaba más que cantado que el soporte nativo de vídeo debía ser algo que los navegadores soportaran en algún momento, y ese momento ya ha llegado. La nueva especificación de HTML5 soporta la inclusión de vídeo empotrado en las páginas web de forma nativa. Creo que no es necesario que explique lo excitante que es eso. De igual manera que con la especificación del elemento audio
el elemento video
no especifica el formato del mismo sino que el uso de uno u otro vendrá impuesto por el fabricante del navegador.
Otro ejemplo práctico de como disfrutar de un vídeo de calidad en nuestras páginas web sin necesidad de plugins de terceros usando la etiqueta video
:
Para ir concluyendo
Existen muchas más novedades en las especificaciones del HTML5, por ejemplo las nuevas especificaciones para formularios que traen muchas novedades y la web semántica. Existen otras novedades importantes que aún o siendo parte de la especificaciones del lenguaje conviene nombrar como el WebGL que permite utilizar OpenGL empotrado directamente en el navegador.
Lo que está claro es que HTML5 es un tema apasionante del que hay aún que escribir mucho, así que estate atento porque iré hablando sobre los nuevos elementos especificados en HTML5 en profundidad de uno en uno a lo largo de los próximos días.
En Genbeta Dev | Introducción a HTML5
Más Información | Especificaciones de HTML5