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

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

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.

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

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.

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.

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)

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.

Sito del corso: www.liralab.com/igw