6. Web APIs#

Hay muchas Web APIs en los navegadores modernos que evitan la necesidad de usar librerías o APIs externas. No todas están disponibles en todos los navegadores y versiones, y algunas están en fase experimental. En este tema profundizaremos en su uso con algunos ejemplos para trabajar con:

  1. El contenido del documento

  2. El navegador

  3. El almacenamiento

  4. La posición

Esfuerzo Necesario

El curso está organizado en 8 sesiones de clase. Cada clase (sesión) implica una dedicación de entre 2 y 4 horas.

La dedicación depende del conocimiento previo, motivación y capacidad de aprendizaje del estudiante para esa sesión en concreto.

Video Clase

6.1. Manipulación de Documentos#

Video Clase

  1. Lo hemos visto anteriormente:

    1. Web API DOM

    2. ¿Qué puedo hacer con el DOM?

    3. Una página dinámica (con JS)

  2. El navegador te ofrece un API para que puedas modificar el documento :

    1. Tanto el contenido

    2. Como el estilo

    https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents/document-window-navigator.png

  3. Los eventos no son imprescindibles (ayudan con la interactividad):

    1. Una cosa es la interfaz para manipular el DOM

    2. Y otra añadirle un control por eventos

Actividad T06-A01. Ejercicio Básico DOM

Tienes un documento web sencillo (con párrafos / enlaces / viñetas) con elementos identificados con p_1 y p_2 (párrafos), v_1 y v_2 (lista no numerada).

Realizarás la programación cliente para que cambie de forma aleatoria cada vez que se recargue la página. Los requisitos serán los siguientes:

  1. p_1 tendrá un color de letra de entre los siguientes valores: rojo, azul, verde

  2. La letra de la página cambiará su tamaño según diferentes porcentajes (50%, 120%, 200%)

  3. Uno de los elementos de v_1 se ocultará (no siempre el mismo)

  4. La primera letra de p_2 irá cambiando de color, de rojo a azul, cada vez que se recarga

  5. El contenido de p_2 cambiará, cada vez que se recarga, de entre tres diferentes. Este contenido, en los tres casos, será html, es decir contendrá marcas (por ejemplo negritas y/o enlaces).

6.2. Eventos#

Video Clase

  1. Repasa lo que ya hemos visto en:

    1. Eventos

    2. Formularios en JS

  2. Los elementos HTML permiten añadirles un manejador de eventos (Event ). Por ejemplo:

    1. Elemento HTML -> Button

    2. Evento click -> Element/click_event

  3. Un uso habitual es la validación del formulario en el cliente . Se puede hacer de diferentes formas:

    1. Usando HTML

    2. Usando un API específico para validación de formularios

  4. Y otro uso muy interesante son los eventos de tiempo (js_timing). Permite ejecutar tareas (funciones):

    1. Con un retardo (setTimeout)

    2. En intervalos (setInterval).

Actividad T06-A02a. Validación de Formularios

Al ejercicio de la clase Formularios en JS le añadirás un control de eventos con los siguientes requisitos:

  1. El botón de enviar sólo estará activo cuando todos los campos estén validados

  2. Añadirás un botón Rellenar para que, si el usuario quiere, rellene todos los campos con valores válidos

  3. Añadirás un pequeño reloj con HH:MM::SS cada 10 segundos.

Actividad T06-A02b. Lista de tareas dinámica

Un ejercicio basado en este ejemplo de MDN. Pero en este caso será una lista de tareas:

  1. Un campo en el que introduces una tarea a realizar.

  2. Con una validación básica: Máximo 100 caractere. Sólo letras, números o símbolos básicos

  3. Con un botón para añadir, que irá creando la lista automáticamente

  4. Cada elemento de la lista tendrá un botón de «Terminado» que, una vez pulsado, tacha el elemento de la lista

  5. Al llegar a 10 elementos de la lista, avisará de que ya tienes 10 elementos en la lista (estén terminados o no). Y no te deja añadir más.

6.3. Datos sobre la navegación#

Video Clase

  1. El navegador ofrece varios objetos para trabajar con el navegador

  2. Window. Es la interfaz principal

  3. Screen. Con datos sobre la pantalla para esa ventana específica

  4. History. Para consultar el historial de navegación

  5. Location. Para consultar el url y redirigir a otra página

Actividad T06-A03. Obtener datos de la navegación

Crea una pequeña aplicación web que obtenga información de la navegación

  1. «Estás utilizando una ventana de XxY pixels» (X e Y son las dimensiones de la ventana)

  2. «Y la pantalla tiene unas dimensiones de XxY»

  3. Creas una lista de las últimas 5 URL visitadas con un enlace para poder visitarlas

  4. Creas un evento para que a los 20 segundos, vaya automáticamente al enlace número 3 del histórico.

  5. Antes de cargar la página nueva, avisarás al usuario, modificando el DOM, que vas a ir a esa página.

6.4. Datos sobre el navegador y el sistema#

Video Clase

  1. Navigator.

    1. Permite acceder a información del navegador que se está utilizando

    2. Ofrece multitud de propiedades y métodos para usar

    3. No toda la funcionalidad está disponible en todos los navegadores (ojo a la compatibilidad)

  2. Battery_Status_API

    1. Es una forma sencilla de acceder a información de la batería

    2. Más orientado a dispositivos portátiles

    3. No toda la funcionalidad está disponible en todos los navegadores (ojo a la compatibilidad)

Actividad T06-A04. Obtener datos del sistema

Crea una pequeña aplicación que, cuando la visite un usuario, te diga:

  1. ¿Cual es la UAS (agente de usuario)?

  2. ¿Cual es el sistema operativo del usuario?

  3. ¿Qué versión de navegador está utilizando (o renderizado HTML)?

  4. ¿Qué tamaño de memoria tiene el equipo?

  5. ¿Qué lenguaje es el predeterminado del usuario?

  6. ¿Estás cargando la página online o local (sin conexión)?

  7. ¿Se pueden mostrar documentos PDF?

  8. ¿Qué porcentaje de batería tiene su sistema?

  9. Si está cargando (o no)

  10. Que no cargue la página, si está por debajo del 25%

6.5. Cookies en Javascript#

Video Clase

  1. El mecanismo tradicional (y útil) de almacenamiento en el navegador son las Cookies.

    1. El concepto es el mismo que si usas programación servidor

    2. Pero también se puede utilizar en programación cliente (por ejemplo con JS js_cookies):

  2. Se guardan en la propiedad Document/cookie:

    1. Se guardan todas las cookies

    2. Puedes ir asignando cookies a la cadena de cookies (se van añadiendo con «;»)

    3. No es lo mismo lo que se guarda (la cookie concreta) que lo que se lee (todas las cookies)

  3. Una cookie puede tener valores opcionales para determinar:

    1. El dominio de uso (domain)

    2. Validez (expires y/o max-age)

    3. El url necesario (path)

    4. El sitio web (samesite)

    5. Uso sobre canal seguro (secure)

  4. Recuerda los diferentes aspectos de seguridad y privacidad con las cookies

Actividad T06-A05. Ejercicio Cookies

Crea una pequeña aplicación web que cumpla con los siguientes requisitos:

  1. Muestra el texto de un párrafo en el color preferido del usuario

  2. Si no sabe cual es, le ofrece un formulario para que se lo diga

  3. Los colores serán rojo, verde o azul

  4. Además tendrá un contador de visitas para ese usuario (navegador)

  5. El usuario podrá borrar su preferencia y la próxima vez que visite la página se le mostrará el formulario de selección

6.6. Web Storage API#

Video Clase

  1. Existe una Web API de almacenamiento ( Web Storage API) que ofrece varias mejoras:

    1. Sólo en el cliente (no se envía nada vía HTTP)

    2. Tiene más capacidad (10x más)

    3. Interfaz de uso más clara

  2. Dos Mecanismos de almacenamiento:

    1. Durante la Sesión: sessionStorage

    2. Siempre: localStorage

  3. A veces este mecanismo no es suficiente y necesitamos un almacenamiento estructurado:

    1. Tenemos gran cantidad de datos

    2. Necesitamos hacer consultas más complejas

    3. Necesitamos un rendimiento alto (para gran cantidad de datos)

    4. Para esos casos, se usa Indexed Database API :

      1. Es una base de datos NoSQL

      2. que guarda objetos JSON

      3. Usando una interfaz JS

Actividad T06-A06. Usar Web Storage API

Refactoriza el ejercicio de la clase anterior, sustituyendo las cookies por el uso de Web Storage API.

6.7. Geolocalización#

Video Clase

  1. La Geolocation API permite

    1. Tener una interfaz para obtener información de la posición (Geolocation )

    2. El cálculo de la posición se estima en base a diversos dispositivos (no depende del navegador)

    3. Permite usar la posición en aplicaciones donde es importante

  2. Necesita permisos del usuario (y del sistema operativo). Y sólo funciona en un contexto seguro :

    1. Off-line o localhost

    2. HTTP con TLS (canales seguros)

    3. Se puede evaluar con window.isSecureContext

  3. El interfaz tiene varios métodos que devuelven:

    1. Un objeto con la posición GeolocationPosition (coordenadas y momento)

    2. Una forma de monitorear la posición Geolocation/watchPosition. :

      1. Puedes configurar qué hacer (función callback)

      2. Y puedes desactivarlo Geolocation/clearWatch

Actividad T06-A07. Usando la API de Geolocalización

Crear una pequeña aplicación web con los siguientes requisitos:

  1. Tiene un botón que se llama «Estimar mi posición». Al pulsarlo …

    1. Te dice cuales son tus coordenadas y altitud

    2. Te dice el grado de precisión de la estimación

    3. Te muestra un enlace a un mapa (p.ej., a openstreetmap )

  2. Además, diseñas otro botón «Sígueme» que:

    1. Capture tu posición cada 10 segundos

    2. Muestre las coordenadas, altitud y precisión

    3. Muestre la fecha y hora. Puedes usar el formato estándar o darle algún formato

    4. Y va añadiendo el histórico en una lista numerada

6.8. Almacenamiento y Geolocalización#

Video Clase

  1. El uso de la geolocalización se puede usar en muchos escenarios:

    1. Mostrar la posición del usuario, en crudo o en un mapa

    2. Mostrar lugares (puntos de interés)

    3. Personalizar la información a ese lugar

    4. Hacer seguimiento de un usuario (persona, vehículo, etc)

    5. Posicionar objetos previamente geolocalizados (fotografías, vehículos, equipos) en el entorno del usuario

  2. Lo habitual es usar diferentes APIs (muchas Web APIs) en tu aplicación web.

Actividad T06-A08. Almacenamiento y Geolocalización

Creas una aplicación web que aglutine los dos ejercicios anteriores:

  1. Seguimiento de tu posición

  2. Almacenamiento de tu histórico de posiciones al usar la aplicación

  3. Cuando te vuelvas a conectar, te muestra un listado de posiciones, el número de posiciones y la duración (fecha de la última posición menos la fecha de la primera posición guardada)

  4. Además, te permitirá borrar una posición concreta