Estándares y la Puesta en Marcha

Estándares y la Puesta en Marcha
 
-A +A

Una de las características más importantes del estándar HTML es que permite la creación de documentos que tienen una estructura definida, en la cual se puede ordenar por importancia, el contenido que se incluya.

Por eso es relevante que en esta sección sobre estándares, se incluya una referencia hacia esta característica, debido a que al desarrollar el Sitio Web utilizando estándares esta forma de ordenamiento del contenido ocupa un lugar privilegiado. Adicionalmente, esta característica estructural es la que permitirá que el Sitio Web pueda cumplir una de las metas que tienen las normas señaladas en esta sección, cual es la de permitir que los Sitios Web del Gobierno de Chile sean accesibles por personas con discapacidades físicas.

De lo anterior se concluye que al realizar la Puesta en Marcha del desarrollo de un proyecto web, sus páginas deberán estar conformadas de la manera que se indica a continuación.

Estructura de los documentos web

El estándar HTML determina que los contenidos deben ser ubicados mediante el uso de etiquetas (del inglés "tag") que especifica la característica del mismo y que se identifican porque usan los corchetes angulados "<" y ">" para designarlas.

Icono con el s�mbolo de informaci�n adicionalTag o Etiqueta: es la marca que permite dar estructura a un documento HTML. Su forma de uso es estricta y es normada por el World Wide Web Consortium.

Dichas etiquetas van desde las que permiten darle forma a todo el documento, hasta aquellas que sirven para explicar el comportamiento o características de una parte del mismo, como un título, un enlace o una imagen. Lo importante, es que cualquier elemento dentro de la página, debe ser incorporado mediante una etiqueta y que ésta debe cumplir las formalidades que indica el estándar para ella.

En términos generales, los documentos web están compuestos de tres partes y dentro de éstas, hay un orden que ayuda a su comprensión y uso. Estas partes son:

A continuación se explican las características de cada una de ellas.

Declaración del tipo de estándar a usar

Corresponde a las primeras líneas que debe tener toda página web y en ella se indica el tipo de documento de que se trata y con ello, el estándar que regirá su contenido. Normalmente la declaración es similar a la siguiente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es">

Como se puede observar del texto, los elementos que son relevantes son los siguientes:

  • Tipo de documento: con la expresión "doctype" se indica cuál es el estándar a utilizar, el cual aparece por escrito. En el caso del ejemplo anterior, es XHTML, versión 1, en su modo de transición (el otro se denomina estricto).
  • Referencia del documento: siempre se indica un enlace a un documento con la extensión ¨dtd¨, que es el documento oficial del W3C donde se establece el estándar y sus características.
  • Etiqueta <html>: es la que da inicio a las etiquetas del Sitio Web y que será finalizada al término del documento con la etiqueta </html>; en el caso de este ejemplo, cuenta con dos modificadores que son xmlns para detallar cuál es el conjunto de atributos del estándar (cuya ubicación se indica con una dirección web) y lang, para señalar el lenguaje en que estará el contenido.

Encabezado de la Página

Una vez que se ha declarado el estándar como se indicó antes, las siguientes líneas de código de la página web están reservadas para crear el encabezado, que se despliega entre las etiquetas <head> y </head>.

Dentro de ellas se ubican los elementos mediante los cuales se describe el contenido de la página web, por lo cual a estos elementos de les llama "meta datos" (datos acerca de los datos).

Los hay de cuatro tipos, de acuerdo a la siguiente descripción:

    • Título: es la etiqueta <title> que permite designar el título que llevará en el encabezado de la ventana el Sitio Web; se recomienda que lleve el nombre del Sitio Web más un título que describa el contenido de la página. Por ejemplo: "Ministerio del Interior - Chile: Acerca del Ministro". De esta manera, esta información será la que aparezca en las páginas de resultados de los buscadores cuando se muestre el enlace al usuario que busca alguna palabra o frase que tenga dicha página.
    • Metadadato: es información acerca de la información y se define mediante la etiqueta <meta>. Para hacerlo se pueden emplear las descripciones del W3C o bien las del proyecto Dublin Core, las cuales permiten generar información descriptiva acerca de contenidos, autores, copyright y otras descripciones acerca de los contenidos del Sitio Web. Los más usados son:

<meta name="title" content="Nombre del Sitio Web o Institución">
<meta name="description" content="Descripción del Sitio Web o Institución
o bien del contenido de la página">
<meta name="keywords" content="Palabras claves del Sitio Web o Institución
o bien del contenido de la página">

    • Enlaces externos: permite informar al documento acerca de otros archivos que se deben ejecutar al mismo tiempo; el mejor ejemplo es el llamado a una hoja de estilo para ejecutar la presentación gráfica de la página:

<link href="styles/main.css" rel="stylesheet" type="text/css" />

    • Scripts: permiten hacer llamados a lenguajes de programación, como Javascript, para desarrollar acciones y crear funcionalidades en la página web que se está visitando. Por ejemplo:

<script type="text/javascript" src="scripts/uifunctions.js">

Cuerpo de la Página

Cuando ya se ha ingresado la información correspondiente al encabezado, se accede a la zona de contenido propiamente tal la que se despliega entre las etiquetas <body> y </body>. En el caso de sitios realizados mediante marcos o "frames" esta etiqueta va situada dentro de esta última.

Dentro de ellas se ubican todos los elementos que pueden identificarse como los contenidos de la página web, vale decir, textos, imágenes, funcionalidades. No obstante, para que su despliegue sea adecuado, es importante considerar la estructura de la página, la cual se explica a través de las siguientes etiquetas:

Utilización de la etiqueta <h>: es la etiqueta utilizada para marcar los títulos que habrá en el contenido, comenzando por el principal que recibe la etiqueta <h1>. Cabe recordar que gracias al uso de la tecnología CSS de Hojas de Estilo, será a través de ésta que se dará el formato adecuado a dicho título para que se distinga en la página. Las etiquetas <h> van desde 1 a 6, por lo que permiten indicar hasta seis niveles de importancia de los titulares utilizados en el documento. Su uso es muy relevante en términos de accesibilidad, ya que los programas de software lectores de pantalla ñque leen el contenido para que sea escuchado por usuarios ciegos- siempre buscarán esta jerarquía de los contenidos para determinar la sección por la que debe comenzar la lectura de la página.

Utilización de la etiqueta <p>: es la etiqueta utilizada para marcar los párrafos en los que se divide el contenido; utilizando la tecnología CSS de Hojas de Estilo, es posible agregarle el formato adecuado como tamaño de letra, espaciado, interlineado, sangría, justificación, color y tipografía utilizada.

Utilización de la etiqueta <div> y <span>: son las etiquetas utilizadas para definir el comportamiento en términos de presentación que tendrá el contenido. Con <div> se define lo que ocurre con bloques de información, mientras que con <span> es posible hacer esa misma definición pero para líneas de contenidos. Ambas etiquetas utilizan las definiciones existentes en las Hojas de Estilo y permiten aplicarlas a los contenidos.

Basándonos en un ejemplo de W3C, se puede ver el siguiente código en que se aprecia la aplicación de estas etiquetas:

<div class="seccion" id="sitio-web">
<h1>Sitio Web</h1>
<p>En esta sección se da a conocer la forma de trabajar en un Sitio Web.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque neque.
Fusce a ante. Duis feugiat magna ac ipsum. Aenean orci orci, mollis a, posuere
et, dignissim eu, orci. Sed vulputate eros a orci. Nullam vel nulla in diam
suscipit tempus. Phasellus nisi dui, cursus eget, vulputate nec, sagittis quis,
justo.</p>
<p>Suspendisse dignissim, quam ac consequat aliquet, magna libero mattis urna,
sit amet ultricies augue tortor vel velit. Mauris tempus sodales purus.
Sed sit amet metus.</p>
<div class="subseccion" id="pagina-web">
<h2>Las Páginas Web</H2>
<p>Las páginas web <span class="cursiva-bold">son parte de los sitios</span> y se
denominan así porque...</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque neque.
Fusce a ante. Duis feugiat magna ac ipsum. Aenean orci orci, mollis a, posuere
et, dignissim eu, orci. Sed vulputate eros a orci. Nullam vel nulla in diam
suscipit tempus. Phasellus nisi dui, cursus eget, vulputate nec, sagittis quis,
justo.</p>
<p>Suspendisse dignissim, quam ac consequat aliquet, magna libero mattis urna,
sit amet ultricies augue tortor vel velit. Mauris tempus sodales purus.
Sed sit amet metus.</p>
</div>
</div>

Si al documento anterior se le agrega la siguiente hoja de estilos (que en este caso se define en el propio documento):

<head>
<title>Guía de Comunicación Digital: Acerca de los Sitios Web y las Páginas <style type="text/css">
div.seccion { text-align: justify; font-size: 12pt}
div.subseccion { text-indent: 2em }
h1 { font-style: italic; color: green }
h2 { color: green }
</style>
</head>

Se puede ver que la sección identificada por el id="sitio-web" va a aparecer alineada en forma justificada y con su texto en 12 puntos de altura; adicionalmente su título marcado por <h1> se verá en letras cursivas de color verde.

Mientras que la sección identificada por el id="pagina-web" va a heredar las características de la anterior porque es un bloque que esté inserto en éste pero tendrá una columna más angosta por la indentación que se indica-, mientras que su titular marcado con <h2>- será de color verde pero en estilo normal (ver Figura 2).

 

Imagen que el c�digo HTML que se explica en esta p�gina.

[D] Figura 2. La imagen muestra una pantalla con el resultado que muestra un browser al utilizar el código HTML que se explica en esta página.

Otro uso muy interesante de la etiqueta <div> es la de expresar posiciones de los bloques de contenido en el Sitio Web, gracias a lo cual se puede diagramar la información de una manera adecuada a la plataforma en que se está trabajando.