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