Università degli Studi di Milano BicoccaDipartimento di Informatica, Sistemistica e Comunicazione

Laboratorio di Internet /Laboratorio di progettazione (mod.1)

Anno Accademico 2009-2010

LEZIONE 4:

FASE 1: SPECIFICA DEI REQUISITI (Parte II)

Roberto Polillo

CHE COSA FAREMO OGGI

3 4 5 6 7Web

designVisual design

Sviluppo Redazionedei contenuti

Pubblicazione

1Definizionedei requisiti

Documento dei requisiti

Prototipo di navigazione

Prototipo funzionale

Prototipo editoriale

Sistema on line

Prototipo di comunicazione

2Avviamentodel progetto

Piano di qualità

Gestione del sito

ContenutoIl contenuto informativo è corretto, e adeguato

agli scopi del sito?

ComunicazioneIl sito raggiunge i suoi

obiettivi di comunicazione?

AccessibilitàIl sito è di facile

accesso per tutti?

FunzionalitàLe funzioni del sito sono

adeguate e corrette?

GestioneL’operatività del sito

è ben gestita ?

ArchitetturaLa struttura e la navigazione

del sito sono adeguate?

UsabilitàIl sito è facile

da usare?

Il modello di qualità

INDICE DEL DOCUMENTOOrigine e scopo del documentoParte prima: GeneralitàParte seconda: Requisiti

Indice del documento dei requisiti

1. Requisiti di architettura

2. Requisiti di comunicazione

3. Requisiti funzionali

4. Requisiti di contenuto

5. Requisiti di gestione

6. Requisiti di accessibilità

7. Requisiti di usabilità

TEMPLATE: Requisiti di archiettura

Architettura informativaRiportare la scaletta logica dei contenuti del sito, corredata dei commenti necessari. Definire i termini utilizzati ove necessario, o riferirsi a un glossario riportato in appendice.

 

SCALETTA LOGICA DEI CONTENUTI

• Indica la organizzazione logica dei contenuti informativi

• Serve a comunicare al Web designer in quali categorie vogliamo che i contenuti informativi siano classificati e quali sono i nomi (labelling) che vogliamo vengano usati per queste categorie

• Ha, per un sito Web, la stessa funzione dell’indice di un libro, ma non descrive ancora la struttura del sito in pagine

Scaletta logica dei contenuti: Esempio

Esempio

Usare l’outliner di Word

In Office 2007:

Visualizza - struttura

HomeChi siamo

Il DISCoIl personaleLe attività del DISCo

L’offerta didatticaCorsi di laurea di primo livelloCorsi di laurea di secondo livelloMaster universitari Dottorato di ricerca

La ricercaLa ricerca al DISCo

I laboratori di ricercaI progetti di ricercaIl Dottorato di ricerca

Studenti interniAvvisiGuida dello studenteCorsi di Studio

Corso di laurea di primo livello in InformaticaRegolamenti e procedureImmatricolazioni e iscrizioniPiani di studioVincoli per l’accesso al II annoRegolamento degli stage e della prova finale Orario delle lezioni

Primo semestreSecondo semestre

Programmi e siti web dei corsiEsami (link al Sifa)StageCalendario prossime sessioni di laurea

Corso di laurea specialistica in Informatica<come sopra>Modulo per domanda di tesi specialistica

Corso di laurea specialistica in Teoria e Tecnologia della Comunicazione

<come sopra>  Laboratori didattici

<il sito del laboratorio compare in altra finestra>Orario di ricevimento docentiServizi agli studentiLingue e ECDLDiversamente abiliStudenti stranieri/foreign studentsStudiare all’estero

 Docenti e personale

Regolamenti e modulisticaDocumentazione

Delibere del Consiglio di DipartimentoDelibere del Consiglio di Coordinamento Didattico

Aggiornamento pagine Studenti esterni

OrientamentoIscrizioni e immatricolazioniMaster

ProfessionistiEventiLaboratori e competenzeProgetti e partnersMaster

AziendeStage e collaborazioniI nostri laureatiLaboratori e competenzeProgetti e partnersMaster

Esempio

TEMPLATE: Requisiti di archiettura

Architettura informativaRiportare la scaletta logica dei contenuti del sito, corredata dei commenti necessari. Definire i termini utilizzati ove necessario, o riferirsi a un glossario riportato in appendice.

 Navigazione

Specificare i requisiti della struttura di navigazione e gli eventuali ausilii richiesti alla navigazione. Se necessario indicare alcuni siti a cui ispirarsi come esempi, o riportare una gabbia schematica della home page. Indicare se nella home page dovranno essere inserite delle scorciatoie per raggiungere altre parti del sito

STRUTTURA DI NAVIGAZIONE

Bisogna dare le linee guida per progettarla, NON progettarla fin d’ora !

Esempio

logo payoff data

barra di navigazione globale

menu servizi standard

area login area per

richiesta preventivo

noleggio

offertespeciali

banner?

Esempio

Il sito dovrà prevedere una struttura di navigazione globale, accessibile da ogni pagina, dalla quale siano sempre raggiungibili le pagine di primo livello corrispondenti alle diverse sezioni del sito, e una navigazione locale, che permetta la navigazione all’interno di ogni singola sezione. Navigazione globale e navigazione locale dovranno sempre essere nella stessa posizione in tutte le pagine, e ciascun link non dovrà mai modificare la sua posizione durante la navigazione. La navigazione globale dovrà preferibilmente essere disposta orizzontalmente, e la navigazione locale dovrà essere disposta verticalmente, oppure anch’essa orizzontalmente, sotto quella globale.

I nomi dei link non dovranno mai contenere abbreviazioni.

INDICE DEL DOCUMENTOOrigine e scopo del documentoParte prima: GeneralitàParte seconda: Requisiti

Indice del documento dei requisiti

1. Requisiti di architettura

2. Requisiti di comunicazione

3. Requisiti funzionali

4. Requisiti di contenuto

5. Requisiti di gestione

6. Requisiti di accessibilità

7. Requisiti di usabilità

Requisiti di comunicazione

Il template richiede tre capitoli:• Identità di marca, tono e stile della • Grafica e multimedialità• Lingua e localizzazione

Identità di marca, tono e stile della comunicazione

Specificare i requisiti relativi al tono e alla strategia generale della comunicazione e alla identità di marca (marchi, slogan, tratti distintivi della marca, ecc.).

Specificare in particolare i requisiti di comunicazione della home page, eventualmente allegando bozze esemplificative o citando siti a cui ispirarsi.

Specificare lo stile comunicativo da utilizzarsi nella redazione dei contenuti.

Nel vostro caso:Raccogliete loghi, carta intestata, brochure, poster, ecc.Chiedete se usano slogan 

Identità di marca: ESEMPIO

Identità di marca della CocaCola?

Marchi e slogan: ESEMPI

 Grafica e multimedialità

Specificare i requisiti relativi alla impostazione grafica del sito (eventuali standard aziendali, stile, formati video, layout fisso o liquido, requisiti di accessibilità). Specificare eventuali requisiti relativi alla multimedialità.

Nel vostro caso, questi aspetti sono in gran parte definiti dai temi del CMS.La cosa più importante è farsi un’idea dell’impostazione grafica della home page, e delle immagini da utilizzareEconomizzare le spazio!

 Lingua e localizzazione

Specificare se il sito sarà solo in lingua italiana, o se parti del sito saranno tradotte in altre lingue. Se sì, specificare quali lingue e quali parti, motivando queste scelte.

INDICE DEL DOCUMENTOOrigine e scopo del documentoParte prima: GeneralitàParte seconda: Requisiti

Indice del documento dei requisiti

1. Requisiti di architettura

2. Requisiti di comunicazione

3. Requisiti funzionali

4. Requisiti di contenuto

5. Requisiti di gestione

6. Requisiti di accessibilità

7. Requisiti di usabilità

TEMPLATE: Requisiti funzionali

Il template prevede tre capitoli:

Funzionalità

Base di dati

Sicurezza e privacy

Funzionalità

Inserire il diagramma e la descrizione dei casi d’uso, utilizzando la notazione (UML) descritta in appendice.  Quindi descrivere a parole ogni singolo caso d’uso, specificandone i passi dello scenario principali e degli scenari alternativi

Funzionalità: Casi d’uso

Un caso d’uso definisce un insieme d’interazioni finalizzate a uno scopo, fra uno o più attori e il sito.Ha un nome e una descrizione

Esempi:

         Ricerca prodotto         Ordina prodotto         Visualizza dati utente         Inserisci prodotto• Modifica prodotto

Diagrammi dei casi d’uso

Ricerca prodotto

Ordina prodotto

Visualizza dati utente

Inserisci prodotto

Modifica prodotto

Sistema bancario

Utente

Gestore del negozio

<sistema>

Acquista prodottoScenario principale:1. Il cliente naviga nel catalogo e seleziona gli articoli da acquistare2. Il cliente si avvia alla cassa (check out)3. Il cliente fornisce le informazioni relative alla spedizione (indirizzo; scelta fra consegna in giornata o

entro 3 giorni)4. Il sistema presenta un prospetto con il conto totale, comprese le spese di spedizione5. Il cliente riempie un modulo con le informazioni sulla carta di credito6. Il sistema autorizza l’acquisto7. Il sistema conferma immediatamente la vendita8. Il sistema invia al cliente una email di conferma.Scenari alternativi: 3a. Il cliente è abituale:

1. Il sistema visualizza le preferenze memorizzate riguardanti le spedizioni, il pagamento e la fattura 2. Il cliente può accettera il default o ridefinire le preferenze, in questo caso ritorna al passo 6 dello scenario principale

6°. Il sistema non autorizza l’acquisto con carta di credito:1. Il cliente può inserire nuovamente le informazioni e riprovare oppure annullare l’acquisto

Descrizione di un caso d’uso: esempio

Nel nostro caso:

Non sviluppiamo software, ma usiamo funzioni già fornite dal CMS, o funzioni realizzate da applicazioni o widget che “montiamo” sulle nostre pagine.

Come fare?

Tipicamente, tre categorie di utenti:• Amministratore del sito: fa tutto il CMS

• Redattore: fa tutto il CMS

• Utente: descriviamo i casi d’uso “a grandi linee” – dicendo quale componente realizza le funzioni necessarie

Casi d’uso per l’utente finale - esempio

Registrazione al sito

Login

Donazione on-line

Sottoscrizione al bollettino

Utilizzo del social network

….

(specificando il componente che lo realizza)

Base di dati

Inserire il modello concettuale dei dati, in forma abbozzata, utilizzando un diagramma E-R (o, se si preferisce, un diagramma delle classi UML, utilizzando la notazione introdotta in appendice)

Specificare se la base di dati esiste già, o se deve essere realizzata ex novo

Basi di dati

• Dovete abbozzare lo schema concettuale della base di dati

• Usate una notazione a vostra scelta per rappresentare i diagrammi entità-relazioni

Esempio:

AFFERENZA

DIREZIONE

DIPARTIMENTO

SEDE

COMPOSIZIONE

IMPIEGATO

PROGETTO

PARTECIPAZIONE

Indirizzo

(0,1)

(0,1)

(0,N)

(1,N)

(1,N)

(1,N)

(1,1)

(1,1)

(1,N)

(0,1)

Stipendio

Cognome

Codice

Età

Nome

Budget

Data consegna

Data inizio

Data afferenza

Telefono

Nome

Città Numero civico

Via

CAP

prezzoUnitario

Ordine

indirizzoDiConsegnaspeseDiSpedizioneimportoTotale

Cliente

datiAnagrafici

Articolo

CatalogoClienteRegistrato

useridpassword

CartaDiCredito

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

0..

1..1..1..1

Effettua Riguarda

Utilizza

FaParteDi

Esempio:

(Notazione che usa i diagrammi delle classi UML)

Sicurezza e privacy Specificare i requisiti di sicurezza e privacy (es. protezione da

accessi non autorizzati, protezione della base dati, recupero codici di accesso smarriti, …)

Specificare come verranno trattati i dati personali.

(Sicurezza e privacy saranno gestiti dal CMS, mediante il settaggio di opportuni parametri, qui si devono solo specificare I requisiti)

INDICE DEL DOCUMENTOOrigine e scopo del documentoParte prima: GeneralitàParte seconda: Requisiti

Indice del documento dei requisiti

1. Requisiti di architettura

2. Requisiti di comunicazione

3. Requisiti funzionali

4. Requisiti di contenuto

5. Requisiti di gestione

6. Requisiti di accessibilità

7. Requisiti di usabilità

TEMPLATE: Requisiti di contenuto

Facendo riferimento alla scaletta logica dei contenuti del sito già definita, descrivere i requisiti relativi ai contenuti informativi di ciascuna componente logica:

- quali informazioni dovrà contenere - come dovranno essere espresse- dove potranno essere reperite

Esempio

Nel vostro caso…

• Il contenuto è ciò che fa la differenza per questi siti…• Far capire agli utenti (potenziali donatori/volontari/…) che

cosa fa l’associazione, mostrando i risultati (immagini, video, documenti,…)

• Mostrare “la faccia” delle persone dell’associazione• Creare INTERESSE, FIDUCIA, SIMPATIA• E’ bene che una persona del gruppo di dedichi fin da

subito alla raccolta dei contenuti

INDICE DEL DOCUMENTOOrigine e scopo del documentoParte prima: GeneralitàParte seconda: Requisiti

Indice del documento dei requisiti

1. Requisiti di architettura

2. Requisiti di comunicazione

3. Requisiti funzionali

4. Requisiti di contenuto

5. Requisiti di gestione

6. Requisiti di accessibilità

7. Requisiti di usabilità

TEMPLATE: Requisiti di gestione

Infrastruttura sistemistica del sitoSpecificare l’infrastruttura hw, sw e di rete che ospiterà il sito in esercizio -> sarà tipicamente un servizio in rete

Gestione dei sistemiSpecificare come e da chi verrà gestita la infrastruttura tecnologica del sito; come e da chi verrà fornita l’assistenza tecnica; disponibilità e qualità del servizio; monitoraggio degli accessi -> normalmente non sarà necessario

 Gestione del sitoSpecificare chi avrà la responsabilità del sito e dei suoi contenuti in esercizio (“webmaster”) e a chi riporterà. -> nessuno?

Gestione dei contenutiSpecificare come verranno attribuite le responsabilità di redazione e di pubblicazione dei contenuti -> importante!

 Gestione degli utentiSpecificare come e da chi dovranno essere gestite le comunicazioni degli utenti del sito, se possibili -> importante!

Supporti didattici

- Tutto questo è descritto in dettaglio nel capitolo 4 del libro sulla road-map

- Le notazioni per i casi d’uso e per lo schema concettuale della base dati sono descritte in appendice