sviluppo di siti web - dia.uniroma3.it · – ricerca esplorativa: "che cosa si intende per...

1

Sviluppo di siti Web

Paolo Atzeni

Paolo Atzeni, maggio 2001 2

Quadro metodologico per siti Web

• Obiettivi

• Considerazioni preliminari

• Il ciclo di vita di un sito Web

• Pianificazione

• Progettazione

• Realizzazione

• Valutazione e avvio

• Gestione

2


Obiettivi

• La qualità di un sito (come di molti altri prodotti o sistemi) deve essere perseguita dall'inizio, non "aggiunta" a posteriori

• Il quadro metodologico tiene conto, nelle varie fasi, dei vari attributi che contribuiscono alla qualità (secondo la nostra metodologia di analisi)

• Si concentra sulla "pubblicazione di informazioni", perché i siti di interesse la vedono come funzionalità prevalente


Contesto

• Utilizzo produttivo, non (o, almeno, non solo) "surfing":

– i servizi debbono essere offerti in modo ufficiale e professionale

• Il sito Web di una amministrazione o azienda è una risorsa importante e va gestito con pianificazione e controllo (Piano Triennale)

• Va inquadrato non solo nel contesto dei sistemi informativi, ma anche con riferimento a scelte strategiche complessive; interagisce fortemente con le attività di produzione della documentazione e con le iniziative di comunicazione (L.150/2000)

3


Ruoli e responsabilità

• Debbono essere definiti adeguatamente

• Il "responsabile" deve essere autorevole (posizione dirigenzialeelevata) o almeno avere un mandato e una "copertura" forti

• Può essere utile un "comitato editoriale" o "di indirizzo", che rappresenti i vari settori

• Il Web interessa sia l'amministrazione nel senso stretto sia gliuffici di staff del vertice politico:

– la comunicazione riguarda sia gli aspetti di servizio (URP) sia quelli politici (portavoce, addetto stampa)

• Il responsabile strategico o il comitato sono (o meglio, rappresentano) i "committenti" del sito; la struttura operativa (interna o esterna) è il "fornitore"


La struttura operativa

• La struttura operativa prevede competenze diverse

– tecnologiche (e metodologiche correlate alle tecnologie)

– redazionali e relative alla comunicazione (spesso con interazioni con tutta l'amministrazione)

• La sua collocazione non è ovvia:

– nella struttura del sistema informativo

– nella struttura amministrativa dedicata alla comunicazione e alle relazioni con il pubblico

– nello staff del vertice politico

• A lungo termine (servizi "veri"), il Web potrebbe diventare l'interfaccia verso i sistemi informativi e quindi associata ad essi, ma con una funzione di "servizio" verso i "clienti" interni

4


Ulteriori considerazioni preliminari

• Possibile affidamento all'esterno

– consueti problemi di individuazione dei confini della fornitura

• sviluppo appaltato e gestione interna

• affidamento della gestione: infrastruttura, aggiornamento dei contenuti, evoluzione del sito; i contenuti richiedono quasi sempre un'interazione con gli uffici responsabili/interessati

• Sito centrale e "sottositi" ("siti satellite"):

– vantaggi e svantaggi


Il ciclo di vita di un sito Web

• Pianificazione

• Progettazione

• Realizzazione


• Gestione

5


Pianificazione

• Definizione del progetto e impostazione delle attività successive

• Dalla visione strategica e dalla diagnosi della situazione attuale, si individuano gli interventi prioritari

• Specifica del progetto ("documenti" approvati da committente e fornitori):

– definizione della missione del sito

– individuazione degli obiettivi del sito (specifici, misurabili, ottenibili in un tempo definito)

– individuazione degli utenti del sito, con aspettative e caratteristiche

– definizione degli elementi fondamentali del sito (sezioni principali, servizi da offrire), delle fonti di informazione e del "taglio" del sito


Attività

• Possibile articolazione

– una attività per ciascuna "sezione" del sito

– attività trasversali:

• definizione dell'architettura

• definizione dell'interfaccia e della grafica

• revisione dei documenti

• controllo di qualità

• formazione

6


Conclusione della pianificazione

• Valutazione costi/benefici

• Decisione



• Pianificazione

• Progettazione

• Realizzazione


• Gestione

7


Progettazione

• Descrizione dettagliata del sito, da utilizzare in fase di realizzazione

• Vediamo un possibile insieme di attività e prodotti, molti dei quali tengono conto a priori delle esigenze di qualità, affrontandole direttamente oppure fornendo linee guida


Progettazione: attività e prodotti

• "tema dominante"

• organizzazione generale del sito

• sistema di navigazione (ed etichettatura)

– strumenti integrati (barre di navigazione, menu a comparsa, frame [??])

– strumenti ausiliari (mappa, indice generale e analitico)

• funzionalità di ricerca

• definizione degli aspetti plurilingue

8


Un inciso: Information architecture

• Organizzazione delle informazioni

• Navigazione

• "Labelling"

• Indicizzazione e ricerca


Organizzazione delle informazioni, difficoltà

• Classificare può essere molto utile per organizzare, ma le classificazioni, se il contesto si estende soffrono di problemi di vario tipo:

– ambiguità

– eterogeneità (classificazioni multiple, formati diversi, …)

– differenze di prospettiva

– rapporti "politici" (dalle denominazioni alle enfasi e alle priorità)

9


Organizzazione: schemi e strutture

• Schema organizzativo:

– definisce le caratteristiche degli elementi e le modalità secondo cui sono raggruppati

• Struttura organizzativa:

– definisce i tipi di correlazioni fra elementi e gruppi di elementi

• È utile distinguere l'organizzazione delle informazioni da altri aspetti, pur ad essa legati (ma di "livello più basso):

– navigazione, "labelling", indicizzazione


Schemi organizzativi

• Schemi "esatti"; dividono e organizzano le informazioni secondo criteri univoci (ad esempio, partizioni mutuamente esclusive)

– alfabetico

– cronologico

– geografico (con piccoli rischi di ambiguità: qual è la montagna più alta d'Europa? Monte Bianco o Elbrus)

• Schemi "ambigui":

– per argomento

– per funzione (inserimento, modifica, ecc..)

– per categoria di utente

– basasti su metafora (il desktop dei PC, una biblioteca, …)

– schemi ibridi (vedi esempio)

10


Strutture organizzative

• Gerarchica; aspetti importanti:

– classificazioni mutuamente esclusive?

– sviluppo in ampiezza o in profondità?

– funziona spesso, ma non sempre

• Ipertestuale:

– complessa e potenzialmente rischiosa, come struttura primaria

• "Entity-Relationship" :

– adatta a "sottositi" strutturati

• Nota: gerarchica ~ top-down

ipertestuale e E-R ~ bottom-up


Organizzazione, sintesi

• Siti complessi richiedono schemi organizzativi e strutture organizzative multiple e integrate

• Schemi esatti sono efficaci quando le ricerche sono basate su "chiavi" certe, schemi ambigui sono efficaci quando l'utente nonsa esattamente che cosa sta cercando. In alcuni contesti sono utili entrambi i tipi

• Molti siti prevedono strutture organizzative con componenti gerarchiche, ipertestuali e "E-R", di solito con un livello più esterno di tipo gerarchico

11



12


Navigazione

• Supportata in modi diversi

– dai browser ("back", "history", "bookmark", digitazione URL, colore dei link visitati); attenzione a non disabilitarle/sporcarle

– indicazione del contesto; molto utile se si arriva "dall'esterno", oppure se si stampa una pagina

• "Voi siete qui" (ad esempio, cammino dalla home-page)

• titolo della pagina, intestazione del sito (identità del sito)

– "sistema di navigazione"

• tipi di sistema di navigazione

• strumenti integrati

• strumenti ausiliari


Sistemi di navigazione: tipi

• Gerarchia del sito e struttura E-R

• Supporto globale (in tutte le pagine del sito, anche a livelli)

• Supporto locale ("sottositi"): sostitutivo o complementare?

• Ad-Hoc (link immersi):

– alcuni molto utili, troppi controproducenti (specie se troppo immersi); attenzione al contesto ("clicca qui" spesso fuorviante)

13


Strumenti di navigazione integrati

• Barre di navigazione

– testuali e/o grafiche? (velocità, browser testuali, "ALT", manutenzione, icone furovianti)

– sopra/sotto o a lato? Scuole diverse!

• Frame: un costrutto controverso

• Menu a tendina


Strumenti di navigazione ausiliari

• Sono un supporto, che non potrà mai compensare una struttura primaria inadeguata

• Possono/debbono permettere l'accesso diretto alle pagine

• Indice generale ("Table of contents"): illustra sinteticamente la gerarchia

• Indice analitico ("Index"); indice analitico, spesso a granularità molto fine

• Mappa del sito: rappresentazione grafica della "informationarchitecture"; attenzione al livello di astrazione

• "Guided Tour"

14


"Labeling"

• "Labeling is a form of representation. Just as we use spoken words to represent thoughts, we use labels to represent larger chunks of information in our web sites"

• Il problema si pone in molti contesti:

– "oggetto" delle lettere o dei messaggi di e-mail

– titoli delle cartelline

– nomi degli uffici

• Nel Web il problema è accentuato dalla eterogeneità dei contesti e degli utenti e dalla difficoltà di intervenire per chiedere o fornire spiegazioni

• Poiché considera solo l'aspetto terminologico, il "labelling" è un problema successivo alla definizione dell'organizzazione e dellanavigazione


Labeling, aspetti generali

• "Labeling systems, not labels"

– la coerenza (almeno locale) è essenziale:insiemi di link con nomi disomogenei disorientano;

• Due tipi di etichette:

– testuali

– iconiche

• Due tipi di uso:

– link

– titoli

15


Labeling e navigazione

• La coerenza è importante, nell'ambito del sito e di ciascuna pagina

– stessa etichetta per lo stesso scopo

– coerenza "grammaticale" (es. tutti verbi o tutti sostantivi in un elenco di link)

• Esempi

– Main, Main page, Home, Home page

– Contact, Contact Us, Contact Webmaster, Feedback

– Help, FAQ, Frequently Asked Questions


Labeling, altri aspetti

• Labeling e indicizzazione: titoli, keyword

• link immersi: coerenza locale più che generale

• titoli di sezione: coerenza di terminologia, di granularità e di stile tipografico (nell'ambito della singola pagina e di pagine simili)

• icone: eleganti, efficaci, ma con cautela (utile accompagnarle con testo)

– alcune sono universalmente comprese (es. una casetta per la home page) altre richiedono uno sforzo

– il linguaggio delle icone è ristretto

• l'etichettatura è efficace se adatta all'utente!

16


Strumenti di ricerca

• Non debbono sostituire una progettazione inefficace

• Richiedono uno sforzo non trascurabile (se si vuole che siano efficaci)

• Le ricerche possono essere di vario tipo:

– ricerche di informazioni ben precise (un'interfaccia di interrogazione o motore di ricerca)

– ricerca di "esistenza": "esiste un driver per la stampante HPxxxx che stampi quattro pagine su ogni foglio?"

– ricerca esplorativa: "che cosa si intende per 'colori freddi'"?

– ricerca generale: "tutto lo scibile umano sulla usabilità dei siti web"


Strumenti di ricerca: flessibilità

• Si procede per iterazioni successive: "associative learning"

• Gli obiettivi di ricerca si evolvono (a mano a mano che l'utenteacquisisce informazioni)

• Ricerca e browsing debbono essere integrati (gli utenti alternano)

• Si dovrebbe supportare qualcosa di analogo alla richiesta di informazioni ad uno sportello (con operatore umano)

17


Strumenti di ricerca: funzionalità

• I motori di ricerca (e altri strumenti) possono e debbono essereconfigurati:

– sulla base delle caratteristiche degli utenti

– tipi di ricerche

• La personalizzazione porta ad integrare le form di ricerca con (porzioni di) mappa o indice

• Indicizzazione del contenuto

• Zone, sottositi

• Attenzione al rapporto fra strumenti di ricerca e pagine generate dinamicamente


Definizione delle specifiche e della Information Architecture

• Interazione con il committente (in una riunione)

– Introduzione

– Revisione critica (che cosa piace e che cosa no) di siti Web esistenti (in azienda o fuori)

– Il concetto di Information Architecture (con riflessioni sui siti)

– Obiettivo generale del progetto

– Un sito o una struttura con siti satellite? Riflessione sulla struttura organizzativa, sulle responsabilità e sulel esigenze di omogeneizzazione

– Metriche di successo

– Architettura e caratteristiche del sito principale

18


Progettazione della Information Architecture

• Brainstorming alla lavagna!• Esplorazione delle metafore:

– organizzativa (es.: una concessionaria: vendita auto nuove, vendita usato, officina, amministrazione, …)

– funzionale (es.: una biblioteca: esplorazione del catalogo, ricerca in un indice, richiesta di info al personale)

– visuale (es.: un elenco di indirizzi e numeri telefonici mostrato con icone)

• Costruzione/descrizione di scenari d'uso• Definizione di un primo raffinamento dell'architettura• Prototipi di pagina (per simulare il contenuto)• Bozze di grafica (per discussione su architettura, grafica e

realizzazione)• Prototipi


19



20


Progettazione della navigazione

• Rapporto costi/benefici:

– una molteplicità di elementi è utile/necessaria

– troppe opzioni possono fuorviare l'utente

• Un possibile processo:

– struttura principale basata sulla gerarchia e sull'E-R

– le pagine di livello più alto nella gerarchia dovrebbero essere accessibili da (quasi) ogni pagina

– definizione di strutture ausiliarie

– verifiche di usabilità?


Prodotti della Information Architecture (secondo Lynch e Horton)

• Detailed site design specification

• Detailed description of site content

– site map, thumbnails, outlines, table of contents

• Detailed technical support specification

– Browser technology supported

– Connection speed supported

– Web server and server resources

• Proposal to create programming or technology for specific features

• A schedule for design and construction

• One or more site prototypes for multiple pages

• Multiple graphic design and interface design sketches or roughs

21


Progettazione: attività e prodotti (2)

• specifica di dettaglio dei contenuti delle pagine (o tipi di pagine) e individuazione delle fonti delle informazioni

• definizione di pagine specifiche (se opportune):

– novità

– risposte a domande frequenti (FAQ)

– presentazione dell'amministrazione (e interazione con essa)

– interazione con i gestori del sito

– rilevazione del gradimento

– gruppi di discussione

• progettazione della home-page


Progettazione di dettaglio

• Definizione completa (del contenuto) delle pagine, con "schemi" via via più dettagliati

– partizionamento dell'informazione ("information chunking")

• Il rapporto con l'utente diventa meno stretto

• A seconda della dimensione del sito, i soggetti coinvolti (e quindi i documenti necessari) saranno diversi

22


"Content mapping"

• La "Information Architecture" è definita soprattutto con un processo top-down

• In fase di progettazione, si arriva spesso a dover dettagliare tutte le informazioni necessarie anche con un processo bottom-up

• Alla fine, si debbono "riconciliare" i due approcci, inquadrandotutte le informazioni nell'architettura di dettaglio, ad esempiostabilendo la corrispondenza ("mapping") fra fonti delle informazioni e pagine (ma lo stile può essere diverso)

• È anche utile un "inventario delle pagine" (uno schema potrebbe non essere gestibile)


23



24




• Progettazione dell'interfaccia e dell'impostazione grafica. La grafica è importante, ma non fine a se stessa.

– Approccio sistematico (identificabilità e caratterizzazione)

– Semplicità e facilità d'uso

– Accessibilità (connessioni lente, utenti disabili, indipendenza dal browser e dal monitor)

– Possibilità di stampa generalizzata

25


Progettazione dell'interfaccia

• Premessa:

– problemi analoghi valgono in altri contesti, ad esempio nella produzione e stampa dei libri (stile di scrittura; rilegatura, numerazione delle pagine, indici, copertina, pagine iniziali);ci sono differenze ma anche concetti che restano validi

• Una differenza importante: le pagine Web debbono essere "autonome" una dall'altra (nota, nei libri non serve, ma in giornali e riviste può essere utile);regole base: what-who-when-where

– titolo (sia HTML sia nella pagina)

– autore (persona o ente)

– data di creazione o ultima modifica

– link alla home page (e url, utile in stampa) e altre importanti


Interfaccia, spunti

• L'utente è il centro dell'attenzione: usabilità

– supporto alla navigazione, etc. (vedi Information Arch.)

– utilizzo della larghezza di banda opportuna

– semplicità e coerenza

– inegrità e stabilità

– feedback e dialogo con gli utenti

– supporto agli utenti disabili

– accessibilità: "viewable with any browser", ogni SO, anche monitor piccoli

– "graceful degradation"

26


modem lento

modem veloce

T1

1 secondo

2KB

8KB

100KB

10 secondi

34KB

150KB

2MB

Tempo di risposta e attenzione dell'utente

• fino a un decimo di secondo, l'utente ha la sensazione di una risposta istantanea

• fino a un secondo l'utente, pur notando il ritardo, ha la sensazione di un dialogo e non si distrae (non ha tempo di pensare ad altro)

• fino a dieci secondi l'utente mantiene l'attenzione al probelma anche se mentalmente si distrae

• oltre i dieci secondi l'utente inizia a dedicarsi ad altre attività, aspettando una risposta "asincrona"


10 regole euristiche per l'usabilità nel Web

Keith Instone

http://webreview.com/97/10/10/usability/sidebar.html

• Derivate dalle euristiche proposte da Jakob Nielsen per le interfacce utente in generale (http://www.useit.com/papers/heuristic/heuristic_list.html)

• Il criterio generale è l'uso efficace dei link

27


Regole euristiche … (2)

1. Visibility of system status

2. Match between system and the real world

3. User control and freedom

4. Consistency and standards

5. Error prevention

6. Recognition rather than recall

7. Flexibility and efficiency of use

8. Aesthetic and minimalist design

9. Help users recognize, diagnose, and recover from errors

10. Help and documentation


Regole euristiche … dettagli

1. Visibility of system status

– The system should always keep users informed about what is going on, through appropriate feedback within reasonabletime.

– "Where am I?" e "Where can I go next?"

2. Match between system and the real world– The system should speak the users' language, with words,

phrases and concepts familiar to the user, rather thansystem-oriented terms. Follow real-world conventions,making information appear in a natural and logical order.

– Non si debbono (di solito) fare ipotesi restrittive sugli utenti

28


Regole euristiche … dettagli (2)

3. User control and freedom

– Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave theunwanted state without having to go through an extendeddialogue. Support undo and redo.

– Il browser già ci aiuta, il link alla home è fondamentale

– Attenzione all'uso di nuove tecnologie, a forzare colori o assumere versioni specifiche dei browser



4. Consistency and standards

– Users should not have to wonder whether different words,situations, or actions mean the same thing. Follow platform conventions.

– Coerenza di titoli, link, terminologia, ...

– Coerenza con gli standard e le usanza del Web (colori dei link, ...)

5. Error prevention– Even better than good error messages is a careful design

which prevents a problem from occurring in the first place. – Ad esempio: link corretti, controlli sulle form

29



6. Recognition rather than recall

– Make objects, actions, and options visible. The user shouldnot have to remember information from one part of thedialogue to another. Instructions for use of the systemshould be visible or easily retrievable whenever appropriate.

– Correlato con il punto 1 (system status)

– Attenzione alle mappe cliccabili (in particolare sul server)

– Etichette e sistemi di navigazione.



7. Flexibility and efficiency of use

– Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

– Nel Web: bookmarks (e anche cammini predefiniti)

– Le pagine debbono essere "facili da annotare neibookmark":

• senza frame, con URL stabili, form con "GET"

30



8. Aesthetic and minimalist design

– Dialogues should not contain information which is irrelevantor rarely needed. Every extra unit of information in adialogue competes with the relevant units of information anddiminishes their relative visibility.

– Evitare informazione non pertinente

– Riscrivere per il Web

– Procedere per raffinamenti



9. Help users recognize, diagnose, and recover from errors

– Error messages should be expressed in plain language (nocodes), precisely indicate the problem, and constructively suggest a solution.

– Ad esempio, nel caso di una ricerca senza esito, fornire un supporto (senza dire solo "rendi la ricerca meno restrittiva")

10. Help and documentation– Even though it is better if the system can be used without

documentation, it may be necessary to provide help anddocumentation.Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and notbe too large.

31


Progettazione delle pagine: obiettivi

• Rendere efficace l'interazione degli utenti ("soddisfarli" e farli restare e tornare)

– mantenere viva l'attenzione

– rendere gradevole l'attività

– dare le "giuste" priorità

• È la "concretizzazione" della progettazione dell'interfaccia

• È necessario un approccio sistematico (coordinato conl'information architecture e il sistema di navigazione)


Fasi della "acquisizione" delle pagine da parte degli utenti

I promessi sposi

Quel ramo del lago di Como che volge a mezzogiorno, fra catenedi monti

32


È necessaria una "struttura visuale"

• Articolazione, idea di organizzazione, contrasto


Coerenza

• È opportuno che la struttura visuale sia applicata in modo coerente nell'ambito di un sito

– per dare unità (caratterizzazione, riconoscibilità)

– per facilitare l'utente (che "si abitua")

• Ovviamente si possono (e si debbono) avere "variazioni sul tema"; ad esempio

– stessa disposizione grafica con colori che cambiano nelle sezioni del sito

– colori stabili e varianti di logo nelle sezioni

33


Progettazione delle pagine: considerazioni

• Sul Web di solito non si legge, ma si "dà un occhiata", si campiona; i documenti lunghi vengono poi stampati.Tener conto degli utenti previsti e delle funzionalità preferite:

– leggeranno i documenti in rete oppure li cercheranno per stamparli e archiviarli?

• who-what -when-where, strumenti di navigazione, etc.

• La grafica ha un ruolo fondamentale per evitare pagine troppo piatte e noiose ma …prudenza con grafica e colori

• Portabilità:


Portabilità

– differenze fra i browser (es. una piccola spaziatura)

– funzionalità proprietarie e non "affermate" (Nielsen: "aspettate una anno o due")

– grande variabilità nella dimensione degli schermi (solo schermi?)

– graceful degradation

34


"Screen real estate"

• Lo spazio sullo schermo è prezioso (come il terreno edificabile in una metropoli) e quindi va sfruttatto al meglio

– la porzione in alto a sinistra è l'unica ad essere sempre vista

• Lo spazio in una pagina è usato in vario modo:

– sistema operativo e browser (il contorno della finestra e le barre di navigazione del browser e simili), non controllabili dal progettista del sito

– navigazione sul sito

– contenuto

– (pubblicità)

– niente


La griglia, ovvero dimensione fisse?

• Autori diversi hanno opinioni diverse:

– se le pagine si adattano alla dimensione della finestra, si sfrutta tutto lospazio (e si tiene conto anche della risoluzione del monitor)

– se le dimensioni sono fissate, si ha un controllo più preciso del layout (ma allora anche i caratteri devono avere dimensione fissa?)

• Comunque, attenzione alle tabelle:

– anche se flessibili, debbono avere "dimensioni minime", sotto le quali non si deve scendere

35


Separazione di contenuto e presentazione

• Idea presente nel Web sin dall'inizio:

– HTML specifica "formattazione logica"

• I browser e i terminali possono essere diversi (e in futuro lo saranno sempre di più)

• Un'importante linea guida, da perseguire in vari modi:

– usare comandi di formattazione logica: <H1> e non <FONT SIZE=3> (e dimensioni percentuali?)

– usare ALT per le immagini

– usare fogli di stile (disabilitabili)


Il frame, un costrutto controverso

• Frame: "meta-documento" o "superdocumento" che riunisce e visualizza in un'unica finestra più documenti

• Permette di "modularizzare" le pagine

• Rifiutato da molti (J. Nielsen: "Frames? Just say no!")

– principio fondamentale: la pagina Web riunisce molti concetti in un'unica idea:

• la percezione dell'unità informativa attuale

• l'unità informativa accessibile con un link (o bookmark)

• un indirizzo (URL)

• l'unità di memorizzazione

– i frame rompono questa unitarietà

36


Difetti dei frame

• l'unità di informazione dipende dalla sequenza delle azioni di navigazione ("open frame in new window")

• bookmark non funzionano

• URL non funzionano

• portabilità: la gestione su schermi diversi è difficilissima

• difficoltà con la stampa

• difficoltà con i motori di ricerca

• difficoltà di utilizzo per utenti non specializzati


Progettazione delle pagine e stampa

• Nonostante tutto, si stampa molto (ed è anche naturale, almeno per ora, ma forse per molto tempo)

• Lo schermo è orizzontale, i fogli (di solito) verticali

• Attenzione alle larghezze fisse (ma evitare indicazioni "stampare in landscape"!)

• Può essere utile predisporre due versioni dei documenti lunghi

– per la consultazione (magari valorizzando la struttura ipertestuale)

– per la stampa (un unico file, anche in altro formato, es PDF)

• In Europa e USA i fogli hanno dimensioni diverse

37



• Definizione dell'infrastruttura tecnica (hardware, sistema operativo, server HTTP, sistema di basi di dati, ambiente di sviluppo)

• Realizzazione dei programmi (per la generazione dinamica di pagine); attenzione alla sicurezza, se necessario

• Pianificazione della fase di produzione e valutazione delle risorse necessarie anche per la gestione (dei contenuti, in particolare)



• Realizzazione di una guida per la produzione, cruciale per il perseguimento degli obiettivi di qualità:

– connettività (dimensione delle pagine e compressione delle immagini)

– correttezza dei cammini di navigazione e del codice HTML

– qualità del contenuto

• coerenza con gli obiettivi

• comprensibilità dell'informazione e qualità del linguaggio

• identificazione storica dell'informazione

• dichiarazione e autorevolezza delle fonti

38


Progettazione: verifiche intermedie

• Numerose attività di valutazione, interne al gruppo responsabile(meglio se con persone dedicate) e con il committente

• Sono utili "approvazioni" esplicite:

– tema dominante

– architettura

– caratteristiche dell'interfaccia e della grafica

• Si possono utilizzare prototipi del sito e pagine campione (con soli contenuti o sola grafica, a seconda dei casi)


39




• Pianificazione

• Progettazione

• Realizzazione


• Gestione

40


Realizzazione

• Rigorosa applicazione delle regole fissate nella fase di progettazione (emendate in itinere se necessario) con

– rispetto delle linee guida

– valutazioni periodiche della qualità, secondo il piano impostato all'inizio



• Pianificazione

• Progettazione

• Realizzazione


• Gestione

41


Valutazione e avvio

• Prima del "lancio" (del sito o di una sua estensione) è opportuna una valutazione sistematica:

– ad esempio con la nostra metodologia

– preferibilmente da parte di soggetti non troppo coinvolti nello sviluppo

– con coinvolgimento del committente (anche finale) e degli utenti (anche e soprattutto esterni)

• Il sito va "promosso", in modo tradizionale e tecnico



• Pianificazione

• Progettazione

• Realizzazione


• Gestione

42


Gestione

• Risorse non trascurabili

• Passaggio di consegne dal gruppo di sviluppo (affiancamento)

• Aggiornamento dei contenuti

• Monitoraggio

• Piccola manutenzione

• Evoluzione:

– valutazione periodica

– comitato editoriale

– gruppi di utenti

– pianificazione di nuove iniziative


Riferimenti

• P.J. Lynch and S. Horton. Web Style Guide: Basic DesignPrinciples for Creating Web Sites, Yale University Press, 1999.http://info.med.yale.edu/caim/manual(edizione italiana: Web guida di stile , Apogeo, 2000)

• L. Rosenfeld and P. Morville. Information architecture for the World Wide Web. O'Reilly, 1998.

• J. Nielsen. Designing Web Usability: The Practice of Simplicity. New Riders, 1999. (edizione italiana: Web usability, Apogeo 2000)

sviluppo di siti web - dia.uniroma3.it · – ricerca esplorativa: "che cosa si intende per...

Documents