Bref historique concernant les acteurs Introduction plasticit des
Bref historique concernant les acteurs Introduction : plasticité des IHMs – Page
Quand les organismes de normalisation s’y mettent … OASIS et W 3 C Introduction : plasticité des IHMs – Page 2
UIML http: //www. uiml. org/ dérivé d'XML permettant de décrire des interfaces graphiques. Il y a des outils (renderers) qui convertissent une représentation d'UIML en représentation pour divers GUI (par exemple Java awt). un langage commun de description d'interface utilisateur, ouvert et libre d'utilisation qui soit indépendants des plateformes, qu'il s'agisse des plateformes actuelles ou futures. définir un métalangage canonique qui peut décrire n'importe quelle interface utilisateur, sans être tributaire du type d'unité ou d'interface graphique utilisée. UIML peut décrire les interfaces utilisateur - interface de bureau, interface web, interface mobile, système embarqué, ou encore applications « voix » . UIML 1. 0: Décembre 1997 UIML 3. 1: Mars 2004 http: //www. oasis-open. org UIML 4 Introduction : plasticité des IHMs – Page 3
UIML – « 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 Introduction : plasticité des IHMs – Page 4 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
Traducteurs XML et XSL pour la présentation, UIML, SUNML, Xforms …. HTML Voice. ML WML Introduction : plasticité des IHMs – Page 5 XSL XML
User Interfaces langages XML dans tout ses états Introduction : plasticité des IHMs – Page
Recommandations W 3 C (World Wide Web Consortium) http: //www. w 3. org/2001/di/Activity CONSTAT : multiplication des terminaux, la distribution des contenus devient plus que jamais problématique. les données doivent être filtrées et leur format modifié. Transformation ? la reconnaissance des caractéristiques de l'équipement client par le serveur. Une solution : Le projet CC/PP (pour Composite Capability/Preference Profiles) 1999. Basé sur le format de meta-données RDF (Resource Description Framework), Application de XML pour décrire : les caractéristisques logicielles et matérielles d'un terminal (Web ou WAP, capacité machine, etc. ) + les informations relatives au profil de son utilisateur. Introduction : plasticité des IHMs – Page 7
Recommandations W 3 C CC/PP (dont font parti Ericsson, IBM, Nokia, SAP et Sun), Un panel d'appareils assez large (téléphone portable, PC, assistant personnel, . . . ), Avantage de CC/PP : proposer une méthode de description des configurations - réduire la quantité d'informations échangées entre client et serveur (protocoles de transmission sans fil restent limités en bande passante). - les variables d'un profil CC/PP (capacités du terminal, préférences utilisateur, etc. ) peuvent être appliquées au sein d'une feuille de style XSLT afin de créer ou d'adapter un document. Introduction : plasticité des IHMs – Page 8
XForms http: //www. w 3. org/2002/Forms/Activity. html l XForms un langage à balises pour les formulaires électroniques « modernes » Basés sur XML et renvoie les valeurs saisies dans le formulaire sous forme de document XML Il prend en compte l’authentification, l’utilisabilité et l’accessibilité, le device independence, l’internationalisation, et l’intégration pour plusieurs langages cibles tout en réduisant la mise en œuvre de traducteurs. Introduction : plasticité des IHMs – Page 9
Mobile Web Initiative http: //www. w 3. org/2005/MWI/Activity. html l W 3 C MWI travaille actuellement à la mise en place des meilleures pratiques pour les sites web et les applications sur mobile Il propose également des tests sur l’interoperabilité entre logiciels webs et l’usage du mobile au niveau social. Ils accueillent des groupes de travail sur la thématique générale de l’utilisation des mobiles 1 ere consigne : Design for one web (cf http: //www. w 3. org/Mobile) l Introduction : plasticité des IHMs – Page 10
WAI http: //www. w 3. org/WAI/ l l l Le Web est partout : les services publics sont en ligne (impots, sncf, enseignement, etc…) Il doit donc être accessible à TOUS Comment traiter le handicap : visuel, auditif, physique, cognitif, neurologique, etc. De plus les solutions ne doivent pas handicapées les personnes non handicapées Web Content Accessibility Initiative (WAI) représente des industriels, des chercheurs et des personnes connaissant bien les handicap Donner des consignes et développer des solutions Introduction : plasticité des IHMs – Page 11
WAI http: //www. w 3. org/WAI/ l Principaux résultats – Outils automatiques de validation de pages webs (les sites publics ont longtemps été non conformes aux tests) – Consignes pour évaluer si une page est accessible (exemple la faire lire par une synthèse vocale) – Consignes pour concevoir des pages accessibles (exemple classique du tag image à renseigner correctement) Introduction : plasticité des IHMs – Page 12
http: //www. w 3. org/2005/Incubator/model-basedui/charter/ Model-based User Interfaces Incubator Group Charter Model-based User Interfaces Incubator Group, a pour mission d’évaluer les travaux en recherche autour des modèles pour la conception des IHMs pour essayer de sortir des standard l Par exemple : les concepteurs d’Usi. XML font partie de ce groupe de réflexion Introduction : plasticité des IHMs – Page 13
Quand les RIA sont inspirés Introduction : plasticité des IHMs – Page
Passage d’une page Web à une IHM . . . Introduction : plasticité des IHMs – Page 15
RIAs RIA = le meilleur du web et du "desktop" RIA & conception des interfaces Séparer présentation - logique – données Briques d'IHM réutilisables Nécessité d'installer un plugin dans le navigateur et forte concurrence sur les technologies Multiplication des technologies sur le poste de travail ! . . . Introduction : plasticité des IHMs – Page 16
Solutions RIAs disponibles AJAX : un ensemble de techno open source éprouvées Asynchronous Javascript And XML Utilisation combinée nouvelle Autres offres Adobe Flex (2004) : http: //www. adobe. com/support/documentation/en/flex/ Microsoft Silverlight (2006) : http: //www. silverlight. net Sun Java. FX (2008) : http: //www. javafx. com/ Mozilla XUL (XML User Interface Language) http: //www. mozilla. org/projects/xul/ . . . Introduction : plasticité des IHMs – Page 17 Source : Google Insights
Exigence des supports mobiles l Illustration des besoins en entreprise – Pour la téléphonie l Exemple d’Open Plug Introduction : plasticité des IHMs – Page 18
Elips l Open-Plug – Créateur d’ELIPS – Créée en 2002, Open-Plug est basée à Sophia-Antipolis. Open-Plug est membre de la Fondation Li. Mo (Linux Mobile Foundation). – Fruit de 5 ans de R&D et a fait l’objet de dépôts de brevets. l ELIPS – environnement ouvert de développement (Framework) de téléphones portables grand public. CELIPS permet aux éditeurs de logiciels, aux fabricants de téléphones et aux opérateurs de téléphonie mobile de créer et de déployer des applications mobiles, des interfaces utilisateurs riches et des solutions logicielles. l Pourquoi ? – Pour le développement rapide des nouveaux modèles de téléphones portables et facilite l’implémentation de nouvelles solutions logicielles et la création d’interfaces utilisateurs. – Pour réutiliser leurs développements d’une plateforme de téléphone à l’autre et développer des variantes de leurs produits plus rapidement. Introduction : plasticité des IHMs – Page 19
Quand les chercheurs s’en mêlent… Introduction : plasticité des IHMs – Page
Equipes et travaux en présence Equipe IIHM Laboratoire IMAG à Grenoble – Gaelle Calvary & Joelle Coutaz l Equipe RAINBOW Laboratoire I 3 S à Sophia Antipolis l – Michel Riveill & Philippe Renevier & Audrey Occello & Anne Marie Dery l Laboratoire HIIS à l’université de Pise l Equipe IHM au Université de Valencienne l – Fabio Paterno – Anas Hariri & Sophie Lepreux & Christophe Kolski Laboratoire CHI Université catholique de Louvain – Jean Vanderdonckt Introduction : plasticité des IHMs – Page 21
Exemples d’articles EMMA pour la Plasticité en Mobilité In Actes de la 20ème Conférence francophone sur l’Interaction Homme-Machine (IHM’ 2008, Metz, France, Septembre 2008). 2008. Vincent Ganneau, Rachel Demumieux, Gaëlle Calvary http: //iihm. imag. fr/publication/GDC 08 a/ l Model-Driven Engineering of Multi-Target Plastic User Interfaces In Proc. of 4 th International Conference on Autonomic and Autonomous Systems ICAS 2008. pages 7 -14. 2008. Benoit Collignon, Jean Vanderdonckt, Gaëlle Calvary D. Greenwood, M. Grottke, H. Lutfiyya, M. Popescu (eds. ), IEEE Computer Society Press, Los Alamitos, Gosier, 16 -21 March 2008 http: //iihm. imag. fr/publication/CVC 08 a/ Anne-Marie Pinna-Déry, Cédric Joffroy, Philippe Renevier, Michel Riveill, Christophe Vergoni. "ALIAS: A Set of Abstract Languages for User Interface Assembly" in Proceedings of the 9 th IASTED International Conference Software Engineering and Applications (SEA'08), IASTED, pages 77 --82, ACTA Press, Orlando, Florida, USA, 16 -17 nov 2008 http: //rainbow. polytech. unice. fr/publis/pinna-dery-joffroy-etal: 2008. pdf Anne-Marie Pinna-Déry, Jérémy Fierstone. "Construction d'Interfaces Utilisateurs Par Fusion de Composants d'IHM : un Atout Pour la Mobilité" in Proceedings of the Premières Journées l Francophones: Mobilité et Ubiquité, 2004 Introduction : plasticité des IHMs – Page 22
Un cadre de référence : Cameleon Projet multi partenaires Introduction : plasticité des IHMs – Page
Cadre de référence : phase “conception” “Spécifier 1 fois -> N Interfaces” approche par modèles ARTStudio Modèles archétypes D. Thevenin Modèles ontologiques Config 1 Domaine Concepts Modèle Tâches et Concepts Tâches User Plate-forme IHM abstraite User Evolution IHM abstraite Plate-forme IHM concrète Environment Adaptation Config 2 Concepts Tâches Contexte Modèle Tâches et Concepts IHM concrète Evolution IHM finale Transition IHM finale User Plate-forme Environment Evolution Transition Réification, Factorisation, Traduction, Abstraction / Reconception, Crossing, Intervention Humaine Introduction : plasticité des IHMs – Page 24
Cadre de référence : phase “conception” Config 1 Tâches & Concepts IHM abstraite IHM concrète IHM finale Introduction : plasticité des IHMs – Page 25
Equipe IIHM : "Plasticité des IHM" l Approches explorées : 1) Composition d'IHM 2) Transformation de modèles (IDM). - métamodèles pour l'IHM - taxonomie d'IHM (extra-IHM, trans-IHM, meta-IHM, mega-IHM). l 3) Modèle d'évolution. - modèle utilisateur par réseau bayésien sur mobile - métamodèle d'évolution - premiers patrons d'adaptation. Introduction : plasticité des IHMs – Page 26
Projet RAINBOW : Plasticité l l Applications évolutives et adaptables – accessibles via un PDA, un portable ou une station – variabilité des fonctionnalités selon le contexte d'utilisation (mode dégradé, connecté ou déconnecté, dépendance des ressources…) Applications construites à base de composants (composants métiers, composants d’IHM, composants services…) S’appuyer sur les infrastructures systèmes (RMI, EJB, …) et sur une plate-forme à composants Exemples : – Agenda collaboratif – Gestion commerciale (facturations, commandes, client, fournisseur) Introduction : plasticité des IHMs – Page 27
Contenu du module Semaine 1 1 H 30: Introduction aux RIA (Audrey Occello) 2 H 00 : Introduction au module Semaine 2 4 H Cours Flex en entreprise Semaine 3 2 H + 2 H : Présentation Open Plug Flex pour Mobile Semaine 4 Semaine libérée Semaine 5 3 H : Cours XUL (Paul Franchi) Semaine 6 Des solutions recherche : Usi. XML + ALIAS Semaine 7 4 H : TP XUL (Paul Franchi) Semaine 8 D’autres solutions en recherche - Approche IIHM (Gaelle Calvary) Semaine 9 ENTRETIENS Introduction : plasticité des IHMs – Page 28
Evaluation Pour chaque thème abordé en cours définir le domaine de plasticité plateforme / environnement / utilisateur conception / exécution modèle sous jacent illustration du besoin sur un exemple avantages et inconvénients Conclusion : votre synthèse Bibliographie Travail individuel Rendu : apport PDF + entretiens Le rapport doit être rendu 2 jours avant l’entretien Introduction : plasticité des IHMs – Page 29
- Slides: 29