El Centro de HTML5 Blog

4 para HTML5: Soporte al explorador, trucos OnInput, y Almacenamiento local

Por John Jainschigg (5/7/2012)

Califique su explorador. Si desarrolla para el web, es muy probable que tenga las versiones más recientes de muchos diferentes exploradores en su desktop. Y es muy probable que tenga una amplia y siempre creciente tabla de incompatibilidades, anomalías, y varias interpretaciones de las reglas de w3c en su cabeza. O por lo menos así es, hasta HTML 4.01. Mientras tanto, para muchos codificadores, HTML5 todavía se encuentra en el extraño territorio entre “¡No puedo creer que los exploradores pueden finalmente hacer esto!” y “¡No puedo creer QUE el explorador no puede (todavía) hacer esto!” Para entender las diferencias en soporte HTML5 de vanguardia, http://html5test.com es un gran primer paso. Presenta un proyecto de GitHub por Niels Leenheer, apoyándose en el trabajo realizado por Henri Sivonen y otros, para desarrollar un paquete efectivo para la detección de características para HTML5, y producirá una calificación numérica sencilla para cualquier explorador que envíe a su página principal – una que podrá comparar con las calificaciones de muchos otros exploradores y versiones, incluyendo aquellas para las tablets, móviles, y los dispositivos incrustados.

Detecte las características, no los exploradores. Todos los codificadores web “reales” han escrito (o robado) una función para detectar el explorador y poder vencer ese obstáculo de incompatibilidad en una manera mínimamente enrevesada, aunque si por la fuerza bruta. Esto varía de lo que en esencia son los de una sola línea que analizan la cadena (falsificable) agente-usuario hasta detecciones más robustas que ven el DOM, javascript, y otros detalles para concretar el tipo y la versión con más certeza. El segundo es un mejor enfoque – potencialmente más basado en estándares – y es particularmente apto para responder a preguntas acerca de si un explorador visitante ofrece soporte a una característica HTML5 particular. Para aquellos que no están familiarizados con el enfoque, este artículo en MSDN (http://msdn.microsoft.com/en-us/magazine/hh475813.aspx) ofrece un modelo sólido: primero se deben realizar pruebas para los estándares (porque muchos exploradores actuales los soportan, así como extravagantes equivalentes heredados), luego de regreso (a los equivalentes heredados) de ser necesario.

Use oninput sin miedo. Los exploradores modernos ofrecen soporte uniforme para el nuevo evento oninput de HTML5, el cual se activa cuando el usuario se acopla con un campo de entrada. Es maravilloso para escribir validaciones en línea y otras cosas difíciles como entradas de texto con múltiples líneas con ajuste de líneas funcional o ‘elemento de forma de salida sobre la tecla regresar’, lo cual solíamos hacer con eventos onkeyup/onkeydown (y cierto grado de dificultad). Tristemente, para soportar exploradores más antiguos, tiene que seguir incluyendo este código. Sin embargo, el escritor de blogs belga, Mathias Bynens (http://mathiasbynens.be) ofrece una manera más inteligente y concisa para tener también su oninput y onkeydown/up. Él sugiere hacer esto:

someElement.oninput = function() {

  this.onkeydown = null;

  // Your code goes here

};

someElement.onkeydown = function() {

  // Your code goes here

};

… en otras palabras, definir los manejadores para ambos eventos, luego eliminar el manejador onkeydown cuando se active el evento más moderno. Él ha observado que el manejador onkeydown se ejecutará una vez en cualquier caso, porque onkeydown se activa antes que oninput, por lo que su código keydown debe tomar eso en cuenta, y además, idealmente, se debe configurar a cascada para que este .onkeydown no sea configurado inútilmente y reconfigurado a nulo con cada evento procesado. La formula puede funcionar para muchos eventos HTML5 que representan mejoras semánticas o funcionales sobre métodos anteriores, y le ayuda a evitar la necesidad de estrategias de detección de características más complejas.

Almacénelo localmente. Esta es una de esas características de HTML5 que simplemente me sorprende cada vez que la uso. Almacena cosas –las cosas de su página – en el almacén local del usuario, bajo su dominio. Y las cosas que almacena sobreviven a cierres de pestañas, cierres de exploradores, y se apaga hasta que el usuario lo retira, o hasta que usted lo hace. LocalStorage puede ser la base de pequeñas y poderosas aplicaciones que funcionan fuera de línea, o le ayudan a diseñar interfaces pulcras que se comportan más como aplicaciones, protegiendo los datos del usuario y recordando el contexto en maneras importantes y constructivas. Es un poco como las variables asociadas con el lado de sesión del servidor con serialización automática, pero que se ejecutan en el lado del cliente. Pruebe la capacidad con:

If (typeof(localStorage) != ‘undefined’) // API is available

Después escríbale con:

localStorage.setItem(“mykey”,”My value”);

… usando un try/catch para los errores de campo. Recupere los elementos como se muestra aquí:

var thevalue = localStorage.getItem(“mykey”);

Y elimínelos como se muestra aquí:

localStorage.removeItem(“mykey”);

John Jainschigg es un editor y colaborador para SourceForge and Geeknet.

Deje un comentario...


Videos presentados

Publicaciones anteriores en el blog

  • ¿Convertirá HTML5 el explorador en la plataforma?

    En mi primer entrada de blog, escribí acerca de la posibilidad de que HTML5 pudiera marcar el fin para las aplicaciones nativas en los dispositivos móviles. Yo argumenté que los desarrolladores tenían que pensar en esto conforme crean sitios Web y aplicaciones en HTML5, al diseñar a partir de la forma del factor en lugar de para el diseño. ... leer más.

  • Hablando de HTML5: La evolución de la Web

    Tuve una entrevista con Brandon Satrom, Desarrollador Evangelizador de Microsoft, para para mi blog de este mes. Brandon y yo discutimos sobre todas las formas en que HTML5 está cambiando el campo del desarrollo web, de la evolución de HTML para el crecimiento de la internet móvil y las aplicaciones nativas. Puede leer nuestra charla a continuación. ... leer más.

  • 5 Cosas que Usted necesita tener en cuenta acerca de HTML5

    HTML5 representa la quinta revisión a fondo del lenguaje principal de la Web. A diferencia de versiones anteriores, HTML5 promete una mejor integración de los multimedios y otras aplicaciones dentro del núcleo de la mayoría de las páginas Web. Si bien la adopción de HTML5 empezó lentamente, una creciente evangelización por parte de una serie de fabricantes líderes en los últimos seis meses ha estimulado la aprobación por parte de los desarrolladores en todas lados. Sin embargo, hay algunos puntos básicos que toda persona debe mantener en mente acerca de HTML5. ... leer más.

Recursos HTML5 recientes

Temas de HTML5 en Slashdot

Webcasts presentados