From cd89e05e5c299157f6a08a0e701c5c92a4bda61e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javier=20Ribal=20del=20R=C3=ADo?= <javierribal@gmail.com>
Date: Fri, 13 Mar 2026 09:55:02 +0100
Subject: [PATCH 1/3] feat: class 11

---
 pages/Bloque4/Server.py                 | 123 +++++
 pages/Bloque4/protocolos.qmd            | 581 ++++++++++++++++++++++++
 pages/Bloque4/tester_http_ws_basic.html | 444 ++++++++++++++++++
 3 files changed, 1148 insertions(+)
 create mode 100644 pages/Bloque4/Server.py
 create mode 100644 pages/Bloque4/protocolos.qmd
 create mode 100644 pages/Bloque4/tester_http_ws_basic.html

diff --git a/pages/Bloque4/Server.py b/pages/Bloque4/Server.py
new file mode 100644
index 0000000..fdd1099
--- /dev/null
+++ b/pages/Bloque4/Server.py
@@ -0,0 +1,123 @@
+import asyncio
+import json
+import random
+import threading
+from http.server import BaseHTTPRequestHandler, HTTPServer
+from datetime import datetime
+
+import websockets
+
+
+# =========================================================
+# HTTP SERVER — PORT 3001
+# =========================================================
+
+class TestHandler(BaseHTTPRequestHandler):
+
+    # ----------- CORS HEADERS -----------
+
+    def _set_cors_headers(self):
+        self.send_header("Access-Control-Allow-Origin", "*")
+        self.send_header("Access-Control-Allow-Methods", "GET, POST, OPTIONS")
+        self.send_header("Access-Control-Allow-Headers", "Content-Type")
+
+    # ----------- OPTIONS (PRE-FLIGHT) -----------
+
+    def do_OPTIONS(self):
+        self.send_response(200)
+        self._set_cors_headers()
+        self.end_headers()
+
+    # ----------- COMMON HANDLER -----------
+
+    def _handle_request(self):
+        content_length = int(self.headers.get('Content-Length', 0))
+        body = self.rfile.read(content_length) if content_length > 0 else b''
+
+        print("\n==============================")
+        print("HTTP REQUEST RECEIVED")
+        print("Method:", self.command)
+        print("Path:", self.path)
+        print("Headers:", dict(self.headers))
+        print("Body:", body.decode(errors="ignore"))
+        print("==============================\n")
+
+        self.send_response(200)
+        self._set_cors_headers()
+        self.send_header("Content-Type", "text/plain")
+        self.end_headers()
+
+        self.wfile.write(b"OK")
+
+    def do_GET(self):
+        self._handle_request()
+
+    def do_POST(self):
+        self._handle_request()
+
+    def log_message(self, format, *args):
+        return
+
+
+def run_http_server():
+    server = HTTPServer(("0.0.0.0", 3001), TestHandler)
+    print("HTTP server listening on port 3001")
+    server.serve_forever()
+
+
+# =========================================================
+# WEBSOCKET SERVER — PORT 3002
+# =========================================================
+
+async def ws_handler(websocket):
+    print("WebSocket client connected")
+
+    data_buffer = []
+
+    try:
+        while True:
+            value = random.uniform(0, 100)
+
+            data_buffer.append({
+                "time": datetime.now().strftime("%H:%M:%S"),
+                "value": value
+            })
+
+            data_buffer = data_buffer[-20:]
+
+            await websocket.send(json.dumps(data_buffer))
+            await asyncio.sleep(1)
+
+    except websockets.exceptions.ConnectionClosedOK:
+        print("Client disconnected normally")
+
+    except websockets.exceptions.ConnectionClosedError:
+        print("Client disconnected with error")
+
+
+async def run_ws_server():
+    print("WebSocket server listening on port 3002")
+
+    async with websockets.serve(
+        ws_handler,
+        "0.0.0.0",
+        3002
+    ):
+        await asyncio.Future()
+
+
+# =========================================================
+# MAIN
+# =========================================================
+
+if __name__ == "__main__":
+
+    print("\n=== TEST SERVER STARTING ===")
+
+    http_thread = threading.Thread(
+        target=run_http_server,
+        daemon=True
+    )
+    http_thread.start()
+
+    asyncio.run(run_ws_server())
\ No newline at end of file
diff --git a/pages/Bloque4/protocolos.qmd b/pages/Bloque4/protocolos.qmd
new file mode 100644
index 0000000..f9ed2f4
--- /dev/null
+++ b/pages/Bloque4/protocolos.qmd
@@ -0,0 +1,581 @@
+---
+title: "Protocolos de Comunicación"
+subtitle: "HTTP, WebSockets, Hooks personalizados y Recharts"
+author: "Javier Ribal del Río"
+date: "2026-03-13"
+date-modified: today
+affiliation: "Hyperloop UPV"
+
+format:
+  html: default
+  revealjs: 
+    history: false
+    chalkboard: true
+    output-file: Protocolos.html
+    parallax-background-image: ../../img/fondo.png
+    parallax-background-size: "cover" 
+  pdf: default
+format-links: 
+  - pdf
+  - format: revealjs
+    text: Presentación
+    icon: file-slides
+---
+
+**Contenido**
+
+- HTTP básico para desarrollo web
+- Métodos GET, POST, PUT, DELETE, HEAD
+- WebSockets
+- Hook personalizado para conexión en tiempo real
+- Gráficas con Recharts
+
+::: {.content-visible when-format="revealjs"}
+
+---
+
+:::
+
+## HTTP 
+### ¿Qué es HTTP?
+
+HTTP (*HyperText Transfer Protocol*) es el protocolo fundamental de la web.
+
+Define cómo:
+
+- El cliente (navegador o app)
+- Solicita recursos
+- A un servidor
+
+::: {.content-visible when-format="revealjs"}
+
+---
+
+:::
+
+Modelo conceptual:
+
+```
+Cliente → Solicitud HTTP → Servidor
+Cliente ← Respuesta HTTP ← Servidor
+```
+
+HTTP es **sin estado (stateless)**.
+
+Cada petición es independiente.
+
+::: {.content-visible when-format="revealjs"}
+
+---
+
+:::
+
+### Componentes de una petición
+
+Una petición HTTP contiene:
+
+- Método
+- URL
+- Cabeceras (*headers*)
+- Cuerpo (*body*, opcional)
+
+Ejemplo conceptual:
+
+```
+GET /users HTTP/1.1
+Host: api.example.com
+Authorization: Bearer token
+```
+
+::: {.content-visible when-format="revealjs"}
+
+---
+
+:::
+
+### Métodos HTTP principales
+
+#### GET
+
+- Solicita datos
+- No modifica el servidor
+- Debe ser idempotente
+
+Ejemplo:
+
+```
+GET /users
+```
+
+
+::: {.content-visible when-format="revealjs"}
+
+---
+
+:::
+
+Uso típico en React:
+
+```jsx
+fetch("/api/users")
+```
+
+::: {.content-visible when-format="revealjs"}
+
+---
+
+:::
+
+### POST
+
+- Envía datos al servidor
+- Crea recursos nuevos
+- Tiene cuerpo
+
+::: {.content-visible when-format="revealjs"}
+
+---
+
+:::
+
+Ejemplo:
+
+```jsx
+fetch("/api/users", {
+  method: "POST",
+  body: JSON.stringify({ name: "Ana" }),
+  headers: { "Content-Type": "application/json" }
+});
+```
+
+::: {.content-visible when-format="revealjs"}
+
+---
+
+:::
+
+### PUT
+
+- Actualiza completamente un recurso existente
+- Idempotente
+
+```
+PUT /users/3
+```
+
+::: {.content-visible when-format="revealjs"}
+
+---
+
+:::
+
+### DELETE
+
+- Elimina un recurso
+
+```
+DELETE /users/3
+```
+
+::: {.content-visible when-format="revealjs"}
+
+---
+
+:::
+
+### HEAD
+
+- Igual que GET
+- No devuelve cuerpo
+- Solo cabeceras
+
+Se utiliza para:
+
+- Comprobar existencia
+- Tamaño
+- Metadatos
+
+::: {.content-visible when-format="revealjs"}
+
+---
+
+:::
+
+## HTTP vs Comunicación en tiempo real
+
+HTTP funciona bajo el modelo:
+
+> Petición → Respuesta → Fin
+
+Si queremos datos continuamente:
+
+- Debemos repetir peticiones
+- Introduce latencia
+- Ineficiente
+
+Solución: **WebSockets**
+
+::: {.content-visible when-format="revealjs"}
+
+---
+
+:::
+
+## WebSockets
+
+WebSockets permiten comunicación bidireccional persistente.
+
+Características:
+
+- Conexión permanente
+- Cliente y servidor pueden enviar datos
+- Baja latencia
+- Ideal para tiempo real
+
+
+::: {.content-visible when-format="revealjs"}
+
+---
+
+:::
+
+Ejemplos:
+
+- Chats
+- Juegos online
+- Telemetría
+- Trading
+- Sistemas IoT
+
+::: {.content-visible when-format="revealjs"}
+
+---
+
+:::
+
+### Flujo conceptual
+
+```
+Cliente ↔ Servidor
+     conexión abierta
+```
+
+No se crea una nueva conexión por mensaje.
+
+::: {.content-visible when-format="revealjs"}
+
+---
+
+:::
+
+### Creación de un WebSocket en JavaScript
+
+```jsx
+const socket = new WebSocket("ws://localhost:8080");
+```
+
+Eventos principales:
+
+- `onopen`
+- `onmessage`
+- `onclose`
+- `onerror`
+
+::: {.content-visible when-format="revealjs"}
+
+---
+
+:::
+
+### Recepción de mensajes
+
+```js
+socket.onmessage = (event) => {
+  console.log("Mensaje:", event.data);
+};
+```
+
+::: {.content-visible when-format="revealjs"}
+
+---
+
+:::
+
+### Envío de mensajes
+
+```js
+socket.send("Hola servidor");
+```
+
+::: {.content-visible when-format="revealjs"}
+
+---
+
+:::
+## Hook Personalizado
+
+Si usamos WebSockets directamente dentro del componente:
+
+- Mezclamos lógica de conexión con renderizado
+- Código difícil de reutilizar
+- Problemas de ciclo de vida
+
+Solución: **Hook personalizado**
+
+::: {.content-visible when-format="revealjs"}
+
+---
+
+:::
+
+### Hook personalizado
+
+Un hook personalizado es:
+
+> Una función que utiliza hooks internos para encapsular lógica reutilizable
+
+Convención:
+
+```
+useNombre()
+```
+
+::: {.content-visible when-format="revealjs"}
+
+---
+
+:::
+
+### Hook `useWebSocket`
+
+```jsx
+import { useEffect, useState } from "react";
+
+export function useWebSocket(url) {
+
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+
+    const socket = new WebSocket(url);
+
+    socket.onmessage = (event) => {
+      setData(event.data);
+    };
+
+    return () => socket.close();
+
+  }, [url]);
+
+  return data;
+}
+```
+
+::: {.content-visible when-format="revealjs"}
+
+---
+
+:::
+
+### Análisis conceptual
+
+- Se crea la conexión al montar
+- Se actualiza el estado al recibir datos
+- Se cierra al desmontar
+- El componente solo consume datos
+
+::: {.content-visible when-format="revealjs"}
+
+---
+
+:::
+
+### Uso del hook
+
+```jsx
+function Monitor() {
+
+  const data = useWebSocket("ws://localhost:8080");
+
+  return (
+    <div>
+      <h2>Datos en tiempo real</h2>
+      <p>{data}</p>
+    </div>
+  );
+}
+```
+
+::: {.content-visible when-format="revealjs"}
+
+---
+
+:::
+
+Flujo:
+
+1. Componente se renderiza  
+2. Hook abre conexión  
+3. Llegan datos  
+4. Estado cambia  
+5. Nuevo render  
+
+::: {.content-visible when-format="revealjs"}
+
+---
+
+:::
+
+## Visualización de datos
+
+En aplicaciones reales no basta con mostrar texto.
+
+Necesitamos:
+
+- Gráficas
+- Paneles de control
+- Visualización clara
+
+Una librería popular para React es **Recharts**.
+
+::: {.content-visible when-format="revealjs"}
+
+---
+
+:::
+
+## Recharts
+
+Recharts es una librería basada en:
+
+- Componentes React
+- SVG
+- Composición declarativa
+
+Instalación:
+
+```bash
+npm install recharts
+```
+
+::: {.content-visible when-format="revealjs"}
+
+---
+
+:::
+
+### Ejemplo básico
+
+```jsx
+import {
+  LineChart, Line, XAxis, YAxis,
+  CartesianGrid, Tooltip
+} from "recharts";
+
+const data = [
+  { t: 1, v: 10 },
+  { t: 2, v: 15 },
+  { t: 3, v: 8 }
+];
+
+function Grafica() {
+  return (
+    <LineChart width={400} height={300} data={data}>
+      <CartesianGrid stroke="#ccc" />
+      <XAxis dataKey="t" />
+      <YAxis />
+      <Tooltip />
+      <Line type="monotone" dataKey="v" stroke="#8884d8" />
+    </LineChart>
+  );
+}
+```
+
+::: {.content-visible when-format="revealjs"}
+
+---
+
+:::
+
+### Interpretación
+
+Cada objeto representa un punto.
+
+```
+{ t: 1, v: 10 }
+```
+
+- `t` → eje X
+- `v` → eje Y
+
+::: {.content-visible when-format="revealjs"}
+
+---
+
+:::
+
+## Integración completa
+
+WebSocket + Hook + Recharts
+
+Objetivo:
+
+> Visualizar datos en tiempo real
+
+::: {.content-visible when-format="revealjs"}
+
+---
+
+:::
+
+### Ejemplo conceptual
+
+```jsx
+function Dashboard() {
+
+  const data = useWebSocket("ws://localhost:8080");
+
+  const chartData = data
+    ? JSON.parse(data)
+    : [];
+
+  return (
+    <LineChart width={500} height={300} data={chartData}>
+      <XAxis dataKey="time" />
+      <YAxis />
+      <Tooltip />
+      <Line dataKey="value" stroke="#82ca9d" />
+    </LineChart>
+  );
+}
+```
+
+::: {.content-visible when-format="revealjs"}
+
+---
+
+:::
+
+### Flujo completo de una app moderna
+
+```
+Servidor → WebSocket → Hook → Estado → React → Gráfica
+```
+
+Arquitectura típica de sistemas en tiempo real.
+
+::: {.content-visible when-format="revealjs"}
+
+---
+
+:::
+
+## Material
+
+Servidor de testing de _Python_: [Enlace](Server.py).
+
+Instalar `websockets` con `pip install websockets` 
+
+Tester de prueba: [Enlace](tester_http_ws_basic.html) (click derecho guardar enlace como)
+
+[https://recharts.github.io/](https://recharts.github.io/)
\ No newline at end of file
diff --git a/pages/Bloque4/tester_http_ws_basic.html b/pages/Bloque4/tester_http_ws_basic.html
new file mode 100644
index 0000000..5343719
--- /dev/null
+++ b/pages/Bloque4/tester_http_ws_basic.html
@@ -0,0 +1,444 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Tester HTTP + WebSocket</title>
+  <style>
+    :root {
+      --bg: #0b1020;
+      --panel: #121933;
+      --panel-2: #0f152b;
+      --text: #e8ecf8;
+      --muted: #aeb8d6;
+      --accent: #7aa2ff;
+      --ok: #4ade80;
+      --warn: #fbbf24;
+      --err: #fb7185;
+      --border: #273255;
+    }
+
+    * { box-sizing: border-box; }
+
+    body {
+      margin: 0;
+      font-family: Arial, Helvetica, sans-serif;
+      background: linear-gradient(180deg, #0a0f1e 0%, #0d1326 100%);
+      color: var(--text);
+    }
+
+    .wrap {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 24px;
+    }
+
+    h1 {
+      margin: 0 0 8px;
+      font-size: 28px;
+    }
+
+    p.lead {
+      margin: 0 0 24px;
+      color: var(--muted);
+    }
+
+    .grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 20px;
+    }
+
+    .card {
+      background: var(--panel);
+      border: 1px solid var(--border);
+      border-radius: 16px;
+      padding: 18px;
+      box-shadow: 0 8px 24px rgba(0,0,0,.25);
+    }
+
+    .card h2 {
+      margin-top: 0;
+      font-size: 20px;
+    }
+
+    .row {
+      display: grid;
+      grid-template-columns: 120px 1fr;
+      gap: 10px;
+      align-items: center;
+      margin-bottom: 12px;
+    }
+
+    label {
+      color: var(--muted);
+      font-size: 14px;
+    }
+
+    input, textarea, select, button {
+      font: inherit;
+    }
+
+    input, textarea, select {
+      width: 100%;
+      background: var(--panel-2);
+      border: 1px solid var(--border);
+      color: var(--text);
+      border-radius: 10px;
+      padding: 10px 12px;
+    }
+
+    textarea {
+      min-height: 140px;
+      resize: vertical;
+    }
+
+    .buttons {
+      display: flex;
+      gap: 10px;
+      flex-wrap: wrap;
+      margin-top: 10px;
+    }
+
+    button {
+      background: var(--accent);
+      color: white;
+      border: none;
+      border-radius: 10px;
+      padding: 10px 14px;
+      cursor: pointer;
+      font-weight: 700;
+    }
+
+    button.secondary {
+      background: #334155;
+    }
+
+    button.danger {
+      background: #be123c;
+    }
+
+    .status {
+      display: inline-block;
+      padding: 6px 10px;
+      border-radius: 999px;
+      font-size: 13px;
+      font-weight: 700;
+      margin-bottom: 10px;
+    }
+
+    .ok { background: rgba(74, 222, 128, .18); color: var(--ok); }
+    .warn { background: rgba(251, 191, 36, .18); color: var(--warn); }
+    .err { background: rgba(251, 113, 133, .18); color: var(--err); }
+
+    pre {
+      background: #09101f;
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 12px;
+      overflow: auto;
+      min-height: 180px;
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+
+    canvas {
+      width: 100%;
+      height: 320px;
+      background: #09101f;
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      display: block;
+    }
+
+    .full {
+      grid-column: 1 / -1;
+    }
+
+    .small {
+      color: var(--muted);
+      font-size: 13px;
+      margin-top: 8px;
+    }
+
+    @media (max-width: 900px) {
+      .grid { grid-template-columns: 1fr; }
+      .row { grid-template-columns: 1fr; }
+    }
+  </style>
+</head>
+<body>
+  <div class="wrap">
+    <h1>Tester HTTP + WebSocket</h1>
+    <p class="lead">Página básica en HTML y JavaScript para probar tu servidor HTTP en el puerto 3001 y el WebSocket en el puerto 3002.</p>
+
+    <div class="grid">
+      <section class="card">
+        <h2>HTTP</h2>
+        <div class="row">
+          <label for="httpUrl">URL</label>
+          <input id="httpUrl" value="http://localhost:3001/test" />
+        </div>
+        <div class="row">
+          <label for="httpMethod">Método</label>
+          <select id="httpMethod">
+            <option>GET</option>
+            <option>POST</option>
+          </select>
+        </div>
+        <div class="row">
+          <label for="httpBody">Body JSON</label>
+          <textarea id="httpBody">{
+  "mensaje": "hola desde el tester",
+  "valor": 123
+}</textarea>
+        </div>
+        <div class="buttons">
+          <button id="sendHttpBtn">Enviar petición</button>
+          <button id="clearHttpBtn" class="secondary">Limpiar salida</button>
+        </div>
+        <p class="small">El body solo se enviará en POST. El servidor debería mostrar por consola el método, la ruta, los headers y el body.</p>
+      </section>
+
+      <section class="card">
+        <h2>Respuesta HTTP</h2>
+        <span id="httpStatus" class="status warn">Sin petición</span>
+        <pre id="httpOutput">Aquí aparecerá la respuesta del servidor.</pre>
+      </section>
+
+      <section class="card">
+        <h2>WebSocket</h2>
+        <div class="row">
+          <label for="wsUrl">URL</label>
+          <input id="wsUrl" value="ws://localhost:3002" />
+        </div>
+        <div class="buttons">
+          <button id="connectWsBtn">Conectar</button>
+          <button id="disconnectWsBtn" class="danger">Desconectar</button>
+          <button id="clearWsBtn" class="secondary">Limpiar mensajes</button>
+        </div>
+        <div style="margin-top:12px;">
+          <span id="wsStatus" class="status warn">Desconectado</span>
+        </div>
+        <p class="small">Se espera recibir un JSON con este formato: [{"time":"12:00:00","value":10}, ...]</p>
+      </section>
+
+      <section class="card">
+        <h2>Mensajes WebSocket</h2>
+        <pre id="wsOutput">Aquí aparecerán los mensajes recibidos por WebSocket.</pre>
+      </section>
+
+      <section class="card full">
+        <h2>Gráfica en tiempo real</h2>
+        <canvas id="chart" width="1100" height="320"></canvas>
+        <p class="small">La gráfica usa los campos <code>time</code> y <code>value</code> del array recibido por WebSocket.</p>
+      </section>
+    </div>
+  </div>
+
+  <script>
+    const httpUrl = document.getElementById('httpUrl');
+    const httpMethod = document.getElementById('httpMethod');
+    const httpBody = document.getElementById('httpBody');
+    const sendHttpBtn = document.getElementById('sendHttpBtn');
+    const clearHttpBtn = document.getElementById('clearHttpBtn');
+    const httpOutput = document.getElementById('httpOutput');
+    const httpStatus = document.getElementById('httpStatus');
+
+    const wsUrl = document.getElementById('wsUrl');
+    const connectWsBtn = document.getElementById('connectWsBtn');
+    const disconnectWsBtn = document.getElementById('disconnectWsBtn');
+    const clearWsBtn = document.getElementById('clearWsBtn');
+    const wsOutput = document.getElementById('wsOutput');
+    const wsStatus = document.getElementById('wsStatus');
+    const canvas = document.getElementById('chart');
+    const ctx = canvas.getContext('2d');
+
+    let socket = null;
+    let chartData = [];
+
+    function setStatus(el, text, type) {
+      el.textContent = text;
+      el.className = 'status ' + type;
+    }
+
+    async function sendHttpRequest() {
+      const method = httpMethod.value;
+      const url = httpUrl.value.trim();
+
+      httpOutput.textContent = 'Enviando petición...';
+      setStatus(httpStatus, 'Enviando', 'warn');
+
+      try {
+        const options = { method };
+
+        if (method === 'POST') {
+          options.headers = { 'Content-Type': 'application/json' };
+          options.body = httpBody.value;
+        }
+
+        const response = await fetch(url, options);
+        const text = await response.text();
+
+        const responseHeaders = {};
+        response.headers.forEach((value, key) => {
+          responseHeaders[key] = value;
+        });
+
+        httpOutput.textContent = JSON.stringify({
+          ok: response.ok,
+          status: response.status,
+          statusText: response.statusText,
+          headers: responseHeaders,
+          body: text
+        }, null, 2);
+
+        setStatus(httpStatus, 'Respuesta ' + response.status, response.ok ? 'ok' : 'err');
+      } catch (error) {
+        httpOutput.textContent = 'Error de red:\n' + error;
+        setStatus(httpStatus, 'Error', 'err');
+      }
+    }
+
+    function appendWsMessage(text) {
+      const timestamp = new Date().toLocaleTimeString();
+      wsOutput.textContent = '[' + timestamp + '] ' + text + '\n\n' + wsOutput.textContent;
+    }
+
+    function connectWebSocket() {
+      if (socket && socket.readyState === WebSocket.OPEN) {
+        appendWsMessage('Ya existe una conexión abierta.');
+        return;
+      }
+
+      socket = new WebSocket(wsUrl.value.trim());
+      setStatus(wsStatus, 'Conectando...', 'warn');
+
+      socket.onopen = () => {
+        setStatus(wsStatus, 'Conectado', 'ok');
+        appendWsMessage('Conexión abierta.');
+      };
+
+      socket.onmessage = (event) => {
+        appendWsMessage(event.data);
+
+        try {
+          const parsed = JSON.parse(event.data);
+          if (Array.isArray(parsed)) {
+            chartData = parsed;
+            drawChart(chartData);
+          }
+        } catch (error) {
+          appendWsMessage('No se pudo parsear el JSON para la gráfica: ' + error);
+        }
+      };
+
+      socket.onerror = () => {
+        setStatus(wsStatus, 'Error', 'err');
+        appendWsMessage('Se ha producido un error en WebSocket.');
+      };
+
+      socket.onclose = () => {
+        setStatus(wsStatus, 'Desconectado', 'warn');
+        appendWsMessage('Conexión cerrada.');
+      };
+    }
+
+    function disconnectWebSocket() {
+      if (socket) {
+        socket.close();
+        socket = null;
+      }
+    }
+
+    function drawChart(data) {
+      const w = canvas.width;
+      const h = canvas.height;
+      const pad = 40;
+
+      ctx.clearRect(0, 0, w, h);
+
+      ctx.fillStyle = '#09101f';
+      ctx.fillRect(0, 0, w, h);
+
+      ctx.strokeStyle = '#273255';
+      ctx.lineWidth = 1;
+
+      for (let i = 0; i < 5; i++) {
+        const y = pad + (i * (h - 2 * pad)) / 4;
+        ctx.beginPath();
+        ctx.moveTo(pad, y);
+        ctx.lineTo(w - pad, y);
+        ctx.stroke();
+      }
+
+      ctx.beginPath();
+      ctx.moveTo(pad, pad);
+      ctx.lineTo(pad, h - pad);
+      ctx.lineTo(w - pad, h - pad);
+      ctx.strokeStyle = '#aeb8d6';
+      ctx.stroke();
+
+      if (!Array.isArray(data) || data.length === 0) {
+        ctx.fillStyle = '#aeb8d6';
+        ctx.font = '16px Arial';
+        ctx.fillText('Esperando datos...', pad + 10, pad + 20);
+        return;
+      }
+
+      const values = data.map(d => Number(d.value)).filter(v => !Number.isNaN(v));
+      if (values.length === 0) return;
+
+      let min = Math.min(...values);
+      let max = Math.max(...values);
+      if (min === max) {
+        min -= 1;
+        max += 1;
+      }
+
+      const stepX = data.length > 1 ? (w - 2 * pad) / (data.length - 1) : 0;
+
+      ctx.strokeStyle = '#7aa2ff';
+      ctx.lineWidth = 2;
+      ctx.beginPath();
+
+      data.forEach((point, index) => {
+        const x = pad + index * stepX;
+        const y = h - pad - ((Number(point.value) - min) / (max - min)) * (h - 2 * pad);
+        if (index === 0) ctx.moveTo(x, y);
+        else ctx.lineTo(x, y);
+      });
+      ctx.stroke();
+
+      ctx.fillStyle = '#e8ecf8';
+      ctx.font = '12px Arial';
+      ctx.fillText(String(max.toFixed(2)), 8, pad + 4);
+      ctx.fillText(String(min.toFixed(2)), 8, h - pad + 4);
+
+      const last = data[data.length - 1];
+      ctx.fillText('Último: ' + last.time + ' | ' + Number(last.value).toFixed(2), pad, 20);
+
+      ctx.fillStyle = '#aeb8d6';
+      const firstLabel = data[0]?.time ?? '';
+      const lastLabel = data[data.length - 1]?.time ?? '';
+      ctx.fillText(firstLabel, pad, h - 12);
+      const labelWidth = ctx.measureText(lastLabel).width;
+      ctx.fillText(lastLabel, w - pad - labelWidth, h - 12);
+    }
+
+    sendHttpBtn.addEventListener('click', sendHttpRequest);
+    clearHttpBtn.addEventListener('click', () => {
+      httpOutput.textContent = 'Aquí aparecerá la respuesta del servidor.';
+      setStatus(httpStatus, 'Sin petición', 'warn');
+    });
+
+    connectWsBtn.addEventListener('click', connectWebSocket);
+    disconnectWsBtn.addEventListener('click', disconnectWebSocket);
+    clearWsBtn.addEventListener('click', () => {
+      wsOutput.textContent = 'Aquí aparecerán los mensajes recibidos por WebSocket.';
+    });
+
+    drawChart([]);
+  </script>
+</body>
+</html>

From 16b0c6689d0668a10d98e6451447088b024f90ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javier=20Ribal=20del=20R=C3=ADo?= <javierribal@gmail.com>
Date: Fri, 13 Mar 2026 09:55:11 +0100
Subject: [PATCH 2/3] feat: add clase eleven

---
 _quarto.yml | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/_quarto.yml b/_quarto.yml
index 18580f8..0ecf893 100644
--- a/_quarto.yml
+++ b/_quarto.yml
@@ -89,6 +89,10 @@ website:
 >>>>>>> 8e10774 (feat: explicacion semana 10 (#4))
 
       - section: "Bloque IV Comunicación"
+        contents:
+          - section: "Semana 11"
+            contents: 
+            - pages/Bloque4/protocolos.qmd
 
       - pages/rubric.qmd
 

From 1e37b0659a9d081364de2c004e1f2cf7ce0fe256 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javier=20Ribal=20del=20R=C3=ADo?= <javierribal@gmail.com>
Date: Fri, 13 Mar 2026 11:58:08 +0100
Subject: [PATCH 3/3] feat:  varios

---
 docs/about.pdf                               |  Bin 15456 -> 15456 bytes
 docs/index.html                              |   28 +-
 docs/index.pdf                               |  Bin 39454 -> 39454 bytes
 docs/pages/Bloque1/MAcss.html                |   30 +-
 docs/pages/Bloque1/MAcss.pdf                 |  Bin 25003 -> 25003 bytes
 docs/pages/Bloque1/MAhtml2.html              |   30 +-
 docs/pages/Bloque1/MAhtml2.pdf               |  Bin 24873 -> 24873 bytes
 docs/pages/Bloque1/bloque1.html              |   30 +-
 docs/pages/Bloque1/bloque1.pdf               |  Bin 31789 -> 31789 bytes
 docs/pages/Bloque1/css.html                  |   30 +-
 docs/pages/Bloque1/css.pdf                   |  Bin 73584 -> 73584 bytes
 docs/pages/Bloque1/entorno.html              |   30 +-
 docs/pages/Bloque1/entorno.pdf               |  Bin 651786 -> 651786 bytes
 docs/pages/Bloque1/html.html                 |   30 +-
 docs/pages/Bloque1/html.pdf                  |  Bin 737553 -> 737553 bytes
 docs/pages/Bloque1/t1.html                   |   30 +-
 docs/pages/Bloque1/t1.pdf                    |  Bin 34422 -> 34422 bytes
 docs/pages/Bloque1/t1a.html                  |   30 +-
 docs/pages/Bloque1/t1a.pdf                   |  Bin 21362 -> 21362 bytes
 docs/pages/Bloque1/t2.html                   |   30 +-
 docs/pages/Bloque1/t2.pdf                    |  Bin 26835 -> 26835 bytes
 docs/pages/Bloque1/t2a.html                  |   30 +-
 docs/pages/Bloque1/t2a.pdf                   |  Bin 22585 -> 22585 bytes
 docs/pages/Bloque2/MAclases.html             |   30 +-
 docs/pages/Bloque2/MAclases.pdf              |  Bin 59342 -> 59342 bytes
 docs/pages/Bloque2/intensivo.html            |   30 +-
 docs/pages/Bloque2/intensivo.pdf             |  Bin 76101 -> 76101 bytes
 docs/pages/Bloque2/jsI.html                  |    2 +-
 docs/pages/Bloque2/jsI.pdf                   |  Bin 45005 -> 45005 bytes
 docs/pages/Bloque2/ti.html                   |   30 +-
 docs/pages/Bloque2/ti.pdf                    |  Bin 47646 -> 47646 bytes
 docs/pages/Bloque2/tia.html                  |   30 +-
 docs/pages/Bloque2/tia.pdf                   |  Bin 53898 -> 53898 bytes
 docs/pages/Bloque3/DOM.html                  |   30 +-
 docs/pages/Bloque3/DOM.pdf                   |  Bin 48913 -> 48913 bytes
 docs/pages/Bloque3/Intermedio.html           |   30 +-
 docs/pages/Bloque3/Intermedio.pdf            |  Bin 81218 -> 81218 bytes
 docs/pages/Bloque3/MARef.html                |   30 +-
 docs/pages/Bloque3/MARef.pdf                 |  Bin 33643 -> 33643 bytes
 docs/pages/Bloque3/MAcss2.html               |   30 +-
 docs/pages/Bloque3/MAcss2.pdf                |  Bin 25941 -> 25941 bytes
 docs/pages/Bloque3/MAentorno.html            |    2 +-
 docs/pages/Bloque3/MAentorno.pdf             |  Bin 20374 -> 20374 bytes
 docs/pages/Bloque3/ReactI.html               |   30 +-
 docs/pages/Bloque3/ReactI.pdf                |  Bin 72879 -> 72879 bytes
 docs/pages/Bloque3/ReactIV.html              | 2136 +++++++++--------
 docs/pages/Bloque3/ReactIV.pdf               |  Bin 66753 -> 66753 bytes
 docs/pages/Bloque3/ps.html                   |   30 +-
 docs/pages/Bloque3/ps.pdf                    |  Bin 38383 -> 38383 bytes
 docs/pages/Bloque3/t10.html                  |   30 +-
 docs/pages/Bloque3/t10.pdf                   |  Bin 47016 -> 47016 bytes
 docs/pages/Bloque3/t6.html                   |   30 +-
 docs/pages/Bloque3/t6.pdf                    |  Bin 67533 -> 67533 bytes
 docs/pages/Bloque4/Protocolos.html           |  970 ++++++++
 docs/pages/Bloque4/Server.py                 |  123 +
 docs/pages/Bloque4/protocolos.html           | 1454 ++++++++++++
 docs/pages/Bloque4/protocolos.pdf            |  Bin 0 -> 71068 bytes
 docs/pages/Bloque4/tester_http_ws_basic.html |  444 ++++
 docs/pages/rubric.html                       |   30 +-
 docs/rubriuca.pdf                            |  Bin 38680 -> 38682 bytes
 docs/search.json                             | 2190 ++++++++++--------
 61 files changed, 6090 insertions(+), 1949 deletions(-)
 create mode 100644 docs/pages/Bloque4/Protocolos.html
 create mode 100644 docs/pages/Bloque4/Server.py
 create mode 100644 docs/pages/Bloque4/protocolos.html
 create mode 100644 docs/pages/Bloque4/protocolos.pdf
 create mode 100644 docs/pages/Bloque4/tester_http_ws_basic.html

diff --git a/docs/about.pdf b/docs/about.pdf
index 5aa0478af364c14c05233b7c310a49cd4dd2b0c1..be621c3c5720aac3d6fb42c4b70ed23f0430e1ac 100644
GIT binary patch
delta 106
zcmaD*@t|TuvMGn5v7v#nrHRqxY*T4CXLFzFYF1|#QzK_{S7$d96EkBY7e^x#BSR+>
ZQzt`H6E`y_OD79E1sg(2Cf8U$0RSb*94-I=

delta 106
zcmaD*@t|TuvMGmwxskDfxq<oQY*T4CXLFzFYF1}MBS%LgX9HtrM+-+&V>b(DCktmI
ZBNsPIQ)ef0V*^(^1sg(2Cf8U$0RS&_9DD!(

diff --git a/docs/index.html b/docs/index.html
index 84f3bda..e72da4a 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -543,8 +543,32 @@
       </ul>
   </li>
         <li class="sidebar-item sidebar-item-section">
-      <span class="sidebar-item-text sidebar-link text-start">
- <span class="menu-text">Bloque IV Comunicación</span></span>
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false">
+ <span class="menu-text">Bloque IV Comunicación</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-12" class="collapse list-unstyled sidebar-section depth1 ">  
+          <li class="sidebar-item sidebar-item-section">
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false">
+ <span class="menu-text">Semana 11</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-13" class="collapse list-unstyled sidebar-section depth2 ">  
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="./pages/Bloque4/protocolos.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">Protocolos de Comunicación</span></a>
+  </div>
+</li>
+      </ul>
+  </li>
+      </ul>
   </li>
         <li class="sidebar-item">
   <div class="sidebar-item-container"> 
diff --git a/docs/index.pdf b/docs/index.pdf
index 643468780ee7d9b730bbb481a9353e19b43ab14c..454e1854323a05573bc3422aa5573e412a89973f 100644
GIT binary patch
delta 116
zcmbQYg=yXvrVW#NISh>r4U8>~%_q<5m4<UR@9n+9<z{MN=xS_cYT#yOU}<FL=wf2-
i<Yw+>?&@f0X=Z9@YHX)qLs&`d<Ow43o4?J_U<3fC2p{zT

delta 116
zcmbQYg=yXvrVW#NISkB=j19~U3@6X(m4<UR@9n+9<z{K<X6|NW>SSQ(=Hg~*X=3VR
iVrgMwXl`k4=wfVPW@@KkLs&`d<Ow43o4?J_U<3fEWgqhZ

diff --git a/docs/pages/Bloque1/MAcss.html b/docs/pages/Bloque1/MAcss.html
index 6b1fb19..0cf50ef 100644
--- a/docs/pages/Bloque1/MAcss.html
+++ b/docs/pages/Bloque1/MAcss.html
@@ -544,8 +544,32 @@
       </ul>
   </li>
         <li class="sidebar-item sidebar-item-section">
-      <span class="sidebar-item-text sidebar-link text-start">
- <span class="menu-text">Bloque IV Comunicación</span></span>
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false">
+ <span class="menu-text">Bloque IV Comunicación</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-12" class="collapse list-unstyled sidebar-section depth1 ">  
+          <li class="sidebar-item sidebar-item-section">
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false">
+ <span class="menu-text">Semana 11</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-13" class="collapse list-unstyled sidebar-section depth2 ">  
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque4/protocolos.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">Protocolos de Comunicación</span></a>
+  </div>
+</li>
+      </ul>
+  </li>
+      </ul>
   </li>
         <li class="sidebar-item">
   <div class="sidebar-item-container"> 
@@ -593,7 +617,7 @@ <h1 class="title">MA: Selectores y Pseudoselectores</h1>
     <div>
     <div class="quarto-title-meta-heading">Fecha de última modificación</div>
     <div class="quarto-title-meta-contents">
-      <p class="date-modified">7 de marzo de 2026</p>
+      <p class="date-modified">13 de marzo de 2026</p>
     </div>
   </div>
     
diff --git a/docs/pages/Bloque1/MAcss.pdf b/docs/pages/Bloque1/MAcss.pdf
index 81973bf50b4c215f7c03c3b65af534b8a9df9899..03a2218208c0dc72e9f818d8e45ec8dfcb5fda7c 100644
GIT binary patch
delta 109
zcmZ2|m~r)C#tp?09EQe*2F9jFmXoU^q~V;+^CI@MJ6kwexVXBSxtY6|S(rMyI2)Rn
cySW;hTNt{Snz=YSyV)t&5K^*vK>{};0I-Z5SO5S3

delta 109
zcmZ2|m~r)C#tp?090uk_#s<d5CX=fpq~V;+^CI@MJDXV;SeThwIy)PgI9ga38JZcH
cxmubz8ao*~8#%ifx!5V#5K^*vK>{};0EiYGbN~PV

diff --git a/docs/pages/Bloque1/MAhtml2.html b/docs/pages/Bloque1/MAhtml2.html
index 4d1a8f0..30b7eb1 100644
--- a/docs/pages/Bloque1/MAhtml2.html
+++ b/docs/pages/Bloque1/MAhtml2.html
@@ -544,8 +544,32 @@
       </ul>
   </li>
         <li class="sidebar-item sidebar-item-section">
-      <span class="sidebar-item-text sidebar-link text-start">
- <span class="menu-text">Bloque IV Comunicación</span></span>
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false">
+ <span class="menu-text">Bloque IV Comunicación</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-12" class="collapse list-unstyled sidebar-section depth1 ">  
+          <li class="sidebar-item sidebar-item-section">
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false">
+ <span class="menu-text">Semana 11</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-13" class="collapse list-unstyled sidebar-section depth2 ">  
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque4/protocolos.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">Protocolos de Comunicación</span></a>
+  </div>
+</li>
+      </ul>
+  </li>
+      </ul>
   </li>
         <li class="sidebar-item">
   <div class="sidebar-item-container"> 
@@ -593,7 +617,7 @@ <h1 class="title">MA: Mas HTML</h1>
     <div>
     <div class="quarto-title-meta-heading">Fecha de última modificación</div>
     <div class="quarto-title-meta-contents">
-      <p class="date-modified">7 de marzo de 2026</p>
+      <p class="date-modified">13 de marzo de 2026</p>
     </div>
   </div>
     
diff --git a/docs/pages/Bloque1/MAhtml2.pdf b/docs/pages/Bloque1/MAhtml2.pdf
index d9fd3a06caaff557e6d52528c3d3e6ca26d0cdae..96343fad9bdaa46bfa058bc16e79c93db8f2471a 100644
GIT binary patch
delta 110
zcmZ2^h;ij1#tn<Y*bI#g4UA1EuLzTcGB=+N`@`X8VB~0FY+-6)VPa%tY-wp=Vc=|L
c=wxo{WNhT-0@PurU_)3*>_mC_$vO#t0ofNFtpET3

delta 110
zcmZ2^h;ij1#tn<Y*bK~#j17z@uLzTcGB=+N`@`X8>1twNWa8xN>}YA|YGCBz;^bm#
cVq{|K=xT0Z2ISf)*br6{J5gSKvQENZ00&?mtpET3

diff --git a/docs/pages/Bloque1/bloque1.html b/docs/pages/Bloque1/bloque1.html
index 80b7f25..51708c2 100644
--- a/docs/pages/Bloque1/bloque1.html
+++ b/docs/pages/Bloque1/bloque1.html
@@ -544,8 +544,32 @@
       </ul>
   </li>
         <li class="sidebar-item sidebar-item-section">
-      <span class="sidebar-item-text sidebar-link text-start">
- <span class="menu-text">Bloque IV Comunicación</span></span>
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false">
+ <span class="menu-text">Bloque IV Comunicación</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-12" class="collapse list-unstyled sidebar-section depth1 ">  
+          <li class="sidebar-item sidebar-item-section">
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false">
+ <span class="menu-text">Semana 11</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-13" class="collapse list-unstyled sidebar-section depth2 ">  
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque4/protocolos.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">Protocolos de Comunicación</span></a>
+  </div>
+</li>
+      </ul>
+  </li>
+      </ul>
   </li>
         <li class="sidebar-item">
   <div class="sidebar-item-container"> 
@@ -600,7 +624,7 @@ <h1 class="title">Bloque I Introducción</h1>
     <div>
     <div class="quarto-title-meta-heading">Fecha de última modificación</div>
     <div class="quarto-title-meta-contents">
-      <p class="date-modified">7 de marzo de 2026</p>
+      <p class="date-modified">13 de marzo de 2026</p>
     </div>
   </div>
     
diff --git a/docs/pages/Bloque1/bloque1.pdf b/docs/pages/Bloque1/bloque1.pdf
index e75a75b30cac7d021df140ecde89a9f716b30723..3a4b89b3f84f9a6fe801b186c62cec0d6b069d7d 100644
GIT binary patch
delta 138
zcmZ4cgK_N-#tqR0+J?r42F4~PM%o63>IMetnhN^9`6(`mC8-J;E>=bcMrH=aFeRJY
z3Us*KjLd-orjCxT7A6KpP8LqCZcc_yt}c$omga_LhAu{S3O0n5#7;IamftL1Eyf4{
D0(&CI

delta 138
zcmZ4cgK_N-#tqR0+6LxE#s<a)CfWvu>IMetnhN^9`6(`mC8-J;E>=bcMrJ@ssFKZX
z1v*@A&K8!&#?FR@#x54lhHmEOMh4E#ZZ3wV7Us@|M#e^#b_zCxmBdaqFqYpeUM<E5
E0Q<uti2wiq

diff --git a/docs/pages/Bloque1/css.html b/docs/pages/Bloque1/css.html
index a247e20..ee9e156 100644
--- a/docs/pages/Bloque1/css.html
+++ b/docs/pages/Bloque1/css.html
@@ -579,8 +579,32 @@
       </ul>
   </li>
         <li class="sidebar-item sidebar-item-section">
-      <span class="sidebar-item-text sidebar-link text-start">
- <span class="menu-text">Bloque IV Comunicación</span></span>
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false">
+ <span class="menu-text">Bloque IV Comunicación</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-12" class="collapse list-unstyled sidebar-section depth1 ">  
+          <li class="sidebar-item sidebar-item-section">
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false">
+ <span class="menu-text">Semana 11</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-13" class="collapse list-unstyled sidebar-section depth2 ">  
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque4/protocolos.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">Protocolos de Comunicación</span></a>
+  </div>
+</li>
+      </ul>
+  </li>
+      </ul>
   </li>
         <li class="sidebar-item">
   <div class="sidebar-item-container"> 
@@ -656,7 +680,7 @@ <h1 class="title">CSS</h1>
     <div>
     <div class="quarto-title-meta-heading">Fecha de última modificación</div>
     <div class="quarto-title-meta-contents">
-      <p class="date-modified">7 de marzo de 2026</p>
+      <p class="date-modified">13 de marzo de 2026</p>
     </div>
   </div>
     
diff --git a/docs/pages/Bloque1/css.pdf b/docs/pages/Bloque1/css.pdf
index d406488ac2aa854537a4789ea22f6e430cd4fd66..6235781159b41f896752a00a5360d5f2a76429df 100644
GIT binary patch
delta 114
zcmeyckLANYmWC~i!9pB{#)byQW(G#nqlFly;k@m2LX3V~&K8!A76!(KCYB~{25u%s
h&Q1mfW(Lj%hQ{WOZf=G~j&=$*gp_ROmt{<30sxlj8z}$)

delta 114
zcmeyckLANYmWC~i!9pAc=0?T_#-@hTqlFly;k@m2LX3V~&L*yI#+HW0PHx7|ZZ4K)
hPG(LPE=Cq+=H||>&aRej=5`7;gp_ROmt{<30szD`96bO4

diff --git a/docs/pages/Bloque1/entorno.html b/docs/pages/Bloque1/entorno.html
index 1ea85c4..e85df9a 100644
--- a/docs/pages/Bloque1/entorno.html
+++ b/docs/pages/Bloque1/entorno.html
@@ -544,8 +544,32 @@
       </ul>
   </li>
         <li class="sidebar-item sidebar-item-section">
-      <span class="sidebar-item-text sidebar-link text-start">
- <span class="menu-text">Bloque IV Comunicación</span></span>
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false">
+ <span class="menu-text">Bloque IV Comunicación</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-12" class="collapse list-unstyled sidebar-section depth1 ">  
+          <li class="sidebar-item sidebar-item-section">
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false">
+ <span class="menu-text">Semana 11</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-13" class="collapse list-unstyled sidebar-section depth2 ">  
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque4/protocolos.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">Protocolos de Comunicación</span></a>
+  </div>
+</li>
+      </ul>
+  </li>
+      </ul>
   </li>
         <li class="sidebar-item">
   <div class="sidebar-item-container"> 
@@ -630,7 +654,7 @@ <h1 class="title">Preparación del entorno de trabajo</h1>
     <div>
     <div class="quarto-title-meta-heading">Fecha de última modificación</div>
     <div class="quarto-title-meta-contents">
-      <p class="date-modified">7 de marzo de 2026</p>
+      <p class="date-modified">13 de marzo de 2026</p>
     </div>
   </div>
     
diff --git a/docs/pages/Bloque1/entorno.pdf b/docs/pages/Bloque1/entorno.pdf
index a8710dd7b386c9a8c73e8c13ba8217cd830e47af..2eb83cdbe18271e06ffa38be4bdb9a6725e787ea 100644
GIT binary patch
delta 138
zcmeBrqTcmHy`hD%g{g(Pg{6hHg{_6Xg<}invqv0;#)byQW=1B{-#y}#hV!-yKIT;7
zadR`ZFgAB{ba68_H8F9saB?(vb~Q4vFmbVTH8eLgb+c2jA*>{JdZP%V-1h13Ig6P9
D9=axe

delta 138
zcmeBrqTcmHy`hD%g{g(Pg{6hHg{_6Xg<}invqu~T=0?T_CI&{+-#y}#hV!-yKIT;7
zadS0sb2T$GaWgh|v@kMuG&eUhH*<5ba5OP8Ftju?akNvgA*>{JdZP%V-1h13Ig6P9
D3h5>g

diff --git a/docs/pages/Bloque1/html.html b/docs/pages/Bloque1/html.html
index b5464fd..42ec4ce 100644
--- a/docs/pages/Bloque1/html.html
+++ b/docs/pages/Bloque1/html.html
@@ -579,8 +579,32 @@
       </ul>
   </li>
         <li class="sidebar-item sidebar-item-section">
-      <span class="sidebar-item-text sidebar-link text-start">
- <span class="menu-text">Bloque IV Comunicación</span></span>
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false">
+ <span class="menu-text">Bloque IV Comunicación</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-12" class="collapse list-unstyled sidebar-section depth1 ">  
+          <li class="sidebar-item sidebar-item-section">
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false">
+ <span class="menu-text">Semana 11</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-13" class="collapse list-unstyled sidebar-section depth2 ">  
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque4/protocolos.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">Protocolos de Comunicación</span></a>
+  </div>
+</li>
+      </ul>
+  </li>
+      </ul>
   </li>
         <li class="sidebar-item">
   <div class="sidebar-item-container"> 
@@ -662,7 +686,7 @@ <h1 class="title">HTML</h1>
     <div>
     <div class="quarto-title-meta-heading">Fecha de última modificación</div>
     <div class="quarto-title-meta-contents">
-      <p class="date-modified">7 de marzo de 2026</p>
+      <p class="date-modified">13 de marzo de 2026</p>
     </div>
   </div>
     
diff --git a/docs/pages/Bloque1/html.pdf b/docs/pages/Bloque1/html.pdf
index b3f3d117734ca933b9ee4767c7d641cbf65fa886..10e81a46e1dbf5fe0faf3f8b5d37d6f1eecab2a3 100644
GIT binary patch
delta 133
zcmbQ(q&u-mx1oixg{g(Pg{6hHg{_6Xg`<VDg=-5pizSDlv7v#niK)qS9!qX%IB&bY
zC3hc-v#F`Mp_74|xsj=xsf(Mdv!j8fk*l$Vi?gG#sfDStqn&~cAtl@FxCNO3)wCc8

delta 133
zcmbQ(q&u-mx1oixg{g(Pg{6hHg{_6Xg`<VDg=-5pizSDFxskDfv7za79!qX%IB&bY
zC3hc-v$LzEsfCMylbL~mrGc}7k(;BVnWL$RtD}*trJ=czshxriAtl@FxCNO3%~Kz)

diff --git a/docs/pages/Bloque1/t1.html b/docs/pages/Bloque1/t1.html
index cb978cc..272d170 100644
--- a/docs/pages/Bloque1/t1.html
+++ b/docs/pages/Bloque1/t1.html
@@ -579,8 +579,32 @@
       </ul>
   </li>
         <li class="sidebar-item sidebar-item-section">
-      <span class="sidebar-item-text sidebar-link text-start">
- <span class="menu-text">Bloque IV Comunicación</span></span>
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false">
+ <span class="menu-text">Bloque IV Comunicación</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-12" class="collapse list-unstyled sidebar-section depth1 ">  
+          <li class="sidebar-item sidebar-item-section">
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false">
+ <span class="menu-text">Semana 11</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-13" class="collapse list-unstyled sidebar-section depth2 ">  
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque4/protocolos.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">Protocolos de Comunicación</span></a>
+  </div>
+</li>
+      </ul>
+  </li>
+      </ul>
   </li>
         <li class="sidebar-item">
   <div class="sidebar-item-container"> 
@@ -628,7 +652,7 @@ <h1 class="title">T1: Web de HL I</h1>
     <div>
     <div class="quarto-title-meta-heading">Fecha de última modificación</div>
     <div class="quarto-title-meta-contents">
-      <p class="date-modified">7 de marzo de 2026</p>
+      <p class="date-modified">13 de marzo de 2026</p>
     </div>
   </div>
     
diff --git a/docs/pages/Bloque1/t1.pdf b/docs/pages/Bloque1/t1.pdf
index 87ce7c7b37bd22e6fa3605eb78251b19c72fb6b7..492f3e60aa4a9e70fb2d45d326cb5b40072301d7 100644
GIT binary patch
delta 114
zcmey?!}P6(X+uXfyP>h6fw8IK<o;?I7<==kYFkb>OJgGwOLI3DR})tkb7v<f7Z*b}
g14lzAXEPTkH)mI4I|UoUN@6E36qer{(yGJ=0C!X$a{vGU

delta 114
zcmey?!}P6(X+uXfyMeipv4OGC<o;?I7<==kYFkb>b0bGXGZPmxM?+IrXGcSG3rAB6
g7Z)c>M<-`PXA2h-I|UoUN@6E36qer{(yGJ=0ARBo?*IS*

diff --git a/docs/pages/Bloque1/t1a.html b/docs/pages/Bloque1/t1a.html
index ce93187..6395798 100644
--- a/docs/pages/Bloque1/t1a.html
+++ b/docs/pages/Bloque1/t1a.html
@@ -544,8 +544,32 @@
       </ul>
   </li>
         <li class="sidebar-item sidebar-item-section">
-      <span class="sidebar-item-text sidebar-link text-start">
- <span class="menu-text">Bloque IV Comunicación</span></span>
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false">
+ <span class="menu-text">Bloque IV Comunicación</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-12" class="collapse list-unstyled sidebar-section depth1 ">  
+          <li class="sidebar-item sidebar-item-section">
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false">
+ <span class="menu-text">Semana 11</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-13" class="collapse list-unstyled sidebar-section depth2 ">  
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque4/protocolos.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">Protocolos de Comunicación</span></a>
+  </div>
+</li>
+      </ul>
+  </li>
+      </ul>
   </li>
         <li class="sidebar-item">
   <div class="sidebar-item-container"> 
@@ -593,7 +617,7 @@ <h1 class="title">TA1: Mi CV I</h1>
     <div>
     <div class="quarto-title-meta-heading">Fecha de última modificación</div>
     <div class="quarto-title-meta-contents">
-      <p class="date-modified">7 de marzo de 2026</p>
+      <p class="date-modified">13 de marzo de 2026</p>
     </div>
   </div>
     
diff --git a/docs/pages/Bloque1/t1a.pdf b/docs/pages/Bloque1/t1a.pdf
index f149b2046c89e17557e4fdf55443f6e11a252302..e5ccad54d7ef3d152795d4db3571bf978411f4c5 100644
GIT binary patch
delta 115
zcmeygjPcVl#tlN=9EQe*2F9iaW|O77rQw{-w%*^_+>9&@oh^*a3=K^j9Zf78UCd1k
g+|10(&5WE}4ULVBOzaeF2rG%5ET||qc}CDJ0OC*`h5!Hn

delta 115
zcmeygjPcVl#tlN=90uk_#s<blhLfedrQw{-w%*^_+)SNKTpZn894(EFEDhX@oGpx9
g-5gELoE+WEOiY}eEbSC*2rG%5ET||qc}CDJ0265*o&W#<

diff --git a/docs/pages/Bloque1/t2.html b/docs/pages/Bloque1/t2.html
index 7fefe60..05c03da 100644
--- a/docs/pages/Bloque1/t2.html
+++ b/docs/pages/Bloque1/t2.html
@@ -544,8 +544,32 @@
       </ul>
   </li>
         <li class="sidebar-item sidebar-item-section">
-      <span class="sidebar-item-text sidebar-link text-start">
- <span class="menu-text">Bloque IV Comunicación</span></span>
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false">
+ <span class="menu-text">Bloque IV Comunicación</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-12" class="collapse list-unstyled sidebar-section depth1 ">  
+          <li class="sidebar-item sidebar-item-section">
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false">
+ <span class="menu-text">Semana 11</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-13" class="collapse list-unstyled sidebar-section depth2 ">  
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque4/protocolos.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">Protocolos de Comunicación</span></a>
+  </div>
+</li>
+      </ul>
+  </li>
+      </ul>
   </li>
         <li class="sidebar-item">
   <div class="sidebar-item-container"> 
@@ -593,7 +617,7 @@ <h1 class="title">T2: Web de HL II</h1>
     <div>
     <div class="quarto-title-meta-heading">Fecha de última modificación</div>
     <div class="quarto-title-meta-contents">
-      <p class="date-modified">7 de marzo de 2026</p>
+      <p class="date-modified">13 de marzo de 2026</p>
     </div>
   </div>
     
diff --git a/docs/pages/Bloque1/t2.pdf b/docs/pages/Bloque1/t2.pdf
index de0f0c4d5ac7bd45a04b5da56c0f37e378cb25e3..b7f185ce84fbab9a2560620c2127c972bca5be42 100644
GIT binary patch
delta 109
zcmcb7k@50H#tq`}9EQe*2F7N_W|QUPrQw{-PVrhC&Q8XTE=Dc}Caz8<=FX<B#)hWO
c76!&{2Cj~7ZYGwF&UOkmgp_PvpRU3P07|bM5&!@I

delta 109
zcmcb7k@50H#tq`}90uk_#s($^mXqb<rQw{-PVrhC&MrnSmX5}zX2vG2#%?Y~P9|n9
cZYGYd7M3O!uBMi*#&!xegp_PvpRU3P07;J<`Tzg`

diff --git a/docs/pages/Bloque1/t2a.html b/docs/pages/Bloque1/t2a.html
index ddafa36..59d6b13 100644
--- a/docs/pages/Bloque1/t2a.html
+++ b/docs/pages/Bloque1/t2a.html
@@ -544,8 +544,32 @@
       </ul>
   </li>
         <li class="sidebar-item sidebar-item-section">
-      <span class="sidebar-item-text sidebar-link text-start">
- <span class="menu-text">Bloque IV Comunicación</span></span>
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false">
+ <span class="menu-text">Bloque IV Comunicación</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-12" class="collapse list-unstyled sidebar-section depth1 ">  
+          <li class="sidebar-item sidebar-item-section">
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false">
+ <span class="menu-text">Semana 11</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-13" class="collapse list-unstyled sidebar-section depth2 ">  
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque4/protocolos.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">Protocolos de Comunicación</span></a>
+  </div>
+</li>
+      </ul>
+  </li>
+      </ul>
   </li>
         <li class="sidebar-item">
   <div class="sidebar-item-container"> 
@@ -593,7 +617,7 @@ <h1 class="title">TA2: Mi CV II</h1>
     <div>
     <div class="quarto-title-meta-heading">Fecha de última modificación</div>
     <div class="quarto-title-meta-contents">
-      <p class="date-modified">7 de marzo de 2026</p>
+      <p class="date-modified">13 de marzo de 2026</p>
     </div>
   </div>
     
diff --git a/docs/pages/Bloque1/t2a.pdf b/docs/pages/Bloque1/t2a.pdf
index c75a408ace28188fa5fcf64ea953155db1cfa6ae..061d79e66d1e66224c45bdec0dc304d45193243f 100644
GIT binary patch
delta 130
zcmdnFfpO;s#tr-ZwGE984UA2U&9n^+)eQ{PH5K%I^HW?BOHvgyT&#=?jLZy-VM;c?
y@)u@zHnKEzGjg#oakMZuF|sglGIX=FFgI{Cb+a@xGcj~Bu~V=iq-3%~_)h@Z_90gQ

delta 130
zcmdnFfpO;s#tr-ZwGGUTj17!TEwl{`)eQ{PH5K%I^HW?BOHvgyT&#=?jLZy-VM;c?
y@)u@zc5^gzH8L@Dc6D-dvoJ6-H*~UeG;y*taxphIG;y_Xwo|Ynq-3%~_)h@&Lm~wL

diff --git a/docs/pages/Bloque2/MAclases.html b/docs/pages/Bloque2/MAclases.html
index 605000e..f7d4d55 100644
--- a/docs/pages/Bloque2/MAclases.html
+++ b/docs/pages/Bloque2/MAclases.html
@@ -579,8 +579,32 @@
       </ul>
   </li>
         <li class="sidebar-item sidebar-item-section">
-      <span class="sidebar-item-text sidebar-link text-start">
- <span class="menu-text">Bloque IV Comunicación</span></span>
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false">
+ <span class="menu-text">Bloque IV Comunicación</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-12" class="collapse list-unstyled sidebar-section depth1 ">  
+          <li class="sidebar-item sidebar-item-section">
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false">
+ <span class="menu-text">Semana 11</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-13" class="collapse list-unstyled sidebar-section depth2 ">  
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque4/protocolos.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">Protocolos de Comunicación</span></a>
+  </div>
+</li>
+      </ul>
+  </li>
+      </ul>
   </li>
         <li class="sidebar-item">
   <div class="sidebar-item-container"> 
@@ -650,7 +674,7 @@ <h1 class="title">MA: Clases ES6</h1>
     <div>
     <div class="quarto-title-meta-heading">Fecha de última modificación</div>
     <div class="quarto-title-meta-contents">
-      <p class="date-modified">7 de marzo de 2026</p>
+      <p class="date-modified">13 de marzo de 2026</p>
     </div>
   </div>
     
diff --git a/docs/pages/Bloque2/MAclases.pdf b/docs/pages/Bloque2/MAclases.pdf
index ca0600b0062ae9f92c04e8a84b979455e5a693bd..5764ad6120af1dd733180a70c405a4131201013f 100644
GIT binary patch
delta 138
zcmX?ip84E)<_){=Y8x6G8W@`!TWT8^sv8)nYbxmb=BKzMmZU0ZxL6q(7?~Lu!<1}(
zc6R~0n~AfLi;20DrK6#%lewjdo0EZ)g`t6)qos+3i-ohRp`C&aVI{GX3%AN|e*N?@
FBLM96C+q+K

delta 138
zcmX?ip84E)<_){=Y8#jv85@`y7-$<9sv8)nYbxmb=BKzMmZU0ZxL6q(7?~Lu!<1}(
zc6R~0o4KQ#ld*-FnX!eVrJIqdrGc5TlZlg&p|gpRxvQnAk)47KVI{GX3%AN|e*N?@
FBLL2nCq@7O

diff --git a/docs/pages/Bloque2/intensivo.html b/docs/pages/Bloque2/intensivo.html
index 832972b..c0b4768 100644
--- a/docs/pages/Bloque2/intensivo.html
+++ b/docs/pages/Bloque2/intensivo.html
@@ -579,8 +579,32 @@
       </ul>
   </li>
         <li class="sidebar-item sidebar-item-section">
-      <span class="sidebar-item-text sidebar-link text-start">
- <span class="menu-text">Bloque IV Comunicación</span></span>
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false">
+ <span class="menu-text">Bloque IV Comunicación</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-12" class="collapse list-unstyled sidebar-section depth1 ">  
+          <li class="sidebar-item sidebar-item-section">
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false">
+ <span class="menu-text">Semana 11</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-13" class="collapse list-unstyled sidebar-section depth2 ">  
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque4/protocolos.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">Protocolos de Comunicación</span></a>
+  </div>
+</li>
+      </ul>
+  </li>
+      </ul>
   </li>
         <li class="sidebar-item">
   <div class="sidebar-item-container"> 
@@ -701,7 +725,7 @@ <h1 class="title">Repaso Intensivo JS</h1>
     <div>
     <div class="quarto-title-meta-heading">Fecha de última modificación</div>
     <div class="quarto-title-meta-contents">
-      <p class="date-modified">7 de marzo de 2026</p>
+      <p class="date-modified">13 de marzo de 2026</p>
     </div>
   </div>
     
diff --git a/docs/pages/Bloque2/intensivo.pdf b/docs/pages/Bloque2/intensivo.pdf
index 92b59cd8faf88e0c0a2988dd12e21ceb174682c9..0c9f5a3994c184b10bcabc57d5879bc2794b4d38 100644
GIT binary patch
delta 111
zcmX?liRI`emWC~itt#w>#)byQ=0?+dR2XI8ob@V<XPiw8oLn5uoXwq098KL^om||^
e4NWbbj0{|j3|)*YEe!1xYzQgYzE730of!bi!W}dK

delta 111
zcmX?liRI`emWC~itt#vW=0?T_CMMH+R2XI8ob@V<XPk{(O-v1)44h3&9i1J`9G#3^
eT`i4`U0fZVEnS?Q%^mF&YzQgYzE730of!brvmL4c

diff --git a/docs/pages/Bloque2/jsI.html b/docs/pages/Bloque2/jsI.html
index 7e12dd4..787ea0c 100644
--- a/docs/pages/Bloque2/jsI.html
+++ b/docs/pages/Bloque2/jsI.html
@@ -306,7 +306,7 @@ <h1 class="title">Introducción a JS</h1>
     <div>
     <div class="quarto-title-meta-heading">Fecha de última modificación</div>
     <div class="quarto-title-meta-contents">
-      <p class="date-modified">7 de marzo de 2026</p>
+      <p class="date-modified">13 de marzo de 2026</p>
     </div>
   </div>
     
diff --git a/docs/pages/Bloque2/jsI.pdf b/docs/pages/Bloque2/jsI.pdf
index 69f12e7c570dccd2c00af4625e5a568b30981dc7..0c2894c33c92212a78668f3c1bbcbc6d6107efa6 100644
GIT binary patch
delta 116
zcmX?mpXuy<rVYziaTppK8W@|I8ctrnN*d1Dd}-BJCO0=%Lo)+Y7jqX=7Xt$WCnsko
iM-vkl7dIDYOLH@46H7Y<8^TIrCm*zx->kE4AtL}+)*>|k

delta 116
zcmX?mpXuy<rVYziaTu5z85@`wT25ZSN*d1Dd}-BJCN~3PS0htrV?$R*OA8|dBS$x5
ib5|o1Qx{8fV+%(o19LkC8^TIrCm*zx->kE4AtL}f1tEU`

diff --git a/docs/pages/Bloque2/ti.html b/docs/pages/Bloque2/ti.html
index d2b3223..58e6572 100644
--- a/docs/pages/Bloque2/ti.html
+++ b/docs/pages/Bloque2/ti.html
@@ -544,8 +544,32 @@
       </ul>
   </li>
         <li class="sidebar-item sidebar-item-section">
-      <span class="sidebar-item-text sidebar-link text-start">
- <span class="menu-text">Bloque IV Comunicación</span></span>
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false">
+ <span class="menu-text">Bloque IV Comunicación</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-12" class="collapse list-unstyled sidebar-section depth1 ">  
+          <li class="sidebar-item sidebar-item-section">
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false">
+ <span class="menu-text">Semana 11</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-13" class="collapse list-unstyled sidebar-section depth2 ">  
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque4/protocolos.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">Protocolos de Comunicación</span></a>
+  </div>
+</li>
+      </ul>
+  </li>
+      </ul>
   </li>
         <li class="sidebar-item">
   <div class="sidebar-item-container"> 
@@ -609,7 +633,7 @@ <h1 class="title">TI: Ejercicios JS</h1>
     <div>
     <div class="quarto-title-meta-heading">Fecha de última modificación</div>
     <div class="quarto-title-meta-contents">
-      <p class="date-modified">7 de marzo de 2026</p>
+      <p class="date-modified">13 de marzo de 2026</p>
     </div>
   </div>
     
diff --git a/docs/pages/Bloque2/ti.pdf b/docs/pages/Bloque2/ti.pdf
index 5649a0ba5722d7e072d3ed3a59c95aa08ef8f498..b869e42f7fd8ee58b92cdd8d6ff89e62aa098d9a 100644
GIT binary patch
delta 116
zcmbRDg=yXwrVYhgISh>r4UEkVOeR-vm4<UR&)ZtU<Yr*vX6|BQ>EdQ;4g^k?u4d-O
grsi%Yrbb3ark2K*b_zCxmBda?Fjv@Iv11t{0LSSdFaQ7m

delta 116
zcmbRDg=yXwrVYhgISkB=j15eTEGAcPm4<UR&)ZtU<Ywk#=4N1E=ICT$>1<$OZeVO^
iVs2<|Zf0R&VCZCNY-*=qLs&`d<OFkt%@sSAF#-U*CLiJe

diff --git a/docs/pages/Bloque2/tia.html b/docs/pages/Bloque2/tia.html
index 250f78d..c5368ab 100644
--- a/docs/pages/Bloque2/tia.html
+++ b/docs/pages/Bloque2/tia.html
@@ -579,8 +579,32 @@
       </ul>
   </li>
         <li class="sidebar-item sidebar-item-section">
-      <span class="sidebar-item-text sidebar-link text-start">
- <span class="menu-text">Bloque IV Comunicación</span></span>
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false">
+ <span class="menu-text">Bloque IV Comunicación</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-12" class="collapse list-unstyled sidebar-section depth1 ">  
+          <li class="sidebar-item sidebar-item-section">
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false">
+ <span class="menu-text">Semana 11</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-13" class="collapse list-unstyled sidebar-section depth2 ">  
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque4/protocolos.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">Protocolos de Comunicación</span></a>
+  </div>
+</li>
+      </ul>
+  </li>
+      </ul>
   </li>
         <li class="sidebar-item">
   <div class="sidebar-item-container"> 
@@ -652,7 +676,7 @@ <h1 class="title">TAI: La objetización de las personas</h1>
     <div>
     <div class="quarto-title-meta-heading">Fecha de última modificación</div>
     <div class="quarto-title-meta-contents">
-      <p class="date-modified">7 de marzo de 2026</p>
+      <p class="date-modified">13 de marzo de 2026</p>
     </div>
   </div>
     
diff --git a/docs/pages/Bloque2/tia.pdf b/docs/pages/Bloque2/tia.pdf
index 42c91437a6612e1e7f898794172dcde99a15a1b0..14c45135c6c7dac962f86e23a5812dc4f9ba4d68 100644
GIT binary patch
delta 114
zcmeBL%G|Y-c|+GJc0*%B17mZ;$rDe>z}TC&oLa}~W@KPtXm03iVD4saU~1@O>}2j{
hYT{;W>f&bRXku#aYNudBSV`>UL>sxy$1WUU1OR)qAYK3f

delta 114
zcmeBL%G|Y-c|+GJb^~)GV*?Z8$rDe>z}TC&oLa}~=4#>WVrpP&ZsBO=V(jYdV&?4V
h?CfOhY-H+WY3OQUZl_>FSV`>UL>sxy$1WUU1OTaHAua#_

diff --git a/docs/pages/Bloque3/DOM.html b/docs/pages/Bloque3/DOM.html
index 0a751ac..41cc9b0 100644
--- a/docs/pages/Bloque3/DOM.html
+++ b/docs/pages/Bloque3/DOM.html
@@ -579,8 +579,32 @@
       </ul>
   </li>
         <li class="sidebar-item sidebar-item-section">
-      <span class="sidebar-item-text sidebar-link text-start">
- <span class="menu-text">Bloque IV Comunicación</span></span>
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false">
+ <span class="menu-text">Bloque IV Comunicación</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-12" class="collapse list-unstyled sidebar-section depth1 ">  
+          <li class="sidebar-item sidebar-item-section">
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false">
+ <span class="menu-text">Semana 11</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-13" class="collapse list-unstyled sidebar-section depth2 ">  
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque4/protocolos.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">Protocolos de Comunicación</span></a>
+  </div>
+</li>
+      </ul>
+  </li>
+      </ul>
   </li>
         <li class="sidebar-item">
   <div class="sidebar-item-container"> 
@@ -651,7 +675,7 @@ <h1 class="title">DOM</h1>
     <div>
     <div class="quarto-title-meta-heading">Fecha de última modificación</div>
     <div class="quarto-title-meta-contents">
-      <p class="date-modified">7 de marzo de 2026</p>
+      <p class="date-modified">13 de marzo de 2026</p>
     </div>
   </div>
     
diff --git a/docs/pages/Bloque3/DOM.pdf b/docs/pages/Bloque3/DOM.pdf
index 0615af2e97d4840316463b37cb42b878f2c4230a..0435f8d881bdcaa239821312142362118038ff11 100644
GIT binary patch
delta 137
zcmbREk7?pRrVai(v<!_64U8>JEVK;_)eQ{PH5K%I^HW?BOHvgyT&#=?jLZy-p-MJa
z?kHz*Gcz_eG;?${GIBC-G&V8?GR>WxEzHae%`9A84ctuZ6l@49iJctiFTXi-?;b_~
D6w)MT

delta 137
zcmbREk7?pRrVai(v<%FRj19~TEwl{`)eQ{PH5K%I^HW?BOHvgyT&#=?jLZy-p-MJa
z?kHz*b20!5S~?pWxVjjanj4sy8=IP27+L^%2F7kiPG)urHiVVLP7d^!-yFJk4<i5p
C(<Ai&

diff --git a/docs/pages/Bloque3/Intermedio.html b/docs/pages/Bloque3/Intermedio.html
index ba370ee..1414aaa 100644
--- a/docs/pages/Bloque3/Intermedio.html
+++ b/docs/pages/Bloque3/Intermedio.html
@@ -579,8 +579,32 @@
       </ul>
   </li>
         <li class="sidebar-item sidebar-item-section">
-      <span class="sidebar-item-text sidebar-link text-start">
- <span class="menu-text">Bloque IV Comunicación</span></span>
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false">
+ <span class="menu-text">Bloque IV Comunicación</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-12" class="collapse list-unstyled sidebar-section depth1 ">  
+          <li class="sidebar-item sidebar-item-section">
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false">
+ <span class="menu-text">Semana 11</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-13" class="collapse list-unstyled sidebar-section depth2 ">  
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque4/protocolos.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">Protocolos de Comunicación</span></a>
+  </div>
+</li>
+      </ul>
+  </li>
+      </ul>
   </li>
         <li class="sidebar-item">
   <div class="sidebar-item-container"> 
@@ -673,7 +697,7 @@ <h1 class="title">React III</h1>
     <div>
     <div class="quarto-title-meta-heading">Fecha de última modificación</div>
     <div class="quarto-title-meta-contents">
-      <p class="date-modified">7 de marzo de 2026</p>
+      <p class="date-modified">13 de marzo de 2026</p>
     </div>
   </div>
     
diff --git a/docs/pages/Bloque3/Intermedio.pdf b/docs/pages/Bloque3/Intermedio.pdf
index 7da9f60308f64d6b7fba6a952e653c84a9fb6120..c2ddcde9f3e9218451b3be17e4df99b8a79f00d7 100644
GIT binary patch
delta 142
zcmX@~i{;QSmWC~iT?X2Q#)byQ=B5VP28QYe2I`s$`o8%oE{P?n3K}j}Mg~S^2F5TY
z+qW7p{^M{nc67FIa&>ccGq5x^urN1pa<McqGc&WWaCI@UFm*MxQ?MbdBzAJ6v)p!Z
ID@JW*0O{ByrT_o{

delta 142
zcmX@~i{;QSmWC~iT?X0)=0?T_riRAa28QYe2I`s$`o8%oE{P?n3K}j}Mg~S^2F5TY
z+qW7p{^M{na56JBb+NE?GB-AIb+j-saCS2=axru@GjcX|G;uSwQ?MbdBzAJ6v)p!Z
ID@JW*0NI!%VgLXD

diff --git a/docs/pages/Bloque3/MARef.html b/docs/pages/Bloque3/MARef.html
index 77931f1..c5368ef 100644
--- a/docs/pages/Bloque3/MARef.html
+++ b/docs/pages/Bloque3/MARef.html
@@ -544,8 +544,32 @@
       </ul>
   </li>
         <li class="sidebar-item sidebar-item-section">
-      <span class="sidebar-item-text sidebar-link text-start">
- <span class="menu-text">Bloque IV Comunicación</span></span>
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false">
+ <span class="menu-text">Bloque IV Comunicación</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-12" class="collapse list-unstyled sidebar-section depth1 ">  
+          <li class="sidebar-item sidebar-item-section">
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false">
+ <span class="menu-text">Semana 11</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-13" class="collapse list-unstyled sidebar-section depth2 ">  
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque4/protocolos.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">Protocolos de Comunicación</span></a>
+  </div>
+</li>
+      </ul>
+  </li>
+      </ul>
   </li>
         <li class="sidebar-item">
   <div class="sidebar-item-container"> 
@@ -593,7 +617,7 @@ <h1 class="title">MA: <em>Uncontrolled fields</em> y <code>useRef</code></h1>
     <div>
     <div class="quarto-title-meta-heading">Fecha de última modificación</div>
     <div class="quarto-title-meta-contents">
-      <p class="date-modified">7 de marzo de 2026</p>
+      <p class="date-modified">13 de marzo de 2026</p>
     </div>
   </div>
     
diff --git a/docs/pages/Bloque3/MARef.pdf b/docs/pages/Bloque3/MARef.pdf
index aea8d4ec8e6fa4db6c76343db927c09c7745376e..62d505de39780cb0ae120511dad0950190d00d9c 100644
GIT binary patch
delta 116
zcmaFe#`L<4X+wGihoP~dfw6_L(d7IJX*g%|q>2DeHv<zROCx6&3uAL*6JtXYLsu6A
h7e_-k3lmpoX9GtUb2|ka!b)N%FBFvD?B1lp2mnqd9$x?e

delta 116
zcmaFe#`L<4X+wGihk?0~v4N?n<>dSdX*g%|q>2DeHzNZ}XESpXOGh&UGcy+#Ll;AH
hCsQXAGjnGn0|OH`H#-Fz!b)N%FBFvD?B1lp2mn(N9!&rM

diff --git a/docs/pages/Bloque3/MAcss2.html b/docs/pages/Bloque3/MAcss2.html
index 3813978..cb60c86 100644
--- a/docs/pages/Bloque3/MAcss2.html
+++ b/docs/pages/Bloque3/MAcss2.html
@@ -544,8 +544,32 @@
       </ul>
   </li>
         <li class="sidebar-item sidebar-item-section">
-      <span class="sidebar-item-text sidebar-link text-start">
- <span class="menu-text">Bloque IV Comunicación</span></span>
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false">
+ <span class="menu-text">Bloque IV Comunicación</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-12" class="collapse list-unstyled sidebar-section depth1 ">  
+          <li class="sidebar-item sidebar-item-section">
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false">
+ <span class="menu-text">Semana 11</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-13" class="collapse list-unstyled sidebar-section depth2 ">  
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque4/protocolos.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">Protocolos de Comunicación</span></a>
+  </div>
+</li>
+      </ul>
+  </li>
+      </ul>
   </li>
         <li class="sidebar-item">
   <div class="sidebar-item-container"> 
@@ -593,7 +617,7 @@ <h1 class="title">MA: CSS Flex y CSS</h1>
     <div>
     <div class="quarto-title-meta-heading">Fecha de última modificación</div>
     <div class="quarto-title-meta-contents">
-      <p class="date-modified">7 de marzo de 2026</p>
+      <p class="date-modified">13 de marzo de 2026</p>
     </div>
   </div>
     
diff --git a/docs/pages/Bloque3/MAcss2.pdf b/docs/pages/Bloque3/MAcss2.pdf
index a7cdbe11121fa62f21c560817c7019b5ea45228b..d8b53c8d37c54ef840ed77c75ee59878aacfd281 100644
GIT binary patch
delta 115
zcmcb5it*|x#tqM-ISh>r4U8>}EhfK@mWFdS3&nh8cQY_?HMg)ZFm`scFfp=lGqEsp
gb~JJ_cXhHfGO{o?bhT5kA*>{J@<kT;$vG)60kU5pU;qFB

delta 115
zcmcb5it*|x#tqM-ISkB=j19~T%qG8&mWFdS3&nh8cQbV{H#9bNwX}3Ga5FG=HF7dE
gH#0UfvNSL<baiyHbg@&gA*>{J@<kT;$vG)60jgLaHUIzs

diff --git a/docs/pages/Bloque3/MAentorno.html b/docs/pages/Bloque3/MAentorno.html
index 881b6c8..51788cb 100644
--- a/docs/pages/Bloque3/MAentorno.html
+++ b/docs/pages/Bloque3/MAentorno.html
@@ -280,7 +280,7 @@ <h1 class="title">MA: Entorno</h1>
     <div>
     <div class="quarto-title-meta-heading">Fecha de última modificación</div>
     <div class="quarto-title-meta-contents">
-      <p class="date-modified">7 de marzo de 2026</p>
+      <p class="date-modified">13 de marzo de 2026</p>
     </div>
   </div>
     
diff --git a/docs/pages/Bloque3/MAentorno.pdf b/docs/pages/Bloque3/MAentorno.pdf
index c2a2cdffba1cfea6e6c69c29954af6c4adafd408..a485f0d8bde20e2feeba1286744f853382a424ea 100644
GIT binary patch
delta 130
zcmbO>pK;oJ#tpmOwGE984U8=eOtcLQ)eQ{PH5K%I^HW?BOHvgyT&#=?jLZy-VM;bX
yb1!9cHgq#GHg~dcbF(xvGdFWIbTl$BH+D5JurxO}Fmg07v{SGlq-63uzaId$`XN{V

delta 130
zcmbO>pK;oJ#tpmOwGGUTj15eUEVT^`)eQ{PH5K%I^HW?BOHvgyT&#=?jLZy-VM;bX
yb1!9cHZn4|bTu<{F)=VOFmW@rFf=tZb}=$@votd^bh0!vw^Ohoq-63uzaIdxc_Bss

diff --git a/docs/pages/Bloque3/ReactI.html b/docs/pages/Bloque3/ReactI.html
index 2aad1bf..1d5137b 100644
--- a/docs/pages/Bloque3/ReactI.html
+++ b/docs/pages/Bloque3/ReactI.html
@@ -579,8 +579,32 @@
       </ul>
   </li>
         <li class="sidebar-item sidebar-item-section">
-      <span class="sidebar-item-text sidebar-link text-start">
- <span class="menu-text">Bloque IV Comunicación</span></span>
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false">
+ <span class="menu-text">Bloque IV Comunicación</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-12" class="collapse list-unstyled sidebar-section depth1 ">  
+          <li class="sidebar-item sidebar-item-section">
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false">
+ <span class="menu-text">Semana 11</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-13" class="collapse list-unstyled sidebar-section depth2 ">  
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque4/protocolos.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">Protocolos de Comunicación</span></a>
+  </div>
+</li>
+      </ul>
+  </li>
+      </ul>
   </li>
         <li class="sidebar-item">
   <div class="sidebar-item-container"> 
@@ -675,7 +699,7 @@ <h1 class="title">React I</h1>
     <div>
     <div class="quarto-title-meta-heading">Fecha de última modificación</div>
     <div class="quarto-title-meta-contents">
-      <p class="date-modified">7 de marzo de 2026</p>
+      <p class="date-modified">13 de marzo de 2026</p>
     </div>
   </div>
     
diff --git a/docs/pages/Bloque3/ReactI.pdf b/docs/pages/Bloque3/ReactI.pdf
index 018793252c15ce123af307d9c06914ba0f6994d0..6337856d2f9669e430b0ad208a2b5ea276876f7c 100644
GIT binary patch
delta 142
zcmZ3#lV$x*mWC~iv7*|B#)byQmIfBu28QYe2I`s$`o8%oE{P?n3K}j}Mg~S^2F5TY
z+dD)V`B~h|jGSC7oQ#Z|ot-QUEX<q@om`B~EDhXTEnSRUoLw#L6l@49iJd$#Rc`xl
INyaTq01w|JHUIzs

delta 142
zcmZ3#lV$x*mWC~iv7*`r=0?T_W+n#O28QYe2I`s$`o8%oE{P?n3K}j}Mg~S^2F5TY
z+dD)V`B~gd+{}!P-CWEaja>~bTujZ3EsWe;O)M?k%#92Ujg8Ii6l@49iJd$#Rc`xl
INyaTq0QTJ@i~s-t

diff --git a/docs/pages/Bloque3/ReactIV.html b/docs/pages/Bloque3/ReactIV.html
index cf59008..b661f8f 100644
--- a/docs/pages/Bloque3/ReactIV.html
+++ b/docs/pages/Bloque3/ReactIV.html
@@ -1,87 +1,176 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es"><head>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
 
-<meta charset="utf-8">
-<meta name="generator" content="quarto-1.8.27">
+<head>
 
-<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
+  <meta charset="utf-8">
+  <meta name="generator" content="quarto-1.8.27">
 
-<meta name="author" content="Javier Ribal del Río">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
 
-<title>React IV – Training Center SW</title>
-<style>
-code{white-space: pre-wrap;}
-span.smallcaps{font-variant: small-caps;}
-div.columns{display: flex; gap: min(4vw, 1.5em);}
-div.column{flex: auto; overflow-x: auto;}
-div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
-ul.task-list{list-style: none;}
-ul.task-list li input[type="checkbox"] {
-  width: 0.8em;
-  margin: 0 0.8em 0.2em -1em; /* quarto-specific, see https://github.com/quarto-dev/quarto-cli/issues/4556 */ 
-  vertical-align: middle;
-}
-/* CSS for syntax highlighting */
-html { -webkit-text-size-adjust: 100%; }
-pre > code.sourceCode { white-space: pre; position: relative; }
-pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
-pre > code.sourceCode > span:empty { height: 1.2em; }
-.sourceCode { overflow: visible; }
-code.sourceCode > span { color: inherit; text-decoration: inherit; }
-div.sourceCode { margin: 1em 0; }
-pre.sourceCode { margin: 0; }
-@media screen {
-div.sourceCode { overflow: auto; }
-}
-@media print {
-pre > code.sourceCode { white-space: pre-wrap; }
-pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
-}
-pre.numberSource code
-  { counter-reset: source-line 0; }
-pre.numberSource code > span
-  { position: relative; left: -4em; counter-increment: source-line; }
-pre.numberSource code > span > a:first-child::before
-  { content: counter(source-line);
-    position: relative; left: -1em; text-align: right; vertical-align: baseline;
-    border: none; display: inline-block;
-    -webkit-touch-callout: none; -webkit-user-select: none;
-    -khtml-user-select: none; -moz-user-select: none;
-    -ms-user-select: none; user-select: none;
-    padding: 0 4px; width: 4em;
-  }
-pre.numberSource { margin-left: 3em;  padding-left: 4px; }
-div.sourceCode
-  {   }
-@media screen {
-pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
-}
-</style>
+  <meta name="author" content="Javier Ribal del Río">
+
+  <title>React IV – Training Center SW</title>
+  <style>
+    code {
+      white-space: pre-wrap;
+    }
+
+    span.smallcaps {
+      font-variant: small-caps;
+    }
+
+    div.columns {
+      display: flex;
+      gap: min(4vw, 1.5em);
+    }
 
+    div.column {
+      flex: auto;
+      overflow-x: auto;
+    }
 
-<script src="../../site_libs/quarto-nav/quarto-nav.js"></script>
-<script src="../../site_libs/quarto-nav/headroom.min.js"></script>
-<script src="../../site_libs/clipboard/clipboard.min.js"></script>
-<script src="../../site_libs/quarto-search/autocomplete.umd.js"></script>
-<script src="../../site_libs/quarto-search/fuse.min.js"></script>
-<script src="../../site_libs/quarto-search/quarto-search.js"></script>
-<meta name="quarto:offset" content="../../">
-<script src="../../site_libs/quarto-html/quarto.js" type="module"></script>
-<script src="../../site_libs/quarto-html/tabsets/tabsets.js" type="module"></script>
-<script src="../../site_libs/quarto-html/axe/axe-check.js" type="module"></script>
-<script src="../../site_libs/quarto-html/popper.min.js"></script>
-<script src="../../site_libs/quarto-html/tippy.umd.min.js"></script>
-<script src="../../site_libs/quarto-html/anchor.min.js"></script>
-<link href="../../site_libs/quarto-html/tippy.css" rel="stylesheet">
-<link href="../../site_libs/quarto-html/quarto-syntax-highlighting-ed96de9b727972fe78a7b5d16c58bf87.css" rel="stylesheet" class="quarto-color-scheme" id="quarto-text-highlighting-styles">
-<link href="../../site_libs/quarto-html/quarto-syntax-highlighting-dark-4d9afe2b8d18ee9fa5d0d57b5ed4214d.css" rel="stylesheet" class="quarto-color-scheme quarto-color-alternate" id="quarto-text-highlighting-styles">
-<link href="../../site_libs/quarto-html/quarto-syntax-highlighting-ed96de9b727972fe78a7b5d16c58bf87.css" rel="stylesheet" class="quarto-color-scheme-extra" id="quarto-text-highlighting-styles">
-<script src="../../site_libs/bootstrap/bootstrap.min.js"></script>
-<link href="../../site_libs/bootstrap/bootstrap-icons.css" rel="stylesheet">
-<link href="../../site_libs/bootstrap/bootstrap-7010b3c259c44ebb4b6b7a5b7b7107e0.min.css" rel="stylesheet" append-hash="true" class="quarto-color-scheme" id="quarto-bootstrap" data-mode="light">
-<link href="../../site_libs/bootstrap/bootstrap-dark-036d13c4e18d8d7539729d541f55cf23.min.css" rel="stylesheet" append-hash="true" class="quarto-color-scheme quarto-color-alternate" id="quarto-bootstrap" data-mode="dark">
-<link href="../../site_libs/bootstrap/bootstrap-7010b3c259c44ebb4b6b7a5b7b7107e0.min.css" rel="stylesheet" append-hash="true" class="quarto-color-scheme-extra" id="quarto-bootstrap" data-mode="light">
-<script id="quarto-search-options" type="application/json">{
+    div.hanging-indent {
+      margin-left: 1.5em;
+      text-indent: -1.5em;
+    }
+
+    ul.task-list {
+      list-style: none;
+    }
+
+    ul.task-list li input[type="checkbox"] {
+      width: 0.8em;
+      margin: 0 0.8em 0.2em -1em;
+      /* quarto-specific, see https://github.com/quarto-dev/quarto-cli/issues/4556 */
+      vertical-align: middle;
+    }
+
+    /* CSS for syntax highlighting */
+    html {
+      -webkit-text-size-adjust: 100%;
+    }
+
+    pre>code.sourceCode {
+      white-space: pre;
+      position: relative;
+    }
+
+    pre>code.sourceCode>span {
+      display: inline-block;
+      line-height: 1.25;
+    }
+
+    pre>code.sourceCode>span:empty {
+      height: 1.2em;
+    }
+
+    .sourceCode {
+      overflow: visible;
+    }
+
+    code.sourceCode>span {
+      color: inherit;
+      text-decoration: inherit;
+    }
+
+    div.sourceCode {
+      margin: 1em 0;
+    }
+
+    pre.sourceCode {
+      margin: 0;
+    }
+
+    @media screen {
+      div.sourceCode {
+        overflow: auto;
+      }
+    }
+
+    @media print {
+      pre>code.sourceCode {
+        white-space: pre-wrap;
+      }
+
+      pre>code.sourceCode>span {
+        text-indent: -5em;
+        padding-left: 5em;
+      }
+    }
+
+    pre.numberSource code {
+      counter-reset: source-line 0;
+    }
+
+    pre.numberSource code>span {
+      position: relative;
+      left: -4em;
+      counter-increment: source-line;
+    }
+
+    pre.numberSource code>span>a:first-child::before {
+      content: counter(source-line);
+      position: relative;
+      left: -1em;
+      text-align: right;
+      vertical-align: baseline;
+      border: none;
+      display: inline-block;
+      -webkit-touch-callout: none;
+      -webkit-user-select: none;
+      -khtml-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+      padding: 0 4px;
+      width: 4em;
+    }
+
+    pre.numberSource {
+      margin-left: 3em;
+      padding-left: 4px;
+    }
+
+    div.sourceCode {}
+
+    @media screen {
+      pre>code.sourceCode>span>a:first-child::before {
+        text-decoration: underline;
+      }
+    }
+  </style>
+
+
+  <script src="../../site_libs/quarto-nav/quarto-nav.js"></script>
+  <script src="../../site_libs/quarto-nav/headroom.min.js"></script>
+  <script src="../../site_libs/clipboard/clipboard.min.js"></script>
+  <script src="../../site_libs/quarto-search/autocomplete.umd.js"></script>
+  <script src="../../site_libs/quarto-search/fuse.min.js"></script>
+  <script src="../../site_libs/quarto-search/quarto-search.js"></script>
+  <meta name="quarto:offset" content="../../">
+  <script src="../../site_libs/quarto-html/quarto.js" type="module"></script>
+  <script src="../../site_libs/quarto-html/tabsets/tabsets.js" type="module"></script>
+  <script src="../../site_libs/quarto-html/axe/axe-check.js" type="module"></script>
+  <script src="../../site_libs/quarto-html/popper.min.js"></script>
+  <script src="../../site_libs/quarto-html/tippy.umd.min.js"></script>
+  <script src="../../site_libs/quarto-html/anchor.min.js"></script>
+  <link href="../../site_libs/quarto-html/tippy.css" rel="stylesheet">
+  <link href="../../site_libs/quarto-html/quarto-syntax-highlighting-ed96de9b727972fe78a7b5d16c58bf87.css"
+    rel="stylesheet" class="quarto-color-scheme" id="quarto-text-highlighting-styles">
+  <link href="../../site_libs/quarto-html/quarto-syntax-highlighting-dark-4d9afe2b8d18ee9fa5d0d57b5ed4214d.css"
+    rel="stylesheet" class="quarto-color-scheme quarto-color-alternate" id="quarto-text-highlighting-styles">
+  <link href="../../site_libs/quarto-html/quarto-syntax-highlighting-ed96de9b727972fe78a7b5d16c58bf87.css"
+    rel="stylesheet" class="quarto-color-scheme-extra" id="quarto-text-highlighting-styles">
+  <script src="../../site_libs/bootstrap/bootstrap.min.js"></script>
+  <link href="../../site_libs/bootstrap/bootstrap-icons.css" rel="stylesheet">
+  <link href="../../site_libs/bootstrap/bootstrap-7010b3c259c44ebb4b6b7a5b7b7107e0.min.css" rel="stylesheet"
+    append-hash="true" class="quarto-color-scheme" id="quarto-bootstrap" data-mode="light">
+  <link href="../../site_libs/bootstrap/bootstrap-dark-036d13c4e18d8d7539729d541f55cf23.min.css" rel="stylesheet"
+    append-hash="true" class="quarto-color-scheme quarto-color-alternate" id="quarto-bootstrap" data-mode="dark">
+  <link href="../../site_libs/bootstrap/bootstrap-7010b3c259c44ebb4b6b7a5b7b7107e0.min.css" rel="stylesheet"
+    append-hash="true" class="quarto-color-scheme-extra" id="quarto-bootstrap" data-mode="light">
+  <script id="quarto-search-options" type="application/json">{
   "location": "sidebar",
   "copy-button": false,
   "collapse-after": 3,
@@ -110,10 +199,11 @@
 }</script>
 
 
-<link rel="stylesheet" href="../../style/main.css">
+  <link rel="stylesheet" href="../../style/main.css">
 </head>
 
-<body class="nav-sidebar docked quarto-light"><script id="quarto-html-before-body" type="application/javascript">
+<body class="nav-sidebar docked quarto-light">
+  <script id="quarto-html-before-body" type="application/javascript">
     const toggleBodyColorMode = (bsSheetEl) => {
       const mode = bsSheetEl.getAttribute("data-mode");
       const bodyEl = window.document.querySelector("body");
@@ -133,7 +223,7 @@
     }
     const setColorSchemeToggle = (alternate) => {
       const toggles = window.document.querySelectorAll('.quarto-color-scheme-toggle');
-      for (let i=0; i < toggles.length; i++) {
+      for (let i = 0; i < toggles.length; i++) {
         const toggle = toggles[i];
         if (toggle) {
           if (alternate) {
@@ -177,22 +267,22 @@
       }
     }
     const disableStylesheet = (stylesheets) => {
-      for (let i=0; i < stylesheets.length; i++) {
+      for (let i = 0; i < stylesheets.length; i++) {
         const stylesheet = stylesheets[i];
         stylesheet.rel = 'disabled-stylesheet';
       }
     }
     const enableStylesheet = (stylesheets) => {
-      for (let i=0; i < stylesheets.length; i++) {
+      for (let i = 0; i < stylesheets.length; i++) {
         const stylesheet = stylesheets[i];
-        if(stylesheet.rel !== 'stylesheet') { // for Chrome, which will still FOUC without this check
+        if (stylesheet.rel !== 'stylesheet') { // for Chrome, which will still FOUC without this check
           stylesheet.rel = 'stylesheet';
         }
       }
     }
     const manageTransitions = (selector, allowTransitions) => {
       const els = window.document.querySelectorAll(selector);
-      for (let i=0; i < els.length; i++) {
+      for (let i = 0; i < els.length; i++) {
         const el = els[i];
         if (allowTransitions) {
           el.classList.remove('notransition');
@@ -232,7 +322,7 @@
       const baseTheme = document.querySelector('#giscus-base-theme')?.value ?? 'light';
       const alternateTheme = document.querySelector('#giscus-alt-theme')?.value ?? 'dark';
       let newTheme = '';
-      if(authorPrefersDark) {
+      if (authorPrefersDark) {
         newTheme = isAlternate ? baseTheme : alternateTheme;
       } else {
         newTheme = isAlternate ? alternateTheme : baseTheme;
@@ -257,8 +347,8 @@
     };
     const authorPrefersDark = false;
     const darkModeDefault = authorPrefersDark;
-      document.querySelector('link#quarto-text-highlighting-styles.quarto-color-scheme-extra').rel = 'disabled-stylesheet';
-      document.querySelector('link#quarto-bootstrap.quarto-color-scheme-extra').rel = 'disabled-stylesheet';
+    document.querySelector('link#quarto-text-highlighting-styles.quarto-color-scheme-extra').rel = 'disabled-stylesheet';
+    document.querySelector('link#quarto-bootstrap.quarto-color-scheme-extra').rel = 'disabled-stylesheet';
     let localAlternateSentinel = darkModeDefault ? 'alternate' : 'default';
     // Dark / light mode switch
     window.quartoToggleColorScheme = () => {
@@ -277,474 +367,600 @@
     }
   </script>
 
-<div id="quarto-search-results"></div>
+  <div id="quarto-search-results"></div>
   <header id="quarto-header" class="headroom fixed-top">
-  <nav class="quarto-secondary-nav">
-    <div class="container-fluid d-flex">
-      <button type="button" class="quarto-btn-toggle btn" data-bs-toggle="collapse" role="button" data-bs-target=".quarto-sidebar-collapse-item" aria-controls="quarto-sidebar" aria-expanded="false" aria-label="Alternar barra lateral" onclick="if (window.quartoToggleHeadroom) { window.quartoToggleHeadroom(); }">
-        <i class="bi bi-layout-text-sidebar-reverse"></i>
-      </button>
-        <nav class="quarto-page-breadcrumbs" aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item">Bloque III Interacción</li><li class="breadcrumb-item"><a href="../../pages/Bloque3/ReactIV.html">Semana 10</a></li><li class="breadcrumb-item"><a href="../../pages/Bloque3/ReactIV.html">React IV</a></li></ol></nav>
-        <a class="flex-grow-1" role="navigation" data-bs-toggle="collapse" data-bs-target=".quarto-sidebar-collapse-item" aria-controls="quarto-sidebar" aria-expanded="false" aria-label="Alternar barra lateral" onclick="if (window.quartoToggleHeadroom) { window.quartoToggleHeadroom(); }">      
+    <nav class="quarto-secondary-nav">
+      <div class="container-fluid d-flex">
+        <button type="button" class="quarto-btn-toggle btn" data-bs-toggle="collapse" role="button"
+          data-bs-target=".quarto-sidebar-collapse-item" aria-controls="quarto-sidebar" aria-expanded="false"
+          aria-label="Alternar barra lateral"
+          onclick="if (window.quartoToggleHeadroom) { window.quartoToggleHeadroom(); }">
+          <i class="bi bi-layout-text-sidebar-reverse"></i>
+        </button>
+        <nav class="quarto-page-breadcrumbs" aria-label="breadcrumb">
+          <ol class="breadcrumb">
+            <li class="breadcrumb-item">Bloque III Interacción</li>
+            <li class="breadcrumb-item"><a href="../../pages/Bloque3/ReactIV.html">Semana 10</a></li>
+            <li class="breadcrumb-item"><a href="../../pages/Bloque3/ReactIV.html">React IV</a></li>
+          </ol>
+        </nav>
+        <a class="flex-grow-1" role="navigation" data-bs-toggle="collapse"
+          data-bs-target=".quarto-sidebar-collapse-item" aria-controls="quarto-sidebar" aria-expanded="false"
+          aria-label="Alternar barra lateral"
+          onclick="if (window.quartoToggleHeadroom) { window.quartoToggleHeadroom(); }">
         </a>
-    </div>
-  </nav>
-</header>
-<!-- content -->
-<div id="quarto-content" class="quarto-container page-columns page-rows-contents page-layout-article">
-<!-- sidebar -->
-  <nav id="quarto-sidebar" class="sidebar collapse collapse-horizontal quarto-sidebar-collapse-item sidebar-navigation docked overflow-auto">
-    <div class="pt-lg-2 mt-2 text-center sidebar-header sidebar-header-stacked">
-      <a href="../../index.html" class="sidebar-logo-link">
-      <img src="../../public/logo-text.png" alt="" class="sidebar-logo light-content py-0 d-lg-inline d-none">
-      <img src="../../public/logo-text.png" alt="" class="sidebar-logo dark-content py-0 d-lg-inline d-none">
-      </a>
-    <div class="sidebar-title mb-0 py-0">
-      <a href="../../">Training Center SW</a> 
-        <div class="sidebar-tools-main">
-  <a href="" class="quarto-color-scheme-toggle quarto-navigation-tool  px-1" onclick="window.quartoToggleColorScheme(); return false;" title="Alternar modo oscuro"><i class="bi"></i></a>
-</div>
-    </div>
       </div>
-    <div class="sidebar-menu-container"> 
-    <ul class="list-unstyled mt-1">
-        <li class="sidebar-item">
-  <div class="sidebar-item-container"> 
-  <a href="../../index.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">Programa TC</span></a>
-  </div>
-</li>
-        <li class="sidebar-item sidebar-item-section">
-      <div class="sidebar-item-container"> 
-            <a href="../../pages/Bloque1/bloque1.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">Bloque I Introducción</span></a>
-          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-1" role="navigation" aria-expanded="false" aria-label="Alternar sección">
-            <i class="bi bi-chevron-right ms-2"></i>
-          </a> 
-      </div>
-      <ul id="quarto-sidebar-section-1" class="collapse list-unstyled sidebar-section depth1 ">  
-          <li class="sidebar-item sidebar-item-section">
-      <div class="sidebar-item-container"> 
-            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-2" role="navigation" aria-expanded="false">
- <span class="menu-text">Semana 0</span></a>
-          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-2" role="navigation" aria-expanded="false" aria-label="Alternar sección">
-            <i class="bi bi-chevron-right ms-2"></i>
-          </a> 
+    </nav>
+  </header>
+  <!-- content -->
+  <div id="quarto-content" class="quarto-container page-columns page-rows-contents page-layout-article">
+    <!-- sidebar -->
+    <nav id="quarto-sidebar"
+      class="sidebar collapse collapse-horizontal quarto-sidebar-collapse-item sidebar-navigation docked overflow-auto">
+      <div class="pt-lg-2 mt-2 text-center sidebar-header sidebar-header-stacked">
+        <a href="../../index.html" class="sidebar-logo-link">
+          <img src="../../public/logo-text.png" alt="" class="sidebar-logo light-content py-0 d-lg-inline d-none">
+          <img src="../../public/logo-text.png" alt="" class="sidebar-logo dark-content py-0 d-lg-inline d-none">
+        </a>
+        <div class="sidebar-title mb-0 py-0">
+          <a href="../../">Training Center SW</a>
+          <div class="sidebar-tools-main">
+            <a href="" class="quarto-color-scheme-toggle quarto-navigation-tool  px-1"
+              onclick="window.quartoToggleColorScheme(); return false;" title="Alternar modo oscuro"><i
+                class="bi"></i></a>
+          </div>
+        </div>
       </div>
-      <ul id="quarto-sidebar-section-2" class="collapse list-unstyled sidebar-section depth2 ">  
+      <div class="sidebar-menu-container">
+        <ul class="list-unstyled mt-1">
           <li class="sidebar-item">
-  <div class="sidebar-item-container"> 
-  <a href="../../pages/Bloque1/entorno.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">Preparación del entorno de trabajo</span></a>
-  </div>
-</li>
-      </ul>
-  </li>
+            <div class="sidebar-item-container">
+              <a href="../../index.html" class="sidebar-item-text sidebar-link">
+                <span class="menu-text">Programa TC</span></a>
+            </div>
+          </li>
           <li class="sidebar-item sidebar-item-section">
-      <div class="sidebar-item-container"> 
-            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-3" role="navigation" aria-expanded="false">
- <span class="menu-text">Semana 1</span></a>
-          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-3" role="navigation" aria-expanded="false" aria-label="Alternar sección">
-            <i class="bi bi-chevron-right ms-2"></i>
-          </a> 
-      </div>
-      <ul id="quarto-sidebar-section-3" class="collapse list-unstyled sidebar-section depth2 ">  
-          <li class="sidebar-item">
-  <div class="sidebar-item-container"> 
-  <a href="../../pages/Bloque1/html.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">HTML</span></a>
-  </div>
-</li>
-          <li class="sidebar-item">
-  <div class="sidebar-item-container"> 
-  <a href="../../pages/Bloque1/t1.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">T1: Web de HL I</span></a>
-  </div>
-</li>
-          <li class="sidebar-item">
-  <div class="sidebar-item-container"> 
-  <a href="../../pages/Bloque1/MAhtml2.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">MA: Mas HTML</span></a>
-  </div>
-</li>
-          <li class="sidebar-item">
-  <div class="sidebar-item-container"> 
-  <a href="../../pages/Bloque1/t1a.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">TA1: Mi CV I</span></a>
-  </div>
-</li>
-      </ul>
-  </li>
+            <div class="sidebar-item-container">
+              <a href="../../pages/Bloque1/bloque1.html" class="sidebar-item-text sidebar-link">
+                <span class="menu-text">Bloque I Introducción</span></a>
+              <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse"
+                data-bs-target="#quarto-sidebar-section-1" role="navigation" aria-expanded="false"
+                aria-label="Alternar sección">
+                <i class="bi bi-chevron-right ms-2"></i>
+              </a>
+            </div>
+            <ul id="quarto-sidebar-section-1" class="collapse list-unstyled sidebar-section depth1 ">
+              <li class="sidebar-item sidebar-item-section">
+                <div class="sidebar-item-container">
+                  <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse"
+                    data-bs-target="#quarto-sidebar-section-2" role="navigation" aria-expanded="false">
+                    <span class="menu-text">Semana 0</span></a>
+                  <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse"
+                    data-bs-target="#quarto-sidebar-section-2" role="navigation" aria-expanded="false"
+                    aria-label="Alternar sección">
+                    <i class="bi bi-chevron-right ms-2"></i>
+                  </a>
+                </div>
+                <ul id="quarto-sidebar-section-2" class="collapse list-unstyled sidebar-section depth2 ">
+                  <li class="sidebar-item">
+                    <div class="sidebar-item-container">
+                      <a href="../../pages/Bloque1/entorno.html" class="sidebar-item-text sidebar-link">
+                        <span class="menu-text">Preparación del entorno de trabajo</span></a>
+                    </div>
+                  </li>
+                </ul>
+              </li>
+              <li class="sidebar-item sidebar-item-section">
+                <div class="sidebar-item-container">
+                  <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse"
+                    data-bs-target="#quarto-sidebar-section-3" role="navigation" aria-expanded="false">
+                    <span class="menu-text">Semana 1</span></a>
+                  <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse"
+                    data-bs-target="#quarto-sidebar-section-3" role="navigation" aria-expanded="false"
+                    aria-label="Alternar sección">
+                    <i class="bi bi-chevron-right ms-2"></i>
+                  </a>
+                </div>
+                <ul id="quarto-sidebar-section-3" class="collapse list-unstyled sidebar-section depth2 ">
+                  <li class="sidebar-item">
+                    <div class="sidebar-item-container">
+                      <a href="../../pages/Bloque1/html.html" class="sidebar-item-text sidebar-link">
+                        <span class="menu-text">HTML</span></a>
+                    </div>
+                  </li>
+                  <li class="sidebar-item">
+                    <div class="sidebar-item-container">
+                      <a href="../../pages/Bloque1/t1.html" class="sidebar-item-text sidebar-link">
+                        <span class="menu-text">T1: Web de HL I</span></a>
+                    </div>
+                  </li>
+                  <li class="sidebar-item">
+                    <div class="sidebar-item-container">
+                      <a href="../../pages/Bloque1/MAhtml2.html" class="sidebar-item-text sidebar-link">
+                        <span class="menu-text">MA: Mas HTML</span></a>
+                    </div>
+                  </li>
+                  <li class="sidebar-item">
+                    <div class="sidebar-item-container">
+                      <a href="../../pages/Bloque1/t1a.html" class="sidebar-item-text sidebar-link">
+                        <span class="menu-text">TA1: Mi CV I</span></a>
+                    </div>
+                  </li>
+                </ul>
+              </li>
+              <li class="sidebar-item sidebar-item-section">
+                <div class="sidebar-item-container">
+                  <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse"
+                    data-bs-target="#quarto-sidebar-section-4" role="navigation" aria-expanded="false">
+                    <span class="menu-text">Semana 2</span></a>
+                  <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse"
+                    data-bs-target="#quarto-sidebar-section-4" role="navigation" aria-expanded="false"
+                    aria-label="Alternar sección">
+                    <i class="bi bi-chevron-right ms-2"></i>
+                  </a>
+                </div>
+                <ul id="quarto-sidebar-section-4" class="collapse list-unstyled sidebar-section depth2 ">
+                  <li class="sidebar-item">
+                    <div class="sidebar-item-container">
+                      <a href="../../pages/Bloque1/css.html" class="sidebar-item-text sidebar-link">
+                        <span class="menu-text">CSS</span></a>
+                    </div>
+                  </li>
+                  <li class="sidebar-item">
+                    <div class="sidebar-item-container">
+                      <a href="../../pages/Bloque1/t2.html" class="sidebar-item-text sidebar-link">
+                        <span class="menu-text">T2: Web de HL II</span></a>
+                    </div>
+                  </li>
+                  <li class="sidebar-item">
+                    <div class="sidebar-item-container">
+                      <a href="../../pages/Bloque1/MAcss.html" class="sidebar-item-text sidebar-link">
+                        <span class="menu-text">MA: Selectores y Pseudoselectores</span></a>
+                    </div>
+                  </li>
+                  <li class="sidebar-item">
+                    <div class="sidebar-item-container">
+                      <a href="../../pages/Bloque1/t2a.html" class="sidebar-item-text sidebar-link">
+                        <span class="menu-text">TA2: Mi CV II</span></a>
+                    </div>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </li>
           <li class="sidebar-item sidebar-item-section">
-      <div class="sidebar-item-container"> 
-            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-4" role="navigation" aria-expanded="false">
- <span class="menu-text">Semana 2</span></a>
-          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-4" role="navigation" aria-expanded="false" aria-label="Alternar sección">
-            <i class="bi bi-chevron-right ms-2"></i>
-          </a> 
-      </div>
-      <ul id="quarto-sidebar-section-4" class="collapse list-unstyled sidebar-section depth2 ">  
-          <li class="sidebar-item">
-  <div class="sidebar-item-container"> 
-  <a href="../../pages/Bloque1/css.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">CSS</span></a>
-  </div>
-</li>
-          <li class="sidebar-item">
-  <div class="sidebar-item-container"> 
-  <a href="../../pages/Bloque1/t2.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">T2: Web de HL II</span></a>
-  </div>
-</li>
-          <li class="sidebar-item">
-  <div class="sidebar-item-container"> 
-  <a href="../../pages/Bloque1/MAcss.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">MA: Selectores y Pseudoselectores</span></a>
-  </div>
-</li>
-          <li class="sidebar-item">
-  <div class="sidebar-item-container"> 
-  <a href="../../pages/Bloque1/t2a.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">TA2: Mi CV II</span></a>
-  </div>
-</li>
-      </ul>
-  </li>
-      </ul>
-  </li>
-        <li class="sidebar-item sidebar-item-section">
-      <div class="sidebar-item-container"> 
-            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-5" role="navigation" aria-expanded="false">
- <span class="menu-text">Bloque II Programación</span></a>
-          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-5" role="navigation" aria-expanded="false" aria-label="Alternar sección">
-            <i class="bi bi-chevron-right ms-2"></i>
-          </a> 
-      </div>
-      <ul id="quarto-sidebar-section-5" class="collapse list-unstyled sidebar-section depth1 ">  
+            <div class="sidebar-item-container">
+              <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse"
+                data-bs-target="#quarto-sidebar-section-5" role="navigation" aria-expanded="false">
+                <span class="menu-text">Bloque II Programación</span></a>
+              <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse"
+                data-bs-target="#quarto-sidebar-section-5" role="navigation" aria-expanded="false"
+                aria-label="Alternar sección">
+                <i class="bi bi-chevron-right ms-2"></i>
+              </a>
+            </div>
+            <ul id="quarto-sidebar-section-5" class="collapse list-unstyled sidebar-section depth1 ">
+              <li class="sidebar-item sidebar-item-section">
+                <div class="sidebar-item-container">
+                  <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse"
+                    data-bs-target="#quarto-sidebar-section-6" role="navigation" aria-expanded="false">
+                    <span class="menu-text">Repaso Intensivo</span></a>
+                  <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse"
+                    data-bs-target="#quarto-sidebar-section-6" role="navigation" aria-expanded="false"
+                    aria-label="Alternar sección">
+                    <i class="bi bi-chevron-right ms-2"></i>
+                  </a>
+                </div>
+                <ul id="quarto-sidebar-section-6" class="collapse list-unstyled sidebar-section depth2 ">
+                  <li class="sidebar-item">
+                    <div class="sidebar-item-container">
+                      <a href="../../pages/Bloque2/intensivo.html" class="sidebar-item-text sidebar-link">
+                        <span class="menu-text">Repaso Intensivo JS</span></a>
+                    </div>
+                  </li>
+                  <li class="sidebar-item">
+                    <div class="sidebar-item-container">
+                      <a href="../../pages/Bloque2/ti.html" class="sidebar-item-text sidebar-link">
+                        <span class="menu-text">TI: Ejercicios JS</span></a>
+                    </div>
+                  </li>
+                  <li class="sidebar-item">
+                    <div class="sidebar-item-container">
+                      <a href="../../pages/Bloque2/MAclases.html" class="sidebar-item-text sidebar-link">
+                        <span class="menu-text">MA: Clases ES6</span></a>
+                    </div>
+                  </li>
+                  <li class="sidebar-item">
+                    <div class="sidebar-item-container">
+                      <a href="../../pages/Bloque2/tia.html" class="sidebar-item-text sidebar-link">
+                        <span class="menu-text">TAI: La objetización de las personas</span></a>
+                    </div>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </li>
           <li class="sidebar-item sidebar-item-section">
-      <div class="sidebar-item-container"> 
-            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-6" role="navigation" aria-expanded="false">
- <span class="menu-text">Repaso Intensivo</span></a>
-          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-6" role="navigation" aria-expanded="false" aria-label="Alternar sección">
-            <i class="bi bi-chevron-right ms-2"></i>
-          </a> 
-      </div>
-      <ul id="quarto-sidebar-section-6" class="collapse list-unstyled sidebar-section depth2 ">  
-          <li class="sidebar-item">
-  <div class="sidebar-item-container"> 
-  <a href="../../pages/Bloque2/intensivo.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">Repaso Intensivo JS</span></a>
-  </div>
-</li>
-          <li class="sidebar-item">
-  <div class="sidebar-item-container"> 
-  <a href="../../pages/Bloque2/ti.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">TI: Ejercicios JS</span></a>
-  </div>
-</li>
-          <li class="sidebar-item">
-  <div class="sidebar-item-container"> 
-  <a href="../../pages/Bloque2/MAclases.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">MA: Clases ES6</span></a>
-  </div>
-</li>
-          <li class="sidebar-item">
-  <div class="sidebar-item-container"> 
-  <a href="../../pages/Bloque2/tia.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">TAI: La objetización de las personas</span></a>
-  </div>
-</li>
-      </ul>
-  </li>
-      </ul>
-  </li>
+            <div class="sidebar-item-container">
+              <a class="sidebar-item-text sidebar-link text-start" data-bs-toggle="collapse"
+                data-bs-target="#quarto-sidebar-section-7" role="navigation" aria-expanded="true">
+                <span class="menu-text">Bloque III Interacción</span></a>
+              <a class="sidebar-item-toggle text-start" data-bs-toggle="collapse"
+                data-bs-target="#quarto-sidebar-section-7" role="navigation" aria-expanded="true"
+                aria-label="Alternar sección">
+                <i class="bi bi-chevron-right ms-2"></i>
+              </a>
+            </div>
+            <ul id="quarto-sidebar-section-7" class="collapse list-unstyled sidebar-section depth1 show">
+              <li class="sidebar-item sidebar-item-section">
+                <div class="sidebar-item-container">
+                  <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse"
+                    data-bs-target="#quarto-sidebar-section-8" role="navigation" aria-expanded="false">
+                    <span class="menu-text">Semana 6</span></a>
+                  <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse"
+                    data-bs-target="#quarto-sidebar-section-8" role="navigation" aria-expanded="false"
+                    aria-label="Alternar sección">
+                    <i class="bi bi-chevron-right ms-2"></i>
+                  </a>
+                </div>
+                <ul id="quarto-sidebar-section-8" class="collapse list-unstyled sidebar-section depth2 ">
+                  <li class="sidebar-item">
+                    <div class="sidebar-item-container">
+                      <a href="../../pages/Bloque3/DOM.html" class="sidebar-item-text sidebar-link">
+                        <span class="menu-text">DOM</span></a>
+                    </div>
+                  </li>
+                  <li class="sidebar-item">
+                    <div class="sidebar-item-container">
+                      <a href="../../pages/Bloque3/t6.html" class="sidebar-item-text sidebar-link">
+                        <span class="menu-text">T6: Romancero Gitano I</span></a>
+                    </div>
+                  </li>
+                  <li class="sidebar-item">
+                    <div class="sidebar-item-container">
+                      <a href="../../pages/Bloque3/MAcss2.html" class="sidebar-item-text sidebar-link">
+                        <span class="menu-text">MA: CSS Flex y CSS</span></a>
+                    </div>
+                  </li>
+                </ul>
+              </li>
+              <li class="sidebar-item sidebar-item-section">
+                <div class="sidebar-item-container">
+                  <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse"
+                    data-bs-target="#quarto-sidebar-section-9" role="navigation" aria-expanded="false">
+                    <span class="menu-text">Semana 7</span></a>
+                  <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse"
+                    data-bs-target="#quarto-sidebar-section-9" role="navigation" aria-expanded="false"
+                    aria-label="Alternar sección">
+                    <i class="bi bi-chevron-right ms-2"></i>
+                  </a>
+                </div>
+                <ul id="quarto-sidebar-section-9" class="collapse list-unstyled sidebar-section depth2 ">
+                  <li class="sidebar-item">
+                    <div class="sidebar-item-container">
+                      <a href="../../pages/Bloque3/ReactI.html" class="sidebar-item-text sidebar-link">
+                        <span class="menu-text">React I</span></a>
+                    </div>
+                  </li>
+                  <li class="sidebar-item">
+                    <div class="sidebar-item-container">
+                      <a href="../../pages/Bloque3/ps.html" class="sidebar-item-text sidebar-link">
+                        <span class="menu-text">Proyecto Subsistema</span></a>
+                    </div>
+                  </li>
+                </ul>
+              </li>
+              <li class="sidebar-item sidebar-item-section">
+                <div class="sidebar-item-container">
+                  <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse"
+                    data-bs-target="#quarto-sidebar-section-10" role="navigation" aria-expanded="false">
+                    <span class="menu-text">Semana 9</span></a>
+                  <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse"
+                    data-bs-target="#quarto-sidebar-section-10" role="navigation" aria-expanded="false"
+                    aria-label="Alternar sección">
+                    <i class="bi bi-chevron-right ms-2"></i>
+                  </a>
+                </div>
+                <ul id="quarto-sidebar-section-10" class="collapse list-unstyled sidebar-section depth2 ">
+                  <li class="sidebar-item">
+                    <div class="sidebar-item-container">
+                      <a href="../../pages/Bloque3/Intermedio.html" class="sidebar-item-text sidebar-link">
+                        <span class="menu-text">React III</span></a>
+                    </div>
+                  </li>
+                  <li class="sidebar-item">
+                    <div class="sidebar-item-container">
+                      <a href="../../pages/Bloque3/MARef.html" class="sidebar-item-text sidebar-link">
+                        <span class="menu-text">MA: <em>Uncontrolled fields</em> y <code>useRef</code></span></a>
+                    </div>
+                  </li>
+                </ul>
+              </li>
+              <li class="sidebar-item sidebar-item-section">
+                <div class="sidebar-item-container">
+                  <a class="sidebar-item-text sidebar-link text-start" data-bs-toggle="collapse"
+                    data-bs-target="#quarto-sidebar-section-11" role="navigation" aria-expanded="true">
+                    <span class="menu-text">Semana 10</span></a>
+                  <a class="sidebar-item-toggle text-start" data-bs-toggle="collapse"
+                    data-bs-target="#quarto-sidebar-section-11" role="navigation" aria-expanded="true"
+                    aria-label="Alternar sección">
+                    <i class="bi bi-chevron-right ms-2"></i>
+                  </a>
+                </div>
+                <ul id="quarto-sidebar-section-11" class="collapse list-unstyled sidebar-section depth2 show">
+                  <li class="sidebar-item">
+                    <div class="sidebar-item-container">
+                      <a href="../../pages/Bloque3/ReactIV.html" class="sidebar-item-text sidebar-link active">
+                        <span class="menu-text">React IV</span></a>
+                    </div>
+                  </li>
+                  <<<<<<< HEAD <li class="sidebar-item">
+                    <div class="sidebar-item-container">
+                      <a href="../../pages/Bloque3/t10.html" class="sidebar-item-text sidebar-link">
+                        <span class="menu-text">T10: Quiz app!</span></a>
+                    </div>
+              </li>
+            </ul>
+          </li>
+          =======
+        </ul>
+        </li>
+        <li class="sidebar-item">
+          <span class="menu-text">Próximamente...</span>
+        </li>
+        >>>>>>> 8e10774 (feat: explicacion semana 10 (#4))
+        </ul>
+        </li>
         <li class="sidebar-item sidebar-item-section">
-      <div class="sidebar-item-container"> 
-            <a class="sidebar-item-text sidebar-link text-start" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-7" role="navigation" aria-expanded="true">
- <span class="menu-text">Bloque III Interacción</span></a>
-          <a class="sidebar-item-toggle text-start" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-7" role="navigation" aria-expanded="true" aria-label="Alternar sección">
-            <i class="bi bi-chevron-right ms-2"></i>
-          </a> 
-      </div>
-      <ul id="quarto-sidebar-section-7" class="collapse list-unstyled sidebar-section depth1 show">  
-          <li class="sidebar-item sidebar-item-section">
-      <div class="sidebar-item-container"> 
-            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-8" role="navigation" aria-expanded="false">
- <span class="menu-text">Semana 6</span></a>
-          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-8" role="navigation" aria-expanded="false" aria-label="Alternar sección">
-            <i class="bi bi-chevron-right ms-2"></i>
-          </a> 
-      </div>
-      <ul id="quarto-sidebar-section-8" class="collapse list-unstyled sidebar-section depth2 ">  
-          <li class="sidebar-item">
-  <div class="sidebar-item-container"> 
-  <a href="../../pages/Bloque3/DOM.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">DOM</span></a>
-  </div>
-</li>
-          <li class="sidebar-item">
-  <div class="sidebar-item-container"> 
-  <a href="../../pages/Bloque3/t6.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">T6: Romancero Gitano I</span></a>
-  </div>
-</li>
-          <li class="sidebar-item">
-  <div class="sidebar-item-container"> 
-  <a href="../../pages/Bloque3/MAcss2.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">MA: CSS Flex y CSS</span></a>
-  </div>
-</li>
-      </ul>
-  </li>
-          <li class="sidebar-item sidebar-item-section">
-      <div class="sidebar-item-container"> 
-            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-9" role="navigation" aria-expanded="false">
- <span class="menu-text">Semana 7</span></a>
-          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-9" role="navigation" aria-expanded="false" aria-label="Alternar sección">
-            <i class="bi bi-chevron-right ms-2"></i>
-          </a> 
-      </div>
-      <ul id="quarto-sidebar-section-9" class="collapse list-unstyled sidebar-section depth2 ">  
-          <li class="sidebar-item">
-  <div class="sidebar-item-container"> 
-  <a href="../../pages/Bloque3/ReactI.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">React I</span></a>
-  </div>
-</li>
-          <li class="sidebar-item">
-  <div class="sidebar-item-container"> 
-  <a href="../../pages/Bloque3/ps.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">Proyecto Subsistema</span></a>
-  </div>
-</li>
-      </ul>
-  </li>
-          <li class="sidebar-item sidebar-item-section">
-      <div class="sidebar-item-container"> 
-            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-10" role="navigation" aria-expanded="false">
- <span class="menu-text">Semana 9</span></a>
-          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-10" role="navigation" aria-expanded="false" aria-label="Alternar sección">
-            <i class="bi bi-chevron-right ms-2"></i>
-          </a> 
+          <div class="sidebar-item-container">
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse"
+              data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false">
+              <span class="menu-text">Bloque IV Comunicación</span></a>
+            <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse"
+              data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false"
+              aria-label="Alternar sección">
+              <i class="bi bi-chevron-right ms-2"></i>
+            </a>
+          </div>
+          <ul id="quarto-sidebar-section-12" class="collapse list-unstyled sidebar-section depth1 ">
+            <li class="sidebar-item sidebar-item-section">
+              <div class="sidebar-item-container">
+                <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse"
+                  data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false">
+                  <span class="menu-text">Semana 11</span></a>
+                <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse"
+                  data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false"
+                  aria-label="Alternar sección">
+                  <i class="bi bi-chevron-right ms-2"></i>
+                </a>
+              </div>
+              <ul id="quarto-sidebar-section-13" class="collapse list-unstyled sidebar-section depth2 ">
+                <li class="sidebar-item">
+                  <div class="sidebar-item-container">
+                    <a href="../../pages/Bloque4/protocolos.html" class="sidebar-item-text sidebar-link">
+                      <span class="menu-text">Protocolos de Comunicación</span></a>
+                  </div>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+        <li class="sidebar-item">
+          <div class="sidebar-item-container">
+            <a href="../../pages/rubric.html" class="sidebar-item-text sidebar-link">
+              <span class="menu-text">Rúbrica de evaluación</span></a>
+          </div>
+        </li>
+        </ul>
       </div>
-      <ul id="quarto-sidebar-section-10" class="collapse list-unstyled sidebar-section depth2 ">  
-          <li class="sidebar-item">
-  <div class="sidebar-item-container"> 
-  <a href="../../pages/Bloque3/Intermedio.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">React III</span></a>
-  </div>
-</li>
-          <li class="sidebar-item">
-  <div class="sidebar-item-container"> 
-  <a href="../../pages/Bloque3/MARef.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">MA: <em>Uncontrolled fields</em> y <code>useRef</code></span></a>
-  </div>
-</li>
-      </ul>
-  </li>
-          <li class="sidebar-item sidebar-item-section">
-      <div class="sidebar-item-container"> 
-            <a class="sidebar-item-text sidebar-link text-start" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-11" role="navigation" aria-expanded="true">
- <span class="menu-text">Semana 10</span></a>
-          <a class="sidebar-item-toggle text-start" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-11" role="navigation" aria-expanded="true" aria-label="Alternar sección">
-            <i class="bi bi-chevron-right ms-2"></i>
-          </a> 
+      <div class="quarto-sidebar-footer">
+        <div class="sidebar-footer-item">
+          <p><img src="https://i.imgur.com/jbGUd7N.png" class="img-fluid"><br><br><br> © Javier Ribal del Río <br> 2025
+            - Hyperloop UPV</p>
+        </div>
       </div>
-      <ul id="quarto-sidebar-section-11" class="collapse list-unstyled sidebar-section depth2 show">  
-          <li class="sidebar-item">
-  <div class="sidebar-item-container"> 
-  <a href="../../pages/Bloque3/ReactIV.html" class="sidebar-item-text sidebar-link active">
- <span class="menu-text">React IV</span></a>
-  </div>
-</li>
-<<<<<<< HEAD
-          <li class="sidebar-item">
-  <div class="sidebar-item-container"> 
-  <a href="../../pages/Bloque3/t10.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">T10: Quiz app!</span></a>
-  </div>
-</li>
-      </ul>
-  </li>
-=======
-      </ul>
-  </li>
-          <li class="sidebar-item">
- <span class="menu-text">Próximamente...</span>
-  </li>
->>>>>>> 8e10774 (feat: explicacion semana 10 (#4))
-      </ul>
-  </li>
-        <li class="sidebar-item sidebar-item-section">
-      <span class="sidebar-item-text sidebar-link text-start">
- <span class="menu-text">Bloque IV Comunicación</span></span>
-  </li>
-        <li class="sidebar-item">
-  <div class="sidebar-item-container"> 
-  <a href="../../pages/rubric.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">Rúbrica de evaluación</span></a>
-  </div>
-</li>
-    </ul>
-    </div>
-<div class="quarto-sidebar-footer"><div class="sidebar-footer-item">
-<p><img src="https://i.imgur.com/jbGUd7N.png" class="img-fluid"><br><br><br> © Javier Ribal del Río <br> 2025 - Hyperloop UPV</p>
-</div></div></nav>
-<div id="quarto-sidebar-glass" class="quarto-sidebar-collapse-item" data-bs-toggle="collapse" data-bs-target=".quarto-sidebar-collapse-item"></div>
-<!-- margin-sidebar -->
+    </nav>
+    <div id="quarto-sidebar-glass" class="quarto-sidebar-collapse-item" data-bs-toggle="collapse"
+      data-bs-target=".quarto-sidebar-collapse-item"></div>
+    <!-- margin-sidebar -->
     <div id="quarto-margin-sidebar" class="sidebar margin-sidebar">
-        <nav id="TOC" role="doc-toc" class="toc-active">
-    <h2 id="toc-title">En esta página</h2>
-   
-  <ul>
-  <li><a href="#ecosistema-node" id="toc-ecosistema-node" class="nav-link active" data-scroll-target="#ecosistema-node">Ecosistema Node</a></li>
-  <li><a href="#npm" id="toc-npm" class="nav-link" data-scroll-target="#npm">npm</a>
-  <ul>
-  <li><a href="#instalación-de-paquetes" id="toc-instalación-de-paquetes" class="nav-link" data-scroll-target="#instalación-de-paquetes">Instalación de paquetes</a></li>
-  </ul></li>
-  <li><a href="#react-router" id="toc-react-router" class="nav-link" data-scroll-target="#react-router">React Router</a>
-  <ul>
-  <li><a href="#componentes-principales-de-react-router" id="toc-componentes-principales-de-react-router" class="nav-link" data-scroll-target="#componentes-principales-de-react-router">Componentes principales de React Router</a></li>
-  <li><a href="#navegación" id="toc-navegación" class="nav-link" data-scroll-target="#navegación">Navegación</a></li>
-  <li><a href="#parámetros-dinámicos" id="toc-parámetros-dinámicos" class="nav-link" data-scroll-target="#parámetros-dinámicos">Parámetros dinámicos</a>
-  <ul class="collapse">
-  <li><a href="#useparams" id="toc-useparams" class="nav-link" data-scroll-target="#useparams">useParams</a></li>
-  </ul></li>
-  </ul></li>
-  <li><a href="#context-api" id="toc-context-api" class="nav-link" data-scroll-target="#context-api">Context API</a>
-  <ul>
-  <li><a href="#context" id="toc-context" class="nav-link" data-scroll-target="#context">Context</a>
-  <ul class="collapse">
-  <li><a href="#crear-un-contexto" id="toc-crear-un-contexto" class="nav-link" data-scroll-target="#crear-un-contexto">Crear un contexto</a></li>
-  <li><a href="#provider" id="toc-provider" class="nav-link" data-scroll-target="#provider">Provider</a></li>
-  <li><a href="#consumir-el-contexto" id="toc-consumir-el-contexto" class="nav-link" data-scroll-target="#consumir-el-contexto">Consumir el contexto</a></li>
-  <li><a href="#ejemplo-completo" id="toc-ejemplo-completo" class="nav-link" data-scroll-target="#ejemplo-completo">Ejemplo completo</a></li>
-  </ul></li>
-  </ul></li>
-  </ul>
-<div class="quarto-alternate-formats"><h2>Otros formatos</h2><ul><li><a href="ReactIV.pdf"><i class="bi bi-file-pdf"></i>PDF</a></li><li><a href="presentacion-reactIV.html"><i class="bi bi-file-slides"></i>Presentación</a></li></ul></div></nav>
+      <nav id="TOC" role="doc-toc" class="toc-active">
+        <h2 id="toc-title">En esta página</h2>
+
+        <ul>
+          <li><a href="#ecosistema-node" id="toc-ecosistema-node" class="nav-link active"
+              data-scroll-target="#ecosistema-node">Ecosistema Node</a></li>
+          <li><a href="#npm" id="toc-npm" class="nav-link" data-scroll-target="#npm">npm</a>
+            <ul>
+              <li><a href="#instalación-de-paquetes" id="toc-instalación-de-paquetes" class="nav-link"
+                  data-scroll-target="#instalación-de-paquetes">Instalación de paquetes</a></li>
+            </ul>
+          </li>
+          <li><a href="#react-router" id="toc-react-router" class="nav-link" data-scroll-target="#react-router">React
+              Router</a>
+            <ul>
+              <li><a href="#componentes-principales-de-react-router" id="toc-componentes-principales-de-react-router"
+                  class="nav-link" data-scroll-target="#componentes-principales-de-react-router">Componentes principales
+                  de React Router</a></li>
+              <li><a href="#navegación" id="toc-navegación" class="nav-link"
+                  data-scroll-target="#navegación">Navegación</a></li>
+              <li><a href="#parámetros-dinámicos" id="toc-parámetros-dinámicos" class="nav-link"
+                  data-scroll-target="#parámetros-dinámicos">Parámetros dinámicos</a>
+                <ul class="collapse">
+                  <li><a href="#useparams" id="toc-useparams" class="nav-link"
+                      data-scroll-target="#useparams">useParams</a></li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+          <li><a href="#context-api" id="toc-context-api" class="nav-link" data-scroll-target="#context-api">Context
+              API</a>
+            <ul>
+              <li><a href="#context" id="toc-context" class="nav-link" data-scroll-target="#context">Context</a>
+                <ul class="collapse">
+                  <li><a href="#crear-un-contexto" id="toc-crear-un-contexto" class="nav-link"
+                      data-scroll-target="#crear-un-contexto">Crear un contexto</a></li>
+                  <li><a href="#provider" id="toc-provider" class="nav-link" data-scroll-target="#provider">Provider</a>
+                  </li>
+                  <li><a href="#consumir-el-contexto" id="toc-consumir-el-contexto" class="nav-link"
+                      data-scroll-target="#consumir-el-contexto">Consumir el contexto</a></li>
+                  <li><a href="#ejemplo-completo" id="toc-ejemplo-completo" class="nav-link"
+                      data-scroll-target="#ejemplo-completo">Ejemplo completo</a></li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+        </ul>
+        <div class="quarto-alternate-formats">
+          <h2>Otros formatos</h2>
+          <ul>
+            <li><a href="ReactIV.pdf"><i class="bi bi-file-pdf"></i>PDF</a></li>
+            <li><a href="presentacion-reactIV.html"><i class="bi bi-file-slides"></i>Presentación</a></li>
+          </ul>
+        </div>
+      </nav>
     </div>
-<!-- main -->
-<main class="content" id="quarto-document-content">
+    <!-- main -->
+    <main class="content" id="quarto-document-content">
 
 
-<header id="title-block-header" class="quarto-title-block default"><nav class="quarto-page-breadcrumbs quarto-title-breadcrumbs d-none d-lg-block" aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item">Bloque III Interacción</li><li class="breadcrumb-item"><a href="../../pages/Bloque3/ReactIV.html">Semana 10</a></li><li class="breadcrumb-item"><a href="../../pages/Bloque3/ReactIV.html">React IV</a></li></ol></nav>
-<div class="quarto-title">
-<h1 class="title">React IV</h1>
-<p class="subtitle lead">Ecosistema npm, <em>React Router</em>, <code>useContext</code></p>
-</div>
+      <header id="title-block-header" class="quarto-title-block default">
+        <nav class="quarto-page-breadcrumbs quarto-title-breadcrumbs d-none d-lg-block" aria-label="breadcrumb">
+          <ol class="breadcrumb">
+            <li class="breadcrumb-item">Bloque III Interacción</li>
+            <li class="breadcrumb-item"><a href="../../pages/Bloque3/ReactIV.html">Semana 10</a></li>
+            <li class="breadcrumb-item"><a href="../../pages/Bloque3/ReactIV.html">React IV</a></li>
+          </ol>
+        </nav>
+        <div class="quarto-title">
+          <h1 class="title">React IV</h1>
+          <p class="subtitle lead">Ecosistema npm, <em>React Router</em>, <code>useContext</code></p>
+        </div>
 
 
 
-<div class="quarto-title-meta">
+        <div class="quarto-title-meta">
 
-    <div>
-    <div class="quarto-title-meta-heading">Autor/a</div>
-    <div class="quarto-title-meta-contents">
-             <p>Javier Ribal del Río </p>
+          <div>
+            <div class="quarto-title-meta-heading">Autor/a</div>
+            <div class="quarto-title-meta-contents">
+              <p>Javier Ribal del Río </p>
+            </div>
           </div>
-  </div>
-    
-    <div>
-    <div class="quarto-title-meta-heading">Fecha de publicación</div>
-    <div class="quarto-title-meta-contents">
-      <p class="date">6 de marzo de 2026</p>
-    </div>
-  </div>
-  
-    <div>
-    <div class="quarto-title-meta-heading">Fecha de última modificación</div>
-    <div class="quarto-title-meta-contents">
-<<<<<<< HEAD
-      <p class="date-modified">7 de marzo de 2026</p>
-=======
-      <p class="date-modified">4 de marzo de 2026</p>
->>>>>>> 8e10774 (feat: explicacion semana 10 (#4))
-    </div>
-  </div>
-    
-  </div>
-  
+
+          <div>
+            <div class="quarto-title-meta-heading">Fecha de publicación</div>
+            <div class="quarto-title-meta-contents">
+              <p class="date">6 de marzo de 2026</p>
+            </div>
+          </div>
+
+          <div>
+            <div class="quarto-title-meta-heading">Fecha de última modificación</div>
+            <div class="quarto-title-meta-contents">
+              <<<<<<< HEAD <p class="date-modified">7 de marzo de 2026</p>
+                =======
+                <p class="date-modified">4 de marzo de 2026</p>
+                >>>>>>> 8e10774 (feat: explicacion semana 10 (#4))
+            </div>
+          </div>
+
+        </div>
 
 
-</header>
 
+      </header>
 
-<p><strong>Contenido</strong></p>
-<ul>
-<li>Ecosistema React y paquetes npm</li>
-<li>Librerías externas</li>
-<li>React Router</li>
-<li>Parámetros de URL</li>
-<li><code>useContext</code></li>
-</ul>
-<section id="ecosistema-node" class="level2">
-<h2 class="anchored" data-anchor-id="ecosistema-node">Ecosistema Node</h2>
-<p>Hasta ahora hemos trabajado únicamente con <strong>React y JavaScript</strong>.</p>
-<p>Sin embargo, en el desarrollo real de aplicaciones es muy común utilizar <strong>librerías externas</strong>, para ello podemos recurrir <code>Node.JS</code>.</p>
-<p>React está diseñado para funcionar dentro de un <strong>ecosistema de paquetes</strong>.</p>
-<p>Ejemplos habituales:</p>
-<ul>
-<li>React Router → navegación</li>
-<li>Axios → peticiones HTTP</li>
-<li>Chart.js → gráficas</li>
-<li>Zustand / Redux → gestión de estado</li>
-<li>Librerías de UI: Tailwind, Bootstrap, Booswatch</li>
-</ul>
-</section>
-<section id="npm" class="level2">
-<h2 class="anchored" data-anchor-id="npm">npm</h2>
-<p>npm (<strong>Node Package Manager</strong>) es el sistema que permite instalar y gestionar librerías de JavaScript. Como su nombre indica, está desarrollado por Node.JS</p>
-<p>Cada proyecto tiene un archivo:</p>
-<pre><code>package.json</code></pre>
-<p>En este archivo se registran las <strong>dependencias del proyecto</strong>.</p>
-<p>Ejemplo:</p>
-<div class="code-copy-outer-scaffold"><div class="sourceCode" id="cb2"><pre class="sourceCode json code-with-copy"><code class="sourceCode json"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="fu">{</span></span>
+
+      <p><strong>Contenido</strong></p>
+      <ul>
+        <li>Ecosistema React y paquetes npm</li>
+        <li>Librerías externas</li>
+        <li>React Router</li>
+        <li>Parámetros de URL</li>
+        <li><code>useContext</code></li>
+      </ul>
+      <section id="ecosistema-node" class="level2">
+        <h2 class="anchored" data-anchor-id="ecosistema-node">Ecosistema Node</h2>
+        <p>Hasta ahora hemos trabajado únicamente con <strong>React y JavaScript</strong>.</p>
+        <p>Sin embargo, en el desarrollo real de aplicaciones es muy común utilizar <strong>librerías externas</strong>,
+          para ello podemos recurrir <code>Node.JS</code>.</p>
+        <p>React está diseñado para funcionar dentro de un <strong>ecosistema de paquetes</strong>.</p>
+        <p>Ejemplos habituales:</p>
+        <ul>
+          <li>React Router → navegación</li>
+          <li>Axios → peticiones HTTP</li>
+          <li>Chart.js → gráficas</li>
+          <li>Zustand / Redux → gestión de estado</li>
+          <li>Librerías de UI: Tailwind, Bootstrap, Booswatch</li>
+        </ul>
+      </section>
+      <section id="npm" class="level2">
+        <h2 class="anchored" data-anchor-id="npm">npm</h2>
+        <p>npm (<strong>Node Package Manager</strong>) es el sistema que permite instalar y gestionar librerías de
+          JavaScript. Como su nombre indica, está desarrollado por Node.JS</p>
+        <p>Cada proyecto tiene un archivo:</p>
+        <pre><code>package.json</code></pre>
+        <p>En este archivo se registran las <strong>dependencias del proyecto</strong>.</p>
+        <p>Ejemplo:</p>
+        <div class="code-copy-outer-scaffold">
+          <div class="sourceCode" id="cb2">
+            <pre class="sourceCode json code-with-copy"><code class="sourceCode json"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="fu">{</span></span>
 <span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a>  <span class="dt">"dependencies"</span><span class="fu">:</span> <span class="fu">{</span></span>
 <span id="cb2-3"><a href="#cb2-3" aria-hidden="true" tabindex="-1"></a>    <span class="dt">"react"</span><span class="fu">:</span> <span class="st">"^18.0.0"</span><span class="fu">,</span></span>
 <span id="cb2-4"><a href="#cb2-4" aria-hidden="true" tabindex="-1"></a>    <span class="dt">"react-router-dom"</span><span class="fu">:</span> <span class="st">"^6.0.0"</span></span>
 <span id="cb2-5"><a href="#cb2-5" aria-hidden="true" tabindex="-1"></a>  <span class="fu">}</span></span>
-<span id="cb2-6"><a href="#cb2-6" aria-hidden="true" tabindex="-1"></a><span class="fu">}</span></span></code></pre></div><button title="Copiar al portapapeles" class="code-copy-button"><i class="bi"></i></button></div>
-<section id="instalación-de-paquetes" class="level3">
-<h3 class="anchored" data-anchor-id="instalación-de-paquetes">Instalación de paquetes</h3>
-<p>Las librerías se instalan desde la terminal.</p>
-<div class="code-copy-outer-scaffold"><div class="sourceCode" id="cb3"><pre class="sourceCode bash code-with-copy"><code class="sourceCode bash"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="ex">npm</span> install react-router-dom</span></code></pre></div><button title="Copiar al portapapeles" class="code-copy-button"><i class="bi"></i></button></div>
-<p>Esto hace tres cosas:</p>
-<ol type="1">
-<li>Descarga el paquete</li>
-<li>Lo guarda en <code>node_modules</code> (capreta donde se guardan las librerías externas)</li>
-<li>Añade la dependencia en <code>package.json</code></li>
-</ol>
-</section>
-</section>
-<section id="react-router" class="level2">
-<h2 class="anchored" data-anchor-id="react-router">React Router</h2>
-<p>En una aplicación web tradicional cada enlace carga <strong>una página nueva</strong>.</p>
-<p>En React normalmente trabajamos con <strong>Single Page Applications (SPA)</strong>.</p>
-<p>En una SPA:</p>
-<ul>
-<li>el navegador no recarga la página</li>
-<li>React cambia los componentes que se muestran</li>
-</ul>
-<p>Para gestionar esto utilizamos <strong>React Router</strong>.</p>
-<p><em>Realmente es la misma página, solo que el usuario lo percibe como distintas páginas</em></p>
-<p>El usuario percibirá que el sitio web está divido en diferentes subpáginas</p>
-<ul>
-<li><code>/</code></li>
-<li><code>pokemons</code></li>
-<li><code>pokemons/pikachu</code></li>
-</ul>
-<section id="componentes-principales-de-react-router" class="level3">
-<h3 class="anchored" data-anchor-id="componentes-principales-de-react-router">Componentes principales de React Router</h3>
-<p>Los elementos fundamentales son:</p>
-<ul>
-<li><code>BrowserRouter</code></li>
-<li><code>Routes</code></li>
-<li><code>Route</code></li>
-<li><code>Link</code></li>
-</ul>
-<p>Ejemplo básico:</p>
-<div class="code-copy-outer-scaffold"><div class="sourceCode" id="cb4"><pre class="sourceCode numberSource jsx html number-lines code-with-copy"><code class="sourceCode javascriptreact"><span id="cb4-1"><a href="#cb4-1"></a><span class="im">import</span> { BrowserRouter<span class="op">,</span> Routes<span class="op">,</span> Route } <span class="im">from</span> <span class="st">"react-router-dom"</span><span class="op">;</span></span>
+<span id="cb2-6"><a href="#cb2-6" aria-hidden="true" tabindex="-1"></a><span class="fu">}</span></span></code></pre>
+          </div><button title="Copiar al portapapeles" class="code-copy-button"><i class="bi"></i></button>
+        </div>
+        <section id="instalación-de-paquetes" class="level3">
+          <h3 class="anchored" data-anchor-id="instalación-de-paquetes">Instalación de paquetes</h3>
+          <p>Las librerías se instalan desde la terminal.</p>
+          <div class="code-copy-outer-scaffold">
+            <div class="sourceCode" id="cb3">
+              <pre
+                class="sourceCode bash code-with-copy"><code class="sourceCode bash"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="ex">npm</span> install react-router-dom</span></code></pre>
+            </div><button title="Copiar al portapapeles" class="code-copy-button"><i class="bi"></i></button>
+          </div>
+          <p>Esto hace tres cosas:</p>
+          <ol type="1">
+            <li>Descarga el paquete</li>
+            <li>Lo guarda en <code>node_modules</code> (capreta donde se guardan las librerías externas)</li>
+            <li>Añade la dependencia en <code>package.json</code></li>
+          </ol>
+        </section>
+      </section>
+      <section id="react-router" class="level2">
+        <h2 class="anchored" data-anchor-id="react-router">React Router</h2>
+        <p>En una aplicación web tradicional cada enlace carga <strong>una página nueva</strong>.</p>
+        <p>En React normalmente trabajamos con <strong>Single Page Applications (SPA)</strong>.</p>
+        <p>En una SPA:</p>
+        <ul>
+          <li>el navegador no recarga la página</li>
+          <li>React cambia los componentes que se muestran</li>
+        </ul>
+        <p>Para gestionar esto utilizamos <strong>React Router</strong>.</p>
+        <p><em>Realmente es la misma página, solo que el usuario lo percibe como distintas páginas</em></p>
+        <p>El usuario percibirá que el sitio web está divido en diferentes subpáginas</p>
+        <ul>
+          <li><code>/</code></li>
+          <li><code>pokemons</code></li>
+          <li><code>pokemons/pikachu</code></li>
+        </ul>
+        <section id="componentes-principales-de-react-router" class="level3">
+          <h3 class="anchored" data-anchor-id="componentes-principales-de-react-router">Componentes principales de React
+            Router</h3>
+          <p>Los elementos fundamentales son:</p>
+          <ul>
+            <li><code>BrowserRouter</code></li>
+            <li><code>Routes</code></li>
+            <li><code>Route</code></li>
+            <li><code>Link</code></li>
+          </ul>
+          <p>Ejemplo básico:</p>
+          <div class="code-copy-outer-scaffold">
+            <div class="sourceCode" id="cb4">
+              <pre class="sourceCode numberSource jsx html number-lines code-with-copy"><code class="sourceCode javascriptreact"><span id="cb4-1"><a href="#cb4-1"></a><span class="im">import</span> { BrowserRouter<span class="op">,</span> Routes<span class="op">,</span> Route } <span class="im">from</span> <span class="st">"react-router-dom"</span><span class="op">;</span></span>
 <span id="cb4-2"><a href="#cb4-2"></a></span>
 <span id="cb4-3"><a href="#cb4-3"></a><span class="kw">function</span> <span class="fu">App</span>() {</span>
 <span id="cb4-4"><a href="#cb4-4"></a>  <span class="cf">return</span> (</span>
@@ -760,54 +976,70 @@ <h3 class="anchored" data-anchor-id="componentes-principales-de-react-router">Co
 <span id="cb4-14"><a href="#cb4-14"></a></span>
 <span id="cb4-15"><a href="#cb4-15"></a>    <span class="fu">&lt;/BrowserRouter&gt;</span></span>
 <span id="cb4-16"><a href="#cb4-16"></a>  )<span class="op">;</span></span>
-<span id="cb4-17"><a href="#cb4-17"></a>}</span></code></pre></div><button title="Copiar al portapapeles" class="code-copy-button"><i class="bi"></i></button></div>
-<p><strong>Elementos del código</strong></p>
-<ul>
-<li><strong><code>BrowserRouter</code></strong><br>
-Es el componente que activa el sistema de navegación de React Router. Utiliza la API de historial del navegador para cambiar la URL sin recargar la página.</li>
-<li><strong><code>Routes</code></strong><br>
-Es el contenedor donde se definen todas las rutas de la aplicación. React Router examina las rutas dentro de este componente para decidir qué componente mostrar.</li>
-<li><strong><code>Route</code></strong><br>
-Define una ruta concreta de la aplicación.</li>
-</ul>
-<ul>
-<li><strong><code>path</code></strong><br>
-Indica la URL que activa la ruta.<br>
-Ejemplo: <code>/</code> corresponde a la página principal.</li>
-<li><strong><code>element</code></strong><br>
-Es el componente de React que se renderiza cuando la URL coincide con el <code>path</code>.</li>
-<li><strong><code>&lt;Home /&gt;</code></strong><br>
-Componente que se muestra cuando el usuario accede a la ruta <code>/</code>.</li>
-<li><strong><code>&lt;PokemonList /&gt;</code></strong><br>
-Componente que se muestra cuando el usuario accede a la ruta <code>/pokemons</code>.</li>
-</ul>
-</section>
-<section id="navegación" class="level3">
-<h3 class="anchored" data-anchor-id="navegación">Navegación</h3>
-<p>Para navegar entre páginas utilizamos el componente <code>Link</code>.</p>
-<div class="code-copy-outer-scaffold"><div class="sourceCode" id="cb5"><pre class="sourceCode jsx code-with-copy"><code class="sourceCode javascriptreact"><span id="cb5-1"><a href="#cb5-1" aria-hidden="true" tabindex="-1"></a><span class="im">import</span> { Link } <span class="im">from</span> <span class="st">"react-router-dom"</span><span class="op">;</span></span>
+<span id="cb4-17"><a href="#cb4-17"></a>}</span></code></pre>
+            </div><button title="Copiar al portapapeles" class="code-copy-button"><i class="bi"></i></button>
+          </div>
+          <p><strong>Elementos del código</strong></p>
+          <ul>
+            <li><strong><code>BrowserRouter</code></strong><br>
+              Es el componente que activa el sistema de navegación de React Router. Utiliza la API de historial del
+              navegador para cambiar la URL sin recargar la página.</li>
+            <li><strong><code>Routes</code></strong><br>
+              Es el contenedor donde se definen todas las rutas de la aplicación. React Router examina las rutas dentro
+              de este componente para decidir qué componente mostrar.</li>
+            <li><strong><code>Route</code></strong><br>
+              Define una ruta concreta de la aplicación.</li>
+          </ul>
+          <ul>
+            <li><strong><code>path</code></strong><br>
+              Indica la URL que activa la ruta.<br>
+              Ejemplo: <code>/</code> corresponde a la página principal.</li>
+            <li><strong><code>element</code></strong><br>
+              Es el componente de React que se renderiza cuando la URL coincide con el <code>path</code>.</li>
+            <li><strong><code>&lt;Home /&gt;</code></strong><br>
+              Componente que se muestra cuando el usuario accede a la ruta <code>/</code>.</li>
+            <li><strong><code>&lt;PokemonList /&gt;</code></strong><br>
+              Componente que se muestra cuando el usuario accede a la ruta <code>/pokemons</code>.</li>
+          </ul>
+        </section>
+        <section id="navegación" class="level3">
+          <h3 class="anchored" data-anchor-id="navegación">Navegación</h3>
+          <p>Para navegar entre páginas utilizamos el componente <code>Link</code>.</p>
+          <div class="code-copy-outer-scaffold">
+            <div class="sourceCode" id="cb5">
+              <pre
+                class="sourceCode jsx code-with-copy"><code class="sourceCode javascriptreact"><span id="cb5-1"><a href="#cb5-1" aria-hidden="true" tabindex="-1"></a><span class="im">import</span> { Link } <span class="im">from</span> <span class="st">"react-router-dom"</span><span class="op">;</span></span>
 <span id="cb5-2"><a href="#cb5-2" aria-hidden="true" tabindex="-1"></a></span>
 <span id="cb5-3"><a href="#cb5-3" aria-hidden="true" tabindex="-1"></a><span class="fu">&lt;Link</span> <span class="ot">to</span><span class="op">=</span><span class="st">"/"</span><span class="fu">&gt;</span>Inicio<span class="fu">&lt;/Link&gt;</span></span>
 <span id="cb5-4"><a href="#cb5-4" aria-hidden="true" tabindex="-1"></a></span>
-<span id="cb5-5"><a href="#cb5-5" aria-hidden="true" tabindex="-1"></a><span class="fu">&lt;Link</span> <span class="ot">to</span><span class="op">=</span><span class="st">"/pokemon"</span><span class="fu">&gt;</span>Pokemon<span class="fu">&lt;/Link&gt;</span></span></code></pre></div><button title="Copiar al portapapeles" class="code-copy-button"><i class="bi"></i></button></div>
-<p>A diferencia de <code>&lt;a&gt;</code>:</p>
-<ul>
-<li><strong>no recarga la página</strong></li>
-<li>React cambia el componente visible</li>
-</ul>
-</section>
-<section id="parámetros-dinámicos" class="level3">
-<h3 class="anchored" data-anchor-id="parámetros-dinámicos">Parámetros dinámicos</h3>
-<p>Podemos crear rutas dinámicas.</p>
-<p>Ejemplo:</p>
-<pre><code>/pokemon/25
+<span id="cb5-5"><a href="#cb5-5" aria-hidden="true" tabindex="-1"></a><span class="fu">&lt;Link</span> <span class="ot">to</span><span class="op">=</span><span class="st">"/pokemon"</span><span class="fu">&gt;</span>Pokemon<span class="fu">&lt;/Link&gt;</span></span></code></pre>
+            </div><button title="Copiar al portapapeles" class="code-copy-button"><i class="bi"></i></button>
+          </div>
+          <p>A diferencia de <code>&lt;a&gt;</code>:</p>
+          <ul>
+            <li><strong>no recarga la página</strong></li>
+            <li>React cambia el componente visible</li>
+          </ul>
+        </section>
+        <section id="parámetros-dinámicos" class="level3">
+          <h3 class="anchored" data-anchor-id="parámetros-dinámicos">Parámetros dinámicos</h3>
+          <p>Podemos crear rutas dinámicas.</p>
+          <p>Ejemplo:</p>
+          <pre><code>/pokemon/25
 /pokemon/7</code></pre>
-<p>Definición de la ruta:</p>
-<div class="code-copy-outer-scaffold"><div class="sourceCode" id="cb7"><pre class="sourceCode jsx code-with-copy"><code class="sourceCode javascriptreact"><span id="cb7-1"><a href="#cb7-1" aria-hidden="true" tabindex="-1"></a><span class="fu">&lt;Route</span> <span class="ot">path</span><span class="op">=</span><span class="st">"/pokemon/:id"</span> <span class="ot">element</span><span class="op">=</span><span class="va">{</span><span class="fu">&lt;PokemonDetail</span> <span class="fu">/&gt;</span><span class="va">}</span> <span class="fu">/&gt;</span></span></code></pre></div><button title="Copiar al portapapeles" class="code-copy-button"><i class="bi"></i></button></div>
-<section id="useparams" class="level4">
-<h4 class="anchored" data-anchor-id="useparams">useParams</h4>
-<p>Para acceder al parámetro utilizamos el hook <code>useParams</code> de <em>React Router</em>.</p>
-<div class="code-copy-outer-scaffold"><div class="sourceCode" id="cb8"><pre class="sourceCode jsx code-with-copy"><code class="sourceCode javascriptreact"><span id="cb8-1"><a href="#cb8-1" aria-hidden="true" tabindex="-1"></a><span class="im">import</span> { useParams } <span class="im">from</span> <span class="st">"react-router-dom"</span><span class="op">;</span></span>
+          <p>Definición de la ruta:</p>
+          <div class="code-copy-outer-scaffold">
+            <div class="sourceCode" id="cb7">
+              <pre
+                class="sourceCode jsx code-with-copy"><code class="sourceCode javascriptreact"><span id="cb7-1"><a href="#cb7-1" aria-hidden="true" tabindex="-1"></a><span class="fu">&lt;Route</span> <span class="ot">path</span><span class="op">=</span><span class="st">"/pokemon/:id"</span> <span class="ot">element</span><span class="op">=</span><span class="va">{</span><span class="fu">&lt;PokemonDetail</span> <span class="fu">/&gt;</span><span class="va">}</span> <span class="fu">/&gt;</span></span></code></pre>
+            </div><button title="Copiar al portapapeles" class="code-copy-button"><i class="bi"></i></button>
+          </div>
+          <section id="useparams" class="level4">
+            <h4 class="anchored" data-anchor-id="useparams">useParams</h4>
+            <p>Para acceder al parámetro utilizamos el hook <code>useParams</code> de <em>React Router</em>.</p>
+            <div class="code-copy-outer-scaffold">
+              <div class="sourceCode" id="cb8">
+                <pre class="sourceCode jsx code-with-copy"><code class="sourceCode javascriptreact"><span id="cb8-1"><a href="#cb8-1" aria-hidden="true" tabindex="-1"></a><span class="im">import</span> { useParams } <span class="im">from</span> <span class="st">"react-router-dom"</span><span class="op">;</span></span>
 <span id="cb8-2"><a href="#cb8-2" aria-hidden="true" tabindex="-1"></a></span>
 <span id="cb8-3"><a href="#cb8-3" aria-hidden="true" tabindex="-1"></a><span class="kw">function</span> <span class="fu">PokemonDetail</span>() {</span>
 <span id="cb8-4"><a href="#cb8-4" aria-hidden="true" tabindex="-1"></a></span>
@@ -815,68 +1047,88 @@ <h4 class="anchored" data-anchor-id="useparams">useParams</h4>
 <span id="cb8-6"><a href="#cb8-6" aria-hidden="true" tabindex="-1"></a></span>
 <span id="cb8-7"><a href="#cb8-7" aria-hidden="true" tabindex="-1"></a>  <span class="cf">return </span><span class="kw">&lt;p&gt;</span>Pokemon <span class="va">{</span>id<span class="va">}</span><span class="kw">&lt;/p&gt;</span><span class="op">;</span></span>
 <span id="cb8-8"><a href="#cb8-8" aria-hidden="true" tabindex="-1"></a></span>
-<span id="cb8-9"><a href="#cb8-9" aria-hidden="true" tabindex="-1"></a>}</span></code></pre></div><button title="Copiar al portapapeles" class="code-copy-button"><i class="bi"></i></button></div>
-<p>Este parámetro puede utilizarse para realizar peticiones a una API.</p>
-</section>
-</section>
-</section>
-<section id="context-api" class="level2">
-<h2 class="anchored" data-anchor-id="context-api">Context API</h2>
-<p>En aplicaciones grandes aparece un problema frecuente.</p>
-<p>Muchos componentes necesitan acceder a la <strong>misma información</strong>.</p>
-<p>Por ejemplo:</p>
-<ul>
-<li>usuario</li>
-<li>tema visual</li>
-<li>idioma</li>
-<li>configuración</li>
-</ul>
-<p>Si pasamos la información mediante <em>props</em>, los datos deben atravesar muchos componentes.</p>
-<p>Representación conceptual:</p>
-<pre><code>App
+<span id="cb8-9"><a href="#cb8-9" aria-hidden="true" tabindex="-1"></a>}</span></code></pre>
+              </div><button title="Copiar al portapapeles" class="code-copy-button"><i class="bi"></i></button>
+            </div>
+            <p>Este parámetro puede utilizarse para realizar peticiones a una API.</p>
+          </section>
+        </section>
+      </section>
+      <section id="context-api" class="level2">
+        <h2 class="anchored" data-anchor-id="context-api">Context API</h2>
+        <p>En aplicaciones grandes aparece un problema frecuente.</p>
+        <p>Muchos componentes necesitan acceder a la <strong>misma información</strong>.</p>
+        <p>Por ejemplo:</p>
+        <ul>
+          <li>usuario</li>
+          <li>tema visual</li>
+          <li>idioma</li>
+          <li>configuración</li>
+        </ul>
+        <p>Si pasamos la información mediante <em>props</em>, los datos deben atravesar muchos componentes.</p>
+        <p>Representación conceptual:</p>
+        <pre><code>App
  └ Layout
     └ Page
        └ Component</code></pre>
-<p>Si todos necesitan <code>user</code>, debemos pasar la prop continuamente.</p>
-<p>Este problema se conoce como <strong>prop drilling</strong>.</p>
-<section id="context" class="level3">
-<h3 class="anchored" data-anchor-id="context">Context</h3>
-<p>React proporciona una solución llamada <strong>Context</strong>.</p>
-<p>Context permite <strong>compartir información entre múltiples componentes</strong> sin pasar props manualmente.</p>
-<p>El proceso tiene tres pasos:</p>
-<ol type="1">
-<li>Crear el contexto</li>
-<li>Proveer el contexto</li>
-<li>Consumir el contexto</li>
-</ol>
-<section id="crear-un-contexto" class="level4">
-<h4 class="anchored" data-anchor-id="crear-un-contexto">Crear un contexto</h4>
-<div class="code-copy-outer-scaffold"><div class="sourceCode" id="cb10"><pre class="sourceCode jsx code-with-copy"><code class="sourceCode javascriptreact"><span id="cb10-1"><a href="#cb10-1" aria-hidden="true" tabindex="-1"></a><span class="im">import</span> { createContext } <span class="im">from</span> <span class="st">"react"</span><span class="op">;</span></span>
+        <p>Si todos necesitan <code>user</code>, debemos pasar la prop continuamente.</p>
+        <p>Este problema se conoce como <strong>prop drilling</strong>.</p>
+        <section id="context" class="level3">
+          <h3 class="anchored" data-anchor-id="context">Context</h3>
+          <p>React proporciona una solución llamada <strong>Context</strong>.</p>
+          <p>Context permite <strong>compartir información entre múltiples componentes</strong> sin pasar props
+            manualmente.</p>
+          <p>El proceso tiene tres pasos:</p>
+          <ol type="1">
+            <li>Crear el contexto</li>
+            <li>Proveer el contexto</li>
+            <li>Consumir el contexto</li>
+          </ol>
+          <section id="crear-un-contexto" class="level4">
+            <h4 class="anchored" data-anchor-id="crear-un-contexto">Crear un contexto</h4>
+            <div class="code-copy-outer-scaffold">
+              <div class="sourceCode" id="cb10">
+                <pre
+                  class="sourceCode jsx code-with-copy"><code class="sourceCode javascriptreact"><span id="cb10-1"><a href="#cb10-1" aria-hidden="true" tabindex="-1"></a><span class="im">import</span> { createContext } <span class="im">from</span> <span class="st">"react"</span><span class="op">;</span></span>
 <span id="cb10-2"><a href="#cb10-2" aria-hidden="true" tabindex="-1"></a></span>
-<span id="cb10-3"><a href="#cb10-3" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> UserContext <span class="op">=</span> <span class="fu">createContext</span>()<span class="op">;</span></span></code></pre></div><button title="Copiar al portapapeles" class="code-copy-button"><i class="bi"></i></button></div>
-<p>Esto crea un contenedor que puede almacenar información compartida.</p>
-</section>
-<section id="provider" class="level4">
-<h4 class="anchored" data-anchor-id="provider">Provider</h4>
-<p>El <code>Provider</code> permite que los componentes hijos accedan al contexto.</p>
-<div class="code-copy-outer-scaffold"><div class="sourceCode" id="cb11"><pre class="sourceCode jsx code-with-copy"><code class="sourceCode javascriptreact"><span id="cb11-1"><a href="#cb11-1" aria-hidden="true" tabindex="-1"></a><span class="fu">&lt;UserContext.Provider</span> <span class="ot">value</span><span class="op">=</span><span class="va">{</span>user<span class="va">}</span><span class="fu">&gt;</span></span>
+<span id="cb10-3"><a href="#cb10-3" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> UserContext <span class="op">=</span> <span class="fu">createContext</span>()<span class="op">;</span></span></code></pre>
+              </div><button title="Copiar al portapapeles" class="code-copy-button"><i class="bi"></i></button>
+            </div>
+            <p>Esto crea un contenedor que puede almacenar información compartida.</p>
+          </section>
+          <section id="provider" class="level4">
+            <h4 class="anchored" data-anchor-id="provider">Provider</h4>
+            <p>El <code>Provider</code> permite que los componentes hijos accedan al contexto.</p>
+            <div class="code-copy-outer-scaffold">
+              <div class="sourceCode" id="cb11">
+                <pre
+                  class="sourceCode jsx code-with-copy"><code class="sourceCode javascriptreact"><span id="cb11-1"><a href="#cb11-1" aria-hidden="true" tabindex="-1"></a><span class="fu">&lt;UserContext.Provider</span> <span class="ot">value</span><span class="op">=</span><span class="va">{</span>user<span class="va">}</span><span class="fu">&gt;</span></span>
 <span id="cb11-2"><a href="#cb11-2" aria-hidden="true" tabindex="-1"></a></span>
 <span id="cb11-3"><a href="#cb11-3" aria-hidden="true" tabindex="-1"></a>  <span class="fu">&lt;App</span> <span class="fu">/&gt;</span></span>
 <span id="cb11-4"><a href="#cb11-4" aria-hidden="true" tabindex="-1"></a></span>
-<span id="cb11-5"><a href="#cb11-5" aria-hidden="true" tabindex="-1"></a><span class="fu">&lt;/UserContext.Provider&gt;</span></span></code></pre></div><button title="Copiar al portapapeles" class="code-copy-button"><i class="bi"></i></button></div>
-<p>Todos los componentes dentro del <code>Provider</code> pueden acceder al valor.</p>
-</section>
-<section id="consumir-el-contexto" class="level4">
-<h4 class="anchored" data-anchor-id="consumir-el-contexto">Consumir el contexto</h4>
-<p>Para acceder al contexto utilizamos el hook <code>useContext</code>.</p>
-<div class="code-copy-outer-scaffold"><div class="sourceCode" id="cb12"><pre class="sourceCode jsx code-with-copy"><code class="sourceCode javascriptreact"><span id="cb12-1"><a href="#cb12-1" aria-hidden="true" tabindex="-1"></a><span class="im">import</span> { useContext } <span class="im">from</span> <span class="st">"react"</span><span class="op">;</span></span>
+<span id="cb11-5"><a href="#cb11-5" aria-hidden="true" tabindex="-1"></a><span class="fu">&lt;/UserContext.Provider&gt;</span></span></code></pre>
+              </div><button title="Copiar al portapapeles" class="code-copy-button"><i class="bi"></i></button>
+            </div>
+            <p>Todos los componentes dentro del <code>Provider</code> pueden acceder al valor.</p>
+          </section>
+          <section id="consumir-el-contexto" class="level4">
+            <h4 class="anchored" data-anchor-id="consumir-el-contexto">Consumir el contexto</h4>
+            <p>Para acceder al contexto utilizamos el hook <code>useContext</code>.</p>
+            <div class="code-copy-outer-scaffold">
+              <div class="sourceCode" id="cb12">
+                <pre
+                  class="sourceCode jsx code-with-copy"><code class="sourceCode javascriptreact"><span id="cb12-1"><a href="#cb12-1" aria-hidden="true" tabindex="-1"></a><span class="im">import</span> { useContext } <span class="im">from</span> <span class="st">"react"</span><span class="op">;</span></span>
 <span id="cb12-2"><a href="#cb12-2" aria-hidden="true" tabindex="-1"></a></span>
-<span id="cb12-3"><a href="#cb12-3" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> user <span class="op">=</span> <span class="fu">useContext</span>(UserContext)<span class="op">;</span></span></code></pre></div><button title="Copiar al portapapeles" class="code-copy-button"><i class="bi"></i></button></div>
-<p>El componente obtiene directamente el valor almacenado en el contexto.</p>
-</section>
-<section id="ejemplo-completo" class="level4">
-<h4 class="anchored" data-anchor-id="ejemplo-completo">Ejemplo completo</h4>
-<div class="code-copy-outer-scaffold"><div class="sourceCode" id="cb13"><pre class="sourceCode jsx code-with-copy"><code class="sourceCode javascriptreact"><span id="cb13-1"><a href="#cb13-1" aria-hidden="true" tabindex="-1"></a><span class="im">import</span> { createContext<span class="op">,</span> useContext } <span class="im">from</span> <span class="st">"react"</span><span class="op">;</span></span>
+<span id="cb12-3"><a href="#cb12-3" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> user <span class="op">=</span> <span class="fu">useContext</span>(UserContext)<span class="op">;</span></span></code></pre>
+              </div><button title="Copiar al portapapeles" class="code-copy-button"><i class="bi"></i></button>
+            </div>
+            <p>El componente obtiene directamente el valor almacenado en el contexto.</p>
+          </section>
+          <section id="ejemplo-completo" class="level4">
+            <h4 class="anchored" data-anchor-id="ejemplo-completo">Ejemplo completo</h4>
+            <div class="code-copy-outer-scaffold">
+              <div class="sourceCode" id="cb13">
+                <pre class="sourceCode jsx code-with-copy"><code class="sourceCode javascriptreact"><span id="cb13-1"><a href="#cb13-1" aria-hidden="true" tabindex="-1"></a><span class="im">import</span> { createContext<span class="op">,</span> useContext } <span class="im">from</span> <span class="st">"react"</span><span class="op">;</span></span>
 <span id="cb13-2"><a href="#cb13-2" aria-hidden="true" tabindex="-1"></a></span>
 <span id="cb13-3"><a href="#cb13-3" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> UserContext <span class="op">=</span> <span class="fu">createContext</span>()<span class="op">;</span></span>
 <span id="cb13-4"><a href="#cb13-4" aria-hidden="true" tabindex="-1"></a></span>
@@ -901,279 +1153,283 @@ <h4 class="anchored" data-anchor-id="ejemplo-completo">Ejemplo completo</h4>
 <span id="cb13-23"><a href="#cb13-23" aria-hidden="true" tabindex="-1"></a></span>
 <span id="cb13-24"><a href="#cb13-24" aria-hidden="true" tabindex="-1"></a>  <span class="cf">return </span><span class="kw">&lt;h1&gt;</span><span class="va">{</span>user<span class="op">.</span><span class="at">name</span><span class="va">}</span><span class="kw">&lt;/h1&gt;</span><span class="op">;</span></span>
 <span id="cb13-25"><a href="#cb13-25" aria-hidden="true" tabindex="-1"></a></span>
-<span id="cb13-26"><a href="#cb13-26" aria-hidden="true" tabindex="-1"></a>}</span></code></pre></div><button title="Copiar al portapapeles" class="code-copy-button"><i class="bi"></i></button></div>
+<span id="cb13-26"><a href="#cb13-26" aria-hidden="true" tabindex="-1"></a>}</span></code></pre>
+              </div><button title="Copiar al portapapeles" class="code-copy-button"><i class="bi"></i></button>
+            </div>
 
 
-</section>
-</section>
-</section>
+          </section>
+        </section>
+      </section>
 
-</main> <!-- /main -->
-<script id="quarto-html-after-body" type="application/javascript">
-  window.document.addEventListener("DOMContentLoaded", function (event) {
-    // Ensure there is a toggle, if there isn't float one in the top right
-    if (window.document.querySelector('.quarto-color-scheme-toggle') === null) {
-      const a = window.document.createElement('a');
-      a.classList.add('top-right');
-      a.classList.add('quarto-color-scheme-toggle');
-      a.href = "";
-      a.onclick = function() { try { window.quartoToggleColorScheme(); } catch {} return false; };
-      const i = window.document.createElement("i");
-      i.classList.add('bi');
-      a.appendChild(i);
-      window.document.body.appendChild(a);
-    }
-    setColorSchemeToggle(hasAlternateSentinel())
-    const icon = "";
-    const anchorJS = new window.AnchorJS();
-    anchorJS.options = {
-      placement: 'right',
-      icon: icon
-    };
-    anchorJS.add('.anchored');
-    const isCodeAnnotation = (el) => {
-      for (const clz of el.classList) {
-        if (clz.startsWith('code-annotation-')) {                     
-          return true;
+    </main> <!-- /main -->
+    <script id="quarto-html-after-body" type="application/javascript">
+      window.document.addEventListener("DOMContentLoaded", function (event) {
+        // Ensure there is a toggle, if there isn't float one in the top right
+        if (window.document.querySelector('.quarto-color-scheme-toggle') === null) {
+          const a = window.document.createElement('a');
+          a.classList.add('top-right');
+          a.classList.add('quarto-color-scheme-toggle');
+          a.href = "";
+          a.onclick = function () { try { window.quartoToggleColorScheme(); } catch { } return false; };
+          const i = window.document.createElement("i");
+          i.classList.add('bi');
+          a.appendChild(i);
+          window.document.body.appendChild(a);
         }
-      }
-      return false;
-    }
-    const onCopySuccess = function(e) {
-      // button target
-      const button = e.trigger;
-      // don't keep focus
-      button.blur();
-      // flash "checked"
-      button.classList.add('code-copy-button-checked');
-      var currentTitle = button.getAttribute("title");
-      button.setAttribute("title", "Copiado");
-      let tooltip;
-      if (window.bootstrap) {
-        button.setAttribute("data-bs-toggle", "tooltip");
-        button.setAttribute("data-bs-placement", "left");
-        button.setAttribute("data-bs-title", "Copiado");
-        tooltip = new bootstrap.Tooltip(button, 
-          { trigger: "manual", 
-            customClass: "code-copy-button-tooltip",
-            offset: [0, -8]});
-        tooltip.show();    
-      }
-      setTimeout(function() {
-        if (tooltip) {
-          tooltip.hide();
-          button.removeAttribute("data-bs-title");
-          button.removeAttribute("data-bs-toggle");
-          button.removeAttribute("data-bs-placement");
+        setColorSchemeToggle(hasAlternateSentinel())
+        const icon = "";
+        const anchorJS = new window.AnchorJS();
+        anchorJS.options = {
+          placement: 'right',
+          icon: icon
+        };
+        anchorJS.add('.anchored');
+        const isCodeAnnotation = (el) => {
+          for (const clz of el.classList) {
+            if (clz.startsWith('code-annotation-')) {
+              return true;
+            }
+          }
+          return false;
         }
-        button.setAttribute("title", currentTitle);
-        button.classList.remove('code-copy-button-checked');
-      }, 1000);
-      // clear code selection
-      e.clearSelection();
-    }
-    const getTextToCopy = function(trigger) {
-      const outerScaffold = trigger.parentElement.cloneNode(true);
-      const codeEl = outerScaffold.querySelector('code');
-      for (const childEl of codeEl.children) {
-        if (isCodeAnnotation(childEl)) {
-          childEl.remove();
+        const onCopySuccess = function (e) {
+          // button target
+          const button = e.trigger;
+          // don't keep focus
+          button.blur();
+          // flash "checked"
+          button.classList.add('code-copy-button-checked');
+          var currentTitle = button.getAttribute("title");
+          button.setAttribute("title", "Copiado");
+          let tooltip;
+          if (window.bootstrap) {
+            button.setAttribute("data-bs-toggle", "tooltip");
+            button.setAttribute("data-bs-placement", "left");
+            button.setAttribute("data-bs-title", "Copiado");
+            tooltip = new bootstrap.Tooltip(button,
+              {
+                trigger: "manual",
+                customClass: "code-copy-button-tooltip",
+                offset: [0, -8]
+              });
+            tooltip.show();
+          }
+          setTimeout(function () {
+            if (tooltip) {
+              tooltip.hide();
+              button.removeAttribute("data-bs-title");
+              button.removeAttribute("data-bs-toggle");
+              button.removeAttribute("data-bs-placement");
+            }
+            button.setAttribute("title", currentTitle);
+            button.classList.remove('code-copy-button-checked');
+          }, 1000);
+          // clear code selection
+          e.clearSelection();
         }
-      }
-      return codeEl.innerText;
-    }
-    const clipboard = new window.ClipboardJS('.code-copy-button:not([data-in-quarto-modal])', {
-      text: getTextToCopy
-    });
-    clipboard.on('success', onCopySuccess);
-    if (window.document.getElementById('quarto-embedded-source-code-modal')) {
-      const clipboardModal = new window.ClipboardJS('.code-copy-button[data-in-quarto-modal]', {
-        text: getTextToCopy,
-        container: window.document.getElementById('quarto-embedded-source-code-modal')
-      });
-      clipboardModal.on('success', onCopySuccess);
-    }
-      var localhostRegex = new RegExp(/^(?:http|https):\/\/localhost\:?[0-9]*\//);
-      var mailtoRegex = new RegExp(/^mailto:/);
-        var filterRegex = new RegExp('/' + window.location.host + '/');
-      var isInternal = (href) => {
-          return filterRegex.test(href) || localhostRegex.test(href) || mailtoRegex.test(href);
-      }
-      // Inspect non-navigation links and adorn them if external
-     var links = window.document.querySelectorAll('a[href]:not(.nav-link):not(.navbar-brand):not(.toc-action):not(.sidebar-link):not(.sidebar-item-toggle):not(.pagination-link):not(.no-external):not([aria-hidden]):not(.dropdown-item):not(.quarto-navigation-tool):not(.about-link)');
-      for (var i=0; i<links.length; i++) {
-        const link = links[i];
-        if (!isInternal(link.href)) {
-          // undo the damage that might have been done by quarto-nav.js in the case of
-          // links that we want to consider external
-          if (link.dataset.originalHref !== undefined) {
-            link.href = link.dataset.originalHref;
+        const getTextToCopy = function (trigger) {
+          const outerScaffold = trigger.parentElement.cloneNode(true);
+          const codeEl = outerScaffold.querySelector('code');
+          for (const childEl of codeEl.children) {
+            if (isCodeAnnotation(childEl)) {
+              childEl.remove();
+            }
           }
+          return codeEl.innerText;
         }
-      }
-    function tippyHover(el, contentFn, onTriggerFn, onUntriggerFn) {
-      const config = {
-        allowHTML: true,
-        maxWidth: 500,
-        delay: 100,
-        arrow: false,
-        appendTo: function(el) {
-            return el.parentElement;
-        },
-        interactive: true,
-        interactiveBorder: 10,
-        theme: 'quarto',
-        placement: 'bottom-start',
-      };
-      if (contentFn) {
-        config.content = contentFn;
-      }
-      if (onTriggerFn) {
-        config.onTrigger = onTriggerFn;
-      }
-      if (onUntriggerFn) {
-        config.onUntrigger = onUntriggerFn;
-      }
-      window.tippy(el, config); 
-    }
-    const noterefs = window.document.querySelectorAll('a[role="doc-noteref"]');
-    for (var i=0; i<noterefs.length; i++) {
-      const ref = noterefs[i];
-      tippyHover(ref, function() {
-        // use id or data attribute instead here
-        let href = ref.getAttribute('data-footnote-href') || ref.getAttribute('href');
-        try { href = new URL(href).hash; } catch {}
-        const id = href.replace(/^#\/?/, "");
-        const note = window.document.getElementById(id);
-        if (note) {
-          return note.innerHTML;
-        } else {
-          return "";
+        const clipboard = new window.ClipboardJS('.code-copy-button:not([data-in-quarto-modal])', {
+          text: getTextToCopy
+        });
+        clipboard.on('success', onCopySuccess);
+        if (window.document.getElementById('quarto-embedded-source-code-modal')) {
+          const clipboardModal = new window.ClipboardJS('.code-copy-button[data-in-quarto-modal]', {
+            text: getTextToCopy,
+            container: window.document.getElementById('quarto-embedded-source-code-modal')
+          });
+          clipboardModal.on('success', onCopySuccess);
         }
-      });
-    }
-    const xrefs = window.document.querySelectorAll('a.quarto-xref');
-    const processXRef = (id, note) => {
-      // Strip column container classes
-      const stripColumnClz = (el) => {
-        el.classList.remove("page-full", "page-columns");
-        if (el.children) {
-          for (const child of el.children) {
-            stripColumnClz(child);
-          }
+        var localhostRegex = new RegExp(/^(?:http|https):\/\/localhost\:?[0-9]*\//);
+        var mailtoRegex = new RegExp(/^mailto:/);
+        var filterRegex = new RegExp('/' + window.location.host + '/');
+        var isInternal = (href) => {
+          return filterRegex.test(href) || localhostRegex.test(href) || mailtoRegex.test(href);
         }
-      }
-      stripColumnClz(note)
-      if (id === null || id.startsWith('sec-')) {
-        // Special case sections, only their first couple elements
-        const container = document.createElement("div");
-        if (note.children && note.children.length > 2) {
-          container.appendChild(note.children[0].cloneNode(true));
-          for (let i = 1; i < note.children.length; i++) {
-            const child = note.children[i];
-            if (child.tagName === "P" && child.innerText === "") {
-              continue;
-            } else {
-              container.appendChild(child.cloneNode(true));
-              break;
+        // Inspect non-navigation links and adorn them if external
+        var links = window.document.querySelectorAll('a[href]:not(.nav-link):not(.navbar-brand):not(.toc-action):not(.sidebar-link):not(.sidebar-item-toggle):not(.pagination-link):not(.no-external):not([aria-hidden]):not(.dropdown-item):not(.quarto-navigation-tool):not(.about-link)');
+        for (var i = 0; i < links.length; i++) {
+          const link = links[i];
+          if (!isInternal(link.href)) {
+            // undo the damage that might have been done by quarto-nav.js in the case of
+            // links that we want to consider external
+            if (link.dataset.originalHref !== undefined) {
+              link.href = link.dataset.originalHref;
             }
           }
-          if (window.Quarto?.typesetMath) {
-            window.Quarto.typesetMath(container);
+        }
+        function tippyHover(el, contentFn, onTriggerFn, onUntriggerFn) {
+          const config = {
+            allowHTML: true,
+            maxWidth: 500,
+            delay: 100,
+            arrow: false,
+            appendTo: function (el) {
+              return el.parentElement;
+            },
+            interactive: true,
+            interactiveBorder: 10,
+            theme: 'quarto',
+            placement: 'bottom-start',
+          };
+          if (contentFn) {
+            config.content = contentFn;
+          }
+          if (onTriggerFn) {
+            config.onTrigger = onTriggerFn;
           }
-          return container.innerHTML
-        } else {
-          if (window.Quarto?.typesetMath) {
-            window.Quarto.typesetMath(note);
+          if (onUntriggerFn) {
+            config.onUntrigger = onUntriggerFn;
           }
-          return note.innerHTML;
-        }
-      } else {
-        // Remove any anchor links if they are present
-        const anchorLink = note.querySelector('a.anchorjs-link');
-        if (anchorLink) {
-          anchorLink.remove();
-        }
-        if (window.Quarto?.typesetMath) {
-          window.Quarto.typesetMath(note);
-        }
-        if (note.classList.contains("callout")) {
-          return note.outerHTML;
-        } else {
-          return note.innerHTML;
+          window.tippy(el, config);
         }
-      }
-    }
-    for (var i=0; i<xrefs.length; i++) {
-      const xref = xrefs[i];
-      tippyHover(xref, undefined, function(instance) {
-        instance.disable();
-        let url = xref.getAttribute('href');
-        let hash = undefined; 
-        if (url.startsWith('#')) {
-          hash = url;
-        } else {
-          try { hash = new URL(url).hash; } catch {}
+        const noterefs = window.document.querySelectorAll('a[role="doc-noteref"]');
+        for (var i = 0; i < noterefs.length; i++) {
+          const ref = noterefs[i];
+          tippyHover(ref, function () {
+            // use id or data attribute instead here
+            let href = ref.getAttribute('data-footnote-href') || ref.getAttribute('href');
+            try { href = new URL(href).hash; } catch { }
+            const id = href.replace(/^#\/?/, "");
+            const note = window.document.getElementById(id);
+            if (note) {
+              return note.innerHTML;
+            } else {
+              return "";
+            }
+          });
         }
-        if (hash) {
-          const id = hash.replace(/^#\/?/, "");
-          const note = window.document.getElementById(id);
-          if (note !== null) {
-            try {
-              const html = processXRef(id, note.cloneNode(true));
-              instance.setContent(html);
-            } finally {
-              instance.enable();
-              instance.show();
+        const xrefs = window.document.querySelectorAll('a.quarto-xref');
+        const processXRef = (id, note) => {
+          // Strip column container classes
+          const stripColumnClz = (el) => {
+            el.classList.remove("page-full", "page-columns");
+            if (el.children) {
+              for (const child of el.children) {
+                stripColumnClz(child);
+              }
+            }
+          }
+          stripColumnClz(note)
+          if (id === null || id.startsWith('sec-')) {
+            // Special case sections, only their first couple elements
+            const container = document.createElement("div");
+            if (note.children && note.children.length > 2) {
+              container.appendChild(note.children[0].cloneNode(true));
+              for (let i = 1; i < note.children.length; i++) {
+                const child = note.children[i];
+                if (child.tagName === "P" && child.innerText === "") {
+                  continue;
+                } else {
+                  container.appendChild(child.cloneNode(true));
+                  break;
+                }
+              }
+              if (window.Quarto?.typesetMath) {
+                window.Quarto.typesetMath(container);
+              }
+              return container.innerHTML
+            } else {
+              if (window.Quarto?.typesetMath) {
+                window.Quarto.typesetMath(note);
+              }
+              return note.innerHTML;
             }
           } else {
-            // See if we can fetch this
-            fetch(url.split('#')[0])
-            .then(res => res.text())
-            .then(html => {
-              const parser = new DOMParser();
-              const htmlDoc = parser.parseFromString(html, "text/html");
-              const note = htmlDoc.getElementById(id);
-              if (note !== null) {
-                const html = processXRef(id, note);
-                instance.setContent(html);
-              } 
-            }).finally(() => {
-              instance.enable();
-              instance.show();
-            });
+            // Remove any anchor links if they are present
+            const anchorLink = note.querySelector('a.anchorjs-link');
+            if (anchorLink) {
+              anchorLink.remove();
+            }
+            if (window.Quarto?.typesetMath) {
+              window.Quarto.typesetMath(note);
+            }
+            if (note.classList.contains("callout")) {
+              return note.outerHTML;
+            } else {
+              return note.innerHTML;
+            }
           }
-        } else {
-          // See if we can fetch a full url (with no hash to target)
-          // This is a special case and we should probably do some content thinning / targeting
-          fetch(url)
-          .then(res => res.text())
-          .then(html => {
-            const parser = new DOMParser();
-            const htmlDoc = parser.parseFromString(html, "text/html");
-            const note = htmlDoc.querySelector('main.content');
-            if (note !== null) {
-              // This should only happen for chapter cross references
-              // (since there is no id in the URL)
-              // remove the first header
-              if (note.children.length > 0 && note.children[0].tagName === "HEADER") {
-                note.children[0].remove();
+        }
+        for (var i = 0; i < xrefs.length; i++) {
+          const xref = xrefs[i];
+          tippyHover(xref, undefined, function (instance) {
+            instance.disable();
+            let url = xref.getAttribute('href');
+            let hash = undefined;
+            if (url.startsWith('#')) {
+              hash = url;
+            } else {
+              try { hash = new URL(url).hash; } catch { }
+            }
+            if (hash) {
+              const id = hash.replace(/^#\/?/, "");
+              const note = window.document.getElementById(id);
+              if (note !== null) {
+                try {
+                  const html = processXRef(id, note.cloneNode(true));
+                  instance.setContent(html);
+                } finally {
+                  instance.enable();
+                  instance.show();
+                }
+              } else {
+                // See if we can fetch this
+                fetch(url.split('#')[0])
+                  .then(res => res.text())
+                  .then(html => {
+                    const parser = new DOMParser();
+                    const htmlDoc = parser.parseFromString(html, "text/html");
+                    const note = htmlDoc.getElementById(id);
+                    if (note !== null) {
+                      const html = processXRef(id, note);
+                      instance.setContent(html);
+                    }
+                  }).finally(() => {
+                    instance.enable();
+                    instance.show();
+                  });
               }
-              const html = processXRef(null, note);
-              instance.setContent(html);
-            } 
-          }).finally(() => {
-            instance.enable();
-            instance.show();
+            } else {
+              // See if we can fetch a full url (with no hash to target)
+              // This is a special case and we should probably do some content thinning / targeting
+              fetch(url)
+                .then(res => res.text())
+                .then(html => {
+                  const parser = new DOMParser();
+                  const htmlDoc = parser.parseFromString(html, "text/html");
+                  const note = htmlDoc.querySelector('main.content');
+                  if (note !== null) {
+                    // This should only happen for chapter cross references
+                    // (since there is no id in the URL)
+                    // remove the first header
+                    if (note.children.length > 0 && note.children[0].tagName === "HEADER") {
+                      note.children[0].remove();
+                    }
+                    const html = processXRef(null, note);
+                    instance.setContent(html);
+                  }
+                }).finally(() => {
+                  instance.enable();
+                  instance.show();
+                });
+            }
+          }, function (instance) {
           });
         }
-      }, function(instance) {
-      });
-    }
         let selectedAnnoteEl;
-        const selectorForAnnotation = ( cell, annotation) => {
+        const selectorForAnnotation = (cell, annotation) => {
           let cellAttr = 'data-code-cell="' + cell + '"';
-          let lineAttr = 'data-code-annotation="' +  annotation + '"';
+          let lineAttr = 'data-code-annotation="' + annotation + '"';
           const selector = 'span[' + cellAttr + '][' + lineAttr + ']';
           return selector;
         }
@@ -1190,11 +1446,11 @@ <h4 class="anchored" data-anchor-id="ejemplo-completo">Ejemplo completo</h4>
           let height = null;
           let parent = null;
           if (lineIds.length > 0) {
-              //compute the position of the single el (top and bottom and make a div)
-              const el = window.document.getElementById(lineIds[0]);
-              top = el.offsetTop;
-              height = el.offsetHeight;
-              parent = el.parentElement.parentElement;
+            //compute the position of the single el (top and bottom and make a div)
+            const el = window.document.getElementById(lineIds[0]);
+            top = el.offsetTop;
+            height = el.offsetHeight;
+            parent = el.parentElement.parentElement;
             if (lineIds.length > 1) {
               const lastEl = window.document.getElementById(lineIds[lineIds.length - 1]);
               const bottom = lastEl.offsetTop + lastEl.offsetHeight;
@@ -1237,32 +1493,32 @@ <h4 class="anchored" data-anchor-id="ejemplo-completo">Ejemplo completo</h4>
           });
           selectedAnnoteEl = undefined;
         };
-          // Handle positioning of the toggle
-      window.addEventListener(
-        "resize",
-        throttle(() => {
-          elRect = undefined;
-          if (selectedAnnoteEl) {
-            selectCodeLines(selectedAnnoteEl);
-          }
-        }, 10)
-      );
-      function throttle(fn, ms) {
-      let throttle = false;
-      let timer;
-        return (...args) => {
-          if(!throttle) { // first call gets through
+        // Handle positioning of the toggle
+        window.addEventListener(
+          "resize",
+          throttle(() => {
+            elRect = undefined;
+            if (selectedAnnoteEl) {
+              selectCodeLines(selectedAnnoteEl);
+            }
+          }, 10)
+        );
+        function throttle(fn, ms) {
+          let throttle = false;
+          let timer;
+          return (...args) => {
+            if (!throttle) { // first call gets through
               fn.apply(this, args);
               throttle = true;
-          } else { // all the others get throttled
-              if(timer) clearTimeout(timer); // cancel #2
+            } else { // all the others get throttled
+              if (timer) clearTimeout(timer); // cancel #2
               timer = setTimeout(() => {
                 fn.apply(this, args);
                 timer = throttle = false;
               }, ms);
-          }
-        };
-      }
+            }
+          };
+        }
         // Attach click handler to the DT
         const annoteDls = window.document.querySelectorAll('dt[data-target-cell]');
         for (const annoteDlNode of annoteDls) {
@@ -1283,48 +1539,50 @@ <h4 class="anchored" data-anchor-id="ejemplo-completo">Ejemplo completo</h4>
             }
           });
         }
-    const findCites = (el) => {
-      const parentEl = el.parentElement;
-      if (parentEl) {
-        const cites = parentEl.dataset.cites;
-        if (cites) {
-          return {
-            el,
-            cites: cites.split(' ')
-          };
-        } else {
-          return findCites(el.parentElement)
-        }
-      } else {
-        return undefined;
-      }
-    };
-    var bibliorefs = window.document.querySelectorAll('a[role="doc-biblioref"]');
-    for (var i=0; i<bibliorefs.length; i++) {
-      const ref = bibliorefs[i];
-      const citeInfo = findCites(ref);
-      if (citeInfo) {
-        tippyHover(citeInfo.el, function() {
-          var popup = window.document.createElement('div');
-          citeInfo.cites.forEach(function(cite) {
-            var citeDiv = window.document.createElement('div');
-            citeDiv.classList.add('hanging-indent');
-            citeDiv.classList.add('csl-entry');
-            var biblioDiv = window.document.getElementById('ref-' + cite);
-            if (biblioDiv) {
-              citeDiv.innerHTML = biblioDiv.innerHTML;
+        const findCites = (el) => {
+          const parentEl = el.parentElement;
+          if (parentEl) {
+            const cites = parentEl.dataset.cites;
+            if (cites) {
+              return {
+                el,
+                cites: cites.split(' ')
+              };
+            } else {
+              return findCites(el.parentElement)
             }
-            popup.appendChild(citeDiv);
-          });
-          return popup.innerHTML;
-        });
-      }
-    }
-  });
-  </script>
-</div> <!-- /content -->
+          } else {
+            return undefined;
+          }
+        };
+        var bibliorefs = window.document.querySelectorAll('a[role="doc-biblioref"]');
+        for (var i = 0; i < bibliorefs.length; i++) {
+          const ref = bibliorefs[i];
+          const citeInfo = findCites(ref);
+          if (citeInfo) {
+            tippyHover(citeInfo.el, function () {
+              var popup = window.document.createElement('div');
+              citeInfo.cites.forEach(function (cite) {
+                var citeDiv = window.document.createElement('div');
+                citeDiv.classList.add('hanging-indent');
+                citeDiv.classList.add('csl-entry');
+                var biblioDiv = window.document.getElementById('ref-' + cite);
+                if (biblioDiv) {
+                  citeDiv.innerHTML = biblioDiv.innerHTML;
+                }
+                popup.appendChild(citeDiv);
+              });
+              return popup.innerHTML;
+            });
+          }
+        }
+      });
+    </script>
+  </div> <!-- /content -->
+
 
 
 
+</body>
 
-</body></html>
\ No newline at end of file
+</html>
\ No newline at end of file
diff --git a/docs/pages/Bloque3/ReactIV.pdf b/docs/pages/Bloque3/ReactIV.pdf
index 5cc2d463e80fedada89d51b02cce9acc69402e82..bbe3f73cb01c21c58ed39617457c80275b856e6f 100644
GIT binary patch
delta 139
zcmX@u$#SrhWy7iO+J?r42F4afX4(dZ>IMetnhN^9`6(`mC8-J;E>=bcMrH=aFeRJ6
zewX8Nb8<3pG<32wHgq;HaWQeSG&43cF*GqSa|N<Yon2k*6l@49iJja~rm($|iP3`z
E0F(YCegFUf

delta 139
zcmX@u$#SrhWy7iO+6LxE#s;RQM%o63>IMetnhN^9`6(`mC8-J;E>=bcMrH=aFeRJ6
zewX8NGca*-b+$Bjb~Sf3H+D9&G&giLG&i!eFfw*=a<nivwNtPmtR!}FLz%+%N+w1R
FCIF+6B)|Xw

diff --git a/docs/pages/Bloque3/ps.html b/docs/pages/Bloque3/ps.html
index 5fab2a4..0677f46 100644
--- a/docs/pages/Bloque3/ps.html
+++ b/docs/pages/Bloque3/ps.html
@@ -544,8 +544,32 @@
       </ul>
   </li>
         <li class="sidebar-item sidebar-item-section">
-      <span class="sidebar-item-text sidebar-link text-start">
- <span class="menu-text">Bloque IV Comunicación</span></span>
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false">
+ <span class="menu-text">Bloque IV Comunicación</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-12" class="collapse list-unstyled sidebar-section depth1 ">  
+          <li class="sidebar-item sidebar-item-section">
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false">
+ <span class="menu-text">Semana 11</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-13" class="collapse list-unstyled sidebar-section depth2 ">  
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque4/protocolos.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">Protocolos de Comunicación</span></a>
+  </div>
+</li>
+      </ul>
+  </li>
+      </ul>
   </li>
         <li class="sidebar-item">
   <div class="sidebar-item-container"> 
@@ -604,7 +628,7 @@ <h1 class="title">Proyecto Subsistema</h1>
     <div>
     <div class="quarto-title-meta-heading">Fecha de última modificación</div>
     <div class="quarto-title-meta-contents">
-      <p class="date-modified">7 de marzo de 2026</p>
+      <p class="date-modified">13 de marzo de 2026</p>
     </div>
   </div>
     
diff --git a/docs/pages/Bloque3/ps.pdf b/docs/pages/Bloque3/ps.pdf
index d3f26df7026271cebcc24479880c61a6b3e950aa..11610f8e3b4b29dd4a6c99972d3f8eac883116b0 100644
GIT binary patch
delta 116
zcmaFAn(6&&rVW`L9EQe*2FB*5mXixRq~V;+Q#$r?yBRn-nK(OH8W~u+TAEs#8(SK<
hI-8rDxw#p+SsIubnb|4W5LOa9IUrYV^VTU=i~zgEAPxWk

delta 116
zcmaFAn(6&&rVW`L90uk_#s;QF#*+&>q~V;+Q#$r?yIERVI2k#*7+6}GIlGv<8ko77
hS{l0=yEwYJIl3CVS=uSs5LOa9IUrYV^VTU=i~!H4AgTZW

diff --git a/docs/pages/Bloque3/t10.html b/docs/pages/Bloque3/t10.html
index ccb2468..26b436b 100644
--- a/docs/pages/Bloque3/t10.html
+++ b/docs/pages/Bloque3/t10.html
@@ -568,8 +568,32 @@
       </ul>
   </li>
         <li class="sidebar-item sidebar-item-section">
-      <span class="sidebar-item-text sidebar-link text-start">
- <span class="menu-text">Bloque IV Comunicación</span></span>
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false">
+ <span class="menu-text">Bloque IV Comunicación</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-12" class="collapse list-unstyled sidebar-section depth1 ">  
+          <li class="sidebar-item sidebar-item-section">
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false">
+ <span class="menu-text">Semana 11</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-13" class="collapse list-unstyled sidebar-section depth2 ">  
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque4/protocolos.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">Protocolos de Comunicación</span></a>
+  </div>
+</li>
+      </ul>
+  </li>
+      </ul>
   </li>
         <li class="sidebar-item">
   <div class="sidebar-item-container"> 
@@ -637,7 +661,7 @@ <h1 class="title">T10: Quiz app!</h1>
     <div>
     <div class="quarto-title-meta-heading">Fecha de última modificación</div>
     <div class="quarto-title-meta-contents">
-      <p class="date-modified">7 de marzo de 2026</p>
+      <p class="date-modified">13 de marzo de 2026</p>
     </div>
   </div>
     
diff --git a/docs/pages/Bloque3/t10.pdf b/docs/pages/Bloque3/t10.pdf
index 99257ebd6b7cfed467280d5414deac158ad0617a..386fe53ff721f04f8f84a15e1ef17f745011ddfa 100644
GIT binary patch
delta 114
zcmZ4So@vE<rVXx}*bR*h4U8>JC;M!Yfw4E|Z&GJ=b2Bt|G;=kwG&gs$aC0#*H8FBC
hFmrM<FmkjsFg0^=wNtPmtR!}FpojeC-&@x*0svV+AK(B0

delta 114
zcmZ4So@vE<rVXx}*bU5$j1A0;Ci`rXfw4E|Z&GJ=b9HnvbTu|GGBGtZH8HbrGc#~8
hF*7xDHZpa#baiqvwNtPmtR!}FpojeC-&@x*0sv3lAGiPj

diff --git a/docs/pages/Bloque3/t6.html b/docs/pages/Bloque3/t6.html
index 5449367..4159e59 100644
--- a/docs/pages/Bloque3/t6.html
+++ b/docs/pages/Bloque3/t6.html
@@ -579,8 +579,32 @@
       </ul>
   </li>
         <li class="sidebar-item sidebar-item-section">
-      <span class="sidebar-item-text sidebar-link text-start">
- <span class="menu-text">Bloque IV Comunicación</span></span>
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false">
+ <span class="menu-text">Bloque IV Comunicación</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-12" class="collapse list-unstyled sidebar-section depth1 ">  
+          <li class="sidebar-item sidebar-item-section">
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false">
+ <span class="menu-text">Semana 11</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-13" class="collapse list-unstyled sidebar-section depth2 ">  
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque4/protocolos.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">Protocolos de Comunicación</span></a>
+  </div>
+</li>
+      </ul>
+  </li>
+      </ul>
   </li>
         <li class="sidebar-item">
   <div class="sidebar-item-container"> 
@@ -661,7 +685,7 @@ <h1 class="title">T6: Romancero Gitano I</h1>
     <div>
     <div class="quarto-title-meta-heading">Fecha de última modificación</div>
     <div class="quarto-title-meta-contents">
-      <p class="date-modified">7 de marzo de 2026</p>
+      <p class="date-modified">13 de marzo de 2026</p>
     </div>
   </div>
     
diff --git a/docs/pages/Bloque3/t6.pdf b/docs/pages/Bloque3/t6.pdf
index bd2d89695089853587e89232de55702245c89160..afe987ebba84c4dcebb4712a9b49647f1d923383 100644
GIT binary patch
delta 116
zcmX@x&vLe(WrO4o4nt!@17izAlgWxdq~V;+E<Y~uxEebdSvoqq89SL7m|3_w8JU`z
iIJz2|TAG@eyIQzf*eTe!5L6O7`2(Na_DWX95GDYySRZ=;

delta 116
zcmX@x&vLe(WrO4o4g+%|V*^tYgUO0Nq~V;+E<Y~uxLP`!nz%Z;8n{`wm>4^{8M+!<
iT9~<+xR@Hb8Mqo6*eTe!5L6O7`2(Na_DWX95GDY;U>~ah

diff --git a/docs/pages/Bloque4/Protocolos.html b/docs/pages/Bloque4/Protocolos.html
new file mode 100644
index 0000000..37aae4c
--- /dev/null
+++ b/docs/pages/Bloque4/Protocolos.html
@@ -0,0 +1,970 @@
+<!DOCTYPE html>
+<html lang="en"><head>
+<script src="../../site_libs/clipboard/clipboard.min.js"></script>
+<script src="../../site_libs/quarto-html/tabby.min.js"></script>
+<script src="../../site_libs/quarto-html/popper.min.js"></script>
+<script src="../../site_libs/quarto-html/tippy.umd.min.js"></script>
+<link href="../../site_libs/quarto-html/tippy.css" rel="stylesheet">
+<link href="../../site_libs/quarto-html/light-border.css" rel="stylesheet">
+<link href="../../site_libs/quarto-html/quarto-syntax-highlighting-ed96de9b727972fe78a7b5d16c58bf87.css" rel="stylesheet" id="quarto-text-highlighting-styles"><meta charset="utf-8">
+  <meta name="generator" content="quarto-1.8.27">
+
+  <meta name="author" content="Javier Ribal del Río">
+  <meta name="dcterms.date" content="2026-03-13">
+  <title>Training Center SW – Protocolos de Comunicación</title>
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
+  <link rel="stylesheet" href="../../site_libs/revealjs/dist/reset.css">
+  <link rel="stylesheet" href="../../site_libs/revealjs/dist/reveal.css">
+  <style>
+    code{white-space: pre-wrap;}
+    span.smallcaps{font-variant: small-caps;}
+    div.columns{display: flex; gap: min(4vw, 1.5em);}
+    div.column{flex: auto; overflow-x: auto;}
+    div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
+    ul.task-list{list-style: none;}
+    ul.task-list li input[type="checkbox"] {
+      width: 0.8em;
+      margin: 0 0.8em 0.2em -1em; /* quarto-specific, see https://github.com/quarto-dev/quarto-cli/issues/4556 */ 
+      vertical-align: middle;
+    }
+    /* CSS for syntax highlighting */
+    html { -webkit-text-size-adjust: 100%; }
+    pre > code.sourceCode { white-space: pre; position: relative; }
+    pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
+    pre > code.sourceCode > span:empty { height: 1.2em; }
+    .sourceCode { overflow: visible; }
+    code.sourceCode > span { color: inherit; text-decoration: inherit; }
+    div.sourceCode { margin: 1em 0; }
+    pre.sourceCode { margin: 0; }
+    @media screen {
+    div.sourceCode { overflow: auto; }
+    }
+    @media print {
+    pre > code.sourceCode { white-space: pre-wrap; }
+    pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
+    }
+    pre.numberSource code
+      { counter-reset: source-line 0; }
+    pre.numberSource code > span
+      { position: relative; left: -4em; counter-increment: source-line; }
+    pre.numberSource code > span > a:first-child::before
+      { content: counter(source-line);
+        position: relative; left: -1em; text-align: right; vertical-align: baseline;
+        border: none; display: inline-block;
+        -webkit-touch-callout: none; -webkit-user-select: none;
+        -khtml-user-select: none; -moz-user-select: none;
+        -ms-user-select: none; user-select: none;
+        padding: 0 4px; width: 4em;
+        color: #aaaaaa;
+      }
+    pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
+    div.sourceCode
+      { color: #003b4f; background-color: #f1f3f5; }
+    @media screen {
+    pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
+    }
+    code span { color: #003b4f; } /* Normal */
+    code span.al { color: #ad0000; } /* Alert */
+    code span.an { color: #5e5e5e; } /* Annotation */
+    code span.at { color: #657422; } /* Attribute */
+    code span.bn { color: #ad0000; } /* BaseN */
+    code span.bu { } /* BuiltIn */
+    code span.cf { color: #003b4f; font-weight: bold; } /* ControlFlow */
+    code span.ch { color: #20794d; } /* Char */
+    code span.cn { color: #8f5902; } /* Constant */
+    code span.co { color: #5e5e5e; } /* Comment */
+    code span.cv { color: #5e5e5e; font-style: italic; } /* CommentVar */
+    code span.do { color: #5e5e5e; font-style: italic; } /* Documentation */
+    code span.dt { color: #ad0000; } /* DataType */
+    code span.dv { color: #ad0000; } /* DecVal */
+    code span.er { color: #ad0000; } /* Error */
+    code span.ex { } /* Extension */
+    code span.fl { color: #ad0000; } /* Float */
+    code span.fu { color: #4758ab; } /* Function */
+    code span.im { color: #00769e; } /* Import */
+    code span.in { color: #5e5e5e; } /* Information */
+    code span.kw { color: #003b4f; font-weight: bold; } /* Keyword */
+    code span.op { color: #5e5e5e; } /* Operator */
+    code span.ot { color: #003b4f; } /* Other */
+    code span.pp { color: #ad0000; } /* Preprocessor */
+    code span.sc { color: #5e5e5e; } /* SpecialChar */
+    code span.ss { color: #20794d; } /* SpecialString */
+    code span.st { color: #20794d; } /* String */
+    code span.va { color: #111111; } /* Variable */
+    code span.vs { color: #20794d; } /* VerbatimString */
+    code span.wa { color: #5e5e5e; font-style: italic; } /* Warning */
+  </style>
+  <link rel="stylesheet" href="../../site_libs/revealjs/dist/theme/quarto-534cd8e3a96973385dffff3f4709048d.css">
+  <link href="../../site_libs/revealjs/plugin/quarto-line-highlight/line-highlight.css" rel="stylesheet">
+  <link href="../../site_libs/revealjs/plugin/reveal-menu/menu.css" rel="stylesheet">
+  <link href="../../site_libs/revealjs/plugin/reveal-menu/quarto-menu.css" rel="stylesheet">
+  <link href="../../site_libs/revealjs/plugin/reveal-chalkboard/font-awesome/css/all.css" rel="stylesheet">
+  <link href="../../site_libs/revealjs/plugin/reveal-chalkboard/style.css" rel="stylesheet">
+  <link href="../../site_libs/revealjs/plugin/quarto-support/footer.css" rel="stylesheet">
+  <style type="text/css">
+    .reveal div.sourceCode {
+      margin: 0;
+      overflow: auto;
+    }
+    .reveal div.hanging-indent {
+      margin-left: 1em;
+      text-indent: -1em;
+    }
+    .reveal .slide:not(.center) {
+      height: 100%;
+    }
+    .reveal .slide.scrollable {
+      overflow-y: auto;
+    }
+    .reveal .footnotes {
+      height: 100%;
+      overflow-y: auto;
+    }
+    .reveal .slide .absolute {
+      position: absolute;
+      display: block;
+    }
+    .reveal .footnotes ol {
+      counter-reset: ol;
+      list-style-type: none; 
+      margin-left: 0;
+    }
+    .reveal .footnotes ol li:before {
+      counter-increment: ol;
+      content: counter(ol) ". "; 
+    }
+    .reveal .footnotes ol li > p:first-child {
+      display: inline-block;
+    }
+    .reveal .slide ul,
+    .reveal .slide ol {
+      margin-bottom: 0.5em;
+    }
+    .reveal .slide ul li,
+    .reveal .slide ol li {
+      margin-top: 0.4em;
+      margin-bottom: 0.2em;
+    }
+    .reveal .slide ul[role="tablist"] li {
+      margin-bottom: 0;
+    }
+    .reveal .slide ul li > *:first-child,
+    .reveal .slide ol li > *:first-child {
+      margin-block-start: 0;
+    }
+    .reveal .slide ul li > *:last-child,
+    .reveal .slide ol li > *:last-child {
+      margin-block-end: 0;
+    }
+    .reveal .slide .columns:nth-child(3) {
+      margin-block-start: 0.8em;
+    }
+    .reveal blockquote {
+      box-shadow: none;
+    }
+    .reveal .tippy-content>* {
+      margin-top: 0.2em;
+      margin-bottom: 0.7em;
+    }
+    .reveal .tippy-content>*:last-child {
+      margin-bottom: 0.2em;
+    }
+    .reveal .slide > img.stretch.quarto-figure-center,
+    .reveal .slide > img.r-stretch.quarto-figure-center {
+      display: block;
+      margin-left: auto;
+      margin-right: auto; 
+    }
+    .reveal .slide > img.stretch.quarto-figure-left,
+    .reveal .slide > img.r-stretch.quarto-figure-left  {
+      display: block;
+      margin-left: 0;
+      margin-right: auto; 
+    }
+    .reveal .slide > img.stretch.quarto-figure-right,
+    .reveal .slide > img.r-stretch.quarto-figure-right  {
+      display: block;
+      margin-left: auto;
+      margin-right: 0; 
+    }
+  </style>
+</head>
+<body class="quarto-light">
+  <div class="reveal">
+    <div class="slides">
+
+<section id="title-slide" class="quarto-title-block center">
+  <h1 class="title">Protocolos de Comunicación</h1>
+  <p class="subtitle">HTTP, WebSockets, Hooks personalizados y Recharts</p>
+
+<div class="quarto-title-authors">
+<div class="quarto-title-author">
+<div class="quarto-title-author-name">
+Javier Ribal del Río 
+</div>
+</div>
+</div>
+
+  <p class="date">2026-03-13</p>
+</section>
+<section class="slide level2">
+
+<p><strong>Contenido</strong></p>
+<ul>
+<li>HTTP básico para desarrollo web</li>
+<li>Métodos GET, POST, PUT, DELETE, HEAD</li>
+<li>WebSockets</li>
+<li>Hook personalizado para conexión en tiempo real</li>
+<li>Gráficas con Recharts</li>
+</ul>
+</section>
+<section id="http" class="slide level2">
+<h2>HTTP</h2>
+<h3 id="qué-es-http">¿Qué es HTTP?</h3>
+<p>HTTP (<em>HyperText Transfer Protocol</em>) es el protocolo fundamental de la web.</p>
+<p>Define cómo:</p>
+<ul>
+<li>El cliente (navegador o app)</li>
+<li>Solicita recursos</li>
+<li>A un servidor</li>
+</ul>
+</section>
+<section class="slide level2">
+
+<p>Modelo conceptual:</p>
+<pre><code>Cliente → Solicitud HTTP → Servidor
+Cliente ← Respuesta HTTP ← Servidor</code></pre>
+<p>HTTP es <strong>sin estado (stateless)</strong>.</p>
+<p>Cada petición es independiente.</p>
+</section>
+<section class="slide level2">
+
+<h3 id="componentes-de-una-petición">Componentes de una petición</h3>
+<p>Una petición HTTP contiene:</p>
+<ul>
+<li>Método</li>
+<li>URL</li>
+<li>Cabeceras (<em>headers</em>)</li>
+<li>Cuerpo (<em>body</em>, opcional)</li>
+</ul>
+<p>Ejemplo conceptual:</p>
+<pre><code>GET /users HTTP/1.1
+Host: api.example.com
+Authorization: Bearer token</code></pre>
+</section>
+<section class="slide level2">
+
+<h3 id="métodos-http-principales">Métodos HTTP principales</h3>
+<h4 id="get">GET</h4>
+<ul>
+<li>Solicita datos</li>
+<li>No modifica el servidor</li>
+<li>Debe ser idempotente</li>
+</ul>
+<p>Ejemplo:</p>
+<pre><code>GET /users</code></pre>
+</section>
+<section class="slide level2">
+
+<p>Uso típico en React:</p>
+<div class="code-copy-outer-scaffold"><div class="sourceCode" id="cb4"><pre class="sourceCode numberSource jsx number-lines code-with-copy"><code class="sourceCode javascriptreact"><span id="cb4-1"><a></a><span class="fu">fetch</span>(<span class="st">"/api/users"</span>)</span></code></pre></div><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></div>
+</section>
+<section class="slide level2">
+
+<h3 id="post">POST</h3>
+<ul>
+<li>Envía datos al servidor</li>
+<li>Crea recursos nuevos</li>
+<li>Tiene cuerpo</li>
+</ul>
+</section>
+<section class="slide level2">
+
+<p>Ejemplo:</p>
+<div class="code-copy-outer-scaffold"><div class="sourceCode" id="cb5"><pre class="sourceCode numberSource jsx number-lines code-with-copy"><code class="sourceCode javascriptreact"><span id="cb5-1"><a></a><span class="fu">fetch</span>(<span class="st">"/api/users"</span><span class="op">,</span> {</span>
+<span id="cb5-2"><a></a>  <span class="dt">method</span><span class="op">:</span> <span class="st">"POST"</span><span class="op">,</span></span>
+<span id="cb5-3"><a></a>  <span class="dt">body</span><span class="op">:</span> <span class="bu">JSON</span><span class="op">.</span><span class="fu">stringify</span>({ <span class="dt">name</span><span class="op">:</span> <span class="st">"Ana"</span> })<span class="op">,</span></span>
+<span id="cb5-4"><a></a>  <span class="dt">headers</span><span class="op">:</span> { <span class="st">"Content-Type"</span><span class="op">:</span> <span class="st">"application/json"</span> }</span>
+<span id="cb5-5"><a></a>})<span class="op">;</span></span></code></pre></div><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></div>
+</section>
+<section class="slide level2">
+
+<h3 id="put">PUT</h3>
+<ul>
+<li>Actualiza completamente un recurso existente</li>
+<li>Idempotente</li>
+</ul>
+<pre><code>PUT /users/3</code></pre>
+</section>
+<section class="slide level2">
+
+<h3 id="delete">DELETE</h3>
+<ul>
+<li>Elimina un recurso</li>
+</ul>
+<pre><code>DELETE /users/3</code></pre>
+</section>
+<section class="slide level2">
+
+<h3 id="head">HEAD</h3>
+<ul>
+<li>Igual que GET</li>
+<li>No devuelve cuerpo</li>
+<li>Solo cabeceras</li>
+</ul>
+<p>Se utiliza para:</p>
+<ul>
+<li>Comprobar existencia</li>
+<li>Tamaño</li>
+<li>Metadatos</li>
+</ul>
+</section>
+<section id="http-vs-comunicación-en-tiempo-real" class="slide level2">
+<h2>HTTP vs Comunicación en tiempo real</h2>
+<p>HTTP funciona bajo el modelo:</p>
+<blockquote>
+<p>Petición → Respuesta → Fin</p>
+</blockquote>
+<p>Si queremos datos continuamente:</p>
+<ul>
+<li>Debemos repetir peticiones</li>
+<li>Introduce latencia</li>
+<li>Ineficiente</li>
+</ul>
+<p>Solución: <strong>WebSockets</strong></p>
+</section>
+<section id="websockets" class="slide level2">
+<h2>WebSockets</h2>
+<p>WebSockets permiten comunicación bidireccional persistente.</p>
+<p>Características:</p>
+<ul>
+<li>Conexión permanente</li>
+<li>Cliente y servidor pueden enviar datos</li>
+<li>Baja latencia</li>
+<li>Ideal para tiempo real</li>
+</ul>
+</section>
+<section class="slide level2">
+
+<p>Ejemplos:</p>
+<ul>
+<li>Chats</li>
+<li>Juegos online</li>
+<li>Telemetría</li>
+<li>Trading</li>
+<li>Sistemas IoT</li>
+</ul>
+</section>
+<section class="slide level2">
+
+<h3 id="flujo-conceptual">Flujo conceptual</h3>
+<pre><code>Cliente ↔ Servidor
+     conexión abierta</code></pre>
+<p>No se crea una nueva conexión por mensaje.</p>
+</section>
+<section class="slide level2">
+
+<h3 id="creación-de-un-websocket-en-javascript">Creación de un WebSocket en JavaScript</h3>
+<div class="code-copy-outer-scaffold"><div class="sourceCode" id="cb9"><pre class="sourceCode numberSource jsx number-lines code-with-copy"><code class="sourceCode javascriptreact"><span id="cb9-1"><a></a><span class="kw">const</span> socket <span class="op">=</span> <span class="kw">new</span> <span class="bu">WebSocket</span>(<span class="st">"ws://localhost:8080"</span>)<span class="op">;</span></span></code></pre></div><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></div>
+<p>Eventos principales:</p>
+<ul>
+<li><code>onopen</code></li>
+<li><code>onmessage</code></li>
+<li><code>onclose</code></li>
+<li><code>onerror</code></li>
+</ul>
+</section>
+<section class="slide level2">
+
+<h3 id="recepción-de-mensajes">Recepción de mensajes</h3>
+<div class="code-copy-outer-scaffold"><div class="sourceCode" id="cb10"><pre class="sourceCode numberSource js number-lines code-with-copy"><code class="sourceCode javascript"><span id="cb10-1"><a></a>socket<span class="op">.</span><span class="at">onmessage</span> <span class="op">=</span> (<span class="bu">event</span>) <span class="kw">=&gt;</span> {</span>
+<span id="cb10-2"><a></a>  <span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(<span class="st">"Mensaje:"</span><span class="op">,</span> <span class="bu">event</span><span class="op">.</span><span class="at">data</span>)<span class="op">;</span></span>
+<span id="cb10-3"><a></a>}<span class="op">;</span></span></code></pre></div><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></div>
+</section>
+<section class="slide level2">
+
+<h3 id="envío-de-mensajes">Envío de mensajes</h3>
+<div class="code-copy-outer-scaffold"><div class="sourceCode" id="cb11"><pre class="sourceCode numberSource js number-lines code-with-copy"><code class="sourceCode javascript"><span id="cb11-1"><a></a>socket<span class="op">.</span><span class="fu">send</span>(<span class="st">"Hola servidor"</span>)<span class="op">;</span></span></code></pre></div><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></div>
+</section>
+<section id="hook-personalizado" class="slide level2">
+<h2>Hook Personalizado</h2>
+<p>Si usamos WebSockets directamente dentro del componente:</p>
+<ul>
+<li>Mezclamos lógica de conexión con renderizado</li>
+<li>Código difícil de reutilizar</li>
+<li>Problemas de ciclo de vida</li>
+</ul>
+<p>Solución: <strong>Hook personalizado</strong></p>
+</section>
+<section class="slide level2">
+
+<h3 id="hook-personalizado-1">Hook personalizado</h3>
+<p>Un hook personalizado es:</p>
+<blockquote>
+<p>Una función que utiliza hooks internos para encapsular lógica reutilizable</p>
+</blockquote>
+<p>Convención:</p>
+<pre><code>useNombre()</code></pre>
+</section>
+<section class="slide level2">
+
+<h3 id="hook-usewebsocket">Hook <code>useWebSocket</code></h3>
+<div class="code-copy-outer-scaffold"><div class="sourceCode" id="cb13"><pre class="sourceCode numberSource jsx number-lines code-with-copy"><code class="sourceCode javascriptreact"><span id="cb13-1"><a></a><span class="im">import</span> { useEffect<span class="op">,</span> useState } <span class="im">from</span> <span class="st">"react"</span><span class="op">;</span></span>
+<span id="cb13-2"><a></a></span>
+<span id="cb13-3"><a></a><span class="im">export</span> <span class="kw">function</span> <span class="fu">useWebSocket</span>(url) {</span>
+<span id="cb13-4"><a></a></span>
+<span id="cb13-5"><a></a>  <span class="kw">const</span> [data<span class="op">,</span> setData] <span class="op">=</span> <span class="fu">useState</span>(<span class="kw">null</span>)<span class="op">;</span></span>
+<span id="cb13-6"><a></a></span>
+<span id="cb13-7"><a></a>  <span class="fu">useEffect</span>(() <span class="kw">=&gt;</span> {</span>
+<span id="cb13-8"><a></a></span>
+<span id="cb13-9"><a></a>    <span class="kw">const</span> socket <span class="op">=</span> <span class="kw">new</span> <span class="bu">WebSocket</span>(url)<span class="op">;</span></span>
+<span id="cb13-10"><a></a></span>
+<span id="cb13-11"><a></a>    socket<span class="op">.</span><span class="at">onmessage</span> <span class="op">=</span> (<span class="bu">event</span>) <span class="kw">=&gt;</span> {</span>
+<span id="cb13-12"><a></a>      <span class="fu">setData</span>(<span class="bu">event</span><span class="op">.</span><span class="at">data</span>)<span class="op">;</span></span>
+<span id="cb13-13"><a></a>    }<span class="op">;</span></span>
+<span id="cb13-14"><a></a></span>
+<span id="cb13-15"><a></a>    <span class="cf">return</span> () <span class="kw">=&gt;</span> socket<span class="op">.</span><span class="fu">close</span>()<span class="op">;</span></span>
+<span id="cb13-16"><a></a></span>
+<span id="cb13-17"><a></a>  }<span class="op">,</span> [url])<span class="op">;</span></span>
+<span id="cb13-18"><a></a></span>
+<span id="cb13-19"><a></a>  <span class="cf">return</span> data<span class="op">;</span></span>
+<span id="cb13-20"><a></a>}</span></code></pre></div><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></div>
+</section>
+<section class="slide level2">
+
+<h3 id="análisis-conceptual">Análisis conceptual</h3>
+<ul>
+<li>Se crea la conexión al montar</li>
+<li>Se actualiza el estado al recibir datos</li>
+<li>Se cierra al desmontar</li>
+<li>El componente solo consume datos</li>
+</ul>
+</section>
+<section class="slide level2">
+
+<h3 id="uso-del-hook">Uso del hook</h3>
+<div class="code-copy-outer-scaffold"><div class="sourceCode" id="cb14"><pre class="sourceCode numberSource jsx number-lines code-with-copy"><code class="sourceCode javascriptreact"><span id="cb14-1"><a></a><span class="kw">function</span> <span class="fu">Monitor</span>() {</span>
+<span id="cb14-2"><a></a></span>
+<span id="cb14-3"><a></a>  <span class="kw">const</span> data <span class="op">=</span> <span class="fu">useWebSocket</span>(<span class="st">"ws://localhost:8080"</span>)<span class="op">;</span></span>
+<span id="cb14-4"><a></a></span>
+<span id="cb14-5"><a></a>  <span class="cf">return</span> (</span>
+<span id="cb14-6"><a></a>    <span class="kw">&lt;div&gt;</span></span>
+<span id="cb14-7"><a></a>      <span class="kw">&lt;h2&gt;</span>Datos en tiempo real<span class="kw">&lt;/h2&gt;</span></span>
+<span id="cb14-8"><a></a>      <span class="kw">&lt;p&gt;</span><span class="va">{</span>data<span class="va">}</span><span class="kw">&lt;/p&gt;</span></span>
+<span id="cb14-9"><a></a>    <span class="kw">&lt;/div&gt;</span></span>
+<span id="cb14-10"><a></a>  )<span class="op">;</span></span>
+<span id="cb14-11"><a></a>}</span></code></pre></div><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></div>
+</section>
+<section class="slide level2">
+
+<p>Flujo:</p>
+<ol type="1">
+<li>Componente se renderiza<br>
+</li>
+<li>Hook abre conexión<br>
+</li>
+<li>Llegan datos<br>
+</li>
+<li>Estado cambia<br>
+</li>
+<li>Nuevo render</li>
+</ol>
+</section>
+<section id="visualización-de-datos" class="slide level2">
+<h2>Visualización de datos</h2>
+<p>En aplicaciones reales no basta con mostrar texto.</p>
+<p>Necesitamos:</p>
+<ul>
+<li>Gráficas</li>
+<li>Paneles de control</li>
+<li>Visualización clara</li>
+</ul>
+<p>Una librería popular para React es <strong>Recharts</strong>.</p>
+</section>
+<section id="recharts" class="slide level2">
+<h2>Recharts</h2>
+<p>Recharts es una librería basada en:</p>
+<ul>
+<li>Componentes React</li>
+<li>SVG</li>
+<li>Composición declarativa</li>
+</ul>
+<p>Instalación:</p>
+<div class="code-copy-outer-scaffold"><div class="sourceCode" id="cb15"><pre class="sourceCode numberSource bash number-lines code-with-copy"><code class="sourceCode bash"><span id="cb15-1"><a></a><span class="ex">npm</span> install recharts</span></code></pre></div><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></div>
+</section>
+<section class="slide level2">
+
+<h3 id="ejemplo-básico">Ejemplo básico</h3>
+<div class="code-copy-outer-scaffold"><div class="sourceCode" id="cb16"><pre class="sourceCode numberSource jsx number-lines code-with-copy"><code class="sourceCode javascriptreact"><span id="cb16-1"><a></a><span class="im">import</span> {</span>
+<span id="cb16-2"><a></a>  LineChart<span class="op">,</span> Line<span class="op">,</span> XAxis<span class="op">,</span> YAxis<span class="op">,</span></span>
+<span id="cb16-3"><a></a>  CartesianGrid<span class="op">,</span> Tooltip</span>
+<span id="cb16-4"><a></a>} <span class="im">from</span> <span class="st">"recharts"</span><span class="op">;</span></span>
+<span id="cb16-5"><a></a></span>
+<span id="cb16-6"><a></a><span class="kw">const</span> data <span class="op">=</span> [</span>
+<span id="cb16-7"><a></a>  { <span class="dt">t</span><span class="op">:</span> <span class="dv">1</span><span class="op">,</span> <span class="dt">v</span><span class="op">:</span> <span class="dv">10</span> }<span class="op">,</span></span>
+<span id="cb16-8"><a></a>  { <span class="dt">t</span><span class="op">:</span> <span class="dv">2</span><span class="op">,</span> <span class="dt">v</span><span class="op">:</span> <span class="dv">15</span> }<span class="op">,</span></span>
+<span id="cb16-9"><a></a>  { <span class="dt">t</span><span class="op">:</span> <span class="dv">3</span><span class="op">,</span> <span class="dt">v</span><span class="op">:</span> <span class="dv">8</span> }</span>
+<span id="cb16-10"><a></a>]<span class="op">;</span></span>
+<span id="cb16-11"><a></a></span>
+<span id="cb16-12"><a></a><span class="kw">function</span> <span class="fu">Grafica</span>() {</span>
+<span id="cb16-13"><a></a>  <span class="cf">return</span> (</span>
+<span id="cb16-14"><a></a>    <span class="fu">&lt;LineChart</span> <span class="ot">width</span><span class="op">=</span><span class="va">{</span><span class="dv">400</span><span class="va">}</span> <span class="ot">height</span><span class="op">=</span><span class="va">{</span><span class="dv">300</span><span class="va">}</span> <span class="ot">data</span><span class="op">=</span><span class="va">{</span>data<span class="va">}</span><span class="fu">&gt;</span></span>
+<span id="cb16-15"><a></a>      <span class="fu">&lt;CartesianGrid</span> <span class="ot">stroke</span><span class="op">=</span><span class="st">"#ccc"</span> <span class="fu">/&gt;</span></span>
+<span id="cb16-16"><a></a>      <span class="fu">&lt;XAxis</span> <span class="ot">dataKey</span><span class="op">=</span><span class="st">"t"</span> <span class="fu">/&gt;</span></span>
+<span id="cb16-17"><a></a>      <span class="fu">&lt;YAxis</span> <span class="fu">/&gt;</span></span>
+<span id="cb16-18"><a></a>      <span class="fu">&lt;Tooltip</span> <span class="fu">/&gt;</span></span>
+<span id="cb16-19"><a></a>      <span class="fu">&lt;Line</span> <span class="ot">type</span><span class="op">=</span><span class="st">"monotone"</span> <span class="ot">dataKey</span><span class="op">=</span><span class="st">"v"</span> <span class="ot">stroke</span><span class="op">=</span><span class="st">"#8884d8"</span> <span class="fu">/&gt;</span></span>
+<span id="cb16-20"><a></a>    <span class="fu">&lt;/LineChart&gt;</span></span>
+<span id="cb16-21"><a></a>  )<span class="op">;</span></span>
+<span id="cb16-22"><a></a>}</span></code></pre></div><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></div>
+</section>
+<section class="slide level2">
+
+<h3 id="interpretación">Interpretación</h3>
+<p>Cada objeto representa un punto.</p>
+<pre><code>{ t: 1, v: 10 }</code></pre>
+<ul>
+<li><code>t</code> → eje X</li>
+<li><code>v</code> → eje Y</li>
+</ul>
+</section>
+<section id="integración-completa" class="slide level2">
+<h2>Integración completa</h2>
+<p>WebSocket + Hook + Recharts</p>
+<p>Objetivo:</p>
+<blockquote>
+<p>Visualizar datos en tiempo real</p>
+</blockquote>
+</section>
+<section class="slide level2">
+
+<h3 id="ejemplo-conceptual">Ejemplo conceptual</h3>
+<div class="code-copy-outer-scaffold"><div class="sourceCode" id="cb18"><pre class="sourceCode numberSource jsx number-lines code-with-copy"><code class="sourceCode javascriptreact"><span id="cb18-1"><a></a><span class="kw">function</span> <span class="fu">Dashboard</span>() {</span>
+<span id="cb18-2"><a></a></span>
+<span id="cb18-3"><a></a>  <span class="kw">const</span> data <span class="op">=</span> <span class="fu">useWebSocket</span>(<span class="st">"ws://localhost:8080"</span>)<span class="op">;</span></span>
+<span id="cb18-4"><a></a></span>
+<span id="cb18-5"><a></a>  <span class="kw">const</span> chartData <span class="op">=</span> data</span>
+<span id="cb18-6"><a></a>    <span class="op">?</span> <span class="bu">JSON</span><span class="op">.</span><span class="fu">parse</span>(data)</span>
+<span id="cb18-7"><a></a>    <span class="op">:</span> []<span class="op">;</span></span>
+<span id="cb18-8"><a></a></span>
+<span id="cb18-9"><a></a>  <span class="cf">return</span> (</span>
+<span id="cb18-10"><a></a>    <span class="fu">&lt;LineChart</span> <span class="ot">width</span><span class="op">=</span><span class="va">{</span><span class="dv">500</span><span class="va">}</span> <span class="ot">height</span><span class="op">=</span><span class="va">{</span><span class="dv">300</span><span class="va">}</span> <span class="ot">data</span><span class="op">=</span><span class="va">{</span>chartData<span class="va">}</span><span class="fu">&gt;</span></span>
+<span id="cb18-11"><a></a>      <span class="fu">&lt;XAxis</span> <span class="ot">dataKey</span><span class="op">=</span><span class="st">"time"</span> <span class="fu">/&gt;</span></span>
+<span id="cb18-12"><a></a>      <span class="fu">&lt;YAxis</span> <span class="fu">/&gt;</span></span>
+<span id="cb18-13"><a></a>      <span class="fu">&lt;Tooltip</span> <span class="fu">/&gt;</span></span>
+<span id="cb18-14"><a></a>      <span class="fu">&lt;Line</span> <span class="ot">dataKey</span><span class="op">=</span><span class="st">"value"</span> <span class="ot">stroke</span><span class="op">=</span><span class="st">"#82ca9d"</span> <span class="fu">/&gt;</span></span>
+<span id="cb18-15"><a></a>    <span class="fu">&lt;/LineChart&gt;</span></span>
+<span id="cb18-16"><a></a>  )<span class="op">;</span></span>
+<span id="cb18-17"><a></a>}</span></code></pre></div><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></div>
+</section>
+<section class="slide level2">
+
+<h3 id="flujo-completo-de-una-app-moderna">Flujo completo de una app moderna</h3>
+<pre><code>Servidor → WebSocket → Hook → Estado → React → Gráfica</code></pre>
+<p>Arquitectura típica de sistemas en tiempo real.</p>
+</section>
+<section id="material" class="slide level2">
+<h2>Material</h2>
+<p>Servidor de testing de <em>Python</em>: <a href="Server.py">Enlace</a>.</p>
+<p>Instalar <code>websockets</code> con <code>pip install websockets</code></p>
+<p>Tester de prueba: <a href="tester_http_ws_basic.html">Enlace</a> (click derecho guardar enlace como)</p>
+<p><a href="https://recharts.github.io/">https://recharts.github.io/</a></p>
+
+
+</section>
+    </div>
+  <div class="quarto-auto-generated-content" style="display: none;">
+<div class="footer footer-default">
+
+</div>
+</div></div>
+
+  <script>window.backupDefine = window.define; window.define = undefined;</script>
+  <script src="../../site_libs/revealjs/dist/reveal.js"></script>
+  <!-- reveal.js plugins -->
+  <script src="../../site_libs/revealjs/plugin/quarto-line-highlight/line-highlight.js"></script>
+  <script src="../../site_libs/revealjs/plugin/pdf-export/pdfexport.js"></script>
+  <script src="../../site_libs/revealjs/plugin/reveal-menu/menu.js"></script>
+  <script src="../../site_libs/revealjs/plugin/reveal-menu/quarto-menu.js"></script>
+  <script src="../../site_libs/revealjs/plugin/reveal-chalkboard/plugin.js"></script>
+  <script src="../../site_libs/revealjs/plugin/quarto-support/support.js"></script>
+  
+
+  <script src="../../site_libs/revealjs/plugin/notes/notes.js"></script>
+  <script src="../../site_libs/revealjs/plugin/search/search.js"></script>
+  <script src="../../site_libs/revealjs/plugin/zoom/zoom.js"></script>
+  <script src="../../site_libs/revealjs/plugin/math/math.js"></script>
+  <script>window.define = window.backupDefine; window.backupDefine = undefined;</script>
+
+  <script>
+
+      // Full list of configuration options available at:
+      // https://revealjs.com/config/
+      Reveal.initialize({
+'controlsAuto': true,
+'previewLinksAuto': false,
+'pdfSeparateFragments': false,
+'autoAnimateEasing': "ease",
+'autoAnimateDuration': 1,
+'autoAnimateUnmatched': true,
+'jumpToSlide': true,
+'menu': {"side":"left","useTextContentForMissingTitles":true,"markers":false,"loadIcons":false,"custom":[{"title":"Tools","icon":"<i class=\"fas fa-gear\"></i>","content":"<ul class=\"slide-menu-items\">\n<li class=\"slide-tool-item active\" data-item=\"0\"><a href=\"#\" onclick=\"RevealMenuToolHandlers.fullscreen(event)\"><kbd>f</kbd> Fullscreen</a></li>\n<li class=\"slide-tool-item\" data-item=\"1\"><a href=\"#\" onclick=\"RevealMenuToolHandlers.speakerMode(event)\"><kbd>s</kbd> Speaker View</a></li>\n<li class=\"slide-tool-item\" data-item=\"2\"><a href=\"#\" onclick=\"RevealMenuToolHandlers.overview(event)\"><kbd>o</kbd> Slide Overview</a></li>\n<li class=\"slide-tool-item\" data-item=\"3\"><a href=\"#\" onclick=\"RevealMenuToolHandlers.togglePdfExport(event)\"><kbd>e</kbd> PDF Export Mode</a></li>\n<li class=\"slide-tool-item\" data-item=\"4\"><a href=\"#\" onclick=\"RevealMenuToolHandlers.toggleScrollView(event)\"><kbd>r</kbd> Scroll View Mode</a></li>\n<li class=\"slide-tool-item\" data-item=\"5\"><a href=\"#\" onclick=\"RevealMenuToolHandlers.toggleChalkboard(event)\"><kbd>b</kbd> Toggle Chalkboard</a></li>\n<li class=\"slide-tool-item\" data-item=\"6\"><a href=\"#\" onclick=\"RevealMenuToolHandlers.toggleNotesCanvas(event)\"><kbd>c</kbd> Toggle Notes Canvas</a></li>\n<li class=\"slide-tool-item\" data-item=\"7\"><a href=\"#\" onclick=\"RevealMenuToolHandlers.downloadDrawings(event)\"><kbd>d</kbd> Download Drawings</a></li>\n<li class=\"slide-tool-item\" data-item=\"8\"><a href=\"#\" onclick=\"RevealMenuToolHandlers.keyboardHelp(event)\"><kbd>?</kbd> Keyboard Help</a></li>\n</ul>"}],"openButton":true},
+'chalkboard': {"buttons":true},
+'smaller': false,
+ 
+        // Display controls in the bottom right corner
+        controls: false,
+
+        // Help the user learn the controls by providing hints, for example by
+        // bouncing the down arrow when they first encounter a vertical slide
+        controlsTutorial: false,
+
+        // Determines where controls appear, "edges" or "bottom-right"
+        controlsLayout: 'edges',
+
+        // Visibility rule for backwards navigation arrows; "faded", "hidden"
+        // or "visible"
+        controlsBackArrows: 'faded',
+
+        // Display a presentation progress bar
+        progress: true,
+
+        // Display the page number of the current slide
+        slideNumber: false,
+
+        // 'all', 'print', or 'speaker'
+        showSlideNumber: 'all',
+
+        // Add the current slide number to the URL hash so that reloading the
+        // page/copying the URL will return you to the same slide
+        hash: true,
+
+        // Start with 1 for the hash rather than 0
+        hashOneBasedIndex: false,
+
+        // Flags if we should monitor the hash and change slides accordingly
+        respondToHashChanges: true,
+
+        // Push each slide change to the browser history
+        history: false,
+
+        // Enable keyboard shortcuts for navigation
+        keyboard: true,
+
+        // Enable the slide overview mode
+        overview: true,
+
+        // Disables the default reveal.js slide layout (scaling and centering)
+        // so that you can use custom CSS layout
+        disableLayout: false,
+
+        // Vertical centering of slides
+        center: false,
+
+        // Enables touch navigation on devices with touch input
+        touch: true,
+
+        // Loop the presentation
+        loop: false,
+
+        // Change the presentation direction to be RTL
+        rtl: false,
+
+        // see https://revealjs.com/vertical-slides/#navigation-mode
+        navigationMode: 'linear',
+
+        // Randomizes the order of slides each time the presentation loads
+        shuffle: false,
+
+        // Turns fragments on and off globally
+        fragments: true,
+
+        // Flags whether to include the current fragment in the URL,
+        // so that reloading brings you to the same fragment position
+        fragmentInURL: false,
+
+        // Flags if the presentation is running in an embedded mode,
+        // i.e. contained within a limited portion of the screen
+        embedded: false,
+
+        // Flags if we should show a help overlay when the questionmark
+        // key is pressed
+        help: true,
+
+        // Flags if it should be possible to pause the presentation (blackout)
+        pause: true,
+
+        // Flags if speaker notes should be visible to all viewers
+        showNotes: false,
+
+        // Global override for autoplaying embedded media (null/true/false)
+        autoPlayMedia: null,
+
+        // Global override for preloading lazy-loaded iframes (null/true/false)
+        preloadIframes: null,
+
+        // Number of milliseconds between automatically proceeding to the
+        // next slide, disabled when set to 0, this value can be overwritten
+        // by using a data-autoslide attribute on your slides
+        autoSlide: 0,
+
+        // Stop auto-sliding after user input
+        autoSlideStoppable: true,
+
+        // Use this method for navigation when auto-sliding
+        autoSlideMethod: null,
+
+        // Specify the average time in seconds that you think you will spend
+        // presenting each slide. This is used to show a pacing timer in the
+        // speaker view
+        defaultTiming: null,
+
+        // Enable slide navigation via mouse wheel
+        mouseWheel: false,
+
+        // The display mode that will be used to show slides
+        display: 'block',
+
+        // Hide cursor if inactive
+        hideInactiveCursor: true,
+
+        // Time before the cursor is hidden (in ms)
+        hideCursorTime: 5000,
+
+        // Opens links in an iframe preview overlay
+        previewLinks: false,
+
+        // Transition style (none/fade/slide/convex/concave/zoom)
+        transition: 'none',
+
+        // Transition speed (default/fast/slow)
+        transitionSpeed: 'default',
+
+        // Transition style for full page slide backgrounds
+        // (none/fade/slide/convex/concave/zoom)
+        backgroundTransition: 'none',
+
+        // Number of slides away from the current that are visible
+        viewDistance: 3,
+
+        // Number of slides away from the current that are visible on mobile
+        // devices. It is advisable to set this to a lower number than
+        // viewDistance in order to save resources.
+        mobileViewDistance: 2,
+
+        // Parallax background image
+        parallaxBackgroundImage: '../../img/fondo.png', // e.g. "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'"
+
+        // Parallax background size
+        parallaxBackgroundSize: 'cover', // CSS syntax, e.g. "2100px 900px"
+
+        // The "normal" size of the presentation, aspect ratio will be preserved
+        // when the presentation is scaled to fit different resolutions. Can be
+        // specified using percentage units.
+        width: 1050,
+
+        height: 700,
+
+        // Factor of the display size that should remain empty around the content
+        margin: 0.1,
+
+        math: {
+          mathjax: 'https://cdn.jsdelivr.net/npm/mathjax@2.7.9/MathJax.js',
+          config: 'TeX-AMS_HTML-full',
+          tex2jax: {
+            inlineMath: [['\\(','\\)']],
+            displayMath: [['\\[','\\]']],
+            balanceBraces: true,
+            processEscapes: false,
+            processRefs: true,
+            processEnvironments: true,
+            preview: 'TeX',
+            skipTags: ['script','noscript','style','textarea','pre','code'],
+            ignoreClass: 'tex2jax_ignore',
+            processClass: 'tex2jax_process'
+          },
+        },
+
+        // reveal.js plugins
+        plugins: [QuartoLineHighlight, PdfExport, RevealMenu, RevealChalkboard, QuartoSupport,
+
+          RevealMath,
+          RevealNotes,
+          RevealSearch,
+          RevealZoom
+        ]
+      });
+    </script>
+    <script id="quarto-html-after-body" type="application/javascript">
+      window.document.addEventListener("DOMContentLoaded", function (event) {
+        const tabsets =  window.document.querySelectorAll(".panel-tabset-tabby")
+        tabsets.forEach(function(tabset) {
+          const tabby = new Tabby('#' + tabset.id);
+        });
+        const isCodeAnnotation = (el) => {
+          for (const clz of el.classList) {
+            if (clz.startsWith('code-annotation-')) {                     
+              return true;
+            }
+          }
+          return false;
+        }
+        const onCopySuccess = function(e) {
+          // button target
+          const button = e.trigger;
+          // don't keep focus
+          button.blur();
+          // flash "checked"
+          button.classList.add('code-copy-button-checked');
+          var currentTitle = button.getAttribute("title");
+          button.setAttribute("title", "Copied!");
+          let tooltip;
+          if (window.bootstrap) {
+            button.setAttribute("data-bs-toggle", "tooltip");
+            button.setAttribute("data-bs-placement", "left");
+            button.setAttribute("data-bs-title", "Copied!");
+            tooltip = new bootstrap.Tooltip(button, 
+              { trigger: "manual", 
+                customClass: "code-copy-button-tooltip",
+                offset: [0, -8]});
+            tooltip.show();    
+          }
+          setTimeout(function() {
+            if (tooltip) {
+              tooltip.hide();
+              button.removeAttribute("data-bs-title");
+              button.removeAttribute("data-bs-toggle");
+              button.removeAttribute("data-bs-placement");
+            }
+            button.setAttribute("title", currentTitle);
+            button.classList.remove('code-copy-button-checked');
+          }, 1000);
+          // clear code selection
+          e.clearSelection();
+        }
+        const getTextToCopy = function(trigger) {
+          const outerScaffold = trigger.parentElement.cloneNode(true);
+          const codeEl = outerScaffold.querySelector('code');
+          for (const childEl of codeEl.children) {
+            if (isCodeAnnotation(childEl)) {
+              childEl.remove();
+            }
+          }
+          return codeEl.innerText;
+        }
+        const clipboard = new window.ClipboardJS('.code-copy-button:not([data-in-quarto-modal])', {
+          text: getTextToCopy
+        });
+        clipboard.on('success', onCopySuccess);
+        if (window.document.getElementById('quarto-embedded-source-code-modal')) {
+          const clipboardModal = new window.ClipboardJS('.code-copy-button[data-in-quarto-modal]', {
+            text: getTextToCopy,
+            container: window.document.getElementById('quarto-embedded-source-code-modal')
+          });
+          clipboardModal.on('success', onCopySuccess);
+        }
+          var localhostRegex = new RegExp(/^(?:http|https):\/\/localhost\:?[0-9]*\//);
+          var mailtoRegex = new RegExp(/^mailto:/);
+            var filterRegex = new RegExp('/' + window.location.host + '/');
+          var isInternal = (href) => {
+              return filterRegex.test(href) || localhostRegex.test(href) || mailtoRegex.test(href);
+          }
+          // Inspect non-navigation links and adorn them if external
+         var links = window.document.querySelectorAll('a[href]:not(.nav-link):not(.navbar-brand):not(.toc-action):not(.sidebar-link):not(.sidebar-item-toggle):not(.pagination-link):not(.no-external):not([aria-hidden]):not(.dropdown-item):not(.quarto-navigation-tool):not(.about-link)');
+          for (var i=0; i<links.length; i++) {
+            const link = links[i];
+            if (!isInternal(link.href)) {
+              // undo the damage that might have been done by quarto-nav.js in the case of
+              // links that we want to consider external
+              if (link.dataset.originalHref !== undefined) {
+                link.href = link.dataset.originalHref;
+              }
+            }
+          }
+        function tippyHover(el, contentFn, onTriggerFn, onUntriggerFn) {
+          const config = {
+            allowHTML: true,
+            maxWidth: 500,
+            delay: 100,
+            arrow: false,
+            appendTo: function(el) {
+                return el.closest('section.slide') || el.parentElement;
+            },
+            interactive: true,
+            interactiveBorder: 10,
+            theme: 'light-border',
+            placement: 'bottom-start',
+          };
+          if (contentFn) {
+            config.content = contentFn;
+          }
+          if (onTriggerFn) {
+            config.onTrigger = onTriggerFn;
+          }
+          if (onUntriggerFn) {
+            config.onUntrigger = onUntriggerFn;
+          }
+            config['offset'] = [0,0];
+            config['maxWidth'] = 700;
+          window.tippy(el, config); 
+        }
+        const noterefs = window.document.querySelectorAll('a[role="doc-noteref"]');
+        for (var i=0; i<noterefs.length; i++) {
+          const ref = noterefs[i];
+          tippyHover(ref, function() {
+            // use id or data attribute instead here
+            let href = ref.getAttribute('data-footnote-href') || ref.getAttribute('href');
+            try { href = new URL(href).hash; } catch {}
+            const id = href.replace(/^#\/?/, "");
+            const note = window.document.getElementById(id);
+            if (note) {
+              return note.innerHTML;
+            } else {
+              return "";
+            }
+          });
+        }
+        const findCites = (el) => {
+          const parentEl = el.parentElement;
+          if (parentEl) {
+            const cites = parentEl.dataset.cites;
+            if (cites) {
+              return {
+                el,
+                cites: cites.split(' ')
+              };
+            } else {
+              return findCites(el.parentElement)
+            }
+          } else {
+            return undefined;
+          }
+        };
+        var bibliorefs = window.document.querySelectorAll('a[role="doc-biblioref"]');
+        for (var i=0; i<bibliorefs.length; i++) {
+          const ref = bibliorefs[i];
+          const citeInfo = findCites(ref);
+          if (citeInfo) {
+            tippyHover(citeInfo.el, function() {
+              var popup = window.document.createElement('div');
+              citeInfo.cites.forEach(function(cite) {
+                var citeDiv = window.document.createElement('div');
+                citeDiv.classList.add('hanging-indent');
+                citeDiv.classList.add('csl-entry');
+                var biblioDiv = window.document.getElementById('ref-' + cite);
+                if (biblioDiv) {
+                  citeDiv.innerHTML = biblioDiv.innerHTML;
+                }
+                popup.appendChild(citeDiv);
+              });
+              return popup.innerHTML;
+            });
+          }
+        }
+      });
+      </script>
+    
+
+</body></html>
\ No newline at end of file
diff --git a/docs/pages/Bloque4/Server.py b/docs/pages/Bloque4/Server.py
new file mode 100644
index 0000000..fdd1099
--- /dev/null
+++ b/docs/pages/Bloque4/Server.py
@@ -0,0 +1,123 @@
+import asyncio
+import json
+import random
+import threading
+from http.server import BaseHTTPRequestHandler, HTTPServer
+from datetime import datetime
+
+import websockets
+
+
+# =========================================================
+# HTTP SERVER — PORT 3001
+# =========================================================
+
+class TestHandler(BaseHTTPRequestHandler):
+
+    # ----------- CORS HEADERS -----------
+
+    def _set_cors_headers(self):
+        self.send_header("Access-Control-Allow-Origin", "*")
+        self.send_header("Access-Control-Allow-Methods", "GET, POST, OPTIONS")
+        self.send_header("Access-Control-Allow-Headers", "Content-Type")
+
+    # ----------- OPTIONS (PRE-FLIGHT) -----------
+
+    def do_OPTIONS(self):
+        self.send_response(200)
+        self._set_cors_headers()
+        self.end_headers()
+
+    # ----------- COMMON HANDLER -----------
+
+    def _handle_request(self):
+        content_length = int(self.headers.get('Content-Length', 0))
+        body = self.rfile.read(content_length) if content_length > 0 else b''
+
+        print("\n==============================")
+        print("HTTP REQUEST RECEIVED")
+        print("Method:", self.command)
+        print("Path:", self.path)
+        print("Headers:", dict(self.headers))
+        print("Body:", body.decode(errors="ignore"))
+        print("==============================\n")
+
+        self.send_response(200)
+        self._set_cors_headers()
+        self.send_header("Content-Type", "text/plain")
+        self.end_headers()
+
+        self.wfile.write(b"OK")
+
+    def do_GET(self):
+        self._handle_request()
+
+    def do_POST(self):
+        self._handle_request()
+
+    def log_message(self, format, *args):
+        return
+
+
+def run_http_server():
+    server = HTTPServer(("0.0.0.0", 3001), TestHandler)
+    print("HTTP server listening on port 3001")
+    server.serve_forever()
+
+
+# =========================================================
+# WEBSOCKET SERVER — PORT 3002
+# =========================================================
+
+async def ws_handler(websocket):
+    print("WebSocket client connected")
+
+    data_buffer = []
+
+    try:
+        while True:
+            value = random.uniform(0, 100)
+
+            data_buffer.append({
+                "time": datetime.now().strftime("%H:%M:%S"),
+                "value": value
+            })
+
+            data_buffer = data_buffer[-20:]
+
+            await websocket.send(json.dumps(data_buffer))
+            await asyncio.sleep(1)
+
+    except websockets.exceptions.ConnectionClosedOK:
+        print("Client disconnected normally")
+
+    except websockets.exceptions.ConnectionClosedError:
+        print("Client disconnected with error")
+
+
+async def run_ws_server():
+    print("WebSocket server listening on port 3002")
+
+    async with websockets.serve(
+        ws_handler,
+        "0.0.0.0",
+        3002
+    ):
+        await asyncio.Future()
+
+
+# =========================================================
+# MAIN
+# =========================================================
+
+if __name__ == "__main__":
+
+    print("\n=== TEST SERVER STARTING ===")
+
+    http_thread = threading.Thread(
+        target=run_http_server,
+        daemon=True
+    )
+    http_thread.start()
+
+    asyncio.run(run_ws_server())
\ No newline at end of file
diff --git a/docs/pages/Bloque4/protocolos.html b/docs/pages/Bloque4/protocolos.html
new file mode 100644
index 0000000..c7f338a
--- /dev/null
+++ b/docs/pages/Bloque4/protocolos.html
@@ -0,0 +1,1454 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es"><head>
+
+<meta charset="utf-8">
+<meta name="generator" content="quarto-1.8.27">
+
+<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
+
+<meta name="author" content="Javier Ribal del Río">
+
+<title>Protocolos de Comunicación – Training Center SW</title>
+<style>
+code{white-space: pre-wrap;}
+span.smallcaps{font-variant: small-caps;}
+div.columns{display: flex; gap: min(4vw, 1.5em);}
+div.column{flex: auto; overflow-x: auto;}
+div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
+ul.task-list{list-style: none;}
+ul.task-list li input[type="checkbox"] {
+  width: 0.8em;
+  margin: 0 0.8em 0.2em -1em; /* quarto-specific, see https://github.com/quarto-dev/quarto-cli/issues/4556 */ 
+  vertical-align: middle;
+}
+/* CSS for syntax highlighting */
+html { -webkit-text-size-adjust: 100%; }
+pre > code.sourceCode { white-space: pre; position: relative; }
+pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode > span:empty { height: 1.2em; }
+.sourceCode { overflow: visible; }
+code.sourceCode > span { color: inherit; text-decoration: inherit; }
+div.sourceCode { margin: 1em 0; }
+pre.sourceCode { margin: 0; }
+@media screen {
+div.sourceCode { overflow: auto; }
+}
+@media print {
+pre > code.sourceCode { white-space: pre-wrap; }
+pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
+}
+pre.numberSource code
+  { counter-reset: source-line 0; }
+pre.numberSource code > span
+  { position: relative; left: -4em; counter-increment: source-line; }
+pre.numberSource code > span > a:first-child::before
+  { content: counter(source-line);
+    position: relative; left: -1em; text-align: right; vertical-align: baseline;
+    border: none; display: inline-block;
+    -webkit-touch-callout: none; -webkit-user-select: none;
+    -khtml-user-select: none; -moz-user-select: none;
+    -ms-user-select: none; user-select: none;
+    padding: 0 4px; width: 4em;
+  }
+pre.numberSource { margin-left: 3em;  padding-left: 4px; }
+div.sourceCode
+  {   }
+@media screen {
+pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
+}
+</style>
+
+
+<script src="../../site_libs/quarto-nav/quarto-nav.js"></script>
+<script src="../../site_libs/quarto-nav/headroom.min.js"></script>
+<script src="../../site_libs/clipboard/clipboard.min.js"></script>
+<script src="../../site_libs/quarto-search/autocomplete.umd.js"></script>
+<script src="../../site_libs/quarto-search/fuse.min.js"></script>
+<script src="../../site_libs/quarto-search/quarto-search.js"></script>
+<meta name="quarto:offset" content="../../">
+<script src="../../site_libs/quarto-html/quarto.js" type="module"></script>
+<script src="../../site_libs/quarto-html/tabsets/tabsets.js" type="module"></script>
+<script src="../../site_libs/quarto-html/axe/axe-check.js" type="module"></script>
+<script src="../../site_libs/quarto-html/popper.min.js"></script>
+<script src="../../site_libs/quarto-html/tippy.umd.min.js"></script>
+<script src="../../site_libs/quarto-html/anchor.min.js"></script>
+<link href="../../site_libs/quarto-html/tippy.css" rel="stylesheet">
+<link href="../../site_libs/quarto-html/quarto-syntax-highlighting-ed96de9b727972fe78a7b5d16c58bf87.css" rel="stylesheet" class="quarto-color-scheme" id="quarto-text-highlighting-styles">
+<link href="../../site_libs/quarto-html/quarto-syntax-highlighting-dark-4d9afe2b8d18ee9fa5d0d57b5ed4214d.css" rel="stylesheet" class="quarto-color-scheme quarto-color-alternate" id="quarto-text-highlighting-styles">
+<link href="../../site_libs/quarto-html/quarto-syntax-highlighting-ed96de9b727972fe78a7b5d16c58bf87.css" rel="stylesheet" class="quarto-color-scheme-extra" id="quarto-text-highlighting-styles">
+<script src="../../site_libs/bootstrap/bootstrap.min.js"></script>
+<link href="../../site_libs/bootstrap/bootstrap-icons.css" rel="stylesheet">
+<link href="../../site_libs/bootstrap/bootstrap-7010b3c259c44ebb4b6b7a5b7b7107e0.min.css" rel="stylesheet" append-hash="true" class="quarto-color-scheme" id="quarto-bootstrap" data-mode="light">
+<link href="../../site_libs/bootstrap/bootstrap-dark-036d13c4e18d8d7539729d541f55cf23.min.css" rel="stylesheet" append-hash="true" class="quarto-color-scheme quarto-color-alternate" id="quarto-bootstrap" data-mode="dark">
+<link href="../../site_libs/bootstrap/bootstrap-7010b3c259c44ebb4b6b7a5b7b7107e0.min.css" rel="stylesheet" append-hash="true" class="quarto-color-scheme-extra" id="quarto-bootstrap" data-mode="light">
+<script id="quarto-search-options" type="application/json">{
+  "location": "sidebar",
+  "copy-button": false,
+  "collapse-after": 3,
+  "panel-placement": "start",
+  "type": "textbox",
+  "limit": 50,
+  "keyboard-shortcut": [
+    "f",
+    "/",
+    "s"
+  ],
+  "show-item-context": false,
+  "language": {
+    "search-no-results-text": "No se han encontrado resultados",
+    "search-matching-documents-text": "documentos encontrados",
+    "search-copy-link-title": "Copiar el enlace en la búsqueda",
+    "search-hide-matches-text": "Ocultar resultados adicionales",
+    "search-more-match-text": "resultado adicional en este documento",
+    "search-more-matches-text": "resultados adicionales en este documento",
+    "search-clear-button-title": "Borrar",
+    "search-text-placeholder": "",
+    "search-detached-cancel-button-title": "Cancelar",
+    "search-submit-button-title": "Enviar",
+    "search-label": "Buscar"
+  }
+}</script>
+
+
+<link rel="stylesheet" href="../../style/main.css">
+</head>
+
+<body class="nav-sidebar docked quarto-light"><script id="quarto-html-before-body" type="application/javascript">
+    const toggleBodyColorMode = (bsSheetEl) => {
+      const mode = bsSheetEl.getAttribute("data-mode");
+      const bodyEl = window.document.querySelector("body");
+      if (mode === "dark") {
+        bodyEl.classList.add("quarto-dark");
+        bodyEl.classList.remove("quarto-light");
+      } else {
+        bodyEl.classList.add("quarto-light");
+        bodyEl.classList.remove("quarto-dark");
+      }
+    }
+    const toggleBodyColorPrimary = () => {
+      const bsSheetEl = window.document.querySelector("link#quarto-bootstrap:not([rel=disabled-stylesheet])");
+      if (bsSheetEl) {
+        toggleBodyColorMode(bsSheetEl);
+      }
+    }
+    const setColorSchemeToggle = (alternate) => {
+      const toggles = window.document.querySelectorAll('.quarto-color-scheme-toggle');
+      for (let i=0; i < toggles.length; i++) {
+        const toggle = toggles[i];
+        if (toggle) {
+          if (alternate) {
+            toggle.classList.add("alternate");
+          } else {
+            toggle.classList.remove("alternate");
+          }
+        }
+      }
+    };
+    const toggleColorMode = (alternate) => {
+      // Switch the stylesheets
+      const primaryStylesheets = window.document.querySelectorAll('link.quarto-color-scheme:not(.quarto-color-alternate)');
+      const alternateStylesheets = window.document.querySelectorAll('link.quarto-color-scheme.quarto-color-alternate');
+      manageTransitions('#quarto-margin-sidebar .nav-link', false);
+      if (alternate) {
+        // note: dark is layered on light, we don't disable primary!
+        enableStylesheet(alternateStylesheets);
+        for (const sheetNode of alternateStylesheets) {
+          if (sheetNode.id === "quarto-bootstrap") {
+            toggleBodyColorMode(sheetNode);
+          }
+        }
+      } else {
+        disableStylesheet(alternateStylesheets);
+        enableStylesheet(primaryStylesheets)
+        toggleBodyColorPrimary();
+      }
+      manageTransitions('#quarto-margin-sidebar .nav-link', true);
+      // Switch the toggles
+      setColorSchemeToggle(alternate)
+      // Hack to workaround the fact that safari doesn't
+      // properly recolor the scrollbar when toggling (#1455)
+      if (navigator.userAgent.indexOf('Safari') > 0 && navigator.userAgent.indexOf('Chrome') == -1) {
+        manageTransitions("body", false);
+        window.scrollTo(0, 1);
+        setTimeout(() => {
+          window.scrollTo(0, 0);
+          manageTransitions("body", true);
+        }, 40);
+      }
+    }
+    const disableStylesheet = (stylesheets) => {
+      for (let i=0; i < stylesheets.length; i++) {
+        const stylesheet = stylesheets[i];
+        stylesheet.rel = 'disabled-stylesheet';
+      }
+    }
+    const enableStylesheet = (stylesheets) => {
+      for (let i=0; i < stylesheets.length; i++) {
+        const stylesheet = stylesheets[i];
+        if(stylesheet.rel !== 'stylesheet') { // for Chrome, which will still FOUC without this check
+          stylesheet.rel = 'stylesheet';
+        }
+      }
+    }
+    const manageTransitions = (selector, allowTransitions) => {
+      const els = window.document.querySelectorAll(selector);
+      for (let i=0; i < els.length; i++) {
+        const el = els[i];
+        if (allowTransitions) {
+          el.classList.remove('notransition');
+        } else {
+          el.classList.add('notransition');
+        }
+      }
+    }
+    const isFileUrl = () => {
+      return window.location.protocol === 'file:';
+    }
+    const hasAlternateSentinel = () => {
+      let styleSentinel = getColorSchemeSentinel();
+      if (styleSentinel !== null) {
+        return styleSentinel === "alternate";
+      } else {
+        return false;
+      }
+    }
+    const setStyleSentinel = (alternate) => {
+      const value = alternate ? "alternate" : "default";
+      if (!isFileUrl()) {
+        window.localStorage.setItem("quarto-color-scheme", value);
+      } else {
+        localAlternateSentinel = value;
+      }
+    }
+    const getColorSchemeSentinel = () => {
+      if (!isFileUrl()) {
+        const storageValue = window.localStorage.getItem("quarto-color-scheme");
+        return storageValue != null ? storageValue : localAlternateSentinel;
+      } else {
+        return localAlternateSentinel;
+      }
+    }
+    const toggleGiscusIfUsed = (isAlternate, darkModeDefault) => {
+      const baseTheme = document.querySelector('#giscus-base-theme')?.value ?? 'light';
+      const alternateTheme = document.querySelector('#giscus-alt-theme')?.value ?? 'dark';
+      let newTheme = '';
+      if(authorPrefersDark) {
+        newTheme = isAlternate ? baseTheme : alternateTheme;
+      } else {
+        newTheme = isAlternate ? alternateTheme : baseTheme;
+      }
+      const changeGiscusTheme = () => {
+        // From: https://github.com/giscus/giscus/issues/336
+        const sendMessage = (message) => {
+          const iframe = document.querySelector('iframe.giscus-frame');
+          if (!iframe) return;
+          iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
+        }
+        sendMessage({
+          setConfig: {
+            theme: newTheme
+          }
+        });
+      }
+      const isGiscussLoaded = window.document.querySelector('iframe.giscus-frame') !== null;
+      if (isGiscussLoaded) {
+        changeGiscusTheme();
+      }
+    };
+    const authorPrefersDark = false;
+    const darkModeDefault = authorPrefersDark;
+      document.querySelector('link#quarto-text-highlighting-styles.quarto-color-scheme-extra').rel = 'disabled-stylesheet';
+      document.querySelector('link#quarto-bootstrap.quarto-color-scheme-extra').rel = 'disabled-stylesheet';
+    let localAlternateSentinel = darkModeDefault ? 'alternate' : 'default';
+    // Dark / light mode switch
+    window.quartoToggleColorScheme = () => {
+      // Read the current dark / light value
+      let toAlternate = !hasAlternateSentinel();
+      toggleColorMode(toAlternate);
+      setStyleSentinel(toAlternate);
+      toggleGiscusIfUsed(toAlternate, darkModeDefault);
+      window.dispatchEvent(new Event('resize'));
+    };
+    // Switch to dark mode if need be
+    if (hasAlternateSentinel()) {
+      toggleColorMode(true);
+    } else {
+      toggleColorMode(false);
+    }
+  </script>
+
+<div id="quarto-search-results"></div>
+  <header id="quarto-header" class="headroom fixed-top">
+  <nav class="quarto-secondary-nav">
+    <div class="container-fluid d-flex">
+      <button type="button" class="quarto-btn-toggle btn" data-bs-toggle="collapse" role="button" data-bs-target=".quarto-sidebar-collapse-item" aria-controls="quarto-sidebar" aria-expanded="false" aria-label="Alternar barra lateral" onclick="if (window.quartoToggleHeadroom) { window.quartoToggleHeadroom(); }">
+        <i class="bi bi-layout-text-sidebar-reverse"></i>
+      </button>
+        <nav class="quarto-page-breadcrumbs" aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item">Bloque IV Comunicación</li><li class="breadcrumb-item"><a href="../../pages/Bloque4/protocolos.html">Semana 11</a></li><li class="breadcrumb-item"><a href="../../pages/Bloque4/protocolos.html">Protocolos de Comunicación</a></li></ol></nav>
+        <a class="flex-grow-1" role="navigation" data-bs-toggle="collapse" data-bs-target=".quarto-sidebar-collapse-item" aria-controls="quarto-sidebar" aria-expanded="false" aria-label="Alternar barra lateral" onclick="if (window.quartoToggleHeadroom) { window.quartoToggleHeadroom(); }">      
+        </a>
+    </div>
+  </nav>
+</header>
+<!-- content -->
+<div id="quarto-content" class="quarto-container page-columns page-rows-contents page-layout-article">
+<!-- sidebar -->
+  <nav id="quarto-sidebar" class="sidebar collapse collapse-horizontal quarto-sidebar-collapse-item sidebar-navigation docked overflow-auto">
+    <div class="pt-lg-2 mt-2 text-center sidebar-header sidebar-header-stacked">
+      <a href="../../index.html" class="sidebar-logo-link">
+      <img src="../../public/logo-text.png" alt="" class="sidebar-logo light-content py-0 d-lg-inline d-none">
+      <img src="../../public/logo-text.png" alt="" class="sidebar-logo dark-content py-0 d-lg-inline d-none">
+      </a>
+    <div class="sidebar-title mb-0 py-0">
+      <a href="../../">Training Center SW</a> 
+        <div class="sidebar-tools-main">
+  <a href="" class="quarto-color-scheme-toggle quarto-navigation-tool  px-1" onclick="window.quartoToggleColorScheme(); return false;" title="Alternar modo oscuro"><i class="bi"></i></a>
+</div>
+    </div>
+      </div>
+    <div class="sidebar-menu-container"> 
+    <ul class="list-unstyled mt-1">
+        <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../index.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">Programa TC</span></a>
+  </div>
+</li>
+        <li class="sidebar-item sidebar-item-section">
+      <div class="sidebar-item-container"> 
+            <a href="../../pages/Bloque1/bloque1.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">Bloque I Introducción</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-1" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-1" class="collapse list-unstyled sidebar-section depth1 ">  
+          <li class="sidebar-item sidebar-item-section">
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-2" role="navigation" aria-expanded="false">
+ <span class="menu-text">Semana 0</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-2" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-2" class="collapse list-unstyled sidebar-section depth2 ">  
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque1/entorno.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">Preparación del entorno de trabajo</span></a>
+  </div>
+</li>
+      </ul>
+  </li>
+          <li class="sidebar-item sidebar-item-section">
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-3" role="navigation" aria-expanded="false">
+ <span class="menu-text">Semana 1</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-3" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-3" class="collapse list-unstyled sidebar-section depth2 ">  
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque1/html.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">HTML</span></a>
+  </div>
+</li>
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque1/t1.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">T1: Web de HL I</span></a>
+  </div>
+</li>
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque1/MAhtml2.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">MA: Mas HTML</span></a>
+  </div>
+</li>
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque1/t1a.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">TA1: Mi CV I</span></a>
+  </div>
+</li>
+      </ul>
+  </li>
+          <li class="sidebar-item sidebar-item-section">
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-4" role="navigation" aria-expanded="false">
+ <span class="menu-text">Semana 2</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-4" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-4" class="collapse list-unstyled sidebar-section depth2 ">  
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque1/css.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">CSS</span></a>
+  </div>
+</li>
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque1/t2.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">T2: Web de HL II</span></a>
+  </div>
+</li>
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque1/MAcss.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">MA: Selectores y Pseudoselectores</span></a>
+  </div>
+</li>
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque1/t2a.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">TA2: Mi CV II</span></a>
+  </div>
+</li>
+      </ul>
+  </li>
+      </ul>
+  </li>
+        <li class="sidebar-item sidebar-item-section">
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-5" role="navigation" aria-expanded="false">
+ <span class="menu-text">Bloque II Programación</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-5" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-5" class="collapse list-unstyled sidebar-section depth1 ">  
+          <li class="sidebar-item sidebar-item-section">
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-6" role="navigation" aria-expanded="false">
+ <span class="menu-text">Repaso Intensivo</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-6" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-6" class="collapse list-unstyled sidebar-section depth2 ">  
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque2/intensivo.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">Repaso Intensivo JS</span></a>
+  </div>
+</li>
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque2/ti.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">TI: Ejercicios JS</span></a>
+  </div>
+</li>
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque2/MAclases.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">MA: Clases ES6</span></a>
+  </div>
+</li>
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque2/tia.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">TAI: La objetización de las personas</span></a>
+  </div>
+</li>
+      </ul>
+  </li>
+      </ul>
+  </li>
+        <li class="sidebar-item sidebar-item-section">
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-7" role="navigation" aria-expanded="false">
+ <span class="menu-text">Bloque III Interacción</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-7" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-7" class="collapse list-unstyled sidebar-section depth1 ">  
+          <li class="sidebar-item sidebar-item-section">
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-8" role="navigation" aria-expanded="false">
+ <span class="menu-text">Semana 6</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-8" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-8" class="collapse list-unstyled sidebar-section depth2 ">  
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque3/DOM.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">DOM</span></a>
+  </div>
+</li>
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque3/t6.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">T6: Romancero Gitano I</span></a>
+  </div>
+</li>
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque3/MAcss2.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">MA: CSS Flex y CSS</span></a>
+  </div>
+</li>
+      </ul>
+  </li>
+          <li class="sidebar-item sidebar-item-section">
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-9" role="navigation" aria-expanded="false">
+ <span class="menu-text">Semana 7</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-9" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-9" class="collapse list-unstyled sidebar-section depth2 ">  
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque3/ReactI.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">React I</span></a>
+  </div>
+</li>
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque3/ps.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">Proyecto Subsistema</span></a>
+  </div>
+</li>
+      </ul>
+  </li>
+          <li class="sidebar-item sidebar-item-section">
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-10" role="navigation" aria-expanded="false">
+ <span class="menu-text">Semana 9</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-10" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-10" class="collapse list-unstyled sidebar-section depth2 ">  
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque3/Intermedio.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">React III</span></a>
+  </div>
+</li>
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque3/MARef.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">MA: <em>Uncontrolled fields</em> y <code>useRef</code></span></a>
+  </div>
+</li>
+      </ul>
+  </li>
+          <li class="sidebar-item sidebar-item-section">
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-11" role="navigation" aria-expanded="false">
+ <span class="menu-text">Semana 10</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-11" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-11" class="collapse list-unstyled sidebar-section depth2 ">  
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque3/ReactIV.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">React IV</span></a>
+  </div>
+</li>
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque3/t10.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">T10: Quiz app!</span></a>
+  </div>
+</li>
+      </ul>
+  </li>
+      </ul>
+  </li>
+        <li class="sidebar-item sidebar-item-section">
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="true">
+ <span class="menu-text">Bloque IV Comunicación</span></a>
+          <a class="sidebar-item-toggle text-start" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="true" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-12" class="collapse list-unstyled sidebar-section depth1 show">  
+          <li class="sidebar-item sidebar-item-section">
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="true">
+ <span class="menu-text">Semana 11</span></a>
+          <a class="sidebar-item-toggle text-start" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="true" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-13" class="collapse list-unstyled sidebar-section depth2 show">  
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/Bloque4/protocolos.html" class="sidebar-item-text sidebar-link active">
+ <span class="menu-text">Protocolos de Comunicación</span></a>
+  </div>
+</li>
+      </ul>
+  </li>
+      </ul>
+  </li>
+        <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../../pages/rubric.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">Rúbrica de evaluación</span></a>
+  </div>
+</li>
+    </ul>
+    </div>
+<div class="quarto-sidebar-footer"><div class="sidebar-footer-item">
+<p><img src="https://i.imgur.com/jbGUd7N.png" class="img-fluid"><br><br><br> © Javier Ribal del Río <br> 2025 - Hyperloop UPV</p>
+</div></div></nav>
+<div id="quarto-sidebar-glass" class="quarto-sidebar-collapse-item" data-bs-toggle="collapse" data-bs-target=".quarto-sidebar-collapse-item"></div>
+<!-- margin-sidebar -->
+    <div id="quarto-margin-sidebar" class="sidebar margin-sidebar">
+        <nav id="TOC" role="doc-toc" class="toc-active">
+    <h2 id="toc-title">En esta página</h2>
+   
+  <ul>
+  <li><a href="#http" id="toc-http" class="nav-link active" data-scroll-target="#http">HTTP</a>
+  <ul>
+  <li><a href="#qué-es-http" id="toc-qué-es-http" class="nav-link" data-scroll-target="#qué-es-http">¿Qué es HTTP?</a></li>
+  <li><a href="#componentes-de-una-petición" id="toc-componentes-de-una-petición" class="nav-link" data-scroll-target="#componentes-de-una-petición">Componentes de una petición</a></li>
+  <li><a href="#métodos-http-principales" id="toc-métodos-http-principales" class="nav-link" data-scroll-target="#métodos-http-principales">Métodos HTTP principales</a>
+  <ul class="collapse">
+  <li><a href="#get" id="toc-get" class="nav-link" data-scroll-target="#get">GET</a></li>
+  </ul></li>
+  <li><a href="#post" id="toc-post" class="nav-link" data-scroll-target="#post">POST</a></li>
+  <li><a href="#put" id="toc-put" class="nav-link" data-scroll-target="#put">PUT</a></li>
+  <li><a href="#delete" id="toc-delete" class="nav-link" data-scroll-target="#delete">DELETE</a></li>
+  <li><a href="#head" id="toc-head" class="nav-link" data-scroll-target="#head">HEAD</a></li>
+  </ul></li>
+  <li><a href="#http-vs-comunicación-en-tiempo-real" id="toc-http-vs-comunicación-en-tiempo-real" class="nav-link" data-scroll-target="#http-vs-comunicación-en-tiempo-real">HTTP vs Comunicación en tiempo real</a></li>
+  <li><a href="#websockets" id="toc-websockets" class="nav-link" data-scroll-target="#websockets">WebSockets</a>
+  <ul>
+  <li><a href="#flujo-conceptual" id="toc-flujo-conceptual" class="nav-link" data-scroll-target="#flujo-conceptual">Flujo conceptual</a></li>
+  <li><a href="#creación-de-un-websocket-en-javascript" id="toc-creación-de-un-websocket-en-javascript" class="nav-link" data-scroll-target="#creación-de-un-websocket-en-javascript">Creación de un WebSocket en JavaScript</a></li>
+  <li><a href="#recepción-de-mensajes" id="toc-recepción-de-mensajes" class="nav-link" data-scroll-target="#recepción-de-mensajes">Recepción de mensajes</a></li>
+  <li><a href="#envío-de-mensajes" id="toc-envío-de-mensajes" class="nav-link" data-scroll-target="#envío-de-mensajes">Envío de mensajes</a></li>
+  </ul></li>
+  <li><a href="#hook-personalizado" id="toc-hook-personalizado" class="nav-link" data-scroll-target="#hook-personalizado">Hook Personalizado</a>
+  <ul>
+  <li><a href="#hook-personalizado-1" id="toc-hook-personalizado-1" class="nav-link" data-scroll-target="#hook-personalizado-1">Hook personalizado</a></li>
+  <li><a href="#hook-usewebsocket" id="toc-hook-usewebsocket" class="nav-link" data-scroll-target="#hook-usewebsocket">Hook <code>useWebSocket</code></a></li>
+  <li><a href="#análisis-conceptual" id="toc-análisis-conceptual" class="nav-link" data-scroll-target="#análisis-conceptual">Análisis conceptual</a></li>
+  <li><a href="#uso-del-hook" id="toc-uso-del-hook" class="nav-link" data-scroll-target="#uso-del-hook">Uso del hook</a></li>
+  </ul></li>
+  <li><a href="#visualización-de-datos" id="toc-visualización-de-datos" class="nav-link" data-scroll-target="#visualización-de-datos">Visualización de datos</a></li>
+  <li><a href="#recharts" id="toc-recharts" class="nav-link" data-scroll-target="#recharts">Recharts</a>
+  <ul>
+  <li><a href="#ejemplo-básico" id="toc-ejemplo-básico" class="nav-link" data-scroll-target="#ejemplo-básico">Ejemplo básico</a></li>
+  <li><a href="#interpretación" id="toc-interpretación" class="nav-link" data-scroll-target="#interpretación">Interpretación</a></li>
+  </ul></li>
+  <li><a href="#integración-completa" id="toc-integración-completa" class="nav-link" data-scroll-target="#integración-completa">Integración completa</a>
+  <ul>
+  <li><a href="#ejemplo-conceptual" id="toc-ejemplo-conceptual" class="nav-link" data-scroll-target="#ejemplo-conceptual">Ejemplo conceptual</a></li>
+  <li><a href="#flujo-completo-de-una-app-moderna" id="toc-flujo-completo-de-una-app-moderna" class="nav-link" data-scroll-target="#flujo-completo-de-una-app-moderna">Flujo completo de una app moderna</a></li>
+  </ul></li>
+  <li><a href="#material" id="toc-material" class="nav-link" data-scroll-target="#material">Material</a></li>
+  </ul>
+<div class="quarto-alternate-formats"><h2>Otros formatos</h2><ul><li><a href="protocolos.pdf"><i class="bi bi-file-pdf"></i>PDF</a></li><li><a href="Protocolos.html"><i class="bi bi-file-slides"></i>Presentación</a></li></ul></div></nav>
+    </div>
+<!-- main -->
+<main class="content" id="quarto-document-content">
+
+
+<header id="title-block-header" class="quarto-title-block default"><nav class="quarto-page-breadcrumbs quarto-title-breadcrumbs d-none d-lg-block" aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item">Bloque IV Comunicación</li><li class="breadcrumb-item"><a href="../../pages/Bloque4/protocolos.html">Semana 11</a></li><li class="breadcrumb-item"><a href="../../pages/Bloque4/protocolos.html">Protocolos de Comunicación</a></li></ol></nav>
+<div class="quarto-title">
+<h1 class="title">Protocolos de Comunicación</h1>
+<p class="subtitle lead">HTTP, WebSockets, Hooks personalizados y Recharts</p>
+</div>
+
+
+
+<div class="quarto-title-meta">
+
+    <div>
+    <div class="quarto-title-meta-heading">Autor/a</div>
+    <div class="quarto-title-meta-contents">
+             <p>Javier Ribal del Río </p>
+          </div>
+  </div>
+    
+    <div>
+    <div class="quarto-title-meta-heading">Fecha de publicación</div>
+    <div class="quarto-title-meta-contents">
+      <p class="date">13 de marzo de 2026</p>
+    </div>
+  </div>
+  
+    <div>
+    <div class="quarto-title-meta-heading">Fecha de última modificación</div>
+    <div class="quarto-title-meta-contents">
+      <p class="date-modified">13 de marzo de 2026</p>
+    </div>
+  </div>
+    
+  </div>
+  
+
+
+</header>
+
+
+<p><strong>Contenido</strong></p>
+<ul>
+<li>HTTP básico para desarrollo web</li>
+<li>Métodos GET, POST, PUT, DELETE, HEAD</li>
+<li>WebSockets</li>
+<li>Hook personalizado para conexión en tiempo real</li>
+<li>Gráficas con Recharts</li>
+</ul>
+<section id="http" class="level2">
+<h2 class="anchored" data-anchor-id="http">HTTP</h2>
+<section id="qué-es-http" class="level3">
+<h3 class="anchored" data-anchor-id="qué-es-http">¿Qué es HTTP?</h3>
+<p>HTTP (<em>HyperText Transfer Protocol</em>) es el protocolo fundamental de la web.</p>
+<p>Define cómo:</p>
+<ul>
+<li>El cliente (navegador o app)</li>
+<li>Solicita recursos</li>
+<li>A un servidor</li>
+</ul>
+<p>Modelo conceptual:</p>
+<pre><code>Cliente → Solicitud HTTP → Servidor
+Cliente ← Respuesta HTTP ← Servidor</code></pre>
+<p>HTTP es <strong>sin estado (stateless)</strong>.</p>
+<p>Cada petición es independiente.</p>
+</section>
+<section id="componentes-de-una-petición" class="level3">
+<h3 class="anchored" data-anchor-id="componentes-de-una-petición">Componentes de una petición</h3>
+<p>Una petición HTTP contiene:</p>
+<ul>
+<li>Método</li>
+<li>URL</li>
+<li>Cabeceras (<em>headers</em>)</li>
+<li>Cuerpo (<em>body</em>, opcional)</li>
+</ul>
+<p>Ejemplo conceptual:</p>
+<pre><code>GET /users HTTP/1.1
+Host: api.example.com
+Authorization: Bearer token</code></pre>
+</section>
+<section id="métodos-http-principales" class="level3">
+<h3 class="anchored" data-anchor-id="métodos-http-principales">Métodos HTTP principales</h3>
+<section id="get" class="level4">
+<h4 class="anchored" data-anchor-id="get">GET</h4>
+<ul>
+<li>Solicita datos</li>
+<li>No modifica el servidor</li>
+<li>Debe ser idempotente</li>
+</ul>
+<p>Ejemplo:</p>
+<pre><code>GET /users</code></pre>
+<p>Uso típico en React:</p>
+<div class="code-copy-outer-scaffold"><div class="sourceCode" id="cb4"><pre class="sourceCode jsx code-with-copy"><code class="sourceCode javascriptreact"><span id="cb4-1"><a href="#cb4-1" aria-hidden="true" tabindex="-1"></a><span class="fu">fetch</span>(<span class="st">"/api/users"</span>)</span></code></pre></div><button title="Copiar al portapapeles" class="code-copy-button"><i class="bi"></i></button></div>
+</section>
+</section>
+<section id="post" class="level3">
+<h3 class="anchored" data-anchor-id="post">POST</h3>
+<ul>
+<li>Envía datos al servidor</li>
+<li>Crea recursos nuevos</li>
+<li>Tiene cuerpo</li>
+</ul>
+<p>Ejemplo:</p>
+<div class="code-copy-outer-scaffold"><div class="sourceCode" id="cb5"><pre class="sourceCode jsx code-with-copy"><code class="sourceCode javascriptreact"><span id="cb5-1"><a href="#cb5-1" aria-hidden="true" tabindex="-1"></a><span class="fu">fetch</span>(<span class="st">"/api/users"</span><span class="op">,</span> {</span>
+<span id="cb5-2"><a href="#cb5-2" aria-hidden="true" tabindex="-1"></a>  <span class="dt">method</span><span class="op">:</span> <span class="st">"POST"</span><span class="op">,</span></span>
+<span id="cb5-3"><a href="#cb5-3" aria-hidden="true" tabindex="-1"></a>  <span class="dt">body</span><span class="op">:</span> <span class="bu">JSON</span><span class="op">.</span><span class="fu">stringify</span>({ <span class="dt">name</span><span class="op">:</span> <span class="st">"Ana"</span> })<span class="op">,</span></span>
+<span id="cb5-4"><a href="#cb5-4" aria-hidden="true" tabindex="-1"></a>  <span class="dt">headers</span><span class="op">:</span> { <span class="st">"Content-Type"</span><span class="op">:</span> <span class="st">"application/json"</span> }</span>
+<span id="cb5-5"><a href="#cb5-5" aria-hidden="true" tabindex="-1"></a>})<span class="op">;</span></span></code></pre></div><button title="Copiar al portapapeles" class="code-copy-button"><i class="bi"></i></button></div>
+</section>
+<section id="put" class="level3">
+<h3 class="anchored" data-anchor-id="put">PUT</h3>
+<ul>
+<li>Actualiza completamente un recurso existente</li>
+<li>Idempotente</li>
+</ul>
+<pre><code>PUT /users/3</code></pre>
+</section>
+<section id="delete" class="level3">
+<h3 class="anchored" data-anchor-id="delete">DELETE</h3>
+<ul>
+<li>Elimina un recurso</li>
+</ul>
+<pre><code>DELETE /users/3</code></pre>
+</section>
+<section id="head" class="level3">
+<h3 class="anchored" data-anchor-id="head">HEAD</h3>
+<ul>
+<li>Igual que GET</li>
+<li>No devuelve cuerpo</li>
+<li>Solo cabeceras</li>
+</ul>
+<p>Se utiliza para:</p>
+<ul>
+<li>Comprobar existencia</li>
+<li>Tamaño</li>
+<li>Metadatos</li>
+</ul>
+</section>
+</section>
+<section id="http-vs-comunicación-en-tiempo-real" class="level2">
+<h2 class="anchored" data-anchor-id="http-vs-comunicación-en-tiempo-real">HTTP vs Comunicación en tiempo real</h2>
+<p>HTTP funciona bajo el modelo:</p>
+<blockquote class="blockquote">
+<p>Petición → Respuesta → Fin</p>
+</blockquote>
+<p>Si queremos datos continuamente:</p>
+<ul>
+<li>Debemos repetir peticiones</li>
+<li>Introduce latencia</li>
+<li>Ineficiente</li>
+</ul>
+<p>Solución: <strong>WebSockets</strong></p>
+</section>
+<section id="websockets" class="level2">
+<h2 class="anchored" data-anchor-id="websockets">WebSockets</h2>
+<p>WebSockets permiten comunicación bidireccional persistente.</p>
+<p>Características:</p>
+<ul>
+<li>Conexión permanente</li>
+<li>Cliente y servidor pueden enviar datos</li>
+<li>Baja latencia</li>
+<li>Ideal para tiempo real</li>
+</ul>
+<p>Ejemplos:</p>
+<ul>
+<li>Chats</li>
+<li>Juegos online</li>
+<li>Telemetría</li>
+<li>Trading</li>
+<li>Sistemas IoT</li>
+</ul>
+<section id="flujo-conceptual" class="level3">
+<h3 class="anchored" data-anchor-id="flujo-conceptual">Flujo conceptual</h3>
+<pre><code>Cliente ↔ Servidor
+     conexión abierta</code></pre>
+<p>No se crea una nueva conexión por mensaje.</p>
+</section>
+<section id="creación-de-un-websocket-en-javascript" class="level3">
+<h3 class="anchored" data-anchor-id="creación-de-un-websocket-en-javascript">Creación de un WebSocket en JavaScript</h3>
+<div class="code-copy-outer-scaffold"><div class="sourceCode" id="cb9"><pre class="sourceCode jsx code-with-copy"><code class="sourceCode javascriptreact"><span id="cb9-1"><a href="#cb9-1" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> socket <span class="op">=</span> <span class="kw">new</span> <span class="bu">WebSocket</span>(<span class="st">"ws://localhost:8080"</span>)<span class="op">;</span></span></code></pre></div><button title="Copiar al portapapeles" class="code-copy-button"><i class="bi"></i></button></div>
+<p>Eventos principales:</p>
+<ul>
+<li><code>onopen</code></li>
+<li><code>onmessage</code></li>
+<li><code>onclose</code></li>
+<li><code>onerror</code></li>
+</ul>
+</section>
+<section id="recepción-de-mensajes" class="level3">
+<h3 class="anchored" data-anchor-id="recepción-de-mensajes">Recepción de mensajes</h3>
+<div class="code-copy-outer-scaffold"><div class="sourceCode" id="cb10"><pre class="sourceCode js code-with-copy"><code class="sourceCode javascript"><span id="cb10-1"><a href="#cb10-1" aria-hidden="true" tabindex="-1"></a>socket<span class="op">.</span><span class="at">onmessage</span> <span class="op">=</span> (<span class="bu">event</span>) <span class="kw">=&gt;</span> {</span>
+<span id="cb10-2"><a href="#cb10-2" aria-hidden="true" tabindex="-1"></a>  <span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(<span class="st">"Mensaje:"</span><span class="op">,</span> <span class="bu">event</span><span class="op">.</span><span class="at">data</span>)<span class="op">;</span></span>
+<span id="cb10-3"><a href="#cb10-3" aria-hidden="true" tabindex="-1"></a>}<span class="op">;</span></span></code></pre></div><button title="Copiar al portapapeles" class="code-copy-button"><i class="bi"></i></button></div>
+</section>
+<section id="envío-de-mensajes" class="level3">
+<h3 class="anchored" data-anchor-id="envío-de-mensajes">Envío de mensajes</h3>
+<div class="code-copy-outer-scaffold"><div class="sourceCode" id="cb11"><pre class="sourceCode js code-with-copy"><code class="sourceCode javascript"><span id="cb11-1"><a href="#cb11-1" aria-hidden="true" tabindex="-1"></a>socket<span class="op">.</span><span class="fu">send</span>(<span class="st">"Hola servidor"</span>)<span class="op">;</span></span></code></pre></div><button title="Copiar al portapapeles" class="code-copy-button"><i class="bi"></i></button></div>
+</section>
+</section>
+<section id="hook-personalizado" class="level2">
+<h2 class="anchored" data-anchor-id="hook-personalizado">Hook Personalizado</h2>
+<p>Si usamos WebSockets directamente dentro del componente:</p>
+<ul>
+<li>Mezclamos lógica de conexión con renderizado</li>
+<li>Código difícil de reutilizar</li>
+<li>Problemas de ciclo de vida</li>
+</ul>
+<p>Solución: <strong>Hook personalizado</strong></p>
+<section id="hook-personalizado-1" class="level3">
+<h3 class="anchored" data-anchor-id="hook-personalizado-1">Hook personalizado</h3>
+<p>Un hook personalizado es:</p>
+<blockquote class="blockquote">
+<p>Una función que utiliza hooks internos para encapsular lógica reutilizable</p>
+</blockquote>
+<p>Convención:</p>
+<pre><code>useNombre()</code></pre>
+</section>
+<section id="hook-usewebsocket" class="level3">
+<h3 class="anchored" data-anchor-id="hook-usewebsocket">Hook <code>useWebSocket</code></h3>
+<div class="code-copy-outer-scaffold"><div class="sourceCode" id="cb13"><pre class="sourceCode jsx code-with-copy"><code class="sourceCode javascriptreact"><span id="cb13-1"><a href="#cb13-1" aria-hidden="true" tabindex="-1"></a><span class="im">import</span> { useEffect<span class="op">,</span> useState } <span class="im">from</span> <span class="st">"react"</span><span class="op">;</span></span>
+<span id="cb13-2"><a href="#cb13-2" aria-hidden="true" tabindex="-1"></a></span>
+<span id="cb13-3"><a href="#cb13-3" aria-hidden="true" tabindex="-1"></a><span class="im">export</span> <span class="kw">function</span> <span class="fu">useWebSocket</span>(url) {</span>
+<span id="cb13-4"><a href="#cb13-4" aria-hidden="true" tabindex="-1"></a></span>
+<span id="cb13-5"><a href="#cb13-5" aria-hidden="true" tabindex="-1"></a>  <span class="kw">const</span> [data<span class="op">,</span> setData] <span class="op">=</span> <span class="fu">useState</span>(<span class="kw">null</span>)<span class="op">;</span></span>
+<span id="cb13-6"><a href="#cb13-6" aria-hidden="true" tabindex="-1"></a></span>
+<span id="cb13-7"><a href="#cb13-7" aria-hidden="true" tabindex="-1"></a>  <span class="fu">useEffect</span>(() <span class="kw">=&gt;</span> {</span>
+<span id="cb13-8"><a href="#cb13-8" aria-hidden="true" tabindex="-1"></a></span>
+<span id="cb13-9"><a href="#cb13-9" aria-hidden="true" tabindex="-1"></a>    <span class="kw">const</span> socket <span class="op">=</span> <span class="kw">new</span> <span class="bu">WebSocket</span>(url)<span class="op">;</span></span>
+<span id="cb13-10"><a href="#cb13-10" aria-hidden="true" tabindex="-1"></a></span>
+<span id="cb13-11"><a href="#cb13-11" aria-hidden="true" tabindex="-1"></a>    socket<span class="op">.</span><span class="at">onmessage</span> <span class="op">=</span> (<span class="bu">event</span>) <span class="kw">=&gt;</span> {</span>
+<span id="cb13-12"><a href="#cb13-12" aria-hidden="true" tabindex="-1"></a>      <span class="fu">setData</span>(<span class="bu">event</span><span class="op">.</span><span class="at">data</span>)<span class="op">;</span></span>
+<span id="cb13-13"><a href="#cb13-13" aria-hidden="true" tabindex="-1"></a>    }<span class="op">;</span></span>
+<span id="cb13-14"><a href="#cb13-14" aria-hidden="true" tabindex="-1"></a></span>
+<span id="cb13-15"><a href="#cb13-15" aria-hidden="true" tabindex="-1"></a>    <span class="cf">return</span> () <span class="kw">=&gt;</span> socket<span class="op">.</span><span class="fu">close</span>()<span class="op">;</span></span>
+<span id="cb13-16"><a href="#cb13-16" aria-hidden="true" tabindex="-1"></a></span>
+<span id="cb13-17"><a href="#cb13-17" aria-hidden="true" tabindex="-1"></a>  }<span class="op">,</span> [url])<span class="op">;</span></span>
+<span id="cb13-18"><a href="#cb13-18" aria-hidden="true" tabindex="-1"></a></span>
+<span id="cb13-19"><a href="#cb13-19" aria-hidden="true" tabindex="-1"></a>  <span class="cf">return</span> data<span class="op">;</span></span>
+<span id="cb13-20"><a href="#cb13-20" aria-hidden="true" tabindex="-1"></a>}</span></code></pre></div><button title="Copiar al portapapeles" class="code-copy-button"><i class="bi"></i></button></div>
+</section>
+<section id="análisis-conceptual" class="level3">
+<h3 class="anchored" data-anchor-id="análisis-conceptual">Análisis conceptual</h3>
+<ul>
+<li>Se crea la conexión al montar</li>
+<li>Se actualiza el estado al recibir datos</li>
+<li>Se cierra al desmontar</li>
+<li>El componente solo consume datos</li>
+</ul>
+</section>
+<section id="uso-del-hook" class="level3">
+<h3 class="anchored" data-anchor-id="uso-del-hook">Uso del hook</h3>
+<div class="code-copy-outer-scaffold"><div class="sourceCode" id="cb14"><pre class="sourceCode jsx code-with-copy"><code class="sourceCode javascriptreact"><span id="cb14-1"><a href="#cb14-1" aria-hidden="true" tabindex="-1"></a><span class="kw">function</span> <span class="fu">Monitor</span>() {</span>
+<span id="cb14-2"><a href="#cb14-2" aria-hidden="true" tabindex="-1"></a></span>
+<span id="cb14-3"><a href="#cb14-3" aria-hidden="true" tabindex="-1"></a>  <span class="kw">const</span> data <span class="op">=</span> <span class="fu">useWebSocket</span>(<span class="st">"ws://localhost:8080"</span>)<span class="op">;</span></span>
+<span id="cb14-4"><a href="#cb14-4" aria-hidden="true" tabindex="-1"></a></span>
+<span id="cb14-5"><a href="#cb14-5" aria-hidden="true" tabindex="-1"></a>  <span class="cf">return</span> (</span>
+<span id="cb14-6"><a href="#cb14-6" aria-hidden="true" tabindex="-1"></a>    <span class="kw">&lt;div&gt;</span></span>
+<span id="cb14-7"><a href="#cb14-7" aria-hidden="true" tabindex="-1"></a>      <span class="kw">&lt;h2&gt;</span>Datos en tiempo real<span class="kw">&lt;/h2&gt;</span></span>
+<span id="cb14-8"><a href="#cb14-8" aria-hidden="true" tabindex="-1"></a>      <span class="kw">&lt;p&gt;</span><span class="va">{</span>data<span class="va">}</span><span class="kw">&lt;/p&gt;</span></span>
+<span id="cb14-9"><a href="#cb14-9" aria-hidden="true" tabindex="-1"></a>    <span class="kw">&lt;/div&gt;</span></span>
+<span id="cb14-10"><a href="#cb14-10" aria-hidden="true" tabindex="-1"></a>  )<span class="op">;</span></span>
+<span id="cb14-11"><a href="#cb14-11" aria-hidden="true" tabindex="-1"></a>}</span></code></pre></div><button title="Copiar al portapapeles" class="code-copy-button"><i class="bi"></i></button></div>
+<p>Flujo:</p>
+<ol type="1">
+<li>Componente se renderiza<br>
+</li>
+<li>Hook abre conexión<br>
+</li>
+<li>Llegan datos<br>
+</li>
+<li>Estado cambia<br>
+</li>
+<li>Nuevo render</li>
+</ol>
+</section>
+</section>
+<section id="visualización-de-datos" class="level2">
+<h2 class="anchored" data-anchor-id="visualización-de-datos">Visualización de datos</h2>
+<p>En aplicaciones reales no basta con mostrar texto.</p>
+<p>Necesitamos:</p>
+<ul>
+<li>Gráficas</li>
+<li>Paneles de control</li>
+<li>Visualización clara</li>
+</ul>
+<p>Una librería popular para React es <strong>Recharts</strong>.</p>
+</section>
+<section id="recharts" class="level2">
+<h2 class="anchored" data-anchor-id="recharts">Recharts</h2>
+<p>Recharts es una librería basada en:</p>
+<ul>
+<li>Componentes React</li>
+<li>SVG</li>
+<li>Composición declarativa</li>
+</ul>
+<p>Instalación:</p>
+<div class="code-copy-outer-scaffold"><div class="sourceCode" id="cb15"><pre class="sourceCode bash code-with-copy"><code class="sourceCode bash"><span id="cb15-1"><a href="#cb15-1" aria-hidden="true" tabindex="-1"></a><span class="ex">npm</span> install recharts</span></code></pre></div><button title="Copiar al portapapeles" class="code-copy-button"><i class="bi"></i></button></div>
+<section id="ejemplo-básico" class="level3">
+<h3 class="anchored" data-anchor-id="ejemplo-básico">Ejemplo básico</h3>
+<div class="code-copy-outer-scaffold"><div class="sourceCode" id="cb16"><pre class="sourceCode jsx code-with-copy"><code class="sourceCode javascriptreact"><span id="cb16-1"><a href="#cb16-1" aria-hidden="true" tabindex="-1"></a><span class="im">import</span> {</span>
+<span id="cb16-2"><a href="#cb16-2" aria-hidden="true" tabindex="-1"></a>  LineChart<span class="op">,</span> Line<span class="op">,</span> XAxis<span class="op">,</span> YAxis<span class="op">,</span></span>
+<span id="cb16-3"><a href="#cb16-3" aria-hidden="true" tabindex="-1"></a>  CartesianGrid<span class="op">,</span> Tooltip</span>
+<span id="cb16-4"><a href="#cb16-4" aria-hidden="true" tabindex="-1"></a>} <span class="im">from</span> <span class="st">"recharts"</span><span class="op">;</span></span>
+<span id="cb16-5"><a href="#cb16-5" aria-hidden="true" tabindex="-1"></a></span>
+<span id="cb16-6"><a href="#cb16-6" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> data <span class="op">=</span> [</span>
+<span id="cb16-7"><a href="#cb16-7" aria-hidden="true" tabindex="-1"></a>  { <span class="dt">t</span><span class="op">:</span> <span class="dv">1</span><span class="op">,</span> <span class="dt">v</span><span class="op">:</span> <span class="dv">10</span> }<span class="op">,</span></span>
+<span id="cb16-8"><a href="#cb16-8" aria-hidden="true" tabindex="-1"></a>  { <span class="dt">t</span><span class="op">:</span> <span class="dv">2</span><span class="op">,</span> <span class="dt">v</span><span class="op">:</span> <span class="dv">15</span> }<span class="op">,</span></span>
+<span id="cb16-9"><a href="#cb16-9" aria-hidden="true" tabindex="-1"></a>  { <span class="dt">t</span><span class="op">:</span> <span class="dv">3</span><span class="op">,</span> <span class="dt">v</span><span class="op">:</span> <span class="dv">8</span> }</span>
+<span id="cb16-10"><a href="#cb16-10" aria-hidden="true" tabindex="-1"></a>]<span class="op">;</span></span>
+<span id="cb16-11"><a href="#cb16-11" aria-hidden="true" tabindex="-1"></a></span>
+<span id="cb16-12"><a href="#cb16-12" aria-hidden="true" tabindex="-1"></a><span class="kw">function</span> <span class="fu">Grafica</span>() {</span>
+<span id="cb16-13"><a href="#cb16-13" aria-hidden="true" tabindex="-1"></a>  <span class="cf">return</span> (</span>
+<span id="cb16-14"><a href="#cb16-14" aria-hidden="true" tabindex="-1"></a>    <span class="fu">&lt;LineChart</span> <span class="ot">width</span><span class="op">=</span><span class="va">{</span><span class="dv">400</span><span class="va">}</span> <span class="ot">height</span><span class="op">=</span><span class="va">{</span><span class="dv">300</span><span class="va">}</span> <span class="ot">data</span><span class="op">=</span><span class="va">{</span>data<span class="va">}</span><span class="fu">&gt;</span></span>
+<span id="cb16-15"><a href="#cb16-15" aria-hidden="true" tabindex="-1"></a>      <span class="fu">&lt;CartesianGrid</span> <span class="ot">stroke</span><span class="op">=</span><span class="st">"#ccc"</span> <span class="fu">/&gt;</span></span>
+<span id="cb16-16"><a href="#cb16-16" aria-hidden="true" tabindex="-1"></a>      <span class="fu">&lt;XAxis</span> <span class="ot">dataKey</span><span class="op">=</span><span class="st">"t"</span> <span class="fu">/&gt;</span></span>
+<span id="cb16-17"><a href="#cb16-17" aria-hidden="true" tabindex="-1"></a>      <span class="fu">&lt;YAxis</span> <span class="fu">/&gt;</span></span>
+<span id="cb16-18"><a href="#cb16-18" aria-hidden="true" tabindex="-1"></a>      <span class="fu">&lt;Tooltip</span> <span class="fu">/&gt;</span></span>
+<span id="cb16-19"><a href="#cb16-19" aria-hidden="true" tabindex="-1"></a>      <span class="fu">&lt;Line</span> <span class="ot">type</span><span class="op">=</span><span class="st">"monotone"</span> <span class="ot">dataKey</span><span class="op">=</span><span class="st">"v"</span> <span class="ot">stroke</span><span class="op">=</span><span class="st">"#8884d8"</span> <span class="fu">/&gt;</span></span>
+<span id="cb16-20"><a href="#cb16-20" aria-hidden="true" tabindex="-1"></a>    <span class="fu">&lt;/LineChart&gt;</span></span>
+<span id="cb16-21"><a href="#cb16-21" aria-hidden="true" tabindex="-1"></a>  )<span class="op">;</span></span>
+<span id="cb16-22"><a href="#cb16-22" aria-hidden="true" tabindex="-1"></a>}</span></code></pre></div><button title="Copiar al portapapeles" class="code-copy-button"><i class="bi"></i></button></div>
+</section>
+<section id="interpretación" class="level3">
+<h3 class="anchored" data-anchor-id="interpretación">Interpretación</h3>
+<p>Cada objeto representa un punto.</p>
+<pre><code>{ t: 1, v: 10 }</code></pre>
+<ul>
+<li><code>t</code> → eje X</li>
+<li><code>v</code> → eje Y</li>
+</ul>
+</section>
+</section>
+<section id="integración-completa" class="level2">
+<h2 class="anchored" data-anchor-id="integración-completa">Integración completa</h2>
+<p>WebSocket + Hook + Recharts</p>
+<p>Objetivo:</p>
+<blockquote class="blockquote">
+<p>Visualizar datos en tiempo real</p>
+</blockquote>
+<section id="ejemplo-conceptual" class="level3">
+<h3 class="anchored" data-anchor-id="ejemplo-conceptual">Ejemplo conceptual</h3>
+<div class="code-copy-outer-scaffold"><div class="sourceCode" id="cb18"><pre class="sourceCode jsx code-with-copy"><code class="sourceCode javascriptreact"><span id="cb18-1"><a href="#cb18-1" aria-hidden="true" tabindex="-1"></a><span class="kw">function</span> <span class="fu">Dashboard</span>() {</span>
+<span id="cb18-2"><a href="#cb18-2" aria-hidden="true" tabindex="-1"></a></span>
+<span id="cb18-3"><a href="#cb18-3" aria-hidden="true" tabindex="-1"></a>  <span class="kw">const</span> data <span class="op">=</span> <span class="fu">useWebSocket</span>(<span class="st">"ws://localhost:8080"</span>)<span class="op">;</span></span>
+<span id="cb18-4"><a href="#cb18-4" aria-hidden="true" tabindex="-1"></a></span>
+<span id="cb18-5"><a href="#cb18-5" aria-hidden="true" tabindex="-1"></a>  <span class="kw">const</span> chartData <span class="op">=</span> data</span>
+<span id="cb18-6"><a href="#cb18-6" aria-hidden="true" tabindex="-1"></a>    <span class="op">?</span> <span class="bu">JSON</span><span class="op">.</span><span class="fu">parse</span>(data)</span>
+<span id="cb18-7"><a href="#cb18-7" aria-hidden="true" tabindex="-1"></a>    <span class="op">:</span> []<span class="op">;</span></span>
+<span id="cb18-8"><a href="#cb18-8" aria-hidden="true" tabindex="-1"></a></span>
+<span id="cb18-9"><a href="#cb18-9" aria-hidden="true" tabindex="-1"></a>  <span class="cf">return</span> (</span>
+<span id="cb18-10"><a href="#cb18-10" aria-hidden="true" tabindex="-1"></a>    <span class="fu">&lt;LineChart</span> <span class="ot">width</span><span class="op">=</span><span class="va">{</span><span class="dv">500</span><span class="va">}</span> <span class="ot">height</span><span class="op">=</span><span class="va">{</span><span class="dv">300</span><span class="va">}</span> <span class="ot">data</span><span class="op">=</span><span class="va">{</span>chartData<span class="va">}</span><span class="fu">&gt;</span></span>
+<span id="cb18-11"><a href="#cb18-11" aria-hidden="true" tabindex="-1"></a>      <span class="fu">&lt;XAxis</span> <span class="ot">dataKey</span><span class="op">=</span><span class="st">"time"</span> <span class="fu">/&gt;</span></span>
+<span id="cb18-12"><a href="#cb18-12" aria-hidden="true" tabindex="-1"></a>      <span class="fu">&lt;YAxis</span> <span class="fu">/&gt;</span></span>
+<span id="cb18-13"><a href="#cb18-13" aria-hidden="true" tabindex="-1"></a>      <span class="fu">&lt;Tooltip</span> <span class="fu">/&gt;</span></span>
+<span id="cb18-14"><a href="#cb18-14" aria-hidden="true" tabindex="-1"></a>      <span class="fu">&lt;Line</span> <span class="ot">dataKey</span><span class="op">=</span><span class="st">"value"</span> <span class="ot">stroke</span><span class="op">=</span><span class="st">"#82ca9d"</span> <span class="fu">/&gt;</span></span>
+<span id="cb18-15"><a href="#cb18-15" aria-hidden="true" tabindex="-1"></a>    <span class="fu">&lt;/LineChart&gt;</span></span>
+<span id="cb18-16"><a href="#cb18-16" aria-hidden="true" tabindex="-1"></a>  )<span class="op">;</span></span>
+<span id="cb18-17"><a href="#cb18-17" aria-hidden="true" tabindex="-1"></a>}</span></code></pre></div><button title="Copiar al portapapeles" class="code-copy-button"><i class="bi"></i></button></div>
+</section>
+<section id="flujo-completo-de-una-app-moderna" class="level3">
+<h3 class="anchored" data-anchor-id="flujo-completo-de-una-app-moderna">Flujo completo de una app moderna</h3>
+<pre><code>Servidor → WebSocket → Hook → Estado → React → Gráfica</code></pre>
+<p>Arquitectura típica de sistemas en tiempo real.</p>
+</section>
+</section>
+<section id="material" class="level2">
+<h2 class="anchored" data-anchor-id="material">Material</h2>
+<p>Servidor de testing de <em>Python</em>: <a href="Server.py">Enlace</a>.</p>
+<p>Instalar <code>websockets</code> con <code>pip install websockets</code></p>
+<p>Tester de prueba: <a href="tester_http_ws_basic.html">Enlace</a> (click derecho guardar enlace como)</p>
+<p><a href="https://recharts.github.io/">https://recharts.github.io/</a></p>
+
+
+</section>
+
+</main> <!-- /main -->
+<script id="quarto-html-after-body" type="application/javascript">
+  window.document.addEventListener("DOMContentLoaded", function (event) {
+    // Ensure there is a toggle, if there isn't float one in the top right
+    if (window.document.querySelector('.quarto-color-scheme-toggle') === null) {
+      const a = window.document.createElement('a');
+      a.classList.add('top-right');
+      a.classList.add('quarto-color-scheme-toggle');
+      a.href = "";
+      a.onclick = function() { try { window.quartoToggleColorScheme(); } catch {} return false; };
+      const i = window.document.createElement("i");
+      i.classList.add('bi');
+      a.appendChild(i);
+      window.document.body.appendChild(a);
+    }
+    setColorSchemeToggle(hasAlternateSentinel())
+    const icon = "";
+    const anchorJS = new window.AnchorJS();
+    anchorJS.options = {
+      placement: 'right',
+      icon: icon
+    };
+    anchorJS.add('.anchored');
+    const isCodeAnnotation = (el) => {
+      for (const clz of el.classList) {
+        if (clz.startsWith('code-annotation-')) {                     
+          return true;
+        }
+      }
+      return false;
+    }
+    const onCopySuccess = function(e) {
+      // button target
+      const button = e.trigger;
+      // don't keep focus
+      button.blur();
+      // flash "checked"
+      button.classList.add('code-copy-button-checked');
+      var currentTitle = button.getAttribute("title");
+      button.setAttribute("title", "Copiado");
+      let tooltip;
+      if (window.bootstrap) {
+        button.setAttribute("data-bs-toggle", "tooltip");
+        button.setAttribute("data-bs-placement", "left");
+        button.setAttribute("data-bs-title", "Copiado");
+        tooltip = new bootstrap.Tooltip(button, 
+          { trigger: "manual", 
+            customClass: "code-copy-button-tooltip",
+            offset: [0, -8]});
+        tooltip.show();    
+      }
+      setTimeout(function() {
+        if (tooltip) {
+          tooltip.hide();
+          button.removeAttribute("data-bs-title");
+          button.removeAttribute("data-bs-toggle");
+          button.removeAttribute("data-bs-placement");
+        }
+        button.setAttribute("title", currentTitle);
+        button.classList.remove('code-copy-button-checked');
+      }, 1000);
+      // clear code selection
+      e.clearSelection();
+    }
+    const getTextToCopy = function(trigger) {
+      const outerScaffold = trigger.parentElement.cloneNode(true);
+      const codeEl = outerScaffold.querySelector('code');
+      for (const childEl of codeEl.children) {
+        if (isCodeAnnotation(childEl)) {
+          childEl.remove();
+        }
+      }
+      return codeEl.innerText;
+    }
+    const clipboard = new window.ClipboardJS('.code-copy-button:not([data-in-quarto-modal])', {
+      text: getTextToCopy
+    });
+    clipboard.on('success', onCopySuccess);
+    if (window.document.getElementById('quarto-embedded-source-code-modal')) {
+      const clipboardModal = new window.ClipboardJS('.code-copy-button[data-in-quarto-modal]', {
+        text: getTextToCopy,
+        container: window.document.getElementById('quarto-embedded-source-code-modal')
+      });
+      clipboardModal.on('success', onCopySuccess);
+    }
+      var localhostRegex = new RegExp(/^(?:http|https):\/\/localhost\:?[0-9]*\//);
+      var mailtoRegex = new RegExp(/^mailto:/);
+        var filterRegex = new RegExp('/' + window.location.host + '/');
+      var isInternal = (href) => {
+          return filterRegex.test(href) || localhostRegex.test(href) || mailtoRegex.test(href);
+      }
+      // Inspect non-navigation links and adorn them if external
+     var links = window.document.querySelectorAll('a[href]:not(.nav-link):not(.navbar-brand):not(.toc-action):not(.sidebar-link):not(.sidebar-item-toggle):not(.pagination-link):not(.no-external):not([aria-hidden]):not(.dropdown-item):not(.quarto-navigation-tool):not(.about-link)');
+      for (var i=0; i<links.length; i++) {
+        const link = links[i];
+        if (!isInternal(link.href)) {
+          // undo the damage that might have been done by quarto-nav.js in the case of
+          // links that we want to consider external
+          if (link.dataset.originalHref !== undefined) {
+            link.href = link.dataset.originalHref;
+          }
+        }
+      }
+    function tippyHover(el, contentFn, onTriggerFn, onUntriggerFn) {
+      const config = {
+        allowHTML: true,
+        maxWidth: 500,
+        delay: 100,
+        arrow: false,
+        appendTo: function(el) {
+            return el.parentElement;
+        },
+        interactive: true,
+        interactiveBorder: 10,
+        theme: 'quarto',
+        placement: 'bottom-start',
+      };
+      if (contentFn) {
+        config.content = contentFn;
+      }
+      if (onTriggerFn) {
+        config.onTrigger = onTriggerFn;
+      }
+      if (onUntriggerFn) {
+        config.onUntrigger = onUntriggerFn;
+      }
+      window.tippy(el, config); 
+    }
+    const noterefs = window.document.querySelectorAll('a[role="doc-noteref"]');
+    for (var i=0; i<noterefs.length; i++) {
+      const ref = noterefs[i];
+      tippyHover(ref, function() {
+        // use id or data attribute instead here
+        let href = ref.getAttribute('data-footnote-href') || ref.getAttribute('href');
+        try { href = new URL(href).hash; } catch {}
+        const id = href.replace(/^#\/?/, "");
+        const note = window.document.getElementById(id);
+        if (note) {
+          return note.innerHTML;
+        } else {
+          return "";
+        }
+      });
+    }
+    const xrefs = window.document.querySelectorAll('a.quarto-xref');
+    const processXRef = (id, note) => {
+      // Strip column container classes
+      const stripColumnClz = (el) => {
+        el.classList.remove("page-full", "page-columns");
+        if (el.children) {
+          for (const child of el.children) {
+            stripColumnClz(child);
+          }
+        }
+      }
+      stripColumnClz(note)
+      if (id === null || id.startsWith('sec-')) {
+        // Special case sections, only their first couple elements
+        const container = document.createElement("div");
+        if (note.children && note.children.length > 2) {
+          container.appendChild(note.children[0].cloneNode(true));
+          for (let i = 1; i < note.children.length; i++) {
+            const child = note.children[i];
+            if (child.tagName === "P" && child.innerText === "") {
+              continue;
+            } else {
+              container.appendChild(child.cloneNode(true));
+              break;
+            }
+          }
+          if (window.Quarto?.typesetMath) {
+            window.Quarto.typesetMath(container);
+          }
+          return container.innerHTML
+        } else {
+          if (window.Quarto?.typesetMath) {
+            window.Quarto.typesetMath(note);
+          }
+          return note.innerHTML;
+        }
+      } else {
+        // Remove any anchor links if they are present
+        const anchorLink = note.querySelector('a.anchorjs-link');
+        if (anchorLink) {
+          anchorLink.remove();
+        }
+        if (window.Quarto?.typesetMath) {
+          window.Quarto.typesetMath(note);
+        }
+        if (note.classList.contains("callout")) {
+          return note.outerHTML;
+        } else {
+          return note.innerHTML;
+        }
+      }
+    }
+    for (var i=0; i<xrefs.length; i++) {
+      const xref = xrefs[i];
+      tippyHover(xref, undefined, function(instance) {
+        instance.disable();
+        let url = xref.getAttribute('href');
+        let hash = undefined; 
+        if (url.startsWith('#')) {
+          hash = url;
+        } else {
+          try { hash = new URL(url).hash; } catch {}
+        }
+        if (hash) {
+          const id = hash.replace(/^#\/?/, "");
+          const note = window.document.getElementById(id);
+          if (note !== null) {
+            try {
+              const html = processXRef(id, note.cloneNode(true));
+              instance.setContent(html);
+            } finally {
+              instance.enable();
+              instance.show();
+            }
+          } else {
+            // See if we can fetch this
+            fetch(url.split('#')[0])
+            .then(res => res.text())
+            .then(html => {
+              const parser = new DOMParser();
+              const htmlDoc = parser.parseFromString(html, "text/html");
+              const note = htmlDoc.getElementById(id);
+              if (note !== null) {
+                const html = processXRef(id, note);
+                instance.setContent(html);
+              } 
+            }).finally(() => {
+              instance.enable();
+              instance.show();
+            });
+          }
+        } else {
+          // See if we can fetch a full url (with no hash to target)
+          // This is a special case and we should probably do some content thinning / targeting
+          fetch(url)
+          .then(res => res.text())
+          .then(html => {
+            const parser = new DOMParser();
+            const htmlDoc = parser.parseFromString(html, "text/html");
+            const note = htmlDoc.querySelector('main.content');
+            if (note !== null) {
+              // This should only happen for chapter cross references
+              // (since there is no id in the URL)
+              // remove the first header
+              if (note.children.length > 0 && note.children[0].tagName === "HEADER") {
+                note.children[0].remove();
+              }
+              const html = processXRef(null, note);
+              instance.setContent(html);
+            } 
+          }).finally(() => {
+            instance.enable();
+            instance.show();
+          });
+        }
+      }, function(instance) {
+      });
+    }
+        let selectedAnnoteEl;
+        const selectorForAnnotation = ( cell, annotation) => {
+          let cellAttr = 'data-code-cell="' + cell + '"';
+          let lineAttr = 'data-code-annotation="' +  annotation + '"';
+          const selector = 'span[' + cellAttr + '][' + lineAttr + ']';
+          return selector;
+        }
+        const selectCodeLines = (annoteEl) => {
+          const doc = window.document;
+          const targetCell = annoteEl.getAttribute("data-target-cell");
+          const targetAnnotation = annoteEl.getAttribute("data-target-annotation");
+          const annoteSpan = window.document.querySelector(selectorForAnnotation(targetCell, targetAnnotation));
+          const lines = annoteSpan.getAttribute("data-code-lines").split(",");
+          const lineIds = lines.map((line) => {
+            return targetCell + "-" + line;
+          })
+          let top = null;
+          let height = null;
+          let parent = null;
+          if (lineIds.length > 0) {
+              //compute the position of the single el (top and bottom and make a div)
+              const el = window.document.getElementById(lineIds[0]);
+              top = el.offsetTop;
+              height = el.offsetHeight;
+              parent = el.parentElement.parentElement;
+            if (lineIds.length > 1) {
+              const lastEl = window.document.getElementById(lineIds[lineIds.length - 1]);
+              const bottom = lastEl.offsetTop + lastEl.offsetHeight;
+              height = bottom - top;
+            }
+            if (top !== null && height !== null && parent !== null) {
+              // cook up a div (if necessary) and position it 
+              let div = window.document.getElementById("code-annotation-line-highlight");
+              if (div === null) {
+                div = window.document.createElement("div");
+                div.setAttribute("id", "code-annotation-line-highlight");
+                div.style.position = 'absolute';
+                parent.appendChild(div);
+              }
+              div.style.top = top - 2 + "px";
+              div.style.height = height + 4 + "px";
+              div.style.left = 0;
+              let gutterDiv = window.document.getElementById("code-annotation-line-highlight-gutter");
+              if (gutterDiv === null) {
+                gutterDiv = window.document.createElement("div");
+                gutterDiv.setAttribute("id", "code-annotation-line-highlight-gutter");
+                gutterDiv.style.position = 'absolute';
+                const codeCell = window.document.getElementById(targetCell);
+                const gutter = codeCell.querySelector('.code-annotation-gutter');
+                gutter.appendChild(gutterDiv);
+              }
+              gutterDiv.style.top = top - 2 + "px";
+              gutterDiv.style.height = height + 4 + "px";
+            }
+            selectedAnnoteEl = annoteEl;
+          }
+        };
+        const unselectCodeLines = () => {
+          const elementsIds = ["code-annotation-line-highlight", "code-annotation-line-highlight-gutter"];
+          elementsIds.forEach((elId) => {
+            const div = window.document.getElementById(elId);
+            if (div) {
+              div.remove();
+            }
+          });
+          selectedAnnoteEl = undefined;
+        };
+          // Handle positioning of the toggle
+      window.addEventListener(
+        "resize",
+        throttle(() => {
+          elRect = undefined;
+          if (selectedAnnoteEl) {
+            selectCodeLines(selectedAnnoteEl);
+          }
+        }, 10)
+      );
+      function throttle(fn, ms) {
+      let throttle = false;
+      let timer;
+        return (...args) => {
+          if(!throttle) { // first call gets through
+              fn.apply(this, args);
+              throttle = true;
+          } else { // all the others get throttled
+              if(timer) clearTimeout(timer); // cancel #2
+              timer = setTimeout(() => {
+                fn.apply(this, args);
+                timer = throttle = false;
+              }, ms);
+          }
+        };
+      }
+        // Attach click handler to the DT
+        const annoteDls = window.document.querySelectorAll('dt[data-target-cell]');
+        for (const annoteDlNode of annoteDls) {
+          annoteDlNode.addEventListener('click', (event) => {
+            const clickedEl = event.target;
+            if (clickedEl !== selectedAnnoteEl) {
+              unselectCodeLines();
+              const activeEl = window.document.querySelector('dt[data-target-cell].code-annotation-active');
+              if (activeEl) {
+                activeEl.classList.remove('code-annotation-active');
+              }
+              selectCodeLines(clickedEl);
+              clickedEl.classList.add('code-annotation-active');
+            } else {
+              // Unselect the line
+              unselectCodeLines();
+              clickedEl.classList.remove('code-annotation-active');
+            }
+          });
+        }
+    const findCites = (el) => {
+      const parentEl = el.parentElement;
+      if (parentEl) {
+        const cites = parentEl.dataset.cites;
+        if (cites) {
+          return {
+            el,
+            cites: cites.split(' ')
+          };
+        } else {
+          return findCites(el.parentElement)
+        }
+      } else {
+        return undefined;
+      }
+    };
+    var bibliorefs = window.document.querySelectorAll('a[role="doc-biblioref"]');
+    for (var i=0; i<bibliorefs.length; i++) {
+      const ref = bibliorefs[i];
+      const citeInfo = findCites(ref);
+      if (citeInfo) {
+        tippyHover(citeInfo.el, function() {
+          var popup = window.document.createElement('div');
+          citeInfo.cites.forEach(function(cite) {
+            var citeDiv = window.document.createElement('div');
+            citeDiv.classList.add('hanging-indent');
+            citeDiv.classList.add('csl-entry');
+            var biblioDiv = window.document.getElementById('ref-' + cite);
+            if (biblioDiv) {
+              citeDiv.innerHTML = biblioDiv.innerHTML;
+            }
+            popup.appendChild(citeDiv);
+          });
+          return popup.innerHTML;
+        });
+      }
+    }
+  });
+  </script>
+</div> <!-- /content -->
+
+
+
+
+</body></html>
\ No newline at end of file
diff --git a/docs/pages/Bloque4/protocolos.pdf b/docs/pages/Bloque4/protocolos.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..e6e20ae179218d7ae8d4d89cf04bc31ba471838d
GIT binary patch
literal 71068
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

literal 0
HcmV?d00001

diff --git a/docs/pages/Bloque4/tester_http_ws_basic.html b/docs/pages/Bloque4/tester_http_ws_basic.html
new file mode 100644
index 0000000..5343719
--- /dev/null
+++ b/docs/pages/Bloque4/tester_http_ws_basic.html
@@ -0,0 +1,444 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Tester HTTP + WebSocket</title>
+  <style>
+    :root {
+      --bg: #0b1020;
+      --panel: #121933;
+      --panel-2: #0f152b;
+      --text: #e8ecf8;
+      --muted: #aeb8d6;
+      --accent: #7aa2ff;
+      --ok: #4ade80;
+      --warn: #fbbf24;
+      --err: #fb7185;
+      --border: #273255;
+    }
+
+    * { box-sizing: border-box; }
+
+    body {
+      margin: 0;
+      font-family: Arial, Helvetica, sans-serif;
+      background: linear-gradient(180deg, #0a0f1e 0%, #0d1326 100%);
+      color: var(--text);
+    }
+
+    .wrap {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 24px;
+    }
+
+    h1 {
+      margin: 0 0 8px;
+      font-size: 28px;
+    }
+
+    p.lead {
+      margin: 0 0 24px;
+      color: var(--muted);
+    }
+
+    .grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 20px;
+    }
+
+    .card {
+      background: var(--panel);
+      border: 1px solid var(--border);
+      border-radius: 16px;
+      padding: 18px;
+      box-shadow: 0 8px 24px rgba(0,0,0,.25);
+    }
+
+    .card h2 {
+      margin-top: 0;
+      font-size: 20px;
+    }
+
+    .row {
+      display: grid;
+      grid-template-columns: 120px 1fr;
+      gap: 10px;
+      align-items: center;
+      margin-bottom: 12px;
+    }
+
+    label {
+      color: var(--muted);
+      font-size: 14px;
+    }
+
+    input, textarea, select, button {
+      font: inherit;
+    }
+
+    input, textarea, select {
+      width: 100%;
+      background: var(--panel-2);
+      border: 1px solid var(--border);
+      color: var(--text);
+      border-radius: 10px;
+      padding: 10px 12px;
+    }
+
+    textarea {
+      min-height: 140px;
+      resize: vertical;
+    }
+
+    .buttons {
+      display: flex;
+      gap: 10px;
+      flex-wrap: wrap;
+      margin-top: 10px;
+    }
+
+    button {
+      background: var(--accent);
+      color: white;
+      border: none;
+      border-radius: 10px;
+      padding: 10px 14px;
+      cursor: pointer;
+      font-weight: 700;
+    }
+
+    button.secondary {
+      background: #334155;
+    }
+
+    button.danger {
+      background: #be123c;
+    }
+
+    .status {
+      display: inline-block;
+      padding: 6px 10px;
+      border-radius: 999px;
+      font-size: 13px;
+      font-weight: 700;
+      margin-bottom: 10px;
+    }
+
+    .ok { background: rgba(74, 222, 128, .18); color: var(--ok); }
+    .warn { background: rgba(251, 191, 36, .18); color: var(--warn); }
+    .err { background: rgba(251, 113, 133, .18); color: var(--err); }
+
+    pre {
+      background: #09101f;
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 12px;
+      overflow: auto;
+      min-height: 180px;
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+
+    canvas {
+      width: 100%;
+      height: 320px;
+      background: #09101f;
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      display: block;
+    }
+
+    .full {
+      grid-column: 1 / -1;
+    }
+
+    .small {
+      color: var(--muted);
+      font-size: 13px;
+      margin-top: 8px;
+    }
+
+    @media (max-width: 900px) {
+      .grid { grid-template-columns: 1fr; }
+      .row { grid-template-columns: 1fr; }
+    }
+  </style>
+</head>
+<body>
+  <div class="wrap">
+    <h1>Tester HTTP + WebSocket</h1>
+    <p class="lead">Página básica en HTML y JavaScript para probar tu servidor HTTP en el puerto 3001 y el WebSocket en el puerto 3002.</p>
+
+    <div class="grid">
+      <section class="card">
+        <h2>HTTP</h2>
+        <div class="row">
+          <label for="httpUrl">URL</label>
+          <input id="httpUrl" value="http://localhost:3001/test" />
+        </div>
+        <div class="row">
+          <label for="httpMethod">Método</label>
+          <select id="httpMethod">
+            <option>GET</option>
+            <option>POST</option>
+          </select>
+        </div>
+        <div class="row">
+          <label for="httpBody">Body JSON</label>
+          <textarea id="httpBody">{
+  "mensaje": "hola desde el tester",
+  "valor": 123
+}</textarea>
+        </div>
+        <div class="buttons">
+          <button id="sendHttpBtn">Enviar petición</button>
+          <button id="clearHttpBtn" class="secondary">Limpiar salida</button>
+        </div>
+        <p class="small">El body solo se enviará en POST. El servidor debería mostrar por consola el método, la ruta, los headers y el body.</p>
+      </section>
+
+      <section class="card">
+        <h2>Respuesta HTTP</h2>
+        <span id="httpStatus" class="status warn">Sin petición</span>
+        <pre id="httpOutput">Aquí aparecerá la respuesta del servidor.</pre>
+      </section>
+
+      <section class="card">
+        <h2>WebSocket</h2>
+        <div class="row">
+          <label for="wsUrl">URL</label>
+          <input id="wsUrl" value="ws://localhost:3002" />
+        </div>
+        <div class="buttons">
+          <button id="connectWsBtn">Conectar</button>
+          <button id="disconnectWsBtn" class="danger">Desconectar</button>
+          <button id="clearWsBtn" class="secondary">Limpiar mensajes</button>
+        </div>
+        <div style="margin-top:12px;">
+          <span id="wsStatus" class="status warn">Desconectado</span>
+        </div>
+        <p class="small">Se espera recibir un JSON con este formato: [{"time":"12:00:00","value":10}, ...]</p>
+      </section>
+
+      <section class="card">
+        <h2>Mensajes WebSocket</h2>
+        <pre id="wsOutput">Aquí aparecerán los mensajes recibidos por WebSocket.</pre>
+      </section>
+
+      <section class="card full">
+        <h2>Gráfica en tiempo real</h2>
+        <canvas id="chart" width="1100" height="320"></canvas>
+        <p class="small">La gráfica usa los campos <code>time</code> y <code>value</code> del array recibido por WebSocket.</p>
+      </section>
+    </div>
+  </div>
+
+  <script>
+    const httpUrl = document.getElementById('httpUrl');
+    const httpMethod = document.getElementById('httpMethod');
+    const httpBody = document.getElementById('httpBody');
+    const sendHttpBtn = document.getElementById('sendHttpBtn');
+    const clearHttpBtn = document.getElementById('clearHttpBtn');
+    const httpOutput = document.getElementById('httpOutput');
+    const httpStatus = document.getElementById('httpStatus');
+
+    const wsUrl = document.getElementById('wsUrl');
+    const connectWsBtn = document.getElementById('connectWsBtn');
+    const disconnectWsBtn = document.getElementById('disconnectWsBtn');
+    const clearWsBtn = document.getElementById('clearWsBtn');
+    const wsOutput = document.getElementById('wsOutput');
+    const wsStatus = document.getElementById('wsStatus');
+    const canvas = document.getElementById('chart');
+    const ctx = canvas.getContext('2d');
+
+    let socket = null;
+    let chartData = [];
+
+    function setStatus(el, text, type) {
+      el.textContent = text;
+      el.className = 'status ' + type;
+    }
+
+    async function sendHttpRequest() {
+      const method = httpMethod.value;
+      const url = httpUrl.value.trim();
+
+      httpOutput.textContent = 'Enviando petición...';
+      setStatus(httpStatus, 'Enviando', 'warn');
+
+      try {
+        const options = { method };
+
+        if (method === 'POST') {
+          options.headers = { 'Content-Type': 'application/json' };
+          options.body = httpBody.value;
+        }
+
+        const response = await fetch(url, options);
+        const text = await response.text();
+
+        const responseHeaders = {};
+        response.headers.forEach((value, key) => {
+          responseHeaders[key] = value;
+        });
+
+        httpOutput.textContent = JSON.stringify({
+          ok: response.ok,
+          status: response.status,
+          statusText: response.statusText,
+          headers: responseHeaders,
+          body: text
+        }, null, 2);
+
+        setStatus(httpStatus, 'Respuesta ' + response.status, response.ok ? 'ok' : 'err');
+      } catch (error) {
+        httpOutput.textContent = 'Error de red:\n' + error;
+        setStatus(httpStatus, 'Error', 'err');
+      }
+    }
+
+    function appendWsMessage(text) {
+      const timestamp = new Date().toLocaleTimeString();
+      wsOutput.textContent = '[' + timestamp + '] ' + text + '\n\n' + wsOutput.textContent;
+    }
+
+    function connectWebSocket() {
+      if (socket && socket.readyState === WebSocket.OPEN) {
+        appendWsMessage('Ya existe una conexión abierta.');
+        return;
+      }
+
+      socket = new WebSocket(wsUrl.value.trim());
+      setStatus(wsStatus, 'Conectando...', 'warn');
+
+      socket.onopen = () => {
+        setStatus(wsStatus, 'Conectado', 'ok');
+        appendWsMessage('Conexión abierta.');
+      };
+
+      socket.onmessage = (event) => {
+        appendWsMessage(event.data);
+
+        try {
+          const parsed = JSON.parse(event.data);
+          if (Array.isArray(parsed)) {
+            chartData = parsed;
+            drawChart(chartData);
+          }
+        } catch (error) {
+          appendWsMessage('No se pudo parsear el JSON para la gráfica: ' + error);
+        }
+      };
+
+      socket.onerror = () => {
+        setStatus(wsStatus, 'Error', 'err');
+        appendWsMessage('Se ha producido un error en WebSocket.');
+      };
+
+      socket.onclose = () => {
+        setStatus(wsStatus, 'Desconectado', 'warn');
+        appendWsMessage('Conexión cerrada.');
+      };
+    }
+
+    function disconnectWebSocket() {
+      if (socket) {
+        socket.close();
+        socket = null;
+      }
+    }
+
+    function drawChart(data) {
+      const w = canvas.width;
+      const h = canvas.height;
+      const pad = 40;
+
+      ctx.clearRect(0, 0, w, h);
+
+      ctx.fillStyle = '#09101f';
+      ctx.fillRect(0, 0, w, h);
+
+      ctx.strokeStyle = '#273255';
+      ctx.lineWidth = 1;
+
+      for (let i = 0; i < 5; i++) {
+        const y = pad + (i * (h - 2 * pad)) / 4;
+        ctx.beginPath();
+        ctx.moveTo(pad, y);
+        ctx.lineTo(w - pad, y);
+        ctx.stroke();
+      }
+
+      ctx.beginPath();
+      ctx.moveTo(pad, pad);
+      ctx.lineTo(pad, h - pad);
+      ctx.lineTo(w - pad, h - pad);
+      ctx.strokeStyle = '#aeb8d6';
+      ctx.stroke();
+
+      if (!Array.isArray(data) || data.length === 0) {
+        ctx.fillStyle = '#aeb8d6';
+        ctx.font = '16px Arial';
+        ctx.fillText('Esperando datos...', pad + 10, pad + 20);
+        return;
+      }
+
+      const values = data.map(d => Number(d.value)).filter(v => !Number.isNaN(v));
+      if (values.length === 0) return;
+
+      let min = Math.min(...values);
+      let max = Math.max(...values);
+      if (min === max) {
+        min -= 1;
+        max += 1;
+      }
+
+      const stepX = data.length > 1 ? (w - 2 * pad) / (data.length - 1) : 0;
+
+      ctx.strokeStyle = '#7aa2ff';
+      ctx.lineWidth = 2;
+      ctx.beginPath();
+
+      data.forEach((point, index) => {
+        const x = pad + index * stepX;
+        const y = h - pad - ((Number(point.value) - min) / (max - min)) * (h - 2 * pad);
+        if (index === 0) ctx.moveTo(x, y);
+        else ctx.lineTo(x, y);
+      });
+      ctx.stroke();
+
+      ctx.fillStyle = '#e8ecf8';
+      ctx.font = '12px Arial';
+      ctx.fillText(String(max.toFixed(2)), 8, pad + 4);
+      ctx.fillText(String(min.toFixed(2)), 8, h - pad + 4);
+
+      const last = data[data.length - 1];
+      ctx.fillText('Último: ' + last.time + ' | ' + Number(last.value).toFixed(2), pad, 20);
+
+      ctx.fillStyle = '#aeb8d6';
+      const firstLabel = data[0]?.time ?? '';
+      const lastLabel = data[data.length - 1]?.time ?? '';
+      ctx.fillText(firstLabel, pad, h - 12);
+      const labelWidth = ctx.measureText(lastLabel).width;
+      ctx.fillText(lastLabel, w - pad - labelWidth, h - 12);
+    }
+
+    sendHttpBtn.addEventListener('click', sendHttpRequest);
+    clearHttpBtn.addEventListener('click', () => {
+      httpOutput.textContent = 'Aquí aparecerá la respuesta del servidor.';
+      setStatus(httpStatus, 'Sin petición', 'warn');
+    });
+
+    connectWsBtn.addEventListener('click', connectWebSocket);
+    disconnectWsBtn.addEventListener('click', disconnectWebSocket);
+    clearWsBtn.addEventListener('click', () => {
+      wsOutput.textContent = 'Aquí aparecerán los mensajes recibidos por WebSocket.';
+    });
+
+    drawChart([]);
+  </script>
+</body>
+</html>
diff --git a/docs/pages/rubric.html b/docs/pages/rubric.html
index a6dbb7f..5223bf4 100644
--- a/docs/pages/rubric.html
+++ b/docs/pages/rubric.html
@@ -544,8 +544,32 @@
       </ul>
   </li>
         <li class="sidebar-item sidebar-item-section">
-      <span class="sidebar-item-text sidebar-link text-start">
- <span class="menu-text">Bloque IV Comunicación</span></span>
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false">
+ <span class="menu-text">Bloque IV Comunicación</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-12" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-12" class="collapse list-unstyled sidebar-section depth1 ">  
+          <li class="sidebar-item sidebar-item-section">
+      <div class="sidebar-item-container"> 
+            <a class="sidebar-item-text sidebar-link text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false">
+ <span class="menu-text">Semana 11</span></a>
+          <a class="sidebar-item-toggle text-start collapsed" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar-section-13" role="navigation" aria-expanded="false" aria-label="Alternar sección">
+            <i class="bi bi-chevron-right ms-2"></i>
+          </a> 
+      </div>
+      <ul id="quarto-sidebar-section-13" class="collapse list-unstyled sidebar-section depth2 ">  
+          <li class="sidebar-item">
+  <div class="sidebar-item-container"> 
+  <a href="../pages/Bloque4/protocolos.html" class="sidebar-item-text sidebar-link">
+ <span class="menu-text">Protocolos de Comunicación</span></a>
+  </div>
+</li>
+      </ul>
+  </li>
+      </ul>
   </li>
         <li class="sidebar-item">
   <div class="sidebar-item-container"> 
@@ -593,7 +617,7 @@ <h1 class="title">Rúbrica de evaluación</h1>
     <div>
     <div class="quarto-title-meta-heading">Fecha de última modificación</div>
     <div class="quarto-title-meta-contents">
-      <p class="date-modified">7 de marzo de 2026</p>
+      <p class="date-modified">13 de marzo de 2026</p>
     </div>
   </div>
     
diff --git a/docs/rubriuca.pdf b/docs/rubriuca.pdf
index cdc9a14a00da2a9e381a90a076e07ca93d30d93b..4e2f4cfc05a8ef75da4af09033d1a94fea89f95e 100644
GIT binary patch
delta 1808
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

delta 1832
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
Wa&&ldWo8O9I5IRj3MC~)Peuy3fPr-Y

diff --git a/docs/search.json b/docs/search.json
index a8e7106..8badb3b 100644
--- a/docs/search.json
+++ b/docs/search.json
@@ -42,22 +42,80 @@
     "text": "Evaluación Notas Generales\nEvaluación previa realizada por el profesor antes de la presentación, la podeis leer para valorar vosotros los fallos y calificarlos según vuestro criterio\n\nIvan Martínez Enguix\nPor algún motivo tiene los tamaños de todo muy distorsionado, habrá que preguntarle durante la presentación, seguramente mientras acababa de programar modificaría el zoom de la preview\n\nDiseño Estructural\nEstéticamente está bien, gestiona el espacio de una manera correcta pero mejorable, podría haber puesto un overflow pero en general bastante bien distribuido. Destacar el uso del &lt;footer&gt;.\nEn relación al código en general está bastante bien aunque tiene algunos fallos importantes. Siendo estos algunos de los más destacables.\n\n&lt;div id=\"titulo\"&gt;&lt;h1&gt;&lt;strong&gt;Lista de tareas&lt;/strong&gt;&lt;/h1&gt;&lt;/div&gt;\n\nMal uso del &lt;form&gt; y de la etiqueta &lt;label&gt;, (personalmente me sorprende que la aplicación funcione con esto tal y como está)\n  &lt;!--Div con los dos campos que rellenar--&gt;\n        &lt;div class=\"elflex\"&gt;\n\n            &lt;!--DOS FORMS???!!!!--&gt;\n            &lt;form class=\"losforms\"&gt;\n                &lt;label for=\"first-name\"&gt;Nombre:&lt;/label&gt;\n                &lt;input type=\"text\" name=\"first-name\" class=\"losforms\" id=\"nomtarea\"/&gt;\n            &lt;/form&gt;\n\n            &lt;!--Desplegable y boton--&gt;\n            &lt;form class=\"losforms\"&gt;\n                 &lt;!-- LABEL QUE APUNTA AL BOTÓN DE SUBMTI--&gt;\n                &lt;label for=\"elinput\"&gt;Responsable: &lt;/label&gt;\n                &lt;select name=\"Responsable:\" id=\"desplegable\" class=\"losforms\"&gt;\n                    &lt;option value=\"Software\"&gt;Software&lt;/option&gt;\n                    &lt;option value=\"Hardware\"&gt;Hardware&lt;/option&gt;\n                    &lt;option value=\"Partners\"&gt;Partners&lt;/option&gt;\n                    &lt;option value=\"Otros\"&gt;Otros&lt;/option&gt;\n                &lt;/select&gt;\n                &lt;input type=\"submit\" value=\"Añadir\" id=\"elinput\" class=\"losforms\" /&gt;\n            &lt;/form&gt;\n        &lt;/div&gt;\nPuntuación: 6.8, aunque el HTML tiene varios errores garrafales la estructura es correcta y el resto del HTML está bastante bien\n\n\nDiseño Formato\nUso muy bueno de las propiedades y de los selectores/pseudoselectores de CSS. Domina funciones avanzadas como el flex, el degradado en el fondo, así como configurar correctamente las propiedades de la foto del pie de sitio.\nUtiliza una buena paleta de colores que incluye el AZUL y el VERDE, colores complementarios siguiendo la teoría de color.\nAbusa del uso de los píxeles como unidades de medida, (aunque en el TC tampoco hemos visto más). Hubiera faltado formatear mejor los botones.\nPor último en relación a la hoja de estilos podría haber agrupados varias propiedades en una única clase y aplicarla indistintamente o haber definido una variable de CSS\nPuntuación: 7.5, muy buen diseño y uso de los selectores cosas mejorables en la hoja de estilos pero en general bien. Obiando lo del zoom está todo correcto\n\n\nFuncionalidad\nIncorpora todas las funcionalidades básicas, sin embargo presenta algunos errores, y bugs críticos:\n\nAñadir dos veces la misma tarea\nAñadir tareas sin especificar texto\nAl presionar el botón de intro en el &lt;input&gt; de la tarea se recarga el sitio web (esto por la mala configuración del formulario)\n\nNo mucho más que añadir.\nPuntuación 5.5: cumple con lo mínimo y presenta muchos bugs\n\n\nProgramación\nCódigo JS correcto, no maneja el DOM de la forma más eficiente, aun así parece que no acaba de comprender el paso de variables de las funiones de ES6.\nAunque el manejo del DOM no es el del todo correcto, lo ha solucionado con de una forma muy creativa jugando con selectores CSS. Aun así presenta código innecesario\n    const btn = document.getElementById(\"elinput\");\nconst subsistema = document.getElementById(\"desplegable\");\nconst lista = document.getElementById(\"listado\");\nconst tarea = document.getElementById(\"nomtarea\");\n\n//Recoge la información del campo escrito y desplegable y los enseña por pantalla en la lista de tareas\nbtn.addEventListener(\"click\",(event1)=&gt;{\n\n    event1.preventDefault();\n    const li = document.createElement(\"li\");\n    li.textContent = tarea.value + \" (\" + subsistema.value + \")\";\n    // AÑADIR NEGRITA AQUÍ\n    lista.appendChild(li);\n    tarea.value = null\n});\n\n//Detecta sobre que elemento de la lista estamos haciendo click y lo elimina\nlista.addEventListener(\"click\", function(event2) {\n\n    if (event2.target.tagName === \"LI\") {\n        event2.target.remove();\n    }\n});\n\n// TODO ESTO SOBRA SE PODRÍA AÑADIR NEGRITA  DIRECTAMENTE AL LI\n//Cuando se pasa por encima de una tarea \nlista.addEventListener(\"mouseover\", function(event3) {\n\n    if (event3.target.tagName === \"LI\") {\n        event3.target.classList.add(\"negrita\");\n    }\n});\nPuntuación: 7.5: En general bien sería interesante que almacenará las tareas, aunque tal y como lo ha planteado no le hacía falta\n\n\nDocumentación\nHay comentarios en el HTML y en JS, en el CSS no. Tampoco hay documntación, pero ha usado git aunque sus mensajes de log no son los más correctos.\nPuntuación: 7\n\n\nObservaciones\nPor algún motivo hay 3 fotos en la misma carpeta que los ficheros de código (dos paisajes y una fotografía de Shrek [Sí, el ogro verde de dreamworks])\n\n\nPreguntas técnicas\n\nPreguntarle lo que es un flex\nPreguntarle a que se corresponde la variable listado de su código\n\n\n\n\nPau Minguet Micó\nHa hecho dos versiones una con DOM y otra con React, así en general evaluaremos la de React pero hay que destacar que el código JS del DOM está correcto. (Es más correcta la solución de DOM a nivel de programación pero valoaremos la de React más positivamente)\n\nDiseño Estructural\nNo se distingue lo que es HTML de lo que no, lo cual no es malo, distribuye el espacio de forma mediocre aunque no mal del todo.\nEn general está bien no utiliza la etiqueta &lt;header/&gt; para la cabecera y utiliza la propiedad style para introducir estilos con la sintaxis JSX, lo cual según mi criterio no es del todo correcto, sin embargo aquí lo hace dos veces por lo que podría haber introducido una clase.\n                &lt;span className=\"item-text\" style={{ textDecoration: checked ? \"line-through\" : \"none\" }}&gt;{item.text}&lt;/span&gt;\n                &lt;span className=\"item-responsible\" style={{ textDecoration: checked ? \"line-through\" : \"none\" }}&gt;{item.responsible}&lt;/span&gt;\nFaltaría añadir un label para el checkbox para que si haces click en el texto se marque la casilla Puntuación:8\n\n\nDiseño Formato\nImpresionante, luce el CSS, aunque hay cosas que no acaban de agradar, el alumno maneja correctamente las propiedades CSS juega perfectamente con los flex y trabaja los efectos y animaciones de forma sencilla, la web es casi responsive. Lo único que no me gusta es que con la imagen de fondo no podemos evaluar su totalment paleta de colores, aun así los colores mostrados son correctos.\nAdemás incorpora iconos y letras importadas de CSS, así como checkbox muy customizadas.\nMe llama especialmente la atención el uso de las propiedades CSS, le preguntaremos mucho sobre esto, hay un par de propiedades muy especificas.\nPuntuación: 9\n\n\nFuncionalidad\nIncorpora todas las funcionalidades básicas, sin embargo presenta algunos errores\n\nAñadir dos veces la misma tarea\n\nIncorpora la posibilidad de marcar una tarea sin eliminarla, así como la posibilidad de editar la tarea, lo cual no es el del todo fácil.\nPuntuación 8: incluye lo mínimo y funcionalidades\n\n\nProgramación\nUtiliza React. Buen diseño de componentes generalmente utiliza correctamente las props y el state (aun no lo hemos visto en el TC) aun así presenta algunos errores de metodología (los cuales serán trabajados en el TC posteriormente).\nEl error más destable es utilizar el DOM, pero bueno lo hace de forma correcta y en susitución de los controlled-inputs (que tampoco los hemos visto en el TC).\nimport ListItem from \"./ListItem\";\nimport EditItem from \"./EditItem\";\nimport { useState } from \"react\";\nimport \"../styles/TaskList.css\";\n\nconst TaskList = ({ items, updateList }) =&gt; {\n\n    // Stores the index of the task that is being edited\n    const [editIndex, setEditIndex] = useState(-1);\n\n    // When the user clicks on a task, it will be removed from the list\n    const handleClick = item =&gt; {\n        updateList(items.filter(n =&gt; !(n.text === item.text && n.responsible === item.responsible)));\n    };\n\n    // When the user clicks on the save button in the EditItem component, this function will be called to update the task in the list\n    const handleSave = () =&gt; {\n        const text = document.querySelector(\".edit-text\").value;\n        const responsible = document.querySelector(\".edit-select\").value;\n        if (text !== \"\") {\n            const newItems = [...items];\n            newItems[editIndex] = { text, responsible };\n            updateList(newItems);\n            setEditIndex(-1);\n        }\n    }\n\n    // MUY FEO ESTO\n    return (\n        &lt;div className=\"task-list\"&gt;\n            {items.map((item, i) =&gt; (\n                // Just one of the items will be in edit mode\n                editIndex === i ? (\n                    &lt;EditItem key={i} item={item} onSave={handleSave} onCancel={() =&gt; setEditIndex(-1)} /&gt;\n                ) : (\n                    &lt;ListItem \n                        key={i} \n                        onClick={() =&gt; handleClick(item)} \n                        item={item} \n                        setEditIndex={setEditIndex} \n                        pos={i} \n                    /&gt;\n                )\n            ))}\n        &lt;/div&gt;\n    );\n};\n\nexport default TaskList;\nPuntuación: 9\n\n\nDocumentación\nHay comentarios en JSX pero no en CSS. No hay documentación uso correcto de Git y Git Hub se ha hecho una PR a si mismo, trabaja con ramas y utiliza convenctional commits. No presenta documentación.\nPuntuación 8:\n\n\nEsfuerzo\nMe ha ido enseñando distintas versiones de la web me ha ido preguntando por mi opinión y ha ido haciendo casos de mis sugerencias\n\n\nPreguntas técnicas\n\nPreguntarle lo que es un flex y sus propiedades\nPreguntarle el diagrama de componentes de su app\n\n\n\n\nDaniel Zanón Barney\nTengo dudas respecto a este alumno sus tares han sido bastante malas y en clase me transmite la sensación de que no se ha enterado de mucho durante el TC y tengo mis sospechas de que el trabajo está hecho en una gran parte con IA, su tarea presenta un error se lo indicaremos y le diremos que lo corrija en directo.\nEl error es que no llama bien al método get de texto, utiliza una mayúscula en vez de una minúscula."
   },
   {
-    "objectID": "pages/Bloque3/t10.html",
-    "href": "pages/Bloque3/t10.html",
-    "title": "T10: Quiz app!",
+    "objectID": "pages/Bloque3/ReactI.html",
+    "href": "pages/Bloque3/ReactI.html",
+    "title": "React I",
     "section": "",
-    "text": "Desarrollar una aplicación React que permita al usuario realizar un quiz de cultura general utilizando preguntas obtenidas desde una API pública.\nhttps://astonishing-douhua-44213e.netlify.app/\nLa aplicación debe mostrar preguntas, permitir seleccionar respuestas y calcular la puntuación final.",
+    "text": "Contenido",
     "crumbs": [
       "Bloque III Interacción",
-      "Semana 10",
-      "T10: Quiz app!"
+      "Semana 7",
+      "React I"
     ]
   },
   {
-    "objectID": "pages/Bloque3/t10.html#objetivo",
-    "href": "pages/Bloque3/t10.html#objetivo",
-    "title": "T10: Quiz app!",
+    "objectID": "pages/Bloque3/ReactI.html#sintaxis-jsx",
+    "href": "pages/Bloque3/ReactI.html#sintaxis-jsx",
+    "title": "React I",
+    "section": "Sintaxis JSX",
+    "text": "Sintaxis JSX\n\n¿Qué es la sintaxis JSX?\n\nJSX (JavaScript XML) es una extensión de JavaScript utilizada en React.\n\nPermite escribir estructuras similares a HTML directamente dentro del código JavaScript.\n\nFacilita la creación y lectura de interfaces de usuario, integrando lógica y presentación.\n\nAunque su apariencia es HTML, JSX se transpila a JavaScript puro antes de ejecutarse en el navegador.\nForma cómoda de almacenar etiquetas html como variables de JS\n\n\n\n¿Qué nos ofrece la sintaxis JSX?\n\nAlmacenar una etiqueta como una variable\nconst title = &lt;h1&gt;Web del TC de SW&lt;/h1&gt;;\n\nconst driveIndication = (drives)? &lt;p&gt;Puede conducir&lt;/p&gt; : &lt;p&gt;No puede conducir&lt;/p&gt;;\nDe esta forma la variable title se corresponde con una etiqueta que contiene el título. Sin embargo, como podemos podemos utilizar está etiqueta una vez la hemos definido como una variable.\n\n\nRenderizar etiquetas dentro de etiquetas\nconst title = &lt;h1&gt;Web del TC de SW&lt;/h1&gt;;\n\nconst page = &lt;div&gt;{title}&lt;/div&gt;\nDe esta forma estámos encapsulando la etiqueta h1 dentro del div.\n\n\nRenderizar con el map\nconst profeAsi= [[\"Rosa\", \"Macro I\"], [\"Gabriela\", \"FSO\"],[\"Yolanda\",\"LTP\"], [\"Ferrán\", \"EM\"], [\"Pepe\", \"TCO\"]];\n\n// Array de li Asignatura: nombre profesor\nconst itemsProfAsi =  profeAsi.map(x =&gt; &lt;li&gt;{x[1]}: {x[0]}&lt;/li&gt;);\n\nconst listaProfesoresAsignatura = &lt;ul&gt;{itemsProfAsi}&lt;/ul&gt;;\n\n\nRenderizar con el map\nconst profeAsi= [[\"Rosa\", \"Macro I\"], [\"Gabriela\", \"FSO\"], [\"Yolanda\",\"LTP\"], [\"Ferrán\", \"EM\"], [\"Pepe\", \"TCO\"]];\n\nconst listaProfesoresAsignatura = &lt;ul&gt;\n{profeAsi.map((x,i) =&gt; &lt;li key={i}&gt;{x[1]}: {x[0]}&lt;/li&gt;)}\n&lt;/ul&gt;;",
+    "crumbs": [
+      "Bloque III Interacción",
+      "Semana 7",
+      "React I"
+    ]
+  },
+  {
+    "objectID": "pages/Bloque3/ReactI.html#react",
+    "href": "pages/Bloque3/ReactI.html#react",
+    "title": "React I",
+    "section": "React",
+    "text": "React\n\nMotivación\nHasta el momento hemos trabajado únicamente con HTML5, el cual a pesar de ser muy eficaz, presenta el inconveniente de que no implementa ninguna clase de lógica. Es decir, si queremos repetir alguna estructura previamente definida deberemos copiarla y pegarla. Otro problema, de HTML puro es la complejidad que requiere el manejo del DOM, como ya se vio en la semana anterior.\nBajo este pretexto, introducimos el framework React diseñado por Meta.\n\n\nBases de React\nReact es un componente basado en la sintaxis JS y en la programación funcional introducida en ES6.\n\n\nComponente React\nLos componentes de React los definimos como unidades reutilizables y modulares que se implementan de esta forma: una función que devuelve un objeto de JSX\nfunction Saludo() {\n  return &lt;h1&gt;Hola, mundo&lt;/h1&gt;;\n}\nPodemos renderizar nuestro componente Saludo asumiendo que se comporta como una etiqueta html. Recordemos que no lo es.\n&lt;main&gt;\n  &lt;Saludo /&gt;\n&lt;/main&gt;\nDentro de este componente podemos incluir lógica propia de JavaScript, de forma que al definir componente podemos dotarlo de lógica interna.\nfunction DivNúmeroAleatorio() {\n\n  let n = Math.random();\n  return &lt;div className=\"n-random\"&gt;{n}&lt;/div&gt;;\n}\n*Nótese que aunque JS utilice camelCase para el nombre de las funciones, con React utilizaremos PascalCase para definir los componentes puesto que a pesar de que se trata de funciones, trabajaremos con ellas como si fuesen clases.\n\n\nProps en React\nHasta ahora, los componentes definidos siempre devuelven el mismo contenido. Sin embargo, para que un componente sea realmente reutilizable, necesitamos poder pasarle información desde el exterior.\nEn React, esta información se transmite mediante props (properties).\nLas props se definen como los parámetros de entrada de un componente y permiten personalizar su comportamiento o su contenido sin modificar su definición interna.\n\nEjemplo 1: uso de props (forma explícita)\nfunction Saludo(props) {\n  return &lt;h1&gt;Hola, {props.nombre}&lt;/h1&gt;;\n}\nUso del componente:\n&lt;Saludo nombre=\"Rosa\" /&gt;\n&lt;Saludo nombre=\"Gabriela\" /&gt;\n\n\nEjemplo 2: props desestructuradas (sintaxis JavaScript)\nfunction Saludo({ nombre }) {\n  return &lt;h1&gt;Hola, {nombre}&lt;/h1&gt;;\n}\nUso del componente (idéntico al anterior):\n&lt;Saludo nombre=\"Rosa\" /&gt;\n&lt;Saludo nombre=\"Gabriela\" /&gt;\n\n\n\nEventos en React\nEn React, el manejo de eventos se basa en los eventos del DOM, pero utilizando una sintaxis propia de JSX y siguiendo el estilo de JavaScript.\n\nEjemplo básico de evento\nfunction BotonSaludo() {\n\n  function manejarClick() {\n    alert(\"Hola desde React\");\n  }\n\n  return (\n    &lt;button onClick={manejarClick}&gt;\n      Saludar\n    &lt;/button&gt;\n  );\n}\n\n\nPaso de funciones como eventos\nLa función asociada al evento no se ejecuta al renderizar el componente, sino únicamente cuando ocurre el evento; es decir la pasamos como un ciudadano de primera clase.\n&lt;button onClick={manejarClick}&gt;Saludar&lt;/button&gt;\nIncorrecto:\n&lt;button onClick={manejarClick()}&gt;Saludar&lt;/button&gt;\n\n\nEventos más habituales en React\nReact soporta la mayoría de los eventos del DOM, adaptados a la sintaxis JSX. A continuación se listan los eventos más utilizados, clasificados por tipo.\n\nEventos de ratón\n\nonClick\nonDoubleClick\nonMouseEnter\nonMouseLeave\nonMouseMove\nonMouseDown\nonMouseUp\n\n\n\nEventos de teclado\n\nonKeyDown\nonKeyUp\nonKeyPress\n\n\n\nEventos de formularios\n\nonChange\nonSubmit\nonFocus\nonBlur\nonInput\nonReset\n\n\n\nEventos de carga y ciclo del elemento\n\nonLoad\nonError\n\n\n\nEventos de selección y portapapeles\n\nonSelect\nonCopy\nonCut\nonPaste\n\n\n\nEventos táctiles (dispositivos móviles)\n\nonTouchStart\nonTouchMove\nonTouchEnd\nonTouchCancel\n\n\n\n\n\nCiclo de vida de los componentes y renderizado en React\nEn React, los componentes no se renderizan directamente sobre el DOM real, sino que siguen un proceso intermedio que permite optimizar las actualizaciones de la interfaz.\nLa idea clave es que la interfaz se organiza como un árbol de componentes, análogo al árbol del DOM, pero a un nivel de abstracción superior.\n\nEl árbol de componentes\nCuando una aplicación React se ejecuta:\n\nCada componente genera otros componentes o elementos JSX.\nReact construye un árbol de componentes, donde:\n\nEl componente raíz suele ser App\nCada componente hijo ocupa una rama del árbol\n\n\nEste árbol de componentes se corresponde conceptualmente con el árbol del DOM, aunque no es el DOM real.\n\n\nProceso de renderizado\nEl proceso general es el siguiente:\n\nReact ejecuta un componente (función).\nEl componente devuelve JSX.\nEl JSX se transforma en una representación interna del árbol.\nReact compara este árbol con el anterior.\nSolo se actualizan en el DOM real los nodos que han cambiado.\n\nDe esta forma, React minimiza el acceso directo al DOM, que es una operación costosa.\n\n\nCiclo de vida (visión simplificada)\nDesde un punto de vista conceptual, un componente pasa por tres fases:\n\nMontaje\n\nEl componente se crea y se inserta en el DOM.\n\nActualización\n\nEl componente se vuelve a renderizar cuando cambian sus datos.\n\nDesmontaje\n\nEl componente se elimina del DOM.\n\n\nEn componentes funcionales modernos, este ciclo se gestiona de forma implícita mediante el renderizado y, más adelante, mediante hooks.\n\n\nRelación con el DOM\n\nEn JavaScript puro:\n\nSe modifica el DOM directamente.\n\nEn React:\n\nSe describe cómo debe ser la interfaz.\nReact decide el cuándo y el cómo modificar el DOM.\n\n\nEl desarrollador no recorre ni manipula el árbol del DOM, sino que trabaja sobre el árbol de componentes.",
+    "crumbs": [
+      "Bloque III Interacción",
+      "Semana 7",
+      "React I"
+    ]
+  },
+  {
+    "objectID": "pages/Bloque3/ReactI.html#creación-de-una-reactjs-app",
+    "href": "pages/Bloque3/ReactI.html#creación-de-una-reactjs-app",
+    "title": "React I",
+    "section": "Creación de una ReactJS app",
+    "text": "Creación de una ReactJS app\nEl desarrollo de aplicaciones web modernas requiere coordinar múltiples elementos: estructura del proyecto, gestión de dependencias, compilación del código y ejecución en el navegador.\nUn framework de desarrollo proporciona un entorno de trabajo preconfigurado que organiza estos elementos y establece una forma estándar de trabajar.\n\n¿Para qué sirve un framework?\nUn framework permite al desarrollador:\n\nEvitar configuraciones manuales complejas\nSeguir una estructura común de proyecto\nAutomatizar tareas repetitivas\nCentrarse en la lógica de la aplicación y no en la infraestructura\n\nEn lugar de partir de un proyecto vacío, el framework ofrece una base funcional sobre la que desarrollar.\n\n\nFramework y React\nReact se encarga de definir cómo se construye la interfaz, pero no gestiona por sí mismo:\n\nLa estructura de archivos\nEl arranque de la aplicación\nLa compilación del código\nEl servidor de desarrollo\n\nPor ello, React se apoya en un framework que orquesta el entorno de ejecución.\n\n\nCreación de la aplicación\nPara crear una nueva aplicación React utilizando un framework, se ejecuta el siguiente comando en la terminal:\nnpm create vite@latest\nEste comando genera:\n\nUna estructura inicial del proyecto\nLa configuración necesaria para trabajar con React\nUn entorno listo para el desarrollo",
+    "crumbs": [
+      "Bloque III Interacción",
+      "Semana 7",
+      "React I"
+    ]
+  },
+  {
+    "objectID": "pages/Bloque3/reactI.html#sintaxis-jsx",
+    "href": "pages/Bloque3/reactI.html#sintaxis-jsx",
+    "title": "React I",
+    "section": "Sintaxis JSX",
+    "text": "Sintaxis JSX\n¿Qué es la sintaxis JSX?\n\nJSX (JavaScript XML) es una extensión de JavaScript utilizada en React.\n\nPermite escribir estructuras similares a HTML directamente dentro del código JavaScript.\n\nFacilita la creación y lectura de interfaces de usuario, integrando lógica y presentación.\n\nAunque su apariencia es HTML, JSX se transpila a JavaScript puro antes de ejecutarse en el navegador.\nForma cómoda de almacenar etiquetas html como variables de JS"
+  },
+  {
+    "objectID": "pages/Bloque3/reactI.html#react",
+    "href": "pages/Bloque3/reactI.html#react",
+    "title": "React I",
+    "section": "React",
+    "text": "React\nMotivación\nHasta el momento hemos trabajado únicamente con HTML5, el cual a pesar de ser muy eficaz, presenta el inconveniente de que no implementa ninguna clase de lógica. Es decir, si queremos repetir alguna estructura previamente definida deberemos copiarla y pegarla. Otro problema, de HTML puro es la complejidad que requiere el manejo del DOM, como ya se vio en la semana anterior.\nBajo este pretexto, introducimos el framework React diseñado por Meta."
+  },
+  {
+    "objectID": "pages/Bloque3/reactI.html#creación-de-una-reactjs-app",
+    "href": "pages/Bloque3/reactI.html#creación-de-una-reactjs-app",
+    "title": "React I",
+    "section": "Creación de una ReactJS app",
+    "text": "Creación de una ReactJS app\nEl desarrollo de aplicaciones web modernas requiere coordinar múltiples elementos: estructura del proyecto, gestión de dependencias, compilación del código y ejecución en el navegador.\nUn framework de desarrollo proporciona un entorno de trabajo preconfigurado que organiza estos elementos y establece una forma estándar de trabajar."
+  },
+  {
+    "objectID": "pages/Bloque3/DOM.html",
+    "href": "pages/Bloque3/DOM.html",
+    "title": "DOM",
     "section": "",
+<<<<<<< HEAD
     "text": "Desarrollar una aplicación React que permita al usuario realizar un quiz de cultura general utilizando preguntas obtenidas desde una API pública.\nhttps://astonishing-douhua-44213e.netlify.app/\nLa aplicación debe mostrar preguntas, permitir seleccionar respuestas y calcular la puntuación final.",
     "crumbs": [
       "Bloque III Interacción",
@@ -215,206 +273,277 @@
     "section": "",
     "text": "Además de las propiedades estudiadas de CSS también hay algunas críticas que debido a la falta de tiempo no se han podido explicar como es el caso de display a continuación estos dos vídeos profundizan en los modos flex y grid formas diferentes de diseñar la estructura de la página",
 <<<<<<< HEAD
+=======
+    "text": "El DOM (Document Object Model) es la representación en memoria que el navegador crea a partir del HTML.\n\nEl HTML es estático\nEl DOM es dinámico\nJavaScript interactúa con el DOM, no con el HTML original\n\n\nEl DOM es la página web viva dentro del navegador.",
+>>>>>>> e3c3469 (feat:  varios)
     "crumbs": [
       "Bloque III Interacción",
       "Semana 6",
-      "MA: CSS Flex y CSS"
+      "DOM"
     ]
   },
   {
-    "objectID": "pages/Bloque3/ReactIV.html",
-    "href": "pages/Bloque3/ReactIV.html",
-    "title": "React IV",
+    "objectID": "pages/Bloque3/DOM.html#qué-es-el-dom",
+    "href": "pages/Bloque3/DOM.html#qué-es-el-dom",
+    "title": "DOM",
     "section": "",
-    "text": "Contenido",
+    "text": "El DOM (Document Object Model) es la representación en memoria que el navegador crea a partir del HTML.\n\nEl HTML es estático\nEl DOM es dinámico\nJavaScript interactúa con el DOM, no con el HTML original\n\n\nEl DOM es la página web viva dentro del navegador.",
     "crumbs": [
       "Bloque III Interacción",
-      "Semana 10",
-      "React IV"
+      "Semana 6",
+      "DOM"
     ]
   },
   {
-    "objectID": "pages/Bloque3/ReactIV.html#ecosistema-node",
-    "href": "pages/Bloque3/ReactIV.html#ecosistema-node",
-    "title": "React IV",
-    "section": "Ecosistema Node",
-    "text": "Ecosistema Node\nHasta ahora hemos trabajado únicamente con React y JavaScript.\nSin embargo, en el desarrollo real de aplicaciones es muy común utilizar librerías externas, para ello podemos recurrir Node.JS.\nReact está diseñado para funcionar dentro de un ecosistema de paquetes.\nEjemplos habituales:\n\nReact Router → navegación\nAxios → peticiones HTTP\nChart.js → gráficas\nZustand / Redux → gestión de estado\nLibrerías de UI: Tailwind, Bootstrap, Booswatch",
+    "objectID": "pages/Bloque3/DOM.html#el-dom-como-árbol",
+    "href": "pages/Bloque3/DOM.html#el-dom-como-árbol",
+    "title": "DOM",
+    "section": "El DOM como árbol",
+    "text": "El DOM como árbol\nEl DOM tiene estructura de árbol (grafo):\n\nCada etiqueta HTML es un nodo\nLos nodos tienen relaciones (padre, hijos, hermanos)\n\nEjemplo:\n&lt;body&gt;\n  &lt;h1&gt;Título&lt;/h1&gt;\n  &lt;button&gt;Click&lt;/button&gt;\n&lt;/body&gt;\nRepresentación conceptual:\ndocument\n └─ body\n    ├─ h1\n    └─ button",
     "crumbs": [
       "Bloque III Interacción",
-      "Semana 10",
-      "React IV"
+      "Semana 6",
+      "DOM"
     ]
   },
   {
-    "objectID": "pages/Bloque3/ReactIV.html#npm",
-    "href": "pages/Bloque3/ReactIV.html#npm",
-    "title": "React IV",
-    "section": "npm",
-    "text": "npm\nnpm (Node Package Manager) es el sistema que permite instalar y gestionar librerías de JavaScript. Como su nombre indica, está desarrollado por Node.JS\nCada proyecto tiene un archivo:\npackage.json\nEn este archivo se registran las dependencias del proyecto.\nEjemplo:\n{\n  \"dependencies\": {\n    \"react\": \"^18.0.0\",\n    \"react-router-dom\": \"^6.0.0\"\n  }\n}\n\nInstalación de paquetes\nLas librerías se instalan desde la terminal.\nnpm install react-router-dom\nEsto hace tres cosas:\n\nDescarga el paquete\nLo guarda en node_modules (capreta donde se guardan las librerías externas)\nAñade la dependencia en package.json",
+    "objectID": "pages/Bloque3/DOM.html#acceso-al-dom-desde-javascript",
+    "href": "pages/Bloque3/DOM.html#acceso-al-dom-desde-javascript",
+    "title": "DOM",
+    "section": "Acceso al DOM desde JavaScript",
+    "text": "Acceso al DOM desde JavaScript\nEl navegador nos proporciona el objeto global document, que permite:\n\nBuscar elementos\nLeer su contenido\nModificar la interfaz\n\ndocument\ndocument.body",
     "crumbs": [
       "Bloque III Interacción",
-      "Semana 10",
-      "React IV"
+      "Semana 6",
+      "DOM"
     ]
   },
   {
-    "objectID": "pages/Bloque3/ReactIV.html#react-router",
-    "href": "pages/Bloque3/ReactIV.html#react-router",
-    "title": "React IV",
-    "section": "React Router",
-    "text": "React Router\nEn una aplicación web tradicional cada enlace carga una página nueva.\nEn React normalmente trabajamos con Single Page Applications (SPA).\nEn una SPA:\n\nel navegador no recarga la página\nReact cambia los componentes que se muestran\n\nPara gestionar esto utilizamos React Router.\nRealmente es la misma página, solo que el usuario lo percibe como distintas páginas\nEl usuario percibirá que el sitio web está divido en diferentes subpáginas\n\n/\npokemons\npokemons/pikachu\n\n\nComponentes principales de React Router\nLos elementos fundamentales son:\n\nBrowserRouter\nRoutes\nRoute\nLink\n\nEjemplo básico:\nimport { BrowserRouter, Routes, Route } from \"react-router-dom\";\n\nfunction App() {\n  return (\n    &lt;BrowserRouter&gt;\n\n      &lt;Routes&gt;\n\n        &lt;Route path=\"/\" element={&lt;Home /&gt;} /&gt;\n\n        &lt;Route path=\"/pokemons\" element={&lt;PokemonList /&gt;} /&gt;\n\n      &lt;/Routes&gt;\n\n    &lt;/BrowserRouter&gt;\n  );\n}\nElementos del código\n\nBrowserRouter\nEs el componente que activa el sistema de navegación de React Router. Utiliza la API de historial del navegador para cambiar la URL sin recargar la página.\nRoutes\nEs el contenedor donde se definen todas las rutas de la aplicación. React Router examina las rutas dentro de este componente para decidir qué componente mostrar.\nRoute\nDefine una ruta concreta de la aplicación.\n\n\npath\nIndica la URL que activa la ruta.\nEjemplo: / corresponde a la página principal.\nelement\nEs el componente de React que se renderiza cuando la URL coincide con el path.\n&lt;Home /&gt;\nComponente que se muestra cuando el usuario accede a la ruta /.\n&lt;PokemonList /&gt;\nComponente que se muestra cuando el usuario accede a la ruta /pokemons.\n\n\n\nNavegación\nPara navegar entre páginas utilizamos el componente Link.\nimport { Link } from \"react-router-dom\";\n\n&lt;Link to=\"/\"&gt;Inicio&lt;/Link&gt;\n\n&lt;Link to=\"/pokemon\"&gt;Pokemon&lt;/Link&gt;\nA diferencia de &lt;a&gt;:\n\nno recarga la página\nReact cambia el componente visible\n\n\n\nParámetros dinámicos\nPodemos crear rutas dinámicas.\nEjemplo:\n/pokemon/25\n/pokemon/7\nDefinición de la ruta:\n&lt;Route path=\"/pokemon/:id\" element={&lt;PokemonDetail /&gt;} /&gt;\n\nuseParams\nPara acceder al parámetro utilizamos el hook useParams de React Router.\nimport { useParams } from \"react-router-dom\";\n\nfunction PokemonDetail() {\n\n  const { id } = useParams();\n\n  return &lt;p&gt;Pokemon {id}&lt;/p&gt;;\n\n}\nEste parámetro puede utilizarse para realizar peticiones a una API.",
+    "objectID": "pages/Bloque3/DOM.html#selectores",
+    "href": "pages/Bloque3/DOM.html#selectores",
+    "title": "DOM",
+    "section": "Selectores",
+    "text": "Selectores\n\nPor ID\ndocument.getElementById(\"count\")\ndocument.querySelector(\"#count\")\n\n\nPor etiqueta\ndocument.querySelector(\"button\")\n\n\nPor clase\ndocument.querySelector(\".item\")\ndocument.querySelectorAll(\".item\")\nNotas: - querySelector devuelve el primer elemento - querySelectorAll devuelve una lista - Usan la misma sintaxis que CSS",
     "crumbs": [
       "Bloque III Interacción",
-      "Semana 10",
-      "React IV"
+      "Semana 6",
+      "DOM"
     ]
   },
   {
-    "objectID": "pages/Bloque3/ReactIV.html#context-api",
-    "href": "pages/Bloque3/ReactIV.html#context-api",
-    "title": "React IV",
-    "section": "Context API",
-    "text": "Context API\nEn aplicaciones grandes aparece un problema frecuente.\nMuchos componentes necesitan acceder a la misma información.\nPor ejemplo:\n\nusuario\ntema visual\nidioma\nconfiguración\n\nSi pasamos la información mediante props, los datos deben atravesar muchos componentes.\nRepresentación conceptual:\nApp\n └ Layout\n    └ Page\n       └ Component\nSi todos necesitan user, debemos pasar la prop continuamente.\nEste problema se conoce como prop drilling.\n\nContext\nReact proporciona una solución llamada Context.\nContext permite compartir información entre múltiples componentes sin pasar props manualmente.\nEl proceso tiene tres pasos:\n\nCrear el contexto\nProveer el contexto\nConsumir el contexto\n\n\nCrear un contexto\nimport { createContext } from \"react\";\n\nconst UserContext = createContext();\nEsto crea un contenedor que puede almacenar información compartida.\n\n\nProvider\nEl Provider permite que los componentes hijos accedan al contexto.\n&lt;UserContext.Provider value={user}&gt;\n\n  &lt;App /&gt;\n\n&lt;/UserContext.Provider&gt;\nTodos los componentes dentro del Provider pueden acceder al valor.\n\n\nConsumir el contexto\nPara acceder al contexto utilizamos el hook useContext.\nimport { useContext } from \"react\";\n\nconst user = useContext(UserContext);\nEl componente obtiene directamente el valor almacenado en el contexto.\n\n\nEjemplo completo\nimport { createContext, useContext } from \"react\";\n\nconst UserContext = createContext();\n\nfunction App() {\n\n  const user = { name: \"Javier\" };\n\n  return (\n\n    &lt;UserContext.Provider value={user}&gt;\n\n      &lt;Profile /&gt;\n\n    &lt;/UserContext.Provider&gt;\n\n  );\n}\n\nfunction Profile() {\n\n  const user = useContext(UserContext);\n\n  return &lt;h1&gt;{user.name}&lt;/h1&gt;;\n\n}",
+    "objectID": "pages/Bloque3/DOM.html#leer-y-modificar-elementos",
+    "href": "pages/Bloque3/DOM.html#leer-y-modificar-elementos",
+    "title": "DOM",
+    "section": "Leer y modificar elementos",
+    "text": "Leer y modificar elementos\nelement.textContent\nelement.textContent = \"Nuevo texto\"\nelement.classList.add(\"active\")\nelement.classList.remove(\"active\")",
     "crumbs": [
       "Bloque III Interacción",
-      "Semana 10",
-      "React IV"
+      "Semana 6",
+      "DOM"
     ]
   },
   {
-    "objectID": "pages/Bloque3/presentacion-reactIV.html#ecosistema-node",
-    "href": "pages/Bloque3/presentacion-reactIV.html#ecosistema-node",
-    "title": "React IV",
-    "section": "Ecosistema Node",
-    "text": "Ecosistema Node\nHasta ahora hemos trabajado únicamente con React y JavaScript.\nSin embargo, en el desarrollo real de aplicaciones es muy común utilizar librerías externas, para ello podemos recurrir Node.JS.\nReact está diseñado para funcionar dentro de un ecosistema de paquetes."
-  },
-  {
-    "objectID": "pages/Bloque3/presentacion-reactIV.html#npm",
-    "href": "pages/Bloque3/presentacion-reactIV.html#npm",
-    "title": "React IV",
-    "section": "npm",
-    "text": "npm\nnpm (Node Package Manager) es el sistema que permite instalar y gestionar librerías de JavaScript. Como su nombre indica, está desarrollado por Node.JS\nCada proyecto tiene un archivo:\npackage.json\nEn este archivo se registran las dependencias del proyecto."
-  },
-  {
-    "objectID": "pages/Bloque3/presentacion-reactIV.html#react-router",
-    "href": "pages/Bloque3/presentacion-reactIV.html#react-router",
-    "title": "React IV",
-    "section": "React Router",
-    "text": "React Router\nEn una aplicación web tradicional cada enlace carga una página nueva.\nEn React normalmente trabajamos con Single Page Applications (SPA).\nEn una SPA:\n\nel navegador no recarga la página\nReact cambia los componentes que se muestran\n\nPara gestionar esto utilizamos React Router.\nRealmente es la misma página, solo que el usuario lo percibe como distintas páginas"
-  },
-  {
-    "objectID": "pages/Bloque3/presentacion-reactIV.html#context-api",
-    "href": "pages/Bloque3/presentacion-reactIV.html#context-api",
-    "title": "React IV",
-    "section": "Context API",
-    "text": "Context API\nEn aplicaciones grandes aparece un problema frecuente.\nMuchos componentes necesitan acceder a la misma información.\nPor ejemplo:\n\nusuario\ntema visual\nidioma\nconfiguración\n\nSi pasamos la información mediante props, los datos deben atravesar muchos componentes."
-  },
-  {
-    "objectID": "pages/Bloque3/MAentorno.html",
-    "href": "pages/Bloque3/MAentorno.html",
-    "title": "MA: Entorno",
-    "section": "",
-    "text": "Tanto trabajando con React como con JavaScript puede ser útil leer propiedades del navegador, así como almacenar información en los dispositivos locales."
-  },
-  {
-    "objectID": "pages/Bloque3/Intermedio.html",
-    "href": "pages/Bloque3/Intermedio.html",
-    "title": "React III",
-    "section": "",
-    "text": "Contenido",
+    "objectID": "pages/Bloque3/DOM.html#eventos",
+    "href": "pages/Bloque3/DOM.html#eventos",
+    "title": "DOM",
+    "section": "Eventos",
+    "text": "Eventos\nEl DOM permite reaccionar a acciones del usuario mediante eventos.\nbutton.addEventListener(\"click\", () =&gt; {\n  // código a ejecutar\n});\nFlujo típico:\nUsuario → Evento → JavaScript → DOM actualizado",
     "crumbs": [
       "Bloque III Interacción",
-      "Semana 9",
-      "React III"
+      "Semana 6",
+      "DOM"
     ]
   },
   {
-    "objectID": "pages/Bloque3/Intermedio.html#controlled-inputs",
-    "href": "pages/Bloque3/Intermedio.html#controlled-inputs",
-    "title": "React III",
-    "section": "Controlled Inputs",
-    "text": "Controlled Inputs\n\nMotivación\nHasta ahora se ha trabajado con eventos capturando acciones del usuario.\nSin embargo, al trabajar con formularios surge una cuestión fundamental:\n\n¿Quién controla el valor del input?\n¿El DOM o React?\n\nRecordemos que en HTML puro o, el valor de un &lt;input&gt; está gestionado directamente por el DOM.\nEn React, podemos hacer que el valor del input esté controlado por el estado del componente.\nA esto lo llamamos controlled input.\n\n\n¿Qué es un controlled input?\nUn controlled input es un elemento de formulario cuyo valor:\n\nEstá almacenado en el estado del componente\nSe actualiza mediante un evento (onChange)\nSe renderiza utilizando ese mismo estado\n\nÚnica fuente de verdad (single source of truth).\n\n\nEstructura del componente controlled\nimport { useState } from \"react\";\nfunction FormularioNombre() {\n\n  const [nombre, setNombre] = useState(\"\");\n\n  function manejarCambio(event) {\n    setNombre(event.target.value);\n  }\n\n  return (\n    &lt;div&gt;\n      &lt;input type=\"text\" \n       value={nombre}\n        onChange={manejarCambio}\n      /&gt;\n      &lt;p&gt;El nombre introducido es: {nombre}&lt;/p&gt;\n    &lt;/div&gt;\n  );\n}\n\nAnálisis del ejemplo\nEl valor del input se sincroniza con el estado\n\nDeclaramos una variable de estado: nombre\nAsociamos el atributo value del input a ese estado\nCapturamos el evento onChange\nActualizamos el estado con setNombre\n\nCada vez que el estado cambia: El componente se vuelve a ejecutar El JSX se vuelve a generar El valor del input se sincroniza con el estado\n\n\n\nEjemplo Formulario\nimport { useState } from \"react\";\n\nfunction FormularioSimple() {\n\n  const [email, setEmail] = useState(\"\");\n\n  function handleChange(event) {\n    setEmail(event.target.value);\n  }\n\n  function handleSubmit(event) {\n    event.preventDefault();   // Evita la recarga del navegador\n\n    console.log(\"Formulario enviado\");\n    console.log(\"Email:\", email);\n\n    setEmail(\"\");  // Limpieza opcional del campo\n  }\n\n  return (\n    &lt;form onSubmit={handleSubmit}&gt;\n      &lt;input \n        type=\"email\"\n        value={email}\n        onChange={handleChange}\n      /&gt;\n      &lt;button type=\"submit\"&gt;Enviar&lt;/button&gt;\n    &lt;/form&gt;\n  );\n}\nReferencia: https://es.react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable",
+    "objectID": "pages/Bloque3/DOM.html#ejemplo-contador-con-botón",
+    "href": "pages/Bloque3/DOM.html#ejemplo-contador-con-botón",
+    "title": "DOM",
+    "section": "Ejemplo: contador con botón",
+    "text": "Ejemplo: contador con botón\n\nHTML\n&lt;h1 id=\"count\"&gt;0&lt;/h1&gt;\n&lt;button id=\"btn\"&gt;Sumar 1&lt;/button&gt;\n\n\nJavaScript\nlet count = 0;\n\nconst countEl = document.querySelector(\"#count\");\nconst btn = document.querySelector(\"#btn\");\n\nbtn.addEventListener(\"click\", () =&gt; {\n  count++;\n  countEl.textContent = count;\n});",
     "crumbs": [
       "Bloque III Interacción",
-      "Semana 9",
-      "React III"
+      "Semana 6",
+      "DOM"
     ]
   },
   {
-    "objectID": "pages/Bloque3/Intermedio.html#hooks-repaso",
-    "href": "pages/Bloque3/Intermedio.html#hooks-repaso",
-    "title": "React III",
-    "section": "Hooks (Repaso)",
-    "text": "Hooks (Repaso)\n\nFunción especial que permite modificar las propiedades internas de los componentes\nCaracterísticas avanzadas\nModificación del life-cycle\nNormalmente forma use____",
+    "objectID": "pages/Bloque3/DOM.html#más-ejemplos",
+    "href": "pages/Bloque3/DOM.html#más-ejemplos",
+    "title": "DOM",
+    "section": "Más ejemplos",
+    "text": "Más ejemplos\nEj1: Show input\nEj2: Par e Impar\nEj3: Toggle\nEj4: Creación dinámica\nEj5: Validación básica",
     "crumbs": [
       "Bloque III Interacción",
-      "Semana 9",
-      "React III"
+      "Semana 6",
+      "DOM"
     ]
   },
   {
-    "objectID": "pages/Bloque3/Intermedio.html#useeffect",
-    "href": "pages/Bloque3/Intermedio.html#useeffect",
-    "title": "React III",
-    "section": "useEffect",
-    "text": "useEffect\n\nuseEffect es un Hook que permite ejecutar efectos secundarios dentro de un componente funcional.\nUn efecto secundario es cualquier operación que no sea simplemente devolver JSX (por ejemplo: peticiones a un servidor, temporizadores, suscripciones).\nSe ejecuta después de que el componente se renderiza en el DOM.\n\n\nMétodos de uso de useEffect\n\n1. Sin array de dependencias\nuseEffect(() =&gt; {\n  console.log(\"Se ejecuta en cada render\");\n});\nComportamiento:\n\nSe ejecuta después de cada renderizado.\nNo existe control sobre la frecuencia.\nPuede generar bucles si modifica estado sin control.\n\nInterpretación conceptual:\nEl efecto acompaña siempre al render.\n\n\n2. Con array vacío\nuseEffect(() =&gt; {\n  console.log(\"Se ejecuta solo una vez\");\n}, []);\nComportamiento:\n\nSe ejecuta únicamente tras el primer render.\nEquivalente conceptual al “montaje” del componente.\n\nUso habitual:\n\nPeticiones a servidor\nInicializaciones\nSuscripciones\n\nInterpretación conceptual:\nEl efecto ocurre una única vez al crear el componente.\n\n\n3. Con dependencias específicas\nuseEffect(() =&gt; {\n  console.log(\"Se ejecuta cuando cambia contador\");\n}, [contador]);\nComportamiento:\n\nSe ejecuta tras el primer render.\nSe vuelve a ejecutar cuando cambia alguna variable del array.\n\nInterpretación conceptual:\nEl efecto depende del estado indicado.\nReact compara el valor anterior con el nuevo y decide si debe ejecutar el efecto.",
-    "crumbs": [
-      "Bloque III Interacción",
-      "Semana 9",
-      "React III"
-    ]
+    "objectID": "pages/Bloque3/dom.html#qué-es-el-dom",
+    "href": "pages/Bloque3/dom.html#qué-es-el-dom",
+    "title": "DOM",
+    "section": "¿Qué es el DOM?",
+    "text": "¿Qué es el DOM?\nEl DOM (Document Object Model) es la representación en memoria que el navegador crea a partir del HTML.\n\nEl HTML es estático\nEl DOM es dinámico\nJavaScript interactúa con el DOM, no con el HTML original\n\n\nEl DOM es la página web viva dentro del navegador."
   },
   {
-    "objectID": "pages/Bloque3/Intermedio.html#fetch",
-    "href": "pages/Bloque3/Intermedio.html#fetch",
-    "title": "React III",
-    "section": "fetch()",
-    "text": "fetch()\nHasta ahora nuestros componentes eran completamente locales.\nSin embargo, en aplicaciones reales necesitamos:\n\nDescargar datos\n\nConectarnos a servidores\n\nTrabajar con APIs externas\n\nPara ello utilizamos fetch().\n\nEjemplo mínimo de fetch\nfetch(\"https://pokeapi.co/api/v2/pokemon/1\")\n  .then(response =&gt; response.json())\n  .then(data =&gt; console.log(data));\nUtiliza las Promises\nInterpretación simple:\n\nSe hace una petición a una URL\n\nSe transforma la respuesta a formato JSON\n\nSe accede a los datos\n\n\n\nfetch() dentro de useEffect\nEn React, lo habitual es realizar la descarga cuando el componente se monta.\nPara ello:\n\nUtilizamos useEffect\nAñadimos array vacío []\nGuardamos los datos en el estado\n\n\n\nEjemplo integrado\nimport { useState, useEffect } from \"react\";\n\nfunction Pokemon() {\n\n  const [pokemon, setPokemon] = useState(null);\n\n  useEffect(() =&gt; {\n\n    fetch(\"https://pokeapi.co/api/v2/pokemon/1\")\n      .then(response =&gt; response.json())\n      .then(data =&gt; setPokemon(data));\n\n  }, []);\n\n  if (!pokemon) return &lt;p&gt;Cargando...&lt;/p&gt;;\n\n  return (\n    &lt;div&gt;\n      &lt;h2&gt;{pokemon.name}&lt;/h2&gt;\n      &lt;img \n        src={pokemon.sprites.front_default} \n        alt={pokemon.name} \n      /&gt;\n    &lt;/div&gt;\n  );\n}\n\n\nFlujo conceptual\n\nRender inicial\n\nSe ejecuta useEffect\n\nSe lanza la petición\n\nSe actualiza el estado\n\nNuevo render con los datos\n\n\n\nAdvertencia importante\nSi eliminamos el array vacío:\nuseEffect(() =&gt; {\n  fetch(\"https://pokeapi.co/api/v2/pokemon/1\")\n    .then(res =&gt; res.json())\n    .then(data =&gt; setPokemon(data));\n});\nEl efecto se ejecutará en cada render.\nComo actualizar estado provoca render, se generará un bucle infinito.\nuseEffect conecta React con el exterior.\nfetch() permite traer datos del exterior.\nEl estado vuelve a controlar el render.\nEn la siguiente sección formalizaremos esto utilizando async / await.",
-    "crumbs": [
-      "Bloque III Interacción",
-      "Semana 9",
-      "React III"
-    ]
+    "objectID": "pages/Bloque3/dom.html#el-dom-como-árbol",
+    "href": "pages/Bloque3/dom.html#el-dom-como-árbol",
+    "title": "DOM",
+    "section": "El DOM como árbol",
+    "text": "El DOM como árbol\nEl DOM tiene estructura de árbol (grafo):\n\nCada etiqueta HTML es un nodo\nLos nodos tienen relaciones (padre, hijos, hermanos)\n\nEjemplo:\n&lt;body&gt;\n  &lt;h1&gt;Título&lt;/h1&gt;\n  &lt;button&gt;Click&lt;/button&gt;\n&lt;/body&gt;"
   },
   {
-    "objectID": "pages/Bloque3/Intermedio.html#async-y-await",
-    "href": "pages/Bloque3/Intermedio.html#async-y-await",
-    "title": "React III",
-    "section": "async y await",
-    "text": "async y await\nHasta ahora hemos utilizado fetch() con encadenamiento.\nExiste una forma más clara y estructurada de escribir código asíncrono:\n\nasync\nawait\n\nSu objetivo es hacer que el código sea más legible.\n\n¿Qué significa async?\n\nSe coloca delante de una función\nIndica que la función trabajará con operaciones asíncronas\n\nasync function ejemplo() {\n  console.log(\"Función asíncrona\");\n}\n\n\n¿Qué significa await?\n\nSolo puede utilizarse dentro de una función async\nDetiene la ejecución hasta que la operación finaliza\nHace que el código se lea de forma secuencial\n\n\n\nEjemplo básico con fetch\nasync function obtenerPokemon() {\n\n  const response = await fetch(\n    \"https://pokeapi.co/api/v2/pokemon/1\"\n  );\n\n  const data = await response.json();\n\n  console.log(data);\n}\nInterpretación conceptual:\n\nSe realiza la petición\nSe espera la respuesta\nSe transforma a JSON\nSe trabaja con los datos\n\nEl código se lee de arriba hacia abajo.\n\n\nasync / await dentro de useEffect\nEn React, lo habitual es declarar una función interna y ejecutarla.\n\n\nEjemplo completo\nimport { useState, useEffect } from \"react\";\n\nfunction Pokemon() {\n\n  const [pokemon, setPokemon] = useState(null);\n\n  useEffect(() =&gt; {\n\n    async function fetchData() {\n\n      const response = await fetch(\n        \"https://pokeapi.co/api/v2/pokemon/1\"\n      );\n\n      const data = await response.json();\n\n      setPokemon(data);\n    }\n\n    fetchData();\n\n  }, []);\n\n  if (!pokemon) return &lt;p&gt;Cargando...&lt;/p&gt;;\n\n  return (\n    &lt;div&gt;\n      &lt;h2&gt;{pokemon.name}&lt;/h2&gt;\n      &lt;img \n        src={pokemon.sprites.front_default} \n        alt={pokemon.name} \n      /&gt;\n    &lt;/div&gt;\n  );\n}\n\n\n¿Por qué no hacer directamente?\nuseEffect(async () =&gt; {\n  ...\n}, []);\nPorque useEffect no debe recibir una función asíncrona directamente.\nPor eso declaramos la función dentro y luego la ejecutamos.\n\n\nFlujo mental con async / await\n\nRender inicial\n\nSe ejecuta useEffect\n\nSe llama a la función asíncrona\n\nawait espera la respuesta\n\nSe actualiza el estado\n\nNuevo render\n\nasync / await no cambia lo que hace el programa.\nSolo cambia la forma de escribirlo:\nMás claro.\nMás estructurado.\nMás fácil de mantener.",
+    "objectID": "pages/Bloque3/dom.html#acceso-al-dom-desde-javascript",
+    "href": "pages/Bloque3/dom.html#acceso-al-dom-desde-javascript",
+    "title": "DOM",
+    "section": "Acceso al DOM desde JavaScript",
+    "text": "Acceso al DOM desde JavaScript\nEl navegador nos proporciona el objeto global document, que permite:\n\nBuscar elementos\nLeer su contenido\nModificar la interfaz\n\ndocument\ndocument.body"
+  },
+  {
+    "objectID": "pages/Bloque3/dom.html#selectores",
+    "href": "pages/Bloque3/dom.html#selectores",
+    "title": "DOM",
+    "section": "Selectores",
+    "text": "Selectores\nPor ID\ndocument.getElementById(\"count\")\ndocument.querySelector(\"#count\")\nPor etiqueta\ndocument.querySelector(\"button\")"
+  },
+  {
+    "objectID": "pages/Bloque3/dom.html#leer-y-modificar-elementos",
+    "href": "pages/Bloque3/dom.html#leer-y-modificar-elementos",
+    "title": "DOM",
+    "section": "Leer y modificar elementos",
+    "text": "Leer y modificar elementos\nelement.textContent\nelement.textContent = \"Nuevo texto\"\nelement.classList.add(\"active\")\nelement.classList.remove(\"active\")"
+  },
+  {
+    "objectID": "pages/Bloque3/dom.html#eventos",
+    "href": "pages/Bloque3/dom.html#eventos",
+    "title": "DOM",
+    "section": "Eventos",
+    "text": "Eventos\nEl DOM permite reaccionar a acciones del usuario mediante eventos.\nbutton.addEventListener(\"click\", () =&gt; {\n  // código a ejecutar\n});\nFlujo típico:\nUsuario → Evento → JavaScript → DOM actualizado"
+  },
+  {
+    "objectID": "pages/Bloque3/dom.html#ejemplo-contador-con-botón",
+    "href": "pages/Bloque3/dom.html#ejemplo-contador-con-botón",
+    "title": "DOM",
+    "section": "Ejemplo: contador con botón",
+    "text": "Ejemplo: contador con botón\nHTML\n&lt;h1 id=\"count\"&gt;0&lt;/h1&gt;\n&lt;button id=\"btn\"&gt;Sumar 1&lt;/button&gt;\nJavaScript\nlet count = 0;\n\nconst countEl = document.querySelector(\"#count\");\nconst btn = document.querySelector(\"#btn\");\n\nbtn.addEventListener(\"click\", () =&gt; {\n  count++;\n  countEl.textContent = count;\n});"
+  },
+  {
+    "objectID": "pages/Bloque3/dom.html#más-ejemplos",
+    "href": "pages/Bloque3/dom.html#más-ejemplos",
+    "title": "DOM",
+    "section": "Más ejemplos",
+    "text": "Más ejemplos\nEj1: Show input\nEj2: Par e Impar\nEj3: Toggle\nEj4: Creación dinámica\nEj5: Validación básica"
+  },
+  {
+    "objectID": "pages/Bloque3/MARef.html",
+    "href": "pages/Bloque3/MARef.html",
+    "title": "MA: Uncontrolled fields y useRef",
+    "section": "",
+    "text": "Por el momento hemos visto dos hooks useState y useEffect, pero recordemos que en React existen más tipos de hooks que por ser menos útiles y debido a la falta de tiempo no son explicados, no obstante si hay alguno digno de mención es useRef o las referencias.\nUna ref es una referencia mutable que permite acceder directamente a un elemento del DOM o almacenar un valor persistente sin provocar un re-render del componente. El siguiente video ilustra su uso. Es un poco largo pero sirve para repasar los otros hooks.\n\n\nCon las ref podemos introducir los uncontrolled fields que nos permiten trabajar de otra forma con los formularios.\n\nSe prefiere la segunda implementación (la que no utiliza referencias) sobre la primera.",
     "crumbs": [
       "Bloque III Interacción",
       "Semana 9",
-      "React III"
+      "MA: *Uncontrolled fields* y `useRef`"
     ]
   },
   {
-    "objectID": "pages/Bloque3/Intermedio.html#ejemplo-con-la-pokeapi",
-    "href": "pages/Bloque3/Intermedio.html#ejemplo-con-la-pokeapi",
-    "title": "React III",
-    "section": "Ejemplo con la Pokeapi",
-    "text": "Ejemplo con la Pokeapi\nPoke-API\nDownload Code",
+    "objectID": "pages/Bloque3/t6.html",
+    "href": "pages/Bloque3/t6.html",
+    "title": "T6: Romancero Gitano I",
+    "section": "",
+    "text": "El objetivo de esta tarea es aplicar los conceptos básicos de HTML, CSS y JavaScript (DOM) para crear una página web interactiva que muestre poemas del Romancero gitano de Federico García Lorca y modifique su apariencia visual en función de las diferentes metáforas.\nResultado esperado",
     "crumbs": [
       "Bloque III Interacción",
-      "Semana 9",
-      "React III"
+      "Semana 6",
+      "T6: Romancero Gitano I"
     ]
   },
   {
-    "objectID": "pages/Bloque3/intermedio.html#controlled-inputs",
-    "href": "pages/Bloque3/intermedio.html#controlled-inputs",
-    "title": "React III",
-    "section": "Controlled Inputs",
-    "text": "Controlled Inputs\nMotivación\nHasta ahora se ha trabajado con eventos capturando acciones del usuario.\nSin embargo, al trabajar con formularios surge una cuestión fundamental:\n\n¿Quién controla el valor del input?\n¿El DOM o React?"
+    "objectID": "pages/Bloque3/t6.html#objetivo-de-la-tarea",
+    "href": "pages/Bloque3/t6.html#objetivo-de-la-tarea",
+    "title": "T6: Romancero Gitano I",
+    "section": "",
+    "text": "El objetivo de esta tarea es aplicar los conceptos básicos de HTML, CSS y JavaScript (DOM) para crear una página web interactiva que muestre poemas del Romancero gitano de Federico García Lorca y modifique su apariencia visual en función de las diferentes metáforas.\nResultado esperado",
+    "crumbs": [
+      "Bloque III Interacción",
+      "Semana 6",
+      "T6: Romancero Gitano I"
+    ]
   },
   {
-    "objectID": "pages/Bloque3/intermedio.html#hooks-repaso",
-    "href": "pages/Bloque3/intermedio.html#hooks-repaso",
-    "title": "React III",
-    "section": "Hooks (Repaso)",
-    "text": "Hooks (Repaso)\n\nFunción especial que permite modificar las propiedades internas de los componentes\nCaracterísticas avanzadas\nModificación del life-cycle\nNormalmente forma use____"
+    "objectID": "pages/Bloque3/t6.html#estructura-html",
+    "href": "pages/Bloque3/t6.html#estructura-html",
+    "title": "T6: Romancero Gitano I",
+    "section": "Estructura HTML",
+    "text": "Estructura HTML\nEl documento HTML debe:\n\nEstar correctamente estructurado (&lt;!DOCTYPE&gt;, &lt;html&gt;, &lt;head&gt;, &lt;body&gt;).\nContener un contenedor principal centrado horizontalmente.\nIncluir, en este orden:\n\nUn elemento para mostrar información métrica del poema (número de estrofas y versos).\nUn elemento para el título del poema.\nUn elemento para el texto del poema, respetando los saltos de verso utilizando la etiqueta &lt;pre&gt;.\nUn botón que permita cambiar de poema.\n\n\nNo debe utilizarse ningún framework ni librería externa.",
+    "crumbs": [
+      "Bloque III Interacción",
+      "Semana 6",
+      "T6: Romancero Gitano I"
+    ]
+  },
+  {
+    "objectID": "pages/Bloque3/t6.html#javascript",
+    "href": "pages/Bloque3/t6.html#javascript",
+    "title": "T6: Romancero Gitano I",
+    "section": "JavaScript",
+    "text": "JavaScript\n\nDatos\nEn JavaScript se debe definir un array de objetos, donde cada objeto represente un poema y tenga al menos:\n\nUn título.\nEl texto del poema como una cadena de texto, usando saltos de línea para los versos.\n\nEl cambio de poema debe hacerse recorriendo este array de forma cíclica (cola circular) mediante el botón.\nDescargar poemas (click derecho guardar enlace como)\n\n\nManipulación del DOM\nEl comportamiento de la página debe implementarse exclusivamente con DOM nativo, cumpliendo lo siguiente:\n\nTodas las funciones deben declararse como arrow functions.\nAl pulsar el botón:\n\nSe actualiza el título.\nSe actualiza el texto del poema.\nSe modifica el formato del fondo.\nSe recalculan y muestran:\n\nNúmero de versos.\nNúmero de estrofas (bloques separados por líneas en blanco).\n\n\n\nEl cálculo debe realizarse a partir del texto del poema, no con valores predefinidos.",
+    "crumbs": [
+      "Bloque III Interacción",
+      "Semana 6",
+      "T6: Romancero Gitano I"
+    ]
+  },
+  {
+    "objectID": "pages/Bloque3/t6.html#css",
+    "href": "pages/Bloque3/t6.html#css",
+    "title": "T6: Romancero Gitano I",
+    "section": "CSS",
+    "text": "CSS\nLorca utiliza las metáforas y la alegoría como elemento principal sobre el que construye sus poemas, al analizar profundamente descubrimos que siempre recurre a las mismas metáforas.\nEl color no se utiliza aquí solo como elemento decorativo, sino como un recurso semántico: cada color representa un símbolo literario presente en el poema.\nDesde el punto de vista técnico: - Los colores de fondo y de texto deben definirse en clases CSS. - JavaScript no decide colores, únicamente decide qué clase aplicar según el contenido del poema.\n\nPalabras clave y colores asociados\nSe debe detectar el texto del poema las siguientes palabras clave y aplicar el color de fondo correspondiente:\n\nguardia civil → fondo verde militar\nsangre → fondo granate oscuro\ncaballo → fondo color tierra\ncuchillo / navaja → fondo plateado\n\nEl color del texto debe elegirse siempre de forma que exista contraste suficiente con el fondo y se garantice la legibilidad.\nSi el poema contiene varias palabras clave, solo debe aplicarse un único estilo, siguiendo un orden de prioridad definido previamente.\nSi el poema no contiene ninguna de estas palabras, se aplicará un estilo por defecto con colores aleatorios.",
+    "crumbs": [
+      "Bloque III Interacción",
+      "Semana 6",
+      "T6: Romancero Gitano I"
+    ]
+  },
+  {
+    "objectID": "pages/Bloque3/t6.html#extra-opcional-símbolo-aurora",
+    "href": "pages/Bloque3/t6.html#extra-opcional-símbolo-aurora",
+    "title": "T6: Romancero Gitano I",
+    "section": "Extra opcional: símbolo aurora 🌈",
+    "text": "Extra opcional: símbolo aurora 🌈\nDe forma voluntaria, se puede añadir el símbolo aurora, que tendrá prioridad absoluta sobre todos los demás.\nCuando el poema contenga la palabra aurora, el fondo debe mostrar un degradado animado.\n\nCSS necesario para el extra\n.aurora {\n  background: linear-gradient(120deg,\n    #ff005d,\n    #ff9f1c,\n    #ffee32,\n    #3cff00,\n    #00e5ff,\n    #7a00ff,\n    #ff00c8\n  );\n  background-size: 600% 600%;\n  animation: aurora 10s linear infinite;\n  color: black;\n}\n\n@keyframes aurora {\n  0%   { background-position: 0% 50%; }\n  50%  { background-position: 100% 50%; }\n  100% { background-position: 0% 50%; }\n}",
+    "crumbs": [
+      "Bloque III Interacción",
+      "Semana 6",
+      "T6: Romancero Gitano I"
+    ]
+  },
+  {
+    "objectID": "pages/Bloque3/t6.html#consejos",
+    "href": "pages/Bloque3/t6.html#consejos",
+    "title": "T6: Romancero Gitano I",
+    "section": "Consejos",
+    "text": "Consejos\n\nCentrado de la página (layout clásico)\nToda la página debe estar centrada horizontalmente.\nEl centrado se consigue mediante:\n\nUn contenedor con un ancho máximo definido.\nMárgenes automáticos a izquierda y derecha.\n\nDesde el punto de vista conceptual:\n\nmargin: 0 auto no centra texto, centra bloques.\nEl navegador reparte automáticamente el espacio sobrante a ambos lados del contenedor.\n\n\n\nAnimación del cambio de color\nPara evitar que los cambios de color sean bruscos, se utiliza la propiedad transition en CSS.\nEsta propiedad indica al navegador que los cambios en determinadas propiedades visuales deben hacerse de forma progresiva.\nEjemplo conceptual:\nbody {\n  transition: background-color 0.6s, color 0.6s;\n}\nGracias a esta transición: - Cuando JavaScript cambia una clase o un color, - el navegador interpola automáticamente entre el color anterior y el nuevo.\nNo es necesario programar animaciones en JavaScript: CSS se encarga de todo el efecto visual.\n\n\nBúsqueda de una palabra\nPara buscar si determinada palabra determinada se debe utilizar la función includes de la clase string\n\ntexto = \"hoy nieva\";\n\ntexto.includes(\"nieva\");    //TRUE\ntexto.includes(\"llueve\");   //FALSE\n\n\nGeneración del color aleatorio\nPara la generacióndel color aleatorio de puede utilizar la siguiente función\nconst randomColor = () =&gt; '#' + Math.floor(Math.random() * 16777215).toString(16);\n\n\nConteo versos y estrofas\nEl recuento de versos y estrofas debe hacerse a partir del texto del poema, no con valores escritos a mano. A continuación se dan algunas pistas técnicas para abordar este problema.\n\nConteo de versos\nUn verso puede considerarse, a efectos prácticos en esta tarea, como una línea de texto no vacía.\nUna estrategia habitual consiste en: - Separar el texto por saltos de línea. - Eliminar las líneas vacías o formadas solo por espacios. - Contar cuántas líneas válidas quedan.\nEjemplo orientativo:\nconst versos = texto\n  .split('\\n')\n  .filter(linea =&gt; linea.trim() !== '')\n  .length;\nEste enfoque es suficiente para la mayoría de los poemas del Romancero gitano y evita errores frecuentes.\n\n\nConteo de estrofas\nUna estrofa puede entenderse como un bloque de versos separado de otros bloques por una línea en blanco.\nUna posible estrategia es: - Separar el texto usando dos (o más) saltos de línea consecutivos. - Eliminar bloques vacíos. - Contar los bloques resultantes.\nEjemplo orientativo:\nconst estrofas = texto\n  .split(/\\n\\s*\\n/)\n  .filter(bloque =&gt; bloque.trim() !== '')\n  .length;\nEntrega: un único archivo HTML funcional.",
+    "crumbs": [
+      "Bloque III Interacción",
+      "Semana 6",
+      "T6: Romancero Gitano I"
+    ]
+  },
+  {
+    "objectID": "pages/Bloque3/t6.html#recomendaciones-para-afrontar-la-tarea",
+    "href": "pages/Bloque3/t6.html#recomendaciones-para-afrontar-la-tarea",
+    "title": "T6: Romancero Gitano I",
+    "section": "Recomendaciones para afrontar la tarea",
+    "text": "Recomendaciones para afrontar la tarea\nAl enfrentarnos a un proyecto de cierta complejitud, el como afrontarlo resulta de cricial para el desarollo del mismo por ello a a continuación dejo un esquema de implementación modular. Sería mejor no utilizarlo, pero puede ser un buen punto de partida si no se sabe como empezar la app, no es el único proceso de implementación válido ni es más correcto que cualquier otro\n\nEstructura de HTML básica contadores de versos y estrofas placeholders de poema y título y botón\nFormateo CSS parte estática: centrado, tamaño (todo lo que no sea color)\nDefinir clases con colores predeterminados\nLógica interna con JS\n\n\nBuscar palabra\nContar estrofas\nConteo versos\nSelección de clase\nGenerar color aleatorio si procede\n\n\nIntegración con DOM",
+    "crumbs": [
+      "Bloque III Interacción",
+      "Semana 6",
+      "T6: Romancero Gitano I"
+    ]
   },
   {
+<<<<<<< HEAD
     "objectID": "pages/Bloque3/intermedio.html#useeffect",
     "href": "pages/Bloque3/intermedio.html#useeffect",
     "title": "React III",
@@ -546,424 +675,493 @@
     "href": "pages/Bloque3/ps.html",
     "title": "Proyecto Subsistema",
 >>>>>>> 8e10774 (feat: explicacion semana 10 (#4))
+=======
+    "objectID": "pages/Bloque3/ps.html",
+    "href": "pages/Bloque3/ps.html",
+    "title": "Proyecto Subsistema",
+>>>>>>> e3c3469 (feat:  varios)
     "section": "",
-    "text": "Contenido\nRepaso intensivo de JavaScript, tiene como objetivo dar una introducción del lenguaje, a usuarios que ya tengan experiencia previa programando.\nDescargar archivo de código (click derecho guardar enlace como)",
+    "text": "Desarrollar una pequeña aplicación web para gestionar una lista de tareas utilizando HTML, CSS y JavaScript, trabajando directamente con el DOM.\nbase",
     "crumbs": [
-      "Bloque II Programación",
-      "Repaso Intensivo",
-      "Repaso Intensivo JS"
+      "Bloque III Interacción",
+      "Semana 7",
+      "Proyecto Subsistema"
     ]
   },
   {
-    "objectID": "pages/Bloque2/intensivo.html#variables-y-tipos-básicos",
-    "href": "pages/Bloque2/intensivo.html#variables-y-tipos-básicos",
-    "title": "Repaso Intensivo JS",
-    "section": "Variables y tipos básicos",
-    "text": "Variables y tipos básicos\n\nDeclaración de variables\nEn JavaScript moderno se utilizan let y const (evitar var).\n\nlet: permite reasignación\nconst: no permite reasignación\nconst NO significa inmutable\nJavaScript es de tipado dinámico\nEl tipo depende del valor, no de la variable\n\nTipos primitivos:\n\nstring\nnumber\nboolean\nnull\nundefined\n\nlet edad = 12;        // number\nlet altura = 1.8;     // number\nlet nombre = \"Javier\"; // string\nlet casado = false;   // boolean\n\nlet ordenador = null; // ausencia intencionada de valor\nlet direccion;        // undefined\n\n\nUso de const\nconst dni = \"1235678L\";\ndni = \"23\"; // Error\n\nconst no significa inmutable\nconst dni = \"12345678L\";\ndni = \"87654321X\"; // Error\nPero:\nconst arr = [1, 2, 3];\narr.push(4); // permitido\n\n\n\nTipado dinámico\n\nJavaScript es de tipado dinámico\nEl tipo depende del valor, no de la variable\nUna variable puede cambiar de tipo durante la ejecución\n\nlet x = \"hola\";\nx = 42;      // válido\nx = true;    // válido\nEste comportamiento se conoce como shadowing o cambio dinámico de tipo. En el ejemplo anterior solo existe una variable X cuyo tipo pasa de Number a boolean",
+    "objectID": "pages/Bloque3/ps.html#objetivo",
+    "href": "pages/Bloque3/ps.html#objetivo",
+    "title": "Proyecto Subsistema",
+    "section": "",
+    "text": "Desarrollar una pequeña aplicación web para gestionar una lista de tareas utilizando HTML, CSS y JavaScript, trabajando directamente con el DOM.\nbase",
     "crumbs": [
-      "Bloque II Programación",
-      "Repaso Intensivo",
-      "Repaso Intensivo JS"
+      "Bloque III Interacción",
+      "Semana 7",
+      "Proyecto Subsistema"
     ]
   },
   {
-    "objectID": "pages/Bloque2/intensivo.html#null-vs-undefined",
-    "href": "pages/Bloque2/intensivo.html#null-vs-undefined",
-    "title": "Repaso Intensivo JS",
-    "section": "null vs undefined",
-    "text": "null vs undefined\n\nundefined: variable declarada pero sin valor\nnull: ausencia intencionada de valor\n\nJavaScript distingue entre:\n\n“todavía no hay valor” y “no hay valor”\n\nconsole.log(ordenador); // null\nconsole.log(direccion); // undefined",
+    "objectID": "pages/Bloque3/ps.html#qué-se-quiere-hacer",
+    "href": "pages/Bloque3/ps.html#qué-se-quiere-hacer",
+    "title": "Proyecto Subsistema",
+    "section": "Qué se quiere hacer",
+    "text": "Qué se quiere hacer\n\nCrear una página web que permita añadir tareas.\nCada tarea debe tener:\n\nUn texto descriptivo.\nUn responsable (Software, Hardware, Partners, Otros).\n\nLas tareas deben mostrarse en una lista.\nAl hacer click sobre una tarea, esta debe eliminarse.\nLa página no debe recargarse al añadir o eliminar tareas.",
     "crumbs": [
-      "Bloque II Programación",
-      "Repaso Intensivo",
-      "Repaso Intensivo JS"
+      "Bloque III Interacción",
+      "Semana 7",
+      "Proyecto Subsistema"
     ]
   },
   {
-    "objectID": "pages/Bloque2/intensivo.html#aritmética-y-operadores",
-    "href": "pages/Bloque2/intensivo.html#aritmética-y-operadores",
-    "title": "Repaso Intensivo JS",
-    "section": "Aritmética y operadores",
-    "text": "Aritmética y operadores\n\nOperadores aritméticos\nlet a = 12, b = 4;\n\na + b\na - b\na * b\na / b\na % b\na = a + b;\na += b;\na -= b;\na *= b;\n\nPotencias\na**b  // Power\nIncrementos:\nb--; b++;\n--b; ++b;\n\n\n\nStrings y concatenación\na = \"hola \";\nb = \"mundo\";\na + b;\n\n\nComparación\n\n== compara valor (evitar)\n=== compara valor y tipo (usar)\n\n\n\nOperadores lógicos\n\n&& AND\n|| OR\n! NOT\n\n\n\nComparaciones\n\n== compara solo valor (evitar)\n=== compara valor y tipo (usar siempre, aunque sea innecesario)\n\n5 == \"5\";   // true\n5 === \"5\";  // false\n\n\nOperadores lógicos\n\n&& AND\n|| OR\n! NOT\n\n(a &gt; 0) && (b &lt; 10)",
+    "objectID": "pages/Bloque3/ps.html#requisitos-técnicos",
+    "href": "pages/Bloque3/ps.html#requisitos-técnicos",
+    "title": "Proyecto Subsistema",
+    "section": "Requisitos técnicos",
+    "text": "Requisitos técnicos\n\nLa lógica debe implementarse manipulando el DOM directamente (document.createElement, appendChild, addEventListener, etc.).\nHTML básico para la estructura.\nCSS libre, se espera que se use de forma creativa para mejorar el diseño.\nJavaScript en un archivo separado o en un &lt;script&gt;.",
     "crumbs": [
-      "Bloque II Programación",
-      "Repaso Intensivo",
-      "Repaso Intensivo JS"
+      "Bloque III Interacción",
+      "Semana 7",
+      "Proyecto Subsistema"
     ]
   },
   {
-    "objectID": "pages/Bloque2/intensivo.html#estructuras-de-control",
-    "href": "pages/Bloque2/intensivo.html#estructuras-de-control",
-    "title": "Repaso Intensivo JS",
-    "section": "Estructuras de control",
-    "text": "Estructuras de control\n\nCondicionales\nif (a === b) {\n\n} else if (a &gt; b) {\n\n} else {\n\n}\n\n\nBucles\n\nwhile\nlet x = 20;\nwhile (x &lt; 50) {\n  x += 10;\n}\n\n\nfor\nfor (let i = 0; i &lt; 10; i++) {\n  // iteración\n}",
+    "objectID": "pages/Bloque3/ps.html#importante",
+    "href": "pages/Bloque3/ps.html#importante",
+    "title": "Proyecto Subsistema",
+    "section": "Importante",
+    "text": "Importante\n\nLa solución mínima funcional es sencilla.\nSe espera que el alumnado mejore notablemente el aspecto visual usando CSS.\nEl diseño, la usabilidad y la presentación formarán parte de la evaluación.\nAquellos que completen la funcionalidad básica de la tarea podrán preguntarle al profesor como mejorar la tarea o que agregar para ampliar funcionalidades",
     "crumbs": [
-      "Bloque II Programación",
-      "Repaso Intensivo",
-      "Repaso Intensivo JS"
+      "Bloque III Interacción",
+      "Semana 7",
+      "Proyecto Subsistema"
     ]
   },
   {
-    "objectID": "pages/Bloque2/intensivo.html#funciones",
-    "href": "pages/Bloque2/intensivo.html#funciones",
-    "title": "Repaso Intensivo JS",
-    "section": "Funciones",
-    "text": "Funciones\n\nEncapsulan lógica reutilizable\nPueden recibir parámetros\nPueden devolver valores\nSon ciudadanos de primera clase\n\n\nFunción clásica\nfunction sumar2(num, num2 = 2) {\n  num += num2;\n  return num;\n}\nPaso de variables por valor:\nlet a = 7;\nlet b = sumar2(a, a); // 14\na; // 7\n\n\nFunciones flecha y orden superior\nconst concatenarHola = input =&gt; input + \" Hola\";\nconcatenarHola(\"sdf\");\nfunction ejecuta(fun) {\n  fun();\n}\n\nejecuta(() =&gt; { console.log(\"hola\"); });\n\n\nFunciones propias de strings\nlet a = \"jsadfsadf \";\na.trim();   // Suprimir espacios adicionales\na.split('a');    // Divide el string en un array c\na.length;\n\n\nFunciones flecha\nconst cuadrado = n =&gt; n ** 2;\nForma extendida:\nconst cuadrado = (n) =&gt; {\n  return n ** 2;\n};\n\n\nFunciones como ciudadanos de primera clase\nLas funciones pueden:\n\nAsignarse a variables\nPasarse como argumentos\nDevolverse como resultado\n\nfunction ejecutar(f) {\n  f();\n}\n\nejecutar(() =&gt; console.log(\"Hola\"));",
+    "objectID": "pages/Bloque3/ps.html#no-es-necesario",
+    "href": "pages/Bloque3/ps.html#no-es-necesario",
+    "title": "Proyecto Subsistema",
+    "section": "No es necesario",
+    "text": "No es necesario\n\nGuardar las tareas al recargar la página.\nAutenticación de usuarios.\nBase de datos o backend.",
     "crumbs": [
-      "Bloque II Programación",
-      "Repaso Intensivo",
-      "Repaso Intensivo JS"
+      "Bloque III Interacción",
+      "Semana 7",
+      "Proyecto Subsistema"
     ]
   },
   {
-    "objectID": "pages/Bloque2/intensivo.html#arrays-base",
-    "href": "pages/Bloque2/intensivo.html#arrays-base",
-    "title": "Repaso Intensivo JS",
-    "section": "Arrays (base)",
-    "text": "Arrays (base)\n\nLista ordenada\nÍndices empiezan en 0\nPropiedad length\n\nlet cajon = [8, \"hola\", true, () =&gt; { return 7 }];\n\nAcceso\ncajon[0]  // 8\ncajon[2] = \"rino\";       // modificamos la entrada 2  \n\n\nAdiciones\ncajon.push(false);\ncajon.unshift(0);\n\n\nEliminaciones\ncajon.pop();\ncajon.shift();\ncajon.length;",
-    "crumbs": [
+    "objectID": "pages/Bloque3/ps.html#entregable",
+    "href": "pages/Bloque3/ps.html#entregable",
+    "title": "Proyecto Subsistema",
+    "section": "Entregable",
+    "text": "Entregable\n\nArchivos index.html, script.js y style.css.\nEl proyecto debe poder abrirse directamente en el navegador.",
+    "crumbs": [
+      "Bloque III Interacción",
+      "Semana 7",
+      "Proyecto Subsistema"
+    ]
+  },
+  {
+    "objectID": "pages/Bloque2/MAclases.html",
+    "href": "pages/Bloque2/MAclases.html",
+    "title": "MA: Clases ES6",
+    "section": "",
+    "text": "Contenido\nRepaso intensivo de clases en JavaScript (ES6+), orientado a usuarios con experiencia previa en programación y familiarizados con funciones, objetos y arrays.",
+    "crumbs": [
       "Bloque II Programación",
       "Repaso Intensivo",
-      "Repaso Intensivo JS"
+      "MA: Clases ES6"
     ]
   },
   {
-    "objectID": "pages/Bloque2/intensivo.html#objetos",
-    "href": "pages/Bloque2/intensivo.html#objetos",
-    "title": "Repaso Intensivo JS",
-    "section": "Objetos",
-    "text": "Objetos\nUn objeto representa una entidad mediante estructura clave–valor.\nlet gente = { pepe: 7, juanes: 8, andreas: 10, fran: [4, 2] };\n\nModificación\ngente.andreas = 32;\ngente.pepe++;\n\n\nAcceso dinámico\nlet nombre = \"pablo\";\n\ngente.nombre;      // undefined\ngente[nombre] = 2; // añade propiedad",
+    "objectID": "pages/Bloque2/MAclases.html#programación-orientada-a-objetos-en-javascript",
+    "href": "pages/Bloque2/MAclases.html#programación-orientada-a-objetos-en-javascript",
+    "title": "MA: Clases ES6",
+    "section": "Programación orientada a objetos en JavaScript",
+    "text": "Programación orientada a objetos en JavaScript\nJavaScript es un lenguaje basado en prototipos, pero desde ES6 introduce la sintaxis class, que:\n\nEs azúcar sintáctico sobre el sistema de prototipos\nFacilita la escritura y lectura de código OO\nNo convierte a JS en un lenguaje basado en clases clásicas",
     "crumbs": [
       "Bloque II Programación",
       "Repaso Intensivo",
-      "Repaso Intensivo JS"
+      "MA: Clases ES6"
     ]
   },
   {
-    "objectID": "pages/Bloque2/intensivo.html#referencias-vs-valores",
-    "href": "pages/Bloque2/intensivo.html#referencias-vs-valores",
-    "title": "Repaso Intensivo JS",
-    "section": "Referencias vs valores",
-    "text": "Referencias vs valores\n\nCopia por valor\nlet a = 5;\nlet b = a;\nb++;\na no cambia.\n\n\nCopia por referencia\nlet e3 = [\"juan\", \"pepe\"];\nlet d = e3;\n\nd.push(\"andrés\");\nAmbas variables apuntan al mismo array.\nconst poblacion = gente;\npoblacion[\"julio\"] = 8;\nLa copia por refencia se aplica a objetos y arrays\nlet x = [\"juan\", \"pepe\"];\nlet y = x;\n\ny.push(\"andrés\"); // Se añade en x e y pues son el mismo objeto\nAmbas variables apuntan al mismo objeto.",
+    "objectID": "pages/Bloque2/MAclases.html#definición-de-una-clase",
+    "href": "pages/Bloque2/MAclases.html#definición-de-una-clase",
+    "title": "MA: Clases ES6",
+    "section": "Definición de una clase",
+    "text": "Definición de una clase\n\nSintaxis básica\nclass Persona {\n  constructor(nombre, edad) {\n    this.nombre = nombre;\n    this.edad = edad;\n  }\n}\n\nclass: palabra clave\nconstructor: método especial de inicialización\nthis: referencia a la instancia actual",
     "crumbs": [
       "Bloque II Programación",
       "Repaso Intensivo",
-      "Repaso Intensivo JS"
+      "MA: Clases ES6"
     ]
   },
   {
-    "objectID": "pages/Bloque2/intensivo.html#spread-operator-...",
-    "href": "pages/Bloque2/intensivo.html#spread-operator-...",
-    "title": "Repaso Intensivo JS",
-    "section": "Spread operator (...)",
-    "text": "Spread operator (...)\n\nExpande arrays u objetos\nPermite copiar y combinar\nCopia superficial\n\n\nArrays\nJavier es añadido a arr2, pero no a arr.\nlet arr = [\"Alice\", \"Bob\", \"Kevin\"];\nlet arr2 = [...arr, \"Javier\"];\n\n\nObjetos\nOcurre lo mismo con los objetos\nconst sociedad = { ...poblacion, julia: 12 };",
+    "objectID": "pages/Bloque2/MAclases.html#creación-de-instancias",
+    "href": "pages/Bloque2/MAclases.html#creación-de-instancias",
+    "title": "MA: Clases ES6",
+    "section": "Creación de instancias",
+    "text": "Creación de instancias\nconst p1 = new Persona(\"Javier\", 45);\nconst p2 = new Persona(\"Ana\", 32);\n\nnew crea un nuevo objeto\nEjecuta automáticamente constructor",
     "crumbs": [
       "Bloque II Programación",
       "Repaso Intensivo",
-      "Repaso Intensivo JS"
+      "MA: Clases ES6"
     ]
   },
   {
-    "objectID": "pages/Bloque2/intensivo.html#funciones-de-array-js-moderno",
-    "href": "pages/Bloque2/intensivo.html#funciones-de-array-js-moderno",
-    "title": "Repaso Intensivo JS",
-    "section": "Funciones de array (JS moderno)",
-    "text": "Funciones de array (JS moderno)\nVamos a trabajar con un ejemplo completo, típico en programación funcional.\n\nDatos de partida\nlet y = [2, 4, 6, 7];\n\n\nFunción cuadrado\nDefinimos una función que, dado un número, devuelve su cuadrado:\nconst cuadrado = n =&gt; n ** 2;\nEs equivalente a:\nconst cuadrado = (n) =&gt; {\n  return n ** 2;\n};\n\n\nmap: transformar elementos\nAplicamos map para obtener un nuevo array con los cuadrados:\nconst y2 = y.map(cuadrado);\nResultado:\n[4, 16, 36, 49]\n\n\nfilter: seleccionar elementos\nDefinimos una función que comprueba si un número es par:\nconst even = n =&gt; n % 2 === 0;\nLa usamos con filter:\nconst yEven = y.filter(even);\n\n\nEncadenamiento (estilo declarativo)\nPodemos encadenar ambas operaciones:\ny\n  .map(n =&gt; n ** 2)\n  .filter(n =&gt; n % 2 === 0);\n\nEste estilo es declarativo: describimos qué queremos hacer con los datos, no cómo recorrerlos.",
+    "objectID": "pages/Bloque2/MAclases.html#métodos-de-instancia",
+    "href": "pages/Bloque2/MAclases.html#métodos-de-instancia",
+    "title": "MA: Clases ES6",
+    "section": "Métodos de instancia",
+    "text": "Métodos de instancia\nLos métodos se definen sin function y se comparten vía prototipo.\nclass Persona {\n  constructor(nombre, edad) {\n    this.nombre = nombre;\n    this.edad = edad;\n  }\n\n  saludar() {\n    return `Hola, soy ${this.nombre}`;\n  }\n\n  cumple() {\n    this.edad++;\n  }\n}\nUso:\np1.saludar();\np1.cumple();",
     "crumbs": [
       "Bloque II Programación",
       "Repaso Intensivo",
-      "Repaso Intensivo JS"
+      "MA: Clases ES6"
     ]
   },
   {
-    "objectID": "pages/Bloque2/ti.html",
-    "href": "pages/Bloque2/ti.html",
-    "title": "TI: Ejercicios JS",
-    "section": "",
-    "text": "El objetivo de estos ejercicios es repasar aquellas funcionalidades de JavaScript que difieren del resto de lenguajes de programación empirica, por lo que los siguentes ejercicios de DEBEN DE RESOLVER SIN UTILIZAR NINGUNA CONDICIONAL NI NINGÚN BUCLE.\nPrincipalmente trabajarás con:\nDebe de realizar la tarea enun archivo js, para comprobar el resultado debe de ejecutar desde la terminal con node nombreArchivo.js.",
+    "objectID": "pages/Bloque2/MAclases.html#métodos-vs-funciones-flecha",
+    "href": "pages/Bloque2/MAclases.html#métodos-vs-funciones-flecha",
+    "title": "MA: Clases ES6",
+    "section": "Métodos vs funciones flecha",
+    "text": "Métodos vs funciones flecha\nNo usar arrow functions como métodos de clase (salvo casos concretos):\nclass MalEjemplo {\n  metodo = () =&gt; {\n    console.log(this);\n  };\n}\n\nRompe el modelo prototípico\nMayor consumo de memoria",
     "crumbs": [
       "Bloque II Programación",
       "Repaso Intensivo",
-      "TI: Ejercicios JS"
+      "MA: Clases ES6"
     ]
   },
   {
-    "objectID": "pages/Bloque2/ti.html#ejercicio-1",
-    "href": "pages/Bloque2/ti.html#ejercicio-1",
-    "title": "TI: Ejercicios JS",
-    "section": "Ejercicio 1",
-    "text": "Ejercicio 1\nDefina un array llamado arrOriginal con el siguiente contenido numérico. Este array será el origen de datos para los ejercicios posteriores, salvo que se indique lo contrario.\n3, 4, 2, 4, 4, 5, 12, 24, 3, 23, 232, 2, -3, -9, 2, -23, 200, -23, 12, 43, 4, -32, -32, 0, 23, 23",
+    "objectID": "pages/Bloque2/MAclases.html#propiedades-públicas",
+    "href": "pages/Bloque2/MAclases.html#propiedades-públicas",
+    "title": "MA: Clases ES6",
+    "section": "Propiedades públicas",
+    "text": "Propiedades públicas\nLas propiedades se suelen declarar en el constructor:\nclass Coche {\n  constructor(marca, km = 0) {\n    this.marca = marca;\n    this.km = km;\n  }\n}\nUso:\nconst c = new Coche(\"Toyota\");\nc.km += 100;",
     "crumbs": [
       "Bloque II Programación",
       "Repaso Intensivo",
-      "TI: Ejercicios JS"
+      "MA: Clases ES6"
     ]
   },
   {
-    "objectID": "pages/Bloque2/ti.html#ejercicio-2",
-    "href": "pages/Bloque2/ti.html#ejercicio-2",
-    "title": "TI: Ejercicios JS",
-    "section": "Ejercicio 2",
-    "text": "Ejercicio 2\nPartiendo del array arrOriginal, imprima por pantalla la siguiente frase:\n\n\"En el subsistema de software somos x miembros\"\n\ndonde x debe tomar, sucesivamente, cada uno de los valores de arrOriginal.\nImprima por pantalla el resultado.\n\nSalida esperada (ejemplo):\n\nEn el subsistema de software somos 3 miembros\nEn el subsistema de software somos 4 miembros\nEn el subsistema de software somos 2 miembros",
+    "objectID": "pages/Bloque2/MAclases.html#getters-y-setters",
+    "href": "pages/Bloque2/MAclases.html#getters-y-setters",
+    "title": "MA: Clases ES6",
+    "section": "Getters y setters",
+    "text": "Getters y setters\nPermiten acceder como propiedades a lógica encapsulada.\nclass Rectangulo {\n  constructor(ancho, alto) {\n    this.ancho = ancho;\n    this.alto = alto;\n  }\n\n  get area() {\n    return this.ancho * this.alto;\n  }\n\n  set escala(factor) {\n    this.ancho *= factor;\n    this.alto *= factor;\n  }\n}\nUso:\nconst r = new Rectangulo(2, 3);\nr.area;      // 6\nr.escala = 2;\nr.area;      // 24",
     "crumbs": [
       "Bloque II Programación",
       "Repaso Intensivo",
-      "TI: Ejercicios JS"
+      "MA: Clases ES6"
     ]
   },
   {
-    "objectID": "pages/Bloque2/ti.html#ejercicio-3",
-    "href": "pages/Bloque2/ti.html#ejercicio-3",
-    "title": "TI: Ejercicios JS",
-    "section": "Ejercicio 3",
-    "text": "Ejercicio 3\nPartiendo de arrOriginal, cree un nuevo array llamado arrPositivos que contenga únicamente números positivos.\nUtilice arrPositivos para imprimir por pantalla las frases correspondientes.",
+    "objectID": "pages/Bloque2/MAclases.html#herencia-extends",
+    "href": "pages/Bloque2/MAclases.html#herencia-extends",
+    "title": "MA: Clases ES6",
+    "section": "Herencia (extends)",
+    "text": "Herencia (extends)\nJavaScript soporta herencia simple.\nclass Empleado extends Persona {\n  constructor(nombre, edad, salario) {\n    super(nombre, edad);\n    this.salario = salario;\n  }\n\n  salarioAnual() {\n    return this.salario * 12;\n  }\n}\n\nextends: herencia\nsuper(): llama al constructor padre (obligatorio)",
     "crumbs": [
       "Bloque II Programación",
       "Repaso Intensivo",
-      "TI: Ejercicios JS"
+      "MA: Clases ES6"
     ]
   },
   {
-    "objectID": "pages/Bloque2/ti.html#ejercicio-4",
-    "href": "pages/Bloque2/ti.html#ejercicio-4",
-    "title": "TI: Ejercicios JS",
-    "section": "Ejercicio 4",
-    "text": "Ejercicio 4\nPartiendo de arrPositivos, cree un nuevo array llamado arrValidos que cumpla además el siguiente criterio:\n\nEl número máximo de personas es 10\n\nImprima por pantalla las frases correspondientes a arrValidos.",
+    "objectID": "pages/Bloque2/MAclases.html#sobrescritura-de-métodos",
+    "href": "pages/Bloque2/MAclases.html#sobrescritura-de-métodos",
+    "title": "MA: Clases ES6",
+    "section": "Sobrescritura de métodos",
+    "text": "Sobrescritura de métodos\nclass Empleado extends Persona {\n  saludar() {\n    return `Empleado: ${this.nombre}`;\n  }\n}\n\nSi el método existe en la clase hija, sobrescribe al del padre",
     "crumbs": [
       "Bloque II Programación",
       "Repaso Intensivo",
-      "TI: Ejercicios JS"
+      "MA: Clases ES6"
     ]
   },
   {
-    "objectID": "pages/Bloque2/ti.html#ejercicio-5",
-    "href": "pages/Bloque2/ti.html#ejercicio-5",
-    "title": "TI: Ejercicios JS",
-    "section": "Ejercicio 5",
-    "text": "Ejercicio 5\nPartiendo nuevamente de arrOriginal, cree un nuevo array llamado arrFiltrado que contenga únicamente aquellos elementos que cumplan todas las siguientes condiciones:\n\nSean positivos\n\nSean pares\n\nSean menores que 100",
+    "objectID": "pages/Bloque2/MAclases.html#uso-de-super-en-métodos",
+    "href": "pages/Bloque2/MAclases.html#uso-de-super-en-métodos",
+    "title": "MA: Clases ES6",
+    "section": "Uso de super en métodos",
+    "text": "Uso de super en métodos\nclass Empleado extends Persona {\n  saludar() {\n    return super.saludar() + \" (empleado)\";\n  }\n}\nPermite reutilizar lógica del padre.",
     "crumbs": [
       "Bloque II Programación",
       "Repaso Intensivo",
-      "TI: Ejercicios JS"
+      "MA: Clases ES6"
     ]
   },
   {
-    "objectID": "pages/Bloque2/ti.html#ejercicio-6",
-    "href": "pages/Bloque2/ti.html#ejercicio-6",
-    "title": "TI: Ejercicios JS",
-    "section": "Ejercicio 6",
-    "text": "Ejercicio 6\nPartiendo de arrFiltrado:\n\nCree un nuevo array llamado arrCubos elevando al cubo cada uno de sus elementos\n\nA partir de arrCubos, cree un nuevo array llamado arrCubosFiltrados que contenga únicamente aquellos valores cuyo resultado termine en 0.",
+    "objectID": "pages/Bloque2/MAclases.html#métodos-estáticos",
+    "href": "pages/Bloque2/MAclases.html#métodos-estáticos",
+    "title": "MA: Clases ES6",
+    "section": "Métodos estáticos",
+    "text": "Métodos estáticos\nPertenecen a la clase, no a las instancias.\nclass Utilidades {\n  static suma(a, b) {\n    return a + b;\n  }\n}\nUso:\nUtilidades.suma(2, 3);\nNo accesible desde instancias:\nnew Utilidades().suma; // undefined",
     "crumbs": [
       "Bloque II Programación",
       "Repaso Intensivo",
-      "TI: Ejercicios JS"
+      "MA: Clases ES6"
     ]
   },
   {
-    "objectID": "pages/Bloque2/ti.html#ejercicio-7",
-    "href": "pages/Bloque2/ti.html#ejercicio-7",
-    "title": "TI: Ejercicios JS",
-    "section": "Ejercicio 7",
-    "text": "Ejercicio 7\nPartiendo de arrCubosFiltrados, cree un nuevo array llamado arrFinal añadiendo el valor 21.",
+    "objectID": "pages/Bloque2/MAclases.html#campos-privados",
+    "href": "pages/Bloque2/MAclases.html#campos-privados",
+    "title": "MA: Clases ES6",
+    "section": "Campos privados (#)",
+    "text": "Campos privados (#)\nIntroducidos en ES2022.\nclass Cuenta {\n  #saldo = 0;\n\n  ingresar(cantidad) {\n    this.#saldo += cantidad;\n  }\n\n  getSaldo() {\n    return this.#saldo;\n  }\n}\n\n#saldo es realmente privado\nNo accesible fuera de la clase",
     "crumbs": [
       "Bloque II Programación",
       "Repaso Intensivo",
-      "TI: Ejercicios JS"
+      "MA: Clases ES6"
     ]
   },
   {
-    "objectID": "pages/Bloque2/ti.html#ejercicio-8",
-    "href": "pages/Bloque2/ti.html#ejercicio-8",
-    "title": "TI: Ejercicios JS",
-    "section": "Ejercicio 8",
-    "text": "Ejercicio 8\nPartiendo de arrFinal, cree un nuevo array independiente llamado arrCopia, de forma que cualquier modificación posterior no afecte a arrFinal.",
+    "objectID": "pages/Bloque2/MAclases.html#clases-y-objetos-literales",
+    "href": "pages/Bloque2/MAclases.html#clases-y-objetos-literales",
+    "title": "MA: Clases ES6",
+    "section": "Clases y objetos literales",
+    "text": "Clases y objetos literales\nEsto:\nconst a = {\n  x: 1,\n  inc() { this.x++; }\n};\nEs equivalente conceptualmente a una instancia única.\nUsar class cuando:\n\nHay múltiples instancias\nExiste estado y comportamiento común\nSe necesita herencia o abstracción",
     "crumbs": [
       "Bloque II Programación",
       "Repaso Intensivo",
-      "TI: Ejercicios JS"
+      "MA: Clases ES6"
     ]
   },
   {
-    "objectID": "pages/rubric.html",
-    "href": "pages/rubric.html",
-    "title": "Rúbrica de evaluación",
-    "section": "",
-    "text": "Durante el curso seguiremos la siguiente rúbrica para la calificación de las tareas. A pesar de que las calificaciones no son importantes, la rúbrica es un buen recordatorio de que aspectos hay que tener en cuenta en la programación web.\n\n\n\nPuntuación\n\n\nNo aplica\n\n\nDeficiente(0–4)\n\n\nInsuficiente(4–5)\n\n\nAceptable(5–7)\n\n\nBueno(7–9)\n\n\nExcelente(9–10)\n\n\n\n\nDiseño\n\n\nNo aplica.\n\n\nDiseño desordenado y/o con problemas de visualización funcional.\n\n\nDiseño básico pero con problemas de visualización o estructura.\n\n\nDiseño claro y ordenado, cumple los requisitos básicos.\n\n\nDiseño cuidado, buena estética y estructura clara.\n\n\nDiseño profesional, limpio, pulido y sobresaliente.\n\n\n\n\nProgramación\n\n\nNo aplica.\n\n\nCódigo incompleto o con errores graves.\n\n\nCódigo funcional parcialmente y/o con errores importantes.\n\n\nCódigo funcional y adecuado a la tarea.\n\n\nCódigo bien estructurado con mejoras respecto a lo exigido.\n\n\nCódigo impecable, eficiente y muy bien organizado.\n\n\n\n\nEsfuerzo e implicación\n\n\nNo aplica.\n\n\nBajo esfuerzo o dedicación mínima.\n\n\nEsfuerzo adecuado pero limitado.\n\n\nEsfuerzo notable, cumple con lo requerido.\n\n\nEsfuerzo claro, trabajo más allá de lo solicitado.\n\n\nDedicación sobresaliente y trabajo excepcional.\n\n\n\n\nDocumentación / Claridad\n\n\nNo aplica.\n\n\nDocumentación mínima o inexistente.\n\n\nDocumentación incompleta o confusa.\n\n\nDocumentación clara y suficiente.\n\n\nDocumentación bien presentada y detallada.\n\n\nDocumentación excelente y altamente profesional.\n\n\n\n\nFuncionalidad\n\n\nNo aplica.\n\n\nNo funciona o no cumple objetivos.\n\n\nFunciona de forma parcial.\n\n\nFunciona correctamente.\n\n\nFunciona con mejoras o funcionalidades extra.\n\n\nFunciona perfectamente y supera expectativas.\n\n\n\n\nInnovación\n\n\n(Nota extra)\n\n\n\n\nTOTAL:\n\n\n\n\n/60\n\n\n\n\nObservaciones:\n\n\n\n\n\nLa nota total será sobre 60 si hay algun criterio que no se aplique, se modificará la nota para que esté sobre base 60.",
+    "objectID": "pages/Bloque2/MAclases.html#clases-prototípicas-pre-es6",
+    "href": "pages/Bloque2/MAclases.html#clases-prototípicas-pre-es6",
+    "title": "MA: Clases ES6",
+    "section": "Clases prototípicas (pre-ES6)",
+    "text": "Clases prototípicas (pre-ES6)\nJavaScript siempre ha sido un lenguaje basado en prototipos. Antes de ES6, la creación de objetos y herencia se realizaba mediante funciones constructoras y el prototipo.\nEn este repaso no entraremos en detalle en este modelo.\nBasta con saber que:\n\nLas clases ES6 no sustituyen al modelo prototípico\nSon una capa de abstracción sobre él\nTodo el comportamiento sigue resolviéndose vía prototipos\n\nPara profundizar:\n\nhttps://developer.mozilla.org/es/docs/Web/JavaScript/Inheritance_and_the_prototype_chain\n\nfunction Persona(nombre) {\nthis.nombre = nombre;\n}\n\nPersona.prototype.saludar = function () {\nreturn this.nombre;\n};\nvs\nclass Persona {\n  constructor(nombre) {\n    this.nombre = nombre;\n  }\n\n  saludar() {\n    return this.nombre;\n  }\n}",
     "crumbs": [
-      "Rúbrica de evaluación"
+      "Bloque II Programación",
+      "Repaso Intensivo",
+      "MA: Clases ES6"
     ]
   },
   {
-    "objectID": "pages/Bloque1/entorno.html",
-    "href": "pages/Bloque1/entorno.html",
-    "title": "Preparación del entorno de trabajo",
+    "objectID": "pages/Bloque2/tia.html",
+    "href": "pages/Bloque2/tia.html",
+    "title": "TAI: La objetización de las personas",
     "section": "",
-    "text": "Contenido",
+    "text": "El objetivo de esta tarea es aplicar los conocimientos básicos de programación orientada a objetos en JavaScript, haciendo uso de las clases definidas en ES6. En particular, se evaluará el uso de:\n\nherencia entre clases\nencapsulación mediante propiedades privadas\ngetters y setters usando las palabras clave get y set\nmétodos estáticos\nvalidación de datos\n\nPara ello se definirá una jerarquía de clases que represente un equipo de Hyperloop.",
     "crumbs": [
-      "Bloque I Introducción",
-      "Semana 0",
-      "Preparación del entorno de trabajo"
+      "Bloque II Programación",
+      "Repaso Intensivo",
+      "TAI: La objetización de las personas"
     ]
   },
   {
-    "objectID": "pages/Bloque1/entorno.html#ide",
-    "href": "pages/Bloque1/entorno.html#ide",
-    "title": "Preparación del entorno de trabajo",
-    "section": "IDE",
-    "text": "IDE\n\n¿Qué es una IDE?\nLas Integrated development environment (IDE) son aplicaciones diseñadas para facilitar la programación a los programadores.\nAunque no hay una lista de características propias de las IDE, suelen tener características comunes, por ejemplo:\n\nDebugger integrado en la interfaz\nGestor de archivos\nEditor de código inteligente: autocompletados\n\n\n\n¿Cuántas IDE existen?\n\nAndroid Studio\nRStudio\nEclipse\n\n\n\n¿Qué IDE utilizaremos nosotros?\nPrincipalmente trabajaremos con VSCode una IDE de proposito general que configuraremos para el desarrollo frontend\n\nInstalación de VScode\n\nEnlace\n\n\nFamiliarizarse con VSCode\n\nBarra lateral:\n\nExplorador de archivos\nMenú de Git\nMenú de extensiones\nBuscar\nDebugger\n\nEditor o área de edición: componente más importante de la IDE, lugar donde se escribe el código.\n\n\n\nExtensiones\nLas extensiones son aplicaciones software desarolladas por empresas o por particulares para modificar o agregar una nueva funcionalidad a las IDE. Pueden ir desde pequeñas modificaciones del tema o de la UI, o incorporar nuevas funcionalidades como la interacción con bases de datos.\n\nLiveServer\nNosotros para el transcurso del curso utilizaremos la extensión Liveserver que nos permitirá desplegar comodamente un pequeño servidor para la programación con HTML (Ahondaremos más la próxima semana)\n\nInstalación de LiveServer\n\n\nEntrar en el menú de extensiones\nBuscar por liveserver\nSeleccionar extensión\nInstalar\n\n\nAl concluir la instalación debería de aparecer en la parte derecha de la barra de estado (barra interior)",
+    "objectID": "pages/Bloque2/tia.html#objetivo-de-la-tarea",
+    "href": "pages/Bloque2/tia.html#objetivo-de-la-tarea",
+    "title": "TAI: La objetización de las personas",
+    "section": "",
+    "text": "El objetivo de esta tarea es aplicar los conocimientos básicos de programación orientada a objetos en JavaScript, haciendo uso de las clases definidas en ES6. En particular, se evaluará el uso de:\n\nherencia entre clases\nencapsulación mediante propiedades privadas\ngetters y setters usando las palabras clave get y set\nmétodos estáticos\nvalidación de datos\n\nPara ello se definirá una jerarquía de clases que represente un equipo de Hyperloop.",
     "crumbs": [
-      "Bloque I Introducción",
-      "Semana 0",
-      "Preparación del entorno de trabajo"
+      "Bloque II Programación",
+      "Repaso Intensivo",
+      "TAI: La objetización de las personas"
     ]
   },
   {
-    "objectID": "pages/Bloque1/entorno.html#node.js-y-npm",
-    "href": "pages/Bloque1/entorno.html#node.js-y-npm",
-    "title": "Preparación del entorno de trabajo",
-    "section": "Node.JS y NPM",
-    "text": "Node.JS y NPM\n\n¿Qué es node JS?\nNode.js es un entorno de ejecución de JavaScript basado en el motor V8 de Google Chrome.\nPermite ejecutar código JavaScript directamente en el sistema operativo, sin depender de un navegador.\nDe este modo, el mismo lenguaje puede usarse tanto en el frontend como en el backend.\n\n\n¿Qué es NPM?\nNPM (Node Package Manager) es el gestor de paquetes de Node.js.\nFacilita la instalación, actualización y gestión de librerías que amplían las funcionalidades de los proyectos.\nDescarga node y npm nodejs.org",
+    "objectID": "pages/Bloque2/tia.html#entregar",
+    "href": "pages/Bloque2/tia.html#entregar",
+    "title": "TAI: La objetización de las personas",
+    "section": "Entregar",
+    "text": "Entregar\nSe debe entregar un único archivo de JavaScript (.js) que contenga la solución completa a la tarea.",
     "crumbs": [
-      "Bloque I Introducción",
-      "Semana 0",
-      "Preparación del entorno de trabajo"
+      "Bloque II Programación",
+      "Repaso Intensivo",
+      "TAI: La objetización de las personas"
     ]
   },
   {
-    "objectID": "pages/Bloque1/entorno.html#git-y-github",
-    "href": "pages/Bloque1/entorno.html#git-y-github",
-    "title": "Preparación del entorno de trabajo",
-    "section": "Git y GitHub",
-    "text": "Git y GitHub\n\n¿Qué es Git?\nGit es un sistema de control de versiones distribuido. Permite registrar los cambios de un proyecto, volver a versiones anteriores y trabajar de forma colaborativa sin sobrescribir el trabajo de otros. Cada usuario dispone de una copia completa del repositorio, lo que facilita el trabajo sin conexión.\n\n\n¿Qué es GitHub?\nGitHub es una plataforma en la nube que utiliza Git para almacenar y gestionar proyectos. Permite compartir código, colaborar con otros desarrolladores y mantener un control de versiones centralizado.\n\n\nGit frente GitHub\n\nGit es la herramienta de control de versiones.(Software Libre, Linux Fundation)\nGitHub es la plataforma online donde se alojan los repositorios y se facilita el trabajo en equipo. (Coporativa Microsoft)\n\n\n\nUso de Git y GitHub\nEn Hyperloop UPV, tanto en los subsistemas de Software y Firmware utilizamos GitHub como herramienta de gestión de código.\nNosotros en el TC, también trataremos de facilitarnos con esta herramienta\n\n\nInstalación de Git y Cuenta de GitHub\n\nInstalación de Git\nCuenta de GitHub\n\n\n\nDiagrama de trabajo de Git\n\n\nGit en VScode",
+    "objectID": "pages/Bloque2/tia.html#realización-de-la-tarea",
+    "href": "pages/Bloque2/tia.html#realización-de-la-tarea",
+    "title": "TAI: La objetización de las personas",
+    "section": "Realización de la tarea",
+    "text": "Realización de la tarea\nEl archivo JavaScript debe estar claramente dividido en dos partes:\n\nla implementación de clases, donde se definirán todas las clases necesarias\n\nla zona de uso, donde se utilizarán las clases previamente definidas\n\n\nImplementación de clases\nTodas las clases deberán definirse utilizando la sintaxis de clases ES6, haciendo uso correcto de:\n\nclass\nextends\nsuper\npropiedades privadas (usando #)\ngetters y setters (get y set)\nmétodos estáticos\n\n\nClase Person\nDebe contener:\n\npropiedad privada name\npropiedad privada dni\nSe puede obtener tanto el nombre como el DNI, pero solo se puede modificar el nombre\nEl constructor recibirá:\n\nun nombre\nun NÚMERO de DNI\n\nEl constructor deberá calcular automáticamente la letra del DNI siguiendo el algoritmo oficial:\nhttps://www.interior.gob.es/opencms/es/servicios-al-ciudadano/tramites-y-gestiones/dni/calculo-del-digito-de-control-del-nif-nie/\nMétodos y accesos:\n\ngetter name\nsetter name\ngetter dni\nmétodo getInfo() que devuelva un string con el nombre y el DNI completo\n\nSi los datos introducidos no son válidos, se lanzará un Error\n\n\n\nClase Member (clase hija de Person)\nRepresenta a un miembro del equipo de Hyperloop.\nDebe contener:\n\npropiedad privada department\npropiedad privada yearsExperience\n\n\nDepartamentos válidos\nLos únicos departamentos permitidos son:\n\n\"Managment\"\n\"Operaciones\"\n\"Avionics\"\n\"Electromagnetics\"\n\"Mechanics\"\n\nNo se permitirá ningún otro valor.\n\n\nRequisitos adicionales\n\nLa propiedad department:\n\nse accederá mediante:\n\ngetter department\nsetter department\n\n\nEl setter validará que el departamento sea válido\nyearsExperience debe ser un número mayor o igual que 0\n\n\n\nMétodo estático obligatorio\nLa clase Member debe incluir el siguiente método estático:\n\nisValidDepartment(department)\n\ndevuelve true si el departamento es válido\ndevuelve false en caso contrario\ndeberá utilizarse tanto en el constructor como en el setter de department\n\n\n\n\nMétodos públicos\n\ngetter yearsExperience\nmétodo getInfo():\n\nsobrescribe el método de Person\nincluye el departamento y los años de experiencia\n\n\n\n\n\nClase Engineer (clase hija de Member)\nRepresenta a un ingeniero del equipo.\nDebe contener:\n\npropiedad privada specialty\nLa especialidad será un string no vacío\n\n\nAccesos y métodos\n\ngetter specialty\nmétodo getInfo():\n\nsobrescribe el método anterior\nincluye la especialidad del ingeniero\n\n\n\n\n\nClase Team\nRepresenta el equipo completo de Hyperloop.\nDebe contener:\n\npropiedad privada members, que será un array de objetos Member\n\n\nMétodos públicos\n\naddMember(member)\n\nsolo permite añadir objetos que sean instancia de Member\n\nremoveMemberByDni(dni)\nlistMembers()\n\nmuestra por consola la información de todos los miembros del equipo\n\ncountMembersByDepartment(department)\n\ndevuelve cuántos miembros pertenecen a un determinado departamento\n\n\n\n\n\n\nZona de uso\nEn la zona de uso del archivo JavaScript se debe:\n\nCrear al menos:\n\n2 objetos Engineer de departamentos distintos\n1 objeto Member que no sea ingeniero\n\nCrear un objeto Team\nAñadir los miembros al equipo\nUtilizar explícitamente:\n\ngetters\nsetters\nel método estático de validación\n\nMostrar por consola:\n\nel listado completo del equipo\nel número de miembros por departamento\n\nProbar al menos un caso incorrecto:\n\npor ejemplo, asignar un departamento no válido\no intentar añadir un objeto que no sea Member\n\nDemostrar que el error se gestiona correctamente",
     "crumbs": [
-      "Bloque I Introducción",
-      "Semana 0",
-      "Preparación del entorno de trabajo"
+      "Bloque II Programación",
+      "Repaso Intensivo",
+      "TAI: La objetización de las personas"
     ]
   },
   {
-    "objectID": "pages/Bloque1/entorno-reveal.html#ide",
-    "href": "pages/Bloque1/entorno-reveal.html#ide",
-    "title": "Preparación del entorno de trabajo",
-    "section": "IDE",
-    "text": "IDE\n¿Qué es una IDE?\nLas Integrated development environment (IDE) son aplicaciones diseñadas para facilitar la programación a los programadores.\nAunque no hay una lista de características propias de las IDE, suelen tener características comunes, por ejemplo:\n\nDebugger integrado en la interfaz\nGestor de archivos\nEditor de código inteligente: autocompletados"
+    "objectID": "pages/Bloque2/tia.html#apéndice-comprobaciones-y-errores-en-javascript-necesario-para-la-tarea",
+    "href": "pages/Bloque2/tia.html#apéndice-comprobaciones-y-errores-en-javascript-necesario-para-la-tarea",
+    "title": "TAI: La objetización de las personas",
+    "section": "Apéndice: comprobaciones y errores en JavaScript (NECESARIO PARA LA TAREA)",
+    "text": "Apéndice: comprobaciones y errores en JavaScript (NECESARIO PARA LA TAREA)\nEn el desarrollo de la tarea pueden aparecer algunas comprobaciones y mecanismos de control de errores que es necesario saber implementar por cuenta propia. Su inclusión tiene como objetivo facilitar la robustez del código, y forman parte de los contenidos evaluables de la tarea.\n\nUso de Error\nCuando se detecta una situación incorrecta (por ejemplo, un valor no válido o un uso indebido de una clase), se puede lanzar un error utilizando:\nthrow new Error(\"Mensaje de error\");\nEsto indica claramente que algo no es correcto y detiene la ejecución normal del programa.\n\n\nUso de instanceof\nEl operador instanceof se utiliza para comprobar si un objeto ha sido creado a partir de una clase concreta.\nobjeto instanceof Clase\nDevuelve true si el objeto pertenece a esa clase y false en caso contrario.\n\n\nUso de typeof\nEl operador typeof permite comprobar el tipo de datos simples como strings o números.\ntypeof variable\nEjemplos:\ntypeof \"texto\"   // \"string\"\ntypeof 10        // \"number\"\nSe utiliza para validar los datos recibidos por constructores o setters. Para comprobar clases u objetos personalizados debe usarse instanceof, no typeof.",
+    "crumbs": [
+      "Bloque II Programación",
+      "Repaso Intensivo",
+      "TAI: La objetización de las personas"
+    ]
   },
   {
-    "objectID": "pages/Bloque1/entorno-reveal.html#node.js-y-npm",
-    "href": "pages/Bloque1/entorno-reveal.html#node.js-y-npm",
-    "title": "Preparación del entorno de trabajo",
-    "section": "Node.JS y NPM",
-    "text": "Node.JS y NPM\n¿Qué es node JS?\nNode.js es un entorno de ejecución de JavaScript basado en el motor V8 de Google Chrome.\nPermite ejecutar código JavaScript directamente en el sistema operativo, sin depender de un navegador.\nDe este modo, el mismo lenguaje puede usarse tanto en el frontend como en el backend."
+    "objectID": "pages/Bloque2/jsI.html",
+    "href": "pages/Bloque2/jsI.html",
+    "title": "Introducción a JS",
+    "section": "",
+    "text": "Contenido"
   },
   {
-    "objectID": "pages/Bloque1/entorno-reveal.html#git-y-github",
-    "href": "pages/Bloque1/entorno-reveal.html#git-y-github",
-    "title": "Preparación del entorno de trabajo",
-    "section": "Git y GitHub",
-    "text": "Git y GitHub\n¿Qué es Git?\nGit es un sistema de control de versiones distribuido. Permite registrar los cambios de un proyecto, volver a versiones anteriores y trabajar de forma colaborativa sin sobrescribir el trabajo de otros. Cada usuario dispone de una copia completa del repositorio, lo que facilita el trabajo sin conexión."
+    "objectID": "pages/Bloque2/jsI.html#introducción-a-js",
+    "href": "pages/Bloque2/jsI.html#introducción-a-js",
+    "title": "Introducción a JS",
+    "section": "Introducción a JS",
+    "text": "Introducción a JS\n\n¿Qué es JavaScript?\n\nEs el lenguaje de programación del navegador.\nCreado en 1995 por Brendan Eich\nPermite crear comportamientos dinámicos: responder a clics, validar formularios, mostrar u ocultar elementos, generar contenido nuevo, etc.\nSe ejecuta directamente en el navegador, sin necesidad de instalación.\nJunto con HTML y CSS forma el trinomio esencial del desarrollo web\n\nLa siguiente tabla recuerda las difrencias entre HTML, CSS y JS:\n\n\n\nCapa\nLenguaje\nFunción principal\n\n\n\n\nContenido\nHTML\nEstructura del documento\n\n\nPresentación\nCSS\nApariencia y diseño\n\n\nComportamiento\nJavaScript\nInteractividad y lógica"
   },
   {
-    "objectID": "pages/Bloque1/MAhtml2.html",
-    "href": "pages/Bloque1/MAhtml2.html",
-    "title": "MA: Mas HTML",
+    "objectID": "pages/Bloque2/jsI.html#programación-en-js",
+    "href": "pages/Bloque2/jsI.html#programación-en-js",
+    "title": "Introducción a JS",
+    "section": "Programación en JS",
+    "text": "Programación en JS\n\nCaracterísticas generales de JS\n\nTipado dinámico\n\nTipado débil Coerción Implicita\n\nMultiparadigma\n\nÁmbito léxico (estático)\n\nModelo basado en prototipos (polimorfismo de inclusión por composición)\n\nFunciones de primera clase\n\nFunciones de orden superior\n\n\nClosures / Copia viva\nReflexión (Reflect, Proxy, descriptores)\n\nMetaprogramación\nSin Polimorfismo Ad-hoc de sobrecarga, ni Polimorfismo universal genérico\n\n\nEjecución single-threaded\n\nAsincronía no bloqueante\n\nPromises / async–await\n\nGarbage collection\nInteroperabilidad con JSON\n\n\n\nTipos\n\nPrimitivos\n\nstring — cadenas de texto\n\nnumber — números (enteros y decimales)\nboolean — verdadero o falso\n\nnull — ausencia intencional de valor\n\nundefined — valor no inicializado\n\nsymbol\nbigint\n\n\n\nTipos de referencia\n\nObject\n\nArray\n\nFunc tion\n\nMap / Set\n\nDate\n\n\n\n\nCaracterísticas del sistema de tipos\n\nTipado dinámico\n\nTipado débil\n\nLos primitivos se copian por valor\n\nLos objetos se copian por referencia\n\n\n\nVariables\n\nlet\n\nTipado: dinámico\nAlcance: estático\nMutables\nHoisting\nNo globales\nShadowing permitido\n\n\n\nconst\nNo son verdaderamente constantes\n\nTipado: dinámico\nAlcance: estático\nInmutables en la referencia (no permiten reasignación)\nHoisting\nNo globales\nShadowing permitido\n\n\n\nvar\nNo se usa\n\nTipado: dinámico\nAlcance: de función (no de bloque)\nMutables\nHoisting (inicializadas como undefined)\nGlobales si se declaran en el ámbito global (propiedad de window/globalThis)\nShadowing permitido, pero con reglas inconsistentes (puede causar illegal shadowing en combinación con let/const)"
+  },
+  {
+    "objectID": "pages/Bloque2/jsI-reveal.html#introducción-a-js",
+    "href": "pages/Bloque2/jsI-reveal.html#introducción-a-js",
+    "title": "Introducción a JS",
+    "section": "Introducción a JS",
+    "text": "Introducción a JS\n¿Qué es JavaScript?\n\nEs el lenguaje de programación del navegador.\nCreado en 1995 por Brendan Eich\nPermite crear comportamientos dinámicos: responder a clics, validar formularios, mostrar u ocultar elementos, generar contenido nuevo, etc.\nSe ejecuta directamente en el navegador, sin necesidad de instalación.\nJunto con HTML y CSS forma el trinomio esencial del desarrollo web\n\nLa siguiente tabla recuerda las difrencias entre HTML, CSS y JS:"
+  },
+  {
+    "objectID": "pages/Bloque2/jsI-reveal.html#programación-en-js",
+    "href": "pages/Bloque2/jsI-reveal.html#programación-en-js",
+    "title": "Introducción a JS",
+    "section": "Programación en JS",
+    "text": "Programación en JS\nCaracterísticas generales de JS\n\nTipado dinámico\n\nTipado débil Coerción Implicita\n\nMultiparadigma\n\nÁmbito léxico (estático)\n\nModelo basado en prototipos (polimorfismo de inclusión por composición)\n\nFunciones de primera clase\n\nFunciones de orden superior"
+  },
+  {
+    "objectID": "pages/Bloque1/t2.html",
+    "href": "pages/Bloque1/t2.html",
+    "title": "T2: Web de HL II",
     "section": "",
-    "text": "Durante la explicación de teoría vista esta semana en clase nos hemos introducido en las etiquetas básicas de HTML.\nA continuación una selección de etiquetas que no hemos visto en clase, pero resulta interesante conocer, puesto que en determinadas ocasiones son útiles. Cada ítem de la lista es un enlace a la documentación de Mozilla donde está explicado el funcionamiento de la etiqueta de forma exhaustiva. No hay que conocer todos los aspectos de cada etiqueta, basta con tener una idea general de como funcionan.\n\ninput types. Muy importante conocer todos los tipos de inputs\ncode\niframe. Útil y ampliamente extendida\nhr. Línea horizontal\nfigure y figcaption. Permite insertar figura y pie de figura.\naudio. Insertar un audio en la página web.\nvideo. Insertar un audio en la página web.\nheader, main, footer. Son como &lt;div&gt; pero ya con usos por defecto preasignados.",
+    "text": "El objetivo de esta tarea, es poner en práctica lo aprendido en clase para ello vamos a formatear la web de nuestro equipo de Hyperloop, (tarea de la semana pasada).\nSe debe formatear para que quede como está Web, cuanto más se parezca mejor.\nNotas:\nLa hoja de estilos debe de estar incluida en el la etiqueta &lt;style&gt; del &lt;head&gt;.\nPara conseguir que los bordes de la table, td, tr… colapsen (que solo haya un borde y no dos) se debe utilizar la propiedad border-collapse.\nSi no se realizó la T1, puede utilizar este archivo html como base (click derechao guardar enlace como).",
     "crumbs": [
       "Bloque I Introducción",
-      "Semana 1",
-      "MA: Mas HTML"
+      "Semana 2",
+      "T2: Web de HL II"
     ]
   },
   {
-    "objectID": "pages/Bloque1/t1.html",
-    "href": "pages/Bloque1/t1.html",
-    "title": "T1: Web de HL I",
+    "objectID": "pages/Bloque1/css.html",
+    "href": "pages/Bloque1/css.html",
+    "title": "CSS",
     "section": "",
-    "text": "La primera tarea de esta semana consiste en diseñar una página web para el equipo de generación espontánea llamado Hyperloop UPV, la web debe de ser realizada en un archivo HTML y debe de constar por lo menos de los siguientes apartados y estructura\n\nTítulo principal de la página &lt;h1&gt;\nVarios secciones cada una introducida por un título &lt;h2&gt; (si es necesario hacer &lt;h3&gt;)\n\nDescripción del equipo\nLista desordenada de los subsistemas\nLista de Partners por orden de importancia (UPV, )\nUn día en Hyperloop (nótese el título del apartado en cursiva)\n\nBreve descripción de lo que hacemos en el equipo, alguna foto\n\nMiembros\n\nUna tabla de miembros por subsistema (inventarse los datos)\n\nFormulario para solicitar unirse al equipo que solicite\n\nNombre\nApellido\nCurso (radius button)\nBotón de enviar\n\nLink a la web del TC de SW y a la oficial del equipo\n\nCada sección debe de estar contenido en un div de la siguiente forma\n\n&lt;div&gt;\n\n  &lt;h2&gt;Títlo de sección&lt;/h2&gt;\n\n  &lt;Contenido de la sección /&gt;\n\n&lt;/div&gt;\nBase: Web",
+<<<<<<< HEAD
+    "text": "Por el momento hemos visto dos hooks useState y useEffect, pero recordemos que en React existen más tipos de hooks que por ser menos útiles y debido a la falta de tiempo no son explicados, no obstante si hay alguno digno de mención es useRef o las referencias.\nUna ref es una referencia mutable que permite acceder directamente a un elemento del DOM o almacenar un valor persistente sin provocar un re-render del componente. El siguiente video ilustra su uso. Es un poco largo pero sirve para repasar los otros hooks.\n\n\nCon las ref podemos introducir los uncontrolled fields que nos permiten trabajar de otra forma con los formularios.\n\nSe prefiere la segunda implementación (la que no utiliza referencias) sobre la primera.",
+<<<<<<< HEAD
+=======
+    "text": "Contenido",
+>>>>>>> e3c3469 (feat:  varios)
     "crumbs": [
       "Bloque I Introducción",
-      "Semana 1",
-      "T1: Web de HL I"
+      "Semana 2",
+      "CSS"
     ]
   },
   {
-    "objectID": "pages/Bloque1/html.html",
-    "href": "pages/Bloque1/html.html",
-    "title": "HTML",
-    "section": "",
-    "text": "Contenido",
+    "objectID": "pages/Bloque1/css.html#problemas-de-html",
+    "href": "pages/Bloque1/css.html#problemas-de-html",
+    "title": "CSS",
+    "section": "Problemas de HTML",
+    "text": "Problemas de HTML\nHasta el momento hemos trabajado con HTML, que a pesar de ser muy práctico para la creación de la estructura interna de la web, presenta ciertas limitaciones a la hora de modificar el formato de la web, para ello se introduce CSS, una herramienta que nos va a permitir modificar el formato cómodamente.",
     "crumbs": [
       "Bloque I Introducción",
-      "Semana 1",
-      "HTML"
+      "Semana 2",
+      "CSS"
     ]
   },
   {
-    "objectID": "pages/Bloque1/html.html#estructura-básica-de-las-páginas-web",
-    "href": "pages/Bloque1/html.html#estructura-básica-de-las-páginas-web",
-    "title": "HTML",
-    "section": "Estructura básica de las páginas web",
-    "text": "Estructura básica de las páginas web\n\n¿Qué es una página web?\nUna página web es un documento digital accesible desde un navegador, compuesto por HTML, CSS y, cuando es necesario, JavaScript. Representa la unidad básica de contenido o interacción dentro de un sitio web y puede integrar tanto información estática como elementos dinámicos.\n\n\n¿Qué partes tiene una página web? (externas)",
+    "objectID": "pages/Bloque1/css.html#formato-con-css",
+    "href": "pages/Bloque1/css.html#formato-con-css",
+    "title": "CSS",
+    "section": "Formato con CSS",
+    "text": "Formato con CSS\n\nAtributo style\nSupongamos que tenemos el siguiente elemento\n&lt;p&gt; Hola Mundo&lt;p&gt;. Por ahora el texto se mostrará en color negro, el color predeterminado de HTML para las etiquetas &lt;p&gt;\n\n\nHola mundo\n\n\nSi se desea modificar el formato intrínseco de esta etiqueta &lt;p&gt; debemos incluir la propiedad style que, como su nombre indica nos permitirá modificar su estilo. Dentro de este atributo se ha de insertar propiedad CSS (no confundir con los atributos html). La propiedad CSS especifica que aspecto visual del contenido de la etiqueta. Por ejemplo, si se desea modificar el color de la letra se debe de utilizar la propiedad color (nótese que no lleva u).\n&lt;p style=\"color:red\"&gt;Hola Mundo&lt;/p&gt;\n\n&lt;!-- Equivalente en Hexadecimal --&gt;\n\n&lt;p style=\"color:#ff0000\"&gt;Hola Mundo&lt;/p&gt;\n\n\nHola Mundo\n\n\nSí deseamos modificar más de una propiedad CSS deberemos de serparalas dentro de la etiqueta con un punto y coma\n&lt;p style=\"color:#ff0000; font-size: 44px\"&gt;Hola Mundo&lt;/p&gt;\n\n\nHola Mundo\n\n\n\nProblemas del atributo style\nEl atributo style resulta útil para formatear una etiqueta individualmente, pero resulta tedioso y repetitivo para más de una etiqueta. Observe el siguiente ejemplo\n&lt;p&gt;Autores del culteranismo marcados en rojo&lt;p&gt;\n\n&lt;ul&gt;\n    &lt;li&gt;Francisco de Quevedo&lt;/li&gt;\n    &lt;li style=\"color:red; text-decoration: underline; font-size:30px;\"&gt;Luis de Góngora&lt;/li&gt;\n    &lt;li&gt;Baltasar Gracián&lt;/li&gt;\n    &lt;li style=\"color:red; text-decoration: underline; font-size:30px;\"&gt;Pedro Soto de Rojas&lt;/li&gt;\n    &lt;li&gt;Tirso de Molina&lt;/li&gt;\n    &lt;li&gt;Calderón de la Barca&lt;/li&gt;\n&lt;/ul&gt;\n\n\nAutores del culteranismo marcados en rojo\n\n\n\nFrancisco de Quevedo\n\n\nLuis de Góngora\n\n\nBaltasar Gracián\n\n\nPedro Soto de Rojas\n\n\nTirso de Molina\n\n\nCalderón de la Barca\n\n\n\nProblemas:\n\nRepetición de mucho código\nAlta posibilidad error\nPoca escalabilidad\n\nSi añadimos por ejempo a Luis Carrillo y Sotomayor (autor culteranista) hay que volver a repetir todo el atributo\nSi deseasemos cambiar el color de rojo a verde deberemos modificar cada uno de los atributos\n\n\n\n\n\nClases e ID\n\nClases\nLa solución a este problema son las clases que nos permiten identificar aquellos componentes con características de formato similares. Se agregan como atributos a cada etiqueta\n&lt;p&gt;Autores del culteranismo marcados en rojo&lt;p&gt; &lt;!--En este caso no se marcan en rojo--&gt;\n\n&lt;ul&gt;\n    &lt;li&gt;Francisco de Quevedo&lt;/li&gt;\n    &lt;li class=\"culteranista\"&gt;Luis de Góngora&lt;/li&gt;\n    &lt;li&gt;Baltasar Gracián&lt;/li&gt;\n    &lt;li class=\"culteranista\"&gt;Pedro Soto de Rojas&lt;/li&gt;\n    &lt;li&gt;Tirso de Molina&lt;/li&gt;\n    &lt;li&gt;Calderón de la Barca&lt;/li&gt;\n&lt;/ul&gt;\n\nEtiqueta &lt;style&gt;\nAhora para marcar en rojo los culterantistas se ha de indicar el formato de todos en la class culteranista, para ello nos definiremos una hoja de estilo que será común para todo el documento. La hoja de estilos se define en el &lt;head&gt; de la siguiente forma:\n&lt;head&gt;\n&lt;!-- Fragemento HTML --&gt;\n&lt;style&gt;\n  /*Fragmento CSS*/\n  .culteranistas{  /*Nótese el punto*/\n    color: red;\n    text-size: 40px;\n    background-color: blue;\n    text-decoration: underline;  /*Este último ';' no es obligatorio como tal, pero es recomendable, en HTML3 y CSS2 daba error si se incluía*/\n  }\n&lt;/style&gt; \n&lt;!--Fin de la etiqueta Style, seguimos con html--&gt;\n&lt;/head&gt;\nAhora se visualizará correctamente, además se añadirá el fondo azul\n\n\nComposición de clases\nSuponga que tenemos dos clases, una primera clase que modifica el tipo de letra a monospace que aplicaremos a los autores culteranistas y una segunda que modifica el grosor de la letra que se aplicará sobre los autores de lírica.\n&lt;head&gt;&lt;style&gt;\n  .culteranista {\n    font-family: monospace;\n  }\n  .lirica {\n    font-weight: bold;\n  }\n  .autores {\n    list-style: square;\n  }\n&lt;/style&gt;&lt;/head&gt;\n\n&lt;body&gt;\n  &lt;ul class=\"autores\"&gt;\n    &lt;li class=\"lirica\"&gt;Fray Luis de León&lt;/li&gt;\n    &lt;li class=\"culteranista\"&gt;Hortensio Félix de Paravicino&lt;/li&gt;\n    &lt;li class=\"culteranista lirica\"&gt;Lope de Vega&lt;/li&gt;\n    &lt;li class=\"lirica\"&gt;San Juan de la Cruz&lt;/li&gt;\n  &lt;/ul&gt;\n&lt;/body&gt;\n\n\n\nFray Luis de León\n\n\nHortensio Félix de Paravicino\n\n\nLope de Vega\n\n\nSan Juan de la Cruz\n\n\n\n\n\n\nID\nLos ID son como las clases pero solo se pueden utlizar una vez por sitio web. Es útil para cosas que no se deben repetir más de una vez por sitio web.\n&lt;style&gt;\n#principal{\n  text-align: center\n  color:blue\n}\n&lt;/style&gt;\n&lt;!--[...]--&gt;\n&lt;div id=\"principal\"&gt;\n  &lt;h4&gt;Teatro Romántico&gt;&lt;/h4&gt;\n  &lt;p&gt;El retablo romántico se caracteriza por exaltar la libertad creadora,\n    la expresión intensa de los sentimientos individuales, el gusto por lo\n    misterioso y lo sublime, y la reivindicación de la imaginación frente a\n    las reglas clásicas.&lt;/p&gt;\n&lt;/div&gt;\n\n\nTeatro Romántico\n\n\nEl retablo romántico se caracteriza por exaltar la libertad creadora, la expresión intensa de los sentimientos individuales, el gusto por lo misterioso y lo sublime, y la reivindicación de la imaginación frente a las reglas clásicas.\n\n\n\n\n\nPropiedades CSS\n\nborder y border-radius\nLa propiedad border es una propiedad abreviada (shorthand) que en realidad combina tres propiedades más pequeñas:\n\nborder-width → grosor del borde\n\nborder-style → estilo del borde (solid, dashed, dotted, etc.)\n\nborder-color → color del borde\n\nPor ejemplo, estas dos definiciones son equivalentes:\n/* Forma abreviada */\n.caja {\n  border: 2px solid red;\n}\n\n/* Forma “desdoblada” en 3 mini propiedades */\n.caja-desdoblada {\n  border-width: 2px;\n  border-style: solid;\n  border-color: red;\n}\n Lope de Vega\n\n\nborder-top, border-right, border-bottom, border-left\nCSS permite aplicar bordes distintos en cada lado. Cada uno funciona igual que border pero aplicado a un solo lado:\nborder-top\nborder-right\nborder-bottom\nborder-left\n.caja-bordes {\n  border-top: 3px solid red;\n  border-right: 2px dashed blue;\n  border-bottom: 4px dotted green;\n  border-left: 5px double orange;\n}\nTambién pueden desdoblarse:\n.caja-top-desdoblado {\n  border-top-width: 4px;\n  border-top-style: solid;\n  border-top-color: purple;\n}\n\n\nmargin y padding\nLas propiedades margin y padding controlan el espacio alrededor de los elementos, pero cada una actúa en una zona distinta:\n\nmargin → espacio externo, fuera del borde del elemento\n\npadding → espacio interno, entre el contenido y el borde\n\nVisualmente:\n\n\n \n\n\n\n CONTENT\n\n\n\n\n&lt;div style=\"background:#f0f0f0; padding:20px;\"&gt;\n &lt;!-- MARGIN (gris claro alrededor del borde) --&gt;\n   &lt;!-- BORDER --&gt;\n   &lt;div style=\"border:3px solid black\"&gt;\n   &lt;!-- PADDING (espacio interno) --&gt;\n   &lt;div style=\"background:#d0ffd0; padding:15px;\"&gt;\n   &lt;!-- CONTENT --&gt;\n     &lt;span style=\"background-color:white\"&gt;CONTENT&lt;/span&gt;\n   &lt;/div&gt;\n &lt;/div&gt;\n&lt;/div&gt;\n\nRegla Trouble\nCuando margin o padding usan 4 valores, el orden siempre es el mismo:\ntop, right, bottom, left\nPara recordarlo fácilmente se utiliza la regla mnemotécnica Trouble:\n\nT → Top (arriba)\n\nR → Right (derecha)\n\nB → Bottom (abajo)\n\nL → Left (izquierda)\n\nEs decir:\nmargin:    top   right   bottom   left;\npadding:   top   right   bottom   left;\n\n\n\n\n\n\nTipTruco para los ingenieros: La regla de la mano derecha\n\n\n\nEl orden de los margin y de los padding siempre es en sentido horario.\nPor lo que podemos utilizar la regla de la mano derecha de la inducción electro magnética asumiendo que el vector intensidad apunta hacia la pantalla\n\n\n\n\n\n\nArchivos externos CSS\nIncluir en la cabecerá el CSS presenta ventajas como tener la página web en un único archivo. Sin embargo en la práctica normalmente trabajaremos con más de 2 archivos por lo que incluir uno más o uno menos no marca la diferencia. Por lo que podemos separar el css en un archivo externo .css. De esta forma podremos reutilizar las hojas de estilos.\n&lt;head&gt;\n    &lt;title&gt;Mi Página&lt;/title&gt;\n    &lt;link rel=\"stylesheet\" href=\"styles.css\"&gt;\n&lt;/head&gt;",
     "crumbs": [
       "Bloque I Introducción",
-      "Semana 1",
-      "HTML"
+      "Semana 2",
+      "CSS"
     ]
   },
   {
-    "objectID": "pages/Bloque1/html.html#html5",
-    "href": "pages/Bloque1/html.html#html5",
-    "title": "HTML",
-    "section": "HTML5",
-    "text": "HTML5\n\n¿Qué es HTML?\nHTML es un lenguaje de marcas que permite definir la estructura y el contenido de un documento para la web. Mediante un conjunto de etiquetas, el desarrollador describe elementos como textos, imágenes, enlaces o formularios, indicando su función dentro de la página. Es la base sobre la que posteriormente se aplican estilos (CSS) y comportamientos dinámicos (JavaScript).\n\n\nEstructura básica\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n\n&lt;/head&gt;\n\n&lt;body&gt;\n\n  &lt;p&gt;Clase 1 del TC&lt;/p&gt;\n  \n&lt;/body&gt;\n&lt;/html&gt;\nEn el código aparecen varias etiquetas HTML, y cada una tiene una etiqueta de apertura y una etiqueta de cierre (por ejemplo, &lt;p&gt; y &lt;/p&gt;).\nEstas etiquetas delimitan y organizan el contenido del documento:\n- &lt;head&gt; agrupa la información del documento,\n- &lt;body&gt; contiene lo que verá el usuario,\n- &lt;p&gt; define un párrafo.\nLa función de las etiquetas es indicar al navegador qué es cada parte del documento y cómo debe interpretarla.\n\n\nHead\nSe corresponde con la cabecera de la pestaña, principalmente solo se modifica el logotipo y el contenido de esta.\nTambién se utiliza para almacenar los metadatos de la web, así como scripts de JavaScript y hojas de estilo de CSS.\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n\n  &lt;title&gt; Web del TC &lt;/title&gt;\n\n&lt;/head&gt;\n\n&lt;body&gt;\n\n  &lt;p&gt;Clase 1 del TC&lt;/p&gt;\n  \n&lt;/body&gt;\n&lt;/html&gt;\n\n\nBody\nSe corresponde con todo el contenido de la página dentro podemos utilizar multitud de etiquetas, acontinuación expondremos las más importantes.\nHasta el momento hemos trabajado únicamente con etiquietas invividuales, pero pronto veremos como podemos juntar varias etiquetas simples para obtener estructuras más complejas como tablas o formularios.\nTodo el código mostrado a partir de ahora se asume que esta correctamente ubicado dentro de una etiqueta body\n\n&lt;p&gt; Paragraph\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n&lt;p&gt;\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n&lt;/p&gt;\n\n\n&lt;br&gt; Break Line\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation\nullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n&lt;p&gt;\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n  &lt;br&gt;&lt;/br&gt;\n  ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n&lt;/p&gt;\n\n\n&lt;ul&gt; Unordered list\n\nFrancisco de Quevedo\nLope de Vega\nGóngora\n\n&lt;ul&gt;\n  &lt;li&gt;Francisco de Quevedo&lt;/li&gt;\n  &lt;li&gt;Lope de Vega&lt;/li&gt;\n  &lt;li&gt;Góngora&lt;/li&gt;\n&lt;/ul&gt;\n\n\n&lt;ol&gt; Ordered list\n\nRecepción\nDiscurso del Rector\nDespedida\n\n&lt;ol&gt;\n  &lt;li&gt;Recepción &lt;/li&gt;\n  &lt;li&gt;Discruso del Rector&lt;/li&gt;\n  &lt;li&gt;Despedida&lt;/li&gt;\n&lt;/ol&gt;\n\n\n&lt;h#&gt; Headings\n&lt;h1&gt;Título 1&lt;/h1&gt;\n&lt;h2&gt;Título 2&lt;/h2&gt;\n&lt;h3&gt;Título 3&lt;/h3&gt;\n&lt;h4&gt;Título 4&lt;/h4&gt;\n&lt;h5&gt;Título 5&lt;/h5&gt;\n&lt;h6&gt;Título 6&lt;/h6&gt;\n\n\n&lt;div&gt; Divisor y &lt;span&gt; Span\nEtiquetas contenedores, utilizadas para agrupar otras etiquetas, no presentan ningún efecto visible intrínsico, salvo que tras utilizar &lt;div&gt; se produce un salto de línea. Por lo que utilizaremos &lt;div&gt; para agrupar grandes grupos de etiquetas y &lt;span&gt; para fragementos más pequeños\n\n&lt;div&gt;\n&lt;div&gt;\n  &lt;h2&gt;Capítulo 2 &lt;/h2&gt;\n  &lt;p&gt;\n    Mio Cid Ruy Díaz por Burgos entró,&lt;br&gt;&lt;/br&gt;\n    en su conpaña sessaenta pendones.&lt;br&gt;&lt;/br&gt;\n    Exiénlo ver mugieres e varones,&lt;br&gt;&lt;/br&gt;\n    burgeses e burgesas por las finiestras son,&lt;br&gt;&lt;/br&gt;\n    plorando de los ojos, tanto avién el dolor,&lt;br&gt;&lt;/br&gt;\n    de las sus bocas todos dizían una razón:&lt;br&gt;&lt;/br&gt;\n    — ¡Dios, qué buen vassallo, si oviesse buen señor!—\n  &lt;/p&gt;\n&lt;/div&gt;\n\n\n\n&lt;strong&gt; Strong, &lt;i&gt; Italic\nNegrita Itálica Negrita e Itálica\n&lt;strong&gt;Negrita&lt;/strong&gt;\n&lt;i&gt;Itálica&lt;/i&gt;\n&lt;strong&gt;&lt;i&gt; Negrita e Itálica&lt;/i&gt;&lt;/strong&gt;\n\n\nComentario\nEtiqueta invisible\n&lt;p&gt;Etiqueta invisible&lt;/p&gt;\n\n&lt;!-- Soy un comenario --&gt;\n\n\nTablas\n\n\n\n\nProducto\n\n\nCantidad\n\n\nPrecio (€)\n\n\n\n\n\n\nManzanas\n\n\n10\n\n\n3,50\n\n\n\n\nNaranjas\n\n\n8\n\n\n4,00\n\n\n\n\nPlátanos\n\n\n6\n\n\n2,80\n\n\n\n\n\n\nTotal\n\n\n24\n\n\n10,30\n\n\n\n\n&lt;table&gt;\n  &lt;thead&gt;\n    &lt;tr&gt;\n      &lt;th&gt;Producto&lt;/th&gt;\n      &lt;th&gt;Cantidad&lt;/th&gt;\n      &lt;th&gt;Precio (€)&lt;/th&gt;\n    &lt;/tr&gt;\n  &lt;/thead&gt;\n\n  &lt;tbody&gt;\n    &lt;tr&gt;\n      &lt;td&gt;Manzanas&lt;/td&gt;\n      &lt;td&gt;10&lt;/td&gt;\n      &lt;td&gt;3,50&lt;/td&gt;\n    &lt;/tr&gt;\n    &lt;tr&gt;\n      &lt;td&gt;Naranjas&lt;/td&gt;\n      &lt;td&gt;8&lt;/td&gt;\n      &lt;td&gt;4,00&lt;/td&gt;\n    &lt;/tr&gt;\n    &lt;tr&gt;\n      &lt;td&gt;Plátanos&lt;/td&gt;\n      &lt;td&gt;6&lt;/td&gt;\n      &lt;td&gt;2,80&lt;/td&gt;\n    &lt;/tr&gt;\n  &lt;/tbody&gt;\n\n  &lt;tfoot&gt;\n    &lt;tr&gt;\n      &lt;td&gt;Total&lt;/td&gt;\n      &lt;td&gt;24&lt;/td&gt;\n      &lt;td&gt;10,30&lt;/td&gt;\n    &lt;/tr&gt;\n  &lt;/tfoot&gt;\n&lt;/table&gt;\n\n\n&lt;a&gt; Link\nHyperloopUPV\n&lt;!-- ¿Qué pasa con la URL --&gt;\n&lt;a&gt;Hyperloop UPV&lt;/a&gt;\n\nPropiedades HTML\nLas etiquetas o elementos html disponen de atributos que nos permiten modificar su comportamiento interno.\nEn el caso de las etiquetas &lt;a&gt; debemos de especificar en los atributos la referncia en cuestión\n  &lt;a href=\"https://hyperloopupv.com/\"&gt; HyperloopUPV &lt;/a&gt;\n\n\n\n&lt;img&gt; Image\n\n\n\n“Plaza de la Reina”\n\n\n&lt;img src=\"../pr.jpg\" alt=\"Plaza con una fuente en el centro alrdedor casetas y fincas\"&gt;\n\n\n&lt;form&gt; Forms\nAmpliamente utilizados en HTML, trabajan sobre la etiqueta &lt;input&gt; la cual tiene muchos tipos.\n\n&lt;input type=\"text\"&gt;\n\nNombre: \n\n&lt;form&gt;\n\n  &lt;label for=\"first-name\"&gt;Nombre:&lt;/label&gt;\n\n  &lt;input type=\"text\" name=\"first-name\"/&gt;\n&lt;/form&gt;\n\n\n&lt;input type=\"number\"&gt;\n\nEdad: \n\n&lt;form&gt;\n\n  &lt;label for=\"age\"&gt;Edad:&lt;/label&gt;\n\n  &lt;input type=\"number\" name=\"age\" /&gt;\n&lt;/form&gt;\n\n\n&lt;input type=\"radio\"&gt;\n\nSubsistema:   Software   Firmware \n\n&lt;form&gt;\n\n  &lt;label for=\"sub\"&gt;Subsistema: &lt;/label&gt;&lt;br /&gt;\n  &lt;input type=\"radio\" name=\"sub\" value=\"software\" /&gt; Software &lt;br /&gt;\n  &lt;input type=\"radio\" name=\"sub\" value=\"firmware\" /&gt; Firmware &lt;br /&gt;\n\n&lt;/form&gt;\n\n\n&lt;input type=\"submit\"&gt;\n\nNombre:  \n\n\n&lt;form&gt;\n\n  &lt;label for=\"first-name\"&gt;Nombre:&lt;/label&gt;\n  &lt;input type=\"text\" name=\"first-name\"/&gt;\n\n  &lt;br/&gt;\n\n  &lt;input type=\"submit\"/&gt;\n&lt;/form&gt;\n\n\n\n&lt;button&gt; Button\nPor ahora no los utilizaremos, pero es importante saber que existen\n\nSuscribirse\n\n&lt;button&gt;Suscribirse&lt;/button&gt;",
+    "objectID": "pages/Bloque1/css.html#etiqueta-meta",
+    "href": "pages/Bloque1/css.html#etiqueta-meta",
+    "title": "CSS",
+    "section": "Etiqueta <meta>",
+    "text": "Etiqueta &lt;meta&gt;\nLas etiquetas &lt;meta&gt; en HTML sirven para proporcionar metadatos sobre la página web. Estos metadatos no se muestran al usuario, pero son importantes para navegadores, buscadores, redes sociales y dispositivos.\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt; &lt;!-- Selecciona el conjunto de caracteres --&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt; &lt;!-- \"Hace la web Responsive\" --&gt;\n    &lt;title&gt;Mi Página&lt;/title&gt;\n    &lt;link rel=\"stylesheet\" href=\"styles.css\"&gt;\n&lt;/head&gt;",
     "crumbs": [
       "Bloque I Introducción",
-      "Semana 1",
-      "HTML"
+      "Semana 2",
+      "CSS"
     ]
   },
   {
-    "objectID": "pages/Bloque1/html.html#primer-repo-de-git",
-    "href": "pages/Bloque1/html.html#primer-repo-de-git",
-    "title": "HTML",
-    "section": "Primer repo de Git",
-    "text": "Primer repo de Git\n\nIniciar sesión en cuenta de GitHub\nBarra superior derecha, Símbolo + &gt; New Repo\nRepository Name\nDescription of the repo\nVisibility\nAdd README\nCrear repositorio\n\n\n\nDesde la ventana del repositorio creado\nCode &lt;&gt; &gt; Clone &gt; HTTPS &gt; Copiar URL\nDesde VScode\nClonar repositorio (si no aparece F1, paleta de comandos Clonar Repositorio)\nPegar la URL del repo\nPresionar intro (equivalente a git clone)\n\n\n\nRealizar cambios\nDesde la barra derecha seleccionar menú de Git (3 nodos interconectados por dos aristas)\nAgregar presionando el + los archivos a la staging area (equivalente a git add &lt;file&gt;)\nEscribir mensaje de commit y presionar botón de confirmación (equivalente a git commit)\n\n\nUna vez se hayan realizados todos los commits deseados presionar la rueda de sincronización en la barra de estado. Este último cambio es equivalente a ejecutar git pull y git push.\npush sube los cambios al repositorio remoto pull actualiza los cambios de repositorio remoto por el local",
+    "objectID": "pages/Bloque1/css.html#git-github",
+    "href": "pages/Bloque1/css.html#git-github",
+    "title": "CSS",
+    "section": "Git & GitHub:",
+    "text": "Git & GitHub:\nLos comandos de git nos permiten utilizar la cli para gestionar nuestro repositorio\ngit init # Incializa repositorio (= crear repo con GitHub)\ngit clone &lt;url-repo&gt; \n\ngit add &lt;files&gt; # Añade los archivos a la stagging area\ngit commit -m \"&lt;mensaje de commit&gt;\" # commit\n\ngit push # push\ngit pull # pull\n\ngit status # estado actual del repo\ngit log # historia reciente del log con poco detalle de profundidad\n\ngit diff &lt;file&gt; # muestra la diferencia entre la versión modificada ente un archivo y otro",
     "crumbs": [
       "Bloque I Introducción",
-      "Semana 1",
-      "HTML"
+      "Semana 2",
+      "CSS"
     ]
   },
   {
-    "objectID": "pages/Bloque1/ehtml.html#estructura-básica-de-las-páginas-web",
-    "href": "pages/Bloque1/ehtml.html#estructura-básica-de-las-páginas-web",
-    "title": "HTML",
-    "section": "Estructura básica de las páginas web",
-    "text": "Estructura básica de las páginas web\n¿Qué es una página web?\nUna página web es un documento digital accesible desde un navegador, compuesto por HTML, CSS y, cuando es necesario, JavaScript. Representa la unidad básica de contenido o interacción dentro de un sitio web y puede integrar tanto información estática como elementos dinámicos."
+    "objectID": "pages/Bloque1/css_p.html#problemas-de-html",
+    "href": "pages/Bloque1/css_p.html#problemas-de-html",
+    "title": "CSS",
+    "section": "Problemas de HTML",
+    "text": "Problemas de HTML\nHasta el momento hemos trabajado con HTML, que a pesar de ser muy práctico para la creación de la estructura interna de la web, presenta ciertas limitaciones a la hora de modificar el formato de la web, para ello se introduce CSS, una herramienta que nos va a permitir modificar el formato cómodamente."
   },
   {
-    "objectID": "pages/Bloque1/ehtml.html#html5",
-    "href": "pages/Bloque1/ehtml.html#html5",
-    "title": "HTML",
-    "section": "HTML5",
-    "text": "HTML5\n¿Qué es HTML?\nHTML es un lenguaje de marcas que permite definir la estructura y el contenido de un documento para la web. Mediante un conjunto de etiquetas, el desarrollador describe elementos como textos, imágenes, enlaces o formularios, indicando su función dentro de la página. Es la base sobre la que posteriormente se aplican estilos (CSS) y comportamientos dinámicos (JavaScript)."
+    "objectID": "pages/Bloque1/css_p.html#formato-con-css",
+    "href": "pages/Bloque1/css_p.html#formato-con-css",
+    "title": "CSS",
+    "section": "Formato con CSS",
+    "text": "Formato con CSS\nAtributo style\nSupongamos que tenemos el siguiente elemento\n&lt;p&gt; Hola Mundo&lt;p&gt;. Por ahora el texto se mostrará en color negro, el color predeterminado de HTML para las etiquetas &lt;p&gt;\n\n\nHola mundo"
   },
   {
-    "objectID": "pages/Bloque1/ehtml.html#primer-repo-de-git",
-    "href": "pages/Bloque1/ehtml.html#primer-repo-de-git",
-    "title": "HTML",
-    "section": "Primer repo de Git",
-    "text": "Primer repo de Git\n\nIniciar sesión en cuenta de GitHub\nBarra superior derecha, Símbolo + &gt; New Repo\nRepository Name\nDescription of the repo\nVisibility\nAdd README\nCrear repositorio"
+    "objectID": "pages/Bloque1/css_p.html#etiqueta-meta",
+    "href": "pages/Bloque1/css_p.html#etiqueta-meta",
+    "title": "CSS",
+    "section": "Etiqueta <meta>",
+    "text": "Etiqueta &lt;meta&gt;\nLas etiquetas &lt;meta&gt; en HTML sirven para proporcionar metadatos sobre la página web. Estos metadatos no se muestran al usuario, pero son importantes para navegadores, buscadores, redes sociales y dispositivos.\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt; &lt;!-- Selecciona el conjunto de caracteres --&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt; &lt;!-- \"Hace la web Responsive\" --&gt;\n    &lt;title&gt;Mi Página&lt;/title&gt;\n    &lt;link rel=\"stylesheet\" href=\"styles.css\"&gt;\n&lt;/head&gt;"
   },
   {
-    "objectID": "pages/Bloque1/t2a.html",
-    "href": "pages/Bloque1/t2a.html",
-    "title": "TA2: Mi CV II",
+    "objectID": "pages/Bloque1/css_p.html#git-github",
+    "href": "pages/Bloque1/css_p.html#git-github",
+    "title": "CSS",
+    "section": "Git & GitHub:",
+    "text": "Git & GitHub:\nLos comandos de git nos permiten utilizar la cli para gestionar nuestro repositorio\ngit init # Incializa repositorio (= crear repo con GitHub)\ngit clone &lt;url-repo&gt; \n\ngit add &lt;files&gt; # Añade los archivos a la stagging area\ngit commit -m \"&lt;mensaje de commit&gt;\" # commit\n\ngit push # push\ngit pull # pull\n\ngit status # estado actual del repo\ngit log # historia reciente del log con poco detalle de profundidad\n\ngit diff &lt;file&gt; # muestra la diferencia entre la versión modificada ente un archivo y otro"
+  },
+  {
+    "objectID": "pages/Bloque1/MAcss.html",
+    "href": "pages/Bloque1/MAcss.html",
+    "title": "MA: Selectores y Pseudoselectores",
     "section": "",
-    "text": "En la tarea previa definimos nuestra identidad digital, ahora es un buen momento dándole un toque personal con ayuda de CSS.\nSi no se realizó la T1A puede utilizar el CV de Antonio Machado como base sobre la que trabajar. (Click derecho guadrar enlace como)\nImportante: la hoja de estilos debe ser definida como un archivo externo.\nEl objetivo de esta tarea es evaluar, las habilidades de diseño y de investigación, por lo que no hay ningún ejemplo al que imitar. Siguiendo ese objetivo se le recomienda al alumno que investigue y descubrá el máximo número de propiedades CSS.",
+    "text": "Además del id y las class, existen más selectores que son ampliamente utilizados en la programación web. El siguiente video los explica muy detallados y sirve como repaso para lo que se ha visto esta semana de CSS. El vídeo está en Inglés y dura 20 minutos.",
     "crumbs": [
       "Bloque I Introducción",
       "Semana 2",
-      "TA2: Mi CV II"
+      "MA: Selectores y Pseudoselectores"
+    ]
+  },
+  {
+    "objectID": "pages/Bloque1/t1a.html",
+    "href": "pages/Bloque1/t1a.html",
+    "title": "TA1: Mi CV I",
+    "section": "",
+    "text": "A día de hoy es muy importante tener una imagen digital, por ello la tarea extra consite en crearte tu propia página web básica usando html.\nPuedes usar el CV de Antonio Machado como referencia.\nBase: Ejemplo",
+    "crumbs": [
+      "Bloque I Introducción",
+      "Semana 1",
+      "TA1: Mi CV I"
     ]
   },
   {
@@ -997,890 +1195,1008 @@
     ]
   },
   {
-    "objectID": "pages/Bloque1/t1a.html",
-    "href": "pages/Bloque1/t1a.html",
-    "title": "TA1: Mi CV I",
+    "objectID": "pages/Bloque1/t2a.html",
+    "href": "pages/Bloque1/t2a.html",
+    "title": "TA2: Mi CV II",
     "section": "",
-    "text": "A día de hoy es muy importante tener una imagen digital, por ello la tarea extra consite en crearte tu propia página web básica usando html.\nPuedes usar el CV de Antonio Machado como referencia.\nBase: Ejemplo",
+    "text": "En la tarea previa definimos nuestra identidad digital, ahora es un buen momento dándole un toque personal con ayuda de CSS.\nSi no se realizó la T1A puede utilizar el CV de Antonio Machado como base sobre la que trabajar. (Click derecho guadrar enlace como)\nImportante: la hoja de estilos debe ser definida como un archivo externo.\nEl objetivo de esta tarea es evaluar, las habilidades de diseño y de investigación, por lo que no hay ningún ejemplo al que imitar. Siguiendo ese objetivo se le recomienda al alumno que investigue y descubrá el máximo número de propiedades CSS.",
     "crumbs": [
       "Bloque I Introducción",
-      "Semana 1",
-      "TA1: Mi CV I"
+      "Semana 2",
+      "TA2: Mi CV II"
     ]
   },
   {
-    "objectID": "pages/Bloque1/MAcss.html",
-    "href": "pages/Bloque1/MAcss.html",
-    "title": "MA: Selectores y Pseudoselectores",
+    "objectID": "pages/Bloque1/ehtml.html#estructura-básica-de-las-páginas-web",
+    "href": "pages/Bloque1/ehtml.html#estructura-básica-de-las-páginas-web",
+    "title": "HTML",
+    "section": "Estructura básica de las páginas web",
+    "text": "Estructura básica de las páginas web\n¿Qué es una página web?\nUna página web es un documento digital accesible desde un navegador, compuesto por HTML, CSS y, cuando es necesario, JavaScript. Representa la unidad básica de contenido o interacción dentro de un sitio web y puede integrar tanto información estática como elementos dinámicos."
+  },
+  {
+    "objectID": "pages/Bloque1/ehtml.html#html5",
+    "href": "pages/Bloque1/ehtml.html#html5",
+    "title": "HTML",
+    "section": "HTML5",
+    "text": "HTML5\n¿Qué es HTML?\nHTML es un lenguaje de marcas que permite definir la estructura y el contenido de un documento para la web. Mediante un conjunto de etiquetas, el desarrollador describe elementos como textos, imágenes, enlaces o formularios, indicando su función dentro de la página. Es la base sobre la que posteriormente se aplican estilos (CSS) y comportamientos dinámicos (JavaScript)."
+  },
+  {
+    "objectID": "pages/Bloque1/ehtml.html#primer-repo-de-git",
+    "href": "pages/Bloque1/ehtml.html#primer-repo-de-git",
+    "title": "HTML",
+    "section": "Primer repo de Git",
+    "text": "Primer repo de Git\n\nIniciar sesión en cuenta de GitHub\nBarra superior derecha, Símbolo + &gt; New Repo\nRepository Name\nDescription of the repo\nVisibility\nAdd README\nCrear repositorio"
+  },
+  {
+    "objectID": "pages/Bloque1/html.html",
+    "href": "pages/Bloque1/html.html",
+    "title": "HTML",
     "section": "",
-    "text": "Además del id y las class, existen más selectores que son ampliamente utilizados en la programación web. El siguiente video los explica muy detallados y sirve como repaso para lo que se ha visto esta semana de CSS. El vídeo está en Inglés y dura 20 minutos.",
+    "text": "Contenido",
     "crumbs": [
       "Bloque I Introducción",
-      "Semana 2",
-      "MA: Selectores y Pseudoselectores"
+      "Semana 1",
+      "HTML"
     ]
   },
   {
-    "objectID": "pages/Bloque1/css_p.html#problemas-de-html",
-    "href": "pages/Bloque1/css_p.html#problemas-de-html",
-    "title": "CSS",
-    "section": "Problemas de HTML",
-    "text": "Problemas de HTML\nHasta el momento hemos trabajado con HTML, que a pesar de ser muy práctico para la creación de la estructura interna de la web, presenta ciertas limitaciones a la hora de modificar el formato de la web, para ello se introduce CSS, una herramienta que nos va a permitir modificar el formato cómodamente."
+    "objectID": "pages/Bloque1/html.html#estructura-básica-de-las-páginas-web",
+    "href": "pages/Bloque1/html.html#estructura-básica-de-las-páginas-web",
+    "title": "HTML",
+    "section": "Estructura básica de las páginas web",
+    "text": "Estructura básica de las páginas web\n\n¿Qué es una página web?\nUna página web es un documento digital accesible desde un navegador, compuesto por HTML, CSS y, cuando es necesario, JavaScript. Representa la unidad básica de contenido o interacción dentro de un sitio web y puede integrar tanto información estática como elementos dinámicos.\n\n\n¿Qué partes tiene una página web? (externas)",
+    "crumbs": [
+      "Bloque I Introducción",
+      "Semana 1",
+      "HTML"
+    ]
   },
   {
-    "objectID": "pages/Bloque1/css_p.html#formato-con-css",
-    "href": "pages/Bloque1/css_p.html#formato-con-css",
-    "title": "CSS",
-    "section": "Formato con CSS",
-    "text": "Formato con CSS\nAtributo style\nSupongamos que tenemos el siguiente elemento\n&lt;p&gt; Hola Mundo&lt;p&gt;. Por ahora el texto se mostrará en color negro, el color predeterminado de HTML para las etiquetas &lt;p&gt;\n\n\nHola mundo"
+    "objectID": "pages/Bloque1/html.html#html5",
+    "href": "pages/Bloque1/html.html#html5",
+    "title": "HTML",
+    "section": "HTML5",
+    "text": "HTML5\n\n¿Qué es HTML?\nHTML es un lenguaje de marcas que permite definir la estructura y el contenido de un documento para la web. Mediante un conjunto de etiquetas, el desarrollador describe elementos como textos, imágenes, enlaces o formularios, indicando su función dentro de la página. Es la base sobre la que posteriormente se aplican estilos (CSS) y comportamientos dinámicos (JavaScript).\n\n\nEstructura básica\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n\n&lt;/head&gt;\n\n&lt;body&gt;\n\n  &lt;p&gt;Clase 1 del TC&lt;/p&gt;\n  \n&lt;/body&gt;\n&lt;/html&gt;\nEn el código aparecen varias etiquetas HTML, y cada una tiene una etiqueta de apertura y una etiqueta de cierre (por ejemplo, &lt;p&gt; y &lt;/p&gt;).\nEstas etiquetas delimitan y organizan el contenido del documento:\n- &lt;head&gt; agrupa la información del documento,\n- &lt;body&gt; contiene lo que verá el usuario,\n- &lt;p&gt; define un párrafo.\nLa función de las etiquetas es indicar al navegador qué es cada parte del documento y cómo debe interpretarla.\n\n\nHead\nSe corresponde con la cabecera de la pestaña, principalmente solo se modifica el logotipo y el contenido de esta.\nTambién se utiliza para almacenar los metadatos de la web, así como scripts de JavaScript y hojas de estilo de CSS.\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n\n  &lt;title&gt; Web del TC &lt;/title&gt;\n\n&lt;/head&gt;\n\n&lt;body&gt;\n\n  &lt;p&gt;Clase 1 del TC&lt;/p&gt;\n  \n&lt;/body&gt;\n&lt;/html&gt;\n\n\nBody\nSe corresponde con todo el contenido de la página dentro podemos utilizar multitud de etiquetas, acontinuación expondremos las más importantes.\nHasta el momento hemos trabajado únicamente con etiquietas invividuales, pero pronto veremos como podemos juntar varias etiquetas simples para obtener estructuras más complejas como tablas o formularios.\nTodo el código mostrado a partir de ahora se asume que esta correctamente ubicado dentro de una etiqueta body\n\n&lt;p&gt; Paragraph\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n&lt;p&gt;\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n&lt;/p&gt;\n\n\n&lt;br&gt; Break Line\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation\nullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n&lt;p&gt;\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n  &lt;br&gt;&lt;/br&gt;\n  ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n&lt;/p&gt;\n\n\n&lt;ul&gt; Unordered list\n\nFrancisco de Quevedo\nLope de Vega\nGóngora\n\n&lt;ul&gt;\n  &lt;li&gt;Francisco de Quevedo&lt;/li&gt;\n  &lt;li&gt;Lope de Vega&lt;/li&gt;\n  &lt;li&gt;Góngora&lt;/li&gt;\n&lt;/ul&gt;\n\n\n&lt;ol&gt; Ordered list\n\nRecepción\nDiscurso del Rector\nDespedida\n\n&lt;ol&gt;\n  &lt;li&gt;Recepción &lt;/li&gt;\n  &lt;li&gt;Discruso del Rector&lt;/li&gt;\n  &lt;li&gt;Despedida&lt;/li&gt;\n&lt;/ol&gt;\n\n\n&lt;h#&gt; Headings\n&lt;h1&gt;Título 1&lt;/h1&gt;\n&lt;h2&gt;Título 2&lt;/h2&gt;\n&lt;h3&gt;Título 3&lt;/h3&gt;\n&lt;h4&gt;Título 4&lt;/h4&gt;\n&lt;h5&gt;Título 5&lt;/h5&gt;\n&lt;h6&gt;Título 6&lt;/h6&gt;\n\n\n&lt;div&gt; Divisor y &lt;span&gt; Span\nEtiquetas contenedores, utilizadas para agrupar otras etiquetas, no presentan ningún efecto visible intrínsico, salvo que tras utilizar &lt;div&gt; se produce un salto de línea. Por lo que utilizaremos &lt;div&gt; para agrupar grandes grupos de etiquetas y &lt;span&gt; para fragementos más pequeños\n\n&lt;div&gt;\n&lt;div&gt;\n  &lt;h2&gt;Capítulo 2 &lt;/h2&gt;\n  &lt;p&gt;\n    Mio Cid Ruy Díaz por Burgos entró,&lt;br&gt;&lt;/br&gt;\n    en su conpaña sessaenta pendones.&lt;br&gt;&lt;/br&gt;\n    Exiénlo ver mugieres e varones,&lt;br&gt;&lt;/br&gt;\n    burgeses e burgesas por las finiestras son,&lt;br&gt;&lt;/br&gt;\n    plorando de los ojos, tanto avién el dolor,&lt;br&gt;&lt;/br&gt;\n    de las sus bocas todos dizían una razón:&lt;br&gt;&lt;/br&gt;\n    — ¡Dios, qué buen vassallo, si oviesse buen señor!—\n  &lt;/p&gt;\n&lt;/div&gt;\n\n\n\n&lt;strong&gt; Strong, &lt;i&gt; Italic\nNegrita Itálica Negrita e Itálica\n&lt;strong&gt;Negrita&lt;/strong&gt;\n&lt;i&gt;Itálica&lt;/i&gt;\n&lt;strong&gt;&lt;i&gt; Negrita e Itálica&lt;/i&gt;&lt;/strong&gt;\n\n\nComentario\nEtiqueta invisible\n&lt;p&gt;Etiqueta invisible&lt;/p&gt;\n\n&lt;!-- Soy un comenario --&gt;\n\n\nTablas\n\n\n\n\nProducto\n\n\nCantidad\n\n\nPrecio (€)\n\n\n\n\n\n\nManzanas\n\n\n10\n\n\n3,50\n\n\n\n\nNaranjas\n\n\n8\n\n\n4,00\n\n\n\n\nPlátanos\n\n\n6\n\n\n2,80\n\n\n\n\n\n\nTotal\n\n\n24\n\n\n10,30\n\n\n\n\n&lt;table&gt;\n  &lt;thead&gt;\n    &lt;tr&gt;\n      &lt;th&gt;Producto&lt;/th&gt;\n      &lt;th&gt;Cantidad&lt;/th&gt;\n      &lt;th&gt;Precio (€)&lt;/th&gt;\n    &lt;/tr&gt;\n  &lt;/thead&gt;\n\n  &lt;tbody&gt;\n    &lt;tr&gt;\n      &lt;td&gt;Manzanas&lt;/td&gt;\n      &lt;td&gt;10&lt;/td&gt;\n      &lt;td&gt;3,50&lt;/td&gt;\n    &lt;/tr&gt;\n    &lt;tr&gt;\n      &lt;td&gt;Naranjas&lt;/td&gt;\n      &lt;td&gt;8&lt;/td&gt;\n      &lt;td&gt;4,00&lt;/td&gt;\n    &lt;/tr&gt;\n    &lt;tr&gt;\n      &lt;td&gt;Plátanos&lt;/td&gt;\n      &lt;td&gt;6&lt;/td&gt;\n      &lt;td&gt;2,80&lt;/td&gt;\n    &lt;/tr&gt;\n  &lt;/tbody&gt;\n\n  &lt;tfoot&gt;\n    &lt;tr&gt;\n      &lt;td&gt;Total&lt;/td&gt;\n      &lt;td&gt;24&lt;/td&gt;\n      &lt;td&gt;10,30&lt;/td&gt;\n    &lt;/tr&gt;\n  &lt;/tfoot&gt;\n&lt;/table&gt;\n\n\n&lt;a&gt; Link\nHyperloopUPV\n&lt;!-- ¿Qué pasa con la URL --&gt;\n&lt;a&gt;Hyperloop UPV&lt;/a&gt;\n\nPropiedades HTML\nLas etiquetas o elementos html disponen de atributos que nos permiten modificar su comportamiento interno.\nEn el caso de las etiquetas &lt;a&gt; debemos de especificar en los atributos la referncia en cuestión\n  &lt;a href=\"https://hyperloopupv.com/\"&gt; HyperloopUPV &lt;/a&gt;\n\n\n\n&lt;img&gt; Image\n\n\n\n“Plaza de la Reina”\n\n\n&lt;img src=\"../pr.jpg\" alt=\"Plaza con una fuente en el centro alrdedor casetas y fincas\"&gt;\n\n\n&lt;form&gt; Forms\nAmpliamente utilizados en HTML, trabajan sobre la etiqueta &lt;input&gt; la cual tiene muchos tipos.\n\n&lt;input type=\"text\"&gt;\n\nNombre: \n\n&lt;form&gt;\n\n  &lt;label for=\"first-name\"&gt;Nombre:&lt;/label&gt;\n\n  &lt;input type=\"text\" name=\"first-name\"/&gt;\n&lt;/form&gt;\n\n\n&lt;input type=\"number\"&gt;\n\nEdad: \n\n&lt;form&gt;\n\n  &lt;label for=\"age\"&gt;Edad:&lt;/label&gt;\n\n  &lt;input type=\"number\" name=\"age\" /&gt;\n&lt;/form&gt;\n\n\n&lt;input type=\"radio\"&gt;\n\nSubsistema:   Software   Firmware \n\n&lt;form&gt;\n\n  &lt;label for=\"sub\"&gt;Subsistema: &lt;/label&gt;&lt;br /&gt;\n  &lt;input type=\"radio\" name=\"sub\" value=\"software\" /&gt; Software &lt;br /&gt;\n  &lt;input type=\"radio\" name=\"sub\" value=\"firmware\" /&gt; Firmware &lt;br /&gt;\n\n&lt;/form&gt;\n\n\n&lt;input type=\"submit\"&gt;\n\nNombre:  \n\n\n&lt;form&gt;\n\n  &lt;label for=\"first-name\"&gt;Nombre:&lt;/label&gt;\n  &lt;input type=\"text\" name=\"first-name\"/&gt;\n\n  &lt;br/&gt;\n\n  &lt;input type=\"submit\"/&gt;\n&lt;/form&gt;\n\n\n\n&lt;button&gt; Button\nPor ahora no los utilizaremos, pero es importante saber que existen\n\nSuscribirse\n\n&lt;button&gt;Suscribirse&lt;/button&gt;",
+    "crumbs": [
+<<<<<<< HEAD
+      "Bloque III Interacción",
+      "Semana 6",
+      "DOM"
+=======
+    "crumbs": [
+      "Bloque III Interacción",
+      "Semana 9",
+      "MA: *Uncontrolled fields* y `useRef`"
+>>>>>>> 8e10774 (feat: explicacion semana 10 (#4))
+    ]
   },
   {
-    "objectID": "pages/Bloque1/css_p.html#etiqueta-meta",
-    "href": "pages/Bloque1/css_p.html#etiqueta-meta",
-    "title": "CSS",
-    "section": "Etiqueta <meta>",
-    "text": "Etiqueta &lt;meta&gt;\nLas etiquetas &lt;meta&gt; en HTML sirven para proporcionar metadatos sobre la página web. Estos metadatos no se muestran al usuario, pero son importantes para navegadores, buscadores, redes sociales y dispositivos.\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt; &lt;!-- Selecciona el conjunto de caracteres --&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt; &lt;!-- \"Hace la web Responsive\" --&gt;\n    &lt;title&gt;Mi Página&lt;/title&gt;\n    &lt;link rel=\"stylesheet\" href=\"styles.css\"&gt;\n&lt;/head&gt;"
+    "objectID": "pages/Bloque3/t9.html",
+    "href": "pages/Bloque3/t9.html",
+    "title": "T6: Romancero Gitano I",
+    "section": "",
+    "text": "El objetivo de esta tarea es aplicar los conceptos básicos de HTML, CSS y JavaScript (DOM) para crear una página web interactiva que muestre poemas del Romancero gitano de Federico García Lorca y modifique su apariencia visual en función de las diferentes metáforas.\nResultado esperado"
   },
   {
-    "objectID": "pages/Bloque1/css_p.html#git-github",
-    "href": "pages/Bloque1/css_p.html#git-github",
-    "title": "CSS",
-    "section": "Git & GitHub:",
-    "text": "Git & GitHub:\nLos comandos de git nos permiten utilizar la cli para gestionar nuestro repositorio\ngit init # Incializa repositorio (= crear repo con GitHub)\ngit clone &lt;url-repo&gt; \n\ngit add &lt;files&gt; # Añade los archivos a la stagging area\ngit commit -m \"&lt;mensaje de commit&gt;\" # commit\n\ngit push # push\ngit pull # pull\n\ngit status # estado actual del repo\ngit log # historia reciente del log con poco detalle de profundidad\n\ngit diff &lt;file&gt; # muestra la diferencia entre la versión modificada ente un archivo y otro"
+    "objectID": "pages/Bloque3/t9.html#objetivo-de-la-tarea",
+    "href": "pages/Bloque3/t9.html#objetivo-de-la-tarea",
+    "title": "T6: Romancero Gitano I",
+    "section": "",
+    "text": "El objetivo de esta tarea es aplicar los conceptos básicos de HTML, CSS y JavaScript (DOM) para crear una página web interactiva que muestre poemas del Romancero gitano de Federico García Lorca y modifique su apariencia visual en función de las diferentes metáforas.\nResultado esperado"
   },
   {
-    "objectID": "pages/Bloque1/css.html",
-    "href": "pages/Bloque1/css.html",
-    "title": "CSS",
-    "section": "",
-    "text": "Contenido",
-    "crumbs": [
-      "Bloque I Introducción",
-      "Semana 2",
-      "CSS"
-    ]
+    "objectID": "pages/Bloque3/t9.html#estructura-html",
+    "href": "pages/Bloque3/t9.html#estructura-html",
+    "title": "T6: Romancero Gitano I",
+    "section": "Estructura HTML",
+    "text": "Estructura HTML\nEl documento HTML debe:\n\nEstar correctamente estructurado (&lt;!DOCTYPE&gt;, &lt;html&gt;, &lt;head&gt;, &lt;body&gt;).\nContener un contenedor principal centrado horizontalmente.\nIncluir, en este orden:\n\nUn elemento para mostrar información métrica del poema (número de estrofas y versos).\nUn elemento para el título del poema.\nUn elemento para el texto del poema, respetando los saltos de verso utilizando la etiqueta &lt;pre&gt;.\nUn botón que permita cambiar de poema.\n\n\nNo debe utilizarse ningún framework ni librería externa."
   },
   {
-    "objectID": "pages/Bloque1/css.html#problemas-de-html",
-    "href": "pages/Bloque1/css.html#problemas-de-html",
-    "title": "CSS",
-    "section": "Problemas de HTML",
-    "text": "Problemas de HTML\nHasta el momento hemos trabajado con HTML, que a pesar de ser muy práctico para la creación de la estructura interna de la web, presenta ciertas limitaciones a la hora de modificar el formato de la web, para ello se introduce CSS, una herramienta que nos va a permitir modificar el formato cómodamente.",
-    "crumbs": [
-      "Bloque I Introducción",
-      "Semana 2",
-      "CSS"
-    ]
+    "objectID": "pages/Bloque3/t9.html#javascript",
+    "href": "pages/Bloque3/t9.html#javascript",
+    "title": "T6: Romancero Gitano I",
+    "section": "JavaScript",
+    "text": "JavaScript\n\nDatos\nEn JavaScript se debe definir un array de objetos, donde cada objeto represente un poema y tenga al menos:\n\nUn título.\nEl texto del poema como una cadena de texto, usando saltos de línea para los versos.\n\nEl cambio de poema debe hacerse recorriendo este array de forma cíclica (cola circular) mediante el botón.\nDescargar poemas (click derecho guardar enlace como)\n\n\nManipulación del DOM\nEl comportamiento de la página debe implementarse exclusivamente con DOM nativo, cumpliendo lo siguiente:\n\nTodas las funciones deben declararse como arrow functions.\nAl pulsar el botón:\n\nSe actualiza el título.\nSe actualiza el texto del poema.\nSe modifica el formato del fondo.\nSe recalculan y muestran:\n\nNúmero de versos.\nNúmero de estrofas (bloques separados por líneas en blanco).\n\n\n\nEl cálculo debe realizarse a partir del texto del poema, no con valores predefinidos."
   },
   {
-    "objectID": "pages/Bloque1/css.html#formato-con-css",
-    "href": "pages/Bloque1/css.html#formato-con-css",
-    "title": "CSS",
-    "section": "Formato con CSS",
-    "text": "Formato con CSS\n\nAtributo style\nSupongamos que tenemos el siguiente elemento\n&lt;p&gt; Hola Mundo&lt;p&gt;. Por ahora el texto se mostrará en color negro, el color predeterminado de HTML para las etiquetas &lt;p&gt;\n\n\nHola mundo\n\n\nSi se desea modificar el formato intrínseco de esta etiqueta &lt;p&gt; debemos incluir la propiedad style que, como su nombre indica nos permitirá modificar su estilo. Dentro de este atributo se ha de insertar propiedad CSS (no confundir con los atributos html). La propiedad CSS especifica que aspecto visual del contenido de la etiqueta. Por ejemplo, si se desea modificar el color de la letra se debe de utilizar la propiedad color (nótese que no lleva u).\n&lt;p style=\"color:red\"&gt;Hola Mundo&lt;/p&gt;\n\n&lt;!-- Equivalente en Hexadecimal --&gt;\n\n&lt;p style=\"color:#ff0000\"&gt;Hola Mundo&lt;/p&gt;\n\n\nHola Mundo\n\n\nSí deseamos modificar más de una propiedad CSS deberemos de serparalas dentro de la etiqueta con un punto y coma\n&lt;p style=\"color:#ff0000; font-size: 44px\"&gt;Hola Mundo&lt;/p&gt;\n\n\nHola Mundo\n\n\n\nProblemas del atributo style\nEl atributo style resulta útil para formatear una etiqueta individualmente, pero resulta tedioso y repetitivo para más de una etiqueta. Observe el siguiente ejemplo\n&lt;p&gt;Autores del culteranismo marcados en rojo&lt;p&gt;\n\n&lt;ul&gt;\n    &lt;li&gt;Francisco de Quevedo&lt;/li&gt;\n    &lt;li style=\"color:red; text-decoration: underline; font-size:30px;\"&gt;Luis de Góngora&lt;/li&gt;\n    &lt;li&gt;Baltasar Gracián&lt;/li&gt;\n    &lt;li style=\"color:red; text-decoration: underline; font-size:30px;\"&gt;Pedro Soto de Rojas&lt;/li&gt;\n    &lt;li&gt;Tirso de Molina&lt;/li&gt;\n    &lt;li&gt;Calderón de la Barca&lt;/li&gt;\n&lt;/ul&gt;\n\n\nAutores del culteranismo marcados en rojo\n\n\n\nFrancisco de Quevedo\n\n\nLuis de Góngora\n\n\nBaltasar Gracián\n\n\nPedro Soto de Rojas\n\n\nTirso de Molina\n\n\nCalderón de la Barca\n\n\n\nProblemas:\n\nRepetición de mucho código\nAlta posibilidad error\nPoca escalabilidad\n\nSi añadimos por ejempo a Luis Carrillo y Sotomayor (autor culteranista) hay que volver a repetir todo el atributo\nSi deseasemos cambiar el color de rojo a verde deberemos modificar cada uno de los atributos\n\n\n\n\n\nClases e ID\n\nClases\nLa solución a este problema son las clases que nos permiten identificar aquellos componentes con características de formato similares. Se agregan como atributos a cada etiqueta\n&lt;p&gt;Autores del culteranismo marcados en rojo&lt;p&gt; &lt;!--En este caso no se marcan en rojo--&gt;\n\n&lt;ul&gt;\n    &lt;li&gt;Francisco de Quevedo&lt;/li&gt;\n    &lt;li class=\"culteranista\"&gt;Luis de Góngora&lt;/li&gt;\n    &lt;li&gt;Baltasar Gracián&lt;/li&gt;\n    &lt;li class=\"culteranista\"&gt;Pedro Soto de Rojas&lt;/li&gt;\n    &lt;li&gt;Tirso de Molina&lt;/li&gt;\n    &lt;li&gt;Calderón de la Barca&lt;/li&gt;\n&lt;/ul&gt;\n\nEtiqueta &lt;style&gt;\nAhora para marcar en rojo los culterantistas se ha de indicar el formato de todos en la class culteranista, para ello nos definiremos una hoja de estilo que será común para todo el documento. La hoja de estilos se define en el &lt;head&gt; de la siguiente forma:\n&lt;head&gt;\n&lt;!-- Fragemento HTML --&gt;\n&lt;style&gt;\n  /*Fragmento CSS*/\n  .culteranistas{  /*Nótese el punto*/\n    color: red;\n    text-size: 40px;\n    background-color: blue;\n    text-decoration: underline;  /*Este último ';' no es obligatorio como tal, pero es recomendable, en HTML3 y CSS2 daba error si se incluía*/\n  }\n&lt;/style&gt; \n&lt;!--Fin de la etiqueta Style, seguimos con html--&gt;\n&lt;/head&gt;\nAhora se visualizará correctamente, además se añadirá el fondo azul\n\n\nComposición de clases\nSuponga que tenemos dos clases, una primera clase que modifica el tipo de letra a monospace que aplicaremos a los autores culteranistas y una segunda que modifica el grosor de la letra que se aplicará sobre los autores de lírica.\n&lt;head&gt;&lt;style&gt;\n  .culteranista {\n    font-family: monospace;\n  }\n  .lirica {\n    font-weight: bold;\n  }\n  .autores {\n    list-style: square;\n  }\n&lt;/style&gt;&lt;/head&gt;\n\n&lt;body&gt;\n  &lt;ul class=\"autores\"&gt;\n    &lt;li class=\"lirica\"&gt;Fray Luis de León&lt;/li&gt;\n    &lt;li class=\"culteranista\"&gt;Hortensio Félix de Paravicino&lt;/li&gt;\n    &lt;li class=\"culteranista lirica\"&gt;Lope de Vega&lt;/li&gt;\n    &lt;li class=\"lirica\"&gt;San Juan de la Cruz&lt;/li&gt;\n  &lt;/ul&gt;\n&lt;/body&gt;\n\n\n\nFray Luis de León\n\n\nHortensio Félix de Paravicino\n\n\nLope de Vega\n\n\nSan Juan de la Cruz\n\n\n\n\n\n\nID\nLos ID son como las clases pero solo se pueden utlizar una vez por sitio web. Es útil para cosas que no se deben repetir más de una vez por sitio web.\n&lt;style&gt;\n#principal{\n  text-align: center\n  color:blue\n}\n&lt;/style&gt;\n&lt;!--[...]--&gt;\n&lt;div id=\"principal\"&gt;\n  &lt;h4&gt;Teatro Romántico&gt;&lt;/h4&gt;\n  &lt;p&gt;El retablo romántico se caracteriza por exaltar la libertad creadora,\n    la expresión intensa de los sentimientos individuales, el gusto por lo\n    misterioso y lo sublime, y la reivindicación de la imaginación frente a\n    las reglas clásicas.&lt;/p&gt;\n&lt;/div&gt;\n\n\nTeatro Romántico\n\n\nEl retablo romántico se caracteriza por exaltar la libertad creadora, la expresión intensa de los sentimientos individuales, el gusto por lo misterioso y lo sublime, y la reivindicación de la imaginación frente a las reglas clásicas.\n\n\n\n\n\nPropiedades CSS\n\nborder y border-radius\nLa propiedad border es una propiedad abreviada (shorthand) que en realidad combina tres propiedades más pequeñas:\n\nborder-width → grosor del borde\n\nborder-style → estilo del borde (solid, dashed, dotted, etc.)\n\nborder-color → color del borde\n\nPor ejemplo, estas dos definiciones son equivalentes:\n/* Forma abreviada */\n.caja {\n  border: 2px solid red;\n}\n\n/* Forma “desdoblada” en 3 mini propiedades */\n.caja-desdoblada {\n  border-width: 2px;\n  border-style: solid;\n  border-color: red;\n}\n Lope de Vega\n\n\nborder-top, border-right, border-bottom, border-left\nCSS permite aplicar bordes distintos en cada lado. Cada uno funciona igual que border pero aplicado a un solo lado:\nborder-top\nborder-right\nborder-bottom\nborder-left\n.caja-bordes {\n  border-top: 3px solid red;\n  border-right: 2px dashed blue;\n  border-bottom: 4px dotted green;\n  border-left: 5px double orange;\n}\nTambién pueden desdoblarse:\n.caja-top-desdoblado {\n  border-top-width: 4px;\n  border-top-style: solid;\n  border-top-color: purple;\n}\n\n\nmargin y padding\nLas propiedades margin y padding controlan el espacio alrededor de los elementos, pero cada una actúa en una zona distinta:\n\nmargin → espacio externo, fuera del borde del elemento\n\npadding → espacio interno, entre el contenido y el borde\n\nVisualmente:\n\n\n \n\n\n\n CONTENT\n\n\n\n\n&lt;div style=\"background:#f0f0f0; padding:20px;\"&gt;\n &lt;!-- MARGIN (gris claro alrededor del borde) --&gt;\n   &lt;!-- BORDER --&gt;\n   &lt;div style=\"border:3px solid black\"&gt;\n   &lt;!-- PADDING (espacio interno) --&gt;\n   &lt;div style=\"background:#d0ffd0; padding:15px;\"&gt;\n   &lt;!-- CONTENT --&gt;\n     &lt;span style=\"background-color:white\"&gt;CONTENT&lt;/span&gt;\n   &lt;/div&gt;\n &lt;/div&gt;\n&lt;/div&gt;\n\nRegla Trouble\nCuando margin o padding usan 4 valores, el orden siempre es el mismo:\ntop, right, bottom, left\nPara recordarlo fácilmente se utiliza la regla mnemotécnica Trouble:\n\nT → Top (arriba)\n\nR → Right (derecha)\n\nB → Bottom (abajo)\n\nL → Left (izquierda)\n\nEs decir:\nmargin:    top   right   bottom   left;\npadding:   top   right   bottom   left;\n\n\n\n\n\n\nTipTruco para los ingenieros: La regla de la mano derecha\n\n\n\nEl orden de los margin y de los padding siempre es en sentido horario.\nPor lo que podemos utilizar la regla de la mano derecha de la inducción electro magnética asumiendo que el vector intensidad apunta hacia la pantalla\n\n\n\n\n\n\nArchivos externos CSS\nIncluir en la cabecerá el CSS presenta ventajas como tener la página web en un único archivo. Sin embargo en la práctica normalmente trabajaremos con más de 2 archivos por lo que incluir uno más o uno menos no marca la diferencia. Por lo que podemos separar el css en un archivo externo .css. De esta forma podremos reutilizar las hojas de estilos.\n&lt;head&gt;\n    &lt;title&gt;Mi Página&lt;/title&gt;\n    &lt;link rel=\"stylesheet\" href=\"styles.css\"&gt;\n&lt;/head&gt;",
-    "crumbs": [
+    "objectID": "pages/Bloque3/t9.html#css",
+    "href": "pages/Bloque3/t9.html#css",
+    "title": "T6: Romancero Gitano I",
+    "section": "CSS",
+    "text": "CSS\nLorca utiliza las metáforas y la alegoría como elemento principal sobre el que construye sus poemas, al analizar profundamente descubrimos que siempre recurre a las mismas metáforas.\nEl color no se utiliza aquí solo como elemento decorativo, sino como un recurso semántico: cada color representa un símbolo literario presente en el poema.\nDesde el punto de vista técnico: - Los colores de fondo y de texto deben definirse en clases CSS. - JavaScript no decide colores, únicamente decide qué clase aplicar según el contenido del poema.\n\nPalabras clave y colores asociados\nSe debe detectar el texto del poema las siguientes palabras clave y aplicar el color de fondo correspondiente:\n\nguardia civil → fondo verde militar\nsangre → fondo granate oscuro\ncaballo → fondo color tierra\ncuchillo / navaja → fondo plateado\n\nEl color del texto debe elegirse siempre de forma que exista contraste suficiente con el fondo y se garantice la legibilidad.\nSi el poema contiene varias palabras clave, solo debe aplicarse un único estilo, siguiendo un orden de prioridad definido previamente.\nSi el poema no contiene ninguna de estas palabras, se aplicará un estilo por defecto con colores aleatorios."
+  },
+  {
+    "objectID": "pages/Bloque3/t9.html#extra-opcional-símbolo-aurora",
+    "href": "pages/Bloque3/t9.html#extra-opcional-símbolo-aurora",
+    "title": "T6: Romancero Gitano I",
+    "section": "Extra opcional: símbolo aurora 🌈",
+    "text": "Extra opcional: símbolo aurora 🌈\nDe forma voluntaria, se puede añadir el símbolo aurora, que tendrá prioridad absoluta sobre todos los demás.\nCuando el poema contenga la palabra aurora, el fondo debe mostrar un degradado animado.\n\nCSS necesario para el extra\n.aurora {\n  background: linear-gradient(120deg,\n    #ff005d,\n    #ff9f1c,\n    #ffee32,\n    #3cff00,\n    #00e5ff,\n    #7a00ff,\n    #ff00c8\n  );\n  background-size: 600% 600%;\n  animation: aurora 10s linear infinite;\n  color: black;\n}\n\n@keyframes aurora {\n  0%   { background-position: 0% 50%; }\n  50%  { background-position: 100% 50%; }\n  100% { background-position: 0% 50%; }\n}"
+  },
+  {
+    "objectID": "pages/Bloque3/t9.html#consejos",
+    "href": "pages/Bloque3/t9.html#consejos",
+    "title": "T6: Romancero Gitano I",
+    "section": "Consejos",
+    "text": "Consejos\n\nCentrado de la página (layout clásico)\nToda la página debe estar centrada horizontalmente.\nEl centrado se consigue mediante:\n\nUn contenedor con un ancho máximo definido.\nMárgenes automáticos a izquierda y derecha.\n\nDesde el punto de vista conceptual:\n\nmargin: 0 auto no centra texto, centra bloques.\nEl navegador reparte automáticamente el espacio sobrante a ambos lados del contenedor.\n\n\n\nAnimación del cambio de color\nPara evitar que los cambios de color sean bruscos, se utiliza la propiedad transition en CSS.\nEsta propiedad indica al navegador que los cambios en determinadas propiedades visuales deben hacerse de forma progresiva.\nEjemplo conceptual:\nbody {\n  transition: background-color 0.6s, color 0.6s;\n}\nGracias a esta transición: - Cuando JavaScript cambia una clase o un color, - el navegador interpola automáticamente entre el color anterior y el nuevo.\nNo es necesario programar animaciones en JavaScript: CSS se encarga de todo el efecto visual.\n\n\nBúsqueda de una palabra\nPara buscar si determinada palabra determinada se debe utilizar la función includes de la clase string\n\ntexto = \"hoy nieva\";\n\ntexto.includes(\"nieva\");    //TRUE\ntexto.includes(\"llueve\");   //FALSE\n\n\nGeneración del color aleatorio\nPara la generacióndel color aleatorio de puede utilizar la siguiente función\nconst randomColor = () =&gt; '#' + Math.floor(Math.random() * 16777215).toString(16);\n\n\nConteo versos y estrofas\nEl recuento de versos y estrofas debe hacerse a partir del texto del poema, no con valores escritos a mano. A continuación se dan algunas pistas técnicas para abordar este problema.\n\nConteo de versos\nUn verso puede considerarse, a efectos prácticos en esta tarea, como una línea de texto no vacía.\nUna estrategia habitual consiste en: - Separar el texto por saltos de línea. - Eliminar las líneas vacías o formadas solo por espacios. - Contar cuántas líneas válidas quedan.\nEjemplo orientativo:\nconst versos = texto\n  .split('\\n')\n  .filter(linea =&gt; linea.trim() !== '')\n  .length;\nEste enfoque es suficiente para la mayoría de los poemas del Romancero gitano y evita errores frecuentes.\n\n\nConteo de estrofas\nUna estrofa puede entenderse como un bloque de versos separado de otros bloques por una línea en blanco.\nUna posible estrategia es: - Separar el texto usando dos (o más) saltos de línea consecutivos. - Eliminar bloques vacíos. - Contar los bloques resultantes.\nEjemplo orientativo:\nconst estrofas = texto\n  .split(/\\n\\s*\\n/)\n  .filter(bloque =&gt; bloque.trim() !== '')\n  .length;\nEntrega: un único archivo HTML funcional."
+  },
+  {
+    "objectID": "pages/Bloque3/t9.html#recomendaciones-para-afrontar-la-tarea",
+    "href": "pages/Bloque3/t9.html#recomendaciones-para-afrontar-la-tarea",
+    "title": "T6: Romancero Gitano I",
+    "section": "Recomendaciones para afrontar la tarea",
+    "text": "Recomendaciones para afrontar la tarea\nAl enfrentarnos a un proyecto de cierta complejitud, el como afrontarlo resulta de cricial para el desarollo del mismo por ello a a continuación dejo un esquema de implementación modular. Sería mejor no utilizarlo, pero puede ser un buen punto de partida si no se sabe como empezar la app, no es el único proceso de implementación válido ni es más correcto que cualquier otro\n\nEstructura de HTML básica contadores de versos y estrofas placeholders de poema y título y botón\nFormateo CSS parte estática: centrado, tamaño (todo lo que no sea color)\nDefinir clases con colores predeterminados\nLógica interna con JS\n\n\nBuscar palabra\nContar estrofas\nConteo versos\nSelección de clase\nGenerar color aleatorio si procede\n\n\nIntegración con DOM"
+  },
+  {
+    "objectID": "pages/Bloque3/reactI.html#sintaxis-jsx",
+    "href": "pages/Bloque3/reactI.html#sintaxis-jsx",
+    "title": "React I",
+    "section": "Sintaxis JSX",
+    "text": "Sintaxis JSX\n¿Qué es la sintaxis JSX?\n\nJSX (JavaScript XML) es una extensión de JavaScript utilizada en React.\n\nPermite escribir estructuras similares a HTML directamente dentro del código JavaScript.\n\nFacilita la creación y lectura de interfaces de usuario, integrando lógica y presentación.\n\nAunque su apariencia es HTML, JSX se transpila a JavaScript puro antes de ejecutarse en el navegador.\nForma cómoda de almacenar etiquetas html como variables de JS"
+=======
       "Bloque I Introducción",
-      "Semana 2",
-      "CSS"
+      "Semana 1",
+      "HTML"
     ]
   },
   {
-    "objectID": "pages/Bloque1/css.html#etiqueta-meta",
-    "href": "pages/Bloque1/css.html#etiqueta-meta",
-    "title": "CSS",
-    "section": "Etiqueta <meta>",
-    "text": "Etiqueta &lt;meta&gt;\nLas etiquetas &lt;meta&gt; en HTML sirven para proporcionar metadatos sobre la página web. Estos metadatos no se muestran al usuario, pero son importantes para navegadores, buscadores, redes sociales y dispositivos.\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt; &lt;!-- Selecciona el conjunto de caracteres --&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt; &lt;!-- \"Hace la web Responsive\" --&gt;\n    &lt;title&gt;Mi Página&lt;/title&gt;\n    &lt;link rel=\"stylesheet\" href=\"styles.css\"&gt;\n&lt;/head&gt;",
+    "objectID": "pages/Bloque1/html.html#primer-repo-de-git",
+    "href": "pages/Bloque1/html.html#primer-repo-de-git",
+    "title": "HTML",
+    "section": "Primer repo de Git",
+    "text": "Primer repo de Git\n\nIniciar sesión en cuenta de GitHub\nBarra superior derecha, Símbolo + &gt; New Repo\nRepository Name\nDescription of the repo\nVisibility\nAdd README\nCrear repositorio\n\n\n\nDesde la ventana del repositorio creado\nCode &lt;&gt; &gt; Clone &gt; HTTPS &gt; Copiar URL\nDesde VScode\nClonar repositorio (si no aparece F1, paleta de comandos Clonar Repositorio)\nPegar la URL del repo\nPresionar intro (equivalente a git clone)\n\n\n\nRealizar cambios\nDesde la barra derecha seleccionar menú de Git (3 nodos interconectados por dos aristas)\nAgregar presionando el + los archivos a la staging area (equivalente a git add &lt;file&gt;)\nEscribir mensaje de commit y presionar botón de confirmación (equivalente a git commit)\n\n\nUna vez se hayan realizados todos los commits deseados presionar la rueda de sincronización en la barra de estado. Este último cambio es equivalente a ejecutar git pull y git push.\npush sube los cambios al repositorio remoto pull actualiza los cambios de repositorio remoto por el local",
     "crumbs": [
       "Bloque I Introducción",
-      "Semana 2",
-      "CSS"
+      "Semana 1",
+      "HTML"
     ]
+>>>>>>> e3c3469 (feat:  varios)
   },
   {
-    "objectID": "pages/Bloque1/css.html#git-github",
-    "href": "pages/Bloque1/css.html#git-github",
-    "title": "CSS",
-    "section": "Git & GitHub:",
-    "text": "Git & GitHub:\nLos comandos de git nos permiten utilizar la cli para gestionar nuestro repositorio\ngit init # Incializa repositorio (= crear repo con GitHub)\ngit clone &lt;url-repo&gt; \n\ngit add &lt;files&gt; # Añade los archivos a la stagging area\ngit commit -m \"&lt;mensaje de commit&gt;\" # commit\n\ngit push # push\ngit pull # pull\n\ngit status # estado actual del repo\ngit log # historia reciente del log con poco detalle de profundidad\n\ngit diff &lt;file&gt; # muestra la diferencia entre la versión modificada ente un archivo y otro",
+    "objectID": "pages/Bloque1/t1.html",
+    "href": "pages/Bloque1/t1.html",
+    "title": "T1: Web de HL I",
+    "section": "",
+    "text": "La primera tarea de esta semana consiste en diseñar una página web para el equipo de generación espontánea llamado Hyperloop UPV, la web debe de ser realizada en un archivo HTML y debe de constar por lo menos de los siguientes apartados y estructura\n\nTítulo principal de la página &lt;h1&gt;\nVarios secciones cada una introducida por un título &lt;h2&gt; (si es necesario hacer &lt;h3&gt;)\n\nDescripción del equipo\nLista desordenada de los subsistemas\nLista de Partners por orden de importancia (UPV, )\nUn día en Hyperloop (nótese el título del apartado en cursiva)\n\nBreve descripción de lo que hacemos en el equipo, alguna foto\n\nMiembros\n\nUna tabla de miembros por subsistema (inventarse los datos)\n\nFormulario para solicitar unirse al equipo que solicite\n\nNombre\nApellido\nCurso (radius button)\nBotón de enviar\n\nLink a la web del TC de SW y a la oficial del equipo\n\nCada sección debe de estar contenido en un div de la siguiente forma\n\n&lt;div&gt;\n\n  &lt;h2&gt;Títlo de sección&lt;/h2&gt;\n\n  &lt;Contenido de la sección /&gt;\n\n&lt;/div&gt;\nBase: Web",
     "crumbs": [
       "Bloque I Introducción",
-      "Semana 2",
-      "CSS"
+      "Semana 1",
+      "T1: Web de HL I"
     ]
   },
   {
-    "objectID": "pages/Bloque1/t2.html",
-    "href": "pages/Bloque1/t2.html",
-    "title": "T2: Web de HL II",
+    "objectID": "pages/Bloque1/MAhtml2.html",
+    "href": "pages/Bloque1/MAhtml2.html",
+    "title": "MA: Mas HTML",
     "section": "",
-    "text": "El objetivo de esta tarea, es poner en práctica lo aprendido en clase para ello vamos a formatear la web de nuestro equipo de Hyperloop, (tarea de la semana pasada).\nSe debe formatear para que quede como está Web, cuanto más se parezca mejor.\nNotas:\nLa hoja de estilos debe de estar incluida en el la etiqueta &lt;style&gt; del &lt;head&gt;.\nPara conseguir que los bordes de la table, td, tr… colapsen (que solo haya un borde y no dos) se debe utilizar la propiedad border-collapse.\nSi no se realizó la T1, puede utilizar este archivo html como base (click derechao guardar enlace como).",
+    "text": "Durante la explicación de teoría vista esta semana en clase nos hemos introducido en las etiquetas básicas de HTML.\nA continuación una selección de etiquetas que no hemos visto en clase, pero resulta interesante conocer, puesto que en determinadas ocasiones son útiles. Cada ítem de la lista es un enlace a la documentación de Mozilla donde está explicado el funcionamiento de la etiqueta de forma exhaustiva. No hay que conocer todos los aspectos de cada etiqueta, basta con tener una idea general de como funcionan.\n\ninput types. Muy importante conocer todos los tipos de inputs\ncode\niframe. Útil y ampliamente extendida\nhr. Línea horizontal\nfigure y figcaption. Permite insertar figura y pie de figura.\naudio. Insertar un audio en la página web.\nvideo. Insertar un audio en la página web.\nheader, main, footer. Son como &lt;div&gt; pero ya con usos por defecto preasignados.",
     "crumbs": [
       "Bloque I Introducción",
-      "Semana 2",
-      "T2: Web de HL II"
+      "Semana 1",
+      "MA: Mas HTML"
     ]
   },
   {
-    "objectID": "pages/Bloque2/jsI-reveal.html#introducción-a-js",
-    "href": "pages/Bloque2/jsI-reveal.html#introducción-a-js",
-    "title": "Introducción a JS",
-    "section": "Introducción a JS",
-    "text": "Introducción a JS\n¿Qué es JavaScript?\n\nEs el lenguaje de programación del navegador.\nCreado en 1995 por Brendan Eich\nPermite crear comportamientos dinámicos: responder a clics, validar formularios, mostrar u ocultar elementos, generar contenido nuevo, etc.\nSe ejecuta directamente en el navegador, sin necesidad de instalación.\nJunto con HTML y CSS forma el trinomio esencial del desarrollo web\n\nLa siguiente tabla recuerda las difrencias entre HTML, CSS y JS:"
+    "objectID": "pages/Bloque1/entorno-reveal.html#ide",
+    "href": "pages/Bloque1/entorno-reveal.html#ide",
+    "title": "Preparación del entorno de trabajo",
+    "section": "IDE",
+    "text": "IDE\n¿Qué es una IDE?\nLas Integrated development environment (IDE) son aplicaciones diseñadas para facilitar la programación a los programadores.\nAunque no hay una lista de características propias de las IDE, suelen tener características comunes, por ejemplo:\n\nDebugger integrado en la interfaz\nGestor de archivos\nEditor de código inteligente: autocompletados"
   },
   {
-    "objectID": "pages/Bloque2/jsI-reveal.html#programación-en-js",
-    "href": "pages/Bloque2/jsI-reveal.html#programación-en-js",
-    "title": "Introducción a JS",
-    "section": "Programación en JS",
-    "text": "Programación en JS\nCaracterísticas generales de JS\n\nTipado dinámico\n\nTipado débil Coerción Implicita\n\nMultiparadigma\n\nÁmbito léxico (estático)\n\nModelo basado en prototipos (polimorfismo de inclusión por composición)\n\nFunciones de primera clase\n\nFunciones de orden superior"
+    "objectID": "pages/Bloque1/entorno-reveal.html#node.js-y-npm",
+    "href": "pages/Bloque1/entorno-reveal.html#node.js-y-npm",
+    "title": "Preparación del entorno de trabajo",
+    "section": "Node.JS y NPM",
+    "text": "Node.JS y NPM\n¿Qué es node JS?\nNode.js es un entorno de ejecución de JavaScript basado en el motor V8 de Google Chrome.\nPermite ejecutar código JavaScript directamente en el sistema operativo, sin depender de un navegador.\nDe este modo, el mismo lenguaje puede usarse tanto en el frontend como en el backend."
   },
   {
-    "objectID": "pages/Bloque2/jsI.html",
-    "href": "pages/Bloque2/jsI.html",
-    "title": "Introducción a JS",
+    "objectID": "pages/Bloque1/entorno-reveal.html#git-y-github",
+    "href": "pages/Bloque1/entorno-reveal.html#git-y-github",
+    "title": "Preparación del entorno de trabajo",
+    "section": "Git y GitHub",
+    "text": "Git y GitHub\n¿Qué es Git?\nGit es un sistema de control de versiones distribuido. Permite registrar los cambios de un proyecto, volver a versiones anteriores y trabajar de forma colaborativa sin sobrescribir el trabajo de otros. Cada usuario dispone de una copia completa del repositorio, lo que facilita el trabajo sin conexión."
+  },
+  {
+    "objectID": "pages/Bloque1/entorno.html",
+    "href": "pages/Bloque1/entorno.html",
+    "title": "Preparación del entorno de trabajo",
     "section": "",
-    "text": "Contenido"
+    "text": "Contenido",
+    "crumbs": [
+      "Bloque I Introducción",
+      "Semana 0",
+      "Preparación del entorno de trabajo"
+    ]
   },
   {
-    "objectID": "pages/Bloque2/jsI.html#introducción-a-js",
-    "href": "pages/Bloque2/jsI.html#introducción-a-js",
-    "title": "Introducción a JS",
-    "section": "Introducción a JS",
-    "text": "Introducción a JS\n\n¿Qué es JavaScript?\n\nEs el lenguaje de programación del navegador.\nCreado en 1995 por Brendan Eich\nPermite crear comportamientos dinámicos: responder a clics, validar formularios, mostrar u ocultar elementos, generar contenido nuevo, etc.\nSe ejecuta directamente en el navegador, sin necesidad de instalación.\nJunto con HTML y CSS forma el trinomio esencial del desarrollo web\n\nLa siguiente tabla recuerda las difrencias entre HTML, CSS y JS:\n\n\n\nCapa\nLenguaje\nFunción principal\n\n\n\n\nContenido\nHTML\nEstructura del documento\n\n\nPresentación\nCSS\nApariencia y diseño\n\n\nComportamiento\nJavaScript\nInteractividad y lógica"
+    "objectID": "pages/Bloque1/entorno.html#ide",
+    "href": "pages/Bloque1/entorno.html#ide",
+    "title": "Preparación del entorno de trabajo",
+    "section": "IDE",
+    "text": "IDE\n\n¿Qué es una IDE?\nLas Integrated development environment (IDE) son aplicaciones diseñadas para facilitar la programación a los programadores.\nAunque no hay una lista de características propias de las IDE, suelen tener características comunes, por ejemplo:\n\nDebugger integrado en la interfaz\nGestor de archivos\nEditor de código inteligente: autocompletados\n\n\n\n¿Cuántas IDE existen?\n\nAndroid Studio\nRStudio\nEclipse\n\n\n\n¿Qué IDE utilizaremos nosotros?\nPrincipalmente trabajaremos con VSCode una IDE de proposito general que configuraremos para el desarrollo frontend\n\nInstalación de VScode\n\nEnlace\n\n\nFamiliarizarse con VSCode\n\nBarra lateral:\n\nExplorador de archivos\nMenú de Git\nMenú de extensiones\nBuscar\nDebugger\n\nEditor o área de edición: componente más importante de la IDE, lugar donde se escribe el código.\n\n\n\nExtensiones\nLas extensiones son aplicaciones software desarolladas por empresas o por particulares para modificar o agregar una nueva funcionalidad a las IDE. Pueden ir desde pequeñas modificaciones del tema o de la UI, o incorporar nuevas funcionalidades como la interacción con bases de datos.\n\nLiveServer\nNosotros para el transcurso del curso utilizaremos la extensión Liveserver que nos permitirá desplegar comodamente un pequeño servidor para la programación con HTML (Ahondaremos más la próxima semana)\n\nInstalación de LiveServer\n\n\nEntrar en el menú de extensiones\nBuscar por liveserver\nSeleccionar extensión\nInstalar\n\n\nAl concluir la instalación debería de aparecer en la parte derecha de la barra de estado (barra interior)",
+    "crumbs": [
+      "Bloque I Introducción",
+      "Semana 0",
+      "Preparación del entorno de trabajo"
+    ]
   },
   {
-    "objectID": "pages/Bloque2/jsI.html#programación-en-js",
-    "href": "pages/Bloque2/jsI.html#programación-en-js",
-    "title": "Introducción a JS",
-    "section": "Programación en JS",
-    "text": "Programación en JS\n\nCaracterísticas generales de JS\n\nTipado dinámico\n\nTipado débil Coerción Implicita\n\nMultiparadigma\n\nÁmbito léxico (estático)\n\nModelo basado en prototipos (polimorfismo de inclusión por composición)\n\nFunciones de primera clase\n\nFunciones de orden superior\n\n\nClosures / Copia viva\nReflexión (Reflect, Proxy, descriptores)\n\nMetaprogramación\nSin Polimorfismo Ad-hoc de sobrecarga, ni Polimorfismo universal genérico\n\n\nEjecución single-threaded\n\nAsincronía no bloqueante\n\nPromises / async–await\n\nGarbage collection\nInteroperabilidad con JSON\n\n\n\nTipos\n\nPrimitivos\n\nstring — cadenas de texto\n\nnumber — números (enteros y decimales)\nboolean — verdadero o falso\n\nnull — ausencia intencional de valor\n\nundefined — valor no inicializado\n\nsymbol\nbigint\n\n\n\nTipos de referencia\n\nObject\n\nArray\n\nFunc tion\n\nMap / Set\n\nDate\n\n\n\n\nCaracterísticas del sistema de tipos\n\nTipado dinámico\n\nTipado débil\n\nLos primitivos se copian por valor\n\nLos objetos se copian por referencia\n\n\n\nVariables\n\nlet\n\nTipado: dinámico\nAlcance: estático\nMutables\nHoisting\nNo globales\nShadowing permitido\n\n\n\nconst\nNo son verdaderamente constantes\n\nTipado: dinámico\nAlcance: estático\nInmutables en la referencia (no permiten reasignación)\nHoisting\nNo globales\nShadowing permitido\n\n\n\nvar\nNo se usa\n\nTipado: dinámico\nAlcance: de función (no de bloque)\nMutables\nHoisting (inicializadas como undefined)\nGlobales si se declaran en el ámbito global (propiedad de window/globalThis)\nShadowing permitido, pero con reglas inconsistentes (puede causar illegal shadowing en combinación con let/const)"
+    "objectID": "pages/Bloque1/entorno.html#node.js-y-npm",
+    "href": "pages/Bloque1/entorno.html#node.js-y-npm",
+    "title": "Preparación del entorno de trabajo",
+    "section": "Node.JS y NPM",
+    "text": "Node.JS y NPM\n\n¿Qué es node JS?\nNode.js es un entorno de ejecución de JavaScript basado en el motor V8 de Google Chrome.\nPermite ejecutar código JavaScript directamente en el sistema operativo, sin depender de un navegador.\nDe este modo, el mismo lenguaje puede usarse tanto en el frontend como en el backend.\n\n\n¿Qué es NPM?\nNPM (Node Package Manager) es el gestor de paquetes de Node.js.\nFacilita la instalación, actualización y gestión de librerías que amplían las funcionalidades de los proyectos.\nDescarga node y npm nodejs.org",
+    "crumbs": [
+      "Bloque I Introducción",
+      "Semana 0",
+      "Preparación del entorno de trabajo"
+    ]
   },
   {
-    "objectID": "pages/Bloque2/tia.html",
-    "href": "pages/Bloque2/tia.html",
-    "title": "TAI: La objetización de las personas",
-    "section": "",
-    "text": "El objetivo de esta tarea es aplicar los conocimientos básicos de programación orientada a objetos en JavaScript, haciendo uso de las clases definidas en ES6. En particular, se evaluará el uso de:\n\nherencia entre clases\nencapsulación mediante propiedades privadas\ngetters y setters usando las palabras clave get y set\nmétodos estáticos\nvalidación de datos\n\nPara ello se definirá una jerarquía de clases que represente un equipo de Hyperloop.",
+    "objectID": "pages/Bloque1/entorno.html#git-y-github",
+    "href": "pages/Bloque1/entorno.html#git-y-github",
+    "title": "Preparación del entorno de trabajo",
+    "section": "Git y GitHub",
+    "text": "Git y GitHub\n\n¿Qué es Git?\nGit es un sistema de control de versiones distribuido. Permite registrar los cambios de un proyecto, volver a versiones anteriores y trabajar de forma colaborativa sin sobrescribir el trabajo de otros. Cada usuario dispone de una copia completa del repositorio, lo que facilita el trabajo sin conexión.\n\n\n¿Qué es GitHub?\nGitHub es una plataforma en la nube que utiliza Git para almacenar y gestionar proyectos. Permite compartir código, colaborar con otros desarrolladores y mantener un control de versiones centralizado.\n\n\nGit frente GitHub\n\nGit es la herramienta de control de versiones.(Software Libre, Linux Fundation)\nGitHub es la plataforma online donde se alojan los repositorios y se facilita el trabajo en equipo. (Coporativa Microsoft)\n\n\n\nUso de Git y GitHub\nEn Hyperloop UPV, tanto en los subsistemas de Software y Firmware utilizamos GitHub como herramienta de gestión de código.\nNosotros en el TC, también trataremos de facilitarnos con esta herramienta\n\n\nInstalación de Git y Cuenta de GitHub\n\nInstalación de Git\nCuenta de GitHub\n\n\n\nDiagrama de trabajo de Git\n\n\nGit en VScode",
     "crumbs": [
-      "Bloque II Programación",
-      "Repaso Intensivo",
-      "TAI: La objetización de las personas"
+      "Bloque I Introducción",
+      "Semana 0",
+      "Preparación del entorno de trabajo"
     ]
   },
   {
-    "objectID": "pages/Bloque2/tia.html#objetivo-de-la-tarea",
-    "href": "pages/Bloque2/tia.html#objetivo-de-la-tarea",
-    "title": "TAI: La objetización de las personas",
+    "objectID": "pages/rubric.html",
+    "href": "pages/rubric.html",
+    "title": "Rúbrica de evaluación",
     "section": "",
-    "text": "El objetivo de esta tarea es aplicar los conocimientos básicos de programación orientada a objetos en JavaScript, haciendo uso de las clases definidas en ES6. En particular, se evaluará el uso de:\n\nherencia entre clases\nencapsulación mediante propiedades privadas\ngetters y setters usando las palabras clave get y set\nmétodos estáticos\nvalidación de datos\n\nPara ello se definirá una jerarquía de clases que represente un equipo de Hyperloop.",
+    "text": "Durante el curso seguiremos la siguiente rúbrica para la calificación de las tareas. A pesar de que las calificaciones no son importantes, la rúbrica es un buen recordatorio de que aspectos hay que tener en cuenta en la programación web.\n\n\n\nPuntuación\n\n\nNo aplica\n\n\nDeficiente(0–4)\n\n\nInsuficiente(4–5)\n\n\nAceptable(5–7)\n\n\nBueno(7–9)\n\n\nExcelente(9–10)\n\n\n\n\nDiseño\n\n\nNo aplica.\n\n\nDiseño desordenado y/o con problemas de visualización funcional.\n\n\nDiseño básico pero con problemas de visualización o estructura.\n\n\nDiseño claro y ordenado, cumple los requisitos básicos.\n\n\nDiseño cuidado, buena estética y estructura clara.\n\n\nDiseño profesional, limpio, pulido y sobresaliente.\n\n\n\n\nProgramación\n\n\nNo aplica.\n\n\nCódigo incompleto o con errores graves.\n\n\nCódigo funcional parcialmente y/o con errores importantes.\n\n\nCódigo funcional y adecuado a la tarea.\n\n\nCódigo bien estructurado con mejoras respecto a lo exigido.\n\n\nCódigo impecable, eficiente y muy bien organizado.\n\n\n\n\nEsfuerzo e implicación\n\n\nNo aplica.\n\n\nBajo esfuerzo o dedicación mínima.\n\n\nEsfuerzo adecuado pero limitado.\n\n\nEsfuerzo notable, cumple con lo requerido.\n\n\nEsfuerzo claro, trabajo más allá de lo solicitado.\n\n\nDedicación sobresaliente y trabajo excepcional.\n\n\n\n\nDocumentación / Claridad\n\n\nNo aplica.\n\n\nDocumentación mínima o inexistente.\n\n\nDocumentación incompleta o confusa.\n\n\nDocumentación clara y suficiente.\n\n\nDocumentación bien presentada y detallada.\n\n\nDocumentación excelente y altamente profesional.\n\n\n\n\nFuncionalidad\n\n\nNo aplica.\n\n\nNo funciona o no cumple objetivos.\n\n\nFunciona de forma parcial.\n\n\nFunciona correctamente.\n\n\nFunciona con mejoras o funcionalidades extra.\n\n\nFunciona perfectamente y supera expectativas.\n\n\n\n\nInnovación\n\n\n(Nota extra)\n\n\n\n\nTOTAL:\n\n\n\n\n/60\n\n\n\n\nObservaciones:\n\n\n\n\n\nLa nota total será sobre 60 si hay algun criterio que no se aplique, se modificará la nota para que esté sobre base 60.",
     "crumbs": [
-      "Bloque II Programación",
-      "Repaso Intensivo",
-      "TAI: La objetización de las personas"
+      "Rúbrica de evaluación"
     ]
   },
   {
-    "objectID": "pages/Bloque2/tia.html#entregar",
-    "href": "pages/Bloque2/tia.html#entregar",
-    "title": "TAI: La objetización de las personas",
-    "section": "Entregar",
-    "text": "Entregar\nSe debe entregar un único archivo de JavaScript (.js) que contenga la solución completa a la tarea.",
+    "objectID": "pages/Bloque2/ti.html",
+    "href": "pages/Bloque2/ti.html",
+    "title": "TI: Ejercicios JS",
+    "section": "",
+    "text": "El objetivo de estos ejercicios es repasar aquellas funcionalidades de JavaScript que difieren del resto de lenguajes de programación empirica, por lo que los siguentes ejercicios de DEBEN DE RESOLVER SIN UTILIZAR NINGUNA CONDICIONAL NI NINGÚN BUCLE.\nPrincipalmente trabajarás con:\nDebe de realizar la tarea enun archivo js, para comprobar el resultado debe de ejecutar desde la terminal con node nombreArchivo.js.",
     "crumbs": [
       "Bloque II Programación",
       "Repaso Intensivo",
-      "TAI: La objetización de las personas"
+      "TI: Ejercicios JS"
     ]
   },
   {
-    "objectID": "pages/Bloque2/tia.html#realización-de-la-tarea",
-    "href": "pages/Bloque2/tia.html#realización-de-la-tarea",
-    "title": "TAI: La objetización de las personas",
-    "section": "Realización de la tarea",
-    "text": "Realización de la tarea\nEl archivo JavaScript debe estar claramente dividido en dos partes:\n\nla implementación de clases, donde se definirán todas las clases necesarias\n\nla zona de uso, donde se utilizarán las clases previamente definidas\n\n\nImplementación de clases\nTodas las clases deberán definirse utilizando la sintaxis de clases ES6, haciendo uso correcto de:\n\nclass\nextends\nsuper\npropiedades privadas (usando #)\ngetters y setters (get y set)\nmétodos estáticos\n\n\nClase Person\nDebe contener:\n\npropiedad privada name\npropiedad privada dni\nSe puede obtener tanto el nombre como el DNI, pero solo se puede modificar el nombre\nEl constructor recibirá:\n\nun nombre\nun NÚMERO de DNI\n\nEl constructor deberá calcular automáticamente la letra del DNI siguiendo el algoritmo oficial:\nhttps://www.interior.gob.es/opencms/es/servicios-al-ciudadano/tramites-y-gestiones/dni/calculo-del-digito-de-control-del-nif-nie/\nMétodos y accesos:\n\ngetter name\nsetter name\ngetter dni\nmétodo getInfo() que devuelva un string con el nombre y el DNI completo\n\nSi los datos introducidos no son válidos, se lanzará un Error\n\n\n\nClase Member (clase hija de Person)\nRepresenta a un miembro del equipo de Hyperloop.\nDebe contener:\n\npropiedad privada department\npropiedad privada yearsExperience\n\n\nDepartamentos válidos\nLos únicos departamentos permitidos son:\n\n\"Managment\"\n\"Operaciones\"\n\"Avionics\"\n\"Electromagnetics\"\n\"Mechanics\"\n\nNo se permitirá ningún otro valor.\n\n\nRequisitos adicionales\n\nLa propiedad department:\n\nse accederá mediante:\n\ngetter department\nsetter department\n\n\nEl setter validará que el departamento sea válido\nyearsExperience debe ser un número mayor o igual que 0\n\n\n\nMétodo estático obligatorio\nLa clase Member debe incluir el siguiente método estático:\n\nisValidDepartment(department)\n\ndevuelve true si el departamento es válido\ndevuelve false en caso contrario\ndeberá utilizarse tanto en el constructor como en el setter de department\n\n\n\n\nMétodos públicos\n\ngetter yearsExperience\nmétodo getInfo():\n\nsobrescribe el método de Person\nincluye el departamento y los años de experiencia\n\n\n\n\n\nClase Engineer (clase hija de Member)\nRepresenta a un ingeniero del equipo.\nDebe contener:\n\npropiedad privada specialty\nLa especialidad será un string no vacío\n\n\nAccesos y métodos\n\ngetter specialty\nmétodo getInfo():\n\nsobrescribe el método anterior\nincluye la especialidad del ingeniero\n\n\n\n\n\nClase Team\nRepresenta el equipo completo de Hyperloop.\nDebe contener:\n\npropiedad privada members, que será un array de objetos Member\n\n\nMétodos públicos\n\naddMember(member)\n\nsolo permite añadir objetos que sean instancia de Member\n\nremoveMemberByDni(dni)\nlistMembers()\n\nmuestra por consola la información de todos los miembros del equipo\n\ncountMembersByDepartment(department)\n\ndevuelve cuántos miembros pertenecen a un determinado departamento\n\n\n\n\n\n\nZona de uso\nEn la zona de uso del archivo JavaScript se debe:\n\nCrear al menos:\n\n2 objetos Engineer de departamentos distintos\n1 objeto Member que no sea ingeniero\n\nCrear un objeto Team\nAñadir los miembros al equipo\nUtilizar explícitamente:\n\ngetters\nsetters\nel método estático de validación\n\nMostrar por consola:\n\nel listado completo del equipo\nel número de miembros por departamento\n\nProbar al menos un caso incorrecto:\n\npor ejemplo, asignar un departamento no válido\no intentar añadir un objeto que no sea Member\n\nDemostrar que el error se gestiona correctamente",
+    "objectID": "pages/Bloque2/ti.html#ejercicio-1",
+    "href": "pages/Bloque2/ti.html#ejercicio-1",
+    "title": "TI: Ejercicios JS",
+    "section": "Ejercicio 1",
+    "text": "Ejercicio 1\nDefina un array llamado arrOriginal con el siguiente contenido numérico. Este array será el origen de datos para los ejercicios posteriores, salvo que se indique lo contrario.\n3, 4, 2, 4, 4, 5, 12, 24, 3, 23, 232, 2, -3, -9, 2, -23, 200, -23, 12, 43, 4, -32, -32, 0, 23, 23",
     "crumbs": [
       "Bloque II Programación",
       "Repaso Intensivo",
-      "TAI: La objetización de las personas"
+      "TI: Ejercicios JS"
     ]
   },
   {
-    "objectID": "pages/Bloque2/tia.html#apéndice-comprobaciones-y-errores-en-javascript-necesario-para-la-tarea",
-    "href": "pages/Bloque2/tia.html#apéndice-comprobaciones-y-errores-en-javascript-necesario-para-la-tarea",
-    "title": "TAI: La objetización de las personas",
-    "section": "Apéndice: comprobaciones y errores en JavaScript (NECESARIO PARA LA TAREA)",
-    "text": "Apéndice: comprobaciones y errores en JavaScript (NECESARIO PARA LA TAREA)\nEn el desarrollo de la tarea pueden aparecer algunas comprobaciones y mecanismos de control de errores que es necesario saber implementar por cuenta propia. Su inclusión tiene como objetivo facilitar la robustez del código, y forman parte de los contenidos evaluables de la tarea.\n\nUso de Error\nCuando se detecta una situación incorrecta (por ejemplo, un valor no válido o un uso indebido de una clase), se puede lanzar un error utilizando:\nthrow new Error(\"Mensaje de error\");\nEsto indica claramente que algo no es correcto y detiene la ejecución normal del programa.\n\n\nUso de instanceof\nEl operador instanceof se utiliza para comprobar si un objeto ha sido creado a partir de una clase concreta.\nobjeto instanceof Clase\nDevuelve true si el objeto pertenece a esa clase y false en caso contrario.\n\n\nUso de typeof\nEl operador typeof permite comprobar el tipo de datos simples como strings o números.\ntypeof variable\nEjemplos:\ntypeof \"texto\"   // \"string\"\ntypeof 10        // \"number\"\nSe utiliza para validar los datos recibidos por constructores o setters. Para comprobar clases u objetos personalizados debe usarse instanceof, no typeof.",
+    "objectID": "pages/Bloque2/ti.html#ejercicio-2",
+    "href": "pages/Bloque2/ti.html#ejercicio-2",
+    "title": "TI: Ejercicios JS",
+    "section": "Ejercicio 2",
+    "text": "Ejercicio 2\nPartiendo del array arrOriginal, imprima por pantalla la siguiente frase:\n\n\"En el subsistema de software somos x miembros\"\n\ndonde x debe tomar, sucesivamente, cada uno de los valores de arrOriginal.\nImprima por pantalla el resultado.\n\nSalida esperada (ejemplo):\n\nEn el subsistema de software somos 3 miembros\nEn el subsistema de software somos 4 miembros\nEn el subsistema de software somos 2 miembros",
     "crumbs": [
       "Bloque II Programación",
       "Repaso Intensivo",
-      "TAI: La objetización de las personas"
+      "TI: Ejercicios JS"
     ]
   },
   {
-    "objectID": "pages/Bloque2/MAclases.html",
-    "href": "pages/Bloque2/MAclases.html",
-    "title": "MA: Clases ES6",
-    "section": "",
-    "text": "Contenido\nRepaso intensivo de clases en JavaScript (ES6+), orientado a usuarios con experiencia previa en programación y familiarizados con funciones, objetos y arrays.",
+    "objectID": "pages/Bloque2/ti.html#ejercicio-3",
+    "href": "pages/Bloque2/ti.html#ejercicio-3",
+    "title": "TI: Ejercicios JS",
+    "section": "Ejercicio 3",
+    "text": "Ejercicio 3\nPartiendo de arrOriginal, cree un nuevo array llamado arrPositivos que contenga únicamente números positivos.\nUtilice arrPositivos para imprimir por pantalla las frases correspondientes.",
     "crumbs": [
       "Bloque II Programación",
       "Repaso Intensivo",
-      "MA: Clases ES6"
+      "TI: Ejercicios JS"
     ]
   },
   {
-    "objectID": "pages/Bloque2/MAclases.html#programación-orientada-a-objetos-en-javascript",
-    "href": "pages/Bloque2/MAclases.html#programación-orientada-a-objetos-en-javascript",
-    "title": "MA: Clases ES6",
-    "section": "Programación orientada a objetos en JavaScript",
-    "text": "Programación orientada a objetos en JavaScript\nJavaScript es un lenguaje basado en prototipos, pero desde ES6 introduce la sintaxis class, que:\n\nEs azúcar sintáctico sobre el sistema de prototipos\nFacilita la escritura y lectura de código OO\nNo convierte a JS en un lenguaje basado en clases clásicas",
+    "objectID": "pages/Bloque2/ti.html#ejercicio-4",
+    "href": "pages/Bloque2/ti.html#ejercicio-4",
+    "title": "TI: Ejercicios JS",
+    "section": "Ejercicio 4",
+    "text": "Ejercicio 4\nPartiendo de arrPositivos, cree un nuevo array llamado arrValidos que cumpla además el siguiente criterio:\n\nEl número máximo de personas es 10\n\nImprima por pantalla las frases correspondientes a arrValidos.",
     "crumbs": [
       "Bloque II Programación",
       "Repaso Intensivo",
-      "MA: Clases ES6"
+      "TI: Ejercicios JS"
     ]
   },
   {
-    "objectID": "pages/Bloque2/MAclases.html#definición-de-una-clase",
-    "href": "pages/Bloque2/MAclases.html#definición-de-una-clase",
-    "title": "MA: Clases ES6",
-    "section": "Definición de una clase",
-    "text": "Definición de una clase\n\nSintaxis básica\nclass Persona {\n  constructor(nombre, edad) {\n    this.nombre = nombre;\n    this.edad = edad;\n  }\n}\n\nclass: palabra clave\nconstructor: método especial de inicialización\nthis: referencia a la instancia actual",
+    "objectID": "pages/Bloque2/ti.html#ejercicio-5",
+    "href": "pages/Bloque2/ti.html#ejercicio-5",
+    "title": "TI: Ejercicios JS",
+    "section": "Ejercicio 5",
+    "text": "Ejercicio 5\nPartiendo nuevamente de arrOriginal, cree un nuevo array llamado arrFiltrado que contenga únicamente aquellos elementos que cumplan todas las siguientes condiciones:\n\nSean positivos\n\nSean pares\n\nSean menores que 100",
     "crumbs": [
       "Bloque II Programación",
       "Repaso Intensivo",
-      "MA: Clases ES6"
+      "TI: Ejercicios JS"
     ]
   },
   {
-    "objectID": "pages/Bloque2/MAclases.html#creación-de-instancias",
-    "href": "pages/Bloque2/MAclases.html#creación-de-instancias",
-    "title": "MA: Clases ES6",
-    "section": "Creación de instancias",
-    "text": "Creación de instancias\nconst p1 = new Persona(\"Javier\", 45);\nconst p2 = new Persona(\"Ana\", 32);\n\nnew crea un nuevo objeto\nEjecuta automáticamente constructor",
+    "objectID": "pages/Bloque2/ti.html#ejercicio-6",
+    "href": "pages/Bloque2/ti.html#ejercicio-6",
+    "title": "TI: Ejercicios JS",
+    "section": "Ejercicio 6",
+    "text": "Ejercicio 6\nPartiendo de arrFiltrado:\n\nCree un nuevo array llamado arrCubos elevando al cubo cada uno de sus elementos\n\nA partir de arrCubos, cree un nuevo array llamado arrCubosFiltrados que contenga únicamente aquellos valores cuyo resultado termine en 0.",
     "crumbs": [
       "Bloque II Programación",
       "Repaso Intensivo",
-      "MA: Clases ES6"
+      "TI: Ejercicios JS"
     ]
   },
   {
-    "objectID": "pages/Bloque2/MAclases.html#métodos-de-instancia",
-    "href": "pages/Bloque2/MAclases.html#métodos-de-instancia",
-    "title": "MA: Clases ES6",
-    "section": "Métodos de instancia",
-    "text": "Métodos de instancia\nLos métodos se definen sin function y se comparten vía prototipo.\nclass Persona {\n  constructor(nombre, edad) {\n    this.nombre = nombre;\n    this.edad = edad;\n  }\n\n  saludar() {\n    return `Hola, soy ${this.nombre}`;\n  }\n\n  cumple() {\n    this.edad++;\n  }\n}\nUso:\np1.saludar();\np1.cumple();",
+    "objectID": "pages/Bloque2/ti.html#ejercicio-7",
+    "href": "pages/Bloque2/ti.html#ejercicio-7",
+    "title": "TI: Ejercicios JS",
+    "section": "Ejercicio 7",
+    "text": "Ejercicio 7\nPartiendo de arrCubosFiltrados, cree un nuevo array llamado arrFinal añadiendo el valor 21.",
     "crumbs": [
       "Bloque II Programación",
       "Repaso Intensivo",
-      "MA: Clases ES6"
+      "TI: Ejercicios JS"
     ]
   },
   {
-    "objectID": "pages/Bloque2/MAclases.html#métodos-vs-funciones-flecha",
-    "href": "pages/Bloque2/MAclases.html#métodos-vs-funciones-flecha",
-    "title": "MA: Clases ES6",
-    "section": "Métodos vs funciones flecha",
-    "text": "Métodos vs funciones flecha\nNo usar arrow functions como métodos de clase (salvo casos concretos):\nclass MalEjemplo {\n  metodo = () =&gt; {\n    console.log(this);\n  };\n}\n\nRompe el modelo prototípico\nMayor consumo de memoria",
+    "objectID": "pages/Bloque2/ti.html#ejercicio-8",
+    "href": "pages/Bloque2/ti.html#ejercicio-8",
+    "title": "TI: Ejercicios JS",
+    "section": "Ejercicio 8",
+    "text": "Ejercicio 8\nPartiendo de arrFinal, cree un nuevo array independiente llamado arrCopia, de forma que cualquier modificación posterior no afecte a arrFinal.",
     "crumbs": [
       "Bloque II Programación",
       "Repaso Intensivo",
-      "MA: Clases ES6"
+      "TI: Ejercicios JS"
     ]
   },
   {
-    "objectID": "pages/Bloque2/MAclases.html#propiedades-públicas",
-    "href": "pages/Bloque2/MAclases.html#propiedades-públicas",
-    "title": "MA: Clases ES6",
-    "section": "Propiedades públicas",
-    "text": "Propiedades públicas\nLas propiedades se suelen declarar en el constructor:\nclass Coche {\n  constructor(marca, km = 0) {\n    this.marca = marca;\n    this.km = km;\n  }\n}\nUso:\nconst c = new Coche(\"Toyota\");\nc.km += 100;",
+    "objectID": "pages/Bloque2/intensivo.html",
+    "href": "pages/Bloque2/intensivo.html",
+    "title": "Repaso Intensivo JS",
+    "section": "",
+    "text": "Contenido\nRepaso intensivo de JavaScript, tiene como objetivo dar una introducción del lenguaje, a usuarios que ya tengan experiencia previa programando.\nDescargar archivo de código (click derecho guardar enlace como)",
     "crumbs": [
       "Bloque II Programación",
       "Repaso Intensivo",
-      "MA: Clases ES6"
+      "Repaso Intensivo JS"
     ]
   },
   {
-    "objectID": "pages/Bloque2/MAclases.html#getters-y-setters",
-    "href": "pages/Bloque2/MAclases.html#getters-y-setters",
-    "title": "MA: Clases ES6",
-    "section": "Getters y setters",
-    "text": "Getters y setters\nPermiten acceder como propiedades a lógica encapsulada.\nclass Rectangulo {\n  constructor(ancho, alto) {\n    this.ancho = ancho;\n    this.alto = alto;\n  }\n\n  get area() {\n    return this.ancho * this.alto;\n  }\n\n  set escala(factor) {\n    this.ancho *= factor;\n    this.alto *= factor;\n  }\n}\nUso:\nconst r = new Rectangulo(2, 3);\nr.area;      // 6\nr.escala = 2;\nr.area;      // 24",
+    "objectID": "pages/Bloque2/intensivo.html#variables-y-tipos-básicos",
+    "href": "pages/Bloque2/intensivo.html#variables-y-tipos-básicos",
+    "title": "Repaso Intensivo JS",
+    "section": "Variables y tipos básicos",
+    "text": "Variables y tipos básicos\n\nDeclaración de variables\nEn JavaScript moderno se utilizan let y const (evitar var).\n\nlet: permite reasignación\nconst: no permite reasignación\nconst NO significa inmutable\nJavaScript es de tipado dinámico\nEl tipo depende del valor, no de la variable\n\nTipos primitivos:\n\nstring\nnumber\nboolean\nnull\nundefined\n\nlet edad = 12;        // number\nlet altura = 1.8;     // number\nlet nombre = \"Javier\"; // string\nlet casado = false;   // boolean\n\nlet ordenador = null; // ausencia intencionada de valor\nlet direccion;        // undefined\n\n\nUso de const\nconst dni = \"1235678L\";\ndni = \"23\"; // Error\n\nconst no significa inmutable\nconst dni = \"12345678L\";\ndni = \"87654321X\"; // Error\nPero:\nconst arr = [1, 2, 3];\narr.push(4); // permitido\n\n\n\nTipado dinámico\n\nJavaScript es de tipado dinámico\nEl tipo depende del valor, no de la variable\nUna variable puede cambiar de tipo durante la ejecución\n\nlet x = \"hola\";\nx = 42;      // válido\nx = true;    // válido\nEste comportamiento se conoce como shadowing o cambio dinámico de tipo. En el ejemplo anterior solo existe una variable X cuyo tipo pasa de Number a boolean",
     "crumbs": [
       "Bloque II Programación",
       "Repaso Intensivo",
-      "MA: Clases ES6"
+      "Repaso Intensivo JS"
     ]
   },
   {
-    "objectID": "pages/Bloque2/MAclases.html#herencia-extends",
-    "href": "pages/Bloque2/MAclases.html#herencia-extends",
-    "title": "MA: Clases ES6",
-    "section": "Herencia (extends)",
-    "text": "Herencia (extends)\nJavaScript soporta herencia simple.\nclass Empleado extends Persona {\n  constructor(nombre, edad, salario) {\n    super(nombre, edad);\n    this.salario = salario;\n  }\n\n  salarioAnual() {\n    return this.salario * 12;\n  }\n}\n\nextends: herencia\nsuper(): llama al constructor padre (obligatorio)",
+    "objectID": "pages/Bloque2/intensivo.html#null-vs-undefined",
+    "href": "pages/Bloque2/intensivo.html#null-vs-undefined",
+    "title": "Repaso Intensivo JS",
+    "section": "null vs undefined",
+    "text": "null vs undefined\n\nundefined: variable declarada pero sin valor\nnull: ausencia intencionada de valor\n\nJavaScript distingue entre:\n\n“todavía no hay valor” y “no hay valor”\n\nconsole.log(ordenador); // null\nconsole.log(direccion); // undefined",
     "crumbs": [
       "Bloque II Programación",
       "Repaso Intensivo",
-      "MA: Clases ES6"
+      "Repaso Intensivo JS"
     ]
   },
   {
-    "objectID": "pages/Bloque2/MAclases.html#sobrescritura-de-métodos",
-    "href": "pages/Bloque2/MAclases.html#sobrescritura-de-métodos",
-    "title": "MA: Clases ES6",
-    "section": "Sobrescritura de métodos",
-    "text": "Sobrescritura de métodos\nclass Empleado extends Persona {\n  saludar() {\n    return `Empleado: ${this.nombre}`;\n  }\n}\n\nSi el método existe en la clase hija, sobrescribe al del padre",
+    "objectID": "pages/Bloque2/intensivo.html#aritmética-y-operadores",
+    "href": "pages/Bloque2/intensivo.html#aritmética-y-operadores",
+    "title": "Repaso Intensivo JS",
+    "section": "Aritmética y operadores",
+    "text": "Aritmética y operadores\n\nOperadores aritméticos\nlet a = 12, b = 4;\n\na + b\na - b\na * b\na / b\na % b\na = a + b;\na += b;\na -= b;\na *= b;\n\nPotencias\na**b  // Power\nIncrementos:\nb--; b++;\n--b; ++b;\n\n\n\nStrings y concatenación\na = \"hola \";\nb = \"mundo\";\na + b;\n\n\nComparación\n\n== compara valor (evitar)\n=== compara valor y tipo (usar)\n\n\n\nOperadores lógicos\n\n&& AND\n|| OR\n! NOT\n\n\n\nComparaciones\n\n== compara solo valor (evitar)\n=== compara valor y tipo (usar siempre, aunque sea innecesario)\n\n5 == \"5\";   // true\n5 === \"5\";  // false\n\n\nOperadores lógicos\n\n&& AND\n|| OR\n! NOT\n\n(a &gt; 0) && (b &lt; 10)",
     "crumbs": [
       "Bloque II Programación",
       "Repaso Intensivo",
-      "MA: Clases ES6"
+      "Repaso Intensivo JS"
     ]
   },
   {
-    "objectID": "pages/Bloque2/MAclases.html#uso-de-super-en-métodos",
-    "href": "pages/Bloque2/MAclases.html#uso-de-super-en-métodos",
-    "title": "MA: Clases ES6",
-    "section": "Uso de super en métodos",
-    "text": "Uso de super en métodos\nclass Empleado extends Persona {\n  saludar() {\n    return super.saludar() + \" (empleado)\";\n  }\n}\nPermite reutilizar lógica del padre.",
+    "objectID": "pages/Bloque2/intensivo.html#estructuras-de-control",
+    "href": "pages/Bloque2/intensivo.html#estructuras-de-control",
+    "title": "Repaso Intensivo JS",
+    "section": "Estructuras de control",
+    "text": "Estructuras de control\n\nCondicionales\nif (a === b) {\n\n} else if (a &gt; b) {\n\n} else {\n\n}\n\n\nBucles\n\nwhile\nlet x = 20;\nwhile (x &lt; 50) {\n  x += 10;\n}\n\n\nfor\nfor (let i = 0; i &lt; 10; i++) {\n  // iteración\n}",
     "crumbs": [
       "Bloque II Programación",
       "Repaso Intensivo",
-      "MA: Clases ES6"
+      "Repaso Intensivo JS"
     ]
   },
   {
-    "objectID": "pages/Bloque2/MAclases.html#métodos-estáticos",
-    "href": "pages/Bloque2/MAclases.html#métodos-estáticos",
-    "title": "MA: Clases ES6",
-    "section": "Métodos estáticos",
-    "text": "Métodos estáticos\nPertenecen a la clase, no a las instancias.\nclass Utilidades {\n  static suma(a, b) {\n    return a + b;\n  }\n}\nUso:\nUtilidades.suma(2, 3);\nNo accesible desde instancias:\nnew Utilidades().suma; // undefined",
+    "objectID": "pages/Bloque2/intensivo.html#funciones",
+    "href": "pages/Bloque2/intensivo.html#funciones",
+    "title": "Repaso Intensivo JS",
+    "section": "Funciones",
+    "text": "Funciones\n\nEncapsulan lógica reutilizable\nPueden recibir parámetros\nPueden devolver valores\nSon ciudadanos de primera clase\n\n\nFunción clásica\nfunction sumar2(num, num2 = 2) {\n  num += num2;\n  return num;\n}\nPaso de variables por valor:\nlet a = 7;\nlet b = sumar2(a, a); // 14\na; // 7\n\n\nFunciones flecha y orden superior\nconst concatenarHola = input =&gt; input + \" Hola\";\nconcatenarHola(\"sdf\");\nfunction ejecuta(fun) {\n  fun();\n}\n\nejecuta(() =&gt; { console.log(\"hola\"); });\n\n\nFunciones propias de strings\nlet a = \"jsadfsadf \";\na.trim();   // Suprimir espacios adicionales\na.split('a');    // Divide el string en un array c\na.length;\n\n\nFunciones flecha\nconst cuadrado = n =&gt; n ** 2;\nForma extendida:\nconst cuadrado = (n) =&gt; {\n  return n ** 2;\n};\n\n\nFunciones como ciudadanos de primera clase\nLas funciones pueden:\n\nAsignarse a variables\nPasarse como argumentos\nDevolverse como resultado\n\nfunction ejecutar(f) {\n  f();\n}\n\nejecutar(() =&gt; console.log(\"Hola\"));",
     "crumbs": [
       "Bloque II Programación",
       "Repaso Intensivo",
-      "MA: Clases ES6"
+      "Repaso Intensivo JS"
     ]
   },
   {
-    "objectID": "pages/Bloque2/MAclases.html#campos-privados",
-    "href": "pages/Bloque2/MAclases.html#campos-privados",
-    "title": "MA: Clases ES6",
-    "section": "Campos privados (#)",
-    "text": "Campos privados (#)\nIntroducidos en ES2022.\nclass Cuenta {\n  #saldo = 0;\n\n  ingresar(cantidad) {\n    this.#saldo += cantidad;\n  }\n\n  getSaldo() {\n    return this.#saldo;\n  }\n}\n\n#saldo es realmente privado\nNo accesible fuera de la clase",
+    "objectID": "pages/Bloque2/intensivo.html#arrays-base",
+    "href": "pages/Bloque2/intensivo.html#arrays-base",
+    "title": "Repaso Intensivo JS",
+    "section": "Arrays (base)",
+    "text": "Arrays (base)\n\nLista ordenada\nÍndices empiezan en 0\nPropiedad length\n\nlet cajon = [8, \"hola\", true, () =&gt; { return 7 }];\n\nAcceso\ncajon[0]  // 8\ncajon[2] = \"rino\";       // modificamos la entrada 2  \n\n\nAdiciones\ncajon.push(false);\ncajon.unshift(0);\n\n\nEliminaciones\ncajon.pop();\ncajon.shift();\ncajon.length;",
     "crumbs": [
       "Bloque II Programación",
       "Repaso Intensivo",
-      "MA: Clases ES6"
+      "Repaso Intensivo JS"
     ]
   },
   {
-    "objectID": "pages/Bloque2/MAclases.html#clases-y-objetos-literales",
-    "href": "pages/Bloque2/MAclases.html#clases-y-objetos-literales",
-    "title": "MA: Clases ES6",
-    "section": "Clases y objetos literales",
-    "text": "Clases y objetos literales\nEsto:\nconst a = {\n  x: 1,\n  inc() { this.x++; }\n};\nEs equivalente conceptualmente a una instancia única.\nUsar class cuando:\n\nHay múltiples instancias\nExiste estado y comportamiento común\nSe necesita herencia o abstracción",
+    "objectID": "pages/Bloque2/intensivo.html#objetos",
+    "href": "pages/Bloque2/intensivo.html#objetos",
+    "title": "Repaso Intensivo JS",
+    "section": "Objetos",
+    "text": "Objetos\nUn objeto representa una entidad mediante estructura clave–valor.\nlet gente = { pepe: 7, juanes: 8, andreas: 10, fran: [4, 2] };\n\nModificación\ngente.andreas = 32;\ngente.pepe++;\n\n\nAcceso dinámico\nlet nombre = \"pablo\";\n\ngente.nombre;      // undefined\ngente[nombre] = 2; // añade propiedad",
     "crumbs": [
       "Bloque II Programación",
       "Repaso Intensivo",
-      "MA: Clases ES6"
+      "Repaso Intensivo JS"
     ]
   },
   {
-    "objectID": "pages/Bloque2/MAclases.html#clases-prototípicas-pre-es6",
-    "href": "pages/Bloque2/MAclases.html#clases-prototípicas-pre-es6",
-    "title": "MA: Clases ES6",
-    "section": "Clases prototípicas (pre-ES6)",
-    "text": "Clases prototípicas (pre-ES6)\nJavaScript siempre ha sido un lenguaje basado en prototipos. Antes de ES6, la creación de objetos y herencia se realizaba mediante funciones constructoras y el prototipo.\nEn este repaso no entraremos en detalle en este modelo.\nBasta con saber que:\n\nLas clases ES6 no sustituyen al modelo prototípico\nSon una capa de abstracción sobre él\nTodo el comportamiento sigue resolviéndose vía prototipos\n\nPara profundizar:\n\nhttps://developer.mozilla.org/es/docs/Web/JavaScript/Inheritance_and_the_prototype_chain\n\nfunction Persona(nombre) {\nthis.nombre = nombre;\n}\n\nPersona.prototype.saludar = function () {\nreturn this.nombre;\n};\nvs\nclass Persona {\n  constructor(nombre) {\n    this.nombre = nombre;\n  }\n\n  saludar() {\n    return this.nombre;\n  }\n}",
+    "objectID": "pages/Bloque2/intensivo.html#referencias-vs-valores",
+    "href": "pages/Bloque2/intensivo.html#referencias-vs-valores",
+    "title": "Repaso Intensivo JS",
+    "section": "Referencias vs valores",
+    "text": "Referencias vs valores\n\nCopia por valor\nlet a = 5;\nlet b = a;\nb++;\na no cambia.\n\n\nCopia por referencia\nlet e3 = [\"juan\", \"pepe\"];\nlet d = e3;\n\nd.push(\"andrés\");\nAmbas variables apuntan al mismo array.\nconst poblacion = gente;\npoblacion[\"julio\"] = 8;\nLa copia por refencia se aplica a objetos y arrays\nlet x = [\"juan\", \"pepe\"];\nlet y = x;\n\ny.push(\"andrés\"); // Se añade en x e y pues son el mismo objeto\nAmbas variables apuntan al mismo objeto.",
     "crumbs": [
       "Bloque II Programación",
       "Repaso Intensivo",
-      "MA: Clases ES6"
+      "Repaso Intensivo JS"
     ]
   },
   {
-    "objectID": "pages/Bloque3/ps.html",
-    "href": "pages/Bloque3/ps.html",
-    "title": "Proyecto Subsistema",
-    "section": "",
-    "text": "Desarrollar una pequeña aplicación web para gestionar una lista de tareas utilizando HTML, CSS y JavaScript, trabajando directamente con el DOM.\nbase",
+    "objectID": "pages/Bloque2/intensivo.html#spread-operator-...",
+    "href": "pages/Bloque2/intensivo.html#spread-operator-...",
+    "title": "Repaso Intensivo JS",
+    "section": "Spread operator (...)",
+    "text": "Spread operator (...)\n\nExpande arrays u objetos\nPermite copiar y combinar\nCopia superficial\n\n\nArrays\nJavier es añadido a arr2, pero no a arr.\nlet arr = [\"Alice\", \"Bob\", \"Kevin\"];\nlet arr2 = [...arr, \"Javier\"];\n\n\nObjetos\nOcurre lo mismo con los objetos\nconst sociedad = { ...poblacion, julia: 12 };",
     "crumbs": [
-      "Bloque III Interacción",
-      "Semana 7",
-      "Proyecto Subsistema"
+      "Bloque II Programación",
+      "Repaso Intensivo",
+      "Repaso Intensivo JS"
     ]
   },
   {
-    "objectID": "pages/Bloque3/ps.html#objetivo",
-    "href": "pages/Bloque3/ps.html#objetivo",
-    "title": "Proyecto Subsistema",
-    "section": "",
-    "text": "Desarrollar una pequeña aplicación web para gestionar una lista de tareas utilizando HTML, CSS y JavaScript, trabajando directamente con el DOM.\nbase",
+    "objectID": "pages/Bloque2/intensivo.html#funciones-de-array-js-moderno",
+    "href": "pages/Bloque2/intensivo.html#funciones-de-array-js-moderno",
+    "title": "Repaso Intensivo JS",
+    "section": "Funciones de array (JS moderno)",
+    "text": "Funciones de array (JS moderno)\nVamos a trabajar con un ejemplo completo, típico en programación funcional.\n\nDatos de partida\nlet y = [2, 4, 6, 7];\n\n\nFunción cuadrado\nDefinimos una función que, dado un número, devuelve su cuadrado:\nconst cuadrado = n =&gt; n ** 2;\nEs equivalente a:\nconst cuadrado = (n) =&gt; {\n  return n ** 2;\n};\n\n\nmap: transformar elementos\nAplicamos map para obtener un nuevo array con los cuadrados:\nconst y2 = y.map(cuadrado);\nResultado:\n[4, 16, 36, 49]\n\n\nfilter: seleccionar elementos\nDefinimos una función que comprueba si un número es par:\nconst even = n =&gt; n % 2 === 0;\nLa usamos con filter:\nconst yEven = y.filter(even);\n\n\nEncadenamiento (estilo declarativo)\nPodemos encadenar ambas operaciones:\ny\n  .map(n =&gt; n ** 2)\n  .filter(n =&gt; n % 2 === 0);\n\nEste estilo es declarativo: describimos qué queremos hacer con los datos, no cómo recorrerlos.",
     "crumbs": [
-      "Bloque III Interacción",
-      "Semana 7",
-      "Proyecto Subsistema"
+      "Bloque II Programación",
+      "Repaso Intensivo",
+      "Repaso Intensivo JS"
     ]
   },
   {
-    "objectID": "pages/Bloque3/ps.html#qué-se-quiere-hacer",
-    "href": "pages/Bloque3/ps.html#qué-se-quiere-hacer",
-    "title": "Proyecto Subsistema",
-    "section": "Qué se quiere hacer",
-    "text": "Qué se quiere hacer\n\nCrear una página web que permita añadir tareas.\nCada tarea debe tener:\n\nUn texto descriptivo.\nUn responsable (Software, Hardware, Partners, Otros).\n\nLas tareas deben mostrarse en una lista.\nAl hacer click sobre una tarea, esta debe eliminarse.\nLa página no debe recargarse al añadir o eliminar tareas.",
-    "crumbs": [
-      "Bloque III Interacción",
-      "Semana 7",
-      "Proyecto Subsistema"
-    ]
+    "objectID": "pages/Bloque3/intermedio.html#controlled-inputs",
+    "href": "pages/Bloque3/intermedio.html#controlled-inputs",
+    "title": "React III",
+    "section": "Controlled Inputs",
+    "text": "Controlled Inputs\nMotivación\nHasta ahora se ha trabajado con eventos capturando acciones del usuario.\nSin embargo, al trabajar con formularios surge una cuestión fundamental:\n\n¿Quién controla el valor del input?\n¿El DOM o React?"
   },
   {
-    "objectID": "pages/Bloque3/ps.html#requisitos-técnicos",
-    "href": "pages/Bloque3/ps.html#requisitos-técnicos",
-    "title": "Proyecto Subsistema",
-    "section": "Requisitos técnicos",
-    "text": "Requisitos técnicos\n\nLa lógica debe implementarse manipulando el DOM directamente (document.createElement, appendChild, addEventListener, etc.).\nHTML básico para la estructura.\nCSS libre, se espera que se use de forma creativa para mejorar el diseño.\nJavaScript en un archivo separado o en un &lt;script&gt;.",
-    "crumbs": [
-      "Bloque III Interacción",
-      "Semana 7",
-      "Proyecto Subsistema"
-    ]
+    "objectID": "pages/Bloque3/intermedio.html#hooks-repaso",
+    "href": "pages/Bloque3/intermedio.html#hooks-repaso",
+    "title": "React III",
+    "section": "Hooks (Repaso)",
+    "text": "Hooks (Repaso)\n\nFunción especial que permite modificar las propiedades internas de los componentes\nCaracterísticas avanzadas\nModificación del life-cycle\nNormalmente forma use____"
   },
-  {
-    "objectID": "pages/Bloque3/ps.html#importante",
-    "href": "pages/Bloque3/ps.html#importante",
-    "title": "Proyecto Subsistema",
-    "section": "Importante",
-    "text": "Importante\n\nLa solución mínima funcional es sencilla.\nSe espera que el alumnado mejore notablemente el aspecto visual usando CSS.\nEl diseño, la usabilidad y la presentación formarán parte de la evaluación.\nAquellos que completen la funcionalidad básica de la tarea podrán preguntarle al profesor como mejorar la tarea o que agregar para ampliar funcionalidades",
-    "crumbs": [
-      "Bloque III Interacción",
-      "Semana 7",
-      "Proyecto Subsistema"
-    ]
+  {
+    "objectID": "pages/Bloque3/intermedio.html#useeffect",
+    "href": "pages/Bloque3/intermedio.html#useeffect",
+    "title": "React III",
+    "section": "useEffect",
+    "text": "useEffect\n\nuseEffect es un Hook que permite ejecutar efectos secundarios dentro de un componente funcional.\nUn efecto secundario es cualquier operación que no sea simplemente devolver JSX (por ejemplo: peticiones a un servidor, temporizadores, suscripciones).\nSe ejecuta después de que el componente se renderiza en el DOM."
   },
   {
-    "objectID": "pages/Bloque3/ps.html#no-es-necesario",
-    "href": "pages/Bloque3/ps.html#no-es-necesario",
-    "title": "Proyecto Subsistema",
-    "section": "No es necesario",
-    "text": "No es necesario\n\nGuardar las tareas al recargar la página.\nAutenticación de usuarios.\nBase de datos o backend.",
-    "crumbs": [
-      "Bloque III Interacción",
-      "Semana 7",
-      "Proyecto Subsistema"
-    ]
+    "objectID": "pages/Bloque3/intermedio.html#fetch",
+    "href": "pages/Bloque3/intermedio.html#fetch",
+    "title": "React III",
+    "section": "fetch()",
+    "text": "fetch()\nHasta ahora nuestros componentes eran completamente locales.\nSin embargo, en aplicaciones reales necesitamos:\n\nDescargar datos\n\nConectarnos a servidores\n\nTrabajar con APIs externas\n\nPara ello utilizamos fetch()."
   },
   {
-    "objectID": "pages/Bloque3/ps.html#entregable",
-    "href": "pages/Bloque3/ps.html#entregable",
-    "title": "Proyecto Subsistema",
-    "section": "Entregable",
-    "text": "Entregable\n\nArchivos index.html, script.js y style.css.\nEl proyecto debe poder abrirse directamente en el navegador.",
-    "crumbs": [
-      "Bloque III Interacción",
-      "Semana 7",
-      "Proyecto Subsistema"
-    ]
+    "objectID": "pages/Bloque3/intermedio.html#async-y-await",
+    "href": "pages/Bloque3/intermedio.html#async-y-await",
+    "title": "React III",
+    "section": "async y await",
+    "text": "async y await\nHasta ahora hemos utilizado fetch() con encadenamiento.\nExiste una forma más clara y estructurada de escribir código asíncrono:\n\nasync\nawait\n\nSu objetivo es hacer que el código sea más legible."
   },
   {
-    "objectID": "pages/Bloque3/t6.html",
-    "href": "pages/Bloque3/t6.html",
-    "title": "T6: Romancero Gitano I",
-    "section": "",
-    "text": "El objetivo de esta tarea es aplicar los conceptos básicos de HTML, CSS y JavaScript (DOM) para crear una página web interactiva que muestre poemas del Romancero gitano de Federico García Lorca y modifique su apariencia visual en función de las diferentes metáforas.\nResultado esperado",
-    "crumbs": [
-      "Bloque III Interacción",
-      "Semana 6",
-      "T6: Romancero Gitano I"
-    ]
+    "objectID": "pages/Bloque3/intermedio.html#ejemplo-con-la-pokeapi",
+    "href": "pages/Bloque3/intermedio.html#ejemplo-con-la-pokeapi",
+    "title": "React III",
+    "section": "Ejemplo con la Pokeapi",
+    "text": "Ejemplo con la Pokeapi\nPoke-API\nDownload Code"
   },
   {
-    "objectID": "pages/Bloque3/t6.html#objetivo-de-la-tarea",
-    "href": "pages/Bloque3/t6.html#objetivo-de-la-tarea",
-    "title": "T6: Romancero Gitano I",
+    "objectID": "pages/Bloque3/Intermedio.html",
+    "href": "pages/Bloque3/Intermedio.html",
+    "title": "React III",
     "section": "",
-    "text": "El objetivo de esta tarea es aplicar los conceptos básicos de HTML, CSS y JavaScript (DOM) para crear una página web interactiva que muestre poemas del Romancero gitano de Federico García Lorca y modifique su apariencia visual en función de las diferentes metáforas.\nResultado esperado",
+    "text": "Contenido",
     "crumbs": [
       "Bloque III Interacción",
-      "Semana 6",
-      "T6: Romancero Gitano I"
+      "Semana 9",
+      "React III"
     ]
   },
   {
-    "objectID": "pages/Bloque3/t6.html#estructura-html",
-    "href": "pages/Bloque3/t6.html#estructura-html",
-    "title": "T6: Romancero Gitano I",
-    "section": "Estructura HTML",
-    "text": "Estructura HTML\nEl documento HTML debe:\n\nEstar correctamente estructurado (&lt;!DOCTYPE&gt;, &lt;html&gt;, &lt;head&gt;, &lt;body&gt;).\nContener un contenedor principal centrado horizontalmente.\nIncluir, en este orden:\n\nUn elemento para mostrar información métrica del poema (número de estrofas y versos).\nUn elemento para el título del poema.\nUn elemento para el texto del poema, respetando los saltos de verso utilizando la etiqueta &lt;pre&gt;.\nUn botón que permita cambiar de poema.\n\n\nNo debe utilizarse ningún framework ni librería externa.",
+    "objectID": "pages/Bloque3/Intermedio.html#controlled-inputs",
+    "href": "pages/Bloque3/Intermedio.html#controlled-inputs",
+    "title": "React III",
+    "section": "Controlled Inputs",
+    "text": "Controlled Inputs\n\nMotivación\nHasta ahora se ha trabajado con eventos capturando acciones del usuario.\nSin embargo, al trabajar con formularios surge una cuestión fundamental:\n\n¿Quién controla el valor del input?\n¿El DOM o React?\n\nRecordemos que en HTML puro o, el valor de un &lt;input&gt; está gestionado directamente por el DOM.\nEn React, podemos hacer que el valor del input esté controlado por el estado del componente.\nA esto lo llamamos controlled input.\n\n\n¿Qué es un controlled input?\nUn controlled input es un elemento de formulario cuyo valor:\n\nEstá almacenado en el estado del componente\nSe actualiza mediante un evento (onChange)\nSe renderiza utilizando ese mismo estado\n\nÚnica fuente de verdad (single source of truth).\n\n\nEstructura del componente controlled\nimport { useState } from \"react\";\nfunction FormularioNombre() {\n\n  const [nombre, setNombre] = useState(\"\");\n\n  function manejarCambio(event) {\n    setNombre(event.target.value);\n  }\n\n  return (\n    &lt;div&gt;\n      &lt;input type=\"text\" \n       value={nombre}\n        onChange={manejarCambio}\n      /&gt;\n      &lt;p&gt;El nombre introducido es: {nombre}&lt;/p&gt;\n    &lt;/div&gt;\n  );\n}\n\nAnálisis del ejemplo\nEl valor del input se sincroniza con el estado\n\nDeclaramos una variable de estado: nombre\nAsociamos el atributo value del input a ese estado\nCapturamos el evento onChange\nActualizamos el estado con setNombre\n\nCada vez que el estado cambia: El componente se vuelve a ejecutar El JSX se vuelve a generar El valor del input se sincroniza con el estado\n\n\n\nEjemplo Formulario\nimport { useState } from \"react\";\n\nfunction FormularioSimple() {\n\n  const [email, setEmail] = useState(\"\");\n\n  function handleChange(event) {\n    setEmail(event.target.value);\n  }\n\n  function handleSubmit(event) {\n    event.preventDefault();   // Evita la recarga del navegador\n\n    console.log(\"Formulario enviado\");\n    console.log(\"Email:\", email);\n\n    setEmail(\"\");  // Limpieza opcional del campo\n  }\n\n  return (\n    &lt;form onSubmit={handleSubmit}&gt;\n      &lt;input \n        type=\"email\"\n        value={email}\n        onChange={handleChange}\n      /&gt;\n      &lt;button type=\"submit\"&gt;Enviar&lt;/button&gt;\n    &lt;/form&gt;\n  );\n}\nReferencia: https://es.react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable",
     "crumbs": [
       "Bloque III Interacción",
-      "Semana 6",
-      "T6: Romancero Gitano I"
+      "Semana 9",
+      "React III"
     ]
   },
   {
-    "objectID": "pages/Bloque3/t6.html#javascript",
-    "href": "pages/Bloque3/t6.html#javascript",
-    "title": "T6: Romancero Gitano I",
-    "section": "JavaScript",
-    "text": "JavaScript\n\nDatos\nEn JavaScript se debe definir un array de objetos, donde cada objeto represente un poema y tenga al menos:\n\nUn título.\nEl texto del poema como una cadena de texto, usando saltos de línea para los versos.\n\nEl cambio de poema debe hacerse recorriendo este array de forma cíclica (cola circular) mediante el botón.\nDescargar poemas (click derecho guardar enlace como)\n\n\nManipulación del DOM\nEl comportamiento de la página debe implementarse exclusivamente con DOM nativo, cumpliendo lo siguiente:\n\nTodas las funciones deben declararse como arrow functions.\nAl pulsar el botón:\n\nSe actualiza el título.\nSe actualiza el texto del poema.\nSe modifica el formato del fondo.\nSe recalculan y muestran:\n\nNúmero de versos.\nNúmero de estrofas (bloques separados por líneas en blanco).\n\n\n\nEl cálculo debe realizarse a partir del texto del poema, no con valores predefinidos.",
+    "objectID": "pages/Bloque3/Intermedio.html#hooks-repaso",
+    "href": "pages/Bloque3/Intermedio.html#hooks-repaso",
+    "title": "React III",
+    "section": "Hooks (Repaso)",
+    "text": "Hooks (Repaso)\n\nFunción especial que permite modificar las propiedades internas de los componentes\nCaracterísticas avanzadas\nModificación del life-cycle\nNormalmente forma use____",
     "crumbs": [
       "Bloque III Interacción",
-      "Semana 6",
-      "T6: Romancero Gitano I"
+      "Semana 9",
+      "React III"
     ]
   },
   {
-    "objectID": "pages/Bloque3/t6.html#css",
-    "href": "pages/Bloque3/t6.html#css",
-    "title": "T6: Romancero Gitano I",
-    "section": "CSS",
-    "text": "CSS\nLorca utiliza las metáforas y la alegoría como elemento principal sobre el que construye sus poemas, al analizar profundamente descubrimos que siempre recurre a las mismas metáforas.\nEl color no se utiliza aquí solo como elemento decorativo, sino como un recurso semántico: cada color representa un símbolo literario presente en el poema.\nDesde el punto de vista técnico: - Los colores de fondo y de texto deben definirse en clases CSS. - JavaScript no decide colores, únicamente decide qué clase aplicar según el contenido del poema.\n\nPalabras clave y colores asociados\nSe debe detectar el texto del poema las siguientes palabras clave y aplicar el color de fondo correspondiente:\n\nguardia civil → fondo verde militar\nsangre → fondo granate oscuro\ncaballo → fondo color tierra\ncuchillo / navaja → fondo plateado\n\nEl color del texto debe elegirse siempre de forma que exista contraste suficiente con el fondo y se garantice la legibilidad.\nSi el poema contiene varias palabras clave, solo debe aplicarse un único estilo, siguiendo un orden de prioridad definido previamente.\nSi el poema no contiene ninguna de estas palabras, se aplicará un estilo por defecto con colores aleatorios.",
+    "objectID": "pages/Bloque3/Intermedio.html#useeffect",
+    "href": "pages/Bloque3/Intermedio.html#useeffect",
+    "title": "React III",
+    "section": "useEffect",
+    "text": "useEffect\n\nuseEffect es un Hook que permite ejecutar efectos secundarios dentro de un componente funcional.\nUn efecto secundario es cualquier operación que no sea simplemente devolver JSX (por ejemplo: peticiones a un servidor, temporizadores, suscripciones).\nSe ejecuta después de que el componente se renderiza en el DOM.\n\n\nMétodos de uso de useEffect\n\n1. Sin array de dependencias\nuseEffect(() =&gt; {\n  console.log(\"Se ejecuta en cada render\");\n});\nComportamiento:\n\nSe ejecuta después de cada renderizado.\nNo existe control sobre la frecuencia.\nPuede generar bucles si modifica estado sin control.\n\nInterpretación conceptual:\nEl efecto acompaña siempre al render.\n\n\n2. Con array vacío\nuseEffect(() =&gt; {\n  console.log(\"Se ejecuta solo una vez\");\n}, []);\nComportamiento:\n\nSe ejecuta únicamente tras el primer render.\nEquivalente conceptual al “montaje” del componente.\n\nUso habitual:\n\nPeticiones a servidor\nInicializaciones\nSuscripciones\n\nInterpretación conceptual:\nEl efecto ocurre una única vez al crear el componente.\n\n\n3. Con dependencias específicas\nuseEffect(() =&gt; {\n  console.log(\"Se ejecuta cuando cambia contador\");\n}, [contador]);\nComportamiento:\n\nSe ejecuta tras el primer render.\nSe vuelve a ejecutar cuando cambia alguna variable del array.\n\nInterpretación conceptual:\nEl efecto depende del estado indicado.\nReact compara el valor anterior con el nuevo y decide si debe ejecutar el efecto.",
     "crumbs": [
       "Bloque III Interacción",
-      "Semana 6",
-      "T6: Romancero Gitano I"
+      "Semana 9",
+      "React III"
     ]
   },
   {
-    "objectID": "pages/Bloque3/t6.html#extra-opcional-símbolo-aurora",
-    "href": "pages/Bloque3/t6.html#extra-opcional-símbolo-aurora",
-    "title": "T6: Romancero Gitano I",
-    "section": "Extra opcional: símbolo aurora 🌈",
-    "text": "Extra opcional: símbolo aurora 🌈\nDe forma voluntaria, se puede añadir el símbolo aurora, que tendrá prioridad absoluta sobre todos los demás.\nCuando el poema contenga la palabra aurora, el fondo debe mostrar un degradado animado.\n\nCSS necesario para el extra\n.aurora {\n  background: linear-gradient(120deg,\n    #ff005d,\n    #ff9f1c,\n    #ffee32,\n    #3cff00,\n    #00e5ff,\n    #7a00ff,\n    #ff00c8\n  );\n  background-size: 600% 600%;\n  animation: aurora 10s linear infinite;\n  color: black;\n}\n\n@keyframes aurora {\n  0%   { background-position: 0% 50%; }\n  50%  { background-position: 100% 50%; }\n  100% { background-position: 0% 50%; }\n}",
+    "objectID": "pages/Bloque3/Intermedio.html#fetch",
+    "href": "pages/Bloque3/Intermedio.html#fetch",
+    "title": "React III",
+    "section": "fetch()",
+    "text": "fetch()\nHasta ahora nuestros componentes eran completamente locales.\nSin embargo, en aplicaciones reales necesitamos:\n\nDescargar datos\n\nConectarnos a servidores\n\nTrabajar con APIs externas\n\nPara ello utilizamos fetch().\n\nEjemplo mínimo de fetch\nfetch(\"https://pokeapi.co/api/v2/pokemon/1\")\n  .then(response =&gt; response.json())\n  .then(data =&gt; console.log(data));\nUtiliza las Promises\nInterpretación simple:\n\nSe hace una petición a una URL\n\nSe transforma la respuesta a formato JSON\n\nSe accede a los datos\n\n\n\nfetch() dentro de useEffect\nEn React, lo habitual es realizar la descarga cuando el componente se monta.\nPara ello:\n\nUtilizamos useEffect\nAñadimos array vacío []\nGuardamos los datos en el estado\n\n\n\nEjemplo integrado\nimport { useState, useEffect } from \"react\";\n\nfunction Pokemon() {\n\n  const [pokemon, setPokemon] = useState(null);\n\n  useEffect(() =&gt; {\n\n    fetch(\"https://pokeapi.co/api/v2/pokemon/1\")\n      .then(response =&gt; response.json())\n      .then(data =&gt; setPokemon(data));\n\n  }, []);\n\n  if (!pokemon) return &lt;p&gt;Cargando...&lt;/p&gt;;\n\n  return (\n    &lt;div&gt;\n      &lt;h2&gt;{pokemon.name}&lt;/h2&gt;\n      &lt;img \n        src={pokemon.sprites.front_default} \n        alt={pokemon.name} \n      /&gt;\n    &lt;/div&gt;\n  );\n}\n\n\nFlujo conceptual\n\nRender inicial\n\nSe ejecuta useEffect\n\nSe lanza la petición\n\nSe actualiza el estado\n\nNuevo render con los datos\n\n\n\nAdvertencia importante\nSi eliminamos el array vacío:\nuseEffect(() =&gt; {\n  fetch(\"https://pokeapi.co/api/v2/pokemon/1\")\n    .then(res =&gt; res.json())\n    .then(data =&gt; setPokemon(data));\n});\nEl efecto se ejecutará en cada render.\nComo actualizar estado provoca render, se generará un bucle infinito.\nuseEffect conecta React con el exterior.\nfetch() permite traer datos del exterior.\nEl estado vuelve a controlar el render.\nEn la siguiente sección formalizaremos esto utilizando async / await.",
     "crumbs": [
       "Bloque III Interacción",
-      "Semana 6",
-      "T6: Romancero Gitano I"
+      "Semana 9",
+      "React III"
     ]
   },
   {
-    "objectID": "pages/Bloque3/t6.html#consejos",
-    "href": "pages/Bloque3/t6.html#consejos",
-    "title": "T6: Romancero Gitano I",
-    "section": "Consejos",
-    "text": "Consejos\n\nCentrado de la página (layout clásico)\nToda la página debe estar centrada horizontalmente.\nEl centrado se consigue mediante:\n\nUn contenedor con un ancho máximo definido.\nMárgenes automáticos a izquierda y derecha.\n\nDesde el punto de vista conceptual:\n\nmargin: 0 auto no centra texto, centra bloques.\nEl navegador reparte automáticamente el espacio sobrante a ambos lados del contenedor.\n\n\n\nAnimación del cambio de color\nPara evitar que los cambios de color sean bruscos, se utiliza la propiedad transition en CSS.\nEsta propiedad indica al navegador que los cambios en determinadas propiedades visuales deben hacerse de forma progresiva.\nEjemplo conceptual:\nbody {\n  transition: background-color 0.6s, color 0.6s;\n}\nGracias a esta transición: - Cuando JavaScript cambia una clase o un color, - el navegador interpola automáticamente entre el color anterior y el nuevo.\nNo es necesario programar animaciones en JavaScript: CSS se encarga de todo el efecto visual.\n\n\nBúsqueda de una palabra\nPara buscar si determinada palabra determinada se debe utilizar la función includes de la clase string\n\ntexto = \"hoy nieva\";\n\ntexto.includes(\"nieva\");    //TRUE\ntexto.includes(\"llueve\");   //FALSE\n\n\nGeneración del color aleatorio\nPara la generacióndel color aleatorio de puede utilizar la siguiente función\nconst randomColor = () =&gt; '#' + Math.floor(Math.random() * 16777215).toString(16);\n\n\nConteo versos y estrofas\nEl recuento de versos y estrofas debe hacerse a partir del texto del poema, no con valores escritos a mano. A continuación se dan algunas pistas técnicas para abordar este problema.\n\nConteo de versos\nUn verso puede considerarse, a efectos prácticos en esta tarea, como una línea de texto no vacía.\nUna estrategia habitual consiste en: - Separar el texto por saltos de línea. - Eliminar las líneas vacías o formadas solo por espacios. - Contar cuántas líneas válidas quedan.\nEjemplo orientativo:\nconst versos = texto\n  .split('\\n')\n  .filter(linea =&gt; linea.trim() !== '')\n  .length;\nEste enfoque es suficiente para la mayoría de los poemas del Romancero gitano y evita errores frecuentes.\n\n\nConteo de estrofas\nUna estrofa puede entenderse como un bloque de versos separado de otros bloques por una línea en blanco.\nUna posible estrategia es: - Separar el texto usando dos (o más) saltos de línea consecutivos. - Eliminar bloques vacíos. - Contar los bloques resultantes.\nEjemplo orientativo:\nconst estrofas = texto\n  .split(/\\n\\s*\\n/)\n  .filter(bloque =&gt; bloque.trim() !== '')\n  .length;\nEntrega: un único archivo HTML funcional.",
+    "objectID": "pages/Bloque3/Intermedio.html#async-y-await",
+    "href": "pages/Bloque3/Intermedio.html#async-y-await",
+    "title": "React III",
+    "section": "async y await",
+    "text": "async y await\nHasta ahora hemos utilizado fetch() con encadenamiento.\nExiste una forma más clara y estructurada de escribir código asíncrono:\n\nasync\nawait\n\nSu objetivo es hacer que el código sea más legible.\n\n¿Qué significa async?\n\nSe coloca delante de una función\nIndica que la función trabajará con operaciones asíncronas\n\nasync function ejemplo() {\n  console.log(\"Función asíncrona\");\n}\n\n\n¿Qué significa await?\n\nSolo puede utilizarse dentro de una función async\nDetiene la ejecución hasta que la operación finaliza\nHace que el código se lea de forma secuencial\n\n\n\nEjemplo básico con fetch\nasync function obtenerPokemon() {\n\n  const response = await fetch(\n    \"https://pokeapi.co/api/v2/pokemon/1\"\n  );\n\n  const data = await response.json();\n\n  console.log(data);\n}\nInterpretación conceptual:\n\nSe realiza la petición\nSe espera la respuesta\nSe transforma a JSON\nSe trabaja con los datos\n\nEl código se lee de arriba hacia abajo.\n\n\nasync / await dentro de useEffect\nEn React, lo habitual es declarar una función interna y ejecutarla.\n\n\nEjemplo completo\nimport { useState, useEffect } from \"react\";\n\nfunction Pokemon() {\n\n  const [pokemon, setPokemon] = useState(null);\n\n  useEffect(() =&gt; {\n\n    async function fetchData() {\n\n      const response = await fetch(\n        \"https://pokeapi.co/api/v2/pokemon/1\"\n      );\n\n      const data = await response.json();\n\n      setPokemon(data);\n    }\n\n    fetchData();\n\n  }, []);\n\n  if (!pokemon) return &lt;p&gt;Cargando...&lt;/p&gt;;\n\n  return (\n    &lt;div&gt;\n      &lt;h2&gt;{pokemon.name}&lt;/h2&gt;\n      &lt;img \n        src={pokemon.sprites.front_default} \n        alt={pokemon.name} \n      /&gt;\n    &lt;/div&gt;\n  );\n}\n\n\n¿Por qué no hacer directamente?\nuseEffect(async () =&gt; {\n  ...\n}, []);\nPorque useEffect no debe recibir una función asíncrona directamente.\nPor eso declaramos la función dentro y luego la ejecutamos.\n\n\nFlujo mental con async / await\n\nRender inicial\n\nSe ejecuta useEffect\n\nSe llama a la función asíncrona\n\nawait espera la respuesta\n\nSe actualiza el estado\n\nNuevo render\n\nasync / await no cambia lo que hace el programa.\nSolo cambia la forma de escribirlo:\nMás claro.\nMás estructurado.\nMás fácil de mantener.",
     "crumbs": [
       "Bloque III Interacción",
-      "Semana 6",
-      "T6: Romancero Gitano I"
+      "Semana 9",
+      "React III"
     ]
   },
   {
-    "objectID": "pages/Bloque3/t6.html#recomendaciones-para-afrontar-la-tarea",
-    "href": "pages/Bloque3/t6.html#recomendaciones-para-afrontar-la-tarea",
-    "title": "T6: Romancero Gitano I",
-    "section": "Recomendaciones para afrontar la tarea",
-    "text": "Recomendaciones para afrontar la tarea\nAl enfrentarnos a un proyecto de cierta complejitud, el como afrontarlo resulta de cricial para el desarollo del mismo por ello a a continuación dejo un esquema de implementación modular. Sería mejor no utilizarlo, pero puede ser un buen punto de partida si no se sabe como empezar la app, no es el único proceso de implementación válido ni es más correcto que cualquier otro\n\nEstructura de HTML básica contadores de versos y estrofas placeholders de poema y título y botón\nFormateo CSS parte estática: centrado, tamaño (todo lo que no sea color)\nDefinir clases con colores predeterminados\nLógica interna con JS\n\n\nBuscar palabra\nContar estrofas\nConteo versos\nSelección de clase\nGenerar color aleatorio si procede\n\n\nIntegración con DOM",
+    "objectID": "pages/Bloque3/Intermedio.html#ejemplo-con-la-pokeapi",
+    "href": "pages/Bloque3/Intermedio.html#ejemplo-con-la-pokeapi",
+    "title": "React III",
+    "section": "Ejemplo con la Pokeapi",
+    "text": "Ejemplo con la Pokeapi\nPoke-API\nDownload Code",
     "crumbs": [
       "Bloque III Interacción",
-      "Semana 6",
-      "T6: Romancero Gitano I"
+      "Semana 9",
+      "React III"
     ]
   },
   {
-    "objectID": "pages/Bloque3/MARef.html",
-    "href": "pages/Bloque3/MARef.html",
-    "title": "MA: Uncontrolled fields y useRef",
+    "objectID": "pages/Bloque3/MAentorno.html",
+    "href": "pages/Bloque3/MAentorno.html",
+    "title": "MA: Entorno",
     "section": "",
-    "text": "Por el momento hemos visto dos hooks useState y useEffect, pero recordemos que en React existen más tipos de hooks que por ser menos útiles y debido a la falta de tiempo no son explicados, no obstante si hay alguno digno de mención es useRef o las referencias.\nUna ref es una referencia mutable que permite acceder directamente a un elemento del DOM o almacenar un valor persistente sin provocar un re-render del componente. El siguiente video ilustra su uso. Es un poco largo pero sirve para repasar los otros hooks.\n\n\nCon las ref podemos introducir los uncontrolled fields que nos permiten trabajar de otra forma con los formularios.\n\nSe prefiere la segunda implementación (la que no utiliza referencias) sobre la primera.",
-<<<<<<< HEAD
-    "crumbs": [
-      "Bloque III Interacción",
-      "Semana 9",
-      "MA: *Uncontrolled fields* y `useRef`"
-    ]
+    "text": "Tanto trabajando con React como con JavaScript puede ser útil leer propiedades del navegador, así como almacenar información en los dispositivos locales."
   },
   {
-    "objectID": "pages/Bloque3/dom.html#qué-es-el-dom",
-    "href": "pages/Bloque3/dom.html#qué-es-el-dom",
-    "title": "DOM",
-    "section": "¿Qué es el DOM?",
-    "text": "¿Qué es el DOM?\nEl DOM (Document Object Model) es la representación en memoria que el navegador crea a partir del HTML.\n\nEl HTML es estático\nEl DOM es dinámico\nJavaScript interactúa con el DOM, no con el HTML original\n\n\nEl DOM es la página web viva dentro del navegador."
+    "objectID": "pages/Bloque3/presentacion-reactIV.html#ecosistema-node",
+    "href": "pages/Bloque3/presentacion-reactIV.html#ecosistema-node",
+    "title": "React IV",
+    "section": "Ecosistema Node",
+    "text": "Ecosistema Node\nHasta ahora hemos trabajado únicamente con React y JavaScript.\nSin embargo, en el desarrollo real de aplicaciones es muy común utilizar librerías externas, para ello podemos recurrir Node.JS.\nReact está diseñado para funcionar dentro de un ecosistema de paquetes."
   },
   {
-    "objectID": "pages/Bloque3/dom.html#el-dom-como-árbol",
-    "href": "pages/Bloque3/dom.html#el-dom-como-árbol",
-    "title": "DOM",
-    "section": "El DOM como árbol",
-    "text": "El DOM como árbol\nEl DOM tiene estructura de árbol (grafo):\n\nCada etiqueta HTML es un nodo\nLos nodos tienen relaciones (padre, hijos, hermanos)\n\nEjemplo:\n&lt;body&gt;\n  &lt;h1&gt;Título&lt;/h1&gt;\n  &lt;button&gt;Click&lt;/button&gt;\n&lt;/body&gt;"
+    "objectID": "pages/Bloque3/presentacion-reactIV.html#npm",
+    "href": "pages/Bloque3/presentacion-reactIV.html#npm",
+    "title": "React IV",
+    "section": "npm",
+    "text": "npm\nnpm (Node Package Manager) es el sistema que permite instalar y gestionar librerías de JavaScript. Como su nombre indica, está desarrollado por Node.JS\nCada proyecto tiene un archivo:\npackage.json\nEn este archivo se registran las dependencias del proyecto."
   },
   {
-    "objectID": "pages/Bloque3/dom.html#acceso-al-dom-desde-javascript",
-    "href": "pages/Bloque3/dom.html#acceso-al-dom-desde-javascript",
-    "title": "DOM",
-    "section": "Acceso al DOM desde JavaScript",
-    "text": "Acceso al DOM desde JavaScript\nEl navegador nos proporciona el objeto global document, que permite:\n\nBuscar elementos\nLeer su contenido\nModificar la interfaz\n\ndocument\ndocument.body"
+    "objectID": "pages/Bloque3/presentacion-reactIV.html#react-router",
+    "href": "pages/Bloque3/presentacion-reactIV.html#react-router",
+    "title": "React IV",
+    "section": "React Router",
+    "text": "React Router\nEn una aplicación web tradicional cada enlace carga una página nueva.\nEn React normalmente trabajamos con Single Page Applications (SPA).\nEn una SPA:\n\nel navegador no recarga la página\nReact cambia los componentes que se muestran\n\nPara gestionar esto utilizamos React Router.\nRealmente es la misma página, solo que el usuario lo percibe como distintas páginas"
   },
   {
-    "objectID": "pages/Bloque3/dom.html#selectores",
-    "href": "pages/Bloque3/dom.html#selectores",
-    "title": "DOM",
-    "section": "Selectores",
-    "text": "Selectores\nPor ID\ndocument.getElementById(\"count\")\ndocument.querySelector(\"#count\")\nPor etiqueta\ndocument.querySelector(\"button\")"
+    "objectID": "pages/Bloque3/presentacion-reactIV.html#context-api",
+    "href": "pages/Bloque3/presentacion-reactIV.html#context-api",
+    "title": "React IV",
+    "section": "Context API",
+    "text": "Context API\nEn aplicaciones grandes aparece un problema frecuente.\nMuchos componentes necesitan acceder a la misma información.\nPor ejemplo:\n\nusuario\ntema visual\nidioma\nconfiguración\n\nSi pasamos la información mediante props, los datos deben atravesar muchos componentes."
   },
   {
-    "objectID": "pages/Bloque3/dom.html#leer-y-modificar-elementos",
-    "href": "pages/Bloque3/dom.html#leer-y-modificar-elementos",
-    "title": "DOM",
-    "section": "Leer y modificar elementos",
-    "text": "Leer y modificar elementos\nelement.textContent\nelement.textContent = \"Nuevo texto\"\nelement.classList.add(\"active\")\nelement.classList.remove(\"active\")"
+    "objectID": "pages/Bloque3/ReactIV.html",
+    "href": "pages/Bloque3/ReactIV.html",
+    "title": "React IV",
+    "section": "",
+    "text": "Contenido",
+    "crumbs": [
+      "Bloque III Interacción",
+      "Semana 10",
+      "React IV"
+    ]
   },
   {
-    "objectID": "pages/Bloque3/dom.html#eventos",
-    "href": "pages/Bloque3/dom.html#eventos",
-    "title": "DOM",
-    "section": "Eventos",
-    "text": "Eventos\nEl DOM permite reaccionar a acciones del usuario mediante eventos.\nbutton.addEventListener(\"click\", () =&gt; {\n  // código a ejecutar\n});\nFlujo típico:\nUsuario → Evento → JavaScript → DOM actualizado"
+    "objectID": "pages/Bloque3/ReactIV.html#ecosistema-node",
+    "href": "pages/Bloque3/ReactIV.html#ecosistema-node",
+    "title": "React IV",
+    "section": "Ecosistema Node",
+    "text": "Ecosistema Node\nHasta ahora hemos trabajado únicamente con React y JavaScript.\nSin embargo, en el desarrollo real de aplicaciones es muy común utilizar librerías externas, para ello podemos recurrir Node.JS.\nReact está diseñado para funcionar dentro de un ecosistema de paquetes.\nEjemplos habituales:\n\nReact Router → navegación\nAxios → peticiones HTTP\nChart.js → gráficas\nZustand / Redux → gestión de estado\nLibrerías de UI: Tailwind, Bootstrap, Booswatch",
+    "crumbs": [
+      "Bloque III Interacción",
+      "Semana 10",
+      "React IV"
+    ]
   },
   {
-    "objectID": "pages/Bloque3/dom.html#ejemplo-contador-con-botón",
-    "href": "pages/Bloque3/dom.html#ejemplo-contador-con-botón",
-    "title": "DOM",
-    "section": "Ejemplo: contador con botón",
-    "text": "Ejemplo: contador con botón\nHTML\n&lt;h1 id=\"count\"&gt;0&lt;/h1&gt;\n&lt;button id=\"btn\"&gt;Sumar 1&lt;/button&gt;\nJavaScript\nlet count = 0;\n\nconst countEl = document.querySelector(\"#count\");\nconst btn = document.querySelector(\"#btn\");\n\nbtn.addEventListener(\"click\", () =&gt; {\n  count++;\n  countEl.textContent = count;\n});"
+    "objectID": "pages/Bloque3/ReactIV.html#npm",
+    "href": "pages/Bloque3/ReactIV.html#npm",
+    "title": "React IV",
+    "section": "npm",
+    "text": "npm\nnpm (Node Package Manager) es el sistema que permite instalar y gestionar librerías de JavaScript. Como su nombre indica, está desarrollado por Node.JS\nCada proyecto tiene un archivo:\npackage.json\nEn este archivo se registran las dependencias del proyecto.\nEjemplo:\n{\n  \"dependencies\": {\n    \"react\": \"^18.0.0\",\n    \"react-router-dom\": \"^6.0.0\"\n  }\n}\n\nInstalación de paquetes\nLas librerías se instalan desde la terminal.\nnpm install react-router-dom\nEsto hace tres cosas:\n\nDescarga el paquete\nLo guarda en node_modules (capreta donde se guardan las librerías externas)\nAñade la dependencia en package.json",
+    "crumbs": [
+      "Bloque III Interacción",
+      "Semana 10",
+      "React IV"
+    ]
+  },
+  {
+    "objectID": "pages/Bloque3/ReactIV.html#react-router",
+    "href": "pages/Bloque3/ReactIV.html#react-router",
+    "title": "React IV",
+    "section": "React Router",
+    "text": "React Router\nEn una aplicación web tradicional cada enlace carga una página nueva.\nEn React normalmente trabajamos con Single Page Applications (SPA).\nEn una SPA:\n\nel navegador no recarga la página\nReact cambia los componentes que se muestran\n\nPara gestionar esto utilizamos React Router.\nRealmente es la misma página, solo que el usuario lo percibe como distintas páginas\nEl usuario percibirá que el sitio web está divido en diferentes subpáginas\n\n/\npokemons\npokemons/pikachu\n\n\nComponentes principales de React Router\nLos elementos fundamentales son:\n\nBrowserRouter\nRoutes\nRoute\nLink\n\nEjemplo básico:\nimport { BrowserRouter, Routes, Route } from \"react-router-dom\";\n\nfunction App() {\n  return (\n    &lt;BrowserRouter&gt;\n\n      &lt;Routes&gt;\n\n        &lt;Route path=\"/\" element={&lt;Home /&gt;} /&gt;\n\n        &lt;Route path=\"/pokemons\" element={&lt;PokemonList /&gt;} /&gt;\n\n      &lt;/Routes&gt;\n\n    &lt;/BrowserRouter&gt;\n  );\n}\nElementos del código\n\nBrowserRouter\nEs el componente que activa el sistema de navegación de React Router. Utiliza la API de historial del navegador para cambiar la URL sin recargar la página.\nRoutes\nEs el contenedor donde se definen todas las rutas de la aplicación. React Router examina las rutas dentro de este componente para decidir qué componente mostrar.\nRoute\nDefine una ruta concreta de la aplicación.\n\n\npath\nIndica la URL que activa la ruta.\nEjemplo: / corresponde a la página principal.\nelement\nEs el componente de React que se renderiza cuando la URL coincide con el path.\n&lt;Home /&gt;\nComponente que se muestra cuando el usuario accede a la ruta /.\n&lt;PokemonList /&gt;\nComponente que se muestra cuando el usuario accede a la ruta /pokemons.\n\n\n\nNavegación\nPara navegar entre páginas utilizamos el componente Link.\nimport { Link } from \"react-router-dom\";\n\n&lt;Link to=\"/\"&gt;Inicio&lt;/Link&gt;\n\n&lt;Link to=\"/pokemon\"&gt;Pokemon&lt;/Link&gt;\nA diferencia de &lt;a&gt;:\n\nno recarga la página\nReact cambia el componente visible\n\n\n\nParámetros dinámicos\nPodemos crear rutas dinámicas.\nEjemplo:\n/pokemon/25\n/pokemon/7\nDefinición de la ruta:\n&lt;Route path=\"/pokemon/:id\" element={&lt;PokemonDetail /&gt;} /&gt;\n\nuseParams\nPara acceder al parámetro utilizamos el hook useParams de React Router.\nimport { useParams } from \"react-router-dom\";\n\nfunction PokemonDetail() {\n\n  const { id } = useParams();\n\n  return &lt;p&gt;Pokemon {id}&lt;/p&gt;;\n\n}\nEste parámetro puede utilizarse para realizar peticiones a una API.",
+    "crumbs": [
+      "Bloque III Interacción",
+      "Semana 10",
+      "React IV"
+    ]
   },
   {
-    "objectID": "pages/Bloque3/dom.html#más-ejemplos",
-    "href": "pages/Bloque3/dom.html#más-ejemplos",
-    "title": "DOM",
-    "section": "Más ejemplos",
-    "text": "Más ejemplos\nEj1: Show input\nEj2: Par e Impar\nEj3: Toggle\nEj4: Creación dinámica\nEj5: Validación básica"
+    "objectID": "pages/Bloque3/ReactIV.html#context-api",
+    "href": "pages/Bloque3/ReactIV.html#context-api",
+    "title": "React IV",
+    "section": "Context API",
+    "text": "Context API\nEn aplicaciones grandes aparece un problema frecuente.\nMuchos componentes necesitan acceder a la misma información.\nPor ejemplo:\n\nusuario\ntema visual\nidioma\nconfiguración\n\nSi pasamos la información mediante props, los datos deben atravesar muchos componentes.\nRepresentación conceptual:\nApp\n └ Layout\n    └ Page\n       └ Component\nSi todos necesitan user, debemos pasar la prop continuamente.\nEste problema se conoce como prop drilling.\n\nContext\nReact proporciona una solución llamada Context.\nContext permite compartir información entre múltiples componentes sin pasar props manualmente.\nEl proceso tiene tres pasos:\n\nCrear el contexto\nProveer el contexto\nConsumir el contexto\n\n\nCrear un contexto\nimport { createContext } from \"react\";\n\nconst UserContext = createContext();\nEsto crea un contenedor que puede almacenar información compartida.\n\n\nProvider\nEl Provider permite que los componentes hijos accedan al contexto.\n&lt;UserContext.Provider value={user}&gt;\n\n  &lt;App /&gt;\n\n&lt;/UserContext.Provider&gt;\nTodos los componentes dentro del Provider pueden acceder al valor.\n\n\nConsumir el contexto\nPara acceder al contexto utilizamos el hook useContext.\nimport { useContext } from \"react\";\n\nconst user = useContext(UserContext);\nEl componente obtiene directamente el valor almacenado en el contexto.\n\n\nEjemplo completo\nimport { createContext, useContext } from \"react\";\n\nconst UserContext = createContext();\n\nfunction App() {\n\n  const user = { name: \"Javier\" };\n\n  return (\n\n    &lt;UserContext.Provider value={user}&gt;\n\n      &lt;Profile /&gt;\n\n    &lt;/UserContext.Provider&gt;\n\n  );\n}\n\nfunction Profile() {\n\n  const user = useContext(UserContext);\n\n  return &lt;h1&gt;{user.name}&lt;/h1&gt;;\n\n}",
+    "crumbs": [
+      "Bloque III Interacción",
+      "Semana 10",
+      "React IV"
+    ]
   },
   {
-    "objectID": "pages/Bloque3/DOM.html",
-    "href": "pages/Bloque3/DOM.html",
-    "title": "DOM",
+    "objectID": "pages/Bloque3/MAcss2.html",
+    "href": "pages/Bloque3/MAcss2.html",
+    "title": "MA: CSS Flex y CSS",
     "section": "",
-    "text": "El DOM (Document Object Model) es la representación en memoria que el navegador crea a partir del HTML.\n\nEl HTML es estático\nEl DOM es dinámico\nJavaScript interactúa con el DOM, no con el HTML original\n\n\nEl DOM es la página web viva dentro del navegador.",
+    "text": "Además de las propiedades estudiadas de CSS también hay algunas críticas que debido a la falta de tiempo no se han podido explicar como es el caso de display a continuación estos dos vídeos profundizan en los modos flex y grid formas diferentes de diseñar la estructura de la página",
     "crumbs": [
       "Bloque III Interacción",
       "Semana 6",
-      "DOM"
+      "MA: CSS Flex y CSS"
     ]
   },
   {
-    "objectID": "pages/Bloque3/DOM.html#qué-es-el-dom",
-    "href": "pages/Bloque3/DOM.html#qué-es-el-dom",
-    "title": "DOM",
+    "objectID": "pages/Bloque3/t10.html",
+    "href": "pages/Bloque3/t10.html",
+    "title": "T10: Quiz app!",
     "section": "",
-    "text": "El DOM (Document Object Model) es la representación en memoria que el navegador crea a partir del HTML.\n\nEl HTML es estático\nEl DOM es dinámico\nJavaScript interactúa con el DOM, no con el HTML original\n\n\nEl DOM es la página web viva dentro del navegador.",
+    "text": "Desarrollar una aplicación React que permita al usuario realizar un quiz de cultura general utilizando preguntas obtenidas desde una API pública.\nhttps://astonishing-douhua-44213e.netlify.app/\nLa aplicación debe mostrar preguntas, permitir seleccionar respuestas y calcular la puntuación final.",
     "crumbs": [
       "Bloque III Interacción",
-      "Semana 6",
-      "DOM"
+      "Semana 10",
+      "T10: Quiz app!"
     ]
   },
   {
-    "objectID": "pages/Bloque3/DOM.html#el-dom-como-árbol",
-    "href": "pages/Bloque3/DOM.html#el-dom-como-árbol",
-    "title": "DOM",
-    "section": "El DOM como árbol",
-    "text": "El DOM como árbol\nEl DOM tiene estructura de árbol (grafo):\n\nCada etiqueta HTML es un nodo\nLos nodos tienen relaciones (padre, hijos, hermanos)\n\nEjemplo:\n&lt;body&gt;\n  &lt;h1&gt;Título&lt;/h1&gt;\n  &lt;button&gt;Click&lt;/button&gt;\n&lt;/body&gt;\nRepresentación conceptual:\ndocument\n └─ body\n    ├─ h1\n    └─ button",
+    "objectID": "pages/Bloque3/t10.html#objetivo",
+    "href": "pages/Bloque3/t10.html#objetivo",
+    "title": "T10: Quiz app!",
+    "section": "",
+    "text": "Desarrollar una aplicación React que permita al usuario realizar un quiz de cultura general utilizando preguntas obtenidas desde una API pública.\nhttps://astonishing-douhua-44213e.netlify.app/\nLa aplicación debe mostrar preguntas, permitir seleccionar respuestas y calcular la puntuación final.",
     "crumbs": [
       "Bloque III Interacción",
-      "Semana 6",
-      "DOM"
+      "Semana 10",
+      "T10: Quiz app!"
     ]
   },
   {
-    "objectID": "pages/Bloque3/DOM.html#acceso-al-dom-desde-javascript",
-    "href": "pages/Bloque3/DOM.html#acceso-al-dom-desde-javascript",
-    "title": "DOM",
-    "section": "Acceso al DOM desde JavaScript",
-    "text": "Acceso al DOM desde JavaScript\nEl navegador nos proporciona el objeto global document, que permite:\n\nBuscar elementos\nLeer su contenido\nModificar la interfaz\n\ndocument\ndocument.body",
+    "objectID": "pages/Bloque3/t10.html#cargar-preguntas-desde-la-api",
+    "href": "pages/Bloque3/t10.html#cargar-preguntas-desde-la-api",
+    "title": "T10: Quiz app!",
+    "section": "1. Cargar preguntas desde la API",
+    "text": "1. Cargar preguntas desde la API\nCuando la aplicación se inicia debe obtener 10 preguntas desde la API.\nPara ello se debe usar:\n\nfetch\nuseEffect\n\nMientras se cargan los datos se debe mostrar:\nLoading...",
     "crumbs": [
       "Bloque III Interacción",
-      "Semana 6",
-      "DOM"
+      "Semana 10",
+      "T10: Quiz app!"
     ]
   },
   {
-    "objectID": "pages/Bloque3/DOM.html#selectores",
-    "href": "pages/Bloque3/DOM.html#selectores",
-    "title": "DOM",
-    "section": "Selectores",
-    "text": "Selectores\n\nPor ID\ndocument.getElementById(\"count\")\ndocument.querySelector(\"#count\")\n\n\nPor etiqueta\ndocument.querySelector(\"button\")\n\n\nPor clase\ndocument.querySelector(\".item\")\ndocument.querySelectorAll(\".item\")\nNotas: - querySelector devuelve el primer elemento - querySelectorAll devuelve una lista - Usan la misma sintaxis que CSS",
+    "objectID": "pages/Bloque3/t10.html#mostrar-la-pregunta-actual",
+    "href": "pages/Bloque3/t10.html#mostrar-la-pregunta-actual",
+    "title": "T10: Quiz app!",
+    "section": "2. Mostrar la pregunta actual",
+    "text": "2. Mostrar la pregunta actual\nLa aplicación debe mostrar:\n\nnúmero de pregunta\ntexto de la pregunta\n\nEjemplo:\nQuestion 3\nWhat is the capital of France?",
     "crumbs": [
       "Bloque III Interacción",
-      "Semana 6",
-      "DOM"
+      "Semana 10",
+      "T10: Quiz app!"
     ]
   },
   {
-    "objectID": "pages/Bloque3/DOM.html#leer-y-modificar-elementos",
-    "href": "pages/Bloque3/DOM.html#leer-y-modificar-elementos",
-    "title": "DOM",
-    "section": "Leer y modificar elementos",
-    "text": "Leer y modificar elementos\nelement.textContent\nelement.textContent = \"Nuevo texto\"\nelement.classList.add(\"active\")\nelement.classList.remove(\"active\")",
+    "objectID": "pages/Bloque3/t10.html#mostrar-las-posibles-respuestas",
+    "href": "pages/Bloque3/t10.html#mostrar-las-posibles-respuestas",
+    "title": "T10: Quiz app!",
+    "section": "3. Mostrar las posibles respuestas",
+    "text": "3. Mostrar las posibles respuestas\nCada pregunta tiene:\n\n1 respuesta correcta\n3 respuestas incorrectas\n\nSe deben mostrar las 4 respuestas como botones.\nEjemplo:\nParis\nRome\nMadrid\nBerlin",
     "crumbs": [
       "Bloque III Interacción",
-      "Semana 6",
-      "DOM"
+      "Semana 10",
+      "T10: Quiz app!"
     ]
   },
   {
-    "objectID": "pages/Bloque3/DOM.html#eventos",
-    "href": "pages/Bloque3/DOM.html#eventos",
-    "title": "DOM",
-    "section": "Eventos",
-    "text": "Eventos\nEl DOM permite reaccionar a acciones del usuario mediante eventos.\nbutton.addEventListener(\"click\", () =&gt; {\n  // código a ejecutar\n});\nFlujo típico:\nUsuario → Evento → JavaScript → DOM actualizado",
+    "objectID": "pages/Bloque3/t10.html#seleccionar-una-respuesta",
+    "href": "pages/Bloque3/t10.html#seleccionar-una-respuesta",
+    "title": "T10: Quiz app!",
+    "section": "4. Seleccionar una respuesta",
+    "text": "4. Seleccionar una respuesta\nCuando el usuario hace clic en una respuesta:\n\nla opción debe quedar marcada visualmente\nla selección debe guardarse en el estado del componente",
     "crumbs": [
       "Bloque III Interacción",
-      "Semana 6",
-      "DOM"
+      "Semana 10",
+      "T10: Quiz app!"
     ]
   },
   {
-    "objectID": "pages/Bloque3/DOM.html#ejemplo-contador-con-botón",
-    "href": "pages/Bloque3/DOM.html#ejemplo-contador-con-botón",
-    "title": "DOM",
-    "section": "Ejemplo: contador con botón",
-    "text": "Ejemplo: contador con botón\n\nHTML\n&lt;h1 id=\"count\"&gt;0&lt;/h1&gt;\n&lt;button id=\"btn\"&gt;Sumar 1&lt;/button&gt;\n\n\nJavaScript\nlet count = 0;\n\nconst countEl = document.querySelector(\"#count\");\nconst btn = document.querySelector(\"#btn\");\n\nbtn.addEventListener(\"click\", () =&gt; {\n  count++;\n  countEl.textContent = count;\n});",
+    "objectID": "pages/Bloque3/t10.html#pasar-a-la-siguiente-pregunta",
+    "href": "pages/Bloque3/t10.html#pasar-a-la-siguiente-pregunta",
+    "title": "T10: Quiz app!",
+    "section": "5. Pasar a la siguiente pregunta",
+    "text": "5. Pasar a la siguiente pregunta\nDebe existir un botón:\nNext\nEste botón:\n\nsolo se puede pulsar cuando el usuario ha seleccionado una respuesta\npasa a la siguiente pregunta",
     "crumbs": [
       "Bloque III Interacción",
-      "Semana 6",
-      "DOM"
+      "Semana 10",
+      "T10: Quiz app!"
     ]
   },
   {
-    "objectID": "pages/Bloque3/DOM.html#más-ejemplos",
-    "href": "pages/Bloque3/DOM.html#más-ejemplos",
-    "title": "DOM",
-    "section": "Más ejemplos",
-    "text": "Más ejemplos\nEj1: Show input\nEj2: Par e Impar\nEj3: Toggle\nEj4: Creación dinámica\nEj5: Validación básica",
+    "objectID": "pages/Bloque3/t10.html#calcular-la-puntuación",
+    "href": "pages/Bloque3/t10.html#calcular-la-puntuación",
+    "title": "T10: Quiz app!",
+    "section": "6. Calcular la puntuación",
+    "text": "6. Calcular la puntuación\nCuando el usuario responde una pregunta:\n\nsi la respuesta es correcta → sumar 1 punto",
     "crumbs": [
       "Bloque III Interacción",
-      "Semana 6",
-      "DOM"
-=======
+      "Semana 10",
+      "T10: Quiz app!"
+    ]
+  },
+  {
+    "objectID": "pages/Bloque3/t10.html#mostrar-el-resultado-final",
+    "href": "pages/Bloque3/t10.html#mostrar-el-resultado-final",
+    "title": "T10: Quiz app!",
+    "section": "7. Mostrar el resultado final",
+    "text": "7. Mostrar el resultado final\nAl terminar el quiz debe mostrarse:\nQuiz finished!\nYour score: X / 10",
     "crumbs": [
       "Bloque III Interacción",
-      "Semana 9",
-      "MA: *Uncontrolled fields* y `useRef`"
->>>>>>> 8e10774 (feat: explicacion semana 10 (#4))
+      "Semana 10",
+      "T10: Quiz app!"
     ]
   },
   {
-    "objectID": "pages/Bloque3/t9.html",
-    "href": "pages/Bloque3/t9.html",
-    "title": "T6: Romancero Gitano I",
-    "section": "",
-    "text": "El objetivo de esta tarea es aplicar los conceptos básicos de HTML, CSS y JavaScript (DOM) para crear una página web interactiva que muestre poemas del Romancero gitano de Federico García Lorca y modifique su apariencia visual en función de las diferentes metáforas.\nResultado esperado"
+    "objectID": "pages/Bloque4/Protocolos.html#http",
+    "href": "pages/Bloque4/Protocolos.html#http",
+    "title": "Protocolos de Comunicación",
+    "section": "HTTP",
+    "text": "HTTP\n¿Qué es HTTP?\nHTTP (HyperText Transfer Protocol) es el protocolo fundamental de la web.\nDefine cómo:\n\nEl cliente (navegador o app)\nSolicita recursos\nA un servidor"
   },
   {
-    "objectID": "pages/Bloque3/t9.html#objetivo-de-la-tarea",
-    "href": "pages/Bloque3/t9.html#objetivo-de-la-tarea",
-    "title": "T6: Romancero Gitano I",
-    "section": "",
-    "text": "El objetivo de esta tarea es aplicar los conceptos básicos de HTML, CSS y JavaScript (DOM) para crear una página web interactiva que muestre poemas del Romancero gitano de Federico García Lorca y modifique su apariencia visual en función de las diferentes metáforas.\nResultado esperado"
+    "objectID": "pages/Bloque4/Protocolos.html#http-vs-comunicación-en-tiempo-real",
+    "href": "pages/Bloque4/Protocolos.html#http-vs-comunicación-en-tiempo-real",
+    "title": "Protocolos de Comunicación",
+    "section": "HTTP vs Comunicación en tiempo real",
+    "text": "HTTP vs Comunicación en tiempo real\nHTTP funciona bajo el modelo:\n\nPetición → Respuesta → Fin\n\nSi queremos datos continuamente:\n\nDebemos repetir peticiones\nIntroduce latencia\nIneficiente\n\nSolución: WebSockets"
   },
   {
-    "objectID": "pages/Bloque3/t9.html#estructura-html",
-    "href": "pages/Bloque3/t9.html#estructura-html",
-    "title": "T6: Romancero Gitano I",
-    "section": "Estructura HTML",
-    "text": "Estructura HTML\nEl documento HTML debe:\n\nEstar correctamente estructurado (&lt;!DOCTYPE&gt;, &lt;html&gt;, &lt;head&gt;, &lt;body&gt;).\nContener un contenedor principal centrado horizontalmente.\nIncluir, en este orden:\n\nUn elemento para mostrar información métrica del poema (número de estrofas y versos).\nUn elemento para el título del poema.\nUn elemento para el texto del poema, respetando los saltos de verso utilizando la etiqueta &lt;pre&gt;.\nUn botón que permita cambiar de poema.\n\n\nNo debe utilizarse ningún framework ni librería externa."
+    "objectID": "pages/Bloque4/Protocolos.html#websockets",
+    "href": "pages/Bloque4/Protocolos.html#websockets",
+    "title": "Protocolos de Comunicación",
+    "section": "WebSockets",
+    "text": "WebSockets\nWebSockets permiten comunicación bidireccional persistente.\nCaracterísticas:\n\nConexión permanente\nCliente y servidor pueden enviar datos\nBaja latencia\nIdeal para tiempo real"
   },
   {
-    "objectID": "pages/Bloque3/t9.html#javascript",
-    "href": "pages/Bloque3/t9.html#javascript",
-    "title": "T6: Romancero Gitano I",
-    "section": "JavaScript",
-    "text": "JavaScript\n\nDatos\nEn JavaScript se debe definir un array de objetos, donde cada objeto represente un poema y tenga al menos:\n\nUn título.\nEl texto del poema como una cadena de texto, usando saltos de línea para los versos.\n\nEl cambio de poema debe hacerse recorriendo este array de forma cíclica (cola circular) mediante el botón.\nDescargar poemas (click derecho guardar enlace como)\n\n\nManipulación del DOM\nEl comportamiento de la página debe implementarse exclusivamente con DOM nativo, cumpliendo lo siguiente:\n\nTodas las funciones deben declararse como arrow functions.\nAl pulsar el botón:\n\nSe actualiza el título.\nSe actualiza el texto del poema.\nSe modifica el formato del fondo.\nSe recalculan y muestran:\n\nNúmero de versos.\nNúmero de estrofas (bloques separados por líneas en blanco).\n\n\n\nEl cálculo debe realizarse a partir del texto del poema, no con valores predefinidos."
+    "objectID": "pages/Bloque4/Protocolos.html#hook-personalizado",
+    "href": "pages/Bloque4/Protocolos.html#hook-personalizado",
+    "title": "Protocolos de Comunicación",
+    "section": "Hook Personalizado",
+    "text": "Hook Personalizado\nSi usamos WebSockets directamente dentro del componente:\n\nMezclamos lógica de conexión con renderizado\nCódigo difícil de reutilizar\nProblemas de ciclo de vida\n\nSolución: Hook personalizado"
   },
   {
-    "objectID": "pages/Bloque3/t9.html#css",
-    "href": "pages/Bloque3/t9.html#css",
-    "title": "T6: Romancero Gitano I",
-    "section": "CSS",
-    "text": "CSS\nLorca utiliza las metáforas y la alegoría como elemento principal sobre el que construye sus poemas, al analizar profundamente descubrimos que siempre recurre a las mismas metáforas.\nEl color no se utiliza aquí solo como elemento decorativo, sino como un recurso semántico: cada color representa un símbolo literario presente en el poema.\nDesde el punto de vista técnico: - Los colores de fondo y de texto deben definirse en clases CSS. - JavaScript no decide colores, únicamente decide qué clase aplicar según el contenido del poema.\n\nPalabras clave y colores asociados\nSe debe detectar el texto del poema las siguientes palabras clave y aplicar el color de fondo correspondiente:\n\nguardia civil → fondo verde militar\nsangre → fondo granate oscuro\ncaballo → fondo color tierra\ncuchillo / navaja → fondo plateado\n\nEl color del texto debe elegirse siempre de forma que exista contraste suficiente con el fondo y se garantice la legibilidad.\nSi el poema contiene varias palabras clave, solo debe aplicarse un único estilo, siguiendo un orden de prioridad definido previamente.\nSi el poema no contiene ninguna de estas palabras, se aplicará un estilo por defecto con colores aleatorios."
+    "objectID": "pages/Bloque4/Protocolos.html#visualización-de-datos",
+    "href": "pages/Bloque4/Protocolos.html#visualización-de-datos",
+    "title": "Protocolos de Comunicación",
+    "section": "Visualización de datos",
+    "text": "Visualización de datos\nEn aplicaciones reales no basta con mostrar texto.\nNecesitamos:\n\nGráficas\nPaneles de control\nVisualización clara\n\nUna librería popular para React es Recharts."
   },
   {
-    "objectID": "pages/Bloque3/t9.html#extra-opcional-símbolo-aurora",
-    "href": "pages/Bloque3/t9.html#extra-opcional-símbolo-aurora",
-    "title": "T6: Romancero Gitano I",
-    "section": "Extra opcional: símbolo aurora 🌈",
-    "text": "Extra opcional: símbolo aurora 🌈\nDe forma voluntaria, se puede añadir el símbolo aurora, que tendrá prioridad absoluta sobre todos los demás.\nCuando el poema contenga la palabra aurora, el fondo debe mostrar un degradado animado.\n\nCSS necesario para el extra\n.aurora {\n  background: linear-gradient(120deg,\n    #ff005d,\n    #ff9f1c,\n    #ffee32,\n    #3cff00,\n    #00e5ff,\n    #7a00ff,\n    #ff00c8\n  );\n  background-size: 600% 600%;\n  animation: aurora 10s linear infinite;\n  color: black;\n}\n\n@keyframes aurora {\n  0%   { background-position: 0% 50%; }\n  50%  { background-position: 100% 50%; }\n  100% { background-position: 0% 50%; }\n}"
+    "objectID": "pages/Bloque4/Protocolos.html#recharts",
+    "href": "pages/Bloque4/Protocolos.html#recharts",
+    "title": "Protocolos de Comunicación",
+    "section": "Recharts",
+    "text": "Recharts\nRecharts es una librería basada en:\n\nComponentes React\nSVG\nComposición declarativa\n\nInstalación:\nnpm install recharts"
   },
   {
-    "objectID": "pages/Bloque3/t9.html#consejos",
-    "href": "pages/Bloque3/t9.html#consejos",
-    "title": "T6: Romancero Gitano I",
-    "section": "Consejos",
-    "text": "Consejos\n\nCentrado de la página (layout clásico)\nToda la página debe estar centrada horizontalmente.\nEl centrado se consigue mediante:\n\nUn contenedor con un ancho máximo definido.\nMárgenes automáticos a izquierda y derecha.\n\nDesde el punto de vista conceptual:\n\nmargin: 0 auto no centra texto, centra bloques.\nEl navegador reparte automáticamente el espacio sobrante a ambos lados del contenedor.\n\n\n\nAnimación del cambio de color\nPara evitar que los cambios de color sean bruscos, se utiliza la propiedad transition en CSS.\nEsta propiedad indica al navegador que los cambios en determinadas propiedades visuales deben hacerse de forma progresiva.\nEjemplo conceptual:\nbody {\n  transition: background-color 0.6s, color 0.6s;\n}\nGracias a esta transición: - Cuando JavaScript cambia una clase o un color, - el navegador interpola automáticamente entre el color anterior y el nuevo.\nNo es necesario programar animaciones en JavaScript: CSS se encarga de todo el efecto visual.\n\n\nBúsqueda de una palabra\nPara buscar si determinada palabra determinada se debe utilizar la función includes de la clase string\n\ntexto = \"hoy nieva\";\n\ntexto.includes(\"nieva\");    //TRUE\ntexto.includes(\"llueve\");   //FALSE\n\n\nGeneración del color aleatorio\nPara la generacióndel color aleatorio de puede utilizar la siguiente función\nconst randomColor = () =&gt; '#' + Math.floor(Math.random() * 16777215).toString(16);\n\n\nConteo versos y estrofas\nEl recuento de versos y estrofas debe hacerse a partir del texto del poema, no con valores escritos a mano. A continuación se dan algunas pistas técnicas para abordar este problema.\n\nConteo de versos\nUn verso puede considerarse, a efectos prácticos en esta tarea, como una línea de texto no vacía.\nUna estrategia habitual consiste en: - Separar el texto por saltos de línea. - Eliminar las líneas vacías o formadas solo por espacios. - Contar cuántas líneas válidas quedan.\nEjemplo orientativo:\nconst versos = texto\n  .split('\\n')\n  .filter(linea =&gt; linea.trim() !== '')\n  .length;\nEste enfoque es suficiente para la mayoría de los poemas del Romancero gitano y evita errores frecuentes.\n\n\nConteo de estrofas\nUna estrofa puede entenderse como un bloque de versos separado de otros bloques por una línea en blanco.\nUna posible estrategia es: - Separar el texto usando dos (o más) saltos de línea consecutivos. - Eliminar bloques vacíos. - Contar los bloques resultantes.\nEjemplo orientativo:\nconst estrofas = texto\n  .split(/\\n\\s*\\n/)\n  .filter(bloque =&gt; bloque.trim() !== '')\n  .length;\nEntrega: un único archivo HTML funcional."
+    "objectID": "pages/Bloque4/Protocolos.html#integración-completa",
+    "href": "pages/Bloque4/Protocolos.html#integración-completa",
+    "title": "Protocolos de Comunicación",
+    "section": "Integración completa",
+    "text": "Integración completa\nWebSocket + Hook + Recharts\nObjetivo:\n\nVisualizar datos en tiempo real"
   },
   {
-    "objectID": "pages/Bloque3/t9.html#recomendaciones-para-afrontar-la-tarea",
-    "href": "pages/Bloque3/t9.html#recomendaciones-para-afrontar-la-tarea",
-    "title": "T6: Romancero Gitano I",
-    "section": "Recomendaciones para afrontar la tarea",
-    "text": "Recomendaciones para afrontar la tarea\nAl enfrentarnos a un proyecto de cierta complejitud, el como afrontarlo resulta de cricial para el desarollo del mismo por ello a a continuación dejo un esquema de implementación modular. Sería mejor no utilizarlo, pero puede ser un buen punto de partida si no se sabe como empezar la app, no es el único proceso de implementación válido ni es más correcto que cualquier otro\n\nEstructura de HTML básica contadores de versos y estrofas placeholders de poema y título y botón\nFormateo CSS parte estática: centrado, tamaño (todo lo que no sea color)\nDefinir clases con colores predeterminados\nLógica interna con JS\n\n\nBuscar palabra\nContar estrofas\nConteo versos\nSelección de clase\nGenerar color aleatorio si procede\n\n\nIntegración con DOM"
+    "objectID": "pages/Bloque4/Protocolos.html#material",
+    "href": "pages/Bloque4/Protocolos.html#material",
+    "title": "Protocolos de Comunicación",
+    "section": "Material",
+    "text": "Material\nServidor de testing de Python: Enlace.\nInstalar websockets con pip install websockets\nTester de prueba: Enlace (click derecho guardar enlace como)\nhttps://recharts.github.io/"
   },
   {
-    "objectID": "pages/Bloque3/reactI.html#sintaxis-jsx",
-    "href": "pages/Bloque3/reactI.html#sintaxis-jsx",
-    "title": "React I",
-    "section": "Sintaxis JSX",
-    "text": "Sintaxis JSX\n¿Qué es la sintaxis JSX?\n\nJSX (JavaScript XML) es una extensión de JavaScript utilizada en React.\n\nPermite escribir estructuras similares a HTML directamente dentro del código JavaScript.\n\nFacilita la creación y lectura de interfaces de usuario, integrando lógica y presentación.\n\nAunque su apariencia es HTML, JSX se transpila a JavaScript puro antes de ejecutarse en el navegador.\nForma cómoda de almacenar etiquetas html como variables de JS"
+    "objectID": "pages/Bloque4/protocolos.html",
+    "href": "pages/Bloque4/protocolos.html",
+    "title": "Protocolos de Comunicación",
+    "section": "",
+    "text": "Contenido",
+    "crumbs": [
+      "Bloque IV Comunicación",
+      "Semana 11",
+      "Protocolos de Comunicación"
+    ]
   },
   {
-    "objectID": "pages/Bloque3/reactI.html#react",
-    "href": "pages/Bloque3/reactI.html#react",
-    "title": "React I",
-    "section": "React",
-    "text": "React\nMotivación\nHasta el momento hemos trabajado únicamente con HTML5, el cual a pesar de ser muy eficaz, presenta el inconveniente de que no implementa ninguna clase de lógica. Es decir, si queremos repetir alguna estructura previamente definida deberemos copiarla y pegarla. Otro problema, de HTML puro es la complejidad que requiere el manejo del DOM, como ya se vio en la semana anterior.\nBajo este pretexto, introducimos el framework React diseñado por Meta."
+    "objectID": "pages/Bloque4/protocolos.html#http",
+    "href": "pages/Bloque4/protocolos.html#http",
+    "title": "Protocolos de Comunicación",
+    "section": "HTTP",
+    "text": "HTTP\n\n¿Qué es HTTP?\nHTTP (HyperText Transfer Protocol) es el protocolo fundamental de la web.\nDefine cómo:\n\nEl cliente (navegador o app)\nSolicita recursos\nA un servidor\n\nModelo conceptual:\nCliente → Solicitud HTTP → Servidor\nCliente ← Respuesta HTTP ← Servidor\nHTTP es sin estado (stateless).\nCada petición es independiente.\n\n\nComponentes de una petición\nUna petición HTTP contiene:\n\nMétodo\nURL\nCabeceras (headers)\nCuerpo (body, opcional)\n\nEjemplo conceptual:\nGET /users HTTP/1.1\nHost: api.example.com\nAuthorization: Bearer token\n\n\nMétodos HTTP principales\n\nGET\n\nSolicita datos\nNo modifica el servidor\nDebe ser idempotente\n\nEjemplo:\nGET /users\nUso típico en React:\nfetch(\"/api/users\")\n\n\n\nPOST\n\nEnvía datos al servidor\nCrea recursos nuevos\nTiene cuerpo\n\nEjemplo:\nfetch(\"/api/users\", {\n  method: \"POST\",\n  body: JSON.stringify({ name: \"Ana\" }),\n  headers: { \"Content-Type\": \"application/json\" }\n});\n\n\nPUT\n\nActualiza completamente un recurso existente\nIdempotente\n\nPUT /users/3\n\n\nDELETE\n\nElimina un recurso\n\nDELETE /users/3\n\n\nHEAD\n\nIgual que GET\nNo devuelve cuerpo\nSolo cabeceras\n\nSe utiliza para:\n\nComprobar existencia\nTamaño\nMetadatos",
+    "crumbs": [
+      "Bloque IV Comunicación",
+      "Semana 11",
+      "Protocolos de Comunicación"
+    ]
   },
   {
-    "objectID": "pages/Bloque3/reactI.html#creación-de-una-reactjs-app",
-    "href": "pages/Bloque3/reactI.html#creación-de-una-reactjs-app",
-    "title": "React I",
-    "section": "Creación de una ReactJS app",
-    "text": "Creación de una ReactJS app\nEl desarrollo de aplicaciones web modernas requiere coordinar múltiples elementos: estructura del proyecto, gestión de dependencias, compilación del código y ejecución en el navegador.\nUn framework de desarrollo proporciona un entorno de trabajo preconfigurado que organiza estos elementos y establece una forma estándar de trabajar."
+    "objectID": "pages/Bloque4/protocolos.html#http-vs-comunicación-en-tiempo-real",
+    "href": "pages/Bloque4/protocolos.html#http-vs-comunicación-en-tiempo-real",
+    "title": "Protocolos de Comunicación",
+    "section": "HTTP vs Comunicación en tiempo real",
+    "text": "HTTP vs Comunicación en tiempo real\nHTTP funciona bajo el modelo:\n\nPetición → Respuesta → Fin\n\nSi queremos datos continuamente:\n\nDebemos repetir peticiones\nIntroduce latencia\nIneficiente\n\nSolución: WebSockets",
+    "crumbs": [
+      "Bloque IV Comunicación",
+      "Semana 11",
+      "Protocolos de Comunicación"
+    ]
   },
   {
-    "objectID": "pages/Bloque3/ReactI.html",
-    "href": "pages/Bloque3/ReactI.html",
-    "title": "React I",
-    "section": "",
-    "text": "Contenido",
+    "objectID": "pages/Bloque4/protocolos.html#websockets",
+    "href": "pages/Bloque4/protocolos.html#websockets",
+    "title": "Protocolos de Comunicación",
+    "section": "WebSockets",
+    "text": "WebSockets\nWebSockets permiten comunicación bidireccional persistente.\nCaracterísticas:\n\nConexión permanente\nCliente y servidor pueden enviar datos\nBaja latencia\nIdeal para tiempo real\n\nEjemplos:\n\nChats\nJuegos online\nTelemetría\nTrading\nSistemas IoT\n\n\nFlujo conceptual\nCliente ↔ Servidor\n     conexión abierta\nNo se crea una nueva conexión por mensaje.\n\n\nCreación de un WebSocket en JavaScript\nconst socket = new WebSocket(\"ws://localhost:8080\");\nEventos principales:\n\nonopen\nonmessage\nonclose\nonerror\n\n\n\nRecepción de mensajes\nsocket.onmessage = (event) =&gt; {\n  console.log(\"Mensaje:\", event.data);\n};\n\n\nEnvío de mensajes\nsocket.send(\"Hola servidor\");",
     "crumbs": [
-      "Bloque III Interacción",
-      "Semana 7",
-      "React I"
+      "Bloque IV Comunicación",
+      "Semana 11",
+      "Protocolos de Comunicación"
     ]
   },
   {
-    "objectID": "pages/Bloque3/ReactI.html#sintaxis-jsx",
-    "href": "pages/Bloque3/ReactI.html#sintaxis-jsx",
-    "title": "React I",
-    "section": "Sintaxis JSX",
-    "text": "Sintaxis JSX\n\n¿Qué es la sintaxis JSX?\n\nJSX (JavaScript XML) es una extensión de JavaScript utilizada en React.\n\nPermite escribir estructuras similares a HTML directamente dentro del código JavaScript.\n\nFacilita la creación y lectura de interfaces de usuario, integrando lógica y presentación.\n\nAunque su apariencia es HTML, JSX se transpila a JavaScript puro antes de ejecutarse en el navegador.\nForma cómoda de almacenar etiquetas html como variables de JS\n\n\n\n¿Qué nos ofrece la sintaxis JSX?\n\nAlmacenar una etiqueta como una variable\nconst title = &lt;h1&gt;Web del TC de SW&lt;/h1&gt;;\n\nconst driveIndication = (drives)? &lt;p&gt;Puede conducir&lt;/p&gt; : &lt;p&gt;No puede conducir&lt;/p&gt;;\nDe esta forma la variable title se corresponde con una etiqueta que contiene el título. Sin embargo, como podemos podemos utilizar está etiqueta una vez la hemos definido como una variable.\n\n\nRenderizar etiquetas dentro de etiquetas\nconst title = &lt;h1&gt;Web del TC de SW&lt;/h1&gt;;\n\nconst page = &lt;div&gt;{title}&lt;/div&gt;\nDe esta forma estámos encapsulando la etiqueta h1 dentro del div.\n\n\nRenderizar con el map\nconst profeAsi= [[\"Rosa\", \"Macro I\"], [\"Gabriela\", \"FSO\"],[\"Yolanda\",\"LTP\"], [\"Ferrán\", \"EM\"], [\"Pepe\", \"TCO\"]];\n\n// Array de li Asignatura: nombre profesor\nconst itemsProfAsi =  profeAsi.map(x =&gt; &lt;li&gt;{x[1]}: {x[0]}&lt;/li&gt;);\n\nconst listaProfesoresAsignatura = &lt;ul&gt;{itemsProfAsi}&lt;/ul&gt;;\n\n\nRenderizar con el map\nconst profeAsi= [[\"Rosa\", \"Macro I\"], [\"Gabriela\", \"FSO\"], [\"Yolanda\",\"LTP\"], [\"Ferrán\", \"EM\"], [\"Pepe\", \"TCO\"]];\n\nconst listaProfesoresAsignatura = &lt;ul&gt;\n{profeAsi.map((x,i) =&gt; &lt;li key={i}&gt;{x[1]}: {x[0]}&lt;/li&gt;)}\n&lt;/ul&gt;;",
+    "objectID": "pages/Bloque4/protocolos.html#hook-personalizado",
+    "href": "pages/Bloque4/protocolos.html#hook-personalizado",
+    "title": "Protocolos de Comunicación",
+    "section": "Hook Personalizado",
+    "text": "Hook Personalizado\nSi usamos WebSockets directamente dentro del componente:\n\nMezclamos lógica de conexión con renderizado\nCódigo difícil de reutilizar\nProblemas de ciclo de vida\n\nSolución: Hook personalizado\n\nHook personalizado\nUn hook personalizado es:\n\nUna función que utiliza hooks internos para encapsular lógica reutilizable\n\nConvención:\nuseNombre()\n\n\nHook useWebSocket\nimport { useEffect, useState } from \"react\";\n\nexport function useWebSocket(url) {\n\n  const [data, setData] = useState(null);\n\n  useEffect(() =&gt; {\n\n    const socket = new WebSocket(url);\n\n    socket.onmessage = (event) =&gt; {\n      setData(event.data);\n    };\n\n    return () =&gt; socket.close();\n\n  }, [url]);\n\n  return data;\n}\n\n\nAnálisis conceptual\n\nSe crea la conexión al montar\nSe actualiza el estado al recibir datos\nSe cierra al desmontar\nEl componente solo consume datos\n\n\n\nUso del hook\nfunction Monitor() {\n\n  const data = useWebSocket(\"ws://localhost:8080\");\n\n  return (\n    &lt;div&gt;\n      &lt;h2&gt;Datos en tiempo real&lt;/h2&gt;\n      &lt;p&gt;{data}&lt;/p&gt;\n    &lt;/div&gt;\n  );\n}\nFlujo:\n\nComponente se renderiza\n\nHook abre conexión\n\nLlegan datos\n\nEstado cambia\n\nNuevo render",
     "crumbs": [
-      "Bloque III Interacción",
-      "Semana 7",
-      "React I"
+      "Bloque IV Comunicación",
+      "Semana 11",
+      "Protocolos de Comunicación"
     ]
   },
   {
-    "objectID": "pages/Bloque3/ReactI.html#react",
-    "href": "pages/Bloque3/ReactI.html#react",
-    "title": "React I",
-    "section": "React",
-    "text": "React\n\nMotivación\nHasta el momento hemos trabajado únicamente con HTML5, el cual a pesar de ser muy eficaz, presenta el inconveniente de que no implementa ninguna clase de lógica. Es decir, si queremos repetir alguna estructura previamente definida deberemos copiarla y pegarla. Otro problema, de HTML puro es la complejidad que requiere el manejo del DOM, como ya se vio en la semana anterior.\nBajo este pretexto, introducimos el framework React diseñado por Meta.\n\n\nBases de React\nReact es un componente basado en la sintaxis JS y en la programación funcional introducida en ES6.\n\n\nComponente React\nLos componentes de React los definimos como unidades reutilizables y modulares que se implementan de esta forma: una función que devuelve un objeto de JSX\nfunction Saludo() {\n  return &lt;h1&gt;Hola, mundo&lt;/h1&gt;;\n}\nPodemos renderizar nuestro componente Saludo asumiendo que se comporta como una etiqueta html. Recordemos que no lo es.\n&lt;main&gt;\n  &lt;Saludo /&gt;\n&lt;/main&gt;\nDentro de este componente podemos incluir lógica propia de JavaScript, de forma que al definir componente podemos dotarlo de lógica interna.\nfunction DivNúmeroAleatorio() {\n\n  let n = Math.random();\n  return &lt;div className=\"n-random\"&gt;{n}&lt;/div&gt;;\n}\n*Nótese que aunque JS utilice camelCase para el nombre de las funciones, con React utilizaremos PascalCase para definir los componentes puesto que a pesar de que se trata de funciones, trabajaremos con ellas como si fuesen clases.\n\n\nProps en React\nHasta ahora, los componentes definidos siempre devuelven el mismo contenido. Sin embargo, para que un componente sea realmente reutilizable, necesitamos poder pasarle información desde el exterior.\nEn React, esta información se transmite mediante props (properties).\nLas props se definen como los parámetros de entrada de un componente y permiten personalizar su comportamiento o su contenido sin modificar su definición interna.\n\nEjemplo 1: uso de props (forma explícita)\nfunction Saludo(props) {\n  return &lt;h1&gt;Hola, {props.nombre}&lt;/h1&gt;;\n}\nUso del componente:\n&lt;Saludo nombre=\"Rosa\" /&gt;\n&lt;Saludo nombre=\"Gabriela\" /&gt;\n\n\nEjemplo 2: props desestructuradas (sintaxis JavaScript)\nfunction Saludo({ nombre }) {\n  return &lt;h1&gt;Hola, {nombre}&lt;/h1&gt;;\n}\nUso del componente (idéntico al anterior):\n&lt;Saludo nombre=\"Rosa\" /&gt;\n&lt;Saludo nombre=\"Gabriela\" /&gt;\n\n\n\nEventos en React\nEn React, el manejo de eventos se basa en los eventos del DOM, pero utilizando una sintaxis propia de JSX y siguiendo el estilo de JavaScript.\n\nEjemplo básico de evento\nfunction BotonSaludo() {\n\n  function manejarClick() {\n    alert(\"Hola desde React\");\n  }\n\n  return (\n    &lt;button onClick={manejarClick}&gt;\n      Saludar\n    &lt;/button&gt;\n  );\n}\n\n\nPaso de funciones como eventos\nLa función asociada al evento no se ejecuta al renderizar el componente, sino únicamente cuando ocurre el evento; es decir la pasamos como un ciudadano de primera clase.\n&lt;button onClick={manejarClick}&gt;Saludar&lt;/button&gt;\nIncorrecto:\n&lt;button onClick={manejarClick()}&gt;Saludar&lt;/button&gt;\n\n\nEventos más habituales en React\nReact soporta la mayoría de los eventos del DOM, adaptados a la sintaxis JSX. A continuación se listan los eventos más utilizados, clasificados por tipo.\n\nEventos de ratón\n\nonClick\nonDoubleClick\nonMouseEnter\nonMouseLeave\nonMouseMove\nonMouseDown\nonMouseUp\n\n\n\nEventos de teclado\n\nonKeyDown\nonKeyUp\nonKeyPress\n\n\n\nEventos de formularios\n\nonChange\nonSubmit\nonFocus\nonBlur\nonInput\nonReset\n\n\n\nEventos de carga y ciclo del elemento\n\nonLoad\nonError\n\n\n\nEventos de selección y portapapeles\n\nonSelect\nonCopy\nonCut\nonPaste\n\n\n\nEventos táctiles (dispositivos móviles)\n\nonTouchStart\nonTouchMove\nonTouchEnd\nonTouchCancel\n\n\n\n\n\nCiclo de vida de los componentes y renderizado en React\nEn React, los componentes no se renderizan directamente sobre el DOM real, sino que siguen un proceso intermedio que permite optimizar las actualizaciones de la interfaz.\nLa idea clave es que la interfaz se organiza como un árbol de componentes, análogo al árbol del DOM, pero a un nivel de abstracción superior.\n\nEl árbol de componentes\nCuando una aplicación React se ejecuta:\n\nCada componente genera otros componentes o elementos JSX.\nReact construye un árbol de componentes, donde:\n\nEl componente raíz suele ser App\nCada componente hijo ocupa una rama del árbol\n\n\nEste árbol de componentes se corresponde conceptualmente con el árbol del DOM, aunque no es el DOM real.\n\n\nProceso de renderizado\nEl proceso general es el siguiente:\n\nReact ejecuta un componente (función).\nEl componente devuelve JSX.\nEl JSX se transforma en una representación interna del árbol.\nReact compara este árbol con el anterior.\nSolo se actualizan en el DOM real los nodos que han cambiado.\n\nDe esta forma, React minimiza el acceso directo al DOM, que es una operación costosa.\n\n\nCiclo de vida (visión simplificada)\nDesde un punto de vista conceptual, un componente pasa por tres fases:\n\nMontaje\n\nEl componente se crea y se inserta en el DOM.\n\nActualización\n\nEl componente se vuelve a renderizar cuando cambian sus datos.\n\nDesmontaje\n\nEl componente se elimina del DOM.\n\n\nEn componentes funcionales modernos, este ciclo se gestiona de forma implícita mediante el renderizado y, más adelante, mediante hooks.\n\n\nRelación con el DOM\n\nEn JavaScript puro:\n\nSe modifica el DOM directamente.\n\nEn React:\n\nSe describe cómo debe ser la interfaz.\nReact decide el cuándo y el cómo modificar el DOM.\n\n\nEl desarrollador no recorre ni manipula el árbol del DOM, sino que trabaja sobre el árbol de componentes.",
+    "objectID": "pages/Bloque4/protocolos.html#visualización-de-datos",
+    "href": "pages/Bloque4/protocolos.html#visualización-de-datos",
+    "title": "Protocolos de Comunicación",
+    "section": "Visualización de datos",
+    "text": "Visualización de datos\nEn aplicaciones reales no basta con mostrar texto.\nNecesitamos:\n\nGráficas\nPaneles de control\nVisualización clara\n\nUna librería popular para React es Recharts.",
     "crumbs": [
-      "Bloque III Interacción",
-      "Semana 7",
-      "React I"
+      "Bloque IV Comunicación",
+      "Semana 11",
+      "Protocolos de Comunicación"
     ]
   },
   {
-    "objectID": "pages/Bloque3/ReactI.html#creación-de-una-reactjs-app",
-    "href": "pages/Bloque3/ReactI.html#creación-de-una-reactjs-app",
-    "title": "React I",
-    "section": "Creación de una ReactJS app",
-    "text": "Creación de una ReactJS app\nEl desarrollo de aplicaciones web modernas requiere coordinar múltiples elementos: estructura del proyecto, gestión de dependencias, compilación del código y ejecución en el navegador.\nUn framework de desarrollo proporciona un entorno de trabajo preconfigurado que organiza estos elementos y establece una forma estándar de trabajar.\n\n¿Para qué sirve un framework?\nUn framework permite al desarrollador:\n\nEvitar configuraciones manuales complejas\nSeguir una estructura común de proyecto\nAutomatizar tareas repetitivas\nCentrarse en la lógica de la aplicación y no en la infraestructura\n\nEn lugar de partir de un proyecto vacío, el framework ofrece una base funcional sobre la que desarrollar.\n\n\nFramework y React\nReact se encarga de definir cómo se construye la interfaz, pero no gestiona por sí mismo:\n\nLa estructura de archivos\nEl arranque de la aplicación\nLa compilación del código\nEl servidor de desarrollo\n\nPor ello, React se apoya en un framework que orquesta el entorno de ejecución.\n\n\nCreación de la aplicación\nPara crear una nueva aplicación React utilizando un framework, se ejecuta el siguiente comando en la terminal:\nnpm create vite@latest\nEste comando genera:\n\nUna estructura inicial del proyecto\nLa configuración necesaria para trabajar con React\nUn entorno listo para el desarrollo",
+    "objectID": "pages/Bloque4/protocolos.html#recharts",
+    "href": "pages/Bloque4/protocolos.html#recharts",
+    "title": "Protocolos de Comunicación",
+    "section": "Recharts",
+    "text": "Recharts\nRecharts es una librería basada en:\n\nComponentes React\nSVG\nComposición declarativa\n\nInstalación:\nnpm install recharts\n\nEjemplo básico\nimport {\n  LineChart, Line, XAxis, YAxis,\n  CartesianGrid, Tooltip\n} from \"recharts\";\n\nconst data = [\n  { t: 1, v: 10 },\n  { t: 2, v: 15 },\n  { t: 3, v: 8 }\n];\n\nfunction Grafica() {\n  return (\n    &lt;LineChart width={400} height={300} data={data}&gt;\n      &lt;CartesianGrid stroke=\"#ccc\" /&gt;\n      &lt;XAxis dataKey=\"t\" /&gt;\n      &lt;YAxis /&gt;\n      &lt;Tooltip /&gt;\n      &lt;Line type=\"monotone\" dataKey=\"v\" stroke=\"#8884d8\" /&gt;\n    &lt;/LineChart&gt;\n  );\n}\n\n\nInterpretación\nCada objeto representa un punto.\n{ t: 1, v: 10 }\n\nt → eje X\nv → eje Y",
     "crumbs": [
-      "Bloque III Interacción",
-      "Semana 7",
-      "React I"
+      "Bloque IV Comunicación",
+      "Semana 11",
+      "Protocolos de Comunicación"
+    ]
+  },
+  {
+    "objectID": "pages/Bloque4/protocolos.html#integración-completa",
+    "href": "pages/Bloque4/protocolos.html#integración-completa",
+    "title": "Protocolos de Comunicación",
+    "section": "Integración completa",
+    "text": "Integración completa\nWebSocket + Hook + Recharts\nObjetivo:\n\nVisualizar datos en tiempo real\n\n\nEjemplo conceptual\nfunction Dashboard() {\n\n  const data = useWebSocket(\"ws://localhost:8080\");\n\n  const chartData = data\n    ? JSON.parse(data)\n    : [];\n\n  return (\n    &lt;LineChart width={500} height={300} data={chartData}&gt;\n      &lt;XAxis dataKey=\"time\" /&gt;\n      &lt;YAxis /&gt;\n      &lt;Tooltip /&gt;\n      &lt;Line dataKey=\"value\" stroke=\"#82ca9d\" /&gt;\n    &lt;/LineChart&gt;\n  );\n}\n\n\nFlujo completo de una app moderna\nServidor → WebSocket → Hook → Estado → React → Gráfica\nArquitectura típica de sistemas en tiempo real.",
+    "crumbs": [
+      "Bloque IV Comunicación",
+      "Semana 11",
+      "Protocolos de Comunicación"
+    ]
+  },
+  {
+    "objectID": "pages/Bloque4/protocolos.html#material",
+    "href": "pages/Bloque4/protocolos.html#material",
+    "title": "Protocolos de Comunicación",
+    "section": "Material",
+    "text": "Material\nServidor de testing de Python: Enlace.\nInstalar websockets con pip install websockets\nTester de prueba: Enlace (click derecho guardar enlace como)\nhttps://recharts.github.io/",
+    "crumbs": [
+      "Bloque IV Comunicación",
+      "Semana 11",
+      "Protocolos de Comunicación"
     ]
   },
   {