GUIDA DI BASE A JOOMLA!

1. Cos'è Joomla! e principi di funzionamento;

2. Il pannello di controllo;
3. L'editor di testo JCE;
4. Aggiungere un'immagine ad un articolo;
5. Le varie opzioni selezionabili per ogni articolo;
6. Come inserire un banner in home page;
7. Utilizzo di Joomlastats (componente per le statistiche del sito);
8. Risorse per l'utilizzo e l'approfondimento di Joomla!.
 1. Cos'è Joomla! e principi di funzionamento;

Joomla! è un CMS (content management system) basato sull'implementazione del linguaggio

di programmazione PHP col sistema di database MySQL e col linguaggio di presentazione CSS.
Grazie a Joomla! è possibile realizzare potenti siti web dinamici dei quali l'utente finale può
gestire in completa autonomia i contenuti.

I siti creati con Joomla! sono solitamente costruiti con uno schema abbastanza rigido:
1. una testata che indica il nome e la tipologia del sito;
2. un menu principale che permette l'accesso ai vari contenuti (solitamente posto nella
colonna sinistra del sito)
3. un corpo centrale che include i contenuti veri e propri;
4. un “piede” che indica info di contatto e credits;

Il sito si basa su una struttura di base (il “core”) sulla quale vengono caricati, a seconda delle
esigenze, diversi plug-in che possono servire a compiti particolari (ad esempio, conteggiare e
mostrare il numero di visitatori, creare un negozio virtuale, mostrare una galleria di foto). Tali
plug-in prendono il nome di moduli e componenti, e normalmente vengono impostati subito
dopo l'installazione del sito.

La gestione dei contenuti avviene attraverso un pannello di amministrazione (detto backend) a

cui si accede tramite una maschera (figura 1) in cui vanno inseriti username e password.
La maschera si trova all'indirizzo: http://www.<nomesito.dominio>/administrator/

fig.1
 2. Il Pannello di Controllo

Non appena si accede al sito, ci si trova davanti alla schermata del Pannello di Controllo (fig.2)

l m

n o p q r
a b c d e

f g h i

j k

fig.2

Dal Pannello di Controllo si ha accesso a tutte le funzioni del sito; di seguito una veloce
panoramica delle parti che lo compongono.

Pulsanti:

a) Aggiungi nuovo contenuto: dà accesso all'editor di testo, attraverso il quale è possibile

inserire nuovi articoli (o contenuti);

b) Gestione contenuti: mostra una schermata (fig.3) dalla quale è possibile accedere
simultaneamente a tutti i contenuti del sito e tramite la quale è possibile visualizzare le
caratteristiche di ognuno.

fig.3

c) Gestione contenuti statici: permette di configurare gli articoli “statici”,

cioè caricati come pagine web a sé stanti e non creati attraverso l'editor di testo;
d) Gestione prima pagina: permette di configurare il modo in cui viene mostrata la prima
pagina (quella cui si accede attraverso il pulsante HOME) e quali articoli vi vanno
inseriti.

e) Gestione sezioni e Gestione categorie: Joomla! organizza gli articoli in modo gerarchico,
secondo la scala Sezione > Categoria > Articolo (o Contenuto); pertanto quando si crea
un nuovo articolo è necessario anche specificare la categoria e la sezione in cui
inserirlo. Tramite questi pulsanti è possibile configurare sezioni e categorie; va ricordato
che non è possibile eliminare una sezione o una categoria quando queste non sono
vuote.

f) Gestione media: attraverso questo pulsante si accede al pannello di gestione delle

immagini di tutto il sito, anche quelle inserite direttamente dagli articoli. Normalmente
le immagini contenute negli articoli sono inserite nella cartella images/stories. Tuttavia,
è consigliabile creare una sottocartella personalizzata che contenga le immagini che
inseriamo (quindi, ad esempio, images/stories/<nomesito> ).

g) Gestione cestino: normalmente gli articoli cancellati non vengono eliminati in modo
definitivo ma spostati nel cestino; attraverso questo pulsante si accede al pannello che
consente di eliminarli definitivamente o di ripristinarli nella loro posizione iniziale.

h) Gestione menu: attraverso questo pulsante si accede al pannello di gestione dei vari
menu del sito. Va tenuto presente che il menu principale è indicato con la parloa
mainmenu e alla sua gestione si accede dall'icona voce di menu. L'inserimento del
richiamo ad un articolo nel menu principale si inserisce più agevolmente in fase di
redazione dell'articolo stesso, come vedremo più sotto.

i) Gestione lingue: Questa voce consente di modificare le lingue in cui può essere
visualizzata la parte strutturale del sito (backend, moduli, componenti, aiuto). Questo
pulsante compare solo se si accede al backend come Super Administrator.

j) Gestione Utente: Tramite questo pulsante si possono aggiungere utenti al sito e

decidere il grado di interattività che questi possono avere con lo stesso. Gli utenti si
possono registrare autonomamente, attraverso un modulo che può essere pubblicato
nel sito, oppure possono essere inseriti manualmente da un amministratore. Questa
ultima ipotesi può risultare utile nel caso in cui si intenda gestire i contatti, o una
mailing list, direttamente dal sito senza utilizzare software esterni. I livelli di
interattività sono gerarchici (ciò significa che più basso è il livello, meno sono i privilegi
connessi). I livelli di amministrazione comprendono Super Administrator >
Administrator > Manager. I livelli di utenza per il frontend sono Publisher > Editor >
Author > Registered. Il Super Administrator ha controllo completo su tutto il sito,
compresi articoli pubblicati da altri, configurazione server, permessi e database.
L'utente registrato (Registered) può solo modificare i propri dati personali e proporre
dei collegamenti web da aggiungere al sito. Per la normale manutenzione del sito viene
di solito assegnato il livello Administrator.

k) Configurazione globale: tramite questo pannello si ha accesso a tutte le configurazioni

di base del sito. Questo pulsante compare solo se si accede al backend come Super
Administrator.

l) Nel menu in alto sono riportati, in modo più esteso e approfondito, i pulsanti descritti
soppra più le pagine per la gestione di moduli componenti e mambot. Normalmente non
sarà necessario occuparsi di tale menu.

m) Le due icone indicano il numero di messaggi ricevuti nella propria inbox e il numero di
utenti connessi al sito nel momento in cui lo si consulta. il link “Esci <nomeutente>”
permette la disconnessione dal pannello di controllo.
n) Connessi: Mostra quali utenti sono connessi al sito;

o) Componenti: Mostra i componenti installati e ne permette la configurazione;

p) I più letti: Mostra gli articoli più letti e il numero di visite ricevute;

q) Articoli Recenti: Mostra gli articoli di recente inserimento o modifica;

r) Stato menu: Mostra quali sono i menu del sito e il numero di voci in essi contenuti;
 3. L'editor di testo JCE

Jce (Joomla Content Editor) è un mambot, aggiunta al nucleo di Joomla, che consente di
creare e modificare gli articoli e i contenuti con una interfaccia molto simile a quella dei comuni
editor wysiwyg come MS Word o OpenOffice. ATTENZIONE: JCE funziona esclusivamente sotto
Internet Explorer 6.x e Mozilla Firefox 1.5.x.

La schermata principale di JCE:

a b
c d

fig.4

a) Qui va inserito il titolo del contenuto;

b) Selezionare la sezione in cui va inserito il contenuto;

c) Selezionare la categoria in cui va inserito il contenuto;

d) Comandi dell'editor di testo (riferito fig.4):

● Prima riga: undo, redo, aiuto, nuovo articolo (cancella tutto), grassetto, corsivo,
sottolineato, lista non numerata, lista numerata, diminuisci rientro, aumenta rientro,
incolla da word, incolla testo, testo barrato, visualizza codice html, cerca, sostituisci,
cancella, taglia, copia, incolla.
● Seconda riga: separatore (linea orizzontale), pedice, apice, allin. destra, allin.
centrale, allin. sinistra, giustificato, inserisci ancora (collegamento), inserisci link,
inserisci tabella, proprietà riga, proprietà colonna, inserisci riga sopra, inserisci riga
sotto, estrai riga, inserisci colonna prima, inserisci colonna dopo, estrai colonna, separa
celle, unisci celle, cancella link.
● Terza riga: dimensione carattere, seleziona colore, colore di sfondo, caratteri speciali,
mostra aiuto visivo, segni di tabulazione, inserisci immagine, inserisci link avanzato,
anteprima, stampa, schermo intero.

La schermata è divisa in due parti: “testo introduttivo” e “testo principale”. Normalmente il

contenuto può essere inserito completamente nel box “testo introduttivo”. Questa separazione
serve nel caso si voglia attuare, come accade nei giornali cartacei, una introduzione ad un
articolo in prima pagina e inserire il proseguimento all'interno del sito. E' più che sufficiente
inserire un riferimento agli articoli direttamente nel menu principale.

Durante la stesura di un articolo , è bene dare “applica” (tasto azzurro in alto a destra della
fig.4) per salvare i cambiamenti in itinere; questo perchè la sessione di login (il tempo in cui
resta attiva la vostra autenticazione effettuata al momento di accesso al sito) dura 900
secondi, cioè 15 minuti.

Se si lascia aperto un articolo per più di 15 minuti senza salvarlo, quando andremo a salvarlo il
sistema ci rimanderà alla pagina di login e tutto ciò che abbiamo inserito sarà andato perso.

Per salvare definitivamente un contenuto, fare click sul pulsante col dischetto “salva” (in alto a
destra della fig.4)
 4. Aggiungere un'immagine ad un articolo

Si può inserire un'immagine in un articolo attraverso il pannello di gestione incluso in JCE:

basta fare click sull'icona “inserisci immagine” (raffigura una montagna e un sole – fig.5 lettera
a) e si apre il seguente pannello:

c
d e f
g h i
j k
l

a
m n o p q r

fig.5

Nella fascia in alto (lett. b) è possibile configurare opzioni avanzate delle immagini,
normalmente sarà più che sufficiente utilizzare il primo pannello “Article Image”.

La finestra di caricamento (“Upload”) viene visualizzata facendo click sul tasto “upload” (lettera
p) e serve per caricare i file d'immagine dal vostro computer al sito. Prima si seleziona
l'immagine da caricare (visualizzata, col percorso, alla lettera c), poi si può decidere se
ridimensionarla, come (lettere d – e – h) e con che qualità di compressione (lettere f – i), se
creare la miniatura corrispondente (lettera g), se sovrascrivere il file nel caso questo già esista
nella cartella di destinazione (lettera j) o piuttosto se creare una copia del file esistente (lettera
k).

Dopo aver scelto fra queste opzioni, basta fare clic su “Upload” (lettera l) e l'immagine verrà
caricata nella directory scelta alla lettera m.

I controlli a destra permettono di salire di livello nelle directory (n), creare una nuova directory
all'interno di quella selezionata (o), aprire la finestra di caricamento (p), scegliere se mostrare
i file come lista o come miniature (q).

Nella finestra contrassegnata con la lettera s vengono mostrati tutti i file immagine contenuti
nella directory attiva. Per inserire uno di questi nell'articolo basta selezionarlo e fare click su
“Insert” in basso a destra.

Troveremo l'immagine dove abbiamo lasciato posizionato il cursore. Se in futuro vogliamo

modificarla, basterà selezionarla col mouse e fare click sull'icona “Image manager”, che ci farà
riaccedere al pannello della fig.5.
 5. Le varie opzioni selezionabili per ogni articolo

A destra dell'editor JCE (fig. 4) vi sono dei pannelli di controllo che permettono un controllo
preciso su tutte le funzionalità di ogni singolo articolo. Andiamo ad esplorarle.

fig.5
Pannello Pubblicazione
Le opzioni sono intuitivamente comprensibili, danno la possibilità di render visibile ai visitatori
del sito l'articolo per un periodo determinato, e permettono anche di scegliere a quali visitatori
renderlo visibile (“livello accesso”). E' possibile modificare l'autore dell'articolo, scegliere se
pubblicarlo nella prima pagina e anche vedere quante volte è stato letto.

Pannello Immagini

Permette di scegliere una fra le immagini del sito e far sì che venga affiancata al titolo
dell'articolo, come descrizione. Si sconsiglia di usare questa procedura, in quanto spesso crea
dei problemi di visualizzazione sul sito.
Parametri

fig.6
In questo pannello sono presenti alcune funzionalità importanti nell'interazione
dell'utente con l'articolo e con il sito, in quanto si può decidere se mostrare o meno
determinate informazioni sull'articolo.
Va innanzitutto ricordato che la dicitura “Uso Globali” rimanda al settaggio che per la voce in
questione è stato fatto dal Super Administrator nella Configurazione Globale (fig. 1) del sito.
Le voci da considerare sono sopratutto “Icona PDF”, “Icona Stampa”, “Icona Email”, che
permettono al visitatore , attraverso la pressione di un pulsante nell'articolo , di creare un file
PDF, stampare o inviare via e.mail l'articolo in questione.
Le altre opzioni sono facilmente comprensibili; posizionando il mouse sulle ozioni sottolineate,
comparirà un messaggio di aiuto che descriverà la funzionalità di quel parametro.
Non scrivere nulla nella casella “Suffisso Classe CSS pagina”.

Meta Info

Attraverso questo pannello si possono scegliere una descrizione e delle parole chiave che
verranno utilizzate dai motori di ricerca (Google, Yahoo, Virgilio...) per descrivere e restituire
un collegamento all'articolo al momento della ricerca. In pratica, se si inserisce “autoricambi”
nelle parole chiave, è più probabile che ad un utente di Google che fa una ricerca utilizzando il
termine “autoricambi” venga segnalato il sito. Le parole chiave possono essere più di una e
devono essere separate da virgola.
Link al menu

Questo pannello permette di inserire un collegamento all'articolo cui è riferito in uno qualsiasi
dei menu del sito. Normalmente si vorrà inserirlo nel menu principale, che compare in home
page e a sinistra di tutte le pagine del sito.
Per fare questo basterà selezionare mainmenu nel box “Seleziona un menu” (fig. 7) quindi
scegliere il nome che si vuole dare al pulsante di menu nella casella sottostante.
Facendo click su “Collegamento al menu” si termina la procedura e si inserisce il nuovo
pulsante nel menu principale.

fig.7
 6. Come inserire un banner in home page

Innanzitutto è necessario creare un banner da inserire! Solitamente si userà una immagine gif
animata che propone immagini a rotazione.
Attenzione, però! Le dimensioni dell'immagine non sono uguali per ogni sito, ma variano a
seconda delle dimensioni del modulo banner che andrà ad ospitarla nella pagina. Prima di
creare un banner, dunque, è bene informarsi presso chi ha strutturato il template grafico del
sito per sapere come impostare le dimensioni.

Creata l'immagine bisognerà caricarla sul sito. Questa operazione si effettua tramite il pannello
Gestione media accessibile dal Pannello di Controllo (fig. 1).
Entrati nel pannello si selezionerà la directory /banners.
Una volta lì (fig. 8), fare click su “Sfoglia” e comparirà la solita finestra che consente di
scegliere il file immagine preparato sul proprio computer per il caricamento.
Scelto il file, fare click su “Carica” e dopo qualche secondo il file comparirà a fianco degli altri
presenti nella directory.

fig.8

A questo punto, bisognerà trasformare l'immagine caricata in un banner vero e proprio.

Per fare questo, è necessario configurare il componente banner, cui si accede, come mostrato
in fig. 9 tramite il menu Componenti.

fig.9

Facendo click su “Gestione clienti” è possibile creare dei profili per ciascun inserzionista del
nostro sito. Se vogliamo pubblicare solamente banner privati, sarà sufficiente inserire un unico
cliente, standard, coni nostri dati.

Attraverso il pannello “Gestione banner”, invece, si configura il banner vero e proprio (fig. 10)
 fig.10

Le voci che sarà necessario impostare sono: Nome banner (un identificativo che ci permetterà
di individuare il banner tra i vari creati), Seleziona cliente (il cliente – tra quelli creati nel
pannello Gestione clienti – cui fa riferimento il banner), Scelta immagine banner (ci permette
di scegliere l'immagine che abbiamo caricato precedentemente nella directory
images/banners).

Attraverso la voce Click Url è invece possibile decidere l'indirizzo al quale il visitatore sarà
rediretto nel caso in cui faccia click sul nostro banner.
 7. Utilizzo di Joomlastats (componente per le statistiche del sito).

fig.11

Joomlastats è un componente che ci permette di ottenere informazioni costanti e aggiornate

sui visitatori del nostro sito, suddivise per giorno, mese, anno, paese di provenienza, tipo di
browser utilizzato, motore di ricerca utilizzato.

Vi si accede attraverso il menu Componenti (vedi fig. 9).

 8. Risorse per l'utilizzo e l'approfondimento di Joomla!

Sono numerosissimi i siti Internet che si occupano dello sviluppo e del mantenimento di
Joomla! Mi limiterò soltanto ad elencare i più utili, privilegiando ovviamente quelli in lingua
italiana:

Joomla.it (supporto ufficiale italiano)

http://www.joomla.it/

Joombers.com (forum di supporto utente/utente in italiano):

http://www.mambers.com/forumdisplay-s_4fce30df84d3dfa9381e8e12c7d14603-f_60.html

Joomlaitalia.com (altro sito di supporto italiano)

http://www.joomlaitalia.com/

Joomla.org (sito ufficiale internazionale)

http://www.joomla.org/

Questa Guida è pubblicata con licenza CC-Share Alike: Emanuele Favaro – Jmm.it - 2006.