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

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

ARCHITETTARE L’INFORMAZIONE IN HTML

BACKEND

49

http://www.w3.org

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

56

HTML5

<HEADER>

Informazioni introduttive o di supporto alla navigazione.

57

HTML5

<NAV>

Collegamenti per la navigazione.

58

HTML5

<MAIN>

Il contenuto principale dell’elemento ‘body’.

59

HTML5

<SECTION>

Raggruppamenti tematici di contenuto, unificati e identificati preferibilmente da un titolo.

60

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

HTML5

<ASIDE>

Sezione di pagina con un contenuto separato dal contenuto principale.

62

HTML5

<FOOTER>

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

63

ARCHITETTARE L’INFORMAZIONE

UN SABATO AL CENTRO COMMERCIALE

64

QUOTIDIANITÀ

LA VIA CHE PORTA ALL’ABBIGLIAMENTO

Come è organizzato il tuo armadio?

65

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

CONTESTO, CONTENUTI, UTENTI

IA SUL CAMPO: IL MONDO REALE

67

Contesto

Contenuti Utenti

WEB DESIGN

LE AREE GRIGIE DELL’IA

Design grafico

Usabilità

Content Management

Web Writing

Sviluppo software

...

68

IA

ARCHITETTARE L’INFORMAZIONE

1. Strutturare,

2. organizzare,

3. etichettare.

69

1

STRUTTURARE

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

70

2

ORGANIZZARE

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

71

3

ETICHETTARE

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

72

È 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

METTERE ORDINE

CRITERI DI ORDINAMENTO

★ Tassonomico

★ Gerarchico

★ Cronologico

★ Alfabetico

★ Geografico

★ Tipologico

★ Utente

★ Azione

74

UGUALI PER TUTTI

ESATTI

★ Cronologico

★ Alfabetico

★ Geografico

75

DIPENDE

AMBIGUI

★ Argomento

★ Azione

★ Utenti

★ Metafora

76

8 PARAMETRI DI ANALISI DEI CONTENUTI

PER UNA PROGETTAZIONE CONSAPEVOLE DELL’ARCHITETTURA DELLE INFORMAZIONI.

77

1

COLLOCAZIONE

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

78

2

DIFFERENZIAZIONE

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

79

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

4

CONFINI

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

81

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

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

7

COERENZA

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

84

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

LE DOMANDE PER L’IAUNA VERIFICA

86

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

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

88

http://www.repubblica.it

http://www.feltrinellieditore.it/

https://iso.500px.com/

http://senato.it/home#

http://www.harvard.edu/

UN MEZZO. O UN SISTEMA OPERATIVO?

LA RETE, OGGI

95

DAL WEB AL WEB 2.0

http://oreilly.com/pub/a/web2/archive/what-is-web-20.html

96

NETSCAPE VS GOOGLE2.0/1

97

DOUBLECLICK VS ADSENSE2.0/2

98

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

EDITORIA VS PARTECIPAZIONE2.0/3

100

TASSONOMIE VS FOLKSONOMY2.0/4

101

SITO PERSONALE VS BLOG2.0/5

102

LA KILLER APP

103

HEY CHIEF!

VUOI COMMENTARE?

INVIA

INTERAZIONE 104

ORGANIZZAZIONEPERMALINK

105

DISTRIBUZIONEFEED RSS

106

BLOGGERIN PRINCIPIO FU

107

WORDPRESSOGGI È

108

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

110

.COM? .ORG?

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

.ORGAND 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

CHE COSA SIGNIFICA SELF-HOSTING

IN 5 MINUTI (PIÙ O MENO)

113

INSTALLARE WORDPRESSIN 5 MINUTI (DAVVERO)

114

LA BASE DI DATI

IL MIO SITO, DINAMICO

115

PRONTI PER IL LOG INGIÀ FATTO!?!

116

BENVENUTI

BACHECA

117

IMPOSTARE IL SITO/1

GENERALITÀ

118

IMPOSTARE IL SITO/2

QUANDO SCRIVI

119

IMPOSTARE IL SITO/3

QUANDO QUALCUNO LEGGE

120

IMPOSTARE IL SITO/4

QUANDO DISCUTI

121

IMPOSTARE IL SITO/5

QUANDO INSERISCI FOTO E IMMAGINI

122

IMPOSTARE IL SITO/6

QUANDO I LETTORI SI COLLEGANO

123