| Date post: | 05-Dec-2014 |
| Category: |
Internet |
| Upload: | paolo-sordi |
| View: | 721 times |
| Download: | 2 times |
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
Il migliore lavoro del mondo o il peggiore lavoro del 2013?
http://www.careercast.com/jobs-rated/worst-jobs-2013
Una soluzionehttp://www.niemanlab.org/2012/09/miranda-mulligan-want-to-produce-hirable-grads-journalism-schools-teach-them-to-code/
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/
Chi è quello a sinistra?
Parole, parole, parolehttp://37signals.com/svn/posts/3404-reminder-design-is-still-about-words
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.
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.”
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.”
Alla base dell’ipertestoInterattività
Non linearità
Associazione
Itinerario
Processo
Apertura
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.”
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.”
Tre acronimi, tre protocolli
★URI
★HTTP
★HTML
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à.
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.
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ù.
$ 1.000.000.000
$ 8.000.000.000?
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."
Architettare l’informazione
Un sabato al centro commerciale.
La via che porta all’abbigliamento
Come è organizzato il tuo armadio?
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)
IA sul campo: il mondo reale
Contesto
Contenuti Utenti
Le aree grigie dell’IADesign grafico
Usabilità
Content Management
Web Writing
Sviluppo software
...
Architettare l’informazione
1. Strutturare
2. Organizzare
3. Etichettare
Strutturare
Determinare il livello di approfondimento e granularità dei singoli componenti informativi del sito e decidere come metterli in relazione tra loro.
Organizzare
Raggruppare i singoli componenti informativi in categorie significative e distinte tra loro.
Etichettare
Assegnare un nome alle categorie e ai collegamenti che portano alle categorie.
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.
Criteri di ordinamento★ Tassonomico
★ Gerarchico
★ Cronologico
★ Alfabetico
★ Geografico
★ Tipologico
★ Utente
★ Azione
Esatti
★ Cronologico
★ Alfabetico
★ Geografico
Ambigui
★ Argomento
★ Azione
★ Utenti
★ Metafora
8 parametri di analisi dei contenuti
Per una progettazione consapevole dell’architettura delle informazioni.
Collocazione
I contenuti riconducibili a un solo argomento vanno raggruppati in una stessa sola area.
Differenziazione
I contenuti di natura diversa vanno distribuiti in diverse sezioni del sito (o della pagina).
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.
Confini
L’organizzazione dei tuoi contenuti deve evidenziare l’ampiezza e la profondità del sito e delle sue articolazioni.
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.
Struttura appropriata
L’organizzazione delle informazioni e la determinazione delle loro relazioni deve riflettere le specificità del contesto, del contenuto e dei navigatori.
Coerenza
Una volta che si è scelta una struttura per un contenuto, questa struttura deve essere ripetuta per tutti i contenuti simili.
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.
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?
<div id=“header”>…</div>
<div class=“nav”>…</div>
<div class="entry"> …</div>
<div id="footer"> …</div>
L’architettura in HTML: prima
L’architettura in HTML: adesso
<header>
Informazioni introduttive o di supporto alla navigazione.
<nav>
Collegamenti per la navigazione.
<section>
Raggruppamenti tematici di contenuto, unificati e identificati preferibilmente da un titolo.
<article>
Contenuto autosufficiente di un documento, di una pagina o di un sito, potenzialmente usabile e distribuibile al di fuori del contesto originario.
<footer>
Informazioni sulla sezione (attenzione: non sul documento) cui appartiene, come l’autore, la data o il copyright.
