Teniendo definida la estructura de la página con HTML, entonces ya estamos listos para aplicar las hoja de estilos en cascada (CSS) lo cual determinará la manera en que se presentarán los elementos de nuestra página.
Antes de empezar a aplicar CSS, es muy importante que entiendas la importancia y las ventajas de utilizarla en el desarrollo de Sitios Web, lo cual involucra páginas más ligeras, un código limpio, facilidad para el mantenimiento, etc. Para profundizar en el tema, te sugiero que visites los siguiente enlaces:
Y si empiezas a googlear un poco, encontrarás muchísimo material al respecto. Una vez más, recuerda que es importante que entiendas el fundamento del uso de esta tecnología, además de tener presente que dentro de la codificación de lado del cliente constituye una capa que se construye sobre el HTML.
Convención y estructura de directorios Para ordenar los distintos archivos que tendrá un Sitio Web, suelo utilizar la siguiente estructura de directorios:
Donde:
- c: Archivos CSS
- f: Archivos Flash
- i : Imágenes de contenido
- j: Archivos JavaScript
¡¡¡El orden es muy imporante, chicos!!!
Planificación, organización y mantenimiento de tus hojas de estilo
Una muy buena práctica es organizar tu CSS de tal forma que puedas administrarlo fácilmente (fácil mantenimiento), agrupando tus estilos dentro de secciones lógicas y agregarle comentarios para hacer que tu código sea de fácil lectura. Para iniciar la explicación de cómo organizar tu CSS, te invito a observar atentamente el siguiente gráfico:
Por adelantado, ya sabemos que todo los archivos *.css que tengas y tendrás se guardarán dentro del directorio “c”.
Empezaremos por aplicar los estilos a nuestro documento HTML (index.html), lo cual se puede hacer enlazando una hoja de estilos externa en la cabecera de nuestro documento (separación estructura-presentación) a través de la siguiente instrucción:
<link href="c/styles.css" rel="stylesheet" type="text/css" /> Una pequeña imagen de cómo luciría la cabecera de mi documento en mi editor favorito sería esta:
La hoja de estilos principal llamada styles.css se encargará de importar a las hojas de estilos layout.css, type.css y color.css que contendrán todas las declaraciones necesarias que establecerán la presentación del documento.
¿Qué tipo de declaraciones contendrá cada archivo importado?
- layout.css: todos los detalles de maquetación de la página
- type.css: tipografía, estilos de letra
- color.css: colores de fondo, colores de fuente.
¿Y los archivos
ie6.css y
ie.css? Estos archivos nos servirán para los comentarios condicionales de Internet Explorer.
Si nunca has leído o escuchado sobre los comentarios condicionales para IE, entonces es conveniente explicar lo siguiente:
Si creas un Sitio mientras realizas pruebas en un navegador incorrecto, crearás código que depende de una representación incorrecta. Es como si construyeras una casa sobre cimientos de arena. Cuando empieces a realizar pruebas en otros navegadores o plataformas, los errores serán más que evidentes. Lo recomendable es que comiences con un navegador moderno con una elevada compatibilidad con los estándares.
Este enfoque nos permitirá ahorrar tiempo y recursos durante el diseño de un Sitio. Si comienzas a crear sobre un navegador defectuoso, dedicarás más tiempo a depurar cuando tengas que realizar pruebas en otros navegadores más compatibles con los estándares. Hasta la fecha, los navegadores recomendados son: Firefox, Opera o Safari.
Comprobarás que en la lista no se incluye Internet Explorer dado que se considera inferior a otros navegadores modernos, en lo que respecta a compatibilidad con estándares como CSS y XHTML.
Debido a que Internet Explorer interpreta de forma no estándar las hojas de estilo (lo cual te dará varios quebraderos de cabeza), entonces tenemos que recurrir a algún tipo de solución como los parches (hacks) o los comentarios condicionales de Internet Explorer (una manera sencilla y práctica de corregir los errores de IE).
La forma de aplicar los comentarios condicionales se puede apreciar en el siguiente gráfico:
El nuevo código agregado en forma de comentario sólo será interpretando por IE.
<!--[if lt IE 7]>
[Esto se mostrará a versiones anteriores a IE 7. "lt" = menor que]
<![endif]-->
<!--[if lte IE 7]>[Esto se mostrará a IE 7 y versiones anteriores. "lte" = menor que o igual]<![endif]-->Bueno, no quiero ahondar mucho al respecto porque no es el objetivo de esta entrada, sin embargo te sugiero que leas el artículo comentarios condicionales para IE de Diseñorama, donde se explica claramente sobre este tema.
Hasta aquí, ya tendríamos organizado nuestros archivos de hojas de estilo de manera lógica, además de tener la posibilidad de conseguir un código limpio y de fácil mantenimiento. Ahora, lo que nos quedaría es crear las declaraciones CSS que establecerán la apariencia de nuestra página.
Entonces, ¡¡manos a la obra!!
Analizando nuestro diseño
Aquí tenemos el diseño que usaremos como ejemplo. El problema ahora es convertirlo a código manteniendo el estilo y la estructura. (Ver el artículo
De boceto a HTML+CSS+JavaScript (parte 1) para ver como generar el código HTML de este diseño)
Lo primero que podemos hacer es volver a nuestro papel impreso con el diseño y con lápiz en mano empezamos a analizar cada detalle de el layout, escribiendo lo que crees que funcionaría para cada detalle.
Apunta lo siguiente:
- Anchos
- Detalles sobre la maquetación de la página
- Detalles del header, sidebar, main, footer, etc.
- Tipo y tamaño de letra.
- Colores y estilos de titulares.
Con estos apuntes tendremos una idea de cómo iniciar nuestro código CSS.
