Studio e sviluppo di un sistema CSCW per una azienda di consulenza multimediale

Analisi dei requisiti

utenti si aspettano di avere attraverso l’uso dell’applicazione. Per fare questo si utilizzano

diagrammi dei casi d’uso, di attività e di sequenza.

2.2.1 Venditore

L’unica operazione che l’utente Venditore è abilitato a fare é la visualizzazione delle

informazioni personali del dominio relative ad un contatto (vedi figura 2.2). Le informazioni

che si ricavano da questa interrogazioni sono utili al venditore quando è fuori sede ed ha

bisogno di avere informazioni dettagliate riguardanti un dominio in particolare. Su specifica

richiesta del committente a questo particolare utente è stato inibita la possibilità di accedere

alla parte di amministrazione e di sviluppo.

«uses» visualizza

informazioni sui domini

Venditore

Figura 2.2: Requisiti funzionali – Venditore

Di seguito è riportato il diagramma delle attività del caso d’uso relativo all’utente Venditore.

Come si può notare la prima fase è quella di autenticazione al sistema perché come detto in

precedenza il sistema è accessibile solo alle persone autorizzate in possesso di login e

password. (vedi figura 2.3)

42 Analisi dei requisiti

Sistema

Venditore

Accesso tramite login e password Autentica

al sistema

[non autenticato] [autenticato]

Errore di accesso Costruisci la home-page

Crea pagina Crea menu’ Principale

elenco Domini

Visualizza pagina Venditore Crea pagina Venditore

Carica informazioni

Seleziona dominio dall’elenco dominio selezionato

Visualizza informazioni

dominio selezionato

Esci dall’applicazione logout

Figura 2.3: Diagramma di attività – Venditore

43 Analisi dei requisiti

2.2.2 Sviluppatore

La figura 2.4 presenta i requisiti funzionali dell’utente Sviluppatore che si apprendono dalla

descrizione del problema. Come accennato precedentemente tutte queste attività le puó fare

anche l’utente Amministratore che andremo successivamente ad analizzare.

. consultazione della

lista della cose da fare

(ToDo) inserimento commento

inserimento e gestione di relativo ad un task o ad un

file relativi ai task o ai progetto

progetti «uses» «uses»

«uses» «uses»

«uses» visualizza

visualizza dettagli informazioni sui contatti

del task o del progetto sviluppatore

Figura 2.4: Requisiti funzionali – Sviluppatore

Ci aiutiamo a capire come l’utente Sviluppatore usufruisca del sistema, e come il sistema

risponde, utilizzando un diagramma di attività prendendo in considerazione ognuno dei casi

d’uso rappresentati. (vedi figura 2.5)

44 Analisi dei requisiti

Sistema

Sviluppatore

Accesso tramite login e password Autentica

al sistema

[non autenticato] [autenticato]

Errore di accesso Costruisci la home-page Valido anche

per

Amministratore

Crea pagina Crea menu’ Principale

elenco ListaToDo

Visualizza pagina Sviluppatore Crea pagina Sviluppatore

assegnato

a sviluppatore

da

amministratore Seleziona task tramite Carica task selezionato

la lista ToDo

Visualizza descrizione

del task selezionato

Inserisci il numero di Salva dati

ore di lavoro

Chiudi il task

selezionato

Crea commento

Inserisci file

richiedi elenco progetti e

reltivi tasks

ordinati per data (calendario ) Carica lista progetti e

reltivi tasks

richiedi elenco progetti e

reltivi tasks ordinati

alfabeticamente

Visualizza elenco

progetti e reltivi tasks in

Base all’ordinamento scelto

Seleziona un particolare

progetto o task

[assegnatario] [non assegnatario] Carica informazioni progetto

o task selezionato

Visualizza informazioni

richieste

Inserisci Inserisci files

commento

richiedi informazioni Carica elenco contatti

contatti

Visualizza elenco contatti Carica informazioni

Seleziona un contatto contatto selezionato

Visualizza informazioni

contatto

Esci dall’applicazione logout

45 Analisi dei requisiti

Figura 2.5: Diagramma di attività – Sviluppatore

2.2.3 Amministratore

L’utente amministratore, come accennato prima, ha la possibilità di sfruttare le funzionalità

messe a disposizione dello sviluppo ma è anche in grado di gestire un’ampia gamma di

processi aziendali che vengono considerati in questo applicativo. Grazie ad un diagramma dei

casi d’uso possiamo avere un’immediata sintesi (vedi figura 2.6).

inserimento e

catalogazione delle fatture emesse inserimento e

gestione dei dati di domino

«uses» suddivisione in task e «extends»

«uses» «extends» assegnamento dei

gestione dei task

creazione e task

stessi

gestione dei progetti

«uses» inserimento commento

relativo ad un task o ad un

«uses» progetto

«uses» inserimento e gestione di

«uses» file relativi ai task o ai

progetti

amministratore «uses»

«uses» inserimento e

gestione di usergroup

«uses»

«uses» consultazione della

lista della cose da fare

inerimento e

«uses» (ToDo)

gestione di nuovi prodotti

creazione e

gestione delle utenze

inserimento e

gestione dei contatti

Gestione ore «extends»

lavoro su task Figura 2.6: Requisiti funzionali – Amministratore

inserimento ore

«extends» visualizza ore degli

utenti "Sviluppatori" e

"Amministratori"

46 Analisi dei requisiti

Come si vede dal diagramma precedente, l’amministratore ha la possibilità di:

gestire i progetti e i relativi task in cui egli stesso suddividerà il progetto e distribuire

• allo sviluppo i vari task. (figura 2.7)

registrare e catalogare le fatture emesse ed avere un promemoria per emettere le

• fatture di progetti o task finiti (figura 2.8)

inserire e gestire domini e le e-mail, gli FTP, i sottodomini e i servizi correlati ad un

• dominio (figura 2.9)

inserire e gestire utenti del sistema (figura 2.10)

• inserire e gestire l’anagrafica dei contatti (figura 2.11)

• inserire e gestire gruppi di utenti (figura 2.12)

• inserire e gestire prodotti (figura 2.13)

• visualizzare le ore di lavoro di un qualsiasi utente registrato al sistema che faccia parte

• dello sviluppo, quindi amministratori e sviluppatori (figura 2.14)

gestire i file (figura 2.15)

•

Ribadiamo che l’utente Amministratore può anche avere accesso alle funzionalità studiate

prevalentemente per l’utente Sviluppatore in quanto egli stesso prende parte all’attività di

sviluppo le cui funzionalità sono già state descritte in precedenza.

Nelle pagine che seguono è stata inserita la raccolta di diagrammi di attività di ogni singolo

caso d’uso (vedi figure dalla 2.7 alla 2.15)

47 Analisi dei requisiti

Sistema

Amministratore

Accesso tramite login e password Autentica

al sistema

[non autenticato] [autenticato]

Errore di accesso Costruisci la home-page

Accesso all’area Progetti

Visualizza pagina Progetti Crea pagina Crea menu’progetti

elenco progetti

Crea pagina progetti

Aggiungi progetto Salva dati

Seleziona un progetto Carica informazini

dall’elenco progetto

Visualizza informazioni

progetto

Modifica paramentri

progetto

Aggiungi task

Assegna task Manda in fatturazione Carica pagina fatturazione

Visualizza pagina

fatturazione

Inserisci dati fattura

Seleziona un task Carica informazini

dall’elenco task

Visualizza informazioni

task

Modifica task

Esci dall’applicazione logout

48 Analisi dei requisiti

Sistema

Amministratore

Figura 2.7: Diagramma di attività del caso d’uso Gestione Progetti

Accesso tramite login e password Autentica

al sistema

[non autenticato] [autenticato]

Errore di accesso Costruisci la home-page

Accesso all’area Fatture

Visualizza pagina Fatture Crea pagina Crea menu’ fatture

elenco „In fatturazione“

Crea pagina Fatture

Seleziona un elemento Carica dati elemento

dall’elenco „in fatturazione“ selezionato Salva dati

Modifica dati

Seleziona un elemento Carica dati elemento

dall’elenco „fatturato“ selezionato

Visualizza dettagli

Richiedi l’ammontare Carica dati richiesti

del fatturato

Visualizza totale fatturato

Gestione fatture

Cancella fattura

Modifica fattura

Esci dall’applicazione logout

49 Analisi dei requisiti

Sistema

Amministratore

Figura 2.8: Diagramma di attività del caso d’uso Gestione Fatture

Access

o tram

ite login e pas

s

word Autentica

al sistema

[non autenticato] [autenticato]

Errore di accesso Costruisci la home-page

Accesso all’area Domini

Visualizza pagina Domini Crea pagina Crea menu’ Domini

elenco Domini

Crea pagina Domini

Seleziona un elemento Carica dati elemento

dall’elenco Domini selezionato Salva dati

Visualizza servizi attivi

nel dominio selezionato

Aggiungi documenti dominio

Rinnova dominio

Gestione Domini

Cancella Dominio

Modifica Dominio

Inserisci nuovo Dominio

Gestione E-Mail

Cancella E-Mail

Modifica E-Mail

Inserisci nuovo E-Mail

Gestione FTP

Cancella FTP

Modifica FTP

Inserisci nuovo FTP

Gestione DataBase

Cancella DataBase

Modifica DataBase

Inserisci nuovo DataBase

Gestione Servizi

Cancella Servizi

Modifica Servizi

Inserisci nuovo Servizi

Esci dall’applicazione logout

50 Analisi dei requisiti

Figura 2.9: Diagramma di attività del caso d’uso Gestione Domini

Sistema

Amministratore

Accesso tramite login e password Autentica

al sistema

[non autenticato] [autenticato]

Errore di accesso Costruisci la home-page

Accesso all’area Utenti

Visualizza pagina Utenti Crea pagina Crea menu’ Utenti

elenco Utenti

Crea pagina Utenti

Gestione Utenti Salva dati

Modifica Utente Cancella Utente

Seleziona un elemento Carica dati elemento

dall’elenco Utenti selezionato

Visualizza informazioni

dell’utente selezionato

Inserisci nuovo Utente

Richiedi elenco Carica lista richiesta

Utenti On-line

Visualizza elenco

degli Utenti On-Line

Scrivi E-mail da mandare Invia mail

agli Utenti

Esci dall’applicazione logout

51 Analisi dei requisiti

Sistema

Amministratore

Figura 2.10: Diagramma di attività del caso d’uso Gestione Utenti

Accesso tramite login e password Autentica

al sistema

[non autenticato] [autenticato]

Errore di accesso Costruisci la home-page

Accesso all’area contatti

Visualizza pagina contatti Crea pagina Crea menu’ contatti

informazioni contati

Crea pagina contatti

Gestione contatti

Aggiungi contatto Salva dati

Seleziona un contatto Carica informazioni contatto

dall’elenco

Visualizza informazioni

contatto

Modifica contatto

Gestione banche

Aggiungi nuova banca

Modifica banche

Cancella banche

Gestione agenzie

Aggiungi nuova agenzia

Modifica agenzie

Cancella agenzia

Gestione agenti

Aggiungi nuovo agente

Modifica agenti

Cancella agente

Esci dall’applicazione logout

52 Analisi dei requisiti

Figura 2.11: Diagramma di attività del caso d’uso Gestione Contatti

Sistema

Amministratore

Accesso tramite login e password Autentica

al sistema

[non autenticato] [autenticato]

Errore di accesso Costruisci la home-page

Accesso all’area Usergroup

Visualizza pagina Usergroup Crea pagina Crea menu’ Usergroup

Nuovo usergroup

Crea pagina Usergroup

Aggiungi nuovo usergroup

Seleziona gli utenti membri Salva dati

del nuovo usergroup

Gestisci usergroup

Visualizza elenco usergroup

Cancella Usergroup Modifica Usergroup

selezionato selezionato Carica informazioni utente

Seleziona utente selezionato

Visualizza informazioni utente

Esci dall’applicazione logout

53 Analisi dei requisiti

Figura 2.12: Diagramma di attività del caso d’uso Gestione Usergroup

Sistema

Amministratore

Accesso tramite login e password Autentica

al sistema

[non autenticato] [autenticato]

Errore di accesso Costruisci la home-page

Accesso all’area Prodotti Crea pagina Crea menu’ prodotti

Nuovo prodotto

Visualizza pagina Prodotti Crea pagina Prodotti

Aggiungi nuovo prodotto Salva dati

Gestisci prodotti

Visualizza elenco prodotti

Cancella Prodotto Modifica Prodotto

selezionato selezionato

Esci dall’applicazione logout

54 Analisi dei requisiti

Figura 2.13: Diagramma di attività del caso d’uso Gestione Prodotti

Sistema

Amministratore

Accesso tramite login e password Autentica

al sistema

[non autenticato] [autenticato]

Errore di accesso Costruisci la home-page

Accesso all’area Visualizza ore Accesso

diagramma

Utenti

Crea pagina Crea menu’ Utenti

Seleziona opzioni

interrogazione ore

Visualizza pagina Visualizza ore Crea pagina Visualizza ore

Seleziona opzioni Crea pagina risultato

interrogazione ore

Visualizza pagina risultato Carica pagina del progetto

Esci dall’applicazione Seleziona progetto o task o task selezionato

Accedi all’area progetto logout

Vedi

diagramma

sui progetti

55 Analisi dei requisiti

Figura 2.14: Diagramma di attività del caso d’uso Gestione Visualizza ore

Sistema

Amministratore

Accesso tramite login e password Autentica

al sistema

[non autenticato] [autenticato]

Errore di accesso Costruisci la home-page

Accesso all’area Files Crea pagina Crea menu’ Files

elenco Files

Visualizza pagina Files Crea pagina Files

Seleziona tipologia file Crea pagina risultato

Visualizza pagina risultato

Cancella file selezionato Salva dati

Scarica file selezionato

Seleziona utente Carica informazioni

utente selezionato

proprietario del file

Visualizza informazioni

utente selezionato

Esci dall’applicazione logout

56 Figura 2.15: Diagramma di attività del caso d’uso Gestione Files Analisi dei requisiti

2.3 Requisiti non funzionali

Tra i requisiti non funzionali dell’applicazione studiati insieme al committente c’è in primo

luogo l’usabilità del sistema: è stato studiato un modo per poter organizzare al meglio i menù

che permettevano all’utente l’accesso alle funzionalità dell’applicativo. Un occhio di riguardo

in merito è stato dato all’utente amministratore il quale, come visto precedentemente con il

diagramma dei casi d’uso, è l’attore che ha accesso al maggior numero di funzionalità. Per

risolvere la questione è stato pensato di interporre un menù di scelta intermedio tra il menù

principale e i menù specifici delle azioni, in modo tale che l’utente non dovesse scorrere con

la barra laterale gli innumerevoli menù che ogni funzionalità prevedeva.

L’interfaccia del sistema non utilizzerà frame HTML in quanto, come vedremo in seguito, è

stato scelto di strutturare per la View dell’applicazione una pagina utilizzando la tecnica del

pattern Master Template infatti le pagine dell’applicazione vengono costruite dinamicamente

(attraverso degli include). Il sistema sarà accessibile con qualsiasi browser che sarà in grado

di leggere CSS un accorgimento che si è preferito adottare in quanto dà la possibilità di

caricare la pagina più velocemente essendo l’HTML più leggero e di poter cambiare il layout

del sito una volta sola evitando di modificare tutte le pagine. Si è scelto di sviluppare con il

linguaggio di script PHP sfruttando come base dati MySql in quanto questa configurazione

gira su un numero elevato di piattaforme rendendo il progetto facilmente portabile.

Per quanto riguarda invece le prestazioni dell’applicazione bisogna considerare che è stata

pensata per girare prevalentemente in una intranet quindi la velocità tipica di questa è di

100Mb/s che si traduce in una risposta quasi in tempo reale del sistema. Chiaramente se il

sistema viene montato su un provider che ha accesso ad internet il sistema risponderà in base

alla velocità che la linea di accesso permetterà di sostenere.

La sicurezza dell’applicazione viene garantita dalla possibilità di accedere al sistema solo

tramite una login e una password rilasciate solo ed esclusivamente dagli utenti amministratori

dell’applicazione. Le variabili di sessione, poi, impediscono accessi a pagine interne

attraverso l’url; anche la cifratura delle password all’interno della base di dati rendono

improbabile gli accessi non autorizzati.

57 Progettazione della user experience

3 Progettazione della user experience

E’ ora arrivato il momento, dopo aver descritto con i casi d’uso e diagrammi di attività i

requisiti dell’applicativo, di focalizzarci su questo nuovo concetto nella modellizzazione di

sistemi Web introducendo il modello dell’interfaccia utente (User experience model o

modello UX) nel processo di sviluppo di applicazioni Web. Il modello UX rappresenta una

vista completa sul sistema da un punto di vista particolare, ovvero quello delle schermate

definite per l’applicativo stesso. Le proprietà significative dal punto di vista architetturale

delle schermate e le relazioni di navigazione esistenti tra esse sono i principali elementi del

modello UX. Una schermata rappresenta qualcosa che viene presentato all’utente e contiene

sia l’infrastruttura standard dell’interfaccia, quali menù e controlli, sia i contenuti rilevanti per

il business. Contenuto è un termine generico per indicare le informazioni di business presenti

in una pagina web; un contenuto è una combinazione di elementi statici ed elementi dinamici.

E’ importante però non confondere il concetto di schermata con quello di pagina Web che,

quest’ultime, rappresentano il meccanismo utilizzato per costruire e produrre schermate.

Per questo elaborato si è scelto di costruire una schermata utilizzando un meccanismo lato

server con il linguaggio di script PHP; questo però verrà visto nel prossimo capitolo basato

appunto sull’implementazione. Il meccanismo di estensione di UML rende possibile

introdurre un nuovo tipo di modellizzazione attraverso l’uso della WAE (Web Application

Extension), che aggiunge, alla notazione base di UML, concetti e vincoli per permettere la

modellizzazione di elementi architetturali specifici per il Web.

Nella modellizzazione dell’applicativo oggetto dell’elaborato è stato sfruttato il formalismo

della WAE attraverso i tre stereotipi che, per il modello della UX, lo rappresentano ovvero:

<<screen>> che sarà l’elemento maggiormente presente per i motivi descritti in

 precedenza;

<<screen compartment>> che si è deciso di utilizzare per migliorare la gestione delle

 schermate utilizzando il pattern master templace come sottolineato in precedenza nei

requisiti non funzionali;

 <<input form>> presenti anche esse in numero elevato essendoci molti form per

l’inserimento di dati nell’applicazione.

Per maggiori dettagli su questi tre stereotipi vedere l’appendice B.

Per poi caratterizzare e spiegare meglio ogni modello UX vengono sviluppati degli storybord

che vengono utilizzati per descrivere scenari di casi d’uso. Questo è possibile attraverso l’uso

58 Progettazione della user experience

di diagrammi si sequenza con l’obbiettivo finale di esprimere un utilizzo tipico del sistema

attraverso gli occhi dell’utente.

3.1 Venditore

Come in precedenza partiamo dall’utente venditore. Di seguito viene riportato l’operazione

che l’utente in questione è abilitato a fare e cioè la visualizzazione dei dati di dominio (vedi

figure 3.1 e 3.2)

Home page Venditore

OK Page

login Visualizza

informazioni

Visualizza lista dominio

domini selezionato

Menu’ Principale Pagina attiva

Figura 3.1 - User experience - Venditore

Home page Venditore page Lista domini Dominio selezionato

Venditore Naviga()

Login() Naviga()

richiedi lista domini Naviga()

seleziona un dominio dalla lista Naviga()

informazioni sul dominio selezionato

3.2 Storyboard – Venditore – visualizza dominio

59 Progettazione della user experience

3.2 Sviluppatore

Passiamo all’utente sviluppatore al quale vengono date maggiori possibilità di azione. Il

modello della UX descrive tutte le possibili schermate alle quali l’utente accederà (vedi figura

3.3)

Home page Valido anche per

utente

Amministratore Elenco di Task

assegnati allo

sviluppatore Inserimento

Sviluppatore ore

OK Page OK

login Visualizza lista Visualizza task

ToDo selezionato Form

Inserimento commenti OK

commenti e/o

file

Visualizza

Visualizza progetto o task

elenco progetti selezionato Form file

Menu’ Principale Pagina attiva OK

Visualizza Contiene l’elenco

calendario di tutti i progetti

ordinati per data

Visualizza

Visualizza lista informazioni

Contatti contatto

selezionato

Figura 3.3 - User experience - Sviluppatore

Il diagramma della UX viene poi dettagliato con gli storyboard delle operazioni che il menù

principale dell’utente Sviluppatore mette a disposizione (vedi figure dalla 3.4 alla 3.7)

Sviluppatore page Lista contatti Contatto selezionato

Home page

Sviluppatore

Naviga()

Login() Naviga()

richiedi lista contatti Naviga()

seleziona un contatto dalla lista Naviga()

informazioni sul contatto selezionato

3.4 Storyboard – Sviluppatore – seleziona contatto

60 Progettazione della user experience

Home page Form ore

Sviluppatore page Lista ToDo Task selezionato

Sviluppatore

Naviga()

Login() Naviga()

richiedi lista ToDo Naviga()

seleziona un Task dalla lista Naviga()

informazioni sul Task selezionato

Inserisci ore Naviga()

Compila form ore

Submit()

3.5 Storyboard – Sviluppatore – inserisci ore su task

Valido anche per

- Lista ToDo

- Calendario

Home page Form commenti

Sviluppatore page Elenco progetti Task selezionato

Sviluppatore

Naviga()

Login() Naviga()

richiedi elenco progetti Naviga()

seleziona un Task dalla lista Naviga()

informazioni sul Task selezionato

Inserisci commento Naviga()

Compila form commenti

Submit()

61 Progettazione della user experience

3.6 Storyboard – Sviluppatore – inserisci commento su task

Valido anche per

- Lista ToDo

- Calendario

Home page Form file

Sviluppatore page Elenco progetti Task selezionato

Sviluppatore

Naviga()

Login() Naviga()

richiedi elenco progetti Naviga()

seleziona un Task dalla lista Naviga()

informazioni sul Task selezionato

Inserisci file Naviga()

Compila form file

Submit()

3.7 Storyboard – Sviluppatore – inserisci file su task

3.3 Amministratore

Nello studio di questo utente si è volutamente evitato di inserire le attività che l’utente

amministratore e l’utente sviluppatore hanno in comune in modo tale da evitare ridondanze

inutili nei grafici. Nonostante ciò alcune schermate dell’utente sviluppatore vengono riportati

anche nell’utente che stiamo prendendo in considerazione infatti esistono dei passaggi

obbligati che non è possibile evitare e che, per dare un senso al diagramma, bisogna inserire.

Un esempio sono le liste dalle quali si seleziona l’elemento che successivamente verrà

modificato o cancellato. Si nota che, a differenza dei precedenti utenti, l’amministratore ha un

menù di selezione intermedio che permette all’utente di spostarsi da una funzionalità ad

un'altra in modo rapido, evitando in questo modo noiose barre di scorrimento che si

verrebbero a creare se tutte le funzionalità fossero accessibili fin dall’autenticazione.

62 Progettazione della user experience

A differenza di prima, essendo tante le operazioni svolte dall’amministratore, si è deciso di

sviluppare un diagramma delle schermate per ogni operazione che l’utente ha la possibilità di

fare, in modo da rendere i diagrammi maggiormente leggibili e chiari.

3.3.1 Gestione progetti

Di seguito è presentato il digramma della UX che comprende tutte le schermate a cui l’utente

ha accesso una volta autenticati dal sistema per quanto riguarda la gestione dei progetti (vedi

figura 3.8 ).

Home page Amministratore

page

OK Inserimento

login nuovo progetto OK

Visualizza lista

Progetti

Menu’ Principale Menu’ Selezione Pagina attiva Inserimento

Visualizza nuovo task e

progetto OK

assegnamento

selezionato

Menu’ progetti Modifica o

cancella

Manda in OK

progetto

fatturazione Visualizza task Modifica o

del progetto cancella task OK

OK

Figura 3.8 - User experience - Amministratore – Gestione progetti

Il digramma della UX viene ora dettagliato e spiegato con gli storyboard che il sottomenù

progetti mette a disposizione. Verranno descritte le attività di inserimento, assegnazione,

modifica e cancellazione di progetti e task e l’operazione di mettere nella sezione

63 Progettazione della user experience

fatturazione, nello stato “in fatturazione” che spiegheremo in seguito, un progetto e/o un task.

(vedi figure dalla 3.9 alla 3.15).

Home page Amministratore page Lista progetti Form progetto

Amministratore

Naviga()

Login() Naviga()

richiedi lista progetti Naviga()

inserisci e assegna nuovo progetto Naviga()

compila form progetti

Submit()

conferma inserimento e invio mail al proprietario del progetto

3.9 Storyboard – Amministratore – inserisci nuovo progetto Form progetto

Amministratore page Lista progetti

Home page

Amministratore

Naviga()

Login() Naviga()

richiedi lista progetti Naviga()

modifica progetto Naviga()

compila form progetti

Submit()

conferma modifiche e invio mail al proprietario del progetto

3.11 Storyboard – Amministratore – modifica progetto

64 Progettazione della user experience

Form progetto

Amministratore page Lista progetti

Home page

Amministratore

Naviga()

Login() Naviga()

richiedi lista progetti Naviga()

modifica progetto Naviga()

cancella progetto Cancella()

Naviga()

3.12 Storyboard – Amministratore – cancella progetto Form task

Home page Amministratore page Lista progetti Progetto selezionato

Amministratore

Naviga()

Login() Naviga()

richiedi lista progetti Naviga()

seleziona un progetto Naviga()

informazioni sul progetto selezionato

aggiungi e assegna task al progetto Naviga()

compila form progetti

Submit()

conferma inserimento e invio mail al proprietario del task

3.10 Storyboard – Amministratore – inserisci e assegna un nuovo task

65 Progettazione della user experience

Task selezionato Form task

Amministratore page Lista progetti Progetto selezionato

Home page

Amministratore

Naviga()

Login() Naviga()

richiedi lista progetti Naviga()

seleziona un progetto Naviga()

seleziona task del progetto Naviga()

informazioni sul task selezionato

modifica task selezionato Naviga()

compila form task

Submit()

conferma inserimento e invio mail al proprietario del task

3.13 Storyboard – Amministratore – modifica task Task selezionato

Amministratore page Lista progetti Progetto selezionato

Home page

Amministratore

Naviga()

Login() Naviga()

richiedi lista progetti Naviga()

seleziona un progetto Naviga()

seleziona task del progetto Naviga()

informazioni sul task selezionato

cancella task selezionato Cancella()

Naviga()

3.14 Storyboard – Amministratore – cancella task

66 Progettazione della user experience

Amministratore page Lista progetti Progetto selezionato Form fatturazione

Home page

Amministratore

Naviga()

Login() Naviga()

richiedi lista progetti Naviga()

seleziona un progetto Naviga()

Manda in fatturazione progetto o singoli task Naviga()

compila form fatture

Submit()

conferma inserimento fattura

3.15 Storyboard – Amministratore – manda in fatturazione

67 Progettazione della user experience

3.3.2 Gestione fatture

Di seguito è presentato il digramma della UX che comprende tutte le schermate a cui l’utente

ha accesso una volta autenticati al sistema per quanto riguarda la gestione delle fatture (vedi

figura 3.16 ).

Home page Amministratore

page

OK Visualizza Form fattura

lista „In

login OK

Fatturazione“

Lista di fatture nei

due possibili stati Visualizza Modifica

elenco fatture fattura OK

Menu’ Principale Menu’ Selezione Pagina attiva Visualizza Cancella

lista totale fattura

fatturato

Menu’ fatture Visualizza

Visualizza dettagli

lista „Fatturato“

Figura 3.16 - User experience - Amministratore – Gestione fatture

La sezione di fatturazione serve all’amministratore per registrare tutte le fatture emesse, che

vengono inserite nella sezione di applicativo accessibile mediante la lista “fatturato”, e serve

anche come promemoria per ricordarsi di fatturare quei progetti che, trovandosi nello lista “in

fatturazione”, non sono ancora stati fatturati. Ovviamente è messa a disposizione dell’utente

la possibilità di vedere l’ammontare del fatturato in un determinato periodo di tempo e di

modificare o cancellare una fattura, o anche il promemoria di fatturazione, se ci si accorge di

errori nella registrazione. Dettagliamo mediante storyboard queste operazioni appena

descritte accessibili mediante il sottomenù fatture. (vedi figure dalla 3.17 alla 3.21)

68 Progettazione della user experience

Home page Amministratore page Lista "in fatturazione" Fattura selezionata Form fattura

Amministratore

Naviga()

Login() Naviga()

richiedi lista stato "in fatturazione" Naviga()

seleziona fattura Naviga()

manda nello stato "fatturato" Naviga()

compila form fattura

Submit()

conferma dati inseriti correttamente

3.17 Storyboard – Amministratore – poni nello stato “fatturato”

Amministratore page Lista "fatturato" Fattura selezionata Dettaglio fattura

Home page

Amministratore

Naviga()

Login() Naviga()

richiedi lista stato "fatturato" Naviga()

seleziona fattura Naviga()

richiedi dettaglio fattura Naviga()

visualizza dettaglio fattura

3.18 Storyboard – Amministratore – visualizza dettaglio fattura in stato “fatturato”

69 Progettazione della user experience

Home page Amministratore page Lista fatture Form fattura

Amministratore

Naviga()

Login() Naviga()

richiedi lista fatture Naviga()

seleziona fattura

modifica fattura Naviga()

compila form fattura

Submit()

3.19 Storyboard – Amministratore – modifica fattura

Amministratore page Lista fatture

Home page

Amministratore

Naviga()

Login() Naviga()

richiedi lista fatture Naviga()

cancella fattura Cancella()

3.20 Storyboard – Amministratore – cancella fattura

70 Progettazione della user experience

Amministratore page Totale fatturato

Home page

Amministratore

Naviga()

Login() Naviga()

richiedi totale fatturato in un periodo selezionato Naviga()

visualizza totale fatturato

3.21 Storyboard – Amministratore – visualizza totale fatturato

71 Progettazione della user experience

3.3.3 Gestione domini

Di seguito è presentato il digramma della UX che comprende tutte le schermate a cui l’utente

ha accesso una volta autenticati al sistema per quanto riguarda la gestione dei domini (vedi

figura 3.22 ). Visualizza Inserisci

Visualizza informazioni documenti

Home page elenco domini dominio OK

dominio

selezionato Cancella

Modifica o documenti

Cancella

Rinnova dominio

Amministratore

page

OK Inserisci nuovo

dominio

login OK

Inserisci nuova OK

E-Mail

Menu’ Principale Menu’ Selezione Pagina attiva Inserisci nuovo

FTP OK

Seleziona

Menu’ domini dominio Inserisci nuovo

DataBase OK

Inserisci nuovo

Sottodomio OK

Modifica o Modifica o Modifica o

Modifica o

Modifica o cancella cancella cancella Inserisci nuovo

cancella FTP

cancella E-mail DataBase Sottodomini Servizi Servizio OK

OK

OK OK OK OK

Figura 3.22 - User experience - Amministratore – Gestione domini

Questa sezione dell’applicativo mette a disposizione dell’amministratore la possibilità di

inserire, modificare e cancellare informazioni di un dominio. Inoltre le stesse operazioni

possono essere applicate anche alle e-Mail, agli FTP, ai database, ai sottodomini e ad altri

servizi che ogni dominio possiede. C’è inoltre un collegamento anche con la fatturazione

anche in questo caso in quanto è prevista l’operazione di rinnovo che permette di mandare

nello stato “in fatturazione” il dominio in fase di scadenza. Infine è possibile salvare

72 Progettazione della user experience

all’interno dell’area dedicata ad un dominio i propri documenti. Tutto questo descritto in

dettaglio nei seguenti storyboard. (vedi figure dalla 3.23 alla 3.42)

Home page Amministratore page Form nuovo dominio

Amministratore

Naviga()

Login() Naviga()

inserisci nuovo dominio Naviga()

compila form nuovo dominio

Submit()

conferma dati inseriti correttamente

3.23 Storyboard – Amministratore – inserisci nuovo dominio

Home page Amministratore page Lista domini Dominio selezionato Form dominio

Amministratore

Naviga()

Login() Naviga()

richiedi lista domini Naviga()

seleziona dominio Naviga()

modifica / rinnova dominio Naviga()

compila form dominio

Submit()

conferma dati inseriti correttamente

3.24 Storyboard – Amministratore – modifica e rinnova dominio

73 Progettazione della user experience

Home page Amministratore page Lista domini

Amministratore

Naviga()

Login() Naviga()

richiedi lista domini Naviga()

seleziona dominio

cancella dominio Cancella()

3.25 Storyboard – Amministratore – cancella dominio

Home page Amministratore page Lista domini Dominio selezionato Form documenti

Amministratore

Naviga()

Login() Naviga()

richiedi lista domini Naviga()

seleziona dominio Naviga()

richiedi inserimento documenti dominio Naviga()

inserisci file documeti del dominio

Submit()

conferma dati inseriti correttamente

3.26 Storyboard – Amministratore – inserisci documento dominio

74 Progettazione della user experience

Home page Amministratore page Lista domini Dominio selezionato

Amministratore

Naviga()

Login() Naviga()

richiedi lista domini Naviga()

seleziona dominio Naviga()

richiedi cancellazione documenti dominio Cancella()

3.27 Storyboard – Amministratore – cancella documento dominio

Form nuova E-Mail

Home page Amministratore page Dominio selezionato

Amministratore

Naviga()

Login() Naviga()

accesso all'area e-mail

seleziona dominio Naviga()

inserisci nuova E -Mail Naviga()

compila form nuova e-mail

Submit()

conferma dati inseriti correttamente

3.28 Storyboard – Amministratore – inserisci nuova E-Mail

75 Progettazione della user experience

Home page Amministratore page Form E-Mail

Dominio selezionato Lista E-Mail

Amministratore

Naviga()

Login() Naviga()

accesso all'area e-mail

seleziona dominio Naviga()

richiedi lista E -Mail Naviga()

seleziona E-Mail da modificare Naviga()

compila form e-mail

Submit()

conferma dati inseriti correttamente

3.29 Storyboard – Amministratore – modifica E-Mail

Home page Amministratore page Dominio selezionato

Amministratore

Naviga()

Login() Naviga()

accesso all 'area e-mail

seleziona dominio Naviga()

seleziona E-Mail da cancellare Cancella()

3.30 Storyboard – Amministratore –cancella E-Mail

76 Progettazione della user experience

Form nuovo FTP

Home page Amministratore page Dominio selezionato

Amministratore

Naviga()

Login() Naviga()

accesso all 'area FTP

seleziona dominio Naviga()

inserisci nuova FTP Naviga()

compila form nuova FTP

Submit()

conferma dati inseriti correttamente

3.31 Storyboard – Amministratore – inserisci nuovo FTP

Home page Amministratore page Form FTP

Dominio selezionato Lista FTP

Amministratore

Naviga()

Login() Naviga()

accesso all 'area FTP

seleziona dominio Naviga()

richiedi lista FTP Naviga()

seleziona FTP da modificare Naviga()

compila form FTP

Submit()

conferma dati inseriti correttamente

3.32 Storyboard – Amministratore – modifica FTP

77 Progettazione della user experience

Home page Amministratore page Dominio selezionato

Amministratore

Naviga()

Login() Naviga()

accesso all'area FTP

seleziona dominio Naviga()

seleziona FTP da cancellare Cancella()

3.33 Storyboard – Amministratore –cancella FTP Form nuovo DataBase

Home page Amministratore page Dominio selezionato

Amministratore

Naviga()

Login() Naviga()

accesso all'area DataBase

seleziona dominio Naviga()

inserisci nuovo DataBase Naviga()

compila form nuova DataBase

Submit()

conferma dati inseriti correttamente

3.34 Storyboard – Amministratore – inserisci nuovo DataBase

78 Progettazione della user experience

Home page Amministratore page Lista DataBase Form DataBase

Dominio selezionato

Amministratore

Naviga()

Login() Naviga()

accesso all 'area DataBase

seleziona dominio Naviga()

richiedi lista DataBase Naviga()

seleziona DataBase da modificare Naviga()

compila form DataBase

Submit()

conferma dati inseriti correttamente

3.35 Storyboard – Amministratore – modifica DataBase

Home page Amministratore page Dominio selezionato

Amministratore

Naviga()

Login() Naviga()

accesso all 'area DataBase

seleziona dominio Naviga()

seleziona DataBase da cancellare Cancella()

3.36 Storyboard – Amministratore –cancella DataBase

79 Progettazione della user experience

Form nuovo sottodominio

Home page Amministratore page Dominio selezionato

Amministratore

Naviga()

Login() Naviga()

accesso all 'area sottodomini

seleziona dominio Naviga()

inserisci nuova sottodomini Naviga()

compila form nuovo sottodominio

Submit()

conferma dati inseriti correttamente

3.37 Storyboard – Amministratore – inserisci nuovo sottodominio

Home page Amministratore page Lista sottodomini Form sottodominio

Dominio selezionato

Amministratore

Naviga()

Login() Naviga()

accesso all 'area sottodomini

seleziona dominio Naviga()

richiedi lista sottodomini Naviga()

seleziona sottodominio da modificare Naviga()

compila form sottodominio

Submit()

conferma dati inseriti correttamente

3.38 Storyboard – Amministratore – modifica sottodominio

80 Progettazione della user experience

Home page Amministratore page Dominio selezionato

Amministratore

Naviga()

Login() Naviga()

accesso all 'area sottodomini

seleziona dominio Naviga()

seleziona sottodominio da cancellare Cancella()

3.39 Storyboard – Amministratore –cancella sottodominio Form nuova servizi

Home page Amministratore page Dominio selezionato

Amministratore

Naviga()

Login() Naviga()

accesso all 'area servizi

seleziona dominio Naviga()

inserisci nuovo servizio Naviga()

compila form nuovo servizio

Submit()

conferma dati inseriti correttamente

3.40 Storyboard – Amministratore – inserisci nuovo servizio

81 Progettazione della user experience

Home page Amministratore page Dominio selezionato Lista servizi Form servizio

Amministratore

Naviga()

Login() Naviga()

accesso all 'area servizi

seleziona dominio Naviga()

richiedi lista servizi Naviga()

seleziona servizio da modificare Naviga()

compila form servizio

Submit()

conferma dati inseriti correttamente

3.41 Storyboard – Amministratore – modifica servizio

Home page Amministratore page Dominio selezionato

Amministratore

Naviga()

Login() Naviga()

accesso all'area servizi

seleziona dominio Naviga()

seleziona servizio da cancellare Cancella()

3.42 Storyboard – Amministratore – cancella servizio

82 Progettazione della user experience

3.3.4 Gestione utenti

Di seguito è presentato il digramma della UX che comprende tutte le schermate a cui l’utente

ha accesso una volta autenticati al sistema per quanto riguarda la gestione degli utenti (vedi

figura 3.43 ).

Home page Cancella

Visualizza lista Modifica

Amministratore Utenti utente

page

OK OK

login Inserisci nuovo

utente OK

Visualizza

Visualizza utente

Menu’ Principale Menu’ Selezione Pagina attiva utenti on-line

Invio E-Mail OK

Menu’ utenti

Figura 3.43 - User experience - Amministratore – Gestione utenti

Una semplice gestione degli utenti che prevede l’inserimento, la modifica e la cancellazione

di utenti dal sistema che, come sottolineato in precedenza, è l’unico modo per accedere al

sistema. Per far parte degli utenti registrati a questa applicazione non esiste altro modo che

richiedere l’iscrizione ad un amministratore del sistema. Inoltre dai seguenti storyboard si

vedrà come, tramite il sottomenù utenti, sia possibile vedere la lista degli utenti in quel

momento on-line o avere la possibilità di mandare a tutti gli utenti o ad un solo gruppo

(usergroup) di essi una e-mail pensato come un servizio di mailing-list. (vedi figure dalla 3.44

alla 3.48)

83 Progettazione della user experience

Form nuovo utente

Home page Amministratore page

Amministratore

Naviga()

Login() Naviga()

richiedi inserimento nuovo utente Naviga()

compila form utente

Submit()

conferma inserimento dati corretto

3.44 Storyboard – Amministratore – inserisci nuovo utente

Home page Amministratore page Lista utenti Utente selezionato Form utente

Amministratore

Naviga()

Login() Naviga()

richiedi lista utenti Naviga()

seleziona un utente dalla lista Naviga()

modifica utente Naviga()

compila form utente

Submit()

conferma inserimento dati corretto

3.45 Storyboard – Amministratore – modifica utente

84 Progettazione della user experience

Home page Amministratore page Lista utenti

Amministratore

Naviga()

Login() Naviga()

richiedi lista utenti Naviga()

seleziona utente da cancellare Cancella()

3.46 Storyboard – Amministratore – cancella utente

Utenti on-line Utente

Home page Amministratore page

Amministratore

Naviga()

Login() Naviga()

richiedi lista utenti on-line Naviga()

visualizza lista utenti on -line

seleziona un utente dalla lista Naviga()

visualizza dettagli utente

3.47 Storyboard – Amministratore – visualizza utenti on-line e dettaglio utente

85 Progettazione della user experience

Form invio e-mail

Home page Amministratore page

Amministratore

Naviga()

Login() Naviga()

richiedi invio e -mail Naviga()

compila form invio e-mail

Submit()

conferma invio effetuato con successo

3.48 Storyboard – Amministratore – invia e-mail agli utenti

86 Progettazione della user experience

3.3.5 Gestione contatti

Di seguito è presentato il diagramma della UX che comprende tutte le schermate a cui l’utente

ha accesso una volta autenticati al sistema per quanto riguarda la gestione dei contatti (vedi

figura 3.49 ). Cancella

Home page preventivo

Visualizza

informazioni

Visualizza lista Inserisci

contatto

Contatti Preventivo OK

selezionato

Amministratore

page

OK Modifica o

Inserisci nuovo cancella

contatto

login OK OK

contatto

Inserisci nuova

agenzia OK

Menu’ Principale Menu’ Selezione Pagina attiva Modifica

Visualizza agenzia

elenco agenzie OK

Cancella

Inserisci nuovo banca

Menu’ contatti OK

agente Modifica

Visualizza agente

elenco agenti OK

Cancella

Inserisci nuovo agenzia

OK

agente Modifica

Visualizza agente

elenco agenti OK

Cancella

agente

Figura 3.49 - User experience - Amministratore – Gestione contatti

L’applicativo mette a disposizione dell’utente la possibilità di inserire, modificare e cancellare

i contatti di un azienda gestendo anche per ogni contatto i preventivi fatti ad ogni singolo

contatto. Inoltre per ogni contatto è prevista la possibilità di inserire un numero di banche a

piacere ad esso collegato, di assegnargli un agente esterno o interno all’azienda che ha fornito

il lavoro e al quale il contatto fa riferimento, inoltre c’è una gestione delle agenzie esterne che

cooperano con l’azienda e forniscono nuovi contatti ai quali gli agenti appartengono.

87 Progettazione della user experience

Ovviamente, come si vedrà dai prossimi storyboard, oltre all’inserimento c’è la possibilità di

modifica e di cancellazione di banche, agenti e agenzie. (vedi figure dalla 3.50 alla 3.63)

Home page Amministratore page Form nuovo contatto

Amministratore

Naviga()

Login() Naviga()

richiedi inserimento nuovo contatto Naviga()

compila form contatto

Submit()

conferma inserimento dati corretto

3.50 Storyboard – Amministratore – inserisci nuovo contatto

Home page Amministratore page Lista contatti Contatto selezionato Form contatto

Amministratore

Naviga()

Login() Naviga()

richiedi lista contatti Naviga()

seleziona un contatto dalla lista Naviga()

visualizza informazioni contatto selezionato

modifica contatto Naviga()

compila form contatto

Submit()

conferma inserimento dati corretto

3.51 Storyboard – Amministratore – modifica contatto selezionato

88 Progettazione della user experience

Home page Amministratore page Lista contatti

Amministratore

Naviga()

Login() Naviga()

richiedi lista contatti Naviga()

seleziona contatto da cancellare Cancella()

3.52 Storyboard – Amministratore – cancella contatto selezionato

Home page Amministratore page Lista contatti Contatto selezionato Form preventivo

Amministratore

Naviga()

Login() Naviga()

richiedi lista contatti Naviga()

seleziona un contatto dalla lista Naviga()

inserisci il file di preventivo Naviga()

compila form preventivo

Submit()

conferma inserimento dati corretto

3.53 Storyboard – Amministratore – inserisci file di preventivo

89 Progettazione della user experience

Home page Amministratore page Lista contatti Contatto selezionato

Amministratore

Naviga()

Login() Naviga()

richiedi lista contatti Naviga()

seleziona un contatto dalla lista Naviga()

cancella il file di preventivo Cancella()

3.54 Storyboard – Amministratore – cancella file di preventivo

Home page Amministratore page Form nuova banca

Amministratore

Naviga()

Login() Naviga()

richiedi inserimento nuova banca Naviga()

compila form nuova banca

Submit()

conferma inserimento dati corretto

3.55 Storyboard – Amministratore – inserisci nuova banca

90 Progettazione della user experience

Home page Amministratore page Lista banche Banca selezionata Form banca

Amministratore

Naviga()

Login() Naviga()

richiedi lista banche Naviga()

seleziona una banca dalla lista Naviga()

modifica banca Naviga()

compila form banca

Submit()

conferma inserimento dati corretto

3.56 Storyboard – Amministratore – modifica banca

Home page Amministratore page Lista banche

Amministratore

Naviga()

Login() Naviga()

richiedi lista banche Naviga()

seleziona banca da cancellare Cancella()

3.57 Storyboard – Amministratore – cancella banca

91 Progettazione della user experience

Home page Amministratore page Form nuova agenzia

Amministratore

Naviga()

Login() Naviga()

richiedi inserimento nuova agenzia Naviga()

compila form nuova agenzia

Submit()

conferma inserimento dati corretto

3.58 Storyboard – Amministratore – inserisci nuova agenzia

Home page Amministratore page Lista banche Agenzia selezionata Form agenzia

Amministratore

Naviga()

Login() Naviga()

richiedi lista agenzie Naviga()

seleziona un'agenzia dalla lista Naviga()

modifica agenzia Naviga()

compila form agenzia

Submit()

conferma inserimento dati corretto

3.59 Storyboard – Amministratore – modifica agenzia

92 Progettazione della user experience

Home page Amministratore page Lista agenzie

Amministratore

Naviga()

Login() Naviga()

richiedi lista agenzie Naviga()

seleziona agenzia da cancellare Cancella()

3.60 Storyboard – Amministratore – cancella agenzia

Home page Amministratore page Form nuovo agente

Amministratore

Naviga()

Login() Naviga()

richiedi inserimento nuovo agente Naviga()

compila form nuovo agente

Submit()

conferma inserimento dati corretto

3.61 Storyboard – Amministratore – inserisci nuovo agente

93 Progettazione della user experience

Home page Amministratore page Lista banche Agente selezionato Form agente

Amministratore

Naviga()

Login() Naviga()

richiedi lista agenti Naviga()

seleziona un agente dalla lista Naviga()

modifica agente Naviga()

compila form agente

Submit()

conferma inserimento dati corretto

3.62 Storyboard – Amministratore – modifica agente

Home page Amministratore page Lista agenti

Amministratore

Naviga()

Login() Naviga()

richiedi lista agenti Naviga()

seleziona agente da cancellare Cancella()

3.63 Storyboard – Amministratore – cancella agente

94 Progettazione della user experience

3.3.6 Gestione usergroup

Di seguito è presentato il digramma della UX che comprende tutte le schermate a cui l’utente

ha accesso una volta autenticati al sistema per quanto riguarda la gestione degli usergroup

(vedi figura 3.64 ).

Home page Amministratore

page

OK

login Inserisci nuovo

usergroup OK

Menu’ Principale Menu’ Selezione Pagina attiva Visualizza Modifica

elenco usergroup OK

usergroups

Menu’ Cancella

usergroups Utente usergroup

Figura 3.64 - User experience - Amministratore – Gestione usergroup

Per organizzare gli utenti in gruppi è stata prevista questa sezione nella quale si possono

inserire, modificare e cancellare usergroup. Queste funzionalità sono accessibili dal

sottomenù usergroups che sono caratterizzati da un nome e dalla lista degli utenti registrati

all’applicazione e che si vogliono in qualche modo raggruppare. Vediamo attraverso gli

storyboard come tutto questo avviene. (vedi figure dalla 3.65 alla 3.68)

95 Progettazione della user experience

Home page Amministratore page Form nuovo usergroup

Amministratore

Naviga()

Login() Naviga()

richiedi inserimento nuovo usergroup Naviga()

compila form nuovo usergroup

Submit()

conferma inserimento dati corretto

3.65 Storyboard – Amministratore – inserisci nuovo usergroup

Home page Amministratore page Lista usergroup Usergroup selezionato Form usergroup

Amministratore

Naviga()

Login() Naviga()

richiedi lista usergroup Naviga()

seleziona uno usergroup dalla lista Naviga()

modifica usergroup Naviga()

compila form usergroup

Submit()

conferma inserimento dati corretto

3.66 Storyboard – Amministratore – modifica usergroup

96 Progettazione della user experience

Home page Amministratore page Lista usergroup

Amministratore Naviga()

Login() Naviga()

richiedi lista usergroup Naviga()

seleziona usergroup da cancellare Cancella()

3.67 Storyboard – Amministratore – cancella usergroup

Home page Amministratore page Lista usergroup Utente

Amministratore Naviga()

Login() Naviga()

richiedi lista usergroup Naviga()

seleziona utente Naviga()

Visualizza dettaglio utente

3.68 Storyboard – Amministratore – Visualizza informazioni utente

97 Progettazione della user experience

3.3.7 Gestione prodotti

Di seguito è presentato il digramma della UX che comprende tutte le schermate a cui l’utente

ha accesso una volta autenticati al sistema per quanto riguarda la gestione dei prodotti (vedi

figura 3.64 ).

Home page Amministratore

page

OK

login Inserisci nuovo

prodotto OK

Menu’ Principale Menu’ Selezione Pagina attiva Modifica

Visualizza prodotto

elenco prodotti OK

Menu’ prodotti Cancella

prodotto

Figura 3.69 - User experience - Amministratore – Gestione prodotti

Essendo molti i prodotti che l’azienda fornisce si è deciso di dedicargli una sezione nella

quale vengono inseriti, modificati e cancellati. Ogni progetto poi sarà identificato, oltre da un

identificativo nella base dati, dal binomio contatto + prodotto. Anche in questo caso

aiutiamoci con gli storyboard. (vedi figure dalla 3.70 alla 3.72)

98 Progettazione della user experience

Home page Amministratore page Lista prodotti Prodotto selezionato Form prodotto

Amministratore

Naviga()

Login() Naviga()

richiedi lista prodotti Naviga()

seleziona un prodotti dalla lista Naviga()

modifica prodotto Naviga()

compila form prodotto

Submit()

conferma inserimento dati corretto

3.70 Storyboard – Amministratore – modifica prodotti

Home page Amministratore page Form nuovo prodotto

Amministratore

Naviga()

Login() Naviga()

richiedi inserimento nuovo prodotto Naviga()

compila form nuovo prodotto

Submit()

conferma inserimento dati corretto

3.71 Storyboard – Amministratore – inserisci nuovo prodotto

99 Progettazione della user experience

Home page Amministratore page Lista prodotti

Amministratore Naviga()

Login() Naviga()

richiedi lista prodotti Naviga()

seleziona prodotto da cancellare Cancella()

3.72 Storyboard – Amministratore – cancella prodotto

3.3.8 Gestione ore di sviluppo

Di seguito è presentato il digramma della UX che comprende tutte le schermate a cui l’utente

ha accesso una volta autenticati al sistema per quanto riguarda la gestione delle ore di

sviluppo (vedi figura 3.73 ).

Home page Amministratore

page

OK

login I paramentri sono

-nome utente

-progetto

-range di date

Inserisci

parametri

visualizzazione OK

ore

Menu’ Principale Menu’ Selezione Pagina attiva Visualizza ore

Menu’ contatti

Figura 3.73 - User experience - Amministratore – Gestione ore di sviluppo

100 Progettazione della user experience

Con questa semplice operazione, che prevede un solo storyboard, l’amministratore riesce ad

avere delle informazioni molto utili all’azienda sul monitoraggio dello sviluppo. (vedi figura

3.74) Home page Amministratore page Form visualizza ore

Amministratore

Naviga()

Login() Naviga()

richiedi lista ore Naviga()

compila form visualizza ore

Submit()

visualizza ore in base ai parametri richiesti

3.74 Storyboard – Amministratore – richiedi lista ore

101 Progettazione della user experience

3.3.9 Gestione files

Di seguito è presentato il digramma della UX che comprende tutte le schermate a cui l’utente

ha accesso una volta autenticati al sistema per quanto riguarda la gestione dei file (vedi figura

3.75 ).

Home page Amministratore

page

OK

login Download file

Visualizza

informazioni

Visualizza utente proprietario

elenco file file

Menu’ Principale Menu’ Selezione Pagina attiva Cancella file

Menu’ file

Figura 3.75 - User experience - Amministratore – Gestione files

Questa funzionalità prevede principalmente la possibilità di scaricare e cancellare tutti i file

contenuti all’interno dell’applicativo compresi documenti di dominio, preventivi dei contatti e

file di ogni genere salvati all’interno della sezione dedicata nei progetti. Inoltre, come

sottolineeranno i prossimi storyboard, ci sarà la possibilità di visualizzare informazioni

sull’utente proprietario di un file. (vedi figure dalla 3.76 alla 3.78)

102 Progettazione della user experience

Home page Amministratore page Lista file

Amministratore

Naviga()

Login() Naviga()

richiedi lista file Naviga()

seleziona un file da scaricare Download()

3.76 Storyboard – Amministratore – scarica un file dall’elenco

Home page Amministratore page Lista file Utente selezionato

Amministratore

Naviga()

Login() Naviga()

richiedi lista file Naviga()

seleziona un utente proprietario di un file Naviga()

visualizza informazioni utente selezionato

3.77 Storyboard – Amministratore – visualizza informazioni utente

103 Progettazione della user experience

Home page Amministratore page Lista file

Amministratore

Naviga()

Login() Naviga()

richiedi lista file Naviga()

seleziona un file da cancellare Cancella()

3.78 Storyboard – Amministratore – cancella file

104 Progettazione della user experience

3.4 Schermate

Inseriamo ora qualche schermata dell’applicativo per mostrarne il layout di impaginazione

che verranno presentati all’utente.

Iniziamo con l’immagine di seguito che rappresenta la Home-page del sistema comune a tutti

gli utenti e dalla quale si è grado di autenticarsi al sistema. (vedi figura 3.79)

Figura 3.79: Schermata – Login

105 Progettazione della user experience

Passiamo successivamente alla schermata che l’utente venditore vedrà una volta autenticato.

Si riesce a vedere l’elenco dei domini ai quali ha accesso, ciccandoci sopra, per vedere le

informazioni sulle caratteristiche aggiuntive di ogni dominio. Inoltre di riesce a notare la

possibilità di poter ricercare un dominio in base al contatto. (vedi figura 3.80)

Figura 3.80: Schermata – Venditore

106 Progettazione della user experience

Questa immagine invece rappresenta quello che vedrà l’utente Sviluppatore una volta

autenticato al sistema e cioè la lista “ToDo” dei lavori ad esso assegnati oltre alla possibilità

di vedere l’insieme dei lavori di un particolare usergroup. Inoltre si nota il menù principale

delle operazioni concesse a questo utente. Simile sarà anche la schermata della lista “ToDo”

dell’utente Amministratore, ma ci sarà in più il sottomenù di selezione. (vedi figura 3.81)

Figura 3.81: Schermate – Sviluppatore

107 Progettazione della user experience

Un’importante strumento messo a disposizione dello sviluppo è il calendario, nel quale

vengono riportati i task dei progetti assegnati all’utente che ha appena effettuato

l’autenticazione, quelli di un altro utente e anche quelli di un usergroup selezionato. (vedi

figura 3.82) Figura 3.82: Schermate – Calendario

108 Progettazione della user experience

Quanto riportato nella figura sottostante è quanto viene mostrato all’utente Amministratore

dopo l’operazione di autenticazione. Come si nota viene visualizzata la lista dei progetti con i

relativi task. Alla sinistra della pagina si notano il menù principale, il menù di selezione e il

sottomenù dei progetti. (vedi figura 3.83)

Figura 3.83: Schermate – Lista progetti

109 Progettazione della user experience

Vediamo con la schermata che segue come viene proposto il dettaglio di un progetto

all’utente Amministratore che come si nota ha la possibilità di modificarlo (edit), di

aggiungere un attività e di mandare il fatturazione l’intero progetto. Inoltre si notano le

sezioni dell’applicativo per l’inserimento di commenti e di file

Figura 3.84: Schermate – Dettaglio progetto

110 Progettazione della user experience

Vediamo anche come vengono visualizzate le informazioni dei contatti e i menù visualizzati

in questa sezione. Si nota la possibilità di aggiunta di progetti, domini e banche al profilo del

contatto; inoltre c’è una sezione dedicata ai preventivi che quindi sono subito reperibili per

ogni contatto. (vedi figura 3.85)

Figura 3.85 Schermate – Informazioni contatto

111 Progettazione della user experience

La seguente schermata visualizza il risultato dell’interrogazione fatta per visualizzare il

numero di ore di lavoro, per ogni progetto, di un determinato utente. (vedi figura 3.86)

Figura 3.86 Schermate – Informazioni contatto

112 Progettazione della user experience

Viene presentato ora un esempio di form per l’inserimento di dati. In questo specifico caso ci

si sta occupando dell’inserimento dei dati relativi ad un nuovo dominio. Molteplici altri form

vengono utilizzati nel progetto. (vedi figura 3.87)

Figura 3.87 Schermate – form aggiungi dominio

113 Progettazione della user experience

Infine, in questa schermata, viene presentata un esempio di gestione di dati che, nello

specifico, sono dati relativi agli utenti. Come si può notare il sistema dà la possibilità di

cancellare e di modificare (edit) i dati. Una gestione simile avviene anche per prodotti e

usergroup. Figura 3.88 Schermate – Gestione utenti

Le schermate dell’applicativo sono molte di più di quelle che abbiamo visto in questo

sottocapitolo, infatti si è scelto di mostrare le più significative per dare un’idea di come è stato

strutturato l’applicativo e di come sono i layout di impaginazione.

114 Progettazione dell’implementazione

4 Progettazione dell’implementazione

Organizzare la progettazione dell’implementazione di un sito significa aggiungere al modello

di analisi i dettagli che permettono l’implementazione dei componenti fisici previsti

dall’architettura software.

Per ottenere questo obbiettivo si devono quindi stabilire le tipologie di pagine (client, server,

form) che si adotteranno nell’ implementare, le funzionalità del sito e determinare le

operazioni svolte a lato server e a lato client. Anche per questo tipo di formalismo

l’estensione per il Web (WAE) che abbiamo incontrato anche nel precedente capitolo ci viene

in aiuto con altri tre tipi di stereotipi fondamentali nella progettazione dell’implementazione

di un applicativo web-oriented. Gli stereotipi che si utilizzano sono:

 <<server page>> che rappresenta una pagina Web che ha contenuti costruiti dal server a

ogni richiesta.

 <<client page>> che rappresenta una pagina Web formattata in HTML ed è un misto di

dati, presentazione e persino logica applicativa interpretabile dal browser.

 <<form HTML>> sono un insieme di campi di input che sono parte di una pagina client.

<<static page component >> che rappresenta la pagina statica che il browser richiede al

 web-server

<<dynamic page component>> che rappresenta la pagina dinamica che, a seguito di una

 richiesta da parte del browser, fa partire un’elaborazione sul server.

Per maggiori dettagli su questi tre stereotipi vedere l’appendice B.

Sfrutteremo questi stereotipi e le conseguenti classi stereotipate rappresentandoli mediante dei

diagrammi logici e dei componenti che caratterizzeranno questo capitolo.

Essi servono a dare una visualizzazione logica di come sarà strutturata l’applicazione e quali

sono alcune delle pagine che faranno parte dell’implementazione del progetto. Anche in

questo caso ci verranno in aiuto per una migliore comprensione, dei diagrammi di sequenza

che serviranno per capire meglio cosa succede nel sistema quando si fanno determinate

operazioni, e come le pagine interagiscono tra di loro per arrivare alla presentazione delle

schermate della User Experience descritta nel capitolo precedente. Parlando di

implementazione è necessario modellizzare la base dati con il formalismo del diagramma

Entità – Relazione che verrà preceduto da una minima descrizione appunto delle relazioni tra

le entità che l’applicativo prevede.

115 Progettazione dell’implementazione

Visto il grande numero di funzionalità che sono state richieste si è deciso di sviluppare una

subversion in base ai risultati ottenuti dallo studio dell’arte dei sistemi CSCW.

L’azienda Blumade s.a.s è una Software House di piccole dimensioni quindi, in base alle

conclusioni viste nel sottocapitolo 1.5, si è deciso di sviluppare una subversion a partire dal

tool WebCollab, un prodotto open source liberamente accessibile e modificabile.

Per questo sistema è stato utilizzato il linguaggio di script PHP e come base di dati MySql. E’

stato deciso questo sulla base del fatto che l’applicativo WebCollab é stato sviluppato in PHP

e prevede, tra le altre, anche l’utilizzo della base dati MySql utilizzata dall’azienda che ha

ospitato il tirocinio.

116 Progettazione dell’implementazione

4.1 Venditore

Di seguito è presentato il digramma della vista logica e dei componenti che raffigura le classi

stereotipate che intervengono nella visualizzazione dei domini, richiesta dall’utente venditore

e i relativi componenti che verranno utilizzate nell’implementazione (vedi figura 4.1)

Login form Venditore page

Home page -login <<submit>>

-password +Verifica input()

+Login() +Submit() <<build>>

Venditore page main.php

Pagina attiva

Menu' principale

Home page.html +visualizza domini ()

+logout() <<link>>

Lista domini Informazioni dominio

-dominio

-scadenza

+Selezina dominio() <<link>> -numero e-mail

-numero FTP

-numero DataBase

-numero sottodomini

-numero servizi

main_menu.php Domini.php

Figura 4.1: Vista logica e dei componenti – Venditore

Tramite il seguente diagramma di sequenza si riescono a vedere le interazioni tra il venditore

e il sistema per la visualizzazione delle informazioni di dominio (vedi figura 4.2)

117 Progettazione dell’implementazione

Home page Login form Venditore page Venditore page Lista domini Informazioni dominio

Venditore Naviga() Naviga()

inserisci login e password Submit() Verifica input()

Build Naviga()

seleziona dominio dall 'elenco Naviga()

Informazioni dominio selezionato

Figura 4.2: Vista logica (digramma di sequenza) – Venditore

4.2 Sviluppatore

Di seguito è presentato il digramma della vista logica e dei componenti che raffigura le classi

stereotipate che caratterizzano le funzionalità che sono state sviluppate per gli addetti allo

sviluppo (compresi gli amministratori). Inoltre vengono raffigurati i componenti che verranno

utilizzati nell’implementazione (vedi figura 4.3).

118 Progettazione dell’implementazione

Login form Sviluppatore page

Home page -login <<submit>>

-password +Verifica input() Contatto

+Login() +Submit() -azienda

-ragione sociale

-stato

<<build>> -partita iva

-codice fiscale

-nome

main.php -cognome

-telefono

Sviluppatore page -cellulare

-fax

-indirizzo

-codice postale

<<link>> -città

Elenco contatti -e-mail

-riferimento interno

-progetti

+Visualizza contatto () -domini

-banche

<<link>>

Home page.html Menu' principale Pagina attiva

+Lista ToDo()

+Calendario()

+logout() <<link>> <<link>>

<<link>> Contatti.php

Elenco progetti Calendario

main_menu.php Lista ToDo +Visualizza progetto() +Visualizza progetto()

+Seleziona task() +Visualizza task () +Visualizza task ()

<<link>> <<link>> <<link>>

<<link>> <<link>>

Task assegnato Task Calendario.php

-contatto -contatto

-prodotto Progetto -prodotto

-attività -attività

-contatto

-descrizione -descrizione

-prodotto

-assegnatario -assegnatario

-descrizione

-data creazione

Task.php -data creazione

-assegnatario

-data scadenza -data scadenza

-data creazione

-stato -stato

-data scadenza

-numero ore lavorato -numero ore lavorato

-stato

-commenti -commenti

-elenco task

-elenco file <<link>> -elenco file

-commenti

+Inserisci ore() -elenco file +Inserisci commento()

+Inserisci commento()

<<link>> +Inserisci file ()

+Inserisci commento()

+Inserisci file () +Inserisci file()

+Finito!()

Inserisci ore form <<link>>

-data <<build>>

-ora inizio

-ora fine

+Submit() Finito! <<build>>

<<build>>

<<build>> <<link>>

<<build>>

<<build>>

<<link>> <<build>>

<<submit>>

Inserisci ore Inserisci commento Inserisci file form

Inserisci commento form Inserisci commento

-messaggio -nome file

<<submit>> <<submit>>

+Verifica input() -descrizione

-seleziona destinario e-mail +Verifica input() +Verifica input()

+Salva() +Submit() +Submit()

+Salva() +Upload File()

<<build>>

Riepilogo ore

-data

-ora inizio

-ora fine

-numero ore forum.php file.php

Figura 4.3: Vista logica e dei componenti – Sviluppatore

Di seguito vengono raffigurate le viste logiche, sfruttando diagrammi di sequenza per fare in

modo che lo sviluppatore interagisca con il sistema, per poter usufruire delle funzionalità di

119 Progettazione dell’implementazione

visualizzazione dei contatti, dell’inserimento di commenti o file in un task o in un progetto e

dell’inserimento delle ore di sviluppo per un determinato task (vedi figure dalla 4.4 alla 4.7)

Home page Login form Sviluppatore page Sviluppatore page Lista contatti Contatto selezionato

Sviluppatore Naviga() Naviga()

inserisci login e password Submit() Verifica input()

Build

<<link contatti>> Naviga()

seleziona un contatto Naviga()

informazioni sul contatto selezionato

Figura 4.4: Vista logica (digramma di sequenza) – Sviluppatore – Visualizza contatti

Home page Login form Sviluppatore page Sviluppatore page Lista ToDo Task selezionato Inserisci ore form Inserisci ore Riepilogo ore

Sviluppatore Naviga() Naviga()

inserisci login e password Submit() Verifica input()

Build

<<link Lista ToDo>> Naviga()

seleziona un Task dalla lista Naviga()

informazioni sul Task selezionato

Inserisci ore Naviga()

Compila form ore Submit() Verifica input()

Salva()

Build

informazioni di riepilogo delle ore inserite in determinato task

Figura 4.5: Vista logica (digramma di sequenza) – Sviluppatore – Inserimento ore su task

120 Progettazione dell’implementazione

Valido anche per

- Lista ToDo

- Calendario Task selezionato

Home page Login form Sviluppatore page Sviluppatore page Elenco progetti Inserisci file form Inserisci file

Sviluppatore Naviga() Naviga()

inserisci login e password Submit() Verifica input()

Build

<<link elenco progetti>> Naviga()

seleziona un Task dalla lista Naviga()

informazioni sul Task selezionato

Inserisci file Naviga()

Compila form file Submit() Verifica input()

Upload()

Naviga()

informazioni sul Task selezionato

Figura 4.6: Vista logica (digramma di sequenza) – Sviluppatore – Inserimento file su task

Valido anche per

- Lista ToDo

- Calendario Task selezionato

Home page Login form Sviluppatore page Sviluppatore page Elenco progetti Inserisci commento form Inserisci commento

Sviluppatore Naviga() Naviga()

inserisci login e password Submit() Verifica input()

Build

<<link elenco progetti>> Naviga()

seleziona un Task dalla lista Naviga()

informazioni sul Task selezionato

Inserisci commento Naviga()

Compila form commenti Submit() Verifica input()

Salva()

Naviga()

informazioni sul Task selezionato

Figura 4.7: Vista logica (digramma di sequenza) – Sviluppatore – Inserimento commento su task

121 Progettazione dell’implementazione

4.3 Amministratore

Nei sottocapitoli che seguono vengono presentati i diagramma della vista logica e dei

componenti che raffigura le classi stereotipate che caratterizzano tutte le funzionalità messe a

disposizione dell’amministratore. Per rendere più leggibili i diagrammi, si è scelto di

suddividerli nella varie funzionalità, così come si è già fatto nel capitolo precedente nello

studio della UX. Anche in questo caso verranno raffigurati i componenti che si utilizzeranno

nell’implementazione.

4.3.1 Autenticazione

Iniziamo con la presentazione del diagramma della vista logica e dei componenti, che

raffigura le classi stereotipate che caratterizzano l’autenticazione. Questo diagramma è stato

fatto per evitare future. (vedi figura 4.8)

Login form Amministratore page

Home page -login <<submit>>

-password +Verifica input()

+Login() +Submit() <<build>> main.php

Amministratore page

Home page.html Menu' principale Pagina attiva

Menu' selezione

+Lista ToDo() In questa screen

+Contatti() compartement

+Calendario() +Progetti()

+logout() verranno

+Domini() visualizzate tutte

+Utenti() le voci dei due

+Fatture() menu’

+Prodotti()

+Usergroup()

+Files()

+Visualizza ore()

main_menu.php main_select_menu.php

Figura 4.8: Vista logica e dei componenti - Autenticazione

122 Progettazione dell’implementazione

Il diagramma di sequenza seguente che raffigura la vista logica dell’operazione di

autenticazione serve a raffigurare le semplici interazioni con il sistema da parte dell’utente,

che si deve preoccupare solo di inserire login e password corretti nella classe stereotipata

login form. Home page Login form Amministratore page Amministratore page

Amministratore

Naviga() Naviga()

inserisci login e password Submit() Verifica input()

Build

Figura 4.9: Vista logica (digramma di sequenza) – Amministratore – Autenticazione

123