JsPhDDefense
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

JsPhDDefense

  • 1,414 views
Uploaded on

Slides of my PhD defence... ...

Slides of my PhD defence...
This is not the final version but the content is slightly the same.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,414
On Slideshare
1,409
From Embeds
5
Number of Embeds
1

Actions

Shares
Downloads
11
Comments
0
Likes
1

Embeds 5

http://www.linkedin.com 5

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Mega-IHM : Malléabilité des Interfaces Homme-Machine dirigée par les Modèles Jean-Sébastien Sottet (ceci n’est pas moi) Laboratoire LIG Equipes IIHM & ADELE Thèse de Doctorat
  • 2. Contexte : Informatique ambiante
    • Accès à l’information
      • Tout
      • Partout
      • Tout le temps
      • Tout de suite
    • Souplesse pour l’utilisateur
    • => Complexité pour l’ingénieur
  • 3. Problème traité : la complexité
    • Complexité des systèmes
      • Informatique ambiante
      • Diversité et combinaison de (nouvelles) technologies
    • Complexité du développement
      • Multiples acteurs
      • Multiples langages
      • Pas de capitalisation
      • Souvent ad-hoc
    • Complexité du domaine (de l’IHM)
      • Multiples disciplines
      • Multiples équipes de recherche
      • Multiples outils
      • … en évolution permanente
  • 4. Problème traité : la complexité
  • 5. Problème traité : la complexité
    • un exemple de système interactif graphique
  • 6. Problème traité : la complexité
    • un exemple de système interactif graphique
    Migration
  • 7. Problème traité : la complexité
    • un exemple de système interactif graphique
    Remodelage
  • 8. Problème traité : la complexité Remodelage Redistribution DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html> <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html;charset=UTF-8&quot;/> <title id=&quot;title&quot;>&quot; type=&quot;text/css&quot; href=&quot;http://data.hordes.fr/css/ie.css.gz?v=86&quot;/> <![endif]--> <!--[if IE 6]> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;http://data.hordes.fr/css/ie6.css.gz?v=86&quot;/> <![endif]--> <script type=&quot;text/javacript&quot; src=&quot;/js/horde.js.gz?v=28&quot;></script> </head> <body id=&quot;body&quot;> <div id=&quot;cache&quot;> <img src=&quot;http://data.hordes.fr/gfx/design/tab_hover.gif&quot; alt=&quot;&quot;/> </div> <div class=&quot;ieWarning&quot;> <img src=&quot;http://data.hordes.fr/gfx/icons/status_terror.gif&quot; alt=&quot;&quot;/> Vous utilisez une version ancienne d'Internet Explorer. Nous vous recommandons fortement de le <a href=&quot;http://www.microsoft.com/france/windows/products/winfamily/ie/default.mspx&quot; target=&quot;_blank&quot;>mettre à jour</a> ou d'<a href=&quot;http://www.getfirefox.com&quot;>installer Firefox</a>. </div> <div id=&quot;main&quot;> <div id=&quot;contentBg&quot;> <div id=&quot;content&quot;> <div id=&quot;notification&quot;> <div class=&quot;black&quot;></div> <div class=&quot;box&quot;> <div id=&quot;notificationText&quot;>< /div> <a href=&quot;#&quot; class=&quot;button&quot; onClick=&quot; DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html> <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html;charset=UTF-8&quot;/> <title id=&quot;title&quot;>&quot; type=&quot;text/css&quot; href=&quot;http://data.hordes.fr/css/ie.css.gz?v=86&quot;/> <![endif]--> <!--[if IE 6]> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;http://data.hordes.fr/css/ie6.css.gz?v=86&quot;/> <![endif]--> <script type=&quot;text/javascript&quot; src=&quot;/js/horde.js.gz?v=28&quot;></script> </head> <body id=&quot;body&quot;> <div id=&quot;cache&quot;> <img src=&quot;http://data.hordes.fr/gfx/design/tab_hover.gif&quot; alt=&quot;&quot;/> </div> <div class=&quot;ieWarning&quot;> <img src=&quot;http://data.hordes.fr/gfx/icons/status_terror.gif&quot; alt=&quot;&quot;/> &quot; target=&quot;_blank&quot;>mettre à jour</a> ou d'<a href=&quot;http://www.getfirefox.com&quot;>installer Firefox</a> . </div> <div id=&quot;main&quot;> <div id=&quot;contentBg&quot;> <div id=&quot;content&quot;> <div id=&quot;notification&quot;> <div class=&quot;black&quot;>< /div> <div class=&quot;box&quot;> <div id=&quot;notificationText&quot;>< /div> <a href=&quot;#&quot; class=&quot;button&quot; onClick=&quot;document.getElementById('body').className=''; d ocument.getElementById('notification').className=''; js.Tutorial.showTutorialStep(); return false&quot;>Fermer</a> < /div> </div> <div id=&quot;banner&quot; onclick=&quot;js.Js.reboot(); return false;&quot;> DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html> <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html;charset=UTF-8&quot;/> <title id=&quot;title&quot;>&quot; type=&quot;text/css&quot; href=&quot;http://data.hordes.fr/css/ie.css.gz?v=86&quot;/> <![endif]--> <!--[if IE 6]> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; ou d'<a href=&quot;http://www.getfirefox.com&quot;>installer Firefox</a>. </div> <div id=&quot;main&quot;> <div id=&quot;contentBg&quot;> <div id=&quot;content&quot;> <div id=&quot;notification&quot;> <div class=&quot;black&quot;></div> <div class=&quot;box&quot;> <div id=&quot;notificationText&quot;>< /div> <a href=&quot;#&quot; class=&quot;button&quot; onClick=&quot;document.getElementById('body').className=''; d ocument.getElementById('notification').className=''; js.Tutorial.showTutorialStep(); return false&quot;>Fermer</a> < /div> </div> <div id=&quot;banner&quot; onclick=&quot;js.Js.reboot(); return false;&quot;> </div> <!-- JS TOOLTIP --> <div id=&quot;tooltip&quot; class=&quot;dynamicTipCategoryHere&quot;> <div class=&quot;content&quot;> <div class=&quot;header&quot;> <div id=&quot;tooltipContent&quot;></div> </div> </div> </div> <!-- JS TOOLTIP --> <div id=&quot;tooltip&quot; class=&quot;dynamicTipCategoryHere&quot;> <div class=&quot;content&quot;> <div class=&quot;header&quot;> <div id=&quot;tooltipContent&quot;></div> </div> </div>
      • SVG, CSS, XUL, HTML, PHP, Sql, Osgi, Corba,Java, Servlet, Ajax, …
  • 9. Problème traité : la complexité Remodelage Redistribution DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html> <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html;charset=UTF-8&quot;/> <title id=&quot;title&quot;>&quot; type=&quot;text/css&quot; href=&quot;http://data.hordes.fr/css/ie.css.gz?v=86&quot;/> <![endif]--> <!--[if IE 6]> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;http://data.hordes.fr/css/ie6.css.gz?v=86&quot;/> <![endif]--> <script type=&quot;text/javacript&quot; src=&quot;/js/horde.js.gz?v=28&quot;></script> </head> <body id=&quot;body&quot;> <div id=&quot;cache&quot;> <img src=&quot;http://data.hordes.fr/gfx/design/tab_hover.gif&quot; alt=&quot;&quot;/> </div> <div class=&quot;ieWarning&quot;> <img src=&quot;http://data.hordes.fr/gfx/icons/status_terror.gif&quot; alt=&quot;&quot;/> Vous utilisez une version ancienne d'Internet Explorer. Nous vous recommandons fortement de le <a href=&quot;http://www.microsoft.com/france/windows/products/winfamily/ie/default.mspx&quot; target=&quot;_blank&quot;>mettre à jour</a> ou d'<a href=&quot;http://www.getfirefox.com&quot;>installer Firefox</a>. </div> <div id=&quot;main&quot;> <div id=&quot;contentBg&quot;> <div id=&quot;content&quot;> <div id=&quot;notification&quot;> <div class=&quot;black&quot;></div> <div class=&quot;box&quot;> <div id=&quot;notificationText&quot;>< /div> <a href=&quot;#&quot; class=&quot;button&quot; onClick=&quot; DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html> <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html;charset=UTF-8&quot;/> <title id=&quot;title&quot;>&quot; type=&quot;text/css&quot; href=&quot;http://data.hordes.fr/css/ie.css.gz?v=86&quot;/> <![endif]--> <!--[if IE 6]> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;http://data.hordes.fr/css/ie6.css.gz?v=86&quot;/> <![endif]--> <script type=&quot;text/javascript&quot; src=&quot;/js/horde.js.gz?v=28&quot;></script> </head> <body id=&quot;body&quot;> <div id=&quot;cache&quot;> <img src=&quot;http://data.hordes.fr/gfx/design/tab_hover.gif&quot; alt=&quot;&quot;/> </div> <div class=&quot;ieWarning&quot;> <img src=&quot;http://data.hordes.fr/gfx/icons/status_terror.gif&quot; alt=&quot;&quot;/> &quot; target=&quot;_blank&quot;>mettre à jour</a> ou d'<a href=&quot;http://www.getfirefox.com&quot;>installer Firefox</a> . </div> <div id=&quot;main&quot;> <div id=&quot;contentBg&quot;> <div id=&quot;content&quot;> <div id=&quot;notification&quot;> <div class=&quot;black&quot;>< /div> <div class=&quot;box&quot;> <div id=&quot;notificationText&quot;>< /div> <a href=&quot;#&quot; class=&quot;button&quot; onClick=&quot;document.getElementById('body').className=''; d ocument.getElementById('notification').className=''; js.Tutorial.showTutorialStep(); return false&quot;>Fermer</a> < /div> </div> <div id=&quot;banner&quot; onclick=&quot;js.Js.reboot(); return false;&quot;> DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html> <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html;charset=UTF-8&quot;/> <title id=&quot;title&quot;>&quot; type=&quot;text/css&quot; href=&quot;http://data.hordes.fr/css/ie.css.gz?v=86&quot;/> <![endif]--> <!--[if IE 6]> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; ou d'<a href=&quot;http://www.getfirefox.com&quot;>installer Firefox</a>. </div> <div id=&quot;main&quot;> <div id=&quot;contentBg&quot;> <div id=&quot;content&quot;> <div id=&quot;notification&quot;> <div class=&quot;black&quot;></div> <div class=&quot;box&quot;> <div id=&quot;notificationText&quot;>< /div> <a href=&quot;#&quot; class=&quot;button&quot; onClick=&quot;document.getElementById('body').className=''; d ocument.getElementById('notification').className=''; js.Tutorial.showTutorialStep(); return false&quot;>Fermer</a> < /div> </div> <div id=&quot;banner&quot; onclick=&quot;js.Js.reboot(); return false;&quot;> </div> <!-- JS TOOLTIP --> <div id=&quot;tooltip&quot; class=&quot;dynamicTipCategoryHere&quot;> <div class=&quot;content&quot;> <div class=&quot;header&quot;> <div id=&quot;tooltipContent&quot;></div> </div> </div> </div> <!-- JS TOOLTIP --> <div id=&quot;tooltip&quot; class=&quot;dynamicTipCategoryHere&quot;> <div class=&quot;content&quot;> <div class=&quot;header&quot;> <div id=&quot;tooltipContent&quot;></div> </div> </div>
      • SVG, CSS, XUL, HTML, PHP, Sql, Osgi, Corba,Java, Servlet, Ajax, …
  • 10. Une solution ? DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html> <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html;charset=UTF-8&quot;/> <title id=&quot;title&quot;>&quot; type=&quot;text/css&quot; href=&quot;http://data.hordes.fr/css/ie.css.gz?v=86&quot;/> <![endif]--> <!--[if IE 6]> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;http://data.hordes.fr/css/ie6.css.gz?v=86&quot;/> <![endif]--> <script type=&quot;text/javacript&quot; src=&quot;/js/horde.js.gz?v=28&quot;></script> </head> <body id=&quot;body&quot;> <div id=&quot;cache&quot;> <img src=&quot;http://data.hordes.fr/gfx/design/tab_hover.gif&quot; alt=&quot;&quot;/> </div> <div class=&quot;ieWarning&quot;> <img src=&quot;http://data.hordes.fr/gfx/icons/status_terror.gif&quot; alt=&quot;&quot;/> Vous utilisez une version ancienne d'Internet Explorer. Nous vous recommandons fortement de le <a href=&quot;http://www.microsoft.com/france/windows/products/winfamily/ie/default.mspx&quot; target=&quot;_blank&quot;>mettre à jour</a> ou d'<a href=&quot;http://www.getfirefox.com&quot;>installer Firefox</a>. </div> <div id=&quot;main&quot;> <div id=&quot;contentBg&quot;> <div id=&quot;content&quot;> <div id=&quot;notification&quot;> <div class=&quot;black&quot;></div> <div class=&quot;box&quot;> <div id=&quot;notificationText&quot;>< /div> <a href=&quot;#&quot; class=&quot;button&quot; onClick=&quot; DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html> <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html;charset=UTF-8&quot;/> <title id=&quot;title&quot;>&quot; type=&quot;text/css&quot; href=&quot;http://data.hordes.fr/css/ie.css.gz?v=86&quot;/> <![endif]--> <!--[if IE 6]> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;http://data.hordes.fr/css/ie6.css.gz?v=86&quot;/> <![endif]--> <script type=&quot;text/javascript&quot; src=&quot;/js/horde.js.gz?v=28&quot;></script> </head> <body id=&quot;body&quot;> <div id=&quot;cache&quot;> <img src=&quot;http://data.hordes.fr/gfx/design/tab_hover.gif&quot; alt=&quot;&quot;/> </div> <div class=&quot;ieWarning&quot;> <img src=&quot;http://data.hordes.fr/gfx/icons/status_terror.gif&quot; alt=&quot;&quot;/> &quot; target=&quot;_blank&quot;>mettre à jour</a> ou d'<a href=&quot;http://www.getfirefox.com&quot;>installer Firefox</a> . </div> <div id=&quot;main&quot;> <div id=&quot;contentBg&quot;> <div id=&quot;content&quot;> <div id=&quot;notification&quot;> <div class=&quot;black&quot;>< /div> <div class=&quot;box&quot;> <div id=&quot;notificationText&quot;>< /div> <a href=&quot;#&quot; class=&quot;button&quot; onClick=&quot;document.getElementById('body').className=''; d ocument.getElementById('notification').className=''; js.Tutorial.showTutorialStep(); return false&quot;>Fermer</a> < /div> </div> <div id=&quot;banner&quot; onclick=&quot;js.Js.reboot(); return false;&quot;> DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html> <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html;charset=UTF-8&quot;/> <title id=&quot;title&quot;>&quot; type=&quot;text/css&quot; href=&quot;http://data.hordes.fr/css/ie.css.gz?v=86&quot;/> <![endif]--> <!--[if IE 6]> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; ou d'<a href=&quot;http://www.getfirefox.com&quot;>installer Firefox</a>. </div> <div id=&quot;main&quot;> <div id=&quot;contentBg&quot;> <div id=&quot;content&quot;> <div id=&quot;notification&quot;> <div class=&quot;black&quot;></div> <div class=&quot;box&quot;> <div id=&quot;notificationText&quot;>< /div> <a href=&quot;#&quot; class=&quot;button&quot; onClick=&quot;document.getElementById('body').className=''; d ocument.getElementById('notification').className=''; js.Tutorial.showTutorialStep(); return false&quot;>Fermer</a> < /div> </div> <div id=&quot;banner&quot; onclick=&quot;js.Js.reboot(); return false;&quot;> </div> <!-- JS TOOLTIP --> <div id=&quot;tooltip&quot; class=&quot;dynamicTipCategoryHere&quot;> <div class=&quot;content&quot;> <div class=&quot;header&quot;> <div id=&quot;tooltipContent&quot;></div> </div> </div> </div> <!-- JS TOOLTIP --> <div id=&quot;tooltip&quot; class=&quot;dynamicTipCategoryHere&quot;> <div class=&quot;content&quot;> <div class=&quot;header&quot;> <div id=&quot;tooltipContent&quot;></div> </div> </div> Générer
  • 11. Solution explorée : la Malléabilité
    • Notion clé : point de malléabilité
      • = Point de décision en conception
    • Les conserver à l’exécution
    • Les manipuler à l’exécution
      • Concepteur
      • Utilisateur
  • 12. Approche : l’IDM
    • IDM = Ingénierie Dirigée par les Modèles
      • Les points de malléabilité sont des modèles en IHM
    • Trois principes essentiels
      • Explicitation
      • Capitalisation
      • Opérationnalisation
  • 13. Approche : l’IDM
    • IDM = Ingénierie Dirigée par les Modèles
      • Les points de malléabilité sont des modèles en IHM
    • Trois principes essentiels
      • Explicitation
      • Capitalisation
      • Opérationnalisation
        • système
        • développement
        • domaine
    Savoir et Savoir faire
  • 14.
    • Ingénierie Dirigée par les Modèles et megamodèle
    • Megamodèle et système : malléabilité des IHM
    • Megamodèle et développement : mega-IHM
    • Megamodèle et domaine : cartographie
    • Conclusion
    Plan
  • 15.
    • Ingénierie Dirigée par les Modèles et megamodèle
    • Megamodèle et système : malléabilité des IHM
    • Megamodèle et développement : mega-IHM
    • Megamodèle et domaine : cartographie
    • Conclusion
    Plan
  • 16.
    • Ingénierie Dirigée par les Modèles et megamodèle
    • Megamodèle et système : malléabilité des IHM
    • Megamodèle et développement : mega-IHM
    • Megamodèle et domaine : cartographie
    • Conclusion
    Plan
  • 17. IDM : Systèmes
    • Tout est «  système  »
    Un système
  • 18. Modèles et Systèmes
    • Un modèle représente un système
    Un modèle 
  • 19. Modèles et Systèmes  
  • 20. Modèles et Systèmes   
  • 21. Modèles et Systèmes    
  • 22. Modèles et Acteurs    
  • 23. Modèles et Métamodèles    Un metamodèle  Dimension Mur Fenêtre Porte 
  • 24. Modèles et Métamodèles  Dimension Mur Fenêtre Porte    
  • 25. Modèles et Métamodèles   Dimension Mur Fenêtre Porte    
  • 26. Modèles et Métamodèles   Dimension Mur Fenêtre Porte      wc anti-retour eau chaude eau froide
  • 27. Modèles et Métamodèles   Dimension Mur Fenêtre Porte       wc anti-retour eau chaude eau froide
  • 28. Megamodèle      Dimension Mur Fenêtre Porte      wc anti-retour eau chaude eau froide
  • 29. Megamodèle      Dimension Mur Fenêtre Porte      wc anti-retour eau chaude eau froide
  • 30. Mégamodèle d’IHM       Une IHM *
  • 31. Mégamodèle d’IHM      Une IHM  *
  • 32. Mégamodèle d’IHM Une IHM        * *
  • 33. Mégamodèle d’IHM       Une IHM  * *
  • 34. Mégamodèle d’IHM       Une IHM * 
  • 35. Mégamodèle d’IHM  Une IHM     * 
  • 36. Mégamodèle d’IHM       Une IHM * 
  • 37. Mégamodèle d’IHM       Une IHM  *
  • 38. Mégamodèle d’IHM  Une IHM     * 
  • 39. Mégamodèle d’IHM       Une IHM  *
  • 40. Mégamodèle d’IHM       Une IHM  *
  • 41. Mégamodèle d’IHM  Une IHM     * 
  • 42. Mégamodèle d’IHM       Une IHM * 
  • 43. Mégamodèle d’IHM       Une IHM  * *
  • 44. Mégamodèle d’IHM  Une IHM      * *
  • 45. Mégamodèle d’IHM       Une IHM   * * *
  • 46. Mégamodèle d’IHM       Une IHM  *
  • 47. Mégamodèle d’IHM  Une IHM      *
  • 48. Mégamodèle d’IHM       Une IHM *  * 
  • 49.    * 
  • 50.   *  
  • 51.    * 
  • 52. Mégamodèle d’IHM       *  
  • 53. Mégamodèle d’IHM     *    
  • 54. Mégamodèles
    • Un megamodèle est un graphe d’artefacts d’IDM
  • 55. Mégamodèles
    • Un megamodèle est un graphe d’artefacts d’IDM
  • 56. Synthèse : Megamodèle
    • Un megamodèle est un graphe d’artefacts d’IDM
    • nœuds
      • systèmes
      • modèles
      • metamodèles
      • transformations
    • arcs
      • µ : système-modèle:
      •  : modèle-metamodèle
      •  : (trace de) transformations entre modèles
      •  : transformations entre metamodèles
  • 57. Synthèse : Megamodèle
    • Un megamodèle est un graphe d’artefacts d’IDM
    • nœuds
      • systèmes
      • modèles
      • metamodèles
      • transformations
    • arcs
      • µ : système - modèle :
      •  : modèle - metamodèle
      •  : (trace de) transformations entre modèles
      •  : transformations entre metamodèles
  • 58.
    • Ingénierie Dirigée par les Modèles et megamodèle
    • Megamodèle et système : malléabilité des IHM
    • Megamodèle et développement : mega-IHM
    • Megamodèle et domaine : cartographie
    • Conclusion
    Plan
  • 59. Des IHM sur mesure aux IHM malléables
  • 60. Des IHM sur mesure aux IHM malléables
  • 61. Des IHM sur mesures aux IHM malléables
  • 62. Des IHM sur mesure aux IHM malléables
  • 63. Des IHM sur mesure aux IHM malléables
  • 64. Des IHM sur mesure aux IHM malléables
  • 65. Des IHM sur mesure aux IHM malléables
  • 66. Des IHM sur mesure aux IHM malléables
  • 67. Points de malléabilité
  • 68. Démonstrateur MARA
  • 69. Démonstrateur MARA
  • 70. Démonstrateur MARA
  • 71. Démonstrateur MARA
  • 72. Démonstrateur MARA
  • 73. Démonstrateur MARA
  • 74. Malléabilité : applications
    • Prototypage rapide
  • 75. Malléabilité : applications
    • Prototypage rapide
    • Exploration et comparaison d’alternatives d’IHM
  • 76. Malléabilité : applications
    • Prototypage rapide
    • Exploration et comparaison d’alternatives d’IHM
    Contrôle explicite Gestion des erreurs Compatibilité
  • 77. Malléabilité : applications
    • Prototypage rapide
    • Exploration et comparaison d’alternatives d’IHM
    • Adaptation au contexte
  • 78. Malléabilité : applications
    • Prototypage rapide
    • Exploration et comparaison d’alternatives d’IHM
    • Adaptation au contexte
    • Enseignement de l’IHM et de l’IDM
  • 79. Synthèse : Malléabilité
    • Conservation des modèles à l’exécution
    • Manipulation de l’IHM
    • au travers de ses points de malléabilité
    • Multiples applications
  • 80. Plan
    • Ingénierie Dirigée par les Modèles : megamodèle
    • Système : Malléabilité des IHM
    • Développement : Mega-IHM
    • Domaine : Cartographie
    • Conclusion
  • 81. Vue versus modèle Vue Modèle Syntaxe Abstraite Syntaxe Concrète
  • 82. Vue versus modèle IDM Vue Modèle Syntaxe Abstraite Syntaxe Concrète
  • 83. Vue versus modèle IDM IHM Vue Modèle Syntaxe Abstraite Syntaxe Concrète
  • 84. Vue versus modèle
    • Relation de concrétisation de la représentation µ i
    IDM IHM Vue µ i Modèle Syntaxe Abstraite Syntaxe Concrète
  • 85. IHM
    • Vue associée à un utilisateur sur un système
    Vue µ i Système
  • 86. IHM orientées modèles
    • Vue associée à un modèle représentant un système
    Vue µ i Modèle Système µ
  • 87. IHM orientées modèles
    • Vue associée à un modèle représentant un système
    <ApplicationModel> <RoomList> <rooms name=Cellar  function: =#//@ApplicationModel.0/@Function.0 /> <rooms name=Kitchen function: =#//@ApplicationModel.0/@Function.1 /> <rooms name= AlexDesk function: =#//@ApplicationModel.0/@Function.2 /> <rooms name=LivingRoom function: =#//@ApplicationModel.0/@Function.3 /> </RoomList> <Function name=SetCellar … </ApplicationModel> Vue µ i Modèle Système µ
  • 88. Taxonomie d’IHM
    • Extra-IHM
      • IHM du modèle d’une IHM
    IHM µ i Système Modèle µ Extra-IHM µ i
  • 89. Taxonomie d’IHM
    • Extra-IHM
      • IHM du modèle d’une IHM
    <taskModels> <tasks name=&quot;Manage Home Temperature&quot; decompositionOperator=&quot;#//@taskModels.0/@binaries.0&quot; taskType=&quot;#//@taskModels.0/@taskTypes.1&quot;/> <tasks name=&quot;Select Room&quot; taskType=&quot;#//@taskModels.0/@taskTypes.2&quot; manipulatedConcepts=&quot;#//@conceptModels.0/@concepts.0&quot; fromOperator=&quot;#//@taskModels.0/@binaries.0&quot;/> <tasks name=&quot;Set Room Temperature&quot; taskType=&quot;#//@taskModels.0/@taskTypes.0&quot; manipulatedConcepts=&quot;#//@conceptModels.0/@concepts.1&quot; fromOperator=&quot;#//@taskModels.0/@binaries.0&quot; interactor=&quot;#//@interactorModels.0/@interactors.0&quot;/> <binaries motherTask=&quot;#//@taskModels.0/@tasks.0&quot; nature=&quot;enablingWithInformationPassing&quot; subTasks=&quot;#//@taskModels.0/@tasks.1 #//@taskModels.0/@tasks.2&quot;/> <taskTypes name=&quot;Input&quot;/> <taskTypes name=&quot;Other&quot;/> <taskTypes name=&quot;Choice 1/n&quot;/> </taskModels> IHM µ i Système Modèle µ Extra-IHM µ i
  • 90. Taxonomie d’IHM
    • Extra-IHM
      • IHM du modèle d’une IHM
    <taskModels> <tasks name=&quot;Manage Home Temperature&quot; decompositionOperator=&quot;#//@taskModels.0/@binaries.0&quot; taskType=&quot;#//@taskModels.0/@taskTypes.1&quot;/> <tasks name=&quot;Select Room&quot; taskType=&quot;#//@taskModels.0/@taskTypes.2&quot; manipulatedConcepts=&quot;#//@conceptModels.0/@concepts.0&quot; fromOperator=&quot;#//@taskModels.0/@binaries.0&quot;/> <tasks name=&quot;Set Room Temperature&quot; taskType=&quot;#//@taskModels.0/@taskTypes.0&quot; manipulatedConcepts=&quot;#//@conceptModels.0/@concepts.1&quot; fromOperator=&quot;#//@taskModels.0/@binaries.0&quot; interactor=&quot;#//@interactorModels.0/@interactors.0&quot;/> <binaries motherTask=&quot;#//@taskModels.0/@tasks.0&quot; nature=&quot;enablingWithInformationPassing&quot; subTasks=&quot;#//@taskModels.0/@tasks.1 #//@taskModels.0/@tasks.2&quot;/> <taskTypes name=&quot;Input&quot;/> <taskTypes name=&quot;Other&quot;/> <taskTypes name=&quot;Choice 1/n&quot;/> </taskModels> IHM µ i Système Modèle µ Extra-IHM µ i
  • 91. Taxonomie d’IHM
    • Extra-IHM
    IHM µ i Système Modèle µ Extra-IHM µ i
  • 92. Taxonomie d’IHM
    • Meta-IHM
    Metamodèle χ Meta-IHM µ i IHM µ i Système Modèle µ Extra-IHM µ i
  • 93. Taxonomie d’IHM
    • Meta-IHM
    Metamodèle χ Meta-IHM µ i IHM µ i Système Modèle µ Extra-IHM µ i
  • 94. Taxonomie d’IHM
    • Meta-IHM
    Metamodèle χ Meta-IHM µ i IHM µ i Système Modèle µ Extra-IHM µ i
  • 95. Taxonomie d’IHM
    • Trans-IHM
      • IHM de transformation de modèles
    Metamodèle Metamodèle T µ Trans-IHM µ i Modèle Transformation
  • 96. Taxonomie d’IHM
    • Définition d’une trans-IHM
      • IHM de transformation entre modèles
    Metamodèle Metamodèle T µ Trans-IHM µ i Modèle Transformation
  • 97. Taxonomie d’IHM
    • Définition d’une trans-IHM
      • IHM de transformation entre modèles
    Metamodèle Metamodèle τ µ Trans-IHM µ i Modèle Transformation
  • 98. Taxonomie d’IHM
    • Définition d’une trans-IHM
      • IHM de transformation entre modèles
    Metamodèle Metamodèle T µ Trans-IHM µ i Modèle Transformation
  • 99. Taxonomie d’IHM
    • Définition d’une trans-IHM
      • IHM de transformation entre modèles
    Metamodèle Metamodèle τ µ Trans-IHM µ i Modèle Transformation
  • 100. Megamodèle pour les IHM τ MetaModèle Tâche Modèle Tâche Extra-IHM (Concepteur) Meta-IHM (linguiste) Modèle interacteur T χ µi µi IHM (utilisateur final) µ Modèle transformation µ Trans-IHM (Ingénieur) µi Extra-IHM (utilisateur) µi MetaModèle Interacteur χ Trans-IHM (Installateur) µi Meta-IHM (Etudiant) µi
  • 101. Megamodèle pour les IHM MetaModèle Tâche Modèle Tâche Extra-IHM (Concepteur) Meta-IHM (linguiste) Modèle interacteur τ χ µi µi IHM (utilisateur final) µ Modèle transformation µ Trans-IHM (Ingénieur) µi Extra-IHM (utilisateur) µi MetaModèle Interacteur χ Trans-IHM (Installateur) µi Meta-IHM (Etudiant) µi
  • 102. Megamodèle pour les IHM MetaModèle Tâche Modèle Tâche Extra-IHM (Concepteur) Meta-IHM (linguiste) Modèle interacteur τ χ µi µi IHM (utilisateur final) µ Modèle transformation µ Trans-IHM (Ingénieur) µi Extra-IHM (utilisateur) µi MetaModèle Interacteur χ Trans-IHM (Installateur) µi Meta-IHM (Etudiant) µi
  • 103. Megamodèle pour les IHM MetaModèle Tâche Modèle Tâche Extra-IHM (Concepteur) Meta-IHM (linguiste) Modèle interacteur τ χ µi µi IHM (utilisateur final) µ Modèle transformation µ Trans-IHM (Ingénieur) µi Extra-IHM (utilisateur) µi MetaModèle Interacteur χ Trans-IHM (Installateur) µi Meta-IHM (Etudiant) µi
  • 104. Mega-IHM
  • 105. Synthèse : Mega-IHM
    • Modèles observables et manipulables
    • concepteur et/ou utilisateur
    • Syntaxe abstraite versus concrète :
    • machines versus humains
    • Taxonomie d’IHM
    • Mega-IHM pour « tout » contrôler 
  • 106. Synthèse : Mega-IHM
    • Modèles observables et manipulables
    • concepteur et/ou utilisateur
    • Syntaxe abstraite versus concrète :
    • machines versus humains
    • Taxonomie d’IHM
    • Mega-IHM pour « tout » contrôler 
      • Uniquement dans un contexte local
  • 107. Plan
    • Ingénierie Dirigée par les Modèles : megamodèle
    • Système : Malléabilité des IHM
    • Développement : Mega-IHM
    • Domaine : Cartographie
    • Conclusion
  • 108. Ponts entre outils ?
  • 109. Ponts entre outils Extra-IHM (Concepteur) µi MetaModèle Tâche Modèle Tâche Extra-IHM (Concepteur) Meta-IHM (linguiste) Modèle interacteur τ χ µi µi IHM (utilisateur final) µ Modèle transformation µ Trans-IHM (Ingénieur) µi Extra-IHM (utilisateur) µi χ i χ i MetaModèle Interacteur χ Trans-IHM (Installateur) µi Meta-IHM (Etudiant) µi MetaModèle Tâche Modèle Tâche Extra-IHM (Concepteur) Modèle IUA τ χ µi Modèle transformation µ MetaModèle Interacteur χ
  • 110. Ponts entre outils MetaModèle Tâche MetaModèle Tâche
  • 111. Ponts entre outils MetaModèle Tâche MetaModèle Tâche
  • 112. Cartographie
  • 113. Cartographie
  • 114. Cartographie
  • 115. Cartographie
  • 116. Cartographie
  • 117. Cartographie : Evolution Dialogue Graph DiaTask V1.0 -8 Before DiaTask 1996 2004 2005
  • 118. Synthèse : cartographie
    • Megamodèle pour les domaines
      • recherche
      • industrie
    • Cartographie
      • opérationnelle
      • communicationnelle
    • Evolution des connaissances
  • 119. Plan
    • Ingénierie Dirigée par les Modèles
    • Malléabilité des IHM
    • Mega-IHM & megamodèle pour tout représenter et rendre accessible
    • Cartographie (megamodèle) pour les IHM
    • Conclusion
  • 120. En résumé
    • Problème : la complexité pour le concepteur
    • Approche suivie : l’IDM et megamodèle
    • Megamodèle utilisé à 3 niveaux
      • Système
      • Développement
      • Domaine
  • 121. Contributions - Système
    • Megamodèle pour identifier les points de malléabilité
    • Conservation des modèles à l’exécution
    • Démonstrateur MARA
    • Manipulation des représentations :
    • manipuler la réalité = malléabilité
      • (Vidéo)
  • 122. Contributions– Développement
    • Taxonomie des IHM orientées modèles
      • Extra-IHM
      • Meta-IHM
      • Trans-IHM
    • Capitalisation des modèles, metamodèles et transformations
    • Organisation de ces savoirs et savoir-faire
  • 123. (Meta)contribution– Domaine
    • Megamodèle pour la cartographie
      • Situer les contributions
      • Les comparer
      • Tracer les évolutions
      • Réutiliser et intégrer
    • Etat de l’art dirigé par les metamodèles
  • 124. Perspectives
    • Etendre l’ensemble des metamodèles
      • Ergonomie
      • Techniques d’interaction
      • Plasticité : modèles de contexte et d’évolution
    • Explorer le concept de mega-IHM et les techniques
    • Enseigner de l’IHM et de l’IDM
    • Compléter et opérationnaliser la cartographie
  • 125. Résultats
    • Publications : 14
      • Revues internationales avec comité de lecture : 1
      • Chapitres d'ouvrages : 1
      • Conférences internationales : 4
      • Workshop internationaux : 6
      • Conférences nationales : 2
  • 126.  
  • 127. Questions?
  • 128. Comparaison de metamodèles
    • Exemple CTTe
  • 129. Comparaison de metamodèles
    • Exemple CTTe
  • 130. Comparaison de metamodèles
  • 131. Comparaison de metamodèles
  • 132. Comparaison de metamodèles XML EMF
  • 133. Démonstrateur MARA
    • Apports technologiques
      • ATL sous forme de « bundle » OSGI
      • Metamodèles et modèles en EMF
      • Une infrastructure / d’interprétation de modèles à l’exécution
    • Apports conceptuels
      • Catalogue de modèles, metamodèles et de transformations
      • Megamodèle explicite et opérationnel.