Antes de empezar

Todo lo que haremos este curso se construye sobre lo que aprendiste en Programación 1º: las imágenes interactivas usan position, el responsive parte de las media queries y JavaScript cambia el HTML y el CSS que ya sabes escribir. Después del verano es normal haber olvidado cosas, así que empezamos poniéndonos al día.

No vamos a repetir el curso pasado. Vamos a revisar tu portfolio con una lista guiada: cada punto te dice qué comprobar y te lleva al sitio donde está explicado, para que repases sólo lo que necesites.

Tu herramienta para este curso: el esquema de HTML y CSS de Recursos reúne lo imprescindible de 1º en una sola página, con enlaces a cada apartado de los apuntes. Tenlo a mano durante todo el curso: puedes abrirlo en otra pestaña o imprimirlo.

Recupera tu portfolio

1. Busca la carpeta de tu portfolio de 1º. Si sólo lo tienes publicado, descárgalo desde GitHub o Netlify.
2. Ábrela en Visual Studio Code (Archivo → Abrir carpeta) y comprueba que la estructura está ordenada: index.html en la raíz y carpetas css e img.
3. Abre index.html en el navegador y recorre todas las páginas. Apunta lo que no funcione o no te guste.
4. Haz una copia de seguridad de la carpeta tal y como está ahora, con la fecha en el nombre (portfolio-septiembre). Al final del curso podrás comparar.

Ojo: si no tienes portfolio de 1º o no lo encuentras, no pasa nada: empieza uno nuevo con la estructura básica y una página de inicio con tu nombre, una presentación y tres proyectos. La revisión del apartado siguiente te servirá de guía.

El entorno de trabajo

En 1º empezaste a usar Visual Studio Code para escribir HTML y CSS. Este curso también escribirás JavaScript, así que merece la pena dejarlo bien configurado: un buen entorno te avisa de los errores, ordena el código por ti y te ahorra mucho tiempo.

A un editor como VS Code, con todo lo necesario para programar (resaltado de código, autocompletado, terminal, extensiones), se le llama IDE (Integrated Development Environment, entorno de desarrollo integrado).

Ajustes recomendados

Abre los ajustes con Ctrl + , (en Mac, Cmd + ,), busca cada uno por su nombre y actívalo:

• Format On Save: ordena y sangra el código cada vez que guardas.
• Word Wrap (on): las líneas largas se parten para que no haya que desplazarse en horizontal.
• Auto Save (afterDelay): guarda solo, para que nunca pruebes en el navegador una versión antigua.
• Tab Size (2): sangrías de dos espacios, lo más habitual en web.

Extensiones

Las extensiones añaden funciones al editor. Se instalan desde el icono de los cuatro cuadrados de la barra lateral. Con éstas tienes de sobra:

Ojo: no instales extensiones a lo loco. Cada una consume memoria y algunas chocan entre sí. Si el editor empieza a ir lento o a hacer cosas raras, revisa cuáles tienes y desactiva las que no uses.

Escribir más rápido: Emmet

VS Code trae Emmet, un sistema de abreviaturas que se convierten en código al pulsar Tab:

Atajos imprescindibles

Qué es programar

Programar es escribir instrucciones para que un ordenador haga algo. Un programa es esa lista de instrucciones, escrita en un lenguaje que el ordenador entiende.

El ordenador tiene dos cualidades y un gran defecto:

• Es rapidísimo: hace millones de operaciones por segundo.
• Es totalmente obediente: hace exactamente lo que le dices, sin cansarse ni equivocarse.
• Pero no entiende nada: no interpreta, no supone y no tiene sentido común. Si le das una instrucción ambigua o en el orden equivocado, hará algo absurdo sin pestañear.

Por eso, la parte difícil de programar no es aprender un lenguaje, sino aprender a pensar los pasos con precisión. Eso es lo que trabajamos en este tema, antes de escribir código.

¿HTML y CSS son programación?

No exactamente. HTML y CSS son lenguajes descriptivos: describen qué hay en la página y cómo se ve, pero no deciden nada ni hacen nada por sí solos. Un lenguaje de programación como JavaScript puede:

• tomar decisiones: «si el usuario ha escrito su correo, envía el formulario; si no, muestra un aviso»;
• repetir tareas: «crea una tarjeta por cada proyecto de la lista»;
• reaccionar a lo que pasa: «cuando se pulse este botón, abre el menú».

El pensamiento computacional

Se llama así a la forma de abordar problemas que usan los programadores. Tiene cuatro ideas, y verás que como diseñador ya las usas sin saberlo:

Idea clave: programar no es cosa de matemáticos. Es sobre todo ordenar ideas, ser preciso y tener paciencia para buscar errores. Son las mismas habilidades que usas al resolver un encargo de diseño.

Algoritmos y pseudocódigo

Un algoritmo es una serie de pasos ordenados y precisos para resolver un problema. Una receta de cocina, las instrucciones de montaje de un mueble o las indicaciones para llegar a un sitio son algoritmos.

Para que un ordenador pueda seguirlo, un algoritmo tiene que ser:

• Preciso: cada paso dice exactamente qué hacer, sin ambigüedades.
• Ordenado: los pasos van en un orden concreto, y cambiarlo cambia el resultado.
• Finito: termina en algún momento.
• Con una entrada (los datos de partida) y una salida (el resultado).

El problema de ser preciso

Imagina que le das estas instrucciones a un robot para dibujar una casa:

1. Coge un lápiz.
2. Dibuja un cuadrado.
3. Dibuja un triángulo encima.

Una persona lo entendería. Un robot, no: ¿de qué tamaño es el cuadrado? ¿Dónde lo dibujo? ¿«Encima» significa apoyado en el cuadrado o flotando? ¿De qué tamaño es el triángulo? Para un robot habría que escribir algo así:

1. Coge un lápiz con la mano derecha.
2. Pon la punta en el centro de la hoja.
3. Traza una línea recta de 5 cm hacia la derecha.
4. Gira 90° hacia arriba y traza otra línea de 5 cm.
5. Repite el paso 4 dos veces más: ya tienes un cuadrado.
6. …

Fíjate en el paso 5: en lugar de escribir tres veces lo mismo, decimos «repite». Es la primera señal de que, al programar, buscamos patrones.

Las tres piezas de cualquier algoritmo

Por complejo que sea, cualquier programa se construye combinando sólo tres estructuras:

Más adelante, en este mismo tema, veremos cómo se escribe cada una en JavaScript: las decisiones son los condicionales y las repeticiones, los bucles.

Pseudocódigo

Es escribir el algoritmo en lenguaje normal, pero con la estructura de un programa: una instrucción por línea, con palabras clave en mayúsculas para las decisiones y repeticiones, y con sangría para ver qué va dentro de qué. No es un lenguaje real: no hay reglas fijas, el objetivo es que se entienda.

Una decisión: elegir el color del texto según el fondo.

INICIO
  Pedir el color de fondo
  SI el fondo es oscuro ENTONCES
    Usar texto claro
  SI NO
    Usar texto oscuro
  FIN SI
  Mostrar el texto
FIN

Una repetición: colocar las fotos de una galería.

INICIO
  Número de foto = 1
  MIENTRAS queden fotos por colocar
    Colocar la foto en la galería
    Número de foto = número de foto + 1
  FIN MIENTRAS
FIN

Fíjate: Número de foto = número de foto + 1 no es una ecuación de matemáticas (sería imposible). En programación significa «coge el valor que tiene, súmale uno y guárdalo de nuevo». Es una de las ideas que más extrañan al empezar.

Para saber más (opcional)

Contenidos para ir más allá, si te sobra tiempo o te interesa el tema.

Práctica

Empieza sin ordenador y termina con el editor listo para todo el curso.

1. El robot humano. Por parejas: cada uno dibuja en secreto una figura sencilla con formas geométricas y escribe las instrucciones para dibujarla. El compañero las sigue al pie de la letra, sin preguntar. ¿Dónde estaban las ambigüedades?
2. Escribe en pseudocódigo un algoritmo para decidir si una imagen está lista para publicarse en tu web (¿pesa menos de 300 KB? ¿tiene alt?).
3. Configura VS Code con los ajustes y las extensiones de este tema, y abre tu portfolio con Live Server.

Retos opcionales

• Dibuja el diagrama de flujo de tu algoritmo de las imágenes.
• Rehaz con Emmet la estructura de una página de tu portfolio: ¿cuánto tardas?

Comprueba: ¿tu pseudocódigo lo podría seguir alguien que no sabe nada del tema? Al guardar un archivo, ¿se ordena solo y se recarga el navegador?

Calentamiento

Antes de revisar, un ejercicio para desentumecer los dedos. Construye desde cero, en un archivo nuevo, una tarjeta de proyecto como las de tu galería. Intenta hacerlo primero sin mirar nada, y sólo después consulta el esquema para lo que no recuerdes.

<article class="tarjeta">
  <img src="img/proyecto.jpg" alt="…" width="800" height="600">
  <div class="tarjeta-texto">
    <h3>Nombre del proyecto</h3>
    <p>Una línea que lo describa.</p>
    <a href="proyecto.html">Ver proyecto</a>
  </div>
</article>

1. Escribe el HTML.
2. Dale estilo: fondo blanco, esquinas redondeadas, una sombra suave y relleno en el texto.
3. Haz que la imagen ocupe todo el ancho de la tarjeta sin deformarse.
4. Coloca tres tarjetas en una retícula que se adapte sola al ancho de la pantalla, con Grid.
5. Haz que el enlace cambie de color con una transición al pasar el ratón.

Fíjate: apunta qué has tenido que buscar en el esquema. Esos son los puntos que más te conviene repasar en los apuntes de 1º.

Revisión guiada

Revisa tu portfolio punto por punto. Marca cada casilla cuando lo hayas comprobado o corregido; los enlaces te llevan al esquema o al apartado de los apuntes de 1º donde se explica. Las casillas se borran al recargar la página.

HTML

• Todas las páginas tienen la estructura básica completa, con lang="es", charset y viewport. Esquema · Apuntes
• Se usan las etiquetas semánticas (header, nav, main, footer…) y sólo hay un <h1> por página, sin saltos de nivel. Apuntes
• Todas las imágenes tienen alt, width y height, y ninguna pesa más de 300 KB. Apuntes
• Archivos y carpetas en minúsculas, sin espacios ni tildes, y todos los enlaces e imágenes funcionan. Rutas · Apuntes

CSS

• La hoja de estilos empieza con la base recomendada (box-sizing, body, img). Esquema
• Los colores y las fuentes están en variables en :root. Esquema · Apuntes
• La cabecera y el menú están maquetados con Flexbox, y la galería con Grid. Esquema · Apuntes
• El diseño es mobile first: estilos para el móvil primero y media queries con min-width. Esquema · Apuntes
• No hay scroll horizontal en ningún ancho de pantalla. Apuntes

Comprobación final

• El HTML pasa el validador del W3C sin errores. Validador
• El CSS pasa el validador de CSS. Validador
• La web publicada funciona en tu móvil. Apuntes

Entrega: tu portfolio corregido y publicado de nuevo, con una lista breve de los cambios que has hecho. Será el punto de partida de todas las prácticas del curso.

Semántica web

En 1º viste las grandes zonas de una página: <header>, <nav>, <main>, <footer>… HTML tiene además muchos elementos pequeños que dicen qué es cada trozo de contenido. Usarlos bien hace la web más accesible, la posiciona mejor en los buscadores y, a menudo, te ahorra trabajo.

Un desplegable sin JavaScript

Las preguntas frecuentes de una web son el ejemplo perfecto de <details>: el navegador se encarga de abrir y cerrar, y funciona con el teclado.

<details>
  <summary>¿Hacéis encargos de ilustración?</summary>
  <p>Sí, escríbenos con la idea y las fechas, y te enviamos presupuesto.</p>
</details>

Las regiones de la página

Los lectores de pantalla usan <header>, <nav>, <main>, <aside> y <footer> como puntos de referencia para saltar directamente de una zona a otra, igual que tú echas un vistazo a una página antes de leerla. Si hay más de un <nav>, ponles nombre para distinguirlos:

<nav aria-label="Principal">…</nav>
<nav aria-label="Redes sociales">…</nav>

Idea clave: antes de poner un <div>, pregúntate si existe una etiqueta que diga lo que es. Un <div> con aspecto de botón no es un botón: no se puede usar con el teclado ni lo anuncia un lector de pantalla. Un <button>, sí. Lo veremos a fondo en la Unidad 8.

Selectores avanzados

En 1º viste los selectores de elemento, clase, id y descendiente, y algunas pseudoclases como :hover. Con ellos se puede hacer casi todo, pero CSS tiene muchos más, y algunos te ahorran poner clases a cada elemento. Además, son los mismos que usarás en la Unidad 4 para encontrar elementos con JavaScript. Antes de verlos uno a uno, pruébalos: escribe un selector o elige un ejemplo, y verás qué elementos selecciona.

Combinadores: según dónde está el elemento

Ya conoces el selector descendiente (un espacio). Hay tres combinadores más, que tienen en cuenta la posición exacta de un elemento respecto a otro:

Un uso clásico de +: separar los elementos de una lista sin dejar un hueco antes del primero.

li + li {
  margin-top: 12px; /* todos los li menos el primero */
}

Selectores de atributo

Los selectores de atributo eligen elementos según sus atributos HTML, sin tener que añadirles una clase. Se escriben entre corchetes:

a[target="_blank"]   { … }   /* enlaces que se abren en pestaña nueva */
a[href^="https"]     { … }   /* href que EMPIEZA por https */
a[href$=".pdf"]      { … }   /* href que TERMINA en .pdf */
a[href*="youtube"]   { … }   /* href que CONTIENE youtube */
img[alt=""]          { … }   /* imágenes decorativas */

Los símbolos funcionan como en un buscador: ^= «empieza por», $= «termina en» y *= «contiene». Por ejemplo, para avisar de qué enlaces descargan un PDF:

a[href$=".pdf"]::after {
  content: " (PDF)";
  font-size: 0.8em;
}

Idea clave: los selectores de atributo te permiten dar estilo según lo que el elemento es o hace (un enlace externo, una descarga), y así no tienes que acordarte de poner una clase cada vez que añades uno nuevo.

:nth-child() con fórmulas

En 1º usamos :nth-child(2) para elegir el segundo elemento. Además de un número, acepta palabras y fórmulas, donde n va tomando los valores 0, 1, 2, 3…

li:nth-child(2)      { … }   /* el segundo */
li:nth-child(odd)    { … }   /* impares: 1, 3, 5… */
li:nth-child(even)   { … }   /* pares: 2, 4, 6… */
li:nth-child(3n)     { … }   /* cada tres: 3, 6, 9… */
li:nth-child(-n + 3) { … }   /* los tres primeros */

El uso más típico son las tablas cebra, con filas alternas de color para seguir mejor cada línea:

tr:nth-child(even) {
  background: #F2F1EC;
}

:not(): todos menos…

Selecciona los elementos que no cumplen una condición. Ahorra mucho código:

.menu a:not(.activo) {
  opacity: 0.6;
}

li:not(:last-child) {
  border-bottom: 1px solid #DEDBD2;   /* línea entre elementos, salvo tras el último */
}

:is(): agrupar

Una forma corta de agrupar selectores que comparten una parte. Las dos reglas siguientes son iguales:

header a, footer a { … }
:is(header, footer) a { … }

:has(): según lo que contiene

Es la pseudoclase más reciente y una de las más potentes: selecciona un elemento según lo que tiene dentro. Durante años fue imposible en CSS (se le llamaba «el selector padre») y había que recurrir a JavaScript.

/* Tarjetas que contienen una imagen */
.tarjeta:has(img) {
  padding: 0;
}

/* Formulario con algún campo no válido */
form:has(input:invalid) button {
  opacity: 0.5;
}

Truco: para entender qué selecciona un selector complicado, pégalo en el buscador del inspector (Ctrl + F dentro de la pestaña Elementos): te marca uno a uno los elementos que coinciden.

Pseudoclases de formularios

Con ellas se da estilo a los campos del Tema 4 de 1º según su estado:

input:user-invalid {
  border-color: #B3261E;
}

Pseudoelementos

Las pseudoclases seleccionan elementos en un estado; los pseudoelementos seleccionan una parte de un elemento, o crean una caja nueva. Se escriben con dos pares de dos puntos:

/* Capitular en el primer párrafo de cada artículo */
article p:first-of-type::first-letter {
  float: left;
  font-size: 3.2em;
  line-height: 1;
  margin-right: 6px;
  color: #576F6F;
}

/* Viñetas del color de la marca */
li::marker {
  color: #C0812E;
}

Idea clave: no hace falta memorizarlos todos. Quédate con la idea de que casi cualquier cosa se puede seleccionar sin añadir clases al HTML, y cuando lo necesites, vuelve a esta página o búscalo en MDN.

Pruébalo en tu portfolio: busca en tu hoja de estilos dos sitios donde un selector avanzado te ahorre una clase. Por ejemplo, li:not(:last-child) para separar los elementos del menú, o a[target="_blank"] para marcar los enlaces externos.

Formularios de interfaz

En 1º aprendiste el HTML de los formularios (Tema 4 de Programación I). Ahora toca diseñarlos: los campos que trae el navegador por defecto son poco atractivos y cambian de uno a otro. Un formulario bien diseñado es claro, cómodo en el móvil y avisa bien de los errores.

Pruébalo: escribe un correo sin @ y sal del campo. Estrecha la ventana: los campos se colocan en una columna solos.

Diseña todos los estados

Un campo de formulario no tiene un único aspecto, sino varios, y hay que diseñarlos todos (como en los estados de los componentes de Recursos):

Pautas para formularios cómodos

• El <label> siempre visible, encima del campo. El placeholder no lo sustituye.
• Campos con altura suficiente para tocarlos con el dedo (unos 44 px) y letra de al menos 16 px: si es más pequeña, el iPhone hace zoom al escribir.
• El tipo de campo y el autocomplete adecuados: el móvil muestra el teclado correcto y rellena los datos guardados.
• Pide sólo lo imprescindible. Cada campo de más hace que alguien abandone el formulario.
• Una sola columna en el móvil; en pantallas grandes, dos como mucho.

Texto sobre imagen

Uno de los recursos más usados en diseño web es escribir texto sobre una foto: portadas, tarjetas de proyectos, banners. Para que el texto se lea sea cual sea la imagen, se pone entre los dos una capa oscura o un degradado. Juntando lo que vimos en 1º (position y z-index) con ::after, se hace sin añadir HTML:

::after es un pseudoelemento: una caja extra que CSS crea dentro de otro elemento, sin tocar el HTML. Necesita siempre la propiedad content, aunque sea vacía (content: ""). Si te interesa, en «Para saber más» lo tienes explicado a fondo, con más usos.

<article class="tarjeta">
  <img src="img/cartel.jpg" alt="Cartel del festival">
  <h3>Cartel para un festival</h3>
</article>

.tarjeta {
  position: relative;
}

.tarjeta::after {                 /* 1. la capa oscura */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 40%, rgba(0, 0, 0, 0.75));
}

.tarjeta h3 {                     /* 2. el título, encima de la capa */
  position: absolute;
  left: 16px;
  bottom: 12px;
  z-index: 1;
  color: white;
}

1. La tarjeta lleva relative para ser la referencia.
2. ::after crea una capa con inset: 0 que cubre toda la tarjeta, con un degradado de transparente a negro.
3. El título se coloca con absolute abajo a la izquierda, y con z-index por encima de la capa.

Imágenes interactivas

En gráfica interactiva es muy habitual una imagen con zonas que se pueden pulsar: una infografía que explica cada parte, un plano con fichas de cada sala, una ilustración con detalles ocultos, el análisis de un cartel… Se hacen colocando puntos interactivos sobre la imagen con lo que ya sabes de position.

Hotspots con CSS

Esta técnica junta lo que has visto en este tema: la imagen va en un contenedor con relative, y cada punto interactivo es un elemento con absolute colocado con porcentajes. Como los porcentajes son relativos al tamaño de la imagen, los puntos se quedan en su sitio a cualquier tamaño de pantalla.

1Título. Tipografía de palo seco en negrita, a gran tamaño y en dos líneas.2Imagen. Formas geométricas simples con los colores de la marca.3Texto. Información práctica en un cuerpo menor, alineada con el título.4Logotipo. En la esquina inferior derecha, el punto final del recorrido visual.

Pasa el ratón por los puntos, o recórrelos con la tecla Tab. Después, estrecha la ventana: los puntos siguen en su sitio.

<figure class="mapa">
  <img src="img/cartel.jpg" alt="Cartel de un festival de jazz" width="600" height="400">

  <button class="punto" style="--x: 25%; --y: 20%">
    1
    <span class="ficha">Título: tipografía de palo seco en negrita y gran tamaño.</span>
  </button>

  <button class="punto" style="--x: 72%; --y: 45%">
    2
    <span class="ficha">Imagen: formas geométricas en los colores de la marca.</span>
  </button>
</figure>

.mapa {
  position: relative;          /* 1. la imagen es la referencia */
  margin: 0;
}

.mapa img {
  display: block;
  width: 100%;
  height: auto;
}

.punto {
  position: absolute;          /* 2. cada punto, colocado en % */
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);   /* el centro del punto, justo en la coordenada */
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.ficha {
  position: absolute;          /* 3. la ficha, encima del punto */
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  opacity: 0;                  /* oculta por defecto */
  visibility: hidden;
  transition: opacity 0.2s ease;
}

.punto:hover .ficha,
.punto:focus-visible .ficha {  /* 4. visible al pasar el ratón o con el teclado */
  opacity: 1;
  visibility: visible;
}

1. La <figure> lleva relative: es la referencia de los puntos.
2. Cada punto se coloca con left y top en porcentaje. Las coordenadas se pasan como variables en el atributo style (--x, --y), así el CSS es el mismo para todos los puntos y sólo cambian los números. translate(-50%, -50%) centra el círculo justo sobre la coordenada, en lugar de colocar ahí su esquina.
3. La ficha va dentro del punto, colocada encima con absolute, y empieza oculta.
4. Con :hover y :focus-visible se muestra.

Cómo sacar las coordenadas

Para saber el porcentaje de un punto, abre la imagen en Photoshop, Illustrator o Figma, mira la posición del punto en píxeles y divídela entre el tamaño total: un punto a 180px de la izquierda en una imagen de 600px de ancho está en 180 / 600 = 0,3, es decir, en el 30%.

Ojo: los puntos son <button>, no <div>, para que se puedan alcanzar con el teclado y los lectores de pantalla sepan que se pueden pulsar. En el móvil no existe el :hover, y el comportamiento al tocar un botón varía según el navegador. Para que funcione igual en todas partes, con un toque para abrir y otro para cerrar, hará falta JavaScript; lo completaremos en la Unidad 4.

Flexbox y Grid a fondo

En 1º aprendiste las bases de Flexbox y Grid. Ahora vamos con los patrones que más se repiten en las webs reales y con las propiedades que te permiten maquetar diseños más complejos.

Patrones con Flexbox

/* 1. Logotipo a un lado y menú al otro */
.cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 2. Empujar un elemento hasta el final con un margen automático */
.menu .boton-contacto {
  margin-left: auto;
}

/* 3. Tarjetas con el botón siempre abajo, aunque el texto mida distinto */
.tarjeta {
  display: flex;
  flex-direction: column;
}
.tarjeta .boton {
  margin-top: auto;
}

/* 4. Etiquetas que saltan de línea cuando no caben */
.etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

Grid con áreas: repaso

En 1º viste grid-template-areas, que permite «dibujar» la maqueta con palabras. Recuerda su gran ventaja en responsive: para cambiar la distribución en otra pantalla, basta con redibujar las áreas dentro de una media query, sin tocar el HTML.

.pagina {
  display: grid;
  grid-template-areas: "cabecera" "principal" "lateral" "pie";
}

@media (min-width: 900px) {
  .pagina {
    grid-template-columns: 3fr 1fr;
    grid-template-areas:
      "cabecera  cabecera"
      "principal lateral"
      "pie       pie";
  }
}

auto-fill o auto-fit

En 1º usamos repeat(auto-fit, minmax(…)) para la galería que se adapta sola. Existe una variante, auto-fill, y la diferencia sólo se nota cuando hay pocos elementos:

/* Con pocos elementos, auto-fill deja huecos vacíos al final... */
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

/* ...y auto-fit estira los elementos para ocupar todo el ancho */
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

Que nada se salga en pantallas muy estrechas

Con minmax(250px, 1fr), cada columna mide al menos 250px. Pero si la pantalla mide menos que eso, la columna se sale y aparece scroll horizontal. La solución es pedir «250px, o el 100 % si no caben»:

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 1rem;
}

Galerías con piezas de distintos tamaños

Si algunas piezas ocupan dos columnas o dos filas, quedan huecos. grid-auto-flow: dense hace que Grid rellene esos huecos con las piezas que vienen después, aunque altere un poco el orden:

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-flow: dense;   /* rellena los huecos */
}

.galeria .ancha { grid-column: span 2; }
.galeria .alta  { grid-row: span 2; }

Ojo: dense cambia el orden visual, pero no el del HTML. Quien navega con el teclado o con lector de pantalla recorrerá las piezas en el orden original. Úsalo en galerías, donde el orden no importa, y no en contenidos que se leen en secuencia.

Buenas prácticas de maquetación

Una hoja de estilos crece muy deprisa. Si no se ordena desde el principio, a las pocas semanas nadie (ni siquiera tú) sabe dónde está cada cosa ni por qué un cambio rompe otra parte de la web. Estas costumbres son las que se piden en cualquier estudio.

Ordena la hoja de estilos por bloques

/* ===== 1. Variables ===== */
:root { … }

/* ===== 2. Base: estilos generales ===== */
*, *::before, *::after { box-sizing: border-box; }
body { … }
img { max-width: 100%; height: auto; display: block; }

/* ===== 3. Maquetación: las grandes zonas ===== */
.cabecera { … }
.pie { … }

/* ===== 4. Componentes: piezas que se repiten ===== */
.boton { … }
.tarjeta { … }

/* ===== 5. Páginas concretas ===== */
.portada-hero { … }

Las media queries de cada componente van justo debajo de él: así, todo lo que afecta a la tarjeta está junto.

Nombres de clases que se entienden

• Por su función, no por su aspecto: .aviso mejor que .texto-rojo.
• En minúsculas y con guiones: .tarjeta-proyecto.
• Las partes de un componente llevan su nombre delante: .tarjeta, .tarjeta-imagen, .tarjeta-titulo. Y las variantes, con dos guiones: .boton--secundario. Esta forma de nombrar, muy extendida, se basa en una metodología llamada BEM.

Selectores sencillos

• Da estilo con clases, no con id: un id pesa tanto en la especificidad que luego cuesta sobrescribirlo.
• Evita anidar demasiado: .menu a es mejor que header nav ul li a, que se rompe en cuanto cambias el HTML.
• No uses !important para arreglar un conflicto: busca por qué otra regla gana (con el inspector) y corrígelo ahí.

Variables como sistema de diseño

En 1º usamos las variables para no repetir colores. En 2º las convertimos en un sistema de diseño: un conjunto pequeño de decisiones (colores, espacios, radios) del que sale todo lo demás. Es lo que en un manual de identidad corporativa son la paleta y la retícula.

:root {
  /* Colores con nombre de FUNCIÓN, no de aspecto */
  --color-fondo: #F7F6F2;
  --color-texto: #21231F;
  --color-suave: #5B5D57;
  --color-acento: #576F6F;

  /* Una escala de espacios a partir de un valor base */
  --espacio: 1rem;
  --espacio-s: calc(var(--espacio) / 2);    /* 0.5rem */
  --espacio-l: calc(var(--espacio) * 2);    /* 2rem */
  --espacio-xl: calc(var(--espacio) * 4);   /* 4rem */

  --radio: 8px;
}

Idea clave: nombra los colores por su función (--color-fondo, --color-acento), no por su aspecto (--verde, --blanco). Si mañana el acento pasa a ser azul, --verde dejaría de tener sentido; y en el modo oscuro, el «fondo» ya no será blanco.

calc(): operaciones con medidas

calc() hace sumas, restas, multiplicaciones y divisiones con medidas, incluso mezclando unidades distintas, algo imposible de calcular a mano porque depende de la pantalla:

.contenido {
  width: calc(100% - 2rem);               /* mezcla % y rem */
  max-width: calc(65ch + var(--espacio-l));
}

.cabecera-fija + main {
  padding-top: calc(var(--alto-cabecera) + var(--espacio));
}

Los signos + y - necesitan espacios a los lados: calc(100% - 2rem) funciona, calc(100%-2rem) no.

Valor de respaldo

.tarjeta {
  border-radius: var(--radio, 4px);   /* si --radio no existe, usa 4px */
}

Variables locales

Una variable no tiene por qué estar en :root. Si la defines en un elemento, sólo vale para él y sus hijos. Esto permite crear variantes de un componente cambiando sólo un valor:

.boton {
  --color-boton: var(--color-acento);
  background: var(--color-boton);
  border: 2px solid var(--color-boton);
  color: white;
}

.boton--secundario {
  --color-boton: #C0812E;   /* solo cambia la variable, no las reglas */
}

Es la misma técnica que usamos en los hotspots de las imágenes interactivas, donde cada punto recibía sus coordenadas con --x y --y.

Para saber más (opcional)

Contenidos para ir más allá, si te sobra tiempo o te interesa el tema.

<a class="externo" href="https://www.w3.org/">W3C</a>

.externo::after {
  content: " ↗";
}

h2::before {
  content: "";          /* vacío, pero obligatorio */
  display: block;
  width: 40px;
  height: 4px;
  background: #576F6F;
  margin-bottom: 12px;
}

<img src="img/plano.jpg" alt="Plano de la escuela" usemap="#plano" width="800" height="500">

<map name="plano">
  <area shape="rect"   coords="40,30,260,180"  href="aulas.html"     alt="Aulas">
  <area shape="circle" coords="520,240,70"     href="biblioteca.html" alt="Biblioteca">
  <area shape="poly"   coords="600,350,780,350,780,480,650,480" href="taller.html" alt="Taller">
</map>

Práctica

Partimos del portfolio que pusiste a punto en la Unidad 1.

1. Revisa la semántica: cambia por la etiqueta adecuada los <div> que lo merezcan (<figure>, <time>, <address>…) y añade una sección de preguntas frecuentes con <details>.
2. Diseña el formulario de contacto con todos sus estados: normal, foco, error y desactivado.
3. Convierte las tarjetas de tu galería en tarjetas con el título sobre la imagen: capa con degradado y título encima.
4. Elige un trabajo tuyo (un cartel, una ilustración, una infografía) y crea una versión interactiva con al menos cuatro hotspots que expliquen tus decisiones de diseño.
5. Ordena tu hoja de estilos por bloques y pasa los colores, espacios y radios a un sistema de variables.

Retos opcionales

• Usa al menos dos selectores avanzados que te ahorren clases: por ejemplo, li:not(:last-child) o a[target="_blank"].
• Pon una línea decorativa corta encima de cada <h2> con ::before.

Comprueba: ¿se lee el título de la tarjeta sobre una imagen muy clara? ¿Los hotspots siguen en su sitio al estrechar la ventana? ¿Puedes recorrer los hotspots y el formulario con la tecla Tab, y se ve siempre dónde está el foco?

Mobile first y media queries

En 1º aprendiste a escribir media queries y a trabajar mobile first: primero los estilos del móvil, y después los cambios para pantallas más grandes con min-width. En esta unidad lo convertimos en un método de trabajo.

Diseñar desde el móvil

Mobile first no es sólo un orden en el CSS: es una forma de pensar el diseño. En una pantalla pequeña no cabe todo, así que obliga a decidir qué es lo importante. Por eso conviene bocetar primero la versión de móvil en Figma y después ampliarla, y no al revés.

Dónde poner los puntos de ruptura

Un error frecuente es poner los puntos de ruptura en los anchos de dispositivos concretos («el del iPhone», «el del iPad»). Hay cientos de pantallas distintas, y cada año salen nuevas. La regla es otra: el punto de ruptura lo decide el contenido.

1. Abre tu web en el inspector con el modo de dispositivo (Ctrl + Mayús + M).
2. Ve ensanchando la ventana poco a poco desde el ancho del móvil.
3. En cuanto algo se vea mal (líneas de texto demasiado largas, tarjetas enormes, mucho espacio vacío), ahí va un punto de ruptura.

Con dos o tres puntos de ruptura suele bastar. Muchos equipos los escriben en em (48em son 768px con la letra por defecto), porque así respetan el tamaño de letra que haya elegido cada persona en su navegador.

Media queries más allá del ancho

Las media queries no sólo preguntan por el ancho. También pueden preguntar cómo se usa el dispositivo:

/* El efecto de levantar la tarjeta, sólo con ratón */
@media (hover: hover) {
  .tarjeta:hover {
    transform: translateY(-6px);
  }
}

Lista de comprobación responsive

• No hay scroll horizontal en ningún ancho, desde 320px.
• El texto se lee sin hacer zoom (al menos 16px) y las líneas no son demasiado largas (unos 60–75 caracteres).
• Los botones y enlaces se pueden tocar con el dedo sin acertar en el de al lado (unos 44 × 44 px).
• Las imágenes no se deforman ni pesan más de lo necesario.
• Se ha probado en un móvil real, no sólo en el inspector.

Tipografía fluida con clamp()

Con las media queries de 1º, los tamaños cambian a saltos: 2rem en el móvil y, a partir de 900px, 3rem. Con clamp() cambian de forma continua, creciendo poco a poco con la pantalla, pero sin pasarse de unos límites.

h1 {
  font-size: clamp(2rem, 1rem + 4vw, 4rem);
  /*              mínimo  ideal       máximo */
}

clamp() recibe tres valores:

1. El mínimo: nunca será más pequeño (en el móvil).
2. El valor ideal, que depende del ancho de la pantalla (lleva vw).
3. El máximo: nunca será más grande (en un monitor enorme).

Ojo: ¿por qué 1rem + 4vw y no sólo 5vw? Porque un tamaño hecho sólo con vw depende únicamente de la pantalla, e ignora el zoom del navegador: si alguien con baja visión amplía la página, el texto no crece. Sumar una parte en rem mantiene el zoom funcionando.

clamp() no es sólo para texto. Sirve para cualquier medida, como los espacios:

.seccion {
  padding: clamp(1.5rem, 5vw, 5rem);   /* más aire en pantallas grandes */
}

Imágenes: aspect-ratio y object-fit

Proporción fija: aspect-ratio

Indica la proporción de una caja (ancho / alto). El navegador calcula el alto a partir del ancho, así que la caja mantiene su forma en cualquier pantalla.

.video,
.tarjeta img {
  aspect-ratio: 16 / 9;
}

.avatar {
  aspect-ratio: 1;   /* cuadrado */
}

Encajar la imagen: object-fit

Si una imagen tiene una proporción distinta de la caja que la contiene, por defecto se deforma para rellenarla. object-fit decide qué hacer en su lugar:

La imagen original es horizontal; las cajas, cuadradas. Para galerías y tarjetas, casi siempre querrás cover:

.galeria img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;          /* recorta sin deformar */
  object-position: center;    /* qué parte se conserva al recortar */
}

Truco: con object-position eliges qué parte de la imagen se conserva al recortar: top para no cortar las cabezas en un retrato, left, 30% 20%… Es como mover la imagen dentro del marco en InDesign.

Para saber más (opcional)

Contenidos para ir más allá, si te sobra tiempo o te interesa el tema.

:root {
  --color-fondo: #F7F6F2;
  --color-superficie: #FFFFFF;
  --color-texto: #21231F;
  --color-suave: #5B5D57;
  --color-linea: #DEDBD2;
  --color-acento: #576F6F;
}

body {
  background: var(--color-fondo);
  color: var(--color-texto);
}

.tarjeta {
  background: var(--color-superficie);
  border: 1px solid var(--color-linea);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-fondo: #171815;
    --color-superficie: #1E1F1B;
    --color-texto: #EDEBE4;
    --color-suave: #A3A69B;
    --color-linea: #33352E;
    --color-acento: #A5BEBE;   /* el verde, más claro para que contraste */
  }
}

:root {
  color-scheme: light dark;
}

<picture>
  <source srcset="img/logo-claro.svg" media="(prefers-color-scheme: dark)">
  <img src="img/logo-oscuro.svg" alt="Estudio Ebro" width="160" height="40">
</picture>

@media (prefers-color-scheme: dark) {
  img:not([src$=".svg"]) {
    filter: brightness(0.9);   /* fotos un poco menos brillantes */
  }
}

.portada {
  min-height: 100vh;    /* por si el navegador no conoce dvh */
  min-height: 100dvh;   /* altura visible real, también en el móvil */
}

<img
  src="img/portada-800.jpg"
  srcset="img/portada-400.jpg 400w,
          img/portada-800.jpg 800w,
          img/portada-1600.jpg 1600w"
  sizes="(min-width: 900px) 50vw, 100vw"
  alt="Portada del proyecto"
  width="1600" height="900">

<picture>
  <source media="(min-width: 800px)" srcset="img/cartel-horizontal.jpg">
  <img src="img/cartel-vertical.jpg" alt="Cartel del festival" width="800" height="1200">
</picture>

<picture>
  <source type="image/avif" srcset="img/foto.avif">
  <source type="image/webp" srcset="img/foto.webp">
  <img src="img/foto.jpg" alt="…" width="1200" height="800">
</picture>

<div class="zona-tarjeta">
  <article class="tarjeta">
    <img src="img/cartel.jpg" alt="…">
    <div>
      <h3>Cartel para un festival</h3>
      <p>Ilustración y tipografía.</p>
    </div>
  </article>
</div>

.zona-tarjeta {
  container-type: inline-size;   /* 1. este elemento es un contenedor «consultable» */
}

.tarjeta {
  display: grid;                 /* 2. por defecto: imagen arriba, texto abajo */
  gap: 1rem;
}

@container (min-width: 400px) {  /* 3. si el CONTENEDOR mide 400px o más… */
  .tarjeta {
    grid-template-columns: 150px 1fr;   /* …imagen a la izquierda, texto a la derecha */
  }
}

Práctica

Seguimos con tu portfolio.

1. Revisa tu CSS: ¿es mobile first? Si usas max-width, pásalo a min-width, empezando por los estilos del móvil.
2. Busca tus puntos de ruptura ensanchando la ventana poco a poco, como en este tema, y apunta en un comentario por qué está cada uno.
3. Pon el tamaño de los títulos con clamp(), con una parte en rem. Comprueba que el texto sigue creciendo al hacer zoom.
4. Iguala las imágenes de la galería con aspect-ratio y object-fit: cover.
5. Mete los efectos de :hover dentro de @media (hover: hover).

Retos opcionales

• Crea el modo oscuro de tu web siguiendo los cinco pasos de «Para saber más».
• Usa <picture> para mostrar un encuadre distinto de la imagen de portada en el móvil.

Comprueba: pasa la lista de comprobación responsive de este tema, ancho a ancho.

JavaScript y la consola

JavaScript es el lenguaje de programación de la web, el tercero de los tres que entiende el navegador. Nació en 1995 para dar interactividad a las páginas y hoy se usa también en servidores, aplicaciones y herramientas de diseño.

Ojo: JavaScript no tiene nada que ver con Java, aunque se llamen parecido. El nombre fue una estrategia de marketing de la época, porque Java estaba de moda. Es como confundir «coche» con «cochera».

La consola del navegador

Todos los navegadores tienen una consola: una ventana donde puedes escribir JavaScript y ver el resultado al momento. Es el mejor sitio para hacer las primeras pruebas, y también donde aparecen los mensajes y errores de tus programas.

1. Abre el inspector con F12 (en Mac, Cmd + Option + I).
2. Ve a la pestaña Consola (Console).
3. Escribe una instrucción y pulsa Intro.

La primera instrucción que aprende todo el mundo es console.log(), que muestra en la consola lo que pongas entre los paréntesis:

console.log("Hola, mundo");
console.log(2 + 2);
console.log("Diseño " + "web");

Los textos van entre comillas; los números, no. Fíjate en que 2 + 2 da 4, pero "Diseño " + "web" une los dos textos.

Un poco de magia

Abre cualquier web, por ejemplo la de un periódico, abre la consola y escribe:

document.body.style.background = "pink";
document.title = "¡He cambiado el título!";

Acabas de cambiar la página con JavaScript. No te preocupes: el cambio sólo existe en tu navegador y desaparece al recargar. Un poco más adelante, en esta unidad, aprenderemos a hacer esto en nuestras propias webs.

JavaScript en un archivo

La consola sirve para probar, pero lo que escribes ahí se pierde al recargar. En una web, el JavaScript va en un archivo .js que se enlaza desde el HTML con la etiqueta <script>, igual que el CSS se enlaza con <link>:

<head>
  <meta charset="UTF-8">
  <title>Mi web</title>
  <link rel="stylesheet" href="css/estilos.css">
  <script src="js/main.js" defer></script>
</head>

• src es la ruta al archivo, como en las imágenes.
• defer le dice al navegador que espere a que la página esté cargada antes de ejecutar el JavaScript. Si no, el programa podría intentar cambiar elementos que todavía no existen.

Y dentro de main.js:

// Esto es un comentario de una línea

/* Y esto, un comentario
   de varias líneas */

console.log("El archivo main.js está funcionando");

Reglas básicas al escribir JavaScript

• Distingue mayúsculas y minúsculas: console.log funciona; Console.Log, no.
• Cada instrucción termina en punto y coma (;). Muchas veces funciona sin él, pero es mejor acostumbrarse a ponerlo.
• Los comentarios se escriben con // para una línea o entre /* */ para varias, como en CSS.
• Las comillas de los textos pueden ser dobles ("hola") o simples ('hola'), pero tienen que ser rectas, nunca tipográficas (“ ”).

Idea clave: los errores no son un fracaso, son parte del trabajo. Hasta los programadores con experiencia se equivocan constantemente. Cuando algo no funcione, mira la consola: los errores aparecen en rojo, con una descripción y el número de línea donde está el problema. Aprender a leer esos mensajes es la habilidad más útil que vas a desarrollar.

Variables y tipos de datos

Cómo usar los ejemplos: a partir de aquí, los ejemplos con un botón «Ejecutar» se pueden editar. Cambia valores, rompe cosas a propósito y vuelve a ejecutar: es la mejor forma de aprender. Si te pierdes, «Restaurar» devuelve el ejemplo a su estado original.

Un programa trabaja con datos: un nombre, un número de columnas, un color… Para guardarlos y usarlos después se usan variables. Una variable es como una caja con una etiqueta: la etiqueta es el nombre, y dentro está el valor.

let y const

• const crea una variable cuyo valor no va a cambiar (una constante).
• let crea una variable cuyo valor puede cambiar después.

Una buena costumbre: usa const siempre, y cambia a let sólo si necesitas cambiar el valor. Verás también var en tutoriales antiguos: es la forma vieja de crear variables y hoy no se recomienda.

Nombres de variables

• Sin espacios. Si son varias palabras, se juntan con la segunda y siguientes en mayúscula: colorPrincipal, anchoColumna. Se llama camelCase, por las «jorobas».
• Que digan qué contienen: numeroDeColumnas mejor que n o dato1.
• Mejor sin tildes ni eñes (aunque funcionan), y nunca empezando por un número.

Tipos de datos

typeof dice de qué tipo es un dato. Fíjate en la diferencia: 16 es un número, pero "16" (con comillas) es un texto, y JavaScript los trata de forma distinta.

Unir textos y datos

Para construir un texto con datos dentro, la forma más cómoda es escribirlo entre comillas invertidas (`, la tecla a la derecha de la P) y poner cada dato dentro de ${ }:

Idea clave: una variable es un nombre para un dato. En lugar de escribir el mismo valor en muchos sitios, lo guardas una vez y lo usas por su nombre, igual que las variables de CSS que ya conoces.

Operadores

Los operadores hacen operaciones con los datos: cálculos, comparaciones y combinaciones de condiciones.

Operaciones con números

Un ejemplo de diseño: calcular el ancho total de una retícula, como harías al configurar las columnas en InDesign.

Como en matemáticas, la multiplicación va antes que la suma, y los paréntesis cambian el orden.

Ojo: + hace dos cosas: con números, suma; con textos, une. Si mezclas un texto y un número, los une como texto: "5" + 3 da "53", no 8. Es uno de los despistes más habituales; pruébalo en cualquier ejemplo.

Comparaciones

Comparan dos valores y el resultado siempre es true o false:

Ojo: un solo = guarda un valor en una variable; tres === comparan. Confundirlos es el error número uno al empezar. Existe también == (con dos), pero hace comparaciones poco fiables (considera iguales 5 y "5"), así que usa siempre ===.

Condicionales

Los condicionales son las decisiones que vimos en los algoritmos: hacer una cosa u otra según se cumpla una condición. Se escriben con if («si») y else («si no»):

• La condición va entre paréntesis.
• Lo que se hace si se cumple va entre llaves { }, con sangría.
• else es opcional: si no lo pones y la condición no se cumple, simplemente no pasa nada.

Compáralo con el pseudocódigo del principio del tema: SI … ENTONCES … SI NO … FIN SI. Es exactamente lo mismo, con otra forma de escribirlo.

Varias opciones: else if

Se comprueban en orden, de arriba abajo, y sólo se ejecuta el primer bloque cuya condición se cumpla. Cambia la hora y prueba.

Truco: si no sabes por qué un if no hace lo que esperas, pon un console.log() justo antes con la condición: console.log(peso > 300). Verás si da true o false.

Funciones

Una función es un bloque de código con nombre que puedes usar todas las veces que quieras. Es como una receta: la escribes una vez y la «cocinas» cada vez que la necesitas, a veces con ingredientes distintos.

Parámetros: los ingredientes

Entre los paréntesis se pueden indicar parámetros: datos que la función recibe cada vez que se usa, y que cambian el resultado.

Devolver un resultado: return

Muchas funciones calculan algo y lo devuelven con return, para poder guardarlo en una variable y usarlo después. Recuperamos el cálculo de la retícula, ahora reutilizable:

Idea clave: si te encuentras copiando y pegando el mismo código varias veces, probablemente debería ser una función. Así, si hay que cambiar algo, se cambia en un solo sitio.

Fíjate: en internet verás funciones escritas de otra forma, con una flecha: const saludar = (nombre) => { … }. Se llaman funciones flecha y hacen lo mismo. No te asustes si las encuentras; las usaremos más adelante en esta unidad, con los eventos.

El DOM

Cuando el navegador carga una página, lee el HTML y construye con él un modelo en memoria: un árbol en el que cada etiqueta es un objeto que JavaScript puede leer y modificar. Ese árbol se llama DOM (Document Object Model, modelo de objetos del documento).

html
├── head
│   └── title
└── body
    ├── header
    │   └── h1
    └── main
        ├── p
        └── img

Cada elemento es un «nodo» del árbol: body es el padre de header y main; h1 es hijo de header… Es la misma estructura de cajas dentro de cajas que ya conoces del HTML.

Fíjate: la pestaña Elementos del inspector no muestra tu archivo HTML, sino el DOM: la página tal y como está ahora. Por eso, cuando JavaScript cambia algo, lo ves ahí al momento, aunque tu archivo no haya cambiado.

Trabajar con el DOM siempre sigue los mismos tres pasos, que vamos a ver en este tema:

1. Seleccionar el elemento con el que quieres trabajar.
2. Escuchar lo que hace el usuario (un clic, escribir, pulsar una tecla).
3. Cambiar algo en la página como respuesta.

Seleccionar elementos

Para trabajar con un elemento, primero hay que encontrarlo. La buena noticia: se buscan con los mismos selectores que usas en CSS.

• document.querySelector("selector") devuelve el primer elemento que coincide.
• document.querySelectorAll("selector") devuelve todos los que coinciden, en una lista que puedes recorrer con for…of.

Lo habitual es guardar el elemento en una variable con const, para usarlo después las veces que haga falta.

Ojo: si el selector no encuentra nada, querySelector devuelve null («nada»), y la siguiente línea dará un error como Cannot read properties of null. Cuando lo veas, revisa el selector: ¿falta el punto de la clase? ¿Está bien escrito el nombre? ¿Existe el elemento en el HTML?

Cambiar el texto y las clases

Cambiar el texto

textContent lee o cambia el texto de un elemento:

Cambiar las clases: la forma recomendada

Se puede cambiar el estilo de un elemento directamente desde JavaScript (elemento.style.color = "red"), pero casi siempre es mejor dejar el diseño en el CSS y que JavaScript sólo ponga o quite clases. Para eso está classList:

Idea clave: reparto de tareas. CSS define cómo se ve cada estado (.abierto, .activo, .oscuro); JavaScript decide cuándo se activa cada uno. Así el diseño sigue estando en un solo sitio, y casi todos los componentes interactivos se reducen a «al pulsar aquí, pon o quita esta clase».

Eventos

Un evento es algo que ocurre en la página: un clic, una tecla, escribir en un campo, hacer scroll. Con addEventListener le dices a un elemento: «cuando ocurra esto, ejecuta esta función».

• El primer dato es el nombre del evento, entre comillas: "click".
• El segundo es la función que se ejecutará cada vez que ocurra.

Funciones flecha

() => { … } es una función flecha, la forma corta de escribir una función que te presentamos en el apartado de funciones. Es lo mismo que function () { … }, y es muy habitual dentro de addEventListener porque la función no necesita nombre: sólo se usa ahí.

Eventos más usados

Ratón encima y scroll

Además de click, hay eventos para cuando el ratón entra en un elemento (mouseenter) o sale de él (mouseleave). Pero ojo: para cambiar el aspecto al pasar el ratón, basta con CSS (:hover). Usa estos eventos sólo cuando haga falta lógica, como mostrar un dato distinto según el elemento.

El evento scroll permite reaccionar al desplazamiento de la página. window.scrollY dice cuántos píxeles se ha bajado. Un uso clásico: una cabecera que se compacta al empezar a bajar. Haz scroll dentro del ejemplo:

Para hacer que los elementos aparezcan al llegar a ellos con el scroll, hay una herramienta mejor que este evento. La veremos en la Unidad 6.

Truco: dentro de la función se puede recibir el evento, normalmente con el nombre e: (e) => { … }. Trae información útil, como qué tecla se ha pulsado (e.key).

Proyecto: menú desplegable

El clásico menú de móvil que se abre y se cierra con un botón. Fíjate en que toda la lógica es poner y quitar una clase:

Además de la clase, el código actualiza aria-expanded, un atributo que dice a los lectores de pantalla si el menú está abierto. La expresión abierto ? "Cerrar" : "Menú" es un if abreviado: «si abierto es verdadero, "Cerrar"; si no, "Menú"».

Fíjate: el menú de móvil de esta web funciona exactamente así. Abre script.js y búscalo.

Proyecto: hotspots en el móvil

En la Unidad 2 hicimos una imagen interactiva cuyas fichas aparecían con :hover. Pero en el móvil no hay ratón: como prometimos, ahora la completamos con JavaScript para que cada punto se abra con un toque, se cierre con otro, y sólo haya una ficha abierta a la vez.

El algoritmo, en palabras: «al pulsar un punto, cierra todos; después, abre el pulsado, salvo que ya estuviera abierto». Antes de programar algo así, escríbelo en pseudocódigo como vimos en la Unidad 1: te ahorrará muchos errores.

Para saber más (opcional)

Contenidos para ir más allá, si te sobra tiempo o te interesa el tema.

// Al pulsar el botón: guardar la elección
localStorage.setItem("modo", oscuro ? "oscuro" : "claro");

// Al cargar la página: recuperarla
if (localStorage.getItem("modo") === "oscuro") {
  document.documentElement.classList.add("oscuro");
}

Práctica

Trabaja en el archivo js/main.js de tu portfolio.

1. Crea la carpeta js con el archivo main.js, enlázalo con defer y comprueba en la consola que funciona un console.log().
2. Crea variables con tu nombre y tu ciudad y muestra una frase que las use, con comillas invertidas y ${ }.
3. Crea una función anchoReticula() como la de esta unidad y úsala con un if que avise si la retícula mide más de 1200px.
4. Haz un menú desplegable para el móvil con un botón, classList.toggle() y aria-expanded. En pantallas grandes, el menú debe verse siempre (usa una media query).
5. Haz que los hotspots de tu imagen interactiva se abran y se cierren con un toque.

Retos opcionales

• Haz que la cabecera se compacte al hacer scroll.
• Añade un botón de modo oscuro que recuerde la elección.

Comprueba: prueba todo en tu móvil, no sólo en el ordenador. ¿Funciona también con el teclado (Tab, Intro)? ¿La consola muestra algún error en rojo?

Arrays y bucles

Los bucles son las repeticiones que vimos en los algoritmos: hacer lo mismo varias veces sin escribirlo varias veces.

Hasta ahora, cada variable guardaba un solo dato. Pero muchas veces trabajamos con listas: los colores de una paleta, los proyectos del portfolio, las imágenes de una galería.

Arrays: listas de datos

Un array es una lista de valores entre corchetes, separados por comas:

• Cada elemento tiene una posición (índice) y se cuenta desde 0: el primero es [0], el segundo [1]… Es raro al principio, pero es así en casi todos los lenguajes.
• .length dice cuántos elementos tiene.
• .push() añade un elemento al final:

Recorrer una lista: for…of

Es el bucle más útil y el más fácil de leer: «para cada elemento de esta lista, haz esto».

En cada vuelta, la variable color toma el valor del siguiente elemento, hasta recorrerlos todos.

Componentes a partir de datos

JavaScript también puede crear elementos y añadirlos a la página. Combinado con un array de objetos y un bucle, permite generar una galería entera a partir de los datos:

1. document.createElement("article") crea un elemento nuevo, todavía fuera de la página.
2. Se le dan clases y contenido. innerHTML funciona como textContent, pero entiende etiquetas HTML.
3. .append() lo mete dentro de otro elemento, al final.

Añade un proyecto más al array y ejecuta: aparece una tarjeta nueva sin tocar el HTML. Así funcionan las webs que muestran contenido que cambia: los datos por un lado y la plantilla por otro.

Ojo: usa innerHTML sólo con contenido tuyo. Nunca metas con innerHTML texto que haya escrito un usuario (por ejemplo, en un formulario): podría incluir código malicioso. Para el texto de los usuarios, usa siempre textContent.

Proyecto: ventana modal

Una ventana modal es un panel que se abre por encima de la página y no deja usar lo de detrás hasta que se cierra. Su uso más habitual en un portfolio es el visor de imágenes: al pulsar una imagen de la galería, se abre en grande, y se cierra con un botón o con la tecla Esc.

• El visor es un elemento position: fixed que cubre toda la pantalla (Programación 1º). Empieza oculto con el atributo hidden.
• Al pulsar una imagen, se copian su src y su alt a la imagen grande y se muestra el visor.
• Un evento keydown en todo el documento cierra el visor con Esc, gracias al objeto del evento (e.key).

Ojo: las imágenes del ejemplo vienen de un servicio de fotos de prueba, así que necesitan conexión a internet. En tu portfolio, usa tus propias imágenes con su ruta relativa.

Para saber más: HTML tiene un elemento pensado para esto, <dialog>. Con dialog.showModal() se abre como ventana modal, ya trae el cierre con Esc y mantiene el foco del teclado dentro mientras está abierta. Es la opción más accesible para modales más complejas, como un formulario.

Proyecto: slider

Un slider (o carrusel) muestra varias imágenes o tarjetas, una detrás de otra, en el mismo espacio. Es un componente muy útil para enseñar un proyecto con varias imágenes. Combina casi todo lo de esta unidad: un array, un número que guarda la posición y eventos.

1. Todas las diapositivas están en fila dentro de la pista, y el slider esconde con overflow: hidden todo lo que no cabe.
2. La variable actual guarda qué diapositiva se ve: 0, 1 o 2.
3. Los botones suman o restan 1 a actual, con un if para dar la vuelta al llegar a un extremo.
4. La función mostrar() desplaza la pista con transform, y la transition del CSS lo anima.

Ojo: los sliders que pasan solos cada pocos segundos son muy molestos: no da tiempo a leer, y a quien usa un lector de pantalla le cambia el contenido sin avisar. Deja siempre que sea la persona quien avance, y que el último contenido importante no quede escondido en la quinta diapositiva.

Para saber más (opcional)

Contenidos para ir más allá, si te sobra tiempo o te interesa el tema.

Práctica

Trabaja en el js/main.js de tu portfolio.

1. Guarda tus proyectos en un array de objetos (título, año, imagen) y genera con un bucle las tarjetas de la galería.
2. Haz que al pulsar una imagen de la galería se abra en grande en una ventana modal, que se cierre con un botón y con Esc.
3. En la página de uno de tus proyectos, enseña el proceso (boceto, versiones, resultado) en un slider.

Retos opcionales

• Añade al slider unos puntos debajo que indiquen la posición y permitan saltar a cada diapositiva.
• Haz que el slider también avance con las flechas del teclado.
• Añade botones para filtrar la galería por tipo de proyecto.

Comprueba: ¿todo funciona con el teclado? ¿Al cerrar la ventana modal vuelves a donde estabas? ¿La consola muestra algún error en rojo?

Transiciones y transformaciones

En 1º viste las transiciones y dos transformaciones, translate y scale. Son la base de casi todo el movimiento de una interfaz, así que vamos a conocerlas a fondo.

Las funciones de transform

Se pueden combinar varias, separadas por espacios. El orden importa: se aplican de derecha a izquierda.

Con transform-origin se elige el punto desde el que se transforma: por defecto es el centro, pero un giro desde una esquina (transform-origin: top left) da un efecto muy distinto.

Qué animar y qué no

Para el navegador no todas las propiedades cuestan lo mismo. Animar width, height, top o margin le obliga a recolocar toda la página en cada fotograma, y la animación va a tirones, sobre todo en el móvil. En cambio, transform y opacity se animan con la tarjeta gráfica y van siempre fluidas.

Idea clave: para mover, usa transform: translate(), no top ni margin. Para aparecer y desaparecer, opacity. Para crecer, scale(), no width.

Animaciones con @keyframes

Las transiciones de 1º animan un cambio entre dos estados (normal y :hover). Las animaciones van más allá: se reproducen solas, pueden tener muchos pasos intermedios y repetirse. Se crean en dos partes:

1. Con @keyframes se define la animación y se le da un nombre: los fotogramas clave, como en un programa de animación.
2. Con la propiedad animation se aplica a un elemento.

@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

h1 {
  animation: aparecer 0.8s ease-out;
}

from y to son el principio y el final. Para más pasos, se usan porcentajes:

@keyframes latido {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.punto {
  animation: latido 1.5s ease-in-out infinite;
}

Respetar a quien prefiere menos movimiento

A algunas personas el movimiento en pantalla les provoca mareos, náuseas o dolor de cabeza (por ejemplo, con trastornos vestibulares), y a otras les impide concentrarse en el contenido. Por eso los sistemas operativos tienen una opción para reducir el movimiento, y CSS puede detectarla con prefers-reduced-motion.

Escribe tus animaciones dentro de una media query que sólo se cumple si la persona no ha pedido reducir el movimiento:

/* Las animaciones solo se aplican si la persona NO ha pedido menos movimiento */
@media (prefers-reduced-motion: no-preference) {
  h1 {
    animation: aparecer 0.8s ease-out;
  }

  .punto {
    animation: latido 1.5s ease-in-out infinite;
  }
}

Animaciones disparadas con JavaScript

Las transiciones y las animaciones de CSS se ponen en marcha solas (al cargar) o con :hover. Con JavaScript podemos decidir cuándo empiezan: al pulsar un botón, al llegar con el scroll, al enviar un formulario. La técnica es siempre la misma: el movimiento lo define el CSS, y JavaScript sólo añade o quita una clase.

Una clase que lo cambia todo

JavaScript no calcula ningún movimiento: sólo pone la clase abierto, y la transition del CSS hace el resto. Así el código es más corto y la animación, más fluida.

Aparecer al hacer scroll

Para que los elementos aparezcan al llegar a ellos, se usa IntersectionObserver: un «vigilante» que avisa cuando un elemento entra en la pantalla. Es mucho más eficiente que escuchar el evento scroll, que se dispara decenas de veces por segundo. Haz scroll dentro del ejemplo:

• new IntersectionObserver(…) crea el vigilante, con la función que se ejecutará cuando algún elemento entre o salga de la pantalla.
• threshold: 0.2 indica cuánto del elemento tiene que verse para avisar: un 20 %.
• vigilante.observe(el) le dice qué elementos vigilar.

Fíjate: esta misma web usa esta técnica para que los bloques aparezcan suavemente al bajar. Y fíjate en el CSS: el estado oculto está dentro de prefers-reduced-motion: no-preference. Si alguien ha pedido menos movimiento, todo se ve desde el principio, sin animación.

Para saber más (opcional)

Contenidos para ir más allá, si te sobra tiempo o te interesa el tema.

.elemento {
  animation-name: aparecer;
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  animation-delay: 0.2s;            /* espera antes de empezar */
  animation-iteration-count: 1;     /* o infinite */
  animation-direction: normal;      /* o alternate: ida y vuelta */
  animation-fill-mode: both;        /* conserva el primer y el último fotograma */
}

/* Todo junto, en una línea */
.elemento {
  animation: aparecer 0.8s ease-out 0.2s both;
}

.galeria .tarjeta {
  animation: aparecer 0.6s ease-out both;
}

.galeria .tarjeta:nth-child(2) { animation-delay: 0.1s; }
.galeria .tarjeta:nth-child(3) { animation-delay: 0.2s; }
.galeria .tarjeta:nth-child(4) { animation-delay: 0.3s; }

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

Filtros

CSS puede aplicar a cualquier elemento efectos que conoces de Photoshop: desenfocar, pasar a blanco y negro, cambiar el brillo o el contraste. Se aplican en el navegador, sin modificar el archivo original.

Filtros: filter

Se pueden combinar varios separándolos con espacios (filter: grayscale(1) contrast(1.2)) y animarlos con una transición. Un efecto clásico de portfolio: imágenes en blanco y negro que recuperan el color al pasar el ratón.

.galeria img {
  filter: grayscale(1);              /* en blanco y negro */
  transition: filter 0.4s ease;
}

.galeria img:hover {
  filter: grayscale(0);              /* recupera el color */
}

Hay también un filtro drop-shadow(), que a diferencia de box-shadow sigue la forma real de la imagen: en un PNG o un SVG con transparencia, la sombra rodea la silueta, no la caja.

Ojo: no apliques filtros pesados (como blur) a elementos muy grandes o animados, porque ralentizan la página en el móvil. Y si pones texto sobre una imagen filtrada, comprueba que se lee bien sobre todo el fondo.

header {
  position: sticky;
  top: 0;
  background: rgba(247, 246, 242, 0.8);   /* fondo semitransparente */
  backdrop-filter: blur(8px);             /* desenfoca lo que pasa por detrás */
}

.portada {
  position: relative;
  background: url("../img/portada.jpg") center / cover;
}

.portada h1 {
  color: white;
  mix-blend-mode: difference;   /* el texto se invierte según el fondo */
}

.duotono {
  background-image: url("../img/foto.jpg");
  background-color: #576F6F;
  background-blend-mode: multiply;   /* la foto se tiñe del color */
  background-size: cover;
}

Práctica

Seguimos con tu portfolio.

1. Añade una animación de entrada al título de la portada con @keyframes, dentro de prefers-reduced-motion: no-preference.
2. Haz que los hotspots de tu imagen interactiva latan suavemente.
3. Haz que las tarjetas de la galería aparezcan al llegar a ellas con el scroll, con IntersectionObserver.
4. Revisa tus transiciones: ¿animas sólo transform y opacity?

Retos opcionales

• Haz que las tarjetas aparezcan escalonadas, una detrás de otra.
• Haz que las imágenes de la galería se vean en blanco y negro y recuperen el color al pasar el ratón, con filter.

Comprueba: con el movimiento reducido activado en el emulador del inspector, ¿sigue viéndose todo sin animaciones? ¿Alguna animación distrae más de lo que ayuda?

Webs estáticas y dinámicas

En el Tema 0 de 1º viste que visitar una web es una conversación entre el navegador (el cliente) y el servidor. Hasta ahora, en esa conversación el servidor se limitaba a buscar un archivo y enviarlo tal cual. Es lo que se llama una web estática, como tu portfolio.

En una web dinámica, el servidor no guarda las páginas hechas: las fabrica en el momento, para cada visita. Por eso un periódico puede mostrar las últimas noticias sin que nadie escriba un HTML nuevo cada vez, o una tienda puede enseñarte tu carrito.

Así, los lenguajes se reparten el trabajo. En el cliente (el navegador) trabajan HTML, CSS y JavaScript, lo que ya conoces. En el servidor trabaja otro lenguaje, que en el caso de WordPress es PHP, y la base de datos, que habla un lenguaje llamado SQL.

1. 01PeticiónEl navegador pide /blog/.
2. 02PHPEn el servidor, el programa recibe la petición y decide qué hace falta.
3. 03Base de datosPHP pide con SQL las diez últimas entradas.
4. 04HTMLPHP mete los datos en una plantilla y envía el HTML. El navegador no nota la diferencia.

Bases de datos

Una base de datos es un almacén organizado de información. La más habitual en la web, MySQL, guarda los datos en tablas, como una hoja de cálculo:

• Cada fila es un registro: una entrada del blog.
• Cada columna es un dato de ese registro: el título, la fecha.
• El id es un número único que identifica cada fila, como el DNI.

Para pedir datos se usa SQL, un lenguaje que se lee casi como una frase en inglés:

SELECT titulo, fecha
FROM entradas
WHERE categoria = 'Ilustración'
ORDER BY fecha DESC;

«Selecciona el título y la fecha, de la tabla de entradas, cuando la categoría sea Ilustración, ordenadas por fecha de la más nueva a la más antigua». No hace falta que aprendas SQL: WordPress lo escribe por ti. Pero entender que tu contenido vive en tablas te ayudará a saber qué pasa cuando, por ejemplo, mueves una web a otro servidor y hay que llevarse también la base de datos.

Fíjate: se parece mucho al array de objetos de la Unidad 5. Cada objeto era un registro y cada propiedad, una columna. La diferencia es que la base de datos guarda la información de forma permanente, en el servidor, y puede manejar millones de registros.

WordPress por dentro

WordPress es un CMS (gestor de contenidos): una web dinámica ya programada, en PHP y MySQL, que se instala en un servidor y se maneja desde un panel. Cómo se usa (el contenido, Elementor, la publicación) lo ves en Medios Informáticos II. Aquí miramos cómo está hecho por dentro, para poder llevar a WordPress tus propias maquetaciones.

Instalarlo en local

Igual que en Medios II, instala WordPress en tu ordenador con Local (los pasos están en el Tema 1 de Medios II). En Local, el botón Go to site folder abre la carpeta con todos sus archivos.

Las carpetas de WordPress

app/public/
├── wp-admin/          ← el panel de administración (no se toca)
├── wp-includes/       ← el núcleo de WordPress (no se toca)
├── wp-content/        ← TODO lo tuyo está aquí
│   ├── themes/        ← los temas (el diseño)
│   ├── plugins/       ← los plugins (las funciones)
│   └── uploads/       ← las imágenes y archivos subidos
└── wp-config.php      ← la conexión con la base de datos

Idea clave: nunca modifiques los archivos de wp-admin ni de wp-includes: se sustituyen en cada actualización y perderías los cambios. Todo lo que hagas va en wp-content, sobre todo en tu tema.

Qué es un tema, por dentro

Un tema es una carpeta dentro de wp-content/themes con plantillas y estilos. Los temas actuales de WordPress son temas de bloques, y su estructura mínima es ésta:

mi-tema/
├── style.css          ← el nombre del tema y tu CSS
├── theme.json         ← colores, tipografías y espacios
├── templates/
│   └── index.html     ← la plantilla general
└── parts/
    ├── header.html    ← la cabecera
    └── footer.html    ← el pie

El archivo style.css empieza con un comentario que WordPress lee para saber cómo se llama el tema:

/*
Theme Name: Mi portfolio
Author: Tu nombre
Version: 1.0
*/

Las plantillas son HTML con bloques de WordPress, que se escriben como comentarios especiales. En la práctica, no se escriben a mano: se diseñan en el editor del sitio (Apariencia › Editor) y se exportan.

Tu maquetación en WordPress

¿Cómo se lleva a WordPress un diseño que ya tienes hecho en HTML y CSS? La forma más sencilla de hacerlo hoy es crear un tema de bloques propio con el plugin oficial Create Block Theme, y trasladar a él tu sistema de diseño.

1. Crear el tema

1. Instala el plugin Create Block Theme desde Plugins › Añadir nuevo plugin.
2. Abre el editor del sitio (Apariencia › Editor): el plugin añade un icono con sus opciones. Elige crear un tema en blanco y ponle nombre. El plugin crea la carpeta con style.css, theme.json y las plantillas.
3. Actívalo en Apariencia › Temas.

2. Tus variables, en theme.json

El archivo theme.json es el equivalente de tus variables en :root. Lo que pongas aquí aparece en el editor como la paleta y las tipografías de la web, para que quien escriba el contenido use siempre las tuyas:

{
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        { "slug": "fondo",  "name": "Fondo",  "color": "#F7F6F2" },
        { "slug": "texto",  "name": "Texto",  "color": "#21231F" },
        { "slug": "acento", "name": "Acento", "color": "#576F6F" }
      ]
    },
    "layout": { "contentSize": "720px", "wideSize": "1200px" }
  }
}

WordPress convierte cada color en una variable de CSS: --wp--preset--color--acento. Puedes usarla en tu style.css como cualquier otra variable.

3. Maquetar con bloques y tu CSS

1. En Apariencia › Editor, construye la cabecera, el pie y las plantillas con bloques: Grupo, Fila y Pila son, por dentro, contenedores Flexbox; Cuadrícula, un Grid.
2. Lo que los bloques no permitan, añádelo en style.css. A cualquier bloque se le puede poner una clase en Avanzado › Clases CSS adicionales, como harías en tu HTML.
3. Al terminar, guarda los cambios en los archivos del tema con la opción Guardar cambios en el tema del plugin. Así tu tema queda listo para instalarlo en cualquier WordPress.

Fíjate: en Medios II se maqueta con Elementor, un maquetador visual que guarda el diseño en la base de datos. Aquí construyes un tema propio, cuyo diseño está en archivos de código que tú controlas. Las dos formas existen en el trabajo real, y conocerlas te permite elegir la adecuada para cada proyecto.

Práctica

1. Dibuja un esquema de lo que pasa cuando alguien visita el blog de una web hecha con WordPress, desde que escribe la dirección hasta que ve la página. Señala qué ocurre en el cliente y qué en el servidor.
2. Instala WordPress con Local y localiza las carpetas themes, plugins y uploads. Sube una imagen desde el panel y búscala en uploads.
3. Crea un tema de bloques con Create Block Theme y traslada a theme.json la paleta y el ancho de contenido de tu portfolio.
4. Construye en el editor del sitio la cabecera y el pie de tu portfolio, y guárdalos en el tema.

Retos opcionales

• Añade a theme.json las tipografías de tu portfolio.
• Abre style.css de tu tema y añade algún detalle que los bloques no permitan, con una clase CSS adicional.

Principios de accesibilidad

Una web accesible es una web que puede usar todo el mundo: también las personas ciegas o con poca visión, sordas, con dificultades de movimiento o cognitivas, y quien navega con el móvil a pleno sol o con un brazo escayolado. En España, más de cuatro millones de personas tienen alguna discapacidad, y con la edad, todos acabamos necesitando webs más accesibles.

Además, desde junio de 2025 la Ley Europea de Accesibilidad obliga a muchas empresas (tiendas online, bancos, transportes…) a que sus webs sean accesibles. Saber hacerlo es ya un requisito profesional.

Las pautas WCAG

Las WCAG (Web Content Accessibility Guidelines) son las pautas internacionales de accesibilidad, publicadas por el W3C, el mismo organismo que define HTML y CSS. Tienen tres niveles de exigencia (A, AA y AAA). La ley pide el nivel AA. Se organizan en cuatro principios:

Muchas de estas pautas ya las aplicas: el alt, los <label>, la estructura semántica, el contraste, prefers-reduced-motion. Las tienes resumidas en el apartado de accesibilidad visual de Recursos, con un comprobador de contraste.

Navegación por teclado

Muchas personas no usan ratón: por una discapacidad motora, porque usan un lector de pantalla o, simplemente, porque es más rápido. Navegan con el teclado:

Las cuatro reglas

1. Que todo se pueda alcanzar. Usa elementos que ya funcionan con el teclado: <a href> para ir a otra página, <button> para hacer algo. Un <div> con un evento click no se puede alcanzar con Tab.
2. Que se vea dónde está el foco. Nunca escribas outline: none sin poner otra cosa a cambio. Dale estilo con :focus-visible.
3. Que el orden tenga sentido. El foco sigue el orden del HTML, no el visual. Si con Grid o con order cambias mucho el orden en pantalla, el recorrido con Tab saltará de un lado a otro.
4. Que nadie se quede atrapado. Una ventana modal se tiene que poder cerrar con Esc, y al cerrarla el foco debe volver al botón que la abrió.

El enlace para saltar al contenido

Si una página tiene un menú con veinte enlaces, quien usa el teclado tiene que pulsar Tab veinte veces en cada página antes de llegar al contenido. Para evitarlo se pone, como primer elemento, un enlace que sólo aparece al recibir el foco:

<a class="saltar" href="#contenido">Saltar al contenido</a>
…
<main id="contenido">…</main>

.saltar {
  position: absolute;
  left: 16px;
  top: -100px;              /* escondido fuera de la pantalla… */
}
.saltar:focus {
  top: 16px;                /* …hasta que recibe el foco */
}

Pruébalo ahora: deja el ratón y recorre esta misma página con Tab. ¿Ves siempre dónde estás? Haz lo mismo con tu portfolio. Es la prueba de accesibilidad más rápida y la que más problemas descubre.

Auditorías

Una auditoría es una revisión sistemática de la web para encontrar problemas. Combina herramientas automáticas con revisión manual, porque las herramientas sólo detectan una parte de los problemas (en accesibilidad, más o menos un tercio).

Herramientas automáticas

Revisión manual

• Recorre la web sólo con el teclado: ¿llegas a todo, ves el foco y el orden tiene sentido?
• Haz zoom al 200 %: ¿se sigue leyendo todo, sin que nada se corte ni se superponga?
• Desactiva las imágenes (o mira los alt en WAVE): ¿se entiende la página?
• Activa el movimiento reducido en el inspector: ¿desaparecen las animaciones?
• Pruébala con el lector de pantalla del móvil (VoiceOver en iPhone, TalkBack en Android) durante dos minutos: ¿entiendes dónde estás?

Idea clave: una puntuación de 100 en Lighthouse no garantiza que la web sea accesible, sólo que no tiene los errores que la máquina sabe detectar. La revisión manual es la que de verdad cuenta.

El encargo

El proyecto final consiste en rediseñar y ampliar tu portfolio para que sea tu carta de presentación profesional: la web que enseñarías en una entrevista de prácticas o de trabajo. Partes de la versión que pusiste a punto en la Unidad 1 y la mejoras con lo que has aprendido este curso.

Trabájalo como un encargo real de diseño, en tres fases:

1. Planificación: qué vas a contar, a quién y cómo se organiza.
2. Desarrollo: construir la web por capas, de lo básico a lo interactivo.
3. Revisión y publicación: comprobar que todo funciona para todo el mundo y publicarla.

Requisitos obligatorios

Usa esta lista para ir comprobando tu avance. Puedes marcar las casillas mientras trabajas (se borran al recargar la página).

• HTML semántico y una jerarquía de encabezados correcta.
• Todas las imágenes con alt, width y height.
• Diseño mobile first que se ve bien desde el móvil hasta pantallas grandes.
• Títulos con clamp() y galería con imágenes igualadas (object-fit).
• Tarjetas con el título sobre la imagen.
• Una imagen interactiva con al menos cuatro hotspots que funcionan con un toque en el móvil.
• Menú desplegable en el móvil.
• Consola sin errores.

Para subir nota

• Animaciones de entrada con prefers-reduced-motion.
• Galería con visor.
• Modo oscuro, con botón que recuerda la elección.
• Cualquier otro contenido de «Para saber más» aplicado con criterio.

Idea clave: los requisitos son el mínimo, no el objetivo. Lo que hará destacar tu portfolio es lo mismo que en cualquier proyecto de diseño: una idea clara, coherencia visual y atención al detalle. La técnica está al servicio del diseño, no al revés.

Fase 1: planificación

Antes de abrir el editor de código, decide qué vas a hacer. Una web bien planificada se programa mucho más rápido.

1. Objetivo y público

Escribe en dos o tres frases para qué sirve tu portfolio y quién lo va a ver. No es lo mismo buscar prácticas en un estudio de identidad corporativa que en una agencia de diseño web o en una editorial: la selección de trabajos y el tono cambian.

2. Inventario de contenidos

Haz una lista de todo lo que va a aparecer: los proyectos que vas a enseñar (mejor seis muy buenos que quince irregulares), tu presentación, tus datos de contacto, tus redes. Para cada proyecto, reúne las imágenes y escribe un texto breve: el encargo, tu solución y las herramientas que usaste.

3. Arquitectura de la información

Dibuja el mapa del sitio: qué páginas tendrá la web y cómo se enlazan. Recuerda lo que vimos sobre el hipertexto en 1º: mucha gente entrará directamente a la página de un proyecto desde un enlace, así que cada página debe entenderse por sí sola y dejar claro cómo volver.

4. Bocetos (wireframes)

Dibuja la estructura de cada tipo de página, primero en móvil y después en pantalla grande. Sólo cajas y textos de relleno, sin colores ni tipografías definitivas: el objetivo es decidir la distribución. Puedes hacerlo en papel o en Figma.

5. Guía de estilo

Define tu sistema visual antes de programarlo: paleta de colores (con su versión para el modo oscuro), las dos fuentes y sus tamaños, la escala de espacios y el estilo de los componentes (botones, tarjetas, enlaces). Todo esto se convertirá directamente en las variables de tu CSS.

6. Calendario

Reparte el tiempo disponible entre las tres fases y ponte fechas para cada una. Reserva al menos un cuarto del tiempo para la revisión: siempre hay más cosas que arreglar de las que parece.

Entrega de esta fase: un documento (o un tablero en Figma) con el objetivo, el mapa del sitio, los bocetos en móvil y escritorio, y la guía de estilo.

Fase 2: desarrollo

Construye la web por capas, de lo más básico a lo más avanzado. Cada capa debe funcionar antes de pasar a la siguiente. Así, si algo falla en JavaScript, la web sigue siendo usable: es lo que se llama mejora progresiva.

Organización de los archivos

mi-portfolio/
├── index.html
├── proyectos.html
├── contacto.html
├── css/
│   └── estilos.css
├── js/
│   └── main.js
└── img/
    ├── proyectos/
    └── logo.svg

Capa 1: contenido y estructura (HTML)

Escribe todas las páginas con su contenido real y el HTML semántico, sin nada de CSS. Pásalas por el validador. Una página sin estilos tiene que poder leerse y usarse de principio a fin.

Capa 2: aspecto (CSS)

Empieza por las variables de tu guía de estilo y los estilos base, después la estructura (layout) para el móvil, luego los componentes, y al final las media queries para pantallas grandes. Ordena tu hoja de estilos en secciones con comentarios para encontrar cada cosa:

/* =========================================
   1. Variables (colores, fuentes, espacios)
   2. Base (box-sizing, body, img, enlaces)
   3. Layout (cabecera, main, pie, retículas)
   4. Componentes (botones, tarjetas, menú, visor)
   5. Utilidades y estados (.oculto, .activo…)
   6. Modo oscuro y movimiento reducido
   ========================================= */

Capa 3: comportamiento (JavaScript)

Añade la interactividad al final, componente a componente: primero el menú, después los hotspots y, si te da tiempo, lo opcional. Prueba cada uno antes de empezar el siguiente, y vigila la consola.

Truco: guarda copias de tu proyecto a medida que avanzas (por ejemplo, una carpeta comprimida con la fecha al final de cada sesión). Si algo se rompe y no sabes qué has cambiado, podrás volver a la última versión que funcionaba. Los profesionales lo hacen con un sistema de control de versiones llamado Git; si te interesa, la aplicación GitHub Desktop es una buena forma de empezar, y además facilita publicar en GitHub Pages.

Ojo: está bien buscar ayuda en internet, en tutoriales o en asistentes de inteligencia artificial, pero no copies código que no entiendes. Si usas un fragmento, asegúrate de que sabes explicar qué hace cada línea: en la presentación final te lo podemos preguntar.

Fase 3: revisión y publicación

Lista de revisión

• El HTML de todas las páginas pasa el validador del W3C sin errores.
• El CSS pasa el validador de CSS.
• No hay scroll horizontal en ningún ancho de pantalla.
• Todo se puede usar sólo con el teclado (Tab, Intro, Esc) y se ve dónde está el foco.
• El contraste del texto es suficiente en modo claro y en modo oscuro.
• Ninguna imagen pesa más de 300 KB.
• Todos los enlaces funcionan (ninguno lleva a una página que no existe).
• La consola no muestra errores en ninguna página.
• La web se ha probado en un móvil real, no sólo en el inspector.
• Los nombres de archivos y carpetas están en minúsculas, sin espacios ni tildes.

Publicar

Como en Programación 1º, publica tu web con Netlify (arrastrando la carpeta a su web) o con GitHub Pages. Comprueba la versión publicada en el ordenador y en el móvil: a veces aparecen problemas que no se veían en local, casi siempre por mayúsculas en los nombres de archivo o rutas mal escritas.

Presentación

Prepara una presentación breve de tu portfolio (unos cinco minutos), como si se lo enseñaras a un estudio en una entrevista:

• Para quién es y qué querías transmitir.
• Las decisiones de diseño más importantes: estructura, tipografía, color.
• La parte técnica de la que estás más satisfecho o satisfecha, y cómo la resolviste.
• Un problema que te costó resolver y qué aprendiste.

Fíjate: lo último es importante. Saber explicar cómo resolviste un problema dice más de ti a un estudio que una web sin ningún fallo.

Para saber más (opcional)