Être bien outillé

Me, my tools and I

Pour écrire nos sites et les publier en ligne, nous utiliserons quelques outils professionnels. En voici la liste, brève, illustrée, et accompagnée du lien de téléchargement de chaque outil sur son propre site…

Il existe toujours des alternatives à chacun des outils présentés, mais je ne vous montre que ceux que nous utiliserons en cours.
Si vous n’êtes pas totalement autonome avec les outils de votre choix, restez sur ceux-ci. je ne gèrerais pas en cours les problèmes d’outils individuels.

The Pro…Tools

Vous allez travailler avec plusieurs logiciels à différentes étapes de votre projet. Je vous en donne une liste complète ci-dessous, par ordre d’importance

Un éditeur de texte : Visual Studio Code (ou VSCodium, sa version totalement libre)

Visual Studio Code, c’est l’éditeur de texte et de code de Microsoft qui domine le marché depuis quelques années. Il faut dire que le logiciel vient après de nombreux éditeurs qui ont chacun apporté leur pierre à l’interaction humain-machine en apportant des innovations importantes, que VSCode a intégré directement.

Vous devez donc télécharger Visual Studio Code sur le site de Microsoft, et l’installer sur votre ordinateur. Ce sera votre principal outil de travail. Évitez les ~télécharger.com~ et autres ~c|net~ qui sont parfois des nids à logiciels crapuleux… et sur son site, vous aurez toujours la dernière version du logiciel, celle qui est normalement la plus à jour au niveau des fonctionnalités.

Pour celles et ceux d’entre vous qui sont sensibles à la problématique du logiciel libre, il existe une version de Visual Studio Code entièrement débarrassée des outils de télémétrie et de tracking de Microsoft : VSCodium. C’est exactement le même logiciel, mais quand vous l’utilisez, Microsoft ne recueille pas d’information. C’est la version que j’utiliserais en cours.

Un éditeur de texte en ligne : JS Bin

Pourquoi ajouter un éditeur en ligne ?

En cours, je vous montrerais souvent des morceaux de code à apprendre, modifier, commenter. Avec un éditeur de texte en ligne, on peut travailler ensemble sur la même interface et je peux vous demander, par exemple, de compléter le code que j’ai commencé à remplir. A la fin d’un cours, vous pouvez copier le code écrit dans l’éditeur en ligne et le coller dans votre projet sur VSCode/Codium.

J’ai choisi JS Bin pour sa grande simplicité (et pas pour son nom, on est bien d’accord). Vous allez sur le lien https://jsbin.com, et… c’est tout. Vous êtes devant un éditeur en ligne prêt à l’emploi.

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érer tout de suite si vous avez fait ou non une erreur…

L’intérêt de JS Bin, c’est

1. qu’il permet de visualiser en temps réel le résultat des modifications faites dans le code. Vous ajoutez une ligne de code, son résultat interprété (c’est-à-dire son apparence en ligne est aussitôt affichée.
2. qu’il permet une écriture de code collaborative : n’importe qui dispose du lien peut modifier le code et plusieurs personne peuvent écrire en même temps sur la même page de code. En cours et en ligne, ça va me permettre de vous laisser la main pour voir comment vous écrivez telle ou telle partie de code ou comment vous la modifier. À la fin du cours, vous pourrez récupérer le code tel qu’on l’aura écrit pour pouvoir le retravailler chez vous, hors ligne, dans VSCode.

Dernier point : il est nécessaire de créer un compte sur JSBin pour retrouver tous les mini projets que vous aurez écrit. Vous pouvez utiliser JSBin sans cela, mais une fois quitté votre navigateur, le bin sur lequel vous aurez travaillé sera perdu.

Un logiciel de ftp : Cyberduck

Très important, c’est le logiciel qui va vous permettre de mettre votre site en ligne. Vous travaillerez sur votre site en local, sur votre ordinateur. Pour qu’il devienne un site web, il faut que vous le déposiez en ligne sur un serveur qui lui attribuera une adresse, une URL à partir de laquelle votre site pourra être vu.

C’est là que Cyberduck entre dans la danse; c’est grâce à lui que vous mettrez en ligne et modifierez votre site web.

Ce logiciel est tellement important qu’il va faire l’objet d’un prochain tutoriel (vous allez devoir l’utiliser très bientôt) !

Grâce à lui, vous pourrez glisser-déposer vos fichiers en ligne ; vous verrez, c’est assez facile…

D’autres outils

Vous utilisez également d’autres types de logiciels pour mener à bien votre projet, en voici quelques exemples.

Des réducteurs d’image

C’est-à-dire des éditeurs d’images spécialisés dans la réduction de la taille des fichiers. et la réduction de la taille des fichiers, c’est essentiel pour le web : trop gros, les fichiers mettent trop de temps à charger, et… l’internaute a déjà changé de page quand l’image daigne enfin apparaître.
Pas forcément nécessaire de sortir Photoshop l’artillerie lourde pour ça, il existe plein d’outils pratique pour ce genre d’exercices.
Vous trouverez par exemple, en ligne, les outils suivants :

• ConvertImage;
• CompressJpeg;
• WebResizer;
• reduction-image ou sa version en mode avancé

Mais le simple gestionnaire d’images par défaut de votre ordinateur peut faire le job (sur Mac, Apple propose un petit tutoriel pour utiliser Aperçu, tandis que sur PC, Microsoft propose ce petit logiciel gratuit).

Des éditeurs de carte heuristique

L’appellation officielle, c’est outil de cartographie mentale: c’est bizarre, j’ai l’impression de parler d’un scanner de cerveau !
On utilisera ce type d’outils, plus connus sous leur nom anglais de mindmappers, pour représenter schématiquement l’arborescence de votre site.

Il existe pléthore de logiciels de ce type, mais ceux que je vous présente ci-dessous sont libres et gratuits.

Freeplane

Freeplane est donc un outil pour créer des cartes heuristiques, (ou mindmaps, en anglais): très complet, il devient un peu complexe à prendre en main si vous voulez utiliser toutes ses possibilités. Mais pour l’essentiel de la carte mentale, c’est-à-dire créer des branches, des nœuds enfants ou des nœuds frères, c’est aussi facile que les autres:

• Tabulation (la touche ⇥ ) crée un nœud enfant
• Entrée (ou retour chariot) crée un nœud frère (de même niveau)

Framindmap

Framindmap est un éditeur de carte heuristique libre en ligne, proposé par l’association de promotion du logiciel libre Framasoft.
Vous le trouverez à cette adresse. Il est nécessaire de créer un compte pour pouvoir éditer, importer, exporter ou envoyer un lien vers une mindmap, mais une fois le compte créé, vous pouvez y ajouter autant de mindmaps que vous le voulez.

Sur la version actuelle, vous pouvez importez des cartes heuristiques créées avec…Freeplane ! Ça peut aider à montrer votre mindmap à vos futurs commanditaires/partenaires sans avoir à vous déplacer pour les voir où leur demander de télécharger un logiciel pour voir vos documents).

Voilà, n’hésitez pas à donner votre avis sur ce billet dans les commentaires !