Il documento fornisce linee guida per la fase di specifica dei requisiti nel contesto del web design, suddiviso in vari capitoli riguardanti architettura, comunicazione, funzionalità, contenuti e gestione. Vengono esplorati vari aspetti come la struttura di navigazione, l'accessibilità, la sicurezza e le modalità di gestione dei contenuti informativi. Un'attenzione particolare è rivolta a identificare le relazioni tra gli utenti e le funzionalità del sito, insieme a esempi pratici e modelli da seguire.

1. Università degli Studi di Milano Bicocca Dipartimento 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

2. CHE COSA FAREMO OGGI 3 4 5 6 7 Web design Visual design Sviluppo Redazione dei contenuti Pubblicazione 1 Definizione dei requisiti Documento dei requisiti Prototipo di navigazione Prototipo funzionale Prototipo editoriale Sistema on line Prototipo di comunicazione 2 Avviamento del progetto Piano di qualità Gestione del sito

3. Comunicazione Il sito raggiunge i suoi obiettivi di comunicazione? Accessibilità Il sito è di facile accesso per tutti? Funzionalità Le funzioni del sito sono adeguate e corrette? Gestione L’operatività del sito è ben gestita ? Il modello di qualità Contenuto Il contenuto informativo è corretto, e adeguato agli scopi del sito? Architettura La struttura e la navigazione del sito sono adeguate? Usabilità Il sito è facile da usare?

4. INDICE DEL DOCUMENTO Origine e scopo del documento Parte prima: Generalità Parte seconda: Requisiti Requisiti di architettura Requisiti di comunicazione Requisiti funzionali Requisiti di contenuto Requisiti di gestione Requisiti di accessibilità Requisiti di usabilità Indice del documento dei requisiti

5. TEMPLATE: Requisiti di archiettura Architettura informativa Riportare 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.

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

7. Scaletta logica dei contenuti: Esempio

8. Esempio Usare l’outliner di Word In Office 2007: Visualizza - struttura

9. Esempio Home Chi siamo Il DISCo Il personale Le attività del DISCo L’offerta didattica Corsi di laurea di primo livello Corsi di laurea di secondo livello Master universitari Dottorato di ricerca La ricerca La ricerca al DISCo I laboratori di ricerca I progetti di ricerca Il Dottorato di ricerca Studenti interni Avvisi Guida dello studente Corsi di Studio Corso di laurea di primo livello in Informatica Regolamenti e procedure Immatricolazioni e iscrizioni Piani di studio Vincoli per l’accesso al II anno Regolamento degli stage e della prova finale Orario delle lezioni Primo semestre Secondo semestre Programmi e siti web dei corsi Esami (link al Sifa) Stage Calendario 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 docenti Servizi agli studenti Lingue e ECDL Diversamente abili Studenti stranieri/foreign students Studiare all’estero Docenti e personale Regolamenti e modulistica Documentazione Delibere del Consiglio di Dipartimento Delibere del Consiglio di Coordinamento Didattico Aggiornamento pagine Studenti esterni Orientamento Iscrizioni e immatricolazioni Master Professionisti Eventi Laboratori e competenze Progetti e partners Master Aziende Stage e collaborazioni I nostri laureati Laboratori e competenze Progetti e partners Master

10. TEMPLATE: Requisiti di archiettura Architettura informativa Riportare 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

11. STRUTTURA DI NAVIGAZIONE Bisogna dare le linee guida per progettarla, NON progettarla fin d’ora !

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

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

14. INDICE DEL DOCUMENTO Origine e scopo del documento Parte prima: Generalità Parte seconda: Requisiti Requisiti di architettura Requisiti di comunicazione Requisiti funzionali Requisiti di contenuto Requisiti di gestione Requisiti di accessibilità Requisiti di usabilità Indice del documento dei requisiti

15. Requisiti di comunicazione Il template richiede tre capitoli: Identità di marca, tono e stile della Grafica e multimedialità Lingua e localizzazione

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

17. Identità di marca: ESEMPIO Identità di marca della CocaCola?

18. Marchi e slogan: ESEMPI

19. 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 utilizzare Economizzare le spazio!

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

21. INDICE DEL DOCUMENTO Origine e scopo del documento Parte prima: Generalità Parte seconda: Requisiti Requisiti di architettura Requisiti di comunicazione Requisiti funzionali Requisiti di contenuto Requisiti di gestione Requisiti di accessibilità Requisiti di usabilità Indice del documento dei requisiti

22. TEMPLATE: Requisiti funzionali Il template prevede tre capitoli: Funzionalità Base di dati Sicurezza e privacy

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

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

25. Diagrammi dei casi d’uso Ricerca prodotto Ordina prodotto Visualizza dati utente Inserisci prodotto Modifica prodotto Sistema bancario Utente Gestore del negozio <sistema>

26. Acquista prodotto Scenario principale: Il cliente naviga nel catalogo e seleziona gli articoli da acquistare Il cliente si avvia alla cassa (check out) Il cliente fornisce le informazioni relative alla spedizione (indirizzo; scelta fra consegna in giornata o entro 3 giorni) Il sistema presenta un prospetto con il conto totale, comprese le spese di spedizione Il cliente riempie un modulo con le informazioni sulla carta di credito Il sistema autorizza l’acquisto Il sistema conferma immediatamente la vendita 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

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

28. 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)

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

30. Basi di dati Dovete abbozzare lo schema concettuale della base di dati Usate una notazione a vostra scelta per rappresentare i diagrammi entità-relazioni

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

32. Esempio: (Notazione che usa i diagrammi delle classi UML) prezzoUnitario Ordine indirizzoDiConsegna speseDiSpedizione importoTotale Cliente datiAnagrafici Articolo Catalogo ClienteRegistrato userid password CartaDiCredito 1..1 0..  0..  1 ..  0 ..  1 ..  1 ..  1..1 Effettua Riguarda Utilizza FaParteDi

33. 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)

34. INDICE DEL DOCUMENTO Origine e scopo del documento Parte prima: Generalità Parte seconda: Requisiti Requisiti di architettura Requisiti di comunicazione Requisiti funzionali Requisiti di contenuto Requisiti di gestione Requisiti di accessibilità Requisiti di usabilità Indice del documento dei requisiti

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

36. Esempio

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

39. INDICE DEL DOCUMENTO Origine e scopo del documento Parte prima: Generalità Parte seconda: Requisiti Requisiti di architettura Requisiti di comunicazione Requisiti funzionali Requisiti di contenuto Requisiti di gestione Requisiti di accessibilità Requisiti di usabilità Indice del documento dei requisiti

40. TEMPLATE: Requisiti di gestione Infrastruttura sistemistica del sito Specificare l’infrastruttura hw, sw e di rete che ospiterà il sito in esercizio -> sarà tipicamente un servizio in rete Gestione dei sistemi Specificare 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 sito Specificare chi avrà la responsabilità del sito e dei suoi contenuti in esercizio (“webmaster”) e a chi riporterà. -> nessuno? Gestione dei contenuti Specificare come verranno attribuite le responsabilità di redazione e di pubblicazione dei contenuti -> importante! Gestione degli utenti Specificare come e da chi dovranno essere gestite le comunicazioni degli utenti del sito, se possibili -> importante!

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