Download - Cours Adaptation des IHM
![Page 1: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/1.jpg)
IHM et Différents supports
Différents utilisateurs Différents environnements
Problématique - Aperçu des solutions industrielles et recherche
Anne-Marie Déry [email protected]
![Page 2: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/2.jpg)
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 œuvre 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)
![Page 3: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/3.jpg)
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
![Page 4: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/4.jpg)
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
![Page 5: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/5.jpg)
![Page 6: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/6.jpg)
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
![Page 7: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/7.jpg)
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
…..
![Page 8: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/8.jpg)
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
![Page 9: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/9.jpg)
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 œuvre 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)
![Page 10: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/10.jpg)
![Page 11: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/11.jpg)
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
![Page 12: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/12.jpg)
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 …
![Page 13: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/13.jpg)
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
![Page 14: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/14.jpg)
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….
![Page 15: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/15.jpg)
Supports dédiés à une activité
Niveau d’expertise des utilisateurs experts – Niveau de fiabilité En mobilité
![Page 16: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/16.jpg)
![Page 17: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/17.jpg)
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
![Page 18: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/18.jpg)
Supports mobiles
Mêmes usages ? Mêmes services
![Page 19: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/19.jpg)
Supports mobiles
Mêmes usages ? Mêmes services
![Page 20: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/20.jpg)
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 ?
![Page 21: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/21.jpg)
Adaptation aux utilisateurs
Une forte évolution ces dernières années
Informatique pour tous
Lyonnaise des eaux
![Page 22: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/22.jpg)
Adaptation aux utilisateurs
Des professionnels aux novices
Essayez votre coiffure, vos lunettes…
![Page 23: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/23.jpg)
De la domotique aux services
![Page 24: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/24.jpg)
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
![Page 25: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/25.jpg)
Pouvoir adapter le contenu
Pouvoir adapter les techniques d’interactions
Pouvoir adapter le layout
Quand et Comment ?
![Page 26: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/26.jpg)
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
![Page 27: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/27.jpg)
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
![Page 28: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/28.jpg)
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 ?
![Page 29: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/29.jpg)
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 ?
![Page 30: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/30.jpg)
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”
![Page 31: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/31.jpg)
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
![Page 32: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/32.jpg)
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
![Page 33: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/33.jpg)
Les solutions actuelles a des problemes simples existent pour le WEB
DES SOLUTIONs ad-hoc sont bien connues
Les travaux recherche sont nombreux
![Page 34: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/34.jpg)
![Page 35: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/35.jpg)
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/
![Page 36: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/36.jpg)
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
![Page 37: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/37.jpg)
◦ « 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
![Page 38: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/38.jpg)
![Page 39: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/39.jpg)
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
![Page 40: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/40.jpg)
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
![Page 41: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/41.jpg)
Analyser les besoins
Maquetter
Développer avec ou sans framework
Tester
![Page 42: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/42.jpg)
Mockup et Responsive design avec Balsamiq : http://support.balsamiq.com/customer/portal/articles/615901
![Page 43: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/43.jpg)
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.”).
![Page 44: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/44.jpg)
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/
![Page 45: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/45.jpg)
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/
![Page 46: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/46.jpg)
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/
![Page 47: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/47.jpg)
![Page 48: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/48.jpg)
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.
![Page 49: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/49.jpg)
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.
![Page 50: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/50.jpg)
http://www.developereconomics.com/pros-cons-top-5-cross-platform-tools/
![Page 51: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/51.jpg)
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
![Page 52: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/52.jpg)
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
![Page 53: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/53.jpg)
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
![Page 54: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/54.jpg)
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
![Page 55: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/55.jpg)
http://setandbma.wordpress.com/2012/03/19/mobile-game-development-tool-comparison/
![Page 56: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/56.jpg)
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
![Page 57: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/57.jpg)
![Page 58: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/58.jpg)
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
![Page 59: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/59.jpg)
![Page 60: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/60.jpg)
Cameleon Context Aware Modelling for Enabling and Leveraging Effective
interaction (IST R&D 2001-2004)
http://giove.isti.cnr.it/projects/cameleon.html
![Page 61: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/61.jpg)
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
![Page 62: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/62.jpg)
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
![Page 63: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/63.jpg)
Tâches &
Concepts
IHM
abstraite
IHM
concrète
IHM finale
Config 1
Différents niveaux d’abstraction
![Page 65: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/65.jpg)
+ 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
![Page 66: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/66.jpg)
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
![Page 67: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/67.jpg)
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
![Page 68: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/68.jpg)
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/270
313/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/270
311/User_Interface_Composition_with_UsiXML
![Page 69: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/69.jpg)
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
![Page 70: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/70.jpg)
Construction d’applications adaptables par composition
![Page 71: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/71.jpg)
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
![Page 72: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/72.jpg)
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
![Page 73: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/73.jpg)
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
![Page 74: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/74.jpg)
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
![Page 75: Cours Adaptation des IHM](https://reader031.vdocuments.pub/reader031/viewer/2022013107/547b297d5906b59a798b45a7/html5/thumbnails/75.jpg)
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