Programmation des Interfaces Interactives

Le cours introduit les concepts de l'Interaction Homme-Machine (IHM) et de la programmation d'Interfaces Interactives. Les cours sont donnés par Jérémie Garcia et les TPs/TDs par Maria Jesus Lobo. Vous pouvez télécharger les slides de présentation de l'UE.

Les cours ont lieux les mercredi matin de 8h30 à 10h30 en salle E212 du PUIO (Bâtiment 640). Les TPS et les TDS ont lieu les mardi matin de 10h30 à 12h30.

Pour tout contact par email (jgarcia[at]ircam.fr et/ou maria-jesus.lobo[at]inria.fr), n'oubliez pas de mettre [IHM-15] dans le sujet.

Ce cours est basé sur les cours d'A. Bezerianos, de M. Beaudouin-Lafon, N. Roussel, T. Tsandilas, et O. Chapuis. Plusieurs personnes ont participé à la conception des exercices : D. Bonnet, C. Fleury, N. Roussel, C. Appert, O. Bau, M. Beaudouin-Lafon, G. Besacier, S. Gueddana, Y. Riche, and M. Nancel.

News

TDs/TPs

Les TDs et les TPs consitent en plusieurs exercises de programmation, principalement en Java. Vous trouverez plus d'information sur la page web qui leur est dédiée.

Cours

Mercredi matin de 8h30 à 10h30 en salle E212 du PUIO (Bâtiment 640)

7 janvier. Introduction et Définitions. Histoire, problématiques actuelles et futures.

Slides : [Introduction],[Histoire IHM].
Videos : Problème d'interaction ?, Sketch Pad, Doug Englebart, Xerox Star, Macintosh.

14 janvier. Programmation des systèmes interactifs. Java Swing - Programmation Evenementielle et boites à outils. Principes de conception.

Slides : [Programmation des Interfaces],[Principes de Conception].
Videos : Artistic resizing.

21 janvier. Architecture logicielle et MVC. Java 2D. Styles d'interaction.

Slides : [Architecture et MVC],[Java2D], [Styles d'interaction].
Solution de l'exercice MVC : Temperature converter MVC.
Videos : Crossing, Marking Menus, Bubble Cursor, FoldnDrop, Octopocus, Toolglasses.

28 janvier.Interaction graphique (WIMP, gestes, Drag and Drop). Programmation du Drag and Drop.

Slides : [Interaction Graphique],[Drag and Drop],[Animations].
Code du drag and drop : dnd.zip.
Code des animations : animation.zip.
Videos : Marking Menus, Manipulation directe de vidéos.

4 février. Conception centrée utilisateurs. Modèles conceptuels.

Slides : [Conception et modèles Conceptuels].
Videos : SILK, DENIM, Prototypage vidéo.

11 février. Eléments de perception, d'usabilité et méthodes d'évaluation pour l'IHM. Ergonomie des interfaces.

Slides : [Psychologie et interfaces], [Usabilité].

4 mars. Dispositifs d'entrée et de sortie. Interfaces avancées (tangibles, web, multitouch...).

Slides : [Evaluation], [Dispositifs d'entrée].
Videos : Smarties, Multitouch Fitt's Law, Sliding widgets, Wall display pointing, Occlusion aware interfaces, Phantom Pen, Paddle.

17 mars ~~11 mars~~. Résumé du cours, discussion sur les projets et préparation à l'examen.

Slides : [Revisions].

Projet

Le projet comptera pour 50% de la note finale. Il est composé de deux parties différentes.

Soutenances : 15 avril de 9h00 à 12h00
- 7 minutes de présentation maximum avec 5 minutes de questions (les impératifs de temps nous obligent d'être fermes sur la durée de chaque présentation).
- Il faut se focaliser sur vos concepts et les fonctions implémentées, de préférence en faisant une démonstration de votre application. Il est inutile de faire une introduction exhaustive, vu qu'elle sera la même pour tous et qu'elle ne contribuera qu'à la lassitude de vos évaluateurs.
- Vous pouvez utiliser des slides ou simplement une démonstration de votre application.
Première partie du projet
Deuxième partie du projet
Slides d'explications : Partie 1, Partie 2
Videos : Animation simple, Animation poisson, Illustration Animée.
Vous pouvez consulter les notes du projet et du TD7.

Foire Aux Questions :

Est ce que je peux coder dans un autre langages ou avec une autre librairie graphique ?
A priori oui, mais il vous faut l'accord de l'équipe enseignante (Jérémie et Maria).
Comment faire du Drag and Drop avec des Images ?
Il faut utiliser une classe qui étends la classe TransferHandler pour gérer les 3 cas suivants :
- Un objet de type java.awt.Image, representée par DataFlavor.imageFlavor.
- Une liste de fichier (List ), représentée par DataFlavor.javaFileListFlavor. C'est généralement le cas lorsque l'utilisateur drag and drop depuis l'explorateur de fichiers.
- Des données binaires (InputStreal) auquel cas il faut tester le type MIME (image.png ou .jpg) pour pouvoir décoder l'image ou rejeter le drop.
Voila un peu de code pour vous aider Image and drop.zip

Examen

L'examen comptera pour 50% de la note finale. Voici quelques sujets des examens des années précédentes. 2013a 2013b 2014

Info 342, Programmation des Interfaces Interactives

L3, 2015 Université Paris-Sud

Description

News

TDs/TPs

Cours

Projet

Examen