taller de html5. clase 04 – prof. germán rodrÍguez
TRANSCRIPT
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