Kit de survie
Les outils, les raccourcis et les habitudes qui font gagner du temps en BTS CIEL. Ce guide est tenu par la promotion : il a commencé dans un salon de discussion de la classe, et il s'allonge à mesure que quelqu'un trouve mieux.
1 · Les quatre outils à installer
Visual Studio Code
L'éditeur de code que tout le monde utilise, et il est gratuit.
- coloration du code automatique ;
- autocomplétion ;
- extensions pour à peu près tout ;
- léger et rapide.
PowerToys Windows
Des outils que Windows aurait dû avoir. Gratuit, publié par Microsoft.
- OCR (Maj + Alt + T) — prendre le texte d'une image ou d'un PDF et le coller directement. Imbattable pour récupérer du code depuis une capture d'écran.
- FancyZones — ranger ses fenêtres : l'éditeur d'un côté, le navigateur de l'autre.
- Always On Top (Ctrl + Win + T) — garder une fenêtre au-dessus des autres, pratique pour suivre un tutoriel.
Un navigateur qui respecte la vie privée
Brave bloque les publicités et les traceurs par défaut, et accepte les extensions du Web Store de Chrome.
- F12 ouvre les outils de développement : c'est là qu'on inspecte le code d'une page, et on s'en sert dès le chapitre HTML.
Un espace à soi pour ses fichiers
Telegram sert de coffre-fort : des fichiers jusqu'à 2 Go — vidéos, archives, photos, documents —, des salons pour classer par matière, et une recherche qui retrouve tout.
- plus simple qu'un disque en ligne pour un partage rapide ;
- plus large qu'un salon de discussion ordinaire pour les gros fichiers ;
- le même contenu sur le téléphone et sur l'ordinateur.
2 · VS Code : les cinq extensions
Pour installer : Ctrl + Maj + X, chercher le nom, cliquer sur « Installer ».
| Extension | Ce qu'elle apporte |
|---|---|
| Live Server | Voir son site se mettre à jour en direct à chaque sauvegarde. Clic droit sur le fichier HTML → « Open with Live Server ». |
| Auto Rename Tag | Renommer <div> renomme </div> en même
temps. On ne laisse plus de balise orpheline. |
| Material Icon Theme | Une icône par type de fichier. Du confort, et on s'y retrouve plus vite dans un dossier chargé. |
| HTML Play | Tester un bout de HTML, de CSS ou de JS sans quitter l'éditeur. |
| French Language Pack | VS Code en français. Après installation : Ctrl + Maj + P → « Configure Display Language » → « fr ». |
3 · Les raccourcis qui changent la journée
| Raccourci | Ce qu'il fait |
|---|---|
| Ctrl + D | Sélectionner l'occurrence suivante du même mot. |
| Ctrl + Maj + L | Sélectionner toutes les occurrences d'un coup. |
| Alt + Maj + ↑/↓ | Dupliquer la ligne. |
| Alt + ↑/↓ | Déplacer la ligne vers le haut ou le bas. |
| Maj + Alt + F | Réindenter tout le fichier. Le raccourci le plus rentable de la liste. |
| Ctrl + / | Commenter ou décommenter. Sert aussi à désactiver du code sans l'effacer. |
| Tab / Maj + Tab | Indenter ou désindenter la sélection. |
| Ctrl + P | Ouvrir un fichier par son nom, sans chercher dans l'arborescence. |
| Ctrl + B | Afficher ou masquer la barre latérale. |
| Ctrl + ² | Ouvrir le terminal intégré. |
| Ctrl + Maj + P | La barre de commandes — elle donne accès à tout le reste. |
Deux réglages, une fois pour toutes
Sauvegarde automatique — menu File → Auto Save. Le fichier s'enregistre tout seul ; on ne perd plus son travail.
Mise en forme à la sauvegarde — Ctrl + ,, chercher « format on save », cocher. Le code devient propre à chaque Ctrl + S, sans y penser.
Ces gestes existent aussi dans l'atelier C et C++ de ce site : Ctrl + D, Alt + Z, Ctrl + / et le bouton « Indenter » y font la même chose, sans rien installer.
4 · Bien écrire son HTML et son CSS
La structure par laquelle commencer, à chaque fois :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mon site</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- le contenu ici -->
</body>
</html>Et les balises qui disent ce que chaque partie est, plutôt que des
<div> partout :
<header> | l'en-tête |
<nav> | le menu |
<main> | le contenu principal |
<section> | une section |
<footer> | le pied de page |
Nommer ses classes CSS
Toujours en minuscules, avec des tirets :
.header-principal, .bouton-bleu,
.carte-produit.
Et pas .HeaderPrincipal ni .carte_produit : ce qui compte
n'est pas la règle choisie, c'est qu'il n'y en ait qu'une dans tout le projet.
Enfin, des commentaires qui découpent la feuille de style — on retrouve une règle en trois secondes au lieu de faire défiler :
/* ========== HEADER ========== */
.header {
background-color: #333;
}
/* ========== NAVIGATION ========== */
.nav {
display: flex;
}5 · S'organiser sans y passer ses soirées
Un compte séparé pour les études
L'astuce qui règle le rangement avant qu'il ne commence : créer un compte réservé aux cours.
- le stockage sert aux cours, et à rien d'autre ;
- aucun mélange avec les photos et les fichiers personnels ;
- le même contenu sur l'ordinateur, le téléphone et la tablette.
Prendre ses notes au propre
- Ctrl + B gras · Ctrl + I italique · Ctrl + K ajouter un lien ;
- Ctrl + Maj + V — coller sans la mise en forme. Celui-là sauve une mise en page par semaine.
Pour coller du code dans un document texte en gardant les couleurs et l'indentation, l'extension Code Blocks le fait en trois clics.
6 · Réinstaller un PC en une commande
Windows sait déployer une liste d'applications tout seul, à partir d'un fichier de configuration. Plus de « je retélécharge tout un par un » après un formatage.
winget configure -f .\ma-config-win11.dsc.yamlEncore faut-il avoir le fichier. Le voici, prêt à l'emploi :
Télécharger
ma-config-win11.dsc.yaml — 455 lignes, 35 applications.
Il n'a rien de mystérieux : c'est un bloc par application, toujours la même forme, précédé de deux lignes d'en-tête.
# yaml-language-server: $schema=https://aka.ms/configuration-dsc-schema/0.2
configurationVersion: 0.2.0
properties:
resources:
- resource: Microsoft.WinGet.DSC/WinGetPackage
id: Python
directives:
securityContext: elevated
settings:
id: Python.Python.3.14
source: winget
metadata:
category: "développement"
description: "Langage de programmation Python 3.14"Deux lignes comptent vraiment. settings.id est l'identifiant winget du
paquet — c'est lui qui décide ce qui s'installe. securityContext: elevated
installe pour toute la machine, et c'est ce qui oblige à lancer PowerShell en
administrateur.
Pour enlever une application, on supprime son bloc. Pour en ajouter une,
on recopie un bloc et on change les deux id ; l'identifiant exact se
trouve avec winget search nom-du-logiciel.
La configuration tenue par la promotion compte trente-cinq applications :
| Catégorie | Applications |
|---|---|
| Développement | Visual Studio Code · Node.js · Python 3.14 · Git · Postman |
| Navigateurs et communication | Firefox · Brave · Discord · Telegram Desktop |
| Réseau et virtualisation | Proton VPN · Wireshark · VirtualBox · VMware Workstation Player · Cisco Packet Tracer |
| Sécurité | Bitwarden · KeePassXC · CrystalDiskInfo |
| Utilitaires système | PowerToys · 7-Zip · NanaZip · PuTTY · Spacedesk Viewer · RustDesk · Rufus · Ventoy |
| Multimédia et bureautique | LibreOffice · OnlyOffice · Steam · Paint.NET · VLC · iTunes · Stremio · Jellyfin Media Player |
| Téléchargement | qBittorrent · JDownloader 2 |
Ce que cette liste vaut, et ce qu'elle ne vaut pas
Cinq de ces applications servent directement au BTS : Packet Tracer, Wireshark, VirtualBox, VS Code et Git. Les autres sont un confort personnel — on prend ce qu'on veut et on laisse le reste.
Et la commande ne s'exécute pas les yeux fermés : elle installe trente-cinq logiciels sur la machine, en administrateur. On lit le fichier avant, on retire ce qu'on ne connaît pas.
7 · Les trouvailles du salon
Essayer une distribution Linux sans rien installer
Des distributions complètes dans le navigateur — Ubuntu, Debian, Fedora, Arch — sans clé USB ni machine virtuelle. Utile pour voir à quoi ressemble un bureau avant de s'engager.
Une suite créative libre, en treize applications
ArtCraft — treize applications open source écrites en Rust : image, vectoriel, vidéo, PDF, mise en page, maquette d'interface, audio, présentation, CAO, tableur. Gratuites, sans abonnement.
Deux précisions avant de se lancer. L'application principale existe pour Windows, macOS et le navigateur ; le lanceur des treize « Craft Apps », lui, n'est pour l'instant proposé qu'en image disque macOS. Et elle n'est pas dans winget : elle ne figure donc pas dans le fichier de la section 6, on l'installe à la main. Les générations par IA se paient en crédits — le reste du logiciel s'utilise sans abonnement.
Apprendre Python en jouant
Citizen Code — une application mobile gratuite qui fait écrire du vrai Python sous forme de jeu. À faire dans les transports plutôt que de relire un cours sur un écran de téléphone.