Profilie template siti web

1

Profili e template per siti Web 2.0

a basso costo per le ONG1

Fabrizio Maggioni

Riassunto

Il presente articolo è dedicato alla presentazione di template di siti web 2.0 a basso costo

per le ONG, realizzati interamente con strumenti e applicazioni online (SaaS). Nella

prima sezione verranno individuati dei profili tipici di siti web per ONG in base ai quali

realizzare i template. Nella seconda sezione saranno presentati i prototipi costruiti, con

particolare enfasi sull’analisi critica degli strumenti e dei servizi online utilizzati.

1 Questo documento è estratto dalla tesi di laurea magistrale in Teoria e tecnologia della comunicazione di

Fabrizio Maggioni: "Realizzazione di template di siti web a basso costo per le Organizzazioni Non Governative", Università degli studi di Milano Bicocca, relatore: prof. Roberto Polillo A.A. 2008/2009. Il

testo di questo documento è reso disponibile con licenza Creative Commons “attribuzione, non commerciale, condividi allo stesso modo”: http://creativecommons.org/licenses/by-‐nc-‐

sa/2.5/it/legalcode. La licenza non si estende alle immagini (screen shot dei siti Web citati, e altro), i cui diritti sono in capo ai rispettivi proprietari.

2

Indice

1. Diversi profili per i siti delle ONG italiane pag. 3

1.1 Obiettivi della ricerca pag. 3

1.2 Metodologia dell’analisi funzionale pag. 4

1.3 Risultati: tre profili per i siti delle ONG italiane pag. 6

1.4 Migliorare l’interattività dei siti delle ONG grazie al Web 2.0 pag. 19

2. I template di siti web a basso costo per le ONG pag. 23

2.1 Introduzione e metodologia pag. 23

2.2 I template pag. 25

2.2.1 Template base: piattaforma Weebly pag. 26

2.2.2 Template completo: piattaforma Wordpress pag. 34

2.2.3 Template avanzato: piattaforma Webs + Ning pag. 41

3

1. Diversi profili per i siti delle ONG italiane

1.1 Obiettivi della ricerca

Dall’analisi di Donato Francavilla2 è emerso come i siti delle ONG italiane risultino

carenti sotto diversi aspetti e particolarmente dal punto di vista delle funzionalità: nella

maggior parte di essi mancano gli strumenti che permettono all’utente di interagire con

l’organizzazione direttamente attraverso il sito, ad esempio effettuando donazioni online,

iscrivendosi a newsletter periodiche o RSS feed e interagendo con i profili dell’ONG su

diverse social network.

Partendo da queste considerazioni, nella presente sezione verrà approfondita l’analisi

degli aspetti funzionali dei siti delle ONG italiane. Non sono disponibili in letteratura

ricerche su questo argomento, essendo il campo di interesse molto ristretto e specifico.

Per questo motivo è stata effettuata dall’autore di questa tesi, in collaborazione con

Alessio Gattuso, una breve analisi qualitativa, il cui scopo è quello di individuare i diversi

livelli di complessità funzionale ai quali è possibile ricondurre, in maniera

approssimativa, i siti analizzati. I profili così ricavati, caratterizzati ciascuno dal proprio

set tipico di strumenti interattivi, saranno quindi utilizzati per guidare la progettazione di

template di siti per ONG, costruiti sfruttando le opportunità offerte dai servizi in rete e dal

cloud computing, al minor costo possibile. A ciascun livello, corrispondente a particolari

esigenze per una ONG, sarà associato un template di simile complessità.

2 Francavilla, Donato, Analisi dei siti web delle ONG italiane, tesi di laurea in Teoria e Tecnologia della

Comunicazione, Università Statale di Milano Bicocca, a.a. 2008/2009.

4

1.2 Metodologia dell’analisi funzionale

I siti di cui sono state analizzate le funzionalità sono quelli dell’elenco delle ONG idonee

(http://www.cooperazioneallosviluppo.esteri.it/pdgcs/italiano/Partner/ONG/ONG.asp).

Per ciascun sito è stato stilato un elenco degli strumenti interattivi presenti e, se

necessario, sono state aggiunte alcune considerazioni generali in merito al loro utilizzo e

alla qualità del sito e delle informazioni in esso presenti.

Sono stati considerati come interattivi tutti quegli strumenti che permettono all’utente di

interagire direttamente con l’organizzazione e con gli altri utenti del sito; ad esempio la

funzionalità di donazioni online, il blog, il forum e i diversi form per l’invio di messaggi,

per l’iscrizione alla newsletter o per le offerte di collaborazione.

Inoltre, sono stati inclusi nella definizione anche gli strumenti che consentono

all’organizzazione di collegare ed integrare il sito con le principali social network

(Facebook, Twitter, Flickr e molti altri), sfruttando le loro funzionalità e la loro capacità

di connettere reti di persone anche molto eterogenee tra loro. Fanno parte di questa

categoria strumenti quali i pulsanti per la condivisione dei contenuti della pagina

visualizzata (share button) e i social button, collegamenti diretti dal sito ai profili

dell’organizzazione sulle diverse social network.

Infine, per meglio caratterizzare anche i siti più poveri dal punto di vista interattivo,

accanto agli strumenti sopra descritti è stata valutata anche la presenza di alcune

funzionalità tipiche di un sito statico, ad esempio la photogallery, la videogallery, il

calendario degli eventi e la presenza di mappe cliccabili per la localizzazione di

informazioni e per i contatti.

Alla pagina seguente è riportato un esempio di risultato dell’analisi di un sito di media-

bassa complessità funzionale:

5

AIFO -‐ Associazione Italiana Amici di Raoul Follereau

www.aifo.it

Funzionalità presenti:

Pagina link;

Search;

Donazione online (tramite Vpos di Banca popolare Etica);

Photogallery;

Videogallery.

Osservazioni:

versione in inglese;

home = news + link veloci;

approfondimenti utili su argomenti correlati;

testi molto lunghi non adatti al web e non introdotti da adeguati abstract.

Come si può vedere nell’esempio sopra riportato, per motivi di tempo e per il fatto che

questa valutazione, per quanto utile, non è centrale rispetto all’obiettivo di questa tesi,

l’analisi è stata effettuata in modo molto veloce, con metodi qualitativi e soggettivi.

Riteniamo comunque che questo approccio risulti adeguato alla raccolta delle

informazioni necessarie per il presente lavoro, il cui scopo principale è quello di

individuare dei profili in qualche modo tipici in relazione alle necessità delle ONG

italiane, e costruire poi dei template che mostrino come i siti corrispondenti a questi

profili possano essere realizzati a basso costo con strumenti e servizi disponibili in rete.

In particolare, l’obiettivo di questa analisi è l’individuazione di profili con diversi livelli

di complessità funzionale nella presenza online delle ONG italiane. Ciascun profilo sarà

definito tramite il set tipico di strumenti interattivi che i siti mettono a disposizione

dell’utente e rappresenterà la base di partenza per progettare il relativo template.

6

1.3 Risultati: tre profili per i siti delle ONG italiane

Per ragioni di spazio non è qui possibile riportare tutte le analisi dei siti dell’elenco; ci si

limiterà dunque ad esporre le conclusioni di questa breve ricerca qualitativa. Dopo aver

raccolto ed analizzato le funzionalità dei siti, nel modo esemplificato alla pagina

precedente, sono stati distinti e caratterizzati i diversi approcci alla presenza web delle

ONG, in termini di numero e complessità delle funzioni interattive offerte all’utente,

individuando tre livelli di complessità funzionale. In ordine crescente:

siti statici;

siti interattivi;

siti sociali.

Questi tre profili rappresentano una categorizzazione approssimativa dei siti delle ONG

italiane. La denominazione dei tre livelli è totalmente arbitraria. Di seguito saranno

descritti i profili corrispondenti e per ognuno di essi si fornirà qualche esempio; una

tabella riassuntiva chiuderà questa rassegna.

Profilo 1: siti statici

Il livello di complessità più basso: in questa categoria rientrano tutti quei siti

sostanzialmente privi di funzionalità interattive. Gli unici strumenti interattivi

rintracciabili anche a questo livello, presenti quindi nella maggior parte dei siti analizzati,

sono le mappe interattive e il motore di ricerca interno.

Risultano invece assenti molte delle funzionalità desiderabili: in primo luogo le donazioni

online e l’integrazione con profili su diverse social network, quindi la presenza di form

per lasciare messaggi in modo facile e veloce o per presentare online proposte di

collaborazione e lavoro volontario. In siti di questo tipo è comunque presente una sezione

per le donazioni, ma consiste semplicemente nell’elenco dei modi per donare una somma

di denaro tramite i canali tradizionali, ad esempio bonifico bancario o bollettino postale

(vedi le figure 1.1 e 1.2 per le sezioni dedicate alle donazioni e al reclutamento di

volontari dell’ONG Movimento Africa ‘70).

7

Figura 1.1 La tipica sezione dedicata alle donazioni in un sito statico. Fonte: http://www.africa70.org, 04/01/2010.

Figura 1.2 La tipica sezione per il reclutamento dei volontari in un sito statico. Fonte: http://www.africa70.org, 13/01/2010.

8

A dispetto della scarsità di funzionalità interattive, questi siti, come quasi tutti quelli

analizzati, si distinguono per la grande ricchezza di contenuti, sia testuali sia

multimediali, principalmente immagini e documenti scaricabili in formato pdf. Spesso

questi contenuti sono organizzati mediante un’architettura dell’informazione scadente e

ambigua e non sono redatti in un formato adatto al web, presentandosi come lunghi testi

non adeguatamente suddivisi in paragrafi e non introdotti da abstract. La figura

sottostante (figura 1.3) ritrae una pagina di testo tipica di un sito che non cura

adeguatamente la presentazione dei contenuti, tratta da www.iahm.org.

Figura 1.3 Esempio di testo non adatto al web, troppo lungo e non introdotto da adeguati abstract. Fonte: www.iahms.org, 13/01/2010

9

L’approccio comunicativo tipico di questa categoria di siti è dunque quello del sito

vetrina, caratterizzato dalla presentazione delle informazioni su pagine statiche, con

l’aggiunta di immagini, eventualmente raccolte in una photogallery, di video, di link ad

altri siti associati e di documenti scaricabili. Lo scopo di un approccio di questo tipo è

quello di aumentare la visibilità dell’organizzazione sul medium Internet, senza

particolare attenzione per gli aspetti più interattivi e di amplificazione sociale che possono

rendere il web un mezzo di comunicazione unico e molto redditizio, in termini sia

economici che di reputazione.

Si propone qui sotto un breve elenco di siti web che possono essere considerati

rappresentanti tipici di questo livello di complessità funzionale:

www.abcsverona.it; www.africa70.org; www.africamission.org; www.puntoapunto.org; www.iahm.org; www.icei.it; www.icsitalia.org; www.lvia.it; www.nuovispazialservire.it.

Per chiudere questa rassegna sui siti statici, viene riportata una tipica home page di un sito

di questo tipo, appartenente all’ONG Azione per un Mondo Unito (vedi figura 1.4 alla

pagina successiva). Le varie sezioni raggiungibili dalla home, pur essendo molto ricche di

contenuti, risultano composte solo da pagine statiche.

10

Figura 1.4 La home page del sito dell’ONG Azione per un Mondo Unito. Fonte: http://www.azionemondounito.org, 04/01/2010.

Profilo 2: siti interattivi

Questo livello di complessità funzionale rappresenta un’evoluzione del sito statico, con

l’aggiunta di alcuni utili strumenti interattivi. Per quanto riguarda la quantità e il tipo di

contenuti, questi siti rimangono sugli standard di quelli del primo livello, anche qui

spesso con problemi di architettura delle informazioni e di impaginazione. La differenza

fondamentale è invece data dalla presenza di un buon numero di funzionalità aggiuntive.

Tipicamente si possono trovare, oltre a quelli già presenti nei siti statici, i seguenti

strumenti:

strumenti per donazioni online, con transazioni gestite da terze parti (solitamente

Paypal o Vpos di Banca Etica); in figura 1.5 è riportato un esempio di pagina

dedicata alle donazioni online, dell’organizzazione OAF-I;

form per inviare messaggi all’ONG o per sottoporle offerte di collaborazione;

feed RSS per la sezione dedicata alle notizie;

11

share button, per permettere all’utente di condividere in modo facile e veloce il

contenuto della pagina visualizzata;

area riservata a collaboratori e volontari dell’organizzazione.

Figura 1.5 Il pulsante per le donazioni online, messo a disposizione da Paypal, su un tipico sito interattivo. Fonte: www.oafi.org, 13/01/2010

Come già osservato in precedenza, questo elenco rappresenta soltanto

un’approssimazione degli strumenti tipici di questo grado di complessità funzionale. In

realtà, molti dei siti analizzati si collocano su un livello intermedio tra questo e quello che

è stato definito come sito statico, possedendo soltanto alcune delle caratteristiche

interattive sopra elencate. Il sito interattivo offre dunque all’utente un buon livello di

interattività, elevandosi da semplice vetrina per l’organizzazione a luogo di incontro e

scambio con potenziali donatori e collaboratori.

L’immagine alla pagina successiva (figura 1.6) ritrae la tipica home page di un sito

interattivo, dell’organizzazione AIFO. In alto a destra, il collegamento alla sezione di

donazioni online. Nella figura seguente (figura 1.7), tratta dal sito dell’ONG Ibo Italia,

viene invece mostrato un esempio di form per il reclutamento online di volontari.

12

Figura 1.6 Home page tipica di un sito interattivo, il sito dell’ONG AIFO. Fonte: http://www.aifo.it, 04/01/2010

Figura 1.7 Esempio di form per il reclutamento online di volontari. Fonte: http://www.iboitalia.org, 04/01/2010.

13

Tuttavia, si rileva in questi siti una mancanza di attenzione per quanto riguarda le nuove

possibilità offerte dagli strumenti del Web 2.0: benché vengano utilizzati gli share button,

che offrono la possibilità all’utente di aumentare la visibilità dell’organizzazione sulle

principali social network, l’ONG solitamente non possiede, a questo livello, profili propri

su tali reti, collegati ed integrati con il sito web. Tale accorgimento, tipico invece delle

charity statunitensi, è infatti considerato in questa sede come il requisito per il passaggio

al livello di complessità funzionale successivo.



www.aispo.org; www.actionaid.it; www.aifo.it; www.icu.it; www.oafi.org.

Profilo 3: siti sociali

La grande maggioranza dei siti delle ONG italiane esaminati si situa nei primi due livelli

di complessità funzionale, oppure su posizioni intermedie; sono state individuate poche

organizzazioni che cercano di trarre beneficio anche dagli strumenti del Web 2.0, come i

profili sulle più popolari social network. Ancora più rari sono i casi in cui questi profili

sono integrati correttamente e coerentemente con il sito web principale. I siti di quelle

ONG che riescono a garantire questo tipo di presenza web a 360 gradi, offrendo nel

contempo tutte o quasi le funzionalità proprie di un sito interattivo, rientrano nell’ultimo

livello di complessità funzionale, qui definito come sito sociale.

Il set di funzionalità tipico per quest’ultimo livello di complessità comprende, oltre a

quelle già osservate per i livelli precedenti:

profili sulle più popolari social network, come Facebook, Twitter, Youtube e

Flickr, collegati con il sito istituzionale e da lì accessibili attraverso social button;

integrazione delle informazioni presenti sui diversi profili, ad esempio tramite

l’importazione nel sito delle immagini caricate su Flickr e i video di Youtube;

14

L’immagine sottostante (figura 1.8) offre un esempio di come questi social button siano

integrati nella home page del sito italiano di AMREF. Le figure successive, 1.9 e 1.10,

mostrano invece i profili di Amref Italia su Facebook e Youtube.

Oltre ad offrire queste funzionalità aggiuntive, i siti sociali presentano un sistema di

donazioni online più articolato rispetto ai precedenti livelli, che non si limita alla

donazione libera e diretta, ma comprende anche la possibilità di donare per specifici

progetti o addirittura per specifici materiali necessari per la loro realizzazione (si veda la

figura 1.11 per un esempio di pagina per le donazioni di questo tipo, tratta dal sito

dell’associazione Soleterre). Si tratta di un modo molto efficace per rendere l’utente

consapevole della destinazione dei fondi di una potenziale donazione, una variabile

indicata anche da Estes e Nielsen come fondamentale per convincere i potenziali donatori

a sostenere l’organizzazione3.

Figura 1.8 Home page del sito italiano di AMREF, ottimo esempio di sito sociale. Fonte: http://www.amref.it, 04/01/2010

3 Estes, Janelle; Nielsen, Jakob, Donation Usability, Fremont, Norman Nielsen Group, 2009, pagg. 11-‐13 .

15

Figura 1.9 La pagina Facebook di Amref Italia. Fonte: http://www.facebook.com/pages/AMREF-‐Italia, 13/01/2010.

Figure 1.10 Il canale Youtube di Amref Italia. Fonte: www.youtube.com/user/amrefitalia, 13/01/2010.

16

Figura 1.11 La sezione dedicata alle donazioni del sito dell’associazione Soleterre. Fonte: http://www.soleterre.it, 04/01/10

Un’altra importante differenza rispetto ai siti appartenenti al livello precedente riguarda la

gestione dell’area riservata, una sorta di intranet per l’ONG. Per i siti interattivi è stata

riscontrata la presenza sul sito di pagine accessibili soltanto agli utenti autorizzati. I siti

sociali affrontano la questione in modo diverso, ovvero mediante l’utilizzo di una social

network apposita, aperta soltanto ai membri, nella quale vengono caricati, gestiti ed

utilizzati i materiali elettronici relativi all’organizzazione. Alcune ONG impiegano anche

più di una social network, ciascuna relativa a una sezione territoriale dell’organizzazione

oppure a un particolare progetto, a volte parzialmente accessibili anche per utenti esterni.

Infine, l’analisi ha evidenziato come i siti che riescono a raggiungere questo livello di

eccellenza per le funzionalità interattive e l’approccio al Web 2.0 siano anche quelli con

l’architettura delle informazioni meglio organizzata e i contenuti testuali e multimediali

più fruibili, nonostante la mole di informazioni resti inalterata dai due livelli precedenti o

sia addirittura maggiore.

17



www.acra.it;

www.amref.it; www.emergency.it; www.manitese.it; www.savethechildren.it; www.soleterre.it;

www.wwf.it.

Non è un caso che la quasi totalità dei siti classificabili come sociali appartenga ad ONG

di grandi dimensioni, molto spesso divisioni nazionali di importanti organizzazioni con

sedi in tutto il mondo, come Amref, Emergency, Save the Children e il WWF. Non

mancano però esempi di ONG italiane meno conosciute che sono riuscite a realizzare siti

di questo livello, come Soleterre e Mani Tese.

Alla pagina successiva viene riportata una tabella riassuntiva dei set di strumenti

interattivi propri di ciascuna tipologia di sito sopra esaminata. La sezione proseguirà

quindi con la presentazione delle funzionalità dei template che si è deciso di associare ad

ogni livello.

18

SITI STATICI

SITI INTERATTIVI

SITI SOCIALI

Pagine statiche x x x Calendario eventi x x x Pagina link x x x Photogallery x x x Videogallery x x x Download documenti

x x x

Mappe interattive x x x Motore di ricerca x x x Form iscrizione newsletter

-‐ x x

Donazioni dirette -‐ x x Slideshow -‐ x x Contact form -‐ x x Application form -‐ x x Blog -‐ x x Area riservata -‐ x1 x2 Feed RSS -‐ x x Share button -‐ x x Donazioni per progetto

-‐ -‐ x

Profili sulle social network e relativi social button

-‐ -‐ x

1 – Intranet generalista come area riservata

2 – Intranet generalista o specifica per progetto o per sede realizzata su social network linkata

Tabella 1.1 I diversi livelli di complessità funzionale individuati per i siti delle ONG italiane e i relativi set tipici di funzionalità presenti. La X marca la presenza dello strumento, indicato in riga, per il profilo indicato in colonna.

19

1.4 Migliorare l’interattività dei siti delle ONG grazie al Web 2.0

Anche se non sono disponibili precise ricerche in merito, si può ipotizzare che la scarsità

di funzionalità interattive riscontrata nella maggioranza dei siti delle ONG italiane sia

dovuta alle difficoltà che queste incontrano nell’implementarle, non avendo a

disposizione professionisti del settore tra i propri volontari e collaboratori e mancando dei

fondi necessari per rivolgersi ad agenzie specializzate. Si ricorda che queste

organizzazioni sono di tipo non-profit e che la maggior parte di esse realizza i propri

progetti con meno di 11 operatori contrattati4.

Realizzare un sito web interattivo è un’impresa non banale. Oltre a conoscere il codice

html e css, il web designer deve anche possedere competenze informatiche e di

programmazione di base, in linguaggio php e Java, al fine di poter implementare le

funzionalità necessarie, come i form. Anche l’utilizzo dei CMS, come Joomla o Drupal,

che semplifica di molto il compito, non è alla portata di tutti.

Negli ultimi anni la situazione è cambiata, grazie alla nascita e alla moltiplicazione sul

web di servizi online gratuiti, oppure organizzati secondo un modello di business

freemium, dedicati proprio all’implementazione nei siti web di molteplici funzionalità

interattive, tra cui tutte quelle desiderabili per una ONG. Una particolare categoria di

questi servizi, i site builder, è specificamente dedicata all’hosting e alla costruzione di

interi siti, realizzabili da chiunque possieda una minima conoscenza dell’uso del

computer, grazie ad un editor semplice ed intuitivo, che non richiede al designer di

manipolare codice html e css.

Sulla base di queste considerazioni, sono stati delineati tre nuovi profili che aggiungono

funzionalità interattive a quelli individuati in questa sezione (vedi tabella 1.2). La scelta

delle funzionalità da includere in ciascun profilo si basa:

sulla suddivisione in tre livelli di completezza e complessità crescenti,

corrispondenti ai profili dei siti reali delle ONG, individuati in questa sezione;

4 Fonte: Link 2007, rapporto Un mestiere difficile 2008, 2008, pag. 19.

20

sul lavoro di analisi di Magosso dei siti delle charity americane5, che indica come

di primaria importanza le funzionalità di donazione online e la connessione con le

più importanti social network;

su un’analisi esplorativa condotta da Alessio Gattuso sul web per individuare i

servizi online più economici e completi che permettano alle ONG di implementare

le funzionalità desiderate nei loro siti6; mediante questa ricerca sono emersi anche

servizi relativi a funzionalità non individuate nell’analisi presentata in questa

sezione.

Grazie all’utilizzo delle nuove applicazioni online sopra descritte, e di tecniche di mash-

up per aggiungere funzionalità da esse non fornite, sono stati successivamente costruiti tre

diversi template associati ai tre nuovi profili (vedi tabella 1.3 per un’anticipazione degli

strumenti con i quali sono stati realizzati). Nella sezione 2 si passerà alla descrizione di

questi template.

5 Magosso, Paolo, Il web 2.0 per le organizzazioni non-‐profit: best practice delle charity statunitensi, tesi di laurea in Teoria e Tecnologia della Comunicazione, Università Statale di Milano Bicocca, a.a. 2008/2009.

6 Gattuso, Alessio, Selezione di strumenti Web 2.0 per la realizzazione di siti web per Organizzazioni Non Governative, tesi di laurea in Teoria e Tecnologia della Comunicazione, Università Statale di Milano

Bicocca, a.a. 2008/2009.

21

PROFILO BASE

PROFILO

COMPLETO

PROFILO

AVANZATO

Pagine statiche x x x Calendario eventi x x x Pagina link x x x Photogallery x x x Videogallery x x x Download documenti

x x x

Mappe interattive x x x Motore di ricerca x x x Form iscrizione newsletter

x x x

Donazioni dirette x x x Slideshow x x x Contact form x x x Application form -‐ x x Blog x x x Area riservata -‐ x x Feed RSS x x x Share button x x x Donazioni per progetto

-‐ x x


x1 x2 x2

Embedded document (presentazioni, pubblicazioni)

-‐ x x

Videoconferencing3 -‐ -‐ x Audioconferencing3 -‐ -‐ x Document sharing3 -‐ -‐ x Desktop sharing3 -‐ -‐ x 1 – Pagina Facebook e canale Youtube 2 – Facebook, Youtube, Flickr e Twitter

3 – Funzionalità di online meeting destinate agli utenti interni dell’ONG e alla formazione Tabella 1.2 Le funzionalità incluse nei tre nuovi profili delineati per la costruzione dei template di siti per ONG con strumenti Web 2.0. Le “x” rosse indicano un’aggiunta di funzionalità rispetto al profilo corrispondente tra quelli individuati in questa sezione (vedi tabella 2.1).

22

TEMPLATE BASE (PROFILO BASE)

prototipoong.weebly.com

TEMPLATE COMPLETO (PROFILO COMPLETO) prototipoong.ilbello.com

TEMPLATE AVANZATO (PROFILO AVANZATO) prototipoong.webs.com

Pagine statiche Weebly Wordpress Webs

Calendario eventi Weebly (statico) Wordpress (statico) Webs

Pagina link Weebly (statica) Wordpress (statica) Webs

Photogallery Weebly Flickr Webs + Flickr

Videogallery Youtube Youtube Youtube

Download documenti

Weebly Wordpress Webs

Mappe interattive Google Maps Google Maps Google Maps

Motore di ricerca Google CSE Wordpress Google CSE

Form iscrizione newsletter

Form creator di Weebly

Zoho Creator Wufoo

Donazioni dirette Pulsanti Paypal Pulsanti Paypal Pulsanti Paypal

Slideshow Weebly Flickr Webs

Contact form Form creator di Weebly

Jotform Jotform

Application form -‐ Zoho Creator Zoho Creator

Blog Weebly Wordpress Webs

Area riservata -‐ Wordpress Ning Social Network

Feed RSS Weebly Wordpress Webs

Share button Widget addthis.com Widget addthis.com Widget addthis.com

Donazioni per progetto

-‐ Pulsanti Paypal Webs


Facebook e Youtube Facebook, Youtube, Flickr e Twitter

Facebook, Youtube, Flickr e Twitter

Embedded document (presentazioni, pubblicazioni)

-‐ ISSUU (pdf) e Slideshare (ppt)

ISSUU (pdf) e Slideshare (ppt)

Videoconferencing3 -‐ -‐ Dimdim

Audioconferencing3 -‐ -‐ Dimdim

Document sharing3 -‐ -‐ Dimdim

Desktop sharing3 -‐ -‐ Dimdim

Tabella 1.3 Gli strumenti con i quali sono stati costruiti i template associati ai tre profili delineati nella tabella alla pagina precedente. Tali strumenti saranno riepilogati anche all’inizio del paragrafo di descrizione di ciascun prototipo.

23

2. I template di siti web a basso costo per le ONG

2.1 Introduzione e metodologia

La presente sezione sarà dedicato alla descrizione dei template di siti web a basso costo,

realizzati interamente mediante strumenti e servizi reperiti in rete, per le ONG italiane

per la cooperazione allo sviluppo. In questa introduzione metodologica verrà brevemente

riassunto il percorso che ha portato alla creazione di questi prototipi. Successivamente

verranno elencati e descritti gli strumenti utilizzati, quindi si passerà all’analisi dettagliata

di ciascuno dei tre template.

Dopo aver individuato i profili tipici nei quali si declina la presenza sul web delle ONG

italiane (vedi sezione 1), sono state scelte le funzionalità base e quelle interattive da

inserire nei diversi prototipi, ordinati in base al livello di complessità funzionale. Per

l’implementazione di questi strumenti interattivi sono state utilizzate soltanto applicazioni

online offerte come servizi (SaaS), gratuitamente o secondo un modello di business

freemium. La scelta di questi strumenti è stata guidata dai risultati della ricerca

esplorativa effettuata da Gattuso per individuare e confrontare tra loro gli strumenti

ritenuti più adatti allo scopo. I risultati completi di questa ricerca e il confronto dettagliato

tra i vari servizi che forniscono questi strumenti possono essere consultati nell’elaborato

di Gattuso, Selezione di strumenti Web 2.0 per la realizzazione di siti web per

Organizzazioni Non Governative 7.

Il primo passo nella costruzione di ciascun template è stata la scelta di una piattaforma di

site building per la realizzazione delle pagine statiche e per l’hosting del prototipo su un

server web. Sono state utilizzate tutte le piattaforme individuate nella ricerca di Gattuso,

eccezion fatta per quelle che non garantivano sufficienti funzionalità nella versione

7 Gattuso, Alessio, Selezione di strumenti Web 2.0 per la realizzazione di siti web per Organizzazioni Non

Governative, tesi di laurea in Teoria e Tecnologia della Comunicazione, Università Statale di Milano Bicocca, a.a. 2008/2009.

24

gratuita. Tale scelta è stata motivata dalla volontà di mostrare pregi e difetti di ciascuna

piattaforma attraverso un prototipo concreto, interattivo e funzionante.

Le funzionalità interattive non garantite in modo adeguato dal site builder scelto sono

state realizzate mediante strumenti offerti da servizi esterni, anch’essi tutti

dettagliatamente descritti nell’elaborato di Gattuso. Infine tali widget sono stati

incorporati nel sito principale mediante l’embedding del codice html necessario. La figura

sottostante (figura 2.1) mostra lo schema di realizzazione dei template secondo questa

tecnica di mash-up, che vede il sito principale costantemente in contatto con i server sui

quali risiedono fisicamente gli strumenti e i widget realizzati esternamente al site builder.

Figura 2.1 Architettura di mash-‐up dei template presentati in questa sezione. Fonte: slide di Polillo, Roberto, Corso Web 2.0, Università degli Studi di Milano-‐Bicocca, a.a. 2009-‐2010 (rielaborazione personale).

25

2.2 I template

I prototipi di siti per ONG intendono rappresentare dei modelli di riferimento per quelle

organizzazioni che vogliono realizzare un sito interattivo, o migliorare il proprio, senza

avere a disposizione le conoscenze tecniche necessarie o le risorse per rivolgersi a

professionisti del settore. Pertanto, benché la scelta delle sezioni, dell’architettura

informativa e delle funzionalità interattive sia stata guidata dai lavori di ricerca

menzionati nei capitoli precedenti, essi devono essere considerati come semplici esempi,

dal valore puramente indicativo.

Lo scopo dei prototipi è quindi quello di mostrare le possibilità offerte dalle applicazioni

Web 2.0 di nuova generazione per la costruzione di siti interattivi mediante esempi

pratici, che siano anche il più possibile conformi alle reali necessità di organizzazioni di

questo tipo. I contenuti di tutti questi siti sono totalmente fittizi. Le immagini sono state

reperite in rete in modo casuale, ma conservando un legame con l’ambito di competenza

dei siti, la cooperazione allo sviluppo. I testi sono perlopiù sequenze di parole senza senso

(lorem ipsum), con valore puramente riempitivo. Tutti gli strumenti interattivi presenti

sono invece realmente funzionanti, in quanto l’obiettivo principale è proprio quello di

mostrare la loro realizzabilità.

Per ciascun template sarà innanzitutto presentato l’indirizzo web, quindi una tabella che

associa le funzionalità presenti agli strumenti e ai servizi utilizzati per implementarle.

Infine sarà descritta la piattaforma sfruttata per costruire la struttura portante del sito. La

sequenza dei prototipi (base, completo e avanzato) rispecchia la crescente complessità

funzionale rilevata per i profili descritti nella sezione precedente precedente, i quali a loro

volta corrispondono a particolari esigenze e possibilità delle ONG a cui appartengono.

Nelle tabelle iniziali, le funzionalità presenti in ciascun template saranno anche

confrontate con quelle del relativo profilo di partenza. Si può osservare da queste tabelle

la maggiore ricchezza funzionale dei prototipi costruiti grazie all’approccio cloud

computing rispetto ai profili individuati dall’analisi dei siti attuali delle ONG italiane.

Per la costruzione dei prototipi sono stati utilizzati soltanto servizi free o freemium nella

versione base, senza sostenere alcuna spesa. Ciò è stato possibile, in alcuni casi, soltanto

in quanto si tratta di semplici prototipi, privi di reali contenuti. Tutti gli aspetti relativi ai

26

costi da sostenere per realizzare siti simili a questi template, oppure versioni premium

degli stessi, saranno discussi nelle considerazioni finali di ciascun paragrafo, insieme ai

possibili scenari di utilizzo dei relativi prototipi.

2.2.1 Template base: piattaforma Weebly

http://www.prototipoong.weebly.com

Il template base è il più semplice dei prototipi dal punto di vista funzionale. Si tratta di un

sito simile a quelli definiti come statici nella sezione precedente, ma con importanti

aggiunte dal punto di vista funzionale: un blog, funzionalità base per le donazioni online,

semplici form collegati solo con la mail dell’amministratore e profili sulla social network

Facebook e sul più importante sito di condivisione di video, Youtube. Di seguito viene

riportata la tabella che riepiloga gli strumenti utilizzati per realizzare questo prototipo.

FUNZIONALITÀ PRESENTI

STRUMENTO UTILIZZATO

PROFILO DI PARTENZA: SITI STATICI

Pagine statiche Weebly X

Calendario eventi Weebly (pagina statica) X

Pagina link Weebly (pagina statica) X

Photogallery Weebly X

Videogallery Youtube X

Download documenti Weebly X

Mappe interattive Google maps X

Motore di ricerca Google custom search engine X

Form iscrizione newsletter Form creator di weebly Non presente

Donazioni dirette Pulsanti di Paypal Non presente

Slideshow Weebly Non presente

Contact form Form creator di weebly Non presente

Blog Weebly Non presente

Feed RSS Weebly Non presente

Share button Widget di addthis.com Non presente

Profili sulle social network Facebook e Youtube Non presente

Tabella 2.1 Le funzionalità presenti nel template base e gli strumenti utilizzati per realizzarle.

27

La piattaforma di site building utilizzata: Weebly

http://www.weebly.com

Weebly è un servizio online di site building molto intuitivo da utilizzare, basato sulla

metafora del drag-and-drop per la costruzione del layout delle pagine web (vedi figura

2.2).

Figura 2.2 Tipica schermata dell’editor di Weebly. La procedura per inserire un nuovo paragrafo con foto. Gli elementi vengono trascinati dalla barra superiore direttamente nel sito, presentato a tutta pagina.

Rispetto ai site builder utilizzati per i prototipi di complessità maggiore, Weebly si

distingue per semplicità di utilizzo e velocità di esecuzione dei comandi. Allo stesso

tempo però, Weebly non offre pagine specificamente dedicate a funzionalità interattive, a

parte il blog, non dà la possibilità all’amministratore di aggiungere e gestire membri del

sito o altre persone autorizzate ad aggiornarlo e non mette a disposizione template a due

colonne con sidebar fissa e personalizzabile. In realtà, grazie alle opzioni di

personalizzazione del layout delle singole pagine (elementi two-column-layout), sarebbe

possibile creare una struttura di questo tipo, ma soltanto con molte ore di lavoro

28

aggiuntivo e senza ottenere risultati paragonabili a quelli degli altri site builder. Inoltre, i

set di opzioni di gestione del sito e del blog sono decisamente limitati e poco

personalizzabili rispetto agli altri site builder. Pertanto, si è scelto di utilizzare Weebly per

la realizzazione del template più semplice, caratterizzato da una limitata presenza di

funzionalità interattive e privo di un’area riservata.

Un’altra limitazione di questo site builder riguarda la disponibilità di una sola lingua per

l’editor e la gestione del back office del sito: l’inglese. Una buona parte delle ONG non

opera in paesi anglofoni; questa lacuna potrebbe quindi rappresentare un serio fattore di

difficoltà per l’utilizzo di Weebly da parte di queste organizzazioni.

Come si può notare nei diversi screenshot riportati in questo paragrafo, l’impianto grafico

del sito è estremamente semplice. Ciò è dovuto principalmente alla carenza di contenuti

reali, soprattutto loghi e locandine, e alla scelta di un tema semplice. Si ricorda che

l’obiettivo in questo caso è la costruzione di un modello di sito interattivo e funzionante

mediante l’utilizzo di soli strumenti Web 2.0 e applicazioni online: la grafica assume

pertanto un valore secondario.

Tuttavia, in previsione di un utilizzo reale di questo strumento, sono state analizzate

anche le funzionalità di personalizzazione grafica a disposizione dell’amministratore,

rilevando diverse limitazioni. Come già menzionato sopra, questo site builder costringe il

layout delle pagine ad una sola colonna, senza dare la possibilità di inserire una sidebar

con contenuti contestuali o fissi tra le pagine (ad esempio link veloci). Si tratta di una

carenza piuttosto importante, non riscontrata negli altri site builder utilizzati. La scelta di

template grafici in Weebly è piuttosto limitata, anche se viene data la possibilità di

modificarne direttamente i codici html e css. Questo accorgimento consente un’elevata

personalizzazione della grafica del sito, ma soltanto da parte di chi possiede le giuste

competenze di web design.

Home page, pagine statiche e architettura dell’informazione

29

Il sito è organizzato in otto sezioni principali, visibili nel menu a sinistra come

navigazione di primo livello, e undici sottosezioni, raggiungibili anch’esse dallo stesso

menu mediante elenchi a comparsa. La navigazione per l’utente è ulteriormente

supportata dalle cosiddette breadcrumbs, presenti in ogni pagina sopra al titolo, fatta

eccezione per la home, e realizzate come semplici paragrafi di testo con link.

La home page del sito (figura 2.3, alla pagina successiva) si apre con un semplice

paragrafo di testo con immagine, pensato per la presentazione dell’organizzazione e dei

suoi obiettivi e seguito da un link alla pagina interna dedicata a questi argomenti. Questa

scelta non è casuale, in quanto questo tipo di informazioni è stato indicato dalla ricerca di

Estes e Nielsen, già più volte citata precedentemente, come il più importante per

convincere l’utente ad effettuare una donazione online8. Immediatezza e chiarezza

risultano quindi di primaria importanza nella presentazione di questi dettagli sul sito.

Sotto questo primo paragrafo sono presenti il motore di ricerca interno e alcuni pulsanti

per link veloci alle sottosezioni più importanti: le donazioni online, le pagine dedicate ai

progetti e quella per iscriversi alla newsletter. Chiudono la home page i social button per i

collegamenti con il profilo su Facebook e il canale di Youtube.

Per pagine statiche si intende in questa sede tutte quelle pagine del sito nelle quali non

sono presenti strumenti interattivi per l’utente. Tali sezioni sono composte soltanto da

testo, immagini e link ad altre pagine o a siti esterni. Per la realizzazione di tutti questi

elementi è stato usato soltanto l’editor di Weebly. Dopo l’immagine relativa alla home

page si riportano tre screenshot di pagine di questo tipo: quella dedicata alla presentazione

dei progetti (figura 2.4), quella relativa all’organigramma dell’ONG, con link ai profili

dei membri più importanti sulle social network (figura 2.5) e quella contenente la lista dei

siti delle ONG partner con i relativi link (figura 2.6).

8 Estes, Janelle; Nielsen, Jakob, Donation Usability, Fremont, Norman Nielsen Group, 2009, pagg. 11-‐12.

30

Figura 2.3 La home page del template base. Lo zoom è stato diminuito per permetterne la visualizzazione a tutta pagina. Pertanto non è più visibile una linea divisoria tra il link “mission e obiettivi” e il motore di ricerca.

31

Figura 2.4 La pagina dedicata alla presentazione dei progetti dell’ONG nel template base.

32

Figura 2.5 Particolare della pagina “Organigramma” del template base.

Figura 2.6 Particolare della sezione “Sostenitori” nel template base.

33

Considerazioni conclusive sul template base

Per costruire questo prototipo non sono stati utilizzati servizi a pagamento. Weebly nella

sua versione base non pone limitazioni al numero di pagine, ma soltanto al peso totale del

sito; questa limitazione potrebbe comunque essere superata senza acquistare il pacchetto

premium, ma semplicemente affidandosi ad uno o più dei tanti servizi di online storage

system gratuiti disponibili, come Badongo (www.badongo.com) o Divshare

(www.divshare.com).

Weebly Pro è l’unico miglioramento apportabile a pagamento per gli strumenti utilizzati e

costa $4,58 al mese per un abbonamento di sei mesi, oppure $4/mese per uno di un anno o

$3/mese se si sceglie la durata più lunga, di due anni9. La versione premium di Weebly,

tuttavia, non aggiunge funzionalità particolarmente interessanti, eccezion fatta per la

possibilità di proteggere determinate pagine mediante password, utile alle organizzazioni

che vogliono aggiungere un’area riservata al sito.

Un sito costruito come il template base è quindi caratterizzato da un costo nullo e non

richiede alcuna competenza informatica o di web design per essere creato e gestito. Tutte

le funzionalità interattive sono implementabili da chiunque abbia un minimo di

dimestichezza con il web e non è richiesta la conoscenza dei codici html e css, se non per

apportare sostanziali modifiche al tema grafico del sito.

Questo prototipo è stato costruito tenendo conto delle esigenze di ONG di piccolissime

dimensioni, che non solo non dispongono di fondi sufficienti e di volontari con

competenze nel settore, ma che si trovano ad operare con un numero molto esiguo di

collaboratori. Si ricorda infatti che la maggioranza delle ONG italiane per la cooperazione

allo sviluppo può contare su meno di 11 operatori contrattati. Si può ipotizzare che la

maggior parte di queste organizzazioni non abbia la possibilità di curare la propria

presenza sul web e si limiti ora a possedere un sito statico.

9 Prezzi tratti dal sito www.weebly.com, in data 18/01/2010

34

2.2.2 Template completo: piattaforma Wordpress

http://www.prototipoong.ilbello.com

Il template completo è un prototipo di media complessità funzionale, più ricco rispetto al

template base. Oltre alle funzionalità già presenti in quest’ultimo, il template completo

aggiunge un form per permettere agli utenti di effettuare online richieste di lavoro presso

l’organizzazione (application form), la possibilità di elargire donazioni per uno specifico

progetto e un’area riservata dedicata agli utenti interni dell’ONG. Di seguito viene

riportata la tabella che riepiloga gli strumenti utilizzati per costruire questo prototipo; in

rosso le funzionalità e le sezioni non presenti nel template base.



PROFILO ASSOCIATO: SITI INTERATTIVI

Pagine statiche Wordpress X

Calendario eventi Wordpress (pagina statica) X

Pagina link Wordpress (pagina statica) X

Photogallery Flickr X


Download documenti Wordpress X


Motore di ricerca Wordpress X

Form iscrizione newsletter Zoho Creator X

Donazioni dirette Pulsanti di Paypal X

Slideshow Flickr X

Contact form Jotform X

Blog Wordpress X

Feed RSS Wordpress X

Share button Widget di addthis.com X

Profili sulle social network Facebook, Youtube, Flickr e Twitter X

Application form Zoho Creator X

Embedded document (ppt, pdf) ISSUU (pdf) e Slideshare (ppt) Non presente

Donazioni per progetto Pulsanti di Paypal Non presente

Area riservata Wordpress X

Tabella 2.2 Le funzionalità presenti nel template completo e gli strumenti utilizzati per realizzarle.

35

La piattaforma di site building utilizzata: Wordpress (versione scaricabile)

http://www.wordpress.org

Wordpress è una delle piattaforme più utilizzate per la creazione e la gestione di blog. In

questa sede è stato inserito nella categoria dei site builder in quanto mette a disposizione

anche la possibilità di pubblicare pagine statiche, all’interno delle quali è possibile

inserire qualsiasi tipo di contenuto. Essendo per sua natura un blog builder, Wordpress

offre all’utente un’ampia gamma di opzioni per la personalizzazione, la gestione e la

moderazione del blog, oltre a tutta una serie di widget connessi con l’attività di blogging

(ad esempio tag cloud, blogroll e calendario dei post).

Inoltre, sempre per lo stesso motivo, consente all’amministratore di permettere a più

utenti di pubblicare e modificare i contenuti del sito, assegnando a ciascuno di essi un

profilo e un ruolo che ne specifichi i privilegi. Si tratta di una caratteristica

potenzialmente molto utile per la gestione di un sito da parte di una ONG con sedi

geograficamente distribuite e con un organico composto da volontari e collaboratori con

diverse competenze. Grazie a questa funzionalità è possibile, ad esempio, consentire a

molte persone di pubblicare post sul blog (magari previa moderazione

dell’amministratore), ma solo a un numero ristretto di esse di modificare le pagine

statiche o la grafica del sito. Un altro grande vantaggio derivante dall’utilizzo di

Wordpress, anche questo molto importante nell’ambito delle ONG, è la possibilità di

scegliere tra più di 50 lingue quella in cui visualizzare il back office.

Dalla natura di blog builder di Wordpress non derivano tuttavia soltanto vantaggi per

l’utente intenzionato a costruire con esso un sito interattivo. In questa piattaforma infatti

l’editor delle pagine non differisce quindi di molto da quello di un semplice post (vedi

figura 2.7) e manca di tutti quegli strumenti necessari per l’impostazione del layout,

presenti invece negli altri site builder e particolarmente intuitivi e ben realizzati in

Weebly (elementi per vari tipi di paragrafi). Per effettuare questa operazione viene data la

possibilità di agire sull’html, con un editor di codice facilitato ma comunque molto

difficile da gestire senza competenze in merito. Inoltre, la differenza di dimensioni tra

l’editor e l’effettiva visualizzazione della pagina web rende ancora più difficoltoso il

compito di gestione del layout grafico.

36

Figura 2.7 L’editor del sito e delle pagine di Worpress. Si noti la maggiore complessità rispetto a quello di Weebly e la più nutrita presenza di funzionalità di gestione (sulla sinistra nel menu).

La maggiore complessità di Wordpress porta quindi a una maggiore difficoltà di utilizzo

rispetto a Weebly, soprattutto per utenti alle prime armi con la creazione di siti web.

Un'altra conseguenza di questa complessità è la minore velocità dell’applicazione, che

impiega un tempo decisamente superiore rispetto a Weebly per l’aggiornamento e la

pubblicazione dei contenuti sulle pagine del sito.

Esistono in rete due diverse versioni di questa piattaforma, reperibili su due indirizzi

separati:

http://www.wordpress.com – applicazione di Wordpress completamente online;

per utilizzarla è sufficiente creare un account. Mediante questa versione non è

tuttavia possibile inserire stringhe di codice con contenuto attivo, ad esempio i tag

37

<form>, <iframe> e <script>. Per l’obiettivo di questo lavoro essa risulta quindi

inutile, non consentendo l’importazione nelle pagine di strumenti interattivi

funzionanti.

http://www.wordpress.org – da questo indirizzo è possibile scaricare sul proprio

computer la cartella contenente i file (php) dell’applicazione di Wordpress, i quali

andranno poi installati sul server che ospiterà il sito web con essa creato. Questa

versione consente di superare la limitazione della precedente, ma richiede che sia

eseguita una procedura di installazione su server e di configurazione

dell’applicazione non alla portata di chi non possiede le adeguate competenze

informatiche.

Tuttavia, alcuni siti dedicati all’hosting di pagine web, come Il Bello (www.ilbello.com),

mettono a disposizione gratuitamente sui propri server la piattaforma di Worpress già

installata. Utilizzando questi servizi si può quindi superare lo scoglio delle eventuali

difficoltà di installazione, senza dover rinunciare alla possibilità di inserire widget

interattivi nel proprio sito.

Per la costruzione del template completo è stata scelta quest’ultima soluzione, sfruttando

il servizio di hosting di Il Bello. Oltre ai vantaggi in termini di semplicità di installazione

e configurazione, l’utilizzo della piattaforma scaricabile su un servizio di hosting gratuito

mette anche a disposizione l’accesso in ftp a tutti i file del sito. Tra questi ci sono anche

quelli relativi al tema grafico scelto. Questa opportunità, unita all’editor di css offerto da

Wordpress, consente agli utenti dotati di competenze di web design di personalizzare la

grafica del sito a un livello decisamente superiore rispetto agli altri site builder. Questa

differenza potrà essere apprezzata mediante un confronto tra gli screenshot relativi a

questo prototipo e quelli degli altri due template.

38


Il template completo è organizzato in otto sezioni principali, visibili nel menu a sinistra

come navigazione di primo livello, e 27 sottosezioni, raggiungibili anch’esse dallo stesso

menu mediante elenchi a comparsa. La navigazione per l’utente è ulteriormente

supportata dalle cosiddette breadcrumbs, presenti in ogni pagina sotto al titolo, fatta

eccezione per la home, e realizzate come semplici paragrafi di testo con link.

La home page del sito è dedicata interamente al blog dell’organizzazione, sicuramente lo

strumento più potente messo a disposizione da Wordpress. In previsione di un utilizzo

reale da parte di un’ONG, la maggiore disponibilità di opzioni di personalizzazione e

soprattutto la grande flessibilità offerta da Wordpress nella gestione dei diversi ruoli degli

autori lo rendono uno strumento complesso e versatile.

In tutte le pagine è inoltre presente una sidebar, i cui contenuti rimangono sempre gli

stessi in tutte le sezioni del sito. Come si può notare nell’immagine che ritrae la home

page alla pagina successiva (figura 2.8), nella sidebar sono stati collocati link veloci per le

sezioni più importanti del sito: quelle dedicate al sostegno a distanza, all’iscrizione alla

newsletter dell’ONG e all’area riservata (non visibile nello screenshot riportato). Inoltre,

sempre nella sidebar sono presenti il pulsante per effettuare una donazione libera, lo share

button e i social button, per i link ai profili dell’ONG sulle relative social network.

Per la creazione delle pagine statiche è stato utilizzato l’editor di Wordpress, scontando le

difficoltà menzionate nel paragrafo precedente. I contenuti in esse inseriti non

differiscono da quelli del template base, pertanto non verranno qui riportati ulteriori

screenshot.

39

Figura 2.8 La home page del template completo, dedicata al blog. Il livello di zoom è stato diminuito per permetterne la visualizzazione a tutta pagina, pertanto le proporzioni tra gli elementi testuali e quelli grafici potrebbero risultare alterate.

40

Considerazioni conclusive sul template completo

La costruzione del template completo non ha richiesto l’utilizzo di alcun servizio a

pagamento. Wordpress offre tutte le funzionalità sopra descritte nella sua versione

wordpress.org gratuita. L’unico strumento utilizzato che impone limitazioni nella sua

versione free è Zoho Creator. Più specificamente, la versione base di Zoho Creator

consente un massimo di tre form/database per ogni account, con un totale di tuple che non

superi i 1.000 record.

Questa seria limitazione potrebbe essere superata creando più account, ognuno relativo a

un solo form, o addirittura più account per lo stesso form, se associato ad un database di

grandi dimensioni (si pensi alla lista di contatti della newsletter). Tale accorgimento

potrebbe risultare alquanto laborioso e non sempre praticabile in un contesto reale, in

quanto potrebbe comportare la separazione di dati di pertinenza del medesimo database

(nel caso di più account per lo stesso form). L’alternativa consiste nel sottoscrivere un

abbonamento premium presso Zoho, scegliendo tra le diverse fasce a disposizione (pay-

as-you-go), ma i prezzi risultano molto elevati: $15/mese per la prima, $25/mese la

seconda e così via in crescendo fino ai proibitivi $175/mese dell’ultima fascia10.

Anche se non richiede alcun costo nella sua versione free, il template completo risulta più

complesso da creare e gestire rispetto al prototipo base. Ciò a causa della maggiore

difficoltà d’utilizzo di Wordpress rispetto a Weebly per l’impaginazione dei contenuti

(modifica del codice html) e della presenza di un numero maggiore di funzionalità gestite

tramite strumenti esterni che richiedono un costante monitoraggio.

Per questi motivi, si può ipotizzare l’utilizzo di un sito di questo tipo per ONG di piccole

o medie dimensioni, che non possano permettersi costi aggiuntivi per sostenere la propria

presenza sul web, ma con organici già più numerosi rispetto a quelle per cui è stato

progettato il template base. La presenza in questi organici di volontari o collaboratori con

un minimo di competenze di web design risulterebbe altresì utile per trarre il massimo

profitto dall’utilizzo degli strumenti presentati. Si può ipotizzare che ONG di questo tipo

tendano attualmente già a disporre di un sito definito in questa sede come interattivo.

10 Prezzi tratti dal sito http://creator.zoho.com, in data 19/01/2010.

41

2.2.3 Template avanzato: piattaforma Webs + Ning

http://www.prototipoong.webs.com

Il template avanzato rappresenta il massimo livello di complessità funzionale raggiunto in

questo lavoro di creazione di prototipi. In esso trovano posto tutte le funzionalità

presentate precedentemente, con l’aggiunta di una complessa social network dedicata agli

utenti interni dell’organizzazione e collegata ad un sito dedicato al videoconferencing. La

tabella successiva riepiloga gli strumenti utilizzati per realizzare quest’ultimo prototipo;

in rosso le funzionalità non presenti nel template completo.



PROFILO ASSOCIATO: SITI SOCIALI

Pagine statiche Webs X

Calendario eventi Webs X

Pagina link Webs X

Photogallery Webs + Flickr X


Download documenti Webs X


Motore di ricerca Google Custom Search Engine X

Form iscrizione newsletter Wufoo X

Donazioni dirette Pulsanti di Paypal X

Slideshow Webs X

Contact form Jotform X

Blog Webs X

Feed RSS Webs X

Share button Widget di addthis.com X

Profili sulle social network Facebook, Youtube, Flickr e Twitter X

Application form Zoho Creator X

Embedded document (ppt, pdf) ISSUU (pdf) e Slideshare (ppt) Non presente

Donazioni per progetto Webs X

Social network dell’ONG Ning X

Audio/video conferencing Dimdim Non presente

Document/desktop sharing Dimdim Non presente

Tabella 2.3 Le funzionalità presenti nel template avanzato e gli strumenti utilizzati per realizzarle.

42

Le piattaforme di site building utilizzate: Webs e Ning

http://www.webs.com e http://www.ning.com

Webs è un servizio per certi aspetti molto simile a Weebly: un site builder specificamente

progettato per la gestione e l’editing di pagine web. Rispetto a Weebly, Webs si distingue

però per una complessità funzionale molto maggiore, a scapito di una minore velocità

nell’esecuzione dei comandi e di un difficoltà di utilizzo leggermente più elevata. Webs

mette a disposizione molte più opzioni di personalizzazione del sito e delle funzionalità in

esso presenti.

La differenza e la novità più interessante rispetto agli altri site builder analizzati è la

possibilità di realizzare pagine specificamente progettate per gestire singole funzioni

interattive, tipiche di un sito web. In questa sede sono state utilizzate quelle relative all’e-

commerce, alla photogallery, al calendario degli eventi, al blog e alla pagina dei link.

Oltre a queste, Webs permette la creazione di guestbook, forum, videogallery e wiki

interne al sito. Il back office per la gestione di tutte queste pagine particolari è unico:

ciascuna funzionalità dispone di un buon numero di opzioni di personalizzazione e

richiede modalità di gestione adatte ai contenuti che ospita. Lo svantaggio derivante

dall’utilizzo di queste pagine specifiche è l’impossibilità di modificarne il layout dei

contenuti, che deve restare quello del tema scelto per la grafica. Inoltre, in queste pagine

non è possibile aggiungere contenuti diversi da quelli per cui sono state create, eccezion

fatta per un paragrafo di testo (arricchibile con html) da posizionare obbligatoriamente

all’inizio.

Le limitazioni riguardanti la personalizzazione di layout e grafica non si esauriscono alle

pagine dedicate alle specifiche funzionalità interattive, ma coinvolgono l’intero impianto

grafico del sito. Webs infatti non dà la possibilità all’utente di modificare il codice css del

tema scelto, se non per pochi elementi predefiniti. Si possono comunque modificare gli

aspetti più evidenti, come la header, il titolo e i colori di sfondo. Un altro limite di Webs è

la mancanza di lingue alternative all’inglese per la gestione del sito e del back office.

Infine, si riportano quelli che probabilmente rappresentano gli svantaggi più grandi

derivanti dall’utilizzo di Webs, ovvero l’impossibilità di creare più di 20 pagine web per

il proprio sito nella versione free e la costante presenza in queste pagine di un

43

ingombrante banner pubblicitario. Entrambi questi problemi possono essere risolti

attraverso l’acquisto del primo pacchetto premium offerto Webs. Questo aspetto sarà

discusso meglio nel paragrafo dedicato alle considerazioni conclusive, ma risulta subito

evidente che si tratta di una seria limitazione, soprattutto se si considera la ricchezza di

contenuti e pagine tipica dei siti delle ONG.

Un’altra grande differenza rispetto a Weebly riguarda la possibilità, per l’amministratore,

di gestire la concessione di privilegi a particolari categorie di utenza, i membri del sito.

L’amministratore decide le modalità con cui gli utenti possono diventare membri (su

richiesta, accettabile anche automaticamente, o solo su invito) e chi può invitarne di

nuovi. Anche se non si possono aggiungere amministratori, ciascun membro dispone di

un proprio profilo e può essere messo in condizione di pubblicare post sul blog e

aggiungere foto e video. Una condizione che si avvicina a quella degli autori multipli del

blog di Wordpress, ma con meno possibilità di personalizzare i ruoli, e a quella degli

utenti di una piccola social network, in quanto Webs mette anche a disposizione per i

membri una chat per comunicare. Per il template avanzato non è stata prevista la

possibilità di registrare membri del sito, in quanto una funzionalità simile è gestita tramite

l’utilizzo di una social network esterna per i membri dell’organizzazione.

Lo strumento utilizzato per la realizzazione di quest’area riservata è Ning, una

piattaforma online per la creazione di social network personalizzate. Oltre a consentire

l’editing di pagine statiche, come un qualsiasi site builder, Ning permette di gestire

attraverso il sito un’intera comunità di utenti.

44


Il template avanzato è composto da 9 sezioni, raggiungibili dal menu principale, e 9

sottosezioni. Con i temi forniti da Webs non è stato possibile creare un sistema di

navigazione che permettesse di raggiungere tali sottosezioni direttamente dal menu.

Pertanto esse sono state gestite tramite menu secondari nelle sezioni principali, creati

come semplici paragrafi di testo con link.

In questo template non sono disponibili breadcrumbs come ausilio alla navigazione, a

causa della rigidità della struttura delle pagine imposta dal site builder. Il sistema di

navigazione consente comunque di mantenere l’orientamento grazie alla combinazione

dei titoli e degli eventuali menu secondari, che crea un effetto simile a quello delle

breadcrumbs.

La home page, mostrata nell’immagine alla pagina successiva (figura 2.9), è molto simile

a quella del template precedente, in quanto ospita anche qui il blog come contenuto

principale. Sopra al blog sono posizionati alcuni link veloci alle pagine interne dedicate

agli obiettivi, ai progetti e ai sostenitori. Altri link veloci sono posizionati nella sidebar e

permettono di raggiungere la pagina dedicata al sostegno a distanza, i profili sulle social

network (social button) e l’area riservata (la social network esterna creata con Ning).

Anche qui, come nel template precedente, nella sidebar sono presenti il pulsante per

effettuare donazioni libere e quello per condividere la pagina visualizzata (share button).

Inoltre, in questo template il form per l’iscrizione alla newsletter è posizionato anch’esso

nella sidebar e rimane visibile in tutte le pagine.

Le pagine statiche sono state realizzate mediante l’editor di Webs e la maggior parte di

esse presenta gli stessi contenuti già mostrati per gli altri template. Tuttavia, per alcune di

queste pagine sono state utilizzate le funzionalità apposite messe a disposizione da Webs.

In particolare, vengono gestite in questo modo la pagina dedicata agli eventi (vedi figura

2.10) e quella riservata ai link dei sostenitori (figura 2.11), che aggiunge ai semplici link

testuali le anteprime dei siti a cui sono collegati (qui fittizie).

45

Figura 2.9 La home page del template avanzato, dedicata al blog. Il livello di zoom è stato diminuito per permetterne la visualizzazione a tutta pagina, pertanto le proporzioni tra gli elementi potrebbero risultare alterate.

46

Figura 2.10 Particolare della sezione “Eventi” nel template avanzato, gestita con l’apposito strumento di Webs.

Figura 2.11 Particolare della sezione “Sostenitori” nel template avanzato, gestita con l’apposito strumento di Webs.

47

Considerazioni conclusive sul template avanzato

La costruzione di questo prototipo non ha richiesto l’utilizzo di alcun tipo di abbonamento

premium. Tuttavia, ciò è dovuto unicamente alla natura dimostrativa del template. Un

utilizzo reale di Webs per la costruzione di un sito per ONG dovrebbe prevedere

l’acquisto del primo pacchetto premium, dal costo di $4,16 al mese11, sia per permettere il

superamento delle 20 pagine web concesse con la versione free, sia per poter rimuovere

gli ingombranti annunci pubblicitari dal proprio sito. Le fasce superiori di abbonamento

premium di Webs forniscono ulteriori vantaggi, come un aumento dello spazio disco a

disposizione o un maggior numero di prodotti inseribili nella propria pagina di

e-commerce. Tali vantaggi sono però ugualmente conseguibili senza dover sostenere

alcun costo, semplicemente utilizzando servizi SaaS appositi, come gli online storage

system per il caricamento dei file e i pulsanti di Paypal per la creazione di una pagina di

e-commerce indipendente da Webs.

Inoltre, anche per questo prototipo valgono le considerazioni espresse al paragrafo

precedente per un’eventuale sottoscrizione di un abbonamento premium per Zoho

Creator, per permettere ai propri database di ospitare un numero maggiore di record. Un

altro strumento che dispone di alcuni pacchetti premium è Dimdim, il software per le

riunioni online. L’unica funzionalità interessante offerta da questi abbonamenti, tuttavia, è

la possibilità di supportare broadcaster multipli (anche se soltanto uno alla volta), quindi

di realizzare un ambiente di lavoro adatto anche alle riunioni, non soltanto alla

formazione online. Il costo dell’abbonamento premium che garantisce questa funzionalità

è proibitivo, di $50 al mese, e decisamente sproporzionato rispetto ai vantaggi che ne

deriverebbero.

Pertanto, si può ipotizzare che l’utilizzo reale di un sito così strutturato possa costare da

un minimo di $4,16 al mese (circa $50 all’anno), per l’acquisto del primo pacchetto

premium di Webs, a un massimo variabile e dipendente dall’eventuale sottoscrizione di

un abbonamento premium con Zoho Creator. Al di là delle considerazioni economiche,

un sito costruito sul modello del template avanzato risulta più complesso da gestire

rispetto ad uno che si ispiri al template completo, a causa del numero maggiore di

11 Prezzo tratto dal sito www.webs.com, in data 20/01/2010.

48

strumenti da monitorare e moderare. In questo prototipo sono infatti presenti anche una

social network e un collegamento ad un sito di online meeting, entrambe funzionalità che

necessitano di essere costantemente supervisionate. Per questo motivo, un’ipotetica ONG

che voglia ispirarsi a questo template come modello per la propria presenza sul web dovrà

possedere un organico abbastanza ampio da includere anche volontari e collaboratori

impegnati a tempo pieno nella gestione delle sue funzionalità più complesse.

L’obiettivo di questo prototipo è permettere la realizzazione di un sito sociale, per certi

aspetti anche più versatile rispetto al profilo così denominato nella sezione 1, non soltanto

per le ONG di grandi dimensioni, che possono investire ingenti capitali in questo campo,

ma per tutte quelle organizzazioni che, disponendo di un numero sufficiente di dipendenti

da allocare alla gestione del sito, intendono sfruttare tutte le opportunità che il Web 2.0

mette attualmente a disposizione con i suoi servizi più innovativi ed economici.

Profilie template siti web

Technology

Transcript of Profilie template siti web