Unidad 18. Diseño de página. Maquetación web (VII)


18.8. 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.


Marzo-2015
Pág. 18.7
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.