Slide 49-124 del corso di Progettazione e realizzazione di siti web, a.a. 2016/17, Corso di Laurea magistrale in Scienze dell'informazione, della comunicazione e dell'editoria, Università di Roma Tor Vergata.

1. PIACERE DI CONOSCERVI
PAOLO SORDI
Mail: paolo.sordi@uniroma2.it
Web: www.ipertesti.me
Twitter: @sordip
Instagram: psordinsta
LinkedIn: it.linkedin.com/in/paolosordi
Digital Communication & New Media
Manager presso LUISS Guido Carli
1

2. PROGETTAZIONE E
REALIZZAZIONE DI SITI WEB
A.A 2016/2017
CORSO DI LAUREA MAGISTRALE IN
SCIENZE DELL’INFORMAZIONE, DELLA COMUNICAZIONE E
DELL’EDITORIA
UNIVERSITÀ DI ROMA TOR VERGATA
2

3. ARCHITETTARE
L’INFORMAZIONE IN HTML
BACKEND
49

9. PRIMA DI HTML5
L’ARCHITETTURA DI UNA PAGINA WEB IN HTML
<div id=“header”>…</div>
<div class=“nav”>…</div>
<div class="entry"> …</div>
<div id="footer"> …</div>
55

10. 56

11. HTML5
<HEADER>
Informazioni introduttive o di supporto alla
navigazione.
57

12. HTML5
<NAV>
Collegamenti per la navigazione.
58

13. HTML5
<MAIN>
Il contenuto principale dell’elemento
‘body’.
59

14. HTML5
<SECTION>
Raggruppamenti tematici di contenuto,
unificati e identificati preferibilmente da un
titolo.
60

15. HTML5
<ARTICLE>
Contenuto autosufficiente di un
documento, di una pagina o di un sito,
potenzialmente usabile e distribuibile al di
fuori del contesto originario.
61

16. HTML5
<ASIDE>
Sezione di pagina con un contenuto
separato dal contenuto principale.
62

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

18. ARCHITETTARE
L’INFORMAZIONE
UN SABATO AL CENTRO COMMERCIALE
64

19. QUOTIDIANITÀ
LA VIA CHE PORTA ALL’ABBIGLIAMENTO
Come è organizzato il tuo armadio?
65

20. STRUTTURE CHIARE
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)
66

21. CONTESTO, CONTENUTI, UTENTI
IA SUL CAMPO: IL MONDO REALE
67
Contesto
Contenuti Utenti

22. WEB DESIGN
LE AREE GRIGIE DELL’IA
Design grafico
Usabilità
Content Management
Web Writing
Sviluppo software
...
68

23. IA
ARCHITETTARE L’INFORMAZIONE
1.Strutturare,
2.organizzare,
3.etichettare.
69

24. 1
STRUTTURARE
Determinare il livello di approfondimento e
granularità dei singoli componenti informativi
del sito e decidere come metterli in relazione
tra loro.
70

25. 2
ORGANIZZARE
Raggruppare i singoli componenti informativi
in categorie significative e distinte tra loro.
71

26. 3
ETICHETTARE
Assegnare un nome alle categorie e ai
collegamenti che portano alle categorie.
72

27. È IL WEB, BELLEZZA
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.
73

28. METTERE ORDINE
CRITERI DI ORDINAMENTO
★ Tassonomico
★ Gerarchico
★ Cronologico
★ Alfabetico
★ Geografico
★ Tipologico
★ Utente
★ Azione
74

29. UGUALI PER TUTTI
ESATTI
★ Cronologico
★ Alfabetico
★ Geografico
75

30. DIPENDE
AMBIGUI
★ Argomento
★ Azione
★ Utenti
★ Metafora
76

31. 8 PARAMETRI DI ANALISI DEI
CONTENUTI
PER UNA PROGETTAZIONE CONSAPEVOLE
DELL’ARCHITETTURA DELLE INFORMAZIONI.
77

32. 1
COLLOCAZIONE
I contenuti riconducibili a un solo argomento
vanno raggruppati in una stessa sola area.
78

33. 2
DIFFERENZIAZIONE
I contenuti di natura diversa vanno distribuiti
in diverse sezioni del sito (o della pagina).
79

34. 3
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.
80

35. 4
CONFINI
L’organizzazione dei tuoi contenuti deve
evidenziare l’ampiezza e la profondità del sito
e delle sue articolazioni.
81

36. 5
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.
82

37. 6
STRUTTURA APPROPRIATA
L’organizzazione delle informazioni e la
determinazione delle loro relazioni deve
riflettere le specificità del contesto, del
contenuto e dei navigatori.
83

38. 7
COERENZA
Una volta che si è scelta una struttura per un
contenuto, questa struttura deve essere
ripetuta per tutti i contenuti simili.
84

39. 8
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.
85

40. LE DOMANDE PER L’IA
UNA VERIFICA
86

41. A DOMANDA
RISPONDI
▸Dove sono?
▸Dove vado?
▸Cosa succede qui?
▸Cosa ho a disposizione?
▸So cosa cercare: dove posso farlo?
▸Posso parlare con qualcuno?
87

42. DOVE TROVARE LE RISPOSTE?
SEMPLICE, NELL’ARCHITETTURA
(VISUALE).
88

49. UN MEZZO.
O UN SISTEMA OPERATIVO?
LA RETE, OGGI
95

50. DAL WEB AL
WEB 2.0
http://oreilly.com/pub/a/web2/archive/what-is-
web-20.html
96

51. NETSCAPE VS GOOGLE
2.0/1
97

52. DOUBLECLICK VS ADSENSE
2.0/2
98

53. L’AGO NEL PAGLIAIO
(PARENTESI: COME FUNZIONA IL PAGE RANK DI GOOGLE)
99
Google Secret
Performance storica
Frequenza di aggiornamento
Link in entrata
Rilevanza Parole Chiave

54. EDITORIA VS PARTECIPAZIONE
2.0/3
100

55. TASSONOMIE VS FOLKSONOMY
2.0/4
101

56. SITO PERSONALE VS BLOG
2.0/5
102

57. LA KILLER APP
103
HEY CHIEF!

58. VUOI COMMENTARE?
INVIA
INTERAZIONE 104

59. ORGANIZZAZIONE
PERMALINK
105

60. DISTRIBUZIONE
FEED RSS
106

61. BLOGGER
IN PRINCIPIO FU
107

62. WORDPRESS
OGGI È
108

63. BIG DATA
I NUMERI DI WORDPRESS
▸ 1 sito su 4 usa WordPress
▸ 1/3 dei siti top 1000 usa WordPress
▸ Ogni 74 secondi un sito inizia a usare WordPress
▸ Chi lo usa? Sony, Microsoft, The Wall Street Journal, The
New York Times, Time Magazine, The New Yorker,
Mashable, TechCrunch, Coca Cola, Mercedes Benz,
Samsung, Star Wars, PlayStation, General Motors, NFL,
Bloomberg, MTV, Facebook, eBay, Google, LinkedIn,
Flickr, NASA, and TED, Jay Z, Beyoncé, Katy Perry, Justin
Timberlake, Kobe Bryant, The Rolling Stones, Sylvester
Stallone…
▸ Più di 42000: i plugin per estendere le funzionalità
▸ Più di 2000: i temi per personalizzare l’interfaccia
▸ 18: i post al secondo prodotti da un sito che usa
WordPress
109

64. 110
.COM? .ORG?

65. WORDPRESS CONTRO WORDPRESS
VANTAGGI .COM
▸ Manutenzione in
outsourcing
▸ Aggiornamenti automatici
▸ Semplicità di gestione
▸ Immediatezza d’uso
▸ Indifferenza al nome di
dominio
111
VANTAGGI .ORG
▸ Proprietà
▸ Libertà
▸ Scalabilità
▸ Personalizzazione
▸ Costi

66. .ORG
AND THE WINNER IS
112
10 BUONE MOTIVAZIONI
1. il blog è tuo
2. nessun termine di servizio.
3. i plugin.
4. 2000 temi grafici a disposizione
5. una bella scarica di dopamina
6. una tua libreria permanente
7. ottimizzazione per i motori di
ricerca
8. Google Analytics
9. creatività
10. il blog è tuo

67. CHE COSA SIGNIFICA SELF-
HOSTING
IN 5 MINUTI (PIÙ O MENO)
113

68. INSTALLARE WORDPRESS
IN 5 MINUTI (DAVVERO)
114

69. LA BASE DI DATI
IL MIO SITO,
DINAMICO
115

70. PRONTI PER IL LOG IN
GIÀ FATTO!?!
116

71. BENVENUTI
BACHECA
117

72. IMPOSTARE IL SITO/1
GENERALITÀ
118

73. IMPOSTARE IL SITO/2
QUANDO SCRIVI
119

74. IMPOSTARE IL SITO/3
QUANDO QUALCUNO LEGGE
120

75. IMPOSTARE IL SITO/4
QUANDO DISCUTI
121

76. IMPOSTARE IL SITO/5
QUANDO INSERISCI FOTO E IMMAGINI
122

77. IMPOSTARE IL SITO/6
QUANDO I LETTORI SI COLLEGANO
123