IHM et Différents supports Différents utilisateurs Différents environnements 
Problématique - Aperçu des solutions industr...
Un peu d’histoire … 
◦Introduction du terme à Interact’99 
◦Définitions du Larousse : 
Qualité de ce qui est plastique, ...
Adresse web : http://atelierihm.unice.fr/enseignements/plasticite-des- interfaces/ 
Semaine 1 Introduction au module 
Plas...
Rapport à rendre individuel (vous pouvez travailler en binôme) 
Rapport de synthèse sur les travaux de recherche (1 articl...
De quoi est constituée une IHM ? 
A quoi sert une IHM 
Un contenu 
Une structure 
Une présentation 
Des techniques d’i...
Des utilisateurs 
Des supports 
Des informaticiens 
Des professionnels 
Des enfants 
Des personnes âgées 
….. 
Des st...
Des technologies 
(HTML5, CSS, Android, IOS, Java, C#) 
Des frameworks / autres (Bootstrap, Phonegap, ….) 
Outils de tests...
Une migration est le passage d'un état existant d'un d’une application vers une nouvelle cible définie. La migration de do...
Exemples de besoins : 
Changements provoqués directement ou indirectement par l’utilisateur 
◦changement de matériel (ach...
Nouvelles capacités d’interaction : tactile, tangible. 
bornes - tables – vitrines – murs interactifs 
Différence de taill...
Prendre en compte les environnements 
Une forte évolution ces dernières années 
A la maison 
Au travail 
Dans les tra...
Entre supports tactiles : de la table au mur, du téléphone au PC ? 
◦Différences de taille d’écran, différence de système...
Supports dédiés à une activité 
Niveau d’expertise des utilisateurs experts – 
Niveau de fiabilité 
En mobilité
Changement de matériel 
◦Ex pour avoir de nouvelles fonctionnalités : changement de voiture, sortie d’une nouvelle montre...
 Supports mobiles 
Mêmes usages ? 
Mêmes services
 Supports mobiles 
Mêmes usages ? 
Mêmes services
Passage en mobilité 
◦En déplacement 
◦Dans les transports en commun 
Changement de matériel 
Nouvelles technologies 
Nou...
Adaptation aux utilisateurs 
Une forte évolution ces dernières années 
Informatique pour tous 
Lyonnaise des eaux
Adaptation aux utilisateurs 
Des professionnels aux novices 
Essayez votre coiffure, vos lunettes…
De la domotique aux services
Au domicile 
Des utilisateurs différents du même service 
Des supports différents selon les pièces et l’activité 
A l’...
Pouvoir adapter le contenu 
Pouvoir adapter les techniques d’interactions 
Pouvoir adapter le layout 
Quand et Comment ?
 Domaine de plasticité 
Env ironneme nt 
Pl ate-forme 
Ut ilisate ur 
Seuil de plasticité 
Domaine de plasticité 
C2 
Con...
2 cas 
A la conception – faciliter la vie du développeur 
Réutiliser un maximum pour chaque nouvelle cible 
Diminuer le...
XML 
XSL 
HTML 
VoiceML 
WML Au centre une 
description 
XMLisée 
basées sur des Traducteurs 
Un langage commun 
Une génér...
Problème traité : Migration totale 
◦Exemple 
SI la batterie du PC faiblit ALORS passer sur PDA 
SI condition ALORS acti...
Capture du 
contexte 
Identification 
Des solutions 
candidates 
Selection d’une 
solution 
candidate 
Détection de 
chang...
Identifier le problème = Quel est le besoin en plasticité 
◦Conception et/ou exécution ? 
◦Quels dispositifs visés ? 
◦Qu...
Des solutions partielles industrielles 
Pour des types d’application (Site Web) 
Pour des types de supports (téléphones...
Les solutions actuelles a des problemes simples existent pour le WEB 
DES SOLUTIONs ad-hoc sont bien connues 
Les travaux ...
WEB Design and Applications et plateformes 
WEB Design and Applications et utilisateurs 
Pour mobile : “One Web” pour une...
Description dérivée d’XML pour décrire des interfaces graphiques 
Représentation pour plusieurs bibliothèques graphiques 
...
◦« User Interface Markup Language » 
◦Langage multi-interface (graphique, voix, ...) 
◦Une norme : UIML (uiml.org) 
◦Des i...
Définitions 
Moyen : Media queries 
Responsive web design (RWD) is a web design approach aimed at crafting sites to provid...
media_query_list: <media_query> [, <media_query> ]* 
media_query: [[only | not]? <media_type> [ and <expression> ]*] 
| <e...
Analyser les besoins 
Maquetter 
Développer avec ou sans framework 
Tester
Mockup et Responsive design avec Balsamiq : http://support.balsamiq.com/customer/portal/articles/615901
framework qui permet, à partir de pages HTML5/CSS3, d’obtenir des écrans et des composants graphiques adaptés au rendu sur...
Profusion de frameworks et de boilerplates ces dernières années 
Un lien qui en parle : http://designshack.net/articles/cs...
Les tests sont coûteux en temps et en matériel 
Il existe des outils pour tester le "responsive" d'un site 
http://cybercr...
Media queries : 
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries 
http://putaindecode.fr/posts/html/r...
Illustration des besoins en entreprise pour la téléphonie 
◦Le développement rapide des nouveaux modèles de téléphones po...
Objectifs : Diminuer le coût et le temps de de développement et viser un marché large. 
Développer des application pour pl...
http://www.developereconomics.com/pros-cons-top-5-cross-platform-tools/
PhoneGap : outil open-source, racheté par Adobe 
fournit des API JavaScript aux navigateurs Web standards, permettant d’ap...
Accelerometer : écouter le capteur de mouvement 
Camera : capturer une photo via l’application dédiée 
Capture : capturer ...
Développé par Appcelerator qui vend du support et des formations sur Titanium, une solution libre. 
Le principe de Titaniu...
Composants navigateurs (appelé « WebView ») disponibles sur chaque OS mobile et expose – dans ce composant navigateur – un...
http://setandbma.wordpress.com/2012/03/ 19/mobile-game-development-tool- comparison/
http://www.ltm.fr/bonnes-pratiques-pour-creer-des-ui-dediees-mobile/ 
IOS : https://developer.apple.com/library/ios/docume...
Equipe IIHM Laboratoire IMAG à Grenoble 
◦Gaelle Calvary & Joelle Coutaz http://iihm.imag.fr/publication/ 
et http://iihm...
Cameleon Context Aware Modelling for Enabling and Leveraging Effective interaction (IST R&D 2001-2004) 
http://giove.isti....
http://giove.isti.cnr.it/projects/cameleon.html 
I.S.T.I (Pisa, Italy) 
Université Catholique de Louvain (Louvain, Belgi...
Phase de “conception” 
Config 1 
Modèle 
Tâches et 
Concepts 
IHM concrète 
IHM finale 
IHM abstraite 
Modèle 
Tâches et 
...
Tâches & Concepts 
IHM abstraite 
IHM concrète 
IHM finale 
Config 1 
Différents niveaux d’abstraction
http://www.servface.eu/
+Annotations de services avec des éléments d’interfaces 
+Composition de services 
+Génération de l’interface du service «...
Définir, valider et standardiser un langage de description d'interfaces 
utilisateur (UIDL) pour améliorer la productivité...
Université catholique de Louvain : Jean Vanderdonckt 
Université Joseph Fourier Grenoble : Joelle Coutaz 
Publications Sci...
Université catholique de Louvain : Jean Vanderdonckt 
http://uclouvain.academia.edu/JeanVanderdonckt/Papers 
Generating Us...
Université Joseph Fourier Grenoble : Joelle Coutaz 
http://iihm.imag.fr/publication/ 
http://iihm.imag.fr/publication/MFC1...
Construction d’applications adaptables par composition
Proposer un modèle d’architecture 
pour un service interactif 
N services fonctionnels et leurs interactions utilisateurs ...
Comment fusionner 2 services respectant l’architecture? 
Composition d’arches ? 
Assemblage des services 
fonctionnels 
Qu...
Equipe Rainbow 
http://rainbow.i3s.unice.fr/doku.php?id=public:publications 
Un langage de description d’IHM 
Component mo...
Component model and programming : a first step to manage Human Computer Interaction Adaptation. In Mobile HCI’03 
"When th...
A Universal, Declarative, Multiple Abstraction-Level Language for Service-Oriented Applications in Ubiquitous Environments...
Cours Adaptation des IHM
Cours Adaptation des IHM
Cours Adaptation des IHM
Cours Adaptation des IHM
Cours Adaptation des IHM
Cours Adaptation des IHM
Cours Adaptation des IHM
Cours Adaptation des IHM
Prochain SlideShare
Chargement dans…5
×

Cours Adaptation des IHM

3 393 vues

Publié le

Cours Adaptation des IHM à Polytech Nice Sophia Parcours IHM

Publié dans : Formation
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
3 393
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1 354
Actions
Partages
0
Téléchargements
94
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Cours Adaptation des IHM

  1. 1. IHM et Différents supports Différents utilisateurs Différents environnements Problématique - Aperçu des solutions industrielles et recherche Anne-Marie Déry pinna@polytech.unice.fr
  2. 2. Un peu d’histoire … ◦Introduction du terme à Interact’99 ◦Définitions du Larousse : Qualité de ce qui est plastique, malléable : Plasticité de l'argile. Qualité de ce qui est souple, modifiable : Plasticité du caractère de l'enfant. Qualité sculpturale d'une oeuvre d'art. Propriété d'un solide dans le domaine des déformations permanentes. Théorie dont l'objet est d'expliquer et de prévoir le comportement du solide dans cet état de déformation. ◦Définition donnée par Joelle Coutaz Capacité d’une interface à s’adapter à son contexte d’usage dans le respect de son utilisabilité ◦Contexte d’usage Plateforme Environnement Utilisateur (2001)
  3. 3. Adresse web : http://atelierihm.unice.fr/enseignements/plasticite-des- interfaces/ Semaine 1 Introduction au module Plasticité en recherche Semaine 2 HTML5 Semaine 3 l’IDM Pour l’IHM Semaine 4 HTML5 Semaine 5 Phonegap Semaine 6 XUL Semaine 7 Travaux de recherche et rendus Semaine 8 Evaluation
  4. 4. Rapport à rendre individuel (vous pouvez travailler en binôme) Rapport de synthèse sur les travaux de recherche (1 article) A situer par rapport au cours : Quel contexte d’usage ? plateforme / environnement / utilisateur Quel moment ? conception / exécution Comment ? Présentation de la solution - modèle sous jacent Présentation de la solution - illustration sur un exemple Votre avis ? avantages et inconvénients Comparaison technologique : Solutions Responsive Design Solutions multi-supports Solutions Jeux vidéos Soutenance orale (modalités à définir) Objectif : vérifier vos acquis dans le module Présentation courte de l’article et de la comparaison et Questions réponses
  5. 5. De quoi est constituée une IHM ? A quoi sert une IHM Un contenu Une structure Une présentation Des techniques d’interactions ….. Présenter des informations Récupérer des informations Faire le lien entre un utilisateur et une application
  6. 6. Des utilisateurs Des supports Des informaticiens Des professionnels Des enfants Des personnes âgées ….. Des stations Des téléphones Des tablettes Des tables Des murs … Des environnements Au travail Au domicile Dans les transports Dans la rue …..
  7. 7. Des technologies (HTML5, CSS, Android, IOS, Java, C#) Des frameworks / autres (Bootstrap, Phonegap, ….) Outils de tests graphiques Architectures MVC, PAC… Démarche centrée utilisateurs Démarche Agile … Avoir une méthodologie Utiliser des outils
  8. 8. Une migration est le passage d'un état existant d'un d’une application vers une nouvelle cible définie. La migration de données est généralement réalisée par programmation pour parvenir à un traitement automatisé. Le portage informatique consiste à porter, mettre en oeuvre un logiciel, une fonctionnalité, dans un autre environnement que celui d'origine qu’il soit logiciel, soit matériel. La migration / portage d’une application implique la migration / portage de son IHM On migre soit la totalité soit une sous partie ◦En IHM on parle de tâches pour les sous parties On migre statiquement (à la conception ou dynamiquement à l’exécution)
  9. 9. Exemples de besoins : Changements provoqués directement ou indirectement par l’utilisateur ◦changement de matériel (achat, panne, changement en fonction du lieu) ◦changement d’environnement (situation de mobilité, bruit, nuit/jour…) ◦Changement des capacités de l’utilisateur : mains occupées, acquisition d’expertise… Changements stratégiques de l’entreprise ◦Cibler plusieurs types d’utilisateur ◦Cibler plusieurs supports ◦Faciliter la migration et le portage ◦Rester compétitifs et attractifs
  10. 10. Nouvelles capacités d’interaction : tactile, tangible. bornes - tables – vitrines – murs interactifs Différence de taille des écrans – multi touch ou non – utilisateur experts ou non Environnement bruyant – sombre …
  11. 11. Prendre en compte les environnements Une forte évolution ces dernières années A la maison Au travail Dans les transports en commun Dans la rue Dans les bâtiments publics ou privés
  12. 12. Entre supports tactiles : de la table au mur, du téléphone au PC ? ◦Différences de taille d’écran, différence de système, différences des capacités tactiles (multi touch ou pas) Entre un support non tactile et un support tactile : ◦ quand changer l’interaction ? Pourquoi ? ◦ Impact sur la présentation ? ◦ Impact sur l’enchaînement des tâches Différences de technique d’interaction, d’usage….
  13. 13. Supports dédiés à une activité Niveau d’expertise des utilisateurs experts – Niveau de fiabilité En mobilité
  14. 14. Changement de matériel ◦Ex pour avoir de nouvelles fonctionnalités : changement de voiture, sortie d’une nouvelle montre de plongée ◦Ex pour accomplir la tâche adaptée : opérations sur le site de dépannage ou sur le site professionnel : exemple du fontainier, du réparateur d’électroménager ◦Ec pour permettre à de nouveaux utilisateurs d’accéder à la fonctionnalité – cas de déficients visuels… Choix de l’utilisateur ou de son environnement professionnel ou du niveau d’expertise Reconsidérer le contenu – le layout – la technique d’interaction
  15. 15.  Supports mobiles Mêmes usages ? Mêmes services
  16. 16.  Supports mobiles Mêmes usages ? Mêmes services
  17. 17. Passage en mobilité ◦En déplacement ◦Dans les transports en commun Changement de matériel Nouvelles technologies Nouveaux services Quid de l’usage ? Quid du développeur ?
  18. 18. Adaptation aux utilisateurs Une forte évolution ces dernières années Informatique pour tous Lyonnaise des eaux
  19. 19. Adaptation aux utilisateurs Des professionnels aux novices Essayez votre coiffure, vos lunettes…
  20. 20. De la domotique aux services
  21. 21. Au domicile Des utilisateurs différents du même service Des supports différents selon les pièces et l’activité A l’extérieur – dans la rue Un environnement interagissant Les sollicitations commerciales, culturelles, de déplacement Des supports privés (mobiles) ou des supports publics (bornes interactives,….)  Des contraintes environnementales (bruit, lumière, mains occupées…) Dans l’univers professionnel Supports privés et supports professionnels : taches fixées D’un lieu à un autre Continuité de services
  22. 22. Pouvoir adapter le contenu Pouvoir adapter les techniques d’interactions Pouvoir adapter le layout Quand et Comment ?
  23. 23.  Domaine de plasticité Env ironneme nt Pl ate-forme Ut ilisate ur Seuil de plasticité Domaine de plasticité C2 Contexte non couvert C1 Contexte couvert par l’IHM
  24. 24. 2 cas A la conception – faciliter la vie du développeur Réutiliser un maximum pour chaque nouvelle cible Diminuer le coût de développement Prendre en compte l’usage (exemple Jeux vidéos -Shiva) A l’exécution – faciliter la vie de l’utilisateur final Faire migrer une application d’un support à un autre Faire migrer des taches d’un support à un autre Conserver les facilités l’usage et les habitudes tout en profitant des spécificités des supports
  25. 25. XML XSL HTML VoiceML WML Au centre une description XMLisée basées sur des Traducteurs Un langage commun Une génération de code Des techniques de compilation Limites et Avantages ?
  26. 26. Problème traité : Migration totale ◦Exemple SI la batterie du PC faiblit ALORS passer sur PDA SI condition ALORS action Action  Réaction Ecrire une machine à états Limites et Avantages ?
  27. 27. Capture du contexte Identification Des solutions candidates Selection d’une solution candidate Détection de changement de contexte Identification du changement de contexte Exécution du prologue Execution de la reaction Execution de L’épilogue Cadre de référence : phase “exécution”
  28. 28. Identifier le problème = Quel est le besoin en plasticité ◦Conception et/ou exécution ? ◦Quels dispositifs visés ? ◦Quel(s) environnent(s) ? ◦Quel(s) utilisateur(s) ? Etudier l’existant ◦Quelles sont les technologies adaptées ? ◦De quels travaux de recherche peut-on s’inspirer ? Proposer une solution ◦Solution partielle ou complète ◦Solution ad-hoc ou modèle
  29. 29. Des solutions partielles industrielles Pour des types d’application (Site Web) Pour des types de supports (téléphones mobiles) Des projets – en recherche De la réutilisation pour la composition d’applications existantes De la migration dirigée par l’utilisateur Points communs : niveau de description des interfaces plus ou moins abstraits : Langages à balises et IHM
  30. 30. Les solutions actuelles a des problemes simples existent pour le WEB DES SOLUTIONs ad-hoc sont bien connues Les travaux recherche sont nombreux
  31. 31. WEB Design and Applications et plateformes WEB Design and Applications et utilisateurs Pour mobile : “One Web” pour une grande variété de dispositifs, de contextes et de lieu grace au W3C’s Mobile Web BestPractices. Device API Working group Model-Based UI : W3C Incubator Group - Rapport Final 04 May 2010 ( http://www.w3.org/2005/Incubator/model-based-ui/) working draft déjà implémenté dans certains navigateurs de la norme FlexBox http://www.w3.org/TR/css3-flexbox/ ...  http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout- module.html Accessibilité : W3C’s Web Accessibility Initiative (WAI) grace aux Web Content Accessibility Guidelines (WCAG) aide à construire des contenus accessibles à tous quelque soit le handicap Respect de la vie privée : POWDER permettrait d’impliquer l’utilisateur pour faire des choix prenant en compte la vie privée. Donner confiance aux usagers Internationalisation : HTML, XML construits sur Unicode, http://www.w3.org/standards/webdesign/
  32. 32. Description dérivée d’XML pour décrire des interfaces graphiques Représentation pour plusieurs bibliothèques graphiques (par exemple java.awt). IDEE : Définir un métalangage canonique qui peut décrire n'importe quelle interface utilisateur indépendant des plateformes, qu'il s'agisse des plateformes actuelles ou futures. - interface de bureau, interface web, interface mobile, système embarqué, ou encore applications « voix ». UIML1.0 Décembre 1997 UIML 3.1 Mars 2004 UIML 4 Outils appelés renderers https://www.oasis-open.org/committees/tc_home.php?wg_abbrev=uiml
  33. 33. ◦« User Interface Markup Language » ◦Langage multi-interface (graphique, voix, ...) ◦Une norme : UIML (uiml.org) ◦Des implémentations ou « renderers » Harmonia : Awt/Swing, HTML, WML, VXML, ... Rubico : Visual Basic, GUI builder TV Server, AG : C++ for embedded systems Les 4 parties d'un document UIML: <Head> : metadata (author, date, version, ...) <Template> : réutilisation de fragments <Interface> : interface proprement dite <Structure> : arbre des « widgets » <Style> : styles (propriétés) des widgets <Content> : contenu (texte, image, son) <Behavior> : objet / événement / action <Peers> : mappings et liens vers l'extérieur
  34. 34. Définitions Moyen : Media queries Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling— across a wide range of devices (from mobile phones to desktop computer monitors) Responsive design is an approach to web page creation that makes use of flexible layouts, flexible images and cascading style sheet media queries. The goal of responsive design is to build web pages that detect the visitor's screen size and orientation and change the layout accordingly. A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Media queries, added in CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself
  35. 35. media_query_list: <media_query> [, <media_query> ]* media_query: [[only | not]? <media_type> [ and <expression> ]*] | <expression> [ and <expression> ]* expression: ( <media_feature> [: <value>]? ) media_type: all | aural | braille | handheld | print | projection | screen | tty | tv | embossed media_feature: width | min-width | max-width | height | min-height | max-height | device-width | min-device-width | max-device-width | device-height | min-device-height | max-device-height | aspect-ratio | min-aspect-ratio | max-aspect-ratio | device-aspect-ratio | min-device-aspect-ratio | max-device- aspect-ratio | color | min-color | max-color | color-index | min-color-index | max-color-index | monochrome | min-monochrome | max-monochrome | resolution | min-resolution | max-resolution | scan | grid BNF
  36. 36. Analyser les besoins Maquetter Développer avec ou sans framework Tester
  37. 37. Mockup et Responsive design avec Balsamiq : http://support.balsamiq.com/customer/portal/articles/615901
  38. 38. framework qui permet, à partir de pages HTML5/CSS3, d’obtenir des écrans et des composants graphiques adaptés au rendu sur un écran de smartphone ou tablette. Base : jQuery UI pour l’implémentation des composants graphiques (widgets). conçu pour fonctionner sur un grand nombre de navigateurs et de plateformes différentes classées suivant leur niveau de support : “dégrader” correctement l’application sur un ancien téléphone.”).
  39. 39. Profusion de frameworks et de boilerplates ces dernières années Un lien qui en parle : http://designshack.net/articles/css/which- is-right-for-me-22-responsive-css-frameworks-and-boilerplates- explained Quelques exemples : Boostrap : http://m5designstudio.com/2013/orlando-web-design/bootstrap-responsive- layout/ Foundation : http://foundation.zurb.com/, http://zurb.com/responsive/design  Boilerplate : http://responsiveboilerplate.com/  HTML5Boilerplate : http://html5boilerplate.com/
  40. 40. Les tests sont coûteux en temps et en matériel Il existe des outils pour tester le "responsive" d'un site http://cybercrab.com/screencheck/ http://alamko.info/test-responsive-website- using-responsinator/
  41. 41. Media queries : https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries http://putaindecode.fr/posts/html/responsive-dom/ http://lehollandaisvolant.net/?d=2012/11/24/20/37/08-css-faire-un-theme-mobile-avec-html5-et-responsive-design Frameworks / Boilerplates http://designshack.net/articles/css/which-is-right-for-me-22-responsive-css-frameworks-and-boilerplates-explained Boostrap : http://m5designstudio.com/2013/orlando-web-design/bootstrap-responsive-layout/ Foundation : http://foundation.zurb.com/, http://zurb.com/responsive/design Boilerplate : http://responsiveboilerplate.com/ HTML5Boilerplate : http://html5boilerplate.com Tests http://cybercrab.com/screencheck/ http://alamko.info/test-responsive-website-using-responsinator/
  42. 42. Illustration des besoins en entreprise pour la téléphonie ◦Le développement rapide des nouveaux modèles de téléphones portables pose le problème de faciliter l’implémentation de nouvelles solutions logicielles et  créer des interfaces utilisateurs. ◦La différence entre d’une plateforme de téléphone à l’autre pose les problèmes de réutiliser les développements développer des variantes des produits plus rapidement.
  43. 43. Objectifs : Diminuer le coût et le temps de de développement et viser un marché large. Développer des application pour plusieurs plateformes (iOS, Android, Windows Mobile, BlackBerry/RIM, etc.) en maximisant la réutilisation du code tout en conservant des spécificités de chacune des cibles. Souvent simples à utiliser : ils sont basés sur odes langages de scripting : CSS, HTML, et JavaScript. Les principaux défauts viennent des évolutions fréquentes des système des cibles qui impliquent de réécrire une partie des générations de code.
  44. 44. http://www.developereconomics.com/pros-cons-top-5-cross-platform-tools/
  45. 45. PhoneGap : outil open-source, racheté par Adobe fournit des API JavaScript aux navigateurs Web standards, permettant d’appeler des fonctionnalités natives non disponibles autrement : accéder à l’appareil photo, à l’accéléromètre, au système de fichiers… Cela nécessite d’embarquer le code source HTML/CSS/JS dans une application native, grâce au composant permettant d’inclure une vue Web dans une application, disponible dans chaque SDK. iOS, Android, BlackBerry, Bada, WindowsPhone, WebOS, Symbian
  46. 46. Accelerometer : écouter le capteur de mouvement Camera : capturer une photo via l’application dédiée Capture : capturer les flux son/image/vidéo du téléphone Compass : orientation magnétique (N/S/E/O) de l’appareil Connection : informations sur la connectivité DATA Contacts : accès à la base de contacts Device : identifiant du smartphone Events : accès aux événements natifs (batterylow, volumeupbutton) File : lecture / écriture de fichiers Geolocation : réception des coordonnées géographiques Media : lecture de fichier audio Notification : notifications visuelles, sonores et tactiles Storage : accès à une base de données SQL
  47. 47. Développé par Appcelerator qui vend du support et des formations sur Titanium, une solution libre. Le principe de Titanium est de fournir une machine virtuelle JavaScript permettant d’accéder au système natif, et ainsi de développer des applications natives mais en JavaScript. iOS, Android, BlackBerry http://crossplatformappmart.blogspot.fr/2013/04/titanium-application- development-new.html http://fr.slideshare.net/praweshsth1/cross-platform-mobile-development- titanium-appcelerator
  48. 48. Composants navigateurs (appelé « WebView ») disponibles sur chaque OS mobile et expose – dans ce composant navigateur – un certain nombre de passerelles vers les éléments natifs du téléphone. accessibles via le langage Javascript (via des flux JSON). http://www.legitreviews.com/cordova-takes-visual-studio- cross-platform_142067 http://www.sencha.com/products/ Cordova soutenu par Apache http://cordova.apache.org -Sencha : propose plusieurs outils pour faciliter le développement cross platform sur mobile
  49. 49. http://setandbma.wordpress.com/2012/03/ 19/mobile-game-development-tool- comparison/
  50. 50. http://www.ltm.fr/bonnes-pratiques-pour-creer-des-ui-dediees-mobile/ IOS : https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html#//apple_ref/doc/uid/TP40006556-CH1- SW1 Android : http://developer.android.com/design/index.html http://developer.android.com/design/patterns/index.html
  51. 51. Equipe IIHM Laboratoire IMAG à Grenoble ◦Gaelle Calvary & Joelle Coutaz http://iihm.imag.fr/publication/ et http://iihm.imag.fr/demo/ Equipe RAINBOW Laboratoire I3S à Sophia Antipolis ◦Michel Riveill & Philippe Renevier & Audrey Occello & Anne Marie Dery http://rainbow.i3s.unice.fr/doku.php?id=public:publications et http://atelierihm.unice.fr/recherche/travaux-de-li3s/ontocompo-composition-dapplications-multi- modeles-dirigee-par-la-composition-des-interfaces-graphiques/ Laboratoire HIIS à l’université de Pise ◦Fabio Paterno http://hiis.isti.cnr.it/publications.php et http://giove.isti.cnr.it/videos Laboratoire CHI Université catholique de Louvain ◦Jean Vanderdonckt ◦http://uclouvain.academia.edu/JeanVanderdonckt/Papers Equipe IHM au Université de Valencienne ◦Anas Hariri & Sophie Lepreux & Christophe Kolski http://www.univ-valenciennes.fr/LAMIH- intra/site/commun/_gestion/publis/recherche/resultat.php?id_perso=97&langue=lang_fr
  52. 52. Cameleon Context Aware Modelling for Enabling and Leveraging Effective interaction (IST R&D 2001-2004) http://giove.isti.cnr.it/projects/cameleon.html
  53. 53. http://giove.isti.cnr.it/projects/cameleon.html I.S.T.I (Pisa, Italy) Université Catholique de Louvain (Louvain, Belgium) Université Joseph Fourier (Grenoble, France) http://giove.isti.cnr.it/projects/cameleon/external_publications.html http://iihm.imag.fr/publication/C10a/ User Interface Plasticity: Model Driven Engineering to the Limit! http://iihm.imag.fr/publication/BDB+04a/ CAMELEON-RT: a Software Architecture Reference Model for Distributed, Migratable, and Plastic User Interfaces
  54. 54. Phase de “conception” Config 1 Modèle Tâches et Concepts IHM concrète IHM finale IHM abstraite Modèle Tâches et Concepts Modèles archétypes Config 2 Concepts Tâches User Plate-forme Environment Evolution Transition IHM concrète IHM finale IHM abstraite Concepts Tâches User Plate-forme Environment Evolution Transition Domaine Concepts Tâches Contexte User Plate-forme Environment Adaptation Evolution Transition Modèles ontologiques ARTStudio D. Thevenin Réification, Factorisation, Traduction, Abstraction / Reconception, Crossing, Intervention Humaine Spécifier 1 fois -> N Interfaces  approche par modèles
  55. 55. Tâches & Concepts IHM abstraite IHM concrète IHM finale Config 1 Différents niveaux d’abstraction
  56. 56. http://www.servface.eu/
  57. 57. +Annotations de services avec des éléments d’interfaces +Composition de services +Génération de l’interface du service « composite » à partir des annotations +2 approches: +1ière approche : composition visuelle des services +2ième approche : composition dirigée par les tâches Equipe de Fabio Paterno : http://hiis.isti.cnr.it/publications.php
  58. 58. Définir, valider et standardiser un langage de description d'interfaces utilisateur (UIDL) pour améliorer la productivité, la réutilisabilité et l'accessibilité d'applications interactives Un langage pour tous les acteurs de la constructions d’IHM basé sur des niveaux d’expressivité et des outils différents USer Interface eXtensible Markup Language Le consortium 7 pays, 28 organisations : PME, grandes entreprises -Thalès France, Telefonica -, des universités et centres de recherche. www.usixml.org programme ITEA2
  59. 59. Université catholique de Louvain : Jean Vanderdonckt Université Joseph Fourier Grenoble : Joelle Coutaz Publications Scientifiques du projet http://www.usixml.eu/effective-ie-done/scientific- publications http://www.usixml.eu/newsletters http://www.awt.be/web/mob/index.aspx?page=mob,fr,foc,100,062
  60. 60. Université catholique de Louvain : Jean Vanderdonckt http://uclouvain.academia.edu/JeanVanderdonckt/Papers Generating User Interface for Information Applications from Task, Domain and User models with DB-USE http://uclouvain.academia.edu/JeanVanderdonckt/Papers/270313/Generating_User_Interface_for_Information_Applications_from_Task_Domain_and_User_models_with_DB-USE User Interface Composition with UsiXML http://uclouvain.academia.edu/JeanVanderdonckt/Papers/270311/User_Interface_Composition_with_UsiXML
  61. 61. Université Joseph Fourier Grenoble : Joelle Coutaz http://iihm.imag.fr/publication/ http://iihm.imag.fr/publication/MFC11b/ Flexible Plans for Adaptation by End-Users http://iihm.imag.fr/publication/GCM+09a/ Composition dynamique d’Interfaces Homme-Machine : Besoin utilisateur ou Défi de chercheur ? Model Driven Adaptation for Plastic User Interfaces, Proceedings of the 11th IFIP TC 13 International Conference Interact’07
  62. 62. Construction d’applications adaptables par composition
  63. 63. Proposer un modèle d’architecture pour un service interactif N services fonctionnels et leurs interactions utilisateurs : comment fusionner le tout ? Services Fonctionnel Services D’interaction Adaptor Adaptor Dialogue
  64. 64. Comment fusionner 2 services respectant l’architecture? Composition d’arches ? Assemblage des services fonctionnels Quid des dialogues ? Expression et fusion Quid des IHM? Expression et fusion
  65. 65. Equipe Rainbow http://rainbow.i3s.unice.fr/doku.php?id=public:publications Un langage de description d’IHM Component model and programming : a first step to manage Human Computer Interaction Adaptation. In Mobile HCI’03 Du fonctionnel vers les IHM When the Functional Composition Drives the User Interfaces Composition: Process and Formalization Des IHM vers le fonctionnel https://nyx.unice.fr/publis/brel-pinna-dery-etal:2011.pdf "ONTOCOMPO: AN ONTOLOGY-BASED INTERACTIVE SYSTEM TO COMPOSE APPLICATIONS
  66. 66. Component model and programming : a first step to manage Human Computer Interaction Adaptation. In Mobile HCI’03 "When the Functional Composition Drives the User Interfaces Composition: Process and Formalization" in Proceedings of the Proceedings of the 3rd ACM SIGCHI symposium on Engineering interactive computing systems, ONTOCOMPO: AN ONTOLOGY-BASED INTERACTIVE SYSTEM TO COMPOSE APPLICATIONS http://iihm.imag.fr/publication/MFC11b/ Flexible Plans for Adaptation by End-Users http://iihm.imag.fr/publication/GCM+09a/ Composition dynamique d’Interfaces Homme-Machine : Besoin utilisateur ou Défi de chercheur ? Model Driven Adaptation for Plastic User Interfaces, Proceedings of the 11th IFIP TC 13 International Conference Interact’07 Generating User Interface for Information Applications from Task, Domain and User models with DB-USE http://uclouvain.academia.edu/JeanVanderdonckt/Papers/270313/Generating_User_Interface_for_Information_Applications_from_Task_Domain_and_User_models_with_DB-USE http://www.usixml.eu/newsletters User Interface Composition with UsiXML http://uclouvain.academia.edu/JeanVanderdonckt/Papers/270311/User_Interface_Composition_with_UsiXML
  67. 67. A Universal, Declarative, Multiple Abstraction-Level Language for Service-Oriented Applications in Ubiquitous Environments FABIO PATERNO’, CARMEN SANTORO, and LUCIO DAVIDE SPANO ISTI-CNR http://www.servface.eu/index.php?option=com_docman&task=cat_view&gid=34&limit=5&limitstart=0&order=date&dir=DESC&Itemid=60 Service Composition at the Presentation Layer using Web Service Annotations http://iihm.imag.fr/publication/C10a/ User Interface Plasticity: Model Driven Engineering to the Limit! http://iihm.imag.fr/publication/BDB+04a/ CAMELEON-RT: a Software Architecture Reference Model for Distributed, Migratable, and Plastic User Interfaces http://www.w3.org/2005/Incubator/model-based-ui/XGR-mbui-20100504

×