Tutorial maquetacion de un sitio web (css) Parte 2.

OK, la segunda parte...

Acá vamos a hacer esta página: <a href="http://www.oscarblanco.net/tutorialcss/menu.htm" target="_blank">http://www.oscarblanco.net/tutorialcss/menu.htm</a>

Hechenle un vistazo desnudando el html de su hoja de estilos usando el "botón" que les mostré como crear en su buscador en la primera parte de este tutorial.

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 muy limpio y sencillo.

Bien, empezemos, lo primero es que obtengan el "kit" para trabajar este sitio.

Bajenlo <a href="http://www.oscarblanco.net/tutorialcss/tutorialcss.zip" target="_blank">AQUI</a>

En 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 <i>nested div's</i>, 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 mucho en este medio precisamente porque son nombres únicos y así se puede dar comportamiento a un objeto específico. 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 superditados a ID's.

Qué es superditado. Una clase, ID o elemento, pueden tener subclases superditadas. Esta es una de las caracteristicas que da tanta flexibilidad a la marquetación por hojas de estilos.

Por ejemplo uds veran en la <a href="http://www.oscarblanco.net/tutorialcss/menu.htm" target="_blank">página</a> 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, veran que hay varios "a" y "a:hover" superditados 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" superditados a su vez a una subclase.

O sea, hay un "strong" "superditado" 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 <i>shorthand</i> 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í:

<img src="http://www.oscarblanco.net/shorthand.jpg" border="0" alt="Imagen IPB" />

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 <i>shorthand</i> igual al de "margin" siguiendo las manecillas del relog, lo mismo va para el "padding".

Para más información de <i>shorthand</i> 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. <b>Cross-browser</b>... 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 <a href="http://www.oscarblanco.net/tutorialcss/principal.css" target="_blank">AQUI</a>.

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.

 

Excelente va lindo esto muchas gracias por el aporte !!!

 

<!--quoteo(post=89463:date=Mar 8 2006, 03:22 PM:name=elquique)--><div class='quotetop'>CITA(elquique @ Mar 8 2006, 03:22 PM) [snapback]89463[/snapback]</div><div class='quotemain'><!--quotec-->
Excelente va lindo esto muchas gracias por el aporte !!!
<!--QuoteEnd--></div><!--QuoteEEnd-->
Gracias... uf, fue cansado todo eso

 

Recibe un gran aplauso de mi parte!!! Excelente aporte!!

 

<!--quoteo(post=89469:date=Mar 8 2006, 03:41 PM:name=kitsch)--><div class='quotetop'>CITA(kitsch @ Mar 8 2006, 03:41 PM) [snapback]89469[/snapback]</div><div class='quotemain'><!--quotec-->
Recibe un gran aplauso de mi parte!!! Excelente aporte!!
<!--QuoteEnd--></div><!--QuoteEEnd-->
Gracias kitsch.

Saben? me encantaria ver que algunos audaces aventureros B) tomasen el html tal cual y solo cambiaran la "piel" del css e hicieran un diseño nuevo, tal y como hacen en camaleoncss y csszengarden. Asi aprovechan y practican.

 

Yo no entiendo mucho de esto pero se nota que le has puesto empeño al tutorial, muchas gracias por compartirlo!!

 

Pues por ahora estoy ocupadon pero en una chanse le doy otro enfoque a este HTML

 

muchas gracias por el tutorial, esta muy completo!!!
yo soy de las que usan tablas y habiendo visto este tutorial me he animado a intentar hacerlas con css y divs .
he estado buscando mas informacion sobre el tema y he mirado algunas paginas hechas con css y cual ha sido mi sorpresa cuando me he encontrado con errores como este.
<a href="http://imageshack.us" target="_blank"><img src="http://img231.imageshack.us/img231/2535/diseograma2ui.png" border="0" alt="Imagen IPB" /></a>
y no es la primera web en css que me encuentro con estos fallos de diseño.
al principio cuando entras en la pagina todo va bien pero cuando le das al boton de ir hacia atras del navegador es cuando sucede lo que acabo de mostrar.
yo personalmente cuando entro en una pagina web y veo este tipo de errores encuentro que pierde profesionalidad y confianza.
vosotros que opinais?

la pagina en cuestion es la siguiente:

<a href="http://www.disenorama.com/" target="_blank">http://www.disenorama.com/</a>

 

Pues si que no es profesional, aunque a todos se nos puede escapar algo , es extraño de esa pagina ya que cuando buscas sobre CSS figura entre los ejemplos de buen uso en varios lugares.
Igualmente entre naveque un rato y nada no pude reproducir el mismo error a mi me funciona bien, veremos si luego intento y a alguien mas le pasa.
Aunque yo soy de los que no uso tampoco el boton retroceder cuando navego jaja, con esto de las solpaas de FireFox casi que lo he suplantado y muuy de vez en cuando uso el retroceso.

 

Errores de usabilidad y respuesta a navegadores varios se podran encontrar por todo lado, con todo tipo de montajes, php, tablas, css
Como dice Quique, a todos se nos puede ir una.
Y en cuestiones de consistencia atraves de todos los navegadores es una eterna lucha, aun para los expertos

 

Si sobre todo que hay Navegadores que no cumplen con aceptar los standard como por ejemplo uno de siglas IE

 

Muchas gracias por etl tutorial!

Dos cosas:

en las especificaciones del ID "alrededor" sobra el parametro float.
Y me parece no explicas que hace la propiedad Clear.

Por lo demas: FELICIDADES! XDD

 

si por lo regular suele pasar que en varios navegadores como Ie que hace lo que quiere y no entra en las normas estandares como firefox, nescape o safari

 

Muy Buebo el tutorial, gracias.Pero Tuve un problema haciendolo y me parece es porque escribi diferente el orden de las lineas en el css(directamente de dreamweaver y no Totstyle)por que cuando lo pegue de frente de tu ejemplo ya terminado se corrigio. es eso posible?Que el orden influya...??

 

onde se corrigio?

 

El Problema fue con los botones de Camaleon y Css garden. Sobre todo en Mozilla. No estaban alineados, el de abajo estaba mas a la derecha.

 

<!--quoteo(post=119981:date=Jul 12 2006, 10:38 PM:name=rojitas)--><div class='quotetop'>CITA(rojitas @ Jul 12 2006, 10:38 PM) [snapback]119981[/snapback]</div><div class='quotemain'><!--quotec-->
Muy Buebo el tutorial, gracias.Pero Tuve un problema haciendolo y me parece es porque escribi diferente el orden de las lineas en el css(directamente de dreamweaver y no Totstyle)por que cuando lo pegue de frente de tu ejemplo ya terminado se corrigio. es eso posible?Que el orden influya...??
<!--QuoteEnd--></div><!--QuoteEEnd-->

El orden en el html definitivamente afecta, en el css no tanto, a no ser que tengas parámetros repetidos/conflictivos. Se tomará en cuenta en ese caso el ultimo que aparezca en el texto.

Por ej. que tengas background-position: center; y luego mas adelante background-position: top; Error cometido normalmente por alguien que trata que quede centrado y arriba el fondo de una clase. En ese caso es mas bien background-position: center; lo unico necesario ("y" normalmente es igual a cero por defecto). O si se quiere algo mas específico, se trabaja con unidades backgroun-position: 10px 8px; (lease "x" "y").

 

Me parece interesante el tema y Sato lo expone muy bien en los dos tutos, claro que no se vayan a imaginar que con esto ya parendieron todo, hay que aportar un poco para enterdelo mucho mas pero nos deja con buenas base para empezar a trabajar con una muy buena herrameinta!!!!!!!!!!!!!!!!!!!!!!.

!a usar el martillo!

::::::::::::::::::::::::::::::::gracias Sato:::::::::::::::::::::

 

Con mucho gusto terricola, poco a poco mas gente va entendiendo lo útil de montar sitios con css y dan ese salto que siempre cuesta un poco, al menos decidirse a hacerlo

 

Aunqu me dejes las pestaña consiguiré hacerme con las dichosa CSS jejje
Un saludo y gracias por el tuto muyy completooo
Gothika