Composants Logicielset

Interaction Homme Machine

CL & IHMAlexandre.Demeure@univ-grenoble-alpes.fr

2019

CL & IHMSondage : Qui êtes vous ?

● Langages? Expérience de programmation… ... des systèmes interactifs ?

CL & IHMRéaliser des logiciels utiles et utilisables

○ Adéquation entre fonctionnalitées proposées et besoins des utilisateurs

○ Adéquation entre l’interface et les utilisateurs

Percevoir / Comprendre l’état du systèmeModifier / Agir sur l’état du système

Système interactif

InterfaceNoyau fonctionnel

Dispositifs d’entrées

Dispositifs de sorties

CL & IHM1) Concevoir un système interactif :

● Connaître les utilisateurs● Comprendre les concepts, la tâche, l’activité● Comprendre le contexte d’usage● Interaction Système <-> Utilisateurs

2) Développer un système interactif● Structuration des données● Rendu des données, mise en page● Codage de l’interaction, programmation événementielle● Programmation asynchrone● Architecture du code, MVC, MVP, MVVM, MV*

Plutôt en M1

Plutôt en L3

Plan du coursEspace technologique : WEB/HTML5

○ Facile d’accès○ Multi-plateformes○ Utilisable pour du natif (Ionics, …)○ Généralisable à d’autres espaces technologiques (java/SWING, QT, …)○ Attention, on n’apprend pas à faire un site web !

1. Des bases de Typescript2. Les technologies fondamentales du web3. Programmation événementielle4. Éléments d’architecture logicielle (MVP, MVVM)5. Programmation asynchrone

Espace technologique webQu’est ce que le web ? Quelles sont les technologies mises en oeuvre ?

Espace technologique webQu’est ce qu'un serveur web, un client web, une ressource ?

Espace technologique webQu’est ce que HTTP, HTML, CSS, Javascript, Ecmascript, Typescript ?

Espace technologique web

Environnement de développementQu’est ce qu’un éditeur de code, SVN, GIT, NPM ?

Environnement de développementQu’est ce qu’un éditeur de code, SVN, GIT, NPM ?

Environnement de développement

Votre répertoire:

+ Debugger

Navigateur web

Editeur de code Webstorm

Terminal de commandes

Environnement de développement

GitHub

Votre répertoire:● miniServerHTTP.js● package.json● tslint.json● tsconfig.json● ...

git clone ...

+ Debugger

Navigateur web

Editeur de code Webstorm

Terminal de commandes

Environnement de développement

GitHub

NPM

Votre répertoire:● miniServerHTTP.js● package.json● tslint.json● tsconfig.json● ...

git clone ...

npm install

+ Debugger

Navigateur web

Editeur de code Webstorm

Terminal de commandes

Environnement de développement

GitHub

NPM

Chaîne de compilation ● Compiler le Typescript● Analyser de code

Votre répertoire:● miniServerHTTP.js● package.json● tslint.json● tsconfig.json● ...

git clone ...

npm install

+ Debugger

Navigateur web

Editeur de code Webstorm

Terminal de commandes

Environnement de développement

GitHub

NPM

Chaîne de compilation ● Compiler le Typescript● Analyser de code

Votre répertoire:● miniServerHTTP.js● package.json● tslint.json● tsconfig.json● ...

git clone ...

npm install

+ Debugger

Navigateur web

Editeur de code Webstorm

Terminal de commandes