Es/Más información acerca del head del documento

From Web Education Community Group
Jump to: navigation, search

Introducción

En el artículo El elemento <head> del HTML de este curso hemos aprendido acerca de las cosas esenciales que se incluyen dentro del encabezado de un documento HTML. En este artículo del Curriculo de estándares web ampliaremos esa información y hablaremos de algunas otras cosas (menos utilizadas) que se pueden agregar a la sección head de un documento HTML. Son menos esenciales, pero siguen siendo muy útiles, no obstante. Al final de este tutorial sabrá cómo recopilar varios documentos HTML en una colección más grande de varias partes, qué es un favicon y cómo se utiliza y de que tratan las fuentes RSS. Antes de continuar, descargue el archivo zip complementario a este artículo para que pueda practicar con los ejemplos.

Relaciones de documentos — recopilar varios documentos HTML en una colección

Una característica del HTML que proviene de los orígenes de la web como repositorio de documentos son las relaciones entre los documentos. Éstas definen cómo se relaciona un documento con otro, por ejemplo, si un documento es el documento anterior o siguiente en una secuencia lógica o si es el índice de toda una serie de documentos.

En cierto sentido, ya ha hecho esto en el artículo El elemento <head> del HTML, cuando aplicó una hoja de estilos a un documento para darle un aspecto diferente mediante el elemento link:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Cría de Perros - Tips sobre alsacianos</title>
  <link rel="stylesheet" type="text/css" media="screen" href="estilos.css">
  <link rel="stylesheet" type="text/css" media="print" href="estilosimpresion.css">
</head>
<body>
</body>
</html>

La relación del documento actual con otros se define de la misma forma, utilizando el elemento link y los atributos rel o rev. El atributo rel (relación) define la relación que tiene el documento enlazado con el documento actual, y el atributo rev (relación inversa) define la relación que el documento actual tiene con el que está siendo enlazado.

No se preocupe mucho acerca del atributo rev — es un poco confuso, pero raras veces necesitará utilizarlo, si acaso lo utiliza.

No existen valores obligatorios para los atributos rel y rev, pero existe una taxonomía soportada por los navegadores y herramientas de indexación que debe tomar en cuenta en la mayoría de circunstancias normales para el atributo rel:


  • home: El documento principal o de inicio de la colección actual
  • index: El índice de la colección actual
  • contents: La lista o tabla de contenidos de la colección actual
  • search: La página de búsqueda de la colección actual
  • glossary: El glosario de la colección actual
  • help: La página de ayuda de la colección actual
  • first: El primer documento de la colección actual
  • previous: El documento anterior al actual en el orden lógico de la colección
  • next: El documento siguiente al actual en el orden lógico de la colección
  • last: El último documento de la colección actual
  • up: El documento en el nivel superior de la jerarquía de la colección actual
  • copyright: La información de derechos de autor (copyright) de la colección actual
  • author: La página de información acerca del autor de la colección actual

La mayoría de los navegadores no hace nada con esta información. Sin embargo, algunos seguirán el enlace y cargarán el documento en segundo plano para que se muestre mucho más rápido al lector. La verdadera excepción es el navegador Opera, que tiene una barra de herramientas de navegación extra que puede activar seleccionando la opción Ver > Barras de herramientas > Barra de navegación en el menú principal. Una vez activada, tendrá disponible las relaciones de enlace definidas en el documento como una barra de herramientas adicional. La Figura 1 muestra el documento del estándar HTML del W3C en Opera:


Captura de pantalla del navegador Opera mostrando la barra de navegación

Figura 1: Opera muestra las relaciones de enlace del documento actual en una barra de herramientas de navegación especial

A pesar de que no se muestran de manera visual, es una buena idea ofrecer una explicación legible acerca de que tratan los documentos enlazados en un atributo title ya que los nombres de los archivos por sí solos no son necesariamente suficientes.

Ahora echemos un vistazo a cómo las relaciones de enlace se pueden utilizar para recopilar varios documentos en una colección. Por ejemplo, la página inicial de un curso en línea que abarca varios documentos podría ser la siguiente (inicio.html)::


<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Ejemplo de relación de enlaces</title>
  <link rel="contents" title="Tabla de contenido" href="tdc.html">
  <link rel="next" title="siguiente: Capítulo uno" href="capitulo1.html">
</head>
<body>
  <h1>Ejemplo de curso</h1>
  <p>Esta será la página de portada de una serie de artículos o curso</p>
  <ul>
    <li><a href="capitulo1.html" rel="next">Comencemos con el Capítulo uno</a></li>
  </ul>
</body>
</html>

El primer capítulo sería el siguiente (capitulo1.html):

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Capítulo uno - Ejemplo de relación de enlaces</title>
  <link rel="contents" title="Tabla de contenido" href="tdc.html">
  <link rel="home" title="Página de inicio" href="inicio.html">
  <link rel="prev" title="anterior: Página de inicio" href="inicio.html">
  <link rel="next" title="siguiente: Capítulo dos" href="capitulo2.html">
</head>
<body>
  <h1>Capítulo uno</h1>
  <p>Esta será la página del capítulo uno de una serie de artículos o curso</p>
  <ul>
    <li><a href="inicio.html" rev="prev">Regresar al inicio</a></li>
    <li><a href="tdc.html" rel="contents">Tabla de contenido</a></li>
    <li><a href="capitulo2.html" rel="next">Ir al Capítulo dos</a></li>
  </ul>
</body>
</html>

El segundo capítulo (capítulo2.html):

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Capítulo dos - Ejemplo de relación de enlaces</title>
  <link rel="contents" title="Tabla de contenido" href="tdc.html">
  <link rel="home" title="Página de inicio" href="inicio.html">
  <link rel="prev" title="anterior: Capítulo uno" href="capitulo1.html">
</head>
<body>
  <h1>Capítulo dos</h1>
  <p>Esta será la página del capítulo dos de una serie de artículos o curso</p>
  <ul>
    <li><a href="capitulo1.html" rev="prev">Regresar al Capítulo uno</a></li>
    <li><a href="tdc.html" rel="contents">Tabla de contenido</a></li>
  </ul>
</body>
</html>

Y finalmente la Tabla de contenido (tdc.html):

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Tabla de contenido - Ejemplo de relación de enlaces</title>
  <link rel="home" title="Página de inicio" href="inicio.html">
</head>
<body>
  <h1>Tabla de contenido</h1>
  <ul>
    <li><a href="capitulo1.html">Capítulo uno - acerca de unos cosas</a></li>
    <li><a href="capitulo2.html">Capítulo dos - acerca de otras cosas</a></li>
  </ul>
  <ul>
    <li><a href="inicio.html" rel="home">Regresar al inicio</a></li>
  </ul>
</body>
</html>

También puede utilizar los atributos rel y rev en los enlaces del documento para decirle a los navegadores y a los dispositivos de tecnología asistiva que estos enlaces corresponden a las relaciones de los enlaces. Adicionalmente, rel y rev se utilizan para otros fines, como los Microformatos, eche un vistazo a este artículo para ver algunos usos del microformato XFN.

Enlazar a versiones alternativas del documento

La opción de vincular a otros documentos que tienen cierta relación con el documento en cuestión también incluye versiones en diferentes idiomas del mismo documento o diferentes formatos. Puede hacer ambas cosas proporcionando un enlace con un valor de atributo rel de alternate, que indica una versión alternativa.


Traducciones

Las traducciones son un excelente candidato para la interconexión de documentos. Por ejemplo, podría ser que la versión en un idioma de un documento sea muy exitosa y a los visitantes que no hablan ese idioma les encantaría tener esa información disponible para ellos. Al enlazar desde el original a la versión en el idioma alternativo podrá facilitar a los lectores de la versión alternativa el comprender y promover el contenido, y posiblemente hará la versión en otro idioma igual de exitosa. El ejemplo siguiente muestra cómo puede definir las versiones en otros idiomas (ejemploidioma.html). Observe la sintaxis — es bastante intuitiva:


<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Ejemplo de diferentes idiomas</title>
  <link rel="contents" title="Tabla de contenido" href="tdc.html">
  <link rel="next" title="siguiente: Capítulo uno" href="capitulo1.html">
  <link rel="alternate" title="El curso en holandés" type="text/html" hreflang="nl" href="../nl/inicio.html">
  <link rel="alternate" title="El curso en alemán" type="text/html" hreflang="de" href="../de/inicio.html">
</head>
<body>
  <h1>Curso de ejemplo</h1>
  <p>Esta sería la página de portada de una serie de artículos o curso</p>
  <ul>
    <li><a href="capitulo1.html" rel="next">Comencemos con el Capítulo uno</a></li>
  </ul>
  <ul>
    <li>Otros idiomas:
      <uL>
        <li><a href="../de/inicio.html" lang="de" hreflang="de">Alemán</a></li>
        <li><a href="../nl/inicio.html" lang="nl" hreflang="nl">Holandés</a></li>
      </ul>
    </li>
  </ul>
</body>
</html>

Como resumen, el atributo hreflang en los enlaces y anclas define el idioma humano del documento enlazado, y el atributo lang define el idioma del texto que se encuentra dentro del elemento que tiene este atributo. Esto es muy importante para la accesibilidad, ya que el software de conversión de texto-a-voz necesita cambiar la pronunciación de un idioma a otro.

Obviamente, los diferentes idiomas han existido desde los inicios de la Internet (y miles de años antes), pero hay otro tipo de página web alternativa que verá mientras hace uso de la Web — las fuentes, conocidas también como feeds por su nombre en inglés (ej. Fuentes RSS). Estas son muy populares, especialmente para los documentos que cambian constantemente, como los sitios de noticias. Analizaremos éstas a continuación.

Fuentes (Feeds)

Una fuente es un documento que contiene información resumida que detalla el nuevo contenido agregado a su sitio en orden cronológico. Los usuarios pueden suscribirse a ella y enterarse de qué ha cambiado en su sitio recientemente sin tener que visitarlo. Esto lo hacen mediante el uso de herramientas como lectores de fuentes, por ejemplo, Google Reader, Netvibes o Bloglines. Algunos navegadores modernos (como Opera y Firefox) y clientes de correo-e (como Mac Mail o Outlook en Windows) también pueden procesar y mostrar fuentes. Puede reconocer que un sitio web ofrece una fuente RSS por el icono que aparece junto a su dirección url, como se muestra en la Figura 2:

Captura de pantalla del navegador Opera mostrando un icono de RSS en la barra de navegación

Figura 2: Opera muestra el icono naranja de RSS al lado de la dirección url de los sitios web que ofrecen una fuente.

Las páginas de fuentes son estructuradas usando HTML o un formato XML como RSS o Atom, y muy difícilmente son generadas manualmente. La mayoría del tiempo los sistemas de publicación personal harán este trabajo por usted y todo lo que necesita hacer para ofrecerle una fuente de su sitio web al mundo es enlazar al documento XML con el elemento meta correcto en el encabezado de su documento. El siguiente es un extracto de mi blog en http://christianheilmann.com/ y apunta a su fuente RSS (ejemplofuente.html):

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <link rel="alternate" type="application/rss+xml" title="Christian Heilmann - Fuente RSS" href="http://christianheilmann.com/feed/">
  <title>Christian Heilmann</title>
</head>
<body>
  <p>Ejemplo de una fuente RSS</p>
</body>
</html>

Suministrar una fuente tiene sentido para sitios web con gran cantidad de contenido que cambia muy frecuentemente (como los blogs o sitios de fotografías) y mediante el uso de una herramienta de lectura de fuentes y la suscripción a diferentes fuentes puede reducir en gran parte su tiempo de navegación e investigación. Si usted no actualiza su sitio web con tanta frecuencia, pero tiene un montón de contenido y desea que la gente tenga un recordatorio visual de su sitio web, entonces es posible que desee considerar el uso de un icono de acceso directo que destaque en las listas de favoritos de las personas. Esto es lo que vamos a tratar en la siguiente sección.

Hacer más divertida la lista de favoritos — usando favicons

Un último tema que trataremos trata acerca de los iconos de acceso directo o favicons. Estas son pequeñas imágenes con un formato de archivo .ico - si coloca una en su servidor web, puede utilizarla para mostrar un pequeño icono junto al nombre de su sitio web en la lista de favoritos de los visitantes, como se muestra en la Figura 3.:

Captura de pantalla de la lista de favoritos con iconos junto a los nombres de los sitios

Figura 3: El icono junto a un sitio favorito facilita el recordar dicho sitio. Puede añadir uno de estos usando un elemento meta shortcut-icon.

Tenga en cuenta que la mayoría de los navegadores admiten formatos distintos a .ico para los favicons, pero debe limitarse a .ico ya que IE no soporta otros formatos de favicon.

El mayor obstáculo para añadir su icono de acceso directo es realmente crearlo en el formato correcto ya que no muchos paquetes de edición gráfica soportan el formato ico. Una opción es utilizar la herramienta en línea gratuita genfavicon. Una vez lo tiene, agregarlo a su documento es tan fácil como agregar otro elemento meta con un atributo rel con valor de “Shortcut Icon”, como se muestra en el siguiente ejemplo (ejemplo-favicon.html):

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Ejemplo de icono de acceso directo</title>
  <link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
  <h1>Ejemplo de icono de acceso directo</h1>
</body>
</html>

Si abre este documento en un navegador, debe mostrar el icono de Opera junto a la dirección url en la barra de dirección. Si lo agrega a sus favoritos, el mismo icono aparecerá al lado del marcador.

Resumen

Esto es todo por este artículo, y para la sección head de un documento HTML. Hay otras cosas que podríamos tratar, pero tienden a ser temas muy avanzados y muchas veces suele no ser una buena idea. Lo que hemos tratado aquí y en el artículo El elemento <head> del HTML, debe brindarle todo lo necesario para continuar.

Preguntas de repaso

  • ¿Por qué tiene sentido definir las relaciones de enlace aún cuando no son desplegadas visualmente?
  • ¿Cómo enlazaría a una página de búsqueda?
  • ¿Qué beneficio le ofrece una fuente (feed) a sus visitantes? ¿Qué valor rel utiliza para enlazar a una?
  • ¿De qué necesita asegurarse cuando enlaza a documentos en otros lenguajes?
  • Si abre los documentos de ejemplo en un editor de texto encontrará otro elemento meta acerca del cual no hemos discutido aquí y que tiene un atributo content-type y algo llamado utf-8. ¿Qué es utf-8?

Nota: Este material fue publicado originalmente como parte del Currículo de estándares web de Opera, disponible como Complementario: Más información sobre el <head> del documento, escrito por Christian Heilmann. Al igual que el original, se publica bajo la licencia Atribución - No comercial - Compartir Igual de Creative Commons 2.5.