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