Laboratorio internet 9: Sviluppo delle funzioni

1,224 views

Published on

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

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,224
On SlideShare
0
From Embeds
0
Number of Embeds
35
Actions
Shares
0
Downloads
41
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Laboratorio internet 9: Sviluppo delle funzioni

  1. 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. 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. 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. 4. Quello che dobbiamo fare “ forms” per i dialoghi interattivi
  5. 5. Esempio (1): template grafico
  6. 6. Esempio (2): la form
  7. 7. Esempio (3): home page di Alitalia
  8. 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
  9. 9. Se c’è software da progettare… <ul><li>… dovete fare quattro cose: </li></ul><ul><li>Per ogni caso d’uso nei requisiti, disegnare il diagramma di navigazione </li></ul><ul><li>Per ogni diagramma di navigazione, disegnare le form necessarie </li></ul><ul><li>Completare lo schema concettuale della base dei dati che avete messo nei requisiti </li></ul><ul><li>Definire la strutture delle directory del sito (per chi non usa un CMS) </li></ul><ul><li>Altrimenti…. </li></ul>
  10. 10. Se non c’è sw da progettare… <ul><li>… dovete integrare i componenti funzionali che avete individuato: </li></ul><ul><li>- forniti direttamente dal CMS utilizzato, oppure </li></ul><ul><li>- disponibili fra le applicazioni “standard” del CMS utilizzato, oppure </li></ul><ul><li>- disponibili in rete come widget </li></ul><ul><li>- disponibili come servizio online (in tal caso, la grafica dovrà essere uniformata, affinchè l’utente non percepisca il cambio di provider) </li></ul><ul><li>- disponibili come bottoni predefiniti per l’accesso ad altre applicazioni Web 2.0 (“social buttons”) </li></ul>
  11. 11. Aspetti da considerare <ul><li>La integrazione con i template grafici già definiti </li></ul><ul><li>Nuove finestre o no? </li></ul><ul><li>La definizione delle form eventuali </li></ul><ul><li>Il costo totale dei servizi premium (oggi e in prospettiva) </li></ul><ul><li>I “social buttons” (oggi e in prospettiva) </li></ul>
  12. 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. 13. Integrazione grafica
  14. 14. Social buttons: esempi <ul><li>http://www.airc.it/ </li></ul><ul><li>http://corsow.wordpress.com/ </li></ul><ul><li>http://www.greenpeace.org/usa/ </li></ul><ul><li>http://www.unicefusa.org/news/unicef-usa-social-media.html </li></ul>
  15. 15. Il prototipo funzionale 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) <ul><li>Deve essere navigabile e completo, senza contenuti </li></ul><ul><li>Deve essere testato (!) </li></ul>prototipo funzionale documento dei requisiti
  16. 16. Prototipo funzionale: quali test? Test funzionale Test di usabilità Prototipo funzionale riciclo per modifiche suggerite dai test
  17. 17. <ul><li>APPENDICE </li></ul><ul><li>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 </li></ul>
  18. 18. Se c’è software da progettare… <ul><li>… dovete fare quattro cose: </li></ul><ul><li>Per ogni caso d’uso nei requisiti, disegnare il diagramma di navigazione </li></ul><ul><li>Per ogni diagramma di navigazione, disegnare le form necessarie </li></ul><ul><li>Completare lo schema concettuale della base dei dati che avete messo nei requisiti </li></ul><ul><li>Definire la strutture delle directory del sito (per chi non usa un CMS) </li></ul><ul><li>Altrimenti…. </li></ul>
  19. 19. 1. I DIAGRAMMI DI NAVIGAZIONE
  20. 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”
  21. 21. Che cos’è un diagramma di navigazione <ul><li>Un diagramma che descrive in dettaglio l’interazione fra utente e sito </li></ul><ul><li>Usiamo i diagrammi per le macchine a stati di UML (state machine diagram), inventati da David Harel nel 1987 </li></ul><ul><li>Sono facili da usare; sono descritti ed esemplificati nell’appendice 4 del libro </li></ul><ul><li>Sono indispensabili! </li></ul>
  22. 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. 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. 24. Stati composti Stato composto Stato composto sottostati e 1 B C A e 2 A
  25. 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. 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. 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. 28. Giunzioni A C B A C B Si può scrivere come :
  29. 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. 30. Pseudo-stati e 1 B C A e 2 e 3 pseudo-stato di ingresso pseudo-stato di uscita
  31. 31. 2. LE FORMS
  32. 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. 33. Prototipi di carta schede per simulazione
  34. 34. utente “ computer” osservatori schede pronte all’uso scheda corrente diagramma di navigazione
  35. 35. 3. LO SCHEMA DELLA BASE DATI
  36. 36. Che cosa dovete fare <ul><li>Completare lo schema della base dati abbozzato nei requisiti, aggiungendo tutti i dettagli mancanti per una corretta realizzazione </li></ul>
  37. 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. 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. 39. 4. LA STRUTTURA DELLE DIRECTORY DEL SITO
  40. 40. Che cosa dovete fare <ul><li>Prima di procedere alla realizzazione del sito, dovete definire la struttura delle directory che conterranno tutto il materiale necessario </li></ul>
  41. 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. 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)
  43. 43. Costruzione del prototipo funzionale <ul><li>Deve essere navigabile e completo, senza contenuti </li></ul><ul><li>Deve essere testato </li></ul>
  44. 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. 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

×