Se encuentra usted aquí

Capítulo 1: Elementos Básicos y Plantilla Global

Guía

En este capítulo enunciaremos las recomendaciones clave para la construcción de la plantilla global del sistema. Al final de este capítulo construiremos un HTML de ejemplo que podrá ser usado en diferentes implementaciones.

Usar XHTML

XHTML es una variante de HTML que utiliza sintaxis XML y es recomendado por el World Wide Web Consortium (W3C), el comité internacional que desarrolla el estándar HTML. Todo lo que ya conoce sobre HTML se aplica para XHTML excepto por algunas cosas especiales que son obligatorias y evitan errores:

  • Las etiquetas y los atributos deben escribirse en minúscula. No use mayúsculas.
  • Todas las etiquetas deben cerrarse. La advertencia es necesaria porque en HTML no era obligatorio cerrar etiquetas como la de párrafos <p>.
  • Las etiquetas vacías deben cerrarse también, esto se logra finalizando la etiqueta con />, por ejemplo, <img src="img.png" alt="img" />. Lo anterior no aplica para aquellas etiquetas que pueden tener contenido y, por motivos de compatibilidad, se recomienda cerrarlas explícitamente, por ejemplo, la etiqueta <script type="text/javascript" src="script.js"></script>.
  • Todos los valores de los atributos deben ir entre comillas.

Por qué usar XHMTL?

  • XHTML es soportado por la mayoría de herramientas de diseño y facilita la detección de errores. Para los desarrolladores de JEE, en Eclipse es posible escoger entre varias opciones. Para los desarrolladores de ASP.Net, cuando se crean nuevas páginas con Visual Studio, estas ya vienen marcadas con XHTML de transición.
  • Al disminuir los errores en el diseño, existe una mayor probabilidad de que la página se vea igual en todos los navegadores, lo que evita muchos dolores de cabeza.

Un documento de XHTML, conforme a lo recomendado en http://www.w3.org/TR/xhtml-media-types/, se ve de la siguiente forma:

<!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">
<head>
 <title>Nombre</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>

</body>
</html>

Declarar Siempre el DOCTYPE

La etiqueta DOCTYPE debe aparecer al inicio del XHTML y especifica las reglas sobre las que se creó el documento, de tal forma que los navegadores puedan mostrarlo en forma correcta. Se recomienda usar XHTML 1.0 Strict que no incluye elementos obsoletos como por ejemplo font.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Otra posibilidad es usar XHTML 1.0 Transitional que admite elementos obsoletos excepto marcos.

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

Una lista de DOCTYPE recomendados se puede encontrar en el sitio del W3C. Es preferible utilizar el DOCTYPE estricto o, en el peor de los casos, el XHTML Transicional.

Definir las Secciones del Documento

La etiqueta <div> se emplea para diferenciar las secciones del documento HTML. A pesar de su aparente simplicidad, el uso de esta etiqueta es clave para aplicar hojas de estilo. El ejemplo a continuación muestra la estructura de un documento definido mediante etiquetas div.

<body>
<div id="encabezado"></div>
<div id="navegacion"></div>
<div id="contenido"></div>
<div id="pie"></div>
</body>

El término divitis se refiere al abuso de esta etiqueta. Se deben evitar más de dos niveles de div porque seguramente se obtiene el mismo efecto con otros elementos estructurales de HTML.

Separar Contenido y Presentación

Las hojas de estilo definen las reglas de presentación que se aplican a uno o, probablemente, todos los documentos HTML del sitio web. Anteriormente, se incluían etiquetas HTML como font y atributos para definir los colores y demás lógica de presentación junto a los datos. Esto llevaba a documentos HTML en los que la apariencia ocultaba el contenido.

Las hojas de estilo se pueden definir en el mismo documento HTML pero la recomendación es mantenerlas en archivos independientes porque aprovecha la capacidad del navegador para almacenarlas localmente y reutilizarlas. El código a continuación muestra una hoja de estilo:

body {
    background:url(img/body-bg.gif) repeat-x #fff;
    font-family: Arial, Helvetica, sans-serif;
}

#encabezado {
    height: 66px;
    width: 950px;
    margin: 0 auto;
}

El elemento body especifica el formato que se debe dar a la etiqueta HTML del mismo nombre, en este caso se especifica la imagen de fondo para la página utilizando la función url, esta función es muy importante porque la ruta especificada es relativa a la ubicación de la hoja de estilo independiente a la ubicación de la página, en otras palabras, siempre las imágenes en las hojas de estilo se deben ubicar utilizando la función url.

El segundo elemento, #encabezado, debido a que inicia con el símbolo #, hace referencia a la etiqueta que tiene el id encabezado. Básicamente lo que hace es definir el tamaño del bloque y centrarlo sobre el elemento que lo contiene, ese es el efecto logrado al definir el margen auto.

El siguiente capítulo estará dedicado a conocer en mayor detalle las posibilidades que brindan las hojas de estilo. Por ahora continuaremos construyendo la plantilla global.

Hojas de Estilo en el Encabezado

Las hojas de estilo pueden incluirse dentro del HTML pero no se considera una buena práctica, lo recomendado es definirlas en archivos separados con extensión .css, dado que los archivos externos se pueden apoyar en el manejo del cache del navegador y así lograr un mejor desempeño al igual que se promueve la unificación de los estilos en el sitio web. La forma de hacer referencia a la hoja de estilos en el documento HTML es incluir la etiqueta link en el elemento head.

<head>
<link href="tema/estilo.css" rel="Stylesheet" type="text/css" />
</head>

La etiqueta link puede declararse en otros lugares del HTML diferentes al head, no obstante, la red de desarrolladores de Yahoo! publica un documento con lineamientos para obtener un mejor desempeño en páginas web y recomienda que las hojas de estilo sean declaradas exclusivamente en el elemento head del HTML. Esto se debe a que los navegadores pueden detener la presentación de la página para evitar corregir los elementos ya mostrados.

Los desarrolladores de Asp.Net no deberían incluir la etiqueta link manualmente sino utilizar la infraestructura para temas de Asp.Net. Todos los archivos css del tema actual son incluidos automáticamente en el encabezado del HTML.

Utilice Codificación UTF-8

La codificación de caracteres indica el conjunto de letras y símbolos utilizado al enviar el contenido de la página, por lo que se trata de un punto muy importante al desarrollar sitios en Español. Al escoger una codificación adecuada, podremos escribir caracteres con acento y la letra eñe sin preocuparnos porque el usuario reciba símbolos extraños. El W3C recomienda usar UTF-8 para la codificación de las páginas. Lo apropiado es asegurarse de conocer la configuración adecuada a la herramienta de desarrollo y declararla en el elemento head.

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>

Puede remplazar el valor charset por el utilizado en su herramienta. Eclipse, al igual que Visual Studio 2008 y 2010 almacenan, por defecto, los archivos utilizando la codificación UTF-8 que es la recomendada.

La Plantilla Global

Ahora contamos con la información suficiente para construir una plantilla aplicando buenas prácticas y que servirá de base para desarrollos posteriores. La plantilla está compuesta por una sección de encabezado con una altura fija y un logo a la izquierda y centrado verticalmente, el logo se agrega utilizando hojas de estilo. La sección de contenido incluye un menú de navegación a la izquierda, finalmente, el pie de página es un texto centrado en el que se podría mostrar información relevante sobre el sistema o datos de contacto. El HTML es el siguiente:

<!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">
<head>
<title>Título</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="tema/estilo.css" rel="Stylesheet" type="text/css" />
</head>
<body>
    <div id="encabezado"></div>
    <div id="navegacion">
        Aquí va el menú
        <ul>
            <li>Opción 1</li>
            <li>Opción 2</li>
        </ul>
    </div>
    <div id="contenido">
        <h1>Este es el título</h1>
        <p>Aquí va el contenido</p>
        <p>La plantilla está compuesta por una sección de encabezado 
con una altura fija y un logo a la izquierda y centrado verticalmente, el 
logo se agrega utilizando hojas de estilo.  La sección de contenido incluye 
un menú de navegación a la izquierda, finalmente, el pie de página es un 
texto centrado en el que se podría mostrar información relevante sobre el 
sistema o datos de contacto.</p>
    </div>
    <div id="pie">
        Este es el pie de página
    </div>
</body>
</html>

Ahora el css, que estará ubicado en la carpeta "tema" con el propósito de ilustrar la importancia de la función url para hacer referencia a las imágenes. Recuerde que la ruta es relativa al archivo css y no al HTML.

body {
    background:url(img/fondo.gif) repeat-x #fff;
    font-family: Arial, Helvetica, sans-serif;
    width: 950px;
    margin: 0 auto;
}

#encabezado {
    height: 66px;
    background: url(img/logo.png) no-repeat left center;
}

#navegacion {
    float: left;
    width: 150px;
}

#contenido {
    float: left;
    width: 800px;
}

#contenido p {
    text-align: justify;
}

h1 {
    text-align: center;
}

#pie {
    text-align: center;
    clear: both;
}

La instrucción float: left logra que el panel de navegación se ubique a la izquierda. Lo mismo se aplica a la sección de contenido con el propósito de evitar que el texto se vea por debajo del panel de navegación, puede experimentar con la plantilla eliminando las instrucciones del panel de contenido y confirmar que el estilo de la presentación cambia.

El texto del contenido se justifica con la instrucción text-align: justify; que aplica a todas las etiquetas p ubicadas en el contenido. Finalmente, la instrucción clear: both; logra que la barra de navegación no se extienda hasta el pie de página.

Para ver la plantilla en funcionamiento puede hacer clic aquí, o descargar los archivos desde la siguiente ubicación y probarlos en su equipo local.

Validar la Página

Si su sitio web se encuentra en un lugar accesible desde internet (no en localhost), es una buena idea validarlo utilizando las herramientas que, en forma gratuita, expone el W3C. Simplemente acceda a http://validator.w3.org/ y, después de escribir la dirección, obtendrá excelente retroalimentación sobre la calidad del HTML. Si es usuario de Firefox o Chrome, podrá utilizar el validador de una forma más sencilla instalando el complemento Web Developer disponible en http://chrispederick.com/work/web-developer/, después de instalado, podrá hacer la misma validación haciendo clic derecho sobre la página → Web Developer → Herramientas → Validar HTML o Mostrar validación de la página. La nueva barra de herramientas que se instala en Firefox podrá ocultarla a través del menú Ver → Barra de Herramientas.

Resulta útil también utilizar la opción Web Developer → Resaltar → Resaltar elementos del bloque para ver con mayor facilidad los límites y ubicación de las secciones dentro de la página. A continuación una imagen de ejemplo aplicada sobre la plantilla:

Bloques de la plantilla resaltados

Resumen

Hemos creado una plantilla básica que puede ser utilizada en diferentes aplicaciones e ilustra un conjunto de buenas prácticas que debemos seguir en la creación de sitios web:

  • Use XHTML.
  • Declare siempre el DOCTYPE, preferiblemente XHTML 1.0 Strict.
  • Defina las secciones del documento utilizando div.
  • Separe contenido y presentación con hojas de estilo.
  • Ubique las hojas de estilo en el elemento head.
  • Declare la codificación de caracteres, preferiblemente UTF-8.
  • Valide la página con las utilidades del W3C.

En el siguiente capítulo profundizaremos en las hojas de estilo y las posibilidades que nos brindan para dar una mejor presentación al sitio web. Sus comentarios son bienvenidos con el propósito de ayudarnos a mejorar esta guía.

Comentarios

Imagen de ricardoalcala

Felicito a jalcala por este excelente tutorial, empezaré a utilizar el validador para mis páginas web.

IT Agil S.A.S. © 2011 | Bogotá D.C., Colombia