Installation des outils de base
Dans cet article, nous abordons les logiciels nécessaires pour faire du développement web simple et ce que vous devez installer dès maintenant, notamment un éditeur de code et quelques navigateurs web modernes.
| Prérequis : | Connaissance de base de votre système d'exploitation. |
|---|---|
| Objectifs d'apprentissage : |
|
Éditeurs de code
Un bon éditeur de code est l'un des outils les plus importants pour tout·e développeur·euse. En plus d'être l'endroit où vous écrivez votre code, les éditeurs de code offrent de nombreuses autres fonctionnalités. Nous avons consacré un article entier aux éditeurs de code plus loin dans la série.
Pour l'instant, nous vous recommandons d'installer Visual Studio Code (angl.), car il est disponible sur différentes plateformes, dispose d'un excellent ensemble de fonctionnalités et d'un bon support, et c'est l'éditeur que nous utilisons principalement. Installez-le dès maintenant pour pouvoir suivre le reste de cet article.
Navigateurs web modernes
Disposer de navigateurs web modernes est essentiel pour le développement web afin de pouvoir tester vos sites ou applications sur les navigateurs que vos visiteur·euse·s utiliseront. Il est aussi important de garder vos navigateurs à jour pour qu'ils prennent en charge les dernières technologies web et bénéficient des correctifs de sécurité les plus récents.
Les navigateurs les plus courants sont les suivants :
- Navigateurs de bureau :
- Chromium : Google Chrome, Opera, Brave, Microsoft Edge, Vivaldi.
- Gecko : Mozilla Firefox.
- WebKit : Apple Safari.
- Navigateurs mobiles/alternatifs :
- Chromium (Android) : Google Chrome, Opera, Brave, Microsoft Edge, Samsung Internet, Vivaldi.
- Gecko (Android) : Mozilla Firefox.
- WebKit (iOS) : Apple Safari.
Note : La plupart des navigateurs Android listés ci-dessus ont des versions iOS, mais elles étaient historiquement toutes basées sur le moteur WebKit d'Apple à cause des règles de l'App Store. Au moment de la rédaction, les navigateurs commencent à proposer des versions iOS basées sur leur propre moteur de rendu, suite à des évolutions réglementaires. Voir Apple autorise enfin les versions complètes de Chrome et Firefox sur iPhone (angl.).
La plupart des navigateurs modernes installent les mises à jour automatiquement, en appliquant les changements lors de leur redémarrage. Vous pouvez généralement vérifier les mises à jour sur la page « À propos » du navigateur. L'emplacement varie selon le navigateur et le système d'exploitation, par exemple :
- Firefox : Firefox > À propos de Firefox sur macOS, et menu > Aide > À propos de Firefox sur Windows.
- Chrome : Chrome > À propos de Google Chrome sur macOS, et menu > Aide > À propos de Google Chrome sur Windows.
Quels navigateurs installer
Pour l'instant, vous devriez installer quelques navigateurs de bureau et mobiles/alternatifs pour tester votre code. Si possible, installez au moins un navigateur de chaque sous-catégorie ci-dessus, afin de ne pas tester uniquement sur des navigateurs utilisant le même moteur de rendu.
Serveurs web locaux
Normalement, lorsque vous saisissez une adresse web dans un navigateur pour charger un site, les fichiers nécessaires à l'affichage du site sont récupérés depuis un serveur web distant. Vous en apprendrez plus sur ce fonctionnement dans l'article suivant de la série.
Lorsque vous créez un site localement (sur votre propre machine), vous pouvez souvent ouvrir le fichier HTML principal directement dans un navigateur pour le tester. Cependant, certains exemples nécessitent d'être exécutés via un serveur web local pour fonctionner correctement.
Installer un serveur web local
L'une des options les plus simples que nous ayons trouvées pour disposer d'un serveur local est d'utiliser une extension d'éditeur de code — ainsi, elle est disponible directement dans votre éditeur. Procédez ainsi dans Visual Studio Code :
- Ouvrez le panneau Extensions via le menu Affichage > Extensions.
- Dans la zone « Rechercher... » en haut du panneau, tapez « live preview ». Le premier résultat devrait être l'extension Live Preview créée par Microsoft.
- Cliquez sur cette option pour ouvrir la page d'information, qui explique comment l'utiliser.
- Appuyez sur le bouton Installer pour installer l'extension.
- Désormais, lorsque vous travaillez sur un fichier HTML dans l'éditeur, vous pouvez cliquer sur le bouton « Afficher l'aperçu » pour ouvrir l'exemple en direct dans un nouvel onglet.
Cette option est simple mais peu flexible. Plus tard, vous souhaiterez peut-être une solution de serveur local plus flexible, utilisable avec n'importe quel navigateur. Pour d'autres options (et plus d'informations sur l'utilité des serveurs locaux), voir Comment configurer un serveur de test local ?.
Éditeurs graphiques
Les développeur·euse·s web doivent souvent manipuler des fichiers image pour les sites qu'ils créent. Cela peut signifier concevoir/créer des éléments graphiques, mais souvent, les images sont fournies par un·e graphiste (collaborateur·rice ou prestataire), et le·la développeur·euse peut être amené·e à recadrer ou redimensionner les fichiers reçus.
Aucun des articles d'apprentissage sur MDN ne vous demande de créer vos propres images, mais certains peuvent vous demander de manipuler les fichiers fournis.
Nous vous recommandons de n'installer un éditeur graphique que lorsque vous en aurez besoin plus tard dans votre apprentissage. N'investissez pas dans un produit commercial coûteux à moins d'en avoir vraiment l'utilité.
Il existe de nombreux outils gratuits et services en ligne qui suffiront largement pour l'instant, par exemple :
- macOS inclut l'outil Aperçu. Il sert principalement à visualiser des images et PDF, mais propose aussi des fonctions utiles d'édition d'images (redimensionnement, rotation, recadrage, annotation, conversion de formats, etc.).
- L'application Photos de Windows propose des fonctionnalités similaires.
- Le site tinypng (angl.) offre un service gratuit pour compresser des PNG, JPEG, etc. C'est une tâche courante lors de la préparation d'images pour le web.
Côté solutions commerciales, Adobe Photoshop reste la référence pour la retouche photo, tandis que des programmes comme Sketch (angl.) sont plus adaptés à la création d'icônes et d'interfaces. On trouve aussi des alternatives populaires comme Figma, The Affinity Suite et Canva.
La plupart de ces applications proposent des versions d'essai ou des modes gratuits à tester. Il existe aussi d'excellents logiciels libres comme GIMP (angl.), Adobe Express ou Paint.NET (angl.).
Outils de gestion de versions
Les outils de gestion de versions permettent aux développeur·euse·s de gérer les fichiers sur des serveurs, de collaborer sur un projet, de partager du code et d'éviter les conflits d'édition. Actuellement, Git est le système de gestion de versions le plus populaire, avec des plateformes comme GitHub ou GitLab.
Même si ces outils sont essentiels en équipe, vous n'avez pas à vous en préoccuper pour l'instant. Un module dédié à la gestion de versions est prévu à la fin de la série des modules de base.
Applications de déploiement de site
Une fois votre site ou application terminé·e (en local ou sur un serveur de développement), vous voudrez le/la mettre en ligne sur un serveur web distant pour que vos utilisateur·ice·s puissent y accéder via une adresse web !
Il existe plusieurs façons de faire cela : acheter un hébergement et utiliser une application SFTP, utiliser un service comme GitHub Pages ou Netlify, ou encore partager rapidement une démo via CodePen ou JSFiddle.
Cette liste peut sembler impressionnante, mais ne vous inquiétez pas — vous n'avez pas besoin de tout savoir sur la publication de sites pour l'instant. Nous aborderons ce sujet à plusieurs reprises dans le cours. Vous aurez bientôt l'occasion de le pratiquer dans notre module Votre premier site web.