HTML5 incorpora novedades muy interesantes para la creación de formularios. Estas novedades aumentan los tipos de controles (se añade un control para introducir una fecha o un correo electrónico) y las características que se pueden configurar (se puede definir un patrón de entrada o un placeholder) pero hay que llevar cuidado al usarlas, ya que no todos los navegadores las aceptan todas por ahora (pero sí que lo harán en breve).
En las siguientes lecciones se resumen las novedades principales y se muestran algunos ejemplos. Si quieres complementar y contrastar lo que se explica, te recomendamos la lectura de Formularios en HTML5.
HTML5 incorpora nuevas etiquetas semánticas que definen la estructura de una página web. En el siguiente vídeo se presentan estas etiquetas y se explica cómo transformar una página web de las versiones antiguas de HTML a la nueva versión HTML5.
En las versiones anteriores de HTML existían dos enfermedades terribles, la spanmania <span> y la divitis <div>. Estas enfermedades pueden seguir existiendo en HTML5, así que presta mucha atención a este vídeo, ya que te voy a explicar cómo las puedes evitar.
En la Web se pueden encontrar varios artículos que explican los síntomas de estas dos enfermedades y sus posibles curas.
Respecto el abuso en el uso de la etiqueta span, la spanmania, es muy común encontrar situaciones como esta.
O incluso a veces he visto barbaridades como esta otra, en la que se emplea un span para envolver todo el contenido de una página web.
Estos dos errores se arreglan fácilmente, ya que se pueden emplear las etiquetas que ya existen en el código y en muchas casos no hace falta añadir la etiqueta span.
Respecto a la etiqueta div, la divitis, es muy común encontrar situaciones como esta, en la que se anida un div dentro de otro div, y de otro div, y así varias veces.
Hay páginas web en las que se pueden encontrar verdaderas barbaridades, como la página principal de un famoso diario deportivo que tiene más de mil etiquetas div.
En HTML5 se han añadido etiquetas nuevas que ayudan a evitar el abuso de las etiquetas span y div.
Vamos a ver a continuación cómo se tienen que usar estas etiquetas para estructurar correctamente una página web con HTML5.
Esta imagen muestra la estructura típica de una página web escrita con las versiones anteriores de HTML. Esta página contiene:
Una cabecera.
Una barra o menú de navegación.
Un panel con información adicional, como por ejemplo noticias.
La zona de contenido principal formada por
dos entradas o artículos.
Una imagen en una de las entradas.
Y un pie de página.
Con HTML5, todas estas etiquetas <div> se sustituyen por nuevas etiquetas específicas para definir regiones especiales que tienen las páginas web.
La cabecera se etiqueta con header.
La barra o menú de navegación con nav.
Un panel con información adicional con aside.
La zona de contenido principal con main.
Las entradas o artículos con article.
Una imagen con figure.
Y el pie de página con footer.
En algún caso puede ser difícil decidir cuál es la etiqueta más adecuada para una región de una página web.
Esta imagen extraída de HTML5Doctor es un diagrama de flujo que, mediante varias preguntas, ayuda a decidir cuál es la etiqueta más adecuada según la función que realiza la región que se quiere etiquetar dentro de la página web.
A continuación vamos a ver parte por parte cómo se transforma una página web de una versión antigua de HTML a HTML5.
En primer lugar vamos a ver el código HTML de la cabecera.
Este es el típico código de una cabecera de una página web: un div y un h1.
En realidad, en muchos casos, simplemente es necesario el h1. Pero si por alguna razón, es necesario utilizar un div para definir algunas características de la presentación del encabezado, es mejor utilizar la nueva etiqueta header.
Ahora la barra o menú de navegación del sitio web.
Una barra o menú de navegación es un conjunto de enlaces. Por tanto, se debe etiquetar como una lista, ordenada o no ordenada. La etiqueta div que envuelve a la lista se debe cambiar por la etiqueta nav en HTML5.
Un panel con información adicional, contiene información que complementa a la información principal y que no es esencial. Por ejemplo, un panel de este tipo puede ser una región con noticias o anuncios.
Para este tipo de contenido se debe emplear la etiqueta aside en HTML5.
Vamos a ver a continuación cómo etiquetar la zona de contenido principal que está formada por una serie de entradas o artículos.
La zona de contenido principal que agrupa todas las entradas se puede etiquetar con main, y cada una de las entradas o artículos con la etiqueta article.
Respecto a las imágenes, esta es la forma tradicional de etiquetar una imagen. No existe ninguna relación entre una imagen y su título. Sin embargo, en HTML5 esto está resuelto, ya que existe la etiqueta figure y la etiqueta figcaption que permite definir el título de una figura.
Muy importante, la etiqueta figure no sólo se emplea para etiquetar una imagen. También puede etiquetar otras cosas, como un fragmento de código, o una cita.
Por último, el pie de página.
En el pie de una página web suele aparecer el correo de contacto, el aviso legal, la información de copyright o información similar.
En HTML5 se debe emplear la etiqueta footer para etiquetar este contenido.
Como ves, transformar una página web de HTML antiguo a HTML5 es muy sencillo, simplemente hay que aprender a utilizar la etiqueta adecuada para cada región de una página web.
Actividad
1
¿Qué etiquetas añade HTML5 para estructurar una página web?
¡Correcto!
2
La nueva etiqueta figure de HTML5 se emplea para
¡Correcto! Mucha gente cree que dentro de figure sólo se puede incluir una imagen, pero en realidad se puede incluir cualquier cosa, como una cita, un fragmento de código, una tabla, etc.
En el siguiente vídeo verás las principales tecnologías de la familia HTML5:
HTML5.
Canvas.
SVG.
Geolocalización.
Caché.
Base de datos.
Web workers.
Hoy en día, todo el mundo conoce las tres uves dobles, la World Wide Web, la Web, el invento que más ha cambiado nuestras vidas en los últimos 15 años.
La Web, es un sistema de distribución de información basado en hipertexto e hipermedia accesible a través de Internet.
Un elemento esencial de la Web es HTML, el lenguaje de marcado que se emplea para crear las páginas web. HTML permite describir la estructura y el contenido de una página web, principalmente texto, aunque también permite incluir otros objetos como imágenes y vídeos.
HTML5 es la quinta y última versión, por ahora, del lenguaje de etiquetado HTML. Sin embargo, como veremos más adelante, HTML5 no es sólo eso, es algo más.
HTML es un estándar de facto desarrollado por el World Wide Web Consortium, un consorcio internacional que produce recomendaciones para la World Wide Web.
El desarrollo del lenguaje de marcado HTML ha ido parejo al desarrollo del World Wide Web Consortium, que fue fundado en 1994.
Desde la publicación de la primera página web en diciembre de 1990, el lenguaje HTML ha ido mejorando con nuevas versiones. En noviembre de 1995 se publicó HTML 2.0.En enero de 1997 HTML 3.2. En diciembre de 1997 apareció HTML 4. Y en enero de 2000 se publico XHTML 1.0,una reformulación de HTML 4 utilizando XML.
Finalmente, a mediados de 2007 el W3C comenzó a trabajar en HTML5, versión que está actualmente en desarrollo y que se espera que se termine en 2014.
Pero las páginas web no se desarrollan solamente con el lenguaje de marcado HTML. También se emplean otras tecnologías como las hojas de estilo en cascada, la jerarquía de objetos DOM y el lenguaje interpretado JavaScript.
El uso combinado de estas cuatro tecnologías se conoce como DHTML, el HTML dinámico, que permite crear sitios web interactivos.
Además del HTML dinámico existen otras tecnologías, como el API de programación XHR, XMLHttpRequest, el metalenguaje XML y el formato de intercambio de datos JSON. Todo ello se conoce comoAJAX, una técnica de desarrollo web que permite crear aplicaciones interactivas que se ejecutan en el navegador.
Desde hace un par de años, a AJAX se le han unido una serie de nuevas tecnologías. Estas tecnologías están en desarrollo y en algunos casos existen varias alternativas que realizan la misma función.
A todas ellas se las conoce como HTML5, aunque lo más correcto sería llamarlas “la familia de tecnologías HTML5”.
Veamos que nos ofrece cada una de ellas.
HTML5 es el nuevo lenguaje de marcado que se ofrece con dos sintaxis: sintaxis de HTML y sintaxis de XHTML.
Como he dicho antes, se espera que en 2014 se publique la versión final, ya que lo que tenemos ahora mismo es un borrador.
El lenguaje de marcado HTML5 define nuevas etiquetas y atributos que añaden una mayor capacidad semántica al lenguaje.
Una de las nuevas tecnologías de la familia HTML5 es el canvas, que tiene asociada una nueva etiqueta HTML.
El canvas o lienzo permite definir un área dentro de una página web en la que se puede dibujar mediante un API para JavaScript.
Las posibilidades que ofrece esta tecnología son enormes. Por ejemplo, permite el desarrollo de juegos online, ya no es necesario el uso de Flash, o permite crear aplicaciones de dibujo como esta que vemos en esta imagen.
Otra de las tecnologías de HTML5 es SVG, un lenguaje de etiquetas basado en XML que permite crear gráficos vectoriales.
Con SVG se pueden crear gráficos utilizando un lenguaje similar a HTML.
Otra de las tecnologías de la familia HTML5 es el API de geolocalización para JavaScript, que permite obtener la localización del usuario, siempre que el dispositivo que utilice ofrezca esa información y siempre que el usuario lo permita.
La tecnología de CACHEpermite indicar aquellos recursos de una página web o una aplicación web que se desea que se almacenen de forma local. De esta forma se mejora el rendimiento y además permite descargar todos los contenidos necesarios y trabajar en local.
Mientras que la tecnología de base de datos es un API que ofrece la posibilidad de almacenar información en local en el navegador mediante una base de datosSQL Lite.
Con esta tecnología se pueden realizar aplicaciones como ésta, donde el usuario puede crear notas persistentes que conservan la posición y la información aunque se abandone la página web.
Por último, los WEB WORKERS es otra API para JavaScript que permite crear múltiples hilos de ejecución que se ejecutan en paralelo.
Ahora bien, de todas estas tecnologías, ¿cuáles podemos utilizar hoy en día?
Es difícil responder esta pregunta, porque existen múltiples navegadores con múltiples versiones, cada uno con un nivel de soporte diferente. Pero hay algunos sitios web que nos pueden ayudar.
Por ejemplo, el sitio web “When can I use…” ofrece tablas de compatibilidad de HTML5, CSS3, SVG y otras características en diferentes navegadores y diferentes plataformas.
El sitio web “findmebyIP” ofrece los niveles de compatibilidad de diferentes navegadores en Windows y Macintosh.
Este mismo sitio web también nos permite conocer el nivel de compatibilidad de nuestro navegador, ya que lo detecta automáticamente y nos muestra las características de HTML5 que admite.
El sitio web “The HTML5 Test” también permite conocer el nivel de soporte de nuestro navegador y de otros navegadores. Se diferencia de los anteriores porque ofrece una puntuación, lo cual hace que las comparaciones entre navegadores sea más sencillas.
Por último, si quieres aprender más cosas sobre HTML5, te recomiendo el sitio web “HTML5 Rocks” desarrollado por Google.
En él encontrarás numerosos ejemplos y tutoriales que te mostrarán las fantásticas posibilidades de HTML5.
Actividad
¿Qué es JSON?
¡Correcto! JSON significa JavaScript Object Notation y se emplea para serializar estructuras de datos en JavaScript.
2
¿Qué es AJAX?
¡Correcto! AJAX significa Asynchronous JavaScript And XML y permite crear páginas web en las que cambia su contenido sin que se tenga que recargar la página.
3
¿Que nuevas etiquetas o tecnologías podemos usar en HTML5?.
