Bref historique concernant les acteurs
Quand les organismes de normalisation s’y mettent … OASIS et W3C
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
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 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 XSL HTML XML VoiceML WML XML et XSL pour la présentation, UIML, SUNML, Xforms …. XSL HTML XML VoiceML WML
User Interfaces langages XML dans tout ses états
Recommandations W3C (World Wide Web Consortium) http://www.w3.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.
Recommandations W3C 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.
XForms http://www.w3.org/2002/Forms/Activity.html 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.
Mobile Web Initiative http://www.w3.org/2005/MWI/Activity.html W3C 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 1ere consigne : Design for one web (cf http://www.w3.org/Mobile)
WAI http://www.w3.org/WAI/ 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
WAI http://www.w3.org/WAI/ 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)
http://www.w3.org/2005/Incubator/model-based-ui/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 Par exemple : les concepteurs d’UsiXML font partie de ce groupe de réflexion
Quand les RIA sont inspirés
Passage d’une page Web à une IHM ...
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 ! ...
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 JavaFX (2008) : http://www.javafx.com/ Mozilla XUL (XML User Interface Language) http://www.mozilla.org/projects/xul/ ... Macromedia 2004 -> Adobe 2005 silverlight 2006 javascript 1995 Xmlhttprequest 1999 dans IE5 Source : Google Insights
Exigence des supports mobiles Illustration des besoins en entreprise Pour la téléphonie Exemple d’Open Plug
Elips Open-Plug ELIPS Pourquoi ? Créateur d’ELIPS Créée en 2002, Open-Plug est basée à Sophia-Antipolis. Open-Plug est membre de la Fondation LiMo (Linux Mobile Foundation). Fruit de 5 ans de R&D et a fait l’objet de dépôts de brevets. 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. 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.
Quand les chercheurs s’en mêlent…
Equipes et travaux en présence Equipe IIHM Laboratoire IMAG à Grenoble Gaelle Calvary & Joelle Coutaz Equipe RAINBOW Laboratoire I3S à Sophia Antipolis Michel Riveill & Philippe Renevier & Audrey Occello & Anne Marie Dery Laboratoire HIIS à l’université de Pise Fabio Paterno Equipe IHM au Université de Valencienne Anas Hariri & Sophie Lepreux & Christophe Kolski Laboratoire CHI Université catholique de Louvain Jean Vanderdonckt
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/GDC08a/ Model-Driven Engineering of Multi-Target Plastic User Interfaces In Proc. of 4th 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/CVC08a/ 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 9th 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 Francophones: Mobilité et Ubiquité, 2004
Un cadre de référence : Cameleon Projet multi partenaires
Cadre de référence : phase “conception” “Spécifier 1 fois -> N Interfaces” approche par modèles ARTStudio D. Thevenin Modèles archétypes Domaine Concepts Tâches Contexte User Plate-forme Environment Adaptation Evolution Transition Modèles ontologiques Config 1 Modèle Tâches et Concepts Modèle Tâches et Concepts Config 2 Concepts Concepts Tâches Tâches IHM abstraite IHM abstraite User User Plate-forme Plate-forme IHM concrète IHM concrète Environment Environment Evolution Evolution IHM finale IHM finale Transition Transition Réification, Factorisation, Traduction, Abstraction / Reconception, Crossing, Intervention Humaine
Cadre de référence : phase “conception” Config 1 Tâches & Concepts IHM abstraite IHM concrète IHM finale
Equipe IIHM : "Plasticité des IHM" 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). 3) Modèle d'évolution. - modèle utilisateur par réseau bayésien sur mobile - métamodèle d'évolution - premiers patrons d'adaptation.
Projet RAINBOW : Plasticité 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) 27
Contenu du module Semaine 1 1H30: Introduction aux RIA (Audrey Occello) 2H00 : Introduction au module Semaine 2 4H Cours Flex en entreprise Semaine 3 2H + 2H : Présentation Open Plug Flex pour Mobile Semaine 4 Semaine libérée Semaine 5 3H : Cours XUL (Paul Franchi) Semaine 6 Des solutions recherche : UsiXML + ALIAS Semaine 7 4H : TP XUL (Paul Franchi) Semaine 8 D’autres solutions en recherche - Approche IIHM (Gaelle Calvary) Semaine 9 ENTRETIENS
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