APIs HTML 5, ¿Qué, cómo y donde?

Si no comprendes muy bien el concepto de API, te recomiendo leer esta entrada.


Básicamente una API nos sirve para comunicarnos con cualquier sistema al rededor del mundo.

Con “sistema”, no me refiero a un data center al otro lado del planeta rodeado de asiáticos.

No.

Un sistema lo tienes en la misma computadora/celular que esta leyendo eso.

El sistema operativo.

Pero resulta que los sistemas pueden tener sub sistemas dentro de ellos.

Osea que tu sistema operativo (Windows, iOS, Android) puede tener otro sistema adentro (Google Chrome) y Chrome puede tener otros sistemas adentro. Esos “sistemas” nos ofrecen funcionalidades adicionales (acceder a la ubicación actual, arrastrar archivos, almacenar información, etc).

Estas funcionalidades las programo alguien mas. Nosotros lo único que tenemos que aprender es como llamar esas funcionalidades (usando su API)

Vamos a estudiar algunas de esas funcionalidades:

1. Drag And Drop (DND)

Lo hemos hecho toda la vida. Arrastrar iconos en el escritorio.

Sin embargo, arrastrar elementos en el navegador.

Eso es algo nuevo.

Drag and drop consta de 3 fases principales, las cuales tienen relacionadas 3 eventos en Javascript:

  1. Drag (“dragstart”)
  2. Dragging (“dragover”)
  3. Drop (“drop”)

Que es justo como mover una caja de un punto A hacia un punto B.

  1. Tomas la caja
  2. Transportas la caja.
  3. Sueltas la caja.

Vamos a crear un ejemplo para mover la imagen de un punto A a un punto B en el navegador.

El contenedor al cual vamos a arrastrar la imagen, es un div.


Lo primero que debemos hacer es indicar que la imagen es arrastable:

<img src="perrito.jpg" id="1" draggable="true">

Después de esto, pasamos a la fase 1: Drag. (tomar la caja)

Para definir esta fase, usamos el evento “dragstart”

Definimos el evento.

var imagen = document.getElementById("1");
imagen.addEventListener("dragstart",iniciarDrag);

Después definimos la función iniciarDrag.

function iniciarDrag(){
    this.style.opacity = 0.3;
}

Únicamente lo decimos que cuando iniciemos el drag, cambie lo opacidad de la imagen. Resultando esto: (esperar unos segundos para ver el cambio de opacidad)

Sin embargo, necesitamos recordar de alguna forma el elemento que estamos arrastrando (la imagen) mientras hacemos el proceso de arrastre. Para eso esta el objeto dataTransfer, el cual es una propiedad del objeto event.

Necesitamos guardar el id de nuestro elemento allí.

Por lo cual tenemos que modificar nuestra función iniciarDrag un poco.

function iniciarDrag(){
     this.style.opacity = 0.3;
event.dataTransfer.setData("imagenAMover",event.target.id)
}

Haciendo esto, sabemos que tenemos una variable llamada “imagenAMover”, la cual tiene guardada el id de la imagen que vamos a mover. (vamos a utilizar esa info posteriormente).

Ahora, pasamos a la fase 2: Dragging (mover la caja)

Esta fase tiene el evento “dragover” relacionado a ella.

La fase 2, responde la pregunta. ¿En donde mover? Por lo cual le aplicamos el evento al elemento destino. En este caso a un div.

var destino = document.getElementById("destino")
destino.addEventListener("dragover",administrarMovimiento)

Definimos la funcion administrar movimiento.

funcion administrarMovimiento(){
    event.preventDefault();
}

Por default, los elementos no pueden ser arrastrados a otros elementos. Por lo que tenemos que cancelar ese comportamiento default.

Ahora vamos a la fase 3: Drop (soltar la caja)

La fase 3, tiene relacionada el evento: “drop” y se aplica igualmente al elemento que va a recibir el item.

En este caso, el div.

var destino = document.getElementById("destino")
destino.addEventListener("drop",soltarElemento)

La función soltar elemento se define asi:

function soltarElemento(){
var idDeDrag = event.dataTransfer.getData("perrito");
event.target.appendChild(document.getElementById(idDeDrag));
}

Necesitamos saber que vamos a soltar. Recordar que habíamos guardado el id del elemento arrastrado en el objeto dataTransfer, así que solo usamos el método getData para obtener ese id.

Finalmente en el elemento receptor (div) le agregamos el hijo usando el método appendChild.

2- Web Storage

Muchas veces necesitamos que nuestras páginas HTML tengan una memoria. Por ejemplo, si tenemos la variable contador y la incrementamos.

var contador = 0;
contador++;
console.log(contador); // contador es igual a 1

Pero, si refrescamos el HTML que contiene ese JS, todo se reinicia y si pedimos el valor de contador, volvera a ser cero.

Para resolver ese problema de “memoria” y poder recordar cosas aun que se recargue el navegador, se invento el web storage.

Es importante resaltar que Web Storage guarda todo lo que le digamos únicamente del lado del cliente (en el navegador).

Hay 2 tipos de “memorias” web storage:

  • LocalStorage: Guarda información con tiempo sin tiempo definido.
  • SessionStorage: Guarda información, unicamente durante una sesión. (mientras la pestaña actual este abierta, despues se borra todo)

Para acceder a esta API, unicamente tienes que escribir:

localStorage.setItem("contador","0")

Ahora hemos definido una variable y si refrescamos el navegador, no se va a perder la información.

El valor de contador se guarda como string, por que únicamente puede almacenar strings (pero despues lo podemos leer como número)

Ahora, si quisieramos incrementar nuestro contador, tendriamos que hacer

var contadorNuevo = Number(localStorage.getItem("contador"))
contadorNuevo ++; // Contador ahora vale 1

Para guardar el nuevo valor, volvemos a acceder al API.

localStorage.setItem("contador", contadorNuevo)

Y ahora, por mas que refresquemos nuestro navegador, contador siempre será 1.

3. Geolocation

Los métodos JavaScript que utiliza para la ubicación de un usuario los hace a través del Geolocation object contenido en window.navigator.geolocation. Esta API define tres métodos:

  • getCurrentPosition(): Recupera la posición actual y se ejecuta una sola vez.
  • watchPosition(): Recupera y actualiza la posición actual a medida que cambia de posición.
  • clearWatch(): Detiene la actualización de una vista (Watch) de posición.

Con este pedazo de código podremos ver en consola datos interesantes, pues el Geolocation object contiene una propiedad timestamp y otra llamada coordinates, donde este último objeto puede contener valores nulos, lo que significa que no debemos asustarnos ya que esto funciona según las capacidades del hardware donde lo visualiza. aquí te describimos cada uno para que los comprendas mejor:

  • latitude (latitud): La posición norte-sur sobre la tierra.
  • longitude (Longitud): La posición de occidente a oriente sobre la tierra
  • altitude (altitud): La altura de la posición, solo si el dispositivo de visualización tiene la capacidad de medir la altitud.
  • accuracy (exactitud): Precisión de las alturas, exactitud, que es medida en metros.
  • heading: Dirección y recorrido, medida en grados alrededor de un círculo.
  • speed (velocidad): La velocidad de desplazamiento en una partida determinada en metros por segundo.

Como puedes ver aquí tenemos mucha información útil que te servirá para tus proyectos donde tengas que incluir la ubicación del usuario…

4. File — FileSystem

Con esta API, una aplicación web puede crear, leer, explorar y editar una sección de prueba del sistema de archivos local del usuario.

El API se divide en varios temas:

  • File: representa un archivo individual que proporciona información de solo lectura (por ejemplo, el nombre, el tamaño del archivo, el tipo MIME y una referencia al control del archivo).
  • FileList: representa una secuencia de conjunto de objetos File (tanto la secuencia <input type=”file” multiple> como arrastrar un directorio de archivos desde el escritorio se consideran ejemplos de esta interfaz).
  • Blob: permite fragmentar un archivo en intervalos de bytes.

Al utilizar el API FILE lo primero que debemos hacer es comprobar que el navegador sea compatible con él:

Ahora te preguntarás cómo podemos usar esta API.

La forma más sencilla de cargar un archivo es utilizar un elemento <input type=”file”> estándar. JavaScript devuelve la lista de objetos File seleccionados como una secuencia FileList. A continuación, se muestra un ejemplo en el que se utiliza el atributo “multiple” para permitir la selección simultánea de varios archivos:

Ahora viene lo interesante…

Después de obtener una referencia de File, crea instancias de un objeto FileReader para leer su contenido en memoria. Cuando finaliza la carga, se activa el evento onload del lector y se puede utilizar su atributo result para acceder a los datos del archivo.

Después de esto, se indican las cuatro opciones de lectura asíncrona de archivo que incluye FileReader.

  • FileReader.readAsBinaryString(Blob|File): la propiedad result contendrá los datos del archivo/objeto BLOB en forma de cadena binaria. Cada byte se representa con un número entero comprendido entre 0 y 0,255, ambos incluidos.
  • FileReader.readAsText(Blob|File, opt_encoding): la propiedad result contendrá los datos del archivo/objeto BLOB en forma de cadena de texto. De forma predeterminada, la cadena se decodifica con el formato “UTF-8”. Utiliza el parámetro de codificación opcional para especificar un formato diferente.
  • FileReader.readAsDataURL(Blob|File): la propiedad result contendrá los datos del archivo/objeto BLOB codificados como una URL de datos.
  • FileReader.readAsArrayBuffer(Blob|File): la propiedad result contendrá los datos del archivo/objeto BLOB como un objeto ArrayBuffer.
    Una vez que se ha activado uno de estos métodos de lectura en el objeto FileReader, se pueden utilizar los eventos onloadstart, onprogress, onload, onabort, onerror y onloadend para realizar un seguimiento de su progreso.

En el ejemplo que se muestra a continuación, se excluyen las imágenes de los elementos seleccionados por el usuario, se activa reader.readAsDataURL() en el archivo y se muestra una miniatura estableciendo una URL de datos como valor del atributo “src”.

Solo será necesario poner en el HTML el siguiente código:

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

Por ahora terminamos con algunas de las APIs que podemos utilizar al momento de realizar nuestros desarrollos

¡Sigue creando!