diff options
Diffstat (limited to 'files/fr/mdn/guidelines')
13 files changed, 45 insertions, 430 deletions
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> |