Tus primeros pinitos con HTML5

HTML5 es la quinta versión del lenguaje HTML, regulado por el World Wide Web Consortium (3WC). Desde sus inicios en 1991, ha sufrido varias revisiones, pero ninguna lo suficientemente profunda como para asegurar la convergencia en el desarrollo web.

HTML5 apunta más alto que nunca y, desde que en 2004 se constituyó el Web Hypertext Application Technology Working Group para favorecer su desarrollo, sus integrantes y colaboradores trabajan con las expectativas de ofrecernos una versión práctica y adaptada a las necesidades reales de la Web del siglo XXI. Actualmente se halla en fase borrador, pero ya podemos encontrar numerosos recursos y algunas páginas desarrolladas con este estándar. ¿Es el momento de pensar en la migración? Cuando menos, es la hora de conocer la próxima realidad.

El actual borrador de HTML5 define un único lenguaje que puede ser desarrollado en sintaxisHTML o XML. En este artículo, nos centraremos fundamentalmente en el desarrollo de páginas en HTML, aunque con alguna referencia a elementos XML. También es importante apuntar que es compatible con documentos HTML4 y XHTML1, con la excepción de algunas características específicas del primero, como las instrucciones de procesamiento o la desaparición de los marcos.

A lo largo de este práctico aplicaremos las novedades de HTML5 al proceso de creación de una página web personal básica. Os recordamos que, hasta que el lenguaje se consolide, podéis experimentar problemas de compatibilidad con los navegadores. Si queréis conocer de antemano qué características soporta vuestro navegador favorito, os recomendamos que visitéis la página www.html5test.com. En PC Actual hemos utilizado las últimas versiones de Mozilla Firefox yGoogle Chrome para visualizar los ejemplos de código que os proponemos.

Paso 1. La estructura HTML5 básica

A la hora de enfocar un proyecto de desarrollo web, uno de los momentos cruciales es enfrentarse al fichero en blanco. A pesar de que los frameworks nos ahorran mucho trabajo sucio, no está de más volver de vez en cuando a los orígenes y aplicar técnicas de supervivencia del desarrollador frente al código puro y duro. Por tanto, abriremos nuestro bloc de notas e iremos experimentando con las novedades de HTML5.

Es útil recordar que es insensible a mayúsculas y minúsculas, aunque las buenas prácticas del programador no aconsejan su mezcla indiscriminada. La extensión de nuestro fichero para esta quinta versión seguirá siendo .htm o .html.

La primera novedad es que HTML5 nos lo pone más fácil desde la primera línea: el nuevodoctype queda reducido a <!doctype html>. Puede incluso ser memorizado, algo impensable en versiones anteriores. En cuanto al resto, la estructura general de nuestro documento no difiere mucho respecto a lo que ya conocíamos: utilizaremos las etiquetas <head> y <body> para la cabecera y el cuerpo, respectivamente.

Paso 2. Organización del espacio del site

El siguiente paso para crear nuestra web es definir su aspecto general. Veremos qué etiquetas debemos utilizar para organizar la división del espacio de nuestra página. En versiones anteriores de HTML, nos veíamos obligados a recurrir al uso y abuso de la etiqueta <div> y sus atributos, idclass, para llevar a cabo esta tarea. HTML5 da un paso más hacia la web semántica definiendo una serie de elementos para delimitar nuestras secciones.

A la hora de construir una web típica utilizaremos la etiqueta <header> para la información de la cabecera (logo, texto introductorio…), <nav> para los menús de navegación, <section> y<article> para organizar los contenidos principales, <aside> para los contenidos secundarios, como anotaciones laterales o espacios publicitarios, y la etiqueta <footer> para incluir la información a pie de web (año, autor, información legal, etc.).

Es importante resaltar que podemos utilizar varias veces estas etiquetas en una página. Por ejemplo, podemos definir una etiqueta <header> que contenga una imagen con nuestrobanner y otra como encabezamiento de una sección.

Crea en tu documento la división que desees y sustituye las antiguas etiquetas <div> por estas. No se trata de un capricho. Además de aportar claridad al código, las etiquetas semánticas cumplen una importante función: simplifican el análisis web que realizan los motores de búsqueda.

Paso 3. Organización de los textos

Una vez que tenemos clara la estructura, pasamos a crear los contenidos. Comenzaremos por los textos. HTML5 aporta etiquetas nuevas para organizarlos de manera más clara. Con la etiqueta semántica <article>, ahora es posible insertar bloques independientes de contenido, como artículos en un periódico digital o posts en un blog o foro.

Por ejemplo, si tomamos como modelo el sitio web de PC Actual, definiríamos una etiqueta<article> para cada entrada en su sección de noticias. Y, si queremos asociarlas como un grupo de contenidos de la misma temática, podemos utilizar <section>.

Otra novedad es <hgroup>, que permite agrupar un conjunto de elementos de encabezado en el rango de niveles <h1-h6>. Esto que en principio puede parecer trivial no lo es: la asociación y jerarquización de información facilitará la interpretación de los motores de búsqueda.

Por último, también contaremos con mayores facilidades de cara a la redacción de textos. Gracias a MathML, podemos usar cómodamentelenguaje matemático, símbolos y caracteres en otros idiomas e, incluso, lenguajes escritos de derecha a izquierda, como el árabe o el hebreo.

Paso 4. Dibuja con mayor sencillez

Una de las novedades estrella de HTML5 es el dibujo dinámico y renderizado de imágenes en una página web sin la necesidad de utilizar plug-ins. Hasta ahora, se empleaba generalmenteFlashSilverlight o grandes códigos de JavaScript, entre otras posibilidades. Para ello, HTML5 nos presenta la etiqueta <canvas>.

Su función es crear un lienzo de una determinada altura y anchura en el que podemos materializar imágenes y animaciones en 2D y 3D a través de funciones JavaScript. Para empezar a practicar os dejamos un código de ejemplo que reproduce un dibujo sencillo en 2D. Para verlo en tu navegador copia el siguiente script en la cabecera <head>:

<script>
function drawPicture(){
var canvas = document.getElementById(‘ejemplo’);
var context = canvas.getContext(‘2d’);
context.fillStyle = “rgb(255,255,0)”;
context.fillRect (125, 25, 150, 100);
context.fillStyle = “rgba(255,0,0, 0.6)”;
context.beginPath();
context.arc(125,100,50,0,Math.PI*2,true);
context.fill();
}
</script>

Para visualizar las formas geométricas del ejemplo, inserta en el cuerpo <body> la etiqueta <canvas>:

<body onload=”drawPicture();”>
<canvas id=”ejemplo” width=”300” height=”200”>
</canvas>
</body>

Y ya está. Habrás definido un lienzo de 300 x 200 puntos en el que hemos dibujado, en primer lugar, un rectángulo amarillo, y, después, un círculo rojo. Experimentando e investigando un poco podemos realizar figuras cada vez más complejas. En la Red, ya existen varios juegos programados en HTML5… ¡y algunos son verdaderas obras de arte!

Paso 5. ¿Qué echan hoy en la Web?

Otras de las grandes novedades de la versión 5 de HTML son las etiquetas <audio> y <video>, que nos permiten incrustar audio y vídeo de forma nativa. Ambas soportan los mismos atributos. Contamos con los modificadores booleanos (on/off) autobuffer y autoplay para cargar y reproducir, respectivamente, de manera automática un archivo, y el atributo loop para reiniciar la ejecución.

En cuanto al aspecto del reproductor, gracias a height y width podemos variar sus dimensiones y, a través de controls, mostrar o no los controles de reproducción. Por último, el atributo type nos permite especificar el tipo de fichero (.mp3.oog,.mp4.ogv, etc.) y src la dirección del archivo a cargar. En el caso de que queramos incrustar contenido externo, podemos hacer uso de otra nueva etiqueta:.

Veamos un ejemplo de aplicación: queremos construir un reproductor como el de la figura (ver imagen) para reproducir el fichero de vídeo pelicula.ogv. Basta incluir en nuestro documento la siguiente línea de código: <video src=”pelicula.ogv” type=”video/ogv” controls/>. Si tienes problemas de visualización, consulta la compatibilidad de tu navegador para ese formato.

Paso 6. La hora de los formularios

Son los grandes olvidados en las revisiones anteriores de HTML, pero presentan en esta versión muchas novedades. Seguimos utilizando el elemento input para la recogida de datos, pero se amplía sustancialmente su número de atributos y sus posibles valores, porque no solo de textos alfanuméricos vive el internauta.

El clásico atributo type ahora permite insertar una dirección web (<input type=”url”>), un teléfono (<input type=”tel”>), introducir una o múltiples direcciones de correo electrónico (<input type=”email”>), una contraseña (<input type=”password”>), una caja de búsqueda (<input type=”search”>) o una fecha (<input type=”date”>), entre otros.

Poder distinguir entre varios tipos de datos nos permitirá darles un tratamiento diferente. Podremos comprobar de manera sencilla si una dirección de correo electrónico es válida o si el número de teléfono introducido tiene los nueve números en principio requeridos.

Además de todas las posibilidades de type, contamos con otros interesantes atributos, comoautocomplete, para que el navegador rellene un campo de manera automática; placeholder, para mostrar un texto de ejemplo que desaparecerá cuando el usuario comience a rellenar el campo en cuestión; o autofocus, para dirigir la atención hacia un punto determinado del formulario.

Paso 7. Juega con los contenidos

Los navegadores permitirán de manera nativa y sin necesidad de librerías externas controlar las acciones Drag & Drop (arrastrar y soltar) sobre elementos que se puedan arrastrar como, por ejemplo, una imagen. Esto nos permitirá, entre otras cosas, dar la opción al usuario de nuestra web de reordenar los elementos para que la personalice a su gusto.

Por otra parte, gracias a la etiqueta <figure> y a su elemento hijo <figcaption>, a partir de ahora, podremos agrupar fácilmente elementos, como un vídeo o foto y su epígrafe. Simplemente escribiremos <figure><img src=”imagen.jpg”><figcaption> Epígrafe. </figcaption> </figure>.

Por último, con el atributo contentEditable, asignable a diversas etiquetas HTML5, podemos generar contenido editable. Especificando el valor true se activará el modo editable del elemento en cuestión y pasará a ser modificable por el usuario. Prueba a añadirlo en la etiqueta de un elemento de una lista <li contentEditable=”true”> o un pie de foto como en el ejemplo (Ver imagen). También tenemos la opción de aplicar esta propiedad a todo el documento con elatributo designMode.

Paso 8. Funciones avanzadas

En cuanto a funcionalidades un poco más complejas, HTML5 nos ofrece, por ejemplo, elalmacenamiento de datos del lado del cliente. El concepto es similar al relacionado con lascookies, pero con algunas ventajas: este estándar nos permitirá almacenar datos de mayor volumen y no será imprescindible el envío de la información al servidor, evitando el consiguiente consumo de ancho de banda y tiempo. En esta tesitura presenta tres formas de almacenamiento:localsesión o bases de datos.

Otra novedad es la posibilidad de crear aplicaciones web o una versión de nuestro sitio que funcionen off-line. Para ello crearemos un archivo manifest que incluiremos en el documento<html manifest=”codigo.manifest”> en el que debemos indicar nuestras preferencias sobre ladisponibilidad off-line.

Por último, también será viable localizar geográficamente al visitante con un alto grado de precisión. Para respetar la privacidad, la implementación deberá proveer un mecanismo que recoja el permiso explícito del usuario para acceder a los datos relativos a su ubicación.

Paso 9. CSS3: Hojas de estilo en cascada

CSS3 es la nueva versión del lenguaje CSS (Cascading Style Sheets) para especificar los detalles de presentación de los documentos HTML5. Hasta ahora teníamos que recurrir al uso de imágenes y otros trucos para dotar a nuestros sitios web de efectos no muy complicados, como sombrasdegradados y esquinas redondeadas, lo que dificultaba la compatibilidad con los navegadores.

Con las nuevas opciones de CSS3, aplicadas al ejemplo, podremos especificar directamente estos efectos y otros muchos en nuestra hoja de estilo. Con border-colorborder-image,border-radius y box-shadow es posible generar bordes de diferentes tipos.

También podemos jugar con el nivel de transparencia de nuestras imágenes con opacity, y contaremos con una gama más amplia de definiciones del color: HSLHSLARGBA CMYK. Incluso podremos establecer varias imágenes de fondo para un mismo elemento con multiple backgrounds.

En cuanto a los textos, con CSS3 será sencillo dotarlos de efectos como profundidad, reflejos o resplandores con text-shadow, hasta ahora reservados para programas como Photoshop y similares. Tampoco nos preocupará si la longitud de nuestros textos es excesiva, porque se podrá indicar el corte de palabras cuando se haya agotado el espacio de la línea con word-wrap.

Pero esto es solo un pequeño resumen. Echad un vistazo a la dirección www.w3.org/Style/CSSsi queréis ampliar esta información. CSS3 también se encuentra en fase borrador y las especificaciones del W3C no son definitivas, por lo que quizá contemos con alguna sorpresa de última hora.

Paso 10. Pensando en el futuro

HTML5 aún guarda algún as bajo la manga. Aunque actualmente es pronto para hablar de soporte por parte de los navegadores, está en proceso de definición de algunos elementos que podríamos calificar incluso de revolucionarios.

No queremos dejar pasar la oportunidad de mencionar la etiqueta <device>, que nos permitiráacceder a recursos del visitante, como una cámara web o una impresora. Las opciones van más allá y también será posible, por ejemplo, grabar en un fichero el audio recogido a través de un micrófono.

Las posibilidades de interacción entre la página y el usuario son enormes. Actualmente se debate acerca de qué dispositivos incluir, y se presentan como ideas los multimedia, los sistemas de archivos, los dispositivos RS-232 (como los puertos serie) y los USB. De momento, y a la espera de la versión de HTML5 definitiva, seguiremos experimentando con las nuevas etiquetas y asistiendo a la carrera por la compatibilidad de los navegadores.

Compatibilidad de los navegadores

En PC Actual os ofrecimos una comparativa de navegadores de Internet que contemplaba la compatibilidad con HTML5. Aquí tenéis un breve e interesante resumen: Mozilla Firefox(75,33%), Google Chrome 8 (72,33%), Opera 11 (62%), Safari 5 (56,57%), Maxthon 3(56,33%) e Internet Explorer 9 (33,67%). Si bien es cierto que esta clasificación puede orientarnos a priori, si realmente quieres experimentar con HTML5 lo más recomendable es que te hagas con las últimas versiones de toda la colección.

Todos los navegadores se actualizan continuamente, pero ninguno ha demostrado ser el líder indiscutible. Para ser más concretos, en el momento de escribir estas líneas todos siguen presentando grandes deficiencias en cuanto a la variedad de soporte de formatos de audio y vídeo. Si para tus pruebas multimedia utilizas ficheros .ogg u .ogv tendrás más posibilidades de acertar.

En lo que concierne a la integración de los formularios, Chrome 8 sigue siendo el rey. Y en cuanto a las características de almacenamiento local y las aplicaciones off-line, según elW3C todos han hecho los deberes.

Por último, cada navegador soporta un conjunto diferente de propiedades CSS3, por lo que dependerá de las necesidades concretas del desarrollador el decantarse por uno u otro, si bienFirefox y Safari se perfilan como los favoritos.

Guía de referencia rápida: Etiquetas HTML5

La siguiente tabla resume los cambios en el conjunto de las etiquetas que introduce el nuevo estándar respecto a la versión HTML4.01. Para acceder a la lista detallada y totalmente actualizada, así como a otros recursos, visita periódicamente la direcciónwww.w3schools.com/html5/html5_reference.asp.

Etiquetas nuevas de HTML5

  • <article>
  • <mark>
  • <aside>
  • <meter>
  • <audio>
  • <nav>
  • <canvas>
  • <output>
  • <command>
  • <progress>
  • <datalist>
  • <rp>
  • <details>
  • <rt>
  • <ruby>
  • <figcaption>
  • <section>
  • <figure>
  • <source>
  • <footer>
  • <summary>
  • <header>
  • <time>
  • <hgroup>
  • <video>
  • <keygen>
  • <wbr>

Etiquetas eliminadas de HTML4

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>
  • <tt>
  • <u>
  • <xmp>
Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s