miércoles, 18 de marzo de 2009

HAL y las marcas (CSS)

Si abrimos en un navegador (por ejemplo, Iceweasel) la página web creada el día pasado tras convertir nuestras marcas informales en marcas HTML, veremos el siguiente resultado:



¿Por qué precisamente esta un tanto rudimentaria página y no una de aquéllas más vistosas que visitamos cotidianamente?

La razón es que el equipo de diseño que funciona por defecto en nuestro navegador se limita a realizar su trabajo del modo más simple posible, sin filigranas ni sofisticaciones de ninguna clase. Si queremos más, tenemos que convertirnos nosotros mismos en diseñadores. No es nuestra intención ---lo hemos establecido desde el principio--- asumir más responsabilidades de las que nos competen como escritores. Sin embargo, y con un fin puramente didáctico, vamos a tratar de definir un estilo más elaborado para nuestro texto. Como se trata de una tarea que no vamos a realizar y que se presenta sólo con fines didácticos, no entraremos en detalles.

Uno de los procedimientos, el más extendido y conveniente, de definir el diseño de nuestro página es utilizar lo que se denomina una hoja de estilo (stylesheet). La definición de hojas de estilo para documentos HTML se atiene a las especificaciones del lenguaje llamado CSS (Cascading StyleSheets, hojas de estilo en cascada), establecidas también por el W3C. La idea es simple. A cada elemento del documento HTML se le asocia una descripción formal de su estilo. Dentro de la vaga noción de estilo entran cosas como la ubicación precisa del elemento en la página, las dimensiones de la "caja" que lo contiene, el tipo de fuente, el color, etc.

Podríamos, por ejemplo, pensar en los siguientes atributos de estilo para algunos de los elementos de nuestro documento web:

BODY
familia de fuente: sans-serif; relleno: 1,5 emes ---la distancia que ocupa una "m" y media--- en margen izquierdo y derecho.

H2
color: azul suave; fuente: 170% del tamaño del resto del texto y familia sans-serif.

CODE
color: granate


La traducción de estas especificaciones según las convenciones de CSS sería la siguiente:

BODY { font-family:sans-serif; padding: 0 1.5em 0 1.5em }
H2 { font:170% sans-serif; color:#005A9C }
CODE { color:maroon }

Hay varias maneras de integrar esta definición dentro de nuestro documento HTML. Una de ellas es incluirlo dentro del elemento STYLE de HTML, que recibe un atributo (el atributo type) donde se indica el tipo de estilo fijado. STYLE es una de esas informaciones globales sobre el documento que debe aparecer en la sección HEAD. De acuerdo con estas normas, nuestro estilo integrado en el documento sería:

<HEAD>
...
<STYLE type="text/css">
BODY { font-family:sans-serif; padding: 0 1.5em 0 1.5em }
H2 { font:170% sans-serif; color:#005A9C }
CODE { color:maroon }
</STYLE>
</HEAD>

Iceweasel nos presentaría de la siguiente manera nuestro documento estilizado (un resultado de andar por casa, pero quizá no absolutamente insatisfactorio):



Consideremos un estilo aparentemente más trabajado como el siguiente:

BODY { background:brown }
H2 { color:yellow }
EM { background:navy}
CODE { background:maroon }
P { text-align:justify }

Más esfuerzo no produce mejor arte, y el resultado de tanto trabajo sería este engendro ---y por engendros parecidos está invadida la Web:



Moraleja: "zapatero a tus zapatos". Aunque la seducción de los atractivos visuales es grande, y grande la posibilidad de que cualquier advenedizo se entregue a la entretenida experiencia de estilizar sus producciones, más vale evitar la tentación y dejar que los expertos realicen su trabajo, que bastantes años les ha llevado aprenderlo. Como escritores nos seguiremos conformando con la hoja de estilo básica que por defecto proporciona el navegador o, al menos, si insistimos en practicar la definición del estilo, reservar nuestros juguetes para nosotros mismos, sin hacer que el resto del mundo sea partícipe de nuestras más que probables chapuzas.

No hay comentarios:

Publicar un comentario