MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Estructura Web y Documentación

Traducción en curso

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 areas de nuestra web (tales como el encabezamiento "header", el menú de navegación "navigation menu", 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 para representar esta estructura.

Prerrequisitos:

Conocer principios básicos de HTML, como los vistos en el apartado Getting started with HTML. Formato de texto HTML HTML text fundamentals. Funcionamiento de hyperliks Creating hyperlinks.
Objetivos: Aprender a estructurar tu documento usando atributos semánticos, y como construir la estructura de una web sencilla.

Partes básicas de un documento

Unas webs pueden y deben ser y parecer diferentes de otras, pero todas tienden a contener elementos comunes, a menos que estén destinadas a mostrar un video en pantalla completa, un juego, formen parte de un proyecto artístico concreto o simplemente estén mal estructuradas. Estos componentes son:

header (encabezamiento)
Normalmente formado por una gran franja que cruza la parte superior de la página con un encabezamiento y/o un logo. Esta parte suele permanecer invariable mientras navegamos entre página y página dentro de un sitio web.
navigation bar (barra/menú de navegación)
Son los enlaces a las principales secciones del sitio web; normalmente está formado por un menú con botones, enlaces o pestañas. Al igual que el encabezamiento, este contenido normalmente permanece invariable en las diferentes páginas del sitio — tener un menú inconsistente en nuestra web, inducirá a los usuarios a confusión y frustración. Muchos diseñadores web consideran el menú de navegación como parte del encabezamiento en lugar de un componente individual, pero esto no es necesario.
main content (contenido principal)
Es la parte ancha central de nuestra página y contiene el contenido único de la misma, por ejemplo el video que quieres ver, la narración que estás leyendo, el mapa que quieres consultar, los titulares de las noticias, etc. Esta parte es distinta de una página a otra dentro de nuestro sitio web.
sidebar (menú/barra lateral)
Suele incluir algún tipo de información adicional, enlaces, citas, ads comerciales, 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)
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 colocar información común (al igual que en el encabezamiento) pero normalmente esta información no es tan importante o es secundaria para la propia página. El pie también se suele usar para propósitos SEO, incluyendo 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 visualizado no parece muy atractivo, pero nos puede servir como ejemplo para trabajar el contenido de una página web típica. Podemos encontrar webs con más columnas y más complicadas, pero esta nos servirá para hacernos una idea general sobre el tema. Con el adecuado CSS, 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 videntes de las partes más importantes del contenido, como el menú de navegación y sus correspondientes enlaces, pero ¿que ocurre con los usuarios discapacitados visuales que no pueden distinguir los colores llamativos o las fuentes de mayor tamaño?

Nota: Los daltónicos representan alrededor del 8% de la población mundial. Los invidentes y los discapacitados visuales representan entre el 4-5% de la población mundial (en 2012 había 285 millones de personas como estas en el mundo, mientras que el total de la población estaba  sobre los 7.000 millones).

En nuestro código HTML, podemos crear secciones de contenido basadas en su funcionalidad — usando elementos que representen las diferentes secciones del contenido descritas anteriormente sin ambigüedad, de forma que las tecnologías de ayuda 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 hemos mencionado anteriormente en este curso, hay muchas consecuencias al no utilizar el elemento correcto y la semántica adecuada para aquello que han sido ideados.

Para implementar estas secciones semánticas, HTML dispone de etiqutas adecuadas que podemos usar para representar estas secciones, por ejemplo:

  • header (encabezamiento): <header>.
  • navigation bar (menú de navegación): <nav>.
  • main content (contenido principal): <main>, con varias subsecciones (además de la barra lateral) representadas por 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 mostrado arriba se consigue mediante el siguiente código (disponible en nuestro Github repo). 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>My page title</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">

    <!-- the below three lines are a fix to get HTML5 semantic elements working in old versions of Internet Explorer-->
    <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>

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

    <header>
      <h1>Header</h1>

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

      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Our team</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#">Contact</a></li>
        </ul>

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

        <form>
          <input type="search" name="q" placeholder="Search query">
          <input type="submit" value="Go!">
        </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>Another subsection</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 puede también estar anidado en el apartado principal (main) -->
      <aside>
        <h2>Related</h2>

        <ul>
          <li><a href="#">Oh I do like to be beside the seaside</a></li>
          <li><a href="#">Oh I do like to be beside the sea</a></li>
          <li><a href="#">Although in the North of England</a></li>
          <li><a href="#">It never stops raining</a></li>
          <li><a href="#">Oh well...</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ómese su tiempo para revisar el código y comprenderlo - los comentarios dentro del código también le ayudarán a entenderlo. No le pedimos que haga 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 HTML element reference podemos leer en detalle la lista de estos elementos. Por el momento, estas son las definiciones principales que deberíamos tratar de entender:

  • <main> Contendrá el contenido único de esta página. Utilizaremos <main> solamente una vez para cada página, y lo situaremos inmediatamente interior al 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 mini-mapa, o un conjunto de titulares y resúmenes). Se considera una buena práctica comenzar cada una de estas secciones con un título heading; nótese que podemos subdividir artículos <article>s en distintas secciones <section>s, o también <section>s en distintos artículos <article>s, 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, links relacionados, etc.).
  • <header> Representa un grupo de contenido introductorio. Si este es "hijo" de un elemento <body> entonces se convertirá en el encabezamiento principal del sitio web, pero si es hijo de un elemento <article> o un elemento <section> entonces simplemente será el encabezamiento particular de cada sección (por favor no confundir esto con  títulos y encabezamientos).
  • <footer> Representa el contenido del pie de página.

Elementos No-semánticos

A veces nos encontramos 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 <div> y del elemento <span>. Estos elementos deberán ser utilizados con su correspondiente atributos clase class, para conferirles su etiqueta correspondiente para ser fácilmente referenciados.

<span> Es un elemento no-semántico para ser utilizado en el interior de una línea, lo utilizaremos cuando no se nos ocurra el uso de 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>The King walked drunkenly back to his room at 01:00, the beer doing nothing to aid
him as he staggered through the door <span class="editor-note">[Editor's note: At this point in the
play, the lights should be down low]</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 videntes, 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 nuestro estancia en la tienda online:

<div class="shopping-cart">
  <h2>Shopping cart</h2>
  <ul>
    <li>
      <p><a href=""><strong>Silver earrings</strong></a>: $99.95.</p>
      <img src="../products/3333-0985/" alt="Silver earrings">
    </li>
    <li>
      ...
    </li>
  </ul>
  <p>Total cost: $237.89</p>
</div>

Este no es un elemento lateral <aside>, ya que 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>, pues 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 encabezamiento para indicar a los lectores automáticos donde se encuentra el mismo.

Atención: Los divs son tan prácticos que es fácil que los usemos demasiado. Como no conllevan valor semántico, solo lían el código HTML. Debemos tener cuidado de usarlos solo cuando no hallemos una mejor solución y reducir su uso al mínimo pues de otro modo complicaremos el mantenimiento y actualización de los documentos.

Fin de línea y Cambio de párrafo

Dos elementos que utilizaremos ocasionalmente que debemos conocer son <br> and <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 Nell<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>, el párrafo hubiera sido presentado todo junto en una línea larga (como hemo dicho con anterioridad en este curso, HTML ignora la mayoría del espacio en blanco); con estos en el código, las líneas quedarán:

There once was a girl called Nell
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 simplemente observamos 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 simple, el siguiente paso lógico es intentar trabajar el contenido para todo el sitio web, las páginas que necesitamos, y la forma de disponerlas las conexiones entre ellas para producir la mejor experiencia a los usuarios 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 tendremos varios elementos comunes a muchas (sino a todas) 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, realizaremos un sencillo esquema 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, elabore una lista completa con todo el resto de contenido de su sitio web que no será 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, tratemos 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 a al de ordenar 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 — dibujando una burbuja para cada página de nuestro sitio, y dibujar 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 se encontrará enlazada al resto de páginas; la mayoría de las páginas en 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: Creemos nuestro mapa 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.

Etiquetas y colaboradores del documento

 Colaboradores en esta página: javierpolit, SoftwareRVG, welm
 Última actualización por: javierpolit,