Il CMS Drupal (4) Pino Vasarelli, Andrea Vivaldi. Iit Istituto di Informatica e Telematica del CNR

Transcript

1 Il CMS Drupal (4) Pino Vasarelli, Andrea Vivaldi Iit Istituto di Informatica e Telematica del CNR

2 Scegliere il tema Dove trovare nuovi temi come installare e configurare i temi IIT/CNR P. Vasarelli A. Vivaldi 2

3 Introduzione In informatica il termine inglese look and feel è usato in riferimento ad una interfaccia grafica utente e comprende sia gli aspetti del suo disegno quali i colori, le forme, il layout e le famiglie di caratteri (il look, l apparenza visiva), sia il comportamento dei suoi elementi dinamici come i bottoni, i campi del form e i menu (il feel, la modalità di interazione); in un sito web Drupal, i temi forniscono il look and feel; uno dei principî cardine di un Content Management System (come Drupal), è che il trattamento del contenuto deve essere separato dal trattamento della sua presentazione; come per i moduli, Drupal fornisce diversi temi col pacchetto di installazione, e moltissimi altri sono messi a disposizione per l utilizzo dalla comunità degli sviluppatori; essendo realizzati con codice open source, è possibile apportare modifiche e adattare i temi alle proprie necessità. IIT/CNR P. Vasarelli A. Vivaldi 3

4 Cambiare il tema di amministrazione È possibile impostare un tema per scopi amministrati che sia diverso da quello utilizzato per tutte le sezioni del sito pubblico; se in particolare si vuol provare un tema mai usato in precedenza, può essere una buona scelta quella di utilizzarlo per la parte di amministrazione, magari scegliendo un «Garland» o un «Bluemarine»; Garland è particolarmente usabile in quanto ha la caratteristica di essere «fluido», e le pagine di amministrazione si adattano particolarmente bene all allargamento della finestra del browser; utilizzare un tema diverso per la parte di amministrazione è buona prassi per ricordarci anche visivamente in che area del sito ci troviamo ad agire; è possibile, spuntando l apposito check box, utilizzare il tema di amministrazione anche per inserimento e modifica di contenuti. IIT/CNR P. Vasarelli A. Vivaldi 4

5 Impostare il tema di amministrazione Il percorso da seguire è «Amministra > Configurazione del sito > Tema amministrazione» (admin/settings/admin ); il menu a discesa permette di scegliere un tema tra quelli installati; si può utilizzare il check box per decidere di usare il tema di default o quello di amministrazione per le modifiche dei contenuti. IIT/CNR P. Vasarelli A. Vivaldi 5

6 Nuovo tema di amministrazione IIT/CNR P. Vasarelli A. Vivaldi 6

7 I blocchi Introduzione Creare e utilizzare i blocchi Impostare una regione per i blocchi Configurare i blocchi IIT/CNR P. Vasarelli A. Vivaldi 7

8 Introduzione ai «blocchi» Ciascun tema di Drupal può definire le proprie regioni per il posizionamento dei blocchi; quelle standard sono «left», «right», «header», «footer» e «content»; molti temi definiscono blocchi aggiuntivi, e se si cambia tema può essere necessario un po di lavoro per riposizionarli; ad ogni modo i nostri blocchi dovrebbero funzionare altrettanto bene nelle loro nuove posizioni. IIT/CNR P. Vasarelli A. Vivaldi 8

9 Categorie funzionali di blocchi Dal punto di vista funzionale i blocchi possono essere catalogati in: blocchi di base: sono forniti da Drupal e implementano il log in, la ricerca e via di seguito; i link primari e secondari e i menu rientrano in questa categoria; blocchi dinamici: sono quelli i cui contenuti sono aggiornati automaticamente da Drupal, senza necessità di intervento da parte dell amministratore del sito se non quello del loro posizionamento all interno di una regione del tema; esempi sono i nuovi topic di un forum, i post recenti di un blog, i commenti più recenti e via di seguito; blocchi personalizzati: che contengono qualsiasi contenuto a piacere, esempio sulla pagina precedente, il blocco Downloads; blocchi di viste: uno dei tipi di visualizzazione delle viste è quello di tipo blocco, che si può generare dall interno della vista stessa per visualizzare contenuti organizzati dalle viste; blocchi di moduli: quelli creati dagli sviluppatori di moduli delle comunità di Drupal. IIT/CNR P. Vasarelli A. Vivaldi 9

10 I blocchi sul sito Corso Drupal IIT/CNR P. Vasarelli A. Vivaldi 10

11 Creare e utilizzare i blocchi I blocchi disponibili dipendono dalla propria installazione Drupal, e in particolare da quelli introdotti con i moduli dei contributori; se si apre il percorso «Amministrazione > Struttura del sito > Blocchi» (admin/build/block) e si scrolla in giù la pagina, si nota che la maggior parte dei blocchi sono in fondo nella sezione «Disattivato»; è possibile trascinare un blocco disattivato in una regione a piacere: un asterisco compare accanto al nome e scompare una volta effettuato il salvataggio col bottone «Salva blocchi». IIT/CNR P. Vasarelli A. Vivaldi 11

12 Creare e utilizzare i blocchi (esempio) IIT/CNR P. Vasarelli A. Vivaldi 12

13 Impostare una regione per il blocco La regione può essere impostata anche selezionando il settore nella casella a discesa; ricordarsi sempre di salvare la scelta effettuata. IIT/CNR P. Vasarelli A. Vivaldi 13

14 Impostare una regione per il blocco (esempio) IIT/CNR P. Vasarelli A. Vivaldi 14

15 Impostare una regione per il blocco (risultato) IIT/CNR P. Vasarelli A. Vivaldi 15

16 Configurare il titolo del blocco Per configurare un blocco, fare clic sul bottone «Configura» nell'elenco dei blocchi; dalla pagina che si apre si deve inserire una breve descrizione; la parte del titolo è quella più importante in quanto: se si lascia vuoto, per i blocchi di moduli viene usato il titolo di default ; se si digita «<none>» o si lascia il campo vuoto in caso di blocco creato da interfaccia utente, il blocco non avrà nessun titolo; si può inserire un titolo personalizzato (come nell esempio a destra). IIT/CNR P. Vasarelli A. Vivaldi 16

17 Configurare il titolo del blocco (risultato) IIT/CNR P. Vasarelli A. Vivaldi 17

18 Configurare la visibilità del blocco Si può permettere agli utenti di mostrare o nascondere il blocco; alcuni blocchi è opportuno che siano resi visibili solo agli utenti autenticati, altri a tutti; è possibile definire un elenco di pagine sulle quali: mostrare il blocco su tutte le pagine ad esclusione di quelle elencate; mostrare il blocco solo sulle pagine elencate. se si stanno riarrangiando i blocchi, assicurarsi di salvare tali arrangiamenti prima di richiamare la funzione di configurazione. IIT/CNR P. Vasarelli A. Vivaldi 18

19 Layout con Panel Come sono costruite le pagine con Panel Creare una pagina con i Panel Configurare un Panel IIT/CNR P. Vasarelli A. Vivaldi 19

20 Significato di Pagina In Drupal ci sono 3 significati per la parola pagina : Tutto quello che si vede in un sito web è sotto forma di una pagina HTML Uno dei due tipi di contenuto presenti di default in Drupal è proprio Page (pagina) Con i moduli Panels e Chaos Tool si possono creare e gestire pagine che presentino al loro interno contenuto personalizzato da uno o più nodi (ma anche da viste, blocchi,...) IIT/CNR P. Vasarelli A. Vivaldi 20

21 Perché usare Panel? Creare una pagina con Panel è facile, veloce ed efficiente La pagina può essere sempre modificata e arricchita in un secondo momento Tramite un interfaccia grafica molto intuitiva e robusta possiamo scegliere il layout della pagina e associare i contenuti nelle zone definite dallo stile È la soluzione migliore per ottenere un risultato veramente personalizzato nella visualizzazione dei contenuti IIT/CNR P. Vasarelli A. Vivaldi 21

22 Gestire le pagine con Panel L interfaccia di amministrazione si trova seguendo il percorso Costruzione del sito > Pagine Vengono elencate tutte le pagine realizzate tramite Panel All installazione del modulo sono caricate delle pagine standard, disattivate di dafault, che possono essere attivate e modificate Molto simile all interfaccia del modulo Views A fondo lista c è il link per creare una nuova pagina IIT/CNR P. Vasarelli A. Vivaldi 22

23 Interfaccia di gestione delle pagine IIT/CNR P. Vasarelli A. Vivaldi 23

24 Creare una pagina Cliccando sul link Create a new page (o il tab Add custom page ) si apre un form di immissione dei dati relativi alla nuova pagina Occorre inserire un titolo, un nome (per il salvataggio), una descrizione, il path (URL a cui risponde la pagine) Si può decidere se impostare la pagina come homepage Possono essere selezionate funzionalità aggiuntive Access control Voce di menu visibile Regole di selezione Context IIT/CNR P. Vasarelli A. Vivaldi 24

25 Creare una pagina (cont.) IIT/CNR P. Vasarelli A. Vivaldi 25

26 Selezionare il layout Dopo aver inserito le informazioni richieste lo step successivo è selezionare il layout che deve avere la pagina Tramite una select list scegliamo tra le possibili categorie di layout (flessibile, 1 colonna, 2 colonne, 3 colonne) Vengono poste alla scelta poi delle figure che rappresentano composizioni diverse secondo la categoria selezionata IIT/CNR P. Vasarelli A. Vivaldi 26

27 Selezionare il layout (cont.) IIT/CNR P. Vasarelli A. Vivaldi 27

28 Configurazione del Panel Lo step successivo riguarda la configurazione di impostazioni generali riguardo la pagina che stiamo creando Titolo amministrativo Abilitare/Disabilitare le regioni e i blocchi del tema Rendering (standard o in place) Id CSS aggiuntivo Codice CSS personalizzato IIT/CNR P. Vasarelli A. Vivaldi 28

29 Configurazione del Panel (cont.) IIT/CNR P. Vasarelli A. Vivaldi 29

30 Popolamento del contenuto Come ultimo passo si arriva alla definizione del contenuto nelle varie aree del layout Occorre scegliere come impostare il titolo (manuale, da panel, nessun titolo) Nell interfaccia viene riproposto lo schema del layout diviso in areee Ogni zona ha associata un icona a forma di ingranaggio, cliccando sulla quale compare un piccolo menu per aggiungere il contenuto e impostare lo stile della zona In basso appare sempre il bottone back per ritornare al passo precedente, Arrivati all ultimo step appare anche il bottone finish per salvare la pagina appena creata. IIT/CNR P. Vasarelli A. Vivaldi 30

31 Popolamento del contenuto (cont.) IIT/CNR P. Vasarelli A. Vivaldi 31

32 Aggiungere contenuto ad una zona Cliccando su Add content dal menu a comparsa, si apre una nuova finestra che permette di scegliere il contenuto da inserire Sulla sinistra della finestra c è un menu di categorie di contenuto da inserire Activity Feeds Menu Miscellaneous Page elements Viste Widgets Existing node New custom content IIT/CNR P. Vasarelli A. Vivaldi 32

33 Aggiungere contenuto ad una zona (cont.) IIT/CNR P. Vasarelli A. Vivaldi 33

34 ES: aggiungere una vista IIT/CNR P. Vasarelli A. Vivaldi 34

35 ES: aggiungere una vista (cont.) Una volta selezionata la vista ci viene chiesto di scegliere il metodo di visualizzazione Default Predefinito Blocco... In seguito ci verrà chiesto di specificare i parametri della vista IIT/CNR P. Vasarelli A. Vivaldi 35

36 ES: aggiungere una vista (cont.) IIT/CNR P. Vasarelli A. Vivaldi 36

37 Cambiare lo stile della zona Cliccando sempre sull icona a forma di ingranaggio si ha la possibilità di cambiare lo stile dell area interessata Apparirà sempre la solita finestra di scelta Stile di default Nessuno stile Stile personalizzato Elenco (ordinato, non ordinato) Bordi arrotondati (per singolo settore o a livello di area) Per quanto riguarda lo stile personalizzato si avrà a disposizione un ulteriore step per scegliere colore, font e altre impostazioni CSS IIT/CNR P. Vasarelli A. Vivaldi 37

38 Interfaccia stile personalizzato IIT/CNR P. Vasarelli A. Vivaldi 38

39 Configurazione del Panel Abbiamo appena visto come creare una pagina passo passo La pagina può essere modificata in qualsiasi momento cliccando il link modifica posto accanto alla voce, all interno delle lista di tutte le pagine Ci verrà mostrata l intera interfaccia di configurazione del Panel L interfaccia è divisa principalmente in due zone A sinistra un menu di configurazione diviso per categorie A destra l area di configurazione corrispondente alla voce di menu IIT/CNR P. Vasarelli A. Vivaldi 39

40 Interfaccia di configurazione IIT/CNR P. Vasarelli A. Vivaldi 40

41 Impostazioni: basic Le impostazioni Basic sono quelle che abbiamo configurato all inizio della creazione della pagina Vengono riproposte in questa sezione e possono essere modificate IIT/CNR P. Vasarelli A. Vivaldi 41

42 Impostazioni: accesso È presente una select list per aggiungere regole di accesso Codice PHP a mano Tema corrente Utente loggato... Possiamo scegliere se tutti i criteri che aggiungiamo devo essere tutti veri o se basta che almeno un criterio sia soddisfatto IIT/CNR P. Vasarelli A. Vivaldi 42

43 Impostazioni: accesso (cont.) Scegliendo un criterio dalla select list e cliccando su aggiungi si apre una finestra (differente per ogni criterio) che permette di configurare i parametri della regola di accesso Ad esempio se scegliamo come criterio User: permission apparirà la finestra per scegliere quale permesso deve essere associato al criterio di accesso alla pagina IIT/CNR P. Vasarelli A. Vivaldi 43

44 Impostazioni: menu Le impostazioni di menu permettono di specificare se la pagina creata deve essere associata ad una voce di menu Permette di scegliere tra tipi di menu Normale Scheda (il classico tab) Scheda predefinita In base alla scelta compariranno altri campi per definire ad esempio il titolo del menu, il menu contenitore, ecc... IIT/CNR P. Vasarelli A. Vivaldi 44

45 Varianti Il modulo Panel mette a disposizione la possibilità di avere più varianti della stessa pagina. Nell interfaccia di configurazione, nel menu di sinistra, appare la voce Variants Di seguito vengono elencate tutte le varianti (nel nostro caso la sola variante Panel ) Per ognuna delle varianti si hanno regole di selezione, layout, contenuto,... IIT/CNR P. Vasarelli A. Vivaldi 45

46 Variants: general La voce General della variante presenta delle impostazioni già viste durante la creazione della pagina Riporta configurazioni relative allo stile e la possibilità di inserire del codice CSS a mano IIT/CNR P. Vasarelli A. Vivaldi 46

47 Variants: selection rules Abbiamo detto che una pagina può avere più varianti, per questo occorrono delle regole di selezione per sapere quale panel utilizzare L interfaccia è identica a quella delle regole di accesso IIT/CNR P. Vasarelli A. Vivaldi 47

48 Variants: layout Possiamo scegliere di avere varianti con layout differenti L interfaccia di selezione del layout è del tutto identica a quella utilizzata durante la creazione della pagina Se modifichiamo il layout avendo già inserito dei contenuti, un form successivo ci indicherà come vogliamo che siano migrati nelle diverse zone IIT/CNR P. Vasarelli A. Vivaldi 48

49 Variants: contenuto Alla voce contenuto viene riproposto lo schema del layout diviso a zone, come già incontrato durante la costruzione della pagina Con il solito meccanismo visto prima di possono aggiungere/eliminare i contenuti o spostarli tramite drag&drop IIT/CNR P. Vasarelli A. Vivaldi 49

50 Configurare i contenuti inseriti Quando inseriamo un contenuto all interno della zona desiderata abbiamo la possibilità di impostare alcuni parametri Accanto al titolo del contenuto inserito compare una nuova icona a forma di ingranaggio Cliccando sull icona si apre un menu (simile a quello visto per l inserimento di stile e contenuto), che permette di impostare: Stile aggiuntivo relativo al solo contenuto Altre regole di visibilità più specifiche Meccanismi di caching IIT/CNR P. Vasarelli A. Vivaldi 50

51 Configurare i contenuti inseriti (cont.) IIT/CNR P. Vasarelli A. Vivaldi 51

52 Modifica dei temi e il loro css IIT/CNR P. Vasarelli A. Vivaldi 52

53 Panoramica dei file del tema Un tema è formato da un insieme di file che concorrono a definire il livello della presentazione; è possibile definire uno o più sottotemi o varianti del tema; solo il file «.info» è obbligatorio, ma praticamente tutti i temi e sottotemi necessitano di altri file opzionali,, IIT/CNR P. Vasarelli A. Vivaldi 53

54 Schema del tema «example» IIT/CNR P. Vasarelli A. Vivaldi 54

55 I file del tema «.info» (richiesto); file di template («page.tpl.php», «block.tpl.php», «node.tpl.php», ); «template.php»; «logo.png»; «screenshot.png»; «style.css», altri file di stile; cartella «images» IIT/CNR P. Vasarelli A. Vivaldi 55

56 La struttura del file.info Le righe del file.info sono nel formato «chiave = valore»; il «name» dovrebbe iniziare con carattere alfabetico, può contenere caratteri numerici e «_» ma non e punteggiatura; «name» non può essere quello di un modulo installato; poiché il file.info viene salvato nella cache, questa va svuotata per visualizzare sulla pagina le modifiche effettuate; IIT/CNR P. Vasarelli A. Vivaldi 56

57 Elenco delle chiavi del file.info name (richiesto) description (raccomandato) screenshot version core (richiesto) engine (richiesto) base theme regions features stylesheets scripts php IIT/CNR P. Vasarelli A. Vivaldi 57

58 I file di template Questi template servono a produrre il markup xhtml utilizzando variabili PHP; ciascun file di tipo «.tpl.php» gestisce l uscita di una specifica parte di dati che possono essere «temati»; sono opzionali e in loro mancanza il tema userà un formato di uscita di default; evitare di inserire delle logiche di scripting complesse in questi files, che dovrebbero essere formati da lineari tag xhtml e variabili PHP; se presentano lo stesso nome di quelli della directory «themes» della distribuzione, Drupal utilizzerà quelli più specifici realizzati dall utente. IIT/CNR P. Vasarelli A. Vivaldi 58

59 Il file «template.php» Per tutta la logica di scripting e il processamento dei dati per l output, c è il file template.php; non è richiesto, ma per tenere ordinati e lineari i file.tpl.php, esso può essere usato per pre processare e generare variabili prima che queste vengano inserite nel codice di markup nei file.tpl.php files; anche la personalizzazione di funzioni che rimpiazzino quelle di default, dovrebbe essere fatta all interno di questo file; il file deve iniziare con un tag di apertura PHP «<?php», ma il tag di chiusura «?>» non è necessario, anzi si raccomanda di non inserirlo. IIT/CNR P. Vasarelli A. Vivaldi 59

60 Gli altri file Il «logo.png» e lo «screenshot.png» non sono assolutamente necessari perché il tema funzioni, ma se si intende postare il tema sul repository di Drupal allora diventano fondamentali; IIT/CNR P. Vasarelli A. Vivaldi 60

61 Creazione nuovo tema Creiamo una cartella «corsodrupal» all interno di «sites > all > themes» e dentro la cartella un file «corsodrupal.info» con le informazioni minime. IIT/CNR P. Vasarelli A. Vivaldi 61

62 Scelta del tema Nella lista dei temi compare «Corso Drupal» che attiviamo e rendiamo predefinito. IIT/CNR P. Vasarelli A. Vivaldi 62

63 Creazione file «page.tpl.php» 1 Cominciamo inserendo i tag iniziali di dichiarazione, il tag <html> e la sezione «head»; a destra il risultato della nostra home page. IIT/CNR P. Vasarelli A. Vivaldi 63

64 Creazione file «page.tpl.php» 2 continuiamo con le colonne (o barre laterali) del nostro layout; la maggior parte del siti web presentano una colonna sinistra (e/o una colonna destra) che di solto contengono il form di autenticazione, il menu di navigazione, i commenti più recenti eccetera; IIT/CNR P. Vasarelli A. Vivaldi 64

65 Creazione file «page.tpl.php» 3 continuiamo ancora con la parte del contenuto vero e proprio; il risultato ci mostra il contenuto posizionato sotto la barra di navigazione sinistra, non avendo ancora introdotto alcun criterio di stile e di posizionamento per i nostri blocchi «$left» e «$content». IIT/CNR P. Vasarelli A. Vivaldi 65

66 Creazione file «page.tpl.php» 4 inseriamo la parte del footer; aggiungiamo quindi un tag finale alla fine del file.page.tpl.php; questo tag è necessario per includere dinamicamente ogni script che deve apparire a fondo pagina, così come per chiudere ogni tag che fosse stato lasciato aperto precedentemente. IIT/CNR P. Vasarelli A. Vivaldi 66

67 Aggiunta stili e posizionamenti Aggiungiamo al file.info le informazioni sul foglio di stile che useremo; aggiungiamo anche la definizione dell elenco delle regioni in cui saranno contenuti i diversi blocchi di informazioni; l elenco include tutte le regioni «standard» di Drupal; se si ne vuole aggiungere una regione personalizzata, basta copiare una delle righe standard e rinominarla. IIT/CNR P. Vasarelli A. Vivaldi 67

68 Esempio layout fluido a due colonne Per «stilizzare» il nostro sito, possiamo usare le regole di stile e di posizionamento utilizzate nella pagina HTML statica mostrata sopra. IIT/CNR P. Vasarelli A. Vivaldi 68

69 Il file CSS di stile Il css prevede delle definizioni quali «intestazione», «contenuto», «sinistra» e «fondo»; tramite tali definizioni andremo a posizionare i contenuti in corrispondenza delle zone di Drupal definite nel tema. IIT/CNR P. Vasarelli A. Vivaldi 69

70 Il file page.tpl.php finale IIT/CNR P. Vasarelli A. Vivaldi 70

71 Il «nuovo» sito Corso Drupal 1 IIT/CNR P. Vasarelli A. Vivaldi 71

72 Il «nuovo» sito Corso Drupal 2 IIT/CNR P. Vasarelli A. Vivaldi 72

73 Elenco dei moduli utilizzati nel corso Moduli del core: Aggregator Block Color Comment Database logging Filter Forum Help Locale Menu Node Poll Profile Search System Taxonomy Trigger Update status User Moduli aggiuntivi: Advanced help Calendar Chaos tool suite CCK Date FileField ImageAPI ImageCache ImageField IMCE IMCE Wysiwyg jquery UI Panels Path redirect Pathauto Poormanscron Rules Token Views Wysiwyg IIT/CNR P. Vasarelli A. Vivaldi 73