Didattica

Libri didattici

• “Guida completa ai css” di Gianluca Troiani
• “Progettare siti web standard” di Jeffrey Zeldman

Programma

• Scarica il programma generale del modulo

Dispensa della lezione odierna

• Scarica la dispensa (vers.def.aggiornata al 1/11/09)

Approfondimenti

• http://www.italianwebdesign.it/limportanza-del-wireframe-nel-processo-di-creazione-di-un-sito/
• http://webdesign.html.it/articoli/leggi/3083/progettare-con-i-wireframe/
• http://www.italianwebdesign.it/dal-wireframe-alla-pubblicazione-sviluppo-usabile-di-un-sito-parte-1/
• http://www.italianwebdesign.it/dal-wireframe-alla-pubblicazione-sviluppo-usabile-di-un-sito-parte-2/

Dispensa della lezione odierna

• Scarica la dispensa

Risorse utili

Siti per creare wireframe

• http://hello.hotgloo.com/
• http://iplotz.com/
• http://www.balsamiq.com/products/mockups

Ispirazione webdesign 2010

• http://webtoolkit4.me/2009/08/15/inspiration-web-design-trends-in-2009-and-probably-2010/

Come creare e gestire un sito tramite Dreamweaver

• Impostazione di una cartella e relativi files (index.html e style.css)

Dispensa della lezione odierna

• Scarica la dispensa
• Bigino (cheat sheet) dei tag html
• Bigino (cheat sheet) delle proprietà css

Risorse

• 30-web-designs-with-amazing-attetion-to-detail
• Come collegare un file html e un file css

Argomenti di oggi

• Allineamento del testo
• Liste ordinate e non ordinate
• Le pseudoclassi dei collegamenti (p.15-16)
• Bordi
• Margini, padding, width, height: il box model (p.55)
• Height e overflow
• Allineamento di un’immagine all’interno del testo (float)

Esercitazione

Esercitazione in classe creazione nuova pagina con titoli, paragrafi, link, inserimento immagini e con il box modelesercitazione2

Risorse

Scarica il template base
Layout esempio

• esercitazione3
• 
• Soluzione (zip)

• Formattazione delle tabelle (p.100-104)
• Esempi di formattazione grafica tabelle
• Menu di navigazione (Cap.5 p.183)
• Esempi di menu da Smashing Magazine

• Posizionamento, proprietà position (pag.70/82)
• Posizionamento flottante (pag.82/92)
• Risorse sul float
• Esempio di layout a 3 colonne
• Layout a due e tre colonne (p. 105/182)
• Come mandare all’inferno un lavoro di webdesign

• Esercitazione finale in preparazione dell’esame di fine anno
• Scarica il file in formato .jpg
• Scarica il file in formato .psd

• Esercitazione di fine semestre (votazione sul registro)
• TUTTI I PRESENTI HANNO SUPERATO LA PROVA: complimenti!

• Domande teoriche su dispense e sezioni del libro segnalate
• Ideare la grafica di un sito con tema a piacere e il relativo wireframe
• Creare html e css della homepage e di almeno una pagina interna