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

PAGINA 1.3.2PAGINA 1.3.1PAGINA 1.1.2PAGINA 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 2area docenti

Menù veloce 3area orientam.

La scuola

Materiale didattico

Docenti

Orari di lezione

Uffici

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