Posts taggés Responsive design

Logo Bootstrap

Bootstrap 3

4

Twitter Bootstrap est un framework CSS et JavaScript vous permettant de créer un site web, responsive ou non, rapidement et simplement. Il existe actuellement deux versions, nous vous parlerons de la version la plus récente : la 3.

 

Prérequis

Afin de comprendre simplement la mise en place et l’utilisation du framework, il est préférable de comprendre correctement le système de grilles. Pour ceux qui ne l’ont pas encore assimilé, pas d’inquiétude, nous y revenons plus loin…

Bootstrap 3 étant intégré en partie avec LESS.JS, vous pouvez continuer d’utiliser ce framework mais ce n’est pas obligatoire.Vous ne savez pas ce qu’est LESS.JS ? Retournez lire l’article dédié sur le blog de Webnet ici. Pour télécharger Bootstrap, rendez-vous sur le site officiel.

 

Petit tour d’horizon…

Lorsque vous téléchargez et ouvrez le dossier Bootstrap, vous vous rendez compte qu’il y a énormément de fichiers et dossiers présents. Pas de panique ! Ça peut paraître impressionnant mais dans le fond, ça ne l’est pas…

 

Bootstrap - Organisation des fichiers

Bootstrap – Organisation des fichiers

 

Les fichiers les plus importants sont :

  • bootstrap.css ou bootstrap.min.css correspond au thème de base (couleurs, polices, colonnes, icônes…) et se trouve dans le dossier dist/css.
    Préconisation 
    : si vous avez des modifications à apporter aux styles Bootstrap, créez-les dans une nouvelle CSS.

 

  • bootstrap.js regroupe l’ensemble des plugins proposés par Bootstrap (carrousel, modales, alertes…). Ce fichier se trouve dans le dossier  dossier dist/js. Sachez que vous pouvez inclure individuellement chaque plugin proposé (dans le dossier js à la racine du dossier Bootstrap)

 

Notez que vous devrez inclure jQuery pour faire fonctionner les plugins JavaScript.

 

 Template Bootstrap de base

<!DOCTYPE html>
<html>
  <head>
    <title>Titre de la page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
     <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

 

Bootstrap 3 est codé en HTML5. Si vous l’ignorez, l’HTML 5 n’est pas interprété correctement sur Internet Explorer inférieur à la version 9. Pour résoudre ce problème, il vous faudra inclure le plugin html5shiv.js.

Vous remarquerez aussi l’appel au fichier respond.min.js. Nous vous expliquerons son fonctionnement un peu plus loin.

La balise meta viewport indique au navigateur le comportement qu’il doit adopter pour afficher la page. Cette balise est importante en matière de web responsive car elle permet de définir la largeur du « viewport » pour être de la même taille que l’écran de l’appareil utilisé pour consulter le site.

 

Côté CSS ?

Bootstrap vous propose un CSS déjà complet. Il vous met à disposition un certain nombre de classes qui permet de styler vos éléments sans faire d’efforts ! Sachez que vous pouvez styler intégralement votre site à partir du CSS proposé.

Certains éléments de bases sont formatés sans faire appel à une classe, comme par exemple les balises de titres, de paragraphe, de code … D’autres éléments nécessitent l’application de classe(s) particulière(s) pour appliquer un (des) style(s) ou comportement(s).

Prenons l’exemple d’un système de pagination dont le code sera :

<ul class="pagination">
  <li><a href="#">«</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">»</a></li>
</ul>

 

Vous obtiendrez le résultat suivant :Pagination off

 

De ce résultat, vous souhaitez « désactiver » le premier élément et indiquer que  la page sur laquelle vous êtes est la première. Vous appliquerez donc les classes disabled et active de Bootstrap :

<ul class="pagination">
  <li class="disabled"><a href="#">«</a></li>
  <li class="active"><a href="#">1</a></li>
  ...
</ul>

 

Et vous obtiendrez :

Pagination 1-ON

 

Afin de vous familiariser avec les constructions de code et l’existence des classes propres à Bootstrap, nous vous conseillons de vous rendre sur le site officiel, dans les rubriques CSS et Components.

Lorsque vous vous rendrez dans la rubrique  Components, vous verrez que le framework vous met à disposition un certain nombre d’icônes :

Icones bootstrap

 

Sachez que ces icônes sont créés grâce à la police glyphicons-halflings-regular présente dans le dossier font à la racine du dossier Bootstrap téléchargé. Si vous souhaitez utiliser ces icônes, n’oubliez surtout  pas d’importer cette police exotique! 🙂

 

Intégrer pour Bootstrap

Avant de vous lancer tête baissée dans l’intégration de votre propre template, vous devez comprendre la logique d’intégration proposée par le framework.

Site non responsive

Si vous réalisez un site qui n’a pas pour but d’être responsive, vous pouvez donc procéder simplement en créant votre / vos feuille(s) de styles, de préférence sans toucher à la CSS de base de Bootstrap.

Lorsque vous créez votre template HTML, faites attention à l’ordre d’appel des feuilles de styles 🙂

 

<link href="css/bootstrap.min.css" rel="stylesheet">
link href="css/ma_feuille_de_style.css" rel="stylesheet">

 

Pourquoi ?
Rappelez-vous que Bootstrap propose un reset complet et un grand nombre de style pour un certain nombre de composants web. Pour que vos styles et/ou surcharges soient correctement interprétés, il faut donc appeler votre CSS après celle de Bootstrap.

 

Site responsive

Rappels sur le système de grille
Une grille permet le découpage d’une page web en cellules de même dimension. Le contenu de la page peut donc être organisé sur une ou plusieurs cellules :

 

bootstrap - principe de la grille

 

La grille de Bootstrap
La grille de Bootstrap est composée de 12 colonnes et de gouttières de 30px (15px pour chaque côté d’une colonne).

Sur le schéma ci-dessous, chaque colonne correspond à une cellule ayant pour classe .col-md-1. Si vous souhaitez créer une cellule correspondant à 8 colonnes alors vous appliquerez la classe .col-md-8 et ainsi de suite.

bootstrap3_grille_02

 

 

Pour composer votre grille, vous devez suivre un schéma strict :

<div class= « container »>
  <div class= « row »>
    <div class= « col-md-8 »>
       Mon texte sur 8 colonnes
    </div>
    <div class= « col-md-4 »>
       Mon texte sur 4 colonnes
    </div>
  </div><!-- FIN ROW -->
</div><!-- FIN CONTAINER -->

Notez que vous devez toujours constater la présence des 12 colonnes.

 

Une bonne méthode d’intégration
Avant toute chose, vous devez comprendre la logique du framework… C’est une des priorités si vous ne voulez pas recommencer votre travail 🙂

Sachez que Bootstrap3 est intégré selon la méthode Mobile First, c’est à dire que l’on intègre pour le plus petit device (le mobile) pour enrichir après les écrans plus larges. C’est une méthode d’intégration assez séduisante car on commence avec un design assez épuré, puisque les éléments « inutiles » n’ont pas leur place sur les intégrations pour mobiles, pour ensuite se diriger vers un design plus complet.
Assimilez bien cette notion avant de lire la suite, puisque nous continuerons cet article en pensant « Mobile First ».

 

 

Côté HTML

C’est maintenant qu’il faut reprendre l’utilisation de la grille Bootstrap. En effet, le framework vous met à disposition 4 classes permettant de cibler chaque type de device.

Mobiles
(<768px)

 Tablettes
(≥768px)

 Écrans moyens (≥992px)

Écrans larges (≥1200px)

Préfixe de la classe

.col-xs-

.col-sm-

.col-md-

.col-lg-

Taille du conteneur principal

Auto

750px

970px

1170px

Taille maximale d’une colonne

Auto

60px

78px

95px

Prenons le code suivant :

<div class="featurette">
<h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>

<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>

<img class="featurette-image img-responsive" src="url/de/l/image">
</div>

 

Pour obtenir l’affichage suivant :

 

bootstrap - First feaurette heading 1

 

 

Pour les devices ayant une résolution supérieure à 992px, nous souhaitons obtenir le résultat suivant :

bootstrap - First feaurette heading 2

 

Il nous faut donc retoucher le code de base de la manière suivante :

<div class="row featurette">
<div class= "col-sm-8">
<h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>

<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<div class= "col-sm-4">
<img class="featurette-image img-responsive" src="url/de/l/image">
</div>
</div>

 

Comme vu précédemment, la classe .col-sm-* cible les devices ayant une résolution minimale de 992px. Si vous voulez cette même présentation pour les devices plus grands, vous n’avez pas besoin de rajouter les classes correspondantes.

En revanche, si vous vouliez obtenir un autre affichage, vous devez jouer avec les classes propres à chaque type de device. Par exemple :

<div class="row featurette">
<div class= "col-md-8 col-lg-9 col-sm-6">
<h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>

<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<div class= "col-md-4 col-lg-3 col-sm-6">
<img class="featurette-image img-responsive" src="url/de/l/image">
</div>
</div>

 

Vous remarquerez que, quel que soit le préfixe de classe utilisé (col-lg-*, col-md-*, col-sm-*), nous pouvons toujours constater la présence des 12 colonnes (8+4 \ 9+3 \ 6+6).

 

Côté CSS

Nous vous proposons de créer deux feuilles de styles différentes.

La première correspondra à la feuille de style « mobile » qui contiendra les styles communs ainsi que les spécificités pour le mobile. Notez que tous les devices, quel que soit leur résolution, seront ciblés.

La seconde sera la feuille « responsive » qui ciblera les différents devices grâce aux media queries suivantes :

@media (min-width: 768px) {}

@media (min-width: 992px) {}

@media (min-width: 1200px) {}

 

C’est dans cette feuille de styles que vous effectuerez tous vos ajustements.

 Attention, il y a nouveau une petite subtilité ! Chaque media query déclarée ci-dessus cible une résolution minimale.

 Prenons le code suivant, déclaré dans une feuille de style nommée design.css (feuille de style dite mobile) :

.btn{
   background:#000 ;
   color:#fff ;
   text-transform:uppercase ;
   padding:10px ;
}

 

Ce code s’appliquera à toutes les résolutions puisqu’il n’est pas déclaré dans une media query mais dans la feuille de style commune.

Si maintenant vous souhaitez que cet élément ait un aspect différent pour les devices ayant une résolution minimale de 992px (c’est à dire 992px et plus), il vous faudra donc surcharger cette classe de la manière suivante :

@media (min-width: 992px){
   .btn{
      color:#f0f0f0;      
      padding:10px 15px ;
   }
}

 

Si vous voulez donner un autre affichage à ce bouton pour les très grands devices, il faudra  modifier le code de cette manière :

@media (min-width: 1200px){
   .btn{
      color:red;      
      padding:15px 20px ;
   }
}

Ainsi le code précédent ciblera uniquement les devices ayant des résolutions comprises entre 992px et 1200px.

La logique d’intégration de Bootstrap vous pousse donc à intégrer votre site en suivant le schéma :

 

bootstrap - schéma d'intégration

Le cas IE8

Si vous l’ignorez, IE8 n’interprète pas les balises HTML5 et propriétés CSS3.

Pour que Bootstrap3 soit compatible IE8, vous devez donc inclure HTML5SHIV.JS (comme vu au début de l’article) mais également respond.js pour lui permettre de comprendre vos media queries.

Sachez que respond.js ne fonctionne pas en local. Vous devrez donc tester vos pages compatible IE8 en utilisant le protocole HTTP(s).

Aussi, ce plugin ne fonctionne pas avec les feuilles CSS référencées via @import. Ce point est important pour les utilisateurs de Drupal puisque certaines configurations de ce CMS sont connues pour utiliser la règle @import.

Pour plus d’informations sur l’utilisation de respond.js, cliquez ici.

Bootstrap n’est pas supporté avec le mode de compatibilité d’Internet Explorer. Ainsi, pour l’empêcher, n’oubliez pas de déclarer la meta suivante :

<meta http-equiv="X-UA-Compatible" content="IE=edge">

 

Avantages / inconvénients

Nous allons commencer par les inconvénients, car il n’y en a pas beaucoup!

Bootstrap est un gros framework qui nécessite de se plonger dedans pour en comprendre correctement le fonctionnement. Cette partie peut prendre un peu de temps, mais ce ne sera que bénéfique par la suite.
De plus, nous trouvons qu’il n’est pas pratique pour tester son site responsive sous IE8 car le plugin respond.js ne fonctionne pas en local.
Enfin, pour faciliter l’intégration de votre site sous Bootstrap, il est préférable d’avoir un design qui s’accorde avec la grille du framework…

Concernant les avantages, Bootstrap3 propose une structure et une méthodologie au goût du jour, ce qui vous permet de vous auto-former au web responsive ou de progresser.
C’est un framework qui est relativement simple d’utilisation et très accessible. Vous ne pouvez pas rester bloquer sur un point car la documentation en ligne sur le site officiel est très complète.
Lorsque vous vous êtes imprégnés du framework, votre vitesse de développement et de personnalisation des éléments existants est accrue.
Enfin, une bonne intégration permet une compatibilité optimale sur les différents navigateurs, même pour Internet Explorer (version 8 minimum) !

 

Avis personnel

Au premier abord, je n’accrochais pas avec ce Framework qui était une usine à gaz pour moi. Il faut dire que je l’ai découvert avec la version précédente et que j’ai eu beaucoup de mal à assimiler les nombreuses classes et le système des grilles …

Lorsque j’ai découvert la nouvelle version de Bootstrap, j’ai tout de suite accroché car elle est plus « user friendly » à mon goût. Lorsque l’on a assimilé le fonctionnement global, c’est un réel gain de temps ! Imaginez que vous réalisiez un site non responsive sous Bootstrap et que demain vous choisissiez de le transformer en site responsive. Et bien grâce à la structure carrée proposée par le framework, en ajoutant quelques classes, et en faisant des ajustements CSS, votre site devient responsive en un rien de temps (à condition qu’il soit bien intégré de base…)

Enfin, je trouve que l’utilisation du framework fait gagner énormément de temps sur le contrôle de la compatibilité navigateurs.

Essayer Bootstrap, c’est l’adopter ! 🙂

 

Responsive Design – Revue des frameworks The Goldilocks et Less framework 4

0

Avec l’émergence des tablettes et smartphones, les habitudes de consommation du web media ont changées. Les utilisateurs voient leur mode de communication et d’information évoluer : l’email, la téléphonie par internet, les abonnements aux ressources d’informations se sont banalisés. On comprend donc qu’Internet est omniprésent, quel que soit l’endroit où se trouve l’internaute.

De ce fait, la multiplication des tailles et des résolutions d’écran poussent les éditeurs à adapter leur site à chaque type de périphérique, de l’ordinateur au smartphone, en passant par la tablette. On comprend donc que le Responsive Web Design permet d’offrir à l’utilisateur une expérience optimale de consultation. En effet, ce principe de conception génère l’adaptabilité du site à la taille de la plateforme à partir de laquelle ce dernier est consulté.

Voici un exemple de site web responsive : celui de Story To a Job, réalisé par Webnet, et accessible sur des appareils de taille diverse.

 

Quelques notions de base…

Avant de vous lancer tête baissée dans la création d’un site web responsive, sachez qu’il faut tout de même avoir certaines notions et bases.

Vous devez maîtriser l’HTML(5) pour la sémantique et la construction de vos pages web, et le CSS(3) pour mettre en forme votre contenu et faire varier le comportement de vos éléments.

Vous devez aussi comprendre que les media queries permettent de cibler les périphériques en fonction de leur résolution, afin de leur appliquer une feuille de style. Ces medias queries sont à la fois présente dans le HTML et dans le CSS.

Voici un exemple d’utilisation dans le HTML. Notez que l’attribut media précise le contexte dans lequel les styles doivent être appliqués. Il peut prendre de multiples valeurs (print, screen, all, tv, etc…)

On appelle la feuille de style global.css. Cette feuille de style s’applique pour tous les périphériques.

<link rel="stylesheet" href="css/example/global.css" media="all">

 

On appelle ensuite la feuille de style layout.css qui s’appliquera pour tous les périphériques ayant une largeur minimale fixée.

 

<link rel="stylesheet" href="css/example/layout.css" media="all and (min-width: 33.236em)">

 

Dans le CSS, les règles @media ont une syntaxe légèrement différente et s’écrivent de cette forme :

@media screen and (min-width: 30em) and (max-width: 63.236em)

{

#container { width: 30em; }

}

Les styles définis entre cette règle s’appliqueront uniquement aux périphériques répondant aux conditions, en l’occurrence une résolution minimale de 30em et une résolution maximale de 63.236em.

Etant donné les diverses résolutions d’écran à traiter pour un site responsive, l’intégrateur web doit avoir une réflexion en amont plus importante. En effet, chaque support présente des contraintes. Il faut donc adapter l’ergonomie et la navigation pour rendre la consultation du site plus confortable pour l’internaute : tous les éléments doivent se mouvoir et se redimensionner pour chaque support.

Assurez-vous d’avoir un design web assez simple et épuré qui permettra à vos différents éléments de s’adapter sans difficulté. Il est recommandé d’avoir un design fonctionnant par « bloc ». Il est préférable de maquetter trois types de gabarits : pour les ordinateurs, pour les tablettes en version landscape et une pour smartphones.

Pour terminer sur les notions de base, vous avez peut-être entendu parler de grilles CSS, mais vous ne savez pas trop à quoi ça correspond. Elles permettent la mise en page « carrée » de votre site, elles servent de guide pour placer vos éléments. Vous obtiendrez ainsi un design harmonieux qui respecte des proportions précises (gouttières, largeur des éléments …).

 

Exemple de grille CSS (Grille CSS)

 

 

 

 

 

 

 

 

 

Exemple d’utilisation de grille

Vous avez toutes ces cartes en main et vous souhaitez créer un site web responsive mais vous passez beaucoup de temps avec le CSS ? Pas de panique, des solutions existent ! Je vous propose de (re)découvrir Less Framework 4 et The Goldilocks Approach, deux frameworks qui vous guideront dans la conception votre site web.

 

Pour une intégration simple et fonctionnelle

Less Framework 4 est un framework simple qui vous propose un système de grille pour la conception de sites web responsives. Il contient 4 layouts (les plus courants) et 3 ensembles de préréglages typographiques, tous basés sur une grille unique.

Lorsque vous téléchargez Less Framework 4, vous devez choisir votre préréglage typographique et vous pouvez choisir d’inclure les médias queries afin de détecter les écrans Rétina (comme l’iPhone 4). Il vous est également proposé d’inclure la sémantique HTML5 pour les versions précédentes du navigateur Internet Explorer 9.

Créer un site responsive avec ce framework est simple. Le fichier CSS est préconstruit en fonction des préférences choisies. Il est commenté pour vous permettre de comprendre sa construction et vous indique le nombre de colonnes (pour la grille) par résolution.

Etant donné les 4 layouts proposés, la fluidité de votre site se retrouve donc limitée. Si vous disposez d’un écran très large, votre site sera d’une taille maximale de 992px et placé au centre.
Aucun fichier d’exemple n’est fourni par le site, ce qui limite la compréhension de ce framework (malgré sa simplicité).

Site officiel du framework: http://lessframework.com/

 

Pour une adaptation maximale…

The Goldilocks Approach est une base complète pour démarrer le développement d’un site web responsive.

Ce framework vous propose un boilerplate HTML5 et CSS3 qui vous inculque une bonne base de développement d’un site adaptatif.

Contrairement à un certain nombre de framework CSS reponsive, The Goldilocks permet de viser toutes les résolutions. Il permet donc de gérer trois états de largeur :

 

Il suffit d’implémenter ces trois états pour avoir un design compatible sur toutes les résolutions.

Lorsque vous téléchargez The Goldilocks Approach, un exemple complet, auquel vous pouvez vous référer, vous est fourni. Vous avez également à disposition les fichiers HTML & CSS préconstruits. Vous retrouverez deux fichiers CSS commentés dans lesquels sont implémentés les 3 media queries nécessaires.

Néanmoins, vous devez bien maîtriser les unités de mesures en EM, car toutes les tailles sont exprimées ainsi. Vous pouvez évidemment les modifier à votre guise. Si vous débutez, vous trouverez peut-être ce framework complexe. Je vous conseille donc d’étudier l’exemple fourni avant de vous lancer.

Site officiel du framework : http://goldilocksapproach.com/

 

Vous avez fait votre choix mais vous ne savez pas comment démarrer ?

Soyez organisé ! Commencez par créer votre dossier de cette manière :

Vous pouvez ensuite commencer à développer votre site web.

Certains vous diront de commencer l’intégration complète de votre site internet, d’autres  de commencer par la plus petite résolution… A votre guise !

Cependant, il est conseillé de commencer par la plus petite résolution, qui sera la version la plus épurée du site, et de finir par la plus grande résolution qui sera le site internet complet. C’est le principe du Mobile First, inventé par Ethan Marcotte en 2009.

 

Et comment tester ?

Vous avez plusieurs possibilités.

La première consiste à ouvrir votre site sur votre navigateur préféré et redimensionner la fenêtre pour ainsi attendre les différentes résolutions de votre site.

Vous pouvez aussi utiliser des émulateurs on-line. Ils vous donnent un aperçu de ce à quoi ressemblera votre site sur les différents périphériques de consultation. Attention, certains sont plus précis que d’autres. Je vous recommande de vous rendre sur http://quirktools.com/screenfly/ qui vous offre la possibilité de choisir de multiples résolutions en fonction des terminaux de consultation.

 

Le meilleur moyen de contrôler le rendu exact de votre site responsive reste… la réalité. Si vous le pouvez, testez votre site sur un maximum de périphériques mais surtout sur les plus connus comme les ordinateurs, les tablettes, les smartphones.

Mon avis…

Pour avoir utilisé les deux frameworks, je n’ai pas réellement de préférence quant au choix de l’un ou de l’autre. Ils sont tous les deux très fonctionnels. Il faut, dans tous les cas, avoir de bonnes connaissances en HTML et CSS.

Avant d’utiliser tel ou tel Framework, il est impératif aussi d’avoir une maquette TRES bien construite, qui prend en compte toutes les spécificités du responsive web design (placement et comportement des éléments lors de l’adaptation).

Néanmoins, pour un débutant en Responsive, je conseillerais d’utiliser Less Framework qui est plus adapté. En effet, les 4 layouts ayant des tailles prédéfinies, ils permettent un « cadrage » dans l’intégration d’un site responsive. Néanmoins, ils n’offrent pas une fluidité intégrale à votre site.

The Goldilocks est un Framework très complet qui confère au site web une fluidité intégrale. Pour l’utiliser, mieux vaut avoir correctement assimilé la notion de media queries et avoir un code bien construit. En effet, pour un débutant l’outil n’est pas forcément des plus intuitifs.

Conseil d’ami : découper votre CSS en plusieurs fichiers afin de ne pas en avoir un énorme au final ! Cela vous permettra de ne pas vous mélanger les pinceaux et de vous focaliser sur une « adaptation » à la fois. Soyez organiser dans votre processus de création et dans l’organisation de vos fichiers.

Concevoir un site web responsive est formateur et intéressant mais nécessite une certaine réflexion et un certain temps de développement. Je recommande tout de même d’en développer au moins un pour en comprendre correctement le fonctionnement.