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 fecha
• month: sólo el mes y año de una fecha
• week: alguna semana del año
• time: una hora determinada
• datetime: fecha, hora y zona horaria
• datetime-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!

En aquél entonces también comentaba que habían prometido compatibilidad para atrás; esto es, las páginas existentes se seguirían viendo bien. Lo cual, dado el historial de hacks para IE más el hecho de que ya no serían necesarios para esta nueva versión, realmente me preguntaba cómo harían para hacer eso.

La respuesta no se hizo esperar (vía Slashdot): un metatag. Básicamente, si queremos que IE8 renderice nuestra página como debería de hacerlo vamos a tener que pedirle por favor. Si dicho metatag no está presente en la página, ésta se mostrará como si la estuviésemos viendo en IE7.

Esto quiere decir que todos aquellos que hicieron las cosas mal en un principio sin respetar estándares y desarrollando sólo para IE pueden seguir tranquilos en sus casas. Mientras tanto, todos los que desarrollamos páginas siguiendo estándares y después nos rompimos la cabeza tratando de hacer que se vean igual en IE también vamos a tener que trabajar de nuevo para agregarle este dichoso metatag… si es que no tienen ningún bug de renderizado nuevo que rompa algo más.

Como si fuese poco, este comportamiento implicaría que IE8 no pasaría el test ACID2. El test ACID2 es una página en HTML 4.01 con lo mínimo e indispensable, evidentemente no tiene ese dichoso metatag que es necesario para activar este nuevo modo de IE8. Por lo tanto, cuando uno abra el test en IE8, se verá renderizado como si fuese IE7 que no pasa el test. Si no fuese así entonces no están haciendo lo que dicen estar haciendo, lo que se traduce en más problemas para los que hacemos las cosas bien de todas formas.

¿Se podría hacer bien?

Respuesta corta: sí, al menos una sencilla y – creo – justa.
Respuesta larga: todos sabemos que la mejor forma de modificar cómo se muestra nuestra página sin molestar a los otros navegadores es utilizar inclusión condicional. Sin embargo, si IE8 respeta estándares, dicha inclusión ya no sería necesaria y debería de ser ignorada por el navegador.

Lo que yo propongo es que IE8 renderice en modo estándar siempre a menos que encuentre una de esas inclusiones para IE7 o superior. En dicho caso, la incluya y cambie el modo de renderizado a aquél (supuestamente) idéntico a IE7.

Esto lograría lo siguiente:

• Aquellos que nos molestamos en desarrollar siguiendo estándares podemos seguir tranquilos
• Aquellos que desarrollaron con estándares pero utilizaron formas obstrusivas y poco claras para “arreglar” el estilo en IE sólo tienen que modificar su código ligeramente
• Aquellos que desarrollaron sólo para IE pueden modificar su código para que IE8 muestre su página correctamente también fácilmente

Los últimos dos puntos parecen redundates pero no lo son. El último grupo de gente incluye aquellos que directamente no desarrollaron según los estándares. Estoy suponiendo que si no les importaron los estándares en aquél momento, no le importarán ahora tampoco.

Sin embargo, el que tengan que trabajar para hacer las cosas bien haría que, al menos, se den cuenta que podrían haber hecho las cosas bien desde el principio. Y por esto creo que esta solución es justa:

• Los que hicieron las cosas bien no tienen que hacer absolutamente nada
• Los que las hicieron más o menos o mal tienen muy poco trabajo que hacer
• Los que hicieron las cosas mal les queda el dolor del tirón de orejas haciéndoles acordar que de haber hecho las cosas bien desde el principio no hubiesen tenido drama pero disponen de una solución sencilla que haría que se vea bien en IE7 e IE8 hasta que hagan las cosas bien (cosa que no creo que hagan de todas formas)

¿O estoy diciendo cualquier cosa? Me gustaría escuchar otras ideas, que seguro que alguien tiene una idea mejor

Por un lado, vía TechTear Mozilla libera una herramienta para probar software. Básicamente, toma un programa y lo hace trabajar como si alguien lo estuviese usando pero de forma aleatoria. Este tipo de software no es novedad y existe desde hace años (le llaman “Testing Difuso”), pero éste es el primero liberado para ser usado por quien lo desee y con el respaldo de la Fundación Mozilla. Quienes acertadamente dicen que la seguridad de su sistema depende de los usuarios, al liberar esta aplicación sólo les están dando más herramientas.

Sin embargo, Christen Krough, vicepresidente de Opera dice que liberar este tipo de aplicaciones es completamente contraproducente debido a los usos indebidos que se le pueda dar. Mi opinión al respecto es completamente opuesta:

si alguien puede encontrar un agujero de seguridad haciendo uso de las mismas herramientas que podemos tener nosotros nos merecemos que nos hagan lo que fuera que nos quieren hacer

Como si eso fuese poco, via Slashdot me entero que ya existe una forma de obtener acceso a una cuenta con dos clicks. Durante la conferencia de seguridad “Black Hat”, Robert Graham explicó y demostró en vivo cómo podía obtener acceso a una cuenta sin necesidad de saber el nombre de usuario o la password de quien quiera. Lo único que necesitaba hacer es capturar la información que entra y sale de la PC. Cosa que sería muy complicada de no ser por la popularidad de las conexiones WiFi, una puerta abierta para que todos vean lo que hacemos.

Graham desarrolló dos aplicaciones de uso muy específico (que serán liberadas) que permiten obtener acceso a cualquier cuenta que utilice cookies. No importa de qué servicio sea, ni quién la utilice… nisiquiera necesita la contraseña. Sólo obtiene la información de las cookies con un programita, y con otro programita duplica esa información en su propio navegador y voilà, acceso instantáneo. Obviamente, no funciona en conexiones seguras tipo SSL, VPN o sobre SSH.

Nuevamente si no tenemos cuidado sobre cómo accedemos y enviamos nuestra información no podemos pedir que no nos saquen todo.

LifeHacker me hizo acordar que para quienes usamos Firefox y/o Thunderbird es muy simple. Algo muy poco usado de estas aplicaciones es el Administrador de Perfiles. Te pemite tener muchas configuraciones distintas para el mismo Firefox/Thunderbird, donde configuración va desde el Theme, las extensiones, los bookmarks, las passwords guardadas… en fin, todo. Como si fuese poco, esto nos va a permitir también encapsular todas nuestras cosas para hacer backups o moverlas de una PC a otra.

Aquí le muestro una forma sencilla para configurarlos, modificarlos y utilizarlos.

El Administrador de Perfiles

Antes de ponernos a tocar por todos lados necesitamos saber a dónde modificar. Para eso debemos ejecutar el Administrador de Perfiles. Depende del sistema operativo eso se logra de una u otra forma. En el caso de Firefox:

• Windows: Inicio -> Ejecutar -> firefox --profilemanager
• Linux: desde una consola firefox -ProfileManager
• Mac: desde una consola firefox-bin --profilemanager

En el caso de Thunderbird también van a querer saber dónde están sus mails. Para eso:

• Herramientas -> Opciones de Cuenta
• Click en la cuenta (revisen todas)
• Si a la derecha les aparecen un montón de opciones y campos a relllenar hagan click en la primera opción bajo el nombre
• En la derecha, al final dice “Carpeta Local”. Ahí están sus mails

Si no encuentran su perfil, prueben buscarlo entre todas las direcciones que figuran en la página oficial (en inglés). Asegúrense de respaldar esta carpeta, lo vamos a necesitar para mudar nuestra configuración y también por seguridad en caso que algo de esto salga mal… no es que algo vaya a salir mal, pero por las dudas; de todas formas deberían de hacer backups frecuentes

Creando un perfil

Ya con toda la información bien guardada vamos a empezar a meter mano.

Abrimos el Administrador de Perfiles (como vimos recién) y:

1. Click en el botón que dice “Crear nuevo”
2. Le ponemos el nombre que queramos a nuestro perfil
3. Click en el botón que dice “Elegir Carpeta”
4. Elegimos la carpeta en donde queremos que se guarde el perfil (recuerden esta información)
5. Click en el botón que dice “Finalizar”

Una observación: utilicen una carpeta vacía para los perfiles nuevos. No sólo porque es más cómodo y ordenado a la hora de buscar, cambiar, borrar o modificar sino porque se podrían llegar a perder información.

Ya está. Tenemos un nuevo perfil creado nada más simple.

Usando el nuevo perfil

Para poder arrancar con el nuevo perfil nada más fácil que ejecutar el Administrador de Perfiles y elegir el que queramos. Pero eso es incómodo y lento, hay formas más rápidas.

Desde la línea de comandos

• Windows: Inicio -> Ejecutar -> thunderbird -P nombre_del_perfil_entre_comillas
• Linux: desde una consola thunderbird
• Mac: desde una consola thunderbird-bin -P nombre_del_perfil_entre_comillas