Progettazione di siti Web - Universit di Padova
Transcript of Progettazione di siti Web - Universit di Padova
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
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à”
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 utentisito (ad es. scenari d’uso, casi d’uso) • Stile di presentazione/comunicazione/grafica • Requisiti tecnici • Requisiti di gestione
Web design
• Dalle specifiche dei requisiti si definiscono i primi “elementi progettuali” del sito
• Il “web designer” • Costruzione di alcuni “prototipi”
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”
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
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.
Sviluppo del sito
• Traduzione degli schemi precedenti in codice html
• Pagine spesso ancora vuote di contenuto
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