Bienvenido a la asignatura Edición Web

¿Qué suele llevar?

• El nombre o el logo de la marca, que casi siempre te devuelve a la portada.
• Los enlaces a las secciones más importantes del sitio.
• A veces, un botón destacado que invita a hacer algo, como «Regístrate».

Header y navbar no son lo mismo

El navbar suele vivir dentro del header, pero el header puede incluir además un título grande, una imagen o un texto de bienvenida.

Tres grandes zonas

Dentro del body organizamos el contenido en tres franjas: la cabecera arriba, el contenido principal en medio y el pie de página abajo.

¿Qué suele llevar?

• El aviso de copyright y los datos de la organización.
• Enlaces legales, como privacidad o términos de uso.
• Redes sociales y datos de contacto.

Jerarquía y énfasis

Los títulos grandes marcan las secciones más importantes; los más pequeños, las subsecciones. Dentro de un párrafo, una palabra en negrita destaca por importancia, y una en cursiva matiza el tono.

¿Por qué describirlas?

Esa descripción se usa cuando la imagen no puede verse: por un fallo de carga, o porque alguien navega con un lector de pantalla. Si la imagen es solo decorativa, no hace falta describirla.

Tipos de enlace

• Interno: baja o sube dentro de la misma página.
• Externo: te lleva a otra web, normalmente en una pestaña nueva.
• De contacto: abre tu correo o el marcador de teléfono directamente.
• De descarga: te ofrece guardar un archivo en vez de abrirlo.

Tres niveles de importancia

• Botón principal: la acción más importante de la pantalla. Normalmente solo hay una.
• Botón secundario: una alternativa, menos destacada que la principal.
• Botón de texto: la opción más discreta, casi como un enlace.

Cómo se lee

Empieza siempre por el inicio y va bajando de nivel en nivel hasta la página actual, que suele aparecer resaltada y ya no es clicable.

¿Con puntos o numerada?

Cuando el orden no importa —ingredientes, características, ventajas— se usan puntos. Cuando el orden sí importa —pasos a seguir, un ranking— se numeran.

Cómo funciona

Al hacer clic en una pregunta, su respuesta se despliega debajo. Vuelve a hacer clic para cerrarla. El propio menú lateral de esta guía funciona exactamente igual.

Solo una a la vez

Únicamente se ve el contenido de la pestaña seleccionada; el resto queda oculto hasta que lo eliges. Se usan mucho cuando hay varias opciones del mismo tipo, como distintos servicios.

¿Cuándo se usa?

Es muy habitual en la portada de una web, para mostrar varias imágenes destacadas sin que ocupen toda la página a la vez.

Una idea por diapositiva

Cada diapositiva muestra un mensaje breve y completo. Es una buena alternativa cuando lo importante es el texto, no una fotografía.

¿Para qué sirve?

Sirve para presentar varias opciones del mismo tipo, una junto a otra, de modo que se puedan comparar fácilmente de un vistazo.

¿Cuándo se usa?

Es habitual en catálogos de cursos, servicios o productos: en vez de amontonar todas las tarjetas, dejas que el usuario deslice para ver más.

¿Para qué sirve?

Se usa para mostrar galerías de fotos, catálogos de productos, portafolios o cualquier conjunto de elementos que quieras alinear en columnas parejas, sin tener que calcular medidas a mano.

Grid masonry

El grid masonry (o "de mampostería") es una variante donde los elementos pueden tener alturas distintas y se acomodan solos, como ladrillos, para no dejar huecos. Es el estilo típico de los tableros de Pinterest.

Mensaje claro, botón visible

Suele tener un texto corto que explica el beneficio de actuar, y un botón con un verbo de acción bien destacado.

Ancho fijo (contenido "boxed")

La mayoría del texto y las imágenes de una web viven dentro de un contenedor con un ancho máximo (por ejemplo, 1200 píxeles) centrado con márgenes automáticos a los lados. Así, en pantallas muy grandes las líneas de texto no se alargan tanto que resulten incómodas de leer.

Cuándo conviene el ancho completo

Algunos bloques se dejan sin ancho máximo para que ocupen el 100% del navegador: fondos de color, imágenes de cabecera muy grandes, o franjas que quieres que "respiren" de lado a lado de la pantalla.

¿Dónde se ve este patrón?

• Paneles de administración y aplicaciones web, con el menú siempre visible.
• Blogs y webs de documentación, con categorías o un índice —como el que usa esta misma guía—.
• Tiendas online, con filtros de producto (precio, talla, color…) a un lado.

¿Qué es el diseño responsive?

En vez de crear una página distinta para cada dispositivo, se construye una sola página cuyo aspecto se adapta automáticamente: las columnas se reorganizan, los textos y botones cambian de tamaño, y algunos elementos incluso se ocultan o se sustituyen por otros más cómodos en pantallas pequeñas.

Puntos de ruptura (breakpoints)

Un breakpoint es el ancho de pantalla en el que el diseño cambia de forma notable: por ejemplo, cuando la ventana baja de cierto ancho, dos columnas pasan a apilarse una sobre otra. No hace falta definir un breakpoint para cada tamaño de pantalla posible —con dos o tres suele ser suficiente—.

¿Qué vas a encontrar?

Cada web de ejemplo es una página completa, distinta de las demás, que combina varios de los elementos que hemos explicado en esta guía: navbar, tarjetas, pestañas, sliders, acordeones y mucho más.

¿Por qué visitarlas?

Ver ejemplos reales ayuda a entender por qué se toman ciertas decisiones de diseño: qué se destaca primero, cómo se agrupan los productos, o cómo cambia la web al reducir la ventana.

¿Para qué sirve?

Es un constructor básico pensado para entender cómo se organiza la estructura de una página web: eliges los bloques de la paleta, los sueltas en el lienzo en el orden que quieras y compruebas al momento cómo queda el resultado, sin escribir ni una línea de código.