From f6f0c1509a262eb9a5e7bd5d1a84a7b24551eee6 Mon Sep 17 00:00:00 2001 From: julieng Date: Thu, 11 Nov 2021 06:45:13 +0100 Subject: move *.html to *.md --- files/fr/mdn/structures/index.html | 17 -- files/fr/mdn/structures/index.md | 17 ++ files/fr/mdn/structures/live_samples/index.html | 171 ----------------- files/fr/mdn/structures/live_samples/index.md | 171 +++++++++++++++++ .../macros/commonly-used_macros/index.html | 208 --------------------- .../macros/commonly-used_macros/index.md | 208 +++++++++++++++++++++ files/fr/mdn/structures/macros/index.html | 41 ---- files/fr/mdn/structures/macros/index.md | 41 ++++ 8 files changed, 437 insertions(+), 437 deletions(-) delete mode 100644 files/fr/mdn/structures/index.html create mode 100644 files/fr/mdn/structures/index.md delete mode 100644 files/fr/mdn/structures/live_samples/index.html create mode 100644 files/fr/mdn/structures/live_samples/index.md delete mode 100644 files/fr/mdn/structures/macros/commonly-used_macros/index.html create mode 100644 files/fr/mdn/structures/macros/commonly-used_macros/index.md delete mode 100644 files/fr/mdn/structures/macros/index.html create mode 100644 files/fr/mdn/structures/macros/index.md (limited to 'files/fr/mdn/structures') diff --git a/files/fr/mdn/structures/index.html b/files/fr/mdn/structures/index.html deleted file mode 100644 index 5e605bea37..0000000000 --- a/files/fr/mdn/structures/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Document structures -slug: MDN/Structures -tags: - - Landing - - MDN Meta - - Structures - - TopicStub -translation_of: MDN/Structures ---- -
{{MDNSidebar}}
- -
{{IncludeSubnav("/en-US/docs/MDN")}}
- -

Tout au long de MDN, il existe diverses structures de document qui sont utilisées à plusieurs reprises, pour fournir une présentation cohérente des informations dans les articles MDN. Voici des articles décrivant ces structures, afin que, en tant qu'auteur MDN, vous puissiez les reconnaître, les appliquer et les modifier selon les besoins pour les documents que vous écrivez, modifiez ou traduisez.

- -

{{LandingPageListSubPages()}}

diff --git a/files/fr/mdn/structures/index.md b/files/fr/mdn/structures/index.md new file mode 100644 index 0000000000..5e605bea37 --- /dev/null +++ b/files/fr/mdn/structures/index.md @@ -0,0 +1,17 @@ +--- +title: Document structures +slug: MDN/Structures +tags: + - Landing + - MDN Meta + - Structures + - TopicStub +translation_of: MDN/Structures +--- +
{{MDNSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/MDN")}}
+ +

Tout au long de MDN, il existe diverses structures de document qui sont utilisées à plusieurs reprises, pour fournir une présentation cohérente des informations dans les articles MDN. Voici des articles décrivant ces structures, afin que, en tant qu'auteur MDN, vous puissiez les reconnaître, les appliquer et les modifier selon les besoins pour les documents que vous écrivez, modifiez ou traduisez.

+ +

{{LandingPageListSubPages()}}

diff --git a/files/fr/mdn/structures/live_samples/index.html b/files/fr/mdn/structures/live_samples/index.html deleted file mode 100644 index c297eac680..0000000000 --- a/files/fr/mdn/structures/live_samples/index.html +++ /dev/null @@ -1,171 +0,0 @@ ---- -title: Exemples live -slug: MDN/Structures/Live_samples -tags: - - Guide - - Intermediate - - MDN Meta - - Structures -translation_of: MDN/Structures/Live_samples -original_slug: MDN/Structures/Exemples_live ---- -
{{MDNSidebar}}
- -

MDN permet de transformer les exemples présentés dans les articles en exemples dit « live » qui permettent aux lecteurs de les voir en action. Les exemples live peuvent inclure du HTML, CSS et JavaScript. A noter, les exemples lives ne sont pas interactifs ; néanmoins, ils assurent que le code de sortie affiché pour un exemple est bien le même que défini par l'exemple, parce que la sortie est générée par le code d'exemple.

- -

Comment le système d'exemples lives fonctionne-t-il ?

- -

Le système d'exemple live rassemble tout le code existant et le fusionne dans un fichier HTML, puis affiche ce fichier dans une <iframe>. Un exemple live est composé de deux parties :

- - - -

Dans ce contexte, un « groupe » de blocs de code est identifié par l'ID d'un titre ou d'un élément de bloc (tel qu'un <div>).

- - - -

La macro utilise une URL spéciale pour récupérer l'échantillon de code pour un groupe donné, par exemple https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/CSS/animation/_samples_/Cylon_Eye. La structure générale est https://url-of-page_samples_/group-id, où group-id est l'ID de la rubrique ou du bloc où se trouve le code.

- -

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.

- -
-

Note : Vous devez utiliser la macro pour présenter la sortie de l'échantillon en direct.

-
- -

Chaque bloc <pre> contenant du code pour l'échantillon est doté d'une classe qui indique s'il s'agit de code HTML, CSS ou JavaScript ; ces classes sont « brush : html », « brush : css » et « brush : js ». Ces classes doivent se trouver sur les blocs de code correspondants.

- -

Le système d'échantillonnage en direct offre de nombreuses options, et nous allons essayer de les décomposer pour les examiner un par un.

- -

Exemples de macros en direct

- -

Il existe deux macros que vous pouvez utiliser pour afficher des échantillons en direct :

- - - -

Dans de nombreux cas, vous pouvez être en mesure d'ajouter la macro EmbedLiveSample ou LiveSampleLink aux pages avec peu ou pas de travail supplémentaire ! Tant que l'échantillon peut être identifié par l'ID d'un titre ou se trouve dans un bloc avec un ID que vous pouvez utiliser, l'ajout de la macro devrait faire l'affaire.

- -

La macro EmbedLiveSample

- -
\{{EmbedLiveSample(block_ID, width, height, screenshot_URL, page_slug)}}
- -
-
block_ID
-
Requis : L'ID de l'en-tête ou du bloc qui l'entoure d'où le code doit être tiré. La meilleure façon de s'assurer que l'ID est correct est de regarder l'URL de la section dans la table des matières de la page ; vous pouvez également le vérifier en consultant le source de la page.
-
width
-
La largeur de l'<iframe> à créer, spécifiée en px. Ce paramètre est facultatif ; une largeur par défaut raisonnable sera utilisée si vous l'omettez. Notez que si vous voulez utiliser une largeur spécifique, vous devez également spécifier le paramètre height.
-
height
-
La hauteur de l'<iframe> à créer, spécifiée en px. Ce paramètre est facultatif ; une hauteur par défaut raisonnable sera utilisée si vous l'omettez. Notez que si vous voulez utiliser une hauteur spécifique, vous devez également spécifier le paramètre width. Si vous n'utilisez qu'un seul d'entre eux, la taille de cadre par défaut est utilisée.
-
screenshot_URL
-
L'URL d'une capture d'écran qui montre à quoi devrait ressembler l'échantillon en direct. Ce paramètre est facultatif, mais il peut être utile pour les nouvelles technologies qui ne fonctionnent peut-être pas dans le navigateur de l'utilisateur, afin qu'il puisse voir à quoi ressemblerait l'échantillon s'il était pris en charge par son navigateur. Si vous incluez ce paramètre, la capture d'écran est affichée à côté de l'échantillon en direct, avec les titres appropriés.
-
page_slug
-
-

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.

-
-

Attention : Pour afficher un échantillon en direct d'une page contenant du code dans une page cible différente, la page contenant du code doit elle-même utiliser la macro EmbedLiveSample pour intégrer un échantillon en direct dans sa propre page. Sinon, si la page contenant le code n'utilise pas elle-même la macro EmbedLiveSample sa propre page, l'échantillon vivant ne s'affichera pas du tout sur la page cible. (Voir Le ticket Yari #2243.)

-
-
-
- - - -
\{{LiveSampleLink(block_ID, link_text)}}
- -
-
block_ID
-
L'ID de l'en-tête ou du bloc qui l'entoure, d'où le code doit être tiré. La meilleure façon de s'assurer que l'ID est correct est de regarder l'URL de la section dans la table des matières de la page ; vous pouvez également le vérifier en consultant le source de la page.
-
link_text
-
Une chaîne de caractères à utiliser comme texte du lien.
-
- -

Utilisation du système d'échantillonnage en direct

- -

Les sections ci-dessous décrivent quelques cas d'utilisation courants du système d'échantillons en direct.

- -

Transformer des extraits en échantillons vivants

- -

Un cas d'utilisation courant consiste à prendre des extraits de code existants déjà présentés sur MDN et à les transformer en échantillons vivants.

- -

Préparer les échantillons de code

- -

La première étape consiste à ajouter des extraits de code ou à s'assurer que les extraits existants sont prêts à être utilisés comme échantillons en direct, tant au niveau du contenu que du balisage. Les extraits de code, pris dans leur ensemble, doivent constituer un exemple complet et exécutable. Par exemple, si l'extrait existant ne présente que du CSS, vous devrez peut-être ajouter un extrait de HTML sur lequel le CSS pourra opérer.

- -

Chaque morceau de code doit se trouver dans un bloc <pre>, avec un bloc distinct pour chaque langue, correctement marqué quant à sa langue. La plupart du temps, cela a déjà été fait, mais il est toujours utile de revérifier pour s'assurer que chaque morceau de code est configuré avec la bonne syntaxe. Ceci est fait avec une classe sur l'élément <pre> de brush:language-type, où language-type est le type de langage que le bloc contient, par exemple html, css, ou js.

- -
-

Note : Vous pouvez avoir plus d'un bloc pour chaque langue ; ils sont tous concaténés ensemble. Vous pouvez ainsi avoir un morceau de code, suivi d'une explication de son fonctionnement, puis un autre morceau, et ainsi de suite. Il est ainsi encore plus facile de produire des didacticiels et autres qui utilisent des échantillons en direct entrecoupés de texte explicatif.

-
- -

Assurez-vous donc que les blocs <pre> de votre code HTML, CSS et/ou JavaScript sont chacun configurés correctement pour la coloration syntaxique de ce langage, et vous êtes prêt à partir.

- -

Démonstration en direct

- -

Cette section est le résultat de l'utilisation du bouton du modèle d'échantillon en direct pour créer non seulement le titre principal (« Démonstration d'échantillon en direct »), mais aussi des sous-titres pour notre contenu HTML, CSS et JavaScript. Vous n'êtes pas limité à un bloc de chacun d'entre eux ; en outre, ils ne doivent pas nécessairement être dans un ordre particulier. Mélangez et associez !

- -

Vous pouvez choisir de supprimer tous ceux que vous souhaitez ; si vous n'avez pas besoin de script, supprimez simplement cette rubrique et son bloc <pre>. Vous pouvez également supprimer l'intitulé d'un bloc de code (« HTML », « CSS » ou « JavaScript »), puisqu'il n'est pas utilisé par la macro d'échantillonnage en direct.

- -

Maintenant que le modèle a été inséré, nous pouvons insérer du code, voire du texte explicatif.

- -

HTML

- -

Ce HTML crée un paragraphe et quelques blocs pour nous aider à positionner et à styliser un message.

- -
<p>Un exemple simple du système d'échantillonnage en direct en action.</p>
-<div class="box">
-  <div id="item">Bonjour à tous ! Bienvenue sur MDN</div>
-</div>
- -

CSS

- -

Le code CSS donne un style à la boîte ainsi qu'au texte qu'elle contient.

- -
.box {
-  width: 200px;
-  border-radius: 6px;
-  padding: 20px;
-  background-color: #ffaabb;
-}
-
-#item {
-  font-weight: bold;
-  text-align: center;
-  font-family: sans-serif;
-  font-size: 1.5em;
-}
- -

JavaScript

- -

Ce code est très simple. Tout ce qu'il fait est d'attacher un gestionnaire d'événement au texte « Bonjour à tous ! » qui fait apparaître une alerte lorsqu'il est cliqué.

- -
const el = document.getElementById('item');
-el.onclick = function() {
-  alert('Ohhh, arrête de m\'embêter !');
-}
- -

Résultat

- -

Voici le résultat de l'exécution des blocs de code ci-dessus via \{{EmbedLiveSample('live_sample_demo')}} :

- -

{{EmbedLiveSample('live_sample_demo')}}

- -

Voici un lien qui résulte de l'appel de ces blocs de code via \{{LiveSampleLink('live_sample_demo', 'Lien vers un échantillon de démonstration en direct')}}:

- -

{{LiveSampleLink('live_sample_demo', 'Lien vers un échantillon de démonstration en direct')}}

- -

Conventions relatives aux échantillons vivants

- -
-
Ordres des blocs de code
-
Lors de l'ajout d'un échantillon vivant, les blocs de code doivent être triés de manière à ce que le premier corresponde à la langue principale de cet échantillon (s'il y en a une). Par exemple, lors de l'ajout d'un échantillon réel pour la référence HTML, le premier bloc doit être HTML, lors de l'ajout d'un échantillon réel pour la référence CSS, il doit être CSS et ainsi de suite.
-
Nomenclature des rubriques
-
Lorsqu'il n'y a pas d'ambiguïté (par exemple, l'échantillon se trouve dans une section « Exemples »), les titres doivent être simples avec le seul nom du langage correspondant : HTML, CSS, JavaScript, SVG, etc. (voir ci-dessus). Les titres tels que « Contenu HTML » ou « Contenu JavaScript » ne doivent pas être utilisés. Toutefois, si un titre aussi court rend le contenu peu clair, on peut utiliser un titre plus réfléchi.
-
Utilisation d'un bloc « Résultat »
-
Après les différents blocs de code, veuillez utiliser un dernier bloc « Résultat » avant d'utiliser la macro EmbedLiveSample (voir ci-dessus). De cette façon, la sémantique de l'exemple est rendue plus claire à la fois pour le lecteur et pour tout outil qui analyserait la page (par exemple, un lecteur d'écran, un crawler web).
-
diff --git a/files/fr/mdn/structures/live_samples/index.md b/files/fr/mdn/structures/live_samples/index.md new file mode 100644 index 0000000000..c297eac680 --- /dev/null +++ b/files/fr/mdn/structures/live_samples/index.md @@ -0,0 +1,171 @@ +--- +title: Exemples live +slug: MDN/Structures/Live_samples +tags: + - Guide + - Intermediate + - MDN Meta + - Structures +translation_of: MDN/Structures/Live_samples +original_slug: MDN/Structures/Exemples_live +--- +
{{MDNSidebar}}
+ +

MDN permet de transformer les exemples présentés dans les articles en exemples dit « live » qui permettent aux lecteurs de les voir en action. Les exemples live peuvent inclure du HTML, CSS et JavaScript. A noter, les exemples lives ne sont pas interactifs ; néanmoins, ils assurent que le code de sortie affiché pour un exemple est bien le même que défini par l'exemple, parce que la sortie est générée par le code d'exemple.

+ +

Comment le système d'exemples lives fonctionne-t-il ?

+ +

Le système d'exemple live rassemble tout le code existant et le fusionne dans un fichier HTML, puis affiche ce fichier dans une <iframe>. Un exemple live est composé de deux parties :

+ + + +

Dans ce contexte, un « groupe » de blocs de code est identifié par l'ID d'un titre ou d'un élément de bloc (tel qu'un <div>).

+ + + +

La macro utilise une URL spéciale pour récupérer l'échantillon de code pour un groupe donné, par exemple https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/CSS/animation/_samples_/Cylon_Eye. La structure générale est https://url-of-page_samples_/group-id, où group-id est l'ID de la rubrique ou du bloc où se trouve le code.

+ +

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.

+ +
+

Note : Vous devez utiliser la macro pour présenter la sortie de l'échantillon en direct.

+
+ +

Chaque bloc <pre> contenant du code pour l'échantillon est doté d'une classe qui indique s'il s'agit de code HTML, CSS ou JavaScript ; ces classes sont « brush : html », « brush : css » et « brush : js ». Ces classes doivent se trouver sur les blocs de code correspondants.

+ +

Le système d'échantillonnage en direct offre de nombreuses options, et nous allons essayer de les décomposer pour les examiner un par un.

+ +

Exemples de macros en direct

+ +

Il existe deux macros que vous pouvez utiliser pour afficher des échantillons en direct :

+ + + +

Dans de nombreux cas, vous pouvez être en mesure d'ajouter la macro EmbedLiveSample ou LiveSampleLink aux pages avec peu ou pas de travail supplémentaire ! Tant que l'échantillon peut être identifié par l'ID d'un titre ou se trouve dans un bloc avec un ID que vous pouvez utiliser, l'ajout de la macro devrait faire l'affaire.

+ +

La macro EmbedLiveSample

+ +
\{{EmbedLiveSample(block_ID, width, height, screenshot_URL, page_slug)}}
+ +
+
block_ID
+
Requis : L'ID de l'en-tête ou du bloc qui l'entoure d'où le code doit être tiré. La meilleure façon de s'assurer que l'ID est correct est de regarder l'URL de la section dans la table des matières de la page ; vous pouvez également le vérifier en consultant le source de la page.
+
width
+
La largeur de l'<iframe> à créer, spécifiée en px. Ce paramètre est facultatif ; une largeur par défaut raisonnable sera utilisée si vous l'omettez. Notez que si vous voulez utiliser une largeur spécifique, vous devez également spécifier le paramètre height.
+
height
+
La hauteur de l'<iframe> à créer, spécifiée en px. Ce paramètre est facultatif ; une hauteur par défaut raisonnable sera utilisée si vous l'omettez. Notez que si vous voulez utiliser une hauteur spécifique, vous devez également spécifier le paramètre width. Si vous n'utilisez qu'un seul d'entre eux, la taille de cadre par défaut est utilisée.
+
screenshot_URL
+
L'URL d'une capture d'écran qui montre à quoi devrait ressembler l'échantillon en direct. Ce paramètre est facultatif, mais il peut être utile pour les nouvelles technologies qui ne fonctionnent peut-être pas dans le navigateur de l'utilisateur, afin qu'il puisse voir à quoi ressemblerait l'échantillon s'il était pris en charge par son navigateur. Si vous incluez ce paramètre, la capture d'écran est affichée à côté de l'échantillon en direct, avec les titres appropriés.
+
page_slug
+
+

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.

+
+

Attention : Pour afficher un échantillon en direct d'une page contenant du code dans une page cible différente, la page contenant du code doit elle-même utiliser la macro EmbedLiveSample pour intégrer un échantillon en direct dans sa propre page. Sinon, si la page contenant le code n'utilise pas elle-même la macro EmbedLiveSample sa propre page, l'échantillon vivant ne s'affichera pas du tout sur la page cible. (Voir Le ticket Yari #2243.)

+
+
+
+ + + +
\{{LiveSampleLink(block_ID, link_text)}}
+ +
+
block_ID
+
L'ID de l'en-tête ou du bloc qui l'entoure, d'où le code doit être tiré. La meilleure façon de s'assurer que l'ID est correct est de regarder l'URL de la section dans la table des matières de la page ; vous pouvez également le vérifier en consultant le source de la page.
+
link_text
+
Une chaîne de caractères à utiliser comme texte du lien.
+
+ +

Utilisation du système d'échantillonnage en direct

+ +

Les sections ci-dessous décrivent quelques cas d'utilisation courants du système d'échantillons en direct.

+ +

Transformer des extraits en échantillons vivants

+ +

Un cas d'utilisation courant consiste à prendre des extraits de code existants déjà présentés sur MDN et à les transformer en échantillons vivants.

+ +

Préparer les échantillons de code

+ +

La première étape consiste à ajouter des extraits de code ou à s'assurer que les extraits existants sont prêts à être utilisés comme échantillons en direct, tant au niveau du contenu que du balisage. Les extraits de code, pris dans leur ensemble, doivent constituer un exemple complet et exécutable. Par exemple, si l'extrait existant ne présente que du CSS, vous devrez peut-être ajouter un extrait de HTML sur lequel le CSS pourra opérer.

+ +

Chaque morceau de code doit se trouver dans un bloc <pre>, avec un bloc distinct pour chaque langue, correctement marqué quant à sa langue. La plupart du temps, cela a déjà été fait, mais il est toujours utile de revérifier pour s'assurer que chaque morceau de code est configuré avec la bonne syntaxe. Ceci est fait avec une classe sur l'élément <pre> de brush:language-type, où language-type est le type de langage que le bloc contient, par exemple html, css, ou js.

+ +
+

Note : Vous pouvez avoir plus d'un bloc pour chaque langue ; ils sont tous concaténés ensemble. Vous pouvez ainsi avoir un morceau de code, suivi d'une explication de son fonctionnement, puis un autre morceau, et ainsi de suite. Il est ainsi encore plus facile de produire des didacticiels et autres qui utilisent des échantillons en direct entrecoupés de texte explicatif.

+
+ +

Assurez-vous donc que les blocs <pre> de votre code HTML, CSS et/ou JavaScript sont chacun configurés correctement pour la coloration syntaxique de ce langage, et vous êtes prêt à partir.

+ +

Démonstration en direct

+ +

Cette section est le résultat de l'utilisation du bouton du modèle d'échantillon en direct pour créer non seulement le titre principal (« Démonstration d'échantillon en direct »), mais aussi des sous-titres pour notre contenu HTML, CSS et JavaScript. Vous n'êtes pas limité à un bloc de chacun d'entre eux ; en outre, ils ne doivent pas nécessairement être dans un ordre particulier. Mélangez et associez !

+ +

Vous pouvez choisir de supprimer tous ceux que vous souhaitez ; si vous n'avez pas besoin de script, supprimez simplement cette rubrique et son bloc <pre>. Vous pouvez également supprimer l'intitulé d'un bloc de code (« HTML », « CSS » ou « JavaScript »), puisqu'il n'est pas utilisé par la macro d'échantillonnage en direct.

+ +

Maintenant que le modèle a été inséré, nous pouvons insérer du code, voire du texte explicatif.

+ +

HTML

+ +

Ce HTML crée un paragraphe et quelques blocs pour nous aider à positionner et à styliser un message.

+ +
<p>Un exemple simple du système d'échantillonnage en direct en action.</p>
+<div class="box">
+  <div id="item">Bonjour à tous ! Bienvenue sur MDN</div>
+</div>
+ +

CSS

+ +

Le code CSS donne un style à la boîte ainsi qu'au texte qu'elle contient.

+ +
.box {
+  width: 200px;
+  border-radius: 6px;
+  padding: 20px;
+  background-color: #ffaabb;
+}
+
+#item {
+  font-weight: bold;
+  text-align: center;
+  font-family: sans-serif;
+  font-size: 1.5em;
+}
+ +

JavaScript

+ +

Ce code est très simple. Tout ce qu'il fait est d'attacher un gestionnaire d'événement au texte « Bonjour à tous ! » qui fait apparaître une alerte lorsqu'il est cliqué.

+ +
const el = document.getElementById('item');
+el.onclick = function() {
+  alert('Ohhh, arrête de m\'embêter !');
+}
+ +

Résultat

+ +

Voici le résultat de l'exécution des blocs de code ci-dessus via \{{EmbedLiveSample('live_sample_demo')}} :

+ +

{{EmbedLiveSample('live_sample_demo')}}

+ +

Voici un lien qui résulte de l'appel de ces blocs de code via \{{LiveSampleLink('live_sample_demo', 'Lien vers un échantillon de démonstration en direct')}}:

+ +

{{LiveSampleLink('live_sample_demo', 'Lien vers un échantillon de démonstration en direct')}}

+ +

Conventions relatives aux échantillons vivants

+ +
+
Ordres des blocs de code
+
Lors de l'ajout d'un échantillon vivant, les blocs de code doivent être triés de manière à ce que le premier corresponde à la langue principale de cet échantillon (s'il y en a une). Par exemple, lors de l'ajout d'un échantillon réel pour la référence HTML, le premier bloc doit être HTML, lors de l'ajout d'un échantillon réel pour la référence CSS, il doit être CSS et ainsi de suite.
+
Nomenclature des rubriques
+
Lorsqu'il n'y a pas d'ambiguïté (par exemple, l'échantillon se trouve dans une section « Exemples »), les titres doivent être simples avec le seul nom du langage correspondant : HTML, CSS, JavaScript, SVG, etc. (voir ci-dessus). Les titres tels que « Contenu HTML » ou « Contenu JavaScript » ne doivent pas être utilisés. Toutefois, si un titre aussi court rend le contenu peu clair, on peut utiliser un titre plus réfléchi.
+
Utilisation d'un bloc « Résultat »
+
Après les différents blocs de code, veuillez utiliser un dernier bloc « Résultat » avant d'utiliser la macro EmbedLiveSample (voir ci-dessus). De cette façon, la sémantique de l'exemple est rendue plus claire à la fois pour le lecteur et pour tout outil qui analyserait la page (par exemple, un lecteur d'écran, un crawler web).
+
diff --git a/files/fr/mdn/structures/macros/commonly-used_macros/index.html b/files/fr/mdn/structures/macros/commonly-used_macros/index.html deleted file mode 100644 index 4aaeb81c61..0000000000 --- a/files/fr/mdn/structures/macros/commonly-used_macros/index.html +++ /dev/null @@ -1,208 +0,0 @@ ---- -title: Commonly-used macros -slug: MDN/Structures/Macros/Commonly-used_macros -translation_of: MDN/Structures/Macros/Commonly-used_macros ---- -
{{MDNSidebar}}
- -

Cette page présente un grand nombre de macros à usage général créées pour une utilisation avec MDN. Pour avoir des informations sur l'utilisation de ces macros, voir Utilisation des macros et Utiliser les liens macros . Voir les autres macros pour avoir des informations sur les macros qui sont rarement utilisées, ou utilisées dans des contextes spécifiques, ou obsolètes. Il y a aussi une liste complète de toutes les macros MDN.

- -

Voir aussi le Guide style CSS pour l'utilisation des styles disponibles.

- -

Linking

- -

Création d'un lien hypertexte unique

- -

En général, vous ne devez pas utiliser des macros pour créer des liens arbitraires. Utilisez le Lien dans l'interface de l'éditeur pour créer des liens.

- - - -

Liens vers des pages avec références

- -

Il existe différentes macros pour des liens vers des pages dans les zones de référence spécifiques MDN.

- - - -

Liens vers des bugs et des IRC

- - - -

Aides à la navigation pour les guides multi-pages

- -

{{TemplateLink("Previous")}}, {{TemplateLink("Next")}}, and {{TemplateLink("PreviousNext")}} provide navigation controls for articles which are part of sequences. For the single-way templates, the only parameter needed is the wiki location of the previous or next article in the sequence. For {{TemplateLink("PreviousNext")}}, the two parameters needed are the wiki locations of the appropriate articles. The first parameter is for the previous article and the second is for the next article.

- -

Exemples de code

- -

Live samples

- - - -

Fichiers exemples attachés

- - - -

Génération de sidebar (barre latérale)

- -

Modèles pour presque toutes les grandes collection de pages. Ils permettent généralement de revenir à la page principale de référence/Guide/tutoriel et de mettre l'article dans la catégorie appropriée.

- - - -

La mise en forme à usage général

- -

Inline indicators for API documentation

- -

{{TemplateLink("optional_inline")}} and {{TemplateLink("ReadOnlyInline")}} are used in API documentation, usually when describing the list of properties of an object or parameters of a function.

- -

Usage: \{{optional_inline()}} or \{{ReadOnlyInline()}}. Example:

- -
-
isCustomObject {{ReadOnlyInline()}}
-
Indicates, if true, that the object is a custom one.
-
parameterX {{ optional_inline() }}
-
Blah blah blah...
-
- -

Status and compatibility indicators

- -

Inline indicators with no additional parameters

- -

Non-standard

- -

{{TemplateLink("non-standard_inline")}} inserts an in-line mark indicating the API has not been standardized and is not on a standards track.

- -
Syntax
- -

\{{non-standard_inline}}

- -
Examples
- - - -

Experimental

- -

{{TemplateLink("experimental_inline")}} inserts an in-line mark indicating the API is not widely implemented and may change in the future.

- -
Syntax
- -

\{{experimental_inline}}

- -
Examples
- - - -

Inline indicators that support specifying the technology

- -

In these macros the parameter (when specified) should be one of the strings "html", "js", "css", or "gecko", followed by the version number.

- -

Deprecated

- -

{{TemplateLink("deprecated_inline")}} inserts an in-line deprecated mark to discourage the use of an API that is officially deprecated. Note: "Deprecated" means that the item should no longer be used, but still functions. If you mean that it no longer works at all, use the term "obsolete."

- -

Don't use the parameter in any browser-agnostic area (HTML, APIs, JS, CSS, …).

- -
Syntax
- -

\{{deprecated_inline}} or \{{deprecated_inline("gecko5")}}

- -
Examples
- - - -

Obsolete

- -

{{TemplateLink("obsolete_inline")}} inserts an in-line obsolete mark to prevent the use of, for example, a function, method or property which is officially obsolete.

- -

Don't use the parameter in any browser-agnostic area (HTML, APIs, JS, CSS, …).

- -
Syntax
- -

\{{obsolete_inline}} or \{{obsolete_inline("js1.8.5")}}

- -
Examples
- - - -

Template badges

- -

These macros are mostly used on the WebAPI page. See {{anch("Creating new badges")}} for information on creating a new badge.

- -

Page or section header indicators

- -

These templates have the same semantics as their inline counterparts described above. The templates should be placed directly underneath the main page title (or breadcrumb navigation if available) in the reference page. They can also be used to mark up a section on a page.

- - - -

Indicating that a feature is available in web workers

- -

The {{TemplateLink("AvailableInWorkers")}} macro inserts a localised note box indicating that a feature is available in a Web worker context.

- -
    -
- -

 

- -
    -
- -

 

diff --git a/files/fr/mdn/structures/macros/commonly-used_macros/index.md b/files/fr/mdn/structures/macros/commonly-used_macros/index.md new file mode 100644 index 0000000000..4aaeb81c61 --- /dev/null +++ b/files/fr/mdn/structures/macros/commonly-used_macros/index.md @@ -0,0 +1,208 @@ +--- +title: Commonly-used macros +slug: MDN/Structures/Macros/Commonly-used_macros +translation_of: MDN/Structures/Macros/Commonly-used_macros +--- +
{{MDNSidebar}}
+ +

Cette page présente un grand nombre de macros à usage général créées pour une utilisation avec MDN. Pour avoir des informations sur l'utilisation de ces macros, voir Utilisation des macros et Utiliser les liens macros . Voir les autres macros pour avoir des informations sur les macros qui sont rarement utilisées, ou utilisées dans des contextes spécifiques, ou obsolètes. Il y a aussi une liste complète de toutes les macros MDN.

+ +

Voir aussi le Guide style CSS pour l'utilisation des styles disponibles.

+ +

Linking

+ +

Création d'un lien hypertexte unique

+ +

En général, vous ne devez pas utiliser des macros pour créer des liens arbitraires. Utilisez le Lien dans l'interface de l'éditeur pour créer des liens.

+ + + +

Liens vers des pages avec références

+ +

Il existe différentes macros pour des liens vers des pages dans les zones de référence spécifiques MDN.

+ + + +

Liens vers des bugs et des IRC

+ + + +

Aides à la navigation pour les guides multi-pages

+ +

{{TemplateLink("Previous")}}, {{TemplateLink("Next")}}, and {{TemplateLink("PreviousNext")}} provide navigation controls for articles which are part of sequences. For the single-way templates, the only parameter needed is the wiki location of the previous or next article in the sequence. For {{TemplateLink("PreviousNext")}}, the two parameters needed are the wiki locations of the appropriate articles. The first parameter is for the previous article and the second is for the next article.

+ +

Exemples de code

+ +

Live samples

+ + + +

Fichiers exemples attachés

+ + + +

Génération de sidebar (barre latérale)

+ +

Modèles pour presque toutes les grandes collection de pages. Ils permettent généralement de revenir à la page principale de référence/Guide/tutoriel et de mettre l'article dans la catégorie appropriée.

+ + + +

La mise en forme à usage général

+ +

Inline indicators for API documentation

+ +

{{TemplateLink("optional_inline")}} and {{TemplateLink("ReadOnlyInline")}} are used in API documentation, usually when describing the list of properties of an object or parameters of a function.

+ +

Usage: \{{optional_inline()}} or \{{ReadOnlyInline()}}. Example:

+ +
+
isCustomObject {{ReadOnlyInline()}}
+
Indicates, if true, that the object is a custom one.
+
parameterX {{ optional_inline() }}
+
Blah blah blah...
+
+ +

Status and compatibility indicators

+ +

Inline indicators with no additional parameters

+ +

Non-standard

+ +

{{TemplateLink("non-standard_inline")}} inserts an in-line mark indicating the API has not been standardized and is not on a standards track.

+ +
Syntax
+ +

\{{non-standard_inline}}

+ +
Examples
+ + + +

Experimental

+ +

{{TemplateLink("experimental_inline")}} inserts an in-line mark indicating the API is not widely implemented and may change in the future.

+ +
Syntax
+ +

\{{experimental_inline}}

+ +
Examples
+ + + +

Inline indicators that support specifying the technology

+ +

In these macros the parameter (when specified) should be one of the strings "html", "js", "css", or "gecko", followed by the version number.

+ +

Deprecated

+ +

{{TemplateLink("deprecated_inline")}} inserts an in-line deprecated mark to discourage the use of an API that is officially deprecated. Note: "Deprecated" means that the item should no longer be used, but still functions. If you mean that it no longer works at all, use the term "obsolete."

+ +

Don't use the parameter in any browser-agnostic area (HTML, APIs, JS, CSS, …).

+ +
Syntax
+ +

\{{deprecated_inline}} or \{{deprecated_inline("gecko5")}}

+ +
Examples
+ + + +

Obsolete

+ +

{{TemplateLink("obsolete_inline")}} inserts an in-line obsolete mark to prevent the use of, for example, a function, method or property which is officially obsolete.

+ +

Don't use the parameter in any browser-agnostic area (HTML, APIs, JS, CSS, …).

+ +
Syntax
+ +

\{{obsolete_inline}} or \{{obsolete_inline("js1.8.5")}}

+ +
Examples
+ + + +

Template badges

+ +

These macros are mostly used on the WebAPI page. See {{anch("Creating new badges")}} for information on creating a new badge.

+ +

Page or section header indicators

+ +

These templates have the same semantics as their inline counterparts described above. The templates should be placed directly underneath the main page title (or breadcrumb navigation if available) in the reference page. They can also be used to mark up a section on a page.

+ + + +

Indicating that a feature is available in web workers

+ +

The {{TemplateLink("AvailableInWorkers")}} macro inserts a localised note box indicating that a feature is available in a Web worker context.

+ +
    +
+ +

 

+ +
    +
+ +

 

diff --git a/files/fr/mdn/structures/macros/index.html b/files/fr/mdn/structures/macros/index.html deleted file mode 100644 index 448d6a4649..0000000000 --- a/files/fr/mdn/structures/macros/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: Macros -slug: MDN/Structures/Macros -translation_of: MDN/Structures/Macros ---- -
{{MDNSidebar}}
-

La plate-forme Kuma sur laquelle MDN travail, fournit un système de macro, KumaScript, 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.

- -

Le Guide KumaScript 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.

- -

Comment les macros sont-elle mises en œuvre

- -

Macros sur MDN sont mis en œuvre en utilisant le serveur exécuté JavaScript code, interprété à l'aide de Node.js. En plus de cela, nous avons un certain nombre de bibliothèques, que nous avons mis en place pour fournir des services et des fonctionnalités orientées wiki, les macros interagissent avec la plate-forme wiki et avec son contenu. Si vous voulez en apprendre davantage, consultez le guide KumaScript; le KumaScript reference fournit des détails sur les bibliothèques et autres API KumaScript que nous avons mis en œuvre.

- -

Utiliser une macro dans le contenu

- -

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:

- -
\{{macroname(parameter-list)}}
- -

Quelques notes sur les appels de macro:

- - - -

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.

- -
-

Note : Vous pouvez forcer toutes les macros d'une page à être réévalué avec un shift-reload.

-
- -

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.

- -

Vous pouvez lire sur nos macros les plus couramment utilisés sur le couramment utilisés; aussi, il y a un la liste complète de toutes les macros ici. La plupart des macros ont intégré dans la documentation eux, comme des commentaires en haut.

- -

{{EditorGuideQuicklinks}}

diff --git a/files/fr/mdn/structures/macros/index.md b/files/fr/mdn/structures/macros/index.md new file mode 100644 index 0000000000..448d6a4649 --- /dev/null +++ b/files/fr/mdn/structures/macros/index.md @@ -0,0 +1,41 @@ +--- +title: Macros +slug: MDN/Structures/Macros +translation_of: MDN/Structures/Macros +--- +
{{MDNSidebar}}
+

La plate-forme Kuma sur laquelle MDN travail, fournit un système de macro, KumaScript, 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.

+ +

Le Guide KumaScript 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.

+ +

Comment les macros sont-elle mises en œuvre

+ +

Macros sur MDN sont mis en œuvre en utilisant le serveur exécuté JavaScript code, interprété à l'aide de Node.js. En plus de cela, nous avons un certain nombre de bibliothèques, que nous avons mis en place pour fournir des services et des fonctionnalités orientées wiki, les macros interagissent avec la plate-forme wiki et avec son contenu. Si vous voulez en apprendre davantage, consultez le guide KumaScript; le KumaScript reference fournit des détails sur les bibliothèques et autres API KumaScript que nous avons mis en œuvre.

+ +

Utiliser une macro dans le contenu

+ +

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:

+ +
\{{macroname(parameter-list)}}
+ +

Quelques notes sur les appels de macro:

+ + + +

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.

+ +
+

Note : Vous pouvez forcer toutes les macros d'une page à être réévalué avec un shift-reload.

+
+ +

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.

+ +

Vous pouvez lire sur nos macros les plus couramment utilisés sur le couramment utilisés; aussi, il y a un la liste complète de toutes les macros ici. La plupart des macros ont intégré dans la documentation eux, comme des commentaires en haut.

+ +

{{EditorGuideQuicklinks}}

-- cgit v1.2.3-54-g00ecf