{"id":24,"date":"2020-10-25T19:30:07","date_gmt":"2020-10-25T18:30:07","guid":{"rendered":"https:\/\/cours.artecom.studio\/nepduweb\/?p=24"},"modified":"2023-09-12T12:40:21","modified_gmt":"2023-09-12T10:40:21","slug":"etre-bien-outille","status":"publish","type":"post","link":"https:\/\/cours.artecom.studio\/nepduweb\/2020\/10\/25\/etre-bien-outille\/","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><\/div>\n\n\n\n

Un \u00e9diteur de texte : Brackets<\/em><\/h3>\n\n\n\n

Brackets<\/em> en anglais, \u00e7a veut dire plein de chose, et notamment crochet<\/em> (dans l\u2019univers typographique). D\u2019o\u00f9 le logo\u2026<\/p>\n\n\n\n

\"\"
Son nom, il le signe \u00e0 la pointe du pixel, d’un [] qui veut dire Brackets<\/figcaption><\/figure><\/div>\n\n\n\n

Dans un billet ult\u00e9rieur, je vous montrerais comment personnaliser Brackets pour en faire un outil non seulement pratique et fonctionnel, mais aussi\u2026 beau. Oui, beau.<\/p>\n\n\n\n

En attendant, si ce n\u2019est pas d\u00e9j\u00e0 le cas, t\u00e9l\u00e9chargez la derni\u00e8re version du logiciel sur le site qui lui est d\u00e9di\u00e9<\/a><\/strong>. \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

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

Le passage au distanciel m’oblige \u00e0 ajouter un logiciel en ligne \u00e0 Brackets : il s’agit de JS Bin<\/a><\/strong>. Oui, ce nom est moche, mais JS, c’est pour JavaScript, le langage dans lequel il est \u00e9crit, et Bin c’est pour\u2026 poubelle\u2026 ce qui veut dire que le logiciel est pr\u00e9vu pour tester du code qu’on jette ensuite.<\/p>\n\n\n\n

\"\"
une fen\u00eatre de travail de JS Bin, avec un tout petit exemple de code que vous saurez \u00e9crire\u2026 mardi \u00e0 12h30 !<\/figcaption><\/figure>\n\n\n\n

L’int\u00e9r\u00eat de JS Bin, c’est <\/p>\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>
  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, je conserverais le code tel qu’on l’aura \u00e9crit, et je vous l’enverrais sur dropbox, pour que vous puissiez le retravailler dans Brackets, hors ligne.<\/li><\/ol>\n\n\n\n

    C’est in\u00e9dit, pour moi, mais \u00e7a devrait marcher. On verra \u00e7a d\u00e8s mardi prochain !<\/p>\n\n\n\n

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

    Puisqu\u2019il va faire l\u2019objet d\u2019un prochain tutoriel et que vous allez devoir l\u2019utiliser tr\u00e8s bient\u00f4t, voici le logiciel de FTP que nous utiliserons pour mettre en ligne nos sites: il s\u2019appelle Cyberduck<\/strong><\/a>.<\/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