Sperimentazioni, Lezione 4

Questo qui sotto è lo ZIP che contiene la struttura HTML/CSS creata durante la lezione.

SCARICA lo ZIP DELLA LEZIONE

La pagina è molto semplice e siete tutti invitati a giocarci e modificarla, proprio come abbiamo fatto in aula: fare delle ipotesi (ad esempio, vorrei che il primo articolo di ogni sezione fosse scritto con un font più grande) e tentare di ottenerle mantenendo l’HTML invariato (visto che è creato per rappresentare in maniera strutturata e leggibile il contenuto del sito, secondo quanto definito in fase di descrizione dell’architettura dell’informazione) e lavorando solo sul CSS.

In sintesi, nella lezione abbiamo visto le varie fasi tecniche che possiamo seguire nella creazione del sito:

1. Brief iniziale e creazione del concept
2. analisi preliminare: raccolta delle informazioni relative ai contenuti che saranno presenti nel sito
3. architettura dell’informazione: creazione della struttura gerarchica formale delle informazioni presenti nel sito, delle loro interconnessioni, e dei modelli strutturali (non pensando all’estetica, quindi, ma pensando agli elementi) secondo cui sono presenti sulle varie componenti del sito (sulla home page, su una pagina di dettaglio, sulla pagina dei risultati della ricerca…)
4. prototipazione rapida: si creano sketch, wireframe, prototipi rapidi del sito, secondo quanto visto negli altri corsi;
5. passaggio dalla definizione dell’architettura dell’informazione al documento in linguaggio di markup: si prende la definizione formale del punto precedente e si prepara, per ogni punto di vista presente sul sito (home page, elenco categorie, scheda di dettaglio, profilo utente, pagina ricerca…) il documento in linguaggio di markup (ad esempio HTML) che descrive strutturalmente la composizione dei contenuti su quell’elemento del sito; in questa fase non ci si preoccupa, quindi, dell’estetica dei contenuti (se sto pensando, ad esempio, se un certo elemento di contenuto sarà in grassetto, o rosso, o allineato a destra, o sopra/sotto/di lato ad un altro contenuto, o cose del genere, sto commettendo un errore), ma della loro struttura gerarchica e della loro interconnessione e interrelazione
6. creazione della veste estetica: usando gli stylesheet si modella l’estetica del contenuto, curandone il posizionamento, la disposizione sulle superfici di fruizione, l’uso del colore, delle immagini, dei margini, dei font e di tutti gli altri accorgimenti grafici, tipografici ed estetici; gli stylesheet, inoltre, verranno creati in modo da soddisfare i requisiti di fruizione relativi ai diversi media su cui avverrà la consultazione e l’interazione con il contenuto (web, mobile web, smartphone, tablet, stampa, altri canali di fruizione crossmediale)
7. test, valutazione e iterazione del processo: il design viene controllato attraverso dei test (come descritto negli altri corsi di orientamento) i cui risultati vengono analizzati e valutati al fine di intervenire in maniera correttiva, procedendo così di iterazione in iterazione fino ad arrivare al design finale

La prossima lezione (24 Maggio 2011) vedrà questi concetti applicati alla creazione di un template per il Content Management System WordPress

Si consiglia di iniziare a leggere la documentazione di WordPress. Ecco qui di seguito alcuni link di interesse:

• WordPress: http://wordpress.org/
• La documentazione: http://codex.wordpress.org/Main_Page
• Come estendere e personalizzare WordPress: http://wordpress.org/extend/
• Il forum della community di sviluppatori e designer che usano WordPress: http://wordpress.org/support/