Este documento describe las APIs de almacenamiento, AppCache y geolocalización de HTML5. Explica cómo usar localStorage y sessionStorage para almacenar datos, cómo configurar un archivo manifest para almacenar en caché recursos y trabajar sin conexión, y cómo obtener la ubicación geográfica del usuario y mostrarla en un mapa de Google.

1. Implementando APIs HTML5
Danae Aguilar Guzmán
MCT, MS, MCTS, MCP
danaeaguilar@gmail.com

2. Contenido del Módulo
 APIs de almacenamiento
 AppCache
 API de Geo localización

3. APIs de almacenamiento
 Permiten guardar datos en la máquina del
cliente
 Los datos que almacenan están enlazados a
un URL (los datos no pueden ser accedidos
por otros sitios)
 Para acceder desde distintas paginas de un
sitio, se debe usar el mismo host, protocolo
y puerto

4. APIs de almacenamiento
Web storage
Proporciona una manera simple de almacenar datos
basados en key/value
Web SQL database
Provee el poder de una BD relacional, soporta
comandos SQL, transacciones. Pero tiene soporte
limitado.
IndexedDB
Una BD no relacional (NoSQL) provee simplicidad y
algunas características como indexado y transacciones.
Filesystem API
Útil para guardar datos de mayor tamaño como
archivos de texto, imágenes y video. Aun no es
soportado por todos los navegadores.

5. Web storage
Web storage
 Proporciona una manera simple de
almacenar datos basados en key/value
 Se guardan en el disco del usuario
 Se ejecutan de manera síncrona.
 No soporta indexamiento ni transacciones.
 Es el mas soportado por los navegadores
Puede ser de 2 tipos:
1. localStorage
2. sessionStorage

6. Local Storage
Local storage
 Almacenamiento NoSQL
 Fácil de usar, basado en pares key/value
 Puede almacenar por lo menos unos 5MB
setItem(key, value)
getItem(key)
removeItem(key)
clear()
length
key(index)

7. Local Storage
Guardando datos
• Cualquiera de las siguientes maneras:
localStorage.setItem('nombre', $('#nombre').val());
localStorage['nombre'] = $('#nombre').val();
localStorage.nombre = $('#nombre').val();

8. Local Storage
Recuperando datos
• Si no hay datos, retorna null
• Usar cualquiera de las siguientes maneras:
var nombre = localStorage.getItem('nombre');
var nombre = localStorage['nombre'];
var nombre = localStorage.firstName;

9. Local Storage
Eliminar datos
• En base a su clave
• Si no encuentra la clave, no hace nada
• Eliminar todos los datos del Local Storage:
localStorage.removeItem('nombre');
localStorage.clear();

10. Local Storage
Cantidad de datos
Obtener la clave en base a un índice
var cantidadDatos = localStorage.length;
var clave = localStorage.key(1);

11. Local Storage
Verificar si el navegador lo soporta:
Verificacion usando Modernizr
• Agregar el script modernizr.js
function estaSoportado() {
return 'localStorage' in window;
}
if (estaSoportado()) {
localStorage.setItem('nombre', $('#nombre').val());
}
if (Modernizr.localstorage) {
localStorage.setItem('nombre', $('#nombre').val());
}

12. Local Storage
Almacenando objetos complejos:
Obteniendo el valor del objeto:
var persona = { nombre: 'Pepito', apellido: 'Perez' };
localStorage.setItem('persona', JSON.stringify(persona));
var persona = JSON.parse(localStorage.getItem('persona'));

13. Session Storage
Session storage
 Igual que Local Storage pero Session
Storage solo perdura hasta cerrar al
navegador.
 Los datos se limpian automáticamente
(Bueno para la memoria)
 Su contexto se reduce a un solo tab o
ventana de un solo navegador
 Sus datos se pueden compartir entre
elementos iframe de la página.

14. Session Storage
Manejo similar a localStorage:
• setItem(key, value)
• getItem(key)
• removeItem(key)
• clear()
• length
• key(index)

15. El evento Storage
Podemos suscribirnos al evento storage:
Suscribiéndonos desde Jquery:
function manejarCambios(e) {
alert(e.newValue);
}
window.addEventListener('storage', manejarCambios,
false);
function manejarCambios(e) {
alert(e.newValue);
}
$(window).on('storage', manejarCambios);

16. El evento Storage
Se lanza cuando ocurre algún cambio en el
storage en otro tab o ventana.
Nos provee información del evento, como:
• key
• oldValue
• newValue
• url
• storageArea

17. AppCache
AppCache
 HTML5 introduce la posibilidad de configurar
como se almacenan en cache los archivos.
 Permite trabajar offline
 Si se pierde conectividad se cambia a modo
local.

18. AppCache
Archivo manifest de cache
Usar el content type text/cache-manifest en el
reponse
Para IIS se require configurar:
<system.webServer>
<staticContent>
<mimeMap fileExtension=".appcache"
mimeType="text/cache-manifest" />
</staticContent>
</system.webServer>

19. AppCache
Archivo manifest de cache
Crear al archivo manifest.appcache
Usar el content type text/cache-manifest en el
reponse. Para IIS se require configurar:
<system.webServer>
<staticContent>
<mimeMap fileExtension=".appcache"
mimeType="text/cache-manifest" />
</staticContent>
</system.webServer>

20. AppCache
Referenciar al archivo manifest.appcache
<!DOCTYPE html>
<html manifest="manifest.appcache">

21. AppCache
Contenido del appcache:
La primera line debe ser:
Luego tenemos 3 secciones:
1. CACHE: Contiene los items que queremos
cachear, también pueden ir directo debajo de
CACHE MANIFEST
2. NETWORK: Los URLs de los recursos que
solo se pueden acceder cuando hay conexión
3. FALLBACK: Archivos que no quieres cachear
pero quieres usar algo mas en su lugar.
CACHE MANIFEST

22. AppCache
Contenido del appcache:
Ejemplo:
CACHE MANIFEST
# version 1.0
CACHE:
/estilo.css
/main.js
FALLBACK:
/Images/ /Images/Offline.jpg

23. AppCache
Actualizando el Cache
El cache se actualizará cuando:
 Se eliminen los datos de cache del navegador
 El archivo de manifest se actualiza (Puede ser
un cambio en un comentario)
 El cache es actualizado programáticamente

24. API de Geo localización
API de Geo localización
 Es usado para obtener la ubicación geográfica
del usuario
 Puede obtener la ubicación de diferentes
fuentes como: Global Positioning System
(GPS), dirección de IP, radio frequency
identification (RFID), Wi-Fi y Bluetooth MAC
addresses, celular IDs y de una entrada del
usuario.

25. Posicionamiento Básico
Verificando si geolocation es soportado
Métodos:
 getCurrentPosition() Obtiene la posición
actual
 watchPosition() Continuamente actualiza la
posición actual
 clearWatch() Detiene la actualización
continua de la ubicación
function soportaGeolocation() {
return 'geolocation' in navigator;
}

26. Posicionamiento Básico
Un objeto Position tiene las siguientes
propiedades:
 coords Objeto de coordenadas de la
ubicación actual, de tipo Coordinates.
 timestamp La hora en milisegundos en que
las coordenadas fueron creadas basadas en el
Unix Epoc.
 Para convertirlo en dateTime:
var dateTime = new Date(posicion.timestamp).toLocaleString();

27. Posicionamiento Básico
Un objeto Coordinates tiene las siguientes
propiedades:
 latitude La latitude en grados decimales
 longitude La longitud en grados decimales
 altitude La altura en metros
 accuracy La precisión de las coordenadas en
metros
 altitudeAccuracy La precisión de la altura en
metros
 heading La dirección de viaje en grados
 speed La velocidad de viaje en metros/segundo

28. Posicionamiento Básico
Obtener la posición:
Mostrar la posición :
navigator.geolocation.getCurrentPosition(mostrarPosicion);
function mostrarPosicion(p) {
var datetime = new Date(p.timestamp).toLocaleString();
$('#mensaje').html("Latitude: " + p.coords.latitude +
"<br />" + "Longitude: " + p.coords.longitude +
"<br />" + "Timestamp: " + datetime);
}

29. Posicionamiento Básico
Manejando errores:
navigator.geolocation.getCurrentPosition(mostrarPosicion, mostrarError);
function mostrarError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
mostrarMensaje("El usuario denegó la petición de acceso a
Geolocation.");
break;
case error.POSITION_UNAVAILABLE:
mostrarMensaje("Información de ubicación no disponible.");
break;
case error.TIMEOUT:
mostrarMensaje("Time out al obtener la ubicación.");
break;
case error.UNKNOWN_ERROR:
mostrarMensaje("Ocurrió un error desconocido.");
break;
}
}

30. Posicionamiento Básico
Eviando opciones:
 enableHighAccuracy, el mejor resultado
posible aunque tome mas tiempo
 timeout, tiempo en milisegundos que se
esperará una respuesta
 maximumAge, tiempo en cache
var opciones = {
enableHighAccuracy: true,
timeout: 3000,
maximumAge: 20000
};
navigator.geolocation.getCurrentPosition(mostrarPosicion,
mostrarError,
opciones);

31. Posicionamiento Monitoreado
Monitoreando la posición:
var watchId = 0;
$(document).ready(function () {
$("#iniciarMonitoreo").on("click", obtenerUbicacion);
$("#detenerMonitoreo").on("click", detener);
});
function obtenerUbicacion() {
var opciones = {
enableHighAccuracy: true
};
watchId = navigator.geolocation.watchPosition(
mostrarPosicion,
mostrarError,
opciones);
}

32. Posicionamiento Monitoreado
function detener() {
if (watchId != 0) {
navigator.geolocation.clearWatch(watchId);
watchId = 0;
$('#mensaje').html("Se termino de monitorear.");
}
}

33. Ejemplo de uso
Google Maps
Importar el script:
Agregamos un div para mostrar el mapa:
<script
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<div id="mapa"></div>

34. Ejemplo de uso
Google Maps
Estilo del div:
#mapa {
width: 400px;
height: 300px;
margin-right: auto;
margin-left: auto;
border: solid;
}

35. Ejemplo de uso
Mostrar el mapa:
function mostrarPosicion(posicion) {
var mapa = document.getElementById('mapa');
var coords = new google.maps.LatLng(posicion.coords.latitude
, posicion.coords.longitude);
var opciones = {
zoom: 13,
center: coords,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(mapa, opciones);
var marker = new google.maps.Marker({
position: coords,
map: map,
title: "Aquí estas!"
});
}