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 habitual 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. Aenean et tortor at risus viverra adipiscing at in tellus. Leo in vitae turpis massa...</p>
<p>Accumsan lacus vel facilisis volutpat est velit egestas dui. Dignissim sodales ut eu sem integer. Quam nulla porttitor massa id neque aliquam vestibulum morbi blandit. Duis at consectetur lorem donec...</p>
</article>
</main>
<footer>
</footer>
</body>
</html>Y este otro es el contenido del archivo estilos.css:
* {
font-family: 'Sarabun', sans-serif;
}
img {
width:100%;
}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...> (las que están destacadas en rojo) antes de la etiqueta <link...> que lo vincula con la hoja de estilos. 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.
En la hoja de estilos, al selector *, que hace referencia a todos los elementos del documento al que está vinculada, le asigné (como se ve en la línea que está resaltada con azul) el tipo de letra 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 tres líneas de código que se muestran coloreadas en rojo en el código HTML por el nuevo código que se descargue al seleccionar otra fuente tipográfica en Google Fonts.
- cambiar la línea de código marcada en azul 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.
No hay comentarios.:
Publicar un comentario
Lo que escriba a continuación será revisado antes de publicarse.
Gracias por tus comentarios.