Corso avanzato

Programma del corsoLezione 1

• Evoluzione del web, Open Source e formati proprietari• Sistema Client/Server, Sistema L.A.M.P.• Registrazione su www.altervista.org, Client FTP, installazione CMS Joomla!

Lezione 2• Il CMS Joomla!, Pannello di controllo• Gestione dei contenuti

Lezione 3

• Template, Moduli, Componenti, Mambot

Lezione 4

• Template, Usabilità, Accessibilità

Lezione 5• Gestione Lingue• Applicativo Joom!fish per la creazione di un sito multilingua

Lezione 6• Personalizzazione• Cenni di: -HTML –PHP -CSS

Livelli di programmazione in Joomla!

Programmazione del CORE

Programmazione degli applicativiConoscenza di HTML, PHP e grafica per adattare il sito alle proprie esigenzeInstallazione e assemblaggio di applicativi e graficaSemplice installazione degli applicativi

Elementi base di Joomla!

TemplateComponentiModuliPlugin o MambotFile di lingua

Installazione elementi base

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

Disinstallazione elementi base

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

Template e Layout

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

Template e Layout

Gestione template è il pannello chemi consente di accedere all’elencodei Template caricati nel sito.

Template e Layout

Qui selezioniamo ilTemplate sul quale eseguireuna certa operazione

Qui troviamo l’indicazionedel Template predefinitoossia di quello che stadando “forma” al nostro sito

Cliccando qui siattribuisce il valoredi Predefinito al Templateche abbiamo selezionato

Cliccando qui si entranella configurazione del Template

Template e Layout

Sotto alla voce Parametri troviamouna serie di impostazioni base delTemplate che possiamo modificareper meglio adattarlo alle nostre esigenze.

Selezionando la voce Anteprima possiamo vederesia le modifiche apportate aiparametri base sia la “posizioneblocchi modulo”

Template e Layout

Template e Layout

Template e LayoutTemplate gratuiti e di buonafattura sono reperibili nelsito www.joomla.it cliccandosulla voce Template.

Ciò non significa che non nepossiate trovare di diversi emigliori in altri siti presentinel web.

Template e LayoutNel caso in cui io abbia trovato nel calderone dei Template alcuni particolarmente benrealizzati ed idonei alle mie esigenze, Joomla! prevede un’opzione“avanzata” che consentedi assegnare diversi template a diverse voci di menu.

Clicchiamo su un template (che non sia ovviamente il predefinito) e poi su modifica.

Template e LayoutNoteremo 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

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 www.joomla.org 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

Componenti

L’applicazione prevede file di lingua

Componenti

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.

Componenti

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

Componenti

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

Plugin o Mambot

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.

Plugin o MambotPrima di vedere qualcheesempio di plugin scaricatoda www.joomla.organalizziamo quelli nativi inJoomla!

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

Plugin o MambotLa funzione Pagebreak consente di dividere un articolo in più paginedal punto in cui si decide di inserirlo.

Per motivi di ottimizzazione dello spazio la sua funzionalità è disattivata nella visualizzazione dei contenuti in formato blog.

Plugin o MambotLa funzione Leggi tutto… consente di dividere un articolo in due partidal punto in cui si decide di inserirlo.

Per motivi di logica di utilizzo il plugin funziona solo nella visualizzazione dei contenuti in formato blog.

Plugin o MambotUn Plugin molto utile e al tempo stesso semplice da utilizzare è ilmavik Thumbnails che consente diridimensionare le immagini checarichiamo all’interno dei nostriarticoli e cliccando su di esse divederle nella dimensione originale all’interno di un pop-upstilisticamente gradevole.

Il download è immediato.

Plugin o MambotOvviamente 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.

Plugin o MambotSe 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.

Plugin o MambotAltro Plugin di probabile interesseper la creazione professionale diun articolo è il mosiframe che consente di inserire pagine di altri siti all’interno del nostro contenuto tramite un iframe.

Il download si esegue dal sitodel produttore.

Plugin o MambotQuesto plugin a differenza del precedente implica invece l’inserimento di un comando all’interno dell’articolo.

Questo comando è comedefinito in precedenzacontenuto all’internodi parentesi graffe. Vogliamo ad esempio inglobare nell’articolo un forum esterno dove si parla di moto. Il comando è il seguente:

{iframe}http://www.sitowebdainserire{/iframe}

Se tutto è stato eseguitocorrettamente il risultatodovrebbe essere similea quello in figura.

L’iframe viene inserito in corrispondenza del punto esatto nel quale abbiamo inserito il codice all’interno dell’articolo.

Plugin o Mambot

Plugin o MambotPer completare l’articolo in questionedesidero inserire un video per megliosottolineare le caratteristiche dellamoto nella descrizione.

Un Plugin come il precedente semplicee gratuito è AllVideos.

Il download si esegue dal sito delproduttore.

Plugin o MambotAnche questo plugin come il precedente prevede l’inserimento di un comando all’interno del contenuto.

Questo comando varia aseconda 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 eseguitocorrettamente il risultatodovrebbe essere similea quello in figura.

Il video viene inserito in corrispondenza del punto esatto nel quale abbiamo inserito il codice all’interno dell’articolo.

Plugin o Mambot

Moduli

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.

Moduli

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

ModuliBasta un click per attivareo meno un modulo

Basta un click per cambiarel’ordinamento di un moduloall’interno di una posizioneblocco modulo

Basta un click per cambiareIl livello di accesso (Public,Registered, Special)consentito per il modulo

Posizione blocco modulo etipologia di pagine nelle quali essere pubblicato si modificano cliccando sul nome del modulo

Moduli

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.

ModuliAll’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.

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

Moduli

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.

ModuliLa migliore raccolta dimoduli si trova all’internodel sito www.joomla.org

Basta cliccare su Extensions e poi suAll Categories per accedere alla totalità delle applicazioni (3582 al momento della creazione di questa slide).

Integrated Solution for Contents

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’unicainstallazione 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.

Integrated Solution for Contents

Integrated Solution for Contents

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 infinitiutenti in base a determinati permessi sui contenuti

Consente di creare campi extra per la creazione degli articoli e di associarli a differenti gruppi

Integrated Solution for Contents

Tramite questa operazione tutti gli articoli in Joomla! vengonoimportati nel gestionale del K2

A differenza di Joomla!, in K2 gli articoli “seguono” le preferenze impostate all’interno delle categorie mentre la voce Preferenzesi 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”

Integrated Solution for Contents

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.

Integrated Solution for Contents

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 allegati

Libro di testo: R. CHIMENTI, Costruire siti dinamici con Joomla! 1.5, Hoepli, 2007

Slides e dispense: www.pieralberto.net/corsojoomla

Contatti: - f.passarini@tin.it - www.pieralberto.net/corsojoomla

Riferimenti

Dott. Pier Alberto Passarini