Corso Drupal «Costruire un sito di eventi» Pino Vasarelli, Andrea Vivaldi Iit Istituto di Informatica e Telematica del CNR
Breaking Events Il sito Breaking Events deve avere le seguenti caratteristiche: la possibilità per gli utenti registrati di creare eventi, raggruppati per continente geografico; un calendario esteso nel corpo della pagina; un mini calendario nella barra laterale; una lista degli ultimi eventi inseriti, mostrata come anteprima sulla home page; la possibilità per gli utenti di ricevere email per ogni nuovo evento sul sito; la possibilità per gli utenti di essere avvisati quando un evento si avvicina. IIT/CNR P. Vasarelli A. Vivaldi 2
Tema utilizzato Sarà utilizzato il tema «Sky», che è un tema della comunità Drupal, scaricabile al link http://drupal.org/project/sky; creare la cartella «themes» sotto «sites>all»; scompattare la cartella del tema in sites>all>themes. IIT/CNR P. Vasarelli A. Vivaldi 3
Moduli usati Moduli opzionali del core: Taxonomy serve per classificare i contenuti; Comment abilita i commenti sui contenuti; Upload consente l upload di file e immagini; Search abilita la ricerca sul sito; Moduli aggiuntivi: Event consente la creazione di tipi di contenuto «evento»; Notify consente agli utenti di ricevere email periodiche sull inserimento o aggiornamento di contenuti e commenti; Signup permette agli utenti di ricevere notifiche all approssimarsi di una data; Views permette di creare viste sul contenuto del sito Taxonomy Menu trasforma i vocabolari tassonomici in menu; Wysiwyg abilita i plugin wysiwyg sulle aree di testo; IMCE consente il caricamento delle immagini direttamente nelle aree di testo; IMCE Wysiwyg bridge permette di collegare il modulo IMCE al modulo Wysiwyg; Poormanscron consente al cron di girare senza essere collegato al cron del server ospitante. IIT/CNR P. Vasarelli A. Vivaldi 4
Installare i moduli Creare la cartella «modules» sotto «sites>all»; scompattare tutti i moduli scaricati dentro la cartella appena creata; andare nell interfaccia di amministrazione dei moduli; abilitare tutti i nuovi moduli (e relative dipendenze) elencati nell esempio che segue. IIT/CNR P. Vasarelli A. Vivaldi 5
Installare i moduli esempio (1) IIT/CNR P. Vasarelli A. Vivaldi 6
Installare i moduli esempio (2) IIT/CNR P. Vasarelli A. Vivaldi 7
Costruzione del sito Per il corretto funzionamento del sito occorrerà: creare termini tassonomici selezionabili dall utente per descrivere il continente in cui avrà luogo l evento; impostare campi per tag liberi, con i quali l utente indicherà la propria collocazione geografica; configurare i moduli aggiuntivi installati; categorizzare e ordinare il contenuto in maniera logica, per poter essere acceduto in modo semplice e immediato. IIT/CNR P. Vasarelli A. Vivaldi 8
Il contenuto base Il sito sarà costruito intorno al modulo «Event», che creerà automaticamente il proprio tipo di contenuto. Gli obiettivi principali sono: categorizzare il contenuto per renderlo facilmente accessibile; creare il sistema di notifica per i nuovi contenuti inseriti; creare il sistema di notifica per gli eventi prossimi. IIT/CNR P. Vasarelli A. Vivaldi 9
Configurare il modulo «Event» IIT/CNR P. Vasarelli A. Vivaldi 10
Configurare il modulo «Event» (overview) IIT/CNR P. Vasarelli A. Vivaldi 11
Configurare il modulo «Event» (time zone) IIT/CNR P. Vasarelli A. Vivaldi 12
Configurare data e ora IIT/CNR P. Vasarelli A. Vivaldi 13
Configurare le notifiche IIT/CNR P. Vasarelli A. Vivaldi 14
Configurare il modulo «Signup» IIT/CNR P. Vasarelli A. Vivaldi 15
Configurare il tipo di contenuto «Event» IIT/CNR P. Vasarelli A. Vivaldi 16
Il modulo «Wysiwyg» Un profilo (o plug in) «Wysiwyg» è associato ad un formato di input e definisce: quale editore javascript verrà utilizzato; quali bottoni o temi saranno abilitati per l editore; come l editore verrà visualizzato; alcune altre funzioni specifiche dell editore. IIT/CNR P. Vasarelli A. Vivaldi 17
Configurare il modulo «Wysiwyg» Scegliere il plug in «TinyMCE» e scaricarlo seguendo il link indicato nell immagine (1); creare la cartella «libraries» sotto «sites>all»; scompattare la cartella del plug in nella cartella appena creata; associare il profilo «TinyMCE» al formato di input «FullHTML» come in immagine (2); abilitare i bottoni dell editor come in immagine (3); impostare «FullHTML» come formato di input predefinito. IIT/CNR P. Vasarelli A. Vivaldi 18
Configurare il modulo «Wysiwyg» (1) IIT/CNR P. Vasarelli A. Vivaldi 19
Configurare il modulo «Wysiwyg» (2) IIT/CNR P. Vasarelli A. Vivaldi 20
Configurare il modulo «Wysiwyg» (3) IIT/CNR P. Vasarelli A. Vivaldi 21
Configurare il modulo «IMCE» IIT/CNR P. Vasarelli A. Vivaldi 22
Creare nuove categorie Gli eventi verranno raggruppati tra di loro in categorie a seconda della loro provenienza geografica; per far ciò utilizziamo la tassonomia di Drupal, creando i tre «vocabolari» (con le impostazioni indicate): continente («richiesto»); stato («richiesto», «tag»); località («richiesto», «tag»). IIT/CNR P. Vasarelli A. Vivaldi 23
Aggiungere vocabolari IIT/CNR P. Vasarelli A. Vivaldi 24
Elenco dei vocabolari IIT/CNR P. Vasarelli A. Vivaldi 25
Aggiungere termini All interno del vocabolario «continente» aggiungere i «termini»: Africa; Asia; Australia; Europa; Antartide; America del Nord; America del Sud. IIT/CNR P. Vasarelli A. Vivaldi 26
Aggiungere termini (esempio) IIT/CNR P. Vasarelli A. Vivaldi 27
Controllare il form di sottomissione degli eventi Creare 4/5 eventi a piacere inserendo tutti i dati necessari utilizzando il form mostrato sopra. IIT/CNR P. Vasarelli A. Vivaldi 28
La home page «Breaking Events» IIT/CNR P. Vasarelli A. Vivaldi 29
Creazione del menu Creiamo un nuovo menu che contenga le voci del vocabolario «continente»; utilizziamo a tal scopo il modulo «Taxonomy Menu»: creando un menu vuoto «Continenti» (1); configurando nel vocabolario «Continente» le impostazioni «Taxonomy Menu» (2); spostando sulla barra di sinistra il blocco del menu «Continenti» (3). IIT/CNR P. Vasarelli A. Vivaldi 30
Creazione del menu (1) IIT/CNR P. Vasarelli A. Vivaldi 31
Creazione del menu (2) IIT/CNR P. Vasarelli A. Vivaldi 32
Creazione del menu (3) IIT/CNR P. Vasarelli A. Vivaldi 33
«Breaking Events» con menu IIT/CNR P. Vasarelli A. Vivaldi 34
Calendario ed eventi futuri Il modulo «Events» crea in automatico due blocchi: «Calendar to browse events» che gestisce un calendario; «List of upcoming events» che mostra una lista degli eventi futuri in ordine cronologico; visualizziamo i due blocchi nella barra laterale destra. IIT/CNR P. Vasarelli A. Vivaldi 35
«Breaking Events» con blocchi eventi IIT/CNR P. Vasarelli A. Vivaldi 36
Configurare il modulo «Poormanscron» IIT/CNR P. Vasarelli A. Vivaldi 37
Gestione dei permessi Per la corretta gestione del sito è necessario assegnare i permessi all utente registrato: creazione/modifica/cancellazione di eventi (modulo «node»); accesso alla configurazione personale delle notifiche (modulo «notify»); amministrazione della sottoscrizione agli eventi (modulo «signup»). IIT/CNR P. Vasarelli A. Vivaldi 38
Gestione dei permessi (modulo node) IIT/CNR P. Vasarelli A. Vivaldi 39
Gestione dei permessi (modulo notify) IIT/CNR P. Vasarelli A. Vivaldi 40
Gestione dei permessi (modulo signup) IIT/CNR P. Vasarelli A. Vivaldi 41
Creazione di un nuovo utente Per testare le funzionalità del sito, creiamo un utente di prova. IIT/CNR P. Vasarelli A. Vivaldi 42
Configurare il tema «Sky» Abilitare il tema «Sky» e renderlo predefinito; accedere alla sua configurazione per: cambiare il logo caricando quello fornito («logo.png»); utilizzare la stessa immagine per l icona; impostare «custom layout width» a «96%»; impostare «header navigation alignment» a «left»; impostare «base font size» a «13px» e «base font» a «Verdana». IIT/CNR P. Vasarelli A. Vivaldi 43
Il sito col tema «Sky» IIT/CNR P. Vasarelli A. Vivaldi 44
Riallocare i blocchi Trasformare il layout da tre colonne in due colonne «contenuto + barra laterale destra»; spostare il blocco «Realizzato con Drupal» nella regione footer; modificare l ordine dei blocchi a piacere. IIT/CNR P. Vasarelli A. Vivaldi 45
I blocchi riallocati IIT/CNR P. Vasarelli A. Vivaldi 46
Modificare il menu «Continenti» L ultimo passo consiste nel trasformare il menu «Continenti» in un formato orizzontale; il tema «Sky» ha la possibilità di visualizzare in orizzontale le voci di menu dei «link primari»; sostituiamo perciò la fonte dei link primari con le voci del menu «Continenti»; disattivare il blocco «Continenti» ormai ridondante. IIT/CNR P. Vasarelli A. Vivaldi 47
Impostazione sorgente link primari IIT/CNR P. Vasarelli A. Vivaldi 48
Risultato finale IIT/CNR P. Vasarelli A. Vivaldi 49