Argomenti del corso
• Parte 1: Introduzione/ usabilita/user centered design
• Il funzionamento del web, gli ipertesti ed linguaggio del web
• Cenni di usabilità e accessibilità: il web per esseri umani
• Parte 2: Progettazione
• Progettazione: Colori, sfondi, caratteri, simboli e metafore visive
• Progettazione: Wireframe Architettura del sito: strutturazione dei contenuti,
categorie e menù di navigazione
• Parte 3: struttura del sito: HTML
• Il linguaggio XHTML
• Lavorare con Adobe Dreamweaver: area di lavoro e impostazione del sito e stesura
del codice
• Parte 4: visual del sito: CSS
• Fogli di stile : i layout di pagina con i CSS, la compatibilità con i browser, la validazione
• La creazione dell’interfaccia: Integrazione fra XHTML, CSS e grafica
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
• Trasformazione dell’interfaccia grafica in sito web
Revisioni progettuali
• Sono previste due sessioni di revisioni progettuali:
• 1) Revisione progettuale obbligatoria a inizio novembre (vi
comunicheremo le date esatte, indicativamente a inizio novembre)
• 2) Revisione progettuale facoltativa su richiesta a fine corso (fino ad
esaurimento posti) per valutare problemi tecnici o progettuali
Revisioni progettuali - mail
• Altre richieste di aiuto / verifica codice
possono essere inoltrate tramite mail, ma
solo se prima avete provato
autonomamente a risolvere il problema e
siete sull’orlo della disperazione
• Revisioni a ricevimento (su appuntamento
via mail) in cui dovrete portare codice e file
PSD
Modalità d’esame
• Per accertare le conoscenze acquisite, al termine del corso è previsto uno
scritto individuale con domande a scelta multipla e una domanda teorica
aperta volto a verificare le conoscenze teoriche e tecniche acquisite
durante il corso.
• E’ prevista inoltre la consegna di un elaborato progettuale composto da:
• Wireframe del sito
• Mockup 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 composti da 2 o
al massimo 3 persone.
Modalità d’esame
• Il voto finale sarà calcolato attraverso la media delle valutazioni
ottenute nella prova scritta individuale e dal voto relativo al progetto
di gruppo.
•
Ad esempio, lo studente Mario Rossi ha ottenuto una valutazione di
23 allo scritto, mentre il progetto di gruppo ha ottenuto una
valutazione di 25. Il voto finale sara (23+25)/2 = 24. Il compagno di
gruppo di Mario ha invece ottenuto 29 allo scritto, quindi il suo voto
finale sarà dato da (29+23)/2 = 26.
Brief di progetto
• Il progetto da sviluppare durante il corso è rappresentato dallo
sviluppo di un sito web di presentazione del gruppo stesso. L’obiettivo
è quello di comunicare sia la natura unitaria del gruppo di lavoro,
trovando un’idea originale che faccia percepire che siete 2/3 studenti
che per sorte o per interesse collaborano ad un progetto d’esame
comune, e allo stesso tempo presentando le singole persone che
compongono questo gruppo.
• l’obiettivo è che un navigatore capisca al volo che il gruppo di lavoro
è composto da due/tre persone distinte la cui unione ha dato vita ad
un team di lavoro unitario.
Brief di progetto
•
•
•
•
•
•
•
Il sito dovra presentare le seguenti pagine:
home page del gruppo
chi siamo o pagine dei membri del gruppo di lavoro
gallery
contatti e social page
eventuali pagine accessorie (non obbligatorie)
Il progetto dovrà essere consegnato funzionante e strutturato secondo
quanto visto a lezione.
• La consegna dovra avvenire tramite we-transfer del pacchetto di file
oppure attraverso lo sharing di cartella dropbox, oppure tramite una
cartella Google Drive condivisa.
Contatti
• Dr.Gabbiadini
[email protected]
[email protected]
• Dott.ssa Quarti
[email protected]
[email protected]
Sito del corso: www.liralab.com/igw