Introducción a HTML5.

Introducción a HTML 5.


0. Índice de contenidos.


1. Introducción

En este tutorial vamos a realizar una breve introducción a las novedades que traerá la versión 5 de html. Sí, el título está bien escrito, hablamos de html, aunque también habrá la correlativa versión en xhtml, las diferencias entre ambas solo vendrán dadas por las restricciones típicas de un documento xml bien formado.

Visto lo anterior, lo primero que debemos saber es que no se trata solo de una actualización de la colección de marcas que podemos utilizar dentro del etiquetado de nuestras páginas. En versiones anteriores, frente a una nueva especificación, o al pasar a xhtml, las diferencias con las versiones anteriores venían dadas por la supresión de etiquetas en desuso y la incorporación de nuevas etiquetas que ampliaban funcionalidad. La nueva versión del estandar, además de lo anterior, viene de la mano de nuevas y muy interesantes características, como las que veremos a continuación.

Lo que debe quedar claro es que estas características, como la estandarización de CSS3, geolocalización, soporte de audio y video o la ampliación de los métodos de acceso al árbol DOM en javascript, no son estictamente del estándar HTML5, pero se asocian con la nueva versión, le dan mucha más potencia y la hacen mucho más atractiva.



2. A nivel de etiquetado.

Tenemos las siguientes características destacables:

  • Nuevas etiquetas:
    • hay una etiqueta específica para el menú de navegación, nav
    • hay etiquetas para distinguir secciones y artículos, pensadas para páginas de noticias o blogs, section y article
    • por fin hay un footer, siempre escribiendo la cabecera y hasta ahora no teníamos pie de página.
    • pero también hay un header, distinto del head, que serviría para insertar contenido visible en la cabecera de la página,
    • mark, indicará un texto resaltado,
    • time, indica una fecha u hora,
    • meter, representa un valor numérico,
    • progress, indica el estado de una tarea, lo que es una barra de progeso,
  • Nueva colección de tags que añaden contenido semántico:
    • aside, anotaciones que complementan el texto pero quedan fuera del texto,
    • figure, se podrá asociar contenido multimedia a un título o legend,
  • Nuevos tipos de componenentes de formulario:
    • input type=”date | time | email | url | tel | search | …”, que permite introducir distintos tipos de contenidos produciendo una validación automática de los mismos, como un email válido; los input de selección de fecha y hora se pueden convertir en un date picker en función del navegador,
    • validación de campo requerido mediante el atributo required, así como mínimo y máximo,
    • input spinner, a través del atributo step y type,
    • sliders, a través de type=”range”
    • validaciones con expresiones regulares
    • restricción de valores en un input a través de un dataList
    • el atributo placeholder permitirá asignar un texto por defecto sombreado a los inputs (el típico de Google en el campo de búsqueda de firefox),

Hay etiquetas que han caido en desuso y otras características también interesantes que no he incluido, podéis consultar todas las etiquetas en forma de tabla periódica en el siguiente enlace

  • http://joshduck.com/periodic-table.html

    A continuación un ejemplo de documento html5:



    3. A nivel de javascript.

    Tenemos las siguientes características destacables:

    • nuevos métodos de acceso a los nodos del árbol DOM que incorporan las facilidades que, hasta ahora, solo teníamos con librerías de javascript como prototype.js o jQuery. Son métodos como:
      • document.getElementsByClassName: que permite recuperar todos los nodos del árbol DOM con el mismo estilo de clase,
      • document.querySelectorAll y document.querySelector: viene a sustituir lo que en jQuery es la propia función jQuery o el alias $, heredado de prototype, que permite realizar consultas al árbol DOM para recuperar nodos con distintos selectores o combinación de los mismos,
  • soporte drag & drop nativo.
  • web storage o almacenamiento local de datos, que viene a solventar las limitaciones de almacenamiento de las cookies, permitiendo almacenar mucha más información en el cliente dando pie a trabajar con aplicaciones web como si fuesen aplicaciones de escritorio en modo offline, para ello también disponemos de un API de caché que permite indicar a través de un fichero de manifest, qué recursos deben ser cacheados,
  • existirá la posibilidad de disponer de bases de datos SQL en cliente, ¿habíais pensado alguna vez en la posibilidad de tener que escribir sentencias SQL en javascript?, pues si; ¿que será lo siguiente? ¿cuánto tardaremos en tener una versión de hibernate para javascript? ;-),
  • geolocalización: mediante una simple invocación a un método javascript nativo, podremos obtener la localización del equipo cliente, previa aceptación del usuario a facilitar dicha información,
  • web workers: permite la ejecución de scripts en segundo plano, son procesos de larga duración y pueden consumir mucha memoria que hasta ahora se podían implementar con la función window.setTimeOut(). Los workers tienen las siguientes ventajas: se ejecutan en threads separados, de forma concurrente, no bloquean la interfaz de usuario, pueden ser dedicados (al tab) o compartidos por varios tabs o por la ventana e, incluso, podrían persistir al cierre de la misma.
  • web sockets: es la implementación de la comunicación bidireccional entre el cliente y el servidor, lo que podemos denominar push o comet, y que antes hacíamos con Ajax a través del objeto XMLHttpRequest. Con HTML5 ya no será necesario su uso puesto que provee de un mecanismo estándar para realizar dicha comunicación invocando directamente a un método send() que remitirá la información al servidor.
  • notificaciones: huyendo de los alerts, permiten notificar al usuario eventos que se producen en una ventana fuera del navegador, con lo que, aunque esté minimizada la misma se mostrarán al usuario,


  • 4. Soporte para media.

    • Soporte para audio y video: que nos permitirá insertar contenido media sin necesidad de hacer uso de flash,

      Es bastante interesante la compatibilidad con navegadores con versiones anteriores, de modo que si el navegador no soporta html5 se renderizará el contenido de las etiquetas, en el que se podría introducir, por ejemplo, un plugin en flash que proporcione el mismo soporte de audio o video.

    • Posibilidad de acceso a los dispositivos de micro y webcam, que nos permitirán:
      • mostrar el video al propio usuario,
      • grabar el video y audio,
      • enviar y recibir imágenes de la webcam,
    • svg: renderización de gráficos en función de un documento SVG (Scalable Vector Graphics),
    • canvas: nos permitirá renderizar imágenes sin necesidad de plugins, generando de forma dinámica el contenido a través de javascript , y es el elemento de la polémica, en el que muchos han visto la muerte del flash, como hasta ahora lo conocíamos,


    5. Soporte para css3.

    Tenemos las siguientes características destacables:

    • un estilo nativo para esquinas redondeadas, gradient y sombreado.
    • será posible utilizar cualquier tipo de fuente, no solo las que tenga instaladas el cliente. Para ello, bastará con añadir al estilo la url de la tipografía, del ttf.
    • text wrapping con mayor parametrización que permite por ejemplo incluir puntos suspensivos…
    • opacidad estándar en todos los navegadores,
    • soporte para transiciones entre estilos basadas en el concepto análogo de jQuery, con un periodo de cadencia,
    • animaciones, al estilo de las que disponemos con script.aculo.us para prototype.js o con jqueryUI para jQuery.

    6. ¿Una página de ejemplo?.

    Lo primero que debemos conocer es que el DOCTYPE de HTML5 es el siguiente:

    El DOCTYPE es lo que diferencia las versiones de los documentos html, y define el contrato que deben seguir los documentos XML en general. En HTML5 es sencillo, no hay referencia a DTD, de modo que los navegadores que no lo soporten harán uso de su versión de html por defecto.

    Me voy a remitir en este punto a la página de ejemplo que ha generado la gente de Google para explorar las capacidades de HTML5 y que se usó en el reciente Google D3vF3st de Madrid para demostrar la compatibilidad de Google Chrome con el estándar; por esto último la recomendación, hoy día, es verla con Google Chrome.

    http://www.html5rocks.com/en/slides

    También es buena recomendación:

    http://html5demos.com/

    donde se puede ver la compatibilidad hoy día con los navegadores.



    7. ¿Cuál es el estado actual de la especificación y las implementaciones?.

    La especificación está aún en borrador, aunque sufrirá ya pocas modificaciones y, si bien en el arranque se barajaban como fechas para tener las primeras implementaciones 2012 e incluso 2022, los navegadores soportan ya bastante del estándar, algunos más que otros. La idea es que la especificación se cerrará cuando haya, al menos, dos implementaciones completas del estándar, esto es, dos navegadores que la soporten al 100%.

    Para saber qué de compatible es tu navegador favorito con HTML5, puedes visitar la siguiente página: http://www.html5test.com.

    ¿Comenzaríamos ahora a desarrollar basándonos en HTML5?, si no fuese una aplicación para internet y tuviesemos poder de decisión sobre qué navegador tendrá instalado el cliente, sí. Podríamos decir que estamos en un primer estadio de la tecnología y que si lo pillamos a tiempo nos podemos subir al carro y estar preparados para cuando esté maduro.



    8. Referencias.



    9. Conclusiones.

    Como os podéis imaginar, esta breve introducción da pie a muchos más tutoriales sobre cada una de las nuevas características de HTML5, iremos poco a poco sumergiéndonos en ellos.

    Siempre intentaremos no tener que bajar a nivel del lenguaje de cliente para desarrollar, porque es más dificil depurar, siempre estaremos a expensas de cómo se comporte el código en los distintos navegadores,… que os voy a contar, que no sepáis, a los que habéis estado trabajando los últimos años con interfaces|documentos web.

    La esperanza es que tendremos librerías de componentes visuales que nos den soporte a las nuevas características, las librerías de componentes JSF se terminarán adaptando y, para los que trabajen con Spring MVC ya hay una primera implementación basada en HTML5 de un proyecto llamado Summer, como la continuación del Spring 😉

    Un saludo.

    Jose

    jmsanchez@autentia.com