I. Introduction▲
jQuery est une bibliothèque très complète pour JavaScript. Elle vous permettra de faciliter l'écriture de scripts dans le code HTML de vos applications Web.
Cette bibliothèque comprend, entre autres, le parcours et la modification du DOM, la gestion des événements, la manipulation des feuilles de style, la gestion des plugins, AJAX et des utilitaires.
Le plugin jQuery Mobile basé sur HTML5 est entièrement adapté aux développements de sites et d'applications Web pour smartphones et tablettes.
Apprenez à intégrer cette bibliothèque, en utilisant une méthode de formation structurée, pas à pas et orientée pratique.
Avec la méthode "Développement Facile", vous allez apprendre à développer des sites Web exceptionnels, que vos visiteurs adoreront !
Retrouvez un extrait de la formation gratuite jQuery Facile, composée de plus de 30 cours professionnels pour vous aider à progresser rapidement avec la maîtrise du jQuery.
Suivez ce lien pour télécharger la dernière version de jQuery MobileSuivez ce lien pour télécharger la dernière version de jQuery Mobile
II. Comment utiliser les sprites avec CSS3 et créer des boutons href pour le Web mobile▲
Suivre un lien sur un site mobile n'est pas toujours facile.
Apprenez à transformer les liens de vos sites Web en boutons, beaucoup plus adapté à une manipulation tactile.
Retrouvez quelques bonnes pratiques du Web mobile.
Vous verrez aussi comment utiliser les Sprites avec CSS3.
Un générateur de Sprites très pratique : Générateur de Sprites CSSGénérateur de Sprites CSS
Ci-dessous, le code pour utiliser les sprites.
Sélectionnez
<!DOCTYPE html>
<html lang="fr">
<head>
<!--
/**
The Initial Developer of the Original Code is
Matthieu - http://www.programmation-facile.com/
Portions created by the Initial Developer are Copyright (C) 2013
the Initial Developer. All Rights Reserved.
Contributor(s) :
*/
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
-->
<title>jQuery UI</title>
<meta charset="UTF-8">
<style>
body{
font-size: 12px;
font-family: Arial;
}
/* définit la taille d'une icône */
.box { width: 63px;
height: 65px;
padding: 0px;
margin: 8px;
background:url(03-icones.png) no-repeat;} /* sprite qui contient toutes les icônes */
/* récupère chaque icône en fonction de la position */
#mail { background-position:-300px 0;}
#terre { background-position:0 -167px;}
#calc { background-position:-225px -83px;}
</style>
</head>
<body>
<header>
<h1>Developpement Facile</h1>
</header>
<img src="03-icones.png">
<hr> <br /><br />
Icône d'un mail
<div class="box" id="mail"> </div>
<br /><br />
Icône de la Terre
<div class="box" id="terre"> </div>
<br /><br />
Icône d'une calculatrice
<div class="box" id="calc"> </div>
<br /><br />
<footer>
<hr>
<p>Copyright www.Developpement-Facile.com 2014</p>
</footer>
</body>
</html>
L'image pour utiliser avec le code ci-dessus :
Ci-dessous, le code pour remplacer les liens par des boutons.
Sélectionnez
<!DOCTYPE html>
<html lang="fr">
<head>
<!--
/**
The Initial Developer of the Original Code is
Matthieu - http://www.programmation-facile.com/
Portions created by the Initial Developer are Copyright (C) 2013
the Initial Developer. All Rights Reserved.
Contributor(s) :
*/
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
-->
<title>jQuery UI</title>
<meta charset="UTF-8">
<style>
body{
font-size: 12px;
font-family: Arial;
}
#container { width:220px;
margin-top: 20px;
margin-left: 30px;}
ul#navliste {
list-style: none;
padding: 0;
margin: 0;
width: 70%;}
ul#navliste li {
margin-bottom: 5px;
padding: 0;
text-align: center;
-webkit-box-shadow: #848484 0px 3px 3px;
-moz-box-shadow: #848484 0px 2px 3px;
box-shadow: #848484 0px 2px 3px;
background:-webkit-linear-gradient(top, #F7BE81, #01A9DB);
background:-moz-linear-gradient(top, #F7BE81, #01A9DB);
background:-ms-linear-gradient(top, #F7BE81, #01A9DB);
background:-o-linear-gradient(top, #F7BE81, #01A9DB);
background:linear-gradient(top, #F7BE81, #01A9DB);}
ul#navliste li a {
font-size: 18px;
display: block;
height: 30px;
width: 100%;
padding-top: 7px;
border: 1px solid black;
color: black;
text-decoration: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
background-position: right center;
background-repeat: no-repeat;
text-shadow:0px 1px 1px #FA58AC;}
</style>
</head>
<body>
<header>
<h1>Developpement Facile</h1>
</header>
<p><b>Les liens Developpement Facile</b></p>
<div id="container">
<ul id="navliste">
<li><a href="#">Accueil</a></li>
<li><a href="#">Formations</a></li>
<li><a href="#">Tutoriels</a></li>
<li><a href="#">À propos</a></li>
<li><a href="#">Nous contacter</a></li>
</ul>
</div>
<br /><br />
<footer>
<hr>
<p>Copyright www.Developpement-Facile.com 2014</p>
</footer>
</body>
</html>
III. Comment utiliser la balise viewport pour le web mobile▲
La taille de l'écran des mobiles étant plus petite que celle d'un écran traditionnel, il est parfois nécessaire de redimensionner votre site Web pour un meilleur confort visuel.
Découvrez dans cette vidéo, comment utiliser la balise meta viewport.
Ci-dessous, l'exemple de code; remplacez 04-banniere_blanc-HD.png par votre propre bannière (une image de 1244x169).
Sélectionnez
<!DOCTYPE html>
<html lang="fr">
<head>
<!--
/**
The Initial Developer of the Original Code is
Matthieu - http://www.programmation-facile.com/
Portions created by the Initial Developer are Copyright (C) 2013
the Initial Developer. All Rights Reserved.
Contributor(s) :
*/
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
-->
<title>jQuery UI</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=0.5, target-densitydpi=device-dpi">
<style>
body{
font-size: 12px;
font-family: Arial;
}
</style>
</head>
<body>
<header>
<h1>Developpement Facile</h1>
</header>
<img src="04-banniere_blanc-HD.png">
<br /><br />
<footer>
<hr>
<p>Copyright www.Developpement-Facile.com 2014</p>
</footer>
</body>
</html>
IV. Présentation et installation du framework jQuery Mobile▲
On rentre dans le vif du sujet avec une présentation du framework jQuery Mobile.
Vous verrez également comment l'installer, ainsi qu'une première utilisation.
Ci-dessous, l'exemple de code.
Sélectionnez
<!DOCTYPE html>
<html lang="fr">
<head>
<!--
/**
The Initial Developer of the Original Code is
Matthieu - http://www.programmation-facile.com/
Portions created by the Initial Developer are Copyright (C) 2013
the Initial Developer. All Rights Reserved.
Contributor(s) :
*/
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
-->
<title>jQuery UI Mobile - Developpement Facile</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.2/jquery.mobile-1.4.2.css">
<script src="jquery.mobile-1.4.2/jquery-1.10.2.js"></script>
<script src="jquery.mobile-1.4.2/jquery.mobile-1.4.2.js"></script>
<style>
body{
font-size: 12px;
font-family: Arial;
}
</style>
</head>
<body>
<!-- signale à jQuery Mobile qu'il s'agit d'une page à interpréter. -->
<div data-role="page">
<!-- signale l'entête à jQuery Mobile -->
<div data-role="header">
<h1>Developpement Facile</h1>
</div>
<!-- signale le contenu de la page à jQuery Mobile -->
<div data-role="content">
<h4>Tutoriel N°1 jQuery UI Mobile</h4>
<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.</p>
<br /><br />
</div>
<!-- signale le pied de page à jQuery Mobile -->
<!-- L'attribut data-position="fixed" force le pied de page à se positionner en bas de l'écran -->
<div data-role="footer" data-position="fixed">
<h4>Copyright www.Developpement-Facile.com 2014</h4>
</div>
</div>
</body>
</html>
V. La technique pour créer des pages avec le framework jQuery Mobile▲
Apprenez à construire les pages de votre application Web pour que jQuery mobile s'occupe de les adapter aux mobiles pour vous.
Découvrez comment jQuery mobile rend votre application beaucoup plus rapide en plus de vous permettre de rajouter des effets sympas sur les transitions.
Ci-dessous, l'exemple de code.
Sélectionnez
<!DOCTYPE html>
<html lang="fr">
<head>
<!--
/**
The Initial Developer of the Original Code is
Matthieu - http://www.programmation-facile.com/
Portions created by the Initial Developer are Copyright (C) 2013
the Initial Developer. All Rights Reserved.
Contributor(s) :
*/
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
-->
<title>jQuery UI Mobile - Developpement Facile</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.2/jquery.mobile-1.4.2.css">
<script src="jquery.mobile-1.4.2/jquery-1.10.2.js"></script>
<script src="jquery.mobile-1.4.2/jquery.mobile-1.4.2.js"></script>
<style>
body{
font-size: 12px;
font-family: Arial;
}
</style>
</head>
<body>
<div data-role="page" id="accueil">
<div data-role="header">
<h1>Developpement Facile</h1>
</div>
<!-- la balise id permet d'effectuer le lien entre <a href et les div data-role="content" -->
<div data-role="content" id="accueil">
<p><a href="#formations" data-transition="slidedown">Formations</a></p>
<p><a href="#questions" data-transition="turn">Questions</a></p>
</div>
<div data-role="footer" data-position="fixed">
<h4>Copyright www.Developpement-Facile.com 2014</h4>
</div>
</div>
<!-- signale à jQuery Mobile qu'il s'agit d'une page à interpréter. -->
<div data-role="page" id="formations">
<!-- signale l'en-tête à jQuery Mobile -->
<div data-role="header">
<h1>Formations Developpement Facile</h1>
<p><a href="#accueil" data-transition="flip">Accueil</a></p>
</div>
<!-- signale le contenu de la page à jQuery Mobile -->
<div data-role="content">
<h4>Tutoriel N°1 jQuery UI Mobile</h4>
<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.</p>
<br /><br />
</div>
<!-- signale le pied de page à jQuery Mobile -->
<!-- L'attribut data-position="fixed" force le pied de page à se positionner en bas de l'écran -->
<div data-role="footer" data-position="fixed">
<h4>Copyright www.Developpement-Facile.com 2014</h4>
</div>
</div>
<!-- <div data-role="page" data-theme="b" id="questions"> -->
<div data-role="page" id="questions">
<!-- signale l'en-tête à jQuery Mobile -->
<div data-role="header">
<h1>Questions Developpement Facile</h1>
<p><a href="#accueil" data-transition="flip">Accueil</a></p>
</div>
<!-- signale le contenu de la page à jQuery Mobile -->
<div data-role="content">
<h4>Tutoriel N°1 jQuery UI Mobile</h4>
<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.</p>
<br /><br />
</div>
<!-- signale le pied de page à jQuery Mobile -->
<!-- L'attribut data-position="fixed" force le pied de page à se positionner en bas de l'écran -->
<div data-role="footer" data-position="fixed">
<h4>Copyright www.Developpement-Facile.com 2014</h4>
</div>
</div>
</body>
</html>
VI. Comment créer rapidement des boutons magnifiques avec le framework jQuery mobile▲
Découvrez dans cette vidéo, comment créez des boutons avec jQuery mobile.
Vous verrez tous les paramètres qui vont vous permettre de personnaliser vos boutons.
Ci-dessous, l'exemple de code.
Sélectionnez
<!DOCTYPE html>
<html lang="fr">
<head>
<!--
/**
The Initial Developer of the Original Code is
Matthieu - http://www.programmation-facile.com/
Portions created by the Initial Developer are Copyright (C) 2013
the Initial Developer. All Rights Reserved.
Contributor(s) :
*/
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
-->
<title>jQuery UI Mobile - Developpement Facile</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.2/jquery.mobile-1.4.2.css">
<script src="jquery.mobile-1.4.2/jquery-1.10.2.js"></script>
<script src="jquery.mobile-1.4.2/jquery.mobile-1.4.2.js"></script>
<style>
body{
font-size: 12px;
font-family: Arial;
}
</style>
</head>
<body>
<!-- signale à jQuery Mobile qu'il s'agit d'une page à interpréter. -->
<div data-role="page" data-theme="a">
<!-- signale l'entête à jQuery Mobile -->
<div data-role="header">
<h1>Formations Developpement Facile</h1>
</div>
<!-- signale le contenu de la page à jQuery Mobile -->
<div data-role="content" data-theme="c">
<h4>Tutoriel N°1 jQuery UI Mobile</h4>
<button data-icon="star" data-iconpos="left" data-theme="a">Cliquez ici par défaut</button>
<button data-shadow="false" data-mini="true" data-theme="b">Cliquez ici par défaut sans effet d'ombre</button>
<button data-corners= "false" data-inline="true" data-theme="e">Cliquez ici bord rectangle</button>
<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.</p>
<p><a href="#" data-role="button" data-inline="true" data-icon="plus">Téléchargez le code source</a></p>
<br /><br />
<div data-role="controlgroup" >
<a href="#" data-role="button" data-icon="arrow-r" >Descriptif</a>
<a href="#" data-role="button" data-icon="arrow-r">Modules</a>
<a href="#" data-role="button" data-icon="arrow-r">Investissement</a>
<a href="#" data-role="button" data-icon="arrow-r">Livraison</a>
</div>
<br /><br />
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button" data-icon="arrow-d" data-icon="arrow-r">Descriptif</a>
<a href="#" data-role="button" data-icon="arrow-d">Modules</a>
<a href="#" data-role="button" data-icon="arrow-d">Investissement</a>
</div>
<br /><br />
</div>
<!-- signale le pied de page à jQuery Mobile -->
<!-- L'attribut data-position="fixed" force le pied de page à se positionner en bas de l'écran -->
<div data-role="footer" data-position="fixed" data-theme="b">
<h4>Copyright www.Developpement-Facile.com 2014</h4>
</div>
</div>
</body>
</html>
VII. Comment ajouter une barre outils "navigation" avec le framework jQuery mobile▲
Apprenez à positionner votre menu grâce aux barres d'outils dans votre application Web.
Avec jQuery mobile personnalisez ces barres de navigation encore plus facilement.
Ci-dessous, le 1er exemple de code.
Sélectionnez
<!DOCTYPE html>
<html lang="fr">
<head>
<!--
/**
The Initial Developer of the Original Code is
Matthieu - http://www.programmation-facile.com/
Portions created by the Initial Developer are Copyright (C) 2013
the Initial Developer. All Rights Reserved.
Contributor(s) :
*/
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
-->
<title>jQuery UI Mobile - Developpement Facile</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.2/jquery.mobile-1.4.2.css">
<script src="jquery.mobile-1.4.2/jquery-1.10.2.js"></script>
<script src="jquery.mobile-1.4.2/jquery.mobile-1.4.2.js"></script>
<style>
body{
font-size: 12px;
font-family: Arial;
}
</style>
</head>
<body>
<!-- signale à jQuery Mobile qu'il s'agit d'une page à interpréter. -->
<div data-role="page" data-theme="a">
<!-- signale l'en-tête à jQuery Mobile -->
<div data-role="header">
<a href="#page1" data-icon="home">Retour Accueil</a> <h1>Formations Developpement Facile<br/><br/></h1>
</div>
<!-- signale le contenu de la page à jQuery Mobile -->
<div data-role="content" data-theme="c">
<h4>Tutoriel jQuery UI Mobile</h4>
<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.</p>
<p><a href="#" data-role="button" data-inline="true" data-icon="plus">Téléchargez le code source</a></p>
<br /><br />
</div>
<!-- signale le pied de page à jQuery Mobile -->
<!-- L'attribut data-position="fixed" force le pied de page à se positionner en bas de l'écran -->
<div data-role="footer" class="ui-bar" data-position="fixed" data-theme="b">
<a href="#">Accueil</a>
<a href="#">Descriptif</a>
<a href="#">Modules</a>
<a href="#">Nous Contacter</a>
<h4>Copyright www.Developpement-Facile.com 2014</h4>
</div>
</div>
</body>
</html>
Et ci-dessous, le 2e exemple de code.
Sélectionnez
<!DOCTYPE html>
<html lang="fr">
<head>
<!--
/**
The Initial Developer of the Original Code is
Matthieu - http://www.programmation-facile.com/
Portions created by the Initial Developer are Copyright (C) 2013
the Initial Developer. All Rights Reserved.
Contributor(s) :
*/
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
-->
<title>jQuery UI Mobile - Developpement Facile</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.2/jquery.mobile-1.4.2.css">
<script src="jquery.mobile-1.4.2/jquery-1.10.2.js"></script>
<script src="jquery.mobile-1.4.2/jquery.mobile-1.4.2.js"></script>
<style>
body{
font-size: 12px;
font-family: Arial;
}
</style>
</head>
<body>
<!-- signale à jQuery Mobile qu'il s'agit d'une page à interpréter. -->
<div data-role="page" data-theme="a">
<!-- signale l'en-tête à jQuery Mobile -->
<div data-role="header">
<a href="#page1" data-icon="home">Retour Accueil</a> <h1>Formations Developpement Facile<br/><br/></h1>
</div>
<!-- signale le contenu de la page à jQuery Mobile -->
<div data-role="content" data-theme="c">
<h4>Tutoriel jQuery UI Mobile</h4>
<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.</p>
<p><a href="#" data-role="button" data-inline="true" data-icon="plus">Téléchargez le code source</a></p>
<br /><br />
</div>
<!-- signale le pied de page à jQuery Mobile -->
<!-- L'attribut data-position="fixed" force le pied de page à se positionner en bas de l'écran -->
<div data-role="footer" class="ui-bar" data-position="fixed" data-theme="b">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="home">Accueil</a></li>
<li><a href="#" data-icon="info">Descriptif</a></li>
<li><a href="#" data-icon="grid" class="ui-btn-active">Programme</a></li>
<li><a href="#" data-icon="check">Modules</a></li>
</ul>
</div>
<h4>Copyright www.Developpement-Facile.com 2014</h4>
</div>
</div>
</body>
</html>
VIII. Recevez gratuitement la formation "jQuery Facile"▲
Si vous souhaitez aller plus loin dans la création de sites et d'applications Web exceptionnels, vous pouvez recevoir gratuitement la formation "jQuery Facile" avec des cours pas à pas, accompagnés des codes source commentés.
Ainsi, vous progressez à votre rythme, avec un suivi personnalisé et individuel. Vous avez la possibilité de poser toutes vos questions techniques sous chaque cours.
Vous allez ainsi découvrir comment utiliser le framework jQuery et l'integrer à vos page Web pour les rendre exceptionnelles.
Cliquez simplement ici pour recevoir gratuitement la formation "jQuery Facile" !Cliquez simplement ici pour recevoir gratuitement la formation jQuery Facile !
IX. Remerciements▲
Merci beaucoup à l'équipe de rédaction de Developpez.com de contribuer à la diffusion de ce tutoriel.
J'adresse également un merci tout particulier à Jacques Jeanjacques_jean pour sa relecture orthographique.
