TALLER DE HTML5.Clase 04 – Prof. Germán RODRÍGUEZ

Cacheo de datosVelocidad++

Caché de datos• Permite guardar los archivos que forman un

sitio web localmente.

• Objetivo?

– HTML, CSS y JS probablemente se mantengan consistentes (pocos cambios).

– Cachear recursos acelera la carga de los sitios.

– Alto soporte en Mobile.

Utilidad• Sirve si estás en un avión, en la ruta o una isla

desierta.

• Conexiones "medio-pelo" (starbucks, dvbar1, wifi robada a tu vecino).

• Ofrecen una mejor performance.

• Consolidan el concepto de aplicación permanente que SIEMPRE está disponible.

Como cachear?• La etiqueta HTML acepta un atributo manifest.

• Ese atributo es el nombre de un archivo que tiene las directivas de qué y cómo almacenar.

• El archivo cache-manifest tiene 3 áreas:

– CACHE: Listado de archivos (uno abajo del otro) que obligatoriamente se cachearán.

– FALLBACK: Listado de recurso que se cargará si el primero no existe.

– NETWORK: Listado de archivos que requieren obligatoriamente que el usuario esté online.

Código ejemplo de cachéCACHE MANIFEST#UN COMENTARIO

CACHE:

index.php

estilos.css

script.js

NETWORK:

captcha.png

login.php

Actualizar el caché.• Si una sola línea del cache es distinta, se

recarga el archivo

• Al recargar el archivo, se vuelven a cargar los recursos definidos

• Una técnica para esto es tener un comentario (con numeral) que cambie si queremos generar una nueva versión del cache.

DRAG Y DROPMover elementos en el HTML

Detección• Para que un elemento pueda ser arrastrable

debe tener el atributo HTML draggable "true".

• Desde JS debe tener un evento ondragstart, que le asigna un ID de draggeo (o algo asi).

• Se puede droppear en cualquier elemento, pero se debe setear desde Javascript el evento ondrop.

• Obligatoriamente también debe tener un evento ondragover (aunque no se haga nada) sino se rompe la cadena de arrastre.

Código, parte I• Desde HTML le decimos que sea draggable.

• Desde JS esperamos el dragstart (iniciar el arrastrar).

• Cuando sucede, se dispara una función.

• En esa función se guarda un dato en una variable TEMPORAL, llamada Text.

<p id="mover" draggable="true">HOLA</p><div id="soltar"></div>

<script>var mover=document.querySelector('mover');mover.ondragstart = function( e ){

e.dataTransfer.setData('Text','CONTENIDO'

); }</script>

Código, parte II• En JS buscamos el lugar donde se sueltan los

elementos.

• Les damos primero un evento ondragover (cuando se pasa por encima con el mouse presionado).

• En ese momento no se hace nada, así:

var soltar=document.querySelector('#soltar');soltar.ondragover = function(e){

e.preventDefault(); return false;}

Código, parte III• Al soltar el mouse sobre el elemento, se

dispara el evento ondrop.

• En JS cuando soltás algo sobre un div, lo soltás sobre todo lo que esté detrás.

• Hay que cortarle la ‘expansión’ del drop.

• Obtenemos la variable TEMPORAL.

• Y hacemos lo que queremos hacer.

soltar.ondrop = function( e ){ var rta=e.dataTransfer.getData('Text'); return false;}

DETECCION ONLINEObtener estado de conexión.

Estado de la red.• Los navegadores permiten saber cuándo el

usuario se encuentra online.

• El navigator tiene el booleano onLine.

– if( navigator.onLine ){ /* si */ } else { /* no */ }

• Chrome y Safari (webkit!) entienden bien que esto debería ser en base a la red y wifi.

• Tienen dos eventos para sincronizar 'en tiempo real' las conexiones y desconexiones.

• Los eventos online y offline.

window.addEventListener('online', function(e){ alert('on'); }, false

);

window.addEventListener('offline', function(e){ alert('off'); }, false

);

FULLSCREEN100% width, 100% height nativo

API Fullscreen• Ahora se puede hacer fullscreen cualquier

elemento (no es un estándar).

• De hecho mozilla y webkit, usan prefijos y hay una letra diferente.

– objeto.requestFullscreen(); //estandar HTML5

– objeto.mozRequestFullScreen(); //version ffox

– objeto.webkitRequestFullScreen(); //version chrome

• En chrome, CSS puede accederlo como estado.

– *:-webkit-full-screen

img.onclick = function(){

if (this.requestFullscreen){

this.requestFullscreen();

}else if(this.mozRequestFullScreen){

this.mozRequestFullScreen();

}else if (this.webkitRequestFullscreen){

this.webkitRequestFullscreen();

};

}

WEB SQLBase de datos locales

Panorámica WebSQL• Es soportado por Safari, Chrome y Opera

• Tiene 3 métodos principales

– openDatabase( ): Crea o abre la base de datos solicitada.

– transaction(): Genera una transacción, dispara una función asincrónica que ejecuta acciones SQL

– executeSql( ): Recibe un string representando una consulta SQL para ejecutar en la base de datos.

• Una transacción puede estar formada por más de una consulta ejecutada.

Abrir la base• El método openDatabase( ) recibe 4

argumentos:

– Nombre de la base de datos a buscar/crear

– Versión de la API de database (1.0 o 2.0)

– Una descripción de la base.

– Tamaño de la base de datos (2MB max. --> 2 * 1024 * 1024 ).

var db = openDatabase( 'miSitio', '1.0', 'base', 2 * 1024 * 1024 );

Consultas y argumentos.• Las transacciones con WebSQL reciben tres

argumentos:

– Consulta SQL a ejecutar

– Vector/Array de valores de reemplazos, cada posición reemplaza cualquier signo de pregunta de la consulta

– Si la consulta fue para pedir datos, una función que recibe la respuesta

db.transaction( pedir_alumnos );

function pedir_alumnos (tx) { tx.executeSql(

'SELECT * FROM ALUMNOS WHERE CARRERA=?',

['DW'], obtener_resultados

);}

recorrer_resultados( )• La función de callback que devuelve los

resultados tiene dos argumentos:

– El mismo objeto transaccion (del transaction() )

– Un objeto resultados, que es un array de objetos.

• La cantidad de resultados sale del resultados.rows.length

• Cada elemento de la base de datos se obtiene recorriendolos con un for.

• Cada elemento del for es un resultados.rows.item(i).COLUMNA