TALLER DE HTML5.
Clase 04 – Prof. Germán RODRÍGUEZ
Cacheo de datos
Velocidad++
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 DROP
Mover 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.
<p id="mover" draggable="true">HOLA</p>
id="soltar"></div>
•<div
Desde
JS esperamos el dragstart (iniciar el
arrastrar).
<script>
•var
Cuando
sucede, se dispara una función.
mover=document.querySelector('mover');
= function( e ){
•mover.ondragstart
En esa función se guarda
un dato en una
e.dataTransfer.setData(
variable TEMPORAL,
llamada Text.
'Text',
'CONTENIDO'
);
}
</script>
Código, parte II
• En JS buscamos el lugar donde se sueltan los
var soltar=document.querySelector('#soltar');
elementos.
soltar.ondragover = function(e){
• Les
damos primero un evento
e.preventDefault();
returnondragover
false;
(cuando se pasa por encima con el mouse
}
presionado).
• En ese momento no se hace nada, así:
Código, parte III
• Al soltar el mouse sobre el elemento, se
dispara el evento
ondrop. e ){
soltar.ondrop
= function(
var rta=e.dataTransfer.getData('Text');
• En JS cuando soltás algo sobre un div, lo
return false;
} 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.
DETECCION ONLINE
Obtener estado de conexión.
Estado de la red.
window.addEventListener(
• Los
navegadores permiten saber cuándo el
'online',
usuario
se encuentra online.
function(e){ alert('on'); },
• El navigator
falsetiene el booleano onLine.
);
– if( navigator.onLine ){ /* si */ } else { /* no */ }
• Chrome
y Safari (webkit!) entienden bien que
window.addEventListener(
'offline',
esto debería
ser en base a la red y wifi.
function(e){ alert('off'); },
• Tienen false
dos eventos para sincronizar 'en
tiempo
real' las conexiones y desconexiones.
);
• Los eventos online y offline.
FULLSCREEN
100% width, 100% height nativo
API Fullscreen
• Ahora se puede hacer fullscreen cualquier
img.onclick
function(){
elemento=(no
es un estándar).
}
if (this.requestFullscreen){
• De hecho mozilla y webkit, usan prefijos y hay
this.requestFullscreen();
una letra diferente.
}else if(this.mozRequestFullScreen){
– objeto.requestFullscreen();
//estandar HTML5
this.mozRequestFullScreen();
–}else
objeto.mozRequestFullScreen();
//version ffox
if (this.webkitRequestFullscreen){
this.webkitRequestFullscreen();
– objeto.webkitRequestFullScreen();
//version chrome
}; chrome, CSS puede accederlo como
• En
estado.
– *:-webkit-full-screen
WEB SQL
Base 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:
var db = openDatabase( 'miSitio',
– Nombre
de la base
datos a*buscar/crear
'1.0',
'base',
2 de
* 1024
1024 );
– 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 ).
Consultas y argumentos.
• Las transacciones con WebSQL reciben tres
db.transaction( pedir_alumnos );
argumentos:
– Consulta SQL
a ejecutar
function
pedir_alumnos
(tx) {
tx.executeSql(
– Vector/Array
de valores de reemplazos, cada
'SELECTcualquier
* FROMsigno
ALUMNOS
WHEREde
posición reemplaza
de pregunta
CARRERA=?',
la consulta
['DW'],
– Si la consulta
fue para pedir datos, una función que
obtener_resultados
recibe
);la respuesta
}
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
Descargar

TALLER HTML5 04