Frameworks IHM

Nissaf Fredj

Année universitaire 2024-2025

 Plan
22

 Introduction

 Chapitre 1: Prototype et maquettage

 Chapitre 2: Langage AJAX

 Chapitre 3: Maîtriser une plate-forme de développement des interfaces:

Bootstrap

 Chapitre 4: Projet d'application

Nissaf Fredj
 Plan
33

 Introduction

 Chapitre 1: Prototype et maquettage

 Chapitre 2: Langage AJAX

 Chapitre 3: Maîtriser une plate-forme de développement des interfaces:

Bootstrap

 Chapitre 4: Projet d'application

Nissaf Fredj
 Introduction
44 Interface Homme-Machine
 Une interface Homme-Machine (IHM) est le lien entre l’utilisateur et une machine.
 Une Interface Homme-Machine (IHM) désigne tout élément qui permet à un
utilisateur d’interagir avec une machine ou un logiciel.
 Une interface graphique peut être:
 un logiciel ou un système informatique.
 une interface graphique (GUI), vocale, ou tactile.
 Exemples
 Applications web: les menus, les boutons, et les champs de recherche d’un site
web.
 Applications mobiles: les écrans tactiles avec des icônes, les notifications
interactives.
 Interfaces industrielles: les écrans de contrôle des machines dans les usines.

Nissaf Fredj
 Introduction
55
Rôle de l’IHM
 Amélioration de l’expérience utilisateur (UX)
 ⇒ Une bonne IHM rend une application intuitive et agréable à utiliser.
 ⇒ Une interface bien conçue est rapide à comprendre et donne envie
de continuer à utiliser l’application.
 Facilitation de l’interaction
 ⇒ permet aux utilisateurs de comprendre rapidement le fonctionnement d’un
système sans formation poussée
 ⇒ permet aux utilisateurs d’accéder rapidement aux fonctionnalités et aux
données nécessaires.
 Amélioration de la productivité
 ⇒ moins de temps passé à comprendre l’interface signifie plus de temps
pour accomplir des tâches.

Nissaf Fredj
 Introduction
66 Interface Homme-Machine
 Composants de l’interface graphique
 Widget: sont des éléments visuel d’une interface graphique
 bouton,
 listes,
 menus,
 barre de défilement,
 Icones,
 Pointers,
 Etc.

Nissaf Fredj
 Introduction
77 Interface Homme-Machine
 Exemple d’interface graphique
barre de titre
barre de menu
barre d’outils

fenêtre

barre d’état

Nissaf Fredj
 Introduction
88 Interface Homme-Machine

fenêtre
d’application

fenêtre de
documents

Nissaf Fredj
 Introduction
99 Interface Homme-Machine

 palette d’outils
 barres d’outils flottantes

 bulle d’aide / info bulle

 informations contextuelles

Nissaf Fredj
 Introduction
10
10 Interface Homme-Machine

 fenêtres iconisées
 objets, parfois associés à un état
 corbeille, disques
 applications
 documents
 dossiers
 Utilisation
 pour donner un accès direct à des commandes fréquentes
 associées à un libellé
 intégrées à un bouton
 un menu

Nissaf Fredj
 Introduction
11
11 Interface Homme-Machine
 Les boutons

 bouton poussoir
 bouton pour exécuter une action
 bouton d’action, boutons graphiques d’une barre d'outils
 effet 3D
 différents états
 1 à 2 positions stables relâché
 dans certains cas enfoncé: palette affichée
 case à cocher
 Interrupteur à bascule / à glissière

Nissaf Fredj
 Introduction
12
12 Interface Homme-Machine
 Liste
 contenu ordonné affiché en permanence
 éventuellement items masqués + barre de défilement
 sélection simple ou multiple (ctrl/shift/cases à cocher)
 Liste déroulante
 valeur choisie toujours visible (un seul élément)
 contenu exhaustif visible après un clic sur la flèche
 valeur éventuellement éditable (sélection ou saisie directe)
 Liste arborescente
 contenu hiérarchisé

Nissaf Fredj
 Introduction
13
13 Interface Homme-Machine
 Autres composants
 lien hypertexte
 texte cliquable
 généralement associé à une URI
 tableau/grille

 indicateur de progression

 zone de texte
 Temps
 Etc.

Nissaf Fredj
 Introduction
14
14 Framework IHM
 Un framework IHM est un ensemble d’outils, de bibliothèques pour simplifier la
création d’interfaces utilisateur.
 Avantages
 Gain de temps grâce à des composants réutilisables (boutons, tableaux,
menus..).
 Gestion simplifiée des styles et des mises à jour.
 Compatibilité avec différents navigateurs et appareils.
 Caractéristiques principales.
 Composants prêts à l’emploi: boutons, formulaires, menus déroulants.
 Design uniforme: des styles prédéfinis qui donnent une apparence cohérente.
 Réactivité: les interfaces s’adaptent automatiquement à la taille de l’écran
(ordinateurs, tablettes, mobiles).

Nissaf Fredj
 Introduction
15
15 Frameworks IHM
 Les frameworks les plus courants
 Web
• Bootstrap : simplifie la conception des sites web.
• React: permet de créer des applications dynamiques.
 Mobile
• Flutter : permet de créer des applications mobiles multiplateformes.
• React Native: basé sur React, il aide à concevoir des applications natives.
 Bureau
• Qt: utilisé pour les applications de bureau multi-plateformes.
• Electron: crée des applications de bureau avec HTML, CSS, et JavaSript.

Nissaf Fredj
 Introduction
16
16 Exemple de Frameworks
 Figma

Nissaf Fredj
 Introduction
17
17 Exemple de Frameworks
 Adobe XD

Nissaf Fredj
 Introduction
18
18 Exemple de Frameworks
 InVision

Nissaf Fredj
 Introduction
19
19 Exemple de Frameworks
 Axure

Nissaf Fredj
 Plan
20
20

 Introduction

 Chapitre 1: Prototype et maquettage

 Chapitre 2: Langage AJAX

 Chapitre 3: Maîtriser une plate-forme de développement des interface:

Bootstrap

 Chapitre 4: Projet d'application

Nissaf Fredj
 Prototype et maquettage
21
21 Définition
 Maquettage
Réalisation d’une représentation visuelle statique du produit pour définir son design
et sa structure.
 Prototypage
Création d’une version préliminaire fonctionnelle d’un produit pour tester
ses fonctionnalités et son ergonomie.

Aspect Prototypage Maquettage

Tester les
Objectif Visualiser le design
fonctionnalités
Interactivité Souvent interactive Statique
Fonctionnalités et Esthétique et
Détails
navigation disposition

Nissaf Fredj
 Prototype et maquettage
22
22 Pourquoi maquetter?
 Des maquettes, pour quoi ?
 choix de conception
 preuve de faisabilité
 moyen de communication
 Des maquettes, pour qui ?
 clients
 équipe de conception
 utilisateurs (testeurs, finaux)
 support de communication commerciale
 Des maquettes, quand ?
 très tôt dans le processus de conception
 jusqu’aux premières versions du système

Nissaf Fredj
 Prototype et maquettage
23
23 Pourquoi maquetter?
 Pour partager les mêmes référents
 Théories de la communication (différences entre messages émis et
messages reçus).
 Pour que tout le monde parle bien de la même chose.
 Pour communiquer
 Au sein d’un projet.
 Entre un client, donneur d’ordre et prestataire, qui fait le travail.
 Au sein d’une équipe de conception.
 Permet aux différents métiers de réfléchir ensemble sur un même produit.
 Pour stimuler la production d’idées.
 Pour visualiser l’interface et la tester.
 Pour simuler le comportement de fonctionnalités.

Nissaf Fredj
 Prototype et maquettage
24
24 Types de maquettes
 Maquette papier + dessin à la main
 une première ébauche d’une interface utilisateur réalisée à la main sur du
papier ou un tableau blanc.
 utilisée pour structurer rapidement une application ou un site web avant de
passer à des outils numériques.
 Exemple
 Papier pour une application de Rendez-vous
 écran d’accueil: bouton « Prendre un rendez-vous ».
 sélection de la date et de l’heure: liste déroulante ou calendrier.
 confirmation : récapitulatif des informations saisies.

Nissaf Fredj
 Prototype et maquettage
25
25 Types de maquettes
 Maquette fil de fer (ou wireframe)
 est une représentation schématique simplifiée d’une interface utilisateur.
 sert à structurer une page ou une application en définissant l’agencement
des éléments (titres, boutons, images, zones de texte, etc.), sans se
concentrer sur les couleurs, les polices ou les styles graphiques.
 Exemple: application de Rendez-vous
 Une page d’accueil avec un bouton « Prendre un rendez-
vous ».
 Un formulaire de sélection de date et d’heure.
 Une page de confirmation affichant le récapitulatif du rendez-
vous.

Nissaf Fredj
 Prototype et maquettage
26
26 Types de maquettes
 Une maquette graphique (ou mock-up)
 une représentation visuelle détaillée d’une interface utilisateur.
 contrairement au wireframe (maquette fil de fer) qui ne montre que la
structure, la maquette graphique inclut les couleurs, les typographies, les
icônes et le design final.
 permet de visualiser l’apparence du produit avant son développement.
 Exemple: application de Rendez-vous
 Écran d’accueil : fond coloré, logo, bouton « Prendre un rendez-
vous » bien visible.
 Sélection de la date et de l’heure: utilisation d’un calendrier
stylisé avec des couleurs adaptées à l’identité visuelle.
 Confirmation: affichage des informations du rendez-vous avec
une mise en page soignée. Nissaf Fredj
 Prototype et maquettage
27
27 Types de maquettes
 Pourquoi utiliser une maquette graphique ?
 Validation visuelle: permet aux parties prenantes de voir l’apparence finale
du produit.
 Meilleure communication: facilite la discussion entre designers,
développeurs et clients.
 Réduction des erreurs: évite les malentendus avant le codage.
 Tests utilisateurs: peut être utilisée pour recueillir des retours sur
l’ergonomie et l’esthétique.
 Outils pour créer une maquette graphique
 Figma: collaboration en temps réel, idéal pour les équipes.
 Adobe XD : interface fluide, parfait pour les designers UX/UI.
 Sketch: référence en design UI pour macOS.
 Photoshop: utilisé pour des conceptions graphiques. Nissaf Fredj
 Prototype et maquettage
28
28 Prototype
 Pourquoi créer un prototype ?
 tester l’expérience utilisateur (UX) avant le développement.
 obtenir des retours concrets sur la navigation et l’ergonomie.
 convaincre les parties prenantes en simulant un produit fonctionnel.
 réduire les erreurs de conception avant la phase de codage.
 Rôle du prototypage dans le cycle de vie
 détection précoce des problèmes.
 validation des hypothèses de conception.
 amélioration continue à travers les retours utilisateurs.

Nissaf Fredj
 Prototype et maquettage
29
29 Prototype
 Un prototype est une version interactive d’un produit qui permet de tester son
fonctionnement avant le développement final.
 Contrairement aux maquettes graphiques statiques, un prototype permet aux
utilisateurs d’interagir avec les boutons, menus et autres éléments de l’interface.
 Exemple: prototype pour une application de Rendez-vous
 Écran d’accueil: bouton « Prendre un rendez-vous » cliquable.
 Sélection de la date: interaction avec un calendrier dynamique.
 Confirmation: bouton « Modifier » ou « Confirmer » activable.

Nissaf Fredj
 Prototype et maquettage
30
30 Type de prototypes

Type de Prototype Description Exemples

Croquis ou maquettes papier Dessins annotés, Post-it
Basse fidélité
interactives mobiles
Wireframes interactifs sans design
Moyenne fidélité Figma
final
Prototypes réalistes avec
Haute fidélité Adobe XD, InVision, Axure
animations et interactions avancées

 Outils pour prototyper

 Figma : création de prototypes interactifs avec transitions.
 Adobe XD : intégration fluide avec les outils de design.
 InVision : tests utilisateurs et collaboration en ligne.
 Axure : prototypage avancé avec logique conditionnelle.

Nissaf Fredj
 Prototype et maquettage
31
31 Récapitulation

basse maquette maquette fil maquette application

prototype
définition papier de fer graphique finale

Type Objectif Détails inclus Interactivité

Structure et
Noir & blanc, blocs
Wireframe disposition des Aucune
et textes simples
éléments
Visuel détaillé avec
Design final avec
Mock-up images et Aucune
couleurs et styles
typographies
Simulation Design final +
Prototype Oui
interactive interactions

Nissaf Fredj
 Prototype et maquettage
32
32 Evaluation
 Création d’un Prototype
 Objectif : construire un prototype interactif pour une application de gestion de
rendez-vous.
 Outil recommandé : Figma ou Adobe XD.
 Créer trois écrans (Accueil, Sélection, Confirmation).
 Ajouter des interactions de navigation.
 Tester le prototype sur un appareil mobile ou desktop.

Nissaf Fredj
 Plan
33
33

 Introduction

 Chapitre 1: Prototype et maquettage

 Chapitre 2: Langage AJAX

 Chapitre 3: Maîtriser une plate-forme de développement des interface:

Bootstrap

 Chapitre 4: Projet d'application

Nissaf Fredj
 Langage Ajax
34
34 Ajax: Asynchronous Javascript and XML
 AJAX est un acronyme signifiant Asynchronous JavaScript and XML (« XML et
Javascript asynchrones») désignant une solution informatique libre pour le
développement des applications Web.
 Communication client/serveur en mode asynchrone en échangeant de données avec
un serveur, et la mise à jour des parties d’une page web sans recharger la page
entière.
 Normalement, lorsque vous cliquez sur un lien ou soumettez un formulaire, le
navigateur recharge toute la page web. Cela signifie:
 Il redemande tous les fichiers (HTML, CSS, images, scripts, etc.).
 Il efface le contenu actuel pour afficher la nouvelle version.
 Cela peut être lent et désagréable pour l’utilisateur.

Nissaf Fredj
 Langage Ajax
35
35 Ajax: Asynchronous Javascript and XML
 À l’image de HTML, AJAX n’est pas une technologie en elle-même, mais un terme
qui évoque l’utilisation conjointe d’un ensemble de technologies libres couramment
utilisées sur le Web.
 HTML pour la structure sémantique des informations.
 CSS pour la présentation des informations.
 DOM et JavaScript pour afficher et interagir dynamiquement avec l’information
présentée.
 XMLHttpRequest pour échanger et manipuler les données avec le serveur
Web.
 XML comme un format d’échange de données..
 AJAX est une technologie de navigateur web (coté client) indépendant de la
technologie coté serveur Web.

Nissaf Fredj
 Langage Ajax
36
36 Ajax: Asynchronous Javascript and XML
 Les applications web classiques transmettent des informations vers et depuis le
serveur utilisant des requêtes synchrones.
 ⇒ Cela signifie que vous remplissez un formulaire, cliquez sur envoyer, et
acheminés vers une nouvelle page avec de nouvelles informations à partir du
serveur.
 ⇒ Avec AJAX, quand vous cliquez sur envoyer, JavaScript communique avec le
serveur, interprète les résultats, et met à jour l’écran actuel.
 (+) Un utilisateur peut continuer à utiliser l’application alors que le programme
client demande des informations à partir du serveur en arrière-plan.
 (+) l’interaction de l’utilisateur est intuitive et naturelle. Le clic est pas
nécessaire, mouvement de la souris, par exemple, est un événement
déclencheur suffisant.

Nissaf Fredj
 Langage Ajax
37
37 Ajax: Asynchronous Javascript and XML
 Dans une application Web, la méthode classique de dialogue entre un navigateur et
un serveur est la suivante: le client émet une requête HTTP et le serveur envoie une
réponse sous forme d’une page web à destination du client.
 Chaque manipulation entraîne la transmission d’une requête et l’affichage d’une
nouvelle page et l’utilisateur doit attendre l’arrivée de la réponse pour effectuer
d’autres manipulations.
 En utilisant Ajax, le dialogue entre le navigateur et le serveur se déroule la plupart du
temps de la manière suivante: un programme écrit en langage de programmation
Javascript, incorporé dans une page web et exécuté par le navigateur, envoie des
demandes au serveur web, puis modifie le contenu de la page actuellement affichée
par le navigateur web en fonction du résultat reçu du serveur, évitant ainsi la
transmission et l’affichage d’une nouvelle page.

Nissaf Fredj
 Langage Ajax
38
38 Intérêts d’utiliser AJAX ?
 Amélioration de l’expérience utilisateur: le contenu se met à jour sans rechargement
complet.
 Performance: Seules certaines parties de la page sont mises à jour, ce qui réduit le
temps de chargement.
 Dynamique: Idéal pour les applications interactives (recherche en temps réel,
formulaires dynamiques).
 Dans les applications web en Ajax, une page web est typiquement envoyée une
seule fois.
 La page envoyée contiendra un programme écrit en langage Javascript.
 Lors des manipulations effectuées sur la page par l’utilisateur, le programme en
Javascript envoie des requêtes au serveur web,
 Le serveur répondra aux requêtes en envoyant un document au format XML.

Nissaf Fredj
 Langage Ajax
39
39 Intérêts d’utiliser AJAX ?
 ce document ne contient pas d’information de présentation et le nombre
d’informations qu’il contient est souvent réduit, d’où des temps de latence
typiquement plus réduits que ceux d’une application web classique.
 Le but recherché d’Ajax est la diminution des temps de latence, l’apport de nouvelles
fonctionnalités et l’augmentation de la réactivité de l’application web.
 Les applications web qui possèdent ces qualités sont appelées Rich Internet
Application (RIA).
 Par rapport à des produits concurrents, tels que Adobe Flash/Flex ou Silverlight, qui
nécessitent l’installation d’un plug-in, Ajax fait usage de technologies présentes de
série sur la plupart des navigateurs web sur le marché.

Nissaf Fredj
 Langage Ajax
40
40 Comment fonctionne AJAX ?
 1. L’utilisateur effectue une action (ex: un clic sur un bouton).
 2. JavaScript envoie une requête asynchrone au serveur (sans recharger la page).
 3. Le serveur traite la requête et renvoie des données (en XML, JSON, ou autre
format).
 4. JavaScript traite la réponse et met à jour le HTML de la page.
 Comme son nom l’indique, la mise en place d’AJAX requiert plusieurs langages :
 JavaScript: Pour envoyer des requêtes et mettre à jour le contenu.
 XMLHttpRequest ou fetch() : Pour communiquer avec le serveur.
 Données en XML ou JSON : Format utilisé pour échanger des informations.
 HTML/CSS : Pour afficher et styliser les résultats.
 PHP, ou tout autre langage pour les traitements côté serveur.

Nissaf Fredj
 Langage Ajax
41
41 Comment fonctionne AJAX ?

2
5

2
1 4

1 Javascript passe une demande à l’objet XMLHttpRequest

 1.
 2.
2 L’objet XMLHttpRequest requête le serveur afin de lui transmettre ou de lui

demander des données ;

 3.
3 Le serveur retourne un résultat (texte, XML, JSON...) à l’objet XMLHttpRequest.

 4.
4 L’objet XMLHttpRequest retourne le résultat à Javascript.

 5.
5 Javascript traite les données retournées (seconde requête AJAX, mise à jour tout

ou partie du contenu de la page via HTML et CSS...) Nissaf Fredj

 Langage Ajax
42
42 Technologies utilisées
 Javascript
 Javascript est un langage de programmation incorporé dans les navigateurs.
 Les programmes écrits dans ce langage sont exécutés par le navigateur.
 Il est utilisé en particulier pour exploiter le XMLHttpRequest et le DOM.

Nissaf Fredj
 Langage Ajax
43
43 Technologies utilisées: CSS
 CSS (Cascading Style Sheets)
 un format de données utilisé pour créer des feuilles de styles attachées aux
pages web.
 Il est utilisé dans les applications web pour dissocier le contenu des pages web
de leur présentation qui est constante.
 Il permet de réaliser des économies sur les communications entre le serveur
et le navigateur web et mettre en place une charte graphique.

Nissaf Fredj
 Langage Ajax
44
44 XML
 XML (Extensible Markup Language) est un langage de balisage, JSON (Javascript
Object Notation) est un format de données inspirée de la syntaxe du langage
Javascript. Ils sont utilisés pour structurer les informations envoyées par le serveur
web.

XML

JSON

Nissaf Fredj
 Langage Ajax
45
45 DOM
 Avec l’introduction des CSS et du DOM (Document Object Model), il a fallu
considérer que les documents HTML ont une véritable structure en arbre, avec un
élément racine contenant tous les autres éléments.
 Le DOM est une interface de programmation d’applications (API) pour documents
HTML et XML.
 DOM est conçu pour être utilisé avec n’importe quel langage de programmation.

Nissaf Fredj
 Langage Ajax
46
46 Objet XMLHTTPREQUEST
 XMLHttpRequest est un objet ActiveX ou Javascript qui permet d’obtenir des
données au format XML, mais aussi HTML, ou encore texte simple à l’aide de
requêtes HTTP.
 Le principe de fonctionnement d’XMLHttpRequest est d’envoyer une requête HTTP
vers le serveur, et une fois la requête envoyée, les données renvoyées par le serveur
peuvent être récupérées.
 ⇒ Il faut disposer d’un objet disposant de cette fonctionnalité.
 Cet objet a été développé par Microsoft et implémenté dans Internet Explorer 5.5 en
tant que contrôle ActiveX.
 Par la suite, les autres navigateurs ont implémenté un objet appelé
XMLHttpRequest.
 Cet objet a été implémenté avec les mêmes méthodes que celle d’XMLHTTP
de Microsoft. Nissaf Fredj
 Langage Ajax
47
47 Récupération de l’Objet XMLHTTPREQUEST
 Ce code définit une fonction getXMLHttpRequest() qui crée et retourne un objet
XMLHttpRequest pour faire des requêtes AJAX.
 Il est conçu pour être compatible avec les anciens navigateurs, notamment les
versions anciennes d’Internet Explorer.

Nissaf Fredj
 Langage Ajax
48
48 Récupération de l’Objet XMLHTTPREQUEST
 1. Déclaration de la fonction et initialisation

 function getXMLHttpRequest() : Déclare une fonction nommée

getXMLHttpRequest.
 var xhr = null; : Initialise la variable xhr à null. Cette variable contiendra l’objet
XMLHttpRequest.
 2. Vérification du support navigateur

 Vérifie si le navigateur supporte XMLHttpRequest ou ActiveXObject.

 [Link] : Utilisé par les navigateurs modernes (Chrome,
Firefox, Safari, etc.). Nissaf Fredj
 Langage Ajax
49
49 Récupération de l’Objet XMLHTTPREQUEST
 [Link]: Utilisé par les anciennes versions d’Internet Explorer
(IE 5 et IE 6).
 3. Support pour Internet Explorer (IE)

 Si le navigateur est un ancien Internet Explorer :new

ActiveXObject("[Link]")
 Essayez de créer un objet XMLHttpRequest avec la version la plus
récente.

Nissaf Fredj
 Langage Ajax
50
50 Récupération de l’Objet XMLHTTPREQUEST
 catch(e), si cela échoue,
 alors: new ActiveXObject(« [Link] »): Utilise l ’ancienne version
compatible.
 4. Support pour les navigateurs modernes

 Si le navigateur n’est pas un ancien IE, alors il utilise :new XMLHttpRequest() :

 ⇒ Méthode standardisée pour les navigateurs modernes (compatible avec tous
les navigateurs récents).

Nissaf Fredj
 Langage Ajax
51
51 Récupération de l’Objet XMLHTTPREQUEST
 5. Si le navigateur ne supporte pas AJAX
 alert() : Affiche un message d’alerte à l'utilisateur.
 return null: Retourne null car aucune requête AJAX ne pourra être faite.

 6. Retour de l’objet XMLHttpRequest

 La fonction retourne l’objet XMLHttpRequest (ou ActiveXObject pour les vieux

IE) prêt à être utilisé pour des requêtes AJAX.
 Si aucune compatibilité n’est trouvée, elle retourne null. Nissaf Fredj
 Langage Ajax
52
52 Changement d’état de la requête
 Dans une application web, quand on envoie une requête HTTP via XMLHttpRequest,
elle passe par plusieurs états différents:
 0 : L’objet xhr a été créé, mais pas encore initialisé (la méthode open n’a
pas encore été appelée)
 1 : L'objet xhr a été créé, mais pas encore envoyé (avec la méthode send )
 2 : La méthode send vient d'être appelée
 3 : Le serveur traite les informations et a commencé à renvoyer des
données
 4 : Le serveur a fini son travail, et toutes les données sont réceptionnées
 Il faut détecter les changements d’état pour savoir où en est la requête.
 ⇒ utiliser la propriété onreadystatechange, et à chaque changement d'état.

Nissaf Fredj
 Langage Ajax
53
53 Changement d’état de la requête

 Ce code utilise Ajax pour envoyer une requête GET à un fichier PHP nommé
[Link].
 Il vérifie l’état de la requête et affiche une alerte « OK » si la réponse est reçue avec
succès.
 Aucun rechargement de page n’est nécessaire.

Nissaf Fredj
 Langage Ajax
54
54 Changement d’état de la requête
 1. Création de l’objet XMLHttpRequest

 getXMLHttpRequest() est une fonction (précédemment définie) qui crée un

objet XMLHttpRequest compatible avec le navigateur utilisé.
 xhr permet de communiquer avec le serveur sans recharger la page.
 2. Définition de la fonction onreadystatechange

Nissaf Fredj
 Langage Ajax
55
55 Changement d’état de la requête
 [Link]: La fonction définie ici s’exécute à chaque
changement d’état de la requête AJAX.
 [Link] représente l’état de la requête

readyState Signification
0 non initialisée
1 connexion établie
2 requête reçue
3 en cours de traitement

4 requête terminée et réponse prête

Nissaf Fredj
 Langage Ajax
56
56 Changement d’état de la requête
 [Link] == 4: Vérifie si la requête est terminée.
 [Link] == 200: Le serveur a renvoyé un code HTTP 200 (Succès).
 [Link] == 0 : Cela peut se produire pour les requêtes locales (ex :
fichier ouvert en local sans serveur).
 Si ces conditions sont réunies, l’alerte « OK » s’affiche.
 3. Ouverture de la requête

 [Link]() prépare la requête.

 Méthode « GET » indique qu’on demande des données sans envoyer de
contenu particulier.
 URL « [Link] » est le fichier PHP cible sur le serveur.
 Asynchrone: true rend la requête asynchrone (le reste du script continue à
s’exécuter sans attendre la réponse). Nissaf Fredj
 Langage Ajax
57
57 Changement d’état de la requête
 4. Envoi de la requête

 [Link]() envoie la requête au serveur.

 null est utilisé ici car il n’y a pas de données à envoyer dans une requête GET.

Nissaf Fredj
 Langage Ajax
58
58 Récupérer les données

 Ce code utilise Ajax pour envoyer une requête à un serveur et afficher la réponse
dans une alerte lorsque la requête est terminée avec succès.
 On peut utiliser une des deux propriétés
 responseText: récupérer les données sous forme de texte brut
 responseXML: récupérer les données sous forme d’arbre XML
 1. Création de l’objet XMLHttpRequest

Nissaf Fredj
 Langage Ajax
59
59 Changement d’état de la requête
 2. Définition de la fonction onreadystatechange

 Si ces conditions sont réunies

 [Link]: Contient le texte de la réponse du serveur.
 alert() affiche cette réponse dans une boîte de dialogue.

Nissaf Fredj
 Langage Ajax
60
60 Exercice AJAX avec XMLHttpRequest
 Quand l’utilisateur clique sur un bouton, un message est récupéré d’un
fichier texte via XMLHttpRequest et affiché à l’écran.

[Link]

Nissaf Fredj
 Langage Ajax
61
61 Exercice AJAX avec XMLHttpRequest
 Fichier texte à récupérer

[Link]

Nissaf Fredj
 Plan
62
62

 Introduction

 Chapitre 1: Prototype et maquettage

 Chapitre 2: Langage AJAX

 Chapitre 3: Maîtriser une plate-forme de développement des interface:

Bootstrap

 Chapitre 4: Projet d'application

Nissaf Fredj
 Framework Bootstrap
63
63 Qu’est-ce que Bootstrap?
 Bootstrap correspond à un ensemble de librairies regroupées dans un but précis et
possédant des règles internes que doivent suivre les utilisateurs.
 Le framework Bootstrap est donc un ensemble de fichiers CSS et JavaScript qui
contiennent des règles prédéfinies et qui définissent des composants.
 Ces ensembles de règles sont enfermés dans des classes.
 Ces classes sont utilisé afin d’appliquer un ensemble de styles à tel ou tel
élément HTML.
 Principaux avantages:
 Facilité d’utilisation
 Design responsive intégré
 Compatibilité avec tous les navigateurs
 Un gain de temps de développement qui peut être conséquent.

Nissaf Fredj
 Framework Bootstrap
64
64 Qu’est-ce que Bootstrap?
 Une certaine robustesse dans l’architecture globale du code.
 Un framework appartenant à une grande société (Twitter).
 Bootstrap utilise également des fichiers JavaScript et notamment des librairies
JavaScript externes comme jQuery ou Popper pour définir des composants entiers
comme des barres de navigation, des fenêtres modales, etc.

Nissaf Fredj
 Framework Bootstrap
65
65 A quoi sert Bootstrap?
 Bootstrap fournit des outils prêts à l’emploi :
 des classes CSS (grilles, boutons, formulaires, couleurs, etc.)
 des composants pré-construits (navbar, carrousel, cartes, alertes…)
 du JavaScript intégré (modales, menus déroulants, etc.)

Nissaf Fredj
 Framework Bootstrap
66
66 Comment utiliser Bootstrap?
 Bootstrap est un framework, c’est-à-dire un ensemble de fichiers.
 Pour utiliser Bootstrap, nous allons donc simplement devoir utiliser ces fichiers.
 Deux méthodes pour inclure Bootstrap dans un projet:
 1.Télécharger les fichiers Bootstrap (CSS et JavaScript) sur le
site [Link] puis les lier à nos fichiers HTML comme n’importe
quel autre fichier CSS et JavaScript.
 [Link] un CDN (Content Delivery Network ou réseau de distribution de
contenu) et inclure le lien vers les fichiers HTML.
 Il suffit d’ajouter ce lien dans le <head> et avant la fermeture du <body> de
votre fichier HTML.

Nissaf Fredj
 Framework Bootstrap
67
67 Comment utiliser Bootstrap?
 1. Télécharger Bootstrap
 Rendez-vous sur le site officiel : [Link]
 Cliquez sur Download (Télécharger).
 Téléchargez l’archive Compiled CSS and JS ([Link]).
 Décompressez l’archive dans le dossier de votre projet.
 Vous obtiendrez un dossier nommé bootstrap-5.x.x-dist, contenant :
 css/[Link] → Fichier CSS principal
 js/[Link] → Fichier JavaScript

Nissaf Fredj
 Framework Bootstrap
68
68 Comment utiliser Bootstrap?
 Après le téléchargement, vous devez placer les fichiers

 Lier les fichiers Bootstrap CSS à votre projet.

Nissaf Fredj
 Framework Bootstrap
69
69 Comment utiliser Bootstrap?
 Lier les fichiers Bootstrap js à votre projet.

Nissaf Fredj
 Framework Bootstrap
70
70 Comment utiliser Bootstrap?
 2. Utiliser un CDN
 Fichiers CSS Bootstrap
 <link
href="[Link]
rel="stylesheet">
 Ce lien charge les styles CSS de Bootstrap depuis le CDN jsDelivr. Il
permet d’accéder à tous les styles du framework sans les télécharger.
 Fichier JavaScript Bootstrap
 <script
src="[Link]
s">
 Ce fichier contient les fonctionnalités JavaScript de Bootstrap, comme les
modales, carrousels, accordéons et menus déroulants. Nissaf Fredj
 Framework Bootstrap
71
71 Comment utiliser Bootstrap?

Nissaf Fredj
 Framework Bootstrap
72
72 Premier exemple avec Bootstrap
 …

Nissaf Fredj
 Framework Bootstrap
73
73 Composants Bootstrap
 Conteneurs Bootstrap
 Les classes container et container-fluid (plein écran) sont des conteneurs
Bootstrap qui servent à centraliser et organiser le contenu sur la page.
 .container crée une marge automatique à gauche et à droite, et sa largeur
change selon la taille de l’écran.

 .container-fluid s’étend sur toute la largeur disponible, sans marges.

Nissaf Fredj
 Framework Bootstrap
74
74 Composants Bootstrap
 Bouton Bootstrap

 btn : classe de base d’un bouton.

 .btn-success : bouton vert.
 Exemple:
Créer le code bootstrap responsable de visualiser le contenu ci-desous:

Nissaf Fredj
 Framework Bootstrap
75
75 Composants Bootstrap

Nissaf Fredj
 Framework Bootstrap
76
76 Composants Bootstrap
 Classe btn
 btn est une classe Bootstrap.
 Elle applique le style de base à un bouton : taille, bordures, padding, etc.
 Elle transforme un simple bouton HTML en un bouton stylisé Bootstrap.
 Class btn-success est une classe de couleur Bootstrap.
 Elle donne au bouton une couleur verte, qui en général représente une action
positive (comme "valider", "confirmer", "envoyer", etc.).
 C’est l’une des variantes de couleur prédéfinies par Bootstrap :
 btn-primary → bleu (action principale)
 btn-secondary → gris
 btn-success → vert
 btn-danger → rouge

Nissaf Fredj
 Framework Bootstrap
77
77 Composants Bootstrap
 Zone de texte Bootstrap

 .row : crée une ligne Bootstrap.

 .col-md-6 : chaque champ occupe la moitié de la ligne (6 colonnes sur 12).
 form-label : style pour les labels.
 form-control : applique un style Bootstrap aux zone de texte.
 placeholder : texte d'exemple dans le champ.

Nissaf Fredj
 Framework Bootstrap
78
78 Composants Bootstrap
 Zone de texte Bootstrap

 Utilise une zone de texte (<textarea>) pour les messages plus longs.
 rows="4" : hauteur du champ en nombre de lignes visibles.

Nissaf Fredj
 Framework Bootstrap
79
79 Composants Bootstrap
 Zone de texte Bootstrap

Nissaf Fredj
 Framework Bootstrap
80
80 Composants Bootstrap
 Système de grille Bootstrap
 Le système de grille Bootstrap repose sur 12 colonnes.
 Tu organises ton contenu en lignes (.row) divisées en colonnes (.col, .col-6,
.col-md-4, etc.).

 .row pour regrouper les colonnes

 .container pour encadrer le tout
 .col si tu ne précises pas de chiffre, Bootstrap répartit l’espace
automatiquement.
 .col-6 signifie 6 colonnes sur 12 → donc moitié de la ligne Nissaf Fredj
 Framework Bootstrap
81
81 Composants Bootstrap
 Bootstrap permet d’adapter la taille des colonnes selon la taille de l’écran.

Classe Taille d'écran

.col- Très petit (mobile)
.col-sm- ≥ 576px (petit)
.col-md- ≥ 768px (moyen)
.col-lg- ≥ 992px (grand)
.col-xl- ≥ 1200px (très grand)

 Exemple
 Cela crée trois colonnes de taille égale sur une ligne.

Nissaf Fredj
 Framework Bootstrap
82
82 Composants Bootstrap
 Grille imbriquée
 Tu peux mettre une grille dans une colonne :

Nissaf Fredj
 Framework Bootstrap
83
83 Composants Bootstrap
 Alignement horizontal des colonnes
Tu peux aligner les colonnes dans une ligne avec les classes utilitaires comme

Classe Effet
justify-content-start Aligne à gauche (défaut)
justify-content-center Centre les colonnes
justify-content-end Aligne à droite
justify-content-between Espace entre les colonnes
Espace égal autour des
justify-content-around
colonnes
justify-content-evenly Espaces égaux entre et autour

Nissaf Fredj
 Framework Bootstrap
84
84 Composants Bootstrap
 Exemple
 Les colonnes sont centrées horizontalement dans la ligne.

 Alignement vertical des colonnes

 Utilise align-items-* ou align-self-* dans .row ou .col.

Classe Effet (vertical)

align-items-start Aligne en haut
align-items-center Aligne au milieu
align-items-end Aligne en bas

Nissaf Fredj
 Framework Bootstrap
85
85 Composants Bootstrap
 Exemple
 Les deux colonnes seront alignées verticalement au centre.

 Espacement (marge et padding)

 Bootstrap utilise un système d'espacement très pratique avec des classes
comme :
 m = margin
 p = padding
 t = top
 b = bottom
 s = start (gauche) Nissaf Fredj
 Framework Bootstrap
86
86 Composants Bootstrap
 x = horizontal (gauche + droite)
 y = vertical (haut + bas)

 Exemple

Nissaf Fredj
 Framework Bootstrap
87
87 Composants Bootstrap
 Mettre en forme de texte
 Taille de texte

Classe Taille approx. (px)

.fs-1 Très grand (40px)
.fs-2 32px
.fs-3 28px
.fs-4 24px
.fs-5 20px
.fs-6 Petit (16px)

 Exemple

Nissaf Fredj
 Framework Bootstrap
88
88 Composants Bootstrap
 Couleur de texte

Classe Couleur
.text-primary Bleu principal
.text-secondary Gris
.text-success Vert
.text-danger Rouge
.text-warning Jaune/orange
.text-dark Noir
.text-white Blanc

 Exemple

Nissaf Fredj
 Framework Bootstrap
89
89 Composants Bootstrap
 Style de texte

Classe Effet
.fw-bold Gras
.fw-normal Normal
.fst-italic Italique
.text-lowercase Miniscule
.text-uppercase Majuscules

 Exemple

Nissaf Fredj
 Framework Bootstrap
90
90 Composants Bootstrap
 Alignement de texte

Classe Effet
.text-start Aligné à gauche
.text-center Centré
.text-end Aligné à droite
Classe Effet

 Exemple

Nissaf Fredj
 Framework Bootstrap
91
91 Composants Bootstrap
 Dimensions des éléments
 Largeur

Classe Largeur définie

w-25 25% de la largeur du parent
w-50 50%
w-75 75%
w-100 100%
w-auto largeur automatique

 Exemple

Nissaf Fredj
 Framework Bootstrap
92
92 Composants Bootstrap
 Hauteur

Classe Hauteur définie

h-25 25% de la hauteur du parent
h-50 50%
h-75 75%
h-100 100%
h-auto hauteur automatique

 Exemple

Nissaf Fredj
 Framework Bootstrap
93
93 Composants Bootstrap
 Dimensions fixe
 min-w-*, max-w-*
 min-h-*, max-h-*
 Exemple

 Taille relative à la fenêtre

Classe Effet
vw-100 100% de la largeur de l’écran
vh-100 100% de la hauteur de l’écran

 Exemple

Nissaf Fredj
 Framework Bootstrap
94
94 Composants Bootstrap
 Positionnement des éléments
 Positionnement de base
Classe Bootstrap Effet CSS
position-static position: static (défaut)
position-relative position: relative
position-absolute position: absolute
position-fixed position: fixed
position-sticky position: sticky

 Exemple

Nissaf Fredj
 Framework Bootstrap
95
95 Composants Bootstrap
 Positionnement dans le conteneur
Classe Signification
top-0 Positionné tout en haut (top: 0)
bottom-0 En bas (bottom: 0)
start-0 À gauche (left: 0)
end-0 À droite (right: 0)

 Exemple

Nissaf Fredj
 Framework Bootstrap
96
96 Composants Bootstrap
 Superposition des éléments avec z-index

Classe Effet
z-0 z-index: 0
z-1 z-index: 1
z-3 z-index: 3 (au-dessus)
z-n1 z-index: -1 (en-dessous)

 Exemple

Le z-index ne fonctionne que si l’élément a un position différent de static (relative,

absolute, fixed, ou sticky).

Nissaf Fredj
 Framework Bootstrap
97
97 Composants Bootstrap
 Créer des tableaux stylisés avec Bootstrap
 Structure de base d’un tableau Bootstrap

 La classe .table est la classe Bootstrap de base pour styliser des

tableaux. Nissaf Fredj
 Framework Bootstrap
98
98 Composants Bootstrap
 Ajouter des styles avec Bootstrap
 .table-striped – alternance de couleurs entre les lignes

 .table-bordered – bordures autour des cellules

 .table-hover – effet survol: Ajouter des effets lors du passage de la souris

 .table-dark – style sombre

Nissaf Fredj
 Framework Bootstrap
99
99 Composants Bootstrap
 Personnaliser l’entete d’un tableau
 Les classes .thead-light (ligne d’en-tête avec un fond gris clair) et .thead-
dark (ligne d’en-tête avec un fond noir).

Nissaf Fredj
 Framework Bootstrap
100
100 Composants Bootstrap
 Utiliser les couleurs contextuelles avec les tableaux pour changer la
couleur de chaque ligne ou de chaque cellule d’un tableau.
 .table-active ;
 .table-primary ;
 .table-secondary ;
 .table-success ;
 .table-danger ;
 .table-warning ;
 .table-info ;
 .table-light ;
 .table-dark.

Nissaf Fredj