diff options
| author | julieng <julien.gattelier@gmail.com> | 2021-11-11 06:45:27 +0100 |
|---|---|---|
| committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-11-11 09:08:40 +0100 |
| commit | abfd01f42c355d2212d1a8e0d6aca85037ce4139 (patch) | |
| tree | 5b871d1233abfd4025c5e7f6f647b521ad9b0539 /files/fr/mdn | |
| parent | f6f0c1509a262eb9a5e7bd5d1a84a7b24551eee6 (diff) | |
| download | translated-content-abfd01f42c355d2212d1a8e0d6aca85037ce4139.tar.gz translated-content-abfd01f42c355d2212d1a8e0d6aca85037ce4139.tar.bz2 translated-content-abfd01f42c355d2212d1a8e0d6aca85037ce4139.zip | |
convert content to md
Diffstat (limited to 'files/fr/mdn')
38 files changed, 2465 insertions, 2659 deletions
diff --git a/files/fr/mdn/about/index.md b/files/fr/mdn/about/index.md index a39a1964a8..3f561c9255 100644 --- a/files/fr/mdn/about/index.md +++ b/files/fr/mdn/about/index.md @@ -6,26 +6,26 @@ tags: translation_of: MDN/About original_slug: MDN/A_propos --- -<div>{{MDNSidebar}}</div><p>Le <em>Mozilla Developer Network</em> (MDN) est une plateforme évoluée d’apprentissage des technologies web et des logiciels qui animent le Web, notamment :</p> +{{MDNSidebar}} -<ul> - <li>les standards du Web, tels que <a href="/fr/docs/CSS">CSS</a>, <a href="/fr/docs/Web/HTML">HTML</a> et <a href="/fr/docs/JavaScript">JavaScript</a></li> - <li>le <a href="/fr/Apps">développement d’applications web ouvertes</a></li> - <li>le <a href="/fr/docs/Mozilla/Add-ons">développement d’extensions pour Firefox</a></li> -</ul> +Le _Mozilla Developer Network_ (MDN) est une plateforme évoluée d’apprentissage des technologies web et des logiciels qui animent le Web, notamment : -<h2 id="Comment_aider">Comment aider</h2> +- les standards du Web, tels que [CSS](/fr/docs/CSS), [HTML](/fr/docs/Web/HTML) et [JavaScript](/fr/docs/JavaScript) +- le [développement d’applications web ouvertes](/fr/Apps) +- le [développement d’extensions pour Firefox](/fr/docs/Mozilla/Add-ons) -<p>Il n’est pas nécessaire de savoir coder — ou même écrire — pour contribuer à MDN ! Il existe de nombreuses façons d’aider, de la relecture d’articles à l’ajout d’exemples de code. À vrai dire, il y a tellement de moyens de participer que nous avons même un <a href="/fr/docs/MDN/Débuter_sur_MDN">outil permettant d’aider à choisir une tâche</a> en se basant sur ce qui vous intéresse et combien de temps vous avez à donner !</p> +## Comment aider -<h2 id="Historique_du_projet">Historique du projet</h2> +Il n’est pas nécessaire de savoir coder — ou même écrire — pour contribuer à MDN ! Il existe de nombreuses façons d’aider, de la relecture d’articles à l’ajout d’exemples de code. À vrai dire, il y a tellement de moyens de participer que nous avons même un [outil permettant d’aider à choisir une tâche](/fr/docs/MDN/Débuter_sur_MDN) en se basant sur ce qui vous intéresse et combien de temps vous avez à donner ! -<p>Le projet <em>Mozilla Developer Network</em> (à l’origine <em>Mozilla Developer Center</em> (MDC) ou encore <em>Devmo</em>) a commencé début 2005, lorsque la <a class="external" href="https://www.mozilla.org/foundation/">fondation Mozilla</a> a obtenu une licence d'<abbr title="America Online">AOL</abbr> afin d'utiliser le contenu original de l'ancien site de documentation de Netscape, <a class="external" href="http://web.archive.org/web/20040926065921/devedge.netscape.com/">DevEdge</a>. Le contenu existant a été trié pour en retirer les parties qui étaient encore utiles. Migrées par des bénévoles vers ce wiki, les pages seront plus faciles à mettre à jour et à enrichir.</p> +## Historique du projet -<p>Depuis, le projet a continué à grandir formant à présent un point central pour toutes les documentations destinées aux développeur·se·s lié·e·s au projet Mozilla et aux technologies du Web ouvert. En 2010, le site s’est vu rebaptiser en <em>Mozilla Developper Network</em>. En 2011 furent lancés <a href="/fr/demos/">DemoStudio</a>, permettant aux développeurs web de partager et exposer leur code, ainsi que les pages « <a href="/fr/learn">Apprendre</a> », proposant des liens vers des tutoriels. L’acronyme MDC subsiste encore aujourd’hui, et signifie « MDN Doc Center ». Dans l'avenir, le <em>Mozilla Developer Network</em> espère devenir une ressource visitée quotidiennement par les créateurs web, les développeurs d'applications, d'extensions et de thèmes.</p> +Le projet _Mozilla Developer Network_ (à l’origine _Mozilla Developer Center_ (MDC) ou encore _Devmo_) a commencé début 2005, lorsque la [fondation Mozilla](https://www.mozilla.org/foundation/) a obtenu une licence d'AOL afin d'utiliser le contenu original de l'ancien site de documentation de Netscape, [DevEdge](http://web.archive.org/web/20040926065921/devedge.netscape.com/). Le contenu existant a été trié pour en retirer les parties qui étaient encore utiles. Migrées par des bénévoles vers ce wiki, les pages seront plus faciles à mettre à jour et à enrichir. -<p>Le système de wiki utilisé étant prévu pour être multilingue, différentes équipes de traduction se sont rapidement formées. La documentation existante en français pour les développeurs web est souvent très pauvre, ancienne et éparpillée. Des habitué·e·s de <a class="external" href="http://www.xulfr.org/">xulfr.org</a> et de <a class="external" href="https:/forums.mozfr.org/">Geckozone</a> se sont donc attelé·e·s à la tâche de traduire cette documentation pour un large public francophone. Mais nous sommes peu nombreux·ses et il y a énormément à faire, n'hésitez donc pas à nous rejoindre.</p> +Depuis, le projet a continué à grandir formant à présent un point central pour toutes les documentations destinées aux développeur·se·s lié·e·s au projet Mozilla et aux technologies du Web ouvert. En 2010, le site s’est vu rebaptiser en _Mozilla Developper Network_. En 2011 furent lancés [DemoStudio](/fr/demos/), permettant aux développeurs web de partager et exposer leur code, ainsi que les pages « [Apprendre](/fr/learn) », proposant des liens vers des tutoriels. L’acronyme MDC subsiste encore aujourd’hui, et signifie « MDN Doc Center ». Dans l'avenir, le _Mozilla Developer Network_ espère devenir une ressource visitée quotidiennement par les créateurs web, les développeurs d'applications, d'extensions et de thèmes. -<h2 id="À_propos_de_Mozilla">À propos de Mozilla</h2> +Le système de wiki utilisé étant prévu pour être multilingue, différentes équipes de traduction se sont rapidement formées. La documentation existante en français pour les développeurs web est souvent très pauvre, ancienne et éparpillée. Des habitué·e·s de [xulfr.org](http://www.xulfr.org/) et de [Geckozone](https:/forums.mozfr.org/) se sont donc attelé·e·s à la tâche de traduire cette documentation pour un large public francophone. Mais nous sommes peu nombreux·ses et il y a énormément à faire, n'hésitez donc pas à nous rejoindre. -<p>Que vous vouliez en apprendre plus sur nous, comment rejoindre Mozilla ou simplement où nous trouver, vous êtes au bon endroit. Pour comprendre ce qui nous motive et nous rend différents, rendez-vous sur notre page <a href="https://www.mozilla.org/fr/mission/">Mission</a>.</p> +## À propos de Mozilla + +Que vous vouliez en apprendre plus sur nous, comment rejoindre Mozilla ou simplement où nous trouver, vous êtes au bon endroit. Pour comprendre ce qui nous motive et nous rend différents, rendez-vous sur notre page [Mission](https://www.mozilla.org/fr/mission/). diff --git a/files/fr/mdn/at_ten/history_of_mdn/index.md b/files/fr/mdn/at_ten/history_of_mdn/index.md index b127966556..4e5e7b77ac 100644 --- a/files/fr/mdn/at_ten/history_of_mdn/index.md +++ b/files/fr/mdn/at_ten/history_of_mdn/index.md @@ -6,184 +6,182 @@ tags: translation_of: MDN_at_ten/History_of_MDN original_slug: MDN_a_dix_ans/Histoire_MDN --- -<p>Lors de cette discussion (en anglais), plusieurs contributeurs au projet MDN regardent dans le rétroviseur des dix dernières années de <a href="https://developer.mozilla.org">developer.mozilla.org</a> et imaginent la décennie à venir. Vous pourrez entendre l'histoire des différentes migrations entre les logiciels de wiki, la façon dont la communauté a été construite et découvrir de nombreuses anecdotes de l'histoire du site. Le groupe réuni discute également des défis actuels et des projets sur lesquels la communauté MDN travaille cette année.</p> +Lors de cette discussion (en anglais), plusieurs contributeurs au projet MDN regardent dans le rétroviseur des dix dernières années de [developer.mozilla.org](https://developer.mozilla.org) et imaginent la décennie à venir. Vous pourrez entendre l'histoire des différentes migrations entre les logiciels de wiki, la façon dont la communauté a été construite et découvrir de nombreuses anecdotes de l'histoire du site. Le groupe réuni discute également des défis actuels et des projets sur lesquels la communauté MDN travaille cette année. -<h3 id="Audio">Audio</h3> +### Audio -<pre class="brush: html hidden"><audio controls="controls"> +```html hidden +<audio controls="controls"> Il semblerait que votre navigateur ne dispose pas d'un lecteur audio intégré. Vous pouvez télécharger et l'utiliser depuis : https://videos.cdn.mozilla.net/uploads/mdn/MDN10/MDN_RoundTable.mp3 - <source src="https://videos.cdn.mozilla.net/uploads/mdn/MDN10/MDN_RoundTable.mp3" type="audio/mp3"> -</audio> -</pre> + <source src="https://videos.cdn.mozilla.net/uploads/mdn/MDN10/MDN_RoundTable.mp3" type="audio/mp3"> +</audio> +``` -<pre class="brush: css hidden"> body{margin-top:8px;}</pre> +```css hidden + body{margin-top:8px;} +``` +{{ EmbedLiveSample('Audio', 'auto', '50px') }} -<p>{{ EmbedLiveSample('Audio', 'auto', '50px') }}</p> +Dans la suite de cette article, vous pourrez en savoir plus sur les personnes qui ont pris part à cette discussion et qui partagent leurs souvenirs et leurs pensées à propos de MDN. Cela vous permettra de découvrir les personnes qui forment une partie de la communauté de MDN. -<p>Dans la suite de cette article, vous pourrez en savoir plus sur les personnes qui ont pris part à cette discussion et qui partagent leurs souvenirs et leurs pensées à propos de MDN. Cela vous permettra de découvrir les personnes qui forment une partie de la communauté de MDN.</p> +## Justin Crawford Product Manager, MDN + -<h2 id="Justin_Crawford_Product_Manager_MDN">Justin Crawford <small> Product Manager, MDN</small></h2> +Justin anime cette discussion. Il fait des trucs avec du code, des mots, des morceaux de vélos et avec du bois. Sur Twitter, c'est [@hoosteeno](https://twitter.com/hoosteeno). -<p><img alt="Justin Crawford" src="hoosteeno.jpg"></p> +## Qu'est-ce que MDN ? À qui s'adresse-t-il ? Un endroit pour la communauté du Web ouvert -<p>Justin anime cette discussion. Il fait des trucs avec du code, des mots, des morceaux de vélos et avec du bois. Sur Twitter, c'est <a href="https://twitter.com/hoosteeno">@hoosteeno</a>.</p> +MDN fournit de nombreuses informations sur les technologies web et encourage l'apprentissage, le partage et l'enseignement des notions liées au Web ouvert. Sur MDN, vous pouvez contribuer pour vous-même et pour les autres. - -<h2 id="Qu'est-ce_que_MDN_À_qui_s'adresse-t-il_Un_endroit_pour_la_communauté_du_Web_ouvert">Qu'est-ce que MDN ? À qui s'adresse-t-il ?<small> Un endroit pour la communauté du Web ouvert</small></h2> - -<p>MDN fournit de nombreuses informations sur les technologies web et encourage l'apprentissage, le partage et l'enseignement des notions liées au Web ouvert. Sur MDN, vous pouvez contribuer pour vous-même et pour les autres.</p> Un endroit pour les développeurs Mozilla -<p>MDN est également un lieu destiné aux ingénieurs de Mozilla (qui travaillent par exemple sur Gecko ou Firefox), aux développeurs de modules complémentaires et aux contributeurs de Firefox OS.</p> +MDN est également un lieu destiné aux ingénieurs de Mozilla (qui travaillent par exemple sur Gecko ou Firefox), aux développeurs de modules complémentaires et aux contributeurs de Firefox OS. -<h2 id="Eric_Sheppy_Shepherd_Écrivain_technique_MDN">Eric "Sheppy" Shepherd <small>Écrivain technique, MDN</small></h2> +## Eric "Sheppy" Shepherd Écrivain technique, MDN -<p><img alt="Eric Shepherd" src="a2sheppy.png"></p> + -<p>Sheppy écrit de la documentation pour Mozilla depuis 2006, il connaît une grande partie de l'histoire de MDC / MDN et surtout de nombreuses anecdotes. Sur Twitter, c'est <a href="https://twitter.com/sheppy">@sheppy</a>.</p> +Sheppy écrit de la documentation pour Mozilla depuis 2006, il connaît une grande partie de l'histoire de MDC / MDN et surtout de nombreuses anecdotes. Sur Twitter, c'est [@sheppy](https://twitter.com/sheppy). -<h2 id="L'histoire_de_MDN_L'ère_pré-wiki_–_Netscape_DevEdge">L'histoire de MDN <small>L'ère pré-wiki – Netscape DevEdge</small></h2> +## L'histoire de MDN L'ère pré-wiki – Netscape DevEdge -<p>Au commencement était <em>DevEdge</em>, la documentation pour développeurs de Netscape. Ce fut la base pour une partie de la documentation de MDN. Vous pouvez vous plonger dans le passé grâce à <a href="https://web.archive.org/web/20020819120942/http://devedge.netscape.com/">archive.org</a> :</p> +Au commencement était _DevEdge_, la documentation pour développeurs de Netscape. Ce fut la base pour une partie de la documentation de MDN. Vous pouvez vous plonger dans le passé grâce à [archive.org](https://web.archive.org/web/20020819120942/http://devedge.netscape.com/) : -<p><a href="https://web.archive.org/web/20020819120942/http://devedge.netscape.com/"><img alt="Netscape DevEdge" src="devedge.png"> </a></p> +[](https://web.archive.org/web/20020819120942/http://devedge.netscape.com/) -<p>Le 12 octobre 2004, ce site, populaire parmi les développeurs, fut fermé par AOL, l'entreprise à l'origine de Netscape. Quelques mois plus tard, en février 2005, <a href="https://blog.lizardwrangler.com/">Mitchell Baker</a> put <a href="https://blog.lizardwrangler.com/2005/02/23/devmo-and-devedge-updates/">secourir DevEdge</a> suite à un accord avec AOL qui permit à Mozilla de publier, modifier et de créer de nouveaux documents à partir du contenu du défunt Netscape DevEdge. Autrement dit, ce qui se produisit pour le code de Mozilla en 1998 s'appliqua également à la documentation Netscape pour les développeurs : <strong>elle est devenue open source</strong>.</p> +Le 12 octobre 2004, ce site, populaire parmi les développeurs, fut fermé par AOL, l'entreprise à l'origine de Netscape. Quelques mois plus tard, en février 2005, [Mitchell Baker](https://blog.lizardwrangler.com/) put [secourir DevEdge](https://blog.lizardwrangler.com/2005/02/23/devmo-and-devedge-updates/) suite à un accord avec AOL qui permit à Mozilla de publier, modifier et de créer de nouveaux documents à partir du contenu du défunt Netscape DevEdge. Autrement dit, ce qui se produisit pour le code de Mozilla en 1998 s'appliqua également à la documentation Netscape pour les développeurs : **elle est devenue open source**. -<p>Deb Richardson rejoignit la Fondation Mozilla comme éditeur technique pour diriger le nouveau projet <em>DevMo</em>. Le but de ce projet : organiser de la documentation pour les développeurs grâce à la communauté.</p> +Deb Richardson rejoignit la Fondation Mozilla comme éditeur technique pour diriger le nouveau projet _DevMo_. Le but de ce projet : organiser de la documentation pour les développeurs grâce à la communauté. -<h2 id="MediaWiki_Le_premier_moteur_wiki">MediaWiki <small>Le premier moteur wiki</small></h2> +## MediaWiki Le premier moteur wiki -<p>Grâce à MediaWiki qui fut la première plateforme utilisée pour ce nouveau projet, la documentation de Mozilla à destination des développeurs est rendue éditable à partir de juillet 2005. Une nouvelle brique collaborative vient s'ajouter au projet Mozilla et chacun est le bienvenu pour bâtir, améliorer cette ressource et partager ses connaissances. Une nouvelle communauté voit le jour à l'échelle internationale qui traduit le contenu dans d'autres langues.</p> +Grâce à MediaWiki qui fut la première plateforme utilisée pour ce nouveau projet, la documentation de Mozilla à destination des développeurs est rendue éditable à partir de juillet 2005. Une nouvelle brique collaborative vient s'ajouter au projet Mozilla et chacun est le bienvenu pour bâtir, améliorer cette ressource et partager ses connaissances. Une nouvelle communauté voit le jour à l'échelle internationale qui traduit le contenu dans d'autres langues. -<p><a href="https://web.archive.org/web/20051226031957/http://developer.mozilla.org/en/docs/Main_Page"><img alt="MDC MediaWiki" src="mediawiki.png"> </a></p> +[](https://web.archive.org/web/20051226031957/http://developer.mozilla.org/en/docs/Main_Page) -<h2 id="Florian_Scholz_Écrivain_technique_MDN">Florian Scholz <small>Écrivain technique, MDN</small></h2> +## Florian Scholz Écrivain technique, MDN -<p><img alt="Florian Scholz" src="elchi3.jpg"></p> -<p>Florian est un écrivain technique, employé à Mozilla et orienté vers les technologies web. Il prend soin de ce wiki comme certains prendraient soin d'un jardin, en cultivant la documentation et en tutorant la communauté avec laquelle il aime travailler afin que la documentation soit accessible au plus grand nombre. Florian est passioné d'open source, il est basé à Brême en Allemagne. Ses tweets sont signés avec l'alias <a href="https://twitter.com/floscholz">@floscholz</a>.</p> + -<h2 id="DekiWiki_Le_deuxième_moteur_wiki">DekiWiki <small>Le deuxième moteur wiki</small></h2> +Florian est un écrivain technique, employé à Mozilla et orienté vers les technologies web. Il prend soin de ce wiki comme certains prendraient soin d'un jardin, en cultivant la documentation et en tutorant la communauté avec laquelle il aime travailler afin que la documentation soit accessible au plus grand nombre. Florian est passioné d'open source, il est basé à Brême en Allemagne. Ses tweets sont signés avec l'alias [@floscholz](https://twitter.com/floscholz). -<p>En août 2008, le Mozilla Developer Center passa à MindTouch DekiWiki, un nouveau système de gestion de contenu et un système de wiki pour de la documentation technique. Cette plateforme fut sujette à controverse car la communauté qui utilisait MediaWiki depuis 2005 avait construit de nombreux outils autour de cette plateforme.</p> +## DekiWiki Le deuxième moteur wiki -<p><a href="https://web.archive.org/web/20080907231611/http://developer.mozilla.org/en"><img alt="MDC DekiWiki" src="screenshot_2018-07-24_16.06.55.png"> </a></p> +En août 2008, le Mozilla Developer Center passa à MindTouch DekiWiki, un nouveau système de gestion de contenu et un système de wiki pour de la documentation technique. Cette plateforme fut sujette à controverse car la communauté qui utilisait MediaWiki depuis 2005 avait construit de nombreux outils autour de cette plateforme. -<h2 id="Ali_Spivak_Gardienne_des_supers_chats_de_MDN">Ali Spivak <small>Gardienne des supers chats de MDN</small></h2> +[](https://web.archive.org/web/20080907231611/http://developer.mozilla.org/en) -<p><img alt="Ali Spivak" src="iyqi3qpv.jpg"></p> +## Ali Spivak Gardienne des supers chats de MDN -<p>Ali Spivak gère le contenu et la communauté du Mozilla Developer Network. Elle passe son temps à réfléchir aux moyens de rendre le Web encore plus génial. Elle est passionnée lorsqu'il s'agit de maintenir un Web ouvert et libre. Après avoir versé dans l'open source lorsqu'elle a rejoint Mozilla en 2012, elle se concentre sur la construction et la participation des communautés de développeurs à Mozilla. Sur Twitter, c'est <a href="https://twitter.com/alispivak">@alispivak</a>.</p> + -<h2 id="Kuma_Le_troisième_(et_actuel)_moteur_wiki">Kuma <small>Le troisième (et actuel) moteur wiki</small></h2> +Ali Spivak gère le contenu et la communauté du Mozilla Developer Network. Elle passe son temps à réfléchir aux moyens de rendre le Web encore plus génial. Elle est passionnée lorsqu'il s'agit de maintenir un Web ouvert et libre. Après avoir versé dans l'open source lorsqu'elle a rejoint Mozilla en 2012, elle se concentre sur la construction et la participation des communautés de développeurs à Mozilla. Sur Twitter, c'est [@alispivak](https://twitter.com/alispivak). -<p><a href="https://github.com/mozilla/kuma">Kuma</a>, qui fut une fourche de <a href="https://github.com/mozilla/kitsune">Kitsune</a> début 2011, fut lancé le 3 août 2012. C'est une plateforme construite par Mozilla pour gérer un wiki, celle-ci est basée sur Django et utilise son propre système de macro, appelé <a href="/en-US/docs/MDN/Kuma/Introduction_to_KumaScript">KumaScript</a> et qui est basé sur Node.js.</p> +## Kuma Le troisième (et actuel) moteur wiki -<p>Le code étant disponible sur GitHub, la communauté commença également à contribuer au logiciel derrière MDN. Désormais, contribuer et bidouiller sur MDN concerne aussi bien la documentation que le développement sur Kuma.</p> +[Kuma](https://github.com/mozilla/kuma), qui fut une fourche de [Kitsune](https://github.com/mozilla/kitsune) début 2011, fut lancé le 3 août 2012. C'est une plateforme construite par Mozilla pour gérer un wiki, celle-ci est basée sur Django et utilise son propre système de macro, appelé [KumaScript](/en-US/docs/MDN/Kuma/Introduction_to_KumaScript) et qui est basé sur Node.js. -<p><a href="https://web.archive.org/web/20121003233220/https://developer.mozilla.org/en-US/"><img alt="MDN KUMA" src="kuma.png"> </a></p> +Le code étant disponible sur GitHub, la communauté commença également à contribuer au logiciel derrière MDN. Désormais, contribuer et bidouiller sur MDN concerne aussi bien la documentation que le développement sur Kuma. -<h2 id="David_Walsh_Développeur_web_MDN">David Walsh <small>Développeur web, MDN</small></h2> +[](https://web.archive.org/web/20121003233220/https://developer.mozilla.org/en-US/) -<p><img alt="David Walsh" src="darkwing.png"></p> +## David Walsh Développeur web, MDN -<p>Développeur web sénior à Mozilla, ingénieur front-end, développeur principal de MooTools, fanatique de JavaScript, bidouilleur PHP et bricoleur CSS, amoureux du Web et de l'open source, David est <a href="https://twitter.com/davidwalshblog">@davidwalshblog</a> sur Twitter.</p> + -<h2 id="Refondre_MDN_Kuma_rafraîchi">Refondre MDN <small> Kuma, rafraîchi</small></h2> +Développeur web sénior à Mozilla, ingénieur front-end, développeur principal de MooTools, fanatique de JavaScript, bidouilleur PHP et bricoleur CSS, amoureux du Web et de l'open source, David est [@davidwalshblog](https://twitter.com/davidwalshblog) sur Twitter. -<p>La refonte de MDN fut un gros projet. <a href="https://twitter.com/mart3ll">Sean Martell</a> créa la nouvelle identité visuelle de MDN. Ce fut un processus itératif auquel prit part un groupe de 3000 beta-testeurs, durant plusieurs mois. Le nouveau style du site était « caché » derrière une option (« Waffle flag », le nom du système qui gère les options activées ou non dans MDN). Un grand bravo à <a href="https://twitter.com/davidwalshblog/">David Walsh</a> qui fut le principal acteur de cette refonte et qui offrit à MDN le style qu'il méritait.</p> -<img alt="Waffle flag" src="waffle-flag.jpg"> +## Refondre MDN Kuma, rafraîchi -<h2 id="Janet_Swisher_Community_Manager_MDN">Janet Swisher <small> Community Manager, MDN</small></h2> +La refonte de MDN fut un gros projet. [Sean Martell](https://twitter.com/mart3ll) créa la nouvelle identité visuelle de MDN. Ce fut un processus itératif auquel prit part un groupe de 3000 beta-testeurs, durant plusieurs mois. Le nouveau style du site était « caché » derrière une option (« Waffle flag », le nom du système qui gère les options activées ou non dans MDN). Un grand bravo à [David Walsh](https://twitter.com/davidwalshblog/) qui fut le principal acteur de cette refonte et qui offrit à MDN le style qu'il méritait. -<p><img alt="Janet Swisher" src="jmswisher.jpg"></p> + -<p>Janet est community manager à Mozilla pour MDN. Elle a rejoint Mozilla en 2004 et participe à des projets autour des logiciels open source depuis 2004. Elle travaille sur la communication technique depuis le XX<sup>e</sup> siècle. Elle vit à Austin au Texas (aux États-Unis) avec son mari et un caniche. Sur Twitter, c'est <a href="https://twitter.com/jmswisher">@jmswisher</a>.</p> +## Janet Swisher Community Manager, MDN -<h2 id="La_communauté_autour_de_la_documentation_du_Web_Une_documentation_construite_par_la_communauté_et_agnostique_pour_les_différents_navigateurs">La communauté autour de la documentation du Web<small> Une documentation construite par la communauté et agnostique pour les différents navigateurs</small></h2> + -<p>En 2010, notamment <a href="https://hacks.mozilla.org/2010/10/web-standards-doc-sprint-finis/">lorsque les membres de la communauté et les écrivains techniques se sont recontrés à Paris</a>, MDN changea de direction : « Documenter tout sur Firefox ! » devint « Documenter tout sur le Web ». C'est pourquoi, ces dernières années, la documentation a été revue, nettoyée et réorganisée pour que la documentation de MDN à propos du Web soit agnostique quant aux navigateurs. De cette façon, MDN est une ressource utile pour n'importe quel développeur web. C'est la partie de MDN consacrée au Web qui est la plus populaire et la plus utilisée.</p> +Janet est community manager à Mozilla pour MDN. Elle a rejoint Mozilla en 2004 et participe à des projets autour des logiciels open source depuis 2004. Elle travaille sur la communication technique depuis le XX<sup>e</sup> siècle. Elle vit à Austin au Texas (aux États-Unis) avec son mari et un caniche. Sur Twitter, c'est [@jmswisher](https://twitter.com/jmswisher). -<p>Les différentes organisations à l'origine des différents navigateurs ont depuis participé au contenu de MDN. Cette collaboration autour des différents navigateurs est très appréciée des lecteurs de MDN.</p> +## La communauté autour de la documentation du Web Une documentation construite par la communauté et agnostique pour les différents navigateurs -<h2 id="Luke_Crouch_développeur_web_MDN">Luke Crouch <small>développeur web, MDN</small></h2> +En 2010, notamment [lorsque les membres de la communauté et les écrivains techniques se sont recontrés à Paris](https://hacks.mozilla.org/2010/10/web-standards-doc-sprint-finis/), MDN changea de direction : « Documenter tout sur Firefox ! » devint « Documenter tout sur le Web ». C'est pourquoi, ces dernières années, la documentation a été revue, nettoyée et réorganisée pour que la documentation de MDN à propos du Web soit agnostique quant aux navigateurs. De cette façon, MDN est une ressource utile pour n'importe quel développeur web. C'est la partie de MDN consacrée au Web qui est la plus populaire et la plus utilisée. -<p><img alt="Luke Crouch" src="groovecoder.png"></p> +Les différentes organisations à l'origine des différents navigateurs ont depuis participé au contenu de MDN. Cette collaboration autour des différents navigateurs est très appréciée des lecteurs de MDN. -<p>Luke Crouch brasse sa propre bière, est fan de football et est développeur web à Mozilla. Il développe sur le Web depuis 1996, utilise Firefox depuis 2004, écrit des logiciels open source depuis 2006 et a rejoint Mozilla comme premier développeur web pour MDN en 2010. Sur Twitter, Luke est <a href="https://twitter.com/groovecoder">@groovecoder</a>.</p> +## Luke Crouch développeur web, MDN -<h2 id="Les_communautés_de_localisation_MDN_sert_un_public_mondial_dans_de_nombreuses_langues">Les communautés de localisation <small> MDN sert un public mondial, dans de nombreuses langues</small></h2> + -<p>La localisation est une pierre angulaire de la communauté Mozilla. Elle fait partie de presque tous les projets et tous les produits. Grâce à Kuma, MDN est localisable et répond aux besoin de <a href="/en-US/docs/MDN/Contribute/Localize">notre communauté l10n</a>. Les spécifications W3C et les autres ressources qui décrivent les fonctionnalités du Web n'ont parfois pas d'autres fins et sont donc uniquement disponibles en anglais. Pour les développeurs avancés mais aussi et surtout pour les débutants, MDN peut permettre d'explorer les technologies du Web. C'est donc notre but que d'être disponible pour tout le monde. MDN possède un public mondial et ne vise pas uniquement les anglophones. Grâce aux efforts de traduction et de localisation, MDN est apprécié tout autour du globe.</p> +Luke Crouch brasse sa propre bière, est fan de football et est développeur web à Mozilla. Il développe sur le Web depuis 1996, utilise Firefox depuis 2004, écrit des logiciels open source depuis 2006 et a rejoint Mozilla comme premier développeur web pour MDN en 2010. Sur Twitter, Luke est [@groovecoder](https://twitter.com/groovecoder). -<h2 id="Julien_(alias_Sphinx)_Localisation_en_français_MDN">Julien (alias Sphinx) <small>Localisation en français, MDN</small></h2> +## Les communautés de localisation MDN sert un public mondial, dans de nombreuses langues -<p><img alt="Julien" src="ensemble.png"></p> +La localisation est une pierre angulaire de la communauté Mozilla. Elle fait partie de presque tous les projets et tous les produits. Grâce à Kuma, MDN est localisable et répond aux besoin de [notre communauté l10n](/en-US/docs/MDN/Contribute/Localize). Les spécifications W3C et les autres ressources qui décrivent les fonctionnalités du Web n'ont parfois pas d'autres fins et sont donc uniquement disponibles en anglais. Pour les développeurs avancés mais aussi et surtout pour les débutants, MDN peut permettre d'explorer les technologies du Web. C'est donc notre but que d'être disponible pour tout le monde. MDN possède un public mondial et ne vise pas uniquement les anglophones. Grâce aux efforts de traduction et de localisation, MDN est apprécié tout autour du globe. -<p>Julien a passé de nombreuses soirées et week-ends, pendant plusieurs mois à traduire et à maintenir les articles sur JavaScript en français. Il n'est pas développeur mais possède des connaissances en informatique et souhaite apprendre ce qui tourne autour des nouvelles technologies. Plutôt que de regarder la télé, il contribue à MDN.</p> +## Julien (alias Sphinx) Localisation en français, MDN -<h2 id="Jean-Yves_Perrier_Écrivain_technique_MDN">Jean-Yves Perrier <small>Écrivain technique, MDN</small></h2> + -<p><img alt="Jean-Yves Perrier" src="teoli2003.png"></p> +Julien a passé de nombreuses soirées et week-ends, pendant plusieurs mois à traduire et à maintenir les articles sur JavaScript en français. Il n'est pas développeur mais possède des connaissances en informatique et souhaite apprendre ce qui tourne autour des nouvelles technologies. Plutôt que de regarder la télé, il contribue à MDN. -<p>Jean-Yves est écrivain technique sur MDN depuis 2010, il a rejoint Mozilla à plein temps fin 2011. Il est passioné par le Web et a 15 ans d'expérience en C++. Il est Suisse et vit à Londres au Royaume-Uni. Son indice d'Erdös vaut 5 et sur Twitter, c'est <a href="https://twitter.com/Teoli2003">@Teoli2003</a>.</p> +## Jean-Yves Perrier Écrivain technique, MDN + -<h2 id="«_Learning_Area_»_ou_Apprendre_le_Web">« Learning Area » ou Apprendre le Web</h2> +Jean-Yves est écrivain technique sur MDN depuis 2010, il a rejoint Mozilla à plein temps fin 2011. Il est passioné par le Web et a 15 ans d'expérience en C++. Il est Suisse et vit à Londres au Royaume-Uni. Son indice d'Erdös vaut 5 et sur Twitter, c'est [@Teoli2003](https://twitter.com/Teoli2003). -<p>La <a href="https://developer.mozilla.org/en-US/Learn">Learning Area</a> est un nouveau projet de MDN pour enseigner les compétences de base autour du Web. Ces 10 dernières années, MDN a mis à disposition beaucoup de contenu avancé, permettant aux experts de travailler avec des informations précises. Ce projet est à destination des débutants et vise à combler les manques vis-à-vis de ce public.</p> +## « Learning Area » ou Apprendre le Web -<h2 id="Jérémie_Patonnier_Écrivain_technique_MDN">Jérémie Patonnier <small>Écrivain technique, MDN</small></h2> +La [Learning Area](https://developer.mozilla.org/en-US/Learn) est un nouveau projet de MDN pour enseigner les compétences de base autour du Web. Ces 10 dernières années, MDN a mis à disposition beaucoup de contenu avancé, permettant aux experts de travailler avec des informations précises. Ce projet est à destination des débutants et vise à combler les manques vis-à-vis de ce public. -<p><img alt="Jérémie Patonnier" src="jeremiepat.jpg"></p> +## Jérémie Patonnier Écrivain technique, MDN -<p>Jérémie est, depuis longtemps, un contributeur à MDN. C'est un développeur web professionnel depuis 2000. Il milite en faveur des standards du Web et écrit de la documentation sur les technologies web avec la volonté qu'elle soit accessible à tout le monde. Sur Twitter, c'est <a href="https://twitter.com/JeremiePat">@JeremiePat</a>.</p> + -<h2 id="Le_futur_de_MDN_Qu'est-ce_qui_sera_différent_lors_des_20_ans_de_MDN">Le futur de MDN <small>Qu'est-ce qui sera différent lors des 20 ans de MDN ?</small></h2> +Jérémie est, depuis longtemps, un contributeur à MDN. C'est un développeur web professionnel depuis 2000. Il milite en faveur des standards du Web et écrit de la documentation sur les technologies web avec la volonté qu'elle soit accessible à tout le monde. Sur Twitter, c'est [@JeremiePat](https://twitter.com/JeremiePat). -<p>Toutes les personnes qui sont impliquées au sein de MDN souhaitent vraiment que le Web soit ouvert et accessible à tous. C'est pour cela que nous avons de nombreux contributeurs et équipes de localisation. MDN espère continuer à jouer un rôle important pour que le Web continue à être ce que nous aimerions qu'il soit.</p> +## Le futur de MDN Qu'est-ce qui sera différent lors des 20 ans de MDN ? -<p>Une grande partie de cet avenir se jouera sur les ressources d'apprentissage. Ces dix prochaines années, nous verrons de plus en plus de développeurs web.</p> +Toutes les personnes qui sont impliquées au sein de MDN souhaitent vraiment que le Web soit ouvert et accessible à tous. C'est pour cela que nous avons de nombreux contributeurs et équipes de localisation. MDN espère continuer à jouer un rôle important pour que le Web continue à être ce que nous aimerions qu'il soit. -<p>Une autre partie, toute aussi importante, est de maintenir et de mettre à jour le contenu déjà présent sur MDN. Grâce à cela, les développeurs web pourront toujours bénéficier d'un contenu précis et pertinent.</p> +Une grande partie de cet avenir se jouera sur les ressources d'apprentissage. Ces dix prochaines années, nous verrons de plus en plus de développeurs web. -<p>Ce qui change et qui va probablement continuer à changer, c'est la façon dont l'information est consommée. Aujourd'hui, les personnes recherchent des informations et parcourent la documentation. Demain, MDN pourrait être diffusé via les édidteurs de code, les outils de développement Firefox, via d'autres services et outils, etc.</p> +Une autre partie, toute aussi importante, est de maintenir et de mettre à jour le contenu déjà présent sur MDN. Grâce à cela, les développeurs web pourront toujours bénéficier d'un contenu précis et pertinent. -<h2 id="Des_contributeurs_exceptionnels_Beaucoup_d'autres_personnes_ont_accompli_un_travail_formidable_sur_MDN">Des contributeurs exceptionnels <small>Beaucoup d'autres personnes ont accompli un travail formidable sur MDN</small></h2> +Ce qui change et qui va probablement continuer à changer, c'est la façon dont l'information est consommée. Aujourd'hui, les personnes recherchent des informations et parcourent la documentation. Demain, MDN pourrait être diffusé via les édidteurs de code, les outils de développement Firefox, via d'autres services et outils, etc. -<ul> - <li>Les Orchard</li> - <li>John Karahalis</li> - <li>David Walsh</li> - <li>Jannis Leidel</li> - <li>Stephanie Hobson</li> - <li>James Bennett</li> - <li>Isac Lagerblad</li> - <li>Piotrek Koszuliński</li> - <li>Craig Cook</li> - <li>Rob Hudson</li> - <li>John Whitlock</li> - <li>...Et bien d'autres <a href="https://github.com/mozilla/kuma/graphs/contributors">contributeurs à Kuma.</a></li> -</ul> +## Des contributeurs exceptionnels Beaucoup d'autres personnes ont accompli un travail formidable sur MDN +- Les Orchard +- John Karahalis +- David Walsh +- Jannis Leidel +- Stephanie Hobson +- James Bennett +- Isac Lagerblad +- Piotrek Koszuliński +- Craig Cook +- Rob Hudson +- John Whitlock +- ...Et bien d'autres [contributeurs à Kuma.](https://github.com/mozilla/kuma/graphs/contributors) -<ul> - <li>Chris Mills</li> - <li>Will Bamberg</li> - <li>David Bruant</li> - <li>Thierry Régagnon</li> - <li>etherthank</li> - <li>Saurabh Nair</li> - <li>Deb Richardson</li> - <li>Sebastian Zartner</li> - <li>Tooru Fujisawa</li> - <li>Karen Scarfone</li> - <li>Niklas Barning</li> - <li>...<br> - Et des centaines de contributeurs au wiki.</li> -</ul> +<!----> -<img alt="The Berlin Office" src="11073502_781006205281080_8135317797319228200_o-600x400.jpg"> +- Chris Mills +- Will Bamberg +- David Bruant +- Thierry Régagnon +- etherthank +- Saurabh Nair +- Deb Richardson +- Sebastian Zartner +- Tooru Fujisawa +- Karen Scarfone +- Niklas Barning +- ... + Et des centaines de contributeurs au wiki. + diff --git a/files/fr/mdn/at_ten/index.md b/files/fr/mdn/at_ten/index.md index 08e46f4829..79e4969746 100644 --- a/files/fr/mdn/at_ten/index.md +++ b/files/fr/mdn/at_ten/index.md @@ -7,30 +7,26 @@ tags: translation_of: MDN_at_ten original_slug: MDN_a_dix_ans --- -<div> -<p>Fêtons 10 années passées à documenter votre Web.</p> -</div> +Fêtons 10 années passées à documenter votre Web. -<h2 id="L'histoire_de_MDN">L'histoire de MDN</h2> +## L'histoire de MDN -<p>Début 2005, une petite equipe de développeurs Web ont crée une ressource libre et construite de façon communautaire. Cette idée brillante et décalée par rapport à cette époque est aujourd'hui devenue Mozilla Developer Network — la meilleure ressource pour toutes les technologies ouvertes du Web. Dix ans plus tard, notre communauté est toujours plus grande et présente sur toute la planète. Ensemble, nous continuons à créer de la documentation, des exemples de code et des ressources d'apprentissage pour toutes les technologies du Web telles que CSS, HTML, JavaScript et tout ce qui fait le Web tel qu'il est :c'est à dire ouvert et puissant.</p> +Début 2005, une petite equipe de développeurs Web ont crée une ressource libre et construite de façon communautaire. Cette idée brillante et décalée par rapport à cette époque est aujourd'hui devenue Mozilla Developer Network — la meilleure ressource pour toutes les technologies ouvertes du Web. Dix ans plus tard, notre communauté est toujours plus grande et présente sur toute la planète. Ensemble, nous continuons à créer de la documentation, des exemples de code et des ressources d'apprentissage pour toutes les technologies du Web telles que CSS, HTML, JavaScript et tout ce qui fait le Web tel qu'il est :c'est à dire ouvert et puissant. -<p><a href="/fr/docs/MDN_a_dix_ans/Histoire_MDN">En savoir plus</a></p> +[En savoir plus](/fr/docs/MDN_a_dix_ans/Histoire_MDN) +## Contribuer à MDN -<h2 id="Contribuer_à_MDN">Contribuer à MDN</h2> +Depuis 10 ans, la communauté MDN documente le Web. Qu'il s'agisse de corriger quelques coquilles ou d'écrire des articles entiers pour documenter une nouvelle API, chacun a quelque chose à offrir et aucune contribution n'est trop petite ou trop grande. Nous avons plus de 90 000 pages de contenu qui ont été écrites ou traduites par des membres de notre communauté. Vous pouvez en faire partie. -<p>Depuis 10 ans, la communauté MDN documente le Web. Qu'il s'agisse de corriger quelques coquilles ou d'écrire des articles entiers pour documenter une nouvelle API, chacun a quelque chose à offrir et aucune contribution n'est trop petite ou trop grande. Nous avons plus de 90 000 pages de contenu qui ont été écrites ou traduites par des membres de notre communauté. Vous pouvez en faire partie.</p> +[En savoir plus](/fr/docs/MDN_a_dix_ans/Contribuer_à_MDN) -<p><a href="/fr/docs/MDN_a_dix_ans/Contribuer_à_MDN">En savoir plus</a></p> +> Quand je souhaite comprendre « pourquoi » plutôt que « comment », j'utilise MDN. -<blockquote>Quand je souhaite comprendre « pourquoi » plutôt que « comment », j'utilise MDN.</blockquote> -— <a href="https://twitter.com/codepo8/status/621009648875868160">Christian Heilmann</a> +— [Christian Heilmann](https://twitter.com/codepo8/status/621009648875868160) -<h2 id="Subnav">Subnav</h2> +## Subnav -<ol> - <li><a href="/fr/docs/MDN_a_dix_ans/">MDN a 10 ans</a></li> - <li><a href="/fr/docs/MDN_a_dix_ans/Histoire_MDN">L'histoire de MDN</a></li> - <li><a href="/en-US/docs/MDN_at_ten/Contributing_to_MDN">Contribuer à MDN</a></li> -</ol> +1. [MDN a 10 ans](/fr/docs/MDN_a_dix_ans/) +2. [L'histoire de MDN](/fr/docs/MDN_a_dix_ans/Histoire_MDN) +3. [Contribuer à MDN](/en-US/docs/MDN_at_ten/Contributing_to_MDN) diff --git a/files/fr/mdn/contribute/documentation_priorities/index.md b/files/fr/mdn/contribute/documentation_priorities/index.md index 9f56f5fcaa..1dee08a75c 100644 --- a/files/fr/mdn/contribute/documentation_priorities/index.md +++ b/files/fr/mdn/contribute/documentation_priorities/index.md @@ -9,214 +9,179 @@ tags: - Priorities translation_of: MDN/Contribute/Documentation_priorities --- -<p>{{MDNSidebar}}</p> - -<p>Ce document définit les différents niveaux de priorité sur MDN, et indique quels sujets de documentation existent dans chaque niveau - nous les catégorisons entre <strong>Niveau 1</strong> et <strong>Niveau 2</strong>.</p> - -<p>L'objectif de ce document est double :</p> - -<ul> - <li>Aider à appliquer des mesures de priorité aux bogues de contenu pendant notre processus de triage, ce qui aide les contributeurs à prendre une décision sur les bogues sur lesquels travailler en découvrant ceux qui sont les plus importants pour le moment.</li> - <li>Aider les contributeurs qui souhaitent travailler sur un sujet spécifique (plutôt que sur un bogue particulier) à décider du sujet où il serait le plus utile de consacrer du temps (par exemple, pour les personnes qui aiment exécuter des scripts de nettoyage automatique sur MDN).</li> -</ul> - -<p>L'importance relative de ces documents a été déterminée uniquement en fonction du nombre de pages vues. Il y a beaucoup de mesures que nous aurions pu utiliser, mais le nombre de pages vues est objectif et reste un bon indicateur. Les technologies web les plus importantes sont consultées plus souvent et, par conséquent, la résolution des problèmes liés à ces documents semble la plus importante.</p> - -<p>Gardez également à l'esprit que ces niveaux sont constitués d'arborescences de documents isolés (c'est-à-dire la page liée, plus tous les documents de la hiérarchie qui lui sont inférieurs). Il arrive qu'un document de niveau 1 soit lié à un document de niveau 2, ou vice versa, et c'est normal.</p> - -<p>Les chiffres entre parenthèses après chaque arbre de documents représentent le nombre de documents sous cet arbre pour l'anglais. Ces chiffres sont susceptibles de changer au fil du temps, et il faudra peut-être les revoir avant longtemps.</p> - -<h2 id="tier_1">Niveau 1</h2> - -<p>Le contenu de niveau 1 est le plus important sur MDN : il compte le plus grand nombre de lectrices et lecteurs. Il est censé couvrir les technologies les plus importantes pour la plateforme web.</p> - -<ul> - <li><a href="/fr/docs/Web/Accessibility">Accessibilité</a> (104)</li> - <li><a href="/fr/docs/Web/CSS">CSS : Feuilles de style en cascade</a> (933)</li> - <li><a href="/fr/docs/Web/Events">Événements</a> (4)</li> - <li><a href="/fr/docs/Web/HTML">HTML : HyperText Markup Language</a> (239)</li> - <li><a href="/fr/docs/Web/HTTP">HTTP</a> (292)</li> - <li><a href="/fr/docs/Web/JavaScript">JavaScript</a> (921)</li> - <li><a href="/fr/docs/Learn">Apprendre le développement web</a> (355)</li> - <li><a href="/fr/docs/Web/Media">Médias sur le Web</a> (17)</li> - <li><a href="/fr/docs/Web/Performance">Performance</a> (16)</li> - <li><a href="/fr/docs/Web/Privacy">Vie privée</a> (1)</li> - <li><a href="/fr/docs/Web/Progressive_web_apps">Applications web progressives</a> (16)</li> - <li><a href="/fr/docs/Web/Security">Sécurité</a> (27)</li> - <li><a href="/fr/docs/Web/API">Référence des API Web</a> : Les interfaces des groupes suivants sont de niveau 1 (voir la section <a href="#tier_1_webapis">API Web de niveau 1</a> ci-dessous pour un éventail plus large de ce que cela inclut (1189) : - <ul> - <li>Canvas API (112)</li> - <li>Clipboard API (13)</li> - <li>DOM (439)</li> - <li>DOM Events (22)</li> - <li>Fetch API (47)</li> - <li>File API (48)</li> - <li>HTML DOM (371)</li> - <li>URL API (43)</li> - <li>Web Storage API (8)</li> - <li>WebSockets API (28)</li> - <li>XMLHttpRequest (58)</li> - </ul> - </li> - <li><a href="/fr/docs/Web/Manifest">Manifestes des applications web</a> (19)</li> - <li><a href="/fr/docs/WebAssembly">WebAssembly</a> (12)</li> - <li><a href="/fr/docs/Web/Web_Components">Composants web</a> (5)</li> -</ul> - -<p><strong>Total des pages pour le niveau 1 : 4150</strong></p> - -<h2 id="tier_2">Niveau 2</h2> - -<p>Le contenu de niveau 2 est moins couramment utilisé, mais néanmoins utile.</p> - -<ul> - <li><a href="/fr/docs/Web/Houdini">CSS Houdini</a> (1)</li> - <li><a href="/fr/docs/Games">Développement de jeux vidéo</a> (73)</li> - <li><a href="/fr/docs/Web/Guide">Guides pour les développeurs du Web</a> (56)</li> - <li><a href="/fr/docs/Web/MathML">MathML</a> (38)</li> - <li><a href="/fr/docs/MDN">Le projet MDN</a> (82). C'est important, mais les corrections seront principalement traitées par l'équipe principale du MDN).</li> - <li><a href="/fr/docs/Web/SVG">SVG</a> (382)</li> - <li><a href="/fr/docs/Glossary">Le glossaire</a> (534)</li> - <li><a href="/fr/docs/Web/API">Référence des API Web</a> pour celles qui ne figurent pas parmi celles de niveau 1. (4701)</li> - <li><a href="/fr/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a> (635). Pas vraiment un sujet en lien direct avec la plateforme web, mais quand même important.</li> -</ul> - -<p><strong>Total des pages pour le niveau 2 : 6502</strong></p> - -<h2 id="other_content">Autres contenus</h2> - -<p>Il existe d'autres contenus sur MDN qui ne concernent pas la plateforme web (comme les contenus archivés, les documents spécifiques à Firefox sur les outils de développement ou les détails internes pour ce navigateur). Ce contenu a été complètement déprogrammé et, dans la plupart des cas, nous essayons de lui trouver une nouvelle place ou de le supprimer s'il n'est plus utile. Nous ne recommandons pas à notre communauté de consacrer du temps à des domaines qui ne sont pas explicitement répertoriés sur cette page.</p> - -<h2 id="tier_1_webapis">API Web niveau 1</h2> - -<p>Les documents de référence pour les interfaces des API qui suivent (et leurs pages enfant) sont actuellement considérés comme étant de niveau 1. Pour plus d'informations sur la justification de ces regroupements et priorités, voir le travail effectué dans <a href="https://github.com/mdn/sprints/issues/3327">https://github.com/mdn/sprints/issues/3327</a>.</p> - -<h3 id="canvas_api">Canvas API (112)</h3> - -<ul> - <li><code><a href="/fr/docs/Web/API/CanvasGradient">CanvasGradient</a></code> (2)</li> - <li><code><a href="/fr/docs/Web/API/CanvasImageSource">CanvasImageSource</a></code> (1)</li> - <li><code><a href="/fr/docs/Web/API/CanvasPattern">CanvasPattern</a></code> (2)</li> - <li><code><a href="/fr/docs/Web/API/CanvasRenderingContext2D">CanvasRenderingContext2D</a></code> (71)</li> - <li><code><a href="/fr/docs/Web/API/ImageBitmap">ImageBitmap</a></code> (4)</li> - <li><code><a href="/fr/docs/Web/API/ImageBitmapRenderingContext">ImageBitmapRenderingContext</a></code> (2)</li> - <li><code><a href="/fr/docs/Web/API/ImageData">ImageData</a></code> (5)</li> - <li><code><a href="/fr/docs/Web/API/OffscreenCanvas">OffscreenCanvas</a></code> (8)</li> - <li><code><a href="/fr/docs/Web/API/Path2D">Path2D</a></code> (3)</li> - <li><code><a href="/fr/docs/Web/API/RenderingContext">RenderingContext</a></code> (1)</li> - <li><code><a href="/fr/docs/Web/API/TextMetrics">TextMetrics</a></code> (13)</li> -</ul> - -<h3 id="clipboard_api">Clipboard API (13)</h3> - -<ul> - <li><code><a href="/fr/docs/Web/API/Clipboard">Clipboard</a></code> (5)</li> - <li><code><a href="/fr/docs/Web/API/ClipboardEvent">ClipboardEvent</a></code> (3)</li> - <li><code><a href="/fr/docs/Web/API/ClipboardItem">ClipboardItem</a></code> (5)</li> -</ul> - -<h3 id="dom">DOM (439)</h3> - -<div class="note"> - <p><strong>Note :</strong> « DOM » n'est qu'un groupe partiel - nous n'avons inclus que les documents relatifs à l'interface ayant le plus grand nombre de pages vues, afin de maintenir la taille du niveau 1 à un nombre gérable. Les autres interfaces DOM qui ne figurent pas dans cette liste sont dans le niveau 2.</p> -</div> - -<ul> - <li><code><a href="/fr/docs/Web/API/AbortController">AbortController</a></code> (4)</li> - <li><code><a href="/fr/docs/Web/API/ChildNode">ChildNode</a></code> (5)</li> - <li><code><a href="/fr/docs/Web/API/CustomEvent">CustomEvent</a></code> (4)</li> - <li><code><a href="/fr/docs/Web/API/Document">Document</a></code> (164)</li> - <li><code><a href="/fr/docs/Web/API/DOMParser">DOMParser</a></code> (2)</li> - <li><code><a href="/fr/docs/Web/API/DOMString">DOMString</a></code> (2)</li> - <li><code><a href="/fr/docs/Web/API/Element">Element</a></code> (176)</li> - <li><code><a href="/fr/docs/Web/API/Event">Event</a></code> (24)</li> - <li><code><a href="/fr/docs/Web/API/EventTarget">EventTarget</a></code> (5)</li> - <li><code><a href="/fr/docs/Web/API/HTMLCollection">HTMLCollection</a></code> (4)</li> - <li><code><a href="/fr/docs/Web/API/MutationObserver">MutationObserver</a></code> (5)</li> - <li><code><a href="/fr/docs/Web/API/Node">Node</a></code> (36)</li> - <li><code><a href="/fr/docs/Web/API/NodeList">NodeList</a></code> (7)</li> - <li><code><a href="/fr/docs/Web/API/USVString">USVString</a></code> (1)</li> -</ul> - -<h3 id="dom_events">DOM Events (22)</h3> - -<div class="note notecard"> - <p><strong>Note :</strong> « DOM Events » n'est qu'un groupe partiel - nous n'avons inclus que les documents relatifs à l'interface ayant le plus grand nombre de pages vues, afin de maintenir la taille du niveau 1 à un nombre raisonnable. Les autres interfaces DOM Events qui ne figurent pas dans cette liste se trouvent au niveau 2.</p> -</div> - -<ul> - <li><code><a href="/fr/docs/Web/API/EventListener">EventListener</a></code> (2)</li> - <li><code><a href="/fr/docs/Web/API/KeyboardEvent">KeyboardEvent</a></code> (20)</li> -</ul> - -<h3 id="fetch_api">Fetch API (47)</h3> - -<ul> - <li><code><a href="/fr/docs/Web/API/Body">Body</a></code> (8)</li> - <li><code><a href="/fr/docs/Web/API/Headers">Headers</a></code> (11)</li> - <li><code><a href="/fr/docs/Web/API/Request">Request</a></code> (15)</li> - <li><code><a href="/fr/docs/Web/API/Response">Response</a></code> (13)</li> -</ul> - -<h3 id="file_api">File API (48)</h3> - -<ul> - <li><code><a href="/fr/docs/Web/API/Blob">Blob</a></code> (8)</li> - <li><code><a href="/fr/docs/Web/API/File">File</a></code> (15)</li> - <li><code><a href="/fr/docs/Web/API/FileList">FileList</a></code> (1)</li> - <li><code><a href="/fr/docs/Web/API/FileReader">FileReader</a></code> (19)</li> - <li><code><a href="/fr/docs/Web/API/FileReaderSync">FileReaderSync</a></code> (5)</li> -</ul> - -<h3 id="html_dom">HTML DOM (371)</h3> - -<div class="note notecard"> - <p><strong>Note :</strong> « HTML DOM » n'est qu'un groupe partiel - nous n'avons inclus que les documents de l'interface ayant le plus grand nombre de pages vues, afin de maintenir la taille du niveau 1 à un nombre gérable. Les autres interfaces HTML DOM qui ne figurent pas dans cette liste sont dans le niveau 2.</p> -</div> - -<ul> - <li><code><a href="/fr/docs/Web/API/History">History</a></code> (9)</li> - <li><code><a href="/fr/docs/Web/API/HTMLAudioElement">HTMLAudioElement</a></code> (4)</li> - <li><code><a href="/fr/docs/Web/API/HTMLCanvasElement">HTMLCanvasElement</a></code> (14)</li> - <li><code><a href="/fr/docs/Web/API/HTMLElement">HTMLElement</a></code> (45)</li> - <li><code><a href="/fr/docs/Web/API/HTMLFormElement">HTMLFormElement</a></code> (17)</li> - <li><code><a href="/fr/docs/Web/API/HTMLInputElement">HTMLInputElement</a></code> (17)</li> - <li><code><a href="/fr/docs/Web/API/HTMLTextAreaElement">HTMLTextAreaElement</a></code> (2)</li> - <li><code><a href="/fr/docs/Web/API/Location">Location</a></code> (17)</li> - <li><code><a href="/fr/docs/Web/API/Navigator">Navigator</a></code> (45)</li> - <li><code><a href="/fr/docs/Web/API/NavigatorLanguage">NavigatorLanguage</a></code> (3)</li> - <li><code><a href="/fr/docs/Web/API/NavigatorOnLine">NavigatorOnLine</a></code> (3)</li> - <li><code><a href="/fr/docs/Web/API/Window">Window</a></code> (182)</li> - <li><code><a href="/fr/docs/Web/API/WindowEventHandlers">WindowEventHandlers</a></code> (13)</li> -</ul> - -<h3 id="url_api">URL API (43)</h3> - -<ul> - <li><code><a href="/fr/docs/Web/API/URL">URL</a></code> (18)</li> - <li><code><a href="/fr/docs/Web/API/URLSearchParams">URLSearchParams</a></code> (14)</li> - <li><code><a href="/fr/docs/Web/API/URLUtilsReadOnly">URLUtilsReadOnly</a></code> (11)</li> -</ul> - -<h3 id="web_storage_api">Web Storage API (8)</h3> - -<ul> - <li><code><a href="/fr/docs/Web/API/Storage">Storage</a></code> (7)</li> - <li><code><a href="/fr/docs/Web/API/StorageEvent">StorageEvent</a></code> (1)</li> -</ul> - -<h3 id="websockets_api">WebSockets API (28)</h3> - -<ul> - <li><code><a href="/fr/docs/Web/API/CloseEvent">CloseEvent</a></code> (3)</li> - <li><code><a href="/fr/docs/Web/API/MessageEvent">MessageEvent</a></code> (7)</li> - <li><code><a href="/fr/docs/Web/API/WebSocket">WebSocket</a></code> (18)</li> -</ul> - -<h3 id="xmlhttprequest">XMLHttpRequest (58)</h3> - -<ul> - <li><code><a href="/fr/docs/Web/API/FormData">FormData</a></code> (12)</li> - <li><code><a href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> (40)</li> - <li><code><a href="/fr/docs/Web/API/XMLHttpRequestEventTarget">XMLHttpRequestEventTarget</a></code> (6)</li> -</ul> +{{MDNSidebar}} + +Ce document définit les différents niveaux de priorité sur MDN, et indique quels sujets de documentation existent dans chaque niveau - nous les catégorisons entre **Niveau 1** et **Niveau 2**. + +L'objectif de ce document est double : + +- Aider à appliquer des mesures de priorité aux bogues de contenu pendant notre processus de triage, ce qui aide les contributeurs à prendre une décision sur les bogues sur lesquels travailler en découvrant ceux qui sont les plus importants pour le moment. +- Aider les contributeurs qui souhaitent travailler sur un sujet spécifique (plutôt que sur un bogue particulier) à décider du sujet où il serait le plus utile de consacrer du temps (par exemple, pour les personnes qui aiment exécuter des scripts de nettoyage automatique sur MDN). + +L'importance relative de ces documents a été déterminée uniquement en fonction du nombre de pages vues. Il y a beaucoup de mesures que nous aurions pu utiliser, mais le nombre de pages vues est objectif et reste un bon indicateur. Les technologies web les plus importantes sont consultées plus souvent et, par conséquent, la résolution des problèmes liés à ces documents semble la plus importante. + +Gardez également à l'esprit que ces niveaux sont constitués d'arborescences de documents isolés (c'est-à-dire la page liée, plus tous les documents de la hiérarchie qui lui sont inférieurs). Il arrive qu'un document de niveau 1 soit lié à un document de niveau 2, ou vice versa, et c'est normal. + +Les chiffres entre parenthèses après chaque arbre de documents représentent le nombre de documents sous cet arbre pour l'anglais. Ces chiffres sont susceptibles de changer au fil du temps, et il faudra peut-être les revoir avant longtemps. + +## Niveau 1 + +Le contenu de niveau 1 est le plus important sur MDN : il compte le plus grand nombre de lectrices et lecteurs. Il est censé couvrir les technologies les plus importantes pour la plateforme web. + +- [Accessibilité](/fr/docs/Web/Accessibility) (104) +- [CSS : Feuilles de style en cascade](/fr/docs/Web/CSS) (933) +- [Événements](/fr/docs/Web/Events) (4) +- [HTML : HyperText Markup Language](/fr/docs/Web/HTML) (239) +- [HTTP](/fr/docs/Web/HTTP) (292) +- [JavaScript](/fr/docs/Web/JavaScript) (921) +- [Apprendre le développement web](/fr/docs/Learn) (355) +- [Médias sur le Web](/fr/docs/Web/Media) (17) +- [Performance](/fr/docs/Web/Performance) (16) +- [Vie privée](/fr/docs/Web/Privacy) (1) +- [Applications web progressives](/fr/docs/Web/Progressive_web_apps) (16) +- [Sécurité](/fr/docs/Web/Security) (27) +- [Référence des API Web](/fr/docs/Web/API) : Les interfaces des groupes suivants sont de niveau 1 (voir la section [API Web de niveau 1](#tier_1_webapis) ci-dessous pour un éventail plus large de ce que cela inclut (1189) : + + - Canvas API (112) + - Clipboard API (13) + - DOM (439) + - DOM Events (22) + - Fetch API (47) + - File API (48) + - HTML DOM (371) + - URL API (43) + - Web Storage API (8) + - WebSockets API (28) + - XMLHttpRequest (58) + +- [Manifestes des applications web](/fr/docs/Web/Manifest) (19) +- [WebAssembly](/fr/docs/WebAssembly) (12) +- [Composants web](/fr/docs/Web/Web_Components) (5) + +**Total des pages pour le niveau 1 : 4150** + +## Niveau 2 + +Le contenu de niveau 2 est moins couramment utilisé, mais néanmoins utile. + +- [CSS Houdini](/fr/docs/Web/Houdini) (1) +- [Développement de jeux vidéo](/fr/docs/Games) (73) +- [Guides pour les développeurs du Web](/fr/docs/Web/Guide) (56) +- [MathML](/fr/docs/Web/MathML) (38) +- [Le projet MDN](/fr/docs/MDN) (82). C'est important, mais les corrections seront principalement traitées par l'équipe principale du MDN). +- [SVG](/fr/docs/Web/SVG) (382) +- [Le glossaire](/fr/docs/Glossary) (534) +- [Référence des API Web](/fr/docs/Web/API) pour celles qui ne figurent pas parmi celles de niveau 1. (4701) +- [WebExtensions](/fr/docs/Mozilla/Add-ons/WebExtensions) (635). Pas vraiment un sujet en lien direct avec la plateforme web, mais quand même important. + +**Total des pages pour le niveau 2 : 6502** + +## Autres contenus + +Il existe d'autres contenus sur MDN qui ne concernent pas la plateforme web (comme les contenus archivés, les documents spécifiques à Firefox sur les outils de développement ou les détails internes pour ce navigateur). Ce contenu a été complètement déprogrammé et, dans la plupart des cas, nous essayons de lui trouver une nouvelle place ou de le supprimer s'il n'est plus utile. Nous ne recommandons pas à notre communauté de consacrer du temps à des domaines qui ne sont pas explicitement répertoriés sur cette page. + +## API Web niveau 1 + +Les documents de référence pour les interfaces des API qui suivent (et leurs pages enfant) sont actuellement considérés comme étant de niveau 1. Pour plus d'informations sur la justification de ces regroupements et priorités, voir le travail effectué dans <https://github.com/mdn/sprints/issues/3327>. + +### Canvas API (112) + +- [`CanvasGradient`](/fr/docs/Web/API/CanvasGradient) (2) +- [`CanvasImageSource`](/fr/docs/Web/API/CanvasImageSource) (1) +- [`CanvasPattern`](/fr/docs/Web/API/CanvasPattern) (2) +- [`CanvasRenderingContext2D`](/fr/docs/Web/API/CanvasRenderingContext2D) (71) +- [`ImageBitmap`](/fr/docs/Web/API/ImageBitmap) (4) +- [`ImageBitmapRenderingContext`](/fr/docs/Web/API/ImageBitmapRenderingContext) (2) +- [`ImageData`](/fr/docs/Web/API/ImageData) (5) +- [`OffscreenCanvas`](/fr/docs/Web/API/OffscreenCanvas) (8) +- [`Path2D`](/fr/docs/Web/API/Path2D) (3) +- [`RenderingContext`](/fr/docs/Web/API/RenderingContext) (1) +- [`TextMetrics`](/fr/docs/Web/API/TextMetrics) (13) + +### Clipboard API (13) + +- [`Clipboard`](/fr/docs/Web/API/Clipboard) (5) +- [`ClipboardEvent`](/fr/docs/Web/API/ClipboardEvent) (3) +- [`ClipboardItem`](/fr/docs/Web/API/ClipboardItem) (5) + +### DOM (439) + +> **Note :** « DOM » n'est qu'un groupe partiel - nous n'avons inclus que les documents relatifs à l'interface ayant le plus grand nombre de pages vues, afin de maintenir la taille du niveau 1 à un nombre gérable. Les autres interfaces DOM qui ne figurent pas dans cette liste sont dans le niveau 2. + +- [`AbortController`](/fr/docs/Web/API/AbortController) (4) +- [`ChildNode`](/fr/docs/Web/API/ChildNode) (5) +- [`CustomEvent`](/fr/docs/Web/API/CustomEvent) (4) +- [`Document`](/fr/docs/Web/API/Document) (164) +- [`DOMParser`](/fr/docs/Web/API/DOMParser) (2) +- [`DOMString`](/fr/docs/Web/API/DOMString) (2) +- [`Element`](/fr/docs/Web/API/Element) (176) +- [`Event`](/fr/docs/Web/API/Event) (24) +- [`EventTarget`](/fr/docs/Web/API/EventTarget) (5) +- [`HTMLCollection`](/fr/docs/Web/API/HTMLCollection) (4) +- [`MutationObserver`](/fr/docs/Web/API/MutationObserver) (5) +- [`Node`](/fr/docs/Web/API/Node) (36) +- [`NodeList`](/fr/docs/Web/API/NodeList) (7) +- [`USVString`](/fr/docs/Web/API/USVString) (1) + +### DOM Events (22) + +> **Note :** « DOM Events » n'est qu'un groupe partiel - nous n'avons inclus que les documents relatifs à l'interface ayant le plus grand nombre de pages vues, afin de maintenir la taille du niveau 1 à un nombre raisonnable. Les autres interfaces DOM Events qui ne figurent pas dans cette liste se trouvent au niveau 2. + +- [`EventListener`](/fr/docs/Web/API/EventListener) (2) +- [`KeyboardEvent`](/fr/docs/Web/API/KeyboardEvent) (20) + +### Fetch API (47) + +- [`Body`](/fr/docs/Web/API/Body) (8) +- [`Headers`](/fr/docs/Web/API/Headers) (11) +- [`Request`](/fr/docs/Web/API/Request) (15) +- [`Response`](/fr/docs/Web/API/Response) (13) + +### File API (48) + +- [`Blob`](/fr/docs/Web/API/Blob) (8) +- [`File`](/fr/docs/Web/API/File) (15) +- [`FileList`](/fr/docs/Web/API/FileList) (1) +- [`FileReader`](/fr/docs/Web/API/FileReader) (19) +- [`FileReaderSync`](/fr/docs/Web/API/FileReaderSync) (5) + +### HTML DOM (371) + +> **Note :** « HTML DOM » n'est qu'un groupe partiel - nous n'avons inclus que les documents de l'interface ayant le plus grand nombre de pages vues, afin de maintenir la taille du niveau 1 à un nombre gérable. Les autres interfaces HTML DOM qui ne figurent pas dans cette liste sont dans le niveau 2. + +- [`History`](/fr/docs/Web/API/History) (9) +- [`HTMLAudioElement`](/fr/docs/Web/API/HTMLAudioElement) (4) +- [`HTMLCanvasElement`](/fr/docs/Web/API/HTMLCanvasElement) (14) +- [`HTMLElement`](/fr/docs/Web/API/HTMLElement) (45) +- [`HTMLFormElement`](/fr/docs/Web/API/HTMLFormElement) (17) +- [`HTMLInputElement`](/fr/docs/Web/API/HTMLInputElement) (17) +- [`HTMLTextAreaElement`](/fr/docs/Web/API/HTMLTextAreaElement) (2) +- [`Location`](/fr/docs/Web/API/Location) (17) +- [`Navigator`](/fr/docs/Web/API/Navigator) (45) +- [`NavigatorLanguage`](/fr/docs/Web/API/NavigatorLanguage) (3) +- [`NavigatorOnLine`](/fr/docs/Web/API/NavigatorOnLine) (3) +- [`Window`](/fr/docs/Web/API/Window) (182) +- [`WindowEventHandlers`](/fr/docs/Web/API/WindowEventHandlers) (13) + +### URL API (43) + +- [`URL`](/fr/docs/Web/API/URL) (18) +- [`URLSearchParams`](/fr/docs/Web/API/URLSearchParams) (14) +- [`URLUtilsReadOnly`](/fr/docs/Web/API/URLUtilsReadOnly) (11) + +### Web Storage API (8) + +- [`Storage`](/fr/docs/Web/API/Storage) (7) +- [`StorageEvent`](/fr/docs/Web/API/StorageEvent) (1) + +### WebSockets API (28) + +- [`CloseEvent`](/fr/docs/Web/API/CloseEvent) (3) +- [`MessageEvent`](/fr/docs/Web/API/MessageEvent) (7) +- [`WebSocket`](/fr/docs/Web/API/WebSocket) (18) + +### XMLHttpRequest (58) + +- [`FormData`](/fr/docs/Web/API/FormData) (12) +- [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest) (40) +- [`XMLHttpRequestEventTarget`](/fr/docs/Web/API/XMLHttpRequestEventTarget) (6) diff --git a/files/fr/mdn/contribute/feedback/index.md b/files/fr/mdn/contribute/feedback/index.md index 29c900a3c5..014ab9f8e7 100644 --- a/files/fr/mdn/contribute/feedback/index.md +++ b/files/fr/mdn/contribute/feedback/index.md @@ -8,60 +8,54 @@ tags: - MDN Meta translation_of: MDN/Contribute/Feedback --- -<div>{{MDNSidebar}}</div> +{{MDNSidebar}} -<p>Bienvenue sur MDN Web Docs ! Si vous avez des suggestions ou avez des problèmes avec MDN, vous êtes au bon endroit. Nous vous remercions par avance de l'intérêt que vous nous portez.</p> +Bienvenue sur MDN Web Docs ! Si vous avez des suggestions ou avez des problèmes avec MDN, vous êtes au bon endroit. Nous vous remercions par avance de l'intérêt que vous nous portez. -<p>Il y existe plusieurs façons pour porter votre voix, cet article vous les explique.</p> +Il y existe plusieurs façons pour porter votre voix, cet article vous les explique. -<h2 id="update_the_documentation">Mettre à jour la documentation</h2> +## Mettre à jour la documentation -<p>Tout d'abord, si vous avez constaté un problème dans la documentation, sentez vous libre de le corriger vous-même. Commencez par lire les <a href="https://github.com/mdn/content/#making-contributions">étapes spécifiques pour se préparer à faire des contributions</a>.</p> +Tout d'abord, si vous avez constaté un problème dans la documentation, sentez vous libre de le corriger vous-même. Commencez par lire les [étapes spécifiques pour se préparer à faire des contributions](https://github.com/mdn/content/#making-contributions). -<p>Si vous souhaitez savoir comment contribuer aux traductions en français, vous pouvez également lire <a href="https://tech.mozfr.org/post/2021/03/16/MDN-sur-GitHub-comment-contribuer">ce billet</a>.</p> +Si vous souhaitez savoir comment contribuer aux traductions en français, vous pouvez également lire [ce billet](https://tech.mozfr.org/post/2021/03/16/MDN-sur-GitHub-comment-contribuer). -<p>Les sources de la documentation ici sont <a href="https://github.com/mdn/translated-content/">stockées dans GitHub</a>, et gérées par une équipe de bénévoles et de salariés, alors ne soyez pas timide - votre grammaire n'a pas besoin d'être parfaite. Nous passerons en revue vos modifications et vous aiderons à corriger les erreurs éventuelles.</p> +Les sources de la documentation ici sont [stockées dans GitHub](https://github.com/mdn/translated-content/), et gérées par une équipe de bénévoles et de salariés, alors ne soyez pas timide - votre grammaire n'a pas besoin d'être parfaite. Nous passerons en revue vos modifications et vous aiderons à corriger les erreurs éventuelles. -<p>Pour plus d'information sur comment contribuer à la documentation :</p> +Pour plus d'information sur comment contribuer à la documentation : -<ul> - <li><a href="/fr/docs/MDN/Contribute/Getting_started">Débuter sur MDN</a></li> - <li><a href="/fr/docs/MDN/Contribute">Contribuer à MDN</a></li> -</ul> +- [Débuter sur MDN](/fr/docs/MDN/Contribute/Getting_started) +- [Contribuer à MDN](/fr/docs/MDN/Contribute) -<h2 id="rejoignez_la_conversation">Rejoignez la conversation</h2> +## Rejoignez la conversation -<p>Venez nous parler ! Il y a plusieurs méthodes pour rentrer en contact avec les personnes qui travaillent sur le contenu de MDN.</p> +Venez nous parler ! Il y a plusieurs méthodes pour rentrer en contact avec les personnes qui travaillent sur le contenu de MDN. -<h3 id="chat">Discussions en direct - chats</h3> +### Discussions en direct - chats -<p>Nous utilisons <a href="https://wiki.mozilla.org/Matrix">Matrix</a> pour converser sur MDN et son contenu. Vous pouvez participer à la conversation !</p> +Nous utilisons [Matrix](https://wiki.mozilla.org/Matrix) pour converser sur MDN et son contenu. Vous pouvez participer à la conversation ! -<dl> - <dt><a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs</a></dt> - <dd>Sur ce salon sont regroupés les membres de la communauté internationale de MDN, il est destiné aux discussions générales sur MDN : utilisation du site, lecture du contenu du site et contribution au contenu du site. Si vous avez des questions ou des commentaires sur le contenu des articles, sur les nouveaux articles que vous aimeriez voir ou créer, ou si vous voulez simplement parler avec l'équipe de rédaction, c'est l'endroit idéal. Il s'agit d'un canal anglophone, toutefois, des personnes francophones s'y trouvent généralement.</dd> - <dt><a href="https://chat.mozilla.org/#/room/#l10n-fr:mozilla.org">Localisation / traduction en français</a></dt> - <dd>Sur ce salon sont regroupés les membres de la communauté francophone de Mozilla (que ce soit pour Firefox, MDN ou d'autres sites ou outils).</dd> -</dl> +- [MDN Web Docs](https://chat.mozilla.org/#/room/#mdn:mozilla.org) + - : Sur ce salon sont regroupés les membres de la communauté internationale de MDN, il est destiné aux discussions générales sur MDN : utilisation du site, lecture du contenu du site et contribution au contenu du site. Si vous avez des questions ou des commentaires sur le contenu des articles, sur les nouveaux articles que vous aimeriez voir ou créer, ou si vous voulez simplement parler avec l'équipe de rédaction, c'est l'endroit idéal. Il s'agit d'un canal anglophone, toutefois, des personnes francophones s'y trouvent généralement. +- [Localisation / traduction en français](https://chat.mozilla.org/#/room/#l10n-fr:mozilla.org) + - : Sur ce salon sont regroupés les membres de la communauté francophone de Mozilla (que ce soit pour Firefox, MDN ou d'autres sites ou outils). -<h3 id="asynchronous_discussions">Discussions (asynchrones)</h3> +### Discussions (asynchrones) -<p>Les discussions plus importantes et qui ne nécessitent pas d'être connecté à tout moment se déroulent sur <a href="https://discourse.mozilla-community.org/c/mdn">le forum Discourse</a>. Vous pouvez envoyer des messages sur ce forum par e-mail en utilisant l'adresse <a href="mailto://mdn@mozilla-community.org">mdn@mozilla-community.org</a>. Si vous vous inscrivez sur le forum, vous pouvez également choisir de recevoir des notifications par e-mail à propos des discussions.</p> +Les discussions plus importantes et qui ne nécessitent pas d'être connecté à tout moment se déroulent sur [le forum Discourse](https://discourse.mozilla-community.org/c/mdn). Vous pouvez envoyer des messages sur ce forum par e-mail en utilisant l'adresse [mdn@mozilla-community.org](mailto://mdn@mozilla-community.org). Si vous vous inscrivez sur le forum, vous pouvez également choisir de recevoir des notifications par e-mail à propos des discussions. -<h2 id="report_an_issue">Signaler un problème</h2> +## Signaler un problème -<h3 id="documentation_issues">Problèmes dans la documentation</h3> +### Problèmes dans la documentation -<p>Si vous voyez un problème avec la documentation et que vous ne pouvez pas la corriger vous-même pour une quelconque raison, vous pouvez <a href="https://github.com/mdn/translated-content/issues/new" title="Signaler un problème de contenu de la documentation.">signaler un problème</a>. Vous pouvez utiliser ce formulaire pour tout problème avec la documentation, pas exemple :</p> +Si vous voyez un problème avec la documentation et que vous ne pouvez pas la corriger vous-même pour une quelconque raison, vous pouvez [signaler un problème](https://github.com/mdn/translated-content/issues/new "Signaler un problème de contenu de la documentation."). Vous pouvez utiliser ce formulaire pour tout problème avec la documentation, pas exemple : -<ul> - <li>une simple correction</li> - <li>une demande de contenu entièrement nouveau</li> - <li>signaler les contenus inappropriés (y compris le spam et les traductions mal placées)</li> -</ul> +- une simple correction +- une demande de contenu entièrement nouveau +- signaler les contenus inappropriés (y compris le spam et les traductions mal placées) -<p>Comme évoqué plus haut, n'hésitez pas à contribuer vous-même pour corriger ces erreurs.</p> +Comme évoqué plus haut, n'hésitez pas à contribuer vous-même pour corriger ces erreurs. -<h3 id="site_issues">Problèmes sur le site</h3> +### Problèmes sur le site -<p>Si vous rencontrez un problème avec le site ou avez de nouvelles idées pour celui-ci, vous pouvez <a href="hhttps://github.com/mdn/yari/issues">créer un ticket à l'équipe de développement de MDN</a>.</p> +Si vous rencontrez un problème avec le site ou avez de nouvelles idées pour celui-ci, vous pouvez [créer un ticket à l'équipe de développement de MDN](hhttps://github.com/mdn/yari/issues). diff --git a/files/fr/mdn/contribute/getting_started/index.md b/files/fr/mdn/contribute/getting_started/index.md index 563a36e2d7..9ecf83d0cc 100644 --- a/files/fr/mdn/contribute/getting_started/index.md +++ b/files/fr/mdn/contribute/getting_started/index.md @@ -10,50 +10,45 @@ tags: - New Contributors translation_of: MDN/Contribute/Getting_started --- -<div>{{MDNSidebar}}</div> +{{MDNSidebar}} -<p>Nous sommes une communauté ouverte de développeuses et développeurs qui créent des ressources pour un meilleur Web, quelle que soit la marque, le navigateur ou la plate-forme. Tout le monde peut contribuer et chaque personne qui le fait nous rend plus forts. Ensemble, nous pouvons continuer à stimuler l'innovation sur le Web pour servir le bien commun. Cela commence ici, avec vous.</p> +Nous sommes une communauté ouverte de développeuses et développeurs qui créent des ressources pour un meilleur Web, quelle que soit la marque, le navigateur ou la plate-forme. Tout le monde peut contribuer et chaque personne qui le fait nous rend plus forts. Ensemble, nous pouvons continuer à stimuler l'innovation sur le Web pour servir le bien commun. Cela commence ici, avec vous. -<p>Chaque partie de MDN (documents, démos et le site lui-même) est créée par une communauté ouverte de développeuses et développeurs. Rejoignez-nous !</p> +Chaque partie de MDN (documents, démos et le site lui-même) est créée par une communauté ouverte de développeuses et développeurs. Rejoignez-nous ! -<h2 id="4_simple_steps_to_MDN">4 étapes simples vers MDN</h2> +## 4 étapes simples vers MDN -<p>MDN est une ressource open source où <strong>toute personne</strong> peut ajouter et modifier des contenus. Il n'est pas nécessaire d'être un programmeur ou d'en savoir beaucoup sur les technologies. Il y a beaucoup de choses à faire, des plus simples (relecture et correction de fautes de frappe) aux plus complexes (rédaction de la documentation des API).</p> +MDN est une ressource open source où **toute personne** peut ajouter et modifier des contenus. Il n'est pas nécessaire d'être un programmeur ou d'en savoir beaucoup sur les technologies. Il y a beaucoup de choses à faire, des plus simples (relecture et correction de fautes de frappe) aux plus complexes (rédaction de la documentation des API). -<p>Contribuer est facile et sûr. Même si vous faites une erreur, elle est facilement corrigée. Même si vous ne savez pas exactement comment les choses doivent être présentées, ou si votre grammaire n'est pas très bonne, ne vous inquiétez pas ! Nous avons une équipe de personnes dont le travail consiste à s'assurer que le contenu de MDN est aussi bon que possible. Quelqu'un sera là pour s'assurer que votre travail est soigné et bien écrit. Partagez ce que vous savez et suivez vos points forts.</p> +Contribuer est facile et sûr. Même si vous faites une erreur, elle est facilement corrigée. Même si vous ne savez pas exactement comment les choses doivent être présentées, ou si votre grammaire n'est pas très bonne, ne vous inquiétez pas ! Nous avons une équipe de personnes dont le travail consiste à s'assurer que le contenu de MDN est aussi bon que possible. Quelqu'un sera là pour s'assurer que votre travail est soigné et bien écrit. Partagez ce que vous savez et suivez vos points forts. -<h3>Étape 1 : Créer un compte GitHub</h3> +### Étape 1 : Créer un compte GitHub -<p>Pour commencer vos contributions à MDN, vous devez <a href="https://github.com/mdn/content/#setup">créer un compte GitHub</a>.</p> +Pour commencer vos contributions à MDN, vous devez [créer un compte GitHub](https://github.com/mdn/content/#setup). +### Étape 2 : Choisir une tâche à accomplir -<h3 id="Step_2_Pick_a_task_to_complete">Étape 2 : Choisir une tâche à accomplir</h3> +Maintenant que vous êtes connecté, lisez les descriptions des différents types de tâches disponibles sur la [page relative aux contributions](/fr/docs/MDN/Contribute), et décidez de celle qui vous attire le plus. Vous pouvez choisir la tâche qui vous convient et commencer à contribuer. -<p>Maintenant que vous êtes connecté, lisez les descriptions des différents types de tâches disponibles sur la <a href="/fr/docs/MDN/Contribute">page relative aux contributions</a>, et décidez de celle qui vous attire le plus. Vous pouvez choisir la tâche qui vous convient et commencer à contribuer.</p> +### Étape 3 : Effectuer la tâche -<h3 id="Step_3_Do_the_task">Étape 3 : Effectuer la tâche</h3> +Une fois que vous avez décidé du type de tâche que vous voulez accomplir, trouvez une page spécifique, un exemple de code, etc. sur lequel travailler, et faites-le ! -<p>Une fois que vous avez décidé du type de tâche que vous voulez accomplir, trouvez une page spécifique, un exemple de code, etc. sur lequel travailler, et faites-le !</p> +### Étape 4 : Demander de l'aide -<h3 id="Step_4_Ask_for_help">Étape 4 : Demander de l'aide</h3> +Si vous n'êtes pas sûr de ce que vous devez faire à un moment donné, vous pouvez demander de l'aide. Il existe plusieurs options d'aide : -<p>Si vous n'êtes pas sûr de ce que vous devez faire à un moment donné, vous pouvez demander de l'aide. Il existe plusieurs options d'aide :</p> +- Si vous voulez nous parler de manière synchrone et poser des questions sur MDN lui-même, rejoignez la discussion sur le salon de discussion [Localisation / traduction en français](https://chat.mozilla.org/#/room/#l10n-fr:mozilla.org) sur [Matrix](https://wiki.mozilla.org/Matrix). +- Vous pouvez également nous envoyer un e-mail à <mdn-admins@mozilla.org>. +- Si vous apprenez le développement web et êtes bloqué sur un problème de codage, nous avons des [forums actifs](https://discourse.mozilla.org/c/mdn/learn/250) où vous pouvez poser des questions et obtenir de l'aide. -<ul> - <li>Si vous voulez nous parler de manière synchrone et poser des questions sur MDN lui-même, rejoignez la discussion sur le salon de discussion <a href="https://chat.mozilla.org/#/room/#l10n-fr:mozilla.org">Localisation / traduction en français</a> sur <a href="https://wiki.mozilla.org/Matrix">Matrix</a>.</li> - <li>Vous pouvez également nous envoyer un e-mail à <a href="mailto:mdn-admins@mozilla.org">mdn-admins@mozilla.org</a>.</li> - <li>Si vous apprenez le développement web et êtes bloqué sur un problème de codage, nous avons des <a href="https://discourse.mozilla.org/c/mdn/learn/250">forums actifs</a> où vous pouvez poser des questions et obtenir de l'aide.</li> -</ul> +Ne vous souciez pas de le faire parfaitement ; d'autres contributeurs MDN sont là pour aider à corriger les erreurs qui se glissent. -<p>Ne vous souciez pas de le faire parfaitement ; d'autres contributeurs MDN sont là pour aider à corriger les erreurs qui se glissent.</p> +## Guides complets et utiles pour les débutants -<h2 id="useful_complete_beginners_guides">Guides complets et utiles pour les débutants</h2> +Nous attendons des contributeurs à MDN qu'ils aient un certain nombre de connaissances préalables avant de commencer à travailler sur le contenu. Si les sujets suivants vous sont inconnus, nous vous conseillons de consulter les liens fournis pour vous aider à vous mettre à niveau : -<p>Nous attendons des contributeurs à MDN qu'ils aient un certain nombre de connaissances préalables avant de commencer à travailler sur le contenu. Si les sujets suivants vous sont inconnus, nous vous conseillons de consulter les liens fournis pour vous aider à vous mettre à niveau :</p> - -<ul> - <li>Technologies web : Si vous êtes novice en HTML, CSS, JavaScript, etc., consultez nos tutoriels pour <a href="/fr/docs/Learn">Apprendre le développement web</a>.</li> - <li>Open source : Si vous n'avez jamais contribué à un projet open source, lisez <a href="/fr/docs/MDN/Contribuer/Open_source_etiquette">L'étiquette de base des projets open source</a>.</li> - <li>Git et GitHub : Si vous n'êtes pas familier avec ces outils, <a href="/fr/docs/MDN/Contribute/GitHub_beginners">GitHub pour les grands débutants</a> vous permettra de démarrer. Vous pouvez également consulter <a href="https://tech.mozfr.org/post/2021/03/16/MDN-sur-GitHub-comment-contribuer">ce billet sur les contributions à MDN avec Git.</a></li> - <li>Les structures de dépôt de MDN : Si vous ne savez pas quels dépôts modifier pour apporter des modifications aux différentes parties du contenu de MDN, <a href="/fr/docs/MDN/Contribute/Where_is_everything">Où se trouve tout sur MDN ?</a> vous orientera vers les bons endroits.</li> -</ul> +- Technologies web : Si vous êtes novice en HTML, CSS, JavaScript, etc., consultez nos tutoriels pour [Apprendre le développement web](/fr/docs/Learn). +- Open source : Si vous n'avez jamais contribué à un projet open source, lisez [L'étiquette de base des projets open source](/fr/docs/MDN/Contribuer/Open_source_etiquette). +- Git et GitHub : Si vous n'êtes pas familier avec ces outils, [GitHub pour les grands débutants](/fr/docs/MDN/Contribute/GitHub_beginners) vous permettra de démarrer. Vous pouvez également consulter [ce billet sur les contributions à MDN avec Git.](https://tech.mozfr.org/post/2021/03/16/MDN-sur-GitHub-comment-contribuer) +- Les structures de dépôt de MDN : Si vous ne savez pas quels dépôts modifier pour apporter des modifications aux différentes parties du contenu de MDN, [Où se trouve tout sur MDN ?](/fr/docs/MDN/Contribute/Where_is_everything) vous orientera vers les bons endroits. diff --git a/files/fr/mdn/contribute/github_beginners/index.md b/files/fr/mdn/contribute/github_beginners/index.md index 96dff3ffa4..28f01d1226 100644 --- a/files/fr/mdn/contribute/github_beginners/index.md +++ b/files/fr/mdn/contribute/github_beginners/index.md @@ -9,430 +9,420 @@ tags: - Beginners translation_of: MDN/Contribute/GitHub_beginners --- -<p>{{MDNSidebar}}</p> +{{MDNSidebar}} -<p><a href="https://git-scm.com/">Git</a> et <a href="https://github.com/">GitHub</a> sont des outils difficiles à apprendre et à maîtriser, mais avec quelques commandes simples et quelques bons conseils, vous devriez pouvoir en faire assez pour commencer à contribuer à MDN sans trop de difficultés. Le but de cet article n'est pas de vous aider à maîtriser Git ou GitHub, mais de vous donner juste assez d'éléments pour être productif à un niveau de base et contribuer à MDN.</p> +[Git](https://git-scm.com/) et [GitHub](https://github.com/) sont des outils difficiles à apprendre et à maîtriser, mais avec quelques commandes simples et quelques bons conseils, vous devriez pouvoir en faire assez pour commencer à contribuer à MDN sans trop de difficultés. Le but de cet article n'est pas de vous aider à maîtriser Git ou GitHub, mais de vous donner juste assez d'éléments pour être productif à un niveau de base et contribuer à MDN. -<p>Si vous êtes déjà familiarisé avec les bases de Git/GitHub, vous n'apprendrez probablement rien de nouveau ici, mais cet article peut néanmoins vous être utile comme référence. Il existe également une <a href="/fr/docs/MDN/Contribute/GitHub_cheatsheet">antisèche GitHub</a> disponible, avec juste les commandes et aucune des longues explications.</p> +Si vous êtes déjà familiarisé avec les bases de Git/GitHub, vous n'apprendrez probablement rien de nouveau ici, mais cet article peut néanmoins vous être utile comme référence. Il existe également une [antisèche GitHub](/fr/docs/MDN/Contribute/GitHub_cheatsheet) disponible, avec juste les commandes et aucune des longues explications. -<h2 id="essential_concepts">Concepts essentiels</h2> +## Concepts essentiels -<p>Voici les concepts essentiels que vous devez connaître pour tirer le meilleur parti de Git et de GitHub.</p> +Voici les concepts essentiels que vous devez connaître pour tirer le meilleur parti de Git et de GitHub. -<ul> - <li>Git est un outil de <em>système de contrôle de version</em> - une classe d'outils essentielle dans tout flux de développement. Il permet à un groupe de développeurs de travailler sur la même base de code sans se gêner mutuellement, stocke la base de code en toute sécurité dans un emplacement distant, permet aux développeurs de revenir à des états antérieurs si nécessaire, et plus encore.</li> - <li>GitHub est une application web qui fournit des outils utiles au-dessus de Git pour travailler avec des bases de code stockées, ainsi qu'un espace serveur pour stocker les bases de code. Elle fait des choses similaires à d'autres applications dans cet espace, comme <a href="https://about.gitlab.com/">GitLab</a> ou <a href="https://bitbucket.org/">Bitbucket</a>.</li> - <li>Chaque base de code est stockée dans un conteneur appelé <em>repository</em>, ou <em>repo</em>. En français « dépôt ».</li> - <li>Apporter une modification à un référentiel implique au minimum : - <ul> - <li>Créer votre propre copie de ce dépôt (appelé un <em>fork</em> ou « bifurcation »).</li> - <li>Créer une version différente du code dans votre bifurcation du dépôt (appelée une <em>branch</em> ou « branche ») et ajouter vos modifications à cette version alternative.</li> - <li>Proposer d'effectuer cette modification dans la copie originale du dépôt via une <em>pull request</em> ou « demande de triage ». Vous apprendrez toutes ces étapes dans ce guide.</li> - </ul> - </li> -</ul> +- Git est un outil de _système de contrôle de version_ - une classe d'outils essentielle dans tout flux de développement. Il permet à un groupe de développeurs de travailler sur la même base de code sans se gêner mutuellement, stocke la base de code en toute sécurité dans un emplacement distant, permet aux développeurs de revenir à des états antérieurs si nécessaire, et plus encore. +- GitHub est une application web qui fournit des outils utiles au-dessus de Git pour travailler avec des bases de code stockées, ainsi qu'un espace serveur pour stocker les bases de code. Elle fait des choses similaires à d'autres applications dans cet espace, comme [GitLab](https://about.gitlab.com/) ou [Bitbucket](https://bitbucket.org/). +- Chaque base de code est stockée dans un conteneur appelé _repository_, ou _repo_. En français « dépôt ». +- Apporter une modification à un référentiel implique au minimum : -<h2 id="assumptions_made_by_this_article">Hypothèses formulées par cet article</h2> + - Créer votre propre copie de ce dépôt (appelé un _fork_ ou « bifurcation »). + - Créer une version différente du code dans votre bifurcation du dépôt (appelée une _branch_ ou « branche ») et ajouter vos modifications à cette version alternative. + - Proposer d'effectuer cette modification dans la copie originale du dépôt via une _pull request_ ou « demande de triage ». Vous apprendrez toutes ces étapes dans ce guide. -<p>Cet article part du principe que :</p> +## Hypothèses formulées par cet article -<ul> - <li>Vous êtes déjà à l'aise avec l'utilisation de la ligne de commande/du terminal. Si la ligne de commande vous est inconnue, lisez notre <a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">Cours accéléré sur les lignes de commande</a>.</li> - <li>Vous travaillez sur un système qui comprend les commandes de ligne de commande standard de style Unix. macOS/Linux disposent de cette fonctionnalité dès le départ ; <a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line#windows">Windows n'est pas tout à fait aussi simple</a> à cet égard, mais il existe des applications utiles qui émulent cette fonctionnalité sous Windows, comme Git Bash.</li> - <li>Vous utiliserez la ligne de commande pour interagir avec Git/GitHub. Il existe un certain nombre d'outils GUI pour Git et GitHub, mais ils ne fonctionneront pas avec ce guide.</li> -</ul> +Cet article part du principe que : -<h2 id="initial_setup">Configuration initiale</h2> +- Vous êtes déjà à l'aise avec l'utilisation de la ligne de commande/du terminal. Si la ligne de commande vous est inconnue, lisez notre [Cours accéléré sur les lignes de commande](/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line). +- Vous travaillez sur un système qui comprend les commandes de ligne de commande standard de style Unix. macOS/Linux disposent de cette fonctionnalité dès le départ ; [Windows n'est pas tout à fait aussi simple](/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line#windows) à cet égard, mais il existe des applications utiles qui émulent cette fonctionnalité sous Windows, comme Git Bash. +- Vous utiliserez la ligne de commande pour interagir avec Git/GitHub. Il existe un certain nombre d'outils GUI pour Git et GitHub, mais ils ne fonctionneront pas avec ce guide. -<p>Avant de commencer à travailler sur un dépôt particulier, suivez ces étapes :</p> +## Configuration initiale -<ol> - <li>Installez Git sur votre ordinateur. Allez sur la <a href="https://git-scm.com/downloads">page de téléchargement de Git</a>, téléchargez la dernière version pour votre ordinateur, et installez-la. Si vous êtes un utilisateur Windows, vous devriez également installer le paquet <a href="https://gitforwindows.org/">Git pour Windows</a>, qui inclut Gitbash.</li> - <li>Pendant que vous y êtes, installez les autres dépendances requises pour travailler localement avec MDN - <a href="https://nodejs.org/en/download/">Node.js</a> et <a href="https://classic.yarnpkg.com/en/docs/install">yarn</a>. - <ol> - <li>Installez Node.js en suivant le lien ci-dessus et en téléchargeant et installant la dernière version pour votre ordinateur.</li> - <li>Une fois que vous avez installé Node.js, installez yarn en exécutant <code>npm install --global yarn</code>.</li> - </ol> - </li> - <li>Créez un répertoire séparé quelque part sur votre ordinateur pour y stocker tous vos dépôts Git, qui soit facile à trouver et à atteindre en ligne de commande. Un répertoire appelé mdn-git à l'intérieur de votre répertoire home/user serait approprié.</li> - <li><a href="https://github.com/join">Créez un compte GitHub</a> si vous n'en avez pas déjà un. Vous aurez besoin d'un compte pour contribuer aux dépôts de MDN.</li> -</ol> +Avant de commencer à travailler sur un dépôt particulier, suivez ces étapes : -<h3 id="setting_up_ssh_authentication_on_github">Configuration de l'authentification SSH sur GitHub</h3> +1. Installez Git sur votre ordinateur. Allez sur la [page de téléchargement de Git](https://git-scm.com/downloads), téléchargez la dernière version pour votre ordinateur, et installez-la. Si vous êtes un utilisateur Windows, vous devriez également installer le paquet [Git pour Windows](https://gitforwindows.org/), qui inclut Gitbash. +2. Pendant que vous y êtes, installez les autres dépendances requises pour travailler localement avec MDN - [Node.js](https://nodejs.org/en/download/) et [yarn](https://classic.yarnpkg.com/en/docs/install). -<p>À ce stade, vous devez configurer une clé SSH sur votre compte GitHub. Il s'agit essentiellement d'un mécanisme de sécurité qui vous identifie auprès de GitHub et vous évite de devoir vous authentifier à chaque fois que vous utilisez les services GitHub.</p> + 1. Installez Node.js en suivant le lien ci-dessus et en téléchargeant et installant la dernière version pour votre ordinateur. + 2. Une fois que vous avez installé Node.js, installez yarn en exécutant `npm install --global yarn`. -<p>GitHub a créé un guide utile pour configurer cela - voir le point de départ sur <a href="https://docs.github.com/en/github/authenticating-to-github/connecting-to-github-with-ssh">Connexion à GitHub avec SSH</a>. Suivez chacune des étapes ici pour vous configurer avec SSH sur GitHub.</p> +3. Créez un répertoire séparé quelque part sur votre ordinateur pour y stocker tous vos dépôts Git, qui soit facile à trouver et à atteindre en ligne de commande. Un répertoire appelé mdn-git à l'intérieur de votre répertoire home/user serait approprié. +4. [Créez un compte GitHub](https://github.com/join) si vous n'en avez pas déjà un. Vous aurez besoin d'un compte pour contribuer aux dépôts de MDN. -<p>Si vous ne le faites pas, vous pourrez toujours contribuer au MDN, mais vous devrez saisir votre nom d'utilisateur et votre mot de passe à chaque fois que vous interagirez avec GitHub (par exemple, lorsque vous soumettez une demande de triage, comme indiqué ci-dessous).</p> +### Configuration de l'authentification SSH sur GitHub -<h2 id="setting_up_to_work_on_a_specific_repo">Se préparer à travailler sur un dépôt spécifique</h2> +À ce stade, vous devez configurer une clé SSH sur votre compte GitHub. Il s'agit essentiellement d'un mécanisme de sécurité qui vous identifie auprès de GitHub et vous évite de devoir vous authentifier à chaque fois que vous utilisez les services GitHub. + +GitHub a créé un guide utile pour configurer cela - voir le point de départ sur [Connexion à GitHub avec SSH](https://docs.github.com/en/github/authenticating-to-github/connecting-to-github-with-ssh). Suivez chacune des étapes ici pour vous configurer avec SSH sur GitHub. + +Si vous ne le faites pas, vous pourrez toujours contribuer au MDN, mais vous devrez saisir votre nom d'utilisateur et votre mot de passe à chaque fois que vous interagirez avec GitHub (par exemple, lorsque vous soumettez une demande de triage, comme indiqué ci-dessous). + +## Se préparer à travailler sur un dépôt spécifique <!-- start:Note spéciale pour l'équpe de traduction l10n-fr --> -<div class="note"> - <p><strong>Note :</strong> pour la traduction française :</p> - <p>Ce qui a été expliqué par Chris Mills ici est identique pour le dépôt de traduction français, vous devez remplacer <code>mdn/content</code> par <code>mdn/translated-content</code>, et <code><votre-nom-utilisateur>/content</code> par <code><votre-nom-utilisateur>/translated-content</code></p> - <p>Vous pouvez retrouver des explications de ceci sur notre article <a href="https://tech.mozfr.org/post/2021/03/16/MDN-sur-GitHub-comment-contribuer">Comment contribuer sur GitHub au MDN</a></p> -</div> + +> **Note :** pour la traduction française : +> +> Ce qui a été expliqué par Chris Mills ici est identique pour le dépôt de traduction français, vous devez remplacer `mdn/content` par `mdn/translated-content`, et `<votre-nom-utilisateur>/content` par `<votre-nom-utilisateur>/translated-content` +> +> Vous pouvez retrouver des explications de ceci sur notre article [Comment contribuer sur GitHub au MDN](https://tech.mozfr.org/post/2021/03/16/MDN-sur-GitHub-comment-contribuer) + <!-- end:Note spéciale pour l'équpe de traduction l10n-fr --> -<p>Il existe un certain nombre de dépôts différents que vous pouvez avoir à mettre à jour lorsque vous travaillez sur différentes tâches MDN (voir <a href="/fr/docs/MDN/Contribute/Where_is_everything">Où se trouve tout sur MDN ? Un guide de nos dépôts</a>), mais il y a un certain nombre d'étapes de configuration que vous devriez suivre sur chaque dépôt sur lequel vous travaillez, pour rendre les choses plus faciles et plus cohérentes.</p> +Il existe un certain nombre de dépôts différents que vous pouvez avoir à mettre à jour lorsque vous travaillez sur différentes tâches MDN (voir [Où se trouve tout sur MDN ? Un guide de nos dépôts](/fr/docs/MDN/Contribute/Where_is_everything)), mais il y a un certain nombre d'étapes de configuration que vous devriez suivre sur chaque dépôt sur lequel vous travaillez, pour rendre les choses plus faciles et plus cohérentes. + +### Bifurcation et clonage + +La _Bifurcation_ et le _Clonage_ sont deux termes que vous rencontrerez souvent dans le monde de Git : + +- « Forking » (ou Bifurquer) signifie créer votre propre copie d'un dépôt sur GitHub. +- « Cloning » (ou Cloner) consiste à faire une copie locale d'un dépôt sur lequel vous pouvez travailler (c'est-à-dire sur votre disque dur local). + +Il est possible de faire les deux choses séparément, mais en pratique, vous les ferez presque toujours ensemble lorsque vous contribuerez aux projets d'autres personnes. Vous devez d'abord créer une bifurcation de chaque dépôt sur lequel vous souhaitez travailler. Cela est nécessaire pour soumettre des demandes de modification à la version principale du dépôt (nous verrons plus tard comment créer une demande de modification). Pour des raisons de sécurité, vous ne pouvez pas soumettre des modifications directement à la version principale du dépôt. + +Bifurquons le dépôt <https://github.com/mdn/content> dès maintenant ; vous contribuerez certainement à ce dépôt à un moment donné. Suivez les étapes suivantes : + +1. Localisez le bouton « Fork » dans le coin supérieur droit de la page du dépôt de contenu, et appuyez dessus : + +  + +2. Une fenêtre de dialogue s'affiche, vous demandant où vous souhaitez transférer le dépôt. Sélectionnez votre compte GitHub personnel. + + Un message apparaîtra disant quelque chose comme « Forking mdn/content. It should only take a few seconds. ». Une fois que GitHub a terminé la bifurcation, votre navigateur devrait vous rediriger vers la page du nouveau « fork ». À titre d'exemple, mon « fork » de <https://github.com/mdn/content> est disponible l'adresse <https://github.com/chrisdavidmills/content>. + +Maintenant que vous avez dupliqué le dépôt, il est temps de cloner votre copie localement. Pour ce faire : + +1. Allez sur la page de votre bifurcation sur github.com (par exemple `https://github.com/<votre-nom-utilisateur>/content`). +2. Appuyez sur le bouton vert « Code » en haut de la liste des fichiers. Quelque chose de similaire à la fenêtre contextuelle suivante devrait apparaître : + +  + +3. Si vous avez configuré l'authentification SSH comme indiqué ci-dessus, cliquez sur l'onglet "SSH" et copiez l'URL `git@github.com:<votre-nom-utilisateur>/content.git` à partir du champ de texte de la fenêtre de dialogue. Si vous n'avez pas configuré l'authentification SSH, copiez plutôt l'URL depuis le champ de texte de l'onglet "HTTPS", qui devrait ressembler à ceci : `https://github.com/<votre-nom-utilisateur>/content.git`. +4. Maintenant, ouvrez votre console de commande sur votre ordinateur, et naviguez dans le répertoire que vous avez configuré plus tôt pour stocker les clones de votre dépôt git local à l'aide de la commande cd, par ex. + + ```bash + cd git + ``` + +5. Clonez votre bifurcation en entrant une commande de la forme suivante : + + ```bash + git clone url-que-vous-avez-copié + ``` + + Ainsi, par exemple, ma commande de clonage ressemblait à ceci : + + ```bash + git clone git@github.com:chrisdavidmills/content.git + ``` + +Vous devriez maintenant trouver un répertoire de contenu dans votre répertoire git, contenant le contenu du dépôt. + +### Configuration d'un suivi distant pour pointer vers la version principale du dépôt + +La dernière chose à faire avant de passer à autre chose, c'est de configurer un _remote_ ou « suivi distant » pour pointer vers la version principale du dépôt, par exemple <https://github.com/mdn/content> dans le cas de notre exemple. Un suivi distant est essentiellement un pointeur vers un emplacement de dépôt distant spécifique sur GitHub, et est le plus souvent utilisé pour mettre à jour votre clone local afin qu'il soit à jour avec le dernier dépôt principal, comme nous le verrons ci-dessous. + +La configuration d'un suivi distant se fait avec la commande `git remote add`, qui ressemble à ceci : + +```bash +git remote add remote-name repo-you-want-to-point-to +``` + +- `remote-name` est le nom que vous décidez, qui est utilisé pour se référer à suivi distant plus tard. Il est bon de s'en tenir à un nom cohérent pour bien distinguer les différents dépôts qui ont le même but, ainsi le même nom de suivi fera la même chose partout, et vous êtes moins susceptibles d'être confus. Ainsi, par exemple, la version principale du dépôt à partir duquel vous avez bifurqué votre version est souvent appelée « dépôt ascendant », c'est pourquoi les gens utilisent souvent « upstream » comme nom de l'emplacement ascendant distant. J'appelle généralement mes suivi ascendant "mozilla", pour signifier qu'ils pointent vers la copie principale du dépôt de Mozilla. +- `repo-you-want-to-point-to` est l'URL SSH (ou HTTPS) du dépôt vers lequel vous voulez pointer, récupérée de la même manière que lorsque nous avons cloné notre bifurcation plus tôt. + +Donc, pour ajouter votre suivi : + +1. Allez sur la page github.com de la version principale du dépôt (<https://github.com/mdn/content> dans cet exemple) et récupérez l'URL SSH ou HTTPS selon le cas, dans la fenêtre contextuelle « Code ». +2. Dans votre console de commande, utilisez `cd` pour aller dans votre répertoire de contenu : + + ```bash + cd content + ``` + +3. Exécutez maintenant une commande selon les lignes suivantes, en remplaçant _remote-name_ et _repo-you-want-to-point-to_ comme il convient : + + ```bash + git remote add remote-name repo-you-want-to-point-to + ``` + + Ainsi, par exemple, j'ai utilisé l'URL SSH et j'ai appelé mon suivi distant "mozilla" : + + ```bash + git remote add mozilla git@github.com:mdn/content.git + ``` + +Votre suivi distant devrait maintenant être configuré. Vous pouvez le vérifier en exécutant la commande `git remote -v` dans votre terminal, qui sort une liste de vos noms de suivi distant et où ils pointent. Vous devriez voir quelque chose un peu comme ceci : + + mozilla git@github.com:mdn/content.git (fetch) + mozilla git@github.com:mdn/content.git (push) + origin git@github.com:chrisdavidmills/content.git (fetch) + origin git@github.com:chrisdavidmills/content.git (push) + +## Préparation d'une modification du dépôt. + +Maintenant que votre clone de fork local est prêt à fonctionner, il y a un ensemble de commandes que vous devez prendre l'habitude d'exécuter avant d'essayer d'effectuer de nouvelles modifications. + +### Passer à la branche principale -<h3 id="forking_and_cloning">Bifurcation et clonage</h3> +Chaque dépôt a un certain nombre de branches différentes, qui sont essentiellement des versions différentes du code de base dans le même dépôt. L'idée est que pour chaque modification apportée au code de base, vous effectuez la modification sur une branche séparée et la testez d'abord, avant de pousser les modifications vers la copie principale du code. -<p>La <em>Bifurcation</em> et le <em>Clonage</em> sont deux termes que vous rencontrerez souvent dans le monde de Git :</p> +La branche principale du dépôt de contenu est appelée « main » (elle peut être appelée autrement, comme « master » dans d'autres dépôts, et si c'est le cas, vous devrez mettre à jour son nom dans toutes les commandes présentées ci-dessous). Vous serez sur cette branche par défaut si vous venez de cloner le dépôt, mais si vous avez déjà effectué des modifications, vous serez probablement sur une autre branche. -<ul> - <li>« Forking » (ou Bifurquer) signifie créer votre propre copie d'un dépôt sur GitHub.</li> - <li>« Cloning » (ou Cloner) consiste à faire une copie locale d'un dépôt sur lequel vous pouvez travailler (c'est-à-dire sur votre disque dur local).</li> -</ul> +Assurez-vous d'exécuter la commande suivante pour passer à la branche principale avant de faire quoi que ce soit d'autre : -<p>Il est possible de faire les deux choses séparément, mais en pratique, vous les ferez presque toujours ensemble lorsque vous contribuerez aux projets d'autres personnes. Vous devez d'abord créer une bifurcation de chaque dépôt sur lequel vous souhaitez travailler. Cela est nécessaire pour soumettre des demandes de modification à la version principale du dépôt (nous verrons plus tard comment créer une demande de modification). Pour des raisons de sécurité, vous ne pouvez pas soumettre des modifications directement à la version principale du dépôt.</p> +```bash +git switch main +``` -<p>Bifurquons le dépôt <a href="https://github.com/mdn/content">https://github.com/mdn/content</a> dès maintenant ; vous contribuerez certainement à ce dépôt à un moment donné. Suivez les étapes suivantes :</p> +> **Note :** Dans d'autres tutoriels, vous avez peut-être vu `git checkout` utilisée pour changer de branche dans un dépôt. Cela fonctionne bien la plupart du temps, mais peut parfois avoir des effets secondaires involontaires, c'est pourquoi dans ce tutoriel nous recommandons la commande `git switch`, plus récente, qui est conçue pour changer de branche et a moins de chance de faire des erreurs. Si vous êtes intéressé par la façon dont ces commandes sont liées, et les différences entre elles, l'article [Les points forts de Git 2.23 > Alternatives expérimentales pour git checkout](https://github.blog/2019-08-16-highlights-from-git-2-23/#experimental-alternatives-for-git-checkout) fournit un bon résumé. -<ol> - <li> - <p>Localisez le bouton « Fork » dans le coin supérieur droit de la page du dépôt de contenu, et appuyez dessus :</p> - <p><img src="fork-button.png" alt="Bouton étiqueté fork, avec le numéro 609 à côté."></p> - </li> - <li> - <p>Une fenêtre de dialogue s'affiche, vous demandant où vous souhaitez transférer le dépôt. Sélectionnez votre compte GitHub personnel.</p> - <p>Un message apparaîtra disant quelque chose comme « Forking mdn/content. It should only take a few seconds. ». Une fois que GitHub a terminé la bifurcation, votre navigateur devrait vous rediriger vers la page du nouveau « fork ». À titre d'exemple, mon « fork » de <a href="https://github.com/mdn/content">https://github.com/mdn/content</a> est disponible l'adresse <a href="https://github.com/chrisdavidmills/content">https://github.com/chrisdavidmills/content</a>.</p> - </li> -</ol> +### Mettre à jour votre branche principale -<p>Maintenant que vous avez dupliqué le dépôt, il est temps de cloner votre copie localement. Pour ce faire :</p> - -<ol> - <li> - <p>Allez sur la page de votre bifurcation sur github.com (par exemple <code>https://github.com/<em><votre-nom-utilisateur></em>/content</code>).</p> - </li> - <li> - <p>Appuyez sur le bouton vert « Code » en haut de la liste des fichiers. Quelque chose de similaire à la fenêtre contextuelle suivante devrait apparaître :</p> - <p><img src="code-popup.png" alt="Fenêtre contextuelle montrant une URL de clonage avec les options d'ouverture via le bureau GitHub et de téléchargement du zip."></p> - </li> - <li> - <p>Si vous avez configuré l'authentification SSH comme indiqué ci-dessus, cliquez sur l'onglet "SSH" et copiez l'URL <code>git@github.com:<em><votre-nom-utilisateur></em>/content.git</code> à partir du champ de texte de la fenêtre de dialogue. Si vous n'avez pas configuré l'authentification SSH, copiez plutôt l'URL depuis le champ de texte de l'onglet "HTTPS", qui devrait ressembler à ceci : <code>https://github.com/<em><votre-nom-utilisateur></em>/content.git</code>.</p> - </li> - <li> - <p>Maintenant, ouvrez votre console de commande sur votre ordinateur, et naviguez dans le répertoire que vous avez configuré plus tôt pour stocker les clones de votre dépôt git local à l'aide de la commande cd, par ex.</p> - <pre class="brush: bash">cd git</pre> - </li> - <li> - <p>Clonez votre bifurcation en entrant une commande de la forme suivante :</p> - <pre class="brush: bash">git clone <em>url-que-vous-avez-copié</em></pre> - <p>Ainsi, par exemple, ma commande de clonage ressemblait à ceci :</p> - <pre class="brush: bash">git clone git@github.com:chrisdavidmills/content.git</pre> - </li> -</ol> - -<p>Vous devriez maintenant trouver un répertoire de contenu dans votre répertoire git, contenant le contenu du dépôt.</p> - -<h3 id="setting_up_a_remote_to_point_to_the_main_version_of_the_repo">Configuration d'un suivi distant pour pointer vers la version principale du dépôt</h3> - -<p>La dernière chose à faire avant de passer à autre chose, c'est de configurer un <em>remote</em> ou « suivi distant » pour pointer vers la version principale du dépôt, par exemple <a href="https://github.com/mdn/content">https://github.com/mdn/content</a> dans le cas de notre exemple. Un suivi distant est essentiellement un pointeur vers un emplacement de dépôt distant spécifique sur GitHub, et est le plus souvent utilisé pour mettre à jour votre clone local afin qu'il soit à jour avec le dernier dépôt principal, comme nous le verrons ci-dessous.</p> - -<p>La configuration d'un suivi distant se fait avec la commande <code>git remote add</code>, qui ressemble à ceci :</p> - -<pre class="brush: bash">git remote add remote-name repo-you-want-to-point-to</pre> - -<ul> - <li><code><em>remote-name</em></code> est le nom que vous décidez, qui est utilisé pour se référer à suivi distant plus tard. Il est bon de s'en tenir à un nom cohérent pour bien distinguer les différents dépôts qui ont le même but, ainsi le même nom de suivi fera la même chose partout, et vous êtes moins susceptibles d'être confus. Ainsi, par exemple, la version principale du dépôt à partir duquel vous avez bifurqué votre version est souvent appelée « dépôt ascendant », c'est pourquoi les gens utilisent souvent « upstream » comme nom de l'emplacement ascendant distant. J'appelle généralement mes suivi ascendant "mozilla", pour signifier qu'ils pointent vers la copie principale du dépôt de Mozilla.</li> - <li><code><em>repo-you-want-to-point-to</em></code> est l'URL SSH (ou HTTPS) du dépôt vers lequel vous voulez pointer, récupérée de la même manière que lorsque nous avons cloné notre bifurcation plus tôt.</li> -</ul> - -<p>Donc, pour ajouter votre suivi :</p> - -<ol> - <li> - <p>Allez sur la page github.com de la version principale du dépôt (<a href="https://github.com/mdn/content">https://github.com/mdn/content</a> dans cet exemple) et récupérez l'URL SSH ou HTTPS selon le cas, dans la fenêtre contextuelle « Code ».</p> - </li> - <li> - <p>Dans votre console de commande, utilisez <code>cd</code> pour aller dans votre répertoire de contenu :</p> - <pre class="brush: bash">cd content</pre> - </li> - <li> - <p>Exécutez maintenant une commande selon les lignes suivantes, en remplaçant <em>remote-name</em> et <em>repo-you-want-to-point-to</em> comme il convient :</p> - <pre class="brush: bash">git remote add <em>remote-name</em> <em>repo-you-want-to-point-to</em></pre> - <p>Ainsi, par exemple, j'ai utilisé l'URL SSH et j'ai appelé mon suivi distant "mozilla" :</p> - <pre class="brush: bash">git remote add mozilla git@github.com:mdn/content.git</pre> - </li> -</ol> - -<p>Votre suivi distant devrait maintenant être configuré. Vous pouvez le vérifier en exécutant la commande <code>git remote -v</code> dans votre terminal, qui sort une liste de vos noms de suivi distant et où ils pointent. Vous devriez voir quelque chose un peu comme ceci :</p> - -<pre>mozilla git@github.com:mdn/content.git (fetch) -mozilla git@github.com:mdn/content.git (push) -origin git@github.com:chrisdavidmills/content.git (fetch) -origin git@github.com:chrisdavidmills/content.git (push)</pre> - -<h2 id="preparing_to_make_a_change_to_the_repo">Préparation d'une modification du dépôt.</h2> +Ensuite, vous devez mettre à jour votre branche principale afin qu'elle contienne le même contenu que la branche principale du dépôt principal. Le dépôt de contenu est mis à jour plusieurs fois par jour par un grand nombre de contributeurs, donc si vous ne le faites pas, votre version ne sera plus à jour, ce qui posera des problèmes lorsque vous essaierez de soumettre vos mises à jour. C'est là que votre suivi distant vous sera utile ! -<p>Maintenant que votre clone de fork local est prêt à fonctionner, il y a un ensemble de commandes que vous devez prendre l'habitude d'exécuter avant d'essayer d'effectuer de nouvelles modifications.</p> +Pour mettre à jour votre dépôt : -<h3 id="switch_to_the_main_branch">Passer à la branche principale</h3> +1. Tout d'abord, récupérez le contenu mis à jour de votre suivi distant avec la commande suivante : -<p>Chaque dépôt a un certain nombre de branches différentes, qui sont essentiellement des versions différentes du code de base dans le même dépôt. L'idée est que pour chaque modification apportée au code de base, vous effectuez la modification sur une branche séparée et la testez d'abord, avant de pousser les modifications vers la copie principale du code.</p> + ```bash + git fetch remote-name + ``` -<p>La branche principale du dépôt de contenu est appelée « main » (elle peut être appelée autrement, comme « master » dans d'autres dépôts, et si c'est le cas, vous devrez mettre à jour son nom dans toutes les commandes présentées ci-dessous). Vous serez sur cette branche par défaut si vous venez de cloner le dépôt, mais si vous avez déjà effectué des modifications, vous serez probablement sur une autre branche.</p> + Par exemple : -<p>Assurez-vous d'exécuter la commande suivante pour passer à la branche principale avant de faire quoi que ce soit d'autre :</p> + ```bash + git fetch mozilla + ``` -<pre class="brush: bash">git switch main</pre> +2. Ensuite, remplacez le contenu de votre branche principale par la branche principale du dépôt distant. Il existe de nombreuses façons différentes de le faire, mais j'ai tendance à utiliser la commande `rebase`, comme ceci : -<div class="note"> - <p><strong>Note :</strong> Dans d'autres tutoriels, vous avez peut-être vu <code>git checkout</code> utilisée pour changer de branche dans un dépôt. Cela fonctionne bien la plupart du temps, mais peut parfois avoir des effets secondaires involontaires, c'est pourquoi dans ce tutoriel nous recommandons la commande <code>git switch</code>, plus récente, qui est conçue pour changer de branche et a moins de chance de faire des erreurs. Si vous êtes intéressé par la façon dont ces commandes sont liées, et les différences entre elles, l'article <a href="https://github.blog/2019-08-16-highlights-from-git-2-23/#experimental-alternatives-for-git-checkout">Les points forts de Git 2.23 > Alternatives expérimentales pour git checkout</a> fournit un bon résumé.</p> -</div> - -<h3 id="update_your_main_branch">Mettre à jour votre branche principale</h3> + ```bash + git rebase remote-name/main-branch-name + ``` -<p>Ensuite, vous devez mettre à jour votre branche principale afin qu'elle contienne le même contenu que la branche principale du dépôt principal. Le dépôt de contenu est mis à jour plusieurs fois par jour par un grand nombre de contributeurs, donc si vous ne le faites pas, votre version ne sera plus à jour, ce qui posera des problèmes lorsque vous essaierez de soumettre vos mises à jour. C'est là que votre suivi distant vous sera utile !</p> - -<p>Pour mettre à jour votre dépôt :</p> - -<ol> - <li> - <p>Tout d'abord, récupérez le contenu mis à jour de votre suivi distant avec la commande suivante :</p> - <pre class="brush: bash">git fetch <em>remote-name</em></pre> - <p>Par exemple :</p> - <pre class="brush: bash">git fetch mozilla</pre> - </li> - <li> - <p>Ensuite, remplacez le contenu de votre branche principale par la branche principale du dépôt distant. Il existe de nombreuses façons différentes de le faire, mais j'ai tendance à utiliser la commande <code>rebase</code>, comme ceci :</p> - <pre class="brush: bash">git rebase <em>remote-name</em>/<em>main-branch-name</em></pre> - <p>Par exemple :<p> - <pre class="brush: bash">git rebase mozilla/main</pre> - </li> - <li> - <p>Enfin, poussez ces changements vers la version distante de votre bifircation en utilisant :</p> - <pre class="brush: bash">git push</pre> - </li> -</ol> - -<p>Vous saurez si vos mises à jour ont fonctionné correctement en regardant la page github.com de votre fork (c-à-d. que la mienne est <a href="https://github.com/chrisdavidmills/content">https://github.com/chrisdavidmills/content</a>). Elle devrait dire quelque chose comme « This branch is even with mdn:main. » quelque part près du haut de page. Si cela dit que votre branche principale est derrière mdn:main par un certain nombre de commits, alors vous devrez essayer à nouveau, ou regarder la section <a href="#troubleshooting">dépannage</a>.</p> - -<h3 id="create_a_new_branch_to_do_your_work_in">Créez une nouvelle branche pour y faire vos modifications</h3> - -<p>Une fois que vous avez mis à jour votre branche principale dans votre bifurcation, vous devez toujours créer une nouvelle branche pour y apporter une modification. Vous ne devriez <em>jamais</em> faire vos modifications dans la branche principale et le soumettre à partir de là - cela peut devenir très vite désordonné, croyez-nous. Il est beaucoup plus propre et moins sujet aux erreurs de faire tout le travail dans des branches séparées.</p> - -<p>Pour créer une nouvelle branche :</p> + Par exemple : -<ol> - <li> - <p>Allez sur la page de votre bifurcation sur github.com (la mienne est à l'adresse <a href="https://github.com/chrisdavidmills/content">https://github.com/chrisdavidmills/content</a>) et trouvez le bouton de branche en haut à gauche de la liste des fichiers, qui devrait indiquer « main » :</p> - <p><img src="branch-button.png" alt="Bouton intitulé main"></p> - </li> - <li> - <p>Cliquez dessus, et vous verrez apparaître une liste de branches et un champ de texte indiquant « Find or create a branch… » :</p> - <p><img src="branch-menu.png" alt="menu montrant une liste de noms de branches avec une zone de texte étiquetée trouver ou créer une branche"></p> - </li> - <li> - <p>Si vous saisissez une partie du nom d'une branche existante dans le champ de texte, la liste des branches sera filtrée en fonction de cette chaîne de caractères, ce qui vous permettra de rechercher facilement des branches existantes. Cependant, nous voulons créer une nouvelle branche. Entrez un nom de branche qui n'existe pas encore (essayez quelque chose comme test-branch) et l'affichage changera pour vous donner un bouton intitulé « Create branch : test-branch from 'main' » :</p> - <p><img src="new-branch.png" alt="menu montrant un nouveau nom de branche, test-branch, entré dans une zone de texte, avec un bouton de création de branche en dessous"></p> - </li> - <li> - <p>Une fois que vous êtes satisfait du nom de votre branche, cliquez sur ce bouton, et l'affichage sera mis à jour pour montrer le nom de la branche dans le bouton branche :</p> - <p><img src="branch-button-new-branch.png" alt="Bouton intitulé test-branch"></p> - </li> -</ol> + ```bash + git rebase mozilla/main + ``` -<p>Voilà, c'est fait ! Vous avez maintenant créé une nouvelle branche dans laquelle vous allez travailler. Cette branche est identique à l'état de la branche principale au moment où vous l'avez créée. C'est un bon point de départ pour notre travail.</p> - -<p>Conseils :</p> +3. Enfin, poussez ces changements vers la version distante de votre bifircation en utilisant : -<ul> - <li>Assurez-vous de toujours mettre à jour votre branche principale pour qu'elle soit synchronisée avec la branche principale de mozilla, comme indiqué dans la section précédente, avant de créer une nouvelle branche.</li> - <li>Assurez-vous de toujours créer votre nouvelle branche en vous basant sur main, et non sur une autre branche, en vérifiant que le bouton de la branche affiche "main" avant de lancer le processus. Si vous ne le faites pas, votre nouvelle branche risque d'être vraiment obsolète, ce qui créera des problèmes de contenu.</li> -</ul> - -<h3 id="get_your_branch_locally_and_switch_to_it">Obtenez votre branche localement et passez dessus</h3> - -<p>La section précédente vous a appris à créer une nouvelle branche dans votre bifurcation, mais elle n'existe actuellement que dans votre version distante du dépôt. Pour travailler dessus, vous devez la placer dans votre version locale.</p> + ```bash + git push + ``` -<p>Pour ce faire, retournez dans votre terminal et, en vous assurant que vous êtes à l'intérieur du répertoire du dépôt sur lequel vous travaillez (<code>content</code> pour cet exemple) :</p> +Vous saurez si vos mises à jour ont fonctionné correctement en regardant la page github.com de votre fork (c-à-d. que la mienne est <https://github.com/chrisdavidmills/content>). Elle devrait dire quelque chose comme « This branch is even with mdn:main. » quelque part près du haut de page. Si cela dit que votre branche principale est derrière mdn:main par un certain nombre de commits, alors vous devrez essayer à nouveau, ou regarder la section [dépannage](#troubleshooting). -<ol> - <li>Tirez les changements distants vers votre clone local en exécutant la commande <code>git pull</code>.</li> - <li>Vous devriez obtenir un message du type <code>* [new branch] test-branch -> origin/test-branch</code>.</li> - <li>Pour passer à votre branche (c'est-à-dire passer de « main », pour travailler dans cette branche à la place), exécutez la commande <code>git switch test-branch</code>.</li> -</ol> +### Créez une nouvelle branche pour y faire vos modifications -<p>Si vous avez réussi, git devrait vous dire quelque chose comme ceci :</p> +Une fois que vous avez mis à jour votre branche principale dans votre bifurcation, vous devez toujours créer une nouvelle branche pour y apporter une modification. Vous ne devriez _jamais_ faire vos modifications dans la branche principale et le soumettre à partir de là - cela peut devenir très vite désordonné, croyez-nous. Il est beaucoup plus propre et moins sujet aux erreurs de faire tout le travail dans des branches séparées. -<pre>Branch 'test-branch' set up to track remote branch 'test-branch' from 'origin'. -Switched to a new branch 'test-branch'</pre> +Pour créer une nouvelle branche : -<p>Notez que vous pouvez vérifier le statut de votre dépôt, y compris la branche sur laquelle vous vous trouvez, à tout moment en exécutant la commande <code>git status</code>. Essayez maintenant, et git devrait vous dire quelque chose comme ceci :</p> +1. Allez sur la page de votre bifurcation sur github.com (la mienne est à l'adresse <https://github.com/chrisdavidmills/content>) et trouvez le bouton de branche en haut à gauche de la liste des fichiers, qui devrait indiquer « main » : -<pre>On branch test-branch -Your branch is up to date with 'origin/test-branch'. +  -nothing to commit, working tree clean</pre> +2. Cliquez dessus, et vous verrez apparaître une liste de branches et un champ de texte indiquant « Find or create a branch… » : -<p>Cela semble correct. Nous sommes sur la branche "test-branch", et nous n'avons pas encore fait de changements.</p> +  -<h2 id="adding_committing_and_pushing_changes">Ajouter, valider et pousser les changements</h2> +3. Si vous saisissez une partie du nom d'une branche existante dans le champ de texte, la liste des branches sera filtrée en fonction de cette chaîne de caractères, ce qui vous permettra de rechercher facilement des branches existantes. Cependant, nous voulons créer une nouvelle branche. Entrez un nom de branche qui n'existe pas encore (essayez quelque chose comme test-branch) et l'affichage changera pour vous donner un bouton intitulé « Create branch : test-branch from 'main' » : -<p>À ce stade, vous êtes prêt à apporter des modifications au dépôt sur lequel vous travaillez, pour corriger un bogue sur lu MDN ou autre. Nous allons sauter cette partie, car ce n'est pas le but de ce tutoriel. Si vous voulez corriger un vrai problème sur le MDN, allez choisir un bogue à corriger dans notre <a href="https://github.com/mdn/translated-content/issues/">liste des problèmes de contenu</a>, ou lisez <a href="/fr/docs/MDN/Contribute">Contribuer à MDN</a> pour plus de conseils.</p> - -<p>Si vous voulez simplement suivre ce tutoriel à titre d'exemple, faisons quelque chose de simple.</p> - -<ol> - <li> - <p>Allez dans le fichier <code>content/README.md</code>, et ajoutez une seule lettre dans le titre supérieur du README.</p> - </li> - <li> - <p>Maintenant, retournez à votre ligne de commande et entrez à nouveau la commande <code>git status</code>. Cette fois-ci, git devrait vous dire quelque chose comme ceci :</p> - <pre>Your branch is up to date with 'origin/test-branch'. - - Changes not staged for commit: - (use "git add <file>..." to update what will be committed) - (use "git restore <file>..." to discard changes in working directory) - modified: README.md - - no changes added to commit (use "git add" and/or "git commit -a")</pre> - </li> - <li> - <p>À ce stade, il vous indique donc les fichiers que vous avez modifiés. L'étape suivante consiste à les "ajouter", c'est-à-dire à les ajouter à une liste de fichiers que vous souhaitez commiter pour les pousser vers le fork distant. Pour ajouter ce fichier à la liste de commit, tapez ce qui suit :</p> - <pre class="brush: bash">git add README.md</pre> - <div class="note"> - <p><strong>Note :</strong> <code>README.md</code> est le chemin d'accès au fichier que vous avez modifié, pas seulement son nom. S'il était à l'intérieur d'un sous-répertoire, vous auriez dû écrire le chemin complet du fichier.</p> - </div> - </li> - <li> - <p>Si vous exécutez <code>git status</code> à nouveau, vous verrez maintenant ceci :</p> - <pre>On branch test-branch +  + +4. Une fois que vous êtes satisfait du nom de votre branche, cliquez sur ce bouton, et l'affichage sera mis à jour pour montrer le nom de la branche dans le bouton branche : + +  + +Voilà, c'est fait ! Vous avez maintenant créé une nouvelle branche dans laquelle vous allez travailler. Cette branche est identique à l'état de la branche principale au moment où vous l'avez créée. C'est un bon point de départ pour notre travail. + +Conseils : + +- Assurez-vous de toujours mettre à jour votre branche principale pour qu'elle soit synchronisée avec la branche principale de mozilla, comme indiqué dans la section précédente, avant de créer une nouvelle branche. +- Assurez-vous de toujours créer votre nouvelle branche en vous basant sur main, et non sur une autre branche, en vérifiant que le bouton de la branche affiche "main" avant de lancer le processus. Si vous ne le faites pas, votre nouvelle branche risque d'être vraiment obsolète, ce qui créera des problèmes de contenu. + +### Obtenez votre branche localement et passez dessus + +La section précédente vous a appris à créer une nouvelle branche dans votre bifurcation, mais elle n'existe actuellement que dans votre version distante du dépôt. Pour travailler dessus, vous devez la placer dans votre version locale. + +Pour ce faire, retournez dans votre terminal et, en vous assurant que vous êtes à l'intérieur du répertoire du dépôt sur lequel vous travaillez (`content` pour cet exemple) : + +1. Tirez les changements distants vers votre clone local en exécutant la commande `git pull`. +2. Vous devriez obtenir un message du type `* [new branch] test-branch -> origin/test-branch`. +3. Pour passer à votre branche (c'est-à-dire passer de « main », pour travailler dans cette branche à la place), exécutez la commande `git switch test-branch`. + +Si vous avez réussi, git devrait vous dire quelque chose comme ceci : + + Branch 'test-branch' set up to track remote branch 'test-branch' from 'origin'. + Switched to a new branch 'test-branch' + +Notez que vous pouvez vérifier le statut de votre dépôt, y compris la branche sur laquelle vous vous trouvez, à tout moment en exécutant la commande `git status`. Essayez maintenant, et git devrait vous dire quelque chose comme ceci : + + On branch test-branch Your branch is up to date with 'origin/test-branch'. - Changes to be committed: - (use "git restore --staged <file>..." to unstage) - modified: README.md</pre> - </li> - <li> - <p>Git nous dit que <code>README.md</code> est maintenant dans notre liste de commit. Pour inclure tous les fichiers de la liste de commit dans un commit (un seul ensemble de changements que nous essaierons plus tard d'envoyer à la branche principale), entrez ce qui suit (l'option <code>-m</code> est l'abréviation de « message ») :</p> - <pre class="brush: bash">git commit -m 'my first commit'</pre> - <p>Git vous dira ceci :</p> - <pre>[test-branch 44b207ef6] my first commit - 1 file changed, 1 insertion(+), 1 deletion(-)</pre> - <p>Pour montrer qu'il a enregistré que vous avez fait un commit.</p> - </li> - <li> - <p>Exécutez <code>git status</code> à nouveau, et vous obtiendrez cette information :</p> - <pre>On branch test-branch - Your branch is ahead of 'origin/test-branch' by 1 commit. - (use "git push" to publish your local commits) + nothing to commit, working tree clean + +Cela semble correct. Nous sommes sur la branche "test-branch", et nous n'avons pas encore fait de changements. + +## Ajouter, valider et pousser les changements + +À ce stade, vous êtes prêt à apporter des modifications au dépôt sur lequel vous travaillez, pour corriger un bogue sur lu MDN ou autre. Nous allons sauter cette partie, car ce n'est pas le but de ce tutoriel. Si vous voulez corriger un vrai problème sur le MDN, allez choisir un bogue à corriger dans notre [liste des problèmes de contenu](https://github.com/mdn/translated-content/issues/), ou lisez [Contribuer à MDN](/fr/docs/MDN/Contribute) pour plus de conseils. + +Si vous voulez simplement suivre ce tutoriel à titre d'exemple, faisons quelque chose de simple. + +1. Allez dans le fichier `content/README.md`, et ajoutez une seule lettre dans le titre supérieur du README. +2. Maintenant, retournez à votre ligne de commande et entrez à nouveau la commande `git status`. Cette fois-ci, git devrait vous dire quelque chose comme ceci : + + Your branch is up to date with 'origin/test-branch'. + + Changes not staged for commit: + (use "git add <file>..." to update what will be committed) + (use "git restore <file>..." to discard changes in working directory) + modified: README.md + + no changes added to commit (use "git add" and/or "git commit -a") + +3. À ce stade, il vous indique donc les fichiers que vous avez modifiés. L'étape suivante consiste à les "ajouter", c'est-à-dire à les ajouter à une liste de fichiers que vous souhaitez commiter pour les pousser vers le fork distant. Pour ajouter ce fichier à la liste de commit, tapez ce qui suit : + + ```bash + git add README.md + ``` + + > **Note :** `README.md` est le chemin d'accès au fichier que vous avez modifié, pas seulement son nom. S'il était à l'intérieur d'un sous-répertoire, vous auriez dû écrire le chemin complet du fichier. + +4. Si vous exécutez `git status` à nouveau, vous verrez maintenant ceci : + + On branch test-branch + Your branch is up to date with 'origin/test-branch'. + + Changes to be committed: + (use "git restore --staged <file>..." to unstage) + modified: README.md + +5. Git nous dit que `README.md` est maintenant dans notre liste de commit. Pour inclure tous les fichiers de la liste de commit dans un commit (un seul ensemble de changements que nous essaierons plus tard d'envoyer à la branche principale), entrez ce qui suit (l'option `-m` est l'abréviation de « message ») : + + ```bash + git commit -m 'my first commit' + ``` + + Git vous dira ceci : + + [test-branch 44b207ef6] my first commit + 1 file changed, 1 insertion(+), 1 deletion(-) + + Pour montrer qu'il a enregistré que vous avez fait un commit. + +6. Exécutez `git status` à nouveau, et vous obtiendrez cette information : + + On branch test-branch + Your branch is ahead of 'origin/test-branch' by 1 commit. + (use "git push" to publish your local commits) + + nothing to commit, working tree clean + +La lecture de l'information a fondamentalement été réinitialisée - elle nous dit qu'il n'y a pas de changements à soumettre, parce que nous avons maintenant envoyé notre changement précédent dans le système comme un commit. La principale différence par rapport à la version précédente est la ligne "Votre branche est en avance sur 'origin/test-branch' de 1 commit". - notre version locale de la branche "test-branch" est maintenant en avance sur la version distante de "test-branch" d'un commit - en d'autres termes, nous avons fait un changement localement que la branche distante n'a pas. + +Envoyons notre changement local à la branche distante. Vous pouvez le faire en exécutant la commande `git push` - essayez maintenant. S'il n'y a pas d'erreurs, vous devriez obtenir un affichage comme celui-ci : + + Enumerating objects: 5, done. + Counting objects: 100% (5/5), done. + Delta compression using up to 8 threads + Compressing objects: 100% (3/3), done. + Writing objects: 100% (3/3), 292 bytes | 292.00 KiB/s, done. + Total 3 (delta 2), reused 0 (delta 0) + remote: Resolving deltas: 100% (2/2), completed with 2 local objects. + To github.com:chrisdavidmills/content.git + 77215e31e..44b207ef6 test-branch -> test-branch + +## Création d'une demande de triage + +À ce stade, retournez sur la page github.com de votre dépôt distant. Vous devriez voir un message du type « This branch is 1 commit ahead of mdn:main. ». Ce qui signifie que le contenu de notre bifurcation contient un changement de contenu (commit) que la branche « main » de Mozilla ne contient pas. - nothing to commit, working tree clean</pre> - </li> -</ol> +1. Pour envoyer notre modification vers la copie principale du dépôt, nous devons créer une demande de modification. Cela peut être fait facilement en utilisant le bouton "Compare & pull request" que vous devriez voir en haut de la liste des fichiers, une fois que la branche a eu une modification poussée vers elle. -<p>La lecture de l'information a fondamentalement été réinitialisée - elle nous dit qu'il n'y a pas de changements à soumettre, parce que nous avons maintenant envoyé notre changement précédent dans le système comme un commit. La principale différence par rapport à la version précédente est la ligne "Votre branche est en avance sur 'origin/test-branch' de 1 commit". - notre version locale de la branche "test-branch" est maintenant en avance sur la version distante de "test-branch" d'un commit - en d'autres termes, nous avons fait un changement localement que la branche distante n'a pas.</p> +  -<p>Envoyons notre changement local à la branche distante. Vous pouvez le faire en exécutant la commande <code>git push</code> - essayez maintenant. S'il n'y a pas d'erreurs, vous devriez obtenir un affichage comme celui-ci :</p> + Appuyez sur ce bouton, et vous devriez obtenir un nouvel écran qui s'affiche comme suit : -<pre>Enumerating objects: 5, done. -Counting objects: 100% (5/5), done. -Delta compression using up to 8 threads -Compressing objects: 100% (3/3), done. -Writing objects: 100% (3/3), 292 bytes | 292.00 KiB/s, done. -Total 3 (delta 2), reused 0 (delta 0) -remote: Resolving deltas: 100% (2/2), completed with 2 local objects. -To github.com:chrisdavidmills/content.git - 77215e31e..44b207ef6 test-branch -> test-branch</pre> +  -<h2 id="creating_a_pull_request">Création d'une demande de triage</h2> + > **Attention :** Ne suivez le reste de ces étapes que si vous avez une réelle modification à apporter au dépôt ! Veuillez ne pas soumettre de PR de test à nos dépôts. -<p>À ce stade, retournez sur la page github.com de votre dépôt distant. Vous devriez voir un message du type « This branch is 1 commit ahead of mdn:main. ». Ce qui signifie que le contenu de notre bifurcation contient un changement de contenu (commit) que la branche « main » de Mozilla ne contient pas.</p> +2. À ce stade, entrez un titre et une description utiles pour votre PR, en disant exactement ce qu'il a changé, pourquoi c'est une bonne chose, et quel problème connexe il a corrigé, le cas échéant. Plus précisément, incluez une ligne disant `Fixes issue-url`. GitHub rend automatiquement cela comme un lien vers le numéro de problème, par exemple `Fixes #1234` et, en outre, ferme automatiquement le problème connexe une fois que la pull request est fusionnée. +3. Une fois que vous êtes prêt à envoyer votre pull request, cliquez sur le bouton « Create pull request ». Votre pull request (PR) apparaîtra alors dans la liste « [Pull requests](https://github.com/mdn/content/pulls) » du dépôt, où elle sera examinée par nos équipes de révision et, si possible, fusionnée dans le code principal. -<ol> - <li> - <p>Pour envoyer notre modification vers la copie principale du dépôt, nous devons créer une demande de modification. Cela peut être fait facilement en utilisant le bouton "Compare & pull request" que vous devriez voir en haut de la liste des fichiers, une fois que la branche a eu une modification poussée vers elle.</p> + Si l'équipe de révision souhaite que vous apportiez des modifications, elle vous en informera dans les commentaires du fil de discussion de la demande de triage (vous devriez recevoir une notification par courriel pour vous en informer). - <p><img src="compare-and-pull-request.png" alt="bannière avec le texte test-branch had recent pushes, et un bouton intitulé compare and pull request"></p> +4. Si vous souhaitez apporter d'autres modifications à la même demande de dépôt que vous avez déjà soumise, vous pouvez le faire en faisant d'autres commits sur la même branche locale et en les poussant ensuite comme expliqué précédemment. Il n'est pas nécessaire de créer une demande de pull complètement nouvelle. **Veuillez simplement vous assurer que vous les faites sur la même branche que précédemment**. - <p>Appuyez sur ce bouton, et vous devriez obtenir un nouvel écran qui s'affiche comme suit :</p> +## Dépannage - <p><img src="open-pull-request.png" alt="un formulaire de demande de triage ouvert, qui comprend des champs de texte pour le titre et la description"></p> +Le tutoriel ci-dessus vise à vous fournir les bases de Git et de GitHub dont vous aurez besoin pour contribuer aux dépôts GitHub à un niveau de base. Nous espérons qu'il vous a été utile ! Nous aimerions également aborder le fait que, bien qu'étant le système de contrôle de version standard de l'industrie du web, Git a une sorte de réputation mythique/légendaire d'outil péniblement difficile à apprendre et à utiliser. - <div class="warning"> - <p><strong>Attention :</strong> Ne suivez le reste de ces étapes que si vous avez une réelle modification à apporter au dépôt ! Veuillez ne pas soumettre de PR de test à nos dépôts.</p> - </div> - </li> - <li> - <p>À ce stade, entrez un titre et une description utiles pour votre PR, en disant exactement ce qu'il a changé, pourquoi c'est une bonne chose, et quel problème connexe il a corrigé, le cas échéant. Plus précisément, incluez une ligne disant <code>Fixes <em>issue-url</em></code>. GitHub rend automatiquement cela comme un lien vers le numéro de problème, par exemple <code>Fixes #1234</code> et, en outre, ferme automatiquement le problème connexe une fois que la pull request est fusionnée.</p> - </li> - <li> - <p>Une fois que vous êtes prêt à envoyer votre pull request, cliquez sur le bouton « Create pull request ». Votre pull request (PR) apparaîtra alors dans la liste « <a href="https://github.com/mdn/content/pulls">Pull requests</a> » du dépôt, où elle sera examinée par nos équipes de révision et, si possible, fusionnée dans le code principal.</p> - <p>Si l'équipe de révision souhaite que vous apportiez des modifications, elle vous en informera dans les commentaires du fil de discussion de la demande de triage (vous devriez recevoir une notification par courriel pour vous en informer).</p> - </li> - <li> - <p>Si vous souhaitez apporter d'autres modifications à la même demande de dépôt que vous avez déjà soumise, vous pouvez le faire en faisant d'autres commits sur la même branche locale et en les poussant ensuite comme expliqué précédemment. Il n'est pas nécessaire de créer une demande de pull complètement nouvelle. <strong>Veuillez simplement vous assurer que vous les faites sur la même branche que précédemment</strong>.</p> - </li> -</ol> +Nous ne sommes pas sûrs que ce soit tout à fait juste. Git comporte de nombreuses commandes qui sont parfois assez cryptiques dans leur utilisation, et il faut beaucoup de temps pour les maîtriser. Il est également juste de dire que si vous oubliez certaines commandes ou que vous faites les choses dans le mauvais ordre, vous pouvez vous retrouver dans un désordre intéressant dont il est difficile de se sortir. Toutefois, si vous prenez les bonnes habitudes décrites ci-dessus, vous ne devriez pas trop vous tromper. Il convient également de mentionner que Git est beaucoup plus facile à utiliser qu'il y a dix ans. -<h2 id="troubleshooting">Dépannage</h2> +Cette section sera complétée au fil du temps et comprendra des commandes/séquences utiles pour vous aider à résoudre les problèmes courants. -<p>Le tutoriel ci-dessus vise à vous fournir les bases de Git et de GitHub dont vous aurez besoin pour contribuer aux dépôts GitHub à un niveau de base. Nous espérons qu'il vous a été utile ! Nous aimerions également aborder le fait que, bien qu'étant le système de contrôle de version standard de l'industrie du web, Git a une sorte de réputation mythique/légendaire d'outil péniblement difficile à apprendre et à utiliser.</p> +### Annulation d'une modification que vous avez apportée à un fichier que vous n'avez pas encore ajouté à la liste des commits. -<p>Nous ne sommes pas sûrs que ce soit tout à fait juste. Git comporte de nombreuses commandes qui sont parfois assez cryptiques dans leur utilisation, et il faut beaucoup de temps pour les maîtriser. Il est également juste de dire que si vous oubliez certaines commandes ou que vous faites les choses dans le mauvais ordre, vous pouvez vous retrouver dans un désordre intéressant dont il est difficile de se sortir. Toutefois, si vous prenez les bonnes habitudes décrites ci-dessus, vous ne devriez pas trop vous tromper. Il convient également de mentionner que Git est beaucoup plus facile à utiliser qu'il y a dix ans.</p> +Si vous avez modifié un fichier, mais que vous n'avez pas encore exécuté la commande `git add file-path` pour l'ajouter à la liste des commits, vous pouvez revenir à l'état dans lequel il était lorsque vous avez extrait la branche pour la première fois en exécutant : -<p>Cette section sera complétée au fil du temps et comprendra des commandes/séquences utiles pour vous aider à résoudre les problèmes courants.</p> +```bash +git restore file-path +``` -<h3 id="reverting_a_change_you_made_to_a_file_that_you_havent_yet_added_to_the_commit_list">Annulation d'une modification que vous avez apportée à un fichier que vous n'avez pas encore ajouté à la liste des commits.</h3> +### Suppression d'un fichier de la liste de commit -<p>Si vous avez modifié un fichier, mais que vous n'avez pas encore exécuté la commande <code>git add <em>file-path</em></code> pour l'ajouter à la liste des commits, vous pouvez revenir à l'état dans lequel il était lorsque vous avez extrait la branche pour la première fois en exécutant :</p> +Si vous avez déjà exécuté la commande `git add file-path` pour ajouter un fichier à la liste de commit, mais que vous voulez maintenant le supprimer de la liste de commit, vous pouvez utiliser la commande : -<pre class="brush: bash">git restore <em>file-path</em></pre> +```bash +git restore --staged file-path +``` -<h3 id="removing_a_file_from_the_commit_list">Suppression d'un fichier de la liste de commit</h3> +### Annuler un commit -<p>Si vous avez déjà exécuté la commande <code>git add <em>file-path</em></code> pour ajouter un fichier à la liste de commit, mais que vous voulez maintenant le supprimer de la liste de commit, vous pouvez utiliser la commande :</p> +Si vous avez soumis la liste de commit en utilisant `git commit -m 'mon message de commit'`, et que vous ne l'avez pas encore poussé, mais que vous vous êtes maintenant rendu compte que vous avez mis quelque chose dedans que vous voulez enlever, vous pouvez inverser votre commit local en utilisant : -<pre class="brush: bash">git restore --staged <em>file-path</em></pre> +```bash +git reset HEAD~1 +``` -<h3 id="reversing_a_commit">Annuler un commit</h3> +Cela vous ramènera à l'état où les changements de ce commit ne sont pas encore ajoutés à la liste des commits (vous devrez les ajouter à nouveau dans git après avoir résolu le problème). Notez que cela vous ramène à l'état avant que vous ne commitiez quoi que ce soit dans cette session. Cela ne vous aidera pas si vous avez besoin de faire quelque chose de plus complexe, comme revenir sur le commit du milieu d'un ensemble de trois. Nous en resterons là pour cette leçon. -<p>Si vous avez soumis la liste de commit en utilisant <code>git commit -m 'mon message de commit'</code>, et que vous ne l'avez pas encore poussé, mais que vous vous êtes maintenant rendu compte que vous avez mis quelque chose dedans que vous voulez enlever, vous pouvez inverser votre commit local en utilisant :</p> +### Inverser un commit qui a été poussé vers la bifurcation distante -<pre class="brush: bash">git reset HEAD~1</pre> +À ce stade, il n'est pas vraiment possible de revenir en arrière, ou de rembobiner. Au lieu de cela, vous devez pousser un autre commit pour inverser les effets de celui dont vous voulez vous débarrasser. Vous pourriez le faire manuellement en utilisant certains des outils que nous vous avons déjà donnés ci-dessus, mais il y a une commande intégrée qui rend cela plus facile - `git revert`. Cela peut être utilisé pour créer automatiquement un commit qui rétablit les changements au point que vous spécifiez. -<p>Cela vous ramènera à l'état où les changements de ce commit ne sont pas encore ajoutés à la liste des commits (vous devrez les ajouter à nouveau dans git après avoir résolu le problème). Notez que cela vous ramène à l'état avant que vous ne commitiez quoi que ce soit dans cette session. Cela ne vous aidera pas si vous avez besoin de faire quelque chose de plus complexe, comme revenir sur le commit du milieu d'un ensemble de trois. Nous en resterons là pour cette leçon.</p> +1. Dans sa forme la plus simple, vous pouvez exécuter la commande suivante pour créer un commit qui ramènera votre branche distante à l'état dans lequel vous étiez avant de commencer à soumettre le commit : -<h3 id="reversing_a_commit_that_has_been_pushed_to_the_remote_fork">Inverser un commit qui a été poussé vers la bifurcation distante</h3> + ```bash + git revert HEAD + ``` -<p>À ce stade, il n'est pas vraiment possible de revenir en arrière, ou de rembobiner. Au lieu de cela, vous devez pousser un autre commit pour inverser les effets de celui dont vous voulez vous débarrasser. Vous pourriez le faire manuellement en utilisant certains des outils que nous vous avons déjà donnés ci-dessus, mais il y a une commande intégrée qui rend cela plus facile - <code>git revert</code>. Cela peut être utilisé pour créer automatiquement un commit qui rétablit les changements au point que vous spécifiez.</p> +2. Cela aura pour conséquence l'ouverture d'un fichier de message de commit dans votre éditeur de texte par défaut que vous devrez vérifier pour vous assurer que vous êtes satisfait. Fermez-le, et git finalisera la création du commit. +3. Maintenant, il faut juste le pousser : -<ol> - <li> - <p>Dans sa forme la plus simple, vous pouvez exécuter la commande suivante pour créer un commit qui ramènera votre branche distante à l'état dans lequel vous étiez avant de commencer à soumettre le commit :</p> - <pre class="brush: bash">git revert HEAD</pre> - </li> - <li> - <p>Cela aura pour conséquence l'ouverture d'un fichier de message de commit dans votre éditeur de texte par défaut que vous devrez vérifier pour vous assurer que vous êtes satisfait. Fermez-le, et git finalisera la création du commit.</p> - </li> - <li> - <p>Maintenant, il faut juste le pousser :</p> - <pre class="brush: bash">git push</pre> - </li> -</ol> + ```bash + git push + ``` -<p>Si vous regardez à nouveau la page github.com de votre bifurcation distante, vous verrez le commit que vous vouliez inverser, plus le commit qui l'inverse.</p> +Si vous regardez à nouveau la page github.com de votre bifurcation distante, vous verrez le commit que vous vouliez inverser, plus le commit qui l'inverse. -<div class="note"> - <p><strong>Note :</strong> Une autre façon de se débarrasser de fichiers qui se sont retrouvés dans des demandes de triage que vous ne voulez pas voir figurer est d'utiliser l'interface utilisateur de GitHub. Allez sur la page de votre demande sur github.com, allez dans l'onglet « Files changed », et trouvez le fichier que vous voulez supprimer de la demande. En haut à droite de la boîte du fichier dans la page, il y aura un menu à « trois points » (<code>...</code>). Appuyez sur ce bouton et choisissez « Delete file ». Dans la page de confirmation, entrez un titre pour le nouveau commit, assurez-vous que la case « Commit directly... « est cochée, et appuyez sur le bouton « Commit changes ».</p> - <p>C'est généralement une bonne idée de faire en sorte que le reste de la demande de trisage ressemble exactement à ce que vous voulez avant de faire des changements via l'interface utilisateur de GitHub. Si vous faites quelque chose comme ça et que vous devez ensuite faire d'autres changements, vous devrez vous rappeler de tirer les changements que vous avez faits sur votre branche distante vers votre branche locale (par exemple avec <code>git pull</code>) avant de pouvoir pousser d'autres commits.</p> -</div> +> **Note :** Une autre façon de se débarrasser de fichiers qui se sont retrouvés dans des demandes de triage que vous ne voulez pas voir figurer est d'utiliser l'interface utilisateur de GitHub. Allez sur la page de votre demande sur github.com, allez dans l'onglet « Files changed », et trouvez le fichier que vous voulez supprimer de la demande. En haut à droite de la boîte du fichier dans la page, il y aura un menu à « trois points » (`...`). Appuyez sur ce bouton et choisissez « Delete file ». Dans la page de confirmation, entrez un titre pour le nouveau commit, assurez-vous que la case « Commit directly... « est cochée, et appuyez sur le bouton « Commit changes ». +> +> C'est généralement une bonne idée de faire en sorte que le reste de la demande de trisage ressemble exactement à ce que vous voulez avant de faire des changements via l'interface utilisateur de GitHub. Si vous faites quelque chose comme ça et que vous devez ensuite faire d'autres changements, vous devrez vous rappeler de tirer les changements que vous avez faits sur votre branche distante vers votre branche locale (par exemple avec `git pull`) avant de pouvoir pousser d'autres commits. -<h3 id="want_to_see_more">Vous voulez en voir plus ?</h3> +### Vous voulez en voir plus ? -<p>Si vous pensez que ce guide de dépannage devrait contenir plus d'informations, veuillez <a href="https://github.com/mdn/translated-content/issues/new">créer un ticket</a> pour suggérer ce que vous pensez que nous devrions inclure.</p> +Si vous pensez que ce guide de dépannage devrait contenir plus d'informations, veuillez [créer un ticket](https://github.com/mdn/translated-content/issues/new) pour suggérer ce que vous pensez que nous devrions inclure. -<h2 id="see_also">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Learn/Tools_and_testing/GitHub">Apprendre le développement web > Git et GitHub</a></li> - <li><a href="https://dangitgit.com/en">Dangit, Git</a> — autres techniques de dépannage utiles</li> - <li><a href="https://hackernoon.com/45-github-issues-dos-and-donts-dfec9ab4b612">45 Questions sur GitHub : à faire et à ne pas faire</a></li> - <li><a href="https://cli.github.com/">Outils CLI GitHub</a> — une fois que vous avez l'habitude d'utiliser les commandes de l'interface CLI de GitHub pour contrôler vos dépôts, vous pouvez envisager d'installer l'outil CLI gh de GitHub, qui fournit des commandes pour accélérer un certain nombre des processus mentionnés ci-dessus.</li> -</ul> +- [Apprendre le développement web > Git et GitHub](/fr/docs/Learn/Tools_and_testing/GitHub) +- [Dangit, Git](https://dangitgit.com/en) — autres techniques de dépannage utiles +- [45 Questions sur GitHub : à faire et à ne pas faire](https://hackernoon.com/45-github-issues-dos-and-donts-dfec9ab4b612) +- [Outils CLI GitHub](https://cli.github.com/) — une fois que vous avez l'habitude d'utiliser les commandes de l'interface CLI de GitHub pour contrôler vos dépôts, vous pouvez envisager d'installer l'outil CLI gh de GitHub, qui fournit des commandes pour accélérer un certain nombre des processus mentionnés ci-dessus. diff --git a/files/fr/mdn/contribute/github_best_practices/index.md b/files/fr/mdn/contribute/github_best_practices/index.md index 146496aba9..cdb4e51825 100644 --- a/files/fr/mdn/contribute/github_best_practices/index.md +++ b/files/fr/mdn/contribute/github_best_practices/index.md @@ -8,42 +8,33 @@ tags: - MDN translation_of: MDN/Contribute/GitHub_best_practices --- -<p>{{MDNSidebar}}</p> - -<p>Cette page contient les bonnes pratiques pour travailler avec GitHub et contribuer à MDN, principalement axées sur la façon de travailler avec les <i>issues</i> qui sont les tickets/points à traiter, référencés sur les dépôts GitHub.</p> - -<h2 id="when_choosing_a_github_issue_to_work_on">Choisir une issue GitHub sur laquelle travailler</h2> - -<ol> - <li>Écrivez un commentaire dans le ticket en disant que vous aimeriez vous en occuper, et nous vous y affecterons. - <ul> - <li>Si quelqu'un d'autre est déjà affecté au problème : - <ol> - <li>Si cela s'est passé il y a plus d'une semaine et qu'il n'y a pas eu beaucoup d'activité, mentionnez-les personnes et demandez-leur si vous pouvez reprendre le ticket ou les aider à terminer le projet. - <ul> - <li>S'ils sont d'accord pour que vous preniez l'<i>issue</i>, nous vous y affecterons et nous les retirerons.</li> - <li>S'ils sont d'accord pour que vous le preniez et qu'une partie du travail a déjà été effectuée, ou si l'accord prévoit que vous les aidiez, nous vous y affecterons à leurs côtés.</li> - </ul> - </li> - <li>Si c'était il y a moins d'une semaine, soyez patient et donnez-leur une chance d'y travailler.</li> - </ol> - </li> - </ul> - </li> - <li>Si l'<i>issue</i> a été marquée comme terminée mais qu'une revue est nécessaire et que vous souhaitez relire, mentionnez la personne (@pseudo) dans les commentaires et dites que vous allez relire ses modifications.</li> -</ol> - -<h2 id="when_youve_been_assigned_to_an_issue">Lorsque vous êtes affecté⋅e à une issue</h2> - -<ol> - <li>Déterminez le reste des travaux à effectuer. - <ul> - <li>Si l'<i>issue</i> est bien décrite et que le travail est assez évident, foncez et faites-le.</li> - <li>Si l'<i>issue</i> n'est pas bien décrite, et/ou si vous n'êtes pas sûr⋅e de ce qui est nécessaire, n'hésitez pas à @mentionner la personne à l'origine et à demander plus d'informations.</li> - <li>Si vous ne savez toujours pas à qui vous adresser, demandez de l'aide dans le salon de discussion <a href="https://chat.mozilla.org/#/room/#l10n-fr:mozilla.org">MDN Web Docs FR</a> sur <a href="https://wiki.mozilla.org/Matrix">Matrix</a>.</li> - </ul> - </li> - <li>Une fois que vous pensez avoir résolu une <i>issue</i>, demandez une revue dans les commentaires.</li> - <li>Une fois qu'une <i>issue</i> a été revue avec succès et que les commentaires ont reçu une réponse positive, vous pouvez la marquer comme terminée.</li> - <li>Si vous n'avez plus le temps de travailler sur une <i>issue</i>, faites-le nous savoir dans un commentaire afin que nous puissions l'attribuer à quelqu'un d'autre.</li> -</ol> +{{MDNSidebar}} + +Cette page contient les bonnes pratiques pour travailler avec GitHub et contribuer à MDN, principalement axées sur la façon de travailler avec les _issues_ qui sont les tickets/points à traiter, référencés sur les dépôts GitHub. + +## Choisir une issue GitHub sur laquelle travailler + +1. Écrivez un commentaire dans le ticket en disant que vous aimeriez vous en occuper, et nous vous y affecterons. + + - Si quelqu'un d'autre est déjà affecté au problème : + + 1. Si cela s'est passé il y a plus d'une semaine et qu'il n'y a pas eu beaucoup d'activité, mentionnez-les personnes et demandez-leur si vous pouvez reprendre le ticket ou les aider à terminer le projet. + + - S'ils sont d'accord pour que vous preniez l'_issue_, nous vous y affecterons et nous les retirerons. + - S'ils sont d'accord pour que vous le preniez et qu'une partie du travail a déjà été effectuée, ou si l'accord prévoit que vous les aidiez, nous vous y affecterons à leurs côtés. + + 2. Si c'était il y a moins d'une semaine, soyez patient et donnez-leur une chance d'y travailler. + +2. Si l'_issue_ a été marquée comme terminée mais qu'une revue est nécessaire et que vous souhaitez relire, mentionnez la personne (@pseudo) dans les commentaires et dites que vous allez relire ses modifications. + +## Lorsque vous êtes affecté⋅e à une issue + +1. Déterminez le reste des travaux à effectuer. + + - Si l'_issue_ est bien décrite et que le travail est assez évident, foncez et faites-le. + - Si l'_issue_ n'est pas bien décrite, et/ou si vous n'êtes pas sûr⋅e de ce qui est nécessaire, n'hésitez pas à @mentionner la personne à l'origine et à demander plus d'informations. + - Si vous ne savez toujours pas à qui vous adresser, demandez de l'aide dans le salon de discussion [MDN Web Docs FR](https://chat.mozilla.org/#/room/#l10n-fr:mozilla.org) sur [Matrix](https://wiki.mozilla.org/Matrix). + +2. Une fois que vous pensez avoir résolu une _issue_, demandez une revue dans les commentaires. +3. Une fois qu'une _issue_ a été revue avec succès et que les commentaires ont reçu une réponse positive, vous pouvez la marquer comme terminée. +4. Si vous n'avez plus le temps de travailler sur une _issue_, faites-le nous savoir dans un commentaire afin que nous puissions l'attribuer à quelqu'un d'autre. diff --git a/files/fr/mdn/contribute/github_cheatsheet/index.md b/files/fr/mdn/contribute/github_cheatsheet/index.md index 1dddbb8be7..76af916183 100644 --- a/files/fr/mdn/contribute/github_cheatsheet/index.md +++ b/files/fr/mdn/contribute/github_cheatsheet/index.md @@ -11,72 +11,94 @@ tags: - Commands translation_of: MDN/Contribute/GitHub_cheatsheet --- -<p>{{MDNSidebar}}</p> +{{MDNSidebar}} -<p>Cet article fournit une référence rapide aux commandes essentielles dont vous aurez besoin lorsque vous utiliserez <a href="https://git-scm.com/">Git</a> et <a href="https://github.com/">GitHub</a> pour contribuer à MDN. Si vous êtes novice dans l'utilisation de ces outils et avez besoin d'un coup de pouce, notre tutoriel <a href="/fr/docs/MDN/Contribute/GitHub_beginners">GitHub pour les débutants</a> vous enseigne les bases.</p> +Cet article fournit une référence rapide aux commandes essentielles dont vous aurez besoin lorsque vous utiliserez [Git](https://git-scm.com/) et [GitHub](https://github.com/) pour contribuer à MDN. Si vous êtes novice dans l'utilisation de ces outils et avez besoin d'un coup de pouce, notre tutoriel [GitHub pour les débutants](/fr/docs/MDN/Contribute/GitHub_beginners) vous enseigne les bases. -<h2 id="Cloning">Cloner</h2> +## Cloner -<pre class="brush: bash">git clone <em>url-du-depot</em></pre> +```bash +git clone url-du-depot +``` -<h2 id="setting_up_a_remote">Configurer une référence à un dépôt distant</h2> +## Configurer une référence à un dépôt distant -<pre class="brush: bash">git remote add <em>nom-ref-distante</em> <em>url-du-depot-distant-a-referencer</em></pre> +```bash +git remote add nom-ref-distante url-du-depot-distant-a-referencer +``` -<h2 id="view_remotes_list">Afficher la liste des références distantes</h2> +## Afficher la liste des références distantes -<pre class="brush: bash">git remote -v</pre> +```bash +git remote -v +``` -<h2 id="preparing_to_make_a_change_to_the_repo">Préparer une modification du dépôt</h2> +## Préparer une modification du dépôt -<h3 id="switch_to_the_main_branch">Basculer sur la branche principale</h3> +### Basculer sur la branche principale -<pre class="brush: bash">git switch main</pre> +```bash +git switch main +``` -<h3 id="update_your_main_branch">Mettre à jour votre branche principale</h3> +### Mettre à jour votre branche principale -<pre class="brush: bash">git fetch <em>nom-ref-distante</em> -git rebase <em>nom-ref-distante</em>/main -git push</pre> +```bash +git fetch nom-ref-distante +git rebase nom-ref-distante/main +git push +``` -<h2 id="get_your_branch_locally_and_switch_to_it">Obtenir sa branche en local et basculer sur celle-ci</h2> +## Obtenir sa branche en local et basculer sur celle-ci -<pre class="brush: bash">git pull -git switch nouvelle-branche</pre> +```bash +git pull +git switch nouvelle-branche +``` -<h2 id="get_latest_status">Obtenir le dernier statut</h2> +## Obtenir le dernier statut -<pre class="brush: bash">git status</pre> +```bash +git status +``` -<h2 id="adding_committing_and_pushing_changes">Ajouter, valider et pousser les changements</h2> +## Ajouter, valider et pousser les changements -<pre class="brush: bash">git add chemin-fichier-modifie +```bash +git add chemin-fichier-modifie git commit -m 'mon message de commit' -git push</pre> +git push +``` -<h2 id="troubleshooting">Dépannage</h2> +## Dépannage -<h3 id="reverting_a_change_you_made_to_a_file_that_you_havent_yet_added_to_the_commit_list">Annuler une modification non indexée</h3> +### Annuler une modification non indexée -<pre class="brush: bash">git restore <em>chemin-du-fichier</em></pre> +```bash +git restore chemin-du-fichier +``` -<h3 id="removing_a_file_from_the_commit_list">Retirer un fichier de l'index</h3> +### Retirer un fichier de l'index -<pre class="brush: bash">git restore --staged <em>chemin-du-fichier</em></pre> +```bash +git restore --staged chemin-du-fichier +``` -<h3 id="reversing_a_commit">Annuler le dernier commit</h3> +### Annuler le dernier commit -<pre class="brush: bash">git reset HEAD~1</pre> +```bash +git reset HEAD~1 +``` -<h3 id="reversing_a_commit_that_has_been_pushed_to_the_remote_fork">Inverser un commit qui a été poussé vers la bifurcation distante</h3> +### Inverser un commit qui a été poussé vers la bifurcation distante -<pre class="brush: bash">git revert HEAD -git push</pre> +```bash +git revert HEAD +git push +``` -<div class="note notecard"> - <p><strong>Note :</strong> Une autre façon de se débarrasser de fichiers qui se sont retrouvés dans des <i>pull requests</i> (demandes de triage) que vous ne voulez pas voir figurer est d'utiliser l'interface utilisateur de GitHub. Allez sur la page de votre demande sur github.com, allez dans l'onglet « Files changed », et trouvez le fichier que vous voulez supprimer de la demande. En haut à droite de la boîte du fichier dans la page, il y aura un menu à « trois points » (<code>...</code>). Appuyez sur ce bouton et choisissez « Delete file ». Dans la page de confirmation, entrez un titre pour le nouveau commit, assurez-vous que la case « Commit directly… » est cochée, et appuyez sur le bouton « Commit changes ».</p> -</div> +> **Note :** Une autre façon de se débarrasser de fichiers qui se sont retrouvés dans des _pull requests_ (demandes de triage) que vous ne voulez pas voir figurer est d'utiliser l'interface utilisateur de GitHub. Allez sur la page de votre demande sur github.com, allez dans l'onglet « Files changed », et trouvez le fichier que vous voulez supprimer de la demande. En haut à droite de la boîte du fichier dans la page, il y aura un menu à « trois points » (`...`). Appuyez sur ce bouton et choisissez « Delete file ». Dans la page de confirmation, entrez un titre pour le nouveau commit, assurez-vous que la case « Commit directly… » est cochée, et appuyez sur le bouton « Commit changes ». -<h2 id="want_to_see_more">Vous voulez en voir plus ?</h2> +## Vous voulez en voir plus ? -<p>Si vous pensez que cet aide-mémoire devrait contenir plus de commandes, veuillez <a href="https://github.com/mdn/translated-content/issues/new">créer un ticket</a> pour suggérer ce que vous pensez que nous devrions inclure.</p> +Si vous pensez que cet aide-mémoire devrait contenir plus de commandes, veuillez [créer un ticket](https://github.com/mdn/translated-content/issues/new) pour suggérer ce que vous pensez que nous devrions inclure. diff --git a/files/fr/mdn/contribute/help_beginners/index.md b/files/fr/mdn/contribute/help_beginners/index.md index 92c94bb627..93dafbb2dc 100644 --- a/files/fr/mdn/contribute/help_beginners/index.md +++ b/files/fr/mdn/contribute/help_beginners/index.md @@ -9,103 +9,79 @@ tags: - MDN translation_of: MDN/Contribute/Help_beginners --- -<p>{{MDNSidebar}}</p> - -<p>Nos pages <a href="/fr/docs/Learn">Apprendre le développement web</a> obtiennent plus d'un million de vues par mois, et ont <a href="https://discourse.mozilla.org/c/mdn/learn/250">des forums actifs</a> où les utilisateurs vont pour demander une aide générale, ou demander que leurs évaluations soient notées. Nous aimerions avoir de l'aide pour répondre aux messages et développer notre communauté d'apprentissage.</p> - -<h2 id="What_do_we_need_help_with">De quoi avons-nous besoin ?</h2> - -<p>Dans le <a href="https://discourse.mozilla.org/c/mdn/learn/250">forum d'apprentissage du MDN</a>, il existe deux principaux types de messages auxquels nous aimerions que vous nous aidiez à répondre :</p> - -<ol> - <li>Questions générales sur le développement web.</li> - <li>Questions spécifiques demandant de l'aide ou une évaluation des tests de compétences et des évaluations qui figurent dans la section Apprendre le développement web de MDN.</li> -</ol> - -<h2 id="How_can_you_benefit">Comment pouvez-vous en profiter ?</h2> - -<ul> - <li>Aider les gens à résoudre leurs problèmes de code est un excellent moyen d'en apprendre davantage sur les technologies web. En recherchant une solution et en rédigeant une réponse à la question de quelqu'un, vous approfondirez votre compréhension du sujet et améliorerez vos compétences.</li> - <li>Au fur et à mesure que vous vous impliquerez dans la communauté MDN, vous apprendrez à connaître le personnel de Mozilla et les autres membres de la communauté, ce qui vous donnera un réseau de contacts précieux pour obtenir de l'aide sur vos propres problèmes et accroître votre visibilité.</li> - <li>Aider à répondre à des questions de codage est en grande partie une récompense en soi, mais cela démontrera également votre expertise dans les technologies web et peut-être même vous aidera dans votre cours, ou dans vos opportunités d'emploi.</li> -</ul> - -<h2 id="What_skills_do_you_need">Quelles sont les compétences dont vous avez besoin ?</h2> - -<ul> - <li>Vous devez avoir une bonne connaissance des technologies web telles que HTML, CSS et JavaScript. Idéalement, vous devez aussi savoir expliquer des sujets techniques et aimer aider les débutants à apprendre à coder.</li> - <li>La langue du forum est l'anglais - vous devriez avoir une maîtrise raisonnable de la langue anglaise, mais il n'est pas nécessaire qu'elle soit parfaite. Des gens du monde entier visitent nos forums, et nous voulons que tous ceux qui nous rendent visite se sentent aussi à l'aise et inclus que possible.</li> -</ul> - -<h2 id="How_to_help">Comment aider</h2> - -<ol> - <li>Tout d'abord, <a href="/fr/docs/MDN/Contribute/Getting_started#step_1_create_an_account_on_mdn">créez-vous un compte MDN</a>, si vous n'en avez pas déjà un. Vous n'avez pas nécessairement besoin de le faire pour contribuer à l'espace d'apprentissage, mais cela vous sera utile à long terme.</li> - <li>Inscrivez-vous également à <a href="https://discourse.mozilla.org/">Mozilla Discourse</a>, si ce n'est pas déjà fait.</li> - <li>Jetez un coup d'œil à la section <a href="/fr/docs/Learn">Apprendre le développement web</a> et acquérez un niveau de familiarité de base avec ce qui s'y trouve, si ce n'est pas déjà fait (voir la section <a href="Structure_of_the_MDN_Learning_Area">Structure de l'espace d'apprentissage MDN</a> ci-dessous pour vous aider).</li> -</ol> - -<h3 id="Once_you_are_set_up">Une fois que vous êtes prêt</h3> - -<ol> - <li>Jetez un coup d'œil au <a href="https://discourse.mozilla.org/c/mdn/learn/250">forum d'apprentissage</a> et voyez s'il y a des messages qui n'ont pas de réponses - c'est le meilleur endroit pour commencer. - <ul> - <li>Conseil : si vous ne trouvez aucune réponse, consultez les autres pages qui ont été récemment mises à jour et voyez si vous pouvez ajouter quelque chose d'utile qui n'a pas déjà été dit.</li> - </ul> - </li> - <li>Si le message auquel vous répondez est une demande d'aide générale, répondez-lui et donnez-lui autant d'aide que vous en avez le temps.</li> - <li>Si le message auquel vous répondez demande une évaluation pour l'une des tâches "tester vos compétences"/"évaluation" : - <ol> - <li>Identifiez l'article/tâche évalué(e) et trouvez le guide de notation qui lui est associé. Vous pouvez tout à fait demander à la personne qui a envoyé le message si elle peut vous donner le lien vers l'évaluation/le test de compétences.</li> - <li>Identifiez le code de la personne - elle devrait vous le donner sous la forme d'un lien CodePen/JSFiddle/JSBin, ou similaire. Si elle ne le fournit pas sous une forme facile à évaluer, il est parfaitement acceptable de lui demander de le mettre dans CodePen, JSFiddle, ou similaire. - <ul> - <li>Un problème courant est celui des personnes qui publient leur code directement dans un message de discourse - discourse rend les éléments HTML et transforme les guillemets en smartquotes, ce qui casse le code. Il est préférable de l'envoyer sous forme d'URL vers une application d'édition de code partageable.</li> - </ul> - </li> - <li>Lisez le code et évaluez-le - <ol> - <li>Est-ce qu'il fonctionne, et vous donne-t-il le résultat qu'il devrait donner ?</li> - <li>Si non, pourquoi ne fonctionne-t-il pas ?</li> - <li>Avez-vous des conseils à donner à la personne pour améliorer le code (plus efficace, meilleure pratique, etc.) ?</li> - </ol> - </li> - <li>Donnez-leur un rapport sur leurs résultats : - <ol> - <li>Certains guides de notation suggèrent un schéma de notation avec des points pour chaque partie de la question, mais vous n'avez pas besoin d'être aussi précis.</li> - <li>Si la personne s'est bien débrouillée, à l'exception de quelques détails, dites-lui ces détails, mais félicitez-la aussi.</li> - <li>Si la personne était sur le point d'atteindre son objectif, mais que son travail n'était pas tout à fait correct, dites-lui qu'elle s'est très bien débrouillée, mais indiquez-lui les corrections à apporter pour que cela fonctionne, et peut-être même un lien vers le guide de notation pour qu'elle puisse voir ce que nous avons fait.</li> - <li>Si la personne est loin d'avoir trouvé une solution, soyez gentil et encourageant et essayez de lui donner quelques indices sur la direction à prendre. Donnez-lui une autre chance d'essayer de faire mieux.</li> - <li>Si vous avez besoin d'aide pour quoi que ce soit, demandez de l'aide dans le salon de discussion <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs</a> sur <a href="https://wiki.mozilla.org/Matrix">Matrix</a>.</li> - </ol> - </li> - </ol> - </li> -</ol> - -<div class="warning"> - <p><strong>Attention :</strong> Avant tout, soyez patient, amical et aimable. N'oubliez pas que la plupart de ces personnes sont des débutants.</p> -</div> - -<h2 id="Structure_of_the_MDN_Learning_Area">Structure de l'espace d'apprentissage MDN</h2> - -<p>Lorsque vous aidez à répondre aux questions liées à la section <a href="/fr/docs/Learn">Apprendre le développement web</a> de MDN, il est bon d'y jeter un coup d'œil et d'acquérir un niveau de familiarité de base avec ce qui s'y trouve.</p> - -<ol> - <li>Examinez la structure de la page en général.</li> - <li>Regardez en particulier les types d'évaluations disponibles, - <ul> - <li>À partir des nombreux articles "testez vos compétences" disponibles (voir par exemple <a href="/fr/docs/Learn/JavaScript/Building_blocks/conditionals#test_your_skills!">/fr/docs/Learn/JavaScript/Building_blocks/conditionals#Test_your_skills!</a>)</li> - <li>Aux évaluations plus approfondies à la fin de certains modules (voir par exemple <a href="/fr/docs/Learn/JavaScript/Building_blocks/Image_gallery">/fr/docs/Learn/JavaScript/Building_blocks/Image_gallery</a>)</li> - </ul> - </li> - <li>Jetez un œil aux dépôts GitHub associés à la zone d'apprentissage (la plupart des fichiers sont disponibles dans <a href="https://github.com/mdn/learning-area/">https://github.com/mdn/learning-area/</a>, certains sont dans <a href="https://github.com/mdn/css-examples/tree/master/learn">https://github.com/mdn/css-examples/tree/master/learn</a>). La plupart des exemples sur lesquels les apprenants voudront de l'aide sont contenus ici.</li> - <li>Chaque évaluation/épreuve de compétence est associée à un guide de notation et à une solution recommandée pour vous aider à évaluer leur travail.</li> - <li>Il existe des modèles qui facilitent la recherche de ces ressources, par exemple : - <ul> - <li>Le guide de notation "testez vos compétences" ci-dessus et les ressources sont disponibles sur <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/conditionals">https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/conditionals</a></li> - <li>Le guide de notation de l'évaluation ci-dessus et les ressources sont disponibles sur <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/gallery">https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/gallery</a></li> - </ul> - </li> -</ol> - -<p>Il vous semblera difficile de naviguer dans tout cela au début, mais vous trouverez cela plus facile avec le temps, à mesure que vous vous familiariserez avec les exercices.</p> +{{MDNSidebar}} + +Nos pages [Apprendre le développement web](/fr/docs/Learn) obtiennent plus d'un million de vues par mois, et ont [des forums actifs](https://discourse.mozilla.org/c/mdn/learn/250) où les utilisateurs vont pour demander une aide générale, ou demander que leurs évaluations soient notées. Nous aimerions avoir de l'aide pour répondre aux messages et développer notre communauté d'apprentissage. + +## De quoi avons-nous besoin ? + +Dans le [forum d'apprentissage du MDN](https://discourse.mozilla.org/c/mdn/learn/250), il existe deux principaux types de messages auxquels nous aimerions que vous nous aidiez à répondre : + +1. Questions générales sur le développement web. +2. Questions spécifiques demandant de l'aide ou une évaluation des tests de compétences et des évaluations qui figurent dans la section Apprendre le développement web de MDN. + +## Comment pouvez-vous en profiter ? + +- Aider les gens à résoudre leurs problèmes de code est un excellent moyen d'en apprendre davantage sur les technologies web. En recherchant une solution et en rédigeant une réponse à la question de quelqu'un, vous approfondirez votre compréhension du sujet et améliorerez vos compétences. +- Au fur et à mesure que vous vous impliquerez dans la communauté MDN, vous apprendrez à connaître le personnel de Mozilla et les autres membres de la communauté, ce qui vous donnera un réseau de contacts précieux pour obtenir de l'aide sur vos propres problèmes et accroître votre visibilité. +- Aider à répondre à des questions de codage est en grande partie une récompense en soi, mais cela démontrera également votre expertise dans les technologies web et peut-être même vous aidera dans votre cours, ou dans vos opportunités d'emploi. + +## Quelles sont les compétences dont vous avez besoin ? + +- Vous devez avoir une bonne connaissance des technologies web telles que HTML, CSS et JavaScript. Idéalement, vous devez aussi savoir expliquer des sujets techniques et aimer aider les débutants à apprendre à coder. +- La langue du forum est l'anglais - vous devriez avoir une maîtrise raisonnable de la langue anglaise, mais il n'est pas nécessaire qu'elle soit parfaite. Des gens du monde entier visitent nos forums, et nous voulons que tous ceux qui nous rendent visite se sentent aussi à l'aise et inclus que possible. + +## Comment aider + +1. Tout d'abord, [créez-vous un compte MDN](/fr/docs/MDN/Contribute/Getting_started#step_1_create_an_account_on_mdn), si vous n'en avez pas déjà un. Vous n'avez pas nécessairement besoin de le faire pour contribuer à l'espace d'apprentissage, mais cela vous sera utile à long terme. +2. Inscrivez-vous également à [Mozilla Discourse](https://discourse.mozilla.org/), si ce n'est pas déjà fait. +3. Jetez un coup d'œil à la section [Apprendre le développement web](/fr/docs/Learn) et acquérez un niveau de familiarité de base avec ce qui s'y trouve, si ce n'est pas déjà fait (voir la section [Structure de l'espace d'apprentissage MDN](Structure_of_the_MDN_Learning_Area) ci-dessous pour vous aider). + +### Une fois que vous êtes prêt + +1. Jetez un coup d'œil au [forum d'apprentissage](https://discourse.mozilla.org/c/mdn/learn/250) et voyez s'il y a des messages qui n'ont pas de réponses - c'est le meilleur endroit pour commencer. + + - Conseil : si vous ne trouvez aucune réponse, consultez les autres pages qui ont été récemment mises à jour et voyez si vous pouvez ajouter quelque chose d'utile qui n'a pas déjà été dit. + +2. Si le message auquel vous répondez est une demande d'aide générale, répondez-lui et donnez-lui autant d'aide que vous en avez le temps. +3. Si le message auquel vous répondez demande une évaluation pour l'une des tâches "tester vos compétences"/"évaluation" : + + 1. Identifiez l'article/tâche évalué(e) et trouvez le guide de notation qui lui est associé. Vous pouvez tout à fait demander à la personne qui a envoyé le message si elle peut vous donner le lien vers l'évaluation/le test de compétences. + 2. Identifiez le code de la personne - elle devrait vous le donner sous la forme d'un lien CodePen/JSFiddle/JSBin, ou similaire. Si elle ne le fournit pas sous une forme facile à évaluer, il est parfaitement acceptable de lui demander de le mettre dans CodePen, JSFiddle, ou similaire. + + - Un problème courant est celui des personnes qui publient leur code directement dans un message de discourse - discourse rend les éléments HTML et transforme les guillemets en smartquotes, ce qui casse le code. Il est préférable de l'envoyer sous forme d'URL vers une application d'édition de code partageable. + + 3. Lisez le code et évaluez-le + + 1. Est-ce qu'il fonctionne, et vous donne-t-il le résultat qu'il devrait donner ? + 2. Si non, pourquoi ne fonctionne-t-il pas ? + 3. Avez-vous des conseils à donner à la personne pour améliorer le code (plus efficace, meilleure pratique, etc.) ? + + 4. Donnez-leur un rapport sur leurs résultats : + + 1. Certains guides de notation suggèrent un schéma de notation avec des points pour chaque partie de la question, mais vous n'avez pas besoin d'être aussi précis. + 2. Si la personne s'est bien débrouillée, à l'exception de quelques détails, dites-lui ces détails, mais félicitez-la aussi. + 3. Si la personne était sur le point d'atteindre son objectif, mais que son travail n'était pas tout à fait correct, dites-lui qu'elle s'est très bien débrouillée, mais indiquez-lui les corrections à apporter pour que cela fonctionne, et peut-être même un lien vers le guide de notation pour qu'elle puisse voir ce que nous avons fait. + 4. Si la personne est loin d'avoir trouvé une solution, soyez gentil et encourageant et essayez de lui donner quelques indices sur la direction à prendre. Donnez-lui une autre chance d'essayer de faire mieux. + 5. Si vous avez besoin d'aide pour quoi que ce soit, demandez de l'aide dans le salon de discussion [MDN Web Docs](https://chat.mozilla.org/#/room/#mdn:mozilla.org) sur [Matrix](https://wiki.mozilla.org/Matrix). + +> **Attention :** Avant tout, soyez patient, amical et aimable. N'oubliez pas que la plupart de ces personnes sont des débutants. + +## Structure de l'espace d'apprentissage MDN + +Lorsque vous aidez à répondre aux questions liées à la section [Apprendre le développement web](/fr/docs/Learn) de MDN, il est bon d'y jeter un coup d'œil et d'acquérir un niveau de familiarité de base avec ce qui s'y trouve. + +1. Examinez la structure de la page en général. +2. Regardez en particulier les types d'évaluations disponibles, + + - À partir des nombreux articles "testez vos compétences" disponibles (voir par exemple [/fr/docs/Learn/JavaScript/Building_blocks/conditionals#Test_your_skills!](/fr/docs/Learn/JavaScript/Building_blocks/conditionals#test_your_skills!)) + - Aux évaluations plus approfondies à la fin de certains modules (voir par exemple [/fr/docs/Learn/JavaScript/Building_blocks/Image_gallery](/fr/docs/Learn/JavaScript/Building_blocks/Image_gallery)) + +3. Jetez un œil aux dépôts GitHub associés à la zone d'apprentissage (la plupart des fichiers sont disponibles dans <https://github.com/mdn/learning-area/>, certains sont dans <https://github.com/mdn/css-examples/tree/master/learn>). La plupart des exemples sur lesquels les apprenants voudront de l'aide sont contenus ici. +4. Chaque évaluation/épreuve de compétence est associée à un guide de notation et à une solution recommandée pour vous aider à évaluer leur travail. +5. Il existe des modèles qui facilitent la recherche de ces ressources, par exemple : + + - Le guide de notation "testez vos compétences" ci-dessus et les ressources sont disponibles sur <https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/conditionals> + - Le guide de notation de l'évaluation ci-dessus et les ressources sont disponibles sur <https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/gallery> + +Il vous semblera difficile de naviguer dans tout cela au début, mais vous trouverez cela plus facile avec le temps, à mesure que vous vous familiariserez avec les exercices. diff --git a/files/fr/mdn/contribute/howto/convert_code_samples_to_be_live/index.md b/files/fr/mdn/contribute/howto/convert_code_samples_to_be_live/index.md index 5575715390..4ef023d508 100644 --- a/files/fr/mdn/contribute/howto/convert_code_samples_to_be_live/index.md +++ b/files/fr/mdn/contribute/howto/convert_code_samples_to_be_live/index.md @@ -4,24 +4,21 @@ slug: MDN/Contribute/Howto/Convert_code_samples_to_be_live translation_of: MDN/Contribute/Howto/Convert_code_samples_to_be_live original_slug: MDN/Contribute/Howto/convertir_code_pour_etre_direct --- -<div>{{MDNSidebar}}</div> -<p>MDN dispose d'un système d'exemples "<a href="/en-US/docs/MDN/Contribute/Editor/Live_samples">live</a>", grâce auxquels le code présent sur une page est exécuté pour afficher les résultats de l'exécution de ce code. Cependant, beaucoup d'articles existants affichent du code sans utiliser ce système, et ont donc besoin d'être convertis.</p> +{{MDNSidebar}} -<p>Les exemples "live", vous permettent de voir à quoi ressemble le résultat d'un exemple, faire une documentation plus dynamique et instructive. Ce guide vous explique comment prendre des exemples existants et leur rajouter la fonctionnalité "live".</p> +MDN dispose d'un système d'exemples "[live](/en-US/docs/MDN/Contribute/Editor/Live_samples)", grâce auxquels le code présent sur une page est exécuté pour afficher les résultats de l'exécution de ce code. Cependant, beaucoup d'articles existants affichent du code sans utiliser ce système, et ont donc besoin d'être convertis. -<h2>Compétences nécessaires pour cette tâche</h2> +Les exemples "live", vous permettent de voir à quoi ressemble le résultat d'un exemple, faire une documentation plus dynamique et instructive. Ce guide vous explique comment prendre des exemples existants et leur rajouter la fonctionnalité "live". -<ul> - <li>Comprendre le HTML, CSS et/ou JavaScript, selon le code implémenté</li> - <li>Savoir utiliser les macros <a href="/en-US/docs/Project:Introduction_to_KumaScript">KumaScript</a> dans les articles du MDN</li> - </ul> +## Compétences nécessaires pour cette tâche -<h2>Quelles étapes pour réaliser cette tâche ?</h2> +- Comprendre le HTML, CSS et/ou JavaScript, selon le code implémenté +- Savoir utiliser les macros [KumaScript](/en-US/docs/Project:Introduction_to_KumaScript) dans les articles du MDN -<ol> - <li>Choisissez un article dans la liste de ceux marqués <a href="/en-US/docs/tag/NeedsLiveSample">NeedsLiveSample</a>, pour lequel le code présenté porte sur des notions qui vous sembles familières.</li> - <li>Convertissez le code pour qu'il soit "live"</li> - <li>Supprimer le code ou l'image qui montrait les sorties et résultats du programme. Votre exemple "live" le remplace désormais.</li> -</ol> +## Quelles étapes pour réaliser cette tâche ? -<p>Pour plus d'information sur la création et l'édition d'exemples "live", voir <a href="/en-US/docs/Project:MDN/Contributing/Editor_guide/Live_samples">Utiliser le système d'exemple "live"</a> (en anglais).</p> +1. Choisissez un article dans la liste de ceux marqués [NeedsLiveSample](/en-US/docs/tag/NeedsLiveSample), pour lequel le code présenté porte sur des notions qui vous sembles familières. +2. Convertissez le code pour qu'il soit "live" +3. Supprimer le code ou l'image qui montrait les sorties et résultats du programme. Votre exemple "live" le remplace désormais. + +Pour plus d'information sur la création et l'édition d'exemples "live", voir [Utiliser le système d'exemple "live"](/en-US/docs/Project:MDN/Contributing/Editor_guide/Live_samples) (en anglais). diff --git a/files/fr/mdn/contribute/howto/create_and_edit_pages/index.md b/files/fr/mdn/contribute/howto/create_and_edit_pages/index.md index 70cb353739..68fc903f39 100644 --- a/files/fr/mdn/contribute/howto/create_and_edit_pages/index.md +++ b/files/fr/mdn/contribute/howto/create_and_edit_pages/index.md @@ -1,44 +1,47 @@ --- title: Créer et modifier des pages slug: MDN/Contribute/Howto/Create_and_edit_pages -translation_of: 'MDN/Contribute/Howto/Create_and_edit_pages' +translation_of: MDN/Contribute/Howto/Create_and_edit_pages --- -<div>{{MDNSidebar}}</div> +{{MDNSidebar}} -<p>Cet article est destiné à présenter aux personnes souhaitant contribuer à MDN le processus de modification de pages existantes et de création de nouvelles pages.</p> +Cet article est destiné à présenter aux personnes souhaitant contribuer à MDN le processus de modification de pages existantes et de création de nouvelles pages. -<div class="note"> - <p><strong>Note :</strong> Le contenu de MDN s'organise au sein de deux dépôts Git : <a href="https://github.com/mdn/content"><code>mdn/content</code></a> avec le contenu en anglais et <a href="https://github.com/mdn/translated-content"><code>mdn/translated-content</code></a> avec le contenu traduit (y compris en français). C'est le dépôt <code>mdn/content</code> qui constitue la référence. Si vous souhaitez créer une page en français, celle-ci devra au préalable avoir été créée en anglais.</p> -</div> -<h2 id="editing_an_existing_page">Modifier une page existante</h2> +> **Note :** Le contenu de MDN s'organise au sein de deux dépôts Git : [`mdn/content`](https://github.com/mdn/content) avec le contenu en anglais et [`mdn/translated-content`](https://github.com/mdn/translated-content) avec le contenu traduit (y compris en français). C'est le dépôt `mdn/content` qui constitue la référence. Si vous souhaitez créer une page en français, celle-ci devra au préalable avoir été créée en anglais. -<p>Pour modifier une page, vous devez trouver la page source :</p> -<ul> - <li>Si elle est en anglais : <a href="https://github.com/mdn/content">sur notre dépôt <i lang="en">content</i></a></li> - <li>Si elle est en français ou dans une autre langue : <a href="https://github.com/mdn/translated-content">sur notre dépôt <i lang="en">translated-content</i></a></li> -</ul>. -<p>La façon la plus rapide de la trouver est d'aller sur la page que vous souhaitez modifier, puis de vous rendre en bas de cette page et enfin de cliquer sur le lien <i lang="en">« Source on GitHub »</i>.</p> +## Modifier une page existante -<p>Une fois que vous avez trouvé la source à modifier, rendez-vous sur notre fichier <i lang="en">README</i> et parcourez notre <a href="https://github.com/mdn/translated-content/#making-contributions">guide sur la contribution (en anglais)</a>. Vous pouvez également consulter <a href="https://tech.mozfr.org/post/2021/03/16/MDN-sur-GitHub-comment-contribuer">ce billet en français</a> pour savoir comment contribuer.</p> +Pour modifier une page, vous devez trouver la page source : -<h3 id="preview_changes">Prévisualiser vos modifications</h3> +- Si elle est en anglais : [sur notre dépôt <i lang="en">content</i>](https://github.com/mdn/content) -<p>SI vous modifiez la page en local, vous pouvez voir à quoi ressembleront vos modifications en allant sur le dossier du dépôt nommé <i lang="en">content</i>, en exécutant la commande CLI <code>yarn start</code>, puis en vous rendant à l'URL <code>localhost:5000</code> dans votre navigateur, et enfin en retrouvant la page sur laquelle vous travaillez. Pour la trouver plus facilement, utilisez la boîte de recherche. La page que vous prévisualisez sera rafraîchie automatiquement au fur et à mesure que vous modifiez son code source.</p> + <i lang="en">content</i> -<h3 id="attach_files">Ajouter des pièces jointes</h3> +- Si elle est en français ou dans une autre langue : [sur notre dépôt <i lang="en">translated-content</i>](https://github.com/mdn/translated-content) -<p>Pour ajouter un fichier en pièce jointe à votre article, vous avez simplement besoin de l'inclure dans le même répertoire du fichier <code>index.html</code> de votre article, puis de l'ajouter dans votre page, typiquement à l'aide d'un élément <code><a></code>.</p> + <i lang="en">translated-content</i> -<h2 id="creating_a_new_page">Créer une nouvelle page</h2> +. -<p>Pour créer une nouvelle page, consultez les instructions fournies sur la <a href="https://github.com/mdn/content#adding-a-new-document">documentation concernant l'ajout de nouveaux documents (en anglais)</a>.</p> +La façon la plus rapide de la trouver est d'aller sur la page que vous souhaitez modifier, puis de vous rendre en bas de cette page et enfin de cliquer sur le lien <i lang="en">« Source on GitHub »</i>. -<div class="warning"> - <p><strong>Attention :</strong> Pour créer une page en français (ou dans une autre langue), celle-ci devra préalablement exister/avoir été créée en anglais.</p> -</div> -<h2 id="see_also">Voir aussi</h2> +Une fois que vous avez trouvé la source à modifier, rendez-vous sur notre fichier <i lang="en">README</i> et parcourez notre [guide sur la contribution (en anglais)](https://github.com/mdn/translated-content/#making-contributions). Vous pouvez également consulter [ce billet en français](https://tech.mozfr.org/post/2021/03/16/MDN-sur-GitHub-comment-contribuer) pour savoir comment contribuer. -<ul> - <li><a href="/fr/docs/MDN/Guidelines/Writing_style_guide">Guide stylistique de MDN</a></li> - <li><a href="https://tech.mozfr.org/post/2021/03/16/MDN-sur-GitHub-comment-contribuer">MDN sur GitHub : comment contribuer ?</a></li> -</ul> +### Prévisualiser vos modifications + +SI vous modifiez la page en local, vous pouvez voir à quoi ressembleront vos modifications en allant sur le dossier du dépôt nommé <i lang="en">content</i>, en exécutant la commande CLI `yarn start`, puis en vous rendant à l'URL `localhost:5000` dans votre navigateur, et enfin en retrouvant la page sur laquelle vous travaillez. Pour la trouver plus facilement, utilisez la boîte de recherche. La page que vous prévisualisez sera rafraîchie automatiquement au fur et à mesure que vous modifiez son code source. + +### Ajouter des pièces jointes + +Pour ajouter un fichier en pièce jointe à votre article, vous avez simplement besoin de l'inclure dans le même répertoire du fichier `index.html` de votre article, puis de l'ajouter dans votre page, typiquement à l'aide d'un élément `<a>`. + +## Créer une nouvelle page + +Pour créer une nouvelle page, consultez les instructions fournies sur la [documentation concernant l'ajout de nouveaux documents (en anglais)](https://github.com/mdn/content#adding-a-new-document). + +> **Attention :** Pour créer une page en français (ou dans une autre langue), celle-ci devra préalablement exister/avoir été créée en anglais. + +## Voir aussi + +- [Guide stylistique de MDN](/fr/docs/MDN/Guidelines/Writing_style_guide) +- [MDN sur GitHub : comment contribuer ?](https://tech.mozfr.org/post/2021/03/16/MDN-sur-GitHub-comment-contribuer) diff --git a/files/fr/mdn/contribute/howto/index.md b/files/fr/mdn/contribute/howto/index.md index 59b33bbba6..77a41256ec 100644 --- a/files/fr/mdn/contribute/howto/index.md +++ b/files/fr/mdn/contribute/howto/index.md @@ -6,8 +6,8 @@ tags: - MDN Meta translation_of: MDN/Contribute/Howto --- -<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/fr/docs/MDN")}}</div> +{{MDNSidebar}}{{IncludeSubnav("/fr/docs/MDN")}} -<p>Ces articles fournissent des guides pas-à-pas pour la réalisation d'objectifs spécifiques lorsque vous contribuez sur MDN.</p> +Ces articles fournissent des guides pas-à-pas pour la réalisation d'objectifs spécifiques lorsque vous contribuez sur MDN. -<p>{{LandingPageListSubpages}}</p> +{{LandingPageListSubpages}} diff --git a/files/fr/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.md b/files/fr/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.md index b70818e6d9..d518794b83 100644 --- a/files/fr/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.md +++ b/files/fr/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.md @@ -8,105 +8,72 @@ tags: - MDN Méta(2) translation_of: MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary --- -<div>{{MDNSidebar}}</div> +{{MDNSidebar}} -<p>Le <a href="/fr/docs/Glossary">glossaire</a> MDN est le lieu privilégié où nous définissons la terminologie, le jargon et les abréviations utilisés dans la documentation et les codes. Contribuer à ce glossaire est une moyen simple de rendre le Web plus compréhensible pour n'importe qui. Nul besoin de posséder un haut niveau de compétence pour écrire des entrées du glossaire, elles doivent rester simples et évidentes.</p> +Le [glossaire](/fr/docs/Glossary) MDN est le lieu privilégié où nous définissons la terminologie, le jargon et les abréviations utilisés dans la documentation et les codes. Contribuer à ce glossaire est une moyen simple de rendre le Web plus compréhensible pour n'importe qui. Nul besoin de posséder un haut niveau de compétence pour écrire des entrées du glossaire, elles doivent rester simples et évidentes. -<h2 id="Comment_créer_une_entrée">Comment créer une entrée</h2> +## Comment créer une entrée -<p>Pour trouver des sujets ayant besoin d'entrées de glossaire, consultez la <a href="/fr/docs/Glossary#Contribute_to_the_glossary">liste des termes à documenter </a>à la fin de la page concernant le sujet en question ; cliquez n'importe lequel de ses liens pour commencer une nouvelle page de glossaire, puis suivez les étapes ci-dessous.</p> +Pour trouver des sujets ayant besoin d'entrées de glossaire, consultez la [liste des termes à documenter ](/fr/docs/Glossary#Contribute_to_the_glossary)à la fin de la page concernant le sujet en question ; cliquez n'importe lequel de ses liens pour commencer une nouvelle page de glossaire, puis suivez les étapes ci-dessous. -<h3 id="Étape_1_écrire_un_résumé">Étape 1: écrire un résumé</h3> +### Étape 1: écrire un résumé -<p>Le premier paragraphe d'une page de glossaire consiste en une description courte et simple du terme — de préférence n'exédant pas les deux lignes. Assurez-vous que n'importe qui lisant cette description puisse immédiatement saisir le sens du terme concerné.</p> +Le premier paragraphe d'une page de glossaire consiste en une description courte et simple du terme — de préférence n'exédant pas les deux lignes. Assurez-vous que n'importe qui lisant cette description puisse immédiatement saisir le sens du terme concerné. -<div class="note"> -<p><strong>Note :</strong> ne copiez-collez pas la définition d'un autre endroit (spécialement pas de Wikipédia, puisque leurs licences sont réduites et donc incompatiles avec celles de MDN).</p> -</div> +> **Note :** ne copiez-collez pas la définition d'un autre endroit (spécialement pas de Wikipédia, puisque leurs licences sont réduites et donc incompatiles avec celles de MDN). -<div class="note"> -<p><strong>Note :</strong> il est important également de s'assurer que le contenu est simple et compréhensible. Cela vaut la peine de passer un peu de temps dessus plutôt que de trahir le sens. Ce glossaire doit contenir du contenu nouveau et utile, pas répéter ce que l'on peut trouver partout ailleurs.</p> -</div> +> **Note :** il est important également de s'assurer que le contenu est simple et compréhensible. Cela vaut la peine de passer un peu de temps dessus plutôt que de trahir le sens. Ce glossaire doit contenir du contenu nouveau et utile, pas répéter ce que l'on peut trouver partout ailleurs. -<p>Les liens conduisant à cette entrée de glossaire feront apparaitre ce résumé au survol de la souris, de telle sorte que le lecteur pourra obtenir une définition sans avoir à naviguer jusqu'à la page concernée (voyez ci-dessous comment insérer un lien vers une entrée de glossaire avec la macro \{{Glossary}}).</p> +Les liens conduisant à cette entrée de glossaire feront apparaitre ce résumé au survol de la souris, de telle sorte que le lecteur pourra obtenir une définition sans avoir à naviguer jusqu'à la page concernée (voyez ci-dessous comment insérer un lien vers une entrée de glossaire avec la macro \\{{Glossary}}). -<p>Si vous y tenez, vous pouvez ajouter quelques paragraphes supplémentaires, mais prenez garde de ne pas vous retrouver à écrire tout un article. Écrire un article complet est une bonne chose, mais ne le placez pas dans le glossaire. Si vous ne savez pas où placer cet article, n'hésitez pas à <a href="/fr/docs/MDN/Community#Join_our_mailing_lists">prendre la parole pour en parler ici</a>.</p> +Si vous y tenez, vous pouvez ajouter quelques paragraphes supplémentaires, mais prenez garde de ne pas vous retrouver à écrire tout un article. Écrire un article complet est une bonne chose, mais ne le placez pas dans le glossaire. Si vous ne savez pas où placer cet article, n'hésitez pas à [prendre la parole pour en parler ici](/fr/docs/MDN/Community#Join_our_mailing_lists). -<h3 id="Étape_2_offrir_d'autres_sources">Étape 2 : offrir d'autres sources</h3> +### Étape 2 : offrir d'autres sources -<p>Pour terminer, une entrée de glossaire devrait toujours s'achever sur une section « En savoir plus ». Cette section devrait contenir des liens qui aideront le lecteur à aller plus loin : découvrir le sujet plus en détail, apprendre à utiliser la technologie en question, etc.</p> +Pour terminer, une entrée de glossaire devrait toujours s'achever sur une section « En savoir plus ». Cette section devrait contenir des liens qui aideront le lecteur à aller plus loin : découvrir le sujet plus en détail, apprendre à utiliser la technologie en question, etc. -<p>Il est recommandé de trier ces liens en au moins trois groupes :</p> +Il est recommandé de trier ces liens en au moins trois groupes : -<dl> - <dt>Connaissance générale</dt> - <dd>Liens qui fournissent plus d'information générale ; par exemple, un lien vers <a href="http://fr.wikipedia.org/">Wikipédia</a> est un excellent début.</dd> - <dt>Références techniques</dt> - <dd>Liens vers une information technique plus avancée, sur MDN par exemple.</dd> - <dt>Apprentissage et tutoriels</dt> - <dd>Liens vers des tutoriels, des exercices ou tout autre matériel susceptible d'apprendre au lecteur à maitriser les technologies liées au terme défini.</dd> -</dl> +- Connaissance générale + - : Liens qui fournissent plus d'information générale ; par exemple, un lien vers [Wikipédia](http://fr.wikipedia.org/) est un excellent début. +- Références techniques + - : Liens vers une information technique plus avancée, sur MDN par exemple. +- Apprentissage et tutoriels + - : Liens vers des tutoriels, des exercices ou tout autre matériel susceptible d'apprendre au lecteur à maitriser les technologies liées au terme défini. -<h2 id="Termes_suggérés">Termes suggérés</h2> +## Termes suggérés -<p>Vous désirez contribuer mais vous ignorez quel terme doit être défini ? <a href="https://developer.mozilla.org/fr/docs/Glossary#Contribute_to_the_glossary">Voici une liste</a> de suggestions. Cliquez un mot et lancez-vous !</p> +Vous désirez contribuer mais vous ignorez quel terme doit être défini ? [Voici une liste](https://developer.mozilla.org/fr/docs/Glossary#Contribute_to_the_glossary) de suggestions. Cliquez un mot et lancez-vous ! -<h2 id="Gérer_les_ambiguïtés">Gérer les ambiguïtés</h2> +## Gérer les ambiguïtés -<p>Parfois, en fonction du contexte, un même terme peut connaitre plusieurs définitions. Pour traiter ces ambiguïtés, vous devez suivre ce guide :</p> +Parfois, en fonction du contexte, un même terme peut connaitre plusieurs définitions. Pour traiter ces ambiguïtés, vous devez suivre ce guide : -<ul> - <li>La page principale du terme doit être une page de « désambiguïsation » contenant la macro {{TemplateLink("GlossaryDisambiguation")}}.</li> - <li>Des sous-pages définissent ensuite le terme dans chacun de ses contextes propres.</li> -</ul> +- La page principale du terme doit être une page de « désambiguïsation » contenant la macro {{TemplateLink("GlossaryDisambiguation")}}. +- Des sous-pages définissent ensuite le terme dans chacun de ses contextes propres. -<p>Illustrons cela par un exemple. Le terme <em>signature</em> peut avoir différentes significations dans au moins trois contextes différents : la <em>sécurité</em>, les <em>fonctions</em> et les <em>mèls</em>.</p> +Illustrons cela par un exemple. Le terme _signature_ peut avoir différentes significations dans au moins trois contextes différents : la _sécurité_, les _fonctions_ et les _mèls_. -<ol> - <li>La page <a href="/fr/docs/Glossary/Signature">Glossaire/Signature</a> est la page de « désambiguïsation » avec la macro {{TemplateLink("GlossaryDisambiguation")}} macro.</li> - <li>La sous-page <a href="/fr/docs/Glossary/Signature/Security">Glossaire/Signature/Sécurité</a> est la page définissant le terme dans le contexte de la sécurité informatique.</li> - <li>La sous-page <a href="/fr/docs/Glossary/Signature/Function">Glossaire/Signature/Fonction</a> est la page définissant les <em>signatures de fonction</em>.</li> - <li>La sous-page <a href="/en-US/docs/Glossary/Signature/Email">Glossaire/Signature/Mèl</a> est la page définissant les signatures de mèl.</li> -</ol> +1. La page [Glossaire/Signature](/fr/docs/Glossary/Signature) est la page de « désambiguïsation » avec la macro {{TemplateLink("GlossaryDisambiguation")}} macro. +2. La sous-page [Glossaire/Signature/Sécurité](/fr/docs/Glossary/Signature/Security) est la page définissant le terme dans le contexte de la sécurité informatique. +3. La sous-page [Glossaire/Signature/Fonction](/fr/docs/Glossary/Signature/Function) est la page définissant les _signatures de fonction_. +4. La sous-page [Glossaire/Signature/Mèl](/en-US/docs/Glossary/Signature/Email) est la page définissant les signatures de mèl. -<h2 id="Utiliser_la_macro_Glossary">Utiliser la macro \{{Glossary}}</h2> +## Utiliser la macro \\{{Glossary}} -<p>Le glossaire devient beaucoup plus utile lorsque le lecteur peut atteindre les définitions depuis un autre document sans avoir à naviguer hors de ce document. C'est la raison pour laquelle nous vous incitons à créer des liens vers le glossaire dès que vous le pouvez, en utilisant la macro {{TemplateLink("Glossary")}} :</p> +Le glossaire devient beaucoup plus utile lorsque le lecteur peut atteindre les définitions depuis un autre document sans avoir à naviguer hors de ce document. C'est la raison pour laquelle nous vous incitons à créer des liens vers le glossaire dès que vous le pouvez, en utilisant la macro {{TemplateLink("Glossary")}} : -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Macro</th> - <th scope="col">Result</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <td>\{{Glossary("browser")}}</td> - <td>{{Glossary("browser")}}</td> - <td>Quand un terme correspond à un terme à définir, utilisez simplement la macro telle quelle (notez qu'elle est sensible à la casse — minuscule/majuscule)</td> - </tr> - <tr> - <td>\{{Glossary("browser", "Web browser")}}</td> - <td>{{Glossary("browser","Web browser")}}</td> - <td>Fournissez en deuxième argument un texte alternatif à afficher.</td> - </tr> - <tr> - <td>\{{Glossary("browser", "Web browser", 1)}}</td> - <td>{{Glossary("browser","Web browser",1)}}</td> - <td>Optionnellement, entrez le chiffre<code> 1</code> comme troisième argument pour afficher le lien de façon classique plutôt que comme une mise en exergue subtile.</td> - </tr> - </tbody> -</table> +| Macro | Result | Note | +| ---------------------------------------------------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | +| \\{{Glossary("browser")}} | {{Glossary("browser")}} | Quand un terme correspond à un terme à définir, utilisez simplement la macro telle quelle (notez qu'elle est sensible à la casse — minuscule/majuscule) | +| \\{{Glossary("browser", "Web browser")}} | {{Glossary("browser","Web browser")}} | Fournissez en deuxième argument un texte alternatif à afficher. | +| \\{{Glossary("browser", "Web browser", 1)}} | {{Glossary("browser","Web browser",1)}} | Optionnellement, entrez le chiffre` 1` comme troisième argument pour afficher le lien de façon classique plutôt que comme une mise en exergue subtile. | -<p>Les liens créés avec la macro \{{Glossary}} affichent toujours un texte au survol de la souris, qui contient le résumé de l'entrée du glossaire (cf. ci-dessus).</p> +Les liens créés avec la macro \\{{Glossary}} affichent toujours un texte au survol de la souris, qui contient le résumé de l'entrée du glossaire (cf. ci-dessus). -<h3 id="Conventions">Conventions</h3> +### Conventions -<p>Dans la plupart des cas, sur MDN, l'usage de la macro est sûr. Il y a cependant quelques exceptions que vous devez aborder avec précaution :</p> +Dans la plupart des cas, sur MDN, l'usage de la macro est sûr. Il y a cependant quelques exceptions que vous devez aborder avec précaution : -<ul> - <li>Si un terme est déjà lié à une autre partie de MDN, n'y touchez pas et n'utilisez pas la macro \{{Glossary}}.</li> - <li>À l'intérieur d'une même section d'article, n'utilisez la macro \{{Glossary}} qu'une seule fois pour le même terme (<em>astuce : une section commence toujours par un titre</em>).</li> -</ul> +- Si un terme est déjà lié à une autre partie de MDN, n'y touchez pas et n'utilisez pas la macro \\{{Glossary}}. +- À l'intérieur d'une même section d'article, n'utilisez la macro \\{{Glossary}} qu'une seule fois pour le même terme (_astuce : une section commence toujours par un titre_). diff --git a/files/fr/mdn/contribute/index.md b/files/fr/mdn/contribute/index.md index f72eae7a86..a5ebdbe3c1 100644 --- a/files/fr/mdn/contribute/index.md +++ b/files/fr/mdn/contribute/index.md @@ -7,23 +7,21 @@ tags: - MDN Meta translation_of: MDN/Contribute --- -<div>{{MDNSidebar}}</div> +{{MDNSidebar}} -<p>MDN Web Docs a besoin de votre aide ! Nous avons un grand nombre de fautes de frappe à corriger, d'exemples à rédiger, de bogues à résoudre, de personnes à qui parler, et bien d'autres choses encore, et ce nombre ne cesse d'augmenter à mesure que les gens commencent à utiliser le site. Cette page présente ce que vous pouvez faire pour nous aider.</p> +MDN Web Docs a besoin de votre aide ! Nous avons un grand nombre de fautes de frappe à corriger, d'exemples à rédiger, de bogues à résoudre, de personnes à qui parler, et bien d'autres choses encore, et ce nombre ne cesse d'augmenter à mesure que les gens commencent à utiliser le site. Cette page présente ce que vous pouvez faire pour nous aider. -<div class="note"> - <p><strong>Note :</strong> Si vous n'avez jamais contribué à MDN auparavant, le guide <a href="/fr/docs/MDN/Contribute/Getting_started">Pour commencer</a> explique le processus en quatre étapes simples. Bonne nouvelle, vous en êtes déjà à l'étape 3 : « Découvrir comment vous pouvez aider » !</p> -</div> +> **Note :** Si vous n'avez jamais contribué à MDN auparavant, le guide [Pour commencer](/fr/docs/MDN/Contribute/Getting_started) explique le processus en quatre étapes simples. Bonne nouvelle, vous en êtes déjà à l'étape 3 : « Découvrir comment vous pouvez aider » ! -<h2 id="What_can_I_do_to_help">Que puis-je faire pour aider ?</h2> +## Que puis-je faire pour aider ? -<p>Il existe plusieurs façons de contribuer à MDN, en fonction de vos compétences et de vos intérêts. Chaque tâche est accompagnée d'une brève description et d'une durée approximative.</p> +Il existe plusieurs façons de contribuer à MDN, en fonction de vos compétences et de vos intérêts. Chaque tâche est accompagnée d'une brève description et d'une durée approximative. -<p>Si vous n'êtes pas sûr de ce que vous devez faire, vous êtes toujours invité à <a href="/fr/docs/MDN/Contribute/Getting_started#step_4_ask_for_help">demander de l'aide</a>.</p> +Si vous n'êtes pas sûr de ce que vous devez faire, vous êtes toujours invité à [demander de l'aide](/fr/docs/MDN/Contribute/Getting_started#step_4_ask_for_help). -<h3 id="Primary_contribution_types">Principaux types de contributions</h3> +### Principaux types de contributions -<p>Les liens de cette section mènent à des guides détaillés expliquant comment effectuer une tâche de contribution particulière pour laquelle nous sommes très intéressés par l'aide de la communauté, soit parce qu'il s'agit d'une fonction critique, soit parce qu'elle est associée à un important arriéré. Veuillez envisager d'aider à réaliser ces tâches avant d'envisager de contribuer d'une autre manière.</p> +Les liens de cette section mènent à des guides détaillés expliquant comment effectuer une tâche de contribution particulière pour laquelle nous sommes très intéressés par l'aide de la communauté, soit parce qu'il s'agit d'une fonction critique, soit parce qu'elle est associée à un important arriéré. Veuillez envisager d'aider à réaliser ces tâches avant d'envisager de contribuer d'une autre manière. <table class="standard-table"> <thead> @@ -35,78 +33,138 @@ translation_of: MDN/Contribute </thead> <tbody> <tr> - <td><a href="/fr/docs/MDN/Contribute/Fixing_MDN_content_bugs">Correction des bogues de contenu MDN</a></td> - <td>Notre dépôt <a href="https://github.com/mdn/translated-content/issues">mdn/translated-content</a> est l'endroit où les gens soumettent des problèmes pour signaler les problèmes rencontrés avec les docs MDN (vous trouverez également des bogues à corriger sur l'ancien dépôt <a href="https://github.com/mdn/sprints/">sprints</a>, mais nous allons le fermer à terme). Nous recevons beaucoup de bugs de contenu, et toute aide que vous pouvez apporter pour les corriger serait très appréciée.</td> + <td> + <a href="/fr/docs/MDN/Contribute/Fixing_MDN_content_bugs" + >Correction des bogues de contenu MDN</a + > + </td> + <td> + Notre dépôt + <a href="https://github.com/mdn/translated-content/issues" + >mdn/translated-content</a + > + est l'endroit où les gens soumettent des problèmes pour signaler les + problèmes rencontrés avec les docs MDN (vous trouverez également des + bogues à corriger sur l'ancien dépôt + <a href="https://github.com/mdn/sprints/">sprints</a>, mais nous allons + le fermer à terme). Nous recevons beaucoup de bugs de contenu, et toute + aide que vous pouvez apporter pour les corriger serait très appréciée. + </td> <td> <ul> - <li>Connaissance des technologies web que vous choisissez d'utiliser (par exemple, JavaScript, CSS).</li> - <li>Une compréhension raisonnable de la langue anglaise (ne vous inquiétez pas si votre anglais n'est pas parfait, nous pouvons vous aider).</li> + <li> + Connaissance des technologies web que vous choisissez d'utiliser + (par exemple, JavaScript, CSS). + </li> + <li> + Une compréhension raisonnable de la langue anglaise (ne vous + inquiétez pas si votre anglais n'est pas parfait, nous pouvons vous + aider). + </li> </ul> </td> </tr> <tr> - <td><a href="https://github.com/mdn/translated-content/blob/main/README.md#reviewing-and-issue-queue">Révision des éditions du MDN</a></td> - <td>Les gens soumettent des demandes de compilation sur notre <a href="https://github.com/mdn/translated-content">dépôt de contenu</a> tout le temps pour mettre à jour le contenu du MDN, et nous avons besoin d'aide pour les réviser. Rendez-vous sur notre page <a href="https://github.com/mdn/translated-content/blob/main/README.md#reviewing-and-issue-queue">REVIEWING.md</a> pour découvrir comment fonctionne le processus de révision et comment vous pouvez y participer.</td> + <td> + <a + href="https://github.com/mdn/translated-content/blob/main/README.md#reviewing-and-issue-queue" + >Révision des éditions du MDN</a + > + </td> + <td> + Les gens soumettent des demandes de compilation sur notre + <a href="https://github.com/mdn/translated-content">dépôt de contenu</a> + tout le temps pour mettre à jour le contenu du MDN, et nous avons besoin + d'aide pour les réviser. Rendez-vous sur notre page + <a + href="https://github.com/mdn/translated-content/blob/main/README.md#reviewing-and-issue-queue" + >REVIEWING.md</a + > + pour découvrir comment fonctionne le processus de révision et comment + vous pouvez y participer. + </td> <td> <ul> - <li>Connaissance des technologies web que vous choisissez d'utiliser (par exemple, JavaScript, CSS).</li> - <li>Une compréhension raisonnable de la langue anglaise (ne vous inquiétez pas si votre anglais n'est pas parfait, nous pouvons vous aider).</li> + <li> + Connaissance des technologies web que vous choisissez d'utiliser + (par exemple, JavaScript, CSS). + </li> + <li> + Une compréhension raisonnable de la langue anglaise (ne vous + inquiétez pas si votre anglais n'est pas parfait, nous pouvons vous + aider). + </li> </ul> </td> </tr> <tr> - <td><a href="/fr/docs/MDN/Contribute/Help_beginners">Aider les débutants à apprendre sur MDN</a></td> - <td>Nos pages <a href="/fr/docs/Learn">Apprendre le développement web</a> obtiennent plus d'un million de vues par mois et disposent de <a href="https://discourse.mozilla.org/c/mdn/learn/250">forums actifs</a> où les gens se rendent pour demander une aide générale ou demander que leurs évaluations soient notées. Nous aimerions avoir de l'aide pour répondre aux messages et développer notre communauté d'apprentissage.</td> + <td> + <a href="/fr/docs/MDN/Contribute/Help_beginners" + >Aider les débutants à apprendre sur MDN</a + > + </td> + <td> + Nos pages + <a href="/fr/docs/Learn">Apprendre le développement web</a> obtiennent + plus d'un million de vues par mois et disposent de + <a href="https://discourse.mozilla.org/c/mdn/learn/250" + >forums actifs</a + > + où les gens se rendent pour demander une aide générale ou demander que + leurs évaluations soient notées. Nous aimerions avoir de l'aide pour + répondre aux messages et développer notre communauté d'apprentissage. + </td> <td> <ul> - <li>Connaissance des technologies web que vous choisissez d'utiliser (par exemple, JavaScript, CSS).</li> - <li>Enthousiasme pour expliquer les sujets techniques et aider les débutants à apprendre à coder.</li> - <li>Maîtrise raisonnable de la langue anglaise ; il n'est pas nécessaire qu'elle soit parfaite.</li> + <li> + Connaissance des technologies web que vous choisissez d'utiliser + (par exemple, JavaScript, CSS). + </li> + <li> + Enthousiasme pour expliquer les sujets techniques et aider les + débutants à apprendre à coder. + </li> + <li> + Maîtrise raisonnable de la langue anglaise ; il n'est pas nécessaire + qu'elle soit parfaite. + </li> </ul> </td> </tr> </tbody> </table> -<p>Nous ajouterons d'autres tâches ici au fil du temps.</p> +Nous ajouterons d'autres tâches ici au fil du temps. -<h4 id="priority_ratings">Notation des priorités</h4> +#### Notation des priorités -<p>Vous pouvez également consulter les classements de priorité pour vous donner une idée du travail le plus important à réaliser - nous avons commencé à donner aux problèmes de bogues de contenu les étiquettes P0, P1, P2, P3 et P4 pour indiquer leur importance, les chiffres les plus bas étant plus importants que les chiffres les plus élevés.</p> +Vous pouvez également consulter les classements de priorité pour vous donner une idée du travail le plus important à réaliser - nous avons commencé à donner aux problèmes de bogues de contenu les étiquettes P0, P1, P2, P3 et P4 pour indiquer leur importance, les chiffres les plus bas étant plus importants que les chiffres les plus élevés. -<p>Ils sont déterminés lors du processus régulier de triage des bogues de MDN, sur la base de la <a href="/fr/docs/MDN/Contribute/Documentation_priorities">liste des priorités de la documentation MDN</a>.</p> +Ils sont déterminés lors du processus régulier de triage des bogues de MDN, sur la base de la [liste des priorités de la documentation MDN](/fr/docs/MDN/Contribute/Documentation_priorities). -<h3 id="Other_task_types">Autres types de tâches</h3> +### Autres types de tâches -<p>Si nos principales priorités énumérées ci-dessus ne vous intéressent pas, vous trouverez ci-dessous un certain nombre d'autres types de tâches plus générales dans lesquelles vous pourrez vous impliquer, réparties par type de compétences.</p> +Si nos principales priorités énumérées ci-dessus ne vous intéressent pas, vous trouverez ci-dessous un certain nombre d'autres types de tâches plus générales dans lesquelles vous pourrez vous impliquer, réparties par type de compétences. -<p>Si vous êtes plus intéressé par les mots, vous pouvez faire ce qui suit :</p> +Si vous êtes plus intéressé par les mots, vous pouvez faire ce qui suit : -<ul> - <li><a href="/fr/docs/MDN/Contribute/Howto/Create_and_edit_pages#editing_an_existing_page">Mettre à jour un article existant avec de nouvelles informations</a> (5 minutes-1 heure)</li> - <li><a href="/fr/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Rédiger une nouvelle entrée dans le glossaire</a> (15 minutes-1 heure)</li> -</ul> +- [Mettre à jour un article existant avec de nouvelles informations](/fr/docs/MDN/Contribute/Howto/Create_and_edit_pages#editing_an_existing_page) (5 minutes-1 heure) +- [Rédiger une nouvelle entrée dans le glossaire](/fr/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary) (15 minutes-1 heure) -<p>Si vous êtes plus intéressé par le code, vous pouvez vous essayer à ce qui suit :</p> +Si vous êtes plus intéressé par le code, vous pouvez vous essayer à ce qui suit : -<ul> - <li><a href="/fr/docs/MDN/Contribute/Howto/Convert_code_samples_to_be_live">Convertir les échantillons de code pour qu'ils soient « en direct »</a> (30 minutes)</li> - <li><a href="https://github.com/mdn/yari">Envoyez un correctif de code à la base de code de Yari</a> (1 heure)</li> - <li><a href="https://github.com/mdn/interactive-examples/blob/master/CONTRIBUTING.md">Écrire un exemple interactif</a> (1 heure)</li> -</ul> +- [Convertir les échantillons de code pour qu'ils soient « en direct »](/fr/docs/MDN/Contribute/Howto/Convert_code_samples_to_be_live) (30 minutes) +- [Envoyez un correctif de code à la base de code de Yari](https://github.com/mdn/yari) (1 heure) +- [Écrire un exemple interactif](https://github.com/mdn/interactive-examples/blob/master/CONTRIBUTING.md) (1 heure) -<p>Si vous vous intéressez aux mots <em>et</em> au code, vous pourriez vous essayer à ce qui suit :</p> +Si vous vous intéressez aux mots _et_ au code, vous pourriez vous essayer à ce qui suit : -<ul> - <li><a href="/fr/docs/MDN/Contribute/Howto/Write_an_API_reference">Rédiger ou mettre à jour une référence API</a> (30 minutes à 2 heures, ou plus)</li> - <li><a href="https://github.com/mdn/content#adding-a-new-document">Rédiger un nouvel article sur un sujet qui vous est familier</a> (1 heure ou plus)</li> - <li><a href="/fr/docs/MDN/Structures/Compatibility_tables">Ajouter ou mettre à jour les données de compatibilité des navigateurs sur une page de référence</a> (30 minutes à 1 heure)</li> -</ul> +- [Rédiger ou mettre à jour une référence API](/fr/docs/MDN/Contribute/Howto/Write_an_API_reference) (30 minutes à 2 heures, ou plus) +- [Rédiger un nouvel article sur un sujet qui vous est familier](https://github.com/mdn/content#adding-a-new-document) (1 heure ou plus) +- [Ajouter ou mettre à jour les données de compatibilité des navigateurs sur une page de référence](/fr/docs/MDN/Structures/Compatibility_tables) (30 minutes à 1 heure) -<div class="note"> - <p><strong>Note :</strong> Si vous avez trouvé quelque chose d'incorrect sur MDN mais que vous ne savez pas comment le corriger, vous pouvez signaler les problèmes en <a href="https://github.com/mdn/content/issues/new">déposant un problème de documentation</a>. Veuillez donner un titre descriptif au problème. (Il n'est pas utile de dire "Lien mort" sans préciser où vous avez trouvé le lien.</p> -</div> +> **Note :** Si vous avez trouvé quelque chose d'incorrect sur MDN mais que vous ne savez pas comment le corriger, vous pouvez signaler les problèmes en [déposant un problème de documentation](https://github.com/mdn/content/issues/new). Veuillez donner un titre descriptif au problème. (Il n'est pas utile de dire "Lien mort" sans préciser où vous avez trouvé le lien. -<h2 id="Other_useful_pages">Autres pages utiles</h2> +## Autres pages utiles -<p>{{LandingPageListSubPages()}}</p> +{{LandingPageListSubPages()}} diff --git a/files/fr/mdn/contribute/localize/index.md b/files/fr/mdn/contribute/localize/index.md index bd39293888..796f19ff89 100644 --- a/files/fr/mdn/contribute/localize/index.md +++ b/files/fr/mdn/contribute/localize/index.md @@ -6,66 +6,52 @@ tags: - MDN Meta - l10n --- -<div>{{MDNSidebar}}</div> +{{MDNSidebar}} -<p>Depuis le 14 décembre 2020, MDN fonctionne sur la nouvelle plateforme <a href="https://github.com/mdn/yari">Yari</a> basée sur GitHub. Cela présente de nombreux avantages pour MDN, mais nous avons dû apporter des changements radicaux à la façon dont nous gérons la localisation. En effet, nous nous sommes retrouvés avec un grand nombre de contenus non maintenus et obsolètes dans nos langues autres que l'anglais et nous voulons mieux les gérer à l'avenir.</p> +Depuis le 14 décembre 2020, MDN fonctionne sur la nouvelle plateforme [Yari](https://github.com/mdn/yari) basée sur GitHub. Cela présente de nombreux avantages pour MDN, mais nous avons dû apporter des changements radicaux à la façon dont nous gérons la localisation. En effet, nous nous sommes retrouvés avec un grand nombre de contenus non maintenus et obsolètes dans nos langues autres que l'anglais et nous voulons mieux les gérer à l'avenir. -<p>L'objectif est de geler tout le contenu localisé (ce qui signifie que nous n'accepterons aucune modification, il sera en lecture seule), puis de ne dégeler que les localisations pour lesquelles des équipes dédiées se chargent de leur maintenance.</p> +L'objectif est de geler tout le contenu localisé (ce qui signifie que nous n'accepterons aucune modification, il sera en lecture seule), puis de ne dégeler que les localisations pour lesquelles des équipes dédiées se chargent de leur maintenance. -<h2 id="Active_locales">Langues actives</h2> +## Langues actives -<p>Nous avons actuellement dégelé les langues suivantes :</p> +Nous avons actuellement dégelé les langues suivantes : -<div class="note"> - <p><strong>Note :</strong> Si vous voulez contribuer à l'une des langues actives existantes, ou si vous voulez discuter du dégel d'une langue actuellement gelée, contactez l'un des membres actifs listés ci-dessous, ou <a href="/fr/docs/MDN/Contribute/Getting_started#step_4_ask_for_help">contactez-nous pour obtenir de l'aide</a>.</p> -</div> +> **Note :** Si vous voulez contribuer à l'une des langues actives existantes, ou si vous voulez discuter du dégel d'une langue actuellement gelée, contactez l'un des membres actifs listés ci-dessous, ou [contactez-nous pour obtenir de l'aide](/fr/docs/MDN/Contribute/Getting_started#step_4_ask_for_help). -<h3 id="Chinese_zh-CN_zh-TW">Chinois (zh-CN, zh-TW)</h3> +### Chinois (zh-CN, zh-TW) -<ul> - <li>Discussions : <a href="https://moztw.org/tg">Telegram (MozTW L10n channel)</a></li> - <li>Contributeurs actuels : <a href="https://github.com/irvin">Irvin</a>, <a href="https://github.com/t7yang">t7yang</a>, <a href="https://github.com/dibery">dibery</a></li> -</ul> +- Discussions : [Telegram (MozTW L10n channel)](https://moztw.org/tg) +- Contributeurs actuels : [Irvin](https://github.com/irvin), [t7yang](https://github.com/t7yang), [dibery](https://github.com/dibery) -<h3 id="French_fr">Français (fr)</h3> +### Français (fr) -<ul> - <li>Discussions : <a href="https://chat.mozilla.org/#/room/#l10n-fr:mozilla.org">Matrix (#l10n-fr channel)</a></li> - <li>Contributeurs actuels : <a href="https://github.com/SphinxKnight">SphinxKnight</a>, <a href="https://github.com/tristantheb">tristantheb</a>, <a href="https://github.com/audrasjb">Jb Audras</a></li> -</ul> +- Discussions : [Matrix (#l10n-fr channel)](https://chat.mozilla.org/#/room/#l10n-fr:mozilla.org) +- Contributeurs actuels : [SphinxKnight](https://github.com/SphinxKnight), [tristantheb](https://github.com/tristantheb), [Jb Audras](https://github.com/audrasjb) -<h3 id="Japanese_ja">Japonais (ja)</h3> +### Japonais (ja) -<ul> - <li>Discussions : <a href="https://mozillajp.slack.com/">Slack (#translation channel)</a>, <a href="https://github.com/mozilla-japan/translation">GitHub (mozilla-japan)</a>, <a href="https://groups.google.com/forum/#!forum/mozilla-translations-ja">Google Group (Mozilla.translations.ja)</a></li> - <li>Contributeurs actuels : <a href="https://github.com/mfuji09">mfuji09</a>, <a href="https://github.com/hmatrjp">hmatrjp</a>, <a href="https://github.com/potappo">potappo</a>, <a href="https://github.com/dynamis">dynamis</a>, <a href="https://github.com/kenji-yamasaki">kenji-yamasaki</a></li> -</ul> +- Discussions : [Slack (#translation channel)](https://mozillajp.slack.com/), [GitHub (mozilla-japan)](https://github.com/mozilla-japan/translation), [Google Group (Mozilla.translations.ja)](https://groups.google.com/forum/#!forum/mozilla-translations-ja) +- Contributeurs actuels : [mfuji09](https://github.com/mfuji09), [hmatrjp](https://github.com/hmatrjp), [potappo](https://github.com/potappo), [dynamis](https://github.com/dynamis), [kenji-yamasaki](https://github.com/kenji-yamasaki) -<h3 id="Korean_ko">Coréen (ko)</h3> +### Coréen (ko) -<ul> - <li>Discussions : <a href="https://open.kakao.com/o/gdfG288c">Kakao Talk (#MDN Korea)</a></li> - <li>Contributeurs actuels : <a href="https://github.com/hochan222">hochan222</a>, <a href="https://github.com/yechoi42">yechoi42</a>, <a href="https://github.com/cos18">cos18</a>, <a href="https://github.com/GwangYeol-Im">GwangYeol-Im</a>, <a href="https://github.com/pje1740">pje1740</a>, <a href="https://github.com/nKiNk">nKiNk</a>, <a href="https://github.com/yujo11">yujo11</a></li> -</ul> +- Discussions : [Kakao Talk (#MDN Korea)](https://open.kakao.com/o/gdfG288c) +- Contributeurs actuels : [hochan222](https://github.com/hochan222), [yechoi42](https://github.com/yechoi42), [cos18](https://github.com/cos18), [GwangYeol-Im](https://github.com/GwangYeol-Im), [pje1740](https://github.com/pje1740), [nKiNk](https://github.com/nKiNk), [yujo11](https://github.com/yujo11) -<h3 id="Russian_ru">Russe (ru)</h3> +### Russe (ru) -<ul> - <li>Discussions : <a href="https://chat.mozilla.org/#/room/#mdn-l10n-ru:mozilla.org">Matrix (#mdn-l10n-ru channel)</a></li> - <li>Contributeurs actuels : <a href="https://github.com/armanpwnz">armanpwnz</a>, <a href="https://github.com/captainspring">captainspring</a>, <a href="https://github.com/mpstv">mpstv</a>, <a href="https://github.com/myshov">myshov</a>, <a href="https://github.com/Saionaro">Saionaro</a>, <a href="https://github.com/sashasushko">sashasushko</a>, <a href="https://github.com/lex111">lex111</a></li> -</ul> +- Discussions : [Matrix (#mdn-l10n-ru channel)](https://chat.mozilla.org/#/room/#mdn-l10n-ru:mozilla.org) +- Contributeurs actuels : [armanpwnz](https://github.com/armanpwnz), [captainspring](https://github.com/captainspring), [mpstv](https://github.com/mpstv), [myshov](https://github.com/myshov), [Saionaro](https://github.com/Saionaro), [sashasushko](https://github.com/sashasushko), [lex111](https://github.com/lex111) -<h2 id="Other_MDN_localization">Autres sujets de localisation sur MDN</h2> +## Autres sujets de localisation sur MDN -<p>Pour l'instant, la nouvelle interface utilisateur de la plateforme MDN sera uniquement en anglais. C'est un problème que nous aborderons plus tard.</p> +Pour l'instant, la nouvelle interface utilisateur de la plateforme MDN sera uniquement en anglais. C'est un problème que nous aborderons plus tard. -<p>Les macros KumaScript continuent de fonctionner sur la nouvelle plateforme MDN, mais nous finirons par les supprimer progressivement au fur et à mesure de la construction de la nouvelle plateforme. Pour l'instant, elles continueront à fonctionner comme avant, et sont toujours éditées via des demandes de triage vers le <a href="https://github.com/mdn/yari/tree/main/kumascript/macros">dépôt GitHub de Yari</a>.</p> +Les macros KumaScript continuent de fonctionner sur la nouvelle plateforme MDN, mais nous finirons par les supprimer progressivement au fur et à mesure de la construction de la nouvelle plateforme. Pour l'instant, elles continueront à fonctionner comme avant, et sont toujours éditées via des demandes de triage vers le [dépôt GitHub de Yari](https://github.com/mdn/yari/tree/main/kumascript/macros). -<h2 id="See_also">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="https://hacks.mozilla.org/2021/03/mdn-localization-in-march-tier-1-locales-unfrozen-and-future-plans/">MDN localization in March — Tier 1 locales unfrozen, and future plans</a> — les prévisions pour le dégel des prochaines langues et des informations sur les langues qui seront supprimées.</li> - <li><a href="https://hacks.mozilla.org/mdn-localization-update-february-2021/">MDN localization update, February 2021</a> — le dernier état de la localisation sur MDN.</li> - <li><a href="https://hacks.mozilla.org/an-update-on-mdn-web-docs-localization-strategy/">An update on MDN Web Docs' localization strategy</a> — stratégie actualisée sur la base des réactions de la communauté.</li> - <li><a href="https://hacks.mozilla.org/mdn-web-docs-evolves-lowdown-on-the-upcoming-new-platform/">MDN Web Docs evolves! Lowdown on the upcoming new platform</a> — plus d'informations sur les avantages de la nouvelle plateforme et sur les raisons des changements de localisation.</li> -</ul> +- [MDN localization in March — Tier 1 locales unfrozen, and future plans](https://hacks.mozilla.org/2021/03/mdn-localization-in-march-tier-1-locales-unfrozen-and-future-plans/) — les prévisions pour le dégel des prochaines langues et des informations sur les langues qui seront supprimées. +- [MDN localization update, February 2021](https://hacks.mozilla.org/mdn-localization-update-february-2021/) — le dernier état de la localisation sur MDN. +- [An update on MDN Web Docs' localization strategy](https://hacks.mozilla.org/an-update-on-mdn-web-docs-localization-strategy/) — stratégie actualisée sur la base des réactions de la communauté. +- [MDN Web Docs evolves! Lowdown on the upcoming new platform](https://hacks.mozilla.org/mdn-web-docs-evolves-lowdown-on-the-upcoming-new-platform/) — plus d'informations sur les avantages de la nouvelle plateforme et sur les raisons des changements de localisation. diff --git a/files/fr/mdn/contribute/open_source_etiquette/index.md b/files/fr/mdn/contribute/open_source_etiquette/index.md index 2721c7985c..f5328823f8 100644 --- a/files/fr/mdn/contribute/open_source_etiquette/index.md +++ b/files/fr/mdn/contribute/open_source_etiquette/index.md @@ -9,157 +9,139 @@ tags: - Beginners translation_of: MDN/Contribute/Open_source_etiquette --- -<p>{{MDNSidebar}}</p> +{{MDNSidebar}} -<p>Si vous n'avez jamais travaillé sur un projet open source (OSP pour « <i>Open Source Project</i> ») auparavant, il est bon de lire cet article avant de commencer à contribuer à MDN (ou à d'autres projets open source). Il y a quelques bonnes pratiques à adopter qui vous permettront, à vous et aux autres contributrices et contributeurs du projet, de vous sentir valorisés et en sécurité, et de rester productifs.</p> +Si vous n'avez jamais travaillé sur un projet open source (OSP pour « _Open Source Project_ ») auparavant, il est bon de lire cet article avant de commencer à contribuer à MDN (ou à d'autres projets open source). Il y a quelques bonnes pratiques à adopter qui vous permettront, à vous et aux autres contributrices et contributeurs du projet, de vous sentir valorisés et en sécurité, et de rester productifs. -<p>Cet article ne vous apprendra pas tout ce qu'il faut savoir sur la contribution à un projet open source ; l'objectif est plutôt de vous donner quelques bons points de départ sur lesquels vous pourrez réfléchir et en apprendre davantage lorsque vous commencerez à contribuer à un projet open source.</p> +Cet article ne vous apprendra pas tout ce qu'il faut savoir sur la contribution à un projet open source ; l'objectif est plutôt de vous donner quelques bons points de départ sur lesquels vous pourrez réfléchir et en apprendre davantage lorsque vous commencerez à contribuer à un projet open source. -<h2 id="think_about_why_you_are_contributing_to_an_osp">Réfléchissez à la raison pour laquelle vous contribuez à un OSP</h2> +## Réfléchissez à la raison pour laquelle vous contribuez à un OSP -<p>Avant de commencer à contribuer à un projet open source, demandez-vous pourquoi vous voulez le faire. Si la réponse à cette question est simplement « Je m'ennuie et je veux trouver quelque chose de productif à faire avec mon temps », c'est bien, mais vous pouvez probablement aller plus loin.</p> +Avant de commencer à contribuer à un projet open source, demandez-vous pourquoi vous voulez le faire. Si la réponse à cette question est simplement « Je m'ennuie et je veux trouver quelque chose de productif à faire avec mon temps », c'est bien, mais vous pouvez probablement aller plus loin. -<p>De meilleures raisons encore peuvent être envisagées :<p> +De meilleures raisons encore peuvent être envisagées : -<ul> - <li>J'utilise cet outil en permanence et j'ai trouvé un bogue dans celui-ci/je veux contribuer à son amélioration.</li> - <li>Je veux aider d'autres personnes à utiliser cet outil avec plus de facilité.</li> - <li>Je veux aider d'autres personnes à contribuer au projet avec plus de facilité.</li> - <li>Je veux améliorer mes propres compétences.</li> - <li>Je veux démontrer publiquement mes propres compétences dans le cadre de mon cursus universitaire ou collégial.</li> - <li>Je veux démontrer publiquement mes propres compétences pour améliorer mes chances de trouver un emploi.</li> -</ul> +- J'utilise cet outil en permanence et j'ai trouvé un bogue dans celui-ci/je veux contribuer à son amélioration. +- Je veux aider d'autres personnes à utiliser cet outil avec plus de facilité. +- Je veux aider d'autres personnes à contribuer au projet avec plus de facilité. +- Je veux améliorer mes propres compétences. +- Je veux démontrer publiquement mes propres compétences dans le cadre de mon cursus universitaire ou collégial. +- Je veux démontrer publiquement mes propres compétences pour améliorer mes chances de trouver un emploi. -<p>Si vous passez votre temps à travailler gratuitement sur un projet, il est raisonnable de s'attendre à en retirer quelque chose. En fait, vous êtes beaucoup plus susceptible de rester plus longtemps et de contribuer de manière plus productive au projet. En outre, si vous avez un bon ensemble de raisons de contribuer avant de commencer, il sera plus facile de décider des tâches à entreprendre.</p> +Si vous passez votre temps à travailler gratuitement sur un projet, il est raisonnable de s'attendre à en retirer quelque chose. En fait, vous êtes beaucoup plus susceptible de rester plus longtemps et de contribuer de manière plus productive au projet. En outre, si vous avez un bon ensemble de raisons de contribuer avant de commencer, il sera plus facile de décider des tâches à entreprendre. -<p>Voici quelques raisons pour lesquelles vous ne devriez pas commencer à contribuer :</p> +Voici quelques raisons pour lesquelles vous ne devriez pas commencer à contribuer : -<ul> - <li>Je veux quelqu'un à qui parler.</li> - <li>Je veux des gens à troller ou à diriger.</li> - <li>Je veux montrer à quel point je suis incroyable.</li> -</ul> +- Je veux quelqu'un à qui parler. +- Je veux des gens à troller ou à diriger. +- Je veux montrer à quel point je suis incroyable. -<p>Votre présence sur le projet doit rester productive, et ne pas empêcher les autres d'être productifs.</p> +Votre présence sur le projet doit rester productive, et ne pas empêcher les autres d'être productifs. -<h2 id="be_polite_be_kind_avoid_incendiary_or_offensive_language">Soyez polis, soyez aimables, évitez les propos incendiaires ou offensants.</h2> +## Soyez polis, soyez aimables, évitez les propos incendiaires ou offensants. -<p>On pourrait abréger cela en disant « soyez gentil ». C'est le conseil numéro un que nous donnons à toute personne qui se lance dans les contributions open source.</p> +On pourrait abréger cela en disant « soyez gentil ». C'est le conseil numéro un que nous donnons à toute personne qui se lance dans les contributions open source. -<p>Soyez gentil avec les autres contributeurs du projet, et le projet sera plus agréable et plus productif. Cela inclut :</p> +Soyez gentil avec les autres contributeurs du projet, et le projet sera plus agréable et plus productif. Cela inclut : -<ul> - <li>Remercier les gens s'ils vous aident.</li> - <li>Féliciter les personnes lorsque cela est approprié (par exemple, si elles déposent leur toute première demande de révision ou si elles résolvent un bogue particulièrement difficile).</li> - <li>Toujours répondre respectueusement aux gens, même si vous avez l'impression que la réponse à leur question était un peu évidente, ou qu'ils se répètent.</li> - <li>Essayer d'aider les gens à faire mieux la prochaine fois, en les soutenant, par exemple lors de l'examen des demandes de modification ou en répondant à leurs questions. Dire « c'est faux » ou « voici la réponse » est loin d'être aussi utile que de dire « c'est correct, mais je pense que ce serait mieux si vous essayiez de faire plus comme ceci, voici un article de blog pour plus d'idées » ou « vous pouvez trouver la réponse ici ; consultez également ce lien pour des réponses plus courantes ».</li> -</ul> +- Remercier les gens s'ils vous aident. +- Féliciter les personnes lorsque cela est approprié (par exemple, si elles déposent leur toute première demande de révision ou si elles résolvent un bogue particulièrement difficile). +- Toujours répondre respectueusement aux gens, même si vous avez l'impression que la réponse à leur question était un peu évidente, ou qu'ils se répètent. +- Essayer d'aider les gens à faire mieux la prochaine fois, en les soutenant, par exemple lors de l'examen des demandes de modification ou en répondant à leurs questions. Dire « c'est faux » ou « voici la réponse » est loin d'être aussi utile que de dire « c'est correct, mais je pense que ce serait mieux si vous essayiez de faire plus comme ceci, voici un article de blog pour plus d'idées » ou « vous pouvez trouver la réponse ici ; consultez également ce lien pour des réponses plus courantes ». -<p>Vous et les autres contributeurs êtes (ou devriez être) ici parce qu'ils veulent apporter une contribution positive au projet, mais au-delà de cela, vous ne pouvez rien présumer d'eux. Cela inclut leurs :</p> +Vous et les autres contributeurs êtes (ou devriez être) ici parce qu'ils veulent apporter une contribution positive au projet, mais au-delà de cela, vous ne pouvez rien présumer d'eux. Cela inclut leurs : -<ul> - <li>Connaissance du projet et des technologies utilisées pour le construire</li> - <li>Sexe, sexualité, âge, langues parlées, lieu de résidence, opinions politiques, religion ou autres caractéristiques personnelles</li> - <li>Expérience des projets open source</li> - <li>Confiance</li> - <li>Attentes</li> - <li>Sens de l'humour</li> -</ul> +- Connaissance du projet et des technologies utilisées pour le construire +- Sexe, sexualité, âge, langues parlées, lieu de résidence, opinions politiques, religion ou autres caractéristiques personnelles +- Expérience des projets open source +- Confiance +- Attentes +- Sens de l'humour -<p>Vous devez donc vous en tenir autant que possible au sujet, en évitant les hors-sujets potentiellement controversés comme la religion ou la politique, et en faisant preuve de soutien et de respect même si vous n'êtes pas d'accord avec quelqu'un ou si vous n'aimez pas une décision qu'il a prise.</p> +Vous devez donc vous en tenir autant que possible au sujet, en évitant les hors-sujets potentiellement controversés comme la religion ou la politique, et en faisant preuve de soutien et de respect même si vous n'êtes pas d'accord avec quelqu'un ou si vous n'aimez pas une décision qu'il a prise. -<p>De même, vous devez vous abstenir de tout juron ou langage offensant sur MDN, même s'il n'est pas dirigé contre quelqu'un en particulier. Ce n'est pas nécessaire pour participer, et certaines personnes y sont vraiment sensibles.</p> +De même, vous devez vous abstenir de tout juron ou langage offensant sur MDN, même s'il n'est pas dirigé contre quelqu'un en particulier. Ce n'est pas nécessaire pour participer, et certaines personnes y sont vraiment sensibles. -<p>Sachez qu'il existe des règles dans toute bonne OSP pour protéger ses contributeurs afin qu'ils ne se sentent pas mal à l'aise lorsqu'ils contribuent. Ces règles prennent généralement la forme d'un fichier CODE_OF_CONDUCT.md sur GitHub.</p> +Sachez qu'il existe des règles dans toute bonne OSP pour protéger ses contributeurs afin qu'ils ne se sentent pas mal à l'aise lorsqu'ils contribuent. Ces règles prennent généralement la forme d'un fichier CODE_OF_CONDUCT.md sur GitHub. -<p>Par exemple, les dépôts du MDN sont régis par les vastes <a href="https://www.mozilla.org/fr/about/governance/policies/participation/">Mozilla Community Participation Guidelines</a>. Habituellement, un comportement légèrement offensant sur les dépôts MDN (comme le fait d'être constamment hors sujet/perturbant, ou d'être impoli) sera d'abord répondu par un avertissement sur le dépôt, suivi d'un dernier avertissement, puis d'un bannissement temporaire ou permanent. Les problèmes de comportement plus graves, tels que les discours haineux ou les menaces à l'encontre d'un autre contributeur, ne seront pas tolérés et entraîneront probablement un bannissement immédiat.</p> +Par exemple, les dépôts du MDN sont régis par les vastes [Mozilla Community Participation Guidelines](https://www.mozilla.org/fr/about/governance/policies/participation/). Habituellement, un comportement légèrement offensant sur les dépôts MDN (comme le fait d'être constamment hors sujet/perturbant, ou d'être impoli) sera d'abord répondu par un avertissement sur le dépôt, suivi d'un dernier avertissement, puis d'un bannissement temporaire ou permanent. Les problèmes de comportement plus graves, tels que les discours haineux ou les menaces à l'encontre d'un autre contributeur, ne seront pas tolérés et entraîneront probablement un bannissement immédiat. -<p>Si vous recevez quelque chose qui vous met mal à l'aise, vous devez toujours le signaler en utilisant le mécanisme prévu dans le code de conduite.</p> +Si vous recevez quelque chose qui vous met mal à l'aise, vous devez toujours le signaler en utilisant le mécanisme prévu dans le code de conduite. -<h2 id="choose_impactful_contributions">Choisissez des contributions percutantes</h2> +## Choisissez des contributions percutantes -<p>Réfléchissez à ce que vous voulez faire sur le projet. Par exemple, nous avons une grande liste de problèmes déposés sur <a href="https://github.com/mdn/translated-content/issues">https://github.com/mdn/translated-content/issues</a>, répartis selon diverses étiquettes GitHub en temps estimé de correction, catégories technologiques, et plus encore. Une autre bonne étiquette à rechercher est « good first issue », qui est généralement donnée aux issues qui sont assez simples et bonnes pour les débutants du projet pour commencer. Nous allons bientôt commencer à trier nos problèmes de manière plus approfondie, en ajoutant d'autres étiquettes telles que des indicateurs de priorité. Essayez de choisir quelques problèmes que vous pensez pouvoir gérer correctement avec le temps dont vous disposez, et demandez à y être affecté.</p> +Réfléchissez à ce que vous voulez faire sur le projet. Par exemple, nous avons une grande liste de problèmes déposés sur <https://github.com/mdn/translated-content/issues>, répartis selon diverses étiquettes GitHub en temps estimé de correction, catégories technologiques, et plus encore. Une autre bonne étiquette à rechercher est « good first issue », qui est généralement donnée aux issues qui sont assez simples et bonnes pour les débutants du projet pour commencer. Nous allons bientôt commencer à trier nos problèmes de manière plus approfondie, en ajoutant d'autres étiquettes telles que des indicateurs de priorité. Essayez de choisir quelques problèmes que vous pensez pouvoir gérer correctement avec le temps dont vous disposez, et demandez à y être affecté. -<p>Vous pouvez également contribuer en ouvrant des demandes de triage pour résoudre les problèmes que vous rencontrez en lisant les articles du site MDN.</p> +Vous pouvez également contribuer en ouvrant des demandes de triage pour résoudre les problèmes que vous rencontrez en lisant les articles du site MDN. -<p>Une grande partie du travail sur le MDN consiste à rédiger de la documentation et des exemples de code, mais il existe d'autres façons de contribuer :</p> +Une grande partie du travail sur le MDN consiste à rédiger de la documentation et des exemples de code, mais il existe d'autres façons de contribuer : -<ul> - <li>Aidez à trier les problèmes qui arrivent.</li> - <li>Aidez à corriger les fautes de frappe.</li> - <li>Aider à améliorer la grammaire et à rendre les pages plus compréhensibles.</li> - <li>Aidez à encadrer les personnes qui essaient de corriger les problèmes.</li> -</ul> +- Aidez à trier les problèmes qui arrivent. +- Aidez à corriger les fautes de frappe. +- Aider à améliorer la grammaire et à rendre les pages plus compréhensibles. +- Aidez à encadrer les personnes qui essaient de corriger les problèmes. -<p>Chaque correction est utile, aussi petite soit-elle, et nous n'en refuserons aucune. Cela dit, veillez à ce que vos corrections soient productives. Nous vous déconseillons ce genre de contributions :</p> +Chaque correction est utile, aussi petite soit-elle, et nous n'en refuserons aucune. Cela dit, veillez à ce que vos corrections soient productives. Nous vous déconseillons ce genre de contributions : -<ul> - <li>Mettre à jour le style du code juste parce que "vous préférez ce style".</li> - <li>Mettre à jour le style de la langue "juste parce que vous aimez mieux ce style".</li> - <li>Changer les pages de l'anglais américain à l'anglais britannique.</li> - <li>Ajouter ou enlever un tas de ponctuation alors qu'il n'y a pas vraiment de problème.</li> - <li>Changer le cadre de test que nous utilisons pour quelque chose d'autre parce que vous le préférez.</li> -</ul> +- Mettre à jour le style du code juste parce que "vous préférez ce style". +- Mettre à jour le style de la langue "juste parce que vous aimez mieux ce style". +- Changer les pages de l'anglais américain à l'anglais britannique. +- Ajouter ou enlever un tas de ponctuation alors qu'il n'y a pas vraiment de problème. +- Changer le cadre de test que nous utilisons pour quelque chose d'autre parce que vous le préférez. -<p>Dans de nombreux cas, les choses sont comme elles sont sur les OSP pour une raison. Vous devriez lire leurs guides de style, s'ils en ont un, et en cas de doute sur la productivité de quelque chose, demandez toujours avant !</p> +Dans de nombreux cas, les choses sont comme elles sont sur les OSP pour une raison. Vous devriez lire leurs guides de style, s'ils en ont un, et en cas de doute sur la productivité de quelque chose, demandez toujours avant ! -<h2 id="read_the_manual">Suivez le guide</h2> +## Suivez le guide -<p>Les bons OSP rendront toujours la documentation des contributeurs facilement accessible. Sur les projets GitHub, elle se trouve généralement dans le fichier CONTRIBUTING.md du dépôt, ou parfois dans le fichier README.md du projet. Étant un projet de documentation, le contenu de MDN dispose d'un <a href="https://github.com/mdn/translated-content/blob/main/README.md">README</a> et d'un ensemble décent de docs pour les contributeurs sur le site lui-même (voir <a href="/fr/docs/MDN/Contribute">Contribuer à MDN</a>).</p> +Les bons OSP rendront toujours la documentation des contributeurs facilement accessible. Sur les projets GitHub, elle se trouve généralement dans le fichier CONTRIBUTING.md du dépôt, ou parfois dans le fichier README.md du projet. Étant un projet de documentation, le contenu de MDN dispose d'un [README](https://github.com/mdn/translated-content/blob/main/README.md) et d'un ensemble décent de docs pour les contributeurs sur le site lui-même (voir [Contribuer à MDN](/fr/docs/MDN/Contribute)). -<p>La seule chose à demander ici est de ne pas avoir peur de demander de l'aide, mais de TOUJOURS essayer de trouver la réponse à votre question avant de la poser. De cette façon, vous développez votre connaissance du projet et devenez plus indépendant, et vous n'imposez pas une charge inutile aux autres contributeurs.</p> +La seule chose à demander ici est de ne pas avoir peur de demander de l'aide, mais de TOUJOURS essayer de trouver la réponse à votre question avant de la poser. De cette façon, vous développez votre connaissance du projet et devenez plus indépendant, et vous n'imposez pas une charge inutile aux autres contributeurs. -<p>Bien sûr, la documentation ne sera pas toujours parfaite. Si vous trouvez quelque chose qui est difficile à trouver ou qui n'est pas très bien expliqué, déposez un ticket ou créez une demande de modification pour essayer de le corriger vous-même.</p> +Bien sûr, la documentation ne sera pas toujours parfaite. Si vous trouvez quelque chose qui est difficile à trouver ou qui n'est pas très bien expliqué, déposez un ticket ou créez une demande de modification pour essayer de le corriger vous-même. -<h2 id="find_out_where_to_ask_questions">Découvrez où poser des questions</h2> +## Découvrez où poser des questions -<p>Cherchez toujours à savoir quel est le meilleur endroit pour poser des questions. Les bons OSP le préciseront toujours dans leur docs (voir <a href="/fr/docs/MDN/Contribute/Getting_started#step_4_ask_for_help">Demander de l'aide sur le MDN</a>). Si vous souhaitez poser des questions d'ordre général, utilisez toujours ces canaux. Ne vous contentez pas de déposer un ticket sur GitHub pour chaque question, car cela ajoute du poids au projet (voir "Faites des progrès, pas du bruit" ci-dessous).</p> +Cherchez toujours à savoir quel est le meilleur endroit pour poser des questions. Les bons OSP le préciseront toujours dans leur docs (voir [Demander de l'aide sur le MDN](/fr/docs/MDN/Contribute/Getting_started#step_4_ask_for_help)). Si vous souhaitez poser des questions d'ordre général, utilisez toujours ces canaux. Ne vous contentez pas de déposer un ticket sur GitHub pour chaque question, car cela ajoute du poids au projet (voir "Faites des progrès, pas du bruit" ci-dessous). -<h2 id="make_progress_not_noise">Faites des progrès, pas du bruit</h2> +## Faites des progrès, pas du bruit -<p>Réfléchissez bien à la façon dont vous gérez la communication dans le projet - assurez-vous qu'elle est utile et qu'elle ne complique pas le travail des autres contributeurs. Soumettre des pull requests pour corriger des bogues, c'est bien, mais sont-elles vraiment utiles et faciles à examiner ? Déposer des questions et participer à d'autres conversations, c'est bien, mais vos questions et commentaires sont-ils pertinents ou ne font-ils qu'ajouter du brouhaha ?</p> +Réfléchissez bien à la façon dont vous gérez la communication dans le projet - assurez-vous qu'elle est utile et qu'elle ne complique pas le travail des autres contributeurs. Soumettre des pull requests pour corriger des bogues, c'est bien, mais sont-elles vraiment utiles et faciles à examiner ? Déposer des questions et participer à d'autres conversations, c'est bien, mais vos questions et commentaires sont-ils pertinents ou ne font-ils qu'ajouter du brouhaha ? -<p>En règle générale, faites ceci :</p> +En règle générale, faites ceci : -<ul> - <li>Discutez d'un seul sujet par question - il est facile de garder les questions ciblées et productives.</li> - <li>Corrigez un problème par PR - cela peut représenter un peu plus de travail pour vous, mais il est beaucoup plus facile d'examiner une seule correction claire.</li> - <li>Contribuez à d'autres fils de discussion si vous avez une remarque utile à faire ou si vous pouvez répondre à la question d'une autre personne.</li> - <li>Posez des questions en utilisant d'autres mécanismes comme les salons de discussion ou les forums si vous n'êtes pas sûr de l'utilité de quelque chose ou si vous avez une question simple.</li> - <li>Lisez d'abord le guide pour essayer de répondre vous-même à la question avant de la poser.</li> -</ul> +- Discutez d'un seul sujet par question - il est facile de garder les questions ciblées et productives. +- Corrigez un problème par PR - cela peut représenter un peu plus de travail pour vous, mais il est beaucoup plus facile d'examiner une seule correction claire. +- Contribuez à d'autres fils de discussion si vous avez une remarque utile à faire ou si vous pouvez répondre à la question d'une autre personne. +- Posez des questions en utilisant d'autres mécanismes comme les salons de discussion ou les forums si vous n'êtes pas sûr de l'utilité de quelque chose ou si vous avez une question simple. +- Lisez d'abord le guide pour essayer de répondre vous-même à la question avant de la poser. -<p>Et pas :</p> +Et pas : -<ul> - <li>Compliquez les choses en essayant de discuter de plusieurs sujets à la fois, ou en faisant des commentaires hors sujet.</li> - <li>Essayer de regrouper plusieurs corrections dans une seule demande de triage. Cela rend la révision beaucoup plus difficile et éveille les soupçons (certaines personnes pourraient penser que vous essayez de cacher un code malveillant entre les changements valides).</li> - <li>Ouvrir beaucoup de tickets en posant des questions vagues.</li> - <li>Posez des questions sans essayer d'abord de résoudre le problème vous-même.</li> -</ul> +- Compliquez les choses en essayant de discuter de plusieurs sujets à la fois, ou en faisant des commentaires hors sujet. +- Essayer de regrouper plusieurs corrections dans une seule demande de triage. Cela rend la révision beaucoup plus difficile et éveille les soupçons (certaines personnes pourraient penser que vous essayez de cacher un code malveillant entre les changements valides). +- Ouvrir beaucoup de tickets en posant des questions vagues. +- Posez des questions sans essayer d'abord de résoudre le problème vous-même. -<h2 id="osps_are_a_democracy_almost">Les OSP sont une démocratie (ou presque)</h2> +## Les OSP sont une démocratie (ou presque) -<p>Les OSP sont assez démocratiques - de nombreuses décisions font l'objet d'un vote, et vous êtes largement libre de contribuer comme vous le souhaitez, tant que vous n'empêchez personne d'autre de contribuer.</p> +Les OSP sont assez démocratiques - de nombreuses décisions font l'objet d'un vote, et vous êtes largement libre de contribuer comme vous le souhaitez, tant que vous n'empêchez personne d'autre de contribuer. -<p>Cependant, certaines choses seront largement décidées par un petit groupe de contributeurs principaux. Vous êtes libre de vous opposer à toute décision, mais il arrive qu'un modérateur prenne une décision qui va à l'encontre de votre opinion. Vous devez respecter et accepter ces décisions.</p> +Cependant, certaines choses seront largement décidées par un petit groupe de contributeurs principaux. Vous êtes libre de vous opposer à toute décision, mais il arrive qu'un modérateur prenne une décision qui va à l'encontre de votre opinion. Vous devez respecter et accepter ces décisions. -<p>Il est utile d'apprendre à connaître les modérateurs d'un projet, afin de savoir à qui demander de l'aide, par exemple dans les fils de discussion des demandes de triage ou des problèmes.</p> +Il est utile d'apprendre à connaître les modérateurs d'un projet, afin de savoir à qui demander de l'aide, par exemple dans les fils de discussion des demandes de triage ou des problèmes. -<h2 id="be_patient_be_timely">Soyez patient, soyez ponctuel</h2> +## Soyez patient, soyez ponctuel -<p>Gardez à l'esprit que de nombreuses personnes travaillant sur des OSP le font sur leur temps libre, sans rémunération, et que toutes les personnes travaillant sur des OSP sont généralement très occupées. Si vous attendez quelque chose comme la révision d'une pull request ou une réponse à une question, soyez patient.</p> +Gardez à l'esprit que de nombreuses personnes travaillant sur des OSP le font sur leur temps libre, sans rémunération, et que toutes les personnes travaillant sur des OSP sont généralement très occupées. Si vous attendez quelque chose comme la révision d'une pull request ou une réponse à une question, soyez patient. -<p>Il est raisonnable d'attendre quelques jours, puis de demander poliment à quelqu'un s'il a eu le temps d'y jeter un coup d'œil, et éventuellement de relancer une semaine plus tard pour demander s'il est trop occupé pour le moment.</p> +Il est raisonnable d'attendre quelques jours, puis de demander poliment à quelqu'un s'il a eu le temps d'y jeter un coup d'œil, et éventuellement de relancer une semaine plus tard pour demander s'il est trop occupé pour le moment. -<p>Il n'est PAS raisonnable de commencer à exiger des choses, comme si on vous devait une réponse rapide. Ce n'est pas le cas.</p> +Il n'est PAS raisonnable de commencer à exiger des choses, comme si on vous devait une réponse rapide. Ce n'est pas le cas. -<p>Si quelqu'un attend que vous fassiez quelque chose pour lui, vous devez faire preuve de la même courtoisie, mais en même temps, essayez de répondre aussi rapidement que possible. Si vous ne pouvez vraiment pas trouver le temps, faites-le savoir et demandez aux responsables de vous aider à trouver quelqu'un d'autre pour effectuer cette tâche.</p> +Si quelqu'un attend que vous fassiez quelque chose pour lui, vous devez faire preuve de la même courtoisie, mais en même temps, essayez de répondre aussi rapidement que possible. Si vous ne pouvez vraiment pas trouver le temps, faites-le savoir et demandez aux responsables de vous aider à trouver quelqu'un d'autre pour effectuer cette tâche. -<h2 id="see_also">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="https://opensource.guide/how-to-contribute/">Comment contribuer à l'Open Source</a></li> - <li><a href="https://github.com/freeCodeCamp/how-to-contribute-to-open-source">Liste plus générale de freeCodeCamp « Comment contribuer à l'open source ».</a></li> - <li><a href="https://stackoverflow.blog/2020/08/03/getting-started-with-contributing-to-open-source/">Commencer à contribuer à l'open source</a></li> -</ul> +- [Comment contribuer à l'Open Source](https://opensource.guide/how-to-contribute/) +- [Liste plus générale de freeCodeCamp « Comment contribuer à l'open source ».](https://github.com/freeCodeCamp/how-to-contribute-to-open-source) +- [Commencer à contribuer à l'open source](https://stackoverflow.blog/2020/08/03/getting-started-with-contributing-to-open-source/) diff --git a/files/fr/mdn/contribute/processes/index.md b/files/fr/mdn/contribute/processes/index.md index ffc1cf92a3..68cb055db9 100644 --- a/files/fr/mdn/contribute/processes/index.md +++ b/files/fr/mdn/contribute/processes/index.md @@ -7,10 +7,10 @@ tags: - Processes translation_of: MDN/Contribute/Processes --- -<div>{{MDNSidebar}}</div> +{{MDNSidebar}} -<p>Le projet de documentation MDN est énorme; il y a un grand nombre de technologies à couvrir et nous avons des centaines de contributeurs dans le monde entier. Pour aider à mettre de l'ordre dans le chaos, nous avons des processus standard à suivre lorsque vous travaillez sur des tâches spécifiques liées à la documentation. Vous trouverez ici des guides sur ces processus.</p> +Le projet de documentation MDN est énorme; il y a un grand nombre de technologies à couvrir et nous avons des centaines de contributeurs dans le monde entier. Pour aider à mettre de l'ordre dans le chaos, nous avons des processus standard à suivre lorsque vous travaillez sur des tâches spécifiques liées à la documentation. Vous trouverez ici des guides sur ces processus. -<p>Vous pouvez également consulter les versions anglaises de ces pages pour les processus liés à la documentation en anglais.</p> +Vous pouvez également consulter les versions anglaises de ces pages pour les processus liés à la documentation en anglais. -<p>{{LandingPageListSubPages()}}</p> +{{LandingPageListSubPages()}} diff --git a/files/fr/mdn/contribute/where_is_everything/index.md b/files/fr/mdn/contribute/where_is_everything/index.md index 349a70a3fb..c6dbde0480 100644 --- a/files/fr/mdn/contribute/where_is_everything/index.md +++ b/files/fr/mdn/contribute/where_is_everything/index.md @@ -10,26 +10,22 @@ tags: - Repos translation_of: MDN/Contribute/Where_is_everything --- -<p>{{MDNSidebar}}</p> +{{MDNSidebar}} -<p>MDN est un projet complexe avec de nombreux composants. Contribuer au site est facile au début, si vous avez quelques connaissances de GitHub et que vous commencez par corriger des fautes de frappe ou améliorer des extraits de code. Cependant, lorsque vous commencez à faire des contributions plus importantes, comme l'ajout de nouvelles pages entières, vous remarquerez que de nombreux éléments du contenu ne sont pas stockés dans les sources de la page et proviennent d'ailleurs.</p> +MDN est un projet complexe avec de nombreux composants. Contribuer au site est facile au début, si vous avez quelques connaissances de GitHub et que vous commencez par corriger des fautes de frappe ou améliorer des extraits de code. Cependant, lorsque vous commencez à faire des contributions plus importantes, comme l'ajout de nouvelles pages entières, vous remarquerez que de nombreux éléments du contenu ne sont pas stockés dans les sources de la page et proviennent d'ailleurs. -<p>Cet article sert de guide rapide pour trouver les différents dépôts que vous devez modifier pour mettre à jour les différentes parties du contenu de MDN.</p> +Cet article sert de guide rapide pour trouver les différents dépôts que vous devez modifier pour mettre à jour les différentes parties du contenu de MDN. -<h2 id="core_repos">Dépôts principaux</h2> +## Dépôts principaux -<ul> - <li><strong>Contenu de référence (anglais)</strong> : <a href="https://github.com/mdn/content">https://github.com/mdn/content</a>. Le dépôt le plus important pour le contenu MDN : c'est là qu'est stocké le contenu principal en anglais du site et que vous effectuerez toutes les modifications standard du contenu des pages.</li> - <li><strong>Plateforme MDN</strong> : <a href="https://github.com/mdn/yari">https://github.com/mdn/yari</a>. C'est là que la plateforme MDN est stockée, et c'est là que vous irez si vous souhaitez apporter des modifications à la structure de haut niveau des pages de MDN ou aux mécanismes de rendu.</li> - <li><strong>Données de compatibilité des navigateurs</strong> : <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. C'est ici que sont stockées les données utilisées pour générer les tableaux de compatibilité des navigateurs que l'on trouve sur nos pages de référence. Allez ici pour modifier les données de compatibilité !</li> - <li><strong>Exemples interactifs</strong> : <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>. Ce dépôt stocke le code de rendu et les blocs de code d'exemple qui, ensemble, produisent les beaux exemples modifiables et copiables que l'on trouve en haut de beaucoup de nos pages de référence. Éditez ces exemples ici.</li> - <li><strong>Contenu traduit</strong> : <a href="https://github.com/mdn/translated-content">https://github.com/mdn/translated-content</a>. C'est ici que vit le contenu localisé. Allez ici si vous voulez aider à maintenir les locales de niveau 1 que nous avons actuellement dégelées (actuellement <code>fr</code>, <code>ja</code>, <code>ko</code>, <code>zh-CN</code>/<code>zh-TW</code> et <code>ru</code>). Nous n'autorisons actuellement pas les éditions pour d'autres locales.</li> - <li><strong>Données CSS</strong> : <a href="https://github.com/mdn/data">https://github.com/mdn/data</a>. Conçu à l'origine comme un dépôt de données MDN à usage général, le dépôt de données sert désormais à conserver les données relatives aux fonctionnalités CSS telles que la syntaxe formelle, l'héritage, la valeur calculée, le type d'animation, etc. Ces données sont utilisées pour générer des sections sur les pages de référence CSS telles que la définition formelle et la syntaxe formelle.</li> -</ul> +- **Contenu de référence (anglais)** : <https://github.com/mdn/content>. Le dépôt le plus important pour le contenu MDN : c'est là qu'est stocké le contenu principal en anglais du site et que vous effectuerez toutes les modifications standard du contenu des pages. +- **Plateforme MDN** : <https://github.com/mdn/yari>. C'est là que la plateforme MDN est stockée, et c'est là que vous irez si vous souhaitez apporter des modifications à la structure de haut niveau des pages de MDN ou aux mécanismes de rendu. +- **Données de compatibilité des navigateurs** : <https://github.com/mdn/browser-compat-data>. C'est ici que sont stockées les données utilisées pour générer les tableaux de compatibilité des navigateurs que l'on trouve sur nos pages de référence. Allez ici pour modifier les données de compatibilité ! +- **Exemples interactifs** : <https://github.com/mdn/interactive-examples>. Ce dépôt stocke le code de rendu et les blocs de code d'exemple qui, ensemble, produisent les beaux exemples modifiables et copiables que l'on trouve en haut de beaucoup de nos pages de référence. Éditez ces exemples ici. +- **Contenu traduit** : <https://github.com/mdn/translated-content>. C'est ici que vit le contenu localisé. Allez ici si vous voulez aider à maintenir les locales de niveau 1 que nous avons actuellement dégelées (actuellement `fr`, `ja`, `ko`, `zh-CN`/`zh-TW` et `ru`). Nous n'autorisons actuellement pas les éditions pour d'autres locales. +- **Données CSS** : <https://github.com/mdn/data>. Conçu à l'origine comme un dépôt de données MDN à usage général, le dépôt de données sert désormais à conserver les données relatives aux fonctionnalités CSS telles que la syntaxe formelle, l'héritage, la valeur calculée, le type d'animation, etc. Ces données sont utilisées pour générer des sections sur les pages de référence CSS telles que la définition formelle et la syntaxe formelle. -<h2 id="other_repos">Autres dépôts</h2> +## Autres dépôts -<ul> - <li><strong>Dépôts des démonstrations</strong> : L'organisation GitHub de MDN contient un très grand nombre de dépôts de démonstration, par exemple <a href="https://github.com/mdn/css-examples">css-examples</a>, <a href="https://github.com/mdn/dom-examples">dom-examples</a>, <a href="https://github.com/mdn/webaudio-examples">webaudio-examples</a>. Elles contiennent généralement des exemples autonomes qui sont souvent liés à des pages MDN, mais vous trouverez parfois l'un de ces exemples intégré à une page à l'aide d'un appel de macro comme celui-ci - \{{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid1.html", '100%', 700)}}. Si vous souhaitez modifier un exemple dynamique autonome, vous le trouverez toujours dans l'un de ces dépôts d'exemples.</li> - <li><strong>MDN-minimaliste</strong> : <a href="https://github.com/mdn/mdn-minimalist">https://github.com/mdn/mdn-minimalist</a>. Les informations de style de base pour MDN. Si vous souhaitez contribuer à améliorer le style CSS de MDN, c'est ici que vous devez vous rendre.</li> -</ul> +- **Dépôts des démonstrations** : L'organisation GitHub de MDN contient un très grand nombre de dépôts de démonstration, par exemple [css-examples](https://github.com/mdn/css-examples), [dom-examples](https://github.com/mdn/dom-examples), [webaudio-examples](https://github.com/mdn/webaudio-examples). Elles contiennent généralement des exemples autonomes qui sont souvent liés à des pages MDN, mais vous trouverez parfois l'un de ces exemples intégré à une page à l'aide d'un appel de macro comme celui-ci - \\{{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid1.html", '100%', 700)}}. Si vous souhaitez modifier un exemple dynamique autonome, vous le trouverez toujours dans l'un de ces dépôts d'exemples. +- **MDN-minimaliste** : <https://github.com/mdn/mdn-minimalist>. Les informations de style de base pour MDN. Si vous souhaitez contribuer à améliorer le style CSS de MDN, c'est ici que vous devez vous rendre. diff --git a/files/fr/mdn/guidelines/code_guidelines/css/index.md b/files/fr/mdn/guidelines/code_guidelines/css/index.md index 2e2a768762..b37d9b6f10 100644 --- a/files/fr/mdn/guidelines/code_guidelines/css/index.md +++ b/files/fr/mdn/guidelines/code_guidelines/css/index.md @@ -9,194 +9,205 @@ tags: - MDN Meta translation_of: MDN/Guidelines/Code_guidelines/CSS --- -<div>{{MDNSidebar}}</div> +{{MDNSidebar}} -<p>Les directives suivantes couvrent la manière d'écrire les CSS pour les exemples de code MDN.</p> +Les directives suivantes couvrent la manière d'écrire les CSS pour les exemples de code MDN. -<h2 id="In_this_article">Dans cet article</h2> +## Dans cet article -<ul> - <li><a href="#high-level_guidelines">Lignes directrices de haut niveau</a> +- [Lignes directrices de haut niveau](#high-level_guidelines) - <ul> - <li><a href="#dont_use_preprocessors">N'utilisez pas de préprocesseurs</a></li> - <li><a href="#dont_use_specific_css_methodologies">N'utilisez pas de méthodologies CSS spécifiques</a></li> - <li><a href="#use_flexiblerelative_units">Utiliser des unités flexibles/relatives</a></li> - <li><a href="#dont_use_resets">Ne pas utiliser de réinitialisation</a></li> - <li><a href="#plan_your_css_%e2%80%94_avoid_overriding">Planifiez votre CSS — évitez les surcharges</a></li> - </ul> - </li> - <li><a href="#general_css_coding_style">Style général de codage CSS</a> - <ul> - <li><a href="#use_expanded_syntax">Utiliser une syntaxe étendue</a></li> - <li><a href="#favor_longhand_rules_over_terse_shorthand">Privilégiez les règles longues aux règles raccourcies</a></li> - <li><a href="#use_double_quotes_around_values">Utilisez des guillemets doubles autour des valeurs</a></li> - <li><a href="#spacing_around_function_parameters">Espacement autour des paramètres de la fonction</a></li> - <li><a href="#css_comments">Commentaires CSS</a></li> - <li><a href="#dont_use_!important">Ne pas utiliser !important</a></li> - </ul> - </li> - <li><a href="#specific_css_syntax_points">Points de syntaxe CSS spécifiques</a> - <ul> - <li><a href="#turning_off_borders_and_other_properties">Désactiver les bordures et autres propriétés</a></li> - <li><a href="#use_mobile_first_media_queries">Utilisez des requêtes média "mobile first"</a></li> - </ul> - </li> - <li><a href="#selectors">Sélecteurs</a> - <ul> - <li><a href="#dont_use_id_selectors">N'utilisez pas de sélecteurs ID</a></li> - <li><a href="#put_multiple_selectors_on_separate_lines">Mettre les sélecteurs multiples sur des lignes séparées</a></li> - </ul> - </li> -</ul> + - [N'utilisez pas de préprocesseurs](#dont_use_preprocessors) + - [N'utilisez pas de méthodologies CSS spécifiques](#dont_use_specific_css_methodologies) + - [Utiliser des unités flexibles/relatives](#use_flexiblerelative_units) + - [Ne pas utiliser de réinitialisation](#dont_use_resets) + - [Planifiez votre CSS — évitez les surcharges](#plan_your_css_%e2%80%94_avoid_overriding) -<h2 id="High-level_guidelines">Lignes directrices de haut niveau</h2> +- [Style général de codage CSS](#general_css_coding_style) -<h3 id="Dont_use_preprocessors">N'utilisez pas de préprocesseurs</h3> + - [Utiliser une syntaxe étendue](#use_expanded_syntax) + - [Privilégiez les règles longues aux règles raccourcies](#favor_longhand_rules_over_terse_shorthand) + - [Utilisez des guillemets doubles autour des valeurs](#use_double_quotes_around_values) + - [Espacement autour des paramètres de la fonction](#spacing_around_function_parameters) + - [Commentaires CSS](#css_comments) + - [Ne pas utiliser !important](#dont_use_!important) -<p>N'utilisez pas la syntaxe des préprocesseurs, ex. <a href="https://sass-lang.com/">Sass</a>, <a href="http://lesscss.org/">Less</a>, ou <a href="http://stylus-lang.com/">Stylus,</a> dans votre code d'exemple MDN. MDN documente le langage CSS classique, et l'utilisation de préprocesseurs ne sert qu'à élever la barre pour comprendre les exemples, ce qui peut potentiellement perdre les lecteurs.</p> +- [Points de syntaxe CSS spécifiques](#specific_css_syntax_points) -<h3 id="Dont_use_specific_CSS_methodologies">N'utilisez pas de méthodologies CSS spécifiques</h3> + - [Désactiver les bordures et autres propriétés](#turning_off_borders_and_other_properties) + - [Utilisez des requêtes média "mobile first"](#use_mobile_first_media_queries) -<p>Dans le même esprit que la directive précédente, n'écrivez pas de code d'exemple MDN en utilisant une méthodologie CSS spécifique telle que <a href="http://getbem.com/naming/">BEM</a> ou <a href="https://smacss.com/">SMACSS</a>. Même s'il s'agit de syntaxe CSS valide, les conventions de dénomination peuvent prêter à confusion pour les personnes qui ne sont pas familières avec ces méthodologies.</p> +- [Sélecteurs](#selectors) -<h3 id="Use_flexiblerelative_units">Utiliser des unités flexibles/relatives</h3> + - [N'utilisez pas de sélecteurs ID](#dont_use_id_selectors) + - [Mettre les sélecteurs multiples sur des lignes séparées](#put_multiple_selectors_on_separate_lines) -<p>Pour une flexibilité maximale sur le plus grand nombre possible d'appareils, il est judicieux de dimensionner les conteneurs, le <code>padding</code>, etc. en utilisant des unités relatives comme les <code>em</code> et les <code>rem</code>, ou des pourcentages et des unités de « viewport » si vous souhaitez qu'ils varient en fonction de la largeur du « viewport ». Vous pouvez en savoir plus à ce sujet dans notre article <a href="/fr/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks#fluid_grids">Éléments de construction d'un design adaptatif (Responsive Design)</a>.</p> +## Lignes directrices de haut niveau -<h3 id="Dont_use_resets">Ne pas utiliser de réinitialisation</h3> +### N'utilisez pas de préprocesseurs -<p>Pour un contrôle maximal des CSS sur toutes les plates-formes, beaucoup de gens avaient l'habitude d'utiliser les réinitialisations CSS pour supprimer tous les styles, avant de reconstruire les choses eux-mêmes. Cette méthode a certainement ses mérites, mais surtout dans le monde moderne, les réinitialisations CSS peuvent être excessives et entraîner beaucoup de temps supplémentaire passé à réimplémenter des choses qui n'étaient pas complètement cassées au départ, comme les marges par défaut, les styles de liste, etc.</p> +N'utilisez pas la syntaxe des préprocesseurs, ex. [Sass](https://sass-lang.com/), [Less](http://lesscss.org/), ou [Stylus,](http://stylus-lang.com/) dans votre code d'exemple MDN. MDN documente le langage CSS classique, et l'utilisation de préprocesseurs ne sert qu'à élever la barre pour comprendre les exemples, ce qui peut potentiellement perdre les lecteurs. -<p>Si vous avez vraiment envie d'utiliser une réinitialisation, envisagez d'utiliser <a href="https://necolas.github.io/normalize.css/">normalize.css de Nicolas Gallagher</a>, qui vise simplement à rendre les choses plus cohérentes d'un navigateur à l'autre, à se débarrasser de certains désagréments par défaut que nous supprimons toujours (les marges sur <code><body></code>, par exemple) et à corriger quelques bogues.</p> +### N'utilisez pas de méthodologies CSS spécifiques -<h3 id="Plan_your_CSS_—_avoid_overriding">Planifiez votre CSS — évitez les surcharges</h3> +Dans le même esprit que la directive précédente, n'écrivez pas de code d'exemple MDN en utilisant une méthodologie CSS spécifique telle que [BEM](http://getbem.com/naming/) ou [SMACSS](https://smacss.com/). Même s'il s'agit de syntaxe CSS valide, les conventions de dénomination peuvent prêter à confusion pour les personnes qui ne sont pas familières avec ces méthodologies. -<p>Avant de vous lancer dans l'écriture de gros morceaux de CSS, planifiez soigneusement vos styles. Quels styles généraux seront nécessaires, quelles mises en page différentes devrez-vous créer, quelles redéfinitions spécifiques devront être créées et seront-elles réutilisables ? Par-dessus tout, vous devez essayer d'éviter de créer trop de redéfinitions. Si vous vous retrouvez constamment en train d'écrire des styles pour ensuite les annuler quelques règles plus bas, vous devez probablement repenser votre stratégie.</p> +### Utiliser des unités flexibles/relatives -<h2 id="General_CSS_coding_style">Style général de codage CSS</h2> +Pour une flexibilité maximale sur le plus grand nombre possible d'appareils, il est judicieux de dimensionner les conteneurs, le `padding`, etc. en utilisant des unités relatives comme les `em` et les `rem`, ou des pourcentages et des unités de « viewport » si vous souhaitez qu'ils varient en fonction de la largeur du « viewport ». Vous pouvez en savoir plus à ce sujet dans notre article [Éléments de construction d'un design adaptatif (Responsive Design)](/fr/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks#fluid_grids). -<h3 id="Use_expanded_syntax">Utiliser une syntaxe étendue</h3> +### Ne pas utiliser de réinitialisation -<p>Vous pouvez utiliser différents styles d'écriture CSS, mais nous préférons le style étendu, avec le sélecteur/l'accolade ouvrante, l'accolade fermante et chaque déclaration sur une ligne distincte. Cela optimise la lisibilité et favorise la cohérence sur le MDN.</p> +Pour un contrôle maximal des CSS sur toutes les plates-formes, beaucoup de gens avaient l'habitude d'utiliser les réinitialisations CSS pour supprimer tous les styles, avant de reconstruire les choses eux-mêmes. Cette méthode a certainement ses mérites, mais surtout dans le monde moderne, les réinitialisations CSS peuvent être excessives et entraîner beaucoup de temps supplémentaire passé à réimplémenter des choses qui n'étaient pas complètement cassées au départ, comme les marges par défaut, les styles de liste, etc. -<p>Utilisez ceci :</p> +Si vous avez vraiment envie d'utiliser une réinitialisation, envisagez d'utiliser [normalize.css de Nicolas Gallagher](https://necolas.github.io/normalize.css/), qui vise simplement à rendre les choses plus cohérentes d'un navigateur à l'autre, à se débarrasser de certains désagréments par défaut que nous supprimons toujours (les marges sur `<body>`, par exemple) et à corriger quelques bogues. -<pre class="brush: css example-good">p { +### Planifiez votre CSS — évitez les surcharges + +Avant de vous lancer dans l'écriture de gros morceaux de CSS, planifiez soigneusement vos styles. Quels styles généraux seront nécessaires, quelles mises en page différentes devrez-vous créer, quelles redéfinitions spécifiques devront être créées et seront-elles réutilisables ? Par-dessus tout, vous devez essayer d'éviter de créer trop de redéfinitions. Si vous vous retrouvez constamment en train d'écrire des styles pour ensuite les annuler quelques règles plus bas, vous devez probablement repenser votre stratégie. + +## Style général de codage CSS + +### Utiliser une syntaxe étendue + +Vous pouvez utiliser différents styles d'écriture CSS, mais nous préférons le style étendu, avec le sélecteur/l'accolade ouvrante, l'accolade fermante et chaque déclaration sur une ligne distincte. Cela optimise la lisibilité et favorise la cohérence sur le MDN. + +Utilisez ceci : + +```css example-good +p { color: white; background-color: black; padding: 1rem; -}</pre> +} +``` -<p>Pas cela :</p> +Pas cela : -<pre class="brush: css example-bad">p { color: white; background-color: black; padding: 1rem; }</pre> +```css example-bad +p { color: white; background-color: black; padding: 1rem; } +``` -<p>En outre, gardez ces spécificités à l'esprit :</p> +En outre, gardez ces spécificités à l'esprit : -<ul> - <li>Insérez un espace entre le(s) sélecteur(s) et l'accolade ouvrante.</li> - <li>Incluez toujours un point-virgule à la fin de la dernière déclaration, même si ce n'est pas strictement nécessaire.</li> - <li>Mettez l'accolade de fermeture sur une nouvelle ligne.</li> - <li>Dans chaque déclaration, mettez un espace après les deux points de séparation, mais pas avant.</li> - <li>Utilisez 2 espaces pour l'indentation du code.</li> -</ul> +- Insérez un espace entre le(s) sélecteur(s) et l'accolade ouvrante. +- Incluez toujours un point-virgule à la fin de la dernière déclaration, même si ce n'est pas strictement nécessaire. +- Mettez l'accolade de fermeture sur une nouvelle ligne. +- Dans chaque déclaration, mettez un espace après les deux points de séparation, mais pas avant. +- Utilisez 2 espaces pour l'indentation du code. -<h3 id="Favor_longhand_rules_over_terse_shorthand">Privilégiez les règles longues aux règles raccourcies</h3> +### Privilégiez les règles longues aux règles raccourcies -<p>En général, lorsque vous enseignez les spécificités de la syntaxe CSS, il est plus clair et plus évident d'utiliser des propriétés longues plutôt que des raccourcies (à moins bien sûr que l'enseignement du raccourci ne soit le but de l'exemple). N'oubliez pas que les exemples du MDN ont pour but d'enseigner aux gens, et non d'être efficaces ou astucieuses.</p> +En général, lorsque vous enseignez les spécificités de la syntaxe CSS, il est plus clair et plus évident d'utiliser des propriétés longues plutôt que des raccourcies (à moins bien sûr que l'enseignement du raccourci ne soit le but de l'exemple). N'oubliez pas que les exemples du MDN ont pour but d'enseigner aux gens, et non d'être efficaces ou astucieuses. -<p>Tout d'abord, il est souvent plus difficile de comprendre ce que fait le raccourci. Il faut un certain temps pour comprendre exactement ce que fait la syntaxe <a href="/fr/docs/Web/CSS/font"><code>font</code></a>, par exemple :</p> +Tout d'abord, il est souvent plus difficile de comprendre ce que fait le raccourci. Il faut un certain temps pour comprendre exactement ce que fait la syntaxe [`font`](/fr/docs/Web/CSS/font), par exemple : -<pre class="brush: css">font: small-caps bold 2rem/1.5 sans-serif;</pre> +```css +font: small-caps bold 2rem/1.5 sans-serif; +``` -<p>Alors que celle-ci est plus immédiate en termes de compréhension :</p> +Alors que celle-ci est plus immédiate en termes de compréhension : -<pre class="brush: css">font-variant: small-caps; +```css +font-variant: small-caps; font-weight: bold; font-size: 2rem; line-height: 1.5; -font-family: sans-serif;</pre> - -<p>Deuxièmement, les raccourcis CSS comportent des pièges potentiels supplémentaires : des valeurs par défaut sont définies pour des parties de la syntaxe que vous n'avez pas explicitement définies, ce qui peut produire des réinitialisations inattendues des valeurs que vous avez définies plus tôt dans la cascade, ou d'autres effets attendus. Par exemple, la propriété <a href="/fr/docs/Web/CSS/grid"><code>grid</code></a> définit toutes les valeurs par défaut suivantes pour les éléments qui ne sont pas spécifiés :</p> - -<ul> - <li><a href="/fr/docs/Web/CSS/grid-template-rows"><code>grid-template-rows</code></a>: <code>none</code></li> - <li><a href="/fr/docs/Web/CSS/grid-template-columns"><code>grid-template-columns</code></a>: <code>none</code></li> - <li><a href="/fr/docs/Web/CSS/grid-template-areas"><code>grid-template-areas</code></a>: <code>none</code></li> - <li><a href="/fr/docs/Web/CSS/grid-auto-rows"><code>grid-auto-rows</code></a>: <code>auto</code></li> - <li><a href="/fr/docs/Web/CSS/grid-auto-columns"><code>grid-auto-columns</code></a>: <code>auto</code></li> - <li><a href="/fr/docs/Web/CSS/grid-auto-flow"><code>grid-auto-flow</code></a>: <code>row</code></li> - <li><a href="/fr/docs/Web/CSS/column-gap"><code>column-gap</code></a>: <code>0</code></li> - <li><a href="/fr/docs/Web/CSS/row-gap"><code>row-gap</code></a>: <code>0</code></li> - <li><a href="/fr/docs/Web/CSS/column-gap"><code>column-gap</code></a>: <code>normal</code></li> - <li><a href="/fr/docs/Web/CSS/row-gap"><code>row-gap</code></a>: <code>normal</code></li> -</ul> - -<p>En outre, certains raccourcis ne fonctionnent comme prévu que si vous incluez les différents composants de la valeur dans un certain ordre. Dans les animations CSS, par exemple :</p> - -<pre class="brush: css">/* duration | timing-function | delay | iteration-count +font-family: sans-serif; +``` + +Deuxièmement, les raccourcis CSS comportent des pièges potentiels supplémentaires : des valeurs par défaut sont définies pour des parties de la syntaxe que vous n'avez pas explicitement définies, ce qui peut produire des réinitialisations inattendues des valeurs que vous avez définies plus tôt dans la cascade, ou d'autres effets attendus. Par exemple, la propriété [`grid`](/fr/docs/Web/CSS/grid) définit toutes les valeurs par défaut suivantes pour les éléments qui ne sont pas spécifiés : + +- [`grid-template-rows`](/fr/docs/Web/CSS/grid-template-rows): `none` +- [`grid-template-columns`](/fr/docs/Web/CSS/grid-template-columns): `none` +- [`grid-template-areas`](/fr/docs/Web/CSS/grid-template-areas): `none` +- [`grid-auto-rows`](/fr/docs/Web/CSS/grid-auto-rows): `auto` +- [`grid-auto-columns`](/fr/docs/Web/CSS/grid-auto-columns): `auto` +- [`grid-auto-flow`](/fr/docs/Web/CSS/grid-auto-flow): `row` +- [`column-gap`](/fr/docs/Web/CSS/column-gap): `0` +- [`row-gap`](/fr/docs/Web/CSS/row-gap): `0` +- [`column-gap`](/fr/docs/Web/CSS/column-gap): `normal` +- [`row-gap`](/fr/docs/Web/CSS/row-gap): `normal` + +En outre, certains raccourcis ne fonctionnent comme prévu que si vous incluez les différents composants de la valeur dans un certain ordre. Dans les animations CSS, par exemple : + +```css +/* duration | timing-function | delay | iteration-count direction | fill-mode | play-state | name */ -animation: 3s ease-in 1s 2 reverse both paused slidein;</pre> +animation: 3s ease-in 1s 2 reverse both paused slidein; +``` -<p>À titre d'exemple, la première valeur qui peut être analysée comme un <a href="/fr/docs/Web/CSS/time" title="Le type de données CSS <time> ; représente une valeur de temps exprimée en secondes ou en millisecondes. Il est utilisé dans les propriétés d'animation, de transition et autres propriétés connexes."><code><time></code></a> est affecté à la propriété <a href="/fr/docs/Web/CSS/animation-duration" title="La propriété CSS animation-duration définit la durée nécessaire à une animation pour effectuer un cycle. "><code>animation-duration</code></a>, et la seconde est affectée à <a href="/fr/docs/Web/CSS/animation-delay" title="La propriété CSS animation-delay définit le moment où une animation commence. L'animation peut démarrer plus tard, immédiatement dès son début, ou immédiatement et à mi-chemin de l'animation."><code>animation-delay</code></a>. Pour plus de détails, lisez l'intégralité de <a href="/fr/docs/Web/CSS/animation#syntax">syntaxe de l'animation</a>.</p> +À titre d'exemple, la première valeur qui peut être analysée comme un [`<time>`](/fr/docs/Web/CSS/time "Le type de données CSS <time> ; représente une valeur de temps exprimée en secondes ou en millisecondes. Il est utilisé dans les propriétés d'animation, de transition et autres propriétés connexes.") est affecté à la propriété [`animation-duration`](/fr/docs/Web/CSS/animation-duration "La propriété CSS animation-duration définit la durée nécessaire à une animation pour effectuer un cycle. "), et la seconde est affectée à [`animation-delay`](/fr/docs/Web/CSS/animation-delay "La propriété CSS animation-delay définit le moment où une animation commence. L'animation peut démarrer plus tard, immédiatement dès son début, ou immédiatement et à mi-chemin de l'animation."). Pour plus de détails, lisez l'intégralité de [syntaxe de l'animation](/fr/docs/Web/CSS/animation#syntax). -<h3 id="Use_double_quotes_around_values">Utilisez des guillemets doubles autour des valeurs</h3> +### Utilisez des guillemets doubles autour des valeurs -<p>Lorsque des guillemets peuvent ou doivent être inclus, utilisez-les, et utilisez des guillemets doubles. Par exemple :</p> +Lorsque des guillemets peuvent ou doivent être inclus, utilisez-les, et utilisez des guillemets doubles. Par exemple : -<pre class="brush: css example-good">[data-vegetable="liquid"] { +```css example-good +[data-vegetable="liquid"] { background-color: goldenrod; background-image: url("../../media/examples/lizard.png"); -}</pre> +} +``` -<h3 id="Spacing_around_function_parameters">Espacement autour des paramètres de la fonction</h3> +### Espacement autour des paramètres de la fonction -<p>Les paramètres des fonctions doivent comporter des espaces après les virgules de séparation, mais pas avant :</p> +Les paramètres des fonctions doivent comporter des espaces après les virgules de séparation, mais pas avant : -<pre class="brush: css example-good">color: rgb(255, 0, 0); -background-image: linear-gradient(to bottom, red, black);</pre> +```css example-good +color: rgb(255, 0, 0); +background-image: linear-gradient(to bottom, red, black); +``` -<h3 id="CSS_comments">Commentaires CSS</h3> +### Commentaires CSS -<p>Utilisez des commentaires de style CSS pour commenter le code qui n'est pas auto-documenté :</p> +Utilisez des commentaires de style CSS pour commenter le code qui n'est pas auto-documenté : -<pre class="brush: css example-good">/* Il s'agit d'un commentaire de style CSS */</pre> +```css example-good +/* Il s'agit d'un commentaire de style CSS */ +``` -<p>Mettez vos commentaires sur des lignes séparées précédant le code auquel ils se réfèrent :</p> +Mettez vos commentaires sur des lignes séparées précédant le code auquel ils se réfèrent : -<pre class="brush: css example-good">h3 { +```css example-good +h3 { /* Crée une ombre portée rouge, décalée de 1px vers la droite et le bas, avec un rayon de flou de 2px. */ text-shadow: 1px 1px 2px red; /* Définit la taille de la police au double de la taille de la police du document par défaut. */ font-size: 2rem; -}</pre> +} +``` -<p>Notez également que vous devez laisser un espace entre les astérisques et le commentaire, dans chaque cas.</p> +Notez également que vous devez laisser un espace entre les astérisques et le commentaire, dans chaque cas. -<h3 id="Dont_use_!important">Ne pas utiliser !important</h3> +### Ne pas utiliser !important -<p><code>!important</code> est un dernier recours généralement utilisé uniquement lorsque vous devez remplacer quelque chose et qu'il n'y a pas d'autre moyen. Il s'agit d'une mauvaise pratique que vous devez éviter dans la mesure du possible.</p> +`!important` est un dernier recours généralement utilisé uniquement lorsque vous devez remplacer quelque chose et qu'il n'y a pas d'autre moyen. Il s'agit d'une mauvaise pratique que vous devez éviter dans la mesure du possible. -<p>Mauvais usage :</p> +Mauvais usage : -<pre class="brush: css example-bad">.bad-code { +```css example-bad +.bad-code { font-size: 4rem !important; -}</pre> +} +``` -<h2 id="Specific_CSS_syntax_points">Points de syntaxe CSS spécifiques</h2> +## Points de syntaxe CSS spécifiques -<h3 id="Turning_off_borders_and_other_properties">Désactiver les bordures et autres propriétés</h3> +### Désactiver les bordures et autres propriétés -<p>Lorsque vous désactivez les bordures (et toute autre propriété qui peut prendre <code>0</code> ou <code>none</code> comme valeurs), utilisez <code>0</code> plutôt que <code>none</code> :</p> +Lorsque vous désactivez les bordures (et toute autre propriété qui peut prendre `0` ou `none` comme valeurs), utilisez `0` plutôt que `none` : -<pre class="brush: css example-good">border: 0;</pre> +```css example-good +border: 0; +``` -<h3 id="Use_mobile_first_media_queries">Utilisez des requêtes média "mobile first"</h3> +### Utilisez des requêtes média "mobile first" -<p>Lorsque vous incluez différents ensembles de styles pour différentes tailles de fenêtres d'affichage à l'aide de requêtes de médias dans la même feuille de style, il est judicieux de faire en sorte que le style par défaut avant l'application de toute requête de médias au document soit le style pour écran étroit/mobile, puis de le remplacer pour les fenêtres d'affichage plus larges dans des requêtes de médias successives.</p> +Lorsque vous incluez différents ensembles de styles pour différentes tailles de fenêtres d'affichage à l'aide de requêtes de médias dans la même feuille de style, il est judicieux de faire en sorte que le style par défaut avant l'application de toute requête de médias au document soit le style pour écran étroit/mobile, puis de le remplacer pour les fenêtres d'affichage plus larges dans des requêtes de médias successives. -<pre class="brush: css example-good">/* Mise en page CSS par défaut pour les écrans étroits */ +```css example-good +/* Mise en page CSS par défaut pour les écrans étroits */ @media (min-width: 480px) { /* CSS pour les écrans de largeur moyenne */ @@ -208,48 +219,57 @@ background-image: linear-gradient(to bottom, red, black);</pre> @media (min-width: 1100px) { /* CSS pour les écrans très larges */ -}</pre> +} +``` -<p>Cela présente de nombreux avantages, exposés dans notre article <a href="/fr/docs/Web/Progressive_web_apps/Responsive/Mobile_first">Priorité aux mobiles</a>.</p> +Cela présente de nombreux avantages, exposés dans notre article [Priorité aux mobiles](/fr/docs/Web/Progressive_web_apps/Responsive/Mobile_first). -<h2 id="Selectors">Sélecteurs</h2> +## Sélecteurs -<h3 id="Dont_use_ID_selectors">N'utilisez pas de sélecteurs ID</h3> +### N'utilisez pas de sélecteurs ID -<p>Il n'est pas vraiment nécessaire d'utiliser des sélecteurs d'ID - ils sont moins flexibles (vous ne pouvez pas en ajouter d'autres si vous découvrez que vous en avez besoin de plus d'un), et il est plus difficile de les remplacer si nécessaire, car ils sont plus spécifiques que les classes.</p> +Il n'est pas vraiment nécessaire d'utiliser des sélecteurs d'ID - ils sont moins flexibles (vous ne pouvez pas en ajouter d'autres si vous découvrez que vous en avez besoin de plus d'un), et il est plus difficile de les remplacer si nécessaire, car ils sont plus spécifiques que les classes. -<p>Bonne pratique :</p> +Bonne pratique : -<pre class="brush: css example-good">.editorial-summary { +```css example-good +.editorial-summary { ... -}</pre> +} +``` -<p>Mauvaise pratique :</p> +Mauvaise pratique : -<pre class="brush: css example-bad">#editorial-summary { +```css example-bad +#editorial-summary { ... -}</pre> +} +``` -<h3 id="Put_multiple_selectors_on_separate_lines">Mettre les sélecteurs multiples sur des lignes séparées</h3> +### Mettre les sélecteurs multiples sur des lignes séparées -<p>Lorsqu'une règle comporte plusieurs sélecteurs, placez chaque sélecteur sur une nouvelle ligne. La liste des sélecteurs est ainsi plus facile à lire et les lignes de code sont plus courtes.</p> +Lorsqu'une règle comporte plusieurs sélecteurs, placez chaque sélecteur sur une nouvelle ligne. La liste des sélecteurs est ainsi plus facile à lire et les lignes de code sont plus courtes. -<p>Faites ceci :</p> +Faites ceci : -<pre class="brush: css example-good">h1, +```css example-good +h1, h2, h3 { font-family: sans-serif; text-align: center; -}</pre> +} +``` -<p>Pas ça :</p> +Pas ça : -<pre class="brush: css example-bad">h1, h2, h3 { +```css example-bad +h1, h2, h3 { font-family: sans-serif; text-align: center; -}</pre> +} +``` -<h2 id="Good_CSS_examples_on_MDN">De bons exemples de CSS sur MDN</h2> +## De bons exemples de CSS sur MDN -<p>Vous pouvez trouver de bons extraits CSS concis et significatifs en haut de nos pages de référence des propriétés CSS - parcourez notre <a href="/fr/docs/Web/CSS/Reference#keyword_index">index des mots-clés CSS</a> pour en trouver. Nos exemples interactifs sont généralement écrits pour suivre les directives ci-dessus, mais sachez qu'ils peuvent différer à certains endroits, car ils ont pour la plupart été écrits avant la nouvelle rédaction des directives.</p> +Vous pouvez trouver de bons extraits CSS concis et significatifs en haut de nos pages de référence des propriétés CSS - parcourez notre [index des mots-clés CSS](/fr/docs/Web/CSS/Reference#keyword_index) pour en trouver. Nos exemples interactifs sont généralement écrits pour suivre les directives ci-dessus, mais sachez qu'ils peuvent différer à certains endroits, car ils ont pour la plupart été écrits avant la nouvelle rédaction des directives. diff --git a/files/fr/mdn/guidelines/code_guidelines/general/index.md b/files/fr/mdn/guidelines/code_guidelines/general/index.md index d35985d1aa..f589c55b7a 100644 --- a/files/fr/mdn/guidelines/code_guidelines/general/index.md +++ b/files/fr/mdn/guidelines/code_guidelines/general/index.md @@ -9,159 +9,162 @@ tags: - MDN Meta translation_of: MDN/Guidelines/Code_guidelines/General --- -<div>{{MDNSidebar}}</div> +{{MDNSidebar}} -<p>Les directives suivantes concernant les exemples de code s'appliquent à tout le code, qu'il s'agisse de HTML, de CSS, de JavaScript ou d'autre chose.</p> +Les directives suivantes concernant les exemples de code s'appliquent à tout le code, qu'il s'agisse de HTML, de CSS, de JavaScript ou d'autre chose. -<h2 id="In_this_article">Dans cet article</h2> +## Dans cet article -<ul> - <li><a href="#indentation_spacing_size">Indentation, espacement, taille</a> +- [Indentation, espacement, taille](#indentation_spacing_size) - <ul> - <li><a href="#indentation">Indentation</a></li> - <li><a href="#code_line_length">Longueur des lignes de code</a></li> - <li><a href="#code_block_height">Hauteur des blocs de code</a></li> - </ul> - </li> - <li><a href="#guidelines_for_displaying_examples">Directives pour l'affichage des exemples</a> - <ul> - <li><a href="#size_of_rendered_example">Taille du rendu des exemples</a></li> - <li><a href="#use_of_images_and_other_media">Utilisation d'images et d'autres médias</a></li> - <li><a href="#use_of_color">Utilisation de la couleur</a></li> - <li><a href="#highlight_good_and_bad_practice_examples">Mettre en évidence les exemples de bonnes et de mauvaises pratiques</a></li> - </ul> - </li> - <li><a href="#writing_syntax_sections_on_reference_pages">Rédaction de sections syntaxiques sur les pages de référence</a></li> -</ul> + - [Indentation](#indentation) + - [Longueur des lignes de code](#code_line_length) + - [Hauteur des blocs de code](#code_block_height) -<h2 id="Indentation_spacing_size">Indentation, espacement, taille</h2> +- [Directives pour l'affichage des exemples](#guidelines_for_displaying_examples) -<h3 id="Indentation">Indentation</h3> + - [Taille du rendu des exemples](#size_of_rendered_example) + - [Utilisation d'images et d'autres médias](#use_of_images_and_other_media) + - [Utilisation de la couleur](#use_of_color) + - [Mettre en évidence les exemples de bonnes et de mauvaises pratiques](#highlight_good_and_bad_practice_examples) -<p>Tout le code doit utiliser 2 espaces pour l'indentation, par exemple :</p> +- [Rédaction de sections syntaxiques sur les pages de référence](#writing_syntax_sections_on_reference_pages) -<pre class="brush: html example-good"><div> - <p>C'est mon paragraphe.</p> -</div></pre> +## Indentation, espacement, taille -<pre class="brush: js example-good">function myFunc() { +### Indentation + +Tout le code doit utiliser 2 espaces pour l'indentation, par exemple : + +```html example-good +<div> + <p>C'est mon paragraphe.</p> +</div> +``` + +```js example-good +function myFunc() { if(thingy) { console.log('Ouaip, ça a marché.'); } -}</pre> +} +``` -<h3 id="Code_line_length">Longueur des lignes de code</h3> +### Longueur des lignes de code -<p>Les lignes de code ne doivent pas comporter plus de 80 caractères (64 pour les <a href="https://github.com/mdn/interactive-examples">exemples interactifs</a>). Vous devez rompre les lignes de manière raisonnable pour des raisons de lisibilité, mais pas au détriment des bonnes pratiques.</p> +Les lignes de code ne doivent pas comporter plus de 80 caractères (64 pour les [exemples interactifs](https://github.com/mdn/interactive-examples)). Vous devez rompre les lignes de manière raisonnable pour des raisons de lisibilité, mais pas au détriment des bonnes pratiques. -<p>Par exemple, ceci n'est pas génial :</p> +Par exemple, ceci n'est pas génial : -<pre class="brush: js example-bad">let tommyCat = 'Dit Tommy le chat en reculant pour évacuer tout corps étranger qui aurait pu se loger dans sa puissante gorge. Plus d'un gros rat de gouttière avait trouvé la mort en regardant à bout portant le canon caverneux de cette impressionnante machine à rôder.';</pre> +```js example-bad +let tommyCat = 'Dit Tommy le chat en reculant pour évacuer tout corps étranger qui aurait pu se loger dans sa puissante gorge. Plus d'un gros rat de gouttière avait trouvé la mort en regardant à bout portant le canon caverneux de cette impressionnante machine à rôder.'; +``` -<p>C'est mieux, mais un peu gênant :</p> +C'est mieux, mais un peu gênant : -<pre class="brush: js">let tommyCat = 'Dit Tommy le chat en reculant pour évacuer tout corps étranger ' +```js +let tommyCat = 'Dit Tommy le chat en reculant pour évacuer tout corps étranger ' + 'qui aurait pu se loger dans sa puissante gorge. Plus d’un gros rat de gouttière ' + 'avait trouvé la mort en regardant à bout portant le canon caverneux de cette ' -+ 'impressionnante machine à rôder.';</pre> ++ 'impressionnante machine à rôder.'; +``` -<p>Une meilleure solution consiste à utiliser un <i>template</i> :</p> +Une meilleure solution consiste à utiliser un _template_ : -<pre class="brush: js example-good">let tommyCat = `Dit Tommy le chat en reculant pour évacuer tout corps étranger +```js example-good +let tommyCat = `Dit Tommy le chat en reculant pour évacuer tout corps étranger qui aurait pu se loger dans sa puissante gorge. Plus d'un gros rat de gouttière avait trouvé la mort en regardant à bout portant le canon caverneux de cette - impressionnante machine à rôder.`;</pre> + impressionnante machine à rôder.`; +``` -<h3 id="Code_block_height">Hauteur des blocs de code</h3> +### Hauteur des blocs de code -<p>Les blocs de code doivent être aussi longs que nécessaire, mais pas plus. L'idéal est de viser quelque chose de court, comme 15 à 25 lignes. Si un bloc de code doit être beaucoup plus long, envisagez de ne montrer que l'extrait le plus utile et de créer un lien vers l'exemple complet sur un repo GitHub ou un CodePen, par exemple.</p> +Les blocs de code doivent être aussi longs que nécessaire, mais pas plus. L'idéal est de viser quelque chose de court, comme 15 à 25 lignes. Si un bloc de code doit être beaucoup plus long, envisagez de ne montrer que l'extrait le plus utile et de créer un lien vers l'exemple complet sur un repo GitHub ou un CodePen, par exemple. -<h2 id="Guidelines_for_displaying_examples">Directives pour l'affichage des exemples</h2> +## Directives pour l'affichage des exemples -<h3 id="Size_of_rendered_example">Taille du rendu des exemples</h3> +### Taille du rendu des exemples -<p>Le volet de contenu principal de MDN a une largeur d'environ 700px sur un ordinateur de bureau. Les exemples intégrés à MDN doivent donc avoir une apparence correcte à cette largeur (définissez la largeur des exemples intégrés à 100%).</p> +Le volet de contenu principal de MDN a une largeur d'environ 700px sur un ordinateur de bureau. Les exemples intégrés à MDN doivent donc avoir une apparence correcte à cette largeur (définissez la largeur des exemples intégrés à 100%). -<p>En ce qui concerne la hauteur, nous vous recommandons de maintenir l'exemple rendu à moins de 700px de hauteur si possible, pour une lisibilité maximale à l'écran.</p> +En ce qui concerne la hauteur, nous vous recommandons de maintenir l'exemple rendu à moins de 700px de hauteur si possible, pour une lisibilité maximale à l'écran. -<p>Vous devriez également penser à rendre vos exemples plus ou moins adaptables, afin qu'ils soient également utiles sur les appareils mobiles.</p> +Vous devriez également penser à rendre vos exemples plus ou moins adaptables, afin qu'ils soient également utiles sur les appareils mobiles. -<h3 id="Use_of_images_and_other_media">Utilisation d'images et d'autres médias</h3> +### Utilisation d'images et d'autres médias -<p>Parfois, vous voudrez inclure des images ou d'autres médias dans un exemple. Si vous le faites :</p> +Parfois, vous voudrez inclure des images ou d'autres médias dans un exemple. Si vous le faites : -<ul> - <li>Assurez-vous que leur licence vous permet de les utiliser. Essayez d'utiliser des médias dont la licence est très permissive, comme <a href="https://creativecommons.org/share-your-work/public-domain/cc0/">CC0</a>, ou au moins compatible avec notre licence générale de contenu - <a href="https://creativecommons.org/licenses/by-sa/2.5/">Licence Creative Commons Attribution-ShareAlike</a> (CC-BY-SA).</li> - <li>Pour les images, faites-les passer par <a href="https://tinypng.com">https://tinypng.com</a> ou <a href="https://imageoptim.com">https://imageoptim.com</a>, pour réduire le poids de la page des exemples.</li> - <li>Pour le <code>SVG</code>, exécutez le code via <a href="https://jakearchibald.github.io/svgomg/">SVGOMG</a>, et assurez-vous que le fichier <code>SVG</code> comporte une ligne vide à la fin du fichier.</li> - <li> - <p>Lorsque vous affichez des icônes sur une page (ex. via <a href="/fr/docs/Web/CSS/background-image"><code>background-image</code></a>), utilisez les icônes du référentiel <a href="https://github.com/mdn/mdn-dinocons">mdn-dinocons</a>, le cas échéant, et essayez de correspondre à leur style dans les autres cas.</p> - </li> -</ul> +- Assurez-vous que leur licence vous permet de les utiliser. Essayez d'utiliser des médias dont la licence est très permissive, comme [CC0](https://creativecommons.org/share-your-work/public-domain/cc0/), ou au moins compatible avec notre licence générale de contenu - [Licence Creative Commons Attribution-ShareAlike](https://creativecommons.org/licenses/by-sa/2.5/) (CC-BY-SA). +- Pour les images, faites-les passer par <https://tinypng.com> ou <https://imageoptim.com>, pour réduire le poids de la page des exemples. +- Pour le `SVG`, exécutez le code via [SVGOMG](https://jakearchibald.github.io/svgomg/), et assurez-vous que le fichier `SVG` comporte une ligne vide à la fin du fichier. +- Lorsque vous affichez des icônes sur une page (ex. via [`background-image`](/fr/docs/Web/CSS/background-image)), utilisez les icônes du référentiel [mdn-dinocons](https://github.com/mdn/mdn-dinocons), le cas échéant, et essayez de correspondre à leur style dans les autres cas. -<h3 id="Use_of_color">Utilisation de la couleur</h3> +### Utilisation de la couleur -<p>Minuscule pour l'hexadécimal, peut utiliser des mots-clés pour les nuances et les couleurs primaires (ex. : black, white, red), utiliser des schémas plus complexes uniquement si nécessaire (ex. : pour inclure la transparence).</p> +Minuscule pour l'hexadécimal, peut utiliser des mots-clés pour les nuances et les couleurs primaires (ex. : black, white, red), utiliser des schémas plus complexes uniquement si nécessaire (ex. : pour inclure la transparence). -<p>Préférez utiliser des mots-clés pour les couleurs primaires et autres couleurs "de base", par exemple :</p> +Préférez utiliser des mots-clés pour les couleurs primaires et autres couleurs "de base", par exemple : -<pre class="brush: css example-good"> +```css example-good color: black; color: white; color: red; -</pre> +``` -<p>Utilisez rgb() pour des couleurs plus complexes (y compris les couleurs semi-transparentes) :</p> +Utilisez rgb() pour des couleurs plus complexes (y compris les couleurs semi-transparentes) : -<pre class="brush: css example-good"> +```css example-good color: rgb(0, 0, 0, 0.5); color: rgb(248, 242, 230); -</pre> +``` -<p>Si vous devez utiliser des couleurs hexadécimales, utilisez des minuscules :</p> +Si vous devez utiliser des couleurs hexadécimales, utilisez des minuscules : -<pre class="brush: css example-good"> +```css example-good color: #058ed9; color: #a39a92; -</pre> +``` -<p>et utilisez la forme abrégée le cas échéant :</p> +et utilisez la forme abrégée le cas échéant : -<pre class="brush: css example-good"> +```css example-good color: #ff0; color: #fff; -</pre> +``` -<p>Le fichier <a href="https://github.com/mdn/mdn-minimalist/blob/main/sass/vars/_color-palette.scss">sass/vars/_color-palette.scss</a> du dépôt <a href="https://github.com/mdn/mdn-minimalist">mdn-minimalist</a> comporte un ensemble de couleurs utiles qui complètent le design général de MDN.</p> +Le fichier [sass/vars/\_color-palette.scss](https://github.com/mdn/mdn-minimalist/blob/main/sass/vars/_color-palette.scss) du dépôt [mdn-minimalist](https://github.com/mdn/mdn-minimalist) comporte un ensemble de couleurs utiles qui complètent le design général de MDN. -<h3 id="Highlight_good_and_bad_practice_examples">Mettre en évidence les exemples de bonnes et de mauvaises pratiques</h3> +### Mettre en évidence les exemples de bonnes et de mauvaises pratiques -<p>Comme vous le remarquerez en parcourant ces lignes directrices, les blocs de code censés être des exemples de bonnes pratiques sont marqués d'un fond en vert, et les blocs de code censés être des exemples de mauvaises pratiques sont marqués d'un fond en rouge.</p> +Comme vous le remarquerez en parcourant ces lignes directrices, les blocs de code censés être des exemples de bonnes pratiques sont marqués d'un fond en vert, et les blocs de code censés être des exemples de mauvaises pratiques sont marqués d'un fond en rouge. -<p>Pour ce faire, vous devez d'abord utiliser les commandes de l'éditeur MDN pour placer votre bloc de code dans un bloc <code><pre></code> et lui donner la coloration syntaxique appropriée. La source du code ressemblera à quelque chose comme ceci :</p> +Pour ce faire, vous devez d'abord utiliser les commandes de l'éditeur MDN pour placer votre bloc de code dans un bloc `<pre>` et lui donner la coloration syntaxique appropriée. La source du code ressemblera à quelque chose comme ceci : -<pre class="brush: js"> +```js function myFunc() { console.log('Hello!'); }; -</pre> </pre> +``` -<p>Pour en faire un bon exemple, vous insérez <code>example-good</code> juste avant le guillemet fermant de l'attribut <code>class</code> :</p> +Pour en faire un bon exemple, vous insérez `example-good` juste avant le guillemet fermant de l'attribut `class` : -<pre class="brush: html"><pre class="brush: js example-good"> +```html +<pre class="brush: js example-good"> ... -</pre> +``` -<p>Pour en faire un mauvais exemple, vous insérez <code>example-bad</code> juste avant le guillemet fermant de l'attribut <code>class</code> :</p> +Pour en faire un mauvais exemple, vous insérez `example-bad` juste avant le guillemet fermant de l'attribut `class` : -<pre class="brush: html"><pre class="brush: js example-bad"> +```html +<pre class="brush: js example-bad"> ... -</pre> +``` -<p>Nous aimerions vous encourager à les utiliser. Il n'est pas nécessaire de les utiliser partout, mais seulement lorsque vous signalez spécifiquement les bonnes et mauvaises pratiques dans votre code.</p> +Nous aimerions vous encourager à les utiliser. Il n'est pas nécessaire de les utiliser partout, mais seulement lorsque vous signalez spécifiquement les bonnes et mauvaises pratiques dans votre code. -<h2 id="Writing_syntax_sections_on_reference_pages">Rédaction de sections syntaxiques sur les pages de référence</h2> +## Rédaction de sections syntaxiques sur les pages de référence -<p>Les pages de référence MDN comprennent des sections Syntaxe qui indiquent sans ambiguïté quelle peut/doit être la syntaxe d'une fonctionnalité, par exemple une méthode JavaScript, une propriété CSS, un élément HTML, etc. Des directives pour les rédiger sont données sur le document <a href="/fr/docs/MDN/Structures/Syntax_sections">Sections syntaxiques</a>.</p> +Les pages de référence MDN comprennent des sections Syntaxe qui indiquent sans ambiguïté quelle peut/doit être la syntaxe d'une fonctionnalité, par exemple une méthode JavaScript, une propriété CSS, un élément HTML, etc. Des directives pour les rédiger sont données sur le document [Sections syntaxiques](/fr/docs/MDN/Structures/Syntax_sections). diff --git a/files/fr/mdn/guidelines/code_guidelines/html/index.md b/files/fr/mdn/guidelines/code_guidelines/html/index.md index 086c1f5e34..a6afac4bf9 100644 --- a/files/fr/mdn/guidelines/code_guidelines/html/index.md +++ b/files/fr/mdn/guidelines/code_guidelines/html/index.md @@ -9,154 +9,183 @@ tags: - MDN Meta translation_of: MDN/Guidelines/Code_guidelines/HTML --- -<div>{{MDNSidebar}}</div> +{{MDNSidebar}} -<p>Les directives suivantes couvrent la manière d'écrire du HTML pour les exemples de code MDN.</p> +Les directives suivantes couvrent la manière d'écrire du HTML pour les exemples de code MDN. -<h2 id="In_this_article">Dans cet article</h2> +## Dans cet article -<ul> - <li><a href="#doctype_and_metadata">Doctype et méta-données</a> - <ul> - <li><a href="#doctype">Doctype</a></li> - <li><a href="#document_language">Langue du document</a></li> - <li><a href="#document_characterset">Jeu de caractères du document</a></li> - <li><a href="#viewport_meta_tag">Méta-balise Viewport</a></li> - </ul> - </li> - <li><a href="#general_markup_coding_style">Style général de codage des balises</a> - <ul> - <li><a href="#use_lowercase">Utiliser les minuscules</a></li> - <li><a href="#trailing_slashes">Barre oblique de fermeture (slash)</a></li> - <li><a href="#quoting_attributes">Guillemets des attributs</a></li> - <li><a href="#use_double_quotes">Utiliser les guillemets doubles</a></li> - <li><a href="#boolean_attributes">Attributs booléens</a></li> - <li><a href="#class_and_id_names">Noms de classes et d'ID</a></li> - <li><a href="#entity_references">Références des entités</a></li> - </ul> - </li> -</ul> +- [Doctype et méta-données](#doctype_and_metadata) -<h2 id="Doctype_and_metadata">Doctype et méta-données</h2> + - [Doctype](#doctype) + - [Langue du document](#document_language) + - [Jeu de caractères du document](#document_characterset) + - [Méta-balise Viewport](#viewport_meta_tag) -<div class="notecard note"> -<p><strong>Note :</strong> Les directives de cette section ne s'appliquent que lorsque vous devez montrer un document HTML complet. La plupart du temps, vous n'aurez pas besoin de le faire ; un extrait est généralement suffisant pour démontrer une fonctionnalité. Lorsque vous utilisez la macro <a href="/fr/docs/MDN/Structures/Code_examples#traditional_live_samples">EmbedLiveSample</a>, il suffit d'inclure l'extrait HTML ; il sera automatiquement inséré dans un document HTML complet lors de son affichage.</p> -</div> +- [Style général de codage des balises](#general_markup_coding_style) -<h3 id="Doctype">Doctype</h3> + - [Utiliser les minuscules](#use_lowercase) + - [Barre oblique de fermeture (slash)](#trailing_slashes) + - [Guillemets des attributs](#quoting_attributes) + - [Utiliser les guillemets doubles](#use_double_quotes) + - [Attributs booléens](#boolean_attributes) + - [Noms de classes et d'ID](#class_and_id_names) + - [Références des entités](#entity_references) -<p>Vous devez utiliser le doctype HTML5. Il est court, facile à retenir et rétrocompatible :</p> +## Doctype et méta-données -<pre class="brush: html example-good"><!DOCTYPE html></pre> +> **Note :** Les directives de cette section ne s'appliquent que lorsque vous devez montrer un document HTML complet. La plupart du temps, vous n'aurez pas besoin de le faire ; un extrait est généralement suffisant pour démontrer une fonctionnalité. Lorsque vous utilisez la macro [EmbedLiveSample](/fr/docs/MDN/Structures/Code_examples#traditional_live_samples), il suffit d'inclure l'extrait HTML ; il sera automatiquement inséré dans un document HTML complet lors de son affichage. -<h3 id="Document_language">Langue du document</h3> +### Doctype -<p>Définissez la langue du document à l'aide de l'attribut <a href="/fr/docs/Web/HTML/Global_attributes#lang"><code>lang</code></a> de votre élément <a href="/fr/docs/Web/HTML/Element/html"><code><html></code></a> :</p> +Vous devez utiliser le doctype HTML5. Il est court, facile à retenir et rétrocompatible : -<pre class="brush: html example-good"><html lang="fr"></pre> +```html example-good +<!DOCTYPE html> +``` -<p>C'est bon pour l'accessibilité et les moteurs de recherche, cela aide à localiser le contenu et cela rappelle aux gens d'utiliser les meilleures pratiques.</p> +### Langue du document -<h3 id="Document_characterset">Jeu de caractères du document</h3> +Définissez la langue du document à l'aide de l'attribut [`lang`](/fr/docs/Web/HTML/Global_attributes#lang) de votre élément [`<html>`](/fr/docs/Web/HTML/Element/html) : -<p>Vous devez également définir le jeu de caractères de votre document comme suit :</p> +```html example-good +<html lang="fr"> +``` -<pre class="brush: html example-good"><meta charset="utf-8"></pre> +C'est bon pour l'accessibilité et les moteurs de recherche, cela aide à localiser le contenu et cela rappelle aux gens d'utiliser les meilleures pratiques. -<p>Utilisez UTF-8 à moins que vous n'ayez une très bonne raison de ne pas le faire ; il couvrira vos besoins en caractères à peu près indépendamment de la langue que vous utilisez dans votre document. En outre, vous devriez toujours spécifier le jeu de caractères le plus tôt possible dans le bloc <a href="/fr/docs/Web/HTML/Element/head"><code><head></code></a> de votre HTML (dans le premier kilooctet), car cela vous protège contre une <a href="http://support.microsoft.com/kb/928847">vulnérabilité de sécurité d'Internet Explorer</a>.</p> +### Jeu de caractères du document -<h3 id="Viewport_meta_tag">Méta-balise Viewport</h3> +Vous devez également définir le jeu de caractères de votre document comme suit : -<p>Enfin, vous devez toujours ajouter la métabalise viewport dans votre HTML <a href="/fr/docs/Web/HTML/Element/head"><code><head></code></a>, pour donner à l'exemple une meilleure chance de fonctionner sur les appareils mobiles. Vous devez inclure au moins les éléments suivants dans votre document, que vous pourrez modifier ultérieurement en fonction des besoins :</p> +```html example-good +<meta charset="utf-8"> +``` -<pre class="brush: html example-good"><meta name="viewport" content="width=device-width"></pre> +Utilisez UTF-8 à moins que vous n'ayez une très bonne raison de ne pas le faire ; il couvrira vos besoins en caractères à peu près indépendamment de la langue que vous utilisez dans votre document. En outre, vous devriez toujours spécifier le jeu de caractères le plus tôt possible dans le bloc [`<head>`](/fr/docs/Web/HTML/Element/head) de votre HTML (dans le premier kilooctet), car cela vous protège contre une [vulnérabilité de sécurité d'Internet Explorer](http://support.microsoft.com/kb/928847). -<p>Voir <a href="/fr/docs/Web/CSS/Viewport_concepts#mobile_viewports">Zones d'affichage sur mobiles</a> pour plus de détails.</p> +### Méta-balise Viewport -<h2 id="General_markup_coding_style">Style général de codage des balises</h2> +Enfin, vous devez toujours ajouter la métabalise viewport dans votre HTML [`<head>`](/fr/docs/Web/HTML/Element/head), pour donner à l'exemple une meilleure chance de fonctionner sur les appareils mobiles. Vous devez inclure au moins les éléments suivants dans votre document, que vous pourrez modifier ultérieurement en fonction des besoins : -<h3 id="Use_lowercase">Utiliser les minuscules</h3> +```html example-good +<meta name="viewport" content="width=device-width"> +``` -<p>Utilisez les minuscules pour tous les noms d'éléments et les noms/valeurs d'attributs, car elles sont plus nettes et vous permettent d'écrire plus rapidement les balises :</p> +Voir [Zones d'affichage sur mobiles](/fr/docs/Web/CSS/Viewport_concepts#mobile_viewports) pour plus de détails. -<p>C'est bien :</p> +## Style général de codage des balises -<pre class="brush: html example-good"><p class="nice">Ça a l'air sympa et soigné</p></pre> +### Utiliser les minuscules -<p>Ce n'est pas très bon :</p> +Utilisez les minuscules pour tous les noms d'éléments et les noms/valeurs d'attributs, car elles sont plus nettes et vous permettent d'écrire plus rapidement les balises : -<pre class="brush: html example-bad"><P CLASS="WHOA-THERE">Pourquoi mon balisage crie-t-il ?</P></pre> +C'est bien : -<h3 id="Trailing_slashes">Barre oblique de fermeture (slash)</h3> +```html example-good +<p class="nice">Ça a l'air sympa et soigné</p> +``` -<p>N'incluez pas les barres obliques de fin de style XHTML pour les éléments vides, car elles sont inutiles et ralentissent le processus. Elles peuvent également casser les anciens navigateurs si vous ne faites pas attention (bien que, d'après ce dont nous nous souvenons, cela n'a pas été un problème depuis Netscape 4).</p> +Ce n'est pas très bon : -<p>C'est bon :</p> +```html example-bad +<P CLASS="WHOA-THERE">Pourquoi mon balisage crie-t-il ?</P> +``` -<pre class="brush: html example-good"><input type="text"> -<hr></pre> +### Barre oblique de fermeture (slash) -<p>Les barres obliques ne sont pas nécessaires :</p> +N'incluez pas les barres obliques de fin de style XHTML pour les éléments vides, car elles sont inutiles et ralentissent le processus. Elles peuvent également casser les anciens navigateurs si vous ne faites pas attention (bien que, d'après ce dont nous nous souvenons, cela n'a pas été un problème depuis Netscape 4). -<pre class="brush: html example-bad"><input type="text" /> -<hr /></pre> +C'est bon : -<h3 id="Quoting_attributes">Guillemets des attributs</h3> +```html example-good +<input type="text"> +<hr> +``` -<p>Vous devez mettre toutes les valeurs d'attribut entre guillemets. Il est tentant d'omettre les guillemets puisque HTML5 le permet, mais le balisage est plus net et plus facile à lire si vous les incluez. Par exemple, ceci est mieux :</p> +Les barres obliques ne sont pas nécessaires : -<pre class="brush: html example-good"><img src="images/logo.jpg" alt="Une icône de globe circulaire" class="no-border"></pre> +```html example-bad +<input type="text" /> +<hr /> +``` -<p>que ça :</p> +### Guillemets des attributs -<pre class="brush: html example-bad"><img src=images/logo.jpg alt=Une icône de globe circulaire class=no-border></pre> +Vous devez mettre toutes les valeurs d'attribut entre guillemets. Il est tentant d'omettre les guillemets puisque HTML5 le permet, mais le balisage est plus net et plus facile à lire si vous les incluez. Par exemple, ceci est mieux : -<p>Cela peut également causer des problèmes - dans l'exemple ci-dessus, l'attribut <code>alt</code> sera interprété comme plusieurs attributs, car il n'y a pas de guillemets pour spécifier que "Une icône de globe circulaire" est une valeur d'attribut unique.</p> +```html example-good +<img src="images/logo.jpg" alt="Une icône de globe circulaire" class="no-border"> +``` -<h3 id="Use_double_quotes">Utiliser les guillemets doubles</h3> +que ça : -<p>Utilisez des guillemets doubles pour le HTML, et non des guillemets simples :</p> +```html example-bad +<img src=images/logo.jpg alt=Une icône de globe circulaire class=no-border> +``` -<pre class="brush: html example-good"><p class="important">Yes</p></pre> +Cela peut également causer des problèmes - dans l'exemple ci-dessus, l'attribut `alt` sera interprété comme plusieurs attributs, car il n'y a pas de guillemets pour spécifier que "Une icône de globe circulaire" est une valeur d'attribut unique. -<pre class="brush: html example-bad"><p class='important'>Nope</p></pre> +### Utiliser les guillemets doubles -<h3 id="Boolean_attributes">Attributs booléens</h3> +Utilisez des guillemets doubles pour le HTML, et non des guillemets simples : -<p>N'écrivez pas les attributs booléens en entier ; vous pouvez simplement écrire le nom de l'attribut pour le définir. Par exemple, vous pouvez écrire :</p> +```html example-good +<p class="important">Yes</p> +``` -<pre class="brush: html example-good">required</pre> +```html example-bad +<p class='important'>Nope</p> +``` -<p>Ceci est parfaitement compréhensible et fonctionne bien ; la version plus longue avec la valeur est acceptée mais n'est pas nécessaire :</p> +### Attributs booléens -<pre class="brush: html example-bad">required="required"</pre> +N'écrivez pas les attributs booléens en entier ; vous pouvez simplement écrire le nom de l'attribut pour le définir. Par exemple, vous pouvez écrire : -<h3 id="Class_and_ID_names">Noms de classes et d'ID</h3> +```html example-good +required +``` -<p>Utilisez des noms de classe/ID sémantiques et séparez les mots multiples par des traits d'union. N'utilisez pas de camelCase.</p> +Ceci est parfaitement compréhensible et fonctionne bien ; la version plus longue avec la valeur est acceptée mais n'est pas nécessaire : -<p>Bon :</p> +```html example-bad +required="required" +``` -<pre class="brush: html example-good"><p class="editorial-summary">Blah blah blah</p></pre> +### Noms de classes et d'ID -<p>Mauvais :</p> +Utilisez des noms de classe/ID sémantiques et séparez les mots multiples par des traits d'union. N'utilisez pas de camelCase. -<pre class="brush: html example-bad"><p class="bigRedBox">Blah blah blah</p></pre> +Bon : -<h3 id="Entity_references">Références des entités</h3> +```html example-good +<p class="editorial-summary">Blah blah blah</p> +``` -<p>N'utilisez pas inutilement les références d'entités - utilisez le caractère littéral chaque fois que cela est possible (vous devrez toujours échapper les caractères comme les crochets et les guillemets).</p> +Mauvais : -<p>Par exemple, vous pourriez simplement écrire</p> +```html example-bad +<p class="bigRedBox">Blah blah blah</p> +``` -<pre class="brush: html example-good"><p>© 2018 Me</p></pre> +### Références des entités -<p>Au lieu de</p> +N'utilisez pas inutilement les références d'entités - utilisez le caractère littéral chaque fois que cela est possible (vous devrez toujours échapper les caractères comme les crochets et les guillemets). -<pre class="brush: html example-bad"><p>&copy; 2018 Me</p></pre> +Par exemple, vous pourriez simplement écrire -<p>Cela ne pose aucun problème tant que vous déclarez un jeu de caractères UTF-8.</p> +```html example-good +<p>© 2018 Me</p> +``` -<h2 id="Good_HTML_examples_on_MDN">De bons exemples HTML sur MDN</h2> +Au lieu de -<p>Vous pouvez trouver de bons extraits HTML, concis et significatifs, en haut des <a href="/fr/docs/Web/HTML/Reference">pages de référence HTML</a> - nos exemples interactifs sont généralement rédigés de manière à suivre ces directives, mais sachez qu'ils peuvent différer à certains endroits car ils ont pour la plupart été rédigés avant la nouvelle rédaction des directives.</p> +```html example-bad +<p>© 2018 Me</p> +``` + +Cela ne pose aucun problème tant que vous déclarez un jeu de caractères UTF-8. + +## De bons exemples HTML sur MDN + +Vous pouvez trouver de bons extraits HTML, concis et significatifs, en haut des [pages de référence HTML](/fr/docs/Web/HTML/Reference) - nos exemples interactifs sont généralement rédigés de manière à suivre ces directives, mais sachez qu'ils peuvent différer à certains endroits car ils ont pour la plupart été rédigés avant la nouvelle rédaction des directives. diff --git a/files/fr/mdn/guidelines/code_guidelines/index.md b/files/fr/mdn/guidelines/code_guidelines/index.md index ab395b6e62..9b887fdfac 100644 --- a/files/fr/mdn/guidelines/code_guidelines/index.md +++ b/files/fr/mdn/guidelines/code_guidelines/index.md @@ -12,53 +12,45 @@ tags: translation_of: MDN/Guidelines/Code_guidelines original_slug: MDN/Guidelines/Code_lignesdirectrices --- -<div>{{MDNSidebar}}</div> +{{MDNSidebar}} -<p>Cette série de documents décrit les directives de codage et les meilleures pratiques que nous utilisons pour écrire des démonstrations, des extraits de code, des exemples interactifs, etc. à utiliser sur MDN.</p> +Cette série de documents décrit les directives de codage et les meilleures pratiques que nous utilisons pour écrire des démonstrations, des extraits de code, des exemples interactifs, etc. à utiliser sur MDN. -<p>Si vous cherchez des lignes directrices à suivre pour rédiger vos exemples de codes, vous êtes au bon endroit. Le plus grand avantage de respecter ces directives est qu'elles favoriseront la cohérence entre nos échantillons et nos démos sur MDN, ce qui augmente la lisibilité et la compréhension en général.</p> +Si vous cherchez des lignes directrices à suivre pour rédiger vos exemples de codes, vous êtes au bon endroit. Le plus grand avantage de respecter ces directives est qu'elles favoriseront la cohérence entre nos échantillons et nos démos sur MDN, ce qui augmente la lisibilité et la compréhension en général. -<div class="note"> - <p><strong>Note :</strong> Si vous souhaitez obtenir des conseils sur le style du code tel qu'il apparaît sur un article de MDN, plutôt que sur le contenu du code, consultez notre <a href="/fr/docs/MDN/Guidelines/Writing_style_guide#code_sample_style_and_formatting">Guide stylistique</a>.</p> -</div> +> **Note :** Si vous souhaitez obtenir des conseils sur le style du code tel qu'il apparaît sur un article de MDN, plutôt que sur le contenu du code, consultez notre [Guide stylistique](/fr/docs/MDN/Guidelines/Writing_style_guide#code_sample_style_and_formatting). -<h2 id="Article_structure">Structure d'article</h2> +## Structure d'article -<p>Cet article contient les meilleures pratiques générales de haut niveau pour la rédaction d'exemples de codes MDN. Ses sous-articles sont les suivants :</p> +Cet article contient les meilleures pratiques générales de haut niveau pour la rédaction d'exemples de codes MDN. Ses sous-articles sont les suivants : -<ul> - <li><a href="/fr/docs/MDN/Guidelines/Code_guidelines/General">Lignes directrices générales pour tous les codes</a> — à la fois syntaxique et pour des exemples de stylisme/affichage</li> - <li><a href="/fr/docs/MDN/Guidelines/Code_guidelines/HTML">Lignes directrices du HTML</a></li> - <li><a href="/fr/docs/MDN/Guidelines/Code_guidelines/CSS">Lignes directrices du CSS</a></li> - <li><a href="/fr/docs/MDN/Guidelines/Code_guidelines/JavaScript">Lignes directrices du JavaScript</a></li> - <li><a href="/fr/docs/MDN/Guidelines/Code_guidelines/Shell">Lignes directrices des commandes Shell</a></li> -</ul> +- [Lignes directrices générales pour tous les codes](/fr/docs/MDN/Guidelines/Code_guidelines/General) — à la fois syntaxique et pour des exemples de stylisme/affichage +- [Lignes directrices du HTML](/fr/docs/MDN/Guidelines/Code_guidelines/HTML) +- [Lignes directrices du CSS](/fr/docs/MDN/Guidelines/Code_guidelines/CSS) +- [Lignes directrices du JavaScript](/fr/docs/MDN/Guidelines/Code_guidelines/JavaScript) +- [Lignes directrices des commandes Shell](/fr/docs/MDN/Guidelines/Code_guidelines/Shell) -<h2 id="General_best_practices">Bonnes pratiques générales</h2> +## Bonnes pratiques générales -<p>Cette section fournit rapidement les meilleures pratiques générales pour créer un échantillon de code minimal compréhensible afin de démontrer l'utilisation d'une caractéristique ou d'une fonction spécifique.</p> +Cette section fournit rapidement les meilleures pratiques générales pour créer un échantillon de code minimal compréhensible afin de démontrer l'utilisation d'une caractéristique ou d'une fonction spécifique. -<p>Les échantillons de code doivent l'être :</p> +Les échantillons de code doivent l'être : -<ul> - <li>assez simple pour être compréhensible, mais</li> - <li>suffisamment complexe pour faire quelque chose d'intéressant, et de préférence utile.</li> -</ul> +- assez simple pour être compréhensible, mais +- suffisamment complexe pour faire quelque chose d'intéressant, et de préférence utile. -<p>Il y a une considération primordiale que vous devez garder à l'esprit : <strong>Les lecteurs copieront et colleront l'échantillon de code dans leur propre code, et pourront le mettre en production.</strong></p> +Il y a une considération primordiale que vous devez garder à l'esprit : **Les lecteurs copieront et colleront l'échantillon de code dans leur propre code, et pourront le mettre en production.** -<p>Par conséquent, vous devez vous assurer que l'exemple de code est utilisable et suit les meilleures pratiques généralement acceptées, et <strong>ne fait rien</strong> qui puisse rendre une application peu sûre, grossièrement inefficace, gonflée ou inaccessible. Si l'exemple de code n'est pas utilisable ou ne vaut pas la peine d'être produit, veillez à inclure un avertissement dans un commentaire de code et dans le texte explicatif — s'il s'agit d'un extrait et non d'un exemple complet, précisez-le clairement. Cela signifie également que vous devez fournir <strong>toutes</strong> les informations nécessaires à l'exécution de l'exemple, y compris les dépendances et la configuration.</p> +Par conséquent, vous devez vous assurer que l'exemple de code est utilisable et suit les meilleures pratiques généralement acceptées, et **ne fait rien** qui puisse rendre une application peu sûre, grossièrement inefficace, gonflée ou inaccessible. Si l'exemple de code n'est pas utilisable ou ne vaut pas la peine d'être produit, veillez à inclure un avertissement dans un commentaire de code et dans le texte explicatif — s'il s'agit d'un extrait et non d'un exemple complet, précisez-le clairement. Cela signifie également que vous devez fournir **toutes** les informations nécessaires à l'exécution de l'exemple, y compris les dépendances et la configuration. -<p>Les échantillons de code doivent être aussi autonomes et faciles à comprendre que possible. L'objectif n'est pas nécessairement de produire un code efficace et intelligent qui impressionne les experts et possède une grande fonctionnalité, mais plutôt de produire des exemples de travail réduits qui peuvent être compris le plus rapidement possible.</p> +Les échantillons de code doivent être aussi autonomes et faciles à comprendre que possible. L'objectif n'est pas nécessairement de produire un code efficace et intelligent qui impressionne les experts et possède une grande fonctionnalité, mais plutôt de produire des exemples de travail réduits qui peuvent être compris le plus rapidement possible. -<p>Les autres meilleures pratiques générales sont les suivantes :</p> +Les autres meilleures pratiques générales sont les suivantes : -<ul> - <li>L'échantillon doit être court et, idéalement, ne montrer que la caractéristique qui vous intéresse immédiatement.</li> - <li><strong>Seulement</strong> inclure le code qui est essentiel pour l'exemple. Une grande quantité de code non pertinent peut facilement distraire ou embrouiller le public. Si vous souhaitez fournir un exemple complet, plus long, mettez-le dans l'un de nos <a href="https://github.com/mdn/">Dépôts GitHub</a> (ou un JSBin, CodePen, ou similaire) et fournissez ensuite le lien vers la version complète au-dessus ou au-dessous de l'échantillon.</li> - <li>N'incluez pas de code côté serveur, de bibliothèques, de frameworks, de préprocesseurs et autres dépendances inutiles - ils rendent le code moins portable et plus difficile à exécuter et à comprendre. Utilisez du code "vanilla" lorsque cela est possible.</li> - <li>Ne présumez pas de la connaissance des bibliothèques, des frameworks, des préprocesseurs ou d'autres fonctionnalités non natives. Par exemple, utilisez des noms de classe qui ont un sens dans l'exemple plutôt que des noms de classe qui ont un sens pour les utilisateurs de BEM ou Bootstrap.</li> - <li>Écrivez votre code de manière aussi propre et compréhensible que possible, même si ce n'est pas la manière la plus efficace de le faire.</li> - <li>N'utilisez pas de mauvaises pratiques pour faire court (comme des éléments de présentation tels que <a href="/fr/docs/Web/HTML/Element/big"><code><big></code></a> ou <a href="/fr/docs/Web/API/Document/write"><code>document.write()</code></a>) ; faites-le correctement.</li> - <li>Dans le cas des démonstrations d'API, si vous utilisez plusieurs API ensemble, indiquez quelles API sont incluses ainsi que l'origine des fonctionnalités.</li> -</ul> +- L'échantillon doit être court et, idéalement, ne montrer que la caractéristique qui vous intéresse immédiatement. +- **Seulement** inclure le code qui est essentiel pour l'exemple. Une grande quantité de code non pertinent peut facilement distraire ou embrouiller le public. Si vous souhaitez fournir un exemple complet, plus long, mettez-le dans l'un de nos [Dépôts GitHub](https://github.com/mdn/) (ou un JSBin, CodePen, ou similaire) et fournissez ensuite le lien vers la version complète au-dessus ou au-dessous de l'échantillon. +- N'incluez pas de code côté serveur, de bibliothèques, de frameworks, de préprocesseurs et autres dépendances inutiles - ils rendent le code moins portable et plus difficile à exécuter et à comprendre. Utilisez du code "vanilla" lorsque cela est possible. +- Ne présumez pas de la connaissance des bibliothèques, des frameworks, des préprocesseurs ou d'autres fonctionnalités non natives. Par exemple, utilisez des noms de classe qui ont un sens dans l'exemple plutôt que des noms de classe qui ont un sens pour les utilisateurs de BEM ou Bootstrap. +- Écrivez votre code de manière aussi propre et compréhensible que possible, même si ce n'est pas la manière la plus efficace de le faire. +- N'utilisez pas de mauvaises pratiques pour faire court (comme des éléments de présentation tels que [`<big>`](/fr/docs/Web/HTML/Element/big) ou [`document.write()`](/fr/docs/Web/API/Document/write)) ; faites-le correctement. +- Dans le cas des démonstrations d'API, si vous utilisez plusieurs API ensemble, indiquez quelles API sont incluses ainsi que l'origine des fonctionnalités. diff --git a/files/fr/mdn/guidelines/code_guidelines/javascript/index.md b/files/fr/mdn/guidelines/code_guidelines/javascript/index.md index a2178f8491..429efa487f 100644 --- a/files/fr/mdn/guidelines/code_guidelines/javascript/index.md +++ b/files/fr/mdn/guidelines/code_guidelines/javascript/index.md @@ -9,314 +9,339 @@ tags: - MDN Meta translation_of: MDN/Guidelines/Code_guidelines/JavaScript --- -<div>{{MDNSidebar}}</div> - -<p>Les directives suivantes couvrent la manière d'écrire le JavaScript pour les exemples de code MDN.</p> - -<p>Ce qui suit est un ensemble assez simple de directives JavaScript. Nous pourrions aller beaucoup plus en profondeur sur ce sujet, mais nous voulons essentiellement fournir des directives simples pour écrire des exemples concis qui seront compréhensibles par le plus grand nombre de personnes possible, plutôt que des directives détaillées pour écrire des applications web complexes. Si vous voulez quelque chose qui entre dans plus de détails, nous vous recommandons le <a href="https://github.com/airbnb/javascript">guide stylistique JavaScript d'AirBnB</a>, qui est généralement compatible avec nos directives.</p> - -<h2 id="In_this_article">Dans cet article</h2> - -<ul> - <li><a href="#general_javascript_guidelines">Directives générales sur le JavaScript</a> - <ul> - <li><a href="#use_expanded_syntax">Utiliser une syntaxe étendue</a></li> - <li><a href="#javascript_comments">Commentaires JavaScript</a></li> - <li><a href="#use_es6_features">Utiliser les fonctions ES6</a></li> - </ul> - </li> - <li><a href="#variables">Variables</a> - <ul> - <li><a href="#variable_naming">Nommage des variables</a></li> - <li><a href="#declaring_variables">Déclaration des variables</a></li> - </ul> - </li> - <li><a href="#operators_and_comparison">Opérateurs et comparaison</a> - <ul> - <li><a href="#ternary_operators">Opérateurs ternaires</a></li> - <li><a href="#use_strict_equality">Utiliser l'égalité stricte</a></li> - <li><a href="#use_shortcuts_for_boolean_tests">Utiliser des raccourcis pour les tests booléens</a></li> - </ul> - </li> - <li><a href="#control_statements">Instructions de contrôle</a></li> - <li><a href="#strings">Chaînes de caractères</a> - <ul> - <li><a href="#use_template_literals">Utiliser des modèles littéraux</a></li> - <li><a href="#use_textcontent_not_innerhtml">Utiliser textContent, et non innerHTML</a></li> - </ul> - </li> - <li><a href="#conditionals">Conditions</a> - <ul> - <li><a href="#general_purpose_looping">Usage général des boucles</a></li> - <li><a href="#switch_statements">Les instructions switch</a></li> - </ul> - </li> - <li><a href="#functions_and_objects">Fonctions et objets</a> - <ul> - <li><a href="#function_naming">Nommage des fonctions</a></li> - <li><a href="#defining_functions">Définition des fonctions</a></li> - <li><a href="#creating_objects">Création d'objets</a></li> - <li><a href="#object_classes">Classes d'objets</a></li> - <li><a href="#object_naming">Nommage des objets</a></li> - </ul> - </li> - <li><a href="#arrays">Tableaux</a> - <ul> - <li><a href="#creating_arrays">Création de tableaux</a></li> - <li><a href="#adding_to_an_array">Ajout à un tableau</a></li> - </ul> - </li> - <li><a href="#error_handling">Traitement des erreurs</a></li> -</ul> - -<h2 id="General_JavaScript_guidelines">Directives générales sur le JavaScript</h2> - -<h3 id="Use_expanded_syntax">Utiliser une syntaxe étendue</h3> - -<p>Pour JavaScript, nous utilisons une syntaxe étendue, chaque ligne de JS étant placée sur une nouvelle ligne, l'accolade d'ouverture d'un bloc sur la même ligne que l'instruction associée et l'accolade de fermeture sur une nouvelle ligne. Cela permet d'optimiser la lisibilité et de favoriser la cohérence sur le MDN.</p> - -<p>Faites ceci</p> - -<pre class="brush: js example-good">function myFunc() { +{{MDNSidebar}} + +Les directives suivantes couvrent la manière d'écrire le JavaScript pour les exemples de code MDN. + +Ce qui suit est un ensemble assez simple de directives JavaScript. Nous pourrions aller beaucoup plus en profondeur sur ce sujet, mais nous voulons essentiellement fournir des directives simples pour écrire des exemples concis qui seront compréhensibles par le plus grand nombre de personnes possible, plutôt que des directives détaillées pour écrire des applications web complexes. Si vous voulez quelque chose qui entre dans plus de détails, nous vous recommandons le [guide stylistique JavaScript d'AirBnB](https://github.com/airbnb/javascript), qui est généralement compatible avec nos directives. + +## Dans cet article + +- [Directives générales sur le JavaScript](#general_javascript_guidelines) + + - [Utiliser une syntaxe étendue](#use_expanded_syntax) + - [Commentaires JavaScript](#javascript_comments) + - [Utiliser les fonctions ES6](#use_es6_features) + +- [Variables](#variables) + + - [Nommage des variables](#variable_naming) + - [Déclaration des variables](#declaring_variables) + +- [Opérateurs et comparaison](#operators_and_comparison) + + - [Opérateurs ternaires](#ternary_operators) + - [Utiliser l'égalité stricte](#use_strict_equality) + - [Utiliser des raccourcis pour les tests booléens](#use_shortcuts_for_boolean_tests) + +- [Instructions de contrôle](#control_statements) +- [Chaînes de caractères](#strings) + + - [Utiliser des modèles littéraux](#use_template_literals) + - [Utiliser textContent, et non innerHTML](#use_textcontent_not_innerhtml) + +- [Conditions](#conditionals) + + - [Usage général des boucles](#general_purpose_looping) + - [Les instructions switch](#switch_statements) + +- [Fonctions et objets](#functions_and_objects) + + - [Nommage des fonctions](#function_naming) + - [Définition des fonctions](#defining_functions) + - [Création d'objets](#creating_objects) + - [Classes d'objets](#object_classes) + - [Nommage des objets](#object_naming) + +- [Tableaux](#arrays) + + - [Création de tableaux](#creating_arrays) + - [Ajout à un tableau](#adding_to_an_array) + +- [Traitement des erreurs](#error_handling) + +## Directives générales sur le JavaScript + +### Utiliser une syntaxe étendue + +Pour JavaScript, nous utilisons une syntaxe étendue, chaque ligne de JS étant placée sur une nouvelle ligne, l'accolade d'ouverture d'un bloc sur la même ligne que l'instruction associée et l'accolade de fermeture sur une nouvelle ligne. Cela permet d'optimiser la lisibilité et de favoriser la cohérence sur le MDN. + +Faites ceci + +```js example-good +function myFunc() { console.log('Hello!'); -};</pre> +}; +``` -<p>Évitez cela</p> +Évitez cela -<pre class="brush: js example-bad">function myFunc() { console.log('Hello!'); };</pre> +```js example-bad +function myFunc() { console.log('Hello!'); }; +``` -<p>Nous avons également quelques règles spécifiques concernant l'espacement à l'intérieur des caractéristiques du langage. Vous devez inclure des espaces entre les opérateurs et les opérandes, les paramètres, etc.</p> +Nous avons également quelques règles spécifiques concernant l'espacement à l'intérieur des caractéristiques du langage. Vous devez inclure des espaces entre les opérateurs et les opérandes, les paramètres, etc. -<p>C'est plus lisible</p> +C'est plus lisible -<pre class="brush: js example-good">if(dayOfWeek === 7 && weather === 'soleil') { +```js example-good +if(dayOfWeek === 7 && weather === 'soleil') { goOnTrip('plage', 'voiture', ['crême glacée', 'pelle et sceau', 'serviette de plage']); -}</pre> +} +``` -<p>que ceci</p> +que ceci -<pre class="brush: js example-bad">if(dayOfWeek===7&&weather==='soleil'){ +```js example-bad +if(dayOfWeek===7&&weather==='soleil'){ goOnTrip('plage','voiture',['crême glacée','pelle et sceau','serviette de plage']); -}</pre> +} +``` -<p>En outre, gardez ces spécificités à l'esprit :</p> +En outre, gardez ces spécificités à l'esprit : -<ul> - <li>N'incluez pas d'espaces de remplissage après les parenthèses ouvrantes ou avant les parenthèses fermantes - <code>(myVar)</code>, et non <code>( myVar )</code>.</li> - <li>Toutes les instructions doivent se terminer par un point-virgule (";"). Nous les exigeons dans tous nos exemples de code, même s'ils sont techniquement facultatifs en JavaScript, car nous pensons que cela permet d'obtenir un code plus clair et plus précis quant à la fin de chaque instruction.</li> - <li>Utilisez des guillemets simples en JavaScript, chaque fois que des guillemets simples sont nécessaires dans la syntaxe.</li> - <li>Il ne doit pas y avoir d'espace entre un mot-clé d'instruction, une fonction ou une boucle et sa parenthèse ouvrante (par exemple, <code>if() { .... }</code>, <code>fonction myFunc() { ... }, for(...) { ... }</code>).</li> - <li>Il doit y avoir un espace entre les parenthèses et l'accolade ouvrante dans les cas décrits au point précédent.</li> -</ul> +- N'incluez pas d'espaces de remplissage après les parenthèses ouvrantes ou avant les parenthèses fermantes - `(myVar)`, et non `( myVar )`. +- Toutes les instructions doivent se terminer par un point-virgule (";"). Nous les exigeons dans tous nos exemples de code, même s'ils sont techniquement facultatifs en JavaScript, car nous pensons que cela permet d'obtenir un code plus clair et plus précis quant à la fin de chaque instruction. +- Utilisez des guillemets simples en JavaScript, chaque fois que des guillemets simples sont nécessaires dans la syntaxe. +- Il ne doit pas y avoir d'espace entre un mot-clé d'instruction, une fonction ou une boucle et sa parenthèse ouvrante (par exemple, `if() { .... }`, `fonction myFunc() { ... }, for(...) { ... }`). +- Il doit y avoir un espace entre les parenthèses et l'accolade ouvrante dans les cas décrits au point précédent. -<h3 id="JavaScript_comments">Commentaires JavaScript</h3> +### Commentaires JavaScript -<p>Utilisez des commentaires de style JS pour commenter le code qui n'est pas auto-documenté :</p> +Utilisez des commentaires de style JS pour commenter le code qui n'est pas auto-documenté : -<pre class="brush: js example-good">// This is a JavaScript-style comment</pre> +```js example-good +// This is a JavaScript-style comment +``` -<p>Mettez vos commentaires sur des lignes séparées précédant le code auquel ils se réfèrent :</p> +Mettez vos commentaires sur des lignes séparées précédant le code auquel ils se réfèrent : -<pre class="brush: js example-good">function myFunc() { +```js example-good +function myFunc() { // Affiche la chaîne de caractères "Bonjour" dans la console JS du navigateur. console.log('Bonjour'); - // Crée un nouveau paragraphe, le remplit de contenu et l'ajoute au <body> + // Crée un nouveau paragraphe, le remplit de contenu et l'ajoute au <body> let para = document.createElement('p'); para.textContent = 'Mon nouveau paragraphe'; document.body.appendChild(para); -}</pre> +} +``` -<p>Notez également que vous devez laisser un espace entre les barres obliques et le commentaire, dans chaque cas.</p> +Notez également que vous devez laisser un espace entre les barres obliques et le commentaire, dans chaque cas. -<h3 id="Use_ES6_features">Utiliser les fonctions ES6</h3> +### Utiliser les fonctions ES6 -<p>Pour un usage général*, vous pouvez utiliser les fonctionnalités ES6 courantes (telles que les <a href="/fr/docs/Web/JavaScript/Reference/Functions/Arrow_functions">fonctions fléchées</a>, <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise">promesses</a>, <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/let">let</a></code>/<code><a href="/fr/docs/Web/JavaScript/Reference/Statements/const">const</a></code>, <a href="/fr/docs/Web/JavaScript/Reference/Template_literals">littéraux de gabarits</a>, et le <a href="/fr/docs/Web/JavaScript/Reference/Operators/Spread_syntax">syntaxe de décomposition</a>) dans les exemples MDN. Nous les incluons à de nombreux endroits dans ces directives, car nous pensons que l'industrie du Web a généralement atteint un point où ces fonctionnalités sont suffisamment familières pour être compréhensibles. Et pour ceux qui ne les utilisent pas encore, nous aimerions jouer notre rôle en aidant les gens à développer leurs compétences.</p> +Pour un usage général\*, vous pouvez utiliser les fonctionnalités ES6 courantes (telles que les [fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [promesses](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise), [`let`](/fr/docs/Web/JavaScript/Reference/Statements/let)/[`const`](/fr/docs/Web/JavaScript/Reference/Statements/const), [littéraux de gabarits](/fr/docs/Web/JavaScript/Reference/Template_literals), et le [syntaxe de décomposition](/fr/docs/Web/JavaScript/Reference/Operators/Spread_syntax)) dans les exemples MDN. Nous les incluons à de nombreux endroits dans ces directives, car nous pensons que l'industrie du Web a généralement atteint un point où ces fonctionnalités sont suffisamment familières pour être compréhensibles. Et pour ceux qui ne les utilisent pas encore, nous aimerions jouer notre rôle en aidant les gens à développer leurs compétences. -<p>Cependant, nous ne recommandons pas encore l'utilisation générale des nouvelles fonctionnalités ES telles que <a href="/fr/docs/Web/JavaScript/Reference/Statements/async_function">async</a>/<a href="/fr/docs/Web/JavaScript/Reference/Operators/await">await</a>, les virgules de fin sur les listes d'arguments, etc. Nous préférerions que vous ne les utilisiez pas, sauf si cela est strictement nécessaire, et si vous les utilisez, incluez une explication dans votre exemple pour dire ce qu'ils font, avec un lien vers le matériel de référence approprié.</p> +Cependant, nous ne recommandons pas encore l'utilisation générale des nouvelles fonctionnalités ES telles que [async](/fr/docs/Web/JavaScript/Reference/Statements/async_function)/[await](/fr/docs/Web/JavaScript/Reference/Operators/await), les virgules de fin sur les listes d'arguments, etc. Nous préférerions que vous ne les utilisiez pas, sauf si cela est strictement nécessaire, et si vous les utilisez, incluez une explication dans votre exemple pour dire ce qu'ils font, avec un lien vers le matériel de référence approprié. -<div class="note"> - <p><strong>Note :</strong> Par "usage général", nous entendons la rédaction d'exemples généraux. Les pages de référence couvrant des fonctionnalités spécifiques de l'ES moderne doivent évidemment utiliser les fonctionnalités qu'elles documentent !</p> -</div> +> **Note :** Par "usage général", nous entendons la rédaction d'exemples généraux. Les pages de référence couvrant des fonctionnalités spécifiques de l'ES moderne doivent évidemment utiliser les fonctionnalités qu'elles documentent ! -<h2 id="Variables">Variables</h2> +## Variables -<h3 id="Variable_naming">Nommage des variables</h3> +### Nommage des variables -<p>Pour les noms de variables, utilisez la casse minuscule au format chameau « lowerCamelCase » et, le cas échéant, des noms concis, lisibles par l'homme et sémantiques.</p> +Pour les noms de variables, utilisez la casse minuscule au format chameau « lowerCamelCase » et, le cas échéant, des noms concis, lisibles par l'homme et sémantiques. -<p>Écrivez comme suit :</p> +Écrivez comme suit : -<pre class="brush: js example-good">let playerScore = 0; +```js example-good +let playerScore = 0; -let speed = distance / time;</pre> +let speed = distance / time; +``` -<p>Éviter ce genre de chose :</p> +Éviter ce genre de chose : -<pre class="brush: js example-bad">let thisIsaveryLONGVariableThatRecordsPlayerscore345654 = 0; +```js example-bad +let thisIsaveryLONGVariableThatRecordsPlayerscore345654 = 0; let s = d/t; -</pre> +``` -<div class="note"> - <p><strong>Note :</strong> The only place where it is OK to not use human-readable semantic names is where a very common recognized convention exists, such as using <code>i</code>, <code>j</code>, etc. for loop iterators.</p> -</div> +> **Note :** The only place where it is OK to not use human-readable semantic names is where a very common recognized convention exists, such as using `i`, `j`, etc. for loop iterators. -<h3 id="Declaring_variables">Déclaration des variables</h3> +### Déclaration des variables -<p>Lorsque vous déclarez des variables et des constantes, utilisez les mots-clés <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/let">let</a></code> et <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/const">const</a></code>, pas <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/var">var</a></code>.</p> +Lorsque vous déclarez des variables et des constantes, utilisez les mots-clés [`let`](/fr/docs/Web/JavaScript/Reference/Statements/let) et [`const`](/fr/docs/Web/JavaScript/Reference/Statements/const), pas [`var`](/fr/docs/Web/JavaScript/Reference/Statements/var). -<p>Si une variable ne sera pas réaffectée, préférez <code>const</code> :</p> +Si une variable ne sera pas réaffectée, préférez `const` : -<pre class="brush: js example-good">const myName = 'Chris'; +```js example-good +const myName = 'Chris'; console.log(myName); -</pre> +``` -<p>Sinon, utilisez <code>let</code> :</p> +Sinon, utilisez `let` : -<pre class="brush: js example-good">let myAge = '40'; +```js example-good +let myAge = '40'; myAge++; console.log('Happy birthday!'); -</pre> +``` -<p>Cet exemple utilise <code>let</code> là où il devrait préférer <code>const</code>. Il fonctionnera mais devrait être évité dans les exemples de code MDN :</p> +Cet exemple utilise `let` là où il devrait préférer `const`. Il fonctionnera mais devrait être évité dans les exemples de code MDN : -<pre class="brush: js example-bad">let myName = 'Chris'; +```js example-bad +let myName = 'Chris'; console.log(myName); -</pre> +``` -<p>Cet exemple utilise <code>const</code> pour une variable qui est réaffectée. La réaffectation entraînera une erreur :</p> +Cet exemple utilise `const` pour une variable qui est réaffectée. La réaffectation entraînera une erreur : -<pre class="brush: js example-bad">const myAge = '40'; +```js example-bad +const myAge = '40'; myAge++; console.log('Happy birthday!'); -</pre> +``` -<p>Cet exemple utilise <code>var</code>, ce qui doit être évité dans les exemples de code MDN, sauf si cela est vraiment nécessaire :</p> +Cet exemple utilise `var`, ce qui doit être évité dans les exemples de code MDN, sauf si cela est vraiment nécessaire : -<pre class="brush: js example-bad">var myAge = '40'; -var myName = 'Chris';</pre> +```js example-bad +var myAge = '40'; +var myName = 'Chris'; +``` -<h2 id="Operators_and_comparison">Opérateurs et comparaison</h2> +## Opérateurs et comparaison -<h3 id="Ternary_operators">Opérateurs ternaires</h3> +### Opérateurs ternaires -<p>Les opérateurs ternaires doivent être placés sur une seule ligne :</p> +Les opérateurs ternaires doivent être placés sur une seule ligne : -<pre class="brush: js example-good">let status = (age >= 18) ? 'adult' : 'minor';</pre> +```js example-good +let status = (age >= 18) ? 'adult' : 'minor'; +``` -<p>Pas emboîtés :</p> +Pas emboîtés : -<pre class="brush: js example-bad">let status = (age >= 18) +```js example-bad +let status = (age >= 18) ? 'adult' - : 'minor';</pre> + : 'minor'; +``` -<p>C'est beaucoup plus difficile à lire.</p> +C'est beaucoup plus difficile à lire. -<h3 id="Use_strict_equality">Utiliser l'égalité stricte</h3> +### Utiliser l'égalité stricte -<p>Utilisez toujours une égalité et une inégalité strictes.</p> +Utilisez toujours une égalité et une inégalité strictes. -<p>Comme ceci :</p> +Comme ceci : -<pre class="brush: js example-good">name === 'Chris'; -age !== 25;</pre> +```js example-good +name === 'Chris'; +age !== 25; +``` -<p>N'écrivez pas comme ça :</p> +N'écrivez pas comme ça : -<pre class="brush: js example-bad">name == 'Chris'; -age != 25;</pre> +```js example-bad +name == 'Chris'; +age != 25; +``` -<h3 id="Use_shortcuts_for_boolean_tests">Utiliser des raccourcis pour les tests booléens</h3> +### Utiliser des raccourcis pour les tests booléens -<p>Utilisez des raccourcis pour les tests booléens - utilisez <code>x</code> et <code>!x</code>, et non <code>x === true</code> et <code>x === false</code>.</p> +Utilisez des raccourcis pour les tests booléens - utilisez `x` et `!x`, et non `x === true` et `x === false`. -<h2 id="Control_statements">Instructions de contrôle</h2> +## Instructions de contrôle -<p>Écrivez des instructions de contrôle comme ceci :</p> +Écrivez des instructions de contrôle comme ceci : -<pre class="brush: js example-good">if(iceCream) { +```js example-good +if(iceCream) { alert('Woo hoo!'); -}</pre> +} +``` -<p>Pas comme cela :</p> +Pas comme cela : -<pre class="brush: js example-bad">if (iceCream){ +```js example-bad +if (iceCream){ alert('Woo hoo!'); -}</pre> +} +``` -<p>N'oubliez pas non plus :</p> +N'oubliez pas non plus : -<ul> - <li>Il ne doit y avoir <em>aucun espace</em> entre un mot-clé de déclaration de contrôle et sa parenthèse ouvrante.</li> - <li>Il doit y avoir <em>un espace</em> entre les parenthèses et l'accolade ouvrante.</li> -</ul> +- Il ne doit y avoir _aucun espace_ entre un mot-clé de déclaration de contrôle et sa parenthèse ouvrante. +- Il doit y avoir _un espace_ entre les parenthèses et l'accolade ouvrante. -<h2 id="Strings">Chaînes de caractères</h2> +## Chaînes de caractères -<h3 id="Use_template_literals">Utiliser des modèles littéraux</h3> +### Utiliser des modèles littéraux -<p>Pour insérer des valeurs dans des chaînes de caractères, utilisez des chaînes de caractères littérales.</p> +Pour insérer des valeurs dans des chaînes de caractères, utilisez des chaînes de caractères littérales. -<p>Comme suit :</p> +Comme suit : -<pre class="brush: js example-good">let myName = 'Chris'; -console.log(`Hi! I'm ${myName}!`);</pre> +```js example-good +let myName = 'Chris'; +console.log(`Hi! I'm ${myName}!`); +``` -<p>En évitant d'écrire :</p> +En évitant d'écrire : -<pre class="brush: js example-bad">let myName = 'Chris'; -console.log('Hi! I\'m' + myName + '!');</pre> +```js example-bad +let myName = 'Chris'; +console.log('Hi! I\'m' + myName + '!'); +``` -<h3 id="Use_textContent_not_innerHTML">Utiliser textContent, et non innerHTML</h3> +### Utiliser textContent, et non innerHTML -<p>Lorsque vous insérez des chaînes de caractères dans les nœuds du DOM, utilisez la fonction <a href="/fr/docs/Web/API/Node/textContent"><code>Node.textContent</code></a>:</p> +Lorsque vous insérez des chaînes de caractères dans les nœuds du DOM, utilisez la fonction [`Node.textContent`](/fr/docs/Web/API/Node/textContent): -<pre class="brush: js example-good">let text = 'Bonjour à vous tous, braves gens'; +```js example-good +let text = 'Bonjour à vous tous, braves gens'; const para = document.createElement('p'); -para.textContent = text;</pre> +para.textContent = text; +``` -<p>Et pas <a href="/fr/docs/Web/API/Element/innerHTML"><code>Element.innerHTML</code></a>:</p> +Et pas [`Element.innerHTML`](/fr/docs/Web/API/Element/innerHTML): -<pre class="brush: js example-bad">let text = 'Bonjour à vous tous, braves gens'; +```js example-bad +let text = 'Bonjour à vous tous, braves gens'; const para = document.createElement('p'); -para.innerHTML = text;</pre> +para.innerHTML = text; +``` -<p>Le <code>textContent</code> est beaucoup plus efficace, et moins sujet aux erreurs que le <code>innerHTML</code>.</p> +Le `textContent` est beaucoup plus efficace, et moins sujet aux erreurs que le `innerHTML`. -<h2 id="Conditionals">Conditions</h2> +## Conditions -<h3 id="General_purpose_looping">Usage général des boucles</h3> +### Usage général des boucles -<p>When <a href="/fr/docs/Learn/JavaScript/Building_blocks/Looping_code">loops</a> are required, feel free to choose an appropriate loop out of the available ones (<code><a href="/fr/docs/Web/JavaScript/Reference/Statements/for">for</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/while">while</a></code>, etc.) Just make sure to keep the code as understandable as possible.</p> +When [loops](/fr/docs/Learn/JavaScript/Building_blocks/Looping_code) are required, feel free to choose an appropriate loop out of the available ones ([`for`](/fr/docs/Web/JavaScript/Reference/Statements/for), [`for...of`](/fr/docs/Web/JavaScript/Reference/Statements/for...of), [`while`](/fr/docs/Web/JavaScript/Reference/Statements/while), etc.) Just make sure to keep the code as understandable as possible. -<p>Lorsque vous utilisez des boucles <code>for</code>/<code>for...of</code>, veillez à définir correctement l'initialisateur, avec un mot clé <code>let</code> :</p> +Lorsque vous utilisez des boucles `for`/`for...of`, veillez à définir correctement l'initialisateur, avec un mot clé `let` : -<pre class="brush: js example-good">let cats = ['Athena', 'Luna']; +```js example-good +let cats = ['Athena', 'Luna']; for(let i of cats) { console.log(i); } -</pre> +``` -<p>Pas</p> +Pas -<pre class="brush: js example-bad">let cats = ['Athena', 'Luna']; +```js example-bad +let cats = ['Athena', 'Luna']; for(i of cats) { console.log(i); } -</pre> +``` -<p>Gardez également à l'esprit :</p> +Gardez également à l'esprit : -<ul> - <li>Il ne doit y avoir <em>aucun espace</em> entre un mot-clé de boucle et sa parenthèse ouvrante.</li> - <li>Il doit y avoir <em>un espace</em> entre les parenthèses et l'accolade ouvrante.</li> -</ul> +- Il ne doit y avoir _aucun espace_ entre un mot-clé de boucle et sa parenthèse ouvrante. +- Il doit y avoir _un espace_ entre les parenthèses et l'accolade ouvrante. -<h3 id="Switch_statements">Les instructions switch</h3> +### Les instructions switch -<p>Formatez les instructions <code>switch</code> comme suit :</p> +Formatez les instructions `switch` comme suit : -<pre class="brush: js example-good">let expr = 'Papayes'; +```js example-good +let expr = 'Papayes'; switch(expr) { case 'Oranges': console.log('Les oranges sont à 1,10 € le kilo.'); @@ -327,93 +352,106 @@ switch(expr) { break; default: console.log('Désolé, nous n'avons plus de ' + expr + '.'); -}</pre> +} +``` -<h2 id="Functions_and_objects">Fonctions et objets</h2> +## Fonctions et objets -<h3 id="Function_naming">Nommage des fonctions</h3> +### Nommage des fonctions -<p>Pour les noms de fonctions, utilisez la casse minuscule au format chameau « lowevCamelCase » et, le cas échéant, des noms concis, lisibles par l'homme et sémantiques.</p> +Pour les noms de fonctions, utilisez la casse minuscule au format chameau « lowevCamelCase » et, le cas échéant, des noms concis, lisibles par l'homme et sémantiques. -<p>Par exemple :</p> +Par exemple : -<pre class="brush: js example-good">function sayHello() { +```js example-good +function sayHello() { alert('Bonjour !'); -};</pre> +}; +``` -<p>En évitant de faire :</p> +En évitant de faire : -<pre class="brush: js example-bad">function SayHello() { +```js example-bad +function SayHello() { alert('Bonjour !'); }; function notVeryObviousName() { alert('Bonjour !'); }; -</pre> +``` -<div class="note"> - <p><strong>Note :</strong> Le seul endroit où il est acceptable de ne pas utiliser des noms sémantiques lisibles par l'homme est lorsqu'une convention reconnue très courante existe, comme l'utilisation de <code>i</code>, <code>j</code>, etc. pour les itérateurs de boucle.</p> -</div> +> **Note :** Le seul endroit où il est acceptable de ne pas utiliser des noms sémantiques lisibles par l'homme est lorsqu'une convention reconnue très courante existe, comme l'utilisation de `i`, `j`, etc. pour les itérateurs de boucle. -<h3 id="Defining_functions">Définition des fonctions</h3> +### Définition des fonctions -<p>Dans la mesure du possible, utilisez la déclaration <code>fonction</code> pour définir des fonctions sur des expressions de fonction :</p> +Dans la mesure du possible, utilisez la déclaration `fonction` pour définir des fonctions sur des expressions de fonction : -<p>Faites comme ça :</p> +Faites comme ça : -<pre class="brush: js example-good">function sum(a, b) { +```js example-good +function sum(a, b) { return a + b; -}</pre> +} +``` -<p>Pas comme ça :</p> +Pas comme ça : -<pre class="brush: js example-bad">let sum = function(a, b) { +```js example-bad +let sum = function(a, b) { return a + b; -}</pre> +} +``` -<p>Lorsque vous utilisez des fonctions anonymes à l'intérieur d'une méthode qui requiert une fonction comme paramètre, il est acceptable (mais pas obligatoire) d'utiliser une fonction flèche pour rendre le code plus court et plus propre.</p> +Lorsque vous utilisez des fonctions anonymes à l'intérieur d'une méthode qui requiert une fonction comme paramètre, il est acceptable (mais pas obligatoire) d'utiliser une fonction flèche pour rendre le code plus court et plus propre. -<p>Donc, au lieu de ça :</p> +Donc, au lieu de ça : -<pre class="brush: js example-good">const array1 = [1, 2, 3, 4]; +```js example-good +const array1 = [1, 2, 3, 4]; let sum = array.reduce(function(a, b) { return a + b; -});</pre> +}); +``` -<p>vous pourriez écrire ceci :</p> +vous pourriez écrire ceci : -<pre class="brush: js example-good">const array = [1, 2, 3, 4]; -let sum = array.reduce((a, b) => +```js example-good +const array = [1, 2, 3, 4]; +let sum = array.reduce((a, b) => a + b -);</pre> +); +``` -<p>N'oubliez pas non plus :</p> +N'oubliez pas non plus : -<ul> - <li>Il ne doit y avoir <em>aucun espace</em> entre un nom de fonction et sa parenthèse ouvrante.</li> - <li>Il doit y avoir <em>un espace</em> entre les parenthèses et l'accolade ouvrante.</li> -</ul> +- Il ne doit y avoir _aucun espace_ entre un nom de fonction et sa parenthèse ouvrante. +- Il doit y avoir _un espace_ entre les parenthèses et l'accolade ouvrante. -<h3 id="Creating_objects">Création d'objets</h3> +### Création d'objets -<p>Utilisez des littéraux - et non des constructeurs - pour créer des objets généraux (c'est-à-dire lorsque les classes ne sont pas concernées) :</p> +Utilisez des littéraux - et non des constructeurs - pour créer des objets généraux (c'est-à-dire lorsque les classes ne sont pas concernées) : -<p>Par exemple :</p> +Par exemple : -<pre class="brush: js example-good">let myObject = { };</pre> +```js example-good +let myObject = { }; +``` -<p>Et pas :</p> +Et pas : -<pre class="brush: js example-bad">let myObject = new Object();</pre> +```js example-bad +let myObject = new Object(); +``` -<h3 id="Object_classes">Classes d'objets</h3> +### Classes d'objets -<p>Utilisez la syntaxe de classe ES pour les objets, et non les constructeurs à l'ancienne.</p> +Utilisez la syntaxe de classe ES pour les objets, et non les constructeurs à l'ancienne. -<p>À titre d'exemples :</p> +À titre d'exemples : -<pre class="brush: js example-good">class Person { +```js example-good +class Person { constructor(name, age, gender) { this.name = name; this.age = age; @@ -423,79 +461,94 @@ let sum = array.reduce((a, b) => greeting() { console.log(`Salut ! Je m'appelle ${this.name}`); }; -}</pre> +} +``` -<p>Utilisez <code>extends</code> pour l'héritage :</p> +Utilisez `extends` pour l'héritage : -<pre class="brush: js example-good">class Teacher extends Person { +```js example-good +class Teacher extends Person { ... -}</pre> +} +``` -<h3 id="Object_naming">Nommage des objets</h3> +### Nommage des objets -<p>Lorsque vous définissez une classe d'objets (comme ci-dessus), utilisez l'écriture de casse au format chameau en majuscule « UpperCamelCase » (également connue sous le nom de « PascalCasing ») pour le nom de la classe, et la casse en minuscule « lowerCamelCase » pour les noms des propriétés et des méthodes de l'objet.</p> +Lorsque vous définissez une classe d'objets (comme ci-dessus), utilisez l'écriture de casse au format chameau en majuscule « UpperCamelCase » (également connue sous le nom de « PascalCasing ») pour le nom de la classe, et la casse en minuscule « lowerCamelCase » pour les noms des propriétés et des méthodes de l'objet. -<p>Lors de la définition d'une instance d'objet, qu'il s'agisse d'un littéral ou d'un constructeur, utilisez le lowerCamelCase pour le nom de l'instance :</p> +Lors de la définition d'une instance d'objet, qu'il s'agisse d'un littéral ou d'un constructeur, utilisez le lowerCamelCase pour le nom de l'instance : -<pre class="brush: js example-good">let hanSolo = new Person('Han Solo', 25, 'male'); +```js example-good +let hanSolo = new Person('Han Solo', 25, 'male'); let hanSolo = { name: 'Han Solo', age: 25, gender: 'male' -}</pre> +} +``` -<h2 id="Arrays">Tableaux</h2> +## Tableaux -<h3 id="Creating_arrays">Création de tableaux</h3> +### Création de tableaux -<p>Utilisez des littéraux - et non des constructeurs - pour créer des tableaux :</p> +Utilisez des littéraux - et non des constructeurs - pour créer des tableaux : -<p>Comme ceci :</p> +Comme ceci : -<pre class="brush: js example-good">let myArray = [ ];</pre> +```js example-good +let myArray = [ ]; +``` -<p>Pas comme ça :</p> +Pas comme ça : -<pre class="brush: js example-bad">let myArray = new Array(length);</pre> +```js example-bad +let myArray = new Array(length); +``` -<h3 id="Adding_to_an_array">Ajout à un tableau</h3> +### Ajout à un tableau -<p>Pour ajouter des éléments à un tableau, utilisez <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/push">push()</a></code>, et non l'affectation directe. Étant donné le tableau suivant :</p> +Pour ajouter des éléments à un tableau, utilisez [`push()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/push), et non l'affectation directe. Étant donné le tableau suivant : -<pre class="brush: js">const pets = [];</pre> +```js +const pets = []; +``` -<p>faites ça :</p> +faites ça : -<pre class="brush: js example-good">pets.push('cat');</pre> +```js example-good +pets.push('cat'); +``` -<p>et pas ça :</p> +et pas ça : -<pre class="brush: js example-bad">pets[pets.length] = 'cat';</pre> +```js example-bad +pets[pets.length] = 'cat'; +``` -<h2 id="Error_handling">Traitement des erreurs</h2> +## Traitement des erreurs -<p>Si certains états de votre programme lancent des erreurs non attrapées, ils interrompent l'exécution et réduisent potentiellement l'utilité de l'exemple. Vous devriez donc attraper les erreurs en utilisant un bloc <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> :</p> +Si certains états de votre programme lancent des erreurs non attrapées, ils interrompent l'exécution et réduisent potentiellement l'utilité de l'exemple. Vous devriez donc attraper les erreurs en utilisant un bloc [`try...catch`](/fr/docs/Web/JavaScript/Reference/Statements/try...catch) : -<pre class="brush: js example-good">try { +```js example-good +try { console.log(results); } catch(e) { console.error(e); -}</pre> +} +``` -<h2 id="Good_JavaScript_examples_on_MDN">De bons exemples de JavaScript sur MDN</h2> +## De bons exemples de JavaScript sur MDN -<p>Vous pouvez trouver de bons extraits de JavaScript, concis et significatifs, en haut de nos pages <a href="/fr/docs/Web/JavaScript/Reference">Référence du langage JavaScript</a> - parcourez-les pour en trouver.</p> +Vous pouvez trouver de bons extraits de JavaScript, concis et significatifs, en haut de nos pages [Référence du langage JavaScript](/fr/docs/Web/JavaScript/Reference) - parcourez-les pour en trouver. -<p>Nos exemples interactifs (et autres) sont généralement rédigés de manière à suivre les directives ci-dessus, mais sachez qu'ils peuvent différer à certains endroits, car ils ont été rédigés pour la plupart avant que les directives ne soient nouvellement rédigées.</p> +Nos exemples interactifs (et autres) sont généralement rédigés de manière à suivre les directives ci-dessus, mais sachez qu'ils peuvent différer à certains endroits, car ils ont été rédigés pour la plupart avant que les directives ne soient nouvellement rédigées. -<p>En ce qui concerne les exemples d'API, nous aimerions mettre en avant quelques exemples qui nous semblent bons :</p> +En ce qui concerne les exemples d'API, nous aimerions mettre en avant quelques exemples qui nous semblent bons : -<ul> - <li><a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch#examples">Exemples de <code>fetch()</code></a></li> - <li><a href="/fr/docs/Web/API/CanvasRenderingContext2D/fillRect#examples">Exemples de <code>fillRect()</code></a> (les exemples de Canvas 2D sont généralement bons, bien qu'ils utilisent toujours l'ancienne déclaration <code>var</code>).</li> - <li><a href="/fr/docs/Web/API/PaymentRequest/show">Payment Request API <code>show()</code></a> (Les exemples de <a href="/fr/docs/Web/API/PaymentRequest"><code>PaymentRequest</code></a> sont généralement assez bons).</li> - <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utilisations de l'API Web Audio</a> (les bonnes pratiques générales en matière de HTML, CSS et JavaScript, ainsi qu'une bonne démonstration de l'utilisation des extraits et des liens vers des exemples complets ailleurs).</li> - <li><a href="/fr/docs/Web/API/Media_Capabilities_API/Using_the_Media_Capabilities_API">Utilisations de l'API Media Capabilities</a> (des bonnes pratiques plus générales pour l'utilisation des extraits de code dans un guide).</li> -</ul> +- [Exemples de `fetch()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch#examples) +- [Exemples de `fillRect()`](/fr/docs/Web/API/CanvasRenderingContext2D/fillRect#examples) (les exemples de Canvas 2D sont généralement bons, bien qu'ils utilisent toujours l'ancienne déclaration `var`). +- [Payment Request API `show()`](/fr/docs/Web/API/PaymentRequest/show) (Les exemples de [`PaymentRequest`](/fr/docs/Web/API/PaymentRequest) sont généralement assez bons). +- [Utilisations de l'API Web Audio](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) (les bonnes pratiques générales en matière de HTML, CSS et JavaScript, ainsi qu'une bonne démonstration de l'utilisation des extraits et des liens vers des exemples complets ailleurs). +- [Utilisations de l'API Media Capabilities](/fr/docs/Web/API/Media_Capabilities_API/Using_the_Media_Capabilities_API) (des bonnes pratiques plus générales pour l'utilisation des extraits de code dans un guide). diff --git a/files/fr/mdn/guidelines/code_guidelines/shell/index.md b/files/fr/mdn/guidelines/code_guidelines/shell/index.md index a3a1cba4b0..74f9a25912 100644 --- a/files/fr/mdn/guidelines/code_guidelines/shell/index.md +++ b/files/fr/mdn/guidelines/code_guidelines/shell/index.md @@ -9,29 +9,28 @@ tags: - Shell translation_of: MDN/Guidelines/Code_guidelines/Shell --- -<div>{{MDNSidebar}}</div> +{{MDNSidebar}} -<p>Les directives suivantes expliquent comment rédiger des exemples de lignes de commande sur MDN.</p> +Les directives suivantes expliquent comment rédiger des exemples de lignes de commande sur MDN. -<h2 id="Shell_prompts_in_brief">Les commandes Shell en bref</h2> +## Les commandes Shell en bref -<p>Un <i>shell</i> est un programme qui attend que vous tapiez une commande et que vous appuyiez sur la touche retour. Pour indiquer les commandes que vous devez taper, la documentation MDN les répertorie dans un bloc de code, similaire aux exemples de code. Un tel bloc ressemble à ceci :</p> +Un _shell_ est un programme qui attend que vous tapiez une commande et que vous appuyiez sur la touche retour. Pour indiquer les commandes que vous devez taper, la documentation MDN les répertorie dans un bloc de code, similaire aux exemples de code. Un tel bloc ressemble à ceci : -<pre class="brush: bash example-good"># Cela peut prendre un certain temps… +```bash example-good +# Cela peut prendre un certain temps… hg clone https://hg.mozilla.org/mozilla-central/ firefox -cd firefox</pre> +cd firefox +``` -<h2 id="Guidelines">Directives</h2> +## Directives -<p>Il existe quelques directives à suivre lors de l'écriture d'un bloc de code shell :</p> +Il existe quelques directives à suivre lors de l'écriture d'un bloc de code shell : -<ul> - <li>N'incluez pas de "$" ou de ">" au début d'une instruction shell. Cela perturbe plus qu'il n'aide et n'est pas utile pour copier les instructions.</li> - <li>Les commentaires commencent par "#".</li> - <li>Choisissez la coloration syntaxique "bash".</li> -</ul> +- N'incluez pas de "$" ou de ">" au début d'une instruction shell. Cela perturbe plus qu'il n'aide et n'est pas utile pour copier les instructions. +- Les commentaires commencent par "#". +- Choisissez la coloration syntaxique "bash". -<h2 id="Good_shell_prompt_examples_on_MDN">De bons exemples de commandes shell sur le MDN</h2> - -<p>Nos <a href="/fr/docs/Learn/Server-side/Django">Documents de développement côté serveur de Django</a> montrent une bonne pratique de présentation des commandes de l'invite shell, etc. sur le MDN. Regardez <a href="/fr/docs/Learn/Server-side/Django/development_environment">Configurer un environnement de développement Django</a> par exemple.</p> +## De bons exemples de commandes shell sur le MDN +Nos [Documents de développement côté serveur de Django](/fr/docs/Learn/Server-side/Django) montrent une bonne pratique de présentation des commandes de l'invite shell, etc. sur le MDN. Regardez [Configurer un environnement de développement Django](/fr/docs/Learn/Server-side/Django/development_environment) par exemple. diff --git a/files/fr/mdn/guidelines/conventions_definitions/index.md b/files/fr/mdn/guidelines/conventions_definitions/index.md index 72ac92bc7c..d2c896299d 100644 --- a/files/fr/mdn/guidelines/conventions_definitions/index.md +++ b/files/fr/mdn/guidelines/conventions_definitions/index.md @@ -9,167 +9,140 @@ tags: - MDN Meta translation_of: MDN/Guidelines/Conventions_definitions --- -<div>{{MDNSidebar}}</div> +{{MDNSidebar}} -<p>Cet article définit certaines conventions et définitions couramment utilisées sur MDN et qui pourraient ne pas être évidentes au sein de la documentation.</p> +Cet article définit certaines conventions et définitions couramment utilisées sur MDN et qui pourraient ne pas être évidentes au sein de la documentation. -<h2 id="Definitions">Définitions</h2> +## Définitions -<h3 id="Deprecated_and_obsolete">Déprécié et obsolète</h3> +### Déprécié et obsolète -<p>Les adjectifs <strong>déprécié</strong> et <strong>obsolète</strong> sont souvent associés à des technologies ou à des spécifications : qu'est-ce que cela signifie ?</p> +Les adjectifs **déprécié** et **obsolète** sont souvent associés à des technologies ou à des spécifications : qu'est-ce que cela signifie ? -<dl> - <dt>Déprécié (<i>deprecated</i> en anglais)</dt> - <dd>Sur MDN, le terme <strong>déprécié</strong> est utilisé afin d'indiquer qu'une API ou une technologie n'est plus recommandée bien qu'elle soit toujours implémentée et qu'elle puisse encore fonctionner. Nous avons mis à jour la définition utilisée <a href="https://github.com/mdn/browser-compat-data/blob/master/schemas/compat-data-schema.md#status-information">pour le projet browser-compat-data</a> qui indique "cette fonctionnalité n'est désormais plus recommandée. Elle pourra être supprimée à l'avenir ou être conservée uniquement à des fins de compatibilité. Veuillez éviter d'utiliser cette fonctionnalité."</dd> - <dt>Obsolète</dt> - <dd>Sur MDN, le terme <strong>obsolète</strong> est utilisé afin d'indiquer une API ou une technologie qui n'est plus recommandée et qui n'est plus implémentée dans les navigateurs. Cette nuance avec la dépréciation pouvait être source de confusion et peu utile (dans les deux cas, on doit éviter d'utiliser une telle fonctionnalité pour un site ou une application en production). Nous n'utilisons plus cette notion désormais et toute occurrence devrait être retirée/remplacée par « déprécié ».</dd> -</dl> +- Déprécié (_deprecated_ en anglais) + - : Sur MDN, le terme **déprécié** est utilisé afin d'indiquer qu'une API ou une technologie n'est plus recommandée bien qu'elle soit toujours implémentée et qu'elle puisse encore fonctionner. Nous avons mis à jour la définition utilisée [pour le projet browser-compat-data](https://github.com/mdn/browser-compat-data/blob/master/schemas/compat-data-schema.md#status-information) qui indique "cette fonctionnalité n'est désormais plus recommandée. Elle pourra être supprimée à l'avenir ou être conservée uniquement à des fins de compatibilité. Veuillez éviter d'utiliser cette fonctionnalité." +- Obsolète + - : Sur MDN, le terme **obsolète** est utilisé afin d'indiquer une API ou une technologie qui n'est plus recommandée et qui n'est plus implémentée dans les navigateurs. Cette nuance avec la dépréciation pouvait être source de confusion et peu utile (dans les deux cas, on doit éviter d'utiliser une telle fonctionnalité pour un site ou une application en production). Nous n'utilisons plus cette notion désormais et toute occurrence devrait être retirée/remplacée par « déprécié ». -<h3 id="Experimental">Expérimental</h3> +### Expérimental -<p><strong>Expérimental</strong> peut avoir différentes significations en fonction du contexte. Lorsqu'on décrit une technologie comme expérimentale sur MDN, cela signifie qu'elle est en cours de conception/implémentation et en train d'être ajoutée à la plateforme web (ou que son ajout est envisagé).</p> +**Expérimental** peut avoir différentes significations en fonction du contexte. Lorsqu'on décrit une technologie comme expérimentale sur MDN, cela signifie qu'elle est en cours de conception/implémentation et en train d'être ajoutée à la plateforme web (ou que son ajout est envisagé). -<p>Au moins un des deux points qui suivent sera vérifié :</p> +Au moins un des deux points qui suivent sera vérifié : -<ul> - <li>Elle est implémentée et activée par défaut dans moins de deux des navigateurs principaux.</li> - <li>La spécification sous-jacente peut changer de façon significative et entraîner des ruptures de rétro-compatibilité (autrement dit, ces modifications peuvent casser le code qui exploite ces fonctionnalités).</li> -</ul> +- Elle est implémentée et activée par défaut dans moins de deux des navigateurs principaux. +- La spécification sous-jacente peut changer de façon significative et entraîner des ruptures de rétro-compatibilité (autrement dit, ces modifications peuvent casser le code qui exploite ces fonctionnalités). -<p>Si l'une ou l'autre (ou les deux) de ces propositions est vraie, il est préférable de réfléchir avant d'ajouter cette technologique à un projet de production (qui n'est ni une démonstration ni une expérimentation). Voir aussi la définition d'« expérimental » dans <a href="https://github.com/mdn/browser-compat-data/blob/master/schemas/compat-data-schema.md#status-information">le projet browser-compat-data</a>.</p> +Si l'une ou l'autre (ou les deux) de ces propositions est vraie, il est préférable de réfléchir avant d'ajouter cette technologique à un projet de production (qui n'est ni une démonstration ni une expérimentation). Voir aussi la définition d'« expérimental » dans [le projet browser-compat-data](https://github.com/mdn/browser-compat-data/blob/master/schemas/compat-data-schema.md#status-information). -<p>À l'inverse, quelque chose n'est plus expérimental lorsque :</p> +À l'inverse, quelque chose n'est plus expérimental lorsque : -<ul> - <li>C'est implémenté dans deux navigateurs principaux ou plus ou</li> - <li>Que sa spécification risque peu d'évoluer d'une façon qui casserait la compatibilité avec le Web.</li> -</ul> +- C'est implémenté dans deux navigateurs principaux ou plus ou +- Que sa spécification risque peu d'évoluer d'une façon qui casserait la compatibilité avec le Web. -<p>Le <em>ou</em> a toute son importance ici. Généralement, si une technologie est implémentée sur différents navigateurs principaux, la spécification sera stable. Toutefois, ce n'est pas toujours le cas. On a aussi des technologies dont la spécification est stable mais qui ne sont pas implémentées nativement dans les navigateurs (voir <a href="/fr/docs/Related/IMSC">IMSC</a>, par exemple).</p> +Le _ou_ a toute son importance ici. Généralement, si une technologie est implémentée sur différents navigateurs principaux, la spécification sera stable. Toutefois, ce n'est pas toujours le cas. On a aussi des technologies dont la spécification est stable mais qui ne sont pas implémentées nativement dans les navigateurs (voir [IMSC](/fr/docs/Related/IMSC), par exemple). -<h3 id="Archived_pages">Pages archivées</h3> +### Pages archivées -<p>Les pages archivées sont des pages stockées dans <a href="/fr/docs/Archive">les archives MDN pour le contenu obsolète</a>. Ces pages contiennent des informations caduques qui ne sont plus directement utiles.</p> +Les pages archivées sont des pages stockées dans [les archives MDN pour le contenu obsolète](/fr/docs/Archive). Ces pages contiennent des informations caduques qui ne sont plus directement utiles. -<p>Pour la plupart, elles concernent des projets Mozilla qui ont été arrêtés et qu'on ne devrait plus utiliser. Elles ne sont cependant pas supprimées en raison de leur valeur historique et de certains concepts ou idées qui pourraient s'avérer utiles pour de futurs projets (un bon exemple est <a href="/fr/docs/Archive/B2G_OS">le projet B2G (Firefox OS)</a>).</p> +Pour la plupart, elles concernent des projets Mozilla qui ont été arrêtés et qu'on ne devrait plus utiliser. Elles ne sont cependant pas supprimées en raison de leur valeur historique et de certains concepts ou idées qui pourraient s'avérer utiles pour de futurs projets (un bon exemple est [le projet B2G (Firefox OS)](/fr/docs/Archive/B2G_OS)). -<h4 id="When_should_a_page_be_archived">Comment décider de l'archivage d'une page ?</h4> +#### Comment décider de l'archivage d'une page ? -<p>Une page devrait être archivée si elle s'inscrit dans la description précédente. Pour archiver une page, voir <a href="https://github.com/mdn/content#archiving-and-unarchiving-pages">la documentation correspondante sur GitHub</a>.</p> +Une page devrait être archivée si elle s'inscrit dans la description précédente. Pour archiver une page, voir [la documentation correspondante sur GitHub](https://github.com/mdn/content#archiving-and-unarchiving-pages). -<h3 id="Deleted_pages">Pages supprimées</h3> +### Pages supprimées -<p>Les pages supprimées ont été explicitement supprimées de MDN. On aura par exemple l'interface <code><a href="/fr/docs/Web/API/SharedKeyframeList">SharedKeyframeList</a></code> et le constructeur <code><a href="/fr/docs/Web/API/SharedKeyframeList/SharedKeyframeList">SharedKeyframeList()</a></code>. Ces pages contenaient des informations qui ne sont plus utiles à qui que ce soit et/ou qui sont incorrectes au point qu'elles peuvent être source de confusion ou d'interprétations erronées.</p> +Les pages supprimées ont été explicitement supprimées de MDN. On aura par exemple l'interface [`SharedKeyframeList`](/fr/docs/Web/API/SharedKeyframeList) et le constructeur [`SharedKeyframeList()`](/fr/docs/Web/API/SharedKeyframeList/SharedKeyframeList). Ces pages contenaient des informations qui ne sont plus utiles à qui que ce soit et/ou qui sont incorrectes au point qu'elles peuvent être source de confusion ou d'interprétations erronées. -<p>Il peut s'agir :</p> +Il peut s'agir : -<ul> - <li>De pages de référence pour les fonctionnalités d'API qui ont été retirées de la spécification avant toute implémentation dans les navigateurs.</li> - <li>D'articles couvrant des techniques qui se sont avérés de mauvaises pratiques par la suite ou qui ont été remplacées par de meilleures pratiques.</li> - <li>D'articles contenant des informations remplacés par d'autres articles, de meilleure qualité.</li> - <li>D'articles contenant du contenu inapproprié pour MDN.</li> - <li>De traductions obsolètes pour lesquelles la version anglaise est préférable en tout point et pour lesquelles il serait plus judicieux de démarrer une nouvelle traduction.</li> -</ul> +- De pages de référence pour les fonctionnalités d'API qui ont été retirées de la spécification avant toute implémentation dans les navigateurs. +- D'articles couvrant des techniques qui se sont avérés de mauvaises pratiques par la suite ou qui ont été remplacées par de meilleures pratiques. +- D'articles contenant des informations remplacés par d'autres articles, de meilleure qualité. +- D'articles contenant du contenu inapproprié pour MDN. +- De traductions obsolètes pour lesquelles la version anglaise est préférable en tout point et pour lesquelles il serait plus judicieux de démarrer une nouvelle traduction. -<h4 id="When_should_a_page_be_deleted">Comment décider de la suppression d'une page ?</h4> +#### Comment décider de la suppression d'une page ? -<p>Une page devrait être supprimée si elle correspond à la description précédente. Pour supprimer une page, voir <a href="https://github.com/mdn/content#deleting-a-document">la documentation sur GitHub</a>.</p> +Une page devrait être supprimée si elle correspond à la description précédente. Pour supprimer une page, voir [la documentation sur GitHub](https://github.com/mdn/content#deleting-a-document). -<h3 id="When_to_document_new_technologies">Quand documenter de nouvelles technologies</h3> +### Quand documenter de nouvelles technologies -<p>Sur MDN, nous cherchons continuellement à documenter les technologies web standard comme il se doit. Il faut donc trouver un équilibre entre une documentation publiée suffisamment tôt afin que les développeurs puissent découvrir les nouvelles fonctionnalités lorsqu'ils en ont besoin et une documentation publiée suffisamment tard afin que la technologie en question soit suffisamment mature et stable afin que la documentation n'ait pas à être réécrite constamment ou à être supprimée rapidement suite à des changements de rupture dans les spécifications.</p> +Sur MDN, nous cherchons continuellement à documenter les technologies web standard comme il se doit. Il faut donc trouver un équilibre entre une documentation publiée suffisamment tôt afin que les développeurs puissent découvrir les nouvelles fonctionnalités lorsqu'ils en ont besoin et une documentation publiée suffisamment tard afin que la technologie en question soit suffisamment mature et stable afin que la documentation n'ait pas à être réécrite constamment ou à être supprimée rapidement suite à des changements de rupture dans les spécifications. -<p>En général, le seuil pour déclencher la documentation d'une nouvelle technologie web correspond au moment où :</p> +En général, le seuil pour déclencher la documentation d'une nouvelle technologie web correspond au moment où : -<p><em>« La fonctionnalité est en voie de standardisation et implémentée quelque part. »</em></p> +_« La fonctionnalité est en voie de standardisation et implémentée quelque part. »_ -<p>Une nouvelle technologie mérite sans doute d'être documentée si :</p> +Une nouvelle technologie mérite sans doute d'être documentée si : -<ul> - <li>Elle est spécifiée dans une spécification publiée par une organisation de standardisation reconnue (tel que le W3C, le WHATWG, Khronos, l'IETF, etc.) et qu'elle a atteint un certain niveau de stabilité (pour le W3C, par exemple, il peut s'agir du statut « <i>working draft</i> » ou « <i>candidate recommendation</i> ») qui peut également se traduire par le volume de tickets renseignés à son propos).</li> - <li>Elle est implémentée par au moins un navigateur et que d'autres navigateurs témoignent d'un intérêt pour l'implémentation (par exemple avec un ticket « <i>intent to implement</i> »).</li> -</ul> +- Elle est spécifiée dans une spécification publiée par une organisation de standardisation reconnue (tel que le W3C, le WHATWG, Khronos, l'IETF, etc.) et qu'elle a atteint un certain niveau de stabilité (pour le W3C, par exemple, il peut s'agir du statut « _working draft_ » ou « _candidate recommendation_ ») qui peut également se traduire par le volume de tickets renseignés à son propos). +- Elle est implémentée par au moins un navigateur et que d'autres navigateurs témoignent d'un intérêt pour l'implémentation (par exemple avec un ticket « _intent to implement_ »). -<p>Il faut prendre ses précautions quant à la documentation d'une nouvelle technologie si :</p> +Il faut prendre ses précautions quant à la documentation d'une nouvelle technologie si : -<ul> - <li>Elle ne dispose d'aucune spécification ou si cette spécification est une note/un brouillon sujet à changement.</li> - <li>Un ou aucun navigateur ne l'implémente et que le reste des navigateurs ne témoigne pas d'intérêt pour son implémentation (ce qui peut être déterminé en demandant aux développeuses et développeurs de ces navigateurs ou en consultant les systèmes de ticket ou les listes de diffusion, etc.).</li> -</ul> +- Elle ne dispose d'aucune spécification ou si cette spécification est une note/un brouillon sujet à changement. +- Un ou aucun navigateur ne l'implémente et que le reste des navigateurs ne témoigne pas d'intérêt pour son implémentation (ce qui peut être déterminé en demandant aux développeuses et développeurs de ces navigateurs ou en consultant les systèmes de ticket ou les listes de diffusion, etc.). -<p>Une nouvelle technologie ne doit pas être documentée si :</p> +Une nouvelle technologie ne doit pas être documentée si : -<ul> - <li>Il ne s'agit pas d'une technologie web et/ou qu'il s'agit d'une technologie propriétaire.</li> - <li>Il existe déjà des signes de dépréciation ou de remplacement par une fonctionnalité similaire.</li> -</ul> +- Il ne s'agit pas d'une technologie web et/ou qu'il s'agit d'une technologie propriétaire. +- Il existe déjà des signes de dépréciation ou de remplacement par une fonctionnalité similaire. -<h2 id="Conventions">Conventions</h2> +## Conventions -<h3 id="When_something_is_removed_from_the_specification">Lors du retrait d'une fonctionnalité de la spécification</h3> +### Lors du retrait d'une fonctionnalité de la spécification -<p>Il arrive parfois, pendant le développement d'une spécification et au fur à et mesure de l'évolution de standards évolutifs que de nouveaux éléments, de nouvelles méthodes ou propriétés ou autres soient ajoutés à la spécification, y restent pendant quelque temps avant d'être retirés. Cela arrive parfois rapidement et peut aussi prendre plusieurs mois ou années avant que la suppression soit effectuée. Gérer cette suppression dans la documentation peut alors s'avérer délicat. Voici quelques lignes directrices pour vous aider à décider de ce qu'il faut faire.</p> +Il arrive parfois, pendant le développement d'une spécification et au fur à et mesure de l'évolution de standards évolutifs que de nouveaux éléments, de nouvelles méthodes ou propriétés ou autres soient ajoutés à la spécification, y restent pendant quelque temps avant d'être retirés. Cela arrive parfois rapidement et peut aussi prendre plusieurs mois ou années avant que la suppression soit effectuée. Gérer cette suppression dans la documentation peut alors s'avérer délicat. Voici quelques lignes directrices pour vous aider à décider de ce qu'il faut faire. -<div class="note"> -<p><strong>Note :</strong> Pour la suite de cette discussion, le terme « élément » sera utilisé de façon générique pour indique n'importe quel objet qui peut faire partie d'une spécification : un élément, un attribut d'un élément, une interface, une méthode spécifique, une propriété, un membre d'une interface, etc.</p> -</div> +> **Note :** Pour la suite de cette discussion, le terme « élément » sera utilisé de façon générique pour indique n'importe quel objet qui peut faire partie d'une spécification : un élément, un attribut d'un élément, une interface, une méthode spécifique, une propriété, un membre d'une interface, etc. -<ul> - <li>Si l'élément n'a <em>jamais</em> été implémenté dans une version release d'<em>aucun</em> navigateur (y compris derrière une préférence ou un marqueur/flag), on supprimera toute référence à cet élément de la documentation. +- Si l'élément n'a _jamais_ été implémenté dans une version release d'_aucun_ navigateur (y compris derrière une préférence ou un marqueur/flag), on supprimera toute référence à cet élément de la documentation. - <ul> - <li>Si l'élément n'est décrit dans la documentation que par une ou des pages concernant uniquement cet élément (tel que <a href="/fr/docs/Web/API/RTCPeerConnection/close()"><code>RTCPeerConnection.close()</code></a>), on supprimera cette page. Si l'élément à retirer est une interface, on retirera également toutes les sous-pages pour chacune des propriétés et des méthodes pour cette interface.</li> - <li>On supprimera l'élément de toute liste de propriétés, d'attributs, de méthodes, etc. Pour les méthodes d'une interface, cela signifie qu'on retirera le lien de la section « Méthodes » de la page générale sur l'interface.</li> - <li>On cherchera dans le texte de la page de l'interface toute mention à cet élément afin de les supprimer. Lors de cette suppression on fera attention à vérifier que la modification ne cause pas d'erreur de grammaire ou d'incohérence. Aussi, il faudra parfois reformuler une phrase ou un paragraphe lors de la suppression. On peut aussi avoir à supprimer des sections entières si la description de l'élément est verbeuse.</li> - <li>De même, on cherchera les références à cet élément dans les guides, les tutoriels et dans la documentation connexe. Là encore, on veillera à la cohérence et à la grammaire lors de la suppression, quitte à reformuler ce qui doit l'être.</li> - <li>On cherchera parmi le contenu de référence sur MDN pour vérifier qu'il n'y a pas d'autres mentions autre part (on les retirera également le cas échéant).</li> - <li>Si les fichiers JSON du <a href="https://github.com/mdn/browser-compat-data">dépôt pour les données de compatibilité des navigateurs</a> contiennent des données relatives aux éléments supprimés, on les supprimera des fichiers et on fournira une PR expliquant la raison de cette suppression dans le message de commit et dans la description de la PR. Ce faisant, on veillera à ne pas casser la structure syntaxique du JSON.</li> - </ul> - </li> - <li>Si l'élément a été implémenté dans au moins une release d'au moins un des principaux navigateurs <em>mais uniquement derrière une préférence</em> ou un marqueur, on ne supprimera pas immédiatement la documentation associée. À la place, on indiquera que l'élément est déprécié de la façon suivante : - <ul> - <li>Si la documentation possède des pages décrivant uniquement cet élément (tel que <a href="/fr/docs/Web/API/RTCPeerConnection/close()"><code>RTCPeerConnection.close()</code></a>), on ajoutera la macro {{TemplateLink("deprecated_header")}} en haut de la page et on ajoutera la balise <i>Deprecated</i> à la liste des étiquettes de la page.</li> - <li>Sur la page de présentation de l'élément, de l'interface ou de l'API, on trouvera la liste des éléments qui incluent cet élément retiré et on ajoutera la macro {{TemplateLink("deprecated_inline")}} après le nom de l'élément dans la liste.</li> - <li>On cherchera les mentions de cet élément parmi les textes d'informations sur la page générale de l'interface, de l'élément et on ajoutera des avertissements pertinents au sein de ces textes en indiquant « [telle fonctionnalité] a été retirée de la spécification et sera prochainement retiré des navigateurs. Voir [lien vers un autre article] pour une autre façon de procéder ».</li> - <li>De même, on cherchera les mentions dans les guides ou tutoriels et on ajoutera des avertissements semblables.</li> - <li>On cherchera sur l'ensemble de MDN les différentes références à l'élément supprimé afin d'ajouter des avertissements.</li> - <li>Plus tard, une décision pourra être prise quant au retrait définitif de cet élément dans la spécification. Ce n'est pas la démarche normale mais si l'élément était particulièrement peu utilisé ou mineur, on pourra choisir cette voie.</li> - <li>On mettra à jour les données <a href="https://github.com/mdn/browser-compat-data">du dépôt de données quant à la compatibilité des navigateurs</a> pour refléter cette obsolescence.</li> - </ul> - </li> - <li>Si l'élément a été implémenté dans au moins une release d'au moins un navigateur sans préférence ou marqueur nécessaire, on marquera la dépréciation de l'élément ainsi : - <ul> - <li>Si l'élément est documenté dans des pages de référence qui lui sont spécifiques (par exemple <a href="/fr/docs/Web/API/RTCPeerConnection/close()"><code>RTCPeerConnection.close()</code></a>), on ajoutera {{TemplateLink("deprecated_header")}} en haut de la page et on ajoutera l'étiquette « Deprecated » aux méta-données de la page.</li> - <li>Sur la page qui présente l'élément, l'interface ou l'API, on ajoutera la macro {{TemplateLink("deprecated_inline")}} pour les mentions de l'élément supprimé dans les différentes listes.</li> - <li>Pour tout texte d'information ou de description sur la page de présentation générale, on ajoutera des avertissements indiquant que l'élément a été supprimé de la spécification et qu'il est désormais déprécié et pourra être supprimé des navigateurs. On indiquera que son utilisation est déconseillée et on ajoutera des liens vers toute page qui documenterait des méthodes alternatives.</li> - <li>On fera de même pour toute mention dans les guides et tutoriels qui mentionnent cet élément.</li> - <li>On fera de même pour toute mention autre part sur MDN.</li> - <li>Il est très peu probable que ces mentions soient retirées de la documentation. Toutefois, il est possible que certaines de ces pages soient déplacées dans les <a href="/fr/docs/Archive">Archives</a>.</li> - <li>On mettra à jour les éléments concernés <a href="https://github.com/mdn/browser-compat-data">dans le dépôt de données de compatibilité des navigateurs </a> afin d'indiquer la dépréciation de l'élément.</li> - </ul> - </li> -</ul> + - Si l'élément n'est décrit dans la documentation que par une ou des pages concernant uniquement cet élément (tel que [`RTCPeerConnection.close()`](</fr/docs/Web/API/RTCPeerConnection/close()>)), on supprimera cette page. Si l'élément à retirer est une interface, on retirera également toutes les sous-pages pour chacune des propriétés et des méthodes pour cette interface. + - On supprimera l'élément de toute liste de propriétés, d'attributs, de méthodes, etc. Pour les méthodes d'une interface, cela signifie qu'on retirera le lien de la section « Méthodes » de la page générale sur l'interface. + - On cherchera dans le texte de la page de l'interface toute mention à cet élément afin de les supprimer. Lors de cette suppression on fera attention à vérifier que la modification ne cause pas d'erreur de grammaire ou d'incohérence. Aussi, il faudra parfois reformuler une phrase ou un paragraphe lors de la suppression. On peut aussi avoir à supprimer des sections entières si la description de l'élément est verbeuse. + - De même, on cherchera les références à cet élément dans les guides, les tutoriels et dans la documentation connexe. Là encore, on veillera à la cohérence et à la grammaire lors de la suppression, quitte à reformuler ce qui doit l'être. + - On cherchera parmi le contenu de référence sur MDN pour vérifier qu'il n'y a pas d'autres mentions autre part (on les retirera également le cas échéant). + - Si les fichiers JSON du [dépôt pour les données de compatibilité des navigateurs](https://github.com/mdn/browser-compat-data) contiennent des données relatives aux éléments supprimés, on les supprimera des fichiers et on fournira une PR expliquant la raison de cette suppression dans le message de commit et dans la description de la PR. Ce faisant, on veillera à ne pas casser la structure syntaxique du JSON. -<p>Les formulations exactes des avertissements et autres messages doivent être adaptées si besoin. En cas de doute sur la formulation, n'hésitez pas à vous rendre sur <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">le canal MDN</a> sur <a href="https://wiki.mozilla.org/Matrix">Matrix</a> ou sur le forum de discussion <a href="https://discourse.mozilla.org/c/mdn">Discourse</a>.</p> +- Si l'élément a été implémenté dans au moins une release d'au moins un des principaux navigateurs _mais uniquement derrière une préférence_ ou un marqueur, on ne supprimera pas immédiatement la documentation associée. À la place, on indiquera que l'élément est déprécié de la façon suivante : -<h3 id="Copying_content_from_elsewhere">Copier du contenu d'une source tierce sur MDN</h3> + - Si la documentation possède des pages décrivant uniquement cet élément (tel que [`RTCPeerConnection.close()`](</fr/docs/Web/API/RTCPeerConnection/close()>)), on ajoutera la macro {{TemplateLink("deprecated_header")}} en haut de la page et on ajoutera la balise _Deprecated_ à la liste des étiquettes de la page. + - Sur la page de présentation de l'élément, de l'interface ou de l'API, on trouvera la liste des éléments qui incluent cet élément retiré et on ajoutera la macro {{TemplateLink("deprecated_inline")}} après le nom de l'élément dans la liste. + - On cherchera les mentions de cet élément parmi les textes d'informations sur la page générale de l'interface, de l'élément et on ajoutera des avertissements pertinents au sein de ces textes en indiquant « \[telle fonctionnalité] a été retirée de la spécification et sera prochainement retiré des navigateurs. Voir \[lien vers un autre article] pour une autre façon de procéder ». + - De même, on cherchera les mentions dans les guides ou tutoriels et on ajoutera des avertissements semblables. + - On cherchera sur l'ensemble de MDN les différentes références à l'élément supprimé afin d'ajouter des avertissements. + - Plus tard, une décision pourra être prise quant au retrait définitif de cet élément dans la spécification. Ce n'est pas la démarche normale mais si l'élément était particulièrement peu utilisé ou mineur, on pourra choisir cette voie. + - On mettra à jour les données [du dépôt de données quant à la compatibilité des navigateurs](https://github.com/mdn/browser-compat-data) pour refléter cette obsolescence. -<p>Il existe souvent du contenu utile sur un sujet donné en dehors de MDN. Toutefois, copier ce contenu peut s'accompagner de pénalités légales ou techniques.</p> +- Si l'élément a été implémenté dans au moins une release d'au moins un navigateur sans préférence ou marqueur nécessaire, on marquera la dépréciation de l'élément ainsi : -<p>Sur le plan technique, les moteurs de recherche ont tendance à pénaliser le classement d'un site qui reproduit du contenu existant par ailleurs. Il est donc préférable d'avoir du contenu original sur MDN pour veiller au bon référencement. On peut tout à fait ajouter des liens vers du contenu externe.</p> + - Si l'élément est documenté dans des pages de référence qui lui sont spécifiques (par exemple [`RTCPeerConnection.close()`](</fr/docs/Web/API/RTCPeerConnection/close()>)), on ajoutera {{TemplateLink("deprecated_header")}} en haut de la page et on ajoutera l'étiquette « Deprecated » aux méta-données de la page. + - Sur la page qui présente l'élément, l'interface ou l'API, on ajoutera la macro {{TemplateLink("deprecated_inline")}} pour les mentions de l'élément supprimé dans les différentes listes. + - Pour tout texte d'information ou de description sur la page de présentation générale, on ajoutera des avertissements indiquant que l'élément a été supprimé de la spécification et qu'il est désormais déprécié et pourra être supprimé des navigateurs. On indiquera que son utilisation est déconseillée et on ajoutera des liens vers toute page qui documenterait des méthodes alternatives. + - On fera de même pour toute mention dans les guides et tutoriels qui mentionnent cet élément. + - On fera de même pour toute mention autre part sur MDN. + - Il est très peu probable que ces mentions soient retirées de la documentation. Toutefois, il est possible que certaines de ces pages soient déplacées dans les [Archives](/fr/docs/Archive). + - On mettra à jour les éléments concernés [dans le dépôt de données de compatibilité des navigateurs ](https://github.com/mdn/browser-compat-data)afin d'indiquer la dépréciation de l'élément. -<p>Sur le plan légal, il faut être autorisé à contribuer au contenu et il doit être sous une licence et une attribution compatible avec <a href="/fr/docs/MDN/About#copyrights_and_licenses">celle de MDN</a>.</p> +Les formulations exactes des avertissements et autres messages doivent être adaptées si besoin. En cas de doute sur la formulation, n'hésitez pas à vous rendre sur [le canal MDN](https://chat.mozilla.org/#/room/#mdn:mozilla.org) sur [Matrix](https://wiki.mozilla.org/Matrix) ou sur le forum de discussion [Discourse](https://discourse.mozilla.org/c/mdn). -<ul> - <li><strong>Si vous avez créé le contenu en question</strong> (pour votre propre intérêt et en dehors de tout travail rémunéré) et que vous souhaitez contribuer à MDN sous la licence de MDN, c'est la situation la plus simple, n'hésitez pas à contribuer avec ce contenu.</li> - <li><strong>Si les droits d'auteur du contenu appartiennent à quelqu'un d'autre</strong>, il devra être sous une licence et attribué de façon compatible avec la licence de MDN. Il n'est souvent pas facile de déterminer la compatibilité entre deux licences sans bagage juridique. Pour ne pas prendre de risque inutile, vous pouvez contacter quelqu'un de l'équipe MDN sur <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">le canal MDN</a> sur <a href="https://wiki.mozilla.org/Matrix">Matrix</a> ou sur le forum de discussion <a href="https://discourse.mozilla.org/c/mdn">Discourse</a>.</li> -</ul> +### Copier du contenu d'une source tierce sur MDN -<h3 id="How_to_communicate_a_spec_conflict">Comment indiquer un conflit de spécification</h3> +Il existe souvent du contenu utile sur un sujet donné en dehors de MDN. Toutefois, copier ce contenu peut s'accompagner de pénalités légales ou techniques. -<p>Il arrive (rarement) qu'il y ait un conflit entre les différentes versions d'une spécification (généralement pour celles du W3C et du WHATWG). Par exemple, une des spécifications peut indiquer une fonctionnalité comme dépréciée tandis que l'autre n'indique pas cet état. Dans ces cas, on étudiera le comportement réel des navigateurs et on écrira une note afin d'indiquer cet état. Ainsi, en janvier 2019, l'attribut global <code><a href="/fr/docs/Web/HTML/Global_attributes/inputmode">inputmode</a></code> était touché par un conflit de spécification qui était indiqué ainsi sur la page :</p> +Sur le plan technique, les moteurs de recherche ont tendance à pénaliser le classement d'un site qui reproduit du contenu existant par ailleurs. Il est donc préférable d'avoir du contenu original sur MDN pour veiller au bon référencement. On peut tout à fait ajouter des liens vers du contenu externe. -<div class="warning"> -<p><strong>Attention :</strong> Conflit de spécification : La <a href="https://html.spec.whatwg.org/multipage/interaction.html#attr-inputmode">spécification WHATWG liste l'attribut <code>inputmode</code></a> et les navigateurs travaillent à son implémentation. La <a href="https://www.w3.org/TR/html52/index.html#contents">spécification W3C HTML 5.2</a> ne le mentionne plus en revanche (ce qui indique qu'il est considéré comme obsolète). Jusqu'à ce qu'un consensus soit atteint, on pourra considérer que c'est la définition du WHATWG qui est correcte.</p> -</div> +Sur le plan légal, il faut être autorisé à contribuer au contenu et il doit être sous une licence et une attribution compatible avec [celle de MDN](/fr/docs/MDN/About#copyrights_and_licenses). + +- **Si vous avez créé le contenu en question** (pour votre propre intérêt et en dehors de tout travail rémunéré) et que vous souhaitez contribuer à MDN sous la licence de MDN, c'est la situation la plus simple, n'hésitez pas à contribuer avec ce contenu. +- **Si les droits d'auteur du contenu appartiennent à quelqu'un d'autre**, il devra être sous une licence et attribué de façon compatible avec la licence de MDN. Il n'est souvent pas facile de déterminer la compatibilité entre deux licences sans bagage juridique. Pour ne pas prendre de risque inutile, vous pouvez contacter quelqu'un de l'équipe MDN sur [le canal MDN](https://chat.mozilla.org/#/room/#mdn:mozilla.org) sur [Matrix](https://wiki.mozilla.org/Matrix) ou sur le forum de discussion [Discourse](https://discourse.mozilla.org/c/mdn). + +### Comment indiquer un conflit de spécification + +Il arrive (rarement) qu'il y ait un conflit entre les différentes versions d'une spécification (généralement pour celles du W3C et du WHATWG). Par exemple, une des spécifications peut indiquer une fonctionnalité comme dépréciée tandis que l'autre n'indique pas cet état. Dans ces cas, on étudiera le comportement réel des navigateurs et on écrira une note afin d'indiquer cet état. Ainsi, en janvier 2019, l'attribut global [`inputmode`](/fr/docs/Web/HTML/Global_attributes/inputmode) était touché par un conflit de spécification qui était indiqué ainsi sur la page : + +> **Attention :** Conflit de spécification : La [spécification WHATWG liste l'attribut `inputmode`](https://html.spec.whatwg.org/multipage/interaction.html#attr-inputmode) et les navigateurs travaillent à son implémentation. La [spécification W3C HTML 5.2](https://www.w3.org/TR/html52/index.html#contents) ne le mentionne plus en revanche (ce qui indique qu'il est considéré comme obsolète). Jusqu'à ce qu'un consensus soit atteint, on pourra considérer que c'est la définition du WHATWG qui est correcte. diff --git a/files/fr/mdn/guidelines/does_this_belong_on_mdn/index.md b/files/fr/mdn/guidelines/does_this_belong_on_mdn/index.md index a2355886d6..9fcd0e0bc4 100644 --- a/files/fr/mdn/guidelines/does_this_belong_on_mdn/index.md +++ b/files/fr/mdn/guidelines/does_this_belong_on_mdn/index.md @@ -7,81 +7,65 @@ tags: - MDN Meta translation_of: MDN/Guidelines/Does_this_belong_on_MDN --- -<div>{{MDNSidebar}}</div> +{{MDNSidebar}} -<p>Dans cet article, nous verrons comment décider de si un sujet ou un type de contenu doit être documenté sur MDN. Nous verrons également les autres emplacements où ce contenu pourra résider.</p> +Dans cet article, nous verrons comment décider de si un sujet ou un type de contenu doit être documenté sur MDN. Nous verrons également les autres emplacements où ce contenu pourra résider. -<h2 id="The_question">La question</h2> +## La question -<p>Si vous préparez la documentation d'un sujet, vous vous demandez peut-être si sa place est sur MDN. Vous envisagez peut-être de maintenir la documentation dans votre code source ou de publier sur le <a href="https://wiki.mozilla.org/">wiki de Mozilla</a> ou dans les fichiers README d'un dépôt Git. Voyons quelles sont les meilleures options pour votre contenu.</p> +Si vous préparez la documentation d'un sujet, vous vous demandez peut-être si sa place est sur MDN. Vous envisagez peut-être de maintenir la documentation dans votre code source ou de publier sur le [wiki de Mozilla](https://wiki.mozilla.org/) ou dans les fichiers README d'un dépôt Git. Voyons quelles sont les meilleures options pour votre contenu. -<p>Les deux aspects principaux qui permettent de déterminer si un contenu a sa place sur MDN sont :</p> +Les deux aspects principaux qui permettent de déterminer si un contenu a sa place sur MDN sont : -<ul> - <li>Le sujet du document (de quoi il s'agit)</li> - <li>La nature du document (de quel type de document il s'agit)</li> -</ul> +- Le sujet du document (de quoi il s'agit) +- La nature du document (de quel type de document il s'agit) -<p>Attention, toute contribution à MDN s'inscrit avec des licences open source. Celles-ci sont <a href="/fr/docs/MDN/About#copyrights_and_licenses">décrites en détail</a> dans notre <a href="/fr/docs/MDN/About">page À propos de MDN</a>.</p> +Attention, toute contribution à MDN s'inscrit avec des licences open source. Celles-ci sont [décrites en détail](/fr/docs/MDN/About#copyrights_and_licenses) dans notre [page À propos de MDN](/fr/docs/MDN/About). -<div class="note"> -<p><strong>Note :</strong> Les <a href="https://www.mozilla.org/fr/about/legal/terms/mozilla/">Conditions d'utilisation des sites web et de communication</a> de Mozilla s'appliquent lorsque vous contribuez à MDN. Lisez ce document pour connaître ce qui peut et ce qui ne peut pas être publié sur les sites de Mozilla.</p> -</div> +> **Note :** Les [Conditions d'utilisation des sites web et de communication](https://www.mozilla.org/fr/about/legal/terms/mozilla/) de Mozilla s'appliquent lorsque vous contribuez à MDN. Lisez ce document pour connaître ce qui peut et ce qui ne peut pas être publié sur les sites de Mozilla. -<h2 id="What_topics_belong_on_MDN_Web_Docs">Ce qui a sa place sur MDN</h2> +## Ce qui a sa place sur MDN -<p>En général, MDN est utilisé pour documenter les technologies web open source. Cela comprend toute fonctionnalité qui peut être utilisée par les développeuses et développeurs web afin de créer des sites et des applications web. S'il s'agit d'une fonctionnalité implémentée par plusieurs navigateurs et spécifiée de façon standard ou en voie de standardisation, alors sa documentation a pleinement sa place sur MDN. S'il s'agit d'une fonctionnalité expérimentale et qui n'est pas implémentée dans plusieurs navigateurs ou qui est sujette à modification alors elle pourra être documentée mais ne sera pas forcément priorisée.</p> +En général, MDN est utilisé pour documenter les technologies web open source. Cela comprend toute fonctionnalité qui peut être utilisée par les développeuses et développeurs web afin de créer des sites et des applications web. S'il s'agit d'une fonctionnalité implémentée par plusieurs navigateurs et spécifiée de façon standard ou en voie de standardisation, alors sa documentation a pleinement sa place sur MDN. S'il s'agit d'une fonctionnalité expérimentale et qui n'est pas implémentée dans plusieurs navigateurs ou qui est sujette à modification alors elle pourra être documentée mais ne sera pas forcément priorisée. -<p>Les sujets majeurs de MDN sont les technologies web côté client :</p> +Les sujets majeurs de MDN sont les technologies web côté client : -<ul> - <li><a href="/fr/docs/Web/HTML">HTML</a></li> - <li><a href="/fr/docs/Web/CSS">CSS</a></li> - <li><a href="/fr/docs/Web/JavaScript">JavaScript</a></li> - <li><a href="/fr/docs/Web/SVG">SVG</a></li> - <li><a href="/fr/docs/Web/API">Les API Web</a></li> - <li><a href="/fr/docs/Web/API/WebGL_API">WebGL</a></li> - <li>etc.</li> -</ul> +- [HTML](/fr/docs/Web/HTML) +- [CSS](/fr/docs/Web/CSS) +- [JavaScript](/fr/docs/Web/JavaScript) +- [SVG](/fr/docs/Web/SVG) +- [Les API Web](/fr/docs/Web/API) +- [WebGL](/fr/docs/Web/API/WebGL_API) +- etc. -<div class="note"> -<p><strong>Note :</strong> Les technologies côté serveur sont généralement documentées autre part et cette documentation n'est pas remplacée par MDN, mais il existe <a href="/fr/docs/Learn/Server-side">quelques exceptions</a>.</p> -</div> +> **Note :** Les technologies côté serveur sont généralement documentées autre part et cette documentation n'est pas remplacée par MDN, mais il existe [quelques exceptions](/fr/docs/Learn/Server-side). -<p>Les sujets relatifs au développement web et qui portent sur différentes technologies sont également les bienvenus sur MDN :</p> +Les sujets relatifs au développement web et qui portent sur différentes technologies sont également les bienvenus sur MDN : -<ul> - <li><a href="/fr/docs/Web/Accessibility">Accessibilité</a></li> - <li><a href="/fr/docs/Web/Guide/AJAX">AJAX</a></li> - <li><a href="/fr/docs/Web/Guide/Graphics">Graphisme sur le Web</a></li> - <li><a href="/fr/docs/Web/Progressive_web_apps">Applications web progressives (PWA)</a></li> - <li><a href="/fr/docs/Games">Jeux sur le Web</a></li> -</ul> +- [Accessibilité](/fr/docs/Web/Accessibility) +- [AJAX](/fr/docs/Web/Guide/AJAX) +- [Graphisme sur le Web](/fr/docs/Web/Guide/Graphics) +- [Applications web progressives (PWA)](/fr/docs/Web/Progressive_web_apps) +- [Jeux sur le Web](/fr/docs/Games) -<div class="note notecard"> -<p><strong>Note :</strong> MDN documente certaines fonctionnalités non-standard lorsqu'elles sont exposées sur le Web et que leur usage est important (comme les propriétés CSS spécifiques à WebKit par exemple). MDN documente également certaines technologies standard, hors du Web, si celles-ci s'avèrent utiles aux développeuses et développeurs web : voir <a href="/fr/docs/Related">la section sur les technologies connexes au Web</a>.</p> -</div> +> **Note :** MDN documente certaines fonctionnalités non-standard lorsqu'elles sont exposées sur le Web et que leur usage est important (comme les propriétés CSS spécifiques à WebKit par exemple). MDN documente également certaines technologies standard, hors du Web, si celles-ci s'avèrent utiles aux développeuses et développeurs web : voir [la section sur les technologies connexes au Web](/fr/docs/Related). -<h2 id="What_topics_dont_belong_on_MDN_Web_Docs">Ce qui n'a pas sa place sur MDN</h2> +## Ce qui n'a pas sa place sur MDN -<p>De façon générale, tout ce qui n'est pas décrit par un standard ouvert du Web n'appartient pas à MDN. Cette section indique quelques règles complémentaires.</p> +De façon générale, tout ce qui n'est pas décrit par un standard ouvert du Web n'appartient pas à MDN. Cette section indique quelques règles complémentaires. -<h3 id="Mozilla_products">Produits Mozilla</h3> +### Produits Mozilla -<p>Le contenu de MDN portait auparavant également sur les produits de Mozilla. Cette documentation a été migrée vers d'autres projets :</p> +Le contenu de MDN portait auparavant également sur les produits de Mozilla. Cette documentation a été migrée vers d'autres projets : -<ul> - <li><a href="https://firefox-source-docs.mozilla.org/">La documentation relative au développement de Firefox</a></li> - <li><a href="https://firefox-dev.tools/">La documentation relative aux outils de développement web (devtools) dans Firefox</a></li> - <li><a href="https://extensionworkshop.com">La documentation des extensions pour tout ce qui a trait à la publication dans Firefox</a></li> -</ul> +- [La documentation relative au développement de Firefox](https://firefox-source-docs.mozilla.org/) +- [La documentation relative aux outils de développement web (devtools) dans Firefox](https://firefox-dev.tools/) +- [La documentation des extensions pour tout ce qui a trait à la publication dans Firefox](https://extensionworkshop.com) -<h3 id="What_else">Quoi d'autre ?</h3> +### Quoi d'autre ? -<p>Voici d'autres exemples de sujets inappropriés pour MDN :</p> +Voici d'autres exemples de sujets inappropriés pour MDN : -<ul> - <li>Les technologies non exposées au web et spécifique à un navigateur en particulier.</li> - <li>Les technologies qui ne sont pas relatives au Web.</li> - <li>La documentation des produits Mozilla à destination des utilisatrices et utilisateurs finaux qui ont leur place <a href="https://support.mozilla.org">sur le site de support Mozilla</a>.</li> -</ul>
\ No newline at end of file +- Les technologies non exposées au web et spécifique à un navigateur en particulier. +- Les technologies qui ne sont pas relatives au Web. +- La documentation des produits Mozilla à destination des utilisatrices et utilisateurs finaux qui ont leur place [sur le site de support Mozilla](https://support.mozilla.org). diff --git a/files/fr/mdn/guidelines/editorial/index.md b/files/fr/mdn/guidelines/editorial/index.md index ffd2cc922c..76fa9c3619 100644 --- a/files/fr/mdn/guidelines/editorial/index.md +++ b/files/fr/mdn/guidelines/editorial/index.md @@ -8,30 +8,30 @@ tags: - Writing translation_of: MDN/Guidelines/Editorial --- -<div>{{MDNSidebar}}</div> +{{MDNSidebar}} -<p>Cet article décrit les règles définies par l'équipe MDN pour le contenu de MDN. Toute personne qui contribue à MDN se doit de respecter ces règles.</p> +Cet article décrit les règles définies par l'équipe MDN pour le contenu de MDN. Toute personne qui contribue à MDN se doit de respecter ces règles. -<h2 id="Relevance">Pertinence</h2> +## Pertinence -<p>Le contenu de MDN doit être pertinent par rapport à la section dans laquelle il apparaît. Le spam et les publicités ou tout autre contenu inapproprié ne sera jamais accepté. Les personnes qui éditent afin d'ajouter ce type de contenu pourront être bannies sans avertissement.</p> +Le contenu de MDN doit être pertinent par rapport à la section dans laquelle il apparaît. Le spam et les publicités ou tout autre contenu inapproprié ne sera jamais accepté. Les personnes qui éditent afin d'ajouter ce type de contenu pourront être bannies sans avertissement. -<p>Les liens sortants vers des sites commerciaux mais qui sont pertinents pour le sujet seront examinés au cas par cas. Leur valeur ajoutée à destination des développeuses et développeurs web doit dépasser le bénéfice commercial que tirera le site cible.</p> +Les liens sortants vers des sites commerciaux mais qui sont pertinents pour le sujet seront examinés au cas par cas. Leur valeur ajoutée à destination des développeuses et développeurs web doit dépasser le bénéfice commercial que tirera le site cible. -<h2 id="Neutrality">Neutralité</h2> +## Neutralité -<p>Le contenu d'un article de MDN doit conserver <a href="https://fr.wikipedia.org/wiki/Wikip%C3%A9dia:Neutralit%C3%A9_de_point_de_vue">un point de vue neutre</a> et les différences entre les navigateurs doivent être documentées sans biais. Les commentaires subjectifs et péjoratifs à propos d'un navigateur ou d'un agent utilisateur en particulier ne sont pas acceptables.</p> +Le contenu d'un article de MDN doit conserver [un point de vue neutre](https://fr.wikipedia.org/wiki/Wikip%C3%A9dia:Neutralit%C3%A9_de_point_de_vue) et les différences entre les navigateurs doivent être documentées sans biais. Les commentaires subjectifs et péjoratifs à propos d'un navigateur ou d'un agent utilisateur en particulier ne sont pas acceptables. -<h3 id="Open_web_topics">Web ouvert</h3> +### Web ouvert -<p>MDN contient des documentations <em>agnostiques aux différents navigateurs</em> afin de permettre aux développeuses et développeurs web d'écrire du code qui fonctionne dans les différents navigateurs.</p> +MDN contient des documentations _agnostiques aux différents navigateurs_ afin de permettre aux développeuses et développeurs web d'écrire du code qui fonctionne dans les différents navigateurs. -<p>Les technologies documentées sur MDN doivent a minima être en voie de standardisation et être implémentée par au moins un navigateur. Les différences de compatibilité sont documentées dans <a href="/fr/docs/MDN/Structures/Compatibility_tables">les tableaux de compatibilité</a> des articles.</p> +Les technologies documentées sur MDN doivent a minima être en voie de standardisation et être implémentée par au moins un navigateur. Les différences de compatibilité sont documentées dans [les tableaux de compatibilité](/fr/docs/MDN/Structures/Compatibility_tables) des articles. -<h2 id="Structure">Structure</h2> +## Structure -<p>Les pages de référence doivent suivre la même structure que les autres pages du même type. Voir <a href="/fr/docs/MDN/Structures/Page_types">les types de page</a> pour une liste d'exemple des structures communément utilisées sur MDN.</p> +Les pages de référence doivent suivre la même structure que les autres pages du même type. Voir [les types de page](/fr/docs/MDN/Structures/Page_types) pour une liste d'exemple des structures communément utilisées sur MDN. -<h2 id="Other_guidelines">Règles générales</h2> +## Règles générales -<p>Les contributrices et contributeurs doivent suivre <a href="/fr/docs/MDN/Guidelines">les lignes directrices de MDN</a> quant au style d'écriture, aux exemples de code, etc.</p> +Les contributrices et contributeurs doivent suivre [les lignes directrices de MDN](/fr/docs/MDN/Guidelines) quant au style d'écriture, aux exemples de code, etc. diff --git a/files/fr/mdn/guidelines/index.md b/files/fr/mdn/guidelines/index.md index 8b9ef2e3b1..ea135d9d60 100644 --- a/files/fr/mdn/guidelines/index.md +++ b/files/fr/mdn/guidelines/index.md @@ -7,8 +7,8 @@ tags: - MDN Meta translation_of: MDN/Guidelines --- -<div>{{MDNSidebar}}</div> +{{MDNSidebar}} -<p>Ces guides fournissent des détails sur la manière de rédiger et de présenter la documentation MDN, mais également sur la façon dont les extraits de code et le contenu en général devraient être présentés. En respectant ces guides, vous vous assurez que ce que vous produisez est propre et facile à utiliser.</p> +Ces guides fournissent des détails sur la manière de rédiger et de présenter la documentation MDN, mais également sur la façon dont les extraits de code et le contenu en général devraient être présentés. En respectant ces guides, vous vous assurez que ce que vous produisez est propre et facile à utiliser. -<p>{{LandingPageListSubpages}}</p> +{{LandingPageListSubpages}} diff --git a/files/fr/mdn/guidelines/video/index.md b/files/fr/mdn/guidelines/video/index.md index 5cdc746163..1e1057e59c 100644 --- a/files/fr/mdn/guidelines/video/index.md +++ b/files/fr/mdn/guidelines/video/index.md @@ -7,224 +7,133 @@ tags: - Video translation_of: MDN/Guidelines/Video --- -<div>{{MDNSidebar}}</div> - -<p>MDN n'est pas un site contenant beaucoup de vidéos. Toutefois, certaines documentations sont propices à ce type de média. Dans cet article, nous verrons quand inclure des vidéos sur MDN et quelques conseils permettant de créer des vidéos simples et efficaces.</p> - -<h2 id="When_to_use_video_on_MDN">Quand utiliser des vidéos sur MDN</h2> - -<p>L'utilisation de vidéo pour de la documentation technique n'est pas indiquée par défaut pour plusieurs raisons :</p> - -<ul> - <li> - <p>Une vidéo est linéaire. Les personnes ne consultent pas la documentation de façon linéaire, du début à la fin : <a href="https://www.sensible.com/chapter.html">ils scannent la documentation</a>. Faire de même pour une vidéo est quasi impossible et cela force à visualiser le contenu de A à Z.</p> - </li> - <li> - <p>Une vidéo possède une densité d'information plus faible que le texte. Il faut plus de temps pour regarder une vidéo expliquant une notion que de lire un article texte équivalent.</p> - </li> - <li> - <p>Une vidéo a un poids numérique plus élevé et est donc plus coûteuse et moins performante que le texte.</p> - </li> - <li> - <p>Une vidéo peut poser des problèmes d'accessibilité : elle est plus coûteuse à réaliser, à localiser ou à rendre accessible aux personnes qui utilisent des lecteurs d'écran.</p> - </li> - <li> - <p>Enfin, une vidéo est beaucoup plus difficile à éditer/mettre à jour/maintenir que du texte.</p> - </li> -</ul> - -<div class="note"> -<p><strong>Note :</strong> Il est important de garder ces limitations en tête lorsqu'on réalise des vidéos afin de les minimiser autant que possible.</p> -</div> - -<p>Il existe de nombreux sites populaires qui fournissent de nombreux tutoriels vidéo. MDN n'est pas un site dont la majorité du contenu est de la vidéo, toutefois, il est possible d'intégrer des vidéos dans certains articles MDN selon le contexte.</p> - -<p>Sur MDN, les vidéos sont particulièrement utilisées lorsqu'on souhaite décrire une suite d'instruction ou un procédé en plusieurs étapes qu'il serait difficile d'exprimer de façon concise avec du texte. Cela s'avère notamment utile lorsqu'on tente de décrire des procédés qui utilisent plusieurs applications ou fenêtres et qui incluent des interactions avec l'interface graphique qui pourraient ne pas être simples à décrire : <em>« maintenant, cliquez sur le bouton situé en haut à gauche et qui ressemble à un canard »</em>.</p> - -<p>Dans de telles situations, il est souvent plus pratique de <strong>montrer</strong> ce qu'on indique.</p> - -<h2 id="What_should_MDN_videos_look_like">À quoi doit ressembler une vidéo sur MDN ?</h2> - -<p>Une vidéo à destination de MDN devrait être :</p> - -<ul> - <li> - <p><strong>Courte </strong>: On essaiera d'avoir des vidéos dont la durée est inférieure à 30 secondes, idéalement inférieure à 20 secondes. Elle sera ainsi suffisamment courte pour ne pas demander un temps d'attention trop long au spectateur.</p> - </li> - <li> - <p><strong>Simple </strong>: On essaiera de garder un cheminement simple avec 2 à 4 fragments distincts pour que les étapes soient faciles à suivre.</p> - </li> - <li> - <p><strong>Silencieuse </strong>: Le son permet d'avoir des vidéos plus impactantes mais demande également plus de temps pour la réalisation et l'implication d'un spectateur qui peut ne pas pouvoir écouter au moment où il/elle regarde la vidéo. Cela peut également rallonger la vidéo et rajoute des coûts de maintenance et de localisation.</p> - </li> -</ul> - -<p>Pour expliquer quelque chose de complexes, on pourra utiliser un ensemble de vidéos courtes et de captures d'écran avec du texte. Le texte permettra ainsi d'insister sur les notions vues dans les vidéos et la personne qui consulte le contenu pourra alors choisir de suivre le texte et/ou la vidéo.</p> - -<p>De plus, on fera attention aux conseils suivants :</p> - -<ul> - <li>La vidéo sera uploadée sur YouTube avant d'être intégrée à la page MDN. On recommande un format 16:9 afin que tout le cadre soit rempli et qu'il n'y ait pas de barres noires. Voici quelques résolutions qui peuvent être utilisées : 1024×576, 1152×648 ou 1280×720.</li> - <li>La vidéo devra être enregistrée en HD afin qu'elle ait le meilleur aspect possible lors de l'upload.</li> - <li>Le curseur de la souris ne doit pas couvrir les éléments qu'on souhaite indiquer.</li> - <li>Si c'est utile, on configurera l'outil d'enregistrement afin d'enregistrer les clics et/ou le pointeur de la souris.</li> -</ul> - -<h2 id="Video_tools">Outils</h2> - -<p>Il vous faudra un outil pour enregistrer la vidéo. Il en existe une variété allant d'outils gratuits à payants, de simples à complexes. Si vous avez déjà créé du contenu vidéo : parfait. Sinon, nous vous conseillons de commencer avec un outil simple puis de choisir ensuite quelque chose de plus complexe si besoin.</p> - -<p>Le tableau qui suit fournit quelques recommandations d'outils pour commencer.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Outil</th> - <th scope="col">Système d'exploitation</th> - <th scope="col">Coût</th> - <th scope="col">Fonctionnalités de post-production ?</th> - </tr> - </thead> - <tbody> - <tr> - <td>Open Broadcaster Software</td> - <td>macOS, Windows, Linux</td> - <td>Gratuit</td> - <td>Oui</td> - </tr> - <tr> - <td>CamStudio</td> - <td>Windows</td> - <td>Gratuit</td> - <td>Limitées</td> - </tr> - <tr> - <td>Camtasia</td> - <td>Windows, macOS</td> - <td>Élevé</td> - <td>Oui</td> - </tr> - <tr> - <td>QuickTime Player</td> - <td>macOS</td> - <td>Gratuit</td> - <td>Aucune</td> - </tr> - <tr> - <td>ScreenFlow</td> - <td>macOS</td> - <td>Intermédiaire</td> - <td>Oui</td> - </tr> - <tr> - <td>Kazam</td> - <td>Linux</td> - <td>Gratuit</td> - <td>Minimales</td> - </tr> - </tbody> -</table> - -<h3 id="QuickTime_tips">Conseils pour QuickTime</h3> - -<p>Si vous utilisez macOS, Quicktime Player est disponible et dispose de quelques fonctionnalités pour l'enregistrement :</p> - -<ol> - <li>Choisissez <em>Fichier</em> > <em>Nouvel enregistrement d'écran</em> à partir du menu principal.</li> - <li>Dans la boîte <em>Enregistrement d'écran</em>, utilisez le bouton d'enregistrement (le bouton rouge).</li> - <li>Dessinez un rectangle sur la zone de l'écran que vous souhaitez enregistrer.</li> - <li>Appuyez sur le bouton <em>Démarrer l'enregistrement</em>.</li> - <li>Effectuez les actions que vous souhaitez enregistrer.</li> - <li>Appuyez sur le bouton <em>Stop</em>.</li> - <li>Choisissez <em>Fichier</em> > <em>Exporter en tant que…</em> > <em>1080p</em> à partir du menu principal afin d'avoir une définition suffisamment élevée.</li> -</ol> - -<h3 id="Other_resources">Autres ressources</h3> - -<ul> - <li><a href="https://photography.tutsplus.com/tutorials/how-to-add-custom-callouts-to-screencast-videos-in-screenflow--cms-27122">How to Add Custom Callouts to Screencast Videos in Screenflow (en anglais)</a></li> -</ul> - -<h2 id="A_workflow_for_creating_videos">Étapes de création d'une vidéo</h2> - -<p>Les sections qui suivent décrivent les étapes principales à suivre pour créer une vidéo et l'intégrer à une page MDN.</p> - -<h3 id="Preparation">Préparation</h3> - -<p>Tout d'abord, planifiez la suite d'actions que vous souhaitez enregistrer et choisissez les meilleures façons de commencer et de finir.</p> - -<p>Assurez vous que votre arrière-plan de bureau et votre profil de navigateur soient vierges. Planifier les tailles et le positionnement des fenêtres, notamment si vous utilisez plusieurs fenêtres.</p> - -<p>Planifiez soigneusement les étapes que vous allez enregistrer et pratiquez cette séquence d'actions plusieurs fois avant d'enregistrer :</p> - -<ul> - <li> - <p>Ne commencez pas une vidéo au milieu d'une suite d'étape. Veillez à ce que le spectateur ait suffisamment de contexte pour que les actions illustrées aient du sens.</p> - </li> - <li> - <p>Pour chacune de vos actions, assurez vous de les réaliser suffisamment lentement et de les mettre en évidence. Par exemple, lorsqu'on doit cliquer quelque part on pourra :</p> - - <ol> - <li> - <p>Déplacer la souris sur l'icône</p> - </li> - <li> - <p>Mettre en évidence ou zoomer (selon ce qui est le plus pertinent)</p> - </li> - <li> - <p>Suspendre le mouvement pendant un instant</p> - </li> - <li> - <p>Cliquer sur l'icône</p> - </li> - </ol> - </li> - <li>Planifiez les niveaux de zoom pour les portions de l'interface utilisateur que vous afficherez. Tout le monde ne pourra pas forcément consulter la vidéo en haute définition. Vous pourrez également zoomer sur certaines parties en post-production mais ça peut être une bonne idée de zoomer dès l'enregistrement.</li> -</ul> - -<div class="note"> -<p><strong>Note :</strong> Ne zoomez pas au point que les éléments d'interfaces soient déformés ou semblent étranges.</p> -</div> - -<h3 id="Recording">Enregistrement</h3> - -<p>Lorsque vous enregistrez, avancez dans les étapes de façon calme et régulière. Effectuez des pauses d'une seconde ou deux aux moments importants (lorsqu'il faut cliquer sur un bouton par exemple) et assurez vous que le pointeur de la souris n'occulte pas d'icône ou de texte important.</p> - -<p>N'oubliez pas de faire une pause d'une ou deux secondes à la fin pour montrer le résultat final de la séquence d'actions.</p> - -<div class="note"> -<p><strong>Note :</strong> Si vous utilisez un outil simple comme QuickTime Player ou que vous ne pouvez pas effectuer de post-production, veillez à ce que la taille de la fenêtre soit de la bonne taille pour ce que vous voulez montrer.</p> -</div> - -<h3 id="Post-production">Post-production</h3> +{{MDNSidebar}} -<p>En post-production, vous pourrez mettre en avant certains éléments notamment grâce à :</p> +MDN n'est pas un site contenant beaucoup de vidéos. Toutefois, certaines documentations sont propices à ce type de média. Dans cet article, nous verrons quand inclure des vidéos sur MDN et quelques conseils permettant de créer des vidéos simples et efficaces. -<ul> - <li>Du zoom sur certaines parties de l'écran.</li> - <li>L'atténuation de l'arrière-plan.</li> -</ul> +## Quand utiliser des vidéos sur MDN -<p>Mettez en avant les moments-clés et les détails difficiles à voir comme les clics sur une icône donnée ou la saisie d'une URL particulière. La mise en avant doit durer au moins 1 à 2 secondes et il sera généralement utile d'ajouter une courte transition (200 à 300 millisecondes) au début et à la fin de la mise en évidence.</p> +L'utilisation de vidéo pour de la documentation technique n'est pas indiquée par défaut pour plusieurs raisons : -<p>Attention à ne pas abuser de ces effets, on ne veut pas que les spectateurs aient le mal de mer à force de voir des zooms/dézooms.</p> +- Une vidéo est linéaire. Les personnes ne consultent pas la documentation de façon linéaire, du début à la fin : [ils scannent la documentation](https://www.sensible.com/chapter.html). Faire de même pour une vidéo est quasi impossible et cela force à visualiser le contenu de A à Z. +- Une vidéo possède une densité d'information plus faible que le texte. Il faut plus de temps pour regarder une vidéo expliquant une notion que de lire un article texte équivalent. +- Une vidéo a un poids numérique plus élevé et est donc plus coûteuse et moins performante que le texte. +- Une vidéo peut poser des problèmes d'accessibilité : elle est plus coûteuse à réaliser, à localiser ou à rendre accessible aux personnes qui utilisent des lecteurs d'écran. +- Enfin, une vidéo est beaucoup plus difficile à éditer/mettre à jour/maintenir que du texte. -<p>Si besoin, redimensionnez la vidéo aux proportions souhaitées.</p> +> **Note :** Il est important de garder ces limitations en tête lorsqu'on réalise des vidéos afin de les minimiser autant que possible. -<h3 id="Uploading">Upload</h3> +Il existe de nombreux sites populaires qui fournissent de nombreux tutoriels vidéo. MDN n'est pas un site dont la majorité du contenu est de la vidéo, toutefois, il est possible d'intégrer des vidéos dans certains articles MDN selon le contexte. -<p>Actuellement, les vidéos doivent être uploadées sur YouTube afin d'être affichées sur MDN.</p> +Sur MDN, les vidéos sont particulièrement utilisées lorsqu'on souhaite décrire une suite d'instruction ou un procédé en plusieurs étapes qu'il serait difficile d'exprimer de façon concise avec du texte. Cela s'avère notamment utile lorsqu'on tente de décrire des procédés qui utilisent plusieurs applications ou fenêtres et qui incluent des interactions avec l'interface graphique qui pourraient ne pas être simples à décrire : _« maintenant, cliquez sur le bouton situé en haut à gauche et qui ressemble à un canard »_. -<div class="note"> -<p><strong>Note :</strong> Marquez la vidéo en « non répertoriée » si celle-ci n'a pas de sens particulier en dehors du contexte de la page MDN.</p> -</div> +Dans de telles situations, il est souvent plus pratique de **montrer** ce qu'on indique. -<h3 id="Embedding">Intégration</h3> +## À quoi doit ressembler une vidéo sur MDN ? -<p>Une fois la vidéo uploadée, vous pouvez intégrer la vidéo à la page avec la macro {{TemplateLink("EmbedYouTube")}}. Elle permet d'insérer la vidéo à l'emplacement de la macro :</p> +Une vidéo à destination de MDN devrait être : -<p>\{{EmbedYouTube("you-tube-url-slug")}}</p> +- **Courte** : On essaiera d'avoir des vidéos dont la durée est inférieure à 30 secondes, idéalement inférieure à 20 secondes. Elle sera ainsi suffisamment courte pour ne pas demander un temps d'attention trop long au spectateur. +- **Simple** : On essaiera de garder un cheminement simple avec 2 à 4 fragments distincts pour que les étapes soient faciles à suivre. +- **Silencieuse** : Le son permet d'avoir des vidéos plus impactantes mais demande également plus de temps pour la réalisation et l'implication d'un spectateur qui peut ne pas pouvoir écouter au moment où il/elle regarde la vidéo. Cela peut également rallonger la vidéo et rajoute des coûts de maintenance et de localisation. -<p>Cette macro utilise un seul argument qui correspond à la fin de l'URL de la vidéo. Ainsi, pour afficher la vidéo disponible à l'URL https://www.youtube.com/watch?v=ELS2OOUvxIw, on appellera la macro ainsi :</p> +Pour expliquer quelque chose de complexes, on pourra utiliser un ensemble de vidéos courtes et de captures d'écran avec du texte. Le texte permettra ainsi d'insister sur les notions vues dans les vidéos et la personne qui consulte le contenu pourra alors choisir de suivre le texte et/ou la vidéo. -<p>\{{EmbedYouTube("ELS2OOUvxIw")}}</p> +De plus, on fera attention aux conseils suivants : + +- La vidéo sera uploadée sur YouTube avant d'être intégrée à la page MDN. On recommande un format 16:9 afin que tout le cadre soit rempli et qu'il n'y ait pas de barres noires. Voici quelques résolutions qui peuvent être utilisées : 1024×576, 1152×648 ou 1280×720. +- La vidéo devra être enregistrée en HD afin qu'elle ait le meilleur aspect possible lors de l'upload. +- Le curseur de la souris ne doit pas couvrir les éléments qu'on souhaite indiquer. +- Si c'est utile, on configurera l'outil d'enregistrement afin d'enregistrer les clics et/ou le pointeur de la souris. + +## Outils + +Il vous faudra un outil pour enregistrer la vidéo. Il en existe une variété allant d'outils gratuits à payants, de simples à complexes. Si vous avez déjà créé du contenu vidéo : parfait. Sinon, nous vous conseillons de commencer avec un outil simple puis de choisir ensuite quelque chose de plus complexe si besoin. + +Le tableau qui suit fournit quelques recommandations d'outils pour commencer. + +| Outil | Système d'exploitation | Coût | Fonctionnalités de post-production ? | +| ------------------------- | ---------------------- | ------------- | ------------------------------------ | +| Open Broadcaster Software | macOS, Windows, Linux | Gratuit | Oui | +| CamStudio | Windows | Gratuit | Limitées | +| Camtasia | Windows, macOS | Élevé | Oui | +| QuickTime Player | macOS | Gratuit | Aucune | +| ScreenFlow | macOS | Intermédiaire | Oui | +| Kazam | Linux | Gratuit | Minimales | + +### Conseils pour QuickTime + +Si vous utilisez macOS, Quicktime Player est disponible et dispose de quelques fonctionnalités pour l'enregistrement : + +1. Choisissez _Fichier_ > _Nouvel enregistrement d'écran_ à partir du menu principal. +2. Dans la boîte _Enregistrement d'écran_, utilisez le bouton d'enregistrement (le bouton rouge). +3. Dessinez un rectangle sur la zone de l'écran que vous souhaitez enregistrer. +4. Appuyez sur le bouton _Démarrer l'enregistrement_. +5. Effectuez les actions que vous souhaitez enregistrer. +6. Appuyez sur le bouton _Stop_. +7. Choisissez _Fichier_ > _Exporter en tant que…_ > _1080p_ à partir du menu principal afin d'avoir une définition suffisamment élevée. + +### Autres ressources + +- [How to Add Custom Callouts to Screencast Videos in Screenflow (en anglais)](https://photography.tutsplus.com/tutorials/how-to-add-custom-callouts-to-screencast-videos-in-screenflow--cms-27122) + +## Étapes de création d'une vidéo + +Les sections qui suivent décrivent les étapes principales à suivre pour créer une vidéo et l'intégrer à une page MDN. + +### Préparation + +Tout d'abord, planifiez la suite d'actions que vous souhaitez enregistrer et choisissez les meilleures façons de commencer et de finir. + +Assurez vous que votre arrière-plan de bureau et votre profil de navigateur soient vierges. Planifier les tailles et le positionnement des fenêtres, notamment si vous utilisez plusieurs fenêtres. + +Planifiez soigneusement les étapes que vous allez enregistrer et pratiquez cette séquence d'actions plusieurs fois avant d'enregistrer : + +- Ne commencez pas une vidéo au milieu d'une suite d'étape. Veillez à ce que le spectateur ait suffisamment de contexte pour que les actions illustrées aient du sens. +- Pour chacune de vos actions, assurez vous de les réaliser suffisamment lentement et de les mettre en évidence. Par exemple, lorsqu'on doit cliquer quelque part on pourra : + + 1. Déplacer la souris sur l'icône + 2. Mettre en évidence ou zoomer (selon ce qui est le plus pertinent) + 3. Suspendre le mouvement pendant un instant + 4. Cliquer sur l'icône + +- Planifiez les niveaux de zoom pour les portions de l'interface utilisateur que vous afficherez. Tout le monde ne pourra pas forcément consulter la vidéo en haute définition. Vous pourrez également zoomer sur certaines parties en post-production mais ça peut être une bonne idée de zoomer dès l'enregistrement. + +> **Note :** Ne zoomez pas au point que les éléments d'interfaces soient déformés ou semblent étranges. + +### Enregistrement + +Lorsque vous enregistrez, avancez dans les étapes de façon calme et régulière. Effectuez des pauses d'une seconde ou deux aux moments importants (lorsqu'il faut cliquer sur un bouton par exemple) et assurez vous que le pointeur de la souris n'occulte pas d'icône ou de texte important. + +N'oubliez pas de faire une pause d'une ou deux secondes à la fin pour montrer le résultat final de la séquence d'actions. + +> **Note :** Si vous utilisez un outil simple comme QuickTime Player ou que vous ne pouvez pas effectuer de post-production, veillez à ce que la taille de la fenêtre soit de la bonne taille pour ce que vous voulez montrer. + +### Post-production + +En post-production, vous pourrez mettre en avant certains éléments notamment grâce à : + +- Du zoom sur certaines parties de l'écran. +- L'atténuation de l'arrière-plan. + +Mettez en avant les moments-clés et les détails difficiles à voir comme les clics sur une icône donnée ou la saisie d'une URL particulière. La mise en avant doit durer au moins 1 à 2 secondes et il sera généralement utile d'ajouter une courte transition (200 à 300 millisecondes) au début et à la fin de la mise en évidence. + +Attention à ne pas abuser de ces effets, on ne veut pas que les spectateurs aient le mal de mer à force de voir des zooms/dézooms. + +Si besoin, redimensionnez la vidéo aux proportions souhaitées. + +### Upload + +Actuellement, les vidéos doivent être uploadées sur YouTube afin d'être affichées sur MDN. + +> **Note :** Marquez la vidéo en « non répertoriée » si celle-ci n'a pas de sens particulier en dehors du contexte de la page MDN. + +### Intégration + +Une fois la vidéo uploadée, vous pouvez intégrer la vidéo à la page avec la macro {{TemplateLink("EmbedYouTube")}}. Elle permet d'insérer la vidéo à l'emplacement de la macro : + +\\{{EmbedYouTube("you-tube-url-slug")}} + +Cette macro utilise un seul argument qui correspond à la fin de l'URL de la vidéo. Ainsi, pour afficher la vidéo disponible à l'URL https\://www\.youtube.com/watch?v=ELS2OOUvxIw, on appellera la macro ainsi : + +\\{{EmbedYouTube("ELS2OOUvxIw")}} diff --git a/files/fr/mdn/guidelines/writing_style_guide/index.md b/files/fr/mdn/guidelines/writing_style_guide/index.md index 348cec2bc7..4f68f5a766 100644 --- a/files/fr/mdn/guidelines/writing_style_guide/index.md +++ b/files/fr/mdn/guidelines/writing_style_guide/index.md @@ -13,112 +13,100 @@ tags: - Writing style guide translation_of: MDN/Guidelines/Writing_style_guide --- -<div>{{MDNSidebar}}</div> +{{MDNSidebar}} -<p>Afin de présenter la documentation de façon organisée, cohérente et facile à lire, le guide stylistique de MDN décrit la façon dont le texte doit être organisé, orthographié, mis en forme, etc. Il s'agit ici de règles générales plutôt que de consignes strictes. Le contenu importe plus que la forme et il n'y a pas d'obligation à apprendre ce guide avant de contribuer. Toutefois, ne soyez pas surpris⋅e si une contributrice ou un contributeur édite une de vos éditions pour respecter ce guide.</p> +Afin de présenter la documentation de façon organisée, cohérente et facile à lire, le guide stylistique de MDN décrit la façon dont le texte doit être organisé, orthographié, mis en forme, etc. Il s'agit ici de règles générales plutôt que de consignes strictes. Le contenu importe plus que la forme et il n'y a pas d'obligation à apprendre ce guide avant de contribuer. Toutefois, ne soyez pas surpris⋅e si une contributrice ou un contributeur édite une de vos éditions pour respecter ce guide. -<p>La suite de ce guide vise avant tout la documentation francophone. Elle reprend des parties du <a href="/en-US/docs/MDN/Guidelines/Writing_style_guide">guide stylistique anglophone</a> lorsque c'est pertinent. Vous pouvez également consulter <a href="https://github.com/mozfr/besogne/wiki/Guide-stylistique-pour-la-traduction">le guide stylistique de la communauté francophone</a>. Si vous souhaitez contribuer au contenu en anglais, rapportez vous au <a href="/en-US/docs/MDN/Guidelines/Writing_style_guide">guide stylistique anglophone</a>.</p> +La suite de ce guide vise avant tout la documentation francophone. Elle reprend des parties du [guide stylistique anglophone](/en-US/docs/MDN/Guidelines/Writing_style_guide) lorsque c'est pertinent. Vous pouvez également consulter [le guide stylistique de la communauté francophone](https://github.com/mozfr/besogne/wiki/Guide-stylistique-pour-la-traduction). Si vous souhaitez contribuer au contenu en anglais, rapportez vous au [guide stylistique anglophone](/en-US/docs/MDN/Guidelines/Writing_style_guide). -<h2 id="Basics">Règles de base</h2> +## Règles de base -<p>Voici quelques règles simples qui permettent de conserver une cohérence dans la documentation.</p> +Voici quelques règles simples qui permettent de conserver une cohérence dans la documentation. -<h3 id="Page_titles">Titres des pages</h3> +### Titres des pages -<p>Les titres des pages sont utilisés dans les résultats des recherches et affichés dans les fils d'Ariane en haut de la page. Le titre de la page pourra être différent de la partie d'URL du document. En français, il devra l'être (car le fragment d'URL sera anglophone).</p> +Les titres des pages sont utilisés dans les résultats des recherches et affichés dans les fils d'Ariane en haut de la page. Le titre de la page pourra être différent de la partie d'URL du document. En français, il devra l'être (car le fragment d'URL sera anglophone). -<h4 id="Title_and_heading_capitalization">Titres et capitales</h4> +#### Titres et capitales -<p>Seul le premier terme d'un titre (de page ou de section) devra être en capitale :</p> +Seul le premier terme d'un titre (de page ou de section) devra être en capitale : -<ul> - <li><strong>Correct</strong> : « Une nouvelle méthode pour créer des objets JavaScript »</li> - <li><strong>Incorrect</strong>: « Une Nouvelle Méthode pour Créer des Objets JavaScript »</li> -</ul> +- **Correct** : « Une nouvelle méthode pour créer des objets JavaScript » +- **Incorrect**: « Une Nouvelle Méthode pour Créer des Objets JavaScript » -<p>Si vous voyez certains titres qui enfreignent cette règle, n'hésitez pas à contribuer pour les corriger.</p> +Si vous voyez certains titres qui enfreignent cette règle, n'hésitez pas à contribuer pour les corriger. -<h4 id="Choosing_titles_and_slugs">Choix des titres</h4> +#### Choix des titres -<p>Contrairement au fragment d'URL de la page (court et fixé par la version anglophone), on pourra choisir un titre descriptif suffisamment long.</p> +Contrairement au fragment d'URL de la page (court et fixé par la version anglophone), on pourra choisir un titre descriptif suffisamment long. -<h4 id="Creating_new_subtrees">Création de nouvelles pages</h4> +#### Création de nouvelles pages -<p>Le contenu francophone « suit » le contenu anglophone. Toute nouvelle page de MDN devra d'abord être créée avec sa version anglaise avant d'être traduite.</p> +Le contenu francophone « suit » le contenu anglophone. Toute nouvelle page de MDN devra d'abord être créée avec sa version anglaise avant d'être traduite. -<h3 id="Code_sample_style_and_formatting">Style et mise en forme des exemples de code</h3> +### Style et mise en forme des exemples de code -<p>On pourra traduire les noms de certaines variables pour les franciser (par exemple <code>toto</code> à la place de <code>foo</code>) et on traduira les commentaires</p> +On pourra traduire les noms de certaines variables pour les franciser (par exemple `toto` à la place de `foo`) et on traduira les commentaires -<h4 id="Tabs_and_line_breaks">Sauts de ligne</h4> +#### Sauts de ligne -<p>Pour un fragment de code, on évitera d'avoir une ligne trop longue qui nécessite de faire défiler le contenu horizontal. On privilégiera les ruptures de lignes naturelles :</p> +Pour un fragment de code, on évitera d'avoir une ligne trop longue qui nécessite de faire défiler le contenu horizontal. On privilégiera les ruptures de lignes naturelles : -<pre class="brush: js">if (class.CONDITION || class.OTHER_CONDITION || class.SOME_OTHER_CONDITION +```js +if (class.CONDITION || class.OTHER_CONDITION || class.SOME_OTHER_CONDITION || class.YET_ANOTHER_CONDITION ) { /* quelque chose */ } var toolkitProfileService = Components.classes["@mozilla.org/toolkit/profile-service;1"] .createInstance(Components.interfaces.nsIToolkitProfileService); -</pre> +``` -<h3 id="Latin_abbreviations">Abréviations</h3> +### Abréviations -<div class="note"> - <p><strong>Note :</strong> les abréviations sont à utiliser à bon escient et il faudra bien connaître leur sens (notamment pour les abrévations latines) afin de les utiliser correctement. Il faut être conscient que leur usage peut être source de confusion pour les lectrices et lecteurs qui pourraient ne pas y être habitués.</p> -</div> +> **Note :** les abréviations sont à utiliser à bon escient et il faudra bien connaître leur sens (notamment pour les abrévations latines) afin de les utiliser correctement. Il faut être conscient que leur usage peut être source de confusion pour les lectrices et lecteurs qui pourraient ne pas y être habitués. -<h4 id="In_notes_and_parentheses">Dans les notes et parenthèses</h4> +#### Dans les notes et parenthèses -<p>Les abréviations communes (etc., i.e.) pourront être utilisées dans les notes et entre parenthèses. Attention, on utilisera ex. plutôt que e.g. qui est usité en anglais (ou que p. ex. qui est moins usité).</p> +Les abréviations communes (etc., i.e.) pourront être utilisées dans les notes et entre parenthèses. Attention, on utilisera ex. plutôt que e.g. qui est usité en anglais (ou que p. ex. qui est moins usité). -<h4 id="In_running_text">Dans le texte</h4> +#### Dans le texte -<ul> - <li>Dans le texte principal (en dehors des notes ou des parenthèses), on privilégiera les formes développées plutôt que les abréviations. - <ul> - <li><strong>Correct</strong> : les navigateurs web tels que Firefox peuvent être utilisés…</li> - <li><strong>Incorrect</strong> : les navigateurs, ex. Firefox, peuvent être utilisés…</li> - </ul> - </li> -</ul> +- Dans le texte principal (en dehors des notes ou des parenthèses), on privilégiera les formes développées plutôt que les abréviations. + - **Correct** : les navigateurs web tels que Firefox peuvent être utilisés… + - **Incorrect** : les navigateurs, ex. Firefox, peuvent être utilisés… -<h3 id="Acronyms_and_abbreviations">Acronymes et abréviations</h3> +### Acronymes et abréviations -<h4 id="Capitalization_and_periods">Capitalisation et usage des points</h4> +#### Capitalisation et usage des points -<p>Les acronymes seront écrits en capitales et sans point.</p> +Les acronymes seront écrits en capitales et sans point. -<ul> - <li><strong>Correct</strong> : API</li> - <li><strong>Incorrect</strong> : A.P.I. ; Api</li> -</ul> +- **Correct** : API +- **Incorrect** : A.P.I. ; Api -<h4 id="Expansion">Explication</h4> +#### Explication -<p>Lors de la première mention d'un terme abrégé sur une page, on expliquera l'acronyme et/ou on liera vers le <a href="/fr/docs/Glossary">glossaire</a>.</p> +Lors de la première mention d'un terme abrégé sur une page, on expliquera l'acronyme et/ou on liera vers le [glossaire](/fr/docs/Glossary). -<h4 id="Plurals_of_acronyms_and_abbreviations">Pluriels des acronymes</h4> +#### Pluriels des acronymes -<p>Contrairement aux pratiques anglophones, on n'apportera pas de s pour les formes plurielles des acronymes.</p> +Contrairement aux pratiques anglophones, on n'apportera pas de s pour les formes plurielles des acronymes. -<ul> - <li><strong>Correct</strong> : les API du Web</li> - <li><strong>Incorrect</strong> : les APIs du Web</li> -</ul> +- **Correct** : les API du Web +- **Incorrect** : les APIs du Web -<h3 id="Punctuation">Ponctuation</h3> +### Ponctuation -<h4 id="Apostrophes_and_quotation_marks">Apostrophes et guillemets</h4> +#### Apostrophes et guillemets -<p><strong>On n'utilisera pas d'apostrophe courbe sur MDN.</strong> L'usage des guillemets français est autorisé (mais pas obligatoire) et ceux-ci ne doivent pas servir dans du code pour délimiter des chaînes de caractères où il faudra utiliser les doubles quotes.</p> +**On n'utilisera pas d'apostrophe courbe sur MDN.** L'usage des guillemets français est autorisé (mais pas obligatoire) et ceux-ci ne doivent pas servir dans du code pour délimiter des chaînes de caractères où il faudra utiliser les doubles quotes. -<h3 id="Spelling">Orthographe</h3> +### Orthographe -<p>On recommandera l'utilisation de <a href="https://addons.mozilla.org/fr/firefox/addon/grammalecte-fr/">Grammalecte</a> pour vérifier l'orthographe d'un document.</p> +On recommandera l'utilisation de [Grammalecte](https://addons.mozilla.org/fr/firefox/addon/grammalecte-fr/) pour vérifier l'orthographe d'un document. -<h3 id="Terminology">Terminologie</h3> +### Terminologie -<p>En cas de doute sur la formulation en français d'un terme ou d'une expression anglaise, on privilégiera l'usage, <a href="transvision.mozfr.org/">Transvision</a>, <a href="https://fr.wikipedia.org">Wikipédia</a>.</p>
\ No newline at end of file +En cas de doute sur la formulation en français d'un terme ou d'une expression anglaise, on privilégiera l'usage, [Transvision](transvision.mozfr.org/), [Wikipédia](https://fr.wikipedia.org). diff --git a/files/fr/mdn/index.md b/files/fr/mdn/index.md index 9ba60b7b63..31e876b266 100644 --- a/files/fr/mdn/index.md +++ b/files/fr/mdn/index.md @@ -7,29 +7,26 @@ tags: - MDN Meta translation_of: MDN --- -<div>{{MDNSidebar}}</div> +{{MDNSidebar}} -<p>Le <strong>Mozilla Developer Network</strong> (MDN) est un wiki sur lequel sont documentés le Web ouvert, les technologies Mozilla, Firefox OS et d'autres sujets intéressant les développeurs. Nous accueilllons tout le monde pour modifier et ajouter du contenu. Nul besoin d'être un développeur ou de connaître très bien ces technologies. De nombreuses actions sont possibles, des plus simples (comme des relectures et corrections) aux plus complexes (documentation des API).</p> +Le **Mozilla Developer Network** (MDN) est un wiki sur lequel sont documentés le Web ouvert, les technologies Mozilla, Firefox OS et d'autres sujets intéressant les développeurs. Nous accueilllons tout le monde pour modifier et ajouter du contenu. Nul besoin d'être un développeur ou de connaître très bien ces technologies. De nombreuses actions sont possibles, des plus simples (comme des relectures et corrections) aux plus complexes (documentation des API). -<p>Le but du projet MDN est de documenter le Web ouvert, les technologies Mozilla et les projets Mozilla. Nous vous invitons à nous aider !</p> +Le but du projet MDN est de documenter le Web ouvert, les technologies Mozilla et les projets Mozilla. Nous vous invitons à nous aider ! -<p>Nous avons besoin de votre aide ! C'est facile. Ne vous souciez pas de demander permission ou d'avoir peur de faire des erreurs. D'autre part, n'hésitez pas à connaître la <a href="/fr/docs/MDN/Rejoindre_la_communauté" title="/fr/docs/Project:MDN/contribuer/Rejoindre_la_communaute">communauté MDN</a>, nous sommes là pour aider ! La documentation ci-dessous vous aidera à débuter.</p> +Nous avons besoin de votre aide ! C'est facile. Ne vous souciez pas de demander permission ou d'avoir peur de faire des erreurs. D'autre part, n'hésitez pas à connaître la [communauté MDN](/fr/docs/MDN/Rejoindre_la_communauté "/fr/docs/Project:MDN/contribuer/Rejoindre_la_communaute"), nous sommes là pour aider ! La documentation ci-dessous vous aidera à débuter. -<ul> - <li><a href="/fr/docs/MDN/Débuter_sur_MDN">Pour commencer</a> +- [Pour commencer](/fr/docs/MDN/Débuter_sur_MDN) - <p>Vous êtes nouveau sur MDN et voulez apprendre comment le rendre meilleur ? Commencez par là !</p> - </li> - <li><a href="/fr/docs/MDN/Contribute">Je suis un utilisateur avancé</a> - <p>Accédez à notre guide complet pour les contributeurs de MDN afin d’en apprendre plus une fois que vous êtes à l’aise.</p> - </li> - <li><a href="/fr/docs/MDN/Promotion_de_MDN">Faites passer le mot</a> - <p>Si vous aimez MDN, faites le savoir ! Vous trouverez ici des outils et guides pour promouvoir MDN.</p> - </li> -</ul> + Vous êtes nouveau sur MDN et voulez apprendre comment le rendre meilleur ? Commencez par là ! -<h2 id="Voir_aussi">Voir aussi</h2> +- [Je suis un utilisateur avancé](/fr/docs/MDN/Contribute) -<ul> - <li><a href="/fr/docs/MDN/Rejoindre_la_communauté">Rejoindre la communauté MDN</a></li> -</ul> + Accédez à notre guide complet pour les contributeurs de MDN afin d’en apprendre plus une fois que vous êtes à l’aise. + +- [Faites passer le mot](/fr/docs/MDN/Promotion_de_MDN) + + Si vous aimez MDN, faites le savoir ! Vous trouverez ici des outils et guides pour promouvoir MDN. + +## Voir aussi + +- [Rejoindre la communauté MDN](/fr/docs/MDN/Rejoindre_la_communauté) diff --git a/files/fr/mdn/structures/index.md b/files/fr/mdn/structures/index.md index 5e605bea37..4a7a047a30 100644 --- a/files/fr/mdn/structures/index.md +++ b/files/fr/mdn/structures/index.md @@ -8,10 +8,8 @@ tags: - TopicStub translation_of: MDN/Structures --- -<div>{{MDNSidebar}}</div> +{{MDNSidebar}}{{IncludeSubnav("/en-US/docs/MDN")}} -<div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> +Tout au long de MDN, il existe diverses structures de document qui sont utilisées à plusieurs reprises, pour fournir une présentation cohérente des informations dans les articles MDN. Voici des articles décrivant ces structures, afin que, en tant qu'auteur MDN, vous puissiez les reconnaître, les appliquer et les modifier selon les besoins pour les documents que vous écrivez, modifiez ou traduisez. -<p>Tout au long de MDN, il existe diverses structures de document qui sont utilisées à plusieurs reprises, pour fournir une présentation cohérente des informations dans les articles MDN. Voici des articles décrivant ces structures, afin que, en tant qu'auteur MDN, vous puissiez les reconnaître, les appliquer et les modifier selon les besoins pour les documents que vous écrivez, modifiez ou traduisez.</p> - -<p>{{LandingPageListSubPages()}}</p> +{{LandingPageListSubPages()}} diff --git a/files/fr/mdn/structures/live_samples/index.md b/files/fr/mdn/structures/live_samples/index.md index c297eac680..8fe8e96a8b 100644 --- a/files/fr/mdn/structures/live_samples/index.md +++ b/files/fr/mdn/structures/live_samples/index.md @@ -9,124 +9,115 @@ tags: translation_of: MDN/Structures/Live_samples original_slug: MDN/Structures/Exemples_live --- -<div>{{MDNSidebar}}</div> +{{MDNSidebar}} -<p>MDN permet de transformer les exemples présentés dans les articles en exemples dit « live » qui permettent aux lecteurs de les voir en action. Les exemples live peuvent inclure du HTML, CSS et JavaScript. A noter, les exemples lives <em>ne sont pas interactifs</em> ; néanmoins, ils assurent que le code de sortie affiché pour un exemple est bien le même que défini par l'exemple, parce que la sortie est générée par le code d'exemple.</p> +MDN permet de transformer les exemples présentés dans les articles en exemples dit « live » qui permettent aux lecteurs de les voir en action. Les exemples live peuvent inclure du HTML, CSS et JavaScript. A noter, les exemples lives _ne sont pas interactifs_ ; néanmoins, ils assurent que le code de sortie affiché pour un exemple est bien le même que défini par l'exemple, parce que la sortie est générée par le code d'exemple. -<h2 id="how_does_the_live_sample_system_work">Comment le système d'exemples lives fonctionne-t-il ?</h2> +## Comment le système d'exemples lives fonctionne-t-il ? -<p>Le système d'exemple live rassemble tout le code existant et le fusionne dans un fichier HTML, puis affiche ce fichier dans une <a href="/fr/docs/Web/HTML/Element/iframe"><code><iframe></code></a>. Un exemple live est composé de deux parties :</p> +Le système d'exemple live rassemble tout le code existant et le fusionne dans un fichier HTML, puis affiche ce fichier dans une [`<iframe>`](/fr/docs/Web/HTML/Element/iframe). Un exemple live est composé de deux parties : -<ul> - <li>Un groupe qui comporte tout le code de l'exemple</li> - <li>La macro (crée l'<em>iframe</em> ou le lien qui) affiche le résultat du bloc de code</li> -</ul> +- Un groupe qui comporte tout le code de l'exemple +- La macro (crée l'_iframe_ ou le lien qui) affiche le résultat du bloc de code -<p>Dans ce contexte, un « groupe » de blocs de code est identifié par l'ID d'un titre ou d'un élément de bloc (tel qu'un <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a>).</p> +Dans ce contexte, un « groupe » de blocs de code est identifié par l'ID d'un titre ou d'un élément de bloc (tel qu'un [`<div>`](/fr/docs/Web/HTML/Element/div)). -<ul> - <li>Si l'ID appartient à un élément de bloc, le groupe comprend tous les blocs de code de l'élément de bloc englobant dont l'ID est utilisé.</li> - <li>Si l'ID appartient à une rubrique, le groupe inclut tous les blocs de code qui se trouvent après cette rubrique et avant la rubrique suivante du même niveau de rubrique. Notez que les blocs de code sous les sous-titres de la rubrique spécifiée sont tous utilisés ; si ce n'est pas l'effet que vous souhaitez, utilisez plutôt un ID sur un élément de bloc.</li> -</ul> +- Si l'ID appartient à un élément de bloc, le groupe comprend tous les blocs de code de l'élément de bloc englobant dont l'ID est utilisé. +- Si l'ID appartient à une rubrique, le groupe inclut tous les blocs de code qui se trouvent après cette rubrique et avant la rubrique suivante du même niveau de rubrique. Notez que les blocs de code sous les sous-titres de la rubrique spécifiée sont tous utilisés ; si ce n'est pas l'effet que vous souhaitez, utilisez plutôt un ID sur un élément de bloc. -<p>La macro utilise une URL spéciale pour récupérer l'échantillon de code pour un groupe donné, par exemple <code>https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/CSS/animation/_samples_/Cylon_Eye</code>. La structure générale est <code>https://<em>url-of-page</em>_samples_/<em>group-id</em></code>, où <code>group-id</code> est l'ID de la rubrique ou du bloc où se trouve le code.</p> +La macro utilise une URL spéciale pour récupérer l'échantillon de code pour un groupe donné, par exemple `https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/CSS/animation/_samples_/Cylon_Eye`. La structure générale est `https://url-of-page_samples_/group-id`, où `group-id` est l'ID de la rubrique ou du bloc où se trouve le code. -<p>Le cadre (ou la page) qui en résulte est protégé par un bac à sable, sécurisé, et peut techniquement faire tout ce qui fonctionne sur le Web. Bien sûr, d'un point de vue pratique, le code doit contribuer à l'intérêt de la page qui le contient ; les trucs aléatoires qui tournent sur MDN seront supprimés par la communauté des éditeurs.</p> +Le cadre (ou la page) qui en résulte est protégé par un bac à sable, sécurisé, et peut techniquement faire tout ce qui fonctionne sur le Web. Bien sûr, d'un point de vue pratique, le code doit contribuer à l'intérêt de la page qui le contient ; les trucs aléatoires qui tournent sur MDN seront supprimés par la communauté des éditeurs. -<div class="note"> - <p><strong>Note :</strong> Vous <strong>devez</strong> utiliser la macro pour présenter la sortie de l'échantillon en direct.</p> -</div> +> **Note :** Vous **devez** utiliser la macro pour présenter la sortie de l'échantillon en direct. -<p>Chaque bloc <a href="/fr/docs/Web/HTML/Element/pre"><code><pre></code></a> contenant du code pour l'échantillon est doté d'une classe qui indique s'il s'agit de code HTML, CSS ou JavaScript ; ces classes sont « brush : html », « brush : css » et « brush : js ». Ces classes doivent se trouver sur les blocs de code correspondants.</p> +Chaque bloc [`<pre>`](/fr/docs/Web/HTML/Element/pre) contenant du code pour l'échantillon est doté d'une classe qui indique s'il s'agit de code HTML, CSS ou JavaScript ; ces classes sont « brush : html », « brush : css » et « brush : js ». Ces classes doivent se trouver sur les blocs de code correspondants. -<p>Le système d'échantillonnage en direct offre de nombreuses options, et nous allons essayer de les décomposer pour les examiner un par un.</p> +Le système d'échantillonnage en direct offre de nombreuses options, et nous allons essayer de les décomposer pour les examiner un par un. -<h3 id="live_sample_macros">Exemples de macros en direct</h3> +### Exemples de macros en direct -<p>Il existe deux macros que vous pouvez utiliser pour afficher des échantillons en direct :</p> +Il existe deux macros que vous pouvez utiliser pour afficher des échantillons en direct : -<ul> - <li><code><a href="https://github.com/mdn/yari/blob/master/kumascript/macros/EmbedLiveSample.ejs">EmbedLiveSample</a></code> embarque un échantillon vivant dans une page</li> - <li><code><a href="https://github.com/mdn/yari/blob/master/kumascript/macros/LiveSampleLink.ejs">LiveSampleLink</a></code> crée un lien qui ouvre l'échantillon en direct dans une nouvelle page.</li> -</ul> +- [`EmbedLiveSample`](https://github.com/mdn/yari/blob/master/kumascript/macros/EmbedLiveSample.ejs) embarque un échantillon vivant dans une page +- [`LiveSampleLink`](https://github.com/mdn/yari/blob/master/kumascript/macros/LiveSampleLink.ejs) crée un lien qui ouvre l'échantillon en direct dans une nouvelle page. -<p>Dans de nombreux cas, vous pouvez être en mesure d'ajouter la macro <code>EmbedLiveSample</code> ou <code>LiveSampleLink</code> aux pages avec peu ou pas de travail supplémentaire ! Tant que l'échantillon peut être identifié par l'ID d'un titre ou se trouve dans un bloc avec un ID que vous pouvez utiliser, l'ajout de la macro devrait faire l'affaire.</p> +Dans de nombreux cas, vous pouvez être en mesure d'ajouter la macro `EmbedLiveSample` ou `LiveSampleLink` aux pages avec peu ou pas de travail supplémentaire ! Tant que l'échantillon peut être identifié par l'ID d'un titre ou se trouve dans un bloc avec un ID que vous pouvez utiliser, l'ajout de la macro devrait faire l'affaire. -<h4 id="embedlivesample_macro">La macro EmbedLiveSample</h4> +#### La macro EmbedLiveSample -<pre class="brush: js">\{{EmbedLiveSample(<em>block_ID</em>, <em>width</em>, <em>height</em>, <em>screenshot_URL</em>, <em>page_slug</em>)}}</pre> +```js +\{{EmbedLiveSample(<em>block_ID</em>, <em>width</em>, <em>height</em>, <em>screenshot_URL</em>, <em>page_slug</em>)}} +``` -<dl> - <dt>block_ID</dt> - <dd>Requis : L'ID de l'en-tête ou du bloc qui l'entoure d'où le code doit être tiré. La meilleure façon de s'assurer que l'ID est correct est de regarder l'URL de la section dans la table des matières de la page ; vous pouvez également le vérifier en consultant le source de la page.</dd> - <dt>width</dt> - <dd>La largeur de l'<a href="/fr/docs/Web/HTML/Element/iframe"><code><iframe></code></a> à créer, spécifiée en <code>px</code>. Ce paramètre est facultatif ; une largeur par défaut raisonnable sera utilisée si vous l'omettez. Notez que si vous voulez utiliser une largeur spécifique, vous <em>devez</em> également spécifier le paramètre height.</dd> - <dt>height</dt> - <dd>La hauteur de l'<a href="/fr/docs/Web/HTML/Element/iframe"><code><iframe></code></a> à créer, spécifiée en <code>px</code>. Ce paramètre est facultatif ; une hauteur par défaut raisonnable sera utilisée si vous l'omettez. Notez que si vous voulez utiliser une hauteur spécifique, vous <em>devez</em> également spécifier le paramètre width. Si vous n'utilisez qu'un seul d'entre eux, la taille de cadre par défaut est utilisée.</dd> - <dt>screenshot_URL</dt> - <dd>L'URL d'une capture d'écran qui montre à quoi devrait ressembler l'échantillon en direct. Ce paramètre est facultatif, mais il peut être utile pour les nouvelles technologies qui ne fonctionnent peut-être pas dans le navigateur de l'utilisateur, afin qu'il puisse voir à quoi ressemblerait l'échantillon s'il était pris en charge par son navigateur. Si vous incluez ce paramètre, la capture d'écran est affichée à côté de l'échantillon en direct, avec les titres appropriés.</dd> - <dt>page_slug</dt> - <dd> - <p>Le slug de la page contenant l'échantillon ; ceci est facultatif, et s'il n'est pas fourni, l'échantillon est tiré de la même page sur laquelle la macro est utilisée.</p> - <div class="warning"> - <p><strong>Attention :</strong> Pour afficher un échantillon en direct d'une page contenant du code dans une page cible différente, la page contenant du code doit elle-même utiliser la macro <code><a href="https://github.com/mdn/kumascript/blob/master/macros/EmbedLiveSample.ejs">EmbedLiveSample</a></code> pour intégrer un échantillon en direct dans sa propre page. Sinon, si la page contenant le code n'utilise pas elle-même la macro <code><a href="https://github.com/mdn/kumascript/blob/master/macros/EmbedLiveSample.ejs">EmbedLiveSample</a></code> sa propre page, l'échantillon vivant ne s'affichera pas du tout sur la page cible. (Voir <a href="https://github.com/mdn/yari/issues/2243">Le ticket Yari #2243</a>.)</p> - </div> - </dd> -</dl> +- block_ID + - : Requis : L'ID de l'en-tête ou du bloc qui l'entoure d'où le code doit être tiré. La meilleure façon de s'assurer que l'ID est correct est de regarder l'URL de la section dans la table des matières de la page ; vous pouvez également le vérifier en consultant le source de la page. +- width + - : La largeur de l'[`<iframe>`](/fr/docs/Web/HTML/Element/iframe) à créer, spécifiée en `px`. Ce paramètre est facultatif ; une largeur par défaut raisonnable sera utilisée si vous l'omettez. Notez que si vous voulez utiliser une largeur spécifique, vous _devez_ également spécifier le paramètre height. +- height + - : La hauteur de l'[`<iframe>`](/fr/docs/Web/HTML/Element/iframe) à créer, spécifiée en `px`. Ce paramètre est facultatif ; une hauteur par défaut raisonnable sera utilisée si vous l'omettez. Notez que si vous voulez utiliser une hauteur spécifique, vous _devez_ également spécifier le paramètre width. Si vous n'utilisez qu'un seul d'entre eux, la taille de cadre par défaut est utilisée. +- screenshot_URL + - : L'URL d'une capture d'écran qui montre à quoi devrait ressembler l'échantillon en direct. Ce paramètre est facultatif, mais il peut être utile pour les nouvelles technologies qui ne fonctionnent peut-être pas dans le navigateur de l'utilisateur, afin qu'il puisse voir à quoi ressemblerait l'échantillon s'il était pris en charge par son navigateur. Si vous incluez ce paramètre, la capture d'écran est affichée à côté de l'échantillon en direct, avec les titres appropriés. +- page_slug -<h4 id="livesamplelink_macro">La macro LiveSampleLink</h4> + - : Le slug de la page contenant l'échantillon ; ceci est facultatif, et s'il n'est pas fourni, l'échantillon est tiré de la même page sur laquelle la macro est utilisée. -<pre class="brush: js">\{{LiveSampleLink(<em>block_ID</em>, <em>link_text</em>)}}</pre> + > **Attention :** Pour afficher un échantillon en direct d'une page contenant du code dans une page cible différente, la page contenant du code doit elle-même utiliser la macro [`EmbedLiveSample`](https://github.com/mdn/kumascript/blob/master/macros/EmbedLiveSample.ejs) pour intégrer un échantillon en direct dans sa propre page. Sinon, si la page contenant le code n'utilise pas elle-même la macro [`EmbedLiveSample`](https://github.com/mdn/kumascript/blob/master/macros/EmbedLiveSample.ejs) sa propre page, l'échantillon vivant ne s'affichera pas du tout sur la page cible. (Voir [Le ticket Yari #2243](https://github.com/mdn/yari/issues/2243).) -<dl> - <dt>block_ID</dt> - <dd>L'ID de l'en-tête ou du bloc qui l'entoure, d'où le code doit être tiré. La meilleure façon de s'assurer que l'ID est correct est de regarder l'URL de la section dans la table des matières de la page ; vous pouvez également le vérifier en consultant le source de la page.</dd> - <dt>link_text</dt> - <dd>Une chaîne de caractères à utiliser comme texte du lien.</dd> -</dl> +#### La macro LiveSampleLink -<h2 id="using_the_live_sample_system">Utilisation du système d'échantillonnage en direct</h2> +```js +\{{LiveSampleLink(<em>block_ID</em>, <em>link_text</em>)}} +``` -<p>Les sections ci-dessous décrivent quelques cas d'utilisation courants du système d'échantillons en direct.</p> +- block_ID + - : L'ID de l'en-tête ou du bloc qui l'entoure, d'où le code doit être tiré. La meilleure façon de s'assurer que l'ID est correct est de regarder l'URL de la section dans la table des matières de la page ; vous pouvez également le vérifier en consultant le source de la page. +- link_text + - : Une chaîne de caractères à utiliser comme texte du lien. -<h3 id="turning_snippets_into_live_samples">Transformer des extraits en échantillons vivants</h3> +## Utilisation du système d'échantillonnage en direct -<p>Un cas d'utilisation courant consiste à prendre des extraits de code existants déjà présentés sur MDN et à les transformer en échantillons vivants.</p> +Les sections ci-dessous décrivent quelques cas d'utilisation courants du système d'échantillons en direct. -<h4 id="prepare_the_code_samples">Préparer les échantillons de code</h4> +### Transformer des extraits en échantillons vivants -<p>La première étape consiste à ajouter des extraits de code ou à s'assurer que les extraits existants sont prêts à être utilisés comme échantillons en direct, tant au niveau du contenu que du balisage. Les extraits de code, pris dans leur ensemble, doivent constituer un exemple complet et exécutable. Par exemple, si l'extrait existant ne présente que du CSS, vous devrez peut-être ajouter un extrait de HTML sur lequel le CSS pourra opérer.</p> +Un cas d'utilisation courant consiste à prendre des extraits de code existants déjà présentés sur MDN et à les transformer en échantillons vivants. -<p>Chaque morceau de code doit se trouver dans un bloc <a href="/fr/docs/Web/HTML/Element/pre"><code><pre></code></a>, avec un bloc distinct pour chaque langue, correctement marqué quant à sa langue. La plupart du temps, cela a déjà été fait, mais il est toujours utile de revérifier pour s'assurer que chaque morceau de code est configuré avec la bonne syntaxe. Ceci est fait avec une classe sur l'élément <code><pre></code> de <code>brush:<em>language-type</em></code>, où <em>language-type</em> est le type de langage que le bloc contient, par exemple <code>html</code>, <code>css</code>, ou <code>js</code>.</p> +#### Préparer les échantillons de code -<div class="note"> - <p><strong>Note :</strong> Vous pouvez avoir plus d'un bloc pour chaque langue ; ils sont tous concaténés ensemble. Vous pouvez ainsi avoir un morceau de code, suivi d'une explication de son fonctionnement, puis un autre morceau, et ainsi de suite. Il est ainsi encore plus facile de produire des didacticiels et autres qui utilisent des échantillons en direct entrecoupés de texte explicatif.</p> -</div> +La première étape consiste à ajouter des extraits de code ou à s'assurer que les extraits existants sont prêts à être utilisés comme échantillons en direct, tant au niveau du contenu que du balisage. Les extraits de code, pris dans leur ensemble, doivent constituer un exemple complet et exécutable. Par exemple, si l'extrait existant ne présente que du CSS, vous devrez peut-être ajouter un extrait de HTML sur lequel le CSS pourra opérer. -<p>Assurez-vous donc que les blocs <a href="/fr/docs/Web/HTML/Element/pre"><code><pre></code></a> de votre code HTML, CSS et/ou JavaScript sont chacun configurés correctement pour la coloration syntaxique de ce langage, et vous êtes prêt à partir.</p> +Chaque morceau de code doit se trouver dans un bloc [`<pre>`](/fr/docs/Web/HTML/Element/pre), avec un bloc distinct pour chaque langue, correctement marqué quant à sa langue. La plupart du temps, cela a déjà été fait, mais il est toujours utile de revérifier pour s'assurer que chaque morceau de code est configuré avec la bonne syntaxe. Ceci est fait avec une classe sur l'élément `<pre>` de `brush:language-type`, où _language-type_ est le type de langage que le bloc contient, par exemple `html`, `css`, ou `js`. -<h2 id="live_sample_demo">Démonstration en direct</h2> +> **Note :** Vous pouvez avoir plus d'un bloc pour chaque langue ; ils sont tous concaténés ensemble. Vous pouvez ainsi avoir un morceau de code, suivi d'une explication de son fonctionnement, puis un autre morceau, et ainsi de suite. Il est ainsi encore plus facile de produire des didacticiels et autres qui utilisent des échantillons en direct entrecoupés de texte explicatif. -<p>Cette section est le résultat de l'utilisation du bouton du modèle d'échantillon en direct pour créer non seulement le titre principal (« Démonstration d'échantillon en direct »), mais aussi des sous-titres pour notre contenu HTML, CSS et JavaScript. Vous n'êtes pas limité à un bloc de chacun d'entre eux ; en outre, ils ne doivent pas nécessairement être dans un ordre particulier. Mélangez et associez !</p> +Assurez-vous donc que les blocs [`<pre>`](/fr/docs/Web/HTML/Element/pre) de votre code HTML, CSS et/ou JavaScript sont chacun configurés correctement pour la coloration syntaxique de ce langage, et vous êtes prêt à partir. -<p>Vous pouvez choisir de supprimer tous ceux que vous souhaitez ; si vous n'avez pas besoin de script, supprimez simplement cette rubrique et son bloc <a href="/fr/docs/Web/HTML/Element/pre"><code><pre></code></a>. Vous pouvez également supprimer l'intitulé d'un bloc de code (« HTML », « CSS » ou « JavaScript »), puisqu'il n'est pas utilisé par la macro d'échantillonnage en direct.</p> +## Démonstration en direct -<p>Maintenant que le modèle a été inséré, nous pouvons insérer du code, voire du texte explicatif.</p> +Cette section est le résultat de l'utilisation du bouton du modèle d'échantillon en direct pour créer non seulement le titre principal (« Démonstration d'échantillon en direct »), mais aussi des sous-titres pour notre contenu HTML, CSS et JavaScript. Vous n'êtes pas limité à un bloc de chacun d'entre eux ; en outre, ils ne doivent pas nécessairement être dans un ordre particulier. Mélangez et associez ! -<h3 id="html">HTML</h3> +Vous pouvez choisir de supprimer tous ceux que vous souhaitez ; si vous n'avez pas besoin de script, supprimez simplement cette rubrique et son bloc [`<pre>`](/fr/docs/Web/HTML/Element/pre). Vous pouvez également supprimer l'intitulé d'un bloc de code (« HTML », « CSS » ou « JavaScript »), puisqu'il n'est pas utilisé par la macro d'échantillonnage en direct. -<p>Ce HTML crée un paragraphe et quelques blocs pour nous aider à positionner et à styliser un message.</p> +Maintenant que le modèle a été inséré, nous pouvons insérer du code, voire du texte explicatif. -<pre class="brush: html"><p>Un exemple simple du système d'échantillonnage en direct en action.</p> -<div class="box"> - <div id="item">Bonjour à tous ! Bienvenue sur MDN</div> -</div></pre> +### HTML -<h3 id="css">CSS</h3> +Ce HTML crée un paragraphe et quelques blocs pour nous aider à positionner et à styliser un message. + +```html +<p>Un exemple simple du système d'échantillonnage en direct en action.</p> +<div class="box"> + <div id="item">Bonjour à tous ! Bienvenue sur MDN</div> +</div> +``` -<p>Le code CSS donne un style à la boîte ainsi qu'au texte qu'elle contient.</p> +### CSS -<pre class="brush: css">.box { +Le code CSS donne un style à la boîte ainsi qu'au texte qu'elle contient. + +```css +.box { width: 200px; border-radius: 6px; padding: 20px; @@ -138,34 +129,35 @@ original_slug: MDN/Structures/Exemples_live text-align: center; font-family: sans-serif; font-size: 1.5em; -}</pre> +} +``` -<h3 id="javascript">JavaScript</h3> +### JavaScript -<p>Ce code est très simple. Tout ce qu'il fait est d'attacher un gestionnaire d'événement au texte « Bonjour à tous ! » qui fait apparaître une alerte lorsqu'il est cliqué.</p> +Ce code est très simple. Tout ce qu'il fait est d'attacher un gestionnaire d'événement au texte « Bonjour à tous ! » qui fait apparaître une alerte lorsqu'il est cliqué. -<pre class="brush: js">const el = document.getElementById('item'); +```js +const el = document.getElementById('item'); el.onclick = function() { alert('Ohhh, arrête de m\'embêter !'); -}</pre> +} +``` -<h3 id="result">Résultat</h3> +### Résultat -<p>Voici le résultat de l'exécution des blocs de code ci-dessus via <code>\{{EmbedLiveSample('live_sample_demo')}}</code> :</p> +Voici le résultat de l'exécution des blocs de code ci-dessus via `\{{EmbedLiveSample('live_sample_demo')}}` : -<p>{{EmbedLiveSample('live_sample_demo')}}</p> +{{EmbedLiveSample('live_sample_demo')}} -<p>Voici un lien qui résulte de l'appel de ces blocs de code via <code>\{{LiveSampleLink('live_sample_demo', 'Lien vers un échantillon de démonstration en direct')}}</code>:</p> +Voici un lien qui résulte de l'appel de ces blocs de code via `\{{LiveSampleLink('live_sample_demo', 'Lien vers un échantillon de démonstration en direct')}}`: -<p>{{LiveSampleLink('live_sample_demo', 'Lien vers un échantillon de démonstration en direct')}}</p> +{{LiveSampleLink('live_sample_demo', 'Lien vers un échantillon de démonstration en direct')}} -<h2 id="conventions_regarding_live_samples">Conventions relatives aux échantillons vivants</h2> +## Conventions relatives aux échantillons vivants -<dl> - <dt>Ordres des blocs de code</dt> - <dd>Lors de l'ajout d'un échantillon vivant, les blocs de code doivent être triés de manière à ce que le premier corresponde à la langue principale de cet échantillon (s'il y en a une). Par exemple, lors de l'ajout d'un échantillon réel pour la référence HTML, le premier bloc doit être HTML, lors de l'ajout d'un échantillon réel pour la référence CSS, il doit être CSS et ainsi de suite.</dd> - <dt>Nomenclature des rubriques</dt> - <dd>Lorsqu'il n'y a pas d'ambiguïté (par exemple, l'échantillon se trouve dans une section « Exemples »), les titres doivent être simples avec le seul nom du langage correspondant : HTML, CSS, JavaScript, SVG, etc. (voir ci-dessus). Les titres tels que « Contenu HTML » ou « Contenu JavaScript » ne doivent pas être utilisés. Toutefois, si un titre aussi court rend le contenu peu clair, on peut utiliser un titre plus réfléchi.</dd> - <dt>Utilisation d'un bloc « Résultat »</dt> - <dd>Après les différents blocs de code, veuillez utiliser un dernier bloc « Résultat » avant d'utiliser la macro <code>EmbedLiveSample</code> (voir ci-dessus). De cette façon, la sémantique de l'exemple est rendue plus claire à la fois pour le lecteur et pour tout outil qui analyserait la page (par exemple, un lecteur d'écran, un crawler web).</dd> -</dl> +- Ordres des blocs de code + - : Lors de l'ajout d'un échantillon vivant, les blocs de code doivent être triés de manière à ce que le premier corresponde à la langue principale de cet échantillon (s'il y en a une). Par exemple, lors de l'ajout d'un échantillon réel pour la référence HTML, le premier bloc doit être HTML, lors de l'ajout d'un échantillon réel pour la référence CSS, il doit être CSS et ainsi de suite. +- Nomenclature des rubriques + - : Lorsqu'il n'y a pas d'ambiguïté (par exemple, l'échantillon se trouve dans une section « Exemples »), les titres doivent être simples avec le seul nom du langage correspondant : HTML, CSS, JavaScript, SVG, etc. (voir ci-dessus). Les titres tels que « Contenu HTML » ou « Contenu JavaScript » ne doivent pas être utilisés. Toutefois, si un titre aussi court rend le contenu peu clair, on peut utiliser un titre plus réfléchi. +- Utilisation d'un bloc « Résultat » + - : Après les différents blocs de code, veuillez utiliser un dernier bloc « Résultat » avant d'utiliser la macro `EmbedLiveSample` (voir ci-dessus). De cette façon, la sémantique de l'exemple est rendue plus claire à la fois pour le lecteur et pour tout outil qui analyserait la page (par exemple, un lecteur d'écran, un crawler web). diff --git a/files/fr/mdn/structures/macros/commonly-used_macros/index.md b/files/fr/mdn/structures/macros/commonly-used_macros/index.md index 4aaeb81c61..bc8158e7df 100644 --- a/files/fr/mdn/structures/macros/commonly-used_macros/index.md +++ b/files/fr/mdn/structures/macros/commonly-used_macros/index.md @@ -3,206 +3,166 @@ title: Commonly-used macros slug: MDN/Structures/Macros/Commonly-used_macros translation_of: MDN/Structures/Macros/Commonly-used_macros --- -<div>{{MDNSidebar}}</div> +{{MDNSidebar}} -<p>Cette page présente un grand nombre de macros à usage général créées pour une utilisation avec MDN. Pour avoir des informations sur l'utilisation de ces macros, voir <a href="https://developer.mozilla.org/fr/docs/MDN/Contribute/Structures/Macros" title="/fr/docs/MDN/Contribute/Content/Macros"> Utilisation des macros </a> et <a href="/fr/docs/MDN/Contribute/Editor/Links#Using_link_macros" title="/fr/docs/MDN/Contribute/Editor/Links#Using_link_macros"> Utiliser les liens macros </a>. Voir <a href="/fr/docs/MDN/Contribute/Structures/Macros/Other" title="/fr/docs/MDN/Contribute/Structures/Macros/Other"> les autres macros </a> pour avoir des informations sur les macros qui sont rarement utilisées, ou utilisées dans des contextes spécifiques, ou obsolètes. Il y a aussi une liste complète de <a href="/fr/docs/templates" title="/fr/docs/templates">toutes les macros MDN</a>.</p> +Cette page présente un grand nombre de macros à usage général créées pour une utilisation avec MDN. Pour avoir des informations sur l'utilisation de ces macros, voir [Utilisation des macros ](https://developer.mozilla.org/fr/docs/MDN/Contribute/Structures/Macros "/fr/docs/MDN/Contribute/Content/Macros")et [Utiliser les liens macros ](/fr/docs/MDN/Contribute/Editor/Links#Using_link_macros "/fr/docs/MDN/Contribute/Editor/Links#Using_link_macros"). Voir [les autres macros ](/fr/docs/MDN/Contribute/Structures/Macros/Other "/fr/docs/MDN/Contribute/Structures/Macros/Other")pour avoir des informations sur les macros qui sont rarement utilisées, ou utilisées dans des contextes spécifiques, ou obsolètes. Il y a aussi une liste complète de [toutes les macros MDN](/fr/docs/templates "/fr/docs/templates"). -<p>Voir aussi le<a href="/fr/docs/MDN/Contribute/Guidelines/CSS_style_guide" title="/fr/docs/MDN/Contribute/Guidelines/CSS_style_guide"> Guide style CSS </a> pour l'utilisation des styles disponibles.</p> +Voir aussi le[ Guide style CSS ](/fr/docs/MDN/Contribute/Guidelines/CSS_style_guide "/fr/docs/MDN/Contribute/Guidelines/CSS_style_guide")pour l'utilisation des styles disponibles. -<h2 id="Linking">Linking</h2> +## Linking -<h3 id="Création_dun_lien_hypertexte_unique">Création d'un lien hypertexte unique</h3> +### Création d'un lien hypertexte unique -<p>En général, vous ne devez pas utiliser des macros pour créer des liens arbitraires. Utilisez le <strong> Lien </strong> dans l'interface de l'éditeur pour créer des liens.</p> +En général, vous ne devez pas utiliser des macros pour créer des liens arbitraires. Utilisez le **Lien** dans l'interface de l'éditeur pour créer des liens. -<ul> - <li>La macro {{TemplateLink("Glossary")}} crée un lien vers une entrée du<a href="https://developer.mozilla.org/fr/docs/Glossaire"> glossaire</a> MDN. Cette macro accepte un paramètre obligatoire et deux optionnels: +- La macro {{TemplateLink("Glossary")}} crée un lien vers une entrée du[ glossaire](https://developer.mozilla.org/fr/docs/Glossaire) MDN. Cette macro accepte un paramètre obligatoire et deux optionnels: - <ol> - <li>Le nom d'un terme (comme "HTML").</li> - <li>Le texte à afficher dans l'article au lieu du nom du terme (ce qui devrait être rarement utilisé). {{optional_inline}}</li> - <li>Si ce paramètre est spécifié et est non nul, le style personnalisé normalement appliqué aux liens glossaire n'est pas appliquée. {{optional_inline}}</li> - </ol> + 1. Le nom d'un terme (comme "HTML"). + 2. Le texte à afficher dans l'article au lieu du nom du terme (ce qui devrait être rarement utilisé). {{optional_inline}} + 3. Si ce paramètre est spécifié et est non nul, le style personnalisé normalement appliqué aux liens glossaire n'est pas appliquée. {{optional_inline}} - <p>Examples:</p> + Examples: - <ul> - <li>\{{Glossary("HTML")}} yields {{Glossary("HTML")}}</li> - <li>\{{Glossary("CSS", "Cascading Style Sheets")}} yields {{Glossary("CSS", "Cascading Style Sheets")}}</li> - <li>\{{Glossary("HTML", "", 1)}} yields {{Glossary("HTML", "", 1)}}</li> - </ul> - </li> -</ul> + - \\{{Glossary("HTML")}} yields {{Glossary("HTML")}} + - \\{{Glossary("CSS", "Cascading Style Sheets")}} yields {{Glossary("CSS", "Cascading Style Sheets")}} + - \\{{Glossary("HTML", "", 1)}} yields {{Glossary("HTML", "", 1)}} -<h3 id="Liens_vers_des_pages_avec_références">Liens vers des pages avec références</h3> +### Liens vers des pages avec références -<p>Il existe différentes macros pour des liens vers des pages dans les zones de référence spécifiques MDN.</p> +Il existe différentes macros pour des liens vers des pages dans les zones de référence spécifiques MDN. -<ul> - <li>{{TemplateLink("cssxref")}} links to a page in the <a href="/en-US/docs/CSS_Reference" title="en-US/docs/CSS_Reference">CSS Reference</a>. Example: <code>\{{cssxref("cursor")}}</code>, results in: {{ cssxref("cursor") }}.</li> - <li>{{TemplateLink("domxref")}} links to pages in the DOM reference; if you include parentheses at the end, the template knows to display the link to look like a function name. For example, \{{domxref("document.getElementsByName()")}} results in {{ domxref("document.getElementsByName()") }} while <code>\{\{domxref("Node")\}\}</code> results in {{ domxref("Node") }}.</li> - <li>{{TemplateLink("event")}} links to pages in the DOM Event reference, for example: \{{event("change")}} results in {{event("change")}}.</li> - <li>{{TemplateLink("HTMLElement")}} links to an HTML element in the HTML Reference.</li> - <li>{{TemplateLink("htmlattrxref")}} links to an HTML attribute, either a global attribute description if you only specify the attribute name or an attribute associated with a specific element if you specify an attribute name and an element name. For example, <code>\{\{htmlattrxref("lang")\}\} </code>will create this link: {{htmlattrxref("lang")}}.<code> </code> <code>\{\{htmlattrxref("type","input")\}\}</code> will create this link: {{htmlattrxref("type","input")}}.</li> - <li>{{TemplateLink("jsxref")}} links to a page in the <a href="/en-US/docs/Web/JavaScript/Reference" title="en-US/docs/Web/JavaScript/Reference">JavaScript Reference</a>.</li> - <li>{{TemplateLink("SVGAttr")}} links to a specific SVG attribute. For example, <code>\{\{SVGAttr("d")\}\}</code> creates this link: {{SVGAttr("d")}}.</li> - <li>{{TemplateLink("SVGElement")}} links to an SVG element in the SVG Reference.</li> -</ul> +- {{TemplateLink("cssxref")}} links to a page in the [CSS Reference](/en-US/docs/CSS_Reference "en-US/docs/CSS_Reference"). Example: `\{{cssxref("cursor")}}`, results in: {{ cssxref("cursor") }}. +- {{TemplateLink("domxref")}} links to pages in the DOM reference; if you include parentheses at the end, the template knows to display the link to look like a function name. For example, \\{{domxref("document.getElementsByName()")}} results in {{ domxref("document.getElementsByName()") }} while `\{\{domxref("Node")\}\}` results in {{ domxref("Node") }}. +- {{TemplateLink("event")}} links to pages in the DOM Event reference, for example: \\{{event("change")}} results in {{event("change")}}. +- {{TemplateLink("HTMLElement")}} links to an HTML element in the HTML Reference. +- {{TemplateLink("htmlattrxref")}} links to an HTML attribute, either a global attribute description if you only specify the attribute name or an attribute associated with a specific element if you specify an attribute name and an element name. For example, `\{\{htmlattrxref("lang")\}\} `will create this link: {{htmlattrxref("lang")}}.` ` `\{\{htmlattrxref("type","input")\}\}` will create this link: {{htmlattrxref("type","input")}}. +- {{TemplateLink("jsxref")}} links to a page in the [JavaScript Reference](/en-US/docs/Web/JavaScript/Reference "en-US/docs/Web/JavaScript/Reference"). +- {{TemplateLink("SVGAttr")}} links to a specific SVG attribute. For example, `\{\{SVGAttr("d")\}\}` creates this link: {{SVGAttr("d")}}. +- {{TemplateLink("SVGElement")}} links to an SVG element in the SVG Reference. -<h3 id="Liens_vers_des_bugs_et_des_IRC">Liens vers des bugs et des <a href="https://fr.wikipedia.org/wiki/Internet_Relay_Chat">IRC</a></h3> +### Liens vers des bugs et des [IRC](https://fr.wikipedia.org/wiki/Internet_Relay_Chat) -<ul> - <li>Bugs - <ul> - <li>{{TemplateLink("bug")}} allows you to link to a bug on bugzilla.mozilla.org easily using this syntax: <code>\{\{Bug(123456)\}\}</code>. This gives you: {{ Bug(123456) }}.</li> - <li>{{TemplateLink("WebkitBug")}} inserts a link to a bug in the WebKit bug database. For example, <code>\{\{WebkitBug(31277)\}\}</code> inserts {{ WebkitBug(31277) }}.</li> - </ul> - </li> - <li>{{TemplateLink("IRCLink")}} inserts a link to the specified IRC channel, complete with a tooltip that says that's what it does and that an IRC client is needed.</li> -</ul> +- Bugs -<h3 id="Aides_à_la_navigation_pour_les_guides_multi-pages">Aides à la navigation pour les guides multi-pages</h3> + - {{TemplateLink("bug")}} allows you to link to a bug on bugzilla.mozilla.org easily using this syntax: `\{\{Bug(123456)\}\}`. This gives you: {{ Bug(123456) }}. + - {{TemplateLink("WebkitBug")}} inserts a link to a bug in the WebKit bug database. For example, `\{\{WebkitBug(31277)\}\}` inserts {{ WebkitBug(31277) }}. -<p>{{TemplateLink("Previous")}}, {{TemplateLink("Next")}}, and {{TemplateLink("PreviousNext")}} provide navigation controls for articles which are part of sequences. For the single-way templates, the only parameter needed is the wiki location of the previous or next article in the sequence. For {{TemplateLink("PreviousNext")}}, the two parameters needed are the wiki locations of the appropriate articles. The first parameter is for the previous article and the second is for the next article.</p> +- {{TemplateLink("IRCLink")}} inserts a link to the specified IRC channel, complete with a tooltip that says that's what it does and that an IRC client is needed. -<h2 id="Exemples_de_code">Exemples de code</h2> +### Aides à la navigation pour les guides multi-pages -<h3 id="Live_samples">Live samples</h3> +{{TemplateLink("Previous")}}, {{TemplateLink("Next")}}, and {{TemplateLink("PreviousNext")}} provide navigation controls for articles which are part of sequences. For the single-way templates, the only parameter needed is the wiki location of the previous or next article in the sequence. For {{TemplateLink("PreviousNext")}}, the two parameters needed are the wiki locations of the appropriate articles. The first parameter is for the previous article and the second is for the next article. -<ul> - <li>{{TemplateLink("EmbedLiveSample")}} lets you embed the output of a code sample on a page, as described in <a href="/en-US/docs/MDN/Contribute/Structures/Live_samples">Live samples</a>.</li> - <li>{{TemplateLink("LiveSampleLink")}} creates a link to a page containing the output of a code sample on a page, as described in <a href="/en-US/docs/MDN/Contribute/Structures/Live_samples">Live samples</a>.</li> -</ul> +## Exemples de code -<h3 id="Fichiers_exemples_attachés">Fichiers exemples attachés</h3> +### Live samples -<ul> - <li>{{TemplateLink("Embed_text")}} template lets you embed an attached text file into the body of your article. This is helpful if you want to have code snippets that are both downloadable but also displayed within the article's content. You may optionally specify a language for syntax highlighting; if you don't specify one, the text is embedded unformatted. The first parameter is the filename of the attachment to embed; the second, if provided, is the language for the syntax highlighter to apply, such as "javascript", "svg", or "cpp".</li> - <li>{{TemplateLink("EmbedSVG")}} embeds an attached XML file as an SVG image, in place on the page. Specify the filename of the attached SVG file. You can use this in tandem with {{TemplateLink("Embed_text")}} to show the source and then the rendered output of the same file.</li> -</ul> +- {{TemplateLink("EmbedLiveSample")}} lets you embed the output of a code sample on a page, as described in [Live samples](/en-US/docs/MDN/Contribute/Structures/Live_samples). +- {{TemplateLink("LiveSampleLink")}} creates a link to a page containing the output of a code sample on a page, as described in [Live samples](/en-US/docs/MDN/Contribute/Structures/Live_samples). -<h2 id="Génération_de_sidebar_barre_latérale">Génération de sidebar (barre latérale)</h2> +### Fichiers exemples attachés -<p>Modèles pour presque toutes les grandes collection de pages. Ils permettent généralement de revenir à la page principale de référence/Guide/tutoriel et de mettre l'article dans la catégorie appropriée.</p> +- {{TemplateLink("Embed_text")}} template lets you embed an attached text file into the body of your article. This is helpful if you want to have code snippets that are both downloadable but also displayed within the article's content. You may optionally specify a language for syntax highlighting; if you don't specify one, the text is embedded unformatted. The first parameter is the filename of the attachment to embed; the second, if provided, is the language for the syntax highlighter to apply, such as "javascript", "svg", or "cpp". +- {{TemplateLink("EmbedSVG")}} embeds an attached XML file as an SVG image, in place on the page. Specify the filename of the attached SVG file. You can use this in tandem with {{TemplateLink("Embed_text")}} to show the source and then the rendered output of the same file. -<ul> - <li>{{TemplateLink("CSSRef")}} generates the sidebar for CSS reference pages.</li> - <li>{{TemplateLink("HTMLRef")}} generates the sidebar for HTML reference pages.</li> - <li>{{TemplateLink("APIRef")}} generates the sidebar for Web API reference pages.</li> -</ul> +## Génération de sidebar (barre latérale) -<h2 id="La_mise_en_forme_à_usage_général">La mise en forme à usage général</h2> +Modèles pour presque toutes les grandes collection de pages. Ils permettent généralement de revenir à la page principale de référence/Guide/tutoriel et de mettre l'article dans la catégorie appropriée. -<h3 id="Inline_indicators_for_API_documentation">Inline indicators for API documentation</h3> +- {{TemplateLink("CSSRef")}} generates the sidebar for CSS reference pages. +- {{TemplateLink("HTMLRef")}} generates the sidebar for HTML reference pages. +- {{TemplateLink("APIRef")}} generates the sidebar for Web API reference pages. -<p>{{TemplateLink("optional_inline")}} and {{TemplateLink("ReadOnlyInline")}} are used in API documentation, usually when describing the list of properties of an object or parameters of a function.</p> +## La mise en forme à usage général -<p>Usage: <code>\{{optional_inline()}}</code> or <code>\{{ReadOnlyInline()}}</code>. Example:</p> +### Inline indicators for API documentation -<dl> - <dt><code>isCustomObject</code> {{ReadOnlyInline()}}</dt> - <dd>Indicates, if <code>true</code>, that the object is a custom one.</dd> - <dt>parameterX {{ optional_inline() }}</dt> - <dd>Blah blah blah...</dd> -</dl> +{{TemplateLink("optional_inline")}} and {{TemplateLink("ReadOnlyInline")}} are used in API documentation, usually when describing the list of properties of an object or parameters of a function. -<h2 id="Status_and_compatibility_indicators">Status and compatibility indicators</h2> +Usage: `\{{optional_inline()}}` or `\{{ReadOnlyInline()}}`. Example: -<h3 id="Inline_indicators_with_no_additional_parameters">Inline indicators with no additional parameters</h3> +- `isCustomObject` {{ReadOnlyInline()}} + - : Indicates, if `true`, that the object is a custom one. +- parameterX {{ optional_inline() }} + - : Blah blah blah... -<h4 id="Non-standard">Non-standard</h4> +## Status and compatibility indicators -<p>{{TemplateLink("non-standard_inline")}} inserts an in-line mark indicating the API has not been standardized and is not on a standards track.</p> +### Inline indicators with no additional parameters -<h5 id="Syntax"><strong>Syntax</strong></h5> +#### Non-standard -<p><code>\{{non-standard_inline}}</code></p> +{{TemplateLink("non-standard_inline")}} inserts an in-line mark indicating the API has not been standardized and is not on a standards track. -<h5 id="Examples">Examples</h5> +##### **Syntax** -<ul> - <li>Icon: {{non-standard_inline}}</li> -</ul> +`\{{non-standard_inline}}` -<h4 id="Experimental">Experimental</h4> +##### Examples -<p>{{TemplateLink("experimental_inline")}} inserts an in-line mark indicating the API is not widely implemented and may change in the future.</p> +- Icon: {{non-standard_inline}} -<h5 id="Syntax_2">Syntax</h5> +#### Experimental -<p><code>\{{experimental_inline}}</code></p> +{{TemplateLink("experimental_inline")}} inserts an in-line mark indicating the API is not widely implemented and may change in the future. -<h5 id="Examples_2"><code>Examples</code></h5> +##### Syntax -<ul> - <li>Icon: {{experimental_inline}}</li> -</ul> +`\{{experimental_inline}}` -<h3 id="Inline_indicators_that_support_specifying_the_technology">Inline indicators that support specifying the technology</h3> +##### `Examples` -<p>In these macros the parameter (when specified) should be one of the strings "html", "js", "css", or "gecko", followed by the version number.</p> +- Icon: {{experimental_inline}} -<h4 id="Deprecated">Deprecated</h4> +### Inline indicators that support specifying the technology -<p>{{TemplateLink("deprecated_inline")}} inserts an in-line deprecated mark to discourage the use of an API that is officially deprecated. <strong>Note:</strong> "Deprecated" means that the item should no longer be used, but still functions. If you mean that it no longer works at all, use the term "obsolete."</p> +In these macros the parameter (when specified) should be one of the strings "html", "js", "css", or "gecko", followed by the version number. -<p>Don't use the parameter in any browser-agnostic area (HTML, APIs, JS, CSS, …).</p> +#### Deprecated -<h5 id="Syntax_3">Syntax</h5> +{{TemplateLink("deprecated_inline")}} inserts an in-line deprecated mark to discourage the use of an API that is officially deprecated. **Note:** "Deprecated" means that the item should no longer be used, but still functions. If you mean that it no longer works at all, use the term "obsolete." -<p><code>\{{deprecated_inline}}</code> or<code> \{{deprecated_inline("gecko5")}}</code></p> +Don't use the parameter in any browser-agnostic area (HTML, APIs, JS, CSS, …). -<h5 id="Examples_3">Examples</h5> +##### Syntax -<ul> - <li>Icon: {{deprecated_inline}}</li> - <li>Badge: {{deprecated_inline("gecko5")}}</li> -</ul> +`\{{deprecated_inline}}` or` \{{deprecated_inline("gecko5")}}` -<h4 id="Obsolete">Obsolete</h4> +##### Examples -<p>{{TemplateLink("obsolete_inline")}} inserts an in-line obsolete mark to prevent the use of, for example, a function, method or property which is officially obsolete.</p> +- Icon: {{deprecated_inline}} +- Badge: {{deprecated_inline("gecko5")}} -<p>Don't use the parameter in any browser-agnostic area (HTML, APIs, JS, CSS, …).</p> +#### Obsolete -<h5 id="Syntax_4">Syntax</h5> +{{TemplateLink("obsolete_inline")}} inserts an in-line obsolete mark to prevent the use of, for example, a function, method or property which is officially obsolete. -<p><code>\{{obsolete_inline}}</code> or<code> \{{obsolete_inline("js1.8.5")}}</code></p> +Don't use the parameter in any browser-agnostic area (HTML, APIs, JS, CSS, …). -<h5 id="Examples_4">Examples</h5> +##### Syntax -<ul> - <li>Icon: {{obsolete_inline}}</li> - <li>Badge: {{obsolete_inline("js1.8.5")}}</li> -</ul> +`\{{obsolete_inline}}` or` \{{obsolete_inline("js1.8.5")}}` -<h3 id="Template_badges">Template badges</h3> +##### Examples -<p>These macros are mostly used on the <a href="/en-US/docs/WebAPI">WebAPI</a> page. See {{anch("Creating new badges")}} for information on creating a new badge.</p> +- Icon: {{obsolete_inline}} +- Badge: {{obsolete_inline("js1.8.5")}} -<h3 id="Page_or_section_header_indicators">Page or section header indicators</h3> +### Template badges -<p>These templates have the same semantics as their inline counterparts described above. The templates should be placed directly underneath the main page title (or breadcrumb navigation if available) in the reference page. They can also be used to mark up a section on a page.</p> +These macros are mostly used on the [WebAPI](/en-US/docs/WebAPI) page. See {{anch("Creating new badges")}} for information on creating a new badge. -<ul> - <li>{{TemplateLink("non-standard_header")}}: <code>\{{Non-standard_header()}}</code> {{ Non-standard_header() }}</li> - <li>{{TemplateLink("SeeCompatTable")}} should be used on pages that provide a "Browser compatibility" section. Example: <code>\{{SeeCompatTable()}}</code> {{ SeeCompatTable() }}</li> - <li>{{TemplateLink("deprecated_header")}}: <code>\{{deprecated_header()}}</code> {{ Deprecated_header() }}</li> - <li>{{TemplateLink("deprecated_header")}} with parameter: <code>\{{deprecated_header("gecko5")}}</code> {{ Deprecated_header("gecko5") }} Don't use the parameter in any browser-agnostic area (HTML, APIs, JS, CSS, …).</li> - <li>{{TemplateLink("obsolete_header")}}: <code>\{{obsolete_header()}}</code> {{ Obsolete_header() }}</li> - <li>{{TemplateLink("obsolete_header")}} with parameter: <code>\{{obsolete_header("gecko30")}}</code> {{ Obsolete_header("gecko30") }} Don't use the parameter in any browser-agnostic area (HTML, APIs, JS, CSS, …).</li> -</ul> +### Page or section header indicators -<h3 id="Indicating_that_a_feature_is_available_in_web_workers">Indicating that a feature is available in web workers</h3> +These templates have the same semantics as their inline counterparts described above. The templates should be placed directly underneath the main page title (or breadcrumb navigation if available) in the reference page. They can also be used to mark up a section on a page. -<p>The {{TemplateLink("AvailableInWorkers")}} macro inserts a localised note box indicating that a feature is available in a <a href="/en-US/docs/Web/API/Web_Workers_API">Web worker</a> context.</p> +- {{TemplateLink("non-standard_header")}}: `\{{Non-standard_header()}}` {{ Non-standard_header() }} +- {{TemplateLink("SeeCompatTable")}} should be used on pages that provide a "Browser compatibility" section. Example: `\{{SeeCompatTable()}}` {{ SeeCompatTable() }} +- {{TemplateLink("deprecated_header")}}: `\{{deprecated_header()}}` {{ Deprecated_header() }} +- {{TemplateLink("deprecated_header")}} with parameter: `\{{deprecated_header("gecko5")}}` {{ Deprecated_header("gecko5") }} Don't use the parameter in any browser-agnostic area (HTML, APIs, JS, CSS, …). +- {{TemplateLink("obsolete_header")}}: `\{{obsolete_header()}}` {{ Obsolete_header() }} +- {{TemplateLink("obsolete_header")}} with parameter: `\{{obsolete_header("gecko30")}}` {{ Obsolete_header("gecko30") }} Don't use the parameter in any browser-agnostic area (HTML, APIs, JS, CSS, …). -<ol> -</ol> +### Indicating that a feature is available in web workers -<p> </p> - -<ol> -</ol> - -<p> </p> +The {{TemplateLink("AvailableInWorkers")}} macro inserts a localised note box indicating that a feature is available in a [Web worker](/en-US/docs/Web/API/Web_Workers_API) context. diff --git a/files/fr/mdn/structures/macros/index.md b/files/fr/mdn/structures/macros/index.md index 448d6a4649..2b2710c8a5 100644 --- a/files/fr/mdn/structures/macros/index.md +++ b/files/fr/mdn/structures/macros/index.md @@ -3,39 +3,36 @@ title: Macros slug: MDN/Structures/Macros translation_of: MDN/Structures/Macros --- -<div>{{MDNSidebar}}</div> -<p>La plate-forme <a href="/fr/docs/projet:MDN/Kuma" title="/fr/docs/projet:MDN/Kuma">Kuma</a> sur laquelle MDN travail, fournit un système de macro, <a href="/docs/fr/projet:MDN/Kuma/KumaScript_guide" title="/docs/fr/projet: MDN/Kuma/KumaScript_guide">KumaScript</a>, ce qui permet de faire une grande variété de choses automatiquement. Cet article fournit des informations sur la façon d'invoquer les macros MDN dans les articles.</p> +{{MDNSidebar}} -<p>Le <a href="/docs/fr/projet:MDN/Kuma/KumaScript_guide" title="/fr/docs/projet:MDN/Kuma/KumaScript_guide ">Guide KumaScript</a> offre un regard en profondeur sur la façon d'utiliser des macros MDN, cette section est plus qu'un bref aperçu. Si vous avez déjà lu la section ci-dessus sur {{SectionOnPage ("/docs/fr/projet:MDN/Contribuer/Editor_guide/Links", "Utiliser les liens macros")}}, vous êtes un peu familiers avec le concept.</p> +La plate-forme [Kuma](/fr/docs/projet:MDN/Kuma "/fr/docs/projet:MDN/Kuma") sur laquelle MDN travail, fournit un système de macro, [KumaScript](/docs/fr/projet:MDN/Kuma/KumaScript_guide "/docs/fr/projet: MDN/Kuma/KumaScript_guide"), ce qui permet de faire une grande variété de choses automatiquement. Cet article fournit des informations sur la façon d'invoquer les macros MDN dans les articles. -<h2 id="Comment_les_macros_sont-elle_mises_en_œuvre">Comment les macros sont-elle mises en œuvre</h2> +Le [Guide KumaScript](/docs/fr/projet:MDN/Kuma/KumaScript_guide "/fr/docs/projet:MDN/Kuma/KumaScript_guide ") offre un regard en profondeur sur la façon d'utiliser des macros MDN, cette section est plus qu'un bref aperçu. Si vous avez déjà lu la section ci-dessus sur {{SectionOnPage ("/docs/fr/projet:MDN/Contribuer/Editor_guide/Links", "Utiliser les liens macros")}}, vous êtes un peu familiers avec le concept. -<p>Macros sur MDN sont mis en œuvre en utilisant le serveur exécuté <a href="/fr/docs/Web/JavaScript">JavaScript</a> code, interprété à l'aide de Node.js. En plus de cela, nous avons un certain nombre de bibliothèques, que nous avons mis en place pour fournir des services et des fonctionnalités orientées wiki, les macros interagissent avec la plate-forme wiki et avec son contenu. Si vous voulez en apprendre davantage, consultez le <a href="/docs/fr/projet:MDN/Kuma/KumaScript_guide">guide KumaScript</a>; le <a href="/docs/fr/projet:MDN/Kuma/KumaScript_reference">KumaScript reference</a> fournit des détails sur les bibliothèques et autres API KumaScript que nous avons mis en œuvre.</p> +## Comment les macros sont-elle mises en œuvre -<h2 id="Utiliser_une_macro_dans_le_contenu">Utiliser une macro dans le contenu</h2> +Macros sur MDN sont mis en œuvre en utilisant le serveur exécuté [JavaScript](/fr/docs/Web/JavaScript) code, interprété à l'aide de Node.js. En plus de cela, nous avons un certain nombre de bibliothèques, que nous avons mis en place pour fournir des services et des fonctionnalités orientées wiki, les macros interagissent avec la plate-forme wiki et avec son contenu. Si vous voulez en apprendre davantage, consultez le [guide KumaScript](/docs/fr/projet:MDN/Kuma/KumaScript_guide); le [KumaScript reference](/docs/fr/projet:MDN/Kuma/KumaScript_reference) fournit des détails sur les bibliothèques et autres API KumaScript que nous avons mis en œuvre. -<p>Pour réellement utiliser une macro, vous placez simplement l'appel à la macro dans une paire de doubles acolades, avec ses paramètres, le cas échéant, entre parenthèses:</p> +## Utiliser une macro dans le contenu -<pre>\{{macroname(parameter-list)}}</pre> +Pour réellement utiliser une macro, vous placez simplement l'appel à la macro dans une paire de doubles acolades, avec ses paramètres, le cas échéant, entre parenthèses: -<p>Quelques notes sur les appels de macro:</p> + \{{macroname(parameter-list)}} -<ul> - <li>Les noms de macros sont sensibles à la casse, mais une tentative est faite pour corriger ces erreurs communes; vous pouvez utiliser tout en minuscules, même si le nom de la macro utilise des majuscules en son sein, et vous pouvez débuter par une majuscule une macro dont le nom commence normalement par une lettre minuscule.</li> - <li>Les paramètres sont séparés par des virgules.</li> - <li>Si il n'y a pas de paramètres, vous pouvez laisser les parenthèses ou les enlever; <code>\{{macroname()}} </code> et <code>\{{macroname}}</code> sont identiques.</li> - <li>Les paramètres numériques peuvent être entre guillemets, ou non (cependant, si vous avez un numéro de version avec plusieurs décimales, il doit être entre guillemets).</li> - <li>Si vous obtenez des erreurs, consultez votre code attentivement. Si vous ne pouvez toujours pas à comprendre ce qui se passe, voir <a href="/fr/docs/MDN/Kuma/Troubleshooting_KumaScript_errors">Dépannage des erreurs KumaScript</a>.</li> -</ul> +Quelques notes sur les appels de macro: -<p>Les macros sont mis en cache; pour tout ensemble de valeurs d'entrée (les paramètres et les valeurs environnementales telles que l'URL pour laquelle la macro a été exécutée), les résultats sont stockés et réutilisés. Cela signifie que la macro est que effectivement parcourue que lorsque les entrées changent.</p> +- Les noms de macros sont sensibles à la casse, mais une tentative est faite pour corriger ces erreurs communes; vous pouvez utiliser tout en minuscules, même si le nom de la macro utilise des majuscules en son sein, et vous pouvez débuter par une majuscule une macro dont le nom commence normalement par une lettre minuscule. +- Les paramètres sont séparés par des virgules. +- Si il n'y a pas de paramètres, vous pouvez laisser les parenthèses ou les enlever; `\{{macroname()}} `et `\{{macroname}}` sont identiques. +- Les paramètres numériques peuvent être entre guillemets, ou non (cependant, si vous avez un numéro de version avec plusieurs décimales, il doit être entre guillemets). +- Si vous obtenez des erreurs, consultez votre code attentivement. Si vous ne pouvez toujours pas à comprendre ce qui se passe, voir [Dépannage des erreurs KumaScript](/fr/docs/MDN/Kuma/Troubleshooting_KumaScript_errors). -<div class="note"> -<p><strong>Note :</strong> Vous pouvez forcer toutes les macros d'une page à être réévalué avec un shift-reload.</p> -</div> +Les macros sont mis en cache; pour tout ensemble de valeurs d'entrée (les paramètres et les valeurs environnementales telles que l'URL pour laquelle la macro a été exécutée), les résultats sont stockés et réutilisés. Cela signifie que la macro est que effectivement parcourue que lorsque les entrées changent. -<p>Les macros peuvent être aussi simple que d'insérer un plus grand bloc de texte ou d'échange dans le contenu d'une autre partie du MDN, ou aussi complexe que la construction de tout un index du contenu en cherchant dans des parties du site, coiffer la sortie, et en ajoutant des liens.</p> +> **Note :** Vous pouvez forcer toutes les macros d'une page à être réévalué avec un shift-reload. -<p>Vous pouvez lire sur nos macros les plus couramment utilisés sur le <a href="/fr/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros">couramment utilisés</a>; aussi, il y a un <a href="https://developer.mozilla.org/fr/docs/templates">la liste complète de toutes les macros</a> ici. La plupart des macros ont intégré dans la documentation eux, comme des commentaires en haut.</p> +Les macros peuvent être aussi simple que d'insérer un plus grand bloc de texte ou d'échange dans le contenu d'une autre partie du MDN, ou aussi complexe que la construction de tout un index du contenu en cherchant dans des parties du site, coiffer la sortie, et en ajoutant des liens. -<p>{{EditorGuideQuicklinks}}</p> +Vous pouvez lire sur nos macros les plus couramment utilisés sur le [couramment utilisés](/fr/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros); aussi, il y a un [la liste complète de toutes les macros](https://developer.mozilla.org/fr/docs/templates) ici. La plupart des macros ont intégré dans la documentation eux, comme des commentaires en haut. + +{{EditorGuideQuicklinks}} diff --git a/files/fr/mdn/tools/index.md b/files/fr/mdn/tools/index.md index 340603eece..a60d48807f 100644 --- a/files/fr/mdn/tools/index.md +++ b/files/fr/mdn/tools/index.md @@ -7,10 +7,8 @@ tags: - TopicStub translation_of: MDN/Tools --- -<div>{{MDNSidebar}}</div> +{{MDNSidebar}}{{IncludeSubnav("/en-US/docs/MDN")}} -<div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> +MDN offre un certain nombre de fonctionnalités qui facilitent le suivi des progrès, la gestion du contenu et le suivi des dernières modifications apportées au site. -<p>MDN offre un certain nombre de fonctionnalités qui facilitent le suivi des progrès, la gestion du contenu et le suivi des dernières modifications apportées au site.</p> - -<p>{{LandingPageListSubpages}}</p> +{{LandingPageListSubpages}} diff --git a/files/fr/mdn/yari/index.md b/files/fr/mdn/yari/index.md index b75fe1b8ef..89f01fecce 100644 --- a/files/fr/mdn/yari/index.md +++ b/files/fr/mdn/yari/index.md @@ -8,18 +8,16 @@ tags: translation_of: MDN/Kuma original_slug: MDN/Kuma --- -<div>{{MDNSidebar}}{{IncludeSubnav("/fr/docs/MDN")}}</div> +{{MDNSidebar}}{{IncludeSubnav("/fr/docs/MDN")}} -<p>Kuma est le code Django qui alimente le MDN Web Docs.</p> +Kuma est le code Django qui alimente le MDN Web Docs. -<p>{{SubpagesWithSummaries}}</p> +{{SubpagesWithSummaries}} -<h2 id="Simpliquer_avec_Kuma">S'impliquer avec Kuma</h2> +## S'impliquer avec Kuma -<p>Pour s'engager avec Kuma :</p> +Pour s'engager avec Kuma : -<ul> - <li>Visitez le <a href="https://github.com/mdn/kuma">projet Kuma sur GitHub</a> (en).</li> - <li>Consultez le <a href="https://github.com/mdn/kuma/blob/master/CONTRIBUTING.md">Guide de contribution</a> (en).</li> - <li>Au besoin, plongez dans la <a href="http://kuma.readthedocs.org/en/latest/">documentation complète de Kuma</a> (en).</li> -</ul> +- Visitez le [projet Kuma sur GitHub](https://github.com/mdn/kuma) (en). +- Consultez le [Guide de contribution](https://github.com/mdn/kuma/blob/master/CONTRIBUTING.md) (en). +- Au besoin, plongez dans la [documentation complète de Kuma](http://kuma.readthedocs.org/en/latest/) (en). |