Maquetas Css

Finalmente pude sacar tiempo para otra entrada :), en esta entrada hablare de como maquetar una página web utilizando Css; algunos tipos de maquetación; y sobre el modelo de cajas.

Maquetación Web:

Primero lo primero, una definición corta de maquetación web; Cuando te encuentras en el proceso de diseño de tu sitio web, el primer paso es crear una serie de borradores de la distribución que aplicaremos a los diferentes elementos de una página web, como los principales (header, footer, etc) y a todos los sub-elementos de un elemento (párrafos, imágenes, listas, etc), el proceso de crear estos borradores se le conoce como maquetación. Pero no nos centraremos en hacer borradores, en este post veremos como llevarlos a Css.

Modelo de caja.

Esto es importante, los elementos de una web como divs, perrafos, listas, etc; se comportan como cajas, las cuales no son visibles a simple vista por que inicialmente no poseen un color de fondo, o borde. A estas cajas se le pueden dar propiedades con Css, cada caja consta de los siguientes elementos: Margen; Borde, Relleno, y contenido. El margen es la separación entre un elemento y otro, este es invisible; El borde delimita el relleno y contenido, puede tener color, y grosor; El relleno o padding es el espacio entre el contenido y el borde, este puede también ser visible y tener un color de fondo; Finalmente el contenido, que puede ser un párrafo o cualquier elemento. El margen, borde y relleno puede decirse que son partes opcionales. 

Las propiedades altura y anchura (Width y Height) solo afectan realmente al contenido, no al relleno borde o margen. Ya conociendo el modelo de cajas, podemos pasar a maquetar.

Tipos de maquetación.

Hay varios estilos de maquetación, les mostrare algunos más un ejemplo en Css de cada una.

Este será la página HTML que utilizaré para explicar los diferentes tipos de maquetación:

Como ven es bastante simple, tiene un header, una barra de navegación, una parte principal, una parte de información adicional y un footer, si desean puedes descargar la pagina HTML para que pruebes los diferentes estilos de maquetación.

• Maquetación sin diseño: 

De esta forma era como se veían las primeras paginas web, si quieres hacer este tipo de diseño simplemente puedes no colocar Css a tu página web. Se vería de esta forma:

• Maquetación con diseño fijo: 

En un inicio la maquetación se hacia con tablas HTML, se hacia que el contenido fuera fijo, es decir, que la pagina se maquetaba utilizando medidas para un tamaño específico de página. Cada celda ocupaba un tamaño en pixeles. Si la pagina se visualiza en otros tamaños de pantalla aparecería la barra de desplazamiento horizontal, que por cierto esta desaconsejado totalmente que suceda. En Css puedes utilizar with y height en px para conseguir este diseño.

Como pueden ver, utilicé un color de fondo para las partes de la página en el Css para diferenciar mejor los elementos. Es simple, el body debe tener un with fijo y la anchura sumada de cada uno de sus elementos no debe superarla, en este ejemplo el body tiene una anchura de 900px, y el nav, main, y aside cada uno tiene un with de 300px: 300px*3=900px. Si lo desean pueden descargar la hoja de Css de diseño fijo que utilicé.

• Diseño elástico: 

Como saben hay muchos tamaños de pantalla: de teléfono, de computadora, de tabletas, y todas de diversas resoluciones. La meta es lograr que nuestro sitio web pueda verse de manera correcta en la mayor cantidad de resoluciones posibles. El diseño elástico pretende lograr esto, en este diseño el tamaño de la página y su diseño es relativo al tamaño del texto, por tanto, si aumentase el tamaño del texto, este debería ajustarse a la estructura sin desbordamientos. Ya no utilizamos "px" para definir medidas, sino "em". Para realizar este diseño debes colocar un ancho máximo al body en "em", y para cada uno de los elementos, ten en cuenta que la anchura de cada elemento al sumarse debe ser igual a la del body. El inconveniente con este diseño es que sigue existiendo el problema de la barra horizontal con las resoluciones pequeñas.

Recalco: en este diseño los elementos son relativos al tamaño del texto. Fuera de eso seguirá existiendo el problema para que el contenido se ajuste al tamaño de la pantalla, en el fondo seguirá siendo un diseño fijo. Si deseas puedes descargar la hoja de Css de diseño elástico que utilice.

• Diseño líquido: 

Este tipo de diseño tiene como objetivo que la página se visualice correctamente en todos los dispositivos. En este diseño el ancho de la página no es fijo, los elementos de una página se ajustan al tamaño de la pantalla. El ancho de los elementos más importantes se declaran en porcentaje.

Como pueden ver, se ajusta perfecto a pantallas medianas, pero en pantallas muy grandes los párrafos pueden volverse lineas muy largas, y en pantallas muy pequeñas los elementos quedan amontonados. Si deseas puedes descargar la hoja de Css de diseño líquido que utilicé.

• Diseño adaptable: 

He aquí la solución a nuestros problemas, el diseño adaptable pretende que creemos algunos diseños para rangos de pantallas, de esta forma la página puede tener una presentación que se adapte mejor al tamaño de pantalla donde se muestre. En un diseño adaptable la presentación de una pagina puede sufrir importantes transformaciones, como cambiar de un diseño de varias columnas a un diseño de una columna, o ocultar partes de la página, o convertir una barra de menú en una lista desplegable, entre otros. Para realizar este diseño debemos utilizar las media queries, las cuales permiten que el dispositivo utilice el diseño más adecuado.
Para realizar este diseño primero debes colocar esta linea dentro del <head> de tu página HTML.

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

Para este ejemplo utilizaré 3 hojas Css, una para cuando la resolución sea menor igual que 480px, y otra para cuando sea mayor igual que 481px. Y por supuesto una hoja base, para las propiedades que quiero que se cumplan en todos los diseños. En el <head> debes colocar todos los css que utilizarás, en mi caso:

    <link rel="stylesheet" href="basico.css" type="Text/css">

Y los Css con media queries:

    <link rel="stylesheet" href="mini.css" type="Text/css" media="screen and (max-width:480px)">

    <link rel="stylesheet" href="grande.css" type="Text/css" media="screen and (min-width:481px)">

Hoja de Css Base:

En este Css coloqué los colores, y defini dos clases. En mi HTML coloqué en la clase ".display-grande" a los elementos que quiero que se muestren solo en pantallas grandes. Es importante que en este Css esas clases tengan como propiedad "display: none;"



Hoja de Css para hasta 480px:

!important le da prioridad sobre otras Css al atributo seleccionado, de forma que todos los elementos de la clase ".display-mini" se mostraran solo cuando se entre en dicha resolución de pantalla. Para una mejor presentación cambio la lista a lineal, le quito las viñetas y la centro, también centro los artículos.
Hoja de Css para resoluciones mayores a 481px:

Para pantallas de resoluciones mayores iguales a 481px se mostraran todos los elementos que pertenezcan a la clase ".display-grande", y coloco los demás atributos que utilicé en mi diseño líquido ya que quedaban bien en pantallas medianas y grandes (bien no perfecto).
El resultado es el siguiente:

Como pueden apreciar, logra una mejoría notable en cuanto a presentación; este es el estilo de diseño recomendado por que, como sabemos, cada día inventan nuevos dispositivos y no existe realmente ningún estándar para las resoluciones de pantalla. Si lo deseas puedes descargar las hojas de Css de diseño adaptable que utilicé en el ejemplo.
Y así llegamos al final de la entrada, como recomendación les dejo un link a Layout Gala, una página con nada menos que con 40 diseños adaptables, muy útil si te has quedado sin inspiración o necesitas ideas de como distribuir los elementos de una web. Si les gusto el post suscribanse, sino déjenme sus sugerencias en los comentarios, nos vemos en el próximo post :).