Che cosa bisogna sapere su Joomla 1.6 Parte 5: I templates

Questo è il quinto di una serie di post del blog di Joomla.org sui cambiamenti in Joomla 1.6.
In questo quinto articolo scritto da Chad Windnagle, gentilmente tradotto da frascan per Joomla.it, si parla della struttura dei template per Joomla 1.6.



Ora che Joomla 1.6 Beta è stato rilasciato, è tempo di dare un'occhiata alla nuova Gestione template per esaminare le nuove caratteristiche che offre. Ho pensato che il modo migliore per comprendere le differenze tra Joomla 1.6 Beta e Joomla 1.5 sarebbe stato quello di confrontare queste differenze per voi. Allora, iniziamo!



Gestione template: Joomla 1.5 vs Joomla 1.6 Beta

template joomla 1.6 template joomla 1.6


La differenza maggiore che si può notare è che Joomla 1.5 ha due opzioni in Gestione template: Template Sito e Template Amministrazione. Joomla 1.6 Beta è totalmente diverso. Invece di Template Sito e Template Amministrazione, troviamo Stili e Template. Tutto ciò mette in evidenza un notevole cambiamento nella gestione dei templates in Joomla 1.6 in termini di personalizzazione. Joomla 1.6 differenzia il front end dal backend aggiungendo un parametro di localizzazione.

Tornando a Joomla! 1.5, gli sviluppatori di templates professionali offrono una serie di parametri avanzati all'interno della schermata di configurazione del template per gestire alcune esigenze di personalizzazione di base. Alcuni sviluppatori di template inoltre hanno realizzato dei veri e propri framework per la realizzazione di templates che permettono di gestire alcune personalizzazioni avanzate.
Ora andiamo a vedere le caratteristiche della Gestione template in Joomla 1.6: Template e Stili.

Joomla 1.6 Beta Gestione template - Stili e Template

Ma cosa sono gli Stili e i Templates in Joomla 1.6 Beta? Mi sono posto questa domanda quando ho installato Joomla 1.6 Beta e ho dato un'occhiata al pannello di amministrazione. La conclusione alla quale sono giunto è che Joomla 1.6 è ancora fortemente basato sui templates, ma è stato aggiunto un ulteriore livello di controllo nella gestione dei templates: gli Stili. template joomla 1.6

Gli Stili di Joomla: che cosa sono? Uno stile in Joomla 1.6 è l'insieme dei parametri di un template di Joomla. Gli stili possono essere duplicati, autonomamente, e assegnati ai templates. Il punto fondamentale è che uno stile è costituito dai parametri di un template di Joomla con la possibilità di avere diversi valori per tali parametri, se necessario.

Bisogna tenere presente che Joomla 1.6 consente ai web designers di realizzare un template unico a cui associare più stili che permettono diverse impostazioni dei parametri che possono essere assegnati in base alla voce di menu selezionata, o in base ai diritti di accesso degli utenti.

La struttura dei templates di Joomla 1.6

I templates per Joomla hanno sempre avuto una particolare struttura e dei files necessari. La struttura dei files dei templates di Joomla 1.5 è identica a Joomla 1.6, diamo un'occhiata a quali files costituisono un template e cosa contengono:

Template Path:
<!--
**** <joomlaroot>/templates/<templatename>/
-->

<!-- All Files are in the Template Folder -->

index.php
index.html
templateDetails.xml
template_thumbnail.png
css/template.css
images/
html/ <!-- optional! -->

templateDetails.xml in Joomla 1.5 ed in Joomla 1.6 Beta

Una cosa che è cambiata in ogni versione di Joomla è il file XML. Il file XML è il collante che tiene insieme tutti i pacchetti installabili delle estensioni per Joomla. Quando si tratta dei templates per Joomla, tale file deve essere chiamato templateDetails.xml. L'XML è un linguaggio meraviglioso, perché è un linguaggio "generatore". Vale a dire che ogni elemento nel file XML è realizzato ed utilizzato per un'applicazione specifica. Nello schema di sviluppo di un sito web i files XML sono incredibilmente diversificati e utili. Il progetto Joomla utilizza queste potenzialità dell'XML in tutte le estensioni per installare i pacchetti.

Esaminiamo le differenze del file templateDetails.xml in 1.5 Joomla  e in Joomla 1.6 Beta templateDetails.xml file:

templateDetails.xml
In Joomla 1.5 ci sono circa 5 elementi di base XML che sono stati utilizzati:

Template Joomla 1.5 XML:
<?xml version="1.0" encoding="iso-8859-1"?>
<install version="1.5" type="template">
<nameJoomla 1.5 Template XML Example</name>
<version>1.0</version>
<creationDate>05/29/10</creationDate>
<author>Chad Windnagle</author>
<copyright>s-go Consulting LLC</copyright>
<authorEmail>
Questo indirizzo email è protetto dagli spambots. È necessario abilitare JavaScript per vederlo.This e-mail address is being protected from spambots. You need JavaScript enabled to view it </authorEmail>
<authorUrl>http://www.s-go.net</authorUrl>
<license>GNU GPL</license>
<description>This is an XML example from s-go.net</description>


Quanto sopra è un esempio degli elementi trovati nella prima parte di un file XML di un template per Joomla 1.5 e contiene informazioni dettagliate sul template. Quale versione di Joomla è supportata, chi è l'autore, come contattare l'autore e le informazioni sulla licenza. Vediamo ora i primi elementi di un file XMl di un template per Joomla 1.6.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template...
...1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd">
<install version="1.6" type="template">
<name>Joomla 1.6 Template Name</name>
<creationDate>05/29/10</creationDate>
<author>Chad Windnagle</author>
<authorEmail>
Questo indirizzo email è protetto dagli spambots. È necessario abilitare JavaScript per vederlo.This e-mail address is being protected from spambots. You need JavaScript enabled to view it </authorEmail>
<authorUrl>http://www.s-go.net</authorUrl>
<copyright>s-go Consulting LLC</copyright>
<license>GNU General GPL</license>
<version>1.0</version>
<description>My Joomla 1.6 Beta template xml description</description>


L'unica vera differenza in questo file è l'utilizzo della DTD. DTD sta per Document Type Definition ed è fondamentalmente un modo per controllare il contenuto del file XML ed assicurarsi che corrisponda alla struttura che deve essere utilizzata dall'applicazione. Joomla non ha usato la DTD prima della versione 1.6 Beta. L'altra differenza di minore rilievo riguarda il parametro dell'elemento install version che ha valore 1.6 invece di 1,5. Questo indica chiaramente che si tratta di un template 1.6, invece che di un template 1.5 o 1.0.

La sezione successiva del file XML definisce quali files e cartelle costituiscono la struttura del template. Qui non ci sono variazioni tra Joomla 1.5 a Joomla 1.6 Beta:
<files>
<filename>index.php</filename>
<filename>index.html</filename>
<filename>favicon.ico</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
<folder>css</folder>
<folder>images</folder>
</files>


Tutti i files elencati sopra sono necessari per realizzare un file XML di installazione di un template per Joomla perfettamente funzionante.
Tempo fa nel file XML era necessario elencare non solo ogni cartella, ma anche tutti i files presenti in ogni cartella. In una delle release di Joomla! 1.5.x è stata aggiunta  una nuova funzione all'installer dei templates che rende necessario elencare solo i files nella directory principale del template e di utilizzare l'elemento per inserire e trovare tutti i files nelle sottodirectory. Questa funzione permette di risparmiare una notevole quantità di tempo in fase di compilazione del file XML.

La sezione successiva del file XML definisce le posizioni modulo:


<positions>
<position>positionName</position>
</positions>


In questa sezione vengono definite tutte le posizioni modulo del vostro template. Vanno aggiunte tutte le posizioni modulo di cui si ha bisogno, i nomi delle posizioni non possono contenere spazi, ma gli si può assegnare qualsiasi nome si voglia.

Ci sono alcune opzioni avanzate del file XML di cui non parlerò qui, ma l'XML tornerà utile quando si cercherà di incorporare i parametri per la gestione del template.

Diamo un'occhiata ora agli altri files del template. Sappiamo già che cosa è il file templateDetails.xml - diamo uno sguardo agli altri files per scoprire la loro funzione!

index.php
Il file index.php del template è una sorta di compilatore dell'intero sito. Questo file è molto simile ai files che si trovano su un sito tradizionale in HTML. Richiama i fogli di stile, genera le posizioni div, carica i javascripts, imposta le variabili e via dicendo. Il file index.php è il fulcro del template.

All'inizio del file index.php in Joomla 1.6 Beta si trova la seguente riga di codice:
<?php defined( '_JEXEC' ) or die( 'Restricted access' ); ?>

Questa riga deve essere presente in qualsiasi file PHP di un sito in Joomla!. Si tratta di una dichiarazione PHP che impedisce al file di essere caricato all'esterno del framework di Joomla!. Non avere questa riga di codice comporta un grave rischio in termini di sicurezza. Tutti i file PHP di Joomla! devono quindi iniziare con questa riga.

La sezione successiva del file index.php contiene le informazioni per il tag head.

<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/templates/*yourTemplateName*/css/template.css"
type="text/css" />
</head>

Abbiamo quindi l'apertura del tag head, piuttosto comune a tutti i files del template. Subito dopo abbiamo un jdoc:include che richiama il framework di Joomla!. Tale chiamata carica in Joomla! le informazioni correlate all'header. Tale chiamata dovrebbe essere inclusa in tutti i templates Joomla!.

Seguono due file CSS richiamati dalla directory di sistema - questi fogli di stile gestiscono l'aspetto delle pagine di errore e dei messaggi di errore. La maggior parte degli sviluppatori di templates richiama questi file, perché non si sa mai in che tipo di errori possono incappare gli utenti di un sito - gli sviluppatori di Joomla! hanno pensato a questo aspetto a livello di design mediante questi fogli di stile così i messaggi di errore assumeranno un aspetto migliore.

L'ultimo foglio di stile è quello di cui dobbiamo preoccuparci - infatti richiama il foglio di stile del nostro template. Ovviamente si possono richiamare anche più fogli di stile, tutti quelli di cui abbiamo bisogno per personalizzare il nostro template. Questo foglio di stile contiene tutte le definizioni delle classi e l'ID del nostro template; così come qualsiasi stile aggiuntivo per rendere il nostro sito il più elegante possibile.

Fatto questo il template inizia a prendere forma - inserendo il tag body, si è in grado di posizionare i vari divs per controllare il layout del nostro sito. Si tratta di un aspetto piuttosto semplice che non affronterò in questo articolo.
Quello che mi preme affrontare è la seguente riga di codice PHP necessaria per ultimare il template:

<jdoc:include type="modules" name="positionName" />


Questa linea richiama le posizioni modulo. Il valore name è quello di cui bisogna preoccuparsi - questo valore deve corrispondere al valore che si inserisce nel campo posizione in Gestione moduli quando si edita un modulo nel pannello di amministrazione di Joomla 1.6. Questo nome deve corrispondere anche alle posizioni modulo che vengono inserite nel file XML (vedete come tutto dialoga?). Avete visto quelle situazioni in cui le posizioni modulo e le colonne vengono caricate e visualizzate in tempi diversi? Per ottenere questo effetto è necessario scrivere solo qualche riga di codice PHP in più.

<?php if ($this->countModules('positionName')) ?>
<jdoc:include type="modules" name="positionName" />
<?php endif; ?>

Ora è possibile iniziare a lavorare di fantasia. Possiamo inserire le classi div e gli ID all'interno delle istruzioni if. Queste saranno visualizzate solo quando i moduli corrispondenti vengono caricati. Ecco, questo è il segreto per far apparire e scomparire a nostro piacimento colonne e moduli in un template.

Le prossime due chiamate al framework di Joomla! sono anch'esse necessarie:

<jdoc:include type="message" />
<jdoc:include type="component" />

La chiamata di tipo messagge carica tutti i messaggi di errore di un sito Joomla. Ad esempio: gli accessi non riusciti, gli avvisi di nuove registrazioni, e così via. Infine, nessun template è completo senza il contenuto stesso! La chiamata di tipo component carica tutti i contenuti del sito, così come tutti gli altri componenti installati.

Siamo giunti alla fine del file index.php.

index.html
L'index.html è letteralmente un file fittizio, quasi vuoto. L'unico scopo di questo file è di impedire agli hackers di accedere alla directory del template e contribuire alla sicurezza del sito. E' sufficiente inserire un file index.html vuoto in ogni directory per accrescere la sicurezza del sito!

favicon.ico
Questo è un file ICO che è - lo avete indovinato, l'icona dei preferiti del vostro sito. E' l'immagine di 16x16 px che viene visualizzata nella barra degli indirizzi del browser e nei segnalibri del browser. Realizzandone una apposita è possibile personalizzare ancora di più un sito.

template_thumbnail.png
E' la piccola immagine che si visualizza quando il mouse è posizionato su un template nella Gestione template di Joomla 1.6. Il file deve essere chiamato appunto template_thumbnail.png e deve trovarsi nella directory principale del template.

Oltre la directory principale

Bene, abbiamo esaminato finora la directory principale di un template per Joomla! 1.6. Ci sono altre due directory che devono essere incluse in un pacchetto di installazione di un template per Joomla! 1.6.

css/template.css
Joomla fa un uso massiccio dei CSS - l'aspetto di tutti gli elementi, come i titoli delle categorie, i titoli degli articoli,  i collegamenti Leggi tutto e via dicendo; vengono gestiti nel file template.css. Non ho trovato risorse che documentano le classi css e gli ID dei template per Joomla 1.6 beta, quindi al momento la soluzione migliore è di analizzare con Firebug l'output html di Joomla 1.6 per comprendere come funziona.

Oltre allo stile degli elementi di Joomla!, il file template.CSS definisce tutti i divs che sono inseriti nel file index.php.

Non è necessario inserire tutte le classi CSS in un unico file. In realtà è meglio separare le varie classi in più files CSS. E' per ragioni di semplicità espositiva che ho preso in considerazione un unico file.

images
Affichè un template per Joomla 1.6 venga installato correttamente è necessario che ci sia una directory images. Questa directory può anche essere vuota, ma se vengono richiamate delle immagini nei vostri files Css allora queste immagini devono trovarsi in questa directory.

Parametri opzionali del template

Ci sono altre opzioni che possono essere inserite per rendere un template più avanzato e personalizzabile. Non affronterò queste opportunità in questo articolo, ma le citerò soltanto in modo tale che chi fosse interessato potrà approfondirne la conoscenza

Elementi XML - Parametri

In molti templates professionali possono essere modificate varie impostazioni quali la dimensione dei caratteri, la larghezza del template, i colori, e così via. Tutto ciò è possibile farlo inserendo un nuovo elemento nel file XML ed inserendo un file di nome params.ini nel quale vengono specificati i valori di default. Tali valori corrisponderanno agli elementi nel file XML definiti nel seguente modo:

<config>
<fields name="params">
<fieldset name="basic">
<field name="fieldName" type="list" default="defaultValue" label="Your Label"
description="Your Description">
<option value="aValue">Value Name</option>
<option value="anotherValue">Another Value Name</option>
</field>
</config>

Template Overrides

Nessun articolo sui templates per Joomla! è completo se non si fa almeno un accenno all'override del template.

L'override del template è una caratteristica che è stata aggiunta in Joomla 1.5, e che permette di ignorare l'output HTML di un componente o di un modulo a condizione che venga rispettato l'MVC della struttura del componente o del modulo. Per fare questo è sufficiente inserire una directory chiamata html nella directory principale del template. Fatto questo bisogna copiare all'interno di tale directory html le directory dei componenti o dei moduli di cui si vuole fare l'override. Fatto ciò si modificano i files dei componenti e dei moduli copiati in base alle proprie esigenze e Joomla! visualizzerà tale output al posto dell'output dei componenti e dei moduli installati.

Questa caratteristica conferisce agli sviluppatori di templates il controllo assoluto sull'output HTML prodotto dal codice di Joomla! L'override del template consente di prendere alcuni dei componenti di Joomla 1.5 che ancora utilizzano un output html basato sulle table e renderli interamente basati sui divs. È possibile fare degli hack dei componenti e dei moduli del core di Joomla, senza causare rischi per la sicurezza quando vengono rilasciati aggiornamenti di release. È possibile applicare le modifiche necessarie senza il timore di perdere le modifiche effettuate quando viene aggiornato Joomla o qualsiasi altra estensione.

L'override del template ha molte potenzialità ed è una delle caratteristiche di Joomla! 1.5 che preferisco.

Articolo scritto da Chad Windnagle su Joomla.org e tradotto da Francesco Scandale