{"id":443,"date":"2026-05-26T00:06:19","date_gmt":"2026-05-25T22:06:19","guid":{"rendered":"https:\/\/cours.artecom.studio\/nepduweb\/?p=443"},"modified":"2026-05-26T00:06:19","modified_gmt":"2026-05-25T22:06:19","slug":"etre-bien-outille-2","status":"publish","type":"post","link":"https:\/\/cours.artecom.studio\/nepduweb\/2026\/05\/26\/etre-bien-outille-2\/","title":{"rendered":"\u00catre bien outill\u00e9"},"content":{"rendered":"\n

Me, my tools and I<\/h2>\n\n\n\n

Pour \u00e9crire nos sites et les publier en ligne, nous utiliserons quelques outils professionnels. En voici la liste, br\u00e8ve, illustr\u00e9e, et accompagn\u00e9e du lien de t\u00e9l\u00e9chargement de chaque outil sur son propre site\u2026<\/p>\n\n\n\n

Il existe toujours des alternatives \u00e0 chacun des outils pr\u00e9sent\u00e9s, mais je ne vous montre que ceux que nous utiliserons en cours.
\nSi vous n’\u00eates pas totalement autonome avec les outils de votre choix, restez sur ceux-ci. je ne g\u00e8rerais pas en cours les probl\u00e8mes d\u2019outils individuels.<\/strong><\/p>\n\n\n\n

The Pro\u2026Tools<\/h2>\n\n\n
\n
\"\"
Les musiciens sauront appr\u00e9cier ce jeu de mots \u00e0 sa juste valeur.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n

Vous allez travailler avec plusieurs logiciels \u00e0 diff\u00e9rentes \u00e9tapes de votre projet. Je vous en donne une liste compl\u00e8te ci-dessous, par ordre d’importance<\/p>\n\n\n\n

Un \u00e9diteur de texte : Visual Studio Code<\/em> (ou VSCodium<\/em>, sa version totalement libre)<\/h3>\n\n\n\n

Visual Studio Code, c’est l’\u00e9diteur de texte et de code de Microsoft qui domine le march\u00e9 depuis quelques ann\u00e9es. Il faut dire que le logiciel vient apr\u00e8s de nombreux \u00e9diteurs qui ont chacun apport\u00e9 leur pierre \u00e0 l’interaction humain-machine en apportant des innovations importantes, que VSCode a int\u00e9gr\u00e9 directement.<\/p>\n\n\n\n

Vous devez donc t\u00e9l\u00e9charger Visual Studio Code sur le site de Microsoft<\/a><\/strong>, et l’installer sur votre ordinateur. Ce sera votre principal outil de travail. \u00c9vitez les ~t\u00e9l\u00e9charger.com~ et autres ~c|net~ qui sont parfois des nids \u00e0 logiciels crapuleux\u2026 et sur son site, vous aurez toujours la derni\u00e8re version du logiciel, celle qui est normalement la plus \u00e0 jour au niveau des fonctionnalit\u00e9s.<\/p>\n\n\n\n

Pour celles et ceux d’entre vous qui sont sensibles \u00e0 la probl\u00e9matique du logiciel libre, il existe une version de Visual Studio Code enti\u00e8rement d\u00e9barrass\u00e9e des outils de t\u00e9l\u00e9m\u00e9trie et de tracking de Microsoft : VSCodium. C’est exactement le m\u00eame logiciel, mais quand vous l’utilisez, Microsoft ne recueille pas d’information. C’est la version que j’utiliserais en cours.<\/p>\n\n\n\n

Un \u00e9diteur de texte en ligne : JS Bin<\/em><\/h4>\n\n\n\n

Pourquoi ajouter un \u00e9diteur en ligne ? <\/p>\n\n\n\n

En cours, je vous montrerais souvent des morceaux de code \u00e0 apprendre, modifier, commenter. Avec un \u00e9diteur de texte en ligne, on peut travailler ensemble sur la m\u00eame interface et je peux vous demander, par exemple, de compl\u00e9ter le code que j’ai commenc\u00e9 \u00e0 remplir. A la fin d’un cours, vous pouvez copier le code \u00e9crit dans l’\u00e9diteur en ligne et le coller dans votre projet sur VSCode\/Codium.<\/p>\n\n\n\n

J’ai choisi JS Bin<\/a><\/strong> pour sa grande simplicit\u00e9 (et pas pour son nom, on est bien d’accord). Vous allez sur le lien https:\/\/jsbin.com<\/a><\/strong>, et\u2026 c’est tout. Vous \u00eates devant un \u00e9diteur en ligne pr\u00eat \u00e0 l’emploi.<\/p>\n\n\n\n

\"\"
une fen\u00eatre de travail de JS Bin, avec un tout petit exemple de code que vous saurez \u00e9crire tr\u00e8s bient\u00f4t !<\/figcaption><\/figure>\n\n\n\n

Comme vous le voyez sur l’image au dessus, vous pouvez taper du HTML qui s’affiche directement tel qu’il sera vu par un navigateur, et rep\u00e9rer tout de suite si vous avez fait ou non une erreur\u2026<\/p>\n\n\n\n

L’int\u00e9r\u00eat de JS Bin, c’est<\/p>\n\n\n\n

    \n
  1. qu’il permet de visualiser en temps r\u00e9el le r\u00e9sultat des modifications faites dans le code. Vous ajoutez une ligne de code, son r\u00e9sultat interpr\u00e9t\u00e9 (c’est-\u00e0-dire son apparence en ligne est aussit\u00f4t affich\u00e9e.<\/li>\n\n\n\n
  2. qu’il permet une \u00e9criture de code collaborative<\/em> : n’importe qui dispose du lien peut modifier le code et plusieurs personne peuvent \u00e9crire en m\u00eame temps sur la m\u00eame page de code. En cours et en ligne, \u00e7a va me permettre de vous laisser la main pour voir comment vous \u00e9crivez telle ou telle partie de code ou comment vous la modifier. \u00c0 la fin du cours, vous pourrez r\u00e9cup\u00e9rer le code tel qu’on l’aura \u00e9crit pour pouvoir le retravailler chez vous, hors ligne, dans VSCode.<\/li>\n<\/ol>\n\n\n\n

    Dernier point : il est n\u00e9cessaire de cr\u00e9er un compte sur JSBin pour retrouver tous les mini projets que vous aurez \u00e9crit. Vous pouvez utiliser JSBin sans cela, mais une fois quitt\u00e9 votre navigateur, le bin<\/em> sur lequel vous aurez travaill\u00e9 sera perdu.<\/p>\n\n\n\n

    Un logiciel de ftp : Cyberduck<\/em><\/h3>\n\n\n
    \n
    \"\"
    Le Cyber Canard<\/figcaption><\/figure>\n<\/div>\n\n\n

    Tr\u00e8s important, c’est le logiciel qui va vous permettre de mettre votre site en ligne<\/em>. Vous travaillerez sur votre site en local, sur votre ordinateur. Pour qu’il devienne un site web, il faut que vous le d\u00e9posiez en ligne sur un serveur qui lui attribuera une adresse, une URL \u00e0 partir de laquelle votre site pourra \u00eatre vu.<\/p>\n\n\n\n

    C’est l\u00e0 que Cyberduck<\/strong><\/a> entre dans la danse; c’est gr\u00e2ce \u00e0 lui que vous mettrez en ligne et modifierez votre site web.<\/p>\n\n\n\n

    Ce logiciel est tellement important qu’il va faire l\u2019objet d\u2019un prochain tutoriel (vous allez devoir l\u2019utiliser tr\u00e8s bient\u00f4t) !<\/p>\n\n\n\n

    Gr\u00e2ce \u00e0 lui, vous pourrez glisser-d\u00e9poser vos fichiers en ligne ; vous verrez, c\u2019est assez facile\u2026<\/p>\n\n\n\n

    D’autres outils<\/h3>\n\n\n\n

    Vous utilisez \u00e9galement d’autres types de logiciels pour mener \u00e0 bien votre projet, en voici quelques exemples.<\/p>\n\n\n\n

    Des r\u00e9ducteurs d’image<\/em><\/h4>\n\n\n\n

    C’est-\u00e0-dire des \u00e9diteurs d’images sp\u00e9cialis\u00e9s dans la r\u00e9duction de la taille des fichiers. et la r\u00e9duction de la taille des fichiers, c’est essentiel pour le web<\/strong> : trop gros, les fichiers mettent trop de temps \u00e0 charger, et\u2026 l’internaute a d\u00e9j\u00e0 chang\u00e9 de page quand l’image daigne enfin appara\u00eetre.
    Pas forc\u00e9ment n\u00e9cessaire de sortir Photoshop<\/del> l’artillerie lourde pour \u00e7a, il existe plein d’outils pratique pour ce genre d’exercices.
    Vous trouverez par exemple, en ligne, les outils suivants :<\/p>\n\n\n\n