- Docente: Roberto Pioggia
- Crediti formativi: 6
- SSD: ING-INF/05
- Lingua di insegnamento: Italiano
- Modalità didattica: Convenzionale - Lezioni in presenza
- Campus: Bologna
- Corso: Laurea in Meccatronica (cod. 6009)
-
dal 16/09/2025 al 17/12/2025
Conoscenze e abilità da conseguire
Lo studente apprende gli aspetti metodologici fondamentali e le principali tecnologie abilitanti per la progettazione e lo sviluppo di HMI (Human Machine Interface) rispondenti ai moderni requisiti applicativi riconducibili al paradigma “WEB-based interoperability and seamless connectivity”
Contenuti
La prima parte del corso è dedicata allo studio dell'interazione uomo/macchina (interaction design) in termini di fattori umani, modello di utenti, stili di interazione ed usabilità. Utilizzeremo un esempio pratico per dimostrare come utilizzando i concetti dell'interazione uomo/macchina possiamo migliorare l'usabilità di un prodotto.
La seconda parte del corso è dedicata alle tecniche realizzative di un HMI industriale: sia tramite i sistemi di supervisione HMI e SCADA e sia tramite una applicazione basata sui linguaggi "web-based". Applicheremo le conoscenze dei linguaggi "web-based" per realizzare l'esempio di interazione uomo/macchina che abbiamo analizzato nella prima parte del corso
Gli argomenti trattati nella prima parte del corso sono:
- Definizione di interfaccia uomo/macchina (HMI) in ambiente industriale
Definizione e differenza tra HMI/SCADA.
Storia della evoluzione delle interfacce operatori.
Concetti base di Ui/Ux.
- Processo di progettazione di una interfaccia HMI
Analisi di utenti e scenari (User Experience).
Principi di usabilità e le sue metriche (User Interface).
Generazione rapida di prototipi (storyboard, mockup grafici).
- Realizzazione dell'interfaccia con sistemi di supervisione HMI e SCADA
Breve descrizione dei sistemi di supervisione HMI e SCADA.
Utilizzo del sistema di supervisione per la creazione di HMI.
Gli argomenti trattati nella seconda parte del corso sono
- Realizzazione dell'interfaccia utente tramite l'utilizzo dei linguaggi "web-based"
Descrizione approfondita dei linguaggi HTML5, CSS e Javascript (con relativi esempi).
Concetti di animazione/interattività tramite l'utilizzo del linguaggio CSS e Javascript (con relativi esempi).
Introduzione alla libreria React (realizzazione di componenti riutilizzabili (con relativi esempi)..
- Alcuni concetti base relativa alla comunicazione con il Back-End
Utilizzo del WebSocket per la comunicazione con il back-end.
Utilizzo del server OPC-UA per la comunicazione con il PLC
- Sviluppo di una interfaccia HMI
Partendo dall'esempio svolto nella prima parte verrà sviluppata l'interfaccia usando i linguaggi "web-based"
Testi/Bibliografia
Interaction Design: Beyond Human-Computer Interaction (6th Edition) - Yvonne Rogers, Helen Sharp, Jennifer Preece (2023) EAN 9781119901099
HTML5 e CSS3, la guida completa per il Web design (2022) ISBN-13 : 979-8847400275
Javascipt, la guida tascabile alla programmazione web - Saverio Rubini (2008) EAN: 9788850322442
React: Made Simple!, la guida semplice per diventare React Web&Mobile Developer (2008) EAN: 9788850322442
Metodi didattici
Didattica frontale con il supporto di slides ed approfondimenti alla lavagna.
Modalità di verifica e valutazione dell'apprendimento
Lo studente può scegliere una delle seguenti modalità dell'esame
1. Prova orale: durante l'esame saranno effettuate quattro domande aperte sugli argomenti trattati durante la lezione ed un breve esercizio di programmazione HTML/Javascript
2. Realizzazione di un progetto HMI: deve essere descritto sia la parte teorica di realizzazione del progetto e sia la descrizione di un semplice prototipo sviluppato con il linguaggio HTML/Javascript
Strumenti a supporto della didattica
Utilizzo del programma Visual Studio Code per la realizzazione degli esempi
Orario di ricevimento
Consulta il sito web di Roberto Pioggia