Después de la primera entrega de este repaso a HTML5 (parte 1), 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.

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.

Guía de Referencia Canvas HTML 5

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.

Terminamos este especial sobre HTML5 con la parte más desagradable (o agradable) del estándar: lo que se elimina. Es curioso que un montón de elementos comunes pasan a estar prohibidos en HTML5, por razones diversas que ahora veremos. Por esas mismas razones bastantes atributos han sido eliminados bien de un elemento concreto o de todos los elementos.

Sin embargo hay que aclarar estas prohibiciones, ya que hay dos caras en esta moneda. Por un lado los desarrolladores no pueden usarlos, si quieren que sus documentos sean HTML5 válidos. Por el otro lado, los navegadores tienen la obligación de implementarlos y soportarlos, para ser compatible hacia atrás con HTML4 y anteriores. Esta dualidad es muy interesante y nos ahorra bastantes problemas de una manera limpia definida en el estándar.

Elementos eliminados

Como decía, estos son los elementos eliminados y las razones de por qué son prohibidos:

• Los siguientes elementos (muy usados hace pocos años) se quitan de HTML5 porque son puramente presentacionales (no tienen semántica) y todo el tema estético se debe tratar con CSS:
  • basefont
  • big
  • center
  • font
  • s
  • strike
  • tt
  • u
• Los elementos para trabajar con frames (frame, frameset y noframes) se quitan del estándar por razones obvias: afectan negativamente a la usabilidad y accesibilidad de la web. Además, prácticamente rompen la web, y si se necesita algo similar se puede acudir a los iframe, más potentes y mejor pensados.
• El elemento acronym se elimina simplemente porque crea confusión sobre su uso, y los desarrolladores no entienden demasiado bien para qué usarlo. Las abreviaciones y acrónimos se pueden marcar con abbr, que sí se mantiene en el estándar.
• El elemento applet se ha declarado obsoleto y hoy en día no se utiliza. El elemento object reemplaza sus funciones y es lo común hoy en día.
• El elemento isindex se quita definitivamente. En la era de las cavernas se utilizaba para mandar información al servidor, pero con la llegada de los formularios su uso es arcaico y poco útil.
• El elemento dir también se declara obsoleto (ya lo era en HTML4), y simplemente se recomienda usar listas normales con ul.
• El elemento noscript se mantiene en HTML pero no en XML/XHTML, ya que su contenido está en HTML. No estoy muy de acuerdo con este movimiento, pero así será.

Atributos eliminados

Para empezar, todos los atributos referentes a la presentación han sido eliminados, por la misma razón de antes: CSS sirve mejor ese propósito. Recuerdo que el atributo style (que contiene CSS) es ahora universal y puede ser aplicado a todos los elementos, así que si queremos indicar su presentación sin añadir una hoja de estilos aparte, tendremos que usar este atributo. Atención a la lista porque esto sí que es importante, ya que algunos de estos elementos son muy usados, aunque otros están muy obsoletos:

• Atributo align en todos los elementos.
• Atributos alink, link, text y vlink en el elemento body.
• Atributo background en el elemento body.
• Atributo bgcolor en los elementos table, tr, td, th y body.
• Atributo border en todos los elementos.
• Atributos cellpadding y cellspacing en el elemento table.
• Atributos char y charoff en los elementos col, colgroup, tbody, td, tfoot, th, thead y tr.
• Atributo clear en el elemento br.
• Atributo compact en los elementos dl, menu, ol y ul.
• Atributo frame en el elemento table.
• Atributo frameborder en el elemento iframe.
• Atributo height en los elementos td y th.
• Atributos hspace y vspace en los elementos img y object.
• Atributos marginheight y marginwidth en el elemento iframe.
• Atributo noshade en el elemento hr.
• Atributo nowrap en los elementos td y th.
• Atributo rules en el elemento table.
• Atributo scrolling en el elemento iframe.
• Atributo size en el elemento hr.
• Atributo type en los elementos li, ol y ul.
• Atributo valign en los elementos col, colgroup, tbody, td, tfoot, th, thead y tr.
• Atributo width en los elementos hr, table, td, th, col, colgroup y pre.

Como veis, algunos de estos atributos sí que se mantienen para ciertos elementos, como la anchura y altura en las imágenes. Sin embargo estos no son los únicos atributos que se eliminan, también hay otros que se quitan por redundancia, por evitar confusiones, por su bajo uso o porque simplemente se han quedado obsoletos.

• Atributo accesskey en los elementos a, area, button, input, label, legend y textarea.
• Atributos rev y charset en los elementos link y a.
• Atributos shape y coords en el elemento a.
• Atributo longdesc en los elementos img y iframe.
• Atributo target en el elemento link.
• Atributo nohref en el elemento area.
• Atributo profile en el elemento head.
• Atributo version en el elemento html.
• Atributo name en los elementos img y a. Para obtener un comportamiento similar se recomienda usar id.
• Atributo scheme en el elemento meta.
• Atributos archive, classid, codebase, codetype, declare y standby en el elemento object.
• Atributos valuetype y type en el elemento param.
• Atributo language en el elemento script.
• Atributo summary en el elemento table.
• Atributos axis y abbr en los elementos td y th.
• Atributo scope en el elemento td.

Para ver los cambios de una versión a otra, aparte de la guía de referencia de w3school, os adjunto un PDF Cheatsheet sobre HTML5: Guía de Referencia HTML5 en PDF

Otros cambios

Hay diversos elementos que no se eliminan por su extendida fama, pero que siendo un tanto ortodoxos deberían eliminarse. Para evitar esto los que están escribiendo el estándar han tenido que redefinir su definición, de tal forma que se tratan de manera similar pero semánticamente son diferentes.

Un ejemplo muy claro es u e i, muy usados pero que progresivamente pierden importancia frente a strong y em. Estos dos elementos, que indicaban negrita y cursiva respectivamente, pasan a definirse de una manera muy vaga para indicar un texto diferente en alguna manera al texto normal. Otros elementos se redefinen, particularmente me resulta curioso que se mantenga small mientras big se elimina. De cualquier manera, no es demasiado relevante para los desarrolladores web, en el sentido de que podrán seguir usándolos como ahora.

Os dejo un enlace dónde podéis ver ejemplos claros de la capacidad que tiene HTML5:
Ejemplos demos HTML5 (Podras seleccionar el que quieras ver).

Conclusiones

Tal y cómo habéis ido viendo, las novedades de HTML5 se centran en facilitar la implementación de aplicaciones web, avanzar hacia la web semántica y limpiar un poco toda la basura heredada de las anteriores versiones de HTML. Aunque todo eso parezca lejano, lo cierto es que muchos navegadores ya implementan algunas partes sueltas de HTML5, y ya existen varias páginas experimentales que juegan con estos elementos. Por ejemplo, cerramos este minucioso especial precisamente en el día en que Firefox 3.5 es lanzado, pero Safari, Opera, Chrome e incluso IE8 ya soportan algunas cosas.

Ahora queda preguntarnos, ¿cuándo se acabará este estándar? Precisamente no hay ninguna fecha, y la condición para que HTML5 se considere estándar es, según la W3C, que al menos un navegador implemente todo HTML5 correctamente. De esta manera se asegura que todo el estándar es factible, que puede ser implementado. Para esto puede quedar dos o tres años, si todo va bien, pero nada es seguro.

Fuente: Anexom

HTML5 está llamada a ser el reemplazo del actual (X)HTML. Precisamente en un momento en el que la web está lo suficientemente madura, este estándar aprende de los errores cometidos e intenta solucionar la mayoría de problemas con los que un desarrollador web se encuentra. Como muchas de sus novedades son interesantes y afectan directamente a la futura web, vamos a comentar en varios artículos los cambios más importantes, empezando por este artículo donde comentaremos los nuevos elementos.

Antes de seguir habría que aclarar que HTML5 sigue en borrador y lo seguirá estando durante algunos años más. El enfoque general ha cambiado bastante respecto a versiones anteriores de HTML, añadiendo semántica y accesibilidad implícitas, especificando cada detalle y borrando cualquier ambigüedad. También se tiene en cuenta que muchas páginas web actuales son dinámicas, pareciéndose más a aplicaciones que a documentos. Algo básico es que HTML5 está definido en base al DOM (la representación interna de una web con la que trabaja un navegador), dejando de lado la representación “real”, definiendo a la vez un estándar HTML y XHTML.

Mejor estructura

Hoy en día se abusa bastante del elemento div, que nos permite estructurar una web en bloques. En HTML5 hay varios elementos que sirven para estructurar mejor una página web, estableciendo qué es cada sección, y reemplazando en muchas ocasiones a div. Con este extra de semántica, será mucho más coherente y fácil de entender por otras personas. Y lo que es más importante, será trivial de entender para una máquina, dándole más importancia a unas secciones y pudiendo jugar con esos datos automáticamente. Concretamente, la tarea de un buscador será mucho más fácil, pero cualquier aplicación que “lea” páginas web se beneficiará. Estos son los elementos:

• section representa una sección “general” dentro de un documento o aplicación, como un capítulo de un libro. Puede contener subsecciones y si lo acompañamos de h1-h6 podemos estructurar mejor toda la página.
• article representa un contenido independiente en un documento, el caso más claro son las entradas de un blog o las noticias de un periódico online. Así, dentro de la portada podremos tener varios artículos demarcados semánticamente, por lo que una herramienta puede extraerlos fácilmente.
• aside representa un contenido que está muy poco relacionado con el resto de la página, como una barra lateral. Esencial para delimitar el contenido “importante” del contenido “de apoyo”, haciendo más caso al primero que al segundo.
• header representa la cabecera de una sección, y es de suponer que se le dé más importancia que al resto, sobre todo si la sección es un artículo.
• footer representa el pié de una sección, con información acerca de la página/sección que poco tiene que ver con el contenido de la página, como el autor, el copyright o el año.
• nav representa una sección dedicada a la navegación entre el sitio, como la típica barra superior de los periódicos.

En la anterior imagen vemos un ejemplo de cómo cambiaría un documento escrito en HTML normal a HTML5 con estos elementos.

Mejores formularios

El elemento input ha sido ampliado y ahora permite todos estos tipos de datos:

• datetime, datetime-local, date, month, week, time, para que indicar una fecha/hora.
• number para que el usuario indique un número.
• range para indicar un rango entre dos números.
• email para indicar un correo electrónico.
• url para indicar una dirección web.
• search para indicar una búsqueda.
• color para indicar un color.

Lo más interesante de esto es que los navegadores podrán implementar interfaces específicas para cada tipo de dato, por ejemplo una fecha o un color se podrán indicar de manera directa e intuitiva. Otro ejemplo sería el teclado del iPhone, que muestra unos símbolos u otros dependiendo de si es un texto normal, un email (añade @ y el punto) o una url (añade la barra y el punto com), y que por tanto gana mucho con este estándar.

Otros elementos importantes

• audio y video sirven para incrustar un contenido multimedia de sonido o de vídeo, respectivamente. Sin duda uno de los añadidos más interesantes, ya que permite reproducir/controlar vídeos y audios sin necesidad de plugins como el de Flash. Se tratan de manera totalmente nativa como cualquier otro elemento, por ejemplo se pueden incluir enlaces o imágenes dentro de un vídeo. Aunque las implementaciones actuales son un tanto ineficientes, se espera que en un futuro próximo se optimicen. Portales de vídeo como Youtube o Dailymotion ya están empezando a mostrar que un futuro sin Flash es posible (¡y necesario!).
• embed sirve para contenido incrustado pero no nativo, sino ejecutado por plugins como el de Flash. Aunque embed está soportado por casi todos los navegadores desde hace tiempo, es ahora cuando entra parte del estándar y evita el infierno/pelea entre object y embed.
• canvas es un elemento complejo que permite generar gráficos, dibujando elementos dentro de él. Aunque nunca hayas oído hablar de él, seguro que lo has usado alguna vez, por ejemplo de Google Maps. Es un elemento muy potente que dará bastante que hablar en el futuro, y que será el culpable de aplicaciones web espectaculares.

Más elementos

• dialog se plantea para escribir conversaciones, por ejemplo para transcripciones de chat.
• figure se plantea para asociar un contenido multimedia (una foto, un vídeo, etc) a un título o leyenda.
• mark representa un texto resaltado, por ejemplo para resaltar una búsqueda.
• meter representa una medida, como el número de KB. Tiene más sentido si lo unimos con…
• progress representa el estado de una tarea, y se puede usar por ejemplo al subir un documento o al realizar varias tareas pesadas. Esto permitirá barras de tareas personalizadas y potentes.
• time representa una fecha o una hora.
• command representa un comando que el usuario puede ejecutar en su navegador.
• output representa una salida de un programa, probablemente ejecutado directamente en el navegador, como una calculadora.
• datagrid representa datos de manera interactiva y permite trabajar dinámicamente con información y cambiar la página respecto a esa información. Será útil sobre todo si se quiere trabajar con aplicaciones que necesiten de bastantes datos a la vez en el lado del cliente.

Ahora vamos a comentar los nuevos y mas interesantes atributos HTML 5 en esta nueva versión. También hay que tener en cuenta que estos no son todos los cambios, solo he seleccionado los relevantes para el día a día de un desarrollador web. Por último, habría que distinguir entre los atributos que solo afectan a un subconjunto de los elementos y los globales, que afectan a cualquier elemento.

Nuevos atributos

Los elementos ya existentes añaden nuevos atributos que permiten hacer cosas muy interesantes. Los más importantes o novedosos son:

• Atributo ping para el elemento a. Este atributo contiene una lista de URLs, las cuáles serán llamadas cuando un usuario haga click en ese enlace. Por ejemplo, un uso práctico sería para estadísticas.
• Atributo autofocus para los elementos de un formulario. Indica qué elemento de un formulario debe ganar el foco al cargar una página. Por ejemplo, en la página principal de Google la cajita de texto gana el foco automáticamente para ayudarnos a escribir sin usar el ratón.
• Atributo form para los elementos de un formulario. Indica a qué formulario pertenece este elemento, y permite poner un elemento de un formulario en cualquier parte de una página. Tal y como está ahora, todos los elementos deben ir dentro de <form>.
• Atributo required para los elementos de un formulario. Indica que es obligatorio rellenar un valor para enviar ese formulario, algo que hoy en día se comprueba con Javascript o en el servidor.
• Atributos autocomplete, min, max, multiple, pattern y step para los elementos input. Estos atributos indican que el valor del input debe cumplir ciertos requisitos, por ejemplo seguir cierto patrón.
• Atributo novalidate para el elemento form. Esto deshabilitará la validación de sus elementos, algo útil si se usa dinámicamente (es decir, con Javascript, activando y desactivándolo).
• Atributos formaction, formenctype, formmethod, formnovalidate, y formtarget para los elementos de un formulario. Estos atributos modifican los atributos del formulario si el elemento es usado (por ejemplo un botón es pulsado o un input es rellenado). Esto permite que dependiendo qué botón usemos podemos tratar el formulario en diferentes páginas usando solo un formulario, algo complicado en HTML4.
• Atributo scoped en el elemento style. Esto permite aplicar estilos solo a cierto subárbol del documento. Por ejemplo, imagina que tenemos un elemento con id igual a “cabecera”; si añadimos el atributo scoped a un style, los estilos contenidos en él solamente se aplicarán a ese elemento y a sus hijos.
• Atributo async en el elemento script. Con este atributo especificamos que el código interno se puede ejecutar en cualquier momento de la página, mejorando la velocidad de carga.
• Atributo manifest en el elemento html. Esto permite indicar nuevos elementos, sobre todo será útil en aplicaciones web.
• Atributo reversed en el elemento ol. De esta forma la lista será numerada en orden descendiente (3, 2, 1…).

Nuevos atributos globales

Además de los anteriores tenemos otros atributos que pueden ser aplicados a todos los elementos de un documento. Esto lo hacen especialmente conveniente si vamos a usar Javascript para modificarlos dinámicamente, ya que no tenemos que comprobar el tipo de elemento para usar los atributos comunes.

• Atributos id, class, style, title, lang y tabindex, ya existentes pero ahora permitidos en todos los elementos. Pues eso, los atributos más usados se vuelven universales.
• Atributo contenteditable, para indicar que el elemento es editable por el usuario. Muy interesante, ya que ahora podremos editar cualquier cosa de manera trivial para el desarrollador, no solamente los elementos de un formulario.
• Atributo contextmenu, para indicar un menú contextual sobre un elemento. Como veis, está todo muy pensado para las aplicaciones web.
• Atributos data-*, donde el asterisco puede ser cualquier nombre. Esto permite atributos personalizados, que luego podremos obtener con Javascript.
• Atributo draggable, para indicar que un elemento se puede arrastrar.
• Atributo hidden, para ocultar un elemento que ya no interesa.
• Atributo spellcheck, para indicar si el contenido de un elemento debe ser pasado por el corrector ortográfico.

Os dejo con una guía de referencia de HTML 5 muy completo de W3Schools. Dónde también se pueden ver las diferencias entre la antigua versión HTML 4 y la nueva:
Guía de Referencia HTML 5

Fuente: Anexom