Inicio

Portada del Libro del Desarrollador Web — Urukais

36 Capítulos

7 Niveles

14 Diagramas

100% Open Source

🚀 El Viaje del Desarrollador¶

Este libro no es solo un tutorial. Es un camino estructurado que te lleva desde tus primeros pasos en HTML hasta las arquitecturas más avanzadas que se usan hoy en Silicon Valley.

Nivel 1: Principiante

Aprende las bases: HTML, CSS, JavaScript, diseño responsive y formularios.

Empezar el viaje
Nivel 2: Intermedio

Domina Git, el consumo de APIs, despliegue en producción y tu primer portfolio.

Subir de nivel
Nivel 3: Avanzado

CSS moderno, JavaScript asíncrono, TypeScript, testing y arquitectura frontend.

Explorar la técnica
Nivel 4: Profesional

Conviértete en Full-stack con Node.js y domina el DevOps para frontend.

Pensar como pro
Nivel 5: Experto

Web Components, PWA, WebSockets, animaciones avanzadas y design systems.

Crear experiencias
Nivel 6: Élite

Seguridad, WebAssembly, IA en el frontend, WebXR y Web3.

Romper límites
Nivel 7: Vanguardia

Testing E2E, Server Components, Edge Computing, Docker, GraphQL y Micro-frontends.

Ir al futuro

🛠️ Tu Caja de Herramientas¶

Ejemplos Ejecutables

Código listo para copiar, pegar y probar en cada capítulo. Sin rodeos.

Ver código
Galería Visual

Todos los diagramas de arquitectura, flujos y conceptos recopilados.

Ver diagramas
Ejercicios Resueltos

Soluciones comentadas para que no te quedes atascado.

Practicar ahora

📅 Agenda y Novedades¶

Agenda de Eventos

Talleres, directos y charlas programadas sobre desarrollo web.

Ver agenda
Diario de Desarrollo

Notas, ideas, avances y el detrás de escena del libro.

Leer diario
Retos Semanales

Pon a prueba tus habilidades con desafíos de código cortos.

Aceptar reto
Proyectos de Lectores

Descubre lo que otros están construyendo con el libro.

Ver proyectos

📄 Llévate el libro contigo¶

¿Prefieres leer sin conexión o imprimir el libro? Hemos generado una versión con todos los capítulos seguidos para que puedas guardarla como PDF o imprimirla.

Descargar versión imprimible (PDF)

📌 El Proyecto¶

Filosofía — por qué existe y cómo está construido.
Roadmap — qué viene a continuación.
Changelog — historial de cambios.
Contribuir — cómo participar.
FAQ — preguntas frecuentes.
Contacto — escríbeme.

📬 Únete a la Comunidad¶

Recibe un email cuando publique nuevos capítulos, ejemplos o recursos. Sin spam, cancela cuando quieras.

Suscríbete para no perderte nada

👤 Sobre el Autor¶

Este libro es un proyecto de Manuel Casimiro Carrasco (Urukais). Más información en Sobre el autor.

📜 Licencia¶

Este proyecto está bajo la Licencia MIT (en español). Puedes usar, copiar, modificar y distribuir el contenido libremente siempre que mantengas la atribución.

Ver texto completo de la licencia

🏆 Mis Logros¶

Aquí puedes ver tu progreso a través del libro. Tu avance se guarda automáticamente en este navegador.

Cargando tus logros...

🎯 ¿Cómo funciona?¶

Ve a cualquier capítulo del libro.
Baja hasta el final y pulsa el botón "Marcar como completado".
Vuelve a esta página para ver cómo tu barra de progreso avanza.

📅 Agenda de Eventos¶

Próximamente habrá talleres, directos y charlas sobre desarrollo web. Todo el contenido será gratuito y en español.

🗓️ Calendario¶

💡 Cómo usar el calendario

Eventos oficiales (colores): talleres, directos y retos del libro.
Tus eventos (verde): haz clic en cualquier día para añadir tus propios recordatorios. Se guardan en tu navegador.

🎓 Tipos de eventos¶

🟣 Talleres — Sesiones prácticas de 1-2 horas.
🔵 Charlas — Conversaciones sobre temas específicos.
🟢 Directos — Emisiones en vivo con preguntas y respuestas.
🟠 Retos — Desafíos semanales de código.
🟢 Tus eventos — Recordatorios personales que se guardan en tu navegador.

📰 Diario de Desarrollo¶

Un espacio para compartir notas, ideas y el proceso de creación de este libro.

🚀 18 de Octubre, 2026 — El día que el libro cobró vida¶

Mi espacio de trabajo

Hoy es un día especial. Después de semanas de trabajo, el libro ya no es solo una idea. Tiene 36 capítulos, diagramas interactivos, ejercicios resueltos y hasta un sistema de logros para que aprendas jugando.

La idea nació de mis propias notas. Me di cuenta de que en internet faltaba un recurso en español que no tuviera miedo de hablar de arquitectura, rendimiento y seguridad. Quería crear algo que yo mismo hubiera querido leer cuando empecé.

🛠️ El stack detrás del libro¶

Para los curiosos, este libro está construido con:

MkDocs y Material for MkDocs (el mejor tema que existe).
GitHub Pages para el alojamiento gratuito.
GitHub Actions para desplegar automáticamente en cada push.
Giscus para los comentarios.
Mermaid para los diagramas.

🔮 ¿Qué viene ahora?¶

Seguiré añadiendo retos semanales y proyectos guiados.
Quiero integrar más editores de código en vivo en los capítulos de práctica.
Estoy trabajando en una versión imprimible (PDF) mejorada.

Gracias por estar aquí. Si tienes ideas, escríbeme por contacto.

Última actualización: 18 de Octubre de 2026

Retos

🔥 Retos Semanales¶

Cada semana publicaré un nuevo desafío de código. Los retos se desbloquean automáticamente en su fecha indicada.

Reto #1: El botón camaleón

Dificultad: 🟢 Fácil · Tema: HTML y CSS

Crea un botón con hover y transiciones suaves.

Ver reto
Reto #2: La tarjeta de presentación {: .reto-card data-release="2026-10-25" }

Dificultad: 🟡 Medio · Tema: HTML y CSS

Crea una tarjeta con hover y sombra.

🔒 Disponible el 25 de octubre
Reto #3: Contador de clics {: .reto-card data-release="2026-11-01" }

Dificultad: 🟢 Fácil · Tema: JavaScript

Aprende a manejar eventos y estado.

🔒 Disponible el 1 de noviembre
Reto #4: Galería responsive {: .reto-card data-release="2026-11-08" }

Dificultad: 🟡 Medio · Tema: CSS Grid

Domina CSS Grid con media queries.

🔒 Disponible el 8 de noviembre
Reto #5: Validador de formulario {: .reto-card data-release="2026-11-15" }

Dificultad: 🔴 Difícil · Tema: JavaScript

Valida formularios como un profesional.

🔒 Disponible el 15 de noviembre

🔥 Reto #1: El botón camaleón¶

Dificultad: 🟢 Fácil · Tema: HTML y CSS

Crea un botón que cambie de color de fondo y de texto cuando el usuario pase el ratón por encima (hover). Debe tener bordes redondeados y una transición suave.

Ver solución

```html .mi-boton {

background: #6a5acd; color: white; padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer; transition: background 0.3s ease, color 0.3s ease; } .mi-boton:hover { background: #22d3ee; color: #0f172a; }

📄 Archivo 3: `docs/retos/reto-2.md`¶

```markdown

🔥 Reto #2: La tarjeta de presentación¶

Dificultad: 🟡 Medio · Tema: HTML y CSS

Crea una tarjeta con tu nombre, foto (placeholder) y biografía. Debe tener sombra suave y elevarse al hacer hover.

Ver solución

```html

Tu Nombre

Desarrollador web apasionado.

.tarjeta {

border: 1px solid #e2e8f0; border-radius: 12px; padding: 2rem; text-align: center; max-width: 300px; transition: transform 0.3s, box-shadow 0.3s; } .tarjeta:hover { transform: translateY(-10px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); } .tarjeta img { border-radius: 50%; width: 100px; height: 100px; }

📄 Archivo 4: `docs/retos/reto-3.md`¶

```markdown

🔥 Reto #3: Contador de clics¶

Dificultad: 🟢 Fácil · Tema: JavaScript

Crea un botón que incremente un contador cada vez que se pulse. Muestra el número en pantalla.

Ver solución

```html

Has pulsado: 0 veces

let n = 0;

const btn = document.getElementById('btn'); const display = document.getElementById('contador'); btn.addEventListener('click', () => { n++; display.textContent = n; });

🚀 Mis Proyectos¶

Una colección de las aplicaciones web, experimentos y herramientas que he construido. Todos ellos están desarrollados con las tecnologías y prácticas que enseño en este libro.

🎵 Vive la Mejor Música

Plataforma: Descubre APIs, playlists y conciertos con estilo futurista.

Explora más de 150 APIs dedicadas al mundo de la música: streaming, análisis de audio, conciertos, radio, podcasts… Pasa el ratón por el menú para ver los mega-desplegables con efectos neón y transiciones fluidas.

Explorar ahora
🐸 Bienvenidos a Urukais Klick

Heavy Metal & Tech: La intersección perfecta entre la tecnología de vanguardia y el poder del heavy metal. Explora cómo la innovación está moldeando el sonido y la cultura del metal.

📊 329 Proyectos · 👥 46.320 Visitas

Visitar sitio
✨ Felices Fiestas 2025'26

Navidad: La elegancia de la tradición. El encanto de la Navidad. Clásicos y joyas modernas del cine navideño.

🎄 67 Días · ⏰ 04 Horas · ⏳ 29 Min

Ver portal navideño
⚡ Los Guardianes Silenciosos

Seguridad y JS: Descubre el ecosistema de raspado distribuido y ejecución de código WebAssembly. Un editor de código seguro para explorar el poder de la navegación sagrada.

Explorar ecosistema
🎮 Urukais-Klick Gaming

Gaming: Tu plataforma definitiva de contenido gaming. Descubre los mejores videos de videojuegos, highlights de streamers y tendencias (Valorant, LoL, Twitch, YouTube).

Entrar al gaming
🤖 Soloist AI

Inteligencia Artificial: Mi perfil profesional y experimentos con herramientas de Inteligencia Artificial. Innovación y vanguardia.

Visitar perfil

Hecho con el libro

Todos estos proyectos son míos y los he construido aplicando las técnicas que verás en los 36 capítulos del libro. ¡Pruébalos y dime qué te parecen!

📚 Proyectos Guiados¶

Aprende construyendo. Aquí tienes proyectos paso a paso que combinan todo lo aprendido en el libro.

📝 Proyecto 1: Lista de Tareas (To-Do List)¶

Vamos a crear una aplicación para añadir, tachar y eliminar tareas. Es el "Hola Mundo" de las aplicaciones web interactivas.

Paso 1: El HTML (Estructura)¶

Crea un archivo index.html y pega esto:

```html

Mi Lista de Tareas

Mis Tareas

Filosofía del proyecto¶

Por qué existe este libro¶

En internet sobran tutoriales. Lo que falta es material estructurado, en español, que no te suelte a la mitad. Este libro existe para llenar ese hueco.

Nació de mis propias notas. Cuando aprendía, apuntaba todo en un archivo de texto. Cuando enseñaba, reutilizaba esas notas. Con los años se convirtió en esto.

Principios¶

🎯 Práctico antes que teórico¶

Cada concepto viene con código que puedes ejecutar. No hay capítulos de relleno ni teoría abstracta sin aplicación.

📈 Progresivo y sin saltos¶

Los capítulos siguen una curva suave. No hay "ejercicio para el lector" imposibles ni conceptos avanzados metidos con calzador en un capítulo de introducción.

🌍 En español, de verdad¶

Sin traducciones automáticas, sin anglicismos innecesarios. Cuando un término técnico solo existe en inglés (como callback o debounce), se explica y se usa.

🧱 Sin dependencias de moda¶

No dependemos de un framework concreto que caduque en seis meses. Los fundamentos —HTML, CSS, JavaScript— son los mismos hoy que hace diez años.

♿ Accesible por defecto¶

Cada ejemplo que ves aquí está pensado para ser accesible. Porque la accesibilidad no es un extra: es parte del trabajo.

🔓 Abierto y libre¶

Todo el código está en GitHub. Puedes copiarlo, modificarlo, usarlo en tus proyectos o proponer mejoras.

Lo que NO encontrarás aquí¶

Promesas de "aprender a programar en 24 horas". Esto lleva tiempo.
Cursos disfrazados. No hay nada de pago detrás.
Publicidad ni afiliados. Nadie paga por aparecer.
Opiniones disfrazadas de hechos. Cuando algo es cuestión de gustos, se dice.

Cómo está hecho¶

El libro está construido con:

MkDocs Material — para generar el sitio estático.
Markdown — para escribir el contenido.
GitHub Actions — para desplegar automáticamente.
GitHub Pages — para servir el sitio.

Todo el código fuente es público y está en el repositorio.

Un compromiso¶

Este libro no te va a mentir. Ni te va a vender humo. Cuando algo es difícil, te lo diré. Cuando algo requiere práctica repetida, también. Cuando algo requiere que hagas proyectos por tu cuenta, no voy a decirte que con leer basta.

Aprender a programar es como aprender a tocar un instrumento: hace falta practicar, equivocarse y volver a intentarlo.

"La mejor forma de aprender es enseñar."

Introducción¶

Bienvenido al Libro del Desarrollador Web. Este material te llevará desde cero hasta construir aplicaciones web completas.

¿Para quién es este libro?¶

Personas que quieren iniciarse en el desarrollo web.
Estudiantes que buscan material de referencia.
Autodidactas que prefieren aprender con ejemplos prácticos.

¿Qué vas a aprender?¶

Fundamentos de HTML y CSS.
JavaScript moderno (ES6+).
Estructura de proyectos web.
Buenas prácticas y accesibilidad.
Despliegue y publicación de sitios.

Cómo leer este libro¶

Sigue los capítulos en orden. Cada uno incluye teoría, ejemplos en la carpeta ejemplos/ y ejercicios propuestos.

➡➡ Siguiente: Capítulo 1 — Introducción al desarrollo web

Nivel principiante

01 — Introducción al desarrollo web

🧠 Pon a prueba tus conocimientos¶

¿Cuáles son los tres pilares fundamentales del desarrollo web?

¿Qué parte del desarrollo web se ejecuta en el navegador del usuario?

Capítulo 2 — HTML básico¶

¿Qué es HTML?¶

HTML (HyperText Markup Language) es el lenguaje de marcado que define la estructura del contenido de una página web. No es un lenguaje de programación, sino una forma de describir qué es cada cosa: un título, un párrafo, una imagen, un enlace…

Estructura mínima de un documento HTML¶

```html

Mi primera página

Hola, mundo

Esta es mi primera página web.

--- ## 🧠 Pon a prueba tus conocimientos

¿Qué significa la sigla HTML?

### 🎮 Editor en Vivo Prueba tus conocimientos de HTML editando el código de la izquierda y viendo el resultado a la derecha (o abajo).

💡 Edita el texto y pulsa el botón para ver los cambios.

### 🌐 Abrir en un Playground externo Si quieres experimentar en tu propio editor, puedes abrir este ejemplo en: - [CodePen](https://codepen.io/pen/?template=html-basico){ .md-button target="_blank" } - [StackBlitz](https://stackblitz.com/edit/html-basico){ .md-button target="_blank" }

¿Cuál es la etiqueta correcta para crear un enlace?

03 — CSS básico

🧠 Pon a prueba tus conocimientos¶

¿Qué significa la sigla CSS?

¿Qué propiedad CSS se utiliza para cambiar el color del texto?

🎮 Prueba tú mismo¶

Puedes ver el ejemplo de este capítulo en vivo haciendo clic aquí:

Ver ejemplo interactivo en pantalla completa

🌐 Abrir en un Playground externo¶

Si quieres experimentar en tu propio editor, puedes abrir este ejemplo en:

04 — JavaScript esencial

🧠 Pon a prueba tus conocimientos¶

¿Qué palabra clave se usa para declarar una constante en JavaScript?

🎮 Editor en Vivo: Prueba JavaScript¶

Este es el ejemplo del contador interactivo. Pulsa el botón para ver cómo JavaScript modifica el HTML en tiempo real.

🌐 Abrir en un Playground externo¶

Si quieres experimentar en tu propio editor, puedes abrir este ejemplo en:

¿Qué método se usa para seleccionar un elemento del DOM por su ID?

05 — Diseño responsive

🧠 Pon a prueba tus conocimientos¶

¿Qué meta etiqueta es esencial para que una web sea responsive?

¿Qué hace la propiedad CSS justify-content: center en Flexbox?

Capítulo 6 — Formularios HTML¶

¿Qué es un formulario?¶

Un formulario permite al usuario introducir datos y enviarlos a un servidor o procesarlos con JavaScript.

Estructura básica¶

<form action="/enviar" method="post">
  <label for="nombre">Nombre:</label>
  <input type="text" id="nombre" name="nombre" required>

  <button type="submit">Enviar</button>
</form>

Tipos de input¶

Tipo	Uso
`text`	Texto corto
`email`	Correo electrónico
`password`	Contraseña
`number`	Número
`date`	Fecha
`checkbox`	Casilla de verificación
`radio`	Opción única
`file`	Subir archivo

Validación¶

HTML5 trae validación nativa:

<input type="email" required>
<input type="number" min="0" max="100">
<input type="text" pattern="[A-Za-z]{3,}" title="Mínimo 3 letras">

Nunca confíes solo en la validación del navegador

Siempre valida también en el servidor. La validación HTML5 es una ayuda para el usuario, no una medida de seguridad.

Accesibilidad¶

Cada <input> debe tener un <label> asociado con for/id.
Usa aria-* cuando sea necesario.
No dependas solo del color para comunicar información.

Ejemplo práctico¶

Ver ejemplos/06-formularios/ejemplo.html.

Ejercicios¶

Crea un formulario de contacto con nombre, email y mensaje.
Añade validación para que el email sea obligatorio.
Muestra en consola los datos al enviar.

⬅️ Capítulo 5 — Responsive | ➡️ Apéndices (próximamente)¶

🧠 Pon a prueba tus conocimientos¶

¿Qué etiqueta se usa para crear un campo de texto en un formulario?

¿Para qué sirve el atributo required en un input?

Nivel intermedio

Capítulo 7 — Git y control de versiones¶

¿Qué es Git?¶

Git es un sistema de control de versiones distribuido. Guarda un historial de todos los cambios de un proyecto y permite volver atrás, trabajar en paralelo con otras personas y fusionar contribuciones sin pisarse.

Git vs GitHub

Git es la herramienta que corre en tu ordenador. GitHub (o GitLab, Bitbucket…) es un servicio en la nube donde alojas tus repositorios Git. Puedes usar Git sin GitHub, pero no al revés.

Conceptos clave¶

Concepto	Qué es
Repositorio	Carpeta con historial de cambios (`.git/`)
Commit	Una "foto" del proyecto en un momento dado
Rama (branch)	Línea de desarrollo independiente
Remote	Repositorio remoto (ej. GitHub)
Merge	Fusionar una rama con otra
Pull request	Propuesta de fusionar cambios en GitHub

Configuración inicial¶

git config --global user.name "Tu Nombre"
git config --global user.email "tu@email.com"
git config --global init.defaultBranch main

Flujo básico¶

Crear un repositorio¶

git init

Ver el estado¶

git status

Añadir cambios al "stage"¶

git add archivo.txt
git add .              # todo

Confirmar los cambios¶

git commit -m "Mensaje descriptivo"

Ver el historial¶

git log --oneline
git log --graph --oneline --all

Subir a GitHub¶

git remote add origin https://github.com/usuario/repo.git
git push -u origin main

Ramas¶

git branch                    # listar ramas
git checkout -b nueva-rama    # crear y cambiar
git switch nueva-rama         # cambiar (moderno)
git merge nueva-rama          # fusionar en la actual
git branch -d nueva-rama      # borrar

Trabajar con repos existentes¶

git clone https://github.com/usuario/repo.git
git pull    # traer cambios del remoto
git fetch   # traer sin fusionar

Diagrama: flujo de trabajo con Git¶

flowchart LR
    A[main] --> B[feature/nueva]
    B --> C[commits]
    C --> D[Pull Request]
    D --> E[merge a main]
    E --> F[main actualizado]

Flujo típico: se crea una rama, se trabaja en ella con varios commits, se abre un PR y se fusiona con la rama principal.

Buenas prácticas¶

Commits pequeños y atómicos: un cambio lógico por commit.
Mensajes claros: feat: añadir login, fix: corregir typo en header.
Conventional Commits: usa prefijos (feat, fix, docs, chore, refactor, test).
Ramas con nombres descriptivos: feature/login, fix/menu-movil.
Nunca subas secretos: .env, claves API, contraseñas.

Cuidado con git push --force

Reescribe el historial remoto. Si otras personas están trabajando en la misma rama, puedes causarles conflictos graves. Úsalo solo en tus ramas personales.

Ejercicios¶

Crea un repositorio nuevo en GitHub y súbelo desde tu ordenador.
Crea una rama, haz un cambio, fusiónala con main.
Practica git log --graph --oneline --all para visualizar el historial.
Añade un .gitignore que excluya node_modules/ y .env.

⬅ Capítulo 6 — Formularios HTML | ➡ Capítulo 8 — Consumo de APIs

Diagrama: flujo de trabajo con Git¶

```mermaid gitGraph commit id: "init" commit id: "feat: capítulo 1" branch feature/apis checkout feature/apis commit id: "feat: capítulo 8" commit id: "test: API" checkout main merge feature/apis commit id: "docs: apéndices" ```

Así se ve el flujo de trabajo típico con ramas: se crea una rama para una funcionalidad, se trabaja en ella, y se fusiona con la principal.¶

🧠 Pon a prueba tus conocimientos¶

¿Qué comando se usa para guardar los cambios en el historial de Git?

¿Qué hace el comando git push?

Capítulo 8 — Consumo de APIs con fetch¶

¿Qué es una API?¶

Una API (Application Programming Interface) es un conjunto de reglas que permite a dos programas comunicarse. En la web, casi siempre hablamos de APIs REST: servicios que exponen datos en formato JSON a través de URLs.

Ejemplo: https://api.github.com/users/urukaisk-maker devuelve información de un usuario de GitHub en JSON.

Métodos HTTP¶

Método	Uso
`GET`	Obtener datos
`POST`	Crear un recurso
`PUT` / `PATCH`	Actualizar
`DELETE`	Borrar

JSON¶

JSON (JavaScript Object Notation) es el formato estándar para intercambiar datos.

{
  "nombre": "Urukais",
  "edad": 30,
  "lenguajes": ["HTML", "CSS", "JavaScript"]
}

Peticiones con fetch¶

fetch() es la forma moderna de hacer peticiones HTTP desde el navegador.

GET básico¶

fetch('https://api.github.com/users/urukaisk-maker')
  .then(res => res.json())
  .then(data => console.log(data));

Con async/await (más limpio)¶

async function obtenerUsuario() {
  const res = await fetch('https://api.github.com/users/urukaisk-maker');
  const data = await res.json();
  console.log(data);
}
obtenerUsuario();

Manejo de errores¶

async function obtenerUsuario() {
  try {
    const res = await fetch('https://api.github.com/users/urukaisk-maker');
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return await res.json();
  } catch (err) {
    console.error('Error:', err.message);
  }
}

POST con datos¶

const res = await fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ title: 'Hola', body: 'Mundo' })
});
const data = await res.json();

Mostrar datos en el DOM¶

async function cargarUsuarios() {
  const res = await fetch('https://jsonplaceholder.typicode.com/users');
  const usuarios = await res.json();

  const lista = document.querySelector('#lista');
  lista.innerHTML = usuarios
    .map(u => `<li>${u.name} — ${u.email}</li>`)
    .join('');
}
cargarUsuarios();

Ejemplo práctico¶

Ver ejemplos/08-apis/ejemplo.html.

Ejercicios¶

Muestra una lista de usuarios de jsonplaceholder.typicode.com/users.
Añade un input para buscar usuarios por nombre.
Muestra un mensaje de "Cargando…" mientras llega la respuesta.
Maneja el error cuando la API devuelve 404.

⬅ Capítulo 7 — Git | ➡ Capítulo 9 — Despliegue y hosting ¶

🧠 Pon a prueba tus conocimientos¶

¿Qué significa API?

¿Qué formato de datos es el más común al consumir APIs hoy en día?

Capítulo 9 — Despliegue y hosting¶

¿Qué es desplegar?¶

Desplegar (o deploy) significa publicar tu web en internet para que cualquiera pueda visitarla. Hasta ahora has trabajado en local (file://), ahora toca subirla a un servidor.

Opciones de hosting¶

Servicio	Ideal para	Coste
GitHub Pages	Sitios estáticos (HTML/CSS/JS)	Gratis
Netlify	Sitios estáticos + funciones serverless	Gratis con límites
Vercel	Frontend moderno, frameworks (Next, Vite)	Gratis con límites
Cloudflare Pages	Estático con CDN global	Gratis
Servidor VPS	Control total (Node, PHP, Python…)	Desde 5 €/mes

GitHub Pages paso a paso¶

Sube tu proyecto a un repositorio en GitHub.
Ve a Settings → Pages.
En Source elige Deploy from a branch.
Selecciona la rama (main o gh-pages) y la carpeta (/ (root) o /docs).
Guarda. En 1–2 minutos estará en:
```
https://tu-usuario.github.io/tu-repo/
```

Dominio propio

Puedes apuntar un dominio personalizado (ej. milibro.dev) a GitHub Pages. Añade un archivo CNAME con el dominio y configura los DNS con registros A o CNAME.

Desplegar con Netlify¶

Regístrate en netlify.com con GitHub.
Pulsa "Add new site" → "Import an existing project".
Autoriza tu cuenta de GitHub y elige el repositorio.
Configura:
Build command: npm run build (o déjalo vacío si es estático puro).
Publish directory: dist o public.
Deploy. En 1 minuto tienes URL tipo https://tu-proyecto.netlify.app.

CI/CD con GitHub Actions¶

CI/CD = Continuous Integration / Continuous Deployment. Cada vez que hagas push, GitHub puede:

Instalar dependencias.
Ejecutar tests.
Construir el sitio.
Desplegarlo automáticamente.

Ejemplo mínimo para desplegar un sitio estático:

name: Deploy

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

Checklist antes de publicar¶

[ ] Todos los enlaces funcionan.
[ ] Meta etiquetas (title, description) rellenas.
[ ] Favicon configurado.
[ ] Funciona en móvil (prueba con F12 → responsive).
[ ] Sin errores en la consola.
[ ] HTTPS activo (GitHub Pages, Netlify y Vercel lo hacen automáticamente).
[ ] Sin contraseñas ni API keys en el código.

Ejercicios¶

Sube un proyecto simple a GitHub Pages.
Conecta un repositorio a Netlify y despliega.
Añade una GitHub Action que ejecute un linter en cada push.
Configura un dominio propio (si tienes uno).

⬅ Capítulo 8 — APIs | ➡ Capítulo 10 — Proyecto final ¶

🧠 Pon a prueba tus conocimientos¶

¿Cuál de estos servicios es ideal para desplegar una web estática gratis?

Capítulo 10 — Proyecto final: tu portfolio¶

Objetivo¶

Vas a construir tu portfolio personal: una web con tu presentación, tus proyectos y un formulario de contacto. Al terminar, lo desplegarás en internet.

Estructura del proyecto¶

mi-portfolio/
├── index.html
├── proyectos.html
├── contacto.html
├── css/
│   └── estilos.css
├── js/
│   └── main.js
└── img/
    └── (tus imágenes)

Paso 1: Planificar¶

Antes de escribir código, responde:

¿Qué quieres mostrar? (bio, proyectos, contacto)
¿Qué estilo visual? (minimalista, colorido, oscuro)
¿Qué secciones? (típico: Inicio · Proyectos · Sobre mí · Contacto)

Paso 2: HTML base¶

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tu Nombre — Portfolio</title>
  <meta name="description" content="Portfolio de Tu Nombre, desarrollador web.">
  <link rel="stylesheet" href="css/estilos.css">
</head>
<body>
  <header>
    <nav>
      <a href="index.html">Inicio</a>
      <a href="proyectos.html">Proyectos</a>
      <a href="contacto.html">Contacto</a>
    </nav>
  </header>

  <main>
    <section class="hero">
      <h1>Hola, soy <span>Tu Nombre</span></h1>
      <p>Desarrollador web especializado en frontend.</p>
    </section>
  </main>

  <footer>
    <p>© 2026 Tu Nombre</p>
  </footer>

  <script src="js/main.js"></script>
</body>
</html>

Paso 3: CSS responsive¶

* { box-sizing: border-box; }

body {
  font-family: system-ui, sans-serif;
  margin: 0;
  line-height: 1.6;
  color: #1e293b;
  background: #f8fafc;
}

nav {
  display: flex;
  gap: 1rem;
  padding: 1rem 2rem;
  background: #0f172a;
}

nav a {
  color: #e2e8f0;
  text-decoration: none;
}

nav a:hover { color: #a78bfa; }

.hero {
  max-width: 800px;
  margin: 4rem auto;
  padding: 0 1rem;
  text-align: center;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.hero span {
  background: linear-gradient(90deg, #a78bfa, #22d3ee);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Paso 4: JavaScript mínimo¶

// Año dinámico en el footer
document.querySelector('footer p').textContent =
  `© ${new Date().getFullYear()} Tu Nombre`;

// Smooth scroll
document.querySelectorAll('a[href^="#"]').forEach(a => {
  a.addEventListener('click', e => {
    e.preventDefault();
    document.querySelector(a.getAttribute('href')).scrollIntoView({ behavior: 'smooth' });
  });
});

Paso 5: Añadir tus proyectos¶

En proyectos.html, muestra tarjetas con:

Captura o imagen.
Título.
Descripción breve.
Enlace al repositorio o demo.

Paso 6: Desplegar¶

Sube el proyecto a un repositorio en GitHub.
Activa GitHub Pages en Settings → Pages.
Comparte la URL.

Consejo

Añade tu portfolio a la firma de tu GitHub y a tu LinkedIn. Es tu carta de presentación.

Ejercicios finales¶

Personaliza colores y tipografía a tu gusto.
Añade una sección "Sobre mí" con tu foto.
Crea un formulario de contacto funcional con Formspree.
Añade modo oscuro con un botón.
Conecta el proyecto a Netlify para tener CI/CD automático.

⬅ Capítulo 9 — Despliegue | ➡ Apéndices ¶

🧠 Pon a prueba tus conocimientos¶

¿Qué es lo más importante que debe tener tu portfolio para conseguir trabajo?

Nivel avanzado

Capítulo 11 — CSS moderno¶

Introducción¶

El CSS que se escribe hoy en producción ya no se parece al de hace cinco años. Nuevas características del lenguaje permiten escribir estilos más expresivos, mantenibles y potentes sin necesidad de preprocesadores ni frameworks.

Este capítulo repasa las técnicas que todo desarrollador profesional debería dominar en 2026.

Variables CSS (custom properties)¶

A diferencia de las variables de SCSS, las custom properties existen en tiempo de ejecución y se pueden modificar con JavaScript o con media queries.

:root {
  --color-primary: #6a5acd;
  --color-text: #1e293b;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --radius: 12px;
}

.button {
  background: var(--color-primary);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius);
}

Cambiar tema con variables¶

:root {
  --bg: #ffffff;
  --text: #1e293b;
}

[data-theme="dark"] {
  --bg: #0f172a;
  --text: #e2e8f0;
}

body {
  background: var(--bg);
  color: var(--text);
}

Con JavaScript, cambiar el tema es solo:

document.documentElement.dataset.theme = 'dark';

Fallback de variables

Puedes dar un valor por defecto: var(--color, #333). Útil cuando la variable puede no estar definida.

Funciones modernas: `clamp()`, `min()` y `max()`¶

Permiten escribir tipografía y espaciados fluidos sin media queries.

/* Título que escala entre 1.5rem y 3rem según el viewport */
h1 {
  font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
}

/* Ancho que nunca supera los 800px */
.container {
  width: min(100% - 2rem, 800px);
  margin-inline: auto;
}

/* Padding mínimo garantizado */
.card {
  padding: max(1rem, 2vw);
}

Selectores `:is()` y `:where()`¶

Simplifican listas largas de selectores y mejoran la legibilidad.

/* Antes */
article h1, article h2, article h3 { margin-top: 0; }

/* Ahora */
article :is(h1, h2, h3) { margin-top: 0; }

:where() hace lo mismo, pero con especificidad cero. Perfecto para resets:

:where(ul, ol) {
  list-style: none;
  padding: 0;
}

El selector `:has()` — el "selector padre"¶

:has() permite estilizar un elemento en función de sus hijos. Es una de las novedades más potentes de los últimos años.

/* Tarjeta con imagen */
.card:has(img) {
  grid-template-rows: auto 1fr;
}

/* Formulario con error */
.form:has(input:invalid) {
  border-color: crimson;
}

/* Menú con submenú abierto */
.nav-item:has(> .submenu:hover) {
  background: #f1f5f9;
}

Soporte

:has() está soportado en todos los navegadores modernos desde 2023. Puedes usarlo en producción sin problema.

Container queries¶

Antes, el diseño responsive dependía del tamaño del viewport. Con @container, un componente responde al tamaño de su contenedor.

.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

.card {
  display: grid;
  gap: 1rem;
}

/* Cuando el contenedor supera los 400px */
@container card (min-width: 400px) {
  .card {
    grid-template-columns: 200px 1fr;
  }
}

Esto permite componentes verdaderamente reutilizables en cualquier contexto.

Cascade layers (`@layer`)¶

Controlan el orden de precedencia de los estilos sin depender de la especificidad.

@layer reset, base, components, utilities;

@layer reset {
  * { box-sizing: border-box; }
}

@layer base {
  body { font-family: system-ui; }
}

@layer utilities {
  .text-center { text-align: center; }
}

El orden de las capas importa más que la especificidad dentro de ellas. Ideal para trabajar con librerías externas sin pelearse con sus estilos.

`@scope`¶

Limita el alcance de los estilos a un subárbol del DOM.

@scope (.card) to (.card-footer) {
  img { border-radius: 12px; }
  p { color: #475569; }
}

Los estilos solo se aplican dentro de .card y no dentro de .card-footer.

Subgrid¶

Hereda la cuadrícula del elemento padre, algo imposible con grid normal.

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.child {
  display: grid;
  grid-column: span 3;
  grid-template-columns: subgrid;
}

Perfecto para alinear contenido entre tarjetas.

Colores modernos: `oklch()` y `color-mix()`¶

:root {
  --brand: oklch(60% 0.18 280);
  --brand-light: color-mix(in oklch, var(--brand) 30%, white);
  --brand-dark: color-mix(in oklch, var(--brand) 70%, black);
}

oklch() ofrece percepción uniforme del color, ideal para generar paletas consistentes.

Propiedades lógicas¶

Sustituyen left/right/top/bottom por inline-start, inline-end, block-start, block-end. Esencial para internacionalización (RTL, árabe, hebreo).

.card {
  margin-inline: auto;
  padding-block: 1rem;
  border-inline-start: 2px solid var(--brand);
}

`aspect-ratio`¶

Antes se usaba el truco del padding-top: 56.25%. Ahora:

.video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Caso real: tarjeta de producto responsive¶

<article class="product">
  <img src="camiseta.jpg" alt="Camiseta">
  <div class="product-info">
    <h3>Camiseta</h3>
    <p class="price">29 €</p>
    <button>Añadir al carrito</button>
  </div>
</article>

.product {
  container-type: inline-size;
  display: grid;
  gap: 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1rem;
  background: var(--bg, white);
}

.product:has(.price:empty) {
  opacity: 0.5;
}

@container (min-width: 400px) {
  .product {
    grid-template-columns: 120px 1fr;
    align-items: center;
  }
}

.price {
  font-weight: 700;
  color: var(--brand, #6a5acd);
}

Diagrama: capas de la cascada CSS¶

flowchart TB
    A[Navegador] --> B[Estilos del usuario]
    B --> C[!important]
    C --> D[Estilos inline]
    D --> E[Media queries]
    E --> F[Especificidad y @layer]
    F --> G[Estilos del navegador]

Orden de precedencia en CSS: de mayor a menor prioridad. Las capas (@layer) permiten controlar este orden sin depender de la especificidad.

Buenas prácticas¶

Usa variables CSS para todo lo que se repita: colores, espaciados, radios, tipografías.
Combina :is() y :where() para reducir ruido en los selectores.
Prefiere container queries a media queries cuando diseñes componentes.
Organiza con @layer para separar resets, base, componentes y utilidades.
Usa clamp() para tipografía fluida y min()/max() para tamaños con límites.
Adopta propiedades lógicas desde el principio; evita refactorizar después.
Comprueba compatibilidad en caniuse.com antes de usar features muy nuevas.

Ejercicios¶

Crea un sistema de temas (claro/oscuro) usando solo custom properties.
Diseña una tarjeta que cambie de layout según el ancho de su contenedor con @container.
Usa :has() para resaltar un formulario cuando tiene un campo inválido.
Implementa un título con tipografía fluida usando clamp().
Organiza tus estilos con @layer en cuatro capas: reset, base, components y utilities.

⬅️ Capítulo 10 — Proyecto final | ➡️ Capítulo 12 — JavaScript asíncrono (pendiente)python3 -c "print(open('docs/capitulos/11-css-moderno.md').read()[:200])"¶

🧠 Pon a prueba tus conocimientos¶

¿Para qué sirven las variables CSS (custom properties)?

¿Qué selector se utiliza para estilizar un elemento padre basándose en sus hijos?

Capítulo 12 — JavaScript asíncrono¶

Introducción¶

JavaScript es monohilo: solo puede ejecutar una cosa a la vez. Pero la web es inherentemente asíncrona: descargas, temporizadores, eventos, peticiones a APIs… Todas esas cosas tardan y no pueden bloquear la interfaz.

Este capítulo explica cómo JavaScript maneja la asincronía y cómo escribir código legible, seguro y moderno.

El problema: código bloqueante¶

console.log('Inicio');
const datos = descargaBloqueante(); // bloquea 3 segundos
console.log(datos);
console.log('Fin');

Mientras se ejecuta descargaBloqueante, el navegador se congela. Nadie puede hacer clic, ni scroll, ni nada.

Callbacks (el enfoque antiguo)¶

La primera solución fueron los callbacks: funciones que se ejecutan cuando termina la operación.

descargar('https://api.com/datos', (error, resultado) => {
  if (error) {
    console.error('Falló:', error);
    return;
  }
  console.log('Datos:', resultado);
});

El infierno de los callbacks¶

login(usuario, (err, sesion) => {
  obtenerPerfil(sesion.id, (err, perfil) => {
    obtenerPosts(perfil.id, (err, posts) => {
      obtenerComentarios(posts[0].id, (err, comentarios) => {
        // 😱
      });
    });
  });
});

Anidar callbacks genera código difícil de leer y de mantener. La comunidad lo llamó callback hell.

Promesas¶

Una Promise es un objeto que representa un valor que estará disponible ahora, en el futuro o nunca.

Tiene tres estados:

pending — todavía no se ha resuelto.
fulfilled — se resolvió con un valor.
rejected — falló con un error.

Crear una promesa¶

const esperar = (ms) => {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
};

esperar(1000).then(() => console.log('Pasó 1 segundo'));

Encadenar promesas¶

fetch('https://api.com/usuarios')
  .then(res => res.json())
  .then(usuarios => {
    console.log(usuarios);
    return fetch(`https://api.com/posts/${usuarios[0].id}`);
  })
  .then(res => res.json())
  .then(posts => console.log(posts))
  .catch(err => console.error('Error:', err));

Mucho mejor que los callbacks anidados, pero aún hay que leer .then y .catch uno tras otro.

`async` / `await`¶

La sintaxis moderna. Convierte código asíncrono en algo que se lee como código síncrono.

async function obtenerDatos() {
  try {
    const res = await fetch('https://api.com/usuarios');
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const usuarios = await res.json();

    const resPosts = await fetch(`https://api.com/posts/${usuarios[0].id}`);
    const posts = await resPosts.json();

    return posts;
  } catch (err) {
    console.error('Error:', err.message);
  }
}

Reglas:

async convierte una función en una promesa.
await pausa la ejecución de la función hasta que la promesa se resuelva.
await solo puede usarse dentro de funciones async (o en el top-level de un módulo).

Consejo

Envuelve siempre las operaciones await en try/catch. Sin eso, cualquier fallo en la red propagará el error.

`Promise.all`, `Promise.allSettled` y `Promise.race`¶

`Promise.all` — esperar a que todas terminen¶

const [usuarios, posts, comentarios] = await Promise.all([
  fetch('/api/usuarios').then(r => r.json()),
  fetch('/api/posts').then(r => r.json()),
  fetch('/api/comentarios').then(r => r.json()),
]);

Si una falla, todo el Promise.all falla. Útil cuando todas son necesarias.

`Promise.allSettled` — esperar sin importar si fallan¶

const resultados = await Promise.allSettled([
  fetch('/api/a'),
  fetch('/api/b'),
  fetch('/api/c'),
]);

resultados.forEach(r => {
  if (r.status === 'fulfilled') console.log('OK:', r.value);
  else console.error('Fallo:', r.reason);
});

`Promise.race` — la primera que responda gana¶

const resultado = await Promise.race([
  fetch('/api/rapida'),
  esperar(3000).then(() => { throw new Error('Timeout'); }),
]);

Perfecto para implementar timeouts.

Cancelar peticiones con `AbortController`¶

¿Qué pasa si el usuario cambia de página antes de que llegue la respuesta? Hay que cancelar la petición.

const controller = new AbortController();

fetch('/api/datos', { signal: controller.signal })
  .then(res => res.json())
  .catch(err => {
    if (err.name === 'AbortError') console.log('Cancelado');
    else console.error('Error real:', err);
  });

// En algún momento:
controller.abort();

Con async/await:

async function buscar(texto) {
  const controller = new AbortController();
  const timeout = setTimeout(() => controller.abort(), 5000);

  try {
    const res = await fetch(`/api/buscar?q=${texto}`, {
      signal: controller.signal,
    });
    return await res.json();
  } catch (err) {
    if (err.name === 'AbortError') return null;
    throw err;
  } finally {
    clearTimeout(timeout);
  }
}

Async iterators y `for await...of`¶

async function* contar() {
  for (let i = 1; i <= 3; i++) {
    await esperar(1000);
    yield i;
  }
}

for await (const n of contar()) {
  console.log(n);
}

Útil para streams de datos.

Patrones reales¶

Debounce de búsqueda¶

function debounce(fn, ms) {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => fn(...args), ms);
  };
}

const buscar = debounce(async (texto) => {
  const res = await fetch(`/api/buscar?q=${texto}`);
  const datos = await res.json();
  renderizar(datos);
}, 300);

input.addEventListener('input', e => buscar(e.target.value));

Reintentos con backoff exponencial¶

async function fetchConReintentos(url, intentos = 3) {
  for (let i = 0; i < intentos; i++) {
    try {
      const res = await fetch(url);
      if (res.ok) return await res.json();
    } catch (err) {
      if (i === intentos - 1) throw err;
    }
    await esperar(2 ** i * 1000);
  }
}

Caché de promesas¶

const cache = new Map();

function fetchCache(url) {
  if (!cache.has(url)) {
    cache.set(url, fetch(url).then(r => r.json()));
  }
  return cache.get(url);
}

// Llamadas repetidas solo disparan una petición
await Promise.all([fetchCache('/api/a'), fetchCache('/api/a')]);

Buenas prácticas¶

Usa siempre async/await en código nuevo. Los callbacks anidados son un antipatrón.
Envuelve en try/catch cada bloque await que pueda fallar.
Comprueba res.ok antes de llamar a res.json() en un fetch.
Cancela peticiones con AbortController cuando el usuario navega o cambia de vista.
No mezcles then y await en la misma función sin motivo.
Usa Promise.all cuando varias operaciones pueden ir en paralelo.
Nunca bloquees el hilo con bucles largos o cálculos pesados; usa Web Workers.

Ejercicios¶

Reescribe un callback anidado de tres niveles usando async/await.
Implementa una función buscarConTimeout(url, ms) que aborte la petición si excede el tiempo.
Simula un sistema de descargas paralelas con Promise.all y muestra el progreso.
Crea un buscador con debounce que consulte una API al escribir.
Implementa un patrón de reintento con 3 intentos y espera exponencial.

⬅️ Capítulo 11 — CSS moderno | ➡️ Capítulo 13 — Módulos y bundlers (pendiente)tail -5 docs/capitulos/12-javascript-asincrono.md

🧠 Pon a prueba tus conocimientos¶

¿Qué palabra clave se usa para esperar a que una Promesa se resuelva?

¿Qué método de Promise ejecuta varias promesas en paralelo y falla si una falla?

Capítulo 13 — Módulos y bundlers¶

Introducción¶

Durante años, todo el JavaScript de una página vivía en un solo archivo o se cargaba con múltiples etiquetas <script>. Aquello era un caos: colisiones de nombres, orden de carga frágil, cero encapsulación.

Los módulos resolvieron ese problema. Y los bundlers hacen que todo eso funcione de forma eficiente en producción.

¿Qué es un módulo?¶

Un módulo es un archivo que exporta ciertas cosas y oculta el resto. Solo lo que exportas es accesible desde fuera.

Exportar¶

// matematicas.js
export const PI = 3.1416;

export function sumar(a, b) {
  return a + b;
}

export default function multiplicar(a, b) {
  return a * b;
}

Importar¶

// app.js
import multiplicar, { PI, sumar } from './matematicas.js';

console.log(sumar(2, 3));       // 5
console.log(PI);                 // 3.1416
console.log(multiplicar(4, 5));  // 20

Export default vs named

Named exports: export function foo() {} → import { foo } from './x.js'
Default export: export default function() {} → import cualquiera from './x.js'

Los named son más explícitos y permiten varios por archivo. Los default son cómodos para un único valor principal.

Módulos en el navegador¶

Añade type="module" a tu <script>:

<script type="module" src="app.js"></script>

Con eso ya puedes usar import / export sin bundler. Los navegadores modernos lo soportan.

Import dinámico¶

Carga módulos solo cuando los necesitas:

button.addEventListener('click', async () => {
  const { abrirModal } = await import('./modal.js');
  abrirModal();
});

Perfecto para code splitting y reducir el bundle inicial.

El problema: demasiados archivos¶

En un proyecto grande tienes cientos de módulos. Pedir cada uno por separado al servidor sería lentísimo. Aquí entran los bundlers.

¿Qué es un bundler?¶

Un bundler:

Lee todos tus módulos.
Resuelve las dependencias.
Combina todo en uno o varios archivos.
Optimiza: minifica, elimina código muerto, aplica tree shaking.

Bundlers populares:

Bundler	Cuándo usarlo
Vite	Proyecto moderno, rápido, el estándar hoy
Webpack	Proyectos legacy, configuraciones muy complejas
Rollup	Librerías npm
esbuild	Herramienta rápida, base de Vite
Parcel	Zero-config, proyectos pequeños

Vite paso a paso¶

Crear un proyecto¶

npm create vite@latest mi-app
cd mi-app
npm install
npm run dev

Vite te da:

Servidor de desarrollo ultrarrápido (HMR).
Soporte nativo de TypeScript, JSX, CSS modules…
Build de producción optimizado.

Estructura típica¶

mi-app/
├── index.html
├── package.json
├── vite.config.js
└── src/
    ├── main.js
    ├── estilos.css
    └── componentes/

`package.json` explicado¶

{
  "name": "mi-app",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^5.0.0"
  }
}

Los scripts se ejecutan con npm run nombre.

`npm run dev`¶

Arranca el servidor de desarrollo en http://localhost:5173. Cada vez que guardas un archivo, el navegador se actualiza automáticamente.

`npm run build`¶

Genera la carpeta dist/ con todo optimizado:

JavaScript minificado.
CSS separado.
Assets con hash (app-a1b2c3.js).

Ese dist/ es lo que subes a producción.

npm: el gestor de paquetes¶

Comandos esenciales¶

npm init -y              # crea package.json
npm install              # instala todas las dependencias
npm install axios        # añade una dependencia
npm install -D vitest    # añade una dev-dependency
npm uninstall axios      # la quita
npm run dev              # ejecuta un script
npm outdated             # muestra paquetes desactualizados
npm update               # actualiza

`dependencies` vs `devDependencies`¶

dependencies: código que usa tu app en producción (React, axios…).
devDependencies: herramientas de desarrollo (Vite, ESLint, tests…).

`package-lock.json`¶

Registra las versiones exactas instaladas. Súbelo al repo. Garantiza que todo el equipo use las mismas.

`.gitignore` para proyectos Node¶

node_modules/
dist/
.env
.DS_Store

Nunca subas node_modules/. Es enorme y se regenera con npm install.

Variables de entorno con Vite¶

Crea un archivo .env:

VITE_API_URL=https://api.mi-app.com

Úsalo en código:

const api = import.meta.env.VITE_API_URL;

No metas secretos

Todo lo que empiece por VITE_ acaba en el bundle. Nunca pongas API keys privadas ahí. Los secretos van al backend.

Diagrama: qué hace un bundler¶

flowchart LR
    A[módulo1.js] --> D[Bundler]
    B[módulo2.js] --> D
    C[módulo3.js] --> D
    D --> E[Tree shaking]
    E --> F[Minificación]
    F --> G[app.min.js único]

El bundler combina todos los módulos, elimina el código no usado (tree shaking) y minifica el resultado en uno o varios archivos optimizados.

Buenas prácticas¶

Un archivo, una responsabilidad. Si un módulo hace demasiadas cosas, divídelo.
Named exports por defecto. Son más fáciles de refactorizar.
Rutas relativas o alias: configura @/ para evitar ../../../.
.gitignore siempre con node_modules/ y dist/.
package-lock.json en Git. Es la garantía de reproducibilidad.
Actualiza dependencias con cabeza. Usa npm audit para vulnerabilidades.
Analiza tu bundle con vite-bundle-visualizer o rollup-plugin-visualizer.

Ejercicios¶

Crea un proyecto con npm create vite@latest y añade un módulo propio.
Exporta dos funciones y un valor con named exports, e impórtalos en main.js.
Usa import dinámico para cargar un módulo solo al pulsar un botón.
Añade axios como dependencia y vitest como dev-dependency.
Configura un alias @/ que apunte a src/ en vite.config.js.
Genera el build con npm run build y examina la carpeta dist/.

⬅️ Capítulo 12 — JavaScript asíncrono | ➡️ Capítulo 14 — Accesibilidad web git add -A ; git commit -m "feat: capítulo 13 módulos y bundlers" ; git push

🧠 Pon a prueba tus conocimientos¶

¿Cuál es el bundler recomendado por defecto para nuevos proyectos hoy en día?

¿Qué comando se usa para instalar las dependencias de un proyecto en Node.js?

Capítulo 14 — Accesibilidad web¶

Introducción¶

La accesibilidad web consiste en diseñar y construir sitios que cualquier persona pueda usar, independientemente de sus capacidades físicas, sensoriales o cognitivas, del dispositivo o del contexto.

No es un extra opcional. Es una obligación legal en muchos países (WCAG 2.2, ADA, EN 301 549) y, sobre todo, es lo correcto.

Aproximadamente 1 de cada 6 personas tiene algún tipo de discapacidad. Diseñar sin accesibilidad es excluir a millones de usuarios.

Los cuatro principios WCAG: POUR¶

Las Web Content Accessibility Guidelines (WCAG) se organizan en cuatro principios:

Principio	Significado
Perceivable	La información debe poder percibirse (texto alternativo, subtítulos)
Operable	Debe poder usarse con teclado, ratón, voz, etc.
Understandable	Debe ser comprensible (lenguaje claro, errores descriptivos)
Robust	Debe funcionar en distintos navegadores y ayudas técnicas

Cada principio se divide en criterios con tres niveles: A, AA y AAA. El nivel AA es el estándar exigido por ley en la mayoría de países.

HTML semántico: la base¶

El mayor error de accesibilidad es usar <div> para todo. Un <button> no es solo un botón visual; es un elemento que los lectores de pantalla reconocen, que se activa con Enter y Espacio, y que recibe foco automáticamente.

<!-- ❌ Mal -->
<div onclick="enviar()">Enviar</div>

<!-- ✅ Bien -->
<button type="button" onclick="enviar()">Enviar</button>

Etiquetas semánticas esenciales:

<button> para acciones.
<a href="..."> para navegación (no <a onclick>).
<nav>, <main>, <header>, <footer>, <aside>.
<h1> a <h6> en orden jerárquico, sin saltarse niveles.
<label> asociado a cada <input>.

Textos alternativos¶

Toda imagen informativa necesita alt.

<!-- Informativa -->
<img src="grafico-ventas.png" alt="Ventas de 2025: 45% en Q1, 30% en Q2, 25% en Q3">

<!-- Decorativa (sin alt, con role) -->
<img src="adorno.png" alt="" role="presentation">

<!-- Icono con enlace -->
<a href="/inicio">
  <img src="casa.svg" alt="Ir a la página de inicio">
</a>

Regla práctica

Pregúntate: si no pudiera ver la imagen, ¿qué información perdería? Eso es lo que va en el alt. Si no pierdes nada, alt="".

Contraste de color¶

El texto debe tener contraste suficiente con el fondo.

AA: contraste mínimo 4.5:1 en texto normal, 3:1 en texto grande.
AAA: 7:1 y 4.5:1 respectivamente.

Herramientas:

WebAIM Contrast Checker
Colour Contrast Analyser
DevTools de Chrome (pestaña "Accessibility").

Nunca uses solo el color para transmitir información.

<!-- ❌ Mal: solo cambia el color -->
<p style="color: red;">Error en el formulario</p>

<!-- ✅ Bien: color + icono + texto -->
<p style="color: #b91c1c;">
  <span aria-hidden="true">⚠</span>
  <strong>Error:</strong> el email no es válido.
</p>

Navegación por teclado¶

Todo debe poder usarse sin ratón. Prueba tu web pulsando Tab repetidamente:

¿Ves dónde está el foco?
¿Puedes llegar a todos los enlaces y botones?
¿Puedes activarlos con Enter o Espacio?
¿Puedes cerrar los modales con Esc?

`:focus-visible`¶

Nunca elimines el contorno del foco sin reemplazarlo:

/* ❌ Mal */
button:focus { outline: none; }

/* ✅ Bien */
button:focus-visible {
  outline: 3px solid #6a5acd;
  outline-offset: 2px;
}

Orden de tabulación¶

El orden por defecto sigue el DOM. Si necesitas modificarlo, usa tabindex:

tabindex="0": añade el elemento al orden natural.
tabindex="-1": focuseable por script, pero no por teclado.
tabindex="1+": evítalo, rompe el orden natural.

ARIA: cuándo y cómo usarlo¶

ARIA (Accessible Rich Internet Applications) añade semántica cuando HTML no la tiene. Su primera regla es:

Regla nº1 de ARIA

No uses ARIA si puedes usar HTML nativo. Un <button> con ARIA sigue siendo peor que un <button> nativo.

Atributos más usados:

Atributo	Función
`role`	Define el tipo de elemento (`role="dialog"`, `role="alert"`)
`aria-label`	Nombre accesible cuando no hay texto visible
`aria-labelledby`	Referencia a otro elemento que da el nombre
`aria-describedby`	Referencia a otro elemento con descripción
`aria-hidden="true"`	Oculta de lectores de pantalla
`aria-live`	Anuncia cambios dinámicos
`aria-expanded`	Estado de un menú/acordeón

Ejemplo: botón con solo icono¶

<button aria-label="Cerrar menú">
  <svg>...</svg>
</button>

Ejemplo: alerta dinámica¶

<div role="alert" aria-live="polite">
  Tu perfil se ha guardado correctamente.
</div>

Ejemplo: acordeón¶

<button aria-expanded="false" aria-controls="seccion1">
  ¿Qué es HTML?
</button>
<div id="seccion1" hidden>
  HTML es el lenguaje de marcado...
</div>

Formularios accesibles¶

Cada input debe tener un <label> asociado:

<label for="email">Correo electrónico</label>
<input type="email" id="email" name="email" required>

Errores claros y asociados¶

<label for="email">Correo</label>
<input
  type="email"
  id="email"
  aria-invalid="true"
  aria-describedby="email-error"
>
<p id="email-error" role="alert">El correo no tiene un formato válido.</p>

Agrupaciones¶

<fieldset>
  <legend>Método de pago</legend>
  <label><input type="radio" name="pago" value="tarjeta"> Tarjeta</label>
  <label><input type="radio" name="pago" value="paypal"> PayPal</label>
</fieldset>

Skip links¶

Un enlace al inicio del body para saltar directamente al contenido:

<a href="#main" class="skip-link">Saltar al contenido principal</a>
...
<main id="main">...</main>

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #6a5acd;
  color: white;
  padding: 8px 16px;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

Movimiento reducido¶

Algunas personas sufren mareos con animaciones. Respétalo:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Herramientas para auditar¶

axe DevTools — extensión de navegador.
Lighthouse — pestaña Accessibility en DevTools.
WAVE — análisis online.
Pa11y — CLI para CI.
Lectores de pantalla: NVDA (Windows), VoiceOver (macOS/iOS), TalkBack (Android).

Testing manual imprescindible¶

Ninguna herramienta automática detecta todo. Prueba tú:

Navega solo con teclado. Sin ratón. Todo el flujo.
Activa el lector de pantalla y navega por la home.
Pon el zoom al 200%. ¿Sigue siendo usable?
Usa modo alto contraste del sistema operativo.
Prueba con prefers-reduced-motion activado.

Buenas prácticas¶

HTML semántico primero, ARIA solo cuando sea imprescindible.
Todos los input con <label> asociado.
Todos los botones con texto visible o aria-label.
Contraste AA mínimo siempre.
Foco visible en todos los elementos interactivos.
Enlaces con texto descriptivo: "Descargar el informe anual" en lugar de "clic aquí".
lang correcto en <html lang="es">.
Títulos jerárquicos sin saltos (h1 → h2 → h3).
No bloquees el zoom con user-scalable=no.

Ejercicios¶

Audita tu portfolio con Lighthouse y corrige los problemas detectados.
Navega toda la home solo con Tab. Anota qué no funciona bien.
Añade un skip link y verifícalo con el teclado.
Crea un formulario accesible con errores bien asociados.
Implementa prefers-reduced-motion en tus animaciones.
Escribe un <dialog> accesible (foco atrapado, cierre con Esc, retorno del foco).

⬅️ Capítulo 13 — Módulos y bundlers | ➡️ Capítulo 15 — TypeScript desde cero ¶

🧠 Pon a prueba tus conocimientos¶

¿Qué significa la sigla WCAG?

¿Qué atributo es esencial en las imágenes para que los lectores de pantalla las describan?

Capítulo 15 — TypeScript desde cero¶

Introducción¶

TypeScript es un superset de JavaScript que añade tipado estático al lenguaje. Todo código JavaScript válido es también TypeScript válido, pero TypeScript te avisa de errores antes de ejecutar el código.

Lo usan Angular, NestJS, Deno, VS Code, Slack y prácticamente cualquier proyecto frontend serio hoy.

¿Por qué TypeScript?¶

Sin TypeScript¶

function sumar(a, b) {
  return a + b;
}

sumar(2, 3);        // 5
sumar('2', 3);      // '23' 😱
sumar([], {});      // ??? 💥

Los errores aparecen en runtime, en producción, delante del usuario.

Con TypeScript¶

function sumar(a: number, b: number): number {
  return a + b;
}

sumar(2, 3);        // 5
sumar('2', 3);      // ❌ Error antes de ejecutar

Los errores aparecen en tiempo de compilación, en el editor, mientras escribes.

Ventajas concretas¶

Autocompletado real en el editor.
Detección temprana de errores.
Refactorización segura.
Documentación viva de tu código.
Mejor experiencia en equipos grandes.

Instalación¶

npm install -D typescript
npx tsc --init

Se crea tsconfig.json, la configuración del compilador.

`tsconfig.json` recomendado¶

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

Modo strict

Activa siempre "strict": true. Es más molesto al principio, pero evita miles de bugs. Puedes desactivar reglas concretas si lo necesitas.

Compilar¶

npx tsc archivo.ts           # genera archivo.js
npx tsc --watch              # recompila al guardar
npx tsc --noEmit             # solo comprueba tipos (ideal para CI)

Tipos básicos¶

let nombre: string = 'Urukais';
let edad: number = 30;
let activo: boolean = true;
let nada: null = null;
let indefinido: undefined = undefined;

let numeros: number[] = [1, 2, 3];
let tupla: [string, number] = ['edad', 30];

let cualquiera: any = 'cuidado con esto';

let desconocido: unknown = 'algo'; // más seguro que any

Diferencia entre `any` y `unknown`¶

any desactiva el chequeo. Evítalo.
unknown obliga a verificar el tipo antes de usarlo.

function procesar(valor: unknown) {
  if (typeof valor === 'string') {
    console.log(valor.toUpperCase()); // ✅
  }
}

Inferencia de tipos¶

TypeScript casi siempre deduce el tipo por ti:

let nombre = 'Urukais';        // infiere: string
let edad = 30;                 // infiere: number
const activo = true;           // infiere: true (literal)

No hace falta anotar todo. Solo cuando el tipo no es evidente.

Funciones¶

function saludar(nombre: string): string {
  return `Hola, ${nombre}`;
}

// Parámetros opcionales
function crearUsuario(nombre: string, email?: string) {
  // email es string | undefined
}

// Parámetros por defecto
function crear(nombre: string, rol: string = 'usuario') {}

// Arrow functions
const sumar = (a: number, b: number): number => a + b;

Objetos e interfaces¶

Interface¶

interface Usuario {
  id: number;
  nombre: string;
  email: string;
  edad?: number;       // opcional
  readonly creado: Date; // no se puede modificar
}

const user: Usuario = {
  id: 1,
  nombre: 'Urukais',
  email: 'hola@ejemplo.com',
  creado: new Date(),
};

Type¶

type Estado = 'pendiente' | 'activo' | 'cancelado';

type Punto = {
  x: number;
  y: number;
};

Interface vs Type

Interface: extensible, ideal para objetos y clases.
Type: más flexible, permite uniones, intersecciones y tuplas.

Regla práctica: usa interface para objetos, type para lo demás.

Uniones e intersecciones¶

// Unión: uno u otro
type ID = string | number;

function buscar(id: ID) {
  // id puede ser string o number
}

// Intersección: todo a la vez
type Persona = { nombre: string };
type Trabajador = { empresa: string };
type Empleado = Persona & Trabajador;

Narrowing (estrechamiento de tipos)¶

TypeScript reduce el tipo según el contexto:

function longitud(valor: string | string[]): number {
  if (typeof valor === 'string') {
    return valor.length;      // aquí valor es string
  }
  return valor.length;        // aquí valor es string[]
}

Otras formas de narrowing:

typeof x === 'number'
x instanceof Fecha
'propiedad' in objeto
Array.isArray(x)

Genéricos¶

Permiten escribir código que funciona con cualquier tipo sin perder información.

function primero<T>(array: T[]): T | undefined {
  return array[0];
}

primero([1, 2, 3]);              // number
primero(['a', 'b']);             // string
primero([{ id: 1 }]);            // { id: number }

Con restricciones¶

function claveDe<T, K extends keyof T>(obj: T, clave: K): T[K] {
  return obj[clave];
}

const user = { nombre: 'Urukais', edad: 30 };
claveDe(user, 'nombre');   // string
claveDe(user, 'edad');     // number
// claveDe(user, 'xxx');   // ❌ error

Utility types¶

TypeScript incluye tipos auxiliares muy útiles:

interface Usuario {
  id: number;
  nombre: string;
  email: string;
}

Partial<Usuario>      // todas las props opcionales
Required<Usuario>     // todas obligatorias
Readonly<Usuario>     // todas readonly
Pick<Usuario, 'id' | 'nombre'>  // solo esas props
Omit<Usuario, 'id'>             // todas menos esas
Record<string, number>          // objeto con claves string y valores number
ReturnType<typeof fn>           // el tipo que devuelve fn
Parameters<typeof fn>           // los tipos de sus parámetros

Ejemplo real:

function actualizarUsuario(id: number, cambios: Partial<Usuario>) {
  // cambios puede tener solo algunos campos
}

Clases¶

class Cuenta {
  private saldo: number = 0;

  constructor(
    public readonly titular: string,
    private readonly id: string,
  ) {}

  depositar(cantidad: number): void {
    if (cantidad <= 0) throw new Error('Cantidad inválida');
    this.saldo += cantidad;
  }

  get balance(): number {
    return this.saldo;
  }
}

Modificadores:

public: accesible desde cualquier lugar (por defecto).
private: solo desde la propia clase.
protected: desde la clase y sus subclases.
readonly: no modificable tras el constructor.

Tipos literales y enums¶

type Talla = 'S' | 'M' | 'L' | 'XL';

function vestir(talla: Talla) {}

vestir('M');   // ✅
vestir('XXL'); // ❌

Enums (usa con moderación):

enum Estado {
  Pendiente = 'pendiente',
  Activo = 'activo',
  Cancelado = 'cancelado',
}

const estado: Estado = Estado.Activo;

Funciones asíncronas¶

async function obtenerUsuario(id: number): Promise<Usuario> {
  const res = await fetch(`/api/usuarios/${id}`);
  if (!res.ok) throw new Error('No encontrado');
  return await res.json();
}

TypeScript con librerías¶

La mayoría de librerías traen tipos incluidos. Otras necesitan @types/nombre:

npm install -D @types/node
npm install -D @types/lodash

Si una librería no tiene tipos, puedes declararlos:

// src/types/libreria-rara.d.ts
declare module 'libreria-rara' {
  export function hacerAlgo(x: number): string;
}

Ejemplo real: función tipada de API¶

interface Post {
  id: number;
  title: string;
  body: string;
  userId: number;
}

async function obtenerPosts(): Promise<Post[]> {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
}

function titulos(posts: Post[]): string[] {
  return posts.map(p => p.title);
}

Buenas prácticas¶

Activa strict: true siempre.
Evita any. Usa unknown cuando no sepas el tipo.
Prefiere interfaces para objetos públicos y types para uniones.
Usa readonly en propiedades que no deben cambiar.
Aprovecha la inferencia. No anotes lo evidente.
Tipa las funciones públicas. Los parámetros y el retorno.
Documenta los tipos complejos con comentarios.
Ejecuta tsc --noEmit en CI para detectar errores.
Migra JavaScript a TypeScript por módulos, no todo de golpe.

Ejercicios¶

Convierte una función JavaScript sin tipos a TypeScript con parámetros y retorno tipados.
Crea una interface Producto con id, nombre, precio y categorias (array).
Escribe una función genérica ultimo<T>(array: T[]): T | undefined.
Define un type unión Resultado con { ok: true; datos: string } y { ok: false; error: string }.
Usa Partial<Producto> para escribir una función actualizarProducto.
Escribe una clase Carrito con métodos añadir, total y vaciar, todo tipado.
Refactoriza un archivo JavaScript de tus ejercicios anteriores a TypeScript con strict.

⬅️ Capítulo 14 — Accesibilidad web | ➡️ Capítulo 16 — Testing frontend ¶

🧠 Pon a prueba tus conocimientos¶

¿Cuál es la principal ventaja de TypeScript frente a JavaScript?

¿Qué tipo de TypeScript se usa para indicar que una variable puede ser de un tipo u otro?

Capítulo 16 — Testing frontend¶

Introducción¶

El testing es el proceso de verificar que tu código hace lo que se supone que debe hacer. Sin tests, cada cambio es una ruleta rusa: tocas una función y rompes otra sin darte cuenta.

Los tests no son un lujo. Son la diferencia entre un proyecto que escala y uno que se vuelve inmantenible a los seis meses.

Tipos de tests¶

Tipo	Qué prueba	Velocidad	Cantidad
Unitarios	Una función o módulo aislado	⚡⚡⚡ Muy rápidos	Muchos
Integración	Varios módulos juntos	⚡⚡ Rápidos	Bastantes
End-to-end (E2E)	El flujo completo del usuario	⚡ Lentos	Pocos

Esta distribución se conoce como la pirámide de testing:

        /\
       /E2E\        ← pocos, lentos, costosos
      /------\
     /Integra-\     ← algunos
    /----------\
   /    Unit    \   ← muchos, rápidos, baratos
  /--------------\

Herramientas modernas¶

Herramienta	Uso
Vitest	Tests unitarios e integración (reemplazo moderno de Jest)
Jest	Clásico, ampliamente usado en React
Testing Library	Renderizar componentes y simular interacción
Playwright	E2E, multi-navegador
Cypress	E2E, muy visual
MSW	Mock de APIs a nivel de red

Stack recomendado 2026

Vitest + Testing Library + Playwright. Es el combo más moderno, rápido y sencillo.

Vitest: tu primer test¶

Instalación¶

npm install -D vitest

En package.json:

{
  "scripts": {
    "test": "vitest",
    "test:run": "vitest run",
    "test:coverage": "vitest run --coverage"
  }
}

Escribir un test¶

// matematicas.js
export function sumar(a, b) {
  return a + b;
}

export function esPar(n) {
  return n % 2 === 0;
}

// matematicas.test.js
import { describe, it, expect } from 'vitest';
import { sumar, esPar } from './matematicas.js';

describe('sumar', () => {
  it('suma dos números positivos', () => {
    expect(sumar(2, 3)).toBe(5);
  });

  it('suma números negativos', () => {
    expect(sumar(-2, -3)).toBe(-5);
  });

  it('suma cero', () => {
    expect(sumar(0, 0)).toBe(0);
  });
});

describe('esPar', () => {
  it('devuelve true para números pares', () => {
    expect(esPar(4)).toBe(true);
    expect(esPar(0)).toBe(true);
  });

  it('devuelve false para impares', () => {
    expect(esPar(3)).toBe(false);
  });
});

Ejecuta:

npm test

Anatomía de un test¶

describe('nombre del grupo', () => {   // agrupa tests
  it('descripción concreta', () => {   // un test
    // Arrange: preparar datos
    const a = 2;
    const b = 3;

    // Act: ejecutar la acción
    const resultado = sumar(a, b);

    // Assert: comprobar el resultado
    expect(resultado).toBe(5);
  });
});

Patrón AAA: Arrange, Act, Assert.

Aserciones comunes¶

expect(valor).toBe(5);                 // igualdad estricta (===)
expect(obj).toEqual({ a: 1 });         // igualdad profunda
expect(valor).toBeTruthy();
expect(valor).toBeFalsy();
expect(array).toContain('item');
expect(array).toHaveLength(3);
expect(fn).toThrow();
expect(fn).toThrow('mensaje esperado');
expect(valor).toBeGreaterThan(10);
expect(valor).toBeNull();
expect(valor).toBeDefined();
expect(promesa).resolves.toBe(5);
expect(promesa).rejects.toThrow();

`beforeEach` y `afterEach`¶

Limpia el estado entre tests:

import { beforeEach, afterEach, describe, it, expect } from 'vitest';

describe('Carrito', () => {
  let carrito;

  beforeEach(() => {
    carrito = new Carrito();
  });

  afterEach(() => {
    carrito.vaciar();
  });

  it('empieza vacío', () => {
    expect(carrito.total()).toBe(0);
  });

  it('suma correctamente', () => {
    carrito.añadir({ precio: 10 });
    carrito.añadir({ precio: 5 });
    expect(carrito.total()).toBe(15);
  });
});

Tests de código asíncrono¶

it('carga usuarios de la API', async () => {
  const usuarios = await obtenerUsuarios();
  expect(usuarios).toHaveLength(10);
});

it('maneja errores de red', async () => {
  await expect(obtenerDeURL('https://inexistente.local'))
    .rejects.toThrow();
});

Mocks y spies¶

`vi.fn()` — función simulada¶

import { vi, it, expect } from 'vitest';

it('llama al callback al hacer clic', () => {
  const callback = vi.fn();
  boton.addEventListener('click', callback);
  boton.click();
  expect(callback).toHaveBeenCalledTimes(1);
});

`vi.spyOn()` — espiar un método existente¶

const spy = vi.spyOn(console, 'log');
hacerAlgo();
expect(spy).toHaveBeenCalledWith('mensaje esperado');
spy.mockRestore();

`vi.mock()` — mockear un módulo entero¶

vi.mock('./api.js', () => ({
  obtenerUsuarios: vi.fn().mockResolvedValue([
    { id: 1, nombre: 'Urukais' },
  ]),
}));

Testing Library: probar como un usuario¶

En lugar de probar detalles de implementación, Testing Library te obliga a interactuar como lo haría una persona.

Instalación¶

npm install -D @testing-library/dom @testing-library/user-event jsdom

Configuración (`vite.config.js`)¶

import { defineConfig } from 'vite';

export default defineConfig({
  test: {
    environment: 'jsdom',
    globals: true,
  },
});

Ejemplo con DOM¶

import { screen } from '@testing-library/dom';
import userEvent from '@testing-library/user-event';
import { beforeEach, describe, it, expect } from 'vitest';

beforeEach(() => {
  document.body.innerHTML = `
    <button id="btn">Púlsame</button>
    <p id="contador">0</p>
  `;
});

it('incrementa el contador al pulsar', async () => {
  let contador = 0;
  const btn = screen.getByText('Púlsame');
  const display = document.getElementById('contador');

  btn.addEventListener('click', () => {
    contador++;
    display.textContent = contador;
  });

  await userEvent.click(btn);

  expect(display.textContent).toBe('1');
});

Consultas recomendadas¶

En orden de prioridad (más accesible → menos):

getByRole('button', { name: /enviar/i })
getByLabelText('Email')
getByPlaceholderText('tu@email.com')
getByText('Bienvenido')
getByTestId('custom-element') ← último recurso

Mock Service Worker (MSW)¶

Intercepta las peticiones HTTP a nivel de red y devuelve respuestas simuladas. Mucho más realista que mockear fetch.

npm install -D msw

// mocks/handlers.js
import { http, HttpResponse } from 'msw';

export const handlers = [
  http.get('/api/usuarios', () => {
    return HttpResponse.json([
      { id: 1, nombre: 'Urukais' },
      { id: 2, nombre: 'Ana' },
    ]);
  }),
];

Tests E2E con Playwright¶

Instalación¶

npm install -D @playwright/test
npx playwright install

Configuración (`playwright.config.js`)¶

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './e2e',
  use: {
    baseURL: 'http://localhost:5173',
    headless: true,
  },
  webServer: {
    command: 'npm run dev',
    port: 5173,
    reuseExistingServer: true,
  },
});

Test E2E¶

// e2e/login.spec.js
import { test, expect } from '@playwright/test';

test('login exitoso redirige al dashboard', async ({ page }) => {
  await page.goto('/login');
  await page.getByLabel('Email').fill('usuario@ejemplo.com');
  await page.getByLabel('Contraseña').fill('123456');
  await page.getByRole('button', { name: 'Entrar' }).click();
  await expect(page).toHaveURL('/dashboard');
  await expect(page.getByText('Bienvenido')).toBeVisible();
});

test('login fallido muestra error', async ({ page }) => {
  await page.goto('/login');
  await page.getByLabel('Email').fill('mal@ejemplo.com');
  await page.getByLabel('Contraseña').fill('incorrecta');
  await page.getByRole('button', { name: 'Entrar' }).click();
  await expect(page.getByRole('alert')).toContainText('Credenciales inválidas');
});

Cobertura¶

npm run test:coverage

Genera un informe con el porcentaje de código cubierto. No te obsesiones con el 100%. Apunta a cubrir las rutas críticas.

TDD: Test-Driven Development¶

Ciclo Red-Green-Refactor:

Red: escribe un test que falle.
Green: escribe el código mínimo para que pase.
Refactor: mejora el código sin romper los tests.

// 1. Red
it('devuelve 0 para un array vacío', () => {
  expect(total([])).toBe(0);
});

// 2. Green
export function total(items) {
  return 0;
}

// 3. Refactor + siguiente test
it('suma los precios', () => {
  expect(total([{ precio: 5 }, { precio: 3 }])).toBe(8);
});

export function total(items) {
  return items.reduce((sum, item) => sum + item.precio, 0);
}

CI: ejecutar tests en cada push¶

En .github/workflows/test.yml:

name: Tests

on:
  push:
    branches: [main]
  pull_request:

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
      - run: npm ci
      - run: npm run test:run
      - run: npx playwright install --with-deps
      - run: npx playwright test

Diagrama: la pirámide de testing¶

flowchart TB
    A[E2E<br/>pocos, lentos] --> B[Integración<br/>algunos]
    B --> C[Unitarios<br/>muchos, rápidos]

    style A fill:#dc2626,color:white
    style B fill:#f59e0b,color:white
    style C fill:#16a34a,color:white

Distribución recomendada: muchos tests unitarios (rápidos y baratos), algunos de integración y pocos E2E (lentos pero críticos).

Buenas prácticas¶

Un test, una aserción conceptual. Si tiene varias, usa describe para agrupar.
Tests independientes. Ninguno debe depender del orden.
Nombres descriptivos. it('devuelve 0 para un array vacío') mejor que it('total').
Prueba el comportamiento, no la implementación. Si refactorizas sin cambiar la API, los tests deben seguir pasando.
Usa Testing Library para el DOM. Te obliga a escribir accesible.
Mocks con moderación. Si necesitas mockear todo, el diseño tiene un problema.
Tests rápidos. Si tardan minutos, no los ejecutarás.
Cubre rutas críticas: login, checkout, formularios principales.
Ejecuta tests en CI antes de cada merge.

Ejercicios¶

Escribe tests unitarios para una función formatearPrecio(n).
Cubre con Vitest una función validarEmail(email).
Escribe un test con Testing Library que rellene y envíe un formulario.
Mockea una API con MSW y prueba un componente que la consume.
Escribe un test E2E con Playwright para el flujo "buscar producto → añadir al carrito".
Configura npm run test:coverage y analiza el informe.
Añade un workflow de GitHub Actions que ejecute los tests en cada PR.

⬅️ Capítulo 15 — TypeScript desde cero | ➡️ Capítulo 17 — Rendimiento web ¶

🧠 Pon a prueba tus conocimientos¶

¿Qué tipo de test comprueba una función o módulo de forma aislada?

¿Qué significa TDD?

Capítulo 17 — Rendimiento web¶

Introducción¶

El rendimiento web determina cuánto tarda tu página en cargar, en responder y en volverse interactiva. No es un detalle técnico: es experiencia de usuario, conversión y SEO.

Los estudios de Google y Amazon muestran que:

Un segundo extra de carga puede reducir las conversiones un 7%.
El 53% de los usuarios abandona si una página tarda más de 3 segundos.
El rendimiento es un factor de ranking en Google.

Core Web Vitals¶

Google define tres métricas principales (y una cuarta opcional) para medir la experiencia real del usuario.

Métrica	Qué mide	Objetivo
LCP	Largest Contentful Paint — tiempo hasta que carga el elemento más grande	< 2.5 s
INP	Interaction to Next Paint — respuesta a la interacción	< 200 ms
CLS	Cumulative Layout Shift — saltos visuales	< 0.1
TTFB	Time to First Byte — tiempo hasta el primer byte	< 800 ms

Cómo medirlas¶

Lighthouse (DevTools → pestaña Lighthouse).
PageSpeed Insights.
Web Vitals Extension.
CrUX — datos reales de usuarios.

Optimización de imágenes¶

Las imágenes suelen ser el mayor peso de una página.

Formatos modernos¶

Formato	Uso
WebP	Estándar moderno, buena compresión
AVIF	Mejor compresión aún, soporte creciente
SVG	Iconos, logos, ilustraciones vectoriales
PNG	Transparencias
JPG	Fotografías (legacy)

<picture>
  <source srcset="foto.avif" type="image/avif">
  <source srcset="foto.webp" type="image/webp">
  <img src="foto.jpg" alt="Descripción" width="800" height="600" loading="lazy">
</picture>

Atributos clave¶

loading="lazy" — carga diferida para imágenes fuera de pantalla.
width y height — evitan CLS reservando el espacio.
srcset — sirve distintas resoluciones según el dispositivo.
decoding="async" — no bloquea el renderizado.

<img
  src="foto-800.jpg"
  srcset="foto-400.jpg 400w, foto-800.jpg 800w, foto-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  alt="..."
  width="800"
  height="600"
  loading="lazy"
>

Optimización de CSS¶

CSS crítico inline¶

El CSS bloquea el renderizado. Para el above-the-fold, incrusta el CSS crítico en el <head>:

<style>
  /* CSS mínimo para la primera pantalla */
  header { ... }
  .hero { ... }
</style>
<link rel="preload" href="/estilos.css" as="style" onload="this.rel='stylesheet'">

Evita `@import` en CSS¶

@import bloquea en cascada. Usa múltiples <link> o un bundler.

Minifica y comprime¶

Vite, PostCSS o cssnano minifican automáticamente.
Activa gzip o Brotli en el servidor.

Optimización de JavaScript¶

Reducir el bundle¶

Tree shaking — elimina código no usado (Vite, Rollup).
Code splitting — divide en chunks que se cargan bajo demanda.
Import dinámico:

button.addEventListener('click', async () => {
  const { abrirModal } = await import('./modal.js');
  abrirModal();
});

`defer` y `async`¶

<!-- Bloquea el HTML -->
<script src="app.js"></script>

<!-- Descarga en paralelo, ejecuta tras parsear el HTML -->
<script src="app.js" defer></script>

<!-- Descarga en paralelo, ejecuta al terminar la descarga -->
<script src="app.js" async></script>

<!-- Módulos: defer por defecto -->
<script type="module" src="app.js"></script>

Regla: usa defer casi siempre. async solo para scripts independientes (analytics, widgets).

Cuidado con las librerías¶

Antes de instalar una dependencia:

¿Cuánto pesa? Consulta Bundlephobia.
¿Puedo implementarlo yo en 20 líneas?
¿Tiene equivalente más ligero? (ej. dayjs en lugar de moment).

Fuentes web¶

Las fuentes personalizadas son lentas. Estrategias:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="/fuentes/inter.woff2" as="font" type="font/woff2" crossorigin>

@font-face {
  font-family: 'Inter';
  src: url('/fuentes/inter.woff2') format('woff2');
  font-display: swap; /* muestra texto con fuente fallback mientras carga */
  font-weight: 400;
  font-style: normal;
}

font-display: swap — evita texto invisible (FOIT).
Subset — carga solo los caracteres que usas.
Prefiere fuentes del sistema cuando sea posible (system-ui).

Caché y CDN¶

Cache-Control¶

Cache-Control: public, max-age=31536000, immutable

Para assets con hash (app-a1b2c3.js), caché de un año.

CDN¶

Sirve assets desde la ubicación más cercana al usuario. Cloudflare, Vercel, Netlify lo hacen automáticamente.

Compresión¶

Brotli — mejor ratio que gzip.
gzip — soporte universal.
Configura el servidor para comprimir HTML, CSS, JS, SVG.

HTTP/2 y HTTP/3¶

HTTP/2: multiplexación, server push (obsoleto).
HTTP/3 (QUIC): menor latencia, mejores conexiones móviles.

La mayoría de CDN lo soportan sin configuración extra.

Preload, prefetch y preconnect¶

<!-- Recurso crítico: carga ya -->
<link rel="preload" href="/fuentes/inter.woff2" as="font" crossorigin>

<!-- Recurso para la siguiente navegación -->
<link rel="prefetch" href="/pagina-siguiente.html">

<!-- Conexión anticipada a un origen -->
<link rel="preconnect" href="https://api.ejemplo.com">

<!-- DNS anticipado (más ligero) -->
<link rel="dns-prefetch" href="https://analytics.ejemplo.com">

No abuses

Cada preload compite por ancho de banda. Úsalo solo para recursos críticos que descubrirías tarde.

Evitar CLS (saltos visuales)¶

Siempre width y height en <img> e <iframe>.
Reserva espacio para anuncios y embeds.
font-display: swap con fuentes similares.
Evita insertar contenido sobre el que ya está visible.

/* Reserva espacio antes de que cargue */
.video-wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Optimización de la primera carga¶

Mide con Lighthouse y PageSpeed Insights.
Reduce el bundle inicial. Carga solo lo necesario.
Sirve CSS crítico inline y el resto con preload.
Carga JS con defer o type="module".
Optimiza imágenes: WebP/AVIF, lazy, srcset.
Comprime con Brotli.
Activa caché con Cache-Control largo para assets con hash.
Usa CDN.
Mide en móvil. Muchos usuarios lo hacen desde ahí.

Herramientas¶

Lighthouse (DevTools).
PageSpeed Insights.
WebPageTest — análisis detallado.
Bundlephobia — tamaño de dependencias.
Bundle Analyzer — Vite, Webpack.
Chrome Performance tab — análisis fino del renderizado.
Chrome Coverage tab — CSS/JS no usado.

Ejemplo: de 4 s a 1.2 s¶

Checklist aplicada a un caso real:

❌ 3 imágenes de 2 MB → ✅ WebP + lazy + srcset → 300 KB totales.
❌ jQuery + Bootstrap + Moment → ✅ Vanilla + 3 utilidades → -180 KB.
❌ CSS bloqueando el render → ✅ CSS crítico inline → FCP -800 ms.
❌ Fuentes Google sin preconnect → ✅ autoalojadas + preload → -300 ms.
❌ Sin compresión → ✅ Brotli en servidor → -70% transferencia.
❌ Sin caché → ✅ Cache-Control 1 año en assets → 0 ms en visitas repetidas.

Resultado: LCP de 4.1 s → 1.2 s. Score Lighthouse de 42 → 98.

Buenas prácticas¶

Mide antes de optimizar. Sin datos, optimizas a ciegas.
Prioriza el móvil. Es donde más duele.
Optimiza imágenes primero. Es lo que más impacto tiene.
Menos JavaScript es más rápido. Cada KB cuenta.
Carga bajo demanda lo que no sea crítico.
Cachea todo lo posible.
Automatiza la medición en CI (Lighthouse CI).
Presupuesto de rendimiento: fija límites (ej. < 200 KB de JS inicial).
Prueba en red lenta (DevTools → Network → Slow 3G).

Ejercicios¶

Mide tu portfolio con Lighthouse. Anota los tres Core Web Vitals.
Convierte tus imágenes JPG a WebP y añade loading="lazy".
Añade width y height a todas las imágenes. Verifica CLS en Lighthouse.
Configura font-display: swap en tus fuentes.
Analiza el bundle con vite-bundle-visualizer y elimina una dependencia pesada.
Añade preconnect y preload para recursos críticos.
Configura compresión Brotli en tu hosting.
Ejecuta PageSpeed Insights en móvil y anota la mejora antes/después.

⬅️ Capítulo 16 — Testing frontend | ➡️ Capítulo 18 — Arquitectura frontend ¶

🧠 Pon a prueba tus conocimientos¶

¿Qué métrica mide el tiempo que tarda en cargar el elemento más grande de la página?

¿Qué atributo HTML carga las imágenes solo cuando están a punto de aparecer en pantalla?

Capítulo 18 — Arquitectura frontend¶

Introducción¶

Escribir componentes funciona. Pero cuando el proyecto crece a decenas de miles de líneas, necesitas arquitectura: decisiones conscientes sobre cómo se organiza el código, cómo fluye el estado y cómo se comunican las partes.

Este capítulo repasa los patrones y principios que separan un proyecto amateur de uno profesional.

¿Qué es la arquitectura frontend?¶

Es el conjunto de decisiones sobre:

Estructura de carpetas y módulos.
Gestión del estado (local, global, servidor).
Comunicación entre componentes.
Separación de responsabilidades.
Escalabilidad del código y del equipo.

Una buena arquitectura hace que añadir una feature sea trivial. Una mala hace que cada cambio rompa tres cosas.

Principios fundamentales¶

1. Separación de responsabilidades¶

Cada módulo debe tener una única razón para cambiar.

UI: cómo se ve.
Lógica de negocio: qué hace.
Datos: de dónde vienen.

2. Bajo acoplamiento, alta cohesión¶

Bajo acoplamiento: los módulos dependen lo mínimo posible entre sí.
Alta cohesión: todo lo relacionado vive junto.

3. Composición sobre herencia¶

Prefiere componer piezas pequeñas que heredar de clases gigantes.

4. DRY, pero no demasiado¶

Don't Repeat Yourself. Pero duplicar dos veces es mejor que abstraer mal. La regla de tres: abstrae cuando se repita tres veces.

5. KISS y YAGNI¶

KISS: Keep It Simple.
YAGNI: You Aren't Gonna Need It. No construyas para necesidades hipotéticas.

Estructura de carpetas¶

Por tipo (feature-first vs type-first)¶

Type-first (agrupa por tipo de archivo):

src/
├── components/
├── hooks/
├── utils/
├── services/
└── types/

Ventaja: simple al principio. Problema: en proyectos grandes, components/ acaba con 200 archivos.

Feature-first (agrupa por funcionalidad):

src/
├── features/
│   ├── auth/
│   │   ├── components/
│   │   ├── hooks/
│   │   ├── api.js
│   │   └── index.js
│   ├── carrito/
│   └── productos/
├── shared/
│   ├── components/
│   ├── hooks/
│   └── utils/
└── app/

Ventaja: cada feature es autónoma. Problema: hay que decidir qué es "compartido".

Recomendación

Empieza simple. Cuando el proyecto crezca, migra a feature-first. No lo hagas antes.

Estructura recomendada para empezar¶

src/
├── app/            # configuración global, rutas, providers
├── components/     # componentes reutilizables
├── features/       # funcionalidades de negocio
├── hooks/          # hooks compartidos
├── lib/            # utilidades, helpers
├── services/       # llamadas a APIs
├── styles/         # estilos globales
└── types/          # tipos compartidos

Estado: el gran problema¶

El estado es lo más complicado en frontend. Hay que distinguir tres tipos:

Tipo	Ejemplo	Dónde vive
Local	input abierto/cerrado	Componente
Global	usuario logueado, tema	Store global o contexto
Servidor	lista de productos, posts	Caché de datos del servidor

Error común

Meter estado del servidor en un store global es un antipatrón. Usa herramientas especializadas (React Query, SWR, Apollo) que gestionan caché, invalidación y sincronización.

Estado local¶

Empieza siempre por aquí. Un estado es local si:

Solo lo usa un componente o su descendencia directa.
No necesita persistir.
No lo comparte con otras partes de la app.

function Modal() {
  const [abierto, setAbierto] = useState(false);
  // ...
}

Elevación del estado¶

Si dos componentes hermanos lo necesitan, súbelo al padre común.

function Padre() {
  const [valor, setValor] = useState('');
  return (
    <>
      <Input valor={valor} onChange={setValor} />
      <Preview valor={valor} />
    </>
  );
}

Contexto (React) / Provide-Inject (Vue)¶

Para estado global ligero (tema, idioma, usuario).

const TemaContext = createContext();

function App() {
  const [tema, setTema] = useState('claro');
  return (
    <TemaContext.Provider value={{ tema, setTema }}>
      <Layout />
    </TemaContext.Provider>
  );
}

function Boton() {
  const { tema, setTema } = useContext(TemaContext);
  // ...
}

Cuándo NO usar contexto

El contexto no es un store. Cada cambio en el provider re-renderiza a todos los consumidores. Para estado complejo, usa una librería dedicada.

Stores modernos¶

Librería	Filosofía
Zustand	Minimalista, hooks, sin boilerplate
Redux Toolkit	Estructurado, DevTools, muy testeable
Pinia	El estándar para Vue 3
Jotai	Atómico, granular
Valtio	Proxy-based, mutable

Zustand en 30 líneas¶

import { create } from 'zustand';

export const useCarrito = create((set) => ({
  items: [],
  añadir: (producto) => set((state) => ({
    items: [...state.items, producto],
  })),
  vaciar: () => set({ items: [] }),
  total: () => useCarrito.getState().items.reduce(
    (sum, item) => sum + item.precio, 0
  ),
}));

// En un componente
function Carrito() {
  const { items, añadir } = useCarrito();
  // ...
}

Estado del servidor¶

Para datos que vienen de APIs, usa una librería que gestione:

Caché automática.
Revalidación en segundo plano.
Invalidación tras mutaciones.
Reintentos con backoff.

// React Query / TanStack Query
function Productos() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['productos'],
    queryFn: () => fetch('/api/productos').then(r => r.json()),
    staleTime: 5 * 60 * 1000,
  });

  if (isLoading) return <Spinner />;
  if (error) return <Error mensaje={error.message} />;
  return <Lista items={data} />;
}

Patrones de componentes¶

Container / Presentational¶

Presentational: solo UI. Recibe props, emite eventos. Sin lógica.
Container: maneja datos, efectos, estado. Delega el render.

En React moderno esto se hace con hooks en lugar de clases.

Compound components¶

Componentes que trabajan juntos y comparten estado implícito.

<Tabs defaultValue="perfil">
  <Tabs.List>
    <Tabs.Trigger value="perfil">Perfil</Tabs.Trigger>
    <Tabs.Trigger value="cuenta">Cuenta</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Panel value="perfil">...</Tabs.Panel>
  <Tabs.Panel value="cuenta">...</Tabs.Panel>
</Tabs>

Los hijos se comunican a través del contexto del padre.

Render props / Slots¶

Delegan el render de parte del componente al consumidor.

<Modal
  trigger={<button>Abrir</button>}
  content={({ cerrar }) => <p>Contenido <button onClick={cerrar}>Cerrar</button></p>}
/>

HOC (Higher-Order Component)¶

Función que envuelve un componente y le añade funcionalidad.

const ConAutenticacion = (Componente) => (props) => {
  const { usuario } = useAuth();
  if (!usuario) return <Login />;
  return <Componente {...props} usuario={usuario} />;
};

export const Perfil = ConAutenticacion(({ usuario }) => (
  <h1>Hola, {usuario.nombre}</h1>
));

En React moderno se prefieren hooks, pero siguen siendo útiles en algunas librerías.

Comunicación entre módulos¶

Props / eventos¶

El mecanismo más simple. Ideal para relaciones padre-hijo.

Estado compartido¶

Para componentes distantes en el árbol.

Bus de eventos¶

Útil para comunicación desacoplada entre features que no deberían conocerse.

const bus = new EventTarget();

// Emisor
bus.dispatchEvent(new CustomEvent('carrito:add', { detail: producto }));

// Receptor
bus.addEventListener('carrito:add', (e) => {
  actualizarContador(e.detail);
});

Código compartido: el problema del "shared"¶

Cuando algo se usa en dos features, la tentación es moverlo a shared/. Pero cuidado:

Duplicar dos veces es aceptable. Abstraer mal es peor.
Solo sube a shared/ cuando sea genérico y estable.
shared/ no debe importar nada de features/.

// ❌ Mal: shared/ importa de features/
// src/shared/utils.js
import { formatearCarrito } from '../features/carrito/formato.js';

// ✅ Bien: shared/ es independiente
// src/shared/utils.js
export function formatearPrecio(n) {
  return new Intl.NumberFormat('es-ES', {
    style: 'currency',
    currency: 'EUR',
  }).format(n);
}

Rutas y layouts¶

Separar layout (estructura) de página (contenido).

src/app/
├── rutas.js
├── layouts/
│   ├── Principal.jsx
│   └── Autenticado.jsx
└── paginas/
    ├── Inicio.jsx
    ├── Perfil.jsx
    └── Login.jsx

Lazy loading de rutas¶

Divide el bundle por ruta para cargar solo lo necesario.

const Productos = lazy(() => import('./paginas/Productos'));
const Perfil = lazy(() => import('./paginas/Perfil'));

<Routes>
  <Route path="/productos" element={
    <Suspense fallback={<Cargando />}>
      <Productos />
    </Suspense>
  } />
  <Route path="/perfil" element={
    <Suspense fallback={<Cargando />}>
      <Perfil />
    </Suspense>
  } />
</Routes>

Convenciones y estilo¶

Nombres consistentes: PascalCase para componentes, camelCase para funciones/variables.
Un componente por archivo. Nombres descriptivos.
Imports ordenados: externos → internos → estilos.
Barrel files (index.js) con moderación. Pueden crear ciclos.
ESLint + Prettier configurados desde el día 1.
TypeScript en proyectos grandes (ayuda muchísimo a la arquitectura).

Testing de arquitectura¶

Tests unitarios: funciones puras, hooks, utilidades.
Tests de integración: feature completa (componente + store + API mockeada).
Tests E2E: flujos del usuario.

Los tests siguen la estructura feature-first:

src/features/carrito/
├── components/
├── hooks/
├── api.js
├── carrito.test.js       ← test de la feature
└── __fixtures__/

Monorepos¶

Cuando tienes varias apps (web, admin, mobile) que comparten código, un monorepo ayuda.

Herramientas: Turborepo, Nx, pnpm workspaces.

mi-monorepo/
├── apps/
│   ├── web/
│   ├── admin/
│   └── mobile/
└── packages/
    ├── ui/            # componentes compartidos
    ├── utils/         # helpers
    └── config/        # eslint, tsconfig

Diagrama: estructura feature-first¶

flowchart TB
    A[src/] --> B[features/]
    A --> C[shared/]
    A --> D[app/]
    B --> E[auth/<br/>components<br/>hooks<br/>api.js]
    B --> F[carrito/<br/>components<br/>hooks<br/>api.js]
    C --> G[components genéricos]
    D --> H[rutas, layouts]

En feature-first cada funcionalidad es autónoma. shared/ contiene lo reutilizable y nunca importa de features/.

Buenas prácticas¶

Empieza simple. No adoptes arquitectura compleja hasta que sea necesaria.
Separa estado local, global y del servidor. No los mezcles.
Feature-first cuando el proyecto crece.
shared/ no importa de features/. Nunca.
Bajo acoplamiento. Dos features no deberían conocerse.
Composición sobre herencia.
TypeScript en proyectos medianos o grandes.
Convenciones claras y respetadas por todo el equipo.
Refactoriza sin miedo. Los tests te cubren.
Documenta las decisiones importantes (ADR — Architecture Decision Records).

Ejercicios¶

Reorganiza un proyecto tuyo de type-first a feature-first.
Identifica tres estados en tu app y clasifícalos (local, global, servidor).
Sustituye un store global con estado del servidor por React Query (o similar).
Escribe un componente Tabs con el patrón compound components.
Configura lazy loading por rutas.
Añade TypeScript a un proyecto JavaScript pequeño.
Escribe un ADR para una decisión arquitectónica reciente.
Audita tus imports: ¿shared/ importa de features/?

⬅️ Capítulo 17 — Rendimiento web | ➡️ Apéndices (chuletas, glosario, recursos por nivel)¶

🧠 Pon a prueba tus conocimientos¶

¿Qué estructura de carpetas agrupa los archivos por funcionalidad (ej. /auth, /carrito)?

¿Qué tipo de estado se refiere a los datos que vienen de una API (ej. lista de productos)?

Nivel profesional

Capítulo 19 — Full-stack con Node.js¶

Introducción¶

Hasta ahora has construido el frontend: la parte que ve el usuario. Pero una aplicación web real necesita también un backend: el que guarda datos, autentica usuarios y expone APIs.

En este capítulo vas a construir un backend completo con Node.js y Express, conectar una base de datos PostgreSQL usando Prisma y desplegarlo en producción.

¿Qué es Node.js?¶

Node.js es un entorno que permite ejecutar JavaScript fuera del navegador, en el servidor. Está construido sobre el motor V8 de Chrome y usa un modelo asíncrono no bloqueante que lo hace muy eficiente para I/O.

Qué puedes hacer con Node.js¶

Servidores web y APIs REST.
WebSockets y aplicaciones en tiempo real.
CLIs y herramientas de línea de comandos.
Procesos de build y automatización.

Lo que NO es Node.js¶

No es un lenguaje (es JavaScript o TypeScript).
No es un framework (Express, Fastify, NestJS son frameworks).
No es un navegador (no tiene DOM).

Instalación¶

Descarga Node.js desde nodejs.org (versión LTS). Comprueba:

node --version    # v20.x o superior
npm --version     # 10.x o superior

O usa un gestor de versiones como nvm o fnm para cambiar entre versiones.

Tu primer servidor¶

// server.js
import http from 'node:http';

const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hola desde Node.js');
});

server.listen(3000, () => {
  console.log('Servidor en http://localhost:3000');
});

Ejecuta con:

node server.js

Módulos ES en Node

Añade "type": "module" a tu package.json para usar import/export en lugar de require. Es el estándar moderno.

Express: el framework estándar¶

Express es minimalista, flexible y el más usado. Perfecto para aprender y para producir.

Instalación¶

mkdir mi-api && cd mi-api
npm init -y
npm install express

Añade a package.json:

{
  "type": "module",
  "scripts": {
    "start": "node src/server.js",
    "dev": "node --watch src/server.js"
  }
}

Servidor básico¶

// src/server.js
import express from 'express';

const app = express();

app.get('/', (req, res) => {
  res.json({ mensaje: 'API funcionando' });
});

app.listen(3000, () => {
  console.log('http://localhost:3000');
});

Ejecuta:

npm run dev

Métodos HTTP¶

app.get('/usuarios', listarUsuarios);
app.get('/usuarios/:id', obtenerUsuario);
app.post('/usuarios', crearUsuario);
app.put('/usuarios/:id', actualizarUsuario);
app.patch('/usuarios/:id', actualizarParcial);
app.delete('/usuarios/:id', borrarUsuario);

Middleware¶

Un middleware es una función que se ejecuta entre la petición y la respuesta.

app.use(express.json()); // parsea JSON del body

app.use((req, res, next) => {
  console.log(`${req.method} ${req.url}`);
  next(); // pasa al siguiente middleware
});

Middleware de error¶

app.use((err, req, res, next) => {
  console.error(err);
  res.status(err.status || 500).json({
    error: err.message || 'Error del servidor',
  });
});

Rutas organizadas¶

// src/routes/usuarios.js
import { Router } from 'express';
const router = Router();

router.get('/', (req, res) => res.json({ usuarios: [] }));
router.post('/', (req, res) => res.status(201).json({ creado: true }));

export default router;

// src/server.js
import usuariosRouter from './routes/usuarios.js';
app.use('/api/usuarios', usuariosRouter);

Variables de entorno¶

Nunca metas secretos en el código. Usa .env:

PORT=3000
DATABASE_URL=postgresql://usuario:pass@localhost:5432/miapp
JWT_SECRET=algo-muy-largo-y-aleatorio

Carga con dotenv:

npm install dotenv

import 'dotenv/config';
const port = process.env.PORT || 3000;

Nunca subas .env a Git

Añade .env a .gitignore. En producción, las variables se configuran en el hosting (Railway, Vercel, etc.).

Base de datos con PostgreSQL¶

PostgreSQL es la base de datos relacional de referencia. Robusta, gratuita, con años de desarrollo.

Instalación local¶

Linux: sudo pacman -S postgresql (Arch) o sudo apt install postgresql (Debian/Ubuntu).
macOS: brew install postgresql.
Docker (más fácil y portable):

docker run --name postgres -e POSTGRES_PASSWORD=pass -p 5432:5432 -d postgres

Prisma: el ORM moderno¶

Prisma es un ORM (Object-Relational Mapping) que te permite trabajar con la base de datos usando TypeScript/JavaScript con tipado automático.

Instalación¶

npm install -D prisma
npm install @prisma/client
npx prisma init

Esto crea prisma/schema.prisma y añade DATABASE_URL a .env.

Schema¶

// prisma/schema.prisma
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model Usuario {
  id        Int      @id @default(autoincrement())
  nombre    String
  email     String   @unique
  password  String
  posts     Post[]
  creadoEn  DateTime @default(now())
}

model Post {
  id        Int      @id @default(autoincrement())
  titulo    String
  contenido String
  autor     Usuario  @relation(fields: [autorId], references: [id])
  autorId   Int
  creadoEn  DateTime @default(now())
}

Migraciones¶

npx prisma migrate dev --name init

Crea la base de datos y genera el cliente.

Uso en código¶

import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();

// Crear
const usuario = await prisma.usuario.create({
  data: { nombre: 'Urukais', email: 'urukaisk@gmail.com', password: 'hash' },
});

// Leer
const usuarios = await prisma.usuario.findMany();
const uno = await prisma.usuario.findUnique({ where: { id: 1 } });

// Actualizar
await prisma.usuario.update({
  where: { id: 1 },
  data: { nombre: 'Nuevo nombre' },
});

// Borrar
await prisma.usuario.delete({ where: { id: 1 } });

Prisma Studio¶

Interfaz visual para inspeccionar la base de datos:

npx prisma studio

Autenticación con JWT¶

JSON Web Tokens son la forma estándar de autenticar APIs.

npm install jsonwebtoken bcrypt

Registrar usuario¶

import bcrypt from 'bcrypt';
import jwt from 'jsonwebtoken';

app.post('/api/auth/registro', async (req, res) => {
  const { nombre, email, password } = req.body;

  const existe = await prisma.usuario.findUnique({ where: { email } });
  if (existe) return res.status(409).json({ error: 'Email ya registrado' });

  const hash = await bcrypt.hash(password, 10);
  const usuario = await prisma.usuario.create({
    data: { nombre, email, password: hash },
  });

  const token = jwt.sign({ id: usuario.id }, process.env.JWT_SECRET, {
    expiresIn: '7d',
  });

  res.status(201).json({ token, usuario: { id: usuario.id, nombre, email } });
});

app.post('/api/auth/login', async (req, res) => {
  const { email, password } = req.body;

  const usuario = await prisma.usuario.findUnique({ where: { email } });
  if (!usuario) return res.status(401).json({ error: 'Credenciales inválidas' });

  const ok = await bcrypt.compare(password, usuario.password);
  if (!ok) return res.status(401).json({ error: 'Credenciales inválidas' });

  const token = jwt.sign({ id: usuario.id }, process.env.JWT_SECRET, {
    expiresIn: '7d',
  });

  res.json({ token });
});

Middleware de autenticación¶

function autenticar(req, res, next) {
  const auth = req.headers.authorization;
  if (!auth?.startsWith('Bearer ')) {
    return res.status(401).json({ error: 'Token no proporcionado' });
  }

  try {
    const token = auth.slice(7);
    req.usuario = jwt.verify(token, process.env.JWT_SECRET);
    next();
  } catch {
    res.status(401).json({ error: 'Token inválido' });
  }
}

// Ruta protegida
app.get('/api/perfil', autenticar, async (req, res) => {
  const usuario = await prisma.usuario.findUnique({
    where: { id: req.usuario.id },
    select: { id: true, nombre: true, email: true },
  });
  res.json(usuario);
});

Validación con Zod¶

Valida los datos de entrada antes de tocar la base de datos:

npm install zod

import { z } from 'zod';

const esquemaRegistro = z.object({
  nombre: z.string().min(2).max(50),
  email: z.string().email(),
  password: z.string().min(8),
});

app.post('/api/auth/registro', async (req, res) => {
  const resultado = esquemaRegistro.safeParse(req.body);
  if (!resultado.success) {
    return res.status(400).json({ errores: resultado.error.issues });
  }
  // ...
});

CORS¶

Para que el frontend pueda llamar a la API desde otro dominio:

npm install cors

import cors from 'cors';

app.use(cors({
  origin: ['http://localhost:5173', 'https://miapp.com'],
  credentials: true,
}));

Estructura recomendada¶

mi-api/
├── prisma/
│   └── schema.prisma
├── src/
│   ├── routes/
│   │   ├── auth.js
│   │   ├── usuarios.js
│   │   └── posts.js
│   ├── middlewares/
│   │   ├── auth.js
│   │   └── error.js
│   ├── lib/
│   │   └── prisma.js
│   └── server.js
├── .env
├── .gitignore
└── package.json

Despliegue¶

Railway (recomendado para empezar)¶

Crea cuenta en railway.app.
Nuevo proyecto → Deploy from GitHub repo.
Añade un plugin PostgreSQL.
Configura las variables (DATABASE_URL, JWT_SECRET, PORT).
Railway despliega automáticamente en cada push.

Fly.io¶

fly launch
fly postgres create
fly postgres attach
fly secrets set JWT_SECRET=xxx
fly deploy

Dockerfile mínimo¶

FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --production
COPY . .
EXPOSE 3000
CMD ["node", "src/server.js"]

Diagrama: arquitectura full-stack¶

flowchart LR
    A[Cliente<br/>Navegador] -->|HTTPS| B[Servidor<br/>Node.js + Express]
    B -->|Prisma| C[(PostgreSQL)]
    B -->|JWT| A
    B -->|API REST| D[Servicios externos]

Arquitectura típica: el navegador se comunica con el backend vía APIs REST, el backend gestiona la base de datos y devuelve respuestas en JSON.

Buenas prácticas¶

Nunca guardes contraseñas en texto plano. Usa bcrypt o argon2.
Valida todos los datos de entrada. Zod o Joi.
Usa HTTPS siempre en producción.
Rate limiting en endpoints sensibles:

npm install express-rate-limit

import rateLimit from 'express-rate-limit';
app.use('/api/auth', rateLimit({ windowMs: 15 * 60 * 1000, max: 20 }));

Logs estructurados: pino, winston.
Manejo de errores centralizado. Un middleware al final.
Nunca expongas stack traces en producción.
Migraciones versionadas con Prisma.
Tests de integración con Vitest + Supertest.

Ejercicios¶

Crea una API con un endpoint GET /api/saludo que devuelva un JSON.
Añade una ruta POST /api/usuarios con validación Zod.
Conecta PostgreSQL con Prisma y crea un modelo Tarea.
Implementa registro y login con JWT.
Protege una ruta GET /api/perfil con middleware de autenticación.
Añade CORS para permitir peticiones desde localhost:5173.
Despliega la API en Railway y pruébala con Postman o curl.
Conecta esta API a tu frontend del Capítulo 10.

⬅️ Capítulo 18 — Arquitectura frontend | ➡️ Capítulo 20 — DevOps para frontend

Diagrama: arquitectura full-stack¶

Flujo típico de una aplicación full-stack: el navegador se comunica con el backend mediante APIs REST, el backend gestiona la base de datos y devuelve respuestas en JSON.¶

🧠 Pon a prueba tus conocimientos¶

¿Qué framework de Node.js es el más popular para crear APIs?

¿Qué herramienta se usa en el capítulo para hablar con PostgreSQL desde Node.js?

Capítulo 20 — DevOps para frontend¶

Introducción¶

DevOps es la cultura y el conjunto de prácticas que unen desarrollo y operaciones. En el mundo frontend, significa:

Automatizar builds, tests y despliegues.
Monitorizar el rendimiento real de la aplicación.
Detectar errores en producción antes de que los usuarios se quejen.
Gestionar versiones y entornos de forma reproducible.

Este capítulo te da las herramientas para llevar tu código desde tu máquina hasta producción con confianza.

CI/CD: la base¶

CI (Continuous Integration): cada push dispara tests y validaciones. CD (Continuous Delivery/Deployment): cada cambio validado se despliega automáticamente.

GitHub Actions¶

El estándar de facto. Los workflows se definen en .github/workflows/*.yml.

Pipeline completo¶

name: CI/CD

on:
  push:
    branches: [main]
  pull_request:

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm

      - name: Instalar dependencias
        run: npm ci

      - name: Lint
        run: npm run lint

      - name: Tests
        run: npm run test:run

      - name: Build
        run: npm run build

  deploy:
    needs: test
    if: github.ref == 'refs/heads/main'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
      - run: npm ci
      - run: npm run build
      - name: Desplegar
        run: npx vercel deploy --prod --token=${{ secrets.VERCEL_TOKEN }}

npm ci en lugar de npm install

En CI, usa npm ci. Es más rápido, reproducible y falla si package-lock.json no está sincronizado.

Validaciones automáticas¶

Linting con ESLint¶

npm install -D eslint
npx eslint --init

{
  "scripts": {
    "lint": "eslint src --max-warnings 0"
  }
}

Formateo con Prettier¶

npm install -D prettier

.prettierrc:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 80
}

Añade scripts:

{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

Husky + lint-staged¶

Ejecuta lint y formato antes de cada commit:

npm install -D husky lint-staged
npx husky init

package.json:

{
  "lint-staged": {
    "*.{js,ts,jsx,tsx}": ["eslint --fix", "prettier --write"],
    "*.{css,scss}": ["prettier --write"],
    "*.md": ["prettier --write"]
  }
}

.husky/pre-commit:

npx lint-staged

Versionado semántico¶

SemVer: MAYOR.MENOR.PARCHE

MAYOR: cambios incompatibles.
MENOR: nuevas funcionalidades compatibles.
PARCHE: corrección de errores.

Ejemplo: 1.4.2 → 2.0.0 (breaking change).

Gestionado con Changesets:

npm install -D @changesets/cli
npx changeset init
npx changeset        # describe el cambio
npx changeset version

Monitorización y errores¶

Sentry¶

Captura errores en producción con contexto (navegador, usuario, stacktrace).

npm install @sentry/react

import * as Sentry from '@sentry/react';

Sentry.init({
  dsn: 'https://...@sentry.io/...',
  environment: import.meta.env.MODE,
  tracesSampleRate: 0.1,
});

Con Sentry ves:

Errores agrupados por tipo.
Cuántos usuarios afectados.
Stack trace con source maps.
Releases y regresiones.

Web Vitals en producción¶

Envía las métricas reales de tus usuarios:

npm install web-vitals

import { onCLS, onINP, onLCP } from 'web-vitals';

function enviar({ name, value, id }) {
  navigator.sendBeacon('/api/vitals', JSON.stringify({ name, value, id }));
}

onCLS(enviar);
onINP(enviar);
onLCP(enviar);

Analiza en tu backend o con servicios como Vercel Analytics o SpeedCurve.

Logs estructurados¶

En backend, usa pino:

npm install pino

import pino from 'pino';

const logger = pino({ level: 'info' });

logger.info({ userId: 42 }, 'Usuario logueado');
logger.error({ err }, 'Fallo al guardar');

En frontend, considera herramientas como LogRocket o Datadog RUM para sesiones grabadas.

Feature flags¶

Permiten activar/desactivar funcionalidades sin desplegar. Útil para:

Lanzamientos graduales.
Pruebas A/B.
Kill switches.

const flags = {
  nuevoDiseno: false,
};

if (flags.nuevoDiseno) {
  // nuevo layout
} else {
  // layout clásico
}

En serio, con LaunchDarkly, Unleash o PostHog.

Entornos¶

Separa al menos tres entornos:

Entorno	URL	Cuándo
Development	`localhost`	Desarrollo local
Staging	`staging.miapp.com`	Pruebas antes de producción
Production	`miapp.com`	Usuarios reales

Cada uno con sus propias variables de entorno, base de datos y claves.

Docker para frontend¶

Aunque el frontend no lo necesite para desarrollo, Docker ayuda a garantizar reproducibilidad.

Dockerfile para SPA¶

# Build
FROM node:20-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# Serve
FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

nginx.conf¶

server {
  listen 80;
  root /usr/share/nginx/html;
  index index.html;

  # SPA fallback
  location / {
    try_files $uri $uri/ /index.html;
  }

  # Cache largo para assets con hash
  location ~* \.(js|css|woff2|png|jpg|svg)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
  }
}

Docker Compose¶

services:
  web:
    build: .
    ports:
      - "8080:80"
  api:
    build: ./api
    environment:
      DATABASE_URL: postgres://user:pass@db:5432/app
  db:
    image: postgres:16
    environment:
      POSTGRES_PASSWORD: pass
    volumes:
      - pgdata:/var/lib/postgresql/data

volumes:
  pgdata:

Secretos y seguridad¶

Nunca metas secretos en el repositorio.
Usa GitHub Secrets para CI/CD.
En Vercel/Netlify: variables en su panel.
Rota las claves periódicamente.
Escanea dependencias:

npm audit
npm audit fix

Añade Dependabot para PRs automáticos de actualización:

# .github/dependabot.yml
version: 2
updates:
  - package-ecosystem: npm
    directory: /
    schedule:
      interval: weekly

Rollbacks¶

Un buen despliegue permite volver atrás en segundos.

Vercel/Netlify: historial de deploys con "Promote to production".
Docker + Kubernetes: kubectl rollout undo.
S3 + CloudFront: versionar el bucket.

Siempre ten un plan B. Si el despliegue rompe producción, debes poder revertir en menos de 60 segundos.

Postmortems¶

Cuando algo falle en producción, escribe un postmortem sin culpar a nadie:

Qué pasó.
Impacto.
Timeline.
Causa raíz.
Qué se hizo bien.
Acciones para evitar que se repita.

Es la mejor forma de aprender de los errores.

Buenas prácticas¶

CI en cada PR. Nunca mergees sin tests en verde.
Deploys pequeños y frecuentes. Mejor que uno grande cada mes.
Feature flags para cambios de riesgo.
Monitoriza en producción. Los usuarios son tu mejor test.
Alertas útiles. Solo lo que requiere acción inmediata.
Documenta el proceso. Onboarding rápido.
Rollback fácil. Automatizado.
Automatiza todo lo repetitivo.
Backups regulares de la base de datos.
Ambiente staging que refleje producción.

Ejercicios¶

Configura un workflow de GitHub Actions con lint + test + build.
Añade Husky + lint-staged a un proyecto tuyo.
Integra Sentry en una app y captura un error forzado.
Añade web-vitals y envía las métricas a tu backend.
Crea un Dockerfile multi-stage para una SPA con Nginx.
Configura Dependabot para actualizar dependencias semanalmente.
Escribe un postmortem de un bug real que hayas tenido.
Despliega la misma app en staging y producción con diferentes variables.

⬅️ Capítulo 19 — Full-stack con Node.js | ➡️ Apéndices ¶

🧠 Pon a prueba tus conocimientos¶

¿Qué significa CI/CD?

¿Qué herramienta de GitHub ejecuta los flujos de trabajo automáticos?

Nivel experto

Capítulo 21 — Web Components¶

Introducción¶

Los Web Components son un conjunto de estándares nativos del navegador que permiten crear componentes reutilizables y encapsulados sin necesidad de frameworks.

Existen desde hace años, pero solo recientemente todos los navegadores modernos los soportan completamente. Hoy son una alternativa real a React, Vue o Svelte para ciertos casos.

Los cuatro pilares¶

Los Web Components se construyen sobre cuatro especificaciones:

Especificación	Qué hace
Custom Elements	Definir nuevas etiquetas HTML
Shadow DOM	Encapsular estilos y estructura
HTML Templates	Definir plantillas reutilizables
ES Modules	Cargar los componentes como módulos

Custom Elements¶

Puedes definir tus propias etiquetas HTML:

class MiBoton extends HTMLElement {
  connectedCallback() {
    this.innerHTML = '<button>Púlsame</button>';
  }
}

customElements.define('mi-boton', MiBoton);

Uso:

<mi-boton></mi-boton>

Reglas:

El nombre debe contener un guion (mi-boton, no miboton).
No puede colisionar con etiquetas HTML estándar.
Puede extender HTMLElement o clases más específicas (HTMLButtonElement, etc.).

Ciclo de vida¶

Los Custom Elements tienen varios métodos que se ejecutan en momentos clave:

class MiComponente extends HTMLElement {
  constructor() {
    super();
    // Se ejecuta al crear el elemento
    // NO accedas al DOM aquí todavía
  }

  connectedCallback() {
    // Se añade al DOM
    // Aquí SÍ puedes manipular
  }

  disconnectedCallback() {
    // Se quita del DOM
    // Limpia timers, listeners, etc.
  }

  attributeChangedCallback(nombre, viejo, nuevo) {
    // Un atributo observado cambia
  }

  static get observedAttributes() {
    return ['color', 'tamaño'];
  }
}

Shadow DOM¶

El Shadow DOM encapsula la estructura y los estilos. Lo que pasa dentro no afecta al exterior, y viceversa.

class Tarjeta extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .card {
          border: 1px solid #e2e8f0;
          border-radius: 12px;
          padding: 1rem;
          font-family: system-ui, sans-serif;
        }
      </style>
      <div class="card">
        <slot></slot>
      </div>
    `;
  }
}

customElements.define('mi-tarjeta', Tarjeta);

Uso:

<mi-tarjeta>
  <h2>Hola</h2>
  <p>Contenido dentro de la tarjeta.</p>
</mi-tarjeta>

Shadow DOM: open vs closed

mode: 'open': puedes acceder con elemento.shadowRoot desde fuera.
mode: 'closed': shadowRoot es null desde fuera. Útil para encapsulación total, pero raro.

Slots¶

<slot> permite inyectar contenido externo dentro del Shadow DOM.

<div class="card">
  <header><slot name="titulo"></slot></header>
  <main><slot></slot></main>
  <footer><slot name="pie"></slot></footer>
</div>

Uso:

<mi-tarjeta>
  <h2 slot="titulo">Mi título</h2>
  <p>Contenido principal.</p>
  <small slot="pie">2026</small>
</mi-tarjeta>

Estilos de slots¶

::slotted(h2) {
  color: #6a5acd;
  margin: 0;
}

HTML Templates¶

Los <template> contienen HTML que no se renderiza hasta que se clona explícitamente. Perfecto para estructuras complejas.

<template id="tarjeta-template">
  <style>
    .card {
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 1rem;
    }
  </style>
  <div class="card">
    <h3 class="titulo"></h3>
    <p class="contenido"></p>
  </div>
</template>

class Tarjeta extends HTMLElement {
  constructor() {
    super();
    const template = document.getElementById('tarjeta-template');
    const clone = template.content.cloneNode(true);
    this.attachShadow({ mode: 'open' }).appendChild(clone);
  }

  connectedCallback() {
    this.shadowRoot.querySelector('.titulo').textContent =
      this.getAttribute('titulo') || 'Sin título';
  }
}

Atributos y propiedades¶

Leer atributos¶

connectedCallback() {
  this.color = this.getAttribute('color') || '#6a5acd';
}

static get observedAttributes() {
  return ['color'];
}

attributeChangedCallback(nombre, viejo, nuevo) {
  if (nombre === 'color') this.actualizarColor(nuevo);
}

Propiedades con getters/setters¶

class Contador extends HTMLElement {
  #valor = 0;

  get valor() { return this.#valor; }
  set valor(v) {
    this.#valor = v;
    this.actualizar();
  }
}

Eventos personalizados¶

Los componentes pueden emitir eventos que el exterior escucha.

class MiBoton extends HTMLElement {
  connectedCallback() {
    this.addEventListener('click', () => {
      this.dispatchEvent(new CustomEvent('mi-boton-click', {
        detail: { id: this.dataset.id },
        bubbles: true,
        composed: true, // atraviesa el Shadow DOM
      }));
    });
  }
}

Uso:

<mi-boton data-id="42"></mi-boton>
<script>
  document.querySelector('mi-boton').addEventListener('mi-boton-click', (e) => {
    console.log('Clic en', e.detail.id);
  });
</script>

bubbles y composed

bubbles: true → el evento sube por el DOM.
composed: true → el evento atraviesa el Shadow DOM.

Sin composed, los eventos no salen del shadow root.

Ejemplo completo: contador reutilizable¶

class Contador extends HTMLElement {
  #valor = 0;
  #step = 1;

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: inline-flex;
          align-items: center;
          gap: 0.5rem;
          font-family: system-ui, sans-serif;
        }
        button {
          background: #6a5acd;
          color: white;
          border: none;
          width: 2rem;
          height: 2rem;
          border-radius: 50%;
          cursor: pointer;
          font-size: 1rem;
        }
        button:hover { background: #5b4bc4; }
        .valor {
          min-width: 2ch;
          text-align: center;
          font-weight: 700;
          font-size: 1.25rem;
        }
      </style>
      <button id="menos" aria-label="Decrementar">−</button>
      <span class="valor">${this.#valor}</span>
      <button id="mas" aria-label="Incrementar">+</button>
    `;

    this.shadowRoot.getElementById('mas')
      .addEventListener('click', () => this.#cambiar(this.#step));
    this.shadowRoot.getElementById('menos')
      .addEventListener('click', () => this.#cambiar(-this.#step));
  }

  get valor() { return this.#valor; }
  set valor(v) {
    this.#valor = v;
    this.#render();
  }

  #cambiar(delta) {
    this.#valor += delta;
    this.#render();
    this.dispatchEvent(new CustomEvent('cambio', {
      detail: { valor: this.#valor },
      bubbles: true,
      composed: true,
    }));
  }

  #render() {
    this.shadowRoot.querySelector('.valor').textContent = this.#valor;
  }
}

customElements.define('mi-contador', Contador);

Uso:

<mi-contador></mi-contador>
<mi-contador></mi-contador>
<script>
  document.querySelectorAll('mi-contador').forEach(c => {
    c.addEventListener('cambio', (e) => console.log('Nuevo valor:', e.detail.valor));
  });
</script>

Cuándo usar Web Components¶

✅ Úsalos cuando¶

Necesitas componentes reutilizables entre frameworks.
Diseñas una librería de UI que otros consumirán.
Quieres encapsulación real sin dependencias externas.
Construyes un widget embebible en webs de terceros.

❌ Evítalos cuando¶

Trabajas con un framework que ya tiene su propio sistema de componentes.
Necesitas SSR (server-side rendering) complejo.
Requieres reactividad automática (prueba Lit o Stencil).

Librerías recomendadas¶

Lit — la más popular, minimalista, con reactividad.
Stencil — compilador que genera Web Components optimizados.
FAST — de Microsoft.
Shoelace — librería de componentes ya hecha.

Ejemplo con Lit¶

import { LitElement, html, css } from 'lit';

class MiTarjeta extends LitElement {
  static properties = {
    titulo: { type: String },
  };

  static styles = css`
    .card {
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 1rem;
    }
  `;

  render() {
    return html`
      <div class="card">
        <h3>${this.titulo}</h3>
        <slot></slot>
      </div>
    `;
  }
}

customElements.define('mi-tarjeta', MiTarjeta);

Buenas prácticas¶

Prefijo en el nombre para evitar colisiones: urukais-boton.
Documenta atributos y eventos de cada componente.
Usa Shadow DOM para encapsular estilos.
Emite eventos con composed: true si quieres que salgan.
Limpia en disconnectedCallback (timers, observers, listeners).
Usa Lit si necesitas reactividad.
Publica como módulos ES para que otros puedan importarlos.
Testea con @open-wc/testing.

Ejercicios¶

Crea un Web Component <mi-saludo nombre="Urukais"> que muestre "Hola, Urukais".
Añade un <slot> y pruébalo con contenido externo.
Implementa un contador con botones y evento cambio.
Crea una tarjeta con Shadow DOM y estilos encapsulados.
Añade observedAttributes y reacciona a cambios de atributos.
Convierte un componente Vue/React en Web Component.
Publica tus componentes como módulo ES en npm.

⬅️ Capítulo 20 — DevOps para frontend | ➡️ Capítulo 22 — Progressive Web Apps ¶

🧠 Pon a prueba tus conocimientos¶

¿Qué API del navegador permite encapsular estilos y estructura en un componente?

¿Qué método se usa para definir una nueva etiqueta HTML personalizada?

Capítulo 22 — Progressive Web Apps (PWA)¶

Introducción¶

Una Progressive Web App (PWA) es una aplicación web que se comporta como una app nativa: funciona offline, se instala en el dispositivo, envía notificaciones y se abre en su propia ventana sin la barra del navegador.

El objetivo es ofrecer la mejor experiencia posible a usuarios reales, incluso con conexiones lentas o inexistentes.

¿Qué hace que una web sea PWA?¶

Tres pilares:

HTTPS obligatorio.
Service Worker registrado.
Manifest válido.

Y una consecuencia: el navegador ofrece instalarla como app.

Beneficios reales¶

Funciona sin conexión.
Arranque instantáneo tras la primera visita (gracias al caché).
Instalable en móvil y escritorio.
Notificaciones push (si las necesitas).
Sin tiendas de apps: se distribuye por URL.
Multiplataforma por defecto.

Manifest: la carta de presentación¶

El manifest es un archivo JSON que describe la app.

{
  "name": "Libro del Desarrollador Web",
  "short_name": "Libro Web",
  "description": "Material completo para aprender desarrollo web.",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#0f172a",
  "theme_color": "#6a5acd",
  "orientation": "portrait",
  "lang": "es",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}

Enlázalo en el <head>:

<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#6a5acd">

`display` recomendado¶

Valor	Comportamiento
`fullscreen`	Pantalla completa sin barras
`standalone`	Ventana propia sin barra de URL (recomendado)
`minimal-ui`	Ventana propia con navegación mínima
`browser`	Comportamiento de pestaña normal

Iconos¶

Genera iconos en varios tamaños (al menos 192 y 512). Puedes usar Maskable.app para crear iconos adaptativos.

Service Worker¶

El Service Worker es un script que corre en segundo plano, separado de la página. Intercepta peticiones y decide qué hacer: cachear, servir del caché, ir a la red…

Registrar el Service Worker¶

<script>
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('/sw.js');
    });
  }
</script>

Service Worker básico¶

// sw.js
const CACHE = 'mi-app-v1';
const RECURSOS = [
  '/',
  '/index.html',
  '/styles.css',
  '/app.js',
  '/favicon.svg',
];

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE).then((cache) => cache.addAll(RECURSOS))
  );
});

self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then((keys) =>
      Promise.all(
        keys.filter((k) => k !== CACHE).map((k) => caches.delete(k))
      )
    )
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((respuesta) => {
      return respuesta || fetch(event.request);
    })
  );
});

HTTPS obligatorio

Los Service Workers solo funcionan en HTTPS (o en localhost durante el desarrollo).

Estrategias de caché¶

No hay una única forma de cachear. Hay varias según el tipo de recurso.

Cache First¶

Busca en caché. Si no está, va a la red y guarda.

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((res) => res || fetch(event.request))
  );
});

Úsala para: assets estáticos (CSS, JS, imágenes).

Network First¶

Intenta la red. Si falla, usa el caché.

self.addEventListener('fetch', (event) => {
  event.respondWith(
    fetch(event.request)
      .then((res) => {
        const clone = res.clone();
        caches.open(CACHE).then((c) => c.put(event.request, clone));
        return res;
      })
      .catch(() => caches.match(event.request))
  );
});

Úsala para: HTML, APIs que cambian frecuentemente.

Stale While Revalidate¶

Sirve del caché y actualiza en segundo plano.

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.open(CACHE).then(async (cache) => {
      const cached = await cache.match(event.request);
      const network = fetch(event.request).then((res) => {
        cache.put(event.request, res.clone());
        return res;
      });
      return cached || network;
    })
  );
});

Úsala para: contenido que puede estar ligeramente desactualizado (avatares, listas).

Cache solo si es exitoso¶

self.addEventListener('fetch', (event) => {
  event.respondWith(
    fetch(event.request)
      .then((res) => {
        if (res.ok && res.type === 'basic') {
          const clone = res.clone();
          caches.open(CACHE).then((c) => c.put(event.request, clone));
        }
        return res;
      })
      .catch(() => caches.match(event.request))
  );
});

Workbox: la forma profesional¶

Mantener un Service Worker a mano se vuelve complicado. Workbox (de Google) simplifica todo.

npm install -D workbox-build workbox-window

// sw.js
import { precacheAndRoute } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { CacheFirst, NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies';
import { ExpirationPlugin } from 'workbox-expiration';

// Precarga todos los assets generados por el build
precacheAndRoute(self.__WB_MANIFEST);

// Imágenes
registerRoute(
  ({ request }) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'imagenes',
    plugins: [
      new ExpirationPlugin({ maxEntries: 60, maxAgeSeconds: 30 * 24 * 60 * 60 }),
    ],
  })
);

// HTML
registerRoute(
  ({ request }) => request.mode === 'navigate',
  new NetworkFirst({ cacheName: 'paginas' })
);

// APIs
registerRoute(
  ({ url }) => url.pathname.startsWith('/api/'),
  new StaleWhileRevalidate({ cacheName: 'api' })
);

Con Vite¶

npm install -D vite-plugin-pwa

vite.config.js:

import { VitePWA } from 'vite-plugin-pwa';

export default {
  plugins: [
    VitePWA({
      registerType: 'autoUpdate',
      manifest: {
        name: 'Mi App',
        short_name: 'App',
        theme_color: '#6a5acd',
        icons: [
          { src: 'pwa-192x192.png', sizes: '192x192', type: 'image/png' },
          { src: 'pwa-512x512.png', sizes: '512x512', type: 'image/png' },
        ],
      },
    }),
  ],
};

Con esto ya tienes PWA funcional sin escribir el Service Worker a mano.

Instalación en el dispositivo¶

El evento `beforeinstallprompt`¶

Chrome/Edge ofrecen un banner propio, pero puedes personalizarlo:

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  deferredPrompt = e;
  mostrarBotonInstalar();
});

async function instalar() {
  if (!deferredPrompt) return;
  deferredPrompt.prompt();
  const { outcome } = await deferredPrompt.userChoice;
  console.log('Resultado:', outcome); // 'accepted' o 'dismissed'
  deferredPrompt = null;
}

Botón de instalación¶

<button id="btn-instalar" hidden>Instalar app</button>
<script>
  window.addEventListener('beforeinstallprompt', (e) => {
    e.preventDefault();
    window.deferredPrompt = e;
    document.getElementById('btn-instalar').hidden = false;
  });

  document.getElementById('btn-instalar').addEventListener('click', async () => {
    if (!window.deferredPrompt) return;
    window.deferredPrompt.prompt();
    await window.deferredPrompt.userChoice;
    window.deferredPrompt = null;
    document.getElementById('btn-instalar').hidden = true;
  });
</script>

iOS es diferente

Safari en iOS no soporta beforeinstallprompt. El usuario debe pulsar "Compartir" → "Añadir a pantalla de inicio". Detecta iOS y muestra instrucciones manuales.

Página offline personalizada¶

// sw.js
self.addEventListener('fetch', (event) => {
  if (event.request.mode === 'navigate') {
    event.respondWith(
      fetch(event.request).catch(() => caches.match('/offline.html'))
    );
  }
});

Precarga /offline.html en el install.

Notificaciones push¶

Requieren permiso del usuario y un servidor que las envíe (con las Push API y VAPID).

const permiso = await Notification.requestPermission();
if (permiso === 'granted') {
  const registro = await navigator.serviceWorker.ready;
  const suscripcion = await registro.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: 'tu-clave-publica-vapid',
  });
  // Envía 'suscripcion' a tu backend
}

No abuses

Las notificaciones push deben ser útiles. Si molestas al usuario, desinstalará la PWA.

Sincronización en segundo plano¶

Permite enviar datos cuando vuelve la conexión.

// En la página
await navigator.serviceWorker.ready;
await registration.sync.register('enviar-pendientes');

// En el sw.js
self.addEventListener('sync', (event) => {
  if (event.tag === 'enviar-pendientes') {
    event.waitUntil(enviarPendientes());
  }
});

Testing de PWA¶

Lighthouse → pestaña Progressive Web App.
Chrome DevTools → Application → Service Workers.
Application → Manifest para revisar el manifest.
Application → Cache Storage para ver qué hay cacheado.

Chrome también tiene un modo "Offline" en DevTools (Network → Offline) para probar sin conexión.

Ejemplo: convertir tu portfolio en PWA¶

Checklist:

[ ] Crear manifest.json con iconos.
[ ] Registrar un Service Worker.
[ ] Cachear assets estáticos.
[ ] Añadir página offline.
[ ] Probar con Lighthouse (score > 90).
[ ] Probar en móvil real.
[ ] Añadir botón "Instalar".

Diagrama: cómo funciona un Service Worker¶

sequenceDiagram
    participant U as Usuario
    participant N as Navegador
    participant SW as Service Worker
    participant C as Caché
    participant S as Servidor

    U->>N: Pide una URL
    N->>SW: Intercepta la petición
    SW->>C: ¿Está en caché?
    alt En caché
        C-->>SW: Sí
        SW-->>N: Sirve desde caché
    else No está
        SW->>S: Pide a la red
        S-->>SW: Respuesta
        SW->>C: Guarda en caché
        SW-->>N: Sirve respuesta
    end
    N-->>U: Muestra la página

El Service Worker se sitúa entre el navegador y la red. Decide qué sirve desde caché (rápido, offline) y qué va a la red.

Buenas prácticas¶

HTTPS siempre. Sin esto no hay PWA.
No caches todo. Elige estrategia por recurso.
Versiona el caché (mi-app-v1, mi-app-v2).
Borra cachés antiguos en el activate.
Actualiza con cuidado. Un Service Worker mal actualizado puede dejar la app rota.
Prueba en móvil real. No todo lo que funciona en DevTools funciona en un dispositivo.
Página offline útil. No un error genérico.
No bloquees la primera visita. La app debe funcionar aunque el SW falle.
Usa Workbox para no reinventar la rueda.

Ejercicios¶

Añade un manifest.json a tu portfolio con iconos de 192 y 512.
Registra un Service Worker y verifica con DevTools.
Cachea assets estáticos con estrategia Cache First.
Añade una página offline personalizada.
Configura vite-plugin-pwa si usas Vite.
Añade un botón "Instalar app" con beforeinstallprompt.
Pasa Lighthouse PWA con score > 90.
Prueba la app en modo avión desde el móvil.

⬅️ Capítulo 21 — Web Components | ➡️ Capítulo 23 — WebSockets ¶

🧠 Pon a prueba tus conocimientos¶

¿Qué archivo JSON describe la aplicación para que el navegador ofrezca instalarla?

¿Qué script se ejecuta en segundo plano para interceptar peticiones y cachear recursos?

Capítulo 23 — WebSockets y tiempo real¶

Introducción¶

HTTP funciona con un modelo petición-respuesta: el cliente pregunta, el servidor responde, la conexión se cierra. Perfecto para la mayoría de casos, pero insuficiente para aplicaciones en tiempo real:

Chats.
Notificaciones instantáneas.
Juegos multijugador.
Edición colaborativa (tipo Google Docs).
Paneles con datos en vivo.

Para eso existen los WebSockets: un canal bidireccional y persistente entre cliente y servidor.

HTTP vs WebSockets¶

Aspecto	HTTP	WebSockets
Dirección	Cliente → Servidor	Bidireccional
Conexión	Se cierra tras cada respuesta	Persistente
Latencia	Alta (handshake cada vez)	Muy baja
Uso típico	Cargar páginas, APIs	Tiempo real

Cómo funciona un WebSocket¶

El cliente envía una petición HTTP especial con Upgrade: websocket.
El servidor acepta (101 Switching Protocols).
La conexión pasa a ser WebSocket: ya no es HTTP.
Ambos lados pueden enviarse mensajes cuando quieran.
La conexión se cierra cuando alguien la cierra o falla la red.

API de WebSocket en el navegador¶

const socket = new WebSocket('wss://api.miapp.com/ws');

socket.addEventListener('open', () => {
  console.log('Conectado');
  socket.send(JSON.stringify({ tipo: 'saludo', nombre: 'Urukais' }));
});

socket.addEventListener('message', (event) => {
  const datos = JSON.parse(event.data);
  console.log('Recibido:', datos);
});

socket.addEventListener('error', (err) => {
  console.error('Error:', err);
});

socket.addEventListener('close', (event) => {
  console.log('Cerrado:', event.code, event.reason);
});

wss vs ws

ws:// → WebSocket sin cifrar (solo para desarrollo).
wss:// → WebSocket sobre TLS (obligatorio en producción).

Enviar y recibir¶

Enviar texto¶

socket.send('Hola servidor');

Enviar JSON¶

socket.send(JSON.stringify({
  tipo: 'mensaje',
  sala: 'general',
  texto: 'Hola a todos',
}));

Mensajes binarios¶

socket.binaryType = 'arraybuffer';
socket.send(new Uint8Array([1, 2, 3]));

Cerrar¶

socket.close(1000, 'Cierre normal');

Reconexión automática¶

Las conexiones se caen. Un buen cliente se reconecta solo, con backoff exponencial para no saturar.

class SocketReconectable {
  #url;
  #socket;
  #intentos = 0;
  #maxIntentos = 5;

  constructor(url) {
    this.#url = url;
    this.#conectar();
  }

  #conectar() {
    this.#socket = new WebSocket(this.#url);

    this.#socket.addEventListener('open', () => {
      this.#intentos = 0;
      console.log('Conectado');
    });

    this.#socket.addEventListener('close', () => {
      if (this.#intentos < this.#maxIntentos) {
        const espera = 2 ** this.#intentos * 1000;
        console.log(`Reintentando en ${espera}ms`);
        setTimeout(() => {
          this.#intentos++;
          this.#conectar();
        }, espera);
      }
    });
  }

  enviar(datos) {
    if (this.#socket.readyState === WebSocket.OPEN) {
      this.#socket.send(JSON.stringify(datos));
    }
  }
}

Servidor WebSocket con Node.js¶

Usaremos la librería ws, la más popular y ligera.

Instalación¶

npm install ws

Servidor básico¶

// server.js
import { WebSocketServer } from 'ws';

const wss = new WebSocketServer({ port: 8080 });

wss.on('connection', (socket) => {
  console.log('Cliente conectado');

  socket.on('message', (data) => {
    const mensaje = data.toString();
    console.log('Recibido:', mensaje);

    // Eco al mismo cliente
    socket.send(`Eco: ${mensaje}`);
  });

  socket.on('close', () => {
    console.log('Cliente desconectado');
  });
});

Ejecuta con node server.js y prueba desde el navegador con new WebSocket('ws://localhost:8080').

Difusión a todos (broadcast)¶

wss.on('connection', (socket) => {
  socket.on('message', (data) => {
    // Reenviar a todos los clientes conectados
    wss.clients.forEach((cliente) => {
      if (cliente.readyState === cliente.OPEN) {
        cliente.send(data.toString());
      }
    });
  });
});

Salas (rooms)¶

Para chats con varios canales, agrupa clientes en salas.

const salas = new Map(); // sala -> Set de sockets

wss.on('connection', (socket) => {
  socket.on('message', (raw) => {
    const msg = JSON.parse(raw);

    if (msg.tipo === 'unirse') {
      if (!salas.has(msg.sala)) salas.set(msg.sala, new Set());
      salas.get(msg.sala).add(socket);
      socket.sala = msg.sala;
    }

    if (msg.tipo === 'mensaje') {
      const miembros = salas.get(socket.sala) || new Set();
      miembros.forEach((s) => {
        if (s.readyState === s.OPEN) {
          s.send(JSON.stringify({ tipo: 'mensaje', de: msg.de, texto: msg.texto }));
        }
      });
    }
  });

  socket.on('close', () => {
    if (socket.sala) salas.get(socket.sala)?.delete(socket);
  });
});

Integrar WebSocket con HTTP¶

Lo habitual es HTTP para la API y WebSocket para eventos en vivo. Ambos conviven en el mismo servidor.

import http from 'node:http';
import express from 'express';
import { WebSocketServer } from 'ws';

const app = express();
app.get('/api/salud', (req, res) => res.json({ ok: true }));

const server = http.createServer(app);
const wss = new WebSocketServer({ server });

wss.on('connection', (socket) => {
  socket.send(JSON.stringify({ tipo: 'bienvenida' }));
});

server.listen(3000, () => console.log('http://localhost:3000'));

El cliente se conecta a ws://localhost:3000 y la API sigue en http://localhost:3000/api/....

Socket.IO: la alternativa con esteroides¶

Socket.IO no es WebSocket puro; es una capa sobre WebSocket que añade:

Fallback a long-polling si WebSocket falla.
Reconexión automática.
Salas y namespaces ya implementados.
Emisión con acks (confirmaciones).

Instalación¶

npm install socket.io socket.io-client

Servidor¶

import { Server } from 'socket.io';
import http from 'node:http';
import express from 'express';

const app = express();
const server = http.createServer(app);
const io = new Server(server, {
  cors: { origin: 'http://localhost:5173' },
});

io.on('connection', (socket) => {
  console.log('Conectado:', socket.id);

  socket.on('unirse', (sala) => {
    socket.join(sala);
  });

  socket.on('mensaje', ({ sala, texto }) => {
    io.to(sala).emit('mensaje', { texto, autor: socket.id });
  });

  socket.on('disconnect', () => {
    console.log('Desconectado:', socket.id);
  });
});

server.listen(3000);

Cliente¶

import { io } from 'socket.io-client';

const socket = io('http://localhost:3000');

socket.emit('unirse', 'general');

socket.on('mensaje', (msg) => {
  console.log(`${msg.autor}: ${msg.texto}`);
});

socket.emit('mensaje', { sala: 'general', texto: 'Hola' });

¿WebSocket puro o Socket.IO?

WebSocket puro: más control, protocolo estándar, ideal para APIs públicas.
Socket.IO: más cómodo, reconexión y salas incluidas, ideal para apps propias.

Autenticación¶

WebSocket no tiene cabeceras HTTP, así que la autenticación se hace de otras formas.

Token en la URL¶

const socket = new WebSocket(`wss://api.miapp.com/ws?token=${jwt}`);

// Servidor
wss.on('connection', (socket, req) => {
  const url = new URL(req.url, 'http://localhost');
  const token = url.searchParams.get('token');

  try {
    socket.usuario = jwt.verify(token, process.env.JWT_SECRET);
  } catch {
    socket.close(4001, 'Token inválido');
  }
});

Primer mensaje de autenticación¶

socket.onopen = () => {
  socket.send(JSON.stringify({ tipo: 'auth', token: jwt }));
};

El servidor espera al primer mensaje antes de aceptar cualquier otra acción.

Nunca autentiques sin verificar

Un WebSocket abierto sin autenticación es una puerta abierta. Verifica siempre el token al conectar.

Casos de uso reales¶

Chat en tiempo real¶

Salas por conversación.
Mensajes con timestamp.
Indicador de "escribiendo…".
Historial persistido en BD.

Notificaciones¶

Nuevo mensaje, nueva venta, nueva alerta.
El servidor hace emit a un usuario concreto.
El cliente muestra la notificación.

Panel en vivo¶

KPIs que se actualizan al instante.
Actualizaciones push cuando cambia algo en el servidor.
Mejor que hacer polling cada 5 s.

Edición colaborativa¶

Varios usuarios editan el mismo documento.
Los cambios se sincronizan vía WebSocket.
Combina con CRDTs (Yjs, Automerge) para resolver conflictos.

Alternativas a WebSocket¶

Tecnología	Dirección	Uso
WebSocket	Bidireccional	Uso general tiempo real
SSE (Server-Sent Events)	Servidor → Cliente	Notificaciones unidireccionales
Long polling	Cliente → Servidor (simulado)	Fallback legacy
WebRTC	Peer-to-peer	Audio, vídeo, datos P2P
MQTT	Bidireccional (broker)	IoT

Server-Sent Events (SSE)¶

Unidireccional, más simple que WebSocket si solo necesitas que el servidor empuje datos.

// Servidor
app.get('/eventos', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');

  const intervalo = setInterval(() => {
    res.write(`data: ${JSON.stringify({ hora: new Date() })}\n\n`);
  }, 1000);

  req.on('close', () => clearInterval(intervalo));
});

// Cliente
const eventos = new EventSource('/eventos');
eventos.onmessage = (e) => console.log(JSON.parse(e.data));

Diagrama: HTTP vs WebSocket¶

sequenceDiagram
    participant C as Cliente
    participant S as Servidor

    Note over C,S: HTTP: conexión por cada petición
    C->>S: Petición 1
    S-->>C: Respuesta 1
    C->>S: Petición 2
    S-->>C: Respuesta 2

    Note over C,S: WebSocket: conexión persistente
    C->>S: Handshake (Upgrade)
    S-->>C: 101 Switching Protocols
    C->>S: Mensaje
    S-->>C: Mensaje
    S-->>C: Mensaje push
    C->>S: Mensaje

Con HTTP cada petición abre y cierra conexión. Con WebSocket la conexión permanece abierta y ambos lados pueden enviar mensajes cuando quieran.

Buenas prácticas¶

HTTPS/WSS siempre en producción.
Autentica al conectar. Un WebSocket abierto es un agujero de seguridad.
Reconecta con backoff exponencial. Evita tormentas de reconexión.
Limita el tamaño de los mensajes. Los WebSockets no son para enviar archivos grandes.
Heartbeat (ping/pong). Detecta conexiones muertas.
Escala con Redis pub/sub si tienes varias instancias del servidor.
Cierra conexiones inactivas tras un tiempo.
Registra eventos para diagnóstico.
Cuidado con la seguridad: valida todo lo que llega.

Ejemplo: chat mínimo completo¶

Servidor¶

import { WebSocketServer } from 'ws';

const wss = new WebSocketServer({ port: 8080 });
const clientes = new Set();

wss.on('connection', (socket) => {
  clientes.add(socket);

  socket.on('message', (raw) => {
    const msg = JSON.parse(raw);
    const salida = JSON.stringify({
      autor: msg.autor,
      texto: msg.texto,
      hora: Date.now(),
    });
    clientes.forEach((c) => {
      if (c.readyState === c.OPEN) c.send(salida);
    });
  });

  socket.on('close', () => clientes.delete(socket));
});

Cliente¶

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Chat</title>
</head>
<body>
  <ul id="mensajes"></ul>
  <form id="form">
    <input id="texto" placeholder="Escribe..." autocomplete="off">
    <button>Enviar</button>
  </form>

  <script>
    const socket = new WebSocket('ws://localhost:8080');
    const ul = document.getElementById('mensajes');
    const form = document.getElementById('form');
    const input = document.getElementById('texto');

    socket.onmessage = (e) => {
      const msg = JSON.parse(e.data);
      const li = document.createElement('li');
      li.textContent = `${msg.autor}: ${msg.texto}`;
      ul.appendChild(li);
    };

    form.addEventListener('submit', (e) => {
      e.preventDefault();
      socket.send(JSON.stringify({ autor: 'Urukais', texto: input.value }));
      input.value = '';
    });
  </script>
</body>
</html>

Ejercicios¶

Crea un servidor WebSocket que haga eco de los mensajes.
Añade broadcast: cada mensaje se reenvía a todos los clientes.
Implementa salas: los mensajes solo van a los de la misma sala.
Añade reconexión automática con backoff exponencial al cliente.
Autentica el WebSocket con un JWT en el primer mensaje.
Añade un indicador de "escribiendo…" en el chat.
Persiste el historial de mensajes en PostgreSQL.
Despliega en Railway y prueba con dos navegadores distintos.

⬅️ Capítulo 22 — Progressive Web Apps | ➡️ Capítulo 24 — Animaciones avanzadas

🧠 Pon a prueba tus conocimientos¶

¿Cuál es la principal diferencia entre HTTP y WebSocket?

Capítulo 24 — Animaciones avanzadas¶

Introducción¶

Una animación bien hecha mejora la experiencia. Una mal hecha la arruina. Este capítulo cubre las técnicas que usan los equipos profesionales para animar interfaces fluidas, accesibles y con buen rendimiento.

Principios de animación¶

Antes de tocar código, entiende qué comunicar:

Feedback: confirmar que algo ha pasado (un botón pulsado).
Continuidad: mostrar de dónde viene y a dónde va un elemento.
Jerarquía: dirigir la atención a lo importante.
Personalidad: dar carácter al producto.

Los 12 principios (adaptados a UI)¶

Los 12 principios de la animación clásica (Disney) se aplican también a la web:

Principio	En UI significa…
Squash & stretch	Botones que "rebotan" ligeramente al pulsar
Anticipación	Un modal que aparece desde abajo antes de mostrarse
Staging	Oscurecer el fondo al abrir un diálogo
Follow through	Un menú que se cierra con inercia
Ease in/out	Casi toda transición en UI
Arcs	Movimientos naturales, no lineales
Timing	200-300 ms para transiciones típicas
Exaggeration	Ligeramente más dramático para que se note
Solid drawing	Formas coherentes y predecibles
Appeal	Que se sienta bien

Reglas de oro¶

150-300 ms para transiciones de UI. Más rápido = brusco, más lento = pesado.
Ease-out para entradas (rápido al principio, lento al final).
Ease-in para salidas.
Ease-in-out para cambios continuos.
Nunca animes width, height, top, left. Usa transform y opacity.
Respeta prefers-reduced-motion.
No animes todo. Menos es más.

Transiciones CSS¶

La forma más simple de animar cambios de estado.

.boton {
  background: #6a5acd;
  transition: background 200ms ease-out, transform 150ms ease-out;
}

.boton:hover {
  background: #5b4bc4;
  transform: translateY(-2px);
}

Timing functions¶

transition-timing-function: ease;         /* por defecto */
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-timing-function: steps(4, end);

Cubic-bezier a medida¶

/* "Back out": rebote al final */
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);

/* "Expo out": muy suave al final */
transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);

Puedes diseñarlas en cubic-bezier.com.

`@keyframes`¶

Para animaciones más complejas.

@keyframes girar {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spinner {
  animation: girar 1s linear infinite;
}

Sintaxis completa¶

.elemento {
  animation-name: entrar;
  animation-duration: 400ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-delay: 100ms;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;
}

/* Forma corta */
.elemento {
  animation: entrar 400ms cubic-bezier(0.16, 1, 0.3, 1) 100ms 1 normal both running;
}

`animation-fill-mode`¶

none: por defecto, vuelve al estado original.
forwards: mantiene el estado final.
backwards: aplica el estado inicial durante el delay.
both: ambos.

Transform: el rey del rendimiento¶

transform se ejecuta en la GPU, no en la CPU. Es la forma más rápida de mover cosas.

Transformaciones básicas¶

transform: translateX(100px);
transform: translateY(-50%);
transform: scale(1.2);
transform: rotate(45deg);
transform: skew(10deg);

/* Combinadas */
transform: translate(50px, 20px) rotate(15deg) scale(1.1);

El orden importa

translate(...) rotate(...) y rotate(...) translate(...) dan resultados distintos. Prueba ambos.

`transform-origin`¶

Cambia el punto de referencia:

transform-origin: center;   /* por defecto */
transform-origin: top left;
transform-origin: 50% 100%;

`will-change`¶

Avisa al navegador de que un elemento va a cambiar, para que lo prepare con antelación.

.menu {
  will-change: transform;
}

Úsalo con cabeza

Abusar de will-change empeora el rendimiento porque consume memoria. Úsalo solo en elementos que realmente van a animarse, y quítalo cuando termine.

Web Animations API (WAAPI)¶

Alternativa a CSS con más control desde JavaScript.

const elemento = document.querySelector('.caja');

elemento.animate(
  [
    { transform: 'translateX(0)', opacity: 1 },
    { transform: 'translateX(200px)', opacity: 0 },
  ],
  {
    duration: 400,
    easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
    fill: 'forwards',
  }
);

Control total¶

const animacion = elemento.animate(keyframes, opciones);

animacion.pause();
animacion.play();
animacion.reverse();
animacion.cancel();

animacion.onfinish = () => console.log('Terminada');

Ventajas¶

No requiere tocar CSS.
Control en tiempo real.
Se ejecuta en el compositor (rendimiento como CSS).
Componible con Promise (animacion.finished).

Transiciones entre estados con Vue/React¶

En Vue, el componente <Transition> gestiona clases automáticamente.

<template>
  <Transition name="fade">
    <div v-if="visible" class="modal">Contenido</div>
  </Transition>
</template>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 300ms ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

En React, usa Framer Motion o react-transition-group.

import { motion, AnimatePresence } from 'framer-motion';

<AnimatePresence>
  {visible && (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -20 }}
      transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
    >
      Contenido
    </motion.div>
  )}
</AnimatePresence>

Animaciones basadas en scroll¶

`IntersectionObserver`¶

Detecta cuándo un elemento entra en el viewport.

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
      observer.unobserve(entry.target); // una sola vez
    }
  });
}, { threshold: 0.15 });

document.querySelectorAll('.animar').forEach((el) => observer.observe(el));

.animar {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}

.animar.visible {
  opacity: 1;
  transform: translateY(0);
}

`scroll-timeline` (CSS)¶

Nueva API que permite ligar animaciones al scroll sin JavaScript.

@keyframes entrar {
  from { opacity: 0; transform: translateY(50px); }
  to { opacity: 1; transform: translateY(0); }
}

.animar {
  animation: entrar linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 60%;
}

Soporte

scroll-timeline está disponible en Chrome/Edge desde 2023. Firefox y Safari van llegando. Úsalo con @supports como mejora progresiva.

View Transitions API¶

Permite transiciones fluidas entre páginas o entre estados sin JavaScript complejo.

document.startViewTransition(() => {
  // Actualiza el DOM
  document.body.innerHTML = nuevoHTML;
});

::view-transition-old(root) {
  animation: fade-out 300ms ease-out;
}

::view-transition-new(root) {
  animation: fade-in 300ms ease-in;
}

Ideal para SPAs, listas que se reordenan o modales que se expanden desde un botón.

Animaciones de listas (FLIP)¶

FLIP = First, Last, Invert, Play. Técnica para animar cambios de posición de elementos.

First: guarda la posición inicial.
Last: cambia el DOM y guarda la posición final.
Invert: aplica un transform para simular que sigue en la posición inicial.
Play: quita el transform con una transición.

function animarReordenado(contenedor) {
  const items = [...contenedor.children];

  const antes = new Map();
  items.forEach((el) => antes.set(el, el.getBoundingClientRect()));

  // ... reordena los items en el DOM ...

  items.forEach((el) => {
    const antesRect = antes.get(el);
    const despuesRect = el.getBoundingClientRect();

    const deltaX = antesRect.left - despuesRect.left;
    const deltaY = antesRect.top - despuesRect.top;

    if (deltaX || deltaY) {
      el.animate(
        [
          { transform: `translate(${deltaX}px, ${deltaY}px)` },
          { transform: 'translate(0, 0)' },
        ],
        { duration: 300, easing: 'cubic-bezier(0.16, 1, 0.3, 1)' }
      );
    }
  });
}

Framer Motion y Vue lo implementan por debajo.

Microinteracciones¶

Pequeñas animaciones que dan vida a la interfaz:

Un botón que se hunde al pulsarlo (scale(0.96)).
Un icono que gira al pasar el ratón.
Un check que se dibuja con stroke-dasharray.
Un campo que cambia de color al enfocarlo.
Un "me gusta" que late al pulsarlo.

.boton:active {
  transform: scale(0.96);
  transition: transform 80ms;
}

@keyframes latir {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.corazon.pulsado {
  animation: latir 300ms ease-out;
  color: #dc2626;
}

Accesibilidad y `prefers-reduced-motion`¶

Nunca olvides respetar la preferencia del usuario.

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

O selectivo: deja las animaciones sutiles y desactiva las grandes.

@media (prefers-reduced-motion: reduce) {
  .animacion-grande { animation: none; }
}

Rendimiento¶

Qué es barato de animar¶

Propiedad	Coste
`transform`	⚡⚡⚡ GPU, muy rápido
`opacity`	⚡⚡⚡ GPU, muy rápido
`filter`	⚡⚡ GPU
`background-color`	⚡ CPU
`width/height`	🐌 Refow, lento
`top/left`	🐌 Refow, lento
`box-shadow`	🐌 Repaint, lento

Evita el "jank"¶

Anima solo transform y opacity.
No animes box-shadow. Usa un pseudo-elemento con opacity.
Usa will-change con moderación.
Comprueba con DevTools → Performance.

/* ❌ Mal: repinta en cada frame */
.boton:hover {
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

/* ✅ Bien: sombra pre-renderizada, solo cambia opacidad */
.boton::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 200ms;
  border-radius: inherit;
  pointer-events: none;
}
.boton:hover::after {
  opacity: 1;
}

Librerías recomendadas¶

Motion One — WAAPI con esteroides, ~3 KB.
Framer Motion — estándar en React.
GSAP — el más potente, ideal para animaciones complejas.
AutoAnimate — cero config, anima listas automáticamente.
Lottie — animaciones vectoriales desde After Effects.

Diagrama: pipeline de renderizado¶

flowchart LR
    A[JavaScript] --> B[Style]
    B --> C[Layout]
    C --> D[Paint]
    D --> E[Composite]

    style A fill:#dc2626,color:white
    style E fill:#16a34a,color:white

Animar transform y opacity salta directo a Composite (barato). Animar width o top obliga a recalcular Layout y Paint (caro).

Buenas prácticas¶

Empieza por entender el objetivo antes de animar.
150-300 ms para la mayoría de transiciones.
ease-out para entradas, ease-in para salidas.
Anima transform y opacity. Casi nunca otros.
Respeta prefers-reduced-motion.
No animes en cascada 50 elementos. Es mareante.
Prueba en móvil de gama baja.
Un <details> no necesita 3 animaciones.
Usa will-change solo cuando sea necesario.

Ejercicios¶

Crea un botón con hover y active usando solo transform.
Implementa un spinner de carga con @keyframes.
Anima la entrada de elementos al hacer scroll con IntersectionObserver.
Reproduce la animación "me gusta" con scale y @keyframes.
Usa la Web Animations API para reproducir una animación programáticamente.
Implementa un modal con transición de apertura y cierre.
Añade prefers-reduced-motion y comprueba que las animaciones se desactivan.
Mide el rendimiento en DevTools → Performance y anota el FPS.

⬅️ Capítulo 23 — WebSockets | ➡️ Capítulo 25 — Design systems ¶

🧠 Pon a prueba tus conocimientos¶

¿Qué propiedades CSS son las más eficientes de animar (mejor rendimiento)?

¿Qué media query respeta la preferencia del usuario de reducir el movimiento?

Capítulo 25 — Design systems¶

Introducción¶

Un design system es un conjunto de decisiones compartidas sobre diseño y código: colores, tipografía, espaciado, componentes reutilizables, patrones de interacción y reglas de uso.

No es una librería de componentes. No es una guía de estilo. Es todo junto y, sobre todo, es un producto vivo que evoluciona con el equipo.

Empresas como Airbnb, Shopify, GitHub, Stripe o IBM tienen design systems públicos. No es casualidad: ahorran tiempo, evitan inconsistencias y aceleran a los equipos.

¿Por qué importa?¶

Sin design system¶

Cada desarrollador elige colores distintos.
Los botones tienen 8 tamaños diferentes.
Los espaciados son aleatorios.
Cada nuevo proyecto empieza de cero.
Diseño y desarrollo se pisan constantemente.

Con design system¶

Consistencia visual en todos los productos.
Velocidad: los componentes ya existen.
Documentación viva: el equipo sabe qué usar y cuándo.
Onboarding rápido: nuevos miembros entienden las reglas.
Escalabilidad: sirve para una web, una app y un panel.

Anatomía de un design system¶

Un design system completo incluye:

Fundamentos (design tokens): colores, tipografía, espaciado, radios, sombras.
Componentes: botones, inputs, tarjetas, modales…
Patrones: formularios, navegación, layouts.
Reglas de uso: cuándo usar cada cosa.
Documentación: guías escritas.
Código: implementación en tu stack.
Gobernanza: cómo evoluciona y quién decide.

Design tokens¶

Los tokens son las unidades mínimas del sistema: valores con nombre.

Colores¶

:root {
  /* Primarios */
  --color-primary-50:  #faf5ff;
  --color-primary-100: #f3e8ff;
  --color-primary-300: #d8b4fe;
  --color-primary-500: #a855f7;
  --color-primary-700: #7e22ce;
  --color-primary-900: #581c87;

  /* Semánticos */
  --color-bg:      #ffffff;
  --color-surface: #f8fafc;
  --color-text:    #1e293b;
  --color-muted:   #64748b;
  --color-border:  #e2e8f0;

  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-danger:  #dc2626;
  --color-info:    #0891b2;
}

Tokens semánticos > tokens primitivos

Usa --color-primary-500 para definir la paleta, pero en componentes usa --color-bg o --color-text. Así puedes cambiar el tema sin tocar componentes.

Tipografía¶

:root {
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", monospace;

  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
}

Espaciado¶

Escala basada en múltiplos de 4:

:root {
  --space-1:  0.25rem;  /* 4px */
  --space-2:  0.5rem;   /* 8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
}

Radios, sombras y transiciones¶

:root {
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  20px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.12);

  --transition-fast: 150ms ease-out;
  --transition-base: 250ms ease-out;
  --transition-slow: 400ms ease-out;
}

Documentar los tokens¶

Un token sin contexto no sirve. Cada uno debería responder:

Qué es: un color, un espacio, una sombra.
Cuándo usarlo: en este contexto concreto.
Cuándo NO usarlo: para evitar malos usos.
Ejemplo: en el código real.

Ejemplo de documentación:

### `--color-primary-500`

**Tipo**: Color · **Uso**: acciones principales.

Úsalo para el fondo de botones primarios, enlaces activos y elementos destacados.

**No usar** para texto largo sobre fondo blanco: no pasa contraste AA.

```css
.button-primary {
  background: var(--color-primary-500);
  color: white;
}

## Componentes

Cada componente debe:

- **Ser configurable** mediante props/atributos.
- **Tener un estado por defecto**.
- **Ser accesible** (teclado, ARIA, contraste).
- **Estar documentado** con ejemplos.
- **Estar testeado**.

### Ejemplo: botón

```css
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.btn:active {
  transform: scale(0.98);
}

.btn:focus-visible {
  outline: 3px solid var(--color-primary-300);
  outline-offset: 2px;
}

/* Variantes */
.btn--primary {
  background: var(--color-primary-500);
  color: white;
}
.btn--primary:hover {
  background: var(--color-primary-700);
}

.btn--secondary {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.btn--danger {
  background: var(--color-danger);
  color: white;
}

/* Tamaños */
.btn--sm { padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }
.btn--lg { padding: var(--space-3) var(--space-6); font-size: var(--text-lg); }

Uso:

<button class="btn btn--primary">Guardar</button>
<button class="btn btn--secondary btn--sm">Cancelar</button>
<button class="btn btn--danger btn--lg">Eliminar cuenta</button>

Ejemplo: tarjeta¶

.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card__title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  margin: 0 0 var(--space-2);
}

.card__body {
  color: var(--color-muted);
  line-height: var(--leading-normal);
}

Modo oscuro con tokens¶

Gracias a los tokens, cambiar de tema es trivial:

:root {
  --color-bg: #ffffff;
  --color-surface: #f8fafc;
  --color-text: #1e293b;
  --color-muted: #64748b;
  --color-border: #e2e8f0;
}

[data-theme="dark"] {
  --color-bg: #0f172a;
  --color-surface: #1e293b;
  --color-text: #e2e8f0;
  --color-muted: #94a3b8;
  --color-border: #334155;
}

Cambio desde JavaScript:

document.documentElement.dataset.theme = 'dark';

Todo el sitio se adapta automáticamente porque los componentes usan tokens semánticos.

Estructura de un design system¶

design-system/
├── tokens/
│   ├── colors.css
│   ├── typography.css
│   ├── spacing.css
│   └── index.css
├── components/
│   ├── button/
│   │   ├── button.css
│   │   ├── button.js
│   │   └── button.stories.js
│   ├── input/
│   └── card/
├── patterns/
│   ├── form/
│   └── navigation/
├── utils/
├── docs/
└── README.md

Herramientas¶

Storybook¶

El estándar para documentar y probar componentes de forma aislada.

npx storybook@latest init

// button.stories.js
import { html } from 'lit';

export default {
  title: 'Componentes/Button',
  argTypes: {
    variant: { control: 'select', options: ['primary', 'secondary', 'danger'] },
    size: { control: 'select', options: ['sm', 'md', 'lg'] },
  },
};

const Template = ({ variant, size, label }) => html`
  <button class="btn btn--${variant} btn--${size}">${label}</button>
`;

export const Primary = Template.bind({});
Primary.args = { variant: 'primary', size: 'md', label: 'Guardar' };

export const Danger = Template.bind({});
Danger.args = { variant: 'danger', size: 'md', label: 'Eliminar' };

Style Dictionary¶

Convierte tokens definidos en JSON a CSS, SCSS, iOS, Android…

{
  "color": {
    "primary": {
      "500": { "value": "#a855f7" },
      "700": { "value": "#7e22ce" }
    }
  }
}

npx style-dictionary build

Chromatic¶

Servicio de visual regression testing para Storybook. Detecta cambios visuales no intencionados en cada PR.

Gobernanza¶

Un design system sin reglas se pudre. Define:

Quién mantiene el sistema.
Cómo se proponen cambios (issue, PR, RFC).
Cómo se versiona (SemVer: el sistema es un producto).
Cómo se comunica (changelog, newsletter interna).
Cómo se mide el uso (analytics de componentes).

Un patrón común es Figma + GitHub + Storybook:

Diseño en Figma.
Tokens sincronizados a código.
Componentes documentados en Storybook.
Cambios revisados por PR.

Design systems famosos¶

Estudia los que ya existen:

Material Design — Google.
Carbon — IBM.
Polaris — Shopify.
Primer — GitHub.
Atlassian Design System.
Adobe Spectrum.
GOV.UK Design System — referencia en accesibilidad.

Buenas prácticas¶

Empieza pequeño. No intentes cubrir todo el producto el primer día.
Tokens primero. Antes de componentes.
Componentes accesibles. Nunca sacrifiques a11y por estética.
Documenta el porqué, no solo el cómo.
Versiona con SemVer. Los cambios rompen proyectos.
Mide el uso. Si un componente no se usa, cuestiónalo.
Un componente, una responsabilidad.
Consistencia > perfección.
Itera. Un design system nunca está "terminado".
Adóptalo tú primero. Si tu propio equipo no lo usa, nadie lo hará.

Ejercicios¶

Define tus tokens: 10 colores, 8 tamaños de tipografía, 8 espaciados.
Aplica tokens a un componente Button con 3 variantes y 3 tamaños.
Añade modo oscuro cambiando solo los tokens semánticos.
Documenta un componente con Storybook (o página HTML estática).
Crea una página /design-system en tu web con todos los componentes.
Publica tus tokens con Style Dictionary en CSS y SCSS.
Establece una regla: "todo color debe venir de un token".
Revisa un proyecto tuyo y sustituye valores sueltos por tokens.

⬅️ Capítulo 24 — Animaciones avanzadas | ➡️ Apéndices ¶

🧠 Pon a prueba tus conocimientos¶

¿Qué son los "design tokens"?

¿Qué regla CSS permite controlar el orden de precedencia sin depender de la especificidad?

Nivel élite

Capítulo 26 — Seguridad web¶

Introducción¶

La seguridad no es un extra que se añade al final. Es parte del desarrollo desde la primera línea de código. Una web insegura expone a los usuarios, daña la reputación y puede tener consecuencias legales.

Este capítulo repasa las vulnerabilidades más comunes y cómo protegerte de ellas.

Los tres pilares¶

Confidencialidad: solo quien debe ver los datos, los ve.
Integridad: los datos no se modifican sin permiso.
Disponibilidad: la web funciona cuando se necesita.

HTTPS siempre¶

Todo el tráfico debe ir cifrado con TLS. Sin HTTPS:

Los datos viajan en texto plano.
Los navegadores marcan tu web como "no segura".
Google penaliza tu SEO.

GitHub Pages, Netlify, Vercel y Cloudflare activan HTTPS automáticamente. Activa HSTS (Strict-Transport-Security) para forzar siempre HTTPS.

Strict-Transport-Security: max-age=31536000; includeSubDomains

OWASP Top 10¶

La OWASP publica cada año la lista de las vulnerabilidades más críticas. Estas son las principales para desarrollo web:

#	Vulnerabilidad	Ejemplo
1	Control de acceso roto	Acceder a `/admin` sin permisos
2	Fallos criptográficos	Guardar contraseñas sin hash
3	Inyección	SQL, comandos del sistema
4	Diseño inseguro	Lógica de negocio mal planteada
5	Configuración incorrecta	Servidor con defaults expuestos
6	Componentes vulnerables	Dependencias desactualizadas
7	Fallos de autenticación	Fuerza bruta, sesiones mal gestionadas
8	Fallos de integridad	Actualizaciones sin firma
9	Fallos de logging	No detectar ataques
10	SSRF	Forzar el servidor a hacer peticiones

XSS (Cross-Site Scripting)¶

Ocurre cuando un atacante inyecta JavaScript en tu página.

Ejemplo vulnerable¶

// NUNCA hagas esto
const nombre = new URLSearchParams(location.search).get('nombre');
document.getElementById('saludo').innerHTML = `Hola, ${nombre}`;

Si alguien visita:

https://tuweb.com/?nombre=<script>robarCookies()</script>

El script se ejecuta en el navegador de la víctima.

Cómo protegerte¶

1. Usa textContent en lugar de innerHTML:

// Seguro
document.getElementById('saludo').textContent = `Hola, ${nombre}`;

2. Escapa el HTML:

function escapeHTML(str) {
  return str.replace(/[&<>"']/g, (c) => ({
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#39;',
  })[c]);
}

3. Usa Content Security Policy (CSP):

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://trusted.cdn.com">

CSP es una cabecera que le dice al navegador qué fuentes puede cargar. Bloquea scripts inyectados.

CSRF (Cross-Site Request Forgery)¶

El atacante hace que el navegador de la víctima envíe una petición a tu servidor sin que se dé cuenta.

Ejemplo: un <img> en una web maliciosa hace una petición a tubanco.com/transferir?cantidad=1000&destino=atacante.

Cómo protegerte¶

1. Tokens CSRF:

<form method="POST" action="/transferir">
  <input type="hidden" name="csrf_token" value="{{ token }}">
  <!-- ... -->
</form>

El servidor verifica que el token coincide con la sesión.

2. Cookies SameSite:

Set-Cookie: session=abc; SameSite=Strict; Secure; HttpOnly

SameSite=Strict: no se envía desde otros sitios.
HttpOnly: no accesible desde JavaScript.
Secure: solo por HTTPS.

Inyección SQL¶

Ocurre cuando concatenas input del usuario en una query SQL.

Vulnerable¶

// NUNCA
const query = `SELECT * FROM usuarios WHERE email = '${email}'`;

Si email es ' OR '1'='1, devuelve todos los usuarios.

Seguro (con consultas parametrizadas)¶

const query = 'SELECT * FROM usuarios WHERE email = $1';
const resultado = await db.query(query, [email]);

Con Prisma o Sequelize ya estás protegido si usas su API normal.

Autenticación segura¶

Contraseñas¶

Mínimo 8 caracteres (mejor 12+).
Hash con bcrypt, argon2 o scrypt. Nunca SHA-256 directo.
Salt único por usuario (bcrypt lo hace solo).

import bcrypt from 'bcrypt';

const hash = await bcrypt.hash(password, 12);
const ok = await bcrypt.compare(password, hash);

Rate limiting¶

Evita ataques de fuerza bruta.

import rateLimit from 'express-rate-limit';

app.use('/api/login', rateLimit({
  windowMs: 15 * 60 * 1000,
  max: 5,
  message: 'Demasiados intentos. Prueba en 15 minutos.',
}));

2FA (autenticación en dos pasos)¶

Siempre que puedas, ofrécelo. Con TOTP (Google Authenticator, Authy) o WebAuthn.

Gestión de secretos¶

Nunca metas claves en el código.
Nunca subas .env a Git.
Usa variables de entorno en el hosting.
Rota claves periódicamente.
Usa gestores como Vault, AWS Secrets Manager o Doppler.

.gitignore:

.env
.env.local
*.pem

Cabeceras de seguridad¶

Configura estas cabeceras en tu servidor:

Content-Security-Policy: default-src 'self'
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy: camera=(), microphone=(), geolocation=()
Strict-Transport-Security: max-age=31536000; includeSubDomains

En Nginx:

add_header X-Frame-Options "DENY" always;
add_header X-Content-Type-Options "nosniff" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
add_header Permissions-Policy "camera=(), microphone=()" always;

Dependencias¶

La mayoría de vulnerabilidades vienen de dependencias desactualizadas.

npm audit
npm audit fix

Activa Dependabot en GitHub para PRs automáticos:

version: 2
updates:
  - package-ecosystem: npm
    directory: /
    schedule:
      interval: weekly

Herramientas: Snyk, Socket.dev.

Validación en cliente y servidor¶

Todo input del usuario es malicioso por defecto.

Valida siempre en el servidor.
La validación en cliente (HTML5, JS) es solo UX.
Usa Zod o Joi para validar schemas.

import { z } from 'zod';

const schema = z.object({
  email: z.string().email(),
  edad: z.number().int().min(0).max(120),
});

const resultado = schema.safeParse(req.body);
if (!resultado.success) return res.status(400).json(resultado.error);

Diagrama: capas de seguridad¶

flowchart TB
    A[Usuario] -->|HTTPS| B[CDN / Firewall]
    B --> C[Servidor]
    C -->|Validación Zod| D[Backend]
    D -->|Sanitización| E[(Base de datos)]

    style A fill:#a78bfa,color:white
    style E fill:#dc2626,color:white

Cada capa añade una defensa: HTTPS cifra, el CDN filtra, el servidor valida, el backend sanitiza y la base de datos almacena.

Buenas prácticas¶

HTTPS en todo el sitio, sin excepciones.
Nunca confíes en el cliente. Valida siempre en servidor.
Hashes con bcrypt/argon2 para contraseñas.
Consultas parametrizadas para SQL.
CSP + cabeceras de seguridad.
Rate limiting en endpoints sensibles.
Actualiza dependencias semanalmente.
Rota secretos periódicamente.
Logs de seguridad: registra intentos fallidos de login.
Backups regulares de bases de datos.
Principio de mínimo privilegio: cada usuario solo lo necesario.

Herramientas de auditoría¶

OWASP ZAP — escáner de vulnerabilidades.
Lighthouse — incluye auditoría de seguridad.
Security Headers — analiza tus cabeceras.
SSL Labs — evalúa tu TLS.
Have I Been Pwned — verifica filtraciones.

Ejercicios¶

Audita tu web con securityheaders.com y corrige lo que falte.
Reemplaza todos los innerHTML de tu código por textContent o escapado.
Añade rate limiting a un endpoint de login.
Configura CSP en tu servidor.
Ejecuta npm audit en un proyecto y actualiza dependencias.
Añade autenticación con bcrypt a una API.
Activa Dependabot en un repo de GitHub.

⬅️ Capítulo 25 — Design systems | ➡️ Capítulo 27 — WebAssembly

Diagrama: capas de seguridad¶

style A fill:#a78bfa,color:white
style E fill:#dc2626,color:white

```

Cada capa añade una defensa: HTTPS cifra, el CDN filtra, el servidor valida, el backend sanitiza y la base de datos almacena.¶

🧠 Pon a prueba tus conocimientos¶

¿Qué tipo de ataque inyecta código JavaScript malicioso en una web?

¿Qué librería se recomienda para hashear contraseñas de forma segura?

Capítulo 27 — WebAssembly¶

Introducción¶

WebAssembly (Wasm) es un formato binario que se ejecuta en el navegador a velocidades cercanas al código nativo. Es un complemento a JavaScript, no un sustituto.

Lo usan Figma, AutoCAD Web, Google Earth, Photoshop Web, y cualquier aplicación que necesite rendimiento extremo en el navegador.

¿Qué es exactamente?¶

Wasm es:

Un formato binario — compacto, rápido de descargar.
Un estándar abierto — soportado por todos los navegadores modernos.
Multi-lenguaje — puedes compilar desde C, C++, Rust, Go, Zig…
Sandboxed — se ejecuta en un entorno seguro, sin acceso directo al sistema.

No es:

Un reemplazo de JavaScript.
Un lenguaje que escribas a mano (normalmente se compila).
Solo para juegos.

¿Cuándo usar WebAssembly?¶

✅ Buen caso¶

Cálculos intensivos: procesamiento de imagen, vídeo, criptografía.
Portar código existente: apps de escritorio en C++ al navegador.
Juegos y simulaciones.
Edición de audio/vídeo en tiempo real.
Machine learning en el navegador.

❌ Mal caso¶

Manipulación del DOM (usa JavaScript).
Lógica de negocio simple.
Formularios, navegación, UI.
Cuando ya funciona bien con JS.

Regla práctica

Si no tienes un problema de rendimiento medido, no necesitas WebAssembly. JS es rapidísimo para el 99% de casos.

Cómo funciona¶

Código fuente (Rust/C/C++)
        ↓
   Compilador (wasm-pack, emscripten, etc.)
        ↓
   archivo .wasm (binario)
        ↓
   Cargado en el navegador
        ↓
   Ejecutado junto a JavaScript

Desde JavaScript se carga y ejecuta así:

const respuesta = await fetch('modulo.wasm');
const buffer = await respuesta.arrayBuffer();
const modulo = await WebAssembly.instantiate(buffer);
const resultado = modulo.instance.exports.sumar(2, 3);
console.log(resultado); // 5

Ejemplo: compilar Rust a WebAssembly¶

Instalar herramientas¶

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
cargo install wasm-pack

Crear un proyecto¶

cargo new --lib mi-wasm
cd mi-wasm

Edita Cargo.toml:

[package]
name = "mi-wasm"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

Escribir la función¶

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u64 {
    match n {
        0 => 0,
        1 => 1,
        _ => {
            let mut a = 0u64;
            let mut b = 1u64;
            for _ in 2..=n {
                let t = a + b;
                a = b;
                b = t;
            }
            b
        }
    }
}

#[wasm_bindgen]
pub fn sumar_array(numeros: &[i32]) -> i32 {
    numeros.iter().sum()
}

Compilar¶

wasm-pack build --target web

Genera una carpeta pkg/ con el .wasm, un .js de pegamento y un .d.ts.

Usar en JavaScript¶

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Wasm demo</title>
</head>
<body>
  <p>Fibonacci(40) = <span id="resultado"></span></p>

  <script type="module">
    import init, { fibonacci } from './pkg/mi_wasm.js';

    await init();
    const inicio = performance.now();
    const resultado = fibonacci(40);
    const fin = performance.now();
    document.getElementById('resultado').textContent =
      `${resultado} (${(fin - inicio).toFixed(2)} ms)`;
  </script>
</body>
</html>

Comparativa de rendimiento¶

Caso real: calcular 1 millón de números primos.

Tecnología	Tiempo
JavaScript puro	~850 ms
WebAssembly (Rust)	~120 ms
WebAssembly (C++)	~110 ms

7-8× más rápido. Pero ojo: la carga inicial del .wasm añade latencia. Para tareas pequeñas, JS gana.

Emscripten (C/C++ a Wasm)¶

Si tienes código en C o C++, usa Emscripten:

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh

Compilar:

emcc mi_programa.c -o mi_programa.js -s WASM=1 -O3

Genera mi_programa.wasm + mi_programa.js.

WASI: WebAssembly fuera del navegador¶

WASI (WebAssembly System Interface) permite ejecutar Wasm en el servidor, la terminal o el edge. Es el futuro de la portabilidad.

Casos de uso:

Cloudflare Workers — funciones en el edge.
Fastly Compute@Edge.
Fermyon Spin — microservicios.
Docker + Wasm — contenedores más ligeros.

Aplicaciones reales¶

Figma — renderizado de vectores.
AutoCAD Web — CAD completo en el navegador.
Google Earth — 3D global.
Photoshop Web — edición de imagen.
Amazon Prime Video — decodificación.
Zoom Web — procesamiento de audio/vídeo.

Limitaciones¶

No accede directamente al DOM (hay que pasar por JavaScript).
Tamaño del binario — puede ser grande si no se optimiza.
Debugging complicado — aunque mejora cada año.
No reemplaza a JS — se complementan.

Diagrama: cómo se ejecuta un módulo Wasm¶

sequenceDiagram
    participant U as Usuario
    participant N as Navegador
    participant JS as JavaScript
    participant W as WebAssembly

    U->>N: Carga la página
    N->>JS: Descarga app.js
    JS->>N: Pide modulo.wasm
    N-->>JS: Devuelve binario
    JS->>W: instantiate()
    JS->>W: Llama función exportada
    W-->>JS: Resultado
    JS-->>U: Actualiza la UI

JavaScript orquesta la carga y llama a las funciones de WebAssembly. El código pesado se ejecuta dentro del módulo Wasm a velocidad casi nativa.

Buenas prácticas¶

Mide antes. Solo usa Wasm si JS no es suficiente.
Usa wasm-pack para Rust.
Optimiza el tamaño con -O3 y wasm-opt.
Carga diferida: no bloquees el arranque con el .wasm.
Comparte memoria con SharedArrayBuffer si necesitas hilos.
Usa Web Workers para no bloquear el hilo principal.
Cachea el .wasm con Cache Storage.
Prueba en móvil. El rendimiento varía mucho.

Ejemplo real: procesar imágenes¶

use wasm_bindgen::prelude::*;
use image::{DynamicImage, ImageOutputFormat};

#[wasm_bindgen]
pub fn escala_grises(bytes: &[u8]) -> Vec<u8> {
    let img = image::load_from_memory(bytes).unwrap();
    let gris = img.grayscale();
    let mut salida = Vec::new();
    gris.write_to(&mut salida, ImageOutputFormat::Png).unwrap();
    salida
}

En JavaScript:

import init, { escala_grises } from './pkg/mi_wasm.js';
await init();

const input = document.querySelector('input[type=file]');
input.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  const bytes = new Uint8Array(await file.arrayBuffer());
  const resultado = escala_grises(bytes);
  const blob = new Blob([resultado], { type: 'image/png' });
  document.querySelector('img').src = URL.createObjectURL(blob);
});

Ejercicios¶

Compila una función de Fibonacci a Wasm con Rust y compárala con JS.
Usa wasm-pack para crear un paquete npm con tu módulo.
Porta una función intensiva de tu proyecto a Wasm y mide la mejora.
Prueba un módulo Wasm desde Cloudflare Workers.
Escribe el mismo algoritmo en JS y en Rust, compara el rendimiento.
Añade un Web Worker que ejecute el módulo Wasm en segundo plano.

⬅️ Capítulo 26 — Seguridad web | ➡️ Capítulo 28 — IA en el frontend ¶

🧠 Pon a prueba tus conocimientos¶

¿Qué es WebAssembly (Wasm)?

¿Qué lenguaje es ideal para compilar a WebAssembly?

Capítulo 28 — IA en el frontend¶

Introducción¶

La inteligencia artificial ha pasado de ser un tema de investigación a estar integrada en el navegador. Hoy puedes ejecutar modelos de lenguaje, visión por computador y reconocimiento de voz directamente en el cliente, sin servidores ni APIs de pago.

Este capítulo repasa las herramientas y casos de uso reales de la IA en el frontend.

¿Por qué IA en el cliente?¶

Ventajas¶

Privacidad: los datos no salen del dispositivo.
Latencia cero: sin peticiones a servidores.
Sin costes de API: no pagas por inferencia.
Funciona offline.
Escalable: cada usuario usa su propio hardware.

Desventajas¶

Limitado al hardware del usuario.
Modelos más pequeños que los de servidor.
Consumo de batería en móvil.
Descarga inicial del modelo.

Transformers.js¶

Transformers.js es la versión JavaScript de la librería de Hugging Face. Ejecuta modelos en el navegador con WebGPU o WASM.

Instalación¶

npm install @xenova/transformers

Ejemplo: análisis de sentimiento¶

import { pipeline } from '@xenova/transformers';

const clasificador = await pipeline(
  'sentiment-analysis',
  'Xenova/distilbert-base-uncased-finetuned-sst-2-english'
);

const resultado = await clasificador('Me encanta este libro');
console.log(resultado);
// [{ label: 'POSITIVE', score: 0.9998 }]

Ejemplo: traducción¶

const traductor = await pipeline(
  'translation',
  'Xenova/nllb-200-distilled-600M'
);

const salida = await traductor('Hello, world', {
  src_lang: 'eng_Latn',
  tgt_lang: 'spa_Latn',
});
console.log(salida[0].translation_text); // "Hola, mundo"

Ejemplo: resumen de texto¶

const resumidor = await pipeline('summarization');

const texto = `Un texto largo sobre desarrollo web...`;
const resumen = await resumidor(texto, {
  max_length: 100,
  min_length: 30,
});
console.log(resumen[0].summary_text);

Primera vez tarda

Los modelos se descargan la primera vez. Pueden pesar entre 10 MB y varios GB. Cachea el modelo con Cache Storage.

WebLLM: LLMs en el navegador¶

WebLLM ejecuta modelos como Llama, Mistral o Phi en el navegador usando WebGPU.

Instalación¶

npm install @mlc-ai/web-llm

Uso¶

import * as webllm from '@mlc-ai/web-llm';

const motor = await webllm.CreateMLCEngine(
  'Llama-3.2-1B-Instruct-q4f32_1-MLC'
);

const respuesta = await motor.chat.completions.create({
  messages: [{ role: 'user', content: '¿Qué es HTML?' }],
});

console.log(respuesta.choices[0].message.content);

Requiere WebGPU

WebLLM necesita WebGPU, disponible en Chrome/Edge 113+ y Safari 17+. Firefox va llegando.

Web Speech API: voz¶

Reconocimiento de voz¶

const recognition = new (window.SpeechRecognition ||
                        window.webkitSpeechRecognition)();

recognition.lang = 'es-ES';
recognition.continuous = false;

recognition.onresult = (event) => {
  const texto = event.results[0][0].transcript;
  console.log('Has dicho:', texto);
};

recognition.start();

Síntesis de voz¶

const utterance = new SpeechSynthesisUtterance('Hola, bienvenido al libro');
utterance.lang = 'es-ES';
utterance.rate = 1;
utterance.pitch = 1;

speechSynthesis.speak(utterance);

MediaPipe: visión por computador¶

MediaPipe de Google ofrece modelos ligeros para detección de manos, pose, cara y objetos.

Instalación¶

npm install @mediapipe/tasks-vision

Detección de manos¶

import { HandLandmarker, FilesetResolver } from '@mediapipe/tasks-vision';

const vision = await FilesetResolver.forVisionTasks(
  'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/wasm'
);

const detector = await HandLandmarker.createFromOptions(vision, {
  baseOptions: {
    modelAssetPath: 'https://storage.googleapis.com/mediapipe-models/hand_landmarker/hand_landmarker/float16/1/hand_landmarker.task',
  },
  numHands: 2,
});

const video = document.querySelector('video');
const resultados = detector.detectForVideo(video, performance.now());

resultados.landmarks.forEach(mano => {
  console.log('Puntos de la mano:', mano);
});

TensorFlow.js¶

TensorFlow.js permite entrenar y ejecutar modelos en el navegador.

Instalación¶

npm install @tensorflow/tfjs

Ejemplo: regresión lineal¶

import * as tf from '@tensorflow/tfjs';

const xs = tf.tensor1d([1, 2, 3, 4, 5]);
const ys = tf.tensor1d([2, 4, 6, 8, 10]);

const modelo = tf.sequential();
modelo.add(tf.layers.dense({ units: 1, inputShape: [1] }));
modelo.compile({ loss: 'meanSquaredError', optimizer: 'sgd' });

await modelo.fit(xs, ys, { epochs: 100 });

const prediccion = modelo.predict(tf.tensor1d([6]));
prediccion.print(); // ~12

Modelos preentrenados¶

import * as cocoSsd from '@tensorflow-models/coco-ssd';

const modelo = await cocoSsd.load();
const predicciones = await modelo.detect(imagen);

predicciones.forEach(p => {
  console.log(`${p.class} (${p.score.toFixed(2)})`);
});

Casos de uso reales¶

Búsqueda semántica en documentación.
Subtítulos automáticos en vídeo.
Detección de spam en formularios.
Recomendaciones personalizadas.
Chat con documentación (RAG con Transformers.js).
Edición de imagen con IA (quitar fondo, mejorar calidad).
Traducción en tiempo real.

Cachear modelos¶

Los modelos se pueden cachear para evitar descargas repetidas.

import { env } from '@xenova/transformers';

env.useBrowserCache = true;
env.allowLocalModels = false;

También puedes servirlos desde tu dominio con env.remoteHost.

Ejemplo práctico: chat con embeddings¶

import { pipeline } from '@xenova/transformers';

const extractor = await pipeline(
  'feature-extraction',
  'Xenova/all-MiniLM-L6-v2'
);

async function embedding(texto) {
  const salida = await extractor(texto, {
    pooling: 'mean',
    normalize: true,
  });
  return salida.data;
}

// Calcular similitud entre dos textos
async function similitud(a, b) {
  const [ea, eb] = await Promise.all([embedding(a), embedding(b)]);
  return ea.reduce((sum, v, i) => sum + v * eb[i], 0);
}

console.log(await similitud('gato', 'felino')); // ~0.8
console.log(await similitud('gato', 'coche')); // ~0.2

Esta técnica es la base de la búsqueda semántica: puedes encontrar documentos similares aunque no compartan palabras exactas.

Consideraciones éticas¶

Sé transparente: avisa cuando el usuario interactúa con IA.
No recojas datos sin permiso.
Revisa sesgos en los modelos.
Ofrece alternativas si la IA falla.
Respeta el copyright de los modelos.
No finjas ser humano si eres un bot.

Buenas prácticas¶

Carga los modelos con lazy loading.
Muestra un indicador de progreso mientras descargan.
Cachea el modelo tras la primera descarga.
Usa Web Workers para no bloquear la UI.
Prueba en móvil — el rendimiento varía mucho.
Ofrece modo fallback si WebGPU no está disponible.
No envíes datos sensibles a APIs externas sin cifrado.
Prefiere modelos pequeños para el cliente.

Ejercicios¶

Añade análisis de sentimiento a los comentarios de tu blog con Transformers.js.
Crea un buscador semántico de tus capítulos usando embeddings.
Implementa dictado por voz con Web Speech API en un formulario.
Prueba WebLLM con un modelo pequeño y pide que resuma un texto.
Usa MediaPipe para detectar gestos y controlar un reproductor de vídeo.
Entrena un modelo simple con TensorFlow.js en el navegador.
Cachea el modelo con Cache Storage para que no se descargue cada vez.

⬅️ Capítulo 27 — WebAssembly | ➡️ Capítulo 29 — WebXR ¶

🧠 Pon a prueba tus conocimientos¶

¿Qué API permite ejecutar modelos de IA directamente en el navegador?

¿Qué API permite el reconocimiento y síntesis de voz nativa?

Capítulo 29 — WebXR¶

Introducción¶

WebXR permite crear experiencias de Realidad Virtual (VR) y Realidad Aumentada (AR) que se ejecutan directamente en el navegador, sin instalar aplicaciones.

Funciona en gafas (Meta Quest, Apple Vision Pro, HTC Vive), móviles (ARCore/ARKit) y gafas de realidad mixta. Todo con el mismo código.

¿Qué es WebXR?¶

Es una API del navegador que da acceso a:

Posición y orientación del dispositivo en el espacio 3D.
Cámaras para AR.
Mandos y seguimiento de manos.
Audio espacial.

Es la evolución de WebVR (obsoleta). WebXR combina VR + AR en una sola API.

Cómo funciona¶

Navegador
   ↓
navigator.xr (WebXR API)
   ↓
Dispositivo (gafas, móvil, PC)
   ↓
Escena 3D (Three.js, Babylon.js, A-Frame)

WebXR solo gestiona el rastreo y la sesión. Necesitas una librería 3D para renderizar.

Compatibilidad¶

Navegador	VR	AR
Chrome Android	✅	✅
Chrome Desktop	✅ (con gafas)	❌
Edge	✅	❌
Meta Quest Browser	✅	✅
Safari (Vision Pro)	✅	✅
Firefox	✅	🟡 parcial

Comprueba siempre antes de arrancar la sesión.

Detectar soporte¶

if ('xr' in navigator) {
  const soportaVR = await navigator.xr.isSessionSupported('immersive-vr');
  const soportaAR = await navigator.xr.isSessionSupported('immersive-ar');
  console.log('VR:', soportaVR, 'AR:', soportaAR);
} else {
  console.log('WebXR no disponible');
}

Librerías recomendadas¶

Librería	Uso
Three.js	3D general con WebGL
Babylon.js	3D + WebXR integrado, más completo
A-Frame	HTML declarativo, el más fácil
React Three Fiber	Three.js para React
Wonderland Engine	Especializada en WebXR

Vamos con A-Frame primero (lo más simple) y luego Three.js.

Ejemplo básico con A-Frame¶

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi primera escena VR</title>
  <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
</head>
<body>
  <a-scene>
    <a-box position="-1 0.5 -3" rotation="0 45 0" color="#6a5acd"></a-box>
    <a-sphere position="0 1.25 -5" radius="1.25" color="#22d3ee"></a-sphere>
    <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#ef4444"></a-cylinder>
    <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#f8fafc"></a-plane>
    <a-sky color="#0f172a"></a-sky>
  </a-scene>
</body>
</html>

Con eso ya tienes una escena VR. Añade un botón para entrar en modo VR:

<a-scene>
  <a-entity id="rig" position="0 1.6 0">
    <a-entity camera look-controls></a-entity>
  </a-entity>
  <!-- ... resto de la escena ... -->
</a-scene>

A-Frame muestra automáticamente el botón "Enter VR" si el dispositivo lo soporta.

Ejemplo con Three.js¶

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>WebXR con Three.js</title>
</head>
<body>
  <button id="entrar">Entrar en VR</button>

  <script type="importmap">
    {
      "imports": {
        "three": "https://unpkg.com/three@0.160.0/build/three.module.js"
      }
    }
  </script>

  <script type="module">
    import * as THREE from 'three';
    import { VRButton } from 'https://unpkg.com/three@0.160.0/examples/jsm/webxr/VRButton.js';

    const escena = new THREE.Scene();
    escena.background = new THREE.Color(0x0f172a);

    const camara = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 100);
    camara.position.set(0, 1.6, 3);

    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(innerWidth, innerHeight);
    renderer.xr.enabled = true;
    document.body.appendChild(renderer.domElement);

    // Botón VR
    document.body.appendChild(VRButton.createButton(renderer));

    // Luces
    escena.add(new THREE.HemisphereLight(0xffffff, 0x444444, 1));

    // Objeto
    const geometria = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshStandardMaterial({ color: 0x6a5acd });
    const cubo = new THREE.Mesh(geometria, material);
    cubo.position.set(0, 1.6, -2);
    escena.add(cubo);

    // Bucle
    renderer.setAnimationLoop((tiempo) => {
      cubo.rotation.y = tiempo / 1000;
      cubo.rotation.x = tiempo / 2000;
      renderer.render(escena, camara);
    });

    // Responsive
    addEventListener('resize', () => {
      camara.aspect = innerWidth / innerHeight;
      camara.updateProjectionMatrix();
      renderer.setSize(innerWidth, innerHeight);
    });
  </script>
</body>
</html>

Al abrirlo en un dispositivo compatible (Meta Quest, móvil con ARCore, etc.) aparece el botón "Enter VR".

AR con WebXR¶

AR necesita la cámara trasera. Ejemplo básico con Three.js:

import { ARButton } from 'https://unpkg.com/three@0.160.0/examples/jsm/webxr/ARButton.js';

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.xr.enabled = true;
document.body.appendChild(renderer.domElement);

document.body.appendChild(
  ARButton.createButton(renderer, { requiredFeatures: ['hit-test'] })
);

const escena = new THREE.Scene();
const camara = new THREE.PerspectiveCamera();

escena.add(new THREE.HemisphereLight(0xffffff, 0xbbbbff, 3));

// Cubo que se coloca donde toques
const cubo = new THREE.Mesh(
  new THREE.BoxGeometry(0.2, 0.2, 0.2),
  new THREE.MeshStandardMaterial({ color: 0x6a5acd })
);
cubo.visible = false;
escena.add(cubo);

let reticle = new THREE.Mesh(
  new THREE.RingGeometry(0.15, 0.2, 32).rotateX(-Math.PI / 2),
  new THREE.MeshBasicMaterial({ color: 0x22d3ee })
);
reticle.matrixAutoUpdate = false;
reticle.visible = false;
escena.add(reticle);

// Hit testing
let hitTestSource = null;
let hitTestSourceRequested = false;

renderer.xr.addEventListener('sessionstart', async () => {
  const session = renderer.xr.getSession();
  const viewerSpace = await session.requestReferenceSpace('viewer');
  hitTestSource = await session.requestHitTestSource({ space: viewerSpace });

  session.addEventListener('select', () => {
    if (reticle.visible) {
      const clone = cubo.clone();
      clone.position.setFromMatrixPosition(reticle.matrix);
      clone.visible = true;
      escena.add(clone);
    }
  });
});

renderer.setAnimationLoop((tiempo, frame) => {
  if (frame && hitTestSource) {
    const referenceSpace = renderer.xr.getReferenceSpace();
    const hits = frame.getHitTestResults(hitTestSource);
    if (hits.length) {
      const pose = hits[0].getPose(referenceSpace);
      reticle.visible = true;
      reticle.matrix.fromArray(pose.transform.matrix);
    }
  }
  renderer.render(escena, camara);
});

Esto coloca cubos donde el usuario toca una superficie detectada. Es la base de cualquier app AR.

Controles y mandos¶

const controlador = renderer.xr.getController(0);
controlador.addEventListener('selectstart', () => {
  console.log('Gatillo pulsado');
});
escena.add(controlador);

// Añadir un rayo visible
const rayo = new THREE.Line(
  new THREE.BufferGeometry().setFromPoints([
    new THREE.Vector3(0, 0, 0),
    new THREE.Vector3(0, 0, -1),
  ]),
  new THREE.LineBasicMaterial({ color: 0x22d3ee })
);
rayo.scale.z = 5;
controlador.add(rayo);

Seguimiento de manos¶

WebXR soporta hand tracking en Quest y Vision Pro:

const session = renderer.xr.getSession();
session.addEventListener('inputsourceschange', (event) => {
  event.added.forEach((input) => {
    if (input.hand) {
      console.log('Mano detectada:', input.handedness);
    }
  });
});

session.requestAnimationFrame((tiempo, frame) => {
  for (const input of session.inputSources) {
    if (input.hand) {
      for (const joint of input.hand.values()) {
        // joint.transform: matriz 4x4 con la posición
      }
    }
  }
});

Audio espacial¶

El sonido cambia según la posición del usuario:

const listener = new THREE.AudioListener();
camara.add(listener);

const sonido = new THREE.PositionalAudio(listener);
const audioLoader = new THREE.AudioLoader();

audioLoader.load('ambiente.mp3', (buffer) => {
  sonido.setBuffer(buffer);
  sonido.setRefDistance(1);
  sonido.setLoop(true);
  sonido.play();
});

cubo.add(sonido); // el sonido viene del cubo

Rendimiento en VR¶

VR exige 90 FPS mínimo (idealmente 120). Reglas estrictas:

Bajo poligonaje. Cada triángulo cuenta.
Texturas comprimidas (KTX2, Basis).
Instancing para objetos repetidos.
LOD (Level of Detail) según distancia.
Evita transparencias (son caras).
Evita sombras dinámicas complejas.
Prueba en el dispositivo real.

Casos de uso¶

Educación: visitas virtuales, simulaciones.
Comercio: probar productos en AR.
Formación: entrenamiento en entornos seguros.
Arte: museos virtuales.
Arquitectura: recorridos de edificios.
Salud: terapia de exposición, rehabilitación.

Diagrama: arquitectura WebXR¶

flowchart TB
    A[Navegador] --> B[navigator.xr]
    B --> C{Session?}
    C -->|immersive-vr| D[Gafas VR]
    C -->|immersive-ar| E[Cámara AR]
    C -->|inline| F[Modo 3D sin gafas]
    D --> G[Renderizado 3D<br/>Three.js / A-Frame]
    E --> G
    F --> G

WebXR gestiona el rastreo del dispositivo. La escena 3D se renderiza con Three.js, A-Frame o Babylon.js.

Buenas prácticas¶

Detecta soporte antes de arrancar.
Ofrece fallback 2D si no hay XR.
Empieza con A-Frame si eres nuevo.
Optimiza desde el día 1. En VR no puedes improvisar.
Prueba en el dispositivo real. El emulador no basta.
Cuida la accesibilidad. No todo el mundo puede usar gafas.
Evita movimientos bruscos (marean).
Considera el espacio físico del usuario.
Ofrece pausa y salida siempre visibles.

Ejercicios¶

Crea una escena VR con A-Frame con 5 objetos de colores.
Añade un botón para entrar en VR desde un dispositivo compatible.
Convierte una escena Three.js a WebXR con VRButton.
Prueba AR en un móvil Android con ARCore.
Añade audio espacial a un objeto de tu escena.
Implementa hand tracking básico en Meta Quest.
Optimiza una escena VR para alcanzar 90 FPS estables.

⬅️ Capítulo 28 — IA en el frontend | ➡️ Capítulo 30 — Web3 ¶

🧠 Pon a prueba tus conocimientos¶

¿Qué API del navegador permite crear experiencias de Realidad Virtual y Aumentada?

¿Qué librería HTML declarativa es la forma más fácil de crear escenas 3D para VR?

Capítulo 30 — Web3¶

Introducción¶

Web3 es la visión de una internet descentralizada, donde los usuarios son dueños de sus datos y las aplicaciones no dependen de un servidor central.

Se apoya en blockchain, contratos inteligentes y billeteras criptográficas. Ha generado tanto entusiasmo como escepticismo, y hay mucho ruido alrededor.

Este capítulo explica los conceptos técnicos reales, sin promesas de humo.

Web 1.0, 2.0 y 3.0¶

Etapa	Características	Ejemplos
Web 1.0 (1990-2004)	Estática, solo lectura	Webs personales, foros
Web 2.0 (2004-hoy)	Dinámica, social, centralizada	Facebook, YouTube, Twitter
Web 3.0 (¿hoy?)	Descentralizada, propiedad del usuario	dApps, DAOs, DeFi

Web3 no sustituye a Web2. Conviven. Y hay cosas que funcionan mejor en una que en otra.

Blockchain: la base¶

Una blockchain es una base de datos distribuida donde los registros se agrupan en bloques encadenados criptográficamente. Una vez escrito, un bloque no se puede modificar sin reescribir toda la cadena.

Propiedades clave¶

Descentralizada: no hay un dueño.
Inmutable: los datos no se pueden cambiar.
Transparente: cualquiera puede auditarla.
Sin permisos: cualquiera puede participar.

Redes principales¶

Red	Uso	Velocidad
Ethereum	Contratos inteligentes, dApps	12 s/bloque
Bitcoin	Valor, almacenamiento	10 min/bloque
Solana	Alto rendimiento	400 ms/bloque
Polygon	Capa 2 de Ethereum (más barata)	2 s/bloque

Wallets y claves¶

Una wallet no guarda criptomonedas. Guarda claves privadas que dan acceso a direcciones en la blockchain.

Clave pública → dirección (como un IBAN).
Clave privada → firma de transacciones (como la contraseña del banco).
Frase semilla → 12-24 palabras que permiten recuperar la wallet.

Nunca compartas tu clave privada

Nadie legítimo te la pedirá. Si la pierdes, pierdes acceso para siempre. Si alguien la obtiene, puede vaciar tu wallet.

Wallets populares: MetaMask, Rabby, Phantom, Ledger (hardware).

Conectar una wallet en tu web¶

npm install ethers

import { BrowserProvider } from 'ethers';

async function conectar() {
  if (!window.ethereum) {
    alert('Instala MetaMask para continuar');
    return;
  }

  const provider = new BrowserProvider(window.ethereum);
  const cuentas = await provider.send('eth_requestAccounts', []);

  console.log('Conectado como:', cuentas[0]);
  return cuentas[0];
}

Para más wallets a la vez, usa RainbowKit o ConnectKit (React).

Contratos inteligentes¶

Un smart contract es un programa que vive en la blockchain. Se ejecuta automáticamente cuando se cumplen sus condiciones.

Se escriben normalmente en Solidity:

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.20;

contract Contador {
    uint256 public cuenta;

    event Incrementado(uint256 nuevaCuenta, address por);

    function incrementar() public {
        cuenta += 1;
        emit Incrementado(cuenta, msg.sender);
    }

    function reiniciar() public {
        cuenta = 0;
    }
}

Se despliega en la red y queda accesible para siempre. Cada llamada cuesta gas (tarifa de la red).

Interactuar con un contrato desde el frontend¶

import { BrowserProvider, Contract } from 'ethers';

const ABI = [
  'function cuenta() view returns (uint256)',
  'function incrementar()',
];

const DIRECCION = '0x...';

async function interactuar() {
  const provider = new BrowserProvider(window.ethereum);
  const signer = await provider.getSigner();
  const contrato = new Contract(DIRECCION, ABI, signer);

  const cuenta = await contrato.cuenta();
  console.log('Cuenta actual:', cuenta.toString());

  const tx = await contrato.incrementar();
  await tx.wait();
  console.log('Incrementado');
}

dApps (aplicaciones descentralizadas)¶

Una dApp es una aplicación web que interactúa con la blockchain. Componentes:

Frontend: HTML/CSS/JS normal.
Wallet: MetaMask, WalletConnect…
Contrato: lógica en Solidity.
IPFS: almacenamiento descentralizado (opcional).

Ejemplos:

Uniswap — exchange descentralizado.
OpenSea — mercado de NFTs.
Aave — préstamos.
ENS — dominio .eth (como DNS).

NFTs¶

Un NFT (Non-Fungible Token) es un token único en la blockchain. Representa propiedad de algo digital o físico.

Casos legítimos:

Arte digital con procedencia verificable.
Entradas de eventos (evitan reventa fraudulenta).
Certificados académicos o profesionales.
Dominios descentralizados.
Objetos de juegos con propiedad real.

Casos polémicos:

Especulación.
Derechos de autor cuestionables.
Alto consumo energético (menos con Ethereum post-Merge).

DAOs¶

Una DAO (Decentralized Autonomous Organization) es una organización gobernada por contratos y votos de sus miembros.

Sin jerarquía tradicional.
Votaciones on-chain.
Tesorería transparente.
Código como ley.

Ejemplos: MakerDAO, Uniswap DAO, Gitcoin DAO.

IPFS: almacenamiento descentralizado¶

IPFS (InterPlanetary File System) es un sistema de archivos distribuido. Los archivos se identifican por su contenido (hash), no por su ubicación.

import { create } from 'ipfs-http-client';

const ipfs = create({ url: 'https://ipfs.infura.io:5001' });
const { cid } = await ipfs.add('Hola, mundo');
console.log('CID:', cid.toString());

Accedes al archivo con: https://ipfs.io/ipfs/<CID>.

Retos reales de Web3¶

Problemas técnicos¶

Escalabilidad limitada en algunas redes.
Coste de gas variable y a veces alto.
Experiencia de usuario complicada (wallets, seeds, gas).
Finalidad lenta en algunas transacciones.

Problemas de percepción¶

Especulación domina la conversación.
Estafas y rug pulls frecuentes.
Consumo energético (aunque Ethereum ya no).
Falta de regulación clara.

Problemas de diseño¶

No todo necesita descentralización.
La inmutabilidad complica corregir errores.
Transparencia total ≠ privacidad.

¿Cuándo tiene sentido Web3?¶

✅ Buen caso¶

Censura resistente: contenidos que no pueden ser borrados.
Propiedad verificable: arte, coleccionables.
Pagos sin intermediarios: transferencias internacionales.
Votaciones transparentes.
Identidad soberana.

❌ Mal caso¶

Redes sociales generales (mejor con Web2).
Aplicaciones donde el rendimiento importa.
Casos donde un servidor central funciona bien.
Cuando el usuario no sabe qué es una wallet.

Regla de oro

Si no necesitas descentralización, no la uses. Añadir blockchain no hace mejor una app. La hace más compleja y, a menudo, peor.

Seguridad en Web3¶

Verifica siempre las direcciones antes de enviar.
Usa hardware wallet para cantidades grandes.
Revoca permisos antiguos en revoke.cash.
Desconfía de regalos y airdrops no solicitados.
Verifica contratos en Etherscan.
No firmes transacciones que no entiendas.

Impacto ambiental¶

Ethereum migró a Proof of Stake en 2022 (The Merge), reduciendo su consumo energético un 99,95%. Bitcoin sigue con Proof of Work, muy intensivo en energía.

Si te preocupa el impacto, prefiere redes PoS: Ethereum, Polygon, Solana, Cardano.

Diagrama: cómo interactúa una dApp¶

sequenceDiagram
    participant U as Usuario
    participant W as Wallet<br/>MetaMask
    participant D as dApp<br/>Frontend
    participant C as Contrato<br/>Solidity
    participant B as Blockchain

    U->>D: Clic en "Conectar wallet"
    D->>W: eth_requestAccounts
    W-->>U: Pide permiso
    U-->>W: Acepta
    W-->>D: Dirección 0x...
    D->>C: Llama función
    C->>B: Transacción firmada
    B-->>C: Confirmación
    C-->>D: Evento emitido
    D-->>U: Actualiza UI

Una dApp no accede directamente a la blockchain: la wallet actúa como intermediaria y firma cada transacción en nombre del usuario.

Buenas prácticas para desarrolladores¶

Empieza por entender los fundamentos antes de programar.
Usa testnets (Sepolia, Mumbai) para pruebas.
Audita tus contratos antes del mainnet.
Nunca despliegues sin tests — no hay "rollback" en blockchain.
Maneja errores con gracia en el frontend.
Ofrece fallback si el usuario no tiene wallet.
No prometas más de lo que la tecnología puede.

Ejercicios¶

Instala MetaMask y crea una wallet en testnet.
Conecta tu web a MetaMask con eth_requestAccounts.
Lee el balance de una dirección con ethers.
Despliega un contrato Contador en Sepolia y úsalo desde el frontend.
Muestra información de un NFT existente desde OpenSea API.
Sube un archivo a IPFS y accede vía gateway.
Escribe el mismo formulario con Web2 y con Web3. Compara la complejidad.

⬅️ Capítulo 29 — WebXR | ➡️ Apéndices ¶

🧠 Pon a prueba tus conocimientos¶

¿Qué tipo de aplicación se ejecuta en una blockchain?

¿Qué lenguaje se usa comúnmente para escribir contratos inteligentes en Ethereum?

Nivel vanguardia

31 — Testing E2E con Playwright

(Guarda con Ctrl+S)

Paso 4: Crea el Capítulo 33¶

Clic derecho en capitulos → "New File" → 33-edge-computing.md Pega esto:

```markdown

Capítulo 33 — Edge Computing¶

Introducción¶

Tradicionalmente, todo tu código vivía en un servidor central (por ejemplo, en Virginia, EE. UU.). Si un usuario accedía desde España, su petición viajaba hasta Virginia, se procesaba y volvía.

El Edge Computing consiste en ejecutar el código lo más cerca posible del usuario, en nodos distribuidos por todo el mundo. La latencia se reduce drásticamente (de 200ms a 20ms).

¿Qué es el Edge?¶

Plataformas como Vercel, Cloudflare, Netlify o Deno Deploy tienen centros de datos en cientos de ciudades. Cuando alguien visita tu web, el código se ejecuta en el nodo más cercano.¶

🧠 Pon a prueba tus conocimientos¶

¿Qué herramienta moderna es la más recomendada para pruebas End-to-End?

32 — Server Components

(Guarda con Ctrl+S)

Paso 5: Actualiza el menú (`mkdocs.yml`)¶

En VS Code, abre el archivo mkdocs.yml que está en la raíz del proyecto.

Busca la sección Nivel élite: (usa Ctrl+F para encontrarlo rápido). Justo debajo de la última línea de ese bloque (que es - "30 — Web3": capitulos/30-web3.md), añade estas líneas:

```yaml - Nivel vanguardia: - "31 — Testing E2E con Playwright": capitulos/31-testing-e2e.md - "32 — Server Components": capitulos/32-server-components.md - "33 — Edge Computing": capitulos/33-edge-computing.md

🧠 Pon a prueba tus conocimientos¶

¿Qué framework populariza los React Server Components?

Capítulo 33 — Edge Computing¶

Introducción¶

Tradicionalmente, todo tu código vivía en un servidor central (por ejemplo, en Virginia, EE. UU.). Si un usuario accedía desde España, su petición viajaba hasta Virginia, se procesaba y volvía.

El Edge Computing consiste en ejecutar el código lo más cerca posible del usuario, en nodos distribuidos por todo el mundo. La latencia se reduce drásticamente (de 200ms a 20ms).

¿Qué es el Edge?¶

Plataformas como Vercel, Cloudflare, Netlify o Deno Deploy tienen centros de datos en cientos de ciudades. Cuando alguien visita tu web, el código se ejecuta en el nodo más cercano.¶

🧠 Pon a prueba tus conocimientos¶

¿Cuál es la principal ventaja del Edge Computing?

Capítulo 34 — Docker para frontend¶

Introducción¶

Docker empaqueta tu aplicación y todas sus dependencias en un contenedor: una unidad ligera, portable y reproducible que funciona igual en tu portátil, en el servidor de tu compañero y en producción.

Para frontend, Docker resuelve el clásico "en mi máquina funciona". Con un Dockerfile describes el entorno exacto y cualquiera puede reproducirlo con un solo comando.

¿Qué es un contenedor?¶

Un contenedor es como una máquina virtual ultraligera:

Comparte el kernel del sistema operativo (no emula hardware).
Arranca en milisegundos.
Ocupa MBs en lugar de GBs.
Es inmutable: una vez construido, siempre se ejecuta igual.

Docker vs Máquina Virtual¶

Aspecto	Docker	VM
Arranque	Segundos	Minutos
Tamaño	MBs	GBs
Sistema operativo	Comparte kernel	Completo
Aislamiento	Procesos	Hardware

Instalación¶

Linux (Arch): sudo pacman -S docker docker-compose
macOS/Windows: Docker Desktop

Activa el servicio:

sudo systemctl enable --now docker
sudo usermod -aG docker $USER
# Cierra sesión y vuelve a entrar

Conceptos clave¶

Concepto	Qué es
Imagen	Plantilla inmutable (receta)
Contenedor	Instancia en ejecución de una imagen
Dockerfile	Receta para construir una imagen
Volume	Almacenamiento persistente
Compose	Orquestador local multi-contenedor

Tu primer Dockerfile¶

FROM node:20-alpine

WORKDIR /app

COPY package*.json ./
RUN npm ci

COPY . .

EXPOSE 5173

CMD ["npm", "run", "dev", "--", "--host"]

Construir:

docker build -t mi-app .

Ejecutar:

docker run -p 5173:5173 mi-app

Visita http://localhost:5173.

Multi-stage build (el estándar en producción)¶

En producción no necesitas node_modules ni el código fuente. Solo el resultado del build. Multi-stage permite usar una imagen para compilar y otra (mucho más ligera) para servir.

# Etapa 1: Build
FROM node:20-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# Etapa 2: Servir con Nginx
FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Resultado: de ~800 MB a ~25 MB. 🎯

Configuración de Nginx para SPA¶

nginx.conf:

server {
  listen 80;
  root /usr/share/nginx/html;
  index index.html;

  # SPA fallback: siempre sirve index.html si no encuentra archivo
  location / {
    try_files $uri $uri/ /index.html;
  }

  # Cache largo para assets con hash
  location ~* \.(js|css|woff2|png|jpg|svg)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
  }

  # Gzip
  gzip on;
  gzip_types text/css application/javascript image/svg+xml;
}

Docker Compose¶

Para varios servicios (frontend + backend + base de datos) usa docker-compose.yml:

services:
  web:
    build: .
    ports:
      - "8080:80"
    depends_on:
      - api
    environment:
      - VITE_API_URL=http://localhost:3000

  api:
    build: ./api
    ports:
      - "3000:3000"
    environment:
      - DATABASE_URL=postgres://user:pass@db:5432/app
    depends_on:
      - db

  db:
    image: postgres:16-alpine
    environment:
      - POSTGRES_PASSWORD=pass
      - POSTGRES_USER=user
      - POSTGRES_DB=app
    volumes:
      - pgdata:/var/lib/postgresql/data

volumes:
  pgdata:

Arrancar todo:

docker compose up -d

Parar:

docker compose down

.dockerignore¶

Igual que .gitignore, pero para Docker. Muy importante para que el build sea rápido:

node_modules
dist
.git
.env
.env.local
*.log
.DS_Store
coverage

Sin este archivo, Docker copiaría node_modules (miles de archivos) y el build tardaría minutos en lugar de segundos.

Volumes: persistencia¶

Los contenedores son efímeros: cuando se borran, pierden los datos. Los volumes persisten:

volumes:
  - pgdata:/var/lib/postgresql/data

Buenas prácticas¶

Usa imágenes Alpine: mucho más ligeras (~5 MB vs ~900 MB).
Multi-stage builds para producción: solo lo necesario.
Un proceso por contenedor: no mezcles frontend y backend.
.dockerignore siempre.
Fija versiones: node:20.11.0-alpine, no node:latest.
No ejecutes como root: crea un usuario sin privilegios.
Escanea vulnerabilidades: docker scout cves mi-imagen.
Logs a stdout/stderr, nunca a archivos dentro del contenedor.
Compose para desarrollo, Kubernetes para producción a gran escala.

Ejemplo: usuario no root¶

FROM node:20-alpine
RUN addgroup -S app && adduser -S app -G app
WORKDIR /app
COPY --chown=app:app . .
USER app
CMD ["node", "server.js"]

Ejercicios¶

Crea un Dockerfile con node:20-alpine para un proyecto Vite y ejecútalo con docker run.
Convierte el Dockerfile a multi-stage usando Nginx.
Añade un .dockerignore y comprueba cuánto tarda el build antes y después.
Crea un docker-compose.yml con frontend, backend y PostgreSQL.
Escanea tu imagen con docker scout cves y corrige las vulnerabilidades.

⬅️ Capítulo 33 — Edge Computing | ➡️ Capítulo 35 — GraphQL

🧠 Pon a prueba tus conocimientos¶

¿Qué es un contenedor Docker?

Capítulo 35 — GraphQL¶

Introducción¶

GraphQL es un lenguaje de consulta para APIs creado por Facebook en 2015. A diferencia de REST, donde el servidor define qué devuelve cada endpoint, en GraphQL el cliente pide exactamente los datos que necesita.

Esto resuelve dos problemas clásicos de REST:

Over-fetching: recibir más datos de los necesarios.
Under-fetching: necesitar varias peticiones para completar una vista.

REST vs GraphQL¶

REST: múltiples peticiones¶

GET /api/usuario/1
GET /api/usuario/1/posts
GET /api/usuario/1/seguidores

Tres peticiones, datos de más en cada una.

GraphQL: una sola petición¶

query {
  usuario(id: 1) {
    nombre
    email
    posts { titulo }
    seguidores { nombre }
  }
}

Una sola petición, exactamente los datos que necesitas.

Conceptos clave¶

Concepto	Qué es
Query	Consulta de lectura (como GET)
Mutation	Modificación de datos (POST/PUT/DELETE)
Subscription	Actualizaciones en tiempo real (WebSockets)
Schema	Contrato que define qué se puede pedir
Resolver	Función que devuelve los datos
Type	Tipo de dato (Usuario, Post, etc.)

Tu primer servidor GraphQL¶

Con Apollo Server (Node.js):

npm install @apollo/server graphql

// server.js
import { ApolloServer } from '@apollo/server';
import { startStandaloneServer } from '@apollo/server/standalone';

const typeDefs = `
  type Query {
    saludo: String
    usuario(id: ID!): Usuario
  }

  type Usuario {
    id: ID!
    nombre: String!
    email: String!
  }
`;

const usuarios = [
  { id: '1', nombre: 'Urukais', email: 'urukaisk@gmail.com' },
  { id: '2', nombre: 'Ana', email: 'ana@ejemplo.com' },
];

const resolvers = {
  Query: {
    saludo: () => 'Hola desde GraphQL',
    usuario: (_, { id }) => usuarios.find(u => u.id === id),
  },
};

const server = new ApolloServer({ typeDefs, resolvers });

const { url } = await startStandaloneServer(server, { listen: { port: 4000 } });
console.log('Servidor en', url);

Probar consultas¶

En http://localhost:4000 tienes Apollo Studio, un playground donde probar queries:

query {
  saludo
}

query {
  usuario(id: "1") {
    nombre
    email
  }
}

Mutations: modificar datos¶

type Mutation {
  crearUsuario(nombre: String!, email: String!): Usuario
}

Resolver:

const resolvers = {
  Mutation: {
    crearUsuario: (_, { nombre, email }) => {
      const nuevo = { id: String(usuarios.length + 1), nombre, email };
      usuarios.push(nuevo);
      return nuevo;
    },
  },
};

Cliente:

mutation {
  crearUsuario(nombre: "Pedro", email: "pedro@ejemplo.com") {
    id
    nombre
  }
}

Cliente: Apollo Client en React¶

npm install @apollo/client graphql

import { ApolloClient, InMemoryCache, ApolloProvider, gql, useQuery } from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:4000',
  cache: new InMemoryCache(),
});

const USUARIO_QUERY = gql`
  query GetUsuario($id: ID!) {
    usuario(id: $id) {
      nombre
      email
    }
  }
`;

function Perfil() {
  const { loading, error, data } = useQuery(USUARIO_QUERY, {
    variables: { id: '1' },
  });

  if (loading) return <p>Cargando...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h2>{data.usuario.nombre}</h2>
      <p>{data.usuario.email}</p>
    </div>
  );
}

function App() {
  return (
    <ApolloProvider client={client}>
      <Perfil />
    </ApolloProvider>
  );
}

Caché automática

Apollo Client cachea por defecto. La misma query a usuario(id: "1") en varios componentes solo hace una petición. Los datos se comparten automáticamente.

Fragmentos: reutilizar campos¶

fragment DatosUsuario on Usuario {
  id
  nombre
  email
}

query {
  usuario(id: "1") {
    ...DatosUsuario
    posts { titulo }
  }
}

Subscriptions: tiempo real¶

type Subscription {
  nuevoMensaje(sala: String!): Mensaje
}

Se conecta vía WebSockets y el cliente recibe actualizaciones en vivo. Perfecto para chats, notificaciones o dashboards.

Ventajas y desventajas¶

✅ Ventajas¶

Una sola petición para datos relacionados.
Sin over/under-fetching: el cliente pide lo que necesita.
Schema tipado: autocompletado en el editor.
Versionado innecesario: añades campos sin romper clientes.
Herramientas potentes: playground, Apollo Studio, GraphiQL.

❌ Desventajas¶

Complejidad inicial mayor que REST.
Caché HTTP compleja: todo va por POST.
N+1 problem con resolvers mal hechos (se soluciona con DataLoader).
Over-engineering en proyectos pequeños.

¿Cuándo usar GraphQL?¶

✅ Úsalo si...¶

Tienes múltiples clientes (web, móvil, TV) con necesidades distintas.
Tu API es grande y compleja con muchas relaciones.
Necesitas tiempo real.
Estás construyendo una plataforma pública.

❌ Evítalo si...¶

Es una API pequeña y simple (REST es suficiente).
Solo tienes un cliente.
El equipo no conoce GraphQL.
Necesitas caché HTTP simple con CDN.

Buenas prácticas¶

Diseña el schema pensando en el cliente, no en la base de datos.
Usa DataLoader para evitar el problema N+1.
Persiste las queries en producción (Apollo Persisted Queries).
Limita la profundidad de las queries para evitar abusos.
Documenta el schema con descripciones.
Versiona el schema con un historial de cambios.
Autentica en el contexto del resolver.

Ejercicios¶

Crea un servidor GraphQL básico con Apollo Server y un query saludo.
Añade una mutation crearPost que reciba título y contenido.
Consume tu API desde un componente de React con Apollo Client.
Añade un fragmento para reutilizar campos de usuario.
Implementa DataLoader para resolver el problema N+1 en una lista de posts con autor.

⬅️ Capítulo 34 — Docker para frontend | ➡️ Capítulo 36 — Micro-frontends

🧠 Pon a prueba tus conocimientos¶

¿Qué ventaja principal ofrece GraphQL frente a REST?

Capítulo 36 — Micro-frontends¶

Introducción¶

Los micro-frontends aplican las ideas de microservicios al frontend: dividir una aplicación grande en aplicaciones más pequeñas e independientes, cada una mantenida por un equipo distinto, que se integran para formar un producto coherente.

Si has trabajado en una app enorme donde un cambio de un equipo rompe el trabajo de otro, sabes por qué existen.

El problema que resuelven¶

Imagina una aplicación enterprise con:

5 equipos trabajando en paralelo.
300.000 líneas de código.
Un build de 15 minutos.
Un despliegue al día, que falla una vez de cada tres.

Micro-frontends permiten que cada equipo despliegue su parte cuando quiera, sin bloquear a los demás.

¿Qué es un micro-frontend?¶

Una aplicación frontend autónoma que:

Se desarrolla en su propio repositorio.
Se despliega en su propia URL o CDN.
Se integra en una "aplicación contenedor" (shell).
Puede usar cualquier tecnología (React, Vue, Svelte...).

Ejemplo: una tienda online dividida en:

header (React).
productos (Vue).
carrito (Svelte).
checkout (React).

Todo se ve como una sola app.

Formas de integrar micro-frontends¶

1. Iframes (la más antigua)¶

Cada micro-frontend vive en su <iframe>.

✅ Aislamiento total. ❌ Pésima experiencia: no compartes estado, CSS, ni rutas.

2. Web Components¶

Cada micro-frontend expone un Custom Element (<mi-productos>).

✅ Estándar nativo, aislamiento real. ❌ Requiere aprender Shadow DOM, eventos personalizados.

3. Module Federation (el más moderno)¶

Webpack 5 (y Vite con plugins) permite compartir módulos entre aplicaciones en tiempo de ejecución.

4. Composición en build time¶

Un monorepo con todas las partes que se construyen juntas.

Module Federation con Webpack¶

Aplicación remota (`productos`)¶

// webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'productos',
      filename: 'remoteEntry.js',
      exposes: {
        './ListaProductos': './src/ListaProductos',
      },
      shared: { react: { singleton: true }, 'react-dom': { singleton: true } },
    }),
  ],
};

Aplicación contenedora (`shell`)¶

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'shell',
      remotes: {
        productos: 'productos@https://productos.miapp.com/remoteEntry.js',
      },
      shared: { react: { singleton: true }, 'react-dom': { singleton: true } },
    }),
  ],
};

Uso:

import React, { Suspense } from 'react';

const ListaProductos = React.lazy(() => import('productos/ListaProductos'));

function App() {
  return (
    <Suspense fallback={<p>Cargando productos...</p>}>
      <ListaProductos />
    </Suspense>
  );
}

Module Federation con Vite¶

npm install -D @originjs/vite-plugin-federation

vite.config.js:

import { defineConfig } from 'vite';
import federation from '@originjs/vite-plugin-federation';

export default defineConfig({
  plugins: [
    federation({
      name: 'productos',
      filename: 'remoteEntry.js',
      exposes: {
        './ListaProductos': './src/ListaProductos.jsx',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
});

Ventajas¶

Despliegues independientes por equipo.
Equipos autónomos: eligen su stack.
Escalabilidad organizacional: puedes añadir equipos sin bloquear.
Builds más rápidos: cada micro-frontend compila solo lo suyo.
Migraciones graduales: puedes reescribir una parte sin tocar el resto.

Desventajas¶

Complejidad de integración: no es trivial.
Duplicación de dependencias: cada micro-frontend puede traer React.
Consistencia de diseño: hay que coordinar un design system.
Depuración más difícil: el bug puede estar en cualquier parte.
Rendimiento: múltiples bundles, más peticiones.

El rol del design system¶

En micro-frontends es obligatorio tener un design system compartido:

Tokens de diseño (colores, tipografía, espaciados).
Componentes base (Button, Input, Modal).
Guías de estilo documentadas.

Sin esto, cada equipo hará su propia versión del botón y la app parecerá un Frankenstein.

Comunicación entre micro-frontends¶

No deben acoplarse directamente. Opciones:

1. Custom Events¶

// Micro-frontend A
window.dispatchEvent(new CustomEvent('carrito:add', { detail: producto }));

// Micro-frontend B
window.addEventListener('carrito:add', (e) => {
  actualizarContador(e.detail);
});

2. Estado compartido en el shell¶

El contenedor expone un store global (Zustand, Redux) y los micro-frontends lo consumen.

3. URL y query params¶

La más simple: el estado vive en la URL.

4. Event bus compartido¶

Una librería pequeña que actúa como mediador.

¿Cuándo usar micro-frontends?¶

✅ Úsalos si...¶

Tienes múltiples equipos trabajando en paralelo.
La app es muy grande y el monolito se vuelve lento.
Necesitas despliegues independientes.
Estás migrando tecnología gradualmente.

❌ Evítalos si...¶

Eres un solo equipo pequeño.
La app es pequeña o mediana.
No tienes un design system maduro.
No tienes experiencia con arquitecturas distribuidas.

La regla más importante

No empieces con micro-frontends. Empieza con un monolito modular bien organizado. Cuando el dolor sea real (equipos bloqueándose, builds de 20 minutos), migra. Los micro-frontends resuelven un problema organizacional, no técnico.

Buenas prácticas¶

Empieza con un monolito y migra solo si es necesario.
Design system compartido obligatorio.
Contratos claros entre shell y micro-frontends.
Versiona los remoteEntry.js para evitar roturas.
Observabilidad: logs, métricas y errores centralizados.
Rendimiento: lazy loading, prefetch inteligente.
CI/CD independiente por micro-frontend.
Mide el coste: la complejidad debe estar justificada.

El futuro¶

Los micro-frontends son una solución organizacional. Funcionan muy bien en empresas grandes (Spotify, IKEA, Zalando) pero son overkill para la mayoría de proyectos.

La tendencia actual es:

Monolitos modulares para equipos pequeños.
Server Components para reducir JavaScript.
Micro-frontends solo donde el tamaño lo exige.

Ejercicios¶

Piensa en una app grande que conozcas. ¿Cómo la dividirías en micro-frontends?
Crea dos apps pequeñas con Vite + Module Federation e intégralas.
Diseña un contrato de comunicación entre shell y micro-frontend usando Custom Events.
Explica qué es el "problema del CSS global" en micro-frontends y cómo lo resuelve Shadow DOM.
Lee el post original de Martin Fowler sobre micro-frontends y saca 3 conclusiones.

⬅️ Capítulo 35 — GraphQL | ➡️ Apéndices

🧠 Pon a prueba tus conocimientos¶

¿Cuándo tiene sentido usar micro-frontends?

Ejemplos¶

Código de ejemplo que acompaña a los capítulos del libro.

Galería de diagramas¶

Todos los diagramas visuales del libro, recopilados en una sola página.

Cómo están hechos

Todos los diagramas están hechos con Mermaid, un lenguaje de diagramas basado en texto. Se renderizan automáticamente en el navegador.

1. Cómo funciona la web¶

Ver en el capítulo original

sequenceDiagram
    participant U as Usuario
    participant N as Navegador
    participant S as Servidor
    participant B as Base de datos

    U->>N: Introduce URL
    N->>S: Petición HTTP
    S->>B: Consulta
    B-->>S: Datos
    S-->>N: Respuesta HTML
    N-->>U: Página renderizada

2. Flujo de trabajo con Git¶

Ver en el capítulo original

flowchart LR
    A[main] --> B[feature/nueva]
    B --> C[commits]
    C --> D[Pull Request]
    D --> E[merge a main]
    E --> F[main actualizado]

3. Capas de la cascada CSS¶

Ver en el capítulo original

flowchart TB
    A[Navegador] --> B[Estilos del usuario]
    B --> C[!important]
    C --> D[Estilos inline]
    D --> E[Media queries]
    E --> F[Especificidad y @layer]
    F --> G[Estilos del navegador]

4. Qué hace un bundler¶

Ver en el capítulo original

flowchart LR
    A[módulo1.js] --> D[Bundler]
    B[módulo2.js] --> D
    C[módulo3.js] --> D
    D --> E[Tree shaking]
    E --> F[Minificación]
    F --> G[app.min.js único]

5. Pirámide de testing¶

Ver en el capítulo original

flowchart TB
    A[E2E<br/>pocos, lentos] --> B[Integración<br/>algunos]
    B --> C[Unitarios<br/>muchos, rápidos]

    style A fill:#dc2626,color:white
    style B fill:#f59e0b,color:white
    style C fill:#16a34a,color:white

6. Estructura feature-first¶

Ver en el capítulo original

flowchart TB
    A[src/] --> B[features/]
    A --> C[shared/]
    A --> D[app/]
    B --> E[auth/]
    B --> F[carrito/]
    C --> G[components genéricos]
    D --> H[rutas, layouts]

7. Arquitectura full-stack¶

Ver en el capítulo original

flowchart LR
    A[Cliente<br/>Navegador] -->|HTTPS| B[Servidor<br/>Node.js + Express]
    B -->|Prisma| C[(PostgreSQL)]
    B -->|JWT| A
    B -->|API REST| D[Servicios externos]

8. Cómo funciona un Service Worker¶

Ver en el capítulo original

sequenceDiagram
    participant U as Usuario
    participant N as Navegador
    participant SW as Service Worker
    participant C as Caché
    participant S as Servidor

    U->>N: Pide una URL
    N->>SW: Intercepta la petición
    SW->>C: ¿Está en caché?
    alt En caché
        C-->>SW: Sí
        SW-->>N: Sirve desde caché
    else No está
        SW->>S: Pide a la red
        S-->>SW: Respuesta
        SW->>C: Guarda en caché
        SW-->>N: Sirve respuesta
    end
    N-->>U: Muestra la página

9. HTTP vs WebSocket¶

Ver en el capítulo original

sequenceDiagram
    participant C as Cliente
    participant S as Servidor

    Note over C,S: HTTP: conexión por cada petición
    C->>S: Petición 1
    S-->>C: Respuesta 1
    C->>S: Petición 2
    S-->>C: Respuesta 2

    Note over C,S: WebSocket: conexión persistente
    C->>S: Handshake (Upgrade)
    S-->>C: 101 Switching Protocols
    C->>S: Mensaje
    S-->>C: Mensaje
    S-->>C: Mensaje push
    C->>S: Mensaje

10. Pipeline de renderizado¶

Ver en el capítulo original

flowchart LR
    A[JavaScript] --> B[Style]
    B --> C[Layout]
    C --> D[Paint]
    D --> E[Composite]

    style A fill:#dc2626,color:white
    style E fill:#16a34a,color:white

11. Capas de seguridad¶

Ver en el capítulo original

flowchart TB
    A[Usuario] -->|HTTPS| B[CDN / Firewall]
    B --> C[Servidor]
    C -->|Validación Zod| D[Backend]
    D -->|Sanitización| E[(Base de datos)]

    style A fill:#a78bfa,color:white
    style E fill:#dc2626,color:white

12. Cómo se ejecuta WebAssembly¶

Ver en el capítulo original

sequenceDiagram
    participant U as Usuario
    participant N as Navegador
    participant JS as JavaScript
    participant W as WebAssembly

    U->>N: Carga la página
    N->>JS: Descarga app.js
    JS->>N: Pide modulo.wasm
    N-->>JS: Devuelve binario
    JS->>W: instantiate()
    JS->>W: Llama función exportada
    W-->>JS: Resultado
    JS-->>U: Actualiza la UI

13. Arquitectura WebXR¶

Ver en el capítulo original

flowchart TB
    A[Navegador] --> B[navigator.xr]
    B --> C{Session?}
    C -->|immersive-vr| D[Gafas VR]
    C -->|immersive-ar| E[Cámara AR]
    C -->|inline| F[Modo 3D sin gafas]
    D --> G[Renderizado 3D]
    E --> G
    F --> G

14. Cómo interactúa una dApp¶

Ver en el capítulo original

sequenceDiagram
    participant U as Usuario
    participant W as Wallet
    participant D as dApp
    participant C as Contrato
    participant B as Blockchain

    U->>D: Clic en "Conectar wallet"
    D->>W: eth_requestAccounts
    W-->>U: Pide permiso
    U-->>W: Acepta
    W-->>D: Dirección 0x...
    D->>C: Llama función
    C->>B: Transacción firmada
    B-->>C: Confirmación
    C-->>D: Evento emitido
    D-->>U: Actualiza UI

🛠️ Cómo se hacen estos diagramas¶

Todos están escritos en Mermaid, un lenguaje que permite describir diagramas con texto plano. MkDocs Material los renderiza automáticamente al construir el sitio.

Ventajas:

Versionables en Git como texto.
Editables por cualquiera.
Sin imágenes que actualizar.
Se adaptan al modo claro y oscuro del sitio.

Más información: mermaid.js.org

Ejercicios resueltos

Ejercicios resueltos¶

Soluciones comentadas a todos los ejercicios de los 30 capítulos del libro.

Cómo usar esta sección

Intenta resolver el ejercicio por tu cuenta primero.
Compara tu solución con la propuesta.
No hay una única forma correcta. La solución es solo una referencia.

📚 Índice¶

🤝 ¿Quieres aportar algo?¶

Si encuentras un error en alguna solución o quieres proponer una alternativa mejor:

Lee la guía de contribución.
Abre un issue.
Envía un Pull Request.

📊 Estado¶

Capítulos con solución publicada	30 de 30
Progreso	100% ✅

Última actualización: 2026-10-12

Ejercicios resueltos — Capítulo 1¶

Volver al índice · Capítulo original

Ejercicio 1: Tu primera página HTML¶

Crea tu primer archivo HTML con un título y un párrafo.

Solución¶

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi primera página</title>
</head>
<body>
  <h1>Hola, mundo</h1>
  <p>Esta es mi primera página web.</p>
</body>
</html>

Explicación: - <!DOCTYPE html> → indica al navegador que es HTML5. - <html lang="es"> → declara el idioma para accesibilidad y SEO. - <meta charset="UTF-8"> → codificación de caracteres (acentos, ñ, etc.). - <title> → aparece en la pestaña del navegador. - <h1> → título principal. Solo uno por página. - <p> → párrafo de texto.

Ejercicio 2: Ábrelo en el navegador¶

Abre el archivo y comprueba que se ve bien.

Solución¶

Guarda el archivo como index.html.
Haz doble clic sobre él.
Se abrirá en tu navegador por defecto.
Deberías ver el título grande y el párrafo debajo.

Si no se ve bien: - Comprueba que el archivo termina en .html y no en .txt. - Abre la consola (F12) y mira si hay errores. - Verifica que las etiquetas están cerradas correctamente.

Ejercicio 3: Cambia el color de fondo¶

Modifica el color de fondo con CSS en línea.

Solución¶

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi primera página</title>
</head>
<body style="background-color: #f8fafc; font-family: system-ui, sans-serif;">
  <h1 style="color: #6a5acd;">Hola, mundo</h1>
  <p style="color: #1e293b;">Esta es mi primera página web.</p>
</body>
</html>

Explicación:

style="background-color: ..." → aplica CSS directo al elemento.
#f8fafc → color en hexadecimal (gris muy claro).
font-family: system-ui → usa la fuente del sistema.
color: #6a5acd → cambia el color del texto a morado.

Mejor con CSS externo

El CSS en línea funciona, pero se considera mala práctica. En el Capítulo 3 verás cómo hacerlo bien con un archivo externo.

Ejercicio 4: Añade un enlace¶

Añade un enlace a tu web favorita.

Solución¶

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi primera página</title>
</head>
<body>
  <h1>Hola, mundo</h1>
  <p>Esta es mi primera página web.</p>
  <p>
    Visita
    <a href="https://developer.mozilla.org/es/" target="_blank" rel="noopener">
      MDN Web Docs
    </a>
    para aprender más.
  </p>
</body>
</html>

Explicación:

<a href="..."> → crea un enlace.
target="_blank" → abre el enlace en una pestaña nueva.
rel="noopener" → importante por seguridad. Evita que la web de destino pueda manipular la tuya.

Nunca olvides rel=\"noopener\"

Cuando uses target="_blank", añade siempre rel="noopener" o rel="noopener noreferrer". Es una medida de seguridad básica.

Volver al índice · Capítulo original

Ejercicios resueltos — Capítulo 2¶

Volver al índice · Capítulo original

Ejercicio 1: Estructura con h1, párrafos y lista¶

Crea un archivo index.html con un <h1>, dos <p> y una lista.

Solución¶

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi biografía</title>
</head>
<body>
  <h1>Mi biografía</h1>

  <p>Hola, me llamo Urukais y soy desarrollador web.</p>
  <p>Llevo años construyendo proyectos en internet y me encanta enseñar lo que aprendo.</p>

  <h2>Mis aficiones</h2>
  <ul>
    <li>Programar</li>
    <li>Leer</li>
    <li>Escuchar música</li>
  </ul>
</body>
</html>

Explicación: - Un solo <h1> (el título principal). - <h2> para subsecciones. - <ul> → lista desordenada (con viñetas). - Cada ítem va dentro de un <li>.

Ejercicio 2: Enlace a tu web favorita¶

Añade un enlace a tu web favorita.

Solución¶

<p>
  Mi web favorita es
  <a href="https://developer.mozilla.org/es/" target="_blank" rel="noopener">
    MDN Web Docs
  </a>.
</p>

Ejercicio 3: Imagen con alt descriptivo¶

Inserta una imagen con alt descriptivo.

Solución¶

<figure>
  <img
    src="https://picsum.photos/400/300"
    alt="Fotografía aleatoria de un paisaje"
    width="400"
    height="300"
    loading="lazy"
  >
  <figcaption>Una imagen cualquiera</figcaption>
</figure>

Explicación:

alt → describe la imagen. Esencial para accesibilidad.
width y height → evitan que el layout salte al cargar.
loading="lazy" → carga la imagen solo cuando va a aparecer.
<figure> + <figcaption> → imagen con pie de foto semántico.

Cómo escribir buen alt

Pregúntate: si no pudiera ver la imagen, ¿qué información perdería? Eso es lo que va en el alt. Si la imagen es puramente decorativa, usa alt="" (vacío).

Ejercicio 4: Tabla de datos¶

Crea una tabla con 3 columnas y 3 filas de datos.

Solución¶

<table>
  <thead>
    <tr>
      <th>Tecnología</th>
      <th>Uso</th>
      <th>Año de creación</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>Estructura</td>
      <td>1993</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>Estilos</td>
      <td>1996</td>
    </tr>
    <tr>
      <td>JavaScript</td>
      <td>Interactividad</td>
      <td>1995</td>
    </tr>
  </tbody>
</table>

Explicación:

<thead> → cabecera de la tabla.
<tbody> → cuerpo de la tabla.
<th> → celda de cabecera (en negrita por defecto).
<td> → celda de datos.

Volver al índice · Capítulo original

Ejercicios resueltos — Capítulo 3¶

Volver al índice · Capítulo original

Ejercicio 1: Color de fondo del body¶

Cambia el color de fondo del body a un tono claro.

Solución¶

body {
  background-color: #f8fafc;
  margin: 0;
  padding: 2rem;
}

Explicación:

#f8fafc → gris muy claro, ideal para fondos.
margin: 0 → quita el margen por defecto del navegador.
padding: 2rem → añade espacio interior.

Ejercicio 2: Tipografía distinta para h1¶

Aplica una tipografía distinta a los h1.

Solución¶

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap');

h1 {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 2.5rem;
  letter-spacing: -0.02em;
}

Explicación:

@import → carga la fuente desde Google Fonts.
font-family → lista de fuentes en orden de preferencia.
system-ui, sans-serif → fallback si Inter no carga.
letter-spacing: -0.02em → acerca un poco las letras (truco tipográfico).

Alternativa sin dependencias externas

Puedes usar solo fuentes del sistema:

h1 {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

Es más rápido y no depende de Google.

Ejercicio 3: Clase `.destacado`¶

Crea una clase .destacado y úsala en un párrafo.

Solución¶

<p class="destacado">
  Este párrafo lleva un estilo distinto para resaltar.
</p>

.destacado {
  background: #fef3c7;
  border-left: 4px solid #f59e0b;
  padding: 1rem 1.25rem;
  border-radius: 4px;
  font-weight: 500;
}

Explicación:

.destacado → clase que se aplica con class="destacado".
border-left → barra lateral de color.
padding con dos valores → 1rem arriba/abajo, 1.25rem izquierda/derecha.

Ejercicio 4: Padding y border a un div¶

Añade padding y border a un <div>.

Solución¶

<div class="caja">
  Contenido dentro de la caja.
</div>

.caja {
  padding: 1.5rem;
  border: 2px solid #6a5acd;
  border-radius: 12px;
  background: #fff;
  max-width: 500px;
  margin: 2rem auto;
  box-shadow: 0 4px 12px rgba(106, 90, 205, 0.15);
}

Explicación:

padding → espacio interior.
border: 2px solid color → borde sólido.
border-radius → esquinas redondeadas.
margin: 2rem auto → auto centra horizontalmente el div.
box-shadow → sombra suave.

Volver al índice · Capítulo original

Ejercicios resueltos — Capítulo 4¶

Volver al índice · Capítulo original

Ejercicio 1: Botón que cambia el color de fondo¶

Crea un botón que cambie el color de fondo del body.

Solución¶

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Cambiar fondo</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      transition: background-color 300ms ease;
      padding: 2rem;
    }
    button {
      padding: 0.75rem 1.5rem;
      border: none;
      border-radius: 8px;
      background: #6a5acd;
      color: white;
      cursor: pointer;
      font-size: 1rem;
    }
  </style>
</head>
<body>
  <button id="btn">Cambiar fondo</button>

  <script>
    const colores = ['#f8fafc', '#fef3c7', '#dbeafe', '#fce7f3', '#dcfce7'];
    let indice = 0;

    const btn = document.getElementById('btn');

    btn.addEventListener('click', () => {
      indice = (indice + 1) % colores.length;
      document.body.style.backgroundColor = colores[indice];
    });
  </script>
</body>
</html>

Explicación:

Array de colores → alterna entre ellos con cada clic.
% colores.length → reinicia al principio cuando llegue al final.
transition en CSS → hace que el cambio sea suave.

Ejercicio 2: Mensaje con prompt¶

Muestra un mensaje con el nombre del usuario usando prompt().

Solución¶

const nombre = prompt('¿Cómo te llamas?');

if (nombre) {
  alert(`¡Hola, ${nombre}! Bienvenido al libro.`);
} else {
  alert('No has escrito tu nombre.');
}

Explicación:

prompt() → abre un cuadro de diálogo pidiendo texto.
Devuelve null si el usuario cancela.
Comprobamos con if (nombre) antes de usarlo.

prompt() es intrusivo

En proyectos reales, prompt() molesta al usuario. Usa un formulario o un modal propio.

Ejercicio 3: Suma de un array¶

Recorre un array de números y muestra la suma en consola.

Solución¶

const numeros = [5, 10, 15, 20, 25];

// Opción 1: bucle tradicional
let suma = 0;
for (let i = 0; i < numeros.length; i++) {
  suma += numeros[i];
}
console.log('Suma (for):', suma);

// Opción 2: forEach
let suma2 = 0;
numeros.forEach(n => suma2 += n);
console.log('Suma (forEach):', suma2);

// Opción 3: reduce (la más elegante)
const suma3 = numeros.reduce((acc, n) => acc + n, 0);
console.log('Suma (reduce):', suma3);

Explicación:

for clásico: útil para controlar el índice.
forEach: más limpio cuando solo recorres.
reduce: la forma idiomática de acumular.

reduce((acc, n) => acc + n, 0) significa: empieza con 0, y por cada número ve sumando.

Ejercicio 4: Filtrar números pares¶

Filtra los números pares de un array y muéstralos.

Solución¶

const numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const pares = numeros.filter(n => n % 2 === 0);
console.log(pares); // [2, 4, 6, 8, 10]

// Versión con map para multiplicar los pares
const dobles = pares.map(n => n * 2);
console.log(dobles); // [4, 8, 12, 16, 20]

Explicación:

filter() → devuelve un nuevo array con los elementos que cumplen la condición.
n % 2 === 0 → el resto de dividir entre 2 es 0 → par.
map() → transforma cada elemento.

Volver al índice · Capítulo original

Ejercicios resueltos — Capítulo 5¶

Volver al índice · Capítulo original

Ejercicio 1: Tarjeta con layout adaptativo¶

Crea una tarjeta que cambie de una columna (móvil) a dos (desktop).

Solución¶

.tarjeta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1rem;
}

@media (min-width: 640px) {
  .tarjeta {
    grid-template-columns: 200px 1fr;
    align-items: center;
  }
}

Explicación: - Mobile-first: por defecto una columna. - @media (min-width: 640px) añade la segunda columna. - 1fr → ocupa el espacio disponible.

Ejercicio 2: Centrado con Flexbox¶

Usa Flexbox para centrar un elemento vertical y horizontalmente.

Solución¶

.contenedor {
  display: flex;
  justify-content: center;   /* horizontal */
  align-items: center;       /* vertical */
  min-height: 100vh;
  background: #f8fafc;
}

.contenido {
  text-align: center;
}

<div class="contenedor">
  <div class="contenido">
    <h1>Centrado</h1>
    <p>Con Flexbox es trivial.</p>
  </div>
</div>

Explicación: - min-height: 100vh → altura mínima de la pantalla completa. - justify-content → eje principal (horizontal por defecto). - align-items → eje cruzado (vertical).

Ejercicio 3: Cuadrícula responsive¶

Crea una cuadrícula de 3 columnas que se convierta en 1 en móvil.

Solución¶

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1rem;
}

@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

Alternativa sin media queries: auto-fit + minmax:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

Esta versión se adapta sola sin media queries.

Ejercicio 4: Tipografía fluida¶

Crea un título con tipografía fluida usando clamp().

Solución¶

h1 {
  font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

Explicación: - clamp(min, ideal, max) → 1.5rem mínimo, 3rem máximo. - 4vw + 1rem → crece con el viewport pero no linealmente.

Volver al índice · Capítulo original

Ejercicios resueltos — Capítulo 6¶

Volver al índice · Capítulo original

Ejercicio 1: Formulario de contacto¶

Crea un formulario de contacto con nombre, email y mensaje.

Solución¶

<form action="/enviar" method="POST">
  <label for="nombre">Nombre</label>
  <input type="text" id="nombre" name="nombre" required minlength="2" maxlength="50">

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>

  <label for="mensaje">Mensaje</label>
  <textarea id="mensaje" name="mensaje" rows="5" required minlength="10"></textarea>

  <button type="submit">Enviar</button>
</form>

Explicación: - Cada <input> con su <label> asociado por for/id. - required → validación nativa. - minlength y maxlength → limitan la longitud.

Ejercicio 2: Validación de email obligatoria¶

Añade validación para que el email sea obligatorio.

Solución¶

<input
  type="email"
  id="email"
  name="email"
  required
  placeholder="tu@email.com"
  pattern="[^@\s]+@[^@\s]+\.[^@\s]+"
  title="Introduce un email válido"
>

Explicación: - type="email" → el navegador valida el formato. - pattern → expresión regular adicional. - title → mensaje de error personalizado.

Valida también en el servidor

La validación del navegador es solo para UX. Nunca confíes en ella como seguridad. Valida siempre en el backend.

Ejercicio 3: Mostrar datos en consola¶

Muestra en consola los datos al enviar.

Solución¶

<form id="mi-form">
  <label for="nombre">Nombre</label>
  <input type="text" id="nombre" name="nombre" required>

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>

  <button type="submit">Enviar</button>
</form>

<script>
  const form = document.getElementById('mi-form');

  form.addEventListener('submit', (e) => {
    e.preventDefault();
    const datos = new FormData(form);
    const objeto = Object.fromEntries(datos.entries());
    console.log('Datos del formulario:', objeto);
    form.reset();
  });
</script>

Explicación: - e.preventDefault() → evita el envío por defecto. - FormData → recoge todos los campos. - Object.fromEntries() → convierte a objeto JS.

Volver al índice · Capítulo original

Ejercicios resueltos — Capítulo 7¶

Volver al índice · Capítulo original

Ejercicio 1: Crear un repositorio y subirlo¶

Crea un repositorio nuevo en GitHub y súbelo desde tu ordenador.

Solución¶

# En GitHub: crear repositorio vacío (sin README, sin .gitignore)

# En local:
mkdir mi-proyecto && cd mi-proyecto
git init
git branch -M main

echo "# Mi proyecto" > README.md
git add README.md
git commit -m "chore: primer commit"

git remote add origin https://github.com/TU_USUARIO/mi-proyecto.git
git push -u origin main

Explicación: - git init → crea el repositorio local. - git branch -M main → renombra la rama a main (estándar actual). - git push -u origin main → sube y establece el upstream.

Ejercicio 2: Crear rama, cambio y merge¶

Crea una rama, haz un cambio, fusiónala con main.

Solución¶

git checkout -b feature/saludo
echo "Hola" > saludo.txt
git add saludo.txt
git commit -m "feat: añadir saludo"

git checkout main
git merge feature/saludo
git push

Explicación: - -b → crea y cambia a la rama nueva. - El merge se hace desde main (la rama destino). - Después puedes borrar la rama: git branch -d feature/saludo.

Ejercicio 3: Ver el historial¶

Practica git log --graph --oneline --all.

Solución¶

git log --graph --oneline --all

Salida típica:

* 3a4b5c6 (HEAD -> main) feat: añadir saludo
* 1f2e3d4 chore: primer commit

Con ramas y merges se ve más útil:

*   merge commit
|\
| * feat: nueva funcionalidad
|/
* chore: base

Ejercicio 4: `.gitignore`¶

Añade un .gitignore que excluya node_modules/ y .env.

Solución¶

Archivo .gitignore:

# Dependencias
node_modules/

# Variables de entorno
.env
.env.local

# Sistema
.DS_Store
Thumbs.db

# Editor
.vscode/
.idea/

# Build
dist/
build/

Comandos para aplicarlo:

git add .gitignore
git commit -m "chore: añadir .gitignore"
git push

Si ya has subido algo por error

git rm --cached archivo-indeseado.txt
git commit -m "chore: quitar archivo del repo"

El --cached mantiene el archivo en disco pero lo quita del control de versiones.

Volver al índice · Capítulo original

Ejercicios resueltos — Capítulo 8¶

Volver al índice · Capítulo original

Ejercicio 1: Lista de usuarios¶

Muestra una lista de usuarios de jsonplaceholder.typicode.com/users.

Solución¶

<ul id="lista"></ul>

<script>
  async function cargarUsuarios() {
    const res = await fetch('https://jsonplaceholder.typicode.com/users');
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const usuarios = await res.json();

    const lista = document.getElementById('lista');
    lista.innerHTML = usuarios
      .map(u => `<li><strong>${u.name}</strong> — ${u.email}</li>`)
      .join('');
  }

  cargarUsuarios().catch(err => console.error(err));
</script>

Cuidado con innerHTML

Aquí innerHTML es seguro porque los datos vienen de una API fiable. Con datos del usuario, usa textContent o escapa el HTML.

Ejercicio 2: Buscar usuarios por nombre¶

Añade un input para buscar usuarios por nombre.

Solución¶

<input type="text" id="buscar" placeholder="Buscar...">
<ul id="lista"></ul>

<script>
  let usuarios = [];

  async function cargar() {
    const res = await fetch('https://jsonplaceholder.typicode.com/users');
    usuarios = await res.json();
    render(usuarios);
  }

  function render(lista) {
    document.getElementById('lista').innerHTML = lista
      .map(u => `<li>${u.name}</li>`)
      .join('');
  }

  document.getElementById('buscar').addEventListener('input', (e) => {
    const texto = e.target.value.toLowerCase();
    const filtrados = usuarios.filter(u =>
      u.name.toLowerCase().includes(texto)
    );
    render(filtrados);
  });

  cargar();
</script>

Ejercicio 3: Mensaje de "Cargando…"¶

Muestra un mensaje mientras llega la respuesta.

Solución¶

<div id="estado"></div>
<ul id="lista"></ul>

<script>
  async function cargar() {
    const estado = document.getElementById('estado');
    const lista = document.getElementById('lista');

    estado.textContent = 'Cargando…';
    lista.innerHTML = '';

    try {
      const res = await fetch('https://jsonplaceholder.typicode.com/users');
      const usuarios = await res.json();
      lista.innerHTML = usuarios.map(u => `<li>${u.name}</li>`).join('');
      estado.textContent = `${usuarios.length} usuarios cargados`;
    } catch (err) {
      estado.textContent = `Error: ${err.message}`;
    }
  }

  cargar();
</script>

Ejercicio 4: Manejo de error 404¶

Maneja el error cuando la API devuelve 404.

Solución¶

async function obtener(url) {
  try {
    const res = await fetch(url);
    if (!res.ok) {
      if (res.status === 404) throw new Error('Recurso no encontrado');
      throw new Error(`HTTP ${res.status}`);
    }
    return await res.json();
  } catch (err) {
    console.error('Fallo:', err.message);
    return null;
  }
}

// Prueba con URL inexistente
obtener('https://jsonplaceholder.typicode.com/inexistente');

Volver al índice · Capítulo original

Ejercicios resueltos — Capítulo 9¶

Volver al índice · Capítulo original

Ejercicio 1: Subir a GitHub Pages¶

Sube un proyecto simple a GitHub Pages.

Solución¶

Crea el repo en GitHub y sube tu código.
Settings → Pages.
Source: Deploy from a branch.
Branch: main / / (root).
Save.
En 1-2 min, tu web está en https://TU_USUARIO.github.io/TU_REPO/.

Ejemplo de proyecto mínimo:

mi-web/
├── index.html
├── estilos.css
└── app.js

Ejercicio 2: Desplegar en Netlify¶

Conecta un repositorio a Netlify.

Solución¶

Regístrate en netlify.com con GitHub.
Add new site → Import an existing project.
Elige el repositorio.
Configura:
Build command: (vacío si es estático puro)
Publish directory: . o dist
Deploy site.

Cada push a main dispara un nuevo deploy automáticamente.

Ejercicio 3: GitHub Action de lint¶

Añade una GitHub Action que ejecute un linter en cada push.

Solución¶

.github/workflows/lint.yml:

name: Lint

on:
  push:
    branches: [main]
  pull_request:

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm

      - run: npm ci
      - run: npm run lint

package.json con el script:

{
  "scripts": {
    "lint": "eslint src"
  }
}

Ejercicio 4: Dominio propio¶

Configura un dominio propio (si tienes uno).

Solución¶

En GitHub Pages:

Settings → Pages → Custom domain → escribe tudominio.com.
En tu registrador, añade:
CNAME www → tu-usuario.github.io
A @ → 185.199.108.153 (y los otros 3).
Espera la verificación (5 min - 24 h).
Activa Enforce HTTPS.

Volver al índice · Capítulo original

Ejercicios resueltos — Capítulo 10¶

Volver al índice · Capítulo original

Ejercicio 1: Personalizar colores y tipografía¶

Personaliza colores y tipografía a tu gusto.

Solución¶

:root {
  --color-primary: #6a5acd;
  --color-accent: #22d3ee;
  --color-bg: #ffffff;
  --color-text: #1e293b;
  --font-main: 'Inter', system-ui, sans-serif;
}

body {
  font-family: var(--font-main);
  background: var(--color-bg);
  color: var(--color-text);
}

a {
  color: var(--color-primary);
}

.hero h1 {
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Ejercicio 2: Sección "Sobre mí"¶

Añade una sección con tu foto.

Solución¶

<section id="sobre-mi" class="sobre-mi">
  <img src="img/perfil.jpg" alt="Foto de Tu Nombre" class="perfil">
  <div>
    <h2>Sobre mí</h2>
    <p>Soy desarrollador web con experiencia en frontend...</p>
  </div>
</section>

.sobre-mi {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 2rem;
  align-items: center;
  max-width: 800px;
  margin: 4rem auto;
  padding: 0 1rem;
}

.perfil {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
}

@media (max-width: 600px) {
  .sobre-mi {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

Ejercicio 3: Formulario de contacto con Formspree¶

Crea un formulario de contacto funcional.

Solución¶

<form action="https://formspree.io/f/TU_ID" method="POST">
  <label for="nombre">Nombre</label>
  <input type="text" id="nombre" name="nombre" required>

  <label for="email">Email</label>
  <input type="email" id="email" name="_replyto" required>

  <label for="mensaje">Mensaje</label>
  <textarea id="mensaje" name="mensaje" rows="5" required></textarea>

  <button type="submit">Enviar</button>
</form>

Regístrate gratis en formspree.io, crea un form y sustituye TU_ID.

Ejercicio 4: Modo oscuro¶

Añade modo oscuro con un botón.

Solución¶

<button id="toggle-tema" aria-label="Cambiar tema">🌙</button>

<script>
  const btn = document.getElementById('toggle-tema');

  btn.addEventListener('click', () => {
    const actual = document.documentElement.dataset.theme;
    const nuevo = actual === 'dark' ? 'light' : 'dark';
    document.documentElement.dataset.theme = nuevo;
    btn.textContent = nuevo === 'dark' ? '☀️' : '🌙';
    localStorage.setItem('tema', nuevo);
  });

  // Cargar preferencia guardada
  const guardado = localStorage.getItem('tema') || 'light';
  document.documentElement.dataset.theme = guardado;
  btn.textContent = guardado === 'dark' ? '☀️' : '🌙';
</script>

:root {
  --bg: #ffffff;
  --text: #1e293b;
}

[data-theme="dark"] {
  --bg: #0f172a;
  --text: #e2e8f0;
}

body {
  background: var(--bg);
  color: var(--text);
  transition: background 300ms, color 300ms;
}

Volver al índice · Capítulo original

Ejercicios resueltos — Capítulo 11¶

Volver al índice · Capítulo original

Ejercicio 1: Sistema de temas con custom properties¶

Crea un sistema de temas (claro/oscuro) usando solo custom properties.

Solución¶

:root {
  --bg: #ffffff;
  --surface: #f8fafc;
  --text: #1e293b;
  --muted: #64748b;
  --border: #e2e8f0;
}

[data-theme="dark"] {
  --bg: #0f172a;
  --surface: #1e293b;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --border: #334155;
}

body {
  background: var(--bg);
  color: var(--text);
  transition: background 300ms, color 300ms;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}

document.documentElement.dataset.theme =
  localStorage.getItem('tema') || 'light';

Ejercicio 2: Tarjeta con `@container`¶

Diseña una tarjeta que cambie de layout según el ancho de su contenedor.

Solución¶

.tarjeta-wrapper {
  container-type: inline-size;
  container-name: tarjeta;
}

.tarjeta {
  display: grid;
  gap: 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1rem;
}

@container tarjeta (min-width: 400px) {
  .tarjeta {
    grid-template-columns: 120px 1fr;
    align-items: center;
  }
}

Explicación: La tarjeta se adapta a su contenedor, no al viewport. Reutilizable en cualquier contexto.

Ejercicio 3: `:has()` para formularios¶

Resalta un formulario cuando tiene un campo inválido.

Solución¶

.formulario:has(input:invalid) {
  border-color: #dc2626;
  background: #fef2f2;
}

.formulario:has(input:valid) button[type="submit"] {
  opacity: 1;
  pointer-events: auto;
}

.formulario button[type="submit"] {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 200ms;
}

Ejercicio 4: Tipografía fluida¶

Implementa un título con tipografía fluida usando clamp().

Solución¶

h1 {
  font-size: clamp(1.75rem, 4vw + 1rem, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

h2 {
  font-size: clamp(1.25rem, 2vw + 0.75rem, 2rem);
}

p {
  font-size: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
}

Ejercicio 5: Capas con `@layer`¶

Organiza tus estilos en 4 capas: reset, base, components y utilities.

Solución¶

@layer reset, base, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; }
}

@layer base {
  body {
    font-family: system-ui, sans-serif;
    line-height: 1.6;
  }
  a { color: #6a5acd; }
}

@layer components {
  .btn {
    background: #6a5acd;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 8px;
  }
}

@layer utilities {
  .text-center { text-align: center; }
  .mt-4 { margin-top: 1rem; }
}

Volver al índice · Capítulo original

Ejercicios resueltos — Capítulo 12¶

Volver al índice · Capítulo original

Ejercicio 1: Callbacks a async/await¶

Reescribe un callback anidado de tres niveles usando async/await.

Antes¶

login(usuario, (err, sesion) => {
  obtenerPerfil(sesion.id, (err, perfil) => {
    obtenerPosts(perfil.id, (err, posts) => {
      console.log(posts);
    });
  });
});

Solución¶

async function cargarDatos(usuario) {
  try {
    const sesion = await login(usuario);
    const perfil = await obtenerPerfil(sesion.id);
    const posts = await obtenerPosts(perfil.id);
    return posts;
  } catch (err) {
    console.error('Error:', err.message);
  }
}

Ejercicio 2: Timeout con `AbortController`¶

Implementa una función buscarConTimeout(url, ms) que aborte la petición si excede el tiempo.

Solución¶

async function buscarConTimeout(url, ms = 5000) {
  const controller = new AbortController();
  const timer = setTimeout(() => controller.abort(), ms);

  try {
    const res = await fetch(url, { signal: controller.signal });
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return await res.json();
  } catch (err) {
    if (err.name === 'AbortError') {
      throw new Error('Timeout: la petición tardó demasiado');
    }
    throw err;
  } finally {
    clearTimeout(timer);
  }
}

// Uso
try {
  const datos = await buscarConTimeout('https://api.com/datos', 3000);
} catch (err) {
  console.error(err.message);
}

Ejercicio 3: Descargas paralelas¶

Simula un sistema de descargas con Promise.all y muestra progreso.

Solución¶

async function descargarTodo(urls) {
  let completadas = 0;

  const tareas = urls.map(async (url) => {
    const res = await fetch(url);
    completadas++;
    console.log(`Progreso: ${completadas}/${urls.length}`);
    return res.json();
  });

  return Promise.all(tareas);
}

const urls = [
  'https://jsonplaceholder.typicode.com/posts/1',
  'https://jsonplaceholder.typicode.com/posts/2',
  'https://jsonplaceholder.typicode.com/posts/3',
];

const resultados = await descargarTodo(urls);

Ejercicio 4: Buscador con debounce¶

Crea un buscador con debounce que consulte una API al escribir.

Solución¶

function debounce(fn, ms) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), ms);
  };
}

const input = document.querySelector('#buscar');
const resultados = document.querySelector('#resultados');

const buscar = debounce(async (texto) => {
  if (texto.length < 3) return;

  try {
    const res = await fetch(`/api/buscar?q=${encodeURIComponent(texto)}`);
    const datos = await res.json();
    resultados.innerHTML = datos
      .map(d => `<li>${d.nombre}</li>`)
      .join('');
  } catch (err) {
    console.error(err);
  }
}, 300);

input.addEventListener('input', (e) => buscar(e.target.value));

Ejercicio 5: Reintentos con backoff exponencial¶

Implementa un patrón de reintento con 3 intentos y espera exponencial.

Solución¶

const esperar = (ms) => new Promise(r => setTimeout(r, ms));

async function fetchConReintentos(url, intentos = 3) {
  for (let i = 0; i < intentos; i++) {
    try {
      const res = await fetch(url);
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      return await res.json();
    } catch (err) {
      if (i === intentos - 1) throw err;
      const espera = 2 ** i * 1000; // 1s, 2s, 4s...
      console.warn(`Reintentando en ${espera}ms...`);
      await esperar(espera);
    }
  }
}

Volver al índice · Capítulo original

Ejercicios resueltos — Capítulo 13¶

Volver al índice · Capítulo original

Ejercicio 1: Crear un proyecto con Vite¶

Crea un proyecto con npm create vite@latest y añade un módulo propio.

Solución¶

npm create vite@latest mi-app -- --template vanilla
cd mi-app
npm install
npm run dev

Crea src/saludo.js:

export function saludar(nombre) {
  return `Hola, ${nombre}`;
}

Y en src/main.js:

import { saludar } from './saludo.js';
document.querySelector('#app').innerHTML = `<h1>${saludar('Urukais')}</h1>`;

Ejercicio 2: Named exports¶

Exporta dos funciones y un valor con named exports.

Solución¶

// utilidades.js
export const VERSION = '1.0.0';

export function sumar(a, b) {
  return a + b;
}

export function restar(a, b) {
  return a - b;
}

// main.js
import { VERSION, sumar, restar } from './utilidades.js';

console.log(VERSION); // '1.0.0'
console.log(sumar(2, 3)); // 5
console.log(restar(5, 2)); // 3

Ejercicio 3: Import dinámico¶

Usa import dinámico para cargar un módulo solo al pulsar un botón.

Solución¶

<button id="btn">Abrir modal</button>

<script>
  document.getElementById('btn').addEventListener('click', async () => {
    const { abrirModal } = await import('./modal.js');
    abrirModal('¡Hola desde el modal!');
  });
</script>

// modal.js
export function abrirModal(mensaje) {
  const div = document.createElement('div');
  div.className = 'modal';
  div.innerHTML = `
    <div class="modal-content">
      <p>${mensaje}</p>
      <button onclick="this.closest('.modal').remove()">Cerrar</button>
    </div>
  `;
  document.body.appendChild(div);
}

Ejercicio 4: Instalar dependencias¶

Añade axios como dependencia y vitest como dev-dependency.

Solución¶

npm install axios
npm install -D vitest

Comprueba el package.json:

{
  "dependencies": {
    "axios": "^1.7.0"
  },
  "devDependencies": {
    "vitest": "^2.0.0"
  }
}

Añade script:

{
  "scripts": {
    "test": "vitest"
  }
}

Ejercicio 5: Alias `@/`¶

Configura un alias @/ que apunte a src/.

Solución¶

vite.config.js:

import { defineConfig } from 'vite';
import path from 'node:path';

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

Uso:

// Antes
import { algo } from '../../utils/algo.js';

// Ahora
import { algo } from '@/utils/algo.js';

Volver al índice · Capítulo original

Ejercicios resueltos — Capítulo 14¶

Volver al índice · Capítulo original

Ejercicio 1: Auditar con Lighthouse¶

Audita tu portfolio con Lighthouse y corrige los problemas.

Solución¶

Pasos:

Abre DevTools con F12.
Ve a la pestaña Lighthouse.
Marca solo Accessibility.
Pulsa Analyze page load.
Revisa los problemas y corrígelos uno a uno.

Problemas típicos y sus soluciones:

Problema	Solución
Imágenes sin `alt`	Añade `alt` descriptivo
Contraste insuficiente	Ajusta los colores (AA mínimo)
`<html>` sin `lang`	Añade `lang="es"`
Botones sin nombre	Añade texto visible o `aria-label`
Orden de encabezados	Usa `h1` → `h2` → `h3` sin saltos

Ejercicio 2: Navegar con `Tab`¶

Navega toda la home solo con la tecla Tab.

Solución¶

Cómo comprobar:

Recarga la página.
Pulsa Tab repetidamente.
Comprueba:
¿Ves dónde está el foco?
¿Puedes llegar a todos los enlaces y botones?
¿Puedes activarlos con Enter o Espacio?

Si el foco no se ve, arregla el CSS:

:focus-visible {
  outline: 3px solid #6a5acd;
  outline-offset: 2px;
  border-radius: 4px;
}

Añade un skip link y verifícalo con el teclado.

Solución¶

<a href="#main" class="skip-link">Saltar al contenido principal</a>

<nav>...</nav>

<main id="main">
  <!-- contenido -->
</main>

.skip-link {
  position: absolute;
  top: -60px;
  left: 1rem;
  background: #6a5acd;
  color: white;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  text-decoration: none;
  z-index: 1000;
  transition: top 200ms;
}

.skip-link:focus {
  top: 1rem;
}

Verificación: recarga y pulsa Tab. El skip link debe aparecer arriba a la izquierda.

Ejercicio 4: Formulario accesible¶

Crea un formulario accesible con errores bien asociados.

Solución¶

<form novalidate>
  <label for="email">Correo electrónico</label>
  <input
    type="email"
    id="email"
    name="email"
    required
    aria-describedby="email-error"
    aria-invalid="false"
  >
  <p id="email-error" role="alert" hidden>
    El correo no tiene un formato válido.
  </p>

  <button type="submit">Enviar</button>
</form>

<script>
  const form = document.querySelector('form');
  const email = document.getElementById('email');
  const error = document.getElementById('email-error');

  form.addEventListener('submit', (e) => {
    e.preventDefault();

    if (!email.validity.valid) {
      email.setAttribute('aria-invalid', 'true');
      error.hidden = false;
      email.focus();
    } else {
      email.setAttribute('aria-invalid', 'false');
      error.hidden = true;
      console.log('Formulario válido');
    }
  });
</script>

Ejercicio 5: `prefers-reduced-motion`¶

Implementa prefers-reduced-motion en tus animaciones.

Solución¶

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

O selectivo: solo desactiva las animaciones grandes.

@media (prefers-reduced-motion: reduce) {
  .animacion-grande {
    animation: none;
  }
}

Volver al índice · Capítulo original

Ejercicios resueltos — Capítulo 15¶

Volver al índice · Capítulo original

Ejercicio 1: Función tipada¶

Convierte una función JavaScript sin tipos a TypeScript con parámetros y retorno tipados.

Antes¶

function sumar(a, b) {
  return a + b;
}

Solución¶

function sumar(a: number, b: number): number {
  return a + b;
}

// Con parámetros opcionales
function saludar(nombre: string, saludo?: string): string {
  return `${saludo ?? 'Hola'}, ${nombre}`;
}

// Arrow function tipada
const multiplicar = (a: number, b: number): number => a * b;

Ejercicio 2: Interface Producto¶

Crea una interface Producto con id, nombre, precio y categorias (array).

Solución¶

interface Producto {
  id: number;
  nombre: string;
  precio: number;
  categorias: string[];
  descripcion?: string; // opcional
  readonly creado: Date; // no modificable
}

const camiseta: Producto = {
  id: 1,
  nombre: 'Camiseta',
  precio: 29.99,
  categorias: ['ropa', 'hombre'],
  creado: new Date(),
};

Ejercicio 3: Genérico `ultimo`¶

Escribe una función genérica ultimo<T>(array: T[]): T | undefined.

Solución¶

function ultimo<T>(array: T[]): T | undefined {
  return array[array.length - 1];
}

ultimo([1, 2, 3]); // number | undefined → 3
ultimo(['a', 'b']); // string | undefined → 'b'
ultimo([{ id: 1 }, { id: 2 }]); // { id: number } | undefined

Ejercicio 4: Type unión `Resultado`¶

Define un type unión Resultado.

Solución¶

type Resultado =
  | { ok: true; datos: string }
  | { ok: false; error: string };

function procesar(resultado: Resultado) {
  if (resultado.ok) {
    console.log('Datos:', resultado.datos); // TS sabe que es { ok: true, datos }
  } else {
    console.error('Error:', resultado.error); // TS sabe que es { ok: false, error }
  }
}

Ejercicio 5: `Partial<Producto>`¶

Usa Partial<Producto> para escribir una función actualizarProducto.

Solución¶

function actualizarProducto(
  id: number,
  cambios: Partial<Producto>
): Producto {
  const producto = obtenerProducto(id);

  return {
    ...producto,
    ...cambios,
    id: producto.id, // el id no se puede cambiar
  };
}

// Uso: solo pasas los campos que cambian
actualizarProducto(1, { precio: 24.99 });
actualizarProducto(2, { nombre: 'Nuevo nombre', categorias: ['oferta'] });

Ejercicio 6: Clase Carrito¶

Escribe una clase Carrito con métodos añadir, total y vaciar.

Solución¶

interface Item {
  nombre: string;
  precio: number;
}

class Carrito {
  private items: Item[] = [];

  añadir(item: Item): void {
    this.items.push(item);
  }

  total(): number {
    return this.items.reduce((sum, item) => sum + item.precio, 0);
  }

  vaciar(): void {
    this.items = [];
  }

  get cantidad(): number {
    return this.items.length;
  }
}

const carrito = new Carrito();
carrito.añadir({ nombre: 'Camiseta', precio: 29.99 });
carrito.añadir({ nombre: 'Pantalón', precio: 49.99 });

console.log(carrito.total()); // 79.98
console.log(carrito.cantidad); // 2

Volver al índice · Capítulo original

Ejercicios resueltos — Capítulo 16¶

Volver al índice · Capítulo original

Ejercicio 1: Tests de `formatearPrecio`¶

Escribe tests unitarios para una función formatearPrecio(n).

Solución¶

// precios.js
export function formatearPrecio(n) {
  return new Intl.NumberFormat('es-ES', {
    style: 'currency',
    currency: 'EUR',
  }).format(n);
}

// precios.test.js
import { describe, it, expect } from 'vitest';
import { formatearPrecio } from './precios.js';

describe('formatearPrecio', () => {
  it('formatea un número entero', () => {
    expect(formatearPrecio(10)).toContain('10,00');
  });

  it('formatea decimales', () => {
    expect(formatearPrecio(29.99)).toContain('29,99');
  });

  it('incluye el símbolo del euro', () => {
    expect(formatearPrecio(100)).toContain('€');
  });

  it('maneja el cero', () => {
    expect(formatearPrecio(0)).toContain('0,00');
  });
});

Ejercicio 2: Tests de `validarEmail`¶

Cubre con Vitest una función validarEmail(email).

Solución¶

// validacion.js
export function validarEmail(email) {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return regex.test(email);
}

// validacion.test.js
import { describe, it, expect } from 'vitest';
import { validarEmail } from './validacion.js';

describe('validarEmail', () => {
  it('acepta emails válidos', () => {
    expect(validarEmail('usuario@ejemplo.com')).toBe(true);
    expect(validarEmail('a.b@sub.dominio.es')).toBe(true);
  });

  it('rechaza emails sin @', () => {
    expect(validarEmail('usuario.com')).toBe(false);
  });

  it('rechaza emails sin dominio', () => {
    expect(validarEmail('usuario@')).toBe(false);
  });

  it('rechaza emails con espacios', () => {
    expect(validarEmail('usuario @ejemplo.com')).toBe(false);
  });

  it('rechaza strings vacíos', () => {
    expect(validarEmail('')).toBe(false);
  });
});

Ejercicio 3: Test de formulario con Testing Library¶

Rellena y envía un formulario con Testing Library.

Solución¶

<form>
  <label for="nombre">Nombre</label>
  <input type="text" id="nombre" required>

  <label for="email">Email</label>
  <input type="email" id="email" required>

  <button type="submit">Enviar</button>
</form>

import { screen } from '@testing-library/dom';
import userEvent from '@testing-library/user-event';
import { it, expect, vi } from 'vitest';

it('rellena y envía el formulario', async () => {
  document.body.innerHTML = `
    <form>
      <label for="nombre">Nombre</label>
      <input type="text" id="nombre" required>
      <label for="email">Email</label>
      <input type="email" id="email" required>
      <button type="submit">Enviar</button>
    </form>
  `;

  const enviar = vi.fn();
  const form = document.querySelector('form');
  form.addEventListener('submit', (e) => {
    e.preventDefault();
    enviar();
  });

  await userEvent.type(screen.getByLabelText('Nombre'), 'Urukais');
  await userEvent.type(screen.getByLabelText('Email'), 'urukaisk@gmail.com');
  await userEvent.click(screen.getByRole('button', { name: 'Enviar' }));

  expect(enviar).toHaveBeenCalledTimes(1);
});

Ejercicio 4: Mock de API con MSW¶

Mockea una API con MSW y prueba un componente que la consume.

Solución¶

// mocks/handlers.js
import { http, HttpResponse } from 'msw';

export const handlers = [
  http.get('/api/usuarios', () => {
    return HttpResponse.json([
      { id: 1, nombre: 'Urukais' },
      { id: 2, nombre: 'Ana' },
    ]);
  }),
];

// mocks/server.js
import { setupServer } from 'msw/node';
import { handlers } from './handlers.js';

export const server = setupServer(...handlers);

// usuarios.test.js
import { beforeAll, afterAll, afterEach, it, expect } from 'vitest';
import { server } from './mocks/server.js';

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

it('carga la lista de usuarios', async () => {
  const res = await fetch('/api/usuarios');
  const usuarios = await res.json();

  expect(usuarios).toHaveLength(2);
  expect(usuarios[0].nombre).toBe('Urukais');
});

Ejercicio 5: Test E2E con Playwright¶

Escribe un test E2E para "buscar producto → añadir al carrito".

Solución¶

// e2e/carrito.spec.js
import { test, expect } from '@playwright/test';

test('buscar producto y añadir al carrito', async ({ page }) => {
  await page.goto('/');

  // Buscar
  await page.getByPlaceholder('Buscar productos').fill('camiseta');
  await page.getByRole('button', { name: 'Buscar' }).click();

  // Ver resultados
  await expect(page.getByText('Camiseta')).toBeVisible();

  // Añadir al carrito
  await page.getByRole('button', { name: 'Añadir al carrito' }).first().click();

  // Verificar contador
  await expect(page.getByTestId('carrito-contador')).toHaveText('1');
});

Ejercicio 6: Cobertura¶

Configura npm run test:coverage y analiza el informe.

Solución¶

Instala:

npm install -D @vitest/coverage-v8

Añade a package.json:

{
  "scripts": {
    "test:coverage": "vitest run --coverage"
  }
}

Configura en vite.config.js:

export default defineConfig({
  test: {
    coverage: {
      provider: 'v8',
      reporter: ['text', 'html'],
      exclude: ['**/*.test.js', '**/node_modules/**'],
    },
  },
});

Ejecuta:

npm run test:coverage

Ejercicio 7: GitHub Action de tests¶

Añade un workflow que ejecute los tests en cada PR.

Solución¶

.github/workflows/test.yml:

name: Tests

on:
  push:
    branches: [main]
  pull_request:

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
      - run: npm ci
      - run: npm run test:run

Volver al índice · Capítulo original

Ejercicios resueltos — Capítulo 17¶

Volver al índice · Capítulo original

Ejercicio 1: Medir con Lighthouse¶

Mide tu portfolio con Lighthouse.

Solución¶

Abre DevTools (F12).
Pestaña Lighthouse.
Marca Performance, Accessibility, Best Practices, SEO.
Elige Mobile (más realista).
Analyze page load.

Anota: - FCP (First Contentful Paint) - LCP (Largest Contentful Paint) - CLS (Cumulative Layout Shift) - TBT (Total Blocking Time)

Ejercicio 2: Imágenes en WebP¶

Convierte tus imágenes a WebP y añade loading="lazy".

Solución¶

Conversión (con cwebp):

cwebp foto.jpg -q 80 -o foto.webp

HTML con fallback:

<picture>
  <source srcset="foto.webp" type="image/webp">
  <img src="foto.jpg" alt="Descripción" width="800" height="600" loading="lazy">
</picture>

Sin convertir, con srcset responsive:

<img
  src="foto-800.jpg"
  srcset="foto-400.jpg 400w, foto-800.jpg 800w, foto-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  alt="Descripción"
  width="800"
  height="600"
  loading="lazy"
  decoding="async"
>

Ejercicio 3: `width` y `height` en imágenes¶

Añade dimensiones a todas las imágenes para evitar CLS.

Solución¶

<!-- ❌ Mal: el navegador no reserva espacio -->
<img src="foto.jpg" alt="...">

<!-- ✅ Bien: el navegador reserva espacio y evita el salto -->
<img src="foto.jpg" alt="..." width="800" height="600">

<!-- Alternativa con CSS aspect-ratio -->
<style>
  .video {
    aspect-ratio: 16 / 9;
    width: 100%;
  }
</style>
<iframe class="video" src="..."></iframe>

Ejercicio 4: `font-display: swap`¶

Configura font-display: swap en tus fuentes.

Solución¶

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

O con Google Fonts:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
  rel="stylesheet"
>

display=swap → muestra texto con fuente fallback mientras carga la real.

Ejercicio 5: Analizar el bundle¶

Analiza el bundle con vite-bundle-visualizer.

Solución¶

npm install -D vite-bundle-visualizer

Añade a package.json:

{
  "scripts": {
    "analyze": "vite-bundle-visualizer"
  }
}

Ejecuta:

npm run analyze

Se abre un gráfico con el tamaño de cada dependencia. Identifica las más pesadas y busca alternativas más ligeras:

Paquete pesado	Alternativa ligera
`moment` (~70 KB)	`dayjs` (~2 KB)
`lodash` (~70 KB)	`lodash-es` con tree shaking
`axios` (~50 KB)	`fetch` nativo
`jQuery` (~90 KB)	DOM nativo

Ejercicio 6: `preconnect` y `preload`¶

Añade preconnect y preload para recursos críticos.

Solución¶

<head>
  <!-- Anticipa la conexión con la CDN de fuentes -->
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <!-- Precarga la fuente principal (usa las que aparecen en el primer render) -->
  <link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

  <!-- Precarga el CSS crítico -->
  <link rel="preload" href="/estilos.css" as="style">

  <!-- DNS prefetch para servicios externos -->
  <link rel="dns-prefetch" href="https://analytics.ejemplo.com">
</head>

No abuses del preload

Cada preload compite por ancho de banda. Úsalo solo para recursos críticos que descubrirías tarde.

Volver al índice · Capítulo original

Ejercicios resueltos — Capítulo 18¶

Volver al índice · Capítulo original

Ejercicio 1: Reorganizar a feature-first¶

Reorganiza un proyecto de type-first a feature-first.

Antes (type-first)¶

src/
├── components/
│   ├── Producto.jsx
│   ├── Carrito.jsx
│   └── Perfil.jsx
├── hooks/
│   ├── useProductos.js
│   └── useCarrito.js
├── api/
│   ├── productos.js
│   └── carrito.js
└── utils/
    └── formato.js

Solución (feature-first)¶

src/
├── features/
│   ├── productos/
│   │   ├── components/
│   │   │   └── Producto.jsx
│   │   ├── hooks/
│   │   │   └── useProductos.js
│   │   ├── api.js
│   │   └── index.js
│   ├── carrito/
│   │   ├── components/
│   │   │   └── Carrito.jsx
│   │   ├── hooks/
│   │   │   └── useCarrito.js
│   │   └── index.js
│   └── perfil/
│       └── components/
│           └── Perfil.jsx
├── shared/
│   ├── components/
│   ├── hooks/
│   └── utils/
│       └── formato.js
└── app/
    ├── rutas.js
    └── layouts/

Regla de oro: shared/ no puede importar nada de features/.

Ejercicio 2: Clasificar estados¶

Identifica tres estados en tu app y clasifícalos.

Solución¶

Estado	Tipo	Dónde va
Menú abierto/cerrado	Local	`useState` del componente
Usuario logueado	Global	Context o store
Lista de productos desde API	Servidor	React Query / SWR

Regla: empieza local, sube solo si es necesario.

Ejercicio 3: React Query para estado del servidor¶

Sustituye un store global con estado del servidor por React Query.

Antes¶

// ❌ Antipatrón: el servidor en un store global
const useStore = create((set) => ({
  productos: [],
  cargarProductos: async () => {
    const res = await fetch('/api/productos');
    set({ productos: await res.json() });
  },
}));

Solución¶

import { useQuery } from '@tanstack/react-query';

function useProductos() {
  return useQuery({
    queryKey: ['productos'],
    queryFn: async () => {
      const res = await fetch('/api/productos');
      if (!res.ok) throw new Error('Error al cargar');
      return res.json();
    },
    staleTime: 5 * 60 * 1000, // 5 min
  });
}

// En el componente
function ListaProductos() {
  const { data, isLoading, error } = useProductos();

  if (isLoading) return <Spinner />;
  if (error) return <Error />;
  return <Lista items={data} />;
}

React Query se encarga de caché, revalidación y reintentos.

Ejercicio 4: Compound component¶

Escribe un componente Tabs con compound components.

Solución¶

React:

import { createContext, useContext, useState } from 'react';

const TabsContext = createContext();

function Tabs({ defaultValue, children }) {
  const [activo, setActivo] = useState(defaultValue);
  return (
    <TabsContext.Provider value={{ activo, setActivo }}>
      <div className="tabs">{children}</div>
    </TabsContext.Provider>
  );
}

Tabs.List = function List({ children }) {
  return <div className="tabs-list">{children}</div>;
};

Tabs.Trigger = function Trigger({ value, children }) {
  const { activo, setActivo } = useContext(TabsContext);
  return (
    <button
      className={activo === value ? 'activo' : ''}
      onClick={() => setActivo(value)}
    >
      {children}
    </button>
  );
};

Tabs.Panel = function Panel({ value, children }) {
  const { activo } = useContext(TabsContext);
  return activo === value ? <div>{children}</div> : null;
};

Uso:

<Tabs defaultValue="perfil">
  <Tabs.List>
    <Tabs.Trigger value="perfil">Perfil</Tabs.Trigger>
    <Tabs.Trigger value="cuenta">Cuenta</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Panel value="perfil">Contenido del perfil</Tabs.Panel>
  <Tabs.Panel value="cuenta">Contenido de la cuenta</Tabs.Panel>
</Tabs>

Ejercicio 5: Lazy loading por rutas¶

Configura lazy loading por rutas.

Solución¶

import { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';

const Inicio = lazy(() => import('./paginas/Inicio'));
const Productos = lazy(() => import('./paginas/Productos'));
const Perfil = lazy(() => import('./paginas/Perfil'));

function App() {
  return (
    <Suspense fallback={<div>Cargando…</div>}>
      <Routes>
        <Route path="/" element={<Inicio />} />
        <Route path="/productos" element={<Productos />} />
        <Route path="/perfil" element={<Perfil />} />
      </Routes>
    </Suspense>
  );
}

Cada ruta genera un chunk separado que se carga solo cuando se visita.

Volver al índice · Capítulo original

Ejercicios resueltos — Capítulo 19¶

Volver al índice · Capítulo original

Ejercicio 1: Endpoint GET¶

Crea una API con un endpoint GET /api/saludo.

Solución¶

// src/server.js
import express from 'express';

const app = express();

app.get('/api/saludo', (req, res) => {
  res.json({ mensaje: 'Hola desde Node.js' });
});

app.listen(3000, () => console.log('http://localhost:3000'));

Ejecuta:

npm run dev
curl http://localhost:3000/api/saludo

Ejercicio 2: POST con validación Zod¶

Añade una ruta POST /api/usuarios con validación Zod.

Solución¶

import express from 'express';
import { z } from 'zod';

const app = express();
app.use(express.json());

const schemaUsuario = z.object({
  nombre: z.string().min(2).max(50),
  email: z.string().email(),
});

app.post('/api/usuarios', (req, res) => {
  const resultado = schemaUsuario.safeParse(req.body);

  if (!resultado.success) {
    return res.status(400).json({
      errores: resultado.error.issues.map(i => ({
        campo: i.path.join('.'),
        mensaje: i.message,
      })),
    });
  }

  res.status(201).json({
    mensaje: 'Usuario creado',
    usuario: resultado.data,
  });
});

Ejercicio 3: Modelo Tarea con Prisma¶

Conecta PostgreSQL con Prisma y crea un modelo Tarea.

Solución¶

prisma/schema.prisma:

model Tarea {
  id        Int      @id @default(autoincrement())
  titulo    String
  completada Boolean @default(false)
  creadaEn  DateTime @default(now())
}

Migración:

npx prisma migrate dev --name add-tarea

Endpoints:

import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();

app.get('/api/tareas', async (req, res) => {
  const tareas = await prisma.tarea.findMany();
  res.json(tareas);
});

app.post('/api/tareas', async (req, res) => {
  const tarea = await prisma.tarea.create({
    data: { titulo: req.body.titulo },
  });
  res.status(201).json(tarea);
});

app.patch('/api/tareas/:id', async (req, res) => {
  const tarea = await prisma.tarea.update({
    where: { id: Number(req.params.id) },
    data: { completada: req.body.completada },
  });
  res.json(tarea);
});

app.delete('/api/tareas/:id', async (req, res) => {
  await prisma.tarea.delete({ where: { id: Number(req.params.id) } });
  res.status(204).end();
});

Implementa registro y login con JWT.

Solución¶

import bcrypt from 'bcrypt';
import jwt from 'jsonwebtoken';

app.post('/api/auth/registro', async (req, res) => {
  const { nombre, email, password } = req.body;

  const existe = await prisma.usuario.findUnique({ where: { email } });
  if (existe) return res.status(409).json({ error: 'Email en uso' });

  const hash = await bcrypt.hash(password, 12);
  const usuario = await prisma.usuario.create({
    data: { nombre, email, password: hash },
  });

  const token = jwt.sign({ id: usuario.id }, process.env.JWT_SECRET, {
    expiresIn: '7d',
  });

  res.status(201).json({ token, usuario: { id: usuario.id, nombre, email } });
});

app.post('/api/auth/login', async (req, res) => {
  const { email, password } = req.body;

  const usuario = await prisma.usuario.findUnique({ where: { email } });
  if (!usuario) return res.status(401).json({ error: 'Credenciales inválidas' });

  const ok = await bcrypt.compare(password, usuario.password);
  if (!ok) return res.status(401).json({ error: 'Credenciales inválidas' });

  const token = jwt.sign({ id: usuario.id }, process.env.JWT_SECRET, {
    expiresIn: '7d',
  });

  res.json({ token });
});

Ejercicio 5: Middleware de autenticación¶

Protege una ruta GET /api/perfil.

Solución¶

import jwt from 'jsonwebtoken';

function autenticar(req, res, next) {
  const auth = req.headers.authorization;

  if (!auth?.startsWith('Bearer ')) {
    return res.status(401).json({ error: 'Token no proporcionado' });
  }

  try {
    const token = auth.slice(7);
    req.usuario = jwt.verify(token, process.env.JWT_SECRET);
    next();
  } catch {
    res.status(401).json({ error: 'Token inválido' });
  }
}

app.get('/api/perfil', autenticar, async (req, res) => {
  const usuario = await prisma.usuario.findUnique({
    where: { id: req.usuario.id },
    select: { id: true, nombre: true, email: true },
  });
  res.json(usuario);
});

Ejercicio 6: CORS¶

Añade CORS para permitir peticiones desde localhost:5173.

Solución¶

import cors from 'cors';

app.use(cors({
  origin: [
    'http://localhost:5173',
    'https://libro.urukais.com',
  ],
  credentials: true,
}));

Ejercicio 7: Desplegar en Railway¶

Despliega la API en Railway.

Solución¶

Crea cuenta en railway.app.
New Project → Deploy from GitHub repo.
Selecciona tu repo.
Add plugin → PostgreSQL.
Railway añade DATABASE_URL automáticamente.
Configura variables extra (JWT_SECRET, PORT).
Railway despliega en cada push.

Ejercicio 8: Conectar la API al frontend¶

Conecta esta API a tu frontend del Capítulo 10.

Solución¶

// cliente.js
const API = 'https://tu-api.up.railway.app';

export async function login(email, password) {
  const res = await fetch(`${API}/api/auth/login`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ email, password }),
  });

  if (!res.ok) throw new Error('Credenciales inválidas');
  const { token } = await res.json();
  localStorage.setItem('token', token);
  return token;
}

export async function obtenerPerfil() {
  const token = localStorage.getItem('token');
  const res = await fetch(`${API}/api/perfil`, {
    headers: { Authorization: `Bearer ${token}` },
  });
  if (!res.ok) throw new Error('No autorizado');
  return res.json();
}

Volver al índice · Capítulo original

Ejercicios resueltos — Capítulo 20¶

Volver al índice · Capítulo original

Ejercicio 1: Workflow de CI¶

Configura un workflow con lint + test + build.

Solución¶

.github/workflows/ci.yml:

name: CI

on:
  push:
    branches: [main]
  pull_request:

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm

      - name: Instalar dependencias
        run: npm ci

      - name: Lint
        run: npm run lint

      - name: Tests
        run: npm run test:run

      - name: Build
        run: npm run build

Ejercicio 2: Husky + lint-staged¶

Añade Husky + lint-staged a un proyecto.

Solución¶

npm install -D husky lint-staged
npx husky init

package.json:

{
  "lint-staged": {
    "*.{js,ts,jsx,tsx}": ["eslint --fix", "prettier --write"],
    "*.{css,scss}": ["prettier --write"],
    "*.md": ["prettier --write"]
  }
}

.husky/pre-commit:

npx lint-staged

Ejercicio 3: Sentry¶

Integra Sentry y captura un error forzado.

Solución¶

npm install @sentry/react

import * as Sentry from '@sentry/react';

Sentry.init({
  dsn: 'https://...@sentry.io/...',
  environment: import.meta.env.MODE,
  tracesSampleRate: 0.1,
  integrations: [Sentry.browserTracingIntegration()],
});

Botón de prueba:

<button onClick={() => {
  throw new Error('Error de prueba');
}}>
  Lanzar error
</button>

El error aparecerá en el panel de Sentry en segundos.

Ejercicio 4: Web Vitals en producción¶

Añade web-vitals y envía las métricas a tu backend.

Solución¶

npm install web-vitals

import { onCLS, onINP, onLCP, onFCP, onTTFB } from 'web-vitals';

function enviar(metrica) {
  const cuerpo = JSON.stringify({
    name: metrica.name,
    value: metrica.value,
    id: metrica.id,
    url: location.href,
  });

  // sendBeacon envía incluso al cerrar la pestaña
  navigator.sendBeacon('/api/vitals', cuerpo);
}

onCLS(enviar);
onINP(enviar);
onLCP(enviar);
onFCP(enviar);
onTTFB(enviar);

Ejercicio 5: Dockerfile multi-stage¶

Crea un Dockerfile multi-stage para una SPA con Nginx.

Solución¶

Dockerfile:

# Etapa 1: build
FROM node:20-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# Etapa 2: servir
FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

nginx.conf:

server {
  listen 80;
  root /usr/share/nginx/html;
  index index.html;

  # SPA fallback
  location / {
    try_files $uri $uri/ /index.html;
  }

  # Cache largo para assets con hash
  location ~* \.(js|css|woff2|png|jpg|svg)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
  }
}

Ejercicio 6: Dependabot¶

Configura Dependabot para actualizar dependencias semanalmente.

Solución¶

.github/dependabot.yml:

version: 2
updates:
  - package-ecosystem: npm
    directory: /
    schedule:
      interval: weekly
      day: monday
    open-pull-requests-limit: 5

  - package-ecosystem: github-actions
    directory: /
    schedule:
      interval: monthly

Ejercicio 7: Postmortem¶

Escribe un postmortem de un bug real.

Solución¶

Formato:

# Postmortem: [título del incidente]

**Fecha**: 2026-10-12
**Duración**: 45 minutos
**Impacto**: usuarios no podían iniciar sesión

## Qué pasó

Descripción cronológica del incidente.

## Timeline

- **10:00** — deploy de la versión 2.3.0
- **10:05** — primeros reportes de usuarios
- **10:15** — identificado el problema
- **10:30** — rollback a 2.2.0
- **10:45** — servicio restaurado

## Causa raíz

El nuevo middleware de autenticación verificaba el token antes de que
la base de datos estuviera lista. En producción, el arranque es más
lento que en local y fallaba la verificación.

## Qué se hizo bien

- Detección rápida (5 min).
- Comunicación clara con el equipo.
- Rollback sin pérdida de datos.

## Qué mejorar

- Añadir healthcheck que espere a la BD.
- Test de integración con la BD en CI.
- Alertas automáticas por tasa de errores.

## Acciones

- [ ] Healthcheck esperando a la BD (@urukais)
- [ ] Test de integración en CI (@urukais)
- [ ] Alertas con Sentry (@urukais)

Ejercicio 8: Staging y producción¶

Despliega la misma app en staging y producción.

Solución¶

En Vercel:

Crea un proyecto para main (producción).
Crea otro proyecto conectado a staging (staging).
Cada uno con sus variables de entorno.

En GitHub Actions:

- name: Deploy
  run: |
    if [ "${{ github.ref }}" = "refs/heads/main" ]; then
      npx vercel deploy --prod --token=${{ secrets.VERCEL_TOKEN }}
    else
      npx vercel deploy --token=${{ secrets.VERCEL_TOKEN }}
    fi

Volver al índice · Capítulo original

Ejercicios resueltos — Capítulo 21¶

Volver al índice · Capítulo original

Ejercicio 1: `<mi-saludo>`¶

Crea un Web Component <mi-saludo nombre="Urukais">.

Solución¶

class MiSaludo extends HTMLElement {
  connectedCallback() {
    const nombre = this.getAttribute('nombre') || 'mundo';
    this.textContent = `Hola, ${nombre}`;
  }
}

customElements.define('mi-saludo', MiSaludo);

<mi-saludo nombre="Urukais"></mi-saludo>

Ejercicio 2: Añadir `<slot>`¶

Añade un <slot> y pruébalo con contenido externo.

Solución¶

class MiTarjeta extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .card {
          border: 1px solid #e2e8f0;
          border-radius: 12px;
          padding: 1rem;
        }
        header { font-weight: 700; color: #6a5acd; }
      </style>
      <div class="card">
        <header><slot name="titulo"></slot></header>
        <main><slot></slot></main>
      </div>
    `;
  }
}

customElements.define('mi-tarjeta', MiTarjeta);

<mi-tarjeta>
  <h2 slot="titulo">Título</h2>
  <p>Contenido principal.</p>
</mi-tarjeta>

Ejercicio 3: Contador con evento `cambio`¶

Implementa un contador con botones y evento cambio.

Solución¶

class MiContador extends HTMLElement {
  #valor = 0;

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host { display: inline-flex; align-items: center; gap: 0.5rem; font-family: system-ui; }
        button { width: 2rem; height: 2rem; border: none; border-radius: 50%; background: #6a5acd; color: white; cursor: pointer; }
        span { font-weight: 700; min-width: 2ch; text-align: center; }
      </style>
      <button id="menos">−</button>
      <span id="valor">0</span>
      <button id="mas">+</button>
    `;

    this.shadowRoot.getElementById('mas').addEventListener('click', () => this.#cambiar(1));
    this.shadowRoot.getElementById('menos').addEventListener('click', () => this.#cambiar(-1));
  }

  #cambiar(delta) {
    this.#valor += delta;
    this.shadowRoot.getElementById('valor').textContent = this.#valor;
    this.dispatchEvent(new CustomEvent('cambio', {
      detail: { valor: this.#valor },
      bubbles: true,
      composed: true,
    }));
  }
}

customElements.define('mi-contador', MiContador);

<mi-contador></mi-contador>
<script>
  document.querySelector('mi-contador').addEventListener('cambio', (e) => {
    console.log('Nuevo valor:', e.detail.valor);
  });
</script>

Ejercicio 4: Tarjeta con Shadow DOM encapsulado¶

Crea una tarjeta con estilos encapsulados.

Solución¶

class MiCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        /* Estos estilos NO afectan al exterior */
        .card {
          background: white;
          border-radius: 12px;
          padding: 1.5rem;
          box-shadow: 0 4px 12px rgba(0,0,0,0.08);
          font-family: system-ui, sans-serif;
        }
        h3 { margin: 0 0 0.5rem; color: #6a5acd; }
      </style>
      <div class="card">
        <h3><slot name="titulo">Sin título</slot></h3>
        <slot></slot>
      </div>
    `;
  }
}

customElements.define('mi-card', MiCard);

Ejercicio 5: `observedAttributes`¶

Añade observedAttributes y reacciona a cambios de atributos.

Solución¶

class MiCaja extends HTMLElement {
  static get observedAttributes() {
    return ['color', 'size'];
  }

  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `<div class="box"><slot></slot></div>`;
    this.#aplicar();
  }

  attributeChangedCallback(nombre, viejo, nuevo) {
    if (viejo !== nuevo && this.shadowRoot) this.#aplicar();
  }

  #aplicar() {
    const color = this.getAttribute('color') || '#6a5acd';
    const size = this.getAttribute('size') || '1rem';
    const box = this.shadowRoot.querySelector('.box');
    box.style.border = `2px solid ${color}`;
    box.style.padding = size;
    box.style.borderRadius = '8px';
  }
}

customElements.define('mi-caja', MiCaja);

<mi-caja color="#22d3ee" size="1.5rem">Contenido</mi-caja>

Cambia el atributo desde devtools y verás que se actualiza solo.

Volver al índice · Capítulo original

Ejercicios resueltos — Capítulo 22¶

Volver al índice · Capítulo original

Ejercicio 1: Manifest¶

Añade un manifest.json a tu portfolio con iconos de 192 y 512.

Solución¶

{
  "name": "Mi Portfolio",
  "short_name": "Portfolio",
  "description": "Portfolio personal de Urukais",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#0f172a",
  "theme_color": "#6a5acd",
  "lang": "es",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any maskable" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
  ]
}

En el <head> del HTML:

<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#6a5acd">

Ejercicio 2: Service Worker básico¶

Registra un Service Worker y verifica con DevTools.

Solución¶

index.html:

<script>
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('/sw.js');
    });
  }
</script>

sw.js:

const CACHE = 'mi-app-v1';

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE).then(c => c.addAll([
      '/',
      '/index.html',
      '/styles.css',
      '/app.js',
    ]))
  );
});

self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then(keys =>
      Promise.all(keys.filter(k => k !== CACHE).map(k => caches.delete(k)))
    )
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then(res => res || fetch(event.request))
  );
});

Verificar: DevTools → Application → Service Workers.

Ejercicio 3: Cache First para assets¶

Cachea assets estáticos con estrategia Cache First.

Solución¶

const CACHE = 'assets-v1';

self.addEventListener('fetch', (event) => {
  const { request } = event;

  // Solo assets estáticos
  if (request.destination === 'style' ||
      request.destination === 'script' ||
      request.destination === 'image') {
    event.respondWith(
      caches.match(request).then(cached => {
        if (cached) return cached;

        return fetch(request).then(res => {
          const clone = res.clone();
          caches.open(CACHE).then(c => c.put(request, clone));
          return res;
        });
      })
    );
  }
});

Ejercicio 4: Página offline¶

Añade una página offline personalizada.

Solución¶

offline.html:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Sin conexión</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      display: grid;
      place-items: center;
      min-height: 100vh;
      margin: 0;
      background: #0f172a;
      color: #e2e8f0;
      text-align: center;
      padding: 2rem;
    }
    h1 { color: #a78bfa; }
  </style>
</head>
<body>
  <div>
    <h1>📡 Sin conexión</h1>
    <p>Parece que no tienes internet. Vuelve a intentarlo cuando recuperes la conexión.</p>
    <button onclick="location.reload()">Reintentar</button>
  </div>
</body>
</html>

En sw.js:

const CACHE = 'offline-v1';

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE).then(c => c.add('/offline.html'))
  );
});

self.addEventListener('fetch', (event) => {
  if (event.request.mode === 'navigate') {
    event.respondWith(
      fetch(event.request).catch(() => caches.match('/offline.html'))
    );
  }
});

Ejercicio 5: `vite-plugin-pwa`¶

Configura vite-plugin-pwa si usas Vite.

Solución¶

npm install -D vite-plugin-pwa

vite.config.js:

import { defineConfig } from 'vite';
import { VitePWA } from 'vite-plugin-pwa';

export default defineConfig({
  plugins: [
    VitePWA({
      registerType: 'autoUpdate',
      manifest: {
        name: 'Mi App',
        short_name: 'App',
        theme_color: '#6a5acd',
        icons: [
          { src: 'pwa-192x192.png', sizes: '192x192', type: 'image/png' },
          { src: 'pwa-512x512.png', sizes: '512x512', type: 'image/png' },
        ],
      },
    }),
  ],
});

Listo. Ya tienes PWA sin escribir el Service Worker.

Ejercicio 6: Botón "Instalar app"¶

Añade un botón con beforeinstallprompt.

Solución¶

<button id="btn-instalar" hidden>Instalar app</button>

<script>
  let deferredPrompt;

  window.addEventListener('beforeinstallprompt', (e) => {
    e.preventDefault();
    deferredPrompt = e;
    document.getElementById('btn-instalar').hidden = false;
  });

  document.getElementById('btn-instalar').addEventListener('click', async () => {
    if (!deferredPrompt) return;
    deferredPrompt.prompt();
    const { outcome } = await deferredPrompt.userChoice;
    console.log('Resultado:', outcome);
    deferredPrompt = null;
    document.getElementById('btn-instalar').hidden = true;
  });
</script>

iOS es diferente

Safari iOS no soporta beforeinstallprompt. Hay que mostrar instrucciones: "Compartir → Añadir a pantalla de inicio".

Ejercicio 7: Lighthouse PWA¶

Pasa Lighthouse PWA con score > 90.

Solución¶

Checklist:

[ ] HTTPS activo.
[ ] Manifest con iconos de 192 y 512.
[ ] theme_color y background_color definidos.
[ ] Service Worker registrado y controlando la página.
[ ] start_url responde 200.
[ ] Funciona offline en la página principal.

Verificar:

DevTools → Lighthouse → Progressive Web App → Analyze.

Ejercicio 8: Probar en modo avión¶

Prueba la app en modo avión desde el móvil.

Solución¶

Abre la web en el móvil.
Navega un poco (para que se cachee).
Activa modo avión.
Vuelve a la app (desde el icono si la instalaste).
Comprueba que:
Carga la home.
Navegas entre páginas ya visitadas.
Si no hay página cacheada, aparece tu offline.html.

Volver al índice · Capítulo original

Ejercicios resueltos — Capítulo 23¶

Volver al índice · Capítulo original

Ejercicio 1: Servidor eco¶

Crea un servidor WebSocket que haga eco de los mensajes.

Solución¶

npm install ws

server.js:

import { WebSocketServer } from 'ws';

const wss = new WebSocketServer({ port: 8080 });

wss.on('connection', (socket) => {
  console.log('Cliente conectado');

  socket.on('message', (data) => {
    console.log('Recibido:', data.toString());
    socket.send(`Eco: ${data}`);
  });

  socket.on('close', () => console.log('Cliente desconectado'));
});

cliente.html:

<script>
  const socket = new WebSocket('ws://localhost:8080');

  socket.onopen = () => socket.send('Hola');
  socket.onmessage = (e) => console.log('Servidor:', e.data);
</script>

Ejercicio 2: Broadcast¶

Añade broadcast: cada mensaje va a todos.

Solución¶

wss.on('connection', (socket) => {
  socket.on('message', (data) => {
    wss.clients.forEach((cliente) => {
      if (cliente.readyState === cliente.OPEN) {
        cliente.send(data.toString());
      }
    });
  });
});

Ejercicio 3: Salas¶

Implementa salas: los mensajes solo van a los de la misma sala.

Solución¶

const salas = new Map();

wss.on('connection', (socket) => {
  socket.on('message', (raw) => {
    const msg = JSON.parse(raw);

    if (msg.tipo === 'unirse') {
      if (!salas.has(msg.sala)) salas.set(msg.sala, new Set());
      salas.get(msg.sala).add(socket);
      socket.sala = msg.sala;
      return;
    }

    if (msg.tipo === 'mensaje') {
      const miembros = salas.get(socket.sala) || new Set();
      miembros.forEach((s) => {
        if (s.readyState === s.OPEN) {
          s.send(JSON.stringify({
            tipo: 'mensaje',
            de: msg.de,
            texto: msg.texto,
          }));
        }
      });
    }
  });

  socket.on('close', () => {
    if (socket.sala) salas.get(socket.sala)?.delete(socket);
  });
});

Ejercicio 4: Reconexión con backoff¶

Añade reconexión automática al cliente.

Solución¶

class SocketReconectable {
  #url;
  #socket;
  #intentos = 0;
  #maxIntentos = 5;

  constructor(url) {
    this.#url = url;
    this.#conectar();
  }

  #conectar() {
    this.#socket = new WebSocket(this.#url);

    this.#socket.addEventListener('open', () => {
      this.#intentos = 0;
      console.log('Conectado');
    });

    this.#socket.addEventListener('close', () => {
      if (this.#intentos < this.#maxIntentos) {
        const espera = 2 ** this.#intentos * 1000;
        console.log(`Reintentando en ${espera}ms`);
        setTimeout(() => {
          this.#intentos++;
          this.#conectar();
        }, espera);
      }
    });
  }

  enviar(datos) {
    if (this.#socket.readyState === WebSocket.OPEN) {
      this.#socket.send(JSON.stringify(datos));
    }
  }
}

Ejercicio 5: Autenticación con JWT¶

Autentica el WebSocket con un JWT.

Solución¶

Servidor:

import jwt from 'jsonwebtoken';

wss.on('connection', (socket, req) => {
  const url = new URL(req.url, 'http://localhost');
  const token = url.searchParams.get('token');

  try {
    socket.usuario = jwt.verify(token, process.env.JWT_SECRET);
    socket.send(JSON.stringify({ tipo: 'autenticado', usuario: socket.usuario }));
  } catch {
    socket.close(4001, 'Token inválido');
  }
});

Cliente:

const token = localStorage.getItem('token');
const socket = new WebSocket(`wss://api.miapp.com/ws?token=${token}`);

Ejercicio 6: Indicador "escribiendo…"¶

Añade un indicador de "escribiendo…" en el chat.

Solución¶

Cliente:

let timeout;
input.addEventListener('input', () => {
  socket.send(JSON.stringify({ tipo: 'escribiendo', de: 'Urukais' }));

  clearTimeout(timeout);
  timeout = setTimeout(() => {
    socket.send(JSON.stringify({ tipo: 'parado' }));
  }, 1000);
});

socket.onmessage = (e) => {
  const msg = JSON.parse(e.data);
  if (msg.tipo === 'escribiendo') {
    indicador.textContent = `${msg.de} está escribiendo…`;
  } else if (msg.tipo === 'parado') {
    indicador.textContent = '';
  }
};

Servidor: reenvía a los demás miembros de la sala.

if (msg.tipo === 'escribiendo' || msg.tipo === 'parado') {
  const miembros = salas.get(socket.sala) || new Set();
  miembros.forEach(s => {
    if (s !== socket && s.readyState === s.OPEN) s.send(raw);
  });
}

Ejercicio 7: Persistir historial¶

Guarda el historial de mensajes en PostgreSQL.

Solución¶

import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();

// Schema Prisma
model Mensaje {
  id       Int      @id @default(autoincrement())
  autor    String
  texto    String
  sala     String
  enviado  DateTime @default(now())
}

Servidor:

if (msg.tipo === 'mensaje') {
  // Persistir
  await prisma.mensaje.create({
    data: { autor: msg.de, texto: msg.texto, sala: socket.sala },
  });

  // Reenviar a la sala
  const miembros = salas.get(socket.sala) || new Set();
  miembros.forEach(s => {
    if (s.readyState === s.OPEN) s.send(raw);
  });
}

// Enviar historial al unirse
if (msg.tipo === 'unirse') {
  socket.sala = msg.sala;
  const historial = await prisma.mensaje.findMany({
    where: { sala: msg.sala },
    orderBy: { enviado: 'asc' },
    take: 50,
  });
  socket.send(JSON.stringify({ tipo: 'historial', mensajes: historial }));
}

Ejercicio 8: Desplegar en Railway¶

Despliega en Railway y prueba con dos navegadores.

Solución¶

Crea package.json con "start": "node server.js".
Sube a GitHub.
Railway → New project → Deploy from GitHub.
Copia la URL pública (tu-app.up.railway.app).
Cliente: new WebSocket('wss://tu-app.up.railway.app').

WSS en producción

Siempre wss:// (con S) en producción, nunca ws://.

Volver al índice · Capítulo original

Ejercicios resueltos — Capítulo 24¶

Volver al índice · Capítulo original

Ejercicio 1: Botón con hover y active¶

Crea un botón con hover y active usando solo transform.

Solución¶

.boton {
  background: #6a5acd;
  color: white;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 150ms ease-out, background 150ms ease-out;
}

.boton:hover {
  background: #5b4bc4;
  transform: translateY(-2px);
}

.boton:active {
  transform: scale(0.96);
}

.boton:focus-visible {
  outline: 3px solid #a78bfa;
  outline-offset: 2px;
}

Clave: transform y background se ejecutan en la GPU, mucho más rápido que top/left/box-shadow.

Ejercicio 2: Spinner con `@keyframes`¶

Implementa un spinner de carga.

Solución¶

@keyframes girar {
  to { transform: rotate(360deg); }
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e2e8f0;
  border-top-color: #6a5acd;
  border-radius: 50%;
  animation: girar 800ms linear infinite;
}

/* Con prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation-duration: 2s;
  }
}

Ejercicio 3: Entrada al hacer scroll¶

Anima la entrada de elementos al hacer scroll con IntersectionObserver.

Solución¶

<div class="animar">Contenido 1</div>
<div class="animar">Contenido 2</div>
<div class="animar">Contenido 3</div>

.animar {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}

.animar.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .animar {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
      observer.unobserve(entry.target); // una sola vez
    }
  });
}, { threshold: 0.15 });

document.querySelectorAll('.animar').forEach((el) => observer.observe(el));

Ejercicio 4: "Me gusta" con `@keyframes`¶

Reproduce la animación "me gusta".

Solución¶

<button class="corazon" aria-label="Me gusta">❤</button>

.corazon {
  font-size: 2rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  transition: color 200ms;
}

.corazon.pulsado {
  color: #dc2626;
}

@keyframes latir {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.4); }
  60% { transform: scale(0.9); }
}

.corazon.pulsado {
  animation: latir 400ms ease-out;
}

const btn = document.querySelector('.corazon');
btn.addEventListener('click', () => {
  btn.classList.toggle('pulsado');
  // Reinicia la animación
  btn.style.animation = 'none';
  void btn.offsetWidth;
  btn.style.animation = '';
});

Ejercicio 5: Web Animations API¶

Reproduce una animación programáticamente.

Solución¶

const caja = document.querySelector('.caja');

const animacion = caja.animate(
  [
    { transform: 'translateX(0)', opacity: 1 },
    { transform: 'translateX(200px)', opacity: 0.5 },
    { transform: 'translateX(0)', opacity: 1 },
  ],
  {
    duration: 800,
    easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
    fill: 'forwards',
  }
);

animacion.onfinish = () => console.log('Terminada');

// Control
// animacion.pause();
// animacion.play();
// animacion.reverse();
// animacion.cancel();

Ventajas: - Control total desde JavaScript. - Promise con animacion.finished. - Mismo rendimiento que CSS (corre en el compositor).

Implementa un modal con apertura y cierre.

Solución¶

<button id="abrir">Abrir modal</button>

<div class="modal-backdrop" hidden>
  <div class="modal" role="dialog" aria-modal="true">
    <h2>Modal</h2>
    <p>Contenido del modal.</p>
    <button id="cerrar">Cerrar</button>
  </div>
</div>

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.7);
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 300ms ease-out;
  z-index: 100;
}

.modal-backdrop.abierto {
  opacity: 1;
}

.modal {
  background: white;
  padding: 2rem;
  border-radius: 16px;
  max-width: 500px;
  width: 90%;
  transform: translateY(20px) scale(0.98);
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-backdrop.abierto .modal {
  transform: translateY(0) scale(1);
}

const backdrop = document.querySelector('.modal-backdrop');
const abrir = document.getElementById('abrir');
const cerrar = document.getElementById('cerrar');

function abrirModal() {
  backdrop.hidden = false;
  requestAnimationFrame(() => backdrop.classList.add('abierto'));
}

function cerrarModal() {
  backdrop.classList.remove('abierto');
  setTimeout(() => backdrop.hidden = true, 300);
}

abrir.addEventListener('click', abrirModal);
cerrar.addEventListener('click', cerrarModal);

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' && !backdrop.hidden) cerrarModal();
});

Ejercicio 7: `prefers-reduced-motion`¶

Añade y comprueba que las animaciones se desactivan.

Solución¶

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Cómo probarlo:

Chrome: DevTools → Menú (⋯) → More tools → Rendering → Emulate CSS media feature prefers-reduced-motion: reduce.
Firefox: about:config → ui.prefersReducedMotion = 1.
macOS/iOS: Ajustes → Accesibilidad → Movimiento → Reducir movimiento.
Windows: Configuración → Accesibilidad → Efectos visuales → desactivar animaciones.

Ejercicio 8: Mide rendimiento¶

Mide el rendimiento en DevTools.

Solución¶

Abre DevTools → Performance.
Graba mientras animas algo.
Comprueba:
FPS: verde arriba = 60 fps estables.
CPU: por debajo del 50%.
Layout shifts: no debe haber "purple bars" grandes (refow).

Reglas para 60 fps:

Anima solo transform y opacity.
Evita width, height, top, left, box-shadow.
Usa will-change: transform solo cuando sea necesario.
No animes más de 5-10 elementos a la vez.

Volver al índice · Capítulo original

Ejercicios resueltos — Capítulo 25¶

Volver al índice · Capítulo original

Ejercicio 1: Definir tokens¶

Define tus tokens: 10 colores, 8 tamaños de tipografía, 8 espaciados.

Solución¶

:root {
  /* Colores primarios */
  --color-primary-50: #faf5ff;
  --color-primary-500: #a855f7;
  --color-primary-700: #7e22ce;
  --color-primary-900: #581c87;

  /* Semánticos */
  --color-bg: #ffffff;
  --color-surface: #f8fafc;
  --color-text: #1e293b;
  --color-muted: #64748b;
  --color-border: #e2e8f0;
  --color-danger: #dc2626;

  /* Tipografía */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  /* Espaciado (múltiplos de 4) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
}

Ejercicio 2: Componente Button¶

Aplica tokens a un Button con 3 variantes y 3 tamaños.

Solución¶

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: none;
  border-radius: 8px;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms ease-out, transform 150ms ease-out;
}

.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 3px solid var(--color-primary-500); outline-offset: 2px; }

/* Variantes */
.btn--primary {
  background: var(--color-primary-500);
  color: white;
}
.btn--primary:hover { background: var(--color-primary-700); }

.btn--secondary {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.btn--secondary:hover { background: var(--color-surface); }

.btn--danger {
  background: var(--color-danger);
  color: white;
}

/* Tamaños */
.btn--sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
}

.btn--md {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-base);
}

.btn--lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-lg);
}

<button class="btn btn--primary btn--md">Guardar</button>
<button class="btn btn--secondary btn--sm">Cancelar</button>
<button class="btn btn--danger btn--lg">Eliminar</button>

Ejercicio 3: Modo oscuro solo con tokens semánticos¶

Añade modo oscuro cambiando solo tokens.

Solución¶

:root {
  --color-bg: #ffffff;
  --color-surface: #f8fafc;
  --color-text: #1e293b;
  --color-muted: #64748b;
  --color-border: #e2e8f0;
}

[data-theme="dark"] {
  --color-bg: #0f172a;
  --color-surface: #1e293b;
  --color-text: #e2e8f0;
  --color-muted: #94a3b8;
  --color-border: #334155;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  transition: background 300ms, color 300ms;
}

Todo el sistema se adapta sin tocar componentes. Solo cambia data-theme.

Ejercicio 4: Documentar con Storybook¶

Documenta un componente.

Solución¶

Instala:

npx storybook@latest init

Crea button.stories.js:

export default {
  title: 'Componentes/Button',
  argTypes: {
    variant: { control: 'select', options: ['primary', 'secondary', 'danger'] },
    size: { control: 'select', options: ['sm', 'md', 'lg'] },
  },
};

const Template = ({ variant, size, label }) =>
  `<button class="btn btn--${variant} btn--${size}">${label}</button>`;

export const Primary = Template.bind({});
Primary.args = { variant: 'primary', size: 'md', label: 'Guardar' };

export const Danger = Template.bind({});
Danger.args = { variant: 'danger', size: 'lg', label: 'Eliminar' };

Ejecuta:

npm run storybook

Ejercicio 5: Página `/design-system`¶

Crea una página con todos los componentes.

Solución¶

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Design System</title>
  <link rel="stylesheet" href="tokens.css">
  <link rel="stylesheet" href="componentes.css">
</head>
<body>
  <h1>Design System</h1>

  <section>
    <h2>Colores</h2>
    <div class="paleta">
      <div class="swatch" style="background: var(--color-primary-500)">
        <span>primary-500</span>
      </div>
      <div class="swatch" style="background: var(--color-danger)">
        <span>danger</span>
      </div>
    </div>
  </section>

  <section>
    <h2>Tipografía</h2>
    <h1>text-4xl</h1>
    <h2>text-3xl</h2>
    <h3>text-2xl</h3>
    <p>text-base: párrafo normal.</p>
  </section>

  <section>
    <h2>Botones</h2>
    <button class="btn btn--primary btn--md">Primary</button>
    <button class="btn btn--secondary btn--md">Secondary</button>
    <button class="btn btn--danger btn--md">Danger</button>
  </section>

  <section>
    <h2>Espaciado</h2>
    <div style="background:#e2e8f0; padding: var(--space-2)">space-2</div>
    <div style="background:#e2e8f0; padding: var(--space-4)">space-4</div>
    <div style="background:#e2e8f0; padding: var(--space-8)">space-8</div>
  </section>
</body>
</html>

Ejercicio 6: Tokens con Style Dictionary¶

Publica tus tokens en CSS y SCSS.

Solución¶

npx style-dictionary init basic

tokens/color.json:

{
  "color": {
    "primary": {
      "500": { "value": "#a855f7" },
      "700": { "value": "#7e22ce" }
    },
    "danger": { "value": "#dc2626" }
  }
}

config.json:

{
  "source": ["tokens/**/*.json"],
  "platforms": {
    "css": {
      "transformGroup": "css",
      "buildPath": "build/css/",
      "files": [{ "destination": "variables.css", "format": "css/variables" }]
    },
    "scss": {
      "transformGroup": "scss",
      "buildPath": "build/scss/",
      "files": [{ "destination": "_variables.scss", "format": "scss/variables" }]
    }
  }
}

Ejecuta:

npx style-dictionary build

Ejercicio 7: Regla "todo color viene de un token"¶

Establece y aplica la regla.

Solución¶

Regla: en el código, ningún valor de color puede ser literal. Siempre var(--color-...).

Mal:

.button { background: #6a5acd; } /* ❌ */
.text { color: #1e293b; } /* ❌ */

Bien:

.button { background: var(--color-primary-500); } /* ✅ */
.text { color: var(--color-text); } /* ✅ */

Cómo hacerlo cumplir:

Añade un linter de estilo:

npm install -D stylelint stylelint-declaration-strict-value

.stylelintrc.json:

{
  "plugins": ["stylelint-declaration-strict-value"],
  "rules": {
    "scale-unlimited/declaration-strict-value": [
      ["color", "background-color", "border-color", "fill", "stroke"],
      { "ignoreValues": ["transparent", "currentColor", "inherit"] }
    ]
  }
}

Ejecuta npx stylelint "**/*.css" en CI para bloquear colores hardcodeados.

Ejercicio 8: Auditar un proyecto¶

Sustituye valores sueltos por tokens.

Solución¶

Checklist:

[ ] Buscar #[0-9a-f]{3,6} en tu CSS.
[ ] Para cada color encontrado, crear o reutilizar un token.
[ ] Buscar valores de espaciado sueltos (margin: 17px).
[ ] Ajustar a la escala (--space-4: 1rem).
[ ] Buscar tamaños de fuente sueltos.
[ ] Sustituir por --text-*.
[ ] Verificar visualmente que nada se rompe.

Comando útil:

grep -rn "#[0-9a-fA-F]\{3,6\}" src/

Volver al índice · Capítulo original

Ejercicios resueltos — Capítulo 27¶

Volver al índice · Capítulo original

Ejercicio 1: Fibonacci en Wasm¶

Compila una función de Fibonacci a Wasm con Rust.

Solución¶

Instalar herramientas:

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
cargo install wasm-pack

Crear proyecto:

cargo new --lib fib-wasm
cd fib-wasm

Cargo.toml:

[package]
name = "fib-wasm"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

src/lib.rs:

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u64 {
    let mut a: u64 = 0;
    let mut b: u64 = 1;
    for _ in 0..n {
        let t = a + b;
        a = b;
        b = t;
    }
    a
}

Compilar:

wasm-pack build --target web

Ejercicio 2: Paquete npm con `wasm-pack`¶

Crea un paquete npm con tu módulo.

Solución¶

wasm-pack build --target bundler
cd pkg
npm publish --access public

Desde otro proyecto:

npm install fib-wasm

import { fibonacci } from 'fib-wasm';
console.log(fibonacci(40));

Ejercicio 3: Porta una función intensiva¶

Porta una función intensiva a Wasm y mide.

Solución¶

JavaScript puro:

function contarPrimos(limite) {
  let contador = 0;
  for (let n = 2; n <= limite; n++) {
    let esPrimo = true;
    for (let i = 2; i * i <= n; i++) {
      if (n % i === 0) { esPrimo = false; break; }
    }
    if (esPrimo) contador++;
  }
  return contador;
}

const inicio = performance.now();
contarPrimos(100000);
console.log('JS:', performance.now() - inicio, 'ms');

En Rust/Wasm:

#[wasm_bindgen]
pub fn contar_primos(limite: u32) -> u32 {
    let mut contador = 0;
    for n in 2..=limite {
        let mut es_primo = true;
        let mut i = 2;
        while i * i <= n {
            if n % i == 0 { es_primo = false; break; }
            i += 1;
        }
        if es_primo { contador += 1; }
    }
    contador
}

Comparativa típica: Wasm es 5-10× más rápido.

Ejercicio 4: Cloudflare Workers¶

Prueba un módulo Wasm desde Cloudflare Workers.

Solución¶

npm create cloudflare@latest mi-worker
cd mi-worker

wrangler.toml:

name = "mi-worker"
main = "src/index.js"
compatibility_date = "2024-01-01"

src/index.js:

import wasm from './modulo.wasm';

export default {
  async fetch(request) {
    const instancia = await WebAssembly.instantiate(wasm);
    const resultado = instancia.exports.sumar(2, 3);

    return new Response(`Resultado: ${resultado}`);
  },
};

Despliega:

npx wrangler deploy

Ejercicio 5: Comparar rendimiento¶

Escribe el mismo algoritmo en JS y Rust.

Solución¶

Medir con performance.now():

import init, { calcular } from './pkg/mi_wasm.js';
await init();

// JS
const t1 = performance.now();
const r1 = calcularJS();
console.log('JS:', performance.now() - t1);

// Wasm
const t2 = performance.now();
const r2 = calcular();
console.log('Wasm:', performance.now() - t2);

Recomendación: - Tareas <10 ms → JS. - Tareas intensivas (>100 ms) → Wasm. - Cargas iniciales: el .wasm tarda en descargar.

Ejercicio 6: Web Worker¶

Añade un Web Worker que ejecute el Wasm en segundo plano.

Solución¶

worker.js:

import init, { fibonacci } from './pkg/fib_wasm.js';

let listo = false;

self.onmessage = async (e) => {
  if (!listo) {
    await init();
    listo = true;
  }

  const { n } = e.data;
  const resultado = fibonacci(n);
  self.postMessage({ resultado });
};

main.js:

const worker = new Worker('./worker.js', { type: 'module' });

worker.postMessage({ n: 1000 });
worker.onmessage = (e) => console.log('Resultado:', e.data.resultado);

Ventaja: la UI no se bloquea mientras se calcula.

Volver al índice · Capítulo original

Ejercicios resueltos — Capítulo 27¶

Volver al índice · Capítulo original

Ejercicio 1: Fibonacci en Wasm¶

Compila una función de Fibonacci a Wasm con Rust.

Solución¶

Instalar herramientas:

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
cargo install wasm-pack

Crear proyecto:

cargo new --lib fib-wasm
cd fib-wasm

Cargo.toml:

[package]
name = "fib-wasm"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

src/lib.rs:

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u64 {
    let mut a: u64 = 0;
    let mut b: u64 = 1;
    for _ in 0..n {
        let t = a + b;
        a = b;
        b = t;
    }
    a
}

Compilar:

wasm-pack build --target web

Genera pkg/ con el .wasm y el JS de pegamento.

Ejercicio 2: Paquete npm con `wasm-pack`¶

Crea un paquete npm con tu módulo.

Solución¶

wasm-pack build --target bundler
cd pkg
npm publish --access public

Desde otro proyecto:

npm install fib-wasm

import { fibonacci } from 'fib-wasm';
console.log(fibonacci(40));

Ejercicio 3: Porta una función intensiva¶

Porta una función intensiva a Wasm y mide.

Solución¶

JavaScript puro:

function contarPrimos(limite) {
  let contador = 0;
  for (let n = 2; n <= limite; n++) {
    let esPrimo = true;
    for (let i = 2; i * i <= n; i++) {
      if (n % i === 0) { esPrimo = false; break; }
    }
    if (esPrimo) contador++;
  }
  return contador;
}

const inicio = performance.now();
contarPrimos(100000);
console.log('JS:', performance.now() - inicio, 'ms');

En Rust/Wasm:

#[wasm_bindgen]
pub fn contar_primos(limite: u32) -> u32 {
    let mut contador = 0;
    for n in 2..=limite {
        let mut es_primo = true;
        let mut i = 2;
        while i * i <= n {
            if n % i == 0 { es_primo = false; break; }
            i += 1;
        }
        if es_primo { contador += 1; }
    }
    contador
}

Comparativa típica: Wasm es 5-10× más rápido.

Ejercicio 4: Cloudflare Workers¶

Prueba un módulo Wasm desde Cloudflare Workers.

Solución¶

npm create cloudflare@latest mi-worker
cd mi-worker

wrangler.toml:

name = "mi-worker"
main = "src/index.js"
compatibility_date = "2024-01-01"

src/index.js:

import wasm from './modulo.wasm';

export default {
  async fetch(request) {
    const instancia = await WebAssembly.instantiate(wasm);
    const resultado = instancia.exports.sumar(2, 3);

    return new Response(`Resultado: ${resultado}`);
  },
};

Despliega:

npx wrangler deploy

Ejercicio 5: Comparar rendimiento¶

Escribe el mismo algoritmo en JS y Rust.

Solución¶

Medir con performance.now():

import init, { calcular } from './pkg/mi_wasm.js';
await init();

// JS
const t1 = performance.now();
const r1 = calcularJS();
console.log('JS:', performance.now() - t1);

// Wasm
const t2 = performance.now();
const r2 = calcular();
console.log('Wasm:', performance.now() - t2);

Recomendación: - Tareas <10 ms → JS. - Tareas intensivas (>100 ms) → Wasm. - Recuerda: el .wasm tarda en descargar la primera vez.

Ejercicio 6: Web Worker¶

Añade un Web Worker que ejecute el Wasm en segundo plano.

Solución¶

worker.js:

import init, { fibonacci } from './pkg/fib_wasm.js';

let listo = false;

self.onmessage = async (e) => {
  if (!listo) {
    await init();
    listo = true;
  }

  const { n } = e.data;
  const resultado = fibonacci(n);
  self.postMessage({ resultado });
};

main.js:

const worker = new Worker('./worker.js', { type: 'module' });

worker.postMessage({ n: 1000 });
worker.onmessage = (e) => console.log('Resultado:', e.data.resultado);

Ventaja: la UI no se bloquea mientras se calcula.

Volver al índice · Capítulo original

Ejercicios resueltos — Capítulo 28¶

Volver al índice · Capítulo original

Ejercicio 1: Análisis de sentimiento¶

Añade análisis de sentimiento a los comentarios.

Solución¶

npm install @xenova/transformers

import { pipeline } from '@xenova/transformers';

const clasificador = await pipeline(
  'sentiment-analysis',
  'Xenova/distilbert-base-uncased-finetuned-sst-2-english'
);

async function analizar(texto) {
  const [resultado] = await clasificador(texto);
  return resultado;
}

const r = await analizar('Me encanta este libro');
console.log(r);
// { label: 'POSITIVE', score: 0.9998 }

Mostrar en UI:

<textarea id="texto" placeholder="Escribe algo..."></textarea>
<p id="resultado"></p>

<script type="module">
  import { pipeline } from '@xenova/transformers';

  const clasificador = await pipeline('sentiment-analysis');

  document.getElementById('texto').addEventListener('input', async (e) => {
    const texto = e.target.value.trim();
    if (texto.length < 3) return;

    const [r] = await clasificador(texto);
    document.getElementById('resultado').textContent =
      r.label === 'POSITIVE' ? '😊 Positivo' : '😞 Negativo';
  });
</script>

Ejercicio 2: Buscador semántico¶

Crea un buscador semántico con embeddings.

Solución¶

import { pipeline } from '@xenova/transformers';

const extractor = await pipeline(
  'feature-extraction',
  'Xenova/all-MiniLM-L6-v2'
);

async function embedding(texto) {
  const salida = await extractor(texto, {
    pooling: 'mean',
    normalize: true,
  });
  return salida.data;
}

function similitud(a, b) {
  return a.reduce((sum, v, i) => sum + v * b[i], 0);
}

async function buscar(consulta, documentos) {
  const vecConsulta = await embedding(consulta);
  const vecDocs = await Promise.all(documentos.map(embedding));

  const puntuados = documentos.map((doc, i) => ({
    doc,
    score: similitud(vecConsulta, vecDocs[i]),
  }));

  return puntuados.sort((a, b) => b.score - a.score);
}

const docs = [
  'Cómo usar HTML',
  'Introducción a CSS',
  'JavaScript moderno',
  'Guía de TypeScript',
];

const resultados = await buscar('estilos web', docs);
console.log(resultados);
// [ 'Introducción a CSS', 'Cómo usar HTML', ... ]

Ejercicio 3: Dictado por voz¶

Implementa dictado por voz en un formulario.

Solución¶

<label for="texto">Dictado</label>
<textarea id="texto" rows="5"></textarea>
<button id="btn">🎤 Hablar</button>

<script>
  const btn = document.getElementById('btn');
  const area = document.getElementById('texto');

  const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
  if (!SR) {
    btn.disabled = true;
    btn.textContent = 'No soportado';
  } else {
    const recognition = new SR();
    recognition.lang = 'es-ES';
    recognition.continuous = true;

    recognition.onresult = (event) => {
      let texto = '';
      for (let i = event.resultIndex; i < event.results.length; i++) {
        texto += event.results[i][0].transcript;
      }
      area.value += texto;
    };

    btn.addEventListener('click', () => {
      if (btn.textContent.includes('Hablar')) {
        recognition.start();
        btn.textContent = '🔴 Parar';
      } else {
        recognition.stop();
        btn.textContent = '🎤 Hablar';
      }
    });
  }
</script>

Ejercicio 4: WebLLM¶

Prueba WebLLM con un modelo pequeño.

Solución¶

npm install @mlc-ai/web-llm

<div id="progreso"></div>
<p id="respuesta"></p>

<script type="module">
  import * as webllm from '@mlc-ai/web-llm';

  const motor = await webllm.CreateMLCEngine(
    'Llama-3.2-1B-Instruct-q4f32_1-MLC',
    {
      initProgressCallback: (info) => {
        document.getElementById('progreso').textContent =
          `Cargando: ${(info.progress * 100).toFixed(1)}%`;
      },
    }
  );

  const respuesta = await motor.chat.completions.create({
    messages: [
      { role: 'system', content: 'Resume en 20 palabras.' },
      { role: 'user', content: 'HTML es un lenguaje de marcado...' },
    ],
  });

  document.getElementById('respuesta').textContent =
    respuesta.choices[0].message.content;
</script>

Requiere WebGPU

Chrome/Edge 113+ o Safari 17+. Firefox va llegando.

Ejercicio 5: MediaPipe para gestos¶

Usa MediaPipe para detectar gestos.

Solución¶

npm install @mediapipe/tasks-vision

<video autoplay playsinline></video>

<script type="module">
  import { HandLandmarker, FilesetResolver } from '@mediapipe/tasks-vision';

  const vision = await FilesetResolver.forVisionTasks(
    'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/wasm'
  );

  const detector = await HandLandmarker.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath: 'https://storage.googleapis.com/mediapipe-models/hand_landmarker/hand_landmarker/float16/1/hand_landmarker.task',
    },
    numHands: 1,
  });

  const video = document.querySelector('video');
  const stream = await navigator.mediaDevices.getUserMedia({ video: true });
  video.srcObject = stream;

  function detectar() {
    const resultados = detector.detectForVideo(video, performance.now());

    if (resultados.landmarks.length > 0) {
      const mano = resultados.landmarks[0];
      // Verificar si el índice está "levantado" (posición y < posición y del nudillo)
      const dedoLevantado = mano[8].y < mano[6].y;
      if (dedoLevantado) console.log('👍 Dedo levantado');
    }

    requestAnimationFrame(detectar);
  }

  detectar();
</script>

Ejercicio 6: TensorFlow.js¶

Entrena un modelo simple en el navegador.

Solución¶

npm install @tensorflow/tfjs

import * as tf from '@tensorflow/tfjs';

// Datos: y = 2x + 1
const xs = tf.tensor1d([1, 2, 3, 4, 5]);
const ys = tf.tensor1d([3, 5, 7, 9, 11]);

const modelo = tf.sequential();
modelo.add(tf.layers.dense({ units: 1, inputShape: [1] }));
modelo.compile({ loss: 'meanSquaredError', optimizer: 'sgd' });

await modelo.fit(xs, ys, {
  epochs: 200,
  callbacks: {
    onEpochEnd: (epoch, logs) => console.log(`Epoch ${epoch}: loss=${logs.loss.toFixed(4)}`),
  },
});

const prediccion = modelo.predict(tf.tensor1d([6]));
prediccion.print(); // ~13

Ejercicio 7: Cachear el modelo¶

Cachea el modelo para que no se descargue cada vez.

Solución¶

import { env, pipeline } from '@xenova/transformers';

env.useBrowserCache = true;
env.allowLocalModels = false;

// El modelo se descarga la primera vez y se guarda en Cache Storage
const clasificador = await pipeline('sentiment-analysis');

Verificar: DevTools → Application → Cache Storage → transformers-cache.

Servir desde tu dominio:

env.remoteHost = 'https://libro.urukais.com/models/';

Volver al índice · Capítulo original

Ejercicios resueltos — Capítulo 29¶

Volver al índice · Capítulo original

Ejercicio 1: Escena VR con A-Frame¶

Crea una escena VR con 5 objetos de colores.

Solución¶

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi escena VR</title>
  <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
</head>
<body>
  <a-scene>
    <a-box position="-1 0.5 -3" color="#6a5acd"></a-box>
    <a-sphere position="0 1.25 -5" radius="1.25" color="#22d3ee"></a-sphere>
    <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#ef4444"></a-cylinder>
    <a-cone position="-2 0.75 -4" radius-bottom="1" height="1.5" color="#f59e0b"></a-cone>
    <a-torus position="2 1 -5" color="#10b981"></a-torus>

    <a-plane position="0 0 -4" rotation="-90 0 0" width="10" height="10" color="#f8fafc"></a-plane>
    <a-sky color="#0f172a"></a-sky>
  </a-scene>
</body>
</html>

Ejercicio 2: Botón "Enter VR"¶

Añade un botón para entrar en VR.

Solución¶

Con A-Frame: aparece automáticamente si el dispositivo lo soporta. No hay que hacer nada.

Con Three.js:

import { VRButton } from 'https://unpkg.com/three@0.160.0/examples/jsm/webxr/VRButton.js';

renderer.xr.enabled = true;
document.body.appendChild(VRButton.createButton(renderer));

Ejercicio 3: Three.js a WebXR¶

Convierte una escena Three.js a WebXR.

Solución¶

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>WebXR</title>
</head>
<body>
  <script type="importmap">
    {
      "imports": {
        "three": "https://unpkg.com/three@0.160.0/build/three.module.js"
      }
    }
  </script>

  <script type="module">
    import * as THREE from 'three';
    import { VRButton } from 'https://unpkg.com/three@0.160.0/examples/jsm/webxr/VRButton.js';

    const escena = new THREE.Scene();
    escena.background = new THREE.Color(0x0f172a);

    const camara = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 100);
    camara.position.set(0, 1.6, 3);

    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(innerWidth, innerHeight);
    renderer.xr.enabled = true;
    document.body.appendChild(renderer.domElement);
    document.body.appendChild(VRButton.createButton(renderer));

    escena.add(new THREE.HemisphereLight(0xffffff, 0x444444, 1));

    const cubo = new THREE.Mesh(
      new THREE.BoxGeometry(1, 1, 1),
      new THREE.MeshStandardMaterial({ color: 0x6a5acd })
    );
    cubo.position.set(0, 1.6, -2);
    escena.add(cubo);

    renderer.setAnimationLoop((tiempo) => {
      cubo.rotation.y = tiempo / 1000;
      renderer.render(escena, camara);
    });

    addEventListener('resize', () => {
      camara.aspect = innerWidth / innerHeight;
      camara.updateProjectionMatrix();
      renderer.setSize(innerWidth, innerHeight);
    });
  </script>
</body>
</html>

Ejercicio 4: AR con ARCore¶

Prueba AR en un móvil Android.

Solución¶

<script type="module">
  import * as THREE from 'three';
  import { ARButton } from 'https://unpkg.com/three@0.160.0/examples/jsm/webxr/ARButton.js';

  const renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.xr.enabled = true;
  renderer.setSize(innerWidth, innerHeight);
  document.body.appendChild(renderer.domElement);

  document.body.appendChild(
    ARButton.createButton(renderer, { requiredFeatures: ['hit-test'] })
  );

  const escena = new THREE.Scene();
  const camara = new THREE.PerspectiveCamera();

  escena.add(new THREE.HemisphereLight(0xffffff, 0xbbbbff, 3));

  const cubo = new THREE.Mesh(
    new THREE.BoxGeometry(0.2, 0.2, 0.2),
    new THREE.MeshStandardMaterial({ color: 0x6a5acd })
  );
  cubo.visible = false;
  escena.add(cubo);

  const reticle = new THREE.Mesh(
    new THREE.RingGeometry(0.15, 0.2, 32).rotateX(-Math.PI / 2),
    new THREE.MeshBasicMaterial({ color: 0x22d3ee })
  );
  reticle.matrixAutoUpdate = false;
  reticle.visible = false;
  escena.add(reticle);

  let hitTestSource = null;

  renderer.xr.addEventListener('sessionstart', async () => {
    const session = renderer.xr.getSession();
    const viewerSpace = await session.requestReferenceSpace('viewer');
    hitTestSource = await session.requestHitTestSource({ space: viewerSpace });

    session.addEventListener('select', () => {
      if (reticle.visible) {
        const clon = cubo.clone();
        clon.position.setFromMatrixPosition(reticle.matrix);
        clon.visible = true;
        escena.add(clon);
      }
    });
  });

  renderer.setAnimationLoop((tiempo, frame) => {
    if (frame && hitTestSource) {
      const refSpace = renderer.xr.getReferenceSpace();
      const hits = frame.getHitTestResults(hitTestSource);
      if (hits.length) {
        reticle.visible = true;
        reticle.matrix.fromArray(hits[0].getPose(refSpace).transform.matrix);
      }
    }
    renderer.render(escena, camara);
  });
</script>

Ejercicio 5: Audio espacial¶

Añade audio espacial a un objeto.

Solución¶

const listener = new THREE.AudioListener();
camara.add(listener);

const sonido = new THREE.PositionalAudio(listener);
const loader = new THREE.AudioLoader();

loader.load('ambiente.mp3', (buffer) => {
  sonido.setBuffer(buffer);
  sonido.setRefDistance(1);
  sonido.setLoop(true);
  sonido.play();
});

cubo.add(sonido); // el sonido viene del cubo

Al moverte por la escena VR, el sonido cambia de volumen e intensidad según la distancia.

Ejercicio 6: Hand tracking en Quest¶

Implementa hand tracking básico.

Solución¶

const session = renderer.xr.getSession();

session.addEventListener('inputsourceschange', (event) => {
  event.added.forEach((input) => {
    if (input.hand) {
      console.log('Mano detectada:', input.handedness);
    }
  });
});

renderer.setAnimationLoop((tiempo, frame) => {
  if (!frame) return;

  for (const input of session.inputSources) {
    if (input.hand) {
      for (const joint of input.hand.values()) {
        // joint.transform es una matriz 4x4
        // joint.jointName: 'wrist', 'thumb-tip', 'index-finger-tip', ...
      }
    }
  }

  renderer.render(escena, camara);
});

Ejercicio 7: Optimizar para 90 FPS¶

Optimiza una escena VR para alcanzar 90 FPS.

Solución¶

Checklist:

[ ] Bajo poligonaje: cada triángulo cuenta.
[ ] Texturas comprimidas: KTX2 o Basis.
[ ] Instancing para objetos repetidos.
[ ] LOD (Level of Detail) según distancia.
[ ] Evita transparencias (caras de renderizar).
[ ] Sin sombras dinámicas complejas.
[ ] Sin post-processing pesado.
[ ] frustumCulled = true por defecto.

Medir FPS:

let frames = 0;
let inicio = performance.now();

renderer.setAnimationLoop(() => {
  frames++;

  const ahora = performance.now();
  if (ahora - inicio >= 1000) {
    console.log('FPS:', frames);
    frames = 0;
    inicio = ahora;
  }

  renderer.render(escena, camara);
});

Objetivo: 90 FPS estables (11 ms por frame).

Volver al índice · Capítulo original

Ejercicios resueltos — Capítulo 30¶

Volver al índice · Capítulo original

Ejercicio 1: Instalar MetaMask en testnet¶

Instala MetaMask y crea una wallet en testnet.

Solución¶

Instala la extensión MetaMask en Chrome/Firefox/Brave.
Crea una wallet nueva (guarda la frase semilla en un sitio seguro).
Cambia la red a Sepolia (testnet):
Red: Sepolia
RPC URL: https://rpc.sepolia.org
Chain ID: 11155111
Símbolo: SepoliaETH
Pide ETH de prueba gratis en Sepolia Faucet.

Ejercicio 2: Conectar la web a MetaMask¶

Conecta tu web a MetaMask con eth_requestAccounts.

Solución¶

<button id="conectar">Conectar wallet</button>
<p id="estado"></p>

<script>
  const btn = document.getElementById('conectar');
  const estado = document.getElementById('estado');

  btn.addEventListener('click', async () => {
    if (!window.ethereum) {
      estado.textContent = 'Instala MetaMask';
      return;
    }

    try {
      const cuentas = await window.ethereum.request({
        method: 'eth_requestAccounts',
      });
      estado.textContent = `Conectado: ${cuentas[0].slice(0, 6)}...${cuentas[0].slice(-4)}`;
    } catch (err) {
      estado.textContent = 'Rechazado por el usuario';
    }
  });
</script>

Ejercicio 3: Leer balance con ethers¶

Lee el balance de una dirección.

Solución¶

npm install ethers

import { BrowserProvider, formatEther } from 'ethers';

async function leerBalance(direccion) {
  const provider = new BrowserProvider(window.ethereum);
  const balance = await provider.getBalance(direccion);

  return formatEther(balance); // convierte de wei a ETH
}

const saldo = await leerBalance('0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045');
console.log('Balance:', saldo, 'ETH');

Desde una wallet conectada:

const provider = new BrowserProvider(window.ethereum);
const cuentas = await provider.send('eth_requestAccounts', []);
const saldo = await provider.getBalance(cuentas[0]);
console.log('Tu balance:', formatEther(saldo), 'ETH');

Ejercicio 4: Contrato `Contador` en Sepolia¶

Despliega un contrato Contador en Sepolia y úsalo desde el frontend.

Solución¶

Contrato Contador.sol:

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.20;

contract Contador {
    uint256 public cuenta;

    function incrementar() public {
        cuenta += 1;
    }

    function reiniciar() public {
        cuenta = 0;
    }
}

Compilar y desplegar:

Usa Remix IDE o Hardhat.
Conecta MetaMask a Sepolia.
Deploy → copia la dirección.

Frontend:

import { BrowserProvider, Contract } from 'ethers';

const ABI = [
  'function cuenta() view returns (uint256)',
  'function incrementar()',
  'function reiniciar()',
];

const DIRECCION = '0x...'; // dirección del contrato

async function incrementar() {
  const provider = new BrowserProvider(window.ethereum);
  const signer = await provider.getSigner();
  const contrato = new Contract(DIRECCION, ABI, signer);

  const tx = await contrato.incrementar();
  console.log('Transacción enviada:', tx.hash);
  await tx.wait();
  console.log('Confirmada');
}

async function leer() {
  const provider = new BrowserProvider(window.ethereum);
  const contrato = new Contract(DIRECCION, ABI, provider);
  const cuenta = await contrato.cuenta();
  console.log('Cuenta:', cuenta.toString());
}

Ejercicio 5: Información de un NFT¶

Muestra información de un NFT desde OpenSea API.

Solución¶

const API_KEY = 'tu-api-key-opensea';
const CONTRATO = '0xBC4CA0EdA7647A8aB7C2061c2E118A18a936f13D'; // BAYC
const TOKEN_ID = '1';

async function obtenerNFT() {
  const res = await fetch(
    `https://api.opensea.io/api/v2/chain/ethereum/contract/${CONTRATO}/nfts/${TOKEN_ID}`,
    {
      headers: {
        'X-API-KEY': API_KEY,
      },
    }
  );

  if (!res.ok) throw new Error(`HTTP ${res.status}`);

  const data = await res.json();
  return data.nft;
}

const nft = await obtenerNFT();
console.log('Nombre:', nft.name);
console.log('Imagen:', nft.image_url);

Ejercicio 6: Subir a IPFS¶

Sube un archivo a IPFS y accede vía gateway.

Solución¶

npm install ipfs-http-client

import { create } from 'ipfs-http-client';

const ipfs = create({ url: 'https://ipfs.infura.io:5001/api/v0' });

async function subir(texto) {
  const { path } = await ipfs.add(texto);
  return `https://ipfs.io/ipfs/${path}`;
}

const url = await subir('Hola desde IPFS');
console.log('Disponible en:', url);

Consideraciones: - IPFS público → el archivo se replica entre nodos. - Si nadie lo pide, puede desaparecer (no es almacenamiento permanente). - Para persistencia, usa Pinata, NFT.storage o web3.storage.

Ejercicio 7: Comparar Web2 vs Web3¶

Escribe el mismo formulario con Web2 y con Web3.

<form id="login">
  <input type="email" placeholder="Email" required>
  <input type="password" placeholder="Contraseña" required>
  <button>Entrar</button>
</form>

<script>
  document.getElementById('login').addEventListener('submit', async (e) => {
    e.preventDefault();
    const form = new FormData(e.target);
    const res = await fetch('/api/login', {
      method: 'POST',
      body: JSON.stringify(Object.fromEntries(form)),
      headers: { 'Content-Type': 'application/json' },
    });
    const { token } = await res.json();
    localStorage.setItem('token', token);
  });
</script>

Ventajas: - UX familiar. - Recuperación de contraseña posible. - Sin gas fees.

Desventajas: - Servidor central puede caer. - Datos en el servidor.

Web3: Conectar wallet¶

<button id="conectar">Conectar wallet</button>

<script>
  document.getElementById('conectar').addEventListener('click', async () => {
    if (!window.ethereum) return alert('Instala MetaMask');

    const cuentas = await window.ethereum.request({
      method: 'eth_requestAccounts',
    });

    console.log('Conectado como:', cuentas[0]);
  });
</script>

Ventajas: - Sin contraseñas ni emails. - Identidad soberana. - Login con una sola acción.

Desventajas: - Si pierdes la clave, pierdes la cuenta. - Curva de aprendizaje alta. - Requiere instalar una extensión.

Conclusión

No todo debe ser Web3. Web2 sigue siendo la mejor opción para el 99% de casos. Usa Web3 solo cuando la descentralización sea un requisito real.

Volver al índice · Capítulo original

Recursos¶

Material adicional para seguir aprendiendo desarrollo web.

📖 Documentación oficial¶

MDN Web Docs — la referencia definitiva para HTML, CSS y JavaScript.
HTML Living Standard — el estándar vivo de HTML.
CSS Tricks — artículos y trucos de CSS.
JavaScript.info — tutorial moderno de JavaScript en español.

🛠️ Herramientas recomendadas¶

Visual Studio Code — editor gratuito y extensible.
Live Server — extensión de VS Code que recarga la página al guardar.
Figma — diseño y prototipado.
Can I use — compatibilidad de características web por navegador.

🎓 Cursos gratuitos¶

📚 Libros recomendados¶

HTML and CSS: Design and Build Websites — Jon Duckett
Eloquent JavaScript — Marijn Haverbeke
CSS: The Definitive Guide — Eric A. Meyer

🧩 Prácticas¶

Frontend Mentor — retos de diseño reales.
CSSBattle — retos de CSS creativos.
Exercism — ejercicios con mentoría.

Roadmap del libro¶

Estado del proyecto y qué viene a continuación.

✅ Completado¶

🟢 Nivel principiante¶

[x] 01 — Introducción al desarrollo web
[x] 02 — HTML básico
[x] 03 — CSS básico
[x] 04 — JavaScript esencial
[x] 05 — Diseño responsive
[x] 06 — Formularios HTML

🟡 Nivel intermedio¶

[x] 07 — Git y control de versiones
[x] 08 — Consumo de APIs con fetch
[x] 09 — Despliegue y hosting
[x] 10 — Proyecto final: portfolio

🟠 Nivel avanzado¶

[x] 11 — CSS moderno
[x] 12 — JavaScript asíncrono
[x] 13 — Módulos y bundlers
[x] 14 — Accesibilidad web
[x] 15 — TypeScript desde cero
[x] 16 — Testing frontend
[x] 17 — Rendimiento web
[x] 18 — Arquitectura frontend

🔴 Nivel profesional¶

[x] 19 — Full-stack con Node.js
[x] 20 — DevOps para frontend

🟣 Nivel experto¶

[x] 21 — Web Components
[x] 22 — Progressive Web Apps (PWA)
[x] 23 — WebSockets y tiempo real
[x] 24 — Animaciones avanzadas
[x] 25 — Design systems

🔵 Nivel élite¶

[x] 26 — Seguridad web
[x] 27 — WebAssembly
[x] 28 — IA en el frontend
[x] 29 — WebXR
[x] 30 — Web3

🚧 Próximas mejoras¶

[ ] Traducción al inglés
[ ] Versión en PDF descargable
[ ] Ejercicios resueltos publicados
[ ] Vídeos explicativos por capítulo
[ ] Modo offline con Service Worker
[ ] Buscador Algolia

📅 Futuras ampliaciones¶

[ ] Capítulo 31 — Testing E2E con Playwright
[ ] Capítulo 32 — Server Components
[ ] Capítulo 33 — Edge Computing
[ ] Capítulo 34 — Monorepos y Turborepo
[ ] Capítulo 35 — Diseño de sistemas de diseño

🤝 ¿Quieres contribuir?¶

Lee la guía de contribuir y abre un issue con tu propuesta.

Changelog¶

Historial de cambios del libro.

[4.0.0] — 2026-10-12¶

Añadido¶

Capítulos 26-30 (nivel élite):
Seguridad web
WebAssembly
IA en el frontend
WebXR
Web3
Sistema de comentarios con Giscus en todas las páginas
Página de preguntas frecuentes (FAQ)
SEO: sitemap, robots.txt e imagen social
Newsletter con Substack
Dominio propio: libro.urukais.com

Cambiado¶

Sidebar reorganizado con 6 niveles
Home actualizada con los 30 capítulos

[3.0.0] — 2026-10-12¶

Añadido¶

Capítulos 21-25 (nivel experto): Web Components, PWA, WebSockets, animaciones y design systems

Cambiado¶

Sidebar con 5 niveles
Roadmap y prensa actualizados a 25 capítulos

[2.0.0] — 2026-10-12¶

Añadido¶

Capítulos 11-18 (avanzado) y 19-20 (profesional)
Página Filosofía, Contacto, Agradecimientos y Prensa
Foto y bio del autor con badges

[1.0.0] — 2026-10-12¶

Añadido¶

10 capítulos iniciales
Apéndices completos
Despliegue automático con GitHub Actions

El formato sigue Keep a Changelog.

Cómo contribuir¶

Este libro es un proyecto abierto. Si encuentras un error, quieres proponer un capítulo nuevo o mejorar un ejemplo, tu ayuda es bienvenida.

🐛 Reportar un error¶

Abre un issue en GitHub con:

El capítulo o archivo donde está el problema.
Qué esperabas encontrar.
Qué has encontrado en su lugar.

✨ Proponer una mejora¶

Haz un fork del repositorio.
Clona tu fork:

```bash git clone https://github.com/TU_USUARIO/Libro-desarrollador-Web-Urukais-.git cd Libro-desarrollador-Web-Urukais-

Sobre el autor¶

Manuel Casimiro Carrasco

Manuel Casimiro Carrasco — Urukais¶

Desarrollador web · Reus, Tarragona (España)

Desarrollador web con experiencia en el sector tecnológico, apasionado por construir productos digitales que combinan diseño limpio, buen rendimiento y accesibilidad.

Mi enfoque es simple: tu visión es mi visión. Me especializo en imaginar lo que imaginas y convertirlo en realidad. Y hacerlo bien.

🛠️ Stack tecnológico¶

🎓 Trayectoria¶

Mi pasión por la tecnología me llevó a formarme específicamente en desarrollo web. Durante esos años destaqué por mi dedicación y mi capacidad para resolver problemas de forma creativa. Aproveché cada oportunidad para ampliar conocimientos: proyectos propios, colaboraciones y certificaciones que complementaron mi formación.

Con los años he trabajado en proyectos de distinta naturaleza —desde webs corporativas hasta aplicaciones web interactivas— siempre con el mismo objetivo: código limpio, interfaces usables y productos que funcionan.

🚀 Proyectos destacados¶

Mi nuevo proyecto 1 — Descripción breve del proyecto.
Mi nuevo proyecto 2 — Descripción breve del proyecto.
Portfolio personal — Mi web personal con proyectos y contacto.
Libro del Desarrollador Web — Este mismo libro, construido con MkDocs Material.
Urukais-musiword — Proyecto de web musical.

🌍 Idiomas¶

Español — lengua materna
Catalán — nivel nativo

🎯 Intereses¶

Fuera del código, disfruto de la lectura, la música y el deporte. Y siempre estoy al día con las últimas tendencias en tecnología: nuevas herramientas, frameworks, patrones de diseño y todo lo que ayude a construir mejor software.

📬 Contacto¶

🌐 Portfolio: silly-boba-dc057e.netlify.app
💻 GitHub: @urukaisk-maker
📧 Email: urukaisk@gmail.com

📖 Sobre este libro¶

Este libro nació de mis propias notas mientras aprendía y enseñaba desarrollo web. Con el tiempo esas notas se convirtieron en un material estructurado, pensado para acompañar a cualquier persona que quiera aprender desde cero o reforzar lo que ya sabe.

Está pensado para ser:

Práctico — cada capítulo tiene ejemplos que puedes copiar, ejecutar y modificar.
Progresivo — de lo más básico a lo más avanzado, sin saltos bruscos.
Abierto — puedes contribuir, corregir y proponer mejoras desde GitHub.
En español — con ejemplos claros y sin traducciones forzadas.
Actualizado — cubre tecnologías y prácticas usadas hoy en producción.
Independiente — sin frameworks de moda que caduquen en seis meses.

🎯 ¿Para quién es este libro?¶

Personas que empiezan desde cero y no saben por dónde arrancar.
Estudiantes que buscan material complementario a sus clases.
Autodidactas que prefieren aprender construyendo.
Profesionales que quieren repasar fundamentos o cubrir huecos.

🗺️ Qué vas a encontrar¶

18 capítulos organizados en tres niveles: principiante, intermedio y avanzado.
Ejemplos ejecutables para cada concepto importante.
Ejercicios al final de cada capítulo para practicar.
Apéndices con chuletas rápidas, glosario y recursos por nivel.

🤝 Contribuir¶

Este libro es un proyecto vivo. Si encuentras un error, quieres proponer un capítulo nuevo o mejorar un ejemplo, tienes toda la información en la página de Contribuir.

"La mejor forma de aprender es enseñar."

— Urukais

Contacto¶

¿Tienes una duda, sugerencia o simplemente quieres saludar? Aquí tienes las formas de contactarme.

📬 Escríbeme¶

📧 Email: urukaisk@gmail.com
💻 GitHub: @urukaisk-maker
🌐 Portfolio: silly-boba-dc057e.netlify.app

💡 ¿Quieres contribuir al libro?¶

Si has encontrado un error, quieres proponer un capítulo o mejorar un ejemplo, hay dos formas:

Abrir un issue en GitHub Issues.
Hacer un Pull Request siguiendo la guía de contribución.

🐛 ¿Encontraste un error?¶

Antes de reportar, por favor comprueba:

¿Estás en la versión más reciente? (haz git pull o recarga la web)
¿Lo has visto en más de un navegador?
¿Aparece el mismo error en el ejemplo del repositorio?

Si sigue ahí, abre un issue con:

Capítulo y sección donde ocurre.
Qué esperabas que pasara.
Qué pasa en realidad.
Capturas o fragmentos de código si aplica.

🤝 Colaboraciones¶

Estoy abierto a:

Charlas o talleres sobre desarrollo web.
Colaboraciones en proyectos de código abierto.
Escritura técnica o corrección de contenido.
Mentoría a personas que empiezan.

Escríbeme y hablamos.

⏱️ Tiempo de respuesta¶

Intento responder a todos los mensajes, pero no siempre es posible de inmediato. Los emails con asunto claro y bien redactados reciben respuesta antes.

Gracias por pasarte por aquí. ❤️

Preguntas frecuentes¶

Las dudas más comunes sobre este libro y sobre cómo aprender desarrollo web.

📖 Sobre el libro¶

¿Es gratis?¶

Sí, completamente. El libro es abierto y todo el contenido está disponible en libro.urukais.com. El código fuente está en GitHub bajo licencia MIT.

¿Necesito conocimientos previos?¶

No. El libro empieza desde cero. Solo necesitas un ordenador con navegador y ganas de aprender. Si nunca has escrito código, puedes empezar por el Capítulo 1.

¿Cuánto tiempo tardo en completarlo?¶

Depende del tiempo que le dediques. Haciendo un capítulo al día, en un mes tienes una base sólida. Haciéndolo a fondo con los ejercicios, 2-3 meses. No hay prisa.

¿En qué orden leo los capítulos?¶

En el orden que aparecen en el menú lateral. Están organizados por niveles:

🟢 Principiante (1-6): fundamentos
🟡 Intermedio (7-10): herramientas y primer proyecto
🟠 Avanzado (11-18): técnicas profesionales
🔴 Profesional (19-20): backend y DevOps
🟣 Experto (21-25): tecnologías específicas

¿Hay ejercicios?¶

Sí, cada capítulo termina con una lista de ejercicios. No hay soluciones publicadas todavía, pero puedes proponerlas si quieres.

¿Puedo contribuir?¶

Por supuesto. Lee la guía de contribución. Aceptamos correcciones de erratas, mejoras en ejemplos, nuevos capítulos y traducciones.

¿Vas a publicar más capítulos?¶

Sí. Puedes ver el plan completo en el Roadmap. Si tienes ideas, abre un issue.

💻 Sobre desarrollo web¶

¿Por dónde empiezo?¶

Por el Capítulo 1. Y cuando termines el 6, empieza a construir cosas pequeñas por tu cuenta. La práctica es lo que hace que aprendas.

¿Necesito estudiar una carrera?¶

No. Muchos desarrolladores profesionales son autodidactas. Una carrera ayuda, pero no es obligatoria. Lo que importa es el portfolio y la capacidad de resolver problemas.

¿Debo aprender un framework?¶

Sí, pero después de dominar HTML, CSS y JavaScript. Aprender React o Vue sin entender lo básico es como construir un edificio sin cimientos.

¿Cuánto tiempo tardo en encontrar trabajo?¶

Depende de muchos factores. Con dedicación constante, entre 6 meses y 2 años. La clave: portfolio sólido + proyectos reales + capacidad de resolver problemas en entrevistas.

¿Vale la pena aprender TypeScript?¶

Sí, absolutamente. Se ha convertido en el estándar de la industria y te ahorra horas de depuración. En el libro lo cubrimos en el Capítulo 15.

¿Necesito saber matemáticas?¶

No para desarrollo web general. Solo si te especializas en gráficos 3D, animaciones complejas o machine learning.

¿HTML y CSS son lenguajes de programación?¶

Técnicamente no. Son lenguajes de marcado (HTML) y estilos (CSS). El lenguaje de programación de la web es JavaScript.

🛠️ Sobre herramientas¶

¿Qué editor de código uso?¶

Visual Studio Code. Es gratuito, extensible y el estándar de facto. Alternativas: WebStorm (de pago), Neovim, Sublime.

¿Windows, Mac o Linux?¶

Cualquiera. El desarrollo web es multiplataforma. Linux suele ser el más usado por profesionales, pero Windows con WSL2 funciona genial hoy en día.

¿Necesito un ordenador potente?¶

No. Cualquier portátil de los últimos 5 años vale. 8 GB de RAM está bien, 16 GB es ideal si trabajas con Docker o máquinas virtuales.

¿Tablet o iPad?¶

No es lo ideal. Puedes programar con editores como Replit o GitHub Codespaces, pero un ordenador es mucho más cómodo.

🚀 Sobre el despliegue¶

¿Dónde publico mi web?¶

Para sitios estáticos: GitHub Pages, Netlify, Vercel o Cloudflare Pages. Todos tienen plan gratuito. En el Capítulo 9 lo explico en detalle.

¿Necesito un dominio?¶

No es obligatorio, pero da mucha profesionalidad. Cuesta unos 10 €/año. Es una inversión pequeña.

¿Qué es HTTPS y por qué importa?¶

Es la versión segura de HTTP. Cifra la comunicación entre navegador y servidor. Todos los sitios deberían usarlo. GitHub Pages, Netlify y Vercel lo activan automáticamente.

🤝 Sobre este proyecto¶

¿Cómo puedo contactar?¶

Usa la página de contacto. Suelo responder en 48h.

¿Puedo copiar el contenido?¶

Sí, siempre que mantengas la atribución. Está bajo licencia MIT.

¿Cómo me suscribo a las novedades?¶

En la home tienes un botón para suscribirte a la newsletter. Te llega un email cuando publico capítulos nuevos.

¿No encuentras tu pregunta? Escríbeme.

Agradecimientos¶

Este libro no sería posible sin el trabajo de miles de personas que comparten su conocimiento libremente en internet.

🌍 A la comunidad web¶

A todas las personas que escriben en:

MDN Web Docs — la referencia más completa y fiable del desarrollo web.
CSS Tricks — durante décadas, el mejor lugar para aprender CSS.
javascript.info — el tutorial de JavaScript más claro que existe.
Smashing Magazine — artículos profundos sobre diseño y desarrollo.
web.dev — guías de rendimiento, accesibilidad y buenas prácticas de Google.

🛠️ A las herramientas open source¶

MkDocs y Material for MkDocs — sin ellos este libro no tendría forma.
Python — el motor detrás de todo.
Git y GitHub — el control de versiones y el alojamiento.

📚 A los autores que inspiran¶

Jon Duckett — por HTML and CSS: Design and Build Websites.
Marijn Haverbeke — por Eloquent JavaScript.
Kyle Simpson — por la serie You Don't Know JS.
Eric A. Meyer — por CSS: The Definitive Guide.

👥 A quienes han contribuido¶

Cualquier persona que haya abierto un issue, propuesto un PR o señalado una errata será mencionada aquí.

(Aún no hay contribuciones externas. ¿Quieres ser la primera?)

❤️ A ti¶

Sí, a ti. Por dedicar tiempo a leer esto. Por querer aprender. Por no conformarte con tutoriales de 5 minutos.

Gracias por estar aquí.

Prensa y media¶

Recursos para medios, blogs y personas que quieran hablar de este proyecto.

📋 Ficha del proyecto¶

Campo	Valor
Nombre	Libro del Desarrollador Web
Autor	Manuel Casimiro Carrasco (Urukais)
Año	2026
Licencia	MIT
Idioma	Español
Tema	Desarrollo web (HTML, CSS, JavaScript y más)
Capítulos	30
Niveles	6 (principiante, intermedio, avanzado, profesional, experto, élite)
Web	libro.urukais.com
Repositorio	GitHub

📝 Descripciones listas para usar¶

Descripción corta (una línea)¶

Libro abierto y gratuito sobre desarrollo web moderno, escrito en español por Urukais.

Descripción media (un párrafo)¶

Libro del Desarrollador Web es un proyecto abierto que reúne 30 capítulos sobre HTML, CSS, JavaScript y desarrollo web moderno. Está estructurado en seis niveles (principiante, intermedio, avanzado, profesional, experto y élite) e incluye ejemplos ejecutables y ejercicios al final de cada capítulo. Todo el contenido es gratuito y está disponible en GitHub bajo licencia MIT.

Descripción larga¶

Libro del Desarrollador Web nació de las notas personales de Manuel Casimiro Carrasco (Urukais) mientras aprendía y enseñaba desarrollo web. Con el tiempo, esas notas se convirtieron en un material estructurado, pensado para acompañar a cualquier persona que quiera aprender desde cero o reforzar lo que ya sabe.

El libro cubre 30 capítulos organizados en seis niveles: principiante (HTML, CSS, JavaScript, formularios, responsive), intermedio (Git, APIs, despliegue, proyecto final), avanzado (CSS moderno, JavaScript asíncrono, TypeScript, testing, rendimiento, accesibilidad y arquitectura), profesional (full-stack con Node.js y DevOps), experto (Web Components, PWA, WebSockets, animaciones y design systems) y élite (seguridad, WebAssembly, IA, WebXR y Web3).

Cada capítulo incluye teoría, ejemplos ejecutables y ejercicios. El sitio está construido con MkDocs Material y se despliega automáticamente desde GitHub. Tiene comentarios en cada página vía Giscus y newsletter en Substack.

El proyecto es abierto y gratuito. Cualquier persona puede leerlo, copiarlo, modificarlo o contribuir mejoras a través del repositorio en GitHub.

🎨 Recursos de marca¶

Logo¶

docs/assets/favicon.svg

Colores¶

Uso	Color	Hex
Primario	Morado	`#6a5acd`
Acento	Cian	`#22d3ee`
Fondo claro	Blanco	`#ffffff`
Fondo oscuro	Azul noche	`#0f172a`
Texto claro	Gris claro	`#e2e8f0`
Texto oscuro	Gris oscuro	`#1e293b`

📬 Contacto para prensa¶

📧 urukaisk@gmail.com

Intento responder en un plazo de 48 horas.

📄 Licencia¶

Contenido bajo licencia MIT. Puedes citarlo, reproducirlo o adaptarlo siempre que mantengas la atribución.

Cualquier mención del libro en tu medio, blog o podcast es bienvenida. ❤️

Apéndices

Apéndices¶

Material de consulta rápida para acompañar el libro.

Chuletas rápidas — referencia condensada de HTML, CSS, JS y Git.
Glosario — términos esenciales del desarrollo web.
Recursos por nivel — qué aprender después.

Chuletas rápidas¶

Referencia condensada para tener a mano.

HTML¶

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Título</title>
</head>
<body>
  <h1>Encabezado</h1>
  <p>Párrafo con <a href="url">enlace</a>.</p>
  <img src="img.png" alt="Descripción">
  <ul><li>Item</li></ul>
  <div class="caja">Bloque</div>
</body>
</html>

CSS¶

/* Selectores */
p { color: red; }
.clase { font-size: 1.2rem; }
#id { margin: 1rem; }

/* Modelo de caja */
.caja {
  padding: 1rem;
  border: 1px solid #ccc;
  margin: 1rem;
}

/* Flexbox */
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

/* Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

/* Media query */
@media (min-width: 768px) {
  body { font-size: 18px; }
}

JavaScript¶

// Variables
const PI = 3.14;
let contador = 0;

// Funciones
function saludar(nombre) { return `Hola ${nombre}`; }
const saludar2 = (nombre) => `Hola ${nombre}`;

// DOM
const el = document.querySelector('.clase');
el.textContent = 'Nuevo texto';
el.classList.add('activo');

// Eventos
el.addEventListener('click', () => console.log('click'));

// Arrays
const nums = [1, 2, 3];
nums.map(n => n * 2);
nums.filter(n => n > 1);
nums.reduce((acc, n) => acc + n, 0);

// Fetch
const res = await fetch('https://api.com/datos');
const data = await res.json();

Git¶

git init
git status
git add .
git commit -m "mensaje"
git log --oneline
git branch
git checkout -b nueva-rama
git push -u origin main
git pull

Markdown¶

# Título 1
## Título 2

**negrita** *cursiva* `código`

- lista
- lista

1. numerada
2. numerada

[enlace](url)

![imagen](url)

> cita

Emmet (VS Code)¶

Atajo	Resultado
`!`	Estructura HTML5 completa
`ul>li*3`	`<ul>` con 3 `<li>`
`div.clase`	`<div class="clase">`
`a[href="#"]`	`<a href="#">`

Glosario¶

Términos esenciales del desarrollo web, ordenados alfabéticamente.

A¶

API — Application Programming Interface. Conjunto de reglas que permite a dos programas comunicarse.

Async/await — Sintaxis moderna de JavaScript para manejar operaciones asíncronas de forma legible.

B¶

Backend — Parte del desarrollo web que corre en el servidor (lógica, base de datos).

Branch (rama) — Línea de desarrollo independiente dentro de un repositorio Git.

C¶

CDN — Content Delivery Network. Red de servidores distribuidos que sirven archivos estáticos rápido.

Commit — Registro de un cambio en el historial de Git.

CSS — Cascading Style Sheets. Lenguaje que define la presentación de una página.

D¶

DOM — Document Object Model. Representación en memoria del HTML, manipulable con JavaScript.

Deploy — Publicar una aplicación en internet.

F¶

Fetch — API del navegador para hacer peticiones HTTP.

Flexbox — Modelo de layout CSS unidimensional.

Frontend — Parte del desarrollo web que corre en el navegador.

G¶

Git — Sistema de control de versiones distribuido.

GitHub — Plataforma para alojar repositorios Git.

Grid — Modelo de layout CSS bidimensional.

H¶

HTML — HyperText Markup Language. Lenguaje de marcado que define la estructura de la web.

HTTP — Protocolo de transferencia de hipertexto.

J¶

JavaScript — Lenguaje de programación que corre en el navegador (y también en Node.js).

JSON — JavaScript Object Notation. Formato de intercambio de datos.

M¶

Markdown — Lenguaje de marcado ligero para escribir documentación.

Media query — Regla CSS que aplica estilos según el tamaño de pantalla.

N¶

Node.js — Entorno que permite ejecutar JavaScript fuera del navegador.

P¶

PNG / JPG / SVG / WebP — Formatos de imagen. SVG es vectorial; los demás son mapas de bits.

Pull request — Propuesta de fusionar cambios en GitHub.

R¶

Responsive — Diseño que se adapta a cualquier tamaño de pantalla.

REST — Estilo arquitectónico para APIs basadas en HTTP.

S¶

SCSS / Sass — Preprocesador de CSS con variables, anidamiento y funciones.

SEO — Search Engine Optimization. Optimización para buscadores.

T¶

Terminal — Interfaz de línea de comandos.

TypeScript — JavaScript con tipos estáticos.

V¶

Viewport — Área visible de la página en el dispositivo.

W¶

Webpack / Vite — Empaquetadores de módulos para frontend.

Recursos por nivel¶

Qué estudiar después según tu punto de partida.

🌱 Principiante (acabas de empezar)¶

Termina los capítulos 1 a 6 de este libro.
Practica con freeCodeCamp.
Recrea páginas simples que te gusten (una tarjeta, un menú, un footer).
Aprende a usar el navegador: DevTools, consola, inspector.

Objetivo: construir una web estática de 3–4 páginas.

🌿 Intermedio (ya manejas HTML/CSS/JS básicos)¶

Domina Flexbox y Grid con Flexbox Froggy y Grid Garden.
Aprende SCSS o Tailwind CSS.
Practica JavaScript moderno (ES6+): map, filter, async/await.
Aprende Git en serio: ramas, merge, rebase.
Empieza con un framework: React, Vue o Svelte.

Objetivo: desplegar tu portfolio con proyectos reales.

🌳 Avanzado¶

TypeScript — tipado estático para JavaScript.
Testing — Vitest, Jest, Playwright.
Backend — Node.js, Express, bases de datos (PostgreSQL, MongoDB).
APIs REST y GraphQL.
Docker y despliegue en la nube (Vercel, Railway, Fly.io).
Accesibilidad (WCAG, ARIA) y rendimiento (Core Web Vitals).

Objetivo: contribuir a proyectos open source, trabajar en equipo, especializarte.

📚 Recursos imprescindibles por tema¶

Tema	Recurso
Referencia general	MDN Web Docs
JavaScript moderno	javascript.info
CSS	CSS Tricks, web.dev/learn/css
Flexbox / Grid	Flexbox Froggy, Grid Garden
Git	Pro Git (libro gratis)
Práctica	Frontend Mentor, CSSBattle
Algoritmos	Exercism, LeetCode
Diseño UI	Refactoring UI, Laws of UX

🎯 Consejos finales¶

Construye proyectos reales — la teoría sola no basta.
Lee código ajeno — GitHub está lleno de ejemplos.
Contribuye a open source — empieza con documentación, luego con código.
Comparte lo que aprendes — blog, Twitter/X, charlas.
No te compares — cada persona tiene su ritmo.

Inicio

🚀 El Viaje del Desarrollador¶

🛠️ Tu Caja de Herramientas¶

📅 Agenda y Novedades¶

📄 Llévate el libro contigo¶

📌 El Proyecto¶

📬 Únete a la Comunidad¶

👤 Sobre el Autor¶

📜 Licencia¶

🏆 Mis Logros¶

🎯 ¿Cómo funciona?¶

📅 Agenda de Eventos¶

🗓️ Calendario¶

🎓 Tipos de eventos¶

📰 Diario de Desarrollo¶

🚀 18 de Octubre, 2026 — El día que el libro cobró vida¶

🛠️ El stack detrás del libro¶

🔮 ¿Qué viene ahora?¶

Retos

🔥 Retos Semanales¶

🔥 Reto #1: El botón camaleón¶

📄 Archivo 3: docs/retos/reto-2.md¶

🔥 Reto #2: La tarjeta de presentación¶

Tu Nombre

📄 Archivo 4: docs/retos/reto-3.md¶

🔥 Reto #3: Contador de clics¶

🚀 Mis Proyectos¶

📚 Proyectos Guiados¶

📝 Proyecto 1: Lista de Tareas (To-Do List)¶

Paso 1: El HTML (Estructura)¶

Mis Tareas

Filosofía del proyecto¶

Por qué existe este libro¶

Principios¶

🎯 Práctico antes que teórico¶

📈 Progresivo y sin saltos¶

🌍 En español, de verdad¶

🧱 Sin dependencias de moda¶

♿ Accesible por defecto¶

🔓 Abierto y libre¶

Lo que NO encontrarás aquí¶

Cómo está hecho¶

Un compromiso¶

Introducción¶

¿Para quién es este libro?¶

¿Qué vas a aprender?¶

Cómo leer este libro¶

Nivel principiante

01 — Introducción al desarrollo web

🧠 Pon a prueba tus conocimientos¶

Capítulo 2 — HTML básico¶

¿Qué es HTML?¶

Estructura mínima de un documento HTML¶

Hola, mundo

03 — CSS básico

🧠 Pon a prueba tus conocimientos¶

🎮 Prueba tú mismo¶

🌐 Abrir en un Playground externo¶

04 — JavaScript esencial

🧠 Pon a prueba tus conocimientos¶

🎮 Editor en Vivo: Prueba JavaScript¶

🌐 Abrir en un Playground externo¶

05 — Diseño responsive

🧠 Pon a prueba tus conocimientos¶

Capítulo 6 — Formularios HTML¶

¿Qué es un formulario?¶

Estructura básica¶

Tipos de input¶

Validación¶

Accesibilidad¶

Ejemplo práctico¶

Ejercicios¶

⬅️ Capítulo 5 — Responsive | ➡️ Apéndices (próximamente)¶

🧠 Pon a prueba tus conocimientos¶

Nivel intermedio

Capítulo 7 — Git y control de versiones¶

¿Qué es Git?¶

Conceptos clave¶

Configuración inicial¶

Flujo básico¶

📄 Archivo 3: `docs/retos/reto-2.md`¶

📄 Archivo 4: `docs/retos/reto-3.md`¶

⬅ Capítulo 7 — Git | ➡ Capítulo 9 — Despliegue y hosting ¶

⬅ Capítulo 8 — APIs | ➡ Capítulo 10 — Proyecto final ¶

⬅ Capítulo 9 — Despliegue | ➡ Apéndices ¶

Funciones modernas: `clamp()`, `min()` y `max()`¶

Selectores `:is()` y `:where()`¶

El selector `:has()` — el "selector padre"¶

Cascade layers (`@layer`)¶

`@scope`¶

Colores modernos: `oklch()` y `color-mix()`¶

`aspect-ratio`¶