miércoles, 1 de junio de 2011

META INFORMACION

CAPITULO 10

Las páginas y documentos HTML incluyen más información de la que los usuarios ven en sus
pantallas. Estos datos adicionales siempre están relacionados con la propia página, por lo que se
denominan metainformación o metadatos. La metainformación siempre se incluye en la sección
de la cabecera, es decir, dentro de la etiqueta <head>.

Aunque la metainformación más conocida y utilizada es el título de la propia página, se puede
incluir mucha otra información útil para los navegadores y para los buscadores. En las próximas
secciones se explica cómo incluir la metainformación y se introduce un concepto relacionado
llamado DOCTYPE.

10.1. Estructura de la cabecera

Como ya se explicó anteriormente, las páginas XHTML se dividen en dos partes denominadas
cabecera y cuerpo. La sección de la cabecera está formada por todas las etiquetas encerradas por
la etiqueta <head>:

<head> Cabecera
Atributos comunes i18n
Atributos
específicos
▪ profile = "url" - Especifica la URL del perfil o perfiles que utilizan los
metadatos
▪ lang = "codigo_de_idioma" - Especifica el idioma principal de los contenidos
de la página
Tipo de elemento -
Descripción Define la cabecera del documento HTML
La cabecera típica de una página HTML completa presenta la siguiente estructura:
<head>
<!-- Zona de etiquetas META -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Zona de título -->
<title>El título del documento</title>
<!-- Zona de recursos enlazados (CSS, RSS, JavaScript) -->
<link rel="stylesheet" href="#" type="text/css" media="screen" />
<link rel="stylesheet" href="#" type="text/css" media="print" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="#" />
<script src="#" type="text/javascript"></script>
</head>

La etiqueta <title> establece el título de la página. Los navegadores muestran este título como
título de la propia ventana del navegador. Los buscadores utilizan este título como título de sus
resultados de búsqueda.

Por tanto, el valor de <title> no sólo es importante para los usuarios, sino que también es
importante para que los usuarios encuentren las páginas a través de los buscadores. 
Un error común de muchos sitios web consiste en mostrar un mismo título genérico en todas sus páginas.
Cada página debe mostrar un título corto, adecuado, único y que describa inequívocamente los
contenidos de la página.

Las páginas XHTML deben tener definido un título y sólo uno, por lo que todas las páginas web
deben incluir obligatoramente una etiqueta <title>, cuya definición formal se muestra a
continuación:

<title> Título del documento
Atributos comunes i18n
Atributos
específicos
▪ lang = "codigo_de_idioma" - Especifica el idioma principal del título de la
página
Tipo de elemento -
Descripción Define el título del documento HTML
Por último, la etiqueta <head> permite definir en el atributo profile la URL de un documento
externo que contiene el perfil que siguen los metadatos de la cabecera. Los blogs creados con el
programa WordPress incluyen por ejemplo el siguiente perfil en su cabecera:
<head profile="http://gmpg.org/xfn/11">
...
</head>
 
El documento http://gmpg.org/xfn/11 es un perfil que define atributos adicionales para
establecer la relación entre sitios web.

Basic HTML and CSS Tutorial. Howto make website from scratch

 
10.2. Metadatos

Una de las partes más importantes de la metainformación de la página son los metadatos, que
permiten incluir cualquier información relevante sobre la propia página.

La especificación oficial de HTML no define la lista de metadatos que se pueden incluir, por lo
que las páginas tienen libertad absoluta para definir los metadatos que consideren adecuados.
La etiqueta empleada para la definición de los metadatos es <meta>.

<meta> Metadatos
Atributos comunes i18n
Atributos
específicos
▪ name = "texto" - El nombre de la propiedad que se define (no existe una lista
oficial de propiedades)
▪ content = "texto" - El valor de la propiedad definida (no existe una lista de
valores permitidos)
▪ http-equiv = "texto" - En ocasiones, reemplaza al atributo “name” y lo
emplean los servidores para adaptar sus respuestas al documento
▪ scheme = "texto" - Indica el esquema que se debe emplear para interpretar el
valor de la propiedad
Tipo de elemento -
Descripción
Permite definir el valor de los metadatos que forman la metainformación del
documento.

Los metadatos habituales utilizan solamente los atributos name y content para definir el nombre
y el valor del metadato:

<meta name="autor" content="Juan Pérez" />
No obstante, algunas etiquetas <meta> muy utilizadas hacen uso del atributo http-equiv.
 
Este atributo se utiliza para indicar que el valor establecido por este metadato puede ser utilizado
por el servidor al entregar la página al navegador del usuario.
El siguiente metadato indica al servidor que el contenido de la página es código HTML y su codificación de caracteres es UTF-8:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
El atributo scheme no suele utilizarse, aunque permite proporcionar información de contexto
para que el navegador interprete correctamente el valor del metadato. En el siguiente ejemplo,
el atributo scheme indica al navegador que el valor del metadato hace referencia al código ISBN:
<meta scheme="ISBN" name="identificador" content="789-1392349610">
 
Aunque no existe una lista oficial con los metadatos que se pueden definir, algunos de ellos se
utilizan en tantas páginas que se han convertido prácticamente en un estándar. A continuación
se muestran los metadatos más utilizados:

Definir el autor del documento:

<meta name="author" content="Juan Pérez" />
Definir el programa con el que se ha creado el documento:
<meta name="generator" content="WordPress 2.8.4" />
Definir la codificación de caracteres del documento:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

Definir el copyright del documento:
<meta name="copyright" content="librosweb.es" />
Definir el comportamiento de los buscadores:
<meta name="robots" content="index, follow" />
Definir las palabras clave que definen el contenido del documento:
<meta name="keywords" content="diseño, css, hojas de estilos, web, html" />
Definir una breve descripción del sitio:
<meta name="description" content="Artículos sobre diseño web, usabilidad y
accesibilidad" />

La etiqueta que define la codificación de los caracteres (http-equiv="Content-Type") se emplea
prácticamente en todas las páginas y las etiquetas que definen la descripción (description) y
las palabras clave (keywords) también son muy utilizadas.
 
10.3. DOCTYPE

El estándar XHTML deriva de XML, por lo que comparte con el muchas de sus normas y sintaxis.
Uno de los conceptos fundamentales de XML es la utilización del DTD o Document Type
Definition ("Definición del Tipo de Documento").

Un DTD es un documento que recoge el conjunto de normas y restricciones que deben cumplir
los documentos de un determinado tipo. Si por ejemplo se define un DTD para los documentos
relacionados con libros, se puede fijar como norma que cada libro tenga un título y sólo uno, que
tenga uno o más autores, que la información sobre el número de páginas pueda ser opcional, etc.

El conjunto de normas, obligaciones y restricciones que se deben seguir al crear un documento
de un determinado tipo, se recogen en su correspondiente DTD. El estándar XHTML define el
DTD que deben seguir las páginas y documentos XHTML. En este documento se definen las
etiquetas que se pueden utilizar, los atributos de cada etiqueta y el tipo de valores que puede
tener cada atributo.

En realidad, la versión 1.0 del estándar de XHTML define tres DTD diferentes. Para indicar el
DTD utilizado al crear una determinada página, se emplea una etiqueta especial llamada
doctype. La etiqueta doctype es el único elemento que se incluye fuera de la etiqueta <html> de
la página. De hecho, la declaración del doctype es lo primero que se debe incluir en una página
web, antes incluso que la etiqueta <html>.

Como se verá más adelante, para que una página XHTML sea correcta y válida es imprescindible
que incluya el correspondiente doctype que indica el DTD utilizado. A continuación se muestran
los tres DTD que se pueden utilizar al crear páginas XHTML:
XHTML 1.0 Estricto
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Se trata de la variante con las normas más estrictas y las restricciones más severas. Las páginas
web que incluyan este doctype, no pueden utilizar atributos relacionados con el aspecto de los
contenidos, por lo que requiere una separación total de código HTML y estilos CSS.
XHTML 1.0 Transitorio
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Se trata de una variante menos estricta que la anterior, ya que permite el uso de algunos
atributos HTML relacionados con el aspecto de los elementos.
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Esta última variante la utilizan las páginas que están formadas por frames, una práctica
completamente desaconsejada y que hoy en día sólo utilizan los sitios web obsoletos.
Si no tienes claro el DTD que más te conviene, deberías utilizar el XHTML 1.0 transitorio, ya que
es más fácil crear páginas web válidas. Si tienes conocimientos avanzados de XHTML, puedes
utilizar XHTML 1.0 estricto.

Por otra parte, además del DOCTYPE apropiado, también es necesario que las páginas web
indiquen el namespace asociado. Un namespace en un documento XML permite diferenciar las
etiquetas y atributos que pertenecen a cada lenguaje.
Si en un mismo documento se mezclan etiquetas de dos o más lenguajes derivados de XML
(XHTML y SVG por ejemplo) y que tienen el mismo nombre, no se podría determinar a qué
lenguaje pertenece cada etiqueta y por tanto, no se podría interpretar esa etiqueta o ese
atributo. Los namespaces se indican mediante una URL.

El namespace que utilizan todas las páginas XHTML (independientemente de la versión y del
DOCTYPE) es http://www.w3.org/1999/xhtml y se indica de la siguiente manera:
<html xmlns="http://www.w3.org/1999/xhtml">
...
</html>
De esta forma, es habitual que las páginas XHTML comiencen con el siguiente código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">

Aunque el código anterior es mucho más complicado que una simple etiqueta <html>, es
imprescindible para que las páginas XHTML creadas sean correctas y superen
satisfactoriamente el proceso de validación que se muestra en los capítulos siguientes.

Afortunadamente, si utilizas un editor avanzado como Dreamweaver para crear las páginas, todo
el código anterior se incluye de forma automática. Si creas las páginas a mano, sólo tienes que
copiar y pegar ese código en cada nueva página.

No hay comentarios:

Publicar un comentario