Salve a tutti!!!
Ho proceduto con la traduzione del tutorial
http://docs.joomla.org/Tutorial:More_on_Joomla!_modulesCi sono varie immagini tabelle e animazioni in inglese e ovviamente non ho potuto modificarle per poterle tradurre. Ho proceduto con la traduzione delle sole parti di testo ma bisognerà, quindi, integrarle con tutti i jpg e le tabelle presenti nel tutorial originale.
Naturalmente la traduzione avrà bisogno di un'accurata revisione.
Per qualsiasi cosa, lasciatemi pure un messaggio
Ecco la traduzione:
Tutorial: Maggiori informazioni sui moduli Joomla!
Il metodo CountModules può essere usato all'interno di un template per determinare il numero di moduli abilitati in una determinata posizione modulo. Viene comunemente utilizzato per includere in una certa posizione moduli su HTML se almeno un modulo risulta abilitato per quella determinata posizione. Questa tecnica, a volte indicata come "collapsing columns”, evita che regioni vuote vengano definite nel template d’uscita.
Ad esempio, il codice che segue comprende moduli nella posizione 'user1' solo se almeno un modulo viene abilitato per quella posizione.
<?php if ($this->countModules( 'user1' )) : ?>
<div class="user1">
<jdoc:include type="modules" name="user1" style="rounded" />
</div>
<?php endif; ?>
Il metodo CountModules può essere usato per determinare il numero di Moduli presenti in più di una posizione modulo. Possono essere effettuati anche calcoli più avanzati.
L’argomento della funzione CountModules è di norma il nome di una singola posizione Modulo. La funzione ci fornirà il numero di Moduli correntemente abilitati per quella posizione modulo. Ma puoi anche svolgere semplici operazioni logiche e aritmetiche su due o più posizioni Modulo.
Ad esempio, per determinare il numero totale di Moduli abilitati insieme nelle posizioni <user1> e <user2>, puoi usare la funzione chiamata:
$this->countModules( 'user1 + user2' );
Anche se i comuni operatori aritmetici, +. -. *, / funzionano come previsto, essi non sono utili come gli operatori logici 'and' e 'or'.
Ad esempio, per determinare se la posizione <user1> e la posizione <user2> hanno entrambe almeno un Modulo abilitato, puoi usare la funzione chiamata:
$this->countModules( 'user1 and user2' );
Attenzione: un errore comune è provare con qualcosa come questo:
$this->countModules( 'user1' and 'user2' );
Questo - è più o meno garantito- darà sempre falso indipendentemente dal numero di Moduli abilitati in entrambe le posizioni, quindi verifica attentamente cosa stai passando nel countModules.
Devi avere esattamente un carattere di spazio che separa ogni elemento nella stringa. Ad esempio, 'user1+user2' non produrrà il risultato desiderato in quanto deve esserci uno spazio in entrambi i lati del segno ‘+’. Inoltre, 'user1 + user2' non produrrà un messaggio di errore PHP in quanto c’è più di uno spazio che separa ciascun elemento.
Esempio: le posizioni Modulo user1 e user2 devono essere visualizzate nella regione, ma tu vorresti che la regione non appaia per niente se nessun Modulo è abilitato in entrambe le posizioni Modulo.
<?php if ($this->countModules( 'user1 or user2' )) : ?>
<div class="rightcolumn">
<jdoc:include type="modules" name="user1" style="xhtml" />
<jdoc:include type="modules" name="user2" style="xhtml" />
</div>
<?php endif; ?>
Esempio: le posizioni Moduli user1 e user2 devono essere visualizzate side-by-side con un separatore tra loro. Comunque, se solo una delle posizioni Modulo ha Moduli abilitati, allora non c’è bisogno di un separatore. Inoltre, se nè user1 nè user2 hanno Moduli abilitati, allora non viene prodotto niente.
<?php if ($this->countModules( 'user1 or user2' )) : ?>
<div class="user1user2">
<?php if ($this->countModules( 'user1' )) : ?>
<jdoc:include type="modules" name="user1" style="xhtml" />
<?php endif; ?>
<?php if ($this->countModules( 'user1 and user2' )) : ?>
<div class="greyline"></div>
<?php endif; ?>
<?php if ($this->countModules( 'user2' )) : ?>
<jdoc:include type="modules" name="user2" style="xhtml" />
<?php endif; ?>
</div>
<?php endif; ?>
Nota come la prima chiamata di countModules determina se ci sono dei moduli da esporre a tutti. La seconda chiamata determina se nella posizione 'user1' ci sono alcuni moduli, e se ce ne sono li visualizza. La terza chiamata determina se in entrambe le posizioni user1 e user2 ci sono Moduli abilitati e se è cosi, allora si deve provvedere a inserire un separatore tra le posizioni. Infine, la quarta chiamata determina se nella posizione 'user2' vi siano dei Moduli abilitati e di visualizzarli nel caso siano presenti.
Contenuti
[nascondi]
* 1 Collapsing columns
o 1.1 Vedi anche
* 2 Creare angoli arrotondati
o 2.1 Introduzione
o 2.2 La Teoria
o 2.3 Mettere in pratica - creare le immagini
o 2.4 Mettere in pratica - Modificare il tuo template
* 3 Cos’è il Modulo chrome?
* 4 Applicazione personalizzata del Modulo chrome
o 4.1 Attributi personalizzati chrome
Collapsing columns
Un requisito comune nella progettazione di pagine web di Joomla! è la rimozione di una posizione modulo quando in quella determinata posizione non vi sono moduli abilitati, così da lasciare disponibile spazio per gli altri elementi della pagina. La regione rimossa viene indicata come “collapsing columns”. Questo obiettivo può essere raggiunto utilizzando la funzione countModules.
Ad esempio, se si desidera includere una posizione modulo "user1" solo se ci sono moduli abilitati in quella posizione, allora puoi usare questo codice:
<?php if ($this->countModules( 'user1' )) : ?>
<div class="user1">
<jdoc:include type="modules" name="user1" style="xhtml" />
</div>
<?php endif; ?>
Nota che il tag <jdoc:include /> e il suo vicino <div> sono inclusi solo se la chiamata di countModules restituisce un valore diverso da zero (se lo statement di PHP rileva zero come falso e qualsiasi valore diverso da zero come vero).
Certe volte, potrebbe esserti utile far crollare un paio di posizioni modulo singolarmente o insieme.
<?php if ($this->countModules( 'user1 or user2' )) : ?>
<div class="user1user2">
<?php if ($this->countModules( 'user1' )) : ?>
<jdoc:include type="modules" name="user1" style="xhtml" />
<?php endif; ?>
<?php if ($this->countModules( 'user2' )) : ?>
<jdoc:include type="modules" name="user2" style="xhtml" />
<?php endif; ?>
</div>
<?php endif; ?>
Nota come la regione (che è designata dalla classe CSS "user1user2") è solo in uscita se o 'user1' o 'user2', o entrambi, hanno almeno un modulo attivato.
Se si desidera un divisore per separare le due posizioni del modulo, si deve fare attenzione a produrre il divisore solo se entrambe le posizioni Modulo hanno Moduli abilitati all’interno di esse. Ad esempio,
<?php if ($this->countModules( 'user1 or user2' )) : ?>
<div class="user1user2">
<?php if ($this->countModules( 'user1' )) : ?>
<jdoc:include type="modules" name="user1" style="xhtml" />
<?php endif; ?>
<?php if ($this->countModules( 'user1 and user2' )) : ?>
<div class="divider"></div>
<?php endif; ?>
<?php if ($this->countModules( 'user2' )) : ?>
<jdoc:include type="modules" name="user2" style="xhtml" />
<?php endif; ?>
</div>
<?php endif; ?>
Vedi anche
* PHP if statement
* PHP else statement
* PHP elseif statement
* Sintassi alternativa per le strutture di controllo PHP
* Operatori per l’uso della funzione countModules
Creare angoli arrotondati
Introduzione
Con (X)HTML e CSS, è facile creare bordi rettangolari intorno ai componenti di una pagina web. Di solito, questo viene fatto inserendo il codice della parte della pagina web nei tag <div> ...</ div> (o simili), e quindi applicando un margine al <div> usando le proprietà bordi CSS.
Tuttavia, al momento non è possibile creare un margine che non sia rettangolare usando solo (X) HTML e CSS. Nel presente tutorial, i bordi non rettangolari si riferiscono agli 'angoli arrotondati', dato che quest’ultimi sono l’applicazione più comune. Comunque, gli angoli non devono essere arrotondati - questa tecnica può essere usata per creare bordi con molti stili e molte forme differenti.
Al fine di superare i limiti dei bordi CSS, possiamo utilizzare una o più immagini per provvedere all’aspetto del margine. Questo è molto facile da fare quando si conosce quanto grande sarà il<div> - è sufficiente creare un'immagine di dimensione corretta mostrando il margine che si desidera e impostarlo come sfondo per il tuo <div>. In generale, comunque, se vuoi modificare le dimensioni degli elementi della pagina web (larghezza, altezza, o entrambi) in base al loro contenuto, questo sarà particolarmente realizzabile dai progettisti di template utilizzando un CMS come Joomla! - Se non sappiamo quale contenuto sta per essere inserito nella pagina, non possiamo sapere quale sarà la dimensione del <div>! L'obiettivo principale di questo tutorial è, quindi, creare angoli arrotondati 'fluidi' - cioè, angoli che possono essere ridimensionati per potersi addattare alle diverse dimensioni del contenuto.
La teoria
Al fine di evitare i problemi sopra descritti, usiamo immagini separate per fornire al nostro box arrotondato i quattro angoli. Al fine di garantire che il margine del box arrotondato sia sempre continuo, le immagini devono essere abbastanza grandi da riempire completamente il nostro container alla massima dimensione possibile. Per fornire al nostro box arrotondato dimensioni inferiori al limite massimo, abbiamo posto le immagini in quattro strati che si sovrappongono l'un l'altro, in moda da dare l'illusione che il margine del box arrotondato è ininterrotto.
Il processo è illustrato dall’animazione presente a destra. Ad ogni fase, un'immagine viene applicata sulla parte superiore dell’ultima immagine.
*
1. In primo luogo, una grande immagine contenente i bordi superiori e di sinistra, e l’angolo arrotondato della parte superiore-sinistra, è posta nell’angolo superiore sinistro del nostro container <div> (evidenziato in rosso per chiarezza). L'immagine è più grande di quella richiesta per questo container, perciò si estende al di là del margine inferiore e di quello di destra; ciò è mostrato nell’animazione per illustrare il processo, ma non sarebbe stato visto nella pratica.
2. Poi, unimmagine sottile orizzontale contenente il margine inferiore e l’angolo inferiore sinistro arrotondato è posta nella parte inferiore-sinistra del container <div>, in cima alla prima immagine. A questa immagine è stato conferito un margine sottile di colore rosa scuro per illustrare il processo; questo margine non può essere utilizzato. Anche in questo caso, si può osservare come l'immagine si estenda oltre il margine destro del container.
3. Il terzo passaggio consiste nel porre una sottile immagine verticale contenente il margine destro e l’angolo arrotondato superiore-destro nell’angolo in alto a destra del container, in cima alla seconda immagine.
4. Infine, un’immagine quadrata che contiene solo l’angolo arrotondato in basso a destra è posta nell’angolo in basso a destra del container.
Mettere in pratica - la creazione di immagini
Per creare le immagini di cui abbiamo bisogno, ci si avvarrà del software open source di disegno vettoriale Inkscape. A differenza dei software di disegno raster (come GIMP), che si occupa dei singoli pixel, il software di disegno vettoriale lavora con le figure geometriche. Questo rende molto più semplice la creazione di angoli arrotondati che presentino esattamente la geometria che vogliamo.
*
Useremo Inkscape per creare un semplice box arrotondato con un piano rosa, uno sfondo bianco e un’ombra in basso a destra. Si tratta dello stesso box mostrato nell'animazione di cui sopra.
1. Per iniziare, bisogna decidere la dimensione massima che vogliamo dare al nostro box. Come indicato in precedenza, questo determinerà la dimensione dell’immagine che dobbiamo utilizzare. Dal momento che più un’immagine è grande e più aumenta la dimensione del file, il sito web con immagini grandi si carica più lentamente; quindi, non vi è alcun vantaggio nel rendere l'immagine più grande del necessario. A questo scopo, si utilizza una dimensione massima di 800px di larghezza per 600px di altezza. Creiamo quindi un nuovo documento con Inkscape che abbia queste dimensioni. Le dimensioni del documento vengono settate scegliendo dal menu File> Proprietà documento, e inserendo i valori corretti nella finestra di dialogo che appare. Anche in questa finestra di dialogo è necessario modificare l'impostazione predefinita dello sfondo da trasparente a bianco (ffffffff). Dopo aver chiuso la finestra di dialogo, si cambia il nome del layer di default (vai su Layer> Rinomina Layer ...) e nominalo "rettangolo arrotondato".
2. Lasciamo un margine di circa 5px dalla nostra immagine. Inoltre, avremo bisogno di un’ombra di 5px di larghezza nel lato destro e nel margine in basso del box arrotondato. Perciò bisognerà disegnare un rettangolo arrotondato largo 785px e alto 585px. Daremo un raggio di 5px agli angoli arrotondati. Per fare questo, selezionare lo strumento rettangolo
dalla barra degli strumenti a sinistra e, cliccando col tasto sinistro del mouse, lo trasciniamo all’interno del documento vuoto. In questo momento, non ci interessano le esatte dimensioni del rettangolo che hai disegnato. Dopo, vai tra le opzioni della barra degli strumenti e inserisci le seguenti impostazioni: W:783.00 (la larghezza) H:583.00 (l’altezza) Rx:5.000 (raggiox) Ry:5.000 (raggioy) px. Perchè le dimensioni sono differenti? Perchè queste dimensioni non includono la larghezza del bordo. Stiamo dando al rettangolo un bordo di 2px che farà, quindi, aumentare ogni dimensione di 2px.
*
3. Di seguito, bisogna aggiustare il margine e impostare il colore del nostro rettangolo. Col rettangolo selezionato, vai sulla barra del menu e clicca su Oggetto > Fill and stroke oppure premi Maiusc + Ctrl + F per fare apparire la finestra di dialogo ‘fill and stroke’. Sotto ‘fill’, scegli il colore di riempimento del piano. Utilizzeremo il colore esadecimale #ffd7eb, perciò inserisci 'ffd7ebff' in RGBA. (le ultime ‘ff’ del valore esadecimale impostano il livello di trasparenza alfa per il riempimento - nel nostro caso completamente opaco). Sotto ‘stroke paint’ impostiamo il colore del margine. Nel nostro caso, vogliamo un bordo nero, perciò possiamo lasciare in RGBA il valore 000000ff. Per finire, sotto la scheda ‘stroke style’ si imposta la larghezza dello stroke (bordo) di 2000px.
*
*
4. Ora abbiamo il nostro rettangolo, ma non è nella posizione corretta. Inkscape misura le posizioni dall’angolo basso a sinistra del documento, così bisogna piazzare il nostro rettangolo a x=5 e y=10. Scegli lo strumento di selezione dalla barra degli strumenti a sinistra, fare clic su un punto qualsiasi all'interno del rettangolo arrotondato, e immetti i valori delle posizioni nelle opzioni della barra degli strumenti.
*
5. Quindi, abbiamo bisogno di creare un nuovo layer per tenere l’ombra riportata. In primo luogo, nascondi il layer originale ("rettangolo arrotondato") facendo clic sull’icona raffigurante l’occhio nella parte inferiore della finestra principale. Poi, vai su Layer> Aggiungi Layer ... sulla barra dei menu, e crea un nuovo layer chiamato "Ombra" al di sotto del layer corrente. Possiamo quindi creare un altro box arrotondato in questo layer. Le misure del box: 785px di larghezza, 585px di altezza, con raggi di 5px, e posto a x=10 e y=5. Nella finestra di dialogo "Fill and Stroke”, impostare il riempimento di RGBA'00000081', e la sfocatura di scorrimento a '0.6 '. Nella scheda 'stroke paint', selezionare l’icona 'no paint’. Si otterrà così un rettangolo arrotondato di colore grigio, parzialmente trasparente e con i bordi leggermente sfocati.
*
*
6. Infine, mostra il layer "rettangolo arrotondato" selezionandolo dal box a discesa nella parte inferiore della finestra principale, e cliccando nuovamente sull'icona raffigurante l’occhio. Congratulazioni - è ora possibile vedere il tuo box arrotondato! A questo punto, è possibile salvare l’immagine come file .svg di Inkscape in modo che si possa facilmente accedere e modificarla in un secondo momento.
*
7. Ora dobbiamo creare le quattro immagini di cui avremo bisogno e salvarle in un formato web. Inkscape rende molto semplice anche questo - basta andare su File> Esporta Bitmap ... e selezionare il pulsante 'Custom' nella finestra di dialogo. Possiamo esportare le parti inerenti l’immagine che abbiamo creato inserendo le coordinate nei box x0/y0 e x1/y1. Ricorda che tutte le coordinate sono misurate dall’angolo in basso a sinistra! Il posto migliore per tagliare l'immagine è poco prima della curva degli angoli arrotondati nei bordi in basso a destra. Si potrebbe, quindi, utilizzare le seguenti impostazioni:
Immagine x0 x1 y0 y1
Superiore sinistro 0 785 15 600
Superiore destro 785 800 15 600
Inferiore sinistro 0 785 0 15
Inferiore destro 785 800 0 15
Le immagini risulteranno come le seguenti:
Image:Rounded corners top left.png
Mettere in pratica - Modificare il Template
Per l’attuazione degli angoli arrotondati su un Modulo, useremo il Modulo ‘rounded’ chrome includendo lo statement <jdoc /> seguente:
<jdoc:include type="modules" name="POSITION" style="rounded" />
Questo creerà nell’ultima pagina web il codice seguente:
<div class="module_menu">
<div>
<div>
<div>
<h3>Main Menu</h3>
<ul class="menu">
<li><!-- various menu items --></li>
</ul>
</div>
</div>
</div>
</div>
I quattro <div>s nidificati ci forniscono i layer utili per le nostre 4 immagini. Possiamo utilizzare il nome della classe del <div> esterno per garantire che abbiamo veramente a che fare con i <div>s giusti e, quindi, utilizzare il rapporto di nidificazione per applicare l'immagine corretta su ogni layer.
Questo si esegue più facilmente utilizzando un foglio di stile esterno, con le seguenti regole:
div.module_menu {
background: url(../images/rounded_topleft.png) 0 0 no-repeat;
padding: 0;
}
div.module_menu div {
background: url(../images/rounded_bottomleft.png) 0 100% no-repeat;
margin: 0;
border: 0;
}
div.module_menu div div{
background: url(../images/rounded_topright.png) 100% 0 no-repeat;
}
div.module_menu div div div {
background: url(../images/rounded_bottomright.png) 100% 100% no-repeat;
}
Il carattere di riempimento, il margine e il bordo sono neccessari per garantire che ogni <div> riempa completamente quello sopra. Le immagini URLs sono specifiche relative al file di locazione CSS.
C’è solo un problema minore di cui bisogna essere consapevoli: le norme CSS non si esauriscono ma vengono solo sovrascritte. Questo significa che, se il contenuto del nostro Modulo include un <div>, queste norme CSS si applicano anche a tale <div> (poiché si tratta di un <div> all'interno di un <div> all'interno di un <div> all'interno di un <div class = "module_menu"> - indipendentemente dal fatto che vi è stato un <div> intermedio).
div.module_menu div div div div{
background: none;
}
E questo è tutto - buona codifica!
Cos’è Module chrome?
Module chrome permette ai designers di template di avere un certo margine di controllo sul modo in cui l’output di un Modulo viene visualizzato nel loro template. In sostanza, consiste in una piccola quantità di HTML predefinito che si inserisce prima, dopo, o durante l'output di ogni modulo, e il cui stile può essere successivamente impostato usando CSS. Module chrome è comunemente utilizzato per fornire bordi intorno ai moduli, in particolare per quelli con gli angoli arrotondati, ma può essere utilizzato per molte altre cose.
Module chrome è determinato utilizzando lo 'stile' attributo nello statement chiamando il modulo. Ad esempio, la seguente dichiarazione può essere utilizzata nel file index.php di un template per inserire i moduli nella posizione 'user1' e applicare Module chrome ‘personalizzato':
<jdoc:include type="modules" name="user1" style="custom" />
Si può notare che lo stesso Modulo chrome viene applicato ad ogni Modulo di questa posizione - in altre parole, se desideri disporre di due moduli in una colonna, ma che abbiano un diverso Modulo chrome, allora dovresti settarli con due 'posizioni' diverse (ad esempio 'user1' e 'user2').
Il pacchetto standard di Joomla! 1.5 comprende sei stili di Module chrome predefiniti. Tuttavia, la flessibilità del template di sistema vuole indicare che non si è limitati solo a questi stili - infatti, è molto facile creare tutti gli stili che si vogliono!
Comparazione dei Moduli chrome standard di Joomla! 1.5
Si noti che il Modulo chrome non cambia molto il suo aspetto - questo dipende dal CSS utilizzato nel template. Ad esempio, i chromes 'none' e 'horz' hanno un aspetto molto simile anche se il codice HTML di base è molto diverso.
Applicare Module chrome personalizzato
Per definire un Modulo chrome personalizzato nel tuo template è necessario creare un file chiamato modules.php nella directory html del tuo template. Ad esempio, questo potrebbe essere
PATH_TO_JOOMLA /templates/TEMPLATE_NAME/html/modules.php.
In questo file si deve definire una funzione denominata modChrome_STYLE dove 'Style' è il nome del Modulo chrome personalizzato. Questa funzione prenderà tre argomenti: $module, &$params, e &$attribs, come mostrato qui sotto:
<?php
function modChrome_STYLE( $module, &$params, &$attribs )
{
/* chromed Module output goes here */
}
?>
All'interno di questa funzione è possibile fare uso di una qualsiasi delle proprietà del Modulo (vale a dire i campi della tabella jos_modules nel database Joomla! del tuo server) per questo modulo, ma le principali proprietà di cui avrai probabilmente bisogno sono $module->content, $module->showtitle e $module->title. $module->showtitle è una variabile booleana, quindi è vera (quando il modulo titolo dovrebbe essere mostrato) o falsa (quando esso non dovrebbe essere mostrato). $module>content e $module->title riportano rispettivamente al modulo contenuto principale e al modulo titolo.
La funzione è una normale funzione PHP , perciò può utilizzare un normale codice PHP. Un esempio comune è quello di utilizzare uno if statement per verificare il valore di $module->showtitle, e dopo includere il titolo o la non conformità:
<?php
if ($module->showtitle)
{
echo '<h2>' .$module->title .'</h2>';
}
?>
Si accede ai parametri del modulo utilizzando l’oggetto $params. Ad esempio, è possibile assegnare un Suffisso Classe Modulo a un modulo di backend del tuo sito Joomla!; questo viene poi immagazzinato nei parametri di quel modulo come moduleclass_sfx. Per creare un <div> con una classe determinata dal Suffisso Classe Modulo, dovresti usare:
<div class="<?php echo $params->get( 'moduleclass_sfx' ); ?>">
<!-- div contents -->
</div>
Attributi Chrome personalizzati
E’ possibile passare ulteriori attributi nella funzione del Module chrome utilizzando lo stesso statement <jdoc:include /> che imposta il Module chrome. Come attributi aggiuntivi puoi passare qualsiasi cosa tu voglia, e vengono memorizzati in $attribs array. Vediamo a titolo di esempio la seguente funzione Module chrome:
<?php
function modChrome_custom( $module, &$params, &$attribs ) {
if (isset( $attribs['headerLevel'] ))
{
$headerLevel = $attribs['headerLevel'];
} else {
$headerLevel = 3;
}
if (isset( $attribs['background'] ))
{
$background = $attribs['background'];
} else {
$background = 'blue';
}
echo '<div class="' .$params->get( 'moduleclass_sfx' ) .'" >';
if ($module->showtitle)
{
echo '<h' .$headerLevel .'>' .$module->title .'</h' .$headerLevel .'>';
}
echo '<div class="' .$background .'">';
echo $module->content;
echo '</div>';
echo '</div>';
}
?>
Puoi quindi impostare i valori di background e di headerLevel nello statement <jdoc:include />, come illustrato di seguito. Se non viene impostato nessun valore, gli attributi di default sono rispettivamente 'blue' e'3 '.
Passaggio di attributi da <jdoc:include /> a Module chrome
Ulteriori informazioni sul passaggio di attributi verso Module chrome si trovano in jtopic:115953.
Entra
nella chat di Joomla.it
