A tale ambiente è stato affiancato un secondo sistema di staging⁄sviluppo (WWW2) per consentire da un lato la continuità anche in caso di crash del sistema web primario, dall´altro per consentire ai fornitori di informazioni di completare la pubblicazione (ed il test) delle proprie pagine senza intaccare la coerenza e l´integrità delle informazioni già in linea. Il secondo sistema è implementato con software Microsoft Windows 2000 Advanced Server su piattaforma HP e in base al progetto di server consolidation regionale è in via di migrazione su piattaforma virtuale VMWare configurata in alta affidabilità (la migrazione comporterà anche il cambio di piattaforma operativa da Windows 2000 a Windows 2003).

Tra i due ambienti (web di produzione e web di staging) sono attivati processi di mirroring a livello di database e di file system allo scopo di mantenere allineate le informazioni in modo automatico.

Il sistema web secondario (WWW2) della Regione Emilia-Romagna fornisce invece entrambi i servizi (HTTP ed webDav). Al servizio HTTP accedono in lettura unicamente gli utenti abilitati alla consultazione (fornitori di informazione che accedono solitamente mediante autenticazione challenge/response per verificare la correttezza delle informazioni caricate), mentre al servizio webDavaccedono in scrittura i medesimi fornitori durante l´aggiornamento dei contenuti.
L´accesso anonimo non è quindi consentito e ciascun fornitore può accedere al servizio webDav solo se si identifica tramite userid/password: opportune policies di sicurezza inoltre limitano l´area di accesso di ciascun fornitore alla root del proprio sito.

Gli autori di pagine web residenti sui server regionali utilizzano attualmente due possibili modalità di lavoro:

• Utilizzo di editor html tradizionali: l´inserimento e le modifiche delle pagine sono effettuate tramite editor o cartella condivisa (per i collaboratori interni alla rete dell´ente) oppure tramite accesso webDav(per i collaboratori che accedono dall´esterno della rete regionale).
• Utilizzo dell´applicazione di web content management in uso presso l´ente.

Per entrambi i casi la suddivisione in cartelle e la relativa struttura della home directory assegnata è curata dallo stesso fornitore delle informazioni che avrà cura di organizzarla al meglio dividendo ad es.: i testi dalle immagini, dai suoni, dai file scarcabili, dai file di appoggio, ecc. (⁄images, ⁄suoni, ⁄download, ⁄temp).

Per i collaboratori che utilizzano editor html tradizionali si propongono le seguenti convenzioni sui nomi delle cartelle e dei file presenti nei siti web:

Cartelle

• _private: per i file privati che non si intende far leggere mai neanche nelle ricerche attraverso appositi componenti o motori (es.: le pagine di conferma o di convalida di una form o di un modulo, i file di testo contenenti i valori delle variabili di un modulo, ecc.).
• images: per tutti i files immagine (.gif, .jpg).
• css: per i file contenenti i fogli di stile.
• js: per i file contenenti Javascript esterni.

File

• index.htm o default.asp: attualmente il servizio WWW è configurato in modo da non consentire la visualizzazione del contenuto delle directory, per ovvi motivi di sicurezza;
• cerca.asp: qualora nel sito sia prevista una pagina di ricerca gestita tramite il motore di ricerca presente sui server regionali, il nome della pagina che visualizza i risultati dev´essere cerca.asp.

È doveroso da parte dei fornitori fare un uso appropriato delle cartelle e della porzione di file system assegnato, tenendo presente che lo scopo di tale assegnazione è la pubblicazione di pagine per Internet⁄Intranet; sono scoraggiati fortemente usi impropri tipo backup dei propri dischi.

È opportuno quindi che ogni fornitore tenga ben organizzato il proprio spazio disco sul server web e lo ripulisca dei files e delle cartelle obsoleti: al momento lo spazio disco assegnato è limitato a 250 Mb (ma può essere aumentato per motivate esigenze particolari).

Per quanto riguarda i nomi dei documenti, delle directory, dei file immagini, dei file di testo, etc. si consiglia di utilizzare nomi chiari e non troppo lunghi, scrivendo in carattere minuscolo, senza spazi nè punteggiatura (perchè alcuni browser potrebbero non interpretarli correttamente); è ammesso il carattere "_".

Si suggerisce anche di suddividere in sottocartelle i contenuti di quelle cartelle che tendono ad aumentare costantemente nel tempo (es.: suddividere una cartella "notizie" in "notizie2001", "notizie2002" ecc.).

Per quanto riguarda l´estensione dei file .htm o .html, essendo possibili entrambe, si consiglia l´uso dell´estensione .htm per ragioni di uniformità con la quasi totalità dei documenti già esistenti.

• Per facilitare la navigazione è bene che le pagine abbiano tutte la stessa struttura, e che contengano alcuni elementi fondamentali (quali menu, percorso di navigazione, testata ecc.).
  
• Per migliorare i risultati delle ricerche, si consiglia anche di inserire un sommario del contenuto nel META tag DESCRIPTION (esempio: <meta name="description" content="testo del sommario">). Tenete presente che il sommario viene anche presentato dai alcuni motori di ricerca dopo il TITLE quando espongono i risultati della ricerca. Il motore di ricerca dei siti della Regione è Google, e di norma presenta la parte di testo delle pagine che contiene le parole cercate.
  
• Si consiglia di presentare il contenuto principale all´inizio della pagina (all´inizio del codice sorgente HTML): il sito risulta più fruibile, e inoltre i motori di ricerca danno maggiore evidenza ai contenuti più vicini all´inizio della pagina.
  
• È buona norma fornire la dicitura completa di acronimi e abbreviazioni. Può essere inserita nel testo della pagina oppure tramite l´uso l´attributo "title" degli elementi ABBR e ACRONYM.
  
• Se all´interno del documento si usano termini in una lingua differente (ad es.: inglesi) occorre definire la lingua nell'elemento HTML che li contiene, ad esempio usare: <SPAN LANG="EN"> english text </SPAN> (più che altro per termini non di uso comune o frasi).
  
• Per quei contenuti che hanno una contestualizzazione temporale (es. bandi con scadenze o segnalazione di eventi) è necessario inserire in ogni pagina la data di ultimo aggiornamento nel formato italiano (es.: 4 dicembre 2002); mentre dove è possibile definire un referente, una persona addetta a ricevere segnalazioni e suggerimenti per quell´argomento, bisogna indicarne il nome, la e-mail, il numero di telefono.
  
• Infine, controllate il peso delle vostre pagine: una pagina di 100 KB con un modem a 56 kb si scarica in circa 15 secondi, ma la maggior parte dei navigatori si sofferma su una pagina meno di 10 secondi!

Intestazione dei documenti (X)HTML da utilizzare

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it" >

Titolo della pagina

I titoli (TITLE) dovrebbero sempre indicare il contenuto, al pari degli H1 nelle pagine. I TITLE se possibile dovrebbero essere brevi. Per questa pagina ad esempio:

Pagine (X)HTML - ("Linee guida per siti ed applicazioni Web -") Regione Emilia-Romagna

Percorso (detto anche molliche, briciole di pane, breadcrumbs)

Se il titolo (H1) segue immediatamente le briciole è corretta questa struttura (usata anche in questo sito):

(vuoto)/Torna a:/Percorso: Home > Livello 1 >...> livello precedente

Se il titolo non segue immediatamente le molliche di pane:

Sei in/Percorso/(vuoto): Home > Livello 1 >...> livello precedente > pagina corrente

Link nascosti per saltare ai contenuti (skip-link)

• h - per il link alla HomePage;
• k - per saltare la barra di navigazione e andare subito al contenuto principale della pagina;
• c - per andare al form di Ricerca;
• n - per saltare al menù principale del sito;

Codice HTML da inserire nella pagina:

<body>
<ul class="skip">
    <li><a href="#cerca" > Cerca nel sito</a> </li>
    <li><a href="#contenutopagina" title="Salta ai contenuti" accesskey="k">Salta ai contenuti</a> </li>
    <li><a href="#menu" title="Salta al menu principale" accesskey="n">Salta al menu principale</a> </li>
 </ul>
...
<form id="ricerca" .....
<input id="cerca" accesskey="c" name="cerca" type="text" />
.....
<a id="contenutopagina" name="contenutopagina" tabindex="0"></a>
.....

Il codice CSS per nasconderli si trova nella sezione Fogli di stile

Titoli nella pagina

I titoli (H1, ..., H6) dovrebbero essere utilizzati per strutturare i contenuti. Per facilitare la navigazione a chi usa gli screen-reader è marcare con delle intestazioni anche i menù. Ecco un esempio:

...
<h1>Titolo del sito (facoltativo e spesso nascosto)</h1>
...
<h1>Titolo pagina (uguale o simile al TITLE)</h1>
...
<h2>Titolo di un paragrafo nel testo</h2>
...
...
<h3>Titolo di un menù</h3>
<ul>
<li>voce di menù</li>
...

• Pagine on-line: Tools > Validate HTML
• Pagine off-line: Tools > Validate local HTML

• Codice (per pagine on-line): Controlla> Validatore HTML del W3C > Valida l'HTML
• Codice (per pagine off-line): Controlla> Validatore HTML WDG> Valida l'HTML
• DTD: Informazioni > Visualizza il DOCTYPE
• Lingua: Informazioni > Visualizza gli attributi LANG
• Skip-link: Informazioni > Visualizza i link [nuova finestra]
  oppure da CSS >Disabilita il foglio di stile
• Accesskey: Struttura> Accesskey
• Intestazioni: Struttura> Intestazioni
  oppure da Struttura> Struttura delle intestazioni
• Liste: Struttura> Elementi di lista

• Utilizzare l´attributo TITLE sia nel tag FRAMESET che nel tag FRAME. Il browser testuale Linx e alcuni screen readers (es.: HomePage Reader) utilizzano i titoli per permettere all´utente disabile visivo di posizionarsi nel frame desiderato. Jaws permette di spostarsi tra i vari frames con la combinazione di tasti Ctrl-Tab, ma comunque permette di visualizzare la lista dei frames e scegliere da questa. I titoli dovrebbero essere significativi (es.: "Menu del sito" e non "Frame laterale").
• Inserire il tag TITLE nelle pagine collegate da un frameset. Si tenga presente che il browser testuale e alcuni screen readers "visualizzano", cioè pongono in primo piano all´attenzione dell´utente la sola pagina del frame attiva in quel momento, e che l´informazione del titolo è molto utile per orientarsi.
• Definire le righe e le colonne in cui è suddiviso il frameset con misure relative (es.: "20%, 80%" o "1*,2*"). Questo permette il ridimensionamento proporzionale della pagina per utenti che utilizzano una risoluzione video bassa (es.: ipovedenti).
• Utilizzare il costrutto <NOFRAMES> </NOFRAMES> per consentire la navigazione a quegli utenti che non dispongono di browsers o screen readers sufficientemente aggiornati per gestire i frames.: Nella sezione NOFRAMES, ad esempio, si può inserire una serie di links alle varie pagine che compongono il frameset in modo da consentirne la navigazione individuale.
• Non utilizzare direttamente un´immagine come sorgente (SRC=) di un frame. Creare comunque una pagina HTML con titolo, body e tag IMG con relativo attributo ALT.

il contenitore (la pagina con frames)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<title>Esempio di pagina con Frameset corretto</title>
</head>

<frameset rows="*" cols="27%,*" title="Menu pagina delle novita">
<frame title="Area menu del sito" src="frame02a.htm" > <frame title="Area novita del sito" src="frame02b.htm" >
<noframes> <ul> <li><a href="frame02a.htm">Menu del sito</a></li> <li><a href="frame02b.htm">Pagina delle novit&agrave;</a></li> </ul> </noframes>
</frameset>
</html>

il frame che contiene il menù (framea.htm):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<title>Menu del sito</title>
</head>
<body>
<ul>
<li><a href="framea.htm">Menu del sito</a></li>
<li><a href="frameb.htm">Pagina delle novit&agrave;</a></li>
</ul>
</body>
</html>

il frame che contiene il contenuto (frameb.htm):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<title>Novit&agrave; del sito</title>
</head>
<body>
<h1>Novit&agrave; del sito</h1>
<p>...</p>
</body>
</html>

• Presenza Frames: Frame > Bordi dei frame
• Titoli, nomi e elemento NOFRAMES: Frame > Name/Title dei frames
  

I fogli di stile permettono di definire il layout delle pagine web, come ad esempio:

• margini e indentazioni;
• immagini e colori di sfondo;
• font, dimensioni dei caratteri e colore dei caratteri;
• posizionamento del testo nella pagina (impaginazione);

• Si consiglia di definire le dimensioni della pagina in em prevedendo una larghezza entro gli 800x600 punti. In questo modo l'ingrandimento è garantito in maniera corretta sia su Explorer 6 che Explorer 7.
• I fogli di stile migliorano la stampabilità dei documenti Web. La carta ha proprietà intrinsecamente diverse dallo schermo di un computer. Questa differenza può essere gestita attraverso l´uso dei CSS: con l'istruzione media=print si può definire un foglio di stile che viene usato dal browser solo in stampa, e in questo css formattare i contenuti in modo che la pagina venga stampata al meglio (es. di solito si consiglia di non stampare i menù e le parti fisse del sito, ma solo il contenuto; eventualmente sostituire il logo in testata con un logo più adatto ad essere stampato).
• Occorre evitare la generazione di inutili stili e classi css.  Il CSS va utilizzato nel modo corretto, evitando di aumentare la complessità e le dimensioni dei files.

Codice CSS per definire le dimensioni di una pagina entro gli 800x600:

body, td, th{
font-size:62.5%;
}

body{
margin:0 auto;
width:76em;
}

Codice CSS per nascondere i contenuti:

.skip
{
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}

• Codice CSS (per pagine on-line): Controlla> Validatore CSS del W3C > Valida il CSS
• Semantica ed equivalenza di contenuti o funzioni: CSS > Disabilita il CSS
  la pagina deve essere ugualmente comprensibile, ciò che è titolo deve ad esempio averne l'aspetto anche con gli stili disabilitati
• Fogli di stile esterni: CSS > Disabilita gli stili inline
  la pagina deve mantenere lo stesso aspetto
• Stile per la stampa: CSS > Visualizza i(l) Fogli(o) di Stile
  in aggiunta è consigliato sempre stampare le pagine per verificare la qualità del sito anche su carta (non è necessario che l'aspetto sia il medesimo che a video, solo che il contenuto sia correttamente stampato e l'immagine coerente con le pagine a video)
• Dimensioni relative dei caratteri: CSS > Visualizza i(l) Fogli(o) di Stile
  è necessario controllare gli stili a mano o verificare sperimentalmente se testi e campi dei form effettivamente si ingrandiscono (occorre Internet Explorer 6 o precedenti)
• Dimensioni della pagina: Ridimensiona > 800x600
  occorre anche verificare che su Internet Explorer il carattere sia impostato su grande (Visualizza> Impostazioni > Carattere> Grande) e che a questa risoluzione  la pagina sia fruibile senza sovrapposizioni di testi

• Non fornire informazioni solo attraverso i colori. Ad esempio, non basta dire che “I campi obbligatori sono in rosso” ma occorre anche aggiungere altre informazioni per riconoscerli come: “* campi obbligatori” o “ I campi obbligatori sono rossi e con un *” (nell’etichetta).
• Evidenziare nel testo i links non solo con differenze di colore, ma con sottolineatura, grassetto, o presenza di immagini o segni che ne consentano l´identificazione e distinguerli dal resto delle parole presenti nella pagina: usare possibilmente un unico stile coerente.
• Per le immagini che contengono testo significativo utilizzare una scelta di colori sufficientemente contrastati.
• Limitare il numero di colori: si suggerisce di limitare l´uso a quattro colori e al più a sette.
• Usare i colori in modo cauto e accorto: utilizzare molti colori per dare maggiore luminosità alle pagine spesso porta ad un risultato controproducente. Un giusto utilizzo consiste ad esempio nel mostrare gli item in un colore, il titolo in un altro colore, le note in un terzo colore e i messaggi in un quarto colore. Un approccio sicuro è utilizzare lettere nere su fondo bianco, lo stile italico o grassetto per dare rilevanza e riservare i colori ad effetti molto speciali.
• Utilizzare i colori per mettere in evidenza una certa caratteristica e farlo in modo coerente. Ad esempio se in un elenco di rappresentazioni teatrali la convenzione %egrave; quella di visualizzare in rosso gli spettacoli sospesi ci si deve assicurare che non venga usato lo stesso colore anche per altri tipi di spettacoli o che non vi siano spettacoli sospesi evidenziati con un altro colore.
• La regola definita attraverso i colori deve apparire chiaramente, con il minimo sforzo per l´utente.
• Fare attenzione alle normali convenzioni sui colori (rosso dannoso, giallo pericolo, ecc.).
• Ricordatevi che:
  • certi abbinamenti di colori possono far insorgere problemi (di contrasti, di messa a fuoco, ecc.);
  • la fedeltà dei colori può variare a seconda dell´hardware utilizzato ( es.: Mac e altri PC);
  • la stampa o la conversione su altri media può comportare dei problemi.

• Colore: Colore > Scala di grigi
  per verificare che tutte le informazioni siano veicolate anche in modo alternativo al colore (es. campi obbligatori, segnali di errore,...) 
• Contrasti: Colore > Contrast Analyser (applicazione)
  tramite l'applicazione che si aprirà, è possibile selezionare colore di sfondo e colore del testo in primo piano. E' necessario che tra i due colori ci sia una sufficiente "Differenza di colore" (vedi l'immagine di esempio)

• I caratteri predefiniti residenti nella maggior parte dei sistemi operativi sono solo questi: Arial, Courier, Georgia, Times New Roman, Trebuchet e Verdana.
• In virtù delle loro caratteristiche, alcuni sono più adatti alla lettura su schermo (Verdana, Georgia e Arial).

E' possibile utilizzare una combinazione di font diversi, per esempio titoli in Arial e testo in Georgia.
E' consigliabile, comunque, utilizzare pochi font e poche dimensioni, per dare alle pagine un aspetto più chiaro. E' assolutamente indispensabile, per dare uniformità e coerenza al sito web, utilizzare lo stesso tipo di carattere e la stessa combinazione di stili in tutte le pagine, evitando cambiamenti casuali.

• Limitare assolutamente l´uso di immagini contenenti del testo ai soli casi in cui risulta effettivamente inevitabile (ad esempio per visualizzare un logo contenente caratteri non standard), perchè:
  • il testo contenuto nelle immagini non può essere ridimensionato utilizzando le funzionalità dei browser;
  • non può essere letto da dispositivi "solo testo" quali browser testuali e screen reader per non vedenti, perciò il contenuto delle immagini deve essere anche riportato come testo nell´attributo ALT delle immagini;
  • allunga inutilmente i tempi di caricamento delle pagine web;
  • il testo contenuto nelle immagini non può essere oggetto di ricerca e non viene indicizzato dai motori di ricerca;
  • modifiche e correzioni a tali testi richiedono l´uso di un software per modificare le immagini.
• Usare dimensioni del testo non troppo ridotte. L'80% della dimensione predefinita è già piuttosto piccolo. Non scendete mai sotto al 70%. Se dovete decidere la dimensione di un testo provate ad usarlo: se riuscite a leggerlo comodamente a 50-70 cm di distanza dal monitor la sua dimensione è accettabile; se invece stringete gli occhi, confondete le righe o piegate in avanti la schiena è già troppo piccolo.
• Allineare il testo a sinistra, centrarlo solo per i titoli o le intestazioni delle tabelle, allinearlo a destra nelle celle che contengono numeri e non usare il giustificato perchè è meno leggibile a video.

• Dalla barra dell'accessibilità 2.0 scegliete:
  Ridimensiona> 800x600
  Impostate i caratteri su grande (Internet Explorer 6: Visualizza> Carattere> Grande)
  Se leggete tutto correttamente e non ci sono sovrapposizioni tali da rendere il contenuto incomprensibile, il livello di accessibilità è accettabile
• Verificate che nei fogli di stile non siano definite dimensioni dei font in px

• il formato dovrà essere supportato dai browser più utilizzati (in genere JPEG per le immagini fotografiche e GIF o, preferibilmente, PNG per la grafica - vedi le schede di dettaglio sui formati)
• il "peso" di un´immagine da inserire in una pagina html dovrebbe essere di pochi Kb per non appesantire troppo la pagina stessa; qualora fosse necessario inserire immagini di dimensione superiore ai 50 Kb (immagini di mostre o quadri o altro) è consigliabile indicare la dimensione in byte dell´immagine a fianco del link che la richiama in modo tale che il navigatore sia consapevole del tempo necessario per lo scarico della stessa ed eventualmente mostrare prima una piccola anteprima cliccabile, per espandere l´immagine.
• Associare alle immagini descrizioni appropriate e verificare la congruenza dei testi
• Si può inserire un ALT="" (vuoto) per quelle immagini che non aggiungono nulla d´informativo al contesto della pagina (fotografie o icone puramente decorative)
• Inserire il testo alternativo anche nei link realizzati con grafica e nei bottoni immagine dei forms.
• Se si utilizzano sequenze di link con immagini adiacenti (bottoniere, imagemaps), e se si affiancano due o più immagini, inserire nel testo dell´ALT dei segni di punteggiatura o racchiuderli tra parentesi per far sí che i vari testi vengano letti correttamente dagli screen-reader.
• Nel caso di immagini che rappresentano grafici e in situazioni analoghe è opportuno fornire la stessa quantità di informazioni in modo alternativo, ad esempio riassumento in un blocco di testo sottostante i dati che quel grafico rappresenta.

Testo alternativo

il link di un logo ben commentato:

<a href="..."><img src="..." alt="Ermes - Regione Emilia-Romagna, torna alla home page" ... /></a>

Logo della Regione Emilia-Romagna

E' necessario inserire in ogni sito Web (possibilmente in alto a destra) il logo della Regione collegato al sito www.regione.emilia-romagna.it.

Per informazioni sull'uso corretto del logo, fare sempre riferimento al Manuale d'immagine coordinata della Regione Emilia-Romagna [Documento PDF - 7229 kB].

<img src="http://www.regione.emilia-romagna.it/images/loghi/rer200.gif"
alt="Regione Emilia-Romagna" />

<img src="http://www.regione.emilia-romagna.it/images/loghi/rer100.gif"
alt="Regione Emilia-Romagna" />

<img src="http://www.regione.emilia-romagna.it/images/logopictra.gif" alt="Logo Regione Emilia-Romagna" width="120" height= "17">

<img src="http://www.regione.emilia-romagna.it/images/logotra.gif" alt="Logo Regione Emilia-Romagna" width="200" height= "28">< /SPAN>

Immagini senza ALT

Immagine senza attributo ALT:

<img src="/sezione1/immagini/grafico001.jpg">

La sintesi vocale leggerà:
"Grafico /sezione1/immagini/grafico001.jpg"
Si provi ad immaginare che confusione suscita una serie di immagini lette a codici come questa!

• Alternativi: Immagini > Rimuovi immagini
  per verificare che tutte le immagini che veicolano informazioni o hanno una funzione abbiano il corretto testo alternativo
• Immagini in movimento: Immagini > Test frequenza GIF animate
  verranno segnalate le eventuali immagini in movimento e quelle che per il loro lampeggiamento, potrebbero causare problemi a chi soffre di epilessia fotosensibile (solo per pagine on-line)

• In generale le immagini sono meno accessibili del testo, occorre rispettare sia i requisiti legati a colore, sia i requisiti legati alle immagini, e in più è bene ricordare che immagini e aree di dimensioni ridotte le rendono meno accessibili a disabili motori ed ipovedenti.
• Per le image maps lato server è necessario fornire una serie di links alternativi che elenchino le azioni attivate attraverso le coordinate dall’applicazione CGI; ad esempio, se l’image map è la cartina dell’Italia e le aree sensibili sono le regioni italiane, nella pagina web dovrà esserci l’elenco dei link espliciti alle pagine relative alle 20 regioni;
• Per le image maps lato client, occorre assegnare l’attributo ALT a tutte le aree che compongono la mappa. Il browser testuale o lo screen reader vedranno le aree come una serie di links.

Un esempio di mappa immagine accessibile a cui è affiancato l'elenco delle zone sensibili: il risultato estetico è accettabile e l'accessibilità maggiore rispetto ad avere la sola immagine.

• Bologna
• Ferrara
• Forlì-Cesena
• Modena
• Parma
• Piacenza
• Ravenna
• Reggio-Emilia
• Rimini

Una verifica manuale anche senza strumenti particolari si può effettuare con Internet Explorer: sulle zone sensibili delle mappe immagini correttamente marcate, appare un "fumetto" contentente l'alternativo testuale

• Assicurarsi che il testo della destinazione del link sia chiaro non solo se letto nel contesto, ma anche separatamente. “Clicca qui per registrarti” ha un senso se letto nella sua globalità, ma lo perde se si ascolta o legge solo “Clicca qui”.
• Assicurarsi che il testo de link sia univoco ossia che non esistano link con lo stesso testo ma che puntano a risorse differenti.l
• Occorre assicurarsi che i link siano chiaramente riconoscibili da tutti gli utenti in particolare quelli con difficoltà cognitive o ipovedenti. Fino ad oggi era una convenzione diffusa che i links fossero scritti in blu e sottolineati e che quando il mouse ci fosse passato sopra si trasformava in una manina. Se si vuole adottare un altro stile, occorre comunque rendere chiaramente evidenti i link con lo stile e il colore del carattere, con la trasformazione del cursore del mouse e con altri accorgimenti grafici come freccine e simili. E’ auspicabile che i link, come tutte le altre strutture di comando di un sito, rispettino sempre le stesse convenzioni grafiche.
• Ricordiamo che tutti i link ottentuti mediante javascript devono aprirsi anche quando javascript è disabilitato
• È sconsigliato utilizzare solo simboli grafici cliccabili (esempio pallini, freccine, iconcine) affiancati al testo per implementare il link e in ogni caso se l’area cliccabile dello stesso è troppo piccola si mette in seria difficoltà l’utente che ha un controllo non preciso dei dispositivi di puntamento.
• Quando un link punta ad un file, è bene che all'interno del link sia indicato anche il tipo di file e le sue dimensioni, in modo che l´utente possa valutare se è il caso di aprirlo oppure no, ed è bene indicare dove si può scaricare il programma necessario per la visualizzazione del file.
• Evitare l’uso del metatag HTTP-EQUIV=”REFRESH” per forzare il caricamento di un’altra pagina; preferire meccanismi di redirezione lato server oppure prevedere una pagina statica col link per saltare alla nuova pagina;
• Per limitare la lunghezza dei link, si può aggiungere l'attributo title per fornire una spiegazione più estesa (il contenuto del title è il fumetto che appare quando l'utente posiziona il puntatore del mouse sul link, prova qui).

può essere trasformato così:

oppure, meglio ancora:

• Link significativi: Informazioni > Visualizza i link [nuova finestra]
  apparirà una lista in cui sarà semplice capire se il testo dei link ha senso quando letto fuori dal contesto.
• Selezione da tastiera: Struttura > Ordine di tabulazione
  verrà mostrato un numero corrispondente all'ordine, verificare che ogni link abbia un numero e che la numerazione segua una sequenza logica.
• Link attivi (on-line): Controlla > Controllo dei link del W3C > Controlla la pagina corrente
  Verificare che tutti i link siano funzionanti.

• Se esiste più di un menù, il titolo di ciascuno di essi non può essere vago come "Menù Principale" o "Menù di sinistra": bisogna usare termini più precisi;
• è preferibile avere un numero di livelli di menù (depth) piccolo con un numero di possibilità (breadth) grande, piuttosto che viceversa: si consiglia di usare da 4 a 8 item (voci) in ogni livello e non più di 3-4 livelli;
• nelle liste raggruppare le selezioni in modo significativo, con un senso, per categorie;
• formare gruppi di item che comprendano tutte le possibilità (es.: età 0-20, 20-40, >40) e non fare sovrapposizioni fra gruppi (es.: Divertimenti-Eventi e Concerti-Sport);
• ordinare le selezioni in base ad una logica e in modo che siano ben distinguibili una dall´altra;
• usare diciture brevi per le selezioni, iniziando con una parola chiave e significativa in quanto il nostro occhio scorre da sinistra verso destra;
• consentire salti, scorciatoie e abbreviazioni, abilitando anche ritorni al menù precedente;
• una volta scelti gli item del menù, bisogna pensare alla sequenza di presentazione. Se hanno una sequenza naturale, come ad esempio i giorni della settimana, i capitoli di un libro, ecc. la decisione è obbligata. Altre tipiche regole di sequenza degli item sono:
  
  
  • ordine cronologico;
  • ordine numerico (ascendente o discendente);
  • proprietà fisiche: lunghezza, area, volume, temperatura, peso, velocità e così via, in ordine crescente o discendente;

  quando ciò non è applicabile, si può ordinare in base a:

  • ordine alfabetico
  • qualità comuni (separati da linee di demarcazione);
  • prima gli item più frequenti o gli item più importanti (ma è difficile determinare cosa è più importante per un utente o un altro).

I titoli devono precedere i menù

I titoli (H1, ..., H6) dovrebbero essere utilizzati per strutturare i contenuti. Per facilitare la navigazione a chi usa gli screen-reader si devono far precedere i menù con delle intestazioni. Usare testi significativi: non menù di destra o di sinistra ma menù principale, approfondimenti, ecc.. Ecco un esempio:

...
<h1>Titolo del sito (facoltativo e spesso nascosto)</h1>
...
<h1>Titolo pagina (uguale o simile al TITLE)</h1>
...
<h2>Titolo di un paragrafo nel testo</h2>
...
...
<h3>Titolo di un menù</h3>
<ul>
<li>voce di menù</li>
...

Esempio di Menù utilizzando una corretta marcatura

Gli elementi sono spaziati di 1em, impaginati con gli stili, e sono utilizzati <H..> per una migliore fruizione mediante screen-reader.

Esempio di lista che utilizza una <SELECT> e <OPTGROUP>

(Tutte) CENTRO DIURNO CENTRO RESIDENZIALE BASSA SOGLIA ... CASA DI RIPOSO CASA PROTETTA CENTRO DIURNO ...

Si noti come accanto alla lista sia presente il bottone per attivare la scelta (vedi sezione script)

• Intestazioni: Struttura> Intestazioni
  oppure da Struttura> Struttura delle intestazioni
• Liste: Struttura> Elementi di lista

Ai disabili della vista che leggono la tabella con la sintesi vocale in un ordine essenzialmente sequenziale o che possono esplorare le celle della tabella muovendosi nelle varie direzioni, occorre fornire alcuni dettagli “descrittivi” che consentano di comprendere la struttura della tabella, associando correttamente i dati variabili alle relative intestazioni.

• Quando possibile semplificare la struttura delle tabelle. Piuttosto che una tabella con più righe o colonne di intestazione e celle unite, è meglio suddividere i dati in più tabelle semplici con una riga e/o colonna di intestazione.
• per le celle che contengono intestazioni fisse, si deve usare il costrutto <TH></TH>, mentre per le celle di dati “variabili” si deve utilizzare il costrutto <TD></TD>; il browser assegna gli attributi di testo evidenziato e centrato alle celle TH, ma è possibile modificarne l’aspetto con gli attributi di stile.
• Per associare le intestazioni alle celle nelle tabelle complesse si deve attribuire a ogni cella di intestazione un ID=”testataX”; le celle di dati si associano alle diverse intestazioni con HEADERS=”testata1 [testata2 [testata3 …]]” (vedere esempi);
• Una semplice associazione prevista dall’HTML 4.0 tra l’intestazione e le celle di dati è l’attributo SCOPE=”gruppo” da inserire nella descrizione dell’intestazione; i valori che può assumere gruppo sono:
  • ROW, specifica che l’intestazione si riferisce alla riga adiacente;
  • COL, specifica che l’intestazione riguarda la colonna sottostante;
  • ROWGROUP e COLGROUP, che associano l’intestazione a gruppi di righe (THEAD, TBODY, TFOOT) e a gruppi di colonne (costrutti COLGROUP/COL).
• Un ulteriore metodo per raggruppare celle senza riferirsi a testate è l’attributo AXIS=”gruppo”.
• La tabella può essere suddivisa in più sezioni logiche: CAPTION, che identifica il titolo della tabella, THEAD e TFOOT, rispettivamente le parti di testata e di pie’ di pagina, e TBODY che contiene il corpo della stessa;
• Se il testo di intestazione è troppo lungo, si possono introdurre abbreviazioni con l’attributo ABBR=”abbreviazione” nella cella di intestazione; allo stesso modo, se si vuole mostrare nelle intestazioni un testo abbreviato, si può usare ABBR=”testo esteso” per esplicitarlo nella lettura degli screen reader (vedere esempi).
• L’attributo SUMMARY=”sommario” del tag TABLE consente di indicare una breve descrizione della tabella che verrà letta dalla voce dello screen reader ma che non verrà visualizzato; può essere utilizzato per fornire maggiori dettagli sul contenuto della tabella stessa.

L’utilizzo di TD e TH, dell’attributo SUMMARY e dei costrutti HEADERS/ID sono sufficientemente supportati dagli ausili più recenti ed è prevedibile che in futuro tale supporto venga ancora migliorato.

Tabella semplice

Esempio di tabella semplice con abbreviazioni.

Da notare il codice iniziale:

<table summary="agenda, divisa in righe da una settimana ciascuna">
<caption> Aprile 2005</caption>
<tr>
<th abbr="Luned&igrave;" id="ag_lu" scope="col">Lu</th>

Tabella complessa

Il cui il codice più importante è

<table summary="La tabella mostra per ciascun dipendente i giorni lavorati e lo stipendio percepito, con totali di reparto e generale" >
<caption>Tabella dipendenti</caption>
<tr>
<th id="dip">Dipendente</th>
<th id="gio" abbr="Giorni">Giorni lavorati</th>
<th id="stip" abbr="Stipendio">Stipendio in euro</th>
</tr>

<tr>
<th id="rep1" headers="dummy" colspan="3">Reparto formazione</th>
</tr>

<tr>
<th id="d1" headers="dip rep1">Bianchi</th>
<td headers="dip d1 gio">192</td>
<td headers="dip d1 stip">21875</td>
</tr>

Una tabella ben descritta per lo screen reader. E’ stato inserito un sommario che descrive meglio la tabella. Sono stati inseriti vari attributi HEADERS/ID per consentire una corretta comprensione delle singole celle. Si noti l’utilizzo dell’ID dummy nell’unica cella vuota per utilizzarlo come headers delle intestazioni “Reparto formazione”, “Reparto sviluppo” e dei totali. Questo evita che JAWS legga per default la prima cella della colonna (“Dipendente”).

Tabella complessa trasformata in più tabelle semplici

Dipendenti

• Totale giorni lavorati: 748
• Totale stipendi in euro: 80050

• Utilizzare meno tabelle possibili, una sola per impaginare è accettabile.
• Assicurarsi che il testo venga reso nell´ordine corretto anche quando manca il supporto dei tag di tabella, tenendo conto che la linearizzazione segue l´ordine in cui il testo si presenta nel file HTML della pagina; questa accortezza consente una corretta lettura del testo con browser testuali e con sintesi vocale di screen readers meno recenti.
• Visto che la tabella ha solo la funzione di gestire il layout non si deve scrivere alcun SUMMARY.

• Linearizzazione: Tabelle > Linearizza
  per capire se il contenuto ha ancora senso una volta tolte le strutture che gli danno forma
• Intestazioni: Tabelle > Intestazioni di tabella
  per verificare che non siano state marcate le intestazioni
  

Aspetto dei form

• Scrivere istruzioni comprensibili, usando una terminologia semplice e sintetica: evitare l´uso di pronomi (TU devi digitare il nome…) e di termini generici ( l´utente deve digitare…), bensì scrivere solo l´azione (Digitare il nome o semplicemente Nome);
• Raggruppare i campi in maniera logica e sequenziale, mettendo in posizione adiacente campi correlati fra loro, eventualmnte usando l'opportuna marcatura (<FIELDSET> per i campi e <OPTGROUP> per le liste) e separando i gruppi con un pò di spazio bianco.
• I campi di inserimento debbono essere ben visibili e contornati.
• Mettere prima i campi obbligatori (oppure evidenziare quelli obbligatori mettendo ad esempio un asterisco e scrivendo all´inizio "i campi con l´asterisco sono obbligatori".)
• Evitare di usare tabelle per disporre i campi sullo schermo.
• Ai sensi del D. Lgs. n. 196/2003 "Codice in materia di protezione dei dati personali", è obbligatorio dare adeguata informativa su tutti i trattamenti dei dati personali.

Inserimento dei dati

• Consentire di utilizzare integralmente il form e le sue funzioni utilizzando la sola tastiera (vedi sezione sugli script).
• Consentire di correggere sia un carattere errato sia l´intero campo.
• Prevenire gli errori ove possibile, impedendo ad esempio di scrivere caratteri alfanumerici in campi numerici, e indicando quale formato utilizzare per i campi speciali (es. per le date gg/mm/aaaa).
• Per l'esecuzione del form prevedere un bottone per l´invio, in modo che sia l´utente a scegliere di proseguire.
• Evitare il bottone di RESET per cancellare i dati inseriti nel form.

Convalida e segnalazione degli errori

• Dare una segnalazione di conferma al termine del riempimento dei campi.
• Inserire  segnalazioni di errore nelle <LABEL>.
• Se il form è complesso o inserire un sommario degli errori a inizio pagina o, ancora meglio, presentare una pagina con solo i campi da correggere.
• I messaggi di errore debbono essere:
  • specifici: anziché usare ad esempio SYNTAX ERROR segnalare "manca la parentesi sinistra", anziché ILLEGAL DATA usare "digitare la prima lettera: Send, Read, ", anziché INVALID DATA dire "il giorno va da 1 a 31" e così via.
  • costruttivi e con tono positivo: da evitare messaggi tipo FATAL ERROR, RUN ABORTED, CATASTROFIC ERROR, ecc. meglio riscriverli suggerendo cosa deve fare l´utente;(es. spiegando i valori permessi).
  • usare frasi orientate all´utente: questo esprime il concetto che l´utente deve avere l´impressione di governare il sistema e non di rispondere al sistema. Siccome poi i messaggi dovrebbero essere più corti di una riga e non sempre la brevità è significativa, a volte può essere utile inserire un pulsante ? attraverso il quale l´utente può avere una migliore spiegazione e supporto;
• Bisogna anche evitare, nel caso di errore, di far riscrivere tutti i campi: l´utente deve capire quale campo ha sbagliato e correggere solo quello.

Ai sensi del D. Lgs. n. 196/2003 "Codice in materia di trattamento dei dati personali", quando siti e applicazioni trattano dati personali e/o sensibili/giudiziari, le operazioni che vengono effettuate su di essi devono essere previste da leggi o regolamenti.

Inoltre, è obbligatorio dare adeguata informativa su tutti i trattamenti dei dati personali che vengono effettuati dal titolare.

1. le finalità e le modalità del trattamento cui sono destinati i dati;
2. la natura obbligatoria o facoltativa del conferimento dei dati;
3. le conseguenze di un eventuale rifiuto di rispondere;
4. i soggetti o le categorie di soggetti ai quali i dati personali possono essere comunicati o che possono venirne a conoscenza in qualità di responsabili o incaricati, e l'ambito di diffusione dei dati medesimi;
5. i diritti di cui all'articolo 7;
6. gli estremi identificativi del titolare e, se designati, del rappresentante nel territorio dello Stato ai sensi dell'articolo 5 e del responsabile. Quando il titolare ha designato più responsabili è indicato almeno uno di essi, indicando il sito della rete di comunicazione o le modalità attraverso le quali è conoscibile in modo agevole l´elenco aggiornato dei responsabili. Quando è stato designato un responsabile per il riscontro all´interessato in caso di esercizio dei diritti di cui all´articolo 7, è indicato tale responsabile.

L´informativa può essere resa inserendola nella pagina Web del sito regionale, PRIMA del pulsante di INVIO del form

Il W3C ha elaborato uno standard per sincronizzare audio, video e testo: lo SMIL e Quicktime o RealPlayer lo supportano. Microsoft ha inventato invece SAMI basato su Windows Media Player.

La Regione Emilia-Romagna oggi utilizza Videovista (o Clipstream), un'applicazione Java per incorporare filmati multimediali nelle proprie pagine: per maggiori dettagli vedi gli approfondimenti.

• E' consigliabile non affidarsi all'ultimissima tecnologia multimediale, ma cercare di restare "due passi" indietro e fornire delle alternative.
• Nel caso di files multimediali da scaricare fornire più alternative (per banda, per player) ed il collegamento ai files per fruirli.
• Per presentazioni multimediali visualizzate all'interno della finestra del browser occorre anche soddisfare tutti i requisiti legati ad applet e plugin
• Se l´immagine è visualizzata attraverso un oggetto o un´applet, inserire la descrizione testuale nella parte contenuta tra il tag OBJECT e la sua chiusura (<object data="immagine" type="image/gif">Descrizione</object>).
• Mettere l´utente in condizione di interrompere la fruizione e disabilitare l´audio.

Esempio di codice per un contenuto multimediale

<object title=”..” … type="video/mpeg">

<!-- Oppure immagine + audio -->

<!-- Immagine-->
<object … type="image/jpg">
<!-- se non è supportata l’immagine -->
descrizione immagine
</object>

<!-- audio -->
<object … type="audio/mp3">
<!-- se non è supportato l’audio-->
descrizione dell’audio
</object>

</object>

Esempio di filmato Flash accessibile

A questo punto basta inserire nella pagina web di pubblicazione del video il codice HTML per la gestione dell’applet VideoVista (vedi Esempi). Nel caso, più semplice, in cui il filmato venga pubblicato attraverso il sistema di web content management della Regione Emilia-Romagna è sufficiente inserire nella pagina web il relativo oggetto multimediale VideoVista.

Esempio di codice per un contenuto VideoVista

<!—Stile -->
<style>
.box_filmato {border:2px solid #000; width:340px;  margin: 0 0 0 30%;}
</style>
 
<!-- Pulsantiera -->
<ul>
<li><a href="javascript:{document.VideoVista.doPlay();}">Avvio</a></li>
<li><a href="javascript:{document.VideoVista.doPause();}">Pausa</a></li>
<li><a href="javascript:{document.VideoVista.doStop();}">Stop</a></li>
</ul>
 
<!-- Applet Videovista -->
<div class="box_filmato">
<object myscript code="videovista.class" type="application/x-java-applet" archive="videovista.jar" name="VideoVista" width="320" height="293">
<param name="VideoPath" value="NOME_FILE_VIDEO.vvf" />
<param name="AutoPlay" value="true" />
<param name="MegaVision" value="true" />
<param name="StartImage" value="logo.jpg">
<param name="EndImage" value="logo.jpg">
<param name="BufferingMessage" value="Lettura video in corso">
<param name="BackgroundColor" value="#ffffff" />
<param name="SkinBorderLine" value="#000000" />
<param name="SkinBorderLineWidth" value="1" />
<param name="ToolbarEnabled" value="true" />
<param name="ToolbarSkinPath" value="toolbar_giunta.jpg" />
<param name="ToolbarSkinControlPosition" value="0,65,4,14" />
</object>
</div>

Aggiungere anche le istruzioni per la corretta visualizzazione, come ad esempio:
Per la corretta visione ed accessibilità del filmato occorre il software Java per desktop, Java Runtime Environment Ver.5.0 Update 10 o successiva. Se non riesci a visualizzare il filmato, ti invitiamo a scaricare ed installare il software Java disponibile sul sito del produttore Java.com.

L’unico parametro variabile è "VideoPath", in cui vanno riportati il nome e percorso del file VideoVista. Gli altri tre file necessari alla pubblicazione (logo.jpg, toolbar_giunta.jpg, videovista.jar) sono messi a disposizione dal Servizio Sistema informativo - informatico regionale.

Linee guida generali

Seguono le indicazioni su come produrre pagine ASP. Si assume la conoscenza della tecnologia ASP. Si intende che il linguaggio utilizzato lato server sia VBScript.

Option Explicit

è buona prassi di programmazione dichiarare tutte le variabili che si usano. Option Explicit è utile in quanto segnala l´utilizzo di identificatori non dichiarati.
N.B. Option Explicit deve essere la prima linea (dopo la dichiarazione del linguaggio [<%@LANGUAGE=VBSCRIPT%>], che però si può omettere in quanto è di default) del sorgente della pagina.

Gli oggetti Session e Application

Non assegnare riferimenti ad oggetti COM negli oggetti Session o Application. Ciò accade specialmente per memorizzare oggetti "ADODB.Connection" o "ADODB.Recordset", ma è sconsigliato in quanto risulta pesante per il server e difficilmente scalabile.

Deallocare esplicitamente tutti gli oggetti

Sebbene gli oggetti debbano essere deallocati automaticamente dal motore di scripting, è prassi comune deallocarli esplicitamente per moderare i problemi di mancato rilascio della memoria da parte di Internet Information Server. Ciò significa in pratica includere la riga Set mio_oggetto = Nothing.
Inoltre nel caso di connessioni al DB, prima si chiudono e prima ritornano disponibili nel pool delle connessioni per altri utenti. Ciò è un punto fondamentale della scalabilità delle applicazioni Microsoft.

Riutilizzare il codice

Tipicamente le pagine di qualsiasi sito hanno delle parti in comune, sia visive (header, footer, …) che strutturali (link a fogli di stile, meta tags per il refresh, …). è quindi consigliabile, per una maggiore leggibilità e manutenibilità creare delle funzioni che generano queste parti di HTML e posizionarle in un file che viene poi incluso dalle altre pagine. è il classico vecchio concetto della libreria di funzioni. Si ricorda che per includere un file la direttiva ASP è "#include", per esempio:    <!-- #include file="../includes/common.asp" --> . la sintassi completa è descritta su: http://msdn2.microsoft.com/en-us/library/ms524876.aspx)
N.B. A differenza di quanto indicato da Microsoft evitare di dare estensione ".inc" ai file da includere altrimenti il sorgente risulta visibile a chiunque su internet. Usare invece l´estensione ".asp".

Accesso ai dati

Controllare sempre eventuali errori

In ERMES è presente un file disponibile per tutti e che si può includere tramite la direttiva <!--#include virtual="/includes/global.asp"--> in cui è definita una funzione di nome VisualizzaErrore() che accetta come parametro un oggetto di tipo ADODB.Connection. Essa, nel caso si sia verificato un errore, mostra un messaggio standard e termina l´elaborazione. Naturalmente affinché possa essere utilizzata occorre avere dato la direttiva On Error Resume Next. Dopo qualsiasi operazione che può fallire richiamare VisualizzaErrore() passandogli come parametro l´oggetto ADODB.Connection.

Includere le costanti di ADO

Oltre al file di cui sopra nella cartella includes si trova anche il file adovbs.inc contenente tutte le costanti di ADO. Alternativamente, se il sito è definito come applicazione ASP è possibile aggiungere le seguenti linee in testa al file global.asa

<!--==Visual InterDev Generated - startspan==-->
<!--METADATA
TYPE="TypeLib"
NAME="Microsoft ActiveX Data Objects 2.1 Library"
UUID="{00000201-0000-0010-8000-00AA006D2EA4}"
VERSION="2.1"
-->
<!--==Visual InterDev Generated - endspan==-->

Ciò fa si che si importi tutta la type librery di ADO. Così facendo oltre alle costanti di ADO funzionerà la tecnologia IntelliSense che suggerisce e completa in comandi nell´editor di Visual InterDev.

Usare connessioni DSN-less

Sebbene leggermente meno performanti al momento dell´apertura, le connessioni DSN-less risultano più comode in caso di spostamento delle pagine in un altra cartella o in un altro sito.
Per chi non lo sapesse, una connessione è DSN-less quando la stringa di connessione non fa rifemento a Data Source Names (DSN) definiti a priori sul server (tramite l´applet ODBC del pannello di controllo).
Riportiamo di seguito due esempi di tali stringhe una per connettersi ad un DB SQL Server e l´altra che connettersi a un DB Access.

SQL Server:

"Provider=SQLOLEDB.1;
Data Source=(local);
Initial Catalog=nome_database;
User ID=gino;
Password=supergino;
App=Nome applicazione;
Persist Security Info=True
"

Access

I database in formato Access dovranno essere usati solo per applicazioni di sola lettura, ovverosia applicazioni che in nessun caso devono eseguire operazioni di INSERT, UPDATE o DELETE sulle tabelle.

"Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" &
Server.MapPath("nome_database.mdb") & "; Persist Security Info=False"

Nel caso di Access si noti l´utilizzo della funzione Server.MapPath() per svincolarsi dalla posizione assoluta del db nel file system.

N.B. la creazione della connessione verso in DB è sicuramente un funzionalità candidata a essere inserita tra quelle funzioni da riutilizzare su tutto il progetto. Si vedano il punto precedente "Riutilizzo del codice" e l´esempio seguente:

<!--#include virtual="/includes/global.asp"-->
<%
Function Connessione
Dim cn
On Error Resume Next
Set cn = Server.CreateObject("ADODB.Connection")
cn.Open "<mettere qui la stringa di _
connessione approriata come indicato sopra>"
VisualizzaErrore(cn) ´Vedi sopra per questa funzione
Set Connessione = cn
Set cn = Nothing
End Function
%>

se questa funzione è, per esempio, definita nel file "tools.asp" ecco come può essere utilizzata da altre pagine:

<%Option Explicit%>
<!--#include file="tools.asp"-->
<%
Dim cn, rs
Set cn = Connessione
On Error Resume Next
Set rs = cn.Execute("SELECT * FROM …")
VisualizzaErrore cn

While not rs.EOF
´QUI SI FA QUALCOSA
rs.MoveNext
Wend
rs.Close
cn.Close
Set rs = Nothing
Set cn = Nothing
%>

Verifiche

Il Disciplinare definisce sette principi chiave da rispettare durante la progettazione e lo sviluppo di un’applicazione e contiene inoltre utili liste di controllo che riassumono in modo schematico le indicazioni contenute nel documento. Le liste di controllo riguardano le varie fasi del ciclo di vita di un’applicazione (design, sviluppo, test, deployment e gestione) e comprendono anche le Misure minime di sicurezza previste dal Codice in materia di protezione dei dati personali (D. Lgs. 196/03).

Le liste di controllo sono relative ai sottoelencati argomenti:

• Design e sviluppo dell'applicazione
  1. Analisi dei requisiti e design
  2. Autenticazione
  3. Autorizzazione
  4. Validazione dei dati
  5. Gestione delle sessioni utente
  6. Logging
  7. Crittografia e disponibilità dei dati
• Test, deployment e gestione dell'applicazione
• Misure minime da osservare per tutti i trattamenti
• Misure minime ulteriori da osservare nel caso di trattamenti di dati sensibili e/o giudiziari

Utilizzare tecnologie non-standard per fornire SOLO funzionalità ed informazioni accessorie.

Ad oggi, non è possibile realizzare alcuna applicazione web utilizzando unicamente tecnologie AJAX: è possibile migliorare le applicazioni usando AJAX e seguendo il metodo chiamato "Progressive enhancements" (Miglioramento progressivo). Oggi non è neppure possibile utilizzare unicamente Flash come contenuto: nonostante sia una tecnologia diffusa e matura, soffre ancora di problemi di accessibilità.

Per offrire un´alternativa testuale all´uso degli script si può utilizzare il tag <NOSCRIPT>. All'interno di questo elemento occorre dare una vera alternativa, e non semplicemente segnalare il fatto che per quell'utente alcune o tutte le funzioni sono inibite.

Eventi

La generazione di eventi deve essere controllata dall´utente e non attivata automaticamente. In particolare:

• OnDblClick non ha equivalente con la tastiera.
• OnChange e OnSelect si devono evitare.
• Non usare eventi del mouse legati a coordinate precise.
• OnMouseOver e OnMOuseOut devono essere associati ai corrispondenti OnFocus e OnBlur.
• L'evento onClick non necessita associazioni ad altri eventi solo se se usato su link o controlli dei form .

Contenuti dinamici

Anche l'aggiornamento dei contenuti della pagina deve essere controllato dall'utente, evitare quindi:

• l’uso di HTTP-EQUIV=”REFRESH”; preferire meccanismi di redirezione lato server o prevedere una pagina statica col link per saltare alla nuova pagina;
• l'uso di document.write perchè non apparirebbe a tutti gli utenti il contenuto generato con questo comando;

Effetti visivi

Fate attenzione a particolari effetti visivi che si possono realizzare con queste tecnologie (es. DHTML):

• Evitare testi in movimento sullo schermo, oppure prevedere la possibilità da parte dell’utente, di fermarlo.
• Evitare effetti di sfarfallio, specie quelle con una frequenza compresa tra 4 e 59 Hz, che possono causare crisi epilettiche, specie se si tratta di passaggi continui dallo scuro al chiaro;
• Quando utilizzate gli script per mostrare dei contenuti della pagina, fare in modo che tali contenuti siano nascosti tramite script dopo il caricamento della pagina stessa; non utilizzate display:none per nascondere

Nuove finestre

Aprire finestre in pop-up o nuove finestre  è sconsigliato, anche se risulta utile, accessibile e comunque maggiormente usabile in certi casi:

• Forzate il download di documenti non HTML (testi, filmati ecc.) se possibile, perchè sono più accessibili se aperti fuori dal browser; se non è possibile a volte è utile aprirli in nuove finestre per evitare che l'utente chiuda istintivamente la finestra in cui ha caricato il documento e perda la pagina da cui proveniva.
• Una pagina che contiene solo collegamenti a siti esterni è sensato che apra tali link in una nuova finestra.

In questi casi o anche se una pagina deve interagire con un'altra (es. per la selezione di un dato) e non si hanno altre alternative, si può aprire una nuova finestra (ma in modo accessibile, vedi esempi)

... e ancora

• Prestare attenzione ai tempi di validità di sessioni: alcuni utenti potrebbero impiegare più tempo di quanto prevedete per compilare un form.
• Se occorre scaricare software aggiuntivo (es.: un plug-in), fornire il link da cui è possibile scaricarlo (nella versione della lingua del sito).

Nuove finestre (pop-up)

<a href="popup.html"" rel= "external" >Link da aprire in popup</a>

function externalLinks( ) {
  if (!document.getElementsByTagName) return; 
  var anchors = document.getElementsByTagName("a"); 
  for (var i=0; i<anchors.length; i++) {
 var anchor = anchors[i]; 
    if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external") {  
   anchor.title     = "il collegamento apre una nuova finestra" ;
        anchor.onclick   = function( ) { window.open( this.href ); return false; }
        anchor.onkeypress= function(e) { k = (e) ? e.keyCode : window.event.keyCode; if (k==13) window.open(this.href); return false; }
    }
  }
}

<body onload="externalLinks( )">

Menu dinamici

Script per migliorare l'accessibilità

function MinimumFontSize() {
 var XDivElement = document.getElementById('q');
  if ((XDivElement.offsetHeight > "30")||(document.body.clientWidth<641)) {
    tags = new Array ('contenuto_home', 'approfondimenti_home', 'contenuto', 'laterale');
    for (j = 0; j < tags.length; j ++) {
      var getbody = document.getElementById(tags[j]);
      if (getbody) {
  getbody.style.styleFloat='none';
  getbody.style.display = 'block';
        getbody.style.width = '99%';
  getbody.style.margin = '0';
  getbody.style.clear = 'both';
      }
    }
  }
}

1. Verificare che esista almeno un'alternativa accessibile con il browser testuale Lynx per navigare la pagina.
2. Utilizzare la pagina per verificare che funzioni correttamente con i seguenti browser (pari al 96% degli user agent che visitano il sito ERMES da gennaio 2007) anche su sistemi operativi diversi ove possibile:
   
   • Microsoft Internet Explorer 7.x per Windows XP o Vista 
   • Microsoft Internet Explorer 6.x per Windows XP o 2000 
   • Mozilla Firefox 2.x su Windows/OsX/Linux
   • Apple Safari 2.x per OSX o 3 per Windows/OSX
   • Opera 9 per Windows/OsX/Linux
3. Utilizzare la pagina con la sola tastiera

Alcune verifiche possono essere fatte con la barra dell'accessibilità (versione 2.0) , controllando:

• Fruibilità in assenza di applet: IE > Attiva/Disattiva ActiveX
• Fruibilità in assenza di Javascript: IE > Attiva/Disattiva Javascript
• Presenza di popup: Informazioni > Javascript / Link in nuove finestre
  Verranno evidenziati i link in nuove finestre per facilitarne la verifica

• Ctrl-Shif:t interrompe la frase che il computer sta pronunciando (fondamentale);
• Insert+2(TN): legge il contenuto della pagina dalla posizione corrente;
• Insert+Invio: cerca di posizionarsi alla successiva area di testo (non di links) della pagina;
• Freccia su e giù: sposta la posizione corrente alla linea precedente/successiva e la legge;
• PaginaSu/PaginaGiu: sposta la posizione corrente alla pagina precedente/successiva e le legge;
• Home: riporta a inizio pagina;
• Tab/Shift Tab: posiziona al link/campo del form precedente o successivo; se è un link, lo legge, se è un campo di form, ne legge l´etichetta;
• Ctrl-Insert-7: si posiziona sul primo campo del primo form della pagina e ne legge l´etichetta;
• Invio su un campo di un form: attiva la modalità maschere, che consente di compilare i campi di un modulo. Ripremendo Invio si ritorna alla modalità normale (Cursore virtuale);
• Insert+F7: fornisce l´elenco dei frames;
• Insert+F9: fornisce l´elenco dei link.

Per chiudere Jaws occorre premere i tasti Insert+F4 e confermare l´operazione.

Suggerimento: siccome il test con Jaws deve essere effettuato con la tastiera (Jaws emula il mouse con dei tasti, ma per le nostre finalità non è importante), si suggerisce di assegnare un tasto di scelta rapida all´icona del programma presente su desktop (cliccare di destro col mouse sull´icona, selezionare dal menu la voce Proprietà, scegliere il campo Tasto di scelta rapida e premere la sequenza di tasti che si vuole assegnare, esempio Ctrl+Alt+J) in modo da attivare il programma quando si è nella pagina che si vuole testare e da richiuderlo appena finito il test.

RSS definisce una struttura adatta a contenere un insieme di notizie, ciascuna delle quali sarà composta da vari campi (nome autore, titolo, testo, riassunto, ...). Quando si pubblicano delle notizie in formato RSS, la struttura viene aggiornata con i nuovi dati; visto che il formato è predefinito, un qualunque lettore RSS potrà presentare in una maniera omogenea notizie provenienti dalle fonti più diverse."

RSS per le Notizie

RSS 1

<?xml version="1.0" encoding="ISO-8859-1" ?>
  <!DOCTYPE rdf:RDF (View Source for full doctype...)>
- <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:robots="http://regione.emilia-romagna.it/rss/1.0/modules/robots/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns="http://purl.org/rss/1.0/">
- <channel rdf:about="http://www.emiliaromagnasociale.it/">
  <title>Emilia-Romagna Sociale Notizie</title>
  <link>http://www.emiliaromagnasociale.it</link>
  <description>Notizie sulle politiche sociali in Emilia-Romagna</description>
  <dc:publisher>Regione Emilia-Romagna</dc:publisher>
  <dc:rights>Copyright © Regione Emilia-Romagna</dc:rights>
  <dc:date>2008-02-08</dc:date>
  <sy:updatePeriod>daily</sy:updatePeriod>
  <sy:updateFrequency>1</sy:updateFrequency>
  <sy:updateBase>2008-02-08</sy:updateBase>
- <items>
- <rdf:Seq>
  <rdf:li resource="http://www.emiliaromagnasociale.it/..../08_donnecongo.htm" />
  <rdf:li resource="http://www.emiliaromagnasociale.it/.../08_cioccolatopuro.htm" />
  <rdf:li resource="http://www.emiliaromagnasociale.it/.../07_minimondi.htm" />
... prosegue la lista degli articoli ...
  </rdf:Seq>
  </items>
  </channel>
<item rdf:about="http://www.emiliaromagnasociale.it/.../08_donnecongo.htm">
<title><![CDATA[  Obiettivo Congo, fotografie in mostra  ]]></title>
  <link>http://www.emiliaromagnasociale.it/.../08_donnecongo.htm</link>
 <description><![CDATA[  Volti e mani femminili al centro dell'esposizione organizzata da Maendeleo-Italia onlus]]></description>
  <dc:publisher>Regione Emilia-Romagna</dc:publisher>
  <dc:rights>Copyright © CRC Regione Emilia-Romagna</dc:rights>
  <dc:date>2008-02-08</dc:date>
- <robots:fulltext>
- <content:encoded>
- <![CDATA[  <h2>Obiettivo Congo, fotografie in mostra</h2> <p><strong> 08/02/2008</strong> <br /> Parma </p>]]>
  </content:encoded>
  </robots:fulltext>
  </item>
.... prosegue il resto dell'RSS

RSS 2

<?xml version="1.0" encoding="ISO-8859-1" ?>
 
<rss version="2.0">
<channel>
 <title>Emilia-Romagna Sociale Notizie</title>
 <link>http://www.emiliaromagnasociale.it/</link>
 <description>Notizie sulle Politiche sociali dell'Emilia-Romagna</description>
 <language>it</language>
 <category>politiche sociali</category>
 <pubDate>Fri, 08 Feb 2008 00:00:00 GMT</pubDate>
 <lastBuildDate>Fri, 08 Feb 2008 00:00:00 GMT</lastBuildDate>
 <managingEditor>infosociale@emiliaromagnasociale.it</managingEditor>
 <webMaster>emiranda@regione.emilia-romagna.it</webMaster>
 <item>
   <category><![CDATA[ Associazionismo ]]></category>
   <title><![CDATA[ Obiettivo Congo, fotografie in mostra ]]></title>
   <link>http://www.emiliaromagnasociale.it/.../08_donnecongo.htm</link>
   <description><![CDATA[ Volti e mani femminili al centro dell'esposizione organizzata da Maendeleo-Italia onlus ]]></description>
   <pubDate>Fri, 08 Feb 2008 00:00:00 GMT</pubDate> 
 </item>
.... prosegue il resto dell'RSS

RSS per gli Appuntamenti

Nel caso di un appuntamento, negli RSS 1 vengono aggiunti due elementi startdate e enddate ad ogni item.

RSS 1

...
<dc:rights>Copyright © Regione milia-Romagna</dc:rights>
  <dc:date>2008-03-12</dc:date>
  <event:startdate>2008-03-12</event:startdate>
  <event:enddate>2008-03-12</event:enddate>
<robots:fulltext>
...

Collegare gli RSS ai siti Web

I browser di ultima generazione sono in grado di leggere direttamente i formati RSS. Consigliamo quindi di collegare direttamente alle pagine web, i feed RSS, semplicemente aggiungendo alla testata (head) del codice simile a questo:

<link rel="alternate" type="application/rss+xml" title="ERMES Regione Emilia-Romagna - Notizie" href="/wcm/ERMES/ermes_rss2_news.xml" />

Prima di pubblicare le proprie pagine, ciascun fornitore deve controllare con cura tutti i file, i collegamenti ipertestuali (soprattutto se sono stati rinominati o eliminati documenti e immagini), eliminare i file obsoleti, rimuovere quelli di appoggio, controllare che vi sia sempre almeno il ritorno alla home page, che i credits dei documenti siano aggiornati, e quant´altro verrà di seguito specificato. La responsabilità del rispetto di tali punti di controllo compete al Responsabile del Sito, come anche l´eventuale Dichiarazione di Conformità rispetto all´accessibilità. Ove la redazione del sito non disponga di risorse adeguate, sarà possibile concordare con il Servizio Sistema Informativo - Informatico Regionale il supporto nella fase di validazione. Quando le pagine vengono pubblicate tramite il servizio di Pubblicaweb, il controllo di coerenza con le presenti Linee Guida viene effettuato anche da Pubblicaweb prima della pubblicazione.

Elenco delle verifiche da eseguire su tutte le pagine web

• il codice XHTML Strict 1.0 (o superiore) e CSS siano validi e sia specificata la lingua del documento
• non ci siano elementi <frame> o <iframe> o mappe immagine lato server;
• ci sia almeno uno skip-link al contenuto se sono presenti menù o altri elementi fissi nella pagina;
• ogni etichetta sia associata esplicitamente al campo a cui si riferisce (<label for>);
• le tabelle di dati siano marcate correttamente (<th>, headers);
• immagini, mappe immagine lato client, audio e video abbiano un alternativo corretto e commisurato alla funzione.

• tutti i contrasti di colore siano a norma;
• il testo si ingrandisca (su IE5 o 6 anche all’interno dei campi);
• la pagina sia navigabile a 800x600 caratteri grandi su IE6 senza che appaia la barra di scorrimento orizzontale e lo sia anche disattivando il CSS;
• la pagina sia stampabile, anche in bianco e nero, senza perdita di informazioni;
• le etichette o i bottoni siano vicini ai campi o ai dati a cui si riferiscono;
• i link siano univoci, chiari e significativi;
• i <title> delle pagine corrispondano al contenuto; e il percorso (molliche di pane) sia corretto;
• tutto ciò che appare come titolo o lista sia marcato come tale (h1, ..., h4 e <ul>, <ol> ,<li>);
• le tabelle usate per impaginare siano al massimo una e comprensibile se letta “linearizzata”;
• non ci siano immagini, audio o video in movimento o il cui movimento non sia controllabile dall’utente.
• Sia presente il logo della Regione collegato alla home del portale istituzionale http://www.regione.emilia-romagna.it

• ogni elemento sia raggiungibile navigando con la sola tastiera (TAB);
• ogni azione sia possibile con l’uso della sola tastiera;
• l’aggiornamento dei contenuti sia lasciato all’utente;
• non venga generato dinamicamente del contenuto, ma sia ricaricata la pagina
• l’applicazione funzioni in modo equivalente anche con script o applet disabilitate (validazione, redirect, nuove finestre);
• non sia previsto un tempo massimo per svolgere delle azioni;
• le applet siano direttamente accessibili (cfr Allegato D D.M 8/7/2006 ). 

• Intestazioni: Struttura> Intestazioni
  oppure da Struttura> Struttura delle intestazioni
• Liste: Struttura> Elementi di lista

• Codice CSS (per pagine on-line): Controlla> Validatore CSS del W3C > Valida il CSS
• Semantica ed equivalenza di contenuti o funzioni: CSS > Disabilita il CSS
  la pagina deve essere ugualmente comprensibile, ciò che è titolo deve ad esempio averne l'aspetto anche con gli stili disabilitati
• Fogli di stile esterni: CSS > Disabilita gli stili inline
  la pagina deve mantenere lo stesso aspetto
• Stile per la stampa: CSS > Visualizza i(l) Fogli(o) di Stile
  in aggiunta è consigliato sempre stampare le pagine per verificare la qualità del sito anche su carta (non è necessario che l'aspetto sia il medesimo che a video, solo che il contenuto sia correttamente stampato e l'immagine coerente con le pagine a video)
• Dimensioni relative dei caratteri: CSS > Visualizza i(l) Fogli(o) di Stile
  è necessario controllare gli stili a mano o verificare sperimentalmente se testi e campi dei form effettivamente si ingrandiscono (occorre Internet Explorer 6 o precedenti)
• Dimensioni della pagina: Ridimensiona > 800x600
  occorre anche verificare che su Internet Explorer il carattere sia impostato su grande (Visualizza> Impostazioni > Carattere> Grande) e che a questa risoluzione  la pagina sia fruibile senza sovrapposizioni di testi

• Presenza Frames: Frame > Bordi dei frame
• Titoli, nomi e elemento NOFRAMES: Frame > Name/Title dei frames
  

• Dalla barra dell'accessibilità 2.0 scegliete:
  Ridimensiona> 800x600
  Impostate i caratteri su grande (Internet Explorer 6: Visualizza> Carattere> Grande)
  Se leggete tutto correttamente e non ci sono sovrapposizioni tali da rendere il contenuto incomprensibile, il livello di accessibilità è accettabile
• Verificate che nei fogli di stile non siano definite dimensioni dei font in px

Una verifica manuale anche senza strumenti particolari si può effettuare con Internet Explorer: sulle zone sensibili delle mappe immagini correttamente marcate, appare un "fumetto" contentente l'alternativo testuale

1. Verificare che esista almeno un'alternativa accessibile con il browser testuale Lynx per navigare la pagina.
2. Utilizzare la pagina per verificare che funzioni correttamente con i seguenti browser (pari al 96% degli user agent che visitano il sito ERMES da gennaio 2007) anche su sistemi operativi diversi ove possibile:
   
   • Microsoft Internet Explorer 7.x per Windows XP o Vista 
   • Microsoft Internet Explorer 6.x per Windows XP o 2000 
   • Mozilla Firefox 2.x su Windows/OsX/Linux
   • Apple Safari 2.x per OSX o 3 per Windows/OSX
   • Opera 9 per Windows/OsX/Linux
3. Utilizzare la pagina con la sola tastiera

Alcune verifiche possono essere fatte con la barra dell'accessibilità (versione 2.0) , controllando:

• Fruibilità in assenza di applet: IE > Attiva/Disattiva ActiveX
• Fruibilità in assenza di Javascript: IE > Attiva/Disattiva Javascript
• Presenza di popup: Informazioni > Javascript / Link in nuove finestre
  Verranno evidenziati i link in nuove finestre per facilitarne la verifica

• Linearizzazione: Tabelle > Linearizza
  per capire se il contenuto ha ancora senso una volta tolte le strutture che gli danno forma
• Intestazioni: Tabelle > Intestazioni di tabella
  per verificare che non siano state marcate le intestazioni
  

• Link significativi: Informazioni > Visualizza i link [nuova finestra]
  apparirà una lista in cui sarà semplice capire se il testo dei link ha senso quando letto fuori dal contesto.
• Selezione da tastiera: Struttura > Ordine di tabulazione
  verrà mostrato un numero corrispondente all'ordine, verificare che ogni link abbia un numero e che la numerazione segua una sequenza logica.
• Link attivi (on-line): Controlla > Controllo dei link del W3C > Controlla la pagina corrente
  Verificare che tutti i link siano funzionanti.

• Alternativi: Immagini > Rimuovi immagini
  per verificare che tutte le immagini che veicolano informazioni o hanno una funzione abbiano il corretto testo alternativo
• Immagini in movimento: Immagini > Test frequenza GIF animate
  verranno segnalate le eventuali immagini in movimento e quelle che per il loro lampeggiamento, potrebbero causare problemi a chi soffre di epilessia fotosensibile (solo per pagine on-line)

• Colore: Colore > Scala di grigi
  per verificare che tutte le informazioni siano veicolate anche in modo alternativo al colore (es. campi obbligatori, segnali di errore,...) 
• Contrasti: Colore > Contrast Analyser (applicazione)
  tramite l'applicazione che si aprirà, è possibile selezionare colore di sfondo e colore del testo in primo piano. E' necessario che tra i due colori ci sia una sufficiente "Differenza di colore" (vedi l'immagine di esempio)

• Pagine on-line: Tools > Validate HTML
• Pagine off-line: Tools > Validate local HTML

• Codice (per pagine on-line): Controlla> Validatore HTML del W3C > Valida l'HTML
• Codice (per pagine off-line): Controlla> Validatore HTML WDG> Valida l'HTML
• DTD: Informazioni > Visualizza il DOCTYPE
• Lingua: Informazioni > Visualizza gli attributi LANG
• Skip-link: Informazioni > Visualizza i link [nuova finestra]
  oppure da CSS >Disabilita il foglio di stile
• Accesskey: Struttura> Accesskey
• Intestazioni: Struttura> Intestazioni
  oppure da Struttura> Struttura delle intestazioni
• Liste: Struttura> Elementi di lista