Au minimum, vous avez besoin de 2 outils pour travailler sur du web.
Un éditeur de code, ce sera Visual Studio Code.
Un navigateur standard, moderne, et efficace, ce sera Firefox.
Si vous voulez utiliser autre chose, allez-y, mais je ne serai pas responsable d'accomoder ce que j'écris. Votre config, votre problème.
Firefox
Le lien est facile à trouver, et ça s'installe aussi facilement que n'importe quelle application.
C'est là bas : https://www.mozilla.org/en-US/firefox/new/
et d'ailleurs si vous utilisez déjà firefox, et que vous voulez séparer votre navigateur de tout les jours de votre navigateur de travail, vous pouvez télécharger la version développeur de firefox ici : https://www.mozilla.org/en-US/firefox/developer/
Pourquoi ne pas vous recommander la version développeur directement? Parce que je ne vais pas vous faire utiliser de fonctionnalités spécifiques à la version développeur, donc autant rester sur la version standard qui bénéficie de plus de support de la communauté de par son usage plus répandu.
"Pourquoi firefox?"
Pour être honnête il n'existe que 3 navigateurs à l'heure qu'il est, safari, chrome, et firefox. Tout ce que vous avez envie d'ajouter à cette liste est soit utilisé par personne, soit chromium (le moteur de chrome) avec une couche de peinture différente, comme par exemple edge, opera, arc, et même "Samsung Internet" qui est utilisé par une quantité surprennante de gens.
Quoique, j'écrit "surprennante" mais on sait tous que ça vient du fait que c'est le navigateur par défaut d'un paquet de téléphones, et à quel point cette position de choix par défaut octroie des parts de marché gratuitement. En parlant de navigateur par défaut, ça m'ammène à safari. Pour ce qui est de safari je vais être sympa et juste m'arrêter au fait que la version de safari pour windows n'existe plus depuis 2007, donc ce n'est evidemment pas assez inclusif pour une salle de classe.
Pour ce qui est de(s) chrome(s), leurs équipes prennent des decisions questionnable, et uniquement parcequ'ils se savent en position de pouvoir forcer le standard avec leur 70%+ de parts de marché. Ils introduisent des fonctionnalité qui ne peuvent pas faire parti du standard commun à tous les navigateurs parce que ce sont de mauvaises idées sur le plan de la securité (comme webBLE et webSerial par exemples), et plus récemment (début 2024), ils ont pris une decsision que je trouve contre-educative pour un impact intulie dans l'absolu. Utiliser console.log() sur un élément html n'affiche plus l'objet correspondant mais le markup de l'élément, ce qui est proprement inutile et qui me forcerait à inclure la différence entre console.log() et console.dir() dans mes explications.
Pendant ce temps, les gens qui travaillent sur firefox font des choix qui tombent souvent juste et qui donnent des outils de développement avec une meilleure UX. Certes, firefox est mis à jour moins rapidement que chrome et n'as pas la fonctionnalité lighthouse, mais bon, unlightouse existe, offre plus, et est dispo sur tous les navigateurs si on prend le temps de l'installer.
En tout et pour tout c'est une mauvaise pratique de tester sur un seul navigateur, mais firefox est un bon navigateur de développement parceque si il propose des fonctionnalités que les autres navigateurs n'ont pas il est extrêmement probable que ça arrive chez les autres.
Vous remarquerez que mon site a des problèmes sur safari. Apple™️ nous déteste, je ne ferai pas d'efforts pour les accomoder. J'y repenserais quand ils arrêteront de souder des SSD, coller des batteries, de restreindre le développement d'applications pour iOS et macOS aux machines macOS ayant XCode et la myriade d'autres pratiques déloyales et anti-utilisateurs qu'ils emploient.
VScode
Ce que vous avez besoin de savoir à propos de VSCode
Vous pouvez le télécharger ici : https://code.visualstudio.com/download
Déjà, quand vous ouvrez VSCode on va vous montrer plusieurs choses à cliquer, on s'en fout, rien de tout ça nous intéresse, décochez le message qui est en bas, on ne veux plus voir cet écran (et si vraiment vous y tenez vous pourrez le retrouver via le menu Help > Welcome)
Et si maintenant vous fermez l'onglet "Welcome", vous aurez un VSCode vide. Je trouve que ça fait pas tant de boutons que ça, pour autant que j'entende des gens me dire qu'ils se sentent submergés par les possibilités, c'est pas Blender, ZBrush, ou un quelconque produit de chez Adobe ou Autodesk.
Pour le moment il y en a seulement 2 qui nous interessent et à la fin on aura un grand total de 3.
Avant de continuer, faites vous un dossier sur votre ordinateur dans lequel vous allez mettre vos projets de programmation. Par exemple, sur mes ordinateurs c'est D:\workspace sur windows et /storage/workspace sur linux. Chaque projet de programmation sera un dossier donc il va bien vous falloir un dossier dans lequel tous les mettre avant qu'ils finissent éparpillés. Une fois que vous l'avez vous pouvez vous faire un dossier vide dans votre dossier projet.
donnant une arborescence comme ceci
├───[Quelque part sur votre disque]
│ ├───projets
│ │ └───projet_1
Afin d'avoir une arborescence comme ceci d'ici quelques projets
├───[Quelque part sur votre disque]
│ ├───projets
│ │ ├───projet_1
│ │ ├───projet_2
│ │ ├───projet_3
│ │ ├───projet_4
│ │ └───projet_5
Maintenant vous pouvez ouvrir votre projet avec File > Open Folder... et ouvrir le dossier du projet (attention à ce que ce ne soit pas le dossier parent de tous les projets)
Il est possible que VSCode vous montre un truc comme ceci
Vu que c'est un dossier vide, bien évidemment que vous pouvez faire confiance au code qui est dans ce projet, cliquez sur le gros bouton bleu.
Ce qui vous donnera une interface de VSCode qui ressemble à ça
Automatiquement, le tiroir "Explorer" viens de s'ouvrir, c'est le premier des 3 boutons que vous devez connaitre. L'explorer est juste une vue du dossier projet, vous pouvez faire un clic droit > new file pour créer le premier fichier du projet
Vu qu'on se prépare à faire du web je vous propose de créer un fichier appelé index.html et d'y mettre le code suivant
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Hello world! 👋</h1>
</body>
</html>
(n'oubliez pas de sauvegarder avec Ctrl+S)
Pas la peine de comprendre tout ça maintenant, ce sera le sujet des cours de web pour lesquels vous êtes en train de vous préparer.
Comment lancer votre projet
Maintentant que vous avez un projet c'est le moment d'exécuter le code pour voir comment ça rend.
Pour ça il va falloir découvrir notre deuxième bouton, le menu des extensions
et dans la barre de recherche des extensions, il va falloir chercher "Live Server" puis cliquer sur son bouton "Install"
Fermez l'onglet de l'extension maintenant qu'elle est installee et cliquez sur l'explorer pour revenir à la vue de travail.
Vous pourrez constater qu'un nouveau bouton marqué "Go Live" est apparu en bas à droite de votre écran
En cliquant ce bouton, cette extension va vous ouvrir votre navigateur à l'adresse https://127.0.0.1:5500 et vous pourrez intéragir avec votre projet.
L'avantage de Live Server est que la page se rafraichira toute seule quand vous sauvegarderez un fichier. Parfois il sera interessant de rafraichir manuellement parce que le Live Server a besoin que votre page ait un élément <body> ou <head> pour que l'auto-refresh fonctionne.
C'est quoi https://127.0.0.1:5500 ?
Vous avez l'habitude d'adresses comme https://google.com ou https://ateliernum.github.io, mais on peut aussi specifier un adresse IP plutôt qu'un nom de domaine et 127.0.0.1 est une adresse IP speciale qui veux dire "moi même" donc, sur mon ordinateur, la machine qui est à l'adresse 127.0.0.1 est mon ordinateur, mais sur votre ordinateur, 127.0.0.1 est votre ordinateur. Le :5500 veux dire qu'on envoie nos demandes au port :5500. Un port de l'ordinateur ne peut être lié qu'à un seul logiciel. Le logiciel qui est sur le port 5500 de votre machine est le Live Server qui répond aux demandes. Vous n'avez pas besoin de specifier le port en temps normal parce que le port par défaut pour HTTPS est 443 (et 80 pour HTTP) et que tous les serveurs professionnels exposent leurs serveurs aux travers de ces ports.
Liste des extensions pour que votre VSCode ressemble au mien si vous voulez (je continuerais d'utiliser le thème par défaut pour les screenshot de cours)
- One Dark Pro
- indent-rainbow
- Rainbow Brackets
- vscode-icons