I Templates Posizioni modulo in un template
| Posizioni modulo in un template |
 |
 |
 |
| Martedì 24 Febbraio 2009 17:28 |
|
Prima di affrontare il discorso sulle posizioni del template facciamo una breve introduzione sulla struttura di un template e, con un semplice esempio, proviamo a crearne uno. Cosa devo conoscere per poter modificare un template per Joomla?Anzitutto servono conoscenze di:
La conoscenza dei tag html e della composizione di pagine html è fondamentale. In realtà un template per Joomla ha la sua ossatura nell'html quindi la conoscenza del linguaggio php si limita alla sintassi di base, a meno di non voler realizzare template di particolare complessità . Per il resto basta imparare quanto già il team di sviluppo ha progettato ed applicarlo nella realizzazione della pagina. In realtà non parleremo del linguaggio php perchè faremo riferimento unicamente alle funzioni del core di Joomla. I fogli di stile consentono di raccogliere e riutilizzare le caratteristiche grafiche (dette classi) da applicare ai tag html. Per i template di Joomla la cosa va molto oltre: esistono un insieme di queste classi specifiche per i template e che consentono di formattare graficamente tutte le componenti di una pagina, dal titolo di un articolo, al colore del testo, all'aspetto dei menù.  Creiamo un semplice templateLa struttura di base, dicevamo, è in html e viene realizzata partendo da un disegno grafico come quello che segue:
In questo schema notate che la pagina viene divisa in aree:
Tutte queste aree sono racchiuse all'interno di un unico contenitore (di colore verde nell'immagine) Questo è uno schema a tre colonne più una intestazione e un piè di pagina. Non affronteremo in questo articolo la differenziazione tra schemi fissi e liquidi (flessibili). Per ovvi motivi non ho inserito nessun elemento grafico. Però sappiate che questo è il punto di partenza da quale iniziare lo sviluppo vero e proprio del template. Il passo successivo sarà quello di disegnare la grafica della pagina mantenendo quello schema come riferimento. Usando l'html creiamo questa semplice struttura e per farlo utilizzeremo solo il tag
I tag sono dei contenitori (container div) e possono contenere altre strutture html (altri tag) e in questo caso contengono solo del testo (tanto per distinguere un contenitore dall'altro) ma hanno una caratteristica particolare: vengono visualizzati sempre uno sotto l'altro. Se utilizzassimo un editor WYSIWYG (editor visuali) il codice che abbiamo appena scritto lo vedremmo così:
Come facciamo allora a cambiare la disposizione dei contenitori posizionandoli come nello schema? Per farlo dobbiamo necessariamente utilizzare i fogli di stile (css) creando delle classi di formattazione grafica. I nomi delle classi sono già stati inseriti nel codice html e richiamano il nome delle aree. La classe container darà forma al contenitore principale, la classe header darà forma e disposizione al primo contenitore, la classe left darà forma e disposizione al secondo contenitore, ecc. ecc.Questo è il foglio di stile da applicare al codice html sopra riportato:
Inserendo in una pagina html il codice del foglio di stile e quello html ora descritti otterremo il seguente risultato:
Analizziamo i singoli attributi di ogni classe: text-align: center - serve solo per centrare il testo all'interno del contenitore background-color - definisce il colore di sfondo del contenitore (lo usiamo in questo caso per differenziare le aree della pagina) border - aggiunge un bordo colorato al contenitore height - definisce l'altezza del contenitore. E' necessario definirla altrimenti il contenitore non si vedrà width - definisce la larghezza del contenitore.  float - questo attributo modifica l'ordine con cui un contenitore viene posizionato rispetto al precedente. Ricordiamoci che tutti i contenitori vengono posizionati per default uno sotto l'altro. Con la proprietà left del parametro float spostiamo un oggetto a sinistra del blocco contenitore, lasciando che tutto il resto del contenuto si posizioni alla destra.Esempio:
Otteniamo questo risultato Contenuto del box con la proprietà float:left;
Restante testo contenuto nel box principale
Con il parametro right dell'attributo float spostiamo un oggetto a destra del blocco contenitore, lasciando che tutto il resto del contenuto si posizioni alla sinistra. Esempio
Otteniamo questo risultato Contenuto del box con la proprietà float:right;
Restante testo contenuto nel box principale
Nel nostro questo caso il contenitore main-content verrebbe posizionato sotto il suo precedente (left) ma assegnando l'attributo float: left; al contenitore left si indica al browser che il contenitore successivo (main-content) deve essere posizionato a destra del contenitore left. clear - l'attributo clear gestisce lo spazio attorno ad un oggetto, impedendo che altri oggetti mossi dalla proprità float vi si posizionino. Viene applicato, nel nostro caso, all'area footer tramite la classe footer per posizionarla sotto l'area right e quindi sotto tutte le aree (left, main-content e right). La proprietà left dell'attributo clear impedisce che alla sinistra dell'oggetto che contiene claer si posizioni un oggetto con la proprietà float. Nella classe .container viene dichiarato l'attributo margin con valore 0 (zero) e auto. Questo è un piccolo trucco per posizionare al centro di una pagina un tag  Nel nostro esempio se non usassimo l'attributo float vedermmo questo:
applicando l'attributo float ai tag otteniamo questo:
Piccola nota sui fogli di stile. Se non usassimo i fogli di stile saremmo costretti a scrivere:
invece di definire la classe .left in un foglio di stile assegnandola poi al tag come abbiamo visto in precedenza. Â Trasformare la pagina html in un template
Bene. Adesso dovremmo avere un pò più chiaro come posizionare delle aree contenitore in una pagina html. Come facciamo adesso a trasformarle in contenitori per moduli e contenuti di Joomla?
Quando il template viene richiamato per essere riempito con i contenuti dinamici prelevati dal database Joomla si aspetta di trovare la funzione
per poter posizionare gli oggetti (moduli e contenuti) all'interno della pagina. Con il parametro type diciamo a Joomla che tipo di oggetto deve inserire in quella posizione mentre con il parametro name diciamo a Joomla come si chiama quella posizione. Questa funzione crea una zona modulo. Ad esempio, se nel nostro sito abbiamo dichiarato nel frontend, dalla gestione moduli, che i moduli mod_mainmenu e mod_login sono posizionati nella zona moduli left Joomla cercherà nel template la funzione e la sostituirà con il codice html corrispondente ai due moduli. E così la funzione verrà sostituita dai contenuti (gli articoli) prelevati dal database. E' chiaro che il template che abbiamo scritto è solo a titolo esemplificativo. Ma se lo confrontate con un qualsiasi template vedrete che, in fin dei conti, le cose non sono molto diverse. Le zone modulo vengono realizzate aggiungendo ad una pagina html, opportunamente costruita, le funzioni del core di Joomla realizzate per essere poi sostituite dai contenuti/moduli/componenti installati nel sito. I nomi delle zone modulo sono elencati nel file templateDetails.xml. Nel nostro caso questo file si presenterà così:
Aggiungiamo una nuova zona modulo al template
Se volessimo aggiungere una nuova zona moduli nel nostro template di esempio (per esempio la zona debug) dovremmo operare come segue: 1) scrivere il codice html che crei un nuovo contenitore nella struttura della pagina e inserirvi all'interno la funzione jdoc assegnando al parametro name il nume della nuova zona modulo
2) modificare il foglio di stile creando una classe per formattare graficamente il nuovo contenitore e per posizionarlo adeguatamente rispetto agli altri contenitori adiacenti 3) aprire il file templateDetails.xml ed aggiungere la nuova zona moduli
Sul nome da assegnare ad una nuova posizione moduli consiglio di utilizzare i nomi comunemente usati nei template per Joomla. Denominare una posizione moduli con nomi di fantasia (pippo, pluto, paparino) non rende il template utilizzabile da nessuno se non da noi. Questo articolo è stato pubblicato su Joomla.it |
Uno degli argomenti più trattati sul forum e per il quale potremmo spendere fiumi di parole è la modifica dei template per i siti web sviluppati in Joomla. Il template è il cuore di un sito Joomla. Esso è lo scheletro sul quale si formano tutte le pagine del nostro sito. La dinamicità di Joomla sta proprio in questo: comporre nuove pagine in base alla richiesta del navigatore, recuperando le informazioni da un database e utilizzando un'unica struttura portante: il template appunto.
|
|
Kostenlose Joomla Templates von Webgau.de
Commenti
E complimentarmi con questo tuo bellissimo articolo.
Ciaoooooooo
;-)
Si fà quel che si può. Ancora non mi sono deciso e organizzato per portare tutte e due le guide su joomla.it. Prima o poi lo farò.
Ciao e Grazie