Estructura Web y Documentación

This translation is incomplete. Please help translate this article from English

Además de definir partes individuales de nuestra página (como un párrafo o una imagen), HTML también dispone de elementos de bloque que se pueden utilizar para estructurar las distintas áreas de nuestra web (como el encabezado (header), el menú de navegación (navigation menu) o la parte del contenido principal (main content column). En este artículo veremos cómo planificar una estructura básica de página web y escribiremos el HTML que representa esta estructura.

Prerrequisitos:

Estar familiarizado con los principios básicos de HTML, como los vistos en el apartado Empezar con el HTML. Saber aplicar formato a textos con HTML, que encontrarás en Conocimientos básicos de HTML. Funcionamiento de los hipervínculos, véase Creación de hipervínculos.
Objetivos: Aprender a estructurar tu documento usando atributos semánticos y construir la estructura de una página web sencilla.

Partes básicas de un documento

Las páginas web pueden y deben diferenciarse las unas de las otras, pero todas tienden a contener elementos comunes parecidos, a menos que estén destinadas a mostrar un vídeo o un juego a pantalla completa, o que formen parte de un proyecto artístico concreto o, simplemente, que estén mal estructuradas. Estos elementos comunes son:

header (encabezado):
Normalmente formado por una gran franja que cruza la parte superior de la página con un título de encabezamiento y/o un logo. Esta parte suele permanecer invariable mientras navegamos entre las páginas de un mismo sitio web.
navigation bar (barra/menú de navegación):
Son los enlaces a las secciones principales del sitio web. Normalmente está formada por un menú con botones, enlaces o pestañas. Al igual que el encabezado, este contenido suele permanecer invariable en las diferentes páginas del sitio; tener un menú incoherente en nuestra página web inducirá a los usuarios a la confusión y la frustración. Muchos diseñadores web consideran que el menú de navegación forma parte del encabezado y que no posee un componente individual, aunque no es necesario que sea así; de hecho, algunos argumentan que tener ambos componentes por separado es mejor por motivos de accesibilidad porque los lectores de pantalla pueden leer mejor ambos elementos si están separados.
main content (contenido principal):
Es la parte ancha central de nuestra página y contiene la mayor parte del contenido particular de una página web concreta; por ejemplo, el video que quieres ver, la narración que quieres leer, el mapa que quieres consultar, los titulares de las noticias, etc. Esta es la parte que puede variar mucho de una página a otra de nuestro sitio web.
sidebar (menú/barra lateral):
Suele incluir algún tipo de información adicional, enlaces, citas, publicidad, etc. Normalmente está relacionado con el contenido principal de la página (por ejemplo, en una página de noticias, la barra lateral podría contener la biografía del autor o enlaces a artículos relacionados), pero en otras ocasiones encontraremos elementos recurrentes como un menú de navegación secundario.
footer (pie de página):
Es la parte inferior de la página, que generalmente contiene la letra pequeña, el copyright o la información de contacto. Es el sitio donde se coloca la información común (al igual que en el encabezado), pero esta información no suele ser tan importante o es secundaria con respecto a la página en sí misma. El pie también se suele usar para propósitos SEO, e incluye enlaces de acceso rápido al contenido más popular.

Una página web «típica» podría parecerse a esta:

a simple website structure example featuring a main heading, navigation menu, main content, side bar, and footer.

HTML para dar estructura al contenido

El ejemplo no parece muy atractivo, pero nos puede servir para ilustrar un ejemplo de diseño de una página web típica. Podemos encontrar webs con más columnas, algunas mucho más complejas, pero esta nos servirá para hacernos una idea general sobre el tema. Con el CSS adecuado podremos usar muchos más elementos para decorar las distintas secciones y conseguir que queden como queramos, pero como hemos comentado con anterioridad, necesitaremos respetar ciertas normas semánticas, y utilizar el elemento adecuado para cada tipo de sección.

La parte visual no lo es todo. Utilizamos diferentes fuentes y colores para llamar la atención de los usuarios sin discapacidad visual de las partes más importantes del contenido, como el menú de navegación y sus enlaces correspondientes, pero ¿qué ocurre con los usuarios con discapacidad visual que no pueden distinguir los colores llamativos o el tamaño grande de las fuentes?

Nota: Los daltónicos representan en torno al 4% de la población mundial (aproximadamente 1 de cada 12 hombres y 1 de cada 200 mujeres son daltónicos). Los invidentes y los discapacitados visuales representan entre el 4-5% de la población mundial (en 2012 había 285 millones de personas con alguna de estas características en el mundo, mientras que el total de la población estaba en torno a los 7.000 millones).

En nuestro código HTML podemos crear secciones de contenido basadas en su función: podemos usar elementos que representen sin ambigüedad las diferentes secciones del contenido descritas, de forma que las tecnologías de accesibilidad y los lectores de pantalla puedan reconocer esos elementos y asistir en tareas como «encontrar el menú de navegación», o «encontrar el contenido principal». Como ya hemos mencionado en este curso, son muchas las consecuencias si no se utilizan el elemento correcto y la semántica adecuada para lo que han sido ideados.

HTML dispone de etiquetas adecuadas que podemos usar para establecer estas secciones semánticas, por ejemplo:

  • header (encabezado): <header>.
  • navigation bar (menú de navegación): <nav>.
  • main content (contenido principal): <main>, con varias subsecciones (además de la barra lateral) representadas por los elementos <article>, <section>, y <div>.
  • sidebar (barra lateral): <aside>.
  • footer (pie de página): <footer>.

Aprendizaje activo: El código del ejemplo anterior

El ejemplo de página web que se muestra arriba se consigue a partir del código siguiente (disponible en nuestro repositorio Github). Observemos el ejemplo anterior, y a continuación echemos un vistazo al código de abajo para identificar las secciones que se observan en el ejemplo.


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title>El título de mi página</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="style.css">

    <!-- las tres líneas siguientes son un arreglo para obtener elementos semánticos de HTML5 que funcionan en versiones de Internet Explorer antiguas-->
    <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>

  <body>
    <!-- Aquí empieza el encabezado principal que se mantendrá en todas las páginas de nuestro sitio web -->

    <header>
      <h1>Header</h1>

      <!-- Aunque no es obligatorio, es una práctica común incluir el apartado menú de navegación dentro del encabezado de la página -->

      <nav>
        <ul>
          <li><a href="#">Inicio</a></li>
          <li><a href="#">Nuestro equipo</a></li>
          <li><a href="#">Proyectos</a></li>
          <li><a href="#">Contacto</a></li>
        </ul>

        <!-- Un formulario de búsqueda es una forma no-lineal de hacer búsquedas en un sitio web. -->

        <form>
          <input type="search" name="q" placeholder="Buscar solicitud">
          <input type="submit" value="¡Vamos!">
        </form>
      </nav>
    </header>

    <!-- Aquí empieza el contenido principal de nuestra página -->
    <main>

      <!-- Incluimos un artículo -->
      <article>
        <h2>Article heading</h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>

        <h3>subsection</h3>

        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>

        <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>

        <h3>Otra subsección</h3>

        <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>

        <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
      </article>

      <!-- el contenido lateral también puede estar anidado en el apartado principal (main) -->
      <aside>
        <h2>Relacionado</h2>

        <ul>
          <li><a href="#">Oh, me gusta estar cerca de la costa</a></li>
          <li><a href="#">Oh, me gusta estar cerca del mar</a></li>
          <li><a href="#">Aunque en el Norte de Inglaterra</a></li>
          <li><a href="#">Nunca deja de llover</a></li>
          <li><a href="#">Oh, bueno...</a></li>
        </ul>
      </aside>

    </main>

    <!-- Y aquí está el pie de página principal que utilizaremos en todas las páginas de nuestro sitio web -->

    <footer>
      <p>©Copyright 2050 by nobody. All rights reversed.</p>
    </footer>

  </body>
</html>

Tómate tu tiempo para revisar el código y comprenderlo. Los comentarios en el código también te ayudarán a entenderlo. No te pedimos que hagas mucho más en este artículo, porque la clave para entender el diseño del documento es escribir una estructura HTML conocida y posteriormente desarrollar su apariencia con CSS. Estudiaremos el diseño CSS como parte del tema CSS.

Elementos de diseño HTML en detalle

Es bueno entender el significado global de todos los elementos definitorios de las secciones HTML en detalle; es algo que se trabajará gradualmente a medida que comencemos a tener más experiencia en el desarrollo web. En el enlace referencia a elementos HTML podemos leer la lista de estos elementos en detalle. Por el momento, estas son las definiciones principales que deberíamos tratar de entender:

  • <main> contendrá el contenido particular de esta página. Utilizaremos <main> solamente una vez para cada página y lo situaremos directamente dentro del elemento <body>. Mejor que no lo anidemos con otros elementos.
  • <article> encuadra un bloque de contenido que tiene sentido por sí mismo aparte del resto de la página (por ejemplo una entrada en un blog).
  • <section> es parecido al elemento <article>, pero se usa más para agrupar cada parte de la página que, por su funcionalidad, constituye una sección en sí misma (por ejemplo un minimapa o un conjunto de titulares y resúmenes). Se considera una buena práctica comenzar cada una de estas secciones con un título de encabezamiento (heading); observa que podemos subdividir artículos (<article>) en distintas secciones (<section>), o también secciones en distintos artículos, dependiendo del contexto.
  • <aside> incluye contenido que no está directamente relacionado con el contenido principal, pero que puede aportar información adicional relacionada indirectamente con él (resúmenes, biografías del autor, enlaces relacionados, etc.).
  • <header> representa un grupo de contenido introductorio. Si este es «hijo» de un elemento <body>, se convertirá en el encabezado principal del sitio web, pero si es hijo de un elemento <article> o un elemento <section>, entonces simplemente será el encabezado particular de cada sección (por favor, no lo confundas con títulos y encabezamientos).
  • <footer> representa el contenido del pie de página.

Elementos no-semánticos

A veces hay situaciones en las que no encontramos un elemento semántico adecuado para agrupar ciertos elementos juntos o englobar cierto contenido. Podríamos querer agrupar ciertos elementos para referirnos a ellos como una entidad que comparta cierto CSS o JavaScript. Para casos como estos, HTML dispone del elemento <div> y del elemento <span>. Preferentemente estos elementos deberán utilizarse con sus atributos clase (class), para conferirles algún tipo de etiquetado que permita hacer determinarlos con facilidad.

<span> es un elemento no-semántico que se utiliza en el interior de una línea. Se utiliza cuando no se nos ocurre el uso de ningún otro elemento semántico de texto en el que incluir el contenido, o si no se desea añadir ningún significado específico. Por ejemplo:

<p>El rey volvió ebrio a su habitación sobre la una de la madrugada, y sin duda la cerveza no le ayudaba
cuando cruzó tambaleante la puerta <span class="editor-note">[nota del editor: en este instante de la 
representació, deberían atenuarse las luces]</span>.</p>

En este caso, la nota del editor solo proporciona información extra para el director de la obra; Se supone que estos elementos no incluyen contenido extra importante. Para los usuarios sin discapacidad visual, quizás debamos usar CSS para diferenciar sutilmente estas notas del texto principal.

<div> es un elemento de bloque no-semántico; lo utilizaremos cuando no se nos ocurra el uso de otro elemento semántico mejor, o si no se desea añadir ningún significado concreto. Por ejemplo, supongamos un carrito de la compra que podemos pulsar en cualquier momento durante nuestra estancia en la tienda virtual:

<div class="shopping-cart">
  <h2>Carrito de la compra</h2>
  <ul>
    <li>
      <p><a href=""><strong>Pendientes de plata</strong></a>: $99.95.</p>
      <img src="../products/3333-0985/" alt="Pendientes de plata">
    </li>
    <li>
      ...
    </li>
  </ul>
  <p>Importe total: 237.89 €</p>
</div>

Este no es un elemento lateral (<aside>) porque no está relacionado necesariamente con el contenido principal de la página (en realidad queremos que se pueda ver desde cualquier página). Ni siquiera se puede incluir en una sección (<section>) porque su contenido no forma parte del contenido principal de la página. Por lo tanto, un elemento <div> es el adecuado en este caso. Hemos incluido un encabezado para indicar a los lectores de pantalla donde van a encontrarlo.

Atención: Los elementos div son tan prácticos y simples que su uso es muy común. Como no conllevan valor semántico, enmarañan el código HTML. Debemos tener cuidado de usarlos solo cuando no hallemos una solución mejor y reducir su uso al mínimo, porque de otro modo complicaremos el mantenimiento y actualización de los documentos.

Fin de línea y cambio de párrafo

Dos elementos que debemos conocer y utilizaremos ocasionalmente son <br> y <hr>:

El elemento <br> genera un cambio de línea en un párrafo; es la única manera de representar series de líneas cortas, como una dirección postal o un poema. Por ejemplo:

<p>There once was a girl called O’Dell<br>
Who loved to write HTML<br>
But her structure was bad, her semantics were sad<br>
and her markup didn't read very well.</p>

Sin el elemento <br>, todo el párrafo se habría presentado como una sola línea larga (como ya hemo dicho con anterioridad en este curso, HTML ignora la mayoría del espacio en blanco); con estos elementos en el código, las líneas quedan:

There once was a girl called O'Dell
Who loved to write HTML
But her structure was bad, her semantics were sad
and her markup didn't read very well.

Los elementos <hr> generan una regla horizontal en el documento que denota un cambio en la temática del texto (como un cambio de tema o de escena). Visualmente tiene el aspecto de una línea horizontal. Por ejemplo:

<p>Ron was backed into a corner by the marauding netherbeasts. Scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.</p>
<hr>
<p>Meanwhile, Harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. He read it hasily, and lept to his feet; "better get back to work then", he mused.</p>

Quedará así:

Ron was backed into a corner by the marauding netherbeasts. Scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.


Meanwhile, Harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. He read it hasily and sighed; "better get back to work then", he mused.

Planificación de una página web sencilla

Una vez hemos planificado el contenido de una página web sencilla, el paso lógico siguiente es intentar trabajar el contenido para todo el sitio web, las páginas que necesitamos y la forma de disponer las conexiones entre ellas para producir la mejor experiencia de usuario a los visitantes. Esto se conoce con el nombre de arquitectura web (Information architecture). Una web grande y compleja necesitará mucha planificación, pero para una web sencilla compuesta por unas cuantas páginas, el proceso puede ser sencillo, ¡y divertido!.

  1. Tengamos en cuenta que habrá varios elementos comunes en muchas (si no en todas las) páginas, como el menú de navegación y el contenido del pie de página. Si la web está dedicada a un negocio, por ejemplo, sería una buena idea disponer de la información de contacto en el pie de página en todas las páginas. Anotemos qué información deseamos que aparezca en todas las páginas. the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy
  2. A continuación, esbozaremos un esquema sencillo de cuál podría ser la estructura deseada de la apariencia de cada página (podría ser algo tan sencillo como el dibujo siguiente). Anotemos los bloques principales.A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer
  3. Ahora, elaboramos una lista completa con todo el resto de contenido de nuestro sitio web que no sea común a todas las páginas.A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info
  4. A continuación, trataremos de ordenar todos estos contenidos por grupos, para hacernos una idea de las partes que podrían ir juntas en las diferentes páginas. Este proceso es parecido al de ordenar unos naipes (Card sorting). The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things
  5. Ahora tratemos de esquematizar un mapa de nuestro sitio; dibujamos un globo para cada página de nuestro sitio web y dibujamos líneas que identifiquen el flujo de datos entre las distintas páginas. La página de inicio normalmente estará ubicada en el centro y enlazará con el resto de páginas; la mayoría de las páginas de una web sencilla estarán enlazadas desde el menú de navegación principal, aunque puede haber excepciones. Podríamos incluso querer introducir anotaciones sobre la forma de presentar la información. A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page

Aprendizaje activo: Creación de un mapa del sitio web

Intentemos llevar a cabo el ejercicio anterior para crear nuestra propia página web. ¿Qué contenido le vamos a dar a nuestra web?

Nota: Guarda este esquema para utilizarlo más adelante.

Resumen

Llegados a este punto deberíamos saber cómo estructurar una página/sitio web. En el último artículo de este módulo, estudiaremos cómo depurar el código HTML.