Progettazione di applicazioni
Web
prof. V. De Antonellis
Dipartimento di Elettronica per l’Automazione
Università di Brescia
[email protected]
www.ing.unibs.it/~deantone/
Prog. applicazioni Web
-1-
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, 1999.
http://info.med.yale.edu/caim/manual
"Information architecture for the World Wide Web"
L. Rosenfeld and P. Morville, O'Really, 1998.
Prog. applicazioni Web
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
-3-
I. Definizione del sito e pianificazione
Definizione degli obiettivi
Definizione di massima delle informazioni e
delle funzionalità
Sviluppo interno o esterno?
Prog. applicazioni Web
-4-
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
-5-
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
-6-
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
-7-
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
-8-
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
-9-
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
- 10 -
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
- 11 -
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
- 12 -
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
- 13 -
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
- 14 -
Valutazione
Focus group (http://www.useit.com/papers/focusgroups.html):
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
- 15 -
Test di usabilità
"Discount Usability Engineering"
(http://www.useit.com/papers/guerrilla_hci.html)
Scenari (prototipi semplificati)
"Simplified thinking": osservare l'utente mentre lavora,
facendogli descrivere le operazioni e le impressioni
(senza videoregistrare)
Card sorting
Prog. applicazioni Web
- 16 -
Processo di sviluppo: Visione d’insieme
Business Requirements
REQUIREMENTS SPECIFICATION
DATA DESIGN
HYPERTEXT DESIGN
ARCHITECTURE DESIGN
TESTING & EVALUATION
IMPLEMENTATION
MAINTAINANCE & EVOLUTION
Prog. applicazioni Web
- 17 -
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
- 18 -
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
- 19 -
Analisi dei Requisiti
Revisione e formalizzazione dei requisiti
raccolti e produzione di un insieme di
specifiche semi-formali
Prog. applicazioni Web
- 20 -
Specifica dei Gruppi
Descrizione dei gruppi
Group name:
Gerarchia
dei gruppi
l
Mar-Com Manager
Description:
marketing and communication personnel inserting,
modifying, and deleting news.
Profile data:
First name, last name, email, office address.
Acer-Euro User
Super-group:
Sub-groups:
Internal Registered User
External Non-Registered User
Relevant use
cases:
Administrator
Product Manager Mar-Com Manager
Objects - read
mode:
Objects - content
mgmt 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".
Product and Product News.
Product News.
Prog. applicazioni Web
- 21 -
Specifica di Use Case
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)
1.
Diagramma di Use case per l’utente Mar-Com Manager
Add a news
item
Add a news
category
Login
Modify a news
item
Modify a news
category
Remove a
news item
Remove a
news category
Mar-Com Manager
Prog. applicazioni Web
- 22 -
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
None
Highlighted news
Prog. applicazioni Web
- 23 -
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
- 24 -
Site View
News Content Management
Description
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.
User
Groups
Mar-Com Manager
Use Cases
“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”.
Site View Map
Area Name
Area Description
Objects
News Content In the default page, the user accesses the list of NewsCategory
Management
countries for which he is content manager and NewsItem
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”,
Prog. applicazioni Web
- 25 “Edit a news item”, “Remove a news item”.
Priority
High
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
- 26 -
Stile grafico – esempi
Griglia di Pagina:
Prog. applicazioni Web
- 27 -
Stile grafico – esempi
Content positioning:
Posizionamento
dei Contenuti
Prog. applicazioni Web
- 28 -
Stile grafico – esempi
Proprietà di grafica:
Prog. applicazioni Web
- 29 -