Síguenos en 
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:
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.
- Versión para impresión
- Inicie sesión o regístrese para comentar
IT Agil S.A.S. © 2011 | Bogotá D.C., Colombia
Comentarios
Felicito a jalcala por este excelente tutorial, empezaré a utilizar el validador para mis páginas web.