La progettazione di un
sito web
Analisi dei requisiti
Gli utenti
vengono
trasportati da
un sito all’altro
attraverso link
I motori di
ricerca
restituiscono
migliaia di link
I siti web devono
essere
costantemente
aggiornati.
Gli utenti
navigano alla
ricerca di
informazioni,
acquisti, giocare,
leggere news.
Creare e gestire un
sito web è un
processo in continua
evoluzione e non
una attività che va
fatta una sola volta
Analisi del nostro progetto
Porsi delle domande:
1. Quale è il Target di utenza
2. Cosa comunicare
3. Come…..
1.
2.
3.
4.
5.
…Organizzare il contenuto
….Pubblicarlo
…Verificare completezza
….Aggiornarlo
….Pubblicizzarlo
Cosa
Procedimento «a cascata»
• Il modello a cascata non si presta bene alla
progettazione dei website a causa della necessità di
continui aggiornamenti anche radicali
Procedimento «a spirale»
• Questo modello è quanto di più vicino al ciclo di
vita di un sito web
Procedimento «a spirale»
• Ogni soluzione è un prototipo, nel senso che non è
mai definitiva e riceve continui aggiornamenti.
Fase 1
analisi dei requisiti
fattibilità
Analisi e fattibilità
Insieme al cliente si analizza il problema e le esigenze
del cliente per capire quel che egli vuole.
Tra le cose da definire abbiamo:
• Tipo di sito
• Target d’utenza
• Messaggio da comunicare
Tipo di sito
• Siti commerciali : sono siti dove si implementa ecommerce, è importante la vetrina dei prodotti con
listini e merce, la sicurezza dei pagamenti.
• Siti generalisti: (Virgilio, MSN) sono portali da cui gli
utenti partono e devono fornire servizi di base (meteo,
news veloci, mail, forum) di solito prevedono una
gestione tempestiva delle news e l’aggiornamento è
fondamentale.
• Siti specialistici: sono concentrati su alcuni aspetti
(luoghi geografici, aree tematiche…) e si rivolgono ad
un pubblico più selezionato (ricette, auto d’epoca,
giochi medievali, arti antiche….). Per questi siti la cosa
che è più importante è il contenuto anche se la
gestione di questi contenuti è poco agevole.
Altri vincoli
• Siti per organizzazioni, aziende, industrie: la soddisfazione
soggettiva non conta, il sito deve essere leggero, deve
essere facile l’apprendimento di come funziona il sito.
• Siti per casa, office, divertimento: rivolti al grande pubblico,
devono avere facile apprendimento, devono dare
soddisfazione soggettiva perché l’utente che si allontana è
spesso perso per sempre. Importante è l’assistenza online
perché tali utenti sono inesperti, la semplicità e
immediatezza, i costi di aggiornamento bassi.
• Siti per ultra specialisti: è rivolto ad utenti esperti in una
specifica materia, hanno frequenza di accesso bassa, si
focalizza sui contenuti e non sulle funzionalità del sito.
Altri vincoli
• Siti statici: le pagine contengono codice html, non
sono personalizzate per utenti diversi, possono
essere costruti con WEB EDITOR tipo Dreamweaver
o NVU,vengono caricati sui server di hosting con
programmi FTP.
• Siti dinamici: l’utente può disporre di pagine ad egli
adattate, di funzionalità interattive (registrazione,
login, acquisti, forum, chat). Le pagine vengono
create dinamicamente da un software (CMS)
caricato sul server remoto con il supporto di una
base di dati e di un motore per database. Le
tecnologie usate sono php, jsp, asp.
Individuare il target di utenza
• Principianti
• Navigatori
• Esperti
• Utenti internazionali.
Definizione del messaggio
Il progetto
Unità 2 - Lezione 3
Il Visual design
(progettazione grafica)
• Progetto dell’interfaccia grafica verso l’utente.
• Più importante che per i media tradizionali perché il
web richiede interattività.
• Bisogna rendere facilmente visibili:
•
•
•
•
•
Informazioni,
Link,
Paragrafi
Tabelle
Mappe
• Conviene rappresentare graficamente
i concetti (uso di schemi e disegni).
Il Visual design
(progettazione grafica)
• Non eccedere per non rallentare il transfer-rate.
• Conviene usare le metafore :
• Libro = informazioni aggiuntive;
• Porta= exit
• Busta= invio informazioni.
• Usare metafore note e non cambiarle in punti
diversi del sito (coerenza / uniformità).
• Colori: nel descriverli usare la tavolozza dei colori
standard valida per i browser.
Da cosa è composta la pagina web
Tre aree:
• Header: contiene i link a tutte le
sezioni del sito.
• Body: contiene le informazioni
principali e va formattato in
modo eguale per tutte le pagine.
Bisogna cioè definire un layout.
• Footer: contiene informazioni
quali: ultima revisione,
copyright, pulsanti di
navigazione, informazioni
generali del sito.
Intestazione
Corpo della pagina
Fondo della pagina
Tre aree:
• Header:
• Body:
• Footer:
Unità 2 - Lezione 4
Sviluppo del sito web
Significa progettare le
Funzioni interattive
la Base di dati.
• Bisogna fare un primo prototipo a contenuti ridotti.
Bussines object
• Graphic objects (GO) oggetti grafici/interfaccia:
sono i componenti dell’interfaccia: pulsanti,
controlli, finestre, bottoni, menù) che permettono
di operare sui BO
• Bussiness Objects (BO) oggetti entità: componenti
tramite cui il sistema «funziona» spesso collegati al
database.
GO  BO1 , BO2 … BO7
• Per ogni oggetto entità possono essere previsti più
oggetti interfaccia .
Bussines object
• Per ogni oggetto entità possono essere previsti più
oggetti interfaccia .
• Per esempio possiamo prevedere oggetti
interfaccia per:
• Visualizza, cancella, inserisci elemento nel database
• Lista elementi nel database
• Trova elemento nel database
• Possono riferirsi tutte sullo stesso BO cioè sulla
stessa funzionalità del database.
Oggetti interfaccia
• Il diagramma dei casi d’uso ci aiuta a capire tutti gli
oggetti da inserire sull'interfaccia.
n.b.: la relazione <<include>> indica che un caso d’uso esiste solo in quanto attivato dal caso
d’uso originario. La relazione <<extend>> fornisce una forma di estensione del
comportamento di un caso base (login fallito) attivando un altro caso d’uso (registrazione) in
certe ipotesi (la registrazione potrebbe attivarsi solo se lo user non è nel database).
Oggetti interfaccia
• In questo caso devo prevedere 3 oggetti interfaccia
per gestire i tre casi d’uso
• Login
• Login fallito
• Registrazione .
Oggetti grafici
• Ogni oggetto grafico dello stesso tipo (menù,
finestre, controlli, bottoni) si distingue dall’altro
per:
1. Layout o aspetto
2. BO collegati
3. Eventi collegati
Oggetti grafici
• Eventi da gestire a livello dell’interfaccia:
1. Operazione ammessa (un messaggio di avviso)
2. Operazione di collegamento (genera altro evento)
3. Operazione di attivazione (attiva la funzione altri
oggetti grafici)
Definire la mappa di navigazione
Mappa dei percorsi di
navigazione
• A partire dagli scenari disegnati in UML bisogna poi definire
la mappa di navigazione.
• La mappa descrive i percorsi di navigazione tra gli oggetti
dell’interfaccia GO ma anche tra gli oggetti entità BO