Lezione 1. Joomla 2.5

Transcript

1 Lezione 1 Joomla 2.5

2 Joomla: introduzione Joomla è un cms (content managemente system) opensource. In pratica è un software che permette di realizzare siti web dinamici (l utente interroga il server, il server risponde e genera la pagina richiesta) senza una conoscenza specifica dei linguaggi web (php, jss, asp per citarne alcuni) e totalmente gestibili tramite pannello di controllo. Joomla può essere installato sia su un server remoto che su un server locale e lavora preferibilmente in ambiente LAMP (Linux, Apache, MySql, PHP) Guida: Sito:

3 Joomla: cosa posso fare? Gestione di contenuti dinamici e del layout tramite sistema di gestione backend grafico e intuitivo Gestione dei contenuti tramite Frontend Dialogo con DataBase MYSQL Gestione utenti e gruppi di utenti, gestione dei privilegi di accesso Utilizzo di più di 8000 componenti (login, commenti, photogallery, e.commerce, RSS, multimedia, forum, ftp, slideshow, social network, ecc..) Uso e modifica di template preimpostati (CSS e PHP) Modifica del sistema (joomla è opensource)

4 Joomla: livelli di utilizzo Un sistema come joomla è gestibile almeno sotto tre livelli di competenza: - Sviluppatore (conoscenza dei linguaggi web server e web client, conoscenza database e del sistema di amministrazione joomla) - Amministratore (cononoscenza css e html e del sistema di amministrazione joomla) - Manager / Editor (conoscenza del sistema di amministrazione joomla, frontend e/o backend). A noi interessano gli ultimi due.

5 Joomla: installazione L installazione (esempio lato server) è molto semplice: 1. Accedere tramite FTP (user e pass a cura del servizio di webhosting) alla root del server o accedere alla root locale c:/localhost/ 2. Cancellare eventuali file 3. Copiare le cartelle del pacchetto joomla (da unzippare) 4. Accedere: Se l immagine è questa, siete sulla buona strada.

6 Joomla: installazione 5. Seguire le istruzioni: 5.1 Inserire i dati di accesso al database (che dovrà essere realizzato / acquistato. Sono necessari: user, pass, host e nome del database. Joomla lavorerà con quello specifico db. 6. Inserire i dati del sito (nome, descrizione, utente super admin) 7. Rimuovere infine la cartella installation dalla root del server 8. Una volta rimossa la cartella digitare: per accedere al pannello di amministrazione Schermata finale.

7 Joomla: backend e frontend Un CMS è un sistema che permette di creare siti web dinamici e complessi i cui contenuti possono essere gestiti in modo semplice e intuitivo da chiunque. Il Backend è il sistema di amministrazione dell intero sito, il frontend è «quello che si vede». Frontend Backend

8 Joomla: backend e frontend Potremmo definire tre classi di utenza: - Amministratore: interagisce con il sistema di amministrazione backend e frontend per modellare il layout, gestire contenuti, grafica, componenti interattivi, moduli e plugin. - Editor: è l amministratore dei contenuti, agisce sul frontend modificando le singole pagine con nuovi elementi. I suoi privilegi dipendono dal sistema - Utente / lettore. Avremo modo di vedere che gli amministratori di joomla sono più di due e si dividono in più categorie.

9 Joomla: backend e frontend Il backend del sito, quindi, è "tutto quello che c'è dietro" e che permette che tutto funzioni come desideriamo. Per iniziare ad "amministrare" il sito basterà andare all'indirizzo (remoto) localhost/administrator (locale) Si arriverà ad una pagina di login in cui sarà necessario inserire i dati di amministratore scelti:

10 Il frontend di joomla è ripartito in aree: Ogni area è specificata in un file XML, inserita all interno dell index php e la sua «forma» è descritta all interno dello stile CSS. I moduli, vedremo, sono componenti che vanno integrati in un area. Il layout del template, quindi, è definito dalla composizione delle aree. Joomla: frontend

11 Joomla: backend Il pannello di amministrazione rappresenta il cuore del sito. A partire da esso si effettuano tutte le operazioni utili per amministrare il sito. I pulsanti della schermata principale del backend permettono di accedere alle operazioni di amministrazione più comuni

12 Joomla: pannello di amminsitrazione Global configuration: site Nome del sito, compare nella barra in alto ed è importante per i motori di ricerca L editor dei contenuti Lo si imposta da qua (default: tinymce) Descrizione e keywords sono altri due elementi Importanti per i motori di ricerca

13 Joomla: pannello di amminsitrazione Global configuration: server Quando si installa joomla si Collega il sistema al database, Al sistema di posta e ad FTP. Se si installa joomla in remoto e Si acquista un database da un Provider assicurarsi di avere i Dati di host, user e password

14 Joomla: sviluppiamo un sito Progettare e sviluppare un sito in joomla significa ideare e progettare un sito web affinchè possa essere amministrato da soggetti terzi. Presupponiamo di non dovere sviluppare un template ex-novo e preoccupiamoci di come partire. Pensiamo ad un sito per una rassegna di arte contemporanea itinerante con possibilità di iscriversi e pagare il biglietto on-line. Disegniamo un layout in base agli obiettivi del sito, considerando che joomla lavora per aree di contenuto ben definite. Cerchiamo un template che possa essere ottimizzato al meglio. I template forniscono tutti i file di installazione di un layout. In rete si trovano centinaia di template «free».

15 Joomla: sviluppiamo un sito [interaction] Progettiamo il sito web OMNIARTE, rassegna artistica itinerante. Interaction design, costruiamo la navigazione

16 Joomla: sviluppiamo un sito [interaction] Layout design, costruiamo la Struttura. Sarà il punto di partenza per cercare il template più simile al layout progettato (o nel caso, a svilupparlo)

17 Joomla: sviluppiamo un sito [interaction] Layout design, Per completezza disegnamo il layout di una pagine interna di un utente editor (al quale associamo un menù di scrittura del sito)

18 Joomla: sviluppiamo un sito [template] Installazione del template Per installare un template è sufficiente utilizzare il menù extension, verificare di essere su «install», caricare il file zip (non deve essere scompattato) e cliccare su upload. Per attivare il template ed applicarlo al sito è sufficiente cliccare su: Extension -> template manager

19 Joomla: sviluppiamo un sito [template] Installazione del template Su stili scegliamo il template per front e backend Su template possiamo Modificare il css e aprire Un anteprima Cliccare la stella per applicare il template In questo caso l utente ha a disposizione una molteplicità di template

20 Joomla: sviluppiamo un sito [template] Cliccando sul nome del template accediamo al pannello che ci permette di gestire (dipende dal template) tutte le proprietà dello stesso (ma non di modificare il CSS). Una possibilità interessante di joomla 2.5 è quella di poter associare il template ad una pagina specifica del sito. Questa possibilità ci permette di utilizzare più template e più stili su un solo sito in maniera rapida e intuitiva. Ogni volta che apportiamo modifica: pulsante «salva»

21 Joomla: sviluppiamo un sito Installazione del template: modifica del CSS online Su gestione template -> template è possibile modificare gli stili CSS associati al template (non tutti i template lo permettono!). Per una modifica più sicura e dettagliata del template è consigliato lavorare con software esterni (lezione successiva)

22 Joomla: sviluppiamo un sito Per ora non modifichiamo il css del template (presupponendo che layout, grafica, struttura delle aree siano ok) Quali sono i passi da svolgere? Prendiamo in mano il diagramma ad albero definente la navigazione del sito e procediamo affinché, come definito dal progetto, siano presenti: Delle categorie di contenuto specifiche Delle pagine (articoli) di contenuto (appartenenti o meno alle categorie) Uno o più menù con le voci di collegamento a ciascuna pagina.

23 Joomla: gestione dei contenuti Articoli, categorie, voci di menù. Un articolo è una pagina di contenuto. Una categoria è una classe di contenuto, utile sia per classificare le pagine sia per catalogarle in liste. E consigliato creare prima delle categorie e poi gli articoli, in modo che l articolo stesso possa essere categorizzato. Un esempio di utilizzo della categoria? Un link alla categoria apre una pagina con i link a tutti gli articoli collegati a quella categoria!

24 Joomla: gestione dei contenuti Gestione articoli presenta la lista degli articoli (pagine) del sito. Possibilità di crearne di nuovi, di modificarli, di metterli in prima pagina, ecc.. Su «Access level» possiamo scegliere il livello di accesso degli articoli selezionati

25 Joomla: gestione dei contenuti Articoli (pagine) Titolo: che rappresenta il titolo dell'articolo, verrà mostrato con le caratteristiche css dei tag h in alto prima dei contenuti. Stato: che indica se l'articolo è pubblicato (e quindi visibile) oppure no Creato da: utente che ha generato l articolo Ordine: serve per dare un ordine agli articoli all'interno della categoria Accesso: serve per modificare il livello di accesso della categoria Lingua: indica la lingua per la quale l'articolo è visibile ID: Valore numerico crescente identificativo dell articolo

26 Joomla: gestione dei contenuti Opzioni articoli Particolarmente importanti sono le opzioni (icona opzioni in alto a destra). Qui possiamo definire come vengono visualizzati tutti gli articoli, tutte le categorie, i link.. Possiamo ad esempio scegliere se nella pagina di un articola vogliamo visualizzare nome dell autore, titolo, ecc.. (il parametro viene applicato a tutte le pagine!) Inoltre da opzioni possiamo definire le possibilità e i privilegi di azione delle diverse classi di utenti (da registered a super admin)

27 Joomla: gestione dei contenuti Crea un articolo: Il primo campo è il titolo. Il titolo appare prima del contenuto, in linea con le impostazioni del tag H del CSS Il secondo campo è l'alias. Questo campo viene utilizzato per la creazione degli indirizzi SEF. Se non si inserisce alcun alias, il motore di Joomla, lo compilerà partendo dal titolo della categoria in base alle impostazioni salvate nella configurazione globale. Categoria: Ogni articolo appartiene ad una categoria Stato: E' lo stato di pubblicazione dell'articolo e anche qui può valere "pubblicato" o "sospeso". Accesso: indica il gruppo di utenti a cui l'articolo è accessibile. Public, è accessibile a tutti Register è accessibile solo agli utenti registrati Special è accessibile agli utenti registrati che hanno livelli amministrativi Permessi: Tramite questo pulsante si va nella gestione dei permessi per stabilire in dettaglio chi può fare cosa sull'articolo. Lingua: Indica la lingua per il quale l'articolo è visibile.

28 Joomla: gestione dei contenuti Crea un articolo: L'editor predefinito è TinyMCE ma sono reperibili on-line altri editor più complessi. In coda all'editor ci sono poi 5 pulsanti che permettono di aggiungere velocemente alcune features all'articolo Articolo: permette di inserire (dopo averlo scelto tramite un popup) il collegamento ad un altro articolo. Immagine: che permette di inserire un'immagine esistente o foto da Gestione Media o caricare una nuova immagine. Interruzione pagina: inserisce un'interruzione di pagina nel vostro articolo. Questo è utile quando il nostro contenuto è troppo lungo e lo si vuole dividere in più pagine. Editor si/no: permette di attivare o meno l'editor. Se è spento, si vedrà il codice HTML dell'articolo. L editor TinyMCE presenta il pannello di editing WYSIWYG classico di gestione dei contenuti multimediali. E possibile inoltre scrivere direttamente in HTML

29 Joomla: gestione dei contenuti Crea un articolo: Sulla destra sono presenti alcune finestre che presentano la possibilità di modificare alcuni parametri: Opzioni di Pubblicazione E' possibile impostare l'autore (e il suo alias) e le date di creazione, di inizio e fine pubblicazione. Queste date permettono di gestire il periodo entro cui un articolo può essere visualizzato. In questo modo è possibile ad esempio creare un articolo, farlo visualizzare a partire da una certa data e decidere di "spegnerlo" dopo qualche giorno. Come valore predefinito la data di inizio pubblicazione è fissata alla data in cui viene creato l'articolo e la data di fine pubblicazione al valore " :00:00" che indica che l'articolo rimane sempre pubblicato. Opzioni di Visualizzazione Ci sono una serie di parametri che modificano l'aspetto dell'articolo. A esempio si può impostare se visualizzare o meno il titolo, se visualizzare o meno le icone per versione pdf, stampa ed invia ad un amico, visualizzare o meno le date di creazione e modifica dell'articolo e l'autore. Configura schermata di modifica Permette di decidere se visualizzare o meno le opzioni di Pubblicazione e Visualizzazione durante la modifica degli articoli oppure se visualizzare immagini e link durante la modifica dell'articolo nel backend e nel frontend. Opzioni metadata Permette di impostare i Meta Description e le Meta Keywords dell'articolo oltre alle istruzioni robots da utilizzare sui link. Queste opzioni riguardano l'aspetto Seo dell'articolo.

30 Joomla: gestione dei contenuti Gestione e creazione menù: Nel backend è presente un'intera area dedicata alla gestione dei menu tramite il quale si controlla come i menu di Joomla devono apparire e funzionare. Su gestione menù sono presenti tutti i menù del sito. Un menù è un modulo di joomla e va inserito in un area precisa del sito. Per creare un nuovo menù cliccare sull icona «nuovo» e definire nome e descrizione.

31 Joomla: sviluppiamo un sito Creo tutto il menù principale e lo imposto nella posizione top Un menù è un modulo, cioè un istanza che va collocata in un area del sito. Cliccare su Add a module for this menù per aggiungere, editare e posizionare il modulo (la posizione «top» si chiama, per questo template, position1)

32 Joomla: gestione dei contenuti Gestione menù: Nell'area Menu è presente l'elenco dei menu presenti all'interno del sito. Per ogni menù sono visualizzati i seguenti dati Titolo. Questo campo è obbligatorio ed indica il nome dato al menu. Il titolo può essere visualizzato o meno sul frontend. Numero voci di menu. E' una colonna multipla all'interno del quale sono inserite le informazioni relative alle voci di menu di cui ècomposto il menu: #Pubblicate: sono il numero di voci di menu create ed attive. #Non pubblicate: sono il numero di voci di menu create e non pubblicate,quindi non visibili sul sito. #Cestinate: sono il numero di voci che sono stati cancellate, ma non eliminati definitivamente dal cestino. Moduli collegati al menu. I menu sono definiti all'interno di moduli e questa colonne e si possono avere più moduli associati ad essi, questa colonna elenca il numero di moduli associati al menu. Come moduli sono poi connessi ad un area precisa del sito.

33 Joomla: gestione dei contenuti Gestione menù: Un menù inizialmente è vuoto. E opportuno creare delle voci di menù collegate a contenuti (pagine, siti, elementi multimediali, login, utenti, forum, alto).

34 Joomla: gestione dei contenuti Gestione menù: Voci di menu, vediamo quali sono le proprietà della schermata precedente associate alle voci di menù: Per facilitare la navigazione è presente una barra di filtri da cui si possono scegliere le voci da visualizzare (in base al menu,allo stato,al tipo di accesso o alla lingua). titolo: rappresenta la voce che verrà visualizzata sul sito. stato: indica se la voce è attiva o meno (cliccare per disattivare, senza cancellare, una voce di menù) ordine: serve per dare un ordine di visualizzazione alle voci di menu, cliccare sull iconcina «salva» (icona con dischetto) in alto per salvare le modifiche sull ordine accesso: indica il gruppo di utenti che può visualizzare la voce ( public è visibile a tutti, registered è visibile agli utenti registrati, special è visibile agli utenti registrati con funzioni amministrative) tipo voce di menu: joomla permette di creare voci di menu con funzioni diverse. questa colonna indica il tipo di funzione. home: se selezionato questo campo indica che la voce di menu è la voce predefinita quando si accede al sito. La voce predefinita ha caratteristiche differenti rispetto alle altre voci e definisce anche la visualizzazione degli elementi della home page lingua: indica la lingua per il quale la voce è visualizzabile Per creare una nuova voce di menu, è sufficiente fare click sul pulsante Nuovo,in alto a destra e si arriverà ad una pagina di creazione.

35 Joomla: gestione dei contenuti Creazione voce di menù

36 Joomla: gestione dei contenuti [menù] Gestione tipo voci di menù (su articoli): 1) Lista di articoli archiviati: Questo menu presenta una tabella composta dalla lista di tutti gli articoli che sono stati messi in archivio 2) Aspetto Articolo: Questo menu presenta una sola pagina corrispondente a un solo articolo da impostare nella configurazione del menu stesso. 3) Aspetto invio articoli: Questo menu permette l'invio di un articolo da parte degli utenti. NOTA: Questo menu è usabile solo dagli utenti dal grado Autore in su. 4) Aspetto categoria blog: Presenta una serie di articoli appartenenti a una specifica categoria (da definire nella configurazione del menu) in un layout da blog 5) Aspetto categoria: Mostra semplicemente una tabella con la lista di tutti gli articoli appartenenti a una specifica categoria (da definire nella configurazione del menu). Cliccando su un articolo di questa lista, potrete visualizzare l'articolo. NOTA: nella configurazione del menu è possibile stabilire in quale ordine comporre la lista 6) Aspetto blog prima pagina: Mostra gli articoli che sono stati impostati come articoli di prima pagina nel formato blog. 7) Aspetto sezione blog: Mostra una lista di articoli di una sezione nel formato blog. 8) Aspetto sezione : Visualizza una lista di categorie contenute in una sezione.

37 Joomla: gestione dei contenuti Creazione voce di menù Oltre al nome della voce di menù dobbiamo scegliere la tipologia (tipo voce menù). Il tipo di voce dipende anche dai componenti installati (es. forum, fotogallery). Se la voce di menù punta ad un articolo (cioè ad una pagina del sito) dobbiamo verificare che la pagina esista già! Lo stato permette di tenere la voce in «non pubblicazione» L accesso definisce i criteri di visibilità della voce di menù (visibile a tutti, agli utenti registrati, ad una classe di utenti) Voce principale: permette di impostare la voce come voce di secondo grado («sottomenù»)

38 Joomla: gestione dei contenuti Creazione voce di menù Sulla parte destra sono presenti diversi parametri i cui valori determinano la visualizzazione finale della pagina aperta. Titolo della pagina del browser: titolo sulla barra in alto del browser Stile link CSS: è possibile collegare uno stile particolare alla voce Opzioni metadata: valori meta connessi all articolo Moduli assegnati alla voce: dove è presente e dove non è presente il modulo del menù nel quale è contenuta la voce Opzioni articolo: carrellata di opzioni di visualizzazione (valori che determinano la presenza o meno di contenuti all interno della pagina che verrà aperta quali titolo, autore, orario di scrittura, icone di stampa e creazione di pdf..)

39 Joomla: gestione dei contenuti Creazione voce di menù: tipo di voce Questa finestra appare quando si clicca su «seleziona» vicino a «tipo di voce». Non è sempre detto che la pagina da aprire debba essere un «articolo». In questo caso è sufficiente cliccare su «singolo articolo» e poi scegliere l articolo dalla finestra elenco.

40 Joomla: sviluppiamo un sito Imposto il menù principale e una voce che collega ad una pagina interna Torniamo al nostro sito ed elenchiamo i passi da fare (dopo aver installato il template «mimety») per creare una voce di menù (es. «cos è omniarte») di tipologia «singolo articolo» 1. Creo una categoria per tipologia di pagina 2. Edito la singola pagina (appartenente alla categoria) 3. Imposto un nuovo menù (menù principale ad esempio) e lo rendo modulo (e su moduli, come vedremo, definisco la sua posizione, ad esempio in «top») 4. Accedo al menù e creo una nuova voce «Cos è omniarte», collegandola all articolo creato in precedenza. In alto comparirà il menù con la voce «Cos è omniarte»

41 Joomla: sviluppiamo un sito Completiamo la creazione del menù con le altre voci di menù. Home, cos è omniarte, media, contatti sono tutti articoli singoli: il processo è sempre lo stesso tranne che per «blogga» Media ha un sottomenù: è sufficiente creare la voce è indicare che «Fotogallery» si trova su un livello inferiore rispetto a media. Lo si indica quando si crea la voce di menù in corrispondenza di Parent item Questo template mostrerà fotogallery su un menù a tendina. Blogga permette agli utenti registrati di inviare un proprio contributo. Da Menu Item Type, quando creiamo la voce di menù, scegliamo «Create article» e indichiamo la categoria a cui apparterrà l articolo scelto