Las reglas básicas que se plantearon a la hora de actualizar a HTML 5 fueron:
- Basarse en HTML, CSS, DOM y Javascript.
- Reducir la necesidad del uso de plugins, como por ejemplo flash.
- Mejorar el tratamiento de errores.
- Crear etiquetas que reemplacen el uso de scripts.
- Lenguaje que pueda utilizarse en cualquier tipo de dispositivo, como móviles, PDA's, etc.
- Lenguaje que pueda utilizarse en cualquier tipo de dispositivo, como móviles, PDA's, etc.
Eliminación de etiquetas y atributos obsoletos o no deseablesLos atributos de formato de muchas etiquetas han sido eliminados. Deben definirse en los estilos CSS. Así, se pretende separar el formato del contenido definitivamente. Prácticas que hasta ahora eran desaconsejadas, como el atributo background de <body> o los atributos align y border, pasan a estar prohibidas. Algunos ejemplos más son los atributos cellpadding, cellspacing de las tablas, o las etiquetas <u>, <font>, <center> o <strike>.
Se han eliminado etiquetas problemáticas como <frame>. Para mostrar una página dentro de otra se deberá utilizar <iframe>.
También se eliminan otras etiquetas que habían caido en el desuso porque son perfectamente reemplazables, como <dir> (que no es más que un <ul>) o <applet> (se utiliza <embed>).
Nuevos elementosSe han incorporado nuevos elementos que ayudan a mejorar la estructura de las páginas, a etiquetar su contenido y a trabajar de un modo más organizado. Además, se han implantado librerías de javascript que permiten trabajar con él de un modo mucho más integrado y con instrucciones nuevas de verdadera utilidad. Veámoslos con detalle.
Cambios hacia la estructuración y la web semántica
La maquetación hasta ahora se hacía mediante capas con la etiqueta
<div>. Ahora ya no es necesario, porque se han incorporado una
serie de etiquetas estructurales que permiten definir las partes básicas de una página y estructurar su contenido:
- Encabezado <header>
- Pie <footer>
- Zona de navegación <nav>
- Secciones de la página <section>
- Artículos <article>
- Información que sale del flujo normal del contenido, como definiciones o aclaraciones, ampliación de la información...<aside>
Existen otras etiquetas que también te pueden ser de mucha utilidad.
Facilitan tareas que antes requerían de programación o flash, y dotan
de mayor semántica a la página web.- Barras de medida <meter>, que representan valores sobre un total (por ejemplo un 75%
75% o la representación gráfica de 2 sobre 10) - Barra de progreso <progress>, que informan al usuario de que debe esperar.
- O la posibilidad de etiquetar una fecha con <time>, para facilitar la búsqueda temporal.
- Elementos para enmarcar figuras como diagramas o imágenes ilustrativas que son prescindibles para el seguimiento de la información <figure>
- Etiqueta para enmarcar una conversación, por ejemplo, de chat <dialog>
- Detalles para saber más acerca de algo <details>
Ver ejemplo
Este es un ejemplo del uso de details.
- En cuanto al contenido interactivo, como vídeos o sonido, ya no será necesario un reproductor flash. Se han creado las etiquetas <video> y <sound> que incorporan los controles, por lo tanto lo único que deberás hacer para visualizar este tipo de material en tu web es incluir dichas etiquetas referenciando al archivo en cuestión y automáticamente se mostrarán botones para ajustar la reproducción o el volumen.
- Los <datagrid> son conjuntos de datos. Así como las tablas tradicionales se utilizarán más para datos estáticos, los datagrid están enfocados a su actualización y a la modificación por parte del usuario mediante scripts.
Con HTML es más sencillo diseñar formularios. Lo que antes eran casi todo inputs de tipo texto (<input type="text">),
ahora adquieren sentido con la incorporación de tipos específicos para
que el usuario indique una URL, mail, número, fecha, color o rango. Al utilizar estos tipos de input, el navegador es capaz de saber qué información se espera en cada momento y de ese modo puede adaptarse en cada situación. Por ejemplo, los móviles de última generación (smartphones) mostrarán un teclado u otro en función del tipo de campo. Si es un correo electrónico incluirán la @, si se espera un número, mostrarán el teclado numérico, etc.
Algunos ejemplos son:
Existen otras variantes para fecha y hora, etc. El control integra el calendario donde el usuario puede escoger fecha.
El usuario podrá escoger un color simple de una paleta de colores. El resultado será una cadena tipo #000000.
El control esperará una cadena de texto con la estructura típica nombre@dominio.com.
Un control de tipo deslizante permite especificar un valor dentro de un rango definido.
Al estar tan definidos es más fácil validarlos. Además, para el usuario es más sencillo e intuitivo utilizarlos. A la larga y con el uso generalizado de dichos tipos de campos, al usuario le resultarán familiares y le será más fácil interpretar los formularios.
De momento podrás observar que según el navegador que utilices los verás o no verás correctamente. Recuerda que hasta que HTML5 sea un estándar y los navegadores lo interpreten perfectamente pueden suceder este tipo de incompatibilidades.
Cambios hacia las aplicaciones web 1.0
Básicamente se utiliza Javascript. Se pretende lograr una mayor interacción del usuario con la página sin sobrecargar el servidor, ya que la mayoría de los procesos se realizan en la parte del cliente.
Existen nuevos elementos que facilitan la tarea de arrastrar y soltar elementos en la página (drag&drop). Para ello se definirá el elemento a arrastrar con el atributo dragable a verdadero, y se especificará la acción a realizar en el lugar de destino mediante el atributo dropzone. El proceso en sí se controlará con los nuevos eventos ondragstart, ondragover, ondragenter, ondragleave, ondragend y ondrop, que son cada uno de los estados en que puede encontrarse un elemento cuando es arrastrado.
Otro atributo que dota de mayor interactividad a los elementos HTML es ContentEditable. Con él permitiremos que el usuario pueda modificar los distintos elementos que componen nuestra página.
Se utiliza el DOM para el acceso y modificación de los elementos de la página web. Además, se añade la posibilidad de incluir eventos DOM de un servidor externo.
La nueva característica WebStorage permite el almacenamiento de datos en el cliente. De este modo no será necesario recurrir tanto al uso de las cookies que hacen trabajar al servidor. Con sessionStorage y localStorage se podrá almacenar información en el cliente. De hecho se pretende implementar la posibilidad de realizar consultas SQL directamente sobre una base de datos que se encontrará en el cliente.
Se han creado múltiples eventos que vienen muy bien a la hora de programar, como onerror y oninvalid. También otros como onundo y onredo, que están enfocados a trabajar con la nueva posibilidad de gestionar el historial de acciones en la web. Y otros muchos dirigidos a controlar la reproducción de elementos multimedia de vídeo y audio, como onloadstart, onleadeddata, onplay, onplaying, onprogress, onwaiting, onpause, onvolumechange, etc.
La creación de menús es ahora más completa, ya que resurge el uso de la etiqueta <menu>. La diferencia es que esta vez se utiliza la nueva etiqueta <command> para definir sus elementos. Si acostumbras a utilizar imágenes para formar menús podrás utilizar su atributo icon.
Canvas ¿el sustituto de flash?
Otra novedad estrella de HTML 5 es la etiqueta <canvas>. Define un espacio en el que se puede dibujar, convirtiendo la web en un lienzo.
Dentro de dicha etiqueta se define en javascript cada uno de los trazos
a dibujar, mediante coordenadas. Las espectativas que hay puestas sobre
este elemento son las de convertirlo en el sustituto de los elementos
flash. Así, no será necesario ningún tipo de plugin para poder mostrar
elementos gráficos dinámicos. Además el comportamiento de los trazos se
podrá controlar totalmente desde el código. Gracias al canvas es posible crear gráficas que se vayan actualizando en función de unos valores dinámicos, crear juegos, etc. De hecho, el ejemplo de la guitarra que se encuentra al principio de este artículo no es más que un canvas programado con javascript.
Ante esta nueva posibilidad quizá te plantees que podría resultar muy tedioso dibujar utilizando coordenadas. No te preocupes mucho por esto, porque ya han surgido herramientas como cooties que te permiten dibujar de forma intuitiva y exportar el proyecto en código HTML 5.
La principal ventaja de Cooties es que tan sólo necesitas una cuenta de Google para poder utilizarlo, directamente desde la web y de forma gratuita. Aun se encuentra en fase beta, pero es cuestión de tiempo que se perfeccione y que surjan aplicaciones similares. De hecho, esperamos que las distintas aplicaciones que hoy en día exportan en formato flash se actualicen, en un futuro cercano, para permitir la exportación a HTML5.
