AIRT Lab - Università Politecnica delle Marche

Transcript

AIRT Lab - Università Politecnica delle Marche
UNIVERSITÀ POLITECNICA DELLE MARCHE
FACOLTÀ DI INGEGNERIA
CORSO DI LAUREA TRIENNALE
IN INGEGNERIA INFORMATICA E DELL'AUTOMAZIONE
PROGETTO E REALIZZAZIONE DI UN PORTALE
INTERNET CONFORME ALLA LEGGE
SULL'ACCESSIBILITÀ E OTTIMIZZAZIONE PER
IL POSIZIONAMENTO SUI MOTORI DI RICERCA
Tesi di Laurea di:
Relatore: Chiar.mo Prof.
MARIO MICUCCI
ALDO FRANCO DRAGONI
Anno Accademico 2010-2011
INDICE
PREFAZIONE
1
CAPITOLO 1 – CMS
1.1 – INTRODUZIONE AI CMS
2
1.2 – IL CMS PER IL WEB
3
1.2.1 – FUNZIONALITÀ
4
1.2.2 – VANTAGGI
5
1.2.3 – SVANTAGGI
6
1.3 – DRUPAL
7
1.3.1 – BREVE STORIA
8
1.3.2 – STRUTTURA
9
1.3.3 – CRITICITÀ
10
1.3.4 – DISTRIBUZIONI
11
1.3.4.1 – DRUPAL PA
11
1.3.4.2 – LIMITI
12
CAPITOLO 2 – ACCESSIBILITÀ
2.1 – INTRODUZIONE
13
2.2 – LEGGE STANCA
14
2.3 – REQUISITI PER L'ACCESSIBILITÀ
18
2.3.1 – DRUPAL E I REQUISITI
2.4 – STRUMENTI DI SUPPORTO
22
28
I
INDICE
CAPITOLO 3 – INSTALLAZIONE
3.1 – INSTALLAZIONE SERVER WEB
31
3.2 – CREAZIONE DATABASE
34
3.3 – INSTALLAZIONE DRUPAL PA
35
3.4 – AGGIORNAMENTO DRUPAL PA
37
CAPITOLO 4 – LA ONLUS AITIM
4.1 – PRESENTAZIONE
38
4.2 – SPECIFICHE DEL PORTALE
39
CAPITOLO 5 – REALIZZAZIONE
5.1 – IL TEMA GRAFICO
5.1.1 – PERSONALIZZAZIONE DEL TEMA
42
43
5.2 – MENÙ E BLOCCHI
49
5.3 – MODULO DI CONTATTO
53
5.4 – MODULO FAQ
54
5.5 – REGISTRAZIONE E LOGIN
56
5.6 – UTENTI, RUOLI E PERMESSI
58
5.7 – PROGETTI: TIPO DI CONTENUTO E VISTA
60
5.8 – MODULO EVENT E WEBFORM
65
5.9 – RSS, NEWSLETTER E SOCIAL NETWORK
69
II
INDICE
CAPITOLO 6 – SEO
6.1 – INTRODUZIONE
76
6.2 – BREVE STORIA
76
6.3 – WHITE HAT E BLACK HAT SEO
78
6.3.1 – TECNICHE E METODI
79
6.4 – SEO IN DRUPAL
81
6.4.1 – URL
82
6.4.1.1 – CLEAN URL
82
6.4.1.2 – ALIAS URL
83
6.4.1.3 – URL NORMALIZATION
86
6.4.2 – TAG
89
6.4.2.1 – DESCRIPTION E KEYWORDS
89
6.4.2.2 – TITLE
91
6.4.3 – SITEMAP
92
6.4.3.1 – HTML
93
6.4.3.2 – XML
94
6.4.4 – STRUMENTI DI SUPPORTO
96
CONCLUSIONI
98
BIBLIOGRAFIA
99
III
PREFAZIONE
In questa tesi di laurea è stata affrontata la realizzazione di un portale
internet attraverso l'uso del content management system Drupal.
Il portale è stato commissionato dalla Onlus AITIM, Associazione Italiana
di Telemedicina e Informatica Medica.
Drupal è un CMS ricco di funzionalità che ben si adatta alla realizzazione di
siti internet dai contenuti variegati come può essere per esempio quello di
un'associazione che si occupa di ricerca medica e scientifica.
Nello specifico è stata utilizzata la distribuzione personalizzata Drupal PA,
in quanto maggiormente rispondente alla legge n. 4 del 9 gennaio 2004.
Questa
legge,
comunemente
definita
“Legge
Stanca”,
riguarda
le
disposizioni per favorire l'accesso dei soggetti disabili agli strumenti
informatici ed elenca 22 requisiti che i siti internet devono rispettare per
ritenersi accessibili, requisiti che si applicano esclusivamente ai siti
pubblici o di interesse pubblico e quindi anche al portale oggetto di questa
tesi.
Si è potuto quindi verificare il reale grado di accessibilità fornito da Drupal
e valutarne la bontà come piattaforma di sviluppo per siti conformi alla
legge Stanca.
È seguito poi uno studio sulle tecniche SEO, “search engine optimization”,
ovvero l'ottimizzazione per il posizionamento sui motori di ricerca e con
l'ausilio
dei
moduli
aggiuntivi
di
cui
Drupal
dispone
sono
state
implementate nel portale le tecniche fondamentali.
1
CAPITOLO 1 – CMS
1.1 – INTRODUZIONE AI CMS
CMS (acronimo di Content Management System), letteralmente, “sistema
per la gestione dei contenuti”, ad un certo livello di astrazione può essere
inteso come l'insieme di procedure, processi e tecnologie utilizzate per la
gestione del flusso di lavoro in un ambiente collaborativo. Questi processi
sono a supporto del ciclo di vita evolutivo dell'informazione digitale, dalla
creazione,
passando
per
la
pubblicazione
e
l'aggiornamento,
fino
all'archiviazione.
Le procedure in un CMS sono concepite per:
•
Permettere a molti utenti la creazione e la condivisione di dati
•
Controllare l'accesso ai dati, basandosi sui ruoli utenti
•
Supportare nello stoccaggio e nel recupero dati
•
Semplificare le operazioni di routine
•
Migliorare la comunicazione fra gli utenti
In un CMS si possono definire dati di vario genere: documenti, immagini,
video e così via.
I Content Management System nascono negli Stati Uniti, inizialmente
sviluppati da alcune organizzazioni che producevano notevoli quantità di
pubblicazioni, per il loro uso interno. Questo tipo di sistema di gestione dei
contenuti prende il nome di ECM (Enterprise Content Management
System) definito come l'insieme di strumenti che consentono la gestione
della documentazione prodotta e ricevuta all’interno di un’organizzazione,
indipendentemente dal suo formato.
2
CAPITOLO 1 – CMS
Nel 1995 la CNET rese pubblici gli studi e i prodotti sviluppati
internamente,
distribuendoli
con
l'etichetta
Vignette.
La
compagnia
cominciò a mettere a disposizione il proprio software come sistema di
gestione dei contenuti via web. Per la prima volta un utente poteva creare
il proprio sito direttamente dal web, usando l'interfaccia CNET. Furono
allora poste le basi di ciò che è diventato il CMS odierno.
1.2 – IL CMS PER IL WEB
Grazie al costante sviluppo e alla diffusione delle reti internet il CMS sì è
quindi affermato nella sua accezione di gestore di contenuti web, spesso
quindi nominato WCMS da “Web Content Management System”.
Un Web CMS è un software installato su un server web che consente la
gestione dei contenuti e delle pagine che compongono un sito web in
modo
pratico
e
automatizzato,
svincolando
l'amministratore
da
conoscenze tecniche di programmazione web. Esistono numerosi CMS, i
quali possono essere di tipo specializzato, cioè appositamente progettati
per un tipo preciso di contenuti, come ad esempio un blog o un forum, o
di tipo generico, che tendono cioè ad essere più flessibili nella loro
struttura per consentire la pubblicazione di diversi tipi di contenuti. La
maggior parte dei CMS è di tipo open source ed utilizza il PHP come
linguaggio di sviluppo. Citiamo a titolo di esempio alcuni tra i più noti ed
utilizzati:
•
Drupal
•
Joomla!
•
Mambo
•
MediaWiki
•
PHP-Fusion
•
Wordpress
3
CAPITOLO 1 – CMS
Una caratteristica comune è che stiamo parlando sempre di applicazioni
lato server che fanno uso di un database per lo stoccaggio dei contenuti e
che sono suddivisi in due parti fondamentali, il Back-End cioè la sezione
amministrativa, accessibile tramite username e password, che mette a
disposizione degli utenti preposti gli strumenti necessari all'organizzazione
e supervisione nella creazione dei contenuti, e il Front-End cioè la sezione
applicativa, utilizzata dal visitatore web per navigare tra i contenuti e
usufruire delle funzionalità del sito internet.
Una delle applicazioni più utili dei CMS è nella gestione dei portali internet,
dove la varietà e il numero dei contenuti pubblicati deve essere gestita in
modo flessibile prevedendo un accesso, lato amministratore, multiutente.
1.2.1 – FUNZIONALITÀ
•
Template grafici
Possibilità di gestire modelli standard di output che possono essere
applicati a contenuti nuovi o già esistenti.
•
Editing dei contenuti
Una volta che il contenuto è separato dalla presentazione grafica di
un sito la sua manipolazione diventa molto più facile e veloce. La
maggior parte dei CMS include strumenti di editing del tipo
WYSIWYG che consente agli utenti non esperti la creazione e la
modifica dei contenuti in tutta semplicità.
•
Configurazione scalabile
La maggior parte dei CMS include plug-in o moduli che possono
essere facilmente installati per estendere le funzionalità di un sito
esistente.
4
CAPITOLO 1 – CMS
•
Standard web aggiornati
I CMS ricevono aggiornamenti regolari che comprendono set di
nuove funzionalità e mantengono il sistema al passo con gli standard
web correnti.
•
Collaborazione
Il CMS può agire come una piattaforma collaborativa permettendo
un lavoro sui contenuti da parte di uno o più utenti autorizzati,
monitorando le modifiche, autorizzarle per la pubblicazione o
ripristinare versioni precedenti.
•
Ruoli
Alcuni CMS permettono a vari gruppi di utenti di avere privilegi
limitati su specifici contenuti del sito.
•
Syndication
Il CMS spesso supporta la distribuzione dei contenuti attraverso la
generazione di feed RSS e Atom.
•
Multilingua
Possibilità di visualizzare i contenuti in più lingue.
1.2.2 – VANTAGGI
•
Costi ridotti
Molti CMS come ad esempio Drupal sono gratuiti ed altre soluzioni
commerciali
a
pagamento
possono
comunque
rivelarsi
più
economiche rispetto al costo delle sviluppo di una soluzione ad hoc.
•
Personalizzazione
Semplicità di personalizzazione per l'utente principiante che può
agire dall'interfaccia grafica del CMS e usufruire di temi grafici preprogettati.
5
CAPITOLO 1 – CMS
•
Facile da usare
Semplicità nel design per l'interfaccia utente dell'amministratore
consentendone l'utilizzo senza che sia richiesta molta preparazione.
•
Gestione del flusso di lavoro
È possibile controllare come il contenuto viene pubblicato, quando e
da chi, impostando regole e permessi specifici.
•
Separazione
Separazione tra grafica, struttura e contenuto, consentendo che ogni
area possa essere modificata, adattata o ricreata indipendentemente
dalle altre.
•
Database
Lo stoccaggio centralizzato dei dati significa che il contenuto può
essere riutilizzato in più parti di un sito e formattato per qualsiasi
dispositivo.
1.2.3 – SVANTAGGI
•
Latenza
I CMS più complessi possono soffrire problemi di latenza se
l'infrastruttura hardware non è sufficientemente moderna, causando
anche problemi di bilanciamento del carico in caso di file di cache di
grandi dimensioni.
•
Dimensioni
I CMS a causa della loro struttura dinamica e polivalente sono
formati da un grande volume di file e questo li rende più vulnerabili
ad errori di vario genere nella loro gestione.
•
Licenze
Nella
scelta
di
un
CMS
a
pagamento
bisogna
tenere
in
considerazione i costi di mantenimento per quanto riguarda gli
aggiornamenti delle licenze e la manutenzione dell'hardware.
6
CAPITOLO 1 – CMS
•
Specializzazione
Un CMS generico potrebbe rivelarsi non adatto per un determinato
tipo di progetto rispetto ad uno di tipo specializzato, il quale però poi
limiterebbe sviluppi futuri di altro genere.
•
URL
A causa della natura dei CMS gli indirizzi vengono generati
dinamicamente con parametri interni ed informazioni di riferimento,
non è quindi da dare per certa una loro durata a lungo periodo ed
inoltre i motori di ricerca potrebbero avere difficoltà nell'indicizzare
questo
tipo
di
contenuti
se
non
venissero
prese
le
dovute
precauzioni.
1.3 – DRUPAL
Drupal è il CMS che è stato utilizzato. È un software gratuito ed open
source
scritto in linguaggio PHP e distribuito sotto licenza GNU GPL
(licenza per software libero che contrapponendosi alle licenze per software
proprietario assicura all'utente libertà di utilizzo, copia, modifica e
distribuzione). Drupal è un sistema multipiattaforma che funziona su
qualsiasi macchina che supporti un server web in grado di eseguire PHP
dalla versione 4.4.0 o superiore (per esempio Apache o Microsoft ISS) e
un DBMS (come MySQL, PostgreSQL, SQLite o Microsoft SQL Server).
L'ultima versione di Drupal è la 7, rilasciata il 5 gennaio 2011, ed insieme
alla precedente versione 6, sono le sole ad essere attivamente supportate
dalla comunità di sviluppo.
7
CAPITOLO 1 – CMS
1.3.1 – BREVE STORIA
La nascita di Drupal è da attribuire a Dries Buytaert, studente che
frequentava l'università di Antwerp in Belgio. La sua necessità era quella
di condividere una connessione internet tramite un modem ADSL, ci riuscì
grazie a un ponte wireless. Questa filosofia, basata sulla condivisione, lo
ha portato a lavorare allo sviluppo di una nuova concezione di sito internet
che permettesse di condividere notizie, informazioni e altre tipologie di
contenuto. Col tempo questo progetto crebbe, finché nel 2001, Buytaert
decise di rendere pubblico il codice del software, che diventò così open
source. Il progetto venne chiamato Drupal (traslitterazione inglese per la
parola olandese “druppel” che significa goccia). Con la collaborazione di
sviluppatori che hanno aggiunto nuove funzionalità, grazie a un'interfaccia
intuitiva e facilmente utilizzabile anche da utenti non esperti, Drupal si è
affermato divenendo uno dei più scaricati CMS in circolazione. Da Maggio
2007 ad Aprile 2008 è stato scaricato dal suo sito ufficiale drupal.org più
di 1,4 milioni di volte, con una crescita di circa il 125% rispetto all'anno
precedente. Oggi Drupal gode dell'apporto di una vasta comunità di
sviluppo insieme a comunità di supporto createsi spontaneamente in tutto
il globo.
Il logo di Drupal, rappresentazione grafica di una goccia.
8
CAPITOLO 1 – CMS
1.3.2 – STRUTTURA
Drupal è costruito con una struttura modulare, ciò permette al suo nucleo
base, il “core”, di fornire solo le funzioni essenziali nella sua configurazione
predefinita. Attraverso l'installazione di moduli e temi supplementari è
possibile estendere e modificare l'aspetto e le funzionalità standard di
Drupal.
Il core di Drupal fornisce già una serie di funzionalità, attivabili o
disattivabili a seconda delle necessità, tra cui citiamo:
•
Gestione di blog, libri, commenti, forum e sondaggi
•
Gestione dei profili utente e regole per il controllo degli accessi
•
Inserzione, modifica e catalogazione dei contenuti
•
Feed RSS per i contenuti generati e aggregazione di feed esterni
•
Temi grafici per la modifica dell'aspetto del sito
•
Localizzazione dell'interfaccia in diverse lingue
•
Ricerca avanzata nei contenuti del sito
•
Notifiche automatiche sulla disponibilità di nuove versioni del core di
Drupal e dei moduli e temi installati
Mentre alcune funzionalità previste dai moduli aggiuntive includono:
•
Sistemi di e-commerce
•
Gallerie fotografiche
•
Rating dei contenuti
•
Editor WYSIWUG
•
Strumenti di Search Engine Optimization
•
Gestione di mailing list
•
Creazione di tipi di contenuto personalizzati
•
Integrazione con servizi di terze parti (AdSense, Digg, Facebook…)
9
CAPITOLO 1 – CMS
La sezione download del sito drupal.org
1.3.3 – CRITICITÀ
La principale critica che viene mossa a Drupal riguarda la ripidità della sua
curva di apprendimento: alcuni utenti ritengono Drupal difficile da
padroneggiare.
L'interfaccia
d'amministrazione
può
risultare
un
po'
confusionaria e l'abbondanza di moduli aggiuntivi spesso con funzionalità
sovrapposte possono creare confusione all'utente alle prime armi. Tali
problematiche sono state prese in considerazione dal team di sviluppo: a
partire dalla versione 5 è possibile installare Drupal e configurare il
database quasi interamente tramite un'interfaccia web e con la versione 6
l'installazione
è
stata
ulteriormente
semplificata
consentendo
la
localizzazione dei testi sin dalle prime fasi. La versione 7 ha invece avuto
una ristrutturazione delle voci di amministrazione.
10
CAPITOLO 1 – CMS
1.3.4 – DISTRIBUZIONI
Esistono delle distribuzioni di Drupal preconfigurate con moduli di terze
parti, eventualmente con modifiche al core, ed impostate per un
particolare
tipo
di
sito
con
lo
scopo
di
semplificare
il
processo
d'installazione e l'utilizzo da parte di chi desideri usare Drupal in un
contesto specifico (e-commerce, forum, blog…).
Tra le distribuzioni esistenti citiamo:
•
vbDrupal
Per una gestione avanzata dello strumento forum.
•
CivicSpace
Piattaforma per l'organizzazione di movimenti dal basso e la
connessione di gruppi distanti di sostenitori.
•
Open Atrium
Fornisce una vasta gamma di funzionalità per costruire e gestire una
intranet aziendale.
•
Drupal PA
Soluzione
accessibile
per
la
pubblica
amministrazione
in
ottemperanza alla legge Stanca, concernente le disposizioni per
favorire l'accesso dei soggetti disabili agli strumenti informatici.
1.3.4.1 – DRUPAL PA
Drupal PA è la distribuzione che è stata utilizzata. Realizzata dalla
cooperativa Anastasis, è basata sulla versione 6 di Drupal.
Il nome scelto gioca su un doppio significato per l'acronimo PA:
•
Drupal Per l'Accessibilità
•
Drupal Pubbliche Amministrazioni
11
CAPITOLO 1 – CMS
Drupal PA integra all'installazione base di Drupal quanto segue:
•
Un tema accessibile
•
Testi prelocalizzati in italiano
•
Una serie di moduli volti ad offrire un'operatività standard nel
contesto delle PA
•
PEGOeditor, un editor WYSIWUG per la generazione di codice XHTML
accessibile
1.3.4.2 – LIMITI
Per un utilizzo da parte di una pubblica amministrazione, la cooperativa
Anastasis elenca quelle che possono essere ritenute delle limitazioni in
Drupal PA:
•
Drupal non si presta ad un ambiente multi-sito con condivisione e
migrazione di contenuti tra un sito e l'altro
•
L'architettura di Drupal non è scalabile e non prevede tecniche di
load balancing (distribuzione del carico di un servizio tra più server)
•
Complessità nel modulo per la gestione dei contenuti multilingua
•
La parte amministrativa non è totalmente conforme ai criteri di
accessibilità
Il logo dei creatori di Drupal PA
12
CAPITOLO 2 – ACCESSIBILITÀ
2.1 – INTRODUZIONE
Nell'ambito informatico l'accessibilità è la caratteristica di un dispositivo, di
un servizio o di una risorsa di essere fruibile con facilità da qualsiasi
tipologia di utente a prescindere da disabilità di tipo fisico o mentale.
Le esigenze che l'accessibilità si propone di affrontare sono:
•
Visive
Daltonismo, ipovisione, cecità.
•
Motorie
Lentezze o incapacità muscolari causate da malattie quali il morbo di
Parkinson o l'ictus.
•
Uditive
Problemi di udito o sordità.
•
Cognitive
Disturbi dell'apprendimento e disabilità cognitive di varie origini.
Il W3C, il principale organismo internazionale nella definizione di standard
web, attraverso la WAI, la Web Accessibility Initiative, ha redatto delle
linee guida universalmente riconosciute, con lo scopo di rendere più
accessibili i contenuti web a persone disabili, che prendono il nome di
WCAG (da Web Content Accessibility Guidelines). Giunte alla seconda
revisione l'11 dicembre 2008, coniugano un'applicabilità più ampia ed una
maggiore precisione rispetto alla precedente stesura datata 1999.
Esistono anche alcuni leggi nazionali che definiscono l'accessibilità per i
sistemi informatici. Citiamo per esempio la Section 508 degli Stati Uniti e
la legge Stanca per quanto riguarda l'Italia.
13
CAPITOLO 2 – ACCESSIBILITÀ
2.2 – LEGGE STANCA
Riportiamo qui di seguito il testo della legge numero 4 del 9 gennaio 2004
intitolata “Disposizioni per favorire l'accesso dei soggetti disabili agli
strumenti informatici”, nota anche come “Legge Stanca”, dal nome
dell'allora ministro per l'innovazione e le tecnologie Lucio Stanca.
Art. 1 - Obiettivi e finalità
1. La Repubblica riconosce e tutela il diritto di ogni persona ad accedere a tutte le fonti di
informazione e ai relativi servizi, ivi compresi quelli che si articolano attraverso gli strumenti
informatici e telematici.
2. È tutelato e garantito, in particolare, il diritto di accesso ai servizi informatici e telematici della
pubblica amministrazione e ai servizi di pubblica utilità da parte delle persone disabili, in
ottemperanza al principio di uguaglianza ai sensi dell'articolo 3 della Costituzione.
Art. 2 - Definizioni
1. Ai fini della presente legge, si intende per:
a) «accessibilità»: la capacità dei sistemi informatici, nelle forme e nei limiti consentiti dalle
conoscenze tecnologiche, di erogare servizi e fornire informazioni fruibili, senza discriminazioni,
anche da parte di coloro che a causa di disabilità necessitano di tecnologie assistive o
configurazioni particolari;
b) «tecnologie assistive»: gli strumenti e le soluzioni tecniche, hardware e software, che
permettono alla persona disabile, superando o riducendo le condizioni di svantaggio, di
accedere alle informazioni e ai servizi erogati dai sistemi informatici.
Art. 3 - Soggetti erogatori
1. La presente legge si applica alle pubbliche amministrazioni di cui al comma 2 dell'articolo 1
del decreto legislativo 30 marzo 2001, n. 165, e successive modificazioni, agli enti pubblici
economici, alle aziende private concessionarie di servizi pubblici, alle aziende municipalizzate
regionali, agli enti di assistenza e di riabilitazione pubblici, alle aziende di trasporto e di
telecomunicazione a prevalente partecipazione di capitale pubblico e alle aziende appaltatrici
di servizi informatici.
2. Le disposizioni della presente legge in ordine agli obblighi per l'accessibilità non si applicano
ai sistemi informatici destinati ad essere fruiti da gruppi di utenti dei quali, per disposizione di
legge, non possono fare parte persone disabili.
14
CAPITOLO 2 – ACCESSIBILITÀ
Art. 4 - Obblighi per l'accessibilità
1. Nelle procedure svolte dai soggetti di cui all'articolo 3, comma 1, per l'acquisto di beni e per la
fornitura di servizi informatici, i requisiti di accessibilità stabiliti con il decreto di cui all'articolo 11
costituiscono motivo di preferenza a parità di ogni altra condizione nella valutazione dell'offerta
tecnica, tenuto conto della destinazione del bene o del servizio. La mancata considerazione dei
requisiti di accessibilità o l'eventuale acquisizione di beni o fornitura di servizi non accessibili è
adeguatamente motivata.
2. I soggetti di cui all'articolo 3, comma 1, non possono stipulare, a pena di nullità, contratti per
la realizzazione e la modifica di siti INTERNET quando non è previsto che essi rispettino i
requisiti di accessibilità stabiliti dal decreto di cui all'articolo 11. I contratti in essere alla data di
entrata in vigore del decreto di cui all'articolo 11, in caso di rinnovo, modifica o novazione, sono
adeguati, a pena di nullità, alle disposizioni della presente legge circa il rispetto dei requisiti di
accessibilità, con l'obiettivo di realizzare tale adeguamento entro dodici mesi dalla data di
entrata in vigore del medesimo decreto.
3. La concessione di contributi pubblici a soggetti privati per l'acquisto di beni e servizi
informatici destinati all'utilizzo da parte di lavoratori disabili o del pubblico, anche per la
predisposizione di postazioni di telelavoro, è subordinata alla rispondenza di tali beni e servizi ai
requisiti di accessibilità stabiliti dal decreto di cui all'articolo 11.
4. I datori di lavoro pubblici e privati pongono a disposizione del dipendente disabile la
strumentazione hardware e software e la tecnologia assistiva adeguata alla specifica disabilità,
anche in caso di telelavoro, in relazione alle mansioni effettivamente svolte. Ai datori di lavoro
privati si applica la disposizione di cui all'articolo 13, comma 1, lettera c), della legge 12 marzo
1999, n. 68.
5. I datori di lavoro pubblici provvedono all'attuazione del comma 4, nell'ambito delle
disponibilità di bilancio.
Art. 5 - Accessibilità degli strumenti didattici e formativi
1. Le disposizioni della presente legge si applicano, altresì, al materiale formativo e didattico
utilizzato nelle scuole di ogni ordine e grado.
2. Le convenzioni stipulate tra il Ministero dell'istruzione, dell'università e della ricerca e le
associazioni di editori per la fornitura di libri alle biblioteche scolastiche prevedono sempre la
fornitura di copie su supporto digitale degli strumenti didattici fondamentali, accessibili agli
alunni disabili e agli insegnanti di sostegno, nell'ambito delle disponibilità di bilancio.
Art. 6 - Verifica dell'accessibilità su richiesta
1. La Presidenza del Consiglio dei ministri - Dipartimento per l'innovazione e le tecnologie valuta
su richiesta l'accessibilità dei siti INTERNET o del materiale informatico prodotto da soggetti
diversi da quelli di cui all'articolo 3.
2. Con il regolamento di cui all'articolo 10 sono individuati:
a) le modalità con cui può essere richiesta la valutazione;
15
CAPITOLO 2 – ACCESSIBILITÀ
b) i criteri per la eventuale partecipazione del richiedente ai costi dell'operazione;
c) il marchio o logo con cui è reso manifesto il possesso del requisito dell'accessibilità;
d) le modalità con cui può essere verificato il permanere del requisito stesso.
Art. 7 - Compiti amministrativi
1. La Presidenza del Consiglio dei ministri - Dipartimento per l'innovazione e le tecnologie,
anche avvalendosi del Centro nazionale per l'informatica nella pubblica amministrazione di cui
all'articolo 4, comma 1, del decreto legislativo 12 febbraio 1993, n. 39, come sostituito
dall'articolo 176 del decreto legislativo 30 giugno 2003, n. 196:
a) effettua il monitoraggio dell'attuazione della presente legge;
b) vigila sul rispetto da parte delle amministrazioni statali delle disposizioni della presente legge;
c) indica i soggetti, pubblici o privati, che, oltre ad avere rispettato i requisiti tecnici indicati dal
decreto di cui all'articolo 11, si sono anche meritoriamente distinti per l'impegno nel perseguire
le finalità indicate dalla presente legge;
d) promuove, di concerto con il Ministero del lavoro e delle politiche sociali, progetti, iniziative e
programmi finalizzati al miglioramento e alla diffusione delle tecnologie assistive e per
l'accessibilità;
e) promuove, con le altre amministrazioni interessate, sentita la Conferenza permanente per i
rapporti tra lo Stato, le regioni e le province autonome di Trento e di Bolzano, l'erogazione di
finanziamenti finalizzati alla diffusione tra i disabili delle tecnologie assistive e degli strumenti
informatici dotati di configurazioni particolari e al sostegno di progetti di ricerca nel campo
dell'innovazione tecnologica per la vita indipendente e le pari opportunità dei disabili;
f) favorisce, di concerto con il Ministero del lavoro e delle politiche sociali e con il Ministro per le
pari opportunità, lo scambio di esperienze e di proposte fra associazioni di disabili, associazioni
di sviluppatori competenti in materia di accessibilità, amministrazioni pubbliche, operatori
economici e fornitori di hardware e software, anche per la proposta di nuove iniziative;
g) promuove, di concerto con i Ministeri dell'istruzione, dell'università e della ricerca e per i beni
e le attività culturali, iniziative per favorire l'accessibilità alle opere multimediali, anche attraverso
specifici progetti di ricerca e sperimentazione con il coinvolgimento delle associazioni delle
persone disabili; sulla base dei risultati delle sperimentazioni sono indicate, con decreto
emanato di intesa dai Ministri interessati, le regole tecniche per l'accessibilità alle opere
multimediali;
h) definisce, di concerto con il Dipartimento della funzione pubblica della Presidenza del
Consiglio dei ministri, gli obiettivi di accessibilità delle pubbliche amministrazioni nello sviluppo
dei sistemi informatici, nonché l'introduzione delle problematiche relative all'accessibilità nei
programmi di formazione del personale.
2. Le regioni, le province autonome e gli enti locali vigilano sull'attuazione da parte dei propri
uffici delle disposizioni della presente legge.
16
CAPITOLO 2 – ACCESSIBILITÀ
Art. 8 - Formazione
1. Le amministrazioni di cui all'articolo 3, comma 1, nell'ambito delle attività di cui al comma 4
dell'articolo 7 del decreto legislativo 30 marzo 2001, n. 165, nonché dei corsi di formazione
organizzati dalla Scuola superiore della pubblica amministrazione, e nell'ambito delle attività per
l'alfabetizzazione informatica dei pubblici dipendenti di cui all'articolo 27, comma 8, lettera g),
della legge 16 gennaio 2003, n. 3, inseriscono tra le materie di studio a carattere fondamentale
le problematiche relative all'accessibilità e alle tecnologie assistive.
2. La formazione professionale di cui al comma 1 è effettuata con tecnologie accessibili.
3. Le amministrazioni di cui all'articolo 3, comma 1, nell'ambito delle disponibilità di bilancio,
predispongono corsi di aggiornamento professionale sull'accessibilità.
Art. 9 - Responsabilità
1. L'inosservanza delle disposizioni della presente legge comporta responsabilità dirigenziale e
responsabilità disciplinare ai sensi degli articoli 21 e 55 del decreto legislativo 30 marzo 2001, n.
165, ferme restando le eventuali responsabilità penali e civili previste dalle norme vigenti.
Art. 10 - Regolamento di attuazione
1. Entro novanta giorni dalla data di entrata in vigore della presente legge, con regolamento
emanato ai sensi dell'articolo 17, comma 1, della legge 23 agosto 1988, n. 400, sono definiti:
a) i criteri e i princìpi operativi e organizzativi generali per l'accessibilità;
b) i contenuti di cui all'articolo 6, comma 2;
c) i controlli esercitabili sugli operatori privati che hanno reso nota l'accessibilità dei propri siti e
delle proprie applicazioni informatiche;
d) i controlli esercitabili sui soggetti di cui all'articolo 3, comma 1.
2. Il regolamento di cui al comma 1 è adottato previa consultazione con le associazioni delle
persone disabili maggiormente rappresentative, con le associazioni di sviluppatori competenti
in materia di accessibilità e di produttori di hardware e software e previa acquisizione del parere
delle competenti Commissioni parlamentari, che devono pronunciarsi entro quarantacinque
giorni dalla richiesta, e d'intesa con la Conferenza unificata di cui all'articolo 8 del decreto
legislativo 28 agosto 1997, n. 281.
Art. 11 - Requisiti tecnici
1. Entro centoventi giorni dalla data di entrata in vigore della presente legge il Ministro per
l'innovazione e le tecnologie, consultate le associazioni delle persone disabili maggiormente
rappresentative, con proprio decreto stabilisce, nel rispetto dei criteri e dei princìpi indicati dal
regolamento di cui all'articolo 10:
a) le linee guida recanti i requisiti tecnici e i diversi livelli per l'accessibilità;
b) le metodologie tecniche per la verifica dell'accessibilità dei siti INTERNET, nonché i
programmi di valutazione assistita utilizzabili a tale fine.
17
CAPITOLO 2 – ACCESSIBILITÀ
Art. 12 - Normative internazionali
1. Il regolamento di cui all'articolo 10 e il decreto di cui all'articolo 11 sono emanati osservando
le linee guida indicate nelle comunicazioni, nelle raccomandazioni e nelle direttive
sull'accessibilità dell'Unione europea, nonché nelle normative internazionalmente riconosciute
e tenendo conto degli indirizzi forniti dagli organismi pubblici e privati, anche internazionali,
operanti nel settore.
2. Il decreto di cui all'articolo 11 è periodicamente aggiornato, con la medesima procedura, per
il tempestivo recepimento delle modifiche delle normative di cui al comma 1 e delle innovazioni
tecnologiche nel frattempo intervenute.
2.3 – REQUISITI PER L'ACCESSIBILITÀ
L'allegato A del decreto ministeriale del 8 luglio 2005 definisce i 22
requisiti che i siti devono rispettare per ritenersi accessibili. Ne riportiamo
qui di seguito il testo.
Requisito 1
Realizzare le pagine e gli oggetti al loro interno utilizzando tecnologie definite da grammatiche
formali pubblicate nelle versioni più recenti disponibili quando sono supportate dai programmi
utente. Utilizzare elementi ed attributi in modo conforme alle specifiche, rispettandone l’aspetto
semantico. In particolare, per i linguaggi a marcatori HTML (HypertText Markup Language) e
XHTML (eXtensible HyperText Markup Language):
A) per tutti i siti di nuova realizzazione utilizzare almeno la versione 4.01 dell’HTML o
preferibilmente la versione 1.0 dell’XHTML, in ogni caso con DTD (Document Type Definition Definizione del Tipo di Documento) di tipo Strict;
B) per i siti esistenti, in sede di prima applicazione, nel caso in cui non sia possibile ottemperare
al punto A) è consentito utilizzare la versione dei linguaggi sopra indicati con DTD Transitional,
ma con le seguenti avvertenze:
1) evitare di utilizzare, all’interno del linguaggio a marcatori con il quale la pagina è realizzata,
elementi ed attributi per definirne le caratteristiche di presentazione della pagina (per esempio,
caratteristiche dei caratteri del testo, colori del testo stesso e dello sfondo, ecc.), ricorrendo
invece ai Fogli di Stile CSS (Cascading Style Sheets) per ottenere lo stesso effetto grafico;
18
CAPITOLO 2 – ACCESSIBILITÀ
2) evitare la generazione di nuove finestre; ove ciò non fosse possibile, avvisare esplicitamente
l’utente del cambiamento del focus;
3) pianificare la transizione dell’intero sito alla versione con DTD Strict del linguaggio utilizzato,
dandone comunicazione alla Presidenza del Consiglio dei ministri – Dipartimento per
l’innovazione e le tecnologie e al Centro nazionale per l’informatica nella pubblica
amministrazione.
Requisito 2
Non è consentito l’uso dei frame nella realizzazione di nuovi siti. In sede di prima applicazione,
per i siti Web esistenti già realizzati con frame è consentito l’uso di HTML 4.01 o XHTML 1.0 con
DTD frameset, ma con le seguenti avvertenze:
A) evitare di utilizzare, all’interno del linguaggio a marcatori con il quale la pagina è realizzata,
elementi ed attributi per definirne le caratteristiche di presentazione della pagina (per esempio,
caratteristiche dei caratteri del testo, colori del testo stesso e dello sfondo, ecc.), ricorrendo
invece ai Fogli di Stile CSS (Cascading Style Sheets) per ottenere lo stesso effetto grafico;
B) fare in modo che ogni frame abbia un titolo significativo per facilitarne l’identificazione e la
navigazione; se necessario, descrivere anche lo scopo dei frame e la loro relazione;
C) pianificare la transizione a XHTML almeno nella versione 1.0 con DTD Strict dell’intero sito
dandone comunicazione alla Presidenza del Consiglio dei ministri – Presidenza del Consiglio
dei ministri – Dipartimento per l’innovazione e le tecnologie e al Centro nazionale per
l’informatica nella pubblica amministrazione.
Requisito 3
Fornire una alternativa testuale equivalente per ogni oggetto non di testo presente in una
pagina e garantire che quando il contenuto non testuale di un oggetto cambia dinamicamente
vengano aggiornati anche i relativi contenuti equivalenti predisposti; l’alternativa testuale
equivalente di un oggetto non testuale deve essere commisurata alla funzione esercitata
dall’oggetto originale nello specifico contesto.
Requisito 4
Garantire che tutti gli elementi informativi e tutte le funzionalità siano disponibili anche in
assenza del particolare colore utilizzato per presentarli nella pagina.
Requisito 5
Evitare oggetti e scritte lampeggianti o in movimento le cui frequenze di intermittenza possano
provocare disturbi da epilessia fotosensibile o disturbi della concentrazione, ovvero possano
causare il malfunzionamento delle tecnologie assistive utilizzate; qualora esigenze informative
richiedano comunque il loro utilizzo, avvertire l’utente del possibile rischio prima di presentarli e
predisporre metodi che consentano di evitare tali elementi.
19
CAPITOLO 2 – ACCESSIBILITÀ
Requisito 6
Garantire che siano sempre distinguibili il contenuto informativo (foreground) e lo sfondo
(background), ricorrendo a un sufficiente contrasto (nel caso del testo) o a differenti livelli sonori
(in caso di parlato con sottofondo musicale); evitare di presentare testi in forma di immagini;
ove non sia possibile, ricorrere agli stessi criteri di distinguibilità indicati in precedenza.
Requisito 7
Utilizzare mappe immagine sensibili di tipo lato client piuttosto che lato server, salvo il caso in
cui le zone sensibili non possano essere definite con una delle forme geometriche predefinite
indicate nella DTD adottata.
Requisito 8
In caso di utilizzo di mappe immagine lato server, fornire i collegamenti di testo alternativi
necessari per ottenere tutte le informazioni o i servizi raggiungibili interagendo direttamente con
la mappa.
Requisito 9
Per le tabelle dati usare gli elementi (marcatori) e gli attributi previsti dalla DTD adottata per
descrivere i contenuti e identificare le intestazioni di righe e colonne.
Requisito 10
Per le tabelle dati usare gli elementi (marcatori) e gli attributi previsti nella DTD adottata per
associare le celle di dati e le celle di intestazione che hanno due o più livelli logici di intestazione
di righe o colonne.
Requisito 11
Usare i fogli di stile per controllare la presentazione dei contenuti e organizzare le pagine in
modo che possano essere lette anche quando i fogli di stile siano disabilitati o non supportati.
Requisito 12
La presentazione e i contenuti testuali di una pagina devono potersi adattare alle dimensioni
della finestra del browser utilizzata dall’utente senza sovrapposizione degli oggetti presenti o
perdita di informazioni tali da rendere incomprensibile il contenuto, anche in caso di
ridimensionamento, ingrandimento o riduzione dell’area di visualizzazione o dei caratteri
rispetto ai valori predefiniti di tali parametri.
Requisito 13
In caso di utilizzo di tabelle a scopo di impaginazione, garantire che il contenuto della tabella sia
comprensibile anche quando questa viene letta in modo linearizzato e utilizzare gli elementi e
gli attributi di una tabella rispettandone il valore semantico definito nella specifica del
linguaggio a marcatori utilizzato.
20
CAPITOLO 2 – ACCESSIBILITÀ
Requisito 14
Nei moduli (form), associare in maniera esplicita le etichette ai rispettivi controlli, posizionandole
in modo che sia agevolata la compilazione dei campi da parte di chi utilizza le tecnologie
assistive.
Requisito 15
Garantire che le pagine siano utilizzabili quando script, applet, o altri oggetti di programmazione
sono disabilitati oppure non supportati; ove ciò non sia possibile fornire una spiegazione
testuale della funzionalità svolta e garantire una alternativa testuale equivalente, in modo
analogo a quanto indicato nel requisito 3.
Requisito 16
Garantire che i gestori di eventi che attivano script, applet o altri oggetti di programmazione o
che possiedono una propria specifica interfaccia, siano indipendenti da uno specifico
dispositivo di input.
Requisito 17
Garantire che le funzionalità e le informazioni veicolate per mezzo di oggetti di
programmazione, oggetti che utilizzano tecnologie non definite da grammatiche formali
pubblicate, script e applet siano direttamente accessibili.
Requisito 18
Nel caso in cui un filmato o una presentazione multimediale siano indispensabili per la
completezza dell’informazione fornita o del servizio erogato, predisporre una alternativa testuale
equivalente, sincronizzata in forma di sotto-titolazione o di descrizione vocale, oppure fornire un
riassunto o una semplice etichetta per ciascun elemento video o multimediale tenendo conto
del livello di importanza e delle difficoltà di realizzazione nel caso di trasmissioni in tempo reale.
Requisito 19
Rendere chiara la destinazione di ciascun collegamento ipertestuale (link) con testi significativi
anche se letti indipendentemente dal proprio contesto oppure associare ai collegamenti testi
alternativi che possiedano analoghe caratteristiche esplicative, nonché prevedere meccanismi
che consentano di evitare la lettura ripetitiva di sequenze di collegamenti comuni a più pagine.
Requisito 20
Nel caso che per la fruizione del servizio erogato in una pagina è previsto un intervallo di tempo
predefinito entro il quale eseguire determinate azioni, è necessario avvisare esplicitamente
l’utente, indicando il tempo massimo consentito e le alternative per fruire del servizio stesso.
21
CAPITOLO 2 – ACCESSIBILITÀ
Requisito 21
Rendere selezionabili e attivabili tramite comandi da tastiere o tecnologie in emulazione di
tastiera o tramite sistemi di puntamento diversi dal mouse i collegamenti presenti in una
pagina; per facilitare la selezione e l’attivazione dei collegamenti presenti in una pagina è
necessario garantire che la distanza verticale di liste di link e la spaziatura orizzontale tra link
consecutivi sia di almeno 0,5 em, le distanze orizzontale e verticale tra i pulsanti di un modulo
sia di almeno 0,5 em e che le dimensioni dei pulsanti in un modulo siano tali da rendere
chiaramente leggibile l’etichetta in essi contenuta.
Requisito 22
Per le pagine di siti esistenti che non possano rispettare i suelencati requisiti (pagine non
accessibili), in sede di prima applicazione, fornire il collegamento a una pagina conforme a tali
requisiti, recante informazioni e funzionalità equivalenti a quelle della pagina non accessibile ed
aggiornata con la stessa frequenza, evitando la creazione di pagine di solo testo; il
collegamento alla pagina conforme deve essere proposto in modo evidente all’inizio della
pagina non accessibile.
2.3.1 – DRUPAL E I REQUISITI
Passiamo
in
rassegna
i
22
requisiti
tecnici
per
l'accessibilità
condensandone il contenuto in poche parole e vediamo come si comporta
Drupal in confronto ad essi.
1. Usare linguaggi standard e utilizzarli in modo corretto
Drupal utilizza codice XHTML e CSS valido con intestazioni corrette.
La responsabilità della correttezza del codice inserito è in gran parte
dell'utente che inserisce i contenuti nel sito. Strumenti di validazione
automatica possono venire in aiuto in tal senso. L'utente dovrà
inoltre rispettare il valore semantico degli elementi ed attributi del
linguaggio XHTML.
2. L'uso dei frame non è consentito
Per quanto riguarda il Front-End Drupal non fa uso di frame.
Discorso differente per il Back-End, ma la legge Stanca non fa
esplicita richiesta di accessibilità per il lato amministrativo.
22
CAPITOLO 2 – ACCESSIBILITÀ
3. Fornire alternative testuali equivalenti agli oggetti non di
testo
Il
rispetto
di
questo
requisito
dipende
dall'utente
che
deve
premurarsi di compilare l'attributo “alt” per i contenuti di tipo
immagine che abbiano una valenza informativa, mentre per le
immagini decorative l'attributo alt deve essere lasciato vuoto.
4. Non assegnare significato all'informazione solo attraverso il
colore
Per esempio i link all'interno di contenuti testuali dovranno essere
presentati con sottolineatura. Il tema predefinito di Drupal PA
rispetta questo requisito. Nel caso di temi che non lo facciano
dovremo andare a modificare i fogli di stile CSS.
5. Evitare oggetti lampeggianti che potrebbero causare attacchi
epilettici o disturbare la concentrazione
Di default Drupal PA non utilizza nessun tipo di immagine a
intermittenza rapida. È compito dell'utente editore rispettare questo
requisito.
6. Garantire che il contenuto informativo sia ben distinguibile
dallo sfondo
Il tema di Drupal PA utilizza testo nero su sfondo bianco. In caso di
modifiche ci vengono in aiuto strumenti software che calcolando il
contrasto tra due differenti colori ci consentono di rispettare il
requisito.
7. Usare mappe immagini lato client
In Drupal è disponibile un modulo aggiuntivo che facilita la creazione
di mappe immagini.
23
CAPITOLO 2 – ACCESSIBILITÀ
8.
Fornire link testuali alternativi per le mappe immagini lato
server
Sarà compito dell'utente editore formattare la mappa immagine
compatibilmente con la richiesta del requisito.
9.
Per le tabelle usare marcatori e attributi previsti dalla DTD
CKEditor è un modulo aggiuntivo per Drupal che funge da editor
per l'inserimento di contenuti e tra le sue funzionalità dispone
anche di un'interfaccia per la creazione di tabelle nel rispetto delle
richieste di questo requisito.
10. Nelle tabelle associare le celle dati alle relative intestazioni
Per le tabelle dati più complesse è compito dell'utente editore la
corretta formattazione della stessa.
11. Usare i fogli di stile per controllare la presentazione
Drupal utilizza i fogli di stile CSS per controllare la separazione tra
contenuto e presentazione ed in generale ogni tema grafico
sviluppato per Drupal è basato sui CSS.
12. Rendere
la
struttura
del
sito
e
i
suoi
contenuti
ridimensionabili
Drupal PA utilizza un tema grafico con impostazione della
grandezza dei caratteri in valore relativo e con un layout che in
gerco tecnico si definisce “liquido”, cioè in grado di adattarsi alle
dimensioni della finestra del browser e di ridimensionarsi in base
alla dimensione del testo dell'utente. Per gli altri temi grafici il
rispetto di questo requisito dovrà essere verificato caso per caso.
24
CAPITOLO 2 – ACCESSIBILITÀ
13. In tabelle di impaginazione verificare la linearizzazione dei
contenuti e rispettare gli attributi semantici
Il tema grafico di Drupal PA non fa uso di tabelle per definirne il
layout ma utilizza i CSS. Esistono altri temi che ne fanno uso ma il
loro utilizzo è comunque sconsigliato in quanto meno indicato in
termini di accessibilità dei contenuti e di correttezza formale del
linguaggio di marcatura.
14. Etichettare i campi delle form
L'utente editore dovrà essere istruito su come debbano essere
create le form in modo da soddisfare il requisito. Guide come
questa: http://webaccessibile.org/le-basi/moduli-form-accessibili,
o
questa:
http://webaim.org/techniques/forms/controls
(in
inglese) spiegano come realizzare form accessibili.
15. Garantire l'accessibilità anche in presenza di oggetti di
programmazione
L'installazione base di Drupal PA non presenta problemi con
questo requisito. In caso d'implementazione di applet o script
andrà verificata la funzionalità del sito con questi oggetti
disabilitati e fornita un'alternativa testuale ove necessario.
16. Rendere i gestori di eventi indipendenti dal dispositivo di
input
Anche qui nessun problema nell'installazione base di Drupal PA.
Bisognerà verificare che i gestori di eventi per gli script e applet
che andremo ad inserire nel sito maneggino gli eventi con
attributi che non facciano riferimento ad un solo dispositivo di
input.
25
CAPITOLO 2 – ACCESSIBILITÀ
17. Rendere accessibili i contenuti generati da oggetti di
programmazione
Il rispetto del requisito dipende dalla corretta implementazione di
tutti gli oggetti di programmazione, quali ad esempio possono
essere interfacce in Flash e Java, plug-in audio, video o PDF.
18. Fornire sottotitolazione e descrizione vocale per i contenuti
multimediali
Nessun problema per quanto riguarda Drupal nello specifico. In
presenza
di
contenuti
multimediali
dovremo
implementare
alternative che prendano in considerazione le disabilità di tipo
uditivo e visivo.
19. Identificare
chiaramente
la
destinazione
di
ogni
collegamento
Questo requisito va tenuto in considerazione nella fase di
creazione del sito e dei successivi inserimenti di contenuti.
Saranno da implementare titoli per i link non espliciti, link per
saltare direttamente al contenuto della pagina e tasti di scelta
rapida per spostarsi da una parte all'altra della pagina.
20. Avvisare l'utente della presenza di contenuti temporizzati
Di base Drupal PA non prevede nessuna funzionalità a tempo.
21. Rendere i collegamenti attivabili da tastiera e spaziarli
sufficientemente tra loro
Essendo la struttura delle pagine gestita tramite CSS è facile
verificare ed adattare i contenuti alla richiesta del requisito.
26
CAPITOLO 2 – ACCESSIBILITÀ
22. Creare alternative accessibili di pagine esistenti che non
possono essere rese tali
Questo requisito non si applica per i siti di nuova creazione e
dovremo quindi creare con Drupal PA pagine che rispettino in
partenza i precedenti 21 requisiti.
Possiamo quindi concludere che Drupal PA è un CMS ben progettato che
rispetta i moderni standard web e che si presta molto bene al rispetto
della legge Stanca e dei suoi 22 requisiti tecnici. Buona parte del successo
nella realizzazione e gestione di un sito accessibile dipende dagli utenti
che interagiranno con esso, i quali dovranno essere formati nelle tecniche
e metodologie di inserimento dei contenuti in modo da rispettare tutte le
regole per l'accessibilità.
Il bollino che attesta il superamento della verifica
tecnica ai 22 requisiti per l'accessibilità
27
CAPITOLO 2 – ACCESSIBILITÀ
2.4 – STRUMENTI DI SUPPORTO
Segnaliamo alcune risorse e strumenti a supporto dell'utente alle prese
con la creazione di un sito web accessibile. Dividiamo questa carrellata in
due categorie distinte: I Software, quali plug-in ed estensioni per i
browser, che implementano nuove funzionalità, e i servizi online, quali
validatori e test, che analizzano le nostre pagine ed aiutano nella
rilevazione e correzione di eventuali errori.
Software:
•
La Barra Dell'accessibilità (http://goo.gl/i30xY)
Plug-in per Internet Explorer, è uno strumento molto ricco, creato
con lo scopo di supportare la verifica manuale di un gran numero di
aspetti riguardanti l'accessibilità di una pagina web.
•
Web Developer (http://goo.gl/LxRuS)
Estensione per Firefox, aggiunge una toolbar che integra molti
strumenti che semplificano e velocizzano il lavoro dello sviluppatore
web. Utile anche per interventi su pagine web già esistenti.
•
Firebug (http://goo.gl/1Rece)
Estensione per Firefox, integra una serie di strumenti di sviluppo
che permettono di eseguire il debug, monitorare e modificare CSS,
HTML e JavaScript nelle pagine web. Espandibile con un modulo che
aggiunge funzionalità specifiche per Drupal.
•
Fangs Screen Reader Emulator (http://goo.gl/YjXCY)
Estensione per Firefox, è un emulatore di lettore di schermo.
Presenta una versione solo testo di una pagina web analoga a come
verrebbe letta da uno screen reader e permette quindi di capire se
il nostro sito risulta fruibile da utenti affetti da cecità.
28
CAPITOLO 2 – ACCESSIBILITÀ
•
NoScript (http://goo.gl/9Ibn5)
Estensione per Firefox, permette selettivamente di disattivare
script, elementi Flash o Java in modo da poter testare l'accessibilità
del sito in configurazioni in cui queste tecnologie non siano
disponibili.
•
Contrast Analyser (http://goo.gl/oyV4O)
Software disponibile per Windows e Mac, permette il controllo delle
combinazioni di colori di primo piano e sfondo, allo scopo di
determinare se essi garantiscono una buona visibilità come richiesto
dal requisito numero 6 della legge italiana per l'accessibilità.
Strumenti online:
•
W3C Markup Validation Service (http://goo.gl/pePlP)
Servizio di validazione online del W3C per la correttezza del codice
HTML e XHTML inserito nelle nostre pagine web. Lo strumento
riporta, accompagnandoli con una breve spiegazione, gli errori
rilevati, assistendoci quindi nelle operazioni di correzione.
•
W3C CSS Validation Service (http://goo.gl/IJo8u)
Servizio di validazione online del W3C per la correttezza dei fogli di
stile CSS presenti nel nostro sito web. Anche qui viene fornito un
resoconto dettagliato con avvertenze ed errori rilevati.
•
W3C Link Checker (http://goo.gl/rfcs8)
Servizio online del W3C che verifica la validità dei link e ancore
presenti nel nostro sito web.
•
Vischeck (http://goo.gl/sTvF1)
Simulatore di percezione cromatica per la verifica della leggibilità del
sito anche in presenza di disabilità nella percezione dei colori.
29
CAPITOLO 2 – ACCESSIBILITÀ
•
Cynthia Says (http://goo.gl/kd5jY)
Servizio di validazione online per pagine e siti web nei confronti dei
criteri di accessibilità redatti dalla Section 508 degli Stati Uniti e
dalle WCAG del WAI con i suoi tre livelli di priorità. Compatibile
quindi anche con i 22 requisiti della legge italiana che fa riferimento
alle due regolamentazioni sopracitate.
•
Wave (http://goo.gl/ht4e5)
Servizio online di validazione automatica per quanto concerne gli
aspetti legati all'accessibilità di un sito web. Fornisce un feedback
non in forma testuale, ma come serie di icone accoppiate agli
elementi della pagina, ciascuna dotata di uno specifico significato.
•
CSS Colour Contrast Test (http://goo.gl/UEEJw)
Servizio online che analizza i file CSS verificando esclusivamente che
il contrasto fra colore principale e sfondo di una pagina sia
sufficientemente elevato e che le dimensioni dei caratteri siano
specificate in valori relativi e non assoluti.
30
CAPITOLO 3 – INSTALLAZIONE
3.1 – INSTALLAZIONE SERVER WEB
Il primo passo per lo sviluppo in locale del portale è quello di dotare la
nostra macchina delle funzionalità tipiche di un server web. Per fare ciò si
necessita l'installazione delle seguenti componenti:
•
Apache
È il software che funge da piattaforma server web vera e propria
realizzando
le
funzioni
di
trasporto
delle
informazioni,
di
internetworking e di collegamento.
•
PHP
Acronimo ricorsivo di “PHP: Hypertext Preprocessor” è il linguaggio
di scripting utilizzato da Drupal, è quindi necessario installare il
software interprete di tale linguaggio.
•
MySQL
Drupal per funzionare ha bisogno di un database in cui scrivere tutte
le informazioni relative alle configurazioni e ai contenuti. MySQL è il
Database Management System che utilizzeremo.
•
phpMyAdmin
Questo strumento consente di amministrare in modo semplificato i
database di MySQL attraverso un'interfaccia grafica visualizzabile da
browser.
Questo tipo di piattaforma di sviluppo prende il nome di AMP (acronimo di
Apache MySQL PHP) e nello specifico si parla di WAMP o LAMP a seconda
che questo ambiente di sviluppo sia installato su macchine con sistema
operativo Windows o Linux.
31
CAPITOLO 3 – INSTALLAZIONE
Esistono dei software che integrano in un unico pacchetto d'installazione
tutte le componenti sopracitate e a volte anche componenti aggiuntive
quali ad esempio server FTP, mail server, etc. Il loro grande pregio oltre
alla rapidità d'installazione è dato dal fatto che le componenti presenti
sono già configurate per poter operare l'una insieme all'altra, il tutto a
favore di una grande semplicità d'utilizzo.
Il pacchetto che si è scelto di utilizzare è EasyPHP. Scaricabile dal sito
ufficiale www.easyphp.org, e giunto alla release 5.3.5.0, comprende al suo
interno i componenti aggiornati alle versioni seguenti:
•
Apache 2.2.17
•
PHP 5.3.5
•
MySQL 5.1.54
•
phpMyAdmin 3.3.9
Una volta installato EasyPHP è possibile interfacciarsi con il server web
attraverso l'indirizzo di localhost (127.0.0.1).
Il menù di amministrazione di EasyPHP
32
CAPITOLO 3 – INSTALLAZIONE
In quanto EasyPHP è compatibile solamente con il sistema operativo
Microsoft Windows, per uno sviluppo in ambiente Linux è necessario
utilizzare un software differente.
XAMPP è un software analogo ad EasyPHP che in più ha il vantaggio di
essere multipiattaforma, quindi compatibile con diversi sistemi operativi.
È disponibile per il download dal sito ufficiale www.apachefriends.org.
Come per EasyPHP, una volta installato ed avviato, digitando l'indirizzo di
localhost
127.0.0.1
da
browser
è
possibile
accedere
al
menù
di
amministrazione.
Il menù di amministrazione di XAMPP
33
CAPITOLO 3 – INSTALLAZIONE
3.2 – CREAZIONE DATABASE
Preventivamente
all'installazione
di
Drupal
è
necessario
creare
un
database che poi Drupal potrà utilizzare popolandolo con i propri dati di
configurazione e successivamente con i contenuti del sito che andremo a
creare. La creazione del database è molto semplice e può essere
effettuata
mediante
phpMyAdmin.
Accediamo
alla
sezione
di
amministrazione di EasyPHP e clicchiamo sulla voce “Manage MySQL with
phpMyAdmin”, verrà visualizzata la pagina principale dell'interfaccia di
amministrazione di phpMyAdmin, qui dovremo scegliere un nome per il
nostro nuovo database e cliccare sul pulsante “Crea”.
Il menù di amministrazione di phpMyAdmin
Fatto questo, phpMyAdmin ci segnalerà se il database è stato creato
correttamente.
Messaggio di conferma avvenuta creazione DB
34
CAPITOLO 3 – INSTALLAZIONE
3.3 – INSTALLAZIONE DRUPAL PA
Possiamo procedere ora all'installazione vera e propria di Drupal PA.
Prima di tutto scarichiamo Drupal PA dal sito ufficiale www.drupalpa.it, la
versione attualmente disponibile è la 6.19. Il file scaricato è un archivio
compresso, dobbiamo decomprimerlo e copiarlo nella cartella di nome
www all'interno della directory d'installazione di EasyPHP, mentre per
guanto riguarda XAMPP, la cartella in cui dobbiamo copiare Drupal PA si
chiama htdocs. Ora bisogna entrare nella sottocartella di Drupal PA di
percorso \sites\default, creare una copia del file default.settings.php e
rinominarla
in
settings.php
e
per
evitare
possibili
problemi
con
l'installazione dobbiamo modificare i due file sopracitati inserendo alla riga
149
il
seguente
comando:
ini_set('max_execution_time','120');.
Per
riuscire a fare ciò facilmente è necessario usare un editor che abbia la
numerazione delle righe come per esempio Notepad++ che ha anche il
vantaggio di essere gratuito, è possibile scaricarlo dal sito ufficiale
www.notepad-plus-plus.org. Assicuriamoci che i servizi Apache e MySQL di
EasyPHP
siano
amministrazione.
avviati
Nella
ed
accediamo
sezione
Local
quindi
Web
è
al
suo
presente
menù
Drupal
di
PA,
clicchiamoci per avviare l'installazione.
Drupal PA nel menù di amministrazione di EasyPHP
Per quanto riguarda XAMPP, per avviare l'installazione dovremo invece
digitare direttamente nella barra degli indirizzi del browser l'indirizzo:
127.0.0.1/drupalpa.
35
CAPITOLO 3 – INSTALLAZIONE
Verrà visualizzata la seguente schermata:
Installazione Drupal PA – Configurazione Database
Qui dovremo inserire i dati relativi al database che abbiamo creato
precedentemente: il nome del database, il nome utente e la password. Le
opzioni avanzate possono essere trascurate. Clicchiamo su “Salva e
continua”. Nella schermata successiva dovremo inserire il nome e l'email
per il sito e definire il profilo amministratore con nome, email e password.
Se supportati dal server web attiviamo gli URL semplificati in quanto
rendono più semplice il processo di indicizzazione nei motori di ricerca.
Clicchiamo su “Salva e continua”. L'installazione è completa. Trascuriamo il
messaggio d'errore relativo all'email in quanto lavorando in locale non
abbiamo configurato un mail server. Clicchiamo sul logo in alto a sinistra
per accedere al nostro nuovo sito.
36
CAPITOLO 3 – INSTALLAZIONE
3.4 – AGGIORNAMENTO DRUPAL PA
Completata
l'installazione
la
prima
cosa
da
fare
è
aggiornare
le
componenti di Drupal PA. Ciò è molto importante perché nuove versioni
possono correggere vulnerabilità e problemi di sicurezza oltre che riparare
ad eventuali bug o aggiungere nuove feature. Drupal è in grado di
controllare
autonomamente
e
periodicamente
la
presenza
di
aggiornamenti e ne segnala la presenza nel menù d'amministrazione alla
voce “Rapporti → Aggiornamenti disponibili”. Effettuata la verifica notiamo
la disponibilità di nuove versioni per il core e i moduli installati che
possiamo scaricare velocemente grazie ai link presenti nella pagina.
Drupal segnala la presenza di aggiornamenti
I moduli vanno aggiornati copiandoli nel percorso \sites\all\modules della
cartella di installazione di Drupal PA, sovrascrivendo i file già presenti.
Eseguiamo
poi
da
browser
il
file
update.php
per
completare
l'aggiornamento. La procedura di aggiornamento del core è simile a quella
dei moduli, in cui dobbiamo sovrascrivere i vecchi file con quelli nuovi,
tranne che per il file settings.php presente in \sites\default.
Drupal è aggiornato
37
CAPITOLO 4 – LA ONLUS AITIM
4.1 – PRESENTAZIONE
AITIM, Associazione Italiana di Telemedicina e Informatica Medica, è la
Onlus per la quale si è realizzato il portale internet. Riportiamo qui di
seguito una breve presentazione tratta da informaticisenzafrontiere.org
per capire di cosa si occupi e quali siano le sue aree di interesse:
AITIM è l’Associazione che vuole essere un punto d’incontro e di aggregazione
di quanti si occupano, a vari livelli, di ricerca, sviluppo ed applicazione
dell’informatica e della telematica e ITC in medicina.
Dal 2000 AITIM attraverso varie iniziative (incontri, corsi, studi, analisi e ricerche)
promuove la sanità elettronica (E-Health) coinvolgendo le istituzioni sanitarie a
livello locale, regionale, nazionale ed internazionale, i centri di ricerca e sviluppo,
le università, le aziende pubbliche e private del settore e le associazioni
scientifiche in medicina ed in informatica, le organizzazioni di operatori sanitari
e di cittadini / pazienti, per diffondere le discipline scientifiche e le applicazioni
telematiche e informatiche in medicina nel sistema sanitario.
Le aree d’interesse dell’associazione sono:
•
Telemedicina e teleassistenza
•
Teleconsulto / telediagnosi
•
Reti sanitarie e territoriali
•
Record medico e carte sanitarie
•
Database clinici ed epidemiologici
38
CAPITOLO 4 – LA ONLUS AITIM
•
Sistemi informativi ospedalieri e sanitari
•
Internet in sanità
•
Formazione a distanza per operatori sanitari
•
Sistemi di supporto alla decisione medica
•
Software statistico in campo sanitario ed in epidemiologia
Il logo della Onlus
4.2 – SPECIFICHE DEL PORTALE
Per la realizzazione del portale sono state seguite le indicazoni del ing.
Domenico M. Pisanelli, segretario della Onlus AITIM. Come punto di
partenza per avere un'idea su come siano strutturati i portali internet delle
Onlus che si occupano di ricerca medica e quali tipi di contenuti essi
debbano contenere, sono stati presi in esame il sito dell'AMIA, American
Medical Informatics Association, www.amia.org e il portale della Società
Italiana di Chirurgia, www.sichirurgia.org, dei quali vengono riportati qui
di seguito una vista delle loro home page.
39
CAPITOLO 4 – LA ONLUS AITIM
www.amia.org
www.sichirurgia.org
40
CAPITOLO 4 – LA ONLUS AITIM
Possiamo osservare che tra le funzioni che questo tipo di portale deve
svolgere ci sono quelle di strumento informativo per i nuovi utenti, dove
troveremo quindi una presentazione della Onlus, la sua storia, gli obiettivi,
la struttura organizzativa e la lista dei soci con i relativi contatti. Il portale
deve prevedere inoltre la possibilità di registrazione per permettere agli
utenti un accesso personalizzato in base al ruolo ricoperto e consentire
così un alto grado di interattività al suo interno che altrimenti non sarebbe
consentito. La funzione più importante è quella di informare e aggiornare
costantemente gli utenti riguardo tutte le attività (iniziative, congressi,
progetti, eventi…) promosse dalla Onlus. Questo tipo di contenuti dovrà
avere un'ampia visibilità e può essere anche integrato con strumenti quali
newsletter e feed RSS. I due portali presi in esame sono strutturati in
maniera analoga: presentano un menù orizzontale in cima e un layout a
tre colonne, con il contenuto principale al centro, un menù verticale a
sinistra e blocchi funzionali dislocati sia a destra che a sinistra. Questo tipo
di impaginazione è ormai utilizzato per siti internet di vario genere in
quanto presenta una struttura chiara e ben suddivisa che permette
un'interazione con il sito in maniera facile e naturale. Partendo da questi
presupposti ha inizio la realizzazione del portale.
41
CAPITOLO 5 – REALIZZAZIONE
5.1 – IL TEMA GRAFICO
Il primo passo da affrontare nella realizzazione del portale internet per la
Onlus AITIM è quello della scelta del tema grafico. Sul sito ufficiale
drupal.org sono disponibili centinaia di temi tra cui poter scegliere,
liberamente scaricabili e utilizzabili. Esso dovrà essere scelto in modo che
sia coerente e si possa adattare facilmente alle specifiche richieste dal
segretario della Onlus. Dovendo realizzare un portale conforme alla legge
Stanca, un altro aspetto di fondamentale importanza da tenere in
considerazione è che il tema dovrà essere accessibile, cioè concepito
secondo
alcuni
criteri
che
prevedano
il
rispetto
dei
requisiti
per
l'accessibilità. Tra questi criteri citiamo:
•
Conformità agli standard XHTML 1.0 Strict e CSS 2.1
•
Layout liquido senza tabelle
•
Compatibilità multi-browser
•
Funzionalità di salta menù
•
Dimensione dei caratteri relativa
Alcuni validi temi accessibili sono i seguenti:
•
Aberdeen
•
Clean
•
Flexible
•
Genesis
•
Tendu
•
Zen
42
CAPITOLO 5 – REALIZZAZIONE
Come base di partenza si è deciso di utilizzare il tema grafico standard di
Drupal PA. Questo perché essendo basato sul tema Zen, i requisiti di
accessibilità sono garantiti. Esso presenta inoltre un layout compatibile a
come si è pensato di strutturare il portale e coniuga ad un design
piacevole e colorato un'impaginazione chiara e di facile consultazione
mentre altri temi accessibili sono caratterizzati da un aspetto troppo
spoglio e poco accattivante.
Il tema predefinito di Drupal PA
5.1.1 – PERSONALIZZAZIONE DEL TEMA
Ogni tema grafico è composto da una serie di file contenuti in una cartella.
I file del nostro tema sono contenuti in \sites\all\themes\drupalpa
partendo dalla directory principale del portale. Sono questi i file che
andranno modificati per apportare le necessarie modifiche alla grafica del
tema.
43
CAPITOLO 5 – REALIZZAZIONE
Questi file si dividono principalmente in tre categorie:
•
I fogli di stile CSS
Per modificare la presentazione e la formattazione dei contenuti.
•
I template PHP
Necessari a definire la struttura, il contenuto e l'aspetto di ciascuna
porzione della pagina.
•
Le immagini
Predefinite per alcune aree del tema e sostituibili a piacimento.
È inoltre presente nel pannello di amministrazione di Drupal una pagina di
configurazione per il tema selezionato che permette tra le altre cose di
scegliere facilmente quali elementi visualizzare e impostare un logo
personalizzato. Essa è raggiungibile dal menù di amministrazione al
percorso “Amministra → Costruzione del sito → Temi → Configura”.
Vediamo in dettaglio le modifiche che sono state apportate al nostro
portale partendo proprio da questa pagina di configurazione.
Qui abbiamo disabilitato il segno di spunta dalle voci “Link primari” e
“Finestrella di ricerca”, perché questa impostazione le posiziona in aree
fisse e non modificabili, mentre attivandole da un menù di configurazione
differente sarà poi possibile modificarle e spostarle a nostro piacimento.
Nei due menù successivi abbiamo disabilitato il logo e la favicon di default
e sono state caricate quelle da noi personalizzate. Il logo è visualizzato in
alto a sinistra nell'header del sito, mentre la favicon è una piccola icona
che viene visualizzata nella barra degli indirizzi e nei segnalibri di molti
browser.
44
CAPITOLO 5 – REALIZZAZIONE
In “Breadcrumb settings” è stata attivata l'ultima voce. Questa sezione
riguarda quella che in italiano si definisce “navigazione a briciole di pane”,
essa è una feature molto importante soprattutto per quanto riguarda
l'accessibilità in quanto visualizza in cima alla pagina il percorso completo
della navigazione consentendo sempre di sapere dove ci si trova rispetto
alla gerarchia delle pagine del sito.
Impostazioni per i breadcrumb
Passiamo ora alle modifiche che sono state fatte ai file che compongono il
tema. I file dove si è agito sono principalmente due: drupalpa.css e
layout.css. Accompagneremo alla descrizione delle modifiche la parte di
codice corrispondente per quella particolare proprietà.
Di default il tema da troppo spazio alle colonne laterali, lasciandone poco
alla colonna centrale, che essendo però quella che contiene il contenuto
principale del sito ha bisogno di maggiore visibilità. In layout.css è stata
quindi
diminuita
dal
23%
al
20%
la
larghezza
delle
sidebar
e
conseguentemente portato dal 25% al 22% il padding del contenuto.
45
CAPITOLO 5 – REALIZZAZIONE
#sidebar-right
{
float: right;
width: 20%;
margin-right: 10px;
margin-top: 10px;
padding: 0;
}
#sidebar-left
{
float: left;
width: 20%;
margin-left: 10px;
margin-top: 10px;
padding: 0;
}
.two-sidebars #content-inner
{
padding-left: 22%;
padding-right: 22%;
}
Sempre in layout.css attiviamo a riga 343 la proprietà “word-wrap”. Essa
fa in modo che voci di menù troppo lunghe vengano troncate così da non
uscire fuori dai confini dei blocchi che le contengono.
#header,
#content,
#navbar,
#sidebar-left,
#sidebar-right,
#footer,
#closure-blocks
{
overflow: visible;
word-wrap: break-word;
}
46
CAPITOLO 5 – REALIZZAZIONE
Passando ora alle modifiche apportate al file drupalpa.css, abbiamo
aggiunto una spaziatura che previene il collimare dei bordi delle colonne
con il margine inferiore della pagina.
#main
{
padding-bottom: 10px;
}
Nel blocco intestazione del sito è stata modificata l'immagine di sfondo, ed
è stata maggiorata l'altezza per fare spazio al menù orizzontale.
#header
{
background:transparent url(images/header1.gif) repeat-x;
color: #FFFFFF;
height: 116px;
margin: 0;
overflow: hidden;
text-align: left;
width: 100%;
}
Diversi identificatori e classi sono stati modificati per sostituire il colore
base del tema grafico dall'azzurro ad una tinta rosso scuro. Inoltre è stata
modificata la visualizzazione delle colonne laterali: ogni blocco che ne fa
parte presenta un sua cornice a contorni arrotondati separata dalle altre.
Mostriamo di seguito il risultato per il blocco di amministrazione:
Il blocco admin
47
CAPITOLO 5 – REALIZZAZIONE
#sidebar-right
{
border: #dd0029 solid 2px;
-moz-border-radius: 12px;
border-radius: 12px;
}
#block-menu-menu-associazione,
#block-menu-menu-attivita,
#block-user-1,
#block-user-0
{
border: #dd0029 solid 2px;
-moz-border-radius: 12px;
border-radius: 12px;
padding-bottom: 5px;
}
#sidebar-left h2,
#sidebar-right h2
{
border-bottom: 1px solid #dd0029;
color: #333333;
font-size: 0.9em;
font-weight: bold;
text-transform: uppercase;
}
.comment
{
border-bottom: 1px solid #dd0029;
margin-bottom: 4px;
padding-left: 10px;
}
.indented .comment
{
border-left: 1px dotted #dd0029;
}
.first.comment
{
border-top: 1px solid #dd0029;
padding-top: 4px;
}
48
CAPITOLO 5 – REALIZZAZIONE
5.2 – MENÙ E BLOCCHI
I collegamenti ai contenuti del portale sono stati strutturati tramite l'uso di
un menù orizzontale nella testata del sito e di menù verticali associati a
blocchi posizionati nelle colonne laterali della pagina. Partiamo analizzando
la creazione del menù orizzontale.
Per prima cosa creiamo le voci che andranno a comporre il menù. Dal
menù di amministrazione di Drupal ci posizioniamo in “Amministra →
Costruzione del sito → Menù”. Senza bisogno di crearne uno nuovo
possiamo selezionare il già presente “Link primari”, menù che Drupal
fornisce di default come fonte per i link principali. Clicchiamo su “Aggiungi
voce” per inserire un nuovo elemento al menù e ripetiamo la proceduta
quante volte necessario.
Elenco delle voci inserite in “Link primari”
49
CAPITOLO 5 – REALIZZAZIONE
Ora, per poter associare questo menù all'area di intestazione del sito,
dobbiamo andare in “Amministra → Costruzione del sito → Blocchi”,
trovare la voce “Link primari” e dal menù a tendina scegliere “Header”.
Clicchiamo poi su “Configura” e nel campo “Titolo del blocco” inseriamo
<none>, questo fa in modo che nessun titolo venga visualizzato per quel
blocco.
Nessun titolo per il blocco specificato
Sempre nell'header, inseriamo anche il blocco “Maschera di ricerca”.
Questo blocco fornisce un campo per l'immissione di testo che il motore di
ricerca interno di Drupal cercherà di trovare tra i contenuti indicizzati del
nostro sito. Anche questo blocco è stato configurato in modo da
nascondere la visualizzazione del suo titolo.
I due blocchi inseriti nell'header del sito
A questo punto si necessitano modifiche al file drupalpa.css per fare in
modo che il menù venga visualizzato nella maniera da noi desiderata,
vediamole in dettaglio:
50
CAPITOLO 5 – REALIZZAZIONE
Le proprietà seguenti determinano la visualizzazione in orizzontale per le
voci di menù, che vengono inoltre distanziate maggiormente l'una
dall'altra e separate da un trattino verticale. La sottolineatura dei link è
stata tolta e il colore del testo riprende quello dello sfondo dell'header.
#header-blocks li.leaf
{
display: inline;
padding: 0px 7px 0px 3px;
border-right: 1px solid #ffff66;
}
#header-blocks li.leaf.last
{
display: inline;
padding: 0px 7px 0px 3px;
border-style: none;
}
#header-blocks li.leaf a
{
color: #ffff66;
text-decoration: none;
}
Il menù e la maschera di ricerca vengono visualizzati sulla stessa linea,
con il primo allineato a sinistra ed il secondo allineato a destra.
#block-menu-primary-links
{
float: left;
margin-left: -20px;
margin-top: -3px;
}
#block-search-0
{
float: right;
padding: 8px 8px 0px 8px;
}
51
CAPITOLO 5 – REALIZZAZIONE
Eliminiamo l'etichetta “Cerca nel sito” al form della maschera di ricerca.
#edit-search-block-form-1-wrapper label
{
display: none;
}
Riportiamo qui di seguito uno screenshot raffigurante l'intestazione del sito
con il logo, la maschera di ricerca e il menù orizzontale dopo aver
apportato tutte le personalizzazioni al CSS.
Header del portale
Per
quanto
riguarda
i
menù
nella
colonna
laterale
di
sinistra
il
procedimento da seguire è simile a prima. In “Amministra → Costruzione
del sito → Menù” non dovremo però utilizzare un menù già esistente, ma
crearne uno nuovo cliccando sul link “Aggiungi menù” ed assegnargli un
titolo ed un nome univoco che verrà utilizzato per la creazione dell'URL.
Create le voci per i menù andiamo poi in “Amministra → Costruzione del
sito → Blocchi” ed associamo alla regione del sito denominata “Left
sidebar” i blocchi per i menù appena creati. Nello specifico, abbiamo
creato due menù, uno denominato “L'AITIM” dove mettere tutte le
informazioni
di
carattere
generale
riguardanti
la
Onlus
e
l'altro,
“ATTIVITÀ”, che raccoglie, per l'appunto, tutte le attività di cui si occupa.
Mostriamo di seguito uno screenshot per questi menù:
52
CAPITOLO 5 – REALIZZAZIONE
Menù della left sidebar
5.3 – MODULO DI CONTATTO
Attraverso la pagina “Contatti” ai visitatori del portale è messa a
disposizione la possibilità di inviare messaggi email ai responsabili della
Onlus. Questa funzionalità è offerta dal modulo “Contact” che si trova già
installato e attivato nell'installazione base di Drupal PA. Il modulo va
configurato andando in “Amministra → Costruzione del sito → Modulo di
contatto”. Qui, cliccando su “Aggiungi categoria” possiamo inserire
l'indirizzo email al quale essere contattati e associare ad esso la tipologia
di
contatto
(richiesta
informazioni,
commenti,
proposte,
etc).
Se
necessitiamo di più tipologie di contatti dovremo aggiungere più categorie,
ognuna con un indirizzo email dedicato. Per il nostro portale è sufficiente
una singola categoria, da noi genericamente definita “Contattaci”, con
associato l'indirizzo email della Onlus AITIM. Cliccando poi sulla voce
“Impostazioni”, nel campo di testo “Informazioni aggiuntive” abbiamo
inserito indirizzo e recapito telefonico della Onlus così da integrare la
pagina con altre possibilità di contatto. Nell'immagine seguente possiamo
vedere come si presenta tale pagina, con i campi che l'utente dovrà
compilare obbligatoriamente per poter inviare l'email. In caso di utente
autenticato i campi “Tuo nome” e “Tuo indirizzo email” sono precompilati.
53
CAPITOLO 5 – REALIZZAZIONE
Modulo di contatto
5.4 – MODULO FAQ
Il modulo “Faq” permette l'integrazione nel portale di una sezione dedicata
alle FAQ. Esso non è già presente nel pacchetto Drupal PA e va quindi
scaricato da http://drupal.org/project/faq, copiato in ..\sites\all\modules
ed attivato in “Amministra → Costruzione del sito → Moduli”. FAQ è un
acronimo che sta per “Frequently Asked Questions”, in italiano: “domande
poste di frequente”. È utile avere nel proprio sito una sezione dedicata alla
risposta dei quesiti più ricorrenti che un utente potrebbe porsi visitando ed
interagendo con il nostro sito. La pagina delle FAQ è difatti strutturata
come una successione di domande e relative risposte. Il fatto di averle
tutte raggruppate in un'unica pagina ne semplifica la consultazione e
previene che i responsabili del sito ricevano molte email inviate dagli
utenti attraverso il form di contatto relative a questioni ricorrenti.
54
CAPITOLO 5 – REALIZZAZIONE
Per inserire una nuova domanda e relativa risposta andiamo in “Crea
contenuto → FAQ” dal pannello di amministrazione di Drupal. La nuova
voce creata verrà aggiunta da Drupal alla pagina delle FAQ. Questa pagina
può
essere
configurata,
in
particolar
modo
per
quanto
concerne
l'ordinamento e la presentazione delle voci, andando in “Amministra →
Configurazione del sito → Frequently asked questions”. Noi abbiamo scelto
la visualizzazione per cui cliccando su una domanda la relativa risposta
viene mostrata/nascosta.
Configurazione modulo FAQ
Esempio pagina FAQ
55
CAPITOLO 5 – REALIZZAZIONE
5.5 – REGISTRAZIONE E LOGIN
La sezione del portale che permette la registrazione ai nuovi utenti e
l'autenticazione per quelli che già dispongono di un account è raggiungibile
dal menù orizzontale situato nell'header alla voce “Area soci”. La pagina
che viene visualizzate è la seguente:
Area soci
Essa è stata realizzata creando un nuovo contenuto di tipo pagina
denominato “Accesso utente” a cui poi, andando in “Amministra →
Costruzione del sito → Blocchi”, è stato aggiunto nella regione “Content
bottom” il blocco “Accesso utente”, reso disponibile da Drupal. Per far sì
che questo blocco venga visualizzato solamente nella pagina che interessa
a noi, dobbiamo cliccare su “Configura” e in “Impostazioni specifiche di
visibilità per pagina” scegliere “Mostra solo sulle pagine elencate” e in
basso digitare il nome della pagina scelta. Sempre in questa pagina di
configurazione togliamo la visualizzazione per il titolo del blocco digitando
<none> in “Impostazioni specifiche blocco”.
56
CAPITOLO 5 – REALIZZAZIONE
Nel menù orizzontale oltre alla voce “Area soci” è presente anche la voce
“Logout”. Queste vengono visualizzate in maniera mutuamente esclusiva,
cioè, a seconda che l'utente abbia effettuato o meno l'accesso al portale
solo una delle due sarà presente. Per implementare questa funzionalità è
stato necessario installare il modulo “Menu per Role”, scaricabile dal sito
ufficiale di Drupal all'indirizzo http://drupal.org/project/menu_per_role.
Esso consente di limitare la visibilità per un dato elemento basandosi sui
ruoli utente. Impostando quindi la visibilità di “Area soci” solo per gli
utenti anonimi e “Logout” per gli utenti autenticati si ottiene il risultato
desiderato. Queste configurazioni sono raggiungibili in “Amministra →
Costruzione del sito → Menù → Link primari” e cliccando su “Modifica” per
la voce desiderata. Di seguito l'impostazione per la voce “Logout”.
Impostazioni per Menu per Role
È stato installato anche il modulo “Login Destination”. Scaricabile
all'indirizzo http://drupal.org/project/login_destination, esso consente di
impostare un redirect a cui l'utente verrà indirizzato una volta che sia
stato effettuato il login.
57
CAPITOLO 5 – REALIZZAZIONE
Di default Drupal rimanda alla pagina del profilo utente. Noi modifichiamo
questo comportamento andando in “Amministra → Gestione utente →
Login Destination” e scegliamo che l'utente venga rediretto alla home
page inserendo in “Destination URL settings” il codice <front>.
Impostazioni per Login Destination
5.6 – UTENTI, RUOLI E PERMESSI
In Drupal la registrazione, l'accesso e i profili utente sono gestiti dal
modulo “User” che è una parte integrante del suo core e non può quindi
essere disabilitato. In “Amministra → Gestione utente” troviamo le
impostazioni e i controlli che questo modulo ci fornisce. Per l'utilizzo del
sito da parte dei responsabili della Onlus abbiamo creato un nuovo utente
denominato “editore”, il quale sarà il responsabile dell'inserimento di nuovi
contenuti all'interno del portale. Per fare ciò clicchiamo su “Aggiungi
utente” in “Amministra → Gestione utente → Utenti” e compiliamo i campi
richiesti.
58
CAPITOLO 5 – REALIZZAZIONE
A questo utente dovremo associare un ruolo, scegliamo quello denominato
“utente editore” che Drupal PA ci mette già a disposizione. Ad ogni ruolo
sono associati una serie di privilegi, andando in “Amministra → Gestione
utente → Permessi” possiamo personalizzarli in maniera molto minuziosa.
All'utente editore associamo quelli di creazione, modifica e cancellazione
per tutti i tipi di contenuti previsti dal nostro portale. Gli altri due tipi di
ruolo previsti sono “utente autenticato” e “utente anonimo”, il primo avrà
privilegi limitati solo ai propri contenuti mentre il secondo avrà privilegi di
sola lettura senza possibilità di amministrazione.
Il menù di gestione utente
Quando un utente effettua il login al sito, nella colonna laterale di sinistra
viene visualizzato un blocco menù personalizzato in cui saranno presenti
soltanto i controlli abilitati per quel particolare ruolo utente.
Menù editore
59
CAPITOLO 5 – REALIZZAZIONE
5.7 – PROGETTI: TIPO DI CONTENUTO E VISTA
Per la pubblicazione all'interno del portale dei progetti di cui si occupa la
Onlus
AITIM
è
stato
creato
un
tipo
di
contenuto
personalizzato
denominato, per l'appunto, “Progetti”. Il modulo di Drupal che ci consente
di fare ciò si chiama “Content Construction Kit (CCK)”. È già presente in
Drupal PA ma necessita di essere attivato andando in “Amministra →
Costruzione del sito → Moduli” e selezionando le varie parti che lo
compongono.
Il modulo CCK
Per questo tipo di contenuto vogliamo avere la possibilità di accompagnare
il testo con delle immagini, attiviamo allora anche il modulo “Image
Attach” facente parte del modulo contenitore “Image”. Esso implementa
anche una funzione di ridimensionamento automatico consentendoci un
utile controllo sulle dimensioni delle immagini che andremo a caricare.
60
CAPITOLO 5 – REALIZZAZIONE
Il Modulo Image
Il tipo di contenuto viene creato andando in “Amministra → Gestione dei
contenuti → Tipi di contenuto” cliccando su “Aggiungi tipo di contenuto”. È
possibile inserire campi personalizzati di diversa specie, per “Progetti” a
noi interessa che sia presente un campo di testo per il corpo della pagina
e un campo di tipo immagine per le illustrazioni che si vorranno allegare.
Per poter pubblicare nel sito un nuovo progetto, l'utente abilitato, come
per esempio l'editore, dovrà cliccare nel proprio menù utente alla voce
“Crea contenuto → Progetti”.
Il modo in cui i progetti vengono visualizzati nel sito è stato gestito
attraverso l'uso del modulo “Views”. Questo modulo, già presente e attivo
in Drupal PA, si occupa di creare elenchi personalizzati di query da un
database e permette quindi di realizzare delle viste in cui i contenuti
possono essere presentati secondo criteri definiti dall'utente.
Vediamo più in dettaglio come è stata creata la nostra vista. Per prima
cosa creiamo una voce di menù “Progetti” nei link primari, la quale sarà il
collegamento a cui punterà la vista una volta creata.
61
CAPITOLO 5 – REALIZZAZIONE
Andiamo poi in “Amministra → Costruzione del sito → Viste” e clicchiamo
su “Aggiungi”, le diamo un nome e come tipo di vista scegliamo “Nodo”,
clicchiamo su “Avanti”. In questa nuova schermata aggiungiamo una
nuova pagina e in “Path” scegliamo il percorso della vista. In “Menù”
scegliamo “Voce di menù normale” e gli diamo titolo “Progetti”. In “Filtri”
selezioniamo nodo di tipo Progetti. Clicchiamo su “Campi” ed aggiungiamo
i seguenti:
•
Nodo: Titolo
•
Image attach: Attached images
•
Nodo: Anteprima
•
Statistiche nodo: Visualizzazioni totali
•
Nodo: Data di aggiornamento
Infine
in
“Criteri
di
ordinamento”
selezioniamo
“Nodo:
data
di
aggiornamento”.
Pannello di controllo vista
62
CAPITOLO 5 – REALIZZAZIONE
Per formattare in maniera coerente al resto del tema grafico la vista
Progetti sono state inserite delle regole di stile in drupalpa.css, regole che
riportiamo qui di seguito:
.view-Progetti .views-field-image-attach-images
{
float: left;
padding-right: 10px;
}
.view-Progetti .views-field-totalcount
{
float: left;
}
.view-Progetti .views-field-changed
{
float: right;
}
.view-Progetti .views-row
{
background-color: #ffff66;
-moz-border-radius: 12px;
border: 2px solid red;
border-radius: 12px;
padding: 10px;
margin-bottom: 15px;
clear: both;
overflow: hidden;
}
.view-Progetti .views-field-title
{
font-size: 1.2em;
font-weight: bold;
padding-bottom: 10px;
}
.view-Progetti .views-field-teaser
{
position: relative;
}
63
CAPITOLO 5 – REALIZZAZIONE
Il risultato che si ottiene è il seguente:
Vista progetti
Cliccando sul titolo di ogni progetto si aprirà la pagina con il testo
completo e le immagini a risoluzione maggiore.
Un ultimo accorgimento: per attivare il contatore delle visite, in
“Amministra → Rapporti → Impostazione del log degli accessi” spuntiamo
la voce “Conta le visite ai contenuti”.
Contatore visite
64
CAPITOLO 5 – REALIZZAZIONE
5.8 – MODULO EVENT E WEBFORM
La Onlus AITIM organizza e partecipa ad eventi di vario genere, è
necessario quindi che questo aspetto della loro attività venga curato
all'interno del portale. Il modulo che abbiamo utilizzato per questa
esigenza si chiama “Event”, il quale è già presente e attivo nel pacchetto
Drupal PA.
Il modulo Event
Questo modulo mette a disposizione un nuovo tipo di contenuto
denominato anch'esso “Event” la cui particolarità è quella di avere un
campo in cui è possibile impostare una data di inizio e fine evento, più
l'orario, se lo si vuole. La pagina principale del modulo Event, che abbiamo
collegato ad una voce del menù “Attività” nella colonna laterale di sinistra,
visualizza un calendario in cui vengono riportati gli eventi inseriti per quel
particolare periodo e cliccandoci se ne possono leggere tutti i dettagli.
Visualizzazioni alternative sono disponibili: per settimana e giorno e in
forma tabellare o elenco. Disattiviamo la visualizzazione del fuso orario
negli eventi andando in “Amministra → Configurazione del sito → Data e
ora” modificando l'impostazione “Fusi orari configurabili dall'utente”.
65
CAPITOLO 5 – REALIZZAZIONE
Il calendario eventi
Il modulo Event mette inoltre a disposizione dei blocchi che ampliano le
sue funzionalità. Noi abbiamo attivato e posizionato nella colonna laterale
di destra quello denominato “List of upcoming events” che mostra una
lista
dei prossimi eventi in programma con indicati i giorni mancanti
all'inizio. In “Amministra → Configurazione del sito → Events” è presente il
menù di configurazione del modulo e, tra le altre cose, possiamo scegliere
di limitare il numero di eventi che il blocco sopracitato visualizzerà.
66
CAPITOLO 5 – REALIZZAZIONE
Blocco prossimi eventi
Per quest'anno la Onlus AITIM ha in programma il suo undicesimo
congresso nazionale. L'evento è stato pubblicato nel portale e attraverso
l'uso del modulo “Webform” è stata implementata la possibilità di
iscrizione allo stesso. Questo modulo, già presente e attivo in Drupal PA,
consente la creazione di form e questionari che una volta compilati
vengono inviati ai gestori del sito. Vediamo come è stata messa a punto
questa
funzionalità.
Per
prima
cosa
andando
in
“Amministra
→
Configurazione del sito → Webform settings” spuntiamo il tipo di contenuto
Event in modo da abilitarlo alla creazione di form. Ora, quando creiamo un
nuovo evento, la seconda pagina che ci verrà presentata sarà quella in cui
dovremo definire i campi della nostra form, abbiamo a disposizione tutte
le classiche tipologie di campi che siamo soliti incontrarci, aggiungiamo
uno ad uno i campi a seconda delle necessità. Abbiamo inserito inoltre
alcune regole di stile in drupalpa.css con lo scopo di ottenere una
formattazione grafica più gradevole. Le riportiamo qui di seguito:
#webform-client-form-16 label
{
width: 150px;
float: left;
}
#webform-client-form-16 .description
{
margin-left: 150px;
}
67
CAPITOLO 5 – REALIZZAZIONE
#webform-component-quota-di-partecipazione-congresso label
{
clear: both;
width: 100%;
}
#webform-component-iscrizione-itim label
{
clear: both;
width: 100%;
}
Il risultato finale è il seguente:
68
CAPITOLO 5 – REALIZZAZIONE
Form iscrizione 11° congresso nazionale AITIM
5.9 – RSS, NEWSLETTER E SOCIAL NETWORK
Il web moderno mette a disposizione molti strumenti e tecnologie che
mirano ad integrare ed ampliare quella che può essere la normale
possibilità di offerta di un portale internet. Alcuni strumenti consentono di
ottenere una maggiore visibilità, creare fidelizzazione con i propri utenti
ed altri semplificano il reperimento delle informazioni anche al di fuori del
sito stesso. Nell'epoca del web 2.0 è necessario fornire soluzioni che
permettano uno spiccato livello di interazione tra gli utenti, i quali sono
ormai abituati ad un uso per così dire sociale della piattaforma internet.
Gli strumenti che abbiamo implementato sono i seguenti:
•
RSS
Basato su XML, è un formato standard per la diffusione dei contenuti
in rete. La sua applicazione principale sono i feed RSS che
permettono la consultazione centralizzata da diverse fonti senza
doverle visitare una ad una.
69
CAPITOLO 5 – REALIZZAZIONE
•
NEWSLETTER
Servizio basato su posta elettronica a cui un utente può iscriversi
per ricevere nella propria casella email aggiornamenti e news
periodiche per i siti di interesse che la mettono a disposizione.
•
TWITTER
È un sito internet che offre un servizio di social network e
microblogging
che
fornisce
agli
utenti
una
pagina
personale
aggiornabile tramite messaggi di testo con una lunghezza massima
di 140 caratteri.
•
FACEBOOK
Il sito internet di social networking attualmente più diffuso.
Consente di rimanere in contatto con milioni di persone in tutto il
mondo scambiando messaggi di testo e condividendo immagini e
video. Applicazioni sviluppate da terze parti si integrano in facebook
in modo da espanderne le funzionalità.
I suddetti elementi sono sono stati implementati nel portale associando ad
ognuno di essi un'icona raffigurante un logo o un simbolo che ne permette
una chiara identificazione. Queste icone sono state raggruppate in un
blocco
che
abbiamo
posizionato
nella
colonna
laterale
di
destra.
Nell'immagine a pagina seguente possiamo vedere il menù di Drupal per le
impostazioni specifiche del blocco in cui in particolare notiamo il codice
inserito per sua la creazione. L'attributo “alt” ci assicura che queste
funzionalità
siano
visualizzazione
fruibili
delle
anche
immagini
per
chi
disattivata,
utilizza
mentre
browser
“title”
con
la
fornisce
suggerimenti testuali per chi non dovesse conoscere i loghi delle icone.
Target="_blank" infine, apre il collegamento a cui è associato in una
nuova tab/finestra, utile per i link esterni in modo da non chiudere
accidentalmente la pagina da cui si era partiti.
70
CAPITOLO 5 – REALIZZAZIONE
Impostazioni specifiche blocco
Mostriamo nell'immagine seguente come appare il blocco in questione nel
nostro portale:
Blocco social network
Analizziamo adesso più in dettaglio ognuno dei quattro strumenti che sono
stati implementati.
71
CAPITOLO 5 – REALIZZAZIONE
La gestione degli RSS è inclusa nel modulo “System” che è parte
integrante del core di Drupal. Esso è limitato alle funzionalità base con
poche possibilità di personalizzazione ma è comunque sufficiente ai nostri
scopi. Se necessario sono comunque disponibili molti moduli aggiuntivi
che possono arricchirne l'utilizzo. Cliccando sull'icona arancione si apre
una nuova pagina in cui all'utente è data la possibilità di abbonarsi al feed
RSS del portale scegliendo tra una serie di servizi web e di applicazioni
disponibili. Più sotto è invece mostrata un'anteprima del feed vero e
proprio.
Menù sottoscrizione feed RSS
Le preferenze sono raggiungibili in “Amministra → Gestione dei contenuti
→ Pubblicazione RSS”.
Preferenze feed RSS
72
CAPITOLO 5 – REALIZZAZIONE
In quanto ridondante, è stata disattivata la visualizzazione per la piccola
icona RSS che Drupal posiziona di default in fondo al corpo della pagina.
Ciò è stato ottenuto commentando le seguenti linee di codice nel file
page.tpl.php presente in ..\sites\all\themes\drupalpa:
<?php if ($feed_icons): ?>
<div class="feed-icons"><?php print $feed_icons; ?></div>
<?php endif; ?>
Passiamo ora alla newsletter. Per il suo funzionamento sono stati installati
due moduli aggiuntivi: Simplenews (http://drupal.org/project/simplenews)
e Simplenews Digest (http://drupal.org/project/simplenews_digest).
Moduli gestione newsletter
Simplenews è il modulo principale che si occupa della gestione delle
newsletter. È configurabile andando in “Amministra → Configurazione del
sito → Simplenews” per quanto riguarda il modulo stesso,
e in
“Amministra → Gestione dei contenuti → Newsletter” per quanto riguarda
più nello specifico il tipo di contenuto newsletter. Dalla pagina di
configurazione dei permessi possiamo invece decidere se consentire
l'iscrizione alla newsletter anche ai visitatori anonimi o ai soli utenti
autenticati.
73
CAPITOLO 5 – REALIZZAZIONE
Simplenews
prevede
che
la
newsletter
venga
creata
ed
inviata
manualmente da un responsabile in carne ed ossa. Grazie a Simplenews
Digest vengono invece create autonomamente email riassuntive con link
per gli ultimi contenuti inseriti ed inviate in automatico a intervalli di
tempo prestabiliti. È stato necessario installare un ulteriore modulo
denominato Poormanscroon (http://drupal.org/project/poormanscron) per
la gestione automatizzata del cron del portale, il quale si occupa di
attivare eventi in background come per l'appunto l'invio di newsletter. Va
configurato in “Amministra → Configurazione del sito → Informazioni sul
sito”.
Impostazione cron
Infine, nell'icona raffigurante la busta abbiamo posto il collegamento alla
pagina adibita all'iscrizione/cancellazione dalla newsletter.
Gestione iscrizione newsletter
74
CAPITOLO 5 – REALIZZAZIONE
Per quanto riguarda i social network sono stati creati gli account per la
Onlus AITIM in Facebook e Twitter, accessibili cliccando sulle rispettive
icone nel portale.
http://www.facebook.com/pages/AITIM/144583062278730
http://twitter.com/#!/aitimonlus
75
CAPITOLO 6 – SEO
6.1 – INTRODUZIONE
Il termine SEO è l'acronimo di “Search Engine Optimization”, in italiano
traducibile in “ottimizzazione per i motori di ricerca”. Esso sta ad indicare
l'insieme di attività e tecniche attuabili nei confronti di un sito internet allo
scopo di migliorarne il posizionamento nelle pagine di risposta dei motori
di ricerca, posizionamento che si traduce poi in maggiore visibilità per il
nostro sito internet e in vantaggio competitivo rispetto ai possibili
competitor. Se consideriamo che la maggior parte del volume di traffico
che un sito internet riceve deriva da ricerche sui motori di ricerca, è chiara
l'importanza fondamentale che questa pratica riveste nell'acquisizione di
una posizione favorevole e rilevante in un web che è sempre più affollato.
6.2 – BREVE STORIA
Ripercorriamo brevemente quelle che sono state le tappe evolutive per il
SEO dagli inizi ai giorni nostri. A metà degli anni 90, in una crescita
esponenziale, la rete cominciò a popolarsi di siti, pagine e documenti più o
meno articolati e complessi. Questa mole disordinata di dati sparsa in
tutto il globo rese evidente la necessità di strumenti di catalogazione con
lo scopo di facilitare il reperimento delle informazioni. Nacquero allora i
motori
di
ricerca,
che
attraverso
l'uso
di
software
automatizzati
denominati “crawler” analizzavano i dati della rete per restituire poi un
indice dei contenuti disponibili. I webmaster cominciarono allora ad
ottimizzare i loro siti e nel 1997 il termine “SEO” fece ufficialmente la sua
comparsa.
76
CAPITOLO 6 – SEO
In quegli anni gli algoritmi di indicizzazione si basavano in maniera minore
sui contenuti visibili delle pagine e davano maggiore importanza ai meta
tag, metadati che forniscono informazioni sulle pagine e rimangono
invisibili rispetto alla formattazione delle stesse.
I meta tag più utilizzati erano:
•
Description
Destinato a contenere una breve descrizione dei contenuti della
pagina.
•
Keywords
Che contiene una serie di parole chiave, rappresentative del
contenuto della pagina.
Questo tipo di indicizzazione però si rivelò ben presto poco affidabile in
quanto basandosi completamente sulle informazioni che venivano fornite
dal webmaster, lasciava ampi spiragli a comportamenti scorretti e
opportunistici: inserendo keywords non pertinenti ai contenuti del sito ma
legati ad argomenti molto ricercati in quel periodo si riusciva ad ottenere
maggiore
visibilità.
Il
superamento
delle
limitazioni
tecniche
e
la
raffinazione degli algoritmi di ricerca permisero di aggirare i limiti dei meta
tag. Nel 1998 venne fondato Google, innovativo motore di ricerca che
basava il suo algoritmo di indicizzazione sull'analisi testuale dei contenuti
e sul numero di link entranti nel sito. Di pari passo nuove forme di
ottimizzazione illegittima furono escogitate note con il nome di “link spam”
che cercavano di ingannare i nuovi algoritmi basati sui link. Arrivando ai
giorni nostri, i motori di ricerca incorporano una vasta gamma di tecniche
riservate nei loro algoritmi di posizionamento allo scopo di ridurre
l'impatto della manipolazione dei link.
77
CAPITOLO 6 – SEO
Con la crescita in popolarità di blog e social network, i principali motori di
ricerca hanno apportato modifiche ai loro algoritmi per consentire ai nuovi
contenuti di scalare più rapidamente tra i risultati delle pagine di ricerca.
6.3 – WHITE HAT E BLACK HAT SEO
Come si è potuto intuire, le tecniche di ottimizzazione per i motori di
ricerca possono essere suddivise in due categorie: lecite e illecite, in
inglese spesso indicate con “White hat SEO” e “Black hat SEO”. Del white
hat fanno parte tutte quelle tecniche che i motori di ricerca raccomandano
nelle loro linee guida come parti di una buona progettazione e non
implicano nessun tipo di trucco o inganno. Ciò garantisce che il contenuto
indicizzato da un motore di ricerca sia lo stesso contenuto che vedrà poi
l'utente
e
quindi
proprio
ciò
che
si
stava
cercando.
Una
buona
ottimizzazione deve essere focalizzata nel creare buoni contenuti per gli
utenti ed in questo ha molto in comune con l'accessibilità e l'usabilità, in
quanto un sito web scritto con un codice corretto, accessibile ed usabile
risulterà anche molto più attraente ai crawler dei motori di ricerca. Il black
hat utilizza invece tecniche che implicano l'inganno nei confronti degli
algoritmi dei motori di ricerca al solo scopo di dare una forte spinta al
posizionamento nelle pagine dei risultati e di fatto senza apportare alcun
miglioramento ai contenuti e anzi influenzando negativamente la qualità
dei risultati delle ricerche. Per questo motivo, a protezione dei propri
interessi, i motori di ricerca si riservano il diritto di escludere dai propri
indici quei siti internet scoperti ad utilizzare queste tecniche illecite. Una
terza categoria, “Gray hat SEO” si colloca a metà strada tra le due.
Utilizzando delle tecniche aggressive come per esempio una densità di
keywords superiore al normale è possibile incorrere in penalità ma non si
dovrebbe correre il rischio dell'esclusione dagli indici.
78
CAPITOLO 6 – SEO
6.3.1 – TECNICHE E METODI
Passiamo in rassegna le tecniche di ottimizzazione per quanto riguarda sia
il black hat SEO che il white hat SEO, quest'ultimo verrà approfondito nel
prossimo paragrafo anche in relazione a Drupal e allo sviluppo del nostro
portale.
L'insieme delle tecniche utilizzate nel black hat SEO vengono definite
“Spamdexing”, un termine che combina la parola spam, usata per indicare
l'invio agli utenti internet di informazioni non richieste, e indexing,
l'indicizzazione che operano i motori di ricerca per i contenuti della rete.
Vediamole in dettaglio:
•
Keyword stuffing
Letteralmente, imbottire le pagine di parole chiave, inserendole in
vari tag HTML o come testo invisibile ai visitatori allo scopo di
renderle più rilevanti ai crawler per dei particolari termini di ricerca.
Attraverso l'uso di espedienti via CSS il tutto rimane mascherato al
visitatore, ma i motori di ricerca hanno elaborato tecniche per
rilevare nella maggior parte dei casi questo genere di trucchi.
•
Doorway
Sono delle “pagine d'entrata”, confezionate ad hoc per posizionarsi
bene tra i risultati di ricerca, in cui poi il visitatore che vi accede
viene reindirizzato tramite l'uso di link ambigui o tramite refresh
automatico verso un'altra pagina che di norma non a nulla a che
vedere con ciò che si stava cercando.
•
Cloaking
Simile alla doorway, in questo caso però il contenuto presentato
all'utente sarà differente da quello del motore di ricerca in quanto
questo viene confezionato ad hoc basandosi sull'indirizzo IP o sullo
user agent.
79
CAPITOLO 6 – SEO
•
Scraping
Sono dei siti internet che tramite strumenti software copiano il loro
contenuto da altri siti per sfruttarne il ranking. Di solito questi siti
sono creati per raccogliere introiti pubblicitari. Si parla invece di
“Article Spinning” quando è attuata la riscrittura di articoli esistenti
con lo scopo di aggirare i controlli dei motori di ricerca che tendono
a penalizzare i contenuti duplicati.
•
Link spam
A differenza delle tecniche precedenti che basano la loro efficacia
sulla manipolazione dei contenuti, il link spam agisce esclusivamente
sui link, sfruttando gli algoritmi dei motori di ricerca che danno un
buon ranking a quei siti che vengono linkati da altri siti. Esso
prevede diverse tecniche, come per esempio le “Link farms”,
comunità che raccolgono gruppi di pagine, ognuna con link verso
tutte le altre. Citiamo inoltre lo spam di link in tutti quei siti che
permettono l'inserimento di post e commenti come blog e forum.
Buone tecniche di ottimizzazione invece prevedono:
•
Implementare il file robots.txt per indicare ai crawler dei motori di
ricerca quali contenuti indicizzare e quali no
•
Implementare il file sitemap.xml per indicare tutti gli URL delle
pagine che si desidera sottoporre al motore di ricerca in modo da
agevolare il processo di indicizzazione
•
Utilizzare il linguaggio di marcatura in maniera formalmente corretta
e rispettarne il valore semantico
•
Assegnare un titolo univoco ad ogni pagina del sito che sia
rappresentativo del contenuto della stessa
•
Rendere gli URL delle pagine descrittivi riguardo ai propri contenuti
ed evitare la presenza di interrogazioni a database nell'URL
80
CAPITOLO 6 – SEO
•
Normalizzare gli URL in modo che pagine con indirizzi multipli non
calino nel ranking in quanto questo verrebbe suddiviso dal motore di
ricerca tra tutti gli URL presenti
•
Non gestire i collegamenti tra le pagine tramite JavaScript in quanto
verrebbero ignorati dai motori di ricerca. Utilizzare invece il tag
HTML <a>
•
Utilizzare gli strumenti per webmaster messi a disposizione dai
maggiori motori in ricerca in modo da aver accesso ad analisi e
statistiche utili per attuare eventuali ottimizzazioni al sito
•
I link esterni verso il proprio sito e quelli interni tra i vari contenuti e
pagine del sito sono molto importanti per il ranking, considerato il
funzionamento degli attuali algoritmi di ricerca
•
Per le immagini utilizzare nomi che ne indichino il contenuto ed
aggiungere il tag HTML <alt> in cui poter inserire una breve
descrizione. Ciò ne semplificherà la ricerca a vantaggio anche delle
pagine in cui sono inserite
•
Scrivere i contenuti del sito inserendovi quelle che possono essere le
più comuni stringhe di ricerca per l'argomento che si sta trattando in
modo da essere trovati con più facilità nelle query sui motori di
ricerca
6.4 – SEO IN DRUPAL
Drupal viene definito un CMS “SEO-friendly”, che ben si adatta alla
realizzazione di siti web ottimizzati per i motori di ricerca. La sua struttura
base è stata studiata tenendo conto delle problematiche emerse in altri
CMS con i motori di ricerca. Molto importante in questo senso è la sua
conformità agli standard web più recenti ed in più l'integrazione al proprio
interno di funzionalità utili come la gestione degli URL semplificati.
81
CAPITOLO 6 – SEO
La grande potenzialità di Drupal risiede inoltre nella disponibilità di
numerosi moduli specifici che permettono di ottimizzare al meglio ogni
singolo aspetto del SEO. Nei prossimi paragrafi illustreremo l'utilizzo di
questi
moduli
per
quelle
che
sono
le
tecniche
fondamentali
di
ottimizzazione che andremo ad implementare nel nostro portale.
6.4.1 – URL
Il primo aspetto che trattiamo è quello dell'ottimizzazione degli indirizzi
delle nostre pagine. Di base Drupal genera gli URL in una maniera che non
è la più indicata, vediamo quali sono le misure da attuare per avere degli
indirizzi che piacciano ai motori di ricerca.
6.4.1.1 – CLEAN URL
Drupal genera dinamicamente le nostre pagine tramite interrogazioni al
database. Gli URL rispecchiano questo comportamento visualizzando al
loro interno le stringhe “?parametro=valore”, (tipicamente ?q=“valore”). Il
problema nasce dal fatto che i motori di ricerca non indicizzano le pagine i
cui URL presentino il simbolo “?”, in quanto indice di contenuti dinamici.
Drupal ci fornisce già nella sua configurazione base la soluzione a questo
problema attraverso quelli che
vengono definiti “URL semplificati”.
Andiamo in “Amministra → Configurazione del sito → URL semplificati”.
Verrà effettuato un rapido test per verificare che questa funzionalità sia
disponibile, in quanto per esserlo, il webserver Apache nel quale è ospitato
il nostro sito dovrà avere installato e configurato il modulo mod_rewrite.
In caso affermativo Drupal segnalerà il passaggio del test e potremo
attivare gli URL semplificati.
82
CAPITOLO 6 – SEO
Impostazione URL semplificati
Da
questo
momento
in
poi
negli
URL
delle
nostre
pagine
non
compariranno più i caratteri “?q=”.
6.4.1.2 – ALIAS URL
Tutti i contenuti che creiamo in Drupal vengono nominati tramite una
numerazione incrementale. Per quanto semplice, questo sistema però non
fornisce alcun tipo di informazione utile né agli utenti né ai motori di
ricerca. Le linee guida di quest'ultimi infatti richiedono espressamente che
gli URL vengano creati tramite termini che siano le parole chiave più
probabili nelle query di ricerca e che siano descrittivi e possibilmente
somiglianti al titolo della pagina stessa. Questo accorgimento permette di
migliorare notevolmente l'indicizzazione nei motori di ricerca e rende il
nostro sito molto più navigabile agli utenti che quindi incrementeranno il
nostro volume di traffico. In Drupal il problema di convertire gli URL da
semplici numeri a percorsi articolati è gestito dal modulo “Path” che è già
presente e attivo nell'installazione base. Possiamo utilizzarlo in fase di
creazione di nuovi contenuti oppure se abbiamo già creato diverse pagine
possiamo rinominarle in un secondo momento. Nel primo caso avremo
una voce di menù nella pagina di creazione nuovi contenuti che mostriamo
di seguito:
83
CAPITOLO 6 – SEO
Menù inserimento alias URL per nuovi contenuti
Per rinominare invece contenuti già creati andiamo in “Amministra →
Costruzione del sito → Alias URL”, clicchiamo sulla voce “Aggiungi alias”,
inseriamo il vecchio URL ed il nuovo che vogliamo associargli e ripetiamo
quante volte necessario.
Menù inserimento alias URL per contenuti preesistenti
84
CAPITOLO 6 – SEO
Esiste un modulo che ci permette di automatizzare il processo di creazione
degli alias URL, si chiama “Path Auto” e non essendo presente nel core di
Drupal dovrà essere scaricato dal sito ufficiale al seguente indirizzo:
http://drupal.org/project/pathauto. Per il suo funzionamento è richiesta
inoltre la presenza del modulo “Token” (http://drupal.org/project/token).
Path Auto si integra con il modulo Path ed inserisce nella sua pagina di
configurazione due nuove voci, “Delete aliases” e “Automated alias
settings”.
In
quest'ultima
voce
troviamo
una
serie
di
controlli
e
impostazioni che ci permettono di decidere in che modo dovranno essere
costruiti i nostri alias ogni volta che nuovi contenuti verranno creati.
Potremmo
per esempio scegliere di impostare l'alias in modo che
corrisponda al titolo che associamo alla nuova pagina, una soluzione molto
semplice ed efficace in termini di ottimizzazione per i motori di ricerca.
Se vogliamo rinominare gli indirizzi delle pagine già create in precedenza
dobbiamo selezionare la voce “Bulk generate aliases for nodes that are not
aliased”. Se il risultato non dovesse soddisfarci e volessimo costruire l'alias
con una struttura differente, possiamo cancellarli tutti con un solo click in
“Delete aliases”.
Nella creazione di nuovi contenuti, per far sì che l'alias venga generato
automaticamente, in “Impostazioni percorso URL” dobbiamo assicurarci
che la voce “Automatic alias” sia spuntata.
Inserimento alias URL automatico
85
CAPITOLO 6 – SEO
6.4.1.3 – URL NORMALIZATION
In questo paragrafo ci occupiamo del problema dei contenuti duplicati. In
Drupal quando creiamo degli alias l'indirizzo originale resta comunque
attivo e quindi ci veniamo a trovare con delle pagine a cui corrispondono
più di un URL. Questo è un problema per quanto riguarda il SEO in quanto
può portare ad un abbattimento nel ranking delle nostre pagine perché
esso viene suddiviso tra le varie copie dei contenuti duplicati. Inoltre,
siccome in alcuni casi i contenuti vengono deliberatamente duplicati nel
tentativo di manipolare il posizionamento nei motori di ricerca e
conquistare un traffico maggiore, se gli algoritmi dei motori di ricerca
rilevano questo comportamento potrebbero escludere dall'indicizzazione il
nostro sito. Altri esempi di contenuti duplicati sono per esempio pagine
accessibili sia da “www.sito.it/pagina” che da “www.sito.it/pagina/”,
oppure anche “http://www.sito.it” e “http://sito.it”. Risolviamo i contenuti
duplicati dagli alias utilizzando il modulo “Path Redirect” che scarichiamo
da http://drupal.org/project/path_redirect. Questo modulo ci consente di
creare dei redirect 301 da un indirizzo verso un altro così da far
convergere tutte le visite verso un unico URL.
Impostazioni per Path Redirect
86
CAPITOLO 6 – SEO
Esso si integra inoltre con il modulo Path Auto che abbiamo visto in
precedenza, andando ad aggiungere una nuova voce di configurazione alla
sezione “Update action” che nel caso di creazione di nuovi alias assicura il
redirect automatico da quello già presente, comportamento che è il più
indicato in termini SEO in quanto non cancellando i vecchi alias
scongiuriamo la perdita di traffico da tutte quelle fonti non aggiornate.
Impostazione Update action in Path Auto
Abbiamo installato anche il modulo “Global Redirect”, disponibile per il
download all'indirizzo http://drupal.org/project/globalredirect, che rispetto
a Path Redirect presenta funzionalità aggiuntive. Le elenchiamo qui di
seguito:
•
Controlla la presenza di un alias per l'URL attuale ed esegue un
redirect 301 nel caso questo non fosse utilizzato
•
Controlla la presenza di uno slash finale nell'URL attuale e lo
rimuove se presente
•
Controlla se l'URL attuale è lo stesso indicato nel parametro
“site_frontpage” e reindirizza all'home page se c'è corrispondenza
•
Controlla, se gli URL semplificati sono attivi, che l'URL attuale venga
acceduto utilizzando effettivamente tale metodo
•
Controlla l'accesso agli URL. Se l'utente non ha accesso al percorso
il redirect non viene eseguito. Questo a protezione degli alias privati
87
CAPITOLO 6 – SEO
•
Controlla la presenza di maiuscole nell'URL attuale e se ci sono
differenze con l'alias impostato in Drupal l'utente viene reindirizzato
all'URL corretto
Le
funzionalità
di
questo
modulo
sono
attivabili
singolarmente
in
“Amministra → Configurazione del sito → Global redirect” e non necessita
di particolari altri settaggi.
Impostazioni per Global Redirect
88
CAPITOLO 6 – SEO
6.4.2 – TAG
Parliamo nei prossimi due paragrafi di tre particolari tag HTML molto
importanti per il SEO e che quindi necessitano di essere curati con
particolare attenzione. Stiamo parlando
del tag “Title” e dei meta tag
“Description” e “Keywords”. Partiamo da questi ultimi due.
6.4.2.1 – DESCRIPTION E KEYWORDS
Il meta tag description fornisce ai motori di ricerca un sommario
dell'argomento della pagina cui si riferisce. Esso in genere è composto da
un breve paragrafo ed è buona norma usare una descrizione differenziata
per ogni pagina. Questo testo in genere viene visualizzato dai motori di
ricerca nei risultati delle query, posizionato tra il titolo e l'URL della pagina.
È chiara quindi l'importanza che questo attributo riveste sia per migliorare
l'indicizzazione dei motori di ricerca che per facilitare il compito dell'utente
che naviga tra i vari risultati delle sue ricerche. Il meta tag keywords, in
passato non più considerato dai crawler perché sfruttato in pratiche di
black hat SEO, viene oggi nuovamente preso in considerazione seppur con
un peso minore rispetto ad altri parametri. In esso vanno elencate una
breve serie di parole chiave significative per il contenuto della pagina cui si
riferiscono. I meta tag si trovano all'interno dell'head della struttura HTML,
ma non dovremo agire direttamente sul sorgente delle pagine in quanto
Drupal ci fornisce un modulo che semplifica la gestione di questi attributi.
Il modulo in questione si chiama “Nodewords”, non fa parte del core di
Drupal e va quindi prelevato da http://drupal.org/project/nodewords. È un
modulo molto completo che permette la gestione di molti altri tipi di meta
tag anche in maniera automatizzata.
89
CAPITOLO 6 – SEO
Il modulo Nodewords
Configuriamo il modulo andando in “Amministra → Gestione dei contenuti
→
Meta
tags”.
Nei
primi
due
menù
in
“Impostazioni”
spuntiamo
“Descrizione” e “Parole chiave”, così da attivare la gestione per i meta tag
di nostro interesse. Le altre impostazioni possono essere lasciate
invariate. Andiamo ora in “Amministra → Gestione utente → Permessi” e
abilitiamo per l'utente editore l'editing dei meta tag keywords e
description. Per ultimo andiamo in “Amministra → Gestione dei contenuti
→ Tipi di contenuto” e assicuriamoci che per i tipi di contenuto che
intendiamo utilizzare sia spuntata la voce “Allow editing of meta tags” in
“Meta tags settings”. Siamo così pronti ad utilizzare i meta tags nel nostro
sito. Sia per la creazione di nuovi contenuti o per la modifica di quelli già
inseriti troviamo la voce “Meta tags” elencata insieme a tutti gli altri
controlli che ogni tipo di contenuto mette a disposizione.
Menù inserimento Meta tags
90
CAPITOLO 6 – SEO
6.4.2.2 – TITLE
Il titolo è molto importante perché deve comunicare gli argomenti della
pagina sia agli utenti che ai motori di ricerca. Esso deve contenere le
parole più significative per una chiara identificazione dell'argomento
trattato ed essere univoco per ogni pagina. In coda al titolo, separato da
un trattino orizzontale o verticale, è buona regola aggiungere il nome del
proprio sito. Nelle pagine delle query ai motori di ricerca il titolo comparirà
nella prima riga dei risultati come link al nostro contenuto. Esso perciò
non deve essere troppo lungo perché altrimenti il motore di ricerca ne
visualizzerebbe soltanto una porzione.
In Drupal quando creiamo un nuovo contenuto, il titolo che associamo ad
esso viene assegnato anche al titolo vero e proprio della pagina, cioè
quello introdotto all'inizio di questo paragrafo, che è contenuto nel tag
<title> del sorgente HTML. In genere questo è un comportamento
coerente ma in ottica SEO può essere utile avere maggiore controllo su di
esso.
Una serie di funzionalità aggiuntive ci vengono offerte dal modulo “Page
Title”, scaricabile presso l'indirizzo http://drupal.org/project/page_title.
Una volta installato ed attivato, in “Amministra → Gestione dei contenuti →
Page titles” troviamo la sua pagina di configurazione. Esso permette,
tramite schemi basati su token, di impostare titoli predefiniti in base al
tipo di contenuto, che verranno creati automaticamente. Una lista dei
token disponibili è visualizzabile cliccando su “Available token list”.
Cliccando invece su “Show field” accanto a un tipo di contenuto, viene
aggiunta una nuova voce nella pagina di creazione contenuto che abilita
per esso l'inserimento manuale del tag title.
91
CAPITOLO 6 – SEO
Menù inserimento titolo in creazione nuova pagina
Se vogliamo modificare i titoli per i contenuti creati in precedenza
andiamo in “Amministra → Gestione dei contenuti → Contenuto” e
clicchiamo su “Modifica” accanto al contenuto che ci interessa. È
necessario inoltre andare in “Amministra → Gestione utente → Permessi” e
abilitare l'uso del modulo Page Title per l'utente editore.
Permessi per Page Title
6.4.3 – SITEMAP
La sitemap altro non è che la mappa dei contenuti presenti nel nostro sito.
Questa non dovrebbe assolutamente mancare se cerchiamo di raggiungere
buoni livelli di ottimizzazione per i motori di ricerca. Specifichiamo subito
che esistono due tipi distinti di sitemap, una sitemap HTML, visibile nel
sito, di solito definita semplicemente “sitemap”, e un file Sitemap XML, a
uso esclusivo dei motori di ricerca. Scopriamole più in dettaglio nei
paragrafi che seguono.
92
CAPITOLO 6 – SEO
6.4.3.1 – HTML
La sitemap HTML è una pagina di un sito web in cui vengono elencate in
maniera gerarchica tutte le pagine che esso contiene. Essa aiuta il motore
di ricerca nel processo di indicizzazione fornendogli una buona panoramica
sulla struttura del sito, i contenuti presenti e i collegamenti tra gli stessi.
Per questo motivo la sitemap dovrebbe essere resa accessibile da qualsiasi
pagina del nostro sito in modo tale che il crawler riesca a trovarla con più
facilità. Ciò nonostante la sitemap attualmente è concepita maggiormente
come strumento di supporto per gli utenti in carne e ossa, che la useranno
per meglio orientarsi all'interno del nostro sito.
In Drupal è possibile creare una sitemap utilizzando il modulo “Site Map”.
Esso è incluso nel pacchetto DrupalPA ma deve essere attivato andando in
“Amministra
→
Costruzione
del
sito
→
Moduli”.
Il
suo
menù
di
configurazione è invece raggiungibile in “Amministra → Configurazione del
sito → Mappa del sito”. Qui possiamo scegliere un titolo e un messaggio
per la pagina e selezionare quali menù vogliamo siano visualizzati, più
altre configurazioni riguardanti categorie, tassonomia e RSS. Posizioniamo
il link alla sitemap in fondo a ogni pagina del nostro sito e cioè in quella
regione che il nostro tema grafico identifica come “Footer”. Per fare ciò
andiamo in “Amministra → Costruzione del sito → Blocchi”, vediamo che
nel footer è già presente un blocco denominato “Powered by Drupalpa”,
possiamo modificarlo cliccando su “Configura”.
Lista blocchi in footer
93
CAPITOLO 6 – SEO
Alla sezione “Corpo del blocco” aggiungiamo in coda al testo già presente
l'indirizzo corrispondente alla pagina della sitemap.
Impostazioni blocco “Powered by Drupalpa”
Infine in “Amministra → Gestione utente → Permessi” abilitiamo l'accesso
alla sitemap a tutti i tipi di utente previsti dal nostro sito.
6.4.3.2 – XML
Il protocollo Sitemap XML fu introdotto da Google nel 2005 e venne in
seguito adottato da tutti gli altri maggiori motori di ricerca. Esso consiste
in un file XML contenente una lista di URL da sottoporre ai motori di
ricerca. Esso permette un'indicizzazione più efficiente dei contenuti in
quanto per ogni URL è possibile specificare l'ultima data di aggiornamento,
la frequenza tipica con cui viene modificato e l'importanza rispetto agli
altri URL del sito. Le Sitemap XML sono particolarmente utili per i siti che
presentano contenuti dinamici, contenuti nuovi o non collegati tra loro e
per i siti sviluppati con strumenti quali Flash o Silverlight che sono
indicizzati con difficoltà dai motori di ricerca.
94
CAPITOLO 6 – SEO
La generazione del file Sitemap XML in Drupal è gestita dal modulo “XML
sitemap” che risulta già presente e attivo nel pacchetto DrupalPA.
Il modulo XML sitemap
Le sue impostazioni sono raggiungibili in “Amministra → Configurazione
del sito → XML sitemap”. Spuntiamo le voci del menù “Search engines” in
modo da assicurarci che la sitemap venga processata dai motori di ricerca.
In “Impostazioni”, alla voce “Contenuto” dobbiamo selezionare i tipi di
contenuto che vogliamo includere alla sitemap, clicchiamo su ognuno e
nella pagina che si aprirà, in “XML sitemap” modifichiamo il parametro
“Inclusion”. Tramite lo stesso comando, in fase di creazione di nuovi
contenuti, potremo scegliere singolarmente cosa aggiungere o meno alla
sitemap.
95
CAPITOLO 6 – SEO
Menù inclusione XML sitemap
6.4.4 – STRUMENTI DI SUPPORTO
In Drupal oltre ai moduli specifici per una singola attività SEO, sono
presenti anche dei moduli che forniscono un supporto più generale e
guidano l'utente tra i vari compiti dell'ottimizzazione per i motori di
ricerca. Uno di questi si chiama “SEO Checklist”, può essere scaricato dal
sito ufficiale al seguente indirizzo: http://drupal.org/project/seo_checklist.
Esso non aggiunge particolari funzionalità in Drupal, ma ci fornisce una
pagina raggiungibile in “Amministra → Configurazione del sito → SEO
checklist”, in cui è presente una lista di controllo suddivisa per categorie.
Qui troviamo elencate tutte le tecniche e accorgimenti da attuare per
ottimizzare al meglio il nostro sito. Vengono inoltre elencati i moduli di
Drupal corrispondenti a determinate tecniche, con il link per il download
diretto e il link al menù di configurazione per quelli già installati. Questo
modulo è pensato per accompagnare l'utente durante le varie fasi
dell'ottimizzazione, la sua lista funge da promemoria per le varie azioni da
intraprendere e segni di spunta automatici e manuali ci consentono di
tenere traccia dei progressi. Per questo motivo è il primo modulo che
andrebbe installato quando si comincia l'ottimizzazione di un nuovo sito
sviluppato in Drupal. Mostriamo nell'immagine seguente un ritaglio della
pagina del modulo in questione.
96
CAPITOLO 6 – SEO
Modulo SEO Checklist
Altro utile modulo è “SEO Friend” (http://drupal.org/project/seo_friend).
Esso fornisce dei resoconti riguardo ad alcuni modulo SEO ed in un sito
ottimizzato permette di tenere sotto controllo la consistenza nel tempo di
alcuni parametri quali ad esempio tag, titoli e URL. In “Amministra →
Gestione dei contenuti → SEO friend” troviamo il menù di configurazione in
cui SEO Friend fornisce settaggi supplementari per alcuni moduli SEO
come ad esempio il controllo sui termini duplicati e la lunghezza delle
stringhe nei meta tag. In “Amministra → Rapporti → SEO reports”
troviamo i vari resoconti suddivisi per moduli in cui poter controllare come
essi vengono utilizzati.
97
CONCLUSIONI
Nello svolgimento di questa tesi si è potuta fare una conoscenza
approfondita di alcuni argomenti molto importanti riguardanti la rete
internet.
In primo luogo i sistemi per la gestione dei contenuti e le loro logiche di
utilizzo in quanto strumenti integrati per la realizzazione di siti internet.
Drupal si è rivelata una soluzione molto potente, adatta e di semplice
utilizzo per piccoli siti, ma anche sufficientemente complessa da richiedere
un buon livello di formazione e apprendistato nel caso di progetti più
complessi.
Sono
poi
state
sull'accessibilità
affrontate
dei
le
contenuti.
disposizioni
Se
ne
italiane
sono
ed
appresi
internazionali
i
metodi
di
implementazione pratica e le finalità in quanto strumento volto a
migliorare l'esperienza con il mezzo tecnologico per ogni tipologia
d'utente.
Infine si è appresa l'importanza e l'attenzione che dovrebbe essere rivolta
alle pratiche di ottimizzazione per il posizionamento sui motori di ricerca.
Un buon progetto non può prescindere da questa fase se è vero che uno
degli obiettivi di un sito internet è quello di richiamare quanti più visitatori
possibile.
Il portale che è stato realizzato rappresenta e rispecchia nella sua
struttura le tematiche appena descritte. La bontà di un progetto è anche
quella di saper stare al passo coi tempi e la struttura dinamica di Drupal
dovrebbe essere una garanzia in tal senso.
98
BIBLIOGRAFIA
•
Drupal 6. Costruire applicazioni web 2.0
Riccardo Severgnini – Hoepli
•
HTML e CSS. La grande guida
Rachel Andrew, Dan Shafer – Mondadori
•
http://drupal.org
•
http://www.drupalitalia.org
•
http://webaccessibile.org
•
http://accessibile.diodati.org
•
http://www.kristen.org
99