guida template

Un template per Joomla

www.e-moka.net

Matteo Mosangini

Realizzato per l’IIS J. Linussio di Codroipo

Indice

1 Informazioni preliminari 31.1 Php . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31.2 CMS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31.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 65.1 Un po’ di storia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65.2 I fogli di stile CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

6 I componenti di un Template 76.1 Il file templateDetails.xml . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86.2 Il file index.php . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106.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 178.1 Elementi CSS specifici di Joomla . . . . . . . . . . . . . . . . . . . . . . . . . . 20

9 Moduli 21

10 I Menu 25

11 Come nascondere le colonne 2811.1 Nascondiamo i moduli . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

A CSS shorthands 33

2

1 Informazioni preliminari

1.1 Php

PHP e un linguaggio di scripting interpretato, con licenza open source, originariamente con-cepito per la realizzazione di pagine web dinamiche. Attualmente e utilizzato principalmenteper sviluppare applicazioni web lato server ma puo essere usato anche per scrivere script alinea di comando o applicazioni standalone con interfaccia grafica. Il suo nome e un acronimoricorsivo che sta per PHP: Hypertext Preprocessor (PHP: preprocessore di ipertesti). Joomlae un CMS scritto in PHP, durante le lezioni che ci porteranno a crare un template completoincontreremo spesso delle sezioni di codice PHP inserite all’interno dei file che serviranno perrealizzare l’aspetto grafico del nostro sito. Non sara possibile studiare in dettaglio tale linguag-gio di programmazione, di volta in volta cercheremo di spiegare il significato delle istruzioni incui incapperemo. La complessita del codice che andremo ad analizzare sara molto bassa, datoche 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 sonouna categoria di sistemi software utilizzati per organizzare e facilitare la creazione collaborativadi documenti e di altri contenuti. Tecnicamente un CMS e un’applicazione lato server, divisain due parti: il back end, ovvero la sezione di amministrazione, che si occupa di organizzare esupervisionare la produzione del contenuto, e il front end, cioe la sezione dell’applicazione chel’utente usa per realizzare fisicamente modifiche, aggiornamenti ed inserimenti.

Una delle applicazioni piu utili dei sistemi CMS e nella gestione dei portali, dove vengonoimpiegati come strumento di pubblicazione flessibile e multiutente. Ad esempio, gestione dicontenuti testuali (notizie, articoli ecc.), link, immagini, liste di discussione, forum, materialescaricabile. Puo essere modificata anche la struttura stessa delle pagine in numero ed organiz-zazione. A volte i CMS danno la possibilita di gestire anche piu versioni dello stesso sito (adesempio, HTML o WAP).

I CMS consentono di definire utenti, gruppi e diritti in modo da poter permettere unadistribuzione del lavoro tra piu persone. Per esempio, e possibile definire una classe di utentiabilitati esclusivamente all’inserimento delle notizie, mentre si puo riservare la scrittura diarticoli ad un altro gruppo, e limitare tutti gli altri alla sola consultazione. L’introduzione diun Web Content Management System in una scuola richiede la definizione di chiari processiinterni di approvazione dei contenuti. Il nuovo sito scolastico sara realizzato utilizzando ilCMS Joomla che permettera la partecipazione di Alunni ed Insegnanti alla costruzione di unsistema per la gestione delle informazioni, sara possibile pubblicare e rendere disponibile a tuttigli alunni, testi di approfondimento, vecchi compiti in classe, materiale didattico multimediale. . . La scelta di utilizzo di un CMS sara inoltre strategica per far conoscere la scuola sia alivello provinciale che extraprovinciale e potrebbe permettere l’instaurarsi di proficui scambiinformativi con altre realta 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 piu argomenti correlati tra loro, strutturato in modo tale da consentire la gestionedei dati stessi (l’inserimento, la ricerca, la cancellazione ed il loro aggiornamento) da parte diapplicazioni software. Informalmente e impropriamente, la parola database viene spesso usatacome abbreviazione dell’espressione Database Management System (DBMS), che si riferisce auna vasta categoria di sistemi software che consentono la creazione e la manipolazione efficientedi database. Durante la creazione del nostro template non dovremo mai interegire direttamentecon il databse all’interno del quale sono memorizzate tutte le informazioni riguardo il nostrosito, basti sapere che Joomla puu utilizzare in maniera nativa due DBMS OpenSource moltofamosi:

• Mysql www.mysql.com

• PostgreSql www.postgresql.org

2 Un template per Joomla

Un template per Joomla e 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 undatabase, il sito completo offerto agli utenti dal nostro CMS sara composto dai dati inseritiall’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 generaledel 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 qualiinvece ai contenuti, se non avessimo operato questa distinzione tra dati e la loro rappresentazioneavremmo dovuto manualmente costruire ogni pagina del sito. Riassumendo i vantaggi offertidall’utilizzo di un CMS per la creazione di un sito complesso sono:

4

www.mysql.com

www.postgresql.org

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

• Un nuovo template, e quindi un aspetto completamente diverso, puo essere applicatoad un sito in pochissimo tempo, siamo cosı in grado di aggiornare un sito senza doverreinserire tutti i contenuti

3 Il processo di creazione di template

Le pagine prodotte da un CMS e visualizzate dal vostro browser non sono statiche, ovveronessuno le ha scritte e non vengono memorizzate all’interno del server web, ma vengono prodottedinamicamente combinando il template ed i dati presenti all’interno di un database tramite unlinguaggio di scripting conosciuto come PHP. Negli ultimi anni, si sono largamente diffusi inambito web programmi WYSIWYG (WhatYouSeeIsWhatYouGet) come Adobe Dreamweaver.Tramite tali programmi e possibile produrre pagine web senza conoscere nessun linguaggio dimarkup. Non e possibile usare sistemi di questo genere per produrre pagine web dinamichecome sono quelle generate da Joomla, questo significa che il designer deve scrivere il codice chegenera la pagina manualmente e poi vedere il risultato del suo codice caricando i file prodottisu un web server che li interpreta e ci permette di visualizzarli. Prima di iniziare a scrivere ilcodice Xhtml e Css e necessario aver chiaro in mente l’aspetto che il nostro sito dovra avere. Epe questo necessario produrre un bozzetto iniziale con un programma di grafica1 che ci possaguidare 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 e 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 e quasi d’obbligo utilizzare dei programmi che ci permettonodi automatizzare alcune operazioni come ad esempio l’upload sul server remoto dei file deltemplate. Per il corso utilizzeremo il programma open source Quanta Plus disponibile perora unicamente in ambiente Linux2, sono disponibile in rete altri pacchetti:

• Aptana studio

• Screem

• NetBeans 6

1Esistono svariati programmi OpenSource che ci permettono di delineare la grafica del nostro sito, vi consigliodi provare Gimp e InkScape

2a breve, a seguito del rilascio della versione 4 di Kde, sara possibile utilizzare Quanta Plus sia su Windowsche su OsX

5

• BlueFish

• AlleyCode

5 Il W3c e i siti senza tabelle

Usabilita, accessibilita ed ottimizzazione per i motori di ricerca sono tre qualita che ogni sitointernet ben progettato dovrebbe avere. Il metodo piu semplice per ottenere tali caratteristichee utilizzare gli standard del W3C. Ad esempio un sito che e struttarato semanticamente viaxhtml (ovvero l’xhtml gestisce unicamente il contenuto del sito e non la sua veste grafica) potraessere facilmente visualizzato da persone ipovedenti e facilmente analizzato dallo spider di unmotere di ricerca. Lo spider di Google, ad esempio, puo essere considerato come un cieco cheinteragisce con una pagina web. Un sito internet progettato rispettando i canoni del W3C e piufacilemente manutenibile e permettera alle persone di accedervi in maniera rapida ed intuitiva.Il consorzio W3C mette a dispozione dei servizi web gratuiti per la validazione del propriocodice validator.w3.org e inoltre disponibile un’utilissima barra di strumenti per MozillaFi-refox https://addons.mozilla.org/en-US/firefox/addon/60 che mette a disposizione deicomodi 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 convecchi browser. Perche? I browser si sono evoluti continuamente dall’introduzione del WWWad oggi, alcuni sono scomparsi (Netscape, Mosaic,. . . ) ed altri sono nati (opera,firefox,. . . ),un’altra ragione e che alcuni produttori di browser (leggi Microsoft), producono dei software cheinterpretano il codice (x)html/css in maniera leggermente diversa. Tutto questo ha obbligato idesigner di siti web a supportare browser “morti” invece di utilizzare le caratteristiche di quelliappena 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 e il W3C diretto dalcreatore del WWW Tim Berners-Lee. Delle pagine web che supportano gli standard devonoessere validabili dal W3C e devono seguire le regole che il loro DOCTYPE impone. E inol-tre molto importante produrre del codice semanticamente corretto, ovvero scrivere del codicehtml che rappresenta unicamente il contenuto e non il contente di una pagina web, quindiorganizzare in maniera strutturata i vari tag h1, h2 etc. utilizzare le tabelle unicamente pervisualizzare 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 e 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 alcodice (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 dellostandard CSS 2 http://www.diodati.org/w3c/css2/cover.html

6

validator.w3.org

https://addons.mozilla.org/en-US/firefox/addon/60

www.w3.org/Style/CSS/

http://www.diodati.org/w3c/css2/cover.html

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 unasottodirectory della directory /templates/ di una installazione Joomla. Se abbiamo installatodue template, la nostra directory /templates/ dovra 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 infattichiamati dagli script di Joomla per fondere il template con i dati. templateDetails.xml e unfile XML 3 che dice a Joomla che file caricare durante la selezione di un template, riporta inoltreil nome dell’autore il copyright e tutti i file contenuti all’interno del template, questo file XMLviene inoltre utilizzato durante l’installazione del template tramite il backend amministrativo.index.php e il file piu importante del template. Serve a posizionare gli elementi informatividel sito ed e una combianazione di PHP e X(HTML). In quasi tutti i template sono utilizzatialtri file, si e 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 renderizzato4 dal browser.Questa imagine hadi solito la dimensione di 140X90 pixel5. Questa immagine ha lo scopo di mostrare una previewdel 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 eopzionale ma consigliato per una sua rapida individuazione. Il nome non e arbitrario in quantodovra essere inserito all’interno del file index.php. Vedremo piu avanti che sara estremamenteutile dividere la parte CSS del nostro template su piu file. Il file:

/element/images/logo.png

rappresenta una della immagini che costituiscono il template, non e necessario inserirle nel-la directory images ma e caldamente consigliato per motivi organizzativi. Il template potracontenere un numero arbitrariamento alto di immagini.

3Per maggiori informazioni su XML potete leggere le pagine all’indirizzo http://www1.isti.cnr.it/

~Martinelli/XML/doc/Nota_XML.html4Dall’inglese to render : rendere inizialmente utilizzato in computer grafica per descrivere il processo di

calcolo dell’aspetto di un oggetto 3D5Il pixel e una delle unita di visualizzazione dello schermo

7

http://www1.isti.cnr.it/~Martinelli/XML/doc/Nota_XML.html

http://www1.isti.cnr.it/~Martinelli/XML/doc/Nota_XML.html

6.1 Il file templateDetails.xml

Il file templateDetails.xml include tutti i file che sono parte del template, come gia dettoinclude anche delle informazioni sull’autore e il copyright del file. Un esempio di come potrebbeapparire 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> [email protected]</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>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 diJoomla, l’opzione type="Template" dice all’installer che stiamo installando un template per laversione 1.5 di Joomla.

<name>corso_template</name>

definisce il nome del template che stiamo creando ed anche il nome della directory che dovracontenere tutti i file del template. Non dovra contenere caratteri non gestibili dal filesystem6espazi.

<creationDate>Febbraio 2008</creationDate>

La data in cui il template e stato creato, il formato e 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>[email protected]</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>

6Il sistema usato dal computer per l’archiviazione dei dati su un supporto di massa vedi http://it.wikipedia.org/wiki/File_system

7Per maggiori informazini sulla licenza GPL: http://www.gnu.org/licenses/gpl-faq.it.html8Universal Resource Locator

9

http://it.wikipedia.org/wiki/File_system

http://it.wikipedia.org/wiki/File_system

http://www.gnu.org/licenses/gpl-faq.it.html

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 e contenuto tra i tag<filename> </filename>. Nel nostro esempio abbiamo incluso anche dei file javascript9. An-che tutte le immagini utilizzate dal template devono essere incluse nella sezione files. Il pathdi ogni file e relativo alla directory in cui sono contenuti i file del profilo, ad esempio se il vostrotemplate si trova nella directory miotemplate e tutte le immagini sono memorizate all’internod una directory images sottodirectory di miotemplate il path corretto da utilizzare sara:

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

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

<positions>

<position>left</position>

<position>right</position>

<position>top</position>

<position>breadcrumb</position>





<position>debug</position>

<position>syndicate</position>

</positions>

Se non elenchiamo in tale posizione il nome di tutte le possibili disposizioni dei contenuti, questenon 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? E una combinazione di (X)HTML e PHP che determina illayout e la presentazione delle pagine del sito. Una parte critica per costruire dei templatevalidi (secondo il w3c) e il DOCTYPE all’inizio del file index.php. Tali linee di codice devonoessere 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, e quindi difondamentale importanza scrivere dell’(x)html e css che seguano il DOCTYPE dichiarato! Cisono ovviamente altri tipi di DOCTYPE oltre a quello qui dichiarato, leggendo la documentazioneincontrerete sicuramente (e molto spesso) le parole “strict” e “transitional”. Per comprendere il

9Per maggiori informazioni http://javascript.html.it/

10

http://javascript.html.it/

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

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

DTD/xhtml1-strict.dtd

questo pero e un link relativo. All’interno di un DOCTYPE e necessario utilizzare linkassoluti

• Internet Explorer entra in quirks mode se e presente una dichiarazione xml prima delDOCTYPE:

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

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

Scrivere una pagina web conforme agli standard (e quindi potersi fregiare del bollino W3C)non e intrinsecamente complesso o difficile da capire, significa solamente produrre un codiceconforme 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 quantita possibile di codice e al contempo di avere unapagina index funzionante:

11

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





>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?





>direction; ?>" >

Abbiamo gia descritto precedentemente il significato del preambolo DOCTYPE, a dispetto diquanto visto prima nel codice su riportato e presente anche l’istruzione:

<?php echo $this->language; ?>

costituita da un pezzetto di codice PHP che recupera dal database, che contiene le impostazionidi configurazione del nostro sito, la lingua principale dei dati che verranno diffusi dal sito.

Il tag:


e un tag proprio di Joomla per inserire i dati dell’header della pagina HTML recuperandoli daldatabase 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&view=frontpag

e&Itemid=1&format=rss" rel="alternate" type="application/rss+xml"

title="RSS 2.0" />

<link

href="http://localhost/Joomla15/feed.php?option=com_content&view=frontpag

e&Itemid=1&format=atom" rel="alternate" type="application/atom+xml"

title="Atom 1.0" />

12

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



Questa linea di codice collega al documento (x)html prodotto dal codice PHP al foglio di stilepresente all’interno del template. Il codice PHP <?php echo $this->template ?> restituisceil nome del template attuale, scriverlo in vece del nome effettivo del template utilizzato, rendeil codice piu generico e ci permette di riutilizzarlo se dovessimo in futoro creare un nuovotemplate.

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 e giungere quanto piu vicini possibile a una descrizione semantica del documento,dal punto di vista del Web significa che la pagina puo essere vista da chiunque: un browser,un spider o un lettore di schermo. Il layout semantico e la pietra di volta dell’accessibilita. Ilnostro template appare ora come in figura [3]

Notiamo che il lavoro svolto fino ad ora rappresenta soltanto un’approssimazione a un layoutcompletamente semantico. Se ad esempio cominciassimo ad inserire moduli non accuratamentescelti in maniera casuale all’interno dei blocchi definiti dal template otterremmo soltanto uninsieme caotico di informazioni. Dobbiamo ricordare che in un CMS (content management sy-stem) la qualita di un template e pari a quella della distribuzione dei suoi contenuti Analiziamoapprofonditamente il modello fino ad ora scritto. Noterete come i comandi:

13

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






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

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

L’email dell’amministratore e <?php echo $mainframe->getCfg(’mailfrom’);?>

Questo template e memorizzato nella directory <?php echo $this->template?>

L’URL del sito e <?php echo $mainframe->getCfg(’live_site’);?>

Il comando jdoc inserisce vari blocchi di codice XHTML:


questo pezzetto di codice stampa l’output di un componente, di quale compenente si traterraverra deciso dei collegamenti del menu. Il comando:


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 parametrostyle 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 modoin cui viene controllata la larghezza della pagina. La larghezza della pagina e un punto diparticolare interesse a causa del gran numero di risoluzioni diverse a cui le persone osservanoil WWW. La maggior parte degli utilizzatori internet usa una risoluzione di 1024x768, unlayout fluido permette ai contenuti del vostro sito di adattarsi automaticamente alla larghezzadella pagina. Si tende spesso ad utilizzare delle tabelle per impaginare gli elementi del sito,tabelle che sono molto comode dato che e sufficiente impostare la larghezza delle colonne comepercentuale della dimensione della pagina. Questo approccio ha pero notevoli aspetti negativi:

• Non viene rispettato il vincolo di semanticita posto sui file xhtml

• Le pagine occupano piu spazio

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

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

• Con le tabelle il contenuto non puo 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 cio che e presente nell’header e nella colonnadi sinistra (per un layout a 3 colonne) prima di raggiungere la colonna centrale dove sitrova il contenuto del sito. Un Layout CSS rende invece possibile un “Source ordering”del contenuto, ovvero e possibile modificare a livello di codice PHP l’impostazione dellapagina in funzione del mezzo che il fruitore utilizza per visualizzarla.

Costruiremo il layout del nostro template utilizzando i fogli di style, questi ci permetterannodi posizionare in molti modi diversi i contenuti presenti all’interno del CMS Joomla 11. Senon avete mai visto primo i fogli di stile CSS o volete rinverdire le vostre conoscenze poteteconsultare 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/

10Il backend amministrativo e l’insieme degli strumenti utilizzati per gestire i contenuti del sito11Potete trovare delle informazioni utili sul posizionamento degli elementi all’indirizzo www.brainjar.com/

css/positioning/

15

http://particletree.com/features/an-overview-of-current-css-layout-techniques/

http://particletree.com/features/an-overview-of-current-css-layout-techniques/

www.htmldog.com/guides/cssbeginner/

www.yourhtmlsource.com/stylesheets/

www.brainjar.com/css/positioning/

www.brainjar.com/css/positioning/

Utilizzeremo degli elementi “float” per posizionare i contenuti. Dopo aver scritto le primerighe del codice CSS il nostro sito apparrira come in figura [4]. Chiaramente questa e solouna versione preliminare, cerchiamo di capire come e stata ottenuta. Tutto quello che vienevisualizzato e contenuto all’interno di un elemento chiamato #wrap la cui dimensione e 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 proprioelemento flottante posizionato sulla sinistra e a tutte e stata assegnata una percentuale dellalarghezza totale della pagina. Lo stile clear:both del pie di pagina (footer) dice al browserdi terminare il “floating” degli elementi ed estendere il footer su tutte e tre le colonne. Permigliorare il layout e rendere i contenuti piu leggibili dobbiamo spaziare le colonne12. Perrealizzare la spaziatura tra le colonne utilizzaremo ulteriori elementi <div> all’interno dellecolonne stesse. Creeremo quindi una struttura di questo tipo:

12A causa dei problemi di rendering del codice CSS da parte di alcuni broser (vedi IE) non potremo utilizzarebordi o padding per il nostro codice CSS

16

<body>

<div id="wrap">

<div id="header">

<div class="inside">



</div>

</div>

<div id="sidebar">



</div>

</div>

<div id="content">



</div>

</div>

<div id="sidebar-2">



</div>

</div>

<div id="footer">


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>



</body>

Aggiungeremo quindi al nostro codice CSS la riga:

.inside {padding:10px;}

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

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 e:

13Tratteremo 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 ein grado di centrare la pagina utilizzando unicamente CSS. Come si vede nella parte di codiceriportata sopra e necessario utilizzare degli ”hack“ per poter effettuare una centratura in IE.Potrebbe sembrare strano aver definito la dimensione delle nostre colonne come percentualedell’elemento contenitore ed aver utilizzato poi un div la cui dimensione e fissa. Cerchiamo dicapire i motivi della scelta:

• Utilizzare delle colonne fluide all’interno di una elemento dimensionato assolutamenterende il template molto flessibile. Se, ad esempio, aggiungiamo dei pulsanti per variarela dimensione della pagina e sufficiente cambiare un solo valore.

• Molti utilizzatori del web hanno a disposizione monitor dalla dimensioni generose, studidi usabilita ci dicono che linee di testo di dimensione superiore ai 900px diventano difficilida leggere. Limitare la fluidita del sito con un div contenitore a dimensioni fisse rendequindi il nostro template piu accessibile.

Abbiamo aggiunto alle colonne un nuovo stile: overflow:hidden. Questo permettera 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 aglielementi 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 ledimensioni sono poi espresse in em. L’impostazione line-height:1.3 aiuta la leggibilita delsito.Tutto questo permette al lettore di impostare la dimensione dei carattari a suo piacimentodurante 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 e dovuto alfatto che la loro dimensione e determinata unicamente dal contenuto, dove in figura [5] si vededello spazio bianco non esiste alcun tipo contenuto. Se lo sfondo del nostro template e biancoper 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 epossibile cambiare utilizzando i fogli di stile CSS. In tabella [1] possiamo vedere le classi e gliid piu usati.

article separator adminform article separatorauthor bannerfooter bannergroupbannerheader banneritem blogblog more blogsection breadcrumbsbutton buttonheading clrcomponentheading article separator adminformarticle separator author bannerfooterbannergroup bannerheader banneritemblog blog more blogsectionbreadcrumbs button buttonheadingclr componentheading content emailcontent rating content vote contentdescriptioncontentheading contentpagetitlw contentpanecontentpaneopen contenttoc createdatecreated-date date inputinputbox intro latestnewsloclink mainlevel messagemetadata modifydate modulemoduletable mosimage mosimage captionmostread newsfeed outlinepagenav pagenav next pagenav prevpagenavbar pagenavcounter pathwaypollstableborder read searchsearchintro sections sectiontable footersectiontableentry sectiontablefooter sectiontableheadersmall smalldark sublevaeltitle wrapper

Tabella 1: Elementi CSS definiti da Joomla

Dato il gran numero di elementi predefiniti da Joomla, nella realizzazione del nostro templatedobbiamo fare attenzione alle regole di specificita 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 sara il rosso dato che le regole CSS cheimpostano tale colore sono piu specifiche. Durante lo sviluppo di un template Joomla avretespesso bisogno di sovrascrivere una regola piu generale con una piu specifica:

.moduletable

table.moduletable

.moduletable e il nome di un div che contiene una tabella mentre table.moduletable ap-plichera il suo stile unicamente ad una tabella che riporta nella sua dichiarazione il comandoclass="moduletable", la dichiarazione di classe applichera il suo stile a qualsiasi alementoappertenga alla classe.

a.contentpagetitle:link

.contentpagetitle a:link

Il comando a.contentpagetitle:link applichera lo stile a tutti i tag a di classe .contentpagetitleche sono dei link. Il camando .contentpagetitle a:link applichera lo stile ad ogni tag a

all’interno di elementi di classe .contentpagetitle che e di tipo link. La specificita e unaspetto relativamente complesso di utilizzo dei fogli di stile di cui ci occuperemo in una notaseparata. Ora il nostro template sta utilzzando ancora molte tabelle, come detto prima, questorallenta il caricamento della pagina e rende la sua manutenzione piu ostica. Vedremo piu avanticome sia possibile ovviare al problema.

9 Moduli

Quando un modulo viene chiamato all’interno del file index.php abbiamo a disposizione diverseopzione per regolare il suo aspetto. La sintassi e:

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

Lo stile e opzionale ed e definito nel file /modules/templates/modules.php. Attualmente nelfile modules.php sono contenuti i Layout: ”table“, ”horz“, ”xhtml“,”rounded“.”raw“. Vediamoora nel dettaglio le loro caratteristiche. Impostando style="table" i moduli sono visualizzatiin 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 moduloe 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">


<tr>

<th valign="top"> modChrome_horz </th>

</tr>

<tr>

<td> modChrome_horz </td>

</tr>

</table>

</td>

</tr>

<tr>

<td valign="top">


<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 seguitoun 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 permetteangoli arrotondati e deformabili. Se viene utilizzato questo stile il nome dei <div> cambia damoduletable 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 alcunelemento 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 piu snello e chiarorispetto alla altre. E buona norma quindi, non utilizzare (a meno di estrema necessita), gli stilitable e horz. Nello sviluppo del nostro template useremo sempre lo stile xhtml ottenendo delcodice 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">


<jdoc:include type="modules" name="left" style="xhtml" />

</div>

</div>

<div id="content">



</div>

</div>



<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>



</body>

Notate come non sia possibile inserire questi stili nell’elemento <jdoc:include type="component" />

dato che none e un modulo. Modificando il sistema di visualizzazione dei moduli siamo riuscitia ridurre il numero di tabelle. Assegnamo dei semplici stili alle tabelle per produrre il risultatoin figura [6] Inseriremo il titolo del nostro sito all’interno di un tag <H1>, e semanticamente piucorretto ed inoltre permette una migliore indicizzazione nei motori di ricerca. Aggiungeremoanche 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 proprieta del modulo. Per ottenere un comportamente uniforme nella presentazione talispecificatori sono stati cancellati.

10 I Menu

Per la costruzione dei menu utilizzeremo le liste CSS invece di strutture tabulari, tale approcciopermette di alleggerire di molto il layout del sito ed inoltre ci consente di applicare una vastaserie di effeti grafici direttamente tramite i fogli di stile. L’utilizzo delle liste e, inoltre, auspi-cabile per facilitare l’accesso ai browser testuali, ai lettori di schermo e ai motori di ricerca. Imenu a lista sono stati introdotti all’interno dell’albero di sviuluppo ufficiale di Joomla dallaversione 1.5 per facilitare la costruzione di siti in cui il contenuto e completamente scollegatodalla 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 inJoomla dobbiamo effettuare alcune modifiche. Il codice su cui sono basati tali esempi e:

<div id="navcontainer">

<ul id="navlist">

<li id="active"><a href=" #" id="current">Item one</a></li>

<li><a href="#">Item two</a></li>

14http://css.maxdesign.com.au/listamatic/index.htm

25

http://css.maxdesign.com.au/listamatic/index.htm

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 ide navlist. Per dupplicare questa struttura in Joomla dobbiamo ottenere l’equivalente delnavcontainer dell’esempio precedente in Joomla, per far cio e sufficiente utilizzare i suffissiper i moduli; se ricordate, l’output dello stile xhtml per un modulo era:

<div class="moduletable">



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

<div class="moduletable_suffix">



Quindi quando ricopiamo del codice da Listamatic dobbiamo preoccuparci di sostituire anavcontainer moduletable_suffix. Questo utilizzo del suffisso per la classe dei moduli emolto utile, ci permette infatti di realizzare box colorati diversamente unicamente cambiandoil 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 menu che vogliamo abbial’aspetto fornito dal codice CSS (vedi figura [7]sopra riportato e sufficiente assegnare il suffissomenu.

11 Come nascondere le colonne

La struttura attuale del nostro Layout fa si che esso abbia sempre tre colonne indipendentementedalla presenza o meno di contenuti in esse. Dal punto di vista del template di un CMS cionon e molto utile dato che non ci permette di cambiare la dispozione dei contenuti senzadover 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 sviluppodella versione 1.5 di Joomla il template engine e stato modificato per rendere piu semplice lacostruzione di layout dinamici. Le modifiche al template engine di Joomla 1.5 possono esseredivise in due categorie: cambiamenti rispetto al codice della versione di Joomla 1.0x e nuovecaratteristiche introdotte con Joomla 1.5 come i parametri per i template. Un breve elencodelle migliorie:

• la funzione mosCountModules e stata sostituita dalla funzione $this->countModules ede stato inoltre aggiunto il supporto per le condizioni. Questo permette agli sviluppatoridi contare facilmente il numero totale di moduli in piu posizioni in una singola linea dicodice: $this->countModules(’user1+user2’); restituisce il numero totale di modulinelle posizioni user1 e user2

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

28

Figura 7: Stile applicato al menu

• Nella vecchia versione di Joomla era necessario caricare manualemente l’editor durantel’editing della pagina, questo non e piu necessario e viene automaticamente deciso duranteil caricamento dell’header della pagina.

• E possibile passare dei parametri ai template, questo permette agli amministratori dicontrollare la struttura di una pagina senza modificarne il codice. Un creatore di templatepuo impostare alcuni parametri aggiuntivi nei file xml del template per cambiare adesempio gli stili cromatici o la massima dimensione orizzontale della pagina.

• E possibile sovrascrivere a livello di template l’output delle componenti core di Joomla,sostituendo ad esempio le tabelle con dei div

• E stato introdotto il supporto a file css multipli, ora non e piu necessario inserire tutto ilcodice css in un unico file. E stato inoltre introdotto il supporto allo stile dell’editor htmldi joomla tramite il file di stile editor.css

L’uso generale della funzione mosCountModules e:

29

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

do something

<?php else : ?>

do something else

<?php endif; ?>

Esistono quattro possibili condizioni:

countModules(’left’) Restituira 1 se esiste un elemento posizionato a sinistra

countModules(’left and right’) Restituira 1 se esiste almeno un modulo posizionato adestra ed almeno un modulo posizionato a sinistra.

countModules(’left or right’) Restituira 1 se esiste almeno un modulo in posizione destrao sinistra

countModules(’left + right’) Contera il numero di moduli in posizione destra e sinistra

Utilizzeremo la funzione su illustrata per essere in grado di sapere se in una determinata ereasono presenti dei moduli. Cosı, se ad esempio se nella colonna di sinistra non dovesse esserepresente alcun modulo potremo collassarla per far spazio al resto dei contenuti del nostro sito.Per rendere questa operazione quanto piu semplice possibile inseriremo un certo numero diespressione condizionali nell’header della pagina.

<?php

if($this->countModules(’left and right’) == 0) $contentwidth = "100";

if($this->countModules(’left or right’) == 1) $contentwidth = "80";


?>

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 occupareil 100% dello spazio disponibile

• se ci sono dei moduli a destra o (aut) a sinitra espandi l’area dei contenuti fino ad occuparel’80% dello spazio disponibile

• se ci sono dei moduli a destra e a sinistra espandi l’area dei contenuti fino ad occupare il60% 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;}



Le espressioni condizionali in PHP devono comparire all’interno dell’header della pagina DOPOla linea che collega index.php a template.css.

30

11.1 Nascondiamo i moduli

Quando creiamo delle colonne collassabili e sembra buona pratica preparare i contenitori deimoduli in modo che non venga prodotto alcun codice se non e presente del contenuto. Se nonfacessimo questo, potremmo andare a creare una pagine con molti tag <div> vuoti, questopuo portare a problemi di visualizzazione in alcuni browser. Per nasconder un <div> vuotoutilizzeremo il seguente codice:

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

<div id="sidebar">



</div>

</div>

<?php endif; ?>

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





>direction; ?>" >

<head>




<?php


if($this->countModules(’left or right’) == 1) $contentwidth = "80";


?>

</head>

<body>

<div id="wrap">

<div id="header">


<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">



31

</div>

</div>

<?php endif; ?>

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


<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’)) : ?>



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

</div>

</div>

<?php endif; ?>

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

<div id="footer">


<jdoc:include type="modules" name="footer" style="xhtml" />

</div>

</div>

<?php endif; ?>

</div>



</body>

</html>

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

32

A CSS shorthands

33

guida template

Documents

Transcript of guida template