HTML5 WebApps APIs

Alejandro de Arriba
adearriba@latamtechnologies.com
@lex0712
www.adearriba.com/blog

HTML5 - Agenda

Drag&Drop

Geolocalizacin

Cache de
aplicacin

Almacenamiento
Web

Webworkers

Drag&Drop

HTML5 - Drag&Drop
Hacer un objeto movible es sencillo: Poner atributo
draggable=true

Escuchar eventos:

dragstart

drag

dragover

dragenter

drop

dragleave

dragend

HTML5 Manejadores de eventos

Todos los elementos

arrastrables al
empezar arrastre
cambiaran opacidad.

function dragStartHandler(e) {
this.style.opacity = '0.4'; // this es el nodo (e.target)
}

var items= document.querySelectorAll(.arrastrable);

[].forEach.call(items, function(item) {
item.addEventListener('dragstart', dragStartHandler, false);
});

HTML5 - El objeto DataTransfer

Contiene los datos que se envan en la accin de arrastre. La
propiedad dataTransfer se establece en el evento dragstart y
se lee/procesa en el evento drop.
dataTransfer.effectAllowed

dataTransfer.dropEffect

Restringe el "tipo de arrastre" que puede

realizar el usuario en el elemento.
Esta propiedad admite los siguientes valores:
none, copy, copyLink, copyMove, link,
linkMove, move, all y uninitialized.

Controla la informacin que recibe el usuario

durante los eventos y . Cuando el usuario
coloca el ratn sobre un elemento de
destino, el cursor del navegador indica el tipo
de operacin que se va a realizar. La
propiedad de efecto admite los siguientes
valores: none, copy, link y move.

e.dataTransfer.setDragImage(img
element, x, y)
En lugar de utilizar la informacin
predeterminada del navegador (la "imagen
fantasma"), puedes establecer un icono de
arrastre.

HTML5 - Arrastre archivos del escritorio

function handleDrop(e) {
e.stopPropagation(); // Evita redireccin del navegador.
e.preventDefault();
var files = e.dataTransfer.files;
for (var i = 0, f; f = files[i]; i++) {
// Leer archivos de la lista.
}

Geolocalizacin

HTML5 - Geolocalizacin
Obtener coordenadas:
navigator.geolocation.getCurrentPosition(manejador);

var manejador = function(position){

var latitud = position.coords.latitude;
var longitud = position.coords.longitude;
}

Almacenamiento Web

HTML5 - Almacenamiento Web

Existen diferentes mecanismos para realizar almacenamiento
en el lado del cliente por medio de HTML5.

Web
Storage
Indexed
Database

Web SQL
Database
File Access

Aplicaciones
Offline
Permite

Mejorar
Rendimiento

HTML5 Generalidades

Sandbox

Solamente la pgina que guarda un dato puede

utilizarlo. Otra pgina no tendr acceso a el.

Cuota

La cuota de espacio es finita y est definida por

el navegador.

Transacciones
Sncrono y
Asncrono

Los dos tipos de BD permiten transacciones

para mantener la integridad de los datos.
Por general todos los tipos de almacenamiento
tienen mtodos asncronos y sncronos.

HTML5 - WebStorage
Ventajas
Presente en la mayora de
navegadores modernos.
[IE8+]
Sencilla: Llave-Valor

Desventajas
Mal rendimiento para gran
cantidad de datos.
Mal rendimiento al buscar
pues no tiene ndices.
Se requiere explcitamente
proteger la integridad
referencial.

HTML5 Usando WebStorage

Uso sencillo creando llaves y sus valores:
localStorage.llave = valor;
Ejemplos:
localStorage.nombre = Alejandro //Asigna valor
localStorage.asignaturas = [Espaol",Ingles"]; //Asigna valor

<script>
//retornamos valor
document.querySelector(#texto).innerHTML = localStorage.nombre;
</script>

HTML5 - Web SQL Database

Ventajas
Soporte para la mayora de
navegadores mviles. (Android,
Safari,Opera Mobile)
Buen rendimiento generalmente
siendo un API asncrono.
Buen rendimiento en bsquedas ya
que existen ndices.
Soporta transacciones.
Soporta integridad de datos.

Desventajas
No tendr soporte en IE ni Firefox.
Requiere conocimiento de SQL.

HTML5 - Indexed Database (IndexedDB)

Ventajas

Desventajas

Buen soporte (Chrome, Firefox,

Mobile Firefox, IE10)
Buen rendimiento generalmente
siendo un API asncrono.
Buen rendimiento en bsquedas
ya que existen ndices.
Soporta transacciones.

API un poco ms complicada.

Se debe garantizar la integridad
de los datos.

HTML5 File System

Ventajas

Se pueden guardar
buena cantidad de datos.
Ideal para imgenes,
audio, video, PDFs, etc.
Buen rendimiento ya que
es una API asncrona.

Desventajas

Desarrollo muy corto.

Solo es soportado por
Chrome.
No tiene transacciones.
No soporta indexado
para bsquedas.

Cache de aplicacin

HTML5 - Cache de aplicacin

Permite que el desarrollador especifique
los archivos que el navegador debe
almacenar en cach y poner a disposicin
de los usuarios que trabajen sin conexin.
La aplicacin se cargar y funcionar
correctamente, incluso si el usuario pulsa
el botn de actualizacin mientras trabaja
sin conexin.

Beneficios de usar
cache
Navegacin sin
conexin
Velocidad
Reduccin de carga del
servidor

HTML5 - Cmo lo implemento?

Utlizando el archivo de manifiesto de cach que contiene los
recursos que debe almacenar en cach el navegador para el
acceso sin conexin.
Referencia al archivo de manifiesto en la etiqueta:
<html manifest="example.appcache">
El atributo manifest debe estar incluido en todas las pginas
de tu aplicacin web que quieras que se almacenen en cach.

HTML5 Estructura del archivo Manifesto

CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js

La cadena CACHE
MANIFEST debe
aparecer en la primera
lnea y es obligatoria.

Los sitios no pueden

tener ms de 5 MB de
datos almacenados en
cach.

Si algn recurso no se
puede descargar, no
se actualizar la
cach.

HTML5 Secciones de archivo manifesto

CACHE:

NETWORK:

FALLBACK:

Seccin predeterminada para las

entradas. Los archivos incluidos en
esta seccin (o inmediatamente
despus de CACHE MANIFEST) se
almacenarn en cach explcitamente
despus de descargarse por primera
vez.

Los archivos incluidos en esta seccin

son recursos permitidos que requieren
conexin al servidor. En todas las
solicitudes enviadas a estos recursos
se omite la cach, incluso si el usuario
est trabajando sin conexin. Se
pueden utilizar caracteres comodn.

Se trata de una seccin opcional en la

que se especifican pginas alternativas
en caso de no poder acceder a un
recurso. La primera URI corresponde
al recurso y la segunda, a la pgina
alternativa. Ambas URI deben estar
relacionadas y tener el mismo origen
que el archivo de manifiesto. Se
pueden utilizar caracteres comodn.

HTML5 Archivo manifest completo

CACHE MANIFEST
# Cache explcita
CACHE:
index.html
stylesheet.css
# Recursos que requieren conexin a internet
NETWORK:
login.php
http://api.twitter.com
# Alternativas
FALLBACK:
/main.py /static.html
images/large/ images/offline.jpg
*.html /offline.html

# static.html ser usada si main.py es inaccesible.

# offline.jpg ser usada para todas las imgenes
dentro de images/large/

# offline.html ser usada en lugar de cualquier otro

archivo .html

Webworkers

HTML5 Webworkers
Un webworker es un archivo JavaScript corriendo en segundo
plano sin afectar el rendimiento de la pgina.

La comunicacin entre un Worker y su pgina principal se

realiza mediante un modelo de evento y el
mtodo postMessage().
Crear Archivo JS

Crear
WebWorker

Manejar
mensajes entre
procesos

HTML5 WebApps APIs

Alejandro de Arriba
adearriba@latamtechnologies.com
@lex0712
www.adearriba.com/blog