La idea de este post es dar algunas directivas que debemos seguir para maquetar y luego este código sea entendido por la persona que luego tenga que editarlo o incluso por nosotros mismos que luego de unos años vemos el código y no le encontramos ni pies ni cabeza. No olvidemos que si trabajamos como freelancers es importantísimo que nuestro cliente pueda comprender el código para eso hay que cumplir algunos estándares básicos.

Utiliza nombres estandard

Si eres freelancer es posible que trabajes para empresas de otros países e incluso de algunos de habla inglesa por lo que se requiere que todos puedan saber de que sección estás hablando, aunque no existen nombres únicos standard si hay unos muy comunes

• Wrapper: Es el contenedor principal de la página que define el ancho y centra la página
• Header: El encabezado donde suele ir el logo y el menu superior
• Menu: Aunque algunos suelen usar para este el ID navbar
• Main: El div que contiene el cuerpo de la página y que se suele dividir en 2 o 3 columnas
• Sidebar: La columna del costado, en WordPress la que sueele contener los widgets
• ColumnLeft, ColumnRight, ColumnCenter: dependiendo de cuantas columnas tengas puedes suar esos nombres o column1, column2…
• Footer: El pie de página donde suele ir el copyright y la información de contacto

Dividir la hoja de estilos

No es buena idea tener una sola hoja de estilos con 4000 lineas de código, es mejor separarla de acuerdo a las dimensiones del proyecto. Lo más básico sería contar con 2 hojas de estilo:

• reset.css  con las opciones de reseteo muy utiles para compatibilidad con múltiples buscadores, pueden bajar la más popular AQUI
• style.css con las propiedades de todo el sitio

Para un proyecto más grande sin embargo sería bueno contar con otra hojas de estilo como:

• forms.css con las propiedades del formulario
• fonts.css con las definciones de las fuentes
• colorbox.css, sexybox.css, etc hojas de estilo de cada javascript

Organizar la hoja de estilos

Es importante separar las secciones y comentarlas, lo usual es empezar con las etiquetas generales html, body, luego los titulos h1, h2, h3, las clases de los colores .rojo, .azul, etc y luego cada sección del sitio header, menu, sidebar, footer, etc. Quedando algo así nuestro código CSS

Maqueta y ordena los elementos por su ubicación

Esto es más fácil explicar con un ejemplo supongamos que estamos maquetando una lista de productos, tendriamos un div contenedor con un ID y varios divs internos identificados por una clase, quedando algo así:

Dentro de la hoja de estilos también se debe organizar así quedando algo como:

Indica que div estás cerrando

Esto es importantísimo cuando se trabaja con web modulares donde al estar separadas por partes es un poco complicado saber donde acaba cada DIV, por lo que es mejor indicar donde se cierran los principales DIV

Las versiones antiguas de Internet Explorer siempre terminan dándome dolores de cabeza, en este caso tenía un menu usando un UL con algunos LI flotando en su interior algo como:

El lío era que la última opción se veía bien en todos los navegadores excepto Internet Explorer que se producía un salto de línea quedando “mi ultima opción” convertido en 2 líneas, luego de buscar al fin encontré la solución bastaba agregar una sola propiedad white-space: nowrap; hay otras soluciones que exigen se ponga un ancho fijo a ese elemento pero en ciertos diseños esa no es una solución.

Este es un pequeño tip para usuarios de Firefox, usualmente en Internet Explorer o en otros navegadores cuando no se encuentra alguna imagen (Broken Images) se muestra un rectángulo y un ícono para indicarlo pero Firefox no muestra nada y si estamos desarrollando un sitio no nos enteramos que faltan cosas.

La solución es muy simple basta agregar las siguientes líneas a nuestra hoja de estilos:

De esta forma se comportará similar a otros navegadores mostrando un pequeño ícono para indicarnos que falta alguna imagen

Este sitio les parecerá muy interesante a todos aquellos que buscan la estructura para empezar a construir una página web, genera automaticamente las carpetas, encabezados y llamadas CSS necesarias.

• Podemos elegir el tipo de documentos ya sea XHTML strict, transitional o incluso el ahora muy de moda HTML5
• Tenemos para elegir entre varios frameworks como mi favorito jquery, dojo, prototype, mootools entre otros.
• No genera un código CSS básico con un encabezado y el cuerpo

Como punto negativo es que si usamos HTML5 hubiera esperado que usara las nuevas etiquetas pero no, el sitio mantuvo los div más propios del XHTML

Pueden probarlo en http://instantcsscode.com/

Esta de moda el Facebook y claro también lo está hacer formularios, íconos, efectos a ese estilo. En este tutorial te explican detalladamente como crear tu propio formulario de registro a ese estilo usando XHTML y CSS.

El resultado queda como esta imagen:

Pueden el tutorial AQUI y la demo AQUI