{"id":34,"date":"2020-11-13T18:17:00","date_gmt":"2020-11-13T17:17:00","guid":{"rendered":"https:\/\/cours.artecom.studio\/nepduweb\/?p=34"},"modified":"2020-11-13T18:53:01","modified_gmt":"2020-11-13T17:53:01","slug":"passer-le-grand-brackets-episode-1","status":"publish","type":"post","link":"https:\/\/cours.artecom.studio\/nepduweb\/2020\/11\/13\/passer-le-grand-brackets-episode-1\/","title":{"rendered":"Passer le grand Brackets &#8211; \u00e9pisode 1"},"content":{"rendered":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"426\" height=\"200\" src=\"https:\/\/i0.wp.com\/cours.artecom.studio\/nepduweb\/wp-content\/uploads\/sites\/2\/2019\/10\/braquet.jpg?resize=426%2C200&#038;ssl=1\" alt=\"\" class=\"wp-image-38\" srcset=\"https:\/\/i0.wp.com\/cours.artecom.studio\/nepduweb\/wp-content\/uploads\/sites\/2\/2019\/10\/braquet.jpg?w=426&amp;ssl=1 426w, https:\/\/i0.wp.com\/cours.artecom.studio\/nepduweb\/wp-content\/uploads\/sites\/2\/2019\/10\/braquet.jpg?resize=300%2C141&amp;ssl=1 300w\" sizes=\"(max-width: 426px) 100vw, 426px\" \/><figcaption><a href=\"http:\/\/<a href=&quot;#fn1&quot;>1<\/a><\/p>\u00ab\u00a0>Oui, le titre est un jeu de mots\u2026<\/a><\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><em>Je <strong><em>th\u00e8me<\/em><\/strong>, moi non plus<\/em> <a href=\"#fn2\">2<\/a><\/h2>\n\n\n\n<p>Puisque nous utilisons tous <strong>Brackets<\/strong> pour \u00e9crire notre code, voici un billet pour en am\u00e9liorer l\u2019usage en l\u2019augmentant de quelques extensions suppl\u00e9mentaires. Commen\u00e7ons par les th\u00e8mes qui agr\u00e9mentent la colloration syntaxique de nos codes HTML et CSS.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Mise \u00e0 jour<\/h2>\n\n\n\n<p><strong>Brackets<\/strong> \u00e9tant un logiciel jeune, <em>open source<\/em> et en d\u00e9veloppement constant, il est important de le mettre r\u00e9guli\u00e8rement \u00e0 jour. C\u2019est moins crucial aujourd\u2019hui que le logiciel a une base stable, mais, parfois, quand on a une fonctionnalit\u00e9 qui ne marche pas tr\u00e8s bien, une mise \u00e0 jour peut r\u00e9soudre le probl\u00e8me. Vous pouvez toujours trouver la version la plus r\u00e9cente sur <a href=\"http:\/\/brackets.io\/\">le site de <strong>Brackets<\/strong><\/a> en cliquant sur le gros bouton bleu de t\u00e9l\u00e9chargement.<a href=\"#fn3\">3<\/a> Les Macs de la fac seront mis \u00e0 jour au fur et \u00e0 mesure, signalez-moi en cours si une version est trop ancienne. On fait normalement une mise \u00e0 jour compl\u00e8te deux fois par an.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Pourquoi choisir un th\u00e8me ?<\/h2>\n\n\n\n<p>Les th\u00e8mes par d\u00e9faut de Brackets sont corrects, mais on a remarqu\u00e9 en cours qu\u2019ils n\u2019\u00e9taient pas des plus pr\u00e9cis pour le CSS. Un th\u00e8me explicite, c\u2019est un th\u00e8me qui permet d\u2019une part de distinguer visuellement, dans la CSS :  <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>les appels de balise HTML<\/li><li>les classes,<\/li><li>les ID,<\/li><\/ul>\n\n\n\n<p>et qui permet de r\u00e9duire une d\u00e9claration CSS d\u2019autre part.<\/p>\n\n\n\n<p>Voici par exemple la diff\u00e9rence entre trois th\u00e8mes sombres, du moins (le th\u00e8me par d\u00e9faut) au plus d\u00e9taill\u00e9.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"740\" height=\"283\" src=\"https:\/\/i0.wp.com\/cours.artecom.studio\/nepduweb\/wp-content\/uploads\/sites\/2\/2019\/10\/css-brackets-themes.jpg?resize=740%2C283&#038;ssl=1\" alt=\"\" class=\"wp-image-35\" srcset=\"https:\/\/i0.wp.com\/cours.artecom.studio\/nepduweb\/wp-content\/uploads\/sites\/2\/2019\/10\/css-brackets-themes.jpg?w=970&amp;ssl=1 970w, https:\/\/i0.wp.com\/cours.artecom.studio\/nepduweb\/wp-content\/uploads\/sites\/2\/2019\/10\/css-brackets-themes.jpg?resize=300%2C115&amp;ssl=1 300w, https:\/\/i0.wp.com\/cours.artecom.studio\/nepduweb\/wp-content\/uploads\/sites\/2\/2019\/10\/css-brackets-themes.jpg?resize=768%2C294&amp;ssl=1 768w\" sizes=\"(max-width: 740px) 100vw, 740px\" \/><figcaption>le m\u00eame code CSS vu successivement dans les th\u00e8mes Dark, Sunburst et Codecademy<\/figcaption><\/figure>\n\n\n\n<p>Les deux derniers distinguent tr\u00e8s bien les <em>classes<\/em> des <em>ID<\/em>, alors que le th\u00e8me dark ne les distinguent pas visuellement (le code les distinguent toujours dans les trois cas, <code>.xxx<\/code> d\u00e9signant une <em>classe<\/em>, <code>#xxx<\/code> d\u00e9signant un <em>ID<\/em>).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><em>My favorite theme<\/em><a href=\"#fn4\">4<\/a> : <strong>Monokai<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/num4com.artecom-life.fr\/wp-content\/uploads\/sites\/24\/2017\/10\/html-css-brackets-monokai-darkness2.jpg?w=610\" alt=\"\"\/><figcaption>HTML et CSS avec Monokai Darkness Reborn<\/figcaption><\/figure>\n\n\n\n<p>Personnellement, j\u2019utilise par d\u00e9faut le th\u00e8me <strong>Monokai<\/strong>, qui a \u00e9t\u00e9 popularis\u00e9 comme th\u00e8me par d\u00e9faut de <a href=\"https:\/\/sublimetext.com\/\"><strong>SublimeText<\/strong><\/a> (la <em>rolls des \u00e9diteurs<\/em>, mais pas forc\u00e9ment facile \u00e0 conduire). <strong>Monokai<\/strong> a \u00e9t\u00e9 d\u00e9clin\u00e9 de nombreuses mani\u00e8res, au point qu\u2019il y a maintenant plusieurs dizaines de th\u00e8mes <strong>Monokai<\/strong> d\u00e9riv\u00e9s de l\u2019original. Le plus complet d\u2019entre eux, \u00e0 ma connaissance, pour ce qui concerne l\u2019affichage du CSS, est <strong>Monokai Darkness Reborn<\/strong>, qui diff\u00e9rencie les <em>classes<\/em> des <em>ID<\/em> dans la CSS, tout en conservant les couleurs du <strong>Monokai<\/strong> classique en HTML (celles dont je me suis inspir\u00e9 dans mes diaporamas).  <\/p>\n\n\n\n<p>Il est aussi possible d\u2019utiliser les th\u00e8mes d\u2019interface connues: par exemple, le th\u00e8me inspir\u00e9 de <a href=\"https:\/\/www.codecademy.com\/fr\">Codecademy<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"740\" height=\"595\" src=\"https:\/\/i0.wp.com\/cours.artecom.studio\/nepduweb\/wp-content\/uploads\/sites\/2\/2020\/11\/brackets-codecademy-theme.jpg?resize=740%2C595&#038;ssl=1\" alt=\"\" class=\"wp-image-367\" srcset=\"https:\/\/i0.wp.com\/cours.artecom.studio\/nepduweb\/wp-content\/uploads\/sites\/2\/2020\/11\/brackets-codecademy-theme.jpg?resize=1024%2C824&amp;ssl=1 1024w, https:\/\/i0.wp.com\/cours.artecom.studio\/nepduweb\/wp-content\/uploads\/sites\/2\/2020\/11\/brackets-codecademy-theme.jpg?resize=300%2C241&amp;ssl=1 300w, https:\/\/i0.wp.com\/cours.artecom.studio\/nepduweb\/wp-content\/uploads\/sites\/2\/2020\/11\/brackets-codecademy-theme.jpg?resize=768%2C618&amp;ssl=1 768w, https:\/\/i0.wp.com\/cours.artecom.studio\/nepduweb\/wp-content\/uploads\/sites\/2\/2020\/11\/brackets-codecademy-theme.jpg?resize=520%2C418&amp;ssl=1 520w, https:\/\/i0.wp.com\/cours.artecom.studio\/nepduweb\/wp-content\/uploads\/sites\/2\/2020\/11\/brackets-codecademy-theme.jpg?resize=940%2C756&amp;ssl=1 940w, https:\/\/i0.wp.com\/cours.artecom.studio\/nepduweb\/wp-content\/uploads\/sites\/2\/2020\/11\/brackets-codecademy-theme.jpg?w=1284&amp;ssl=1 1284w\" sizes=\"(max-width: 740px) 100vw, 740px\" \/><figcaption>Le th\u00e8me de Codacademy, tout aussi d\u00e9taill\u00e9, mais moins contrast\u00e9<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Installer un th\u00e8me dans <em>Brackets<\/em><\/h2>\n\n\n\n<p>Il existe trois fa\u00e7ons d\u2019installer une extension dans Brackets, qu\u2019il s\u2019agisse d\u2019un th\u00e8me ou d\u2019autre chose. La premi\u00e8re consiste \u00e0 utiliser l\u2019installeur int\u00e9gr\u00e9 \u00e0 Brackets et \u00e0 chercher dans les modules d\u00e9j\u00e0 list\u00e9s.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Installer un th\u00e8me d\u00e9j\u00e0 list\u00e9<\/h3>\n\n\n\n<p>Pour installer un th\u00e8me dans <strong>Brackets<\/strong>,<a href=\"#fn5\">5<\/a> rien de plus simple :<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>ouvrir <strong>Brackets<\/strong>,<\/li><li>cliquer sur <strong>Fichier<\/strong> dans la barre de menu, et choisissez l\u2019\u00e9l\u00e9ment <strong>Gestionnaire d\u2019extensions<\/strong>,<\/li><li>dans la fen\u00eatre du gestionnaire, cliquez sur Th\u00e8mes, puis entrez le nom du th\u00e8me que vous voulez installer,<\/li><li>quand le th\u00e8me s\u2019affiche, cliquez sur le bouton <strong>installer<\/strong> du th\u00e8me.<\/li><\/ol>\n\n\n\n<p>Et voil\u00e0 ! Le nouveau th\u00e8me est maintenant disponible, il ne reste plus qu\u2019\u00e0 l\u2019activer :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>fermez le gestionnaire d\u2019extension,<\/li><li>cliquez sur <strong>Affichage<\/strong> dans la barre de menu, puis sur <strong>Th\u00e8mes\u2026<\/strong>,<\/li><li>cliquez dans <strong>th\u00e8me actuel<\/strong> et faites votre choix.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Installer un th\u00e8me trouv\u00e9 ailleurs<\/h3>\n\n\n\n<p>Il y a un choix pl\u00e9thorique de th\u00e8mes pour les \u00e9diteurs de code; vous pouvez peut-\u00eatre avoir envie d\u2019en choisir un autre ? Ou bien, le th\u00e8me que vous avez choisi n\u2019appara\u00eet pas dans le choix propos\u00e9 par Brackets ?<\/p>\n\n\n\n<p>Qu\u2019\u00e0 cela ne tienne, vous pouvez aller chercher vous-m\u00eame des th\u00e8mes pour Brackets sur le web\u2026 et plus particuli\u00e8rement sur <a href=\"https:\/\/github.com\/\"><strong>GitHub<\/strong><\/a>, <em>LA plateforme actuelle de d\u00e9p\u00f4t et d\u2019\u00e9change de code libre entre d\u00e9veloppeurs<\/em> (avant elle, il y a eu <a href=\"https:\/\/sourceforge.net\/\">SourceForge.net<\/a>, qui a maintenant d\u00e9cru en popularit\u00e9): c\u2019est sur <strong>GitHub<\/strong> que l\u2019on peut t\u00e9l\u00e9charger Brackets, et c\u2019est aussi sur <strong>GitHub<\/strong> que l\u2019on peut t\u00e9l\u00e9charger tous les <em>add-ons<\/em> (les \u00e9l\u00e9ments suppl\u00e9mentaires) \u00e0 <strong>Brackets<\/strong>.<\/p>\n\n\n\n<p><strong>GitHub<\/strong> fonctionne simplement, pour l\u2019utilisateur lambda. Vous cherchez quelque chose ? Sur la page d\u2019accueil de <strong>GitHub<\/strong>, il y a un moteur de recherche : taper votre requ\u00eate et lancez-l\u00e0, si elle correspond \u00e0 une source d\u00e9pos\u00e9e sur <strong>GitHub<\/strong>, le moteur va la trouver.  <br>\nPar exemple,<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>je cherche mon th\u00e8me <strong>Monokai Darkness Reborn<\/strong>; je rentre dans le champ de recherche&nbsp;&nbsp;: \u201cBrackets theme monokai darkness reborn\u201d, et j\u2019envoie&nbsp;;<\/li><li>le r\u00e9sultat de ma recherche me donne un lien, anandisrocking007\/Monokai-Darkness-Reborn (<strong>anandisrocking007<\/strong>, c\u2019est le pseudo du d\u00e9positaire);<\/li><li>une fois cliqu\u00e9 le lien, je me retrouve sur la page du th\u00e8me, et je n\u2019ai plus qu\u2019\u00e0 cliquer sur le bouton <code>Clone or Download<\/code> de la page, puis choisir <code>Download ZIP<\/code> (toute autre action est r\u00e9serv\u00e9e aux d\u00e9veloppeurs inscrits sur GitHub, et de toute fa\u00e7on beaucoup plus compliqu\u00e9e);<\/li><li>le fichier ZIP une fois t\u00e9l\u00e9charg\u00e9, il faut surtout ne pas l\u2019ouvrir. Il faut retourner au gestionnaire d\u2019extension de Brackets, et glisser le fichier zip dans la fen\u00eatre du gestionnaire et valider.<\/li><\/ol>\n\n\n\n<p>C\u2019est long \u00e0 expliquer, mais facile \u00e0 faire. Vous pouvez installer un th\u00e8me suppl\u00e9mentaire en moins d\u2019une minute.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Installer un th\u00e8me \u00e0 partir de son URL<\/h3>\n\n\n\n<p>Cette troisi\u00e8me mani\u00e8re est un raccourci par rapport \u00e0 la seconde.  <br>\nVous avez trouv\u00e9 votre th\u00e8me sur GitHub, puis vous avez ouvert Brackets et le gestionnaire d\u2019extensions :<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>sur la page GitHub de votre th\u00e8me, rep\u00e9rez le lien de t\u00e9l\u00e9chargement du th\u00e8me (il est en g\u00e9n\u00e9ral indiqu\u00e9 juste avant ou juste apr\u00e8s les copies d\u2019\u00e9cran du th\u00e8me);<\/li><li>copiez cette adresse, et dans le gestionnaire d\u2019extension, cliquez sur le lien en bleu <strong>Installer \u00e0 partir de l\u2019URl<\/strong>;<\/li><li>coller l\u2019URL que vous venez de copier et valider.<\/li><\/ol>\n\n\n\n<p>Et voil\u00e0, votre th\u00e8me est install\u00e9, vous n\u2019avez plus qu\u2019\u00e0 aller l\u2019activer comme d\u00e9crit plus haut.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Mode <em>je suis une t\u00eate br\u00fbl\u00e9e<\/em><\/h2>\n\n\n\n<p>Pour celles\u00b7ceux qui voudraient vraiment pousser le bouchon le plus loin, pourquoi pas cr\u00e9er votre th\u00e8me vous m\u00eame ?<\/p>\n\n\n\n<p>Tout est permis, et sur le web, <em>il y a toujours une <strong>webapp<\/strong> pour tout<\/em>. Voici donc une application en ligne pour <a href=\"https:\/\/tmtheme-editor.herokuapp.com\/\">cr\u00e9er son propre th\u00e8me<\/a> (en partant de z\u00e9ro ou en d\u00e9clinant un th\u00e8me existant).<\/p>\n\n\n\n<p>Mais c\u2019est \u00e0 vos risques et p\u00e9rils (vous \u00eates une t\u00eate br\u00fbl\u00e9e, ou bien ?).<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<ol class=\"wp-block-list\"><li>Ok, c\u2019est un jeu de mots \u00e0 tiroir, les amateurs de cyclisme <a href=\"http:\/\/www.cnrtl.fr\/definition\/braquet\">comprendront<\/a>.<\/li><li>Les amateurs de Serge Gainsbourg et Jane Birkin <a href=\"https:\/\/fr.wikipedia.org\/wiki\/Je_t%27aime%E2%80%A6_moi_non_plus\">comprendront<\/a> !&nbsp;<a href=\"#fnref2\"><\/a><\/li><li>Bizarrement, le bouton ne produit rien sur Firefox\/Mac au moment o\u00f9 j\u2019\u00e9cris ces lignes (mais \u00e7a marche pour Safari, allez comprendre !). Si jamais le bouton ne d\u00e9clenche pas de t\u00e9l\u00e9chargement chez vous, allez <a href=\"https:\/\/github.com\/adobe\/brackets\/releases\">sur ce lien<\/a> qui vous am\u00e8ne directement \u00e0 la page de t\u00e9l\u00e9chargement des diff\u00e9rentes versions de <strong>Brackets<\/strong>. Sur Mac vous devrez choisir le lien finissant par <code>.dmg<\/code>, sur PC, l\u2019un des deux liens finissant par <code>.deb<\/code>(il vous faut savoir <a href=\"http:\/\/www.commentcamarche.net\/faq\/19107-32-ou-64-bits-comment-savoir\">si votre version de Windows est en 32 bits ou en 64 bits<\/a>, et choisir la bonne version de Brackets).&nbsp;<a href=\"#fnref3\"><\/a><\/li><li>Encore une r\u00e9f\u00e9rence \u00e0 tiroir, les amateurs de John Coltrane <a href=\"https:\/\/youtu.be\/ZcN5LP4WLAA\">comprendront<\/a> !&nbsp;<a href=\"#fnref4\"><\/a><\/li><li>Pour obtenir le th\u00e8me <strong>Monokai Darkness Reborn<\/strong>, il faut installer le th\u00e8me <strong><a href=\"https:\/\/github.com\/rainje\/Monokai-Dark-Soda\">Monokai Dark Soda<\/a><\/strong>, qui est en fait un <em>package<\/em> de th\u00e8mes d\u00e9riv\u00e9s de Monokai.&nbsp;<\/li><\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Je th\u00e8me, moi non plus 2 Puisque nous utilisons tous Brackets pour \u00e9crire notre code, voici un billet pour en am\u00e9liorer l\u2019usage en l\u2019augmentant de quelques extensions suppl\u00e9mentaires. Commen\u00e7ons par&#46;&#46;&#46;<\/p>\n","protected":false},"author":2,"featured_media":66,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[10,9,4,15],"tags":[17,33,19,18],"class_list":["post-34","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-a-telecharger","category-outils","category-pduweb","category-tutoriel","tag-brackets","tag-monokai","tag-theme","tag-tuto"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/cours.artecom.studio\/nepduweb\/wp-content\/uploads\/sites\/2\/2019\/10\/braquet-dura-ice.jpg?fit=600%2C400&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/posts\/34","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=34"}],"version-history":[{"count":6,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/posts\/34\/revisions"}],"predecessor-version":[{"id":368,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/posts\/34\/revisions\/368"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/media\/66"}],"wp:attachment":[{"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/media?parent=34"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/categories?post=34"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/tags?post=34"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}