Un template per Joomla

www.e-moka.net

Matteo Mosangini

Realizzato per l’IIS J. Linussio di Codroipo

Indice
1 Informazioni preliminari 3
1.1 Php . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.2 CMS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.3 Database . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

2 Un template per Joomla 4

3 Il processo di creazione di template 5

4 Editor open source 5

5 Il W3c e i siti senza tabelle 6

5.1 Un po’ di storia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
5.2 I fogli di stile CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

6 I componenti di un Template 7
6.1 Il file templateDetails.xml . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
6.2 Il file index.php . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
6.3 Un “body” vuoto per un template Joomla . . . . . . . . . . . . . . . . . . . . . 13

7 Utiliziamo i fogli di stile CSS per creare il layout 15

8 Un CSS di default per Joomla 17

8.1 Elementi CSS specifici di Joomla . . . . . . . . . . . . . . . . . . . . . . . . . . 20

9 Moduli 21

10 I Menu 25

11 Come nascondere le colonne 28

11.1 Nascondiamo i moduli . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

A CSS shorthands 33

2
1 Informazioni preliminari
1.1 Php
PHP è un linguaggio di scripting interpretato, con licenza open source, originariamente con-
cepito per la realizzazione di pagine web dinamiche. Attualmente è utilizzato principalmente
per sviluppare applicazioni web lato server ma può essere usato anche per scrivere script a
linea di comando o applicazioni standalone con interfaccia grafica. Il suo nome è un acronimo
ricorsivo che sta per PHP: Hypertext Preprocessor (PHP: preprocessore di ipertesti). Joomla
è un CMS scritto in PHP, durante le lezioni che ci porteranno a crare un template completo
incontreremo spesso delle sezioni di codice PHP inserite all’interno dei file che serviranno per
realizzare l’aspetto grafico del nostro sito. Non sarà possibile studiare in dettaglio tale linguag-
gio di programmazione, di volta in volta cercheremo di spiegare il significato delle istruzioni in
cui incapperemo. La complessità del codice che andremo ad analizzare sarà molto bassa, dato
che gli aspetti tecnici di gestione del sito sono sostenuti dal codice di Joomla.

1.2 CMS
I Content management system (CMS), letteralmente Sistema di gestione dei contenuti sono
una categoria di sistemi software utilizzati per organizzare e facilitare la creazione collaborativa
di documenti e di altri contenuti. Tecnicamente un CMS è un’applicazione lato server, divisa
in due parti: il back end, ovvero la sezione di amministrazione, che si occupa di organizzare e
supervisionare la produzione del contenuto, e il front end, cioè la sezione dell’applicazione che
l’utente usa per realizzare fisicamente modifiche, aggiornamenti ed inserimenti.
Una delle applicazioni più utili dei sistemi CMS è nella gestione dei portali, dove vengono
impiegati come strumento di pubblicazione flessibile e multiutente. Ad esempio, gestione di
contenuti testuali (notizie, articoli ecc.), link, immagini, liste di discussione, forum, materiale
scaricabile. Può essere modificata anche la struttura stessa delle pagine in numero ed organiz-
zazione. A volte i CMS danno la possibilità di gestire anche più versioni dello stesso sito (ad
esempio, HTML o WAP).
I CMS consentono di definire utenti, gruppi e diritti in modo da poter permettere una
distribuzione del lavoro tra più persone. Per esempio, è possibile definire una classe di utenti
abilitati esclusivamente all’inserimento delle notizie, mentre si può riservare la scrittura di
articoli ad un altro gruppo, e limitare tutti gli altri alla sola consultazione. L’introduzione di
un Web Content Management System in una scuola richiede la definizione di chiari processi
interni di approvazione dei contenuti. Il nuovo sito scolastico sarà realizzato utilizzando il
CMS Joomla che permetterà la partecipazione di Alunni ed Insegnanti alla costruzione di un
sistema per la gestione delle informazioni, sarà possibile pubblicare e rendere disponibile a tutti
gli alunni, testi di approfondimento, vecchi compiti in classe, materiale didattico multimediale
. . . La scelta di utilizzo di un CMS sarà inoltre strategica per far conoscere la scuola sia a
livello provinciale che extraprovinciale e potrebbe permettere l’instaurarsi di proficui scambi
informativi con altre realtà scolastiche nazionali e non.

1.3 Database
In informatica il termine database, tradotto in italiano con banca dati, base di dati (soprat-
tutto in testi accademici) o anche base dati, indica un archivio di dati, riguardanti uno stesso

3
argomento o più argomenti correlati tra loro, strutturato in modo tale da consentire la gestione
dei dati stessi (l’inserimento, la ricerca, la cancellazione ed il loro aggiornamento) da parte di
applicazioni software. Informalmente e impropriamente, la parola database viene spesso usata
come abbreviazione dell’espressione Database Management System (DBMS), che si riferisce a
una vasta categoria di sistemi software che consentono la creazione e la manipolazione efficiente
di database. Durante la creazione del nostro template non dovremo mai interegire direttamente
con il databse all’interno del quale sono memorizzate tutte le informazioni riguardo il nostro
sito, basti sapere che Joomla puù utilizzare in maniera nativa due DBMS OpenSource molto
famosi:

• Mysql www.mysql.com

• PostgreSql www.postgresql.org

2 Un template per Joomla

Un template per Joomla è composto da un insieme di file (binari e testuali) che il CMS Joom-
la utilizza per controllare la rappresentazione grafica dei dati memorizzati all’interno di un
database, il sito completo offerto agli utenti dal nostro CMS sarà composto dai dati inseriti
all’interno del database visualizzati tramite il nostro template.

Figura 1: Template privo di contenuti Figura 2: Template con contenuti

Notate come nella figura [1] siano presenti solamente i nomi dei menu e la struttura generale
del sito mentre in figura [2] oltre alle caratteristiche distintive siano presenti anche dei contenuti.
Il template ci permette di definire quali immagini appartengono alla “grafica” del sito e quali
invece ai contenuti, se non avessimo operato questa distinzione tra dati e la loro rappresentazione
avremmo dovuto manualmente costruire ogni pagina del sito. Riassumendo i vantaggi offerti
dall’utilizzo di un CMS per la creazione di un sito complesso sono:

4
 • La completa separazione dei contenuti dalla loro rappresentazione, e l’utilizzo dei fogli di
stile per la costruzione di pagine dall’aspetto omogeneo.

• Un nuovo template, e quindi un aspetto completamente diverso, può essere applicato

ad un sito in pochissimo tempo, siamo cosı̀ in grado di aggiornare un sito senza dover
reinserire tutti i contenuti

3 Il processo di creazione di template

Le pagine prodotte da un CMS e visualizzate dal vostro browser non sono statiche, ovvero
nessuno le ha scritte e non vengono memorizzate all’interno del server web, ma vengono prodotte
dinamicamente combinando il template ed i dati presenti all’interno di un database tramite un
linguaggio di scripting conosciuto come PHP. Negli ultimi anni, si sono largamente diffusi in
ambito web programmi WYSIWYG (WhatYouSeeIsWhatYouGet) come Adobe Dreamweaver.
Tramite tali programmi è possibile produrre pagine web senza conoscere nessun linguaggio di
markup. Non è possibile usare sistemi di questo genere per produrre pagine web dinamiche
come sono quelle generate da Joomla, questo significa che il designer deve scrivere il codice che
genera la pagina manualmente e poi vedere il risultato del suo codice caricando i file prodotti
su un web server che li interpreta e ci permette di visualizzarli. Prima di iniziare a scrivere il
codice Xhtml e Css è necessario aver chiaro in mente l’aspetto che il nostro sito dovrà avere. É
pe questo necessario produrre un bozzetto iniziale con un programma di grafica1 che ci possa
guidare nell’implementazione del template. Il processo di produzione del codice segue, in genere,
questo ciclo:

1. Facciamo delle modifiche al codice del template (PHP,CSS,XHTML)

2. Carichiamo i file modificati sul web server ove è stato installato Joomla

3. Vediamo le modifiche attraverso un browser che punta al nostro sito temporaneo

4. Ritorniamo al punto 1

4 Editor open source

Per facilitare la modifica dei file è quasi d’obbligo utilizzare dei programmi che ci permettono
di automatizzare alcune operazioni come ad esempio l’upload sul server remoto dei file del
template. Per il corso utilizzeremo il programma open source Quanta Plus disponibile per
ora unicamente in ambiente Linux2 , sono disponibile in rete altri pacchetti:

• Aptana studio

• Screem

• NetBeans 6
1
Esistono svariati programmi OpenSource che ci permettono di delineare la grafica del nostro sito, vi consiglio
di provare Gimp e InkScape
2
a breve, a seguito del rilascio della versione 4 di Kde, sarà possibile utilizzare Quanta Plus sia su Windows
che su OsX

5
 • BlueFish

• AlleyCode

5 Il W3c e i siti senza tabelle

Usabilità, accessibilità ed ottimizzazione per i motori di ricerca sono tre qualità che ogni sito
internet ben progettato dovrebbe avere. Il metodo più semplice per ottenere tali caratteristiche
è utilizzare gli standard del W3C. Ad esempio un sito che è struttarato semanticamente via
xhtml (ovvero l’xhtml gestisce unicamente il contenuto del sito e non la sua veste grafica) potrà
essere facilmente visualizzato da persone ipovedenti e facilmente analizzato dallo spider di un
motere di ricerca. Lo spider di Google, ad esempio, può essere considerato come un cieco che
interagisce con una pagina web. Un sito internet progettato rispettando i canoni del W3C è più
facilemente manutenibile e permetterà alle persone di accedervi in maniera rapida ed intuitiva.
Il consorzio W3C mette a dispozione dei servizi web gratuiti per la validazione del proprio
codice validator.w3.org è inoltre disponibile un’utilissima barra di strumenti per MozillaFi-
refox https://addons.mozilla.org/en-US/firefox/addon/60 che mette a disposizione dei
comodi shortcut per l’utilizzo dei servizi del W3C.

5.1 Un po’ di storia

Molte delle pagine che potete vedere oggi sul web sono state progettate per funzionare con
vecchi browser. Perchè? I browser si sono evoluti continuamente dall’introduzione del WWW
ad oggi, alcuni sono scomparsi (Netscape, Mosaic,. . . ) ed altri sono nati (opera,firefox,. . . ),
un’altra ragione è che alcuni produttori di browser (leggi Microsoft), producono dei software che
interpretano il codice (x)html/css in maniera leggermente diversa. Tutto questo ha obbligato i
designer di siti web a supportare browser “morti” invece di utilizzare le caratteristiche di quelli
appena introdotti.
Gli standard Web forniscono delle regole che tutti (meno quelli di Microsoft) i Browser do-
vrebbero seguire, l’organizzazione principale che produce questi standard è il W3C diretto dal
creatore del WWW Tim Berners-Lee. Delle pagine web che supportano gli standard devono
essere validabili dal W3C e devono seguire le regole che il loro DOCTYPE impone. É inol-
tre molto importante produrre del codice semanticamente corretto, ovvero scrivere del codice
html che rappresenta unicamente il contenuto e non il contente di una pagina web, quindi
organizzare in maniera strutturata i vari tag h1, h2 etc. utilizzare le tabelle unicamente per
visualizzare dei dati tabulati e non per la giustapposizione di elementi grafici . . .

5.2 I fogli di stile CSS

Strettamente correlato alla scrittura di codice (x)html sematico è l’utilizzo dei fogli di stile
(CSS) per controllare la visualizzazione grafica delle pagine web. I fogli di stile a cascata
(Cascading Sytle Sheets) sono un semplice meccanismo per aggiungere uno stile (font, colori,
spazi) ai documenti Web www.w3.org/Style/CSS/. I fogli di stile esistono parallelamente al
codice (x)html e ci permettono di separare completamente il contenuto (il codice semantico)
dalla sua presentazione (CSS). A questo indirizzo potete trovare la descrizione completa dello
standard CSS 2 http://www.diodati.org/w3c/css2/cover.html

6
6 I componenti di un Template
Per capire i contenuti di un template cominceremo ad esaminare un template per Joomla vuoto.
Il template contiene file e directory che devono essere completamente contenuti all’interno di una
sottodirectory della directory /templates/ di una installazione Joomla. Se abbiamo installato
due template, la nostra directory /templates/ dovrà apparire cosı̀:
/templates/element
/templates/voodoo
I nomi delle sottodirectory che contengono i template devono essere uguali ai nomi dei template,
ricordiamo che i nomi dei file e delle directory sono case sensitive e NON devono contenere spazi.
All’interno della directory di un template si trovano alcuni file fondamentali come:
/element/templateDetails.xml
/element/index.php
I nomi e le posizioni di questi file devono essere esattamente quelli esposti sopra essi sono infatti
chiamati dagli script di Joomla per fondere il template con i dati. templateDetails.xml è un
file XML 3 che dice a Joomla che file caricare durante la selezione di un template, riporta inoltre
il nome dell’autore il copyright e tutti i file contenuti all’interno del template, questo file XML
viene inoltre utilizzato durante l’installazione del template tramite il backend amministrativo.
index.php è il file più importante del template. Serve a posizionare gli elementi informativi
del sito ed è una combianazione di PHP e X(HTML). In quasi tutti i template sono utilizzati
altri file, si è soliti organizzarli nel modo seguente:
/element/template_thumbnail.png
/element/css/template.css
/element/images/logo.png
Il file:
/element/template_thumbnail.png
contiente uno screenshot del template cosı̀ come renderizzato 4 dal browser.Questa imagine ha
di solito la dimensione di 140X90 pixel5 . Questa immagine ha lo scopo di mostrare una preview
del template una volta installato all’interno del CMS Joomla. Il file:
/element/css/template.css
contiente la descrizione CSS dell’aspetto della pagina, inserire tale file nella directory /css è
opzionale ma consigliato per una sua rapida individuazione. Il nome non è arbitrario in quanto
dovrà essere inserito all’interno del file index.php. Vedremo più avanti che sarà estremamente
utile dividere la parte CSS del nostro template su più file. Il file:
/element/images/logo.png
rappresenta una della immagini che costituiscono il template, non è necessario inserirle nel-
la directory images ma è caldamente consigliato per motivi organizzativi. Il template potrà
contenere un numero arbitrariamento alto di immagini.
3
Per maggiori informazioni su XML potete leggere le pagine all’indirizzo http://www1.isti.cnr.it/
~Martinelli/XML/doc/Nota_XML.html
4
Dall’inglese to render : rendere inizialmente utilizzato in computer grafica per descrivere il processo di
calcolo dell’aspetto di un oggetto 3D
5
Il pixel è una delle unità di visualizzazione dello schermo

7
6.1 Il file templateDetails.xml
Il file templateDetails.xml include tutti i file che sono parte del template, come già detto
include anche delle informazioni sull’autore e il copyright del file. Un esempio di come potrebbe
apparire questo file:

<?xml version="1.0" encoding="utf-8"?>

<install version="1.5" type="template">
<name>corso_template</name>
<creationDate>Febbraio 2008</creationDate>
<author>Nessuno Nessuno</author>
<copyright>GPL</copyright>
<authorEmail> test@test.com</authorEmail>
<authorUrl>wiki.linussio.org</authorUrl>
<version>1.0</version>
<description>Template per il corso sulla gestione
strumenti web </description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>js/somejsfile.js</filename>
<filename>images/threecol-l.gif</filename>
<filename>images/threecol-r.gif</filename>
<filename>css/customize.css</filename>
<filename>css/layout.css</filename>
<filename>css/template_css.css</filename>
</files>

<positions>
<position>left</position>
<position>right</position>
<position>top</position>
<position>breadcrumb</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>debug</position>
<position>syndicate</position>
</positions>

<params>
<param name="showComponent" type="radio" default="1" label="Show
Component" description="Show/Hide the component output">
<option value="0">No</option>
<option value="1">Yes</option>

8
 </param>
</params>
</install>
Cerchiamo di capire il significato del file:
<install version="1.5" type="template">
I contenuti di questo file XML sono considerati come istruzione dell’installatore del backend di
Joomla, l’opzione type="Template" dice all’installer che stiamo installando un template per la
versione 1.5 di Joomla.
<name>corso_template</name>
definisce il nome del template che stiamo creando ed anche il nome della directory che dovrà
contenere tutti i file del template. Non dovrà contenere caratteri non gestibili dal filesystem6 e
spazi.
<creationDate>Febbraio 2008</creationDate>
La data in cui il template è stato creato, il formato è libero.
<author>Nessuno Nessuno</author>
Il nome dell’autore di questo template.
<copyright>GPL</copyright>
Le informazioni riguardo al copyright del vostro template.7 .
<authorEmail>test@test.com</authorEmail>
L’indirizzo e-mail dell’autore del template
<authorUrl>wiki.linussio.org</authorUrl>
L’URL8 dell’autore del sito
<version>1.0</version>
La versione del template.
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>js/somejsfile.js</filename>
<filename>images/threecol-l.gif</filename>
<filename>images/threecol-r.gif</filename>
<filename>css/customize.css</filename>
<filename>css/layout.css</filename>
<filename>css/template_css.css</filename>
</files>
6
Il sistema usato dal computer per l’archiviazione dei dati su un supporto di massa vedi http://it.
wikipedia.org/wiki/File_system
7
Per maggiori informazini sulla licenza GPL: http://www.gnu.org/licenses/gpl-faq.it.html
8
Universal Resource Locator

9
La sezione files contiene tutti i file generici del template, come file sorgenti PHP o l’imma-
gine thumnail per il preview. Ognuno dei file elencati in questa sezione è contenuto tra i tag
<filename> </filename>. Nel nostro esempio abbiamo incluso anche dei file javascript 9 . An-
che tutte le immagini utilizzate dal template devono essere incluse nella sezione files. Il path
di ogni file è relativo alla directory in cui sono contenuti i file del profilo, ad esempio se il vostro
template si trova nella directory miotemplate e tutte le immagini sono memorizate all’interno
d una directory images sottodirectory di miotemplate il path corretto da utilizzare sarà:

<filename>images/my_image.jpg</filename>

La sezione <positions> contiene i nomi dei luoghi (all’interno della pagina) in cui è possibile
disporre gli elementi:

<positions>
<position>left</position>
<position>right</position>
<position>top</position>
<position>breadcrumb</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>debug</position>
<position>syndicate</position>
</positions>

Se non elenchiamo in tale posizione il nome di tutte le possibili disposizioni dei contenuti, queste
non compariranno durante l’editing dei moduli
Non dimentichiamo inoltre che anche i fogli di stile devono essere inclusi nella sezione files.

6.2 Il file index.php

Cosa contiene il file index.php? É una combinazione di (X)HTML e PHP che determina il
layout e la presentazione delle pagine del sito. Una parte critica per costruire dei template
validi (secondo il w3c) è il DOCTYPE all’inizio del file index.php. Tali linee di codice devono
essere presenti all’interno di ogni pagina web, nel nostro template utilizzeremo il DOCTYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this-
>language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this-
>direction; ?>"

Il DOCTYPE istruisce il browser su come interpretare il codice della pagina, è quindi di

fondamentale importanza scrivere dell’(x)html e css che seguano il DOCTYPE dichiarato! Ci
sono ovviamente altri tipi di DOCTYPE oltre a quello qui dichiarato, leggendo la documentazione
incontrerete sicuramente (e molto spesso) le parole “strict” e “transitional”. Per comprendere il
9
Per maggiori informazioni http://javascript.html.it/

10
loro significato è necessario sapere che sin dall’inizio del WWW i vari browsers hanno supportato
in maniera non uniforme CSS e HTML, questo significa ad esempio che Internet Explorer, non
comprende il comando min-width per impostare la dimensione minima della pagina (questo
è il motivo per cui la gente deve trovare degli “hacks” per far funzionare i propri siti sotto
IE). Possiamo dire quindi che il modificatore strict obbliga il browser ad interpretare il codice
esattamente come viene imposto dagli standard, mentre transitional indica al browser che è
possibile usare alcune eccezioni universalmente accettate allo standard. L’interpretazione di
una pagina web è ulteriormente complicata dall’esistenza del modo “quirks” dei browser. Se il
DOCTYPE è sbagliato, assente o eccessivamente vecchio il browser è programmato per entrare in
modalità quirks, ovvero tenta di essere compatibile verso il basso con versioni legacy. Se aprite
la pagina con Firefox il browser tenta di interpretarla fingendo di essere NS4. Sfortunatamente
è possibile incappare nella modalità quirks in maniera accidentale. Succede solitamente in due
modi:

• lo sviluppatore utilizza il DOCTYPE compiandolo direttamente dal sito del W3C per cui il
link diventa:

DTD/xhtml1-strict.dtd

questo però è un link relativo. All’interno di un DOCTYPE è necessario utilizzare link

assoluti

• Internet Explorer entra in quirks mode se è presente una dichiarazione xml prima del
DOCTYPE:

<?php echo ’<?xml version="1.0" encoding="utf-8"?’ .’>’ ?>

siccome una dichiarazione di questo tipo non è strettamente necessaria, possiamo omet-
terla al fine di aumentare la compatibilità del nostro sito.

Scrivere una pagina web conforme agli standard (e quindi potersi fregiare del bollino W3C)
non è intrinsecamente complesso o difficile da capire, significa solamente produrre un codice
conforme al DOCTYPE della pagina. Alcuni link utili:

• www.quirksmode.org/css/quirksmode.html

• http://www.gdesign.it/pages/howto/articoli/doctype/doctype.php

• www.w3.org/QA/2002/04/Web-Quality

• http://forum.joomla.org/index.php/topic,7537.0.html

• http://forum.joomla.org/index.php/topic,6048.0.html

Cosa d’altro deve contenere il file index.php? Analiziamo per prima cosa la struttura dell’hea-
der, cercheremo di scrivere la minor quantità possibile di codice e al contempo di avere una
pagina index funzionante:

11
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this-
>language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this-
>direction; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/<?php echo $this->template
?>/css/template.css" type="text/css" />
</head>
Cosa significa il codice appena riportato?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this-
>language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this-
>direction; ?>" >

Abbiamo già descritto precedentemente il significato del preambolo DOCTYPE, a dispetto di

quanto visto prima nel codice su riportato è presente anche l’istruzione:
<?php echo $this->language; ?>
costituita da un pezzetto di codice PHP che recupera dal database, che contiene le impostazioni
di configurazione del nostro sito, la lingua principale dei dati che verranno diffusi dal sito.
Il tag:
<jdoc:include type="head" />
è un tag proprio di Joomla per inserire i dati dell’header della pagina HTML recuperandoli dal
database del sito. Per una installazione standard vengono prodotte le seguenti linee di codice:
<title>Template per il corso sulla gestione
strumenti web</title>
<meta name="generator" content="Joomla! 1.5" />
<meta name="description" content="Joomla! - the dynamic portal engine and
content management system" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="joomla, Joomla" />
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link
href="http://localhost/Joomla15/feed.php?option=com_content&amp;view=frontpag
e&amp;Itemid=1&amp;format=rss" rel="alternate" type="application/rss+xml"
title="RSS 2.0" />
<link
href="http://localhost/Joomla15/feed.php?option=com_content&amp;view=frontpag
e&amp;Itemid=1&amp;format=atom" rel="alternate" type="application/atom+xml"
title="Atom 1.0" />

12
questo tag Joomla costruisce tutto il codice che sarà inserito tra <head> e </head>. All’interno
è contenuto un certo numero di meta tag, la favicon e gli URL dei feed RSS.

<link rel="stylesheet" href="templates/<?php echo $this->template

?>/css/template.css" type="text/css" />

Questa linea di codice collega al documento (x)html prodotto dal codice PHP al foglio di stile
presente all’interno del template. Il codice PHP <?php echo $this->template ?> restituisce
il nome del template attuale, scriverlo in vece del nome effettivo del template utilizzato, rende
il codice più generico e ci permette di riutilizzarlo se dovessimo in futoro creare un nuovo
template.

6.3 Un “body” vuoto per un template Joomla

Ecco come appare il “body” di un template Joomla vuoto:

<body>
<?php echo $mainframe->getCfg(’sitename’);?>
<jdoc:include type="modules" name="top" />
<jdoc:include type="modules" name="left" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="right" />
</body>
</html>

Sono elencati in maniera sufficientemente logica:

• Il nome del isto

• il modulo top

• il modulo left

• il modulo main

• il modulo right

Lo scopo è giungere quanto più vicini possibile a una descrizione semantica del documento,
dal punto di vista del Web significa che la pagina può essere vista da chiunque: un browser,
un spider o un lettore di schermo. Il layout semantico è la pietra di volta dell’accessibilità. Il
nostro template appare ora come in figura [3]
Notiamo che il lavoro svolto fino ad ora rappresenta soltanto un’approssimazione a un layout
completamente semantico. Se ad esempio cominciassimo ad inserire moduli non accuratamente
scelti in maniera casuale all’interno dei blocchi definiti dal template otterremmo soltanto un
insieme caotico di informazioni. Dobbiamo ricordare che in un CMS (content management sy-
stem) la qualità di un template è pari a quella della distribuzione dei suoi contenuti Analiziamo
approfonditamente il modello fino ad ora scritto. Noterete come i comandi:

13
 Figura 3: Primo abbozzo di template, completamente privo di CSS

<?php echo $mainframe->getCfg(’sitename’);?>

<jdoc:include type="modules" name="top" />
<jdoc:include type="modules" name="left" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="right" />

siano specifici di Joomla e non appartengano all’insieme di tag xhtml che già conoscete, il
comando PHP echo nella prima riga del codice su riportato stampa semplicemente il nome
del sito. Nell’esempio sopra riportato inseriamo nella pagina xhtml unicamente il nome del
sito, avremmo anche potuto essere più prolissi e visualizzare tutte le informazioni riguardanti
il creatore del sito web:

Il nome di questo sito è <?php echo $mainframe->getCfg(’sitename’);?>

L’email dell’amministratore è <?php echo $mainframe->getCfg(’mailfrom’);?>
Questo template è memorizzato nella directory <?php echo $this->template?>
L’URL del sito è <?php echo $mainframe->getCfg(’live_site’);?>

Il comando jdoc inserisce vari blocchi di codice XHTML:

<jdoc:include type="component" />

questo pezzetto di codice stampa l’output di un componente, di quale compenente si traterrà

verrà deciso dei collegamenti del menu. Il comando:

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

14
inserisce nella pagina l’output del modulo assegnato alla posizione “right” tramite il backend10
amministrativo. Il comando Joomla jdoc supporta oltre al parametro name anche il parametro
style che utilizzeremo in seguito.

7 Utiliziamo i fogli di stile CSS per creare il layout

Utilizzeremo i CSS per creare un layout fluido a 3 colonne per il nostro template Joomla.
Esistono due grandi classi di layout web: fisso e fluido, entrambi i termini si riferiscono al modo
in cui viene controllata la larghezza della pagina. La larghezza della pagina è un punto di
particolare interesse a causa del gran numero di risoluzioni diverse a cui le persone osservano
il WWW. La maggior parte degli utilizzatori internet usa una risoluzione di 1024x768, un
layout fluido permette ai contenuti del vostro sito di adattarsi automaticamente alla larghezza
della pagina. Si tende spesso ad utilizzare delle tabelle per impaginare gli elementi del sito,
tabelle che sono molto comode dato che è sufficiente impostare la larghezza delle colonne come
percentuale della dimensione della pagina. Questo approccio ha però notevoli aspetti negativi:

• Non viene rispettato il vincolo di semanticità posto sui file xhtml

• Le pagine occupano più spazio

• Il tempo di caricamento è maggiore e il sito viene penalizzato sui motori di ricerca

• É difficile mantenere le tabelle, per cambiare qualcosa dovete capire la funzione di ogni
td/tr presente nel file. Utilizzando i fogli di stile dovete cambiare solo poche righe.

• Con le tabelle il contenuto non può essere ordinato a livello di codice sorgente: mol-
te persone che usufruiscono del WWW utilizzano lettori di schermo o browser testuali,
costoro visualizzano la pagina dall’angolo in alto a sinistra a quello in basso a destra.
Questo significa che vedono prima tutto ciò che è presente nell’header e nella colonna
di sinistra (per un layout a 3 colonne) prima di raggiungere la colonna centrale dove si
trova il contenuto del sito. Un Layout CSS rende invece possibile un “Source ordering”
del contenuto, ovvero è possibile modificare a livello di codice PHP l’impostazione della
pagina in funzione del mezzo che il fruitore utilizza per visualizzarla.

Costruiremo il layout del nostro template utilizzando i fogli di style, questi ci permetteranno
di posizionare in molti modi diversi i contenuti presenti all’interno del CMS Joomla 11 . Se
non avete mai visto primo i fogli di stile CSS o volete rinverdire le vostre conoscenze potete
consultare i siti:

• Kevin Hale - Una panoramica delle ultime tecnice per il layout CSS http://particletree.
com/features/an-overview-of-current-css-layout-techniques/

• Guida per il principiante CSS www.htmldog.com/guides/cssbeginner/

• yourhtmlsource.com www.yourhtmlsource.com/stylesheets/
10
Il backend amministrativo è l’insieme degli strumenti utilizzati per gestire i contenuti del sito
11
Potete trovare delle informazioni utili sul posizionamento degli elementi all’indirizzo www.brainjar.com/
css/positioning/

15
Utilizzeremo degli elementi “float” per posizionare i contenuti. Dopo aver scritto le prime
righe del codice CSS il nostro sito apparrirà come in figura [4]. Chiaramente questa è solo
una versione preliminare, cerchiamo di capire come è stata ottenuta. Tutto quello che viene
visualizzato è contenuto all’interno di un elemento chiamato #wrap la cui dimensione è l’80%
del supporto di visualizzazione.

Figura 4: Il nostro template cui abbiamo applicato uno stile minimale tramite CSS

La colonna di sinistra, quella centrale e quella di destra sono tutte contenute in un proprio
elemento flottante posizionato sulla sinistra e a tutte è stata assegnata una percentuale della
larghezza totale della pagina. Lo stile clear:both del piè di pagina (footer ) dice al browser
di terminare il “floating” degli elementi ed estendere il footer su tutte e tre le colonne. Per
migliorare il layout e rendere i contenuti più leggibili dobbiamo spaziare le colonne12 . Per
realizzare la spaziatura tra le colonne utilizzaremo ulteriori elementi <div> all’interno delle
colonne stesse. Creeremo quindi una struttura di questo tipo:
12
A causa dei problemi di rendering del codice CSS da parte di alcuni broser (vedi IE) non potremo utilizzare
bordi o padding per il nostro codice CSS

16
<body>
<div id="wrap">
<div id="header">
<div class="inside">
<?php echo $mainframe->getCfg(’sitename’);?>
<jdoc:include type="modules" name="top" />
</div>
</div>
<div id="sidebar">
<div class="inside">
<jdoc:include type="modules" name="left" />
</div>
</div>
<div id="content">
<div class="inside">
<jdoc:include type="component" />
</div>
</div>
<div id="sidebar-2">
<div class="inside">
<jdoc:include type="modules" name="right" />
</div>
</div>
<div id="footer">
<div class="inside">
Powered by <a href="http://joomla.org">Joomla!</a>. Valid <a
href="http://validator.w3.org/check/referer">XHTML</a> and <a
href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>. </div>
</div>
</div>
<!--end of wrap-->
</body>

Aggiungeremo quindi al nostro codice CSS la riga:

.inside {padding:10px;}

Un layout cosı̀ semplice è perfetto per imparare ad utilizzare gli stili CSS con Joomla. Ci mostra,
infatti, due dei vantaggi del CSS sulle tabelle: meno codice e maggiore manutenibilità13 .

8 Un CSS di default per Joomla

Tutti i fogli di stile utilizzati dal nostro template risiederanno all’interno di file con estensione
.css e nella directory css. Il codice utilizzato per il layout attuale è:
13
Tratteremo poi la costruzione di un layout “Source Ordered“

17
/*CSS per il layout*/
body {
text-align:center; /*center hack*/
}
#wrap {
min-width:760px;
max-width:960px;
/*width: auto !important; */ /*IE6 hack*/
/* width:960px;*/ /*IE6 hack*/
/*margin:0 auto;*/ /*center hack*/
/*text-align:left;*/ /*center hack*/
}
#header {}
#sidebar {float:left;width:20%; overflow:hidden }
#content {float:left;width:60%; overflow:hidden }
#sidebar-2 {float:left;width:20%; overflow:hidden }
#footer {clear:both;}
.inside {padding:10px;}

A causa del mancato rispetto degli standard da parte di Microsoft, Internet Explorer non è
in grado di centrare la pagina utilizzando unicamente CSS. Come si vede nella parte di codice
riportata sopra è necessario utilizzare degli ”hack“ per poter effettuare una centratura in IE.
Potrebbe sembrare strano aver definito la dimensione delle nostre colonne come percentuale
dell’elemento contenitore ed aver utilizzato poi un div la cui dimensione è fissa. Cerchiamo di
capire i motivi della scelta:

• Utilizzare delle colonne fluide all’interno di una elemento dimensionato assolutamente

rende il template molto flessibile. Se, ad esempio, aggiungiamo dei pulsanti per variare
la dimensione della pagina è sufficiente cambiare un solo valore.

• Molti utilizzatori del web hanno a disposizione monitor dalla dimensioni generose, studi
di usabilità ci dicono che linee di testo di dimensione superiore ai 900px diventano difficili
da leggere. Limitare la fluidità del sito con un div contenitore a dimensioni fisse rende
quindi il nostro template più accessibile.

Abbiamo aggiunto alle colonne un nuovo stile: overflow:hidden. Questo permetterà alle pa-
gine che stiamo disegnando di interrompersi in maniera elegante durante il ridimensionamento.

/*CSS Tipografico */
* {
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {
margin: 0.5em 0;
}
li,dd {
margin-left:1em;

18
}
fieldset {
padding:.5em;
}
body {
font-size:76%;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:1.3;
}

A tutti gli elementi viene assegnato sia un margine che un padding nulli, successivamente agli
elementi di tipo blocco:

• h1,h2,h3,h4,h5,h6

• p,blockquote,form,label

• ul,ol,dl,fieldset,address

viene assegnato un margine inferiore. La dimensione del font viene impostata a 76% e tutte le
dimensioni sono poi espresse in em. L’impostazione line-height:1.3 aiuta la leggibilità del
sito.Tutto questo permette al lettore di impostare la dimensione dei carattari a suo piacimento
durante la lettura dei contenuti del sito.

Figura 5: Il nostro template dove sono stati colorati i blocchi principali che lo compongono e sono stati applicati gli stili tipografici

19
 Notate come le colonne sui lati non raggiungano il pedice della pagina. Questo è dovuto al
fatto che la loro dimensione è determinata unicamente dal contenuto, dove in figura [5] si vede
dello spazio bianco non esiste alcun tipo contenuto. Se lo sfondo del nostro template è bianco
per tutte e due le colonne non ci saranno problemi di tipo estetico.

8.1 Elementi CSS specifici di Joomla

Joomla mette a disposizione del creatore di template molti elementi le cui caratteristiche è
possibile cambiare utilizzando i fogli di stile CSS. In tabella [1] possiamo vedere le classi e gli
id più usati.

article separator adminform article separator

author bannerfooter bannergroup
bannerheader banneritem blog
blog more blogsection breadcrumbs
button buttonheading clr
componentheading article separator adminform
article separator author bannerfooter
bannergroup bannerheader banneritem
blog blog more blogsection
breadcrumbs button buttonheading
clr componentheading content email
content rating content vote contentdescription
contentheading contentpagetitlw contentpane
contentpaneopen contenttoc createdate
created-date date input
inputbox intro latestnews
loclink mainlevel message
metadata modifydate module
moduletable mosimage mosimage caption
mostread newsfeed outline
pagenav pagenav next pagenav prev
pagenavbar pagenavcounter pathway
pollstableborder read search
searchintro sections sectiontable footer
sectiontableentry sectiontablefooter sectiontableheader
small smalldark sublevael
title wrapper

Tabella 1: Elementi CSS definiti da Joomla

Dato il gran numero di elementi predefiniti da Joomla, nella realizzazione del nostro template
dobbiamo fare attenzione alle regole di specificità definite dai fogli di stile. Ad esempio:

a {color:blue;}
a:link {color:red;}

20
.contentheading {color:blue;}
div.contentheading {color:red;}

Il colore del link e il colore di .contentheading sarà il rosso dato che le regole CSS che
impostano tale colore sono più specifiche. Durante lo sviluppo di un template Joomla avrete
spesso bisogno di sovrascrivere una regola più generale con una più specifica:

.moduletable
table.moduletable

.moduletable è il nome di un div che contiene una tabella mentre table.moduletable ap-
plicherà il suo stile unicamente ad una tabella che riporta nella sua dichiarazione il comando
class="moduletable", la dichiarazione di classe applicherà il suo stile a qualsiasi alemento
appertenga alla classe.

a.contentpagetitle:link
.contentpagetitle a:link

Il comando a.contentpagetitle:link applicherà lo stile a tutti i tag a di classe .contentpagetitle

che sono dei link. Il camando .contentpagetitle a:link applicherà lo stile ad ogni tag a
all’interno di elementi di classe .contentpagetitle che è di tipo link. La specificità è un
aspetto relativamente complesso di utilizzo dei fogli di stile di cui ci occuperemo in una nota
separata. Ora il nostro template sta utilzzando ancora molte tabelle, come detto prima, questo
rallenta il caricamento della pagina e rende la sua manutenzione più ostica. Vedremo più avanti
come sia possibile ovviare al problema.

9 Moduli
Quando un modulo viene chiamato all’interno del file index.php abbiamo a disposizione diverse
opzione per regolare il suo aspetto. La sintassi è:

<jdoc:include type="modules" name="LOCATION" style="OPTION" />

Lo stile è opzionale ed è definito nel file /modules/templates/modules.php. Attualmente nel

file modules.php sono contenuti i Layout: ”table“, ”horz“, ”xhtml“,”rounded“.”raw“. Vediamo
ora nel dettaglio le loro caratteristiche. Impostando style="table" i moduli sono visualizzati
in colonna. Il codice seguente mostra un esempio dell’output prodotto:

<table cellpadding="0" cellspacing="0" class="moduletable">

<tr>
<th valign="top"> modChrome_table </th>
</tr>
<tr>
<td> modChrome_table </td>
</tr>
</table>

Impostando style="horz" i moduli sono visualizzati orizzontalmente. L’ouput di ogni modulo

è inserito in una tabella wrapper. Nel codice seguente potete vedere un esempio di questo stile:

21
<table cellspacing="1" cellpadding="0" border="0" width="100%">
<tr>
<td valign="top">
<table cellpadding="0" cellspacing="0" class="moduletable">
<tr>
<th valign="top"> modChrome_horz </th>
</tr>
<tr>
<td> modChrome_horz </td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top">
<table cellpadding="0" cellspacing="0" class="moduletable">
<tr>
<th valign="top"> modChrome_horz </th>
</tr>
<tr>
<td> modChrome_horz </td>
</tr>
</table>
</td>
</tr>
</table>

Impostando style="xhtml" i moduli sono visualizzati come semplici elementi div. Di seguito
un esempio del codice prodotto:

<div class="moduletable">
<h3>modChrome_xhtml</h3>
modChrome_xhtml </div>

Impostando style="rounded" i moduli sono visualizzati utilizzando un formato che permette

angoli arrotondati e deformabili. Se viene utilizzato questo stile il nome dei <div> cambia da
moduletable e module. Di seguito un esempio di output:

<div class="module">
<div>
<div>
<div>
<h3>modChrome_rounded</h3>
modChrome_rounded </div>
</div>
</div>
</div>

22
 Impostando infine style=raw i moduli sono visualizzati come output raw senza alcun
elemento contenitore ne titolo. Otteniamo in questo caso un output del tipo:

modChrome_raw

Come potete vedere le opzioni Xhtml e Rounded producono del codice molto più snello e chiaro
rispetto alla altre. É buona norma quindi, non utilizzare (a meno di estrema necessità), gli stili
table e horz. Nello sviluppo del nostro template useremo sempre lo stile xhtml ottenendo del
codice simile a:

<body>
<div id="wrap">
<div id="header">
<div class="inside"> <?php echo $mainframe->getCfg(’sitename’);?>
<jdoc:include type="modules" name="top" style="xhtml" />
</div>
</div>
<div id="sidebar">
<div class="inside">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
</div>
<div id="content">
<div class="inside">
<jdoc:include type="component" />
</div>
</div>
<div id="sidebar-2">
<div class="inside">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
</div>
<div id="footer">
<div class="inside"> Powered by <a href="http://joomla.org">Joomla!</a>.
Valid <a href="http://validator.w3.org/check/referer">XHTML</a> and <a
href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>. </div>
</div>
</div>
<!--end of wrap-->
</body>

Notate come non sia possibile inserire questi stili nell’elemento <jdoc:include type="component" />
dato che none è un modulo. Modificando il sistema di visualizzazione dei moduli siamo riusciti
a ridurre il numero di tabelle. Assegnamo dei semplici stili alle tabelle per produrre il risultato
in figura [6] Inseriremo il titolo del nostro sito all’interno di un tag <H1>, è semanticamente più
corretto ed inoltre permette una migliore indicizzazione nei motori di ricerca. Aggiungeremo
anche del css per dare ai moduli un bordo e uno sfondo per il titolo:

23
/*CSS tipografico2*/
* {
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {
margin: 0.5em 0;
}
li,dd {
margin-left:1em;
}
fieldset {
padding:.5em;
}
body {
font-size:76%;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:1.3;
margin:1em 0;
}
#wrap{
border:1px solid #999;
}
#header{
border-bottom: 1px solid #999;
}
#footer{
border-top: 1px solid #999;
}
a{
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
h1,.componentheading{
font-size:1.7em;
}
h2,.contentheading{
font-size:1.5em;
}
h3{
font-size:1.3em;
}
h4{
font-size:1.2em;

24
}
h5{
font-size:1.1em;
}
h6{
font-size:1em;
font-weight:bold;
}
#footer,.small,.createdate,.modifydate,.mosimage_caption{
font:0.8em Arial,Helvetica,sans-serif;
color:#999;
}
.moduletable{
margin-bottom:1em;
padding:0 10px; /*padding for inside text*/ border:1px #CCC solid;
}
.moduletable h3{
background:#666;
color:#fff;
padding:0.25em 0;
text-align:center;
font-size:1.1em;
margin:0 -10px 0.5em -10px;
/*negative padding to pull h3 back out from .moduletable padding*/ }

Attenzione: molti dei menu nell’installazione standard di Joomla hanno un suffisso _menu
nelle proprietà del modulo. Per ottenere un comportamente uniforme nella presentazione tali
specificatori sono stati cancellati.

10 I Menu
Per la costruzione dei menu utilizzeremo le liste CSS invece di strutture tabulari, tale approccio
permette di alleggerire di molto il layout del sito ed inoltre ci consente di applicare una vasta
serie di effeti grafici direttamente tramite i fogli di stile. L’utilizzo delle liste è, inoltre, auspi-
cabile per facilitare l’accesso ai browser testuali, ai lettori di schermo e ai motori di ricerca. I
menu a lista sono stati introdotti all’interno dell’albero di sviuluppo ufficiale di Joomla dalla
versione 1.5 per facilitare la costruzione di siti in cui il contenuto è completamente scollegato
dalla forma. E in rete sono disponibili molti esempi di menu creati utilizzando i fogli di stile,
il sito Listamatic 14 elenca oltre 30 stili diversi di menu. Per poter utilizzare tali modelli in
Joomla dobbiamo effettuare alcune modifiche. Il codice su cui sono basati tali esempi è:

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href=" #" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
14
http://css.maxdesign.com.au/listamatic/index.htm

25
Figura 6: Aspetto del template dopo l’aggiornamento del codice CSS per i menu

26
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

Notiamo la presenza di un tag <div> chiamato navcontainer e di un <ul> il cui id

è navlist. Per dupplicare questa struttura in Joomla dobbiamo ottenere l’equivalente del
navcontainer dell’esempio precedente in Joomla, per far ciò è sufficiente utilizzare i suffissi
per i moduli; se ricordate, l’output dello stile xhtml per un modulo era:

<div class="moduletable">
<h3>modChrome_xhtml</h3>
modChrome_xhtml </div>

Aggiungendo un suffisso alla classe moduletable otteniamo del codice simile al seguente:

<div class="moduletable_suffix">
<h3>modChrome_xhtml</h3>
modChrome_xhtml </div>

Quindi quando ricopiamo del codice da Listamatic dobbiamo preoccuparci di sostituire a

navcontainer moduletable_suffix. Questo utilizzo del suffisso per la classe dei moduli è
molto utile, ci permette infatti di realizzare box colorati diversamente unicamente cambiando
il suffisso della loro classe. Per il nostro sito test utilizzeremo il codice CSS:

.moduletablemenu{
padding:0;
color: #333;
margin-bottom:1em;
}
.moduletablemenu h3 {
background:#666;
color:#fff;
padding:0.25em 0;
text-align:center;
font-size:1.1em;
margin:0;
border-bottom:1px solid #fff;
}
.moduletablemenu ul{
list-style: none;
margin: 0;
padding: 0;
}
.moduletablemenu li{
border-bottom: 1px solid #ccc;
margin: 0;

27
}
.moduletablemenu li a{
display: block;
padding: 3px 5px 3px 0.5em;
border-left: 10px solid #333;
border-right: 10px solid #9D9D9D;
background-color:#666;
color: #fff;
text-decoration: none;
}
html>body .moduletablemenu li a {
width: auto;
}
.moduletablemenu li a:hover,a#active_menu:link,a#active_menu:visited{
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}

in cui abbiamo usato come suffisso per la classe menu. Ad ogni menù che vogliamo abbia
l’aspetto fornito dal codice CSS (vedi figura [7]sopra riportato è sufficiente assegnare il suffisso
menu.

11 Come nascondere le colonne

La struttura attuale del nostro Layout fa si che esso abbia sempre tre colonne indipendentemente
dalla presenza o meno di contenuti in esse. Dal punto di vista del template di un CMS ciò
non è molto utile dato che non ci permette di cambiare la dispozione dei contenuti senza
dover modificare il codice del teplate. Vogliamo essere in grado di nascondere o ”collassare“
le colonne in assenza di contenuti in maniera completamente automatica. Durante lo sviluppo
della versione 1.5 di Joomla il template engine è stato modificato per rendere più semplice la
costruzione di layout dinamici. Le modifiche al template engine di Joomla 1.5 possono essere
divise in due categorie: cambiamenti rispetto al codice della versione di Joomla 1.0x e nuove
caratteristiche introdotte con Joomla 1.5 come i parametri per i template. Un breve elenco
delle migliorie:

• la funzione mosCountModules è stata sostituita dalla funzione $this->countModules ed

è stato inoltre aggiunto il supporto per le condizioni. Questo permette agli sviluppatori
di contare facilmente il numero totale di moduli in più posizioni in una singola linea di
codice: $this->countModules(’user1+user2’); restituisce il numero totale di moduli
nelle posizioni user1 e user2

• Le varie funzioni utilizzate da Joomla 1.0x per caricare il codice generato dal CMS sono
state sostituite da un’interfaccia unificata: <jdoc : include .../>. Ad esempio moduli
in una data posizione possono essere inseriti utilizzando < jdoc :include type="modules" name="l

28
 Figura 7: Stile applicato al menu

• Nella vecchia versione di Joomla era necessario caricare manualemente l’editor durante
l’editing della pagina, questo non è più necessario e viene automaticamente deciso durante
il caricamento dell’header della pagina.

• É possibile passare dei parametri ai template, questo permette agli amministratori di

controllare la struttura di una pagina senza modificarne il codice. Un creatore di template
può impostare alcuni parametri aggiuntivi nei file xml del template per cambiare ad
esempio gli stili cromatici o la massima dimensione orizzontale della pagina.

• É possibile sovrascrivere a livello di template l’output delle componenti core di Joomla,

sostituendo ad esempio le tabelle con dei div

• É stato introdotto il supporto a file css multipli, ora non è più necessario inserire tutto il
codice css in un unico file. É stato inoltre introdotto il supporto allo stile dell’editor html
di joomla tramite il file di stile editor.css

L’uso generale della funzione mosCountModules è:

29
<?php if($this->countModules(‘condition’)) : ?>
do something
<?php else : ?>
do something else
<?php endif; ?>
Esistono quattro possibili condizioni:
countModules(’left’) Restituirà 1 se esiste un elemento posizionato a sinistra
countModules(’left and right’) Restituirà 1 se esiste almeno un modulo posizionato a
destra ed almeno un modulo posizionato a sinistra.
countModules(’left or right’) Restituirà 1 se esiste almeno un modulo in posizione destra
o sinistra
countModules(’left + right’) Conterà il numero di moduli in posizione destra e sinistra
Utilizzeremo la funzione su illustrata per essere in grado di sapere se in una determinata erea
sono presenti dei moduli. Cosı̀, se ad esempio se nella colonna di sinistra non dovesse essere
presente alcun modulo potremo collassarla per far spazio al resto dei contenuti del nostro sito.
Per rendere questa operazione quanto più semplice possibile inseriremo un certo numero di
espressione condizionali nell’header della pagina.
<?php
if($this->countModules(’left and right’) == 0) $contentwidth = "100";
if($this->countModules(’left or right’) == 1) $contentwidth = "80";
if($this->countModules(’left and right’) == 1) $contentwidth = "60";
?>
Le righe di codice sopra riportate vanno lette cosı̀:
• se non ci sono moduli ne a destra ne a sinistra espandi l’area dei contenuti fino ad occupare
il 100% dello spazio disponibile
• se ci sono dei moduli a destra o (aut) a sinitra espandi l’area dei contenuti fino ad occupare
l’80% dello spazio disponibile
• se ci sono dei moduli a destra e a sinistra espandi l’area dei contenuti fino ad occupare il
60% dello spazio disponibile
Dovremo poi modificare la dichirazione del div content:
<div id="content">
in questo modo:
<div id="content<?php echo $contentwidth; ?>">
ed aggiungere a layout.css le definizioni dei tre layer di contenuto:
#content60 {float:left;width:60%;overflow:hidden;}
#content80 {float:left;width:80%;overflow:hidden;}
#content100 {float:left;width:100%;overflow:hidden;}
Le espressioni condizionali in PHP devono comparire all’interno dell’header della pagina DOPO
la linea che collega index.php a template.css.

30
11.1 Nascondiamo i moduli
Quando creiamo delle colonne collassabili è sembra buona pratica preparare i contenitori dei
moduli in modo che non venga prodotto alcun codice se non è presente del contenuto. Se non
facessimo questo, potremmo andare a creare una pagine con molti tag <div> vuoti, questo
può portare a problemi di visualizzazione in alcuni browser. Per nasconder un <div> vuoto
utilizzeremo il seguente codice:

<?php if($this->countModules(’left’)) : ?>

<div id="sidebar">
<div class="inside">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
</div>
<?php endif; ?>

Utilizzando il codice riportato sopra, se non sono presenti contenuti in posizione sinistra il
<div id="sidebar"> non verrà inserito all’interno della pagina. Utilizzando le tecniche appena
esposte il file index.php è diventato:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this-
>language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this-
>direction; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/<?php echo $this->template
?>/css/template.css" type="text/css" />
<?php
if($this->countModules(’left and right’) == 0) $contentwidth = "100";
if($this->countModules(’left or right’) == 1) $contentwidth = "80";
if($this->countModules(’left and right’) == 1) $contentwidth = "60";
?>
</head>
<body>
<div id="wrap">
<div id="header">
<div class="inside">
<h1><?php echo $mainframe->getCfg(’sitename’);?></h1>
<jdoc:include type="modules" name="top" style="xhtml" />
</div>
</div>

<?php if($this->countModules(’left’)) : ?>

<div id="sidebar">
<div class="inside">
<jdoc:include type="modules" name="left" style="xhtml" />

31
 </div>
</div>
<?php endif; ?>

<div id="content<?php echo $contentwidth; ?>">

<div class="inside">
<div id="pathway">
<jdoc:include type="modules" name="breadcrumb" style="xhtml" />
</div>
<jdoc:include type="component" style="xhtml" />
</div>
</div>
<?php if($this->countModules(’right’)) : ?>
<div id="sidebar-2">
<div class="inside">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
</div>
<?php endif; ?>
<?php if($this->countModules(’footer’)) : ?>
<div id="footer">
<div class="inside">
<jdoc:include type="modules" name="footer" style="xhtml" />
</div>
</div>
<?php endif; ?>
</div>
<!--end of wrap-->
</body>
</html>

Notate che nella pagina è stato inserito anche il modulo per i breadcrumbs.

32
A CSS shorthands

33