Dentrix 1.* · Copilot 1.* · Cortana · Educación Digital Local

🟦 Navegador, Sistema Operativo y Futuro · Pequeña Obra Educativa en HTML

Este documento HTML está pensado como lo haría una profesora o un profesor que desea explicar, con calma y profundidad, cómo el navegador y el sistema operativo pueden colaborar para crear pequeñas aplicaciones locales: seguras, educativas y preparadas para el futuro. Aquí se muestran cuatro ejemplos prácticos, acompañados de narrativa, código y reflexión sobre el software, el hardware y los dispositivos que vienen.

Educación Digital Navegador Sistema Operativo Aplicaciones Locales Futuro Tecnológico

📘 Introducción · 10 usos en el navegador · 10 usos con el sistema operativo

🌐 10 usos reales en el navegador

El navegador moderno es mucho más que una ventana a páginas web: es un entorno de ejecución capaz de autocompletar formularios, guardar datos en local, crear mini‑extensiones internas, leer metadatos, controlar pestañas, detectar actividad del usuario, construir paneles internos, ejecutar cifrado con WebCrypto, gestionar permisos y crear recursos educativos interactivos.

Autocompletar Claves locales Mini‑extensiones WebCrypto Permisos

💡 Mirada pedagógica

Desde una perspectiva educativa, cada uno de estos usos puede convertirse en una lección: cómo se rellenan formularios de forma segura, cómo se guardan datos sin enviarlos al servidor, cómo se construyen pequeñas herramientas que ayudan al usuario, y cómo se enseña criptografía aplicada sin necesidad de grandes infraestructuras. El navegador se convierte en aula, laboratorio y cuaderno de prácticas.

💻 10 usos reales con el sistema operativo

Aunque el navegador no puede acceder directamente al sistema operativo sin permiso, existen APIs que permiten leer archivos locales, guardar documentos, crear mini‑aplicaciones HTML+JS+IndexedDB, ejecutar cifrado local, simular gestores de contraseñas, crear paneles de configuración, controlar notificaciones, generar recursos offline, sincronizar datos entre dispositivos y simular aplicaciones nativas mediante PWA.

File System Access IndexedDB Notificaciones Offline PWA

🔭 Futuro y dispositivos

El futuro traerá más dispositivos: móviles, tabletas, relojes, gafas, paneles domésticos, vehículos conectados. Todos ellos comparten una idea: un navegador o motor web capaz de ejecutar código local, interactuar con el sistema y respetar la privacidad. Pensar en estas APIs hoy es preparar la educación para ese futuro, donde el usuario aprende no solo a usar la tecnología, sino a comprenderla.

AmigosWebAmigas · Dentrix 1.* · Módulos Educativos

📚 Directorio Institucional de Fichas · EX‑001 a EX‑040

Panel central de navegación y clasificación temática de todos los módulos educativos incluidos en este documento. Cada ficha está identificada con un código institucional EX‑### y enlaza directamente con su sección correspondiente, integrando tecnología, formación, creatividad y arquitectura digital.

🌐 Navegador · Sistema Operativo · Base Local

EX‑001 · EX‑010

Módulos centrados en interacción con el navegador, sistema operativo, formularios, archivos, notificaciones, almacenamiento local y recursos básicos de educación digital.

EX‑001 Mini App Local · Texto cifrado

Ir a la ficha
EX‑002 Autocompletar educativo

Ir a la ficha
EX‑003 Lectura de archivos locales

Ir a la ficha
EX‑004 Notificaciones educativas

Ir a la ficha
EX‑005 IndexedDB educativa

Ir a la ficha
EX‑006 Service Worker offline

Ir a la ficha
EX‑007 Cifrado AES‑GCM

Ir a la ficha
EX‑008 PWA instalable

Ir a la ficha
EX‑009 Sensores básicos del dispositivo

Ir a la ficha
EX‑010 Panel de configuración local

Ir a la ficha

🧪 Hardware · Sensores · Dispositivos

EX‑011 · EX‑030

Módulos centrados en interacción con hardware real: cámara, micrófono, vibración, geolocalización, luz ambiental, magnetómetro, orientación 3D, Bluetooth, USB, HID, Gamepad y otros sensores avanzados.

EX‑011Reconocimiento de voz
Ir a la ficha
EX‑012Síntesis de voz
Ir a la ficha
EX‑013Cámara educativa
Ir a la ficha
EX‑014Canvas educativo
Ir a la ficha
EX‑015Cronómetro educativo
Ir a la ficha
EX‑016Vibración del dispositivo
Ir a la ficha
EX‑017Clipboard API
Ir a la ficha
EX‑018Geolocalización
Ir a la ficha
EX‑019Web Animations
Ir a la ficha
EX‑020Gramáticas de voz
Ir a la ficha
EX‑021WebGPU
Ir a la ficha
EX‑022WebXR VR
Ir a la ficha
EX‑023WebHID
Ir a la ficha
EX‑024WebUSB
Ir a la ficha
EX‑025WebBluetooth
Ir a la ficha
EX‑026Gamepad API
Ir a la ficha
EX‑027Magnetómetro
Ir a la ficha
EX‑028Orientación 3D
Ir a la ficha
EX‑029Luz ambiental
Ir a la ficha
EX‑030Wake Lock API
Ir a la ficha

🧠 APIs Modernas · Interacción Avanzada

EX‑031 · EX‑040

Módulos centrados en APIs avanzadas del navegador: WebSockets, Intersection Observer, Resize Observer, Page Visibility, Fullscreen, Pointer Lock, Storage Manager, Web Share, EyeDropper, voces de síntesis y otros recursos de interacción moderna.

EX‑031Web Share API
Ir a la ficha
EX‑032Page Visibility API
Ir a la ficha
EX‑033Fullscreen API
Ir a la ficha
EX‑034Pointer Lock API
Ir a la ficha
EX‑035Storage Manager
Ir a la ficha
EX‑036WebSockets
Ir a la ficha
EX‑037Intersection Observer
Ir a la ficha
EX‑038Resize Observer
Ir a la ficha
EX‑039EyeDropper API
Ir a la ficha
EX‑040Voces de síntesis avanzadas
Ir a la ficha

🔐 Ejemplo 1 · Mini App Local – Texto cifrado y exportación de archivo

Este primer ejemplo es una pequeña aplicación local que guarda un texto cifrado en el navegador y permite exportarlo como archivo al sistema operativo. Es una demostración sencilla, pero poderosa: muestra lectura de datos, escritura local, cifrado básico y uso de la File System Access API. Es ideal para explicar a estudiantes cómo el navegador puede convertirse en un cuaderno cifrado personal.

🔐 Mini App Local – Demo interactiva

Introduce un texto para guardarlo cifrado en tu navegador y, si quieres, exportarlo como archivo.

<script>
async function demo1Save() {
    const text = document.getElementById("demo1-text").value;
    const encoded = btoa(text); // cifrado básico (demo)
    localStorage.setItem("demoData", encoded);
    document.getElementById("demo1-output").innerText =
        "Dato cifrado guardado en localStorage:\\n" + encoded;
}

async function demo1Export() {
    const data = localStorage.getItem("demoData") || "";
    if (!data) {
        alert("No hay datos guardados todavía.");
        return;
    }
    const handle = await window.showSaveFilePicker({
        suggestedName: "demo.txt",
        types: [{ description: "Texto", accept: { "text/plain": [".txt"] } }]
    });
    const writable = await handle.createWritable();
    await writable.write(data);
    await writable.close();
    alert("Archivo guardado correctamente.");
}
</script>
        

Explicación pedagógica:
• btoa() se utiliza aquí como cifrado básico, para ilustrar la idea de transformar un texto.
• localStorage guarda el dato en el navegador, sin enviarlo al servidor.
• showSaveFilePicker() pide permiso al usuario para crear un archivo en su sistema.
• El estudiante puede ver cómo el navegador dialoga con el sistema operativo de forma controlada y segura.

📝 Ejemplo 2 · Autocompletar formularios · Navegador como asistente educativo

El segundo ejemplo muestra cómo el navegador puede ayudar a rellenar formularios de manera segura y educativa. En lugar de capturar contraseñas, este ejemplo se centra en datos académicos: nombre, curso y asignatura. La idea es enseñar que el autocompletado puede ser una herramienta de apoyo, no un riesgo, si se usa con responsabilidad y transparencia.

📝 Formulario educativo

Rellena el formulario una vez y deja que el navegador recuerde tus datos para futuras sesiones.

<script>
function demo2Save() {
    const data = {
        name: document.getElementById("demo2-name").value,
        course: document.getElementById("demo2-course").value,
        subject: document.getElementById("demo2-subject").value
    };
    localStorage.setItem("demoFormEdu", JSON.stringify(data));
    document.getElementById("demo2-output").innerText =
        "Datos educativos guardados en localStorage.";
}

function demo2Fill() {
    const raw = localStorage.getItem("demoFormEdu");
    if (!raw) {
        alert("No hay datos guardados todavía.");
        return;
    }
    const data = JSON.parse(raw);
    document.getElementById("demo2-name").value = data.name || "";
    document.getElementById("demo2-course").value = data.course || "";
    document.getElementById("demo2-subject").value = data.subject || "";
    document.getElementById("demo2-output").innerText =
        "Formulario autocompletado desde datos locales.";
}
</script>
        

Explicación pedagógica:
• Se guarda un pequeño objeto JSON con datos educativos en localStorage.
• El botón “Autocompletar” muestra cómo el navegador puede rellenar campos sin pedir nada al servidor.
• El ejemplo permite hablar de privacidad: qué datos se deben guardar, cuáles no, y por qué.
• Es una base para enseñar buenas prácticas de diseño de formularios y de experiencia de usuario.

📂 Ejemplo 3 · Lectura de archivos locales · Diálogo entre navegador y sistema operativo

El tercer ejemplo ilustra cómo el navegador puede leer archivos locales con permiso explícito del usuario. Es una oportunidad excelente para explicar que el sistema operativo no está “abierto” al navegador, sino que se establece un diálogo controlado: el usuario elige el archivo, el navegador lo lee y lo muestra, sin enviar nada a servidores externos. Ideal para trabajar con textos, diarios, pequeños proyectos o materiales educativos.

📂 Lector de archivos de texto

Selecciona un archivo de texto de tu sistema y el navegador mostrará su contenido aquí.

<script>
async function demo3Open() {
    try {
        const [handle] = await window.showOpenFilePicker({
            types: [{ description: "Texto", accept: { "text/plain": [".txt"] } }]
        });
        const file = await handle.getFile();
        const content = await file.text();
        document.getElementById("demo3-output").innerText =
            "Contenido del archivo:\\n\\n" + content;
    } catch (e) {
        console.log("Operación cancelada o no soportada:", e);
    }
}
</script>
        

Explicación pedagógica:
• showOpenFilePicker() pide al usuario que seleccione un archivo concreto.
• El navegador no puede explorar todo el sistema: solo accede al archivo elegido.
• file.text() permite leer el contenido y mostrarlo en pantalla.
• Este ejemplo abre la puerta a proyectos de lectura, anotación y reflexión sobre documentos locales.

🔔 Ejemplo 4 · Notificaciones del sistema · Recordatorios educativos

El cuarto ejemplo muestra cómo el navegador puede enviar notificaciones al sistema, siempre con permiso del usuario. Esto permite crear recordatorios educativos: “hora de estudiar”, “descanso saludable”, “revisión de contraseñas”, etc. Es una forma de conectar la experiencia web con la vida cotidiana del estudiante, sin invadir su privacidad.

🔔 Notificación educativa

Solicita permiso y envía una notificación que recuerde un hábito saludable de estudio.

<script>
function demo4Request() {
    if (!("Notification" in window)) {
        document.getElementById("demo4-output").innerText =
            "Las notificaciones no están soportadas en este navegador.";
        return;
    }
    Notification.requestPermission().then(result => {
        document.getElementById("demo4-output").innerText =
            "Estado de permiso: " + result;
    });
}

function demo4Notify() {
    if (Notification.permission !== "granted") {
        alert("Primero debes conceder permiso de notificación.");
        return;
    }
    new Notification("Recordatorio educativo", {
        body: "Tómate 5 minutos para repasar lo aprendido hoy.",
        icon: "https://via.placeholder.com/64"
    });
}
</script>
        

Explicación pedagógica:
• Notification.requestPermission() muestra que el usuario decide si quiere recibir avisos.
• Las notificaciones pueden usarse para hábitos saludables, no solo para publicidad.
• Este ejemplo permite hablar de ética digital: cuándo es apropiado notificar y cuándo no.
• Es una puerta a proyectos de acompañamiento educativo desde el navegador.

🎓 Cierre · HTML como obra educativa · Software, hardware y futuro

Este HTML no es solo código: es una pequeña obra educativa que muestra cómo el navegador y el sistema operativo pueden colaborar para crear experiencias locales, seguras y significativas. Los cuatro ejemplos —texto cifrado y archivo, autocompletado educativo, lectura de archivos locales y notificaciones— son semillas de proyectos mayores: gestores de aprendizaje, cuadernos digitales, laboratorios de criptografía, paneles de bienestar y aplicaciones que respetan la privacidad.

Pensar en estos ejemplos hoy es preparar el terreno para los dispositivos del mañana: ordenadores, móviles, tabletas, relojes, gafas, hogares inteligentes y vehículos conectados. Todos ellos necesitarán usuarios que comprendan la tecnología, no solo que la consuman. Este HTML quiere ser, modestamente, una pieza de ese camino: clara, narrativa, creativa y profundamente respetuosa con la información.

🗄️ Ejemplo 5 · IndexedDB · Base de datos educativa local

IndexedDB es la base de datos interna del navegador. Permite guardar información estructurada sin servidor. En educación, puede almacenar notas, progresos, ejercicios, diarios o proyectos. Aquí se muestra cómo crear una pequeña base de datos local para guardar “conceptos aprendidos”.

🗄️ Base de datos educativa · IndexedDB

Introduce un concepto aprendido hoy y guárdalo en la base de datos local.

<script>
let db5;
const request5 = indexedDB.open("EduDB", 1);

request5.onupgradeneeded = event => {
    db5 = event.target.result;
    db5.createObjectStore("concepts", { keyPath: "id", autoIncrement: true });
};

request5.onsuccess = event => {
    db5 = event.target.result;
};

function demo5Save() {
    const tx = db5.transaction("concepts", "readwrite");
    const store = tx.objectStore("concepts");
    const concept = document.getElementById("demo5-concept").value;
    store.add({ text: concept });
    document.getElementById("demo5-output").innerText =
        "Concepto guardado en IndexedDB.";
}

function demo5List() {
    const tx = db5.transaction("concepts", "readonly");
    const store = tx.objectStore("concepts");
    const req = store.getAll();
    req.onsuccess = () => {
        document.getElementById("demo5-output").innerText =
            JSON.stringify(req.result, null, 2);
    };
}
</script>
    

Explicación pedagógica:
• IndexedDB permite guardar datos complejos sin servidor.
• Es ideal para cuadernos digitales, diarios de aprendizaje y proyectos.
• Enseña a estudiantes cómo funciona una base de datos real dentro del navegador.
• Refuerza la idea de privacidad: los datos no salen del dispositivo.

📡 Ejemplo 6 · Service Worker · Modo offline educativo

Un Service Worker permite que una aplicación funcione sin conexión. En educación, esto significa que un estudiante puede seguir aprendiendo incluso sin Internet. Este ejemplo registra un Service Worker que almacena en caché este documento para poder abrirlo offline.

📡 Activar modo offline

Registra un Service Worker para que este documento funcione sin conexión.

<script>
function demo6Register() {
    if ("serviceWorker" in navigator) {
        navigator.serviceWorker.register("sw-demo.js")
            .then(() => {
                document.getElementById("demo6-output").innerText =
                    "Service Worker registrado. Este documento funcionará offline.";
            })
            .catch(err => {
                document.getElementById("demo6-output").innerText =
                    "Error al registrar Service Worker: " + err;
            });
    } else {
        document.getElementById("demo6-output").innerText =
            "Service Worker no soportado en este navegador.";
    }
}
</script>
    

Explicación pedagógica:
• Un Service Worker convierte un documento en recurso offline.
• Ideal para zonas con mala conexión o estudiantes en movilidad.
• Enseña cómo funciona la caché del navegador y la arquitectura PWA.
• Prepara a los estudiantes para el futuro de las aplicaciones híbridas.

🛡️ Ejemplo 7 · WebCrypto · Cifrado AES‑GCM real

Este ejemplo muestra cifrado real con AES‑GCM usando WebCrypto. Es una oportunidad educativa para enseñar criptografía aplicada: cómo se genera una clave, cómo se cifra un texto y cómo se descifra. Todo ocurre en el navegador, sin servidor.

🛡️ Cifrado AES‑GCM

Introduce un texto y observa cómo se cifra y descifra con WebCrypto.

<script>
let aesKey, aesCipher;

async function demo7Encrypt() {
    const text = document.getElementById("demo7-text").value;
    const enc = new TextEncoder().encode(text);

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

    const iv = crypto.getRandomValues(new Uint8Array(12));
    aesCipher = await crypto.subtle.encrypt(
        { name: "AES-GCM", iv },
        aesKey,
        enc
    );

    document.getElementById("demo7-output").innerText =
        "Texto cifrado (AES‑GCM):\n" + btoa(String.fromCharCode(...new Uint8Array(aesCipher)));
}

async function demo7Decrypt() {
    if (!aesCipher || !aesKey) {
        alert("Primero debes cifrar un texto.");
        return;
    }

    const iv = new Uint8Array(12); // mismo IV usado arriba
    const decrypted = await crypto.subtle.decrypt(
        { name: "AES-GCM", iv },
        aesKey,
        aesCipher
    );

    const text = new TextDecoder().decode(decrypted);
    document.getElementById("demo7-output").innerText =
        "Texto descifrado:\n" + text;
}
</script>
    

Explicación pedagógica:
• AES‑GCM es un estándar moderno de cifrado seguro.
• WebCrypto permite enseñar criptografía sin instalar software.
• El estudiante ve el ciclo completo: texto → cifrado → descifrado.
• Es una base para proyectos de seguridad, privacidad y ética digital.

📱 Ejemplo 8 · PWA · Convertir este documento en una aplicación instalable

Una PWA (Aplicación Web Progresiva) permite instalar una página web como si fuera una aplicación nativa. En educación, esto abre la puerta a cuadernos digitales, paneles de estudio, diarios, gestores de claves locales y recursos que funcionan sin conexión. Este ejemplo muestra cómo activar el evento beforeinstallprompt y permitir que el usuario instale esta obra educativa en su dispositivo.

📱 Instalar como aplicación

Si tu navegador lo permite, podrás instalar este documento como una aplicación.

<script>
let deferredPrompt;

window.addEventListener("beforeinstallprompt", (e) => {
    e.preventDefault();
    deferredPrompt = e;
    document.getElementById("demo8-output").innerText =
        "Aplicación lista para instalar.";
});

function demo8Install() {
    if (!deferredPrompt) {
        document.getElementById("demo8-output").innerText =
            "El navegador aún no permite instalar esta aplicación.";
        return;
    }
    deferredPrompt.prompt();
    deferredPrompt.userChoice.then(choice => {
        document.getElementById("demo8-output").innerText =
            "Resultado de instalación: " + choice.outcome;
        deferredPrompt = null;
    });
}
</script>
    

Explicación pedagógica:
• Una PWA convierte un documento educativo en una aplicación instalable.
• Ideal para estudiantes que desean acceso rápido y offline.
• Enseña cómo el navegador puede comportarse como un sistema operativo ligero.
• Prepara para el futuro de las aplicaciones híbridas en móviles, tabletas y ordenadores.

📡 Ejemplo 9 · Sensores del dispositivo · Acelerómetro y orientación

Los navegadores modernos pueden acceder a sensores del dispositivo, como acelerómetro, giroscopio y orientación, siempre con permiso del usuario. En educación, esto permite crear actividades físicas, experimentos científicos, juegos interactivos y proyectos STEAM. Este ejemplo muestra cómo leer la orientación del dispositivo.

📡 Sensor de orientación

Mueve tu dispositivo y observa cómo cambia la lectura del sensor.

<script>
function demo9Start() {
    if (!("DeviceOrientationEvent" in window)) {
        document.getElementById("demo9-output").innerText =
            "El sensor de orientación no está disponible.";
        return;
    }

    window.addEventListener("deviceorientation", (event) => {
        const alpha = event.alpha; // rotación alrededor del eje Z
        const beta = event.beta;   // inclinación adelante/atrás
        const gamma = event.gamma; // inclinación izquierda/derecha

        document.getElementById("demo9-output").innerText =
            "Orientación del dispositivo:\n" +
            "Alpha (Z): " + alpha + "\n" +
            "Beta (X): " + beta + "\n" +
            "Gamma (Y): " + gamma;
    });
}
</script>
    

Explicación pedagógica:
• Los sensores permiten crear actividades físicas y científicas.
• El estudiante ve cómo el hardware dialoga con el navegador.
• Ideal para proyectos STEAM: física, movimiento, robótica, realidad aumentada.
• Refuerza la idea de que el navegador es un puente entre software y hardware.

⚙️ Ejemplo 10 · Panel de configuración local · Preferencias del usuario

Este ejemplo muestra cómo crear un panel de configuración local que guarda preferencias del usuario: tema claro/oscuro, tamaño de texto y modo de estudio. Es una demostración de cómo el navegador puede convertirse en un entorno personalizable sin servidor, ideal para plataformas educativas.

⚙️ Panel de configuración

Tamaño de texto: Modo de estudio:

<script>
function demo10Save() {
    const prefs = {
        size: document.getElementById("demo10-size").value,
        mode: document.getElementById("demo10-mode").value
    };
    localStorage.setItem("demoPrefs", JSON.stringify(prefs));
    document.getElementById("demo10-output").innerText =
        "Preferencias guardadas.";
}

function demo10Apply() {
    const raw = localStorage.getItem("demoPrefs");
    if (!raw) {
        alert("No hay preferencias guardadas.");
        return;
    }
    const prefs = JSON.parse(raw);

    if (prefs.size) {
        document.body.style.fontSize = prefs.size + "px";
    }

    document.getElementById("demo10-output").innerText =
        "Preferencias aplicadas.\nModo de estudio: " + prefs.mode;
}
</script>
    

Explicación pedagógica:
• El panel de configuración enseña personalización y accesibilidad.
• El estudiante aprende que puede adaptar su entorno de estudio.
• Refuerza la idea de autonomía digital y bienestar educativo.
• Es una base para plataformas educativas locales y privadas.

🎤 Ejemplo 11 · Reconocimiento de voz · Dictado educativo

El reconocimiento de voz permite que el navegador escuche y transcriba palabras. En educación, esto abre puertas a actividades de dictado, lectura, pronunciación, accesibilidad y creatividad. Este ejemplo convierte la voz del estudiante en texto.

🎤 Dictado educativo

Pulsa el botón y habla. El navegador transcribirá tu voz.

<script>
let rec11;

function demo11Start() {
    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
    if (!SpeechRecognition) {
        document.getElementById("demo11-output").innerText =
            "El reconocimiento de voz no está disponible.";
        return;
    }

    rec11 = new SpeechRecognition();
    rec11.lang = "es-ES";
    rec11.interimResults = false;

    rec11.onresult = (event) => {
        const text = event.results[0][0].transcript;
        document.getElementById("demo11-output").innerText =
            "Transcripción:\n" + text;
    };

    rec11.start();
}
</script>
    

Explicación pedagógica:
• El navegador escucha y transcribe la voz del estudiante.
• Ideal para actividades de lectura, idiomas y accesibilidad.
• Enseña cómo el software interpreta señales del hardware (micrófono).
• Refuerza la creatividad y la expresión oral.

🔊 Ejemplo 12 · Síntesis de voz · El navegador habla

La síntesis de voz permite que el navegador lea textos en voz alta. Es una herramienta educativa poderosa para accesibilidad, lectura guiada, idiomas y acompañamiento. Este ejemplo convierte texto en voz.

🔊 Lectura en voz alta

<script>
function demo12Speak() {
    const text = document.getElementById("demo12-text").value;
    const utter = new SpeechSynthesisUtterance(text);
    utter.lang = "es-ES";
    speechSynthesis.speak(utter);
    document.getElementById("demo12-output").innerText =
        "Leyendo texto en voz alta...";
}
</script>
    

Explicación pedagógica:
• El navegador se convierte en lector asistido.
• Ideal para estudiantes con dificultades de lectura.
• Útil para idiomas, pronunciación y comprensión auditiva.
• Muestra cómo el software genera voz sintética.

📷 Ejemplo 13 · Cámara del dispositivo · Exploración visual educativa

El navegador puede acceder a la cámara del dispositivo con permiso del usuario. Esto permite actividades de ciencia, arte, observación, documentación y creatividad. Este ejemplo muestra la cámara en directo.

📷 Cámara educativa

<script>
async function demo13Start() {
    try {
        const stream = await navigator.mediaDevices.getUserMedia({ video: true });
        document.getElementById("demo13-video").srcObject = stream;
        document.getElementById("demo13-output").innerText =
            "Cámara activada.";
    } catch (e) {
        document.getElementById("demo13-output").innerText =
            "No se pudo acceder a la cámara.";
    }
}
</script>
    

Explicación pedagógica:
• El navegador muestra la cámara en tiempo real.
• Ideal para proyectos de ciencia, arte y documentación.
• Enseña cómo el hardware se integra con el software educativo.
• Refuerza la importancia del permiso y la privacidad.

🎨 Ejemplo 14 · Canvas API · Dibujo educativo interactivo

Canvas API permite dibujar en un lienzo digital. En educación, esto es útil para matemáticas, arte, geometría, diagramas, creatividad y expresión visual. Este ejemplo permite dibujar con el ratón.

🎨 Lienzo educativo

<script>
const canvas14 = document.getElementById("demo14-canvas");
const ctx14 = canvas14.getContext("2d");
let drawing14 = false;

canvas14.addEventListener("mousedown", () => drawing14 = true);
canvas14.addEventListener("mouseup", () => drawing14 = false);
canvas14.addEventListener("mousemove", (e) => {
    if (!drawing14) return;
    ctx14.fillStyle = "#2563eb";
    ctx14.fillRect(e.offsetX, e.offsetY, 4, 4);
});
</script>
    

Explicación pedagógica:
• Canvas permite dibujar, crear diagramas y visualizar ideas.
• Ideal para matemáticas, arte, geometría y creatividad.
• Enseña cómo el navegador puede ser un cuaderno digital.
• Refuerza la expresión visual y la exploración.

⏱️ Ejemplo 15 · Cronómetro educativo · Gestión del tiempo

La gestión del tiempo es fundamental en el estudio. Este ejemplo crea un cronómetro educativo que ayuda al estudiante a medir sesiones de concentración, descansos y hábitos saludables.

⏱️ Cronómetro educativo

00:00

<script>
let timer15, seconds15 = 0;

function demo15Start() {
    if (timer15) return;
    timer15 = setInterval(() => {
        seconds15++;
        const m = String(Math.floor(seconds15 / 60)).padStart(2, "0");
        const s = String(seconds15 % 60).padStart(2, "0");
        document.getElementById("demo15-output").innerText = m + ":" + s;
    }, 1000);
}

function demo15Stop() {
    clearInterval(timer15);
    timer15 = null;
}
</script>
    

Explicación pedagógica:
• El cronómetro ayuda a organizar sesiones de estudio.
• Enseña hábitos de concentración y descanso.
• Muestra cómo el navegador gestiona tiempo y eventos.
• Refuerza la autonomía del estudiante.

📳 Ejemplo 16 · Vibración del dispositivo · Feedback educativo

La Vibration API permite que el navegador genere una vibración en dispositivos compatibles. En educación, esto puede usarse como feedback táctil: avisos, recordatorios, señales de atención o respuestas a actividades interactivas. Este ejemplo vibra el dispositivo cuando el estudiante pulsa un botón.

📳 Vibración educativa

Pulsa el botón para generar una vibración breve.

<script>
function demo16Vibrate() {
    if (!("vibrate" in navigator)) {
        document.getElementById("demo16-output").innerText =
            "La vibración no está disponible en este dispositivo.";
        return;
    }
    navigator.vibrate(200);
    document.getElementById("demo16-output").innerText =
        "Vibración activada durante 200 ms.";
}
</script>
    

Explicación pedagógica:
• La vibración es un canal sensorial adicional.
• Útil para accesibilidad, avisos y actividades interactivas.
• Enseña cómo el navegador dialoga con hardware móvil.
• Refuerza la multimodalidad educativa.

📋 Ejemplo 17 · Clipboard API · Copiar y pegar seguro

La Clipboard API permite copiar y pegar texto de forma segura desde el navegador. En educación, esto es útil para ejercicios, fragmentos de código, notas y actividades guiadas. Este ejemplo copia texto al portapapeles y lo pega en un cuadro.

📋 Copiar y pegar educativo

<script>
async function demo17Copy() {
    const text = document.getElementById("demo17-text").value;
    try {
        await navigator.clipboard.writeText(text);
        alert("Texto copiado al portapapeles.");
    } catch (e) {
        alert("No se pudo copiar el texto.");
    }
}

async function demo17Paste() {
    try {
        const text = await navigator.clipboard.readText();
        document.getElementById("demo17-output").value = text;
    } catch (e) {
        alert("No se pudo pegar el texto.");
    }
}
</script>
    

Explicación pedagógica:
• Copiar/pegar es parte esencial del trabajo académico.
• La Clipboard API enseña seguridad y permisos.
• Útil para ejercicios de programación y escritura.
• Refuerza la autonomía del estudiante.

📍 Ejemplo 18 · Geolocalización · Ubicación educativa

La Geolocation API permite obtener la ubicación del usuario con permiso explícito. En educación, esto puede usarse para actividades de geografía, astronomía, movilidad, ciencias ambientales y proyectos de campo. Este ejemplo muestra latitud y longitud.

📍 Obtener ubicación

<script>
function demo18Locate() {
    if (!("geolocation" in navigator)) {
        document.getElementById("demo18-output").innerText =
            "La geolocalización no está disponible.";
        return;
    }

    navigator.geolocation.getCurrentPosition(
        pos => {
            const lat = pos.coords.latitude;
            const lon = pos.coords.longitude;
            document.getElementById("demo18-output").innerText =
                "Latitud: " + lat + "\\nLongitud: " + lon;
        },
        err => {
            document.getElementById("demo18-output").innerText =
                "No se pudo obtener la ubicación.";
        }
    );
}
</script>
    

Explicación pedagógica:
• La ubicación permite proyectos de geografía y ciencias.
• Enseña responsabilidad y privacidad digital.
• Refuerza la relación entre entorno físico y aprendizaje.
• Ideal para actividades de campo.

🎞️ Ejemplo 19 · Web Animations API · Animaciones educativas

La Web Animations API permite crear animaciones fluidas sin CSS adicional. En educación, esto es útil para explicar conceptos visuales, matemáticos, procesos, transformaciones y dinámicas. Este ejemplo anima un cuadrado.

🎞️ Animación educativa

<script>
function demo19Animate() {
    const box = document.getElementById("demo19-box");
    box.animate(
        [
            { transform: "translateX(0px)" },
            { transform: "translateX(200px)" },
            { transform: "translateX(0px)" }
        ],
        {
            duration: 2000,
            iterations: 1
        }
    );
    document.getElementById("demo19-output").innerText =
        "Animación ejecutada.";
}
</script>
    

Explicación pedagógica:
• Las animaciones ayudan a visualizar procesos.
• Útiles para matemáticas, física y diseño.
• Enseñan cómo el navegador interpreta tiempo y movimiento.
• Refuerzan la creatividad y la comprensión visual.

🗣️ Ejemplo 20 · Web Speech Grammar · Reconocimiento con gramática

Este ejemplo amplía el reconocimiento de voz usando gramáticas. Permite que el navegador reconozca palabras específicas, ideal para actividades educativas guiadas: colores, números, conceptos, comandos.

🗣️ Reconocimiento con gramática

Di uno de estos colores: rojo, azul, verde.

<script>
function demo20Start() {
    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
    const SpeechGrammarList = window.SpeechGrammarList || window.webkitSpeechGrammarList;

    if (!SpeechRecognition || !SpeechGrammarList) {
        document.getElementById("demo20-output").innerText =
            "Gramáticas de voz no disponibles.";
        return;
    }

    const colors = ["rojo", "azul", "verde"];
    const grammar = "#JSGF V1.0; grammar colors; public <color> = rojo | azul | verde ;";

    const recognition = new SpeechRecognition();
    const list = new SpeechGrammarList();
    list.addFromString(grammar, 1);

    recognition.grammars = list;
    recognition.lang = "es-ES";

    recognition.onresult = (event) => {
        const text = event.results[0][0].transcript;
        document.getElementById("demo20-output").innerText =
            "Reconocido: " + text;
    };

    recognition.start();
}
</script>
    

Explicación pedagógica:
• Las gramáticas permiten reconocimiento guiado.
• Útil para actividades de idiomas y conceptos básicos.
• Enseña cómo el navegador interpreta lenguaje humano.
• Refuerza la interacción natural y educativa.

📤 Ejemplo 21 · Web Share API · Compartir contenido educativo

La Web Share API permite compartir texto, enlaces o archivos directamente desde el navegador. En educación, esto facilita compartir apuntes, ejercicios, reflexiones o recursos entre estudiantes.

📤 Compartir contenido

<script>
async function demo21Share() {
    const text = document.getElementById("demo21-text").value;
    if (!navigator.share) {
        document.getElementById("demo21-output").innerText =
            "Web Share API no disponible.";
        return;
    }
    try {
        await navigator.share({ text });
        document.getElementById("demo21-output").innerText =
            "Contenido compartido correctamente.";
    } catch {
        document.getElementById("demo21-output").innerText =
            "No se pudo compartir.";
    }
}
</script>
    

Explicación pedagógica:
• Facilita compartir contenido educativo.
• Ideal para móviles y tabletas.
• Enseña interacción social digital responsable.
• Refuerza la colaboración entre estudiantes.

👁️ Ejemplo 22 · Page Visibility API · Detectar atención del estudiante

Esta API detecta si la página está visible o si el usuario ha cambiado de pestaña. En educación, permite crear recordatorios, pausas automáticas o análisis de atención.

👁️ Estado de visibilidad

Estado inicial: visible

<script>
document.addEventListener("visibilitychange", () => {
    const state = document.visibilityState;
    document.getElementById("demo22-output").innerText =
        "Estado actual: " + state;
});
</script>
    

Explicación pedagógica:
• Detecta si el estudiante está en la página.
• Útil para pausas automáticas en vídeos o actividades.
• Enseña cómo el navegador gestiona estados.
• Refuerza la atención consciente.

🖥️ Ejemplo 23 · Fullscreen API · Modo estudio inmersivo

La Fullscreen API permite que un elemento ocupe toda la pantalla. En educación, esto crea modos de concentración, lectura profunda o presentaciones.

🖥️ Activar modo pantalla completa

<script>
function demo23Full() {
    document.documentElement.requestFullscreen();
    document.getElementById("demo23-output").innerText =
        "Modo pantalla completa activado.";
}
function demo23Exit() {
    document.exitFullscreen();
    document.getElementById("demo23-output").innerText =
        "Modo pantalla completa desactivado.";
}
</script>
    

Explicación pedagógica:
• Crea un entorno de estudio sin distracciones.
• Útil para presentaciones y lectura profunda.
• Enseña control de interfaz y experiencia de usuario.
• Refuerza la concentración.

🖱️ Ejemplo 24 · Pointer Lock API · Control avanzado del ratón

Pointer Lock permite capturar el ratón y obtener movimiento relativo. En educación, esto sirve para simuladores, laboratorios de física o actividades 3D.

🖱️ Capturar ratón

<script>
function demo24Lock() {
    const el = document.body;
    el.requestPointerLock();
    document.getElementById("demo24-output").innerText =
        "Puntero bloqueado. Mueve el ratón.";
}

document.addEventListener("mousemove", (e) => {
    if (document.pointerLockElement === document.body) {
        document.getElementById("demo24-output").innerText =
            "Movimiento relativo: X=" + e.movementX + " Y=" + e.movementY;
    }
});
</script>
    

Explicación pedagógica:
• Permite simuladores y laboratorios interactivos.
• Enseña movimiento relativo y coordenadas.
• Útil para proyectos STEAM.
• Refuerza la exploración digital.

💾 Ejemplo 25 · Storage Manager · Cuánta memoria usa el navegador

El Storage Manager permite consultar cuánta memoria está usando el navegador. En educación, esto enseña gestión de recursos, eficiencia y responsabilidad digital.

💾 Consultar uso de memoria

<script>
async function demo25Check() {
    if (!navigator.storage || !navigator.storage.estimate) {
        document.getElementById("demo25-output").innerText =
            "Storage Manager no disponible.";
        return;
    }
    const est = await navigator.storage.estimate();
    document.getElementById("demo25-output").innerText =
        "Uso aproximado: " + est.usage + " bytes\n" +
        "Límite aproximado: " + est.quota + " bytes";
}
</script>
    

Explicación pedagógica:
• Enseña cómo el navegador gestiona memoria.
• Útil para proyectos de eficiencia y optimización.
• Refuerza la conciencia digital.
• Prepara para desarrollo web avanzado.

🧬 Ejemplo 26 · WebGPU · Renderizado educativo de próxima generación

WebGPU es la nueva API de gráficos del navegador, sucesora de WebGL. Permite cálculos paralelos y gráficos avanzados. En educación, abre la puerta a simulaciones científicas, visualización de datos y laboratorios digitales. Este ejemplo detecta si WebGPU está disponible.

🧬 Comprobar WebGPU

<script>
function demo26Check() {
    if (!navigator.gpu) {
        document.getElementById("demo26-output").innerText =
            "WebGPU no está disponible en este navegador.";
        return;
    }
    document.getElementById("demo26-output").innerText =
        "WebGPU disponible. Este navegador soporta gráficos de nueva generación.";
}
</script>
    

Explicación pedagógica:
• WebGPU es el futuro del renderizado web.
• Ideal para simulaciones científicas y visualización avanzada.
• Enseña cómo el navegador usa la GPU del dispositivo.
• Prepara para educación STEM de alto nivel.

🕶️ Ejemplo 27 · WebXR · Realidad virtual en el navegador

WebXR permite experiencias de realidad virtual y aumentada directamente desde el navegador. En educación, esto abre la puerta a laboratorios virtuales, exploración de planetas, anatomía 3D y simulaciones inmersivas. Este ejemplo detecta compatibilidad.

🕶️ Comprobar WebXR

<script>
async function demo27Check() {
    if (!navigator.xr) {
        document.getElementById("demo27-output").innerText =
            "WebXR no disponible en este navegador.";
        return;
    }
    try {
        const supported = await navigator.xr.isSessionSupported("immersive-vr");
        document.getElementById("demo27-output").innerText =
            supported
            ? "WebXR VR disponible. Este navegador soporta realidad virtual."
            : "WebXR disponible, pero VR no soportado.";
    } catch {
        document.getElementById("demo27-output").innerText =
            "No se pudo comprobar compatibilidad.";
    }
}
</script>
    

Explicación pedagógica:
• WebXR permite experiencias inmersivas educativas.
• Ideal para anatomía, astronomía y laboratorios virtuales.
• Enseña cómo el navegador interactúa con hardware VR.
• Prepara para el futuro de la educación inmersiva.

🎮 Ejemplo 28 · WebHID · Conectar dispositivos externos

WebHID permite conectar dispositivos externos como mandos, teclados especiales, sensores educativos, robots y hardware experimental. Este ejemplo detecta dispositivos HID.

🎮 Detectar dispositivos HID

<script>
async function demo28Request() {
    if (!navigator.hid) {
        document.getElementById("demo28-output").innerText =
            "WebHID no disponible.";
        return;
    }
    try {
        const devices = await navigator.hid.requestDevice({ filters: [] });
        document.getElementById("demo28-output").innerText =
            "Dispositivos detectados: " + devices.length;
    } catch {
        document.getElementById("demo28-output").innerText =
            "No se seleccionaron dispositivos.";
    }
}
</script>
    

Explicación pedagógica:
• WebHID conecta hardware educativo al navegador.
• Ideal para robótica, sensores y experimentos.
• Enseña interacción hardware‑software moderna.
• Refuerza proyectos STEM.

🔌 Ejemplo 29 · WebUSB · Conectar dispositivos USB

WebUSB permite conectar dispositivos USB directamente desde el navegador. En educación, esto habilita laboratorios electrónicos, placas de desarrollo, sensores ambientales y hardware experimental.

🔌 Solicitar dispositivo USB

<script>
async function demo29Request() {
    if (!navigator.usb) {
        document.getElementById("demo29-output").innerText =
            "WebUSB no disponible.";
        return;
    }
    try {
        const device = await navigator.usb.requestDevice({ filters: [] });
        document.getElementById("demo29-output").innerText =
            "Dispositivo USB seleccionado: " + device.productName;
    } catch {
        document.getElementById("demo29-output").innerText =
            "No se seleccionó ningún dispositivo.";
    }
}
</script>
    

Explicación pedagógica:
• WebUSB conecta hardware educativo real.
• Ideal para electrónica, sensores y placas.
• Enseña protocolos y comunicación digital.
• Refuerza aprendizaje práctico.

📡 Ejemplo 30 · WebBluetooth · Conectar dispositivos Bluetooth

WebBluetooth permite conectar dispositivos Bluetooth desde el navegador. En educación, esto habilita sensores biométricos, robots, dispositivos de medición y hardware experimental inalámbrico.

📡 Solicitar dispositivo Bluetooth

<script>
async function demo30Request() {
    if (!navigator.bluetooth) {
        document.getElementById("demo30-output").innerText =
            "WebBluetooth no disponible.";
        return;
    }
    try {
        const device = await navigator.bluetooth.requestDevice({
            acceptAllDevices: true
        });
        document.getElementById("demo30-output").innerText =
            "Dispositivo Bluetooth seleccionado: " + device.name;
    } catch {
        document.getElementById("demo30-output").innerText =
            "No se seleccionó ningún dispositivo.";
    }
}
</script>
    

Explicación pedagógica:
• WebBluetooth conecta hardware inalámbrico educativo.
• Ideal para robótica, sensores y mediciones.
• Enseña comunicación inalámbrica moderna.
• Refuerza proyectos STEM avanzados.

🔌 Ejemplo 31 · WebSockets · Comunicación educativa en tiempo real

WebSockets permiten comunicación bidireccional en tiempo real entre navegador y servidor. En educación, esto habilita pizarras compartidas, chats educativos, simulaciones colaborativas y actividades sincronizadas. Este ejemplo simula una conexión WebSocket local.

🔌 Simulación WebSocket

<script>
let ws31;

function demo31Connect() {
    ws31 = new WebSocket("wss://echo.websocket.org");
    ws31.onopen = () => {
        document.getElementById("demo31-output").innerText =
            "Conectado al servidor WebSocket.";
    };
    ws31.onmessage = (e) => {
        document.getElementById("demo31-output").innerText =
            "Mensaje recibido: " + e.data;
    };
}

function demo31Send() {
    if (!ws31 || ws31.readyState !== WebSocket.OPEN) {
        document.getElementById("demo31-output").innerText =
            "No hay conexión activa.";
        return;
    }
    ws31.send("Hola desde la aplicación educativa.");
}
</script>
    

Explicación pedagógica:
• Permite actividades colaborativas en tiempo real.
• Ideal para pizarras compartidas y simulaciones.
• Enseña comunicación bidireccional moderna.
• Refuerza el aprendizaje interactivo.

📐 Ejemplo 32 · Intersection Observer · Detección de elementos en pantalla

Intersection Observer detecta cuándo un elemento entra o sale de la pantalla. En educación, esto permite activar animaciones, mostrar explicaciones, registrar progreso de lectura y crear experiencias dinámicas.

📐 Observar elemento

Desplázate hacia abajo para activar el observador.

Elemento observado

<script>
const target32 = document.getElementById("demo32-target");
const obs32 = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        document.getElementById("demo32-output").innerText =
            entry.isIntersecting
            ? "El elemento está visible."
            : "El elemento está fuera de pantalla.";
    });
});
obs32.observe(target32);
</script>
    

Explicación pedagógica:
• Detecta visibilidad de elementos educativos.
• Ideal para activar explicaciones o animaciones.
• Enseña cómo el navegador observa el contenido.
• Refuerza la experiencia de lectura guiada.

📏 Ejemplo 33 · Resize Observer · Cambios de tamaño en elementos

Resize Observer detecta cambios en el tamaño de un elemento. En educación, esto permite adaptar contenido, ajustar paneles, crear interfaces responsivas y enseñar diseño adaptativo.

📏 Observar tamaño

<script>
const box33 = document.getElementById("demo33-box");
const obs33 = new ResizeObserver(entries => {
    for (const entry of entries) {
        const { width, height } = entry.contentRect;
        document.getElementById("demo33-output").innerText =
            "Tamaño actual: " + width + " x " + height;
    }
});
obs33.observe(box33);

function demo33Grow() {
    box33.style.width = (box33.offsetWidth + 30) + "px";
    box33.style.height = (box33.offsetHeight + 30) + "px";
}
</script>
    

Explicación pedagógica:
• Enseña diseño adaptativo y responsivo.
• Útil para interfaces educativas dinámicas.
• Muestra cómo el navegador detecta cambios visuales.
• Refuerza la comprensión de UX.

💡 Ejemplo 34 · Ambient Light Sensor · Luz ambiental educativa

El sensor de luz ambiental detecta la cantidad de luz en el entorno. En educación, esto permite adaptar el modo de lectura, cambiar colores, activar modo oscuro automático y enseñar interacción hardware‑software.

💡 Detectar luz ambiental

<script>
function demo34Start() {
    try {
        const sensor = new AmbientLightSensor();
        sensor.onreading = () => {
            document.getElementById("demo34-output").innerText =
                "Luz ambiental: " + sensor.illuminance + " lux";
        };
        sensor.start();
    } catch {
        document.getElementById("demo34-output").innerText =
            "Sensor de luz no disponible.";
    }
}
</script>
    

Explicación pedagógica:
• Permite adaptar la experiencia educativa al entorno.
• Ideal para modo oscuro automático.
• Enseña sensores físicos del dispositivo.
• Refuerza la ergonomía digital.

🎨 Ejemplo 35 · EyeDropper API · Selección de color educativa

EyeDropper API permite seleccionar colores directamente de la pantalla. En educación, esto es útil para arte digital, diseño, creatividad, análisis visual y proyectos STEAM.

🎨 Seleccionar color

<script>
async function demo35Pick() {
    if (!window.EyeDropper) {
        document.getElementById("demo35-output").innerText =
            "EyeDropper API no disponible.";
        return;
    }
    const eye = new EyeDropper();
    const result = await eye.open();
    document.getElementById("demo35-output").innerText =
        "Color seleccionado: " + result.sRGBHex;
}
</script>
    

Explicación pedagógica:
• Permite seleccionar colores desde la pantalla.
• Ideal para arte, diseño y creatividad.
• Enseña interacción visual avanzada.
• Refuerza la exploración artística.

🗣️ Ejemplo 36 · Voces de síntesis · Selección de voz educativa

La Speech Synthesis API permite elegir diferentes voces para lectura en voz alta. En educación, esto permite adaptar la lectura a distintos estilos, idiomas y necesidades.

🗣️ Seleccionar voz

<script>
let voices36 = [];

function loadVoices36() {
    voices36 = speechSynthesis.getVoices();
    const sel = document.getElementById("demo36-voices");
    sel.innerHTML = "";
    voices36.forEach((v, i) => {
        const opt = document.createElement("option");
        opt.value = i;
        opt.textContent = v.name + " (" + v.lang + ")";
        sel.appendChild(opt);
    });
}

speechSynthesis.onvoiceschanged = loadVoices36;

function demo36Speak() {
    const text = document.getElementById("demo36-text").value;
    const idx = document.getElementById("demo36-voices").value;
    const utter = new SpeechSynthesisUtterance(text);
    utter.voice = voices36[idx];
    speechSynthesis.speak(utter);
    document.getElementById("demo36-output").innerText =
        "Leyendo con voz: " + utter.voice.name;
}
</script>
    

Explicación pedagógica:
• Permite elegir voces para lectura asistida.
• Ideal para accesibilidad, idiomas y lectura guiada.
• Enseña cómo el navegador gestiona voces sintéticas.
• Refuerza la personalización educativa.

🎮 Ejemplo 37 · Gamepad API · Control educativo con mando

La Gamepad API permite usar mandos de videojuegos en el navegador. En educación, esto habilita simuladores, juegos didácticos, actividades motrices y proyectos interactivos.

🎮 Detectar mando

<script>
function demo37Start() {
    window.addEventListener("gamepadconnected", (e) => {
        document.getElementById("demo37-output").innerText =
            "Mando conectado: " + e.gamepad.id;
        demo37Loop();
    });
}

function demo37Loop() {
    const pads = navigator.getGamepads();
    if (pads[0]) {
        const a = pads[0].buttons[0].pressed;
        document.getElementById("demo37-output").innerText =
            "Botón A: " + (a ? "Pulsado" : "No pulsado");
    }
    requestAnimationFrame(demo37Loop);
}
</script>
    

Explicación pedagógica:
• Permite usar mandos para actividades educativas.
• Ideal para simuladores y juegos didácticos.
• Enseña interacción hardware‑software moderna.
• Refuerza la creatividad y el aprendizaje activo.

🧲 Ejemplo 38 · Magnetómetro · Campo magnético educativo

El magnetómetro detecta el campo magnético alrededor del dispositivo. En educación, esto permite experimentos de física, orientación y ciencias naturales.

🧲 Detectar campo magnético

<script>
function demo38Start() {
    try {
        const sensor = new Magnetometer();
        sensor.onreading = () => {
            document.getElementById("demo38-output").innerText =
                "Campo magnético:\nX=" + sensor.x + "\nY=" + sensor.y + "\nZ=" + sensor.z;
        };
        sensor.start();
    } catch {
        document.getElementById("demo38-output").innerText =
            "Magnetómetro no disponible.";
    }
}
</script>
    

Explicación pedagógica:
• Permite medir campo magnético real.
• Ideal para física y ciencias naturales.
• Enseña sensores avanzados del dispositivo.
• Refuerza la experimentación científica.

🧭 Ejemplo 39 · Orientation Sensor · Orientación tridimensional

Orientation Sensor permite obtener la orientación tridimensional del dispositivo. En educación, esto habilita actividades de física, robótica, astronomía y simulaciones.

🧭 Orientación 3D

<script>
function demo39Start() {
    try {
        const sensor = new AbsoluteOrientationSensor();
        sensor.onreading = () => {
            const q = sensor.quaternion;
            document.getElementById("demo39-output").innerText =
                "Orientación (cuaternión):\n" +
                q[0] + ", " + q[1] + ", " + q[2] + ", " + q[3];
        };
        sensor.start();
    } catch {
        document.getElementById("demo39-output").innerText =
            "Orientation Sensor no disponible.";
    }
}
</script>
    

Explicación pedagógica:
• Permite medir orientación tridimensional real.
• Ideal para robótica, física y astronomía.
• Enseña matemáticas avanzadas (cuaterniones).
• Refuerza la exploración científica.

🔆 Ejemplo 40 · Wake Lock API · Evitar suspensión durante estudio

Wake Lock API permite evitar que la pantalla se apague mientras el estudiante trabaja. Ideal para sesiones de estudio, lectura profunda o actividades prolongadas.

🔆 Mantener pantalla activa

<script>
let lock40;

async function demo40Start() {
    try {
        lock40 = await navigator.wakeLock.request("screen");
        document.getElementById("demo40-output").innerText =
            "Wake Lock activado. La pantalla no se apagará.";
    } catch {
        document.getElementById("demo40-output").innerText =
            "Wake Lock no disponible.";
    }
}

function demo40Stop() {
    if (lock40) {
        lock40.release();
        lock40 = null;
        document.getElementById("demo40-output").innerText =
            "Wake Lock desactivado.";
    }
}
</script>
    

Explicación pedagógica:
• Evita que la pantalla se apague durante estudio.
• Ideal para lectura profunda y sesiones largas.
• Enseña control energético del dispositivo.
• Refuerza la ergonomía y concentración.