DISEÑO DE PAGINA. MAQUETACION WEB

Maquetar una página web

La maquetación es la distribución de los elementos en nuestra página. Piensa en una página web cualquiera. Seguro que distingues algunos elementos claramente diferenciados, como un encabezado, columnas, y un pie de página.

Hace unos años, la maquetación de las páginas web se realizaba utilizando tablas (<table>). Una vez entendido este proceso podía resultar sencillo, aunque si no se dominaban las tablas, podía convertirse en algo tedioso. El problema de las tablas es que generaban un página muy encorsetada, y el código se volvía complejo de entender. Además, algunos buscadores encontraban problemas al analizar la estructura de la página.

Actualmente, la maquetación con tablas ha caído en desuso, y se realiza utilizando capas (<div>), también llamadas divisiones o contenedores. La colocación de las capas en la página se realiza a través de CSS. Esto permite, por ejemplo, que podamos pasar de un diseño con un menú lateral a otro con el menú en la parte superior, sólo cambiando la hoja de estilos.

En esta unidad veremos las técnicas de maquetación más comunes, aunque hay que decir que existen diversas formas de conseguir una misma maquetación.

Como hemos dicho, emplearemos sobre todo etiquetas del tipo (<div>). Para crear un div alrededor de contenido ya existente desde Dreamweaver, seleccionamos la parte de la página y en el menú Insertar, opción Div. Esta misma opción también se encuentra en el menú Insertar, opción Estructura y ahí, otra vez, opción Div.

También veremos que Dreamweaver nos ofrece una serie de plantillas de maquetación, de las que podremos partir, adaptándolas a nuestras necesidades.

18.2. Tamaño

Por lo general, la maquetación se realiza sobre elementos en bloque. Normalmente divisiones, pero también lo podemos hacer con párrafos, listas, o con el propio body. Por defecto los elementos de bloque ocupan todo el ancho del elemento que lo contiene, y su alto se ajusta al contenido.

Cualquier elemento HTML de bloque, tiene dos atributos que pueden definir su tamaño: ancho (width) y alto (height).

Los valores para estas medidas, pueden ser expresados en las medidas habituales:

• Tamaños absolutos, utilizando px, cm, etc...
• Tamaños relativos al elemento que lo contiene, utilizando porcentajes (%).
• Tamaños relativos a la fuente, utilizando em.
• El valor auto es el valor por defecto. Por ejemplo, un párrafo, por defecto, tienen un ancho del 100% y un alto ajustado al contenido.

En algunos elementos, como los Divs PA, nos permiten cambiar su tamaño desde el Inspector de propiedades. Pero en la mayoría, tendremos que hacerlo desde el código o desde las propiedades CSS de Cuadro y Posicionamiento.

Por ejemplo, hemos definido el tamaño para el siguiente párrafo:

<p style="width:200px; height:100px; border: red 2px solid">

Por defecto, al no ocupar todo el ancho, el elemento queda alineado a la izquierda, como en el ejemplo anterior. Una forma sencilla de centrarlo es dándole al margen (margin) derecho e izquierdo el valor auto. Recuerda que las propiedades de margen se encuentran también con las propiedades de Cuadro.

<p style="width:200px; height:100px; border: red 2px solid; margin: auto;">

Nota: En la vista de Diseño de Dreamweaver, esta propiedad no se muestra correctamente.

Con sólo esto, podríamos maquetar una página web que contenga una columna central, con un ancho fijo o relativo, centrada en la ventana del navegador.

Para hacerlo, encerramos todo el contenido del body en una capa, a la que le asignamos, como mínimo, estas reglas CSS:

#container {
 width: 960px;
 margin: 0 auto; 
}

Puedes ver un ejemplo de una página muy simple maquetada de esta forma aquí.

Desbordamiento

Al utilizar un elemento de bloque, como una capa, un párrafo, el body, etc... el tamaño depende del contenido. Pero al definir un tamaño fijo nos puede surgir un problema: ¿qué pasa si el contenido del elemento (texto, imágenes, etc...) no cabe? Entonces se produce un desbordamiento, que podemos controlar desde el estilo con la propiedad overflow. Podemos darle estos valores:

• visible. Es la opción por omisión. El contenido sale de elemento, y puede que se solape con los elementos que haya a continuación.
• hidden. Lo que no quepa en el elemento, queda oculto.
• auto. Muestra las barras de desplazamiento en el elemento cuando sea necesario.
• scroll. Siempre muestra las barras de desplazamiento.

visible. El texto en esta capa no cabe al tener un tamaño fijo, por lo que desborda.

hidden. El texto en esta capa no cabe al tener un tamaño fijo, por lo que desborda.

auto. El texto en esta capa no cabe al tener un tamaño fijo, por lo que desborda.

auto. Éste sí cabe.

scroll. Éste sí cabe.

Si el desbordamiento es visible, puede tapar a los elementos que haya después.

En el editor de propiedades CSS, encontramos el desbordamiento en la categoría Posición.

En el panel Diseñador de CSS, esa propiedad la encontramos en la sección Diseño del subpanel Propiedades.

Y recuerda si estamos trabajando con Divs PA, podemos establecer este atributo directamente sobre el Inspector de propiedades.

Posicionamiento

El posicionamiento es el lugar donde el navegador coloca un elemento HTML para visualizarlo.

Por defecto, los elementos se posicionan uno a continuación de otro. Si se trata de elementos de bloque, como capas, párrafos, listas, etc, se irán colocando uno debajo del otro. A este posicionamiento se le denomina estático.

Utilizando CSS, con la propiedad position podemos cambiar el tipo de posicionamiento de los elementos. Existen cuatro tipos de posicionamiento:

• static. Es el normal.
• relative. El posicionamiento relativo coloca el elemento en su posición normal. A partir de ahí, podemos desplazar el elemento, permaneciendo el hueco de su posición original.
• absolute. Con el posicionamiento absoluto, especificamos la posición del elemento con respecto al elemento que lo contiene.
• fixed. Se establece la posición del elemento de forma parecida al absoluto, pero el elemento queda fijo en la pantalla, aunque utilicemos barras de desplazamiento.

Esta propiedad puede encontrarse fácilmente pulsando el botón Diseño del subpanel Propiedades del panel Diseñador de CSS.

Al cambiar el desplazamiento de un elemento, es fácil que se solape sobre otro. Esto produce que un elemento quede oculto. Para controlar esto, disponemos de la propiedad CSS z-index, a la que podemos asignar un valor numérico. Un elemento con un z-index mayor se verá por encima de otro con un z-index menor.

Las cajas del siguiente ejemplo aparecen solapadas. Al pasar el cursor sobre ellas, se le asigna z-index: 10;, lo que hace que se vean por encima del resto.

El z-index sólo afecta a los elementos con un posicionamiento distinto de static. Los elementos posicionados siempre se verán por encima de otros elementos no posicionados, y entre ellos se verá encima el de mayor z-index, o en su defecto, el que se haya generado en último lugar.

Truco: Para que un elemento sin posicionamiento se vea por encima de otro posicionado, podemos darle posicionamiento relativo, lo que no afectará a su apariencia si no lo desplazamos, y un z-index mayor que el del elemento posicionado.

En el editor CSS encontramos estas propiedades agrupadas bajo posición.

En el Diseñador de CSS, esta propiedad se encuentra en la sección Diseño del subpanel Propiedades.

 Posicionamiento relativo

El posicionamiento relativo coloca el elemento en su posición normal, y a partir de ahí lo desplaza la distancia que le indiquemos. Al desplazarlo deja un "hueco" donde estaría su posición normal.

Para aplicarlo, lo primero es declararlo en el estilo, utilizando position: relative;.

Para indicar el desplazamiento horizontal, utilizamos left para desplazarlo a la izquierda y right para hacerlo a la derecha. Utilizar valores negativos, produce el efecto opuesto. Por ejemplo, para desplazar un elemento 40px a la derecha, podríamos poner right: 40px; o left: -40px;.

Del mismo modo, podemos desplazarlo verticalmente utilizando top para desplazarlo hacia arriba o bottom para hacerlo hacia abajo.

Como sabes, podemos indicar estos valores en el Editor CSS, pero también usando el esquema de posición del Diseñador CSS.

Si no establecemos valores de desplazamiento el elemento no cambia su posición, por eso es muy común asignar el posicionamiento relativo a elementos para poder utilizar una propiedad que requiere posicionamiento, como puede ser z-index.

Posicionamiento absoluto

Al utilizar el posicionamiento absoluto indicamos de forma precisa la posición del elemento en la página.

Al contrario que con el posicionamiento relativo, el elemento al que le hemos asignado un posicionamiento absoluto no deja un hueco en la página. Podemos decir que el resto de elementos lo ignoran, y se colocan como si no existiese.

Para aplicarlo, lo primero es declararlo en el estilo, utilizando position: absolute;.

La posición y tamaño del elemento se indica siempre en relación a otro elemento que lo contiene. El elemento contenedor será el más cercano que haya con posicionamiento no estático. Si no hay ninguno, se utilizará el body.

Para definir la posición utilizamos top para referirnos a la distancia entre el borde superior del elemento posicionado y el borde superior del elemento contenedor. Por lo tanto left será la distancia entre los lados izquierdos, right entre los lados derechos y bottom entre los lados inferiores.

Para posicionar un elemento del que conocemos sus dimensiones, basta con indicar un punto en vertical (top o bottom) y un punto en horizontal (right o lef). En el siguiente elemento, todas las cajas tienen position: absolute; witdth: 60px; height: 60px y un borde. Para cada una hemos cambiado la posición. Además, a la caja que contiene a todas, le hemos dado position: relative; para que las cajas de dentro tomen su posición a partir de ella.

top: 0;
left: 0;

bottom: 0;
left: 0;

top: 50%;
left: 50%;

bottom: 50%;
right: 50%;

top: 50%;
right: 0;

top: 70px;
left: 100px;

top: 25%;
right: 25%;

Para insertar una capa con posicionamiento absoluto utilizamos el menú Insertar, opción Div. Lo que nos dará el cuadro de diálogo Insertar Div. En él, debemos establecer un ID para la capa (como se recordará, también podemos utilizar una clase, sin embargo, para los elementos PA es preferible establecer ID). Y después pulsar el botón Nueva regla CSS.

Lo que abrirá el editor de propiedades de CSS, en el que debemos establecer la propiedad position en absolute y su posición horizontal y vertical.

Cuando un elemento (no solo divs) tiene posicionamiento absoluto, en Dreamweaver se muestra así si están seleccionados:

Esto nos permite establecer su tamaño y posición simplemente arrastrándolos o estirando de sus bordes, directamente sobre la vista de diseño. Además, todas estas propiedades aparecerán en el inspector de propiedades.

 Diseño de página. Maquetación web (V)

Utilizando este posicionamiento, obtenemos gran flexibilidad para maquetar nuestra página. Por ejemplo, podemos dividir la página en dos (o más) columnas. Utilizaremos dos capas, con un alto al 100%, y que la suma de sus anchos sea el total de la página. Por ejemplo:

div#columna_izquierda {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 50%;
 }
div#columna_derecha {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 50%;
 }

Esto originaría dos columnas, cada una con un ancho de la mitad del de la página (o del elemento que las contenga).

Si queremos obtener dos columnas, una con un ancho fijo y la otra con lo que sobre, lo haremos de otra forma. Por ejemplo, si la columna de la izquierda la queremos con un ancho fijo, por ejemplo de 200px, lo que haremos será asignar a la columna de la derecha una distancia con el lado izquierdo de esos 200px, y con el lado derecho de 0, en vez de indicar el ancho.

div#columna_izquierda {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 200px;
 }
div#columna_derecha {
  position: absolute;
  right: 0;
  left: 200px;
  top: 0;
  height: 100%;
 }

Hay que decir que esto no funciona correctamente en Internet Explorer 6, que no interpreta correctamente el ancho del elemento si definimos la posición de los dos lados, en vez de un lado y el ancho.

No obstante, como veremos, para obtener una columna fija, y la otra líquida, es mejor hacerlas flotantes.

Podemos conseguir un efecto muy interesante controlando el desbordamiento de las columnas. Podemos dejar una columna fija, por ejemplo con un menú, y otra que muestre el contenido, a la que damos la propiedad overflow: auto;. Esto hará que nos podamos desplazar por el contenido de la página manteniendo el menú siempre visible. Como por defecto, Internet Explorer siempre muestra la barra de desplazamiento en la etiqueta html, queda mejor si lo quitamos html {overflow:hidden;}.

Recuerda que podemos anidar las capas. Por ejemplo, podríamos subdividir una de las capas en otras dos dentro de ella, utilizando el mismo sistema.

Puedes ver un ejemplo de página maquetada con posicionamiento absoluto aquí.

Otro elemento muy utilizado en la maquetación, es el encabezado y el pie. Observa que en los ejemplos que hemos visto, colocábamos las capas en la parte superior del todo (top: 0;). Si queremos utilizar un encabezado, en vez de comenzar arriba del todo, debemos de dejar una separación igual al alto del encabezado. Si el alto del encabezado lo indicamos en porcentajes, el alto de las columnas deberá de ser del 100% - el alto del encabezado. En vez de eso, resulta más claro si en vez del alto de las columnas, indicamos la parte superior (top) y la inferior (bottom). En este caso, nos dará igual la medida que utilicemos. Como mejor lo veremos será con un ejemplo:

   div#encabezado {
     position: absolute;
     top:0; left: 0;
     height:10%;
     width:100%;
     background-color:RoyalBlue;
    }
   div#columna_izquierda {
     position: absolute;
     top:10%; left: 0;
     height: 90%;
     width:20%;
     background-color:SandyBrown;
    }
   div#columna_derecha {
     position: absolute;
     top:10%; right: 0;
     bottom: 0;
     width: 80%;
     background-color:LightGreen;
    }
 

---

Los principales inconvenientes del posicionamiento absoluto es que hemos de definir el tamaño del elemento, no se ajusta al contenido, y no se crean huecos en la página, por eso no podemos utilizarlo para cualquier cosa.

Posicionamiento flotante

El posicionamiento flotante es un poco distinto al resto. Para empezar, no se define con la propiedad position, si no con la propiedad float. Puede tomar estos valores:

• left : flotante a la izquierda (float: left;).
• right : flotante a la derecha (float: right;).
• none : sin flotante.

En Dreamweaver, encontramos esta propiedad junto a las propiedades de Cuadro en el Editor CSS:

En el Diseñador de CSS, esta propiedad se encuentra en la sección Diseño del subpanel Propiedades. Sus opciones, left, right y none se representan como iconos, como puedes ver aquí.

Lo que hace este posicionamiento es desplazar el elemento todo lo que pueda hacia la dirección indicada, hasta encontrar el límite del elemento contenedor, u otro elemento también flotante. Además hace que todos los elementos fluyan alrededor de él.

Es muy común utilizarlo en imágenes, para que el texto fluya alrededor de ellas. En el siguiente ejemplo, todas las cajas contienen un párrafo con una imagen al principio (<p><img /> Texto</p>). Sólo cambia el float de la imagen.

 Normal. La imagen queda en la posición inicial, aumentando el alto de la línea, y no aparecen varias líneas de texto junto a la imagen.

Derecha. La imagen está en la misma posición, pero con un float: right;. Esto permite que aparezcan varias líneas de texto junto a la imagen, y cuando llegue al final, que continúe por debajo, rebasando la imagen. Así, la imagen se integra mejor en el documento.

Izquierda. La imagen está en la misma posición, pero con un float: left;. Esto permite que aparezcan varias líneas de texto junto a la imagen, y cuando llegue al final, que continúe por debajo, rebasando la imagen. Así, la imagen se integra mejor en el documento.

Observa que el texto puede quedar demasiado pegado a la imagen. Para solucionarlo, no hay más que aplicar un pequeño margin a la imagen, hacia el lado que está el texto.

Existen algunos inconvenientes al utilizar el posicionamiento flotante. Un elemento que contiene a otro flotante, no lo tiene en cuenta para su tamaño a lo alto. Por ejemplo, el siguiente párrafo tiene un borde, y vemos que si la imagen es flotante, "se sale".

 Normal. El párrafo se ajusta a la imagen y el texto.

Derecha. El párrafo sólo ajusta su alto al texto.

Además, si por ejemplo hay varios párrafos con elementos flotantes al mismo lado, hace que se "amontonen":

 Normal. Primer párrafo.

 Normal. Segundo párrafo.

Derecha. Primer párrafo

Derecha. Segundo párrafo.

Para solucionar esto, disponemos de la propiedad clear, que rompe el flotamiento. Puede tomar tres valores:

• left: impide el flotamiento a la izquierda.
• right: impide el flotamiento a la derecha.
• both: impide el flotamiento por ambos lados.

En el Diseñador CSS, los valores de la propiedad clear también se establecen a través de iconos.

En el siguiente ejemplo, utilizamos el mismo que en el ejemplo anterior, pero al segundo párrafo le hemos dado la propiedad de estilo clear: right;.

Derecha. Primer párrafo

Derecha. Segundo párrafo.

Con el posicionamiento flotante, podemos por ejemplo colocar elementos uno al lado del otro. En el siguiente ejemplo, hemos utilizado capas, todas con float:left; y un pequeño margen para que no se peguen. Observa cómo se comportan cuando cambias el tamaño de la ventana:

De forma muy parecida, podemos utilizar el posicionamiento flotante para crear columnas en un documento. Basta con que la suma del ancho de las capas que harán de columnas quepa en el ancho de elemento contenedor, y que tengan posicionamiento flotante. En Internet Explorer, si la suma de los anchos es del 100%, para algunos tamaños de ventana no cabe, por lo que mostrará una columna debajo de la otra, aunque esto sólo ocurre a veces. Por eso, cuando utilizamos porcentajes es mejor utilizar un ancho total un poco menor, por ejemplo del 99% o 99.5%.

De acuerdo con lo que hemos dicho, podemos dividir un elemento en dos columnas de la siguiente manera:

   div#columna_izquierda {
     float: left;     
     width: 30%;
     height: 100%;
     background-color:SandyBrown;
    }
   div#columna_derecha {
     float: left;     
     width: 69.5%;
     height: 100%;
     background-color:LightGreen;
    }
 

---

Observa cómo se representan en el Diseñador de CSS el conjunto de propiedades de las columnas derecha e izquierda.

  

Para añadir una cabecera al principio, no hay más que poner una capa antes de las columnas, con todo el ancho. Y para poner un pie, haríamos lo mismo, pero colocándolo después de las columnas, y rompiendo el flotamiento con clear:both;.

   div#cabecera {    
     width: 99.5%;
     height: 10%;
     background-color:RoyalBlue;
    }
   div#columna_izquierda {
     float: left;     
     width: 30%;
     height: 80%;
     background-color:SandyBrown;
    }
   div#columna_derecha {
     float: left;     
     width: 69.5%;
     height: 80%;
     background-color:LightGreen;
    }
   div#pie {
     clear: both;
     width: 99.5%;
     height: 10%;
     background-color:Violet;
    }

---

La principal diferencia con el posicionamiento absoluto es que al flotante sí le afectan los márgenes, propios y del elemento contenedor, y que no estamos obligados a definir el alto. En el ejemplo anterior, hemos establecido el alto porque no hay contenido, pero si no lo especificamos, el alto se ajustaría al contenido del elemento.

La maquetación más común es la que se realiza con elementos flotantes.

Posicionamiento fijo

El posicionamiento fijo (position: fixed;) se define igual que el posicionamiento absoluto, con las propiedades top, bottom, left y right. Pero su comportamiento es distinto: el posicionamiento fijo se refiere siempre a la ventana del navegador, independientemente de que el elemento posicionado esté dentro de otro elemento con posicionamiento, como pasaba con el absoluto. Además, el elemento siempre se muestra en la misma posición, aunque la página sea larga y nos desplacemos hacia abajo o hacia un lado.

Por ejemplo, usando el posicionamiento, podemos tener el menú de la página siempre visible a un lado, útil en páginas con texto muy largas.

En el este ejemplo, puedes ver una página maquetada con posicionamiento fijo. En ella. verás un encabezado y dos columnas que siempre aparecen visibles.

Una de las propiedades de este posicionamiento es que si imprimimos la página web y ocupa varias páginas en papel, los elementos fijos se imprimen en todas las páginas, por lo que puede resultar útil para pies y encabezados.

Nota: Internet Explorer 6 no soportaba este posicionamiento.

18.9. Ancho de la página, líquido o elástico

Debido al uso de distintos dispositivos para consultar la web se plantea el problema de como diseñar una página que se vea bien en diferentes anchos de pantalla. Hasta hace poco estas diferencias de tamaño no eran demasiado grandes pero con la aparición de los teléfonos móviles con acceso a la web el problema se ha agudizado.

Al crear el diseño de una web, básicamente existen dos tendencias: la variable y la fija. En la variable la página ocupa todo el ancho de la ventana del navegador y el diseño va cambiando según cambia el ancho (diseño líquido, elástico). La tendencia fija hace que el diseño de ancho fijo permanece constante quedando huecos a los lados, si la pantalla es más grande; o apareciendo las barras de scroll, si la pantalla es más pequeña (diseño fijo).

No es que una sea claramente mejor que otra, cada una tiene sus pros y sus contras:

 Diseño fijo.

En el diseño fijo, la página tiene un tamaño exacto, normalmente expresado en píxel. Esto facilita el diseño, sobre todo si está compuesto por imágenes divididas en trozos que deben casar perfectamente, ya que podemos posicionar todo de forma exacta. También nos permite controlar el ancho de los elementos de texto, no creando columnas ni demasiado largas ni demasiado pequeñas.

Por contra, no aprovecha bien el espacio. Pensemos en una página de ancho fijo, de 900px. Si un usuario la ve desde la pantalla de su teléfono móvil, que tiene un ancho de 320px, la mayor parte de la página no quedará visible. En cambio, si se ve desde un monitor panorámico de 24'', con 1920px de ancho, la mayor parte del espacio estará desaprovechado.

Como ejemplo de diseño fijo, tenemos la página de inicio de aulaClic.

 Diseño líquido.

En el diseño líquido, en vez de unidades absolutas se utilizan relativas al tamaño de la ventana. Esto hace que la página sea más flexible a los distintos dispositivos de visualización.

Por contra, es más difícil controlar el diseño, sobre todo si se basa en muchas imágenes, porque hay que pensar en qué ocurre si la ventana es muy pequeña o muy grande, y que no se descoloque todo al cambiar de tamaño. También puede producir líneas de texto muy largas, lo que incomoda la lectura. Aunque el usuario siempre tiene la opción de hacer más pequeña su ventana.

Para intentar controlar un poco el tamaño de los elementos, existen las propiedades de estilo max-width (ancho máximo), min-width (ancho mínimo), max-height (alto máximo) y min-height (alto mínimo).

Un ejemplo de diseño líquido puede ser la página de este curso.

 Diseño elástico.

Últimamente, se ha acuñado el término "diseño elástico" para el diseño en el que el tamaño de los objetos, no es ni fijo ni en relación al tamaño de la ventana, si no al tamaño del texto (basado en em), dando al usuario la posibilidad de cambiar su tamaño, y en proporción, el de todos los elementos. Aunque permite que el texto se controle, sigue sin adaptarse a las distintas ventanas, y resulta difícil controlar las imágenes.

Diseño adaptable (responsive)

Fluido. el tamaño se adapta a la ventana. líquido.

Responsive. adaptable. Con media query.

El siguiente paso es cambiar la disposición de los elementos en función del ancho.

Utiliza preguntas (media querys) para cargar diferentes hojas de estilo. Cambio del tamaño de texto, diseño de diferentes columnas e incluso del tamaño de imagenes. Librerias para detectar el tamaño. Por ejemplo el Fluido de Dreamweaver.

http://www.emenia.es/diseno-web-adaptable-o-responsive-web-design/

http://responsivewebdesign.com/robot/

-- "Cómo conseguir un diseño híbrido líquido-elástico La clave de estos layouts consiste en utilizar emes como unidad de medida para los bloques contenedores y añadir la propiedad max-width de CSS para establecer su anchura máxima. Suponiendo que tenemos un diseño de dos columnas, el bloque contenedor de ambas tendría un max-width del 100% y sus bloques anidados tendrían como ancho máximo el porcentaje relativo a la anchura del bloque que los contiene." de http://www.cool-z.com/blog/2010/diseno-hibrido-liquido-elastico-una-buena-opcion-olvidada/

Actualmente, la mayoría de las páginas ofrecen un diseño fijo, sobre todo si tienen un diseño más elaborado. Las que ofrecen un diseño más elástico, suelen mostrar una columna central elástica, que se adapta a la pantalla, y columnas con un ancho fijo, para menús o para la publicidad.