Figure libro "Plasmare il Web"

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.

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

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

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

Progettazione Prototipazione Valutazione (prova d’uso) Rilascio

Requisiti Web design Visual design Sviluppo Redazione contenuti Valutazione Rilascio

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

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

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

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

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

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?

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

VEDI CARTELLA ORIGINALI Logo Livello di accessibilità Che cosa attesta Come si accerta Primo livello di accessibilità Rispondenza ai requisiti tecnici Esito positivo della verifica tecnica che riscontra la conformità delle pagine del sito ai requisiti tecnici Secondo livello di accessibilità Primo livello di qualità Qualità delle informazioni e dei servizi erogati dal sito Valutazione complessiva del sito a seguito della verifica positiva. - Secondo livello di qualità - Terzo livello di qualità

Problemi individuati mediante test con gli utenti Problemi individuati dagli esperti

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Header HOME > Prodotti per le persone > Previdenza Versione stampa Brochure PDF Previdenza Caratteristiche del prodotto Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Target - Nam porttitor pretium eros. - Aliquam quis dui sed nulla mattis tristique. - Nulla ut justo in arcu viverra elementum. Erogazione 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 L'allarme pensionistico Prodotti per le persone Previdenza Terzo tempo Informativa Aziende I nostri risultati Il Gruppo Glossario FAQ - Linea 1 - Linea 2 - Linea 3 - Linea 4 - Linea 5 Risposte del consulente Campagna prodotto IMMAGINE Numero verde IMMAGINE Richiesta moduli FAQ di sezione Ricerca Filiali Contatta il consulente Mappa Cerca Contatti Credit Legal Accessibilità Qual è il tuo gap previdenziale? Il tuo risparmio fiscale

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.

800x600 1024x768 dimensione della pagina

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)

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

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

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

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)

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

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 ”

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

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

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…

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

VEDI CARTELLA ORIGINALI (DUE ORIGINALI SEPARATI) schede per simulazione

#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.. 

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

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

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:

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

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

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

A SCATOLA NERA 1 SCATOLA NERA 2 B C A SCATOLA NERA B

valori illeciti valori leciti valori (leciti) limite valori (leciti) speciali

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

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

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

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

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

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

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

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à

INIZIO FINE Prototipo n approvato Prototipo n+1 approvato

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’

- 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 comunicazione 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

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

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

Utente Acquista prodotto ATTORE : CASO D’USO :

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

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

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

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

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

Dipartimento Dipendente HaInForza

Dipendente cognome stipendio età

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

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

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

Dipendente Dipartimento Dirige

Dipendente Dipartimento Dirige 1..1 0..1

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

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

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]

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

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

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

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

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

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

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ì:

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

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

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

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)

HOME B A C A B C home home home A C B B C A

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

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

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

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

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

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

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

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

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

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)

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

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

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

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

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

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

Figure libro "Plasmare il Web"

More Related Content

Similar to Figure libro "Plasmare il Web"

More from Roberto Polillo

Recently uploaded

Figure libro "Plasmare il Web"

Editor's Notes