Prog. applicazioni Web- 1 - Progettazione di applicazioni Web prof. V. De Antonellis Dipartimento di Elettronica per l’Automazione Università di Brescia

Prog. applicazioni Web Sviluppo di siti: la guida di Yale "Web Style Guide: Basic Design Principles for Creating Web Sites" P.J. Lynch and S. Horton, Yale University Press, "Information architecture for the World Wide Web" L. Rosenfeld and P. Morville, O'Really, 1998.

Prog. applicazioni Web- 3 - Processo di sviluppo Una possibile articolazione I.Definizione requisiti del sito e pianificazione II."Information architecture" III.Progettazione del sito IV.Costruzione del sito V.Promozione del sito VI.Monitoraggio, valutazione, manutenzione

Prog. applicazioni Web- 4 - I. Definizione del sito e pianificazione Definizione degli obiettivi Definizione di massima delle informazioni e delle funzionalità Sviluppo interno o esterno?

Prog. applicazioni Web- 5 - Requisiti generali Quali sono gli obiettivi del sito? Chi sono gli utenti cui il sito si rivolge e che cosa si aspettano? Il team di produzione è fatto di interni e/o di esterni? Chi sarà responsabile del processo? Chi sono gli "esperti del contenuto"? Chi terrà i rapporti con i fornitori esterni? Chi sarà il "Web master" (responsabile del sito)?

Prog. applicazioni Web- 6 - Requisiti: tecnologie Quali browser e sistemi operativi debbono essere supportati? Quale accesso hanno a disposizione gli utenti? Internet, Intranet…, Estensioni e plug-in? Javascript, Applet, Style sheets, … Come potranno gli utenti contattare i gestori del sito? posta elettronica, gruppi di discussione, questionari È necessario l'accesso a basi di dati? con autenticazione degli utenti con ricerche sofisticate? Serve un supporto Audio/video?

Prog. applicazioni Web- 7 - Requisiti: Web server support Gestione interna o esterna? gestione di nomi di dominio? spazio su disco? capacità di supportare il traffico? disponibilità e gestione delle statistiche? motore di ricerca adeguato? supporto per logica applicativa (CGI, middleware, accesso a basi di dati)? capacità di gestire interazione con basi di dati interne?

Prog. applicazioni Web- 8 - Requisiti: Budgeting Costi di personale interno Hardware e software per personale interno Formazione del personale interno Costi per l'outsourcing dello sviluppo: progettazione e sviluppo del sito consulenza tecnica sviluppo di applicazioni promozione del sito Costi di gestione: Webmaster/Editor supporto tecnico manutenzione delle applicazioni aggiornamento del contenuto (Redazione)

Prog. applicazioni Web- 9 - II. "Information architecture" Definizione del "contenuto" del sito e della sua organizzazione Premessa: chi è l'information architect? Può avere formazione di base di vario tipo: grafica scienze archivistiche e bibliotecarie giornalismo usabilità marketing informatica Dovrebbe avere competenze integrate e multidisciplinari!

Prog. applicazioni Web Progettazione della Information Architecture Brainstorming Esplorazione delle metafore: organizzativa (es.: una concessionaria: vendita auto nuove, vendita usato, officina, amministrazione, …) funzionale (es.: una biblioteca: esplorazione del catalogo, ricerca in un indice, richiesta di info al personale) visuale (es.: un elenco di indirizzi e numeri telefonici mostrato con icone) Costruzione/descrizione di scenari d'uso Definizione di un primo raffinamento dell'architettura Prototipi di pagina (per simulare il contenuto) Bozze di grafica (per discussione su architettura, grafica e realizzazione) Prototipi

Prog. applicazioni Web III. Progettazione del sito Definizione completa con dettagli necessari per la costruzione (struttura, contenuto, presentazione) Prodotti (secondo Lynch e Horton): Testi editati e verificati Grafica specifica di tutte le pagine (templates, headers and footers, logos, buttons) Struttura delle pagine Progetto di interfaccia Illustrazioni e fotografie Progetto di client scripts Progetto di database e programmi Progetto struttura di navigazione e ricerca

Prog. applicazioni Web IV. Costruzione del sito Prodotti (secondo Lynch e Horton) HTML delle pagine Struttura dei link di navigazione Base di dati e tutti i programmi Grafici, immagini e fotografie Verifica dei contenuti Testing di programmi e basi di dati Testing delle procedure di supporto Archivi di tutti i componenti, HTML, programmi,..

Prog. applicazioni Web V. Promozione del sito In molti contesti la promozione (marketing) è vitale, per permettere al sito di raggiungere i suoi obiettivi Le modalità della promozione dipendono dal tipo di sito: un sito rivolto ad una comunità locale e uno specializzato ma di interesse internazionale richiedono strategie diverse La reperibilità attraverso motori di ricerca è importante (e può essere perseguita in vari modi), ma non è l'unica strada La URL va pubblicizzata: carta intestata, biglietti da visita, materiale promozionale, citazione nella pubblicità, nei cataloghi, nelle fatture e negli ordini, …

Prog. applicazioni Web VI. Monitoraggio, valutazione, manutenzione Il Web (e il suo uso) sono molto dinamici Si può (e deve) tenere traccia dell'uso di un sito attraverso i log: contare gli utenti (diversi) pagine più (o meno) usate tipo e versione di browser uso della grafica e dei menu Manutenzione contenuto (proprio e altrui, ad es. link esterni): "schema" e "istanze" struttura grafica

Prog. applicazioni Web Valutazione Focus group ( gruppo (5-10 persone) per la valutazione di specifici aspetti di un sito; un moderatore gestisce la discussione, con argomenti "preparati" ma dando spazio ai partecipanti sono una buona fonte di idee ma raramente strumento di valutazione affidabile Test di usabilità... Commenti e suggerimenti dagli utenti (anche con moduli da riempire, ma senza esagerare) "Site review and design committee" da riunire periodicamente

Prog. applicazioni Web Test di usabilità "Discount Usability Engineering" ( Scenari (prototipi semplificati) "Simplified thinking": osservare l'utente mentre lavora, facendogli descrivere le operazioni e le impressioni (senza videoregistrare) Card sorting

Prog. applicazioni Web Processo di sviluppo: Visione d’insieme

Prog. applicazioni Web Specifica dei Requisiti IN: requisiti di business OUT: specifiche semi-formali, con un buon livello di precisione, ma facili da comprendere anche dal cliente Due sotto-attività principali: 1. Raccolta dei requisiti 2. Analisi dei requisiti

Prog. applicazioni Web Raccolta dei requisiti Attività poco strutturata, mirata a collezionare le seguenti informazioni: Utenti e gruppi di utenti Requisiti funzionali Requisiti sui dati Requisiti di personalizzazione Requisiti sui dispositivi Requisiti non funzionali: usabilità, prestazioni, disponibilità, scalabilità, sicurezza, manutenibilità

Prog. applicazioni Web Analisi dei Requisiti Revisione e formalizzazione dei requisiti raccolti e produzione di un insieme di specifiche semi-formali

Prog. applicazioni Web Specifica dei Gruppi l Gerarchia dei gruppi Product News.Objects - content mgmt mode: Product and Product News.Objects - read mode: “Login”, “Add a news item”, “Modify a news item”, “Delete a news item”, “Add a news category”, “Modify a news category”, “Delete a news category”, "Modify profile data". Relevant use cases: Sub-groups: Super-group: First name, last name, , office address.Profile data: marketing and communication personnel inserting, modifying, and deleting news. Description: Mar-Com ManagerGroup name: Descrizione dei gruppi

Prog. applicazioni Web Use case: descrizione formale di un’unità di interazione con l’applicazione da parte di utenti che appartengono ad un certo gruppo (tramite tabelle o diagrammi UML) Specifica di Use Case 1.Diagramma di Use case per l’utente Mar-Com Manager

Prog. applicazioni Web Dizionario dei dati Elenco degli oggetti informativi principali, individuati durante la raccolta dei requisiti dei dati Per ogni elemento nel dizionario è possibile specificare: Nome Sinonimi Descrizione Istanze di esempio Proprietà Relazioni Componenti Super-concetti Sotto-concetti NewsItem Piece of news A corporate or product piece of news TravelMate 610 launched, 20th June 01 Title, Body, Image, Date, … NewsToProduct None Highlighted news

Prog. applicazioni Web Specifica delle Site view (mappa del sito) IN: gruppi di utenti, use case, dizionario dei dati OUT: lista delle site view necessarie, specificate tramite: Nome Descrizione Gruppi di utenti a cui sono rivolte Use case coinvolti Mappa della site view: una tabella che illustri le aree che compongono la site view. Ogni area è specificata per mezzo di : Nome Descrizione Oggetti con accesso in lettura/Scrittura Livello di priorità

Prog. applicazioni Web HighNewsCategory NewsItem In the default page, the user accesses the list of countries for which he is content manager and selects a country to administer. In the News Category page, the user accesses the list of news categories for the selected country. Here, the user can perform content management functions over news categories, according to the use cases “Add a news category”, “Edit a news category”, “Remove a news category”. Otherwise, he can select one category, and access the list of the available news items in the selected category. In the News page, the user can perform content management functions over a selected news item according to the use cases “Add a news item”, “Edit a news item”, “Remove a news item”. News Content Management PriorityObjectsArea DescriptionArea Name Site View Map “Login”, “Add a news category”, “Edit a news category”, “Remove a news category”, “Add a news item”, “Edit a news item”, “Remove a news item”. Use Cases Mar-Com ManagerUser Groups Includes the pages through which the Mar-Com Manager will access content management functions, for inserting or updating content about news categories and news items. Description News Content ManagementSite View

Prog. applicazioni Web Linee guida per lo stile grafico Regole di presentazione delle pagine: Formato della griglia: righe e colonne Posizionamento del contenuto: banners, logo, menu Proprietà di grafica: caratteri, colori, bordi e margini Regole specifiche per dispositivi e browser

Prog. applicazioni Web Stile grafico – esempi Griglia di Pagina:

Prog. applicazioni Web Stile grafico – esempi Content positioning:Posizionamento dei Contenuti

Prog. applicazioni Web Stile grafico – esempi Proprietà di grafica: