1. APLICACIONES WEB OFFLINE
En HTML5
Prieto Chaparro Noé Aarón – 10410555
Nassi Torres Guillermo Alberto – 10410515
05 Feb 2014

2. MARCO CONCEPTUAL
• "Web" y "online" son dos términos que están muy relacionados entre sí, y
muchas personas los consideran incluso sinónimos. Por tanto, ¿por qué
hablamos de tecnologías web "offline" (sin conexión) y qué significa este
término?
• Las especificaciones de HTML5 y otras especificaciones relacionadas
presentan una serie de funciones que permiten que las aplicaciones web sin
conexión sean una realidad:
• caché de aplicaciones
• localStorage
• Web SQL e Indexed Database
• eventos online o sin conexión

3. CARACTERÍSTICAS PRINCIPALES
• W3C Web Storage
• La especificación de la W3C para el almacenamiento web ha sido diseñada
para proveer de una forma mejor y más segura de almacenar información
que el método tradicional de almacenamiento en cookies. Además el Web
Storage ofrece mayor capacidad de almacenamiento por dominio y una
mejor interfaz de acceso a los datos.

4. • Interfaz del lado cliente
• A diferencia del mecanismo implementado en las cookies a las que tanto el
cliente como el servidor tienen acceso, en el almacenamiento web, solo el
cliente tiene acceso a los datos. Los datos por tanto no son enviados hacia
el servidor en cada consulta HTTP, pero el servidor puede hacer peticiones
al cliente para recibir los datos que requiera.

5. • Tipos de almacenamiento
• El almacenamiento web ofrece dos áreas de almacenamiento diferentes, el
almacenamiento local y el almacenamiento por sesión, que difieren
en alcance y tiempo de vida.
• Los datos alojados en un almacenamiento local es solo accesible por
dominio y persiste aún cuando se cierre el navegador. El almacenamiento
por sesión es por ventana y su tiempo de vida está limitado a lo que dure la
ventana (o pestaña). Con el almacenamiento por sesión lo que se persigue
es la posibilidad de que separar instancias de la misma aplicación web para
que puedan ejecutarse en diferentes ventanas (o pestañas) sin
que interfieran entre ellas.
• Los datos son almacenados usando pares de clave/valor. Se supone que las
aplicaciones web que utilicen esta tecnología son capaces de
trabajar offline por largos periodos de tiempo

6. • sessionStorage
• Objeto global que mantiene un área de almacenamiento disponible a lo
largo de la duración de la sesión de la página, ventana o pestaña. La
sesión persiste mientras que la ventana permanezca abierta y sobrevive a
recargas de página. Si se abre una nueva página en una pestaña o
ventana, una nueva sesión es inicializada.
• // Guardamos el nombre del editor en el almacén de la sesión actual
• sessionStorage.setItem("editor", "Oscar Campos");
• // Accedemos a los datos almacenados
• alert("El editor es "+ sessionStorage.getItem("editor"));
• La mayoría del tiempo los sessionStorage son útiles a la hora de guardar
datos temporales que deben ser persistentes en caso de que el navegador
se refresque.

7. • Esto es muy útil por ejemplo en un formulario de edición de posts en un blog
donde si por casualidad pulsamos la tecla F5 el navegador se refresca
y perdemos todo nuestro post después de una hora de trabajo:
•
•
•
•
•
•
•
•
•
•
// Obtenemos el elemento que contiene el contenido del post
var content = document.getElementById("content");
// Comprobamos si existe contenido guardado
// lo cual indicaría un refresco de página accidental
if (sessionStorage.getItem("autosave")) {
content.value = sessionStorage.getItem("autosave"); }
// Guardamos el contenido del elemento cada minuto
setInterval(function() {
sessionStorage.setItem("autosave", content.value);
}, 1000*60);

8. • localStorage
• Los almacenes locales funcionan de la misma forma que los almacenes de
sesión con la excepción de que son capaces de almacenar los datos por
dominio y mantener persistencia más allá de la sesión actual e incluso de
que el navegador completo sea cerrado. En algunos casos como en el de
IE8 puede llegar a guardar hasta 10MB de información, si lo comparamos
con las 4k de una cookie nos entra la risa floja.
• El uso es muy similar al del sessionStorage, solo debemos añadir el dominio
con el que vamos a trabajar:
• localStorage['www.genbetadev.com'].setItem("editor", "Oscar Campos");
• Podemos hacer cosas más complejas como almacenar el número de veces
que un usuario ha visitado una página:
• localStorage['www.genbetadev.com'].setItem("visitas", parseInt(localStorage['
www.gebetadev.com'].getItem("visitas") || 0 ) + 1);

9. • IndexedDB/Web SQL Database
• IndexedDB es una API para almacenamiento avanzado de datos en la
parte cliente y pretende servir como mecanismo de almacenamiento de
grandes cantidades de datos estructurados que además nos provea de un
acceso de alto rendimiento a los mismos usando índices. Mientras que el
Web Storage nos es treméndamente útil para almacenar pequeñas
cantidades de datos, IndexedDB nos es útil para almacenar grandes
cantidades de datos complejos y estructurados.
• IndexedDB provee de una API para consultas asíncronas separada de
la API de consultas síncronas. Provee de transacciones y aunque solo está
soportada de momento por Chrome 11+ y Firefox 4+todos los
fabricantes han prometido implementarlo en sus productos por lo que en
breve esperamos que este completamente soportado.

10. • function sendLocalStatus() {
• // Leemos el estado en local
• var status = readStatus();
• // Si hay estados
• if (status) {
• // Lo enviamos al server online
• sendToServer(status);
• // Borramos la copia local
• window.localStorage.removeItem("status"); } }

11. •
•
•
•
•
•
•
•
•
•
•
•
•
•
•
// Evento onload
window.addEventListener("load", function() {
// Comprobamos que estemos online
if (navigator.onLine) {
// Si lo estamos enviamos datos de local // así actualizamos los cambios
hechos offline
// en nuestro servidor online
sendLocalStatus(); } }, true);
// Evento online
window.addEventListener("online", function() {
// Evento que se activa cuando detecta que estamos online
sendLocalStatus(); }, true);
// Evento offline
window.addEventListener("offline", function() {
// Evento que detecta cuando perdemos la conexión
alert("You're now offline. If you update your status, it will be sent when you
go back online"); }, true);

12. UTILIDAD Y BENEFICIOS
• El uso de aplicaciones web se ha enfrentado desde sus
comienzos con una importante desventaja en comparación con
las aplicaciones de escritorio, y era la posibilidad de estas
últimas de trabajar en entornos desconectados. Además, con la
utilización de dispositivos móviles, es habitual no disponer
siempre de una conexión de alta velocidad de calidad para el
uso de aplicaciones web. HTML5 aporta una importante mejora
en este aspecto para permitir la utilización de todas las
funcionalidades de las aplicaciones web “sin conexión” a través
de APIs, que sincronizan sus datos cuando la conexión entre el
dispositivo y la red se restablece.

13. COOKIE CLICKER
• CookieClicker es un juego hecho en Javascript lanzado por
Orteil en Agosto 10 del 2013.
• El punto del juego es hornear galletas clickeando en una
galleta gigante hasta que tengas las suficientes galletas para
comprar upgrades.
• El gameplay aparentemente infinito hace que sea un juego
que pueda durar un indeterminado tiempo de tiempo
• http://orteil.dashnet.org/cookieclicker/

14. LAST.FM
• Last.fm es una red social, una radio vía Internet y además un sistema de
recomendación de música que construye perfiles y estadísticas sobre
gustos musicales, basándose en los datos enviados por los usuarios
registrados.
• Un usuario de Last.fm puede construir un perfil musical usando dos
métodos: escuchando su colección musical personal en una aplicación de
música con un plugin de Audioscrobbler, o escuchando el servicio de radio
a través de Internet de Last.fm, normalmente con el reproductor de
Last.fm.

15. CREEMOS UNA PÁGINA WEB OFFLINE
• Revisamos si el navegador lo
soporta
• Creamos una pagina offline
if(window.applicationCache) {
// this browser supports offline applications
}
if (!window.localStorage) {
log("HTML5 Local Storage is not supported in
your browser.");
return;
}
<!DOCTYPE html>
<html manifest="application.appcache">
.
.
.
</html>

16. CONTENIDO DEL ARCHIVO CACHÉ
CACHE MANIFEST
# files to cache
about.html
html5.css
index.html
happy-trails-rc.gif
lake-tahoe.JPG
#do not cache signup
page
NETWORK
signup.html
FALLBACK
signup.html offline.html
/app/ajax/ default.html

17. REVISANDO ESTADO ONLINE
// When the page loads, set the status to online or
offline
function loadDemo() {
if (navigator.onLine) {
log("Online");
} else {
log("Offline");
}
}
// Now add event listeners to notify a change in
online status
window.addEventListener("online", function(e) {
log("Online");
}, true);
window.addEventListener("offline", function(e) {
log("Offline");
}, true);

18. CONCLUSIONES
• En html5 es posible tener aplicaciones offline con la privacidad necesaria del
usuario con respecto a su información, estas páginas son muy útiles para
conexiones de internet lentas y también páginas que no actualizan mucho su
contenido, o diversas necesidades ya depende del sitio.
• El tiempo de entrega estuvo bien, excepto por el inconveniente que el
profesor cambio y especificó algunos de los rubros y aspectos a evaluar en
esta presentación.
• El tiempo en promedio calculado para este trabajo en horas netas de todos
los integrantes del equipo fueron 10

19. EJERCICIO
• Objetivo
Aprender a manejar el estado de una aplicación web offline
• Descripción
1.- Mencione las 3 palabras reservadas para el manifiesto de cache.
2.- Reallizar una página web que tenga como archivo caché de nombre ejemplo
y cheque si el navegador soporta esta api y revisar el estado online
• Formato
-Individual
-En una hoja hecho a mano con su nombre y numero de control al principio

20. REFERENCIAS
•
http://blog.eltallerdigital.com/2012/05/5-ventajas-de-html5-para-los-usuarios/
•
http://www.anieto2k.com/2010/01/09/aplicaciones-web-offline-para-que-la-conexion-nosea-problema/
•
Pro HTML5 Programming / aut. Lubbers Peter, Albers Brian y Salim Frank. - [s.l.] :
Editorial Apress, 2011. - Segunda edición. - ISBN: 978-1-4302-3864-5.