En los últimos años, las tecnologías para el diseño y la programación web han avanzado mucho, pero los esfuerzos se han centrado en potenciar el uso de AJAX. El lenguaje de etiquetas HTML, sin embargo, permanecía sin cambios desde su última revisión en 1999, quedando obsoleto en muchos aspectos. Entonces, en 2004, los principales desarrolladores de navegadores (Apple, Opera y Mozilla) iniciaron una colaboración para crear aplicaciones web, el WHATWG. Como no podía ser de otra manera el W3C se unió a la iniciativa en 2006, cuando empezaron a desarrollar la nueva versión. En 2009 nace por fin HTML5, y se prevee que para 2012 se acepte como estándar.
Las necesidades actuales están en la línea de hacer que la experiencia de navegación sea más interactiva, que las páginas estén realmente enfocadas al usuario. HTML 5 ofrece muchas posibilidades que permiten convertir una página web en una aplicación web. Por ello no es de extrañar que se refieran a esta versión como a la versión de Aplicaciones web 1.0.
Estas aplicaciones están proliferando mucho en los últimos tiempos. Esto se debe, en gran parte, gracias al impulso que le están dando empresas poderosas como Google que está siguiendo una tendencia clara hacia el uso cada vez mayor de aplicaciones web. Su sistema operativo basado en la web (Chrome OS) prescinde totalmente de las aplicaciones de escritorio. Además, su navegador Chrome bajo Windows incorpora la posibilidad de instalar aplicaciones web en él, de modo que estas se asocien a los usuarios a través de su cuenta Google, y no en función del dispositivo desde el que se conecten.
Las nuevas etiquetas HTML de esta versión están muy enfocadas, además, a lograr una web semántica. Al etiquetar cada elemento de modo que quede perfectamente descrita su naturaleza, su contenido y la relación que guarda con el resto de elementos, facilitamos que se puedan tratar sus datos de un modo más automátizado. Veamos un ejemplo para entenderlo mejor: Si existe una etiqueta llamada <article> que contiene artículos de webs y blogs, es más sencillo crear un sitio web que se dedique a filtrar y mostrar clasificados los artículos de otras páginas en función de sus contenidos, porque le resultará más fácil identificarlos como tales.
¿Es difícil aprender HTML 5? En realidad no. La forma de trabajar es la misma que con anteriores versiones, el uso de las etiquetas y atributos es idéntico, y muchas de las etiquetas se mantienen. Eso sí, hay que adaptarse. Para sacarle el máximo jugo hay que manejar tanto HTML, como CSS y JavaScript. Si controlas estos tres lenguajes, adaptarte te resultará sencillo.
¿Cómo afectará esto a mi sitio web? Puedes decidir utilizar estas novedades, o seguir haciendo las cosas como las hacías hasta ahora, eso es una decisión que deberás valorar teniendo en cuenta el esfuerzo que te supondría actualizarte. Debes tener en cuenta que puedes introducir elementos de HTML 5 en tu página, conviviendo con elementos de versiones anteriores. Lo que sí que te recomendamos es que empieces a incorporar algunas de las etiquetas que ayudan a definir los elementos de la página, ya que en el futuro cada vez más aplicaciones y buscadores se valdrán de estas etiquetas; utilizarlas favorecerá tu posicionamiento y el acceso a tus contenidos.
Cuando hablamos de cambios no podemos dejar de mencionar los problemas que pueden ocasionar. En este caso el principal problema es que aún se está definiendo el lenguaje. Al no encontrarse estandarizado los navegadores aún no soportan al 100% sus novedades. Por lo tanto, antes de decidir implementar algo, es aconsejable que te informes de si esto generará problemas de compatibilidades. Desde luego, es cuestión de tiempo que el lenguaje se convierta en un estándar y los navegadores permitan todas sus funciones, como también lo es que los usuarios tomen consciencia de que deben mantener sus navegadores actualizados para disfrutar de todos los contenidos que la web les ofrece.
Como ejemplo puedes probar el divertido logo de Google en conmemoración a Les Paul. Está creado íntegramente utilizando estas tecnologías, algo que, hasta hace poco, habría sido impensable crear sin el uso de flash o java.
Observa que dependiendo de la cuerda que rasgues sonará una nota u otra. Puedes pulsar el botón de grabación y se guardará la melodía que interpretes. Al detener la grabación, Google te proporciona un enlace corto que te permitirá compartir dicha grabación con los demás. Si no funciona en tu navegador puedes actualizarlo.
En eso se resume HTML 5: permite la interacción del usuario y proporciona una experiencia muy similar a la que se obtendría con una aplicación de escritorio, pero sin necesidad de instalaciones.
La forma en que se crean páginas web ha cambiado, y ha cambiado para adaptarse a la filosofía que surgió con la aparición de la web 2.0. Para entender mejor estas tendencias y lo que suponen vamos a analizar los cambios que se han aplicado.
Las reglas básicas que se plantearon a la hora de actualizar a HTML 5 fueron:
Eliminación de etiquetas y atributos obsoletos o no deseables
Los 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 elementos
Se 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.
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:
Estas nuevas etiquetas proporcionan soluciones ante demandas existentes. Esto no quiere decir que deje de emplearse <div>, sino que deja de ser imprescindible para maquetar.
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.
Este es un ejemplo del uso de details.
El uso de estas etiquetas facilitará el trabajo a los buscadores, que podrán dar un mejor servicio al identificar en cada momento el tipo de contenido de la página web.
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.
Ver más sobre HTML5 en W3Schools
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.
Ver más sobre aplicaciones web 1.0 en WHATWG.
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.
Te invitamos a seguir informándote y viendo ejemplos que han compartido distintos desarrolladores en la red:
W3Schools: Breve tutorial sobre las nuevas características HTML5 e imprescindible listado de etiquetas, eventos y propiedades, descritas y con ejemplos.
Craftymind: Observa como, al hacer clic sobre un vídeo, este queda destrozado, pero aún así su reproducción continua incluso en los pequeños fragmentos. Esto es solo un ejemplo de las posibilidades de interacción que hay con las animaciones. También es posible redimensionarlas en tiempo real, hacer zoom sobre una zona en concreto, mostrar su reflejo en un efecto espejo, etc.
Akihabara: Juegos arcade en HTML5.
Splielzeugz: Curiosa animación de partículas que siguen el cursor.
Humble Software Development: Ofrece un ejemplo de cómo podemos crear animaciones a través del canvas, con lenguaje javascript.
HTML5Rocks: Ejemplo de página en HTML 5 que simula una presentación de tipo PowerPoint. En sus distintas pantallas, además, podrás informarte de las posibilidades del lenguaje. También disponen de una galería de ejemplos que te ayudarán a empezar a realizar tus primeros trabajos.
Apple: Algunos ejemplos de HTML5, para la promoción de dicha tecnología y su navegador Safari. También hay documentación dirigida a la formación de los desarrolladores.
HTML5 Demos: Algunos ejemplos más junto con información de los navegadores que soportan dichas tecnologías.
HTML5 Gallery: Es un sitio que enlaza y valora páginas web que utilizan dicha tecnología.
NewConcept: Propone una lista de sitios para aprender más sobre HTML 5.
Recuerda que todo está en Javascript, y que por tanto puedes ver el código fuente del ejemplo para saber cómo se ha hecho.
Cursos Informática Gratuitos Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.