Les Interfaces Homme Ordinateur

1. Les Interfaces Homme Ordinateur Présentation générale mis à jour en Février 2008

2. Actuellement • Windows • Xwindow • Mac • Html • Xml/Xslt/Xpath... • Php • Gif/Jpeg • Flash ActionScript swf • Javascript • Java • bibliothèques propriétaires • …

3. Enjeux • Interopérabilité • Portabilité • Bibliothèques de composants • Hégémonie • Maîtrise du monde

4. Les Interfaces Homme Ordinateur Exemples et concepts

5. Interfaces multimodes • Mode Standard / mode Expert • Exemple : Nero

6. Interfaces "MDI" • Multiple Document Interfaces = interfaces à documents multiples • gestion d'un espace de travail interne à l'application • Ex : Visual C++, Eclipse, Word, Powerpoint etc.

7. Interfaces MDI gérées à fenêtres indépendantes • Ex : Word, Powerpoint • Systèmes hybrides : Netscape / Firefox

8. IDE • Integrated development environment = Environnement de développement intégré • Combinaison de fenêtre de message, fenêtre de travail, fenêtre d'exploration, fenêtre d'information • Ex : Visual C++, Eclipse, OPL Studio, Powerpoint

9. IDE à perspectives multiples • Organisations prédéfinies de fenêtres de travail selon le type de tache effectuée • Ex : Eclipse

10. Interfaces Wizards • L'utilisateur est guidé par une succession d'écrans • Ex : installeurs, mode standard de nombreuses interfaces (Nero), Dr Divx

11. Environnements à Plugins • Des applications dont les fonctionnalités peuvent être complétées par l’utilisateur, par ajout simple de modules • Ex: Eclipse

12. Les Interfaces Homme Ordinateur Concepts Fondamentaux

13. Niveaux logiques • Trois niveaux logiques dans les interfaces • Niveau graphique (interaction de bas niveau) • Niveau composant (Widget / Charte graphique) • Niveau dialogue (modèles d'interaction)

14. Analogie avec les languages • Trois niveaux • Niveau lexical : composants élémentaire (boutons, labels etc...) • Niveau syntaxique : règles de bonne composition de composants élémentaires • Niveau sémantique : fonctions de interfaces

15. Concepts Fondamentaux de bas niveau • Fenêtre • Dessin • Attribut Graphique • Contexte Graphique • Événement • Plan visuel • Instrument de pointage (pointeur) • Protocole de réaffichage (<expose>) • Hiérarchie de fenêtres • Modalité

16. Concepts fondamentaux de niveau Composant • Attribut (grisé,actif,accélérateur, etc...) • Callback • Distribution des événements (Dispatch) • Automate de prise en charge des événements • Accélérateur • Hiérarchie d'objets • Gadgets/Widgets • Menu / Pop up menu

17. Concepts Répandus de niveau Dialogue • Ces éléments sont sujet à des progrès constants, et à des modes • Feuille à onglets • Assistant (Wizard) • Menus dynamiques • Boite de sélection de fichier • Sélecteur d'arborescence • Menu contextuel bouton droit • Changement de "skin" • Bouton "advanced"/ ou "propriétés"

18. Feuille à Onglets

19. Wizard

20. Selection de fichiers

21. Explorateur d'arborescences

22. Communication Inter Applications • Copier Coller • Drag and drop • Ole DCOM • Concept de Plugin • Corba

23. Cas particulier des interfaces pour le graphisme 2D • Différents modèles d'automates pour le graphisme • Powerpoint • Xfig • Bounding Box • Point de contrôle • Quadtrees pour l'accès rapide aux éléments • permet de cliquer sur un parmi plusieurs centaines de milliers d'éléments affichés

24. Cas particulier de la 3D • Utilisation de la souris en 3D • Logique de l'envoi d'événements (click) • Problème de l'identification de l'objet pointé • Point de contrôle • Navigation 3D

25. Cas particulier : la simulation d'appareil • L'ordinateur remplace de nombreux appareils électroniques, • Le bouton rotatif, l'interrupteur à bascule (switch), l'afficheur graphique, etc.. ont été incorporés comme des métaphores utilisables

26. Réalisation d'une interface: cas simple • Application mono poste • Choix d'un environnement cible (Unix/Windows) • Choix d'un environnement de développement • Choix d'une bibliothèque de composants graphiques • portabilité, efficacité, adéquation au besoin ... • la bibliothèque apporte sa propre charte graphique, et des éléments relatifs au dialogue • Possibilité d'innover dans la présentation et les interacteurs selon le public visé et le goût

27. Réalisation d'une interface en environnement industriel • Application multi poste • Développement en équipe • Choix techniques complexes (distribution, bases de données etc...) • Définition/respect d'une charte graphique • Spécification/Conception de l'interface et du logiciel • lié au besoin de respecter des délais et de travailler en équipe • Suivi d'un cycle de vie de type développement rapide d'applications (RAD)

28. L'analyse des besoins en matière d'IHO • Analyse du travail pour informatisation • Intégration du prototypage dans un processus répétitif de type RAD / spirale de Boehm • 1 analyse du besoin • 2 réalisation d'un prototype • 3 évaluation avec le client • 4 évaluation des risques; retour en 1 • Le RAD prévoit des échéances fixes, et strictes pour chaque cycle

29. Les Interfaces Homme Ordinateur Les grands paradigmes techniques

30. Principe Fondamental • Assurer la séparation des interfaces et des applications: • au niveau du code source • au niveau des exécutables

31. Séparation IHO/Application • Modèle client/serveur • disparu • Modèle serveur/serveur • xwindows • Modèle associatif • windows

32. Prise en charge de l'utilisateur • Utilisateur maître • threads • possibilité d'interruption de tâche • Utilisateur guidé plus ou moins contraint • remplissage de formulaires • fenêtres modales

33. Couches Réseau Utilisées • pipes, sockets tcpip • rmi • ole • http • corba

34. Avancées techniques fondamentales • connexion réseau sécurisée (tcp/ip) • concept de struct -> object graphique • pointeur de fonctions -> callback • chargement dynamique de bibliothèque • interprétation des symboles d'une dll • concept d'objet • chargement dynamique de classe

35. X Windows Protocole X Client 1 Client 2 Serveur X Client 3 Client 4 Serveur X Client 5

36. Windows Windows Windows Ole Server Ole Server Client 1 Client 2 Client 3 Client 4 Client 5

37. Jsp/Php/Asp Prg 1 Navigateur Web Server:80 Prg 2 Navigateur Prg 3 Web Server:80 Prg 4

38. Limitations de XWindow • La communication repose sur un protocole d'assez bas niveau (X) non construit sur la base de RMI, corba, etc • La communication entre applications se fait donc soit via le serveur X par des échanges de propriétés, soit directement, via tcp/ip ou toute couche supérieure (Corba)

39. Avantages de XWindow • Fenêtre = ressource partagée Machine 3 Window Id Machine 1 Machine 2

40. Avantages de XWindow • Tout est fait pour permettre l'affichage d'informations provenant de différentes machines simultanément • Totale interopérabilité, tout programme client s'exprimant selon le protocole X peut se connecter à tout serveur, même au bout du monde et d'une autre architecture matérielle • Le protocole X est très léger (pas de codage Xdr) • La boucle d'événements est sophistiquée

41. 3 4 1 2 1 2 3 4 2 1 4 3 4 3 2 1 Interopérabilité selon XwindowProblème du ByteSex • La machine qui établit la connexion envoie un entier particulier, qui permet au destinataire de connaître le codage des entiers chez son partenaire • Ensuite, si nécessaire, celui qui "subit" la connexion traduit systématiquement ses entrées pour les convertir Machine 1 Machine 1 Machine 2 (4 + 3*28 + 2*216 + 224) Machine 3

42. Copie d'une "struct" pour C (XWindow) struct char buffer ...

43. Copie d'une struct pour Xdr • Définition récursive: char* Xdr (struct,buf){ buf=Xdr(a ,buf); buf=Xdr(b ,buf); buf=Xdr(c ,buf); buf=Xdr(d ,buf); buf=Xdr(e ,buf); return buf; } • A partir des fonctions de base char* Xdr (int,char*); ... struct a b c d e

44. Avantages de Windows • Intégration dans l'environnement Windows où les dll sont totalement interprétées (on peut interroger dynamiquement une dll pour savoir ce qu'elle offre comme services) • Disponibilité de OLE pour les communications inter applications, possibilité de rmi (remote method invocation) • La fluidité est garantie par une intégration totale au système • L'accès aux ressources graphiques est direct

45. Limitations de Windows • Le graphisme et l'interaction sont gérés par l'OS. On ne peut donc pas changer de serveur graphique, ou de window manager. On ne peut que changer de "skin". • Les couches logicielles traversées sont nombreuses, et consomment plus de ressources pour la communication inter processus

46. Avantages du modèle Html • Le client peut choisir son style d'affichage, ainsi que le contenu (avec un fichier de style css, ou un programme de transformation xslt) • Le client choisit son navigateur

47. Limitations du modèle Html • Un programme ne décide pas d'afficher quelque part, c'est l'utilisateur présent devant son écran qui choisit d'afficher une adresse (mode ‘pull’) • L'affichage est en mode "page" et non en mode "fenêtre" : cela change grace aux bibliothèques javascript et flash action script : ext-JS, tinyMCE… • Toute intervention sur l'écran mobilise beaucoup de ressources: • réseau • ré-affichage complet de la page (sauf ajax) • transfert complet de contexte lors de la requête (cookies - même en ajax…)

48. Gestion du Contexte • Dans le cas Html, le protocole permet l'interruption de connexion en gardant la session ouverte Le contexte peut être : • conservé par le serveur • conservé par le client • non conservé soit en mode session, soit de façon rémanente

49. Le Modèle Thin Client • Plutôt que d'exécuter des algorithmes d'interface complexes au niveau du client, • on crée une "photo" d'écran sur un serveur, que l'on envoie à destination, avec simplement des zones de capture d'événements et leurs adresses associées ou bien la : ici : ok

50. Les Interfaces Homme Ordinateur Bibliothèques