{"id":111,"date":"2020-11-30T12:05:12","date_gmt":"2020-11-30T11:05:12","guid":{"rendered":"https:\/\/cours.artecom.studio\/nepduweb\/?p=111"},"modified":"2020-11-30T12:05:12","modified_gmt":"2020-11-30T11:05:12","slug":"emmet-et-coder-devient-zen","status":"publish","type":"post","link":"https:\/\/cours.artecom.studio\/nepduweb\/2020\/11\/30\/emmet-et-coder-devient-zen\/","title":{"rendered":"En mode projet : Emmet, et coder devient zen"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><em>En mode projet, \u00e9pisode 1<\/em><\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignright is-resized\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/mir-s3-cdn-cf.behance.net\/project_modules\/max_1200\/2ba3d933689792.56b3c28a74ccb.png?resize=243%2C322&#038;ssl=1\" alt=\"\" width=\"243\" height=\"322\"\/><\/figure><\/div>\n\n\n\n<p>La s\u00e9rie&nbsp;<em>EN MODE PROJET inaugure de nouveaux types de billets, principalement des tutoriels, permettant de r\u00e9aliser une des op\u00e9rations dont vous pourrez avoir besoin pour votre projet. Le billet est publi\u00e9 en parall\u00e8le des fichiers HTML et CSS sur la dropbox.<\/em><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toc_1\">Qu&rsquo;est-ce qu&rsquo;<em>Emmet<\/em> ?<\/h2>\n\n\n\n<p>Puisque nous sommes pass\u00e9s en mode projet, vous allez devoir r\u00e9\u00e9crire vos pages et vos CSS de z\u00e9ro, je vais vous pr\u00e9senter un outil g\u00e9nial pour \u00e9crire rapidement du code propre et sans faute : <strong>Emmet<\/strong>.<\/p>\n\n\n\n<p><strong>Emmet<\/strong> est une extension pour les principaux \u00e9diteurs de code, et nous avons la chance que Brackets en fasse partie. Le premier nom d&rsquo;Emmet \u00e9tait <strong>Zen Coding<\/strong>, et il \u00e9tait tellement bien nomm\u00e9 que je ne comprends toujours pas pourquoi ses auteurs ont chang\u00e9 de nom.<\/p>\n\n\n\n<p><br><strong>Le propos d&rsquo;Emmet est de faciliter l&rsquo;\u00e9criture du code en proposant des raccourcis clavier<\/strong>, avec une syntaxe inspir\u00e9e du CSS.<\/p>\n\n\n\n<p>Mais le mieux est que vous voyiez une d\u00e9mo:<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"video-container\"><iframe title=\"Emmet: Awesome time-saving plugin for HTML\/CSS editing\" width=\"740\" height=\"416\" src=\"https:\/\/www.youtube.com\/embed\/oNdp0G6p6gs?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<p>Impressionnant, non?<\/p>\n\n\n\n<p>Si<br>1. vous vous sentez \u00e0 l&rsquo;aise avec votre code HTML,<br>2. vous avez bien suivi mes conseils et pr\u00e9figur\u00e9 votre code HTML \u00e0 partir de votre wireframe ou de votre maquette,<\/p>\n\n\n\n<p>vous allez trouver tr\u00e8s ludique d&rsquo;\u00e9crire le code de votre page en quelques minutes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toc_2\">Installer Emmet<\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft is-resized\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/cours.artecom.studio\/nepduweb\/wp-content\/uploads\/sites\/2\/2019\/11\/bracket-emmet-install.jpg?resize=481%2C326&#038;ssl=1\" alt=\"\" class=\"wp-image-112\" width=\"481\" height=\"326\" srcset=\"https:\/\/i0.wp.com\/cours.artecom.studio\/nepduweb\/wp-content\/uploads\/sites\/2\/2019\/11\/bracket-emmet-install.jpg?w=756&amp;ssl=1 756w, https:\/\/i0.wp.com\/cours.artecom.studio\/nepduweb\/wp-content\/uploads\/sites\/2\/2019\/11\/bracket-emmet-install.jpg?resize=300%2C204&amp;ssl=1 300w\" sizes=\"(max-width: 481px) 100vw, 481px\" \/><\/figure><\/div>\n\n\n\n<p><strong>Emmet<\/strong> fait partie des extensions populaires sur <strong>Brackets<\/strong>. De ce fait, le package d&rsquo;installation est d\u00e9j\u00e0 en place et vous n&rsquo;avez qu&rsquo;\u00e0 aller le chercher en suivant le chemin habituel: <code>Brackets<\/code>&gt;<code>Fichier<\/code>&gt;<code>Gestionnaire d'extension<\/code>&gt;taper Emmet dans le champ de recherche&gt;cliquer sur le bouton <code>Activer<\/code>, puis sur le bouton <code>Fermer<\/code>. Et voil\u00e0, Emmet est install\u00e9 sur votre Brackets (vous pourrez reproduire la man\u0153uvre en cours si vous utilisez un des ordinateurs de la salle info).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toc_3\">Utiliser Emmet<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"toc_4\">Pour d\u00e9buter<\/h3>\n\n\n\n<p>Pour d\u00e9buter dans l&rsquo;utilisation d&rsquo;<strong>Emmet<\/strong>, je vous conseille de commencer par une s\u00e9rie simple en HTML, qui va correspondre \u00e0 la structuration de votre page.<br>Par exemple, vous pouvez commencer par la structure de premier niveau (\u00e0 l&rsquo;int\u00e9rieur de votre <code>body<\/code>)<sup><a href=\"#fn1\">1<\/a><\/sup>.<br>Au premier niveau, on peut imaginer que vous voulez un <code>header<\/code>, une <code>nav<\/code>, un <code>main<\/code>, et un <code>footer<\/code>.<br>Avec <strong>Emmet<\/strong>, vous n&rsquo;avez qu&rsquo;\u00e0 taper, juste en dessous de <code>header+nav+main+footer<\/code>, puis tabulation (\u21e5) apr\u00e8s la balise ouvrante du body pour obtenir le r\u00e9sultat suivant:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;header>&lt;header>\n&lt;nav>\/nav>\n&lt;main>&lt;\/main>\n&lt;footer>&lt;\/footer><\/code><\/pre>\n\n\n\n<p>Ensuite, <strong>dans le <code>header<\/code><\/strong>, \u00e0 supposer que vous vouliez un titre et un sous-titre, tapez <code>h1+h2<\/code> pour obtenir<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h1>&lt;\/h1>\n&lt;h2>&lt;\/h2><\/code><\/pre>\n\n\n\n<p>Vous avez compris le principe ? OK, on peut entrer dans le vif du sujet.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"toc_5\">Int\u00e9grer les niveaux de profondeur<\/h3>\n\n\n\n<p>Emmet permet d&rsquo;\u00e9crire des balises s\u0153urs (de m\u00eame niveau), mais aussi des balises enfants. Pour la navigation, par exemple, vous pouvez \u00e9crire dans <code>nav<\/code>: <code>ul&gt;li<\/code> pour obtenir<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;ul>\n  &lt;li>&lt;\/li>\n&lt;\/ul><\/code><\/pre>\n\n\n\n<p>Mais un menu de navigation int\u00e8gre plusieurs \u00e9l\u00e9ments, et \u00e7a serait chouette de pouvoir les \u00e9crire en une fois; et bien, Emmet le fait, en utilisant <code>*<\/code> comme multiplicateur. Ainsi, en \u00e9crivant <code>ul&gt;li*4<\/code>, j&rsquo;obtiens<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;ul>\n&lt;li>&lt;\/li>\n&lt;li>&lt;\/li>\n&lt;li>&lt;\/li>\n&lt;li>&lt;\/li>\n&lt;\/ul>\n<\/code><\/pre>\n\n\n\n<p>L\u00e0, \u00e7a devient int\u00e9ressant, <strong>d&rsquo;autant qu&rsquo;on peut aussi remonter dans l&rsquo;arborescence avec le signe <\/strong><code><strong>^<\/strong><\/code> (l&rsquo;accent circonflexe). <\/p>\n\n\n\n<p>Par exemple, je veux <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>3 articles <\/li><li>avec chacun un titre, un sous titre, et trois paragraphes, <\/li><li>et en plus, je veux un pied de page au m\u00eame niveau que mes articles \u00e0 la fin ? <\/li><\/ul>\n\n\n\n<p>Rien de plus simple avec <strong>Emmet<\/strong>: <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>je tape <code>article*3&gt;h1+h2+p*3^footer<\/code>, puis <code>tabulation<\/code>, <\/li><li>et j&rsquo;obtiens<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;article>\n  &lt;h1>&lt;\/h1>\n  &lt;h2>&lt;\/h2>\n  &lt;p>&lt;\/p>\n  &lt;p>&lt;\/p>\n  &lt;p>&lt;\/p>\n&lt;\/article>\n&lt;article>\n  &lt;h1>&lt;\/h1>\n  &lt;h2>&lt;\/h2>\n  &lt;p>&lt;\/p>\n  &lt;p>&lt;\/p>\n  &lt;p>&lt;\/p>\n&lt;\/article>\n&lt;article>\n  &lt;h1>&lt;\/h1>\n  &lt;h2>&lt;\/h2>\n  &lt;p>&lt;\/p>\n  &lt;p>&lt;\/p>\n  &lt;p>&lt;\/p>\n&lt;\/article>\n&lt;footer>&lt;\/footer><\/code><\/pre>\n\n\n\n<p>Elle est pas belle, la vie ?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"toc_6\">Emmet de la classe et des id dans son code?<\/h3>\n\n\n\n<p><em>Oui, je l&rsquo;admets, c&rsquo;est un jeu de mots vraiment capilotract\u00e9.<\/em><\/p>\n\n\n\n<p>Et si on ajoutait aussi les ID et les classes dans son HTML avec Emmet ? L\u00e0 aussi, les d\u00e9veloppeurs ont trouv\u00e9 un moyen ing\u00e9nieux d&rsquo;int\u00e9grer classe et id aux raccourcis :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>pour obtenir une <code>div<\/code> avec une classe (\u201cdesc\u201d, par exemple, pour description), il suffit de taper\u2026 <code>.desc<\/code>; Emmet propose une div par d\u00e9faut lorsqu&rsquo;il est dans un contexte libre;<\/li><li>sinon, il suffit de nommer la balise et de lui ajouter sa classe ou son id: li#chanson pour obtenir <code>&lt;li id=\"chanson\"&gt;&lt;\/li&gt;<\/code>, ou <code>h2.recette<\/code> pour obtenir <code>&lt;h2 class=\"recette\"&gt;&lt;\/h2&gt;<\/code>.<\/li><\/ul>\n\n\n\n<p><strong>Plus encore, on peut num\u00e9roter les \u00e9l\u00e9ments en utilisant <\/strong><code><strong>$<\/strong><\/code><strong>.&nbsp;<\/strong><\/p>\n\n\n\n<p>Pour un menu, \u00e7a devient vraiment int\u00e9ressant : en \u00e9crivant <code>nav&gt;ul&gt;li#chanteur$*4&gt;a<\/code>, on obtient<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;nav>\n &lt;ul>\n  &lt;li id=\"chanteur1\">&lt;a href=\"\">&lt;\/a>&lt;\/li>\n  &lt;li id=\"chanteur2\">&lt;a href=\"\">&lt;\/a>&lt;\/li>\n  &lt;li id=\"chanteur3\">&lt;a href=\"\">&lt;\/a>&lt;\/li>\n  &lt;li id=\"chanteur4\">&lt;a href=\"\">&lt;\/a>&lt;\/li>\n &lt;\/ul>\n&lt;\/nav><\/code><\/pre>\n\n\n\n<p>Y a plus qu&rsquo;\u00e0 remplacer les chanteurs par leur vrai nom, mettre les url ou les ancres qui vont bien, et hop, votre menu est termin\u00e9\u2026 C&rsquo;est beau non?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"toc_7\">Aller plus haut<\/h3>\n\n\n\n<p>A peu pr\u00e8s \u00e0 l&rsquo;\u00e9poque o\u00f9 vous naissiez, vos parents \u00e9coutaient peut-\u00eatre malgr\u00e9 un tube qui passait en boucle \u00e0 la radio, d&rsquo;une chanteuse \u201c\u00e0 voix\u201d un peu tomb\u00e9e dans l&rsquo;oubli aujourd&rsquo;hui.<br>\u00c7a s&rsquo;appelait \u201cAller plus haut\u00a0\u00bb<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"video-container\"><iframe title=\"Tina Arena - Aller plus haut (Official Music Video)\" width=\"740\" height=\"416\" src=\"https:\/\/www.youtube.com\/embed\/l4n6x24RRM4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<p>Bon ok, c&rsquo;est un gros d\u00e9tour pour justifier mon titre \ud83d\ude09 (j&rsquo;avais pens\u00e9 \u00e0 <em>aller plus loin<\/em>, mais c&rsquo;\u00e9tait plus marrant comme \u00e7a\u2026).<\/p>\n\n\n\n<p>Maintenant que vous connaissez <strong>Emmet<\/strong>, et que vous commencez \u00e0 le prendre en main, \u00e7a vaut le coup d&rsquo;apprendre les quelques raccourcis qui vous le rendront essentiel et qui augmenteront sensiblement votre efficacit\u00e9.<\/p>\n\n\n\n<p>Trois sources en fran\u00e7ais peuvent vous \u00eatre extr\u00eamement utile pour cela:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>l&rsquo;article de <strong>La Cascade<\/strong> intitul\u00e9 <a href=\"https:\/\/la-cascade.io\/une-liste-de-raccourcis-emmet\/\">Raccourcis et astuces Emmet<\/a>,<\/li><li>un autre article de La Cascade focalis\u00e9 sur <a href=\"https:\/\/la-cascade.io\/emmet-un-turbo-dans-votre-css\/\">l&rsquo;\u00e9criture de CSS avec Emmet (Emmet, un turbo dans votre CSS)<\/a>),<sup><a href=\"#fn2\">2<\/a><\/sup><\/li><li>le <a href=\"https:\/\/www.grafikart.fr\/tutoriels\/emmet-376\">tuto vid\u00e9o de Grafikart<\/a> sur Emmet &#8211; \u00e0 mon avis le meilleur tuto sur Emmet en fran\u00e7ais.<\/li><\/ul>\n\n\n\n<p>Pour finir, <strong>Emmet<\/strong> a aussi une documentation et une <a href=\"https:\/\/docs.emmet.io\/cheat-sheet\/\"><em>cheatsheet<\/em><\/a> (un aide-m\u00e9moire) consultable en ligne et <em>cherchable<\/em> (<code>CMD<\/code>+<code>F<\/code> sur mac, <code>Ctrl<\/code>+<code>F<\/code> sur PC pour chercher dans le navigateur), ou t\u00e9l\u00e9chargeable au format PDF. Si vous ne trouvez pas intuitivement un raccourci, il suffit de le chercher dans l&rsquo;aide-m\u00e9moire.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toc_8\">Mais pourquoi vous ne nous en parlez que <em>maintenant<\/em> ?<\/h2>\n\n\n\n<p>D&rsquo;ici, j&rsquo;entends r\u00e2ler certain\u00b7e\u00b7s d&rsquo;entre vous: <em>\u00ab\u00a0mais pourquoi nous montrer \u00e7a seulement maintenant, alors qu&rsquo;on aurait pu gagner un temps de dingue ?\u201d<\/em><\/p>\n\n\n\n<p>Parce qu&rsquo;<strong>Emmet<\/strong> est inutile tant qu&rsquo;on n&rsquo;a pas assez de connaissances en HTML et CSS pour savoir ce qu&rsquo;on veut obtenir. C&rsquo;est la raison pour laquelle je ne vous ai pas pr\u00e9sent\u00e9 ce plug-in avant que vous ayez un certain niveau en HTML et CSS.<\/p>\n\n\n\n<p><strong>C&rsquo;est aussi pourquoi <em>Emmet<\/em> ne va pas \u00e0 tout le monde. IL peut vous faire gagner du temps, mais si vous n&rsquo;arrivez pas \u00e0 l&rsquo;utiliser, il vaut mieux continuer \u00e0 taper votre code comme avant.<\/strong><\/p>\n\n\n\n<p>Allez, \u00e0 mardi, <em>en mode projet<\/em> !<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<ol class=\"wp-block-list\"><li>On va partir du principe que votre page est d\u00e9j\u00e0 enregistr\u00e9e, et qu&rsquo;elle contient d\u00e9j\u00e0 sa balise <code>html<\/code> englobante, \u00e0 l&rsquo;int\u00e9rieur de laquelle vous avez d\u00e9j\u00e0 \u00e9crit la balise <code>head<\/code> et son contenu, et la balise <code>body<\/code>, qu&rsquo;on va commencer \u00e0 remplir.&nbsp;<a href=\"#fnref1\">\u21a9<\/a><\/li><li>Les articles de <a href=\"https:\/\/la-cascade.io\/\"><em>la Cascade<\/em><\/a> sont des traductions en fran\u00e7ais d&rsquo;articles importants de d\u00e9veloppeurs anglophones.&nbsp;<a href=\"#fnref2\">\u21a9<\/a><\/li><\/ol>\n","protected":false},"excerpt":{"rendered":"<p>En mode projet, \u00e9pisode 1 La s\u00e9rie&nbsp;EN MODE PROJET inaugure de nouveaux types de billets, principalement des tutoriels, permettant de r\u00e9aliser une des op\u00e9rations dont vous pourrez avoir besoin pour&#46;&#46;&#46;<\/p>\n","protected":false},"author":2,"featured_media":114,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[10,16,9,4,15],"tags":[17,43,40,21,44,42,41],"class_list":["post-111","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-a-telecharger","category-mode-demploi","category-outils","category-pduweb","category-tutoriel","tag-brackets","tag-css","tag-emmet","tag-extension","tag-html","tag-outil","tag-zen-coding"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/cours.artecom.studio\/nepduweb\/wp-content\/uploads\/sites\/2\/2019\/11\/amazon_zen_tv.png?fit=512%2C512&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/posts\/111","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/comments?post=111"}],"version-history":[{"count":5,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/posts\/111\/revisions"}],"predecessor-version":[{"id":375,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/posts\/111\/revisions\/375"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/media\/114"}],"wp:attachment":[{"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/media?parent=111"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/categories?post=111"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/tags?post=111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}