Miguel Manchego » CSS

Criterios Básicos para maquetar una página web

admin — Thu, 02 Jun 2011 13:50:18 +0000

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

1
2
3
4
5
6
7
8
9
10
11

/* 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;
}

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í:

1
2
3
4
5
6
7
8

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

1
2
3
4
5

#productos {}
#productos .item {}
#productos .pic {}
#productos h3.prodTitle {}
#productos .description {}

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

1
2
3
4
5
6
7
8
9

<div id="header">
<div id="menu">
<ul>
<li>Opcion 1</li>
<li>Opcion 2</li>
<li>Opcion 3</li>
</ul>
</div>
</div>

Posts Similares:

CSS: Bug salto de linea internet explorer

admin — Wed, 16 Mar 2011 13:38:09 +0000

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:

1
2
3
4
5

<ul id="mimenu">
<li>opcion1</li>
<li>opcion2</li>
<li>mi ultima opcion</li>
</ul>

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.

Posts Similares:

Firefox: Marcar imagenes no encontradas

admin — Tue, 28 Sep 2010 16:17:41 +0000

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:

1
2
3
4
5

img:-moz-broken{
-moz-force-broken-image-icon:1;
width:24px;
height:24px;
}

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

Posts Similares:

Firebug: videotutorial modificando html css

admin — Wed, 07 Jul 2010 23:50:50 +0000

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.

Posts Similares:

Multiples bordes con CSS

admin — Wed, 30 Jun 2010 13:39:31 +0000

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:

1	<div id="box"></div>

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

La hoja de estilos

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

#box {
background: #f4f4f4;
border: 1px solid #bbbbbb;
width: 200px;
height: 200px;
margin: 60px auto;
position: relative;
}

#box:before {
border: 1px solid white;
content: '';
width: 198px;
height: 198px;
position: absolute;
}

#box:after {
content: '';
position: absolute;
width: 196px;
height: 196px;
border: 1px solid #bbbbbb;
left: 1px; top: 1px;
}

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