Nota de modificación

En diciembre 2013 he modificado profundamente la estructura de este sitio. Previamente la parte superior de la página de inicio del sitio tenía el siguiente aspecto:

Estructura anterior
Estructura web anteriorImagen no disponible
Captura en un ordenador de sobremesa con una ventana de 820×780 px (ver original)

Estos temas sobre la estructura de una página web se aplicaban a una estructura con laterales como la mostrada. Posteriormente y aplicando consultas de medios remodelé la estructura para que los laterales se adaptaran mejor a dispositivos de menor ancho. Pero ahora el sitio no contempla laterales de ningún tipo así como otros elementos de la estructura anterior que he eliminado o modificado.

Puede ver una versión de la estructura anterior de la página de inicio de este sitio de noviembre 2013, previa a las modificaciones realizadas. El documento y sus recursos CSS y JS están en la misma carpeta y sin minimizar, conteniendo todos los comentarios originales, por lo que podrá consultarlos. Pero tenga en cuenta que son los recursos que habían a finales de noviembre 2013 y que puede que no funcionen adecuadamente en nuevas versiones de navegadores.

Nota previa a estos contenidos

Adquirir todos los conocimientos acerca de la maquetación web, que de esto van los presentes temas, es una labor no exenta de cierta complejidad. Son muchas las ramas que hay que dominar, desde los conocimientos de HTML y CSS hasta los estándares de accesibilidad por ejemplo, pasando por otras materias como diseño gráfico, tipografía, diseño creativo, etc. Estos temas no pretenden ser un tutorial que cubra todos los aspectos posibles, tan sólo exponer que técnicas HTML y CSS he usado para poner en marcha la estructura de las páginas de este sitio.

Por lo tanto y con toda seguridad habrán exposiciones sobre algunos puntos que requerirán de una mejora, modificación o adaptación a otros contenidos. A título de ejemplo se señalan la adecuación a los estándares de accesibilidad y la integración con otros medios que no sean el monitor (terminales de mano, salida impresa, medios auditivos, etc.).

El esquema de estructura de una página web

La estructura de una página web es el esquema de composición (o maquetación) de la información que aparece en una página. No debe confundirse con la estructura de una web que es un término más amplio y que hace referencia a como se organiza la información en todo el sitio web. Se trata en definitiva de realizar un esquema para situar el título, los enlaces que llevan a otras páginas, el contenido, etc. Este esquema vendrá a ser una plantilla que seguiremos para construir el resto de páginas. Con ello logramos una apariencia unificada para todo el sitio al tiempo que servirá para el propósito de aplicar estilo CSS con más comodidad.

En nuestro glosario XHTML y CSS expusimos unos principios básicos sobre separación entre estilo y estructura de un documento XHTML. Es un aspecto importante pues en lo que sigue se tratará de organizar elementos HTML de una página para luego aplicarles estilo CSS.

Al diseñar la estructura podemos partir de una división en zonas de una página como la siguiente:

CABEZA
BOTONERA
MIGAS


LATERAL
IZQUIERDO

   CONTENIDO   

LATERAL
DERECHO

PIE
  • Cabeza: Se trata de una barra horizontal donde pondremos el logotipo y nombre el sitio, principalmente.
  • Botonera: Otra barra que contiene enlaces a otras páginas.
  • Migas: Este nombre hace referencia a una cadena de enlaces que indicará al usuario donde se encuentra, de tal forma que a medida que navega se añade un nuevo enlace a la cadena. Son como las "migas de pan" del famoso cuento de Hansel y Gretel.
  • Lateral izquierdo: Donde suelen también albergarse enlaces, publicidad, noticias, etc.
  • Contenido: Mayor área destinada al verdadero contenido de la página.
  • Lateral derecho: Otra zona para más información.
  • Pie: Donde suelen ponerse los créditos, ayudas, validadores, legislación, etc.

Estas división por zonas se hacía inicialmente usando tablas y también con elementos <frame>. Realmente a cada <frame> se le denomina marco de página, pero por extensión daremos también ese nombre a cada una de las zonas de estructurado de una página. Así podemos definir de una forma particular para estos temas que un marco de página es una zona independiente dentro de la estructura de una página, independencia que se debe contemplar desde el punto de vista de la maquetación, es decir, de cómo se distribuyen espacialmente los distintos contenidos.

Por supuesto que pueden haber páginas sin marcos, donde todo el contenido está en una única zona. La barra de desplazamiento vertical mueve todo al mismo tiempo. Un ejemplo de una página sin marcos puede ser la de la especificación de tablas en HTML 4 de W3C. Todo está contenido en el mismo cuerpo (a excepción de un recuadro vertical en el lateral izquierdo pero que no cambia el concepto de "sin marcos").

Pero la idea general de una página con marcos es mantener el contenido de la página en un marco central y rodearlo con marcos para otros contenidos. Una idea de partida es, como mínimo, mantener siempre visible la cabecera y el lateral izquierdo donde podríamos poner los enlaces (botonera, menú, índice, etc.) al resto del sitio. También puede haber un marco derecho y un pie. En estas zonas suele ponerse otra información como publicidad, avisos, noticias, etc. En nuestro glosario XHTML+CSS recomendábamos no usar tablas ni <frame> para implantar los marcos de página. Este elemento <frame> no es de uso estándar en todos los navegadores. Además puede resultarle difícil a los buscadores encontrar la información que desea cuando hay varios marcos de página. En cuanto a la maquetación con tablas, puede parecer que se obtiene un resultado más "robusto", pero es menos flexible a la hora de modificar la estructura o de dotarla de estilo CSS. Se pueden hacer marcos con el elemento <object> tal como puede ver en este ejemplo de <object> para marcos de página de nuestro glosario XHTML y CSS. Pero la forma que recomiendo es usar marcos con CSS, donde en dicho glosario también tenemos un ejemplo de la propiedad {position} para marcos de página. Se observa que para la cabecera usamos elementos fijados, lo cual se consigue con {position:fixed; width:auto; height:3em; top:0; left:0; ...} para fijar la cabecera en la posición (0,0) en arriba e izquierda y además se especifica una altura determinada, pues en otro caso se alargará cubriendo los marcos inferiores. Realmente se trata de elementos absolutamente posicionados con posicionamiento fijo (lo que podemos abreviar como fijados o posicionados fijos). Puede ver más detalles sobre qué son los elementos posicionados de nuestro glosario XHTML+CSS.

Algunas desventajas que podemos relacionar con este ejemplo de página con marcos CSS fijados:

  • Los marcos que no se mueven deben tener una posición fija, es decir, se deben fijar sus posiciones. Esto conlleva que deben tener unas dimensiones limitadas y posiciones ancladas que pueden resultar muy difícil de modificar si fuera necesario.
  • El marco superior del título tiene posición fija y permanece constantemente en pantalla restando espacio al contenido central. Si el contenido central es el verdadero objetivo del usuario, es posible que no le interese estar viendo constantemente el título y los demás elementos de ese marco. Si en un momento posterior queremos modificar la altura de ese marco, tendremos que modificar también otras propiedades CSS en los otros marcos para que se ajusten. Puede evitarse esto si lo dotamos de una barra de desplazamiento vertical (o scroll) lo que puede hacerse fácilmente con CSS. Pero personalmente lo considero inadecuado, pues estéticamente desentonaría el conjunto del título si hubiera que acceder a mostrarlo completamente con el uso del scroll vertical.
  • El marco lateral también permanece fijo, por lo que en él no podremos poner más información que la que cabe en la altura de una pantalla. Pero ¿y qué pantalla?. Podemos también ponerle un scroll vertical. Pero ¿vería bien ese ejemplo con tres scroll, uno en cada marco?. Probablemente el usuario sólo utilizaría el scroll central si piensa que los otros no le van a aportar nada interesante.
  • Si además hubieran marcos en el lateral derecho y al pie de página que permanecieran fijos, las desventajas anteriores se incrementarían sustancialmente.

Una página con marcos no ha de tener necesariamente una cabecera y/o laterales que permanezcan siempre visibles como los de ese ejemplo. Así surge el concepto que podríamos denominar página con marcos CSS no fijados, en el sentido de que ningún marco queda fijo cuando nos desplazamos por la página (realmente no usamos {position: fixed} para posicionarlos de forma fija). Un ejemplo de página con marcos no posicionados es la principal de W3C (al menos la publicada en la fecha de finales de junio 2010). Aquí se diferencian los laterales, donde suele ponerse los menús, noticias, publicidad, etc. y el contenido en el interior.

Además de saber si vamos a fijar o no fijar los marcos, es decir, si vamos a posicionar de forma fija o no algunos de ellos, también deberíamos decidir inicialmente que tipo de dimensionamiento de página vamos a utilizar. La importancia de esto radica en como los distintos marcos se ajustan a diferentes tipos de monitores y también al redimensionamiento de la ventana que puede hacer el usuario con su navegador. Son posibles tres opciones más utilizadas: fijo cuando usamos dimensiones absolutas y líquido o elástico para las dimensiones relativas. Usaremos el término fijo (a veces también denominado estático) para este dimensionamiento, pero entendiendo que es distinto del otro término usado en los marcos CSS fijos o fijados, que van en el sentido de fijar la posición de algunos marcos. Suelen usarse los términos página fija, página líquida o página elástica para referirnos de forma abreviada a esto.

En resumen, las posibilidades para tomar una decisión y continuar con el diseño de la estructura de página son:

MarcosDimensionamiento de página
Fija (o estática)LíquidaElástica
Sin marcosN.A.N.A.N.A.
Con marcos CSSFijadosXXX
No fijadosXXX

Aquí "N.A." significa "no aplica", pues no tiene sentido hablar de dimensionamientos en una página sin marcos, pues estos afectan a como se redimensionan los marcos cuando se cambia el tamaño de la ventana. En los otros casos caben todas las posibilidades. Los dimensionamientos de página, por su extensión, lo exponemos en el siguiente tema. Finalizaremos el tema actual presentando un esquema general de los elementos y como montar los archivos de estilo CSS.

El esquema HTML de una página web

Independientemente de sí usamos marcos CSS fijados o no, dimensionamiento fijo, líquido o elástico, la estructura de partida es crear bloques con elementos <div> para cada una de las zonas:

PARA LA CABECERA:    
<div id="cabeza">...</div>
PARA LA BOTONERA:     
<div id="botonera">...</div>
PARA LAS "MIGAS":     
<div id="migas">...</div>    
PARA EL LATERAL IZQUIERDO:     
<div id="lateral-izdo">...</div>
PARA EL LATERAL DERECHO:     
<div id="lateral-dcho">...</div>
PARA EL CONTENIDO: 
<div id="contenido">...</div>
PARA EL PIE: 
<div id="pie">...</div>
    

Cada elemento <div> se identifica con un id adecuado. Así luego podemos dotarlo de estilo. Aunque podríamos darle un nombre de clase con class, es preferible el identificador para automatizar con script el contenido de alguna zona si hiciera falta.

Cuando vayamos avanzando en estos temas nos daremos cuenta que será necesario incluir todo lo anterior en un marco total que lo englobe todo. Por ahora sólo lo presentamos y en el tema siguiente veremos porqué es necesario:

PARA EL TOTAL DE LA PÁGINA:    
<div id="total">
    ... Todo el contenido ...
</div>
    

Archivos de estilos CSS para la estructura de una página web

En diciembre 2013 y enero 2014 he modificado profundamente la estructura de este sitio. Además también he hecho algunos cambios para mejorar los tiempos de respuesta. Ahora sólo existe un único archivo CSS base.css que contiene todo el estilo del sitio. Usando una técnica que denomino Css Fold aplicó con PHP sólo los componentes CSS necesarios para cada página.

El estilo para cada marco de página se aplica mediante archivos de estilo CSS. Diferenciamos los siguientes archivos:

  • Un archivo "cabeza-pie.css" para dar estilo a la cabecera, la botonera, las migas y el pie de página.
  • Un archivo "interior.css" para dar estilo a los marcos laterales y al marco del contenido de cada página.
  • Un archivo "formatos.css" donde damos estilo a diversos formatos de presentación de texto, bordes de tabla, etc. para usar en todas las páginas del sitio.

Estos archivos son los genéricos para todas las páginas del sitio y se pueden ubicar en el directorio raíz. La razón de la separación es porque si en algunas páginas no necesitamos incluir laterales, entonces no será necesario vincular el archivo "interior.css". Así pondríamos directamente todo el contenido de la página dentro del elemento <body> y antes del pie de página en la forma que mejor nos convenga.

El estilo del archivo "formatos.css" es independiente de cualquier estructura y dota de estilos de presentación diversos como el texto para código, colores de texto, bordes de tabla, etc. En principio podría pensarse en incluir este estilo en "cabeza-pie.css," pues éste se vincula en todas las páginas, pero podríamos tener una página con que no necesite la cabecera-pie y aún así usar los formatos genéricos.

Si tenemos subpáginas en subcarpetas, podríamos necesitar estilos específicos para éstas aparte de las genéricas. En ese caso pondríamos otro archivo de estilo en esa subcarpeta con las particularidades que ahí se necesitaran. En resumen, conviene separar los estilos en archivos de tal forma que se agrupen según su finalidad, lo que facilitará la labor de modificaciones y arreglos posteriores. Además no tenemos que cargar inútilmente declaraciones de estilo que no van a usarse en una determinada página. Por ejemplo, en la página inicial de este sitio hay un calendario a la derecha. El estilo de este elemento lo incorporamos en el archivo "index-estilo.css" que sólo sirve para la página de inicio "index.html", pues no será necesario este estilo en ningún otro sitio.