Slide per il corso di Laboratorio Internet tenuto da R.Polillo all'Università degli Studi di Milano Bicocca (info in www.rpolillo.it)

1. Università degli Studi di Milano Bicocca Dipartimento 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

2. Fase 5: Sviluppo del sito 3 4 5 6 7 Web design Visual design Sviluppo funzioni Redazione dei contenuti Pubblicazione 1 Definizione dei requisiti Documento dei requisiti Prototipo di navigazione Prototipo funzionale Prototipo editoriale Sistema on line Prototipo di comunicazione 2 Avviamento del 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

3. … 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

4. Quello che dobbiamo fare “ forms” per i dialoghi interattivi

5. Esempio (1): template grafico

6. Esempio (2): la form

7. Esempio (3): home page di Alitalia

8. La Fase 5: Sviluppo del sito Costruzione del Prototipo funzionale Descrizione delle funzioni e della base di dati Verifica e convalida Progettazione del software prototipo di comunicazione (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) prototipo funzionale documento dei requisiti

12. Form design Da: A: Data di partenza: Orario: Orario: Data di ritorno: Adulti: Bambini 2-11 anni: Bambini 0-23 mesi: Ordina per: Orario Prezzo Classe : Business Economy Andata e ritorno Solo andata

13. Integrazione grafica

16. Prototipo funzionale: quali test? Test funzionale Test di usabilità Prototipo funzionale riciclo per modifiche suggerite dai test

19. 1. I DIAGRAMMI DI NAVIGAZIONE

20. 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”

22. Diagrammi di navigazione: notazione base 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) STATI EVENTO TRANSIZIONE

23. PRENOTA VOLO HOME dati corretti + CERCA scegli volo + PROCEDI PROCEDI ALL’ACQUISTO ALTRA RICERCA ALTRO VOLO dati corretti + PROCEDI dati corretti + PROCEDI ANNULLA ANNULLA ALTRA PRENOTAZIONE HOME dati errati + CERCA / msg errore dati errati + PROCEDI / msg errore dati errati + PROCEDI / msg errore Caso d’uso: PRENOTA VOLO FORM DI RICERCA VOLO ELENCO VOLI DATI VOLO SCELTO FORM DATI CLIENTE FORM DATI CARTA DI CREDITO CONFERMA ACQUISTO HOME CONVENZIONI: Gli eventi in caratteri maiuscoli rappresentano le etichette di bottoni pseudo-stato iniziale

24. Stati composti Stato composto Stato composto sottostati e 1 B C A e 2 A

25. INFO DI VIAGGIO HOME HOME CHI SIAMO NEWS PRENOTA VOLO CONSULTA ORARIO CERCA BAGAGLIO CONSULTA ORARIO PRENOTA VOLO NEWS CHI SIAMO CERCA BAGAGLIO INFO DI VIAGGIO

26. Diagrammi di navigazione: notazione base (per i più raffinati) [C] / A 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) STATI EVENTO TRANSIZIONE CONDIZIONE AZIONE

27. Condizioni B A D si può anche scrivere come: B A D e [a>0] e [ a<0] C C e [ a=0] e [a>0] [a=0] [a<0]

28. Giunzioni A C B A C B Si può scrivere come :

29. Esempio Seleziona bevanda o annulla Erogazione bevanda Macchina spenta Inserisci monete on [bevanda disponibile] / prelievo bevanda] annullamento / restituzione moneta seleziona bevanda monete inserite [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

30. Pseudo-stati e 1 B C A e 2 e 3 pseudo-stato di ingresso pseudo-stato di uscita

31. 2. LE FORMS

32. Da: A: Data di partenza: Orario: Orario: Data di ritorno: Adulti: Bambini 2-11 anni: Bambini 0-23 mesi: Ordina per: Orario Prezzo Classe : Business Economy Andata e ritorno Solo andata

33. Prototipi di carta schede per simulazione

34. utente “ computer” osservatori schede pronte all’uso scheda corrente diagramma di navigazione

35. 3. LO SCHEMA DELLA BASE DATI

37. Esempio: schema concettuale della base dati dai requisiti (bozza) prezzoUnitario Ordine indirizzoDiConsegna speseDiSpedizione importoTotale Cliente datiAnagrafici Prodotto Catalogo ClienteRegistrato userid password CartaDiCredito 1..1 0..  0..  1..  0..  1..  1..  1..1 Effettua Riguarda Utilizza FaParteDi

38. Esempio: Schema concettuale della base dati completato #Produttore nome indirizzo partitaIva Produttore RigaOrdine quantità Ordine #Ordine dataOrdine importoOrdine speseSpedizione indirizzoConsegna statoOrdine dataStatoOrdine #Articolo descrizione prezzoUnitario disponibilità Prodotto Catalogo 0..  1..  Contiene 1..  1..1 Utilizza Cliente #Cliente tipoCliente societaOPrivato nome indirizzo partitaIva dataUltimoAcquisto userid password dataRegistrazione CartaDiCredito #cartaDiCredito titolare dataDiScadenza 1..1 0..  Effettua 1..1 1..  SiComponeDi 0..  1..1 Riguarda #Catalogo titoloCatalogo ProdottoDa 1..1 0..  1..1 PagatoCon 1.. 

39. 4. LA STRUTTURA DELLE DIRECTORY DEL SITO

41. Organizzazione delle directory: esempio A B C E HOME D Mappa del sito SITO SEZ A SEZ C SEZ B immagini home.htm A.htm D.htm E.htm B.htm immagini B.htm immagini immagini Organizzazione delle directory

42. La costruzione del prototipo funzionale Costruzione del Prototipo funzionale Descrizione delle funzioni e della base di dati Verifica e convalida prototipo funzionale template grafici Progettazione del software prototipo di comunicazione documento dei requisiti (se non c’è software da sviluppare)

44. Test funzionale Test di usabilità Validazione con prototipo di carta Diagramma di navigazione Prototipo funzionale progettazione realizzazione e test riciclo per modifiche suggerite dai test riciclo per modifiche suggerite dai test

45. PRENOTA VOLO HOME dati corretti + CERCA scegli volo + PROCEDI PROCEDI ALL’ACQUISTO ALTRA RICERCA ALTRO VOLO dati corretti + PROCEDI dati corretti + PROCEDI ANNULLA ANNULLA ALTRA PRENOTAZIONE HOME dati errati + CERCA / msg errore dati errati + PROCEDI / msg errore dati errati + PROCEDI / msg errore FORM DI RICERCA VOLO ELENCO VOLI DATI VOLO SCELTO FORM DATI CLIENTE FORM DATI CARTA DI CREDITO CONFERMA ACQUISTO HOME