Realizzazione template

L’applicativo web, durante la navigazione, interpreta i template in modo dinamico partendo da apposite istruzioni che andranno a formare il template stesso. Il fatto che i template siano generati dinamicamente, offre all’applicativo la caratteristica non trascurabile che ogni template realizzato e distribuito, viene adattato dinamicamente, ovvero, per cosi dire “al volo”. Per i dispositivi cellulari e palmari (detti handheld), qualora il visitatore navighi con uno di questi, il template verrà automaticamente adattato dinamicamente per il dispositivo usato. Tale adattamento avviene sia a livello di applicativo web, che per mezzo dell’aggiunta ereditaria della stile dinamico handheld.css al template in uso. Nel caso di navigazione per mezzo di un dispositivo handheld, l’applicativo fornirà al browser immagini opportunamente ridimensionate (scalate in base alla risoluzione), ed il template in uso erediterà le caratteristiche aggiuntive dello stile handheld.css che meglio adatta i contenuti ai dispositivi palmari. Attualmente i browser per dispositivi cellulari, non sempre interpretano i CSS in maniera appropriata, tuttavia per il futuro questa funzionalità intrinseca nell’applicativo renderà estremamente navigabili i siti web così realizzati anche su dispositivi portatili di piccole dimensioni.

I template che caratterizzano l’applicativo web sono composti da file che seguendo uno standard già affermato e conclamato, possono essere tranquillamente modificati o realizzati ex novo stando alle specifiche dei singoli file che nel nostro caso sono CSS e XML.
I file costituenti il template (CSS e XML), sono custoditi nella directory e sottodirectory di “app_data\skins”. Esaminando il contenuto di questa cartella, troviamo in prima linea una serie di file XML. Ognuno di questi file descrive un template, ragion per cui nell’applicativo web potremo scegliere tanti template quanti siano i file qui contenuti. Secondo questa logica, con un esempio possiamo dire che ad un ipotetico skin dal nome “Dark”, dovrà necessariamente corrispondere un file “dark.xml” posto nella directory “app_data\skins”.
Il file in questione contiene una serie di valori associati a chiavi.
Le chiavi possono essere 2 e sono “Style” e “Setup” e non a caso nella directory “app_data\skins” troviamo le sottodirectory Styles e Setups nelle quali troviamo rispettivamente una serie di file CSS e una serie di file XML che servono ad impostare delle variabili utilizzabili nel CSS.
Le coppie chiave-valore contenute nei file XML del template, non fanno altro che definire quali siano i file di style (CSS) e i file di settaggio (XML) utili per la creazione dinamica del template, tali file chiaramente sono quelli collocati nelle sottodirectory Styles e Serups già precedentemente menzionate.
Per una corretta interpretazione si consiglia di prendere ad esempio i template già realizzati e distribuiti con l’applicativo.
Aprendo con un qualsiasi editor XML o di testo, il file XML descrittivo del template, troviamo una lista che può comprendere uno o più stili e uno o più settaggi, tale lista è rappresentata da una serie di marcatori Key/Valore che definiscono quali siano i CSS facenti parte del template e quali siano i settaggi. Tali configurazioni sono rappresentate da file contenuti nelle sottocartelle Styles e Setups, prima di procedere con al descrizione di tali file e come vengano impiegati dall’applicativo, è importante specificare che la realizzazione di ogni template ha come suo fondamento il concetto di ereditarietà, ciò significa che il file XML descrittivo del template può contenere riferimenti a molteplici stili (CSS), ognuno dei quali eredita le caratteristiche del precedente ampliandolo con le proprie. Con un esempio possiamo dire che un ipotetico template che ha riferimento a 2 file di stile dal nome “Dark” e “Raunded border”, genererà un template che ha entrambi le caratteristiche specificate dai CSS dinamici contenuti nella sottodirectory styles e denominati “Dark.css” e “Raunded border.css”.
Abbiamo accennato al CSS dinamico in quanto i file CSS utilizzati dall’applicativo, pur essendo dei file CSS standard, dispongono di un contenuto che durante il “rendering” viene modificato dinamicamente sostituendo le variabili in esso contenute con i rispettivi valori specificati nel file (o nei file) di settaggio XML specificati con la descrizione del template.
Supponiamo di avere un template denominato “Dark”:
Per tale template dovrà corrispondere un file “Dark.xml” posto in “app_data\skins”.
Tale file specificherà almeno un CSS posto in “app_data\skins\styles” e almeno un file di settaggio posto in “app_data\skins\setups” tale riferimento avviene nella modalità qui riportata a titolo esemplificativo:

Dai marcatori dell’esempio sopra riportato si denota che il template è composto dai file “app_data\skins\styles\DEFAULT.css” e “app_data\skins\setups\DARK COLOR.xml”.
Il file XML di settaggio (nel nostro esempio DARK COLOR.xml), non è nient’alto che una definizione di variabili. Tali variabili sono impiegate all’interno del file CSS e verranno rimpiazzate con il valore corrispondente quando l’applicativo web invierà il foglio di stile al browser.
Le variabili contenute nel foglio di stile CSS, sono contrassegnate dal prefisso $, per esempio l’ipotetica variabile definita nel file XML di settaggio “DARK COLOR.xml”, dal nome ColorLink, nel CSS sarà raffigurata come $ColorLink.
L’esempio che segue, definisce nel file CSS dinamico, il colore per il link che deve essere uguale alla variabile ColorLink definita nel file di settaggio:

A:link{color: $ColorLink;}

L’applicativo web, in fase d’esecuzione, sostituirà tutte le variabili marcate nel CSS dinamico e contrassegnate dal prefisso $, con il valore opportunamente assegnato dal file di configurazione XML associato al template e collocato nella sottodirectory Setups.
Tale tecnica permette la realizzazione veloce e semplice di più template che possono utilizzare il medesimo CSS, ma differire per alcuni aspetti come per esempio colori, tipo di font utilizzati, o qualsiasi altro aspetto che è possibile definire con delle variabili nel file di settaggio XML.
Tornando all’esempio sopra riportato, ecco nuovamente con un esempio la linea descrittiva della variabile ColorLink definita con il file di settaggio xml:

Nell’esempio qui riportato, l’interprete intrinseco nell’applicativo web, sostituirà dinamicamente la ricorrenza $ColorLink contenuta nel file CSS con il valore #0054a6 impostato nel file si settaggio XML. Detto ciò non sarà difficile comprendere per lo sviluppatore grafico quali siano le enormi potenzialità che questa tecnica basata su semplicissime peculiarità, possa offrire alla realizzazione di template che in questo modo hanno caratteristiche di ereditarietà facilmente definibili.
I file di settaggio oltre a contenere tutta una serie di variabili che andranno ad incidere sul file CSS, contengono anche delle variabili utilizzate dall’applicativo web, e che quindi possono determinare alcune azioni specifiche a livello di applicazione, tali variabili per convenzione le chiameremo “Inside variables”, termine inglese che sta ad indicare l’uso intrinseco di queste variabili per questioni interne all’applicativo.
Tali variabili sono facilmente identificabili dato che esse sono marcate con delle note, nei file di settaggio XML distribuiti con l’applicativo e utilizzabili sia come esempio che modificabili a piacimento per la realizzazione di template personalizzati.
In questa guida potiamo ad esempio alcune di queste variabili dette “Inside variables”, specificandone quale sia il loro utilizzo:
Favicon: Questa variabile indica all’applicativo la posizione relativa del file utilizzato come Favicon per il template in uso. La Favicon non è nient’altro che una icona che verrà associata al sito web nel caso in cui il sito venga posto nei favoriti del browser.
La Favicon come tutti i file di risorse per l’applicativo (immagini, suoni, script client, flash ecc..), deve essere obbligatoriamente collocata all’interno della directory “resources” posta nella root dell’applicazione. E’ inteso che la posizione più opportuna va cercata nelle sottodirectory della directory “resources”.
L’esempio che segue definisce la variabile Favicon nel file XML di settaggio:

Altre “Inside variables” di rilevante importanza sono ImageTopLeft e Logo che rispettivamente indicano all’applicativo web, quali immagini dovranno essere caricate nella parte superiore alta della pagina e che andranno a rappresentare il marchio del sito, ovvero quella immagine che di consuetudine nei siti web si trova in alto a sinistra e qualora venisse cliccata porterà il navigatore alla pagina principale.

Come nel caso della Favicon, anche le immagini di marchio ImageTopLeft e Logo debbono obbligatoriamente risiedere all’interno della directory “resources” che è anche l’unica che viene configurata come navigabile e visibile dall’esterno (per questioni di sicurezza, gli elementi al di fuori della directory “resources” non saranno accessibili dal web).
Le variabili ImageTopLeft e Logo, oltre a poter contenere il persorso a file di tipo grfico quail gif, png e jpg, possono contenere anche riferimenti a file flash riconoscibili per l’estensione swf, in tal caso sarò opportuno impostare l’adeguata dimensione dell’embedded flash così come dovrà apparire nel browser. Le impostazioni di dimensione per l’embedded flash debbono essere specificate tramite i parametri width e height da aggiungersi al percorso del file, come da esempio:

L’esempio sopra riportato indica all’applicativo web di inserire come immagine di logo (generalmente in alto a sinistra ma il CSS può anche specificare diversamente), un embedded realizzato in flash dal nome “intro.swf” collocato nella directory "resources/flash” di dimensioni 320 di larghezza per 180 pixel d’altezza.

Un'altra “Inside variable” utilissima per la realizzazione di template dalla forte personalizzazione, è la FolderIcons che a livello di applicativo viene utilizzata per specificare quale sia il set di icone da utilizzarsi per i bottoni e altre raffigurazioni varie. Il valore di questa variabile indica il nome della directory in cui pescare le icone, tale directory obbligatoriamente va collocata sotto il ramo “resources\images\icons”, nell’esempio che segue tramite la “Inside variable” FolderIcons andremo a specificare all’applicativo, che - per il determinato template – le icone sono collocate sotto la directory “resources\images\icons\48”.

Da notare che non occorre specificare il ramo della directory “resources\images”: Qualsiasi valore specificato con questa variabile è da considerarsi come sottodirectory del ramo “resources\images”.

Un’altra “Inside Variable” dalla funzionalità interessante, è la ButtonsWithIcons che rappresenta un valore boleano, ovvero uno switch ON/OFF: Qualora questa variabile assuma il valore “false”, l’applicativo web, non effettuerà il rendering delle immagini contenute nei bottoni, ciò significa che i bottoni appariranno privi dell’icona a loro assegnata. I possibili valori per questo parametro sono “true” e “false”.

L’esempio riportato sopra, inibisce (a livello applicazione) l’inserimento delle icone nei bottoni utilizzati nell’applicativo web.

Con questo breve documento abbiamo cercato di rendere chiaro e semplice, il funzionamento dei template dando le basi necessarie a chiunque abbia nozioni sufficienti di XML e CSS, per la realizzazione di skin personalizzate, qualora fossero necessari chiarimenti o ulteriori delucidazioni, si suggerisce d’utilizzare il forum per porre i vostri quesiti.

Realizzazione template

Come procedere per creare un template