Présentation


Ce module a pour but de présenter  la problématique de l’adaptation des IHM au contexte d’ usage. Comment peut-on faire évoluer une IHM existante face aux changements de supports, d’utilisateurs ou de l’environnement (environnement extérieur lumineux/sombre, bruyant, en mobilité). Ce vaste problème est un des enjeux majeurs des développeurs d’IHM du futur, le coût de développement étant conséquent à chaque évolution, les entreprises cherchent à optimiser le développement commun réutilisable.

Les cours donnent des éléments de solution au travers de technologies relatives au Responsive Web Design et au Crossplatform. Les travaux de recherche prometteurs en particulier autour de l’ingénierie des modèles sont également présentés.

A la fin du module, les étudiants doivent pouvoir clairement identifier les adaptations souhaitables pour leurs applications futures et être capables de choisir les technologies adéquates et les solutions recherche qui pourraient être mise en œuvre pour résoudre leur problème.

Exemples de rapports technologiques

McGo : application permettant à un client de commander depuis n’importe quel endroit, que ça soit chez lui, à l’extérieur, ou en déplacement des plats de la franchis.  Pour venir le chercher dans un des restaurants de la franchise, il doit pouvoir être guidé et, une fois présent sur les lieux, doit pouvoir être prévenu dès que sa commande est prête.

Technologies : Android, React Native, Bootstrap & Vanilla JS, Angular

Visionnage de vidéos en ligne :  Sur le modèle Youtube, l’application doit permettre à l’utilisateur quel que soit son profil (enfant, étudiant, adulte…), son environnement (mains libres ou occupées, …) et son smartphone ou ordinateur, de visualiser une liste de vidéos populaires et de visionner la vidéo qu’il souhaite

Technologies : Android, React Native, Bootstrap & Vanilla JS, Angular

HallPlay: application mobile permettant à des groupes de personnes de se retrouverafin de jouer à un jeu. Un organisateur crée une partie et invite d’autres joueurs à rejoindre sa partie. Un jeu est choisi, ainsi qu’une date et un lieu de rendez-vous. Ainsi, chaque utilisateur peut voir la liste des parties qui se passeront près de chez lui et auxquelles il pourra participer.

Technologies : Vue.js, React Native, Ionic

AdaptaBTP  : application qui a pour but d’aider un architecte à superviser, gérer et
communiquer rapidement avec les différents corps d’état d’un chantier.

Technologies : Android, Ionic, Javascript natif, VueJS

Tradambars: application permettant aux amateurs de Carambar de partager leurs collections de sucreries et d’organiser des échanges avec d’autres utilisateurs. A travers le site internet, les utilisateurs pourront organiser des rendez-vous ou gérer leur profil. L’application mobile accompagnera les utilisateurs pour se rendre aux lieux de rencontres.

Technologies : Vue.js, React Native, Vanilla, Android

Archives_______________________________________________Planning 2018- 2019

 

Planning20182019

Evaluation

L’évaluation est double et concerne la connaissance des technologies RWD et Crossplatform et une vision précise des pistes de recherche au travers d’articles à étudier.

Rendu no 1 : Compréhension et analyse des technologies

Travail à faire en groupe de 4  : 4  technologies (1 chacun).

Le groupe doit traiter : une technologie Crossplatform (Ionic / ReactNative / Unity) , un framework utilisant les WebComponents ( React / Angular  / VueJS).  HTML5 (JavaScript Vanilla) et Android. Il doit appliquer une technologie RWD (Bootstrap / Pure / Foundation) soit sur le Framework soit directement avec JavaScript Vanilla.

Les technologies devront être appliquées sur une petite application pertinente qui intègre de la localisation,  des tableaux complexes, des vidéos,  des menus et des navigations complexes… L’application doit démontrer les limites et atouts des technologies utilisées pour l’adaptation.

  1. Article pour le groupe à rendre avant le 4/10 MIDI l’article doit être composé de 3 parties : nom, email et technologie traitée pour chaque membre du groupe, description de l’application fonctionnalités/tâches, liens entre l’application et l’adaptation. Veiller à expliciter le défi pour chacune des technologies.
  2. Rapport à livrer AVANT LE 25/10 MIDI sur le site Le rapport attendu doit comprendre :
    1. une introduction qui décrit et argumente l’exemple choisi
    2.  une partie par technologie décrite chacune sous la forme d’un Tutorial  :  Comment avez vous réalisé l’exemple ? Avec quel outil de développement, de tests ? Comment déploie-t-on et exécute-t-on l’exemple ? Comment teste-t-on les capacités d’adaptations ?
    3. Une conclusion qui fait une synthèse des 4 expériences.
  3. 26/10: démonstration argumentée de vos exemples sur les technologies choisies – livraison de la présentation et des exemples; Votre présentation sera argumentée et doit mettre en avant les avantages et inconvénients des technologies utilisées par rapport à l’adaptation que vous avez choisie de traiter. Vous devez faire preuve de recul.

La note sera de 50% pour chaque partie et pourra bien sure être différente pour chaque membre du trinôme.

Epreuve écrite : 3h 10/11 : Analyse d’articles comme fait en TD

Indications  pour l’analyse

Pour vous positionner  par rapport à la plasticité utilisez les critères listés ci-dessous.

Critères de positionnement et de synthèse :  Quel contexte d’usage ? (plateforme environnement / utilisateur);  quel moment ? (conception / exécution); quelle solution ? (modèle sous-jacent – ref pyramide des 4 niveaux d’IDM / CAMELEON,…); présentation de la solution – illustration sur votre exemple;  votre avis ? (avantages et inconvénients).

 

Planning 2017- 2018

PlanningAdaptation20172018

 

Evaluation

L’évaluation est double et concerne la connaissance des technologies RWD et Crossplatform et une vision précise des pistes de recherche au travers d’articles à étudier.

Pour toute livraison  utiliser le login de votre groupe de CEIHM  et ajouter  à l’article la catégorie 2017-2018-adaptation-livraison.

Rendu no 1 : Compréhension et analyse des technologies

Travail à faire en groupe de 4  : 4  technologies (1 chacun).

Le groupe doit traiter : une technologie RWD (Bootstrap / Pure / Foundation…) une technologie Crossplatform (Ionic / Xamarin /Unity…) , une technologie utilisant les WebComponents (Polymer / React / Angular 2…).  La quatrième technologie est au choix du groupe.

Les technologies devront être appliquées sur une petite application pertinente qui intègre de la localisation,  des tableaux complexes, des vidéos,  des menus et des navigations complexes… L’application doit démontrer les limites et atouts des technologies utilisées pour l’adaptation.

  1. Article pour le groupe à rendre avant LE 29/9 et 5/10 MIDI l’article doit être composé de 3 parties : nom, email et technologie traitée pour chaque membre du groupe, description de l’application fonctionnalités/tâches, liens entre l’application et l’adaptation. Veiller à expliciter le défi pour chacune des technologies.
  2. Rapport à livrer AVANT LE 26/10 MIDI sur le site Le rapport attendu doit comprendre :
    1. une introduction qui décrit et argumente l’exemple choisi
    2.  une partie par technologie décrite chacune sous la forme d’un Tutorial  :  Comment avez vous réalisé l’exemple ? Avec quel outil de développement, de tests ? Comment déploie-t-on et exécute-t-on l’exemple ? Comment teste-t-on les capacités d’adaptations ?
    3. Une conclusion qui fait une synthèse des 4 expériences.
  3. 27/10: démonstration argumentée de vos exemples sur les technologies choisies – livraison de la présentation et des exemples; Votre présentation sera argumentée et doit mettre en avant les avantages et inconvénients des technologies utilisées par rapport à l’adaptation que vous avez choisie de traiter. Vous devez faire preuve de recul.

La note sera de 50% pour chaque partie et pourra bien sure être différente pour chaque membre du trinôme.

Epreuve écrite : 3h 10/11 : Analyse d’articles comme fait en TD

Indications  pour l’analyse

Pour vous positionner  par rapport à la plasticité utilisez les critères listés ci-dessous.

Critères de positionnement et de synthèse :  Quel contexte d’usage ? (plateforme environnement / utilisateur);  quel moment ? (conception / exécution); quelle solution ? (modèle sous-jacent – ref pyramide des 4 niveaux d’IDM / CAMELEON,…); présentation de la solution – illustration sur votre exemple;  votre avis ? (avantages et inconvénients).


 

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *