Tutoriales Maquetación CSS

Maquetación de un Sitio Web con CSS (Parte 1)

por 23sato, http://www.oscarblanco.net/

Existen muchas fuentes en el web para buscar información de cómo montar una maquetació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 da la mejor estructura posible para que los algoritmos 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.

Traduciendo: 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.

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 menú de sus sitios y estos a su vez son casi siempre palabras claves que podríamos 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ñía 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 tipografías dentro del html?

NO!

El uso de CSS para maquetació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 maquetació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 LINDO 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.

También podemos tener texto con scroll, recurso que se resuelve erróneamente 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 construir 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, NO "partimos" el Photoshop, más bien montamos el html desnudo, dejando todos los elementos necesarios para empezar a asignar apariencia a estos mismos elementos.

Estamos montando un sitio en base a su CONTENIDO. Esto es una práctica que se conoce como SEO (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?", bueno, les invito que tomen un descanso de este largo bloque de texto y visiten sitios como www.webcreme.com y www.cssbeauty.com

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, verán muchos DIV's, SPAN's, H's y otros elementos.

Pero qué significa esto???

Bueno, verán que dentro de esos tags de DIV's y demás aparecen clases y ID's. Por ejemplo:

Esa clase llamada vaca, es el estilo que dice las características 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 así no forzar al buscador que lea TODOS nuestros estilos cada vez que abre una página, cuando solo va a ocupar unos cuantos. Aprovecho también para recalcar NO USEN ESTILOS LOCALES!

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 algún "botón" que casi no usan:

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:

Pueden renombrar el link también a CSS TOGGLE o algo así, 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:

www.yahoo.com o este www.msn.com

Ahora presionen ese botón (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 también 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 www.webcreme.com y www.cssbeauty.com.

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 construíamos un sitio en aquellas épocas prehistóricas cuando aun no existían 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:

Ahora guarden con el nombre de pagina.txt , cierren el notepad y cambien la extensión de dicho archivo de txt a htm.

De nuevo un aviso de Windows diciendo que si estamos seguros de cambiar la extensión, 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, dirán los que ya saben del asunto y son expertos Dreamweaverianos, y esto QUE CARAJOS??

Bueno, esta parte era para novatos, así que SHHHHH

Ok, ahora vamos a hacer una hoja de estilo súper 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 aplicación llamada Topstyle, que ya pueden ir bajando AQUI pueden probar con la versión 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:

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

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

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

O sea, nuestro html ahora se ve así:

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 habíamos mencionado antes (vaca) o un ID.

Y luego de su nombre, encerrado por llaves { } estan todas las características de este estilo.

Por ejemplo:

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

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

El H1 es más complejo:

Aquí le dijimos al H1 que el tamaño de letra será de 25 pixeles (las medidas en hojas de estilo pueden ser también en puntos, milimetros, porcentajes, tamaños predefinidos, etc). También le dijimos que su color tendrá el valor hexadecimal de #FCE070 que es ese tono limón verde que tenemos ahí. El ancho (width) del área del h1 que tiene también su propio fondo de color, es de 200px y su alto (height) de 40px. También 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 analicen 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), ahí. 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 edición de hojas de estilo, debido a que usar la interfaz gráfica 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 automáticamente de características que pueden agregar. Si de pronto algún cambio que hicieron causa algo que no entienden o no les gusta en la pagina, tan fácil como quitar la linea culpable.

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

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

Suerte y que disfruten...

Parte 2