(de cómo maquetar y no morir en el intento)
TRANSCRIPT
ARTUTS
De como Maquetar y No
Morir en el Intento Framework 960 Grid System
1
De cómo maquetar y No morir en el intento.
Problemas, problemas, problemas everywhere con todo lo que tenga que ver con
maquetación css de páginas web.
Para empezar, la gran pregunta que se hacen muchos es:
¿Qué tamaño tiene que tener mi Página Web?
La respuesta es simple, se busca en San Google estadísticas de resolución de monitores o la
pregunta de por sí y obtenemos miles de resultados. Para hacer un atajo al asunto digamos
que lo recomendado en ancho, como MÁXIMO, es de 960 pixeles. Claro, estamos hablando de
páginas de ancho estático o estricto. Si uno quiere que se adapte a la pantalla, tanto de un pc
de escritorio o de un Smartphone o Iphone, ya pasamos a hablar de diseño Fluido o
Responsivo como le llaman lo que saben.
Vamos a dar una manito respecto a la maquetación básica de una página web. Este tutorial es
para principiantes y para no tan principiantes que por ahí aprenden algo nuevo.
Vamos a construir una web de 2 Columnas. La misma se compone de:
Header o Cabecera.
Menú.
Cuerpo o Contenido.
Sidebar o Barra Lateral.
Footer o Pie.
2
Se llama de “2 columnas” por el hecho de que las columnas que se cuentan es de contenido y
sidebar, así podemos ver en diferentes sitios de layouts o templates que se refieren a los
mismos como de 3 columnas, 4 columnas, etc. Lo más conocido, casi formato Wordpress, es
de 2 columnas y por eso nos ocupamos de este tipo de Layout. Si quieren saber que es un
Layout, acá les dejo la referencia [LINK].
Para facilitarnos el trabajo de la maquetación existen diferentes Frameworks CSS gratuitos a
disposición de todo el mundo. El que vamos a utilizar en este mini tutorial es 960 Grid System,
de Nathan Smith
Lo pueden descargar aquí: [LINK]
Bueno, vamos a empezar por armar una estructura básica de directorio para una web. La
misma se compone, generalmente de las siguientes carpetas y archivos.
Carpetas:
• css / Para archivos CSS
• images / para Imágenes
• js / Archivos Java, como puede ser Jquery.
Archivos:
1. index.html (El archivo Principal, por supuesto)
3
2. css / style.css (Archivo principal de estilos)
3. css / 960_12_col.css (archivo principal del Framwork 960 grid en este caso particular)
4. css / reset.css (Archivo qui resetea estilos para la mejor compatibilidad en todos los
navegadores).
Los archivos de las carpetas Images y JS no los ponemos aquí por el simple hecho de que no
son comunes a todos. Así, en la carpeta images puede estar nuestro “logo.png” y en JS nuestro
“cufon-yui.js”, pero esto es según el terminado final y la funcionalidad del sitio.
Entonces, creamos al estructura básica de nuestro sitio, tiene que quedar de la siguiente
manera:
La carpeta que vamos a utilizar es la carpeta CSS.
Si ya descargamos el archivo del Framework (960 Grid), lo descomprimimos donde nos parezca
bien y nos dirigimos a la carpeta CODE -> CSS. De allí copiaremos los archivos:
960_12_col.css y reset.css
Y los trasladamos a nuestra carpeta CSS en la raíz del sitio que estamos construyendo.
4
Por lo tanto en nuestra carpeta CSS nos tienen que quedar los dos archivos. Además creamos
un archivo CSS vacío llamado style.css y lo colocamos también en nuestra carpeta CSS. El
contenido de la carpeta CSS nos queda de la siguiente manera:
Comenzando con nuestra maquetación.
Utilizando el programa que mejor les venga para edición y creación de páginas web
(Dreamweaver, Aptana Studio, Notepad, PSPad, etc.) , creamos nuestro archivo index.html y lo
guardamos en la carpeta del proyecto.
Una vez hecho esto, procedemos a “linkear” los archivos CSS del proyecto. Como recordaran
eran 3: 960_12_col.css, reset.css y style.css.
En la parte superior de nuestro archivo, entre las etiquetas<head> y </head> y debajo de la
etiqueta <title></title>, incluimos los archivos de la siguiente manera:
Con lo cual la cabecera de nuestro documento html quedaría de la siguiente manera:
Nótese que utilizamos la codificación para HTML5 pero esto no es necesario y pueden utilizar
cualquier codificación que se les antoje. Aquí es utilizado porque al final de los tutoriales (no
en este) explicaremos la nueva estructura de HTML5 y su utilización.
5
Con este paso realizado podemos pasar a nuestra hoja de estilo directamente.
La hoja de estilos (style.css) es la que controlara nuestros estilos personalizados, el framework
960 grid nada más nos hará más fácil el trabajo.
Empezando con nuestra hoja de estilos, la tenemos en blanco y lo primero que agregaremos
será los estilos generales del sitio. Para ello utilizaremos la etiqueta “body” de css. En la misma
definiremos (en este caso particular):
Alineación de Texto.
Tipo de Fuente.
Tamaño de la Fuente.
Color de la Fuente.
Nos quedara así:
Vamos a explicar lo más importante de esta etiqueta.
Una página web de 960px de ancho, en un monitor más grande, sino se centra, ser vera a un
costado del monitor. Como nosotros queremos que se centre, tenemos que recurrir al código
css.
Como sabemos, IExplorer en cualquiera de sus versiones siempre nos da diferentes problemas
ya que no respeta los estándares normales como respetan Crhome o Firefox por ejemplo, así
que para centrar una web en IExplorer debe utilizar la propiedad “text-align” en el body de
nuestro css.
body { text-align:center;}
Con esta línea, centramos la web en IExplorer y en todos los navegadores de ser necesario,
además, en el Framework que estamos utilizando ya viene el código para centrar
automáticamente en los demás navegadores.
Las demás propiedades sirven para dar formato a la fuente solamente, así que no vamos a
ahondar en ellas.
Como bien dijimos al principio, la maquetación se compondrá de header, menú, cuerpo,
sidebar y footer, asi que comencemos a maquetar en css esas posiciones de nuestro Layout.
Primero vamos a crear un contenedor para toda la estructura, dentro de él ira todo nuestro
layout.
6
Definamos la clase “.contenedor” y asignémosle las propiedades correspondientes, de la
siguiente manera:
A la clase “.contenedor” le asigamos solo dos propiedades en este caso, Height y Overflow.
La altura se define como “auto” para hacerla automática, en el caso del Overflow, se lo define
como “hidden” (oculto). El por qué se define el overflow como oculto es simple, muchas veces
nos encontramos con que al darle altura automática a un contenedor css el mismo no crece
junto con el contenido sino que se queda de un tamaño mínimo y si por ejemplo, el
contenedor tiene un fondo blanco, los vemos solamente en la cabecera. Con la propiedad
overflow definida en oculto (hidden) obligamos al contenedor a crecer si o si con el contenido.
Las dos mismas propiedades les asignamos a las demás clases. Las clases serán las siguientes:
.cabecera
.menu
.contenido
.sidebar
.pie
Definidas nos quedaran de la siguiente manera:
7
Como verán, no tenemos el ancho definido en ninguna de ellas, ni colores, ni nada parecido.
Las propiedades para el ancho esta ya definidas en el framework que estamos utilizando, asi
que podemos pasar directamente al archivo index.html y ponernos manos a la obra para
mostrar las diferentes secciones de la web.
Para comenzar, creamos la capa “contenedor”, dentro de ella ubicamos las demás capas:
Como no tenemos definido los anchos y demás propiedades (colores por ejemplo) si vemos
una vista previa de nuestra página, no veremos nada. Solamente una página en blanco. Si
vemos la vista de diseño en Dreamweaver por ejemplo solo veremos algo como esto:
8
Líneas marcando el lugar donde pusimos nuestras capas pero nada más.
Utilizando el Framework 960 Grid System.
Como bien dijimos, este framework nos facilita las cosas. En los archivos CSS que copiamos a
nuestra carpeta vienen definidos diferentes estilos con ancho acorde a cada capa, para saber
cómo se llaman o el ancho que tienen estas clases definidas podemos ir a la carpeta CODE ->
CSS dentro de la carpeta del Framework que descomprimimos, allí veremos un archivo llamado
“demo.html”, lo abrimos y nos encontramos con esto:
Allí veremos que en la parte de arriba tenemos una referencia al archivo de 12 columnas (el
que estamos utilizando) y en la parte baja de la página, referencia al archivo de 16 columnas.
Nosotros nos ocuparemos de la parte de 12 columnas solamente, pero para aclarar algo
digamos que la división de 16 columnas tiene más tamaños de capa para utilizar.
Bueno como vemos, están dibujadas capas que en el interior tienen un número, ese número
corresponde al ancho de cada capa, pero ¿Dónde está el nombre de la maldita capa? Bueno,
esto es un “secreto” (mentira), todos deben conocer o tener alguna noticia de “Firebug”, una
extensión para Firefox con la cual podemos “Inspeccionar Elementos” de las páginas y ver sus
propiedades. El nuevo Firefox ya lo trae por defecto y, en mi caso, utilizando Chrome también
lo tenemos por defecto. Asi que utilizando esta herramienta, ya sea en Chrome o Firefox, nos
situamos sobre la capa de la cual queremos saber el nombre, supongamos la de arriba de todo,
la que tiene el número 940 y apretemos en “Inspeccionar Elemento”:
9
Al apretar en el menú, se nos abrir el inspector de elementos en la parte de abajo del
navegador:
10
Nos marcara de entrada la capa sobre la que nos posicionamos y podremos ver el nombre de
la clase:
Como vemos esa clase en particular se llama “grid_12”, este mismo proceso podemos utilizar
para todas las clases, para saber su nombre.
Viendo esto podemos decir que todas las clases del framework comienzan su nombre con
“grid_” seguido de un número que va desde 1 hasta 12. En el mismo framework se puede
encontrar otras clases que definen diferentes propiedades con nombres como “Omega”,
“Alpha” etc., pero no las utilizaremos ya que esta es la base para aprender a utilizar este
framework y no un tutorial avanzado.
Bueno sabiendo esto sobre las clases del framework vamos a seleccionar, por medio de las
capas, los tamaños a utilizar, ya sabemos que el ancho de la web será de 960px, para esto se
utiliza la clase “container_12” en la capa “contenedor”, de la siguiente manera:
Como vemos, al lado de la clase definida por nosotros “contenedor” dejando un simple
espacio, ponemos la clase correspondiente para darle a la web el ancho de 960px.
Con esto tenemos definido el ancho y la posición en el centro de la capa “contenedor”.
Definamos las otras capas, empezando por la cabecera. La cabecera o header, debe ocupar la
parte superior completa (en este caso) de la web, así que utilizaremos de ejemplo la capa (del
demo) en la que figura el número 940. Este número define el ancho de la capa:
11
Revisando la capa con el inspector de elementos, nos encontramos con que el nombre css de
la capa es “grid_12”, este nombre capa o estilo, lo pondremos junto a nuestro estilo
“cabecera”:
Para nuestro menú (clase .menu) y nuestro pie (Clase .pie) utilizaremos la misma clase del
framework: grid_12.
Pasando a nuestro cuerpo y sidebar, tenemos que saber que los queremos a los juntos, a la
misma altura y alineados a la izquierda.
Volviendo al archivo de las capas del Framework seleccionamos dos tamaños
correspondientes, en este caso elegí las clases “grid_8” y “grid_4” de 620px y 300px de ancho
respectivamente. Grid_8 sera para nuestro contenido y Grid_4 para nuestra sidebar:
Con esto estaría terminada la maquetación básica de nuestro layout de 2 columnas. SI
hacemos una vista previa del layout no veremos nada, ya que no tiene colores ni contenido.
Para poder verlo vamos a agregar a nuestro archivo “style.css” algunas propiedades como
color de fondo y alturas definidas.
12
Como ven, agregamos un color de fondo al body, al contenedor y demás capas para poder ver
cómo quedaría nuestra maquetación. Elegimos unos colores bien “destacados” (por no decir
feos) para mostrar el resultado final:
13
Por ultimo debemos decir que a esta maquetación le faltan definir cosas como márgenes
superiores (para que el menú no se pegue al header por ejemplo) y cosas asi como estilos de
links y demás. Pero se nos fue muy largo el asunto y además teníamos intención solamente de
mostrar como dividir la web al principio.
Dejamos los archivos fuentes para que puedan utilizarlos o verlos.
Dudas, sugerencias y demás en este [LINK] (no se responderá de otra forma).
Espero que les sirva, en unos días publicare unos tutoriales siguiendo esta línea, en los mismos
tengo la intención de explicar cómo crear themes wordpress y templates joomla para la
versión 1.7+.
El código esta en imagen, no por haraganes, sino para evitarles lo de “Copiar/pegar” porque
así no se aprende un joraca (es la verdad). Tendrán que apelar a sus deditos y escribir.
Que les aproveche chicos. Espero le sirva a algunos.
Saludos.