---

Objetivo:
Hoy nos centraremos en técnicas avanzadas de optimización web, carga eficiente de recursos, trabajo en segundo plano con Web Workers, y creación de aplicaciones web progresivas (PWA) gracias al uso de Service Workers.
También aprenderás a manejar caché inteligente y crear experiencias offline.

---

📚 Formación Teórica

1. MatchMedia e Intersection Observer

• Detectar cambios de medios (responsive) y observar elementos en el viewport.

2. Lazy Load

• Cargar imágenes u otros elementos solo cuando se necesiten.

3. Notifications API

• Mostrar notificaciones de escritorio al usuario.

4. Web Workers

• Ejecutar tareas pesadas en segundo plano sin bloquear la página.

5. Same Origin Policy

• Restricción de seguridad que impide que documentos o scripts cargados desde un origen interactúen con recursos de otro origen diferente.

6. Cache y Memoization

• Optimizar el rendimiento guardando resultados de cálculos o peticiones.

7. Service Workers

• Script que el navegador ejecuta en segundo plano, permitiendo:
  • Interceptar peticiones.
  • Gestionar cachés.
  • Trabajar sin conexión (offline).

8. Cookies y Consentimiento

• Uso de cookies para almacenar pequeñas cantidades de datos.
• Creación de un aviso de cookies conforme a regulaciones.

9. APIs extra: Screen, Canvas y Web Paint

• Información de pantalla.
• Creación de gráficos y dibujos dinámicos.

---

🎥 Vídeos de hoy

• ✅ Técnicas avanzadas de optimización y Service Workers
  (Desde 5:12:44 hasta 9:19:41 aproximadamente)

Instrucciones para el vídeo:

• Concéntrate en comprender cómo optimizar tiempos de carga, manejar cachés y ofrecer experiencias offline fiables.
• Presta especial atención a Service Workers y Web Workers, ya que son temas de gran valor en el desarrollo web moderno.

---

🧠 Apuntes Técnicos del Día

📌 Intersection Observer + Lazy Load

let observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));

• Mejora el rendimiento cargando imágenes solo cuando son visibles.

---

📌 Notifications API

Notification.requestPermission().then(permiso => {
  if (permiso === "granted") {
    new Notification("¡Hola desde tu web!");
  }
});

• Notificaciones personalizadas desde tu página.

---

📌 Web Workers

worker.js

self.addEventListener('message', (e) => {
  self.postMessage(`Recibido: ${e.data}`);
});

main.js

const worker = new Worker('worker.js');
worker.postMessage('Hola Worker');
worker.onmessage = (e) => {
  console.log(e.data);
};

• Ejecuta operaciones pesadas sin bloquear la interfaz principal.

---

📌 Service Workers (registrar e instalar)

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(registro => console.log('Service Worker registrado', registro))
    .catch(error => console.error('Error en el registro', error));
}

• Permite interceptar peticiones y cachear recursos para trabajar offline.

---

📌 Cookies básicas

document.cookie = "usuario=Jesús; expires=Fri, 31 Dec 9999 23:59:59 GMT";
console.log(document.cookie);

• Almacena datos en el navegador del usuario.

---

📌 Canvas básico

const canvas = document.getElementById('miCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 150, 100);

• Crea gráficos y dibujos dinámicos en la web.

---

🛠️ Tareas prácticas del Día 28

Tarea 1 — Implementar Lazy Load en imágenes:

• Carga imágenes solo cuando el usuario las vea en pantalla usando Intersection Observer.

Tarea 2 — Crear notificación personalizada:

• Solicita permiso al usuario y muestra una notificación al cargar la página.

Tarea 3 — Crear un Web Worker sencillo:

• Lanza un proceso en segundo plano que envíe un mensaje de respuesta.

Tarea 4 — Registrar un Service Worker:

• Crea un Service Worker básico que cachee al menos el index.html y styles.css.

Tarea 5 — Crear un pequeño aviso de cookies:

• Muestra un aviso simple de uso de cookies al entrar en la página.

Entrega:

• Crea un documento PDF donde adjuntes:
  • Código de Lazy Load, Notificaciones, Web Worker, Service Worker y Cookies.
  • Capturas de pantalla mostrando los resultados.

---

🚀 Resultado esperado al finalizar el día

• Entender y utilizar herramientas avanzadas de optimización web.
• Implementar Service Workers para experiencias offline.
• Mejorar la interacción y el rendimiento de tus aplicaciones web.

---

🎯 Cierre motivacional

¡Felicidades! 🎉
Has completado el Curso JavaScript Master y ahora manejas técnicas que utilizan los desarrolladores senior y expertos en proyectos profesionales.
Dominas desde el manejo de datos en el navegador hasta la optimización de rendimiento, la ejecución paralela de tareas y el soporte offline.

Este conocimiento no solo te hace mejor programador, sino que te convierte en un creador de aplicaciones web modernas, rápidas y resilientes.
¡Sigamos adelante! A partir de aquí, todo lo que construyas podrá ser de calidad profesional. 🚀

¡El siguiente nivel ya te está esperando!

---