Sviluppo siti web con i cms – guida joomla 14

Sviluppo siti web con i cms – guida joomla 13
9 agosto 2010
Realizzazione siti web con i cms – guida joomla 15
9 agosto 2010

Le zone collassabili
Collassabilità delle zone ovvero implementare una struttura dinamica del layout
Uno degli aspetti più interessanti e ricercati nello sviluppo dei template per Joomla! è la possibilità
di avere una qualche forma di dinamismo anche nella struttura dell’impaginazione,riuscire cioè a
sfruttare un sistema di pubblicazione non strettamente vincolato e ripetitivo per tutte le pagine del
sito.
Da una parte con la gestione di pubblicazione dei moduli questo viene già realizzato (ci riferiamo
ad esempio alla possibilità di assegnare i moduli agganciandoli a specifiche pagin e del sito,ad
esempio un modulo login solo in home,un modulo sondaggi visibile in un’altra o più pagine etc).
Esiste una funzionalità aggiuntiva ch e possiamo considerare ed impostare nell’atto di
realizzazione del file index.php,la possibilità cioè di fare in modo che il sistema si renda conto
della pubblicazione o meno dei moduli variando di conseguenza la struttura del layout.
Abbiamo visto nel template test che abbiamo creato e del quale stiamo implementando le funzioni
che i moduli sono presenti all’interno di zone (DIV) ben definite:
abbiamo cioè per esempio considerando la colonna sinistra scritto
<!– colonna sinistra –>
<div id=”colonnasinistra”>
<jdoc:include type=”modules” name=”left” style=”” />
</div>
<!– fine colonna sinistra –>
Con l’include della direttiva jdoc abbiamo richiamato a video i moduli left
Questa è una soluzione “statica” nel senso che un a struttura di questo tipo prevede comunque la
pubblicazione dei moduli in quell’area,qualora no n pubblicassimo nessun modulo nella colonna

sinistra ci ritroveremmo con un impaginazione sgradevole, avremmo cio è comunque visibile ma
vuota la zona relativa.
Possiamo in realtà gestire anche questo aspetto f acendo ricorso questa volta ad entrambe le
direttive jdocument e jdocumenthtml.
Nelle pagine precedenti abbiamo dato chiarimenti in merito a queste due funzioni dicendo che
jdoc opera un include mentre l’altra attraverso la variabile $this verifica l’esistenza o meno di una
condizione.
Il fattore importante da considerare è che questo funziona perfettamente se collegato ad una
struttura html definita!
Basterà cambiare il listato sopra descritto in questo modo:
<!– colonna sinistra –>
<?php if($this->countModules(‘left’)) : ?>
<div id=”colonnasinistra”>
<jdoc:include type=”modules” name=”left” style=”” />
</div>
<?php endif; ?>
<!– fine colonna sinistra –>
In sostanza viene chiesto al sistema di verificare l’esistenza di un modulo (pubblicazione) nella
zona div colonnasinistra e se il risultato è ugu ale a zero di collassare dando così la possibilità alle
zone limitrofe di espandersi per riempire lo spazio ora vuoto.
Ovviamente bisognerà anche effettuare degli aggiustamenti nel foglio di stile che lo ricordiamo ha
parametri in larghezza ben definiti.
L’implementazione del nostro template test sarà to tale,riferita cioè a tutte e tre le colonne sinistra
– contenuti – destra creiamo cioè una struttura flessibile che si adatti utilizzando tutto lo spazio
disponibile ed aumentando le possibilità di differenziare l’impaginazione finale.
Per far questo dobbiamo effettuare delle modifich e su entrambi i file interessati:
index.php
•template.css

innanzitutto inseriamo l’istruzione condizionale su tutte le zone in cui sono inseriti/richiamati gli
include compresa la zona del componente.
<!– colonna sinistra –>
<?php if($this->countModules(‘left’)) : ?>
<div id=”colonnasinistra”>
<jdoc:include type=”modules” name=”left” style=”” />
</div>
<?php endif; ?>
<!– fine colonna sinistra –>
<!– contenuti –>
<div id=”contenuti<?php echo $contentwidth; ?>”>
<jdoc:include type=”component” />
</div>
<!– fine contenuti –>
<!– colonna destra –>
<?php if($this->countModules(‘right’)) : ?>
<div id=”colonnadestra”>
<jdoc:include type=”modules” name=”right” style=”” />

</div>
<?php endif; ?>
<!– fine colonna destra –>
Ho evidenziato una parte del codice in color e verde e dal font più marcato per riportare una
considerazione che è alla base di tutta l’implementazione:
vogliamo creare una struttura dinamica ch e regoli il layout in base all’esistenza o meno dei moduli
pubblicati dunque le opzioni che vogliamo arrivare a gestire saranno:
template a 3 colonne sinistra + contenuti-destra

template a 2 colonne sinistra + contenuti

template a 2 colonne contenuti + destra

template a 1 colonna contenuti

Joomla! è un framework basato sul php un linguaggio open molto potente e versatile,con il quale è
possibile effettuare anch e operazioni di conteggio e a seconda del risultato a video (pubblicazione)
gestire delle variabili.
Nel nostro caso imposteremo delle variabili che andranno a leggere delle classi css distinte a
seconda del caso.
<?php
if($this->countModules(‘left and right’) == 0) $co ntentwidth = “intero “;
if($this->countModules(‘left or right’) == 1) $contentwidth = “mezzo”;
if($this->countModules(‘left and right’) == 2) $co ntentwidth = “tutte”;
?>
Basandoci sull’esistenza dei moduli diciamo che
Se left e right è uguale a zero leggi la classe contenutiintero
Se è presente uno solo dei moduli leggi la classe contenutimezzo
Se i moduli left e right sono presenti entrambi leggi la classe contenutitutte
Apriamo dunque il file index.php del nostro template test e inseriamolo app ena prima del tag
</head> di chiusura:

il listato sarà dunque il seguente:
<!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.or g/1999/xhtml” xml:lang=”<?php echo $this->language; ?>”
lang=”<?php echo $this->language; ?>” >
<head>
<jdoc:include type=”head” />
<link rel=”stylesheet” href=”templates/system/css/general.css” type=”text/css” />
<link rel=”stylesheet” href=”templates/<?php echo $this->template ?>/css/template.css”
type=”text/css” />
<link rel=”shortcut icon” href=”templates/<?php echo $this->template?>/favicon.ico” />
<?php
if($this->countModules(‘left and right’) == 0) $co ntentwidth = “intero “;
if($this->countModules(‘left or right’) == 1) $contentwidth = “mezzo”;
if($this->countModules(‘left and right’) == 2) $co ntentwidth = “tutte”;
?>
</head>
<body>
<!– inizio contenitore –>
<div id=”wrapper”>
<!– Header –>
<div id=”header”>

<?php echo $mainframe->getCf g( ‘sitename’);?>
</div>
<!– fine Header –>
<!– colonna sinistra –> <?php if($this->countModules(‘left’)) : ?>
<div id=”colonnasinistra”>
<jdoc:include type=”modules” name=”left” style=”” />
</div><?php endif; ?>
<!– fine colonna sinistra –>
<!– contenuti –>
<div id=”contenuti<?php echo $contentwidth; ?>”>
<jdoc:include type=”component” />
</div>
<!– fine contenuti –>
<!– colonna destra –><?php if($this->countModules(‘right’)) : ?>
<div id=”colonnadestra”>
<jdoc:include type=”modules” name=”right” style=”” />
</div><?php endif; ?>
<!– fine colonna destra –>

<!– Footer –>
<div id=”footer”>
<jdoc:include type=”modules” name=”bottom” style=”” />
</div>
<!– fine Footer –>
</div>
<!– fine contenitore –>
</bod y>
</html>
Salviamo il file index e ora andiamo ad impostare le 3 diverse classi css:
#contenutiintero {
float: left;
color: #333;
border: 1px solid #892105;
margin: 0px 5px 5px 5px;
padding: 10px;
width:920px;
}
Copyright © 2008 http://www.joomlaskin.it rilasciato sotto licenza Creative commons 3.0 non commercial
Vuoi leggere i nuovi articoli di livello avanzato sulla creazione dei template per joomla 1.5? Vieni a trovarci!
#contenutimezzo {
float: left;
color: #333;
border: 1px solid #892105;
margin: 0px 5px 5px 5px;
padding: 10px;
width:715px;
}
#contenutitutte{
float: left;
color: #333;
border: 1px solid #892105;
margin: 0px 5px 5px 5px;
padding: 10px;
width:485px;
}
È sufficiente creare un clone della classe esistente aggiungendo i vari suffissi ed impostando i
valori in larghezza evidenziati in rosso, in modo che le varie zone o ccupino lo spazio relativo.
Salviamo e testiamo il nostro template per vedere il risultato nel browser pubblicando di volta in
volta i moduli nelle colonne.
Colonna sinistra + contenuti