lunes, 22 de octubre de 2007

Hojas de estilo (CSS)

Alien [blackhat4all@gmail.com]

Resulta ya casi imposible encontrar en la web una página que no esté confeccionada utilizando hojas de estilo. Quizás la mayoría de ustedes las conozcan, pero para el resto, les cuento que es una de las herramientas más cómodas a la hora de crear una página web.

Las siglas que conforman la extensión de una hoja de estilo, vienen dadas por la expresión Cascading Styles Sheets, que traducido al español vendría siendo algo como hojas de estilo en cascada. Las hojas de estilo están creadas para ayudar a representar un contenido HTML y por lo tanto deben ser leídas por los navegadores. Como la mayoría de los elementos que es capaz de leer un explorador web, las hojas de estilo también están escritas en un lenguaje interpretado, lo que quiere decir, que para su ejecución no necesita de un compilador, sino que el software para el que ha sido creada irá leyendo línea por línea del contenido y a su vez llevando a cabo una serie de acciones. Este tipo de construcción es en especial factible para los programadores, ya que no requieren de la instalación de un lenguaje para hacer gala de sus habilidades: bastaría con abrir un editor de texto cualquiera, escribir una serie de instrucciones y luego guardarlo con la extensión adecuada.

Primero lo primero

Como habíamos dicho anteriormente, las hojas de estilo ayudan a mostrar en pantalla el contenido de una página web, y como una complementa a la otra, pienso que lo primero es crear una página web convencional, explicando cada uno de los elementos por los que está conformada.

Como lenguaje script, las páginas web tampoco requieren de la presencia de un compilador para ejecutarse, y pueden estar escritas tanto en un programa profesional como el DreamWeaver o en un magnífico editor de texto como es el caso del bloc de notas; siendo la programación en este último más compleja por la carencia de menús y ayudas contextuales.

Básicamente una página web está formada por etiquetas que agrupan dentro de ellas otras etiquetas o el propio contenido de la página. Para crear una etiqueta se debe encerrar el nombre de la misma dentro de unos signos de menor que y mayor que respetivamente: <Etiqueta>. Y para cerrarla se debe hacer lo mismo, pero situando antes del nombre de la etiqueta que se quiera cerrar un slash [/]: </Etiqueta>. La primera etiqueta que se debe colocar es html, ya que esta es la que indica al navegador que es una página web y que el contenido que el navegador tiene que interpretar está por debajo de esta. Luego, dentro de esta colocaremos la etiqueta head [cabeza]. Dentro de ella se colocarán entre otras cosas el título de la página y la hoja de estilo…. Pero eso lo veremos más adelante.

Más abajo, crearemos una etiqueta llamada body. Dentro de esta agruparemos todo el contenido de la página (me refiero a tablas, imágenes, etc.). Como no todo el mundo tiene instalado Dreamweaver y sí el bloc de notas, escribamos en el entonces el código básico de una página web cualquiera, y guardémoslo como Pag.html.
<html>
<head>
</head>
<body>
</body>
</html>

Nota: Fíjense que cada etiqueta que se abre deberá cerrarse posteriormente.

Hasta ahora lo que debería salir al ejecutar este código en un navegador, debería ser algo como: NADA... Exactamente, no hemos escrito nada hasta el momento, sólo hemos dado a un archivo de testo la estructura y la extensión de un archivo html, pero hasta el momento no hemos colocado dentro de el contenido alguno. Para hacerlo, debemos escribir dentro de la etiqueta body.


<body>
BlackHat, un proyecto para todos.
</body>

Bien, con esto lo que hemos hecho es escribir el texto “BlackHat, un proyecto para todos” dentro de la página, pero… ¿eso es todo lo que hace html?
Para nada, html va mucho más allá. Tratemos ahora de escribir un texto simple que tenga sólo dos encabezados y dos cortas oraciones dentro de ellos.

<html>
<head>
</head>
<body>
<strong>Encabezado 1.</strong><p>
Aquí se colocaría el texto del primer encabezado, que podría ser algo así como un párrafo.</p>
<strong>Encabezado 2.</strong></p>
Esta parte sería para el segundo párrafo</p>
</body>
</html>

Nota: La palabra strong, dentro de los signos de mayor y menor que, es interpretada por los navegadores como que empieza y termina una palabra u oración marcada en negrita.

Copiando este código dentro del archivo con extensión html, el navegador lo interpretaría como oraciones, donde la primera y tercera estarían en letra negritas y las demás en formato normal.

Aunque la programación Script es mucho más abarcadora, pudiendo insertar en esa misma página otros elementos como tablas, imágenes, colores de fondo, etc., por el momento la hemos creado solo con la idea de demostrar la utilidad del CSS.

Supongamos que vamos a presentar esa página en algún lugar, y que después de estar allí por un tiempo determinado, alguien nos dice que debemos actualizarla, y que ya los encabezados no deben ir en negrita.
La acción lógica que nos viene a la mente es quitar todas las frases que digan strong, y aunque esto no es una idea tan descabellada, les recuerdo que esta página tiene sólo líneas; ¿Qué haría si fuera un sitio?, ¿O si en vez de cambiar sólo eso, tuviesen que cambiar el color del texto?, ¿o del fondo?, ¿o …?
Esto, visto así en un ejemplo pequeño quizás no es problema, pero cuando se debe modificar un sitio por completo para ajustarlo a ciertas normas, la tarea se vuelve compleja, y más si se dispone de poco tiempo. Es aquí donde entra a jugar un papel clave las hojas de estilo.

Trabajo en equipo

Crear una hoja de estilo no es nada complejo. Como habíamos dicho antes, es un lenguaje interpretado y su función es la de ayudar al HTML a ser más limpio. Darle vida a un archivo CSS es mucho más sencillo que a uno con extensión HTML, ya que al CSS no hay que hacerle un encabezado específico o algo por el estilo, dejando sólo en el código puro que será leído por el navegador, basta con crear un archivo de texto y renombrarlo con extensión .CSS.

Pero de nada vale crear la hoja de estilo si el archivo HTML no sabe ni donde está ni como se llama. Así que luego de crear el archivo CSS, debemos pasarle algunos datos al HTML.

Tomando como ejemplo los archivos del boletín de la comunidad, colocaremos entre las etiquetas <head> y </head> una línea con el texto siguiente:

<link href="Files/Blackhat.css" rel="stylesheet" type="text/css" title="BlackHat styles">

Con esto le estamos diciendo, entre otras cosas, que el archivo que va a contener la hoja de estilo se va a encontrar dentro de la carpeta Files, y se va a llamar BlackHat.css. En caso de que el archivo no esté un nivel de carpetas más abajo, sino que se encuentre junto con el HTML, simplemente remplazaríamos “Files/BlackHat.css” por “BlackHat.css”.

Nótese que para navegar por la carpetas no se utiliza un backslash(\) sino un slash(/).

Después que el HTML “sabe” donde está el CSS, sólo nos restaría ir a la parte de la programación de este.
Lo primero que se debe hacer es crearle una apariencia al HTML, asegurándose de darle todos los datos posibles para que este pueda presentarse de la forma más agradable.

Para esto se crea una etiqueta a la que llamaremos body, y donde irán los datos fundamentales.

body{margin:0px; background-color:#000000; color:#77AA77; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:small; text-align:left;}

Para este ejemplo hemos tomado el body que utilizamos en el boletín de BlackHat, y en el que no hacemos más que darle un margen, color de fondo, tipo y tamaño de letra y alineación del texto. Aunque con esto puede bastar, se puede incluir o suprimir más valores, tómese en cuenta que mientras más exacto se defina el body, es decir, mientras más parámetros se le pasen, será más fácil trabajar con la página como tal, aunque eso depende de la variedad que se piensa va a tener la página web como punto final.

Si ya tenemos hecho todo de forma correcta hasta este momento, veremos como la página ya ha tomado un color de fondo y de fuente. El margen se ha puesto a 0, pero si son curiosos, quizás quieran ver como va cambiando la página cada vez que la recarguen luego de cambiar el valor del margen.

Ahora bien, si ya terminaron de jugar con los márgenes, vayamos a una de los asuntos que a mi entender, es lo que más nos hace preferir las hojas de estilo.

HTML es un lenguaje interpretado, lo que quiere decir que el navegador, a medida que va leyendo el código, va poniendo las letras o imágenes o cualquier cosa que se intente visualizar. Pero lamentablemente carece de un goto o algo que nos remita a una línea determinada para colocar un texto que se nos olvidó. Y es ahí donde juega un papel fundamental la hoja de estilo, ya que permite hacer dentro de la página una especie de subpáginas, y luego de identificar a cada una, se puede escribir dentro de esta. No es mi objetivo engañar a nadie, es cierto que aún se continúa leyendo en línea recta, pero esto da un mayor control de la página, pues permite dividir la página en tantas columnas se desee, y cada una con un formato específico.

div.Col_Izq {float:left; width:33%; margin-left:5%;}
div.Col_Der {float:right; width:33%; margin-right:5%;}

Estos dos ejemplos son para crear dos columnas en las cuales posteriormente podremos escribir.
El “div.” Es algo que siempre debemos escribir para crear una etiqueta div, y seguido de esto el nombre que le asignaremos, y que será el que el navegador reconocerá.
Luego de esto, entre las llaves colocaremos los parámetros que definirán como se comportará la etiqueta. Podemos ser tan exquisitos o tan escuetos como queramos.
Float:left -> Le estamos diciendo que es una etiqueta div flotante y que su posición va a ser a la izquierda.
Width:33% -> El ancho que abarcará será el 33% del ancho total de la página.
Margin-right:5% -> el margen derecho va a ser de … (no es tan difícil, ¿verdad?)

Aunque se han implementado solo tres propiedades, se le puede poner muchas más, pero no me corresponde a mi decir todas las características, ya que se cumplirían 3 años de BlackHat y aún no terminaría de explicarlas. Para un mayor entendimiento, use la ayuda de Dreamweaver.

¿Cómo utilizar el div del CSS en el HTML?

Sencillo, simplemente escribimos en el body:
<div class=”Col_Izq”>Hola mundo</div>
Con esto, no hemos hecho más que llamar a la clase Col_Izq, que ya el navegador sabe que está en el CSS, y dentro de esta clase escribir “Hola mundo”. Pero esto no se presentará como un texto normal, sino que aparecerá a la parte izquierda de la página.

De esta forma, se pueden crear todas las etiquetas div que se quiera, dándole a cada una un diseño especial, haciendo que la página tenga una mayor variedad (si es ese el objetivo), y sin tener que requerir de imágenes u objetos que demoren más la descarga de la página.

The end

Las hojas de estilo ofrecen muchas ventajas a los programadores, una de ellas, es la rapidez con que puede ser modificada una página. Supongamos que tenemos bajo nuestra tutela un sitio de 10 páginas, y por x o y nuestro superior nos dice que debemos cambiar el color de fondo de todas las páginas, en ese caso, si tuviésemos creada una hoja de estilo, en lugar de ir página por página cambiándole el color de fondo al HTML, simplemente cambiaríamos la propiedad color que declaramos en el body y listo, todas las páginas que hacen referencia a esta hoja de estilo cambiarán automáticamente su color. Pero no es solo la facilidad de cambiar las cosas lo que nos aporta el CSS, sino que utilizándolo de forma apropiada se puede crear ciertas similitudes con las imágenes, haciendo que estas en ocasiones jueguen un papel menos significativo, dándonos la posibilidad de prescindir de estas y disminuir el tiempo de descarga de la página.

Por otra parte, no es aconsejable generar una hoja de estilo para un sitio de x páginas y que entre ellas no tengan mucho que ver. La utilidad de la hoja de estilo está en poder utilizar una etiqueta div en varias páginas, y si esto no se hace, pues no tiene ningún sentido perder tiempo creando el CSS.



Artículos relacionados


No hay comentarios: