Ahora también distribuidor oficial BQ

Aplicaciones Web (VII)

HTML5 CSS3 JSTáctil

Ejemplo de un Cronómetro

WebApp similar a un cronómetro digital

Cuenta décimas de segundo (100 milisegundos)
El contador se inicializa con 0,0 segundos
n.toFixed(1) formatea a cifra con 1 decimal

Tiene 2 botones
arrancar/parar: arranca o para la cuenta a partir del valor en que quedó
* arranca si cronómetro parado
* para si cronómetro contando
inicializar: pone el contador a 0,0

DOM como almacén de datos

El navegador guarda en document la página HTML que está mostrando
document es un objeto JavaScript con propiedades
que contienen todos los elementos de la página

Las propiedades DOM son variables: src, value, innerHTML, …
donde la información se puede guardar y recuperar
DOM solo contiene strings y todo debe convertirse a/de string

Los elementos de DOM se pueden utilizar como variables
Hemos utilizado el elemento <span id=”crono”>
para almacenar el contador de décimas de segundo

Eventos táctiles

iPhone (2007): dispara el uso de pantallas táctiles
Empiezan a incluirse eventos “touch” en navegadores (JavaScript)

W3C está normalizando eventos táctiles básicos o toques touchstart, touchmove, touchend
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Touch_events

Los tipos de toque en pantalla se denominan gestos o gestures
Se están generando librerías de eventos, que incluyen por ejemplo:
toque (tap), desplazamiento (swipe), pellizco (pinch), …

Gestos (gestures)

La tendencia es utilizar gestos complejos soportados por librerías
TapQUO, Zepto (touch, gesture), jQuery Mobile, Hammer, …
La figura muestra eventos táctiles de la librería TapQUO

Gestos

 

Eventos básicos para pantalla táctil (W3C)

Eventos táctiles básicos devuelven un array de toques (TouchList)

Un elemento por cada dedo que toque, generando 3 eventos
touchstart: evento disparado al tocar la pantalla
touchmove: evento disparado al finalizar el movimiento del toque
touchend: evento disparado al acabar del toque

Cada elemento de TouchList lleva las coordenadas y otros datos del toque

El ejemplo siguiente modifica los controladores de eventos
Clic sencillo y doble de ratón por los eventos swipe-right y swipe-left
Los gestos swipe-right y swipe-left se detectan midiendo
la diferencia de la coordenada X entre touchstart y touchmove

Ver ejemplo: 35-event_touch.htm

Eventos táctiles y Zepto

El único evento reutilizable en pantallas táctiles es: click

Suele estar enlazado al evento tap y funciona con pantallas táctiles

Zepto incluye 2 librerías de gestos táctiles

touch.js que añade los eventos
tap, singleTap, doubleTap, swipe, swipeUp, swipeDown, swipeLeft, swipeRight

gesture.js que añade los eventos
pinch, pinchIn, pinchOut

Los S.O. de los dispositivos táctiles como iOS o Android, llevan eventos predefinidos asociados a gestos
Por ejemplo, iOS (Apple) predefine double_tab (ampliar) y pinch (ampliar)

La configuración por defecto se quita incluyendo en el manejador
evento.preventDefault()

La librería touch.js de Zepto detecta y dispara eventos táctiles automáticamente
Si cargamos la librería podemos definir directamente manejadores de
swipeRight y swipeLeft sobre el icono

Ver ejemplo: 36-event_touch_zepto.htm

HTML5 CSS3 JS
Memoria local en HTML5

Almacenamiento de datos en cliente

HTML5 implementa nuevos tipos de almacenamiento de variables
Sencillas y eficientes de utilizar desde Javascript
Definición: http://dev.w3.org/html5/webstorage/

Variables locales
Los datos se guardan permanentemente, hasta que se borran

Variables de sesión
Los datos solo se guardan solo durante la sesión
Comienzo de sesión: apertura de navegador o pestaña
Final de sesión: cierre de navegador o pestaña

 

Variables locales y de sesión

Son propiedades de los objetos localStorage y sessionStorage solo pueden contener strings, como por ejemplo
 localStorage.usuario = “Pedro Pérez”;
 sessionStorage.apellido = “Pérez”;

Las variables locales están asociadas a protocolo, dominio y puerto
un programa solo puede acceder a propiedades de local/sessionStorage
creadas por otros programas cargados del mismo servidor

Same origin policy
Seguridad: un programa solo confia en programas del mismo servidor
Modularidad: cada servidor tiene un espacio de nombres diferente

 

Ejemplo de localStorage

Cada usuario que acceda a esta página tendrá una cuenta diferente
La variable está en su navegador

Ver ejemplo: 40-visitCount.html

 

Cronómetro con memoria

Nueva versión del cronómetro con localStorage
así mantiene la cuenta de décimas de segundos entre usos sucesivos de la aplicación

El cronómetro utiliza ahora la variable
localStorage.c para guardar la cuenta de segundos

Debemos inicializar localStorage.c con parámetro por defecto para cuando se ejecute por primera vez

Como la información se guarda ahora en localStorage y no en DOM hay que actualizar primero localStorage y luego mostrar en DOM

Ver ejemplo: 41-cronometro_localStorage.htm

 

HTML5 CSS3 JS

 

JSON: JavaScript Object Notation

JSON

JSON: formato textual de representación de tipos y objetos JavaScript
http://json.org/json-es.html

Un objeto JavaScript se transforma a un string JSON con
JSON.stringify(object)

Un string JSON se transforma en el objeto original con
JSON.parse(string_JSON)


var x = {a:1, b:{y:[false, null, ""]}}, y, z;
y = JSON.stringify(x);      => '{"a":1, "b":{"y":[false, null, ""]} }'
z = JSON.parse(y);          =>  { a:1, b:{ y:[ false, null, "" ] } }


 Serialización de datos

Serialización:
transformación reversible de un tipo u objeto (enmemoria) en un string equivalente

La serialización es un formato de intercambio de datos
Almacenar datos en un fichero
Enviar datos a través de una línea de comunicación
Paso de parámetros en interfaces REST

En JavaScript se realiza desde ECMAScript 5 con
JSON.stringify(…) y JSON.parse(…)

Otros formatos de serialización: XML, HTML, XDR(C), …
Estos formatos están siendo desplazados por JSON, incluso XML
Hay bibliotecas de JSON para los lenguajes más importantes

 

Características de JSON

JSON puede serializar

Objetos, arrays, strings, números finitos, true, false y null
NaN, Infinity y -Infinity se serializan a null

Objetos Date se serializan a formato ISO
la reconstrucción devuelve un string y no el objeto original

No se puede serializar
Funciones, RegExp, errores, undefined

Admite filtros para los elementos no soportados
ver doc de APIs JavaScript


JSON.stringify(new Date()) => '"2013-08-08T17:13:10.751Z"'
JSON.stringify(NaN)        => 'null'
JSON.stringify(Infinity)   => 'null'


 

JSON en ejemplo con iframes, array y for

Si queremos almacenar en el navegador el array de urls para que no se pierdan los urls introducidos, hay que  guardarlo serializado con JSON en localStorage.

Ver ejemplo: 56-for_iframe_localStorage.htm

 

Comments are closed.