Web Content Management System Corso avanzato

Evoluzione del web, Open Source e formati proprietari Sistema Client/Server, Sistema L.A.M.P. Registrazione su Client FTP, installazione CMS Joomla! Lezione 1 Il CMS Joomla!, Pannello di controllo Gestione dei contenuti Lezione 2 Template, Moduli, Componenti, Mambot Lezione 3 Template, Usabilità, Accessibilità Lezione 4 Gestione Lingue Applicativo Joom!fish per la creazione di un sito multilingua Lezione 5 Personalizzazione Cenni di: -HTML –PHP -CSS Lezione 6

Programmazione del CORE Programmazione degli applicativi Conoscenza di HTML, PHP e grafica per adattare il sito alle proprie esigenze Installazione e assemblaggio di applicativi e grafica Semplice installazione degli applicativi

Template Componenti Moduli Plugin o Mambot File di lingua

Il primo concetto da assimilare è che TUTTI gli elementi base vengono caricati in Joomla! tramite lo stesso pannello di installazione Il primo concetto da assimilare è che TUTTI gli elementi base vengono caricati in Joomla! tramite lo stesso pannello di installazione

Per disinstallare un’applicazione si deve scegliere prima “la famiglia” alla quale appartiene (se componente, modulo, etc..), selezionare quindi l’applicazione e cliccare su “rimuovi”. Per disinstallare un’applicazione si deve scegliere prima “la famiglia” alla quale appartiene (se componente, modulo, etc..), selezionare quindi l’applicazione e cliccare su “rimuovi”.

Template: è la struttura di un sito web. Ossia come è strutturato lo scheletro del sito per essere completato/arricchito tramite le applicazioni di Joomla! Layout: è l’aspetto di un sito web. Può essere soggettivamente bello, ben disegnato, elegante, oppure troppo pesante, troppo animato, etc. Template + Layout: danno corpo al front-end. Può essere oggettivamente conforme o meno a determinati standard circa l’usabilità e l’accessibilità (norme W3C).

Gestione template è il pannello che mi consente di accedere all’elenco dei Template caricati nel sito. Gestione template è il pannello che mi consente di accedere all’elenco dei Template caricati nel sito.

Qui selezioniamo il Template sul quale eseguire una certa operazione Qui selezioniamo il Template sul quale eseguire una certa operazione Qui troviamo l’indicazione del Template predefinito ossia di quello che sta dando “forma” al nostro sito Qui troviamo l’indicazione del Template predefinito ossia di quello che sta dando “forma” al nostro sito Cliccando qui si attribuisce il valore di Predefinito al Template che abbiamo selezionato Cliccando qui si attribuisce il valore di Predefinito al Template che abbiamo selezionato Cliccando qui si entra nella configurazione del Template Cliccando qui si entra nella configurazione del Template

Sotto alla voce Parametri troviamo una serie di impostazioni base del Template che possiamo modificare per meglio adattarlo alle nostre esigenze. Sotto alla voce Parametri troviamo una serie di impostazioni base del Template che possiamo modificare per meglio adattarlo alle nostre esigenze. Selezionando la voce Anteprima possiamo vedere sia le modifiche apportate ai parametri base sia la “posizione blocchi modulo” Selezionando la voce Anteprima possiamo vedere sia le modifiche apportate ai parametri base sia la “posizione blocchi modulo”

Template gratuiti e di buona fattura sono reperibili nel sito cliccando sulla voce Template. Ciò non significa che non ne possiate trovare di diversi e migliori in altri siti presenti nel web. Template gratuiti e di buona fattura sono reperibili nel sito cliccando sulla voce Template. Ciò non significa che non ne possiate trovare di diversi e migliori in altri siti presenti nel web.

Nel caso in cui io abbia trovato nel calderone dei Template alcuni particolarmente ben realizzati ed idonei alle mie esigenze, Joomla! prevede un’opzione “avanzata” che consente di assegnare diversi template a diverse voci di menu. Clicchiamo su un template (che non sia ovviamente il predefinito) e poi su modifica. Nel caso in cui io abbia trovato nel calderone dei Template alcuni particolarmente ben realizzati ed idonei alle mie esigenze, Joomla! prevede un’opzione “avanzata” che consente di assegnare diversi template a diverse voci di menu. Clicchiamo su un template (che non sia ovviamente il predefinito) e poi su modifica.

Noteremo che il parametro “Assegnazione al menu” si è completato con le opzioni “Voci di menu” e “Seleziona voci di menu”. Queste opzioni ci consentono di scegliere una o più pagine di Joomla! alle quali assegnare (per quindi visualizzare) un template differente da quello predefinito. Noteremo che il parametro “Assegnazione al menu” si è completato con le opzioni “Voci di menu” e “Seleziona voci di menu”. Queste opzioni ci consentono di scegliere una o più pagine di Joomla! alle quali assegnare (per quindi visualizzare) un template differente da quello predefinito.

Componenti: sono applicazioni sofisticate che consentono di avere sul proprio sito una ricca gamma di soluzioni sia lato front-end che lato back-end. Nel front-end la loro disposizione è fissa, nel corpo centrale della pagina (quello dei contenuti), e sono sempre richiamati da una voce di menu. Hanno un proprio pannello di amministrazione e di configurazione e a volte utilizzano dei plugin per funzioni aggiuntive

Prima di fare degli esempi vediamo come si presenta una comune applicazione in e il significato di alcuni simboli. L’applicazione è molto popolare tra gli utilizzatori Media dei voti ricevuti dagli utilizzatori La versione di Joomla! per cui è sviluppata principalmente Link per il download, diretto o previa registrazione, gratuito o a pagamento Finalità commerciale o meno dell’applicazione L’applicazione è tra le migliori della sua categoria (secondo gli esperti) L’applicazione prevede un componente L’applicazione prevede moduli L’applicazione prevede plugin L’applicazione prevede estensioni specifiche L’applicazione prevede file di lingua

La finalità di questa lezione è di spiegare in maniera dettagliata la creazione di articoli in Joomla! tramite l’utilizzo di estensioni specifiche che possono essere componenti, moduli e plugin. Un applicativo estremamente valido e fondamentale è il JComments che consente di scrivere commenti per ogni articolo con modalità differenti a seconda delle categorie di utenti interessate. La finalità di questa lezione è di spiegare in maniera dettagliata la creazione di articoli in Joomla! tramite l’utilizzo di estensioni specifiche che possono essere componenti, moduli e plugin. Un applicativo estremamente valido e fondamentale è il JComments che consente di scrivere commenti per ogni articolo con modalità differenti a seconda delle categorie di utenti interessate.

Jcomments è un applicativo che una volta installato presenta un componente che da back-end si occupa della gestione dei commenti e della impostazione dei parametri e da front-end agisce tramite un plugin (che si installa automaticamente). Jcomments è un applicativo che una volta installato presenta un componente che da back-end si occupa della gestione dei commenti e della impostazione dei parametri e da front-end agisce tramite un plugin (che si installa automaticamente).

Jcomments è un applicativo che una volta installato presenta un componente che da back-end si occupa della gestione dei commenti e della impostazione dei parametri e da front-end agisce tramite un plugin (che si installa automaticamente). Jcomments è un applicativo che una volta installato presenta un componente che da back-end si occupa della gestione dei commenti e della impostazione dei parametri e da front-end agisce tramite un plugin (che si installa automaticamente).

Plugin o Mambot: i mambot sono porzioni di codice che possono potenziare le funzionalità di base del CMS mediante l’inserimento nel contenuto di istruzioni speciali all’interno di parentesi graffe, es. {comando}…….{/comando}, o semplicemente a seguito dell’installazione. Possono avere un pannello di controllo che permette di configurare il loro operato.

Prima di vedere qualche esempio di plugin scaricato da analizziamo quelli nativi in Joomla! Il primo è l’editor (TinyMCE) che tramite il suo pannello di controllo può essere impostato in modalità normale, avanzata, estesa (quella in foto). Per quanto riguarda la creazione di contenuti è interessante vedere il funzionamento dei plugin “Pagebreak” e “Leggi tutto…” Prima di vedere qualche esempio di plugin scaricato da analizziamo quelli nativi in Joomla! Il primo è l’editor (TinyMCE) che tramite il suo pannello di controllo può essere impostato in modalità normale, avanzata, estesa (quella in foto). Per quanto riguarda la creazione di contenuti è interessante vedere il funzionamento dei plugin “Pagebreak” e “Leggi tutto…”

La funzione Pagebreak consente di dividere un articolo in più pagine dal punto in cui si decide di inserirlo. La funzione Pagebreak consente di dividere un articolo in più pagine dal punto in cui si decide di inserirlo. Per motivi di ottimizzazione dello spazio la sua funzionalità è disattivata nella visualizzazione dei contenuti in formato blog.

La funzione Leggi tutto… consente di dividere un articolo in due parti dal punto in cui si decide di inserirlo. La funzione Leggi tutto… consente di dividere un articolo in due parti dal punto in cui si decide di inserirlo. Per motivi di logica di utilizzo il plugin funziona solo nella visualizzazione dei contenuti in formato blog.

Un Plugin molto utile e al tempo stesso semplice da utilizzare è il mavik Thumbnails che consente di ridimensionare le immagini che carichiamo all’interno dei nostri articoli e cliccando su di esse di vederle nella dimensione originale all’interno di un pop-up stilisticamente gradevole. Il download è immediato. Un Plugin molto utile e al tempo stesso semplice da utilizzare è il mavik Thumbnails che consente di ridimensionare le immagini che carichiamo all’interno dei nostri articoli e cliccando su di esse di vederle nella dimensione originale all’interno di un pop-up stilisticamente gradevole. Il download è immediato.

Ovviamente anche i Plugin seguono la procedura di installazione prevista per tutte le altre applicazioni. Vediamo in figura evidenziato in giallo il plugin appena installato. Una volta attivato e se necessario impostando qualche parametro tra quelli previsti, l’applicativo funziona senza dover inserire ulteriori codici ma intervenendo direttamente sulle foto che ci interessa ridimensionare. Ovviamente anche i Plugin seguono la procedura di installazione prevista per tutte le altre applicazioni. Vediamo in figura evidenziato in giallo il plugin appena installato. Una volta attivato e se necessario impostando qualche parametro tra quelli previsti, l’applicativo funziona senza dover inserire ulteriori codici ma intervenendo direttamente sulle foto che ci interessa ridimensionare.

Se clicchiamo su una foto all’interno del nostro articolo noteremo la comparsa di un contorno che la delimita con dei “puntatori” per lato che servono per ridimensionarla “manualmente”. Effettuando questa operazione con il plugin installato avremo 2 risultati: - Un ridimensionamento migliore (meno “sgranato”) - (In front-page) la comparsa di un pop-up cliccando sopra la foto ridimensionata. Se clicchiamo su una foto all’interno del nostro articolo noteremo la comparsa di un contorno che la delimita con dei “puntatori” per lato che servono per ridimensionarla “manualmente”. Effettuando questa operazione con il plugin installato avremo 2 risultati: - Un ridimensionamento migliore (meno “sgranato”) - (In front-page) la comparsa di un pop-up cliccando sopra la foto ridimensionata.

Altro Plugin di probabile interesse per la creazione professionale di un articolo è il mosiframe che consente di inserire pagine di altri siti all’interno del nostro contenuto tramite un iframe. Il download si esegue dal sito del produttore. Altro Plugin di probabile interesse per la creazione professionale di un articolo è il mosiframe che consente di inserire pagine di altri siti all’interno del nostro contenuto tramite un iframe. Il download si esegue dal sito del produttore.

Questo plugin a differenza del precedente implica invece l’inserimento di un comando all’interno dell’articolo. Questo comando è come definito in precedenza contenuto all’interno di parentesi graffe. Vogliamo ad esempio inglobare nell’articolo un forum esterno dove si parla di moto. Il comando è il seguente: Questo plugin a differenza del precedente implica invece l’inserimento di un comando all’interno dell’articolo. Questo comando è come definito in precedenza contenuto all’interno di parentesi graffe. Vogliamo ad esempio inglobare nell’articolo un forum esterno dove si parla di moto. Il comando è il seguente: {iframe}

Se tutto è stato eseguito correttamente il risultato dovrebbe essere simile a quello in figura. L’iframe viene inserito in corrispondenza del punto esatto nel quale abbiamo inserito il codice all’interno dell’articolo. Se tutto è stato eseguito correttamente il risultato dovrebbe essere simile a quello in figura. L’iframe viene inserito in corrispondenza del punto esatto nel quale abbiamo inserito il codice all’interno dell’articolo.

Per completare l’articolo in questione desidero inserire un video per meglio sottolineare le caratteristiche della moto nella descrizione. Un Plugin come il precedente semplice e gratuito è AllVideos. Il download si esegue dal sito del produttore. Per completare l’articolo in questione desidero inserire un video per meglio sottolineare le caratteristiche della moto nella descrizione. Un Plugin come il precedente semplice e gratuito è AllVideos. Il download si esegue dal sito del produttore.

Anche questo plugin come il precedente prevede l’inserimento di un comando all’interno del contenuto. Questo comando varia a seconda della provenienza del nostro video. Nel caso in questione, essendo il video residente su youtube il comando è il seguente: Anche questo plugin come il precedente prevede l’inserimento di un comando all’interno del contenuto. Questo comando varia a seconda della provenienza del nostro video. Nel caso in questione, essendo il video residente su youtube il comando è il seguente: {youtube}codicevideo{/youtube}

Se tutto è stato eseguito correttamente il risultato dovrebbe essere simile a quello in figura. Il video viene inserito in corrispondenza del punto esatto nel quale abbiamo inserito il codice all’interno dell’articolo. Se tutto è stato eseguito correttamente il risultato dovrebbe essere simile a quello in figura. Il video viene inserito in corrispondenza del punto esatto nel quale abbiamo inserito il codice all’interno dell’articolo.

Moduli: sono pacchetti software scritti in PHP che consentono di avere sul proprio sito una ricca gamma di applicazioni. La loro caratteristica è l’indipendenza dal resto del sito ma a volte fanno da complemento ad un componente in quanto ne ampliano la funzione. La loro disposizione dipende da quanto previsto da colui che ha scritto/disegnato il template che definisce le “posizioni blocchi modulo” all’interno dello stesso.

Notare la non casuale ma anzi tipica disposizione dei moduli in Joomla! intorno al corpo centrale del sito. Notare la non casuale ma anzi tipica disposizione dei moduli in Joomla! intorno al corpo centrale del sito.

Basta un click per attivare o meno un modulo Basta un click per attivare o meno un modulo Basta un click per cambiare l’ordinamento di un modulo all’interno di una posizione blocco modulo Basta un click per cambiare l’ordinamento di un modulo all’interno di una posizione blocco modulo Basta un click per cambiare Il livello di accesso (Public, Registered, Special) consentito per il modulo Basta un click per cambiare Il livello di accesso (Public, Registered, Special) consentito per il modulo Posizione blocco modulo e tipologia di pagine nelle quali essere pubblicato si modificano cliccando sul nome del modulo

Cliccando su “Copia” si esegue una copia di un modulo. Ciò può essere utile quando si utilizzano moduli che, ad esempio, presentano un sommario delle notizie presenti nel sito e quindi se ne possono creare diversi per ogni tipo di sezione/categoria. Cliccando su “Nuovo” si può creare un nuovo modulo. Sostanzialmente è una procedura molto simile al “Copia” tranne che per la voce “HTML personalizzato” dove ci viene consentito di inserire un contenuto in una posizione blocchi modulo. Cliccando su “Nuovo” si può creare un nuovo modulo. Sostanzialmente è una procedura molto simile al “Copia” tranne che per la voce “HTML personalizzato” dove ci viene consentito di inserire un contenuto in una posizione blocchi modulo.

All’interno della famiglia dei moduli bisogna prestare attenzione ai Menu in quanto qualora ne volessimo creare uno nuovo il percorso è differente rispetto a quanto appena visto per gli altri moduli. Ossia cliccando o su “Copia” o su “Nuovo” otterremmo semplicemente un menu doppione di un altro già esistente e quindi con le stesse voci. Ma se il nostro intento è di creare un nuovo Menu per potervi collegare voci che non sono presenti negli altri allora il nuovo Menu va creato nella Gestione menu. All’interno della famiglia dei moduli bisogna prestare attenzione ai Menu in quanto qualora ne volessimo creare uno nuovo il percorso è differente rispetto a quanto appena visto per gli altri moduli. Ossia cliccando o su “Copia” o su “Nuovo” otterremmo semplicemente un menu doppione di un altro già esistente e quindi con le stesse voci. Ma se il nostro intento è di creare un nuovo Menu per potervi collegare voci che non sono presenti negli altri allora il nuovo Menu va creato nella Gestione menu.

Cliccando su Nuovo si accede al pannello per la creazione di un nuovo Menu. Per creare un nuovo Menu bisogna completare 4 voci tra le quali “Titolo Modulo” in quanto Joomla! crea in automatico il modulo corrispondente al nuovo Menu.

Cliccando su un modulo si accede al pannello di controllo Il Pannello di configurazione è uguale per tutti i moduli, ossia si compone di 3 parti delle quali Dettagli e Assegnazione menu sono standard per tutti mentre Parametri è, ovviamente, specifica per il tipo di modulo che si è selezionato.

La migliore raccolta di moduli si trova all’interno del sito Basta cliccare su Extensions e poi su All Categories per accedere alla totalità delle applicazioni (3582 al momento della creazione di questa slide). La migliore raccolta di moduli si trova all’interno del sito Basta cliccare su Extensions e poi su All Categories per accedere alla totalità delle applicazioni (3582 al momento della creazione di questa slide).

Quanto abbiamo visto fino ad ora sono tutta una serie di applicazioni per integrare i nostri articoli con funzionalità che si vanno ad aggiungere alla gestione dei contenuti nativa in Joomla! Riguardo questo aspetto esistono soluzioni integrate che tramite un’unica installazione provvedono a fornire una piattaforma gestionale completa (composta da componente, moduli e plugin) per la creazione dei contenuti (e non solo) in Joomla! Il K2 è una di queste. Quanto abbiamo visto fino ad ora sono tutta una serie di applicazioni per integrare i nostri articoli con funzionalità che si vanno ad aggiungere alla gestione dei contenuti nativa in Joomla! Riguardo questo aspetto esistono soluzioni integrate che tramite un’unica installazione provvedono a fornire una piattaforma gestionale completa (composta da componente, moduli e plugin) per la creazione dei contenuti (e non solo) in Joomla! Il K2 è una di queste.

Sono gli articoli Le categorie (che vanno create prima degli articoli) Consente di creare Tags da associare ai contenuti Consente di inserire Commenti come con il Jcomments A differenza del gestionale nativo in Joomla! K2 consente di creare infiniti gruppi per infiniti utenti in base a determinati permessi sui contenuti A differenza del gestionale nativo in Joomla! K2 consente di creare infiniti gruppi per infiniti utenti in base a determinati permessi sui contenuti Consente di creare campi extra per la creazione degli articoli e di associarli a differenti gruppi Consente di creare campi extra per la creazione degli articoli e di associarli a differenti gruppi

Tramite questa operazione tutti gli articoli in Joomla! vengono importati nel gestionale del K2 Tramite questa operazione tutti gli articoli in Joomla! vengono importati nel gestionale del K2 A differenza di Joomla!, in K2 gli articoli “seguono” le preferenze impostate all’interno delle categorie mentre la voce Preferenze si occupa degli altri aspetti dell’articolo (commenti, video, immagini, Tags, etc.) A differenza di Joomla!, in K2 gli articoli “seguono” le preferenze impostate all’interno delle categorie mentre la voce Preferenze si occupa degli altri aspetti dell’articolo (commenti, video, immagini, Tags, etc.) Addirittura è presente un editor grafico per elaborare le immagini Gli articoli possono essere segnalati come “featured”

Creiamo un articolo simile a quello precedentemente creato senza l’utilizzo del K2 L’area di editing è simile a quella classica di Joomla! ma attenzione al top menu in alto che contiene i “fields” (Immagine – Image gallery – Video – Extra Fields – Attachments) che determineranno il layout del nostro articolo e ai quali corrispondono opzioni aggiuntive nella colonna di sinistra.

Creiamo un articolo simile a quello precedentemente creato senza l’utilizzo del K2 Consente di inserire un’immagine esterna al contenuto Consente di inserire una galleria di immagini Consente di inserire un video esterno al contenuto Consente di inserire Informazioni addizionali (menu a tendina, caselle di spunta, aree di editing etc.) al contenuto Consente di inserire Informazioni addizionali (menu a tendina, caselle di spunta, aree di editing etc.) al contenuto Consente di inserire allegati

Libro di testo: R. CHIMENTI, Costruire siti dinamici con Joomla! 1.5, Hoepli, 2007 Slides e dispense: Contatti: - -