Sviluppo di siti Web

Transcript

1 Sviluppo di siti Web Paolo Atzeni Quadro metodologico per siti Web Obiettivi Considerazioni preliminari Il ciclo di vita di un sito Web Pianificazione Progettazione Realizzazione Valutazione e avvio Gestione Paolo Atzeni, maggio

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 Paolo Atzeni, maggio 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) Paolo Atzeni, maggio

3 Ruoli e responsabilità Debbono essere definiti adeguatamente Il "responsabile" deve essere autorevole (posizione dirigenziale elevata) 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 gli uffici 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" Paolo Atzeni, maggio 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 Paolo Atzeni, maggio

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 Paolo Atzeni, maggio Il ciclo di vita di un sito Web Pianificazione Progettazione Realizzazione Valutazione e avvio Gestione Paolo Atzeni, maggio

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 Paolo Atzeni, maggio 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 Paolo Atzeni, maggio

6 Conclusione della pianificazione Valutazione costi/benefici Decisione Paolo Atzeni, maggio Il ciclo di vita di un sito Web Pianificazione Progettazione Realizzazione Valutazione e avvio Gestione Paolo Atzeni, maggio

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 Paolo Atzeni, maggio 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 Paolo Atzeni, maggio

8 Un inciso: Information architecture Organizzazione delle informazioni Navigazione "Labelling" Indicizzazione e ricerca Paolo Atzeni, maggio 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à) Paolo Atzeni, maggio

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 Paolo Atzeni, maggio 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) Paolo Atzeni, maggio

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 Paolo Atzeni, maggio 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 non sa 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 Paolo Atzeni, maggio

11 Paolo Atzeni, maggio Paolo Atzeni, maggio

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 Paolo Atzeni, maggio 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) Paolo Atzeni, maggio

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 Paolo Atzeni, maggio 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 "information architecture"; attenzione al livello di astrazione "Guided Tour" Paolo Atzeni, maggio

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 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 della navigazione Paolo Atzeni, maggio 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 Paolo Atzeni, maggio

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 Paolo Atzeni, maggio 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! Paolo Atzeni, maggio

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" Paolo Atzeni, maggio Strumenti di ricerca: flessibilità Si procede per iterazioni successive: "associative learning" Gli obiettivi di ricerca si evolvono (a mano a mano che l'utente acquisisce 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) Paolo Atzeni, maggio

17 Strumenti di ricerca: funzionalità I motori di ricerca (e altri strumenti) possono e debbono essere configurati: 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 Paolo Atzeni, maggio 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 Paolo Atzeni, maggio

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 Paolo Atzeni, maggio Paolo Atzeni, maggio

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à? Paolo Atzeni, maggio 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 Paolo Atzeni, maggio

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 Paolo Atzeni, maggio 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 Paolo Atzeni, maggio

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 bottomup Alla fine, si debbono "riconciliare" i due approcci, inquadrando tutte le informazioni nell'architettura di dettaglio, ad esempio stabilendo 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) Paolo Atzeni, maggio Paolo Atzeni, maggio

24 Paolo Atzeni, maggio Progettazione: attività e prodotti (3) 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 Paolo Atzeni, maggio

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 Paolo Atzeni, maggio 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" Paolo Atzeni, maggio

26 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" modem lento modem veloce T1 1 secondo 2KB 8KB 100KB 10 secondi 34KB 150KB 2MB Paolo Atzeni, maggio regole euristiche per l'usabilità nel Web Keith Instone Derivate dalle euristiche proposte da Jakob Nielsen per le interfacce utente in generale ( Il criterio generale è l'uso efficace dei link Paolo Atzeni, maggio

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 Paolo Atzeni, maggio Regole euristiche dettagli 1. Visibility of system status The system should always keep users informed about what is going on, through appropriate feedback within reasonable time. "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 than system-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 Paolo Atzeni, maggio

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 the unwanted state without having to go through an extended dialogue. 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 Paolo Atzeni, maggio Regole euristiche dettagli (3) 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 Paolo Atzeni, maggio

29 Regole euristiche dettagli (4) 6. Recognition rather than recall Make objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should 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. Paolo Atzeni, maggio Regole euristiche dettagli (5) 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 nei bookmark": senza frame, con URL stabili, form con "GET" Paolo Atzeni, maggio

30 Regole euristiche dettagli (6) 8. Aesthetic and minimalist design Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. Evitare informazione non pertinente Riscrivere per il Web Procedere per raffinamenti Paolo Atzeni, maggio Regole euristiche dettagli (7) 9. Help users recognize, diagnose, and recover from errors Error messages should be expressed in plain language (no codes), 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 and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large. Paolo Atzeni, maggio

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 con l'information architecture e il sistema di navigazione) Paolo Atzeni, maggio 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 Paolo Atzeni, maggio

32 È necessaria una "struttura visuale" Articolazione, idea di organizzazione, contrasto Paolo Atzeni, maggio 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 Paolo Atzeni, maggio

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à: Paolo Atzeni, maggio 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 Paolo Atzeni, maggio

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 Paolo Atzeni, maggio 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 Paolo Atzeni, maggio

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) Paolo Atzeni, maggio 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à Paolo Atzeni, maggio

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 Paolo Atzeni, maggio 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 Paolo Atzeni, maggio

37 Progettazione: attività e prodotti (4) 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) Paolo Atzeni, maggio Progettazione: attività e prodotti (5) 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 Paolo Atzeni, maggio

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) Paolo Atzeni, maggio Paolo Atzeni, maggio

39 Paolo Atzeni, maggio Il ciclo di vita di un sito Web Pianificazione Progettazione Realizzazione Valutazione e avvio Gestione Paolo Atzeni, maggio

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 Paolo Atzeni, maggio Il ciclo di vita di un sito Web Pianificazione Progettazione Realizzazione Valutazione e avvio Gestione Paolo Atzeni, maggio

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 Paolo Atzeni, maggio Il ciclo di vita di un sito Web Pianificazione Progettazione Realizzazione Valutazione e avvio Gestione Paolo Atzeni, maggio

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 Paolo Atzeni, maggio Riferimenti P.J. Lynch and S. Horton. Web Style Guide: Basic Design Principles for Creating Web Sites, Yale University Press, (edizione italiana: Web guida di stile, Apogeo, 2000) L. Rosenfeld and P. Morville. Information architecture for the World Wide Web. O'Reilly, J. Nielsen. Designing Web Usability: The Practice of Simplicity. New Riders, (edizione italiana: Web usability, Apogeo 2000) Paolo Atzeni, maggio