Présenté par : M. Bouderbala Promotion : 3ème Année LMD Informatique / Semestre N°5 Etablissement : Centre Universitaire de Relizane Année Universitaire : 2020/2021
Elaboré par M.Bouderbala / CUR 1 Elaboré par M.Bouderbala / CUR 2 Croquis, maquette et prototype et après …?
Elaboré par M.Bouderbala / CUR 3 système interactif vs. système algorithmique
Système algorithmique (fermé) : lit des entrées, calcule, produit un résultat il y a un état final Système interactif (ouvert) : évènements provenant de l’extérieur boucle infinie, non déterministe
Elaboré par M.Bouderbala / CUR 4 Problème Nous avons appris à programmer des algorithmes (la partie “calcul”)
La plupart des langages de programmation (C, C++, Java, Lisp, Scheme, Ada, Pascal, Fortran, Cobol, ...) sont conçus pour écrire des algorithmes, pas des systèmes interactifs
Elaboré par M.Bouderbala / CUR 5 Les Bibliothèques graphique Un widget toolkit ( Boite d'outil de composant d'interface graphique) est une bibliothèque logicielle destinée à concevoir des interfaces graphiques. Fonctionnalités pour faciliter la programmation d’applications graphiques interactives (et gérer les entrées)
Windows : MFC (Microsoft Foundation Class), Windows Forms (NET Framework) Mac OS X : Cocoa Unix/Linux : Motif Multiplateforme : Java AWT/Swing, QT, GTK
Elaboré par M.Bouderbala / CUR 6 Bibliothèque graphique Une Bibliothèque graphique est une bibliothèque logicielle spécialisée dans les fonctions graphiques. Elle permet d'ajouter des fonctions graphiques à un programme. Ces fonctions sont classables en trois types qui sont apparus dans cet ordre chronologique et de complexité croissante : 1. Les bibliothèques de tracé d'éléments 2D 2. Les bibliothèques d'interface utilisateur 3. Les bibliothèques 3D
Elaboré par M.Bouderbala / CUR 7 Les bibliothèques de tracé d'éléments 2D Ces bibliothèques sont également dites bas niveau. Elles permettent de tracer les éléments graphiques de base que sont les lignes, les polygones et d'afficher des pixels ce qui permet d'afficher des icônes et des images. Les bibliothèques graphiques peuvent communiquer directement avec le matériel c’est-à-dire la mémoire vidéo ou une carte graphique ou bien utiliser un pilote. La bibliothèque X Window System sous Unix est typiquement une bibliothèque dédiée principalement à ce type de fonctions. Certains anciens langages comme le BASIC comprenaient des fonctions graphiques comme partie intégrante du langage.
Elaboré par M.Bouderbala / CUR 8 Les bibliothèques d'interface utilisateur Les interfaces utilisateurs sont les éléments graphiques qui permettent à l'utilisateur d'interagir avec le programme. Apparues avec l'ordinateur Star de Xerox, elles sont maintenant la base de l'ergonomie des ordinateurs. Elles permettent de construire une représentation graphique au programme avec des fenêtres, boutons…etc Dans les bibliothèques d'interface utilisateur on peut citer Motif, Qt, GTK, GNOME, Win32.
Elaboré par M.Bouderbala / CUR 9 Les bibliothèques 3D Apparues en dernier chronologiquement, les bibliothèques 3D permettent de faire de la synthèse d'image 3D c’est-à-dire de dessiner des éléments en volume. La première bibliothèque 3D était faite par Silicon Graphics : GL devenue OpenGL par la suite est l'une des plus connues avec DirectX de Microsoft. Les bibliothèques 3D actuelles tirent parti, quand elles le peuvent, des capacités des cartes accélératrices.
Elaboré par M.Bouderbala / CUR 10 Quelque widget toolkits
Elaboré par M.Bouderbala / CUR 11 Abstract Window Toolkit (AWT) Abstract Window Toolkit (AWT) est une bibliothèque graphique pour Java, faisant partie de Java Foundation Classes (JFC) qui est un Framework graphique pour Java composé de AWT, Swing et Java2D.
Un framework désigne en programmation informatique un ensemble d'outils et de composants logiciels à la base d'un logiciel ou d'une application. C'est le framework, ou structure logicielle en français, qui établit les fondations d'un logiciel ou son squelette.
AWT a été introduite dès les premières versions de Java ; depuis Java 2, la bibliothèque de gestion de fenêtre officielle est Swing. Toutefois, AWT sert encore de fondement à Swing, dans la mesure où de nombreuses classes Swing héritent de classes AWT.
Elaboré par M.Bouderbala / CUR 12 Abstract Window Toolkit (AWT) Package java.awt : bas-niveau Ce package permet de : Créer des interfaces graphiques, Dessiner des graphiques, Dessiner des images, Gérer le placement.
Elaboré par M.Bouderbala / CUR 13 Swing >>>>FX Swing est une bibliothèque graphique pour le langage de programmation Java, faisant partie du package Java Foundation Classes (JFC), inclus dans J2SE. Swing constitue l'une des principales évolutions apportées par Java 2 par rapport aux versions antérieures. Swing offre la possibilité de créer des interfaces graphiques identiques quel que soit le système d'exploitation sous-jacent, au prix de performances moindres qu'en utilisant Abstract Window Toolkit (AWT). Il utilise le principe Modèle-Vue-Contrôleur (MVC, les composants Swing jouent en fait le rôle de la vue au sens du MVC) et dispose de plusieurs choix d'apparence pour chacun des composants standards. Avec l'apparition de Java 8 en mars 2014, JavaFX devient la bibliothèque graphique officielle du langage Java, pour toutes les sortes d'application (applications mobiles, applications sur poste de travail, applications Web), le développement de son prédécesseur Swing étant abandonné (sauf pour les corrections de bogues).
Elaboré par M.Bouderbala / CUR 14 Swing
Package javax.swing : haut-niveau Ce package permet de : créer des interfaces graphiques, dessiner des graphiques, dessiner des images.
Elaboré par M.Bouderbala / CUR 15 widget Recouvre deux notions distinctes en relation avec les interfaces graphiques : un composant d'interface graphique, un élément visuel d'une interface graphique (bouton, barre de défilement, liste déroulante, etc.), un widget interactif, un petit outil qui permet d'obtenir des informations (météo, actualité, dictionnaire, carte routière, pense-bête – en anglais post-it –, traducteur, etc.) ;
Elaboré par M.Bouderbala / CUR 16 widget
Elaboré par M.Bouderbala / CUR 17 les widgets de Swing
Elaboré par M.Bouderbala / CUR 18 les widgets de Swing
Elaboré par M.Bouderbala / CUR 19 Qt Qt est une API orientée objet et développée en C++ par Qt Development Frameworks, filiale de Digia. Qt offre des composants d'interface graphique (widgets), d'accès aux données, de connexions réseaux, de gestion des fils d'exécution, d'analyse XML, etc. ; Qt permet la portabilité des applications qui n'utilisent que ses composants par simple recompilation du code source. Les environnements supportés sont les Unix (dont GNU/Linux) qui utilisent le système graphique X Window System ou Wayland, Windows, Mac OS X et également Tizen. Le fait d'être une bibliothèque logicielle multiplateforme attire un grand nombre de personnes qui ont donc l'occasion de diffuser leurs programmes sur les principaux OS existants. Qt est notamment connu pour être le framework sur lequel repose l'environnement graphique KDE, l'un des environnements de bureau par défaut de plusieurs distributions GNU/Linux.
Elaboré par M.Bouderbala / CUR 20 jQuery jQuery est une bibliothèque JavaScript libre et multi- plateforme créée pour faciliter l'écriture de scripts côté client dans le code HTML des pages web. Elle permet d'exploiter la puissance de JavaScript pour accomplir une myriade de choses géniales sur une page web; La première version est lancée en janvier 2006 par John Resig.
La bibliothèque contient notamment les fonctionnalités suivantes : Ajouter, supprimer ou modifier des éléments HTML au sein de votre page. Changer les styles des éléments de la page en modifiant le CSS qui leur est associé. Animer des éléments de votre page. Et bien plus encore !
Elaboré par M.Bouderbala / CUR 21 jQuery
Depuis sa création en 2006 et notamment à cause de la complexification croissante des interfaces Web, jQuery a connu un large succès auprès des développeurs Web et son apprentissage est aujourd'hui un des fondamentaux de la formation aux technologies du Web. Il est à l'heure actuelle le framework front-end le plus utilisé au monde (plus de la moitié des sites Internet en ligne intègrent jQuery).
Elaboré par M.Bouderbala / CUR 22 Elaboré par M.Bouderbala / CUR 23 modélisation d'interfaces On a coutume de dire : « Un dessin vaut mieux qu'un beau discours » ; Réaliser un modèle, c'est avant tout dessiner ce que l'on a compris d'un problème dans une syntaxe précise (Ex: la syntaxe UML ou Merise). Un modèle va donc nous servir communiquer et échanger des points de vue afin d'avoir une compréhension commune et précise d'un même problème.
Elaboré par M.Bouderbala / CUR 24 modélisation d'interfaces La représentation visuelle (schématique) des interactions entre l'utilisateur et la machine permet d'organiser l'accès à toutes les fonctions qui seront proposées par l'interface, facilitant ainsi la phase de conception logicielle. Il n'existe pas, à ce jour, de diagramme "officiel" dans le langage UML (Unified Modeling Langage) propre à la modélisation des IHM. Ci après on cite quelque modèles et outils pouvant pallier cette absence.
Elaboré par M.Bouderbala / CUR 25 LA MODELISATION DYNAMIQUE SOUS UML UML: Le langage de modélisation unifié, de l'anglais Unified Modeling Language (UML), est un langage de modélisation graphique à base de pictogrammes conçu pour fournir une méthode normalisée pour visualiser la conception d'un système. Il est couramment utilisé en développement logiciel et en conception orientée objet.
Elaboré par M.Bouderbala / CUR 26 LA MODELISATION DYNAMIQUE SOUS UML Un comportement = Une réaction. . Les diagrammes regroupés dans cette catégorie permettent de modéliser le comportement dynamique du système. On s'intéresse particulièrement à trois d’entre eux : Le diagramme d’activités Le diagramme d’état-transition Le diagramme d’interactions
Elaboré par M.Bouderbala / CUR 27 Le diagramme d’activités Le diagramme d’activités fournit une représentation du comportement d’un système en décomposant, de façon fonctionnelle, les traitements et plus particulièrement, les cheminement de flots de contrôle et de flots de données. Ils sont particulièrement adaptés à la description des cas d'utilisation. (Le + : définition assez précise pour pouvoir générer du code)
Elaboré par M.Bouderbala / CUR 28 Le diagramme d’activités
Elaboré par M.Bouderbala / CUR 29 Le diagramme d'état transition Le diagramme d'état transition qui représente les états possibles des objets d’une classe donnée ainsi que les transitions entre ses états. Il est basé sur les concepts d’état (situation observée à un moment déterminé), transition (passage d’un état à l’autre), évènement(ensemble d’informations pouvant déclencher la transition) et d’activité (action ayant une durée dans le temps). (Le +:définition assez précise pour pouvoir générer du code)
Elaboré par M.Bouderbala / CUR 30 Le diagramme d'état transition
Elaboré par M.Bouderbala / CUR 31 Le diagramme d’interactions Le diagramme d’interactions offre une vue sur l’ensemble des flux de contrôle du système. Il est réalisé avec le même graphisme que le diagramme d’activité. Chaque élément du diagramme peut ensuite être détaillé à l’aide d’un diagramme de séquence ou d’un diagramme d’activité.
Elaboré par M.Bouderbala / CUR 32 Le diagramme d’interactions
Elaboré par M.Bouderbala / CUR 33 LE SNI (SCHEMA NAVIGATIONNEL D'INTERACTION) Le SNI permet de concevoir et de modéliser la logique d'enchaînement des fonctions de l'application en fonction du comportement supposé de l'utilisateur.
Le SNI est purement conceptuel. Il est indépendant de la technologie utilisée, du type d'IHM (menu, bouton, toucher) et de tout aspect matériel (clavier, type d'écran, souris, etc.) Il permet une représentation simple et claire de l'enchainement des écrans d'une IHM et peut ainsi etre compris par tous les intervenants du projet.
Elaboré par M.Bouderbala / CUR 34 LE SNI (SCHEMA NAVIGATIONNEL D'INTERRACTION) Ce modèle intègre des éléments facilitant la représentation visuelle des éléments d'interaction présents dans l'interface. Il facilite, dès le début des étapes de conception, la visualisation des classes nécessaires au développement.
Elaboré par M.Bouderbala / CUR 35 LE SNI (SCHEMA NAVIGATIONNEL D'INTERRACTION) Les Unités de Dialogue On appellera "Unité de Dialogue" (UD) l'ensemble des fonctions offertes à l'utilisateur de façon simultanée (sur un même écran, dans une même fenêtre, dans une même page) Chaque UD est représentée par un ou plusieurs symboles dans le SNI Une UD élémentaire = un seul symbole Une UD composée = plusieurs symboles
Elaboré par M.Bouderbala / CUR 36 SNI UD élémentaire
Elaboré par M.Bouderbala / CUR 37 SNI UD composée
Elaboré par M.Bouderbala / CUR 38 LE SNI (SCHEMA NAVIGATIONNEL D'INTERRACTION)
Elaboré par M.Bouderbala / CUR 39 LE MODELE DES TACHES Tâche = Activité. Les modèles de tâches sont des descriptions logiques des activités à réaliser pour atteindre les objectifs des utilisateurs. Ils sont particulièrement utiles à la conception, l’analyse et l’évaluation les applications logicielles interactives. Une tâche est composée d’un but (état à atteindre), d’un dispositif (méthodes, outils, etc. nécessaires à l’atteinte du but), des actions (tâches simples), de tâches (activités nécessaires) et des sous-tâches. Conclusion : l’objectif de ce modèle est de comprendre et évaluer l’utilisabilité d’un système interactif. Pour atteindre son objectif, le modèle peut faire appel à différentes méthodes, dont la “Méthode analytique de description de tâches” (MAD), qui est à l’origine d’outils ciblés (KMADe, voir cidessous) dans le domaine de la modélisation des interactions hommemachine.
Elaboré par M.Bouderbala / CUR 40 LE MODELE DES TACHES
Elaboré par M.Bouderbala / CUR 41 LE MODELE DES TACHES IHM-écolo
Elaboré par M.Bouderbala / CUR 42 Les Outils Microsoft Visio Permet la création de diagrammes de façon simple et intuitive. Microsoft Visio permet également la collaboration et la sérisation des données. C'est un logiciel complet qui offre rendu de qualité mais payant et propriétaire, il ne fonctionne que sur MSWindows. Draw.io est un outil de création de diagrammes en ligne. Il est gratuit et offre un large panel de diagrammes. En revanche, il ne génère pas de code.
Elaboré par M.Bouderbala / CUR 43 Les Outils VisualSNI est un éditeur graphique spécifique de SNI sous la forme d'un plugin Eclipse. S'il est seulement disponible sous cet IDE, il est proposé en licence GPL et permet la génération de code. Dia est une application permettant de produire le plus large panel de diagrammes. Il est lui aussi proposé en licence GPL et est multiplateforme, mais en revanche il ne permet pas la génération de code.
Elaboré par M.Bouderbala / CUR 44 Conclusion Dans le cadre d'une utilisation purement formelle, un logiciel tel que draw.io ou dia qui permettent de réaliser tous types de diagrammes sont suffisants. Si l'on souhaite l'intégrer à l'environnement de développement, il sera intéressant d'utiliser un outil spécifique comme VisualSNI qui, par exemple, permet de générer du code.
Elaboré par M.Bouderbala / CUR 45