Post on 11-Jul-2015
Html5 JavaScript Apis
Gustavo Alzate Sandoval
Comunidad Avanet - @avanet
http://www.eltavo.net
@ElTavoDev
Agenda
1 2 3 4 5 6
¿Html5? ¿Cuáles son estas Apis?
¿Preguntas?¿Html5 JS Apis? ¿Qué teníamos antes?
Demo
HTML5 JAVASCRIPT APIS
Your Logo
Drag & Drop
Web Storage
Geolocation
Offline apps
Caché
Web Workers
Server Sent
Sockets
Cómo lo hacíamos antes
Geolocation
Este Api nos permite obtener la posición geográfica
del usuario actual, por tener incidencia en la
privacidad del usuario esta sujeta a su aprobación.
navigator.geolocation.getCurrentPosition()
position.coords.latitude
position.coords.longitude
Drag & Drop
Este Api nos permite habilitar determinados controles
para que puedan ser arrastrados y ubicados en otro
lugar, en Html5 cualquier elemento puede ser
dragable
<img draggable="true">
Ondragstart=“”
Ondragover=“”
ondrop=“”
Web Storage
Este Api nos permite almacenar información en el
browser del usuario, mucho más rápido que las
cookies. Permite almacenar grandes cantidades de
información sin afectar el performance del sitio web.
Almacenamiento en Key / Value pairs.
Web Storage
Existen dos tipos de almacenamiento:
• localStorage: Su durabilidad no tiene fecha de
expiración.
• SessionStorage: La información se pierde una ves
se cierra el browser.
localStorage.Nombre = “Tavo";
document.getElementById(“label").innerHTML=localStorage.Nombre;
localStorage.removeItem(“Nombre");
Web Workers
Este Api nos permite ejecutar tareas en segundo
plano, para evitar bloquear la interacción del usuario
con el sistema, y que este pueda seguir normalmente
mientras ejecutamos otro tipo de tareas
postMessage()
objWork = new Worker(“uriJSFile");
objWork.onmessage = function(event){
alert(event.data);
};
objWork.terminate();
Server Sent
Este Api nos permite recibir actualizaciones
automáticamente por parte de código escrito de lado
del servidor
var eventoAct = new EventSource(“actualizar.aspx");
eventoAct.onmessage = function(event) {
document.getElementById(“label").innerHTML + =event.data +
"<br>";
};
Server side, escribe en el encabezado de la página.
GRACIAS!!!