Progettazione e realizzazione sito web

Presentazione sul tema: "Progettazione e realizzazione sito web"— Transcript della presentazione:

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

2 Gli aspetti della progettazione
Architettura Comunicazione Gestione Accessibilità Usabilità Interoperabilità Copyright

3 1. Architettura 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) Organizzazione 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.

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 C. Navigazione secondaria
È 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.

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 pane La 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 / 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. 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 I primi due punti sono il ‘comandamento’ principale del web...

15 elementi distintivi dell’identità del sito (logo, denominazione ecc. )
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. 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

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 E' alla fase di Working Draft la nuova specifica CSS3. Da evitare le musiche di accompagnamento, i jingle automatici, ecc.

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 = 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. Esistono “HTML Doctors” che analizzano (e correggono) gli errori

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> A questo punto è importante far vedere qualche sito che ha correttamente implementato le regole.

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

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 esadecimali Stile dello scrivere Qui ricorda di citare come pessimo esempio...

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. Qui ricorda di citare come pessimo esempio...

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. Qui ricorda di citare come pessimo esempio...

26 Regole per scrivere sul Web / 3
fare attenzione all’uso del grassetto, delle maiuscole, della punteggiatura o degli spazi per enfatizzare il testo Qui ricorda di citare come pessimo esempio...

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 Qui ricorda di citare come pessimo esempio...

28 Regole per scrivere sul Web / 5
usare l'ipertesto per "stratificare" le informazioni su più livelli Qui ricorda di citare come pessimo esempio...

29 Regole per scrivere sul Web / 6
scrivere periodi semplici e brevi e comporre testi lunghi la metà di quelli concepiti per la carta Qui ricorda di citare come pessimo esempio...

30 Regole per scrivere sul Web / 7
evitare se possibile l’uso dello scrolling; quando necessario i titoli dei contenuti devono trovarsi tutti al principio della pagina. Qui ricorda di citare come pessimo esempio...

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 Qui ricorda di citare come pessimo esempio...

32 3. Gestione La 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. Qui ricorda di citare come pessimo esempio...

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: programma ), 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 Qui ricorda di citare come pessimo esempio...

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. Qui ricorda di citare come pessimo esempio...

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) Qui ricorda di citare come pessimo esempio...

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 contenuti 1.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 Copertura dei link Validità dei percorsi all’indietro Chiarezza del contesto rispetto al sito 1.13 Validità del controllo sui media Chiarezza del controllo sui media Far effettuare ricerche Comprensibilità dei moduli di ricerca 1.16 Comprensibilità dei risultati delle ricerche 1.17 Navigabilità dei risultati delle ricerche Qui ricorda di citare come pessimo esempio...

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”. Qui ricorda di citare come pessimo esempio...

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» ( Qui ricorda di citare come pessimo esempio...

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 Qui ricorda di citare come pessimo esempio...

40 I Metadati Dal 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 Qui ricorda di citare come pessimo esempio...

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 Qui ricorda di citare come pessimo esempio...

42 I Metadati / 3 Schemi 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. Qui ricorda di citare come pessimo esempio...

43 7. Copyright Sicurezza dei beni culturali: Precauzioni elementari:
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). Qui ricorda di citare come pessimo esempio...

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 Qui ricorda di citare come pessimo esempio...