I apollogize to all english speaking readers.
I haven't translated this tutorial yet, so for now, here's the original version in Spanish.
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 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.
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.
Existen incluso machotes (templates) con los que se puede trabajar una estructura ya hecha, aplicaciones que montan hojas de estilo automatizadas e incluso opciones en linea como Wordpress para montar sitios tipo BLOG en forma rapida y eficiente.
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 LINDO que esté )
Otra ventaja es la facilidad de integració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 cualquier 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 relleno (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, sin diseñar nada.
Igual, primero se diseña, tomando en cuenta eso si, el haber tomado nota primero de cuales son las palabras clave que queremos trabajar y haberlas integrado en nuestra propuesta grafica en menus, titulares, etc.
Y 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. Luego los recortes que hagamos en PS seran puramente para tener imagenes lo mas reducidas posibles para integrarlas por medio de las hojas de estilo, no dentro del html.
Estamos armando 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 y muchas veces es mejor dejarselo de todas formas a los expertos en el tema.
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:
www.cssdrive.com
www.csselite.com
www.cssheroes.com
www.bestcssgallery.com
www.css-website.com
www.divinecss.com
www.webcreme.com
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, 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 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.
Si tienen FIREFOX como su buscador de preferencia (espero que no usen Internet ExploTER, y si lo usan, vayan cambiandose a FIREFOX o mejor aun, Google Chrome - pero recuerden que cuando prueban sus sitios, siempre tienen que verlos en TODOS los exploradores para asegurarse que esta bien hecho el trabajo para TODOS) dirijanse al menu de View, luego en Page Style busquen No Style (creo que en español es ver/estilo de pagina/sin estilo o algo por ahi).
Si usan Google Chrome pueden instalar esta extension que ofrece ademas una regla y un color picker (para capturar colores de la ventana de su explorador: http://www.chromeextensions.org/webmaster-seo/pendule/ Una vez instalado aparecera un icono con un engranaje blanco, le hacen click y escogen "Disable CSS" para quitar las hojas de estilo y lo le quitan denuevo la seleccion para activar las hojas de estilo otra vez.
En ambos casos es como si estuvieramos desnudando/vistiendo un sitio de sus hojas de estilo a nuestro gusto.
Haganlo con cualquier sitio, puede ser uno de los que les habia nombrado (que son galerias) o incluso uno de los sitios listados en esas galerias, entre mas lo hagan mejor, asi captan mas la idea.
Que sucedió??? Se convierten en 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.
Qué interesante verdad? Esos increibles japoneses!...
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
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 bajandoAQUI 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 incluyendo Dreamweaver tambien funciona, pero por efectos de entender esto mejor, lo estamos haciendo a la antigua. SI, en tiempos prehistoricos (inicios de los 90) asi era como se hacian las paginas. (soy suficientemente viejo para acordarme de HOTDOG HTML, una aplicacioncilla que era para trabajar paginas a puro codigo, casi como usar un block de notas).
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...
No comments:
Post a Comment