Antes de empezar quisiera invitarlos a que analizen si vale la pena pensar en sitios optimizados para buscadores (SEO) utilizando CSS (hojas de estilo) para darle apariencia a su sitio web.
Tomemos como ejemplo mi propio sitio personal:
oscarblanco.netAbran una ventana adicional, y en google.com prueben estas combinaciones de palabras clave:
"3d design illustration"
"illustration costa rica"
"illustrator costa rica"
"freelance illustrator costa rica"
"3d character design"
"3d costa rica"
"3d design costa rica"
"caricature portrait" salgo mejor en busqueda de imagenes que texto, pero igual no salgo tan mal
"corporate image design"
"promotional design"
"print press design"
"traditional illustration"
"object 3d renders"
"water splash photography"
"digital illustration costa rica"
"landscape photo costa rica"
"3d animation costa rica" tomemos en cuenta que yo no me dedico a eso y tengo pocos ejemplos de las cosas tan sencillas que he hecho.
"3d multimedia cd"
"multimedia costa rica"
"flash design costa rica" jajajaja y yo que ni action script sé!
No es por hecharme flores... pero si, me estoy hechando flores. Vieron el ranqueo de oscarblanco.net? En algunos casos está bastante bien! en otros decente :)
Ahora si, a la segunda parte del tutorial. Como resultado final de este ejercicio tendremos esta página:
RESULTADO FINAL DEL EJERCICIOHechenle un vistazo desnudando el html de su hoja de estilos usando el sistema que les mostré en el tutorial anterior.
Verán un contenido "chorreado", constituido de h's, listas y texto en párrafos.
Vean el source de la página también.
Veran un source limpio y sencillo.
Bien, empezemos.
Lo primero que necesitan es el "kit" para trabajar este sitio.
Bajenlo
AQUIEn el kit encontraran un html llamado
"menu.htm" una hoja de estilos llamada
"principal.css" y una carpeta llamada
"images" que contiene todas las imagenes usadas para este tutorial.
Descompriman en alguna carpeta y estamos listos para empezar a configurar el css. Verán que "principal.css" en este momento solo contiene las clases y ID's ya establecidas pero sin parámetros.
Entonces el html, que ya tiene adjuntada esa hoja de estilos en realidad no despliega nadamas que el texto desnudo. Tal y como lo va a leer cualquier buscador como google, altavista o yahoo.
De ahora en adelante no vamos a tocar mas que la hoja de estilos, el html ya está con sus objetos definidos y las imágenes estan recortadas y a tamaño. Sin embargo tambien los invito a que hechen un vistazo a la carpeta de imágenes. Contiene dos imágenes verticales delgadas, que se repiten horizontalmente para fondos. una imagen grande que es meramente decorativa, un logo y un par de imágenes para el area de menú.
Viendo el source del htm en detalle observaran que existe una estructura de jerarquias, igual que encontrariamos en una de tablas con sus td's y tr's. Tenemos un DIV principal que se llama "alrededor", ese es solo un contenedor que nos ayuda a flotar todo el contenido centrado, por el tipo de diseño que escogí, pero casi siempre es bueno trabajar con contenedores principales y sus respectivos nested div's, o div's encajados. En realidad este div llamado "alrededor" fué un agregado extra que metí a última hora tan solo para poder acomodar la foto grande que flota a la derecha del diseño y que uds pueden ver se encuentra al puro final del html, inclusive despues de un texto que visualmente se encuentra luego de ella. Esto es simplemente porque siempre debemos buscar que el texto/contenido de nuestro html, sobre todo aquello es está cargado de palabras clave se encuentre antes que cualquier imagen, flash u otro elemento gráfico que cumple mera función decorativa y no ayuda a nuestro sitio con su SEO (ya antes expliqué que es esto).
Como decia, el DIV "alrededor" fué algo agregado a última hora por el capricho estético de poner esa imagen. El DIV llamado "principal" era el contenedor principal, y el cual tenia todas las características para determinar el área principal de información. De una vez aclaro la diferencia entre un ID y una Clase:
ID's son usados más que todo para elementos únicos en la página, esto ayuda mucho si lo combinamos con programación, ya que los ID"s son utilizados por los programadores precisamente porque son nombres únicos y así se puede dar comportamiento a un objeto específico (como por ej.
variables). Las clases en cambio son utilizadas más para elementos que se repiten varias veces en una página, por ejemplo, una clase para todos los anchors (links) de una página o sección determinada.
Si ya estan usando TopStyle (lo mencioné en la parte 1, y donde bajarlo) para abrir la hoja de estilos notaran en la lista de clases a la izquierda que existen tres categorias principales, clases, ID's y otra llamada elementos. Ahi en este caso solo estan "body" y un "*". Elementos son componentes o tags que por si solos ya existen como parte de la marquetación básica de un html. Ahí también caerian los h's, pero como notaran, los h's que he usado en este caso, estan subordinados a ID's.
A qué me refiero con subordinados?. Una clase, ID o elemento, pueden tener subclases subordinadas. Esta es una de las caracteristicas que da tanta flexibilidad a la marquetación por hojas de estilos. Tambien se pueden tener varias clases asignadas a un elemento (yo las llamo "clases hermanas"), por ejemplo hacer una clase que determina tamaño, ubicacion, tipo de fuente y otra que solo modifica color. Si cambio la que solo modifica color por otra con las mismas caracteristicas, nadamas que asignando un color diferente, no tengo que crear toda una clase que con cada uno de los parametros de despliegue que se repetiria para cada elemento que la utilize. Serian mas como clases modulares, que armo y desarmo a placer.
Un ejemplo en el html seria:
<div class="menu big">HOME</div><div class="menu small">ABOUT US</div>
Como ven, varia la segunda clase "hermana", y a esa le asignariamos talvez solo que cambie el tamaño de la letra. La que se llama "menu" tendria todas las demas caracteristicas.
Mi sistema de preferencia viene siendo parecido, solo que se logra por subordinacion. O sea, un contenedor madre tiene la clase (o ID) que determina las caracteristicas generales) y un contenedor anidado (subordinado) tiene a su vez una clase que por su posicion tambien es subordinada y solo maneja caracteristicas puntuales. Veamos un ejemplo de clases subordinadas en html:
<div ID="principal">
<div class="rojo">
HOME
</div>
<div class="rojo">
ABOUT US
</div>
<ul>
<li><a href="http://www.randomsite.com/">ITEM 1</a></li>
<li><a href="http://www.somethingelse.com/">ITEM 2</a></li>
<li><a href="http://www.whatever.com/">ITEM 3</a></li>
</ul>
</div>
En este caso las clases "rojo" y "azul" estarian subordinadas a "principal", asi mismo elementos propios de html como las listas no-ordenadas "ul", los elementos lista de estas listas "li" e incluso los anchors (links) tambien funcionan como clases subordinadas.
Entonces en una hoja de estilos puedo incluso darle caracteristicas diferentes a estas clases si estan subordinadas o independientes de una clase o ID superior.
O sea, por ejemplo, puedo decirle a la hoja de estilos que cuando un elemento lista "li" este debajo de "principal" tenga unas caracteristicas, pero cuando no es subordinada de este ID, que tenga otras. Igualmente lo puedo hacer con anchors (liks).
Por ejemplo uds veran en la página que hay varios estilos de "hover" o sea, comportamiento de un hipervínculo al tener el puntero del ratón encima.
Si se fijan en la hoja de estilo (principal.css), veran que hay varios "a" y "a:hover" subordinados a ID's (los estilos que empiezan con un simbolo de "#") en este caso.
Verán que el ID "arriba" o el ID "medio" se repiten varias veces con subclases a su lado: ul's li's p's e inclusive veran hasta un "a" "a:hover" y "strong" subordinados a su vez a una subclase.
Debo mencionar que una ventaja que yo veo sobre usar clases hermanas (las que
O sea, hay un "strong" "subordinado" a un p del ID "medio".
A ver a ver.. respiren, cuenten a 3 y vuelvan a leer hasta acá otra vez jeje. Y si mi forma de explicar es muy confusa espero perdonen, pero trato de irme mucho al detalle y esto tiene muchos detalles.
Ok, listos? seguimos...
Es importante tener mucho cuidado a la hora de trabajar estilos, en la medida de lo posible, eviten las mayúsculas, revisen siempre que los nombres tengan al principio su identificador si lo necesitan: "#" y "." para ID's y clases respectivamente.
Nunca olviden el punto y coma al final de cada parámetro.
Nunca olviden cerrar llaves para cada estilo.
Si es necesario comentar alguna linea o varias lineas abran el comentario con: /* y cierrenlo con */
Comentar es una buena forma de desactivar un parámetro sin tener que borrarlo.
A veces por un pequeño descuido podemos pasar horas golpeandonos la cabeza porque algo no funciona cuando deberia hacerlo... recuerden, creando hojas de estilo y teniendo un adecuado desarrollo de html's más limpios (o sea, no generados automáticamente por Image Ready o algo parecido) nos parecemos más al proceso que siguen los programadores. Por consiguiente, debemos ser mas cuidadosos y ordenados, para evitar "pulgas" en nuestro código.
Otra cosa que hay que tratar de hacer es evitar redundancias en nuestras hojas de estilo, o repeticiones innecesarias de parámetros en varias clases aplicados a DIV's "hermanos", pues cada linea de parametros en nuestra hojas de estilos es una línea más de código que debe leer el buscador cuando indexa una página. Las hojas de estilos tienen la ventaja de centralizar despliegue de imágenes, para evitar que cada vez que se abre una página el explorador tenga que volver a cargarlas desde el html, sinembargo, las hojas de estilo tambien deben ser optimizadas, ya que muchas lineas de codigo hacen un documento lento de leer y pesado.
Una buena forma de evitar esto es tratar de descomponer el despliegue total en jerarquias y grupos. O sea, van a existir DIV's "padres" y estos tendran sus propios DIV's "hijos". Esto lo que significa es que tendremos DIV's contenidos dentro de otros DIV's (como ya vimos en el html), y los DIV's que a nivel de jerarquia se encuentren al mismo nivel, seran "hermanos". Hablo en este momento de DIV's pero en realidad a lo que me refiero es contenedores, los cuales tambien pueden ser SPAN's, H's, anchors, p's, li's, etc.
Una vez que hemos determinado esta jerarquización, entonces empezamos a analizar qué parámetros pueden heredarse de "padres" a "hijos".
Por ejemplo, en el BODY, que podriamos considerar el elemento "padre" para todos los contenedores de nuestra página, podemos colocar parámetros que vamos a heredar en todo el sitio, como por ej. la familia de fuentes, el tamaño default que queremos usar para fuentes, el alineamiento de texto, el color de texto, etc.
Hay parámetros que no se pueden heredar y otros que si. Por ejemplo, padding y margin, no son heredables, pero existe un "hack" para tambien poder generalizar este tipo de parámetros.
Creamos un estilo llamado "*". Al usar un asterisco como nombre para un estilo, el explorador va a entender que por defecto a CUALQUIER estilo los parámetros que determinemos en la clase "asterisco" serán aplicados como suyos, esto se vuelve nulo al poner un parámetro específico en ese estilo único.
Veamos:
* {
margin: 0;
padding: 0;
}
.vaca {
color: #ff00ff;
margin: 2px 3px 1px 2px;
}
En este caso, "asterisco" esta diciendo que todos los estilos por defecto tendran un margen de cero y un alcochonamiento de cero (esto es una buena práctica por cierto), pero a su vez, "vaca" como estilo único que es, aparte de determinar un color único para textos dentro del contenedor que tengan la clase "vaca" aplicada, tambien tiene características únicas de márgenes, sinembargo, como no ha determinado sus parámetros de padding, va a tener por defecto los que ha pre-determinado "asterisco" (margin = espacio alrededor de un contenedor, padding = espacio marginal de contenido a los bordes de su contenedor).
Otra cosa que aprovecho para mencionar, relacionado con optimización de estilos, es que en la medida de lo posible se use el "shorthand" (abreviacion de parámetros en una sola línea).
Veamos:
.vaca {
margin-top: 2px;
margin-right: 4px;
margin-bottom: 3px;
margin-left: 5px;
border-width: 2px;
border-color: #BC6A47;
border-style: solid;
}
podría optimizarse así:
.vaca {
margin: 2px 4px 3px 5px;
border: 2px #BC6A47 solid;
}
Al usar shorthand en el parámetro margin por ejemplo es importante saber que el orden en que los pongamos es escencial, el primero es el margen superior, le sigue el derecho, luego el de abajo y por ultimo el izquierdo, o sea, empezando del de arriba se sigue a favor de relog, así:
En el caso del borde, el orden en que determinemos grosor, color y estilo no es importante. Si quisieramos un borde con grosores varibles, entonces tendriamos que hacer un parámetro por aparte para "border-width" y podemos usar un shorthand igual al de "margin" siguiendo las manecillas del relog, lo mismo va para el "padding".
Para más información de shorthand en estilos, les invito a hacer un googleazo.
Bien. Empezemos a llenar la hoja de estilos. A estilo asterisco, vamos a ponerle padding y margin de cero. Así:
* {
margin: 0;
padding: 0;
}
Por cierto, "0" equivale a cero de cualquier tipo de medida, sean pixels u otro, por eso un shorthand se puede ver así: margin: 1px 0 1px 0;
Inclusive, si luego del primer valor todos son iguales, digamos, todos de cero, entoces se podría ver así: margin: 3px 0; Aquí estamos diciendo que los márgenes de derecha, abajo e izquierda todos tienen un valor de cero.
Bien, como ya vimos antes, al poner estos valores para margin y padding en "asterisco" hemos pre-determinado que todos los estilos tendran padding y margin de cero por defecto.
Ok ok... un respiro, cuenten a 3 y vuelvan a leer lo que tengan que re-leer. Los espero.
Listos? Ok, seguimos.
En orden de jerarquía, vamos al estilo para el BODY.
body {
background-color: #AE491D;
background-image: url(images/fondo-principal.jpg);
background-position: top;
background-repeat: repeat-x;
color: #646464;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
height: 100%;
text-align: center;
}
Veamos, traduciendo dice esto:
color de fondo: #AE491D.
Imagen de fondo: fondo-principal.jpg (incluyendo su "path").
La posicion de la imagen de fondo es "arriba".
La imagen de fondo se repite en "x" ("x" y "y", ejes.. etc, eso ya lo deben saber).
El color usado por el texto es: #646464;
La familia de tipografias es: Arial, con equivalencias a Helvetica y es san-serif (tambien deben saberlo).
El tamaño de las tipos por defecto es de 12px;
El alto de este estilo es de 100% del área visible del buscador.
El alineamiento por defecto del texto será centrado (esto incluye objetos flotantes como DIV's).
Bien, asignen este estilo a su BODY, guarden y ahora refresquen la página en su buscador. Ya va tomando forma, aunque hay muchas cosas tiradas por todo lado
Seguimos con el DIV padre de todos. El que tiene el ID llamado "alrededor".
Este es el que nos va a permitir que el rectángulo de este diseño de página flote siempre al centro del área visible de nuestro buscador. Ah, un detalle importante. Cross-browser... han escuchado esa fatídica palabra compuesta antes? Significa, mi página será vista por la mayor cantida posible de buscadores (Internet Explorer, Firefox, Netscape, etc) y plataformas y los usuarios veran exactamente lo mismo o al menos casi la misma cosa. Para garantizarse esto, es bueno que se acostumbre a trabajar con el firefox como buscador por defecto, y el internet explorer como secundario (esto es solo un consejo a nivel personal).
Existen "hacks" para solventar esto, pero para eso tambien los invito a usar google
Bien, veamos el estilo "alrededor":
#alrededor {
height: 545px;
margin: 10px auto;
width: 720px;
float: left;
}
Traducción:
Altura del contenedor es de 545 pixels.
Márgenes alrededor del contenedor: 10pixels arriba, y el resto automático. Aquí tenemos un "hack" pero es para el firefox en este caso, si no ponemos el auto como segundo valor, nuestro div no le va a dar la gana de flotar centrado.
Tiene un ancho de 720 pixels.
Y por último este contendor va a flotar a la izquierda. O sea, si tuviesemos por ejemplo 10 contenedores de 100 pixels de ancho cada uno, todos con float:left, todos se acomodarian lado a lado flotando hacia la izquierda. (imaginense que inclinan el monitor hacia la izquierda y todos esos divs caen en esa direccion lado a lado).
Ahora vamos con el ID "principal"
#principal {
background-image: url(images/fondo-areachica.jpg);
background-position: top;
background-repeat: repeat-x;
border: 1px #FFFFFF solid;
height: 545px;
width: 720px;
}
Todos los parámetros acá ya los hemos cubierto antes, solo cambian medidas y colores...
Sigamos para abajo en la jerarquía, existen tres divs hermanos: Arriba, Medio y Abajo. Los he nombrado así debido a que como cualquiera que había trabajado en su obscuro pasado con frames, me ha quedado esa costumbre de nombrar así para dividir páginas... aunque pensandolo bien, es lógico ese uso de nombres no les parece?
Veamos "arriba" en el html, este DIV contiene un h1, un h2, un h3 y una lista ordenada (ul, li's). Aquí tenemos oportunidad de heredar si fuera el caso de el div contenedor a todos sus sub-elementos.
En este ejemplo sinembargo, no lo hice.
Observemos "arriba" con todas sus subclases de una vez (tomense su tiempo):
#arriba h1 {
color: #A80506;
float: left;
font-size: 34px;
font-weight: normal;
height: 29px;
left: 37px;
letter-spacing: -3px;
line-height: 26px;
position: relative;
text-align: left;
text-transform: uppercase;
top: 3px;
width: 340px;
}
#arriba h1 strong {
color: #A30468;
}
#arriba h2 {
background-image: url(images/logotipo.jpg);
color: #494846;
float: left;
font-size: 4px;
height: 41px;
left: 74px;
position: relative;
top: 5px;
width: 265px;
}
#arriba h3 {
clear: both;
color: #807C7D;
float: left;
font-size: 22px;
font-weight: normal;
height: 22px;
left: 37px;
letter-spacing: 6px;
line-height: 18px;
margin: -12px 0;
position: relative;
text-align: left;
width: 340px;
}
#arriba li {
display: block;
float: left;
height: 25px;
width: 144px;
}
#arriba li a{
color: #403F3D;
display: block;
float: left;
height: 27px;
letter-spacing: 2px;
padding: 6px 0;
text-decoration: none;
width: 144px;
}
#arriba li a:hover {
background-image: url(images/menu-on.jpg);
background-repeat: repeat-x;
color: #FFFFFF;
display: block;
}
#arriba ul{
background-image: url(images/menu-off.jpg);
background-repeat: repeat-x;
clear: both;
display: block;
float: left;
height: 28px;
position: relative;
top: 12px;
width: 720px;
}
Traduzcamos los parámetros que aún no hemos visto.
En #arriba h1 vera aparte de cosas obvias como tamaño de letra y estilo de letra (normal), un parámetro llamado "position" (position: relative;). Este parámetro permite que el contenedor que ya le dimos características de flotabilidad (float:left) además pueda posicionarse en un lugar específico. Posición relativa significa que estará relativa a los margenes superior e izquierdo de su contenedor padre. O sea, h1 se posicionará relativo con las medidas de "left" y "top" (left: 37px; top: 3px;) definiendo a cuanto se encuentra h1 de los márgenes superior y izquierdo de "arriba".
Otros parámetros nuevos que tenemos acá son "text-transform: uppercase;" que en este caso convierten todo el texto en mayúsculas y "letter-spacing: -3px;" que en este caso aplica una distancia de -3 pixels entre cada letra.(por eso se ven todas pegaditas).
Podemos ver que al STRONG del h1 (el estilo que sigue) le aplicamos otro color, por eso la palabra "titular" tiene otro tono. Fijense en el html, ni h1 ni strong tienen clases ni ID's aplicados, esto es porque sus propios nombres de elemento son subclases del ID llamado "arriba"
Lo mismo sucede con los otros h's y con la lista ordenada.
Pueden bajar ya la hoja de estilos llena de AQUI.
Otros parámetros nuevos que pueden buscar ahí son "display" y "text-decoration".
El primero lo uso para cuando quiero que un link se trate como un objeto que puede tener alto y ancho.
Por ejemplo los links dentro de los li's de la lista ordenada (fijense). "text-decoration: none;" es la forma de eliminar la rayita abajo para un link.
Creo que con la información que les he suministrado pueden hacer ingenieria inversa de la página ejemplo y su respectiva hoja de estilos. De hecho creo que es la mejor forma que aprendan como funciona todo esto.
En todo caso posteen preguntas aquí, y de esa forma se volverá más completo el tutorial.
Espero que todo esto les sirva.
