Criterios Básicos para maquetar una página web

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

CSS: Bug salto de linea internet explorer

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.

Firefox: Marcar imagenes no encontradas

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

Firebug: videotutorial modificando html css

Suelo hablar bastante de firebug, y que me parece una de las mejores herramientas para los diseñadores de páginas web, anteriormente hice una breve guia de como funciona, pero me encontré con un videotutorial muy interesante que explica como podemos usarlo para modificar los estilos de nuestra página web, teniendo la vista previa de los cambios en Firebug y luego se graban en Dreamweaver o nuestro editor favorito.

Multiples bordes con CSS

Este es un truco interesante que me encontré AQUI , como sabemos usando la propiedad border se puede crear un borde simple pero si queremos más de un borde hasta donde sabía era imposible, salvo colocando un div dentro de otro pero ahora me doy cuenta que no hace falta.

El código HTML

Vamos a probar con un sólo DIV, el código sería:

Hasta ahí nada de raro, ahora veamos el código CSS

La hoja de estilos

El truco está en el uso de las pseudo-clases : before y after, al darles formato podemos aplicar un borde adicional, de hecho podríamos ponerle lo que deseemos para lograr un efecto más elaborado.

El demo pueden verlo AQUI