Progettazione di siti Web

Transcript

1 Progettazione di siti Web

2 Tipi di siti Siti statici Siti dinamici Software di progetto/gestione Editor visuali Content Management System

3 Siti Internet Un sito Internet è come un qualsiasi altro S.I. ma al tempo stesso è DIVERSO: Utenti spesso ESTERNI Obiettivi di COMUNICAZIONE Gestito (spesso) da personale non tecnico

4 Il modello del bar (Cantoni, Di Blas, Bolchini)

5 Fasi di progetto di un sito Internet

6 FASE DI DEFINIZIONE DEI REQUISITI

7 Definizione dei requisiti Fonte principale: il committente Stesura di un documento dei requisiti Validazione da parte del committente

8 Tipi di requisiti di contenuto di struttura di accesso al contenuto di navigazione di presentazione per le operazioni degli utenti per le operazioni del sistema legati alla gestione del sito e al suo mantenimento

9 Esplorazione dei requisiti Interviste individuali Questionari Focus group Osservazioni sul campo Analisi degli accessi al sito (progetti di miglioramento) Suggerimenti spontanei

10 Analisi dei siti concorrenti Per identificare le best practice Per ideare tratti distintivi Tipici aspetti da analizzare (indicativi!) Struttura Contenuti Menù e navigazione Servizi e funzionalità Grafica e layout Stile di comunicazione Fornire descrizioni e valutazioni

11 Analisi del sito esistente Per progetti di rinnovamento Punti di forza e debolezza Valutazione secondo i criteri di qualità

12 Tabella di descrizione degli utenti

13 Tabella dei contenuti (e dei servizi)

14 Stesura del documento dei requisiti: alcuni elementi chiave Descrizione del committente Obiettivi del nuovo sito (analisi del sito esistente) Analisi dei siti concorrenti Utenti Contenuti e servizi Interazione utenti-sito (ad es. scenari d uso, casi d uso) Stile di presentazione/comunicazione/grafica Requisiti tecnici Requisiti di gestione

15 FASE DI AVVIAMENTO

16 Fase di avviamento Si specificano Tempi Risorse Team Ecc

17 Fase di WEB DESIGN

18 Web design Dalle specifiche dei requisiti si definiscono i primi elementi progettuali del sito Il web designer Costruzione di alcuni prototipi

19 Mappe del sito

20 HOME PAGE LIVELLO 0 PAGINA 1.1 PAGINA 1.2 PAGINA 1.3 LIVELLO 1 PAGINA PAGINA PAGINA PAGINA LIVELLO 2

21 Mappa del sito Strutturazione gerarchica (a livelli di dettaglio) Possibili alcuni link trasversali (ad es. shortcut ) Pagine di contenuto e pagine di transito

22 Gabbie logiche

23 Logo Nome e identificazione della scuola Menù Barra "News" La scuola Materiale didattico Docenti Menù veloce 1: area studenti Menù veloce 2 area docenti Menù veloce 3 area orientam. Orari di lezione Uffici

24 Gabbia logica del sito Rappresentazione scarna della HP Aree della pagina e relativi contenuti Nessuno o pochi elementi grafici o testuali

25 Prototipo di navigazione

26

27 Prototipo di navigazione Struttura navigabile Prima versione di: Menù di navigazione Etichette Frame Ecc. Pochi (o nulli) elementi grafici

28 Fase di VISUAL DESIGN

29 Visual design Definisce le caratteristiche grafiche del sito: Colori, formati carattere, immagini, animazioni Il visual designer

30 La rilevanza del visual design

31 Fonte: Polillo, 2006

32 Fonte: Polillo, 2006

33 Fonte: Polillo, 2006

34 Layout grafici

35 Fonte: Polillo, 2006

36 Layout grafici Realizzati anche come immagini (es. JPEG) o su carta Identificano i principali elementi grafici Altri elementi (es. menù, testi) ridotti al minimo Mettono in luce l attrattività del sito Da discutere anche con il committente per la validazione

37 Guide di stile

38 Tratto da: Polillo 2006 (

39 Guide di stile Immagini (ad es. con programmi di grafica) Specificano nel dettaglio (e in modo codificato) gli elementi grafici: Figure, logo, animazioni ecc. e loro posizione Blocchi di testo, pulsanti, ecc. Dimensioni Colori (aree, sfondi, cornici, caratteri, ecc.) eventualmente con codice Font, interlinea, ecc.

40 Fase di SVILUPPO DEL SITO

41 Sviluppo del sito Traduzione degli schemi precedenti in codice html Pagine spesso ancora vuote di contenuto

42 REDAZIONE DEI CONTENUTI

43 REDAZIONE DEI CONTENUTI Redattori (content editor) e direttore editoriale (content manager) Identificazione, reperimento e adattamento dei contenuti Aggiornamento continuo del sito

44 Gli strumenti PIANO EDITORIALE Organizzazione dei contenuti, fonti, responsabilità degli aggiornamenti, frequenza, ecc. GUIDA EDITORIALE Indicazioni di stile, modalità di comunicazione, linguaggio, ecc. Strumenti di uniformazione e di continuità Uso di Content Management System

45 PUBBLICAZIONE E TEST FINALI