Progettazione di siti Web

Progettazione di siti Web
Tipi di siti • Siti statici • Siti dinamici Software di progetto/gestione • Editor visuali • Content Management System
Siti Internet • Un sito Internet è come un qualsiasi altro S.I. … • … ma al tempo stesso è DIVERSO: – Utenti generalmente 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
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
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)
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
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 scarna della HP • Aree della pagina e relativi contenuti • Nessuno o pochi elementi grafici o testuali
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”
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 • 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 • Pagine spesso ancora vuote di contenuto
REDAZIONE DEI CONTENUTI
REDAZIONE DEI CONTENUTI • Redattori (content editor) e direttore editoriale (content manager) • Identificazione, reperimento 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