Document Actions

Come costruire il proprio sito in 10 passi?

Note: Return to tutorial view.

Una semplice guida in 10 passi per costruire un sito web personalizzato utilizzando gli strumenti e le potenzialità del CMS free Plone.

Passo 1: Effettuare il log-in

Plone è un CMS molto dinamico. Come muoversi per strutturare un sito completo in pochi passi? Prima di tutto, è necessario autenticarsi.

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?

Fine1.png

 

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.

1.1

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.

1.2

Una volta effettuato il login, comparirà nella barra dell'utente il proprio nome utente e il sistema ci riconoscerà come amministratori (in questo caso):

1.3

 

Passo 2: La home page

La home page è la pagina iniziale del proprio sito, che dà ai visitatori una prima indicazione sui suoi contenuti e scopi e per questo è molto importante.

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":

2.1
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:

2.2

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.

2.3

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,

2.3.1

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:

2.3.2

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:

 

2.3.3

 

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:

2.3.4

 

Una volta scelte le impostazioni preferite (in questo caso allineamento a sinistra), cliccare su Ok:

 

2.3.5

 

L'immagine è così stata inserita nella pagina, se non si desidera effettuare altre modifiche all'interno di essa, premere il pulsante Conferma le modifiche:

 

2.3.6

 

La pagina è stata creata e viene aggiunta come nuovo elemento nella barra di navigazione.
2.4 

  

          N.B. Ogni elemento, appena viene creato, si trova nello stato "Privato";
          2.5
          se si desidera rendere visibile l'elemento a tutti i navigatori, selezionare dal menù Stato l'opzione "Pubblica".
          2.6
          Adesso l'elemento è nello stato "Pubblicato" e quindi visibile a tutti i navigatori.
          2.7

 

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,

2.8

successivamente selezionare dal menù Vista l'opzione "Scegli l'elemento da usare come vista predefinita...".


2.9
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.


2.10
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,
2.11


selezionare dal menù Azioni l'opzione "Elimina".


2.12
Verrà chiesta una conferma, cliccare quindi nuovamente su "Elimina".


2.13

 

Passo 3: Creare sezioni e gerarchie di cartelle

È molto semplice creare gerarchie di cartelle e sottocartelle, che andranno a formare automaticamente l'albero di navigazione del sito.

Per creare una nuova sezione, selezionare dal menù Aggiungi nuovo elemento l'opzione "Cartella".
3.1
Si aprirà una schermata che permette l'inserimento del titolo della propria sezione (per esempio "Chi siamo"), e una breva descrizione di essa.
3.2


Una volta inseriti titolo e descrizione, premere sul pulsante Conferma le modifiche.


3.3
La sezione è stata creata e viene aggiunta alla barra di navigazione.


3.4


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,


3.5
Selezionare Impostazioni e spuntare "Ometti dalla navigazione".


3.6
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.

om_nav.jpg



Gli altri elementi che Plone crea di default, come Events e News, se non necessari posso essere eliminati come descritto nella sezione Passo 2.

3.8

 

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.

3.9


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,


3.13

si aprirà una finestra,


3.14

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)


3.15

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.
3.17

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.


3.19

Passo 4: Creare una sezione Prodotti

Il proprio sito potrà presentare varie sezioni; a titolo di esempio pensiamo ad un sito in cui si propongono prodotti hi-tech.

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.


4.1


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"),
4.2

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",


4.3
Cliccare su Sfoglia e cercare l'immagine sul proprio pc,
4.4

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.


4.5
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,


4.6

è 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:


4.9

spuntarla, e cliccare su Ok.


4.10

L'immagine è stata inserita nel testo.

Una volta conclusa la creazione delle caratteristiche del prodotto e l'inserimento immagine cliccare su Conferma le modifiche.


4.11

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",

4.11bis 

spuntare la pagina che contiene la descrizione del prodotto e premere sul pulsante Conferma le modifiche.

4.11bis2
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:,


4.13
selezionare dal menù Vista l'opzione "Vista provini",


4.14

si otterrà una visualizzazione dei prodotti molto suggestiva.

 

4.15

 

 

 

Passo 5: Creare un riquadro per le news

Si possono creare vari box contenenti informazioni importanti, che verranno visualizzati a destra o a sinistra delle pagine del sito.

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.

5.1

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".

5.2
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.

5.3


Infine premere sul pulsante Conferma le modifiche.

Ripetere lo stesso procedimento ogni volta che si vuole creare una notizia.

5.4

 

Tornando alla home page, sempre cliccando sul logo, si potrà notare che adesso è visibile un riquadro Ultime notizie,


5.5

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,
5.6

si aprirà una schermata che permette d'inserire o modificare uno o più riquadri nella parte destra o sinistra del proprio sito,


5.7

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.
5.8

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.


5.9

Per tornare alla home page è sufficiente cliccare sul link "Torna" appena sotto il titolo del pannello. 

Passo 6: Aggiungere video

Plone permette di integrare nelle proprie pagine web dei video, grazie al loro codice html.

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"),


6_1.jpg


Premere il tab Modifica e posizionarsi nel Testo del documento,


6_2.jpg


nella barra degli strumenti dell'editor c'è un'icona "HTML", cliccare su di essa,


6_3.jpg


e apparirà il codice html


6_4.jpg

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,


6_8.jpg
si aprirà una pagina che contiene varie impostazioni del sito Plone, da qui selezionare "Filtri HTML",
6_9.jpg


ora si possono visualizzare tutti i tag considerati pericolosi, nella sezione Tag pericolose spuntare "embed" e "object" e "clikkare" sul pulsante Removed selected items,


6_10.jpg


a questo punto "object" apparirà nella sezione Tag eliminate,


6_11.jpg


spuntarlo nuovamente, aggiungendo anche la spunta a "param" e premere sul pulsante Removed selected items,


6_12.jpg


adesso i tre tag non sono più presenti nell'elenco dei pericolosi, confermare le modifiche premendo sul pulsante Conferma le modifiche.


6_13.jpg
La configurazione ancora non è completa, manca un piccolo passaggio.

Sulla destra della pagina, nel riquadro Configurazione del portale, selezionare "Interfaccia di gestione Zope",
6_14.jpg


si aprirà una pagina contenente tutte la proprieta di un sito Plone, cliccare sul link "portal_transforms",


6_15.jpg


ora cliccare sul link "safe_html",


6_16.jpg


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,


6_17.jpg


successivamente cliccare su Invia richiesta.


6_18.jpg


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),


6_19.jpg


successivamente cliccare sul tab View.


6_20.jpg

Adesso è necessario posizionarsi nella pagina  in cui è stato inserito il video (in questo caso nella pagina "Red-Tech"), accedere al pannello di modifica,


6_22.jpg


infine cliccare Conferma le modifiche.


6_23.jpg
Ora, una volta premuto sul pulsante Aggiorna del proprio browser, il video funzionerà correttamente.


6_24.jpg

Passo 7: Integrare servizi di Google sul proprio sito

Google offre molti sevizi che si possono integrare nel proprio sito internet, ne prenderemo in esame tre tra i più interessanti e utili.

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).

7_1.jpg

 

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)


7_2.jpg

 

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.

7_3.jpg

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


7_4.jpg
successivamente cliccare sull'opzione "Sito",


7_5.jpg
e incollare il codice copiato precedentemente da Google nella sezione JavaScript per il supporto alle statistiche web.


7_6.jpg

 

Confermare cliccando sul pulsante Conferma le modifiche.

Per tornare all'interfaccia del sito cliccare su "Portale" nella barra in alto intitolata Tu sei qui:

7_7.jpg

 

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).

7_8.jpg

E infine cliccare su Conferma le modifiche.

Il calendario è stato importato.

7_9.jpg

Passo 8: La collaborazione

Con Plone è possibile condividere la gestione del proprio sito con uno o più collaboratori, ai quali assegnare compiti specifici o generali.

È 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,


8_1.jpg


successivamente cliccare su "Posta",


8_2.jpg


si aprirà un modulo da compilare. Dopo averlo compilato spostarsi nella sezione "Mittente",


8_3.jpg


compilare anch'essa e cliccare sul tasto Conferma le modifiche.


8_4.jpg

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",
8_5.jpg
successivamente cliccare sul pulsante Aggiungi un nuovo utente,


8_6.jpg
si aprirà una schermata con un modulo da compilare, una volta inseriti tutti i dati cliccare sul tasto Conferma l'iscrizione.
8_7.jpg
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

 

8_8.jpg

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

Personalizzare il proprio sito Plone è molto semplice, la prima operazione da fare è inserire il proprio logo in modo che appaia in alto a sinistra in tutte le pagine.

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,


9_1.jpg
successivamente cliccare su "Interfaccia di gestione Zope"


9_2.jpg
cliccare su "portal_skins",


9_3.jpg
poi su "plone_images",


9_4.jpg
e adesso selezionare "logo.jpg (Plone)",


9_5.jpg


si aprirà una schermata con il logo attuale di Plone, cliccare sul pulsante Customize,


9_6.jpg
adesso cliccare su Sfoglia e cercare sul proprio pc l'immagine da utilizzare come nuovo logo,


9_7.jpg
una volta selezionata l'immagine cliccare su Upload e l'immagine verra caricata;
9_8.jpg
ora cliccare su Save Changes,


9_9.jpg 

Tornando al sito e premendo il pulsante Aggiorna del broprio browser, si potrà vedere che il logo è stato impostato.

9_10.jpg

Passo 10: Modificare lo stile del proprio sito

Questa ultima fase è un po' più complicata, ma permette di modificare l'intero layout del proprio sito. Prendiamo ad esempio la modifica del colore di sfondo.

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,


9_1.jpg
successivamente cliccare su "Interfaccia di gestione Zope"


9_2.jpg
cliccare su "portal_skins",


9_3.jpg
poi su "plone_styles",

 

10_1.jpg

e adesso selezionare "base.css (Plone Base Elements CSS)",

10_2.jpg


si aprirà una schermata con il codice CSS di base del sito, cliccare sul pulsante Customize,


10_3.jpg


adesso è possibile modificare il codice,

10_4.jpg
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.


10_5.jpgsostituire ->   10_6.jpg


infine cliccare su Save Changes


10_7.jpg
adesso cliccare sul primo link presente nel percorso indicato nella parte superiore della pagina, in modo da tornare nella pagina precedente


10_8.jpg

 

poi su --Portal_css--,


10_9.jpg

e infine su Save.


10_10.jpg

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.

10_11.jpg

Per chi desidera di più...

Operazioni, leggermente più complesse, per chi si sente pronto a fare un passo in avanti per personalizzare ulteriormente il proprio sito.

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",


11_0.jpg

si aprirà la schermata con tutte le configurazioni; cliccare su "Interfaccia di gestione Zope",

11_01.jpg

successivamente cliccare su "portal_skins (Controls skin behaviour (search order etc))",

9_3.jpg


e poi su "custom".

 

11_02.jpg

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:
11_04.jpg


si aprirà una pagina con dei campi, nel campo "Id" scrivere il nome del proprio "modello", per esempio "Calend"; successivamente cliccare su Add:


11_05.jpg
si nota che nella lista dei file modificati fin ora è adesso apparso anche il modello appena creato, e cliccando su di esso,

11_06.jpg

apparirà un pannello con del codice html:

 

11_07.jpg


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):

   11_9bis.jpg

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)
11_010.jpg      ->      11_010bis.jpg

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:


11_011.jpg

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,

11_012.jpg

ora cliccare sul tab View.


11_013.jpg

Cliccare sul link "Gestione dei riquadri" in home page:

 

11_1.jpg

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

11_3.jpg
Si può notare che il nuovo riquadro è apparso tra i riquadri già esistenti.

11_4.jpg


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

11_5.jpg

e infine sul link "Torna" che si trova sotto il titolo della schermata.

Il calendario è apparso.

Fine.png

Cliccando sul link "Esci" in alto a destra, possiamo ora vedere come apparirà il sito ai visitatori:

 

Fine1.png

Credits

Autori, provenienza e altri dati su questo documento.

Questo documento è stato realizzato da:

  • Marianna Laudonia
  • Alice Narduzzo

Hanno contribuito:

  • Ambra Zoia
  • Enrico Barra
  • Andrea Cannizzaro