Vai al contenuto principale
Logo Università
Logo di Corso di laurea in Informatica

Dipartimento di Informatica

Corso di laurea in Informatica

Seguici su

Logo di Corso di laurea in Informatica
Oggetto:
Oggetto:

Interazione Uomo Macchina e Tecnologie Web

Oggetto:

Human-computer Interaction and Web Technologies

Oggetto:

Anno accademico 2023/2024

Codice attività didattica
MFN0608
Docenti
Cristina Gena (Docente)
Fabio Ciravegna (Docente)
Corso di studio
[008707] Laurea in Informatica
Anno
3° anno
Periodo
Primo semestre
Tipologia
Caratterizzante
Crediti/Valenza
12 CFU - Numero di ore - Number of hours: 48 (in aula) + 60 (in laboratorio)
SSD attività didattica
INF/01 - informatica
Erogazione
Tradizionale
Lingua
Italiano
Frequenza
Facoltativa
Tipologia esame
Scritto più orale obbligatorio
Tipologia unità didattica
corso
Prerequisiti

Si richiede una buona conoscenza delle basi di dati, dei sistemi operativi, dell'analisi e della progettazione object-oriented e dei fondamenti della programmazione distribuita. Gli studenti e le studentesse devono inoltre avere la capacità di scrivere, compilare e verificare la correttezza di programmi in Java.
Insegnamenti propedeutici (forniscono le competenze attese in ingresso): Basi di Dati, Sistemi Operativi, Programmazione II, Algoritmi e strutture dati, Programmazione III.
A good knowledge of data base systems, operating systems, object-oriented analysis and design, foundations of distributed programming is required. Moreover the student must be able to write, compile and verify the correctness of Java programmess.
Preparatory courses (providing the expected entry skills): Basi di Dati, Sistemi Operativi, Programmazione II, Algoritmi e strutture dati, Programmazione III. .

Oggetto:

Sommario insegnamento

Oggetto:

Avvisi

DSA o Disabilità: Sostegno e Accoglienza in UniTO e supporto in sede di Esame
Oggetto:

Obiettivi formativi

Questo insegnamento concorre agli obiettivi formativi specifici dell'ambito delle conoscenze di approfondimento del Corso di Laurea in Informatica (L31) e fa parte dell’area Informatica caratterizzante.  È mirato a fornire alle studentesse e agli studenti solide conoscenze di base sull'interazione uomo-macchina e sulle metodologie per la progettazione e lo sviluppo di applicazioni web a tre livelli. Nello specifico, l'insegnamento si pone un duplice obiettivo: da una parte, fornire la conoscenza di base necessaria per il disegno corretto di interazioni persona-macchina, che sta alla base della progettazione di applicazioni di ogni genere (web e non, mobili, etc.). Più precisamente, per quanto riguarda l'interazione persona-macchina (Human Computer Interaction, HCI), verranno acquisite competenze sia teoriche sia pratiche nel disegno corretto di interazioni, con specifico riferimento alla progettazione user-centered. Una parte dell'insegnamento sarà poi dedicata alla visualizzazione di dati di grandi dimensioni. Dall’altra, fornire la conoscenza di base necessaria per la progettazione e lo sviluppo di applicazioni Web interattive e responsive, e caratterizzate da una logica applicativa mediamente complessa.

Nella parte dell’insegnamento  dedicata all’HCI verranno affrontate le tematiche fondamentali per una progettazione web responsive che sia usabile, accessibile e centrata sull’utente, non dimenticando il  processo di user experience, e la sua  applicazione in scenari reali. Questi ultimi riguarderanno lo sviluppo di interfacce per il responsive  web, per passare poi ad esaminare le principali metodologie di valutazione predittiva, formativa, e sommativa. Verranno di conseguenza affrontati gli approcci orientati al miglioramento della user experience in un’ottica di design centrato sull’utente.

Per quanto riguarda la visualizzazione di dati verranno affrontate le principali basi teoriche dell’interazione con grandi quantità di dati e verranno poi introdotte le principali tecniche di analisi in Python, usando la libreria Pandas e la visualizzazione usando le librerie MatplotLib e Seaborn.

Per quanto riguarda gli aspetti architetturali e tecnologici, nell'insegnamento verranno acquisite competenze teoriche e pratiche su: (i) lo sviluppo di pagine web statiche e dinamiche responsive e di Single Page Application; (ii) la programmazione lato server. Inoltre, l'insegnamento fornirà conoscenza relativa alla rappresentazione di dati con JSON/XML, data l'importanza per l'interoperabilità tra applicazioni software.

In compliance with the training objectives of the Computer Science Bachelor Program (Corso di Laurea in Informatica (L31)), this course is part of the area “Informatica caratterizzante” and aims at providing students with robust basic knowledge about Human-Computer Interaction and methodologies for the design and development of three-tier Web-based and mobile applications. In detail, this module has two main objectives: the former is that of providing students with the knowledge needed for a correct design of human-computer interaction, which underlies the design of all kinds of applications (web-based, mobile ones, etc.). The latter objective is to provide students with the basic knowledge they need to design and develop interactive, Web-based applications that can be accessed from desktop and mobile terminals (such as smartphones) and have medium-complexity business logic.

Concerning the human-machine interaction, the fundamental issues regarding usability, accessibility, user-centered web design, and user experience processes will be addressed, as well as related principles, guidelines, and their application in real scenarios. The latter will concern the development of interfaces for responsive web that are usable and accessible, and their main predictive, formative, and summative evaluation methodologies. Approaches aimed at improving the user experience will therefore be addressed from a user-centered design perspective.

Concernig data analysis and visualisation, we will cover the main theoretical basis of visualisation of analysis and interaction with large scale data and the main analysis techniques in Python (using Pandas) and visualisation techniques (using MatplotLib and Seaborn). 

Concerning the architectural and technological aspects, the course covers both theoretically and practically: (i) the development of static and dynamic responsive web pages, and of Single Page Applications; (ii) server-side programming. Moreover, the course presents data representation and interpretation with JSON/XML, given its importance for the interoperability of software applications.

Oggetto:

Risultati dell'apprendimento attesi

CONOSCENZA E CAPACITÀ DI COMPRENSIONE. Acquisizione di conoscenze teoriche e applicative relative a:

  • progettazione centrata sull’utente e il processo di User Experience - UX (personas, rapid prototyping, ecc.)
  • valutazioni euristiche e testing  di usabilità per il responsive  web
  • analisi e visualizzazione di grandi quantità di dati
  • progettazione e organizzazione dell’architettura dell’informazione
  • valutazione dell’accessibilità web secondo le linee guida internazionali e nazionali
  • architetture di riferimento per lo sviluppo di applicazioni web 
  • modelli di interazione client/server e client/client
  • modelli software più usati per gestire applicazioni interattive di media complessità
  • tecnologie per l’implementazione delle applicazioni (back-end e interfacce utente web)

CAPACITÀ DI APPLICARE CONOSCENZA E COMPRENSIONE. Acquisizione della capacità di applicare le conoscenze teoriche relative alle tematiche di cui sopra.

AUTONOMIA DI GIUDIZIO. Acquisizione di consapevole autonomia di giudizio con riferimento alla progettazione e realizzazione di applicazioni web e mobili con interfacce utente accessibili.

ABILITÀ COMUNICATIVE. Acquisizione di competenze e strumenti per la comunicazione nella forma scritta e orale, in lingua italiana, unitamente all'utilizzo di linguaggi formali.

CAPACITÀ DI APPRENDIMENTO. Acquisizione di capacità autonome di apprendimento e di
autovalutazione della propria preparazione, atte ad intraprendere gli studi successivi con un alto
grado di autonomia.

 KNOWLEDGE AND UNDERSTANDING. Acquisition of theoretical and applicative skills concerning:

  • user-centered design and the User Experience - UX process (personas, rapid prototyping, etc.)
  • usability heuristics and usability testing for responsive web
  • analysis and visualisation of large scale data
  • design and organization of information architectures
  • evaluation of websites accessibility according to national and international guidelines
  • reference architectures to develop web-based and mobile applications
  • largely applied software models to manage interactive applications having medium complexity
  • current technologies for the implementation of software applications (back-and and web-based or mobile user interfaces)

APPLYING KNOWLEDGE AND UNDERSTANDING. Acquisition of the ability to apply the above-listed theoretical and applicative skills.

MAKING JUDGMENTS. Acquisition of aware judgment autonomy concerning the design and implementation of web-based and mobile software applications with accessible user interfaces.

COMMUNICATION SKILLS. Acquisition of oral and written communication skills and expertise, in the Italian language, as well as the ability to use formal languages.

LEARNING SKILLS. Acquisition of independent learning skills and the ability to self-evaluation of one's own preparation, apt to undertake further studies with a high degree of autonomy.

Oggetto:

Programma

PARTE 1A: HUMAN-COMPUTER INTERACTION (HCI)

  • I concetti e ai principi dell’Interaction Design e della User Experience (UX)
  • Il processo di UX e il rapid prototyping
  • Le linee guida di usabilità per il responsive web
  • Principi di architettura dell’informazione
  • Principi, linee guida e casi di studio di visualizzazione dell’informazione
  • Le linee guida di accessibilità internazionali e nazionali: le WCAG, le linee guida AGID
  • Il design centrato sull’utente e le metodologie di valutazione: la fase di valutazione preliminare, la fase di valutazione formativa e la fase sommativa.
  • La valutazione dell’accessibilità, sia oggettiva che soggettiva

PARTE 1B - ANALISI E VISUALIZZAZIONE DI GRANDI QUANTITÀ DI DATI

  • Il linguaggio Python: introduzione al linguaggio 
  • Data Analytics in Python and Pandas
  • Data visualisation in Python (MatplotLib, Seaborn)

PARTE 2 - APPLICAZIONI WEB E TECNOLOGIE DI SUPPORTO

  • Architetture delle applicazioni Web: Web browser e Web server
  • Il Pattern MVC o MVVM per le applicazioni Web - Progettazione e sviluppo di applicazioni Web a 3 livelli basate su MVC o MVVM:
    • Il primo livello (client dell'applicazione): HTML5, CSS, scripting lato client (JavaScript e AJAX/Axios). Raccolta dati con HTML form
    • Il secondo livello: il viewModel (in MVVM) o il Controller (in MVC)
    • Il terzo livello (logica applicativa): NodeJS, Servlet Java
    • Il quarto livello (livello del modello dei dati): accesso a database relazionali via JDBC e/o non relazionali (es. Mongoose). Rappresentazione e gestione di informazioni con JSON e XML
  • Framework le applicazioni web (per esempio Vue.js o React)

PART 1A: HUMAN-COMPUTER INTERACTION (HCI)

  • Concepts and principles of Interaction Design and User Experience (UX)
  • UX processes and rapid prototyping
  • Responsive web usability guidelines
  • Principles of information architecture
  • Principles and case study on information visualization 
  • International and national accessibility guidelines: the WCAGs, the AGID guidelines
  • User-centered design and evaluation methodologies: the preliminary evaluation phase, the formative evaluation phase, and the summative phase.
  • The evaluation of accessibility, both objective and subjective

PART 1B - ANALYSIS AND VISUALISATION OF LARGE SCALE DATA

  • Python: introduction to the language
  • Data Analytics in Python and Pandas
  • Data visualisation in Python (MatplotLib, Seaborn)

PART 2 - WEB APPLICATIO AND SUPPORTING TECHNOLOGIES

  • Web architectures: clients and servers
  • The MVC or MVVM pattern for Web applications - Design and developments of applications organised in 3 levels using the pattern either MVC or MVVM:
    • The first level (the client) : HTML5, CSS, client side scripting (JavaScript and AJAX/Axios). Data collection using Web forms
    • The second level: the viewModel (in MVVM) or the Controller (in MVC)
    • The third level (application logics): NodeJS, Servlet Java
    • The fourth level (data models and repositories): accessing relational databases via JDBC and/or non-relational databases (es. MongoDB via Mongoose). Information representation and management using JSON and XML
  • A Web Application Framework (e.g. Vue.js or React)
Oggetto:

Modalità di insegnamento

L’insegnamento è diviso in una parte di teoria e una sperimentale.

  • Per la parte di teoria sono previste lezioni integrate da casi di studio e da esercitazioni volte ad illustrare l’applicazione pratica dei concetti appena studiati. Le esercitazioni, strutturate come sequenze di esercizi specifici, permettono di mettere in pratica i concetti e le metodologie illustrate nelle lezioni teoriche su esempi concreti. I temi introdotti durante le esercitazioni corredano e integrano le conoscenze derivanti dalla parte teorica (knowledge and understanding) e permettono alle studentesse e agli studenti di familiarizzare con le metodologie e tecnologie introdotte, anche investigando soluzioni alternative (applying knowledge and understanding). 

  • Per la parte sperimentale, lo sviluppo del progetto SW, che si effettua in piccoli gruppi (composti da al più 3 persone), permette di consolidare le conoscenze teoriche e il lavoro in team in un caso realistico di media complessità. Il progetto SW, descritto nel seguito, va oltre la complessità del tipico esercizio proposto nelle esercitazioni. La progettazione e lo sviluppo del progetto SW permettono di allenare l'autonomia di giudizio (making judgments) nella scelta delle implentazioni da realizzare, analizzando in forma critica le informazioni acquisite nella parte teorica dell'insegnamento. La preparazione del progetto SW è anche volta a stimolare la capacità comunicativa degli studenti e delle studentesse che sono invitati/e a illustrare verbalmente le soluzioni adottate (communication skills).

Le attività pratiche sono svolte a calcolatore, utilizzando ambienti di sviluppo professionali. Si consiglia caldamente la frequenza costante alle lezioni teoriche e alle esercitazioni. È inoltre fondamentale iscriversi alle pagine dell'insegnamento su I-Learn (Interazione Uomo Macchina; Interazione Uomo Macchina e Tecnologie Web - parte tecnologica), in cui sono messi a disposizione il materiale didattico di supporto e i riferimenti a materiale pubblico utilizzabile per approfondire le proprie conoscenze in modo autonomo (learning skills).

Nota Bene: vista la continua evoluzione della materia, una parte considerevole del materiale didattico sarà in inglese. 

La comunicazione con le studentesse e gli studenti avviene attraverso il forum dell'insegnamento su I-Learn e via email agli account istituzionali dei docenti.

The course is divided into a theory part and an experimental part.

  • The theory part includes lectures supplemented by case studies and experimental lessons designed to illustrate the practical application of the concepts just studied. The experimental lessons, structured as sequences of specific tasks, allow the concepts and methodologies presented in the theory lecture to be put into practice on concrete examples. The topics introduced during the experimental lessons accompany and complement the knowledge derived from the theoretical part (knowledge and understanding) and allow students to familiarize themselves with the methodologies and technologies introduced, including the investigation of alternative solutions (applying knowledge and understanding).
  • For the experimental part, the development of the SW project in small groups (consisting of at most 3 people) allows the consolidation of theoretical knowledge and teamwork in a realistic case of medium complexity. The SW project, described below, goes beyond the complexity of the typical exercise proposed in the experimental lessons. The design and development of the SW project allow training in the autonomy of judgment (making judgments) in choosing the solutions to be implemented, and critically analyzing the information acquired in the theoretical part of the course. The preparation of the SW project is also aimed at stimulating the communication skills of the students, who are invited to verbally illustrate the solutions adopted (communication skills).

The experimental activities are carried out computer-based, using professional development environments. We recommend attending all the lessons in this course. It is also important to enroll in the online courses on I-Learn (Human-Machine Interaction; Human-Machine Interaction and Web Technologies - technology part), which provide teaching materials and references to public materials that can be used to deepen one's knowledge independently (learning skills).

A large part of the didactic material will be in English. 

Communication with students takes place through the course forum on I-Learn and via email to the lecturers' institutional accounts.

Oggetto:

Modalità di verifica dell'apprendimento

L'esame è composto da una VERIFICA DI LABORATORIO che prevede la discussione dei  progetti di laboratorio svolti durante l'insegnamento. I progetti si articola in tre parti:

  1. prototipo Figma, consegnato insieme ad una presentazione delle scelte progettuali in termini di UX, le schede di Personas e Scenari, e i report delle valutazioni di usabilità;
  2. applicazione web a quattro livelli composta dal backend server e da un client web realizzato come Single Page Application; l’applicazione include una pagina web separata, realizzata secondo le linee guida di accessibilità presentate nell’insegnamento;
  3. Un web server scritto in Python connesso con (2) che permette la visualizzazione di una grande quantità di dati.

Il voto finale sarà determinato dalla somma dei risultati di ciascuna parte 1-3 diviso per tre.  La discussione deve essere effettuata con tutti i membri del gruppo presenti. Le domande verteranno principalmente sul prototipo sviluppato ma comprenderà anche domande sugli argomenti insegnati in generale. 

Il voto è un numero intero compreso tra 0 e 30 (31 vale per la lode), si considerano sufficienti i voti ≥18.  NB: si richiede di consegnare i progetti di laboratorio prima dell'esame in modo da controllare eventuali fenomeni di colusione e plagio. 

Quando si supera la prova, è necessario registrare il voto finale entro i limiti imposti dal Regolamento di Ateneo.

 

The examination consists of a SW PROJECT DISCUSSION. This test is designed to check the acquired knowledge (applying knowledge and understanding), as well as communication skills, the autonomy of judgment, and learning skills. The SW project consists of three parts:

    1. a Figma prototype, delivered along with a presentation of the design choices in terms of UX and 3 Personas tabs;
    2. a four-tier web-based application consisting of the server backend and a web client built as a Single Page Application; the application includes a separate web page built according to the accessibility guidelines presented in the teaching;
    3. a web server developed in Python connected with (2) and able to enable data visualisation and analysis over large scale.

The three parts are discussed together by the lab group. The discussion must be done with all group members present. The discussion will mainly concern the project but will cover also the general topics covered in the course. The mark for each part is an integer number between 0 and 30 (31 applies to honors), grades ≥18 are considered sufficient. The mark is computed by adding the individual marks of each part 1-3 and then dividing by 3.

NB: It is required that the lab projects are handed in before the exam in order to check any cases of plagiarism or unauthorised reuse of third party libraries.

Note: after the exam, the grades must be registered with the University within the required timeframe.

Oggetto:

Attività di supporto

Durante il periodo dell'insegnamento, e dopo, saranno svolte attività di tutorato su richiesta. Le studentesse e gli studenti potranno chiedere via email appuntamento ai docenti e/o ai tutor per la revisione di argomenti presentati in aula e per il supporto allo svolgimento degli esercizi e del progetto SW. Le attività potranno essere svolte in presenza oppure in modalità online su una piattaforma di videoconferenza come WebEx. Gli indirizzi di posta elettronica istituzionale dei tutor sono pubblicati nella pagina dell'insegnamento su I-Learn.

 

During the teaching period, and afterward, tutoring activities will be carried on demand: the students can request by email appointments with lecturers and/or tutors for reviewing topics presented in the classroom and for support in carrying out exercises and the SW project. The activities may be conducted in person or online on a videoconferencing platform such as WebEx. The institutional e-mail addresses of the tutors are posted on the course page on I-Learn.

Testi consigliati e bibliografia



Oggetto:
Libro
Titolo:  
Per la PARTE 1: Facile da usare
Anno pubblicazione:  
2010
Editore:  
Apogeo
Autore:  
Polillo, R.
ISBN  
Permalink:  
Obbligatorio:  
No


Oggetto:
Libro
Titolo:  
Per la PARTE 2: Programmare in Java 11/Ed. - MyLab
Anno pubblicazione:  
2020
Editore:  
Pearson
Autore:  
Paul J. Deitel - Harvey M. Deitel
ISBN  
Permalink:  
Obbligatorio:  
No
Oggetto:

PARTE 1 A:

  • https://www.agid.gov.it/it/design-servizi/accessibilita/linee-guida-accessibilita-pa
  • https://www.w3schools.com/accessibility/index.php

PARTE 1B:

PARTE 1C:

ALTRI RIFERIMENTI (per consultazione):

  • Don't make me think. Un approccio di buon senso all'usabilità web e mobile, Steve Krug, Tecniche nuove
  • Interaction Design: Beyond Human-computer Interaction, Preece et al., Wiley
  • https://www.interaction-design.org/literature
  • Principi di Web design, di Joe Sklar, Apogeo

PART 1 A:

  • https://www.agid.gov.it/it/design-servizi/accessibilita/linee-guida-accessibilita-pa
  • https://www.w3schools.com/accessibility/index.php

PART 1B:

PART 1C:

OTHER REFERENCES:

  • Don't make me think. Un approccio di buon senso all'usabilità web e mobile, Steve Krug, Tecniche nuove
  • Interaction Design: Beyond Human-computer Interaction, Preece et al., Wiley
  • https://www.interaction-design.org/literature
  • Principi di Web design, di Joe Sklar, Apogeo


Oggetto:

Insegnamenti che mutuano questo insegnamento

Oggetto:
Ultimo aggiornamento: 11/09/2023 08:41
Location: https://laurea.informatica.unito.it/robots.html
Non cliccare qui!