Este es un texto publicado en la edición 291 del 1 de Septiembre de 2009 de Alist apart versión en inglés http://www.alistapart.com/articles/get-ready-for-html-5/ por J. David Eisenberg para A list apart.
Traducido al español por Federico Reinoso para IMGDigital

Con el soporte en Chrome, Firefox 3.5, Opera, y Safari, el HTML 5 está llegando a Uds como un tren desbocado. Aquí hay algunas sugerencias para ayudarlos a prepararse para subirse, antes que este deje la plataforma y los deje.

Mirar lo que hicieron otros

Lo primero que pueden hacer para prepararse para el HTML 5 es mirar como lo estan usando otras personas. Una visita a la galería HTML 5 les mostrará como varios sitios ya están usando los nuevos elementos HTML 5. ¡Usa la fuente Luke!

Ahora hacelo vos.

Podés mirar los sitios, leer todos los artículos aquí y en cualquier parte, hasta podés leer las especificaciones – pero nada de todo este te ayudará a entender HTML 5 como el hecho de usar los nuevos elementos.  Podés modificar parte de un sitio existente o experimentar creando nuevas páginas. Yo lo hice actualizando el relato de un viaje que hice para mis amigos y familia. (Nunca fue pensado para ser mostrado en público, pero ahí lo tienen)

Haciendo esto, te darás cuenta que funciona y que no. Por ejemplo, descubrí  esto mientras escribía que, Firefox 3.5 maneja los elementos como article y section como display:inline, y tuve que asignarles los a display:block para que funcionen como se esperaba.

La X marca el lugar

Si sos como la mayoría de los diseñadores, probablemente no escribas tu código a mano. Pero hasta que las herramientas habituales se actualicen a los nuevos elementos en (X)HTML 5, deberás hacer algo de la codificación a mano mientras aprendés. Hay algo de confusión (¡y controvercia!) acerca de la relación entre HTML 5, XHTML 1.0/1.1, and XHTML 5. Clarifiquemos esto ahora mismo.

HTML 4.0 (el código que todos conocemos y amamos) está basado en un “reglamento” llamado SGML. En el reglamento del SGML, los nombres de los elementos no tomaban en cuenta como se escribían (mayúsculas o minúsculas) podés tener elementos que opcionalmento deben ser cerrados (como <p>) y se puede poner valor a los atributos sin tener que “envolverlos” entre comillas. XHTML 1.0 y 1.1 están basados en XML. En XML, los nombres de los elementos y atributos son sensibles a la manera de escrinirlos (mayúsculas y minúsculas) y cada tag abierto, debe tener un cierre y los valores de los atributos deben estar entre comillas.

HTML 5 define una demarcación que no está basada en ninguna de las anteriores, pero puedes ser escrito en un “formato tipo HTML” (o serializarlo, como dicen las especificaciones ) o en un “formato XHTML” .

Cuando uno escribe código HTML, estás autorizado a dejar afuera algunas de las tags de cierre (¡y algunas de apertura!) no necesitas entrecomillar los valores de los atributos si estos no tienen espacios, y los elementos y los nombres de los atributos no diferencian mayúsculas y minúsculas. También obtenemos algo de la codificación XML; podemos poner una “barra” en elementos tales como <img /> or <hr />.

Cuando usamos la serialización XHTML, debemos seguir las reglas del XML mencionadas anteriormente.

Te sugiero que escribas el código en XHTML 5, o, si usas HTML 5, escribas como si hicieras XHTML. Hay que quedarse lejos del standard XML que pide cerrar los tag de cada tag abierto en lugar de perder el tiempo optimizando el código cerrando tags que tienen cierres opcionales y/o aperturas. Igualmente, entrecomillá todos los valores de los atributos en lugar de ponerte a pensar cuales llevan y cuales no. Como agregado el evitar pensar en todas estas cosas no sólo hará que sufras menos dolores de cabeza, sino que además tu código será mas consistente.

Una vez que los programas se pongan al día con su generación de código, vas a preferir que generen XHTML5 en lugar de HTML 5. El uso del XML es mirar hacia el futuro; sus características te permiten a generar “documentos políglotas” que consisten en múltiples formatos más allá de RDFa, MathML, y SVG de HTML 5. También puedes usar herramientas como  XPath, XSLT, y XQuery en tu código basado en XML, usando cualquier procesador XML (aunque hay un procesador en Java que trabaja con HTML 5).

Por su puesto, no todo son buenas noticias. Si te abocas al HTML 5, acordate que tu servidor debe devolver los documentos en el formato MIME de application/xhtml+xml o text/xml. Esto puede que tengas que negociarlo con tu compañía de hosting. También, cuando recibas un archivo XML, cualquier error de sintáxis va a causar un mensaje de error.

Fig. 1. Error de proceso XML por tags desparejas.

Si estás escribiendo tu código a mano, tomá estos mensajes como una manera de mantenerte en orden. Si estás usando algún programa que crea XHTML, entonces no hay problema; estas herramientas siempre suelen producir XML bien nivelado.

Expresiones Regulares

El HTML 5 extiende el elemento input dándole nuevos atributos que te permiten especificar que datos vas a permitir como entrada. Estos atributor incluyen min y max (para dar un rango numérico), y HTML 5 también ofrece nuevos valores para el atributo type, como url, email, date (fecha), y time (hora)

Si ninguno de estos nuevas clases se adapta a tus necesidades, HTML 5 provee del atributo pattern para los elementos input con el type="text". El valor para el atributo  pattern es una expresión regular, como las definidas en ECMAScript y usadas en JavaScript. Las Expresiones Regulares son una manera consistente y quizás algo crípticas de hacer un pattern de caractéres. Por ejemplo si necesitás hacer coincidir un grupo de cinco dígitos o nueve dígitos del código postal de USA o el de seis caracteres de Canadá, puedo usar el siguiente pattern:

([0-9]{5}(-[0-9]{4})?)|([A-Z][0-9][A-Z]\s+[0-9][A-Z][0-9])

Las nuevas capacidades de los formularios web han sido parcialmente implementadas en Safari y Chrome y por completi en Opera (mirar este sitio para ver las posibildades de cada navegador). No te preocupes si u navegador no soporta las extensiones a HTML 5 al form; podés descargar el Google’s Web Forms 2 y estás listo para hacerlo andar!

Aca hay un ejemplo de un formulario que valida la fecha y el código postal:

Y aquí el código correspondiente:

<p>
Enter a date: <input type="date" name="day"
required="required"
title="Use format yyyy-mm-dd" />
</p>

<p>
Enter a US or Canadian Postal Code:
<input type="text" name="postCode"
required="required"
pattern="([0-9]{5}(-[0-9]{4})?)|([0-9][A-Z][0-9]\s+[A-Z][0-9][A-Z])"
title="US: 99999-1234; Canadian: 0A1&#160;B2C" />
</p>

Aprender Expresiones regulares es algo que bien vale la pena tomarse el tiempo de aprender. Muchos editores de texto ofrecen expresiones regulares integradas en su sistema de búsqueda y reemplazo, y cuando empezás a usarlas, te vasa preguntar como fuiste capaz de vivir sin ellas.

Arte estático con SVG

Fig. 2. Imagen de SVG mostrando formas coloreadas.

Si lo que buscas es dibujos vectoriales de bordes definidos, HTML 5 les permite poner  SVG (Scalable Vector Graphics) en sus documentos. Colocar SVG embebido está parcialmente implementado en Firefox, Safari, y Opera, de acuerdo con este sitio.

Podés linkear a un archivo SVG en Firefox 3.5. Ese gráfico es un poquito complejo —acá hay uno mucho más simple (vea Fig. 2) mostrando algunas formas coloreadas.

Y aquí está el SVG que genera:

<svg xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 100"
width="200px" height="100px">

<circle cx="50" cy="50" r="30"
    style="stroke:none; fill:#ff0000;"/>

<g transform="translate(100, 20) scale(1.65)">
    <polygon points="36 25, 25 36, 11 36, 0 25,
        0 11, 11 0, 25 0, 36 11"
        style="stroke:none; fill:#0000ff;" />
</g>

<rect x="60" y="20" height="60" width="60"
    style="stroke:none; fill:#00ff00;
    fill-opacity: 0.5;" />
</svg>

Aunque es posible usar JavaScript para dinámicamente modificar un gráfico SVG, HTML 5 provee una solución mejor:

El canvas (lienzo) en blanco

El elemento  canvas es uno de las mas exitantes  caracaterísticas del HTML 5, y es soportado por Firefox, Safari, Opera, y Chrome—pero no por Internet Explorer. (que raro…) El elemento canvas es verdaderamente una característica avanzada. Puedes usar Javascript para dibujar lo que quieras (literalmente) en este lienzo en blanco.

Aquí va el gráfico SVG del ejemplo, usando sólo canvas:

Y aquí está el JavaScript que lo fabrica (con multiples estadíos por línea para ahorrar espacio):

function drawSimpleCanvas() {
  var canvas =
    document.getElementById("simpleCanvas");
  if (canvas.getContext) {
    var ctx = canvas.getContext("2d");

    ctx.beginPath(); // the circle
    ctx.fillStyle = "#ff0000";
    ctx.arc(50, 50, 30, 0, 2*Math.PI, true);
    ctx.closePath();
    ctx.fill();
    ctx.save();

    // move and resize the octagon
    ctx.translate(100, 20);
    ctx.scale(1.65, 1.65);
    ctx.fillStyle = "#0000ff";
    ctx.beginPath();
    ctx.moveTo(36, 25); ctx.lineTo(25, 36);
    ctx.lineTo(11, 36); ctx.lineTo(0, 25);
    ctx.lineTo(0, 11); ctx.lineTo(11, 0);
    ctx.lineTo(25, 0); ctx.lineTo(36, 11);
    ctx.closePath();
    ctx.fill();

    // restore graphics as they
    // were before move and resize
    ctx.restore();
    ctx.fillStyle = "#00ff00";
    ctx.globalAlpha = 0.5;
    ctx.beginPath();
    ctx.rect(60, 20, 60, 60);
    ctx.closePath();
    ctx.fill();
  }
}

Acá hay un <canvas> que demuestra el uso de una simple interacción del usuario:

Normalmente, vas a usar un canvas para mostrar gráficos que acompañen tu contenido.  Por ejemplo, decir “el propos” For example, saying “la media de un grupo de números es el ‘centro de gravedad’ de este grupo” está bien, pero usar un elemento  canvas con un JavaScript que le permite al lector ingresar un grupo de números y mostrarle que significa el “punto de inflección” es mucho más efectivo.

Sorry, but your browser does not support
<canvas>

Igrese números, separados por comas o espacios:

Estos ejemplos ni siquiera empiezan a mostrar la finalidad  y capacidad del elemento canvas. Vea el  Tutorial de Canvas en el sitio de Mozilla para una introducción mas profunda como asi también links de ejemplos.

¿Qué estás esperando?

Así como algunos desarrolladores tienen sus reservas acerca de la dirección en la que el HTML 5 está tomando en la web (y aunque comparto estas reservas), HTML 5 tiene suficientes razones para que valga la pena esplorarlo. Entonces, empezá a mirar lo que otras personas han hecho, experimentá vos mismo, y volvete un poco loco con las nuevas medidas de validación de formularios y las ventajas del canvas.