LO STRUMENTO PRINCIPALE:
IL SITO WEB
1 Content Management System
(CMS)
•  Software (web based) dedicati alla gestione
di un sito web: portali, siti aziendali,
intranet, blog, Wiki…
•  L’obiettivo è consentire operazioni
complesse fornendo un’interfaccia utente
trasparente senza richiedere competenze
tecniche di programmazione e senza
preoccupazione della resa finale
2 Content Management System
(CMS)
•  Gestione dei contenuti: sono presenti
maschere che permettono all’utente di
scrivere i contenuti in modo:
–  Strutturato;
–  WYSIWYG;
–  Soggetto a vincoli (es. compilazione di
campi obbligatori, inserimento testi
alternativi ecc)
3 CMS e redazione distribuita
•  I CMS sono strumenti multiutente, ossia
consentono a più autori
contemporaneamente di interagire con i
contenuti del sito, anche e soprattutto a
distanza
•  Ai vari utenti è assegnato un profilo di
accesso: dopo un’autenticazione (login/
password), l’utente ha accesso al set di
funzionalità che gli è stato assegnato
4 CMS e redazione distribuita
•  Utenti amministratori e redattori:
–  I redattori possono essere ulteriormente
organizzati: possibilità di realizzare un
workflow redazionale
•  Utenti amministratori possono
effettuare operazioni di più alto livello:
–  Gestire / accreditare gli utenti;
–  Gestire l’architettura del sito;
–  Gestire lo stile di presentazione;
5 vantaggi
•  Un CMS permette di costruire e aggiornare un
sito dinamico, anche molto complesso ed
esteso, senza la necessità di scrivere una riga di
HTML e senza conoscere linguaggi di
programmazione lato server (come PHP) o
progettare un apposito database.
•  L'aspetto esteriore delle pagine può essere
gestito e personalizzato scegliendo un foglio di
stile CSS appositamente progettato per un
determinato CMS.
6 vantaggi
• 
• 
• 
• 
• 
• 
• 
• 
• 
Gestione trasparente del sito e dei contenuti
Gestione unificata dei siti multi-lingua
Indicizzazione automatica dei contenuti
Opportunità di multicanalità
Separazione tra contenuti, interfaccia e
applicazione
Semplicità di manutenzione / aggiornamento
Solidità ed efficienza
Rapidità di implementazione
Autonomia!
7 Esempi di CMS Open Source
• 
• 
• 
• 
• 
• 
• 
• 
• 
CMS Made Simple
Docebo CMS
Joomla
Drupal
Mambo
PHPNuke
ZenCart
WordPress
…
8 I CONTENUTI PER IL SITO WEB
9 i contenuti
•  Tipologie di contenuti: articoli,
recensioni, news, schede-prodotto,
pagine istituzionali ecc.
Frammenti di contenuto:
•  In quali segmenti è possibile suddividere
un contenuto?
•  Esempi: titolo, sommario, testo,
immagini, elenchi, tabelle ecc.
10 11 scrivere per il web
Uno studio di Nielsen rivela che:
•  la lettura a video è molto più lenta (25% rispetto alla
carta)
•  gli utenti non leggono sul web: piuttosto,
scansionano la pagina cercando di comprendere il
significato a partire da poche frasi o parti di esse
•  gli utenti non amano le pagine lunghe e prolisse:
amano testi brevi e mirati al “dunque”;
•  gli utenti detestano il linguaggio
“marketingoriented” e preferiscono un
informazione più referenziale e oggettiva
•  Il web è il regno della concretezza e della
concisione!
12 leggibilità del testo
13 la struttura visiva dei contenuti
•  Considerate le abitudini di fruizione
degli utenti, è importante rendere più
efficiente la percezione della pagina:
–  Spezzare i periodi: date all’occhio
l’opportunità di spostarsi rapidamente in
modo preciso da un paragrafo all’altro
–  Evidenziare le parole chiave in grassetto (no
corsivo, no sottolineato)
–  Usare colonne di testo la cui larghezza sia
percepibile in un solo sguardo
14 la struttura visiva dei contenuti
•  Utilizzare elenchi
•  Scegliere colori che abbiano un buon
contrasto
•  Allineare i contenuti a sinistra
•  Utilizzare caratteri standard e ottimizzati
per il supporto:
–  Verdana, Arial, Helvetica (Sans-serif) per il
video;
–  Times, Georgia, Garamond, Courier (Serif) per
la stampa
15 un confronto
IL CORSO DI INTERACTION
DESIGN HA COME OBIETTIVO
FORNIRE GLI STRUMENTI
CONCETTUALI E PRATICI PER
PROGETTARE, REALIZZARE E
VALUTARE LA QUALITA’ DI UN
SITO WEB. PER QUESTO MOTIVO
L’ESAME CONSISTE IN UNA PARTE
ORALE, CHE AVRA’ PER OGGETTO
IL MATERIALE FORNITO DURANTE
IL CORSO E UNA PARTE PRATICA
NELLA QUALE LO STUDENTE
DOVRA’ PREPARARE UNA
PRESENTAZIONE DI UN
IPOTETICO SITO WEB
16 ?
un confronto
IL CORSO DI INTERACTION
DESIGN HA COME OBIETTIVO
FORNIRE GLI STRUMENTI
CONCETTUALI E PRATICI PER
PROGETTARE, REALIZZARE E
VALUTARE LA QUALITA’ DI UN
SITO WEB. PER QUESTO MOTIVO
L’ESAME CONSISTE IN UNA PARTE
ORALE, CHE AVRA’ PER OGGETTO
IL MATERIALE FORNITO DURANTE
IL CORSO E UNA PARTE PRATICA
NELLA QUALE LO STUDENTE
DOVRA’ PREPARARE UNA
PRESENTAZIONE DI UN
IPOTETICO SITO WEB
17 Interaction Design
• 
Obiettivi: fornire strumenti
concettuali e pratici per
progettare, realizzare e
valutare la qualità di un sito
web
• 
Esame
– 
– 
Orale: materiale fornito
durante il corso
Parte pratica: preparare
la presentazione di un sito
web
linee guida
•  Il linguaggio deve riferirsi all’utente,
alla sua esperienza, ai suoi scopi e con i
termini che egli utilizzerebbe
•  Evitare la ridondanza: anziché
enfatizzare, confonde
•  I titoli devono essere semplici, diretti e
informativi: da soli dovrebbero
informare sul significato della pagina
18 linee guida
•  Adottare uno standard editoriale da
applicare con rigore (es. uso dei grassetti,
trattamento delle parole straniere)
•  Se qualcosa si spiega da solo, evitare di
farlo (es. il menu, un box…): non trattate i
vostri utenti come fossero troppo
incapaci
•  Evitare esclamazioni!!! e carattere
maiuscolo per dare importanza
(“se lo avete scritto ce l’ha”)
19 linee guida
•  Evitare di usare il carattere sottolineato:
sul web ha un preciso significato
•  Spiegare gli acronimi (ed evitare di usarli
come link…)
•  Usare esempi: la comprensione del testo
viene incrementata, è facilitato il ricordo, e
tendenzialmente richiedono meno parole
di una complessa spiegazione
20 linee guida
•  Rendere link parole che esprimono il significato del
contenuto collegato: evitare i “clicca qui”!!!
–  Nel caso si colleghino risorse non HTML, dichiarare
sempre il tipo e le dimensioni del file collegato (MP3,
PDF, AVI, ecc.): l’utente deve sapere a cosa va incontro
•  News o rassegne stampa devono:
–  Avere titoli brevi e descrittivi
–  Se pubblicati in home page, avere un abstract
riassuntivo
–  Avere il titolo come link
–  Avere la data di pubblicazione (ma solo se vi è un chiaro
e frequente aggiornamento)
21 linee guida
•  Le immagini devono avere sempre un testo
alternativo
•  Meglio utilizzare pochi colori: uno per lo sfondo (no
ad immagini in background al testo), uno per il
testo, uno per i link ancora da visitare, uno per i link
già visitati
•  Verificare sempre come viene stampata la vostra
pagina web: molto spesso gli utenti preferiscono
“tornare” alla carta quando hanno individuato cosa
gli interessa.
•  Rileggere i contenuti ed eliminare parole e frasi
non necessarie.
22