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.

Preguntas

http://www.eltavo.net

@ElTavoDev

GRACIAS!!!