Course Syllabus
Area di apprendimento
STUDIO DELLE MODALITA' MEDIANTE LE QUALI SI ATTUA LA COMUNICAZIONE
Obiettivi formativi
Conoscenza e comprensione
- Principi base di web design per il mobile
- Responsive web design
- Principi di web visual design applicati ai dispositivi mobile.
- Interazione server-client e protocolli web
- Graphic design per il web
- Principi di usabilità applicati al mobile.
- Sistemi CMS (Content Management System)
Capacità di applicare conoscenza e comprensione
- Capacità avanzate di progettazione web per il mobile
- Capacità avanzate di sviluppo di pagine web responsive
- Applicazione dei principi della User Centered Design alle interfacce mobile
Contenuti sintetici
Il corso si prefigge di accompagnare lo studente nella progettazione di un sito web adatto per device mobile, quali smartphone e tablet, attraverso l’utilizzo delle piu moderne tecnologie di sviluppo per il web. Durante il corso saranno inoltre illustrati principi di user interaction con particolare riferimento alle tecnologie mobile. Saranno inoltre approfonditi gli aspetti di interazione client server anche attraverso l’approfondimento di uno specifico gestore di contenuti web (Wordpress).
Programma esteso
- Responsive web design
- Progettazione User experience per siti web mobile
- HTML 5 e CSS 3 avanzato
- Framework CSS (Bootstrap) per responsive web design
- Utilizzo base di script Javascript
- Architettura client-web server
- Gestori di contenuti web avanzati (CMS; wordpress)
- Adobe Dreamweaver
Prerequisiti
Conoscenze base di sviluppo web (HTML e CSS), Adobe Photoshop o XD
E’ consigliabile aver frequentato il corso di Visual Design e di Informatica e grafica per il Web
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 3 attraverso Adobe Dreamweaver.
Tutto il materiale (dispense delle lezioni ed esempi di codice HTML, CSS e JS) 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 (30 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 15 domande a scelta multipla e/o domande con parole omesse (che richiede l’inserimento della/e parola/e mancante/i all’interno di una frase). Le domande intendono verificare l’acquisizione delle conoscenze relative ai processi di progettazione per il mobile e alcuni aspetti legati alla programmazione 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 con l’integrazione di Bootstrap e Javascript) si intende verificare il livello tecnico di padronanza dei linguaggi di programmazione, HTML e CSS raggiunta per lo sviluppo mobile.
Breve discussione 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.
Le modalità di erogazione dell'esame verranno definite e aggiornate sulla base delle regole di Ateneo per la gestione dell'emergenza COVID-19.
Testi di riferimento
- Responsive web design. Ethan Marcotte. A book Apart ed.
- Bootstrap official documentation -> https://getbootstrap.com/docs/4.6/getting-started/introduction/
- HTML 5 official documentation -> https://www.w3schools.com/html/html5_intro.asp
- CSS 3 official documentation -> https://www.w3schools.com/Css/
Sustainable Development Goals
Learning area
STUDY OF THE MEANS BY WHICH COMMUNICATION TAKES PLACE
Learning objectives
Knowledge and understanding
- Basic principles of mobile web design
- Responsive web design
- Mobile web visual design principles
- Knowledge of the server-client model and web protocols
- Usability principles for mobile devices
- Content Management System (CMS)
Applying knowledge and understanding
- Advanced web design programming for mobile device
- Advanced programming for responsive web pages
- Application o User Centered Design principles for mobile interfaces
Contents
During classes, students will be presented with basic web design principles for mobile devices, such as smartphones and tablets, through the use of the most up-to-date web development technologies.
During the course, principles of user interaction with particular reference to mobile technologies will also be described.
Further, aspects of client server interaction will be presented through the adoption of a specific CMS (Wordpress).
Detailed program
- Responsive web design
- Mobile User experience
- Advanced HTML 5 and CSS 3
- Bootsrap CSS framework
- Basic usage of Javascript code
- Client-web server interaction
- Content management system (CMS; Wordpress)
- Adobe Dreamweaver
Prerequisites
Basic knowledge of HTML and CSS, Adobe Photoshop o XD
Students are advised to have attended the course of Visual Design and Web design
Teaching methods
Teaching methods include the use of lectures, classroom discussions and practical exercises.
Step by step illustration of HTML 5 and CSS 3 coding adopting Adobe Dreamweaver.
All course material (e.g., slides, HTML, CSS and JS code examples) are made available on the e-learning website of the course, so that also non-attending students can use it.
Taking classes is highly reccommended.
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 (30 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 15 multiple choices or filling the missing word questions.
The questions intend to verify the acquisition of knowledge related to the design processes for mobile interfaces, and aspects related to web programming tecniques.
Finally, the group project (HTML / CSS with Bootsrap and Javascript website developed by max 2-3 students) aims at assessing the achieved level for HTML, CSS and programming languages.
Students will be also asked to perform a brief oral presentation of their project.
International students (Erasmus) can take the exam in English
The modality of the exam will be updated in accordance with the rules for COVID-19 emergency.
Textbooks and Reading Materials
- Responsive web design. Ethan Marcotte. A book Apart ed.
- Bootstrap official documentation -> https://getbootstrap.com/docs/4.6/getting-started/introduction/
- HTML 5 official documentation -> https://www.w3schools.com/html/html5_intro.asp
- CSS 3 official documentation -> https://www.w3schools.com/Css/