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.2  PAGINA 1.3 

PAGINA 1.3.2 PAGINA 1.3.1 PAGINA 1.1.2 PAGINA 1.1.1 

LIVELLO 0 

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

Barra ʺNewsʺ Menù 

Logo  Nome e identificazione della scuola 

Menù veloce 1: area studenti 

Menù veloce 2 area docenti 

Menù veloce 3 area orientam. 

La scuola 

Materiale didattico 

Docenti 

Orari di lezione 

Uffici

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