Your SlideShare is downloading. ×
  • Like
Laboratorio internet 9: Sviluppo delle funzioni
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Laboratorio internet 9: Sviluppo delle funzioni

  • 959 views
Published

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

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
959
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
39
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 9. Se c’è software da progettare…
    • … dovete fare quattro cose:
    • Per ogni caso d’uso nei requisiti, disegnare il diagramma di navigazione
    • Per ogni diagramma di navigazione, disegnare le form necessarie
    • Completare lo schema concettuale della base dei dati che avete messo nei requisiti
    • Definire la strutture delle directory del sito (per chi non usa un CMS)
    • Altrimenti….
  • 10. 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”)
  • 11. 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)
  • 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
  • 14. 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
  • 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)
    • Deve essere navigabile e completo, senza contenuti
    • Deve essere testato (!)
    prototipo funzionale documento dei requisiti
  • 16. Prototipo funzionale: quali test? Test funzionale Test di usabilità Prototipo funzionale riciclo per modifiche suggerite dai test
  • 17.
    • 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
  • 18. Se c’è software da progettare…
    • … dovete fare quattro cose:
    • Per ogni caso d’uso nei requisiti, disegnare il diagramma di navigazione
    • Per ogni diagramma di navigazione, disegnare le form necessarie
    • Completare lo schema concettuale della base dei dati che avete messo nei requisiti
    • Definire la strutture delle directory del sito (per chi non usa un CMS)
    • Altrimenti….
  • 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”
  • 21. 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!
  • 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
  • 36. Che cosa dovete fare
    • Completare lo schema della base dati abbozzato nei requisiti, aggiungendo tutti i dettagli mancanti per una corretta realizzazione
  • 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
  • 40. Che cosa dovete fare
    • Prima di procedere alla realizzazione del sito, dovete definire la struttura delle directory che conterranno tutto il materiale necessario
  • 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)
  • 43. Costruzione del prototipo funzionale
    • Deve essere navigabile e completo, senza contenuti
    • Deve essere testato
  • 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