Como prometí, me dispongo a traducir el fantástico tutorial Colored Boxes, en el que se explica como construir una plantilla CSS paso a paso.

Partiendo de una serie de cajas de colores que vamos colocando, y probando en varios navegadores, se verá el proceso completo de creación de una plantilla CSS en 11 pasos.

Empezamos con una prototipo gráfico y lo convertiremos en una página html operativa. La meta no es fijarse en este ejemplo concreto sino en el proceso completo utilizado.

• Prototipo de ejemplo

Algunas guías antes de empezar:

Haz un paso cada vez y comprueba cada paso en varios navegadores

Es muy fácil empezar a construir una plantilla y meterse en problemas a mitad de la tarea. Para evitarlo, trata de construir tu plantilla en pequeños pasos y comprueba cada paso en varios navegadores. Con esto conseguirás ver exactamente como progresa la plantilla y no habrá necesidad de volver atrás sobre tus pasos si te metes en problemas.

Construye para los navegadores actuales y luego trabaja hacia atrás

Es mejor empezar construyendo para navegadores que cumplen los estándares y mas tarde hacer repasos, tales como ocultar (via @import) para navegadores mas antiguos.

Mientras construyes y compruebas utiliza CSS en la cabecera del documento

Es mucho mas fácil empezar a construir tus plantillas con el CSS en la cabecera del documento – es mas rápido, y evita problemas de caché. Cuando hayas terminado del todo la plantilla, se puede quitar el CSS y situarlo en hojas de estilo externas.

Valida tu código HTML y CSS

Valida frecuentemente tu HTML y CSS. Muchos problemas en plantillas pueden solucionarse con una rápida comprobación de validación.

Para saber más:

• Prepara tu sitio para iPhone
• Manual CSS – ¡Terminaste!
• Manual CSS – Paso 9 > Sacando el CSS
• Manual CSS – Paso 8 > Aplicando estilo en los contenedores
• Manual CSS – Paso 7 > Colocando el contenido