Corso di Laurea Cultura e Stilismo della Moda
Esperti di linguaggi multimediali e tendenze
moda
Progettazione Pagine Web
Introduzione al corso
Corso: Progettazione Pagine Web
Docente: Ing. Ivan Bruno
E-mail: [email protected]
Caratteristiche corso e info
z
z
z
z
z
CFU: 3
N° ore di lezione: 30 ore (18 ore frontali e 12
di laboratorio)
Pagina Web: http://www.dsi.unifi.it/~ivanb
Indirizzo e-mail: [email protected]
Telefono: 055 4796567 (Laboratorio di
Sistemi Distribuiti, c/o Facoltà di Ingegneria,
Via S. Marta 3 )
1
Orario e ricevimento
z
Giorni e orario di docenza e di ricevimento:
z
z
z
mercoledì 14.30-17.30
ricevimento il mercoledì dopo la lezione
Nota: Il ricevimento al di fuori dell’orario stabilito è
consentito solo per appuntamento presso il
Laboratorio di Sistemi Distribuiti del Dipartimento di
Sistemi ed Informatica della Facoltà di Ingegneria,
Via di S. Marta 3, Firenze.
Obiettivi del corso
z
Il corso ha lo scopo di far apprendere le
nozioni concettuali e i metodi generali per la
progettazione di siti web, per saper realizzare
lo studio di progettazione e le principali fasi di
implementazione di un Sito Web.
2
Programma
z
Introduzione al Web
z Richiami sulla architettura client-Server
z
Introdurre una metodologia di progettazione
z Le fasi della progettazione
z Criteri di sviluppo
z Un modello di qualità
z
Estendere il linguaggio HTML
z Forms
z Mappe
z Componenti multimediali
z
Parlare dei fogli di stile con l'obiettivo di:
z spiegare che cosa sono
z perché sono una buona idea
z perché oggi il W3C incoraggia il loro uso
Corso di Laurea Cultura e Stilismo della Moda
Esperti di linguaggi multimediali e tendenze
moda
Parte I – Le fasi della
Progettazione
Corso: Progettazione Pagine Web
Docente: Ing. Ivan Bruno
E-mail: [email protected]
3
La nascita del Web
z
z
z
z
z
1989: Tim Berners Lee inizia il suo progetto
WWW
1991: Gopher viene sviluppato presso
l’Università del Minnesota
1993: Marc Andreesen e Eric Brina
sviluppano il primo browser grafico: Mosaic
1994: Netscape rilascia la sua prima
versione del browser grafico
1995: Microsoft rilascia Explorer
Un’idea semplice
z
Basato su tre tecnologie
z
z
z
z
Un indirizzo uniforme (URL)
Un protocollo di trasmissione (HTTP)
Un linguaggio per codificare documenti (HTML)
Elementi vincenti
z
z
z
Semplicità: HTML è una forma molto semplificata
di SGML (con pochi tag)
Universalità: disponibile su tutti i computer
Compatibilità all’indietro
4
Struttura, non stile
z
z
z
Documenti annotati con tag di struttura, ai browser
la scelta su come visualizzarli.
Mancanza: regole di stile per consentire maggiore
controllo sulla formattazione
Netscape, sulla spinta del rapido successo, iniziò
ad espandere HTML con tag di stile:
z
z
z
z
<font>: tipo di carattere, dimensioni, colore del testo
<background>: per cambiare il colore dello sfondo
<blink>, <frame> … e altri tag non standard
Explorer fece lo stesso …
Il ruolo del consorzio W3C
z
z
z
Guida il processo di standardizzazione
Deve accettare le pratiche esistenti dei vari
produttori, mediando tra di essi
Il risultato (HTML 3.2 e poi HTML 4.0) non è
più solo un linguaggio di annotazione
strutturale
5
Tecnologia di base del Web
z
z
z
Architettura client-server del Web
URL e HTTP
Come funziona un Web server
Architettura client-server
Cliente 1
Risposta 1
Cliente 2
Richiesta 1
Server
Risposta 3
Richiesta 3
Cliente 3
6
Indirizzi Web (URL)
z
URL (Universal Resource Locator)
http://infouma.di.unipi.it/studenti/index.html
z
z
z
http : il protocollo di comunicazione per il Web (Hyper
Text Transfer Protocol)
infouma.di.unipi.it : l’indirizzo Internet della macchina
server che il DNS (Domain Name Server) traduce in
indirizzo IP oppure direttamente l’indirizzo IP
studenti/index.html : l’indirizzo della risorsa (tipicamente
un file HTML) relativo alla radice del Web server.
Come funziona il Web server
Browser 1
Web Server
Browser 2
http://infouma.di.unipi.it/studenti/index.html
Browser 3
7
Un modello concettuale per il Web
z
Nell’editoria tradizionale:
z
z
z
Testo (contenuti)
Immagini (presentazione visuale)
Il Web aggiunge il comportamento
z
z
z
z
z
Si seguono collegamenti ipertestuali
Si fanno ricerche
Si immettono informazioni
Si consultano cataloghi
SI effettuano pagamenti
Un modello concettuale per il Web
CODICE
Comportamento
TESTO
IMMAGINI
Struttura
Presentazione
8
Testo e struttura
z
Testo
z Il testo è universale (ASCII)
z Il testo è compatto
z Il testo è elaborabile
z
z
Può essere indicizzato, ricercato, trasformato …
Il testo annotato è più ricco
z I tag aggiungono struttura e significato
z Aumentano le potenzialità di elaborazione
La Microsoft è situata a Redmond e il suo presidente è Bill Gates.
La <company>Microsoft</company> è situata a <location>
Redmond</location> e il suo presidente è <person>Bill
Gates</person>
Stile e presentazione
z
z
z
L’arricchimento di HTML con annotazioni stilistiche
non è una buona idea
Lo stile dovrebbe essere specificato in modo
distinto dalla struttura
La risposta sono i CSS (Cascading Style Sheets)
z
z
z
Separano il contenuto dalle istruzioni per la presentazione
(per i browser)
Le istruzioni sono di validità globale per la pagina o per il
sito
Sono uno standard del W3C
9
Comportamento
z
z
Il Web è interattivo, le pagine hanno un comportamento
Sono vere applicazioni informatiche interattive
z
Usabilità: facilità con cui si svolge un certo compito
z
z
z
z
Comprare un libro in un sito di commercio elettronico
Consultare l’orario dei treni
Ecc.
Servono capacità di programmazione
z
z
z
z
Pagine interattive (che cambiano in reazione ad eventi)
Pagine dinamiche (generate al volo)
Basi di dati
Programmazione lato server (back-end)
Diversi tipi di siti
z
Esistono diversi tipi di siti Web:
z completamente liberi: in cui ogni pagina è diversa dalle altre
z con una struttura regolare nella presentazione delle
informazioni, in cui esistono cioè pagine con la stessa struttura
e quindi riconoscibili come una serie
z dove l'informazione è piuttosto statica
z dove l'informazione è altamente dinamica e quindi una
preoccupazione importante deve essere la frequenza di
aggiornamento e la manutenzione.
z
È importante capire di quale tipo di sito si tratta facendo
un'analisi prima di intraprendere il progetto.
z
Avere in mente l'obiettivo per cui il sito viene costruito, e le
caratteristiche del contenuto informativo può aiutare a capire le
caratteristiche che il sito stesso deve avere e fare le scelte
giuste nella fase di realizzazione.
10
Diversi tipi di siti
Siti a carattere educativo, didattici
z
incoraggiare l'esplorazione del sito secondo un filo logico piuttosto che
lasciare la più assoluta libertà nella navigazione.
La comprensione del materiale didattico può essere caratterizzata come la
costruzione di un modello mentale che ricostruisce gli oggetti e le relazioni
tra gli oggetti descritti nel testo. Un testo è tanto più fruibile quanto più
agevole è la creazione di questo modello mentale.
Secondo Thuring, Hannemann, Haake [CACM] i fattori principali che
agevolano o ostacolano questo processo sono due:
z
z
z
la coerenza, che dà un contributo positivo;
il sovraccarico cognitivo, che dà un contributo negativo.
z
z
La coerenza può essere locale (coerenza del discorso all'interno di un nodo)
oppure globale (intesa come coerenza tra i nodi).
La frammentazione del testo propria di un ipertesto può essere negativa se
non si offre per ogni nodo un contesto di interpretazione e strumenti per
riassumere e presentare l'organizzazione globale.
Il sovraccarico cognitivo di un ipertesto viene definito come "lo sforzo e la
concentrazione aggiuntivi necessari per la gestione di diversi percorsi
percorsi
di lettura allo stesso tempo"; nel caso dell'ipertesto questo sforzo
aggiuntivo riguarda l'orientamento nella navigazione, e quindi sono
particolarmente importanti tutti gli strumenti che possiamo fornire per
l'orientamento, e lo sforzo necessario per adattarsi ad interfacce utente di
volta in volta diverse.
z
z
z
Diversi tipi di siti
z
Siti a carattere informativo
z
z
z
z
È importante la natura delle informazioni che si vogliono fornire, se sono
relativamente stabili o se cambiano spesso;
quanto è importante che siano aggiornate tempestivamente;
quanto le informazioni possono essere riconducibili a delle strutture
ricorrenti. Se l'informazione è abbastanza strutturata bisognerà allora
prendere in considerazione la possibilità di mantenere le informazioni in
una base di dati e prevedere meccanismi per la generazione automatica
delle pagine.
Esempi di siti informativi:
z
z
z
z
z
cataloghi
un sito di un dipartimento universitario che pubblica la lista dei corsi offerti.
Un motore di ricerca può aiutare, tuttavia ancora di più aiuta una
strutturazione attenta dell'informazione e una struttura di navigazione
adeguata.
Siti semplici, di pura "presenza" in rete, possono essere creati e gestiti
senza tecniche particolari e
Siti che offrono servizi coincidono con la realizzazione di un'applicazione
informatica, per la progettazione di siti con grossi contenuti informativi o
comunque complessi si cominciano ad affermare metodologie che
estendono le metodologie di progettazione delle basi di dati.
11
Diversi tipi di siti
z
Siti di immagine (brochurware) e personali
z
z
Siti commerciali
z
z
z
z
z
lo scopo principale del sito è attrarre clienti e quindi bisogna progettarlo
nell'ottica di attrarre visitatori nella fascia di mercato in cui il prodotto si
colloca.
Siti che offrono servizi
z
z
fornire un'immagine ad una organizzazione o ad una persona, e allora la
domanda da porsi è qual è l'immagine che si vuole comunicare.
ad esempio un motore di ricerca o un servizio gratuito di posta elettronica,
la struttura del sito può essere relativamente semplice ma la complessità
risiede nell'applicazione sottostante che realizza il servizio.
Portali (orizzontali o verticali)
Siti di intrattenimento
Siti di comunità
Siti artistici ...
Distinzioni funzionali tra siti
z
Siti in cui ogni singola pagina è diversa dalle altre
e siti con struttura regolare (serie di pagine)
z
Siti statici e siti aggiornati molto di frequente da
realizzare con tecnologie dinamiche
z
Siti di sola presentazione e siti interattivi
12
Attività interdisciplinare
z
Realizzare un sito Web richiede:
z
z
z
z
Lavoro di équipe?
z
z
z
z
Capacità editoriali e di strutturazione del contenuto
Capacità di presentazione grafica
Capacità di programmazione
Editore o architetto dell’informazione
Grafico, designer
Programmatore, Informatico
Conoscenze interdisciplinari
Valutazione dei costi benefici
z
La realizzazione di un sito Web, ma ancora di più la sua
manutenzione, ha un costo
z
Analisi dei vantaggi in termini di immagine, ritorno economico o
altro a fronte dei costi
z
La dimensione economica è la quarta dimensione (rispetto alle
tre che abbiamo visto)
z
Definire l’obiettivo concretamente
z Ridurre il numero di chiamate telefoniche
z Aumentare il numero di visitatori
z Incrementare le vendite
13
Progettare un sito Web?
z
Sito Web: un insieme coordinato di pagine, relative
ad uno stesso tema, che risiedono tipicamente su
uno stesso server
z
Attività complessa che coinvolge più persone e
professionalità
z
Meglio seguire una metodologia e utilizzare
strumenti di comunicazione (diagrammi, immagini)
per maturare insieme con il committente le scelte di
progetto.
Conclusione
z
z
Per progettare un sito Web bisogna
conoscere le specificità espressive come
mezzo e comprendere la tecnologia
Progettare un sito Web richiede un buon
equilibrio tra
z
z
z
Struttura
Presentazione
Programmazione
14
Come si progetta
un sito web
Fasi del processo
z
Come nella progettazione di un qualunque sistema
informatico è importante seguire una metodologia
z
Ciclo di vita: processo di sviluppo costituito da fasi
intermedie
z
Fasi del processo:
z
z
z
z
Analisi e definizione dei requisiti (Define goals)
Progettazione (Design)
Prototipizzazione (Prototype)
Verifica (Test)
15
Il ciclo di vita del del software:
visione statica
Requisiti
“Waterfall model”
Funzioni
Design
Sviluppo
Concettualmente
sbagliato: nessun
artefatto di successo
può nascere così
Test
Rilascio
Il ciclo di vita del del software:
visione dinamica
Sviluppo per
prototipi
successivi
Design
Prototype
Test
Concettualmente corretto
16
Fasi del processo:
Analisi e definizione dei requisiti
Define
goals
• Quali obbiettivi
• Quali contenuti
• Quali utenti
• Quali compiti
• Quale contesto
• Concept grafico
Design
Prototype
Test
Progettare per l’utente
z
YOU are NOT the USER
z
z
Quello che è chiaro e usabile per il progettista o il
committente può essere oscuro e fonte di
frustrazione per l’utente
USERS are NOT DESIGNERS
z
Gli utenti tipicamente non sanno qual è il modo
migliore di organizzare l’informazione
17
Progettare per l’utente
z
Gli obiettivi di utilità e usabilità sono specifici
per gruppi di utenti
z
Profili utente
z
z
z
Pensare ad utenti tipici
Se possibile intervistarli
Può aiutare dargli un nome per mettersi nei loro
panni
Progettazione centrata sull’utente
Le domande a cui rispondere:
z Quale utente?
z Quali sono i compiti che deve svolgere?
z Qual è il contesto d’uso?
18
Quale utente?
z
z
z
A quali categorie di utenti è destinato il prodotto che
dobbiamo progettare ?
Di queste categorie, quali sono quelle prioritarie e
quali quelle secondarie?
Come possiamo definire con precisione ciascuna
categoria di utenti, in rapporto al prodotto che
dobbiamo progettare? (sesso, età, cultura,
esperienza, abilità/disabilità, interessi, …)
Quali compiti?
z
Quali sono i compiti che le diverse categorie di utenti dovranno
svolgere con il prodotto?
z
Quali sono quelli principali e quali quelli accessori?
COMPITI:
UTENTI:
Categoria A
Categoria B
Categoria C
z
A
B
C
***
***
***
*
*
**
Quali metriche di efficacia e di efficienza possiamo introdurre
in rapporto a questi compiti?
19
Quale contesto d’uso?
z
z
z
In quali diversi contesti le varie categorie di utenti
dovranno svolgere i diversi compiti individuati?
Quali contesti sono prevalenti, e quali occasionali, in
rapporto ai diversi compiti?
Come possiamo caratterizzare con precisione i
diversi contesti?
Esempio: contenitore per acqua minerale
Utenti:
z
Generico consumatore di acqua minerale
z
Trasportatori di confezioni multiple
Contesto d’uso:
z
Acquisto in supermercato o in negozio
Quali utenti,
z
Conservazione in frigorifero
contesti e compiti
z
Consumo in tavola
sono prioritari?
Compiti:
z
Trasporto manuale di confezione multipla
z
Estrazione del contenitore singolo dalla confezione multipla
z
Trasporto manuale di contenitore singolo
z
Stoccaggio/estrazione nel/dal frigorifero
z
Apertura e chiusura del contenitore
z
Mescita nel bicchiere
z
Schiacciamento verticale per dismissione
20
Contenitore per acqua minerale: una possibile
proposta
Definizione dei requisiti
z
z
z
z
Contenuti (quello che c’è, quello che manca)
Tecnici (Come realizzare)
Visuali (Come presentare)
Risorse necessarie
z
z
z
Persone
Tempi
Costi
21
Fasi del processo: Progettazione
Define
goals
•Struttura di navigazione
•Struttura del sito
•Presentazione Grafica
Design
Prototype
¾Scenari utente
¾Interazioni
Test
Struttura del sito: esempio
22
Grafica: esempio (home page)
Grafica: esempio (secondo livello)
23
Grafica: esempio (secondo livello)
Grafica: esempio (terzo livello)
24
Grafica: esempio (artisti e dischi)
Scenari utente: esempi
25
Progettazione di un sito
Define
goals
• LO-FI prototyping
• HI-FI prototyping
Design
Prototype
Test
Fedeltà nei prototipi
- Alta fedeltà (HI-FI): il prototipo “assomiglia” in tutti
gli aspetti al prodotto finale
- Bassa fedeltà (LO-FI): il prototipo “assomiglia”
alla lontana al prodotto finale, con molti dettagli
mancanti (es.: paper prototyping)
26
Uso di prototyping tools per il web:
un’indagine
http://guuui.com/issues/01_03_02.asp (settembre 2002)
Progettazione di un sito
Define
goals
• Test funzionale
• Test di usabilità
• Controllo dei
contenuti
Design
Prototype
Test
27
Test funzionale
z
Che cosa: esercizio sistematico di tutte le funzioni
presenti nel sito
(links e forms in tutte le condizioni, comprese quelle di errore)
z
z
z
Chi: sviluppatori del sito (eventualmente con il
committente in fase di accettazione)
Come: si possono utilizzare check-list strutturate, e
tools appositi (ad es. per la scoperta di link aperti)
Quando: durante lo sviluppo, e prima del primo
rilascio
Test di usabilità
z
z
z
z
Che cosa: utilizzo del sito in scenari d’uso
predefiniti
Chi: utenti campione
Come: vedi lezione relativa
Quando: quando opportuno, durante lo sviluppo per
prototipi successivi
(anche all’inizio: paper sketch & simulation)
28
Controllo dei contenuti
z
z
z
z
Che cosa: verifica dei contenuti (correttezza,
adeguatezza, stile)
Chi: responsabile dei contenuti
Come: lettura delle pagine web
Quando: prima del rilascio
Paper prototyping
29
Che cos’è un prototipo?
Un modello approssimato o parziale del sistema che
vogliamo sviluppare, realizzato allo scopo di valutarne le
caratteristiche
Ci permette di condurre dei test prima di avere il prodotto
finale
Perchè creare prototipi di un sito web?
z
z
z
Per avere un feedback anticipato da parte degli
utenti, per correggere il design prima di scrivere il
codice
Per sperimentare design alternativi
… rapidamente e a costi contenuti
30
Paper prototyping
Il sito viene prototipato sulla carta, e il suo
funzionamento viene simulato a mano, per condurre
rapidamente test di usabilità
Esempi:
- user testing della home page
- user testing della struttura del sito
- user testing di funzioni specifiche
Esempio: usability enquiry di una home page
Realizzazione della
home page di Sun,
(Jakob Nielsen, 1995)
31
Usability test & paper simulation
Alcuni scenari d’uso vengono simulati manualmente,
alla presenza di utenti-cavia…
FACILITATORE
“COMPUTER”
UTENTE-CAVIA
Paper simulation: materiali
Schema generale del sito
Singole pagine su cartoncino
Componenti dell’interfaccia (menu, forms, messaggi di
errore,…) su cartoncino
32
Vantaggi e svantaggi
z
z
Vantaggi
z non è richiesto lavoro di programmazione
z si possono avere subito le reazioni dell’utente
z si possono confrontare rapidamente soluzioni diverse
z si possono analizzare in dettaglio interazioni particolarmente
complesse (forms, menu, …)
Svantaggi
z non si coprono tutti i casi
z bisogna poi trasporre il disegno manualmente in forma
elettronica
33
Come fare
z
z
Minimo tre persone:
- facilitatore: l’unico che parla (dà istruzioni, incoraggia
commenti, non fa commenti)
- computer: conosce l’applicazione e la controlla, simulando le
risposte; non fornisce mai spiegazioni
- osservatori: prendono note
Sessione tipica: 1 ora tutto compreso
Valutazione dei risultati
z
Riordinate le osservazione
z
z
z
z
z
che cosa era importante?
Ci sono m olti problemi correlati?
Riassumete i risultati per iscritto
Effettuate le modifiche al prototipo
Ripetete le prove
34
Evoluzione di un sito
web
Il concetto di “release” del software
z
z
Ogni prodotto software evolve per versioni
successive, dette “release”
Ogni nuova release costituisce un
“miglioramento” rispetto alla release precedente:
- correzione di errori
- perfezionamenti di funzionalità esistenti
- introduzione di nuove funzionalità
- compatibilità con ambiente più evoluto
35
Evoluzione del software: classificazione
delle modifiche
Perfective
31%
New
Functionality
38%
Fix/Repairs
31%
Source: IT Metrics, March 1997
Evoluzione dei prodotti tecnologici in
rapporto ai bisogni dell’utente
Prestazioni del prodotto
Punto di transizione in cui
la tecnologia soddisfa le
necessità primarie
dotto
del pro
e
n
o
luzi
evo
prestazioni in
eccesso
necessità non
soddisfatte
Fase centrata sulla tecnologia
prestazioni
necessarie
Livello di
prestazioni
richiesto
dall’utente
medio
t
Fase centrata sull’utente
da: D.A.Norman, Il computer invisibile, 1998
36
Evoluzione di un sito web
z
z
Un sito web è un prodotto software particolare, in quanto:
come gli altri prodotti software, tende a “crescere” nel tempo
è utilizzabile dalla rete
(quindi nuove release possono essere rese disponibili
“immediatamente”)
z
è costituito logicamente da un contenitore e da un contenuto
(contenitore e contenuto devono poter essere modificati con
procedure diverse)
La crescita di un sito web
37
Evoluzione di un sito web
modifiche
major releases
minor releases
r1
r2
r3
tempo
r4
software
contenuti
Fluidità dei media
MEDIA
PERMANENTI
libro
MEDIA
FLUIDI
MEDIA
VOLATILI
CD-ROM
giornali
TV
WEB
38
Lifetime: indagini sperimentali
Tempo medio di vita per:
Files HTML
Immagini
Worrell, 1994
Gwertzman et al,1996
75 gg
50 gg
107 gg
85 gg
39
