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
[cc lang=»css» ]
/* Default fonts and colors
========================================== */
body {
color: #375362;
font-family: «Verdana», «Lucida Fax», «Lucida Grande», «Lucida Sans Unicode», Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
color: #666;
font-family: «Century Schoolbook», «Century», Georgia, «Times New Roman», serif;
font-weight: normal;
}
[/cc]
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í:
[cc lang=»html»]
[/cc]
Dentro de la hoja de estilos también se debe organizar así quedando algo como:
[cc lang=»css»]
#productos {}
#productos .item {}
#productos .pic {}
#productos h3.prodTitle {}
#productos .description {}
[/cc]
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
[cc lang=»html»]
[/cc]
