▷APIS EN HTML5

« Anterior

Descubre el poder de las APIs en HTML5; Imagina darle vida a tus páginas web: detectar la ubicación de tus usuarios, guardar sus preferencias, dibujar gráficos interactivos o incluso conectar con servicios externos para mostrar información en tiempo real. Todo esto —y mucho más— es posible gracias a las APIs en HTML5.

Aunque más adelante profundizaremos en cómo usarlas durante el curso de JavaScript, el objetivo de esta lección es que entiendas qué son las APIs y cómo se relacionan con HTML5. No te preocupes si algunas cosas parecen avanzadas ahora: lo más importante es que te familiarices con estas herramientas y comprendas su potencial. Así, cuando lleguemos a la parte práctica con JavaScript, ya estarás preparado para darles vida a tus proyectos. 🚀✨

Ver índice del contenido

🔍 ¿Qué es una API?

API son las siglas de Application Programming Interface (Interfaz de Programación de Aplicaciones). Es básicamente un puente que permite que dos programas o partes de un programa se comuniquen entre sí.

Cuando hablamos de APIs en el contexto de HTML5, nos referimos a herramientas integradas en el navegador que permiten hacer cosas más avanzadas en una página web, como:

Obtener la ubicación del usuario.
Guardar datos en el navegador.
Acceder a la cámara o el micrófono.
Dibujar gráficos o crear animaciones.
Conectar con servidores externos para obtener datos.

Te recomendamos leer: Barras de progreso en HTML5

Ejemplo sencillo para entender la idea:
Imagina que vas a un restaurante. Tú (la web) haces un pedido, el camarero (la API) lleva el pedido a la cocina (el sistema) y te trae la comida (los datos). Tú no necesitas saber cómo se cocina el plato, solo usas el servicio que te ofrece la API.

🛠️ Tipos de APIs en HTML5

HTML5 vino con un montón de nuevas APIs que expandieron las posibilidades de lo que podemos hacer en el navegador. Vamos a ver algunas de las más usadas y entender cómo funcionan con ejemplos prácticos.

1️⃣ Geolocation API

Esta API permite obtener la ubicación del usuario (si el usuario da permiso). Es ideal para aplicaciones que necesitan mapas o recomendaciones cercanas.

Ejemplo básico:

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition((position) => {
    console.log(`Latitud: ${position.coords.latitude}, Longitud: ${position.coords.longitude}`);
  });
} else {
  console.log("Tu navegador no soporta geolocalización.");
}

✅ Explicación:

navigator.geolocation verifica si el navegador soporta la API.
getCurrentPosition() obtiene la posición actual.
Muestra la latitud y longitud en la consola.

👉 Importante: El usuario siempre debe aceptar dar su ubicación, por motivos de privacidad.

2️⃣ Local Storage API

Permite guardar información directamente en el navegador del usuario. La información se mantiene incluso si el usuario cierra la pestaña o el navegador.

Ejemplo básico:

// Guardar datos
localStorage.setItem('nombre', 'Juan');

// Recuperar datos
console.log(localStorage.getItem('nombre'));  // Devuelve 'Juan'

// Eliminar datos
localStorage.removeItem('nombre');

✅ Explicación:

setItem() guarda un dato en formato clave-valor.
getItem() recupera el valor guardado.
removeItem() borra la clave especificada.

👉 Dato extra: Si quieres que los datos solo duren mientras la pestaña esté abierta, puedes usar sessionStorage en lugar de localStorage.

3️⃣ Canvas API

Permite dibujar gráficos, crear juegos o animaciones directamente en la página web.

Te recomendamos leer: CÓMO HACER LINEAS SVG EN HTML5 | PROPIEDADES Y EJEMPLOS

Ejemplo básico:

<canvas id="miCanvas" width="200" height="100"></canvas>

<script>
  const canvas = document.getElementById("miCanvas");
  const ctx = canvas.getContext("2d");

  ctx.fillStyle = "blue";
  ctx.fillRect(20, 20, 150, 75);
</script>

✅ Explicación:

getContext("2d") indica que trabajamos con un lienzo 2D.
fillStyle define el color.
fillRect() dibuja un rectángulo azul de 150×75 píxeles.

👉 Dato extra: El canvas es perfecto para juegos simples o gráficos interactivos.

4️⃣ Fetch API

Esta API permite hacer solicitudes HTTP para obtener datos de servidores externos. Por ejemplo, puedes traer información de una API pública y mostrarla en tu página web.

Ejemplo básico:

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

✅ Explicación:

fetch() hace la solicitud al servidor.
response.json() convierte la respuesta a formato JSON.
catch() maneja los errores (si el servidor falla o no hay conexión).

👉 Dato extra: Fetch es muy útil para conectar con APIs externas, como datos del clima, noticias o redes sociales.

🔥 Manejo de errores y permisos

Muchas APIs requieren permisos del usuario (como Geolocation o cámara). Si el usuario niega el permiso o algo sale mal, es importante manejar el error.

Ejemplo con geolocalización:

navigator.geolocation.getCurrentPosition(
  (position) => console.log(`Latitud: ${position.coords.latitude}`),
  () => console.log('No se pudo obtener la ubicación')
);

✅ Explicación: