Aprende los APIS de HTML5 sin dolor

El API de localStorage sustituye a las actuales cookies en potencia y sencillez. Es por eso que se les llama “superCookies” o “cookies con esteroides”. También tenemos a sus hermanas gemelas, las SessionStorage, que funcionan exactamente igual, sólo duran durante la sesión del navegador.

Por medio de LocalStorage podemos almacenar los datos del usuario en forma permanente. En este video grabaremos los datos de acceso de un login en el disco del usuario, el famoso “recuerdame” de cualquier acceso con clave.

Una de las limitaciones que tenemos con los localStorage y las sessionStorage es que sólo almacenan cadenas, por lo que si lo almacenamos en el formato JSON, y gracias a las instrucciones de JavaScript, podremos convertir los objetos de JavaScript a JSON y viceversa.

Por medio del formato JSON podemos almacenar información con localStorage y luego regresar al formato de objeto de javaScript por medio de la función parse() y stringify().

Una vez que tenemos la información en formato JSON, podemos ya manipularla con javaScript. Este pequeño sistema solo lo podemos visualizar en el navegador en el que trabajemos. Si cambiamos de navegador, ya no veremos la información, al igual que nos pasaría con las cookies.

Por último desarrollaremos el proceso de modificación de la información, en este caso los datos de unos libros propios. Tomaremos como base el proceso de alta y utilizaremos un par de variables para controlar el proceso.

Con el API file podemos manipular los archivos de la computadora del usuario: podemos abrirlos, leerlos, obtener su información entre muchas otras funcionalidades.

Por medio de la etiqueta tradicional <input> podemos seleccionar el archivo que vamos a procesar con el API mediante HTML5.

Por medio del API File de HTML5 leeremos los datos del archivo (con ayuda de JavaScript, claro)

Por medio del API de archivos de HTML5 nos será muy sencillo leer varios archivos a la vez, los cuales podremos procesar más adelante con JavaScript o cualquier otra librería.

El API de archivo (File-API) también lo podemos combinar con el API de Arrastrar y Soltar (Drag&Drop).

Por medio del API de archivos de HTML5 podemos hacer un filtro para diferentes tipos de archivos. En este video veremos cómo hacer un filtro para imágenes y mostrarlas.

Por medio del API File podemos leer archivos planos, incluso con etiquetas HTML.

También podremos leer datos binarios, como imágenes, y mostrarlas en nuestras páginas, desde la computadora del usuario.

Parte muy importante cuando manejamos recursos externos a nuestras páginas, será detectar eventos tales como el inicio y la finalización de su carga, que por definición son procesos asíncronos. El API File contará con eventos para detectar estos puntos.

Por último veremos los eventos del proceso de la carga, con lo cual podemos hacer un indicador de la misma, y también podremos detectar si existe un error en la misma.

La funcionalidad de Arrastrar y Soltar, o Drag & Drop, es una de las más antiguas, desarrollada por Microsoft (aunque usted no lo crea) e incorporada a HTML5.

Para manipular los objetos en el API Drag&Drop, necesitamos conocer sus eventos: iniciar el movimiento de arrastrar, soltar, etc.

Los web workers son rutinas que podemos manejar desde el background del navegador y nos ayudan a procesos que serían muy pesados, desde el punto de vista del navegador.

En este video veremos un ejemplo sencillo de cómo se puede utilizar un web worker de HTML5 por medio de un contador y cómo detenerlo

El API Offline nos permitirá crear aplicaciones fuera de línea, es decir, aplicaciones que funcionen aún si no contamos con conexión de Internet.

El manifiesto es el corazón de una aplicación fuera de línea. En este video veremos sus secciones y las reglas para formarlo y llamarlo desde una página HTML.

En este video veremos un ejemplo generado por el WHATWG para una aplicación fuera de línea, aplicando los principios vistos en los dos vídeos anteriores.

• SVG (Scalable Vector Graphics) es un estándar en el manejo de figuras vectoriales.
• Es una recomendación de la W3C.
• Basados en una sintaxis de XML.

Por medio de la etiqueta <circle> podemos hacer círculos y determinar su ubicación, tamaño, color y contorno.

Por medio de la etiqueta <rect> podemos hacer rectángulos y cuadrados, así como determinar su ubicación, tamaño, color y contorno.

El API SVG nos permite hacer elipses de manera sencilla por medio de la etiqueta <ellipse>

Por medio de la etiqueta <line> podemos dibujar líneas en el API SVG

Una poderosa herramienta para crear dibujos vectoriales será el polígono, con la etiqueta <polygone>, donde dibujaremos una figura a partir de una serie de puntos dados.

Por medio de la etiqueta <polyline> podemos hacer líneas compuestas determinando varios puntos en el espacio de dibujo.

Con la herramienta <path> podremos hacer polígonos, curvas Bézier entre muchos comandos, como líneas o arcos. Es una etiqueta muy completa y poderosa.

Con la herramienta <path> podremos hacer polígonos, curvas Bézier entre muchos comandos, como líneas o arcos. Es una etiqueta muy completa y poderosa.

Por medio del API SVG podremos manejar texto vectorial e incluso rotarlo y transformarlo a nuestro antojo, así como controlar su color, contorno y posición por medio de la etiqueta <text>

El canvas o lienzo en HTML podemos hacer dibujos en mapas de bits. No son dibujos vectoriales.

Aunque la etiqueta canvas es compatible con los mayores navegadores, siempre es conveniente hacer la verificación, para evitar problemas.

La especificación de la W3C nos maneja un contexto 2D y 3D, pero únicamente esta disponible el 2D, que es en realidad donde trabajaremos.

El CANVAS puede crear dibujos tanto de relleno como de contorno, aunque no estamos haciendo objetos vectoriales, son figuras de bit maps.

Una parte fundamental de un dibujo es el crear líneas de manera muy sencilla.

Las curvas bezier se definen con tres puntos (cuadráticas) en canvas HTML5

En el canvas podemos dibujar una curva bezier de cuatro puntos, o cuervas bezier cúbicas.

Una herramienta importante en el canvas es el desarrollo de gradientes lineales en canvas de HTML5

Por medio de los gradientes podemos cambiar la dirección, como se ve en el siguiente video.

En el canvas de HTML5 podemos cargar imágenes y aplicarlas a los rellenos, contornos y textos.

Otras herramienta con la que podemos aplocar sombras o dibujos y textos en el canvas de HTML5

En 2010 se dejó de dar soporte a WebSQL (SQLite en navegadores).

La especificación para el manejo de base de datos en navegadores es IndexedDB.

Tanto WebSQL como IndexedDB son soportados para dispositivos móviles.

También se puede utilizar LocalStorage y SessionStorage, pero son más bien para almacenar cadena.

• Almacén de objetos: Es el lugar donde los objetos quedan en forma persistente. Su nombre de ser único y válido en JavaScript.
• Los objetos son almacenados en forma ordenada en base a las llaves.
• Un almacén de objetos puede tener un generador de llaves y una ruta de llaves.
• Si el almacén de objetos utiliza una ruta de llaves, éstas pueden ser internas o externas.

Toda base de datos tiene una versión, iniciando con la versión 1.

Sólo se puede tener una versión. Las versiones son manejadas en un número entero, no fracciones (1.0.0 no es aceptado).

Si se desea crear otra versión, se realiza al abrir la base de datos.

Al abrir una base de datos se disparan tres eventos:

• Un evento si la apertura fue exitosa (success)

• Un evento si la apertura fue erronea (error)

• Un evento si hay un cambio de versión  (upgradeneeded).

El único momento cuando se puede actualizar o modificar el esquema de la base de datos, es en el evento upgradeneeded.

• Un índice es un almacén especializado para buscar registros en otro almacén, llamado almacén de objetos referenciado.

• El índice es un almacenamiento persistente llave-valor donde el valor es una llave del almacén referenciado.

• Los registros en un índice son rellenados automáticamente cada vez que se modifican los registros del almacén referenciado.

• Cada registro en un índice puede apuntar solo a un registro de su almacén referenciado, pero varios índices pueden apuntar al mismo almacén.

• Alternativamente, se pueden realizar búsquedas en un almacén de objetos usando la llave.

• Un cursor es un mecanismo para iterar a través de múltiples registros con un rango de llaves.

• El cursor tiene un origen que indica que índice o almacén de datos está iterando.

• El cursor tiene una posición dentro del rango, y se mueve en dirección creciente o decreciente en el orden de las llaves de cada registro.

• Un rango de llaves es un intervalo continuo sobre algún tipo de datos utilizado para las llaves.

• Los registros pueden obtenerse desde los almacenes e índices usando llaves o un rango de llaves.

• Los rangos pueden limitarse o filtrarse con umbrales o rangos inferiores y superiores. 

Los pasos básicos para trabajar con IndexedDB son los siguientes:

• Validar el navegador.

• Abre una base de datos.

• Crea un almacén de objetos en la base de datos.

• Inicia una transacción y hace una petición (request) que hace alguna operación de la base de datos, tal como añadir o recuperar datos.

• Espere a que se complete la operación por el listener de la clase correcta de eventos DOM .

• Hace algo con el resultado (el cual puede ser encontrado en el objeto de request).

Algunos navegadores aún utilizan el prefijo del fabricante para manejar IndexedDB.

Estas versiones antiguas por lo general aún tienen buggs, por lo que se recomienda mejor no soportarlas.

// dejamos abierta nuestra base de datos

var request = window.indexedDB.open("miBaseDatos", 1);

Si la base no existe, es creada.

Con el número de versión podemos cambiar el esquema de la base de datos.

• Un evento si la apertura fue exitosa (success)

• Un evento si la apertura fue erronea (error)

• Un evento si hay un cambio de versión  (upgradeneeded).

• Podemos generar una llave por medio de un generador de llaves (autoincrement) o un camino de llaves (keyPath).

• Sin keyPath y sin  autoincrement: El control lo tiene el usuario, por ejemplo, las claves naturales, como matrícula del estudiantes, placas de un auto, número de empleado, etc.

• Con keyPath sin autoincrement: Solo se pueden almacenar objetos JavaScript. Los objetos deben tener una propiedad con el mismo nombre que la ruta de acceso de clave.

• En el evento onupgradeneeded no solo podemos modificar la estructura de la base de datos, también podemos añadir, modificar y borrar objetos, así como crear o eliminar índices.

• Con el método createObjectStore() creamos los almacenes de datos pasando dos parámetros: el nombre y las opciones de las llaves.

• Este último parámetro es opcional.

• Las transacciones pueden ser:

• readwrite

• readonly

• versionchange

• El resultado de una solicitud generada a partir de una llamada add () es la clave del valor que se agregó.

• Tenga en cuenta que la función add () requiere que ningún objeto ya esté en la base de datos con la misma clave.

• Si está intentando modificar una entrada existente, o no le importa si ya existe, puede usar la función put ()

• Usar get () requiere que sepa qué clave desea recuperar.

• Si desea examinar todos los valores de su almacén de objetos, puede utilizar un cursor.

• La función openCursor() toma varios argumentos.

• En primer lugar, puede limitar el rango de elementos que se recuperan utilizando un objeto de rango de clave.

• En segundo lugar, puede especificar la dirección que desea iterar.

• En el ejemplo anterior, estamos iterando sobre todos los objetos en orden ascendente.

• Si quieres seguir “barriendo” el cursor, entonces tienes que llamar al método continue () en el cursor.

• Cuando haya llegado al final de los datos (o si no hay entradas que coincidan con su solicitud openCursor ()) todavía obtiene una devolución de llamada de éxito, pero la propiedad de resultado es indefinida.

• Un patrón común con los cursores es recuperar todos los objetos en un almacén de objetos y agregarlos a un arreglo, como esto:

Eliminar datos es muy similar a los procesos que hemos revisado:

var request = db.transaction(["libro"], "readwrite")

               .objectStore("libro")

               .delete("123");

Podemos leer un solo objeto de la base de datos por medio del método get(), anexado a una transacción.

Por medio del método put() podemos guardar un objeto, si este no existe, o modificarlo, si es que este ya existe.