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
Un éditeur de texte : Brackets
Brackets en anglais, ça veut dire plein de chose, et notamment crochet (dans l’univers typographique). D’où le logo…
Dans un billet ultérieur, je vous montrerais comment personnaliser Brackets pour en faire un outil non seulement pratique et fonctionnel, mais aussi… beau. Oui, beau.
En attendant, si ce n’est pas déjà le cas, téléchargez la dernière version du logiciel sur le site qui lui est dédié. É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.
Un éditeur de texte en ligne : JS Bin
Le passage au distanciel m’oblige à ajouter un logiciel en ligne à Brackets : il s’agit de JS Bin. Oui, ce nom est moche, mais JS, c’est pour JavaScript, le langage dans lequel il est écrit, et Bin c’est pour… poubelle… ce qui veut dire que le logiciel est prévu pour tester du code qu’on jette ensuite.
L’intérêt de JS Bin, c’est
- 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.
- 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, je conserverais le code tel qu’on l’aura écrit, et je vous l’enverrais sur dropbox, pour que vous puissiez le retravailler dans Brackets, hors ligne.
C’est inédit, pour moi, mais ça devrait marcher. On verra ça dès mardi prochain !
Un logiciel de ftp : Cyberduck
Puisqu’il va faire l’objet d’un prochain tutoriel et que vous allez devoir l’utiliser très bientôt, voici le logiciel de FTP que nous utiliserons pour mettre en ligne nos sites: il s’appelle Cyberduck.
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).
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 !
