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

Prog. applicazioni WebProg. applicazioni Web - - 11 - -

Progettazione di applicazioni Progettazione di applicazioni WebWeb

prof. V. De Antonellisprof. V. De Antonellis

Dipartimento di Elettronica per l’AutomazioneDipartimento di Elettronica per l’Automazione

Università di BresciaUniversità di Brescia

[email protected]@ing.unibs.it

www.ing.unibs.it/~deantone/www.ing.unibs.it/~deantone/

Prog. applicazioni WebProg. applicazioni Web

Sviluppo di siti: Sviluppo di siti: la guida di Yalela guida di Yale

"Web Style Guide: Basic Design Principles for Creating Web Sites""Web Style Guide: Basic Design Principles for Creating Web Sites"

P.J. Lynch and S. Horton, Yale University Press, 1999.P.J. Lynch and S. Horton, Yale University Press, 1999.http://info.med.yale.edu/caim/manualhttp://info.med.yale.edu/caim/manual

"Information architecture for the World Wide Web""Information architecture for the World Wide Web"

L. Rosenfeld and P. Morville, O'Really, 1998.L. Rosenfeld and P. Morville, O'Really, 1998.


Processo di sviluppoProcesso 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


I. I. Definizione del sito e pianificazioneDefinizione del sito e pianificazione

Definizione degli obiettivi

Definizione di massima delle informazioni e delle funzionalità

Sviluppo interno o esterno?


Requisiti generaliRequisiti 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)?


Requisiti: tecnologieRequisiti: 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?


Requisiti: Web server supportRequisiti: 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?


Requisiti: BudgetingRequisiti: 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)


II. "Information architecture"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!


Progettazione della Information Progettazione della Information ArchitectureArchitecture

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


III. Progettazione del sitoIII. 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


IV. Costruzione del sitoIV. 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,..


V. Promozione del sitoV. 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, …


VI. Monitoraggio, valutazione, VI. Monitoraggio, valutazione, manutenzionemanutenzione

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


ValutazioneValutazione

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


Test di usabilità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


Processo di sviluppo: Processo di sviluppo: Visione d’insiemeVisione d’insieme

Business Requirements

HYPERTEXT DESIGN

DATA DESIGN

ARCHITECTURE DESIGN

REQUIREMENTS SPECIFICATION

IMPLEMENTATIONTESTING & EVALUATION

MAINTAINANCE & EVOLUTION


Specifica dei RequisitiSpecifica 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


Raccolta dei requisitiRaccolta 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à


Analisi dei RequisitiAnalisi dei Requisiti

Revisione e formalizzazione dei requisiti raccolti e produzione di un insieme di specifiche semi-formali


Specifica dei GruppiSpecifica dei Gruppi

l

Gerarchia Gerarchia dei gruppidei gruppi

Acer-Euro User

External Non-Registered UserInternal Registered User

Product ManagerAdministrator Mar-Com Manager

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, email, office address.Profile data:

marketing and communication personnel inserting, modifying, and deleting news.

Description:

Mar-Com ManagerGroup name:

Descrizione dei gruppiDescrizione dei gruppi


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 CaseSpecifica di Use Case

1. Diagramma di Use case per l’utente Mar-Com Manager

Mar-Com Manager

Add a newscategory

LoginAdd a newsitem

Modify a newsitem

Remove anews item

Remove anews category

Modify a newscategory


Dizionario dei datiDizionario dei dati

Elenco degli oggetti informativi principali, individuati durante la raccolta dei requisiti dei datiPer 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


Specifica delle Site view (mappa del sito)Specifica delle Site view (mappa del sito)

IN: gruppi di utenti, use case, dizionario dei datiOUT: lista delle site view necessarie, specificate tramite:

NomeDescrizioneGruppi di utenti a cui sono rivolteUse case coinvoltiMappa della site view: una tabella che illustri le aree che compongono la site view. Ogni area è specificata per mezzo di :

NomeDescrizioneOggetti con accesso in lettura/ScritturaLivello di priorità


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


Linee guida per lo stile graficoLinee guida per lo stile grafico

Regole di presentazione delle pagine:Formato della griglia: righe e colonnePosizionamento del contenuto: banners, logo, menuProprietà di grafica: caratteri, colori, bordi e marginiRegole specifiche per dispositivi e browser


Stile grafico – esempiStile grafico – esempi

Griglia di Pagina:



Content positioning:Posizionamento dei Contenuti



Proprietà di grafica:

Documents

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