1 files changed, 105 insertions, 0 deletions
diff --git a/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.md b/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.md
new file mode 100644
index 0000000000..e5a16b419a
--- /dev/null
+++ b/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.md
@@ -0,0 +1,105 @@
+---
+title: Contribuer à une recette
+slug: Web/CSS/Layout_cookbook/Contribute_a_recipe
+tags:
+  - CSS
+  - Guide
+  - MDN
+  - Meta
+translation_of: Web/CSS/Layout_cookbook/Contribute_a_recipe
+original_slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette
+---
+<div>{{CSSRef}}</div>
+
+<p>Si vous souhaitez contribuer en ajoutant une recette à celles présentées dans cette section de MDN, nous vous expliquons ici quelles étapes suivre pour que vos exemples soient publiés.</p>
+
+<h2 id="Qu'est-ce_qu'une_«_bonne_»_recette">Qu'est-ce qu'une « bonne » recette ?</h2>
+
+<p><strong>Une bonne recette consiste en la version la plus simple possible d'un motif utile pour concevoir une page web.</strong> Chaque ligne de CSS écrite dans la recette doit servir à illustrer le motif. Tout ce qui est purement décoratif pour l'exemple doit être exclus. L'idée est que la recette puisse servir de base à n'importe qui et de pouvoir appliquer ses propres styles sur l'exemple si besoin.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Quant à la traduction et aux recettes en anglais, une recette (l'exemple interactif, la version téléchargeable et la page MDN) doit d'abord être créée en anglais avant de pouvoir être mise à disposition en français. La suite de ce guide explique en français ce qu'il faut réaliser mais la majeure partie du contenu produit devra être en anglais.</p>
+</div>
+
+<h2 id="Les_étapes_pour_la_publication">Les étapes pour la publication</h2>
+
+<p>Une recette se décompose comme suit :</p>
+
+<ol>
+ <li>Un exemple interactif, stocké <a href="https://github.com/mdn/css-examples">sur le dépôt GitHub des exemples CSS</a></li>
+ <li>Une version téléchargeable de cet exemple, également stockée sur le dépôt des exemples CSS.</li>
+ <li>Une page MDN, rattachée à la section <a href="/fr/docs/Web/CSS/Layout_cookbook">Livre de recettes CSS</a> qui contient :
+  <ol>
+   <li>Les spécifications sommaires</li>
+   <li>La recette</li>
+   <li>Les choix effectués</li>
+   <li>Les éventuelles méthodes alternatives (utiles pour l'amélioration progressive)</li>
+   <li>Les points relatifs à l'accessibilité</li>
+   <li>La compatibilité des navigateurs</li>
+   <li>D'éventuelles ressources additionnelles</li>
+  </ol>
+ </li>
+</ol>
+
+<h3 id="1._Construire_le_motif">1. Construire le motif</h3>
+
+<p>Avant de passer de l'exemple à la recette, commencez par écrire votre motif sous la forme d'une simple page HTML. Pensez à ce que vous voulez démontrer/illustrer et visez un résultat aussi simple que possible. Évitez d'utiliser des conventions CSS spécifiques qui ne seraient pas nécessairement connues et qui pourraient complexifier inutilement l'exemple.</p>
+
+<p>Assurez-vous que le code HTML et CSS soit valide et testez le dans différents navigateurs. Vous pouvez tout à fait utiliser des propriétés CSS qui ne sont pas prises en charge par l'ensemble des navigateurs. Vous pourrez inclure les informations de compatibilité dans la page dédiée. Dans certains cas, il pourra être utile de fournir une deuxième version de l'exemple qui illustre des techniques qui permettent de prendre en charge des navigateurs plus anciens.</p>
+
+<h3 id="2._Créer_un_exemple_interactif">2. Créer un exemple interactif</h3>
+
+<p>Les exemples interactifs que vous voyez sur ces recettes et dans d'autres articles MDN permettent aux visiteurs de modifier le code et d'en voir le résultat sans être submergé⋅e de code superflu. Votre recette pourra utiliser un ou plusieurs exemples interactifs.</p>
+
+<p>Créez un <em>fork</em> du <a href="https://github.com/mdn/css-examples">dépôt des exemples CSS</a> puis étudiez le dossier <code>css-cookbook</code>. Ce dernier contient un fichier <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/cookbook-template.html">cookbook-template.html</a> dont vous pouvez repartir pour réaliser votre exemple. Enregistrez le nouveau fichier dans le répertoire <code>css-cookbook</code> avec un nom pertinent. Le modèle de base est commenté afin de vous aider à situer les différentes parties.</p>
+
+<p>Voici les quelques éléments importants.</p>
+
+<p>Il y a une feuille de style pour les panneaux des éditeurs, quelques règles pour la mise en forme de base et un fichier JavaScript qui contient les fonctionnalités de l'éditeur. Ces fichiers doivent être laissés tels quels.</p>
+
+<p>Dans l'en-tête, il y a deux blocs pour le style. Le premier concerne les éléments que le visiteur n'a pas besoin de voir ou de changer pour modifier l'exemple. Le second correspond à ce qui pourra être modifié dans l'exemple. Généralement, on ajoute l'ensemble du CSS provenant de l'exemple dans le premier bloc puis on choisit les règles qu'on souhaite reproduire dans le deuxième bloc. Les règles du deuxième bloc doivent être celles qui illustrent l'essence de l'exemple et qu'un utilisateur pourra modifier afin d'en voir l'effet sur le motif.</p>
+
+<p>Le HTML du composant doit être ajouté deux fois. Pour commencer dans la section avec la classe <code>preview</code> puis dans l'élément <code>textarea</code> <code>playable-html</code>.</p>
+
+<p>Le CSS éditable (celui du second bloc de l'en-tête) doit également être recopié dans la section  <code>playable-css</code>.</p>
+
+<p>Pour voir un exemple existant et comprendre les différentes parties, vous pouvez consulter <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center.html">center.html</a> qui est utilisé sur la page <a href="/fr/docs/Web/CSS/Layout_cookbook/Center_an_element">Comment centrer un élément</a>.</p>
+
+<p>Si vous avez créé un <em>fork</em> du dépôt et que vous avez les fichiers CSS et JavaScript avec votre exemple, vous pouvez ouvrir la page dans un navigateur et l'ensemble devrait fonctionner de la même manière que lorsqu'il sera inclus dans une page.</p>
+
+<h4 id="Quelques_conseils">Quelques conseils</h4>
+
+<ol>
+ <li>N'indentez pas le code CSS et HTML à l'intérieur des <code>textarea</code> par rapport à l'ensemble du document HTML mais reprenez l'indentation depuis la première colonne (voir <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center.html">center.html</a> par exemple).</li>
+ <li>Si vous avez besoins d'images, placez les dans le dossier avec les exemples. Vous pouvez également utiliser une des images déjà présente.</li>
+ <li>Vous pouvez ajuster la hauteur des <code>textarea</code> en modifiant la hauteur dans les styles <em>inline</em>/en incise.</li>
+</ol>
+
+<h3 id="3._Créer_une_version_téléchargeable">3. Créer une version téléchargeable</h3>
+
+<p>L'exemple intégré à la page contient tout le code mais seule la partie nécessaire est affichée. Faites une copie du fichier en ajoutant <code>--download</code> au nom. Ainsi, <code>center.html</code> possède une version téléchargeable intitulée <code>center--download.html</code>. Ce fichier devra ressembler à l'exemple initial et contenir une version basique du motif, sur une seule page HTML. Il peut être utile d'inclure les règles CSS applliquées à <code>body</code> et qui sont dans la feuille de style intégrée. Vous pouvez consulter <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/cookbook-template--download.html">cookbook-template--download.html</a> comme exemple et point de départ.</p>
+
+<h3 id="4._Réaliser_une_pull_request_avec_votre_exemple">4. Réaliser une <em>pull request</em> avec votre exemple</h3>
+
+<p>Ouvrez une <em>pull request</em> depuis votre <em>fork</em> vers le <a href="https://github.com/mdn/css-examples">dépôt des exemples CSS</a>. Nous pourrons ainsi vous aider à apporter les modifications nécessaires pour la créations de la page. De plus, l'exemple devra être fusionné afin de pouvoir être affiché sur une page. Dans la <em>pull request</em>, veuillez écrire une présentation de cette recette et des concepts que vous illustrez.</p>
+
+<h3 id="5._Créer_la_page_sur_MDN">5. Créer la page sur MDN</h3>
+
+<p>Une fois l'exemple fusionné, vous pouvez créer l'article correspondant sur MDN. Pour cela, vous aurez besoin d'un compte et <a href="/en-US/docs/MDN/Contribute/Howto/Create_and_edit_pages#Getting_page_creation_permissions">des permissions pour la création de page</a>. Vous pourrez alors créer une page comme sous-page de la section. <a href="/en-US/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template">Cette page modèle pourra vous servir de point de départ pour votre contenu</a>.</p>
+
+<p>Le modèle explique le contenu de chaque section. Vous pouvez également consulter les recettes existantes comme références. Si vous cliquez sur le bouton d'édition en haut de page, vous pourrez ainsi accéder au contenu « brut » de la page et voir comment les macros sont utilisées afin d'intégrer les données de compatibilité ou les exemples interactifs.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si vous souhaitez effectuer la traduction d'une recette existante, vous pouvez consulter <a href="/fr/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template">la page modèle en français</a>.</p>
+</div>
+
+<p>Si vous avez besoin d'une aide générale sur l'utilisation de MDN, vous pouvez consulter les pages d'aide.</p>
+
+<p>Si vous avez des questions ou que vous souhaitez que quelqu'un vérifie votre page, n'hésitez pas à demander sur <a href="https://discourse.mozilla.org/c/mdn">le forum Discourse de MDN</a> ou à venir <a href="/fr/docs/MDN/Rejoindre_la_communauté/Conversations#Chat_sur_IRC">discuter sur IRC</a> (ces deux canaux sont principalement anglophones).</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template">Page modèle d'une recette</a></li>
+ <li><a href="https://github.com/mdn/css-examples">Dépôt git des exemples CSS</a></li>
+</ul>