ESQUEMATIZAR UNA PAGINA WEB

Jos Arturo de la Rosa Vidal

Tener un Mayor orden de distribucin de las Pginas Web

CMO SE HACE la estructura de una pgina web

I. II. III. IV. V. El esquema de la estructura Pginas fijas, lquidas o elsticas Cabecera y pie Botonera y "migas" Laterales y contenido

I) El esquema de la estructura
1. 2. 3. 4. Nota previa a estos contenidos El esquema de estructura de una pgina web El esquema HTML de una pgina web Archivos de estilos CSS para la estructura de una pgina web

Nota previa a estos contenidos

Adquirir todos los conocimientos acerca de la maquetacin 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 estndares de accesibilidad por ejemplo, pasando por otras materias como diseo grfico, tipografa, diseo creativo, etc. Estos temas no pretenden ser un tutorial que cubra todos los aspectos posibles, tan slo exponer que tcnicas HTML y CSS he usado para poner en marcha la estructura de las pginas de este sitio. Por lo tanto y con toda seguridad habrn exposiciones sobre algunos puntos que requerirn de una mejora, modificacin o adaptacin a otros contenidos. A ttulo de ejemplo se sealan la adecuacin a los estndares de accesibilidad y la integracin con otros medios que no sean el monitor (terminales de mano, salida impresa, medios auditivos, etc.).

El esquema de estructura de una pgina web

La estructura de una pgina web es el esquema de composicin (o maquetacin) de la informacin que aparece en una pgina. No debe confundirse con la estructura de una web que es un trmino ms amplio y que hace referencia a como se organiza la informacin en todo el sitio web. Se trata en definitiva de realizar un esquema para situar el ttulo, los enlaces que llevan a otras pginas, el contenido,

etc. Este esquema vendr a ser una plantilla que seguiremos para construir el resto de pginas. Con ello logramos una apariencia unificada para todo el sitio al tiempo que servir para el propsito de aplicar estilo CSS con ms comodidad. En nuestro glosario XHTML y CSS expusimos unos principios bsicos sobre separacin 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 pgina para luego aplicarles estilo CSS. Al disear la estructura podemos partir de una divisin en zonas de una pgina como la siguiente: CABEZA BOTONERA MIGAS

LATERAL IZQUIERDO PIE

CONTENIDO

LATERAL DERECHO

Cabeza: Se trata de una barra horizontal donde pondremos el logotipo y nombre el sitio, principalmente. Botonera: Otra barra que contiene enlaces a otras pginas. 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 aade un nuevo enlace a la cadena. Son como las "migas de pan" del famoso cuento de Hansel y Gretel. Lateral izquierdo: Donde suelen tambin albergarse enlaces, publicidad, noticias, etc. Contenido: Mayor rea destinada al verdadero contenido de la pgina. Lateral derecho: Otra zona para ms informacin. Pie: Donde suelen ponerse los crditos, ayudas, validadores, legislacin, etc.

Estas divisin por zonas se haca inicialmente usando tablas y tambin con elementos <frame>. Realmente a cada <frame> se le

denomina marco de pgina, pero por extensin daremos tambin ese nombre a cada una de las zonas de estructurado de una pgina. As podemos definir de una forma particular para estos temas que un marco de pgina es una zona independiente dentro de la estructura de una pgina, independencia que se debe contemplar desde el punto de vista de la maquetacin, es decir, de cmo se distribuyen espacialmente los distintos contenidos. Por supuesto que pueden haber pginas 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 pgina sin marcos puede ser la de la especificacin de tablas en HTML 4 de W3C. Todo est contenido en el mismo cuerpo (a excepcin de un recuadro vertical en el lateral izquierdo pero que no cambia el concepto de "sin marcos"). Pero la idea general de una pgina con marcos es mantener el contenido de la pgina en un marco central y rodearlo con marcos para otros contenidos. Una idea de partida es, como mnimo, mantener siempre visible la cabecera y el lateral izquierdo donde podramos poner los enlaces (botonera, men, ndice, etc.) al resto del sitio. Tambin puede haber un marco derecho y un pie. En estas zonas suele ponerse otra informacin como publicidad, avisos, noticias, etc. En nuestro glosario XHTML+CSS recomendbamos no usar tablas ni <frame> para implantar los marcos de pgina. Este elemento <frame> no es de uso estndar en todos los navegadores. Adems puede resultarle difcil a los buscadores encontrar la informacin que desea cuando hay varios marcos de pgina. En cuanto a la maquetacin con tablas, puede parecer que se obtiene un resultado ms "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 pgina de nuestro glosario XHTML y CSS. Pero la forma que recomiendo es usar marcos con CSS, donde en dicho glosario tambin tenemos un ejemplo de la propiedad {position} para marcos de pgina. 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 posicin (0,0) en arriba e izquierda y adems 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 ms detalles sobre qu son los elementos posicionados de nuestro glosario XHTML+CSS. Algunas desventajas que podemos relacionar con este ejemplo de pgina con marcos CSS fijados:

Los marcos que no se mueven deben tener una posicin fija, es decir, se deben fijar sus posiciones. Esto conlleva que deben tener unas dimensiones limitadas y posiciones ancladas que pueden resultar muy difcil de modificar si fuera necesario. El marco superior del ttulo tiene posicin 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 ttulo y los dems elementos de ese marco. Si en un momento posterior queremos modificar la altura de ese marco, tendremos que modificar tambin 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 fcilmente con CSS. Pero personalmente lo considero inadecuado, pues estticamente desentonara el conjunto del ttulo si hubiera que acceder a mostrarlo completamente con el uso del scroll vertical. El marco lateral tambin permanece fijo, por lo que en l no podremos poner ms informacin que la que cabe en la altura de una pantalla. Pero y qu pantalla?. Podemos tambin ponerle un scroll vertical. Pero vera bien ese ejemplo con tres scroll, uno en cada marco?. Probablemente el usuario slo utilizara el scroll central si piensa que los otros no le van a aportar nada interesante. Si adems hubieran marcos en el lateral derecho y al pie de pgina que permanecieran fijos, las desventajas anteriores se incrementaran sustancialmente.

Una pgina 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 podramos denominar pgina con marcos CSS no fijados, en el sentido de que ningn marco queda fijo cuando nos desplazamos por la pgina (realmente no usamos {position: fixed} para posicionarlos de forma fija). Un ejemplo de pgina 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 mens, noticias, publicidad, etc. y el contenido en el interior. Adems 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, tambin deberamos decidir inicialmente que tipo de dimensionamiento de pgina vamos a utilizar. La importancia de esto radica en como los distintos marcos se ajustan a diferentes tipos de monitores y tambin al redimensionamiento de la ventana que puede hacer el usuario con su navegador. Son posibles tres opciones ms utilizadas: fijo cuando usamos dimensiones absolutas y lquido o elstico para las dimensiones relativas. Usaremos el trmino fijo (a veces tambin denominado esttico) para este dimensionamiento, pero entendiendo que es distinto del otro trmino usado en los marcos CSS fijos o fijados, que van en el sentido de fijar la posicin de algunos marcos. Suelen usarse los trminos pgina fija, pgina lquida o pgina elstica para referirnos de forma abreviada a esto. En resumen, las posibilidades para tomar una decisin y continuar con el diseo de la estructura de pgina son: Dimensionamiento de pgina Fija (o esttica) Lquida Elstica N.A. Fijados X N.A. X X N.A. X X

Marcos Sin marcos Con marcos CSS

No fijados X

Aqu "N.A." significa "no aplica", pues no tiene sentido hablar de dimensionamientos en una pgina sin marcos, pues estos afectan a como se redimensionan los marcos cuando se cambia el tamao de la ventana. En los otros casos caben todas las posibilidades. Los dimensionamientos de pgina, por su extensin, 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 pgina web

Independientemente de s usamos marcos CSS fijados o no, dimensionamiento fijo, lquido o elstico, la estructura de partida es crear bloques con elementos <div> para cada una de las zonas:
PARA <div PARA <div PARA <div PARA <div PARA <div PARA <div PARA <div LA CABECERA: id="cabeza">...</div> LA BOTONERA: id="botonera">...</div> LAS "MIGAS": id="migas">...</div> EL LATERAL IZQUIERDO: id="lateral-izdo">...</div> EL LATERAL DERECHO: id="lateral-dcho">...</div> EL CONTENIDO: id="contenido">...</div> EL PIE: id="pie">...</div>

Cada elemento <div> se identifica con un id adecuado. As luego podemos dotarlo de estilo. Aunque podramos 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 slo lo presentamos y en el tema siguiente veremos porqu es necesario:
PARA EL TOTAL DE LA PGINA: <div id="total"> ... Todo el contenido ... </div>

Archivos de estilos CSS para la estructura de una pgina web

El estilo para cada marco de pgina 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 pgina. Un archivo "interior.css" para dar estilo a los marcos laterales y al marco del contenido de cada pgina. Un archivo "formatos.css" donde damos estilo a diversos formatos de presentacin de texto, bordes de tabla, etc. para usar en todas las pginas del sitio.

Estos archivos son los genricos para todas las pginas del sitio y se pueden ubicar en el directorio raz. La razn de la separacin es porque si en algunas pginas no necesitamos incluir laterales, entonces no ser necesario vincular el archivo "interior.css". As pondramos directamente todo el contenido de la pgina dentro del elemento <body> y antes del pie de pgina en la forma que mejor nos convenga. El estilo del archivo "formatos.css" es independiente de cualquier estructura y dota de estilos de presentacin diversos como el texto para cdigo, colores de texto, bordes de tabla, etc. En principio podra pensarse en incluir este estilo en "cabeza-pie.css," pues ste se vincula en todas las pginas, pero podramos tener una pgina con que no necesite la cabecera-pie y an as usar los formatos genricos. Si tenemos subpginas en subcarpetas, podramos necesitar estilos especficos para stas aparte de las genricas. En ese caso pondramos 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 segn su finalidad, lo que facilitar la labor de modificaciones y arreglos posteriores. Adems no tenemos que cargar intilmente declaraciones de estilo que no van a usarse en una determinada pgina. Por ejemplo, en la pgina inicial de este sitio hay un calendario a la derecha. El estilo de este elemento lo incorporamos en el archivo "index-estilo.css" que slo sirve para la pgina de inicio "index.html", pues no ser necesario este estilo en ningn otro sitio.