Ya cada vez son más los navegadores que soportan HTML5; como si fuese poco, cada vez son más los dispositivos capaces de correr esos navegadores. Sin embargo no todos los navegadores soportan completamente; algo completamente necesario cuando uno va a poner esfuerzo en desarrollar una página web.
No tiene sentido utilizar la última tecnología si, además, hay que volver a implementar todo con otras tecnologías para aquellos que no soportan esto último. Directamente hacemos una sola implementación y listo; menos problemas para todos. Pero siempre hay un punto medio; ese punto en el que podemos sentir que estamos haciendo las cosas como corresponde y hacer que funcione en todos lados no requiere volver a hacer todo de nuevo.
Gracias a Anieto2k, me entero del libro “Dive into HTML5″ (Sumergirse en HTML5), siendo escrito por Mark Pilgrim. Por lo poco que leí aparenta estar escrito justamente con eso en mente. Aprender los recovecos necesarios de HTML5, pero siempre teniendo en cuenta aquellos que todavía no soportan esta tecnología. En particular, los avances en formularios web permiten muchas cosas nuevas con un mínimo de esfuerzo; cosas que no alteran la funcionalidad de nuestras páginas, que se integran de forma transparente y – en aquellos navegadores que lo tienen en cuenta – inclusive proporcionan beneficios en usabilidad para el usuario.
De todas las cosas nuevas que hay, me voy a limitar a aquellas que podemos empezar a usar ahora sin molestar a nadie o con poco esfuerzo. Aquellas que no tenemos excusas para no usar.
Atributos nuevos para input
Texto temporal
Muchas veces, queremos incorporar las etiquetas asociadas a los campos de texto en el mismo campo de texto. Porque quedan bien, o porque ocupan menos espacio o simplemente queremos dar un ejemplo que tiene que desaparecer cuando el usuario quiera ingresar texto… sin molestarlo demasiado.
HTML5 agrega un nuevo atributo a los input que hace exactamente eso: placeholder; soportado actualmente por Chrome y Safari. Aquellos navegadores que no lo soportan, simplemente lo ignoran. Tan sencillo como eso
<form>
<input name="busqueda" placeholder="Buscar en Favoritos y el Historial" />
<input type="submit" value="Buscar" />
</form>
Foco automático
Si tenemos más de un formulario en una página, seguro que tenemos algún tipo de javascript asociado a la misma que deja el cursor en alguno de los campos para que el usuario comience a tipear cómodamente. Inclusive Google lo hace en la página principal de su buscador.
No más. HTML5 incorpora el atributo autofocus, soportado por Chrome, Safari y Opera. Nuevamente, aquellos que no lo soportan simplemente lo van a ignorar, y proveerles la misma funcionalidad es tan simple como 2 líneas de JavaScript.
<form name="f">
<input id="busqueda" autofocus />
<script>
if (!("autofocus" in document.createElement("input"))) {
document.getElementById("busqueda").focus();
}
</script>
<input type="submit" value="Buscar" />
</form>
En el libro explican que el script va junto con el campo para evitar demoras ya que el evento window.onload espera hasta que las imágenes terminen de cargar; lo que seguramente suceda después que termina de mostrarse la página y probablemente después que el usuario haga click y ya haya comenzado a tipear. Si no se puede poner allí tampoco, es preferible utilizar el evento $(document).ready().
Nuevos tipos de input
HTML5 agrega nuevos tipos de input además de los ya existentes. Todos gozan del mismo beneficio, en aquellos navegadores que no está soportado aparecen como un campo de texto común y corriente. Estructura que hubiésemos usado de todas formas así que no hay cambio alguno. Además, la regla de validar cualquier dato ingresado por el usuario sigue en pie así que no hay ningún otro cambio que hacer al sistema por detrás.
Sólo cambiar el tipo de input no nos afecta en nada pero puede dar grandes beneficios a los usuarios de nuestro sitio.
E-mail
Un tipo simple y que no tiene demasiada relevancia actualmente. Crear un input con tipo email no hace prácticamente ninguna diferencia al momento de escribir este artículo. Se ve igual a cualquier otra caja de texto, se comporta de la misma forma y todo.
Salvo para usuarios de iPhone, a los que el teclado que les aparece en pantalla al tener que ingresar texto en unos de estos campos está especialmente modificado para direcciones de mail. No hay muchas diferencias salvo tener el punto y la arroba más a mano en lugar de la barra espaciadora (nunca vi un espacio en una dirección de mail).
Ah, y Opera pone un icono de e-mail en la caja de texto.
<form>
<input id="mail" type="email" />
<input type="submit" value="Mandame spam!" />
</form>
URLs
De forma similar a las direcciones de mail, tenemos ahora los input con tipo url. Que, al igual que el anterior, no conlleva ningún comportamiento o interfaz especial… salvo en el iPhone. Este último cambia el teclado mínimamente para mayor comodidad. Se nota que pensaron en todo.
<form>
<input id="mail" type="url" />
<input type="submit" value="Mi sitio con adsense" />
</form>
Números
¿Cuántas veces necesitamos que los usuarios ingresen un número con características muy particulares? HTML5 nos permite ayudar a nuestros usuarios a no elegir valores inválidos. No estamos excemptos de tener que verificalo luego, pero mejor si disminuimos la posibilidad de error e inclusive si documentamos gran parte de los valores posibles dentro del mismo control HTML (para poder hacer validación dinámica con JavaScript sin necesidad de leer configuraciones extras).
Así, tenemos a nuestra disposición no sólo uno sino dos tipos de input para eso: number y range. Además de toda una serie de atributos para configurarlos:
- min: el menor valor posible
- max: el máximo valor aceptado
- step: diferencia entre un número válido y el siguiente (entre el máximo y el mínimo)
- value: el valor por omisión, igual que antes
Lo que es más – y por el mismo precio – HTML5 pone a nuestra disposición 3 métodos javascript sobre el tipo number: stepUp(n) ara incrementar el valor en n, stepDown(n) para disminuir el valor en n y valueAsNumber para obtener el valor como un número en punto flotante (el atributo value es siempre una cadena de texto).
¿Cuál es la diferencia entre un tipo y otro entonces? range está pensado para ser mostrado con un cursor desplazable sobre una recta – así mostrado por las últimas versiones de Safari, Chrome y Opera. number como algo más simple. El iPhone los muestra a ambos como cajas de texto pero modifica el teclado para que sea más sencillo ingresar números. Opera muestra dos botones extras para aumentar y disminuir los valores al lado de las cajas de texto de tipo number. El resto, muestra una simple caja de texto, como hubiese sido de otra forma.
<form>
<input id="sueldo" type="number"
min="1000"
max="2000000"
step="500"
value="2000" />
<input type="submit" value="pagame!" />
</form>
Fecha y hora
¿Cuántas veces se enfrentaron con el problema de necesitar que el usuario ingrese una fecha o una hora? Es un infierno; por la cantidad de formas distintas que hay para hacer tan simple tarea, complicada aún más por las variaciones que hay entre culturas e idiomas y todo un mundo con 24 zonas horarias distintas.
HTML 5 al rescate, agrega 6 nuevos tipos de input a nuestra disposición para esta tarea:
date: una fechamonth: sólo el mes y año de una fechaweek: alguna semana del añotime: una hora determinadadatetime: fecha, hora y zona horariadatetime-local: fecha y hora sólamente
Lamentablemente todos estos tipos nuevos son soportados – al momento de escribir esto – sólo por Opera. Pero creo que es uno de los agregados más útiles que puede haber. Nuevamente, hasta que se implemente el soporte adecuado. se puede utilizar nuestro framework JavaScript preferido para proveer de la misma funcionalidad al resto de los navegadores.
<form>
<input id="semana" type="week" />
<input type="submit" value="vacaciones!" />
</form>
¿Por qué siguen leyendo? ¡Empiecen a actualizar sus páginas, themes y sitios varios!