Come costruire il proprio sito in 10 passi?
Note: Return to tutorial view.
Passo 1: Effettuare il log-in
Omettiamo in questa guida istruzioni sulle fasi d'installazione, poiché, acquistando un normale servizio di hosting Plone, il software è già installato e sarà sufficiente farsi riconoscere effettuando il login con l'utente di amministrazione.
Plone standard presenta un'interfaccia molto pulita e semplice da modellarla secondo le proprie esigenze. Mostreremo in questa breve guida, a titolo d'esempio, la costruzione di un sito web aziendale: come personalizzare la home page, il menù di navigazione, creare sezioni ad hoc che descrivano l'azienda e i prodotti, dei box laterali in cui mettere in evidenza informazioni importanti, e così via.
Sarà poi molto semplice personalizzare ciò che viene descritto nelle 10 fasi proposte, adattandole ai bisogni di chi invece di un sito aziendale desidera crearne uno personale, dedicato alle sue passioni, o uno informativo in cui pubblicizzare news ed eventi, ecc.
Un anteprima di dove ci porterà il nostro lavoro?
Diamo inizio all'avventura!
La prima cosa da fare
Per modificare qualsiasi parte del proprio sito e creare nuovi elementi, è necessario effettuare il log-in.
Autenticarsi è semplicissimo, basta inserire nel box Accedi che si trova a sinistra il proprio nome utente e la password; oppure premere sul link "Fatti riconoscere" in alto a destra, che farà comparire un pannello in cui inserire il proprio nome utente e la propria password.
Una volta effettuato il login, comparirà nella barra dell'utente il proprio nome utente e il sistema ci riconoscerà come amministratori (in questo caso):
Passo 2: La home page
Per creare l'home page, si può ad esempio creare una pagina da impostare come pagina iniziale.
Creare una nuova pagina
Selezionare dal menù Aggiungi un nuovo elemento l'opzione "Pagina":
Apparirà una schermata in cui inserire un titolo, una descrizione e un testo a piacere, ad esempio la presentazione della propria attività, oppure informazioni importanti come indirizzi e contatti:
Si possono anche aggiungere delle immagini e dei link interni ad altre sezioni del sito. In altre parole, questa pagina rappresenta la presentazione del proprio sito, è quindi molto importante renderla informativa, interessante e accattivante, in modo da attirare l'attenzione e invogliare ad esplorare le altre sezioni.
Una volta completata la creazione della pagina, premere sul pulsante Conferma le modifiche.
Inserire un'immagine
Vediamo come inserire un'immagine nella nostra pagina iniziale (o in qualsiasi altra pagina del proprio sito).
Trovandosi nel pannello di modifica della pagina (cliccando sul tab Modifica della pagina stessa) - in questo caso siamo nella pagina di benvenuto che stiamo creando -, cliccare sull'icona Inserisci immagine dell'editor di testo,
Si aprirà una finestra che contiene tutte le cartelle, le sottocartelle e le immagini presenti nel sito. Non abbiamo caricato precedentemente l'immagine nella cartella (scopri come si fa), ma lo si può fare direttamente dal pannello che sarà apparso; per far ciò, cliccare sul pulsante Carica immagine in basso:
Apparirà un nuovo pannello grazie al quale, cliccando sul pulsante Sfoglia, si può cercare l'immagine sul proprio pc. Dopo aver trovato e confermato l'immagine, darle un titolo:
Attraverso la parte destra del pannello si può scegliere l'allineamento dell'immagine all'interno della pagina, oltre a poter aggiungere una descrizione dell'immagine, scegliere le dimensioni e aggiungere un testo equivalente:
Una volta scelte le impostazioni preferite (in questo caso allineamento a sinistra), cliccare su Ok:
L'immagine è così stata inserita nella pagina, se non si desidera effettuare altre modifiche all'interno di essa, premere il pulsante Conferma le modifiche:
La pagina è stata creata e viene aggiunta come nuovo elemento nella barra di navigazione.
N.B. Ogni elemento, appena viene creato, si trova nello stato "Privato";
se si desidera rendere visibile l'elemento a tutti i navigatori, selezionare dal menù Stato l'opzione "Pubblica".
Adesso l'elemento è nello stato "Pubblicato" e quindi visibile a tutti i navigatori.
Impostazione della visualizzazione
Ora bisogna impostare la visualizzazione della pagina appena creata.
Per impostare la pagina come pagina iniziale, posizionarsi nell'attuale home page, cliccando sul logo in alto a sinistra,
successivamente selezionare dal menù Vista l'opzione "Scegli l'elemento da usare come vista predefinita...".
Si aprirà una schermata contenete tutte le pagine presenti in quella sezione del sito. Selezionare quella che si desidera impostare come pagina principale (nel nostro caso la pagina che abbiamo appositamente creato) e premere sul pulsante Conferma le modifiche.
Ora la pagina scelta è impostata come pagina iniziale.
La pagina che precedentemente era utilizzata come home page (Welcome to Plone) non è più utile e quindi può essere eliminata.
Eliminare un elemento
Per eliminare un elemento sarà sufficiente selezionare l'elemento stesso,
selezionare dal menù Azioni l'opzione "Elimina".
Verrà chiesta una conferma, cliccare quindi nuovamente su "Elimina".
Passo 3: Creare sezioni e gerarchie di cartelle
Per creare una nuova sezione, selezionare dal menù Aggiungi nuovo elemento l'opzione "Cartella".
Si aprirà una schermata che permette l'inserimento del titolo della propria sezione (per esempio "Chi siamo"), e una breva descrizione di essa.
Una volta inseriti titolo e descrizione, premere sul pulsante Conferma le modifiche.
La sezione è stata creata e viene aggiunta alla barra di navigazione.
Ricordarsi di pubblicare, in modo che i visitatori anonimi possano visualizzare ciò che si è creato.
Non necessariamente una sezione dev'essere presente nella barra di navigazione.
Plone fornisce di default alcune sezioni, come Users, News, Events, che potrebbero non essere indispensabili nella barra di navigazione.
Omettere un elemento dalla barra di navigazione
Se si desidera omettere un elemento dalla barra di navigazione bisognerà selezionare l'elemento stesso (in questo caso l'elemento è Users), cliccare sul tab Modifica,
Selezionare Impostazioni e spuntare "Ometti dalla navigazione".
Infine premere sul pulsante Conferma le modifiche.
Sarà sempre possibile ritornare alla cartella omessa dalla navigazione, un modo per raggiungerla è cliccare su Portale sulla barra intitolata Tu sei qui: e cliccare poi sul tab Contenuti.
Gli altri elementi che Plone crea di default, come Events e News, se non necessari posso essere eliminati come descritto nella sezione Passo 2.
Inoltre, se necessario, si possono creare delle sottocartelle, che divideranno la sezione in ulteriori sezioni. Per esempio, nella sezione Chi siamo si possono creare le sottocartelle Contatti e Come raggiungerci.
Creare sezioni e sottosezioni è molto semplice con Plone, ogni cartella o sottocartella creata andrà a formare automaticamente l'albero di navigazione del sito e in questo modo tutti i contenuti saranno ben organizzati in una gerarchia.
Nella sezione Contatti sarà utile inserire degli indirizzi email.
Per far ciò, creare in questa sezione una pagina, intitolata per esempio "Per ulteriori informazioni" (come descritto nel Passo 2) e nella parte Testo del documento si puo scrivere l'indirizzo e-mail dei membri dell'azienda che possono essere contattati dai clienti che vogliono ottenere informazioni di vario genere.
Gli indirizzi e-mail devono essere trasformati in link, per permettere al cliente di cliccare su di essi e far aprire automaticamente il proprio browser per la posta elettronica, in cui sarà già impostato l'indirizzo del destinatario, ovvero l'indirizzo e-mail appena cliccato.
Creare link
Selezionare l'indirizzo in questione e cliccare sull'icona a forma di mondo per inserire il collegamento,
si aprirà una finestra,
nella campo intitolata Collega il testo evidenziato a questo indirizzo: cancellare "http://" e inserire "mailto:" seguito dall'indirizzo email stesso (es. mailto:mario@htcompany.com)
a questo punto fare click su Ok.
Si può notare che adesso l'indirizzo è diventato un link, preceduto da una busta che indica, appunto, indirizzo e-mail.
Ripetere l'operazione per tutti gli indirizzi e-mail inseriti.
Infine cliccare su Conferma le modifiche. La pagina per la richiesta di informazioni è stata creata.
Passo 4: Creare una sezione Prodotti
Per creare una sezione Prodotti, cliccare sul logo per tornare all'home page e creare una nuova cartella intitolandola Prodotti, come descritto nel Passo 3.
All'interno della sezione appena creata si potrà creare una scheda dedicata ad ogni prodotto, in modo da presentarne caratteristiche, descrizione, funzionamento, e così via.
Per creare una nuova scheda prodotto, posizionarsi nella sezione nella quale si desidera inserilo (in questo caso Prodotti), e creare una nuova cartella, (vedi il Passo 3), intitolandola con il nome del prodotto che si vuole inserire (es. "Digital X1"),
a questo punto si può caricare, all'interno di questa cartella, un'immagine che rappresenta il prodotto in questione.
Caricare un'immagine
Selezionare dal menù Aggiungi nuovo elemento l'opzione "immagine",
Cliccare su Sfoglia e cercare l'immagine sul proprio pc,
dopo aver trovato e confermato l'immagine (oltre ad aver dato un titolo, altrimenti verrà automaticamente indicato quello effettivo presente sul proprio pc) cliccare su Conferma le modifiche.
L'immagine è stata caricata.
Adesso è necessaria una descrizione del prodotto, per esempio per spiegare le sue funzionalità.
La scheda del prodotto
Creare ora una pagina intitolata con il nome del prodotto stesso e in Testo del documento inserire le caratteristiche del prodotto,
è possibile, inoltre, inserire un'immagine all'interno del testo cliccando sull'icona Inserisci immagine dell'editor di testo, come spiegato nel Passo 2, con la differenza che, avendo già caricato l'immagine, sarà sufficiente selezionarla dall'elenco che viene proposto nell'apposito pannello:
spuntarla, e cliccare su Ok.
L'immagine è stata inserita nel testo.
Una volta conclusa la creazione delle caratteristiche del prodotto e l'inserimento immagine cliccare su Conferma le modifiche.
Nella cartella del prodotto, che ora contiene la descrizione del prodotto e l'immagine, dal menù Vista selezionare l'opzione "Scegli un elemento come vista predefinita",
spuntare la pagina che contiene la descrizione del prodotto e premere sul pulsante Conferma le modifiche.
Ripetere questo procedimento per tutti i prodotti che si desidera inserire.
Impostare la visualizzazione
Una volta concluso l'inserimento di tutti i prodotti, posizionarsi nella sezione Prodotti, cliccando il link prodotti sulla barra intitolata Tu sei qui:,
selezionare dal menù Vista l'opzione "Vista provini",
si otterrà una visualizzazione dei prodotti molto suggestiva.
Passo 5: Creare un riquadro per le news
A volte si può presentare la necessita di tenere informati gli utenti del sito su tutte le novità della propria azienda e del campo in cui si opera.
Questa esigenza può essere risolta creando un riquadro per le news.
Creare, come descritto nel Passo 3, una nuova sezione intitolandola News e ometterla dalla barra di navigazione.
In questa cartella si potranno aggiungere man mano tutte le notizie.
Inserire una notizia
Per inserire una notizia posizionarsi nella sezione nella quale si desidera inserila (in questo caso News).
Selezionare dal menù Aggiungi un nuovo elemento l'opzione "Notizia".
Si aprirà una schermata che permette l'inserimento del titolo della propria notizia, una breva descrizione di essa, il corpo della notizia, un'immagine che la rappresenta e la didascalia di quest'ultima.
Infine premere sul pulsante Conferma le modifiche.
Ripetere lo stesso procedimento ogni volta che si vuole creare una notizia.
Tornando alla home page, sempre cliccando sul logo, si potrà notare che adesso è visibile un riquadro Ultime notizie,
questo accade perché Plone di default presenta già vari riquadri, come spiegato nel paragrafo seguente.
NB: Le notizie saranno visibili nel box solamente se pubbliche, ricordarsi quindi sempre di pubblicare.
La gestione dei riquadri
Tornare alla home page cliccando sul logo, e successivamente cliccare sul link Gestione dei riquadri,
si aprirà una schermata che permette d'inserire o modificare uno o più riquadri nella parte destra o sinistra del proprio sito,
Plone di default presenta già vari riquadri impostati: sulla sinistra dello schermo, Navigazione e Accedi, sulla destra, invece, Elenco di revisione, Notizie, Eventi e Calendario.
Il riquadro per ora utile per noi è Notizie. Le altre, se non si ritengono utili, possono essere eliminate.
Per eliminare un riquadro è sufficiente cliccare sulla x rossa che si trova nella parte in alto a destra del riquadro da eliminare e cliccare su Save settings.
Effettuare quest'operazione per tutti i riquadri che non si desidera compaiano nelle pagine del proprio sito.
Per esempio si possono eliminare Accedi, Elenco di revisione ed Eventi.
Per tornare alla home page è sufficiente cliccare sul link "Torna" appena sotto il titolo del pannello.
Passo 6: Aggiungere video
Navigando nel web, tra i più famosi siti che raccolgono video, (come YouTube e Google) è possibile trovare qualche video interessante per il proprio sito, come per esempio video che spiegano il funzionamento di uno dei propri prodotti.
Inserire un video
Selezionare l'evento, la notizia o la pagina in cui dovrà essere inserito il video, (ad esempio il prodotto "Red-Tech"),
Premere il tab Modifica e posizionarsi nel Testo del documento,
nella barra degli strumenti dell'editor c'è un'icona "HTML", cliccare su di essa,
e apparirà il codice html
a questo punto è necessario andare nel sito in cui si trova il video che interessa: prendendo come esempio YouTube, a destra di ogni video c'è un box il cui ultimo campo è intitolato Codice da incorporare.
Copiare questo codice e inserirlo nel codice html della pagina interessata. Ora premere sul pulsante Conferma le modifiche.
In questo modo il video è stato inserito nel corpo del testo, ma probabilmente non verrà visualizzato correttamente; questo accade perché Plone protegge il proprio codice html dai tag considerati "pericolosi".
Per risolvere questo problema sarà necessario modificare la configurazione del sito.
Configurare il sito in modo da permettere la visualizzazione dei video inseriti tramite codice html:
Cliccare sul link Configurazione del sito,
si aprirà una pagina che contiene varie impostazioni del sito Plone, da qui selezionare "Filtri HTML",
ora si possono visualizzare tutti i tag considerati pericolosi, nella sezione Tag pericolose spuntare "embed" e "object" e "clikkare" sul pulsante Removed selected items,
a questo punto "object" apparirà nella sezione Tag eliminate,
spuntarlo nuovamente, aggiungendo anche la spunta a "param" e premere sul pulsante Removed selected items,
adesso i tre tag non sono più presenti nell'elenco dei pericolosi, confermare le modifiche premendo sul pulsante Conferma le modifiche.
La configurazione ancora non è completa, manca un piccolo passaggio.
Sulla destra della pagina, nel riquadro Configurazione del portale, selezionare "Interfaccia di gestione Zope",
si aprirà una pagina contenente tutte la proprieta di un sito Plone, cliccare sul link "portal_transforms",
ora cliccare sul link "safe_html",
si aprirà una pagina con un grande elenco di tag. Tra quelli appartenenti alla sezione "valid_tags" si nota che non è presente "embed", aggiungerlo al fondo della lista, assegnandogli il valore booleano 1,
successivamente cliccare su Invia richiesta.
Si aprirà la pagina precedente e la configurazione sarà terminata.
Per tornare al sito, premere sul primo link presente nel percorso indicato nella parte superiore della pagina (che indica il nome del proprio sito),
successivamente cliccare sul tab View.
Adesso è necessario posizionarsi nella pagina in cui è stato inserito il video (in questo caso nella pagina "Red-Tech"), accedere al pannello di modifica,
infine cliccare Conferma le modifiche.
Ora, una volta premuto sul pulsante Aggiorna del proprio browser, il video funzionerà correttamente.
Passo 7: Integrare servizi di Google sul proprio sito
Le mappe di Google Maps:
Può presentarsi la necessità d'inserire una mappa nel proprio sito, ad esempio per indicare dove si trova la propria azienda; in questo caso il servizio offerto da Google Maps è l'ideale.
Andare su www.google.it, selezionare in alto a sinistra Maps; una volta trovata la mappa dell'indirizzo desiderato, cliccare sul link in alto a destra della mappa chiamato "Collegamento a questa pagina"; si aprirà una finestra, copiare il codice presente nel campo denominato "Incolla HTML da incorporare nel sito web", e tornare al proprio sito.
Nella sezione Come raggiungerci che è stata creata precedentemente (vedere il Passo 3), creare una nuova pagina (vedere il Passo 2) e nel corpo del testo cliccare sull'icona "HTML" e incollare il codice html copiato da Google (vedere il Passo 6).
infine cliccare su Conferma le modifiche.
A questo punto la mappa non sarà visualizzabile, è necessario cliccare sul link Configurazione del sito, selezionare "Interfaccia di gestione Zope", cliccare sul link "portal_transforms", poi sul link "safe_html" e inserire tra i tag appartenenti alla sezione "valid_tags" il tag "iframe", assegnandogli il valore booleano 1, (confrontare il Passo 6)
successivamente cliccare su Invia richiesta.
Tornare alla visualizzazione del sito, accedere al pannello di modifica (cliccando sul tab Modifica) della pagina interessata e cliccare su Conferma le modifiche.
La mappa è stata inserita.
Impostare la pagina come vista principale della sezione Come raggiungerci (vedere il Passo 2).
Le statistiche di Google Analytics
Il servizio statistiche offerto da Google, chiamato "Google Analytics", permette di conoscere dati e statistiche riguardanti le visite del proprio sito e quindi dà la possibilità di migliorare la sua visibilità sul web e il posizionamento sui motori di ricerca analizzando il comportamento dei visitatori.
Per accedere al servizio si deve essere registrati su Google. Se si è già registrati o dopo aver creato un account, è necessario effettuare il log-in. Una volta effettuata l'autenticazione andare su http://www.google.com/analytics e seguire le indicazioni di Google: verra richiesto d'inserite l'url del proprio sito e altri dettagli, successivamente Google fornirà un codice html, che dovrà essere inserito nella root del proprio sito.
Per far ciò, tornare al proprio sito e cliccare sul link Configurazione del sito in alto a destra
successivamente cliccare sull'opzione "Sito",
e incollare il codice copiato precedentemente da Google nella sezione JavaScript per il supporto alle statistiche web.
Confermare cliccando sul pulsante Conferma le modifiche.
Per tornare all'interfaccia del sito cliccare su "Portale" nella barra in alto intitolata Tu sei qui:
Il calendario di Gmail:
Google offre la possibilità di inserire nel proprio sito un calendario interamente personalizzabile e che offre moltissime funzionalità; in particolare permette di essere impostato in modo che:
- I navigatori possano visualizzare semplicemente gli eventi che man mano si inseriscono nel calendario della propria casella di posta Gmail, gli appuntamenti verranno automaticamente aggiornati anche sul proprio sito
- I navigatori abbiano la possibilità di creare eventi, in modo che siano gli utenti stessi del sito a proporre appuntamenti e manifestazioni
- I navigatori possano solo visualizzare lo stato libero o impegnato, senza far visualizzare informazioni sugli appuntamenti
Per inserire nel proprio sito Plone un calendario Gmail è necessario, ovviamente, avere un account Gmail e creare un calendario (per creare un calendario, è sufficiente cliccare sul link Calendar che si trova in alto nella schermata del proprio accout Gmail). Una volta creato il calendario o se si è già in possesso di un calendario Gmail e ci si trova posizionati nel calendario stesso, basta cliccare sulla freccia accanto al proprio nome, selezionare "Condividi questo calendario", posizionarsi nella sezione "Dettagli calendario" e copiare il codice html presente nel paragrafo "Incorporare questo calendario".
Una volta copiato il codice tornare al proprio sito Plone.
Adesso creare una nuova pagina (vedere il Passo 2) intitolata per esempio "Calendario".
Nella sezione Testo del documento incollare il codice html copiato da Google, sempre in modalità HTML (vedere il Passo 6).
E infine cliccare su Conferma le modifiche.
Il calendario è stato importato.
Passo 8: La collaborazione
È possibile che da soli non si riesca a gestire interamente il proprio sito, che ci sia l'esigenza di più collaboratori che lavorano insieme alla sua gestione, o che "si sia troppo pigri per farlo" ;-); Plone offre la possibilità di creare nuovi utenti ai quali si possono assegnare dei ruoli ben determinati.
Ipotizziamo di avere moltissimo prodotti da gestire e quindi di avere bisogno di qualcun'altro che ci aiuti a inserire i nuovi e aggiornare i vecchi; in altre parole, abbiamo bisogno di creare un nuovo utente sul nostro sito per la persona designata per questo compito. Vediamo come si fa.
Configurare Plone per l'invio della posta elettronica:
Per creare un nuovo utente, innanzi tutto è necessario configurare Plone per l'invio della posta elettronica (servirà ad inviare al nuovo utente un e-mail che serve a completare la sua iscrizione).
Per far ciò, cliccare sul link Configurazione del sito,
successivamente cliccare su "Posta",
si aprirà un modulo da compilare. Dopo averlo compilato spostarsi nella sezione "Mittente",
compilare anch'essa e cliccare sul tasto Conferma le modifiche.
Adesso si può creare il nuovo utente.
Creare un nuovo utente:
Sulla sinistra dello schermo, nel riquadro Configurazione del portale cliccare su "Utenti e gruppi",
successivamente cliccare sul pulsante Aggiungi un nuovo utente,
si aprirà una schermata con un modulo da compilare, una volta inseriti tutti i dati cliccare sul tasto Conferma l'iscrizione.
L'utente è stato creato.
A questo punto all'utente arriverà un'email, contenente un link; cliccando su di esso si ha accesso a una pagina che permette di inserire una password a scelta dell'utente
Il nuovo utente ha ora una sua password per effettuare il log-in sul sito e potrà collaborare nella gestione dei contenuti.
Passo 9: Cambiare il logo del sito
Il logo di base presente sul proprio sito per ora è quello di Plone, ma si può impostare quello della propria azienda.
Per far ciò, cliccare sul link Configurazione del sito,
successivamente cliccare su "Interfaccia di gestione Zope"
cliccare su "portal_skins",
poi su "plone_images",
e adesso selezionare "logo.jpg (Plone)",
si aprirà una schermata con il logo attuale di Plone, cliccare sul pulsante Customize,
adesso cliccare su Sfoglia e cercare sul proprio pc l'immagine da utilizzare come nuovo logo,
una volta selezionata l'immagine cliccare su Upload e l'immagine verra caricata;
ora cliccare su Save Changes,
Tornando al sito e premendo il pulsante Aggiorna del broprio browser, si potrà vedere che il logo è stato impostato.
Passo 10: Modificare lo stile del proprio sito
Lo stile di base di Plone (cioè ad esempio i colori) potrebbe non essere quello desiderato; ma è possibile cambiarlo, agendo sui fogli di stile (CSS).
Cliccare sul link Configurazione del sito,
successivamente cliccare su "Interfaccia di gestione Zope"
cliccare su "portal_skins",
poi su "plone_styles",
e adesso selezionare "base.css (Plone Base Elements CSS)",
si aprirà una schermata con il codice CSS di base del sito, cliccare sul pulsante Customize,
adesso è possibile modificare il codice,
Se si vuole modificare il colore dello sfondo del proprio sito, è necessario innanzi tutto scegliere il nuovo colore da sostituire. Dato che si sta modificando un codice CSS è necessario che il colore scelto venga scritto in esadecimale. I colori in esadecimale si possono trovare facilmente su manuali per l'html o il css o più
semplicemente sul web; ecco un aiuto preso dal web http://it.wikipedia.org/wiki/Aiuto:Colori.
Una volta scelto il colore, copiare il suo valore esadecimale (per esempio questo tipo di azzurrino #A2B7AE).
Adesso tornare alla pagina CSS che si stava modificando e sotto il tag "body", nella voce "background-color:" sostituire a "&dtml-backgroundColor;" il valore esadecimale del colore copiato in precedenza.
sostituire ->
infine cliccare su Save Changes
adesso cliccare sul primo link presente nel percorso indicato nella parte superiore della pagina, in modo da tornare nella pagina precedente
poi su --Portal_css--,
e infine su Save.
Tornare ora all'interfaccia di Plone (come già descritto, vedere il Passo 6) e premere il pulsante Aggiorna del proprio browser.
Il nuovo colore di sfondo è stato impostato.
Per chi desidera di più...
Inserire il calendario Gmail in home page
Per inserire un calendario Gmail in home page è necessario creare un riquadro che lo contenga. Per far ciò, dobbiamo creare un nuovo modello di riquadro che contenga ciò che desideriamo.
Creare un modello di riquadro
Cliccare sul link "Configurazione del sito",
si aprirà la schermata con tutte le configurazioni; cliccare su "Interfaccia di gestione Zope",
successivamente cliccare su "portal_skins (Controls skin behaviour (search order etc))",
e poi su "custom".
Ora apparirà una schermata che contiene tutti i file che sono stati modificati fin ora, sulla destra aprire il menù a tendina, selezionare "Page Template" e cliccare sul pulsante Add:
si aprirà una pagina con dei campi, nel campo "Id" scrivere il nome del proprio "modello", per esempio "Calend"; successivamente cliccare su Add:
si nota che nella lista dei file modificati fin ora è adesso apparso anche il modello appena creato, e cliccando su di esso,
apparirà un pannello con del codice html:
eliminarlo e scrivere questo codice:
<div metal:define-macro="portlet"> </div>
Tra i due tag inserire il codice del calendario Gmail che si trova sul proprio account Google (vedere il Passo 7):
Per integrare meglio (graficamente) il calendario con il proprio sito, cercare nel codice appena inserito il testo "bgcolor=" (che sarà presente solo se i colori del proprio calendario Gmail sono stati precedentemente customizzati) e al posto del codice esadecimale presente inserire il codice del colore che si è precedentemente impostato come sfondo senza la presenza del cancelletto "#", in questo caso il colore è #A2B7AE (vedere il Passo 10)
->
Inoltre, sarà utile ridurre le dimensioni del calendario, in modo che non occupi una porzione troppo grande dello schermo. Per far ciò, modificare all'interno del codice del calendario i due parametri width="x" ed height="x", corrispondenti rispettivamente alla larghezza e all'altezza (ad esempio, width="450" height="350").
Ora cliccare il pulsante Save Changes:
Adesso è necessario tornare al proprio sito per inserire il riquadro che conterrà il calendario.
Per far ciò, cliccare sul primo dei link presenti nella barra in alto,
ora cliccare sul tab View.
Cliccare sul link "Gestione dei riquadri" in home page:
A questo punto si aprirà la schermata che permette di gestire i riquadri; selezionare dal menù a tendina "Aggiungi riquadro..." l'opzione "Classic Portlet", si aprirà così una pagina che permette di aggiungere un riquadro classico.
Nel campo "Id" inserire il nome del modello creato precedentemente, in questo caso "Calend", successivamente cliccare su Conferma le modifiche
Si può notare che il nuovo riquadro è apparso tra i riquadri già esistenti.
A questo punto il riquadro "Calendario" che contiene il calendario di Plone non è più necessario, può anche essere eliminato, cliccando sulla crocetta rossa in alto a destra nel suo box.
Ora cliccare su Save setting
e infine sul link "Torna" che si trova sotto il titolo della schermata.
Il calendario è apparso.
Cliccando sul link "Esci" in alto a destra, possiamo ora vedere come apparirà il sito ai visitatori:
Credits
Questo documento è stato realizzato da:
- Marianna Laudonia
- Alice Narduzzo
Hanno contribuito:
- Ambra Zoia
- Enrico Barra
- Andrea Cannizzaro