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. 2014/2015

Paolo Sordi

email: paolo.sordi@uniroma2.ittwitter: @sordip

web: http://www.ipertesti.me

• P. Sordi, Progettare per il web, Carocci, Roma, 2013 • Materiali del corso

Testi d’esame

if this then that

Il cms Web

Open source Standard

Interoperabile

Senza proprietà Senza centro

Non remunerativo

Architettare l’informazione

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)

http://www.w3.org

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?

Dove trovare le risposte? Semplice, nell’architettura

(visuale).

4 cose da non fare nel web design. Mai.

1. Testo non scannerizzabile

2. Titoli di pagina non adatti ai motori di ricerca

3. Qualsiasi cosa che sembri una pubblicità

4. Violare le convenzioni

La scrittura e la Rete: 10 regole da tenere

bene a mente.

1. Ricorda lo stile che rappresenti

2. Stai scrivendo per la Rete non per la carta stampata

3. A chi stai parlando: colleghi, studenti, famiglie, pubblico generico?

4. Che cosa stai scrivendo: un testo informativo, un post di un blog o un programma di un evento? Uno status su Facebook? Un tweet?

5. Usa il modello a piramide: i concetti importanti subito

6. Scrivi frasi brevi e usa i paragrafi per evidenziare i passaggi del ragionamento

7. Sfrutta le liste

8. Individua le parole chiave con il grassetto (ma non esagerare)

9. Scegli con cura le parole giuste

10. Il titolo è il microcontenuto più importante

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

<main>

Il contenuto principale dell’elemento ‘body’.

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

<aside>

Sezione di pagina con un contenuto separato dal contenuto principale.

<footer>

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