Laboratorio internet 9: Sviluppo delle funzioni

Università degli Studi di Milano BicoccaDipartimento di Informatica, Sistemistica e Comunicazione

Laboratorio di Internet /Laboratorio di progettazione (mod.1)

Anno Accademico 2009-2010

LEZIONE 9

FASE 5: SVILUPPO DELLE FUNZIONI Roberto Polillo

Fase 5: Sviluppo del sito

3 4 5 6 7Web

designVisual design

Sviluppofunzioni

Redazionedei contenuti

Pubblicazione

1Definizionedei requisiti

Documento dei requisiti

Prototipo di navigazione

Prototipo funzionale

Prototipo editoriale

Sistema on line

Prototipo di comunicazione

2Avviamentodel progetto

Piano di qualità

Gestione del sito

L’obiettivo di questa fase:

- progettare le funzioni interattive del sito e la base dei dati se esistente- realizzare un nuovo prototipo navigabile: il prototipo funzionale - in pratica, è il sito completo vuoto di contenuti

…ma la struttura di quest’area, dove si svolge il dialogo nei servizi interattivi, deve ancora essere specificata

La struttura generale delle pagine (“template grafici” è già completamente definita…

Che cosa abbiamo fatto finora

Quello che dobbiamo fare

“forms” per i dialoghi interattivi

Esempio (1): template grafico

Esempio (2): la form

Esempio (3): home page di Alitalia

La Fase 5: Sviluppo del sito

Costruzione delPrototipofunzionale

Descrizionedelle funzioni e

della base di dati

Verifica econvalida

prototipofunzionale

Progettazionedel software

prototipo di comunicazione

documentodei requisiti

(se non c’è software da sviluppare)

Nel vostro caso, non avete sw da sviluppare, ma solo componenti predefiniti da integrare

(e armonizzare con la grafica)

Se c’è software da progettare…

… dovete fare quattro cose:1. Per ogni caso d’uso nei requisiti, disegnare il

diagramma di navigazione2. Per ogni diagramma di navigazione, disegnare le

form necessarie3. Completare lo schema concettuale della base dei dati

che avete messo nei requisiti4. Definire la strutture delle directory del sito (per chi

non usa un CMS)

Altrimenti….

Se non c’è sw da progettare…

… dovete integrare i componenti funzionali che avete individuato:

- forniti direttamente dal CMS utilizzato, oppure

- disponibili fra le applicazioni “standard” del CMS utilizzato, oppure

- disponibili in rete come widget- disponibili come servizio online (in tal caso, la grafica dovrà essere uniformata, affinchè l’utente non percepisca il cambio di provider)

- disponibili come bottoni predefiniti per l’accesso ad altre applicazioni Web 2.0 (“social buttons”)

Aspetti da considerare

- La integrazione con i template grafici già definiti- Nuove finestre o no?- La definizione delle form eventuali- Il costo totale dei servizi premium (oggi e in

prospettiva)- I “social buttons” (oggi e in prospettiva)

Da: A:

Data di partenza: Orario:

Orario:Data di ritorno:

Adulti: Bambini 2-11 anni: Bambini 0-23 mesi:

Ordina per:

OrarioPrezzo

Classe :

BusinessEconomy

Andata e ritornoSolo andata

Form design

Integrazione grafica

Social buttons: esempi

http://www.airc.it/

http://corsow.wordpress.com/

http://www.greenpeace.org/usa/

http://www.unicefusa.org/news/unicef-usa-social-media.html

http://www.airc.it/

http://corsow.wordpress.com/

http://www.greenpeace.org/usa/



Il prototipo funzionale



della base di dati

Verifica econvalida

prototipofunzionale





• Deve essere navigabile e completo, senza contenuti• Deve essere testato (!)

Test funzionale

Test di usabilità


riciclo per modifichesuggerite dai test

Prototipo funzionale: quali test?

APPENDICE

Le slide che seguono descrivono il processo svolto da chi deve sviluppare del software ad hoc e possono essere ignorate nella presente edizione del corso

Se c’è software da progettare…

… dovete fare quattro cose:1. Per ogni caso d’uso nei requisiti, disegnare il

diagramma di navigazione2. Per ogni diagramma di navigazione, disegnare le

form necessarie3. Completare lo schema concettuale della base dei dati

che avete messo nei requisiti4. Definire la strutture delle directory del sito (per chi

non usa un CMS)

Altrimenti….

1. I DIAGRAMMI DI NAVIGAZIONE

Dal diagramma dei casi d’uso ai diagrammi di navigazione

Ricerca prodotto

Ordina prodotto

Visualizza dati utente

Inserisci prodotto

Modifica prodotto

Sistema bancario

Utente

Gestore del negozio

<sistema>

Diagramma di navigazione di “Ricerca prodotto”

Diagramma di navigazione di “Ordina prodotto”

Diagramma di navigazione di “Visualizza dati utente”

Diagramma di navigazione di “Inserisci prodotto”

Diagramma di navigazione di “Modifica prodotto”

Che cos’è un diagramma di navigazione

• Un diagramma che descrive in dettaglio l’interazione fra utente e sito

• Usiamo i diagrammi per le macchine a stati di UML (state machine diagram), inventati da David Harel nel 1987

• Sono facili da usare; sono descritti ed esemplificati nell’appendice 4 del libro

• Sono indispensabili!

A

B

E significa:

“quando il sito è nello stato A (= presenta sul video una certa pagina),

se si verifica l’evento E (=l’utente effettua una certa azione),

il sito va nello stato B (= presenta a video un’altra pagina)

Diagrammi di navigazione: notazione base

STATI

EVENTOTRANSIZIONE

PRENOTA VOLO

HOME

dati corretti + CERCA

scegli volo + PROCEDI

PROCEDI ALL’ACQUISTO

ALTRA RICERCA

ALTRO VOLO

dati corretti + PROCEDI


ANNULLA

ANNULLA

ALTRA PRENOTAZIONE

HOME

dati errati + CERCA / msg errore

dati errati + PROCEDI / msg errore


Caso d’uso: PRENOTA VOLO

FORM DI RICERCA

VOLO

ELENCO VOLI

DATI VOLOSCELTO

FORM DATI CLIENTE

FORM DATI CARTA DI CREDITO

CONFERMAACQUISTO

HOME

CONVENZIONI:

Gli eventi in caratteri maiuscoli rappresentano le etichette di bottoni

pseudo-stato iniziale

Stati composti

e1

B C

A

e2

A

Stato composto

Stato composto

sottostati

INFO DIVIAGGIO

HOME

HOME

CHI SIAMO NEWSPRENOTA

VOLOCONSULTA

ORARIOCERCA

BAGAGLIO

CONSULTA ORARIO

PRENOTA VOLONEWSCHI SIAMO

CERCA BAGAGLIO

INFO DI VIAGGIO

A

B

E significa:

“quando il sito è nello stato A (= presenta sul video una certa pagina),

se si verifica l’evento E (=l’utente effettua una certa azione),

il sito va nello stato B (= presenta a video un’altra pagina)

Diagrammi di navigazione: notazione base(per i più raffinati)

STATI

EVENTOTRANSIZIONE

[C] / A

CONDIZIONE

AZIONE

Condizioni

B

A

D

si può anche scrivere come:

B

A

D

e [a>0]

e [ a<0]

C Ce [ a=0] e

[a>0]

[a=0]

[a<0]

Giunzioni

A C

B

A C

B

Si può scrivere come :

Esempio

Seleziona bevanda o

annulla

Erogazione bevanda

Macchina spenta

Inserisci monete

on

[bevanda disponibile] /

prelievo bevanda]

annullamento / restituzione moneta

seleziona bevanda

moneteinserite

[bevanda terminata]

off

off

Inserisci monete

Inserisci moneta

[moneta accettata] / incr importo

[importo < prezzo]

[moneta non accettata] / restituzione moneta

[importo = prezzo]

[importo > prezzo]/ erogazione resto

Pseudo-stati

e1B C

A

e2

e3

pseudo-stato di ingresso

pseudo-stato di uscita

2. LE FORMS

Da: A:

Data di partenza: Orario:

Orario:Data di ritorno:

Adulti: Bambini 2-11 anni: Bambini 0-23 mesi:

Ordina per:

OrarioPrezzo

Classe :

BusinessEconomy

Andata e ritornoSolo andata

Prototipi di carta

schede per simulazione

utente“computer”

osservatori

schede pronte all’uso scheda corrente

diagramma di navigazione

3. LO SCHEMA DELLA BASE DATI

Che cosa dovete fare

Completare lo schema della base dati abbozzato nei requisiti, aggiungendo tutti i dettagli mancanti per una corretta realizzazione

prezzoUnitario

Ordine

indirizzoDiConsegnaspeseDiSpedizioneimportoTotale

Cliente

datiAnagrafici

Prodotto

CatalogoClienteRegistrato

useridpassword

CartaDiCredito

1..1 0.. 0.. 1..

0..

1..

1.. 1..1

Effettua Riguarda

Utilizza

FaParteDi

Esempio: schema concettuale della base dati dai requisiti (bozza)

#ProduttorenomeindirizzopartitaIva

Produttore

RigaOrdine

quantità

Ordine

#OrdinedataOrdineimportoOrdinespeseSpedizioneindirizzoConsegnastatoOrdinedataStatoOrdine

#ArticolodescrizioneprezzoUnitariodisponibilità

Prodotto

Catalogo

0..

1..Contiene

1..1..1

Utilizza

Cliente

#ClientetipoClientesocietaOPrivatonomeindirizzopartitaIvadataUltimoAcquistouseridpassworddataRegistrazione

CartaDiCredito

#cartaDiCreditotitolaredataDiScadenza

1..1

0..

Effettua

1..1 1..SiComponeDi

0.. 1..1

Riguarda

#CatalogotitoloCatalogo

ProdottoDa

1..1

0..

1..1

PagatoCon

1..

Esempio: Schema concettuale della base dati completato

4. LA STRUTTURA DELLE DIRECTORY DEL SITO

Che cosa dovete fare

Prima di procedere alla realizzazione del sito, dovete definire la struttura delle directory che conterranno tutto il materiale necessario

A B C

E

HOME

D

Mappa del sito

SITOSITO

SEZ ASEZ A

SEZ CSEZ C

SEZ BSEZ B

immaginiimmagini

home.htmhome.htm

A.htmA.htm

D.htmD.htm

E.htmE.htm

B.htmB.htm

immaginiimmagini

B.htmB.htm

immaginiimmagini

immaginiimmagini

Organizzazione delle directory

Organizzazione delle directory: esempio

La costruzione del prototipo funzionale



della base di dati

Verifica econvalida

prototipofunzionale

templategrafici





Costruzione del prototipo funzionale

• Deve essere navigabile e completo, senza contenuti

• Deve essere testato

Test funzionale

Test di usabilità

Validazione con prototipo

di carta

Diagramma dinavigazione


progettazione realizzazione e test



PRENOTA VOLO

HOME

dati corretti + CERCA

scegli volo + PROCEDI

PROCEDI ALL’ACQUISTO

ALTRA RICERCA

ALTRO VOLO



ANNULLA

ANNULLA

ALTRA PRENOTAZIONE

HOME

dati errati + CERCA / msg errore



FORM DI RICERCA

VOLO

ELENCO VOLI

DATI VOLOSCELTO

FORM DATI CLIENTE

FORM DATI CARTA DI CREDITO

CONFERMAACQUISTO

HOME

Education

Laboratorio internet 9: Sviluppo delle funzioni