">

La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

La costruzione di un sito web PROGEAS - Università di Firenze

Presentazioni simili


Presentazione sul tema: "La costruzione di un sito web PROGEAS - Università di Firenze "— Transcript della presentazione:

1 La costruzione di un sito web PROGEAS - Università di Firenze Università di Firenze. Sistema bibliotecario d i Ateneo ……………………. Il progetto La struttura del sito La struttura del sito La struttura della pagina La struttura della pagina Accessibilità Validazione e controllo Validazione e controllo

2 La costruzione di un sito web  Obiettivi  Utenza  Contenuto informativo Il progetto La struttura del sito La struttura del sito La struttura della pagina La struttura della pagina Accessibilità Validazione e controllo Validazione e controllo

3 La costruzione di un sito web La struttura dell’informazione  Dividere l’informazione in unità logiche  Stabilire una gerarchia (dal generale al particolare o dal più importante al meno importante)  Organizzare le relazioni fra le unità informative sulla base della gerarchia individuata  Controllare la funzionalità della struttura creata Il progetto La struttura del sito La struttura del sito La struttura della pagina La struttura della pagina Accessibilità Validazione e controllo Validazione e controllo

4 La costruzione di un sito web La struttura del sito può essere:  sequenziale  a griglia  gerarchica  a ragnatela Il progetto La struttura del sito La struttura del sito La struttura della pagina La struttura della pagina Accessibilità Validazione e controllo Validazione e controllo

5 La costruzione di un sito web Il progetto La struttura del sito La struttura del sito La struttura della pagina La struttura della pagina Accessibilità Validazione e controllo Validazione e controllo

6 La costruzione di un sito web Caratteristiche del sito  Facilità di accesso  Velocità di accesso  Navigabilità  Affidabilità  Interattività  Semplicità  Coerenza Il progetto La struttura del sito La struttura del sito La struttura della pagina La struttura della pagina Accessibilità Validazione e controllo Validazione e controllo

7 La costruzione di un sito web Caratteristiche del sito  Facilità di accesso  L’utente deve arrivare all’informazione col minor numero possibile di passaggi  Velocità di accesso  Se un utente accede attraverso un modem può avere difficoltà a caricare una pagina troppo pesante  Bilanciare le esigenze estetiche con l’esigenza di velocizzare il caricamento Il progetto La struttura del sito La struttura del sito La struttura della pagina La struttura della pagina Accessibilità Validazione e controllo Validazione e controllo

8 La costruzione di un sito web Caratteristiche del sito  Navigabilità  L’utente deve potersi orientare all’interno del sito  Fornire strumenti per la navigazione  Affidabilità  Il sito deve essere costantemente monitorato, in modo da evitare link persi o pagine che non funzionano correttamente Il progetto La struttura del sito La struttura del sito La struttura della pagina La struttura della pagina Accessibilità Validazione e controllo Validazione e controllo

9 La costruzione di un sito web Caratteristiche del sito  Interattività  Fornire sempre all’utente la possibilità di interagire sia con critiche che con suggerimenti  Usare il tag o una form  Semplicità  L’interfaccia deve essere semplice, familiare all’utente e logica  Evitare complessità gratuite Il progetto La struttura del sito La struttura del sito La struttura della pagina La struttura della pagina Accessibilità Validazione e controllo Validazione e controllo

10 La costruzione di un sito web Caratteristiche del sito  Coerenza  Costruire tutte le pagine sullo stesso modello  Questo permette all’utente di orientarsi più facilmente, prevedendo in quale parte della pagina può trovarsi l’informazione che cerca Il progetto La struttura del sito La struttura del sito La struttura della pagina La struttura della pagina Accessibilità Validazione e controllo Validazione e controllo

11 La costruzione di un sito web Struttura della pagina  Identificare la tipologia della pagina  Organizzare in unità logiche l’informazione da inserire nella pagina  Strutturare la pagina in modo da rispettare l’organizzazione logica dell’informazione Il progetto La struttura del sito La struttura del sito La struttura della pagina La struttura della pagina Accessibilità Validazione e controllo Validazione e controllo

12 logoindice links di particolare rilievo strumenti per orientarsi nel sito informazioni redazionali indirizzo link alla unità superiore

13 logo indice links di particolare rilievo strumenti per orientarsi nel sito informazioni redazionali indirizzo link alla unità superiore links di particolare rilievo

14 logo titolo menu informazioni redazionali link di navigazione

15 logo titolo menu informazioni redazionali link di navigazione

16 La costruzione di un sito web Il disegno della pagina  Logo  Uso dei colori e dei caratteri  Uso delle immagini e degli “effetti speciali” Il progetto La struttura del sito La struttura del sito La struttura della pagina La struttura della pagina Accessibilità Validazione e controllo Validazione e controllo

17 La costruzione di un sito web Il disegno della pagina  Logo  Studiare un logo che identifichi l’organizzazione  Inserirlo in tutte le pagine  Si può usare un’immagine più grande nella homepage e più piccola nelle altre pagine Il progetto La struttura del sito La struttura del sito La struttura della pagina La struttura della pagina Accessibilità Validazione e controllo Validazione e controllo

18 La costruzione di un sito web Il disegno della pagina  Uso dei colori e dei caratteri  Coerenza nell’uso dei colori e dei caratteri  Usare colori che si armonizzino e rendano la lettura facile e scorrevole  Per il background preferire un colore pastello; un’immagine è più pesante, può disturbare la lettura e creare effetti spiacevoli su monitor con diversa risoluzione Il progetto La struttura del sito La struttura del sito La struttura della pagina La struttura della pagina Accessibilità Validazione e controllo Validazione e controllo

19 La costruzione di un sito web Il disegno della pagina  Uso dei colori e dei caratteri  Non tutti i colori risultano uguali con tutti browser  Un font di caratteri, per essere visualizzato, deve essere installato sul pc dell’utente; l’uso di un font particolare può causare una visualizzazione diversa da quella pensata; prevedere un font alternativo (Times o arial) Il progetto La struttura del sito La struttura del sito La struttura della pagina La struttura della pagina Accessibilità Validazione e controllo Validazione e controllo

20 La costruzione di un sito web Il disegno della pagina  Uso delle immagini e degli “effetti speciali”  Un uso eccessivo di immagini, statiche o animate, e di effetti creati attraverso l’uso di linguaggi di scripting rischia di:  mettere in ombra il contenuto  rendere difficoltoso il caricamento della pagina  Non tutti i browser sono in grado di elaborare gli script Il progetto La struttura del sito La struttura del sito La struttura della pagina La struttura della pagina Accessibilità Validazione e controllo Validazione e controllo

21 Nello sviluppare pagine web bisogna tener conto del fatto che molti utenti possono:  avere disabilità che rendano impossibile o difficoltoso l’accesso ad alcuni tipi di informazione  non avere o non poter usare determinati dispositivi di input (mouse, tastiera)  avere monitor testuali o connessioni di rete molto lente  essere in una situazione per cui non possono usare occhi, orecchie o mani (p.es. in ambienti rumorosi)  avere versioni precedenti o diverse di browser  non capire perfettamente la lingua in cui il documento è scritto La costruzione di un sito web Il progetto La struttura del sito La struttura del sito La struttura della pagina La struttura della pagina Accessibilità Validazione e controllo Validazione e controllo

22 Il W3C, nell'ambito della Web Accessibility Initiative, ha sviluppato le Linee guida per l'accessibilità ai contenuti del Web, reperibili all'URL: I-WEBCONTENT (traduzione italiana -trad.htm) La costruzione di un sito web Il progetto La struttura del sito La struttura del sito La struttura della pagina La struttura della pagina Accessibilità Validazione e controllo Validazione e controllo

23 Principi per una progettazione volta all’accessibilità  Assicurare una trasformazione elegante  Rendere il contenuto comprensibile e navigabile La costruzione di un sito web Il progetto La struttura del sito La struttura del sito La struttura della pagina La struttura della pagina Accessibilità Validazione e controllo Validazione e controllo

24  Struttura vs presentazione  Equivalenti testuali  Pagine alternative  Indipendenza da dispositivo di input  Uso del colore  Navigabilità  Comprensibilità La costruzione di un sito web Il progetto La struttura del sito La struttura del sito La struttura della pagina La struttura della pagina Accessibilità Validazione e controllo Validazione e controllo

25 Struttura vs presentazione  Distinguere la struttura del documento da come il documento viene presentato  Definire le varie sezioni del documento e utilizzare gli elementi strutturali (es. intestazioni H1-H6 in HTML) per identificarle  Non usare elementi strutturali per creare effetti di presentazione  Usare elementi strutturali (TITLE, META, LINK) che forniscono informazioni sul documento (metadati)  Usare i fogli di stile per gestire la presentazione del documento La costruzione di un sito web Il progetto La struttura del sito La struttura del sito La struttura della pagina La struttura della pagina Accessibilità Validazione e controllo Validazione e controllo

26 Struttura vs presentazione. HTML  E’ un linguaggio a marcatori, in cui gli elementi del testo sono identificati e delimitati da un’etichetta o  Dovrebbero essere usati solo i marcatori strutturali, e nel modo corretto, cioè al fine per cui sono stati creati e non per produrre effetti di formattazione  Le linee guida per un uso corretto del linguaggio HTML allo scopo di garantire la massima accessibilità si trovano in: Techniques for web Content Accessibility Guidelines 1.0 ( WEBCONTENT-TECHS ). Per una sintesi vedi: rea/accessibilita.htm La costruzione di un sito web Il progetto La struttura del sito La struttura del sito La struttura della pagina La struttura della pagina Accessibilità Validazione e controllo Validazione e controllo

27 Struttura vs presentazione. Fogli di stile  I fogli di stile permettono di controllare la presentazione di una pagina web  Le caratteristiche di ogni elemento del documento vengono definite con l‘istruzione: selettore { proprietà: valore; proprietà: valore } p.es.: H1 { font-family: “comic sans ms”; color: # }  Lo stile può essere definito all’interno di un singolo documento o in un documento esterno che viene richiamato all’inizio di ogni pagina (molto utile se si vuol definire uno stile uniforme per tutto il sito; ogni variazione viene effettuata una sola volta ed ha effetto su tutto il sito) La costruzione di un sito web Il progetto La struttura del sito La struttura del sito La struttura della pagina La struttura della pagina Accessibilità Validazione e controllo Validazione e controllo

28 Struttura vs presentazione Avvertenze sull’uso dei fogli di stile  Benché l’uso dei fogli di stile offra grandi potenzialità per la presentazione delle pagine, bisogna ricordare che essi non sono ancora totalmente supportati e quindi non è possibile affidare a questi effetti di formattazione il compito di veicolare l’informazione  Accertarsi che il documento sia comunque leggibile anche se il browser non supporta i fogli di stile  L’HTML 4.0 supportato dai browers di ultima generazione raccomanda l’uso dei fogli di stile La costruzione di un sito web Il progetto La struttura del sito La struttura del sito La struttura della pagina La struttura della pagina Accessibilità Validazione e controllo Validazione e controllo

29 Equivalenti testuali  Il testo è accessibile per quasi tutte le tipologie di utenti e può essere gestito da ogni tipo di interprete  Fornire un equivalente testuale per ogni oggetto non testuale (p.es. con l’attributo “alt” o “longdesc” in HTML)  L’equivalente testuale deve essere esplicativo (si può immaginare di dover descrivere l’oggetto ad un interlocutore telefonico) La costruzione di un sito web Il progetto La struttura del sito La struttura del sito La struttura della pagina La struttura della pagina Accessibilità Validazione e controllo Validazione e controllo

30 Pagine alternative  Se si ritiene che la pagina sia comunque inaccessibile si possono fornire pagine alternative, per es. in versione esclusivamente testuale  Si può inserire il link alla pagina alternativa in testa ad ogni pagina oppure utilizzare l’elemento LINK in HTML La costruzione di un sito web Il progetto La struttura del sito La struttura del sito La struttura della pagina La struttura della pagina Accessibilità Validazione e controllo Validazione e controllo

31 Indipendenza da dispositivo di input  E’ necessario fare in modo che l’utente possa interagire con la pagine anche senza mouse  Fornire equivalenti testuali per le aree delle mappe sensibili  Fornire scorciatoie da tastiera per i link (p.es. con l’attributo “accesskey”)  Creare un ordine logico di tabulazione (p.es. con l’attributo “tabindex”) La costruzione di un sito web Il progetto La struttura del sito La struttura del sito La struttura della pagina La struttura della pagina Accessibilità Validazione e controllo Validazione e controllo

32 Uso del colore  Non fare affidamento solo sul colore per veicolare informazione  Assicurarsi che l’informazione sia fornita anche attraverso altri effetti stilistici (p.es. tipi di carattere) e attraverso il contesto (p.es. testi dei links esplicativi)  Assicurarsi che le combinazioni di colori fra sfondo e testo forniscano un contrasto sufficiente Per verificare l’effetto stampare la pagina in scala di grigi La costruzione di un sito web Il progetto La struttura del sito La struttura del sito La struttura della pagina La struttura della pagina Accessibilità Validazione e controllo Validazione e controllo

33 Navigabilità  Rispettare uno stile coerente di presentazione (la struttura delle pagine di un sito deve essere uniforme)  Provvedere barre di navigazione, mappa del sito, strumenti di ricerca  Fornire adeguata informazione sulle raccolte di documenti (p.es. con l’elemento LINK) e costituire archivi (p.es. in formato zip) delle diverse pagine La costruzione di un sito web Il progetto La struttura del sito La struttura del sito La struttura della pagina La struttura della pagina Accessibilità Validazione e controllo Validazione e controllo

34 Comprensibilità  Usare per i link frasi chiare ed esplicative  Chiarire fin dall’inizio della frase o del paragrafo quale sia il suo contenuto  Usare un linguaggio semplice e usare parole di uso comune  Non usare costrutti troppo complessi  Limitare ogni paragrafo ad un’idea principale La costruzione di un sito web Il progetto La struttura del sito La struttura del sito La struttura della pagina La struttura della pagina Accessibilità Validazione e controllo Validazione e controllo

35 Validatori automatici  Validazione HTML (http://validator.w3.org)  Validazione dei fogli di stile (http://jigsaw.w3.org/css-validator)  Validazione dell’accessibilità: BOBBY (http://www.cast.org/bobby/) Scenari utente  Testare la pagina con un emulatore di un browser testuale, p. es. Lynxview (http://www.delorie.com/web/lynxview.html)  Provare diverse impostazioni del browser (con o senza immagini etc.)  Usare diversi browser, anche in versioni precedenti La costruzione di un sito web Il progetto La struttura del sito La struttura del sito La struttura della pagina La struttura della pagina Accessibilità Validazione e controllo Validazione e controllo

36 Strumenti per la manutenzione del sito  Link checker  Site mapper Strumenti per misurazioni statistiche  Contatori  Log analyser La costruzione di un sito web Il progetto La struttura del sito La struttura del sito La struttura della pagina La struttura della pagina Accessibilità Validazione e controllo Validazione e controllo


Scaricare ppt "La costruzione di un sito web PROGEAS - Università di Firenze "

Presentazioni simili


Annunci Google