Al iniciar con HTML y CSS, una de las tareas más recurrentes de todo desarrollador, es la maquetación web.

¿Qué es la Maquetación Web?

La maquetación web consiste en el proceso de traducir a código HTML y CSS todo el diseño que previamente habrá generado el departamento de diseño, intentando optimizar lo más posible el código, reutilizar el código y cuidando las estructuras para que el sitio pueda tener un diseño responsivo (Responsive Design), es decir, se ajuste a cualquier dispositivo

Hasta este momento, en este curso, solo hemos tenido interacción con HTML, sin embargo, poco a poco nos vamos acercando al momento de utilizar CSS, es por eso que es importante este tema para poder realizar un buen análisis y sentar las bases necesarias para que nuestros estilos queden de lo mejor.

¿Cuales son los elementos de la Maquetación Web?

Es importante que yo te comente que anteriormente se utilizaban tablas para poder maquetar, si las mismas tablas que te expliqué en el artículo anterior, por lo que probablemente te puedas encontrar en la red algún tutorial con esta técnica que ya está completamente en desuso.

Después de las tablas, se generaron nuevas formas de maquetación web mediante divs o contenedores, que si bien, aún siguen en uso, es importante que te comente que a partir de HTML5 se intentó generar una web más semántica, por lo que se añadieron nuevos elementos que te presento a continuación para mejorar tu maquetación web:

Etiqueta Header html

En la maquetación web, Define el encabezado para una página, documento o sección, anteriormente se usaba un

agregándole una clase header, ahora se reemplazó por la etiqueta, aquí te muestro un ejemplo, la primera línea será como se hacía antes y la segunda como la podemos reemplazar.

<div class="header"></div>
<header></header>

HTML

Etiqueta Nav html

En la maquetación web, Define el conjunto de links o enlaces que permitirán navegar entre todo el sitio web. Anteriormente se usaba una class navbar para poder trabajar, te muestro con ejemplo:

<div class="navbar"></div>
<nav></nav>

HTML

Etiqueta Section html

En la maquetación web, Define una sección de un documento, comúnmente va asociado a un contenedor o div, es decir, podemos reemplazar sin ningún problema la etiqueta

por 

<div class="container"></div>
<section></section>

HTML

Etiqueta Article html

En la maquetación web, Define un artículo o sección independiente que contiene por si misma contenido. comúnmente la utilizamos dentro de una etiqueta

, sin embargo, no necesariamente tiene que ser así, un ejemplo de reemplazo podría ser

<div class="post"></div>
<article></article>

HTML

Etiqueta Aside html

En la maquetación web, Define el contenido que estará en un lado de la página, es decir, se utiliza comúnmente como una barra lateral o sección lateral. Anteriormente utilizabamos una clase sidebar

<div class="sidebar"></div>
<aside></aside>

HTML

En la maquetación web, Define el pie de página de un documento o sección, anteriormente se utilizaba una clase footer que semánticamente la podemos reemplazar por la etiqueta, ejemplo:

<div class="footer"></div>
<footer></footer>

HTML

Etiqueta Details html

En la maquetación web, Define un elemento de detalle de información adicional que el usuario puede abrir y cerrar bajo demanda, conocemos ese efecto como un toggle, aquí te muestro un ejemplo

<div class="toggler"></div>
<details></details>

HTML

Etiqueta Summary html

En la maquetación web, Define el encabezado o cabecera de la etiqueta details. Ejemplo:

<details>
  <summary>Aprendiendo HTML</summary>
  <p>Este es un curso sobre HTML desde cero</p>
</details>

HTML

Es importante recalcar que como decía al principio, estas son etiquetas que permiten tener una web mucho más semántica que la anterior, ya que cada etiqueta tiene su propia interpretación, sin embargo, esto no quiere decir que automáticamente tendrán funcionalidad, recordemos que con HTML solo se generan estructuras, los estilos serán otro tema.

Una vez que ya sabemos cuales son las etiquetas, veamos un ejemplo del análisis que debemos de llevar a cabo para poder maquetar correctamente.

Ejemplos de como hacer una Maquetación Web

En este ejemplo te muestro ¿Cómo hacer una maqueta HTML? que es una de las preguntas más comunes a la hora de trabajar en el desarrollo.

Imagina que el departamento de diseño ya ha terminado con la propuesta del sitio web y te ha proporcionado el archivo, normalmente estos archivos son de Photoshop, Illustrator, Adobe XD, Figma o Sketch, indistintamente del programa que se requiera, vamos a ver estructuras de diseño, te muestro un ejemplo:

maquetación de sitio web

Esta imagen la tomaré solo de referencia, ya que su único objetivo es ser didáctico, para poder representar lo que te quiero explicar. A este tipo de imágenes se le denominan wireframes o mockups y son el primer bosquejo que los diseñadores crean antes de poder empezar a realizar un diseño completo.

Entonces empezamos, como podemos ver esta imagen se divide en ciertas partes o secciones que si observas comúnmente siguen un patrón, por lo que debemos que encontrar esos patrones para que las cosas sean más sencillas.

En principio, en la parte superior tenemos una barra de navegación en color púrpura, esa barra de navegación contiene 4 enlaces que están centrados a la página por lo que probablemente, a pesar de no verlo, puede que exista un contenedor dentro de ello. Entonces, el código tal vez podría quedar como esto

<nav>
  <section>
    <ul>
      <li><a href="#">Enlace 1</a></li>
      <li><a href="#">Enlace 2</a></li>
      <li><a href="#">Enlace 3</a></li>
      <li><a href="#">Enlace 4</a></li>
    </ul>
  </section>
</nav>

HTML

En este caso, como contenedor agregamos la etiqueta nav, sin embargo, si analizamos la imagen detalladamente, deberá de existir un contenedor que tenga el 100% de ancho, mientras que deberá de existir otro contenedor que se pueda centrar a la pantalla, es por eso que adicional, agregamos la etiqueta section, y dentro de ella toda nuestra estructura de enlaces.

Después de la barra de navegación nos podemos dar cuenta que existe un área al púrpura que lleva dentro un buscador, seguramente esto sería algo así

<section>
  <div class="buscador">
    <input type="text">
    <input type="submit" value="Buscar">
  </div>
</section>

HTML

Agregamos una sección para poder tener el contenedor de color púrpura y adicional, agregamos un div, como puedes observar aún se siguen usando los divs, sin embargo, si tenemos una etiqueta que semánticamente cumple con cierta función, es recomendable usarla.

El div contendrá tanto el input text como el input submit que realizarán las funciones de búsqueda.

Para poder continuar, podemos ver que existen 3 secciones que están contenidas dentro de una sección más grande, también si observas, cada sección ocupa un tercio de la sección principal y cuenta con una image y un párrafo, entonces, podemos hacer algo como esto:

<section>
  <article class="articulo">
    <img src="#" alt="">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  </article>
  <article class="articulo">
    <img src="#" alt="">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  </article>
  <article class="articulo">
    <img src="#" alt="">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  </article>
</section>

HTML

Aquí podemos hacer uso de la etiqueta article, añadiendo una clase para que todos los artículos tengan el mismo comportamiento, adicional le agregamos una imagen y un párrafo con texto simulado

Ya para finalizar el wireframe, si observas, tenemos una sección debajo que es la sección del footer, así que bastará con crear la estructura mediante la etiqueta:

<footer></footer>

HTML

Aquí surgen cosas muy interesantes, ya que probablemente todo el código que veamos, al abrirlo con el navegador no se parezca en nada a lo que estamos viendo dentro de la imagen y esto es muy común, ya que como te he dicho desde hace varios artículos, HTML solo es la estructura, para darle el diseño necesitamos de CSS

En resumen

HTML es un lenguaje estructurado, es decir, con el podemos generar las estructuras o los componentes estructurales de la página web y al proceso se le denomina maquetación web, en una analogía es más o menos como los huesos de nuestro cuerpo, sin embargo, todo el estilo y diseño que le podemos dar a un sitio lo hacemos con CSS, pero eso, te lo cuento en la siguiente entrega.

Sin más, ¡nos vemos la próxima!