L'editor dei template


Apre l'editor dei template

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.

L'elenco dei tag e delle proprietà è volutamente limitato allo stretto necessario.

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.
Logo ufficiale

Tutorials & tips

Admin
Accessi e attivazione L'editor dei template Il database

Template viewer


Scarica la guida in linea - DOC (1332 kb)





Aggiungi ai preferiti