Progettazione e realizzazione di siti web

transcript

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

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?

Storifyhttp://storify.com/

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

La carta fondante

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?

L’architettura in HTML: prima

L’architettura in HTML: adesso

Informazioni introduttive o di supporto alla navigazione.

Collegamenti per la navigazione.

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

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

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