Aller à :

Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

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.

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 : Glitch, JSFiddle, CodePen, Dabblet, etc.) que vous pouvez mettre en lien dans les articles MDN.

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.

Les lives samples

MDN possède une fonctionnalité assez cool, les live samples (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 Using the live sample system, 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.

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.

Le code caché

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 <div> avec la classe hidden. En faisant ça, votre code ne sera pas affiché, mais votre échantillon restera accessible et modififable.

Prenons un exemple simple:

Cliquer sur le carré suivant pour changer sa couleur de manière aléatoire ou entrez un code couleur héxadécimal.

Si on regarde le code HTML de l'éditeur MDN on retrouvera, lorsqu'il aura été géneré, exactement le code HTML suivant :

<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>

Vous trouverez des exemples plus avancés dans la page sur l'API Canvas API.

Code externe

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 hidden.

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 EmbedDistLiveSample au lieu de EmbedLiveSample.

Voici à quoi cet exemple ressemble lorsqu'il est intégré à l'aide de la méthode distante :

Cliquer sur le carré suivant pour changer sa couleur de manière aléatoire ou entrez un code couleur héxadécimal.

Cette fois, si vous allez sur cette page avec l'éditeur MDN, vous ne verrez pas de code caché. Si vous voulez voir le code, allez sur la page qui l'héberge.

Vous trouverez des exemples plus avancés sur le tutoriel sur les formulaires HTML, qui appliquent ces méthodes pour permettre leur utilisation sur des formulaires.

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight, AkwindFr
Dernière mise à jour par : SphinxKnight,