Realizzare siti web accessibili con Microsoft Content Management Server

Transcript

1 Realizzare siti web accessibili con Microsoft Content Management Server White Paper Versione 1, Gennaio 2006

2 SOMMARIO 1 INTRODUZIONE Contenuto del documento NORMATIVA E SUE IMPLICAZIONI Requisiti tecnici Impatto della legge LA PIATTAFORMA MICROSOFT PER IL WEB CONTENT MANAGEMENT LO SCENARIO Sviluppo di pagine web accessibili Esempi applicativi Creare una nuova pagina Inserimento di link Inserimento di immagini Associare un link ad una immagine Associare aree sensibili ad una immagine Inserire link per il download di file Inserimento e modifica di tabelle BIBLIOGRAFIA E APPROFONDIMENTI CODICE HTML DI ESEMPIO

3 Introduzione Ottenere il massimo grado di accessibilità ai propri contenuti e servizi è uno dei primari obiettivi delle amministrazioni pubbliche e delle aziende private che pubblicano informazioni in internet. Da tempo sono disponibili studi con le raccomandazioni e i principi generali dell accessibilità. Purtroppo le tecnologie attualmente disponibili spesso non sono nativamente in grado di adattarsi alle differenti necessità degli utenti, in special modo i disabili. Ne consegue che per progettare e realizzare un sito che non discrimini determinate categorie di utenti è necessario uno sforzo aggiuntivo. Con il termine accessibilità si intende la capacità di erogare informazioni e servizi anche alle persone che necessitano di tecnologie assistive o di configurazioni particolari a causa delle loro disabilità. Pertanto, rendere accessibile un servizio informatico significa rimuovere tutte quelle barriere che impediscono o limitano la fruizione del servizio stesso da parte di utenti diversamente abili. Le tecnologie assistive sono tutti quegli strumenti o programmi che riducono o eliminano lo svantaggio ad accedere ai contenuti web da parte di persone disabili. Il 2003 in Europa è stato l anno del disabile. Questo ha contribuito a dare il via anche in Italia a molte iniziative legate al tema dell accessibilità delle informazioni. Ed è proprio in questo contesto che il Parlamento Italiano ha approvato la legge n 4/2004, che si pone come fondamentale obiettivo quello di dare agli oltre tre milioni di disabili italiani le stesse opportunità di accesso al mondo dell informazione digitale che hanno tutti gli altri utenti. 1.1 Contenuto del documento L obiettivo di questa pubblicazione è di descrivere come sviluppare applicazioni web che soddisfano i requisiti della legge n 4/2004, utilizzando le tecnologie Microsoft, in particolare la soluzione di enteprise web content management system denominata Microsoft Content management Server. Dopo una panoramica sulla normativa attualmente in vigore, sarà esaminata la piattaforma Microsoft per la realizzazione di un portale e per la gestione dei suoi contenuti. Successivamente verrà approfondito un esempio, mediante l analisi di un sito di un ipotetico Comune, verificandone scenari e situazioni concrete; tale esempio mostrerà come sia possibile utilizzare la soluzione Microsoft per i portali, permettendo di adempire alla normativa. 3

4 Normativa e sue implicazioni La legge n 4/2004 Disposizioni per favorire l accesso dei soggetti disabili agli strumenti informatici è stata approvata dal Parlamento Italiano il 9 Gennaio 2004 e pubblicata sulla Gazzetta Ufficiale n. 13 del 17 Gennaio Obiettivo principale delle disposizioni è la tutela del diritto all accesso ai servizi informatici della pubblica amministrazione da parte dei disabili. Detta tutela viene garantita mediante l obbligo, da parte delle amministrazioni elencate all articolo 3, alla costruzione di siti Internet accessibili e mediante la preferenzialità di strumenti informatici accessibili nelle procedure di acquisto. Il Decreto Ministeriale, che stabilisce le linee guida recanti i requisiti tecnici e i diversi livelli per l'accessibilità e le metodologie tecniche per la verifica dell'accessibilità dei siti Internet, nonché i programmi di valutazione assistita utilizzabili a tale fine, è stato pubblicato sulla Gazzetta Ufficiale n. 183 dell'8 agosto Gli atti normativi, e i relativi allegati tecnici influenzano in modo rilevante la progettazione, lo sviluppo e la gestione di un sito Web e dei suoi contenuti. Nel Regolamento di attuazione, firmato il 1 marzo 2005 dal Presidente della Repubblica, sono presenti alcune definizioni che vale la pena richiamare: La fruibilità è definita come la caratteristica dei servizi di rispondere a criteri di facilità e semplicità d uso, di efficienza, di rispondenza alle esigenze dell utente, di gradevolezza e di soddisfazione nell uso del prodotto La definizioni data riprende quasi alla lettera quanto previsto nella Norma ISO in cui la usabilità è definita come: grado in cui un prodotto può essere usato da specifici utenti per raggiungere specifici obiettivi con efficacia, efficienza e soddisfazione in uno specifico contesto d'uso I criteri indicati nella definizione devono quindi essere tenuti in gran conto dai progettisti e dai redattori dei siti Web ed il Regolamento precisa anche alcuni aspetti pratici affermando che la fruibilità è caratterizzata anche da: 1. facilità e semplicità d uso, assicurando, fra l altro, che le azioni da compiere per ottenere servizi e informazioni siano sempre uniformi tra loro; 2. efficienza nell uso, assicurando, fra l altro, la separazione tra contenuto, presentazione e modalità di funzionamento delle interfacce, nonché la possibilità di rendere disponibile l informazione attraverso differenti canali sensoriali; 3. efficacia nell uso e rispondenza alle esigenze dell utente, assicurando, fra l altro, che le azioni da compiere per ottenere in modo corretto servizi e informazioni siano indipendenti dal dispositivo utilizzato per l accesso; 4. soddisfazione nell uso, assicurando, fra l altro, l accesso al servizio e all informazione senza ingiustificati disagi o vincoli per l utente; Queste caratteristiche saranno richiamate nel capitolo 4, quando si affronteranno scenari applicativi che esemplificheranno il disegno e lo sviluppo di un sito Web. La Segreteria tecnico-scientifica della Commissione interministeriale permanente per l impiego delle ICT a favore delle categorie deboli o svantaggiate ha prodotto un interessante documentazione tecnica, tra cui uno studio pubblicato nel Dicembre 2004, che è stato utilizzato come base del decreto. Alla stesura di tale studio hanno contribuito, tra gli altri, esperti del settore, associazioni di categoria di disabili, rappresentanti delle maggiori aziende di software presenti in Italia. Nella stesura dei requisiti il gruppo di lavoro ha sostanzialmente recepito le raccomandazioni del progetto Web Accessibility Initiative (WAI) del World Wide Web Consortium (W3C) e gli standard definiti nel 4

5 paragrafo della Sezione 508 del Rehabilitation Act degli Stati Uniti (vedi bibliografia nel paragrafo 0). Sono state previste due tipi di verifiche: La verifica tecnica: valutazione condotta da esperti, anche con strumenti informatici, sulla base di parametri tecnici; La verifica soggettiva: valutazione del livello di qualità dei servizi, già giudicati accessibili tramite la verifica tecnica, effettuata con l intervento del destinatario, anche disabile, sulla base di considerazioni empiriche. Serve a stabilire il grado di fruibilità delle informazioni secondo questi criteri: o o o o o o o o o o o o 1.2 Requisiti tecnici percezione: le informazioni e i comandi necessari per l esecuzione dell attività devono essere sempre disponibili e percettibili; comprensibilità: le informazioni e i comandi necessari per l esecuzione delle attività devono essere facili da capire e da usare; operabilità: informazioni e comandi sono tali da consentire una scelta immediata della azione adeguata per raggiungere l obiettivo voluto; coerenza: stessi simboli, messaggi e azioni devono avere gli stessi significati in tutto l ambiente; salvaguardia della salute: indica le caratteristiche che deve possedere l ambiente per salvaguardare e promuovere il benessere psicofisico dell utente; sicurezza: indica le caratteristiche che l ambiente deve possedere per fornire transazioni e dati affidabili, gestiti con adeguati livelli di sicurezza; trasparenza: l ambiente deve comunicare il suo stato e gli effetti delle azioni compiute. All utente devono essere comunicate le necessarie informazioni per la corretta valutazione della dinamica dell ambiente; apprendibilità: indica le caratteristiche che l ambiente deve possedere per consentire l apprendimento del suo utilizzo da parte dell utente in tempi brevi e con minimo sforzo; aiuto e documentazione: fornire funzioni di aiuto come guide in linea e documentazione relative al funzionamento dell ambiente. Le informazioni di aiuto devono essere facili da trovare e focalizzate sul compito dell utente; tolleranza agli errori: l ambiente deve prevenire gli errori e, qualora questi accadano, devono essere forniti appropriati messaggi che indichino chiaramente il problema e le azioni necessarie per recuperarlo; gradevolezza: indica le caratteristiche che l ambiente deve possedere per favorire e mantenere l interesse dell utente; flessibilità: l ambiente deve tener conto delle preferenze individuali e dei contesti. Di seguito sono elencati i 22 requisiti da sottoporre alla verifica tecnica, così come sono enunciati all Allegato A del Decreto Ministeriale 8 luglio Per ogni requisito si rimanda agli scenari applicativi che esemplificano come il requisito impatti sul disegno e lo sviluppo di un sito web. Requisito n. 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): 5

6 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 presentazionali (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; 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.. Questo requisito è trattato nei paragrafi: Requisito n Inserimento e modifica di tabelle 1.4 Sviluppo di pagine web accessibili Non è consentito l uso dei frame nella realizzazione di nuovi siti. In sede di prima applicazione, per i siti 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 presentazionali (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 alcentro nazionale per l informatica nella pubblica amministrazione. Questo requisito è citato nel paragrafo: Requisito n Sviluppo di pagine web accessibili 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. Questo requisito è trattato nei paragrafi: Inserimento di link Inserimento di immagini Inserire un immagine generica : attributo ALT 6

7 Requisito n Inserire un immagine grafica : attributo LONGDESC Associare un link ad una immagine Associare aree sensibili ad una immagine Inserire link per il download di file Garantire che tutti gli elementi informativi e tutte le funzionalità siano disponibili anche in assenza del particolare colore utilizzato per presentarli nella pagina. Questo requisito è citato nel paragrafo: Requisito n Sviluppo di pagine web accessibili 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. Questo requisito è citato nel paragrafo: Requisito n Sviluppo di pagine web accessibili 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. Questo requisito è trattato nel paragrafo: Requisito n Inserire un immagine generica : attributo ALT 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. Questo requisito è trattato nel paragrafo: Requisito n Associare aree sensibili ad una immagine Se vengono utilizzate mappe immagine lato server, fornire i collegamenti di testo alternativi necessari per poter ottenere tutte le informazioni o i servizi raggiungibili interagendo direttamente con la mappa. Questo requisito è trattato nel paragrafo: Requisito n Associare aree sensibili ad una immagine 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. Questo requisito è trattato nel paragrafo: Inserimento e modifica di tabelle 7

8 Requisito n. 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. Questo requisito è trattato nel paragrafo: Requisito n Inserimento e modifica di tabelle 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. Questo requisito è trattato nel paragrafo: Requisito n Inserimento e modifica di tabelle 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. Questo requisito è citato nel paragrafo: Requisito n Sviluppo di pagine web accessibili 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. Questo requisito è citato nel paragrafo: Requisito n Sviluppo di pagine web accessibili 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. Questo requisito è citato nel paragrafo: Requisito n Sviluppo di pagine web accessibili 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 n. 3. Questo requisito è citato nel paragrafo: Requisito n Sviluppo di pagine web accessibili 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. Questo requisito è citato nel paragrafo: 1.4 Sviluppo di pagine web accessibili 8

9 Requisito n. 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. Questo requisito è citato nel paragrafo: Requisito n Sviluppo di pagine web accessibili 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. Questo requisito è citato nel paragrafo: Requisito n Inserire un immagine grafica : attributo LONGDESC 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. Questo requisito è trattato nei paragrafi: Requisito n Inserimento di link Inserire link per il download di file Inserimento e modifica di tabelle 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. Questo requisito è trattato nel paragrafo: Requisito n Sviluppo di pagine web accessibili 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. Questo requisito è trattato nel paragrafo: Requisito n Inserimento di link 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 9

10 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. Questo requisito è trattato nel paragrafo: 1.4 Sviluppo di pagine web accessibili 1.3 Impatto della legge L impatto della legge Stanca sulle politiche di informatizzazione delle Pubbliche Amministrazioni è notevole. Queste sono infatti obbligate a rispettare i requisiti tecnici per tutti i siti internet. I soggetti privati sono invece liberi di scegliere se sviluppare applicazioni internet accessibili. In quest ultimo caso i soggetti privati, al solo fine di ottenere il certificato e inserire il logo nel sito web (vedi Figura 1 - Logo accessibilità), dovranno ottenere l attestato da un valutatore esterno iscritto in un elenco pubblico di valutatori, appositamente creato presso il Centro Nazionale per l Informatica nella Pubblica Amministrazione (CNIPA). Al CNIPA spetterà anche il ruolo di monitoraggio. Figura 1 - Logo accessibilità 10

11 La piattaforma Microsoft per il Web Content Management Gestire contenuti Web (Web Content Management) significa archiviare, pubblicare, presentare, personalizzare e creare collegamenti incrociati fra documenti di qualsiasi tipo: pagine HTML, documenti Office e Pdf, pagine ASP, immagini, file multimediali e relativi metadati. Tutte queste attività sono finalizzate alla pubblicazione dei dati adatti al gruppo di utenti che si desidera informare. Tale gestione è un aspetto fondamentale dei portali web. A mano a mano che aumenta la complessità dei siti diventa anche più onerosa la manutenzione ed il controllo dei contenuti. Per evitare di arrivare al punto in cui i costi di gestione sono maggiori dei benefici è fondamentale dotarsi di uno strumento che faciliti la redazione dei contenuti e automatizzi la pubblicazione delle informazioni. Gli strumenti di web content management presenti sul mercato si differenziano principalmente per il tipo di infrastruttura su cui si appoggiano (Windows, Linux, Unix) e per le funzionalità che realizzano: Autenticazione dell utente Personalizzazione delle informazioni in base al profilo dell utente (targeting) Ricerca delle informazioni all interno del sito Collaborazione fra utenti (scambio di documenti, chat, discussioni, ecc) Pubblicazione e aggiornamento dei contenuti da parte di utenti non tecnici Processo di approvazione dei contenuti (workflow) Analisi sugli accessi e sui collegamenti visitati Integrabilità con altre sorgenti d informazione Catalogo dei prodotti Microsoft propone una piattaforma completa e flessibile per lo sviluppo e la manutenzione di applicazioni web e per la pubblicazione di contenuti dinamici. Tale piattaforma è interamente fondata sulla tecnologia.net e si compone di varie applicazioni, che possono essere di volta in volta acquistate secondo le necessità. 11

12 Figura 2 - Piattaforma Microsoft per il Web Content Management La scelta delle componenti necessarie passa attraverso l incrocio delle proprie esigenze con le funzionalità offerte dai singoli prodotti. Di seguito una tabella illustrativa con le funzionalità offerte dai vari prodotti. Per un maggiore dettaglio si rimanda al sito ufficiale Microsoft. 12

13 Autenticazione Aggregazione contenuti Ricerca Collaborazione Workflow Gestione contenuti Analisi Personalizzazione Catalogo prodotti Table 1 - Matrice requisiti / prodotti Adottare la piattaforma Microsoft comporta questi vantaggi: 13

14 Riduzione dei tempi e del costo di gestione dei contenuti web; Riduzione dei tempi e del costo di sviluppo e installazione di nuovi siti; Introduzione del processo di approvazione dei contenuti personalizzabile; Accentramento del controllo della struttura e lo stile delle pagine, creando una standardizzazione che riduce il margine di errore degli autori; Mettere a frutto al massimo le capacità degli autori, sgravandoli dei compiti tecnici ; Ottenere il massimo dal team di sviluppo, che può concentrarsi sulla realizzazione di nuovi siti, non dovendo più aggiornare i contenuti web. Vediamo nel dettaglio come i componenti della piattaforma Microsoft contribuiscono al raggiungimento di questi risultati. Microsoft Content Management Server 2002 Il componente centrale dell architettura è Microsoft Content Management Server 2002 (CMS), che rende veloce ed efficiente la gestione delle applicazioni web. Le pagine web sono realizzate incrociando una struttura (denominata template) con i contenuti veri e propri. Il modello di pubblicazione prevede una distinzione di ruoli: Lo sviluppatore e il designer web collaborano per la produzione dei template, inserendo nelle pagine i controlli web. I controlli sono oggetti lato server che realizzano la navigazione, il footer, l header, la bread-crumb trail, ecc. In particolare esiste una famiglia di controlli denominati placeholder, progettati per ospitare i contenuti che gli autori decidono di volta in volta di pubblicare. Esiste piena libertà di personalizzare i controlli esistenti o di crearne di nuovi. Il lavoro degli sviluppatori è facilitato dalla stretta integrazione fra Visual Studio.NET e CMS. L autore e il revisore redigono e pubblicano i contenuti delle pagine web. Queste sono il risultato dell elaborazione dei template (che determinano la struttura della pagina) e dei relativi PlaceHolder (che sono i contenitori nei quali l autore inserisce i propri contributi). Gli autori non hanno bisogno di particolari competenze tecniche, potendo utilizzare una semplice interfaccia web o Microsoft Word come editor di contenuti. Le pagine così preparate possono passare attraverso un workflow di approvazione prima di essere disponibili per l utente finale. Un attenzione particolare meritano i PlaceHolder: per capire che cosa sono, come funzionano e quale sia il loro ruolo nella gestione dei parametri di accessibilità delle pagine che realizzate dagli author. Il PlaceHolder è una interfaccia per l inserimento di contenuti. Essa viene visualizzata nel contesto di Edit Site quando l author dei contenuti effettua il login nel portale. Le aree della pagina che possono essere da lui modificate si presentano come input-box nei quali saranno aggiunti i contenuti. Ecco un esempio di PlaceHolder: le icone in alto a destra indicano rispettivamente che l utente potrà inserire testi, link, immagini, attachments. 14

15 Questi contenuti vengono inseriti direttamente da tastiera (testi, links...) oppure attraverso una specifica barra di strumenti (cisponibile in fase di editing) del browser. Le funzioni utilizzabili per questa barra sono disponibili in relazione con ciò che il PlaceHolder può aspitare a livello di contenuti. Ad esempio, se il PlaceHolder non è configurato per ospitare immagini, l icona Image della barra degli strumenti risulterà deisattivata. Di seguito è rappresentata la barra degli strumenti per l inserimento dei contenuti nei PlaceHolder. La ToolBar dei PlaceHolder viene visualizzata sotto la address bar del browser. Permette di inserire contenuti, e formattare il testo, creare tabelle, links... Nella prima riga è visibile la possibilità di formattare il testo e aggiungere immagini, multimedia (disattivato), attachments, tabelle, links, oltre alla finzione che permette di visualizzare i contenuti del PlaceHolder in forma HTML. Nella seconda riga le funzioni classiche di una toolbar di Word Processor: cut/copy/paste, undo/redo, Bold/Italic/Underline, Colore del testo e backgroung del testo, allineamento, elenchi puntati e numerati, indentazione. A questo punto bisogna porre l attenzione sui contenuti e soprattutto su come questi vengono gestiti dal sistema di CMS. Abbiamo infatti visto che il codice che costituisce le pagine viene parte dai template e parte dai PlaceHolder, in virtù di ciò che l author vi inserisce. Ne deriva che il codice costituito nei PlaceHoler deve essere corretto ai fini dell accessibilità e quindi l author dovrà prestare la dovuta attenzione in fase di inserimento. Uno dei punti essenziali delle norme sull accessibilità prevede la separazione tra i contenuti e la parte presentazionale, cioè tutto ciò che forma il layout e l aspetto estetico dei contenuti, che deve essere gestito attraverso fogli di stile. Nel caso del testo, ad esempio, colore, dimensione, carattere, allineameto eccetera deve essere gestito tramite classi associate al testo, evitando formattazioni via codice HTML e parametri di TAG. Per questo motivo l utente dovrà limitarsi a un inserimento soft senza preoccuparsi di dare forma grafica ai contenuti gestendone l aspetto e il layout: infatti l aspetto formale della pagina viene gestito dai template a dai css precedentemente definiti dagli sviluppatori e dai web-designer. Se da un lato questo offre un enorme vantaggio (perché l author non deve preoccuparsi di dare una forma grafica a ciò che inserisce nei PlaceHolder), dall altro va ricordato che non è possibile disattivare queste funzionalità dalla toolbar di CMS, e quindi l author potrebbe comunque correre il rischio di inserire (anche accidentalmente) codice non accettabile ai fini delle norme sull accessibilità. Quindi le pagine web sono il risultato della somma di vari elementi: la scelta del template preparato dagli sviluppatori e il tipo di contenuti che vengono iseriti dagli autori. Questo approccio consente di aumentare la qualità del prodotto finale, in quanto gran parte del lavoro è stato svolto centralmente dagli sviluppatori. Questi ultimi hanno le competenze adatte a garantire l accessibilità della pagina web. Per garantire l accessibilità delle parti inserite dagli autori (contenuto dei placeholder) si possono adottare delle soluzioni organizzative e/o scegliere dei placeholder progettati per guidare l autore, limitando le sue possibilità di errore. In ogni caso, per ogni nuova pagina web, le informazioni candidate ad essere non accessibili sono facilmente individuabili e ridotte al minimo, essendo tutte all interno dei placeholder. La revisione finale dunque non riguarda l intera pagina. I workflow di CMS permettono di definire un processo di approvazione che include anche la verifica di accessibilità da parte di personale competente. 15

16 Figura 3 - Processo di sviluppo di un sito web a ruoli La costruzione del sito a template consente di mantenere centralizzato il controllo del look & feel, della navigazione e del layout generale. Le modifiche quindi si apportano velocemente sul template e si distribuiscono automaticamente, invece di applicarle singolarmente a tutte le pagine. Una delle funzionalità più apprezzate di CMS è la gestione automatica dei link dinamici, che, di fatto, impedisce di avere collegamenti a contenuti non presenti. Quando si elimina o si sposta una pagina non è più necessario rimuovere o aggiornare i link all interno del sito manualmente, CMS apporta le necessarie modifiche automaticamente. Questo si traduce in un notevole risparmio di tempo su un attività a basso valore aggiunto. Content Management Server offre all'utente del sito un'esperienza personalizzata e mirata, a misura del suo profilo e del dispositivo di navigazione. Windows Server 2003 Windows Server 2003 è il sistema operativo su cui è installato CMS e fornisce tutti i servizi di base garantendo affidabilità, scalabilità, sicurezza e flessibilità. Aggiungendo memoria e processori ai server che ospitano CMS è possibile far fronte ad un incremento della domanda dei servizi. Per aumentare ulteriormente le performance dell applicazione è possibile aggiungere ulteriori server in configurazione load balanced. Semplice da gestire ed utilizzare, Windows Server 2003 è un sistema operativo multi-purpose in quanto può essere configurato per realizzare un web server, un file server, un mail server, un VPN server, ecc. Parte integrante del sistema operativo Windows Server 2003 è Microsoft Internet Information Services 6.0 (IIS), il web server. La presenza di un web server é indispensabile per la creazione di un portale, 16

17 qualunque sia la sua funzione. Il web server raccoglie le richieste provenienti dalla intranet / intranet, recupera la risorsa richiesta e la restituisce al client. Microsoft.NET Framework costituisce le fondamenta su cui si basa la nuova generazione delle applicazioni Windows. Semplifica lo sviluppo di nuove applicazioni fornendo una libreria di classi che realizzano le funzionalità di base. Il Common Language Runtime (CLR) è parte integrante del framework. Costituisce l ambiente in cui vengono eseguiti i programmi sviluppati in differenti linguaggi (inclusi Visual Basic, C#, C++). CLR gestisce la memoria, le eccezioni e la sicurezza. SQL Server 2000 SQL Server 2000 è un pacchetto di analisi dati e un database robusto e scalabile. Costituisce i repository dei dati di CMS, Commerce Server e SharePoint. In particolare CMS memorizza nel database: I template I contenuti (testo, immagini, documenti) Tutti i metadati Le definizione dei placeholder La struttura del sito A fronte di una richiesta http CMS assembla dinamicamente le pagine HTML, prelevando i contenuti e i template dal database SQL Server, dove sono memorizzati come oggetti. SQL Server include un interfaccia grafica per la pianificazione, lo sviluppo e l amministrazione dei siti sviluppati con CMS. Microsoft Visual Studio.NET Microsoft Visual Studio.NET è un insieme completo di strumenti per lo sviluppo di applicazioni Windows. CMS è strettamente integrato con l ambiente di sviluppo Visual Studio.NET, dove i programmatori possono comporre ed eseguire il debug dei template. I template sono sviluppati in un ambiente visuale, trascinando i controlli di CMS per comporre la pagina. E poi possibile aggiungere della logica o sviluppare nuovi controlli con i linguaggi di programmazione Visual Basic o C#. CMS fornisce una libreria di controlli web che realizzano le funzionalità di base dei siti web: navigazione, link, immagini, placeholder, combo-box, caselle di testo, ecc. Tramite Visual Studio.NET è possibile estendere questa libreria sviluppando componenti con comportamenti specifici. Una volta sviluppato, il controllo accessibile si può riutilizzare quante volte si desidera all interno del sito. In questo modo si riduce lo sforzo aggiuntivo introdotto dall aderenza alle specifiche dell accessibilità. L integrazione con Microsoft Visual Studio.NET riduce i tempi di sviluppo, aumentando la produttività dei programmatori. Tutto ciò si traduce in un time-to-market minore rispetto a soluzioni sviluppate con altre tecnologie. Ad esempio creando un nuovo progetto, Visual Studio.NET automaticamente aggiunge la Web Author Console ad ogni pagina web creata. La Web Author Console è un controllo che espone i comandi necessari agli autori per creare nuove pagine, modificarne il contenuto, approvarle, ecc. La console può essere anche personalizzata utilizzando Visual Studio.NET. Visual Studio.NET è a sua volta integrato con Visual SourceSafe, per gestire il codice sorgente in un ambiente con molti sviluppatori. Microsoft Office Microsoft Office è una famiglia di prodotti ideati per la produttività personale in un sistema più completo e integrato. Partendo da strumenti noti, la piattaforma Microsoft Office System include ora applicazioni, server, servizi e soluzioni progettati per agevolare la risoluzione di numerosi problemi aziendali. 17

18 Microsoft Office System fornisce i componenti di base per la creazione di soluzioni che consentono di: Garantire agli utenti aziendali un più facile accesso alle informazioni di cui hanno bisogno, in modo che possano acquisire conoscenze più approfondite e intraprendere azioni più efficaci; Migliorare la capacità dell'azienda di anticipare, gestire e rispondere prontamente ai cambiamenti del mercato; Consentire a team e aziende di collaborare con la necessaria rapidità e agilità; Incrementare la produttività personale e permettere agli utenti aziendali di offrire il proprio contributo in un ambiente sempre più esigente. In particolare, gli autori di contenuti web possono aggiornare il portale utilizzando la familiare interfaccia di Microsoft Office Word, semplificando così il processo di pubblicazione. I redattori non hanno bisogno di conoscere linguaggi di programmazione o essere esperti HTML. La rapida curva di apprendimento che ne consegue comporta un risparmio per l azienda che ne usufruisce. Authoring Connector è l add-on di Microsoft Office Word che aggiunge la funzionalità di pubblicazione dei documenti in CMS. In pratica aggiunge delle voci di menu che permettono all autore di scegliere il template, il placeholder, di decidere se pubblicare il contenuto come HTML o come collegamento al documento. E sempre possibile vedere una anteprima della pagina per avere la certezza del risultato finale. Microsoft Commerce Server 2002 Microsoft Commerce Server 2002 (CS) include tutta una serie di funzionalità fra le quali: Profilazione: Commerce Server mantiene un database con i dati degli utenti sui quali può essere costruita la logica che permette di indirizzare le campagne e determinati prodotti ad alcune categorie di clienti. L autenticazione degli utenti sul sito è basata sul database dei profili. Personalizzaione: la profilazione abilita anche la possibilità di veicolare i contenuti in base al profilo dell utente, dando l opportunità di fare cross-selling e campagne commerciali mirate. Analisi: questa funzionalità di CS permette agli analisti di scoprire comportamenti dei visitatori del sito. Queste informazioni sono utili per definire le campagne. Catalogo: il catalogo dei prodotti, così come le altre funzionalità di CS, viene amministrato tramite la Business Desk. Si tratta di una applicazione web based, utilizzabile anche da utenti non tecnici, per l amministrazione di queste caratterisitche. Per questo CS è una scelta quasi obbligata qualora si intenda sviluppare un sito di ecommerce B2B o B2C. CMS può sfruttare tutte o parte di queste funzionalità, essendo studiato per essere facilmente integrato con Commerce Server. Il componente che permette l integrazione fra le due applicazioni è MSIB 2002 Content Connector. Il programmatore costruisce l applicazione basandosi sulle informazioni di Commerce Server esposte attraverso le API e i controlli web. In questo modo è possibile: Personalizzare il sito in base al profilo dell utente, memorizzato nelle tabelle di CS; Pubblicare il catalogo dei prodotti di CS ai clienti; Modificare il catalogo tramite le pagine del sito CMS invece di usare la Business Desk. Microsoft SharePoint Portal Server 2003 Microsoft SharePoint Portal Server 2003 (SPS) e Microsoft Windows SharePoint Services sono i prodotti Microsoft per la gestione documentale, la collaborazione, l indicizzazione e la ricerca. Per questo SPS è generalmente scelto per realizzare le intranet aziendali. SPS è integrabile con Content Management Server per aggiungere la funzionalità di ricerca indicizzata dei contenuti interni ed esterni al sito. In pratica il connettore permette lo scambio delle chiavi di ricerca 18

19 fra le due applicazioni. Lo sviluppatore ha il compito di inserire nei template di CMS i controlli web che, richiamando SharePoint, eseguono la ricerca e restituiscono i risultati. Per ridurre la duplicazione dei documenti e aumentare la consistenza dei dati si può facilmente realizzare la condivisione di informazioni fra l intranet aziendale, sviluppata con SPS, e il portale web, sviluppato con CMS. SharePoint mette a disposizione dell azienda gli strumenti necessari per la creazione di siti per la condivisione delle informazioni, la collaborazione e l accesso centralizzato alle applicazioni aziendali. 19

20 Lo scenario Vallecima è un comune fittizio che conta 15 mila abitanti. L amministrazione della città ha deciso di dotarsi di un nuovo portale internet con lo scopo di rendere semplice per i cittadini l accesso alle informazioni dell amministrazione pubblica. Il portale internet è stato concepito per veicolare informazioni non solo di tipo amministrativo, ma anche legate alla vita quotidiana dei cittadini. Una delle risorse più importanti per la comunità di Vallecima è il turismo: la località si trova sulle Alpi, nei pressi di un importante parco naturale che in estate diventa meta di visitatori che desiderano passare le vacanze nella natura. Vallecima si trova non lontano da impianti sciistici che attirano un numero crescente di sportivi durante l inverno. Grazie al portale i turisti hanno a disposizione una fonte di informazione aggiornata, precisa e puntale. Ciò rende più semplice organizzare i flussi verso le strutture ricettive con indubbi vantaggi per la comunità residente. Costituisce anche una risorsa per i privati che desiderano ricevere visibilità nel portale attraverso l inserimento di banner che vengono gestiti dall ufficio dell assessore per il turismo e il commercio. Il portale deve soddisfare alcune esigenze di base, difficilmente raggiungibili per una piccola organizzazione che conta pochi addetti già dediti ad altre mansioni. Lo strumento prescelto è stato in grado di garantire il raggiungimento di tutti gli obiettivi, nei tempi previsti e con costi ridotti. Il sistema scelto è la piattaforma Microsoft per il Web Content Management, costituito centralmente da Microsoft Content Management Server Vediamo nel dettaglio le tematiche affrontate in fase di analisi: 1) La prima esigenza era quella di poter utilizzare uno strumento di gestione dei contenuti del portale che renda gli addetti autonomi da interventi esterni in tutte le fasi di elaborazione al fine di mantenere sempre aggiornate le informazioni. 2) I diversi operatori dei singoli uffici del comune devono poter creare nuove pagine e inviarle successivamente ai propri responsabili per la verifica e la successiva approvazione. Alcuni meccanismi garantiscono che le informazioni che vengono pubblicate nel sito passino attraverso successivi step che permettono il controllo totale di tutto quello che va on line. 3) Il portale deve appoggiarsi ad un infrastruttura che renda semplice la creazione di nuove sezioni nel sito, canali, aree tematiche. Questo garantisce prospettive di lungo termine al portale, che potrà subire modifiche pesanti senza spese aggiuntive. 4) Deve essere sempre possibile amministrare il sito, anche da remoto. L amministrazione è possibile tramite un interfaccia web annidata nel tradizionale browser Internet Explorer senza la necessità di installare nuovo software. 5) Il consiglio comunale ha deciso di adeguare la struttura e le tecnologie utilizzate per la creazione del portale alle norme stabilite dalla Legge 4/ Sviluppo di pagine web accessibili Sviluppare siti accessibili significa comprendere innanzi tutto come le persone con disabilità utilizzano le tecnologie dell informazione e quali barriere possono incontrare. Nella definizione di accessibilità presente nella Legge 4/2004, si parla espressamente di tecnologie assistive o configurazioni particolari di cui necessitano le persone disabili per poter fruire di informazioni e servizi resi disponibili dai sistemi informatici in generale e dal Web in particolare. Gli sviluppatori, gli autori e gli editori delle pagine Web, durante tutte le fasi del lavoro, devono dunque considerare che il fruitore del sito potrebbe utilizzare tecnologie assistite o avere speciali configurazioni. Va osservato che nessuno strumento di Web Content Management potrà mai da solo assicurare l aderenza del prodotto finito ai requisiti di accessibilità. Lo strumento può aiutare, ma ci sono dei requisiti ai quali non ci si può conformare con il solo software. 20

21 Riprendendo in esame le definizioni del Regolamento in merito alle caratteristiche della fruibilità si possono ottenere queste indicazioni operative: 1. per avere facilità e semplicità d uso, assicurando, fra l altro, che le azioni da compiere per ottenere servizi e informazioni siano sempre uniformi tra loro, è importante che il layout delle pagine sia coerente in tutto il sito e cioè che, ad esempio, la barra di navigazione e gli altri elementi comuni a tutte le pagine si trovino sempre nella stessa posizione, che eventuali simboli utilizzati abbiano sempre lo stesso significato e svolgano sempre la stessa azione; 2. per ottenere l efficienza nell uso, assicurando, fra l altro, la separazione tra contenuto, presentazione e modalità di funzionamento delle interfacce, nonché la possibilità di rendere disponibile l informazione attraverso differenti canali sensoriali, è importante che le caratteristiche presentazionali (tipo e dimensioni dei caratteri, colori, ecc.) siano definite attraverso i Fogli di Stile CSS e non inserite nel codice HTML con cui è realizzata la pagina. Inoltre, è fortemente suggerito sia evitare la realizzazione di funzionalità essenziali con l uso esclusivo di tecniche di programmazione (scripting, applet, ecc.), sia fornire informazione anche in modalità testuale quando essa è veicolata per mezzo di oggetti multimediali; 3. per ottenere l efficacia nell uso e rispondenza alle esigenze dell utente, assicurando, fra l altro, che le azioni da compiere per ottenere in modo corretto servizi e informazioni siano indipendenti dal dispositivo utilizzato per l accesso, è importante, ad esempio, evitare che una certa azione sia eseguibile con il solo utilizzo del mouse; 4. per ottenere la soddisfazione nell uso, assicurando, fra l altro, l accesso al servizio e all informazione senza ingiustificati disagi o vincoli per l utente, è importante, ad esempio, evitare di appensantire eccessivamente la pagina per abbreviare al massimo i tempi di scaricamento dal sever al pc utente. CMS aiuta al rispetto di queste caratteristiche mediante l uso dei template e dei placeholder: con essi il progettista può tener conto di tutto quanto indicato e fissarlo in modo da sollevare il redattore dei contenuti da queste incombenze, addirittura impedendogli di compiere errori. Per quanto riguarda i requisiti tecnici, la scelta di Microsoft Content Management Server, come strumento per la gestione dei contenuti web, porta di per sé a soddisfare i requisiti 2, 15, 16 e 17, a patto naturalmente che non siano gli sviluppatori ad inserire nei template dei frame o altri oggetti non conformi ai requisiti. Infatti CMS non genera mai codice HTML con frame e non fa uso di applet, script o altri oggetti di programmazione. Inoltre: I requisiti 4 e 5 regolamentano la scelta dei colori e l uso di scritte lampeggianti. Solo l autore è responsabile dei contenuti che redige. il requisito 6 regolamenta il contrasto di colore tra testo e sfondo e depreca l uso di testo in formato immagine. Solo l autore è responsabile di queste scelte. il requisito 11 prevede l uso dei fogli di stile per la presentazione dei contenuti. L autore deve perciò realizzare template in grado di gestire i CSS associati alle pagine Il requisito 12 stabilisce che le pagine devono essere ridimensionabili. CMS non limita la possibilità di ridimensionare la pagina, ma certamente questo non sarà possibile se i contenuti sono oggetti con una dimensione fissata dall autore e definita in modo da non poter essere modificata dall utente del sito. Il requisito 13 regolamenta l uso delle tabelle create a scopo di impaginazione. CMS è uno strumento flessibile e dà piena libertà nella creazione delle pagine. Dunque sarà responsabilità di chi disegna i template e di chi inserisce i contenuti verificare che questo requisito sia soddisfatto. Il requisito 14 indica come realizzare i moduli in modo che siano compilabili anche da persone disabili (distanze fra i controlli, associazione con le etichette, ecc). Il requisito deve essere dunque tenuto in considerazione da chi produce il codice della form. 21

22 Il requisito 18 prevede che filmati e presentazioni multimediali siano predisposti con alternative testuali equivalenti sincronizzate. L autore dovrà quindi avere cura di predisporre il tutto prima dell inserimento dell oggetto multimediale Anche il requisito 20, che regolamenta l uso dei timeout e dei refresh automatici, non è ambito di CMS, avendo il programmatore piena libertà di personalizzare le pagine. Il requisito 21 prevede che i collegamenti siano attivabili anche da tastiera e perciò qualora si utilizzino gestori di eventi dipendenti da dispositivo è necessario associare alla azione prevista per il mouse (eventi di tipo onmouse...) anche la equivalente azione prevista per la tastiera (onkey...). Il requisito prevede anche che le distanze verticali tra collegamenti siano tali da consenire facilmente la scelta della utente Microsoft pubblica sul suo sito informazioni dedicate agli sviluppatori, agli autori e ai designer web, quindi in particolare agli utilizzatori di CMS, con suggerimenti per lo sviluppo di siti Web accessibili. I riferimenti a questa documentazione si trovano in bibliografia (paragrafo 0). Vi si possono trovare articoli, esempi di codice e tool per imparare a costruire siti accessibili. Infine, anche se il comune di Vallecima non ha questa esigenza, dovendo costruire un sito nuovo, CMS offre un reale vantaggio nei casi previsti dal requisito 22. Vi si afferma che, qualora si debba rendere accessibile un sito esistente, in prima battuta si può pensare di creare una pagina clone di ogni pagina non accessibile. La pagina clone deve offrire gli stessi contenuti, aggiornati con la stessa frequenza. Con CMS si possono definire dei placeholder collegati allo stesso contenuto (testo, immagine, ecc). Quando l autore esegue la manutenzione di una pagina, automaticamente l informazione viene riportata sul clone. 1.5 Esempi applicativi CMS organizza i contenuti web in una struttura gerarchica di contenitori chiamati canali. I canali contengono altri canali e pagine web. CMS permette di definire i permessi di lettura, creazione, modifica e approvazione a livello di singolo canale. In questo modo la manutenzione del portale può essere delegata a gruppi di utenti diversi, strutturati per ruoli (autore, sviluppatore, moderatore, ecc). Di seguito vengono illustrati tipici casi applicativi in cui ci si scontra con le problematiche dell accessibilità. Il codice relativo a questi esempi si trova in appendice Creare una nuova pagina Illustriamo la preparazione del workplace nel quale saranno inseriti tutti i contenuti. 22

23 Figura 1 - Layout del sito per la città di Vallecima Content Management Server 2002 offre uno strumento di Web Authoring che scrive l HTML mentre l autore della pagina inserisce i contenuti negli appositi placeholder. CMS, per mezzo dei PlaceHolder, genera codice HTMLconforme al requisito 1. Di seguito possiamo vedere come si presenta una pagina vuota in contesto di Web Author. La console di amministrazione di CMS (Web Author Console) contiene tutte le funzionalità fornite all utente in quel momento accreditato con l uso di profilo username/password. Per semplicità stiamo simulando il lavoro di un utente Administrator che assume i diritti di Author (autore) in grado di creare pagine e contenuti e proporli al proprio Editor (validatore) il quale ha facoltà di approvare e pubblicare on line i contenuti proposti. Normalmente questi due ruoli sono distribuiti su persone differenti. Le voci Resource Manager e Channel Properties indicano che l administrator può anche amministrare i contenuti delle Resource Gallery e la struttura dei canali del portale. 23

24 Figura 2 - Pagina web in modalità "Edit site" Una volta scelto il canale per la nuova pagina, è necessario attivare il link Create New Page nella console di amministrazione di Content Management Server. Per creare una nuova pagina bisogna trovarsi nella modalità Edit site. I creatori di questo portale hanno deciso di rendere visibili in Edit Site i nomi dei placeholder editabili dall autore di contenuti all interno dell interfaccia della pagina in cui ci si trova. Questo rende più semplice amministrare le pagine del portale, perché è noto a priori come potrà essere costruita la pagina e che tipo di contenuti essa potrà ospitare. 24

25 Figura 3 - Scelta del template I template a disposizione dell autore per la creazione delle pagine possono essere costruiti con il linguaggio C#. I template non contengono solo i PlaceHolder (che ospitano il contenuto inserito dall autore), ma anche l HTML e tutto il codice che serve per strutturare e organizzare i contenuti inseriti nei PlaceHolder.. Lautoresi trova di fronte a una pagina preconfezionata, con i link generali del sito in alto e i link contestuali a sinistra, ci sono immagini, tabelle, input-box... L autore può inserire e gestire solo i contenuti presenti nei PlaceHolder. Tutto il resto dovrà essere corretto e verificato a monte, e cioè dagli sviluppatori che hanno realizzato i template, ovvero l ossatura della pagina. 25

26 Figura 4 Pagina web in modalità "Edit" E evidente il contributo che Content Management Server 2002 offre: i template vengono sviluppati una sola volta e poi riutilizzati. L autore si trova a disposizione una galleria di template già accessibili, non ha la possibilità di modificarli, quindi si deve preoccupare di verificare l accessibilità solo degli elementi di informazione che inserisce nei placeholder. Le verifiche finali di accessibilità riguardano solo il contenuto inserito dall autore, questo si traduce in un processo di pubblicazione più rapido ed efficiente. A questo punto l autore della pagina inizierà ad inserire i contenuti negli appositi spazi. Quando l autore seleziona il Placeholder, viene attivata una toolbar simile a quella di Office Word per la formattazione. Serve per inserire contenuti (immagini, tabelle, link, attachment) e per gestirne l aspetto del contenuto: testo, allineamenti, colori, sfondi... Figura 5 - Toolbar per l inserimento e la formattazione dei contenuti web Le funzioni di questa toolbar corrispondono ai tag HTML che CMS inserisce nel codice. Prima di utilizzare queste funzionalità occorre tenere presente il requisito 11 che richiede l utilizzazione dei fogli di stile CSS per gestire l aspetto visuale dei contenuti, evitando l impiego di parametri HTML (come caratteristiche del testo, colori, sfondi, formattazioni). Ne consegue che alcune funzioni della toolbar (come tipo di carattere, dimensione di testo, colore di testo e sfondo) non potranno essere utilizzate. Sarà necessario inserire in appositi fogli di stile collegati tutte le caratteristiche visive legate a colori, allineamenti, ingombri, sfondi, ecc... 26

27 I parametri e le codifiche che hanno lo scopo di definire caratteristiche grafiche dovranno essere regolate dai fogli di stile collegati. Il requisito 11 dichiara esplicitamente che i contenuti delle pagine devono essere correttamente accessibili anche qualora il browser dell utente abbia i fogli di stile disabilitati o non supportati. È dunque da evitare un uso troppo disinvolto dei fogli di stile, come lo sfruttamento dello stile visibility: hidden; normalmente utilizzato per annidare nelle pagine alcuni contenuti che si vogliono mantenere nascosti Authoring Connector È disponibile uno strumento di integrazione tra Microsoft Office Word e la struttura di posting di CMS: l Authoring Connector. Esso fornisce una serie di supporti che permettono agli autori di contenuti di lavorare direttamente in Microsoft Word e di rendere i documenti creati disponibili per l approvazione e la pubblicazione su un sito web CMS (Microsoft Content Management Server). In questo modo Microsoft Word diventa uno strumento chiave per lo sviluppo dei contenuti, perché di fatto diventa parte del workflow di creazione proposta approvazione pubblicazione delle pagine. Chiaramente, dovranno essere sempre rispettati i requisiti sull accessibilità. Per questo motivo bisognerà sottoporre i contenuti creati con Word ad un controllo di verifica, per assicurarsi che anche con l utilizzo dell Authoring Connector le regole di accessibilità sono seguite. È comunque possibile costruire i template di CMS in modo che questi controllino il codice proveniente da Word e all occorrenza lo ripuliscano, eliminando TAG e parametri non accettabili. Con questa tecnica l integrazione tra i due strumenti diventa trasparente e intuitivo, perché l autore può utilizzare uno strumento di authoring già noto. Per far questo è però necessario uno sforzo di programmazione aggiuntivo per realizzare placeholder ad hoc, partendo da quelli standard rilasciati con CMS Inserimento di link Il link è l elemento costitutivo di internet, ed è ciò che ci permette di saltare da una pagina all altra cliccando su testi, immagini, tasti... Un funzionamento fluido, trasparente, intuitivo e semplice dei link è il primo obiettivo di chiunque voglia costruire un sito accessibile. Per questo motivo le norme per l accessibilità si occupano dei link in maniera attenta e approfondita, sia sul piano tecnico-funzionale che sul piano della logica e dell ergonomia. La disciplina, che regolamenta la creazione e la funzione dei link, è articolata nel requisito 19 e nel requisito 21. Le regole principali sono date dal requisito 19, il quale raccomanda che: 1) il link deve mantenere la propria funzionalità anche se letto al di fuori del proprio contesto. Questa regola è importante perché i browser testuali ed i sintetizzatori vocali possono presentare all utente la lista dei collegamenti ipertestuali presenti in una pagina indipendentemente dalla loro posizione all interno del layout. Per questo motivo il testo sensibile sul quale bisogna cliccare per attivare il link dovrà essere descrittivo e non equivocabile. Ad esempio non si deve inserire un collegamento alla pagina di rinnovo della carta d identità con il testo Clicca qui, perché decontestualizzato non descrive la destinazione del collegamento ipertestuale. Il testo corretto potrebbe essere Rinnova la tua Carta d Identità. 2) il link deve essere supportato da testi alternativi che ne descrivono la destinazione in modo preciso. Per questa ragione, è talvolta necessario associare al link anche un testo alternativo, che approfondisca le informazioni che vengono fornite all utente, quando queste non siano evidenti dal testo sensibile. Queste informazioni posso essere di tipo tecnico (come questo link apre una pagina nel sito ) o informativo (come pagina di approfondimenti sull argomento... ). Questo opportunità (il testo alternativo è inserito per mezzo dell attributo title ) è molto importante, ma deve essere usato con parsimonia perché può generare un fastidioso eccesso di informazione sonora e visiva per l utente. 3) prevedere meccanismi che consentano di evitare letture ripetitive di link o gruppi di link che si ripetono nelle diverse pagine (come i link principali). La mappatura delle liste link dà la possibilità agli 27

28 utenti di saltare gruppi di collegamenti e procedere con la lettura dei contenuti effettivi della pagina. Questo evita di subire l elencazione dei link ricorrenti, ogni volta che viene caricata una pagina dello stesso portale. Nel caso si costruiscano siti contenenti gruppi di link che vengono ripetuti in tutte le pagine (come ad esempio la barra di navigazione con i link alle sezioni principali del sito) è opportuno raggruppare questi link all interno di un blocco che possa essere saltato dall utente, evitando di perdere tempo nella ricognizione di elementi di pagina che si conoscono già. Questo raggruppamento di link viene effettuato a livello di codice, dal momento che non esistono strumenti visuali in grado di automatizzare questa procedura. Si tratta comunque di una operazione semplice, che consiste nel racchiudere i gruppi di link all interno di due elementi nascosti (visibility: hidden) che definiscono l inizio e la fine del gruppo. Di seguito un esempio di codice recante la struttura che racchiude il blocco dei 4 link della barra di navigazione del portale. I link ripetitivi si trovano normalmente nelle sezioni definite dai template, non dagli autori. Sarà dunque responsabilità degli sviluppatori di raggruppare i link, così che tutte le pagine prodotte con quei template soddisferanno questo criterio di accessibilità. <p class= nascosto ><a name= navigazione id= navigazione >Inizio navigazione principale</a></p> <ul class= listanavigazione > <li><a href="/eventi/servizi+al+cittadino/">servizi al Cittadino</a></li> <li><a href="/eventi/servizi+alle+imprese/">servizi alle Imprese</a></li> <li><a title="il portale nella versione precedente (accessibilità difficoltosa)" href="/eventi/sito+istituzionale/">sito Istituzionale</a></li> <li><a title="tutte le ultime notizie sulla tua città" href="/eventi/notiziario/">notiziario</a></li> </ul> <p class= nascosto >Fine navigazione principale</p> Nella porzione di codice mostrata sopra i due elementi paragrafo sono definiti mediante la classe nascosto che nel Foglio di Stile corrisponderà ad una regola del tipo visibility: hidden. Il risultato è che nei browser grafici essi non compariranno, mentre verranno regolarmente letti dal sintetizzatore vocale e mostrati nei browser testuali che non supportano i Fogli di Stile. Nel primo dei due paragrafi è inoltre inserito l elemento A che consente raggiungere l inizio della barra di navigazione da altri punti all interno della pagina. Per costruire il link testuale è necessario selezionare il testo che dovrà diventare sensibile. 28

29 Figura 6 - Icona "Edit link" Selezionato il testo che diventerà link, clicchiamo l icona edit link nella toolbar di CMS in modo da poter sfogliare i canali e selezionare la pagina da collegare. Figura 7 - Scelta della pagina da collegare Una volta scelta la pagina CMS provvede a scrivere il link nel box in fondo alla finestra identificato dalla label Selected Link. Non resta che dare OK. Ricordiamoci che potremo inserire anche il testo corrispondente all attributo html title, compilando il campo Tooltip nella finestra di dialogo, se ciò fosse ritenuto necessario in aderenza al requisito

30 Figura 8 - Finestra di dialogo per inserire un iperlink Il testo che inseriremo nello spazio tooltip diventerà visibile all interno di un piccolo rettangolo giallo che compare a fianco del cursore quando ci fermiamo con il puntatore del mouse sopra uno dei collegamenti della pagina, sia esso testo, immagine, area sensibile di una mappa-immagine Link per inviare La creazione del link per l invio di un messaggio di posta elettronica funziona in modo leggermente diverso. Figura 9 - Esempio di link collegato all'invio di una Anziché sfogliare i canali del portale, basterà scrivere direttamente nella casella Hyperlink Address l indirizzo del destinatario del messaggio preceduto da MAILTO: senza spazi, ad esempio mailto:anagrafe@comune.vallecima.it. 30

31 Figura 10 Finestra di dialogo per inserire un iperlink Anche i link a indirizzi di posta elettronica potranno contenere l attributo title che dovrà essere inserito rispettando gli stessi criteri visti per il link alle pagine del portale. Figura link in modalità "Edit" Figura link in modalità "Live" L inserimento dei link è reso semplice dalle caratteristiche intrinseche dei placeholder di CMS. Se scriviamo l indirizzo direttamente nel placeholder (o se lo incolliamo dalla clipboard) esso verrà automaticamente reso funzionante. Questo vale anche per gli indirizzi . Ovviamente, se vengono costruiti link in questo modo, CMS non ha la possibilità di creare il title in nostra vece, e quindi si dovrà riselezionare il link appena creato ed editare il contenuto del title cliccando l icona Edit Hyperlink e completando l inserimento dei campi obbligatori. 31

32 1.5.3 Inserimento di immagini Le immagini che inseriamo all interno delle pagine possono essere di due tipi: immagini di tipo generico, come fotografie, ritratti, rappresentazione di oggetti eccetera; immagini di tipo grafico, che contengono informazioni organizzate su grafici, istogrammi, grafici a torta, tabelle, eccetera. Questa distinzione è importante perché il requisito 3 prescrive che quando vengono inseriti contenuti non testuali, bisognerà fornire una alternativa testuale che contenga le stesse informazioni che stiamo veicolando con l immagine. Nel caso delle immagini del primo tipo (es: uno scorcio della città), sarà sufficiente una breve descrizione che possiamo inserire all interno dell attributo ALT del tag IMG. Nel caso di una immagine che rappresenta valori statistici o complessi contenuti di tipo visuale, le informazioni corrispondenti saranno molto più articolate e ci costringeranno a fornire un alternativa più complessa con l attributo LONGDESC, che vedremo più avanti. In entrambi i casi, i placeholder di CMS danno modo all autore di compilare agevolmente queste informazioni aggiuntive Sfruttare le Resource Gallery Per ora limitiamoci a capire come si inseriscono le immagini nelle pagine facendo uso dell interfaccia di CMS, che ci permette anche di completare l attributo ALT. Le Resource Galleries sono dei contenitori predisposti a ospitare e gestire tutte le risorse (immagini, presentazioni, documenti, ecc) che possiamo inserire all interno delle pagine. L accesso alle Resource Galleries è regolato dai permessi attribuiti all utente in base al suo ruolo. Ad esempio gli autori possono utilizzarle per costruire i contenuti; i visitatori del sito possono solo leggerle. Per inserire immagini nei placeholder dobbiamo cliccare l icona Insert Image presente nella toolbar (cerchiata in blu nell immagine seguente). Figura 13 - Icona "Insert Image" Compare una finestra di dialogo che ci chiede se vogliamo inserire un immagine locale (prendendola dal nostro PC o da un PC della nostra rete) o se preferiamo utilizzare le immagini contenute nelle Resource Galleries. Scegliamo la seconda opzione. 32

33 Figura 14 - Dialog Box che ci chiede dove si trova l immagine che vogliamo inserire Quando si accede alle Resource Galleries, si apre un pannello stile Gestione Risorse di Windows che ci permette di sfogliarne la struttura. Figura 15 - Scelta dell'immagine In questo esempio stiamo creando una pagina dell Ufficio Anagrafe ed abbiamo a disposizione una gallery contenente le immagini per questo tipo di pagine. Una volta scelta la cartella, comparirà una lista che elenca le immagini e le caratteristiche di ciascuna. 33

34 Figura 16 - Elenco di risorse nella cartella della Resource Gallery Vediamo in dettaglio le voci Resource e Description. Nella colonna Resource troviamo il nome del file, mentre alla voce Description non abbiamo nessun valore. La persona che ricopre il ruolo di Resource Manager (che potrebbe essere l autore della pagina) ha la possibilità di inserire nuove immagini e di modificare le proprietà delle immagini già presenti cliccando l icona corrispondente nella colonna Properties. Figura 17 - Compilazione dei metadati delle risorse 34

35 Una volta modificate le proprietà dell oggetto, viene aggiornato anche l elenco della Gallery. Compilare con precisione li metadati delle immagini e i files delle Gallery è importante, perché così diventa molto più semplice per l autore individuare gli elementi da inserire, conoscendone il contenuto prima ancora di inserirlo nella pagina. Figura 18 - Elenco aggiornato delle risorse nella cartella della Resource Gallery Inoltre, quando vogliamo inserire un link ad un attach file, se questo è completo di metadati nella Gallery, il link generato da CMS sarà costruito sul testo della Description. Questo rende più semplice costruire link coerenti con il contenuto reale delle gallery. Vedremo in maniera più approfondita questi concetti nel paragrafo Dopo aver visto il funzionamento delle Resource Galleries, proseguiamo con l inserimento dell immagine Inserire un immagine generica : attributo ALT Una volta scelto nelle Resource Galleries il file che desideriamo inserire dovremo, sempre come indicato dal requisito 3, fornire un testo alternativo che dia le stesse informazioni contenute nell immagine. Nel nostro esempio l immagine è un titolo e contiene il testo Comune di Vallecima ufficio anagrafe. In base al requisito 6, un testo in forma di immagine è da evitare. In questo esempio lo utilizziamo anche per evidenziarne gli inconvenienti. Figura 19 - Immagine scelta dalla Resource Gallery E opportuno dunque utilizzare questo stesso testo come Alternate Text (attributo ALT). 35

36 Figura 20 - Compilazione parametro ALT Internet Explorer rappresenta il testo ALT come un testo che compare nel tooltip (un riquadro giallo contenente il testo che compare a lato del puntatore del mouse quando esso viene posizionato sopra l immagine). I browser testuali ed i sintetizzatori vocali, sostituiscono l immagine con il testo contenuto nell attributo ALT, dando la possibilità anche agli utenti che utilizzano queste tecnologie di capire qual è il titolo della pagina. Figura 21 - Tooltip di una immagine Inserire un immagine grafica : attributo LONGDESC L inserimento di questo tipo di oggetti pone dei problemi relativi alle informazioni contenute nell immagine in quanto la loro vastità e talvolta la loro complessità non consentono di veicolarle con il solo attributo ALT. È dunque necessario fornire una fonte alternativa di informazioni testuali equivalenti ai contenuti presenti nel grafico inserito. Per fare ciò è necessario aggiungere un collegamento ad una pagina che contenga un testo nel quale vengono interpretati esplicitamente i dati grafici. 36

37 Figura 22 - Grafico inserito in una pagina web Tale pagina sarà raggiungibile con un link associato all attributo di IMG LongDesc (Long Description). Nel nostro esempio applicativo, l immagine a torta rappresentata nella finestra del browser non contiene ancora l attributo longdesc, il suo inserimento viene illustrato nella prossima fase. La pagina collegata a longdesc deve essere stata creata precedentemente. Solo così la potremo individuare e selezionare nella struttura dei canali di CMS al momento di costruire il link. La pagina di destinazione longdesc potrebbe essere la seguente: contiene un riassunto schematico dei valori rappresentati nell immagine. Figura 23 - Pagina web collegata al grafico tramite l attributo longdesc L interfaccia che CMS mette a disposizione dell autore non permette l inserimento dell attributo longdesc delle immagini. In questo caso dobbiamo editare il codice generato. Non tutti i browser supportano questo attributo, quindi per completezza dobbiamo mettere a disposizione anche un link tradizionale alla pagina di spiegazione del grafico a torta. Vediamo questa procedura passo per passo. Per prima cosa creiamo il link tradizionale (vedi anche paragrafo 1.5.2). Selezionato il testo che diventerà link, clicchiamo l icona edit link nella toolbar di CMS in modo da poter sfogliare i canali e selezionare la pagina da collegare. 37

38 Figura 24 - Scelta del pagina che descirve il grafico Una volta scelta la pagina CMS provvede a scrivere il link nel box Selected Link in fondo alla finestra. Non resta che premere il pulsante OK. Ricordiamoci anche di inserire il testo TITLE (Tooltip), obbligatorio in aderenza al requisito 3. Figura 25 - Compilazione del testo alternativo Creato il link, dobbiamo visualizzare il codice del placeholder cliccando l icona HTML nella barra degli strumenti di CMS. Passiamo dalla visualizzazione grafica della pagina a quella HTML. Individuato nel codice il link appena creato (tag <A>), copiamo l URL della pagina alternativa che CMS ha generato nel parametro href. Lo incolliamo nel parametro longdesc del tag <IMG> relativo al nostro grafico. In questa fase bisogna prestare attenzione a non incollare l URL nel parametro href del grafico. 38

39 Figura 26 - Copia/incolla del parametro longdesc Terminata l operazione, ecco come si presenterà la pagina nella sua visualizzazione finale. L immagine è associata ad un parametro che presenta un link alternativo per i browser a tecnologia assistiva: questo link porta alla pagina che descrive in modo testuale il contenuto dell immagine. Alcuni browser per persone diversamente abili non iterpretano correttamente l attributo LongDesc, e per questo motivo è buona norma inserire anche Il link tradizionale come nel nostro esempio. Figura 27 - Pagina web accessibile con un grafico I concetti che abbiamo espresso in questo paragrafo si applicano anche per i contenuti multimediali, con le ovvie differenze dovute ai differenti tag HTML per inserire i file multimediali nelle diverse tecnologie. Il requisito 18 prevede infatti anche per i filmati una alternativa testuale e/o una sottotitolazione a seconda dell importanza dell informazione veicolata Associare un link ad una immagine La procedura di creazione di un link il cui elemento da cliccare è un immagine è simile all inserimento del link testuale. Di seguito vengono mostrate le procedure da seguire utilizzando l interfaccia web di CMS. Per ulteriori informazioni sulla disciplina dei link, si rimanda allo scenario Inserimento di Link visto in precedenza nel paragrafo Una volta inserita l immagine che si vuole associare a un collegamento ipertestuale, si dovrà selezionare l immagine con un click del mouse e successivamente cliccare l icona Edit Hyperlink nella toolbar di CMS. 39

40 Figura 28 - Icona "Edit Hyperlink" A questo punto CMS aprirà una finestra per la gestione del link. Nello spazio Hyperlink Address dovremo inserire (o incollare) l indirizzo ad una pagina esterna del portale o un collegamento mailto per l invio di . Se invece vogliamo un collegamento ad una pagina interna, dobbiamo premere il tasto Browse. A questo punto si aprirà un pannello contenente l elencazione dei canali del portale strutturati come in Gestione Risorse di Windows. Alle icone folder corrispondono diversi canali, alle icone document corrispondono le pagine contenute nei relativi canali. Cliccando queste voci CMS inserirà per noi i corretti percorsi all interno del box Selected link, che poi verrà riportato nel box Hyperlink Address della finestra di dialogo Edit Hyperlink. Come abbiamo già visto, tutti i link, quindi anche le immagini, devono essere completi di attributo TITLE. A tale scopo dovremo compilare anche il campo Tooltip nella finestra di dialogo Edit Hyperlink. 40

41 Tooltip: testo che costituisce l attrbuto title del link Hyperlink Address: Viene compilato automaticamente, selezionando il canale o la pagina di destinazione del link Figura 29 - Compilazione dei parametri del link Come si nota nella vista codice di seguito, abbiamo ottenuto un blocco Anchor <A>... </A> che comprende la sintassi del link e il tag <IMG> con l immagine sensibile al link. Abbiamo quindi di fronte due elementi innestati ed entrambi forniscono un testo alternativo: TITLE per il link e ALT per l immagine. Figura 30 - Codice generato da CMS per una immagine cliccabile Il requisito 3 descrive in maniera approfondita in quale modo debbano essere rispettate queste obbligatorietà. In linea generale bisogna sempre fornire contenuti testuali corrispondenti a elementi non testuali che vengono inseriti nelle pagine. Le immagini sono ovviamente elementi non testuali, e per ogni immagine dovremo fornire la stessa informazione che intendiamo veicolare con l inserimento della stessa. I browser rappresenteranno queste stesse informazioni in modi diversi. Nei browser tradizionali (Internet Explorer o Mozilla-compatibili) i testi corrispondenti a Title e Alt vengono visualizzati come tooltip del browser. I browser testuali sostituiscono l immagine con il testo alternativo. In caso di concorrenza dei due elementi, sarà il browser a decidere quale dei due fornire all utente. Ad esempio Internet Explorer predilige la descrizione dell immagine (ALT), mentre Mozilla Firefox dà priorità alle funzioni Anchor 41

42 (TITLE). Diventa essenziale quindi essere descrittivi e precisi anche quando l informazione sembra ridondante. Figura 31 - Pagina web accessibile con una immagine cliccabile (Internet Explorer) Associare aree sensibili ad una immagine Le mappe associate alle immagini posso essere di tipo client-side o server-side. Le prime vengono codificate nell HTML della pagina che scarichiamo, quindi si trovano già nel browser al momento dell attivazione tramite click. Si tratta di forme geometriche (rettangoli, cerchi o poligoni) che fungono da aree sensibili al click e che sono disposte sopra l immagine cliccabile. Le seconde si trovano nel server, e vengono attivate per mezzo di una procedura che vede il browser comunicare con il server per trasmettergli le coordinate x-y sulle quali è avvenuto il click. Il server risponde coerentemente ai valori che gli vengono passati dal client, restituendo una pagina o un documento web relativo. L uso di questo ultimo tipo di mappe è sconsigliato dal requisito 7, che invita a utilizzare le mappe server-side solo quando le forme realizzabili con la mappa client-side non sono adatte alla funzionalità che si desidera implementare. La normativa sull accessibilità obbliga l autore a fornire link alternativi per l accesso ai contenuti raggiungibili tramite la mappa lato server. Questo obbligo viene istituito dal requisito 8 che argomenta esplicitamente sull uso delle mappe server-side e impone di proporre all utente anche dei link testuali ridondanti corrispondenti a regioni attive nelle mappe serverside. CMS non permette di realizzare visualmente la mappatura di aree sensibili delle immagini. Bisognerà quindi costruire la mappa con appositi software (come FrontPage di Microsoft) per poi copiare e incollare in un placeholder HTML il codice della mappa. Supponiamo di voler mappare le aree che rappresentano le fasce d età dell immagine appena utilizzata nello scenario precedente. Figura 32 Immagine da trasformare in una mappa 42

43 Dovremo utilizzare FrontPage per realizzare la mappa con i tool visuali in una pagina web di appoggio. Successivamente utilizzeremo la vista codice per copiare l HTML generato. Il codice della mappa dovrà essere incollato all interno del placeholder predisposto dallo sviluppatore nel template, nel quale si trova l immagine che vogliamo associare alla mappa. Tutto quello che dovremo fare a questo punto sarà aggiungere l attributo usemap al tag <IMG> dell immagine da mappare. Come risulta dalla porzione di codice che abbiamo riportato sotto, ciò che lega l immagine alla lista delle aree sensibili è l attributo usemap=#[id] da aggiungere al codice dell immagine IMG, che fa riferimento al blocco <MAP name=[id]>... </MAP>. Figura 33 - Codice HTML per una Image Map All interno del blocco MAP troviamo le diverse aree, con la sintassi di tipo: <AREA shape= cords= href= alt= title= > I parametri shape (rettangolo, cerchio, poligono) e coords (i punti che disegnano la forma dell area in questione) sono automaticamente generati da FrontPage. Il link (href), la descrizione alternativa (alt) e il titolo del link (title) richiedono l intervento dell autore a livello di codice. Href rappresenta il link, compilabile con la procedura illustrata negli scenari precedenti. Alt e Title sono i parametri che designano rispettivamente il nome dell area sensibile e le informazioni aggiuntive del link che stiamo costruendo. Questi sono parametri obbligatori essendo questa un informazione non testuale (requisito 3). 43

44 Figura 34 - Image Map accessibile Per un autore la creazione delle mappe è piuttosto difficoltosa, soprattutto quando le immagini sono complesse e le aree numerose. E difficilmente automatizzabile ed inevitabilmente necessita di competenze tecniche. Risulta quindi consigliabile evitare l utilizzo delle immagini mappate, e fornire piuttosto una lista di collegamenti tradizionali. Figura 35 - Alternativa "tradizionale" alla mappa Inserire link per il download di file Diversamente da come accade nel caso dei link testuali, l inserimento di collegamenti che puntano a file da scaricare non avviene partendo da un testo selezionato (che diventerà link). Figura 36 - Icona Insert Attach Per l inserimento di questo tipo di link non occorre altro che cliccare l icona Insert Attach. CMS permette di selezionare dalla Resource Gallery il documento da pubblicare. 44

45 Figura 37 Scelta del file dalla Resource Gallery Sarà lo stesso CMS a suggerire quale dovrà essere il testo da utilizzare per la costruzione del collegamento. Lo farà utilizzando il nome della risorsa preimpostato nella Resource Gallery (vedi scenario precedente, paragrafo ). In questo modo si evitano errori e si gestiscono in maniera coerente tutti i link allo stesso file posti in diverse pagine web. 45

46 Figura 38 - Testo per il link al file scaricabile Il link inserito è costruito sul testo della proprietà Description, rendendo più semplice per l autore costruire link coerenti con il contenuto reale delle gallery. L elemento HTML anchor generato da CMS non contiene però l attributo title, che dovrà essere inserito manualmente, convertendo il placeholder, nel quale è stato inserito il collegamento, alla vista codice e inserendo l attributo title=... all interno della tag <A>. 46

47 Inserire qui l attributo TITLE Tale parametro è indispensabile per soddisfare i requisiti 3 e 19. Figura 39 - Pagina web accessibile con link ad un file Il risultato finale è un link per il download di documenti dalle Resource Gallery che ha il Resource Name come testo cliccabile. Nel tooltip del cursore compare il testo utilizzato per l attributo TITLE, inserito da codice. 47

48 1.5.7 Inserimento e modifica di tabelle Le tabelle di dati possono contenere più colonne: ogni cella contiene un valore che è comprensibile solo se la riga viene associata alla colonna corrispondente. Per esempio, una tabella di dati di bilancio contiene valori numerici e percentuali associati a date o altri parametri. Alcuni browser non visuali leggono i contenuti della tabelle normali <TABLE><TR><TD> in modo sequenziale, cella dopo cella, riga dopo riga. Per far capire a questi browser che ogni dato ha valore solo se letto in relazione alle intestazioni di colonna bisognerà modificare l HTML automaticamente generato da CMS, in modo da inserire i marcatori che permettano di legare tra loro le singole celle e le rispettive intestazioni. Vediamo di seguito come procedere. Figura 40 - Inserimento di una tabella in CMS Clicchiamo l icona Insert table nella toolbar di Web-Author di CMS. Ci viene proposta una finestra nella quale possiamo specificare quante righe e quante colonne deve avere la tabella che stiamo per disegnare. È importate conoscere a priori e precisamente il numero di colonne necessarie, poiché sarebbe difficile modificare questo dato in un secondo momento. Per quello che riguarda le righe, vedremo presto che conviene creare solo le prime due, e aggiungere le successive in un secondo momento. Nel nostro esempio cominciamo con una tabella che ha 4 colonne e 6 righe. Figura 41 - Tabella generata da CMS È possibile in qualsiasi momento visualizzare l HTML corrispondente ai contenuti che stiamo editando, cliccando l icona Edit Source nella toolbar. 48

49 Figura 42 - Passaggio alla vista dell'html La vista HTML ci serve per modificare il codice standard generato da CMS e adattarlo alle nostre esigenze. Le celle della prima riga devono essere strutturate con il tag header <TH> al posto che data <TD> (vedi requisito 9). In questo modo avremo ottenuto le intestazioni della tabella. Figura 43 - Header della tabella Successivamente dobbiamo introdurre le corrispondenze ID HEADERS per associare ogni intestazione alle relative celle della stessa colonna, come previsto dal requisito