Borja Villalba - Seguridad Desarrollo Diseño - 634 700 902

1. HTML

1. Títulos y Párrafos

La base de cualquier texto. `h1` para el título principal, y `p` para los párrafos.

<h1>Título Principal</h1><p>Este es un párrafo.</p>
Resultado:

Título Principal

Este es un párrafo.

2. Enlaces (Hipervínculos)

Para navegar entre páginas. `target="_blank"` abre el enlace en una nueva pestaña.

<a href="https://google.com" target="_blank">Ir a Google</a>
Resultado:Ir a Google

3. Imágenes

Muestra imágenes. `alt` es un texto alternativo crucial para la accesibilidad.

<img src="https://via.placeholder.com/150" alt="Imagen de ejemplo">
Resultado:Imagen de ejemplo

4. Listas (Ordenadas y No Ordenadas)

Organiza contenido. `ul` para viñetas y `ol` para números.

<ul><li>Elemento 1</li></ul><ol><li>Primer paso</li></ol>
Resultado:
  • Elemento 1
  1. Primer paso

5. Contenedores: Div y Span

`div` es un contenedor en bloque (ocupa todo el ancho). `span` es en línea (ocupa solo lo necesario).

<div>Soy un bloque.</div><p>Texto con un <span>span</span>.</p>
Resultado:
Soy un bloque.

Esto es texto con un span.

6. Tablas

Para mostrar datos tabulados. Se estructuran con `table`, `thead`, `tbody`, `tr`, `th` y `td`.

<table><tr><th>Nombre</th></tr><tr><td>Ana</td></tr></table>
Resultado:
NombreEdad
Ana25

7. Formularios (Input)

Para recoger datos del usuario. `label` mejora la accesibilidad.

<label for="email">Email:</label><input type="email" id="email">
Resultado:

8. Botones

Para ejecutar acciones. Pueden ser de tipo `button`, `submit` (enviar formulario) o `reset`.

<button type="button">Haz Clic</button>
Resultado:

9. Selectores (Dropdown)

Permite al usuario elegir una opción de una lista desplegable.

<select><option value="1">Opción 1</option></select>
Resultado:

10. Comentarios

Notas en el código que el navegador ignora. Útil para documentar.

<!-- Esto es un comentario -->
Resultado:

El comentario está en el código, pero no es visible aquí.

11. Área de Texto

Un campo de texto de múltiples líneas, ideal para mensajes o comentarios.

<textarea rows="4" placeholder="Escribe tu mensaje..."></textarea>
Resultado:

12. Checkbox y Radio Buttons

Checkboxes para seleccionar varias opciones y radio buttons para una sola.

<input type="checkbox" id="op1"> <label for="op1">Opción 1</label>
<input type="radio" name="grupo" id="r1"> <label for="r1">Sí</label>
Resultado:

13. Etiquetas Semánticas

Dan significado a la estructura: `header`, `nav`, `main`, `section`, `footer`.

<header>Cabecera</header><main>Contenido</main>
Resultado (Estructura no visible):

Estas etiquetas organizan el código fuente para SEO y accesibilidad.

14. Citas (Blockquote)

Para resaltar texto que es una cita de otra fuente.

<blockquote>Esto es una cita célebre.</blockquote>
Resultado:
Esto es una cita célebre. Los navegadores suelen aplicarle un margen.

15. Video

Incrusta un reproductor de vídeo en tu página. `controls` añade los botones de reproducción.

<video src="video.mp4" controls width="300"></video>
Resultado:

Aquí se mostraría tu vídeo. (El `src` es un ejemplo).

16. Audio

Incrusta un reproductor de audio. Funciona de manera similar a la etiqueta de vídeo.

<audio src="musica.mp3" controls></audio>
Resultado:

Aquí se mostraría tu audio. (El `src` es un ejemplo).

17. Iframes

Incrusta otra página web dentro de la tuya, como un mapa de Google o un vídeo de YouTube.

<iframe src="https://www.google.com/maps/embed?..."></iframe>
Resultado (Ejemplo):

Los iframes muestran contenido externo aquí.

18. Contenido Desplegable

Crea un widget de "acordeón" nativo para mostrar y ocultar información.

<details><summary>Ver más</summary><p>Contenido oculto.</p></details>
Resultado:
Haz clic para ver más

¡Este es el contenido que estaba oculto!

19. Énfasis y Negrita

`<strong>` para importancia (negrita) y `<em>` para énfasis (cursiva).

<p>Esto es <strong>importante</strong> y esto es <em>enfatizado</em>.</p>
Resultado:

Esto es importante y esto es enfatizado.

20. Saltos de Línea y Reglas

`<br>` fuerza un salto de línea y `<hr>` crea una línea horizontal de separación.

<p>Línea 1.<br>Línea 2.</p><hr>
Resultado:

Línea 1.
Línea 2.

Conceptos Avanzados

21. Canvas para Gráficos

La etiqueta `canvas` se usa con JavaScript para dibujar gráficos dinámicamente.

<canvas id="miCanvas" width="200" height="100"></canvas>
Resultado:

22. SVG para Gráficos Vectoriales

Incrusta gráficos vectoriales escalables directamente en el HTML.

<svg width="100" height="100">
                  <circle cx="50" cy="50" r="40" fill="#ffeb3b" />
                </svg>
Resultado:

23. Datalist para Autocompletar

Proporciona sugerencias a un campo `input` sin forzar la elección.

<input list="frutas">
                <datalist id="frutas">
                  <option value="Manzana">
                  <option value="Naranja">
                </datalist>
Resultado:

24. Medidores (Meter y Progress)

`progress` para tareas en curso y `meter` para mediciones en un rango conocido.

<label>Progreso:</label> <progress value="70" max="100"></progress>
                <label>Uso disco:</label> <meter value="0.8"></meter>
Resultado:
80%

25. La etiqueta Picture

Permite cargar diferentes imágenes según el tamaño de la pantalla (responsive design).

<picture>
                  <source media="(min-width: 650px)" srcset="img_grande.jpg">
                  <img src="img_pequena.jpg">
                </picture>
Resultado:

El navegador elige la imagen correcta según el ancho de la ventana.

26. Atributos ARIA para Accesibilidad

Mejoran la accesibilidad para lectores de pantalla. `aria-label` describe un elemento.

<button aria-label="Cerrar ventana">X</button>
Resultado:

(El lector de pantalla dirá "Cerrar ventana" en lugar de "X").

27. Entradas de Formulario Avanzadas

HTML5 introdujo nuevos tipos de `input` como `date`, `color`, y `range`.

<input type="date">
                <input type="range" min="0" max="100">
Resultado:

28. Atributo `download` en enlaces

Indica al navegador que debe descargar el recurso enlazado en lugar de navegar a él.

<a href="/archivo.zip" download>Descargar Archivo</a>
Resultado:Descargar (Ejemplo)

29. Atributos `async` y `defer` en Scripts

`defer` ejecuta el script después de analizar el HTML. `async` lo ejecuta en cuanto se descarga.

<script src="script.js" defer></script>
Resultado:

Estos atributos optimizan la carga de la página. No tienen un efecto visual directo.

30. Microdatos con `itemscope` e `itemprop`

Añaden contexto semántico al contenido para que los motores de búsqueda lo entiendan mejor.

<div itemscope itemtype="http://schema.org/Person">
                  <span itemprop="name">Ana</span>
                </div>
Resultado (Estructura no visible):

Ayuda al SEO describiendo que "Ana" es el nombre de una persona.

31. Elementos `template` y `slot`

Son la base de los Web Components. `template` contiene HTML inerte que se puede clonar con JS.

<template id="mi-plantilla">
                  <p>Contenido de la plantilla</p>
                </template>
Resultado:

El contenido del template no es visible hasta que se activa con JavaScript.

32. Atributos de validación de formularios

Valida los datos en el navegador sin JS usando `required`, `pattern`, `minlength`, etc.

<input type="text" pattern="[A-Za-z]{3,}" required>
Resultado:

33. Contenido editable

El atributo `contenteditable` permite al usuario editar cualquier elemento HTML.

<div contenteditable="true">Puedes editarme.</div>
Resultado:
Puedes hacer clic aquí y editar este texto.

34. Atributo `hidden`

Oculta un elemento de forma semántica. Es similar a `display: none;` en CSS.

<p hidden>Este párrafo está oculto.</p>
Resultado:

Párrafo visible.

35. Mapa de imagen

Define áreas clicables dentro de una imagen con la etiqueta `map` y `area`.

<img src="planetas.gif" usemap="#planetmap">
                <map name="planetmap">
                  <area shape="rect" coords="0,0,82,126" href="sol.htm">
                </map>
Resultado:

Permite que diferentes partes de una imagen sean enlaces distintos.

36. Atributo `spellcheck`

Indica si el navegador debe revisar la ortografía de un campo de texto o elemento editable.

<textarea spellcheck="true"></textarea>
Resultado:

37. Atributo `translate`

Indica a las herramientas de traducción si el contenido de un elemento debe ser traducido.

<p>No traduzcas <span translate="no">Apple</span>.</p>
Resultado (Estructural):

Útil para nombres de marcas o código que no debe ser traducido.

38. Carga diferida de imágenes

El atributo `loading="lazy"` hace que las imágenes solo se carguen cuando están a punto de aparecer en pantalla.

<img src="imagen.jpg" loading="lazy">
Resultado:

Optimiza el rendimiento. No tiene efecto visual directo en la carga inicial.

39. Agrupación de opciones en un `select`

La etiqueta `optgroup` permite agrupar opciones relacionadas dentro de un menú desplegable.

<select>
                  <optgroup label="Europeos">
                    <option>Audi</option>
                  </optgroup>
                </select>
Resultado:

40. Relaciones de enlace avanzadas

El atributo `rel` puede especificar relaciones como `noopener`, `noreferrer`, `prefetch`, etc.

<link rel="prefetch" href="/pagina_siguiente.html">
Resultado (No visible):

`prefetch` le dice al navegador que cargue un recurso en segundo plano porque es probable que el usuario lo necesite pronto.

2. CSS

1. Color y Fondo

`color` para el texto y `background-color` para el fondo.

p { color: #f0f0f0; background-color: #2196f3; }
Resultado:

Texto blanco sobre fondo azul.

2. Modelo de Caja

`margin` (exterior), `padding` (interior) y `border` (borde) definen el espacio de un elemento.

div { margin: 10px; padding: 20px; border: 2px solid #fff; }
Resultado:
Caja con espaciado.

3. Estilos de Texto

`font-size` (tamaño), `font-weight` (grosor) y `text-align` (alineación).

p { font-size: 18px; font-weight: bold; text-align: center; }
Resultado:

Texto centrado y en negrita.

4. Propiedad `display`

`block` (ocupa todo el ancho), `inline` (solo lo necesario) e `inline-block` (en línea pero con dimensiones).

span { display: block; }
Resultado:Un span inline y un span en bloque.

5. Flexbox (Alinear)

La forma moderna de alinear elementos. `display: flex` en el contenedor y `justify-content` para alinear horizontalmente.

.container { display: flex; justify-content: space-around; }
Resultado:
A
B
C

6. Grid (Maquetación)

Para crear diseños complejos en dos dimensiones (filas y columnas).

.container { display: grid; grid-template-columns: 1fr 1fr; }
Resultado:
1
2

7. `position`

`relative` para posicionar respecto a su lugar original y `absolute` respecto a su contenedor `relative` más cercano.

.hijo { position: absolute; top: 5px; right: 5px; }
Resultado:
Absoluto

8. Pseudo-clases

Estilos para estados especiales. `:hover` (al pasar el ratón), `:focus` (al seleccionar un input), etc.

button:hover { background-color: #ffeb3b; color: #333; }
Resultado:

9. Media Queries (Responsive)

Aplica estilos diferentes según el tamaño de la pantalla. Es la base del diseño responsive.

@media (max-width: 600px) { body { background: #333; } }
Resultado:

Cambia el tamaño de la ventana. Si es menor de 600px, el fondo de la página cambiaría.

10. Transiciones

Anima suavemente el cambio de una propiedad CSS.

div { transition: transform 0.3s; } div:hover { transform: scale(1.1); }
Resultado:

11. Sombras (Box Shadow)

Añade una sombra a un elemento para darle profundidad.

div { box-shadow: 5px 5px 15px rgba(0,0,0,0.5); }
Resultado:
Caja con sombra

12. Bordes Redondeados

Suaviza las esquinas de un elemento con `border-radius`.

div { border-radius: 15px; }
Resultado:
Esquinas redondeadas

13. Opacidad

Controla la transparencia de un elemento. `1` es totalmente opaco y `0` es invisible.

div { opacity: 0.7; }
Resultado:
Soy semi-transparente

14. Fondos con Gradiente

Crea transiciones suaves entre dos o más colores en el fondo de un elemento.

div { background: linear-gradient(to right, #2196f3, #00bcd4); }
Resultado:
Gradiente

15. Transformaciones 2D

Mueve, escala o rota elementos con `transform`. `rotate`, `scale`, `translate`, `skew`.

div:hover { transform: rotate(15deg) scale(1.1); }
Resultado (pasa el ratón):

16. Pseudo-elementos

`::before` y `::after` permiten añadir contenido cosmético antes o después de un elemento.

p::before { content: "► "; }
Resultado:

Este texto tiene un pseudo-elemento.

17. Desbordamiento (Overflow)

Controla qué pasa cuando el contenido es más grande que su contenedor. `scroll`, `hidden`.

div { overflow: scroll; height: 50px; }
Resultado:
Este es un texto muy largo que no cabe en la caja. Por eso, gracias a overflow, aparecen barras de desplazamiento.

18. Filtros Gráficos

Aplica efectos como `blur` (desenfoque), `grayscale` (escala de grises) o `brightness` (brillo).

img { filter: grayscale(100%); }
Resultado:placeholder

19. Variables (Custom Properties)

Define valores reutilizables para mantener la consistencia en tus estilos.

:root { --main-color: #00bcd4; } div { color: var(--main-color); }
Resultado:

Este texto usa una variable de color.

20. Selectores Avanzados

Selecciona elementos de forma más específica, como `p + p` (el párrafo que sigue a otro) o `li:nth-child(odd)` (los `li` impares).

li:nth-child(odd) { background: #555; }
Resultado:
  • Impar
  • Par
  • Impar

Conceptos Avanzados

21. Animaciones con @keyframes

Define animaciones complejas con múltiples pasos, más allá de las transiciones simples.

@keyframes pulso {
                  0% { transform: scale(1); }
                  50% { transform: scale(1.1); }
                  100% { transform: scale(1); }
                }
                .elemento { animation: pulso 2s infinite; }
Resultado:

22. CSS Grid Avanzado con `grid-area`

Permite nombrar áreas de la cuadrícula y posicionar elementos de forma semántica.

.container { grid-template-areas: "header" "main" "footer"; }
                .header { grid-area: header; }
Resultado:

Define la maquetación de una página completa de forma muy clara.

23. `clip-path` para Formas Complejas

Recorta un elemento para que se ajuste a una forma geométrica en lugar de ser un rectángulo.

.elemento { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
Resultado:

24. Modos de Fusión (`mix-blend-mode`)

Controla cómo el contenido de un elemento se mezcla con el contenido de su fondo.

h1 { mix-blend-mode: screen; background: #fff; color: #000; }
Resultado:

TEXTO FUSIONADO

25. Transformaciones 3D

Mueve elementos en un espacio tridimensional con `rotateX`, `rotateY` y `translateZ`.

.card:hover { transform: rotateY(180deg); }
Resultado:

Permite crear efectos como tarjetas que se voltean.

26. Feature Queries (`@supports`)

Aplica estilos solo si el navegador soporta una propiedad CSS específica.

@supports (display: grid) {
                  /* Estilos solo para navegadores con Grid */
                }
Resultado:

Permite usar tecnologías modernas y tener un fallback para navegadores antiguos.

27. Scroll Snapping

Fuerza al viewport a "ajustarse" a ciertos puntos al hacer scroll, ideal para sliders.

.container { scroll-snap-type: x mandatory; }
                .slide { scroll-snap-align: start; }
Resultado:

Crea galerías de imágenes o secciones a pantalla completa de forma nativa.

28. Selector `:not()`

Selecciona todos los elementos que NO coinciden con el selector dentro del paréntesis.

div:not(.clase-excluida) { border: 1px solid red; }
Resultado:
Normal
Excluido
Normal

29. `calc()` para Cálculos Dinámicos

Permite realizar cálculos matemáticos para determinar los valores de las propiedades CSS.

.elemento { width: calc(100% - 80px); }
Resultado:
Ocupo el 100% menos 80px
80px

30. Filtros de fondo (`backdrop-filter`)

Aplica filtros gráficos (como `blur`) a la zona detrás de un elemento.

.modal { backdrop-filter: blur(10px); }
Resultado:

Crea el efecto de "cristal esmerilado" popular en muchas interfaces.

31. Container Queries (`@container`)

La evolución de las media queries. Permite que un componente cambie su estilo según el tamaño de su contenedor, no de la ventana.

@container (min-width: 400px) {
                  .componente { flex-direction: row; }
                }
Resultado:

Revoluciona el diseño de componentes reutilizables.

32. Selector de atributo avanzado

Selecciona elementos basados en sus atributos, como `[href$=".pdf"]` para enlaces que terminan en .pdf.

a[href$=".pdf"]::after { content: " (PDF)"; }
Resultado:
Documento

33. `writing-mode`

Cambia la dirección del texto, útil para idiomas verticales o efectos creativos.

h2 { writing-mode: vertical-rl; }
Resultado:

Vertical

34. `object-fit` para Imágenes

Controla cómo una imagen se ajusta a su contenedor sin distorsionarse. Similar a `background-size`.

img { width: 100px; height: 100px; object-fit: cover; }
Resultado:placeholder

35. `scroll-behavior: smooth`

Anima el desplazamiento al hacer clic en un enlace de anclaje, sin necesidad de JavaScript.

html { scroll-behavior: smooth; }
Resultado:

Pruébalo haciendo clic en los enlaces del menú de navegación de esta página.

36. Formas con `border-radius`

Usando valores avanzados, puedes crear formas complejas, no solo círculos o esquinas redondeadas.

.elemento { border-radius: 50% 20% / 10% 40%; }
Resultado:

37. Columnas de texto

Divide el texto de un elemento en un número definido de columnas, como en un periódico.

.texto { column-count: 3; column-gap: 20px; }
Resultado:

Este texto se dividirá automáticamente en dos columnas para facilitar la lectura, similar al formato que se puede encontrar en un periódico o revista impresa.

38. `text-overflow: ellipsis`

Muestra puntos suspensivos (...) cuando un texto no cabe en su contenedor.

.linea-unica {
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
Resultado:

Este es un texto muy largo que no cabrá y será cortado.

39. `caret-color`

Cambia el color del cursor de texto (caret) en los campos de entrada.

input { caret-color: #00bcd4; }
Resultado:

40. Selector `:has()`

El "selector padre". Selecciona un elemento si contiene otros elementos que coincidan.

figure:has(figcaption) { border: 1px solid #ccc; }
Resultado (Conceptual):

Un `<div>` que contenga un `<p>` podría tener un estilo diferente a un `<div>` que no lo tenga. Aún es muy nuevo.

3. JAVASCRIPT

1. Cambiar Contenido HTML

Seleccionar un elemento por su `id` y cambiar su `innerHTML`.

document.getElementById("demo").innerHTML = "¡Hola!";
Resultado:

Texto original.

2. Cambiar Estilos CSS

Modificar el estilo de un elemento dinámicamente.

document.getElementById("demo").style.color = "red";
Resultado:

Este texto cambiará de color.

3. `addEventListener`

La forma moderna de escuchar eventos (clics, teclado, etc.) sin usar `onclick` en el HTML.

const btn = document.getElementById("miBoton"); btn.addEventListener("click", miFuncion);
Resultado:

4. Ocultar/Mostrar Elemento

Alternar la visibilidad de un elemento cambiando su estilo `display`.

elemento.style.display = 'none'; // Ocultar elemento.style.display = 'block'; // Mostrar
Resultado:
¡Sorpresa!

5. Obtener Valor de un Input

Leer lo que el usuario ha escrito en un campo de texto.

let valor = document.getElementById("miInput").value;
Resultado:

6. Trabajar con Arrays y Bucles

Recorrer una lista de elementos y hacer algo con cada uno, como mostrarlos en una lista.

frutas.forEach(fruta => { console.log(fruta); });
Resultado:

    7. Condicionales (if/else)

    Ejecutar un código u otro dependiendo de si una condición es verdadera o falsa.

    if (hora < 12) { saludo = "Buenos días"; }
    Resultado:

    ...

    8. Peticiones a API con `fetch`

    Obtener datos de un servidor externo de forma asíncrona.

    fetch('URL') .then(res => res.json()) .then(data => ...);
    Resultado:

    Pulsa para obtener un dato.

    9. Temporizadores

    `setTimeout` ejecuta una función después de un tiempo, y `setInterval` la repite cada cierto intervalo.

    setTimeout(() => { alert("¡Tiempo!"); }, 3000);
    Resultado:

    La alerta aparecerá en 3 segundos.

    10. Manipular Clases CSS

    Añadir, quitar o alternar clases CSS en un elemento para cambiar su apariencia o comportamiento.

    elemento.classList.toggle("clase-activa");
    Resultado:

    Texto

    11. Crear y Añadir Elementos

    Crear un nuevo elemento HTML desde cero y añadirlo a la página.

    const p = document.createElement("p"); p.innerText = "Hola"; document.body.appendChild(p);
    Resultado:

    12. Validar un Formulario

    Comprobar si los campos de un formulario están vacíos antes de enviarlo.

    const input = document.getElementById("nombre"); if (input.value === "") { alert("El nombre es obligatorio"); }
    Resultado:

    13. Objetos Simples

    Agrupar datos relacionados en una sola variable. Se accede a las propiedades con `.`.

    const persona = { nombre: "Juan", edad: 30 }; alert(persona.nombre);
    Resultado:

    14. Método `Array.map()`

    Crea un nuevo array aplicando una función a cada elemento del array original.

    const numeros = [1, 2, 3]; const dobles = numeros.map(n => n * 2);
    Resultado (ver consola):

    Transforma [1,2,3] en [2,4,6].

    15. Método `Array.filter()`

    Crea un nuevo array con los elementos que cumplen una condición.

    const numeros = [1, 2, 3, 4]; const pares = numeros.filter(n => n % 2 === 0);
    Resultado (ver consola):

    Filtra [1,2,3,4] y devuelve [2,4].

    16. Guardar en Local Storage

    Guarda datos en el navegador que persisten incluso después de cerrarlo.

    localStorage.setItem("usuario", "Ana"); const user = localStorage.getItem("usuario");
    Resultado:

    17. Template Literals

    Una forma más fácil de construir strings insertando variables con `${}`.

    const nombre = "Luis"; const saludo = `Hola, ${nombre}!`;
    Resultado:

    18. Operador Ternario

    Un atajo para una sentencia `if/else` simple.

    const edad = 20; const acceso = edad >= 18 ? "Permitido" : "Denegado";
    Resultado:

    19. `querySelector`

    Un selector más versátil que `getElementById`. Puede seleccionar por `id`, `clase`, `etiqueta`, etc., usando selectores CSS.

    const primerDiv = document.querySelector("div.miClase");
    Resultado:
    Soy un div con una clase.

    20. Trabajar con JSON

    Convierte un string JSON a un objeto JavaScript (`parse`) y un objeto a un string JSON (`stringify`).

    const obj = JSON.parse('{"nombre":"Ana"}'); const str = JSON.stringify(obj);
    Resultado (ver consola):

    Convierte texto a objeto y viceversa.

    Conceptos Avanzados

    21. `async/await` con `fetch`

    Una sintaxis más limpia para manejar promesas y código asíncrono.

    async function obtenerDatos() {
                  const response = await fetch(URL);
                  const data = await response.json();
                  console.log(data);
                }
    Resultado:

    Pulsa para obtener un dato.

    22. Desestructuración de Objetos y Arrays

    Extrae valores de objetos o arrays en variables distintas de forma concisa.

    const { nombre, edad } = persona;
                const [primero, segundo] = miArray;
    Resultado (ver consola):

    23. Operadores Spread y Rest

    Spread (`...`) expande un array/objeto. Rest (`...`) agrupa argumentos de función en un array.

    const arr2 = [...arr1, 4, 5];
                function sumar(...numeros) { /* ... */ }
    Resultado (ver consola):

    24. `Array.reduce()`

    Ejecuta una función "reductora" sobre cada elemento de un array, resultando en un único valor de retorno.

    const suma = [1, 2, 3].reduce((acc, val) => acc + val, 0); // suma = 6
    Resultado (ver consola):

    25. Promesas

    Un objeto que representa la eventual finalización (o fallo) de una operación asíncrona.

    new Promise((resolve, reject) => {
                  setTimeout(() => resolve("¡Éxito!"), 1000);
                });
    Resultado:

    Esperando promesa...

    26. Clases y Herencia (ES6)

    Azúcar sintáctico sobre la herencia prototípica de JavaScript para una POO más clara.

    class Animal { constructor(nombre) { this.nombre = nombre; } }
                class Perro extends Animal { ladrar() { /*...*/ } }
    Resultado (ver consola):

    27. Módulos (import/export)

    Permiten dividir el código en archivos reutilizables.

    // fichero.js
                export const miVar = 10;
                // otro.js
                import { miVar } from './fichero.js';
    Resultado:

    Esto requiere una estructura de archivos y no se puede ejecutar directamente aquí.

    28. API de Intersection Observer

    Observa de forma eficiente cuándo un elemento entra o sale de la pantalla (viewport).

    const observer = new IntersectionObserver(callback);
                observer.observe(elemento);
    Resultado:

    Esta página lo usa para animar las tarjetas cuando haces scroll.

    29. Delegación de Eventos

    Añade un solo `listener` a un elemento padre para manejar eventos en múltiples hijos.

    lista.addEventListener('click', (e) => {
                  if (e.target.tagName === 'LI') { /*...*/ }
                });
    Resultado:

    Es más eficiente que añadir un listener a cada `<li>` de una lista larga.

    30. Web Components (Custom Elements)

    Permite crear tus propias etiquetas HTML reutilizables con su propia lógica y estilo.

    class MiComponente extends HTMLElement { /*...*/ }
                customElements.define('mi-componente', MiComponente);
    Resultado:

    Permite crear etiquetas como `<mi-componente></mi-componente>`.

    31. API de Geolocalización

    Permite al usuario compartir su ubicación con una aplicación web.

    navigator.geolocation.getCurrentPosition((pos) => {
                  console.log(pos.coords.latitude);
                });
    Resultado:

    Ubicación...

    32. Manejo de Errores con `try...catch`

    Ejecuta código que puede fallar y "atrapa" el error para manejarlo sin detener la ejecución.

    try { funcionQueFalla(); } catch (error) { console.error(error); }
    Resultado (ver consola):

    33. Set y Map

    `Set` es una colección de valores únicos. `Map` es una colección de pares clave-valor.

    const unicos = new Set([1, 1, 2, 3]); // {1, 2, 3}
                const mapa = new Map([['a', 1]]);
    Resultado (ver consola):

    34. `Proxy`

    Permite crear un intermediario para otro objeto que puede interceptar y redefinir operaciones.

    const handler = { get: (obj, prop) => 42 };
                const proxy = new Proxy({}, handler);
    Resultado:

    Útil para validación, logging o virtualización. Es un concepto muy avanzado.

    35. Web Workers

    Ejecuta un script en un hilo de segundo plano para no bloquear la interfaz de usuario.

    const worker = new Worker('worker.js');
    Resultado:

    Ideal para tareas computacionalmente intensivas.

    36. Optional Chaining (`?.`)

    Permite leer el valor de una propiedad ubicada en lo profundo de una cadena de objetos sin tener que validar cada referencia.

    const nombre = user?.profile?.name;
    Resultado (ver consola):

    37. Nullish Coalescing Operator (`??`)

    Devuelve el operando del lado derecho cuando el del lado izquierdo es `null` o `undefined`.

    const valor = variableNula ?? 'valor por defecto';
    Resultado (ver consola):

    38. `Object.freeze()`

    Congela un objeto. Un objeto congelado ya no se puede cambiar.

    const obj = { prop: 42 };
                Object.freeze(obj);
                obj.prop = 33; // Lanza un error en modo estricto
    Resultado (ver consola):

    39. `Intl` API para Internacionalización

    Proporciona formato de números, fechas y horas sensible al idioma.

    new Intl.DateTimeFormat('es-ES').format(new Date());
                new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(1234);
    Resultado:

    40. `requestAnimationFrame`

    La forma correcta de ejecutar animaciones en el navegador, sincronizándose con los repintados.

    function animar() { /* ... */ requestAnimationFrame(animar); }
    Resultado:

    Más eficiente que usar `setInterval` para animaciones visuales.

    4. PHP

    1. Sintaxis Básica y `echo`

    El código PHP se encierra en `<?php ... ?>`. `echo` se usa para imprimir texto.

    <?php echo "Hola, Mundo!"; ?>
    Resultado HTML:

    Hola, Mundo!

    2. Variables

    Las variables en PHP empiezan con `$`. No necesitan ser declaradas con un tipo.

    <?php $nombre = "Ana"; echo "Hola, " . $nombre; ?>
    Resultado HTML:

    Hola, Ana

    3. Arrays

    Colecciones de datos. Pueden ser indexados numéricamente o asociativos (con claves de texto).

    <?php $frutas = ["Manzana", "Pera"]; echo $frutas[0]; ?>
    Resultado HTML:

    Manzana

    4. Condicionales (if/else)

    Ejecutan código basado en si una condición es verdadera o falsa.

    <?php $edad = 20; if ($edad >= 18) { echo "Mayor de edad"; } ?>
    Resultado HTML:

    Mayor de edad

    5. Bucle `for`

    Repite un bloque de código un número específico de veces.

    <?php for ($i = 1; $i <= 3; $i++) { echo $i . " "; } ?>
    Resultado HTML:

    1 2 3

    6. Bucle `foreach`

    La forma más fácil de iterar sobre cada elemento de un array.

    <?php $colores = ["rojo", "verde"]; foreach ($colores as $color) { echo $color . " "; } ?>
    Resultado HTML:

    rojo verde

    7. Funciones

    Bloques de código reutilizables que pueden aceptar parámetros y devolver un valor.

    <?php function saludar($nombre) { return "Hola, " . $nombre; } echo saludar("Luis"); ?>
    Resultado HTML:

    Hola, Luis

    8. Obtener datos de un formulario (GET)

    La superglobal `$_GET` contiene los datos enviados en la URL.

    <!-- URL: /pagina.php?nombre=Juan -->
                <?php echo "Tu nombre es " . $_GET['nombre']; ?>
    Resultado HTML:

    Tu nombre es Juan

    9. Obtener datos de un formulario (POST)

    La superglobal `$_POST` contiene los datos enviados en el cuerpo de la petición.

    <!-- Desde un <form method="POST"> -->
                <?php echo "Contraseña: " . $_POST['password']; ?>
    Resultado HTML:

    Contraseña: (valor del input)

    10. `include` y `require`

    Incluyen y evalúan un archivo específico. Útil para plantillas (cabeceras, pies de página).

    <?php include 'header.php'; ?>
    Resultado HTML:

    El contenido de 'header.php' aparecería aquí.

    11. Fechas y Horas

    La función `date()` formatea la fecha y hora actual del servidor.

    <?php echo "Hoy es " . date("d/m/Y"); ?>
    Resultado HTML:

    Hoy es 19/10/2025

    12. Superglobal `$_SERVER`

    Contiene información sobre cabeceras, rutas y ubicaciones de scripts.

    <?php echo "Tu IP es: " . $_SERVER['REMOTE_ADDR']; ?>
    Resultado HTML:

    Tu IP es: (la IP del visitante)

    13. Sesiones (`$_SESSION`)

    Permiten almacenar información del usuario a través de múltiples páginas (ej: login).

    <?php session_start(); $_SESSION['usuario'] = "borja"; ?>
    Resultado HTML:

    (No hay salida directa. El dato 'borja' se guarda en el servidor para este usuario).

    14. Cookies

    Almacenan datos en el navegador del cliente. Útil para recordar preferencias.

    <?php setcookie("idioma", "es", time() + 3600); ?>
    Resultado HTML:

    (No hay salida directa. Se envía una cabecera al navegador para que guarde la cookie).

    15. Clases y Objetos (POO)

    PHP soporta programación orientada a objetos para organizar el código.

    <?php
                class Coche { public $color = "Rojo"; }
                $miCoche = new Coche();
                echo $miCoche->color;
                ?>
    Resultado HTML:

    Rojo

    16. Trabajar con JSON

    `json_encode` convierte un array PHP a JSON. `json_decode` hace lo contrario.

    <?php $datos = ["nombre" => "Ana"]; echo json_encode($datos); ?>
    Resultado HTML:

    {"nombre":"Ana"}

    17. Leer un Fichero

    La función `file_get_contents` lee el contenido completo de un archivo en una cadena.

    <?php $contenido = file_get_contents("mi_texto.txt"); echo $contenido; ?>
    Resultado HTML:

    (El contenido del archivo 'mi_texto.txt' se mostraría aquí).

    18. Escribir en un Fichero

    `file_put_contents` escribe datos en un archivo, sobreescribiéndolo por defecto.

    <?php file_put_contents("log.txt", "Usuario accedió\n", FILE_APPEND); ?>
    Resultado HTML:

    (No hay salida. El texto se añade al final del archivo 'log.txt' en el servidor).

    19. Conexión a Base de Datos (PDO)

    PDO (PHP Data Objects) es la forma moderna y segura de conectar PHP a una base de datos.

    <?php
                $dsn = "mysql:host=localhost;dbname=test";
                try {
                  $pdo = new PDO($dsn, "user", "pass");
                  echo "Conectado";
                } catch (PDOException $e) { /*...*/ }
                ?>
    Resultado HTML:

    Conectado

    20. Hashear Contraseñas

    Nunca guardes contraseñas en texto plano. Usa `password_hash` y `password_verify`.

    <?php $hash = password_hash("mi_pass_123", PASSWORD_DEFAULT); echo $hash; ?>
    Resultado HTML:

    (Un hash largo y seguro como $2y$10$...).