Web Content Management System. Corso base

Transcript

1 Web Content Management System Corso base

2 Lezione 1 Evoluzione del web, Open Source e formati proprietari, Sistema Client/Server, Sistema L.A.M.P., registrazione su Client FTP, installazione CMS Joomla! Lezione 2 Il CMS Joomla!, Pannello di controllo Gestione dei contenuti Lezione 3 Template, Moduli, Componenti, Mambot Lezione 4 Gestione Lingue Applicativo Joom!fish per la creazione di un sito multilingua

3 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

4 Template Componenti Moduli Plugin o Mambot File di lingua

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

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

7 Template: è lastruttura 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).

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

9 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 Cliccando qui si attribuisce il valore di Predefinito al Template che abbiamo selezionato Cliccando qui si entra nella configurazione del Template

10 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

11

12

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

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

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

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

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

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

19 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 L applicazione è tra le migliori della sua categoria (secondo gli esperti) Media dei voti ricevuti dagli utilizzatori La versione di Joomla! per cui è sviluppata principalmente Finalità commerciale o meno dell applicazione Link per il download, diretto o previa registrazione, gratuito o a pagamento L applicazione prevede un componente L applicazione prevede moduli L applicazione prevede plugin L applicazione prevede estensioni specifiche L applicazione prevede file di lingua

20 Come primo esempio di modulo andiamo a cercare una shoutbox che sia realizzata per Joomla! 1.5.X, abbia un buon gradimento da parte degli utenti e soprattutto sia gratuita. La AJAX Shoutbox sembra fare al nostro caso, l unico onere è rappresentato dalla registrazione obbligatoria al sito del produttore per effettuare il download.

21 Effettuata la registrazione risultano disponibili due versioni dell applicazione, una gratuita e una PRO a pagamento. E il tipico esempio di commercializzazione di prodotti Open Source con la tecnica del Loss Leader. Eseguiamo il download del modulo nella sezione FREE per la versione 1.5.X di Joomla!

22 La Shoutbox si installa come tutte le altre applicazioni tramite il pannello Gestione estensioni e una volta caricata comparirà nella lista insieme agli altri moduli. Presenta poche e semplici opzioni e se correttamente attivata e disposta su una posizione esistente nel Template il risultato dovrebbe essere identico a quello in figura (posizione blocco modulo right )

23 Come secondo esempio di modulo andiamo a cercare una galleria di immagini che sia realizzata per Joomla! 1.5.X, sia immediata nell utilizzo da parte degli utenti e soprattutto sia gratuita. Avendola testata, consiglio la Simple Flash Image Gallery. Il download si esegue dal sito del produttore.

24 Cliccando sul modulo si accede al pannello di controllo Ho configurato i parametri del modulo in modo che il modulo attinga le foto dal percorso images/motocicli/, che il colore del bordo sia bianco e che cliccando sulle immagini la pagina linkata sia quella del mio sito.

25 Se tutto è stato eseguito correttamente il risultato dovrebbe essere simile a quello in figura. Ho scelto come posizione blocchi modulo quella prevista dal template con la dicitura user2 in quanto fornisce una buona visuale al modulo, ma può essere applicato in qualsiasi altra posizione in base alle proprie esigenze.

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

27 Un Plugin molto utile e altrettanto 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.

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

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

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

31 Questo Plugin a differenza del precedente implica invece 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}

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

33 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

34 Libro di testo: R. CHIMENTI, Costruire siti dinamici con Joomla! 1.5, Hoepli, 2007 Slides e dispense: Contatti: f.passarini@tin.it