web design i - Accademia di Belle Arti di Carrara

Dipartimento di PROGETTAZIONE E ARTI APPLICATE
Scuola di Nuove Tecnologie dell’Arte
AA. 2007-2008
WEB DESIGN I
Prof. Massimo Cittadini
Studenti iscritti al 1° anno
2° semestre
Corso di Diploma Triennale in: Arti Multimediali (equipollente a Laurea di I° livello)
Insegnamento (4 CFA)(40 ore)
Titolo
WEB DESIGN I
L'avvento dei “new media” in ogni campo della produzione culturale ha
imposto delle trasformazioni a tutti i livelli di progettualita', artistica,
sociale, politica, ecc. Il world wide web, in particolare, in poco piu' di
dieci anni di vita ha trasformato radicalmente il rapporto tra umanita' e
conoscenza, tra comunicazione e scienza.
La progettazione delle interfacce per il web ha seguito la proliferazione
di linguaggi, tecniche e strumenti a partire da uso e abuso delle prime
tag html, progettate per formattare “come in word” le pagine ipertestuali
e per strutturarne il contenuto, per arrivare alla compresenza di una
moltitudine di funzioni, stili grafici, usabilita' e accessibilita' anche
estremamente differenziate, quali presentano le pagine che oggi
troviamo pubblicate online.
In questo panorama molto variegato il corso si propone come un work
in progress orientato alla progettazione di interfacce con aspetti
multimediali di base. Inizialmente vengono chiariti gli aspetti relativi ai
linguaggi e protocolli di trasmissione dati, all'uso di immagini, statiche e
animate, e suoni, le tabelle, cenni di javascript e xml, per arrivare ai
principi della strutturazione delle pagine web: la griglia, le dimensioni, la
forma e i colori degli elementi di interfaccia, le tag html lette dai
Argomenti e programma
browser, i fogli di stile css, il rendering dei browser, la grafica vettoriale
delle lezioni
e gli oggetti flash.
1) Il funzionamento e l'estetica multimediale di internet e del web.
(esercitazione 1_0) (home html, css)
2) Il campo di attenzione e i percorsi di lettura. Testo e immagine.
(esercitazione 1_1) (home html, css)
3) La navigazione e l'ergonomia: progettazione e organizzazione dei
contenuti. Prime tag e sintassi html e (X)html. (esercitazione 1_2)
(scheda studente, html, text, pix)
4) Layout e pianificazione delle interfacce. Css, aree del layout e gruppi
visivi. La posizione degli elementi strutturali. (esercitazione 1_3) (facce
thumbs, html, tabelle, pix, css)
5) Le funzioni della grafica, l'accessibilità e l'architettura delle
informazioni. Uso dei fogli di stile css alternativi. (esercitazione 1_4)
(logo thumbs, html, tabelle, text, pix, css)
6) Visibilità e studio dei colori: la selezione della palette. Utilizzo delle
font. Cenni di javascript. Inserimento di oggetti flash. (esercitaz. 1_5)
(palette thumbs, text, pix, css alternativi)
7) Popup, menu e pulsanti, interfacce statiche e animate per siti statici e
dinamici. Cenni di xml e php. (esercitazione 1_6) (pix, tabelle, popup)
8) Banner ed elementi vari d'interfaccia. Suono. Moduli e tabelle.
(esercitazione 1_7) (liste, suono, xml, inserimento oggetti flash)
9) Web 2.0 e progettazione basata sull'esperienza utente.
(esercitazione 1_8) (txt, pix, sitemap, help, download e upload)
10) Validazione e pubblicazione via ftp o http.
Verranno inoltre presentati i principali software usati per la creazione e
l'editing delle pagine HTML, commerciali e OpenSource o freeware,
(Dreamweaver, Flash, FirstPage, WebBuilder, NVU, ...) e dopo le prime
10 lezioni, e relative esercitazioni che prevedono la creazione di pagine
html, la formattazione tramite css, e l'inserimento di elementi Flash nelle
pagine, ogni studente sara' invitato a dare un titolo al proprio progetto di
esame e a dotarsi di un quaderno in cui riportare tutto il materiale
progettato da realizzare sotto forma di disegno, schizzo, diagramma,
scritto, ecc.
Nelle ore di lezione restanti verranno affrontate le problematiche relative
a:
-1_1 Flash e il disegno vettoriale,
-1_2 all'uso di stage e timeline,
-1_3 all'uso dei simboli e della libreria; (esercitazione 2_1)
-2_1 oggetti grafici e pulsanti,
-2_2 all'animazione con le keyframes (esercitazione 2_2);
-3_1 ai vari tipi di testo, statico, dinamico, di input, (esercitazione 2_3)
-3_2 alle bitmap; (esercitazione 2_4)
-4_1 alle clip filmato, (esercitazione 2_5)
-4_2 alle trasformazioni con i filtri; (esercitazione 2_6)
-5_1 al video, incorporato e in streaming; (esercitazione 2_7)
-6_1 all'audio, evento e streaming; (esercitazione 2_8)
-7_1 alle basi di programmazione actionscript; (esercitazione 2_9)
-8_1 all'uso dei componenti; al debugging e all'ottimizzazione;
-9_1 alla pubblicazione dei file sul server.
Il programma prevede inizialmente la creazione di una comunita'
virtuale dei partecipanti al corso tramite l’utilizzo di un gruppo su
googlegroups. Gli studenti dovranno compilare una scheda anagrafica
completa di esperienze formative e lavorative effettuate, interessi
generali e specifici nel campo artistico, indirizzo mail, ecc, che varra'
come “passaporto” per poter partecipare alle attivita' in corso e usufruire
pienamente della didattica e delle interazioni richieste.
Dato il carattere progettuale del corso ogni abitante/studente oltre alla
scheda anagrafica e al quaderno degli schizzi e appunti, dovra'
mantenere e aggiornare un calendario individuale, cartaceo e/o digitale,
anche via web, che servira' anche da “diario di bordo” delle esercitazioni
di laboratorio e del progetto specifico da sviluppare nella durata del
corso. Dovra' inoltre, per quanto possibile, contribuire alla condivisione
di materiale audio, video, o ipertestuale, al fine della creazione di un
database di riferimento da utilizzare anche nei corsi successivi.
Le lezioni sono divise per un primo ciclo in un'ora iniziale di panoramica
teorica di base e analisi del contesto, uso della terminologia corretta nei
vari campi applicativi, visione di documenti storici e attuali, sia online
che offline, e un'ora direttamente sui programmi, al fine di fornire le
competenze necessarie ad affrontare in maniera consapevole le
difficolta' nella realizzazione dell'idea iniziale, difficolta' sia concettuali
che tecniche che inevitabilmente si andranno ad incontrare, seguite
infine, anche in base al numero di studenti partecipanti, da un secondo
ciclo di lezioni con un'ora di teoria e pratica sui programmi e un'ora di
discussioni o revisioni con spiegazioni collettive.
Obiettivi formativi
Il corso di WD I si propone di formare web designers in grado di
confrontarsi con la cultura contemporanea della rete e di saper gestire
progetti di base tramite l'uso accorto delle tecniche e dei linguaggi
disponibili per la creazione di siti multimediali semplici usando (x)html,
css e flash.
(E' presente una bibliografia di testi consigliati, e anche una linkografia
di base, ma verra' usato un account comune su un servizio di
bookmarking condiviso (vd http://del.icio.us/WebDesignCarrara) che
funzionera' come punto di aggregazione e riferimento per tutti i link che
verranno aggiunti durante il corso.
Manuali e guide consigliati su HTML, CSS, Flash MX, e ActionScript2.0
(opzionali):
(global value / difficulty)
>ActionScript 2.0 per Macromedia Flash 8. Documentazione ufficiale,
Jen deHaan, Peter deHaan, ed. Mondadori Informatica, 2006, Euro
55,00
****
****
Testi per l’esame finale >Flash MX trucchi e segreti, S. Bhangal, Editore O'Reilly/Tecniche
Nuove 2005, Euro 34,90
****
****
>Dizionario di Macromedia Flash MX 2004. ActionScript 2.0,
Macromedia Press, ed. Mondadori Informatica, 2004, Euro 35,00
*****
***
>Macromedia Flash MX 2004 ActionScript. Corso ufficiale,
Derek Franklin e Jobe Makar, ed. Mondadori Informatica, 2004, Euro
50,00
*****
***
>Imparare Flash MX ActionScript in 24 ore, G. Rosenzweig, ed. Hops,
2003, Euro 29,00
>Flash MX Advanced per Windows e Macintosh, R. Chun, ed. Pearson
Education Italia, 2002, Euro 35,90
***
***
>Programmare Flash 5 con ActionScript, G. Rosenzweig, ed.
Mondadori Informatica, !30,00
*****
***
Tutti i manuali sono in italiano e sono ordinati per data di pubblicazione.
Altri testi consigliati:
DON'TMAKE ME THINK, S. Krug, Ed. Hops, 33,05 euro
HTML, XHTML E CSS, E. Castro, ed.Hops, 34,90 euro
CASCADING STYLE SHEETS, E. Meyer, ed. Hops, 39,90 euro
PRINCIPI DI WEB DESIGN, J. Sklar, Ed.Apogeo, 39 euro
DALLA CARTA AL WEB, J. Zeldman, Ed. Hops, 35,12 euro
HOMEPAGE USABILITY, J. Nielsen e M. Tahir, Ed. Apogeo, 45 euro
WEB NAVIGATION, J. Fleming, Edit. Hops, 25,31 euro
NET.ART, Deseriis, Marano, Shake ediz., 2003,
WEB DESIGN ARTE E SCIENZA, J. Veen, Ed. Apogeo, 35,64 euro
HACKTIVISM, Di Corinto Arturo, Tozzi Tommaso, ManifestoLibri, 2002
CAOS E CIBERCULTURA, Leary Timothy, Apogeo, 1994,
L’ETICA HACKER, Himanen Pekka, Feltrinelli, 2001,
TAZ, Bey Hakim, Shake Edizioni Underground, 1993,
NO COPYRIGHT, Scelsi, Raf Valvola, Shake Ediz. , 1994,
CODICI E SEGRETI , Singh, Simon, Rizzoli
2000?
HACKERS, Levy, Steven, Shake Ediz. Underground 1994
GLI STRUMENTI DEL COMUNICARE, McLuhan, Marshall, Il
Saggiatore, Milano 1995
L'ARTE DELL'INGANNO, Mitnick, Kevin, Feltrinelli, 2003
ARTE E TECNOLOGIE, Capucci, PierLuigi, Ediz. dell'ortica, 1996
L'ARTE CHE NON C'E', Cremaschi, M.Cristina, Ediz. Dell'ortica, 1997
SILENZIO, Cage, John, Feltrinelli, 1971
ARTE COME MESTIERE, Munari, Bruno, Laterza, 1975
ARTISTA E DESIGNER, Munari, Bruno, Laterza, 1971
DISOBBEDIENZA CIVILE ELETTRONICA, Critical Art Ensemble,
Castelvecchi, 1998
SABOTAGGIO ELETTRONICO, CAE, Castelvecchi, 1995
REALTA' DEL VIRTUALE, Capucci, PierLuigi, Bologna, Clueb, 1993
ARTE ELETTRONICA, Bordini, Silvia, Giunti ed.
altri titoli verranno forniti durante il corso.
Materiale in formato PDF,WAV, JPG,FLA:
linkografia di base: http://del.icio.us/massimocontrasto
NOTE:Il docente può essere contattato all'indirizzo email:
cittadini(chiocciola)accademiacarrara.it
Esercitazione per
l’esame
Ogni studente, per poter sostenere l'esame, dovra' poter dimostrare di
aver sostenuto almeno quattro esercitazioni del primo blocco , cinque
esercitazioni del secondo blocco, e tre revisioni controfirmate,
comprovanti l'avanzamento del progetto d'esame, dalla fase dell'idea
iniziale alla costruzione di tutti gli elementi necessari alla messa in
opera. Dovranno anche essere presentati i vari materiali raccolti nel
“calendario individuale”.
L'esame sara' basato, oltre che sul colloquio orale, sulla valutazione
della realizzazione, nella forma di sito web, offline o online, dei progetti
Modalità di svolgimento individuali o di gruppo. Anche nel caso di un progetto online viene
dell’esame
comunque richiesto un supporto digitale etichettato con nome cognome,
anno accademico e sessione d’esame, titolo del lavoro.
Orario delle lezioni
Web Design
1
4
40
crediti
ore
Aula
B
Ven
APRILE
MAGGIO
GIUGNO
14.0018.00
6, 20, 27
4, 11, 18, 25
1, 8, 15