La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

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.

Presentazioni simili


Presentazione sul tema: "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."— Transcript della presentazione:

1

2 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 MINERVAManuale per la Qualità dei siti Web pubblici culturaliPrincipi europei per la qualità di un sito Web culturale

3 2 Gli aspetti della progettazione 1. Architettura 2. Comunicazione 3. Gestione 4. Accessibilità 5. Usabilità 6. Interoperabilità 7. Copyright

4 3 1. Architettura Organizzazione del sito nelle sue pagine: come si articola e da che elementi è costituito. La struttura del sito è strettamente connessa alla navigazione: luna non può prescindere dallaltra. Larchitettura 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)

5 4 Elementi dellarchitettura n 1.1. Strumenti di navigazione n 1.2. Elementi della pagina n 1.3. Foglio di stile n 1.4. Immagini digitali

6 Strumenti di navigazione n Gli strumenti di navigazione sono importanti in un sito, almeno quanto i contenuti. Il loro scopo è: –Fornire allutente un'idea dei contenuti del sito –Dare un'idea di come è costruito e strutturato il sito, per potervisi orientare. n Gli elementi chiave della navigazione sono: –A. Metanavigazione –B. Navigazione principale –C. Navigazione secondaria –D. Briciole di pane

7 6 Un esempio

8 7 A. Metanavigazione n 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. n 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".

9 8 B. Navigazione principale n La barra di navigazione è uno dei componenti più importanti della pagina perché consente allutente di avere una percezione chiara dei contenuti e di navigare la struttura senza perdersi. Per questo è importante che: n lutente 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. n la sua posizione sia sempre la stessa in tutte le pagine.

10 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

11 10 Navigazione contestuale n 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; n 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.

12 11 D. Briciole di pane La briciole di pane indicano allutente 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 allutente saltare a punti precedenti il percorso seguito senza dover ricorrere alluso ripetuto del tasto Indietro, attraverso questo sistema di navigazione egli percepisce la struttura dellinformazione costruendosi una mappa mediante lassociazione della tipologia di un tipo di documento al percorso effettuato per rintracciarlo.

13 12 Briciole di pane / 2 La briciole di pane mostrano il percorso dalla Home page alla pagina corrente Home > 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. n Il percorso mostra la posizione della pagina corrente rispetto alla struttura del sito. n 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. n La separazione dei vari punti del percorso viene mostrata con il carattere > (simbolo maggiore di).

14 13 Briciole di pane / 3 n I nomi utilizzati per scandire il percorso devono essere quelli significativi (Home page a parte, che è ormai entrato nelluso comune): tipicamente per aree e sezioni si usa il nome che compare nella navigazione principale (sezione) e nella navigazione secondaria (sotto-sezione). n Per indicare la pagina corrente è bene utilizzare il suo titolo (page title). Il percorso può essere inserito allinizio (prima riga, allineata a sinistra) della zona contenuto della struttura di pagina. n 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à.

15 Elementi della pagina n La struttura della pagina generalmente è composta da quattro zone distinte: –la testata –il corpo –la barra di navigazione –piè di pagina

16 15 Un esempio copyright del sito Web, ossia il marchio corredato dallindicazione del titolare del diritto dautore e dellanno a cui esso risale, la dichiarazione di responsabilità, la data di creazione della pagina, la data dellultimo aggiornamento e lURL della pagina elementi distintivi dellidentità del sito (logo, denominazione ecc.). In essa sono compresi elementi di servizio quali la metanavigazione. Quando si utilizzano immagini per la realizzazione dellintestazione, come il logo nel prototipo, queste devono essere corredate di adeguata descrizione testuale.

17 Fogli di stile n CSS è lacronimo di Cascading Style Sheets (= Fogli di stile a cascata). n 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. n 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. n La prima specifica ufficiale di CSS (CSS1) risale al 1996, la seconda CSS2 al E' alla fase di Working Draft la nuova specifica CSS3.CSS1CSS2CSS3

18 Immagini digitali n Risoluzione: rapporto tra dimensioni e qualità visiva dellimmagine che comprende due aspetti: –quantità di punti che compone effettivamente limmagine e che si misura in pixel; –densità dei punti nella visualizzazione o stampa, che si misura in DPI (dots per inch, punti per pollice); n Profondità di colore: numero massimo di colori possibili, che si misura in bit (8 bit = 256 colori, 16 bit = colori, 24 bit = milioni di colori); n Formato o compressione: formato di salvataggio o codifica del file. Alcuni formati consentono di comprimere i dati, ottenendo file di dimensioni ridotte.

19 18 Immagini digitali: formati n Tre sono i formati di compressione delle immagini, utilizzati nel Web: –Il formato GIF –Il formato JPEG –Il formato PNG n Attenzione a non inserire immagini troppo pesanti; n 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. n Salvare le immagini nelle dimensioni desiderate a 72 DPI. n Usare i thumbnails n Usare lattributo alt nel tag

20 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.

21 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.

22 21 Formato PNG Portable 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.

23 22 2. Comunicazione n Siti Web di qualità devono presentare unadeguata comprensibilità e chiarezza comunicativa combinando contenuti e design in modo da rendere la navigazione dellutente efficiente, efficace e soddisfacente. n Alladeguatezza 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 lesigenza di rendere i contenuti comprensibili a tutti i cittadini, comprendendo anche la fascia di utenti deboli e rendendo disponibile linformazione anche attraverso differenti canali sensoriali.

24 23 Gli elementi della comunicazione n Web design n Uso del colore Tabelle di campioni colori HTML con valori esadecimali sicuri.html# sicuri.html# n Stile dello scrivere

25 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.

26 25 Regole per scrivere sul Web / 2 adottare una presentazione (layout) coerente in tutto il sito, come ad esempio luso dei titoli (h1, h2, h3) per indicare i paragrafi rispettando la loro sequenza gerarchica in ciascuna pagina.

27 26 Regole per scrivere sul Web / 3 fare attenzione alluso del grassetto, delle maiuscole, della punteggiatura o degli spazi per enfatizzare il testo

28 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

29 28 Regole per scrivere sul Web / 5 usare l'ipertesto per "stratificare" le informazioni su più livelli

30 29 Regole per scrivere sul Web / 6 scrivere periodi semplici e brevi e comporre testi lunghi la metà di quelli concepiti per la carta

31 30 Regole per scrivere sul Web / 7 evitare se possibile luso dello scrolling; quando necessario i titoli dei contenuti devono trovarsi tutti al principio della pagina.

32 31 Regole per scrivere sul Web / 8 fare 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 Nielsen

33 32 3. Gestione La qualità di un sito dipende molto da come ne viene effettuata la manutenzione. Un sito ben gestito deve essere: n sempre attivo e disponibile; n adeguatamente monitorato; n costantemente migliorato; n aggiornato con continuità, verificando periodicamente loperatività dei link. n Deve essere consentita linterazione con lutenza. n È consigliabile effettuare statistiche sugli accessi al sito.

34 33 Elementi di gestione n 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: programma ), utilizzando sempre uno stesso metodo per la definizione della data (esempio: aa-mm-gg). n 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 unapposita directory n Registrazione del dominio –http://www.domini.ithttp://www.domini.it

35 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.

36 35 Accessibilità – le risorse Web n Linee guida della Web Accessibility Initiative (WAI) del World Wide Web Consortium (W3C). Linee guida della Web Accessibility Initiative n 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) Studio sulle linee guida recanti i requisiti tecnici e i diversi livelli per l'accessibilità e le metodologie tecniche per la verifica dell'accessibilitàdecreto emanato l'8 agosto 2005Disposizioni per favorire l'accesso dei soggetti disabili agli strumenti informatici

37 36 5. Usabilità Dal Manuale per la qualità dei siti Web pubblici, culturali: n Far percepire i contenuti 1.1 Riconoscere di essere in un sito che è unWAI 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à n Presentare i contenuti 1.5 Layout funzionale 1.6 Elementi grafici funzionali 1.7 Elementi multimediali funzionali n Far navigare il sito 1.8 Chiarezza dei link 1.9 Validità dei link 1.10 Copertura dei link 1.11 Validità dei percorsi allindietro 1.12 Chiarezza del contesto rispetto al sito 1.13 Validità del controllo sui media 1.14 Chiarezza del controllo sui media n Far effettuare ricerche 1.15 Comprensibilità dei moduli di ricerca 1.16 Comprensibilità dei risultati delle ricerche 1.17 Navigabilità dei risultati delle ricerche

38 37 6. Interoperabilità n linteroperabilità tecnica, concernente problemi tecnici di collegamento tra sistemi, la definizione delle interfacce, il formato dei dati e i protocolli, comprese le telecomunicazioni; n linteroperabilità semantica, che assicura che il significato esatto delle informazioni scambiate sia comprensibile da qualsiasi altra applicazione, anche non pensata inizialmente per quel determinato scopo; n linteroperabilità 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.

39 38 XML per linteroperabilità Obiettivo è quello della realizzazione del Semantic Web, una prospettiva di estensione dellattuale Rete nella quale linformazione 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). n «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).http://www.w3c.org/2001/sw

40 39 Gli elementi dellinteroperabilità n Metadati –informazioni, generalmente strutturate e suddivise in campi, relative a documenti a testo completo che ne consentono un recupero e gestione più efficienti n Multilinguismo –realizzazione di risorse e contenuti in più lingue

41 40 I Metadati Dal punto di vista funzionale i metadati possono appartenere a due tipologie: n metadati descrittivo-semantici (MDS), che servono a identificare e e recuperare documenti primari. Sono descrizioni normalizzate di questi documenti e dei loro contenuti semantici; n 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

42 41 I Metadati / 2 n 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: n i documenti primari stessi, utilizzando lauto- 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à n il lavoro di professionisti dellindicizzazione n software automatici che associano metadati al documento

43 42 I Metadati / 3 Schemi di metadati cui fare riferimento: n 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; n MAG dellICCU, elaborati da un apposito gruppo di studio per standardizzare i metadati necessari alla gestione dei documenti digitalizzati nellambito del progetto Biblioteca Digitale Italiana; n DOI (digital object identifier), creato in ambiente editoriale, è una specie di ISBN fornito a pagamento da agenzie coordinate a livello internazionale.

44 43 7. Copyright Sicurezza dei beni culturali: –profilo della salvaguardia –conservazione preventiva, –sicurezza dei contenuti. Precauzioni elementari: n corredare la pubblicazione di contenuti in rete di una nota (copyright notice) che espliciti –diritti che gravano sul materiale e i loro detentori –trattamenti dellinformazione consentiti e quali vietati; –per le immagini pubblicazione in rete alla bassa risoluzione. n 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).

45 44 Copyright /2 Per saperne di più 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


Scaricare ppt "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."

Presentazioni simili


Annunci Google