Mòdul 7 - Pràctica 3

Les restriccions imposades per l'arquitectura utilitzada a Àgora fan que es puguin utilitzar les opcions de configuració dels entorns visuals. L'alternativa de que disposeu per poder fer canvis a l'estètica és utilitzar una tècnica diferent: el full d'estils.

Els fulls d'estils, també anomenats CSS, són uns fitxers de text que contenen instruccions escrites en un llenguatge específic que modifiquen l'estètica de les pàgines web.

Aquest fitxer es pot obrir amb qualsevol editor de text sense format (no utilitzeu mai cap paquet ofimàtic) i es pot modificar. El principal inconvenient que té és que, per fer canvis substancials, calen coneixements de programació web perquè, en cas contrari, és molt difícil saber que s'ha de modificar.

Com que els administradors de les intranets no tenen accés als fitxers del Zikula, s'ha creat un mecanisme per tal de poder modificar el full d'estils: el sistema busca un fitxer dins del directori theme dels fitxers del lloc i, si hi és, aplica els canvis que hi diu.

Tot seguit veureu com descarregar el full d'estils de l'entorn visual Intraweb XTEC d'Àgora, fer-hi canvis i tornar-lo a pujar.

⇒ Entreu a la intranet amb l'usuari/ària admin.

⇒ Aneu a Administració → Mòduls IW → Fitxers del lloc.

⇒ Entreu en el directori theme.

⇒ Descarregueu el fitxer style.css i deseu-lo a l'escriptori del vostre ordinador. Després l'editareu.

⇒ Canvieu-li el nom al fitxer style.css. Anomeneu-lo style-original.css.

Si el fitxer style.css està buit (sense cap contingut) o si no existeix, la intranet no se'n veu afectada perquè es tracta d'un fitxer opcional destinat a contenir configuració complementària de l'estètica.

⇒ Aneu a l'escriptori i obriu el fitxer style.css que acabeu de descarregar.

El fitxer style.css és de tipus "text pla sense format". Això vol dir que el podeu obrir amb diversos programes. Si sou usuaris del Windows podeu utilitzar el Wordpad o el Dreamweaver. Si sou usuaris de la Linkat podeu utilitzar el gedit o el Kompozer. En ambdós casos, hi ha moltes més alternatives. Si no sabeu quina triar, proveu a fer doble clic sobre el nom del fitxer.

El contingut del fitxer té un aspecte similar al següent:

body {
	background-color: #CCC;
	font-size: 12px;
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	margin: 0px;
	padding: 0px;
}
 
table, div, p, input, textarea, select {
	color: #000000;
	font-size: 1em;
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
 
td { vertical-align: top; }
 
textarea { width: 99%; }
 
a img { border: 0px; }
 
(segueix)

Si no esteu familiaritzats amb els fulls d'estils quedeu-vos amb aquesta idea: els continguts s'organitzen en blocs de text que comencen amb el caràcter { i acaben amb el caràcter }. Cada un d'aquests blocs va precedit per una o vàries paraules que defineixen les parts de la pàgina web (les etiquetes) a les que afecta.

Per modificar l'estètica de la intranet cal introduir les paraules clau adients en els caràcters { i } del bloc que pertoqui. Les paraules clau són atributs CSS, sobre els quals es pot trobar fàcilment informació per Internet.

Tot seguit veureu tres exemples de canvis fets sobre el fitxer style.css.

⇒ Aneu a l'editor de text i localitzeu el codi següent (està a l'inici del document):

Codi original

body {
	background-color: #CCC;
	font-size: 12px;
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	margin: 0px;
	padding: 0px;
}

⇒ Substituïu el codi original pel següent:

Codi modificat

body {
	background-color: #A4DF45;
	font-size: 12px;
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	margin: auto;
	padding: 0px;
	width: 1000px;
}

⇒ Deseu el fitxer.

Els canvis efectuats afecten a tres atributs:

• background-color: canvia el color de fons de la pàgina web. En el cas de la intranet només afecta a les franges laterals i al peu perquè els continguts es troben "a sobre" del color de fons.
• margin: canvia els marges. Es posa a valor auto, cosa que provoca que els continguts estiguin centrats.
• width: s'afegeix aquest atribut per fer que l'amplada de la intranet sempre sigui la mateixa.

⇒ Aneu a l'editor de text i localitzeu el codi següent:

Codi original

.left_block_title { color:#000; background:#e4e1df; margin:0px; padding:3px; }
.left_block_content { color:#457fb9; background:#b3cadb; padding: 0px 5px 5px 5px;}

⇒ Substituïu el codi original pel següent:

Codi modificat

.left_block_title { color:#000; background:#DEEFC2; margin:0px; padding:3px; }
.left_block_content { color:#457fb9; background:#FFFFDF; padding: 0px 5px 5px 5px;}

⇒ Deseu el fitxer.

Els canvis efectuats afecten a l'atribut background del títol del bloc i al del contingut del bloc. En aquest cas s'ha utilitzat l'atribut background en lloc del background-color, però l'efecte és el mateix.

Les etiquetes .left_block_title i .left_block_content, tot i que pel seu nom sembla que només haurien d'afectar als blocs de la columna esquerra, afecten a tots els blocs. Si voleu tractar diferent els blocs de les columnes esquerra, central i dreta, heu d'utilitzar etiquetes més extenses:

Codi només per a la columna esquerra:

.z-blockposition-left .left_block_title { 
	color:#ff0000;
}

Codi només per a la columna central:

.z-blockposition-center .left_block_title { 
	color:#00ff00;
}

Codi només per a la columna dreta:

.z-blockposition-right .left_block_title { 
	color:#0000ff;
}

Entre els parèntesis podeu incloure-hi tots els atributs CSS que vulgueu. Per fer l'exemple només s'ha inclòs l'atribut color, que afecta al color del text.

⇒ Aneu a l'editor de text i localitzeu el codi següent:

Codi original

#wrapper {
	margin: auto;
	padding: 2px;
}
#themelogo { }
#menu { }

⇒ Substituïu el codi original pel següent:

Codi modificat

#wrapper {
	margin: auto;
	padding: 2px;
	background-color: #FFFFEF !important;
}
#themelogo { background-color:#EDFFCF !important; }
#menu { background-color:#FFE9AF !important; }

⇒ Deseu el fitxer.

En aquesta ocasió, heu modificat el color de fons de l'etiqueta wrapper, que correspon a tota la intranet a excepció de la capçalera, el peu i les franges laterals, el de l'etiqueta themelogo, que correspon a la capçalera sense la zona reservada al menú i l'etiqueta menu que, com el seu nom indica, és un espai destinat a la visualització d'aquest element.

Pujar el full d'estils al servidor és una operació molt senzilla. A la pràctica del mòdul principal Intraweb vàreu veure el procediment per fer-ho. A mode de recordatori, tot seguit es llisten els passos:

⇒ Aneu a Administració → Mòduls IW → Fitxers del lloc.

⇒ Entreu en el directori theme.

⇒ Si el fitxer style.css existeix, canvieu-li el nom o esborreu-lo per tal de deixar espai pel nou fitxer.

⇒ Feu clic a la icona Puja un fitxer.

⇒ Apareixerà un formulari on heu de fer clic en el botó Navega per moure-us pel vostre ordinador i seleccionar el fitxer style.css.

⇒ Feu clic a la icona Accepta.

És possible que us aparegui un missatge d'error indicant que l'extensió css no està permesa. En aquest cas, el que heu de fer és anar als Paràmetres de configuració d'aquest mateix mòdul i afegir l'extensió en el paràmetres Extensions permeses i repetir el procés.

Si heu fet tots els canvis indicats a l'apartat anterior, passareu d'un aspecte com aquest:

a un aspecte com aquest:

És probable que també vulgueu fer canvis a la posició del menú horitzontal de la capçalera. En aquest cas, recordeu que la seva configuració es pot canviar (colors inclosos) des d'Administració → Mòduls IW → Menú → Configura el mòdul.

Si voleu canviar els colors del bloc de l'agenda heu d'anar a Administració → Mòduls IW → Agendes → Configura el mòdul i modificar la configuració.

El logotip que apareix a la part superior dreta de la capçalera es pot canviar fàcilment. Com en el cas del full d'estils, hi ha un logotip que es carrega si no es pot trobar el personalitzat en el directori theme dels fitxers del lloc.

Anteriorment, quan heu descarregat el fitxer style.css heu vist que en el directori theme també hi apareix un fitxer anomenat logo.png. Aquest és el logotip personalitzat que, inicialment, és una imatge idèntica a la que es carrega quan no n'hi ha cap en el directori theme.

Si voleu modificar-lo, només l'heu de descarregar, modificar i tornar a pujar de la mateixa manera que heu fet amb el full d'estils.

Les mides originals de la imatge són 249 píxels d'amplada per 105 d'alçada, però no cal respectar aquestes mides. La imatge es carrega com a imatge de fons. Això vol dir que només es mostra la part de la imatge que cap a l'espai reservat. La resta no es mostra, de manera que no altera la distribució dels elements a la pàgina.

Per tant, si pugeu una imatge massa gran, només es mostra la part de la imatge que coincideix amb les mides de la capçalera. Si la imatge és petita, s'alinea a dalt i a la dreta de la capçalera, tal i com succeeix amb el logotip predefinit.

El directori theme pot contenir logotips i fulls d'estils dels tres entorns visuals desenvolupats per l'equip del projecte Intraweb. Com veureu a les dues pràctiques següents, cada un d'ells utilitza noms diferents, de manera que poden conviure en el servidor. Els noms que s'han d'utilitzar són els següents: