progettazione e realizzazione di siti web
DESCRIPTION
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.TRANSCRIPT
![Page 1: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/1.jpg)
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: [email protected]
twitter: @sordip blog: http://www.ipertesti.me
• P. Sordi, Progettare per il web, Carocci, Roma, 2013 • Materiali del corso
Testi d’esame
![Page 2: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/2.jpg)
Il migliore lavoro del mondo o il peggiore lavoro del 2013?
http://www.careercast.com/jobs-rated/worst-jobs-2013
![Page 3: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/3.jpg)
Una soluzionehttp://www.niemanlab.org/2012/09/miranda-mulligan-want-to-produce-hirable-grads-journalism-schools-teach-them-to-code/
![Page 4: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/4.jpg)
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/
![Page 5: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/5.jpg)
Chi è quello a sinistra?
![Page 7: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/7.jpg)
Parole, parole, parolehttp://37signals.com/svn/posts/3404-reminder-design-is-still-about-words
![Page 8: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/8.jpg)
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.
![Page 9: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/9.jpg)
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.”
![Page 10: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/10.jpg)
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.”
![Page 11: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/11.jpg)
Alla base dell’ipertestoInterattività
Non linearità
Associazione
Itinerario
Processo
Apertura
![Page 12: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/12.jpg)
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.”
![Page 14: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/14.jpg)
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.”
![Page 15: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/15.jpg)
Tre acronimi, tre protocolli
★URI
★HTTP
★HTML
![Page 16: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/16.jpg)
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à.
![Page 17: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/17.jpg)
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.
![Page 19: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/19.jpg)
Le mille luci del WebPagine di testo in bianco e nero?
Mai più.
Scritte in Times New Roman?
Mai più.
Link blu, sottolineato?
Mai più.
![Page 21: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/21.jpg)
$ 1.000.000.000
![Page 22: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/22.jpg)
$ 8.000.000.000?
![Page 23: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/23.jpg)
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."
![Page 29: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/29.jpg)
Architettare l’informazione
Un sabato al centro commerciale.
![Page 30: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/30.jpg)
La via che porta all’abbigliamento
Come è organizzato il tuo armadio?
![Page 31: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/31.jpg)
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)
![Page 32: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/32.jpg)
IA sul campo: il mondo reale
Contesto
Contenuti Utenti
![Page 33: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/33.jpg)
Le aree grigie dell’IADesign grafico
Usabilità
Content Management
Web Writing
Sviluppo software
...
![Page 34: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/34.jpg)
Architettare l’informazione
1. Strutturare
2. Organizzare
3. Etichettare
![Page 35: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/35.jpg)
Strutturare
Determinare il livello di approfondimento e granularità dei singoli componenti informativi del sito e decidere come metterli in relazione tra loro.
![Page 36: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/36.jpg)
Organizzare
Raggruppare i singoli componenti informativi in categorie significative e distinte tra loro.
![Page 37: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/37.jpg)
Etichettare
Assegnare un nome alle categorie e ai collegamenti che portano alle categorie.
![Page 38: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/38.jpg)
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.
![Page 39: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/39.jpg)
Criteri di ordinamento★ Tassonomico
★ Gerarchico
★ Cronologico
★ Alfabetico
★ Geografico
★ Tipologico
★ Utente
★ Azione
![Page 40: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/40.jpg)
Esatti
★ Cronologico
★ Alfabetico
★ Geografico
![Page 41: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/41.jpg)
Ambigui
★ Argomento
★ Azione
★ Utenti
★ Metafora
![Page 42: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/42.jpg)
8 parametri di analisi dei contenuti
Per una progettazione consapevole dell’architettura delle informazioni.
![Page 43: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/43.jpg)
Collocazione
I contenuti riconducibili a un solo argomento vanno raggruppati in una stessa sola area.
![Page 44: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/44.jpg)
Differenziazione
I contenuti di natura diversa vanno distribuiti in diverse sezioni del sito (o della pagina).
![Page 45: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/45.jpg)
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.
![Page 46: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/46.jpg)
Confini
L’organizzazione dei tuoi contenuti deve evidenziare l’ampiezza e la profondità del sito e delle sue articolazioni.
![Page 47: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/47.jpg)
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.
![Page 48: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/48.jpg)
Struttura appropriata
L’organizzazione delle informazioni e la determinazione delle loro relazioni deve riflettere le specificità del contesto, del contenuto e dei navigatori.
![Page 49: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/49.jpg)
Coerenza
Una volta che si è scelta una struttura per un contenuto, questa struttura deve essere ripetuta per tutti i contenuti simili.
![Page 50: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/50.jpg)
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.
![Page 51: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/51.jpg)
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?
![Page 52: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/52.jpg)
<div id=“header”>…</div>
<div class=“nav”>…</div>
<div class="entry"> …</div>
<div id="footer"> …</div>
L’architettura in HTML: prima
![Page 53: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/53.jpg)
L’architettura in HTML: adesso
![Page 54: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/54.jpg)
<header>
Informazioni introduttive o di supporto alla navigazione.
![Page 55: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/55.jpg)
<nav>
Collegamenti per la navigazione.
![Page 56: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/56.jpg)
<section>
Raggruppamenti tematici di contenuto, unificati e identificati preferibilmente da un titolo.
![Page 57: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/57.jpg)
<article>
Contenuto autosufficiente di un documento, di una pagina o di un sito, potenzialmente usabile e distribuibile al di fuori del contesto originario.
![Page 58: Progettazione e realizzazione di siti web](https://reader034.vdocuments.net/reader034/viewer/2022051209/5482011eb07959150c8b468c/html5/thumbnails/58.jpg)
<footer>
Informazioni sulla sezione (attenzione: non sul documento) cui appartiene, come l’autore, la data o il copyright.