1 Progettazione e realizzazione sito web di Francesca Tomasi linee guida del Manuale per la Qualità...
-
Upload
giorgina-zani -
Category
Documents
-
view
215 -
download
1
Transcript of 1 Progettazione e realizzazione sito web di Francesca Tomasi linee guida del Manuale per la Qualità...
1
Progettazione e realizzazione sito web
di Francesca Tomasi
linee guida del Manuale per la Qualità dei siti Web pubblici culturali e i Principi
europei per la qualità di un sito Web culturale, elaborati nell'ambito del Progetto europeo MINERVA
http://www2.classics.unibo.it/Tomasi
2
Gli aspetti della progettazione
1. Architettura
2. Comunicazione
3. Gestione
4. Accessibilità
5. Usabilità
6. Interoperabilità
7. Copyright
3
1. ArchitetturaOrganizzazione del sito nelle sue pagine: come si
articola e da che elementi è costituito.
La struttura del sito è strettamente connessa alla navigazione: l’una non può prescindere dall’altra.
L’architettura di base di un sito Web è gerarchica: da una home page di possono raggiungere pagine di secondo, terzo, quarto livello ecc.
Homepage A (primo livello)
A1 (secondo livello)
A2 (secondo livello)
B (primo livello) C (primo livello)
C1 (secondo livello) C1.1 (terzo
livello) C2 (secondo livello)
C2.1 (terzo livello)
Homepage A (primo livello)
A1 (secondo livello)
A2 (secondo livello)
B (primo livello) C (primo livello)
C1 (secondo livello) C1.1 (terzo
livello) C2 (secondo livello)
C2.1 (terzo livello)
4
Elementi dell’architettura
1.1. Strumenti di navigazione 1.2. Elementi della pagina 1.3. Foglio di stile 1.4. Immagini digitali
5
1.1. Strumenti di navigazione Gli strumenti di navigazione sono importanti
in un sito, almeno quanto i contenuti. Il loro scopo è:– Fornire all’utente un'idea dei contenuti del sito – Dare un'idea di come è costruito e strutturato il
sito, per potervisi orientare. Gli elementi chiave della navigazione sono:
– A. Metanavigazione– B. Navigazione principale– C. Navigazione secondaria– D. Briciole di pane
6
Un esempio
7
A. Metanavigazione
Sezione della pagina in cui vengono messi a disposizione dell'utente strumenti di aiuto pronti all'uso, con elementi per la comunicazione e le funzionalità generali.
Tutti gli elementi della metanavigazione dovrebbero essere raggruppati nello stesso punto in modo da dare l'idea di un blocco unico, in ogni pagina e in modo "visibile".
8
B. Navigazione principale La barra di navigazione è uno dei componenti più
importanti della pagina perché consente all’utente di avere una percezione chiara dei contenuti e di navigare la struttura senza perdersi. Per questo è importante che:
l’utente possa ricordarne facilmente il contenuto e perciò: – il numero di elementi che la costituiscono non deve
superare sei o sette. Questo è il limite comunemente riconosciuto alla capacità umana di memoria breve;
– gli elementi devono avere un nome significativo che evochi immediatamente i contenuti della destinazione. Per maggiore chiarezza si può aggiungere informazione (frase descrittiva) ad ogni elemento, attraverso la piccola finestra che appare al passaggio del mouse sul collegamento.
– gli elementi devono essere presentati in forma di lista reale cioè costituita da testo e non da immagini.
la sua posizione sia sempre la stessa in tutte le pagine.
9
È un sistema di navigazione secondario (indice) separato da quello di navigazione principale, che comprende solo la lista delle sotto sezioni in cui è suddivisa la singola area.
C. Navigazione secondaria
10
Navigazione contestuale Sistema di navigazione che collega concettualmente un
documento ad un insieme più vasto di documenti, come a formare un dossier tematico. La navigazione contestuale è posizionata nella parte destra del corpo della Struttura della pagina e presenta i collegamenti a tutti i documenti costituenti il dossier. I documenti possono essere: – documenti di testo – documenti multimediali – collegamenti a siti esterni;
Il menù della navigazione contestuale sarà perciò comune a tutti i documenti del dossier (se appartenenti al sito) e sarà visivamente e graficamente riconducibile al testo centrale del documento corrente.
11
D. Briciole di paneLa briciole di pane indicano all’utente in quale punto
della struttura egli si trova durante la navigazione dei diversi livelli in cui è organizzato il sito.
Costituiscono un sistema di navigazione che permette all’utente saltare a punti precedenti il percorso seguito senza dover ricorrere all’uso ripetuto del tasto “Indietro”, attraverso questo sistema di navigazione egli percepisce la struttura dell’informazione costruendosi una mappa mediante l’associazione della tipologia di un tipo di documento al percorso effettuato per rintracciarlo.
12
Briciole di pane / 2La briciole di pane mostrano il percorso dalla Home
page alla pagina correnteHome > Sezione > Sotto-sezione > Pagina corrente
in cui Home è il riferimento alla home page e Sezione, Sotto sezione e Pagina Corrente sono rispettivamente i titoli della sezione, della sotto-sezione e della pagina corrente.
Il percorso mostra la posizione della pagina corrente rispetto alla struttura del sito.
Gli elementi del percorso sono collegamenti attivi. Pagina corrente, al contrario, non deve essere un collegamento, nel rispetto della regola generale che considera un grave errore la presenza di collegamenti alla pagina corrente.
La separazione dei vari punti del percorso viene mostrata con il carattere > (simbolo “maggiore di”).
13
Briciole di pane / 3 I nomi utilizzati per scandire il percorso devono
essere quelli significativi (Home page a parte, che è ormai entrato nell’uso comune): tipicamente per aree e sezioni si usa il nome che compare nella navigazione principale (sezione) e nella navigazione secondaria (sotto-sezione).
Per indicare la pagina corrente è bene utilizzare il suo titolo (page title).Il percorso può essere inserito all’inizio (prima riga, allineata a sinistra) della zona contenuto della struttura di pagina.
Il percorso deve essere realizzato mediante testo, e non con una immagine né con immagini tipo freccette o elementi grafici vari: ne va della leggibilità e della accessibilità.
14
1.2. Elementi della pagina
La struttura della pagina generalmente è composta da quattro zone distinte:– la testata
– il corpo
– la barra di navigazione
– piè di pagina
15
Un esempio
copyright del sito Web, ossia il marchio corredato dall’indicazione del titolare del diritto d’autore e dell’anno a cui esso risale, la dichiarazione di responsabilità, la data di creazione della pagina, la data dell’ultimo aggiornamento e l’URL della pagina
elementi distintivi dell’identità del sito (logo, denominazione ecc.). In essa sono compresi elementi di servizio quali la metanavigazione.
Quando si utilizzano immagini per la realizzazione dell’intestazione, come il logo nel prototipo, queste devono essere corredate di adeguata descrizione testuale.
16
1.3. Fogli di stile CSS è l’acronimo di Cascading Style Sheets (= Fogli
di stile a cascata). Si tratta di un linguaggio per la definizione delle
caratteristiche di presentazione di una pagina. Ad esempio consente di definire il formato dei caratteri, la loro dimensione, i colori, i margini ecc.
Ciò che con HTML non si poteva fare, può essere fatto con i fogli di stile, proprio come quando si utilizza un word processor. Basterà fare una modifica al foglio di stile e la modifica verrà applicata a tutte le pagine del sito.
La prima specifica ufficiale di CSS (CSS1) risale al 1996, la seconda CSS2 al 1998. E' alla fase di Working Draft la nuova specifica CSS3.
17
1.4. Immagini digitali Risoluzione: rapporto tra dimensioni e qualità visiva
dell’immagine che comprende due aspetti: – quantità di punti che compone effettivamente l’immagine e che si
misura in pixel; – densità dei punti nella visualizzazione o stampa, che si misura in
DPI (dots per inch, punti per pollice);
Profondità di colore: numero massimo di colori possibili, che si misura in bit (8 bit = 256 colori, 16 bit = 65.000 colori, 24 bit = milioni di colori);
Formato o compressione: formato di salvataggio o codifica del file. Alcuni formati consentono di comprimere
i dati, ottenendo file di dimensioni ridotte.
18
Immagini digitali: formati Tre sono i formati di compressione delle immagini,
utilizzati nel Web:
– Il formato GIF
– Il formato JPEG
– Il formato PNG Attenzione a non inserire immagini troppo pesanti; Evitare di sovraccaricare la pagina con troppe immagini.
Ancora oggi la maggior parte degli utenti naviga ancora con un modem analogico da 56 Kbs: inserire troppe immagini significa dunque creare pagine lente da caricare.
Salvare le immagini nelle dimensioni desiderate a 72 DPI. Usare i thumbnails Usare l’attributo alt nel tag <img>
19
Formato GIF
Graphic Interchange Format usa una forma di compressione che mantiene inalterata
la qualità dell'immagine, ovvero riduce le dimensioni del file senza pregiudicare la qualità grafica dell'immagine. La profondità dei colori delle immagini GIF è di 8 bit, che consente di usare una tavolozza di 256 colori. Meno colori si usano e maggiori saranno le possibilità di compressione, ovvero minori saranno le dimensioni del file. La stragrande maggioranza delle immagini sul web è in questo formato ed è supportato da tutti i browser web.
20
Formato JPEG
Joint Photographic Expert Group
viene utilizzato di frequente per ridurre le dimensioni dei file grafici. A differenza delle immagini GIF, le immagini JPEG sono policrome (24 bit, o 16,8 milioni di colori). Si può scegliere il grado di compressione che si desidera applicare a un'immagine in formato JPEG, determinando in tal modo la qualità dell'immagine.
Più si comprime un'immagine con il formato JPEG, più si riduce la qualità. Dopo aver convertito un'immagine in formato JPEG, non è più possibile recuperare la qualità dell'immagine originale.
21
Formato PNGPortable Network Graphies
è stato sviluppato appositamente per il Web. Questo formato senza perdita di informazioni comprime le immagini a 8 bit producendo file di dimensioni inferiori rispetto a GIF.Il formato PNG consente di incorporare del testo per offrire la possibilità di eseguire ricerche sulle immagini; è infatti possibile memorizzare nel file dell'immagine una stringa che identifica l'immagine stessa.
22
2. Comunicazione Siti Web di qualità devono presentare un’adeguata
comprensibilità e chiarezza comunicativa combinando contenuti e design in modo da rendere la navigazione dell’utente efficiente, efficace e soddisfacente.
All’adeguatezza e correttezza tecnica (pagine veloci da scaricare, grafica coerente alla navigazione e ai contenuti, adeguato contrasto tra il contenuto informativo e lo sfondo) va ad affiancarsi l’esigenza di rendere i contenuti comprensibili a tutti i cittadini, comprendendo anche la fascia di utenti “deboli” e rendendo disponibile l’informazione anche attraverso differenti canali sensoriali.
23
Gli elementi della comunicazione
Web design Uso del colore
Tabelle di campioni colori HTML con valori esadecimalihttp://www.asciitable.it/colorihtml.asphttp://www.italysoft.com/utility/converters/colori-sicuri.html#http://www.web-link.it/html/colori256.htm
Stile dello scrivere
24
Regole per scrivere sul Web / 1
adottare uno stile chiaro e conciso che renda la pagina leggibile come una mappa, costruire percorsi chiari, attraverso una struttura a paragrafi ben precisa: titoli, sottotitoli, testi brevi, spazi bianchi, indici.
25
Regole per scrivere sul Web / 2
adottare una presentazione (layout) coerente in tutto il sito, come ad esempio l’uso dei titoli (h1, h2, h3) per indicare i paragrafi rispettando la loro sequenza gerarchica in ciascuna pagina.
26
Regole per scrivere sul Web / 3
fare attenzione all’uso del grassetto, delle maiuscole, della punteggiatura o degli spazi per enfatizzare il testo
27
Regole per scrivere sul Web / 4
adottare l'ordine della "piramide invertita" nella proposizione dei contenuti, ovvero presentare prima la “sintesi” per scendere via via verso maggiori dettagli
28
Regole per scrivere sul Web / 5
usare l'ipertesto per "stratificare" le informazioni su più livelli
29
Regole per scrivere sul Web / 6
scrivere periodi semplici e brevi e comporre testi lunghi la metà di quelli concepiti per la carta
30
Regole per scrivere sul Web / 7evitare se possibile l’uso dello scrolling;
quando necessario i titoli dei contenuti devono trovarsi tutti al principio della pagina.
31
Regole per scrivere sul Web / 8fare attenzione alla punteggiatura che in
taluni casi potrebbe essere letta in maniera errata dagli screen readers, per esempio il trattino viene letto come segno meno.
Per approfondire: Il mestiere di scrivere: scrivere per il Web;
Web writing secondo Nielsenhttp://www.mestierediscrivere.com/testi/webwriting.htm
32
3. GestioneLa qualità di un sito dipende molto da come ne
viene effettuata la manutenzione.Un sito ben gestito deve essere: sempre attivo e disponibile; adeguatamente monitorato; costantemente migliorato; aggiornato con continuità, verificando
periodicamente l’operatività dei link. Deve essere consentita l’interazione con
l’utenza. È consigliabile effettuare statistiche sugli
accessi al sito.
33
Elementi di gestione Denominazione di file e cartelle
– attribuire nomi di senso compiuto: (esempio: non 01.htm ma museo.html);
– non usare MAIUSCOLE: ogni file deve contenere solo caratteri minuscoli
– niente spazi tra i caratteri; – se ci sono più versioni o bozze di un documento inserire la
data nel nome del file (esempio: programma04-06-01), utilizzando sempre uno stesso metodo per la definizione della data (esempio: aa-mm-gg).
Archiviazione pagine – applicare la cosiddetta tecnica del “rename di
archiviazione”. Ogni volta che una pagina viene modificata e rimessa in linea, la pagina vecchia verrà rinominata, associando al nome del file la data della modifica e inserendo il file in un’apposita directory
Registrazione del dominio – http://www.domini.it
34
4. AccessibilitàRecita il Manuale per la qualità dei siti Web
pubblici, culturali:Un sito Web è accessibile quando:
– il suo contenuto informativo, – le sue modalità di navigazione – tutti gli elementi interattivi eventualmente presenti
sono fruibili dagli utenti indipendentemente dalle loro disabilità, indipendentemente dalla tecnologia che essi utilizzano per accedere al sito e indipendentemente dal contesto in cui operano mentre accedono al sito.
35
Accessibilità – le risorse Web Linee guida della Web Accessibility Initiative
(WAI) del World Wide Web Consortium (W3C).
Requisiti per l'accessibilità definiti nello Studio sulle linee guida recanti i requisiti tecnici e i diversi livelli per l'accessibilità e le metodologie tecniche per la verifica dell'accessibilità, considerato la base tecnica del decreto emanato l'8 agosto 2005, come prescritto dalla Legge n. 4 del 9 gennaio 2004 Disposizioni per favorire l'accesso dei soggetti disabili agli strumenti informatici (c.d. Legge Stanca)
36
5. UsabilitàDal Manuale per la qualità dei siti Web pubblici, culturali: Far percepire i contenuti
1.1 Riconoscere di essere in un sito che è un’WAI 1.2 Riconoscere gli scopi del sito 1.3 Farsi una idea sul contenuto generale del sito, per poter poi eventualmente accedere ai particolari 1.4 Poter fruire di contenuti di qualità
Presentare i contenuti1.5 Layout funzionale 1.6 Elementi grafici funzionali 1.7 Elementi multimediali funzionali
Far navigare il sito 1.8 Chiarezza dei link 1.9 Validità dei link 1.10 Copertura dei link 1.11 Validità dei percorsi all’indietro 1.12 Chiarezza del contesto rispetto al sito1.13 Validità del controllo sui media 1.14 Chiarezza del controllo sui media
Far effettuare ricerche 1.15 Comprensibilità dei moduli di ricerca1.16 Comprensibilità dei risultati delle ricerche1.17 Navigabilità dei risultati delle ricerche
37
6. Interoperabilità l’interoperabilità tecnica, concernente problemi
tecnici di collegamento tra sistemi, la definizione delle interfacce, il formato dei dati e i protocolli, comprese le telecomunicazioni;
l’interoperabilità semantica, che assicura che il significato esatto delle informazioni scambiate sia comprensibile da qualsiasi altra applicazione, anche non pensata inizialmente per quel determinato scopo;
l’interoperabilità gestionale, che modella i processi di lavoro, allineando le architetture dell'informazione con gli obiettivi dell'organizzazione, e aiuta i processi di business nella cooperazione”.
38
XML per l’interoperabilitàObiettivo è quello della realizzazione del Semantic
Web, una prospettiva di “estensione dell’attuale Rete nella quale l’informazione sia fornita con significati ben definiti, maggiormente in grado di abilitare persone e computer a lavorare in cooperazione” (Tim Berners Lee - James Hendler - Ora Lassila. The Semantic Web, “Scientific American”, maggio 2001).
«Il Web Semantico è la rappresentazione di dati sul WWW. È basato sul Resource Description Framework (RDF), che integra una varietà di applicazioni che usano XML per la sintassi e le URL per le denominazioni» (http://www.w3c.org/2001/sw).
39
Gli elementi dell’interoperabilità
Metadati– informazioni, generalmente strutturate e
suddivise in campi, relative a documenti a testo completo che ne consentono un recupero e gestione più efficienti
Multilinguismo– realizzazione di risorse e contenuti in più
lingue
40
I MetadatiDal punto di vista funzionale i metadati possono
appartenere a due tipologie: metadati descrittivo-semantici (MDS), che servono a
identificare e e recuperare documenti primari. Sono descrizioni normalizzate di questi documenti e dei loro contenuti semantici;
metadati amministrativo-gestionali (MAG), necessari per la gestione della struttura. Essi fanno riferimento alle procedure di archiviazione e gestione dei documenti. I MAG possono essere ulteriormente suddivivi in: – metadati tecnici – metadati per la conservazione – metadatiper la fruizione
41
I Metadati / 2 Per facilitare la ricerca dei documenti è
indispensabile associare la pagina Web a un adeguato insieme di metadati standardizzati, in vista della massima interoperabilità interna ed esterna.
I metadati relativi ai documenti digitali possono provenire da:
i documenti primari stessi, utilizzando l’auto-catalogazione effettuata da autori ed editori o da gruppi di lavoro creati appositamente, che individuano i set di metadati in funzione della rintracciabilità e identificazione del museo e della sua attività
il lavoro di professionisti dell’indicizzazione software automatici che associano metadati al
documento
42
I Metadati / 3Schemi di metadati cui fare riferimento: Dublin Core, una serie di 15 elementi descrittivo-
semantici (titolo; autore o creatore; soggetto, classe o parole chiave; abstract, indice o altri generi di descrizione del contenuto; editore; eventuali ulteriori responsabili; data; tipo di risorsa; formato dei dati; URL, ISBN, DOI o altro identificatore; fonte di provenienza; lingua; relazioni con altri documenti; copertura spaziale e/o temporale; indicazioni sul copyright) elaborati da un consorzio internazionale per consentire una descrizione minima di qualsiasi tipo di risorsa digitale;
MAG dell’ICCU, elaborati da un apposito gruppo di studio per standardizzare i metadati necessari alla gestione dei documenti digitalizzati nell’ambito del progetto Biblioteca Digitale Italiana;
DOI (digital object identifier), creato in ambiente editoriale, è una specie di ISBN fornito a pagamento da agenzie coordinate a livello internazionale.
43
7. CopyrightSicurezza dei beni culturali:
– profilo della salvaguardia – conservazione preventiva, – sicurezza dei contenuti.
Precauzioni elementari: corredare la pubblicazione di contenuti in rete di una
nota (copyright notice) che espliciti – diritti che gravano sul materiale e i loro detentori – trattamenti dell’informazione consentiti e quali vietati; – per le immagini pubblicazione in rete alla bassa risoluzione.
Si può proteggere ulteriormente il copyright ricorrendo a misure tecnologiche (filigrana elettronica o watermarking, fingerprinting, criptazione delle immagini con distribuzione delle relative chiavi solo agli utenti registrati).
44
Copyright /2Per saperne di più2004-06-15. Gruppo di lavoro italiano
"Problemi connessi alla tutela dei dati e dei diritti di proprietà intellettuale in relazione all'accessibilità in rete del patrimonio culturale". Tutela dei dati e dei diritti di proprietà intellettuale in relazione all'accesso in rete al patrimonio culturale. Prime considerazioni. Working paper. Vers. 1.0