Maestro CSS, destripando estilos. Cap. 2 – La estructura
Escrito por Arzet el 06-11-2008
En el primer capítulo hablamos de una útil y buena práctica antes de entrar de lleno a crear nuestra CSS, resetear los estilos. En esta segunda parte y antes de entrar de lleno a destripar uno por uno los estilos que podemos usar quiero centrarme en algo muy importante y vital para no tener que estar luego poniendo parches para incluir cosas nuevas en nuestra página, la estructura.
Lo primero que tenemos que tener claro antes de empezar a hacer nuestra página es el resultado final, saber que queremos mostrar y como queremos hacerlo, una tarea que puede parecer sencilla, pero que de estar mal planteada os dará más de un quebradero de cabeza. Si la web es personal, cuando el día de mañana queráis implementar algo no os importará ponerlo unos pixels mas abajo si es la manera más sencilla de hacerlo, controlareis el tamaño de vuestras imágenes y si un titular debe entrar en dos lineas de texto para que no descuadre, nunca escribiréis tres. Pero si hablamos de un cliente… amigos la cosa da un giro de 180 grados, piensa en lo peor que pueden hacer, porque lo harán.
Definir una buena estructura es esencial, básico y todos los adjetivos sinónimos que queráis usar. Aquí os doy una serie de consejos.
Que debo tener en cuenta?
Principalmente debes tener claro el medio en el que trabajas. Una página web es navegable, no hace falta meter toda la información en una misma y kilométrica página. El usuario debe poder moverse por ella, experimentar y descubrir, pero nosotros debemos controlar siempre en cierta manera esta navegabilidad, marcarle y facilitarle un camino lógico para que siga el orden que nos interesa. Si quiere salirse de este camino, eso ya es su problema.
En segundo lugar intenta hacerte con todo la información que necesitas para hacer la web, siempre que puedas solicita todo el material antes de mover un solo dedo. Nuestro cliente debe tener claro que es lo que quiere, que secciones le interesa destacar, que información desea dar en cada una de ellas, que tipo de imágenes desea utilizar… el cliente debe tener una estructura mental formada de lo que desea y si estáis lo bastante rodados ya le ayudareis vosotros a perfilarla aportándole ideas y un enfoque nuevo a los puntos flojos de su estructura fruto de vuestra experiencia personal.
Debo avisaros que en este punto os encontrareis las mayores sorpresas, desde clientes que tiene clarísimo que es lo que quieren y da gusto oírlos, hasta absolutos “espécimenes” que hacen una web porque queda mas bonito en la tarjeta e igual así incluso desde China se animan a llamarlos para comprar, como esto de internet se ve en todo el mundo… No os parezca extraño, yo mismo he realizado más de una web con 5 secciones solo teniendo clara una cosa, la dirección postal y teléfono del “espécimen”.
Como empiezo?
Pues siguiendo la misma metodología que como lo harías cuando te piden que diseñes un logo, dibujes una mascota o montes un anuncio. Usa el lápiz y papel, una pizarra, el Photoshop, Freehand, el Paint de windows o lo que te haga sentir más cómodo, simplemente sigue el mismo método que apliques siempre y simplemente diseña la página.
Ya tengo claro lo que quiero, como lo transformo en CSS?
Supondremos una página super sencilla con los siguiente elementos:
- Cabecera con el logo de la empresa (la llamaremos “cabecera”, como si fuera un periódico)
- Links de las diferentes secciones (los “enlaces”)
- Contenido de cada sección (a este lo llamaré “cuerpo”)
- Copyright, registro mercantil y aviso legal ( y a este “pie”)
La gran ventaja de trabajar con capas es que puedes tratar la web como si de una plancha de corcho se tratara y en la que irás enganchando todos los elementos. La plancha de corcho se llama <body> y dentro pondremos nuestra primera capa <div> a la que podéis llamar como queréis pero en medio mundo suelen llamarla container o contenedor.
NOTA: Para aquellos que no lo sepais las capas se identifican de dos formas, con id o con class. El uso es más o menos indistinto, si bien el manual de buenas maneras identifica las capas ID como capas únicas que no se repiten en una misma página, mientras que las del tipo CLASS podemos usarlas más de una vez. En ocasiones puede que tengamos que usar CLASS para una capa cuyo ID necesitemos para otra cosa (javascript, jQuery, etc).
Este contenedor nos permitirá editar siempre que queramos nuestra página entera, ya sea para moverla a izquierda o centro, hacer más estrecha o ancha el área de información, etc. Es la capa madre que engloba a todas las hijas y cualquier cambio sobre esta afecta a las hijas.
A partir de este punto ya podemos poner el resto de capas dentro del contenedor.
Esto traducido a lenguaje HTML sería:
<div id=”contenedor”>
<div id=”cabecera”></div>
<div id=”enlaces”></div>
<div id=”cuerpo”></div>
<div id=”pie”></div>
</div>
Como veis los dos diseños tienen la misma estructura y será la CSS la que nos marcará el diferente diseño.
A la hora de ordenarlo seguimos el orden lógico en los dos casos, un contenedor que lo engloba todo y dentro del cual esta primero la cabecera, después los enlaces, el cuerpo y finalmente el pie. Para el segundo caso de estructura, el orden entre enlaces y cuerpo podría ser indistinto, pero si nos guiamos por el sistema occidental de lectura lo correcto es ir de arriba a abajo y de izquierda a derecha, no?
Y ya está?
Bueno ahora habría que definir la hoja de estilos, decirle a cada capa como debe comportarse y cómo debe hacerlo su contenido, etc. Además este es un ejemplo demasiado sencillo, normalmente os encontrareis cosas bastante mas complejas de estructurar, así que os recomiendo tomaros vuestro tiempo y estudiarlo siempre muy bien antes de poneros manos a la obra porque los problemas surgen siempre demasiado tarde y cualquier cambio puede hacerse muy costoso. Para que os hagáis una idea, en el caso 2 de nuestro sencillísimo ejemplo incluso os diré que no estaría de mas incluir una nueva capa que englobara los enlaces y el cuerpo. Porqué? Ese será otro capítulo :)
%7Cutmcsr%3D(direct)%7Cutmcmd%3D(none)%3B%2B__utmv%3D93470829.-%3B)
Me parece muy util e interesante esta serie de articulos sobre “CSS”.
Espero ansioso las otras entregas… asi que… NO TARDEIS DEMASIADO!!! :-)
Perdón! creo que estoy muy ansioso…
Gracias y un saludo.
Es como leerse a uno mismo, jeje. Felicidades por esta colección de articulos, tienen un gran futuro. Por mi parte lo estoy recomendando a muchos buenos amigos que comienzan a tocar.
#abelsutilo{display:agradecido;}
Abrazo :-)
Sigue con ellos, es una gran iniciativa.
PD: al final abrimos el blog, pero por lo visto lo han dejado solo para acceso privado :( aún así te hemos incluido a nuestros enlaces!
un saludete
[...] sacan el segundo capítulo donde explican como crear una estructura web mediante css y xhtml. Ponen énfasis en lo importante [...]
Muchas gracias a todos, la verdad es que da gusto publicar cuando hay tan buenos y agradecidos lectores. Lamento que la periodicidad tenga que ser mas o menos mensual, pero como siempre la falta de tiempo y que me gusta dormir por las noches hace difícil unas entregas más seguidas. De nuevo, gracias por la acogida.
Actualizado: Como bien dice guepmascle, la periodicidad intentaré que sea semanal, en el comentario se me saltó y puse mensual…
muy bueno el tutorial… ojala sea mas seguido… saludos
Creo que quiso decir semanal, pero no se. De momento las dos últimas semanas ha habido maestro css.
Muy buenos los tutoriales, so nuevo por aca pero en vista de la calidad del material ya sere lector frecuente… este link se va directito a mi lector RSS.
Saludos y gracias, espero que el capitulo de posicionamiento sea extenso por que es el que mas desconosco :S y he visto cosas muuy interesantes hechas con eso.
[...] Maestro CSS, destripando estilos. Cap. 2 – La estructura (7/noviembre/2008). Etiquetas: aprendizaje, CSS Topics: CSS, Desarrollo web, Documentos [...]
[...] 1 – Resetea tu CSS Cap. 2 – La estructura Cap. 3 – La estructura (y2) Cap. 4 – Selectores y demás Cap. 5 – Selectores y demás (y2) Cap. 6 – [...]
Excelente descripción, Ateneu Popular es mi Biblia en diseño… Felicitaciones!!!
Gracias Edith, pero aún no tenemos el carnet de profetas, así que dejemos lo de biblia para otros, ja ja ja
Jaja, Por decir algo… a modo figurativo…IGUAL BAKAN!!!
Perdona? que es bakan?
- La palabra bacán (más usada en Chile con la letra k, BAKAN) se refiere a algo excelente.
- En Colombia bacán se utiliza para refererirse a un individuo agradable o amigable.
- En Cuba, bacán significa que alguien o algo es bueno, excelente, exquisito… YO SOY DE CHILE, en definitiva… me refiero al excelente aporte de vuestra pagina y su contenido…