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. 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. HOLA var mover=document.querySelector('mover'); mover.ondragstart = function( e ){ e.dataTransfer.setData( 'Text', 'CONTENIDO' ); }

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 ONLINE Obtener 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 );

FULLSCREEN 100% 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 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: –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