Slide 34-90 del corso di Progettazione e realizzazione di siti web, a.a. 2014/15, Corso di Laurea magistrale in Scienze dell'informazione, della comunicazione e dell'editoria, Università di Roma Tor Vergata.

1. Progettazione e
realizzazione di siti web
Corso di Laurea magistrale in
Scienze dell’informazione, della comunicazione e dell’editoria
Università di Roma Tor Vergata
A.A. 2014/2015
Paolo Sordi
email: paolo.sordi@uniroma2.it
twitter: @sordip
web: http://www.ipertesti.me
• P. Sordi, Progettare per il web, Carocci, Roma, 2013
• Materiali del corso
Testi d’esame

2. if this then that

3. Il cms Web
Open source
Standard
Interoperabile
Senza proprietà
Senza centro
Non remunerativo

5. Architettare l’informazione

6. La via che porta
all’abbigliamento
Come è organizzato il tuo armadio?

7. Information Architects
L’architetto dell’informazione è la persona che
1) organizza ciò che è intrinseco nei dati, rendendo chiaro
ciò che è oscuro,
2) crea la struttura o la mappa delle informazioni tramite la
quale gli altri possono trovare la via che porta alla
conoscenza.
(Richard Saul Wurman)

13. IA sul campo: il mondo reale
Contesto
Contenuti Utenti

14. Le aree grigie dell’IA
Design grafico
Usabilità
Content Management
Web Writing
Sviluppo software
...

15. Architettare l’informazione
1. Strutturare,
2. organizzare,
3. etichettare.

16. Strutturare
Determinare il livello di approfondimento e
granularità dei singoli componenti informativi del sito
e decidere come metterli in relazione tra loro.

17. Organizzare
Raggruppare i singoli componenti informativi in
categorie significative e distinte tra loro.

18. Etichettare
Assegnare un nome alle categorie e ai collegamenti
che portano alle categorie.

19. Relazioni ipertestuali
Diversi angoli di lettura e differenti strade di accesso
alle tue informazioni: ciò significa che le relazioni da
costruire non sono uniche e monodirezionali ma
molteplici e multidirezionali.

20. Criteri di ordinamento
★ Tassonomico
★ Gerarchico
★ Cronologico
★ Alfabetico
★ Geografico
★ Tipologico
★ Utente
★ Azione

21. Esatti
★ Cronologico
★ Alfabetico
★ Geografico

22. Ambigui
★ Argomento
★ Azione
★ Utenti
★ Metafora

23. 8 parametri di analisi dei
contenuti
Per una progettazione consapevole dell’architettura
delle informazioni.

24. Collocazione
I contenuti riconducibili a un solo argomento vanno
raggruppati in una stessa sola area.

25. Differenziazione
I contenuti di natura diversa vanno distribuiti in
diverse sezioni del sito (o della pagina).

26. Contenuto informativo
Quando assembli informazioni, assicurati che le
nomenclature e le soluzioni di presentazione che
scegli di assegnare a quelle informazioni siano un
segnale semantico forte sul contenuto.

27. Confini
L’organizzazione dei tuoi contenuti deve evidenziare
l’ampiezza e la profondità del sito e delle sue
articolazioni.

28. Percorsi di accesso
molteplici
Non uno, ma molteplici sentieri di accesso ai tuoi
contenuti, perché molteplici possono essere le
tracce che i tuoi visitatori decidono di seguire nella
loro navigazione.

29. Struttura appropriata
L’organizzazione delle informazioni e la
determinazione delle loro relazioni deve riflettere le
specificità del contesto, del contenuto e dei
navigatori.

30. Coerenza
Una volta che si è scelta una struttura per un
contenuto, questa struttura deve essere ripetuta per
tutti i contenuti simili.

31. Rilevanza rispetto al
visitatore
Quando i target di riferimento del sito sono diversi,
organizzare i contenuti in ragione dei visitatori può
agevolare l’individuazione dei contenuti di interesse.

32. Le domande per l’IA
• Dove sono?
• Dove vado?
• Cosa succede qui?
• Cosa ho a disposizione?
• So cosa cercare: dove posso farlo?
• Posso parlare con qualcuno?

33. Dove trovare le risposte?
Semplice, nell’architettura
(visuale).

34. 4 cose da non fare nel
web design. Mai.

35. 1. Testo non
scannerizzabile

36. 2. Titoli di pagina non
adatti ai motori di ricerca

37. 3. Qualsiasi cosa che
sembri una pubblicità

38. 4. Violare le
convenzioni

39. La scrittura e la Rete:
10 regole da tenere
bene a mente.

40. 1. Ricorda lo stile che
rappresenti

41. 2. Stai scrivendo per la
Rete non per la carta
stampata

42. 3. A chi stai parlando:
colleghi, studenti, famiglie,
pubblico generico?

43. 4. Che cosa stai scrivendo: un
testo informativo, un post di un blog
o un programma di un evento? Uno
status su Facebook? Un tweet?

44. 5. Usa il modello a
piramide: i concetti
importanti subito

45. 6. Scrivi frasi brevi e usa i
paragrafi per evidenziare i
passaggi del ragionamento

46. 7. Sfrutta le liste

47. 8. Individua le parole
chiave con il grassetto
(ma non esagerare)

48. 9. Scegli con cura le
parole giuste

49. 10. Il titolo è il
microcontenuto più
importante

50. <div id=“header”>…</div>
<div class=“nav”>…</div>
<div class="entry"> …</div>
<div id="footer">…</div>
L’architettura in HTML:
prima

51. L’architettura in HTML:
adesso

52. <header>
Informazioni introduttive o di supporto alla
navigazione.

53. <nav>
Collegamenti per la navigazione.

54. <main>
Il contenuto principale dell’elemento ‘body’.

55. <section>
Raggruppamenti tematici di contenuto, unificati e
identificati preferibilmente da un titolo.

56. <article>
Contenuto autosufficiente di un documento, di una
pagina o di un sito, potenzialmente usabile e
distribuibile al di fuori del contesto originario.

57. <aside>
Sezione di pagina con un contenuto separato dal
contenuto principale.

58. <footer>
Informazioni sulla sezione (attenzione: non sul
documento) cui appartiene, come l’autore, la data
o il copyright.