JAVASCRIPT Y OTRAS APIS DE

HTML5
DISEÑO Y DESARROLLO DE APLICACIONES MÓVILES
JAVASCRIPT Y NODE.JS
JavaScript no debe considerarse solamente como
un lenguaje para trabajar del lado del cliente. En la
actualidad JavaScript también ofrece opciones para
tecnologías del lado del servidor.
Node.js es una plataforma que ofrece un gran
potencial para nuestros desarrollos y para los
desarrollos del lado del servidor. Utiliza una
arquitectura de gran escalabilidad. Los servidores
que trabajan con esta tecnología pueden lograr
soluciones eficientes, de baja latencia, funcionando
en equipos que no requieren tantos recursos como
otras alternativas de mercado.
Node.js es una solución cada vez más utilizada en
producción de desarrollos compatibles con
diferentes dispositivos y apunta a dar soluciones a
las necesidades del mercado moderno, tanto para
stream de contenidos como para aplicaciones que
requieren interacción en tiempo real.
API LOCAL STORAGE Y SESSION STORAGE
El almacenamiento de información persistente
o de sesión en el lado del cliente, por muchos
años fue resuelto principalmente con el uso
de cookies. Esta estrategia, algo limitada, pero
efectiva, en algunos casos puede resultar
insuficiente para las necesidades que en la
actualidad demanda el desarrollo web.
HTML5 ofrece una solución por medio de
Local Storage (almacenamiento persistente) y
Session Storage (almacenamiento de sesión)
Para guardar un valor de sesión escribimos el
siguiente script:
sessionStorage.setItem(‘nombre_clave’,’valor’);
Para recuperar el valor de sesión utilizamos:
sessionStorage.getItem(‘nombre_clave’);
Podemos guardar datos persistentes con Local
Storage:
localStorage.setItem(‘nombre_clave’,’valor’);
Y lo recuperamos con el siguiente código:
localStorage.getItem(‘nombre_clave’);
Si deseamos remover un ítem que almacenamos,
utilizamos:
Localstorage.removeItem(‘nombre_de_clave’);
WEB SQL DATABASE

Al momento de definir una base de datos local

para el estándar, en primera instancia, se pensó en
permitir un modelo relacional que pueda trabajar
con el lenguaje SQL. Así, nació la idea de Web SQL
Database. Sin embargo, el documento de esta
especificación se descontinuó por parte del W3C
en favor de otras opciones. Sin embargo, existen
varios navegadores que ya tienen incorporada Web
SQL Database de manera funcional y la mantienen,
como Chrome, Safari y Opera en sus versiones de
escritorio, y iOS Safari, Android Browser, Chrome
para Android, Opera Mobile y BlackBerry Browser.
PRINCIPALES MÉTODOS DE WEB SQL DATABASE

openDataBase: permite abrir la base de datos o

crearla, en caso de no existir. Como argumento,
puede recibir el nombre de la base de datos, el
número de versión, el texto que la describe y el
tamaño estimado.
transaction: permite crear transacciones con la
base de datos.
executeSql: brinda la posibilidad de leer o escribir
datos. Se puede utilizar SQL para pasar queries con
este método.
INDEXEDDB
Al descartar el avance sobre Web SQL Database, el W3C
decidió enfocarse en otro tipo de base de datos para el
almacenamiento en el equipo cliente. Es así cómo surge la API
de IndexedDB. Mediante el uso de índices, logra un mejor
rendimiento y una mayor capacidad de almacenamiento que
en otras alternativas.
Para abrir una base de datos con IndexedDb utilizamos el
método open( ).
var request =indexedDB.open(“miDB”,1);

Esta API puede trabajar de manera asíncrona, ofreciendo una

solución de alto rendimiento y permitiendo que las
transacciones no bloqueen el hilo principal de la aplicación.
PRINCIPALES OBJETOS DE INDEXEDDB
OBJETO DESCRIPCIÓN
IDBFactory Permite acceder, crear y manipular objetos almacenados en la base de datos.
IDBCursor Es la interfaz que define un cursor y se puede utilizar para realizar la interacción sobre objetos
almacenados.
IDBCursorWithValue Permite realizar iteraciones sobre objetos almacenados e índices. Brinda la posibilidad de acceder
a la propiedad value, que retorna el valor de la información en la posición actual del cursor.
IDBDatabase Contiene los métodos que permiten crear o borrar un object store y realizar transacciones.
IDBIndex Permite acceder a la metadata de un índice y ofrece métodos para contar el número de registros
de un object store (correspondientes a una clave o rango), obtener la clave de un índice y otros
métodos relacionados con cursores.
IDBKeyRange Brinda la posibilidad de definir un rango para aplicar un filtro dentro de un conjunto de valores.
IDBObjectStore Es la representación de un object store de la base de datos y cuenta con métodos para agregar o
borrar registros, crear o borrar índices, realizar reemplazos IDBOpenDBRequest y trabajar con
cursores.
IDBOpenDBRequest Se emplea para enviar el requerimiento de apertura de la base de datos.
IDBTransaction Transacción a la base de datos.
OFF-LINE WEB APPLICATION

Construir aplicaciones web que puedan funcionar off-

line es uno de los grandes retos de esta etapa de
internet. A partir de HTML5, esto se puede lograr
mediante la creación de un archivo que actúa como
manifiesto, donde se especifican los archivos que
pueden trabajar off-line y aquellos que requieren
conexión.
Para trabajar con Off-line Application Caching API,
primero debemos configurar el tag html:
<html Lang=“es” manifest=“cache.manifest”>
Indicando el nombre y la ubicación del archivo
manifiesto. Este archivo debe ser ofrecido por el
servidor en formato MIME type text/cache-manifest y
la extensión debe ser .manifest.
OFF-LINE WEB APPLICATION EJEMPLO:

CACHE MANIFEST
En segundo lugar, debemos comenzar a especificar
los recursos en el archivo del manifiesto. Para # VERSION 1.0
crearlo o editarlo, podemos utilizar cualquier editor CACHE:
de texto o código. Una vez creado el archivo,
debemos indicar la versión del manifiesto y Pag1.html
escribir, en la sección correspondiente, el nombre Img/imagen1.jpg
de los archivos que deseamos que funcionen on-
line y de aquellos que lo harán de modo off-line.
El archivo .manifest cuenta con tres secciones NETWORK:
principales: CACHE(Archivos que se incluirán en el Pag2.html
caché), NETWORK(Archivos que requieren conexión
con el servidor) y FALLBACK(Alternativa si no está
disponible un recurso que requiere conexión). FALLBACK:
pagina.html
OBJETOS DEL EVENTO APPLICATIONCACHE
Para saber el estado de la caché, utilizamos la propiedad status del objeto applicationCache. Los eventos
vinculados con este objeto son los siguientes:

EVENTO DESCRIPCIÓN
oncheking Es el primer evento que se dispara para verificar actualizaciones y nuevos
contenidos.
onerror Cuando ocurre un error al realizar alguna operación relacionada con el caché.
ondownloading Ocurre cuando comienzan a descargarse los archivos al caché.
onprogress Ocurre cuando cada elemento comienza a descargarse al caché.
oncached Después de que se pudo realizar el caché.
onnoupdate Cuando el proceso de actualización ha concluido y el archivo .manifiest no ha
cambiado.
onupdateready La actualización se ha efectuado y el caché está listo para ser utilizado.
onobsolete Ocurre cuando el manifiesto para un sitio se ha eliminado (error de servidor
404), el contenido cacheado pasa a ser obsoleto.
FILE API
Esta FILE API proporciona la capacidad de interactuar de una El trabajo de la API de archivos de HTML5 debe complementarse
manera eficiente con archivos locales sin la intervención del con otras tecnologías, como por ejemplo la subida de archivos
servidor. Esta FILE API proporciona la vista previa de imágenes mediante AJAX u otras técnicas. Si deseamos seleccionar un
antes de subirlas, sin necesidad de pasar por el servidor; ver archivo, es posible hacerlo mediante un campo de formulario
datos de tamaño y extensión de archivos para filtrarlos de como vemos en el siguiente código:
acuerdo con esta información.
<input type=“file” name=“file” id=“archivo”>
Las interfaces que contamos para trabajar son las siguientes:
Es posible acceder al valor con JavaScript mediante el siguiente
File: permite leer la información de un archivo (nombre y código:
última fecha de modificación).
Var selected_file=document.getElementById(‘archivo’).files[0];
FileList: posibilita trabajar con un array de archivos.
Blob: representa la información binaria de un archivo en
formato RAW.
FileReader: provee los métodos para leer un archivo (File o
Blob).
BIBLIOGRAFÍA

• Damián, D. L. (2016). Apps HTML para móviles Desarrollo de aplicaciones para smartphones y tablets
basado en tecnologías web. Buenos Aires, Argentina.: Alfaomega Grupo Editor Argentino, 2016.
¡MUCHAS GRACIAS POR TU
VALIOSA ATENCIÓN!