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

Bueno, habia prometido hacer esto en otra discusión.

Existen muchas fuentes en el web para buscar información de cómo montar una marquetación basada en CSS (Cascading Style Sheets) que es la nueva y más eficiente forma de hacerlo ya que la estructura del sitio se monta en base al contenido textual del mismo, o sea, se centra alrededor de la información. Esto a su vez dá la mejor estructura posible para que los logaritmos de análisis de las herramientas de búsqueda (entiendase google.com, yahoo.com, altavista.com, etc) de un sitio web y su subsecuente indexado a estas mismas herramientas de búsqueda sea lo mas efectivo.
<i><b>Traduciendo</b>: que nuestro sitio aparezca dentro de los primeros 100 resultados, si lo hicimos muy pero muy bien (incluyendo otras triquiñuelas de elementos a colocar dentro del sitio) dentro de los primeros 10 resultados.</i>
Este tutorial va a retomar un html desde su estructura más básica, re-entendiendo elementos que la mayor parte de los diseñadores que montan sitios usando aplicaciones como dreamweaver nunca se preocupan por utilizar adecuadamente. Dejemonos de tapujos, la mayor parte de los diseñadores, si no tienen ya una escuela en el buen desarrollo de sitios, no enfrentan tales sitios como lo que son: APLICACIONES WEB (incluso los mas estáticos de los sitios - para los no conocedores, estático significa: que no tiene bases de datos, actualizaciones automáticas, registro de usuarios, carrito de compras, etc).
Su forma de trabajar en tales sitios se limita a un diseño en Photoshop o Fireworks, el cual una vez que sale del proceso de creación conceptual gráfica y estética es recortado de la forma menos complicada (pero definitivamente no la mas eficiente), dandose libertades con el uso de imágenes en lugar de texto para poder trabajar con fuentes que no sean las standard utilizadas por navegadores.
Tales textos normalmente son los titulares y botones de menu de sus sitios y estos a su vez son casi siempre palabras claves que podriamos estarle alimentando a una herramienta de búsqueda para el indexado de nuestro sitio. En otras palabras, digamos que nuestro sitio es de para una compañia que vende lacteos. Los botones de menú y submenus pueden decir:

•Leche / Descremada / etc
•Quesos / Queso Amarillo / etc
•Ganado Vacuno / etc
•Etc

Y los titulares de la página principal y subpáginas a su vez también pueden contener un sin número de palabras clave adicionales...
Entonces para qué usar imágenes en vez de texto? Creanme el famoso ALT (texto alternativo para imágenes) es por mucho secundario al texto presente tal cual dentro del html.
Pero esto significa que nuestras páginas tienen que ser aburridas, siempre con las mismas tipografias dentro del html?
NO!
El uso de CSS para marquetación nos permite jugar con eso, y al final siempre desplegar imágenes como la opción visual para un texto presente dentro del html.
Pero qué otras ventajas tiene la marquetación con CSS además de la tan importante colocación dentro de las herramientas de búsqueda (que es de lo que MAS le importa a nuestros clientes, pues si no apareces en una búsqueda, nadie visita tu sitio de todas formas, por mas <i>LINDO</i> que esté )

Otra ventaja es la facilidad de colocación de elementos en una forma completamente controlable dentro del despliegue de nuestro html. Para aquellos que han usado los famosos "layers", les aviso que esto se basa en el mismo principio de colocación absoluta o relativa que se trabaja en CSS.

Tambien podemos tener texto con scroll, recurso que se resuelve erroneamente con iframes o frames comunes. Texto dentro de un frame, es texto NO leido por una herramienta de búsqueda, ya que está en OTRA página. De hecho, de una vez entiendan aquellos que aún no lo saben: El uso de frames para contruir un sitio es la peor práctica que pueden tener (preguntenle a un programador o alguien involucrado en seguridad de un sitio).

La actualización de un sitio en CSS es también muy eficiente.. pero eso lo verán cuando esten metidos de lleno en la práctica, ya que al inicio, como cualquier cosa que involucre una curva de aprendizaje, nos parecerá tedioso y lento. Con el tiempo se vuelve algo completamente natural y bastante rápido.

Hay muchas más ventajas, pero dejaré que uds mismos las vayan descubriendo, ya que este tutorial no es para venderles una idea, sino para mostrarles como empezar a hacerlo.

Primero que todo, aquellos que ya saben hacer sitios usando dreamweaver y conocen un poquito de html, pero aun ven CSS solo como un medio para dar algunas características a un texto, quitense su sombrero de expertos por favor y sientense al lado de los novatos que nunca han hecho un sitio, porque vamos a trabajar a la vaca de los huesos para afuera y no al revés que es como siempre lo han hecho.
O sea, uds primero diseñan el aspecto y luego meten el contenido.
Acá vamos primero a pensar en el contenido y luego decoramos el pastel como quien dice.

Con css, hay que ser mas cerebrales. Planear mejor. Visualizar todo, no solo como se ve, sino cómo funciona. Esto solo puede darnos mejores prácticas de trabajo, no creen?

No mal entiendan, no es que vamos a ciegas al asunto. Igual primero se diseña, se conceptualiza, pero a la hora de montar el sitio, <b>NO</b> "partimos" el photoshop, más bien montamos el html desnudo, dejando todos los elementos necesarios para empezar a asignar <i>apariencia</i> a estos mismos elementos.
Estamos montando un sitio en base a su <b>CONTENIDO</b>. Esto es una práctica que se conoce como <b>SEO</b> (Search Engine Optimization), bueno, al menos es parte de la misma. El contenido de todas formas YA tiene que haber sido optimizado, y esto requiere otras cosas como medir factibilidad de palabras claves y otras cosas que tampoco vamos a ver en este tutorial.

Para aquellos que se estan mordiendo los dedos y viendome con ojos de desprecio pensando "pero este tipo me esta diciendo que mi sitio ya no puede ser hermoso porque lo que mas importa es el texto??" "donde queda la estética? Me voy a convertir en un programador?" les invito que tomen un descanso de este largo bloque de texto y visiten sitios como <a href="http://www.webcreme.com" target="_blank">www.webcreme.com</a> y <a href="http://www.cssbeauty.com" target="_blank">www.cssbeauty.com</a>
Adelante, los espero.. jeje

Estan de vuelta? Vieron??? Bello verdad? y no solo eso, EFICIENTE!
Pero que hay diferente?? Bueno, pueden primero ver el source de las páginas, y en vez de los siempre presentes TABLE, TD, TR de los sitios montados a la antigua, veran muchos DIV's, SPAN's, H's y otros elementos.
Pero qué significa esto???
Bueno, veran que dentro de esos tags de DIV's y demás aparecen classes y ID's. Por ejemplo:

<div class="vaca">algun texto</div>

Esa clase llamada vaca, es el estilo que dice las caracteríticas del div. O sea, su tamaño, sus colores, imágenes que contiene, su posición, el tipo de letra que contiene, el color de la misma, o de esta cuando es un link, etc, etc.

La lista completa de clases, ID's y elementos (BODY, H's, STRONG, etc) usados se llama una hoja de estilos. Una pagina html puede llamar varias hojas de estilo, los estilos los podemos subdividir en varias hojas de estilo (vacas.css, quesos.css, etc) para asi no forzar al buscador que lea TODOS nuestros estilos cada vez que abre una página, cuando solo va a ocupar unos cuantos. Aprovecho tambien para recalcar <b>NO USEN ESTILOS LOCALES!</b>
Estilos locales? Si, son los estilos que estan propiamente en nuestro html, ya sea en el HEAD o el algún lugar del BODY. Porqué? porque es código innecesario, y una de las funciones principales de usar CSS es limpiar nuestro código, además, un estilo local, no puede ser usado por otra página, y tendremos que volver a copiar y pegar para usarlo localmente en esa otra página, en sí una práctica muy poco eficiente y sucia. Traten de trabajar todo en hojas de estilo externas que son llamadas al principio de nuestro html en el HEAD.

Quieren ver esas mismas páginas tan hermosas de los sitios galería que antes les mencioné desnudos, o sea sin sus hojas de estilo?
Esto es para que realmente entiendan a lo que me refiero a un contenido limpio, y que las hojas de estilo son meramente PIELES aplicadas al contenido.

Vamos a hacer lo siguiente, en su buscador, en la barra de LINKS o VINCULOS, escojan algun "boton" que casi no usan:
<img src="http://www.oscarblanco.net/buscador.jpg" border="0" alt="Imagen IPB" />
Le hacen click derecho, escogen "propiedades" o "properties" en el menú emergente y dentro de la cajita de texto del URL pegan el siguiente código tal cual:

java script:var i=0;if(document.styleSheets.length>0){cs=!document.styleSheets[0].disabled;for(i=0;i<document.styleSheets.length;i++) document.styleSheets.disabled=cs;};void(cs=true);

Pueden renombrar el link tambien a CSS TOGGLE o algo asi, presionan "OK"/"ACEPTAR". Probablemente reciban un mensaje de aviso relacionado con seguridad, tranquilos, este javascript lo único que hace es desactivar el despliegue de las hojas de estilo de su browser, y al presionarlo denuevo, las vuelve a activar.
Como desnudando/vistiendo un sitio de sus hojas de estilo a nuestro gusto.

Ya lo hicieron? Ok, ahora abran este sitio por ejemplo:

<a href="http://www.yahoo.com" target="_blank">www.yahoo.com</a> o este <a href="http://www.msn.com" target="_blank">www.msn.com</a>

Ahora presionen ese boton (si internet explorer tira el aviso de un script potencialmente peligroso diganle que acepte correrlo).

Que sucedió??? Ahora es PURO TEXTO CHORREADO!!!!

Bueno, el asunto es que el sitio en realidad es eso, texto chorreado, sin acomodo visual, solo orden de aparición dentro del html. De hecho, este orden de aparición tambien es muy importante para SEO, junto con el uso de mayúsculas y links, pero eso es otra historia.
Sí tenemos imágenes presentes, esto tampoco es pecado capital, pero notaran que en una cantidad mucho menor a los sitios normalmente construidos con tablas.

Haganlo con los sitios que aparecen listados en <a href="http://www.webcreme.com" target="_blank">www.webcreme.com</a> y <a href="http://www.cssbeauty.com" target="_blank">www.cssbeauty.com</a>.

Increíble verdad?

Bueno, ya vamos emocionandonos espero jeje.

Ok, empecemos por ver una estructura html en su estado más básico, así como contruiamos un sitio en aquellas épocas prehistóricas cuando aun no existian programas como dreamweaver o frontpage, donde todo era a puro texto (o hipertexto que es el caso de los html's).

Abran su block de notas (notepad). No, no el que tienen en su maleta ejecutiva, el que tienen en su windows u otro sistema operativo (ok ok sorry, no mas chistes tontos).
Y peguen este texto:

<html>

<head>
<title>
PAGINA WEB
</title>
</head>

<body>
<h1>
HOLA!!
</h1>
<h2>
Cómo estan?
</h2>
</body>

</html>

Ahora guarden con el nombre de pagina.txt , cierren el notepad y cambien la extensión de dicho archivo de txt a htm.
Denuevo un aviso de windows diciendo que si estamos seguros de cambiar la extension, pos si guon!

Ok, doble click al documento...

Listo! ya hicieron un documento html desde cero!! jajaja
De hecho ni el tag de title ni el h1 ni el h2 eran necesarios, con solo definir el inicio y final del html, el head y el body, ya está.
Pero agregamos el title para que tenga un título dentro del buscador y el h1 y el h2 por defecto tienen características de tamaño y negrita y hasta espaciado entre ellos para los textos que los mismos definen.

Ahora bien, diran los que ya saben del asunto y son expertos dreamweaverianos, y esto QUE CARAJOS??

Bueno, esta parte era para novatos, asi que SHHHHH B)

Ok, ahora vamos a hacer una hoja de estilo super sencilla, y le vamos a dar características a lo que pareciera es un documento sin gracia alguna.

Abran otro documento de texto en notepad. (tranquilos dreamweaverianos, yo trabajo con dreamweaver y una aplicacion llamada topstyle, que ya pueden ir bajando<a href="http://www.bradsoft.com/download/index.asp" target="_blank">AQUI</a> pueden probar con la version lite que es gratis) hay otras aplicaciones para editar estilos, tanto para PC como para MAC, pero eso se los dejo de tarea).

Ok, en ese otro documento de notepad, vamos a pegar esto:

body {
background-color: Black;
font-family: "MS Sans Serif", Geneva, sans-serif;
text-align: center;
}

h1 {
font-size: 25px;
color: #FCE070;
width: 200px;
background-color: #A28303;
height: 40px;
border: #ECBE05 dashed 3px;
margin: 0;
}

h2 {
font-size: 17px;
color: #FEF3C5;
width: 400px;
background-color: #58843E;
height: 22px;
border: #8BB579 solid 2px;
margin: 0;
}


UY DIOS QUE ES TODO ESO???? bueno, ya les explico, por ahora guarden eso como estilo.txt. Ahora cierren el notepad, y cambien la extension a css

Ok aun falta que el html entienda que va a usar esa pagina de estilos como su piel.

Cambiamos denuevo la extension de pagina.htm a pagina.txt, lo abrimos otra vez y en el head pegamos:

<link href="estilo.css" rel="stylesheet" type="text/css">

O sea, nuestro html ahora se ve asi:

<html>

<head>
<title>
PAGINA WEB
</title>
<link href="estilo.css" rel="stylesheet" type="text/css">
</head>

<body>
<h1>
HOLA!!
</h1>
<h2>
Cómo estan?
</h2>
</body>

</html>

Bien, guarden y renombren a pagina.htm

Doble click, VOILA! Ahora su pagina tiene una hoja de estilo aplicada.

Ok, entendamos que es todo eso encerrado por llaves que tenemos en la hoja de estilos:

Primero que todo entendamos que cada estilo tiene un nombre, ya sea un elemento como body, una clase como la que habiamos mencionado antes (vaca) o un ID.
Y luego de su nombre, encerrado por llaves { } estan todas las características de este estilo.

Por ejemplo:

body {
background-color: Black;
font-family: "MS Sans Serif", Geneva, sans-serif;
text-align: center;
}

En este caso le dijimos al body, o sea toda la parte visible de nuestro html que tiene un fondo negro, la familia de tipografias sera la Geneva y el texto está alineado al centro (en el head van cosas referentes a programacion, los metas - luego averiguan de eso - llamados a documentos externos como hojas de estilos, javascripts, etc o tiene su presencia localmente en el html tambien).

Veran que cada comando está separado por un punto y coma.

El H1 es más complejo:

h1 {
font-size: 25px;
color: #FCE070;
width: 200px;
background-color: #A28303;
height: 40px;
border: #ECBE05 dashed 3px;
margin: 0;
}


Aquí le dijimos al H1 que el tamaño de letra será de 25 pixeles (las medidas en hojas de estilo pueden ser tambien en puntos, milimetros, porcentajes, tamaños predefinidos, etc). Tambien le dijimos que su color tendra el valor hexadecimal de #FCE070 que es ese tono limon verde que tenemos ahi. El ancho del area del h1 que tiene tambien su propio fondo de color, es de 200px y su alto de 40px. Tambien tiene un borde de un color especifico, que a su vez es en rayitas y de un grosor de 3px. El objeto H1 como tal, tiene un margen alrededor suyo de 0px.
Ahora analizen el H2 y vean las diferencias.
Hagan la prueba en la hoja de estilos (conviertanla denuevo a txt, o si prefieren abranla ya en topstyle), ahi intercambien los nombres de los h's al h1 ponganle h2 y a su vez al h2 renombrenlo h1.

Guarden y abran denuevo el htm.

Les mencioné el uso de TopStyle u otras aplicaciones para edicion de hojas de estilo, debido a que usar la interfaz grafica de dreamweaver, tipo caja de herramientas, no es la forma de llegar a entender como funcionan las cosas.

Les invito a "travesear" esta hoja de estilo que hicimos, agreguen lineas, topstyle les da opciones automaticamente de características que pueden agregar. Si de pronto algun cambio que hicieron causa algo que no entienden o no les gusta en la pagina, tan facil como quitar la linea culpable.

En el siguiente tutorial de esta serie, empezaremos a trabajar ya composiciones mas complejas de marquetacion por css, y entenderemos las formas apropiadas de acomodar contenido para SEO.

Tambien haremos nuestro primer menú a punta de estilos, y tocaremos esas cosas llamadas DIV's y SPAN's y otros.


Suerte y que disfruten...

 

Gracias por el aporte 23 sato, no mas que lo movi aqui en tutoriales de tecnologia web.

Abrazos

 

Muy bueno aporte veremos como sigue ...

 

Buen aporte, gracias. ¿En que consiste esa aplicacion TopStyle?

 

Es un editor de CSS etc

 

Muy Buen Tiro! con esto del CSS...

Haber que viene mas adelante, mientras tanto sigo comiendo
mi plato de Sushi.

Gracias 23 SATO por este Actual tema, en que muchos
nos estamos aun dando algunos "cabesazos"...

Yaa Matane, Sayonara desu!

 

23sato....Simplemente GENIAL!!...

Solo espero que te animes a seguir con los CSS, que son muy, muy interesantes. Por cierto, para un Dreamweaveriano como yo, que le recomendarias?¿

Por cierto, alguien sabe alguna aplicacion para Mac, tipo TopStyle¿?

 

He encontrado un sustituto del TopStyle....Lo digo sobretodo a los Maqueros....

Es el Style Master...

 

muchas gracias por el tuto, yo no se nada de estilos, jeje segui todo paso a paso

 

buenas garcias lo voy a empesar a poner en practica al toke

 

Con gusto, cualquier cosa si tienes dudas puedes consultar en este mismo post

 

obrero, bienvenido al foro

 

Muchas gracias!

Muy buen tutorial!

 

Con todo gusto Pablix

 

NECESITO SABER ESTILOS NE FLASH, TENGO UNA ARRAY "WORDLIST" XFA AYUDAME PLISSSSS SOLO ME SALE EN ARIAL Y YO QUIERO DARTE TIMES Y COLO RGRIS

 

Bienvenido al for, sobre lo que preguntas, un comentario:

Yo creo que si tu mismo lees lo que escribiste no vas a entender lo que quisiste preguntar o comentar, al igual que como me pasa a mi que no entiendo lo que escribiste.

 

Hola esta muy bueno el el tutorial donde puedo encontrar la segunda parte

 

Bienvenido al foro

Acá esta todas juntas, incluyendo 2 mas de básicas de html:
<a href="http://www.tallerwebmaster.com/Tutoriales-CSS-y-xHTML-c-5.html" target="_blank">http://www.tallerwebmaster.com/Tutoriales-...-xHTML-c-5.html</a>

Y la segunda que te interesa ahí mismo
<a href="http://www.tallerwebmaster.com/Tutorial-Maquetacion-de-un-Sitio-Web-con-CSS-2-c-34.html" target="_blank">http://www.tallerwebmaster.com/Tutorial-Ma...CSS-2-c-34.html</a>

ambas tienen link a este foro para consultas

 

<!--quoteo(post=221971:date=May 19 2007, 01:18 PM:name=racso09)--><div class='quotetop'>CITA(racso09 @ May 19 2007, 01:18 PM) [snapback]221971[/snapback]</div><div class='quotemain'><!--quotec-->
Hola esta muy bueno el el tutorial donde puedo encontrar la segunda parte
<!--QuoteEnd--></div><!--QuoteEEnd-->

Hola racso, el tutorial original publicado en este mismo foro esta en esta direccion:

<a href="http://www.forocreativo.net/ipb/index.php?showtopic=10459" target="_blank">http://www.forocreativo.net/ipb/index.php?showtopic=10459</a>

Espero te sirva

 

HOl ame encanta tu tutorial viejo la verda es que estaba buscando algo que me saque de la ignorancia en este tema, y bueno pues doy gracias de econtrar gente como vos que hace fácil lo difícil...

Y una preguntita relacionada con el tuto el botón que dices como es que hay que hacerlo en firefox?