Mostrando entradas con la etiqueta w3c. Mostrar todas las entradas
Mostrando entradas con la etiqueta w3c. Mostrar todas las entradas

lunes, 25 de abril de 2011

Almacenamiento Local HTML5

Una de las (pocas) cosas que se echa de menos al desarrollar aplicaciones para la web es la persistencia. En esencia, el protocolo HTML es unidireccional (es decir, el servidor, a partir de una petición del navegador, genera una respuesta/página) y no guarda información de estado (es decir, no hay un "recuerdo" entre una página y la siguiente).

Esa es la teoría. En la práctica, con los años se han ido desarrollando mecanismos que permiten almacenar cierta información de manera persistente. En el lado del navegador (las cookies) y en el lado del servidor (las sesiones). Pero no son la solución real al problema de la persistencia. Las cookies tienen un límite de tamaño de 4KB y, además, se envían con cada petición que se hace al servidor, así que no es muy recomendable usarlas para almacenar demasiados datos. Por otro lado, el manejo de sesiones puede complicarse cuando tenemos múltiples frontales, ya que hay que habilitar algún mecanismo para que compartan dicha información.

Con las nuevas características de almacenamiento local de los navegadores modernos, eliminamos todos estos problemas de un plumazo.

En resumen:
  • Disponemos de 5MB de almacenamiento local por dominio, en el que podremos guardar pares clave-valor. Tanto la clave como el valor son cadenas de texto (así que cuidado a la hora de almacenar otros tipos de datos, ya que tendremos que realizar las conversiones adecuadas).
  • El almacenamiento es persistente, incluso al cerrar el navegador o cuando el navegador se cuelga o se cierra debido a un error.
  • Los datos no se envían al servidor bajo ningún concepto (salvo que el usuario los envíe).
  • Disponemos de getters y setters para cada clave, así como métodos para borrar el valor de una clave, consultar cuántos elementos tenemos almacenados o borrar todo el almacenamiento.
  • Cada vez que se hace una operación sobre el almacenamiento local y dicha operación suponga un cambio (entendiendo como que una operación que escribe en una clave el mismo valor que ya tenía, no lo produce) dispara un evento, que podemos escuchar y actuar en consecuencia.
  • Podemos utilizar el almacenamiento local para comunicar varias ventanas del navegador (en las que se ha abierto la misma aplicación web).
Hay una versión de almacenamiento local, llamada Almacenamiento de Sessión (session storage) que funciona exactamente igual salvo por el hecho de que, al terminar la sesión (por ejemplo, cerrando el navegador), todos los datos se pierden.

Como siempre, deberíamos detectar si el navegador usado dispone de estas características antes de usarlas.

Enlaces interesantes:

Geolocalización (W3C API)

Uno de los temas que están "de moda" desde la explosión de uso de Internet en los móviles ha sido la geolocalización.

La distribución de direcciones IP no es como la de los números de teléfono, en los que mirando el antiguo prefijo (las 2 ó 3 primeras cifras) o incluso las siguientes, nos podemos hacer una idea de dónde está instalada la línea. La asignación de direcciones IP es bastante más arbitraria. No obstante, existen bases de datos que pretenden localizar un dispositivo a partir de su dirección IP (dependiendo de los países la localización será más o menos exacta).

Con los móviles la cosa cambia. Se puede conocer su posición a partir de tres elementos:

  • La red WiFi a la que esté conectado.
  • La celda móvil a la que esté conectado.
  • Su GPS interno.

Dependiendo de los métodos usados la precisión será mayor o menor.

En cualquier caso, la API de geolocalización enmascara todos estos procesos y nos da acceso asíncrono a la información de geolocalización del dispositivo a través del navegador. Esta característica no sólo está en los navegadores móviles, sino también en los de "sobremesa" (al menos en Chrome, Firefox y Opera).

La API para obtener la información consiste básicamente en un objeto, navigator.geolocation, que provee de un método, navigator.geolocation.getCurrentPosition(), que recibe como parámetros dos funciones callback: la primera de ellas para manejar el éxito de la geolocalización, y la segunda para manejo de errores.

La función de éxito recibirá un objeto position que tiene una propiedad coords con valores interesantes (creo que los nombres son autoexplicativos):

  • latitude
  • longitude
  • altitude
  • accuracy
  • altitudeAccuracy
  • heading
  • speed

A partir de dichos valores, es sencillo representar nuestra posición en un mapa, usando la API Javascript de Google Maps. Se pueden ver un par de ejemplos en Labs:


En el ejemplo, se pretende usar un timeout para actualizar la posición, pero leyendo más a fondo la documentación hay un método watchPosition() que permite hacer lo propio. También existe el método clearWatch() que se emplea para concluir el seguimiento.

Enlaces relacionados: