Slide del corso di Progettazione e realizzazione di siti web, a.a. 2013/14, 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. 2013/2014
!
Paolo Sordi
!
email: paolo.sordi@uniroma2.it
twitter: @sordip
blog: http://www.ipertesti.me
• P. Sordi, Progettare per il web, Carocci, Roma, 2013
• Materiali del corso
Testi d’esame

2. Il migliore lavoro del mondo o il peggiore
lavoro del 2013?
http://www.careercast.com/jobs-rated/worst-jobs-2013

3. Una soluzione
http://www.niemanlab.org/2012/09/miranda-mulligan-want-to-produce-hirable-grads-journalism-schools-teach-them-to-code/

4. Il New York Times è in cerca
di...
• Web developer
• PHP developer
• Information Architect
• Front-End Design Developer
• Mobile and Wordpress developer
• Blogs / WordPress Developer
• Interaction Designer
• News App Developer
• Web designer and front-end coder
• ... http://www.newsnerdjobs.com/

5. Chi è quello a sinistra?

6. Storify
http://storify.com/

7. Parole, parole, parole
http://37signals.com/svn/posts/3404-reminder-design-is-still-about-words

8. Il giornalista digitale
• Understand the nuances of digital media technologies.
• Know how to communicate and disseminate information across a variety of digital platforms.
• Understand how to curate and filter the information.
• Know how to program information into effective and powerful applications, digital interfaces
or digital frameworks.
• Know how to make the presentation of this information clear, accurate, free of complication,
and aesthetically pleasing.
• Know the appropriate programming languages that will suit the information on hand and how
to make it accessible, searchable and digestible for a variety of digital platforms.
• Understand how data can be arranged, curated, segmented and analyzed within the
context of existent information.

9. Qualche anno fa...
“Un Memex è uno
strumento all’interno del
quale un uomo raccoglie
tutti i suoi libri, i suoi dischi
e le sue comunicazioni ed
è automatizzato in modo
da poter essere consultato
con grande velocità e
flessibilità. È un ampio e
intimo supplemento alla
sua memoria.”

10. Qualche anno dopo...
“Una rete ampia
quanto il mondo
dedicata a servire
centinaia di milioni
di utenti
simultaneamente
con dati, immagini e
scritti archiviati nel
corpo del mondo.”

11. Alla base dell’ipertesto
Interattività
Non linearità
Associazione
Itinerario
Processo
Apertura

12. Ci vuole il fisico
“Internet era già in funzione
negli anni settanta, ma
trasferire informazioni restava
troppo complesso per quanti
non fossero esperti di
informatica. Dovevi aprire un
programma per collegarti a
un altro computer e poi nella
conversazione (in un
linguaggio diverso) con
un’altra macchina usavi un
programma differente per
accedere all’informazione.”

13. La carta fondante

14. Il Web secondo TBL
“Il principio fondamentale del Web è che, una volta
che si è messo a disposizione un documento, un
database, un’immagine, un suono, un video o un
dialogo interattivo, questo dovrebbe essere
accessibile a tutti (ovviamente previa autorizzazione)
con qualsiasi tipo di computer, in qualsiasi paese.”

15. Tre acronimi, tre protocolli
★URI
★HTTP
★HTML

16. Porte aperte
Gli sviluppatori, man mano che
contenuti sempre più numerosi
vengono riversati nell’universo
ipertestuale del Web, iniziano ad
estendere il linguaggio e a introdurre
nuove funzionalità da sottoporre alla
crescente comunità.

17. Porte aperte
I navigatori, rendendosi conto della relativa facilità
del codice HTML e della sua manciata di tag,
partecipano attivamente al processo di crescita ed
estensione del Web creando e pubblicando le loro
pagine, e al tempo stesso spingono la comunità di
sviluppo alla ricerca di arricchimenti sostanziali alle
iniziali possibilità dell’HTML.

19. Le mille luci del Web
Pagine di testo in bianco e nero?
Mai più.
Scritte in Times New Roman?
Mai più.
Link blu, sottolineato?
Mai più.

20. <IMG SRC="file://foobar.com/
foo/bar/blargh.xbm">

21. $ 1.000.000.000

22. $ 8.000.000.000?

23. Le mille luci del
World Wide Web
Before the Netscape browser illuminated
the Web, the Internet did not exist for
most people. If it was acknowledged at
all, it was mischaracterized as either
corporate email (as exciting as a
necktie) or a clubhouse for adolescent
males (read: pimply nerds).
[...] In late 1994, Time magazine
explained why the Internet would never
go mainstream: "It was not designed for
doing commerce, and it does not
gracefully accommodate new arrivals."

29. Architettare l’informazione
Un sabato al centro commerciale.

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

31. 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)

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

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

34. Architettare l’informazione
1. Strutturare
2. Organizzare
3. Etichettare

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

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

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

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

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

40. Esatti
★ Cronologico
★ Alfabetico
★ Geografico

41. Ambigui
★ Argomento
★ Azione
★ Utenti
★ Metafora

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

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

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

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

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

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

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

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

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

51. 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?

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

53. L’architettura in HTML:
adesso

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

55. <nav>
Collegamenti per la navigazione.

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

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

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