Environnement

Système de fichiers

• Arborescence de répertoires (dossiers) et de fichiers.

• Un répertoire peut contenir des fichiers et d'autres répertoires.

• Répertoire racine : /

Chemin absolu

• Chemin absolu d'un fichier ou d'un répertoire.

• /home/alice/image.png

• /home/bob/

• Identification unique d'un fichier ou d'un répertoire dans le système de fichiers.

Chemin relatif

• Répertoire de travail (courant) (working directory).

• Chemin relatif : par rapport au répertoire courant (/home/alice/)

• ./documents/ (. : répertoire courant) ou documents/

• ../bob/image.jpg (.. : répertoire parent)

• ../../tmp/texte.txt

Chemin dans l'URL

https://developer.mozilla.org/fr/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_URL

• Protocole : quel langage ?

• Nom de domaine : quelle machine ?

• Port : quelle application ? (80 pour HTTP, 443 pour HTTPS)

• Chemin : quel fichier ?

• Paramètres : quelles données ?

• Fragment : quelle section du fichier ? (pas envoyé au serveur)

Terminal

https://wiki-tech.io/Linux/D%C3%A9butant/Terminal

GUI vs CLI

• Interfaces pour interagir avec l'ordinateur.

• Graphical User Interface (GUI)

  • Quoi ? Souris et clavier

  • Comment ? Clics et déplacements

  • Où ? Explorateur de fichiers

• Command Line Interface (CLI)

  • Quoi ? Clavier uniquement

  • Comment ? Commandes textuelles

  • Où ? Terminal

Terminal

• Programme permettant d'exécuter des commandes.

• Commandes possibles :

  • Afficher le chemin du répertoire courant : pwd

  • Lister le contenu d'un répertoire : ls

  • Naviguer dans les répertoires : cd

  • Créer et supprimer des fichiers et répertoires : touch, mkdir, rm

  • Copier et déplacer des fichiers : cp, mv

  • Installer des logiciels : apt, brew, choco

  • Exécuter des programmes : node, python

• Shell : programme qui interprète les commandes.

  • Exemples: bash, zsh, PowerShell, cmd

IDE

• Integrated Development Environment (Environnement de développement intégré)

• Éditeur de texte avec des fonctionnalités supplémentaires.

• Facilite l'édition et le débogage du code.

• Exemples populaires :

  • Visual Studio Code ou VSCodium : Open source et gratuit

  • IntelliJ IDEA ou autres IDE de JetBrains (WebStorm, PyCharm, …) : Payant (sauf étudiant), mais meilleur refactoring et autocomplétion

  • Xcode : pour les applications sur Apple.

  • Cursor : basé sur l'IA.

• Jupyter ?

  • Pour des rapports interactifs ≠ développement de logiciels

• Stack Overflow 2025 Developer Survey

Navigateur Web

https://gs.statcounter.com/browser-market-share#yearly-2009-2025

Moteur de rendu web

• Permet de calculer le rendu des pages HTML, CSS, …

• Principaux moteurs :

  • Blink : Chromium, Google Chrome, Microsoft Edge, Brave, …

  • Gecko : Mozilla Firefox

  • Webkit : Safari

  • Trident : Internet Explorer

• Chaque moteur interprète le code différemment, pas toujours le même rendu.

• Vérifier la compatibilité, par exemple sur Can I use.

Can I use

https://caniuse.com/css-if

Système de contrôle de version

• Version control system (VCS ou logiciel de gestion de versions).

• Conserve le code source avec son historique.

• Permet de collaborer à plusieurs sur le même code.

• Le plus populaire : Git

Git

• L'historique est une suite de sauvegardes appelé commits.

• Chaque commit contient les différences de chaque ligne par rapport au précédent (parent).

• Chaque commit est identifié par un hash (p. ex. bdc8480f2511131447c786586be773173114b9eb), les premiers caractères suffisent (bdc8480).

• Les branches et tags sont des raccourcis vers un commit.

• Les branches sont des pointeurs mobiles : on se trouve toujours sur une branche, et on ajoute un commit à cette branche.

• HEAD indique toujours le commit courant.

Commits et branche

https://velog.io/@seob/TIL-visualized-git-commands

Commits locaux

https://third-bit.com/py-rse/git-cmdline.html

• Lors d'une sauvegarde des changements d'un fichier, ils ne sont pas pris en compte par Git.

• git add sélectionne les modifications à ajouter dans le staging area

• git commit crée un commit du contenu de la staging area.

• Le commit est ajouté à la branche courante en local.

Dépôt distant

https://velog.io/@seob/TIL-git-remotes

• Vue d'un dépôt distant (remote repository) : souvent préfixé par origin/* (ici o/*)

• git fetch : récupère les commits du dépôt distant sans les intégrer dans la branche courante.

• git pull : récupère les commits du dépôt distant et les fusionne dans la branche courante.

• git push : envoie les commits locaux vers le dépôt distant.

Commandes Git

https://third-bit.com/py-rse/git-cmdline.html

Git hébergé

• Un hébergeur Git stocke les dépôts Git et fournit une interface web pour les gérer.

• Permet de collaborer à plusieurs sur le dépôt distant.

• GitHub : le plus populaire, beaucoup de projet open source dessus, racheté par Microsoft en 2018.

• GitLab : open source, avec une version auto-hébergeable.

• Bitbucket : plus orienté entreprise, par Atlassian.

Markdown

• Langage de balisage léger pour formater du texte.

• Syntaxe simple pour les titres, listes, liens, images, …

• Utilisé pour les fichiers README, générer du HTML, …

# Titre de niveau 1
## Titre de niveau 2
Texte en **gras** et en *italique*.
- Item 1
- Item 2
[Wikipédia](https://www.wikipedia.org)
![Image](https://example.com/image.png)

• Markdown Cheat Sheet : référence rapide pour la syntaxe.

• StackEdit : un éditeur en ligne (parmi d'autres).

WYSIWYG

• What You See Is What You Get (Ce que vous voyez est ce que vous obtenez).

• Éditeurs qui affichent le rendu final pendant l'édition.

• Code → Compilation → Rendu final

https://commons.wikimedia.org/wiki/File:Lorem_Ipsum_-_WYSIWYG_en_Latex_-_tekst_als_paden.svg

Gestionnaire de paquets

• Package manager (gestionnaire de paquets)

• Logiciel qui facilite l'installation, la mise à jour et la gestion des logiciels.

• Mobile :

  • Android : Google Play Store, F-Droid, …

  • iOS : App Store

• Desktop (CLI) :

  • macOS : Homebrew, MacPorts, …

  • Windows : Chocolatey, Scoop, …

  • Linux : APT (Advanced Packaging Tool), Pacman, …

• Langages de programmation :

  • JavaScript : npm, pnpm, yarn, …

  • Python : pip, Poetry, Conda, …

  • Java : Maven, Gradle, …

npm

• Installer un paquet : npm install typescript

• Désinstaller un paquet : npm uninstall typescript

• Mettre à jour un paquet : npm update typescript

• Lister les paquets installés : npm ls

• Afficher les commandes disponibles : npm help