Course Syllabus
Area di apprendimento
Studio delle modalita' e degli strumenti mediante i quali si attua la comunicazione
Obiettivi formativi
Conoscenza e comprensione
Lo studente verrà guidato, attraverso il corso, all’adozione di un occhio critico nella progettazione di interfacce per la comunicazione sul web. Da un lato saranno offerti strumenti teorici per la lettura della comunicazione via web, dall’altro verranno offerti attraverso esercitazioni pratiche, gli strumenti tecnici per la creazione di siti web secondo i principi della User Centered Design, che pone l’utente finale (e non il sito web stesso) al centro della progettazione comunicativa.
Capacità di applicare conoscenza e comprensione
- Saper applicare un giudizio critico sulla composizione delle interfacce nel web
- Saper progettare pagine web e interfacce web
- Sviluppo di codice HTML/CSS base
- Utilizzo base del software Adobe Dreamweaver e Adobe Photoshop
Contenuti sintetici
Il corso di Informatica e grafica per il web è mirato alla descrizione dell’intero processo di creazione di un sito web fornendo da un lato una conoscenza specifica degli aspetti teorici e progettuali legati allo sviluppo di un ipertesto fruibile via web (concetti di Usabilità, Interaction Design e User Experience) e dall’altro l’acquisizione di strumenti di sviluppo specifici (Adobe Photoshop, Adobe Dreamweaver).
Programma esteso
- Principi base di usabilità web, esperienza e interazione web (UX / UI)
- Programmazione HTML 5/CSS 2 e CSS 3
- Progettazione e wireframing
- Adobe Dreamweaver
- Adobe Photoshop (grafica per il web)
Prerequisiti
Minima conoscenza dell’utilizzo dei sistemi operativi (creazione file, cartelle, estensioni di file).
Metodi didattici
I metodi didattici includono lezioni frontali, discussioni in aula ed esercitazioni pratiche.
Pratica al computer con illustrazione passo passo del codice HTML 5 e CSS 2 e 3 attraverso Adobe Dreamweaver. Esercizi pratici al pc delle funzionalità di Adobe Photoshop per il web.
Tutto il materiale (dispense delle lezioni ed esempi di codice HTML e CSS) viene reso disponibile sul sito e-learning del corso, perché sia fruibile anche dagli studenti non-frequentanti.
Frequenza consigliata per le lezioni.
Modalità di verifica dell'apprendimento
La verifica dell'apprendimento comprende due revisioni progettuali in itinere che mirano all’impostazione del concept progettuale dell’elaborato. La prima revisione progettuale si colloca a metà del corso, la seconda revisione a fine corso. Le revisioni progettuali sono obbligatorie per i frequentanti e facoltative per gli studenti non frequentanti.
Al termine del corso è prevista una prova scritta (45 minuti; effettuata il giorno dell'appello) e lo sviluppo di un progetto di gruppo (da consegnare solitamente la settimana precedente lo scritto). Sia il progetto che la prova scritta sono obbligatori per tutti gli studenti.
Lo scritto individuale verte sugli argomenti teorici trattati a lezione ed è composto da 12 domande a crocette e 2 domande aperte. Le domande a scelta multipla intendono verificare l’acquisizione delle conoscenze relative ai processi di progettazione, all’utilizzo di Photoshop e alcuni aspetti legati alla programmazione web. Le domande aperte verteranno invece sulle conoscenze acquisite in ambito UX/UI e usabilità delle interfacce web.
Attraverso l’elaborato progettuale di gruppo (gruppi da 2/3 studenti per la creazione di un sito web completo e navigabile in formato HTML/CSS) si intende verificare il livello tecnico di padronanza dei linguaggi di programmazione HTML e CSS e di progettazione grafica con Photoshop raggiunta.
Breve discussione facoltativa dell’elaborato finale in fase di orale.
Gli studenti/le studentesse Erasmus possono contattare il/la docente per concordare la possibilità di studiare su una bibliografia in lingua inglese e/o la possibilità di sostenere l'esame in inglese”
Testi di riferimento
Bibliografia consigliata
Haffly C., Rizzon A. Photoshop per il web design. Apogeo.
Beaird J., Persuati C. Web design per creativi, grafici, sviluppatori. Apogeo.
Informazioni dettagliate circa altro materiale didattico saranno pubblicate sulla relativa pagina del sito e-learning.
Qualsiasi guida di HTML e CSS online
Sustainable Development Goals
Learning area
Study of the means and the instruments by which communication takes place
Learning objectives
Knowledge and understanding
Students will be guided with a critical eye in the design process of web interfaces. On the one hand, theoretical aspects for understanding the main aspects of the communication through the web will be offered, on the other hand technical tools will be presented for developing websites following the main principles of the User Centered Design, which considers the users (and not the website itself) central for the whole design process.
Applying knowledge and understanding
- Adopting a critical judgment when evaluating web interfaces
- Knowing how to design web pages and web interfaces
- Development of basic HTML / CSS code
- Basic knowledge of Adobe Dreamweaver and Adobe Photoshop software
Contents
The course Computer and graphics for the web aims at describing the design process of a web interface (i.e., web sites). Students will be provided with both theoretical knowledge (usability, interaction design and user experience elements) and practical skills, such as the use of specific development tools (Adobe Photoshop, Adobe Dreamweaver) for designing usable web interfaces.
Detailed program
- Elements of web usability, user interaction and user experience (UX / UI)
- Basic HTML 5 / CSS 2 and CSS 3 programming
- Wireframing design
- Adobe Dreamweaver
- Adobe Photoshop (for web design)
Prerequisites
Basic knowledge of operating systems functioning (creation of files, folders, file extensions).
Teaching methods
Teaching methods include lectures, classroom discussions and practical exercises.
Step by step illustration of HTML 5 and CSS 2 and CSS 3 coding adopting Adobe Dreamweaver.
Practical exercises with Adobe Photoshop.
All course material (e.g., slides, HTML and CSS code) is made available on the e-learning website of the course, so that also non-attending students can use it.
Taking classes is highly reccomended.
Assessment methods
Two ongoing project reviews are planned during the course (mid-course and at the end of the course) aimed at supporting the students during the design process of their project. The reviews are mandatory for attending students and optional for non-attending students.
The final exam includes a written test (45 minutes) and the development of a project. Both the project and the written test are mandatory for all students.
The written exam is aimed at ascertaining the effective acquisition of theoretical and practical aspects discussed during class. It is composed of 12 multiple choices and 2 open questions.
The multiple-choice questions intend to verify the acquisition of knowledge related to the design processes, the use of Photoshop for developing web interfaces and aspects related to web programming tecniques. The open questions will instead focus on UX / UI and web usability notions.
Finally, the group project (HTML / CSS basic website developed by max 2-3 students) aims at assessing the achieved level for HTML and CSS programming languages and graphic design with Photoshop.
Optionally, students can also discuss the presented project orally. International students (erasmus) can take the exam in English.
Textbooks and Reading Materials
Suggested bibliography
Haffly C., Rizzon A. Photoshop per il web design. Apogeo.
Beaird J., Persuati C. Web design per creativi, grafici, sviluppatori. Apogeo.
Any HTML & CSS refernce guide