{"id":1522,"date":"2011-10-11T08:33:21","date_gmt":"2011-10-11T06:33:21","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=1522"},"modified":"2015-01-18T16:23:29","modified_gmt":"2015-01-18T15:23:29","slug":"js-fiddle-codez-testez-enregistrez-partagez","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/ressources-telechargements\/js-fiddle-codez-testez-enregistrez-partagez","title":{"rendered":"JS Fiddle &#8211; Codez, testez, enregistrez et partagez !"},"content":{"rendered":"<p>J&rsquo;ai d\u00e9couvert, par l&rsquo;interm\u00e9diaire d&rsquo;un de <a href=\"http:\/\/www.alsacreations.fr\/a-propos.html\">mes coll\u00e8gues<\/a> un outil de test et de partage de codes sources (ou <abbr lang=\"en\" title=\"Petit morceau de code r\u00e9utilisable\">Snippets<\/abbr>). Cet outil nomm\u00e9 <em lang=\"en\">JS Fiddle<\/em> est plut\u00f4t prometteur et de plus en plus utilis\u00e9 sur les blogs de technos, voyons ce qu&rsquo;il nous est propos\u00e9.<!--more--><\/p>\n<h2>L&rsquo;outil<\/h2>\n<p><a href=\"http:\/\/jsfiddle.net\/\" lang=\"en\" hreflang=\"en\">Js Fiddle<\/a> est vraiment simple d&rsquo;utilisation. Son interface se compose principalement de 5 zones dont 3 sont utilis\u00e9es pour la r\u00e9daction de votre codes (HTML, CSS, JS).<\/p>\n<p class=\"center\"><img decoding=\"async\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2011\/10\/js-fiddle.jpg\" alt=\"Le panneau principal de JS Fiddle\" title=\"\" width=\"580\" height=\"281\" class=\"aligncenter size-full wp-image-1546\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2011\/10\/js-fiddle.jpg 580w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2011\/10\/js-fiddle-300x145.jpg 300w\" sizes=\"(max-width: 580px) 100vw, 580px\" \/><\/p>\n<p>Les deux autres zones servent, pour celle de gauche : \u00e0 d\u00e9finir le type de document, les biblioth\u00e8ques JS que vous souhaitez charger, ainsi qu&rsquo;une multitude d&rsquo;autres options et ressources qu&rsquo;il est possible d&rsquo;int\u00e9grer \u00e0 votre test ; pour celle de droite : voir le rendu \u00e9mul\u00e9 de votre code.<\/p>\n<h2>Quelques fonctionnalit\u00e9s<\/h2>\n<p>JS Fiddle vous permet d&rsquo;int\u00e9grer \u00e0 vos tests des biblioth\u00e8ques JavaScript parmi les plus connues (Mootools, jQuery, YUI, etc.), simplement en s\u00e9lectionnant celle-ci dans une liste d\u00e9roulante.<br \/>\nEn renseignant une URL, il est \u00e9galement possible d&rsquo;int\u00e9grer des fichiers <abbr>CSS<\/abbr> ou <abbr>JS<\/abbr> externes.<\/p>\n<p>Une fois votre travail bien entam\u00e9, il vous est possible de l&rsquo;enregistrer (\u00e0 condition d&rsquo;\u00eatre inscrit sur le site) et de le partager.<\/p>\n<p>Voici par exemple un test effectu\u00e9 \u00e0 l&rsquo;instant :<br \/>\n<a href=\"http:\/\/jsfiddle.net\/Geoffrey\/jgttD\/\" class=\"demonstration\">http:\/\/jsfiddle.net\/Geoffrey\/jgttD\/<\/a><\/p>\n<p>\u00c0 partir du moment o\u00f9 ce test est enregistr\u00e9, je peux parfaitement vous fournir un lien direct vers le <a href=\"http:\/\/jsfiddle.net\/Geoffrey\/jgttD\/embedded\/result\/\">test grandeur nature<\/a>, ou l&rsquo;ins\u00e9rer, au choix, sous forme d&rsquo;<code>iframe<\/code>.<\/p>\n<p><iframe style=\"width: 100%; height: 300px\" src=\"http:\/\/jsfiddle.net\/Geoffrey\/jgttD\/embedded\/\"><\/iframe><\/p>\n<h2>Gestion avanc\u00e9e<\/h2>\n<p>Cet outil vous permet de cr\u00e9er des versions d&rsquo;un m\u00eame code.<br \/>\nEn d\u00e9finissant la premi\u00e8re version comme \u00e9tant la base ( <img decoding=\"async\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2011\/10\/fiddle-base.png\" alt=\"Bouton &quot;Base&quot;\" title=\"\" width=\"66\" height=\"28\" class=\"alignnone size-full wp-image-1552\" \/> ), vous pourrez cr\u00e9er des versions en cliquant sur le bouton <img decoding=\"async\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2011\/10\/fiddle-update.png\" alt=\"update\" title=\"\" width=\"82\" height=\"28\" class=\"alignnone size-full wp-image-1553\" \/>.<\/p>\n<p>Ces diff\u00e9rentes versions peuvent chacune devenir la base \u00e0 leur tour.<br \/>\nPour acc\u00e9der aux diff\u00e9rentes versions, il suffit de changer le chiffre en fin d&rsquo;url, ou de retourner sur votre \u00ab\u00a0Dashboard\u00a0\u00bb pour afficher le lien de votre \u00ab\u00a0fiddle\u00a0\u00bb suivi des liens des versions.<\/p>\n<p>Bon, ok, tout n&rsquo;est pas utile, mais l&rsquo;id\u00e9e de pouvoir concevoir en 2 min un document de test sans avoir \u00e0 refaire toute la base (HTML, CSS, JS), et de pouvoir le partager aussi rapidement, j&rsquo;ai trouv\u00e9 l&rsquo;id\u00e9e attirante.<\/p>\n<p>Et vous, dans quel cadre pensez-vous l&rsquo;utiliser ?<\/p>\n<div class=\"sources\">\n<h2>Liens utiles<\/h2>\n<ul>\n<li><a href=\"http:\/\/jsfiddle.net\/\" lang=\"en\" hreflang=\"en\">JsFiddle<\/a><\/li>\n<li><a href=\"http:\/\/jsfiddle.net\/Geoffrey\/jgttD\/\" lang=\"en\" hreflang=\"en\">Snippet de d\u00e9mo de JsFiddle<\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>J&rsquo;ai d\u00e9couvert, par l&rsquo;interm\u00e9diaire d&rsquo;un de mes coll\u00e8gues un outil de test et de partage de codes sources (ou Snippets). Cet outil nomm\u00e9 JS Fiddle est plut\u00f4t prometteur et de plus en plus utilis\u00e9 sur les blogs de technos, voyons ce qu&rsquo;il nous est propos\u00e9.<\/p>\n","protected":false},"author":4,"featured_media":1545,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[50],"tags":[215,125,396,224,392,134],"coauthors":[597],"class_list":["post-1522","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ressources-telechargements","tag-html","tag-javascript","tag-jsfiddle","tag-outils","tag-partage","tag-ressource"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/1522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=1522"}],"version-history":[{"count":0,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/1522\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/1545"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=1522"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=1522"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=1522"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=1522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}