Directorio Estratégico de APIs

Este Directorio recoge 40 APIs clasificadas y seleccionadas para el ecosistema SaludConNutricon.com, con enfoque profesional, gerencial, educativo y formativo.

Cada recurso dispone de un identificador, una clasificación funcional y una ficha base que servirá como plantilla para la creación posterior de recursos operativos (versión básica y versión avanzada).

Departamentos del Directorio

El Directorio se organiza en cinco grandes departamentos funcionales. Cada API pertenece a uno de ellos y se utilizará como base para construir recursos operativos y ejemplos de integración.

Departamento 1 – APIs del Navegador

Descripción: APIs nativas de la Web Platform que permiten crear experiencias modernas, accesibles, seguras, rápidas y progresivas directamente en el navegador.

Rol estratégico: Base tecnológica para interacción, rendimiento, seguridad, PWA y UX avanzada.

Departamento 2 – APIs de Nutrición y Alimentación

Descripción: Fuentes de datos nutricionales, análisis de recetas y composición de alimentos.

Rol estratégico: Núcleo de los recursos educativos y calculadoras nutricionales.

Departamento 3 – APIs de Salud Pública y Epidemiología

Descripción: Datos oficiales sobre salud, enfermedades, mortalidad, nutrición y seguridad alimentaria.

Rol estratégico: Soporte para dashboards, informes y contexto sanitario global.

Departamento 4 – Datos Abiertos y Directorios de APIs

Descripción: Catálogos y fuentes de datos abiertos que permiten descubrir nuevas APIs.

Rol estratégico: Expansión futura del ecosistema de datos de SaludConNutricon.

Departamento 5 – Visualización y Mapas

Descripción: Librerías y APIs para gráficos, mapas y visualizaciones interactivas.

Rol estratégico: Presentación clara, pedagógica y atractiva de datos de salud y nutrición.

Buscador y Filtros del Directorio

Selecciona un departamento, un recurso concreto o utiliza el buscador por nombre/descripcion para localizar rápidamente la ficha que deseas consultar.

Directorio de Recursos (Fichas de APIs)

Cada ficha resume el recurso, su clasificación y sus dependencias. A partir de esta plantilla se construirán, en fases posteriores, los recursos operativos: una versión básica y una versión avanzada con ejemplos de código y combinaciones de uso.

ID: 01 Depto: APIs del Navegador

🧠 Web Speech API

📚 Nombre: Web Speech API

🗂️ Clasificación: APIs del Navegador – Voz, Accesibilidad y Comandos Interactivos.

📰 Descripción breve: La Web Speech API permite que el navegador escuche la voz del usuario y la convierta en texto. Es clave para buscadores por voz, asistentes interactivos, accesibilidad y experiencias educativas donde la voz se convierte en una forma natural de interacción con la web.

⚙️ Dependencias: Navegador compatible (Chrome, Edge, Android), permiso de micrófono, conexión estable recomendada. En navegadores no compatibles, el recurso informa claramente de la limitación.

💡 Características clave:
• Reconocimiento de voz en tiempo real
• Soporte para idioma español (es-ES)
• Resultados parciales y finales
• Eventos de inicio, resultado y error
• Posibilidad de reconocimiento continuo

🌍 Otros datos de valor: Ideal para crear buscadores por voz en SaludConNutricon, asistentes educativos guiados por voz, herramientas de apoyo para personas con dificultades motoras o visuales y módulos de práctica oral en contextos formativos.

🖥️ Recurso Operativo – Demostración de Voz

🧪 Demo simple: pulsa el botón, habla una frase corta y verás el texto reconocido.

Esperando… pulsa el botón y habla.

📝 Código – Versión Simple


const SpeechAPI01 = window.SpeechRecognition || window.webkitSpeechRecognition;

if (SpeechAPI01) {
  const recSimple01 = new SpeechAPI01();
  recSimple01.lang = "es-ES";
  recSimple01.continuous = false;
  recSimple01.interimResults = false;

  recSimple01.onresult = e => {
    const texto = e.results[0][0].transcript;
    document.getElementById("textoReconocidoSimple01").textContent =
      "Has dicho: " + texto;
  };

  document.getElementById("btnHablarSimple01").onclick = () => {
    document.getElementById("textoReconocidoSimple01").textContent =
      "Escuchando… habla ahora.";
    recSimple01.start();
  };
} else {
  document.getElementById("textoReconocidoSimple01").textContent =
    "🚫 Este navegador no soporta Web Speech API.";
}

📌 Código – Versión Avanzada


const SpeechAPI01Adv = window.SpeechRecognition || window.webkitSpeechRecognition;

if (SpeechAPI01Adv) {
  const recAvanzado01 = new SpeechAPI01Adv();
  recAvanzado01.lang = "es-ES";
  recAvanzado01.continuous = true;
  recAvanzado01.interimResults = true;

  const textoAvanzado = document.getElementById("textoReconocidoAvanzado01");
  const estadoAvanzado = document.getElementById("estadoAvanzado01");
  const numPalabras = document.getElementById("numPalabras01");

  recAvanzado01.onstart = () => {
    estadoAvanzado.textContent = "Estado: escuchando…";
  };

  recAvanzado01.onerror = e => {
    estadoAvanzado.textContent = "Estado: error (" + e.error + ")";
  };

  recAvanzado01.onend = () => {
    estadoAvanzado.textContent = "Estado: detenido.";
  };

  recAvanzado01.onresult = e => {
    let texto = "";
    for (let i = 0; i < e.results.length; i++) {
      texto += e.results[i][0].transcript + " ";
    }
    texto = texto.trim();
    textoAvanzado.textContent = texto || "Sin texto reconocido todavía…";

    const palabras = texto ? texto.split(/\s+/) : [];
    numPalabras.textContent = palabras.filter(Boolean).length;
  };

  document.getElementById("btnHablarAvanzado01").onclick = () => {
    estadoAvanzado.textContent = "Estado: iniciando reconocimiento…";
    recAvanzado01.start();
  };

  document.getElementById("btnPararAvanzado01").onclick = () => {
    recAvanzado01.stop();
  };
} else {
  document.getElementById("estadoAvanzado01").textContent =
    "Estado: 🚫 Web Speech API no disponible en este navegador.";
}
ID: 02 Depto: APIs del Navegador

🌐 Geolocation API

📚 Nombre: Geolocation API

🗂️ Clasificación: APIs del Navegador – Ubicación, Contexto Geográfico y Servicios Basados en Localización.

📰 Descripción breve: La Geolocation API permite obtener la ubicación geográfica del usuario (latitud, longitud, precisión). Es fundamental para mostrar recursos cercanos, adaptar contenido según la zona, crear mapas dinámicos, rutas, servicios personalizados y experiencias educativas basadas en el entorno.

⚙️ Dependencias: Permiso explícito del usuario, navegador compatible, dispositivo con GPS (móvil) o triangulación WiFi.

💡 Características clave:
• Obtención de latitud y longitud
• Precisión en metros
• Soporte para seguimiento continuo (watchPosition)
• Detección de errores (denegado, timeout, no disponible)
• Integración con mapas (Leaflet, OpenStreetMap)

🌍 Otros datos de valor: Ideal para localizar centros de salud, recursos nutricionales cercanos, rutas saludables, o adaptar contenido según la región del usuario.

🖥️ Recurso Operativo – Demostración de Ubicación

🧪 Demo simple: pulsa el botón para obtener tu ubicación actual.

Esperando… pulsa el botón para obtener tu ubicación.

📝 Código – Versión Simple


document.getElementById("btnGeoSimple02").onclick = () => {
  const salida = document.getElementById("geoResultadoSimple02");

  if (!navigator.geolocation) {
    salida.textContent = "🚫 Geolocalización no soportada por este navegador.";
    return;
  }

  salida.textContent = "Obteniendo ubicación…";

  navigator.geolocation.getCurrentPosition(
    pos => {
      const { latitude, longitude } = pos.coords;
      salida.textContent = "📍 Lat: " + latitude + " | Lon: " + longitude;
    },
    err => {
      salida.textContent = "🚫 Error: " + err.message;
    }
  );
};

📌 Código – Versión Avanzada


let watchId02 = null;

document.getElementById("btnGeoAvanzado02").onclick = () => {
  const estado = document.getElementById("geoEstadoAvanzado02");
  const salida = document.getElementById("geoResultadoAvanzado02");
  const precision = document.getElementById("geoPrecisionValor02");

  if (!navigator.geolocation) {
    estado.textContent = "Estado: 🚫 Geolocalización no soportada.";
    return;
  }

  estado.textContent = "Estado: seguimiento activo…";

  watchId02 = navigator.geolocation.watchPosition(
    pos => {
      const { latitude, longitude, accuracy } = pos.coords;
      salida.textContent = "📍 Lat: " + latitude + " | Lon: " + longitude;
      precision.textContent = accuracy.toFixed(1);
    },
    err => {
      estado.textContent = "Estado: error (" + err.message + ")";
    }
  );
};

document.getElementById("btnGeoStopAvanzado02").onclick = () => {
  const estado = document.getElementById("geoEstadoAvanzado02");

  if (watchId02 !== null) {
    navigator.geolocation.clearWatch(watchId02);
    watchId02 = null;
    estado.textContent = "Estado: seguimiento detenido.";
  }
};
ID: 03 Depto: APIs del Navegador

🧭 Device Orientation API

📚 Nombre: Device Orientation API

🗂️ Clasificación: APIs del Navegador – Sensores, Movimiento y Orientación del Dispositivo.

📰 Descripción breve: La Device Orientation API permite acceder a los sensores de movimiento del dispositivo (giroscopio y acelerómetro). Proporciona valores de rotación y orientación en tiempo real, permitiendo crear experiencias interactivas, educativas, científicas y visuales basadas en el movimiento físico del usuario.

⚙️ Dependencias: Dispositivo con sensores (móvil o tablet), navegador compatible, permiso de movimiento (iOS requiere autorización explícita del usuario).

💡 Características clave:
• Lectura de ángulos alpha, beta y gamma
• Eventos en tiempo real
• Integración con gráficos y animaciones
• Ideal para juegos educativos y simulaciones
• Permite crear interfaces basadas en movimiento

🌍 Otros datos de valor: Útil para módulos educativos de biomecánica, ergonomía, actividad física, o experiencias interactivas en SaludConNutricon.

🖥️ Recurso Operativo – Demostración de Movimiento

🧪 Demo simple: mueve tu dispositivo y observa los valores de orientación.

Alpha (Z): 0

Beta (X): 0

Gamma (Y): 0

📝 Código – Versión Simple


window.addEventListener("deviceorientation", e => {
  document.getElementById("alphaSimple03").textContent = e.alpha.toFixed(1);
  document.getElementById("betaSimple03").textContent = e.beta.toFixed(1);
  document.getElementById("gammaSimple03").textContent = e.gamma.toFixed(1);
});

📌 Código – Versión Avanzada


window.addEventListener("deviceorientation", e => {
  const alpha = e.alpha.toFixed(1);
  const beta = e.beta.toFixed(1);
  const gamma = e.gamma.toFixed(1);

  document.getElementById("alphaAdv03").textContent = alpha;
  document.getElementById("betaAdv03").textContent = beta;
  document.getElementById("gammaAdv03").textContent = gamma;

  const esfera = document.getElementById("esfera03");
  esfera.style.transform =
    "rotateZ(" + alpha + "deg) rotateX(" + beta + "deg) rotateY(" + gamma + "deg)";
});
ID: 04 Depto: APIs del Navegador

📡 Network Information API

📚 Nombre: Network Information API

🗂️ Clasificación: APIs del Navegador – Rendimiento, Conectividad y Adaptación Dinámica.

📰 Descripción breve: La Network Information API permite conocer la calidad de la conexión del usuario: tipo de red, velocidad estimada, latencia y si el usuario ha activado el modo de ahorro de datos. Es esencial para adaptar contenido, cargar versiones ligeras, optimizar imágenes y mejorar la experiencia en conexiones lentas.

⚙️ Dependencias: Navegador compatible (Chrome/Android), API experimental en algunos entornos.

💡 Características clave:
• `effectiveType` (4g, 3g, 2g, slow-2g)
• `downlink` (Mbps estimados)
• `rtt` (latencia estimada)
• `saveData` (modo ahorro de datos)
• Eventos de cambio de red en tiempo real

🌍 Otros datos de valor: Ideal para adaptar SaludConNutricon a zonas con mala conexión, cargar contenido ligero, o activar modos de bajo consumo de datos.

🖥️ Recurso Operativo – Estado de Conexión

🧪 Demo simple: muestra el tipo de conexión actual.

Tipo de conexión: Desconocido

Ahorro de datos: Desconocido

📝 Código – Versión Simple


if (navigator.connection) {
  const c = navigator.connection;
  document.getElementById("tipoConexionSimple04").textContent = c.effectiveType;
  document.getElementById("ahorroDatosSimple04").textContent = c.saveData ? "Sí" : "No";
} else {
  document.getElementById("tipoConexionSimple04").textContent =
    "🚫 No soportado por este navegador.";
}

📌 Código – Versión Avanzada


function actualizarConexion04() {
  const c = navigator.connection;
  document.getElementById("tipoConexionAdv04").textContent = c.effectiveType;
  document.getElementById("downlinkAdv04").textContent = c.downlink;
  document.getElementById("rttAdv04").textContent = c.rtt;
  document.getElementById("saveDataAdv04").textContent = c.saveData ? "Sí" : "No";
}

if (navigator.connection) {
  actualizarConexion04();
  navigator.connection.addEventListener("change", actualizarConexion04);
} else {
  document.getElementById("tipoConexionAdv04").textContent =
    "🚫 No soportado por este navegador.";
}
ID: 05 Depto: APIs del Navegador

🛰️ Intersection Observer API

📚 Nombre: Intersection Observer API

🗂️ Clasificación: APIs del Navegador – Visibilidad, Rendimiento y Optimización de Carga.

📰 Descripción breve: La Intersection Observer API permite detectar cuándo un elemento entra o sale del área visible del usuario (viewport). Es esencial para cargar imágenes de forma diferida (lazy loading), activar animaciones al hacer scroll, optimizar rendimiento y mejorar la experiencia de usuario.

⚙️ Dependencias: Navegador moderno; polyfills disponibles para compatibilidad extendida.

💡 Características clave:
• Detección de visibilidad sin usar eventos de scroll
• Ahorro de recursos y mejor rendimiento
• Activación de animaciones al entrar en pantalla
• Lazy loading de imágenes y módulos
• Observación múltiple de elementos

🌍 Otros datos de valor: Ideal para animaciones educativas, carga progresiva de contenido en SaludConNutricon, y optimización de Core Web Vitals.

🖥️ Recurso Operativo – Detección de Visibilidad

🧪 Demo simple: baja haciendo scroll y observa cómo el cuadro cambia de color al entrar en pantalla.

⬇️ Desplázate hacia abajo para activar la detección…

📝 Código – Versión Simple


const caja05 = document.getElementById("cajaSimple05");

const obsSimple05 = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    caja05.style.background = entry.isIntersecting ? "#90caf9" : "#d0d7e2";
  });
});

obsSimple05.observe(caja05);

📌 Código – Versión Avanzada


const elementos05 = [
  document.getElementById("cajaAdvA05"),
  document.getElementById("cajaAdvB05"),
  document.getElementById("cajaAdvC05")
];

const obsAdv05 = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add("visible");
    } else {
      entry.target.classList.remove("visible");
    }
  });
}, { threshold: 0.5 });

elementos05.forEach(el => obsAdv05.observe(el));
ID: 06 Depto: APIs del Navegador

🔗 Fetch API

📚 Nombre: Fetch API

🗂️ Clasificación: APIs del Navegador – Conectividad HTTP, Datos y Comunicación Cliente‑Servidor.

📰 Descripción breve: La Fetch API permite realizar peticiones HTTP modernas desde el navegador. Es la base para consumir APIs externas, enviar datos, recibir JSON, cargar recursos y conectar la web con servicios remotos. Es esencial para SaludConNutricon, ya que todas las APIs nutricionales y de salud se consumen mediante Fetch.

⚙️ Dependencias: Navegador moderno, conexión a Internet, endpoints válidos.

💡 Características clave:
• Peticiones GET, POST, PUT, DELETE
• Manejo de JSON integrado
• Uso con async/await
• Manejo de errores con try/catch
• Streams, Headers y Request avanzados

🌍 Otros datos de valor: Es la API central para conectar SaludConNutricon con bases de datos nutricionales, servicios de salud pública y recursos educativos dinámicos.

🖥️ Recurso Operativo – Demostración de Peticiones HTTP

🧪 Demo simple: obtiene un dato público desde una API de prueba.

Esperando… pulsa el botón para obtener datos.

📝 Código – Versión Simple


document.getElementById("btnFetchSimple06").onclick = async () => {
  const salida = document.getElementById("resultadoFetchSimple06");
  salida.textContent = "Cargando…";

  try {
    const res = await fetch("https://api.publicapis.org/entries");
    const data = await res.json();
    salida.textContent = "Primer API encontrada: " + data.entries[0].API;
  } catch (err) {
    salida.textContent = "🚫 Error: " + err.message;
  }
};

📌 Código – Versión Avanzada


document.getElementById("btnFetchAvanzado06").onclick = async () => {
  const tabla = document.getElementById("tablaUsuarios06");
  const cuerpo = document.getElementById("tablaUsuariosBody06");

  tabla.style.display = "none";
  cuerpo.innerHTML = "Cargando…";

  try {
    const res = await fetch("https://jsonplaceholder.typicode.com/users");
    const usuarios = await res.json();

    cuerpo.innerHTML = "";
    usuarios.forEach(u => {
      cuerpo.innerHTML += `
        
          ${u.id}
          ${u.name}
          ${u.email}
        
      `;
    });

    tabla.style.display = "";
  } catch (err) {
    cuerpo.innerHTML = "🚫 Error: " + err.message + "";
  }
};
ID: 07 Depto: APIs del Navegador

🎨 Canvas API

📚 Nombre: Canvas API

🗂️ Clasificación: APIs del Navegador – Gráficos, Visualización y Renderizado 2D/3D.

📰 Descripción breve: La Canvas API permite dibujar gráficos, formas, animaciones, visualizaciones científicas, simulaciones y elementos interactivos directamente en un lienzo HTML. Es fundamental para dashboards, gráficos educativos, juegos, simulaciones de salud, y visualizaciones dinámicas en SaludConNutricon.

⚙️ Dependencias: Navegador moderno compatible con <canvas>.

💡 Características clave:
• Renderizado 2D en tiempo real
• Animaciones con requestAnimationFrame
• Dibujo de formas, texto e imágenes
• Manipulación de píxeles
• Integración con WebGL para 3D

🌍 Otros datos de valor: Ideal para crear gráficos nutricionales, simulaciones de actividad física, visualizaciones de datos epidemiológicos y elementos interactivos educativos.

🖥️ Recurso Operativo – Demostración Gráfica

🧪 Demo simple: dibuja un círculo y un texto en el lienzo.

📝 Código – Versión Simple


const canvas07 = document.getElementById("canvasSimple07");
const ctx07 = canvas07.getContext("2d");

// Fondo
ctx07.fillStyle = "#e3f2fd";
ctx07.fillRect(0, 0, canvas07.width, canvas07.height);

// Círculo
ctx07.beginPath();
ctx07.arc(125, 75, 40, 0, Math.PI * 2);
ctx07.fillStyle = "#90caf9";
ctx07.fill();

// Texto
ctx07.fillStyle = "#1f2933";
ctx07.font = "16px Segoe UI";
ctx07.fillText("Hola Canvas", 85, 140);

📌 Código – Versión Avanzada


const canvasAdv07 = document.getElementById("canvasAvanzado07");
const ctxAdv07 = canvasAdv07.getContext("2d");

let x = 50;
let y = 50;
let dx = 2;
let dy = 2;
const radio = 20;

function animar07() {
  ctxAdv07.clearRect(0, 0, canvasAdv07.width, canvasAdv07.height);

  // Dibujar esfera
  ctxAdv07.beginPath();
  ctxAdv07.arc(x, y, radio, 0, Math.PI * 2);
  ctxAdv07.fillStyle = "#8ec5fc";
  ctxAdv07.fill();

  // Movimiento
  x += dx;
  y += dy;

  // Rebotes
  if (x + radio > canvasAdv07.width || x - radio < 0) dx *= -1;
  if (y + radio > canvasAdv07.height || y - radio < 0) dy *= -1;

  requestAnimationFrame(animar07);
}

animar07();
ID: 08 Depto: APIs del Navegador

🗂️ Web Storage API

📚 Nombre: Web Storage API (localStorage / sessionStorage)

🗂️ Clasificación: APIs del Navegador – Almacenamiento Local, Preferencias y Estado de Sesión.

📰 Descripción breve: La Web Storage API permite guardar datos clave‑valor en el navegador, de forma persistente (localStorage) o por sesión (sessionStorage). Es esencial para recordar preferencias, estados de formularios, configuraciones de usuario y pequeños datos sin necesidad de servidor.

⚙️ Dependencias: Navegador moderno con soporte para localStorage y sessionStorage.

💡 Características clave:
• Almacenamiento clave‑valor
• Persistencia entre recargas (localStorage)
• Datos por sesión (sessionStorage)
• Métodos setItem, getItem, removeItem, clear
• Ideal para preferencias de interfaz y estado ligero

🌍 Otros datos de valor: Útil para guardar preferencias de visualización, últimos recursos consultados, filtros aplicados o pequeños estados de usuario en SaludConNutricon.

🖥️ Recurso Operativo – Preferencias en el Navegador

🧪 Demo simple: guarda un nombre en localStorage y lo recupera al recargar.

Si ya guardaste un nombre, debería aparecer aquí al cargar la página.

📝 Código – Versión Simple


// Al cargar, mostrar el nombre guardado (si existe)
const mensajeSimple08 = document.getElementById("mensajeSimple08");
const inputNombre08 = document.getElementById("nombreSimple08");
const nombreGuardado08 = localStorage.getItem("nombreSimple08");

if (nombreGuardado08) {
  mensajeSimple08.textContent = "Hola de nuevo, " + nombreGuardado08 + ".";
  inputNombre08.value = nombreGuardado08;
}

document.getElementById("btnGuardarSimple08").onclick = () => {
  const nombre = inputNombre08.value.trim();
  if (!nombre) {
    mensajeSimple08.textContent = "🚫 Escribe un nombre antes de guardar.";
    return;
  }
  localStorage.setItem("nombreSimple08", nombre);
  mensajeSimple08.textContent = "✅ Nombre guardado. Recarga la página para comprobarlo.";
};

📌 Código – Versión Avanzada


const panelTema08 = document.getElementById("panelTema08");
const estadoTema08 = document.getElementById("estadoTema08");

function aplicarTema08(tema) {
  if (tema === "claro") {
    panelTema08.style.background = "#ffffff";
    panelTema08.style.color = "#1f2933";
    estadoTema08.textContent = "Tema actual: claro (guardado en localStorage).";
  } else if (tema === "oscuro") {
    panelTema08.style.background = "#1f2933";
    panelTema08.style.color = "#f5f7fa";
    estadoTema08.textContent = "Tema actual: oscuro (guardado en localStorage).";
  } else {
    panelTema08.style.background = "#f5f7fa";
    panelTema08.style.color = "#1f2933";
    estadoTema08.textContent = "Tema actual: no establecido.";
  }
}

// Cargar tema guardado
const temaGuardado08 = localStorage.getItem("temaPreferido08");
aplicarTema08(temaGuardado08);

// Botones
document.getElementById("btnTemaClaro08").onclick = () => {
  localStorage.setItem("temaPreferido08", "claro");
  aplicarTema08("claro");
};

document.getElementById("btnTemaOscuro08").onclick = () => {
  localStorage.setItem("temaPreferido08", "oscuro");
  aplicarTema08("oscuro");
};
ID: 09 Depto: APIs del Navegador

🧬 Web Crypto API

📚 Nombre: Web Crypto API

🗂️ Clasificación: APIs del Navegador – Seguridad, Cifrado, Hashing y Generación Criptográfica.

📰 Descripción breve: La Web Crypto API permite realizar operaciones criptográficas seguras directamente en el navegador: generación de claves, hashing, cifrado, descifrado y funciones de seguridad avanzadas. Es fundamental para proteger datos, verificar integridad y crear sistemas seguros sin exponer claves.

⚙️ Dependencias: Navegador moderno con soporte para `window.crypto.subtle`.

💡 Características clave:
• Hashing SHA‑256, SHA‑384, SHA‑512
• Generación de claves criptográficas
• Cifrado/descifrado AES‑GCM
• Firmas digitales
• Generación de números aleatorios seguros

🌍 Otros datos de valor: Útil para proteger datos sensibles, validar integridad de información nutricional, firmar datos de salud y reforzar la seguridad de módulos educativos.

🖥️ Recurso Operativo – Hashing y Cifrado

🧪 Demo simple: genera un hash SHA‑256 del texto introducido.

Introduce un texto para generar su hash.

📝 Código – Versión Simple


// Convierte ArrayBuffer a hex
function toHex(buffer) {
  return [...new Uint8Array(buffer)]
    .map(b => b.toString(16).padStart(2, "0"))
    .join("");
}

document.getElementById("btnHash09").onclick = async () => {
  const texto = document.getElementById("textoHash09").value;
  const salida = document.getElementById("resultadoHash09");

  if (!texto.trim()) {
    salida.textContent = "🚫 Escribe un texto antes de generar el hash.";
    return;
  }

  const encoder = new TextEncoder();
  const data = encoder.encode(texto);

  const hash = await crypto.subtle.digest("SHA-256", data);
  salida.textContent = "SHA-256: " + toHex(hash);
};

📌 Código – Versión Avanzada


let claveAES09 = null;
let ivAES09 = crypto.getRandomValues(new Uint8Array(12));

async function generarClaveAES09() {
  claveAES09 = await crypto.subtle.generateKey(
    { name: "AES-GCM", length: 256 },
    true,
    ["encrypt", "decrypt"]
  );
}

document.getElementById("btnCifrar09").onclick = async () => {
  if (!claveAES09) await generarClaveAES09();

  const texto = document.getElementById("textoCifrar09").value;
  const encoder = new TextEncoder();
  const data = encoder.encode(texto);

  const cifrado = await crypto.subtle.encrypt(
    { name: "AES-GCM", iv: ivAES09 },
    claveAES09,
    data
  );

  document.getElementById("textoCifrado09").textContent =
    btoa(String.fromCharCode(...new Uint8Array(cifrado)));
};

document.getElementById("btnDescifrar09").onclick = async () => {
  if (!claveAES09) return;

  const cifradoBase64 = document.getElementById("textoCifrado09").textContent;
  const bytes = Uint8Array.from(atob(cifradoBase64), c => c.charCodeAt(0));

  const descifrado = await crypto.subtle.decrypt(
    { name: "AES-GCM", iv: ivAES09 },
    claveAES09,
    bytes
  );

  document.getElementById("textoDescifrado09").textContent =
    new TextDecoder().decode(descifrado);
};
ID: 10 Depto: APIs del Navegador

🛰️ Service Workers API

📚 Nombre: Service Workers API

🗂️ Clasificación: APIs del Navegador – Offline, Caché Inteligente, PWA y Rendimiento.

📰 Descripción breve: La Service Workers API permite interceptar peticiones de red, cachear recursos, servir contenido offline y convertir una web en una PWA (Aplicación Web Progresiva). Es esencial para mejorar rendimiento, reducir consumo de datos y permitir acceso sin conexión.

⚙️ Dependencias: HTTPS obligatorio, navegador moderno, archivo service‑worker.js en la raíz del sitio.

💡 Características clave:
• Caché inteligente de recursos
• Funcionamiento offline
• Intercepción de peticiones
• Actualización controlada del SW
• Base de las PWA (instalación, iconos, manifest)

🌍 Otros datos de valor: Ideal para SaludConNutricon en zonas con mala conexión, permitiendo acceso a recursos educativos incluso sin Internet.

🖥️ Recurso Operativo – Registro y Caché

🧪 Demo simple: registra un Service Worker básico.

Estado: sin registrar.

📝 Código – Versión Simple


// Registro básico del Service Worker
document.getElementById("btnRegistrarSW10").onclick = async () => {
  const salida = document.getElementById("estadoSW10");

  if (!("serviceWorker" in navigator)) {
    salida.textContent = "🚫 Service Workers no soportados.";
    return;
  }

  try {
    await navigator.serviceWorker.register("service-worker.js");
    salida.textContent = "✅ Service Worker registrado correctamente.";
  } catch (err) {
    salida.textContent = "🚫 Error al registrar: " + err.message;
  }
};

📌 Código – Versión Avanzada


// Comprobar estado del Service Worker
document.getElementById("btnComprobarSW10").onclick = async () => {
  const salida = document.getElementById("infoSW10");

  if (!navigator.serviceWorker) {
    salida.textContent = "🚫 Service Workers no soportados.";
    return;
  }

  const reg = await navigator.serviceWorker.getRegistration();

  if (!reg) {
    salida.textContent = "⚠️ No hay Service Worker registrado.";
    return;
  }

  const estado = reg.active ? "activo" : "no activo";
  salida.textContent = "🛰️ Service Worker encontrado. Estado: " + estado;
};
ID: 11 Depto: Nutrición y Datos Alimentarios

🥫 Open Food Facts API

📚 Nombre: Open Food Facts API

🗂️ Clasificación: APIs Nutricionales – Información Alimentaria, Etiquetado y Datos Abiertos.

📰 Descripción breve: La Open Food Facts API proporciona información nutricional y de ingredientes de millones de productos alimentarios de todo el mundo. Es una base de datos abierta, colaborativa y gratuita, ideal para análisis nutricionales, educación alimentaria y aplicaciones de salud.

⚙️ Dependencias: Conexión a Internet, endpoint público, formato JSON.

💡 Características clave:
• Búsqueda por código de barras (EAN)
• Información nutricional completa
• Ingredientes, aditivos y alérgenos
• Nutri‑Score y Eco‑Score
• Base de datos global y abierta

🌍 Otros datos de valor: Ideal para módulos educativos de nutrición, análisis de productos, comparación de alimentos y herramientas de salud pública en SaludConNutricon.

🖥️ Recurso Operativo – Consulta de Producto Alimentario

🧪 Demo simple: consulta un producto por código de barras (EAN).

Introduce un EAN válido para consultar un producto.

📝 Código – Versión Simple


document.getElementById("btnBuscarSimple11").onclick = async () => {
  const ean = document.getElementById("eanSimple11").value.trim();
  const salida = document.getElementById("resultadoSimple11");

  if (!ean) {
    salida.textContent = "🚫 Introduce un código EAN.";
    return;
  }

  salida.textContent = "Cargando…";

  try {
    const res = await fetch("https://world.openfoodfacts.org/api/v0/product/" + ean + ".json");
    const data = await res.json();

    if (!data.product) {
      salida.textContent = "⚠️ Producto no encontrado.";
      return;
    }

    salida.textContent = "📌 Producto: " + data.product.product_name;
  } catch (err) {
    salida.textContent = "🚫 Error: " + err.message;
  }
};

📌 Código – Versión Avanzada


document.getElementById("btnBuscarAvanzado11").onclick = async () => {
  const ean = document.getElementById("eanAvanzado11").value.trim();
  const panel = document.getElementById("panelProducto11");

  if (!ean) return;

  panel.style.display = "none";

  try {
    const res = await fetch("https://world.openfoodfacts.org/api/v0/product/" + ean + ".json");
    const data = await res.json();

    if (!data.product) {
      panel.style.display = "block";
      document.getElementById("nombreProducto11").textContent = "No encontrado";
      return;
    }

    const p = data.product;

    document.getElementById("nombreProducto11").textContent = p.product_name || "Sin nombre";
    document.getElementById("caloriasProducto11").textContent =
      p.nutriments?.energy_kcal_100g || "—";
    document.getElementById("nutriscoreProducto11").textContent =
      p.nutriscore_grade?.toUpperCase() || "—";

    const img = document.getElementById("imagenProducto11");
    if (p.image_front_small_url) {
      img.src = p.image_front_small_url;
      img.style.display = "block";
    } else {
      img.style.display = "none";
    }

    panel.style.display = "block";
  } catch (err) {
    panel.style.display = "block";
    document.getElementById("nombreProducto11").textContent = "Error: " + err.message;
  }
};
ID: 12 Depto: Nutrición y Datos Alimentarios

🧑‍🔬 USDA FoodData Central API

📚 Nombre: USDA FoodData Central API

🗂️ Clasificación: APIs Nutricionales – Bases de Datos Oficiales, Nutrientes y Composición Alimentaria.

📰 Descripción breve: La FoodData Central API del USDA proporciona información nutricional oficial y estandarizada de miles de alimentos, incluyendo nutrientes, porciones, categorías y datos científicos. Es una de las fuentes más fiables del mundo para análisis nutricional profesional.

⚙️ Dependencias: Clave API del USDA (gratuita), conexión a Internet, formato JSON.

💡 Características clave:
• Búsqueda por nombre de alimento
• Datos completos de nutrientes
• Porciones y medidas
• Clasificación por grupos alimentarios
• Datos oficiales del Departamento de Agricultura de EE.UU.

🌍 Otros datos de valor: Ideal para análisis nutricional profesional, educación alimentaria, cálculo de dietas, investigación científica y módulos educativos de SaludConNutricon.

🖥️ Recurso Operativo – Consulta Nutricional Oficial

🧪 Demo simple: busca un alimento por nombre.

Introduce un alimento para buscarlo.

📝 Código – Versión Simple


// Reemplazar YOUR_API_KEY por la clave real del USDA
const API_KEY_12 = "YOUR_API_KEY";

document.getElementById("btnBuscarSimple12").onclick = async () => {
  const q = document.getElementById("busquedaSimple12").value.trim();
  const salida = document.getElementById("resultadoSimple12");

  if (!q) {
    salida.textContent = "🚫 Escribe un alimento.";
    return;
  }

  salida.textContent = "Cargando…";

  try {
    const res = await fetch(
      "https://api.nal.usda.gov/fdc/v1/foods/search?query=" + q + "&api_key=" + API_KEY_12
    );
    const data = await res.json();

    if (!data.foods || data.foods.length === 0) {
      salida.textContent = "⚠️ No se encontraron alimentos.";
      return;
    }

    salida.textContent = "📌 Primer resultado: " + data.foods[0].description;
  } catch (err) {
    salida.textContent = "🚫 Error: " + err.message;
  }
};

📌 Código – Versión Avanzada


document.getElementById("btnBuscarAvanzado12").onclick = async () => {
  const q = document.getElementById("busquedaAvanzada12").value.trim();
  const panel = document.getElementById("panelAlimento12");

  if (!q) return;

  panel.style.display = "none";

  try {
    const res = await fetch(
      "https://api.nal.usda.gov/fdc/v1/foods/search?query=" + q + "&api_key=" + API_KEY_12
    );
    const data = await res.json();

    if (!data.foods || data.foods.length === 0) {
      panel.style.display = "block";
      document.getElementById("nombreAlimento12").textContent = "No encontrado";
      return;
    }

    const alimento = data.foods[0];

    document.getElementById("nombreAlimento12").textContent = alimento.description;

    const nutrientes = alimento.foodNutrients || [];

    const getNutriente = id =>
      nutrientes.find(n => n.nutrientId === id)?.value || "—";

    document.getElementById("caloriasAlimento12").textContent = getNutriente(1008);
    document.getElementById("proteinasAlimento12").textContent = getNutriente(1003);
    document.getElementById("grasasAlimento12").textContent = getNutriente(1004);

    panel.style.display = "block";
  } catch (err) {
    panel.style.display = "block";
    document.getElementById("nombreAlimento12").textContent = "Error: " + err.message;
  }
};
ID: 13 Depto: Nutrición y Datos Alimentarios

🧮 Edamam Nutrition Analysis API

📚 Nombre: Edamam Nutrition Analysis API

🗂️ Clasificación: APIs Nutricionales – Análisis de Recetas, Nutrientes y Etiquetado Inteligente.

📰 Descripción breve: La Edamam Nutrition Analysis API permite analizar ingredientes, recetas completas y alimentos para obtener información nutricional detallada: calorías, macronutrientes, micronutrientes, alérgenos, dietas compatibles y etiquetas de salud. Es una API profesional ampliamente usada en aplicaciones de salud, fitness y educación nutricional.

⚙️ Dependencias: Clave API (APP ID + APP KEY), conexión a Internet, formato JSON.

💡 Características clave:
• [Análisis nutricional](ca://s?q=Explicar_analisis_nutricional) de ingredientes y recetas
• [Detección de alérgenos](ca://s?q=Explicar_deteccion_de_alergenos)
• [Etiquetas de salud](ca://s?q=Explicar_etiquetas_de_salud) (vegan, gluten‑free, etc.)
• [Cálculo de calorías](ca://s?q=Explicar_calculo_de_calorias)
• [Micronutrientes detallados](ca://s?q=Explicar_micronutrientes)

🌍 Otros datos de valor: Ideal para análisis nutricional profesional, cálculo de menús, educación alimentaria, valoración de recetas y módulos de salud pública en SaludConNutricon.

🖥️ Recurso Operativo – Análisis Nutricional de Ingredientes

🧪 Demo simple: analiza un ingrediente individual.

Introduce un ingrediente para analizarlo.

📝 Código – Versión Simple


// Reemplazar con APP ID y APP KEY reales
const EDAMAM_ID_13 = "YOUR_APP_ID";
const EDAMAM_KEY_13 = "YOUR_APP_KEY";

document.getElementById("btnAnalizarSimple13").onclick = async () => {
  const ing = document.getElementById("ingredienteSimple13").value.trim();
  const salida = document.getElementById("resultadoSimple13");

  if (!ing) {
    salida.textContent = "🚫 Escribe un ingrediente.";
    return;
  }

  salida.textContent = "Cargando…";

  try {
    const res = await fetch(
      "https://api.edamam.com/api/nutrition-data?app_id=" +
      EDAMAM_ID_13 + "&app_key=" + EDAMAM_KEY_13 +
      "&ingr=" + encodeURIComponent(ing)
    );

    const data = await res.json();

    salida.textContent = "🔥 Calorías: " + data.calories;
  } catch (err) {
    salida.textContent = "🚫 Error: " + err.message;
  }
};

📌 Código – Versión Avanzada


document.getElementById("btnAnalizarAvanzado13").onclick = async () => {
  const texto = document.getElementById("ingredientesAvanzado13").value.trim();
  const panel = document.getElementById("panelReceta13");

  if (!texto) return;

  panel.style.display = "none";

  try {
    const res = await fetch(
      "https://api.edamam.com/api/nutrition-details?app_id=" +
      EDAMAM_ID_13 + "&app_key=" + EDAMAM_KEY_13,
      {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ ingr: texto.split("\n") })
      }
    );

    const data = await res.json();

    document.getElementById("caloriasReceta13").textContent = data.calories || "—";
    document.getElementById("proteinasReceta13").textContent = data.totalNutrients?.PROCNT?.quantity?.toFixed(1) || "—";
    document.getElementById("grasasReceta13").textContent = data.totalNutrients?.FAT?.quantity?.toFixed(1) || "—";

    panel.style.display = "block";
  } catch (err) {
    panel.style.display = "block";
    document.getElementById("caloriasReceta13").textContent = "Error";
  }
};
ID: 14 Depto: Nutrición y Datos Alimentarios

🥗 Nutritionix API

📚 Nombre: Nutritionix API

🗂️ Clasificación: APIs Nutricionales – Búsqueda de Alimentos, Menús y Cadenas de Restauración.

📰 Descripción breve: La Nutritionix API ofrece información nutricional de alimentos genéricos, marcas comerciales y menús de restaurantes. Permite buscar por nombre de alimento, marca o plato, devolviendo calorías, macronutrientes y otros datos relevantes para educación y salud.

⚙️ Dependencias: APP ID y APP KEY de Nutritionix, conexión a Internet, formato JSON.

💡 Características clave:
• Búsqueda por texto libre
• Datos de marcas y restaurantes
• Calorías y macronutrientes
• Soporte para porciones y unidades
• Ideal para apps de dieta y seguimiento

🌍 Otros datos de valor: Muy útil para analizar platos cotidianos, menús de restauración y alimentos de marca en módulos educativos de SaludConNutricon.

🖥️ Recurso Operativo – Búsqueda de Alimentos

🧪 Demo simple: busca un alimento por nombre.

Introduce un alimento para buscarlo.

📝 Código – Versión Simple


// Reemplazar con APP ID y APP KEY reales de Nutritionix
const NUTRITIONIX_APP_ID_14 = "YOUR_APP_ID";
const NUTRITIONIX_APP_KEY_14 = "YOUR_APP_KEY";

document.getElementById("btnBuscarSimple14").onclick = async () => {
  const q = document.getElementById("busquedaSimple14").value.trim();
  const salida = document.getElementById("resultadoSimple14");

  if (!q) {
    salida.textContent = "🚫 Escribe un alimento.";
    return;
  }

  salida.textContent = "Cargando…";

  try {
    const res = await fetch("https://trackapi.nutritionix.com/v2/natural/nutrients", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "x-app-id": NUTRITIONIX_APP_ID_14,
        "x-app-key": NUTRITIONIX_APP_KEY_14
      },
      body: JSON.stringify({ query: q })
    });

    const data = await res.json();

    if (!data.foods || data.foods.length === 0) {
      salida.textContent = "⚠️ No se encontraron alimentos.";
      return;
    }

    salida.textContent = "📌 Primer resultado: " + data.foods[0].food_name;
  } catch (err) {
    salida.textContent = "🚫 Error: " + err.message;
  }
};

📌 Código – Versión Avanzada


document.getElementById("btnBuscarAvanzado14").onclick = async () => {
  const q = document.getElementById("busquedaAvanzada14").value.trim();
  const panel = document.getElementById("panelAlimento14");

  if (!q) return;

  panel.style.display = "none";

  try {
    const res = await fetch("https://trackapi.nutritionix.com/v2/natural/nutrients", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "x-app-id": NUTRITIONIX_APP_ID_14,
        "x-app-key": NUTRITIONIX_APP_KEY_14
      },
      body: JSON.stringify({ query: q })
    });

    const data = await res.json();

    if (!data.foods || data.foods.length === 0) {
      panel.style.display = "block";
      document.getElementById("nombreAlimento14").textContent = "No encontrado";
      return;
    }

    const alimento = data.foods[0];

    document.getElementById("nombreAlimento14").textContent = alimento.food_name || "Sin nombre";
    document.getElementById("caloriasAlimento14").textContent = alimento.nf_calories ?? "—";
    document.getElementById("proteinasAlimento14").textContent = alimento.nf_protein ?? "—";
    document.getElementById("grasasAlimento14").textContent = alimento.nf_total_fat ?? "—";

    panel.style.display = "block";
  } catch (err) {
    panel.style.display = "block";
    document.getElementById("nombreAlimento14").textContent = "Error: " + err.message;
  }
};
ID: 15 Depto: Salud Pública y Epidemiología

💊 OpenFDA API

📚 Nombre: OpenFDA API

🗂️ Clasificación: APIs de Salud Pública – Medicamentos, Dispositivos Médicos y Seguridad Alimentaria.

📰 Descripción breve: OpenFDA es una API oficial de la Food and Drug Administration (FDA) de EE.UU. Proporciona acceso abierto a datos sobre medicamentos, reacciones adversas, dispositivos médicos, alimentos, retiradas de productos y reportes de seguridad.

⚙️ Dependencias: Endpoint público, conexión a Internet, formato JSON.

💡 Características clave:
• Datos oficiales de la FDA
• Reacciones adversas a medicamentos (FAERS)
• Información de medicamentos aprobados
• Retiradas de productos alimentarios
• Dispositivos médicos y reportes de seguridad

🌍 Otros datos de valor: Ideal para dashboards de salud pública, análisis de seguridad alimentaria, vigilancia epidemiológica y módulos educativos de SaludConNutricon.

🖥️ Recurso Operativo – Consultas a OpenFDA

🧪 Demo simple: consulta reacciones adversas asociadas a un medicamento.

Introduce un medicamento para consultar reportes.

📝 Código – Versión Simple


document.getElementById("btnBuscarSimple15").onclick = async () => {
  const q = document.getElementById("medicamentoSimple15").value.trim();
  const salida = document.getElementById("resultadoSimple15");

  if (!q) {
    salida.textContent = "🚫 Escribe un medicamento.";
    return;
  }

  salida.textContent = "Cargando…";

  try {
    const res = await fetch(
      "https://api.fda.gov/drug/event.json?search=patient.drug.medicinalproduct:" +
      q + "&limit=1"
    );
    const data = await res.json();

    if (!data.results || data.results.length === 0) {
      salida.textContent = "⚠️ No se encontraron reportes.";
      return;
    }

    const evento = data.results[0];
    salida.textContent = "📌 Reacción reportada: " +
      evento.patient.reaction[0].reactionmeddrapt;
  } catch (err) {
    salida.textContent = "🚫 Error: " + err.message;
  }
};

📌 Código – Versión Avanzada


document.getElementById("btnBuscarAvanzado15").onclick = async () => {
  const q = document.getElementById("medicamentoAvanzado15").value.trim();
  const panel = document.getElementById("panelOpenFDA15");

  if (!q) return;

  panel.style.display = "none";

  try {
    const res = await fetch(
      "https://api.fda.gov/drug/event.json?search=patient.drug.medicinalproduct:" +
      q + "&limit=10"
    );
    const data = await res.json();

    if (!data.results || data.results.length === 0) {
      panel.style.display = "block";
      document.getElementById("nombreMedicamento15").textContent = "No encontrado";
      return;
    }

    const eventos = data.results;

    document.getElementById("nombreMedicamento15").textContent = q;
    document.getElementById("casosMedicamento15").textContent = eventos.length;

    const reaccion = eventos[0].patient.reaction[0].reactionmeddrapt;
    document.getElementById("reaccionMedicamento15").textContent = reaccion;

    const fecha = eventos[0].receiptdate;
    document.getElementById("fechaMedicamento15").textContent = fecha || "—";

    panel.style.display = "block";
  } catch (err) {
    panel.style.display = "block";
    document.getElementById("nombreMedicamento15").textContent = "Error: " + err.message;
  }
};
ID: 16 Depto: Salud Pública y Epidemiología

🌍 WHO GHO API

📚 Nombre: WHO Global Health Observatory API

🗂️ Clasificación: APIs de Salud Pública – Indicadores Globales, Mortalidad, Enfermedades y Estadísticas Sanitarias.

📰 Descripción breve: La WHO GHO API proporciona acceso a los indicadores oficiales de la Organización Mundial de la Salud: mortalidad, nutrición, enfermedades, factores de riesgo, sistemas sanitarios y estadísticas globales.

⚙️ Dependencias: Endpoint público, conexión a Internet, formato JSON.

💡 Características clave:
• Indicadores globales de salud
• Datos por país, región y año
• Mortalidad, nutrición, enfermedades
• Factores de riesgo y sistemas sanitarios
• Datos oficiales de la OMS

🌍 Otros datos de valor: Ideal para dashboards epidemiológicos, informes sanitarios, análisis comparativos y módulos educativos de SaludConNutricon.

🖥️ Recurso Operativo – Indicadores OMS

🧪 Demo simple: consulta un indicador global por su código.

Introduce un código de indicador OMS.

📝 Código – Versión Simple


document.getElementById("btnBuscarSimple16").onclick = async () => {
  const code = document.getElementById("indicadorSimple16").value.trim();
  const salida = document.getElementById("resultadoSimple16");

  if (!code) {
    salida.textContent = "🚫 Escribe un código de indicador.";
    return;
  }

  salida.textContent = "Cargando…";

  try {
    const res = await fetch(
      "https://ghoapi.azureedge.net/api/" + code
    );
    const data = await res.json();

    if (!data.value || data.value.length === 0) {
      salida.textContent = "⚠️ Indicador no encontrado.";
      return;
    }

    salida.textContent = "📌 Indicador encontrado: " + data.value[0].IndicatorName;
  } catch (err) {
    salida.textContent = "🚫 Error: " + err.message;
  }
};

📌 Código – Versión Avanzada


document.getElementById("btnBuscarAvanzado16").onclick = async () => {
  const code = document.getElementById("indicadorAvanzado16").value.trim();
  const country = document.getElementById("paisAvanzado16").value.trim();
  const panel = document.getElementById("panelOMS16");

  if (!code || !country) return;

  panel.style.display = "none";

  try {
    const res = await fetch(
      "https://ghoapi.azureedge.net/api/" + code + "?$filter=SpatialDim eq '" + country + "'"
    );
    const data = await res.json();

    if (!data.value || data.value.length === 0) {
      panel.style.display = "block";
      document.getElementById("nombreIndicador16").textContent = "No encontrado";
      return;
    }

    const item = data.value[0];

    document.getElementById("nombreIndicador16").textContent = item.IndicatorName;
    document.getElementById("paisIndicador16").textContent = item.SpatialDim;
    document.getElementById("anioIndicador16").textContent = item.TimeDim;
    document.getElementById("valorIndicador16").textContent = item.Value;

    panel.style.display = "block";
  } catch (err) {
    panel.style.display = "block";
    document.getElementById("nombreIndicador16").textContent = "Error: " + err.message;
  }
};
ID: 17 Depto: Datos Abiertos y Directorios

🌐 World Bank Open Data API

📚 Nombre: World Bank Open Data API

🗂️ Clasificación: APIs de Datos Abiertos – Indicadores Económicos, Sociales y de Desarrollo Global.

📰 Descripción breve: La API del Banco Mundial proporciona acceso abierto a miles de indicadores globales: salud, educación, economía, nutrición, pobreza, población, medio ambiente y desarrollo humano.

⚙️ Dependencias: Endpoint público, conexión a Internet, formato JSON.

💡 Características clave:
• Indicadores globales por país y año
• Datos económicos y sociales
• Estadísticas de salud y nutrición
• Series temporales completas
• Datos oficiales del Banco Mundial

🌍 Otros datos de valor: Ideal para dashboards comparativos, análisis de desarrollo, informes educativos y módulos de contexto socioeconómico en SaludConNutricon.

🖥️ Recurso Operativo – Indicadores del Banco Mundial

🧪 Demo simple: consulta un indicador global por su código.

Introduce un código de indicador del Banco Mundial.

📝 Código – Versión Simple


document.getElementById("btnBuscarSimple17").onclick = async () => {
  const code = document.getElementById("indicadorSimple17").value.trim();
  const salida = document.getElementById("resultadoSimple17");

  if (!code) {
    salida.textContent = "🚫 Escribe un código de indicador.";
    return;
  }

  salida.textContent = "Cargando…";

  try {
    const res = await fetch(
      "https://api.worldbank.org/v2/country/all/indicator/" + code + "?format=json"
    );
    const data = await res.json();

    if (!data[1] || data[1].length === 0) {
      salida.textContent = "⚠️ Indicador no encontrado.";
      return;
    }

    salida.textContent = "📌 Indicador encontrado: " + data[1][0].indicator.value;
  } catch (err) {
    salida.textContent = "🚫 Error: " + err.message;
  }
};

📌 Código – Versión Avanzada


document.getElementById("btnBuscarAvanzado17").onclick = async () => {
  const code = document.getElementById("indicadorAvanzado17").value.trim();
  const country = document.getElementById("paisAvanzado17").value.trim();
  const panel = document.getElementById("panelBM17");

  if (!code || !country) return;

  panel.style.display = "none";

  try {
    const res = await fetch(
      "https://api.worldbank.org/v2/country/" + country +
      "/indicator/" + code + "?format=json"
    );
    const data = await res.json();

    if (!data[1] || data[1].length === 0) {
      panel.style.display = "block";
      document.getElementById("nombreIndicador17").textContent = "No encontrado";
      return;
    }

    const item = data[1][0];

    document.getElementById("nombreIndicador17").textContent = item.indicator.value;
    document.getElementById("paisIndicador17").textContent = item.country.id;
    document.getElementById("anioIndicador17").textContent = item.date;
    document.getElementById("valorIndicador17").textContent = item.value ?? "—";

    panel.style.display = "block";
  } catch (err) {
    panel.style.display = "block";
    document.getElementById("nombreIndicador17").textContent = "Error: " + err.message;
  }
};
ID: 18 Depto: Datos Abiertos y Directorios

🌾 FAOSTAT API

📚 Nombre: FAOSTAT API

🗂️ Clasificación: APIs de Datos Abiertos – Agricultura, Alimentación, Producción y Seguridad Alimentaria.

📰 Descripción breve: La FAOSTAT API, desarrollada por la FAO (Organización de las Naciones Unidas para la Alimentación y la Agricultura), proporciona datos globales sobre producción agrícola, nutrición, comercio alimentario, emisiones, precios, uso del suelo y estadísticas alimentarias históricas.

⚙️ Dependencias: Endpoint público, conexión a Internet, formato JSON.

💡 Características clave:
• Datos agrícolas globales
• Producción, consumo y comercio
• Estadísticas alimentarias históricas
• Emisiones y uso del suelo
• Datos oficiales de la FAO

🌍 Otros datos de valor: Ideal para análisis de seguridad alimentaria, estudios de nutrición global, dashboards de sostenibilidad y módulos educativos de SaludConNutricon.

🖥️ Recurso Operativo – Datos FAOSTAT

🧪 Demo simple: consulta un ítem agrícola por su código.

Introduce un código FAOSTAT.

📝 Código – Versión Simple


document.getElementById("btnBuscarSimple18").onclick = async () => {
  const code = document.getElementById("itemSimple18").value.trim();
  const salida = document.getElementById("resultadoSimple18");

  if (!code) {
    salida.textContent = "🚫 Escribe un código FAOSTAT.";
    return;
  }

  salida.textContent = "Cargando…";

  try {
    const res = await fetch(
      "https://fenixservices.fao.org/faostat/api/v1/en/ItemList/" + code
    );
    const data = await res.json();

    if (!data.data || data.data.length === 0) {
      salida.textContent = "⚠️ Ítem no encontrado.";
      return;
    }

    salida.textContent = "📌 Ítem encontrado: " + data.data[0].Item;
  } catch (err) {
    salida.textContent = "🚫 Error: " + err.message;
  }
};

📌 Código – Versión Avanzada


document.getElementById("btnBuscarAvanzado18").onclick = async () => {
  const item = document.getElementById("itemAvanzado18").value.trim();
  const country = document.getElementById("paisAvanzado18").value.trim();
  const panel = document.getElementById("panelFAO18");

  if (!item || !country) return;

  panel.style.display = "none";

  try {
    const res = await fetch(
      "https://fenixservices.fao.org/faostat/api/v1/en/QCL?item_code=" +
      item + "&area_code=" + country
    );
    const data = await res.json();

    if (!data.data || data.data.length === 0) {
      panel.style.display = "block";
      document.getElementById("nombreItem18").textContent = "No encontrado";
      return;
    }

    const registro = data.data[0];

    document.getElementById("nombreItem18").textContent = registro.Item;
    document.getElementById("paisItem18").textContent = registro.Area;
    document.getElementById("anioItem18").textContent = registro.Year;
    document.getElementById("valorItem18").textContent = registro.Value ?? "—";

    panel.style.display = "block";
  } catch (err) {
    panel.style.display = "block";
    document.getElementById("nombreItem18").textContent = "Error: " + err.message;
  }
};
ID: 19 Depto: Visualización y Mapas

🗺️ OpenStreetMap Nominatim API

📚 Nombre: OpenStreetMap Nominatim API

🗂️ Clasificación: APIs de Mapas – Geocodificación, Búsqueda de Lugares y Coordenadas.

📰 Descripción breve: Nominatim es el motor de geocodificación oficial de OpenStreetMap. Permite convertir direcciones en coordenadas (geocodificación) y coordenadas en direcciones (geocodificación inversa), además de buscar lugares, ciudades, regiones y puntos de interés.

⚙️ Dependencias: Endpoint público, conexión a Internet, formato JSON.

💡 Características clave:
• Geocodificación directa (dirección → coordenadas)
• Geocodificación inversa (coordenadas → dirección)
• Búsqueda de lugares y puntos de interés
• Datos abiertos y libres
• Integración con Leaflet, MapLibre y otros mapas

🌍 Otros datos de valor: Ideal para mapas interactivos, localización de recursos sanitarios, análisis geográficos y módulos educativos de SaludConNutricon.

🖥️ Recurso Operativo – Geocodificación OSM

🧪 Demo simple: convierte una dirección en coordenadas.

Introduce una dirección para obtener coordenadas.

📝 Código – Versión Simple


document.getElementById("btnBuscarSimple19").onclick = async () => {
  const q = document.getElementById("direccionSimple19").value.trim();
  const salida = document.getElementById("resultadoSimple19");

  if (!q) {
    salida.textContent = "🚫 Escribe una dirección.";
    return;
  }

  salida.textContent = "Cargando…";

  try {
    const res = await fetch(
      "https://nominatim.openstreetmap.org/search?format=json&q=" + encodeURIComponent(q)
    );
    const data = await res.json();

    if (!data || data.length === 0) {
      salida.textContent = "⚠️ No se encontraron resultados.";
      return;
    }

    const lugar = data[0];
    salida.textContent =
      "📌 Coordenadas: " + lugar.lat + ", " + lugar.lon;
  } catch (err) {
    salida.textContent = "🚫 Error: " + err.message;
  }
};

📌 Código – Versión Avanzada


document.getElementById("btnBuscarAvanzado19").onclick = async () => {
  const lat = document.getElementById("latAvanzado19").value.trim();
  const lon = document.getElementById("lonAvanzado19").value.trim();
  const panel = document.getElementById("panelOSM19");

  if (!lat || !lon) return;

  panel.style.display = "none";

  try {
    const res = await fetch(
      "https://nominatim.openstreetmap.org/reverse?format=json&lat=" +
      lat + "&lon=" + lon
    );
    const data = await res.json();

    if (!data || !data.display_name) {
      panel.style.display = "block";
      document.getElementById("direccionOSM19").textContent = "No encontrado";
      return;
    }

    document.getElementById("direccionOSM19").textContent = data.display_name;
    document.getElementById("latitudOSM19").textContent = lat;
    document.getElementById("longitudOSM19").textContent = lon;

    panel.style.display = "block";
  } catch (err) {
    panel.style.display = "block";
    document.getElementById("direccionOSM19").textContent = "Error: " + err.message;
  }
};
ID: 20 Depto: Visualización y Mapas

⛅ OpenWeatherMap API

📚 Nombre: OpenWeatherMap API

🗂️ Clasificación: APIs de Visualización – Meteorología, Clima, Mapas y Datos Atmosféricos.

📰 Descripción breve: OpenWeatherMap proporciona datos meteorológicos globales: temperatura, humedad, viento, presión, pronósticos, alertas y mapas climáticos. Es una de las APIs más utilizadas para dashboards, apps móviles y sistemas de análisis ambiental.

⚙️ Dependencias: API Key, conexión a Internet, formato JSON.

💡 Características clave:
• Datos meteorológicos actuales
• Pronósticos por horas y días
• Alertas climáticas
• Mapas de viento, nubes y temperatura
• Datos globales y actualizados

🌍 Otros datos de valor: Ideal para módulos educativos de clima, dashboards ambientales, análisis de salud pública y visualizaciones interactivas en SaludConNutricon.

🖥️ Recurso Operativo – Datos Meteorológicos

🧪 Demo simple: consulta la temperatura actual de una ciudad.

Introduce una ciudad para consultar el clima.

📝 Código – Versión Simple


// Reemplazar con tu API KEY real
const OWM_KEY_20 = "YOUR_API_KEY";

document.getElementById("btnBuscarSimple20").onclick = async () => {
  const city = document.getElementById("ciudadSimple20").value.trim();
  const salida = document.getElementById("resultadoSimple20");

  if (!city) {
    salida.textContent = "🚫 Escribe una ciudad.";
    return;
  }

  salida.textContent = "Cargando…";

  try {
    const res = await fetch(
      "https://api.openweathermap.org/data/2.5/weather?q=" +
      city + "&units=metric&appid=" + OWM_KEY_20
    );
    const data = await res.json();

    if (!data.main) {
      salida.textContent = "⚠️ Ciudad no encontrada.";
      return;
    }

    salida.textContent = "🌡️ Temperatura: " + data.main.temp + "°C";
  } catch (err) {
    salida.textContent = "🚫 Error: " + err.message;
  }
};

📌 Código – Versión Avanzada


document.getElementById("btnBuscarAvanzado20").onclick = async () => {
  const city = document.getElementById("ciudadAvanzado20").value.trim();
  const panel = document.getElementById("panelOW20");

  if (!city) return;

  panel.style.display = "none";

  try {
    const res = await fetch(
      "https://api.openweathermap.org/data/2.5/weather?q=" +
      city + "&units=metric&appid=" + OWM_KEY_20
    );
    const data = await res.json();

    if (!data.main) {
      panel.style.display = "block";
      document.getElementById("nombreCiudad20").textContent = "No encontrada";
      return;
    }

    document.getElementById("nombreCiudad20").textContent = data.name;
    document.getElementById("tempCiudad20").textContent = data.main.temp + "°C";
    document.getElementById("humCiudad20").textContent = data.main.humidity + "%";
    document.getElementById("vientoCiudad20").textContent = data.wind.speed + " m/s";

    panel.style.display = "block";
  } catch (err) {
    panel.style.display = "block";
    document.getElementById("nombreCiudad20").textContent = "Error: " + err.message;
  }
};
ID: 21 Depto: Nutrición y Alimentación

🥗 Nutritionix API

📚 Nombre: Nutritionix API

🗂️ Clasificación: APIs Nutricionales – Alimentos, Marcas Comerciales y Menús de Restauración.

📰 Descripción breve: Nutritionix es una API que proporciona información nutricional de alimentos genéricos, productos de marca y platos de restaurantes. Es ampliamente utilizada en aplicaciones de salud, fitness y educación alimentaria.

⚙️ Dependencias: APP ID + APP KEY, conexión a Internet, formato JSON.

💡 Características clave:
• Búsqueda por texto libre
• Datos de marcas y restaurantes
• Calorías, macronutrientes y micronutrientes
• Porciones y unidades
• Ideal para apps de dieta y análisis nutricional

🌍 Otros datos de valor: Perfecta para módulos educativos, análisis de alimentos cotidianos y herramientas de salud pública en SaludConNutricon.

🖥️ Recurso Operativo – Consulta de Alimentos

🧪 Demo simple: consulta un alimento por nombre.

Introduce un alimento para buscarlo.

📝 Código – Versión Simple


// Reemplazar con APP ID y APP KEY reales
const NUTRI_ID_21 = "YOUR_APP_ID";
const NUTRI_KEY_21 = "YOUR_APP_KEY";

document.getElementById("btnBuscarSimple21").onclick = async () => {
  const q = document.getElementById("busquedaSimple21").value.trim();
  const salida = document.getElementById("resultadoSimple21");

  if (!q) {
    salida.textContent = "🚫 Escribe un alimento.";
    return;
  }

  salida.textContent = "Cargando…";

  try {
    const res = await fetch("https://trackapi.nutritionix.com/v2/natural/nutrients", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "x-app-id": NUTRI_ID_21,
        "x-app-key": NUTRI_KEY_21
      },
      body: JSON.stringify({ query: q })
    });

    const data = await res.json();

    if (!data.foods || data.foods.length === 0) {
      salida.textContent = "⚠️ No se encontraron alimentos.";
      return;
    }

    salida.textContent = "📌 Primer resultado: " + data.foods[0].food_name;
  } catch (err) {
    salida.textContent = "🚫 Error: " + err.message;
  }
};

📌 Código – Versión Avanzada


document.getElementById("btnBuscarAvanzado21").onclick = async () => {
  const q = document.getElementById("busquedaAvanzada21").value.trim();
  const panel = document.getElementById("panelNutri21");

  if (!q) return;

  panel.style.display = "none";

  try {
    const res = await fetch("https://trackapi.nutritionix.com/v2/natural/nutrients", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "x-app-id": NUTRI_ID_21,
        "x-app-key": NUTRI_KEY_21
      },
      body: JSON.stringify({ query: q })
    });

    const data = await res.json();

    if (!data.foods || data.foods.length === 0) {
      panel.style.display = "block";
      document.getElementById("nombreAlimento21").textContent = "No encontrado";
      return;
    }

    const alimento = data.foods[0];

    document.getElementById("nombreAlimento21").textContent = alimento.food_name;
    document.getElementById("caloriasAlimento21").textContent = alimento.nf_calories ?? "—";
    document.getElementById("proteinasAlimento21").textContent = alimento.nf_protein ?? "—";
    document.getElementById("grasasAlimento21").textContent = alimento.nf_total_fat ?? "—";

    panel.style.display = "block";
  } catch (err) {
    panel.style.display = "block";
    document.getElementById("nombreAlimento21").textContent = "Error: " + err.message;
  }
};
ID: 22 Depto: Datos Abiertos y Directorios

📚 Public APIs Directory

📚 Nombre: Public APIs Directory

🗂️ Clasificación: Directorios de APIs – Catálogos Abiertos, Recursos Públicos y Descubrimiento de Servicios.

📰 Descripción breve: Public APIs Directory es un catálogo abierto que recopila cientos de APIs públicas clasificadas por categorías: salud, ciencia, datos abiertos, clima, educación, mapas, seguridad, etc. Es una herramienta esencial para descubrir nuevas fuentes de datos y ampliar ecosistemas educativos.

⚙️ Dependencias: Endpoint público, conexión a Internet, formato JSON.

💡 Características clave:
• Catálogo global de APIs públicas
• Clasificación por categorías
• Búsqueda por nombre y descripción
• Datos abiertos y gratuitos
• Ideal para exploración y prototipado

🌍 Otros datos de valor: Perfecto para ampliar el ecosistema de SaludConNutricon, descubrir nuevas APIs y construir módulos educativos basados en datos reales.

🖥️ Recurso Operativo – Búsqueda de APIs Públicas

🧪 Demo simple: busca APIs por palabra clave.

Introduce un término para buscar APIs.

📝 Código – Versión Simple


document.getElementById("btnBuscarSimple22").onclick = async () => {
  const q = document.getElementById("busquedaSimple22").value.trim();
  const salida = document.getElementById("resultadoSimple22");

  if (!q) {
    salida.textContent = "🚫 Escribe un término.";
    return;
  }

  salida.textContent = "Cargando…";

  try {
    const res = await fetch("https://api.publicapis.org/entries?title=" + q);
    const data = await res.json();

    if (!data.entries || data.entries.length === 0) {
      salida.textContent = "⚠️ No se encontraron APIs.";
      return;
    }

    salida.textContent = "📌 Primera API: " + data.entries[0].API;
  } catch (err) {
    salida.textContent = "🚫 Error: " + err.message;
  }
};

📌 Código – Versión Avanzada


document.getElementById("btnBuscarAvanzado22").onclick = async () => {
  const q = document.getElementById("busquedaAvanzada22").value.trim();
  const panel = document.getElementById("panelAPIs22");

  if (!q) return;

  panel.style.display = "none";

  try {
    const res = await fetch("https://api.publicapis.org/entries?description=" + q);
    const data = await res.json();

    if (!data.entries || data.entries.length === 0) {
      panel.style.display = "block";
      document.getElementById("nombreAPI22").textContent = "No encontrado";
      return;
    }

    const api = data.entries[0];

    document.getElementById("nombreAPI22").textContent = api.API;
    document.getElementById("descripcionAPI22").textContent = api.Description;
    document.getElementById("categoriaAPI22").textContent = api.Category;

    panel.style.display = "block";
  } catch (err) {
    panel.style.display = "block";
    document.getElementById("nombreAPI22").textContent = "Error: " + err.message;
  }
};
ID: 23 Depto: Datos Abiertos y Directorios

🐙 GitHub Public APIs

📚 Nombre: GitHub Public APIs

🗂️ Clasificación: Directorios de APIs – Repositorios Públicos, Catálogos y Recursos Abiertos.

📰 Descripción breve: GitHub Public APIs es un repositorio colaborativo que recopila cientos de APIs públicas clasificadas por categorías. Es una de las fuentes más completas para descubrir APIs de salud, ciencia, datos abiertos, clima, educación, mapas, seguridad y más.

⚙️ Dependencias: Endpoint público de GitHub, conexión a Internet, formato JSON.

💡 Características clave:
• Catálogo colaborativo de APIs
• Clasificación por categorías
• Repositorios mantenidos por la comunidad
• Búsqueda por nombre y descripción
• Ideal para exploración y prototipado

🌍 Otros datos de valor: Excelente para ampliar el ecosistema de SaludConNutricon, descubrir nuevas APIs y construir módulos educativos basados en datos reales.

🖥️ Recurso Operativo – Búsqueda en GitHub APIs

🧪 Demo simple: busca APIs por palabra clave dentro del repositorio.

Introduce un término para buscar APIs en GitHub.

📝 Código – Versión Simple


document.getElementById("btnBuscarSimple23").onclick = async () => {
  const q = document.getElementById("busquedaSimple23").value.trim();
  const salida = document.getElementById("resultadoSimple23");

  if (!q) {
    salida.textContent = "🚫 Escribe un término.";
    return;
  }

  salida.textContent = "Cargando…";

  try {
    const res = await fetch(
      "https://api.github.com/search/repositories?q=" + q + "+in:name+topic:api"
    );
    const data = await res.json();

    if (!data.items || data.items.length === 0) {
      salida.textContent = "⚠️ No se encontraron APIs.";
      return;
    }

    salida.textContent = "📌 Primera API: " + data.items[0].name;
  } catch (err) {
    salida.textContent = "🚫 Error: " + err.message;
  }
};

📌 Código – Versión Avanzada


document.getElementById("btnBuscarAvanzado23").onclick = async () => {
  const q = document.getElementById("busquedaAvanzada23").value.trim();
  const panel = document.getElementById("panelGitHub23");

  if (!q) return;

  panel.style.display = "none";

  try {
    const res = await fetch(
      "https://api.github.com/search/repositories?q=" + q + "+in:description+topic:api"
    );
    const data = await res.json();

    if (!data.items || data.items.length === 0) {
      panel.style.display = "block";
      document.getElementById("nombreAPI23").textContent = "No encontrado";
      return;
    }

    const repo = data.items[0];

    document.getElementById("nombreAPI23").textContent = repo.name;
    document.getElementById("descripcionAPI23").textContent = repo.description || "Sin descripción";
    document.getElementById("enlaceAPI23").href = repo.html_url;
    document.getElementById("enlaceAPI23").textContent = repo.html_url;

    panel.style.display = "block";
  } catch (err) {
    panel.style.display = "block";
    document.getElementById("nombreAPI23").textContent = "Error: " + err.message;
  }
};
ID: 24 Depto: Datos Abiertos y Directorios

📖 Mixed Analytics Open APIs

📚 Nombre: Mixed Analytics – Open APIs List

🗂️ Clasificación: Directorios de APIs – Catálogos Abiertos, Recursos Públicos y Descubrimiento de Servicios.

📰 Descripción breve: Mixed Analytics mantiene uno de los catálogos más completos de APIs abiertas disponibles en Internet. Incluye cientos de APIs clasificadas por categorías: salud, nutrición, clima, datos abiertos, mapas, educación, ciencia, transporte, seguridad y más.

⚙️ Dependencias: Acceso público, conexión a Internet, formato JSON o documentación HTML.

💡 Características clave:
• Catálogo extenso de APIs abiertas
• Clasificación temática detallada
• Enlaces directos a documentación oficial
• Recursos para prototipado y aprendizaje
• Ideal para ampliar ecosistemas educativos

🌍 Otros datos de valor: Excelente para descubrir nuevas fuentes de datos para SaludConNutricon, especialmente en módulos de nutrición, salud pública, clima y visualización.

🖥️ Recurso Operativo – Exploración de APIs

🧪 Demo simple: busca APIs por palabra clave dentro del catálogo.

Introduce un término para buscar APIs.

📝 Código – Versión Simple


document.getElementById("btnBuscarSimple24").onclick = async () => {
  const q = document.getElementById("busquedaSimple24").value.trim();
  const salida = document.getElementById("resultadoSimple24");

  if (!q) {
    salida.textContent = "🚫 Escribe un término.";
    return;
  }

  salida.textContent = "Cargando…";

  try {
    const res = await fetch("https://api.publicapis.org/entries?title=" + q);
    const data = await res.json();

    if (!data.entries || data.entries.length === 0) {
      salida.textContent = "⚠️ No se encontraron APIs.";
      return;
    }

    salida.textContent = "📌 Primera API: " + data.entries[0].API;
  } catch (err) {
    salida.textContent = "🚫 Error: " + err.message;
  }
};

📌 Código – Versión Avanzada


document.getElementById("btnBuscarAvanzado24").onclick = async () => {
  const q = document.getElementById("busquedaAvanzada24").value.trim();
  const panel = document.getElementById("panelMixed24");

  if (!q) return;

  panel.style.display = "none";

  try {
    const res = await fetch("https://api.publicapis.org/entries?description=" + q);
    const data = await res.json();

    if (!data.entries || data.entries.length === 0) {
      panel.style.display = "block";
      document.getElementById("nombreAPI24").textContent = "No encontrado";
      return;
    }

    const api = data.entries[0];

    document.getElementById("nombreAPI24").textContent = api.API;
    document.getElementById("descripcionAPI24").textContent = api.Description;
    document.getElementById("enlaceAPI24").href = api.Link;
    document.getElementById("enlaceAPI24").textContent = api.Link;

    panel.style.display = "block";
  } catch (err) {
    panel.style.display = "block";
    document.getElementById("nombreAPI24").textContent = "Error: " + err.message;
  }
};
ID: 25 Depto: APIs del Navegador

⚡ Web Vitals API

📚 Nombre: Web Vitals API

🗂️ Clasificación: APIs del Navegador – Métricas de Rendimiento, UX y Calidad Web.

📰 Descripción breve: Web Vitals es un conjunto de métricas estandarizadas por Google para medir la experiencia real del usuario: velocidad, interactividad y estabilidad visual. Permite evaluar la calidad de una web en tiempo real y optimizar su rendimiento.

⚙️ Dependencias: Librería Web Vitals, navegador moderno, entorno web.

💡 Características clave:
• LCP (Largest Contentful Paint)
• FID (First Input Delay)
• CLS (Cumulative Layout Shift)
• INP (Interaction to Next Paint)
• Métricas en tiempo real

🌍 Otros datos de valor: Ideal para auditorías de rendimiento, optimización UX, dashboards educativos y análisis de calidad en SaludConNutricon.

🖥️ Recurso Operativo – Métricas Web Vitals

🧪 Demo simple: muestra LCP (Largest Contentful Paint).

Pulsa el botón para medir LCP.

📝 Código – Versión Simple


// Requiere importar la librería Web Vitals
// 

document.getElementById("btnLCP25").onclick = () => {
  webVitals.getLCP(metric => {
    document.getElementById("resultadoSimple25").textContent =
      "📌 LCP: " + metric.value.toFixed(2) + " ms";
  });
};

📌 Código – Versión Avanzada


// Requiere importar la librería Web Vitals
// 

document.getElementById("btnVitals25").onclick = () => {
  const panel = document.getElementById("panelVitals25");
  panel.style.display = "none";

  webVitals.getLCP(metric => {
    document.getElementById("lcp25").textContent = metric.value.toFixed(2) + " ms";
  });

  webVitals.getCLS(metric => {
    document.getElementById("cls25").textContent = metric.value.toFixed(3);
  });

  webVitals.getINP(metric => {
    document.getElementById("inp25").textContent = metric.value.toFixed(2) + " ms";
  });

  panel.style.display = "block";
};
ID: 26 Depto: APIs del Navegador

📏 Resize Observer API

📚 Nombre: Resize Observer API

🗂️ Clasificación: APIs del Navegador – Observación de Tamaño, Layout y Componentes Responsivos.

📰 Descripción breve: Resize Observer permite detectar cambios en el tamaño de cualquier elemento del DOM sin necesidad de usar eventos de ventana o cálculos manuales. Es esencial para interfaces responsivas, dashboards, gráficos y componentes dinámicos.

⚙️ Dependencias: Navegador moderno compatible, DOM, JavaScript.

💡 Características clave:
• Observación de cambios de tamaño en tiempo real
• Ideal para gráficos, paneles y layouts dinámicos
• Sustituye hacks basados en `window.onresize`
• Eficiente y moderno
• Compatible con frameworks y componentes web

🌍 Otros datos de valor: Muy útil para módulos educativos interactivos, visualizaciones adaptativas y componentes responsivos en SaludConNutricon.

🖥️ Recurso Operativo – Observación de Tamaño

🧪 Demo simple: observa cambios de tamaño en un cuadro.

Cambia el tamaño de la caja para ver los valores.

📝 Código – Versión Simple


const caja26 = document.getElementById("cajaSimple26");
const salida26 = document.getElementById("resultadoSimple26");

const obs26 = new ResizeObserver(entries => {
  for (let entry of entries) {
    const { width, height } = entry.contentRect;
    salida26.textContent = "📐 " + width.toFixed(0) + " × " + height.toFixed(0) + " px";
  }
});

obs26.observe(caja26);

📌 Código – Versión Avanzada


const cajaAdv26 = document.getElementById("cajaAvanzada26");
const panel26 = document.getElementById("panelResize26");

const obsAdv26 = new ResizeObserver(entries => {
  for (let entry of entries) {
    const { width, height } = entry.contentRect;

    document.getElementById("ancho26").textContent = width.toFixed(0) + " px";
    document.getElementById("alto26").textContent = height.toFixed(0) + " px";
    document.getElementById("area26").textContent = (width * height).toFixed(0) + " px²";

    panel26.style.display = "block";
  }
});

obsAdv26.observe(cajaAdv26);
ID: 27 Depto: APIs del Navegador

🎞️ Web Animations API

📚 Nombre: Web Animations API

🗂️ Clasificación: APIs del Navegador – Animaciones, Interactividad y UX Dinámica.

📰 Descripción breve: La Web Animations API permite crear animaciones nativas en el navegador mediante JavaScript, combinando la potencia de CSS y SVG con control total sobre tiempos, estados y reproducción. Es ideal para interfaces modernas, transiciones fluidas y experiencias interactivas.

⚙️ Dependencias: Navegador moderno compatible, DOM, JavaScript.

💡 Características clave:
• Animaciones nativas sin librerías externas
• Control total: duración, iteraciones, easing, playback
• Integración con CSS y SVG
• Animaciones sincronizadas y dinámicas
• Ideal para UI/UX avanzadas

🌍 Otros datos de valor: Perfecta para módulos educativos interactivos, transiciones suaves, dashboards animados y experiencias visuales en SaludConNutricon.

🖥️ Recurso Operativo – Animaciones Nativas

🧪 Demo simple: animación básica de movimiento.

Pulsa el botón para iniciar la animación.

📝 Código – Versión Simple


document.getElementById("btnAnimarSimple27").onclick = () => {
  const box = document.getElementById("cajaSimple27");

  box.animate(
    [
      { transform: "translateX(0px)" },
      { transform: "translateX(120px)" }
    ],
    {
      duration: 800,
      easing: "ease-out"
    }
  );

  document.getElementById("resultadoSimple27").textContent =
    "🎉 Animación ejecutada.";
};

📌 Código – Versión Avanzada


document.getElementById("btnAnimarAvanzado27").onclick = () => {
  const box = document.getElementById("cajaAvanzada27");
  const panel = document.getElementById("panelAnim27");

  const anim = box.animate(
    [
      { transform: "scale(1) rotate(0deg)", opacity: 1 },
      { transform: "scale(1.4) rotate(180deg)", opacity: 0.6 },
      { transform: "scale(1) rotate(360deg)", opacity: 1 }
    ],
    {
      duration: 1500,
      iterations: 1,
      easing: "ease-in-out"
    }
  );

  anim.onfinish = () => {
    panel.style.display = "block";
    document.getElementById("estadoAnim27").textContent = "✔️ Animación completada";
  };
};
ID: 28 Depto: APIs del Navegador

🎥 MediaDevices / getUserMedia

📚 Nombre: MediaDevices / getUserMedia

🗂️ Clasificación: APIs del Navegador – Acceso a Cámara, Micrófono y Dispositivos Multimedia.

📰 Descripción breve: La API MediaDevices.getUserMedia() permite acceder a la cámara, micrófono y otros dispositivos multimedia del usuario directamente desde el navegador. Es esencial para videollamadas, grabación, análisis de imagen, apps educativas y experiencias interactivas.

⚙️ Dependencias: HTTPS obligatorio, permisos del usuario, navegador moderno.

💡 Características clave:
• Acceso a cámara y micrófono
• Flujo de vídeo en tiempo real
• Integración con Canvas, WebRTC y Web Animations
• Control de resolución, FPS y dispositivos
• Ideal para apps educativas y de salud

🌍 Otros datos de valor: Perfecta para módulos de reconocimiento visual, análisis de movimiento, videollamadas educativas y herramientas interactivas en SaludConNutricon.

🖥️ Recurso Operativo – Acceso a Cámara

🧪 Demo simple: muestra vídeo en tiempo real desde la cámara.

Pulsa el botón para activar la cámara.

📝 Código – Versión Simple


document.getElementById("btnIniciarSimple28").onclick = async () => {
  const video = document.getElementById("videoSimple28");
  const salida = document.getElementById("resultadoSimple28");

  try {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    video.srcObject = stream;
    salida.textContent = "🎉 Cámara activada.";
  } catch (err) {
    salida.textContent = "🚫 Error: " + err.message;
  }
};

📌 Código – Versión Avanzada


document.getElementById("btnIniciarAvanzado28").onclick = async () => {
  const video = document.getElementById("videoAvanzado28");
  const panel = document.getElementById("panelMedia28");

  try {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    video.srcObject = stream;
    panel.style.display = "block";
    document.getElementById("estadoMedia28").textContent = "Cámara lista";
  } catch (err) {
    panel.style.display = "block";
    document.getElementById("estadoMedia28").textContent = "Error: " + err.message;
  }
};

document.getElementById("btnCapturar28").onclick = () => {
  const video = document.getElementById("videoAvanzado28");
  const canvas = document.getElementById("canvas28");
  const ctx = canvas.getContext("2d");

  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  canvas.style.display = "block";

  document.getElementById("estadoMedia28").textContent = "📸 Fotograma capturado";
};
ID: 29 Depto: APIs del Navegador

🔔 Notifications API

📚 Nombre: Notifications API

🗂️ Clasificación: APIs del Navegador – Notificaciones, Interacción y Comunicación con el Usuario.

📰 Descripción breve: La Notifications API permite mostrar notificaciones nativas del sistema operativo directamente desde el navegador. Es fundamental para PWAs, recordatorios, alertas educativas, avisos de estado y comunicación directa con el usuario.

⚙️ Dependencias: Permiso del usuario, navegador moderno, HTTPS recomendado.

💡 Características clave:
• Notificaciones nativas del sistema
• Iconos, cuerpo de texto y acciones
• Integración con Service Workers
• Ideal para PWAs y apps educativas
• Soporte multiplataforma

🌍 Otros datos de valor: Perfecta para recordatorios nutricionales, avisos de salud pública, notificaciones de progreso y módulos interactivos en SaludConNutricon.

🖥️ Recurso Operativo – Notificaciones del Navegador

🧪 Demo simple: muestra una notificación básica.

Pulsa el botón para solicitar permiso y enviar una notificación.

📝 Código – Versión Simple


document.getElementById("btnNotificarSimple29").onclick = async () => {
  const salida = document.getElementById("resultadoSimple29");

  if (Notification.permission !== "granted") {
    await Notification.requestPermission();
  }

  if (Notification.permission === "granted") {
    new Notification("Hola 👋", {
      body: "Esta es una notificación simple."
    });
    salida.textContent = "🎉 Notificación enviada.";
  } else {
    salida.textContent = "🚫 Permiso denegado.";
  }
};

📌 Código – Versión Avanzada


document.getElementById("btnNotificarAvanzado29").onclick = async () => {
  const panel = document.getElementById("panelNotif29");

  if (Notification.permission !== "granted") {
    await Notification.requestPermission();
  }

  if (Notification.permission === "granted") {
    new Notification("Notificación avanzada", {
      body: "Incluye icono, cuerpo y acciones.",
      icon: "https://cdn-icons-png.flaticon.com/512/1827/1827370.png",
      actions: [
        { action: "ok", title: "Aceptar" },
        { action: "cancel", title: "Cancelar" }
      ]
    });

    panel.style.display = "block";
    document.getElementById("estadoNotif29").textContent = "✔️ Notificación avanzada enviada";
  } else {
    panel.style.display = "block";
    document.getElementById("estadoNotif29").textContent = "🚫 Permiso denegado";
  }
};
ID: 30 Depto: APIs del Navegador

📋 Clipboard API

📚 Nombre: Clipboard API

🗂️ Clasificación: APIs del Navegador – Portapapeles, Copiar, Pegar y Gestión de Datos.

📰 Descripción breve: La Clipboard API permite leer y escribir texto (y otros datos) en el portapapeles del sistema directamente desde el navegador. Es fundamental para herramientas educativas, formularios, apps de productividad y experiencias interactivas.

⚙️ Dependencias: HTTPS obligatorio, permisos del usuario, navegador moderno.

💡 Características clave:
• Copiar texto al portapapeles
• Pegar texto desde el portapapeles
• Lectura y escritura asíncrona
• Integración con formularios y editores
• Ideal para apps educativas y de productividad

🌍 Otros datos de valor: Perfecta para módulos de estudio, copiar resultados nutricionales, compartir datos sanitarios y mejorar la UX en SaludConNutricon.

🖥️ Recurso Operativo – Portapapeles del Navegador

🧪 Demo simple: copiar texto al portapapeles.

Escribe un texto y pulsa copiar.

📝 Código – Versión Simple


document.getElementById("btnCopiarSimple30").onclick = async () => {
  const texto = document.getElementById("textoSimple30").value.trim();
  const salida = document.getElementById("resultadoSimple30");

  try {
    await navigator.clipboard.writeText(texto);
    salida.textContent = "📋 Texto copiado.";
  } catch (err) {
    salida.textContent = "🚫 Error: " + err.message;
  }
};

📌 Código – Versión Avanzada


document.getElementById("btnCopiarAvanzado30").onclick = async () => {
  const texto = document.getElementById("textoAvanzado30").value;
  const panel = document.getElementById("panelClip30");

  try {
    await navigator.clipboard.writeText(texto);
    panel.style.display = "block";
    document.getElementById("estadoClip30").textContent = "✔️ Texto copiado";
  } catch (err) {
    panel.style.display = "block";
    document.getElementById("estadoClip30").textContent = "🚫 Error: " + err.message;
  }
};

document.getElementById("btnPegarAvanzado30").onclick = async () => {
  const panel = document.getElementById("panelClip30");

  try {
    const texto = await navigator.clipboard.readText();
    document.getElementById("textoAvanzado30").value = texto;

    panel.style.display = "block";
    document.getElementById("estadoClip30").textContent = "📥 Texto pegado";
  } catch (err) {
    panel.style.display = "block";
    document.getElementById("estadoClip30").textContent = "🚫 Error: " + err.message;
  }
};
ID: 31 Depto: APIs del Navegador

🗄️ IndexedDB API

📚 Nombre: IndexedDB API

🗂️ Clasificación: APIs del Navegador – Bases de Datos Locales, Almacenamiento Persistente y Datos Offline.

📰 Descripción breve: IndexedDB es una base de datos NoSQL integrada en el navegador que permite almacenar grandes cantidades de datos estructurados de forma persistente. Es esencial para aplicaciones offline, PWAs, dashboards, historiales y almacenamiento avanzado.

⚙️ Dependencias: Navegador moderno, permisos implícitos, entorno web.

💡 Características clave:
• Base de datos local persistente
• Almacenamiento de grandes volúmenes
• Consultas indexadas
• Ideal para PWAs y apps offline
• Soporte para objetos complejos

🌍 Otros datos de valor: Perfecta para almacenar datos nutricionales, historiales de salud, configuraciones de usuario y recursos educativos en SaludConNutricon.

🖥️ Recurso Operativo – Base de Datos Local

🧪 Demo simple: guardar un texto en IndexedDB.

Escribe un texto y pulsa guardar.

📝 Código – Versión Simple


let db31;

const req31 = indexedDB.open("DemoDB31", 1);

req31.onupgradeneeded = () => {
  db31 = req31.result;
  db31.createObjectStore("mensajes", { keyPath: "id", autoIncrement: true });
};

req31.onsuccess = () => {
  db31 = req31.result;
};

document.getElementById("btnGuardarSimple31").onclick = () => {
  const texto = document.getElementById("textoSimple31").value;
  const salida = document.getElementById("resultadoSimple31");

  const tx = db31.transaction("mensajes", "readwrite");
  tx.objectStore("mensajes").add({ texto });

  salida.textContent = "💾 Guardado en IndexedDB.";
};

📌 Código – Versión Avanzada


let dbAdv31;

const reqAdv31 = indexedDB.open("DemoDBAvanzada31", 1);

reqAdv31.onupgradeneeded = () => {
  dbAdv31 = reqAdv31.result;
  dbAdv31.createObjectStore("datos", { keyPath: "id", autoIncrement: true });
};

reqAdv31.onsuccess = () => {
  dbAdv31 = reqAdv31.result;
};

document.getElementById("btnGuardarAvanzado31").onclick = () => {
  const texto = document.getElementById("textoAvanzado31").value;
  const panel = document.getElementById("panelDB31");

  const tx = dbAdv31.transaction("datos", "readwrite");
  tx.objectStore("datos").add({ texto });

  panel.style.display = "block";
  document.getElementById("estadoDB31").textContent = "✔️ Dato guardado";
};

document.getElementById("btnLeerAvanzado31").onclick = () => {
  const panel = document.getElementById("panelDB31");

  const tx = dbAdv31.transaction("datos", "readonly");
  const req = tx.objectStore("datos").get(1);

  req.onsuccess = () => {
    panel.style.display = "block";
    document.getElementById("estadoDB31").textContent =
      req.result ? req.result.texto : "No hay datos";
  };
};
ID: 32 Depto: APIs del Navegador

📤 Web Share API

📚 Nombre: Web Share API

🗂️ Clasificación: APIs del Navegador – Compartición Nativa, Integración con el Sistema y UX Social.

📰 Descripción breve: La Web Share API permite compartir texto, enlaces, archivos e información directamente con las aplicaciones nativas del dispositivo (WhatsApp, Email, Notas, Telegram, etc.). Es fundamental para PWAs, apps educativas, herramientas colaborativas y experiencias móviles modernas.

⚙️ Dependencias: Navegador compatible, HTTPS obligatorio, interacción del usuario.

💡 Características clave:
• Compartir texto, URLs y archivos
• Integración con apps nativas del dispositivo
• Ideal para móviles y PWAs
• UX moderna y fluida
• Reemplaza copiar/pegar manual

🌍 Otros datos de valor: Perfecta para compartir recetas, datos nutricionales, informes de salud, enlaces educativos y recursos de SaludConNutricon.

🖥️ Recurso Operativo – Compartición Nativa

🧪 Demo simple: compartir un texto y un enlace.

Pulsa el botón para compartir contenido.

📝 Código – Versión Simple


document.getElementById("btnCompartirSimple32").onclick = async () => {
  const salida = document.getElementById("resultadoSimple32");

  if (!navigator.share) {
    salida.textContent = "🚫 Web Share API no soportada.";
    return;
  }

  try {
    await navigator.share({
      title: "SaludConNutricon",
      text: "Recurso educativo recomendado",
      url: "https://saludconnutricon.com"
    });

    salida.textContent = "📤 Contenido compartido.";
  } catch (err) {
    salida.textContent = "🚫 Error: " + err.message;
  }
};

📌 Código – Versión Avanzada


document.getElementById("btnCompartirAvanzado32").onclick = async () => {
  const texto = document.getElementById("textoAvanzado32").value;
  const archivo = document.getElementById("archivo32").files[0];
  const panel = document.getElementById("panelShare32");

  if (!navigator.share) {
    panel.style.display = "block";
    document.getElementById("estadoShare32").textContent = "🚫 Web Share API no soportada";
    return;
  }

  try {
    const data = {
      title: "Contenido avanzado",
      text: texto,
      url: "https://saludconnutricon.com"
    };

    if (archivo) {
      data.files = [archivo];
    }

    await navigator.share(data);

    panel.style.display = "block";
    document.getElementById("estadoShare32").textContent = "✔️ Contenido compartido";
  } catch (err) {
    panel.style.display = "block";
    document.getElementById("estadoShare32").textContent = "🚫 Error: " + err.message;
  }
};
ID: 33 Depto: APIs del Navegador

🔐 WebAuthn API

📚 Nombre: WebAuthn API (Web Authentication)

🗂️ Clasificación: APIs del Navegador – Autenticación Segura, Criptografía y Acceso Biométrico.

📰 Descripción breve: WebAuthn es el estándar moderno para autenticación sin contraseñas. Permite iniciar sesión usando **huella dactilar, reconocimiento facial, PIN del dispositivo, llaves de seguridad FIDO2, Windows Hello, Touch ID y más**. Es la base de la autenticación fuerte en la Web moderna.

⚙️ Dependencias: HTTPS obligatorio, navegador moderno, autenticador compatible (biometría o llave FIDO2).

💡 Características clave:
• Autenticación sin contraseñas (passwordless)
• Soporte para biometría (huella, rostro)
• Llaves de seguridad FIDO2
• Criptografía avanzada integrada
• Ideal para apps seguras y PWAs

🌍 Otros datos de valor: Fundamental para proteger datos de salud, cuentas educativas, perfiles de usuario y accesos sensibles en SaludConNutricon.

🖥️ Recurso Operativo – Autenticación WebAuthn

🧪 Demo simple: registrar una clave pública WebAuthn.

Pulsa el botón para registrar una clave WebAuthn.

📝 Código – Versión Simple


document.getElementById("btnRegistrarSimple33").onclick = async () => {
  const salida = document.getElementById("resultadoSimple33");

  try {
    const publicKey = {
      challenge: new Uint8Array([1,2,3,4]),
      rp: { name: "Demo WebAuthn" },
      user: {
        id: new Uint8Array([1,2,3,4]),
        name: "usuario@example.com",
        displayName: "Usuario Demo"
      },
      pubKeyCredParams: [{ type: "public-key", alg: -7 }]
    };

    await navigator.credentials.create({ publicKey });

    salida.textContent = "🔐 Clave registrada correctamente.";
  } catch (err) {
    salida.textContent = "🚫 Error: " + err.message;
  }
};

📌 Código – Versión Avanzada


document.getElementById("btnRegistrarAvanzado33").onclick = async () => {
  const panel = document.getElementById("panelAuth33");

  try {
    const publicKey = {
      challenge: new Uint8Array([5,6,7,8]),
      rp: { name: "Demo Avanzada WebAuthn" },
      user: {
        id: new Uint8Array([9,9,9,9]),
        name: "usuario@demo.com",
        displayName: "Usuario Avanzado"
      },
      pubKeyCredParams: [{ type: "public-key", alg: -7 }]
    };

    await navigator.credentials.create({ publicKey });

    panel.style.display = "block";
    document.getElementById("estadoAuth33").textContent = "✔️ Registro completado";
  } catch (err) {
    panel.style.display = "block";
    document.getElementById("estadoAuth33").textContent = "🚫 Error: " + err.message;
  }
};

document.getElementById("btnAutenticarAvanzado33").onclick = async () => {
  const panel = document.getElementById("panelAuth33");

  try {
    const publicKey = {
      challenge: new Uint8Array([1,1,1,1]),
      allowCredentials: [{
        type: "public-key",
        id: new Uint8Array([9,9,9,9])
      }]
    };

    await navigator.credentials.get({ publicKey });

    panel.style.display = "block";
    document.getElementById("estadoAuth33").textContent = "🔑 Autenticación correcta";
  } catch (err) {
    panel.style.display = "block";
    document.getElementById("estadoAuth33").textContent = "🚫 Error: " + err.message;
  }
};
ID: 34 Depto: APIs del Navegador

🌍 Intl API

📚 Nombre: Intl API (Internationalization API)

🗂️ Clasificación: APIs del Navegador – Internacionalización, Formateo de Fechas, Números y Monedas.

📰 Descripción breve: La Intl API proporciona herramientas nativas para formatear fechas, números, monedas, porcentajes, listas, unidades y textos según la configuración cultural del usuario. Es esencial para aplicaciones globales, accesibles y adaptadas a múltiples idiomas.

⚙️ Dependencias: Navegador moderno, soporte Unicode CLDR integrado.

💡 Características clave:
• Formateo de fechas y horas
• Formateo de números, monedas y porcentajes
• Comparación de cadenas (collation)
• Formateo de listas y unidades
• Soporte multilingüe automático

🌍 Otros datos de valor: Ideal para módulos educativos multilingües, informes nutricionales, dashboards sanitarios y contenido internacional en SaludConNutricon.

🖥️ Recurso Operativo – Formateo Internacional

🧪 Demo simple: formatear un número como moneda.

Introduce un número para formatearlo.

📝 Código – Versión Simple


document.getElementById("btnFormatearSimple34").onclick = () => {
  const valor = parseFloat(document.getElementById("numeroSimple34").value);
  const salida = document.getElementById("resultadoSimple34");

  if (isNaN(valor)) {
    salida.textContent = "🚫 Introduce un número válido.";
    return;
  }

  const formato = new Intl.NumberFormat("es-ES", {
    style: "currency",
    currency: "EUR"
  });

  salida.textContent = "💶 " + formato.format(valor);
};

📌 Código – Versión Avanzada


document.getElementById("btnFormatearAvanzado34").onclick = () => {
  const panel = document.getElementById("panelIntl34");

  // Fecha
  const fecha = new Intl.DateTimeFormat("es-ES", {
    dateStyle: "full"
  }).format(new Date());

  // Lista
  const lista = new Intl.ListFormat("es-ES", {
    style: "long",
    type: "conjunction"
  }).format(["Manzana", "Banana", "Naranja"]);

  // Unidad
  const unidad = new Intl.NumberFormat("es-ES", {
    style: "unit",
    unit: "kilometer-per-hour"
  }).format(90);

  document.getElementById("fecha34").textContent = fecha;
  document.getElementById("lista34").textContent = lista;
  document.getElementById("unidad34").textContent = unidad;

  panel.style.display = "block";
};
ID: 35 Depto: Visualización y Mapas

📊 Chart.js

📚 Nombre: Chart.js

🗂️ Clasificación: Librerías de Visualización – Gráficos, Estadísticas y Dashboards.

📰 Descripción breve: Chart.js es una de las librerías de visualización más populares y ligeras para la Web. Permite crear gráficos interactivos y responsivos con una sintaxis simple y un rendimiento excelente. Ideal para dashboards, análisis nutricional, salud pública y módulos educativos.

⚙️ Dependencias: Librería Chart.js, navegador moderno, elemento ``.

💡 Características clave:
• Gráficos de líneas, barras, tortas, radar, burbujas y más
• Animaciones fluidas
• Interactividad integrada
• Configuración flexible
• Ideal para dashboards y análisis visual

🌍 Otros datos de valor: Perfecta para representar datos nutricionales, tendencias de salud pública, comparativas alimentarias y visualizaciones educativas en SaludConNutricon.

🖥️ Recurso Operativo – Gráficos con Chart.js

🧪 Demo simple: gráfico de barras básico.

Pulsa el botón para generar el gráfico.

📝 Código – Versión Simple


// Requiere incluir Chart.js:
// 

document.getElementById("btnGenerarSimple35").onclick = () => {
  const ctx = document.getElementById("graficoSimple35").getContext("2d");

  new Chart(ctx, {
    type: "bar",
    data: {
      labels: ["Lun", "Mar", "Mié", "Jue", "Vie"],
      datasets: [{
        label: "Consumo (kcal)",
        data: [1800, 1950, 2000, 1750, 1900],
        backgroundColor: "#4a90e2"
      }]
    }
  });

  document.getElementById("resultadoSimple35").textContent =
    "📊 Gráfico generado correctamente.";
};

📌 Código – Versión Avanzada


document.getElementById("btnGenerarAvanzado35").onclick = () => {
  const ctx = document.getElementById("graficoAvanzado35").getContext("2d");
  const panel = document.getElementById("panelChart35");

  new Chart(ctx, {
    data: {
      labels: ["Proteínas", "Carbohidratos", "Grasas"],
      datasets: [
        {
          type: "bar",
          label: "Gramos",
          data: [60, 250, 70],
          backgroundColor: "#7ed321"
        },
        {
          type: "line",
          label: "Objetivo",
          data: [50, 230, 65],
          borderColor: "#e94e77",
          borderWidth: 2
        }
      ]
    }
  });

  panel.style.display = "block";
  document.getElementById("estadoChart35").textContent = "✔️ Gráfico avanzado generado";
};
ID: 36 Depto: Visualización y Mapas

📈 D3.js

📚 Nombre: D3.js (Data‑Driven Documents)

🗂️ Clasificación: Librerías de Visualización – Gráficos Avanzados, Manipulación del DOM y Datos.

📰 Descripción breve: D3.js es la librería de visualización más poderosa y flexible del ecosistema web. Permite crear gráficos totalmente personalizados, animaciones, mapas, dashboards interactivos y visualizaciones científicas de alta complejidad mediante la manipulación del DOM y SVG.

⚙️ Dependencias: Librería D3.js, navegador moderno, SVG/HTML/CSS.

💡 Características clave:
• Visualizaciones totalmente personalizables
• Manipulación directa del DOM y SVG
• Escalas, ejes, transiciones y layouts
• Mapas, gráficos científicos y animaciones
• Ideal para dashboards avanzados

🌍 Otros datos de valor: Perfecta para visualizaciones complejas de salud pública, epidemiología, nutrición avanzada, comparativas científicas y módulos educativos interactivos.

🖥️ Recurso Operativo – Visualización con D3.js

🧪 Demo simple: gráfico de barras básico con D3.

Pulsa el botón para generar el gráfico.

📝 Código – Versión Simple


// Requiere incluir D3.js:
// 

document.getElementById("btnGenerarSimple36").onclick = () => {
  const svg = d3.select("#svgSimple36");
  svg.selectAll("*").remove();

  const datos = [30, 80, 45, 60, 20, 90];

  svg.selectAll("rect")
    .data(datos)
    .enter()
    .append("rect")
    .attr("x", (d, i) => i * 50 + 20)
    .attr("y", d => 180 - d)
    .attr("width", 40)
    .attr("height", d => d)
    .attr("fill", "#4a90e2");

  document.getElementById("resultadoSimple36").textContent =
    "📊 Gráfico generado correctamente.";
};

📌 Código – Versión Avanzada


document.getElementById("btnGenerarAvanzado36").onclick = () => {
  const svg = d3.select("#svgAvanzado36");
  svg.selectAll("*").remove();

  const datos = [10, 30, 50, 40, 70, 90, 60];

  const x = d3.scaleLinear().domain([0, datos.length - 1]).range([20, 320]);
  const y = d3.scaleLinear().domain([0, 100]).range([180, 20]);

  const linea = d3.line()
    .x((d, i) => x(i))
    .y(d => y(d))
    .curve(d3.curveMonotoneX);

  svg.append("path")
    .datum(datos)
    .attr("fill", "none")
    .attr("stroke", "#e94e77")
    .attr("stroke-width", 3)
    .attr("d", linea)
    .attr("stroke-dasharray", "400")
    .attr("stroke-dashoffset", "400")
    .transition()
    .duration(1500)
    .attr("stroke-dashoffset", "0");

  document.getElementById("panelD336").style.display = "block";
  document.getElementById("estadoD336").textContent = "✔️ Gráfico avanzado generado";
};
ID: 37 Depto: Visualización y Mapas

🗺️ Leaflet.js

📚 Nombre: Leaflet.js

🗂️ Clasificación: Librerías de Visualización – Mapas Interactivos, Geolocalización y Cartografía Web.

📰 Descripción breve: Leaflet.js es la librería de mapas interactivos más ligera y popular del ecosistema web. Permite crear mapas dinámicos, marcadores, capas, controles y visualizaciones geográficas con excelente rendimiento y compatibilidad móvil.

⚙️ Dependencias: Librería Leaflet.js, navegador moderno, acceso a tiles (OpenStreetMap u otros).

💡 Características clave:
• Mapas interactivos y responsivos
• Marcadores, popups y capas
• Integración con OpenStreetMap
• Soporte para geolocalización
• Ideal para dashboards geográficos

🌍 Otros datos de valor: Perfecta para mapas nutricionales, zonas de salud pública, rutas educativas, análisis geográficos y módulos interactivos en SaludConNutricon.

🖥️ Recurso Operativo – Mapas Interactivos con Leaflet.js

🧪 Demo simple: mapa básico centrado en España.

Pulsa el botón para cargar el mapa.

📝 Código – Versión Simple


// Requiere incluir Leaflet.js:
// 
// 

document.getElementById("btnIniciarSimple37").onclick = () => {
  const mapa = L.map("mapaSimple37").setView([40.4168, -3.7038], 6);

  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    attribution: "© OpenStreetMap"
  }).addTo(mapa);

  document.getElementById("resultadoSimple37").textContent =
    "🗺️ Mapa cargado correctamente.";
};

📌 Código – Versión Avanzada


document.getElementById("btnIniciarAvanzado37").onclick = () => {
  const mapa = L.map("mapaAvanzado37").setView([43.2630, -2.9350], 7);
  const panel = document.getElementById("panelLeaflet37");

  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    attribution: "© OpenStreetMap"
  }).addTo(mapa);

  const marcador = L.marker([43.2630, -2.9350]).addTo(mapa);
  marcador.bindPopup("📍 Ubicación destacada en el mapa").openPopup();

  panel.style.display = "block";
  document.getElementById("estadoLeaflet37").textContent =
    "✔️ Mapa avanzado generado";
};
ID: 38 Depto: Datos y Epidemiología

🌐 WHO COVID‑19 Data API

📚 Nombre: WHO COVID‑19 Data API

🗂️ Clasificación: APIs de Datos – Epidemiología Global, COVID‑19, Casos y Mortalidad.

📰 Descripción breve: La WHO COVID‑19 Data API proporciona datos oficiales y actualizados sobre la pandemia de COVID‑19 a nivel global: casos, fallecimientos, incidencia y tendencias por país y región. Es una fuente de referencia para análisis epidemiológicos, dashboards y vigilancia en salud pública.

⚙️ Dependencias: Conexión a Internet, acceso HTTP/HTTPS al endpoint oficial de la OMS, manejo de JSON.

💡 Características clave:
• Datos globales y por país
• Casos, fallecimientos y tendencias
• Actualización periódica
• Formato JSON para integración directa
• Ideal para dashboards y análisis epidemiológico

🌍 Otros datos de valor: Fundamental para módulos de vigilancia epidemiológica, paneles de situación COVID‑19, análisis comparativos y educación sanitaria en SaludConNutricon.

🖥️ Recurso Operativo – Consulta de datos COVID‑19 (OMS)

🧪 Demo simple: obtener datos globales de COVID‑19.

Pulsa el botón para consultar los datos globales.

📝 Código – Versión Simple


document.getElementById("btnCargarSimple38").onclick = async () => {
  const salida = document.getElementById("resultadoSimple38");

  try {
    const res = await fetch("https://covid19.who.int/WHO-COVID-19-global-data.json");
    const datos = await res.json();

    const total = datos.length;
    salida.textContent = "📡 Registros globales recibidos: " + total;
  } catch (err) {
    salida.textContent = "🚫 Error: " + err.message;
  }
};

📌 Código – Versión Avanzada


document.getElementById("btnCargarAvanzado38").onclick = async () => {
  const pais = document.getElementById("paisAvanzado38").value.trim().toUpperCase();
  const panel = document.getElementById("panelWHO38");

  if (!pais) {
    panel.style.display = "block";
    document.getElementById("estadoWHO38").textContent = "⚠️ Introduce un código de país (ISO3)";
    return;
  }

  try {
    const res = await fetch("https://covid19.who.int/WHO-COVID-19-global-data.json");
    const datos = await res.json();

    const filtrado = datos.filter(d => d["Country_code"] === pais);
    const ultimo = filtrado[filtrado.length - 1];

    panel.style.display = "block";
    if (ultimo) {
      document.getElementById("estadoWHO38").textContent =
        pais + " – Casos acumulados: " + ultimo["Cumulative_cases"];
    } else {
      document.getElementById("estadoWHO38").textContent = "Sin datos para " + pais;
    }
  } catch (err) {
    panel.style.display = "block";
    document.getElementById("estadoWHO38").textContent = "🚫 Error: " + err.message;
  }
};
ID: 39 Depto: Datos y Epidemiología

🇪🇺 Eurostat API

📚 Nombre: Eurostat API

🗂️ Clasificación: APIs de Datos – Estadísticas Oficiales de Salud, Sociedad y Nutrición en la UE.

📰 Descripción breve: La Eurostat API ofrece acceso programático a las estadísticas oficiales de la Unión Europea: salud, demografía, nutrición, economía, sociedad y más. Es una fuente clave para análisis comparativos entre países, estudios de salud pública y visualizaciones de indicadores europeos.

⚙️ Dependencias: Conexión a Internet, acceso HTTP/HTTPS a Eurostat, manejo de JSON/TSV.

💡 Características clave:
• Indicadores de salud y nutrición
• Datos por país, región y año
• Series temporales y comparativas
• Formatos JSON y TSV
• Ideal para dashboards y estudios europeos

🌍 Otros datos de valor: Fundamental para paneles de indicadores de salud, comparativas nutricionales, estudios de desigualdad y análisis de políticas públicas en SaludConNutricon.

🖥️ Recurso Operativo – Indicadores Eurostat

🧪 Demo simple: obtener metadatos de un dataset.

Pulsa el botón para consultar un dataset de ejemplo.

📝 Código – Versión Simple


document.getElementById("btnCargarSimple39").onclick = async () => {
  const salida = document.getElementById("resultadoSimple39");

  try {
    const res = await fetch(
      "https://ec.europa.eu/eurostat/api/discoveries/tgm/table.do?table=hlth_silc_01&time=2020"
    );
    // En un entorno real se usaría la API JSON oficial; aquí se ilustra la llamada.
    salida.textContent = "📊 Petición enviada a Eurostat (ejemplo).";
  } catch (err) {
    salida.textContent = "🚫 Error: " + err.message;
  }
};

📌 Código – Versión Avanzada


document.getElementById("btnCargarAvanzado39").onclick = async () => {
  const pais = document.getElementById("paisAvanzado39").value.trim().toUpperCase();
  const panel = document.getElementById("panelEuro39");

  if (!pais) {
    panel.style.display = "block";
    document.getElementById("estadoEuro39").textContent = "⚠️ Introduce un código de país (ISO2)";
    return;
  }

  try {
    // Ejemplo ilustrativo de endpoint JSON de Eurostat:
    const url =
      "https://ec.europa.eu/eurostat/api/discoveries/tgm/table.do?table=hlth_silc_01&geo=" + pais;

    const res = await fetch(url);
    panel.style.display = "block";
    document.getElementById("estadoEuro39").textContent =
      "📊 Petición enviada para " + pais + " (ejemplo).";
  } catch (err) {
    panel.style.display = "block";
    document.getElementById("estadoEuro39").textContent = "🚫 Error: " + err.message;
  }
};
ID: 40 Depto: Datos y Epidemiología

🧬 ECDC API

📚 Nombre: ECDC API (European Centre for Disease Prevention and Control)

🗂️ Clasificación: APIs de Datos – Epidemiología Europea, Enfermedades Infecciosas y Mortalidad.

📰 Descripción breve: La ECDC API proporciona datos epidemiológicos europeos sobre enfermedades transmisibles, casos, mortalidad, brotes y vigilancia. Es clave para el seguimiento de enfermedades en la UE, análisis de riesgo y planificación de intervenciones de salud pública.

⚙️ Dependencias: Conexión a Internet, acceso HTTP/HTTPS a los endpoints del ECDC, manejo de JSON/CSV.

💡 Características clave:
• Datos por país y región europea
• Casos, incidencia y mortalidad
• Series temporales y vigilancia
• Formatos abiertos para análisis
• Ideal para dashboards epidemiológicos

🌍 Otros datos de valor: Fundamental para paneles de vigilancia, análisis de brotes, estudios comparativos entre países y educación en salud pública dentro de SaludConNutricon.

🖥️ Recurso Operativo – Datos Epidemiológicos ECDC

🧪 Demo simple: obtener un dataset epidemiológico.

Pulsa el botón para consultar datos de ejemplo.

📝 Código – Versión Simple


document.getElementById("btnCargarSimple40").onclick = async () => {
  const salida = document.getElementById("resultadoSimple40");

  try {
    // Ejemplo ilustrativo de acceso a datos ECDC (CSV/JSON público)
    const res = await fetch("https://opendata.ecdc.europa.eu/covid19/casedistribution/json/");
    const datos = await res.json();

    salida.textContent = "📡 Registros recibidos: " + datos.records.length;
  } catch (err) {
    salida.textContent = "🚫 Error: " + err.message;
  }
};

📌 Código – Versión Avanzada


document.getElementById("btnCargarAvanzado40").onclick = async () => {
  const pais = document.getElementById("paisAvanzado40").value.trim().toUpperCase();
  const panel = document.getElementById("panelECDC40");

  if (!pais) {
    panel.style.display = "block";
    document.getElementById("estadoECDC40").textContent = "⚠️ Introduce un código de país (ISO2)";
    return;
  }

  try {
    const res = await fetch("https://opendata.ecdc.europa.eu/covid19/casedistribution/json/");
    const datos = await res.json();

    const filtrado = datos.records.filter(d => d.geoId === pais);
    const ultimo = filtrado[0];

    panel.style.display = "block";
    if (ultimo) {
      document.getElementById("estadoECDC40").textContent =
        pais + " – Casos diarios: " + ultimo.cases + ", Muertes: " + ultimo.deaths;
    } else {
      document.getElementById("estadoECDC40").textContent = "Sin datos para " + pais;
    }
  } catch (err) {
    panel.style.display = "block";
    document.getElementById("estadoECDC40").textContent = "🚫 Error: " + err.message;
  }
};
ID: 41 Depto: Datos y Epidemiología

📊 Our World in Data API

📚 Nombre: Our World in Data (OWID) API

🗂️ Clasificación: APIs de Datos – Epidemiología Global, Salud Pública, Series Temporales.

📰 Descripción breve: La API de Our World in Data proporciona datos abiertos y actualizados sobre salud global, incluyendo COVID‑19, vacunación, mortalidad, demografía, nutrición y más. Es una de las fuentes más completas para análisis comparativos y dashboards globales.

⚙️ Dependencias: Conexión a Internet, acceso HTTP/HTTPS, manejo de JSON.

💡 Características clave:
• Datos globales y por país
• COVID‑19, vacunación, mortalidad, demografía
• Series temporales completas
• Formato JSON accesible directamente
• Ideal para dashboards y análisis comparativos

🌍 Otros datos de valor: Perfecta para paneles de salud pública, análisis de tendencias globales, comparativas entre países y módulos educativos en SaludConNutricon.

🖥️ Recurso Operativo – Datos OWID

🧪 Demo simple: obtener datos globales de COVID‑19.

Pulsa el botón para consultar los datos globales.

📝 Código – Versión Simple


document.getElementById("btnCargarSimple41").onclick = async () => {
  const salida = document.getElementById("resultadoSimple41");

  try {
    const res = await fetch("https://covid.ourworldindata.org/data/owid-covid-data.json");
    const datos = await res.json();

    const totalPaises = Object.keys(datos).length;
    salida.textContent = "📡 Países disponibles: " + totalPaises;
  } catch (err) {
    salida.textContent = "🚫 Error: " + err.message;
  }
};

📌 Código – Versión Avanzada


document.getElementById("btnCargarAvanzado41").onclick = async () => {
  const pais = document.getElementById("paisAvanzado41").value.trim().toUpperCase();
  const panel = document.getElementById("panelOWID41");

  if (!pais) {
    panel.style.display = "block";
    document.getElementById("estadoOWID41").textContent = "⚠️ Introduce un código de país (ISO3)";
    return;
  }

  try {
    const res = await fetch("https://covid.ourworldindata.org/data/owid-covid-data.json");
    const datos = await res.json();

    const info = datos[pais];

    panel.style.display = "block";
    if (info) {
      const ultimo = info.data[info.data.length - 1];
      document.getElementById("estadoOWID41").textContent =
        pais + " – Casos totales: " + ultimo.total_cases;
    } else {
      document.getElementById("estadoOWID41").textContent = "Sin datos para " + pais;
    }
  } catch (err) {
    panel.style.display = "block";
    document.getElementById("estadoOWID41").textContent = "🚫 Error: " + err.message;
  }
};

🧪 Laboratorio · Centros de Investigación · Aula de Estudio

Espacio en desarrollo para recursos educativos, experimentales y formativos dentro del ecosistema institucional AmigosWebAmigas.







Centro Educativo · Google Cloud Recurso Google Cloud · Always Free Laboratorio vivo · Editor · APIs · Formación institucional





Centro Educativo · Azure Recurso Azure · Always Free Módulos vivos · Laboratorio · IA · Servicios institucionales





Recurso en Fase Experimentación