L'uso dei template, oltre a rispondere all'esigenza di creare
siti diversi con un unico motore, permette di separare i contenuti
testuali del sito dalla loro formattazione, e i contenuti
tout-court dalla grafica: se un aspetto grafico non piace, basta
un click per cambiarlo. Se nessuno di quelli proposti piace, è
sufficiente esibire uno screenshot di come si vorrebbe il proprio
sito: l'editor permette, a partire dall'immagine di una pagina
web, di creare il template corrispondente in meno di un'ora.
Questa parte del programma è la più complessa.
Non è accessibile ai comitati, e richiede una conoscenza di
base dei CSS, oltre che della struttura interna del programma.
Cominciamo da quest'ultima.
Aprire il codice HTML di una pagina qualsiasi generata dal
programma. Noteremo che essa inizia con un foglio di stile: ci
sono identificatori unici, classi e tag. Segue la pagina vera e
propria, composta da una lunga serie di tabelle annidate: molte di
esse sono vuote, altre contengono effettivamente il testo e gli
altri elementi della pagina.
La prima operazione che il programma compie per generare una
pagina è quindi la creazione del foglio di stile, che
risiede nel database (tabella TEMPLATE_CSS) ed è costruito
dall'utente con l'editor dei template. In pratica, il foglio di
stile di un template non è altro che la serie di istruzioni
visibili nei primi tre pannelli al centro dell'editor. Si noti
però che queste istruzioni non contengono alcuna riga per
definire immagini (background-image:url). Queste righe sono
generate infatti dall'esistenza fisica delle immagini, non dal
database. Inoltre, la combinazione di proprietà applicate a
tabelle e celle consente di ottenere sovrapposizioni ed effetti
complessi.
La struttura risiede anch'essa nel database (tabella
STRUTTURA). Essa viene eseguita in sequenza ad ogni chiamata di
pagina, sia nel sito che nell'editor. Ogni tabella ed ogni cella
possiedono un identificatore univoco. Alcune di queste tabelle
annidate sono destinate a contenuti fissi, altre a contenuti
variabili. La struttura si compone di questi elementi:
page contenuta nel tag body, contiene tutti gli altri elementi
side_left barra sinistra esterna agli header, contiene 7 tabelle di cui 3
destinate ad elementi fissi
testata del sito, composta da:
lang contiene 3 tabelle destinate agli elementi fissi
header contiene 3 tabelle destinate agli elementi fissi
menu contiene 3 tabelle destinate agli elementi fissi
top contiene 3 tabelle destinate agli elementi fissi
container - contiene 3 celle che a loro volta contengono:
left barra sinistra interna, contiene 7 tabelle di cui 4 destinate
ad elementi fissi
main destinata ai soli elementi variabili, contiene anche 4 celle
con tabella divisa in 4 celle
right barra destra interna, contiene 7 tabelle di cui 4 destinate ad
elementi fissi
bottom contiene 3 tabelle destinate agli elementi fissi
side_right barra destra esterna agli header, contiene 7 tabelle di cui 3
destinate ad elementi fissi
footer contiene una sola cella, con nome ed indirizzo del comitato
L'elenco delle tabelle fisse (32 in tutto) compone le colonne
della tabella MAP, nella quale, per ogni template, i campi che
prevedono un elemento fisso risultano valorizzati con il nome
dell'elemento. Per ogni template, dato che gli elementi fissi sono
sempre 7 (toolbar, navbar, links, logo, slogan, flags, back),
avremo sempre 7 campi pieni e 25 vuoti.
La struttura, quando incontra un identificatore, verifica in
primo luogo se appartiene alla serie fissa o variabile, se cioé
esiste nella tabella MAP una colonna con quel nome. Nel primo caso
controlla se il template corrente prevede che essa sia
implementata; se lo è, estrae i contenuti dal database
(tabella CONTENT), se esistono. Nel secondo caso estrae
direttamente i contenuti variabili, sempre se ci sono. Di
conseguenza, tutti i testi dei siti, siano essi pulsanti o pagine
intere, risiedono nella tabella CONTENT. Le celle e gli elenchi
risiedono nella tabella CONTENT_SUB.
Le colonne attivabili sono cinque: due colonne esterne che
sovrastano gli header, due colonne laterali interne sotto gli
header, e la colonna centrale, destinata sempre a contenuti
variabili. L'attivazione e la disposizione di queste colonne è
definita dal template in un unico campo della tabella MAP, il
campo LAYOUT. Questo campo si compone di 4 cifre: due zeri, un 1 e
un 2, che danno quindi origine a 16 possibili combinazioni. Zero
significa disattivato, 1 ha la precedenza su 2. Ogni numero si
riferisce a una colonna. Quella centrale è ignorata, in
quanto sempre variabile per definizione.
Quindi, per fare degli esempi, il layout 0120 (il più
comune) produce un sito con header, la colonna principale a
sinistra e quella secondaria a destra, se esiste. Il layout 0210
inverte le due colonne laterali, il layout 1200 colloca la barra
di navigazione principale a sinistra dell'header, e così
via. Quindi, un sito generato può avere al massimo 3 o 4
colonne, anche se quelle effettive sono 5.
Più in concreto, seguire le fasi di creazione di un
template ex-novo:
La creazione di un template si effettua digitandone il nome
nella casella di testo del menu principale. Il template si colloca
di default al centro dello schermo. Se si desidera a sinistra, il
nome deve essere seguito dal suffisso _left.
Un template generato e visualizzato senza sito produce una
pagina vuota. In realtà questa pagina contiene già
una struttura, come è possibile verificare dal codice, ma
la struttura è solo una linea larga quanto lo schermo, ed
alta zero pixel.
Applicando un sito ad un template vuoto, si comincia a vedere
qualcosa: solo gli elementi variabili. Infatti gli elementi fissi,
essendo ancora privi di mappatura, sono ignorati.
Procediamo quindi a mappare gli elementi fissi. L'operazione si
effettua con le listbox situate nella parte in basso dell'editor.
Ogni listbox contiene l'elenco delle aree possibili. Tutte e 7
devono essere implementate, e non devono contenere duplicati: ogni
area può contenere un solo elemento fisso. La listbox
scrollbar serve per colorare la barra a destra, ma per ora è
vuota. La listbox layout è posizionata sul layout più
comune (0120).
Premere APPLICA: a questo punto il sito diventa visibile e
navigabile, anche se privo di grafica. E' possibile notare che,
modificando i valori nella mappatura, cambia la disposizione dei
vari elementi. I contenuti, sia fissi che variabili, occupano
tutto lo schermo e sono sempre allineati a sinistra.
A questo punto è necessario prendere in esame la parte
centrale, suddivisa in 4 pannelli ognuno dei quali provvisto di un
titolo e una listbox:
identificatori sono i nomi delle tabelle e delle celle che costituiscono la
struttura (200 circa)
classi sono i nomi degli elementi fissi cui può essere
applicato uno stile
tag elenco dei tag html, limitato allo stretto necessario
immagini La listbox contiene tutti e tre gli elenchi precedenti
In pratica, le tabelle e le celle utilizzano gli
identificatori, gli elementi fissi utilizzano le classi, e i tag
si comportano come nel CSS standard. Le immagini di background,
cioé le immagini del template, possono essere applicate a
identificatori, classi e tag. Iniziamo ad effettuare prove
partendo da queste ultime.
Per applicare un'immagine al template, selezionare un
identificatore, una classe o un tag. Si apre un fieldset con lo
strumento SFOGLIA, seguito da varie opzioni, che permettono di
scegliere:
se l'immagine deve determinare la larghezza del suo contenitore
se l'immagine deve determinare l'altezza del suo contenitore
la posizione dell'immagine
il tipo di replica dell'immagine
il tipo di scrolling
L'immagine inviata, oltre che nel sito compare nel pannello di
destra: come si può notare, il suo nome è lo stesso
dell'elemento cui si riferisce. Le 5 opzioni, se indicate,
generano ognuna una riga di codice, che appare nel pannello
corrispondente, preceduta dal cestino. Ognuna di queste righe può
essere creata o eliminata, ma non modificata.
Le altre tre listbox funzionano invece tutte alla stessa
maniera: si sceglie una proprietà e in base alla proprietà
selezionata appaiono le listbox o le caselle necessarie per
definire gli attributi, che possono essere:
numero (da -10 a 1000: alcune proprietà, come ad esempio
MARGIN, accettano valori negativi)
stringa (i valori previsti sono contenuti in una listbox)
colore (una listbox con i colori già inseriti e una
casella per digitare quelli nuovi)
url (l'indirizzo e il nome delle immagini del template)
L'operazione completata genera una riga di codice nel pannello
corrispondente.
L'attributo filter visualizza due parentesi: se si devono
inserire valori diversi da quelli di default, devono essere
digitati manualmente.
I colori inseriti, oltre a popolare la listbox precedente,
popolano anche la listbox in basso per la scrollbar, e creano la
palette personalizzata, in alto a destra.
Un template completo in genere richiede da 60 a 140 righe di
codice. Facendo click sull'icona in alto a destra, simile a quella
del menu principale, è possibile di volta in volta vedere
il risultato nella pagina corrente.
Normalizzare un template
Per normalizzare una template, è sufficiente lavorare
sullo screenshot di una pagina. Queste sono le fasi di
lavorazione:
Definire gli attributi del tag body e salvare l’immagine
dopo aver selezionato il tag BODY dalla listbox IMAGES, se la
videata possiede un’immagine di background. Il nome
originale dell'immagine è ininfluente. Questa procedura è
identica per tutti i tag, le classi e gli identificatori. Il tag
td eredita dal tag body tutti gli attributi eccetto font-size che
quindi va ripetuto.
Se la pagina non occupa tutto lo schermo, va ritagliata per
ottenere il valore width del contenitore #page. La larghezza è
necessaria anche per il primo elemento della serie (in genere
#lang), in quanto può essere uguale ma anche inferiore a
#page.
Gli elementi successivi ereditano questa larghezza, quindi non
hanno più bisogno di questo valore, ma solo eventualmente
di altezza, determinata in genere dall’immagine da
contenere. In caso di altezza assente, questa sarà
determinata dal contenuto più esteso di una cella o di una
tabella interna.
Tagliata la pagina, la prima distinzione da rilevare è
se la pagina contiene un’area laterale che precede la
testata. In caso negativo (il più frequente), la prima
separazione da effettuare è tra la testata (che conterrà
lang, header, menu e top) e il container, per cui il taglio sarà
orizzontale. Viceversa, il taglio sarà verticale.
Le fasi successive consistono nel ricavare per sottrazioni
successive aree omogenee a livello di immagini o colori di
background: esse in genere coincidono con le aree dei contenuti
fissi o variabili.
Una volta definito il layout di pagina, si può mettere
mano alle modalità di visualizzazione dei pulsanti: come
già visto, i pulsanti utilizzano le classi. Ogni classe ha
lo stesso nome del gruppo cui si riferisce.
Il modo migliore per imparare come si fabbrica un template, è
osservare il codice di quelli già creati, e le soluzioni
adottate per rappresentare correttamente la pagina di origine,
Mostrare o nascondere i templates
I templates contenuti nel pannello di destra sono solo una
parte di quelli resi disponibili dal programma: l'elenco completo
(attualmente 166 templates) è visibilie solo nell'editor
dei templates, quindi dall'editor templates è possibile
utilizzare tutti i template per visualizzare un sito. Infatti, per
qualsiasi ragione si può decidere di limitare il numero dei
templates disponibili, o pubblicarli ad esempio dopo opportune
modifiche.
La visibilità dei templates è regolata dalla
scrollbar del pannello inferiore, quello che definisce le aree con
contenuti fissi. Se il colore della scrollbar è
valorizzato, il template è visibile e utilizzabile,
altrimenti esso resta parcheggiato solo nell'editor.