Las novedades de HTML5 (III)

Después de las dos primeras entregas de este repaso a HTML5 (parte I y parte II), llegamos a la parte dinámica del estándar, lo que se añade al DOM y a Javascript para conseguir aplicaciones web avanzadas. Por un lado tenemos diversas APIs, es decir, conjuntos de funciones y herramientas que implementan un propósito concreto. Por el otro lado tenemos varias funciones y atributos que sirven a propósitos más generales y que no se pueden enmarcar en una API concreta.

HTML 5. Nuevas APIs

No está claro que todas las APIs siguientes se vayan a incluir en el estándar HTML5 propiamente, de hecho seguro que alguna de ellas se separará creando un estándar propio dedicado. De cualquier forma, estas son las nuevas APIs que nacen o se desarrollan en HTML5:

• Una API para dibujar en 2D, que se podrá usar junto al nuevo elemento canvas. Básicamente, se pueden pintar elementos sobre un lienzo, de manera similar a lenguajes como Java.
• Una API para controlar los nuevos elementos multimedia, video y audio. Así podremos controlar la reproducción con código Javascript, algo interesante pero que puede dar más de sí.
• Una API para guardar datos localmente, utilísimo para que las aplicaciones web puedan trabajar sin necesitar conexión a Internet. Ese DOM storage está ya implementado en las últimas versiones de los grandes navegadores, así que dentro de poco podremos disfrutar de esta clase de aplicaciones sin necesidad de extensiones como Google Gears.
• Una API para que las aplicaciones web puedan enlazarse a protocolos o tipos de archivos MIME, otro añadido extremadamente útil. Esto permitiría abrir las fotos de tu disco duro directamente en una aplicación de retoque online, o un archivo mp3 en una biblioteca online, etc…
• Una API para editar los campos que sean editables, valga la rebuznancia. Esto permite controlar los elementos HTML que son editables por el usuario, tipo Word. Por ejemplo, Google Docs o editar HTML en emails será muy sencillo, y con esta API es trivial cambiar ese contenido con Javascript.
• Una API para controlar las acciones Drag & Drop sobre los elementos que se puedan arrastrar. Esto se puede conseguir actualmente con algunas librerías, pero con esta API el navegador lo permite de manera nativa y más poderosa.
• Una API para controlar el historial desde una aplicación web. Esto permitirá a las aplicaciones web que se muevan con Javascript añadir páginas al historial para que los botones Atrás-Adelante funcionen siempre.
• Una API para habilitar la comunicación entre varias «páginas web». Es decir, si tenemos varios iframes externos en una web, podemos comunicarnos con ellos y compartir información de manera segura, por ejemplo con gadgets de Facebook o similares.

HTML5. Novedades en el DOM

Se han añadido a los elementos del DOM nuevas funciones y atributos que facilitan su uso y permiten realizar acciones muy usadas. Aquí comentaré los más interesantes, que trabajan sobre el documento (HTMLDocument) o sobre cualquier elemento (HTMLElement).

• La función getElementsByClassName() se añade a todos los elementos y al documento. Su funcionamiento es similar a getElementsById(), pero en este caso selecciona todos los elementos del documento o de cierto subárbol del documento que contengan esa clase. Su definición es tan amplia que incluso elementos que contenga SVG o MathML pueden ser encontrados.
• El atributo classList está disponible para cualquier elemento, y contiene una lista con todas las clases que tiene ese elemento. Además contiene varios métodos que facilitan trabajar con esa lista: buscar, modificar, borrar, etc. Muy útil para trabajar con elementos que puedan tener más de una clase, es muy sencillo y muy conveniente de usar. Los enlaces también tienen un elemento similar adicional llamado relList que permite lo mismo pero con el atributo rel (como el famoso rel=»nofollow»).
• El atributo innerHTML se añade, por fin, al estándar. Prácticamente usado por todas las aplicaciones web y soportado por todos los navegadores, creo que todos los desarrolladores web lo conocen de sobra. Para aquellos que no lo conozcan, este atributo permite trabajar con el contenido de un elemento en texto plano, incluso cambiando elementos HTML que pueda haber. Igualmente, se añade a todos los elementos y al propio documento, pudiendo cambiar TODO el contenido de una web.
• Los atributos activeElement y hasFocus están disponibles sobre un documento, y permiten conocer qué elemento está activo y si el documento tiene el foco, respectivamente.
• La función getSelection() se aplica también al documento y devuelve un objeto con el texto y elementos que están seleccionados.
• El atributo designMode es otra novedad sobre el documento e indica/modifica que el documento pueda o no ser editado.
• La función execCommand() se aplica sobre el documento y permite ejecutar acciones o «comandos» típicos de edición de documentos. Por ejemplo, con este método se llamaría a los útiles copiar/pegar, pero también a otros típicos como crear un enlace o cambiar el color de un elemento. Como el anterior, la mayoría de estos comandos trabajan sobre elementos editables.

Con esto ya hemos acabado con todas las novedades de HTML5, al menos las más importantes e interesantes para los desarrolladores web. Pero aún nos queda una parte muy importante: los elementos y atributos que se eliminan del estándar y que formaban parte de HTML4 y anteriores. Son muchos y variados, y algunos pueden causar más de un dolor de cabeza, así que los dejamos para la cuarta y última entrega de este especial.

Enlace | Las novedades de HTML5 (I)
Enlace | Las novedades de HTML5 (II)
Enlace | Las novedades de HTML5 (y IV)
Enlace | Borrador actual de HTML5
Ver más | HTML5