Modificació de l'entorn visual detic_blau (pràctica opcional)
En aquesta pràctica es durà a terme la primera part d’un procediment guiat amb el qual es modificarà l’entorn visual detic_blau.
El canvi consisteix a substituir la imatge de la capçalera, situada a sobre del menú horitzontal, per una taula de dues cel·les. La cel·la esquerra tindrà un fons blau i contindrà el títol de la intranet, mentre que la de la dreta contindrà el bloc Idiomes, que es proporciona amb la maqueta. Si es creu convenient, es pot utilitzar un altre bloc.
Aquest canvi només es farà a la pàgina inicial, és a dir, a la pàgina de tres columnes que apareix en accedir a la intranet.
Des del menú horitzontal de la capçalera, accediu a Administració –> Sistema i feu clic a la icona Xanthia.
Localitzeu la fila corresponent a l’entorn visual detic_blau i cliqueu a l’enllaç Edita.
En el menú horitzontal corresponent a la configuració de l’entorn visual detic_blau, cliqueu a la pestanya Marcadors.
Apareixerà la taula dels marcadors. A la fila amb el text Afegeix un marcador introduïu el nom Idiomes i el codi IDIOMES a les columnes corresponents.
Cliqueu a Tramet.
Una vegada creat el marcador, cal editar la plantilla adequada per tal de fer-hi les modificacions indicades anteriorment i d’introduir-hi el marcador.
Accediu a les Plantilles.
Heu de modificar la plantilla de mòdul *home.htm.
Feu clic a l’acció Edita corresponent per accedir al codi de la plantilla.
Cliqueu a dins del quadre d’edició de la plantilla. Si esteu utilitzant l’editor visual apareixerà una finestra on es pregunta si es vol utilitzar o no. Cliqueu a Cancel·la. El seu ús trencaria completament la plantilla.
Desplaceu-vos pel codi.
Observeu el DOCTYPE (primera línia del codi de la plantilla). Es tracta d’una pàgina web que compleix l’estàndard XHTML 1.1. Busqueu les etiquetes <head> i </head> corresponents a la capçalera.
Immediatament a sota del tancament de la capçalera trobareu l’etiqueta <body>. Com podeu veure, té estructura de pàgina web tradicional.
Tres línies més avall, trobareu el codi següent:
Elimineu-lo i poseu en el seu lloc aquest codi (copieu i enganxeu):
<table style="width:100%; background:<!--[$color1]-->;">
<tr>
<td style="font-size:250%; vertical-align:middle;"><!--[sitename]--></td>
<td style="background:<!--[$color5]-->;"><!--[$IDIOMES]--></td>
</tr>
</table>
Cliqueu a Tramet.
Podeu veure l’efecte d’aquest canvi visitant la pàgina d’inici (hi podeu accedir ràpidament mitjançant l’opció Inici del menú horitzontal de la capçalera de la intranet).
Observeu que apareix el text que heu indicat com a títol a la configuració general de la intranet, centrat verticalment i amb una mida dues vegades i mitja superior a la normal. En canvi el marcador del tauler no ha tingut cap efecte. Això és degut al control de blocs que està desactivat. Aquesta operació es durà a terme a la pràctica següent.
Fixeu-vos en el codi que acabeu d’afegir. L’atribut d’estil de la segona columna conté el codi <!–[$color5]–>. Aquesta és la manera de cridar les variables del pnRender.
Com recordareu, les pàgines de la intranet s’obtenen mitjançant la compilació de les plantilles, moment en el qual les variables són substituïdes pel seu valor. El pnRender considera una variable tot aquell codi que es troba entre les combinacions de caràcters <!–[ i ]–> i que comença amb el caràcter $ (no pot contenir espais en blanc). Per tant, $color5 és una variable.
El procediment de creació de variables només està a l’abast de la persona que ha dissenyat l’entorn visual o dels desenvolupadors del PostNuke, de manera que, com a administrador/a l’única cosa que es pot fer és utilitzar les existents.
El Xanthia defineix les variables següents relatives als colors: $bgcolor, $color1, $color2, $color3, $color4, $color5, $color6, $color7, $color8, $sepcolor, $text1color, $text2color, $linkcolor, $vlinkcolor i $hovercolor.
Totes aquestes variables es poden utilitzar dins dels entorns visuals tal com s’ha mostrat anteriorment. Si es fa així, des de l’administració es podran modificar aquests colors de manera visual a la pestanya Colors de la configuració de l’entorn visual.
Cliqueu a la pestanya Colors i veureu les paletes de colors disponibles. Cada paleta es mostra en una taula amb els noms dels colors, el seu codi i una mostra de cada un.
Feu clic a l’opció Configura de l’entorn detic_blau.
Veureu una pantalla dividida en tres zones: la primera és una àrea de botons que permet seleccionar una de les variables disponibles com a pas previ per modificar-ne el valor.
Cliqueu sobre el botó Color 5.
La segona zona conté les instruccions en anglès (actualment no es poden traduir amb el paquet d’idioma) per canviar els colors i una taula de mostres.
La tercera és un mapa dels possibles colors que es poden triar.
Amb aquest mètode visual, no es pot triar cap color que no sigui al mapa. En cas que es volgués fer, caldria accedir directament a la base de dades mitjançant el phpMyAdmin.
Localitzeu el color blanc en el mapa i feu-hi clic.
Observeu que el color de fons de la sisena casella ha canviat, passant de negre a blanc. El que heu fet és assignar el color blanc a la variable $color5.
Cada una de les nou caselles de la taula de mostres té un color de fons corresponent a les variables $colorx. A la casella central li correspon el color $background. Els textos de l’interior de les caselles apareixen amb el color que tenen assignat, de manera que es pot apreciar el seu aspecte amb diferents colors de fons.
Observeu que els enllaços (links) tenen assignat el color negre, tot i que els enllaços de la intranet quan s’utilitza l’entorn detic_blau són de color blau. Aquesta aparent incoherència es deu a què durant el desenvolupament del detic_blau no es va contemplar la possibilitat que el color dels enllaços es pogués modificar utilitzant aquesta eina.
Cliqueu a Submit these colors, situat a la part inferior de la pàgina, per desar els canvis.
