La Zone 51

Installer son atelier de codage pour le web

Publié le :

Installer son atelier de codage avant de vous lancer dans la création de votre site web est important. Prenez le temps de configurer votre ordinateur et vérifiez que tous les outils nécessaires sont installés et prêts à l'emploi.

Si vous parcourez les dizaines de livres d'informatique ou de programmation web disponibles sur le marché, vous pourriez penser qu'il vous faudra investir dans de nombreux logiciels pour créer un site internet.
Pourtant, la plupart des outils nécessaires se trouvent probablement sur votre ordinateur comme nous avons pu le voir, sous Windows, dans la création « une page web simple ».
Et si jamais vous ne possédez pas l'outil idéal, il existe de nombreux autres logiciels gratuits.

Les outils de base dont vous avez besoin

L'outil principal et le plus basique, est un éditeur de texte. Ce logiciel permet de modifier des fichiers en texte brut (pas de LibreOffice ou de Words ici !).
Vous l'utiliserez pour créer vos pages web.

Une fois votre page web créée, vous pouvez visualiser son apparence dans un navigateur web : c'est l'application que vous utilisez déjà pour consulter les sites web.

Puis, un logiciel de retouche d'image sera le compagnon vite indispensable de tout webmaster accompli. Il vous servira aussi pour créer des icones ou des illustrations simples dans le format png, bmp, ico…

Enfin, lorsque vous êtes satisfait de votre nouvelle page web, vous pouvez la publier sur Internet à l'aide d'« un client FTP » : c'est un utilitaire permettant de transférer des fichiers sur Internet via le protocole de transfert de fichiers (FTP). Nous aborderons les clients FTP en détail en fin de la partie débuter.

Outils de base Windows

Votre éditeur de texte : le Bloc-notes

Le premier outil que nous allons examiner est l'éditeur de texte. Windows est équipé d'un éditeur de texte très simple appelé Bloc-notes.
C'est en réalité le logiciel appelé NotePad qui se situe ici sur votre PC :
C:\WINDOWS\system32\notepad.exe.

Vous trouverez son raccourci système dans le menu « Démarrer ». Vous cliquez sur le répertoire « Accessoires Windows », et sélectionnez en cliquant sur Bloc-Notes ; si ce n'est déjà fait, créez un raccourci pour l'avoir disponible dans la barre des tâches (épingler dans la barre des tâches).

Fenêtre du menu démarrer montrant la création d'un raccourci pour le Bloc-notes
Création du raccourci pour le Bloc-notes.

De nombreux professionnels disposant de logiciels coûteux censés leur faire gagner du temps utilisent encore Bloc-notes pour de nombreuses tâches. Pourquoi ? Eh bien, grâce à sa simplicité, il est quasiment impossible de se tromper. Il se charge également beaucoup plus rapidement que les programmes de développement web complets. Il est dépourvu de fonctionnalités supplémentaires.

Votre navigateur web : Microsoft Edge

Une fois votre page web créée avec le Bloc-notes, vous aurez besoin d'un moyen de visualiser le résultat de votre travail. Vous connaissez déjà « Edge » qui désigne Microsoft Edge. Eh bien, il s'agit de votre navigateur installé sur Windows par défaut (présent ici : C:\Program Files (x86)\Microsoft\Edge\Application).

Il se trouve directement dans le menu « Démarrer », à l'index « M ».
Un raccourci est souvent présent dans :

Personnellement, je n'encombre pas mon bureau de raccouci.

Fenêtre du menu démarrer windows montrant l'accès à Microsoft Edge
Microsoft Edge : le navigateur installé par défaut sur un PC Windows.

Outils de base de Mac OS X

Comme Windows, le système d'exploitation Mac OS X dispose de nombreux outils prêts à l'emploi. Ces outils sont quasiment équivalents aux programmes Windows mentionnés ci-dessus.

Votre éditeur de texte : TextEdit

Si Windows propose le Bloc-notes, le Mac propose TextEdit, accessible depuis le dossier Applications.

Icone de l'éditeur de text TextEdit
Icone de l'éditeur de text TextEdit sur macOS.

Contrairement au Bloc-notes, TextEdit fonctionne par défaut comme un éditeur de texte enrichi. Vous pouvez ainsi modifier les polices, mettre le texte en gras et en italique, etc.
Comme, nous souhaitons utiliser TextEdit comme un éditeur de texte brut, vous devez ajuster certaines de ses préférences.

Démarrez TextEdit, sélectionnez « TextEdit » puis « Préférences » dans le menu pour afficher l'écran des préférences.
Sélectionnez « Texte brut » dans les attributs du nouveau document, puis « fermez » l'écran des préférences.
La prochaine fois que vous créerez un fichier dans TextEdit, ce sera un document au format texte brut.

Fenêtre de l'éditeur de text TextEdit
Fenêtre de l'éditeur de text TextEdit sur macOS.

Votre navigateur web : Safari

Safari est exclusif à macOS et iOS ; développé par Apple, avec une forte optimisation pour les appareils commercialisés par Apple, Safari est le navigateur installé par défaut sur votre mac.

Icone du navigateur Safari
Icone du navigateur Safari sur macOS.

Outils de base Linux

Il est question ici de la distribution Ubuntu, mais il en existe tant d'autres (j'utilise Debian sur mes serveurs distants et sur WSL).

Votre éditeur de texte : Text Editor

C'est en réalité un nom générique affiché dans l'interface. En fonction de la version d'Ubuntu, il peut s'agir de :

Pour le trouver, il suffit de cliquer sur l'icone Ubuntu en bas à gauche de l'écran et de rechercher l'icone Text Editor dans la liste des applications.

Image représentant l'icone Ubuntu et l'icone Text Editor
Icone Ubuntu à gauche et l'icone Text Editor.

Faites un cliquez glissez sur l'icone pour créer un racourci dans la barre de menu.

Image représentant le bureau des applications Ubuntu
Les applications dans Ubuntu : Text Editor fait partie de l'installation par défaut de Ubuntu.

Votre navigateur web : FireFox

Nous pouvons voir que le navigateur FireFox est déjà installé dans ubuntu et que son raccourci est présent dans le menu du bureau.

Icone du navigateur Firefox
Icone du navigateur Firefox sur Ubuntu.

Au-delà des outils de base

Vous pouvez certainement commencer avec les outils mentionnés ci-dessus. Cependant, une fois réalisé les quelques exercices d'initiation, vous souhaiterez plus de confort lors de l'édition du code de vos pages web. La coloration syntaxique sera une des options la plus appréciée (vue dans la leçon suivante).

D'innombrables autres éditeurs de texte et navigateurs web sont disponibles en téléchargement et beaucoup sont gratuits. Évidemment, il n'est pas question de les décrire tous ici. Je vous suggère une sélection d'applications gratuites à télécharger et à installer facilement vous-même.

Editeurs pour Windows

Gedit pour Windows version 3.20.1

Un éditeur gratuit simple avec coloration syntaxique.

Image d'une fenêtre et navigateur de fichier dans Gedit 3.20.1
Fenêtre dans Gedit.

Notepad++

Un éditeur gratuit bien complet avec coloration syntaxique.

Image d'une fenêtre et onglet dans Notepad++
Fenêtre et onglet dans Notepad++.

Visual Studio Code

Un éditeur gratuit très complet avec gestionnaire de projet.

Navigateurs pour Windows

Firefox Developer Edition

C'est une version spéciale de Firefox conçue pour les développeurs, avec des outils avancés préinstallés, une configuration optimisée pour le développement, et un thème sombre par défaut.

Je l'apprécie beaucoup pour son inspecteur CSS très complet, ses outils pour debugger les Grids, Flexbox, animation, typographie, accessibilité.
Il possède une console réseau puissante pour la visualisation des requêtes et prend en charge des dernières specifications web (parfois en avance sur Firefox « stable »).
Il gère aussi le profil utilisateur séparément : ne touche pas ton Firefox normal.

Brave

Brave est un navigateur basé sur Chromium (comme Chrome ou Edge), axé sur la vie privée, avec un bloqueur de publicités intégré, un moteur de recherche maison (Brave Search) et une interface légère.

Je l'utilise en complément de Firefox pour l'outils Lighthouse qui aide à améliorer la qualité des pages web : audits de performance, d'accessibilité, de référencement…

Autres navigateurs

Du texte du texte mais pas que

Vous pouvez créer un site web complet avec les seuls outils mentionnés ci-dessus, mais ce ne sera pas le site le plus attrayant du Web.
L'élément manquant, ce sont les images.
Pour les images qui servent à embellir l'aspect général du site, nous parlons alors de charte graphique (logo, bannière, fond, icone, bouton…)
Pour les images intégrées dans le texte qui constitue le contenu principal de la page web, ce peut-être des illustrations, des dessins techniques, des photographies, voir des animations.

Vous devrez donc pouvoir créer et manipuler des images de A à Z ; soit à partir de photos que vous avez prises, soit d'images que vous avez légalement le droit d'utiliser sur votre site web.

Outils graphiques Windows

Logiciels gratuits à installer

Outils graphiques macOS

Outils graphiques Linux Ubuntu