Passant del disseny amb HTML al disseny amb CSS

Per entendre el canvi en l'eficiència de la producció de serveis web amb CSS envers la programació tradicional, no cal només teoria sino pràctica. El primer que farem és una pàgina web tradicional, li aplicarem estils tal i com ho faríem si només apliquéssim codi HTML, i poc a poc anirem traslladant aquesta darrera part al codi CSS. En poc temps, tindrem una web en la que l'especificació de com s'ha de representar visualment el contingut de la web, estarà en un altre fitxer, escrit en llenguatge CSS.

Estils en HTMLamunt

Fem una pàgina web d'exemple. Utilitzarem l'especificació HTML 4.01 i només estructurarem contingut, no utilitzarem etiquetes d'estil:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Formulari de correu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
Hola usuari!<br><br>
A continuació escriu un correu electrònic vàlid. <br>
L'utilitzarem per enviar-te la nostra <a href="http://urlexemple.com">revista electrònica</a>.
<form action="script.php" method="post">
Introdueix el correu:
<input type="text" maxlength="50" name="correu"><br>
<input type="submit" name="enviar" value="Envia!!">
</form>
Si tens cap dubte, escriu-nos a <a href="mailto:exemple@mail.com">exemple@mail.com</a>
</body>
</html>

Si copieu el codi i mireu com queda al vostre navegador observareu que la única part del codi que especifica la forma en què serà representada la informació són les etiquetes salt de línia <br>. Potser no considerareu aquesta etiqueta una eina per a dissenyar la web però de fet ho és. Sense ella, tots els continguts de la nostra web s'escriurien a la mateixa línia, a excepció del salt de línia per defecte imposat per l'objecte form.

Fixeu-vos que, si un cop feta la web (tot el site, format per desenes de pàgines com aquesta) el nostre client ens digués que alguns salts de línia no els vol, d'altres sí, d'altres s'han d'ampliar, etc. hauríeu d'anar línia per línia del codi de cada una de les pàgines cuidant d'aquestes etiquetes. En sí, ja comportarà una pèrdua de temps important, amb la poca eficàcia que això suposa per un desenvolupador de webs.

Però anem a aplicar estils:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Formulari de correu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#eeeeff">
<p align="center"> <strong>
<font face="Arial, Helvetica, sans-serif">Hola
<font color="#FF0000"> usuari</font>
!</font></strong><br>
<br>
A continuació escriu un correu electrònic <font color="#339900">vàlid</font>
. <br>
L'utilitzarem per enviar-te la nostra <a href="http://urlexemple.com">revista electrònica</a>.</p> <form action="script.php" method="post">
<p align="center">
Introdueix el correu:
<input type="text" maxlength="50" name="correu"><br>
<input type="submit" name="enviar" value="Envia!!">
</p>
</form>
<font color="#CCCCCC" size="-1">Si tens cap dubte, escriu-nos a</font>
 <a href="mailto:exemple@mail.com">exemple@mail.com</a>
</body>
</html>

Com podem observar el codi es complica malgrat el poc contingut que té. Identificar quins estils són aplicats a cada part del contingut és tasca difícil ja que s'ha de llegir tot el codi anterior per veure quines etiquetes d'estil, o atributs d'estil, estan afectant a l'objecte del nostre estudi.

A mesura que es vol especificar més l'aspecte visual, el codi es complica i retocar-lo es fa molt difícil. A més pàgines a retocar, la feina es pot convertir en un malson.

CSS arriba al galop.

CSS embegutamunt

L'objectiu d'aquest apartat és generar un codi equivalent al de l'apartat anterior, pel que fa al resultat visual final, però aplicant CSS dintre del mateix codi. A aquesta manera de programar, en la qual s'escriu codi dintre de línies de codi d'un llenguatge diferent, se'n diu fer codi embegut (código embebido, embedded code). En aquest cas farem CSS embegut en l'HTML.

Una manera de dur-ho a terme consisteix en escriure sentències CSS com a valor de l'atribut style, que pràcticament totes les etiquetes tenen.

Apliquem-ho al codi anterior (de moment la sintaxis de CSS us resultarà extranya, però no és l'objectiu d'aquest apartat explicar el funcionament de cada una de les seves propietats):

<body bgcolor="#eeeeff">
Es converteix en:
<body style="background-color:#eef;">

<p align="center">
Es converteix en:
<p style="text-align:center;">

Aturem-nos un moment per a què pugueu observar que aplicant aquests canvis obtenim el mateix resultat. La diferència està en què ara escribim tots els atributs, que abans especificaven estils o alineació, en línies en CSS embegut en el codi. Com? Posant les línies de CSS com a valor de l'atribut style a l'etiqueta que ho vols aplicar.

Siguem conscients també de que els estils amb CSS tenen un determinat abast. És a dir, al posar <p style="text-align:center;"> estem especificant que el contingut de l'etiqueta <p> en qüestió estigui alineat al centre, i aquesta especificació tindrà validesa fins al tancament de l'etiqueta: </p>.

Per tant, especificar estils amb CSS o fer-ho amb atributs (HTML) segueix el mateix sistema: l'especificació té validesa o abast entre l'etiqueta d'inici en qüestió i l'etiqueta de fi corresponent.

A continuació se'ns presenta un girigall:

<strong><font face="Arial, Helvetica, sans-serif">Hola<font color="#FF0000"> usuari</font>!</font></strong>

L'etiqueta <strong> especifica negreta. Al no tancar-se fins al final, el seu abast afecta a tot el text que tenim a dalt. També tenim "Hola" que està afectat per l'element font que especifica aspecte de la lletra (en aquest cas Arial). "usuari" està afectat per totes dues etiquetes i una tercera: una etiqueta <font> que especifica un color (vermell). Per últim, tenim "!" que ja no es veu afectat per la darrera etiqueta <font>, però sí per l'anterior (està dintre del seu abast) i per l'element strong. Un diagrama on es vegin les depèndencies ens pot ajudar a entendre-ho millor:

dependències entre les etiquetes del codi

En el diagrama s'observen les dependències de cada un dels elements. Es veu com "usuari" depèn primerament del que indiqui la última etiqueta que l'afecta: en aquest cas l'especificació en vermell mitjançant <font>. També està afectat per l'especifició de la lletra en Arial i la negreta.

Com podem veure, <strong> i <font face="Arial"> afecten a tot el contingut alhora. No hi ha cap element que només es vegi afectat per un dels dos. Perquè no agrupar-los amb una sola etiqueta?

En HTML això no es pot fer, l'etiqueta <font> no té atributs per especificar el gruix de la lletra i <strong> únicament serveix per a això, no la podem fer servir per aplicar cap estil més.

L'etiqueta <span> ens ajudarà. <span> és una etiqueta que serveix únicament per definir un àmbit sense realitzar cap acció per sí sola. <font> també defineix un àmbit o abast d'influència: l'àmbit entre la seva declaració i l'etiqueta de tancament. Però així com <font> està orientada a especificar color, aspecte i tamany de text, la utilitat d'<span> abarca molt més, sobretot perquè també té l'atribut style mitjançant el qual podem escriure línies de CSS que apliquin els estils desitjats. D'aquesta manera podem fer el següent canvi:

<strong><font face="Arial, Helvetica, sans-serif"> [...] </font></strong>
Es converteix en:
<span style="font-weight:bold; font-family:Arial,Helvetica,sans-serif;"> [...] </span>

Obtenim el mateix aplicant CSS en una sola etiqueta <span>, quelcom que ajuda a agilitzar el codi. A la resta del codi, aplicarem <span> allà on hi hagi etiqueta <font>:

<font color="#FF0000"> [...] <font>
Es converteix en:
<span style="color:#f00;"> [...] </span>

<font color="#339900"> vàlid </font>
Es converteix en:
<span style="color:#390;"> vàlid </span>

<font color="#CCCCCC" size="-1"> [...] </font>
Es converteix en:
<span style="color:#ccc;font-size:0.9em;"> [...] </span>

Observareu que no hi ha canvis a nivell visual quan el codi sigui interpretat. Tantmateix, fem una petita reflexió: aquest sistema és més eficient que l'anterior? La veritat és que no gaire, continuem tenint els estils especificats dintre del codi, enmig de l'HTML. En cas de necessitar un redisseny ens portaria moltes hores de retocs. El codi és complex encara i mal estructurat. En poques paraules: ineficaç.

A aquesta manera d'incorporar el CSS al codi HTML, col·locant les sentències en atributs style, se'n diu CSS embegut en línia (CSS embebido en línea o inline embedded code)

En el següent apartat farem un pas més en la separació entre el codi destinat a especificació visual i l'estructural.

Recordeu que el codi actualment està així:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Formulari de correu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body style="background-color:#eef;">
<p style="text-align:center">
<span style="font-weight:bold; font-family:Arial, Helvetica, sans-serif;">Hola
<span style="color:#f00;"> usuari</span>!</span>
<br>
<br>
A continuació escriu un correu electrònic <span style="color:#390;"> vàlid </span>.
<br>
L'utilitzarem per enviar-te la nostra
<a href="http://urlexemple.com">revista electrònica</a>.</p>
<form action="script.php" method="post">
<p style="text-align:center;">
Introdueix el correu:
<input type="text" maxlength="50" name="correu">
<br>
<input type="submit" name="enviar" value="Envia!!">
</p>
</form>
<span style="color:#ccc;font-size:0.9em;">
Si tens cap dubte, escriu-nos a </span>
<a href="mailto:exemple@mail.com">exemple@mail.com</a>
</body>
</html>

CSS embegut IIamunt

Acabem de veure que fent codi embegut en línia, no avancem massa. El següent pas és agrupar el codi CSS en una sola zona, separant així el codi estructural de la web de l'HTML. D'aquesta manera, guanyarem en llegibilitat en el codi i podrem començar a fer una separació real entre codi destinat a especificar estils del codi estructural.

Observem els estils CSS aplicats: tenim 4 tipus d'estils diferents aplicats a etiquetes <span>, 1 per a etiquetes <p> i 1 per a <body> :

  1. Body:
    1. background-color:#eef;
  2. Span:
    1. color:#f00;
    2. color:#390;
    3. color:#ccc;font-size:0.9em;
    4. font-weight:bold;font-family:Arial,Helvetica,sans-serif;
  3. P:
    1. text-align:center;

Generem un tipus nou per a cada un d'aquests estils, col·locant les línies entre claus i assignant un nom de classe (s'explicarà més endavant) per poder-nos-hi referir des del codi HTML:

.fons
{
background-color:#eef;
}
.resaltat
{
color:#f00;
}
.resaltat2
{
color:#390;
}
.especial
{
color:#ccc;font-size:0.9em;
}
.avis
{
font-weight:bold;font-family:Arial,Helvetica,sans-serif;
}
.parraf_especial
{
text-align:center;
}

Figura 1 - Codi CSS pur

Els noms assignats a les classes són arbitraris. L'objectiu d'aquest pas és donar una referència (un nom de classe) a un conjunt d'estils (línies de codi CSS).

Col·locarem aquestes sentències entre l'etiqueta <style> i </style> dintre de head.

Ara modificarem el codi HTML per a què apliqui aquestes classes generades enlloc d'utilitzar línies de codi CSS embegudes en línia. És a dir, treurem els estils dels atributs style i, enlloc d'això, aplicarem les classes definides mitjançant l'atribut class.

Els canvis quedarien així:

  1. <body style="background-color:#eef;">
    Es converteix en:
    <body class="fons">
  2. <p align="center">
    Es converteix en:
    <p class="parraf_especial">
  3. <span style="color:#f00;">
    Es converteix en:
    <span class="resaltat">
  4. <span style="color:#390;">
    Es converteix en:
    <span class="resaltat2">
  5. <span style="font-weight:bold; font-family:Arial,Helvetica,sans-serif;">
    Es converteix en:
    <span class="avis">
  6. <span style="color:#ccc;font-size:0.9em;">
    Es converteix en:
    <span class="especial">

El codi complet resulta:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Formulari de correu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
.fons
{
background-color:#eef;
}
.resaltat
{
color:#f00;
}
.resaltat2
{
color:#390;
}
.especial
{
color:#ccc;font-size:0.9em;
}
.avis
{
font-weight:bold;font-family:Arial,Helvetica,sans-serif;
}
.parraf_especial
{
text-align:center;
}
</style>
</head>
<body class="fons">
<p class="parraf_especial">
<span class="avis">Hola
<span class="resaltat"> usuari</span>!</span>
<br>
<br>
A continuació escriu un correu electrònic <span class="resaltat2"> vàlid </span>.
<br>
L'utilitzarem per enviar-te la nostra
<a href="http://urlexemple.com">revista electrònica</a>.</p>
<form action="script.php" method="post">
<p class="parraf_especial">
Introdueix el correu:
<input type="text" maxlength="50" name="correu">
<br>
<input type="submit" name="enviar" value="Envia!!">
</p>
</form>
<span class="especial">
Si tens cap dubte, escriu-nos a </span>
<a href="mailto:exemple@mail.com">exemple@mail.com</a>
</body>
</html>

Gràcies a aquesta mesura, tenim els estils ubicats en un sol lloc: en el HEAD. Hi ha unes classes creades i múltiples etiquetes en el codi HTML poden fer-ne ús. D'aquesta manera, tan sols modificant una línia al CSS obtenim un canvi visual en tots aquells elements que apliquin la classe modificada.

Amb aquesta mesura ja hem aconseguit introduïr tres aspectes favorables a l'eficiència del procés creatiu:

  • Modular: s'ha separat el codi destinat a estructurar del codi destinat a la representació.
  • Reduïr el temps de reedició visual: el codi destinat a representació visual està agrupat i un canvi subtil en ell pot afectar a múltiples elements del document.
  • Multiplicar les possibilitats del disseny: amb CSS es poden especificar molts més paràmetres d'estil que amb atributs d'HTML (ho veurem més endavant en el curs).

Tantmateix no hem acabat. Què succeïrà si tenim més d'un document HTML al que volem aplicar els mateixos estils CSS? Amb el sistema actual hauríem de reproduïr les línies de CSS entre l'etiqueta <style> i </style> a tots els documents HTML. Un canvi en un paràmetre de CSS d'un document HTML, s'hauria de reproduïr a tots els altres si aquests utilitzen el mateix sistema.

Si tot un conjunt de documents precisen de la mateixa especificació, no ho podríem fer més fàcil? La resposta està al proper apartat.

Importar fulls d'estils CSSamunt

En una comunitat de veïns, quan es prèn una decisió com repintar la façana, s'ha d'aconseguir que hi hagi uniformitat de colors. Si es decideix posar verd fosc, no pot ser que un veí tingui un verd fosc tirant a groc i un altre el tingui tirant a blau.

Per evitar aquest dilema, els veïns no hauran de pintar ells la façana, amb el risc de fer una mescla de pintura amb disolvents o aigua que no s'ajusti al color desitjat, sino que encarreguen la tasca a una sola persona: un pintor professional. Aquest pintor s'encarregarà d'aplicar la seva metodologia de la mateixa manera a les façanes de totes les cases de la comunitat.

Quan tenim centenars de pàgines web ben estructurades i pensades per aplicar-hi estils CSS, i es desitja que aquests siguin els mateixos per a totes les webs, enlloc d'aplicar CSS pàgina a pàgina podem ubicar tot el codi CSS a un sol fitxer extern i vincular-lo a totes les webs que el requereixin.

En el sistema de l'apartat anterior, HTML i CSS estan en el mateix document

En el sistema de l'apartat anterior, HTML i CSS estan en el mateix document

Ara passarem a:

Podem separar físicament el codi CSS de l'HTML

HTML i CSS estan en documents diferents. Els estils són importats.

Fer la separació física entre codi CSS i HTML és molt fàcil. Només cal que exportem el CSS a un nou fitxer i després podrem aplicar la importació de CSS, per còmic que sembli.

Prendrem el codi CSS que actualment tenim a la nostra pàgina web d'exemple: tot el que hi ha entre l'etiqueta <style> i </style>, és a dir, la Figura 1 (veure més amunt).

Emmagatzemarem aquestes línies de codi en un nou fitxer que crearem en el mateix directori on es trobi la nostra pàgina web actual. L'anomenarem: exemple.css. Noteu l'extensió .css per a documents amb codi CSS.

Heus aquí el nostre fitxer exemple.css :

.fons
{
background-color:#eef;
}
.resaltat
{
color:#f00;
}
.resaltat2
{
color:#390;
}
.especial
{
color:#ccc;font-size:0.9em;
}
.avis
{
font-weight:bold;font-family:Arial,Helvetica,sans-serif;
}
.parraf_especial
{
text-align:center;
}

Com veieu es tracta del mateix codi que abans teníem en el HEAD

El següent pas és modificar el codi HTML per a què aquest tingui un vincle al document CSS per tal d'aplicar els estils que aquest conté. La tasca de vincular recursos externs amb un document HTML la fa la directiva LINK, i es declara dintre del HEAD.

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

L'atribut rel especifica el tipus de recurs que es vol vincular, en aquest cas stylesheet (fulla d'estils). L'atribut type especifica el tipus MIME del recurs, en aquest cas text/css. L'atribut href especifica la ruta relativa o absoluta al recurs, en aquest cas el fitxer es troba al mateix directori que el document HTML i s'anomena exemple.css.

El codi HTML, per tant, quedaria així:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Formulari de correu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="exemple.css"> </head>
<body class="fons">
<p class="parraf_especial">
<span class="avis">Hola
<span class="resaltat"> usuari</span>!</span>
<br>
<br>
A continuació escriu un correu electrònic <span class="resaltat2"> vàlid </span>.
<br>
L'utilitzarem per enviar-te la nostra
<a href="http://urlexemple.com">revista electrònica</a>.</p>
<form action="script.php" method="post">
<p class="parraf_especial">
Introdueix el correu:
<input type="text" maxlength="50" name="correu">
<br>
<input type="submit" name="enviar" value="Envia!!">
</p>
</form>
<span class="especial">
Si tens cap dubte, escriu-nos a </span>
<a href="mailto:exemple@mail.com">exemple@mail.com</a>
</body>
</html>

Mitjançant la importació de CSS podrem potenciar la capacitat modular del site (separació física del codi destinat a la representació, del codi estructural), obtindrem més possibilitats de disseny a la web (amb CSS es poden especificar molts estils) i el temps de reedició visual (temps emprat a fer retocs d'estil a les pàgines) es redueix dràsticament.

Objectiu aconseguitamunt

Per fi, el programador es podrà dedicar a estructurar les dades a mostrar i el programador/ dissenyador de CSS a transformar el contingut per a què s'adequï al disseny concebut pel dissenyador.

Hem passat d'un sistema en el que el codi destinat a representar la informació estaba confús i indiferenciat amb el codi estructural, a un sistema modular, on estan diferenciades cada una de les parts.

Mitjançant la importació de fulls d'estils amb CSS, l'esquema dels 3 mòduls del procés creatiu, comentada a la secció anterior, es pot aplicar de forma eficient.

És a dir, a partir d'ara podrem separar el programador d'HTML, del programador/dissenyador de CSS. Un es podrà dedicar a estructurar les dades a mostrar i l'altre a transformar el contingut per a què s'adequï al disseny concebut pel dissenyador. Però per a què el sistema funcioni, ambdós parts han d'aplicar una metodologia que afavoreixi la feina de cada part.

En aquest curs, no només s'ensenyarà a programar/dissenyar amb CSS sino que també s'ensenyarà al programador d'HTML com estructurar correctament el seu codi per a què sigui fàcilment manipulable amb estils CSS.

Què signfica programar bé? Significa programar estructuradament, utilitzant classes allà on hi hagi zones susceptibles de ser representades visualment de forma específica, adjudicant referències per poder identificar parts del codi a manipular després des del CSS, etc.

De moment, però, comencem a explicar la semàntica del llenguatge CSS.