Corso di Progetto di Sistemi Web Based

Content Management Systems

e
Universit degli Studi di Roma Tor Vergata
AA 2011/2012
Argomenti della lezione
1. Breve evoluzione storica dei siti internet

cos un sito statico

cos un sito dinamico

il CMS
2. Cos' un (Web) Content Management System

caratteristiche generali

CMS blog e site oriented: Wordpress e Joomla

3. Joomla

funzionalit di base

componenti moduli e plugin

template
Demo
Siti web statici
I siti deniti statici costituiscono la prima generazione di siti web, tali per cui il contenuto delle pagine non
pu essere modicato in termini di struttura e informazioni visualizzate agli utenti a meno di modica del
codice.
Come sono fatti?
In generale sono realizzati come collezioni di pagine statiche collegate tra di loro da link incrociati
realizzate dai webmaster sulla base di un progetto iniziale e successivamente modicate utilizzando
direttamente il linguaggio HTML oppure tramite programmi appositi di tipo WYSIWYG.
Non accedono ad alcuna base di dati esterna per ottenere i contenuti
WYSIWYG editor
frontpage, wysiwyg
Siti web statici - Vantaggi e svantaggi
Esempio: realizzazione di una vetrina
Realizzare un sito web statico per lacquisto di prodotti online, signicava produrre
singolarmente ogni pagina relativa ad ogni singolo prodotto e doverla modicare
individualmente e manualmente ogni volta che cera una variazione al listino.
Vantaggi
controllo totale su oggetti graci: laspetto di ogni singola pagina pu essere progettato indipendentemente
modello adatto per siti aggiornati raramente
hosting a basso prezzo: non hanno bisogno di caratteristiche aggiuntive (supporto PHP, MYSQL...)
in generale: costi pi bassi se realizzati da professionisti
Svantaggi
modiche ad hoc, costose
scarsa interazione con gli utenti, non possibile realizzare forum,
chat, guestbook, mailing list...
vincolo struttura semplice
Siti web dinamici
Le pagine di un sito web dinamico hanno la caratteristica di essere generate in tutto o in parte in
modo dinamico, nel momento in cui vengono visitate.
Caratteristiche principali
Le pagine, sviluppate con linguaggi appositi di scripting, sono quindi "create al volo" fondendo una
parte ssa (di solito il layout graco, i menu, i link principali) con quella prelevata da una base di dati
a seconda della sezione nella quale ci si trova e/o eventualmente di alcune informazioni speciche
relative all'utente che le sta visitando (browser, paese di provenienza..)
Siti web dinamici (II)
Vantaggi rispetto al primo schema sono:
manutenzione pi semplice
minor numero di pagine effettive: poche pagine possono essere opportunamente riempite con vari
contenuti diversi
possibilit di modicare i contenuti senza modicare materialmente le pagine
Tipici sistemi dinamici sono i portali, i siti vetrina di aziende con molti prodotti/servizi, i motori di ricerca.
Analogia del sito vetrina
Nel caso del listino dei prodotti una scheda
con struttura ssa pu essere riempita volta
per volta con i dati di ogni prodotto, dando
la sensazione di migliaia di pagine disponibili.
IL CMS
Ad un sito dinamico, cosa aggiunge il CMS?
Un Content Management System, letteralmente "sistema di gestione dei contenuti", uno strumento
software installato su un server web studiato per facilitare la gestione di contenuti e di siti web,
svincolando in tutto o in parte l'amministratore da conoscenze tecniche di programmazione Web e di
gestione di database.
Utilizzando un CMS, anche una gura non esperta nel campo dello sviluppo web pu amministrare con
facilit un portale web arbitrariamente complesso.
Alcuni concetti chiave
1. separazione tra presentazione e contenuti
2. trasparenza duso da parte dellutente
3. gestione centralizzata
Web CMS: caratteristiche generali
1. Content Management
Creazione, manipolazione e suddivisione dei contenuti in categorie.
Editor di tipo WYSIWYG integrati permettono di inserire articoli, voci, contatti, ecc. in modo
semplice
2. Registrazione e Gestione di Utenti e Gruppi
Funzionalit di autoregistrazione di utenti al sito (login form con inserimento credenziali)
Permette di denire gruppi di utenti con relativi ruoli e regole di accesso e interazione con i
contenuti del sito.
3. Versioning delle pagine
Permette di mantenere una cronologia delle precedenti versioni di un contenuto in modo da poter
scegliere in ogni momento di di ripristinarne una copia precedente.
Web CMS: caratteristiche generali
4. Restyling istantaneo: template
La veste graca del sito realizzata tramite template (HTML/CSS/XML) applicabili automaticamente
allintero sito in modo separato dai contenuti
separazione presentazione/contenuti-dati
Web CMS: caratteristiche generali (III)
5. Estensioni
E possibile tramite le estensioni aumentare le funzionalit del CMS rispetto a quelle core.
Alcuni esempi
forum, chat, guestbook
calendari
gestione newsletter
banner
gallerie di immagini e multimedia
altro..
In generale, la creazione e la distribuzione delle estensioni per i vari CMS pu essere controllata dagli stessi
produttori del CMS, oppure, queste possono essere liberalizzate come nel caso della maggior parte dei CMS
open source, per i quali esistono siti di terze parti contenenti collezioni di estensioni scaricabili gratuitamente
o a pagamento a seconda della specica licenza software.
Web CMS - Estensioni
Generazione feed RSS, versioni accessibili, eventualmente invio per email agli utenti registrati
6. Sistemi di pubblicazione alternativa
7. Supporto multilingua
Supporto alla realizzazioni di versioni localizzate dei contenuti, visualizzate agli utenti sulla base dello
stato di provenienza
Web CMS: caratteristiche generali (V)
Web CMS: frontend e backend
Un CMS costituito da due parti fondamentali: la sezione di
amministrazione (back end), che serve ad organizzare e supervisionare la
produzione dei contenuti, e linterfaccia disponibile alla fruizione (front
end), che lutente web usa per navigare fra i contenuti e le funzionalit del
sito.
La separazione tra queste due aree pu essere pi o meno marcata a seconda di una differenza di
implementazione logica (modiche al sito vengono svolte da un amministratore registrato
interagendo sulla stessa interfaccia visualizzabile dagli utenti web) o sica (accesso ad un vero e
proprio pannello amministrativo, separato)
back end
front end
CMS Hall of Fame
Google Trends: i principali CMS a confronto (World)
Google Trends: i principali CMS a confronto (Italia)
Joomla! nacque nell'agosto del 2005, come fork di Mambo, un CMS open source preesistente;
Distribuito gratuitamente, su licenza open source (GNU GPL), sviluppato in linguaggio PHP.
E' installabile su qualsiasi sistema operativo e web server avente supporto PHP.
Al momento supportato solo il sistema di gestione database MySQL.
Joomla!
Alcuni esempi di siti che usano Joomla
United Nations (Governmental organization)
http://www.unric.org
http://www.ihop.com/
http://www.porsche.com.br/
http://www.playshakespeare.com/
Joomla! - accedere al backend
Per accedere al pannello di amministrazione necessario recarsi allurl www.miosito.it/administrator/ ed
inserire le credenziali di accesso (username e password, specicate in fase di installazione o fornite
dallhosting provider in caso di acquisto di pacchetto inclusivo di CMS)
gestione centralizzata
Joomla! - pannello administrator
Anzitutto importante vericare e personalizzare la congurazione globale del CMS, suddivisa in cinque
schede, cliccando sul pulsante Congurazione globale.
Nella prima scheda (Sito) possibile modicare il titolo del sito web, l'impostazione dei metadata cio
una descrizione ed una lista di parole chiave, analizzate dai motori di ricerca, e l'attivazione facoltativa delle
funzionalit SEO relative agli indirizzi.
Congurazione globale: Sito
Le opzioni della scheda Server generalmente non hanno necessit di essere modicate; tra esse potrebbe
risultare necessario correggere la congurazione e-mail, in base alle indicazioni del proprio provider, afnch
i messaggi e-mail generati da Joomla vengano spediti correttamente.
Lopzione Compressione Gzip, qualora supportata dal server, comprime no al 70% il trafco generato dal
sito migliorando sensibilmente le performance.
Congurazione globale: Server
In Joomla! le pagine di contenuto sono chiamate articoli, e sono raggruppate in categorie.
Ogni categoria pu contenere pi categorie annidate o articoli.
Funzionalit base: contenuti e men
Ogni articolo pubblicato nel sito, viene assegnato ad una ed una sola categoria.
Per denire le categorie si accede, dal pannello di amministrazione alla voce Gestione categorie del menu
Contenuti.
Per inserire un articolo possibile utilizzare invece la voce Gestione articoli.
Strutturiamo il nostro sito
Nella barra degli strumenti di queste ed altre pagine di gestione rivestono particolare importanza i
comandi Pubblica e Sospendi, che permettono di controllare lo stato di visibilit al pubblico
dell'elemento sul sito web, Cancella (Cestina nella gestione articoli), Modica e Nuovo, per
rispettivamente eliminare, aggiornare un elemento, ed aggiungere uno nuovo.
E' sempre presente anche il pulsante Aiuto, che apre in una nuova nestra una mini-guida, riguardo la
pagina corrente.
Funzionalit base: contenuti e men
In gura mostrato un esempio di inserimento di nuovo articolo; in questo caso la categoria scelta
Didattica e la categoria al suo interno Corsi.
Inserire un nuovo articolo
Ogni articolo composto principalmente da un titolo e da un testo formattato, modicabile tramite
un editor WYSIWYG integrato.
Editor dei contenuti
Nella costruzione di un sito con Joomla! il secondo passaggio fondamentale, dopo la denizione della
struttura dei contenuti, la creazione dei menu di collegamento. E' possibile creare pi menu, ed ognuno
pu contenere pi voci diverse, ma di base obbligatoria la presenza di un menu principale, e al suo
interno una voce impostata come pagina principale del sito
I men
Nuova voce di men
Le voci di menu si possono collegare a svariate funzionalit in particolare riguardo
la visualizzazione dei contenuti, tra le quali:
Lista di tutte le Categorie, che elenca tutte le
categorie annidate alla categoria specicata, e
cliccando su ogni categoria mostra gli articoli
contenuti, sotto forma tabellare (solo titolo);
Categoria blog, che mostra il titolo e il testo
introduttivo di un numero desiderato di articoli, in
base alla data di inserimento o ad altre opzioni,
prelevandoli rispettivamente da una categoria;
URL Esterno, che permette di inserire un
collegamento ad un sito esterno;
Articoli archiviati, questo men presenta una
tabella composta dalla lista di tutti gli articoli che
sono stati messi in archivio;
Singolo articolo, che mostra il testo completo di
un singolo articolo;
Gestione utenti
Tutte le altre funzionalit di Joomla! vengono fornite tramite estensioni, di cui alcune gi incluse nel
pacchetto base, ed altre installabili successivamente; esse si dividono in cinque tipologie: Componenti,
Moduli, Plugin, Template e Lingue, e sono tutti installabili dal menu Estensioni del pannello di
amministrazione, alla voce Installa/Disinstalla.
La struttura di Joomla! poggia su un insieme di librerie di oggetti riutilizzabili, denominato core
framework, che contengono le funzionalit di base per il controllo del CMS.
Joomla! - Estensioni
Componenti, che generalmente creano vere e proprie sezioni e tipologie di
contenuto. Tra i componenti di base vi sono la gestione e visualizzazione di articoli, la
gestione utenti e moduli di contatto; esempi di componenti aggiuntivi sono gallery, gestione
download, forum.
Moduli, cio blocchi posizionabili nella pagina, per la visualizzazione di informazioni o
l'accesso a funzionalit. Sono esempi di moduli un riquadro per l'accesso degli utenti, i
menu, un elenco con gli ultimi articoli.
Plugin, funzioni che operano a vari livelli, innestandosi all'interno dei componenti. I plugin
possono operare ltraggi, elaborazioni, aggiunta di funzionalit nei contenuti, o mettere a
disposizione editor di testo avanzati.
Template, che deniscono i modelli di presentazione graca delle pagine, sono costituiti
principalmente da le PHP (in formato HTML) e CSS, oltre ad immagini e altri materiali.
Lingue, che aggiungono il supporto per lingue speciche.
Tipi di estensioni
La parte di gestione e visualizzazione dei contenuti proprio un primo esempio di componente, cio
un insieme di pagine di controllo nel pannello di amministrazione.
Alcuni componenti integrati in Joomla 2.5.4
Tra i componenti base Contatti permette di creare pagine con le informazioni per il contatto, come
indirizzo e numeri telefonici, e mettere a disposizione un modulo per l'invio diretto di un messaggio di
posta elettronica; Link Web consente la pubblicazione di link a siti web, suddivisi per categorie, ed il
tracciamento del numero di visite. E incluso anche un componente per offrire ai visitatori funzionalit di
ricerca nel sito (Cerca) e gestire lindicizzazione delle pagine .
Moduli e posizionamento nel template
Nel pacchetto base sono disponibili moduli per la visualizzazione dei menu, per la registrazione e
l'accesso degli utenti, per mostrare in modo compatto gli ultimi articoli pubblicati o quelli di una
particolare categoria, un modulo per la ricerca rapida nel sito, e altri ancora.
I moduli, al contrario dei componenti, non sviluppano intere sezioni funzionali; sono invece dei
blocchi con particolare contenuto, posizionabili a scelta all'interno della pagina.
Dalla voce Gestione moduli del menu Estensioni possibile attivare o disattivare i moduli, spostarli e
congurarli. In alcuni casi i moduli si appoggiano a determinati componenti per ottenere le informazioni e
fornire le funzionalit, come nel caso del modulo Sondaggi.
Le posizioni di pubblicazione disponibili dipendono dal template graco in
uso. Per ogni modulo anche possibile specicare in quali pagine debba
essere visualizzato, con un metodo di selezione basato sulle voci di menu.
Moduli e posizionamento nel template (II)
Per visualizzare linsieme di posizioni utilizzabili per un certo template possibile appendere allurl
corrente la stringa ?tp=1 oppure in Gestione Template nel tab Template cliccare su Anteprima.
Moduli e posizionamento nel template (III)
Cenni sui template
I Template in Joomla! sono i modelli graci che regolano la presentazione di qualunque sezione del sito. Il
punto centrale dei template il le index.php, una combinazione di codice HTML e PHP che denisce la
struttura della pagina, mentre la formattazione vera e propria gestita da le CSS.
I template sono installabili allo stesso modo delle altre estensioni, quindi dalla voce Installa/
Disinstalla del menu estensioni, mentre l'attivazione e la congurazione possibile dalla voce
Gestione template dello stesso menu.
I template possono essere Lato Sito (front end) o Lato Amministratore (back end).
L'elemento attivo come predenito contrassegnato da una stella.
Dove reperire nuove estensioni
Ulteriori componenti ed altre estensioni si possono trovare sul sito ufciale Joomla Extensions Directory,
reperibile allindirizzo extensions.joomla.org.
Molte di queste estensioni sono scaricabili gratuitamente, altre sono invece disponibili a pagamento, su licenza
commerciale.
Googlemaps Plugin permette di inserire in modo
semplice una mappa di Google. Dopo averlo
congurato nella sezione Gestione Plugin con
lindirizzo scelto, baster inserire nellarticolo il tag
{mosmap}.
Mi hai convinto,
da dove inizio?
www.joomlafree.it
Free Joomla Hosting
Grazie!
www.twitter.com/FabrizioBizzi
fabrizio.battini@me.com