Progettazione di siti Web

Progettazione di siti Web
Tipi di siti
• Siti statici
• Siti dinamici
Software di progetto/gestione
• Editor visuali
• Content Management System
• Portali
Siti Internet
• Un sito Internet è come un qualsiasi altro S.I. …
• … ma al tempo stesso è PARTICOLARE:
– Utenti spesso ESTERNI
– Obiettivi di COMUNICAZIONE
– Gestito (spesso) da personale non tecnico
Il “modello del bar” (Cantoni, Di Blas, Bolchini)
Fasi di progetto di un sito Internet
FASE DI DEFINIZIONE DEI
REQUISITI
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
Definizione dei requisiti
• Fonte principale: il committente
• Stesura di un documento dei requisiti
• Validazione da parte del committente
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
Esplorazione dei requisiti
•
•
•
•
•
•
Interviste individuali
Questionari
Focus group
Osservazioni sul campo
Analisi degli accessi al sito (progetti di miglioramento)
Suggerimenti spontanei
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
– In forma tabellare: descrivendo o dando punteggi ai siti
secondo i vari criteri o aspetti scelti
– Con diagrammi (ad es. grafico radar, ecc.)
Analisi del sito esistente
• Per progetti di rinnovamento
• Punti di forza e debolezza
• Valutazione secondo i “criteri di qualità”
Tabella di descrizione degli utenti
Tabella dei
contenuti
(e dei servizi –
fonte: Polillo 2006)
FASE DI AVVIAMENTO
Fase di avviamento
• Si specificano
–
–
–
–
Tempi
Risorse
Team
Ecc…
Fase di WEB DESIGN
Web design
• Dalle specifiche dei requisiti si definiscono i primi
“elementi progettuali” del sito
• Il “web designer”
• Costruzione di alcuni “prototipi”
Mappe del sito
HOME
PAGE
PAGINA 1.1
PAGINA 1.1.1
PAGINA 1.1.2
PAGINA 1.2
LIVELLO 0
PAGINA 1.3
PAGINA 1.3.1
PAGINA 1.3.2
LIVELLO 1
LIVELLO 2
Mappa del sito
• Strutturazione gerarchica (a livelli di dettaglio)
• Possibili alcuni link trasversali (ad es. “shortcut”)
• Pagine di contenuto e pagine “di transito”
Gabbie logiche
Logo
Nome e identificazione della scuola
Menù
Barra ʺNewsʺ
La scuola
Materiale didattico
Docenti
Orari di lezione
Uffici
Menù veloce 1:
area studenti
Menù veloce 2
area docenti
Menù veloce 3
area orientam.
Gabbia logica del sito
• Rappresentazione scherna della HP
• Aree della pagina e relativi contenuti
• Nessuno o pochi elementi grafici o testuali
Prototipo di navigazione
Prototipo di navigazione
• Struttura navigabile
• Prima versione di:
–
–
–
–
Menù di navigazione
Etichette
Frame
Ecc.
• Pochi (o nulli) elementi grafici
Fase di VISUAL DESIGN
Visual design
• Definisce le caratteristiche grafiche del sito:
– Colori, formati carattere, immagini, animazioni
• Il “visual designer”
La rilevanza del visual design
Fonte: Polillo, 2006
Fonte: Polillo, 2006
Fonte: Polillo, 2006
Layout grafici
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
Guide di stile
Tratto da: Polillo 2006
(www.rpolillo.it)
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.
Fase di SVILUPPO DEL SITO
Sviluppo del sito
• Traduzione degli schemi precedenti in codice
(html, ecc.)
• Pagine spesso ancora senza contenuto o con
contenuto incompleto
REDAZIONE DEI CONTENUTI
REDAZIONE DEI CONTENUTI
• Redattori (content editor) e direttore editoriale
(content manager):
– Identificazione, reperimento, revisione e
adattamento dei contenuti
– Aggiornamento continuo del sito
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
PUBBLICAZIONE E TEST FINALI