Argomenti del corso Il funzionamento del web, gli ipertesti ed linguaggio del web Cenni di usabilità e accessibilità: il web per esseri umani Progettazione:

Presentazione sul tema: "Argomenti del corso Il funzionamento del web, gli ipertesti ed linguaggio del web Cenni di usabilità e accessibilità: il web per esseri umani Progettazione:"— Transcript della presentazione:

1

2 Argomenti del corso Il funzionamento del web, gli ipertesti ed linguaggio del web Cenni di usabilità e accessibilità: il web per esseri umani Progettazione: Colori, sfondi, caratteri, simboli e metafore visive Progettazione: Wireframe e utilizzo di Balsamiq Architettura del sito: strutturazione dei contenuti, categorie e menù di navigazione Il linguaggio XHTML Lavorare con Adobe Dreamweaver: area di lavoro e impostazione del sito e stesura del codice Fogli di stile 1: i layout di pagina con i CSS, la compatibilità con i browser, la validazione La creazione dell’interfaccia: Integrazione fra XHTML, CSS e grafica Revisioni progettuali ed esercitazioni pratiche in laboratorio

3 Argomenti di laboratorio
Progettazione: Colori, sfondi, caratteri, simboli e metafore visive Lavorare con Adobe Photoshop: progettazione del layout Utilizzo di Adobe Photoshop per il web: uso dei livelli grafica per il web strumenti di taglio ottimizzazione delle immagini formati immagine. Strutturazione dell’interfaccia Revisioni progettuali ed esercitazioni pratiche in laboratorio

4 Modalità d’esame Per accertare le conoscenze acquisite, al termine del corso è prevista la consegna di un elaborato progettuale composto da: Relazione progettuale, in cui saranno descritte  in maniera esaustiva le fasi di design e sviluppo del progetto Wireframe del sito Mokup e file PSD Sito web navigabile realizzato in XHTML + CSS (NO Javascript/Flash/PHP o altri linguaggi) Il progetto verrà realizzato e presentato in gruppi di lavoro di al massimo 2 persone.

5 Revisioni progettuali
Durante la durata del corso sono previste 2 sessioni di revisione progettuali, per guidare lo studente nel percorso di progettazione e sviluppo che rientreranno nella valutazione complessiva dell’elaborato finale. Revisione 1 : 14.30/16.30 mercoledi 30-ott 16.30/18.30 giovedi 31-ott Revisione 2 : 14.30/16.30 mercoledi 11-dic 16.30/18.30 giovedi 12-dic 12.30/14.30 Venerdi 13-dic

6 Brief di progetto L’azienda ACME inc. ha richiesto lo sviluppo di un sito web di presentazione che consenta di presentare la società, descrivendone la storia e le attività principali. Inoltre dovrà essere possibile contattare direttamente l’amministrazione della ACME inc, attraverso un form di contatto o l’invio di una mail. Il sito dovrà avere contenuti testuali strutturati secondo la gerarchi di tag che vedremo a lezione (H1, H2, P) e dovra contenere immagini consone allo stile comunicativo scelto.

7 Brief di progetto 2 Infine la ACME inc. ha sottolineato un esigenza comunicativa particolare, che merita la ricerca di una soluzione a livello di interfaccia che sia vincente e di immediata comprensione. La ACME inc. produce due tipi di prodotti complementari: i prodotti bianchi e i prodotti neri. Gia dalla home page dovrà essere possibile intuire a prima vista che i prodotti bianchi e neri sono due linee prodotte da una stessa azienda, e che la complementarieta dei prodotti bianchi e neri descrive la totalità delle attività di ACME inc.

8 Brief di progetto 3 Per essere sufficiente, il sito web dovra essere composto almeno dalle seguenti pagine: Il sito dovra pertanto presentare le seguenti pagine: home page chi siamo sede o gallery contatti prodotti eventuali pagine accessorie (non obbligatorie)

9 Brief di progetto: obiettivi
I prodotti bianchi e neri sono chiaramente due etichette che potete interpretare liberamente, ad esempio immaginando che ACME inc. produca alimenti per gatti e per cani, oppure abbigliamenti per donna e per uomo. La ACME inc. puo rappresentare anche un ristorante che ad esempio offre due menu differenti per il pranzo o per la sera. L’obiettivo è ridurre questa dicotomia comunicativa in una unica pagina (tendenzialmente la home page) che faccia comprendere al navigatore che la ACME non è solo bianco o solo nero, ma entrambe le realtà. Da questa duplicità dovrebbe scaturire il sistema di navigazione del sito e tutta l’architettura comunicativa e visiva.

10 Sito del corso: www.liralab.com/igw

11