Corso Drupal «Costruire un sito di eventi»

Transcript

1 Corso Drupal «Costruire un sito di eventi» Pino Vasarelli, Andrea Vivaldi Iit Istituto di Informatica e Telematica del CNR

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

3 Tema utilizzato Sarà utilizzato il tema «Sky», che è un tema della comunità Drupal, scaricabile al link creare la cartella «themes» sotto «sites>all»; scompattare la cartella del tema in sites>all>themes. IIT/CNR P. Vasarelli A. Vivaldi 3

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

5 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

6 Installare i moduli esempio (1) IIT/CNR P. Vasarelli A. Vivaldi 6

7 Installare i moduli esempio (2) IIT/CNR P. Vasarelli A. Vivaldi 7

8 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

9 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

10 Configurare il modulo «Event» IIT/CNR P. Vasarelli A. Vivaldi 10

11 Configurare il modulo «Event» (overview) IIT/CNR P. Vasarelli A. Vivaldi 11

12 Configurare il modulo «Event» (time zone) IIT/CNR P. Vasarelli A. Vivaldi 12

13 Configurare data e ora IIT/CNR P. Vasarelli A. Vivaldi 13

14 Configurare le notifiche IIT/CNR P. Vasarelli A. Vivaldi 14

15 Configurare il modulo «Signup» IIT/CNR P. Vasarelli A. Vivaldi 15

16 Configurare il tipo di contenuto «Event» IIT/CNR P. Vasarelli A. Vivaldi 16

17 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

18 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

19 Configurare il modulo «Wysiwyg» (1) IIT/CNR P. Vasarelli A. Vivaldi 19

20 Configurare il modulo «Wysiwyg» (2) IIT/CNR P. Vasarelli A. Vivaldi 20

21 Configurare il modulo «Wysiwyg» (3) IIT/CNR P. Vasarelli A. Vivaldi 21

22 Configurare il modulo «IMCE» IIT/CNR P. Vasarelli A. Vivaldi 22

23 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

24 Aggiungere vocabolari IIT/CNR P. Vasarelli A. Vivaldi 24

25 Elenco dei vocabolari IIT/CNR P. Vasarelli A. Vivaldi 25

26 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

27 Aggiungere termini (esempio) IIT/CNR P. Vasarelli A. Vivaldi 27

28 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

29 La home page «Breaking Events» IIT/CNR P. Vasarelli A. Vivaldi 29

30 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

31 Creazione del menu (1) IIT/CNR P. Vasarelli A. Vivaldi 31

32 Creazione del menu (2) IIT/CNR P. Vasarelli A. Vivaldi 32

33 Creazione del menu (3) IIT/CNR P. Vasarelli A. Vivaldi 33

34 «Breaking Events» con menu IIT/CNR P. Vasarelli A. Vivaldi 34

35 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

36 «Breaking Events» con blocchi eventi IIT/CNR P. Vasarelli A. Vivaldi 36

37 Configurare il modulo «Poormanscron» IIT/CNR P. Vasarelli A. Vivaldi 37

38 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

39 Gestione dei permessi (modulo node) IIT/CNR P. Vasarelli A. Vivaldi 39

40 Gestione dei permessi (modulo notify) IIT/CNR P. Vasarelli A. Vivaldi 40

41 Gestione dei permessi (modulo signup) IIT/CNR P. Vasarelli A. Vivaldi 41

42 Creazione di un nuovo utente Per testare le funzionalità del sito, creiamo un utente di prova. IIT/CNR P. Vasarelli A. Vivaldi 42

43 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

44 Il sito col tema «Sky» IIT/CNR P. Vasarelli A. Vivaldi 44

45 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

46 I blocchi riallocati IIT/CNR P. Vasarelli A. Vivaldi 46

47 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

48 Impostazione sorgente link primari IIT/CNR P. Vasarelli A. Vivaldi 48

49 Risultato finale IIT/CNR P. Vasarelli A. Vivaldi 49