XI Lezione - Arabo LAR Giath Rammo @ Libera Accademia Romana
Figure libro "Plasmare il Web"
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.
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
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
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?
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
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
27.
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
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
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
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
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
52.
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.
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
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
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…
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
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
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
95.
96. Gruppo di sviluppo Redazione Gruppo di gestione Congelamento release Pubblicazione on line Sistema di sviluppo Sistema di staging Sistema di produzione
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
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à
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
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)
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
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
J.Nielsen, T.K.Landauer, “ A Mathematical model of the finding od usability problems ” , Proceedings of ACM INTERCHI ‘ 93 Conference (Amsterdam, April 1993), pp.206-213