Rediseño de la estructura y apariencia básica de un sitio web (I)
Me propongo comenzar un proceso de diseño de un sitio web básico que pueda utilizar luego en el rediseño de un par de sitios que mantengo (uno con WordPress y el otro escribiendo directamente el código php) y, quizás, también el de este mismo blog.
Además, no se trataría solo de un cambio de apariencia, sino también de la gestión, ya que, en una etapa posterior, quiero experimentar con un generador de sitios estáticos, en particular con Hugo.
Y, durante el proceso, voy escribiendo esta serie de entradas que lo documentan.
El enfoque del diseño tendría que ser adaptativo (responsive) o, más aún, flexible.
Como mínimo, la composición y las dimensiones de las imágenes y las tipografías deberían adaptarse a las múltiples dimensiones de pantalla y resoluciones de los dispositivos desde donde se podría acceder al sitio. Y, además, considerando primero a las de menores dimensiones, con una política mobile-first.
Empezar a escribir los códigos HTML y CSS y definir la tipografía base del sitio
Entonces, para empezar debería armar una página con un artículo y una imagen (que después se podría convertir en la entrada de un blog o en una sección de presentación de un sitio web) y pensarla para ser vista en dispositivos de pantallas pequeñas.
La pregunta que me surgió entonces fue si debía utilizar las etiquetas <section> o <article> (o ninguna de ellas y, en su lugar, usar etiquetas <div>) para el texto principal del hipotético artículo.
Buscando respuesta a esa cuestión encontré una explicación muy clara en el siguiente video del canal Programación en español:
Después empecé a escribir código. Hice un directorio de trabajo y dentro de él hice 2 archivos nuevos, uno de nombre index.html y el otro estilos.css. También hice un subdirectorio al que llamé images y allí coloqué la versión mediana (1280 x 853 px) de esta fotografía de Louis Bauer, descargada de pexels.com para usar como imagen de ejemplo.
Y este fue el primer contenido del archivo index.html al que le coloqué un par de párrafos del tradicional texto falso Lorem Ipsum:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sitio web básico</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,400;0,800;1,400;1,700&display=swap" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="estilos.css">
</head>
<body>
<header>
<nav>
</nav>
</header>
<main>
<article>
<h1>Título del artículo</h1>
<figure>
<img src="images/pexels-louis-bauer-249360.jpg" alt="La mano de una persona escribiendo en un cuaderno.">
<figcaption>Leyenda de la imagen</figcaption>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Odio morbi quis commodo odio. Neque aliquam vestibulum morbi blandit cursus risus at. Erat pellentesque adipiscing commodo elit at imperdiet dui accumsan. Maecenas ultricies mi eget mauris. Fusce id velit ut tortor. Nibh cras pulvinar mattis nunc. Lorem ipsum dolor sit amet. Quis vel eros donec ac odio tempor. Purus sit amet volutpat consequat. Elit eget gravida cum sociis natoque penatibus. Blandit cursus risus at ultrices mi tempus. Magna ac placerat vestibulum lectus mauris ultrices. Scelerisque in dictum non consectetur a erat nam at. Ultricies leo integer malesuada nunc vel. Mauris pellentesque pulvinar pellentesque habitant morbi. Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae. Nulla facilisi etiam dignissim diam. Morbi leo urna molestie at. Tortor vitae purus faucibus omare suspendisse sed nisi.</p>
<p>Ullamcorper malesuada proin libero nunc consequat interdum. Porttitor leo a diam sollicitudin tempor id. Parturient montes nascetur ridiculus mus mauris vitae ultricies teo. Ut diam quam nulla porttitor. Sit amet consectetur adipiscing elit duis. Dis parturient montes nascetur ridiculus. Pretium fusce id velit ut tortor pretium viverra suspendisse potenti. Cursus turpis massa tincidunt dui ut omare lectus sit. Id neque aliquam vestibulum morbi blandit cursus. Rhoncus mattis thoncus uma neque viverra justo nec.</p>
</article>
</main>
<footer>
</footer>
</body>
</html>Para definir la familia tipográfica que iba a usar en la página, agregué en el código del archivo HTML tres etiquetas <link...> (líneas 7, 8 y 9) antes de la etiqueta <link...> que lo vincula con la hoja de estilos (línea 10). Esas tres líneas son las que obtuve al hacer uso del servicio en línea de tipos de letra de Google (Google Fonts), siguiendo estos pasos.
Este es el contenido del archivo estilos.css:
* {
font-family: 'Sarabun', sans-serif;
}
img {
width:100%;
}En la hoja de estilos, al selector *, que hace referencia a todos los elementos del documento al que está vinculado, le asigné (como se ve en la línea 2) el tipo de letra Sarabun que elegí de Google Fonts y, como resguardo en la eventualidad que no pudiera acceder a esa fuente, que usase la fuente sans-serif predefinida del navegador.
Así que, en caso de querer cambiar la fuente tipográfica del documento, tendría que:
- cambiar las líneas 7, 8 y 9 del código HTML por el nuevo código que se descargue al seleccionar otra fuente tipográfica en Google Fonts.
- cambiar la línea 2 en el código CSS por el nombre de la fuente elegida en Google Fonts.
Finalmente, también en la hoja de estilos, le definí al selector img un ancho del total del espacio que tuviera disponible (width:100%;).
Así se veía la página index.html abierta desde Firefox y con la ventana del navegador reducida a unos 600 px:
Y, si cambiaba el tamaño de la ventana del navegador, el contenido se ajustaba en consecuencia.
En la próxima parte de esta serie voy a contar los pasos que seguí para:
- definir una paleta de colores para la página con propiedades personalizadas CSS.
- colocar elementos en la cabecera y en el pie de página.
- empezar a chequear que el código HTML del archivo fuera válido.