{"id":640,"date":"2010-10-22T23:38:14","date_gmt":"2010-10-22T22:38:14","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=640"},"modified":"2015-01-18T17:24:35","modified_gmt":"2015-01-18T16:24:35","slug":"zen-coding-ou-comment-coder-plus-efficacement","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/zen-coding-ou-comment-coder-plus-efficacement","title":{"rendered":"Zen Coding (Emmet), ou comment coder plus efficacement"},"content":{"rendered":"<p>Beaucoup d&rsquo;entre vous doivent certainement conna\u00eetre le plugin <strong>Zen Coding<\/strong>, ou au moins avoir entendu ou lu ce nom quelque part.<br \/>\nCe plugin vous permet de gagner en productivit\u00e9 et en zenitude sur les t\u00e2ches les plus r\u00e9barbatives du travail d&rsquo;int\u00e9gration. Bien s\u00fbr il ne fait pas tout \u00e0 votre place, il simplifie principalement la r\u00e9daction de tron\u00e7on de code.<!--more--><\/p>\n<p class=\"message\">Zen Coding s&rsquo;appelle d\u00e9sormais Emmet. Voir <a href=\"http:\/\/docs.emmet.io\/\" title=\"Le documentation de Emmet\">la documentation<\/a>. <em>(info au 01\/11\/2012)<\/em><\/p>\n<h2>Compatibilit\u00e9<\/h2>\n<p>Avant de commencer \u00e0 expliquer son fonctionnement, peut-\u00eatre serez-vous int\u00e9ress\u00e9s de savoir s&rsquo;il est compatible avec le logiciel que vous avez l&rsquo;habitude d&rsquo;utiliser ?<br \/>\nVoici la liste actuellement disponible parmi les plus connus :<\/p>\n<ul>\n<li>Notepad++ (plugin v0.6.1)<\/li>\n<li>PSDPad (plugin v0.6)<\/li>\n<li>Dreamweaver (plugin v0.6)<\/li>\n<li>TextMate (plugin v1.3.1)<\/li>\n<\/ul>\n<p><a href=\"http:\/\/code.google.com\/p\/zen-coding\/downloads\/list\" title=\"Voir la liste compl\u00e8te des compatibilit\u00e9s (nouvelle fen\u00eatre)\" target=\"_blank\">La liste compl\u00e8te des compatibilit\u00e9s<\/a><\/p>\n<p>Si votre outil n&rsquo;est pas dans la liste, j&rsquo;aurais presque envie de vous inviter \u00e0 en changer&#8230; mais c&rsquo;est \u00e0 vous de voir, je ne voudrais pas vous forcer :p<\/p>\n<h2>Principe<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2010\/10\/exemple-zen-coding.png\" alt=\"\" title=\"Exemple de la &quot;transformation&quot; Zen Coding\" width=\"280\" height=\"200\" class=\"alignright size-full wp-image-676\" \/>Bien, je ne vous ai toujours pas dit ce qu&rsquo;on pouvait en faire de ce petit joujou.<br \/>\nZen coding vous offre des \u00ab\u00a0raccourcis\u00a0\u00bb pour \u00e9crire des tron\u00e7ons de code HTML, ou CSS. Le but n&rsquo;est pas de lui faire faire le travail de r\u00e9flexion \u00e0 votre place, mais bien de vous offrir un gain de temps dans la r\u00e9daction de vos codes.<\/p>\n<p>En \u00e9crivant une ligne de code ressemblant assez \u00e0 un s\u00e9lecteur CSS, vous pourrez, \u00e0 l&rsquo;aide d&rsquo;une combinaison de touches (<kbd>Ctrl<\/kbd> + <kbd>E<\/kbd>), transformer cette ligne en une succession et imbrications d&rsquo;\u00e9l\u00e9ments HTML correctement indent\u00e9s. La combinaison de touches est \u00e0 entrer une fois que vous avez \u00e9crit votre ligne de code. Le curseur a besoin d&rsquo;\u00eatre positionn\u00e9 juste apr\u00e8s, sans espace.<\/p>\n<h2>Exemples<\/h2>\n<p>C&rsquo;est bien beau tout \u00e7a, mais je trouve que les exemples sont beaucoup plus parlants :<\/p>\n<h3>Dans une feuille HTML<\/h3>\n<pre class=\"code\"><code class=\"css\">div#header&gt;h1&gt;a.logo<\/code><\/pre>\n<p>Vous donnera le code suivant une fois pass\u00e9 dans la moulinette Zen Coding :<\/p>\n<pre class=\"code\"><code class=\"html\">&lt;div id=\"header\"&gt;\r\n   &lt;h1&gt;&lt;a href=\"\" class=\"logo\"&gt;&lt;\/a&gt;&lt;\/h1&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\n<p>Le petit bonus c&rsquo;est que le curseur va se placer automatiquement entre les guillemets de l&rsquo;attribut <code>href<\/code> du lien.<\/p>\n<h3>Dans une feuille CSS<\/h3>\n<p>Je n&rsquo;ai pas grande exp\u00e9rience sur les CSS, j&rsquo;ai encore trop l&rsquo;habitude de tout \u00e9crire \u00e0 la main.<br \/>\nMais un code comme celui-ci par exemple :<\/p>\n<pre class=\"code\"><code class=\"css\">ml<\/code><\/pre>\n<p>Vous donnera cela apr\u00e8s l&rsquo;utilisation du raccourci miracle de Zen Coding (<kbd>Ctrl<\/kbd> + <kbd>E<\/kbd>) :<\/p>\n<pre class=\"code\"><code class=\"css\">margin-left:;<\/code><\/pre>\n<p>Une fois encore le curseur se place automatiquement en le point-virgule et les deux-points.<\/p>\n<h2>Installation<\/h2>\n<p>Commencez par t\u00e9l\u00e9charger le fichier correspondant \u00e0 votre outil de r\u00e9daction habituel : <\/p>\n<p class=\"center\"><a href=\"http:\/\/code.google.com\/p\/zen-coding\/downloads\/list\" class=\"download\" title=\"Liste pour t\u00e9l\u00e9charger le plugin Zen Coding qui vous convient (nouvelle fen\u00eatre)\" hreflang=\"en\">Liste des plugins Zen Coding sur Google Code<br \/>(Anglais)<\/a><\/p>\n<p>Je vais prendre l&rsquo;exemple de Notepad++, puisque c&rsquo;est l&rsquo;\u00e9diteur que j&rsquo;utilise.<br \/>\nUne fois l&rsquo;archive t\u00e9l\u00e9charg\u00e9e, d\u00e9zipp\u00e9e l\u00e0 dans le dossier (chemin par d\u00e9faut) :<br \/>\n<code>c:\/program files\/Notepad++\/plugins\/<\/code><\/p>\n<p>Red\u00e9marrer votre \u00e9diteur s&rsquo;il \u00e9tait encore en route afin d&rsquo;initialiser le plugin.<\/p>\n<h2>Crash test<\/h2>\n<p>Je vous laisse tester et comprendre ce morceau de code.<\/p>\n<pre class=\"code\"><code class=\"css\">div#container&gt;(div.main_content&gt;div.article*4&gt;(a.cat)(div.article_body&gt;(h2)(a.photo&gt;img)(p.the_excerpt)(a.more_link))(ul.tags&gt;li*3&gt;a))(div.aside&gt;div.aside_block*3&gt;h3)<\/code><\/pre>\n<p><em>Conseil \u00e0 ne suivre que si vous \u00eates s\u00fbr de vous :<\/em><br \/>\nIl m&rsquo;arrive parfois de compl\u00e9ter les possibilit\u00e9s du plugin, pour cela il vous suffit d&rsquo;ouvrir le fichier :<br \/>\n<code>c:\/program files\/Notepad++\/plugind\/NppScripting\/includes\/Zen Coding.js<\/code><\/p>\n<p>Regardez par exemple vers la ligne 581. Vous devriez tomber pas loin du raccourci <code>img<\/code>.<br \/>\nEn face de ce raccourci se trouve le code HTML g\u00e9n\u00e9r\u00e9. Pour bien faire les choses il serait int\u00e9ressant de voir les attributs <code>width<\/code> et <code>height<\/code> ajout\u00e9s \u00e0 ce tron\u00e7on.<br \/>\nIl vous suffit donc de remplacer le code entre <em lang=\"en\">simple quotes<\/em> par celui-ci :<\/p>\n<pre class=\"code\"><code class=\"html\">&lt;img src=\"\" alt=\"\" width=\"\" height=\"\" \/&gt;<\/code><\/pre>\n<p>Red\u00e9marrez votre logiciel et testez le raccourci, vous verrez qu&rsquo;il est maintenant customis\u00e9.<\/p>\n<h2>R\u00e9sumons<\/h2>\n<p>Une ligne de code peut me permettre d&rsquo;\u00e9crire l&rsquo;\u00e9quivalent de 50 lignes habituellement \u00e9crites \u00e0 la pogne&#8230; c&rsquo;est plut\u00f4t pas mal.<br \/>\nBien entendu il vous faudra un petit temps d&rsquo;adaptation, mais pour ceux qui ma\u00eetrisent les s\u00e9lecteurs CSS, cela ne devrait pas \u00eatre un gros probl\u00e8me.<\/p>\n<p>Si vous avez des soucis avec n&rsquo;h\u00e9sitez pas \u00e0 m&rsquo;en faire part.<br \/>\nAmusez-vous bien \ud83d\ude09<\/p>\n<div class=\"sources\">\n<h2>Liens utiles :<\/h2>\n<ul>\n<li><a href=\"http:\/\/code.google.com\/p\/zen-coding\/\" title=\"D\u00e9couvrir le projet Zen Coding (nouvelle fen\u00eatre)\" hreflang=\"en\" target=\"_blank\">Zen Coding Project<\/a><\/li>\n<li><a href=\"http:\/\/code.google.com\/p\/zen-coding\/downloads\/list\" title=\"T\u00e9l\u00e9charger la version du plugin Zen Coding correspondant \u00e0 votre logiciel (nouvelle fen\u00eatre)\" target=\"_blank\" hreflang=\"en\">Zen Coding Downloads<\/a><\/li>\n<li><a href=\"http:\/\/www.alsacreations.com\/astuce\/lire\/1311-snippets-zencoding-personnalises.html\" target=\"_blank\">Id\u00e9es de snippets pour ZenCoding<\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Beaucoup d&rsquo;entre vous doivent certainement conna\u00eetre le plugin Zen Coding, ou au moins avoir entendu ou lu ce nom quelque part. Ce plugin vous permet de gagner en productivit\u00e9 et en zenitude sur les t\u00e2ches les plus r\u00e9barbatives du travail d&rsquo;int\u00e9gration. Bien s\u00fbr il ne fait pas tout \u00e0 votre place, il simplifie principalement la [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":675,"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":[17,50,9],"tags":[217,522,214,51,213],"coauthors":[597],"class_list":["post-640","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-css3","category-ressources-telechargements","category-tutoriels","tag-code","tag-emmet","tag-notepad","tag-plugin","tag-zen-coding"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/640","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=640"}],"version-history":[{"count":0,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/640\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/675"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=640"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=640"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=640"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=640"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}