diff options
| author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-11-11 06:41:24 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-11-11 06:41:24 +0100 |
| commit | 9cebbc49c1c7b098636f4914914e7d5c3fad775c (patch) | |
| tree | 7fbaf19ab417e5b4b757fb130584c3e4024ce1b2 /files/fr/mdn | |
| parent | 6f332986569189f918a9de012e2bc031663a1a87 (diff) | |
| download | translated-content-9cebbc49c1c7b098636f4914914e7d5c3fad775c.tar.gz translated-content-9cebbc49c1c7b098636f4914914e7d5c3fad775c.tar.bz2 translated-content-9cebbc49c1c7b098636f4914914e7d5c3fad775c.zip | |
Prepare MDN section for Markdown conversion (#3008)
* Remove summary / seoSummary
* Remove hidden blocks or outdate pages in a yari world
* Remove spans
* Remove notranslate
* Remove ids
* fix notes and warnings
* fix dls
* Fix various errors
* fix images
Diffstat (limited to 'files/fr/mdn')
37 files changed, 149 insertions, 1802 deletions
diff --git a/files/fr/mdn/at_ten/history_of_mdn/index.html b/files/fr/mdn/at_ten/history_of_mdn/index.html index 543d9c45d8..b127966556 100644 --- a/files/fr/mdn/at_ten/history_of_mdn/index.html +++ b/files/fr/mdn/at_ten/history_of_mdn/index.html @@ -6,179 +6,141 @@ tags: translation_of: MDN_at_ten/History_of_MDN original_slug: MDN_a_dix_ans/Histoire_MDN --- -<div class="summary"> <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> -<div class="chapter-audio"> -<div class="hidden" id="audio"> -<h3 id="HTML_Content">HTML Content</h3> +<h3 id="Audio">Audio</h3> -<pre class="brush: html"><audio controls="controls"> +<pre class="brush: 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> -<h3 id="CSS_Content">CSS Content</h3> +<pre class="brush: css hidden"> body{margin-top:8px;}</pre> -<pre class="brush: css"> body{margin-top:8px;}</pre> -<h3 id="JavaScript_Content">JavaScript Content</h3> - -<pre class="brush: js"> </pre> -</div> - -<p>{{ EmbedLiveSample('audio', 'auto', '50px') }}</p> +<p>{{ EmbedLiveSample('Audio', 'auto', '50px') }}</p> <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> -</div> -</div> -<div class="chapters" id="chapters"> -<article class="chapter chapter-portrait" id="hoosteeno"><a class="chapter-portrait-img" href="https://twitter.com/hoosteeno"><img alt="Justin Crawford" src="https://avatars0.githubusercontent.com/u/94519" style="height: 128px; width: 128px;"> </a> <h2 id="Justin_Crawford_Product_Manager_MDN">Justin Crawford <small> Product Manager, MDN</small></h2> +<p><img alt="Justin Crawford" src="hoosteeno.jpg"></p> + <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> -</article> -<article class="chapter chapter-justtext" id="mdn-intro"> + <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> -</article> - -<article class="chapter chapter-portrait" id="sheppy"><a class="chapter-portrait-img" href="https://twitter.com/sheppy"><img alt="Eric Shepherd" src="https://pbs.twimg.com/profile_images/454358640518914048/WX1xBTs9.jpeg" style="height: 128px; width: 128px;"> </a> <h2 id="Eric_Sheppy_Shepherd_Écrivain_technique_MDN">Eric "Sheppy" Shepherd <small>Écrivain technique, MDN</small></h2> +<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> -</article> -<article class="chapter chapter-justtext" id="mdn-history"> <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> <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> -<p><a href="https://web.archive.org/web/20020819120942/http://devedge.netscape.com/"><img alt="Netscape DevEdge" src="https://mdn.mozillademos.org/files/11609/devedge.png" style="height: 300px; width: 600px;"> </a></p> +<p><a href="https://web.archive.org/web/20020819120942/http://devedge.netscape.com/"><img alt="Netscape DevEdge" src="devedge.png"> </a></p> <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> <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> -</article> -<article class="chapter chapter-justtext" id="mediawiki"> <h2 id="MediaWiki_Le_premier_moteur_wiki">MediaWiki <small>Le premier moteur wiki</small></h2> <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> -<p><a href="https://web.archive.org/web/20051226031957/http://developer.mozilla.org/en/docs/Main_Page"><img alt="MDC MediaWiki" src="https://mdn.mozillademos.org/files/11613/mediawiki.png" style="height: 390px; width: 600px;"> </a></p> -</article> - -<article class="chapter chapter-portrait" id="fscholz"><a class="chapter-portrait-img" href="https://twitter.com/floscholz"><img alt="Florian Scholz" src="https://avatars1.githubusercontent.com/u/349114" style="height: 128px; width: 128px;"> </a> +<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> <h2 id="Florian_Scholz_Écrivain_technique_MDN">Florian Scholz <small>Écrivain technique, MDN</small></h2> +<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> -</article> -<article class="chapter chapter-justtext" id="dekiwiki"> <h2 id="DekiWiki_Le_deuxième_moteur_wiki">DekiWiki <small>Le deuxième moteur wiki</small></h2> <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> -<p><a href="https://web.archive.org/web/20080907231611/http://developer.mozilla.org/en"><img alt="MDC DekiWiki" src="https://mdn.mozillademos.org/files/11607/dekiwiki.png"> </a></p> -</article> - -<article class="chapter chapter-portrait" id="aspivak"><a class="chapter-portrait-img" href="https://twitter.com/alispivak"><img alt="Ali Spivak" src="https://pbs.twimg.com/profile_images/111121498/ali_profile1.jpg" style="height: 128px; width: 128px;"> </a> +<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> <h2 id="Ali_Spivak_Gardienne_des_supers_chats_de_MDN">Ali Spivak <small>Gardienne des supers chats de MDN</small></h2> +<p><img alt="Ali Spivak" src="iyqi3qpv.jpg"></p> + <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> -</article> -<article class="chapter chapter-justtext" id="kuma"> <h2 id="Kuma_Le_troisième_(et_actuel)_moteur_wiki">Kuma <small>Le troisième (et actuel) moteur wiki</small></h2> <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> <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> -<p><a href="https://web.archive.org/web/20121003233220/https://developer.mozilla.org/en-US/"><img alt="MDN KUMA" src="https://mdn.mozillademos.org/files/11611/kuma.png" style="height: 287px; width: 600px;"> </a></p> -</article> - -<article class="chapter chapter-portrait" id="davidwalsh"><a class="chapter-portrait-img" href="http://twitter.com/davidwalshblog"><img alt="David Walsh" src="https://pbs.twimg.com/profile_images/2587630901/6gk0dqubt5512yk18a6o_400x400.png" style="height: 128px; width: 128px;"> </a> +<p><a href="https://web.archive.org/web/20121003233220/https://developer.mozilla.org/en-US/"><img alt="MDN KUMA" src="kuma.png"> </a></p> <h2 id="David_Walsh_Développeur_web_MDN">David Walsh <small>Développeur web, MDN</small></h2> +<p><img alt="David Walsh" src="darkwing.png"></p> + <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> -</article> -<article class="chapter chapter-justtext" id="mdn-redesign"> <h2 id="Refondre_MDN_Kuma_rafraîchi">Refondre MDN <small> Kuma, rafraîchi</small></h2> <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="https://mdn.mozillademos.org/files/11615/waffle-flag.jpg" style="height: 384px; width: 400px;"></article> - -<article class="chapter chapter-portrait" id="jswisher"><a class="chapter-portrait-img" href="https://twitter.com/jmswisher"><img alt="Janet Swisher" src="https://pbs.twimg.com/profile_images/3681972492/8ed406f7d19e188e4e8936b6836b2214.jpeg" style="height: 128px; width: 128px;"> </a> +<img alt="Waffle flag" src="waffle-flag.jpg"> <h2 id="Janet_Swisher_Community_Manager_MDN">Janet Swisher <small> Community Manager, MDN</small></h2> +<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> -</article> -<article class="chapter chapter-justtext" id="mdn-open"> <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> <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> -</article> - -<article class="chapter chapter-portrait" id="groovecoder"><a class="chapter-portrait-img" href="https://twitter.com/groovecoder"><img alt="Luke Crouch" src="https://pbs.twimg.com/profile_images/620387561031102464/DC_PRaDa.jpg" style="height: 128px; width: 128px;"> </a> <h2 id="Luke_Crouch_développeur_web_MDN">Luke Crouch <small>développeur web, MDN</small></h2> +<p><img alt="Luke Crouch" src="groovecoder.png"></p> + <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> -</article> -<article class="chapter chapter-justtext" id="l10n"> <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> -</article> - -<article class="chapter chapter-portrait"><a class="chapter-portrait-img" href="https://twitter.com//Sphinx_Twitt"><img alt="Julien" src="https://ffp4g1ylyit3jdyti1hqcvtb-wpengine.netdna-ssl.com/community/files/2015/05/ensemble.png" style="height: 128px; width: 128px;"> </a> <h2 id="Julien_(alias_Sphinx)_Localisation_en_français_MDN">Julien (alias Sphinx) <small>Localisation en français, MDN</small></h2> -<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> -</article> +<p><img alt="Julien" src="ensemble.png"></p> -<article class="chapter chapter-portrait" id="teoli"><a class="chapter-portrait-img" href="https://twitter.com/Teoli2003"><img alt="an-Yves Perrier" src="https://pbs.twimg.com/profile_images/604271935099392001/NMrPWLGm.jpg" style="height: 128px; width: 128px;"> </a> +<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> <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> + <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> -</article> -<article class="chapter chapter-justtext" id="mdn-learning"> + <h2 id="«_Learning_Area_»_ou_Apprendre_le_Web">« Learning Area » ou Apprendre le Web</h2> <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> -</article> - -<article class="chapter chapter-portrait" id="jeremie"><a class="chapter-portrait-img" href="https://twitter.com/jeremiepat"><img alt="Jérémie Patonnier" src="https://pbs.twimg.com/profile_images/1731588715/jeremie-patonnier-150.jpg" style="height: 128px; width: 128px;"> </a> <h2 id="Jérémie_Patonnier_Écrivain_technique_MDN">Jérémie Patonnier <small>Écrivain technique, MDN</small></h2> +<p><img alt="Jérémie Patonnier" src="jeremiepat.jpg"></p> + <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> -</article> -<article class="chapter chapter-justtext" id="mdn-future"> <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> <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> @@ -188,12 +150,9 @@ Un endroit pour les développeurs Mozilla <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> <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> -</article> -<article class="chapter chapter-justtext" id="mdn-contributors"> <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> -<div class="twocolumns"> <ul> <li>Les Orchard</li> <li>John Karahalis</li> @@ -206,8 +165,7 @@ Un endroit pour les développeurs Mozilla <li>Craig Cook</li> <li>Rob Hudson</li> <li>John Whitlock</li> - <li>...<br> - Et bien d'autres <a href="https://github.com/mozilla/kuma/graphs/contributors">contributeurs à Kuma.</a></li> + <li>...Et bien d'autres <a href="https://github.com/mozilla/kuma/graphs/contributors">contributeurs à Kuma.</a></li> </ul> @@ -226,8 +184,6 @@ Un endroit pour les développeurs Mozilla <li>...<br> Et des centaines de contributeurs au wiki.</li> </ul> -</div> -<img alt="The Berlin Office" src="https://mdn.mozillademos.org/files/11605/11073502_781006205281080_8135317797319228200_o-600x400.jpg"></article> -<div style=""> </div> -</div> +<img alt="The Berlin Office" src="11073502_781006205281080_8135317797319228200_o-600x400.jpg"> + diff --git a/files/fr/mdn/at_ten/index.html b/files/fr/mdn/at_ten/index.html index d98252e21e..08e46f4829 100644 --- a/files/fr/mdn/at_ten/index.html +++ b/files/fr/mdn/at_ten/index.html @@ -8,33 +8,24 @@ translation_of: MDN_at_ten original_slug: MDN_a_dix_ans --- <div> -<p class="summary">Fêtons 10 années passées à documenter votre Web.</p> +<p>Fêtons 10 années passées à documenter votre Web.</p> </div> -<div class="column-8"> <h2 id="L'histoire_de_MDN">L'histoire de MDN</h2> <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> -<p><a class="learnmore" href="/fr/docs/MDN_a_dix_ans/Histoire_MDN">En savoir plus<span class="offscreen">about the history</span></a></p> +<p><a href="/fr/docs/MDN_a_dix_ans/Histoire_MDN">En savoir plus</a></p> <h2 id="Contribuer_à_MDN">Contribuer à MDN</h2> <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> -<p><a class="learnmore" href="/fr/docs/MDN_a_dix_ans/Contribuer_à_MDN">En savoir plus<span class="offscreen">about contributing</span></a></p> +<p><a href="/fr/docs/MDN_a_dix_ans/Contribuer_à_MDN">En savoir plus</a></p> -<p> </p> - -<p> </p> -</div> - -<div class="column-4"> -<div class="quote"> <blockquote>Quand je souhaite comprendre « pourquoi » plutôt que « comment », j'utilise MDN.</blockquote> -<span class="attribution">— <a href="https://twitter.com/codepo8/status/621009648875868160">Christian Heilmann</a></span></div> -</div> +— <a href="https://twitter.com/codepo8/status/621009648875868160">Christian Heilmann</a> <h2 id="Subnav">Subnav</h2> diff --git a/files/fr/mdn/contribute/documentation_priorities/index.html b/files/fr/mdn/contribute/documentation_priorities/index.html index 4c07d4550b..9f56f5fcaa 100644 --- a/files/fr/mdn/contribute/documentation_priorities/index.html +++ b/files/fr/mdn/contribute/documentation_priorities/index.html @@ -11,7 +11,7 @@ translation_of: MDN/Contribute/Documentation_priorities --- <p>{{MDNSidebar}}</p> -<p class="summary">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>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> @@ -117,9 +117,8 @@ translation_of: MDN/Contribute/Documentation_priorities <h3 id="dom">DOM (439)</h3> -<div class="note notecard"> - <p><b>Note :</b></p> - <p>« 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 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> @@ -142,8 +141,7 @@ translation_of: MDN/Contribute/Documentation_priorities <h3 id="dom_events">DOM Events (22)</h3> <div class="note notecard"> - <p><b>Note :</b></p> - <p>« 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> + <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> @@ -173,8 +171,7 @@ translation_of: MDN/Contribute/Documentation_priorities <h3 id="html_dom">HTML DOM (371)</h3> <div class="note notecard"> - <p><b>Note :</b></p> - <p>« 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> + <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> diff --git a/files/fr/mdn/contribute/feedback/index.html b/files/fr/mdn/contribute/feedback/index.html index 537194078d..29c900a3c5 100644 --- a/files/fr/mdn/contribute/feedback/index.html +++ b/files/fr/mdn/contribute/feedback/index.html @@ -10,7 +10,7 @@ translation_of: MDN/Contribute/Feedback --- <div>{{MDNSidebar}}</div> -<p class="summary">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> +<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> <p>Il y existe plusieurs façons pour porter votre voix, cet article vous les explique.</p> diff --git a/files/fr/mdn/contribute/getting_started/index.html b/files/fr/mdn/contribute/getting_started/index.html index bb6f7dcf96..563a36e2d7 100644 --- a/files/fr/mdn/contribute/getting_started/index.html +++ b/files/fr/mdn/contribute/getting_started/index.html @@ -12,7 +12,7 @@ translation_of: MDN/Contribute/Getting_started --- <div>{{MDNSidebar}}</div> -<p class="summary">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> +<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> <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> diff --git a/files/fr/mdn/contribute/github_beginners/index.html b/files/fr/mdn/contribute/github_beginners/index.html index 493ed76ab6..96dff3ffa4 100644 --- a/files/fr/mdn/contribute/github_beginners/index.html +++ b/files/fr/mdn/contribute/github_beginners/index.html @@ -11,7 +11,7 @@ translation_of: MDN/Contribute/GitHub_beginners --- <p>{{MDNSidebar}}</p> -<p class="summary"><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> +<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> <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> @@ -69,8 +69,8 @@ translation_of: MDN/Contribute/GitHub_beginners <h2 id="setting_up_to_work_on_a_specific_repo">Se préparer à travailler sur un dépôt spécifique</h2> <!-- start:Note spéciale pour l'équpe de traduction l10n-fr --> -<div class="notecard note"> - <p><b>Note pour la traduction française :</b></p> +<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> @@ -181,9 +181,8 @@ origin git@github.com:chrisdavidmills/content.git (push)</pre> <pre class="brush: bash">git switch main</pre> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>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 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> @@ -297,9 +296,8 @@ nothing to commit, working tree clean</pre> <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="notecard note"> - <p><b>Note :</b></p> - <p><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 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> @@ -357,9 +355,8 @@ To github.com:chrisdavidmills/content.git <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> - <div class="notecard warning"> - <p><b>Attention !</b></p> - <p>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 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> @@ -422,9 +419,8 @@ To github.com:chrisdavidmills/content.git <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> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>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> +<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> diff --git a/files/fr/mdn/contribute/github_best_practices/index.html b/files/fr/mdn/contribute/github_best_practices/index.html index 852898990e..146496aba9 100644 --- a/files/fr/mdn/contribute/github_best_practices/index.html +++ b/files/fr/mdn/contribute/github_best_practices/index.html @@ -10,7 +10,7 @@ translation_of: MDN/Contribute/GitHub_best_practices --- <p>{{MDNSidebar}}</p> -<p class="summary">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> +<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> diff --git a/files/fr/mdn/contribute/github_cheatsheet/index.html b/files/fr/mdn/contribute/github_cheatsheet/index.html index 6bf6de934e..1dddbb8be7 100644 --- a/files/fr/mdn/contribute/github_cheatsheet/index.html +++ b/files/fr/mdn/contribute/github_cheatsheet/index.html @@ -13,7 +13,7 @@ translation_of: MDN/Contribute/GitHub_cheatsheet --- <p>{{MDNSidebar}}</p> -<p class="summary">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> +<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> <h2 id="Cloning">Cloner</h2> @@ -74,8 +74,7 @@ git push</pre> git push</pre> <div class="note notecard"> - <p><b>Note :</b></p> - <p>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> + <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> <h2 id="want_to_see_more">Vous voulez en voir plus ?</h2> diff --git a/files/fr/mdn/contribute/help_beginners/index.html b/files/fr/mdn/contribute/help_beginners/index.html index bf5fe31886..92c94bb627 100644 --- a/files/fr/mdn/contribute/help_beginners/index.html +++ b/files/fr/mdn/contribute/help_beginners/index.html @@ -11,7 +11,7 @@ translation_of: MDN/Contribute/Help_beginners --- <p>{{MDNSidebar}}</p> -<p class="summary">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> +<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> @@ -82,9 +82,8 @@ translation_of: MDN/Contribute/Help_beginners </li> </ol> -<div class="notecard warning"> - <p><b>Important :</b></p> - <p>Avant tout, soyez patient, amical et aimable. N'oubliez pas que la plupart de ces personnes sont des débutants.</p> +<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> diff --git a/files/fr/mdn/contribute/howto/convert_code_samples_to_be_live/index.html b/files/fr/mdn/contribute/howto/convert_code_samples_to_be_live/index.html index 25f2118686..5575715390 100644 --- a/files/fr/mdn/contribute/howto/convert_code_samples_to_be_live/index.html +++ b/files/fr/mdn/contribute/howto/convert_code_samples_to_be_live/index.html @@ -4,28 +4,24 @@ 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 class="summary">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> +<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> -<p><span class="seoSummary">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".</span></p> +<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> -<dl> - <dt><strong>Pour quels articles faire cela ?</strong></dt> - <dd>Les articles marqués <a href="/en-US/docs/tag/NeedsLiveSample">NeedsLiveSample</a></dd> - <dt><strong>Quelles compétences pour réaliser cette tâche ?</strong></dt> - <dd> - <ul> +<h2>Compétences nécessaires pour cette tâche</h2> + +<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> - </dd> - <dd><strong>Quelles étapes pour réaliser cette tâche ?</strong></dd> - <dd> - <ol> + +<h2>Quelles étapes pour réaliser cette tâche ?</h2> + +<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> - </dd> -</dl> +</ol> <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> diff --git a/files/fr/mdn/contribute/howto/create_an_interactive_exercise_to_help_learning_the_web/index.html b/files/fr/mdn/contribute/howto/create_an_interactive_exercise_to_help_learning_the_web/index.html deleted file mode 100644 index 13a550645f..0000000000 --- a/files/fr/mdn/contribute/howto/create_an_interactive_exercise_to_help_learning_the_web/index.html +++ /dev/null @@ -1,191 +0,0 @@ ---- -title: Comment créer un exercice interactif -slug: MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web -tags: - - Apprendre - - Comment faire - - Guide - - Intermédiaire - - MDN Meta - - Tutoriel -translation_of: MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web -original_slug: MDN/Contribute/Howto/Creer_un_exercice_interactif_pour_apprendre_le_web ---- -<div>{{MDNSidebar}}</div> - -<div>{{IncludeSubnav("/fr/docs/MDN")}}</div> - -<p>Quand on étudie le Web, il est important de pouvoir s'appuyer sur des exemples pratiques. Ce genre de contenu est là pour aider à apprendre de manière proactive. Ce peut être sous forme d'exercices, d'exemples interactifs, d'une liste de choses à faire, d'évaluations, etc. En un mot, tout ce qui peut amener quelqu'un à participer activement à son apprentissage.</p> - -<p>Il n'existe pas de méthode directe pour créer un tel contenu. Par exemple, on peut trouver plusieurs sites tiers qui permettent de créer du code modifiable (voir : <a href="https://glitch.com/">Glitch</a>, <a href="https://jsfiddle.net/" rel="external">JSFiddle</a>, <a href="https://codepen.io/">CodePen</a>, <a href="http://dabblet.com/">Dabblet</a>, etc.) que vous pouvez mettre en lien dans les articles MDN.</p> - -<p>Pour le moment, MDN ne possède pas d'outil facilement accessible pour créer des exemples interactifs. Néanmoins, si vous êtes un développeur, vous pouvez utiliser directement des fonctionnalités MDN pour créer du contenu interactif personnalisé. Continuez la lecture pour en savoir plus.</p> - -<h2 id="Les_lives_samples">Les <em>lives samples</em></h2> - -<p>MDN possède une fonctionnalité assez cool, les <em><strong>live samples</strong></em> (qu'on pourrait traduire par exemple interactif). C'est un programme qui interprète un échantillon de code HTML, CSS, et JavaScript directement dans une page MDN. Avant de vous en servir, vous devriez lire <a href="/en-US/docs/MDN/Contribute/Editor/Live_samples">Using the live sample system</a>, qui est la documentation complète sur son utilisation. Bien qu'il soit facile à prendre en main, vous en apprendrez tout au long de son utilisation.</p> - -<p>L'avantage est qu'il est vraiment facile d'exploiter cette fonctionnalité pour intégrer toute sorte d'exemples dont on a besoin dans une page MDN.</p> - -<h3 id="Le_code_caché">Le code caché</h3> - -<p>La meilleur moyen de créer un échantillon de code qui vous permettra de créer un exemple interactif est de construire la page dans laquelle vous voulez insérer votre contenu. Ne vous embetez pas avec la complexité du code; créez seulement ce dont vous avez besoin. Une fois qu'il est prêt, basculer vers l'éditeur de code et insérer celui-ci dans la balise {{HTMLElement('div')}} avec la classe <code>hidden</code>. En faisant ça, votre code ne sera pas affiché, mais votre échantillon restera accessible et modififable.</p> - -<p>Prenons un exemple simple:</p> - -<div class="moreinfo"> -<p>Cliquer sur le carré suivant pour changer sa couleur de manière aléatoire ou entrez un code couleur héxadécimal.</p> - -<div class="hidden"> -<h4 id="hidden_code_example">Exemple de code caché</h4> - -<h5 id="HTML">HTML</h5> - -<pre class="brush: html"><div class="square"> - #<input class="color"> -</div></pre> - -<h5 id="CSS">CSS</h5> - -<pre class="brush: css">body { - padding: 10px; - margin : 0; -} - -.square { - width : 80px; - height : 80px; - padding: 10px; - background-color: black; - color: white; - text-align: center; -} - -.color { - width: 60px; - text-transform: uppercase; -} -</pre> - -<h5 id="JS">JS</h5> - -<pre class="brush: js">function setColor(color) { - document.querySelector('.square').style.backgroundColor = '#' + color; - document.querySelector('.color').value = color; -} - -function getRandomColor() { - var color = Math.floor(Math.random() * 16777215); - return color.toString(16); -} - -function getInputColor() { - var value = document.querySelector('.color').value; - var color = Number('0x' + color); - if (color === +color) { - return color.toString(16); - } - return value; -} - -document.addEventListener('click', function () { - setColor(getRandomColor()); -}); - -document.addEventListener('keyup', function () { - setColor(getInputColor()); -}); -</pre> -</div> -{{EmbedLiveSample('hidden_code_example', 120, 120)}}</div> - -<p>Si on regarde le code HTML de l'éditeur MDN on retrouvera, lorsqu'il aura été géneré, exactement le code HTML suivant :</p> - -<pre class="brush: html"><div class="moreinfo"> -<p>Cliquer sur le carré suivant pour changer sa couleur de manière aléatoire ou entrez un code couleur héxadécimal.</p> - -<div class="hidden"> -<h4 id="hidden_code_example">Exemple de code caché</h4> - -<h5 id="HTML">HTML</h5> - -<pre class="brush: html"> -&lt;div class="square"&gt; - #&lt;input class="color"&gt; -&lt;/div&gt;</pre> - -<h5 id="CSS">CSS</h5> - -<pre class="brush: css"> -body { - padding: 10px; - margin : 0; -} - -.square { - width : 80px; - height : 80px; - padding: 10px; - background-color: black; - color: white; - text-align: center; -} - -.color { - width: 60px; - text-transform: uppercase; -} -</pre> - -<h5 id="JS">JS</h5> - -<pre class="brush: js"> -function setColor(color) { - document.querySelector('.square').style.backgroundColor = '#' + color; - document.querySelector('.color').value = color; -} - -function getRandomColor() { - var color = Math.floor(Math.random() * 16777215); - return color.toString(16); -} - -function getInputColor() { - var value = document.querySelector('.color').value; - var color = Number('0x' + color); - if (color === +color) { - return color.toString(16); - } - return value; -} - -document.addEventListener('click', function () { - setColor(getRandomColor()); -}); - -document.addEventListener('keyup', function () { - setColor(getInputColor()); -}); -</pre> -</div> - -\{{EmbedLiveSample('hidden_code_example', 120, 120)}} -</div></pre> - -<p>Vous trouverez des exemples plus avancés dans <a href="/en-US/docs/Web/API/Canvas_API#JavaScript">la page sur l'API Canvas API</a>.</p> - -<h3 id="Code_externe">Code externe</h3> - -<p>L'exemple précédent est suffisant pour intégrer des exemples basiques. Néanmoins, si vous voulez traiter du code plus complexe, cela peut devenir assez difficile uniquement à l'aide de la classe <code>hidden</code>.</p> - -<p>L'autre option est d'écrire votre code dans une page MDN et de l'insérer ensuite dans une autre. On peut utiliser le macro {{TemplateLink("EmbedDistLiveSample")}} au lieu de {{TemplateLink("EmbedLiveSample")}}.</p> - -<p>Voici à quoi cet exemple ressemble lorsqu'il est intégré à l'aide de la méthode distante :</p> - -<div class="moreinfo"> -<p>Cliquer sur le carré suivant pour changer sa couleur de manière aléatoire ou entrez un code couleur héxadécimal.</p> -{{EmbedLiveSample('The_example', 120, 120, '', 'MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web/distant_example')}}</div> - -<p>Cette fois, si vous allez sur <a href="/en-US/docs/MDN/Contribute/Editor/Source_mode">cette page avec l'éditeur MDN</a>, vous ne verrez pas de code caché. Si vous voulez voir le code, allez sur <a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web/distant_example">la page qui l'héberge</a>.</p> - -<p>Vous trouverez des exemples plus avancés sur <a href="/en-US/docs/Web/Guide/HTML/Forms/How_to_build_custom_form_widgets">le tutoriel sur les formulaires HTML</a>, qui appliquent ces méthodes pour permettre leur utilisation sur des formulaires.</p> diff --git a/files/fr/mdn/contribute/howto/create_and_edit_pages/index.html b/files/fr/mdn/contribute/howto/create_and_edit_pages/index.html index 7e003a5450..70cb353739 100644 --- a/files/fr/mdn/contribute/howto/create_and_edit_pages/index.html +++ b/files/fr/mdn/contribute/howto/create_and_edit_pages/index.html @@ -7,7 +7,7 @@ translation_of: 'MDN/Contribute/Howto/Create_and_edit_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.</p> -<div class="notecard"> +<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> diff --git a/files/fr/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.html b/files/fr/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.html index 26c9e08c0e..b70818e6d9 100644 --- a/files/fr/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.html +++ b/files/fr/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.html @@ -16,11 +16,6 @@ translation_of: MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary <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> -<p>Si vous avez une idée pour une nouvelle entrée de glossaire, cliquez simplement sur le bouton ci-dessous pour ouvrir un nouvel onglet et suivez les étapes décrites sous le bouton :</p> -<p></p><div class="align-center"><a class="button ignore-external mega positive" href="/fr/docs/new?parent=4391">Écrire une nouvelle entrée de glossaire<div></div></a></div><p></p> - -<p> </p> - <h3 id="Étape_1_écrire_un_résumé">Étape 1: écrire un résumé</h3> <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> @@ -30,7 +25,7 @@ translation_of: MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary </div> <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> +<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> <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> diff --git a/files/fr/mdn/contribute/index.html b/files/fr/mdn/contribute/index.html index c355d35446..f72eae7a86 100644 --- a/files/fr/mdn/contribute/index.html +++ b/files/fr/mdn/contribute/index.html @@ -9,11 +9,10 @@ translation_of: MDN/Contribute --- <div>{{MDNSidebar}}</div> -<p class="summary">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> +<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> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>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 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> <h2 id="What_can_I_do_to_help">Que puis-je faire pour aider ?</h2> @@ -81,7 +80,7 @@ translation_of: MDN/Contribute <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> -<p id="Option_1_I_like_words">Si vous êtes plus intéressé par les mots, vous pouvez faire ce qui suit :</p> +<p>Si vous êtes plus intéressé par les mots, vous pouvez faire ce qui suit :</p> <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> @@ -104,9 +103,8 @@ translation_of: MDN/Contribute <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> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>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 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> <h2 id="Other_useful_pages">Autres pages utiles</h2> diff --git a/files/fr/mdn/contribute/localize/index.html b/files/fr/mdn/contribute/localize/index.html index 082c1a24ed..bd39293888 100644 --- a/files/fr/mdn/contribute/localize/index.html +++ b/files/fr/mdn/contribute/localize/index.html @@ -8,7 +8,7 @@ tags: --- <div>{{MDNSidebar}}</div> -<p class="summary">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> +<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> <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> @@ -16,9 +16,8 @@ tags: <p>Nous avons actuellement dégelé les langues suivantes :</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>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 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> <h3 id="Chinese_zh-CN_zh-TW">Chinois (zh-CN, zh-TW)</h3> diff --git a/files/fr/mdn/contribute/open_source_etiquette/index.html b/files/fr/mdn/contribute/open_source_etiquette/index.html index 4035713a9d..2721c7985c 100644 --- a/files/fr/mdn/contribute/open_source_etiquette/index.html +++ b/files/fr/mdn/contribute/open_source_etiquette/index.html @@ -11,7 +11,7 @@ translation_of: MDN/Contribute/Open_source_etiquette --- <p>{{MDNSidebar}}</p> -<p class="summary">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> +<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> <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> diff --git a/files/fr/mdn/contribute/where_is_everything/index.html b/files/fr/mdn/contribute/where_is_everything/index.html index e23353710a..349a70a3fb 100644 --- a/files/fr/mdn/contribute/where_is_everything/index.html +++ b/files/fr/mdn/contribute/where_is_everything/index.html @@ -12,7 +12,7 @@ translation_of: MDN/Contribute/Where_is_everything --- <p>{{MDNSidebar}}</p> -<p class="summary">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> +<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> <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> diff --git a/files/fr/mdn/guidelines/code_guidelines/css/index.html b/files/fr/mdn/guidelines/code_guidelines/css/index.html index bffb68aad4..2e2a768762 100644 --- a/files/fr/mdn/guidelines/code_guidelines/css/index.html +++ b/files/fr/mdn/guidelines/code_guidelines/css/index.html @@ -11,7 +11,7 @@ translation_of: MDN/Guidelines/Code_guidelines/CSS --- <div>{{MDNSidebar}}</div> -<p class="summary seoSummary">Les directives suivantes couvrent la manière d'écrire les CSS pour les exemples de code MDN.</p> +<p>Les directives suivantes couvrent la manière d'écrire les CSS pour les exemples de code MDN.</p> <h2 id="In_this_article">Dans cet article</h2> diff --git a/files/fr/mdn/guidelines/code_guidelines/general/index.html b/files/fr/mdn/guidelines/code_guidelines/general/index.html index c2358c8e2f..d35985d1aa 100644 --- a/files/fr/mdn/guidelines/code_guidelines/general/index.html +++ b/files/fr/mdn/guidelines/code_guidelines/general/index.html @@ -11,7 +11,7 @@ translation_of: MDN/Guidelines/Code_guidelines/General --- <div>{{MDNSidebar}}</div> -<p class="summary">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> +<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> <h2 id="In_this_article">Dans cet article</h2> diff --git a/files/fr/mdn/guidelines/code_guidelines/html/index.html b/files/fr/mdn/guidelines/code_guidelines/html/index.html index 8ac19e47bf..086c1f5e34 100644 --- a/files/fr/mdn/guidelines/code_guidelines/html/index.html +++ b/files/fr/mdn/guidelines/code_guidelines/html/index.html @@ -11,7 +11,7 @@ translation_of: MDN/Guidelines/Code_guidelines/HTML --- <div>{{MDNSidebar}}</div> -<p class="summary">Les directives suivantes couvrent la manière d'écrire du HTML pour les exemples de code MDN.</p> +<p>Les directives suivantes couvrent la manière d'écrire du HTML pour les exemples de code MDN.</p> <h2 id="In_this_article">Dans cet article</h2> diff --git a/files/fr/mdn/guidelines/code_guidelines/index.html b/files/fr/mdn/guidelines/code_guidelines/index.html index 58ab589009..ab395b6e62 100644 --- a/files/fr/mdn/guidelines/code_guidelines/index.html +++ b/files/fr/mdn/guidelines/code_guidelines/index.html @@ -14,12 +14,12 @@ original_slug: MDN/Guidelines/Code_lignesdirectrices --- <div>{{MDNSidebar}}</div> -<p class="summary">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> +<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> <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> -<div class="notecard 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 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> <h2 id="Article_structure">Structure d'article</h2> diff --git a/files/fr/mdn/guidelines/code_guidelines/javascript/index.html b/files/fr/mdn/guidelines/code_guidelines/javascript/index.html index 9d390983eb..a2178f8491 100644 --- a/files/fr/mdn/guidelines/code_guidelines/javascript/index.html +++ b/files/fr/mdn/guidelines/code_guidelines/javascript/index.html @@ -11,7 +11,7 @@ translation_of: MDN/Guidelines/Code_guidelines/JavaScript --- <div>{{MDNSidebar}}</div> -<p class="summary">Les directives suivantes couvrent la manière d'écrire le JavaScript pour les exemples de code MDN.</p> +<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> @@ -134,9 +134,8 @@ translation_of: MDN/Guidelines/Code_guidelines/JavaScript <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> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>* 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 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> <h2 id="Variables">Variables</h2> @@ -158,9 +157,8 @@ let speed = distance / time;</pre> let s = d/t; </pre> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>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 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> <h3 id="Declaring_variables">Déclaration des variables</h3> @@ -354,9 +352,8 @@ function notVeryObviousName() { }; </pre> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>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 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> <h3 id="Defining_functions">Définition des fonctions</h3> diff --git a/files/fr/mdn/guidelines/code_guidelines/shell/index.html b/files/fr/mdn/guidelines/code_guidelines/shell/index.html index d00ea40c41..a3a1cba4b0 100644 --- a/files/fr/mdn/guidelines/code_guidelines/shell/index.html +++ b/files/fr/mdn/guidelines/code_guidelines/shell/index.html @@ -11,7 +11,7 @@ translation_of: MDN/Guidelines/Code_guidelines/Shell --- <div>{{MDNSidebar}}</div> -<p class="summary">Les directives suivantes expliquent comment rédiger des exemples de lignes de commande sur MDN.</p> +<p>Les directives suivantes expliquent comment rédiger des exemples de lignes de commande sur MDN.</p> <h2 id="Shell_prompts_in_brief">Les commandes Shell en bref</h2> diff --git a/files/fr/mdn/guidelines/conventions_definitions/index.html b/files/fr/mdn/guidelines/conventions_definitions/index.html index eabb1b964f..72ac92bc7c 100644 --- a/files/fr/mdn/guidelines/conventions_definitions/index.html +++ b/files/fr/mdn/guidelines/conventions_definitions/index.html @@ -11,7 +11,7 @@ translation_of: MDN/Guidelines/Conventions_definitions --- <div>{{MDNSidebar}}</div> -<p class="summary">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> +<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> <h2 id="Definitions">Définitions</h2> @@ -112,7 +112,7 @@ translation_of: MDN/Guidelines/Conventions_definitions <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> <div class="note"> -<p>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> +<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> <ul> @@ -170,6 +170,6 @@ translation_of: MDN/Guidelines/Conventions_definitions <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> -<div class="notecard warning"> -<p><strong>Conflit de spécification </strong>: 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 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> diff --git a/files/fr/mdn/guidelines/css_style_guide/index.html b/files/fr/mdn/guidelines/css_style_guide/index.html deleted file mode 100644 index 9b0fc4111b..0000000000 --- a/files/fr/mdn/guidelines/css_style_guide/index.html +++ /dev/null @@ -1,382 +0,0 @@ ---- -title: Guide relatif aux classes et styles utilisés dans le contenu de MDN -slug: MDN/Guidelines/CSS_style_guide -tags: - - Classes - - Guide - - Guidelines - - MDN - - MDN Meta - - Styles -translation_of: MDN/Guidelines/Conventions_definitions ---- -<p>{{MDNSidebar}}</p> - -<p class="summary"><span class="seoSummary">MDN dispose de nombreux styles prédéfinis qui peuvent être utilisés dans les articles. Cette page recense les différentes classes disponibles et comment les utiliser.</span></p> - -<p>On gardera à l'esprit que ces styles ont été développés afin d'aborder la plupart des situations pour la mise en forme du contenu d'un article. Autant que possible, on devra utiliser ces classes disponibles pour éviter de créer une hétérogénéité de styles. Si vous pensez qu'une page nécessite une mise en forme spécifique, commencez <a href="/fr/docs/MDN/Contribute/Getting_started#step_4_ask_for_help">par en discuter</a>.</p> - -<h2 id="Inline_styles">Styles en incise (inline)</h2> - -<p>Cette section référence les différents styles en incise qui sont disponibles pour les blocs de contenu sur MDN.</p> - -<h3 id=".button"><code>.button</code></h3> - -<p>Met en forme comme un bouton. Généralement utilisé pour mettre en forme des liens (les éléments <a href="/fr/docs/Web/HTML/Element/button"><code><button></code></a> sont supprimés des sources des articles pour des raisons de sécurité).</p> - -<p><a class="button" href="https://github.com/mdn/simple-web-worker/archive/gh-pages.zip">Télécharger le code source</a></p> - -<h4 id="Example_syntax">Exemple de syntaxe</h4> - -<pre class="brush: html"><a href="https://github.com/mdn/simple-web-worker/archive/gh-pages.zip" class="button">Télécharger le code source</a></pre> - -<h3 id=".hidden"><code>.hidden</code></h3> - -<p>Permet de masquer le contenu dans la vue affichée au lecteur. Elle est généralement utilisée afin de fournir des blocs de code HTML, CSS et JavaScript complémentaires pour les exemples interactifs pour n'afficher que le contenu pertinent pour la page courante.</p> - -<h4 id="Example_syntax_3">Exemple de syntaxe</h4> - -<pre class="brush: html"><h4 id="Hidden_Code_Sample">Exemple de code masqué</h4> - -<div class="hidden"> -<h5 id="HTML">HTML</h5> - -<pre class="brush: html;"> -&lt;button id="test"&gt; Cliquez ici&lt;/button&gt; - -<h5 id="CSS">CSS</h5> - -<pre class="brush: css;"> -button { - background-color: #a00; - color:#fff; - font-size: 20px; -} -</pre> -</div> - -<h5 id="JavaScript_Content">JavaScript</h5> - -<pre class="brush: js;"> -document.getElementById("test").addEventListener("click", works); -function works() { - console.log("vous avez cliqué !"); -} -</pre> - -<p>\{{EmbedLiveSample("Hidden_Code_Sample")}}</p> -</pre> - -<h4 id="Hidden_code_sample">Exemple de code masqué</h4> - -<div class="hidden"> -<h5 id="HTML">HTML</h5> - -<pre class="brush: html"><button id="test">Cliquez ici</button> -</pre> - -<h5 id="CSS">CSS</h5> - -<pre class="brush: css">button{ - background-color: #a00; - color:#fff; - font-size: 20px; -} -</pre> -</div> - -<h5 id="JavaScript">JavaScript</h5> - -<pre class="brush: js">document.getElementById("test").addEventListener("click", works); -function works(){ - console.log("vous avez cliqué !"); -} -</pre> - -<p>{{EmbedLiveSample("Hidden_code_sample", "100%", 150)}}</p> - -<h3 id=".seoSummary"><code>.seoSummary</code></h3> - -<p>Il s'agit d'une classe sans effet visible sur le contenu de la page. Toutefois, si la classe est appliquée à un élément (généralement un <a href="/fr/docs/Web/HTML/Element/span"><code><span></code></a>), KumaScript utilisera le contenu de l'élément afin de créer une <code>description</code> via une balise <a href="/fr/docs/Web/HTML/Element/meta"><code><meta></code></a>. Celle-ci sera utilisée pour fournir une courte description dans les moteurs de recherche et sur les tuiles générées dans les messages sur les réseaux sociaux comme Facebook et Twitter.</p> - -<div class="notecard note"> - <h4>Note</h4> - <p>Si <code>.seoSummary</code> n'est pas explicitement utilisée sur une page, le premier paragraphe sera automatiquement utilisé comme telle description.</p> -</div> - -<h4 id="Example_syntax_4">Exemple de syntaxe</h4> - -<pre class="brush: html"><span class="seoSummary"> - Les extensions permettent aux développeuses et développeurs d'étendre les fonctionnalités d'un navigateur. -</span></pre> - -<h4 id="Example_of_the_generated_HTMLElementmeta_elements">Exemple de <a href="/fr/docs/Web/HTML/Element/meta"><code><meta></code></a> généré</h4> - -<pre class="brush: html;"><meta name="description" - content="Les extensions permettent aux développeuses et développeurs d'étendre les fonctionnalités d'un navigateur."></pre> - -<h2 id="Block_level_styles">Styles pour les éléments de bloc</h2> - -<p>Cette section énumère les différents styles permettant de mettre en forme les éléments de bloc sur MDN.</p> - -<h3 id="Code_syntax_highlighting">Coloration syntaxique du code</h3> - -<p>Pour créer un exemple de bloc de code sur MDN, on utilisera un élément <code><pre></code> :</p> - -<pre> -<pre>p { - color: red; - /* Voici mon exemple de code */ -}</pre> -</pre> - -Cela fournira le résultat suivant : - -<pre>p { - color: red; - /* Voici mon exemple de code */ -}</pre> - -<p>Si vous souhaitez indiquer une coloration syntaxique dans l'exemple de code, il faudra inclure un attribut <code>class</code> avec une valeur <code>brush: <em>type-de-langage</em></code> où <code><em>type-de-langage</em></code> pourra être une valeur parmi :</p> - -<ul> - <li><code>bash</code></li> - <li><code>cpp</code> (pour C/C++)</li> - <li><code>css</code></li> - <li><code>html</code></li> - <li><code>java</code></li> - <li><code>js</code> (pour JavaScript)</li> - <li><code>json</code></li> - <li><code>php</code></li> - <li><code>python</code></li> - <li><code>sql</code></li> - <li><code>xml</code></li> - <li><code>wasm</code> (pour le format texte WebAssembly)</li> -</ul> - -<p>Par exemple, pour utiliser une coloration syntaxique pour CSS, on pourra écrire :</p> - -<pre> -<pre class="brush: css">p { - color: red; - /* Voici mon exemple de code */ -}</pre> -</pre> - -Ce qui fournira le résultat suivant : - -<pre class="brush: css">p { - color: red; - /* Voici mon exemple de code */ -}</pre> - -<p>Si aucun langage pertinent n'est disponible, on pourra n'utiliser aucune valeur ou <code>brush: plain</code> afin d'avoir du code sans coloration syntaxique.</p> - -<h3 id="details"><code>details</code></h3> - -<p>Un élément <code><details></code> peut être utilisé autour d'un bloc de contenu afin de masquer ce contenu et d'afficher un lien "▶︎ Détails" qui, lorsqu'on cliquera dessus, dévoilera son contenu.</p> - -<details open> - <summary> -<h4 id="Example_syntax_9">Exemple de syntaxe</h4> - </summary> -<p>Voici un exemple de syntaxe pour l'élément <a href="/fr/docs/Web/HTML/Element/details"><code><details></code></a> qui a été masqué avec <a href="/fr/docs/Web/HTML/Element/details"><code><details></code></a>.</p> - -<pre class="brush: html;"><details> - <summary> -<h4>Exemple de syntaxe</h4> - </summary> -<p>Voici un exemple de syntaxe pour l'élément <code>.detail</code> qui a été masqué avec <code>.detail</code>.</p> -</details></pre> -</details> - -<div class="notecard note"> - <h4>Note</h4> - <p>On peut inclure un attribut <code>open</code> sur l'élément <code><details></code> afin que celui-ci soit ouvert par défaut.</p> -</div> - -<h3 id=".example-bad_and_.example-good"><code style="white-space: nowrap;">.example-bad</code> et <code style="white-space: nowrap;">.example-good</code></h3> - -<p>Les exemples de bonnes et de mauvaises pratiques peuvent être signalés respectivement par les classes <code>.example-good</code> et <code>.example-bad</code>. Elles sont généralement utilisées pour les blocs <code><pre></code> indiquant des fragments de code à éviter. On peut cependant les utiliser sur d'autres blocs.</p> - -<h5 id="Good_code_example">Exemple de code correct</h5> - -<pre class="brush: html example-good"><label for="test">Libellé de formulaire:</label> -<input type="text" id="test"> -</pre> - -<h5 id="Bad_code_example">Exemple de code incorrect</h5> - -<pre class="brush: html example-bad"><input type="text"> -</pre> - -<p><strong>Il est nécessaire d'utiliser des titres pour ces classes (voir ci-après).</strong> En effet, CSS ne permet pas d'ajouter le message localisé qui indique si l'exemple est correct ou incorrect et qui permet de comprendre pour les personnes utilisant un lecteur d'écran ou celles pour qui rouge et vert ne signifient pas nécessairement mauvais/bon.</p> - -<h4 id="Example_syntax_10">Exemple de syntaxe</h4> - -<pre class="brush: html"><h5 id="Good_code_example">Exemple de code correct</h5> - -<pre class="brush: html example-good"> - &lt;label for="test"&gt;Libellé de formulaire:&lt;/label&gt; - &lt;input type="text" id="test"&gt; -</pre> - -<h5 id="Bad_code_example">Exemple de code incorrect</h5> - -<pre class="brush: html example-bad"> - &lt;input type="text"&gt; -</pre></pre> - -<h3 id=".note.notecard"><code>.note.notecard</code></h3> - -<p>Affiche le contenu d'une section dans une boîte signalant une note. Cette classe s'avère utile lorsqu'on souhaite indiquer quelque chose de relatif au contenu principal sans que cette information s'intègre directement dans le flux de l'article.</p> - -<div class="notecard note"> -<h4>Note</h4> -<p>Voici comment une note est généralement affichée sur MDN.</p> -</div> - -<p>Nous avons ici utilisé un titre <code><h4></code> pour cet exemple mais il conviendra de choisir le niveau de titre qui correspond à la hiérarchie des titres du document courant.</p> - -<h4 id="Example_syntax_12">Exemple de syntaxe</h4> - -<pre class="brush: html"><div class="notecard note"> - <h4>Note</h4> - <p>Voici comment une note est généralement affichée sur MDN.</p> -</div></pre> - -<h3 id=".notecard.warning"><code>.notecard.warning</code></h3> - -<p>Affiche le contenu d'une section dans une boîte signalant un avertissement. Cela permet d'indiquer une information à laquelle la lectrice ou le lecteur doit faire particulièrement attention (par exemple lorsqu'il est nécessaire de faire quelque chose ou d'éviter quelque chose).</p> - -<div class="notecard warning"> - <h4>Attention !</h4> - <p>La balise <blink> est obsolète !</p> -</div> - -<p>Nous avons ici utilisé un titre <code><h4></code> pour cet exemple mais il conviendra de choisir le niveau de titre qui correspond à la hiérarchie des titres du document courant.</p> - -<h4 id="Example_syntax_17">Exemple de syntaxe</h4> - -<pre class="brush: html"><div class="notecard warning"> - <h4>Attention !</h4> - <p>La balise &lt;blink&gt; est obsolète !</p> -</div></pre> - -<h2 id="Table_styles">Styles pour les tableaux</h2> - -<p>MDN fournit quelques styles pour la mise en forme des éléments <a href="/fr/docs/Web/HTML/Element/table"><code><table></code></a>.</p> - -<p>Sans classe ajoutée :</p> - -<table> - <caption>Thés préférés, décembre 2015</caption> - <thead> - <tr> - <th scope="row">Variété</th> - <th scope="col">Caféine</th> - <th scope="col">Durée d'infusion</th> - <th scope="col">Température de l'eau</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">Noir</th> - <td>Élevée</td> - <td>2-3 minutes</td> - <td>99°C</td> - </tr> - <tr> - <th scope="row">Vert</th> - <td>Faible à moyen</td> - <td>1-2 minutes</td> - <td>75 à 80°C</td> - </tr> - <tr> - <th colspan="4">Caféine free</th> - </tr> - <tr> - <th scope="row">Tisane</th> - <td>Aucune</td> - <td>3-6 minutes</td> - <td>99°C</td> - </tr> - </tbody> -</table> - -<h3 id=".standard-table"><code style="white-space: nowrap;">.standard-table</code></h3> - -<table class="standard-table"> - <caption>Thés préférés, décembre 2015</caption> - <thead> - <tr> - <th scope="row">Variété</th> - <th scope="col">Caféine</th> - <th scope="col">Durée d'infusion</th> - <th scope="col">Température de l'eau</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">Noir</th> - <td>Élevée</td> - <td>2-3 minutes</td> - <td>99°C</td> - </tr> - <tr> - <th scope="row">Vert</th> - <td>Faible à moyen</td> - <td>1-2 minutes</td> - <td>75 à 80°C</td> - </tr> - <tr> - <th colspan="4">Caféine free</th> - </tr> - <tr> - <th scope="row">Tisane</th> - <td>Aucune</td> - <td>3-6 minutes</td> - <td>99°C</td> - </tr> - </tbody> -</table> - -<h4 id="Style_notes">Notes</h4> - -<ul> - <li>On notera les différents styles appliqués aux en-têtes (<a href="/fr/docs/Web/HTML/Element/th"><code><th></code></a>) et les attributs <a href="/fr/docs/Web/HTML/Element/th#attr-scope"><code>scope</code></a> utilisés pour l'accessibilité.</li> -</ul> - -<h4 id="Example_syntax_18">Exemple de syntaxe</h4> - -<pre class="brush: html"><table class="standard-table"> - <caption>Thés préférés, décembre 2015</caption> - <thead> - <tr> - <th scope="row">Variété</th> - <th scope="col">Caféine</th> - <th scope="col">Durée d'infusion</th> - <th scope="col">Température de l'eau</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">Noir</th> - <td>Élevée</td> - <td>2-3 minutes</td> - <td>99&nbsp;°C</td> - </tr> - <tr> - <th scope="row">Vert</th> - <td>Faible à moyen</td> - <td>1-2 minutes</td> - <td>75 à 80&nbsp;°C</td> - </tr> - <tr> - <th scope="row">Infusion</th> - <td>Aucune</td> - <td>3-6 minutes</td> - <td>99&nbsp;°C</td> - </tr> - </tbody> -</table></pre> diff --git a/files/fr/mdn/guidelines/does_this_belong_on_mdn/index.html b/files/fr/mdn/guidelines/does_this_belong_on_mdn/index.html index 9dc5b44c7f..a2355886d6 100644 --- a/files/fr/mdn/guidelines/does_this_belong_on_mdn/index.html +++ b/files/fr/mdn/guidelines/does_this_belong_on_mdn/index.html @@ -9,7 +9,7 @@ translation_of: MDN/Guidelines/Does_this_belong_on_MDN --- <div>{{MDNSidebar}}</div> -<p><span class="seoSummary">Dans cet article, nous verrons comment décider de si un sujet ou un type de contenu doit être documenté sur MDN.</span> Nous verrons également les autres emplacements où ce contenu pourra résider.</p> +<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> <h2 id="The_question">La question</h2> @@ -24,8 +24,8 @@ translation_of: MDN/Guidelines/Does_this_belong_on_MDN <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> -<div class="note notecard"> -<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 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> <h2 id="What_topics_belong_on_MDN_Web_Docs">Ce qui a sa place sur MDN</h2> @@ -44,8 +44,8 @@ translation_of: MDN/Guidelines/Does_this_belong_on_MDN <li>etc.</li> </ul> -<div class="note notecard"> -<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 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> <p>Les sujets relatifs au développement web et qui portent sur différentes technologies sont également les bienvenus sur MDN :</p> diff --git a/files/fr/mdn/guidelines/editorial/index.html b/files/fr/mdn/guidelines/editorial/index.html index 14395d8492..ffd2cc922c 100644 --- a/files/fr/mdn/guidelines/editorial/index.html +++ b/files/fr/mdn/guidelines/editorial/index.html @@ -10,7 +10,7 @@ translation_of: MDN/Guidelines/Editorial --- <div>{{MDNSidebar}}</div> -<p><span class="seoSummary">Cet article décrit les règles définies par l'équipe MDN pour le contenu de MDN.</span> Toute personne qui contribue à MDN se doit de respecter ces règles.</p> +<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> <h2 id="Relevance">Pertinence</h2> diff --git a/files/fr/mdn/guidelines/index.html b/files/fr/mdn/guidelines/index.html index e761129b94..8b9ef2e3b1 100644 --- a/files/fr/mdn/guidelines/index.html +++ b/files/fr/mdn/guidelines/index.html @@ -9,6 +9,6 @@ translation_of: MDN/Guidelines --- <div>{{MDNSidebar}}</div> -<p class="summary">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> +<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> <p>{{LandingPageListSubpages}}</p> diff --git a/files/fr/mdn/guidelines/video/index.html b/files/fr/mdn/guidelines/video/index.html index ec85ceeab3..5cdc746163 100644 --- a/files/fr/mdn/guidelines/video/index.html +++ b/files/fr/mdn/guidelines/video/index.html @@ -9,7 +9,7 @@ translation_of: MDN/Guidelines/Video --- <div>{{MDNSidebar}}</div> -<p class="summary">MDN n'est pas un site contenant beaucoup de vidéos. Toutefois, certaines documentations sont propices à ce type de média. <span class="seoSummary">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.</span></p> +<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> @@ -33,8 +33,8 @@ translation_of: MDN/Guidelines/Video </li> </ul> -<div class="note notecard"> -<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 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> @@ -182,8 +182,8 @@ translation_of: MDN/Guidelines/Video <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 notecard"> -<p><strong>Note </strong>: Ne zoomez pas au point que les éléments d'interfaces soient déformés ou semblent étranges.</p> +<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> @@ -192,8 +192,8 @@ translation_of: MDN/Guidelines/Video <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 notecard"> -<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 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> @@ -215,8 +215,8 @@ translation_of: MDN/Guidelines/Video <p>Actuellement, les vidéos doivent être uploadées sur YouTube afin d'être affichées sur MDN.</p> -<div class="note notecard"> -<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 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> <h3 id="Embedding">Intégration</h3> diff --git a/files/fr/mdn/guidelines/writing_style_guide/index.html b/files/fr/mdn/guidelines/writing_style_guide/index.html index ae9babcc20..348cec2bc7 100644 --- a/files/fr/mdn/guidelines/writing_style_guide/index.html +++ b/files/fr/mdn/guidelines/writing_style_guide/index.html @@ -15,7 +15,7 @@ translation_of: MDN/Guidelines/Writing_style_guide --- <div>{{MDNSidebar}}</div> -<p><span class="seoSummary">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.</span> 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> +<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> <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> @@ -32,8 +32,8 @@ translation_of: MDN/Guidelines/Writing_style_guide <p>Seul le premier terme d'un titre (de page ou de section) devra être en capitale :</p> <ul> - <li><span class="correct"><strong>Correct</strong></span> : « Une nouvelle méthode pour créer des objets JavaScript »</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: « Une Nouvelle Méthode pour Créer des Objets JavaScript »</li> + <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> <p>Si vous voyez certains titres qui enfreignent cette règle, n'hésitez pas à contribuer pour les corriger.</p> @@ -65,8 +65,8 @@ var toolkitProfileService = Components.classes["@mozilla.org/toolkit/profile-ser <h3 id="Latin_abbreviations">Abréviations</h3> -<div class="note notecard"> - <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 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> <h4 id="In_notes_and_parentheses">Dans les notes et parenthèses</h4> @@ -78,8 +78,8 @@ var toolkitProfileService = Components.classes["@mozilla.org/toolkit/profile-ser <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><span class="correct"><strong>Correct</strong></span> : les navigateurs web tels que Firefox peuvent être utilisés…</li> - <li><span class="incorrect"><strong>Incorrect</strong></span> : les navigateurs, ex. Firefox, peuvent être utilisés…</li> + <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> @@ -92,8 +92,8 @@ var toolkitProfileService = Components.classes["@mozilla.org/toolkit/profile-ser <p>Les acronymes seront écrits en capitales et sans point.</p> <ul> - <li><span class="correct"><strong>Correct</strong></span> : API</li> - <li><span class="incorrect"><strong>Incorrect</strong></span> : A.P.I. ; Api</li> + <li><strong>Correct</strong> : API</li> + <li><strong>Incorrect</strong> : A.P.I. ; Api</li> </ul> <h4 id="Expansion">Explication</h4> @@ -105,8 +105,8 @@ var toolkitProfileService = Components.classes["@mozilla.org/toolkit/profile-ser <p>Contrairement aux pratiques anglophones, on n'apportera pas de s pour les formes plurielles des acronymes.</p> <ul> - <li><span class="correct"><strong>Correct</strong></span> : les API du Web</li> - <li><span class="incorrect"><strong>Incorrect</strong></span> : les APIs du Web</li> + <li><strong>Correct</strong> : les API du Web</li> + <li><strong>Incorrect</strong> : les APIs du Web</li> </ul> <h3 id="Punctuation">Ponctuation</h3> diff --git a/files/fr/mdn/index.html b/files/fr/mdn/index.html index ce9fd9e5ab..9ba60b7b63 100644 --- a/files/fr/mdn/index.html +++ b/files/fr/mdn/index.html @@ -11,21 +11,19 @@ translation_of: MDN <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> -<div class="summary"> <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> -</div> <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> -<ul class="card-grid"> - <li><span><a href="/fr/docs/MDN/Débuter_sur_MDN">Pour commencer</a></span> +<ul> + <li><a href="/fr/docs/MDN/Débuter_sur_MDN">Pour commencer</a> <p>Vous êtes nouveau sur MDN et voulez apprendre comment le rendre meilleur ? Commencez par là !</p> </li> - <li><span><a href="/fr/docs/MDN/Contribute">Je suis un utilisateur avancé</a></span> + <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><span><a href="/fr/docs/MDN/Promotion_de_MDN">Faites passer le mot</a></span> + <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> diff --git a/files/fr/mdn/structures/compatibility_tables/index.html b/files/fr/mdn/structures/compatibility_tables/index.html deleted file mode 100644 index 43baa5309a..0000000000 --- a/files/fr/mdn/structures/compatibility_tables/index.html +++ /dev/null @@ -1,501 +0,0 @@ ---- -title: Tables de compatibilité -slug: MDN/Structures/Compatibility_tables -tags: - - Compatibilité - - Documentation - - Guide - - MDN - - Navigateurs -translation_of: MDN/Structures/Compatibility_tables -original_slug: MDN/Structures/Tables_de_compatibilité ---- -<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> - -<p class="summary">MDN a un format standard pour les tables de compatibilité de notre documentation du web ouvert ; c'est-à-dire la documentation de technologies comme le DOM, HTML, CSS, JavaScript, SVG etc. partagées par tous les navigateurs. Cet article explique comment utiliser nos fonctionnalités pour ajouter des données de compatibilité aux pages MDN.</p> - -<div class="warning"> -<p><strong>Important </strong>: <strong><em>La façon dont les données sont générées a changé</em></strong>. Historiquement, nos tables ont été insérées sur la page et les données ont été renseignées manuellement. Ceci est inefficace, rend la maintenance difficile et rend les données inflexibles. Par conséquent, nous migrons les données de notre navigateur pour les stocker dans un référentiel de données (voir <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>) et générer les tables par programme.<br> - <br> - Dans ce guide, nous documentons la nouvelle façon d'ajouter des données aux tables de compatibilité pour MDN, mais nous avons conservé la documentation à l'ancienne, car vous pourrez voir des tables manuelles sur MDN pendant un moment. Si vous avez besoin de la documentation ancienne, voyez notre article <a href="https://developer.mozilla.org/fr/docs/MDN/Contribute/Structures/Old_compatibility_tables">Anciennes tables de compatibilité</a>.</p> -</div> - -<div class="note"> -<p><strong>Note </strong>: Si vous avez besoin d'aide sur les étapes de ce guide, n'hésitez pas à nous contacter sur le <a href="https://discourse.mozilla-community.org/c/mdn">forum de discussion MDN</a> (en).</p> -</div> - -<h2 id="Comment_accéder_au_dépôt_de_données">Comment accéder au dépôt de données</h2> - -<p>Les données sont stockées dans un dépôt de GitHub — voir <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Pour y accéder, vous devez obtenir un compte GitHub, réaliser une branche du browser-compat-data sur votre propre compte, puis cloner votre branche sur votre machine locale.</p> - -<h2 id="Choisir_une_fonctionnalité_pour_y_ajouter_des_données">Choisir une fonctionnalité pour y ajouter des données</h2> - -<p>Tout d'abord, cherchez une fonctionnalité pour laquelle vous souhaitez ajouter des données de navigateur. Cela peut être un élément HTML, une propriété CSS, une fonctionnalité du langage JS ou une interface d'API JS, par exemple. Nous aimerions vous encourager à travailler sur les fonctionnalités de l'API, car nous avons déjà des personnes travaillant sur HTML, JS et CSS. Vous pouvez trouver le statut des fonctionnalités qui ont besoin de leurs données en ajoutant au dépôt sur notre tableur <a href="https://docs.google.com/spreadsheets/d/1ivgyPBr9Lj3Wvj5kyndT1rgGbX-pGggrxuMtrgcOmjM/edit#gid=926663640">Browser Compat Data migration</a> (<em>migration des données des tables de compatibilité des navigateurs</em>).</p> - -<p>Le processus d'utilisation est le suivant :</p> - -<ol> - <li>Allez-y et choisissez une fonctionnalité qui n'est pas déjà travaillée ou complète. Inscrivez votre nom dans la colonne "Who" (<em>qui</em>), de préférence avec votre nom d'utilisateur MDN afin que nous puissions trouver votre adresse e-mail et vous contacter si nécessaire.</li> - <li>Si la fonctionnalité sur laquelle vous souhaitez travailler n'est pas déjà répertoriée dans la feuille de calcul, ajoutez-y des lignes à un emplacement approprié, en copiant le format qui s'y trouve déjà. Vous devez également utiliser la même granularité (par exemple, par élément pour HTML, par propriété ou sélecteur pour CSS, par objet pour JS, par interface pour API).</li> - <li>Une fois que vous avez commencé à ajouter des données, mettez le statut "In progres" (<em>En cours</em>).</li> - <li>Une fois que vous avez ajouté les données et soumis une demande d'extraction au dépôt principal, attribuez le statut "PR done".</li> - <li>Au fur et à mesure que vos données sont fusionnées au rapport, ajoutées au paquet npm, mettez à jour le statut si nécessaire.</li> - <li>Une fois que vous avez mis à jour les pages de documentation pour votre fonctionnalité afin d'utiliser la nouvelle macro pour générer dynamiquement la table de données appropriée sur chaque page, définissez l'état sur "Article mis à jour". À ce stade, vous avez terminé.</li> -</ol> - -<h2 id="Préparation_à_lajout_de_données">Préparation à l'ajout de données</h2> - -<p>Avant d'ajouter de nouvelles données, vous devez vous assurer que votre branche est à jour avec le dépôt principal (le même contenu), créer une nouvelle branche dans votre embranchement pour contenir vos ajouts, puis récupérer cette branche dans votre clone local pour pouvoir commencer à y travailler :</p> - -<p>Regardons un moyen simple de nous assurer que votre fourche est à jour :</p> - -<h3 id="Ajout_dun_remote_au_dépôt_principal_navigateur-compat-données">Ajout d'un "remote" au dépôt principal navigateur-compat-données</h3> - -<p>Accédez à votre clone local de la branche dans votre terminal / ligne de commande, et ajoutez un"remote" pointant vers le dépôt principal (en amont) comme ceci (vous n'avez besoin de le faire qu'une seule fois):</p> - -<pre class="brush: bash notranslate">git remote add upstream https://github.com/mdn/browser-compat-data.git</pre> - -<p>Si vous n'êtes pas sûr d'y être parvenu, vous pouvez vérifier quels "remotes" votre dépôt utilise.</p> - -<pre class="brush: bash notranslate">git remote -v</pre> - -<h3 id="Mise_à_jour_de_votre_branche_avec_le_contenu_du_remote">Mise à jour de votre branche avec le contenu du "remote"</h3> - -<p>Maintenant, chaque fois que vous voulez mettre à jour votre branche, vous pouvez le faire en :</p> - -<ol> - <li> - <p>Vous assurant que vous êtes dans la branche maîtresse :</p> - - <pre class="brush: bash notranslate"> <code class="language-bash">git checkout master</code></pre> - </li> - <li> - <p>Allant chercher le contenu du dépôt à jour avec la commande suivante :</p> - - <pre class="brush: bash notranslate"> <code class="language-bash">git fetch upstream</code></pre> - </li> - <li> - <p>Rebasant le contenu de votre branche maîtresse avec le contenu du dépôt principal :</p> - - <pre class="brush: bash notranslate"> <code class="language-bash">git rebase upstream/master</code> </pre> - </li> - <li> - <p>poussant ces mises à jour de votre branche distante en utilisant ce :</p> - - <pre class="brush: bash notranslate"> <code class="language-bash">git push -f</code> -</pre> - </li> -</ol> - -<h3 id="Création_dune_nouvelle_branche_pour_y_travailler">Création d'une nouvelle branche pour y travailler</h3> - -<p>Ensuite, allez sur votre fourche distante (elle doit être à <code>https://github.com/<em>your-username</em>/browser-compat-data</code>) et créer une nouvelle branche <span class="short_text" id="result_box" lang="fr"><span>pour stocker vos modifications pour cet ajout de données</span></span>. Ceci peut être fait en:</p> - -<ol> - <li>Cliquant sur le bouton "Branch: Master".</li> - <li>Saisissant le nom de votre nouvelle branche dans le champ texte "Find or create a branch...".</li> - <li>Cliquant sur le bouton "Create branch <em>name-of-branch</em> from Master" qui vient d'être généré.</li> -</ol> - -<p>Par exemple, si vous vouliez ajouter des données pour l'API WebVR, vous devriez créer une branche nommée "webvr".</p> - -<h3 id="Aller_sur_la_nouvelle_branche">Aller sur la nouvelle branche</h3> - -<p>A ce stade, retournez dans votre terminal / ligne de commande, et mettez à jour la copie de votre fourche locale pour inclure votre nouvelle branche en utilisant la commande suivante:</p> - -<pre class="brush: bash notranslate">git pull</pre> - -<p>Maintenant allez sur votre nouvelle branche en utilisant:</p> - -<pre class="brush: bash notranslate">git checkout <em>-b name-of-branch</em></pre> - -<p>Vous devriez maintenant être prêt à ajouter vos données!</p> - -<h2 id="Ajouter_les_données">Ajouter les données</h2> - -<p>Pour ajouter les données, vous devez créer un ou des nouveaux fichiers pour y stocker les données de compatibilité. Les fichiers que vous devez créer diffèrent, selon la technologie sur laquelle vous travaillez:</p> - -<ul> - <li>HTML: Un fichier par élément HTML, contenu dans <a href="https://github.com/mdn/browser-compat-data/tree/master/html/elements">browser-compat-data/html/elements</a>. Le fichier doit être nommé avec le nom de l'élément, tout en minuscules, ex. <code>div.json</code>.</li> - <li>CSS: Un fichier par propriété ou sélecteur CSS, contenu dans le répertoire approprié (voir <a href="https://github.com/mdn/browser-compat-data/tree/master/css">browser-compat-data/css</a>). Le fichier doit être nommé avec le nom de la fonctionnalité, tout en minuscules, ex. <code>background-color.json</code>, ou <code>hover.json</code>.</li> - <li>JS: Un fichier par objet JS, contenu dans <a href="https://github.com/mdn/browser-compat-data/tree/master/javascript/builtins">browser-compat-data/javascript/builtins</a>. Le fichier doit être nommé avec le nom de l'objet, en respectant la casse, ex. <code>Date.json</code> ou <code>InternalError.json</code>.</li> - <li>APIs: un fichier par interface contenu dans l'API, mis dans <a href="https://github.com/mdn/browser-compat-data/tree/master/api">browser-compat-data/api</a>. Chaque fichier doit être nommé avec le nom exact de l'interface, en respectant la casse, ex. L'API WebVR a <code>VRDisplay.json</code>, <code>VRDisplayCapabilities.json</code>, etc.</li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: Vous remarquerez que le dépôt contient aussi des données pour les <a href="/fr/Add-ons/WebExtensions">Extensions de navigateurs</a> et pour <a href="/fr/docs/Web/HTTP">HTTP</a>. <span id="result_box" lang="fr"><span>Ces ensembles de données sont esssentiellement finis en l'état, mais il faudra peut-être ajouter d'autres fonctionnalités à l'avenir.</span></span></p> -</div> - -<p>Chaque fichier que vous créez doit suivre le modèle défini dans le schéma contenu dans notre dépôt; vous pouvez voir la <a href="https://github.com/mdn/browser-compat-data/blob/master/schemas/compat-data-schema.md">description détaillée du schema ici</a>.</p> - -<h3 id="Structure_basique_des_données_de_compatibilité">Structure basique des données de compatibilité</h3> - -<p>Prenons un exemple. Les fichiers JSON de propriété CSS ont par exemple besoin de la structure de base suivante:</p> - -<pre class="brush: json notranslate">{ - "css": { - "properties": { - "border-width": { - "__compat": { - ... - } - } - } - } -}</pre> - -<p>Vous avez l'objet <code>css</code>, à l'intérieur duquel vous avez l'objet <code>properties</code>. A l'intérieur de l'objet <code>properties</code>, vous avez besoin d'un membre pour chacunes des fonctionnalités dont vous voulez définir les données. Chacun de ces membres a un membre <code>__compat</code>, à l'intérieur duquel les données vont.</p> - -<p>Les données ci-dessus se trouvent dans le fichier <a href="https://github.com/mdn/browser-compat-data/blob/master/css/properties/border-width.json">border-width.json</a> — <span id="result_box" lang="fr"><span>comparez les à la </span></span> <a href="/fr/docs/Web/CSS/border-width#Compatibilit%C3%A9_des_navigateurs">table de support de border-width disponible sur MDN</a>.</p> - -<p>D'autres types de fonctionnalités fonctionnent sur le même principe, mais avec des noms d'objets différents:</p> - -<ul> - <li>Les sélecteurs CSS fonctionnent essentiellement de la même manière que les proprités CSS, sauf que la structure de l'objet de plus haut niveau est <code>css.selectors</code> à la place de <code>css.properties</code>. Voir <a href="https://github.com/mdn/browser-compat-data/blob/master/css/selectors/cue.json">cue.json</a> pour un exemple.</li> - <li>Les données HTML fonctionnent essentiellement de la même manière, sauf que la structure de l'objet de plus haut niveau est <code>html.elements</code>. Voir <code>article.json</code> pour un exemple.</li> - <li>La structure d'objet de plus haut niveau pour les objets intégrés JS est <code>javascript.builtins</code>; voir <a href="https://github.com/mdn/browser-compat-data/blob/master/javascript/builtins/Array.json">Array.json</a> pour un exemple.</li> -</ul> - -<div> -<p>Dans les pages HTML, CSS, et JS, vous n'avez normalement besoin que d'une seule fonctionnalité. Les interfaces d'API fonctionnent légèrement différement — elles ont toujours de multiples sous caractéristiques (voir {{anch("Sub-features")}}, ci-dessous).</p> - -<h3 id="Structure_de_base_à_lintérieur_dune_fonctionnalité">Structure de base à l'intérieur d'une fonctionnalité</h3> - -<p>Dans un membre <code>__compat</code>, vous devez inclure les membres suivants:</p> - -<ul> - <li><code>mdn_url</code>: Contient l'URL de la page de référence pour cette fonctionnalité sur MDN. Notez qu'elle doit être écrit sans le répertoire de la locale, ex. <code>/docs/...</code> et non <code>/docs/en-US/...</code> (ou autre). Il est ajouté par une macro lorsque les données sont mises sur la page, à des fins de localisation.</li> - <li><code>support</code>: <span id="result_box" lang="fr"><span>Contient des membres indiquant les informations de support du navigateur pour cette fonctionnalité, dans les différents navigateurs que nous souhaitons indiquer.</span></span></li> - <li><code>status</code>: Contient des membres indiquant l'état de suivi des normes pour cette fonctionnalité.</li> -</ul> - -<p>Les noms des membres pour le navigateur sont définis dans le schéma (voir <a href="https://github.com/mdn/browser-compat-data/blob/master/schemas/compat-data-schema.md#browser-identifiers">Browser identifiers</a>). Vous devez utiliser la liste complète des identifiants actuellement définis. Si vous souhaitez ajouter un navigateur, parlez-nous en d'abord, <span id="result_box" lang="fr"><span>car cela pourrait avoir un impact important et ne devrait pas être fait sans une réflexion approfondie.</span></span></p> - -<p>Dans un fichier de base de compatibilité de navigateur, vous n'avez qu'à inclure "version_added" dans les membres de l'identifiant de navigateur (nous reviendrons plus tard sur {{anch("Advanced cases")}}). <span id="result_box" lang="fr"><span>Les différentes valeurs que vous pouvez inclure sont les suivantes:</span></span></p> - -<ul> - <li>Un numéro de version: Si vous connaissez la version exacte à partir de laquelle le navigateur supporte cette fonctionnalité, utilisez une chaîne de caractères représentant ce nombre, ex. "47".</li> - <li><code>true</code>: Si un navigateur supporte la fonctionnalité mais que vous ne connaissez pas la version exacte, utilisez la valeur <code>true</code>. Ceci équivaut à l'appel de la macro <code>\{{CompatVersionUnknown}}</code> dans les anciennes tables manuelles.</li> - <li><code>false</code>: Si un navigateur ne supporte pas la fonctionnalité, utilisez la valeur <code>false</code>. Ceci équivaut à l'appel de la macro <code>\{{CompatNo}}</code> dans les anciennes tables manuelles.</li> - <li><code>null</code>: Si vous ne savez pas si un navigateur supporte ou non une fonctionnalité, utilisez la valeur <code>null</code>. Ceci équivaut à l'appel de la macro <code>\{{CompatUnknown}}</code> dans les anciennes tables manuelles.</li> -</ul> - -<p>A l'intérieur du membre <code>status</code>, vous inclurez trois sous-membres:</p> - -<ul> - <li> "experimental": Ceci doit être mis à <code>true</code> si la fonctionnalité est <a href="/en-US/docs/MDN/Contribute/Guidelines/Conventions_definitions#Experimental">expérimentale</a>, ou <code>false</code> dans les autres cas.</li> - <li>"standard_track": Ceci doit être mis à <code>true</code> si la fonctionnalité est en cours de standardisation (le plus souvent W3C/WHATWG, mais il y a aussi d'autres efforts de standardisation tels que Khronos, TC39, etc.) ou <code>false</code> dans les autres cas.</li> - <li>"deprecated": Ceci doit être mis à <code>true</code> si la fonctionnalité est <a href="/en-US/docs/MDN/Contribute/Guidelines/Conventions_definitions#Deprecated_and_obsolete">dépréciée</a>, ou <code>false</code> dans les autres cas.</li> -</ul> - -<p>Les données pour la propriété <a href="/fr/docs/Web/CSS/border-width#Compatibilité des navigateurs">border-width</a> (voir aussi <a href="https://github.com/mdn/browser-compat-data/blob/master/css/properties/border-width.json">border-width.json</a>) sont présentées ci-dessous à titre d'exemple:</p> - -<pre class="brush: json notranslate">"__compat": { - "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/border-width", - "support": { - "chrome": { - "version_added": "1" - }, - "webview_android": { - "version_added": "2" - }, - "edge": { - "version_added": true - }, - "edge_mobile": { - "version_added": true - }, - "firefox": { - "version_added": "1" - }, - "firefox_android": { - "version_added": "1" - }, - "ie": { - "version_added": "4" - }, - "ie_mobile": { - "version_added": "6" - }, - "opera": { - "version_added": "3.5" - }, - "opera_android": { - "version_added": "11" - }, - "safari": { - "version_added": "1" - }, - "safari_ios": { - "version_added": "3" - } - }, - "status": { - "experimental": false, - "standard_track": true, - "deprecated": false - } -}</pre> - -<h4 id="Ajouter_une_description">Ajouter une description</h4> - -<p>Il y a un quatrième membre, optionnel, qui peut être placé à l'intérieur du membre __compat — <code>description</code>. Ceci peut être utilisé pour inclure une description, compréhensible par les humains, de cette fonctionnalité. Vous ne devez l'inclure que s'il est difficile de voir de quoi il s'agit en ne regardant que les données. Par exemple, il peut ne pas être évident qu'il s'agit d'un constructeur en ne regardant que la structure des données, vous pouvez donc ajouter une description comme:</p> - -<pre class="brush: json notranslate">{ - "api": { - "AbortController": { - "__compat": { - ... - }, - "AbortController": { - "__compat": { - "mdn_url": "https://developer.mozilla.org/docs/Web/API/AbortController/AbortController", - "description": "<code>AbortController()</code> constructor", - "support": { - ... - } - } - } - - ... etc. - } - } -}</pre> - -<h3 id="Sub-features">Sub-features</h3> - -<p>In a page where the compat table has more than one row, you'll need multiple subfeatures inside each feature to define the information for each row. This can happen, for example, when you've got the basic support for a feature stored in one row, but then the feature also has a new property or value type that was addded much later in the specification's life and is only supported in a couple of browsers.</p> - -<p>As an example, see the <a href="https://github.com/mdn/browser-compat-data/blob/master/css/properties/background-color.json">compat data</a> and <a href="/en-US/docs/Web/CSS/background-color">corresponding MDN page</a> for the <code>background-color</code> property. The basic support exists inside the <code>__compat</code> object as explained above, then you have an additional row for browsers' support for "alpha channel for hex values", which contains its own <code>__compat</code> object.</p> - -<pre class="brush: json notranslate">{ - "css": { - "properties": { - "background-color": { - "__compat": { - ... - }, - "alpha_ch_for_hex": { - "__compat": { - ... - }, - } - } - } - } -}</pre> - -<p>For an API, you've got the top two levels defined as <code>api.<em>name-of-the-interface</em></code>, then a top-level <code>__compat</code> section to define the overall browser compatibility of the interface, then a sub-feature for each of the methods, properties, and constructors contained inside the interface. The basic structure looks like this:</p> - -<pre class="brush: json notranslate">{ - "api": { - "VRDisplay": { - "__compat": { - ... - }, - "cancelAnimationFrame": { - "__compat": { - ... - } - }, - "capabilities": { - "__compat": { - ... - } - }, - - ... etc. - - } - } -}</pre> - -<p>See <a href="https://github.com/mdn/browser-compat-data/blob/master/api/VRDisplay.json">VRDisplay.json</a> for a full example.</p> -</div> - -<h2 id="Adding_data_Advanced_cases">Adding data: Advanced cases</h2> - -<p>There are some advanced features that you'll want to include in browser compat data. The aim of this section is to list the most common ones, providing an example of each to show how you can implement them in your own compat data.</p> - -<h3 id="Including_a_footnote">Including a footnote</h3> - -<p>Often compat tables will include footnotes related to certain entries that explain useful details or strange behavior that developers will find useful. As an example, the Chrome Android entry for {{domxref("VRDisplay.capabilities")}} (see also <a href="https://github.com/mdn/browser-compat-data/blob/master/api/VRDisplay.json">VRDisplay.json</a>) (at the time of writing) had a footnote "<span class="pl-s">Currently supported only by Google Daydream." To include this in the capabilities data, we added a "notes" submember inside the relevant "chrome_android" submember; it would look like this:</span></p> - -<pre class="brush: json notranslate">"chrome_android": { - "version_added": true, - "notes": "Currently supported only by Google Daydream." -}</pre> - -<h3 id="Including_a_vendor_prefix">Including a vendor prefix</h3> - -<p>If a feature is supported behind a vendor prefix in one or more browsers, you'll want to make that clear in the browser compat data. imagine you had a feature that was supported with a <code>-moz-</code> prefix in Firefox. To specify this in the compat data, you'd need to add a "prefix" submember inside the relevant "firefox" submember. It would look something like this:</p> - -<pre class="brush: json notranslate">"firefox": { - "version_added": true, - "prefix": "-moz-" -}</pre> - -<h3 id="Including_browser_preferences_or_flags">Including browser preferences or flags</h3> - -<p>Some features may be supported in a browser, but they are experimental and turned off by default. If a user wants to play with this feature they need to turn it on using a preference/flag.</p> - -<p>To represent this in the compat data, you need to add the "flags" submember inside the relevant browser identifier submember. The value of "flags" is an array of objects each of which contains of three members:</p> - -<ul> - <li>"type": The type of flag or pref this is. The most common value is "preference", which is set inside the browser (for example, using <code>about:config</code> in Firefox, or <code>chrome://flags</code> in Chrome), but you might also sometimes use a value of <span class="pl-s"><span class="pl-pds">"</span>compile_flag<span class="pl-pds">", which is a preference set when the browser build is compiled.</span></span></li> - <li>"name": This is a string representing the name of the preference that needs to have a value set on it. For example, "Enable Experimental Web Platform Features" is a preference that exists in Chrome, found in <code>chrome://flags</code>.</li> - <li>"value_to_set": This is a string representing the value that needs to be set on the preference, for example "true".</li> -</ul> - -<p>So to add a preference/flag to the Chrome support for a feature, you'd do something like this:</p> - -<pre class="brush: json notranslate">"chrome": { - "version_added": "50", - "flags": [ - { - "type": "preference", - "name": "Enable Experimental Web Platform Features", - "value_to_set": "true" - } - ] -},</pre> - -<p>If a feature is behind two or more flags, you can add additional objects to the "flags" array, like in this case, for example:</p> - -<pre class="brush: json notranslate">"firefox": { - "version_added": "57", - "flags": [ - { - "type": "preference", - "name": "dom.streams.enabled", - "value_to_set": "true" - }, - { - "type": "preference", - "name": "javascript.options.streams", - "value_to_set": "true" - } - ] -},</pre> - -<h3 id="Including_a_version_where_support_was_removed">Including a version where support was removed</h3> - -<p>Sometimes a feature will be added in a certain browser version, but then removed again as the feature is deprecated. This can be easily represented using the "version_removed" submember, which takes as its value a string representing the version number it was removed on. For example:</p> - -<pre class="brush: json notranslate">"firefox": { - "version_added": "35", - "version_removed": "47", -},</pre> - -<h3 id="Including_multiple_support_points_for_the_same_browser_entry">Including multiple support points for the same browser entry</h3> - -<p>Sometimes you'll want to add multiple support data points for the same browser inside the same feature.</p> - -<p>As an example, the {{cssxref("text-align-last")}} property (see also <a href="https://github.com/mdn/browser-compat-data/blob/master/css/properties/text-align-last.json">text-align-last.json</a>) was added to Chrome in version 35, supported behind a pref.</p> - -<p>The support mentioned above was then removed in version 47; also in version 47, support was added for <code>text-align-last</code> enabled by default.</p> - -<p>To include both of these data points, you can make the value of the "chrome" submember an array containing two support information objects, rather than just a single support information object:</p> - -<pre class="brush: json notranslate">"chrome": [ - { - "version_added": "47" - }, - { - "version_added": "35", - "version_removed": "47", - "flags": [ - { - "type": "preference", - "name": "Enable Experimental Web Platform Features", - "value_to_set": "true" - } - ] - } -],</pre> - -<div class="note"> -<p><strong>Note</strong>: You should put the most current or important support point first in the array — this makes the data easier to read for people who just want to scan it for the latest info.</p> -</div> - -<h3 id="Including_an_alternative_name">Including an alternative name</h3> - -<p>Occasionally browsers will support a feature under a different name to the name defined in its specification. This might be for example because a browser added experimental support for a feature early, and then the name changed before the spec stabilized.</p> - -<p>To include such a case in the browser compat data, you can include a support information point that specifies the alternative name inside an "alternative_name" member.</p> - -<div class="note"> -<p><strong>Note</strong>: The alternative name might not be an exact alias — it might have differing behaviour to the standard version.</p> -</div> - -<p>Let's look at an example. The {{cssxref("border-top-right-radius")}} property (see also <a href="https://github.com/mdn/browser-compat-data/blob/2a0cc3f6bb17aa4345441bed47a059dffd847793/css/properties/border-top-right-radius.json">border-top-right-radius.json</a>) was supported in Firefox:</p> - -<ul> - <li>From version 4 onwards with the standard name <code>border-top-right-radius</code>.</li> - <li>From version 49 onwards with a <code>-webkit-</code> prefix, for browser compatibility purposes.</li> - <li>From version 1 onwards with the alternative name <code>-moz-border-radius-topright</code>. Support for this alias was removed in version 12.</li> -</ul> - -<p>To represent this in the data, we used the following JSON:</p> - -<pre class="brush: json notranslate">"firefox": [ - { - "version_added": "4", - "notes": "Prior to Firefox 50.0, border styles of rounded corners were always rendered as if <code>border-style</code> was solid. This has been fixed in Firefox 50.0." - }, - { - "prefix": "-webkit-", - "version_added": "49", - "notes": "From Firefox 44 to 48, the <code>-webkit-</code> prefix was available with the <code>layout.css.prefixes.webkit</code> preference. Starting with Firefox 49, the preference defaults to <code>true</code>." - }, - { - "alternative_name": "-moz-border-radius-topright", - "version_added": "1", - "version_removed": "12" - } -],</pre> - -<h2 id="Pushing_a_change_back_to_the_main_repo">Pushing a change back to the main repo</h2> - -<p>Once you are finished with adding your compat data, you should first test it using the following commands:</p> - -<ul> - <li><code>npm run lint</code> — tests all the compat data to make sure the JSON is valid, and is written in the correct style, for example correct indentation, no missing commas, etc. It will print out a long list of file names and test results; if an error is found, the linter will throw an error on the file it is found in, giving you useful debugging info like line number, error message, etc.</li> - <li><code>npm run show-errors</code> — validates the JSON against the data schema, and highlights errors such as invalid browser version numbers being used.</li> - <li><code>npm run render 'dotted.path.to.feature'</code> — allows you to preview the markup for the compat table for a data file in the repo. As an example, <code>npm run render 'css.properties.background'</code> shows the table markup for the {{cssxref("background")}} property.</li> -</ul> - -<p>If it is looking OK, you then need to commit it and push it back up to your remote fork on GitHub. You can do this easily with terminal commands like this:</p> - -<pre class="brush: bash notranslate">git add . -git commit -m 'adding compat data for name-of-feature' -git push</pre> - -<p>Now go to your remote fork (i.e. <code>https://github.com/<em>your-username</em>/browser-compat-data</code>) and you should see information about your push at the top of the files list (under "Your recently pushed branches"). You can create a pull request (starting the process of pushing this to the main repo) by pressing the "Compare & pull request" button, then following the simple prompts on the subsequent screen.</p> - -<p>At this point, you just need to wait. A reviewer will review your pull request, and merge it with the main repo, OR request that you make changes. If changes are needed, make the changes and submit again until the PR is accepted.</p> - -<h2 id="Inserting_the_data_into_MDN_pages">Inserting the data into MDN pages</h2> - -<p>Once your new data has been included in the main repo, you can start dynamically generating browser compat tables based on that data on MDN pages using the \{{Compat}} macro. This takes a single parameter, the dot notation required to walk down the JSON data and find the object representing the feature you want to generate the compat table for.</p> - -<p>Above the macro call, to help other contributors finding their way, you should add a hidden text that is only visible in MDN contributors in edit mode:</p> - -<pre class="brush: html notranslate"><div class="hidden"> -<p>The compatibility table on this page is generated from structured data. -If you'd like to contribute to the data, please check out -<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> -and send us a pull request.</p> -</div></pre> - -<p>As an example, on the {{httpheader("Accept-Charset")}} HTTP header page, the macro call looks like this: \{{Compat("http.headers.Accept-Charset")}}. If you look at the <a href="https://github.com/mdn/browser-compat-data/blob/master/http/headers/accept-charset.json">accept-charset.json</a> file in the repo, you'll see how this is reflected in the JSON data.</p> - -<p>As another example, The compat table for the {{domxref("VRDisplay.capabilities")}} property is generated using \{{Compat("api.VRDisplay.capabilities")}}. The macro call generates the following table (and corresponding set of notes):</p> - -<hr> - -<p>{{Compat("api.VRDisplay.capabilities")}}</p> - -<div class="note"> -<p><strong>Note</strong>: The filenames often match the labels given to the interfaces inside the JSON structures, but it is not always the case. When the macro calls generate the tables, they walk through all the files until they find the relevant JSON to use, so the filenames are not critical. Saying that, you should always name them as intuitively as possible.</p> -</div> diff --git a/files/fr/mdn/structures/live_samples/index.html b/files/fr/mdn/structures/live_samples/index.html index 57f7054827..c297eac680 100644 --- a/files/fr/mdn/structures/live_samples/index.html +++ b/files/fr/mdn/structures/live_samples/index.html @@ -33,9 +33,8 @@ original_slug: MDN/Structures/Exemples_live <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> -<div class="note notecard"> - <p><b>Note :</b></p> - <p>Vous <strong>devez</strong> utiliser la macro pour présenter la sortie de l'échantillon en direct.</p> +<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> <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> @@ -69,8 +68,8 @@ original_slug: MDN/Structures/Exemples_live <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="notecard warning"> - <b>Attention :</b> 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>.) + <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> @@ -100,9 +99,8 @@ original_slug: MDN/Structures/Exemples_live <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> -<div class="note notecard"> - <p><b>Note :</b></p> - <p>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 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> <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> diff --git a/files/fr/mdn/structures/macros/commonly-used_macros/index.html b/files/fr/mdn/structures/macros/commonly-used_macros/index.html index 71fcc8672d..4aaeb81c61 100644 --- a/files/fr/mdn/structures/macros/commonly-used_macros/index.html +++ b/files/fr/mdn/structures/macros/commonly-used_macros/index.html @@ -5,7 +5,7 @@ translation_of: MDN/Structures/Macros/Commonly-used_macros --- <div>{{MDNSidebar}}</div> -<p><span class="seoSummary">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>.</span> 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> +<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> <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> @@ -13,7 +13,7 @@ translation_of: MDN/Structures/Macros/Commonly-used_macros <h3 id="Création_dun_lien_hypertexte_unique">Création d'un lien hypertexte unique</h3> -<p id="To_another_MDN_page_or_its_section_(anch_SectionOnPage_manch_Link_LinkItem_LinkItemDL)">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> +<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> <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: @@ -40,7 +40,7 @@ translation_of: MDN/Structures/Macros/Commonly-used_macros <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, <span class="plain"><span class="nowiki">\{{domxref("document.getElementsByName()")}}</span></span> results in {{ domxref("document.getElementsByName()") }} while <code>\{\{domxref("Node")\}\}</code> results in {{ domxref("Node") }}.</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> diff --git a/files/fr/mdn/structures/macros/index.html b/files/fr/mdn/structures/macros/index.html index 19060b70d8..448d6a4649 100644 --- a/files/fr/mdn/structures/macros/index.html +++ b/files/fr/mdn/structures/macros/index.html @@ -3,19 +3,20 @@ title: Macros slug: MDN/Structures/Macros translation_of: MDN/Structures/Macros --- -<div>{{MDNSidebar}}</div><p><span class="seoSummary">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.</span></p> +<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> <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> <h2 id="Comment_les_macros_sont-elle_mises_en_œuvre">Comment les macros sont-elle mises en œuvre</h2> -<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 <a>Node.js</a>. 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> +<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> <h2 id="Utiliser_une_macro_dans_le_contenu">Utiliser une macro dans le contenu</h2> <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> -<pre class="notranslate">\{{macroname(parameter-list)}}</pre> +<pre>\{{macroname(parameter-list)}}</pre> <p>Quelques notes sur les appels de macro:</p> @@ -30,7 +31,7 @@ translation_of: MDN/Structures/Macros <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> <div class="note"> -<p><strong>Remarque:. </strong> Vous pouvez forcer toutes les macros d'une page à être réévalué avec un shift-reload.</p> +<p><strong>Note :</strong> Vous pouvez forcer toutes les macros d'une page à être réévalué avec un shift-reload.</p> </div> <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> diff --git a/files/fr/mdn/tools/kumascript/index.html b/files/fr/mdn/tools/kumascript/index.html deleted file mode 100644 index 9ded41a11a..0000000000 --- a/files/fr/mdn/tools/kumascript/index.html +++ /dev/null @@ -1,499 +0,0 @@ ---- -title: KumaScript -slug: MDN/Tools/KumaScript -tags: - - Guide - - Kuma - - KumaScript - - MDN - - MDN Meta -translation_of: MDN/Tools/KumaScript ---- -<div>{{MDNSidebar}}</div> - -<div></div> - -<p><span class="seoSummary">Sur la plate-forme <a href="/en-US/docs/MDN/Kuma">Kuma</a> qui propulse MDN, le système de modèles pour automatiser certains aspects du contenu sur le wiki est appelé <a class="link-https" href="https://github.com/mozilla/kumascript" title="https://github.com/mozilla/kumascript">KumaScript</a>. KumaScript repose sur du JavaScript côté serveur implanté à l'aide de <a class="external" href="http://nodejs.org/" title="http://nodejs.org/">Node.js</a>.</span> Cet article vous fournit des informations basiques sur l'utilisation de KumaScript.</p> - -<p>Pour un aperçu détaillé et des questions et réponses sur KumaScript, visitez la <a href="https://vreplay.mozilla.com/replay/showRecordDetails.html?sortBy=date&viewCount=1&currentPage=1&groupBy=combo&roomFilter=&usernameFilter=&searchFilter=&usernameFullFilter=&myManager=-1&adminManager=0&webCast=0&command=&recId=1082&auxMessage=&auxMessage1=&lang=en&langChanged=&tenantFilter=&securityTab=">discussion Fireside KumaScript</a> de l'équipe de développement de MDN. KumaScript a remplacé DekiScript, qui était le langage modèle pour MindTouch, la précédente plate-forme utilisée par MDN.</p> - -<h3 id="Quest_KumaScript">Qu'est KumaScript ?</h3> - -<ul> - <li>Un moyen de réutiliser et de localiser du contenu qui apparaît répétitivement sur plusieurs documents (par exemple les tableaux de compatibilité, les sections de navigations, les bannières d'avertissement, etc.)</li> - <li>Un moyen de construire des documents à partir de contenu tiré d'autres documents.</li> - <li>Un moyen de rechercher et d'inclure du contenu d'autres sites web et services (par exemple Bugzilla).</li> -</ul> - -<h3 id="Ce_que_KumaScript_nest_pas">Ce que KumaScript n'est pas</h3> - -<ul> - <li>KumaScript ne supporte pas le scriptage interactif du même genre que celui que peuvent accepter les soumissions de formulaires.</li> - <li>KumaScript n'a pas accès à une base de données, à des fichiers, ou à tout autre moyen de stocker de l'information de manière persistente.</li> - <li>KumaScript ne supporte pas la personnalisation de site en fonction de l'utilisateur couramment connecté.</li> - <li>KumaScript n'a pas accès aux informations de l'utilisateur, seulement au contenu et aux métadonnées de la page en train d'être visitée.</li> -</ul> - -<h2 id="Les_bases">Les bases</h2> - -<p>KumaScript fonctionne en permettant aux <a href="/en-US/docs/MDN/Community/Roles">utilisateurs MDN de confiance</a> d'écrire des <a class="link-https" href="https://github.com/visionmedia/ejs" title="https://github.com/visionmedia/ejs">modèles JavaScript embarqués</a>. Ces modèles peuvent être invoqués dans le contenu du document par tout auteur MDN via l'usage de macros.</p> - -<p>Un script en KumaScript est un <em>modèle</em>, et chaque modèle est un fichier du dépôt Github. Un <a class="link-https" href="/en-US/docs/Template:hello" title="/en-US/docs/Template:hello">modèle</a> ressemble à ceci :</p> - -<pre class="notranslate"><% for (var i = 0; i < $0; i++) { %> -Hello #<%= i %> -<% } %></pre> - -<p>Invoquer un modèle se fait avec un <em>macro</em>, pouvant être utilisé à tout endroit dans toute page wiki. Un <a class="link-https" href="/en-US/docs/KumaTests/hello_test?raw=1" title="/en-US/docs/KumaTests/hello_test?raw=1">macro</a> ressemble à ceci :</p> - -<pre class="notranslate">\{{ hello("3") }}</pre> - -<p>La <a class="link-https" href="/en-US/docs/KumaTests/hello_test" title="/en-US/docs/KumaTests/hello_test">sortie du macro</a> ressemble à :</p> - -<pre class="notranslate">Hello #0 -Hello #1 -Hello #2</pre> - -<h3 id="Syntaxe_des_macro">Syntaxe des macro</h3> - -<p>Les modèles KumaScript sont invoqués dans le contenu d'un document avec des macros comme ceci :</p> - -<pre class="notranslate">\{{ templateName("arg0", "arg1", ..., "argN") }} -</pre> - -<p>La syntaxe des macros consiste en quatre règles :</p> - -<ul> - <li>Les macros commencent avec <code>\\{{</code> et se terminent avec <code>}}</code>.</li> - <li>La première partie du macro est le nom du modèle invoqué. La valeur en bas-de-casse de ce nom doit correspondre à un nom de fichier en bas-de-casse sur le dépôt des macros de KumaScript.</li> - <li>Un modèle peut accepter des paramètres, et cette lsite de paramètres débute te se termine avec des parenthèses.</li> - <li>Tout les paramètres non numériques doivent être exprimés entre guillemets. Seuls les guillemets peuvent être exprimés sans guillemets.</li> -</ul> - -<h4 id="Utiliser_JSON_comme_paramètre_de_macro">Utiliser JSON comme paramètre de macro</h4> - -<p>En tant que fonctionnalité semi-expérimentale (il n'est pas garantie qu'elle fonctionne), vous pouvez fournir un objet JSON pour le premier paramètre uniquement, par exemple :</p> - -<pre class="notranslate">\\{{ templateName({ "Alpha":"one", "Beta":["a","b","c"], "Foo":"http:\/\/mozilla.org\/" }) }} -</pre> - -<p>Les données de ce macro sont disponibles dans le code du modèle en tant qu'objet à l'argument <code>$0</code> (par exemple <code>$0.Alpha</code>, <code>$0.Beta</code>, <code>$0.Foo</code>). Celà vous permet aussi d'exprimer des structures de données complexes dans les paramètres des macros qu'il serait difficile voire impossible d'exprimer comme une simple liste de paramètres.</p> - -<p>Notee que ce style de paramètre est très strict — il doit correspondre exactement à la <a href="http://json.org/" title="http://json.org/">syntaxe JSON</a>, qui a quelques contraintes sur l'échappement des caractères qu'il est aisé d'oublier (par exemple que toutes les barres obliques culbutées doivent être échapées). Si vous avez un doute, <a href="http://jsonlint.com/" title="http://jsonlint.com/">essayer de faire passer votre JSON dans un validateur</a>.</p> - -<h4 id="Comment_écrire_dans_du_texte">Comment écrire "\\{{" dans du texte</h4> - -<p>Bien que la séquence de caractères "<code>\\{{</code>" soit utilisée pour démarrer un macro, elle peut causer des problèmes si vous voulez seulement écrire "<code>\\{{</code>" et "<code>}}</code>" sur une page. Celà produira alors probablement des messages <code>DocumentParsingError</code>.</p> - -<p>Dans ce cas, vous pouvez échapper la barre oblique culbutée avec une seconde barre, tel que : <code>\\\{{</code></p> - -<h3 id="Syntaxe_des_modèles">Syntaxe des modèles</h3> - -<p>Each KumaScript template is kept in a separate wiki page. Creating and editing these pages requires an elevated privilege, which MDN admins can grant to trusted editors.</p> - -<p>KumaScript templates are processed by an <a class="link-https" href="https://github.com/visionmedia/ejs" title="https://github.com/visionmedia/ejs">embedded JavaScript template engine</a> with a few simple rules:</p> - -<ul> - <li>Within a template, the parameters passed in from the macro are available as the variables <code>$0</code>, <code>$1</code>, <code>$2</code>, and so on. The entire list of parameters is also available in a template as the variable <code>arguments</code>.</li> - <li>Most text is treated as output and included in the output stream.</li> - <li>JavaScript variables and expressions can be inserted into the output stream with these blocks: - <ul> - <li><code><%= expr %></code> — the value of a JavaScript expression is escaped for HTML before being included in output (e.g., characters like <code><</code> and <code>></code> are turned into <code>&lt;</code> and <code>&gt;</code>).</li> - <li><code><%- expr %></code> — the value of a JavaScript expression is included in output without any escaping. (Use this if you want to dynamically build markup or use the results of another template that may include markup.)</li> - <li>It is an error to include semicolons inside these blocks.</li> - </ul> - </li> - <li>Anything inside a <code><% %></code> block is interpreted as JavaScript. This can include loops, conditionals, etc.</li> - <li>Nothing inside a <code><% %></code> block can ever contribute to the output stream. But, you can transition from JS mode to output mode using <code><% %></code>—for example: - <pre class="notranslate"><% for (var i = 0; i < $0; i++) { %> -Hello #<%= i %> -<% } %> -</pre> - - <p>Note how the JavaScript code is contained in <code><% ... %></code>, and output happens in the space between <code>%> ... <%</code>. The <code>for</code> loop in JS can begin with one <code><% %></code> block, transition to output mode, and finish up in a second <code><% %></code> JS block.</p> - </li> - <li>For more details on EJS syntax, <a class="link-https" href="https://github.com/visionmedia/ejs" title="https://github.com/visionmedia/ejs">check out the upstream module documentation</a>.</li> -</ul> - -<h3 id="Tips">Tips</h3> - -<h4 id="Dates_and_times">Dates and times</h4> - -<p>It's important to note that the standard JavaScript {{jsxref("Date")}} constructor is overridden by the KumaScript <code>Date</code> interface. You can create a JavaScript <code>Date</code> by calling the KumaScript <code>date.now()</code> or <code>date.parse()</code> function.</p> - -<h2 id="Fonctionnalités_avancées">Fonctionnalités avancées</h2> - -<p>Beyond the basics, the KumaScript system offers some advanced features.</p> - -<h3 id="Variables_denvironnement">Variables d'environnement</h3> - -<p>When the wiki makes a call to the KumaScript service, <a class="link-https" href="https://github.com/mozilla/kuma/blob/master/apps/wiki/kumascript.py#L130" title="https://github.com/mozilla/kuma/blob/master/apps/wiki/views.py#L537">it passes along some context on the current document</a> that KumaScript makes available to templates as variables:</p> - -<dl> - <dt><code>env.path</code></dt> - <dd>The path to the current wiki document</dd> - <dt><code>env.url</code></dt> - <dd>The full URL to the current wiki document</dd> - <dt><code>env.id</code></dt> - <dd>A short, unique ID for the current wiki document</dd> - <dt><code>env.files</code></dt> - <dd>An array of the files attached to the current wiki document; each object in the array is as described under {{ anch("File objects") }} below</dd> - <dt><code>env.review_tags</code></dt> - <dd>An array of the review tags on the article ("technical", "editorial", etc.)</dd> - <dt><code>env.locale</code></dt> - <dd>The locale of the current wiki document</dd> - <dt><code>env.title</code></dt> - <dd>The title of the current wiki document</dd> - <dt><code>env.slug</code></dt> - <dd>The URL slug of the current wiki document</dd> - <dt><code>env.tags</code></dt> - <dd>An array list of tag names for the current wiki document</dd> - <dt><code>env.modified</code></dt> - <dd>Last modified timestamp for the current wiki document</dd> - <dt><code>env.cache_control</code></dt> - <dd><code>Cache-Control</code> header sent in the request for the current wiki document, useful in deciding whether to invalidate caches</dd> -</dl> - -<h4 id="File_objects">File objects</h4> - -<p>Each file object has the following fields:</p> - -<dl> - <dt><code>title</code></dt> - <dd>The attachment's title</dd> - <dt><code>description</code></dt> - <dd>A textual description of the current revision of the file</dd> - <dt><code>filename</code></dt> - <dd>The file's name</dd> - <dt><code>size</code></dt> - <dd>The size of the file in bytes</dd> - <dt><code>author</code></dt> - <dd>The username of the person who uploaded the file</dd> - <dt><code>mime</code></dt> - <dd>The MIME type of the file</dd> - <dt><code>url</code></dt> - <dd>The URL at which the file can be found</dd> -</dl> - -<h4 id="Working_with_tag_lists">Working with tag lists</h4> - -<p>The <code>env.tags</code> and <code>env.review_tags</code> variables return arrays of tags. You can work with these in many ways, of course, but here are a couple of suggestions.</p> - -<h5 id="Looking_to_see_if_a_specific_tag_is_set">Looking to see if a specific tag is set</h5> - -<p>You can look to see if a specific tag exists on a page like this:</p> - -<pre class="brush: js notranslate">if (env.tags.indexOf("tag") != −1) { - // The page has the tag "tag" -} -</pre> - -<h5 id="Iterating_over_all_the_tags_on_a_page">Iterating over all the tags on a page</h5> - -<p>You can also iterate over all the tags on a page, like this:</p> - -<pre class="brush: js notranslate">env.tag.forEach(function(tag) { - // do whatever you need to do, such as: - if (tag.indexOf("a") == 0) { - // this tag starts with "a" - woohoo! - } -});</pre> - -<h3 id="APIs_and_Modules">APIs and Modules</h3> - -<p>KumaScript offers some built-in utility APIs, as well as the ability to define new APIs in modules editable as wiki documents.</p> - -<h4 id="Built-in_methods">Built-in methods</h4> - -<p>This manually-maintained documentation is likely to fall out of date with the code. With that in mind, <a class="link-https" href="https://github.com/mozilla/kumascript/blob/master/lib/kumascript/api.js#L175" title="https://github.com/mozilla/kumascript/blob/master/lib/kumascript/api.js#L208">you can always check out the latest state of built-in APIs in the KumaScript source</a>. But here is a selection of useful methods exposed to templates:</p> - -<dl> - <dt><code>md5(string)</code></dt> - <dd>Returns an MD5 hex digest of the given string.</dd> - <dt><code>template("name", ["arg0", "arg1", ..., "argN"])</code></dt> - <dd>Executes and returns the result of the named template with the given list of parameters.</dd> - <dd>Example: <code><%- template("warning", ["foo", "bar", "baz"]) %></code>.</dd> - <dd>Example using the <code>domxref</code> macro: <code><%- template("domxref", ["Event.bubbles", "bubbles"]) %></code>.</dd> - <dd>This is a JavaScript function. So, if one of the parameters is an arg variable like $2, do not put it in quotes. Like this: <code><%- template("warning", [$1, $2, "baz"]) %></code>. If you need to call another template from within a block of code, do not use <code><%</code> ... <code>%></code>. Example: <code>myvar = "<li>" + template("LXRSearch", ["ident", "i", $1]) + "</li>";</code></dd> - <dt><code>require(name)</code></dt> - <dd>Loads another template as a module; any output is ignored. Anything assigned to <code>module.exports</code> in the template is returned.</dd> - <dd>Used in templates like so: <code><% var my_module = require('MyModule'); %></code>.</dd> - <dt><code>cacheFn(key, timeout, function_to_cache)</code></dt> - <dd>Using the given key and cache entry lifetime, cache the results of the given function. Honors the value of <code>env.cache_control</code> to invalidate cache on <code>no-cache</code>, which can be sent by a logged-in user hitting shift-refresh.</dd> - <dt><code>request</code></dt> - <dd>Access to <a class="link-https" href="https://github.com/mikeal/request" title="https://github.com/mikeal/request"><code>mikeal/request</code></a>, a library for making HTTP requests. Using this module in KumaScript templates is not yet very friendly, so you may want to wrap usage in module APIs that simplify things.</dd> - <dt><code>log.debug(string)</code></dt> - <dd>Outputs a debug message into the script log on the page (i.e. the big red box that usually displays errors).</dd> -</dl> - -<h4 id="Built-in_API_modules">Built-in API modules</h4> - -<p>There's only one API built in at the moment, in the <code>kuma</code> namespace. You can see the most up to date list of methods under <code>kuma</code> from <a href="https://github.com/mozilla/kumascript/blob/master/lib/kumascript/api.js#L74">the KumaScript source code</a>, but here are a few:</p> - -<dl> - <dt><code>kuma.inspect(object)</code></dt> - <dd>Renders any JS object as a string, handy for use with <code>log.debug()</code>. See also: <a href="http://nodejs.org/api/util.html#util_util_inspect_object_options">node.js <code>util.inspect()</code></a>.</dd> -</dl> - -<dl> - <dt><code>kuma.htmlEscape(string)</code></dt> - <dd>Escapes the characters <code>&, <, >, "</code> to <code>&amp, &lt;, &gt;, &quot;</code>, respectively.</dd> - <dt><code>kuma.url</code></dt> - <dd>See also: <a href="http://nodejs.org/api/url.html">node.js <code>url</code> module</a>.</dd> - <dt><code>kuma.fetchFeed(url)</code></dt> - <dd>Fetch an RSS feed and parse it into a JS object. See also: <a href="https://developer.mozilla.org/en-US/docs/Template:InsertFeedLinkList"><code>Template:InsertFeedLinkList</code></a></dd> -</dl> - -<h4 id="Creating_modules">Creating modules</h4> - -<p>Using the built-in <code>require()</code> method, you can load a template as a module to share common variables and methods between templates. A module can be defined in a template like this:</p> - -<pre class="notranslate"><% -module.exports = { - add: function (a, b) { - return a + b; - } -} -%> -</pre> - -<p>Assuming this template is saved as <code>/en-US/docs/Template:MathLib</code>, you can use it in another template like so:</p> - -<pre class="notranslate"><% -var math_lib = require("MathLib"); -%> -The result of 2 + 2 = <%= math_lib.add(2, 2) %> -</pre> - -<p>And, the output of this template will be:</p> - -<pre class="notranslate">The result of 2 + 2 = 4 -</pre> - -<h4 id="Auto-loaded_modules">Auto-loaded modules</h4> - -<p>There are a set of modules editable as wiki templates that are automatically loaded and made available to every template. This set is defined in the configuration file for the KumaScript service - any changes to this requires an IT bug to edit configuration and a restart of the service.</p> - -<p>For the most part, these attempt to provide stand-ins for legacy DekiScript features to ease template migration. But, going forward, these can be used to share common variables and methods between templates:</p> - -<ul> - <li><code>mdn.*</code> - <a class="link-https" href="/en-US/docs/Template:MDN:Common" title="/en-US/docs/Template:MDN:Common">Template:MDN:Common</a></li> - <li><code>Date.*</code> - <a class="link-https" href="/en-US/docs/Template:DekiScript:Date" title="/en-US/docs/Template:DekiScript:Date">Template:DekiScript:Date</a></li> - <li><code>Page.*</code> - <a class="link-https" href="/en-US/docs/Template:DekiScript:Page" title="/en-US/docs/Template:DekiScript:Page">Template:DekiScript:Page</a></li> - <li><code>String.*</code> - <a class="link-https" href="/en-US/docs/Template:DekiScript:String" title="/en-US/docs/Template:DekiScript:String">Template:DekiScript:String</a></li> - <li><code>Uri.*</code> - <a class="link-https" href="/en-US/docs/Template:DekiScript:Uri" title="/en-US/docs/Template:DekiScript:Uri">Template:DekiScript:Uri</a></li> - <li><code>Web.*</code> - <a class="link-https" href="/en-US/docs/Template:DekiScript:Web" title="/en-US/docs/Template:DekiScript:Web">Template:DekiScript:Web</a></li> - <li><code>Wiki.*</code> - <a class="link-https" href="/en-US/docs/Template:DekiScript:Wiki" title="/en-US/docs/Template:DekiScript:Wiki">Template:DekiScript:Wiki</a></li> -</ul> - -<p><strong>Note:</strong> You might notice that the DekiScript modules use a built-in method named <code>buildAPI()</code>, like so:</p> - -<pre class="notranslate"><% module.exports = buildAPI({ - StartsWith: function (str, sub_str) { - return (''+str).indexOf(sub_str) === 0; - } -}); %> -</pre> - -<p>The reason for this is because DekiScript is case-insensitive when it comes to references to API methods, whereas JavaScript is strict about uppercase and lowercase in references. So, <code>buildAPI()</code> is a hack to try to cover common case variations in DekiScript calls found in legacy templates.</p> - -<div class="note"> -<p>With that in mind, please do not use <code>buildAPI()</code> in new modules.</p> -</div> - -<h2 id="Tips_and_caveats">Tips and caveats</h2> - -<h3 id="Debugging">Debugging</h3> - -<p>A useful tip when debugging. You can use the <code>log.debug()</code> method to output text to the scripting messages area at the top of the page that's running your template. Note that you need to be really sure to remove these when you're done debugging, as they're visible to all users! To use it, just do something like this:</p> - -<pre class="notranslate"><%- log.debug("Some text goes here"); %> -</pre> - -<p>You can, of course, create more complex output using script code if it's helpful.</p> - -<h3 id="Caching">Caching</h3> - -<p>KumaScript templates are heavily cached to improve performance. For the most part, this works great to serve up content that doesn't change very often. But, as a logged-in user, you have two options to force a page to be regenerated, in case you notice issues with scripting:</p> - -<ul> - <li>Hit Refresh in your browser. This causes KumaScript to invalidate its cache for the content on the current page by issuing a request with a <code>Cache-Control: max-age=0</code> header.</li> - <li>Hit Shift-Refresh in your browser. This causes KumaScript to invalidate cache for the current page, as well as for any templates or content used by the current page by issuing a request with a <code>Cache-Control: no-cache</code> header.</li> -</ul> - -<h3 id="Using_search_keywords_to_open_template_pages">Using search keywords to open template pages</h3> - -<p>When using templates, it's common to open the template's code in a browser window to review the comments at the top, which are used to document the template, its parameters, and how to use it properly. To quickly access templates, you can create a Firefox <a href="http://kb.mozillazine.org/Using_keyword_searches">search keyword</a>, which gives you a shortcut you can type in the URL box to get to a template more easily.</p> - -<p>To create a search keyword, open the bookmarks window by choosing "Show all bookmarks" in the Bookmarks menu, or by pressing <kbd>Control</kbd>-<kbd>Shift</kbd>-<kbd>B</kbd> (<kbd>Command</kbd>-<kbd>Shift</kbd>-<kbd>B</kbd> on Mac). Then from the utility ("Gear") menu in the Library window that appears, choose "New Bookmark...".</p> - -<p>This causes the bookmark editing dialog to appear. Fill that out as follows:</p> - -<dl> - <dt>Name</dt> - <dd>A suitable name for your search keyword; "Open MDN Template" is a good one.</dd> - <dt>Location</dt> - <dd><kbd>https://developer.mozilla.org/en-US/docs/Template:%s</kbd></dd> - <dt>Tags {{optional_inline}}</dt> - <dd>A list of tags used to organize your bookmarks; these are entirely optional and what (if any) tags you use is up to you.</dd> - <dt>Keyword</dt> - <dd>The shortcut text you wish to use to access the template. Ideally, this should be something short and quick to type, such as simply "t" or "mdnt".</dd> - <dt>Description {{optional_inline}}</dt> - <dd>A suitable description explaining what the search keyword does.</dd> -</dl> - -<p>The resulting dialog looks something like this:</p> - -<p><img alt="The bookmark editor box showing how a search keyword to open templates looks." src="https://mdn.mozillademos.org/files/12620/Open-MDN-Template-Window.png" style="border-style: solid; border-width: 1px; height: 279px; width: 426px;"></p> - -<p>Then click the "Add" button to save your new search keyword. From then on, typing your keyword, then a space, then the name of a macro will open that macro in your current tab. So if you used "t" as the keyword, typing <kbd>t ListSubpages</kbd> will show you the page at {{TemplateLink("ListSubpages")}}.</p> - -<h2 id="Cookbook">Cookbook</h2> - -<p>This section will list examples of common patterns for templates used on MDN, including samples of legacy DekiScript templates and their new KumaScript equivalents.</p> - -<h3 id="Force_templates_used_on_a_page_to_be_reloaded">Force templates used on a page to be reloaded</h3> - -<p>It bears repeating: To force templates used on a page to be reloaded after editing, hit Shift-Reload. Just using Reload by itself will cause the page contents to be regenerated, but using cached templates and included content. A Shift-Reload is necessary to invalidate caches beyond just the content of the page itself.</p> - -<h3 id="Recovering_from_Unknown_Error">Recovering from "Unknown Error"</h3> - -<p>Sometimes, you'll see a scripting message like this when you load a page:</p> - -<pre class="notranslate">Kumascript service failed unexpectedly: <class 'httplib.BadStatusLine'></pre> - -<p>This is probably a temporary failure of the KumaScript service. If you Refresh the page, the error may disappear. If that doesn't work, try a Shift-Refresh. If, after a few tries, the error persists - <a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=mozilla.org&format=itrequest">file an IT bug</a> for Mozilla Developer Network to ask for an investigation.</p> - -<h3 id="Broken_wiki.languages_macros">Broken wiki.languages() macros</h3> - -<p>On some pages, you'll see a scripting error like this:</p> - -<pre class="notranslate">Syntax error at line 436, column 461: Expected valid JSON object as the parameter of the preceding macro but... -</pre> - -<p>If you edit the page, you'll probably see a macro like this at the bottom of the page:</p> - -<pre class="notranslate">\{{ wiki.languages({ "zh-tw": "zh_tw/Core_JavaScript_1.5_教學/JavaScript_概要", ... }) }} -</pre> - -<p>To fix the problem, just delete the macro. Or, replace the curly braces on either side with HTML comments <code><!-- --></code> to preserve the information, like so:</p> - -<pre class="notranslate"><!-- wiki.languages({ "zh-tw": "zh_tw/Core_JavaScript_1.5_教學/JavaScript_概要", ... }) --> -</pre> - -<p>Because Kuma supports localization differently, these macros aren't actually needed any more. But, they've been left intact in case we need to revisit the relationships between localized pages. Unfortunately, it seems like migration has failed to convert some of them properly.</p> - -<h3 id="Finding_the_Current_Pages_Language">Finding the Current Page's Language</h3> - -<p>In KumaScript, the locale of the current document is exposed as an environment variable:</p> - -<pre class="notranslate">var lang = env.locale; -</pre> - -<p>The <code>env.locale</code> variable should be reliable and defined for every document.</p> - -<h3 id="Reading_the_contents_of_a_page_attachment">Reading the contents of a page attachment</h3> - -<p>You can read the contents of an attached file by using the <code>mdn.getFileContent()</code> function, like this:</p> - -<pre class="notranslate"><% - var contents = mdn.getFileContent(fileUrl); - ... do stuff with the contents ... -%> -</pre> - -<p>or</p> - -<pre class="notranslate"><%-mdn.getFileContent(fileObject)%> -</pre> - -<p>In other words, you may specify either the URL of the file to read or as a file object. The file objects for a page can be accessed through the array <code>env.files</code>. So, for example, to embed the contents of the first file attached to the article, you can do this:</p> - -<pre class="notranslate"><%-mdn.getFileContent(env.files[0])%> -</pre> - -<div class="note"><strong>Note:</strong> You probably don't want to try to embed the contents of a non-text file this way, as the raw contents would be injected as text. This is meant to let you access the contents of text attachments.</div> - -<p>If the file isn't found, an empty string is returned. There is currently no way to tell the difference between an empty file and a nonexistent one. But if you're putting empty files on the wiki, you're doing it wrong.</p> - -<h3 id="Localizing_template_content">Localizing template content</h3> - -<p>Templates cannot be translated like other wiki pages. KumaScript only looks for templates in the en-US locale (i.e., <code>/en-US/docs/Template:{name}</code>), and does not look for templates that have been translated to another locale (i.e., <code>/fr/docs/Template:{name}</code>).</p> - -<p>So the main way to output content tailored to the current document locale is to pivot on the value of <code>env.locale</code>. There are many ways to do this, but a few patterns are common in the conversion of legacy DekiScript templates:</p> - -<h4 id="Ifelse_blocks_in_KumaScript">If/else blocks in KumaScript</h4> - -<p>The KumaScript equivalent of this can be achieved with simple if/else blocks, like so:</p> - -<pre class="notranslate"><% if ("fr" == env.locale) { %> -<%- template("CSSRef") %> « <a title="Référence_CSS/Extensions_Mozilla" href="/fr/docs/Référence_CSS/Extensions_Mozilla">Référence CSS:Extensions Mozilla</a> -<% } else if ("ja" == env.locale) { %> -<%- template("CSSRef") %> « <a title="CSS_Reference/Mozilla_Extensions" href="/ja/docs/CSS_Reference/Mozilla_Extensions">CSS リファレンス:Mozilla 拡張仕様</a> -<% } else if ("pl" == env.locale) { %> -<%- template("CSSRef") %> « <a title="Dokumentacja_CSS/Rozszerzenia_Mozilli" href="/pl/docs/Dokumentacja_CSS/Rozszerzenia_Mozilli">Dokumentacja CSS:Rozszerzenia Mozilli</a> -<% } else if ("de" == env.locale) { %> -<%- template("CSSRef") %> « <a title="CSS_Referenz/Mozilla_CSS_Erweiterungen" href="/de/docs/CSS_Referenz/Mozilla_CSS_Erweiterungen">CSS Referenz: Mozilla Erweiterungen</a> -<% } else { %> -<%- template("CSSRef") %> « <a title="CSS_Reference/Mozilla_Extensions" href="/en-US/docs/CSS_Reference/Mozilla_Extensions">CSS Reference:Mozilla Extensions</a> -<% } %> -</pre> - -<p>Depending on what text editor is your favorite, you may be able to copy & paste from the browser-based editor and attack this pattern with a series of search/replace regexes to get you most of the way there.</p> - -<p>My favorite editor is MacVim, and a series of regexes like this does the bulk of the work with just a little manual clean up following:</p> - -<pre class="notranslate">%s#<span#^M<span#g -%s#<span lang="\(.*\)" .*>#<% } else if ("\1" == env.locale) { %>#g -%s#<span class="script">template.Cssxref(#<%- template("Cssxref", [# -%s#)</span> </span>#]) %> -</pre> - -<p>Your mileage may vary, and patterns change slightly from template to template. That's why the migration script was unable to just handle this automatically, after all.</p> - -<h4 id="String_variables_and_switch">String variables and switch</h4> - -<p>Rather than switch between full chunks of markup, you can define a set of strings, switch them based on locale, and then use them to fill in placeholders in a single chunk of markup:</p> - -<pre class="notranslate"><% -var s_title = 'Firefox for Developers'; -switch (env.locale) { - case 'de': - s_title = "Firefox für Entwickler"; - break; - case 'fr': - s_title = "Firefox pour les développeurs"; - break; - case 'es': - s_title = "Firefox para desarrolladores"; - break; -}; -%> -<span class="title"><%= s_title %></span> -</pre> - -<h4 id="Use_mdn.localString">Use <code>mdn.localString()</code></h4> - -<p>A recent addition to the <code>Template:MDN:Common</code> module is <code>mdn.localString()</code>, used like this:</p> - -<pre class="notranslate"><% -var s_title = mdn.localString({ - "en-US": "Firefox for Developers", - "de": "Firefox für Entwickler", - "es": "Firefox para desarrolladores" -}); -%> -<span class="title"><%= s_title %></span> -</pre> - -<p>This is more concise than the switch statement, and may be a better choice where a single string is concerned. However, if many strings need to be translated (e.g., as in <a class="link-https" href="/en-US/docs/Template:CSSRef" title="/en-US/docs/Template:CSSRef">CSSRef</a>), a switch statement might help keep all the strings grouped by locale and more easily translated that way.</p> - -<p>When the object does not have the appropriate locale, the value of "en-US" is used as the initial value.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Project:Getting_started_with_Kuma" title="Getting started with Kuma">Getting started with Kuma</a></li> - <li><a href="/en-US/docs/Project:KumaScript_reference" title="Project:en/KumaScript reference">KumaScript reference</a></li> - <li><a class="link-https" href="https://wiki.mozilla.org/MDN/Kuma" title="https://wiki.mozilla.org/MDN/Kuma">Kuma wiki</a></li> -</ul> diff --git a/files/fr/mdn/yari/index.html b/files/fr/mdn/yari/index.html index 39766f5c18..b75fe1b8ef 100644 --- a/files/fr/mdn/yari/index.html +++ b/files/fr/mdn/yari/index.html @@ -10,7 +10,7 @@ original_slug: MDN/Kuma --- <div>{{MDNSidebar}}{{IncludeSubnav("/fr/docs/MDN")}}</div> -<p class="summary">Kuma est le code Django qui alimente le MDN Web Docs.</p> +<p>Kuma est le code Django qui alimente le MDN Web Docs.</p> <p>{{SubpagesWithSummaries}}</p> |