ARTUTS

De como Maquetar y No Morir en el Intento

Framework 960 Grid Sy tem

De cmo maquetar y No morir en el intento.

Problemas, problemas, problemas everywhere con todo lo que tenga que ver con maquetacin css de pginas web. Para empezar, la gran pregunta que se hacen muchos es !"u# tama$o tiene que tener mi Pgina %eb& 'a respuesta es simple, se busca en (an )oogle estad*sticas de resolucin de monitores o la pregunta de por s* y obtenemos miles de resultados. Para hacer un ata+o al asunto digamos que lo recomendado en ancho, como ,-./,0, es de 123 pi4eles. 5laro, estamos hablando de pginas de ancho esttico o estricto. (i uno quiere que se adapte a la pantalla, tanto de un pc de escritorio o de un (martphone o /phone, ya pasamos a hablar de dise$o 6luido o 7esponsivo como le llaman lo que saben. 8amos a dar una manito respecto a la maquetacin bsica de una pgina web. 9ste tutorial es para principiantes y para no tan principiantes que por ah* aprenden algo nuevo. 8amos a construir una web de : 5olumnas. 'a misma se compone de Header o Cabecera. Men. Cuerpo o Contenido. Sidebar o Barra Lateral. Footer o Pie.

(e llama de ;: columnas< por el hecho de que las columnas que se cuentan es de contenido y sidebar, as* podemos ver en di=erentes sitios de layouts o templates que se re=ieren a los mismos como de > columnas, ? columnas, etc. 'o ms conocido, casi =ormato %ordpress, es de : columnas y por eso nos ocupamos de este tipo de 'ayout. (i quieren saber que es un 'ayout, ac les de+o la re=erencia @'/NAB. Para =acilitarnos el traba+o de la maquetacin e4isten di=erentes 6rameworCs 5(( gratuitos a disposicin de todo el mundo. 9l que vamos a utilizar en este mini tutorial es 123 )rid (ystem, de Nathan (mith 'o pueden descargar aqu* @'/NAB Dueno, vamos a empezar por armar una estructura bsica de directorio para una web. 'a misma se compone, generalmente de las siguientes carpetas y archivos. 5arpetas css E Para archivos 5(( images E para /mgenes js E Frchivos Gava, como puede ser Gquery.

Frchivos 1. inde4.html H9l archivo Principal, por supuestoI :

:. css E style.css HFrchivo principal de estilosI >. css E 123J1:Jcol.css Harchivo principal del 6ramworC 123 grid en este caso particularI ?. css E reset.css HFrchivo qui resetea estilos para la me+or compatibilidad en todos los navegadoresI. 'os archivos de las carpetas /mages y G( no los ponemos aqu* por el simple hecho de que no son comunes a todos. Fs*, en la carpeta images puede estar nuestro ;logo.png< y en G( nuestro ;cu=onKyui.+s<, pero esto es segLn el terminado =inal y la =uncionalidad del sitio. 9ntonces, creamos al estructura bsica de nuestro sitio, tiene que quedar de la siguiente manera

'a carpeta que vamos a utilizar es la carpeta 5((. (i ya descargamos el archivo del 6rameworC H123 )ridI, lo descomprimimos donde nos parezca bien y nos dirigimos a la carpeta 50D9 KM 5((. De all* copiaremos los archivos 123J1:Jcol.css y reset.css N los trasladamos a nuestra carpeta 5(( en la ra*z del sitio que estamos construyendo.

>

Por lo tanto en nuestra carpeta 5(( nos tienen que quedar los dos archivos. Fdems creamos un archivo 5(( vac*o llamado style.css y lo colocamos tambi#n en nuestra carpeta 5((. 9l contenido de la carpeta 5(( nos queda de la siguiente manera

5omenzando con nuestra maquetacin. Otilizando el programa que me+or les venga para edicin y creacin de pginas web HDreamweaver, Fptana (tudio, Notepad, P(Pad, etc.I , creamos nuestro archivo inde4.html y lo guardamos en la carpeta del proyecto. Ona vez hecho esto, procedemos a ;linCear< los archivos 5(( del proyecto. 5omo recordaran eran > 123J1:Jcol.css, reset.css y style.css. 9n la parte superior de nuestro archivo, entre las etiquetasPheadM y PEheadM y deba+o de la etiqueta PtitleMPEtitleM, incluimos los archivos de la siguiente manera

5on lo cual la cabecera de nuestro documento html quedar*a de la siguiente manera

Ntese que utilizamos la codi=icacin para QR,'S pero esto no es necesario y pueden utilizar cualquier codi=icacin que se les anto+e. Fqu* es utilizado porque al =inal de los tutoriales Hno en esteI e4plicaremos la nueva estructura de QR,'S y su utilizacin.

5on este paso realizado podemos pasar a nuestra ho+a de estilo directamente. 'a ho+a de estilos Hstyle.cssI es la que controlara nuestros estilos personalizados, el =rameworC 123 grid nada ms nos har ms =cil el traba+o. 9mpezando con nuestra ho+a 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. 9n la misma de=iniremos Hen este caso particularI Alineacin de Texto. Tipo de Fuente. Tamao de la Fuente. Color de la Fuente. Nos quedara as*

8amos a e4plicar lo ms importante de esta etiqueta. Ona pgina web de 123p4 de ancho, en un monitor ms grande, sino se centra, ser vera a un costado del monitor. 5omo nosotros queremos que se centre, tenemos que recurrir al cdigo css. 5omo sabemos, /94plorer en cualquiera de sus versiones siempre nos da di=erentes problemas ya que no respeta los estndares normales como respetan 5rhome o 6ire=o4 por e+emplo, as* que para centrar una web en /94plorer debe utilizar la propiedad ;te4tKalign< en el body de nuestro css. body text!ali"n#center$% 5on esta l*nea, centramos la web en /94plorer y en todos los navegadores de ser necesario, adems, en el 6rameworC que estamos utilizando ya viene el cdigo para centrar automticamente en los dems navegadores. 'as dems propiedades sirven para dar =ormato a la =uente solamente, as* que no vamos a ahondar en ellas. 5omo bien di+imos al principio, la maquetacin se compondr de header, menL, cuerpo, sidebar y =ooter, asi que comencemos a maquetar en css esas posiciones de nuestro 'ayout. Primero vamos a crear un contenedor para toda la estructura, dentro de #l ira todo nuestro layout.

De=inamos la clase ;.contenedor< y asign#mosle las propiedades correspondientes, de la siguiente manera

F la clase ;.contenedor< le asigamos solo dos propiedades en este caso, Qeight y 0ver=low. 'a altura se de=ine como ;auto< para hacerla automtica, en el caso del 0ver=low, se lo de=ine como ;hidden< HocultoI. 9l por qu# se de=ine el over=low como oculto es simple, muchas veces nos encontramos con que al darle altura automtica a un contenedor css el mismo no crece +unto con el contenido sino que se queda de un tama$o m*nimo y si por e+emplo, el contenedor tiene un =ondo blanco, los vemos solamente en la cabecera. 5on la propiedad over=low de=inida en oculto HhiddenI obligamos al contenedor a crecer si o si con el contenido. 'as dos mismas propiedades les asignamos a las dems clases. 'as clases sern las siguientes .cabecera .menu .contenido .&idebar .pie De=inidas nos quedaran de la siguiente manera

5omo vern, no tenemos el ancho de=inido en ninguna de ellas, ni colores, ni nada parecido. 'as propiedades para el ancho esta ya de=inidas en el =rameworC que estamos utilizando, asi que podemos pasar directamente al archivo inde4.html y ponernos manos a la obra para mostrar las di=erentes secciones de la web. Para comenzar, creamos la capa ;contenedor<, dentro de ella ubicamos las dems capas

5omo no tenemos de=inido los anchos y dems propiedades Hcolores por e+emploI si vemos una vista previa de nuestra pgina, no veremos nada. (olamente una pgina en blanco. (i vemos la vista de dise$o en Dreamweaver por e+emplo solo veremos algo como esto

'*neas marcando el lugar donde pusimos nuestras capas pero nada ms. Otilizando el 6rameworC 123 )rid (ystem. 5omo bien di+imos, este =rameworC nos =acilita las cosas. 9n los archivos 5(( que copiamos a nuestra carpeta vienen de=inidos di=erentes estilos con ancho acorde a cada capa, para saber cmo se llaman o el ancho que tienen estas clases de=inidas podemos ir a la carpeta 50D9 KM 5(( dentro de la carpeta del 6rameworC que descomprimimos, all* veremos un archivo llamado ;demo.html<, lo abrimos y nos encontramos con esto

Fll* veremos que en la parte de arriba tenemos una re=erencia al archivo de 1: columnas Hel que estamos utilizandoI y en la parte ba+a de la pgina, re=erencia al archivo de 12 columnas. Nosotros nos ocuparemos de la parte de 1: columnas solamente, pero para aclarar algo digamos que la divisin de 12 columnas tiene ms tama$os de capa para utilizar. Dueno como vemos, estn dibu+adas capas que en el interior tienen un nLmero, ese nLmero corresponde al ancho de cada capa, pero !Dnde est el nombre de la maldita capa& Dueno, esto es un ;secreto< HmentiraI, todos deben conocer o tener alguna noticia de ;6irebug<, una e4tensin para 6ire=o4 con la cual podemos ;/nspeccionar 9lementos< de las pginas y ver sus propiedades. 9l nuevo 6ire=o4 ya lo trae por de=ecto y, en mi caso, utilizando 5hrome tambi#n lo tenemos por de=ecto. Fsi que utilizando esta herramienta, ya sea en 5hrome o 6ire=o4, nos situamos sobre la capa de la cual queremos saber el nombre, supongamos la de arriba de todo, la que tiene el nLmero 1?3 y apretemos en ;/nspeccionar 9lemento<

Fl apretar en el menL, se nos abrir el inspector de elementos en la parte de aba+o del navegador

Nos marcara de entrada la capa sobre la que nos posicionamos y podremos ver el nombre de la clase

5omo vemos esa clase en particular se llama ;gridJ1:<, este mismo proceso podemos utilizar para todas las clases, para saber su nombre. 8iendo esto podemos decir que todas las clases del =rameworC comienzan su nombre con ;gridJ< seguido de un nLmero que va desde 1 hasta 1:. 9n el mismo =rameworC se puede encontrar otras clases que de=inen di=erentes propiedades con nombres como ;0mega<, ;Flpha< etc., pero no las utilizaremos ya que esta es la base para aprender a utilizar este =rameworC y no un tutorial avanzado. Dueno sabiendo esto sobre las clases del =rameworC vamos a seleccionar, por medio de las capas, los tama$os a utilizar, ya sabemos que el ancho de la web ser de 123p4, para esto se utiliza la clase ;containerJ1:< en la capa ;contenedor<, de la siguiente manera

5omo vemos, al lado de la clase de=inida por nosotros ;contenedor< de+ando un simple espacio, ponemos la clase correspondiente para darle a la web el ancho de 123p4. 5on esto tenemos de=inido el ancho y la posicin en el centro de la capa ;contenedor<. De=inamos las otras capas, empezando por la cabecera. 'a cabecera o header, debe ocupar la parte superior completa Hen este casoI de la web, as* que utilizaremos de e+emplo la capa Hdel demoI en la que =igura el nLmero 1?3. 9ste nLmero de=ine el ancho de la capa

13

7evisando la capa con el inspector de elementos, nos encontramos con que el nombre css de la capa es ;gridJ1:<, este nombre capa o estilo, lo pondremos +unto a nuestro estilo ;cabecera<

Para nuestro menL Hclase .menuI y nuestro pie H5lase .pieI utilizaremos la misma clase del =rameworC gridJ1:.

Pasando a nuestro cuerpo y sidebar, tenemos que saber que los queremos a los +untos, a la misma altura y alineados a la izquierda. 8olviendo al archivo de las capas del 6rameworC seleccionamos dos tama$os correspondientes, en este caso eleg* las clases ;gridJU< y ;gridJ?< de 2:3p4 y >33p4 de ancho respectivamente. )ridJU sera para nuestro contenido y )ridJ? para nuestra sidebar

5on esto estar*a terminada la maquetacin bsica de nuestro layout de : columnas. (/ 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 =ondo y alturas de=inidas.

11

5omo ven, agregamos un color de =ondo al body, al contenedor y dems capas para poder ver cmo quedar*a nuestra maquetacin. 9legimos unos colores bien ;destacados< Hpor no decir =eosI para mostrar el resultado =inal

1:

Por ultimo debemos decir que a esta maquetacin le =altan de=inir cosas como mrgenes superiores Hpara que el menL no se pegue al header por e+emploI y cosas asi como estilos de linCs y dems. Pero se nos =ue muy largo el asunto y adems ten*amos intencin solamente de mostrar como dividir la web al principio. De+amos los archivos =uentes para que puedan utilizarlos o verlos. Dudas, sugerencias y dems en este @'/NAB Hno se responder de otra =ormaI. 9spero que les sirva, en unos d*as publicare unos tutoriales siguiendo esta l*nea, en los mismos tengo la intencin de e4plicar cmo crear themes wordpress y templates +oomla para la versin 1.TV. 9l cdigo esta en imagen, no por haraganes, sino para evitarles lo de ;5opiarEpegar< porque as* no se aprende un +oraca Hes la verdadI. Rendrn que apelar a sus deditos y escribir. "ue les aproveche chicos. 9spero le sirva a algunos. (aludos.

1>