Nadie construye una casa sin plano
Antes de levantar una pared, el arquitecto dibuja la casa en papel. Si algo falla, se borra y ya está.
Corregir un dibujo cuesta un minuto. Corregir una pared cuesta una semana.
Con las páginas web pasa igual. Un boceto en papel te ahorra horas de código.
Palabras clave
| Palabra | Qué significa | Ejemplo |
|---|---|---|
| Boceto | Un dibujo rápido y sencillo de cómo será la página. | |
| Zona | Una parte de la página con su propio trabajo: cabecera, menú, contenido o pie. | |
| Cabecera | La zona de arriba, con el nombre del sitio. | <header> |
| Pie | La zona de abajo, con datos de contacto. | <footer> |
| Esquema | Un dibujo con cajas y flechas que muestra cómo se organiza algo. |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Cuatro pasos para un boceto
Uno: apunta qué debe hacer la página. Por ejemplo, enseñar la carta y dar el teléfono.
Dos: dibuja cajas para cada zona, sin detalles. Basta un lápiz y un folio.
Tres: escribe dentro de cada caja qué contiene.
Cuatro: repite el dibujo para el móvil. En un móvil, las zonas se ponen una debajo de otra.
Pruébalo: del boceto a las etiquetas
<header>Cabecera</header>
<nav>Menú</nav>
<main>
<section>Carta</section>
<aside>Horario</aside>
</main>
<footer>Pie</footer>
De cada zona a su etiqueta
| Zona del boceto | Etiqueta HTML | Qué guarda |
|---|---|---|
| Cabecera | header | El nombre y el logo |
| Menú | nav | Los enlaces para moverse |
| Zona principal | main | Lo más importante de la página |
| Barra lateral | aside | Datos extra, como el horario |
| Pie | footer | Dirección, teléfono y redes |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Repaso rápido: zonas
Inténtalo
Repaso rápido: zonas
3 preguntasTus respuestas se corrigen aquí y no se guardan. Una cuenta guarda tus resultados.
El mismo boceto, en el móvil
En el ordenador, la carta y el horario van uno al lado del otro.
En el móvil no caben. Pasan a ir uno debajo de otro, en este orden: cabecera, menú, carta, horario y pie.
Dibujar los dos bocetos te dice qué reglas CSS necesitarás luego.