1. Queste slides PowerPoint contengono tutte le figure del libro “Plasmare il Web”, di Roberto Polillo (ed.Apogeo, 2006) http://www.rpolillo.it/index.php/libri/plasmare-il-web/ Vengono qui rese disponibili per scopo didattico. Possono essere usate liberamente, citando la fonte.

2. CAPITOLO 1

3. Internet client browser server richiesta di una pagina pagina richiesta pagine web web server

4. Internet client browser web server / application server template delle pagine web CMS server base di dati del CMS richiesta di una pagina pagina richiesta (generata dinamicamente) Data Base Management System applicazione base di dati applicativa

5. Definizione dei requisiti Committente, consulente Visual design Visual designer Esercizio del sito Web master Gestione dei server Sistemista Sviluppo del sito Progettista software Redattore Redazione dei contenuti Web designer Web design Gestione della connettività internet Internet service provider 1 2 3 4 5 6 7 8

6. Progettazione Prototipazione Valutazione (prova d’uso) Rilascio

7. Requisiti Web design Visual design Sviluppo Redazione contenuti Valutazione Rilascio

8. Prototipo 1 tempo Requisiti Web design Visual design Sviluppo software Contenuti impegno Prototipo 2 Prototipo 3 Prototipo 4 Prototipo 5 Prototipo 6 Fase 1 Fase 2 Fase 3 Fase 4 Fase 5 Fase 6

9. 3 4 5 6 7 Web design Visual design Sviluppo 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

10. Esplorazione Stesura requisiti Convalida Progettazione architettura informativa Prototipo di navigazione Verifica e convalida Progettazione della grafica Prototipo di comunicazione Verifica e convalida Progettazione del software Prototipo funzionale Verifica e convalida Progettazione dei contenuti Prototipo editoriale Verifica e convalida Installazione su sistema di produzione Collaudo finale Pubblicazione FASE 1: REQUISITI FASE 2: AVVIAMENTO FASE 3: WEB DESIGN FASE 4: VISUAL DESIGN FASE 5: SVILUPPO FASE 6: REDAZIONE DEI CONTENUTI FASE 7: PUBBLICAZIONE Esercizio del sito Pianificazione (sviluppo interno) o Negoziazione del contratto (sviluppo esterno) Organizzazione gruppo di progetto

11. Gestione del progetto Controllo di avanzamento Reporting Committente 3 4 5 6 7 Web design Visual design Sviluppo 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

12. CAPITOLO 2

13. Definizione dei requisiti Committente, consulente Web designer Sviluppo del sito Progettista software Esercizio del sito Web master Gestione dei server Sistemista Gestione della connettività internet Internet service provider Redattore Redazione dei contenuti Web design Visual designer Comunicazione Usabilità Funzionalità Contenuto Accessibilità Obiettivi Architettura Gestione Visual design 1 2 3 4 5 6 7 8

14. Contenuto Il contenuto informativo è corretto, e adeguato agli scopi del sito? Comunicazione Il sito raggiunge i suoi obiettivi di comunicazione? Accessibilità Funzionalità Le funzioni del sito sono adeguate e affidabili? Gestione L’operatività del sito è ben gestita ? Architettura La struttura e la navigazione del sito sono adeguate? Il sito è di facile accesso per tutti i suoi utenti? Usabilità Il sito è facile da usare?

15. Legenda: 3-4: ottimo 2-3: buono 1-2: sufficiente 0-1: insufficiente

17. Problemi individuati mediante test con gli utenti Problemi individuati dagli esperti

18. Osservatore Utente campione

19. con 5 utenti si scopre l ’85% dei problemi di usabilità con 15 utenti li si scopre tutti

20. CAPITOLO 3

21. 3 4 5 6 7 Web design Visual design Sviluppo 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

22. ESPLORAZIONE Input dal committente Interviste con gli stakeholder Analisi della concorrenza [Analisi del vecchio sito] Appunti e allegati ORGANIZZAZIONE (Stesura dei requisiti) Requisiti Creatività ed esperienza del redattore Modello di qualità REVISIONE E APPROVAZIONE

23. 5 completamente d’accordo 4 d’accordo 3 incerto 2 in disaccordo 1 in completo disaccordo <affermazione>………

24. Scelta dei siti da esaminare Mappatura caratteristiche principali Analisi punti di forza e debolezza Individuazione delle pratiche migliori Elenco dei siti Tabella delle caratteristiche Sintesi dei puntidi forza e di debolezza Sintesi delle pratiche migliori

25. CAPITOLO 4

26. Utente Utente interno Utente esterno Impiegato amministrativo Ricercatore Docente Studente Professionista Azienda Ricercatore Candidato studente Italiano Straniero Studente dottorato Studente master Studente laurea II livello Studente laurea I livello

28. logo payoff data barra di navigazione globale menu servizi standard area login area per richiesta preventivo noleggio offerte speciali banner?

29. Ricerca prodotto Acquista prodotto Visualizza dati utente Inserisci prodotto Modifica prodotto Sistema bancario Utente Gestore del negozio <<sistema>> Sito di e-commerce

30. 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

31. VEDI CARTELLA ORIGINALI

32. CAPITOLO 5

33. 3 4 5 6 7 Web design Visual design Sviluppo 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

34. PIANIFICAZIONE ORGANIZZAZIONE DEL GRUPPO DI PROGETTO Requisiti FORMULAZIONE DELL’OFFERTA E NEGOZIAZIONE DEL CONTRATTO Contratto Piano di qualità Sviluppo interno Sviluppo esterno

35. Collaudo finale e pubblicazione Redazione dei contenuti Web design Visual design Installazione e studio CMS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 Disponibilità CMS Sviluppo Istallazione server di produzione Consegna server settimane Formazione dei redattori Stesura dei requisiti 3 2 2 6 5,5 1 1,5 6 27 Prototipo di comunicazione Prototipo di navigazione Documento dei requisiti Prototipo funzionale Prototipo editoriale Sistema on line Piero Luigi Piero Piero Pieri, Maria Piero, Maria Carlo Piero, Maria CHE COSA CHI TOTALE

36. Collaudo finale Luigi (grafico ) Piero (capo progetto) Studio e installazione CMS 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 Sviluppo Maria (segretaria) settimane Formazione dei redattori 2 1 27 Visual design Web design 17 Carlo (sistemista) Istallazione server 7 Collaudo finale e pubblicazione Redazione dei contenuti Prototipo di comunicazione Prototipo di navigazione Documento dei requisiti Prototipo funzionale Prototipo editoriale Sistema on line Formazione TOTALE

37. VEDI CARTELLA ORIGINALI

38. FORMULAZIONE DELL’OFFERTA NEGOZIAZIONE Requisiti Offerta Ordine Fornitore Committente + fornitore Offerta Contratto FORMULAZIONE DELL’OFFERTA E NEGOZIAZIONE DEL CONTRATTO

39. CAPITOLO 6

40. 3 4 5 6 7 Web design Visual design Sviluppo 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

41. story-board mappa del sito documento dei requisiti gabbia logica delle pagine prototipo di navigazione Progettazione della architettura dell’informazione Costruzione del prototipo di navigazione Verifica e convalida

42. HOME PAGE PAGINA 1.1 PAGINA 1.2 PAGINA 1.3 PAGINA 1.3.2 PAGINA 1.3.1 PAGINA 1.1.2 PAGINA 1.1.1 LIVELLO 0 LIVELLO 1 LIVELLO 2

43. dalla pagina A si può accedere alla pagina B dalla pagina A si può accedere alla pagina B attraverso il link C dalla pagina A si può accedere alla pagina B, e viceversa A B A B A B C A B

45. HOME PAGE A B F E D C

46. Scheda prodotto Scheda prodotto Scheda prodotto Home Condizioni di vendita Mappa del sito Contatti News Iscrizione ai servizi Area riservata Prodotti Carrello Dati utente Chi siamo Chitarre nuove Chitarre usate Ordina prodotto Accessori Il negozio Le marche trattate Dove siamo

47. VEDI CARTELLA ORIGINALI

48. VEDI CARTELLA ORIGINALI

49. Inglese FAQ Contattaci Mappa del sito Le sedi La missione L’azienda Punti di noleggio Auto Lanostra flotta Registrazione I tuoi noleggi I tuoi dati Area clienti Servizi HOME Condizioni Preventivo Noleggio Offerte speciali scorciatoia

50. Area Riservata Novità dal negozio Promozioni Titolo Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore e dolore magna aliqua Titolo Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore e dolore magna aliqua Titolo Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore e dolore magna aliqua Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore e dolore magna aliqua

51. Area Riservata Nuovo | Usato | Accessori | Ordina prodotto Prodotti Home Prodotti nuovi <menu prodotti nuovi> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed imperdiet, est eu sollicitudin pretium, justo sapien volutpat erat, nec vulputate lacus metus at augue. Donec id nibh sit amet erat suscipit viverra. Vivamus ac dui. Aenean sed mauris. In metus. Suspendisse placerat, lorem quis dictum ornare, neque tellus hendrerit metus, sed gravida enim dolor id ipsum. Nulla fermentum. Vestibulum pretium pellentesque urna. Nulla enim tortor, feugiat condimentum, laoreet quis, dapibus et, sem. Duis blandit pede vitae dui. Nam pulvinar. Aliquam fermentum, lectus eu imperdiet luctus, dui nibh scelerisque purus, ut laoreet tortor ipsum in orci. Proin rutrum dui a nulla. Donec volutpat, massa sit amet semper cursus, felis quam pharetra metus, a porta magna augue id augue. Donec urna pede, volutpat ultrices

53. Header Footer Interfaccia navigazione Interfaccia Navigazione Funzioni contestuali e di supporto Path di navigazione TITOLO MENU DI 3° LIVELLO CORPO Azione Link contenuto Titolo Titoletto Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Titoletto - Nam porttitor pretium eros. - Aliquam quis dui sed nulla mattis tristique. - Nulla ut justo in arcu viverra elementum. Titoletto Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Contattaci per richiedere ulteriori informazioni. Scarica il modulo di contratto da presentare alla filiale. IMMAGINE GRAFICO Qual è il tuo gap previdenziale? Il tuo risparmio fiscale Area destinata ai link che attivano un’azione come ad esempio “Versione Stampa”. Il link deve essere sempre alla stessa altezza del titolo. Area per scaricare la brochure relativa al prodotto in formato pdf. Il link deve essere sempre alla stessa altezza del titolo. Area corpo del testo. Il contenuto della pagina è organizzato in paragrafi con il testo sempre allineato a sx e in tondo. L’area può, inoltre, contenere dei link. I paragrafi non devono essere più lunghi di 4 righe. Link ai tool per il calcolo del gap previdenziale e per il calcolo del risparmio fiscale. Area destinata all’inserimento di un’immagine o grafico. Dimensione max immagine: xxx. Link Link di navigazione verso una pagina di approfondimento strettamente collegata al contenuto della pagina. Ove previsto.

54. 800x600 1024x768 dimensione della pagina

55. 1024x768 800x600

56. VEDI CARTELLA ORIGINALI

57. Marca Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore e dolore magna aliqua Marca Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore e dolore magna aliqua Marca Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore e dolore magna aliqua Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore e dolore magna aliqua VEDI CARTELLA ORIGINALI (MA SENZA TESTO DENTRO)

58. VEDI CARTELLA ORIGINALI Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore e dolore magna aliqua

59. CAPITOLO 7

60. 3 4 5 6 7 Web design Visual design Sviluppo 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

61. Progettazione layout grafici documento dei requisiti Costruzione template HTML template HTML Costruzione del prototipo di comunicazione Verifica e convalida prototipo di comunicazione prototipo di navigazione gabbie logiche mappa del sito layout grafici guida di stile

62. VEDI CARTELLA ORIGINALI

63. VEDI CARTELLA ORIGINALI

64. VEDI CARTELLA ORIGINALI

66. VEDI CARTELLA ORIGINALI

67. QUESTA E’ UNA FIGURA UNICA, MI ARRIVERA’ L’ORIGINALE

68. CAPITOLO 8

69. 3 4 5 6 7 Web design Visual design Sviluppo 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

70. Costruzione del prototipo funzionale Descrizione delle funzioni e della base di dati Verifica e convalida prototipo funzionale template grafici manuale d’uso (back-office) Progettazione del software prototipo di comunicazione documento dei requisiti (se non c’è software da sviluppare)

71. Requisiti Modello concettuale della base di dati Modello concettuale delle funzioni PROGETTAZIONE INDIPENDENTE DALLE SCELTE TECNOLOGICHE PROGETTAZIONE DIPENDENTE DALLE SCELTE TECNOLOGICHE Progettazione “concettuale” delle funzioni Progettazione “concettuale” della base dei dati Progettazione “logica e fisica” delle funzioni Progettazione “logica e fisica” della base dei dati Progettazione del software

72. P 1 P 1 E [C] / A significa : “ quando sul video è visualizzata la pagina P 1 , se si verifica l’evento E e se vale la condizione C , il sistema effettua l’azione A e sul video viene visualizzata la pagina P 2 ”

73. 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

74. 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

75. VEDI CARTELLA ORIGINALI (SOLO SCHERMATA) … ma i contenuti di quest’area, dove si svolge il dialogo nei servizi interattivi, devono ancora essere specificati La struttura generale della pagina è già completamente definita…

76. VEDI CARTELLA ORIGINALI

77. utente “ computer” osservatori schede pronte all’uso scheda corrente diagramma d’interazione

78. VEDI CARTELLA ORIGINALI (DUE ORIGINALI SEPARATI) schede per simulazione

79. #Produttore nome indirizzo partitaIva Produttore RigaOrdine quantità Ordine #Ordine dataOrdine importoOrdine speseSpedizione indirizzoConsegna statoOrdine dataStatoOrdine #Prodotto 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.. 

80. 0..  Prodotto Distributore DistribuitoDa 0..  Distributore Prodotto 1..1 0..  X 1..1 0..  nello schema logico relazionale viene trasformato così:

81. 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

82. Sviluppo pagine HTML mancanti e delle directory Sviluppo del sito con il CMS Sviluppo e integrazione del software Costruzione del prototipo funzionale Stesura del manuale d’uso (back-office) 1 4 3 2 template HTML 1 Sito statico 2 Sito con CMS, senza funzioni sviluppate ad hoc 3 Sito senza CMS, con funzioni sviluppate ad hoc 4 Sito con CMS, con funzioni sviluppate ad hoc Casi possibili:

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

84. 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

85. SCATOLA NERA dati del volo dati dei passeggeri dati della carta di credito conferma della avvenuta prenotazione sistema del gestore della carta di credito base di dati dei voli internet

86. A SCATOLA NERA 1 SCATOLA NERA 2 B C A SCATOLA NERA B

87. valori illeciti valori leciti valori (leciti) limite valori (leciti) speciali

88. VEDI CARTELLA ORIGINALI

89. 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

90. Preparazione piano di test Preparazione base dati di prova Conduzione del test funzionale Rimozione anomalie

91. VEDI CARTELLA ORIGINALI

92. CAPITOLO 9

93. 3 4 5 6 7 Web design Visual design Sviluppo 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

94. Preparazione del piano editoriale piano editoriale Costruzione del prototipo editoriale documento dei requisiti Verifica e convalida prototipo editoriale prototipo funzionale guida di stile Preparazione della guida editoriale guida editoriale Raccolta dei contenuti

96. Gruppo di sviluppo Redazione Gruppo di gestione Congelamento release Pubblicazione on line Sistema di sviluppo Sistema di staging Sistema di produzione

97. CAPITOLO 10

98. 3 4 5 6 7 Web design Visual design Sviluppo 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

99. Installazione sul sistema di produzione prime reazioni degli utenti Pubblicazione sito on line prototipo editoriale sistema di produzione Collaudo finale verbale di collaudo e accettazione sito collaudato prototipo editoriale sul sistema di produzione consegna finale responsabilità del gruppo di sviluppo responsabilità del gruppo di gestione (rodaggio) esercizio

100. IN LAVORAZIONE IN REVISIONE PUBBLICATA DE- PUBBLICATA ARCHIVIATA copia SCARTATA on line off line off line

101. CAPITOLO 11

102. Web designer Visual designer Progettista software Redattore Committente, consulente Webmaster, sistemista Committente, capo progetto, utenti e altri stakeholder 3 4 5 6 7 Web design Visual design Sviluppo 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 Capo progetto

103. 7 Pubblicazione Sistema on line 6 Redazione dei contenuti Prototipo editoriale 1 Definizione dei requisiti Documento dei requisiti 3 Web design Prototipo di navigazione Visual design Prototipo di comunicazione 4 5 Sviluppo del sito Prototipo funzionale INIZIO FINE 2 Avviamento del progetto Piano di qualità

104. 7 Pubblicazione Sistema on line 6 Redazione dei contenuti Prototipo editoriale 1 Definizione dei requisiti Documento dei requisiti 3 Web design Prototipo di navigazione Visual design Prototipo di comunicazione 4 5 Sviluppo del sito Prototipo funzionale INIZIO FINE 2 Avviamento del progetto Piano di qualità

105. INIZIO FINE Prototipo n approvato Prototipo n+1 approvato

106. Requisiti Prototipo di navigazione Adeguatezza di gabbia logica delle pagine e struttura di navigazione, anche in relazione ai vari formati video Usabilità (I) (struttura informativa, etichette, navigazione) Prototipo di comunicazione Qualità dei layout grafici delle pagine Correttezza della trasformazione dei layout liquidi Accessibilità (I) (verifiche tecniche dei template HTML) Usabilità (II) (navigazione, etichette, leggibilità con grafica finale, anche in relazione ai vari formati video) Conformità all’identità di marca Prototipo funzionale Affidabilità dei servizi interattivi (test funzionali con base di dati di prova) Accessibilità (II) (servizi interattivi, verifiche tecniche) Usabilità (III) (servizi interattivi di back office: test “di scenario”) Usabilità (IV) (servizi interattivi per l’utente finale, con base di dati di prova: test “di compito”) Prototipo editoriale Correttezza dei contenuti informativi Integrità dei collegamenti (interni / esterni) Efficacia del motore di ricerca interno Usabilità (V) (sito completo, con base di dati reale: test “di scenario”) Accessibilità (III) (verifiche tecniche dell’accessibilità dei contenuti) Accessibilità (IV) (verifiche soggettive) Sito finale Test di carico Test di accettazione Prime reazioni degli utenti in rete ARCHITETTURA COMUNICAZIONE FUNZIONALIT A’ CONTENUTO USABILITA’ ACCESSIBILITA’

107. - Documento dei requisiti - Mappa del sito - Gabbia logica delle pagine - Prototipo di navigazione - Diagrammi di navigazione - Forms - Diagrammi della base dati - Piano di test - Manuale d’uso (del back office) - Prototipo funzionale - Piano editoriale - Guida editoriale - Prototipo editoriale - Guida di stile - Prototipo di comunica- zione 3 4 5 6 7 Web design Visual design Sviluppo Redazione dei contenuti Pubblicazione 1 Definizione dei requisiti 2 Avviamento del progetto Gestione del sito - Piano di qualità - Verbale di accettazione - Sito on line

108. contenuti informativi servizi interattivi per gli utenti esterni frequenza e complessità organizzativa degli aggiornamenti A B C

109. Prototipo funzionale Prototipo di navigazione Web design Visual design Sviluppo del sito Contenuti Pubblicazione documento dei requisiti Requisiti Avviamento del progetto Esplorazione Organizzazione (stesura dei requisiti) Revisione e approvazione Organizzazione del gruppo di progetto Offerta e negoziazione del contratto Piano di qualità Pianificazione Progettazione architettura informazione Costruzione prototipo di navigazione Verifica e convalida Costruzione template HTML Costruzione prototipo di comunicazione Verifica e convalida Prototipo di comunicazione Prototipo editoriale Sito on-line Verifica e convalida Costruzione prototipo editoriale Preparazione della guida editoriale Preparazione del piano editoriale Verifica e convalida Costruzione prototipo funzionale Progettazione layour grafici Guida di stile Progettazione del software Raccolta dei contenuti 3 4 5 6 7 1 2 Installazione su sistema di produzione Collaudo finale Pubblicazione

110. APPENDICE 4

111. Utente Acquista prodotto ATTORE : CASO D’USO :

112. Utente Acquista prodotto

113. Utente Acquista prodotto significa: L’Utente invoca il caso d’uso Acquista prodotto

114. Utente Acquista volo Scegli volo Ricerca destinazioni servite Gestore carta credito <<system>> SISTEMA DI PRENOTAZIONE

115. Cliente Acquista prodotto Acquista CD Acquista libro VENDITA ON-LINE Cliente privato Cliente società

116. Acquista prodotto Autenticazione Verifica stato ordini <<include>> <<include>> Utente VENDITA ON-LINE

117. Acquista prodotto Help on line Verifica stato ordini <<extend>> <<extend>> Utente VENDITA ON-LINE

118. Dipendente

119. Dipartimento Dipendente HaInForza

120. Dipendente RiportaA

121. Dipendente cognome stipendio età

122. matricola cognome nome stipendio età Dipendente codice indirizzo via numeroCivico città cap numTel [1..5] Dipartimento Dirige HaInForza

123. RigaOrdine quantità Ordine Prodotto 1..1 1..  SiComponeDi 0..  1..1 Riguarda

124. quantità Ordine 0..  1..  RelativoA Prodotto

125. Dipendente Dipartimento Dirige

126. Dipendente Dipartimento Dirige 1..1 0..1

127. Dipendente Dipartimento Dirige HaInForza 1..1 0..1 1..  1..1

128. Dipendente Dirigente

129. matricola {IP} cognome nome stipendio età Dipendente autoAziendale Dirigente

130. Dipartimento Azienda

131. A

132. e [c] / a A B

133. 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]

134. e A

135. A C B A C B equivale a:

136. Seleziona bevanda Erogazione bevanda Macchina spenta Inserisci monete on off prelievo bevanda annullamento / restituzione moneta bevanda selezionata monete inserite bevanda esaurita

137. Seleziona bevanda entry / display “Seleziona bevanda” [ctr aranciata = 0] / display “Aranciata terminata” [ctr minerale = 0] / display “Minerale terminata” exit / display “Grazie!”

138. e 1 B C A e 2

139. A

140. Inserisci monete Inserisci moneta moneta accettata / incr importo importo < prezzo moneta non accettata / restituzione moneta importo = prezzo importo > prezzo / erogazione resto off

141. e 1 B C A e 2 e 3 pseudo-stato di ingresso pseudo-stato di uscita

142. e 1 B C A e 2 e 3

143. e 1 S 1 S 2 S e 2 A:S B:S SOTTOMACCHINA … .

144. (a) B C e D A (b) B C e D A e può essere rappresentato anche così:

145. B C e1 e2 D B C e D A (a) (b) S dove: e = e1 | e2 e1  B e2  C A può essere rappresentato anche così:

146. p e(p) C D p p p

147. e(c) A B e4 D C e1 e2 e2 e2 e3.1 e3.2 e3.3 (a) e(c) A B e2 e4 D E C e1 e3 (b) S dove: e3= e3.1  A | e3.2  B | e3.3  C

148. e 1 B C A D E e 3 e 2 e 4

149. terminato Frequenza laboratorio Preparazione corso Realizzazione progetto di esame Frequenza lezioni Revisione progetto terminato terminate Esecuzione ripasso finale terminato Esecuzione compito scritto ok revisione ok revisione non ok compito non ok Esame superato

150. HOME B A C menu = A I B I C menu=A menu=B menu=C home home home

151. home HOME A B C S menu menu menu menu dove: menu = A | B | C menu = A  A menu = B  B menu = C  C Livello 1 HOME A B C (a) (b)

152. HOME B A C A B C home home home A C B B C A

153. Frame a Frame c Frame b HOME Frame a A Frame b Frame c B C0 C2 C2 Cn S menu (a) (b)

154. APPENDICE 5

155. REVISIONE 1: - Documento dei requisiti REVISIONE 2: - Mappa del sito - Gabbia logica delle pagine - Prototipo di navigazione REVISIONE 4: - Diagrammi di navigazione - Forms - Diagrammi della base dati - Prototipo funzionale REVISIONE 5: - Prototipo Editoriale - Test di usabilità finale REVISIONE 3: - Prototipo di comunicazione - Scelta del sito da realizzare 3 4 5 6 Web design Visual design Sviluppo Redazione dei contenuti 1 Definizione dei requisiti 2 Avviamento del progetto

156. APPENDICE 6

157. Utente Utente interno Utente esterno Amministratore del sito Cliente privato Rivenditore Amatore della birra Albergo Ristorante Cantina Utente registrato Utente non registrato

158. LOGO AREA LOGIN AREA PER LA RICERCA PRODOTTI BARRA MENU PERSONALIZZATO PAGINA DI BENVENUTO SLOGAN

159. VEDI CARTELLA ORIGINALI

160. www.triple.it Utente Sistema Bancario <<system>> Amministratore del sito Utente registrato 1. Registrazione 2. Ricerca prodotti 3. Modifica password 4. Visualizza/ modifica dati anagrafici 6. Visualizza/ modifica carrello 7. Prenota prodotti 8. Ordina prodotti 9. Visualizza storico ordini 11.Visualizza o modifica prodotto 10.Visualizza/ Prepara/spedisci ordini 5. Modifica caratteristiche utente 12. Crea prodotto

161. Ordine codiceOrdine dataOrdine indirizzoConsegna totaleOrdine codiceProdotto nome foto descrizione prezzo disponibilità Prodotto 0..1 1..1 ha Utente userName password tipoUtente email DatiUtente datiAnagrafici 1..1 0..  Effettua 0..  1..1 Riguarda VoceOrdine Quantità prezzoUnitario sconto 1..1 1..  SiComponeDi Origine codiceOrigine nome descrizione foto 0..  1..1 ProvieneDa VoceCarrello quantità 0..  1..1 Riguarda ha 0..  1..1

162. Mappa dettaglio Elenco ricette Dettagli ricetta Conferma La storia Le curiosità Le ricette La Triple consiglia Cerca una ricetta La nostra storia Dove siamo Contattaci Cerca ordine Cerca utente Elenco prenotaz. Dettagli prenotaz. Elenco ordini Dettagli e modifica ordine Elenco utenti Dettagli e modifica utente Ordini Dettagli ordine Prodotti in offerta Listino Dettagli prodotto Prenota- zioni Dettagli prenotaz. Carrello Modifica tuoi dati Cambia password Il mondo della birra Registrati Password dimenticata L’azienda I nostri prodotti Crea nuovo prodotto Ordini Utenti Area accessibile a tutti Area accessibile solo agli utenti registrati Area accessibile solo agli amministratori Indirizzo e metodo pagamento Cerca prenotaz. Home NB: Ci sono 3 varianti della home page: una per tutti, una per gli utenti registrati e una per gliamministratori

163. Mappa dettaglio Elenco ricette Dettagli ricetta Conferma La storia Le curiosità Le ricette La Triple consiglia Cerca una ricetta La nostra storia Dove siamo Contattaci Cerca ordine Cerca utente Elenco prenotaz. Dettagli prenotaz. Elenco ordini Dettagli e modifica ordine Elenco utenti Dettagli e modifica utente Ordini Dettagli ordine Prodotti in offerta Listino Dettagli prodotto Prenota- zioni Dettagli prenotaz. Carrello Modifica tuoi dati Cambia password Il mondo della birra Registrati Password dimenticata L’azienda I nostri prodotti Crea nuovo prodotto Ordini Utenti Area accessibile a tutti Area accessibile solo agli utenti registrati Area accessibile solo agli amministratori Indirizzo e metodo pagamento Cerca prenotaz. Home NB: Ci sono 3 varianti della home page: una per tutti, una per gli utenti registrati e una per gliamministratori

164. Gabbia logica dell’home page per tutti SLOGAN Home Page L’azienda I nostri prodotti Il mondo della birra PAGINA DI BENVENUTO (TESTO E FIGURE) LOGO Listino Prodotti Ricerca prodotto Trova Utente Password ENTRA Registrati Password dimenticata

165. SLOGAN Home Page L’azienda I nostri prodotti Il mondo della birra Gabbia logica della pagina “L’azienda” La nostra storia Dove siamo? Contattaci BREVE DESCRIZIONE DELL’AZIENDA (TESTO E FIGURE) LOGO Listino Prodotti Ricerca prodotto Trova Utente Password ENTRA Registrati Password dimenticata

166. SLOGAN Home Page L’azienda I nostri prodotti Il mondo della birra Gabbia logica della pagina “Il mondo della birra” La storia Le curiosità Cerca una ricetta Le ricette La triple consiglia LOGO Listino Prodotti Ricerca prodotto Trova Utente Password ENTRA Registrati Password dimenticata BREVE I NTRODUZIONE AL MONDO DELLA BIRRA (TESTO E FIGURE)

167. SLOGAN Home Page L’azienda I nostri prodotti Il mondo della birra Gabbia logica della pagina “Listino” LOGO Listino Prodotti Ricerca prodotto Trova Utente Password ENTRA Registrati Password dimenticata TABELLA CON L’ELENCO DEI PRODOTTI Parametro Parametro Parametro Parametro

168. SLOGAN Home Page L’azienda I nostri prodotti Il mondo della birra Gabbia logica della pagina “Dettagli ricetta” DESCRIZIONE DELLA RICETTA La storia Le curiosità LOGO Listino Prodotti Ricerca prodotto Trova Utente Password ENTRA Registrati Password dimenticata IMMAGINE INGREDIENTI DELLA RICETTA Cerca una ricetta Le ricette La triple consiglia

169. SLOGAN Home Page L’azienda I nostri prodotti Il mondo della birra Gabbia logica dell’home page per gli utenti registrati PROMOZIONE PRODOTTI IN OFFERTA (CLICCABILI) Carrello Ordini Prenotazioni LOGO Listino Prodotti Ricerca prodotto Trova ESCI Modifica password Modifica i tuoi dati Prodotti in Offerta Benvenuto NOMEUTENTE

170. SLOGAN Home Page L’azienda I nostri prodotti Il mondo della birra Gabbia logica dell’home page per gli amministratori Ordini Utenti ELENCO PRODOTTI FINE SCORTA ELENCO ULTIME PRENOTAZIONI RICEVUTE LOGO Listino Prodotti Ricerca prodotto Trova ESCI Modifica password Crea nuovo prodotto Benvenuto AMMINISTRATORE

171. SLOGAN Home Page L’azienda I nostri prodotti Il mondo della birra Gabbia logica della pagina “Ordini” Ordini Utenti ELENCO ULTIME PRENOTAZIONI RICEVUTE ELENCO ORDINI CONFERMATI Elenco prenotazioni Cerca prenotazione Elenco ordini Cerca ordine LOGO Listino Prodotti Ricerca prodotto Trova ESCI Modifica password Crea nuovo prodotto Benvenuto AMMINISTRATORE

172. SLOGAN Home Page L’azienda I nostri prodotti Il mondo della birra Gabbia logica della pagina “Utenti” Ordini Utenti ELENCO ULTIMI UTENTI REGISTRATI Elenco utenti Cerca utente LOGO Listino Prodotti Ricerca prodotto Trova ESCI Modifica password Crea nuovo prodotto Benvenuto AMMINISTRATORE

174. VEDI CARTELLA ORIGINALI