Módulo 3: Layout, HTML y CSS

Hasta ahora has trabajado con imágenes bitmap y vectoriales de forma aislada. En este módulo empiezas a entender dónde y cómo se colocan esos elementos dentro de una página web real. Aquí es donde el diseño deja de ser una imagen estática y se convierte en algo que vive dentro de un navegador.

#Qué es el layout en diseño web

El layout es la disposición espacial de los elementos de una página: dónde va el encabezado, dónde el menú, dónde el contenido principal y dónde el pie de página. Es la estructura invisible que organiza todo lo demás, y suele diseñarse primero en forma de boceto o wireframe antes de tocar una sola línea de código.

#HTML y CSS: dos lenguajes, dos funciones distintas

Uno de los errores más comunes al empezar es mezclar mentalmente lo que hace cada lenguaje. HTML estructura el contenido: define qué es un título, qué es un párrafo, qué es una imagen o un enlace. CSS decora esa estructura: define colores, tipografías, espaciados y la posición final de cada elemento en pantalla.

<!-- Esto es HTML: define la estructura -->
<h1>Bienvenido a mi restaurante</h1>
<p>Descubre nuestra carta de temporada.</p>

/* Esto es CSS: define el estilo de esa estructura */
h1 {
color: #2c2c2c;
font-family: 'Playfair Display', serif;
}

#El box model: la base de todo layout en CSS

Aquí está el concepto que más veces se explica mal y que más confusiones genera después: CSS trata cada elemento de la página como una caja rectangular, sin importar si es un texto, una imagen o un botón. Esa caja tiene cuatro capas, de dentro hacia fuera.

• Content (contenido): el texto o imagen real que se muestra
• Padding (relleno): el espacio interno entre el contenido y el borde de la caja
• Border (borde): la línea que rodea el padding y el contenido
• Margin (margen): el espacio externo que separa esa caja de las cajas vecinas

.tarjeta-plato {
width: 200px;
padding: 20px;
border: 5px solid #ccc;
margin: 15px;
}

Qué hemos hecho: definimos una caja de 200px de contenido, con 20px de relleno interno alrededor, un borde de 5px, y 15px de separación respecto a otros elementos. Por defecto, el ancho total visible de esta caja no son 200px, sino 200 + (20×2) + (5×2) = 250px, porque padding y borde se suman al ancho del contenido.

* {
box-sizing: border-box;
}

Qué hemos hecho: aplicamos border-box a absolutamente todos los elementos de la página con el selector universal *, una de las primeras líneas que casi cualquier desarrollador web añade al empezar un proyecto nuevo, para que las medidas de ancho y alto se comporten de forma predecible.

#Sistemas de layout modernos: Flexbox y Grid

Antes de que existieran estas herramientas, colocar elementos lado a lado en la página era una lucha constante con trucos poco intuitivos. Hoy existen dos sistemas pensados específicamente para resolver el layout.

xml

.menu-restaurante {
display: flex;
justify-content: space-between;
}

Qué hemos hecho: convertimos el contenedor .menu-restaurante en un contenedor flexible, y con justify-content: space-between repartimos sus elementos hijos (por ejemplo, los enlaces del menú de navegación) dejando el mismo espacio entre ellos, uno pegado al extremo izquierdo y otro al derecho.

#De boceto a código: el flujo real de trabajo

1. Se define el layout en un wireframe (papel, Figma o similar), sin colores ni tipografías definitivas
2. Se traduce esa estructura a HTML semántico: encabezados, secciones, párrafos, imágenes
3. Se aplica CSS para dar estilo visual y organizar el layout final con Flexbox o Grid
4. Se revisa el resultado en distintos tamaños de pantalla (esto se llama diseño responsive, y lo veremos con detalle en un módulo posterior)

Con esta base ya entiendes por qué un diseñador web no solo «hace bonito» un sitio, sino que necesita entender cómo se comporta cada caja dentro del navegador. El siguiente paso lógico es meterte con la tipografía y jerarquía visual, donde vas a aplicar estos mismos conceptos de layout para guiar la mirada del usuario dentro de la página.

#Cuestionario: Módulo 3