HTML5: ¿Qué es HTML5?

[kml_flashembed movie=”http://www.youtube.com/v/1hR7EtD6Bns” width=”560″ height=”315″ wmode=”transparent” /]

Transcripción:

Hola, soy Sergio Luján Mora, profesor de la Universidad de Alicante, y en este videotutorial vamos a ver qué es HTML5.

Hoy en día todo el mundo conoce las WWW, la World Wide Web, la Web, el invento que más ha cambiado nuestras vidas en los últimos 15 años. La Web es un sistema de distribución de información basado en hipertexto e hipermedia accesible a través de Internet.

Un elemento esencial de la Web es HTML, el lenguaje de marcado que se emplea para crear las páginas web. HTML permite describir la estructura y el contenido de una página web, principalmente texto, aunque también permite incluir otros objetos como imágenes y vídeos.

HTML5 es la quinta y última versión, por ahora, del lenguaje de etiquetado HTML. Sin embargo, como veremos más adelante, HTML5 no es sólo eso, es algo más.

HTML es un estándar de facto desarrollado por el World Wide Web Consortium, un consorcio internacional que produce recomendaciones para la World Wide Web. El desarrollo del lenguaje de marcado HTML ha ido parejo al desarrollo del World Wide Web Consortium, que fue fundado en 1994.

Desde la publicación de la primera página web en diciembre de 1990, el lenguaje HTML ha ido mejorando con nuevas versiones. En noviembre de 1995 se publicó HTML 2.0, en enero de 1997 HTML 3.2, en diciembre de 1997 apareció HTML 4, y en enero de 2000 se publicó XHTML 1.0, una reformulación de HTML 4 utilizando XML. Finalmente, a mediados de 2007, el World Wide Web Consortium comenzó a trabajar en HTML5, versión que está actualmente en desarrollo y que se espera que se termine en 2014.

Pero las páginas web no se desarrollan únicamente con el lenguaje de marcado HTML. También se emplean otras tecnologías como las hojas de estilo en cascada, la jerarquía de objetos DOM y el lenguaje interpretado JavaScript.

El uso combinado de estas cuatro tecnologías se conoce como DHTML, el HTML dinámico que permite crear sitios web interactivos.

Además del HTML dinámico existen otras tecnologías, como el API de programación XHR, XMLHttpRequest, el metalenguaje XML y el formato de intercambio de datos JSON. Todo ello se conoce como AJAX, una técnica de desarrollo web que permite crear aplicaciones interactivas que se ejecutan en el navegador.

Desde hace un par de años, a AJAX se le han unido una serie de nuevas tecnologías. Estas tecnologías están en desarrollo y en algunos casos existen algunas alternativas que realizan la misma función. A todas ellas se las conoce como HTML5, aunque lo más correcto sería llamarlas “la familia de tecnologías HTML5”.

Veamos qué nos ofrece cada una de ellas.

HTML5 es el nuevo lenguaje de marcado que se ofrece con dos sintaxis, sintaxis de HTML y sintaxis de XHTML. Como he dicho antes, se espera que en 2014 se publique la versión final, ya que lo que tenemos ahora mismo es un borrador. El lenguaje de marcado HTML5 define nuevas etiquetas y atributos que añaden una mayor capacidad semántica al lenguaje.

Una de las nuevas tecnologías de la familia HTML5 es el canvas, que tiene asociada una nueva etiqueta HTML. El canvas o lienzo permite definir un área dentro de una página web en la que se puede dibujar mediante un API para JavaScript. Las posibilidades que ofrece esta tecnología son enormes. Por ejemplo, permite el desarrollo de juegos online, ya no es necesario el uso de Flash, o permite crear aplicaciones de dibujo como esta que vemos en esta imagen.

Otra de las tecnologías de HTML5 es SVG, un lenguaje de etiquetas basado en XML que permite crear gráficos vectoriales. Con SVG se pueden crear gráficos con un lenguaje similar a HTML.

Otra de las tecnologías de HTML5 es el API de geolocalización para JavaScript que permite obtener la localización del usuario, siempre que el dispositivo que utilice ofrezca esa información, y siempre que el usuario lo permita.

La tecnología de caché permite indicar los recursos de una página web o de una aplicación web que se desea que se almacenen de forma local. De esta forma mejora el rendimiento y además permite descargar todos los contenidos necesarios y trabajar en local, mientras que la tecnología de bases de datos es un API que ofrece la posibilidad de almacenar información en local en el navegador mediante una base de datos SQLLite. Con esta tecnología se pueden realizar aplicaciones como esta, donde el usuario puede crear notas persistentes que conservan la posición y la información, aunque se abandone la página web.

Por último, los “web workers” es otra API para JavaScript que permite crear múltiples hilos de ejecución que se ejecutan en paralelo.

Ahora bien, de todas estas tecnologías, ¿cuáles podemos utilizar hoy en día? Es difícil responder esta pregunta porque existen múltiples navegadores con múltiples versiones, cada uno con un nivel de soporte diferente, pero hay algunos sitios web que nos pueden ayudar.

Por ejemplo, el sitio web “When can I use”, ofrece tablas de compatibilidad de HTML5, CSS3, SVG y otras características en diferentes navegadores y diferentes plataformas.

El sitio web “findmebyIP”, ofrece los niveles de compatibilidad de diferentes navegadores en Windows y Macintosh. Este mismo sitio web también nos permite conocer el nivel de compatibilidad de nuestro navegador, ya que lo detecta automáticamente y nos muestra las características de HTML5 que admite.

El sitio web “The HTML5 Test” también permite conocer el nivel de soporte de nuestro navegador y de otros navegadores. Se diferencia de los anteriores porque ofrece una puntuación, lo cual hace que las comparaciones entre navegadores sea mucho más sencilla.

Por último, si quieres aprender más cosas de HTML5 te recomiendo el sitio web “HTML5 Rocks”, desarrollado por Google. En él encontrarás numerosos ejemplos y tutoriales que te mostrarán las fantásticas posibilidades de HTML5.

Y con esto finaliza este videotutorial sobre las tecnologías que forman la familia HTML5.
Si necesitas más información o quieres contactar conmigo, en la páginas web http://desarrolloweb.dlsi.ua.es/ podrás encontrar más información sobre el desarrollo web o también puedes contactar directamente conmigo a través de mi dirección de correo electrónico sergio.lujan@ua.es.