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.

http://www.rpolillo.it/index.php/libri/plasmare-il-web/

http://www.rpolillo.it/index.php/libri/plasmare-il-web/

CAPITOLO 1

Internet

client

browserserver

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

Def

iniz

ion

e d

eire

qu

isit

i

Committente,consulente

Vis

ual

des

ign

Visual designer

Ese

rciz

io

del

sit

o

Web master

Ges

tio

ne

dei

ser

ver

Sistemista

Svi

lup

po

d

el s

ito

Progettistasoftware

Redattore

Red

azi

on

e d

ei c

on

ten

uti

Web designer

Web

des

ign

Ges

tio

ne

del

laco

nn

etti

vità

inte

rnet

Internet service provider

1 2 3 4 5 6 7 8

Progettazione

PrototipazioneValutazione

(prova d’uso)Rilascio

Requisiti

Web design

Visual design

Sviluppo

Redazione contenuti

Valutazione Rilascio

Pro

toti

po

1

tempo

Requisiti

Web design

Visual design

Sviluppo software

Contenuti

impegno

Pro

toti

po

2

Pro

toti

po

3

Pro

toti

po

4

Pro

toti

po

5

Pro

toti

po

6

Fase 1 Fase 2 Fase 3 Fase 4 Fase 5 Fase 6

3 4 5 6 7

Web design

Visual design Sviluppo

Redazionedei contenuti Pubblicazione

1

Definizionedei requisiti

Documento dei requisiti

Prototipo di navigazione

Prototipo funzionale

Prototipo editoriale

Sistema on line

Prototipo di comunicazione

2

Avviamentodel progetto

Piano di qualità

Gestione del sito

Esplorazione

Stesurarequisiti

Convalida

Progettazionearchitetturainformativa

Prototipodi navigazione

Verifica e convalida

Progettazionedella grafica



Progettazionedel software

Prototipofunzionale


Progettazionedei contenuti

Prototipoeditoriale


Installazionesu sistema

di produzione

Collaudofinale

Pubblicazione

FASE 1:REQUISITI

FASE 2:AVVIAMENTO

FASE 3:WEB DESIGN

FASE 4:VISUAL DESIGN

FASE 5:SVILUPPO

FASE 6:REDAZIONE DEICONTENUTI

FASE 7:PUBBLICAZIONE

Esercizio del sito

Pianificazione(sviluppo interno)

oNegoziazione 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 Redazionedei contenuti

Pubblicazione

1






Sistema on line


2


Piano di qualità

Gestione del sito

CAPITOLO 2

Def

iniz

ion

e d

eire

qu

isit

i

Committente,consulente

Web designer

Svi

lup

po

d

el s

ito

Progettistasoftware

Ese

rciz

io

del

sit

o

Web master

Ges

tio

ne

dei

ser

ver

Sistemista

Ges

tio

ne

del

laco

nn

etti

vità

inte

rnet

Internet service provider

Redattore

Red

azi

on

e d

ei c

on

ten

uti

Web

des

ign

Visual designer

Comun

icaz

ione

Usabilità

Funz

iona

lità

Conte

nuto

Accessibilità

Obi

ettiv

i

Archi

tettu

ra

Ges

tione

Vis

ual

des

ign

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?

GestioneL’operatività del sito

è ben gestita ?

ArchitetturaLa struttura e la navigazione

del sito sono adeguate?

Il sito è di facile accesso per tutti

i suoi utenti?

UsabilitàIl sito è facile

da usare?

0,00

1,00

2,00

3,00

4,00

Architettura

Comunicazione

Funzionalità

ContenutoGestione

Accessibilità

Usabilità

Legenda:3-4: ottimo2-3: buono1-2: sufficiente0-1: insufficiente

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à

VEDI CARTELLA ORIGINALI

Problemi individuati mediante test con gli utenti

Problemi individuati dagli esperti

Osservatore Utente campione

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

con 15 utenti li si scopre tutti

CAPITOLO 3

3 4 5 6 7

Web design

Visual design


Pubblicazione

1






Sistema on line


2


Piano di qualità

Gestione del sito

ESPLORAZIONEInput dal committente

Interviste con gli stakeholder

Analisi della concorrenza

[Analisi del vecchio sito]

Appunti eallegati

ORGANIZZAZIONE(Stesura dei requisiti)

Requisiti

Creatività ed esperienzadel redattore

Modello di qualità

REVISIONE EAPPROVAZIONE

5completamente

d’accordo

4d’accordo

3 incerto

2in disaccordo

1 in completodisaccordo

<affermazione>………

Scelta dei siti da esaminare

Mappatura caratteristiche

principali

Analisi puntidi forza edebolezza

Individuazionedelle pratiche

migliori

Elenco dei siti

Tabella delle caratteristiche

Sintesi dei puntidi forza e di debolezza

Sintesi dellepratiche migliori

CAPITOLO 4

Utente

Utenteinterno

Utenteesterno

Impiegato amministrativo

RicercatoreDocenteStudente

Professionista

Azienda

Ricercatore

Candidatostudente

Italiano

Straniero

Studente dottorato

Studentemaster

Studentelaurea II livello

Studentelaurea I livello

logo payoff data

barra di navigazione globale

menu servizi standard

area login area per

richiesta preventivo

noleggio

offertespeciali

banner?

Ricerca prodotto

Acquista prodotto

Visualizza dati utente

Inserisci prodotto

Modifica prodotto

Sistema bancarioUtente

Gestore del negozio

<<sistema>>

Sito di e-commerce

prezzoUnitario

Ordine

indirizzoDiConsegnaspeseDiSpedizioneimportoTotale

Cliente

datiAnagrafici

Prodotto

CatalogoClienteRegistrato

useridpassword

CartaDiCredito

1..1 0.. 0.. 1..

0..

1..

1.. 1..1

Effettua Riguarda

Utilizza

FaParteDi

CAPITOLO 5

3 4 5 6 7

Web design

Visual design


Pubblicazione

1






Sistema on line


2


Piano di qualità

Gestione del sito

PIANIFICAZIONEORGANIZZAZIONE DEL GRUPPO DI

PROGETTORequisiti

FORMULAZIONEDELL’OFFERTA E

NEGOZIAZIONEDEL 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

Disponibilità CMS

Sviluppo

Istallazione server di produzione

Consegna server

Formazione dei redattori

Stesura dei requisiti

3

2

2

6

5,5

1

1,5

6

27

Prototipo dicomunicazione

Prototipo dinavigazione




Piero

Luigi

Piero

Piero

Pieri,Maria

Piero, Maria

Carlo

Piero, Maria

CHE COSA CHI

TOTALE

Collaudo finale

Luigi (grafico)

Piero(capo progetto)

Studio e installazioneCMS

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 design17

Carlo(sistemista)

Istallazioneserver

7

Collaudo finale e pubblicazione

Redazione dei contenuti

Prototipo dicomunicazione

Prototipo dinavigazione




Sistema on line

Formazione

TOTALE

FORMULAZIONEDELL’OFFERTA

NEGOZIAZIONE

Requisiti Offerta OrdineFornitore Committente + fornitore

Offerta

Contratto

FORMULAZIONE DELL’OFFERTA E NEGOZIAZIONE DEL CONTRATTO

CAPITOLO 6

3 4 5 6 7

Web design

Visual design


Pubblicazione

1






Sistema on line


2


Piano di qualità

Gestione del sito

story-board

mappa del sito

documentodei requisiti

gabbia logicadelle pagine

prototipodi navigazione

Progettazione della architettura dell’informazione

Costruzione delprototipo di navigazione

Verificae convalida

HOME PAGE

PAGINA 1.1 PAGINA 1.2 PAGINA 1.3

PAGINA 1.3.2PAGINA 1.3.1PAGINA 1.1.2PAGINA 1.1.1

LIVELLO 0

LIVELLO 1

LIVELLO 2

A

B

A

B

dalla pagina A si può accedere alla pagina B

dalla pagina A si può accedere alla pagina B attraverso il link C

A

B

C

A

B

dalla pagina A si può accedere alla pagina B, e viceversa

HOME PAGE

A B

FEDC

Schedaprodotto

Schedaprodotto

Schedaprodotto

Home

Condizioni di vendita

Mappa del sitoContattiNews

Iscrizioneai serviziProdotti CarrelloDati

utente

Chitarre nuove

Chitarre usate

Ordina prodotto

Accessori

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 negozioPromozioni

TitoloLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore e dolore magna aliqua

TitoloLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore e dolore magna aliqua

TitoloLorem 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

ProdottiHome

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

BrochurePDFPrevidenza

Caratteristiche del prodottoLorem 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.

ErogazioneLorem 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 prodottoIMMAGINE

Numero verdeIMMAGINE

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

Funzionicontestuali

e di supporto

Path di navigazione

TITOLO

MENU DI 3° LIVELLO

CORPO

AzioneLink

contenutoTitolo

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

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

IMMAGINEGRAFICO

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

1024x768

800x600

MarcaLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore e dolore magna aliqua

MarcaLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore e dolore magna aliqua

MarcaLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor





VEDI CARTELLA ORIGINALI (MA SENZA TESTO DENTRO)

CAPITOLO 7

3 4 5 6 7

Web design

Visual design


Pubblicazione

1






Sistema on line


2


Piano di qualità

Gestione del sito

Progettazione layout grafici


Costruzione template HTML

templateHTML

Costruzione del prototipo di

comunicazione

prototipodi comunicazione

prototipodi navigazione

gabbie logiche

mappa del sito

layoutgrafici

guida di stile

QUESTA E’ UNA FIGURA UNICA, MI ARRIVERA’

L’ORIGINALE

CAPITOLO 8

3 4 5 6 7

Web design

Visual design


Pubblicazione

1






Sistema on line


2


Piano di qualità

Gestione del sito

Costruzione delprototipo

funzionaleDescrizione

delle funzioni edella base di dati

Verifica econvalida

prototipofunzionale

templategrafici

manuale d’uso

(back-office)


prototipo di comunicazione


(se non c’è software da sviluppare)

Requisiti

Modello concettuale

della base di dati

Modelloconcettuale

delle funzioni

PROGETTAZIONEINDIPENDENTE DALLE SCELTE TECNOLOGICHE

PROGETTAZIONEDIPENDENTE 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

P1

P1

E [C] / A significa:

“quando sul video è visualizzata la pagina P1, 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 P2”

PRENOTA VOLO

HOME

dati corretti + CERCA

scegli volo + PROCEDI

PROCEDI ALL’ACQUISTO

ALTRA RICERCA

ALTRO VOLO

dati corretti + PROCEDI


ANNULLA

ANNULLA

ALTRA PRENOTAZIONE

HOME

dati errati + CERCA / msg errore

dati errati + PROCEDI / msg errore


FORM DI RICERCA

VOLO

ELENCO VOLI

DATI VOLOSCELTO

FORM DATI CLIENTE

FORM DATI CARTA DI CREDITO

CONFERMAACQUISTO

HOME

CONVENZIONI:

Gli eventi in caratteri maiuscoli rappresentano le etichette di bottoni

INFO DIVIAGGIO

HOME

HOME

CHI SIAMO NEWSPRENOTA

VOLOCONSULTA

ORARIOCERCA

BAGAGLIO

CONSULTA ORARIO

PRENOTA VOLONEWSCHI SIAMO

CERCA BAGAGLIO

INFO DI VIAGGIO

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

VEDI CARTELLA ORIGINALI (SOLO SCHERMATA)

utente“computer”

osservatori

schede pronte all’uso scheda corrente

diagramma d’interazione

schede per simulazione

VEDI CARTELLA ORIGINALI (DUE ORIGINALI SEPARATI)

#ProduttorenomeindirizzopartitaIva

Produttore

RigaOrdine

quantità

Ordine

#OrdinedataOrdineimportoOrdinespeseSpedizioneindirizzoConsegnastatoOrdinedataStatoOrdine

#ProdottodescrizioneprezzoUnitariodisponibilità

Prodotto

Catalogo

0..

1..Contiene

1..1..1

Utilizza

Cliente

#ClientetipoClientesocietaOPrivatonomeindirizzopartitaIvadataUltimoAcquistouseridpassworddataRegistrazione

CartaDiCredito

#cartaDiCreditotitolaredataDiScadenza

1..1

0..

Effettua

1..1 1..SiComponeDi

0.. 1..1

Riguarda

#CatalogotitoloCatalogo

ProdottoDa

1..1

0..

1..1

PagatoCon

1..

0.. Prodotto Distributore

DistribuitoDa

0..

DistributoreProdotto1..1 0..

X1..10..

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:

OrarioPrezzo

Classe :

BusinessEconomy

Andata e ritornoSolo andata

Sviluppo pagine HTML mancanti e delle directory

Sviluppo del sito con il CMS

Sviluppo e integrazionedel software

Costruzione del prototipo funzionale

Stesura delmanuale d’uso(back-office)

1

4

3

2

templateHTML

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

SITOSITO

SEZ ASEZ A

SEZ CSEZ C

SEZ BSEZ B

immaginiimmagini

home.htmhome.htm

A.htmA.htm

D.htmD.htm

E.htmE.htm

B.htmB.htm

immaginiimmagini

B.htmB.htm

immaginiimmagini

immaginiimmagini

A B C

E

HOME

Mappa del sito Organizzazione delle directory

Test funzionale

Test di usabilità

Validazione con prototipo

di carta

Diagramma dinavigazione


progettazione realizzazione e test

riciclo per modifichesuggerite dai test

riciclo per modifichesuggerite 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

ASCATOLA

NERA B

A SCATOLA NERA 1

SCATOLA NERA 2

B

C

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



ANNULLA

ANNULLA

ALTRA PRENOTAZIONE

HOME

dati errati + CERCA / msg errore



FORM DI RICERCA

VOLO

ELENCO VOLI

DATI VOLOSCELTO

FORM DATI CLIENTE

FORM DATI CARTA DI CREDITO

CONFERMAACQUISTO

HOME

Preparazionepiano di test

Preparazionebase dati di prova

Conduzione del test

funzionale

Rimozione anomalie

CAPITOLO 9

3 4 5 6 7

Web design

Visual design


Pubblicazione

1






Sistema on line


2


Piano di qualità

Gestione del sito

Preparazionedel piano editoriale

pianoeditoriale

Costruzione del prototipo editoriale



prototipoeditoriale

prototipo funzionale

guida distile

Preparazione della guida editoriale

guida editoriale

Raccolta dei contenuti

Gruppo disviluppo

RedazioneGruppo digestione

Congelamento release

Pubblicazione on line

Sistema di sviluppo

Sistema di staging

Sistema di produzione

CAPITOLO 10

3 4 5 6 7

Web design

Visual design


Pubblicazione

1






Sistema on line


2


Piano di qualità

Gestione del sito

Installazionesul sistema di produzione

prime reazioni degli utenti

Pubblicazione

sitoon line

prototipo editoriale

sistema di produzione

Collaudo finale

verbale dicollaudo

e accettazione

sitocollaudato

prototipo editorialesul 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 lineoff line off line

CAPITOLO 11

Web designer

Visual designer

Progettistasoftware

RedattoreCommittente,consulente

Webmaster,sistemista

Committente, capo progetto, utenti e altri stakeholder

3 4 5 6 7

Web design

Visual design


Pubblicazione

1






Sistema on line


2


Piano di qualità

Gestione del sito

Capo progetto

7

Pubblicazione

Sistema on line

6

Redazionedei contenuti


1


3

Web design


Visual design


4

5

Sviluppo del sito


INIZIO FINE

2


Piano diqualità

INIZIO FINE

Prototipo n

approvato

Prototipo n+1approvato

Requisiti

Prototipo di navigazione Adeguatezza di gabbia logica delle pagine e struttura di navigazione, anche in relazione ai vari formati videoUsabilità (I) (struttura informativa, etichette, navigazione)

Prototipo di comunicazioneQualità dei layout grafici delle pagineCorrettezza della trasformazione dei layout liquidiAccessibilità (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 funzionaleAffidabilità 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 editorialeCorrettezza dei contenuti informativiIntegrità dei collegamenti (interni / esterni)Efficacia del motore di ricerca internoUsabilità (V) (sito completo, con base di dati reale: test “di scenario”)Accessibilità (III) (verifiche tecniche dell’accessibilità dei contenuti)Accessibilità (IV) (verifiche soggettive)

Sito finaleTest di caricoTest di accettazione Prime reazioni degli utenti in rete

AR

CH

ITE

TT

UR

AC

OM

UN

ICA

ZIO

NE

FU

NZ

ION

AL

ITA

’ C

ON

TE

NU

TO

US

AB

ILIT

A’

AC

CE

SS

IBIL

ITA

’

- 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


Pubblicazione

1


2


Gestione del sito

- Piano di qualità

- Verbale di accettazione

- Sito on line

contenuti informativi

servizi interattiviper gli utenti esterni

frequenza e complessità

organizzativa degli aggiornamenti

A

B

C




Revisione eapprovazione

Organizzazionedel gruppo di

progetto

Offerta e negoziazionedel contratto

Piano diqualità

Pianificazione

Progettazione architettura

informazione

Costruzioneprototipo dinavigazione

Verifica econvalida

Costruzionetemplate

HTML

Costruzioneprototipo di

comunicazione

Verifica econvalida



Sito on-line

Verifica econvalida

Costruzioneprototipoeditoriale

Preparazionedella guidaeditoriale

Preparazionedel pianoeditoriale

Verifica econvalida

Costruzioneprototipo

funzionale

Progettazione layour graficiGuida di stile


Raccolta dei contenuti

Installazionesu sistema diproduzione

Collaudofinale

Pubblicazione

APPENDICE 4

Utente

Acquista prodotto

ATTORE: CASO D’USO:

Utente

Acquistaprodotto

Utente

Acquistaprodotto

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

Acquistaprodotto

Acquista CD

Acquista libro

VENDITA ON-LINE

Cliente privato

Cliente società

Acquistaprodotto

Autenticazione

Verifica stato ordini

<<include>><<include>>

Utente

VENDITA ON-LINE

Acquistaprodotto

Help on line

Verifica stato ordini

<<extend>><<extend>>

Utente

VENDITA ON-LINE

Dipendente

DipartimentoDipendenteHaInForza

Dipendente

RiportaA

Dipendente

cognomestipendioetà

matricola cognomenomestipendioetà

Dipendente

codice indirizzo via numeroCivico città capnumTel [1..5]

Dipartimento

Dirige

HaInForza

RigaOrdine

quantitàOrdine Prodotto

1..1 1.. SiComponeDi

0.. 1..1

Riguarda

quantità

Ordine0.. 1..

RelativoA Prodotto

Dipendente DipartimentoDirige

Dipendente DipartimentoDirige1..1 0..1

Dipendente Dipartimento

Dirige

HaInForza

1..1 0..1

1.. 1..1

Dipendente

Dirigente

matricola {IP}cognomenomestipendioetà

Dipendente

autoAziendale

Dirigente

Dipartimento Azienda

e [c] / aA B

B

A

D

si può anche scrivere come:

B

A

D

e [a>0]

e [ a<0]

C Ce [ a=0] e

[a>0]

[a=0]

[a<0]

A C

B

A C

B

equivale a:

Seleziona bevanda

Erogazione bevanda

Macchina spenta

Inserisci monete

on

off

prelievo bevanda

annullamento / restituzione moneta

bevandaselezionata

moneteinserite

bevanda esaurita

Seleziona bevanda

entry / display “Seleziona bevanda”

[ctr aranciata = 0] / display “Aranciata terminata”

[ctr minerale = 0] / display “Minerale terminata”

exit / display “Grazie!”

e1

B C

A

e2

Inserisci monete

Inserisci moneta

moneta accettata /incr importo

importo < prezzo

moneta non accettata / restituzione moneta

importo = prezzo

importo > prezzo/ erogazione resto

off

e1B C

A

e2

e3

pseudo-stato di ingresso

pseudo-stato di uscita

e1B C

A

e2e3

e1S1

S2

S

e2

A:S

B:S

SOTTOMACCHINA

….

(a)

B

C

eD

A

(b)

B

C

e

D

A

e

può essere rappresentato anche così:

B

C

e1

e2

D

B

C

eD

A

(a) (b)

S

dove:e = e1 | e2e1 B

e2 C

A

può essere rappresentato anche così:

p

e(p)C

D

p

pp

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

e1B C

A

D Ee3

e2

e4

terminatoFrequenza 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

BA C

menu = A I B I C

menu=A menu=B menu=C

homehomehome

homeHOME

A B C

S

menu

menumenu

menu

dove: menu = A | B | C

menu = A A

menu = B B

menu = C C

Livello 1

HOME A B C

(a)

(b)

HOME

BA C

AB

C

home

home home

A C

B B

C

A

Frame a

Frame c

Fra

me

b

HOME

Frame a

A

Frame b Frame c

B C0

C2C2Cn

S

menu

(a)

(b)

APPENDICE 5

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


1


2


APPENDICE 6

Utente

Utenteinterno

Utenteesterno

Amministratore del sito

Clienteprivato

Rivenditore

Amatore della birra

Albergo

Ristorante

Cantina

Utenteregistrato

Utentenon registrato

LOGO

AREA LOGIN

AREA PER LA RICERCA

PRODOTTI

BARRA MENU PERSONALIZZATO

PAGINA DI BENVENUTO

SLOGAN

www.triple.it

Utente

Sistema Bancario<<system>>

Amministratoredel sito

Utenteregistrato

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 omodifica prodotto

10.Visualizza/Prepara/spedisci

ordini

5. Modifica caratteristiche

utente

Ordine

codiceOrdine dataOrdineindirizzoConsegnatotaleOrdine

codiceProdottonomefotodescrizioneprezzodisponibilità

Prodotto

0..11..1

ha

Utente

userNamepasswordtipoUtenteemail

DatiUtente

datiAnagrafici

1..1

0..Effettua

0.. 1..1

Riguarda

VoceOrdine

QuantitàprezzoUnitariosconto

1..1

1..SiComponeDi

Origine

codiceOriginenomedescrizionefoto

0.. 1..1

ProvieneDa

VoceCarrello

quantità

0..

1..1

Riguarda

ha 0..

1..1

Ele

nco

rice

tte

De

ttag

liri

cetta

Co

nfer

ma

La

sto

ria

Le

curi

osità

Le

rice

tte

La

Trip

leco

nsi

glia

Ce

rca

una

rice

ttaC

ont

atta

ciC

erc

ao

rdin

e

Ele

nco

pre

not

az.

De

ttag

lip

ren

ota

z.

Ele

nco

ord

ini

De

ttag

li e

mod

ifica

ord

ine

Ord

ini

De

ttag

lio

rdin

e

Pro

dot

tiin

offe

rta

Lis

tino

De

ttag

lip

rod

otto

Pre

not

a-zi

oni

De

ttag

lip

ren

ota

z.

Ca

rrel

loM

odifi

catu

oi d

ati

Ca

mbi

ap

assw

ord

Il m

ond

od

ella

birr

aR

egi

stra

tiP

assw

ord

dim

entic

ata

I no

stri

pro

dot

tiC

rea

nuov

op

rod

otto

Ord

ini

Are

a a

cce

ssib

ile a

tut

tiA

rea

acc

ess

ibile

so

lo a

gli u

ten

ti re

gis

tra

tiA

rea

acc

ess

ibile

so

lo a

gli a

mm

inis

trat

ori

Indi

rizzo

e m

eto

dop

agam

ento

Ce

rca

pre

not

az.

Ho

me

NB

: C

i son

o 3

varia

nti d

ella

ho

me

pag

e:

una

pe

r tu

tti,

una

pe

r gl

i ute

nti

reg

istr

ati

e u

na

per

glia

mm

inis

trat

ori

Elencoricette

Dettagliricetta

ConfermaLa Tripleconsiglia

Cerca unaricetta

Cercaordine

Cercautente

Elencoprenotaz.

Dettagliprenotaz.

Elencoordini

Dettagli emodificaordine

Elencoutenti

Dettagli emodificautente

Ordini

Dettagliordine

Prodottiin offerta

Listino

Dettagliprodotto

Prenota-zioni

Dettagliprenotaz.

CarrelloModificatuoi dati

Cambiapassword

Passworddimenticata

Crea nuovoprodotto

Ordini Utenti

Area accessibile a tutti Area accessibile solo agli utenti registrati Area accessibile solo agli amministratori

Indirizzoe metodo

pagamento

Cercaprenotaz.

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

ENTRARegistrati

Password dimenticata

SLOGAN


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

ENTRARegistrati


SLOGAN


Gabbia logica della pagina “Il mondo della birra”

La storia Le curiosità Cerca una ricettaLe ricette La triple consiglia

LOGO

Listino Prodotti

Ricerca prodotto

Trova

Utente

Password

ENTRARegistrati


BREVE I NTRODUZIONE AL MONDO DELLA BIRRA

(TESTO E FIGURE)

SLOGAN


Gabbia logica della pagina “Listino”

LOGO

Listino Prodotti

Ricerca prodotto

Trova

Utente

Password

ENTRARegistrati


TABELLA CON L’ELENCO DEI PRODOTTI

Parametro Parametro Parametro Parametro

SLOGAN


Gabbia logica della pagina “Dettagli ricetta”

DESCRIZIONE DELLA RICETTA

La storia Le curiosità

LOGO

Listino Prodotti

Ricerca prodotto

Trova

Utente

Password

ENTRARegistrati


IMMAGINE INGREDIENTI DELLA RICETTA

Cerca una ricettaLe ricette La triple consiglia

SLOGAN


Gabbia logica dell’home page per gli utenti registrati

PROMOZIONE PRODOTTI

IN OFFERTA (CLICCABILI)

Carrello OrdiniPrenotazioni

LOGO

Listino Prodotti

Ricerca prodotto

Trova

ESCIModifica password

Modifica i tuoi dati

Prodotti in Offerta

Benvenuto

NOMEUTENTE

SLOGAN


Gabbia logica dell’home page per gli amministratori

Ordini Utenti

ELENCO PRODOTTI FINE SCORTA

ELENCO ULTIME PRENOTAZIONI RICEVUTE

LOGO

Listino Prodotti

Ricerca prodotto

Trova


Crea nuovo prodotto

Benvenuto

AMMINISTRATORE

SLOGAN


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


Crea nuovo prodotto

Benvenuto

AMMINISTRATORE

SLOGAN


Gabbia logica della pagina “Utenti”

Ordini Utenti

ELENCO ULTIMI UTENTI REGISTRATI

Elenco utenti Cerca utente

LOGO

Listino Prodotti

Ricerca prodotto

Trova


Crea nuovo prodotto

Benvenuto

AMMINISTRATORE

Figure libro "Plasmare il Web"

Education

Transcript of Figure libro "Plasmare il Web"