diff --git a/.gitignore b/.gitignore index 4c49bd7..3323b34 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ .env +.DS_Store diff --git a/design/.thumbnail b/design/.thumbnail new file mode 100644 index 0000000..75def0b Binary files /dev/null and b/design/.thumbnail differ diff --git a/design/Apercu accueil Blade.html b/design/Apercu accueil Blade.html new file mode 100644 index 0000000..bae94b1 --- /dev/null +++ b/design/Apercu accueil Blade.html @@ -0,0 +1,75 @@ + + + + + + Syllabus — Une vraie machine Linux pour chaque élève + + + + + + + + + + + + + +
+ +
+ +

Cours · TP sur machine · suivi des élèves

Enseigner l’informatique, du lycée au master.

Des cours gratuits, un vrai Linux pour chaque élève et toute la classe sur un écran. Dans le navigateur, rien à installer.

Créer une classe gratuite

Sans carte bancaire · élève ? rejoindre ma classe

Pour l’élève

Un terminal Linux en 5 secondes.

Chaque élève a sa propre machine Debian. Il clique, la console s’ouvre. Aucun poste du lycée à configurer.

Essayer un lab sans compte →

eleve@lab-07 · Debian 12
eleve@lab-07:~$ ip -br addr
+ens18  UP  10.20.7.14/24
+eleve@lab-07:~$ ping -c1 10.20.7.1
+64 bytes from 10.20.7.1: time=0.4 ms
+eleve@lab-07:~$

Correction

Chaque étape se vérifie toute seule.

Le lab contrôle directement la machine. L’élève sait s’il a réussi, et reçoit un indice s’il bloque.

  1. 1. Afficher l’adresse IP✓
  2. 2. Joindre la passerelle✓
  3. 3. Configurer le DNSÀ vérifier
  4. 4. Tester la résolution
  5. Indice 1 : le fichier se trouve dans /etc. Regardez son nom avec ls.

Pour l’enseignant

Le roi du silence : la fonction « Lever la main ».

Vos élèves n’auront plus que le droit de tousser ou de respirer ! Les demandes arrivent dans l’ordre. Vous ouvrez la console de l’élève sans vous déplacer.

Voir le tableau de bord prof →

Mains levées

3 en attente

  1. 1Noraétape 3 · depuis 2 minOuvrir sa console
  2. 2Samiétape 2 · depuis 4 minOuvrir sa console
  3. 3Jadeétape 1 · depuis 6 minOuvrir sa console

Questions fréquentes.

Combien ça coûte ?

Les cours sont gratuits. Les TP sur VM : 29 € par mois pour une classe, ou 24 € par élève et par an pour un établissement.

Faut-il installer quelque chose ?

Non. Un navigateur suffit, même sur un vieux PC ou un Chromebook. Tout passe par HTTPS, port 443.

Comment inscrire mes élèves ?

Par code de classe, import CSV ou saisie rapide. Chaque élève reçoit une fiche de connexion, sans e-mail.

Les cours se téléchargent-ils ?

Oui. CM, TD avec cases à remplir, correction et QCM papier, en PDF.

Où sont les données ?

Sur un cloud hébergé en France. Les données des élèves sont supprimées 90 jours après l’archivage de la classe.

Voir tous les tarifs →

Votre prochain TP commence dans 5 secondes.

Créer une classe gratuite

Sans carte bancaire

+ + + + + + + diff --git a/design/Bibliotheque v2.dc.html b/design/Bibliotheque v2.dc.html new file mode 100644 index 0000000..02e6237 --- /dev/null +++ b/design/Bibliotheque v2.dc.html @@ -0,0 +1,181 @@ + + + + + + + + + + + + + + +
+ + +
+
+

Bibliothèque des cours

+ +Lancer une séance +
+ AB + EnseignantAdam Belkacemi + +
+
+ +
+
+

Filtrer

+
+ + + + {{ countLabel }} +
+ + +
+
+
+ +
+ + +

Aucun cours ne correspond. Essayez un autre cursus ou un autre mot.

+ +
+
+
+
+ + + + diff --git a/design/Paillasse Accueil.dc.html b/design/Paillasse Accueil.dc.html new file mode 100644 index 0000000..691c001 --- /dev/null +++ b/design/Paillasse Accueil.dc.html @@ -0,0 +1,147 @@ + + + + + + + + + + + + + + + + + +
+ +
+ + + + + Syllabus + + +
+ Se connecter + Créer une classe +
+
+ +
+ +
+ Du lycée au BTS, sans rien installer +

Une vraie machine Linux pour chaque élève.

+

Debian s'ouvre dans le navigateur en moins de 5 secondes. Les labs se corrigent tout seuls, et le prof voit qui avance, qui bloque, qui lève la main.

+
+ Terminal en < 5 s + Correction automatique + Hébergé en Europe +
+
+ Lancer un lab d'essai → + Voir les labs +
+
+ +
+
+
+ +
+ +
+ Vérification + Étape 3 / 5 validée +
+ +
+
+ + +
+
+ + lea@debian-lab — Premiers pas dans le shell +
+
+ lea@debian:~$ mkdir projets && cd projets + lea@debian:~/projets$ ls -la + drwxr-xr-x 2 lea lea 4096 . + ✓ Dossier « projets » créé + lea@debian:~/projets$ {{ cursor }} +
+
+ + +
+ N + + Nora lève la main + bloquée depuis 8 min · étape 2 + +
+ + + {{ confetti }} + +
+
+ +
+
Lycée NSI
+
BTS SIO SISR
+
BTS CIEL
+
BUT R&T
+
Titre pro TSSR
+
+
+ + + + diff --git a/design/_backup-ludique/Apercu accueil Blade.html b/design/_backup-ludique/Apercu accueil Blade.html new file mode 100644 index 0000000..f005356 --- /dev/null +++ b/design/_backup-ludique/Apercu accueil Blade.html @@ -0,0 +1,361 @@ + + + + + + Paillasse — Une vraie machine Linux pour chaque élève + + + + + + + + + + + + +
+ +
+ +
+
+ + +
+
+

Du lycée au master · rien à installer

+ +

+ Une vraie
+ machine Linux
+ pour chaque
+ élève. +

+ +

+ Debian ou l’IDE s’ouvre dans le navigateur en moins de 5 secondes. Les labs se corrigent tout seuls, et vous voyez qui avance, qui bloque, qui lève la main. +

+ +
+ + Lancer un lab d'essai + + + Voir les labs +
+
+ +
+ +
+
+
2nde NSI · en direct24 élèves connectés
+
    +
  • LLéa5/5 ✓
    • +
  • YYanisétape 3
    • +
  • NNoramain levée
    • +
  • TTométape 4
    • +
  • IInèsétape 2
    • +
  • SSamibloqué 9 min
    • +
  • CChloé5/5 ✓
    • +
  • AAdamétape 3
    • +
  • MMaëlétape 4
    • +
  • JJadeétape 1
    • +
  • HHugoétape 3
    • +
  • LLina5/5 ✓
    • +
+
+
+ + < 5 s + +
+
+ + lea@debian · xterm.js +
+
+
+ +
+

Nora lève la main

+

bloquée depuis 8 min

+
+
+
+
+ +
+

Lycée NSI

+

BTS SIO · SISR et SLAM

+

BTS CIEL

+

BUT · Licence pro

+

Master · École d’ingé

+
+ +
+ + + +
+
+

+ Trois choses que votre salle info ne fait pas. +

+

+ Chaque élève a sa propre VM Debian, sur un cloud hébergé en France. Rien ne s'installe sur les postes du lycée. +

+
+ +
    +
  • + Élève +
    + 01 +
    +

    Un terminal en moins de 5 secondes

    +

    Des VM déjà démarrées attendent en réserve. L'élève clique, la console s'ouvre, même sur un vieux PC ou un Chromebook.

    +
    +
    +
    • + +
  • + Correction +
    + 02 +
    +

    Les labs se corrigent tout seuls

    +

    Chaque étape est vérifiée directement dans la VM. L'élève sait tout de suite s'il a réussi, avec un indice s'il bloque.

    +
    +
    +
    • + +
  • + Enseignant +
    + 03 +
    +

    Toute la classe sur un écran

    +

    Une tuile par élève : son étape, sa main levée, son blocage. Vous ouvrez sa console pour l'aider sans vous déplacer.

    +
    +
    +
    • +
+
+
+
+
+
+

Séance en direct

+

Vous voyez qui bloque avant qu'il abandonne.

+

Une tuile par élève : son étape, sa main levée, le temps passé sans avancer. Un clic ouvre sa console en lecture, un second vous donne la main.

+
    +
  • Lecture de la console
    • +
  • Prise de main
    • +
  • Mode examen
    • +
+
+ Voir le suivi d’une classe + Essayer le mode examen +
+
+
+
+
+

2nde NSI · Groupe B

+

Premiers pas dans le shell · 24 élèves

+
+
    +

  • Léa M.

    étape 5/5 ✓

    • +

  • Yanis B.

    étape 3/5

    • +

  • Nora K.

    main levée

    • +

  • Tom R.

    étape 4/5

    • +

  • Inès D.

    étape 2/5

    • +

  • Sami L.

    bloqué 9 min

    • +

  • Chloé P.

    étape 5/5 ✓

    • +

  • Adam F.

    étape 3/5

    • +
+
+ +
+
+
+ +
+ +
+

Toute la classe connectée en un quart d'heure.

+
    +
  1. 01

    Code ou QR de classe

    Vous validez chaque demande.

    2. +
  2. 02

    Import CSV

    Nom, prénom, groupe. Rien de plus.

    3. +
  3. 03

    Saisie rapide

    Une ligne par élève.

    4. +
  4. 04

    Fiche de connexion

    Identifiant et QR imprimés, sans e-mail pour les mineurs.

    5. +
  5. Bientôt05

    Moodle LTI 1.3

    Les élèves arrivent depuis votre ENT.

    6. +
+
+
+ +
+
+

Ça passe le filtrage du lycée.

+
    +

  • 443

    Tout passe par HTTPS. Aucun port à ouvrir sur le réseau de l'établissement.

    • +

  • FR

    Hébergé en France. Données d'élèves minimales, supprimées 90 jours après l'archivage.

    • +

  • 0 install

    Vieux PC, Chromebook, connexion lente : un navigateur suffit.

    • +

  • NAT

    Les VM ne sortent pas sur Internet. Seuls les miroirs de paquets répondent.

    • +
+
+
+ +
+ + +
+

Votre prochain TP commence dans 5 secondes.

+
+ Lancer un lab d'essai + Équiper mon établissement +
+
+
+
+
+

Un espace pour chacun

+

Prof, élève, vie scolaire, académie.

+ +
+
+
+
+
+ +
+

Vous devenez le roi du silence grâce à la fonction « Lever la main ».

+

Vos élèves n’auront plus que le droit de tousser ou de respirer !

+
+
+
+
+
+
+
+ + + + + PDF + + + + + + + + + + + SERVEZ-VOUS ! + SERVEZ-VOUS ! + COURS · TD · CORRECTIONS EN PDF + +
+
+

Gratuit · à télécharger

+

Tous les cours se téléchargent en PDF.

+

CM complet, TD prêt à imprimer avec ses cases à remplir, correction à part, QCM papier. Pour la classe, pour réviser chez soi ou pour un jour sans réseau.

+ +
+
+
+
+ + + + + + + diff --git a/design/_backup-ludique/apercu-cours.html b/design/_backup-ludique/apercu-cours.html new file mode 100644 index 0000000..7596304 --- /dev/null +++ b/design/_backup-ludique/apercu-cours.html @@ -0,0 +1,456 @@ + + + + + + Cours gratuits · Paillasse + + + + + + + + +
+ +
+ +
+
+ +
+

Gratuit, sans compte

+

99 cours gratuits, calés sur vos référentiels.

+

Chaque cours suit le découpage de l’Éducation nationale : un CM pour comprendre, un TD pour s’exercer sur papier, un TP sur une vraie VM, un QCM corrigé et expliqué.

+
+
Cours
99
+
TD
45
+
TP sur VM
59
+
QCM corrigés
98
+
+
Bibliothèque complète · 225 fiches →Générateur de TDIDE en ligne
+
+
+ +
+
+ CM Cours magistral + TD Travaux dirigés, corrigés + TP Travaux pratiques sur VM + QCM Quiz à correction expliquée + IDE Exercice de code dans l’IDE +
+
+
+
+
+

Lycée NSI

+

Première et Terminale · spécialité NSI · 16 cours

+
+
+
+

Première · Représentation des données

+ +
+
+

Première · Architectures et systèmes

+ +
+
+

Première · Web et données

+ +
+
+

Terminale · Architectures, réseaux, sécurité

+ +
+
+

Terminale · Données et structures

+ +
+
+
+
+
+
+
+

BTS SIO SISR

+

Services informatiques aux organisations · option SISR · 18 cours

+
+
+
+

Bloc 1 · Support et mise à disposition de services

+ +
+
+

Bloc 2 · Administration des systèmes et des réseaux

+ +
+
+

Bloc 3 · Cybersécurité des services

+ +
+
+
+
+
+
+
+

BTS CIEL

+

Cybersécurité, informatique et réseaux, électronique · option IR · 12 cours

+
+
+
+

Réseaux

+ +
+
+

Informatique

+ +
+
+

Cybersécurité

+ +
+
+
+
+
+
+
+

BUT R&T

+

Réseaux et télécommunications · parcours Cybersécurité et DevCloud · 13 cours

+
+
+
+

Semestres 1 et 2

+ +
+
+

Semestres 3 et 4

+ +
+
+

Parcours Cybersécurité et DevCloud

+ +
+
+
+
+
+
+
+

Titre pro TSSR

+

Technicien supérieur systèmes et réseaux · niveau 5 · 11 cours

+
+
+
+

CCP 1 · Assister les utilisateurs

+ +
+
+

CCP 2 · Infrastructure centralisée

+ +
+
+

CCP 3 · Infrastructure distribuée

+ +
+
+
+
+
+
+
+

Programmation

+

Python, web, SQL, Bash, C · exercices dans l’IDE en ligne · 29 cours

+ Ouvrir l’IDE → +
+
+
+

Python · les bases

+ +
+
+

Python · aller plus loin

+ +
+
+

Web

+ +
+
+

Bases de données

+ +
+
+

Système et outils

+ +
+
+
+
+ +
+
+
+ +
+

Vous devenez le roi du silence grâce à la fonction « Lever la main ».

+

Vos élèves n’auront plus que le droit de tousser ou de respirer !

+
+
+
+
+
+
+
+ + + + + PDF + + + + + + + + + + + SERVEZ-VOUS ! + SERVEZ-VOUS ! + COURS · TD · CORRECTIONS EN PDF + +
+
+

Gratuit · à télécharger

+

Tous les cours se téléchargent en PDF.

+

CM complet, TD prêt à imprimer avec ses cases à remplir, correction à part, QCM papier. Pour la classe, pour réviser chez soi ou pour un jour sans réseau.

+ +
+
+
+
+ + + + + diff --git a/design/_backup-ludique/apercu-etablissements.html b/design/_backup-ludique/apercu-etablissements.html new file mode 100644 index 0000000..a98cce0 --- /dev/null +++ b/design/_backup-ludique/apercu-etablissements.html @@ -0,0 +1,136 @@ + + + + + + Établissements · Paillasse + + + + + + + + +
+ +
+ +
+
+ +
+

Pour les établissements

+

Un projet par établissement. Un réseau par classe.

+

Chaque établissement a son espace isolé sur notre cloud OpenStack hébergé en France. Chaque classe a son propre réseau, sans IP publique.

+
+
+
+

Chacun son rôle.

+ +
+
+
+

Une bibliothèque à dupliquer et adapter.

+
+

Des séquences complètes, reliées aux référentiels : cours, TD, quiz et lab. Dupliquez une séquence, modifiez-la pour votre classe. Les quiz s’exportent en GIFT et Moodle XML.

+
    +
  • Cours
  • TD
  • Quiz
  • Lab
    • +
  • Moodle LTI 1.3 · bientôt
  • SSO ENT · plus tard
    • +
+
+
+
+
+
+

Équiper votre établissement.

+

Dites-nous combien de classes et quelles formations. On vous répond avec une proposition.

+
+
+ + + + +
+
+
+
+
+
+ +
+

Vous devenez le roi du silence grâce à la fonction « Lever la main ».

+

Vos élèves n’auront plus que le droit de tousser ou de respirer !

+
+
+
+
+
+ + + + + diff --git a/design/_backup-ludique/apercu-fonctionnalites.html b/design/_backup-ludique/apercu-fonctionnalites.html new file mode 100644 index 0000000..496bbba --- /dev/null +++ b/design/_backup-ludique/apercu-fonctionnalites.html @@ -0,0 +1,421 @@ + + + + + + Fonctionnalités · Paillasse + + + + + + + + +
+ +
+ +
+
+ +
+

Fonctionnalités

+

Tout ce qu’il faut pour une classe, en ligne.

+

Des cours aux conseils de classe, de l’IDE aux TD à imprimer, sans rien installer. Un navigateur suffit, pour l’élève comme pour le prof.

+
+
+ +
+ +
+
+

Pourquoi un tel outil ?

+

Suivre chaque élève, même dans une classe de 35.

+
+

Avec des classes entières et une charge de travail déjà lourde, suivre chaque élève individuellement devient presque impossible. Un élève en difficulté décroche vite, souvent sans bruit, et le prof, pris par ses nombreuses classes, s’en rend compte trop tard.

+

Paillasse surveille tout, sans être intrusif. Le QCM de début d’heure, celui qui suit la lecture du cours, les TP, les devoirs et exercices maison : chaque trace remonte au prof. Il voit rapidement qui accompagner plus régulièrement, qui faire passer au premier rang, à qui demander de réexpliquer une notion.

+

C’est une supervision bienveillante et naturelle, qui ne remplace pas le regard du prof mais l’aide à savoir où concentrer ses efforts. Tout remonte dans le cockpit prof, d’où il pilote et supervise examens, devoirs maison, quiz et labs.

+

Dans les labs, chaque étape a ses indices, qui se débloquent après un certain nombre de tentatives. Ils ne remplacent pas l’aide d’un prof (ni une recherche Google 😉), mais ils poussent l’élève à réfléchir un tout petit peu plus avant de vous appeler. Et souvent, ils vous évitent les questions triviales.

+

Et dans l’autre sens, l’élève en excellence peut s’épanouir. Il aborde des notions plus avancées, avec une difficulté plus forte, sans prendre d’avance sur le programme : il explore des notions connexes qui développent sa culture générale.

+

Tout cela dans un unique but : faciliter votre travail.

+
+
+
+
+ Alerte douce +

Un élève décroche

+
  • 3 QCM de début d’heure sous la moyenne
  • Cours lu en 2 minutes au lieu de 15
  • Devoir maison non rendu
+

→ Premier rang, notion à réexpliquer, suivi plus régulier.

+
+
+ Excellence +

Un élève s’ennuie

+
  • Tous les TP réussis du premier coup
  • 20/20 au QCM de lecture
  • Finit avant tout le monde
+

→ Défis plus durs sur des notions connexes, sans prendre d’avance sur le programme.

+
+ +
+ Labs +

Un indice se débloque

+
  1. Tentative 1 · échec
  2. Tentative 3 · 💡 Indice 1 : regarde la commande ip addr
  3. Tentative 5 · 💡 Indice 2 : le masque /26 donne 62 hôtes
+

→ L’élève cherche d’abord. Vous gardez votre temps pour les vraies questions.

+
+
+
+
+
+
+
+

Cockpit prof

+

Un seul écran pour tout piloter.

+

Le cockpit prof fait remonter les informations importantes : qui décroche, qui a fini, qui lève la main, qui n’a pas rendu son devoir. De là, vous pilotez et supervisez tout le reste : examens, devoirs maison, quiz flash, labs et QCM.

+
    +
  • Lancer ou arrêter un examen
    • +
  • Programmer un devoir maison
    • +
  • Projeter un quiz flash
    • +
  • Répondre aux mains levées
    • +
+ Ouvrir le cockpit → +
+
+
+

Cockpit · BTS SIO 1

mardi 29/09 · 10 h 12

+
    +

  • À aider

    3

    élèves en difficulté

  • Mains levées

    2

    en attente

  • Examen

    24/24

    en cours, 0 sortie

  • DM

    19/24

    rendus avant vendredi

    • +
+
    +
  1. AlerteLéa M. · 3 QCM sous la moyenne · proposer le premier rang
    2. +
  2. Main levéeYanis B. · bloqué à l’étape 4 du lab VLAN
    3. +
  3. DM5 devoirs non rendus · relance automatique jeudi
    4. +
  4. ExcellenceInès K. · tout réussi · défi connexe proposé
    5. +
+
+
+
+
+ + + + +
+
+

Toutes les ressources

+

22 outils, un seul site.

+

Tout ce qui a été ajouté à Paillasse, au même endroit. Chaque carte ouvre l’outil.

+ +
+
+ +
+
+
+

Mode examen

+

Vous savez quand un élève quitte sa copie.

+

Pendant une épreuve, Paillasse enregistre chaque sortie de l’élève : changement d’onglet, fenêtre quittée, souris sortie du navigateur. Chaque événement est horodaté et apparaît en direct sur votre écran.

+
  • Changement d’onglet détecté
  • Fenêtre du navigateur quittée
  • Souris sortie de la page
  • Sortie du plein écran
  • Copier-coller bloqué
  • Indices désactivés
  • VM sans accès Internet
  • Remise automatique à la fin du temps
+ Voir le mode examen +
+
+
+
+ EN DIRECT +

Essayez : changez d’onglet ou sortez la souris de la page

+

0 incident(s)

+
+
    +
  1. En attente… Rien à signaler pour l’instant.
    2. +
+

Essayez aussi de copier ce texte : la copie est bloquée pendant l’épreuve.

+
+
+
+
+ +
+
+
+

QCM et quiz

+

Chaque erreur devient une explication.

+

L’élève valide, voit sa note, puis lit pourquoi la bonne réponse est la bonne. Vous voyez quelles questions font trébucher la classe.

+
  • Choix unique ou multiple
  • Vrai / faux, réponse numérique
  • Texte à trous
  • Correction expliquée question par question
  • Tirage aléatoire dans une banque
  • Import et export GIFT et Moodle XML
+
+
+
+

Question 2 · réussie par 38 % de la classe

+

Quelle est l’adresse réseau de 10.0.3.200/22 ?

+
+

Erreur fréquente : 10.0.3.0 (le masque n’est pas appliqué au 3ᵉ octet).

+
+ Essayer un QCM corrigé +
+
+
+
+
+
+

Quiz de début d’heure

+

5 minutes pour réveiller la classe.

+

Sélectionnez les outils à réviser parmi ceux proposés : ls, chmod, grep, ip, ssh, systemctl… Un diaporama s’affiche au tableau. Les élèves se connectent avec leur identifiant, sur téléphone ou sur PC, depuis leur navigateur. Vous voyez en direct qui est là et qui manque.

+
  • ls
  • chmod
  • grep
  • ip
  • ping
  • ssh
  • systemctl
  • dig
+ Créer un quiz flash +
+
+

Banque de sujets

+

1 240 questions, à votre sauce.

+

Classées par cursus, notion et difficulté. Modifiez-les, écrivez les vôtres, partagez-les avec vos collègues. Composez un sujet d’examen en quelques clics.

+
  • 6 types de questions
  • Explication pour chaque réponse
  • Statistiques de réussite par question
  • Sujets prêts : E6 blanc SISR, contrôles, QCM de trimestre
+ Ouvrir la banque
Bibliothèque du référentiel →Générateur de TD →
+
+
+
+ + +
+
+

CM, TD, TP

+

Des séquences prêtes, à votre main.

+

Chaque cours suit le même parcours, calé sur votre référentiel. Dupliquez-le, changez ce que vous voulez, assignez-le en un clic.

+
    +

  1. 1 · CM

    Une page complète

    Illustrée, chronométrée. L’élève doit tout lire.

    2. +

  2. 2 · QCM

    A-t-il bien lu ?

    Questions sur les notions du texte.

    3. +

  3. 3 · TD

    Optionnel

    Exercices corrigés pour s’entraîner.

    4. +

  4. 4 · TP

    Pratiquer

    VM prête en 5 s, étapes vérifiées.

    5. +

  5. 5 · Examen

    Quand le prof veut

    Sujet tiré de la banque, surveillé en direct.

    6. +
+
Lire un CM complet + Parcourir les cours gratuitsOuvrir l’IDE en ligne
+
+
+ +
+
+
+

Élèves et classes

+

Vos classes, vos groupes, en quelques minutes.

+

Créez une classe, découpez-la en groupes, ajoutez les élèves comme vous préférez. L’établissement garde la main sur tout depuis l’espace administrateur, CPE compris.

+
    +
  1. 1Code ou QR de classe, validé par le prof
  2. 2Import CSV : nom, prénom, groupe
  3. 3Saisie rapide, une ligne par élève
  4. 4Fiche de connexion imprimée pour les mineurs, sans e-mail
  5. 5Moodle LTI 1.3 (bientôt)
    6. +
  6. Fin d’année : archivage de la classe, suppression automatique 90 jours après.
    7. +
+
+
+ +
+
+
+

Évolution des élèves

+

Voyez qui progresse, semaine après semaine.

+

Notes de QCM, étapes de TP réussies, temps passé, compétences du référentiel : tout se suit dans le temps, pour un élève ou pour la classe.

+ Ouvrir le suivi de classe +
+
+
+ Nora Kaci · moyenne aux QCM + NoraClasse +
+
+ 810121416 + S1S2S3S4S5S6S7S8S9S10 + + + +
+

+6,5 points en 10 semaines. Décrochage repéré en S4, rattrapé après le TD assigné.

+
+
+
+ +
+
+
+

Conseil de classe

+

Vos remarques, prêtes pour le conseil.

+

Notez une observation en deux clics pendant le cours. Au moment du conseil de classe, tout est rangé par élève et par période : notes, progression, assiduité en TP, remarques datées.

+
  • Remarques datées et catégorisées
  • Visibles par l’équipe et le CPE
  • Synthèse par trimestre ou semestre
  • Export PDF et CSV pour le conseil
+
+
+
+

Sami Lefèvre · 1er trimestre

QCM 11,2 · TP 14/20 étapes
+
    +
  1. Progrès14/11Beaucoup plus autonome sur les TP réseau.
    2. +
  2. Travail28/10QCM VLAN non rendu, rattrapé le lendemain.
    3. +
  3. Comportement03/10A aidé deux camarades bloqués sur le DHCP.
    4. +
+
+
+
+
+
+ +
+
+

100 % en ligne. Rien à installer.

+
    +

  • Vieux PC et Chromebooks

    Un navigateur récent suffit.

    • +

  • Réseau du lycée

    Aucun port à ouvrir, ça passe le filtrage.

    • +

  • À la maison aussi

    L’élève reprend son TP là où il l’a laissé.

    • +

  • Connexion lente

    Le terminal est léger, il reste fluide.

    • +
+
+
+ +
+
+
+ +
+

Vous devenez le roi du silence grâce à la fonction « Lever la main ».

+

Vos élèves n’auront plus que le droit de tousser ou de respirer !

+
+
+
+
+
+
+
+ + + + + PDF + + + + + + + + + + + SERVEZ-VOUS ! + SERVEZ-VOUS ! + COURS · TD · CORRECTIONS EN PDF + +
+
+

Gratuit · à télécharger

+

Tous les cours se téléchargent en PDF.

+

CM complet, TD prêt à imprimer avec ses cases à remplir, correction à part, QCM papier. Pour la classe, pour réviser chez soi ou pour un jour sans réseau.

+ +
+
+
+
+ + + + + + diff --git a/design/_backup-ludique/apercu-labs.html b/design/_backup-ludique/apercu-labs.html new file mode 100644 index 0000000..e4a0f20 --- /dev/null +++ b/design/_backup-ludique/apercu-labs.html @@ -0,0 +1,162 @@ + + + + + + Labs · Paillasse + + + + + + + + +
+ +
+ +
+
+ +
+

Catalogue

+

Des labs qui se corrigent tout seuls.

+

Chaque lab est une vraie VM Debian, ou plusieurs reliées en réseau. L’élève suit les consignes, la vérification valide chaque étape.

+
+
+
+
+

Filtrer

+ + + + +
+ +
+
+ + + + + diff --git a/design/_backup-ludique/apercu-maison.html b/design/_backup-ludique/apercu-maison.html new file mode 100644 index 0000000..bc132d3 --- /dev/null +++ b/design/_backup-ludique/apercu-maison.html @@ -0,0 +1,146 @@ + + + + + + Ressources à la maison · Paillasse + + + + + + + + + + + + +
+ +
+ +
+
+
+

Pour les élèves

+

Envie d’aller plus loin à la maison ?

+

Sur Paillasse, tu retrouves tes cours, tes QCM, l’IDE et le générateur de TD depuis chez toi, sur ton PC ou ton téléphone. Et si tu en veux encore, voici des ressources gratuites, sérieuses et en grande partie en français.

+
Coder dans l’IDE →S’entraîner au générateur de TDRelire les cours
+
+
+
+

Ressources externes gratuites

+

Elles ne font pas partie de Paillasse. Certaines demandent de créer un compte : demande l’accord de tes parents si tu es mineur.

+ +
+ + +
+
+
+ + + + + PDF + + + + + + + + + + + SERVEZ-VOUS ! + SERVEZ-VOUS ! + COURS · TD · CORRECTIONS EN PDF + +
+
+

Gratuit · à télécharger

+

Tous les cours se téléchargent en PDF.

+

CM complet, TD prêt à imprimer avec ses cases à remplir, correction à part, QCM papier. Pour la classe, pour réviser chez soi ou pour un jour sans réseau.

+ +
+
+
+
+ + + + + + diff --git a/design/_backup-ludique/apercu-pourquoi.html b/design/_backup-ludique/apercu-pourquoi.html new file mode 100644 index 0000000..3272ccd --- /dev/null +++ b/design/_backup-ludique/apercu-pourquoi.html @@ -0,0 +1,350 @@ + + + + + + Pourquoi ce projet ? · Paillasse + + + + + + + + +
+ +
+ +
+
+ +
+
+

Le fondateur

+

Pourquoi ce projet ?

+

Parce qu’un BTS peut changer une vie. Il a changé la mienne.

+

Salut ! Moi, c’est Adam Belkacemi.

+

Après un bac S, je n’ai pas trouvé de filière qui me correspondait. J’ai très tôt intégré le marché du travail, et j’ai fait plein de boulots !

+
    +
  • Coursier Uber Eats
    • +
  • Caissier
    • +
  • Employé polyvalent en grande distribution
    • +
  • Manutentionnaire
    • +
+

L’informatique et le développement web, je les ai appris seul, en autodidacte. Au départ, c’était pour rendre service : mon frère avait besoin d’un site pour son cabinet d’infirmier, puis mon oncle pour son activité d’artisan. Le soir, après le boulot, j’apprenais, je testais, je cassais, je recommençais.

+

J’ai pris goût à la programmation. Un nouveau monde s’est ouvert à moi !

+

En 2019, j’intègre un BTS SN-IR, la seule formation qui voulait bien de moi… Ça a été le meilleur choix de toute ma vie !!!

+

Pour la première fois, j’avais une vraie machine sous les mains, des profs qui me poussaient et un cadre pour progresser. Deux ans plus tard, j’en sors avec de bonnes notes et une lettre de recommandation de mon prof principal. Direction l’école d’ingénieur. Ça a été la plus belle expérience de toute ma vie ! 😊 Je le souhaite à tout le monde.

+

Aujourd’hui, je suis data ingénieur et entrepreneur.

+
+
+ +
+ Portrait d’Adam Belkacemi +
+ Data ingénieur · entrepreneur + Ancien BTS SN-IR · 2019-2021 +
+ +
    +
    • +
    • +
    • +
    • +
  • { data }SQL
    • +
+
+
+
+
+
+
+

Ce que j’ai appris en chemin.

+
+
+ Télécom Saint-Étienne · alternance +
+ Façade de Télécom Saint-Étienne +
+

Montée en charge : d’alternant à chef de projet digital

+

Juste après mon BTS, je tente le concours Mines-Télécom réservé aux alternants. Mes bonnes notes de BTS et la lettre de recommandation de mon prof principal font la différence : j’entre à Télécom Saint-Étienne, en école d’ingénieur.

+ + IMT + Concours Mines-Télécom, voie alternancealternance.imt.fr ↗ + +

Il me reste une étape, et pas des moindres : il me faut une entreprise ! Je la trouve chez un industriel américain, à Grenoble et Échirolles, comme chef de projet digital.

+

Pendant 3 ans, je pilote des projets à plusieurs centaines de milliers d’euros. Je découvre les outils de data engineering et d’IA, le suivi de production industrielle automatisé (SCADA, MES, IHM), la gestion de la qualité et la maintenance. Je permets aux équipes de terrain de suivre leur production en temps réel et de réagir plus vite quand une machine s’arrête.

+

Autant vous dire que les machines qui tombent en panne au pire moment, je connais.

+
+
+ Partir de zéro +

Des IA construites de A à Z

+

À l’école, j’ai aussi créé des IA en partant de zéro, en Python. L’une reconnaît la voix et la transforme en texte. Une autre lit les caractères et reconnaît les formes (OCR).

+
  • Python
  • NumPy
  • Pandas
  • scikit-learn
  • TensorFlow
  • PyTorch
  • OpenCV
  • Jupyter
+

C’est là que j’ai compris qu’on apprend vraiment en faisant.

+
+

À l’école d’ingé, j’ai aussi touché à tout ce qu’on y voit : les différents types de bases de données, SQL ou NoSQL, les principaux langages, les réseaux, l’électronique, la gestion de projet lean et agile, et même la compta.

+
+

Bases de données

  • SQL
  • MongoDB
  • Cassandra
  • Redis
  • Neo4j
+

Langages

  • Java
  • SQL
  • Python
  • JavaScript
  • TypeScript
  • PHP
+

Et aussi

  • Réseaux
  • Électronique
  • Lean
  • Agile
  • Gestion de projet
  • Comptabilité
+
+
+ +
+
+ 3 mois · en anglais +

Direction Den Bosch, aux Pays-Bas

+

Trois mois à ’s-Hertogenbosch, que tout le monde là-bas appelle Den Bosch, comme développeur full stack, à construire une solution RH, le tout en anglais. Les premiers jours, on s’accroche. Et puis on se lance. J’en suis revenu avec un bien meilleur anglais et une expérience que je n’oublierai pas.

+
    +
    • +
+
+
+ +
Canal et maisons de Den Bosch
+
Den Bosch, mon QG pendant 3 mois
+
+
+
+
+ + +
+
+

Tout le monde mérite sa place et la réussite.

+
+

Chaque élève mérite une vraie machine pour apprendre, pas une salle informatique qui plante. Chaque prof mérite de passer son temps à enseigner, pas à réparer des postes.

+

J’ai donc construit Paillasse : un outil clé en main, prêt en 5 secondes, pensé par quelqu’un qui a été assis au fond de la salle de TP.

+
+
+ +
+ +
+

Vous devenez le roi du silence grâce à la fonction « Lever la main ».

+

Vos élèves n’auront plus que le droit de tousser ou de respirer !

+
+
+
+
+
+

Un choix, pas un hasard

+

Pourquoi Paillasse est aussi coloré ?

+
+

On a fait exprès de choisir des couleurs vives : jaune, vert menthe, rose, lavande, sur un fond blanc et des bordures noires épaisses. Le but est simple : que le regard de l’élève tombe tout de suite sur ce qui compte, la consigne, le terminal, la question, le bouton à cliquer.

+

Ce n’est pas une intuition de designer. La recherche en psychologie cognitive montre depuis longtemps que la couleur et le contraste guident l’attention, et que ce qui attire l’attention est mieux retenu. Mais elle montre aussi l’inverse : trop de stimulations visuelles dispersent. Paillasse est construit sur ces deux résultats à la fois.

+
+
+ +
+ Revue scientifique · 2013 +

La couleur capte l’attention, et l’attention fait la mémoire

+

Cette revue de la littérature explique que la couleur est un facteur clé pour capter l’attention, et que plus une information reçoit d’attention, plus elle a de chances d’être mémorisée. Les couleurs chaudes, comme le rouge et le jaune, attirent davantage le regard.

+ Dzulkifli & Mustafar, The Malaysian Journal of Medical Sciences, 2013 ↗ +
+ +
+ Psychologie de la mémoire · depuis 1933 +

Ce qui se distingue est mieux retenu

+

C’est l’« effet von Restorff » : dans une série d’éléments semblables, celui qui se démarque par sa couleur, sa taille ou sa forme est mieux mémorisé. L’effet a été reproduit de nombreuses fois, on le retrouve chez l’enfant comme chez l’adulte âgé. C’est pour ça qu’une notion clé, chez nous, est toujours surlignée en couleur.

+ Étude électrophysiologique de l’effet von Restorff (PMC) ↗ +
+ +
+ Recherche privée · Nielsen Norman Group +

Peu de couleurs, bien placées

+

Le cabinet de référence en ergonomie web recommande de limiter le nombre de couleurs : cela renforce la hiérarchie visuelle et laisse moins de choses qui distraient. La couleur doit attirer l’œil vers ce que l’on veut mettre en avant, et toujours avec le même sens d’un écran à l’autre.

+ NN/g, « Using Color to Enhance Your Design », 2024 ↗ +
+
+
+

La couleur qui capte : des exemples partout autour de nous

+

Ceux qui ont besoin qu’on les regarde, ou qu’on ne rate rien, ont tous fait le même choix : une couleur vive, utilisée avec une règle précise.

+
+ +
+ Télévision · 1987 +
La famille Simpson sur son canapé
+

Les Simpson sont jaunes pour une raison

+

Matt Groening a choisi ce jaune proposé par la coloriste Gyorgyi Peluce pour une raison simple : dans les années 80, les gens zappaient. Il l’a expliqué à la BBC en 2007 : quand un éclair jaune passe pendant que tu changes de chaîne, tu sais que tu regardes les Simpson. Presque 40 ans plus tard, tout le monde reconnaît encore cette famille au premier coup d’œil.

+ Groening à la BBC, cité par Joe.co.uk ↗ +
+ +
+ Marques +
Logos de chaînes de restauration rapide
+

Une couleur, et on sait qui c’est

+

Le jaune et le rouge d’une chaîne de fast-food, le rouge d’une marque de soda, le bleu d’un réseau social : les grandes marques choisissent une ou deux couleurs vives et ne les quittent plus. Le but : être reconnues en une fraction de seconde, de loin, sur un écran ou au bord d’une route. Chez Paillasse, c’est pareil : le jaune veut toujours dire « regarde ici ».

+ +
+ +
+ Aviation · règle FAA +
Cockpit d’avion et ses écrans
+

Dans le cockpit, le rouge est réservé

+

La réglementation américaine de l’aviation (14 CFR 25.1322) impose le rouge pour les alertes qui demandent une action immédiate, et l’ambre ou le jaune pour les mises en garde. Elle limite leur usage ailleurs, car trop de rouge et de jaune usent leur pouvoir d’alerte : les pilotes finissent par ne plus y réagir. Notre règle « une couleur = une information » vient de là.

+ 14 CFR 25.1322 · eCFR ↗ +
+ +
+ Médical +
Moniteur médical de surveillance
+

Le moniteur qui clignote au bon moment

+

Dans un service de soins, les moniteurs suivent aussi un code de couleurs normé (norme IEC 60601-1-8) : rouge pour une alarme de haute priorité, jaune pour une priorité moyenne. Une infirmière qui entre dans une chambre voit en un regard ce qui presse. Sur le tableau de bord du prof, c’est pareil : l’élève bloqué passe en rouge, la main levée en rose.

+ +
+ +
+ Sécurité +
Gilet jaune et triangle de signalisation
+

Le gilet jaune fluo

+

Les vêtements de haute visibilité (norme EN ISO 20471) sont jaune fluo, orange ou rouge fluo pour une raison : ces couleurs se détachent de presque tous les décors, de jour comme au crépuscule. On ne met pas du fluo partout sur un chantier : seulement sur ce qui doit absolument être vu.

+ +
+ +
+ Ce qu’on en retient +
L’IDE en ligne de Paillasse
+

Vif, mais rare et toujours au même sens

+

Tous ces exemples disent la même chose que la recherche : une couleur vive capte l’attention, à condition d’être réservée à l’essentiel et de garder toujours le même sens. C’est exactement la règle de Paillasse : fond blanc, et du jaune, du vert, du rose seulement là où l’élève doit regarder.

+ +
+
+
+
+

Nos trois règles de couleur

+
    +

  1. 1

    Fond blanc, toujours

    Rien autour ne vient voler l’attention. L’écran reste calme.

    2. +

  2. 2

    Une couleur = une information

    Vert : réussi. Rose : main levée. Rouge : bloqué ou examen. Jaune : à lire maintenant.

    3. +

  3. 3

    Lisible par tous

    Texte noir sur couleur vive, contraste élevé, et jamais une information portée par la couleur seule.

    4. +
+

Soyons honnêtes : aucune couleur n’empêche à elle seule un élève de regarder son téléphone. Mais un écran clair, où l’essentiel saute aux yeux, lui donne moins de raisons de décrocher. Le reste, c’est le travail du prof, et Paillasse est là pour lui libérer du temps.

+
+
+
+ + +
+ +
+

Paillasse grandit avec vous.

+

Un bug, une idée, un TP qui manque ? Écrivez-moi directement. Je lis tout et je réponds.

+
+
+ +
+ + +
+ +
+ + +
+
+
+

Ou écrivez-moi directement :

+

adam@belkacemi.me

+ +
+
+ +
+
+
+ + + + + + diff --git a/design/_backup-ludique/apercu-tarifs.html b/design/_backup-ludique/apercu-tarifs.html new file mode 100644 index 0000000..6810bf0 --- /dev/null +++ b/design/_backup-ludique/apercu-tarifs.html @@ -0,0 +1,188 @@ + + + + + + Tarifs · Paillasse + + + + + + + + +
+ +
+ +
+
+ +
+
+

Tarifs HT

+

Les cours sont gratuits. Les VM coûtent moins qu’un manuel.

+

Une licence Paillasse pour un élève coûte 24 € par an : QCM, TP sur VM, suivi et mode examen compris.

+
+
+ + + + + + + + + + + + + 0€ + GRATUIT + + + + +
+
+
+
+ +
+
+
+

API et MCP pour développeurs

+

19 € HT par mois avec 100 h de VM incluses, puis 0,09 € HT l’heure. Quotas par jeton. Les classes restent toujours prioritaires sur la capacité.

+ Obtenir une clé +
+
+
+
+

FAQ

+

Vos questions, nos réponses.

+

Intendance, données, pédagogie, technique. Une question manque ? adam@belkacemi.me

+
+

Achat et intendance

  • Bon de commande et Chorus Pro ?

    Oui. Nous envoyons un devis, vous émettez un bon de commande, la facture arrive sur Chorus Pro. Paiement par mandat administratif à 30 jours.

  • Faut-il une carte bancaire pour essayer ?

    Non. Un enseignant crée sa classe gratuitement, sans CB. En échange, on vous demande juste un coup de pouce : vos remarques, ou votre aide pour faire souscrire votre établissement.

  • Une licence couvre quelle période ?

    Une licence suit l’année scolaire, de septembre à août. Les comptes archivés sont supprimés 90 jours après la fin d’année.

  • Les élèves qui redoublent ?

    Ils repartent sur la licence de l’année suivante. Leur historique (notes, observations, progression) peut être conservé si l’établissement le demande.

  • Peut-on payer par région ou par académie ?

    Oui, un devis groupé est possible pour plusieurs établissements. Écrivez-nous pour en parler.

+

Élèves et données

  • Où sont hébergées les données ?

    En France, chez Scaleway, sur des serveurs situés à Strasbourg. Rien ne sort de l’Union européenne.

  • Et le RGPD ?

    Nous collectons le minimum : nom, prénom, classe, résultats. Pas de publicité, pas de revente, pas de traceurs tiers. Un contrat de sous-traitance est fourni à l’établissement.

  • Les élèves mineurs peuvent-ils s’inscrire seuls ?

    Non. C’est l’enseignant qui crée la classe et distribue les identifiants. L’élève n’a pas besoin d’adresse e-mail.

  • Un élève peut-il travailler chez lui ?

    Oui, depuis n’importe quel navigateur, sur PC ou téléphone. Cours, QCM, IDE et devoirs maison restent accessibles toute l’année.

+

Pédagogie

  • Les cours suivent-ils les programmes officiels ?

    Oui. Ils sont construits à partir des référentiels officiels (BO, arrêtés, fiches RNCP), du SNT au master. Chaque CM, TD et TP indique les compétences visées.

  • Puis-je modifier un cours ou un sujet ?

    Oui. Tout se duplique et se modifie : CM, questions, TD, sujets d’examen. Vos versions restent dans votre bibliothèque.

  • Comment marche le mode examen ?

    L’élève passe en plein écran. Si sa souris sort de la fenêtre ou s’il change d’onglet, vous le voyez en direct, avec l’heure et la durée.

  • Les TD s’impriment-ils ?

    Oui. Chaque TD se télécharge en PDF avec ses étapes et ses cases à remplir. La correction s’imprime à part, pour vous.

  • Et la fonction « Lever la main » ?

    L’élève lève la main depuis son écran, vous voyez la file d’attente. Fini les « Madame ! Monsieur ! » en boucle.

+

Technique

  • Faut-il installer quelque chose ?

    Non. Tout se passe dans le navigateur : terminal Debian, IDE, navigateur relié à la VM. Rien à installer sur les postes du lycée.

  • Et si un élève dépasse 15 h de VM ?

    Le compteur est partagé par la classe : un élève peut consommer plus si d’autres consomment moins. Au-delà, les TP restent ouverts en lecture.

  • Le réseau du lycée bloque souvent tout…

    Paillasse passe par une connexion web chiffrée classique, comme n’importe quel site. En cas de souci, on vous aide à le régler avec votre administrateur réseau.

  • Une VM peut-elle casser le réseau du lycée ?

    Non. Chaque VM est isolée chez nous. L’élève peut tout casser dedans, il la réinitialise en un clic.

+
+
+
+
+
+
+ +
+

Vous devenez le roi du silence grâce à la fonction « Lever la main ».

+

Vos élèves n’auront plus que le droit de tousser ou de respirer !

+
+
+
+
+
+ + + + + diff --git a/design/_backup-ludique/resources/views/academie.blade.php b/design/_backup-ludique/resources/views/academie.blade.php new file mode 100644 index 0000000..c4af872 --- /dev/null +++ b/design/_backup-ludique/resources/views/academie.blade.php @@ -0,0 +1,94 @@ + + + + + + Tableau de bord académie · Paillasse + + + + + + + + + + + + +
+ +
+ +
+

Multi-établissements

Tableau de bord académie

6 établissements · 28 classes · 608 élèves · année 2026-2027

  • Élèves actifs

    608

    +86 ce mois

  • Taux d’activité

    91 %

    élèves connectés / semaine

  • Labs réalisés

    4 210

    depuis la rentrée

  • Heures de VM

    2 940 h

    sur 9 120 h incluses

  • Élèves accompagnés

    47

    suite à une alerte

+

Établissements

ÉtablissementClassesÉlèvesActivitéCompétences validéesStatut

Lycée Jean-Jaurès

Montreuil

611894 %72 %Actif

Lycée Louis-Armand

Paris 15e

920490 %68 %Actif

Lycée Saint-Exupéry

Marseille

48688 %61 %Actif

IUT de Villetaneuse

Villetaneuse

716092 %70 %Actif

Lycée Condorcet

Saint-Priest

24071 %55 %Démarrage

Lycée Vauban

Brest

00——Invité
+
+

Compétences les moins acquises

BTS SIO et CIEL
  • Services réseau (DHCP, DNS)38 %
  • Scripts Bash46 %
  • VLAN et commutation52 %
  • Sécurité des accès58 %
  • Adressage IPv466 %

Piste : proposer une formation académique sur les services réseau.

+

Rapports

  • Bilan de rentrée 2026

    PDF · 12 pages · 01/10

  • Usage par établissement

    CSV · 29/09

  • Compétences par filière

    PDF · 6 pages · 29/09

+
+
+ + + + + + diff --git a/design/_backup-ludique/resources/views/accueil.blade.php b/design/_backup-ludique/resources/views/accueil.blade.php new file mode 100644 index 0000000..f2aed80 --- /dev/null +++ b/design/_backup-ludique/resources/views/accueil.blade.php @@ -0,0 +1,370 @@ +{{-- resources/views/accueil.blade.php --}} + + + + + + Paillasse — Une vraie machine Linux pour chaque élève + + + @vite(['resources/css/app.css', 'resources/js/app.js']) + + + + + + + + +
+ +
+ +
+ {{-- HERO --}} +
+ {{-- décor flottant --}} + + +
+
+

Du lycée au master · rien à installer

+ +

+ Une vraie
+ machine Linux
+ pour chaque
+ élève. +

+ +

+ Debian ou l’IDE s’ouvre dans le navigateur en moins de 5 secondes. Les labs se corrigent tout seuls, et vous voyez qui avance, qui bloque, qui lève la main. +

+ +
+ + Lancer un lab d'essai + + + Voir les labs +
+
+ + {{-- collage de droite --}} +
+ +
+
+
2nde NSI · en direct24 élèves connectés
+
    +
  • LLéa5/5 ✓
    • +
  • YYanisétape 3
    • +
  • NNoramain levée
    • +
  • TTométape 4
    • +
  • IInèsétape 2
    • +
  • SSamibloqué 9 min
    • +
  • CChloé5/5 ✓
    • +
  • AAdamétape 3
    • +
  • MMaëlétape 4
    • +
  • JJadeétape 1
    • +
  • HHugoétape 3
    • +
  • LLina5/5 ✓
    • +
+
+
+ + < 5 s + +
+
+ + lea@debian · xterm.js +
+
+
+ +
+

Nora lève la main

+

bloquée depuis 8 min

+
+
+
+
+ + {{-- BANDEAU FORMATIONS --}} +
+

Lycée NSI

+

BTS SIO · SISR et SLAM

+

BTS CIEL

+

BUT · Licence pro

+

Master · École d’ingé

+
+ + {{-- PRÉSENTATION --}} +
+ + + +
+
+

+ Trois choses que votre salle info ne fait pas. +

+

+ Chaque élève a sa propre VM Debian, sur un cloud hébergé en France. Rien ne s'installe sur les postes du lycée. +

+
+ +
    +
  • + Élève +
    + 01 +
    +

    Un terminal en moins de 5 secondes

    +

    Des VM déjà démarrées attendent en réserve. L'élève clique, la console s'ouvre, même sur un vieux PC ou un Chromebook.

    +
    +
    +
    • + +
  • + Correction +
    + 02 +
    +

    Les labs se corrigent tout seuls

    +

    Chaque étape est vérifiée directement dans la VM. L'élève sait tout de suite s'il a réussi, avec un indice s'il bloque.

    +
    +
    +
    • + +
  • + Enseignant +
    + 03 +
    +

    Toute la classe sur un écran

    +

    Une tuile par élève : son étape, sa main levée, son blocage. Vous ouvrez sa console pour l'aider sans vous déplacer.

    +
    +
    +
    • +
+
+
+ {{-- SÉANCE EN DIRECT --}} +
+
+
+

Séance en direct

+

Vous voyez qui bloque avant qu'il abandonne.

+

Une tuile par élève : son étape, sa main levée, le temps passé sans avancer. Un clic ouvre sa console en lecture, un second vous donne la main.

+
    +
  • Lecture de la console
    • +
  • Prise de main
    • +
  • Mode examen
    • +
+
+ Voir le suivi d’une classe + Essayer le mode examen +
+
+
+
+
+

2nde NSI · Groupe B

+

Premiers pas dans le shell · 24 élèves

+
+
    +

  • Léa M.

    étape 5/5 ✓

    • +

  • Yanis B.

    étape 3/5

    • +

  • Nora K.

    main levée

    • +

  • Tom R.

    étape 4/5

    • +

  • Inès D.

    étape 2/5

    • +

  • Sami L.

    bloqué 9 min

    • +

  • Chloé P.

    étape 5/5 ✓

    • +

  • Adam F.

    étape 3/5

    • +
+
+ +
+
+
+ + {{-- AJOUTER LES ÉLÈVES --}} +
+ +
+

Toute la classe connectée en un quart d'heure.

+
    +
  1. 01

    Code ou QR de classe

    Vous validez chaque demande.

    2. +
  2. 02

    Import CSV

    Nom, prénom, groupe. Rien de plus.

    3. +
  3. 03

    Saisie rapide

    Une ligne par élève.

    4. +
  4. 04

    Fiche de connexion

    Identifiant et QR imprimés, sans e-mail pour les mineurs.

    5. +
  5. Bientôt05

    Moodle LTI 1.3

    Les élèves arrivent depuis votre ENT.

    6. +
+
+
+ + {{-- ÉTABLISSEMENTS --}} +
+
+

Ça passe le filtrage du lycée.

+
    +

  • 443

    Tout passe par HTTPS. Aucun port à ouvrir sur le réseau de l'établissement.

    • +

  • FR

    Hébergé en France. Données d'élèves minimales, supprimées 90 jours après l'archivage.

    • +

  • 0 install

    Vieux PC, Chromebook, connexion lente : un navigateur suffit.

    • +

  • NAT

    Les VM ne sortent pas sur Internet. Seuls les miroirs de paquets répondent.

    • +
+
+
+ + {{-- APPEL FINAL --}} +
+ + +
+

Votre prochain TP commence dans 5 secondes.

+
+ Lancer un lab d'essai + Équiper mon établissement +
+
+
+
+
+

Un espace pour chacun

+

Prof, élève, vie scolaire, académie.

+ +
+
+
+
+
+ +
+

Vous devenez le roi du silence grâce à la fonction « Lever la main ».

+

Vos élèves n’auront plus que le droit de tousser ou de respirer !

+
+
+
+
+
+
+
+ + + + + PDF + + + + + + + + + + + SERVEZ-VOUS ! + SERVEZ-VOUS ! + COURS · TD · CORRECTIONS EN PDF + +
+
+

Gratuit · à télécharger

+

Tous les cours se téléchargent en PDF.

+

CM complet, TD prêt à imprimer avec ses cases à remplir, correction à part, QCM papier. Pour la classe, pour réviser chez soi ou pour un jour sans réseau.

+ +
+
+
+
+ + + + + + + diff --git a/design/_backup-ludique/resources/views/aide.blade.php b/design/_backup-ludique/resources/views/aide.blade.php new file mode 100644 index 0000000..b161b95 --- /dev/null +++ b/design/_backup-ludique/resources/views/aide.blade.php @@ -0,0 +1,92 @@ + + + + + + Aide et tutoriels · Paillasse + + + + + + + + + + + + +
+ +
+ +
+

Centre d’aide

Aide et tutoriels

Des vidéos courtes et des guides pour prendre Paillasse en main.

Poser une question

Tutoriels vidéo

Vidéos en cours de tournage : les vignettes sont des emplacements.

+

Guides pas à pas

Démarrer

En classe

Évaluer

Établissement

+

Vous ne trouvez pas ?

Écrivez à adam@belkacemi.me. Chaque question aide à améliorer l’outil.

+
+
+ + + + + + diff --git a/design/_backup-ludique/resources/views/auth/connexion.blade.php b/design/_backup-ludique/resources/views/auth/connexion.blade.php new file mode 100644 index 0000000..635fdd4 --- /dev/null +++ b/design/_backup-ludique/resources/views/auth/connexion.blade.php @@ -0,0 +1,61 @@ +@extends('layouts.vitrine') + +@section('titre', 'Se connecter') + +@section('contenu') +
+ +
+

Se connecter.

+
+
+

Je suis élève

+ + +

Ils sont sur ta fiche de connexion. Tu peux aussi scanner le QR.

+
+
+
+

Je suis enseignant

+
+ + + +
+ + +
Créer une classe
+
+
+
+
+ +@endsection diff --git a/design/_backup-ludique/resources/views/auth/inscription.blade.php b/design/_backup-ludique/resources/views/auth/inscription.blade.php new file mode 100644 index 0000000..9f32113 --- /dev/null +++ b/design/_backup-ludique/resources/views/auth/inscription.blade.php @@ -0,0 +1,61 @@ +@extends('layouts.vitrine') + +@section('titre', 'Créer une classe') + +@section('contenu') +
+ +
+
+

Enseignants

+

Créer une classe.

+

Gratuit · sans CB

+

Ensuite, ajoutez vos élèves par code de classe, import CSV ou saisie rapide. Pour les mineurs, on ne demande que le nom, le prénom et le groupe.

+
+
+ @csrf + + + +
+ + + +
+ + +
+

Aucune carte bancaire demandée.

+
+
+
+ +@endsection diff --git a/design/_backup-ludique/resources/views/banque.blade.php b/design/_backup-ludique/resources/views/banque.blade.php new file mode 100644 index 0000000..b238b34 --- /dev/null +++ b/design/_backup-ludique/resources/views/banque.blade.php @@ -0,0 +1,184 @@ +@extends('layouts.vitrine') + +@section('titre', 'Banque de sujets') + +@section('contenu') +
+
+
+

Espace enseignant · Banque

+

Banque de sujets et de questions

+

1 240 questions classées par cursus et par notion. Modifiez-les, ajoutez les vôtres, composez vos sujets.

Bibliothèque du référentiel →Générateur de TD →
+
+ + Nouvelle question +
+
+ +
+
+
+

Début d’heure

+

Un quiz flash pour lancer le cours.

+

Choisissez les outils à réviser. Paillasse tire les questions dans la banque. Un diaporama s’ouvre au tableau. Les élèves se connectent avec leur identifiant depuis leur téléphone ou leur PC, et vous voyez tout de suite qui manque.

+ Voir le diaporama →Voir la vue élève → +
+
+

Outils à réviser

+
+ + + + + + + + + + + + + + + +
+
+ + + +
+
+ + +
+
+
+
+ +
+ + +
+

Questions · 7 affichées sur 1 240

+ +
+ + +
+ +
+
+

Créer ou modifier une question

+
+ + +
+
Réponses (cochez la bonne) + + + + +
+ + + +
+
+
+
+ +@endsection diff --git a/design/_backup-ludique/resources/views/bibliotheque.blade.php b/design/_backup-ludique/resources/views/bibliotheque.blade.php new file mode 100644 index 0000000..e8a112f --- /dev/null +++ b/design/_backup-ludique/resources/views/bibliotheque.blade.php @@ -0,0 +1,96 @@ +@extends('layouts.vitrine') + +@section('titre', 'Bibliothèque') + +@section('contenu') +
+
+

Bibliothèque du prof

+

Tout le référentiel, fiche par fiche.

+

Du SNT au master, en passant par l’école d’ingénieurs. Chaque fiche regroupe cours, quiz, TD, labs et examens. Un même chapitre sert plusieurs formations : OSPF compte pour la NSI, le BTS SIO, le BTS CIEL, le BUT R&T et les titres pro.

+
+

Construit à partir des programmes officiels. Vérifié le 29 septembre 2026 :

+
+
+
+
+
+ + + +
+ + + +

Ma séquence : 0

+
+
+ + + + + + + + + + +
+
+
+ + +@endsection diff --git a/design/_backup-ludique/resources/views/classes/suivi.blade.php b/design/_backup-ludique/resources/views/classes/suivi.blade.php new file mode 100644 index 0000000..e4583d3 --- /dev/null +++ b/design/_backup-ludique/resources/views/classes/suivi.blade.php @@ -0,0 +1,156 @@ +@extends('layouts.vitrine') + +@section('titre', 'Suivi de classe') + +@section('contenu') +
+
+
+

Espace enseignant · Suivi

+

BTS SIO 1 · Groupe A

+

Bloc 2 · Administration des systèmes et des réseaux · 24 élèves

+
+
+ Quiz flash de début d’heure + Devoirs maison + Voir la séquence + +
+
+
+
+
+
Progression moyenne
52 %
+
Moyenne aux QCM
13,4
+
Actifs cette semaine
21 / 24
+
À aider maintenant
2
+
+ +
+
+

Élèves

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ÉlèveAdressage IPv4VLANInter-VLANDHCPDNS BINDQCMTemps VM
LLéa MartinTerminé18/2012 h 40
YYanis Benali14/209 h 10
NNora KaciMain levée11/208 h 05
TTom Robert16/2010 h 30
IInès Durand9/205 h 20
SSami LefèvreBloqué 9 min7/206 h 45
CChloé PetitEn avance19/2013 h 15
AAdam Fontaine13/208 h 50
+
+

8 élèves sur 24 affichés · triés par besoin d’aide

+
+ + +
+
+@endsection diff --git a/design/_backup-ludique/resources/views/cockpit.blade.php b/design/_backup-ludique/resources/views/cockpit.blade.php new file mode 100644 index 0000000..5cfc8fe --- /dev/null +++ b/design/_backup-ludique/resources/views/cockpit.blade.php @@ -0,0 +1,208 @@ + + + + + + Cockpit prof · Paillasse + + + + + + + + + + + + +
+ +
+ +
+
+
+ +
+
+

Cockpit prof

BTS SIO 1 · Groupe A

16 élèves · mardi 29 septembre · 10:22

+
+ Quiz flash + Programmer un DM + +
+
+
    +

  • Présents

    15/16

    1 absent signalé

    • +

  • Moyenne QCM

    13,4

    +0,8 sur 4 semaines

    • +

  • À accompagner

    3

    +1 cette semaine

    • +

  • Mains levées

    3

    attente moy. 2 min

    • +

  • DM rendus

    13/16

    échéance vendredi

    • +
+
+

Avancement du lab « VLAN »

6 étapes · médiane : étape 3

+ +

Largeur = nombre d’élèves à chaque étape. 2 élèves ont terminé.

+
+
+
+

Élèves

+
+ +
+
+
+
+ + +
Tendance
+
+
+
+

Surveillance d’examen

Inactif
+

E6 blanc SISR · 1 h 30

00:00

  1. Lancez l’examen pour suivre les sorties d’onglet et de fenêtre.
+
+
+

Devoirs maison

Tout voir
+

  • DM 3 · Plan d’adressage

    Rendu ven. 03/10

    13/16

  • TP maison · Scripts Bash

    Rendu lun. 06/10

    6/16

  • QCM · Lecture CM VLAN

    Rendu ce soir

    15/16

+
+
+
+
+
+
+
+

Mains levées

ordre d’arrivée
+
    +
    +
    +

    Priorités du jour

    +

    • Léa Martin Accompagner

      3 QCM sous 8/20. Proposer le premier rang et réexpliquer les VLAN.

    • Lucas Moreau Accompagner

      Cours lu en 2 min au lieu de 15. QCM de lecture à refaire.

    • Hugo Petit Relancer

      DM 3 non rendu. Relance automatique jeudi 18 h.

    • Inès Kaci Stimuler

      Tous les labs réussis. Défi connexe proposé : QoS et priorisation.

    +
    +
    +

    Observation rapide

    Classée par élève pour le conseil de classe.

    +
    +
    +
    + + +
    + + + + + + diff --git a/design/_backup-ludique/resources/views/correction.blade.php b/design/_backup-ludique/resources/views/correction.blade.php new file mode 100644 index 0000000..fde4d5c --- /dev/null +++ b/design/_backup-ludique/resources/views/correction.blade.php @@ -0,0 +1,98 @@ + + + + + + Correction assistée · Paillasse + + + + + + + + + + + + +
    + +
    + +
    +

    Correction assistée

    Copie de Léa Martin

    Paillasse pré-corrige selon votre barème. Vous validez, ajustez et commentez.

    +

    Rendu de l’élève

    Question 2 · masque

    J’emprunte 2 bits car 2² = 4 sous-réseaux. Le masque devient /26 soit 255.255.255.192.

    Question 4 · plan d’adressage

    SRRéseauBroadcast
    SR1.0.63
    SR2.64.127
    SR3.128.190 ✕
    SR4.192.255

    Question 5 · terminal (rejoué)

    eleve@srv:~$ sudo ip addr add 192.168.10.65/26 dev eth0
+eleve@srv:~$ ip a show eth0
+    inet 192.168.10.65/26 scope global eth0
    +

    Barème et pré-correction

    pré-correction · à valider
    • ✓

      Masque choisi et justifié

      Suggestion : /26 correct, justification 2² = 4

    • ✕

      Plan d’adressage complet

      Suggestion : SR3 : broadcast .190 au lieu de .191

    • ✓

      Commande de configuration

      Suggestion : ip addr add 192.168.10.65/26 dev eth0

    • ✕

      Tests de connectivité

      Suggestion : ping manquant entre SR1 et SR2

    • ?

      Rédaction et clarté

      À évaluer par vous

    +

    Note

    15/20

    +
    +

    La pré-correction vérifie ce qui est vérifiable (calculs, commandes rejouées dans la VM, tests de code). Elle ne décide jamais seule : la note n’est publiée qu’après votre validation.

    +
    +
    + + + + + + diff --git a/design/_backup-ludique/resources/views/cours/cm.blade.php b/design/_backup-ludique/resources/views/cours/cm.blade.php new file mode 100644 index 0000000..5fd21c9 --- /dev/null +++ b/design/_backup-ludique/resources/views/cours/cm.blade.php @@ -0,0 +1,242 @@ +@extends('layouts.vitrine') + +@section('titre', 'CM · Adressage IPv4') + +@section('contenu') +
    +
    + CM +

    Adressage IPv4 et sous-réseaux

    +

    Lu : 0 %

    +

    00:00/ 20:00 conseillées

    +
    +
    +
    +
    +
    + +

    Adressage IPv4 et sous-réseaux

    +

    Lis le cours jusqu’au bout. Le QCM de lecture se débloque quand toutes les parties ont été lues et que 5 minutes se sont écoulées.

    +
      +
    1. 1 · CM
    2. 2 · QCM de lecture
    3. 3 · TD optionnel
    4. 4 · TP
    5. 5 · Examen
      6. +
    +
    +
    +
    + +
    +
    +

    1. Pourquoi des adresses ?

    +

    Sur un réseau, chaque machine doit pouvoir être trouvée. Comme une lettre a besoin d’une adresse postale, un paquet a besoin d’une adresse IP de destination.

    +
    +

    La rue

    = le réseau

    Toutes les maisons de la rue partagent le même nom de rue.

    +

    Le numéro

    = l’hôte

    Chaque maison a son numéro, unique dans la rue.

    +
    +

    Une adresse IPv4 contient les deux informations. Le masque indique où s’arrête la rue et où commence le numéro.

    +
    +
    +

    Vidéo de contexte

    +

    Ton prof peut ajouter ici une vidéo YouTube pour illustrer le cours.

    +
    +

    Espace prof · la vidéo s’affiche en mode sans cookie (youtube-nocookie.com).

    +
    +
    +

    2. Une adresse, 32 bits

    +

    Une adresse IPv4 est un nombre de 32 bits. Pour la lire plus facilement, on la découpe en 4 octets de 8 bits, écrits en décimal et séparés par des points.

    +
    +

    192.168.10.77

    +
    11000000.10101000.00001010.01001101
    +
    192 = 11000000 · 168 = 10101000 · 10 = 00001010 · 77 = 01001101
    +
    +

    Chaque octet va de 0 (00000000) à 255 (11111111). Une adresse comme 192.168.10.300 est donc impossible.

    +
    +
    +

    3. Le masque de sous-réseau

    +

    Le masque est lui aussi un nombre de 32 bits. Il commence par une suite de 1 (la partie réseau) suivie d’une suite de 0 (la partie hôte). La notation CIDR écrit simplement le nombre de 1 : /26.

    +
    +

    /26 = 255.255.255.192

    +
    11111111.11111111.11111111.11000000
    +
    26 bits de réseau6 bits d’hôte
    +
    +

    Dans le dernier octet, les 2 premiers bits valent 1 : 128 + 64 = 192. D’où 255.255.255.192.

    +
    +
    +

    4. Trouver l’adresse réseau : le ET logique

    +

    Pour trouver le réseau d’une adresse, on fait un ET logique bit à bit entre l’adresse et le masque. Le résultat vaut 1 seulement si les deux bits valent 1.

    +
    +
    Table du ET logique
    ABA ET B
    000
    010
    100
    111
    +
    +

    Dernier octet seulement

    +

    01001101 (77)

    +

    ET 11000000 (192)

    +

    = 01000000 (64)

    +
    +
    +

    Les trois premiers octets du masque valent 255 : ils recopient l’adresse telle quelle. L’adresse réseau de 192.168.10.77/26 est donc 192.168.10.64.

    +
    +
    +

    5. Diffusion et nombre d’hôtes

    +

    L’adresse de diffusion (broadcast) met tous les bits d’hôte à 1. Un paquet envoyé à cette adresse arrive à toutes les machines du réseau.

    +

    Ici, les 6 bits d’hôte à 1 donnent 01111111 = 127 : la diffusion est 192.168.10.127.

    +
    Hôtes utilisables = 2bits d’hôte − 2
    +

    On retire 2 adresses : celle du réseau et celle de diffusion. Avec 6 bits : 2⁶ − 2 = 62 hôtes, de 192.168.10.65 à 192.168.10.126.

    +
    +
    +

    6. Découper un réseau en sous-réseaux

    +

    Emprunter des bits d’hôte pour le réseau crée des sous-réseaux plus petits. Emprunter 2 bits à un /24 donne 2² = 4 sous-réseaux en /26.

    +
    +

    192.168.10.0/24 découpé en 4 × /26

    +
    +
    .0
    → .63
    .64
    → .127
    .128
    → .191
    .192
    → .255
    +
    +
    Chaque bloc : 64 adresses, 62 hôtes. L’adresse .77 tombe dans le 2ᵉ bloc.
    +
    +

    Astuce : la taille d’un bloc vaut 256 moins la valeur du dernier octet du masque. Pour 192 : 256 − 192 = 64.

    +
    +
    +

    7. Adresses privées et adresses particulières

    +

    Certaines plages sont réservées aux réseaux internes (RFC 1918). Elles ne sont pas routées sur Internet.

    +
    • 10.0.0.0/8
    • 172.16.0.0/12
    • 192.168.0.0/16
    +
    • 127.0.0.1la boucle locale : la machine elle-même
    • 169.254.x.xadresse automatique quand aucun DHCP ne répond
    • 0.0.0.0« n’importe quelle adresse » ou « pas encore d’adresse »
    • 255.255.255.255diffusion limitée au réseau local
    +
    +
    +

    8. À retenir

    +
    • Une adresse IPv4 = 32 bits = 4 octets de 0 à 255.
    • Le masque sépare la partie réseau de la partie hôte. /n = n bits à 1.
    • Adresse réseau = adresse ET masque. Diffusion = bits d’hôte à 1.
    • Hôtes utilisables = 2bits d’hôte − 2.
    • Taille d’un bloc = 256 − dernier octet du masque.
    +
    +
    +

    QCM de lecture

    +

    4 questions sur les notions du texte, pour vérifier que tu as bien lu.

    +
    +

    🔒 Encore un peu de lecture

    +

    Parties lues : 0 / 8 · Temps : 0 / 5 min

    + +
    + +
    +
    +

    Pour aller plus loin

    +

    Des plateformes externes pour s’entraîner encore, à ton rythme. Elles ne font pas partie de Paillasse.

    +
    +
    + +
    +
    + +@endsection diff --git a/design/_backup-ludique/resources/views/cours/index.blade.php b/design/_backup-ludique/resources/views/cours/index.blade.php new file mode 100644 index 0000000..7ef4207 --- /dev/null +++ b/design/_backup-ludique/resources/views/cours/index.blade.php @@ -0,0 +1,88 @@ +@extends('layouts.vitrine') + +@section('titre', 'Cours gratuits') + +@section('contenu') +
    + +
    +

    Gratuit, sans compte

    +

    99 cours gratuits, calés sur vos référentiels.

    +

    Chaque cours suit le découpage de l’Éducation nationale : un CM pour comprendre, un TD pour s’exercer sur papier, un TP sur une vraie VM, un QCM corrigé et expliqué.

    +
    +
    Cours
    99
    +
    TD
    45
    +
    TP sur VM
    59
    +
    QCM corrigés
    98
    +
    +
    Bibliothèque complète · 225 fiches →Générateur de TDIDE en ligne
    +
    +
    + +
    +
    + CM Cours magistral + TD Travaux dirigés, corrigés + TP Travaux pratiques sur VM + QCM Quiz à correction expliquée + IDE Exercice de code dans l’IDE +
    +
    + @php + $cursus = config('cours'); + $fond = ['CM' => 'bg-white', 'TD' => 'bg-[#C4B5FD]', 'TP' => 'bg-[#7CF2C0]', 'QCM' => 'bg-[#FFD23F]', 'IDE' => 'bg-[#13233A] text-white']; + @endphp + @foreach ($cursus as $c) +
    +
    +
    +

    {{ $c['nom'] }}

    +

    {{ $c['sous_titre'] }} · {{ collect($c['blocs'])->sum(fn ($b) => count($b['cours'])) }} cours

    +
    +
    + @foreach ($c['blocs'] as $b) +
    +

    {{ $b['titre'] }}

    + +
    + @endforeach +
    +
    +
    + @endforeach + +@endsection diff --git a/design/_backup-ludique/resources/views/cours/show.blade.php b/design/_backup-ludique/resources/views/cours/show.blade.php new file mode 100644 index 0000000..6a168bb --- /dev/null +++ b/design/_backup-ludique/resources/views/cours/show.blade.php @@ -0,0 +1,224 @@ +@extends('layouts.vitrine') + +@section('titre', 'Adressage IPv4 et sous-réseaux') + +@section('contenu') +
    +
    + +

    Adressage IPv4 et sous-réseaux

    +
    + BTS SIO SISR · Bloc 2 + Aussi : BTS CIEL, BUT R&T S1 + 4 h +
    +
    +
    +
    + +
    +
    +

    1 · CM · Lire le cours

    + +
    +

    Adressage IPv4 et sous-réseaux · cours complet

    +

    8 parties illustrées : bits, masque, ET logique, diffusion, découpage, adresses privées. Chronométré, à lire en entier pour débloquer le QCM de lecture.

    +
    +
    ⏱ 20 minLire le CM →
    +     +
    + +
    +
    +

    2 · QCM · Valider les notions

    +

    5 questions · correction expliquée

    +
    +
    + +
    + Question 1 +

    Combien d’adresses d’hôtes utilisables dans un réseau /27 ?

    +
    + + + + +
    + +
    +
    + Question 2 +

    Quelle est l’adresse réseau de 10.0.3.200/22 ?

    +
    + + + + +
    + +
    +
    + Question 3 +

    Quel masque correspond à /26 ?

    +
    + + + + +
    + +
    +
    + Question 4 +

    192.168.1.130/25 et 192.168.1.100/25 sont-ils dans le même réseau ?

    +
    + + +
    + +
    +
    + Question 5 +

    Quelle commande affiche les adresses IP sous Debian ?

    +
    + + + + +
    + +
    +
    + + + +
    +
    +
    + +
    +

    3 · TD · S’exercer optionnel

    +
      +
    1. +

      Exercice 1

      +

      Pour 172.16.5.130/25, donnez l’adresse réseau, la diffusion et le nombre d’hôtes.

      +
      + Voir la correction expliquée +

      Un /25 coupe le dernier octet en blocs de 128. 130 est dans le bloc 128–255. Réseau : 172.16.5.128. Diffusion : 172.16.5.255. Hôtes : 2⁷ − 2 = 126.

      +
      +
      2. +
    2. +

      Exercice 2

      +

      Découpez 192.168.1.0/24 en 4 sous-réseaux de même taille.

      +
      + Voir la correction expliquée +

      4 sous-réseaux = 2 bits empruntés, donc /26. Sous-réseaux : 192.168.1.0, .64, .128 et .192, avec 62 hôtes chacun.

      +
      +
      3. +
    3. +

      Exercice 3

      +

      Le service comptabilité a 50 postes. Quel est le plus petit sous-réseau qui convient ?

      +
      + Voir la correction expliquée +

      Il faut 2ʰ − 2 ≥ 50. Avec h = 6 : 64 − 2 = 62. On garde 6 bits d’hôte, soit un /26 (255.255.255.192). Un /27 ne donnerait que 30 hôtes.

      +
      +
      4. +
    +
    + +
    +

    4 · TP · Pratiquer sur VM

    +
    +
    +

    Deux VM, un routeur

    +
      +
    1. 1. Placez deux VM dans 192.168.10.0/26.
      2. +
    2. 2. Vérifiez qu’elles se joignent avec ping.
      3. +
    3. 3. Passez la seconde en 192.168.10.70/26.
      4. +
    4. 4. Constatez l’échec, puis ajoutez une route.
      5. +
    +

    4 étapes vérifiées automatiquement · 45 min

    + Lancer le TP +
    +
    +

    eleve@vm1:~$ sudo ip addr add 192.168.10.10/26 dev ens3

    +

    eleve@vm1:~$ ip -br addr

    +

    ens3 UP 192.168.10.10/26

    +

    eleve@vm1:~$ ping -c 1 192.168.10.11

    +

    1 packets transmitted, 1 received

    +

    ✓ Étape 2 validée

    +
    +
    +
    + +
    +

    5 · EXAMEN · Quand le prof le décide

    +
    +

    Le prof compose son sujet dans la banque de questions, le programme pour la classe, et suit l’épreuve en direct : sorties d’onglet, copier-coller bloqué, remise automatique.

    +
    Voir le mode examenBanque de sujets (profs)
    +
    +
    + + + + + + +
    +
    + +@endsection diff --git a/design/_backup-ludique/resources/views/devoirs.blade.php b/design/_backup-ludique/resources/views/devoirs.blade.php new file mode 100644 index 0000000..c5ebe14 --- /dev/null +++ b/design/_backup-ludique/resources/views/devoirs.blade.php @@ -0,0 +1,64 @@ +@extends('layouts.vitrine') + +@section('titre', 'Devoirs maison') + +@section('contenu') +
    +
    +

    Espace enseignant · Devoirs

    Devoirs maison

    Donnez un TP, un QCM, un TD ou un exercice de code à faire à la maison. Programmez l’ouverture et la date limite, suivez les rendus, corrigez et notez.

    + + Nouveau devoir +
    +
    +
    +
    +

    Devoirs programmés

    + +
    +
    +
    +

    Rendus · TD Découpage en sous-réseaux

    + + + + + + +
    ÉlèveÉtatNote
    Léa Martin30 sept. · 17:42Rendu18/20
    Yanis Benali1 oct. · 22:10Rendu14/20
    Nora Kaci2 oct. · 09:05En retard—
    Sami Lefèvre—Non rendu—
    Chloé Petit29 sept. · 20:31Rendu19/20
    +
    +
    +
    +
    +
    +
    +

    Programmer un devoir

    +
    + + + + + +
    Options + + + +
    +
    Choisir dans la bibliothèque
    +
    +
    +
    + +@endsection diff --git a/design/_backup-ludique/resources/views/eleve.blade.php b/design/_backup-ludique/resources/views/eleve.blade.php new file mode 100644 index 0000000..6ddfad4 --- /dev/null +++ b/design/_backup-ludique/resources/views/eleve.blade.php @@ -0,0 +1,64 @@ +@extends('layouts.vitrine') + +@section('titre', 'Espace élève') + +@section('contenu') +
    + +
    +
    +

    Espace élève · lea.m.sio1-a

    +

    Salut Léa.

    +

    BTS SIO 1 · Groupe A · Bloc 2

    +
    + Reprendre mon TP +
    +
    +
    +
    +

    À faire

    + +
    + +
    +@endsection diff --git a/design/_backup-ludique/resources/views/espace-eleve.blade.php b/design/_backup-ludique/resources/views/espace-eleve.blade.php new file mode 100644 index 0000000..2cf119f --- /dev/null +++ b/design/_backup-ludique/resources/views/espace-eleve.blade.php @@ -0,0 +1,192 @@ + + + + + + Mon espace élève · Paillasse + + + + + + + + + + + + +
    + +
    + +
    +
    +
    + +
    +
    +

    Mon espace élève

    Bonjour Sarah !

    Mardi 29 septembre · 2 devoirs cette semaine · 1 examen dans 9 jours

    + Reprendre le lab VLAN · étape 6 +
    +
      +

    • Moyenne QCM

      16,0

      +1,2 sur 4 semaines

    • Labs réussis

      11/14

      dont 3 sans indice

    • Devoirs à rendre

      2

      le prochain vendredi

    • Série

      6 j

      d’entraînement d’affilée

      • +
    +
    +
    +

    Septembre – octobre 2026

    +

    Lun

    Mar

    Mer

    Jeu

    Ven

    Sam

    Dim

    +
    +
    ExamenDevoirQuizCours / TP
    +
    +
    +

    Au programme

    mardi 29/09

    +
      +
      +
      +
      +
      +

      Mes devoirs

      2 à rendre
      +

      • DM 3 · Plan d’adressage

        Réseaux · M. Belkacemi · ven. 03/10 · 23 h 59

        À rendre
        60 %

      • TP maison · Scripts Bash

        Linux · Mme Roche · lun. 06/10 · 18 h

        À rendre
        20 %

      • QCM · Lecture CM VLAN

        Réseaux · hier

        Rendu · 17/20
        100 %
      +
      +
      +

      Examens à venir

      +
      • J-9

        E6 blanc SISR

        Administration systèmes et réseaux · jeu. 08/10 · 8 h

        Réviser
      • J-14

        Contrôle · Adressage IPv4

        Réseaux · 1 h · mar. 13/10 · 10 h

        Réviser
      • —

        QCM flash · Commandes Linux

        Début d’heure · 5 min · chaque lundi

        Réviser
      +

      Pendant un examen, reste sur la page : les changements d’onglet et de fenêtre sont signalés au prof.

      +
      +
      +
      +

      S’entraîner

      +
      +
        +
        +
        +

        Ma progression par compétence

        référentiel BTS SIO

        +
        • Installer et configurer un poste85 %
        • Adressage IPv4 et sous-réseaux72 %
        • VLAN et commutation64 %
        • Scripts Bash48 %
        • Sécurité des accès55 %
        • Services réseau (DHCP, DNS)30 %
        +
        +
        +
        +
        + + +
        + + + + + + diff --git a/design/_backup-ludique/resources/views/etablissements.blade.php b/design/_backup-ludique/resources/views/etablissements.blade.php new file mode 100644 index 0000000..8a8795c --- /dev/null +++ b/design/_backup-ludique/resources/views/etablissements.blade.php @@ -0,0 +1,49 @@ +@extends('layouts.vitrine') + +@section('titre', 'Établissements') + +@section('contenu') +
        + +
        +

        Pour les établissements

        +

        Un projet par établissement. Un réseau par classe.

        +

        Chaque établissement a son espace isolé sur notre cloud OpenStack hébergé en France. Chaque classe a son propre réseau, sans IP publique.

        +
        +
        +
        +

        Chacun son rôle.

        + +
        +
        +
        +

        Une bibliothèque à dupliquer et adapter.

        +
        +

        Des séquences complètes, reliées aux référentiels : cours, TD, quiz et lab. Dupliquez une séquence, modifiez-la pour votre classe. Les quiz s’exportent en GIFT et Moodle XML.

        +
          +
        • Cours
        • TD
        • Quiz
        • Lab
          • +
        • Moodle LTI 1.3 · bientôt
        • SSO ENT · plus tard
          • +
        +
        +
        +
        +
        +
        +

        Équiper votre établissement.

        +

        Dites-nous combien de classes et quelles formations. On vous répond avec une proposition.

        +
        +
        + @csrf + + + + +
        +
        +
        +@endsection diff --git a/design/_backup-ludique/resources/views/examen.blade.php b/design/_backup-ludique/resources/views/examen.blade.php new file mode 100644 index 0000000..6cab2f8 --- /dev/null +++ b/design/_backup-ludique/resources/views/examen.blade.php @@ -0,0 +1,115 @@ + + + + + + Mode examen · Paillasse + + + @vite(['resources/css/app.css', 'resources/js/app.js']) + + + + +
        +
        + MODE EXAMEN +

        Adressage et VLAN · E6 blanc SISR · Léa Martin

        +

        Temps restant59:59

        +
        +
        +
        + +
        +
        + +
        +
        + Question 5 · 1 point +

        Un service de 50 postes doit avoir son propre sous-réseau. Quel masque choisissez-vous ?

        +
        + + + + +
        +
        + ← Précédente + + Suivante → +
        +
        +
        +
        +

        Partie TP · commutateur-sw1 · console 1

        + vérification à la remise +
        +
        +

        Créez le VLAN 20 « compta » et placez-y l’interface eth2.

        +

        root@sw1:~# ip link add link eth0 name eth0.20 type vlan id 20

        +

        root@sw1:~#

        +
        +
        +
        + +

        La copie est rendue automatiquement à la fin du temps.

        +
        +
        +
        + + + diff --git a/design/_backup-ludique/resources/views/export-ent.blade.php b/design/_backup-ludique/resources/views/export-ent.blade.php new file mode 100644 index 0000000..ec3fc6d --- /dev/null +++ b/design/_backup-ludique/resources/views/export-ent.blade.php @@ -0,0 +1,95 @@ + + + + + + Export Pronote et ENT · Paillasse + + + + + + + + + + + + +
        + +
        + +
        +

        Exports

        Export vers Pronote et l’ENT

        Vos notes, présences et appréciations, prêtes à charger dans votre logiciel de vie scolaire.

        +

        1 · Que voulez-vous exporter ?

        +

        2 · Format

        +
        +

        3 · Aperçu du fichier

        notes-bts-sio-1a-dm3.csv
        NomPrénomClasseDevoirNoteSurCoef.Date
        MartinLéaBTS SIO 1 ADM 31120103/10/2026
        NguyenSarahBTS SIO 1 ADM 31620103/10/2026
        KaciInèsBTS SIO 1 ADM 31920103/10/2026
        PetitHugoBTS SIO 1 ADM 3ABS20103/10/2026

        16 lignes · les devoirs non rendus sont marqués ABS · encodage UTF-8

        +

        Charger le fichier dans votre logiciel

        1. 1Téléchargez le fichier CSV ci-dessus.
        2. 2Dans votre logiciel de vie scolaire, ouvrez l’import de notes du service concerné.
        3. 3Choisissez le fichier, vérifiez la correspondance des colonnes, validez.

        Les menus exacts dépendent de votre logiciel et de ses réglages. Un tutoriel vidéo est disponible dans l’aide.

        +
        +
        + + + + + + diff --git a/design/_backup-ludique/resources/views/facturation.blade.php b/design/_backup-ludique/resources/views/facturation.blade.php new file mode 100644 index 0000000..db605b8 --- /dev/null +++ b/design/_backup-ludique/resources/views/facturation.blade.php @@ -0,0 +1,91 @@ + + + + + + Mon abonnement · Paillasse + + + + + + + + + + + + +
        + +
        + +
        +

        Facturation

        Mon abonnement

        M. Belkacemi · BTS SIO 1 A et B

        Changer d’offre

        Offre actuelle

        Enseignant · mensuel

        Actif

        29,00 € HT · 34,80 € TTC / mois

        Prochain paiement le 29/10/2026 · 2 classes · 33/35 élèves

        VM ce mois : 270 h sur 495 h incluses

        +

        Moyen de paiement

        VISA

        •••• 4242

        expire 08/28

        Vous pouvez aussi passer au prélèvement SEPA ou au bon de commande de votre établissement.

        +

        Factures

        N°DateMontant TTCStatut
        F-2026-10429/09/202634,80 €PayéePDF
        F-2026-08129/08/202634,80 €PayéePDF
        F-2026-06029/07/202634,80 €PayéePDF
        +
        + + + + + + diff --git a/design/_backup-ludique/resources/views/fiche-eleve.blade.php b/design/_backup-ludique/resources/views/fiche-eleve.blade.php new file mode 100644 index 0000000..bc318ab --- /dev/null +++ b/design/_backup-ludique/resources/views/fiche-eleve.blade.php @@ -0,0 +1,97 @@ + + + + + + Fiche élève · Paillasse + + + + + + + + + + + + +
        + +
        + +
        +

        Fiche élève

        Léa Martin

        Accès journalisé · visible par l’équipe pédagogique et la vie scolaire

        Écrire

        • Moyenne QCM

          7,5

          −4,5 en 4 semaines

        • Labs réussis

          5/14

          3,1 indices par lab

        • DM rendus

          3/3

          moyenne 11/20

        • Temps de lecture

          −62 %

          vs moyenne de la classe

        +
        +

        Compétences du référentiel

        BTS SIO · bloc 1

        • Installer et configurer un poste

          80 %

        • Adressage IPv4

          55 %

        • VLAN et commutation

          40 %

        • Scripts Bash

          35 %

        • Sécurité des accès

          60 %
        +

        Observations

        1. Difficulté21/09 · M. Belkacemi

          Participe mais se décourage vite.

        2. Progrès14/09 · Mme Roche

          Très bon travail en binôme sur le câblage.

        3. CPE27/09 · Mme Diallo

          Entretien prévu le 02/10 avec la famille.

        +
        +

        Historique

        1. 29/09LabLab VLAN · étape 2 · 3 indices utilisés
        2. 28/09ExamenE6 blanc SISR · 9/20 · 1 sortie (6 s)
        3. 26/09QCMLecture CM VLAN · 7/20 · cours lu en 4 min
        4. 24/09DMDM 2 · Adressage · rendu · 11/20
        5. 22/09Quiz flashCommandes Linux · 3/5
        6. 21/09Observation« Participe mais se décourage vite. » · M. Belkacemi
        +
        + + + + + + diff --git a/design/_backup-ludique/resources/views/fonctionnalites.blade.php b/design/_backup-ludique/resources/views/fonctionnalites.blade.php new file mode 100644 index 0000000..f683be5 --- /dev/null +++ b/design/_backup-ludique/resources/views/fonctionnalites.blade.php @@ -0,0 +1,296 @@ +@extends('layouts.vitrine') + +@section('titre', 'Fonctionnalités') + +@section('contenu') +
        + +
        +

        Fonctionnalités

        +

        Tout ce qu’il faut pour une classe, en ligne.

        +

        Des cours aux conseils de classe, de l’IDE aux TD à imprimer, sans rien installer. Un navigateur suffit, pour l’élève comme pour le prof.

        +
        +
        + +
        + +
        +
        +

        Pourquoi un tel outil ?

        +

        Suivre chaque élève, même dans une classe de 35.

        +
        +

        Avec des classes entières et une charge de travail déjà lourde, suivre chaque élève individuellement devient presque impossible. Un élève en difficulté décroche vite, souvent sans bruit, et le prof, pris par ses nombreuses classes, s’en rend compte trop tard.

        +

        Paillasse surveille tout, sans être intrusif. Le QCM de début d’heure, celui qui suit la lecture du cours, les TP, les devoirs et exercices maison : chaque trace remonte au prof. Il voit rapidement qui accompagner plus régulièrement, qui faire passer au premier rang, à qui demander de réexpliquer une notion.

        +

        C’est une supervision bienveillante et naturelle, qui ne remplace pas le regard du prof mais l’aide à savoir où concentrer ses efforts. Tout remonte dans le cockpit prof, d’où il pilote et supervise examens, devoirs maison, quiz et labs.

        +

        Dans les labs, chaque étape a ses indices, qui se débloquent après un certain nombre de tentatives. Ils ne remplacent pas l’aide d’un prof (ni une recherche Google 😉), mais ils poussent l’élève à réfléchir un tout petit peu plus avant de vous appeler. Et souvent, ils vous évitent les questions triviales.

        +

        Et dans l’autre sens, l’élève en excellence peut s’épanouir. Il aborde des notions plus avancées, avec une difficulté plus forte, sans prendre d’avance sur le programme : il explore des notions connexes qui développent sa culture générale.

        +

        Tout cela dans un unique but : faciliter votre travail.

        +
        +
        +
        +
        + Alerte douce +

        Un élève décroche

        +
        • 3 QCM de début d’heure sous la moyenne
        • Cours lu en 2 minutes au lieu de 15
        • Devoir maison non rendu
        +

        → Premier rang, notion à réexpliquer, suivi plus régulier.

        +
        +
        + Excellence +

        Un élève s’ennuie

        +
        • Tous les TP réussis du premier coup
        • 20/20 au QCM de lecture
        • Finit avant tout le monde
        +

        → Défis plus durs sur des notions connexes, sans prendre d’avance sur le programme.

        +
        + +
        + Labs +

        Un indice se débloque

        +
        1. Tentative 1 · échec
        2. Tentative 3 · 💡 Indice 1 : regarde la commande ip addr
        3. Tentative 5 · 💡 Indice 2 : le masque /26 donne 62 hôtes
        +

        → L’élève cherche d’abord. Vous gardez votre temps pour les vraies questions.

        +
        +
        +
        +
        +
        +
        +
        +

        Cockpit prof

        +

        Un seul écran pour tout piloter.

        +

        Le cockpit prof fait remonter les informations importantes : qui décroche, qui a fini, qui lève la main, qui n’a pas rendu son devoir. De là, vous pilotez et supervisez tout le reste : examens, devoirs maison, quiz flash, labs et QCM.

        +
          +
        • Lancer ou arrêter un examen
          • +
        • Programmer un devoir maison
          • +
        • Projeter un quiz flash
          • +
        • Répondre aux mains levées
          • +
        + Ouvrir le cockpit → +
        +
        +
        +

        Cockpit · BTS SIO 1

        mardi 29/09 · 10 h 12

        +
          +

        • À aider

          3

          élèves en difficulté

        • Mains levées

          2

          en attente

        • Examen

          24/24

          en cours, 0 sortie

        • DM

          19/24

          rendus avant vendredi

          • +
        +
          +
        1. AlerteLéa M. · 3 QCM sous la moyenne · proposer le premier rang
          2. +
        2. Main levéeYanis B. · bloqué à l’étape 4 du lab VLAN
          3. +
        3. DM5 devoirs non rendus · relance automatique jeudi
          4. +
        4. ExcellenceInès K. · tout réussi · défi connexe proposé
          5. +
        +
        +
        +
        +
        + + + + +
        +
        +

        Toutes les ressources

        +

        22 outils, un seul site.

        +

        Tout ce qui a été ajouté à Paillasse, au même endroit. Chaque carte ouvre l’outil.

        + +
        +
        + +
        +
        +
        +

        Mode examen

        +

        Vous savez quand un élève quitte sa copie.

        +

        Pendant une épreuve, Paillasse enregistre chaque sortie de l’élève : changement d’onglet, fenêtre quittée, souris sortie du navigateur. Chaque événement est horodaté et apparaît en direct sur votre écran.

        +
        • Changement d’onglet détecté
        • Fenêtre du navigateur quittée
        • Souris sortie de la page
        • Sortie du plein écran
        • Copier-coller bloqué
        • Indices désactivés
        • VM sans accès Internet
        • Remise automatique à la fin du temps
        + Voir le mode examen +
        +
        +
        +
        + EN DIRECT +

        Essayez : changez d’onglet ou sortez la souris de la page

        +

        0 incident(s)

        +
        +
          +
        1. En attente… Rien à signaler pour l’instant.
          2. +
        +

        Essayez aussi de copier ce texte : la copie est bloquée pendant l’épreuve.

        +
        +
        +
        +
        + +
        +
        +
        +

        QCM et quiz

        +

        Chaque erreur devient une explication.

        +

        L’élève valide, voit sa note, puis lit pourquoi la bonne réponse est la bonne. Vous voyez quelles questions font trébucher la classe.

        +
        • Choix unique ou multiple
        • Vrai / faux, réponse numérique
        • Texte à trous
        • Correction expliquée question par question
        • Tirage aléatoire dans une banque
        • Import et export GIFT et Moodle XML
        +
        +
        +
        +

        Question 2 · réussie par 38 % de la classe

        +

        Quelle est l’adresse réseau de 10.0.3.200/22 ?

        +
        +

        Erreur fréquente : 10.0.3.0 (le masque n’est pas appliqué au 3ᵉ octet).

        +
        + Essayer un QCM corrigé +
        +
        +
        +
        +
        +
        +

        Quiz de début d’heure

        +

        5 minutes pour réveiller la classe.

        +

        Sélectionnez les outils à réviser parmi ceux proposés : ls, chmod, grep, ip, ssh, systemctl… Un diaporama s’affiche au tableau. Les élèves se connectent avec leur identifiant, sur téléphone ou sur PC, depuis leur navigateur. Vous voyez en direct qui est là et qui manque.

        +
        • ls
        • chmod
        • grep
        • ip
        • ping
        • ssh
        • systemctl
        • dig
        + Créer un quiz flash +
        +
        +

        Banque de sujets

        +

        1 240 questions, à votre sauce.

        +

        Classées par cursus, notion et difficulté. Modifiez-les, écrivez les vôtres, partagez-les avec vos collègues. Composez un sujet d’examen en quelques clics.

        +
        • 6 types de questions
        • Explication pour chaque réponse
        • Statistiques de réussite par question
        • Sujets prêts : E6 blanc SISR, contrôles, QCM de trimestre
        + Ouvrir la banque
        Bibliothèque du référentiel →Générateur de TD →
        +
        +
        +
        + + +
        +
        +

        CM, TD, TP

        +

        Des séquences prêtes, à votre main.

        +

        Chaque cours suit le même parcours, calé sur votre référentiel. Dupliquez-le, changez ce que vous voulez, assignez-le en un clic.

        +
          +

        1. 1 · CM

          Une page complète

          Illustrée, chronométrée. L’élève doit tout lire.

          2. +

        2. 2 · QCM

          A-t-il bien lu ?

          Questions sur les notions du texte.

          3. +

        3. 3 · TD

          Optionnel

          Exercices corrigés pour s’entraîner.

          4. +

        4. 4 · TP

          Pratiquer

          VM prête en 5 s, étapes vérifiées.

          5. +

        5. 5 · Examen

          Quand le prof veut

          Sujet tiré de la banque, surveillé en direct.

          6. +
        +
        Lire un CM complet + Parcourir les cours gratuitsOuvrir l’IDE en ligne
        +
        +
        + +
        +
        +
        +

        Élèves et classes

        +

        Vos classes, vos groupes, en quelques minutes.

        +

        Créez une classe, découpez-la en groupes, ajoutez les élèves comme vous préférez. L’établissement garde la main sur tout depuis l’espace administrateur, CPE compris.

        +
          +
        1. 1Code ou QR de classe, validé par le prof
        2. 2Import CSV : nom, prénom, groupe
        3. 3Saisie rapide, une ligne par élève
        4. 4Fiche de connexion imprimée pour les mineurs, sans e-mail
        5. 5Moodle LTI 1.3 (bientôt)
          6. +
        6. Fin d’année : archivage de la classe, suppression automatique 90 jours après.
          7. +
        +
        +
        + +
        +
        +
        +

        Évolution des élèves

        +

        Voyez qui progresse, semaine après semaine.

        +

        Notes de QCM, étapes de TP réussies, temps passé, compétences du référentiel : tout se suit dans le temps, pour un élève ou pour la classe.

        + Ouvrir le suivi de classe +
        +
        +
        + Nora Kaci · moyenne aux QCM + NoraClasse +
        +
        + 810121416 + S1S2S3S4S5S6S7S8S9S10 + + + +
        +

        +6,5 points en 10 semaines. Décrochage repéré en S4, rattrapé après le TD assigné.

        +
        +
        +
        + +
        +
        +
        +

        Conseil de classe

        +

        Vos remarques, prêtes pour le conseil.

        +

        Notez une observation en deux clics pendant le cours. Au moment du conseil de classe, tout est rangé par élève et par période : notes, progression, assiduité en TP, remarques datées.

        +
        • Remarques datées et catégorisées
        • Visibles par l’équipe et le CPE
        • Synthèse par trimestre ou semestre
        • Export PDF et CSV pour le conseil
        +
        +
        +
        +

        Sami Lefèvre · 1er trimestre

        QCM 11,2 · TP 14/20 étapes
        +
          +
        1. Progrès14/11Beaucoup plus autonome sur les TP réseau.
          2. +
        2. Travail28/10QCM VLAN non rendu, rattrapé le lendemain.
          3. +
        3. Comportement03/10A aidé deux camarades bloqués sur le DHCP.
          4. +
        +
        +
        +
        +
        +
        + +
        +
        +

        100 % en ligne. Rien à installer.

        + +
        +
        + +@endsection diff --git a/design/_backup-ludique/resources/views/generateur.blade.php b/design/_backup-ludique/resources/views/generateur.blade.php new file mode 100644 index 0000000..88555b1 --- /dev/null +++ b/design/_backup-ludique/resources/views/generateur.blade.php @@ -0,0 +1,104 @@ +@extends('layouts.vitrine') + +@section('titre', 'Générateur de TD') + +@section('contenu') +
        +
        +

        Générateur de TD

        +

        Des exercices à l’infini, corrigés tout de suite.

        +

        Chaque clic tire un nouvel exercice au hasard. La correction montre le calcul, étape par étape. En mode examen : 10 questions, chronométrées, notées sur 20.

        +
        +
        +
        + +
        + +
        +

        +

        +
        +
        + +
        + +
        +
        + +@endsection diff --git a/design/_backup-ludique/resources/views/ide.blade.php b/design/_backup-ludique/resources/views/ide.blade.php new file mode 100644 index 0000000..bf4c6bc --- /dev/null +++ b/design/_backup-ludique/resources/views/ide.blade.php @@ -0,0 +1,285 @@ + + + + + + IDE en ligne · Paillasse + + + @vite(['resources/css/app.css', 'resources/js/app.js']) + + + + + + + + + + + + + + + + + + + + +
        + +
        + +
        +
        +
        +
        +

        IDE en ligne

        +

        Coder, exécuter, vérifier. Dans le navigateur.

        +

        Python, SQL, HTML/CSS/JavaScript et Linux. Le code s’exécute vraiment, les tests disent tout de suite si c’est juste. Ton code est gardé sur cet appareil.

        +
        +
        +
        +
        + +
        +
        + + main.py + + + + + +
        +
        +
        +
        + + + +
        + 
        Clique sur ▶ Exécuter pour lancer ton code.
        + + +
        +
        + +
        + +
        + + + + + + diff --git a/design/_backup-ludique/resources/views/labs/essai.blade.php b/design/_backup-ludique/resources/views/labs/essai.blade.php new file mode 100644 index 0000000..a7066f3 --- /dev/null +++ b/design/_backup-ludique/resources/views/labs/essai.blade.php @@ -0,0 +1,82 @@ +@extends('layouts.vitrine') + +@section('titre', 'Lab d’essai · Premiers pas dans le shell') + +@push('head') + + + + +@endpush + +@section('contenu') +
        +
        + ← Labs +

        Premiers pas dans le shell

        + Lab d’essai +
        +
        +
        +
        +

        Consignes

        +
          +
        1. 1Affiche le dossier courant avec pwd.
          2. +
        2. 2Liste son contenu avec ls -la.
          3. +
        3. 3Crée un dossier projets et entre dedans.
          4. +
        4. 4Crée un fichier notes.txt.
          5. +
        5. 5Écris ton prénom dedans avec echo.
          6. +
        +
        +
        +
        + + debian-lab · console 1 · xterm.js +
        +
        +
        + +
        + +@endsection diff --git a/design/_backup-ludique/resources/views/labs/index.blade.php b/design/_backup-ludique/resources/views/labs/index.blade.php new file mode 100644 index 0000000..0bdd775 --- /dev/null +++ b/design/_backup-ludique/resources/views/labs/index.blade.php @@ -0,0 +1,85 @@ +@extends('layouts.vitrine') + +@section('titre', 'Labs') + +@section('contenu') +
        + +
        +

        Catalogue

        +

        Des labs qui se corrigent tout seuls.

        +

        Chaque lab est une vraie VM Debian, ou plusieurs reliées en réseau. L’élève suit les consignes, la vérification valide chaque étape.

        +
        +
        +
        +
        +

        Filtrer

        + + + + +
        + +
        +@endsection diff --git a/design/_backup-ludique/resources/views/labs/web.blade.php b/design/_backup-ludique/resources/views/labs/web.blade.php new file mode 100644 index 0000000..c1bea40 --- /dev/null +++ b/design/_backup-ludique/resources/views/labs/web.blade.php @@ -0,0 +1,160 @@ + + + + + + Lab web · Paillasse + + + @vite(['resources/css/app.css', 'resources/js/app.js']) + + + + + + + + +
        + +
        + +
        +
        +
        + ← Labs +

        Lab web · Mon premier serveur Apache

        + SRV-1 · BTS SIO, BUT R&T, NSI +
        +
        +
        + +
        +
        web-01 · 192.168.10.10 · xterm.js
        +
        +
        +
        +
        + +

        http://192.168.10.10/

        +
        + +
        +
        + +
        + + + + + + diff --git a/design/_backup-ludique/resources/views/layouts/vitrine.blade.php b/design/_backup-ludique/resources/views/layouts/vitrine.blade.php new file mode 100644 index 0000000..de5c6b9 --- /dev/null +++ b/design/_backup-ludique/resources/views/layouts/vitrine.blade.php @@ -0,0 +1,84 @@ + + + + + + @yield('titre') · Paillasse + + + @vite(['resources/css/app.css', 'resources/js/app.js']) + + @stack('head') + + + +
        + +
        + +
        + @yield('contenu') +
        + + + + + diff --git a/design/_backup-ludique/resources/views/legal.blade.php b/design/_backup-ludique/resources/views/legal.blade.php new file mode 100644 index 0000000..6ca987a --- /dev/null +++ b/design/_backup-ludique/resources/views/legal.blade.php @@ -0,0 +1,70 @@ +@extends('layouts.vitrine') + +@section('titre', 'Informations légales') + +@section('contenu') +
        +
        +

        Informations légales

        +

        Le cadre, en clair.

        +

        Dernière mise à jour : 29 septembre 2026

        +
        +
        +
        + +
        + +
        +

        Mentions légales

        +
        +

        Éditeur : Paillasse, édité par Adam Belkacemi, [à compléter] (forme juridique, capital, SIRET, adresse du siège).

        +

        Directeur de la publication : Adam Belkacemi. Contact : adam@belkacemi.me.

        +

        Hébergeur : Scaleway SAS, 8 rue de la Ville-l’Évêque, 75008 Paris. Les serveurs sont situés en France, à Strasbourg.

        +
        + +
        +

        Conditions générales d’utilisation

        +
        +

        1. Objet

        Paillasse met à disposition des cours, des labs Linux et réseau sur machines virtuelles, des QCM et des outils de suivi pour l’enseignement.

        +

        2. Comptes

        Les enseignants créent un compte avec leur e-mail professionnel. Les élèves se connectent avec l’identifiant et le code remis par leur enseignant. Chacun est responsable de la confidentialité de ses accès.

        +

        3. Version démo

        Pendant la phase de démonstration, l’accès est gratuit et sans carte bancaire. Paillasse peut faire évoluer les fonctionnalités et les limites d’usage, en prévenant les utilisateurs.

        +

        4. Usage acceptable

        Les VM servent uniquement à l’apprentissage. Sont interdits : le minage, les attaques vers des tiers, le contournement des quotas ou du mode examen. Le trafic sortant des VM est bloqué par défaut et l’activité est journalisée.

        +

        5. Mode examen

        Pendant une épreuve, les changements d’onglet, sorties de fenêtre et sorties de souris sont enregistrés et transmis à l’enseignant. L’élève en est informé avant de commencer.

        +

        6. Contenus

        Les conditions de réutilisation des contenus pédagogiques seront précisées ultérieurement. Les travaux des élèves leur appartiennent.

        +

        7. Disponibilité et responsabilité

        Paillasse fait ses meilleurs efforts pour assurer la disponibilité du service, sans garantie d’absence d’interruption. [à compléter]

        +

        8. Droit applicable

        Les présentes conditions sont soumises au droit français.

        +
        + +
        +

        Confidentialité et RGPD

        +
        +

        Quand un établissement utilise Paillasse avec ses élèves, l’établissement est responsable du traitement et Paillasse agit comme sous-traitant. Pour les comptes enseignants créés directement, Paillasse est responsable du traitement.

        +

        Données collectées

        +
        • Élèves : nom, prénom, groupe. Aucun e-mail pour les mineurs.
        • Enseignants : nom, e-mail professionnel, établissement.
        • Activité pédagogique : étapes de TP, réponses aux QCM, temps passé, remarques des enseignants.
        • Mode examen : événements de sortie de copie, uniquement pendant l’épreuve.
        • Journaux techniques de sécurité.
        +

        Finalités et base légale

        Fournir le service d’enseignement demandé par l’établissement (mission d’intérêt public de l’établissement) ou par l’enseignant (exécution du contrat).

        +

        Conservation

        Les données d’une classe sont supprimées automatiquement 90 jours après son archivage de fin d’année.

        +

        Hébergement

        Toutes les données sont hébergées en France, chez Scaleway. Elles ne quittent pas l’Union européenne. Aucune donnée n’est vendue ni utilisée à des fins publicitaires.

        +

        Vos droits

        Accès, rectification, effacement, limitation, opposition et portabilité : écrivez à adam@belkacemi.me ou à votre établissement. Vous pouvez aussi adresser une réclamation à la CNIL (cnil.fr).

        +

        Délégué à la protection des données : [à compléter]

        +
        + +
        +

        Cookies

        +
        +

        Paillasse n’utilise que des cookies strictement nécessaires : le cookie de session qui vous garde connecté, et le jeton de sécurité des formulaires. Aucun cookie publicitaire, aucun traceur tiers. Ils ne demandent donc pas de consentement.

        +
        + +
        +

        Accord de sous-traitance (article 28 du RGPD)

        +
        +

        Pour chaque établissement, un accord de sous-traitance précise :

        +
        • l’objet, la durée et la nature des traitements ;
        • les mesures de sécurité : chiffrement en transit, isolement des classes, sauvegardes chiffrées ;
        • la confidentialité des personnes autorisées ;
        • la liste des sous-traitants ultérieurs (hébergement : Scaleway SAS, France) ;
        • l’assistance pour répondre aux demandes de droits ;
        • la notification des violations de données ;
        • la suppression ou la restitution des données en fin de contrat.
        +

        Demander l’accord pour votre établissement

        +
        +
        +
        +@endsection diff --git a/design/_backup-ludique/resources/views/maison.blade.php b/design/_backup-ludique/resources/views/maison.blade.php new file mode 100644 index 0000000..ff950de --- /dev/null +++ b/design/_backup-ludique/resources/views/maison.blade.php @@ -0,0 +1,28 @@ +@extends('layouts.vitrine') + +@section('titre', 'Ressources à la maison') + +@section('contenu') +
        +
        +

        Pour les élèves

        +

        Envie d’aller plus loin à la maison ?

        +

        Sur Paillasse, tu retrouves tes cours, tes QCM, l’IDE et le générateur de TD depuis chez toi, sur ton PC ou ton téléphone. Et si tu en veux encore, voici des ressources gratuites, sérieuses et en grande partie en français.

        +
        Coder dans l’IDE →S’entraîner au générateur de TDRelire les cours
        +
        +
        +
        +

        Ressources externes gratuites

        +

        Elles ne font pas partie de Paillasse. Certaines demandent de créer un compte : demande l’accord de tes parents si tu es mineur.

        + +
        + + +@endsection diff --git a/design/_backup-ludique/resources/views/messagerie.blade.php b/design/_backup-ludique/resources/views/messagerie.blade.php new file mode 100644 index 0000000..7874734 --- /dev/null +++ b/design/_backup-ludique/resources/views/messagerie.blade.php @@ -0,0 +1,90 @@ + + + + + + Messagerie · Paillasse + + + + + + + + + + + + +
        + +
        + +
        +

        Messagerie

        Yanis Benali

        Élève · BTS SIO 1 A · lab VLAN en cours

        Fiche élève
        Échanges visibles par l’élève et son équipe pédagogique. Pas de messages entre élèves. Horaires de réponse conseillés : 8 h – 19 h.

        1. Bonjour Monsieur, je ne comprends pas l’étape 4 du lab VLAN, la commande ne marche pas.

          10:12

        2. J’ai déjà utilisé les 2 indices 😅

          10:14

        3. Bonjour Yanis. Regarde bien le nom de l’interface avec ip a : ce n’est pas eth0 sur cette VM.

          10:16

        +
        +
        + + + + + + diff --git a/design/_backup-ludique/resources/views/paiement-ok.blade.php b/design/_backup-ludique/resources/views/paiement-ok.blade.php new file mode 100644 index 0000000..c76097c --- /dev/null +++ b/design/_backup-ludique/resources/views/paiement-ok.blade.php @@ -0,0 +1,95 @@ + + + + + + Paiement confirmé · Paillasse + + + + + + + + + + + + +
        + +
        + +
        +
        + +

        Merci ! C’est activé.

        +

        Votre offre Enseignant est active. Le reçu et la facture sont envoyés par e-mail.

        +
        Offre
        Enseignant · mensuel
        Montant
        34,80 € TTC / mois
        Prochain paiement
        29/10/2026
        Facture
        F-2026-104 (PDF)
        +
        Ouvrir mon cockpit →Gérer mon abonnement
        +

        Un coup de pouce en plus ? Parlez de Paillasse à votre établissement, ou écrivez vos remarques à adam@belkacemi.me.

        +
        + + + + + + diff --git a/design/_backup-ludique/resources/views/paiement.blade.php b/design/_backup-ludique/resources/views/paiement.blade.php new file mode 100644 index 0000000..66e616c --- /dev/null +++ b/design/_backup-ludique/resources/views/paiement.blade.php @@ -0,0 +1,126 @@ + + + + + + Paiement · Paillasse + + + + + + + + + + + + +
        + +
        + +
        +
        ← Retour aux tarifs

        Passer à l’offre payante

        Les cours restent gratuits pour toujours. Vous payez les VM, le suivi et les outils prof.

        +
        +
        +

        1 · Votre offre

        +
        + +
        +

        2 · Facturation

        +
        +
        +

        3 · Moyen de paiement

        +
        +

        Le numéro de carte est saisi dans un champ sécurisé fourni par Stripe. Paillasse ne le voit ni ne le stocke.

        + + +
        +
        + +
        + +
        + + + + + + diff --git a/design/_backup-ludique/resources/views/pourquoi.blade.php b/design/_backup-ludique/resources/views/pourquoi.blade.php new file mode 100644 index 0000000..e24c647 --- /dev/null +++ b/design/_backup-ludique/resources/views/pourquoi.blade.php @@ -0,0 +1,269 @@ +@extends('layouts.vitrine') + +@section('titre', 'Pourquoi ce projet ?') + +@section('contenu') +
        + +
        +
        +

        Le fondateur

        +

        Pourquoi ce projet ?

        +

        Parce qu’un BTS peut changer une vie. Il a changé la mienne.

        +

        Salut ! Moi, c’est Adam Belkacemi.

        +

        Après un bac S, je n’ai pas trouvé de filière qui me correspondait. J’ai très tôt intégré le marché du travail, et j’ai fait plein de boulots !

        +
          +
        • Coursier Uber Eats
          • +
        • Caissier
          • +
        • Employé polyvalent en grande distribution
          • +
        • Manutentionnaire
          • +
        +

        L’informatique et le développement web, je les ai appris seul, en autodidacte. Au départ, c’était pour rendre service : mon frère avait besoin d’un site pour son cabinet d’infirmier, puis mon oncle pour son activité d’artisan. Le soir, après le boulot, j’apprenais, je testais, je cassais, je recommençais.

        +

        J’ai pris goût à la programmation. Un nouveau monde s’est ouvert à moi !

        +

        En 2019, j’intègre un BTS SN-IR, la seule formation qui voulait bien de moi… Ça a été le meilleur choix de toute ma vie !!!

        +

        Pour la première fois, j’avais une vraie machine sous les mains, des profs qui me poussaient et un cadre pour progresser. Deux ans plus tard, j’en sors avec de bonnes notes et une lettre de recommandation de mon prof principal. Direction l’école d’ingénieur. Ça a été la plus belle expérience de toute ma vie ! 😊 Je le souhaite à tout le monde.

        +

        Aujourd’hui, je suis data ingénieur et entrepreneur.

        +
        +
        + +
        + Portrait d’Adam Belkacemi +
        + Data ingénieur · entrepreneur + Ancien BTS SN-IR · 2019-2021 +
        + +
          +
          • +
          • +
          • +
          • +
        • { data }SQL
          • +
        +
        +
        +
        +
        +
        +
        +

        Ce que j’ai appris en chemin.

        +
        +
        + Télécom Saint-Étienne · alternance +
        + Façade de Télécom Saint-Étienne +
        +

        Montée en charge : d’alternant à chef de projet digital

        +

        Juste après mon BTS, je tente le concours Mines-Télécom réservé aux alternants. Mes bonnes notes de BTS et la lettre de recommandation de mon prof principal font la différence : j’entre à Télécom Saint-Étienne, en école d’ingénieur.

        + + IMT + Concours Mines-Télécom, voie alternancealternance.imt.fr ↗ + +

        Il me reste une étape, et pas des moindres : il me faut une entreprise ! Je la trouve chez un industriel américain, à Grenoble et Échirolles, comme chef de projet digital.

        +

        Pendant 3 ans, je pilote des projets à plusieurs centaines de milliers d’euros. Je découvre les outils de data engineering et d’IA, le suivi de production industrielle automatisé (SCADA, MES, IHM), la gestion de la qualité et la maintenance. Je permets aux équipes de terrain de suivre leur production en temps réel et de réagir plus vite quand une machine s’arrête.

        +

        Autant vous dire que les machines qui tombent en panne au pire moment, je connais.

        +
        +
        + Partir de zéro +

        Des IA construites de A à Z

        +

        À l’école, j’ai aussi créé des IA en partant de zéro, en Python. L’une reconnaît la voix et la transforme en texte. Une autre lit les caractères et reconnaît les formes (OCR).

        +
        • Python
        • NumPy
        • Pandas
        • scikit-learn
        • TensorFlow
        • PyTorch
        • OpenCV
        • Jupyter
        +

        C’est là que j’ai compris qu’on apprend vraiment en faisant.

        +
        +

        À l’école d’ingé, j’ai aussi touché à tout ce qu’on y voit : les différents types de bases de données, SQL ou NoSQL, les principaux langages, les réseaux, l’électronique, la gestion de projet lean et agile, et même la compta.

        +
        +

        Bases de données

        • SQL
        • MongoDB
        • Cassandra
        • Redis
        • Neo4j
        +

        Langages

        • Java
        • SQL
        • Python
        • JavaScript
        • TypeScript
        • PHP
        +

        Et aussi

        • Réseaux
        • Électronique
        • Lean
        • Agile
        • Gestion de projet
        • Comptabilité
        +
        +
        + +
        +
        + 3 mois · en anglais +

        Direction Den Bosch, aux Pays-Bas

        +

        Trois mois à ’s-Hertogenbosch, que tout le monde là-bas appelle Den Bosch, comme développeur full stack, à construire une solution RH, le tout en anglais. Les premiers jours, on s’accroche. Et puis on se lance. J’en suis revenu avec un bien meilleur anglais et une expérience que je n’oublierai pas.

        +
          +
          • +
        +
        +
        + +
        Canal et maisons de Den Bosch
        +
        Den Bosch, mon QG pendant 3 mois
        +
        +
        +
        +
        + + +
        +
        +

        Tout le monde mérite sa place et la réussite.

        +
        +

        Chaque élève mérite une vraie machine pour apprendre, pas une salle informatique qui plante. Chaque prof mérite de passer son temps à enseigner, pas à réparer des postes.

        +

        J’ai donc construit Paillasse : un outil clé en main, prêt en 5 secondes, pensé par quelqu’un qui a été assis au fond de la salle de TP.

        +
        +
        + +
        + +
        +

        Vous devenez le roi du silence grâce à la fonction « Lever la main ».

        +

        Vos élèves n’auront plus que le droit de tousser ou de respirer !

        +
        +
        +
        +
        +
        +

        Un choix, pas un hasard

        +

        Pourquoi Paillasse est aussi coloré ?

        +
        +

        On a fait exprès de choisir des couleurs vives : jaune, vert menthe, rose, lavande, sur un fond blanc et des bordures noires épaisses. Le but est simple : que le regard de l’élève tombe tout de suite sur ce qui compte, la consigne, le terminal, la question, le bouton à cliquer.

        +

        Ce n’est pas une intuition de designer. La recherche en psychologie cognitive montre depuis longtemps que la couleur et le contraste guident l’attention, et que ce qui attire l’attention est mieux retenu. Mais elle montre aussi l’inverse : trop de stimulations visuelles dispersent. Paillasse est construit sur ces deux résultats à la fois.

        +
        +
        + +
        + Revue scientifique · 2013 +

        La couleur capte l’attention, et l’attention fait la mémoire

        +

        Cette revue de la littérature explique que la couleur est un facteur clé pour capter l’attention, et que plus une information reçoit d’attention, plus elle a de chances d’être mémorisée. Les couleurs chaudes, comme le rouge et le jaune, attirent davantage le regard.

        + Dzulkifli & Mustafar, The Malaysian Journal of Medical Sciences, 2013 ↗ +
        + +
        + Psychologie de la mémoire · depuis 1933 +

        Ce qui se distingue est mieux retenu

        +

        C’est l’« effet von Restorff » : dans une série d’éléments semblables, celui qui se démarque par sa couleur, sa taille ou sa forme est mieux mémorisé. L’effet a été reproduit de nombreuses fois, on le retrouve chez l’enfant comme chez l’adulte âgé. C’est pour ça qu’une notion clé, chez nous, est toujours surlignée en couleur.

        + Étude électrophysiologique de l’effet von Restorff (PMC) ↗ +
        + +
        + Recherche privée · Nielsen Norman Group +

        Peu de couleurs, bien placées

        +

        Le cabinet de référence en ergonomie web recommande de limiter le nombre de couleurs : cela renforce la hiérarchie visuelle et laisse moins de choses qui distraient. La couleur doit attirer l’œil vers ce que l’on veut mettre en avant, et toujours avec le même sens d’un écran à l’autre.

        + NN/g, « Using Color to Enhance Your Design », 2024 ↗ +
        +
        +
        +

        La couleur qui capte : des exemples partout autour de nous

        +

        Ceux qui ont besoin qu’on les regarde, ou qu’on ne rate rien, ont tous fait le même choix : une couleur vive, utilisée avec une règle précise.

        +
        + +
        + Télévision · 1987 +
        La famille Simpson sur son canapé
        +

        Les Simpson sont jaunes pour une raison

        +

        Matt Groening a choisi ce jaune proposé par la coloriste Gyorgyi Peluce pour une raison simple : dans les années 80, les gens zappaient. Il l’a expliqué à la BBC en 2007 : quand un éclair jaune passe pendant que tu changes de chaîne, tu sais que tu regardes les Simpson. Presque 40 ans plus tard, tout le monde reconnaît encore cette famille au premier coup d’œil.

        + Groening à la BBC, cité par Joe.co.uk ↗ +
        + +
        + Marques +
        Logos de chaînes de restauration rapide
        +

        Une couleur, et on sait qui c’est

        +

        Le jaune et le rouge d’une chaîne de fast-food, le rouge d’une marque de soda, le bleu d’un réseau social : les grandes marques choisissent une ou deux couleurs vives et ne les quittent plus. Le but : être reconnues en une fraction de seconde, de loin, sur un écran ou au bord d’une route. Chez Paillasse, c’est pareil : le jaune veut toujours dire « regarde ici ».

        + +
        + +
        + Aviation · règle FAA +
        Cockpit d’avion et ses écrans
        +

        Dans le cockpit, le rouge est réservé

        +

        La réglementation américaine de l’aviation (14 CFR 25.1322) impose le rouge pour les alertes qui demandent une action immédiate, et l’ambre ou le jaune pour les mises en garde. Elle limite leur usage ailleurs, car trop de rouge et de jaune usent leur pouvoir d’alerte : les pilotes finissent par ne plus y réagir. Notre règle « une couleur = une information » vient de là.

        + 14 CFR 25.1322 · eCFR ↗ +
        + +
        + Médical +
        Moniteur médical de surveillance
        +

        Le moniteur qui clignote au bon moment

        +

        Dans un service de soins, les moniteurs suivent aussi un code de couleurs normé (norme IEC 60601-1-8) : rouge pour une alarme de haute priorité, jaune pour une priorité moyenne. Une infirmière qui entre dans une chambre voit en un regard ce qui presse. Sur le tableau de bord du prof, c’est pareil : l’élève bloqué passe en rouge, la main levée en rose.

        + +
        + +
        + Sécurité +
        Gilet jaune et triangle de signalisation
        +

        Le gilet jaune fluo

        +

        Les vêtements de haute visibilité (norme EN ISO 20471) sont jaune fluo, orange ou rouge fluo pour une raison : ces couleurs se détachent de presque tous les décors, de jour comme au crépuscule. On ne met pas du fluo partout sur un chantier : seulement sur ce qui doit absolument être vu.

        + +
        + +
        + Ce qu’on en retient +
        L’IDE en ligne de Paillasse
        +

        Vif, mais rare et toujours au même sens

        +

        Tous ces exemples disent la même chose que la recherche : une couleur vive capte l’attention, à condition d’être réservée à l’essentiel et de garder toujours le même sens. C’est exactement la règle de Paillasse : fond blanc, et du jaune, du vert, du rose seulement là où l’élève doit regarder.

        + +
        +
        +
        +
        +

        Nos trois règles de couleur

        +
          +

        1. 1

          Fond blanc, toujours

          Rien autour ne vient voler l’attention. L’écran reste calme.

          2. +

        2. 2

          Une couleur = une information

          Vert : réussi. Rose : main levée. Rouge : bloqué ou examen. Jaune : à lire maintenant.

          3. +

        3. 3

          Lisible par tous

          Texte noir sur couleur vive, contraste élevé, et jamais une information portée par la couleur seule.

          4. +
        +

        Soyons honnêtes : aucune couleur n’empêche à elle seule un élève de regarder son téléphone. Mais un écran clair, où l’essentiel saute aux yeux, lui donne moins de raisons de décrocher. Le reste, c’est le travail du prof, et Paillasse est là pour lui libérer du temps.

        +
        +
        +
        + + +
        + +
        +

        Paillasse grandit avec vous.

        +

        Un bug, une idée, un TP qui manque ? Écrivez-moi directement. Je lis tout et je réponds.

        +
        +
        + @csrf +
        + + +
        + +
        + + +
        +
        +
        +

        Ou écrivez-moi directement :

        +

        adam@belkacemi.me

        + +
        +
        + +
        +
        +@endsection diff --git a/design/_backup-ludique/resources/views/quiz/eleve.blade.php b/design/_backup-ludique/resources/views/quiz/eleve.blade.php new file mode 100644 index 0000000..ea2b9fa --- /dev/null +++ b/design/_backup-ludique/resources/views/quiz/eleve.blade.php @@ -0,0 +1,61 @@ + + + + + + Quiz flash · Paillasse + + + @vite(['resources/css/app.css', 'resources/js/app.js']) + + + + +
        +

        Vue élève · téléphone ou PC

        +
        +

        Quiz flash

        +
        + + + + +
        +
        + + + +
        + + + diff --git a/design/_backup-ludique/resources/views/quiz/projection.blade.php b/design/_backup-ludique/resources/views/quiz/projection.blade.php new file mode 100644 index 0000000..dcb0c89 --- /dev/null +++ b/design/_backup-ludique/resources/views/quiz/projection.blade.php @@ -0,0 +1,160 @@ + + + + + + Quiz flash · projection · Paillasse + + + @vite(['resources/css/app.css', 'resources/js/app.js']) + + + + +
        +
        + QUIZ FLASH +

        BTS SIO 1 · Groupe A · ls, chmod, grep, ip, ping

        +

        0 / 24 connectés

        + +
        + +
        +
        +

        Sur ton téléphone ou ton PC, va sur

        +

        paillasse.fr/quiz

        +

        et entre le code

        +

        K7Q4

        +

        Connecte-toi avec ton identifiant Paillasse.

        +
        +
        +

        Présences

        0 / 24

        +
          +
        • Léa Martin
          • +
        • Yanis Benali
          • +
        • Nora Kaci
          • +
        • Tom Robert
          • +
        • Inès Durand
          • +
        • Sami Lefèvre
          • +
        • Chloé Petit
          • +
        • Adam Fontaine
          • +
        • Maël Girard
          • +
        • Jade Thomas
          • +
        • Hugo Moreau
          • +
        • Lina Garcia
          • +
        • Rayan Faure
          • +
        • Emma Blanc
          • +
        • Noah Henry
          • +
        • Sarah Roux
          • +
        • Ilyes Morel
          • +
        • Manon Lopez
          • +
        • Lucas Mercier
          • +
        • Zoé Dupont
          • +
        • Enzo Lambert
          • +
        • Camille Bonnet
          • +
        • Nathan Fournier
          • +
        • Anaïs Leroy
          • +
        +
        +

        En attente des connexions…

        + +
        +
        +
        + + + + +
        + + + diff --git a/design/_backup-ludique/resources/views/sujet-creer.blade.php b/design/_backup-ludique/resources/views/sujet-creer.blade.php new file mode 100644 index 0000000..b49b026 --- /dev/null +++ b/design/_backup-ludique/resources/views/sujet-creer.blade.php @@ -0,0 +1,89 @@ + + + + + + Créer un sujet d’examen · Paillasse + + + + + + + + + + + + +
        + +
        + +
        +

        Sujet · étape par étape

        Créer un sujet d’examen

        Composez un sujet en 5 étapes, à partir de la banque ou de vos questions.

        1 · Cadre de l’épreuve

        +
        + + + + + + diff --git a/design/_backup-ludique/resources/views/tarifs.blade.php b/design/_backup-ludique/resources/views/tarifs.blade.php new file mode 100644 index 0000000..73894e4 --- /dev/null +++ b/design/_backup-ludique/resources/views/tarifs.blade.php @@ -0,0 +1,100 @@ +@extends('layouts.vitrine') + +@section('titre', 'Tarifs') + +@section('contenu') +
        + +
        +
        +

        Tarifs HT

        +

        Les cours sont gratuits. Les VM coûtent moins qu’un manuel.

        +

        Une licence Paillasse pour un élève coûte 24 € par an : QCM, TP sur VM, suivi et mode examen compris.

        +
        +
        + + + + + + + + + + + + + 0€ + GRATUIT + + + + +
        +
        +
        +
        + +
        +
        +
        +

        API et MCP pour développeurs

        +

        19 € HT par mois avec 100 h de VM incluses, puis 0,09 € HT l’heure. Quotas par jeton. Les classes restent toujours prioritaires sur la capacité.

        + Obtenir une clé +
        +
        +
        +
        +

        FAQ

        +

        Vos questions, nos réponses.

        +

        Intendance, données, pédagogie, technique. Une question manque ? adam@belkacemi.me

        +
        +

        Achat et intendance

        • Bon de commande et Chorus Pro ?

          Oui. Nous envoyons un devis, vous émettez un bon de commande, la facture arrive sur Chorus Pro. Paiement par mandat administratif à 30 jours.

        • Faut-il une carte bancaire pour essayer ?

          Non. Un enseignant crée sa classe gratuitement, sans CB. En échange, on vous demande juste un coup de pouce : vos remarques, ou votre aide pour faire souscrire votre établissement.

        • Une licence couvre quelle période ?

          Une licence suit l’année scolaire, de septembre à août. Les comptes archivés sont supprimés 90 jours après la fin d’année.

        • Les élèves qui redoublent ?

          Ils repartent sur la licence de l’année suivante. Leur historique (notes, observations, progression) peut être conservé si l’établissement le demande.

        • Peut-on payer par région ou par académie ?

          Oui, un devis groupé est possible pour plusieurs établissements. Écrivez-nous pour en parler.

        +

        Élèves et données

        • Où sont hébergées les données ?

          En France, chez Scaleway, sur des serveurs situés à Strasbourg. Rien ne sort de l’Union européenne.

        • Et le RGPD ?

          Nous collectons le minimum : nom, prénom, classe, résultats. Pas de publicité, pas de revente, pas de traceurs tiers. Un contrat de sous-traitance est fourni à l’établissement.

        • Les élèves mineurs peuvent-ils s’inscrire seuls ?

          Non. C’est l’enseignant qui crée la classe et distribue les identifiants. L’élève n’a pas besoin d’adresse e-mail.

        • Un élève peut-il travailler chez lui ?

          Oui, depuis n’importe quel navigateur, sur PC ou téléphone. Cours, QCM, IDE et devoirs maison restent accessibles toute l’année.

        +

        Pédagogie

        • Les cours suivent-ils les programmes officiels ?

          Oui. Ils sont construits à partir des référentiels officiels (BO, arrêtés, fiches RNCP), du SNT au master. Chaque CM, TD et TP indique les compétences visées.

        • Puis-je modifier un cours ou un sujet ?

          Oui. Tout se duplique et se modifie : CM, questions, TD, sujets d’examen. Vos versions restent dans votre bibliothèque.

        • Comment marche le mode examen ?

          L’élève passe en plein écran. Si sa souris sort de la fenêtre ou s’il change d’onglet, vous le voyez en direct, avec l’heure et la durée.

        • Les TD s’impriment-ils ?

          Oui. Chaque TD se télécharge en PDF avec ses étapes et ses cases à remplir. La correction s’imprime à part, pour vous.

        • Et la fonction « Lever la main » ?

          L’élève lève la main depuis son écran, vous voyez la file d’attente. Fini les « Madame ! Monsieur ! » en boucle.

        +

        Technique

        • Faut-il installer quelque chose ?

          Non. Tout se passe dans le navigateur : terminal Debian, IDE, navigateur relié à la VM. Rien à installer sur les postes du lycée.

        • Et si un élève dépasse 15 h de VM ?

          Le compteur est partagé par la classe : un élève peut consommer plus si d’autres consomment moins. Au-delà, les TP restent ouverts en lecture.

        • Le réseau du lycée bloque souvent tout…

          Paillasse passe par une connexion web chiffrée classique, comme n’importe quel site. En cas de souci, on vous aide à le régler avec votre administrateur réseau.

        • Une VM peut-elle casser le réseau du lycée ?

          Non. Chaque VM est isolée chez nous. L’élève peut tout casser dedans, il la réinitialise en un clic.

        +
        +
        +
        +@endsection diff --git a/design/_backup-ludique/resources/views/td/imprimable.blade.php b/design/_backup-ludique/resources/views/td/imprimable.blade.php new file mode 100644 index 0000000..91d646a --- /dev/null +++ b/design/_backup-ludique/resources/views/td/imprimable.blade.php @@ -0,0 +1,189 @@ + + + + + + TD à imprimer · Paillasse + + + + + + + + + + + + +
        + +
        + +
        +
        +
        +
        +

        TD prêt à imprimer

        +

        Découper un réseau IPv4.

        +

        Étapes numérotées, cases à remplir, auto-évaluation. La correction s’imprime à part, pour le prof.

        +
        +
        + + +
        +
        +
        +
        +
        +
        +

        BTS SIO · BTS CIEL · BUT R&T 1re année

        TD · Découper un réseau IPv4

        Durée : 1 h · Calculatrice interdite

        +

        Nom :

        Classe :

        Date :

        +
        +

        Rappel : un masque /n laisse 32 − n bits pour les hôtes. Nombre d’hôtes utilisables = 2(32 − n) − 2.

        +
        + +
        +
        1

        Lire l’adresse

        L’établissement dispose du réseau 192.168.10.0/24. Complète les cases.

        +
        +
        + +
        +
        2

        Choisir le masque

        Il faut 4 sous-réseaux de même taille. Combien de bits emprunter ? Coche puis justifie.

        +
        1 bit2 bits3 bits4 bits

        Justification :

        +
        + +
        +
        3

        Calculer la taille d’un sous-réseau

        Avec ton masque, complète le tableau.

        +
        Adresse réseau
        Masque (décimal)
        Nombre d’adresses par sous-réseau
        Hôtes utilisables
        +
        + +
        +
        4

        Découper le réseau

        Remplis le plan d’adressage des 4 sous-réseaux.

        +
        Sous-réseauAdresse réseauPlage d’hôtesBroadcast
        SR1 · Administration
        SR2 · Élèves
        SR3 · Serveurs
        SR4 · Wi-Fi invités
        +
        + +
        +
        5

        Vérifier sur le lab

        Connecte-toi au lab « Adressage IPv4 » et configure le poste du SR2. Recopie la commande utilisée.

        +
        +
        + +
        +
        6

        Auto-évaluation

        Coche ce que tu sais faire.

        +
        • Je sais lire une notation CIDR
        • Je sais calculer un masque
        • Je sais trouver une adresse de broadcast
        +
        +
        +
        +

        Correction

        Version prof
        +
        + +
        +
        1

        Lire l’adresse

        L’établissement dispose du réseau 192.168.10.0/24. Complète les cases.

        +
        +
        + +
        +
        2

        Choisir le masque

        Il faut 4 sous-réseaux de même taille. Combien de bits emprunter ? Coche puis justifie.

        +
        1 bit✕2 bits3 bits4 bits

        Justification :

        2² = 4 sous-réseaux. Le masque passe de /24 à /26.

        +
        + +
        +
        3

        Calculer la taille d’un sous-réseau

        Avec ton masque, complète le tableau.

        +
        Adresse réseau192.168.10.0
        Masque (décimal)255.255.255.192
        Nombre d’adresses par sous-réseau64
        Hôtes utilisables62
        +
        + +
        +
        4

        Découper le réseau

        Remplis le plan d’adressage des 4 sous-réseaux.

        +
        Sous-réseauAdresse réseauPlage d’hôtesBroadcast
        SR1 · Administration192.168.10.0192.168.10.1 – .62192.168.10.63
        SR2 · Élèves192.168.10.64192.168.10.65 – .126192.168.10.127
        SR3 · Serveurs192.168.10.128192.168.10.129 – .190192.168.10.191
        SR4 · Wi-Fi invités192.168.10.192192.168.10.193 – .254192.168.10.255
        +
        + +
        +
        5

        Vérifier sur le lab

        Connecte-toi au lab « Adressage IPv4 » et configure le poste du SR2. Recopie la commande utilisée.

        +

        sudo ip addr add 192.168.10.65/26 dev eth0

        +
        + +
        +
        6

        Auto-évaluation

        Coche ce que tu sais faire.

        +
        • Je sais lire une notation CIDR
        • Je sais calculer un masque
        • Je sais trouver une adresse de broadcast
        +
        +
        +
        + +
        +
        +
        + +
        +

        Vous devenez le roi du silence grâce à la fonction « Lever la main ».

        +

        Vos élèves n’auront plus que le droit de tousser ou de respirer !

        +
        +
        +
        +
        +
        + + + + + + + diff --git a/design/_backup-ludique/resources/views/vie-scolaire.blade.php b/design/_backup-ludique/resources/views/vie-scolaire.blade.php new file mode 100644 index 0000000..efb1a3a --- /dev/null +++ b/design/_backup-ludique/resources/views/vie-scolaire.blade.php @@ -0,0 +1,162 @@ + + + + + + Vie scolaire et intendance · Paillasse + + + + + + + + + + + + +
        + +
        + +
        +
        +
        + +
        +
        +

        Vie scolaire et intendance

        Tableau de bord CPE

        6 classes · 118 élèves · semaine du 28 septembre

        +
        + + +
        +
        +
          +

        • Alertes ouvertes

          5

          2 priorité haute

        • Présence moyenne

          92 %

          sur les séances en ligne

        • DM rendus

          75 %

          toutes classes

        • Examens surveillés

          4

          cette semaine · 7 sorties

        • Observations

          38

          prêtes pour les conseils

          • +

        • Licences

          118/120

          renouvellement 31/08/2027

        • Coût annuel

          2 832 €

          HT · 24 € / élève

        • Heures de VM

          612 h

          sur 1 770 h incluses ce mois

        • Factures

          3

          1 en attente Chorus Pro

        • Classes actives

          6

          6 enseignants

          • +
        +
        +

        Alertes élèves, toutes classes

        remontées par les profs et par Paillasse

        +
        + +
        PrioritéÉlèveSignalProf référentAction
        Haute

        Lucas Moreau

        BTS SIO 1 A

        Décrochage dans 3 matières

        QCM < 8 en réseaux, maths et CEJM

        		M. Belkacemi
        Haute

        Léa Martin

        BTS SIO 1 A

        Baisse continue sur 4 semaines

        12 → 7,5 de moyenne QCM

        		M. Belkacemi
        Moyenne

        Enzo Blanc

        Terminale NSI

        5 DM non rendus

        Depuis la rentrée

        		Mme Roche
        Moyenne

        Camille Dubois

        BTS SIO 1 A

        3 sorties pendant un examen

        E6 blanc · 12 s au total

        		M. Belkacemi
        Moyenne

        Mathis Colin

        BTS CIEL 2

        Absences répétées

        4 séances de TP manquées

        		M. Arnaud
        Positif

        Inès Kaci

        BTS SIO 1 A

        Excellence dans toutes les matières

        Proposée pour le tutorat

        		M. Belkacemi
        +
        +
        +

        Toutes les classes

        +
        + +
        ClasseEnseignantÉlèvesMoy. QCMAlertesDM rendusPrésence
        BTS SIO 1 · AM. Belkacemi1613,4381 %94 %
        BTS SIO 1 · BM. Belkacemi1712,8276 %91 %
        BTS SIO 2 · SISRMme Roche1413,9188 %96 %
        BTS CIEL 2M. Arnaud1511,6464 %85 %
        Terminale NSIMme Roche2412,1370 %93 %
        Seconde SNT 4M. Faure3211,8273 %95 %
        +
        +
        +
        +

        Conseils de classe · 1er trimestre

        +

        • BTS SIO 1 · A

          lun. 07/12 · observations saisies

          Prêt
          100 %

        • BTS CIEL 2

          mar. 08/12 · observations saisies

          2 profs à relancer
          70 %

        • Terminale NSI

          jeu. 10/12 · observations saisies

          En cours
          45 %

        • Seconde SNT 4

          ven. 11/12 · observations saisies

          En cours
          20 %
        +
        +
        +

        Journal des examens

        +

        1. lun. 28/09 · 09:14 · BTS SIO 1 A · E6 blanc

          Hugo Petit · changement d’onglet · 3 s

        2. lun. 28/09 · 09:21 · BTS SIO 1 A · E6 blanc

          Lucas Moreau · souris hors fenêtre · 6 s

        3. lun. 28/09 · 09:40 · BTS SIO 1 A · E6 blanc

          Camille Dubois · fenêtre réduite · 2 s

        4. mar. 29/09 · 14:00 · Terminale NSI · Contrôle SQL

          24/24 connectés · aucune sortie

        +
        +
        +
        +
        +

        Licences et factures

        paiement par mandat administratif
        +
        Licences utilisées118 / 120

        Il reste 2 licences. Au-delà, chaque élève ajouté est facturé 24 € HT au prorata.

        +
        PièceDateMontant HTStatut
        Devis D-2026-04102/09/20262 880,00 €Accepté
        Bon de commande BC-118705/09/20262 880,00 €Reçu
        Facture F-2026-09310/09/20262 832,00 €Déposée sur Chorus Pro
        +
        +
        +

        Consommation de VM par classe

        15 h incluses / élève / mois
        +
        • BTS SIO 1 · A142 h / 240 h
        • BTS SIO 1 · B128 h / 255 h
        • BTS SIO 2 · SISR160 h / 210 h
        • BTS CIEL 296 h / 225 h
        • Terminale NSI58 h / 360 h
        • Seconde SNT 428 h / 480 h
        +

        Le compteur est partagé par classe. Aucun dépassement prévu d’ici la fin de l’année au rythme actuel.

        +
        +
        +
        +
        +
        + + +
        + + + + + + diff --git a/design/_build/helpers.js b/design/_build/helpers.js new file mode 100644 index 0000000..71356d5 --- /dev/null +++ b/design/_build/helpers.js @@ -0,0 +1,11 @@ + +var ICON={grid:'',alert:'',users:'',note:'',shield:'',book:'',chat:'',check:'',download:'',help:'',map:'',trophy:'',play:'',search:'',spark:''}; +var I=function(n,c){return '';}; +var navi=function(i,t,n,act){return '
      • '+I(i)+''+n+'
        • ';}; +var panel=function(ic,id,t,body,extra,bg){return '

        '+I(ic)+t+'

        '+(extra||'')+'
        '+body+'
        ';}; +var kpi=function(k,v,d,bar){return '

      • '+k+'

        '+v+'

        '+d+'

        • ';}; +var btn=function(t,ic,cls){return '';}; +var shell=function(aside,title,kicker,sub,actions,body){return '\n

        '+kicker+'

        '+title+'

        '+sub+'

        '+actions+'
        '+body+'
        \n';}; +var P={accueil:'Apercu%20accueil%20Blade.html','labs.index':'apercu-labs.html','labs.essai':'apercu-lab-essai.html','labs.web':'apercu-lab-web.html','cours.index':'apercu-cours.html','cours.cm':'apercu-cours-ipv4-cm.html',etablissements:'apercu-etablissements.html',tarifs:'apercu-tarifs.html',login:'apercu-connexion.html',register:'apercu-inscription.html',examen:'apercu-examen.html',suivi:'apercu-suivi.html',pourquoi:'apercu-pourquoi.html',fonctionnalites:'apercu-fonctionnalites.html',legal:'apercu-legal.html',banque:'apercu-banque.html',ide:'apercu-ide.html',bibliotheque:'apercu-bibliotheque.html',generateur:'apercu-generateur.html','quiz.projection':'apercu-quiz-projection.html','quiz.eleve':'apercu-quiz-eleve.html',devoirs:'apercu-devoirs.html',maison:'apercu-maison.html','td.imprimable':'apercu-td-imprimable.html',cockpit:'apercu-cockpit.html','espace.eleve':'apercu-espace-eleve.html','vie.scolaire':'apercu-vie-scolaire.html','fiche.eleve':'apercu-fiche-eleve.html',correction:'apercu-correction.html','sujet.creer':'apercu-sujet.html',messagerie:'apercu-messagerie.html','export.ent':'apercu-export.html',aide:'apercu-aide.html','cours.fiche':'apercu-cours-fiche.html',paiement:'apercu-paiement.html','paiement.ok':'apercu-paiement-ok.html',facturation:'apercu-facturation.html',academie:'apercu-academie.html'}; +var R={};Object.keys(P).forEach(function(k){R[P[k]]=k;}); +var toBlade=function(s){return s.replace(/href="([^"#:]+?\.html)(#[^"]*)?"/g,function(m,u,x){return R[u]?'href="{{ route(\''+R[u]+'\') }}'+(x||'')+'"':m;}).replace(/src="(images\/[^"]+|js\/[^"]+)"/g,"src=\"{{ asset('$1') }}\"");}; diff --git a/design/_build/pro.js b/design/_build/pro.js new file mode 100644 index 0000000..a453d70 --- /dev/null +++ b/design/_build/pro.js @@ -0,0 +1,4 @@ +var rot=/^(?:[a-z0-9]+:)?-?rotate-(?:1|2|3|6|12|\[[^\]]+\])$/,tr=/^(?:(?:sm|md|lg|xl|2xl):)?-?translate-[xy]-(?:3|4|6|8|10|12|16)$/;var fix=h=>{h=h.replace(/Parce qu’un BTS peut changer une vie\. Il a changé la mienne\./g,'Parce que les études peuvent changer une vie. Elles ont changé la mienne, pourquoi pas la vôtre ?'); + h=h.replace(/]*class="[^"]*(?:etoile flotte|zigzag absolute)[^"]*"[^>]*><\/span>/g,''); + h=h.replace(/class="([^"]*)"/g,(m,c)=>'class="'+c.split(/\s+/).filter(x=>x&&!rot.test(x)&&!tr.test(x)).map(x=>x.replace(/^((?:[a-z]+:)?)shadow-\[(?:6|8|10)px_(?:6|8|10)px_0px_(#[0-9A-Fa-f]+)\]$/,'$1shadow-[4px_4px_0px_$2]').replace(/^xl:text-8xl$/,'xl:text-7xl').replace(/^xl:text-\[7\.5rem\]$/,'xl:text-7xl')).join(' ')+'"'); + return h.replace(/'lg:translate-y-4'|'lg:translate-y-6'/g,"''");}; \ No newline at end of file diff --git a/design/_build/sy.js b/design/_build/sy.js new file mode 100644 index 0000000..054ce79 --- /dev/null +++ b/design/_build/sy.js @@ -0,0 +1,24 @@ +// Générateur des pages vitrine épurées (utilisé uniquement à la construction) +var SY = (function () { + var INK = '#0b1220', TXT = '#3c4043', MUT = '#5f6368', BLUE = '#0b57d0', HAIR = '#e3e5e8', SOFT = '#f8f9fa'; + var P = { accueil: 'Apercu%20accueil%20Blade.html', register: 'apercu-inscription.html', login: 'apercu-connexion.html', tarifs: 'apercu-tarifs.html', etablissements: 'apercu-etablissements.html', fonctionnalites: 'apercu-fonctionnalites.html', 'cours.index': 'apercu-cours.html', 'labs.essai': 'apercu-lab-essai.html', 'td.imprimable': 'apercu-td-imprimable.html', 'cours.fiche': 'apercu-cours-fiche.html', legal: 'apercu-legal.html', pourquoi: 'apercu-pourquoi.html', 'espace.etablissement': 'apercu-espace-etablissement.html', integration: 'apercu-integration.html', aide: 'apercu-aide.html', ressource: 'apercu-ressource.html' }; + var mk = function (blade) { + var u = function (r, q) { return blade ? "{{ route('" + r + "') }}" + (q || '') : P[r] + (q || ''); }; + var S = { + u: u, + wrap: function (w, inner, pad, bg) { return '
        ' + inner + '
        '; }, + kicker: function (t, center) { return '

        ' + t + '

        '; }, + h1: function (t) { return '

        ' + t + '

        '; }, + h2: function (t, center) { return '

        ' + t + '

        '; }, + lead: function (t, center) { return '

        ' + t + '

        '; }, + cta: function (t, href, note) { return '
        ' + t + '' + (note ? '

        ' + note + '

        ' : '') + '
        '; }, + link: function (t, href) { return '' + t + ''; }, + cols: function (items, min) { return '
          ' + items.map(function (it) { return '
        • ' + (it.k ? '

          ' + it.k + '

          ' : '') + '

          ' + it.t + '

          ' + (it.d ? '

          ' + it.d + '

          ' : '') + (it.a ? '

          ' + S.link(it.a[0], it.a[1]) + '

          ' : '') + '
          • '; }).join('') + '
        '; }, + steps: function (items) { return '
          ' + items.map(function (s, i) { return '
        1. ' + String(i + 1).padStart(2, '0') + '

          ' + s[0] + '

          ' + (s[1] ? '

          ' + s[1] + '

          ' : '') + '
          2. '; }).join('') + '
        '; }, + frame: function (inner) { return '
        ' + inner + '
        '; }, + INK: INK, TXT: TXT, MUT: MUT, BLUE: BLUE, HAIR: HAIR, SOFT: SOFT + }; + return S; + }; + return { mk: mk }; +})(); diff --git a/design/_ds/modernist-39fc7197-4120-4057-af21-114438cd2248/_ds_bundle.js b/design/_ds/modernist-39fc7197-4120-4057-af21-114438cd2248/_ds_bundle.js new file mode 100644 index 0000000..365def6 --- /dev/null +++ b/design/_ds/modernist-39fc7197-4120-4057-af21-114438cd2248/_ds_bundle.js @@ -0,0 +1,11 @@ +/* @ds-bundle: {"format":4,"namespace":"Modernist_modern","components":[],"sourceHashes":{},"inlinedExternals":[],"unexposedExports":[]} */ + +(() => { + +const __ds_ns = (window.Modernist_modern = window.Modernist_modern || {}); + +const __ds_scope = {}; + +(__ds_ns.__errors = __ds_ns.__errors || []); + +})(); diff --git a/design/_ds/modernist-39fc7197-4120-4057-af21-114438cd2248/styles.css b/design/_ds/modernist-39fc7197-4120-4057-af21-114438cd2248/styles.css new file mode 100644 index 0000000..9edb062 --- /dev/null +++ b/design/_ds/modernist-39fc7197-4120-4057-af21-114438cd2248/styles.css @@ -0,0 +1,252 @@ +/* Modernist — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */ +@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&display=swap'); + +:root { + --color-bg: #f3f2f2; + --color-surface: #eae9e9; + --color-text: #201e1d; + --color-accent: #ec3013; + --color-accent-2: #e15b47; + --color-divider: color-mix(in srgb, #201e1d 40%, transparent); + + /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the + same step of any role matches the others in visual value. */ + --color-neutral-100: #f8f4f4; + --color-neutral-200: #eae7e7; + --color-neutral-300: #d7d3d3; + --color-neutral-400: #bab6b6; + --color-neutral-500: #9b9797; + --color-neutral-600: #7d7979; + --color-neutral-700: #605d5d; + --color-neutral-800: #444141; + --color-neutral-900: #2d2b2b; + + --color-accent-100: #fff2ef; + --color-accent-200: #ffe0d9; + --color-accent-300: #ffc4b8; + --color-accent-400: #ff9783; + --color-accent-500: #ff563c; + --color-accent-600: #dd2b0f; + --color-accent-700: #ae1800; + --color-accent-800: #7c1405; + --color-accent-900: #4d170e; + + --color-accent-2-100: #fff2ef; + --color-accent-2-200: #ffe0da; + --color-accent-2-300: #ffc4b9; + --color-accent-2-400: #ff9784; + --color-accent-2-500: #ef6853; + --color-accent-2-600: #c94b39; + --color-accent-2-700: #9e3526; + --color-accent-2-800: #71261b; + --color-accent-2-900: #471d16; + + --font-heading: "Archivo", system-ui, sans-serif; + --font-heading-weight: 800; + --font-body: "Archivo", system-ui, sans-serif; + + --space-1: 4.0px; + --space-2: 8.0px; + --space-3: 12.0px; + --space-4: 16.0px; + --space-6: 24.0px; + --space-8: 32.0px; + + --radius-sm: 0px; + --radius-md: 0px; + --radius-lg: 0px; + + /* Elevation — derived from the ground: soft ink-tinted shadows on a + light theme, a hairline edge + ambient darkness on a dark one. */ + --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent); + --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent); + --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent); +} + +body { + background: var(--color-bg); + color: var(--color-text); + font-family: var(--font-body); +} +h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); } + +.grayscale{filter:grayscale(1) contrast(1.08)} + +/* ══════════════════════════════════════════════════════════════════════════ + Components — built with the tokens above. Plain CSS + on plain HTML: no JavaScript, no build step. Each class is documented in + readme.md and demonstrated in foundations/ and components/. + ══════════════════════════════════════════════════════════════════════ */ + +*, *::before, *::after { box-sizing: border-box; } +body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; } +h1, h2, h3, h4, h5, h6 { + font-family: var(--font-heading); font-weight: var(--font-heading-weight); + line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2); +} +h1 { font-size: 42px; } +h2 { font-size: 32px; } +h3 { font-size: 25px; } +h4 { font-size: 20px; } +h5 { font-size: 16px; } +h6 { font-size: 13px; } +h6 { letter-spacing: 0.08em; text-transform: uppercase; } +p { margin: 0 0 var(--space-3); } +a { color: var(--color-accent); text-underline-offset: 3px; } +img { display: block; max-width: 100%; } +figure { margin: 0; } +figcaption { + font-size: 11px; margin-top: var(--space-1); + color: color-mix(in srgb, var(--color-text) 55%, transparent); +} +.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); } +:focus { outline: none; } +:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } +::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); } + +/* — rules — */ +.hr { + height: 2px; border: 0; margin: var(--space-4) 0; + background: var(--color-divider); +} + +/* — buttons — */ +.btn { + display: inline-flex; align-items: center; justify-content: center; gap: 6px; + cursor: pointer; text-decoration: none; + font-family: var(--font-heading); font-weight: var(--font-heading-weight); + font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px — + the pair sits side by side in sign-up rows */ + background: transparent; border: 1px solid transparent; + padding: var(--space-2) calc(var(--space-3) * 1.2); + border-radius: var(--radius-md); +} +.btn svg { display: block; } +.btn:disabled { opacity: 0.45; cursor: not-allowed; } +.btn-primary { background: var(--color-accent); color: var(--color-bg); } +.btn-primary:hover { background: var(--color-accent-600); } +.btn-primary:active { background: var(--color-accent-700); } +.btn-secondary { border-color: var(--color-divider); } +.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } +.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); } +.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); } +.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); } +.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); } +.btn-icon { width: 36px; height: 36px; padding: 0; } +.btn-block { width: 100%; margin-top: var(--space-2); justify-content: flex-start; text-align: left; } + +/* — forms — */ +.field > label { + display: block; font-size: 12px; margin-bottom: 5px; + color: color-mix(in srgb, var(--color-text) 70%, transparent); +} +.input { + width: 100%; min-height: 36px; padding: 6px 10px; font: inherit; + font-size: 14px; color: var(--color-text); caret-color: var(--color-accent); + background: var(--color-surface); + border: 1px solid var(--color-divider); border-radius: var(--radius-md); +} +.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); } +.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; } +textarea.input { min-height: 90px; resize: vertical; } +.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; } +.radio input, .seg-opt input { + position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; +} +.radio .dot { + width: 16px; height: 16px; flex: none; border-radius: 50%; + border: 1.5px solid var(--color-divider); +} +.radio:hover .dot { border-color: var(--color-accent); } +.radio input:checked + .dot { + border-color: var(--color-accent); background: var(--color-accent); + box-shadow: inset 0 0 0 4px var(--color-bg); +} +.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; } +.seg { + display: inline-flex; overflow: hidden; + border: 1px solid var(--color-divider); border-radius: var(--radius-md); +} +.seg-opt { + display: inline-flex; align-items: center; gap: 6px; + padding: 7px 12px; font-size: 13px; cursor: pointer; +} +.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); } +.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); } +.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } +.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; } + +/* — cards — */ +.card { + display: flex; flex-direction: column; gap: var(--space-2); + padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface); +} +.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); } +.card-title { + font-family: var(--font-heading); font-weight: var(--font-heading-weight); + font-size: 17px; line-height: 1.2; +} +.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; } +.card-meta { + display: flex; align-items: center; gap: 6px; font-size: 11px; + color: color-mix(in srgb, var(--color-text) 50%, transparent); +} +.elev-sm { box-shadow: var(--shadow-sm); } +.elev-md { box-shadow: var(--shadow-md); } +.elev-lg { box-shadow: var(--shadow-lg); } + +/* — tags — */ +.tag { + display: inline-flex; align-items: center; font-size: 11px; + letter-spacing: 0.02em; padding: 3px 10px; + border-radius: calc(var(--radius-md) * 0.75); +} +.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); } +.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); } +.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); } +.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); } + +/* — navigation — */ +.nav { + display: flex; align-items: center; gap: var(--space-4); + padding: var(--space-3) var(--space-4); + border-bottom: 2px solid var(--color-divider); +} +.nav-brand { + font-family: var(--font-heading); font-weight: var(--font-heading-weight); + font-size: 18px; margin-right: auto; +} +.nav a { color: inherit; text-decoration: none; font-size: 14px; } +.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); } + +/* — tables — */ +.table { width: 100%; border-collapse: collapse; font-size: 14px; } +.table th { + text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; + color: color-mix(in srgb, var(--color-text) 60%, transparent); + padding: var(--space-2); border-bottom: 2px solid var(--color-divider); +} +.table td { + padding: var(--space-2); + border-bottom: 1px solid var(--color-divider); +} +.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); } + +/* — dialog — */ +.dialog-backdrop { + position: fixed; inset: 0; display: grid; place-items: center; + padding: var(--space-4); + background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent); +} +.dialog { + width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3); + padding: var(--space-4); border-radius: var(--radius-lg); + background: var(--color-surface); box-shadow: var(--shadow-lg); +} +.dialog-title { + font-family: var(--font-heading); font-weight: var(--font-heading-weight); + font-size: 20px; +} +.dialog-body { font-size: 14px; opacity: 0.85; } +.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); } + diff --git a/design/apercu-academie.html b/design/apercu-academie.html new file mode 100644 index 0000000..0ec8848 --- /dev/null +++ b/design/apercu-academie.html @@ -0,0 +1,71 @@ + + + + + + Tableau de bord académie · Syllabus + + + + + + + + + + + + + +
        + +
        + +
        +

        Multi-établissements

        Pour les profs

        +

        Tableau de bord académie

        6 établissements · 28 classes · 608 élèves · année 2026-2027

        • Élèves actifs

          608

          +86 ce mois

        • Taux d’activité

          91 %

          élèves connectés / semaine

        • Labs réalisés

          4 210

          depuis la rentrée

        • Heures de VM

          2 940 h

          sur 9 120 h incluses

        • Élèves accompagnés

          47

          suite à une alerte

        +

        Établissements

        ÉtablissementClassesÉlèvesActivitéCompétences validéesStatut

        Lycée Jean-Jaurès

        Montreuil

        		611894 %72 %Actif

        Lycée Louis-Armand

        Paris 15e

        		920490 %68 %Actif

        Lycée Saint-Exupéry

        Marseille

        		48688 %61 %Actif

        IUT de Villetaneuse

        Villetaneuse

        		716092 %70 %Actif

        Lycée Condorcet

        Saint-Priest

        		24071 %55 %Démarrage

        Lycée Vauban

        Brest

        		00——Invité
        +
        +

        Compétences les moins acquises

        BTS SIO et CIEL
        • Services réseau (DHCP, DNS38 %
        • Scripts Bash46 %
        • VLAN et commutation52 %
        • Sécurité des accès58 %
        • Adressage IPv466 %

        Piste : proposer une formation académique sur les services réseau.

        +

        Rapports

        • Bilan de rentrée 2026

          PDF · 12 pages · 01/10

        • Usage par établissement

          CSV · 29/09

        • Compétences par filière

          PDF · 6 pages · 29/09

        +
        +
        + + + + + + diff --git a/design/apercu-aide.html b/design/apercu-aide.html new file mode 100644 index 0000000..4d3dc06 --- /dev/null +++ b/design/apercu-aide.html @@ -0,0 +1,68 @@ + + + + + + Aide et tutoriels · Syllabus + + + + + + + + + + + + + +
        + +
        + +
        +

        Centre d’aide

        Aide et tutoriels

        Des vidéos courtes et des guides pour prendre Syllabus en main.

        Poser une question

        Tutoriels vidéo

        Vidéos en cours de tournage : les vignettes sont des emplacements.

        +

        Guides pas à pas

        Démarrer

        En classe

        Évaluer

        Établissement

        +

        Vous ne trouvez pas ?

        Écrivez à adam@belkacemi.me. Chaque question aide à améliorer l’outil.

        +
        +
        + + + + + + diff --git a/design/apercu-banque.html b/design/apercu-banque.html new file mode 100644 index 0000000..6ed5651 --- /dev/null +++ b/design/apercu-banque.html @@ -0,0 +1,239 @@ + + + + + + Banque de sujets · Syllabus + + + + + + + + + +
        + +
        + +
        +
        +
        +
        +

        Espace enseignant · Banque

        +

        Pour les profs

        +

        Banque de sujets et de questions

        +

        1 240 questions classées par cursus et par notion. Modifiez-les, ajoutez les vôtres, composez vos sujets.

        Bibliothèque du référentiel →Générateur de TD →
        +
        + + Nouvelle question +
        +
        + +
        +
        +
        +

        Début d’heure

        +

        Un quiz flash pour lancer le cours.

        +

        Choisissez les outils à réviser. Syllabus tire les questions dans la banque. Un diaporama s’ouvre au tableau. Les élèves se connectent avec leur identifiant depuis leur téléphone ou leur PC, et vous voyez tout de suite qui manque.

        + Voir le diaporama →Voir la vue élève → +
        +
        +

        Outils à réviser

        +
        + + + + + + + + + + + + + + + +
        +
        + + + +
        +
        + + +
        +
        +
        +
        + +
        + + +
        +

        Questions · 7 affichées sur 1 240

        +
          +
        • +
          Choix uniqueBTS SIO · Bloc 2Adressage IPv4Moyen
          +

          Quelle est l’adresse réseau de 10.0.3.200/22 ?

          +

          2 pts · utilisée 34 fois · réussite 38 %

          +
          Modifier
          +
          • +
        • +
          Choix uniqueBTS CIEL · RéseauxAdressage IPv4Facile
          +

          Combien d’hôtes utilisables dans un /27 ?

          +

          1 pt · utilisée 51 fois · réussite 71 %

          +
          Modifier
          +
          • +
        • +
          Choix multipleNSI · PremièreCommandes LinuxFacile
          +

          Quelles commandes affichent les interfaces réseau sous Debian ?

          +

          1 pt · utilisée 22 fois · réussite 64 %

          +
          Modifier
          +
          • +
        • +
          Vrai / fauxBTS SIO · Bloc 2VLANFacile
          +

          Un VLAN isole le trafic au niveau 2 du modèle OSI.

          +

          1 pt · utilisée 40 fois · réussite 82 %

          +
          Modifier
          +
          • +
        • +
          Réponse courteBTS SIO · Bloc 1Droits LinuxMoyen
          +

          Écrivez la commande qui donne les droits rwxr-x--- au fichier notes.txt.

          +

          2 pts · utilisée 18 fois · réussite 47 %

          +
          Modifier
          +
          • +
        • +
          Réponse numériqueBUT R&T · S1Services réseauFacile
          +

          Quel port utilise par défaut le protocole SSH ?

          +

          1 pt · utilisée 29 fois · réussite 88 %

          +
          Modifier
          +
          • +
        • +
          Texte à trousBTS CIEL · RéseauxRoutageDifficile
          +

          Complétez : la route par défaut s’écrit ___ via 192.168.1.1.

          +

          3 pts · utilisée 9 fois · réussite 29 %

          +
          Modifier
          +
          • +
        +
        + + +
        + +
        +
        +

        Créer ou modifier une question

        +
        + + +
        +
        Réponses (cochez la bonne + + + + +
        + + + +
        +
        +
        +
        + +
        + + + + + + diff --git a/design/apercu-bibliotheque.html b/design/apercu-bibliotheque.html new file mode 100644 index 0000000..88f5fa8 --- /dev/null +++ b/design/apercu-bibliotheque.html @@ -0,0 +1,215 @@ + + + + + + Bibliothèque · Syllabus + + + + + + + + + + + + + +
        + +
        + +
        +
        +
        +

        Bibliothèque du prof

        +

        Pour les profs

        +

        Tout le référentiel, fiche par fiche.

        +

        Du SNT au master, en passant par l’école d’ingénieurs. Chaque fiche regroupe cours, quiz, TD, labs et examens. Un même chapitre sert plusieurs formations : OSPF compte pour la NSI, le BTS SIO, le BTS CIEL, le BUT R&T et les titres pro.

        +
        +

        Construit à partir des programmes officiels. Vérifié le 29 septembre 2026

        +
        +
        +
        +
        +
        + + + +
        + + + +

        Ma séquence : 0

        +
        +
        + + + + + + + + + + +
        +
        +
        + + + + + + + + + + + + + + + + + + + + + +
        +
        +
        + + + + + PDF + + + + + + + + + + + SERVEZ-VOUS ! + SERVEZ-VOUS ! + COURS · TD · CORRECTIONS EN PDF + +
        +
        +

        Gratuit · à télécharger

        +

        Tous les cours se téléchargent en PDF.

        +

        CM complet, TD prêt à imprimer avec ses cases à remplir, correction à part, QCM papier. Pour la classe, pour réviser chez soi ou pour un jour sans réseau.

        + +
        +
        +
        +
        + + + + + + diff --git a/design/apercu-cockpit.html b/design/apercu-cockpit.html new file mode 100644 index 0000000..8140bf3 --- /dev/null +++ b/design/apercu-cockpit.html @@ -0,0 +1,185 @@ + + + + + + Cockpit prof · Syllabus + + + + + + + + + + + + + +
        + +
        + +
        +
        +
        + +
        +
        +

        Cockpit prof

        Pour les profs

        +

        BTS SIO 1 · Groupe A

        16 élèves · mardi 29 septembre · 10:22

        +
        + Quiz flash + Programmer un DM + +
        +
        +
          +

        • Présents

          15/16

          1 absent signalé

          • +

        • Moyenne QCM

          13,4

          +0,8 sur 4 semaines

          • +

        • À accompagner

          3

          +1 cette semaine

          • +

        • Mains levées

          3

          attente moy. 2 min

          • +

        • DM rendus

          13/16

          échéance vendredi

          • +
        +
        +

        Avancement du lab « VLAN »

        6 étapes · médiane : étape 3

        + +

        Largeur = nombre d’élèves à chaque étape. 2 élèves ont terminé.

        +
        +
        +
        +

        Élèves

        +
        + +
        +
        +
        +
        + + +
        Tendance
        +
        +
        +
        +

        Surveillance d’examen

        Inactif
        +

        E6 blanc SISR · 1 h 30

        00:00

        1. Lancez l’examen pour suivre les sorties d’onglet et de fenêtre.
        +
        +
        +

        Devoirs maison

        Tout voir
        +

        • DM 3 · Plan d’adressage

          Rendu ven. 03/10

          13/16

        • TP maison · Scripts Bash

          Rendu lun. 06/10

          6/16

        • QCM · Lecture CM VLAN

          Rendu ce soir

          15/16

        +
        +
        +
        +
        +
        +
        +
        +

        Mains levées

        ordre d’arrivée
        +
          +
          +
          +

          Priorités du jour

          +

          • Léa M. Accompagner

            3 QCM sous 8/20. Proposer le premier rang et réexpliquer les VLAN.

          • Lucas M. Accompagner

            Cours lu en 2 min au lieu de 15. QCM de lecture à refaire.

          • Hugo P. Relancer

            DM 3 non rendu. Relance automatique jeudi 18 h.

          • Inès K. Stimuler

            Tous les labs réussis. Défi connexe proposé : QoS et priorisation.

          +
          +
          +

          Observation rapide

          Classée par élève pour le conseil de classe.

          +
          +
          +
          + + +
          + + + + + + diff --git a/design/apercu-cohortes.html b/design/apercu-cohortes.html new file mode 100644 index 0000000..e65fe11 --- /dev/null +++ b/design/apercu-cohortes.html @@ -0,0 +1,72 @@ + + + + + + Suivi des cohortes · Syllabus + + + + + + + + + + + + + +
          + +
          + +
          +

          Scolarité

          Pour les profs

          +

          Suivi des cohortes

          Assiduité, résultats et alertes par classe. Cliquez sur une classe pour voir ses étudiants.

          Exporter ▾

          • Étudiants

            113

            6 classes

          • Assiduité moyenne

            89 %

            séances planifiées

          • Compétences acquises

            64 %

            référentiels BTS / BUT

          • Alertes ouvertes

            15

            dont 4 nouvelles

          +

          Cohortes

          ClasseEffectifAssiduitéMoyenneCompétencesAlertes
          BTS SIO 1 A1693 %12,468 %1 ouverteVoir la classe →
          BTS SIO 1 B1588 %11,161 %3 ouvertesVoir la classe →
          BTS SIO 2 A1895 %13,279 %AucuneVoir la classe →
          BTS SIO 2 B1484 %10,657 %4 ouvertesVoir la classe →
          BTS CIEL 12290 %11,863 %2 ouvertesVoir la classe →
          BUT R&T 12886 %11,359 %5 ouvertesVoir la classe →
          +
          +

          Assiduité · BTS SIO 2 B

          ÉtudiantPrésentAbsentJustifiéTaux
          Petit Hugo186172 %
          Leroy Tom213388 %
          Diallo Adam231196 %

          Absence = séance planifiée sans connexion ni présence pointée. Une connexion hors séance ne compte pas comme présence.

          +

          Règles d’alerte

          +
          +

          Rôles et droits

          DonnéeEnseignantProf principalCPEDirectionIntendance
          Notes de ses classesLire, écrireLireLireLire—
          AssiduitéPointerLireLire, justifierLire—
          ObservationsÉcrireLire, écrireLire, écrireLire—
          Fiche élève complèteSes élèvesSa classeTousTous—
          ExportsSes classesSa classeTousTous—
          Licences et factures———LireLire, gérer

          Chaque consultation de fiche et chaque export sont journalisés. Le journal est consultable par la direction et le DPO.

          +
          + + + + + + diff --git a/design/apercu-connexion.html b/design/apercu-connexion.html new file mode 100644 index 0000000..c56e0cf --- /dev/null +++ b/design/apercu-connexion.html @@ -0,0 +1,114 @@ + + + + + + Se connecter · Syllabus + + + + + + + + + +
          + +
          + +
          +
          + +
          +

          Se connecter.

          +
          +
          +

          Je suis élève

          + + +

          Ils sont sur ta fiche de connexion. Tu peux aussi scanner le QR.

          +
          +
          +
          +

          Je suis enseignant

          +
          + + + +
          + + +
          Créer une classe
          +
          +
          +
          +
          + +
          + + + + + diff --git a/design/apercu-correction.html b/design/apercu-correction.html new file mode 100644 index 0000000..c70eed6 --- /dev/null +++ b/design/apercu-correction.html @@ -0,0 +1,75 @@ + + + + + + Correction assistée · Syllabus + + + + + + + + + + + + + +
          + +
          + +
          +

          Correction assistée

          Pour les profs

          +

          Copie de Léa M.

          Syllabus pré-corrige selon votre barème. Vous validez, ajustez et commentez.

          +

          Rendu de l’élève

          Question 2 · masque

          J’emprunte 2 bits car 2² = 4 sous-réseaux. Le masque devient /26 soit 255.255.255.192.

          Question 4 · plan d’adressage

          SRRéseauBroadcast
          SR1.0.63
          SR2.64.127
          SR3.128.190 ✕
          SR4.192.255

          Question 5 · terminal (rejoué

          eleve@srv:~$ sudo ip addr add 192.168.10.65/26 dev eth0
+eleve@srv:~$ ip a show eth0
+    inet 192.168.10.65/26 scope global eth0
          +

          Barème et pré-correction

          pré-correction · à valider
          • ✓

            Masque choisi et justifié

            Suggestion : /26 correct, justification 2² = 4

          • ✕

            Plan d’adressage complet

            Suggestion : SR3 : broadcast .190 au lieu de .191

          • ✓

            Commande de configuration

            Suggestion : ip addr add 192.168.10.65/26 dev eth0

          • ✕

            Tests de connectivité

            Suggestion : ping manquant entre SR1 et SR2

          • ?

            Rédaction et clarté

            À évaluer par vous

          +

          Note

          15/20

          +
          +

          La pré-correction vérifie ce qui est vérifiable (calculs, commandes rejouées dans la VM, tests de code). Elle ne décide jamais seule : la note n’est publiée qu’après votre validation.

          +
          +
          + + + + + + diff --git a/design/apercu-cours-fiche.html b/design/apercu-cours-fiche.html new file mode 100644 index 0000000..61ba0e8 --- /dev/null +++ b/design/apercu-cours-fiche.html @@ -0,0 +1,174 @@ + + + + + + Cours · Syllabus + + + + + + + + + + + + + +
          + +
          + +
          +
          +
          + ← Tous les cours +

          +

          Pour les élèves

          +

          Chargement…

          +
          +
          +
          +
          + +
          + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
          + + + + + + diff --git a/design/apercu-cours-ipv4-cm.html b/design/apercu-cours-ipv4-cm.html new file mode 100644 index 0000000..c16f175 --- /dev/null +++ b/design/apercu-cours-ipv4-cm.html @@ -0,0 +1,299 @@ + + + + + + CM · Adressage IPv4 · Syllabus + + + + + + + + + +
          + +
          + +
          +
          +
          + CM +

          Adressage IPv4 et sous-réseaux

          +

          Lu : 0 %

          +

          00:00/ 20:00 conseillées

          +
          +
          +
          +
          +
          + +

          Pour les élèves

          +

          Adressage IPv4 et sous-réseaux

          +

          Lis le cours jusqu’au bout. Le QCM de lecture se débloque quand toutes les parties ont été lues et que 5 minutes se sont écoulées.

          +
            +
          1. 1 · CM
          2. 2 · QCM de lecture
          3. 3 · TD optionnel
          4. 4 · TP
          5. 5 · Examen
            6. +
          +
          +
          +
          + +
          +
          +

          1. Pourquoi des adresses ?

          +

          Sur un réseau, chaque machine doit pouvoir être trouvée. Comme une lettre a besoin d’une adresse postale, un paquet a besoin d’une adresse IP de destination.

          +
          +

          La rue

          = le réseau

          Toutes les maisons de la rue partagent le même nom de rue.

          +

          Le numéro

          = l’hôte

          Chaque maison a son numéro, unique dans la rue.

          +
          +

          Une adresse IPv4 contient les deux informations. Le masque indique où s’arrête la rue et où commence le numéro.

          +
          +
          +

          Vidéo de contexte

          +

          Ton prof peut ajouter ici une vidéo YouTube pour illustrer le cours.

          +
          +

          Espace prof · la vidéo s’affiche en mode sans cookie (youtube-nocookie.com).

          +
          +
          +

          2. Une adresse, 32 bits

          +

          Une adresse IPv4 est un nombre de 32 bits. Pour la lire plus facilement, on la découpe en 4 octets de 8 bits, écrits en décimal et séparés par des points.

          +
          +

          192.168.10.77

          +
          11000000.10101000.00001010.01001101
          +
          192 = 11000000 · 168 = 10101000 · 10 = 00001010 · 77 = 01001101
          +
          +

          Chaque octet va de 0 (00000000) à 255 (11111111). Une adresse comme 192.168.10.300 est donc impossible.

          +
          +
          +

          3. Le masque de sous-réseau

          +

          Le masque est lui aussi un nombre de 32 bits. Il commence par une suite de 1 (la partie réseau) suivie d’une suite de 0 (la partie hôte). La notation CIDR écrit simplement le nombre de 1 : /26.

          +
          +

          /26 = 255.255.255.192

          +
          11111111.11111111.11111111.11000000
          +
          26 bits de réseau6 bits d’hôte
          +
          +

          Dans le dernier octet, les 2 premiers bits valent 1 : 128 + 64 = 192. D’où 255.255.255.192.

          +
          +
          +

          4. Trouver l’adresse réseau : le ET logique

          +

          Pour trouver le réseau d’une adresse, on fait un ET logique bit à bit entre l’adresse et le masque. Le résultat vaut 1 seulement si les deux bits valent 1.

          +
          +
          Table du ET logique
          ABA ET B
          000
          010
          100
          111
          +
          +

          Dernier octet seulement

          +

          01001101 (77

          +

          ET 11000000 (192

          +

          = 01000000 (64

          +
          +
          +

          Les trois premiers octets du masque valent 255 : ils recopient l’adresse telle quelle. L’adresse réseau de 192.168.10.77/26 est donc 192.168.10.64.

          +
          +
          +

          5. Diffusion et nombre d’hôtes

          +

          L’adresse de diffusion (broadcast) met tous les bits d’hôte à 1. Un paquet envoyé à cette adresse arrive à toutes les machines du réseau.

          +

          Ici, les 6 bits d’hôte à 1 donnent 01111111 = 127 : la diffusion est 192.168.10.127.

          +
          Hôtes utilisables = 2bits d’hôte − 2
          +

          On retire 2 adresses : celle du réseau et celle de diffusion. Avec 6 bits : 2⁶ − 2 = 62 hôtes, de 192.168.10.65 à 192.168.10.126.

          +
          +
          +

          6. Découper un réseau en sous-réseaux

          +

          Emprunter des bits d’hôte pour le réseau crée des sous-réseaux plus petits. Emprunter 2 bits à un /24 donne 2² = 4 sous-réseaux en /26.

          +
          +

          192.168.10.0/24 découpé en 4 × /26

          +
          +
          .0
          → .63
          .64
          → .127
          .128
          → .191
          .192
          → .255
          +
          +
          Chaque bloc : 64 adresses, 62 hôtes. L’adresse .77 tombe dans le 2ᵉ bloc.
          +
          +

          Astuce : la taille d’un bloc vaut 256 moins la valeur du dernier octet du masque. Pour 192 : 256 − 192 = 64.

          +
          +
          +

          7. Adresses privées et adresses particulières

          +

          Certaines plages sont réservées aux réseaux internes (RFC 1918). Elles ne sont pas routées sur Internet.

          +
          • 10.0.0.0/8
          • 172.16.0.0/12
          • 192.168.0.0/16
          +
          • 127.0.0.1la boucle locale : la machine elle-même
          • 169.254.x.xadresse automatique quand aucun DHCP ne répond
          • 0.0.0.0« n’importe quelle adresse » ou « pas encore d’adresse »
          • 255.255.255.255diffusion limitée au réseau local
          +
          +
          +

          8. À retenir

          +
          • Une adresse IPv4 = 32 bits = 4 octets de 0 à 255.
          • Le masque sépare la partie réseau de la partie hôte. /n = n bits à 1.
          • Adresse réseau = adresse ET masque. Diffusion = bits d’hôte à 1.
          • Hôtes utilisables = 2bits d’hôte − 2.
          • Taille d’un bloc = 256 − dernier octet du masque.
          +
          +
          +

          QCM de lecture

          +

          4 questions sur les notions du texte, pour vérifier que tu as bien lu.

          +
          +

          🔒 Encore un peu de lecture

          +

          Parties lues : 0 / 8 · Temps : 0 / 5 min

          + +
          + +
          +
          +

          Pour aller plus loin

          +

          Des plateformes externes pour s’entraîner encore, à ton rythme. Elles ne font pas partie de Syllabus.

          +
          +
          + +
          +
          + +PDFTélécharger ce coursPDF gratuit +
          + + + + + + diff --git a/design/apercu-cours-ipv4.html b/design/apercu-cours-ipv4.html new file mode 100644 index 0000000..1d711b0 --- /dev/null +++ b/design/apercu-cours-ipv4.html @@ -0,0 +1,280 @@ + + + + + + Adressage IPv4 et sous-réseaux · Syllabus + + + + + + + + + +
          + +
          + +
          +
          +
          + +

          Pour les élèves

          +

          Adressage IPv4 et sous-réseaux

          +
          + BTS SIO SISR · Bloc 2 + Aussi : BTS CIEL, BUT R&T S1 + 4 h +
          +
          +
          +
          + +
          +
          +

          1 · CM · Lire le cours

          + +
          +

          Adressage IPv4 et sous-réseaux · cours complet

          +

          8 parties illustrées : bits, masque, ET logique, diffusion, découpage, adresses privées. Chronométré, à lire en entier pour débloquer le QCM de lecture.

          +
          +
          ⏱ Lecture chronométréeLire le CM →
          +           +
          + +
          +
          +

          2 · QCM · Valider les notions

          +

          5 questions · correction expliquée

          +
          +
          + +
          + Question 1 +

          Combien d’adresses d’hôtes utilisables dans un réseau /27 ?

          +
          + + + + +
          + +
          +
          + Question 2 +

          Quelle est l’adresse réseau de 10.0.3.200/22 ?

          +
          + + + + +
          + +
          +
          + Question 3 +

          Quel masque correspond à /26 ?

          +
          + + + + +
          + +
          +
          + Question 4 +

          192.168.1.130/25 et 192.168.1.100/25 sont-ils dans le même réseau ?

          +
          + + +
          + +
          +
          + Question 5 +

          Quelle commande affiche les adresses IP sous Debian ?

          +
          + + + + +
          + +
          +
          + + + +
          +
          +
          + +
          +

          3 · TD · S’exercer optionnel

          +
            +
          1. +

            Exercice 1

            +

            Pour 172.16.5.130/25, donnez l’adresse réseau, la diffusion et le nombre d’hôtes.

            +
            + Voir la correction expliquée +

            Un /25 coupe le dernier octet en blocs de 128. 130 est dans le bloc 128–255. Réseau : 172.16.5.128. Diffusion : 172.16.5.255. Hôtes : 2⁷ − 2 = 126.

            +
            +
            2. +
          2. +

            Exercice 2

            +

            Découpez 192.168.1.0/24 en 4 sous-réseaux de même taille.

            +
            + Voir la correction expliquée +

            4 sous-réseaux = 2 bits empruntés, donc /26. Sous-réseaux : 192.168.1.0, .64, .128 et .192, avec 62 hôtes chacun.

            +
            +
            3. +
          3. +

            Exercice 3

            +

            Le service comptabilité a 50 postes. Quel est le plus petit sous-réseau qui convient ?

            +
            + Voir la correction expliquée +

            Il faut 2ʰ − 2 ≥ 50. Avec h = 6 : 64 − 2 = 62. On garde 6 bits d’hôte, soit un /26 (255.255.255.192). Un /27 ne donnerait que 30 hôtes.

            +
            +
            4. +
          +
          + +
          +

          4 · TP · Pratiquer sur VM

          +
          +
          +

          Deux VM, un routeur

          +
            +
          1. 1. Placez deux VM dans 192.168.10.0/26.
            2. +
          2. 2. Vérifiez qu’elles se joignent avec ping.
            3. +
          3. 3. Passez la seconde en 192.168.10.70/26.
            4. +
          4. 4. Constatez l’échec, puis ajoutez une route.
            5. +
          +

          4 étapes vérifiées automatiquement · 45 min

          + Lancer le TP +
          +
          +

          eleve@vm1:~$ sudo ip addr add 192.168.10.10/26 dev ens3

          +

          eleve@vm1:~$ ip -br addr

          +

          ens3 UP 192.168.10.10/26

          +

          eleve@vm1:~$ ping -c 1 192.168.10.11

          +

          1 packets transmitted, 1 received

          +

          ✓ Étape 2 validée

          +
          +
          +
          + +
          +

          5 · EXAMEN · Quand le prof le décide

          +
          +

          Le prof compose son sujet dans la banque de questions, le programme pour la classe, et suit l’épreuve en direct : sorties d’onglet, copier-coller bloqué, remise automatique.

          +
          Voir le mode examenBanque de sujets (profs
          +
          +
          + + + + + + +
          +
          + +PDFTélécharger ce coursPDF gratuit +
          + + + + + diff --git a/design/apercu-cours.html b/design/apercu-cours.html new file mode 100644 index 0000000..3d5f74a --- /dev/null +++ b/design/apercu-cours.html @@ -0,0 +1,390 @@ + + + + + + Cours gratuits · Syllabus + + + + + + + + + +
          + +
          + +
          +

          Gratuit, sans compte

          99 cours gratuits, calés sur vos référentiels.

          Chaque cours suit le découpage de l’Éducation nationale : un CM pour comprendre, un TD pour s’exercer sur papier, un TP sur une vraie VM, un QCM corrigé et expliqué.

          99 cours · 45 TD · 59 TP sur VM · 98 QCM corrigés

          +
          +
          +
          +

          Lycée NSI

          +

          Première et Terminale · spécialité NSI · 16 cours

          +
          +
          + + + + + +
          +
          +
          +
          +
          +
          +

          BTS SIO SISR

          +

          Services informatiques aux organisations · option SISR · 18 cours

          +
          +
          + + + +
          +
          +
          +
          +
          +
          +

          BTS CIEL

          +

          Cybersécurité, informatique et réseaux, électronique · option IR · 12 cours

          +
          +
          + + + +
          +
          +
          +
          +
          +
          +

          BUT R&T

          +

          Réseaux et télécommunications · parcours Cybersécurité et DevCloud · 13 cours

          +
          +
          + + + +
          +
          +
          +
          +
          +
          +

          Titre pro TSSR

          +

          Technicien supérieur systèmes et réseaux · niveau 5 · 11 cours

          +
          +
          + + + +
          +
          +
          +
          +
          +
          +

          Programmation

          +

          Python, web, SQL, Bash, C · exercices dans l’IDE en ligne · 29 cours

          + Ouvrir l’IDE → +
          +
          + + + + + +
          +
          +
          + +
          +
          +
          + +
          +

          Les élèves signalent un blocage avec la fonction « Lever la main », sans interrompre la classe.« Lever la main ».

          +

          Chaque demande arrive dans votre tableau de bord, dans l’ordre. !

          +
          +
          +
          +
          +
          +
          +
          + + + + + PDF + + + + + + + + + + + SERVEZ-VOUS ! + SERVEZ-VOUS ! + COURS · TD · CORRECTIONS EN PDF + +
          +
          +

          Gratuit · à télécharger

          +

          Tous les cours se téléchargent en PDF.

          +

          CM complet, TD prêt à imprimer avec ses cases à remplir, correction à part, QCM papier. Pour la classe, pour réviser chez soi ou pour un jour sans réseau.

          + +
          +
          +
          +
          + + + + + diff --git a/design/apercu-devoirs.html b/design/apercu-devoirs.html new file mode 100644 index 0000000..63f20ac --- /dev/null +++ b/design/apercu-devoirs.html @@ -0,0 +1,134 @@ + + + + + + Devoirs maison · Syllabus + + + + + + + + + + + + + +
          + +
          + +
          +
          +
          +

          Espace enseignant · Devoirs

          Pour les profs

          +

          Devoirs maison

          Donnez un TP, un QCM, un TD ou un exercice de code à faire à la maison. Programmez l’ouverture et la date limite, suivez les rendus, corrigez et notez.

          + + Nouveau devoir +
          +
          +
          +
          +

          Devoirs programmés

          +
            +
          • TP sur VMBTS SIO 1 · A⏰ Ven. 3 oct. · 23:59

            TP Routage inter-VLAN

            18 / 24 rendus · 2 en retard

            • +
          • QCMBTS SIO 1 · A⏰ Lun. 6 oct. · 08:00

            QCM Adressage IPv4 · 2ᵉ essai

            11 / 24 rendus

            • +
          • IDE2nde NSI · B⏰ Mer. 8 oct. · 18:00

            Défi Python : somme d’une liste

            5 / 28 rendus

            • +
          • TDBTS SIO 1 · A⏰ Clos · 29 sept.

            TD Découpage en sous-réseaux

            24 / 24 rendus · 3 en retard

            • +
          +
          +
          +
          +

          Rendus · TD Découpage en sous-réseaux

          + + + + + + +
          ÉlèveÉtatNote
          Léa M.30 sept. · 17:42Rendu18/20
          Yanis B.1 oct. · 22:10Rendu14/20
          Nora Kaci2 oct. · 09:05En retard—
          Sami L.—Non rendu—
          Chloé P.29 sept. · 20:31Rendu19/20
          +
          +
          +
          +
          +
          +
          +

          Programmer un devoir

          +
          + + + + + +
          Options + + + +
          +
          Choisir dans la bibliothèque
          +
          +
          +
          + +
          +
          +
          + +
          +

          Les élèves signalent un blocage avec la fonction « Lever la main », sans interrompre la classe.« Lever la main ».

          +

          Chaque demande arrive dans votre tableau de bord, dans l’ordre. !

          +
          +
          +
          +
          +
          + + + + + + diff --git a/design/apercu-eleve.html b/design/apercu-eleve.html new file mode 100644 index 0000000..69aa067 --- /dev/null +++ b/design/apercu-eleve.html @@ -0,0 +1,118 @@ + + + + + + Espace élève · Syllabus + + + + + + + + + +
          + +
          + +
          +
          + +
          +
          +

          Espace élève · lea.m.sio1-a

          +

          Pour les élèves

          +

          Salut Léa.

          +

          BTS SIO 1 · Groupe A · Bloc 2

          +
          + Reprendre mon TP +
          +
          +
          +
          +

          À faire

          + +
          + +
          +
          + + + + + diff --git a/design/apercu-espace-eleve.html b/design/apercu-espace-eleve.html new file mode 100644 index 0000000..7b8d542 --- /dev/null +++ b/design/apercu-espace-eleve.html @@ -0,0 +1,169 @@ + + + + + + Mon espace élève · Syllabus + + + + + + + + + + + + + +
          + +
          + +
          +
          +
          + +
          +
          +

          Mon espace élève

          Pour les élèves

          +

          Bonjour Sarah !

          Mardi 29 septembre · 2 devoirs cette semaine · 1 examen dans 9 jours

          + Reprendre le lab VLAN · étape 6 +
          +
            +

          • Moyenne QCM

            16,0

            +1,2 sur 4 semaines

          • Labs réussis

            11/14

            dont 3 sans indice

          • Devoirs à rendre

            2

            le prochain vendredi

          • Série

            6 j

            d’entraînement d’affilée

            • +
          +
          +
          +

          Septembre – octobre 2026

          +

          Lun

          Mar

          Mer

          Jeu

          Ven

          Sam

          Dim

          +
          +
          ExamenDevoirQuizCours / TP
          +
          +
          +

          Au programme

          mardi 29/09

          +
            +
            +
            +
            +
            +

            Mes devoirs

            2 à rendre
            +

            • DM 3 · Plan d’adressage

              Réseaux · M. Belkacemi · ven. 03/10 · 23 h 59

              À rendre
              60 %

            • TP maison · Scripts Bash

              Linux · Mme Roche · lun. 06/10 · 18 h

              À rendre
              20 %

            • QCM · Lecture CM VLAN

              Réseaux · hier

              Rendu · 17/20
              100 %
            +
            +
            +

            Examens à venir

            +
            • J-9

              E6 blanc SISR

              Administration systèmes et réseaux · jeu. 08/10 · 8 h

              Réviser
            • J-14

              Contrôle · Adressage IPv4

              Réseaux · 1 h · mar. 13/10 · 10 h

              Réviser
            • —

              QCM flash · Commandes Linux

              Début d’heure · 5 min · chaque lundi

              Réviser
            +

            Pendant un examen, reste sur la page : les changements d’onglet et de fenêtre sont signalés au prof.

            +
            +
            +
            +

            S’entraîner

            +
            +
              +
              +
              +

              Ma progression par compétence

              référentiel BTS SIO

              +
              • Installer et configurer un poste85 %
              • Adressage IPv4 et sous-réseaux72 %
              • VLAN et commutation64 %
              • Scripts Bash48 %
              • Sécurité des accès55 %
              • Services réseau (DHCP, DNS30 %
              +
              +
              +
              +
              + + +
              + + + + + + diff --git a/design/apercu-espace-etablissement.html b/design/apercu-espace-etablissement.html new file mode 100644 index 0000000..3f0789e --- /dev/null +++ b/design/apercu-espace-etablissement.html @@ -0,0 +1,75 @@ + + + + + + Espace établissement · Syllabus + + + + + + + + + + + + + +
              + +
              + +
              +

              Gestion administrative

              Pour les profs

              +

              Espace établissement

              Abonnement, licences, documents comptables et contrats. Accès réservé à l’intendance et à la direction.

              • Formule Établissement

                20 classes

                renouvelable chaque année

              • Période

                01/09 → 31/08

                renouvellement le 01/07/2027

              • Licences

                118 / 120

                2 disponibles

              • Heures de VM

                2 940 h

                sur 9 120 h incluses

              +

              Licences

              118 actives · 2 libres
              TitulaireClasse / rôleDébutFinStatut
              Martin LéaBTS SIO 1 A01/09/202630/06/2027Active
              Kaci InèsBTS SIO 1 A01/09/202630/06/2027Active
              Petit HugoBTS SIO 2 B01/09/202515/10/2026Fin programmée
              Roche AnneEnseignante01/09/2026—Active
              Leroy TomBTS SIO 1 B01/09/202629/09/2026Retirée

              Import CSV : colonnes nom;prenom;email;classe;date_fin. Une licence se libère automatiquement à la date de fin ; les données de l’étudiant sont supprimées 12 mois après, sauf export demandé.

              +
              +

              Documents comptables

              DocumentN° engagementHTTTCChorus Pro
              Facture F-2026-0412EJ 2026-01872 400,00 €2 880,00 €Déposée
              Bon de commande BC-2026-031EJ 2026-01872 400,00 €2 880,00 €Validé
              Devis D-2026-118—2 400,00 €2 880,00 €Accepté
              Facture F-2025-0298EJ 2025-01421 800,00 €2 160,00 €Payée

              Fournisseur : Syllabus SAS · SIRET 000 000 000 00000 · TVA FR00000000000 · IBAN FR76 0000 0000 0000 0000 0000 000

              +

              Contrats et conventions

              • Conditions générales de vente

                v3 · 01/09/2026 · Acceptées le 03/09/2026

              • Contrat de service établissement

                Formule Établissement · Signé le 03/09/2026

              • Accord de sous-traitance RGPD (art. 28

                DPA v2 · Signé le 03/09/2026

              • Fiche fournisseur

                SIRET, RIB, contacts · À jour

              • Modèle de bon de commande

                Format administration · Modèle

              +
              +
              +

              Consommation

              Heures de VM2 940 / 9 120 h
              Stockage41 / 200 Go
              +

              Paramètres de l’établissement

              Configurer le SSO et l’API →
              +
              +
              + + + + + + diff --git a/design/apercu-etablissements.html b/design/apercu-etablissements.html new file mode 100644 index 0000000..6b9c332 --- /dev/null +++ b/design/apercu-etablissements.html @@ -0,0 +1,64 @@ + + + + + + Établissements · Syllabus + + + + + + + + + +
              + +
              + +

              Pour les établissements

              Un projet par établissement. Un réseau par classe.

              Chaque établissement a son espace isolé sur notre cloud hébergé en France, à Paris. Chaque classe a son propre réseau, sans IP publique.

              Demander un devis

              Réponse sous 48 h · bon de commande et Chorus Pro

              Chacun son rôle.

              • Administrateur

                Gère l’établissement

                Crée les classes, gère les enseignants et les quotas.

              • Enseignant

                Anime la séance

                Réserve une séance, suit la classe en direct, prend la main sur une console.

              • Élève

                Travaille

                Se connecte avec sa fiche, lance le lab, lève la main s’il bloque.

              • Formateur

                Forme des adultes

                Anime des sessions en titre professionnel.

              Ce que votre intendance et votre DSI vérifient.

              • Licences, devis, factures

                Ajout et retrait d’élèves, bons de commande, factures déposées sur Chorus Pro, conventions.

                Espace établissement →

              • Intégration et sécurité

                Hébergement en France, RGPD, prérequis réseau, authentification unique.

                Fiche technique →

              • Une bibliothèque à dupliquer

                Des séquences reliées aux référentiels : cours, TD, quiz et lab. Les quiz s’exportent en GIFT et Moodle XML.

                Voir la bibliothèque →

              Équiper votre établissement.

              Dites-nous combien de classes et quelles formations. On vous répond avec une proposition.

              + + + + +
              +
              + + + + + diff --git a/design/apercu-examen.html b/design/apercu-examen.html new file mode 100644 index 0000000..52f8fc9 --- /dev/null +++ b/design/apercu-examen.html @@ -0,0 +1,117 @@ + + + + + + Mode examen · Syllabus + + + + + + + + + +
              +
              + MODE EXAMEN +

              Adressage et VLAN · E6 blanc SISR · Léa M.

              +

              Temps restant59:59

              +
              +
              +
              +
                +
              • ■ Indices désactivés
              • ■ Copier-coller bloqué
              • ■ Sortie d’onglet signalée à l’enseignant
              • ■ VM sans accès Internet
              • Incidents signalés : 0
                • +
              +
              +
              + +
              +
              + Question 5 · 1 point +

              Un service de 50 postes doit avoir son propre sous-réseau. Quel masque choisissez-vous ?

              +
              + + + + +
              +
              + ← Précédente + + Suivante → +
              +
              +
              +
              +

              Partie TP · commutateur-sw1 · console 1

              + vérification à la remise +
              +
              +

              Créez le VLAN 20 « compta » et placez-y l’interface eth2.

              +

              root@sw1:~# ip link add link eth0 name eth0.20 type vlan id 20

              +

              root@sw1:~#

              +
              +
              +
              + +

              La copie est rendue automatiquement à la fin du temps.

              +
              +
              +
              + + + diff --git a/design/apercu-export.html b/design/apercu-export.html new file mode 100644 index 0000000..d2a1e30 --- /dev/null +++ b/design/apercu-export.html @@ -0,0 +1,72 @@ + + + + + + Export Pronote et ENT · Syllabus + + + + + + + + + + + + + +
              + +
              + +
              +

              Exports

              Pour les profs

              +

              Export vers Pronote et l’ENT

              Vos notes, présences et appréciations, prêtes à charger dans votre logiciel de vie scolaire.

              +

              1 · Que voulez-vous exporter ?

              +

              2 · Format

              +
              +

              3 · Aperçu du fichier

              notes-bts-sio-1a-dm3.csv
              NomPrénomClasseDevoirNoteSurCoef.Date
              MartinLéaBTS SIO 1 ADM 31120103/10/2026
              NguyenSarahBTS SIO 1 ADM 31620103/10/2026
              KaciInèsBTS SIO 1 ADM 31920103/10/2026
              PetitHugoBTS SIO 1 ADM 3ABS20103/10/2026

              16 lignes · les devoirs non rendus sont marqués ABS · encodage UTF-8

              +

              Charger le fichier dans votre logiciel

              1. 1Téléchargez le fichier CSV ci-dessus.
              2. 2Dans votre logiciel de vie scolaire, ouvrez l’import de notes du service concerné.
              3. 3Choisissez le fichier, vérifiez la correspondance des colonnes, validez.

              Les menus exacts dépendent de votre logiciel et de ses réglages. Un tutoriel vidéo est disponible dans l’aide.

              +
              +
              + + + + + + diff --git a/design/apercu-facturation.html b/design/apercu-facturation.html new file mode 100644 index 0000000..8e7779d --- /dev/null +++ b/design/apercu-facturation.html @@ -0,0 +1,68 @@ + + + + + + Mon abonnement · Syllabus + + + + + + + + + + + + + +
              + +
              + +
              +

              Facturation

              Pour les profs

              +

              Mon abonnement

              M. Belkacemi · BTS SIO 1 A et B

              Changer d’offre

              Offre actuelle

              Enseignant · mensuel

              Actif

              29,00 € HT · 34,80 € TTC / mois

              Prochain paiement le 29/10/2026 · 2 classes · 33/35 élèves

              VM ce mois : 270 h sur 495 h incluses

              +

              Moyen de paiement

              VISA

              •••• 4242

              expire 08/28

              Vous pouvez aussi passer au prélèvement SEPA ou au bon de commande de votre établissement.

              +

              Factures

              N°DateMontant TTCStatut
              F-2026-10429/09/202634,80 €PayéePDF
              F-2026-08129/08/202634,80 €PayéePDF
              F-2026-06029/07/202634,80 €PayéePDF
              +
              + + + + + + diff --git a/design/apercu-fiche-eleve.html b/design/apercu-fiche-eleve.html new file mode 100644 index 0000000..1c4aced --- /dev/null +++ b/design/apercu-fiche-eleve.html @@ -0,0 +1,74 @@ + + + + + + Fiche élève · Syllabus + + + + + + + + + + + + + +
              + +
              + +
              +

              Fiche élève

              Pour les profs

              +

              Léa M.

              Accès journalisé · visible par l’équipe pédagogique et la vie scolaire

              Écrire

              • Moyenne QCM

                7,5

                −4,5 en 4 semaines

              • Labs réussis

                5/14

                3,1 indices par lab

              • DM rendus

                3/3

                moyenne 11/20

              • Temps de lecture

                −62 %

                vs moyenne de la classe

              +
              +

              Compétences du référentiel

              BTS SIO · bloc 1

              • Installer et configurer un poste

                80 %

              • Adressage IPv4

                55 %

              • VLAN et commutation

                40 %

              • Scripts Bash

                35 %

              • Sécurité des accès

                60 %
              +

              Observations

              1. Difficulté21/09 · M. Belkacemi

                Participe mais se décourage vite.

              2. Progrès14/09 · Mme Roche

                Très bon travail en binôme sur le câblage.

              3. CPE27/09 · Mme Diallo

                Entretien prévu le 02/10 avec la famille.

              +
              +

              Historique

              1. 29/09LabLab VLAN · étape 2 · 3 indices utilisés
              2. 28/09ExamenE6 blanc SISR · 9/20 · 1 sortie (6 s
              3. 26/09QCMLecture CM VLAN · 7/20 · cours lu en 4 min
              4. 24/09DMDM 2 · Adressage · rendu · 11/20
              5. 22/09Quiz flashCommandes Linux · 3/5
              6. 21/09Observation« Participe mais se décourage vite. » · M. Belkacemi
              +
              + + + + + + diff --git a/design/apercu-fonctionnalites.html b/design/apercu-fonctionnalites.html new file mode 100644 index 0000000..3ca622c --- /dev/null +++ b/design/apercu-fonctionnalites.html @@ -0,0 +1,96 @@ + + + + + + Fonctionnalités · Syllabus + + + + + + + + + +
              + +
              + +

              Fonctionnalités

              Tout ce qu’il faut pour une classe, en ligne.

              Cours, TP sur machine Linux, éditeur de code, évaluations et suivi des élèves, dans un seul site. Choisissez un outil pour voir à quoi il sert, puis essayez sa démo.

              Créer une classe gratuite

              Sans carte bancaire

              + +
              +
              +

              Pourquoi un tel outil ?

              +

              Suivre chaque élève, même dans une classe de 35.

              +
              +

              Avec des classes entières et une charge de travail déjà lourde, suivre chaque élève individuellement devient presque impossible. Un élève en difficulté décroche vite, souvent sans bruit, et le prof, pris par ses nombreuses classes, s’en rend compte trop tard.

              +

              Syllabus surveille tout, sans être intrusif. Le QCM de début d’heure, celui qui suit la lecture du cours, les TP, les devoirs et exercices maison : chaque trace remonte au prof. Il voit rapidement qui accompagner plus régulièrement, qui faire passer au premier rang, à qui demander de réexpliquer une notion.

              +

              C’est une supervision bienveillante et naturelle, qui ne remplace pas le regard du prof mais l’aide à savoir où concentrer ses efforts. Tout remonte dans le cockpit prof, d’où il pilote et supervise examens, devoirs maison, quiz et labs.

              +

              Dans les labs, chaque étape a ses indices, qui se débloquent après un certain nombre de tentatives. Ils ne remplacent pas l’aide d’un prof (ni une recherche Google 😉), mais ils poussent l’élève à réfléchir un tout petit peu plus avant de vous appeler. Et souvent, ils vous évitent les questions triviales.

              +

              Et dans l’autre sens, l’élève en excellence peut s’épanouir. Il aborde des notions plus avancées, avec une difficulté plus forte, sans prendre d’avance sur le programme : il explore des notions connexes qui développent sa culture générale.

              +

              Tout cela dans un unique but : faciliter votre travail.

              +
              +
              +
              +
              + Alerte douce +

              Un élève décroche

              +
              • 3 QCM de début d’heure sous la moyenne
              • Cours lu en 2 minutes au lieu de 15
              • Devoir maison non rendu
              +

              → Premier rang, notion à réexpliquer, suivi plus régulier.

              +
              +
              + Excellence +

              Un élève s’ennuie

              +
              • Tous les TP réussis du premier coup
              • 20/20 au QCM de lecture
              • Finit avant tout le monde
              +

              → Défis plus durs sur des notions connexes, sans prendre d’avance sur le programme.

              +
              + +
              + Labs +

              Un indice se débloque

              +
              1. Tentative 1 · échec
              2. Tentative 3 · 💡 Indice 1 : regarde la commande ip addr
              3. Tentative 5 · 💡 Indice 2 : le masque /26 donne 62 hôtes
              +

              → L’élève cherche d’abord. Vous gardez votre temps pour les vraies questions.

              +
              +
              +
              +

              Piloter

              Suivre la classe, l’établissement et le territoire.

              −40 dB

              Vous devenez le roi du silence grâce à la fonction « Lever la main ».

              Vos élèves n’auront plus que le droit de tousser ou de respirer !

              Tous les cours se téléchargent en PDF.

              CM complet, TD prêt à imprimer avec ses cases à remplir, correction à part, QCM papier.

              + + + + + + diff --git a/design/apercu-generateur.html b/design/apercu-generateur.html new file mode 100644 index 0000000..3bf626c --- /dev/null +++ b/design/apercu-generateur.html @@ -0,0 +1,163 @@ + + + + + + Générateur de TD · Syllabus + + + + + + + + + + + + + +
              + +
              + +
              +
              +
              +

              Générateur de TD

              +

              Pour les profs

              +

              Des exercices à l’infini, corrigés tout de suite.

              +

              Chaque clic tire un nouvel exercice au hasard. La correction montre le calcul, étape par étape. En mode examen : 10 questions, chronométrées, notées sur 20.

              +
              +
              +
              + +
              + +
              +

              +

              +
              +
              + +
              + +
              +
              + +
              + + + + + + diff --git a/design/apercu-ide.html b/design/apercu-ide.html new file mode 100644 index 0000000..b1de076 --- /dev/null +++ b/design/apercu-ide.html @@ -0,0 +1,263 @@ + + + + + + IDE en ligne · Syllabus + + + + + + + + + + + + + + + + + + + + + + + + + +
              + +
              + +
              +
              +
              +
              +

              IDE en ligne

              +

              Pour les élèves

              +

              Coder, exécuter, vérifier. Dans le navigateur.

              +

              Python, SQL, HTML/CSS/JavaScript et Linux. Le code s’exécute vraiment, les tests disent tout de suite si c’est juste. Ton code est gardé sur cet appareil.

              +
              +
              +
              +
              + +
              +
              + + main.py + + + + + +
              +
              +
              +
              + + + +
              + 
              Clique sur ▶ Exécuter pour lancer ton code.
              + + +
              +
              + +
              + +
              + + + + + + diff --git a/design/apercu-inscription.html b/design/apercu-inscription.html new file mode 100644 index 0000000..863d4c9 --- /dev/null +++ b/design/apercu-inscription.html @@ -0,0 +1,113 @@ + + + + + + Créer une classe · Syllabus + + + + + + + + + +
              + +
              + +
              +
              + +
              +
              +

              Enseignants

              +

              Créer une classe.

              +

              Gratuit · sans CB

              +

              Ensuite, ajoutez vos élèves par code de classe, import CSV ou saisie rapide. Pour les mineurs, on ne demande que le nom, le prénom et le groupe.

              +
              +
              + + + +
              + + + +
              + + +
              +

              Aucune carte bancaire demandée.

              +
              +
              +
              + +
              + + + + + diff --git a/design/apercu-integration.html b/design/apercu-integration.html new file mode 100644 index 0000000..63aa175 --- /dev/null +++ b/design/apercu-integration.html @@ -0,0 +1,80 @@ + + + + + + Intégration et sécurité · Syllabus + + + + + + + + + + + + + +
              + +
              + +
              +

              Documentation technique

              Pour les profs

              +

              Intégration et sécurité

              Ce qu’il faut savoir pour raccorder Syllabus au système d’information de l’établissement.

              +
              +

              Authentification unique (SSO

              Protocoles pris en charge : SAML 2.0 (Shibboleth, ADFS, fédération Renater), OpenID Connect (Entra ID, Google Workspace, Keycloak), CAS (ENT). EduConnect pour les élèves du secondaire via l’ENT de l’académie.

              ParamètreValeur
              Entity IDhttps://auth.syllabus.fr/saml/metadata
              ACS URLhttps://auth.syllabus.fr/saml/acs
              Attributs requismail, givenName, sn, eduPersonAffiliation
              Redirect URI OIDChttps://auth.syllabus.fr/oidc/callback
              +

              Création et suppression des comptes

              • Import CSV

                Classes et étudiants, depuis l’export de votre logiciel de scolarité

              • Juste à temps (JIT

                Compte créé à la première connexion SSO, rattaché selon l’affiliation

              • SCIM 2.0

                Synchronisation automatique depuis Entra ID ou Keycloak

              • LDAP / Active Directory

                Synchronisation planifiée des groupes en lecture seule

              • Suppression

                Compte désactivé à la fin de licence, données effacées après 12 mois

              +
              +
              +

              API REST

              API REST en JSON, documentée au format OpenAPI 3.1. Authentification par jeton porteur, une clé par établissement avec des droits limités (lecture des notes, gestion des comptes). Limite : 600 requêtes par minute. Webhooks signés (HMAC-SHA256) pour les événements devoir rendu, examen terminé, alerte ouverte.

              curl -H "Authorization: Bearer $PAILLASSE_TOKEN" \
+  https://api.syllabus.fr/v1/classes/bts-sio-1a/notes?format=csv
              +

              Prérequis réseau et postes

              À autoriserProtocoleUsage
              syllabus.fr, *.syllabus.frHTTPS 443site, cours, API
              vm.syllabus.frWSS 443 (WebSocketterminal et IDE
              auth.syllabus.frHTTPS 443connexion SSO

              Aucun port autre que 443, aucun logiciel à installer. Le proxy doit laisser passer les connexions WebSocket (en-tête Upgrade) et ne pas couper les sessions inactives avant 10 minutes. Navigateurs : Firefox, Chrome, Edge et Safari des deux dernières versions majeures. Débit : environ 50 kbit/s par terminal, 300 kbit/s par IDE.

              +
              +
              +

              Isolation des environnements

              • ■Une VM KVM dédiée par étudiant et par séance, jamais partagée
              • ■Trafic entre VM d’étudiants bloqué, y compris dans une même classe
              • ■Sortie Internet filtrée : fermée par défaut, liste blanche de dépôts (Debian, PyPI, npm) activable par le prof
              • ■VM détruite en fin de séance ; seul le dossier de travail est conservé, chiffré
              • ■Quotas CPU, mémoire et disque par VM ; arrêt automatique après 30 min d’inactivité
              • ■Commandes et connexions journalisées, consultables par le prof et la DSI
              +

              Conformité et continuité

              SujetEngagement
              HébergementScaleway, datacenters de Paris, France
              RGPDAccord de sous-traitance art. 28, registre des traitements fourni
              ConservationTraces d’activité 12 mois, notes jusqu’à fin de scolarité + 1 an
              SauvegardesQuotidiennes, chiffrées, conservées 30 jours, second site en France
              Disponibilité99,5 % par mois en période scolaire, maintenance hors cours
              ChiffrementTLS 1.2+ en transit, AES-256 au repos
              DPOdpo@syllabus.fr
              Mentions légales →
              +
              +
              +
              + + + + + + diff --git a/design/apercu-lab-essai.html b/design/apercu-lab-essai.html new file mode 100644 index 0000000..36d399c --- /dev/null +++ b/design/apercu-lab-essai.html @@ -0,0 +1,134 @@ + + + + + + Lab d’essai · Premiers pas dans le shell · Syllabus + + + + + + + + + + + + + +
              + +
              + +
              +
              +
              + ← Labs +

              Pour les élèves

              +

              Premiers pas dans le shell

              + Lab d’essai +
              +
              +
              +
              +

              Consignes

              +
                +
              1. 1Affiche le dossier courant avec pwd.
                2. +
              2. 2Liste son contenu avec ls -la.
                3. +
              3. 3Crée un dossier projets et entre dedans.
                4. +
              4. 4Crée un fichier notes.txt.
                5. +
              5. 5Écris ton prénom dedans avec echo.
                6. +
              +
              +
              +
              + + debian-lab · console 1 · xterm.js +
              +
              +
              + +
              + + +
              + + + + + diff --git a/design/apercu-lab-web.html b/design/apercu-lab-web.html new file mode 100644 index 0000000..13e3f0e --- /dev/null +++ b/design/apercu-lab-web.html @@ -0,0 +1,138 @@ + + + + + + Lab web · Syllabus + + + + + + + + + + + + + +
              + +
              + +
              +
              +
              + ← Labs +

              Pour les élèves

              +

              Lab web · Mon premier serveur Apache

              + SRV-1 · BTS SIO, BUT R&T, NSI +
              +
              +
              + +
              +
              web-01 · 192.168.10.10 · xterm.js
              +
              +
              +
              +
              + +

              http://192.168.10.10/

              +
              + +
              +
              + +
              + + + + + + diff --git a/design/apercu-labs.html b/design/apercu-labs.html new file mode 100644 index 0000000..d875e02 --- /dev/null +++ b/design/apercu-labs.html @@ -0,0 +1,139 @@ + + + + + + Labs · Syllabus + + + + + + + + + +
              + +
              + +
              +
              + +
              +

              Catalogue

              +

              Pour les élèves

              +

              Des labs qui se corrigent tout seuls.

              +

              Chaque lab est une vraie VM Debian, ou plusieurs reliées en réseau. L’élève suit les consignes, la vérification valide chaque étape.

              +
              +
              +
              +
              +

              Filtrer

              + + + + +
              +
                +
              • + Linux + 01 +
                +

                Lycée NSI

                +

                Premiers pas dans le shell

                +

                Se déplacer, créer des dossiers, lire des fichiers.

                + Lancer le lab +
                +
                • +
              • + Linux + 02 +
                +

                BTS SIO · SISR et SLAM

                +

                Utilisateurs et droits

                +

                Créer des comptes, régler chmod et chown, tester les accès.

                + Lancer le lab +
                +
                • +
              • + Réseau + 03 +
                +

                BTS CIEL

                +

                Adressage IPv4

                +

                Configurer deux VM pour qu’elles se voient, puis diagnostiquer.

                + Lancer le lab +
                +
                • +
              • + Réseau + 04 +
                +

                BUT · Licence pro

                +

                Routage statique avec Kathará

                +

                Trois routeurs en conteneurs, une topologie à faire communiquer.

                + Lancer le lab +
                +
                • +
              • + Services + 05 +
                +

                BTS SIO · SISR et SLAM

                +

                Serveur web Apache

                +

                Installer, publier une page, lire les journaux.

                + Lancer le lab +
                +
                • +
              • + Services + 06 +
                +

                Master · École d’ingé

                +

                Annuaire Samba AD

                +

                Monter un contrôleur de domaine et joindre un client.

                + Lancer le lab +
                +
                • +
              +
              +
              + + + + + diff --git a/design/apercu-legal.html b/design/apercu-legal.html new file mode 100644 index 0000000..e4868af --- /dev/null +++ b/design/apercu-legal.html @@ -0,0 +1,124 @@ + + + + + + Informations légales · Syllabus + + + + + + + + + +
              + +
              + +
              +
              +
              +

              Informations légales

              +

              Le cadre, en clair.

              +

              Dernière mise à jour : 29 septembre 2026

              +
              +
              +
              + +
              + +
              +

              Mentions légales

              +
              +

              Éditeur Syllabus, édité par Adam Belkacemi, [à compléter] (forme juridique, capital, SIRET, adresse du siège).

              +

              Directeur de la publication Adam Belkacemi. Contact adam@belkacemi.me.

              +

              Hébergeur Scaleway SAS, 8 rue de la Ville-l’Évêque, 75008 Paris. Les serveurs sont situés en France, à Paris.

              +
              + +
              +

              Conditions générales d’utilisation

              +
              +

              1. Objet

              Syllabus met à disposition des cours, des labs Linux et réseau sur machines virtuelles, des QCM et des outils de suivi pour l’enseignement.

              +

              2. Comptes

              Les enseignants créent un compte avec leur e-mail professionnel. Les élèves se connectent avec l’identifiant et le code remis par leur enseignant. Chacun est responsable de la confidentialité de ses accès.

              +

              3. Accès gratuit

              L’accès enseignant est gratuit et sans carte bancaire. Syllabus peut faire évoluer les fonctionnalités et les limites d’usage, en prévenant les utilisateurs.

              +

              4. Usage acceptable

              Les VM servent uniquement à l’apprentissage. Sont interdits : le minage, les attaques vers des tiers, le contournement des quotas ou du mode examen. Le trafic sortant des VM est bloqué par défaut et l’activité est journalisée.

              +

              5. Mode examen

              Pendant une épreuve, les changements d’onglet, sorties de fenêtre et sorties de souris sont enregistrés et transmis à l’enseignant. L’élève en est informé avant de commencer.

              +

              6. Contenus

              Les conditions de réutilisation des contenus pédagogiques seront précisées ultérieurement. Les travaux des élèves leur appartiennent.

              +

              7. Disponibilité et responsabilité

              Syllabus fait ses meilleurs efforts pour assurer la disponibilité du service, sans garantie d’absence d’interruption. [à compléter]

              +

              8. Droit applicable

              Les présentes conditions sont soumises au droit français.

              +
              + +
              +

              Confidentialité et RGPD

              +
              +

              Quand un établissement utilise Syllabus avec ses élèves, l’établissement est responsable du traitement et Syllabus agit comme sous-traitant. Pour les comptes enseignants créés directement, Syllabus est responsable du traitement.

              +

              Données collectées

              +
              • Élèves : nom, prénom, groupe. Aucun e-mail pour les mineurs.
              • Enseignants : nom, e-mail professionnel, établissement.
              • Activité pédagogique : étapes de TP, réponses aux QCM, temps passé, remarques des enseignants.
              • Mode examen : événements de sortie de copie, uniquement pendant l’épreuve.
              • Journaux techniques de sécurité.
              +

              Finalités et base légale

              Fournir le service d’enseignement demandé par l’établissement (mission d’intérêt public de l’établissement) ou par l’enseignant (exécution du contrat).

              +

              Conservation

              Les données d’une classe sont supprimées automatiquement 90 jours après son archivage de fin d’année.

              +

              Hébergement

              Toutes les données sont hébergées en France, chez Scaleway. Elles ne quittent pas l’Union européenne. Aucune donnée n’est vendue ni utilisée à des fins publicitaires.

              +

              Vos droits

              Accès, rectification, effacement, limitation, opposition et portabilité : écrivez à adam@belkacemi.me ou à votre établissement. Vous pouvez aussi adresser une réclamation à la CNIL (cnil.fr).

              +

              Délégué à la protection des données [à compléter]

              +
              + +
              +

              Cookies

              +
              +

              Syllabus n’utilise que des cookies strictement nécessaires : le cookie de session qui vous garde connecté, et le jeton de sécurité des formulaires. Aucun cookie publicitaire, aucun traceur tiers. Ils ne demandent donc pas de consentement.

              +
              + +
              +

              Accord de sous-traitance (article 28 du RGPD

              +
              +

              Pour chaque établissement, un accord de sous-traitance précise

              +
              • l’objet, la durée et la nature des traitements ;
              • les mesures de sécurité : chiffrement en transit, isolement des classes, sauvegardes chiffrées ;
              • la confidentialité des personnes autorisées ;
              • la liste des sous-traitants ultérieurs (hébergement : Scaleway SAS, France) ;
              • l’assistance pour répondre aux demandes de droits ;
              • la notification des violations de données ;
              • la suppression ou la restitution des données en fin de contrat.
              +

              Demander l’accord pour votre établissement

              +
              +
              +
              +
              + + + + + + diff --git a/design/apercu-maison.html b/design/apercu-maison.html new file mode 100644 index 0000000..ab7efec --- /dev/null +++ b/design/apercu-maison.html @@ -0,0 +1,123 @@ + + + + + + Ressources à la maison · Syllabus + + + + + + + + + + + + + +
              + +
              + +
              +
              +
              +

              Pour les élèves

              +

              Pour les élèves

              +

              Envie d’aller plus loin à la maison ?

              +

              Sur Syllabus, tu retrouves tes cours, tes QCM, l’IDE et le générateur de TD depuis chez toi, sur ton PC ou ton téléphone. Et si tu en veux encore, voici des ressources gratuites, sérieuses et en grande partie en français.

              +
              Coder dans l’IDE →S’entraîner au générateur de TDRelire les cours
              +
              +
              +
              +

              Ressources externes gratuites

              +

              Elles ne font pas partie de Syllabus. Certaines demandent de créer un compte : demande l’accord de tes parents si tu es mineur.

              +
                +
                + + +
                +
                +
                + + + + + PDF + + + + + + + + + + + SERVEZ-VOUS ! + SERVEZ-VOUS ! + COURS · TD · CORRECTIONS EN PDF + +
                +
                +

                Gratuit · à télécharger

                +

                Tous les cours se téléchargent en PDF.

                +

                CM complet, TD prêt à imprimer avec ses cases à remplir, correction à part, QCM papier. Pour la classe, pour réviser chez soi ou pour un jour sans réseau.

                + +
                +
                +
                +
                + + + + + + diff --git a/design/apercu-messagerie.html b/design/apercu-messagerie.html new file mode 100644 index 0000000..188e032 --- /dev/null +++ b/design/apercu-messagerie.html @@ -0,0 +1,67 @@ + + + + + + Messagerie · Syllabus + + + + + + + + + + + + + +
                + +
                + +
                +

                Messagerie

                Pour les profs

                +

                Yanis B.

                Élève · BTS SIO 1 A · lab VLAN en cours

                Fiche élève
                Échanges visibles par l’élève et son équipe pédagogique. Pas de messages entre élèves. Horaires de réponse conseillés : 8 h – 19 h.

                1. Bonjour Monsieur, je ne comprends pas l’étape 4 du lab VLAN, la commande ne marche pas.

                  10:12

                2. J’ai déjà utilisé les 2 indices 😅

                  10:14

                3. Bonjour Yanis. Regarde bien le nom de l’interface avec ip a : ce n’est pas eth0 sur cette VM.

                  10:16

                +
                +
                + + + + + + diff --git a/design/apercu-paiement-ok.html b/design/apercu-paiement-ok.html new file mode 100644 index 0000000..afaf027 --- /dev/null +++ b/design/apercu-paiement-ok.html @@ -0,0 +1,72 @@ + + + + + + Paiement confirmé · Syllabus + + + + + + + + + + + + + +
                + +
                + +
                +
                + +

                Pour les profs

                +

                Merci ! C’est activé.

                +

                Votre offre Enseignant est active. Le reçu et la facture sont envoyés par e-mail.

                +
                Offre
                Enseignant · mensuel
                Montant
                34,80 € TTC / mois
                Prochain paiement
                29/10/2026
                +
                Ouvrir mon cockpit →Gérer mon abonnement
                +

                Un coup de pouce en plus ? Parlez de Syllabus à votre établissement, ou écrivez vos remarques à adam@belkacemi.me.

                +
                + + + + + + diff --git a/design/apercu-paiement.html b/design/apercu-paiement.html new file mode 100644 index 0000000..c94678e --- /dev/null +++ b/design/apercu-paiement.html @@ -0,0 +1,103 @@ + + + + + + Paiement · Syllabus + + + + + + + + + + + + + +
                + +
                + +
                +
                ← Retour aux tarifs

                Pour les profs

                +

                Passer à l’offre payante

                Les cours restent gratuits pour toujours. Vous payez les VM, le suivi et les outils prof.

                +
                +
                +

                1 · Votre offre

                +
                + +
                +

                2 · Facturation

                +
                +
                +

                3 · Moyen de paiement

                +
                +

                Le numéro de carte est saisi dans un champ sécurisé fourni par Stripe. Syllabus ne le voit ni ne le stocke.

                + + +
                +
                + +
                + +
                + + + + + + diff --git a/design/apercu-quiz-eleve.html b/design/apercu-quiz-eleve.html new file mode 100644 index 0000000..2b18686 --- /dev/null +++ b/design/apercu-quiz-eleve.html @@ -0,0 +1,64 @@ + + + + + + Quiz flash · Syllabus + + + + + + + + + +
                +

                Vue élève · téléphone ou PC

                +
                +

                Pour les élèves

                +

                Quiz flash

                +
                + + + + +
                +
                + + + +
                + + + diff --git a/design/apercu-quiz-projection.html b/design/apercu-quiz-projection.html new file mode 100644 index 0000000..cdc8e13 --- /dev/null +++ b/design/apercu-quiz-projection.html @@ -0,0 +1,163 @@ + + + + + + Quiz flash · projection · Syllabus + + + + + + + + + +
                +
                + QUIZ FLASH +

                BTS SIO 1 · Groupe A · ls, chmod, grep, ip, ping

                +

                0 / 24 connectés

                + +
                + +
                +
                +

                Sur ton téléphone ou ton PC, va sur

                +

                syllabus.fr/quiz

                +

                et entre le code

                +

                K7Q4

                +

                Connecte-toi avec ton identifiant Syllabus.

                +
                +
                +

                Présences

                0 / 24

                +
                  +
                • Léa M.
                  • +
                • Yanis B.
                  • +
                • Nora Kaci
                  • +
                • Tom R.
                  • +
                • Inès D.
                  • +
                • Sami L.
                  • +
                • Chloé P.
                  • +
                • Adam F.
                  • +
                • Maël G.
                  • +
                • Jade T.
                  • +
                • Hugo M.
                  • +
                • Lina G.
                  • +
                • Rayan F.
                  • +
                • Emma B.
                  • +
                • Noah H.
                  • +
                • Sarah R.
                  • +
                • Ilyes M.
                  • +
                • Manon L.
                  • +
                • Lucas M.
                  • +
                • Zoé D.
                  • +
                • Enzo L.
                  • +
                • Camille B.
                  • +
                • Nathan F.
                  • +
                • Anaïs L.
                  • +
                +
                +

                En attente des connexions…

                + +
                +
                +
                + + + + +
                + + + diff --git a/design/apercu-ressource.html b/design/apercu-ressource.html new file mode 100644 index 0000000..91c695a --- /dev/null +++ b/design/apercu-ressource.html @@ -0,0 +1,99 @@ + + + + + + Ressources · Syllabus + + + + + + + + + + + + + +
                + +
                + +
                +
                +
                +

                Outil

                +

                Outil

                +

                +
                + Voir la démo +

                Interactive, sans inscription

                +
                +
                +
                +
                +
                +
                +

                +
                +
                +
                +
                  +
                  +
                  +
                  +

                  En trois étapes

                  +
                    +
                    +
                    +
                    +
                    +

                    +

                    + Voir la démo +
                    +
                    + + +
                    + + + + + + diff --git a/design/apercu-suivi.html b/design/apercu-suivi.html new file mode 100644 index 0000000..35266b3 --- /dev/null +++ b/design/apercu-suivi.html @@ -0,0 +1,221 @@ + + + + + + Suivi de classe · Syllabus + + + + + + + + + +
                    + +
                    + +
                    +
                    +
                    +
                    +

                    Espace enseignant · Suivi

                    +

                    Pour les profs

                    +

                    BTS SIO 1 · Groupe A

                    +

                    Bloc 2 · Administration des systèmes et des réseaux · 24 élèves

                    +
                    +
                    + Quiz flash de début d’heure + Devoirs maison + Voir la séquence + +
                    +
                    +
                    +
                    +
                    +
                    Progression moyenne
                    52 %
                    +
                    Moyenne aux QCM
                    13,4
                    +
                    Actifs cette semaine
                    21 / 24
                    +
                    À aider maintenant
                    2
                    +
                    + +
                    +
                    +

                    Élèves

                    +
                    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
                    ÉlèveAdressage IPv4VLANInter-VLANDHCPDNS BINDQCMTemps VM
                    LLéa M.Terminé18/2012 h 40
                    YYanis B.14/209 h 10
                    NNora KaciMain levée11/208 h 05
                    TTom R.16/2010 h 30
                    IInès D.9/205 h 20
                    SSami L.Bloqué 9 min7/206 h 45
                    CChloé P.En avance19/2013 h 15
                    AAdam F.13/208 h 50
                    +
                    +

                    8 élèves sur 24 affichés · triés par besoin d’aide

                    +
                    + + +
                    +
                    +
                    +
                    +
                    + +
                    +

                    Les élèves signalent un blocage avec la fonction « Lever la main », sans interrompre la classe.« Lever la main ».

                    +

                    Chaque demande arrive dans votre tableau de bord, dans l’ordre. !

                    +
                    +
                    +
                    +
                    +
                    + + + + + diff --git a/design/apercu-sujet.html b/design/apercu-sujet.html new file mode 100644 index 0000000..8703394 --- /dev/null +++ b/design/apercu-sujet.html @@ -0,0 +1,66 @@ + + + + + + Créer un sujet d’examen · Syllabus + + + + + + + + + + + + + +
                    + +
                    + +
                    +

                    Sujet · étape par étape

                    Pour les profs

                    +

                    Créer un sujet d’examen

                    Composez un sujet en 5 étapes, à partir de la banque ou de vos questions.

                    1 · Cadre de l’épreuve

                    +
                    + + + + + + diff --git a/design/apercu-tarifs.html b/design/apercu-tarifs.html new file mode 100644 index 0000000..7ab4166 --- /dev/null +++ b/design/apercu-tarifs.html @@ -0,0 +1,70 @@ + + + + + + Tarifs · Syllabus + + + + + + + + + +
                    + +
                    + +

                    Tarifs HT

                    Les cours sont gratuits. Les VM coûtent moins qu’un manuel.

                    Une licence Syllabus pour un élève coûte 24 € par an : QCM, TP sur VM, suivi et mode examen compris.

                    • Découverte

                      Élèves, curieux, enseignants

                      0 €

                      pour toujours

                      • ✓Les 99 cours : CM, TD, QCM
                      • ✓Corrections expliquées
                      • ✓1 lab d’essai de 30 min par jour

                      Lire les cours →

                    • Enseignant

                      Une classe, sans passer par l’intendance

                      29 € / mois

                      ou 290 € / an · jusqu’à 35 élèves

                      • ✓Les 59 TP sur VM
                      • ✓Correction automatique
                      • ✓Suivi des élèves et mode examen
                      • ✓Cockpit prof, messagerie, correction assistée
                      • ✓15 h de VM par élève et par mois

                      Souscrire →

                    • Le plus choisi

                      Établissement

                      Lycée, BTS, IUT, université, école

                      24 € / élève / an

                      à partir de 60 élèves · 1 440 € / an

                      • ✓Tout Enseignant, classes illimitées
                      • ✓Espace vie scolaire : CPE, direction, intendance
                      • ✓Export Pronote / ENT
                      • ✓Espace administrateur et bibliothèque partagée
                      • ✓Séances réservées, VM prêtes 10 min avant
                      • ✓Paiement par mandat administratif

                      Demander un devis

                    • Région et OF

                      Académies, régions, organismes de formation

                      Sur devis

                      à partir de 500 élèves ou stagiaires

                      • ✓Tout Établissement
                      • ✓Capacité réservée
                      • ✓Suivi par centre ou par site
                      • ✓Tableau de bord académie
                      • ✓Accompagnement au déploiement

                      Nous contacter →

                    API et MCP pour développeurs : 19 € HT par mois avec 100 h de VM incluses, puis 0,09 € HT l’heure. Les classes restent prioritaires sur la capacité.

                    +
                    + +

                    Vos questions, nos réponses.

                    +

                    Intendance, données, pédagogie, technique. Une question manque ? adam@belkacemi.me

                    +
                    +

                    Achat et intendance

                    • Bon de commande et Chorus Pro ?

                      Oui. Nous envoyons un devis, vous émettez un bon de commande, la facture arrive sur Chorus Pro. Paiement par mandat administratif à 30 jours.

                    • Faut-il une carte bancaire pour essayer ?

                      Non. Un enseignant crée sa classe gratuitement, sans CB. En échange, on vous demande juste un coup de pouce : vos remarques, ou votre aide pour faire souscrire votre établissement.

                    • Une licence couvre quelle période ?

                      Une licence suit l’année scolaire, de septembre à août. Les comptes archivés sont supprimés 90 jours après la fin d’année.

                    • Les élèves qui redoublent ?

                      Ils repartent sur la licence de l’année suivante. Leur historique (notes, observations, progression) peut être conservé si l’établissement le demande.

                    • Peut-on payer par région ou par académie ?

                      Oui, un devis groupé est possible pour plusieurs établissements. Écrivez-nous pour en parler.

                    +

                    Élèves et données

                    • Où sont hébergées les données ?

                      En France, chez Scaleway, sur des serveurs situés à Paris. Rien ne sort de l’Union européenne.

                    • Et le RGPD ?

                      Nous collectons le minimum : nom, prénom, classe, résultats. Pas de publicité, pas de revente, pas de traceurs tiers. Un contrat de sous-traitance est fourni à l’établissement.

                    • Les élèves mineurs peuvent-ils s’inscrire seuls ?

                      Non. C’est l’enseignant qui crée la classe et distribue les identifiants. L’élève n’a pas besoin d’adresse e-mail.

                    • Un élève peut-il travailler chez lui ?

                      Oui, depuis n’importe quel navigateur, sur PC ou téléphone. Cours, QCM, IDE et devoirs maison restent accessibles toute l’année.

                    +

                    Pédagogie

                    • Les cours suivent-ils les programmes officiels ?

                      Oui. Ils sont construits à partir des référentiels officiels (BO, arrêtés, fiches RNCP), du SNT au master. Chaque CM, TD et TP indique les compétences visées.

                    • Puis-je modifier un cours ou un sujet ?

                      Oui. Tout se duplique et se modifie : CM, questions, TD, sujets d’examen. Vos versions restent dans votre bibliothèque.

                    • Comment marche le mode examen ?

                      L’élève passe en plein écran. Si sa souris sort de la fenêtre ou s’il change d’onglet, vous le voyez en direct, avec l’heure et la durée.

                    • Les TD s’impriment-ils ?

                      Oui. Chaque TD se télécharge en PDF avec ses étapes et ses cases à remplir. La correction s’imprime à part, pour vous.

                    • Et la fonction « Lever la main » ?

                      L’élève lève la main depuis son écran, vous voyez la file d’attente. Fini les « Madame ! Monsieur ! » en boucle.

                    +

                    Technique

                    • Faut-il installer quelque chose ?

                      Non. Tout se passe dans le navigateur : terminal Debian, IDE, navigateur relié à la VM. Rien à installer sur les postes du lycée.

                    • Et si un élève dépasse 15 h de VM ?

                      Le compteur est partagé par la classe : un élève peut consommer plus si d’autres consomment moins. Au-delà, les TP restent ouverts en lecture.

                    • Le réseau du lycée bloque souvent tout…

                      Syllabus passe par une connexion web chiffrée classique, comme n’importe quel site. En cas de souci, on vous aide à le régler avec votre administrateur réseau.

                    • Une VM peut-elle casser le réseau du lycée ?

                      Non. Chaque VM est isolée chez nous. L’élève peut tout casser dedans, il la réinitialise en un clic.

                    +
                    +
                    +
                    + + + + + diff --git a/design/apercu-td-imprimable.html b/design/apercu-td-imprimable.html new file mode 100644 index 0000000..53f7e1f --- /dev/null +++ b/design/apercu-td-imprimable.html @@ -0,0 +1,166 @@ + + + + + + TD à imprimer · Syllabus + + + + + + + + + + + + + +
                    + +
                    + +
                    +
                    +
                    +
                    +

                    TD prêt à imprimer

                    +

                    Pour les profs

                    +

                    Découper un réseau IPv4.

                    +

                    Étapes numérotées, cases à remplir, auto-évaluation. La correction s’imprime à part, pour le prof.

                    +
                    +
                    + + +
                    +
                    +
                    +
                    +
                    +
                    +

                    BTS SIO · BTS CIEL · BUT R&T 1re année

                    TD · Découper un réseau IPv4

                    Durée : 1 h · Calculatrice interdite

                    +

                    Nom :

                    Classe :

                    Date :

                    +
                    +

                    Rappel : un masque /n laisse 32 − n bits pour les hôtes. Nombre d’hôtes utilisables = 2(32 − n − 2.

                    +
                    + +
                    +
                    1

                    Lire l’adresse

                    L’établissement dispose du réseau 192.168.10.0/24. Complète les cases.

                    +
                    +
                    + +
                    +
                    2

                    Choisir le masque

                    Il faut 4 sous-réseaux de même taille. Combien de bits emprunter ? Coche puis justifie.

                    +
                    1 bit2 bits3 bits4 bits

                    Justification

                    +
                    + +
                    +
                    3

                    Calculer la taille d’un sous-réseau

                    Avec ton masque, complète le tableau.

                    +
                    Adresse réseau
                    Masque (décimal
                    Nombre d’adresses par sous-réseau
                    Hôtes utilisables
                    +
                    + +
                    +
                    4

                    Découper le réseau

                    Remplis le plan d’adressage des 4 sous-réseaux.

                    +
                    Sous-réseauAdresse réseauPlage d’hôtesBroadcast
                    SR1 · Administration
                    SR2 · Élèves
                    SR3 · Serveurs
                    SR4 · Wi-Fi invités
                    +
                    + +
                    +
                    5

                    Vérifier sur le lab

                    Connecte-toi au lab « Adressage IPv4 » et configure le poste du SR2. Recopie la commande utilisée.

                    +
                    +
                    + +
                    +
                    6

                    Auto-évaluation

                    Coche ce que tu sais faire.

                    +
                    • Je sais lire une notation CIDR
                    • Je sais calculer un masque
                    • Je sais trouver une adresse de broadcast
                    +
                    +
                    +
                    +

                    Correction

                    Version prof
                    +
                    + +
                    +
                    1

                    Lire l’adresse

                    L’établissement dispose du réseau 192.168.10.0/24. Complète les cases.

                    +
                    +
                    + +
                    +
                    2

                    Choisir le masque

                    Il faut 4 sous-réseaux de même taille. Combien de bits emprunter ? Coche puis justifie.

                    +
                    1 bit✕2 bits3 bits4 bits

                    Justification

                    2² = 4 sous-réseaux. Le masque passe de /24 à /26.

                    +
                    + +
                    +
                    3

                    Calculer la taille d’un sous-réseau

                    Avec ton masque, complète le tableau.

                    +
                    Adresse réseau192.168.10.0
                    Masque (décimal255.255.255.192
                    Nombre d’adresses par sous-réseau64
                    Hôtes utilisables62
                    +
                    + +
                    +
                    4

                    Découper le réseau

                    Remplis le plan d’adressage des 4 sous-réseaux.

                    +
                    Sous-réseauAdresse réseauPlage d’hôtesBroadcast
                    SR1 · Administration192.168.10.0192.168.10.1 – .62192.168.10.63
                    SR2 · Élèves192.168.10.64192.168.10.65 – .126192.168.10.127
                    SR3 · Serveurs192.168.10.128192.168.10.129 – .190192.168.10.191
                    SR4 · Wi-Fi invités192.168.10.192192.168.10.193 – .254192.168.10.255
                    +
                    + +
                    +
                    5

                    Vérifier sur le lab

                    Connecte-toi au lab « Adressage IPv4 » et configure le poste du SR2. Recopie la commande utilisée.

                    +

                    sudo ip addr add 192.168.10.65/26 dev eth0

                    +
                    + +
                    +
                    6

                    Auto-évaluation

                    Coche ce que tu sais faire.

                    +
                    • Je sais lire une notation CIDR
                    • Je sais calculer un masque
                    • Je sais trouver une adresse de broadcast
                    +
                    +
                    +
                    + +
                    +
                    +
                    + +
                    +

                    Les élèves signalent un blocage avec la fonction « Lever la main », sans interrompre la classe.« Lever la main ».

                    +

                    Chaque demande arrive dans votre tableau de bord, dans l’ordre. !

                    +
                    +
                    +
                    +
                    +
                    + + + + + + + diff --git a/design/apercu-vie-scolaire.html b/design/apercu-vie-scolaire.html new file mode 100644 index 0000000..99bc4ae --- /dev/null +++ b/design/apercu-vie-scolaire.html @@ -0,0 +1,139 @@ + + + + + + Vie scolaire et intendance · Syllabus + + + + + + + + + + + + + +
                    + +
                    + +
                    +
                    +
                    + +
                    +
                    +

                    Vie scolaire et intendance

                    Pour les profs

                    +

                    Tableau de bord CPE

                    6 classes · 118 élèves · semaine du 28 septembre

                    +
                    + + +
                    +
                    +
                      +

                    • Alertes ouvertes

                      5

                      2 priorité haute

                    • Présence moyenne

                      92 %

                      sur les séances en ligne

                    • DM rendus

                      75 %

                      toutes classes

                    • Examens surveillés

                      4

                      cette semaine · 7 sorties

                    • Observations

                      38

                      prêtes pour les conseils

                      • +

                    • Licences

                      118/120

                      renouvellement 31/08/2027

                    • Coût annuel

                      2 832 €

                      HT · 24 € / élève

                    • Heures de VM

                      612 h

                      sur 1 770 h incluses ce mois

                    • Factures

                      3

                      1 en attente Chorus Pro

                    • Classes actives

                      6

                      6 enseignants

                      • +
                    +
                    +

                    Alertes élèves, toutes classes

                    remontées par les profs et par Syllabus

                    +
                    + +
                    PrioritéÉlèveSignalProf référentAction
                    Haute

                    Lucas M.

                    BTS SIO 1 A

                    Décrochage dans 3 matières

                    QCM < 8 en réseaux, maths et CEJM

                    		M. Belkacemi
                    Haute

                    Léa M.

                    BTS SIO 1 A

                    Baisse continue sur 4 semaines

                    12 → 7,5 de moyenne QCM

                    		M. Belkacemi
                    Moyenne

                    Enzo B.

                    Terminale NSI

                    5 DM non rendus

                    Depuis la rentrée

                    		Mme Roche
                    Moyenne

                    Camille D.

                    BTS SIO 1 A

                    3 sorties pendant un examen

                    E6 blanc · 12 s au total

                    		M. Belkacemi
                    Moyenne

                    Mathis C.

                    BTS CIEL 2

                    Absences répétées

                    4 séances de TP manquées

                    		M. Arnaud
                    Positif

                    Inès K.

                    BTS SIO 1 A

                    Excellence dans toutes les matières

                    Proposée pour le tutorat

                    		M. Belkacemi
                    +
                    +
                    +

                    Toutes les classes

                    +
                    + +
                    ClasseEnseignantÉlèvesMoy. QCMAlertesDM rendusPrésence
                    BTS SIO 1 · AM. Belkacemi1613,4381 %94 %
                    BTS SIO 1 · BM. Belkacemi1712,8276 %91 %
                    BTS SIO 2 · SISRMme Roche1413,9188 %96 %
                    BTS CIEL 2M. Arnaud1511,6464 %85 %
                    Terminale NSIMme Roche2412,1370 %93 %
                    Seconde SNT 4M. Faure3211,8273 %95 %
                    +
                    +
                    +
                    +

                    Conseils de classe · 1er trimestre

                    +

                    • BTS SIO 1 · A

                      lun. 07/12 · observations saisies

                      Prêt
                      100 %

                    • BTS CIEL 2

                      mar. 08/12 · observations saisies

                      2 profs à relancer
                      70 %

                    • Terminale NSI

                      jeu. 10/12 · observations saisies

                      En cours
                      45 %

                    • Seconde SNT 4

                      ven. 11/12 · observations saisies

                      En cours
                      20 %
                    +
                    +
                    +

                    Journal des examens

                    +

                    1. lun. 28/09 · 09:14 · BTS SIO 1 A · E6 blanc

                      Hugo P. · changement d’onglet · 3 s

                    2. lun. 28/09 · 09:21 · BTS SIO 1 A · E6 blanc

                      Lucas M. · souris hors fenêtre · 6 s

                    3. lun. 28/09 · 09:40 · BTS SIO 1 A · E6 blanc

                      Camille D. · fenêtre réduite · 2 s

                    4. mar. 29/09 · 14:00 · Terminale NSI · Contrôle SQL

                      24/24 connectés · aucune sortie

                    +
                    +
                    +
                    +
                    +
                    Gérer dans l’espace établissement →

                    Licences et factures

                    paiement par mandat administratif
                    +
                    Licences utilisées118 / 120

                    Il reste 2 licences. Au-delà, chaque élève ajouté est facturé 24 € HT au prorata.

                    +
                    PièceDateMontant HTStatut
                    Devis D-2026-04102/09/20262 880,00 €Accepté
                    Bon de commande BC-118705/09/20262 880,00 €Reçu
                    Facture F-2026-09310/09/20262 832,00 €Déposée sur Chorus Pro
                    +
                    +
                    +

                    Consommation de VM par classe

                    15 h incluses / élève / mois
                    +
                    • BTS SIO 1 · A142 h / 240 h
                    • BTS SIO 1 · B128 h / 255 h
                    • BTS SIO 2 · SISR160 h / 210 h
                    • BTS CIEL 296 h / 225 h
                    • Terminale NSI58 h / 360 h
                    • Seconde SNT 428 h / 480 h
                    +

                    Le compteur est partagé par classe. Aucun dépassement prévu d’ici la fin de l’année au rythme actuel.

                    +
                    +
                    +
                    +
                    +
                    + + +
                    + + + + + + diff --git a/design/apercu-visio.html b/design/apercu-visio.html new file mode 100644 index 0000000..de6cc36 --- /dev/null +++ b/design/apercu-visio.html @@ -0,0 +1,190 @@ + + + + + + Visio de classe · Syllabus + + + + + + + + + + + + + +
                    + +
                    + +
                    +
                    +

                    Visio de classe

                    +

                    La classe à distance, sans brouhaha.

                    +

                    Tous les élèves arrivent en sourdine. Ils lèvent la main, vous donnez la parole, un à la fois.

                    +
                    + + + +
                    +

                    Les vues sont reliées : levez la main côté élève (Léa M.), puis donnez-lui la parole côté prof.

                    +
                    + +
                    +
                    +
                    +
                    En direct · 00:24:12BTS SIO 1 · Groupe A
                    +
                    +
                    + +
                      +
                      +
                      +

                      Mains levées

                        Premier arrivé en haut.

                        +

                        Salle d’attente

                          +

                          Chat des élèves

                          +
                          +
                          + +
                          +
                          BTS SIO 1 · Groupe A · VLAN et routage
                          +
                          +
                          MB

                          M. B. · votre professeur

                          + M. B. +
                          LMVous
                          +
                          +
                          + + + + Quitter +
                          +

                          +
                          + +
                          +
                          +
                          BTS SIO 1 · AEn direct
                          +
                          +
                          MB

                          M. B.

                          +
                          LM
                          +
                          +
                          +
                          + +
                          + + + +
                          +
                          +
                          +
                          + +
                          + + + + + + diff --git a/design/config/cours.php b/design/config/cours.php new file mode 100644 index 0000000..3b5805b --- /dev/null +++ b/design/config/cours.php @@ -0,0 +1,264 @@ + 'nsi', + 'nom' => 'Lycée NSI', + 'sous_titre' => 'Première et Terminale · spécialité NSI', + 'couleur' => 'bg-[#FFD23F]', + 'blocs' => [ + [ + 'titre' => 'Première · Représentation des données', + 'cours' => [ + ['titre' => 'Entiers naturels : binaire et hexadécimal', 'types' => ['CM', 'TD', 'QCM'], 'heures' => 2], + ['titre' => 'Entiers relatifs et complément à deux', 'types' => ['CM', 'TD', 'QCM'], 'heures' => 2], + ['titre' => 'Nombres flottants et leurs pièges', 'types' => ['CM', 'TD', 'QCM'], 'heures' => 2], + ['titre' => 'Codage des caractères : ASCII, Unicode, UTF-8', 'types' => ['CM', 'TD', 'TP', 'QCM'], 'heures' => 2], + ], + ], + [ + 'titre' => 'Première · Architectures et systèmes', + 'cours' => [ + ['titre' => 'Modèle de von Neumann', 'types' => ['CM', 'TD', 'QCM'], 'heures' => 2], + ['titre' => 'Système d’exploitation et commandes Linux', 'types' => ['CM', 'TP', 'QCM'], 'heures' => 3], + ['titre' => 'Droits et permissions des fichiers', 'types' => ['CM', 'TD', 'TP', 'QCM'], 'heures' => 2], + ['titre' => 'Réseau : TCP/IP et protocole du bit alterné', 'types' => ['CM', 'TD', 'QCM'], 'heures' => 3], + ], + ], + [ + 'titre' => 'Première · Web et données', + 'cours' => [ + ['titre' => 'HTTP, formulaires GET et POST', 'types' => ['CM', 'TD', 'TP', 'QCM'], 'heures' => 3], + ['titre' => 'Traitement de données en tables CSV', 'types' => ['CM', 'TP', 'QCM'], 'heures' => 3], + ], + ], + [ + 'titre' => 'Terminale · Architectures, réseaux, sécurité', + 'cours' => [ + ['titre' => 'Processus et ordonnancement', 'types' => ['CM', 'TD', 'TP', 'QCM'], 'heures' => 3], + ['titre' => 'Routage : protocoles RIP et OSPF', 'types' => ['CM', 'TD', 'TP', 'QCM'], 'heures' => 4], + ['titre' => 'Chiffrement symétrique, asymétrique et HTTPS', 'types' => ['CM', 'TD', 'QCM'], 'heures' => 3], + ], + ], + [ + 'titre' => 'Terminale · Données et structures', + 'cours' => [ + ['titre' => 'Bases de données relationnelles et SQL', 'types' => ['CM', 'TD', 'TP', 'QCM'], 'heures' => 4], + ['titre' => 'Piles, files et listes chaînées', 'types' => ['CM', 'TD', 'TP', 'QCM'], 'heures' => 3], + ['titre' => 'Arbres binaires et graphes', 'types' => ['CM', 'TD', 'QCM'], 'heures' => 4], + ], + ], + ], + ], + [ + 'id' => 'sio', + 'nom' => 'BTS SIO SISR', + 'sous_titre' => 'Services informatiques aux organisations · option SISR', + 'couleur' => 'bg-[#7CF2C0]', + 'blocs' => [ + [ + 'titre' => 'Bloc 1 · Support et mise à disposition de services', + 'cours' => [ + ['titre' => 'Gérer le parc avec GLPI', 'types' => ['CM', 'TP', 'QCM'], 'heures' => 3], + ['titre' => 'Traiter un incident : ticket, diagnostic, résolution', 'types' => ['CM', 'TD', 'QCM'], 'heures' => 2], + ['titre' => 'Installer et configurer un poste Debian', 'types' => ['TP', 'QCM'], 'heures' => 2], + ['titre' => 'Présence en ligne : nom de domaine et DNS public', 'types' => ['CM', 'TD', 'QCM'], 'heures' => 2], + ], + ], + [ + 'titre' => 'Bloc 2 · Administration des systèmes et des réseaux', + 'cours' => [ + ['titre' => 'Adressage IPv4 et sous-réseaux', 'types' => ['CM', 'TD', 'TP', 'QCM'], 'heures' => 4], + ['titre' => 'VLAN et commutation', 'types' => ['CM', 'TD', 'TP', 'QCM'], 'heures' => 4], + ['titre' => 'Routage inter-VLAN', 'types' => ['TD', 'TP', 'QCM'], 'heures' => 3], + ['titre' => 'Serveur DHCP sous Debian', 'types' => ['CM', 'TP', 'QCM'], 'heures' => 2], + ['titre' => 'Serveur DNS avec BIND 9', 'types' => ['CM', 'TP', 'QCM'], 'heures' => 3], + ['titre' => 'Annuaire Samba AD et stratégies de groupe', 'types' => ['CM', 'TP', 'QCM'], 'heures' => 4], + ['titre' => 'Supervision avec Zabbix', 'types' => ['CM', 'TP', 'QCM'], 'heures' => 3], + ['titre' => 'Sauvegarde et restauration', 'types' => ['CM', 'TP', 'QCM'], 'heures' => 3], + ['titre' => 'Virtualisation et conteneurs', 'types' => ['CM', 'TP', 'QCM'], 'heures' => 3], + ], + ], + [ + 'titre' => 'Bloc 3 · Cybersécurité des services', + 'cours' => [ + ['titre' => 'RGPD et protection des données', 'types' => ['CM', 'TD', 'QCM'], 'heures' => 2], + ['titre' => 'Authentification et mots de passe', 'types' => ['CM', 'TD', 'TP', 'QCM'], 'heures' => 3], + ['titre' => 'Pare-feu avec nftables', 'types' => ['CM', 'TP', 'QCM'], 'heures' => 3], + ['titre' => 'VPN avec WireGuard', 'types' => ['CM', 'TP', 'QCM'], 'heures' => 3], + ['titre' => 'Journalisation et détection d’intrusion', 'types' => ['TP', 'QCM'], 'heures' => 3], + ], + ], + ], + ], + [ + 'id' => 'ciel', + 'nom' => 'BTS CIEL', + 'sous_titre' => 'Cybersécurité, informatique et réseaux, électronique · option IR', + 'couleur' => 'bg-[#C4B5FD]', + 'blocs' => [ + [ + 'titre' => 'Réseaux', + 'cours' => [ + ['titre' => 'Numération et codage de l’information', 'types' => ['CM', 'TD', 'QCM'], 'heures' => 2], + ['titre' => 'Modèle OSI et encapsulation', 'types' => ['CM', 'TD', 'QCM'], 'heures' => 2], + ['titre' => 'Ethernet, câblage et commutation', 'types' => ['CM', 'TP', 'QCM'], 'heures' => 3], + ['titre' => 'Adressage IPv4 et IPv6', 'types' => ['CM', 'TD', 'TP', 'QCM'], 'heures' => 4], + ['titre' => 'Services réseau : SSH, HTTP, FTP', 'types' => ['TP', 'QCM'], 'heures' => 3], + ['titre' => 'Capturer et analyser des trames avec tcpdump', 'types' => ['CM', 'TP', 'QCM'], 'heures' => 3], + ], + ], + [ + 'titre' => 'Informatique', + 'cours' => [ + ['titre' => 'Scripts Bash', 'types' => ['CM', 'TP', 'QCM'], 'heures' => 3], + ['titre' => 'Python pour l’administration système', 'types' => ['CM', 'TD', 'TP', 'QCM'], 'heures' => 4], + ['titre' => 'Objets connectés et protocole MQTT', 'types' => ['CM', 'TP', 'QCM'], 'heures' => 3], + ], + ], + [ + 'titre' => 'Cybersécurité', + 'cours' => [ + ['titre' => 'Analyse de risques', 'types' => ['CM', 'TD', 'QCM'], 'heures' => 2], + ['titre' => 'Durcir un serveur Linux', 'types' => ['CM', 'TP', 'QCM'], 'heures' => 3], + ['titre' => 'Détecter une attaque dans les journaux', 'types' => ['TP', 'QCM'], 'heures' => 2], + ], + ], + ], + ], + [ + 'id' => 'but', + 'nom' => 'BUT R&T', + 'sous_titre' => 'Réseaux et télécommunications · parcours Cybersécurité et DevCloud', + 'couleur' => 'bg-[#FF6FB5]', + 'blocs' => [ + [ + 'titre' => 'Semestres 1 et 2', + 'cours' => [ + ['titre' => 'Initiation aux réseaux informatiques', 'types' => ['CM', 'TD', 'TP', 'QCM'], 'heures' => 4], + ['titre' => 'Fondamentaux des systèmes Linux', 'types' => ['CM', 'TP', 'QCM'], 'heures' => 4], + ['titre' => 'Architecture des systèmes numériques', 'types' => ['CM', 'TD', 'QCM'], 'heures' => 3], + ['titre' => 'Transmission et supports physiques', 'types' => ['CM', 'TD', 'QCM'], 'heures' => 3], + ['titre' => 'Bases de la programmation', 'types' => ['CM', 'TD', 'TP', 'QCM'], 'heures' => 4], + ], + ], + [ + 'titre' => 'Semestres 3 et 4', + 'cours' => [ + ['titre' => 'Routage dynamique OSPF', 'types' => ['CM', 'TD', 'TP', 'QCM'], 'heures' => 4], + ['titre' => 'Services réseaux : DNS, mail, web', 'types' => ['CM', 'TP', 'QCM'], 'heures' => 4], + ['titre' => 'Réseaux d’opérateurs : BGP et MPLS', 'types' => ['CM', 'TP', 'QCM'], 'heures' => 4], + ['titre' => 'Supervision et métrologie', 'types' => ['CM', 'TP', 'QCM'], 'heures' => 3], + ['titre' => 'Automatiser avec Ansible', 'types' => ['CM', 'TP', 'QCM'], 'heures' => 4], + ], + ], + [ + 'titre' => 'Parcours Cybersécurité et DevCloud', + 'cours' => [ + ['titre' => 'Cryptographie appliquée : PKI et certificats', 'types' => ['CM', 'TD', 'TP', 'QCM'], 'heures' => 4], + ['titre' => 'Conteneurs Docker et orchestration', 'types' => ['CM', 'TP', 'QCM'], 'heures' => 4], + ['titre' => 'Auditer la sécurité d’un réseau', 'types' => ['CM', 'TP', 'QCM'], 'heures' => 4], + ], + ], + ], + ], + [ + 'id' => 'tssr', + 'nom' => 'Titre pro TSSR', + 'sous_titre' => 'Technicien supérieur systèmes et réseaux · niveau 5', + 'couleur' => 'bg-white', + 'blocs' => [ + [ + 'titre' => 'CCP 1 · Assister les utilisateurs', + 'cours' => [ + ['titre' => 'Mettre en service un poste client', 'types' => ['TP', 'QCM'], 'heures' => 2], + ['titre' => 'Diagnostiquer une panne réseau', 'types' => ['TD', 'TP', 'QCM'], 'heures' => 3], + ['titre' => 'Rédiger une procédure utilisateur', 'types' => ['CM', 'TD'], 'heures' => 2], + ], + ], + [ + 'titre' => 'CCP 2 · Infrastructure centralisée', + 'cours' => [ + ['titre' => 'Déployer un domaine Samba AD', 'types' => ['CM', 'TP', 'QCM'], 'heures' => 4], + ['titre' => 'Partages de fichiers et ACL', 'types' => ['CM', 'TP', 'QCM'], 'heures' => 3], + ['titre' => 'Sauvegardes avec restic', 'types' => ['CM', 'TP', 'QCM'], 'heures' => 2], + ['titre' => 'Superviser une infrastructure', 'types' => ['TP', 'QCM'], 'heures' => 3], + ], + ], + [ + 'titre' => 'CCP 3 · Infrastructure distribuée', + 'cours' => [ + ['titre' => 'Déployer des services dans le cloud', 'types' => ['CM', 'TP', 'QCM'], 'heures' => 3], + ['titre' => 'Docker Compose en production', 'types' => ['CM', 'TP', 'QCM'], 'heures' => 3], + ['titre' => 'Automatiser l’administration en Bash', 'types' => ['CM', 'TP', 'QCM'], 'heures' => 3], + ['titre' => 'VPN site à site', 'types' => ['CM', 'TP', 'QCM'], 'heures' => 3], + ], + ], + ], + ], + [ + 'id' => 'prog', + 'nom' => 'Programmation', + 'sous_titre' => 'Python, web, SQL, Bash, C · exercices dans l’IDE en ligne', + 'couleur' => 'bg-[#FF6FB5]', + 'blocs' => [ + [ + 'titre' => 'Python · les bases', + 'cours' => [ + ['titre' => 'Variables et types', 'types' => ['CM', 'IDE', 'QCM'], 'heures' => 2, 'exercice' => 'py-pair'], + ['titre' => 'Conditions : if, elif, else', 'types' => ['CM', 'TD', 'IDE', 'QCM'], 'heures' => 2, 'exercice' => 'py-pair'], + ['titre' => 'Boucles for et while', 'types' => ['CM', 'TD', 'IDE', 'QCM'], 'heures' => 3, 'exercice' => 'py-somme'], + ['titre' => 'Fonctions et paramètres', 'types' => ['CM', 'IDE', 'QCM'], 'heures' => 3, 'exercice' => 'py-pair'], + ['titre' => 'Listes et tuples', 'types' => ['CM', 'TD', 'IDE', 'QCM'], 'heures' => 3, 'exercice' => 'py-somme'], + ['titre' => 'Chaînes de caractères', 'types' => ['CM', 'IDE', 'QCM'], 'heures' => 2, 'exercice' => 'py-voyelles'], + ['titre' => 'Dictionnaires', 'types' => ['CM', 'IDE', 'QCM'], 'heures' => 2, 'exercice' => 'py-voyelles'], + ['titre' => 'Lire et écrire des fichiers CSV', 'types' => ['CM', 'IDE', 'QCM'], 'heures' => 2, 'exercice' => 'py-somme'], + ], + ], + [ + 'titre' => 'Python · aller plus loin', + 'cours' => [ + ['titre' => 'Récursivité', 'types' => ['CM', 'TD', 'IDE', 'QCM'], 'heures' => 3, 'exercice' => 'py-somme'], + ['titre' => 'Programmation orientée objet', 'types' => ['CM', 'IDE', 'QCM'], 'heures' => 4, 'exercice' => 'py-pair'], + ['titre' => 'Algorithmes de tri', 'types' => ['CM', 'TD', 'IDE', 'QCM'], 'heures' => 3, 'exercice' => 'py-somme'], + ['titre' => 'Recherche dichotomique', 'types' => ['CM', 'TD', 'IDE', 'QCM'], 'heures' => 2, 'exercice' => 'py-somme'], + ['titre' => 'Tester son code avec assert', 'types' => ['CM', 'IDE', 'QCM'], 'heures' => 2, 'exercice' => 'py-pair'], + ['titre' => 'Sockets : un client réseau en Python', 'types' => ['CM', 'TP', 'QCM'], 'heures' => 3], + ], + ], + [ + 'titre' => 'Web', + 'cours' => [ + ['titre' => 'HTML : structurer une page', 'types' => ['CM', 'IDE', 'QCM'], 'heures' => 2, 'exercice' => 'web-bouton'], + ['titre' => 'CSS : flexbox et grid', 'types' => ['CM', 'IDE', 'QCM'], 'heures' => 3, 'exercice' => 'web-bouton'], + ['titre' => 'JavaScript et le DOM', 'types' => ['CM', 'TD', 'IDE', 'QCM'], 'heures' => 3, 'exercice' => 'web-bouton'], + ['titre' => 'Formulaires et validation', 'types' => ['CM', 'IDE', 'QCM'], 'heures' => 2, 'exercice' => 'web-bouton'], + ['titre' => 'API REST et JSON avec fetch', 'types' => ['CM', 'IDE', 'QCM'], 'heures' => 3, 'exercice' => 'web-bouton'], + ['titre' => 'PHP côté serveur', 'types' => ['CM', 'TP', 'QCM'], 'heures' => 4], + ], + ], + [ + 'titre' => 'Bases de données', + 'cours' => [ + ['titre' => 'SELECT, WHERE, ORDER BY', 'types' => ['CM', 'TD', 'IDE', 'QCM'], 'heures' => 2, 'exercice' => 'sql-select'], + ['titre' => 'Agrégats et GROUP BY', 'types' => ['CM', 'TD', 'IDE', 'QCM'], 'heures' => 2, 'exercice' => 'sql-group'], + ['titre' => 'Jointures', 'types' => ['CM', 'TD', 'IDE', 'QCM'], 'heures' => 3, 'exercice' => 'sql-select'], + ['titre' => 'Créer des tables et des contraintes', 'types' => ['CM', 'IDE', 'QCM'], 'heures' => 2, 'exercice' => 'sql-select'], + ['titre' => 'Injection SQL : comprendre et s’en protéger', 'types' => ['CM', 'IDE', 'QCM'], 'heures' => 2, 'exercice' => 'sql-select'], + ], + ], + [ + 'titre' => 'Système et outils', + 'cours' => [ + ['titre' => 'Scripts Bash avancés', 'types' => ['CM', 'IDE', 'TP', 'QCM'], 'heures' => 3, 'exercice' => 'bash-tp'], + ['titre' => 'Expressions régulières', 'types' => ['CM', 'IDE', 'QCM'], 'heures' => 2, 'exercice' => 'bash-tp'], + ['titre' => 'Git : versionner son code', 'types' => ['CM', 'TP', 'QCM'], 'heures' => 3], + ['titre' => 'Langage C : pointeurs et mémoire', 'types' => ['CM', 'TD', 'TP', 'QCM'], 'heures' => 4], + ], + ], + ], + ], +]; diff --git a/design/css/syllabus-theme.css b/design/css/syllabus-theme.css new file mode 100644 index 0000000..793b0c9 --- /dev/null +++ b/design/css/syllabus-theme.css @@ -0,0 +1,151 @@ +/* Syllabus — thème global. Surcharge les anciennes classes néo-brutalistes pour appliquer la DA "SaaS doux" de la bibliothèque v2. */ +@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700;800&display=swap'); +:root { --sy-bg:#f5f6f8; --sy-surface:#fff; --sy-line:#b8c1cf; --sy-ink:#111827; --sy-muted:#6b7280; --sy-blue:#1d5cf5; --sy-blue-dark:#174bd0; --sy-navy:#1e3a8a; } +html, body { background: var(--sy-bg) !important; color: var(--sy-ink) !important; font-family: Mulish, system-ui, sans-serif !important; } +body * { font-family: inherit; } +code, pre, kbd, .font-mono, [class*="font-mono"] { font-family: ui-monospace, "IBM Plex Mono", Menlo, monospace !important; } +a { color: inherit; } a:hover { color: var(--sy-blue); } + +/* Bordures : fines et grises, coins arrondis */ +[class~="border-4"]:not([class~="border-transparent"]), [class~="border-2"]:not([class~="border-transparent"]), [class~="border"] { border-width: 1px !important; border-color: var(--sy-line) !important; } +[class~="border-b-4"], [class~="border-b-2"] { border-bottom-width: 1px !important; border-bottom-color: var(--sy-line) !important; } +[class~="border-t-4"], [class~="border-t-2"] { border-top-width: 1px !important; border-top-color: var(--sy-line) !important; } +[class~="border-r-2"], [class~="border-l-2"] { border-color: var(--sy-line) !important; } +[class~="divide-black"] > * + * { border-color: var(--sy-line) !important; } +section[class*="border"], article[class*="border"], aside[class*="border"], div[class~="border-4"], div[class~="border-2"], li[class~="border-2"], figure[class*="border"], details[class*="border"], table { border-radius: 12px; } +a[class~="border-2"], button[class~="border-2"], summary[class~="border-2"], span[class~="border-2"], input, select, textarea { border-radius: 6px !important; } +[class*="border-dashed"] { border-style: dashed !important; } + +/* Ombres dures → ombres douces ; plus de rotations ni de décors flottants */ +[class*="shadow-["] { box-shadow: 0 1px 3px rgba(17,24,39,.06) !important; } +[class*="hover:shadow-["]:hover { box-shadow: 0 6px 18px rgba(17,24,39,.08) !important; } +[class*="rotate-"], [class*="-rotate-"] { transform: none !important; } +[aria-hidden="true"][class*="absolute"][class*="pointer-events-none"] { display: none !important; } + +/* Palette : jaune/vert/rose/lavande fluo → pastels ; rouge/noir d'action → bleu */ +[class~="bg-[#FFD23F]"] { background-color: #dbe6ff !important; color: var(--sy-navy) !important; } +[class~="bg-[#7CF2C0]"] { background-color: #dcfce7 !important; color: #166534 !important; } +[class~="bg-[#FF6FB5]"] { background-color: #fce7f3 !important; color: #9d174d !important; } +[class~="bg-[#C4B5FD]"] { background-color: #ede4ff !important; color: #5b21b6 !important; } +[class~="bg-[#FFFBEA]"], [class~="bg-[#F6F5F1]"], [class*="hover:bg-[#FFFBEA]"]:hover { background-color: #f1f2f5 !important; } +[class~="bg-[#ec3013]"] { background-color: var(--sy-blue) !important; color: #fff !important; } +[class~="bg-black"]:not(pre):not([class*="h-2"]):not([class*="h-3"]):not([class*="h-full"]) { background-color: var(--sy-blue) !important; color: #fff !important; } +[class*="hover:bg-black"]:hover { background-color: var(--sy-blue-dark) !important; color: #fff !important; } +[class~="bg-[#13233A]"] { background-color: #0f172a !important; border-radius: 12px; } +[class*="text-[#b3001b]"], [class*="text-[#ec3013]"] { color: #b91c1c !important; } +[class~="bg-[#F6F5F1]"] { background-color: #f8f9fb !important; } +body > header, header[class*="border-b"] { background: #fff !important; box-shadow: 0 1px 0 var(--sy-line) !important; } + +/* Titres un peu moins massifs */ +h1[class*="font-black"] { letter-spacing: -0.015em !important; } +[class*="font-black"] { font-weight: 800 !important; } +[class*="uppercase"][class*="tracking-wider"] { color: var(--sy-muted); } + +/* Focus */ +:focus-visible { outline: 2px solid var(--sy-blue) !important; outline-offset: 2px; } + +/* États : page courante, menu ouvert, survol */ +[aria-current="page"][class*="aria-[current=page]:bg-[#FFD23F]"], details[open] > [class*="group-open:bg-[#FFD23F]"] { background-color: #dbe6ff !important; color: var(--sy-blue) !important; border-color: transparent !important; border-radius: 6px; } +[aria-current="page"][class*="aria-[current=page]:border-black"] { border-color: transparent !important; } +[class*="hover:bg-[#FFD23F]"]:hover { background-color: #dbe6ff !important; } +[class*="hover:border-black"]:hover { border-color: var(--sy-line) !important; } + +/* Ton posé : titres plus mesurés, moins de couleur, pas d'emoji ni d'effets */ +h1:not([style*="font-size"]) { font-size: clamp(28px, 3.2vw, 40px) !important; line-height: 1.15 !important; font-weight: 800 !important; } +h2:not([style*="font-size"]) { font-size: clamp(22px, 2.2vw, 28px) !important; line-height: 1.2 !important; } +h3:not([style*="font-size"]) { font-size: 18px !important; line-height: 1.3 !important; } +[class*="text-7xl"], [class*="text-8xl"], [class*="text-6xl"] { font-size: clamp(30px, 3.4vw, 42px) !important; line-height: 1.15 !important; } +[class*="text-5xl"] { font-size: clamp(26px, 2.6vw, 32px) !important; } +[class*="leading-[0.9"], [class*="leading-[0.8"] { line-height: 1.15 !important; } +[class*="tracking-tighter"] { letter-spacing: -0.01em !important; } +[class*="hover:-translate-y"]:hover, [class*="hover:translate"]:hover { transform: none !important; } +[class*="animate-"] { animation: none !important; } +section[class~="bg-[#ec3013]"], section[class~="bg-black"], div[class~="bg-black"][class*="p-8"], div[class~="bg-black"][class*="p-6"] { background: #fff !important; color: var(--sy-ink) !important; border: 1px solid var(--sy-line) !important; } +section[class~="bg-[#ec3013]"] *, div[class~="bg-black"][class*="p-8"] *, div[class~="bg-black"][class*="p-6"] * { color: inherit; } +[class*="bg-[#FFD23F]"][class*="px-3"][class*="uppercase"] { background: transparent !important; color: var(--sy-blue) !important; padding-left: 0 !important; box-shadow: none !important; border: 0 !important; } + +[class*="E6FF3F"],[class*="E8FF3C"]{background-color:#eef2ff!important;color:#1e3a8a!important} + +/* Contraste : fond de page plus sombre, contours visibles partout, traits fins */ +html, body { background: #eef1f5 !important; } +main section.bg-white, main section[class*="bg-white"] { background: #eef1f5 !important; } +[class*="border-4"], [class*="border-2"], [class*="border-black"], [class*="border-y-4"], [class*="border-t-4"], [class*="border-b-4"] { border-color: #b8c1cf !important; } +[class*="border-4"] { border-width: 1px !important; } +[class*="border-2"] { border-width: 1px !important; } +[class*="border-y-4"] { border-top-width: 1px !important; border-bottom-width: 1px !important; } +[class*="border-t-4"] { border-top-width: 1px !important; } +[class*="border-b-4"] { border-bottom-width: 1px !important; } +[class*="border-r-4"], [class*="border-l-4"] { border-width: 0 1px 0 0 !important; } +[class*="divide-black"] > * + * { border-color: #b8c1cf !important; } +main article, main figure, main li[class*="border"], main div[class*="border"][class*="bg-"] { box-shadow: 0 1px 2px rgba(17,24,39,.06), 0 2px 8px rgba(17,24,39,.05) !important; } +[class*="bg-white"][class*="border"], figure[style*="border"] { background: #fff !important; } +/* Badges collés aux cartes : dans le flux, alignés en haut */ +main article > span[class*="absolute"], main li > span[class*="absolute"], main div[class*="relative"] > span[class*="absolute"][class*="border"] { position: static !important; display: inline-block !important; margin: 0 0 12px 0 !important; transform: none !important; } + +header a, header summary, nav a, header [class*="border-transparent"], nav [class*="border-transparent"] { border-color: transparent !important; } +header a[aria-current="page"], header details[open] > summary { border-color: #bfd0f5 !important; } +header ul[class*="absolute"] { border: 1px solid #b8c1cf !important; } +main [class*="border-4"], main [class*="border-2"]:not([class*="border-transparent"]) { border-color: #b8c1cf !important; } +main li[class*="min-h-[340px]"] { min-height: 0 !important; } +main li[class*="min-h-[340px]"] > *:first-child + * { margin-top: 12px !important; } +h1 span[class*="bg-"] { background: transparent !important; border: 0 !important; padding: 0 !important; color: #1d4ed8 !important; } +[class*="border-transparent"] { border-color: transparent !important; } +[class*="border-transparent"][aria-current="page"], [class*="border-transparent"]:hover { border-color: transparent !important; background: #e8eefc !important; } +aside a[class*="border-black"][class*="bg-black"] { border-color: transparent !important; } + +/* === SOBRIÉTÉ (inspiration Google Workspace) : l'espace et la typographie structurent, un seul appel à l'action fort === */ +:root { --sy-ink:#0b1220; --sy-text:#3c4043; --sy-hair:#e3e5e8; --sy-soft:#f8f9fa; --sy-blue:#0b57d0; --sy-blue-dark:#0842a0; } +html, body { background:#fff !important; } +main p { color: var(--sy-text); } +main h1, main h2, main h3 { color: var(--sy-ink) !important; text-wrap: balance; } +main h1:not([style*="line-height"]) { font-weight:800 !important; line-height:1.06 !important; } +main p, main li { text-wrap: pretty; } + +/* Fonds : blanc, et un gris très léger pour alterner les sections */ +main section[class*="bg-"], main div[class~="bg-[#F6F5F1]"], main div[class~="bg-[#FFFBEA]"] { background-color:#fff !important; } +main section[class~="bg-[#F6F5F1]"], main section[class~="bg-[#FFFBEA]"] { background-color: var(--sy-soft) !important; } +main section { border-color: transparent !important; box-shadow:none !important; } + +/* Pages vitrine : beaucoup plus d'air */ +main > section > div[class*="py-"] { padding-top: clamp(64px, 9vw, 112px) !important; padding-bottom: clamp(64px, 9vw, 112px) !important; } +main > section > div[class*="max-w-"] > p[class*="text-xl"], main > section > div[class*="max-w-"] p[class*="text-lg"] { line-height:1.65 !important; } + +/* Cartes et encadrés : trait très fin, grands rayons, aucune ombre */ +[class~="border-4"]:not([class~="border-transparent"]), [class~="border-2"]:not([class~="border-transparent"]), [class~="border"] { border-color: var(--sy-hair) !important; } +main article[class*="border"], main li[class~="border-2"], main div[class~="border-2"], main div[class~="border-4"], main figure[class*="border"], main details[class*="border"] { border-radius:16px !important; } +[class*="shadow-["], [class*="shadow-md"], [class*="shadow-lg"] { box-shadow:none !important; } +[class*="rotate-"], [class*="-rotate-"], [class*="md:rotate"], [class*="md:-rotate"], [class*="translate-y-8"] { transform:none !important; } +main [aria-hidden="true"][class*="absolute"] { display:none !important; } + +/* Badges et pastilles : neutres, texte foncé */ +main span[class~="border-2"][class*="text-xs"], main span[class~="border-2"][class*="text-sm"][class*="px-2"], main span[class*="rounded-full"][class*="px-"] { background:#f1f3f4 !important; color:#3c4043 !important; border-color:transparent !important; border-radius:999px !important; } +[class~="bg-[#FFD23F]"], [class~="bg-[#7CF2C0]"], [class~="bg-[#FF6FB5]"], [class~="bg-[#C4B5FD]"] { background-color:#f1f3f4 !important; color:#202124 !important; } +main div[class*="bg-[#FFD23F]"][class*="p-"], main div[class*="bg-[#7CF2C0]"][class*="p-"], main div[class*="bg-[#C4B5FD]"][class*="p-"], main div[class*="bg-[#FF6FB5]"][class*="p-"] { background: var(--sy-soft) !important; } + +/* Boutons : pilules ; l'action principale en bleu plein, le reste en contour discret */ +a[class*="inline-flex"][class*="h-11"], a[class*="inline-flex"][class*="h-12"], a[class*="inline-flex"][class*="h-10"], button[class*="h-11"], button[class*="h-12"], button[class*="h-10"] { border-radius:999px !important; padding-left:24px !important; padding-right:24px !important; font-weight:700 !important; } +a[class~="bg-[#ec3013]"], button[class~="bg-[#ec3013]"], a[class~="bg-black"], button[class~="bg-black"] { background-color: var(--sy-blue) !important; border-color: var(--sy-blue) !important; color:#fff !important; } +a[class~="bg-[#ec3013]"]:hover, button[class~="bg-[#ec3013]"]:hover, a[class~="bg-black"]:hover, button[class~="bg-black"]:hover { background-color: var(--sy-blue-dark) !important; } +main a[class~="bg-white"][class*="inline-flex"], main button[class~="bg-white"][class*="h-"] { background:#fff !important; color: var(--sy-blue) !important; border:1px solid #dadce0 !important; } +main a[class~="bg-white"][class*="inline-flex"]:hover, main button[class~="bg-white"][class*="h-"]:hover { background:#f6f9fe !important; } + +/* En-tête : conservé, épuré */ +body > header { background:#fff !important; box-shadow:none !important; border-bottom:1px solid var(--sy-hair) !important; } +body > header nav a, body > header nav summary { font-weight:600 !important; color:#3c4043 !important; text-decoration:none !important; } +body > header nav a:hover, body > header nav summary:hover { color: var(--sy-ink) !important; background:transparent !important; } +body > header nav ul a[aria-current="page"] { color: var(--sy-blue) !important; background:transparent !important; } +body > header a[href*="inscription"] { background: var(--sy-blue) !important; color:#fff !important; border:0 !important; border-radius:999px !important; padding:0 22px !important; } +body > header a[href*="inscription"] > span[aria-hidden="true"] { display:none !important; } +body > header a[href*="inscription"]:hover { background: var(--sy-blue-dark) !important; color:#fff !important; } +body > header a[href*="connexion"] { border:0 !important; background:transparent !important; } + +[class*="text-[#FFD23F]"], [class*="text-[#7CF2C0]"], [class*="text-[#FF6FB5]"], [class*="text-[#C4B5FD]"], [class*="text-[#E6FF3F]"], [class*="text-[#E8FF3C]"] { color: var(--sy-blue) !important; } +main li[class*="min-h-[340px]"] { min-height:0 !important; aspect-ratio:auto !important; } +main li[class*="min-h-[340px]"] > div[class*="justify-between"] { justify-content:flex-start !important; gap:16px !important; padding-bottom:0 !important; } +main li[class*="min-h-[340px]"] > div > span[class*="self-end"] { align-self:flex-start !important; font-size:40px !important; color: var(--sy-blue) !important; } +body > header a[href*="connexion"] { border:0 !important; background:transparent !important; box-shadow:none !important; padding-left:8px !important; padding-right:8px !important; } + +main h1:not([style*="letter-spacing"]), main h2:not([style*="letter-spacing"]) { letter-spacing:-0.02em !important; } + +header a[style*="background:#0b57d0"], header a[style*="background: #0b57d0"], nav a[style*="background:#0b57d0"] { color: #fff !important; } +header a[style*="background:#0b57d0"]:hover, nav a[style*="background:#0b57d0"]:hover { color: #fff !important; background: #0842a0 !important; } diff --git a/design/image-slot.js b/design/image-slot.js new file mode 100644 index 0000000..e30189b --- /dev/null +++ b/design/image-slot.js @@ -0,0 +1,1225 @@ +// @ds-adherence-ignore -- omelette starter scaffold (raw elements/hex/px by design) +// Copied omelette starter. Re-running copy_starter_component with this kind overwrites this file with the latest version (page content is unaffected). +/* BEGIN USAGE */ +/** + * — user-fillable image placeholder. + * + * Drop this into a deck, mockup, or page wherever a design needs an image. + * You control the slot's shape; it sizes to its container by default. When the search_stock_photos tool + * is available, prefill the slot by default — write the photo's URL into + * src (with credit/credit-href); the user can still fill or replace it + * by dragging an image file onto it (or clicking to browse). The dropped + * image persists across reloads via a .image-slots.state.json sidecar — + * same read-via-fetch / write-via-window.omelette pattern as + * design_canvas.jsx, so the filled slot shows on share links, downloaded + * zips, and PPTX export. Outside the omelette runtime the slot is read-only. + * + * The sidecar is a SIBLING of the HTML file that uses this component: the + * read is a document-relative fetch, and the host resolves the bridge's + * sidecar writes into the previewed file's directory to match (same + * contract as design_canvas.jsx). Pages in the same directory share one + * sidecar; keep slot ids distinct across them. + * + * Attributes: + * id Persistence key. REQUIRED for the drop to survive reload — + * every slot on the page needs a distinct id. + * shape 'rect' | 'rounded' | 'circle' | 'pill' (default 'rounded') + * 'circle' applies 50% border-radius; on a non-square slot + * that's an ellipse — set equal width and height for a true + * circle. + * radius Corner radius in px for 'rounded'. (default 12) + * mask Any CSS clip-path value. Overrides `shape` — use this for + * hexagons, blobs, arbitrary polygons. + * fit Initial framing baseline: cover | contain. (default 'cover') + * cover starts the image filling the frame (overflow cropped); + * contain starts it fully visible (letterboxed). Either way the + * user can always pan/scale from there — double-click, or the + * Edit control, enters reframe mode (drag to move, scroll or + * corner-handles to scale; Escape / click-out commits). The + * crop persists alongside the image in the sidecar. + * placeholder Empty-state caption. (default 'Drop an image') + * src Optional initial/fallback image URL. Prefill it with a real + * photo via search_stock_photos when that tool is available + * (set credit/credit-href from the result). A user drop + * overrides it; clearing the drop reveals src again. + * credit Attribution text shown as a small overlay at the + * bottom-left of the filled slot. REQUIRED whenever src + * points at any Unsplash host (images.unsplash.com, + * plus.unsplash.com, …): an Unsplash src with no credit + * renders an error tile INSTEAD of the photo (Unsplash + * terms forbid showing their photos unattributed). Use the + * exact form 'Photo by {photographer name} on Unsplash' — + * the overlay then links the name to credit-href and + * 'Unsplash' to the Unsplash homepage, and links back to + * unsplash.com automatically get the required utm referral + * params appended at render time. The credit belongs to + * the src image, so it only shows while src is what's + * displayed — a user-dropped image hides it. + * credit-href Link for the photographer's name in the credit overlay + * (their Unsplash profile URL from the stock-photo search + * results). http(s) URLs only — anything else renders the + * name as plain text. + * + * Sizing: the slot fills its container by default (width/height 100%). + * Put it in a sized wrapper — absolutely positioned, a grid cell, a fixed + * frame — and it takes exactly that box. When the parent's height is + * indefinite (ordinary flow), it falls back to full width at a 3:2 aspect + * ratio instead of collapsing. In a shrink-to-fit parent (a float, + * width:max-content, an unsized absolute wrapper), percentages have + * nothing to resolve against — size the slot or its wrapper explicitly + * there. For a fixed-size slot, set + * width/height on the element itself (inline style), which overrides the + * default. When + * layering content above a slot (full-bleed layouts), make the overlay + * click-through — pointer-events: none on scrims/text plates, re-enabled + * on interactive children — so the slot's hover controls stay reachable. + * Keep the slot's bottom-left corner visually clear as well: the credit + * overlay renders there, and a dark fade or text plate covering it hides + * the attribution Unsplash's terms require — end the fade above that + * corner, or keep it nearly transparent where the credit sits. + * + * Usage: + *
                          + * + *
                          + * + * + * + */ +/* END USAGE */ + +(() => { + const STATE_FILE = '.image-slots.state.json'; + + // Unsplash terms require visible attribution wherever their photos + // display, and every link back to unsplash.com must carry utm referral + // params. Two render-time rules enforce that here: + // - an Unsplash-src slot with NO credit attribute renders an error + // tile INSTEAD of the photo (an uncredited Unsplash photo on screen + // is itself the terms violation, so it never renders bare); + // - rendered credit links pointing at unsplash.com get the referral + // params appended when absent (credit-href values live in page + // content that can't be edited after the fact). + // Keep the utm_source value in sync with UTM_SOURCE in + // platform/web-agent/unsplash.ts — this file is a project-local + // artifact and cannot import it (equality is pinned by tests). + const UNSPLASH_HOMEPAGE_HREF = + 'https://unsplash.com/?utm_source=claude_design&utm_medium=referral'; + // Host rule mirrors the hotlink validator that admits Unsplash srcs into + // pages in the first place (cdn$ in unsplash.ts: apex or any subdomain) + // — Unsplash+ results serve from plus.unsplash.com, not just images.*, + // and an admitted-but-uncredited photo must error whatever unsplash + // host it rides on. + // Trailing-dot FQDNs (images.unsplash.com.) are the same host to the + // browser but would miss the regex — strip one dot so the check fails + // CLOSED (unrecognized-but-real Unsplash srcs must error, not render). + const isUnsplashHost = (u) => { + try { + return /(^|\.)unsplash\.com$/.test( + new URL(u, document.baseURI).hostname.replace(/\.$/, '') + ); + } catch { + return false; + } + }; + // Render-time referral normalization for links back to Unsplash: + // appends utm_source/utm_medium when absent, preserves every existing + // query param, never overwrites an existing utm_source, and passes + // non-Unsplash URLs through untouched. Input is an ABSOLUTE validated + // http(s) URL (the credit render funnel resolves + validates first). + const withReferral = (href) => { + try { + const u = new URL(href); + if (!/(^|\.)unsplash\.com$/.test(u.hostname.replace(/\.$/, ''))) { + return href; + } + if (!u.searchParams.has('utm_source')) { + u.searchParams.set('utm_source', 'claude_design'); + } + if (!u.searchParams.has('utm_medium')) { + u.searchParams.set('utm_medium', 'referral'); + } + return u.toString(); + } catch (e) { + return href; + } + }; + // 2× a ~600px slot in a 1920-wide deck — retina-sharp without making the + // sidecar enormous. A 1200px WebP at q=0.85 is ~150-300KB. + const MAX_DIM = 1200; + // Raster formats only. SVG is excluded (can carry script; createImageBitmap + // on SVG blobs is inconsistent). GIF is excluded because the canvas + // re-encode keeps only the first frame, so an animated GIF would silently + // go still — better to reject than surprise. + const ACCEPT = ['image/png', 'image/jpeg', 'image/webp', 'image/avif']; + + // ── Shared sidecar store ──────────────────────────────────────────────── + // One fetch + immediate write-on-change for every on the + // page. Reads via fetch() so viewing works anywhere the HTML and sidecar + // are served together; writes go through window.omelette.writeFile, which + // the host allowlists to *.state.json basenames only. + const subs = new Set(); + let slots = {}; + // ids explicitly cleared before the sidecar fetch resolved — otherwise + // the merge below can't tell "never set" from "just deleted" and would + // resurrect the sidecar's stale value. + const tombstones = new Set(); + let loaded = false; + let loadP = null; + + function load() { + if (loadP) return loadP; + loadP = fetch(STATE_FILE) + .then((r) => (r.ok ? r.json() : null)) + .then((j) => { + // Merge: sidecar loses to any in-memory change that raced ahead of + // the fetch (drop or clear) so neither is clobbered by hydration. + if (j && typeof j === 'object') { + const merged = Object.assign({}, j, slots); + // A framing-only write that raced ahead of hydration must not + // drop a user image that's only on disk — inherit u from the + // sidecar for any in-memory entry that lacks one. + for (const k in slots) { + if (merged[k] && !merged[k].u && j[k]) { + merged[k].u = typeof j[k] === 'string' ? j[k] : j[k].u; + } + } + for (const id of tombstones) delete merged[id]; + slots = merged; + } + tombstones.clear(); + }) + .catch(() => {}) + .then(() => { loaded = true; subs.forEach((fn) => fn()); }); + return loadP; + } + + // Serialize writes so two near-simultaneous drops on different slots + // can't reorder at the backend and leave the sidecar with only the + // first. A save requested mid-flight just marks dirty and re-fires on + // completion with the then-current slots. + let saving = false; + let saveDirty = false; + // Unload-time flush: save()'s serialization defers a mid-RTT re-fire to a + // .then that never runs in an unloading document, silently dropping a + // pagehide commit. Post the current slots immediately instead — content + // is a superset snapshot of any in-flight save's, the write is a + // whole-file last-writer-wins replace, and postMessage FIFO delivers it + // to the host after the in-flight one, so a backend-side reorder at + // worst reproduces the dropped-commit outcome this flush improves on. + // Guarded on the initial sidecar read: pre-hydration slots can miss + // other slots' persisted entries, and flushing it would clobber them — + // that narrow case stays best-effort (the in-memory merge in load() + // cannot happen in an unloading document anyway). + function flushNow() { + if (!loaded) return; + const w = window.omelette && window.omelette.writeFile; + if (!w) return; + try { Promise.resolve(w(STATE_FILE, JSON.stringify(slots))).catch(() => {}); } catch (e) {} + } + function save() { + if (saving) { saveDirty = true; return; } + const w = window.omelette && window.omelette.writeFile; + if (!w) return; + saving = true; + Promise.resolve(w(STATE_FILE, JSON.stringify(slots))) + .catch(() => {}) + .then(() => { saving = false; if (saveDirty) { saveDirty = false; save(); } }); + } + + const S_MAX = 5; + const clampS = (s) => Math.max(1, Math.min(S_MAX, s)); + + // Normalize a stored slot value. Pre-reframe sidecars stored a bare + // data-URL string; newer ones store {u, s, x, y}. Either shape is valid. + function getSlot(id) { + const v = slots[id]; + if (!v) return null; + return typeof v === 'string' ? { u: v, s: 1, x: 0, y: 0 } : v; + } + + function setSlot(id, val) { + if (!id) return; + if (val) { slots[id] = val; tombstones.delete(id); } + else { delete slots[id]; if (!loaded) tombstones.add(id); } + subs.forEach((fn) => fn()); + // A drop is rare + high-value — write immediately so nav-away can't lose + // it. Gate on the initial read so we don't overwrite a sidecar we haven't + // merged yet; the merge in load() keeps this change once the read lands. + if (loaded) save(); else load().then(save); + } + + // ── Image downscale ───────────────────────────────────────────────────── + // Encode through a canvas so the sidecar carries resized bytes, not the + // raw upload. Longest side is capped at 2× the slot's rendered width + // (retina) and at MAX_DIM. WebP keeps alpha and is ~10× smaller than PNG + // for photos, so there's no need for per-image format picking. + async function toDataUrl(file, targetW) { + const bitmap = await createImageBitmap(file); + try { + const cap = Math.min(MAX_DIM, Math.max(1, Math.round(targetW * 2)) || MAX_DIM); + const scale = Math.min(1, cap / Math.max(bitmap.width, bitmap.height)); + const w = Math.max(1, Math.round(bitmap.width * scale)); + const h = Math.max(1, Math.round(bitmap.height * scale)); + const canvas = document.createElement('canvas'); + canvas.width = w; canvas.height = h; + canvas.getContext('2d').drawImage(bitmap, 0, 0, w, h); + return canvas.toDataURL('image/webp', 0.85); + } finally { + bitmap.close && bitmap.close(); + } + } + + // ── Custom element ────────────────────────────────────────────────────── + const stylesheet = + // Fill the container by default: slots are usually placed inside a + // sized wrapper (a hero frame, a grid cell, an inset:0 layer) and are + // expected to take that box — a fixed intrinsic size would render as + // a small tile in the corner of a full-bleed wrapper instead. + // aspect-ratio is the companion fallback that keeps a bare slot + // visible when the parent's height is indefinite: height:100% + // resolves to auto there, and the ratio then derives height from + // width instead of letting the slot collapse to zero height. + // Explicit width/height on the element override all of this. + // color:inherit (not a fixed near-black): the placeholder chrome — + // empty-state icon/caption (currentColor) and the dashed ring — must + // read on dark decks too, and the slide's own text color is the one + // color guaranteed to contrast with the slide background. The soft + // look comes from opacity on those parts, not from a baked-in alpha. + ':host{display:block;position:relative;' + + ' font:13px/1.3 system-ui,-apple-system,sans-serif;' + + ' width:100%;height:100%;aspect-ratio:3/2}' + + '.empty .cap,.empty .sub{opacity:.75}' + + '.frame{position:absolute;inset:0;overflow:hidden;background:rgba(127,127,127,.08)}' + + // .frame img (clipped) and .spill (unclipped ghost + handles) share the + // same left/top/width/height in frame-%, computed by _applyView(), so the + // inside-mask crop and the outside-mask spill stay pixel-aligned. + '.frame img{position:absolute;max-width:none;transform:translate(-50%,-50%);' + + ' -webkit-user-drag:none;user-select:none;touch-action:none}' + + // Reframe mode (double-click): the full image spills past the mask. The + // spill layer is sized to the IMAGE bounds so its corners are where the + // resize handles belong. The ghost inside is translucent; the real + // clipped underneath shows the opaque in-mask crop. + // popover=manual promotes the spill to the top layer on reframe, so it is + // not clipped by any overflow:hidden / clip-path / scroll-container + // ancestor (a plain z-index can't escape overflow clipping). UA popover + // defaults (inset:0;margin:auto) are reset; _applyView sets viewport px. + '.spill{position:fixed;margin:0;inset:auto;border:0;padding:0;background:transparent;' + + ' overflow:visible;transform:translate(-50%,-50%);z-index:1;cursor:grab;touch-action:none}' + + ':host([data-panning]) .spill{cursor:grabbing}' + + '.spill .ghost{position:absolute;inset:0;width:100%;height:100%;opacity:.35;' + + ' pointer-events:none;-webkit-user-drag:none;user-select:none;' + + ' box-shadow:0 0 0 1px rgba(0,0,0,.2),0 12px 32px rgba(0,0,0,.2)}' + + '.spill .handle{position:absolute;width:12px;height:12px;border-radius:50%;' + + ' background:#fff;box-shadow:0 0 0 1.5px #c96442,0 1px 3px rgba(0,0,0,.3);' + + ' transform:translate(-50%,-50%)}' + + '.spill .handle[data-c=nw]{left:0;top:0;cursor:nwse-resize}' + + '.spill .handle[data-c=ne]{left:100%;top:0;cursor:nesw-resize}' + + '.spill .handle[data-c=sw]{left:0;top:100%;cursor:nesw-resize}' + + '.spill .handle[data-c=se]{left:100%;top:100%;cursor:nwse-resize}' + + ':host([data-reframe]){z-index:10}' + + ':host([data-reframe]) .frame{box-shadow:0 0 0 2px #c96442}' + + '.empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;' + + ' justify-content:center;gap:6px;text-align:center;padding:12px;box-sizing:border-box;' + + ' cursor:pointer;user-select:none}' + + '.empty svg{opacity:.45}' + + '.empty .cap{max-width:90%;font-weight:500;letter-spacing:.01em}' + + '.empty .sub{font-size:11px}' + + '.empty .sub u{text-underline-offset:2px}' + + '.empty:hover .sub{opacity:1}' + + ':host([data-over]) .frame{outline:2px solid #c96442;outline-offset:-2px;' + + ' background:rgba(201,100,66,.10)}' + + '.ring{position:absolute;inset:0;pointer-events:none;border:1.5px dashed currentColor;' + + ' opacity:.35;transition:border-color .12s,opacity .12s}' + + ':host([data-over]) .ring{border-color:#c96442;opacity:1}' + + ':host([data-filled]) .ring{display:none}' + + // Controls overlay INSIDE the frame, pinned to the top-right corner, so + // a full-bleed slot in an overflow:hidden container still shows them + // (the old below-mask placement got clipped). Credit sits bottom-left, + // so top-right avoids collision. The blurred pill background keeps them + // legible over the image. + // The UA [popover] base rule styles the element in EVERY state (only + // display:none is gated on :not(:popover-open), and the display:flex + // below overrides that) — so the UA resets live HERE, like .spill's, + // or the ordinary hover-state strip renders as a bordered Canvas box + // centered by margin:auto. inset:auto precedes top/right (shorthand). + '.ctl{position:absolute;inset:auto;top:8px;right:8px;margin:0;border:0;padding:0;' + + ' background:transparent;overflow:visible;' + + ' display:flex;gap:6px;opacity:0;pointer-events:none;transition:opacity .12s;z-index:2;' + + ' white-space:nowrap}' + + // While reframing, the spill owns the top layer and would swallow every + // click on the in-frame controls. Promoting .ctl into the top layer + // ABOVE the spill (shown after it — later popovers stack higher) keeps + // Edit-as-toggle and Replace clickable mid-reframe. _applyView pins it + // to the frame's top-right in viewport px (translateX(-100%) + // right-aligns against the computed left edge); inset:auto clears the + // base rule's top/right so the inline left/top position it alone. + '.ctl:popover-open{position:fixed;inset:auto;transform:translateX(-100%)}' + + ':host([data-filled][data-editable]:hover) .ctl,:host([data-reframe]) .ctl' + + ' {opacity:1;pointer-events:auto}' + + '.ctl button{appearance:none;border:0;border-radius:6px;padding:5px 10px;cursor:pointer;' + + ' background:rgba(0,0,0,.65);color:#fff;font:11px/1 system-ui,-apple-system,sans-serif;' + + ' backdrop-filter:blur(6px)}' + + '.ctl button:hover{background:rgba(0,0,0,.8)}' + + '.err{position:absolute;left:8px;bottom:8px;right:8px;color:#b3261e;font-size:11px;' + + ' background:rgba(255,255,255,.85);padding:4px 6px;border-radius:5px;pointer-events:none}' + + // Replacement in flight: after a src swap the browser keeps painting + // the PREVIOUS image until the new one decodes, so a Replace would + // flash the old photo and then pop. Hide the stale frame (visibility, + // not display — _applyView geometry still applies) and spin until the + // new image reports in (load/error clears data-swapping). + ':host([data-swapping]) .frame img{visibility:hidden}' + + '.loading{position:absolute;inset:0;display:none;align-items:center;' + + ' justify-content:center;pointer-events:none}' + + ':host([data-swapping]) .loading{display:flex}' + + '.loading::after{content:"";width:22px;height:22px;border-radius:50%;' + + ' border:2px solid rgba(127,127,127,.25);border-top-color:currentColor;' + + ' animation:om-slot-spin .7s linear infinite}' + + '@keyframes om-slot-spin{to{transform:rotate(360deg)}}' + + // Reduced motion: the static two-tone ring still reads as "working". + '@media (prefers-reduced-motion:reduce){.loading::after{animation:none}}' + + '.credit{position:absolute;left:6px;bottom:6px;max-width:calc(100% - 12px);display:none;' + + ' padding:3px 7px;border-radius:5px;background:rgba(0,0,0,.55);color:#fff;' + + ' font:10px/1.2 system-ui,-apple-system,sans-serif;text-decoration:none;' + + ' white-space:nowrap;overflow:hidden;text-overflow:ellipsis;backdrop-filter:blur(6px)}' + + // The credit is a SPAN holding one or two s (Unsplash's prescribed + // form links the photographer AND Unsplash) — anchors style inline so + // the overlay reads as one line of text. + '.credit a{color:inherit;text-decoration:none}' + + '.credit a:hover,.credit a:focus-visible{text-decoration:underline}' + + ':host([data-filled][data-credit]) .credit{display:block}' + + // Exports must ship JUST the image — no hover controls, no credit chip + // (the host marks for the capture window; the + // page-level hide script can't reach shadow DOM, this rule can). + ':host-context([data-om-exporting]) .ctl,' + + ':host-context([data-om-exporting]) .credit{display:none !important}' + + // Print must ship just the image too: the hover-gated controls can be + // mid-hover when print() fires, and the credit chip is screen chrome — + // the same rule the capture window gets, keyed on print media instead + // of the host's data-om-exporting mark (the print path sets no mark). + '@media print{.ctl,.credit{display:none !important}}' + + // No export-window mask rules here on purpose: the export capture + // releases the replacement mask by REMOVING data-swapping (the + // shadow-root pass in pages/export/shared.ts HIDE_EXPORT_CHROME_SCRIPT) + // — attribute removal works in every engine (:host-context is + // Chromium-only), is scoped by construction to slots actually + // mid-swap, and hides the spinner through the same gate. A masked img + // would otherwise be silently dropped from PPTX decks (the capture + // walk skips visibility:hidden imgs). + // Attribution error tile: REPLACES the photo when an Unsplash src has + // no credit attribute — rendering the photo uncredited is the terms + // violation, so the photo must not appear at all. + // Calm and neutral on purpose (review feedback): the tile informs the + // user; the fix instructions are machine-facing (usage docblock, tool + // description, and the turn-end scan's bounce copy name the attributes + // for the agent). + '.attr-error{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;' + + ' justify-content:center;gap:6px;text-align:center;padding:12px;box-sizing:border-box;' + + ' background:#f2f1ef;color:#6e6c66;user-select:none;' + + ' font:13px/1.45 system-ui,-apple-system,sans-serif}' + + '.attr-error svg{opacity:.55}' + + '.attr-error .cap{max-width:92%;font-weight:500;letter-spacing:.01em}' + + ':host([data-attribution-error]) .attr-error{display:flex}' + + ':host([data-attribution-error]) .ring{display:none}'; + + const icon = + '' + + '' + + ''; + + const warnIcon = + '' + + '' + + ''; + + class ImageSlot extends HTMLElement { + static get observedAttributes() { + return ['shape', 'radius', 'mask', 'fit', 'placeholder', 'src', 'id', 'credit', 'credit-href']; + } + + /** Duplicate-slide hook (called by deck-stage, see its + * _remintDuplicateIds): copy this id's stored image, if any, under a + * freshly minted key and return that key — so a duplicated slide's + * slot keeps its dropped photo instead of reverting to the + * placeholder. 'isFree' is the caller's uniqueness check (document + * ids); candidates must ALSO be unused in the sidecar, which can + * hold keys from other pages sharing the project root. (An EMPTY + * slot on another page leaves no sidecar entry, so its id is not + * detectable here — a minted key can collide with it and that slot + * would show this photo. Same blast radius as two pages reusing an + * id by hand, which the shared sidecar already permits.) Returns null + * when no id could be minted (caller strips the id, today's + * behavior). */ + static cloneSlot(fromId, isFree) { + if (typeof fromId !== 'string' || !fromId) return null; + // Pre-hydration the store can't veto candidates or source the copy + // — degrade to the strip (today's behavior) rather than mint + // against keys we can't see yet. Any rendered (= droppable) slot + // means load() has already settled. + if (!loaded) return null; + const stem = fromId.replace(/-\d+$/, '') || fromId; + for (let n = 2; n < 100; n++) { + const toId = stem + '-' + n; + if (toId === fromId) continue; + if (slots[toId] !== undefined) { + // Reuse a key holding this exact value (bytes AND crop) if no + // live element here owns it — a duplicate op the host refused + // after minting leaves such a key behind, and reusing keeps + // refused retries from accumulating one orphaned copy per + // attempt. Full equality (not just bytes) so a byte-identical + // key another PAGE owns with its own crop is stepped past, not + // adopted or rewritten. (Entries without .u never match.) + const prev = getSlot(toId); + const cur = getSlot(fromId); + if (!(prev && cur && prev.u && prev.u === cur.u && + prev.s === cur.s && prev.x === cur.x && prev.y === cur.y && + (typeof isFree !== 'function' || isFree(toId)))) continue; + return toId; + } + if (typeof isFree === 'function' && !isFree(toId)) continue; + const v = getSlot(fromId); + if (v) setSlot(toId, Object.assign({}, v)); + return toId; + } + return null; + } + + constructor() { + super(); + // clonable: rail thumbnails deep-clone slides and carry this shadow + // along; reuse an already-cloned root so upgrade-after-clone works. + // (Deliberately NOT serializable — a getHTML consumer would embed + // multi-MB sidecar data-URLs into serialized page HTML.) + const root = this.shadowRoot || + this.attachShadow({ mode: 'open', clonable: true }); + // .spill and .ctl sit OUTSIDE .frame so overflow:hidden + border-radius + // on the frame (circle, pill, rounded) can't clip them. + root.innerHTML = + '' + + '
                          ' + + ' ' + + '
                          ' + icon + + '
                          ' + + '
                          or browse files
                          ' + + '
                          ' + warnIcon + + '
                          This photo needs attribution
                          ' + + '
                          ' + + '
                          ' + + '
                          ' + + // Outside .frame, like .spill/.ctl — the frame's overflow:hidden + + // border-radius/clip-path would cut the credit off on circle/pill/mask. + // A SPAN, not an                           : the prescribed Unsplash credit holds two links + // (photographer + Unsplash), built per-render in _render(). + '' + + '
                          ' + + ' ' + + '
                          ' + + '
                          ' + + '
                          ' + + // data-dc-edit-transparent: the DC editor's edit-mode picker lets + // clicks through for chrome marked with it (EDIT_TRANSPARENT_SEL) + // — without it, Replace/Edit clicks in Edit mode are swallowed by + // element selection and the controls look dead. + '
                          ' + + '
                          ' + + ''; + this._frame = root.querySelector('.frame'); + this._ring = root.querySelector('.ring'); + this._img = root.querySelector('.frame img'); + this._empty = root.querySelector('.empty'); + this._cap = root.querySelector('.cap'); + this._sub = root.querySelector('.sub'); + this._spill = root.querySelector('.spill'); + this._ctl = root.querySelector('.ctl'); + this._credit = root.querySelector('.credit'); + this._attrError = root.querySelector('.attr-error'); + // Credit clicks open the link, not browse/reframe. + this._credit.addEventListener('click', (e) => e.stopPropagation()); + this._credit.addEventListener('dblclick', (e) => e.stopPropagation()); + this._ghost = root.querySelector('.ghost'); + this._err = null; + this._input = root.querySelector('input'); + this._depth = 0; + this._gen = 0; + // Encode-in-flight marker (the owning _ingest generation): while set, + // the same-src "nothing in flight" clear in _render must not fire — + // the stored value still points at the OLD image until the encode + // lands, so that clear would unmask the stale image mid-replace. + this._swapGen = 0; + // Render-owned swap in flight: set when _render assigns a new src, + // cleared only by the img's own load/error (or the empty branch). + // img.complete CANNOT stand in for this — setting src only QUEUES + // the current-request swap (a microtask), so synchronously after an + // assignment, complete still reports the OLD settled request. The + // pick path does exactly that: the host sets src, credit, and + // credit-href back-to-back in one task, and renders #2/#3 would + // read the stale complete === true and drop the mask one render + // after it was set. + this._loadPending = false; + // See _render's empty branch: a transient attribution-error wipe of a + // showing image must make the follow-up render a replacement (spinner), + // not a first fill (blank frame). + this._hidShowing = false; + this._view = { s: 1, x: 0, y: 0 }; + this._subFn = () => this._render(); + // Shadow-DOM listeners live with the shadow DOM — bound once here so + // disconnect/reconnect (e.g. React remount) doesn't stack handlers. + this._empty.addEventListener('click', () => this._input.click()); + root.addEventListener('click', (e) => { + const act = e.target && e.target.getAttribute && e.target.getAttribute('data-act'); + if (!act) return; + // The hidden controls are opacity-0 but still tabbable — without + // this gate a keyboard user could drive them on a read-only share + // link (mirrors the dblclick handler's editable gate). + if (!this.hasAttribute('data-editable')) return; + if (act === 'replace') { + this._exitReframe(true); + // Host-owned picker (Unsplash modal; it also offers local import). + this.dispatchEvent(new CustomEvent('image-slot:pick', { + bubbles: true, composed: true, detail: { id: this.id || null } + })); + } + if (act === 'edit') { + if (!this._reframes()) return; + if (this.hasAttribute('data-reframe')) this._exitReframe(true); + else this._enterReframe(); + } + }); + this._input.addEventListener('change', () => { + const f = this._input.files && this._input.files[0]; + if (f) this._ingest(f); + this._input.value = ''; + }); + // naturalWidth/Height aren't known until load — re-apply so the cover + // baseline is computed from real dimensions, not the 100%×100% fallback. + // load/error also release the replacement-in-flight mask (via the + // single discipline in _releaseMask): the swap is only revealed once + // the new image can actually paint (on error the frame shows its + // background, same as a fresh slot with a broken src). + this._img.addEventListener('load', () => { + this._loadPending = false; + this._releaseMask(true); + this._applyView(); + }); + this._img.addEventListener('error', () => { + this._loadPending = false; + this._releaseMask(true); + }); + // Gated only on editable — any filled slot can be repositioned/scaled, + // regardless of fit. Share links (no writeFile) stay static. + this.addEventListener('dblclick', (e) => { + if (!this.hasAttribute('data-editable') || !this._reframes()) return; + e.preventDefault(); + if (this.hasAttribute('data-reframe')) this._exitReframe(true); + else this._enterReframe(); + }); + // Pan + resize both originate on the spill layer. A handle pointerdown + // drives an aspect-locked resize anchored at the opposite corner; any + // other pointerdown on the spill pans. Offsets are frame-% so a + // reframed slot survives responsive resize / PPTX export. + this._spill.addEventListener('pointerdown', (e) => { + if (e.button !== 0 || !this.hasAttribute('data-reframe')) return; + e.preventDefault(); + e.stopPropagation(); + this._spill.setPointerCapture(e.pointerId); + const rect = this.getBoundingClientRect(); + const fw = rect.width || 1, fh = rect.height || 1; + const corner = e.target.getAttribute && e.target.getAttribute('data-c'); + let move; + if (corner) { + // Resize about the OPPOSITE corner. Viewport-px throughout (rect + // fw/fh, not clientWidth) so the math survives a transform:scale() + // ancestor — deck_stage renders slides scaled-to-fit. + const iw = this._img.naturalWidth || 1, ih = this._img.naturalHeight || 1; + const contain = (this.getAttribute('fit') || 'cover').toLowerCase() === 'contain'; + const base = contain ? Math.min(fw / iw, fh / ih) : Math.max(fw / iw, fh / ih); + const sx = corner.includes('e') ? 1 : -1; + const sy = corner.includes('s') ? 1 : -1; + const s0 = this._view.s; + const w0 = iw * base * s0, h0 = ih * base * s0; + const cx0 = (50 + this._view.x) / 100 * fw; + const cy0 = (50 + this._view.y) / 100 * fh; + const ox = cx0 - sx * w0 / 2, oy = cy0 - sy * h0 / 2; + const diag0 = Math.hypot(w0, h0); + const ux = sx * w0 / diag0, uy = sy * h0 / diag0; + move = (ev) => { + const proj = (ev.clientX - rect.left - ox) * ux + + (ev.clientY - rect.top - oy) * uy; + const s = clampS(s0 * proj / diag0); + const d = diag0 * s / s0; + this._view.s = s; + this._view.x = (ox + ux * d / 2) / fw * 100 - 50; + this._view.y = (oy + uy * d / 2) / fh * 100 - 50; + this._clampView(); + this._applyView(); + }; + } else { + this.setAttribute('data-panning', ''); + const start = { px: e.clientX, py: e.clientY, x: this._view.x, y: this._view.y }; + move = (ev) => { + this._view.x = start.x + (ev.clientX - start.px) / fw * 100; + this._view.y = start.y + (ev.clientY - start.py) / fh * 100; + this._clampView(); + this._applyView(); + }; + } + const up = () => { + try { this._spill.releasePointerCapture(e.pointerId); } catch {} + this._spill.removeEventListener('pointermove', move); + this._spill.removeEventListener('pointerup', up); + this._spill.removeEventListener('pointercancel', up); + this.removeAttribute('data-panning'); + this._dragUp = null; + }; + // Stashed so _exitReframe (Escape / outside-click mid-drag) can + // tear the capture + listeners down synchronously. + this._dragUp = up; + this._spill.addEventListener('pointermove', move); + this._spill.addEventListener('pointerup', up); + this._spill.addEventListener('pointercancel', up); + }); + // Wheel zoom stays available inside reframe mode as a trackpad nicety — + // zooms toward the cursor (offset' = cursor·(1-k) + offset·k). + this.addEventListener('wheel', (e) => { + if (!this.hasAttribute('data-reframe')) return; + e.preventDefault(); + const r = this.getBoundingClientRect(); + const cx = (e.clientX - r.left) / r.width * 100 - 50; + const cy = (e.clientY - r.top) / r.height * 100 - 50; + const prev = this._view.s; + const next = clampS(prev * Math.pow(1.0015, -e.deltaY)); + if (next === prev) return; + const k = next / prev; + this._view.s = next; + this._view.x = cx * (1 - k) + this._view.x * k; + this._view.y = cy * (1 - k) + this._view.y * k; + this._clampView(); + this._applyView(); + }, { passive: false }); + } + + connectedCallback() { + // Warn once per page — an id-less slot works for the session but + // cannot persist, and two id-less slots would share nothing. + if (!this.id && !ImageSlot._warned) { + ImageSlot._warned = true; + console.warn(' without an id will not persist its dropped image.'); + } + this.addEventListener('dragenter', this); + this.addEventListener('dragover', this); + this.addEventListener('dragleave', this); + this.addEventListener('drop', this); + subs.add(this._subFn); + // The host may inject window.omelette.writeFile AFTER the first render; + // re-render on hover so the editable-gated controls reliably appear. + this.addEventListener('pointerenter', this._subFn); + // width%/height% in _applyView encode the frame aspect at call time — + // a host resize (responsive grid, pane divider) would stretch the + // image until the next _render. Re-render on size change: _render() + // re-seeds _view from stored before clamp/apply, so a shrink→grow + // cycle round-trips instead of ratcheting x/y toward the narrower + // frame's clamp range. + this._ro = new ResizeObserver(() => this._render()); + this._ro.observe(this); + load(); + this._render(); + } + + disconnectedCallback() { + subs.delete(this._subFn); + this.removeEventListener('pointerenter', this._subFn); + this.removeEventListener('dragenter', this); + this.removeEventListener('dragover', this); + this.removeEventListener('dragleave', this); + this.removeEventListener('drop', this); + if (this._ro) { this._ro.disconnect(); this._ro = null; } + // commit=false: a disconnect is not a user intent — committing here + // would persist whatever half-finished drag a React remount or DOM + // splice happened to interrupt. Deliberate exits commit on their own + // paths (Escape/click-out/toggle), and unloads commit via pagehide. + this._exitReframe(false); + } + + _enterReframe() { + if (this.hasAttribute('data-reframe')) return; + this.setAttribute('data-reframe', ''); + this._signalReframe(true); + // Best-effort commit when the document unloads mid-reframe (a host + // navigation racing the enter signal, a manual reload, tab close): + // the sidecar write rides the host bridge, which outlives this + // document, so the crop survives even though the mode dies with the + // DOM. Held on the instance so _exitReframe detaches exactly what + // was attached. + this._pagehide = () => { this._exitReframe(true); flushNow(); }; + window.addEventListener('pagehide', this._pagehide); + // Promote spill to the top layer, then keep it pinned over the frame: + // scroll/resize cover the common cases, and a per-frame rect check + // catches layout shifts that fire neither (an image above finishing + // load, streamed DOM pushing the slot down, an ancestor transform + // change) so the overlay can't detach from the frame. + try { this._spill.showPopover(); } catch {} + // After the spill, so the controls stack above it in the top layer. + try { this._ctl.showPopover(); } catch {} + this._reposition = () => { if (this.hasAttribute('data-reframe')) this._applyView(); }; + window.addEventListener('scroll', this._reposition, true); + window.addEventListener('resize', this._reposition); + this._lastRect = ''; + this._watch = () => { + if (!this.hasAttribute('data-reframe')) return; + const r = this.getBoundingClientRect(); + const key = r.left + ',' + r.top + ',' + r.width + ',' + r.height; + if (key !== this._lastRect) { this._lastRect = key; this._applyView(); } + this._watchId = requestAnimationFrame(this._watch); + }; + this._watchId = requestAnimationFrame(this._watch); + this._applyView(); + // Close on click outside (the spill handler stopPropagation()s so + // in-image drags don't reach this) and on Escape. Listeners are held + // on the instance so _exitReframe / disconnectedCallback can detach + // exactly what was attached. + this._outside = (e) => { + if (e.composedPath && e.composedPath().includes(this)) return; + this._exitReframe(true); + }; + this._esc = (e) => { if (e.key === 'Escape') this._exitReframe(true); }; + document.addEventListener('pointerdown', this._outside, true); + document.addEventListener('keydown', this._esc, true); + } + + _exitReframe(commit) { + if (!this.hasAttribute('data-reframe')) return; + if (this._dragUp) this._dragUp(); + this.removeAttribute('data-reframe'); + this.removeAttribute('data-panning'); + if (this._outside) document.removeEventListener('pointerdown', this._outside, true); + if (this._esc) document.removeEventListener('keydown', this._esc, true); + this._outside = this._esc = null; + if (this._reposition) { + window.removeEventListener('scroll', this._reposition, true); + window.removeEventListener('resize', this._reposition); + this._reposition = null; + } + if (this._watchId) { cancelAnimationFrame(this._watchId); this._watchId = 0; } + if (this._pagehide) { + window.removeEventListener('pagehide', this._pagehide); + this._pagehide = null; + } + try { this._spill.hidePopover(); } catch {} + try { this._ctl.hidePopover(); } catch {} + this._ctl.style.left = ''; this._ctl.style.top = ''; + if (commit) this._commitView(); + this._signalReframe(false); + } + + // Reframe state lives only in this DOM until commit, invisible to the + // host's dirty signals — announce enter/exit so the host can hold + // auto-reloads for exactly the gesture (the guest bundle forwards + // image-slot:reframe to the host as imageSlotReframe). Dispatched on + // the element (composed, so it escapes shadow roots) while connected; + // a disconnected exit (disconnectedCallback) falls back to document so + // the host still hears it. + _signalReframe(active) { + const target = this.isConnected ? this : document; + target.dispatchEvent(new CustomEvent('image-slot:reframe', { + bubbles: true, composed: true, + detail: { active: active, id: this.id || null } + })); + } + + // Public: host's "Import from computer" calls this to run local browse. + openFilePicker() { this._exitReframe(true); this._input.click(); } + + // A src write is a newer intent for this slot's content — the host + // pick path (setImageSlotImage) or an agent edit — so it must win + // over any encode still in flight from an earlier drop: left live, + // that encode lands later, passes _ingest's gen guard, and its + // setSlot silently overwrites the pick (the stored value shadows + // src in _render). Bumping _gen kills the encode before its own + // _swapGen clear runs, so clear the dead claim here too — otherwise + // _releaseMask (gated on !_swapGen) never fires and the pick's + // spinner is stranded. src ONLY: the pick sets credit/credit-href + // in the same task, and clearing _swapGen on those would let the + // same-src branch unmask the old image mid-encode. + attributeChangedCallback(name, oldVal, newVal) { + if (name === 'src' && oldVal !== newVal) { + this._gen++; + this._swapGen = 0; + } + if (this.shadowRoot) this._render(); + } + + // handleEvent — one listener object for all four drag events keeps the + // add/remove symmetric and the depth counter correct. + handleEvent(e) { + if (e.type === 'dragenter' || e.type === 'dragover') { + // Without preventDefault the browser never fires 'drop'. + e.preventDefault(); + e.stopPropagation(); + if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy'; + if (e.type === 'dragenter') this._depth++; + this.setAttribute('data-over', ''); + } else if (e.type === 'dragleave') { + // dragenter/leave fire for every descendant crossing — count depth + // so hovering the icon inside the empty state doesn't flicker. + if (--this._depth <= 0) { this._depth = 0; this.removeAttribute('data-over'); } + } else if (e.type === 'drop') { + e.preventDefault(); + e.stopPropagation(); + this._depth = 0; + this.removeAttribute('data-over'); + const f = e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files[0]; + if (f) this._ingest(f); + } + } + + async _ingest(file) { + this._setError(null); + if (!file || ACCEPT.indexOf(file.type) < 0) { + this._setError('Drop a PNG, JPEG, WebP, or AVIF image.'); + return; + } + // toDataUrl can take hundreds of ms on a large photo. A Clear or a + // newer drop during that window would be clobbered when this await + // resumes — bump + capture a generation so stale encodes bail. + const gen = ++this._gen; + // Replacing a shown image: surface the swap through the encode too, + // not just the decode — otherwise the old photo sits there with no + // feedback while the canvas re-encode runs. An empty slot keeps its + // placeholder (no spinner) until the encode lands, as before. + // _swapGen guards the mask against re-renders DURING the encode + // (pointerenter, ResizeObserver, another slot's store write): the + // stored value still resolves to the old image there, so _render's + // same-src clear would otherwise unmask it mid-replace. + if (this.hasAttribute('data-filled')) { + this.setAttribute('data-swapping', ''); + this._swapGen = gen; + } + try { + const w = this.clientWidth || this.offsetWidth || MAX_DIM; + const url = await toDataUrl(file, w); + if (gen !== this._gen) return; + // Only exit reframe once the new image is in hand — a rejected type + // or decode failure leaves the in-progress crop untouched. + this._exitReframe(false); + // Clear BEFORE setSlot: its synchronous re-render must see no + // pending encode, so a byte-identical re-upload (same data URL, no + // load event coming) still clears the mask via the complete branch. + this._swapGen = 0; + const val = { u: url, s: 1, x: 0, y: 0 }; + setSlot(this.id || '', val); + // Keep a session-local copy for id-less slots so the drop still + // shows, even though it cannot persist. + if (!this.id) { this._local = val; this._render(); } + } catch (err) { + if (gen !== this._gen) return; + this._swapGen = 0; + // Reveal the kept old image — unless another replacement (a + // remote pick's src swap) is still in flight, in which case the + // mask stays until THAT image settles (its load/error releases). + this._releaseMask(); + this._setError('Could not read that image.'); + console.warn(' ingest failed:', err); + } + } + + _setError(msg) { + if (this._err) { this._err.remove(); this._err = null; } + if (!msg) return; + const d = document.createElement('div'); + d.className = 'err'; d.textContent = msg; + this.shadowRoot.appendChild(d); + this._err = d; + setTimeout(() => { if (this._err === d) { d.remove(); this._err = null; } }, 3000); + } + + // Reframing (pan/resize) is available on any filled slot — the user can + // always reposition/scale. `fit` only sets the initial baseline (see + // _geom): contain starts fully-visible, cover starts frame-filling. + _reframes() { + return this.hasAttribute('data-filled'); + } + + // The single release discipline for the replacement-in-flight mask + // (data-swapping). The mask comes off only when BOTH hold: + // - no encode is pending (_swapGen) — mid-encode the stored value + // still resolves to the old image, so any reveal paints it; + // - the frame img has settled on its current src — an unsettled src + // means some replacement is still in flight (e.g. a remote pick), + // whoever started it, and revealing would paint the previous + // frame. The load/error listeners pass settled=true (the event IS + // the settlement signal, per spec complete is true by then); + // other callers rely on the complete flag (covers loaded AND + // failed). + // Every release path funnels through here EXCEPT _render's empty + // branch (the img is being cleared — nothing will ever settle). + _releaseMask(settled) { + if ( + !this._swapGen && + !this._loadPending && + (settled || this._img.complete) + ) { + this.removeAttribute('data-swapping'); + } + } + + // Baseline geometry, shared by clamp/apply/resize. `base` is the scale at + // view-scale s=1: cover = fill the frame (overflow on the looser axis), + // contain = fit fully inside (letterboxed). Zooming a contain image past + // s where it overflows naturally becomes a crop. Null until the img has + // loaded (naturalWidth is 0 before that) or when the slot has no layout + // box — ResizeObserver fires with a 0×0 rect under display:none, and + // clamping against a degenerate 1×1 frame would silently pull the stored + // pan toward zero. + _geom() { + const iw = this._img.naturalWidth, ih = this._img.naturalHeight; + const fw = this.clientWidth, fh = this.clientHeight; + if (!iw || !ih || !fw || !fh) return null; + const contain = (this.getAttribute('fit') || 'cover').toLowerCase() === 'contain'; + const base = contain + ? Math.min(fw / iw, fh / ih) + : Math.max(fw / iw, fh / ih); + return { iw, ih, fw, fh, base }; + } + + _clampView() { + // Pan range on each axis is half the overflow past the frame edge. + const g = this._geom(); + if (!g) return; + const mx = Math.max(0, (g.iw * g.base * this._view.s / g.fw - 1) * 50); + const my = Math.max(0, (g.ih * g.base * this._view.s / g.fh - 1) * 50); + this._view.x = Math.max(-mx, Math.min(mx, this._view.x)); + this._view.y = Math.max(-my, Math.min(my, this._view.y)); + } + + _applyView() { + const g = this._geom(); + // Top-layer controls: pin to the frame's top-right in viewport px + // (the same 8px inset as the in-frame layout; unscaled — top-layer UI + // reads as chrome, not page content). BEFORE the geometry branch: + // placement needs only the frame rect, and a not-yet-loaded or broken + // src must not leave the promoted strip floating unpositioned. Gated + // on the popover actually being open: without the Popover API, + // showPopover() threw (swallowed in _enterReframe), .ctl stays in + // its in-frame absolute layout, and viewport-px coordinates would + // shove it off-frame — and matches(':popover-open') itself throws + // there (unknown pseudo-class), hence the try/catch. + if (this.hasAttribute('data-reframe')) { + let onTop = false; + try { onTop = this._ctl.matches(':popover-open'); } catch {} + if (onTop) { + const r = this.getBoundingClientRect(); + this._ctl.style.left = (r.right - 8) + 'px'; + this._ctl.style.top = (r.top + 8) + 'px'; + } + } + if (!g) { + // Dimensions not known yet (before img load) — centered fit so there + // is no flash of an unpositioned image before the geometry lands. + const contain = (this.getAttribute('fit') || 'cover').toLowerCase() === 'contain'; + this._img.style.width = '100%'; + this._img.style.height = '100%'; + this._img.style.left = '50%'; + this._img.style.top = '50%'; + this._img.style.objectFit = contain ? 'contain' : 'cover'; + return; + } + // Baseline (cover-fill or contain-fit) × view scale. Width/height and + // left/top are all frame-% — depends only on the frame aspect ratio, so + // a responsive resize keeps the same crop. The spill layer mirrors the + // same box so its corners = image corners. + const k = g.base * this._view.s; + const w = (g.iw * k / g.fw * 100) + '%'; + const h = (g.ih * k / g.fh * 100) + '%'; + const l = (50 + this._view.x) + '%'; + const t = (50 + this._view.y) + '%'; + this._img.style.width = w; this._img.style.height = h; + this._img.style.left = l; this._img.style.top = t; + this._img.style.objectFit = ''; + if (this.hasAttribute('data-reframe')) { + // Top-layer spill: position in viewport px over the frame. The top + // layer escapes ancestor transforms entirely, so EVERY term must be + // in viewport units: getBoundingClientRect gives the frame's scaled + // origin AND size, and the rect/layout ratio rescales the ghost — + // sizing from layout px alone renders it 1/scale too large under a + // scaled deck slide. Inner ghost + handles stay box-relative. + const r = this.getBoundingClientRect(); + const sx = g.fw ? r.width / g.fw : 1; + const sy = g.fh ? r.height / g.fh : 1; + this._spill.style.width = (g.iw * k * sx) + 'px'; + this._spill.style.height = (g.ih * k * sy) + 'px'; + this._spill.style.left = (r.left + (50 + this._view.x) / 100 * r.width) + 'px'; + this._spill.style.top = (r.top + (50 + this._view.y) / 100 * r.height) + 'px'; + } + } + + _commitView() { + const v = { s: this._view.s, x: this._view.x, y: this._view.y }; + if (this._userUrl) v.u = this._userUrl; + // Framing-only (no u) persists too so an author-src slot remembers its + // crop; clearing the sidecar still falls through to src=. + if (this.id) setSlot(this.id, v); + else { this._local = v; } + } + + _render() { + // Shape / mask. Presets use border-radius so the dashed ring can + // follow the rounded outline; clip-path is only applied for an + // explicit `mask` (the ring is hidden there since a rectangle + // dashed border chopped by an arbitrary polygon looks broken). + const mask = this.getAttribute('mask'); + const shape = (this.getAttribute('shape') || 'rounded').toLowerCase(); + let radius = ''; + if (shape === 'circle') radius = '50%'; + else if (shape === 'pill') radius = '9999px'; + else if (shape === 'rounded') { + const n = parseFloat(this.getAttribute('radius')); + radius = (Number.isFinite(n) ? n : 12) + 'px'; + } + this._frame.style.borderRadius = mask ? '' : radius; + this._frame.style.clipPath = mask || ''; + this._ring.style.borderRadius = mask ? '' : radius; + this._ring.style.display = mask ? 'none' : ''; + + // Controls and reframe entry gate on this so share links stay read-only. + const editable = !!(window.omelette && window.omelette.writeFile); + this.toggleAttribute('data-editable', editable); + this._sub.style.display = editable ? '' : 'none'; + + // Content. The sidecar is also writable by the agent's write_file + // tool, so its value isn't guaranteed canvas-originated — only accept + // data:image/ URLs from it. The `src` attribute is author-controlled + // (Claude wrote it into the HTML) so it passes through unchanged. + let stored = this.id ? getSlot(this.id) : this._local; + if (stored && stored.u && !/^data:image\//i.test(stored.u)) stored = null; + const srcAttr = this.getAttribute('src') || ''; + this._userUrl = (stored && stored.u) || null; + const url = this._userUrl || srcAttr; + // Don't clobber an in-flight reframe with a store-triggered re-render. + if (!this.hasAttribute('data-reframe')) { + this._view = { + s: stored && Number.isFinite(stored.s) ? clampS(stored.s) : 1, + x: stored && Number.isFinite(stored.x) ? stored.x : 0, + y: stored && Number.isFinite(stored.y) ? stored.y : 0, + }; + } + this._cap.textContent = this.getAttribute('placeholder') || 'Drop an image'; + // Toggle via style.display — the [hidden] attribute alone loses to + // the display:flex / display:block rules in the stylesheet above. + // An Unsplash src with no credit attribute must NOT render — showing + // the photo uncredited is the Unsplash-terms violation itself. The + // error tile replaces the photo until the credit is written. A + // user-dropped image is the user's own content and always renders. + // Trimmed: credit is agent/user-editable content, and a whitespace- + // only value must count as missing — otherwise it would suppress the + // error tile AND render an empty credit box (no text, no links), + // exactly the unattributed state this gate exists to prevent. + const credit = (this.getAttribute('credit') || '').trim(); + const attrError = !!( + !credit && !this._userUrl && srcAttr && isUnsplashHost(srcAttr) + ); + this.toggleAttribute('data-attribution-error', attrError); + if (url && !attrError) { + const prev = this._img.getAttribute('src'); + if (prev !== url) { + // Replacing an already-shown image: mark the swap BEFORE setting + // src so the stale frame is never revealed (see the data-swapping + // stylesheet rules). First fill (prev empty) keeps the existing + // placeholder-until-load behavior — no spinner. _hidShowing + // covers the pick path's transient attribution-error wipe: prev + // is gone, but an image WAS showing, so this is a replacement. + if (prev || this._hidShowing) this.setAttribute('data-swapping', ''); + // Mark the swap BEFORE assigning src: complete keeps reporting + // the old settled request until the browser's + // update-the-image-data microtask runs, so same-task re-renders + // (the pick path's credit/credit-href setAttributes) need this + // flag, not complete, to know a load is in flight. + this._loadPending = true; + this._img.src = url; + this._ghost.src = url; + } else { + // Same-src re-render — release if settled, so an ingest-set + // spinner can't stick after a byte-identical re-upload (same + // data URL, no further load event ever fires). + this._releaseMask(); + } + this._hidShowing = false; + this._img.style.display = 'block'; + this._empty.style.display = 'none'; + this.setAttribute('data-filled', ''); + this._clampView(); + this._applyView(); + } else { + this.removeAttribute('data-swapping'); + // The src is being removed — no load/error will ever fire for it. + this._loadPending = false; + // A transient attribution-error wipe of a showing image happens on + // the pick path: the host sets src one setAttribute before credit, + // so render N hides the old image (attrError) and render N+1 + // restores a URL. Remember the wipe so that restore renders as a + // replacement (spinner), not a first fill (blank frame). + this._hidShowing = attrError && !!this._img.getAttribute('src'); + this._img.style.display = 'none'; + this._img.removeAttribute('src'); + this._ghost.removeAttribute('src'); + // The error tile owns the blocked-photo state; .empty stays for + // the genuinely-empty slot. + this._empty.style.display = attrError ? 'none' : 'flex'; + this.removeAttribute('data-filled'); + } + + // Credit belongs to the author src, so a user drop hides it. + // textContent + the http(s)-only funnel keep external strings inert. + const showCredit = !!(url && credit && !this._userUrl && !attrError); + this._credit.textContent = ''; + if (showCredit) { + // Validate once (resolved against the document, http(s) only), + // then append the terms-required utm referral params to links + // that point back at unsplash.com. + let href = ''; + const rawHref = this.getAttribute('credit-href') || ''; + if (rawHref) { + try { + const u = new URL(rawHref, document.baseURI); + if (u.protocol === 'http:' || u.protocol === 'https:') { + href = withReferral(u.href); + } + } catch {} + } + const mkLink = (text, linkHref) => { + const a = document.createElement('a'); + a.setAttribute('target', '_blank'); + a.setAttribute('rel', 'noopener noreferrer'); + a.setAttribute('href', linkHref); + a.textContent = text; + return a; + }; + // Unsplash's prescribed credit is TWO links — the photographer's + // name to their profile (credit-href) and 'Unsplash' to the + // homepage. Render that split whenever the text has the canonical + // shape; other text keeps the legacy single-link rendering. + const m = /^Photo by (.+) on Unsplash$/.exec(credit); + if (m) { + this._credit.appendChild(document.createTextNode('Photo by ')); + this._credit.appendChild( + href ? mkLink(m[1], href) : document.createTextNode(m[1]) + ); + this._credit.appendChild(document.createTextNode(' on ')); + this._credit.appendChild(mkLink('Unsplash', UNSPLASH_HOMEPAGE_HREF)); + } else if (href) { + this._credit.appendChild(mkLink(credit, href)); + } else { + this._credit.textContent = credit; + } + } + this.toggleAttribute('data-credit', showCredit); + } + } + + if (!customElements.get('image-slot')) { + customElements.define('image-slot', ImageSlot); + } +})(); diff --git a/design/images/adam-belkacemi.jpeg b/design/images/adam-belkacemi.jpeg new file mode 100644 index 0000000..558e31b Binary files /dev/null and b/design/images/adam-belkacemi.jpeg differ diff --git a/design/images/couleurs/cockpit.jpg b/design/images/couleurs/cockpit.jpg new file mode 100644 index 0000000..04fa11f Binary files /dev/null and b/design/images/couleurs/cockpit.jpg differ diff --git a/design/images/couleurs/gilet.jpg b/design/images/couleurs/gilet.jpg new file mode 100644 index 0000000..991325c Binary files /dev/null and b/design/images/couleurs/gilet.jpg differ diff --git a/design/images/couleurs/moniteur.webp b/design/images/couleurs/moniteur.webp new file mode 100644 index 0000000..b2bf892 Binary files /dev/null and b/design/images/couleurs/moniteur.webp differ diff --git a/design/images/couleurs/paillasse.jpg b/design/images/couleurs/paillasse.jpg new file mode 100644 index 0000000..04a2724 Binary files /dev/null and b/design/images/couleurs/paillasse.jpg differ diff --git a/design/images/den-bosch.jpg b/design/images/den-bosch.jpg new file mode 100644 index 0000000..0a01803 Binary files /dev/null and b/design/images/den-bosch.jpg differ diff --git a/design/images/logo-paillasse-icone.png b/design/images/logo-paillasse-icone.png new file mode 100644 index 0000000..30f06f9 Binary files /dev/null and b/design/images/logo-paillasse-icone.png differ diff --git a/design/images/logo-paillasse.png b/design/images/logo-paillasse.png new file mode 100644 index 0000000..1cfa372 Binary files /dev/null and b/design/images/logo-paillasse.png differ diff --git a/design/images/logo-syllabus-icone.png b/design/images/logo-syllabus-icone.png new file mode 100644 index 0000000..a1deeca Binary files /dev/null and b/design/images/logo-syllabus-icone.png differ diff --git a/design/images/logo-syllabus.png b/design/images/logo-syllabus.png new file mode 100644 index 0000000..dead7b1 Binary files /dev/null and b/design/images/logo-syllabus.png differ diff --git a/design/images/parcours/coursier.png b/design/images/parcours/coursier.png new file mode 100644 index 0000000..1779550 Binary files /dev/null and b/design/images/parcours/coursier.png differ diff --git a/design/images/telecom-saint-etienne.jpeg b/design/images/telecom-saint-etienne.jpeg new file mode 100644 index 0000000..a64c551 Binary files /dev/null and b/design/images/telecom-saint-etienne.jpeg differ diff --git a/design/js/contenus-1.js b/design/js/contenus-1.js new file mode 100644 index 0000000..9292ac5 --- /dev/null +++ b/design/js/contenus-1.js @@ -0,0 +1,95 @@ +// Cours complets · lot 1 : représentation des données, terminal, droits Unix +window.CONTENUS_PRO = (window.CONTENUS_PRO || []).concat([ +{ id: 'binaire', match: /binaire|hexad|représentation des (données|entiers)/i, + titre: 'Représentation des entiers : binaire et hexadécimal', duree: '4 h (CM 1 h 30 · TD 1 h 30 · TP 1 h)', niveau: 'NSI Première · BTS SIO / CIEL 1re année · BUT R&T / Info S1', + prerequis: ['Puissances de 10 et de 2', 'Division euclidienne'], + competences: ['NSI 1re · Représentation des données : types et valeurs de base', 'BTS SIO · Bloc 1 · Exploiter les éléments d’un réseau (adressage)', 'BUT R&T · Compétence « Administrer » · niveau 1'], + intro: 'Tout ce qu’un ordinateur stocke, du texte aux images en passant par les adresses IP, finit en suites de 0 et de 1. Savoir passer d’une base à l’autre est un geste de base de l’informaticien : il sert à calculer un masque de sous-réseau, lire une adresse MAC, choisir une couleur web ou comprendre un débordement d’entier.', + cm: [ + { t: 'Les systèmes de numération', d: '15 min', html: 'Un système de numération positionnel en base b utilise b chiffres (de 0 à b − 1). La valeur d’un chiffre dépend de sa position : le chiffre de rang k vaut chiffre × bk, les rangs étant comptés à partir de 0, depuis la droite.

                          En base 10 : 2 047 = 2×10³ + 0×10² + 4×10¹ + 7×10⁰. En base 2, seuls 0 et 1 existent. En base 16, on utilise 0-9 puis A (10), B (11), C (12), D (13), E (14), F (15).', table: [['Base', 'Nom', 'Chiffres', 'Notation'], ['2', 'binaire', '0 1', '0b1011 ou 1011₂'], ['10', 'décimal', '0 à 9', '11'], ['16', 'hexadécimal', '0 à 9, A à F', '0xB ou B₁₆']] }, + { t: 'Bits, octets et ordres de grandeur', d: '10 min', html: 'Un bit (binary digit) prend la valeur 0 ou 1. Avec n bits on code 2n valeurs, de 0 à 2n − 1. Un octet vaut 8 bits, donc 256 valeurs (0 à 255). Les préfixes normalisés sont décimaux (1 ko = 1 000 octets) ; les préfixes binaires s’écrivent Kio, Mio, Gio (1 Kio = 1 024 octets).', attention: 'Un disque de « 1 To » affiche environ 931 Gio dans le système : ce n’est pas une arnaque, c’est la différence entre 10¹² et 2⁴⁰.' }, + { t: 'Du binaire au décimal', d: '15 min', html: 'On additionne les poids des bits à 1. Les poids d’un octet sont 128, 64, 32, 16, 8, 4, 2, 1.', exemple: '1011 0010₂ = 128 + 32 + 16 + 2 = 178\n0100 0001₂ = 64 + 1 = 65 (code ASCII de « A »)' }, + { t: 'Du décimal au binaire', d: '20 min', html: 'Méthode 1, soustractions : on retire la plus grande puissance de 2 possible, on écrit 1 à sa place, 0 sinon, et on recommence avec le reste.
                          Méthode 2, divisions successives : on divise par 2 jusqu’à obtenir 0 ; les restes lus de bas en haut donnent le nombre binaire.', exemple: '45 ÷ 2 = 22 reste 1\n22 ÷ 2 = 11 reste 0\n11 ÷ 2 = 5 reste 1\n 5 ÷ 2 = 2 reste 1\n 2 ÷ 2 = 1 reste 0\n 1 ÷ 2 = 0 reste 1 → lecture de bas en haut : 101101₂', attention: 'On lit les restes de bas en haut. L’erreur la plus fréquente en devoir est de les lire dans l’ordre du calcul.' }, + { t: 'L’hexadécimal', d: '15 min', html: 'Comme 16 = 2⁴, un chiffre hexadécimal correspond exactement à un groupe de 4 bits (un quartet). Pour convertir, on découpe le binaire en groupes de 4 à partir de la droite.', table: [['Binaire', '0000', '0101', '1001', '1010', '1100', '1111'], ['Hexa', '0', '5', '9', 'A', 'C', 'F']], exemple: '1011 0010₂ → B 2 → 0xB2\n#FF6FB5 → rouge FF = 255, vert 6F = 111, bleu B5 = 181' }, + { t: 'Où les retrouve-t-on ?', d: '15 min', html: 'Adresses IPv4 : 4 octets écrits en décimal pointé (192.168.10.65). Masques : /26 = 26 bits à 1 = 255.255.255.192. Adresses MAC : 6 octets en hexadécimal (3C:52:82:1A:0F:9B). IPv6 : 8 groupes de 16 bits en hexadécimal. Couleurs web : #RRVVBB. Droits Unix : notation octale, base 8 (chmod 755).' }], + synthese: ['n bits codent 2ⁿ valeurs, de 0 à 2ⁿ − 1', 'Poids d’un octet : 128 64 32 16 8 4 2 1', 'Décimal → binaire : divisions par 2, restes lus de bas en haut', '1 chiffre hexadécimal = 4 bits : on regroupe par 4 depuis la droite'], + qcm: [ + ['Combien de valeurs différentes peut-on coder sur 10 bits ?', ['10', '100', '1 000', '1 024'], 3, '2¹⁰ = 1 024.'], + ['Que vaut 1100 1000₂ en décimal ?', ['200', '192', '208', '136'], 0, '128 + 64 + 8 = 200.'], + ['Comment s’écrit 172 en binaire ?', ['1010 1100', '1011 0100', '1100 1010', '1010 1010'], 0, '128 + 32 + 8 + 4 = 172.'], + ['Que vaut 0x3F en décimal ?', ['48', '63', '53', '36'], 1, '3 × 16 + 15 = 63.'], + ['Quel est le plus grand nombre codable sur 16 bits non signés ?', ['32 767', '65 535', '65 536', '16 383'], 1, '2¹⁶ − 1 = 65 535.'], + ['255.255.255.224 correspond à quel préfixe CIDR ?', ['/24', '/26', '/27', '/28'], 2, '224 = 1110 0000 : 24 + 3 = 27 bits à 1.'], + ['Combien d’octets compte une adresse MAC ?', ['4', '6', '8', '16'], 1, '48 bits = 6 octets.'], + ['Un disque vendu 500 Go contient environ :', ['500 Gio', '465 Gio', '512 Gio', '536 Gio'], 1, '500 × 10⁹ / 2³⁰ ≈ 465.']], + td: [ + { n: 'Échauffement', c: 'Convertir en binaire sur 8 bits : 7, 64, 99, 128, 250.', r: '0000 0111 · 0100 0000 · 0110 0011 · 1000 0000 · 1111 1010' }, + { n: 'Échauffement', c: 'Convertir en décimal : 1010 1010₂, 0x7F, 0xC0, 1111 0000₂.', r: '170 · 127 · 192 · 240' }, + { n: 'Application', c: 'Écrire l’adresse 172.16.5.130 en binaire, octet par octet.', r: '10101100.00010000.00000101.10000010' }, + { n: 'Application', c: 'Écrire le masque /20 en décimal pointé, puis en hexadécimal.', r: '255.255.240.0 · 0xFFFFF000' }, + { n: 'Approfondissement', c: 'Un capteur code une température sur 12 bits. Combien de valeurs distinctes peut-il transmettre ? Si la plage mesurée va de −40 °C à +85 °C, quelle est la résolution ?', r: '2¹² = 4 096 valeurs. Résolution = 125 / 4 095 ≈ 0,031 °C.' }, + { n: 'Approfondissement', c: 'Écrire en Python une fonction en_binaire(n) sans utiliser bin(), par divisions successives.', r: 'def en_binaire(n):\n s = ""\n while n > 0:\n s = str(n % 2) + s\n n //= 2\n return s or "0"' }], + tp: { type: 'Générateur', url: 'apercu-generateur.html', desc: 'Conversions aléatoires à l’infini, corrigées au fil de l’eau.', etapes: ['Série de 10 conversions décimal → binaire', 'Série de 10 conversions binaire → hexadécimal', 'Défi chronométré : 20 conversions en 5 minutes'] }, + plusLoin: [['Complément à deux et entiers signés', ''], ['Norme IEEE 754 des flottants', ''], ['Défis « Bit Manipulation » sur HackerRank', 'https://www.hackerrank.com/domains/algorithms?filters%5Bsubdomains%5D%5B%5D=bit-manipulation']] }, + +{ id: 'terminal', match: /terminal|commandes de base|premiers pas|arborescence|FHS|shell/i, + titre: 'Le terminal Linux : se repérer et manipuler des fichiers', duree: '4 h (CM 1 h · TD 1 h · TP 2 h)', niveau: 'SNT · NSI · BTS SIO / CIEL · BUT R&T · Titre pro TSSR', + prerequis: ['Notion de fichier et de dossier'], + competences: ['BTS SIO · Bloc 1 · Gérer le patrimoine informatique', 'BTS CIEL · C04 · Installer un système', 'TSSR · Exploiter des serveurs Linux'], + intro: 'Les serveurs du monde entier se pilotent en ligne de commande. Le terminal est plus rapide que la souris, scriptable et accessible à distance par SSH. Ce cours pose les gestes que vous utiliserez dans tous les labs suivants.', + cm: [ + { t: 'Shell, terminal et invite', d: '10 min', html: 'Le terminal est la fenêtre ; le shell (bash, zsh) est le programme qui lit vos commandes et les exécute. L’invite eleve@debian:~$ indique l’utilisateur, la machine, le dossier courant (~ = dossier personnel) et le type de compte ($ utilisateur, # administrateur).' }, + { t: 'L’arborescence Linux (FHS)', d: '15 min', html: 'Tout part de la racine /. Il n’y a pas de lettres de lecteur.', table: [['Dossier', 'Contenu'], ['/home', 'dossiers personnels des utilisateurs'], ['/etc', 'fichiers de configuration'], ['/var/log', 'journaux du système'], ['/bin, /usr/bin', 'commandes'], ['/tmp', 'fichiers temporaires, vidés au redémarrage'], ['/root', 'dossier personnel de l’administrateur']] }, + { t: 'Chemins absolus et relatifs', d: '10 min', html: 'Un chemin absolu commence par / et part de la racine : /home/eleve/notes.txt. Un chemin relatif part du dossier courant : projets/web. . désigne le dossier courant, .. le dossier parent.', exemple: 'eleve@debian:~$ pwd\n/home/eleve\neleve@debian:~$ cd projets/web\neleve@debian:~/projets/web$ cd ../..\neleve@debian:~$' }, + { t: 'Lister et se déplacer', d: '10 min', html: 'pwd affiche le dossier courant. ls liste ; ls -l détaille (droits, taille, date) ; ls -a montre les fichiers cachés (qui commencent par un point) ; ls -lh affiche les tailles lisibles. cd change de dossier.' }, + { t: 'Créer, copier, déplacer, supprimer', d: '15 min', html: 'mkdir -p a/b/c crée une arborescence, touch f un fichier vide, cp src dest copie (-r pour un dossier), mv déplace ou renomme, rm supprime (-r pour un dossier).', attention: 'Il n’y a pas de corbeille. rm -rf supprime sans confirmation. Relisez toujours la commande avant Entrée, surtout avec sudo.' }, + { t: 'Aide et productivité', d: '10 min', html: 'man commande ouvre le manuel (/ pour chercher, q pour quitter). Tab complète les noms, ↑ rappelle l’historique, Ctrl+R recherche dans l’historique, Ctrl+C interrompt une commande, history liste les commandes passées.' }], + synthese: ['/ est la racine, ~ le dossier personnel', 'Chemin absolu = commence par /', 'pwd, ls, cd pour se repérer ; mkdir, cp, mv, rm pour agir', 'Pas de corbeille : relire avant rm'], + qcm: [ + ['Où se trouvent les fichiers de configuration du système ?', ['/home', '/etc', '/var', '/bin'], 1, '/etc regroupe la configuration.'], + ['Lequel est un chemin absolu ?', ['projets/web', '../notes', '/var/log/syslog', '~notes'], 2, 'Il commence par /.'], + ['Que fait mkdir -p a/b/c ?', ['Erreur si a n’existe pas', 'Crée toute l’arborescence', 'Crée un fichier', 'Supprime a/b/c'], 1, '-p crée les dossiers parents manquants.'], + ['Que signifie # à la fin de l’invite ?', ['Commentaire', 'Compte administrateur', 'Erreur', 'Dossier racine'], 1, '# indique root.'], + ['Quelle commande copie le dossier site et son contenu ?', ['cp site copie', 'cp -r site copie', 'mv site copie', 'mkdir site copie'], 1, '-r = récursif.'], + ['Quel raccourci recherche dans l’historique ?', ['Ctrl+C', 'Ctrl+R', 'Ctrl+Z', 'Tab'], 1, 'Ctrl+R lance la recherche inversée.'], + ['Où sont les journaux du système ?', ['/var/log', '/etc/log', '/tmp', '/home/log'], 0, '/var/log contient syslog, auth.log…'], + ['Depuis /home/eleve/projets, que désigne ../.. ?', ['/home', '/home/eleve', '/', '/projets'], 0, 'On remonte deux fois.']], + td: [ + { n: 'Échauffement', c: 'Depuis /home/eleve, donner le chemin absolu puis relatif du fichier /home/eleve/projets/web/index.html.', r: 'Absolu : /home/eleve/projets/web/index.html · relatif : projets/web/index.html' }, + { n: 'Application', c: 'Créer en une commande : tp/{reseau,systeme,web}.', r: 'mkdir -p tp/reseau tp/systeme tp/web (ou mkdir -p tp/{reseau,systeme,web})' }, + { n: 'Application', c: 'Copier /etc/hosts dans tp/reseau sous le nom hosts.bak, puis vérifier.', r: 'cp /etc/hosts tp/reseau/hosts.bak && ls -l tp/reseau' }, + { n: 'Approfondissement', c: 'Trouver tous les fichiers .conf de /etc de plus de 10 Ko.', r: 'find /etc -name "*.conf" -size +10k 2>/dev/null' }], + tp: { type: 'Lab VM', url: 'apercu-lab-essai.html', desc: 'Un vrai terminal Debian, étapes vérifiées automatiquement dans la VM.', etapes: ['Se repérer : pwd, ls -la', 'Créer l’arborescence du projet', 'Copier et renommer des fichiers', 'Retrouver un fichier avec find', 'Nettoyer sans rien casser'] }, + plusLoin: [['Le jeu OverTheWire Bandit (niveaux 0 à 10)', 'https://overthewire.org/wargames/bandit/'], ['Linux Journey', 'https://linuxjourney.com/']] }, + +{ id: 'droits', match: /droits|chmod|chown|permissions|utilisateurs et groupes/i, + titre: 'Droits, utilisateurs et groupes sous Linux', duree: '5 h (CM 1 h 30 · TD 1 h 30 · TP 2 h)', niveau: 'BTS SIO SISR · BTS CIEL IR · BUT R&T · TSSR', + prerequis: ['Le terminal Linux', 'Binaire : poids des bits'], + competences: ['BTS SIO · Bloc 3 · Sécuriser les équipements et les usages', 'BTS CIEL · C08 · Sécuriser un système', 'BUT R&T · Compétence « Administrer »'], + intro: 'Sur un serveur partagé, chaque fichier appartient à quelqu’un et chacun n’a que les droits dont il a besoin : c’est le principe du moindre privilège. Une erreur de droits, c’est soit un service qui ne démarre pas, soit une fuite de données.', + cm: [ + { t: 'Utilisateurs et groupes', d: '15 min', html: 'Chaque utilisateur a un identifiant (UID) et un groupe principal (GID), déclarés dans /etc/passwd et /etc/group. Les mots de passe hachés sont dans /etc/shadow, lisible par root seulement. id affiche vos identifiants.', exemple: 'root@srv:~# adduser alice\nroot@srv:~# addgroup profs\nroot@srv:~# usermod -aG profs alice\nroot@srv:~# id alice\nuid=1001(alice) gid=1001(alice) groupes=1001(alice),1002(profs)' }, + { t: 'Lire les droits', d: '15 min', html: 'ls -l affiche 10 caractères : le type puis trois triplets pour le propriétaire (u), le groupe (g) et les autres (o).', table: [['Droit', 'Sur un fichier', 'Sur un dossier'], ['r (4)', 'lire le contenu', 'lister les noms'], ['w (2)', 'modifier', 'créer, renommer, supprimer dedans'], ['x (1)', 'exécuter', 'traverser (cd)']], exemple: '-rwxr-x--- 1 alice profs 812 sept. 29 10:14 sauvegarde.sh\n│└┬┘└┬┘└┬┘\n│ u g o' }, + { t: 'chmod : octal et symbolique', d: '20 min', html: 'En octal, on additionne r = 4, w = 2, x = 1 pour chaque triplet : rwx = 7, r-x = 5, r-- = 4. En symbolique, on ajoute (+), retire (−) ou fixe (=) un droit pour u, g, o ou a.', exemple: 'chmod 750 sauvegarde.sh # rwxr-x---\nchmod u+x,g-w rapport.txt\nchmod -R o= /srv/partage # retire tout aux autres, récursivement' }, + { t: 'chown et umask', d: '15 min', html: 'chown alice:profs fichier change propriétaire et groupe (réservé à root). umask fixe les droits retirés à la création : avec umask 022, un fichier est créé en 644 et un dossier en 755 ; avec 027, en 640 et 750.' }, + { t: 'Droits spéciaux', d: '15 min', html: 'SUID (4000) : le programme s’exécute avec les droits de son propriétaire (ex. passwd). SGID (2000) sur un dossier : les fichiers créés héritent du groupe du dossier, idéal pour un partage. Sticky bit (1000) sur un dossier : seul le propriétaire d’un fichier peut le supprimer (ex. /tmp).', attention: 'Un script SUID root mal écrit est une porte d’entrée classique pour une élévation de privilèges. En audit, on les recherche avec find / -perm -4000.' }, + { t: 'Au-delà : les ACL', d: '10 min', html: 'Les ACL permettent de donner des droits à un utilisateur précis sans changer le groupe : setfacl -m u:bob:rw rapport.txt, et getfacl pour les lire.' }], + synthese: ['u g o × r w x, avec r = 4, w = 2, x = 1', 'x sur un dossier = pouvoir y entrer', 'SGID sur un dossier partagé, sticky bit sur /tmp', 'Moindre privilège : ne donner que le nécessaire'], + qcm: [ + ['rwxr-x--- en octal ?', ['750', '755', '740', '770'], 0, '7, 5, 0.'], + ['Quel fichier contient les hachages des mots de passe ?', ['/etc/passwd', '/etc/shadow', '/etc/group', '/etc/login'], 1, 'shadow, lisible par root uniquement.'], + ['Que fait chmod g+w rapport.txt ?', ['Donne l’écriture aux autres', 'Donne l’écriture au groupe', 'Retire l’écriture', 'Change le groupe'], 1, 'g = groupe, + = ajouter.'], + ['Avec umask 027, un nouveau dossier a les droits :', ['755', '750', '770', '700'], 1, '777 − 027 = 750.'], + ['Quel droit permet à un utilisateur de faire cd dans un dossier ?', ['r', 'w', 'x', 's'], 2, 'x sur un dossier = traverser.'], + ['Le sticky bit sur /tmp sert à :', ['Accélérer', 'Empêcher de supprimer les fichiers des autres', 'Chiffrer', 'Hériter du groupe'], 1, 'Chacun ne supprime que ses fichiers.'], + ['Comment ajouter alice au groupe profs sans retirer ses autres groupes ?', ['usermod -G profs alice', 'usermod -aG profs alice', 'chown profs alice', 'addgroup alice'], 1, '-a = append.'], + ['Quelle commande trouve les fichiers SUID ?', ['find / -perm -4000', 'ls -suid', 'chmod -find', 'grep suid /'], 0, '-perm -4000 cherche le bit SUID.']], + td: [ + { n: 'Échauffement', c: 'Traduire en octal : rw-r--r--, rwx------, rwxrwxr-x, r--------.', r: '644 · 700 · 775 · 400' }, + { n: 'Échauffement', c: 'Traduire en symbolique : 640, 755, 600.', r: 'rw-r----- · rwxr-xr-x · rw-------' }, + { n: 'Application', c: 'Créer un dossier /srv/projet partagé par le groupe devs : les membres lisent et écrivent, les fichiers créés restent dans le groupe devs, les autres n’ont aucun accès.', r: 'mkdir /srv/projet\nchown root:devs /srv/projet\nchmod 2770 /srv/projet' }, + { n: 'Application', c: 'Le script sauvegarde.sh refuse de se lancer (« Permission non accordée »). Diagnostiquer et corriger.', r: 'ls -l sauvegarde.sh → pas de x. chmod u+x sauvegarde.sh' }, + { n: 'Approfondissement', c: 'Expliquer pourquoi un fichier en 777 dans un dossier en 700 appartenant à alice reste inaccessible à bob.', r: 'bob ne peut pas traverser le dossier (pas de x pour les autres) : il n’atteint jamais le fichier.' }], + tp: { type: 'Lab VM', url: 'apercu-labs.html', desc: 'Créer des comptes, un dossier partagé en SGID et tester les accès avec su.', etapes: ['Créer alice, bob et le groupe devs', 'Préparer /srv/projet en 2770', 'Tester l’écriture en tant qu’alice puis bob', 'Poser une ACL pour un stagiaire', 'Audit : lister les fichiers SUID'] }, + plusLoin: [['ANSSI · Recommandations de sécurité relatives à un système GNU/Linux', 'https://cyber.gouv.fr/publications/recommandations-de-securite-relatives-un-systeme-gnulinux']] } +]); diff --git a/design/js/contenus-2.js b/design/js/contenus-2.js new file mode 100644 index 0000000..4f3b2cb --- /dev/null +++ b/design/js/contenus-2.js @@ -0,0 +1,90 @@ +// Cours complets · lot 2 : tubes, réseaux (OSI), SQL +window.CONTENUS_PRO = (window.CONTENUS_PRO || []).concat([ +{ id: 'tubes', match: /redirection|tubes|grep|filtres|sed|awk/i, + titre: 'Redirections, tubes et filtres de texte', duree: '4 h (CM 1 h · TD 1 h 30 · TP 1 h 30)', niveau: 'BTS SIO · BTS CIEL · BUT R&T · TSSR', + prerequis: ['Le terminal Linux'], + competences: ['BTS SIO · Bloc 1 · Exploiter des journaux', 'BUT R&T · Compétence « Administrer » · automatiser'], + intro: 'Un administrateur passe beaucoup de temps à lire des journaux de plusieurs milliers de lignes. Plutôt que de les lire à l’œil, on enchaîne de petites commandes spécialisées. C’est la philosophie Unix : chaque outil fait une chose, et bien.', + cm: [ + { t: 'Les trois flux standard', d: '10 min', html: 'Chaque processus dispose de trois flux : stdin (0) l’entrée, stdout (1) la sortie normale, stderr (2) les erreurs. Les séparer permet de garder les résultats propres et d’isoler les erreurs.' }, + { t: 'Rediriger', d: '15 min', html: 'On envoie un flux vers un fichier ou on lit un fichier comme entrée.', table: [['Opérateur', 'Effet'], ['>', 'stdout vers un fichier (écrase)'], ['>>', 'stdout ajouté à la fin'], ['2>', 'stderr vers un fichier'], ['&> ou > f 2>&1', 'les deux flux dans le même fichier'], ['<', 'le fichier devient stdin'], ['> /dev/null', 'jeter la sortie']], exemple: 'find / -name "*.conf" > resultats.txt 2> /dev/null' }, + { t: 'Le tube', d: '10 min', html: 'Le tube | branche la sortie d’une commande sur l’entrée de la suivante, sans fichier intermédiaire. On construit une chaîne de traitement de gauche à droite.', exemple: 'cat /var/log/auth.log | grep "Failed password" | wc -l' }, + { t: 'La boîte à outils', d: '20 min', html: '', table: [['Commande', 'Rôle', 'Exemple'], ['grep', 'garder les lignes qui correspondent', 'grep -i erreur syslog'], ['cut', 'extraire des colonnes', 'cut -d: -f1,7 /etc/passwd'], ['sort', 'trier', 'sort -n, sort -rn'], ['uniq -c', 'compter les lignes identiques consécutives', 'sort | uniq -c'], ['wc -l', 'compter les lignes', ''], ['head / tail', 'début / fin', 'tail -f pour suivre en direct'], ['awk', 'traiter par colonnes', "awk '{print $1}'"], ['sed', 'remplacer', "sed 's/http/https/g'"]], attention: 'uniq ne regroupe que les lignes consécutives : il faut presque toujours trier avant avec sort.' }, + { t: 'Un cas réel : repérer une attaque SSH', d: '15 min', html: 'Objectif : trouver les adresses IP qui ont le plus échoué à se connecter.', exemple: "grep 'Failed password' /var/log/auth.log \\\n | awk '{print $(NF-3)}' \\\n | sort | uniq -c | sort -rn | head -5\n\n 412 203.0.113.42\n 87 198.51.100.7\n 12 192.0.2.19" }], + synthese: ['> écrase, >> ajoute, 2> capture les erreurs', '| enchaîne les traitements', 'sort | uniq -c | sort -rn : le classement le plus utile de l’administrateur', 'tail -f pour suivre un journal en direct'], + qcm: [ + ['Où va l’erreur de ls /inexistant > sortie.txt ?', ['Dans sortie.txt', 'À l’écran', 'Nulle part', 'Dans /dev/null'], 1, '> ne redirige que stdout ; stderr s’affiche.'], + ['Comment jeter à la fois la sortie et les erreurs ?', ['> /dev/null', '2> /dev/null', '&> /dev/null', '| null'], 2, '&> redirige les deux flux.'], + ['Que fait cut -d: -f1 /etc/passwd ?', ['Supprime la ligne 1', 'Affiche la 1re colonne séparée par :', 'Compte les lignes', 'Trie'], 1, '-d = séparateur, -f = champ.'], + ['Pourquoi trier avant uniq -c ?', ['Pour aller plus vite', 'uniq ne regroupe que les lignes consécutives', 'Ce n’est pas utile', 'Pour supprimer les doublons'], 1, 'Sans tri, les doublons dispersés ne sont pas regroupés.'], + ['Quelle commande suit un journal en temps réel ?', ['head -f', 'tail -f', 'cat -f', 'less -r'], 1, 'tail -f affiche les nouvelles lignes au fil de l’eau.'], + ['Que fait sed "s/a/b/g" f.txt ?', ['Supprime a', 'Remplace tous les a par b à l’affichage', 'Modifie le fichier sur disque', 'Compte les a'], 1, 'Sans -i, sed ne modifie pas le fichier.']], + td: [ + { n: 'Échauffement', c: 'Enregistrer la liste de /etc dans liste.txt, puis y ajouter celle de /var.', r: 'ls /etc > liste.txt && ls /var >> liste.txt' }, + { n: 'Application', c: 'Afficher les comptes qui utilisent /bin/bash, avec seulement leur nom.', r: 'grep "/bin/bash$" /etc/passwd | cut -d: -f1' }, + { n: 'Application', c: 'Dans acces.log (format Apache), classer les 10 pages les plus demandées.', r: "awk '{print $7}' acces.log | sort | uniq -c | sort -rn | head -10" }, + { n: 'Approfondissement', c: 'Compter les erreurs 404 par heure dans acces.log.', r: "awk '$9 == 404 {print substr($4, 14, 2)}' acces.log | sort | uniq -c" }], + tp: { type: 'IDE Bash', url: 'apercu-ide.html?ex=bash-tp', desc: 'Scripts Bash sur de vrais journaux, vérifiés par des tests.', etapes: ['Compter les connexions échouées', 'Classer les IP suspectes', 'Écrire un rapport dans un fichier', 'Bonus : alerte si plus de 100 échecs'] }, + plusLoin: [['Le jeu OverTheWire Bandit (niveaux 10 à 20)', 'https://overthewire.org/wargames/bandit/'], ['Défis « Linux Shell » sur HackerRank', 'https://www.hackerrank.com/domains/shell']] }, + +{ id: 'osi', match: /OSI|TCP\/IP|modèle en couches|encapsulation|Internet : IP/i, + titre: 'Modèles OSI et TCP/IP, encapsulation', duree: '4 h (CM 1 h 30 · TD 1 h · TP 1 h 30)', niveau: 'SNT · BTS SIO · BTS CIEL · BUT R&T S1', + prerequis: ['Binaire et hexadécimal'], + competences: ['BTS SIO · Bloc 1 · Exploiter les éléments d’un réseau', 'BTS CIEL · C03 · Analyser un réseau', 'BUT R&T · Compétence « Connecter »'], + intro: 'Quand un réseau tombe en panne, l’administrateur raisonne couche par couche : le câble est-il branché ? le switch voit-il la carte ? l’adresse IP est-elle bonne ? le service écoute-t-il ? Le modèle en couches est d’abord une méthode de diagnostic.', + cm: [ + { t: 'Pourquoi un modèle en couches', d: '10 min', html: 'Communiquer suppose de régler beaucoup de problèmes : transmettre des bits, les adresser, les acheminer, les remettre en ordre, les présenter à l’application. Chaque couche règle un problème et offre un service à la couche du dessus, sans connaître le détail des autres.' }, + { t: 'Les 7 couches OSI', d: '20 min', html: '', table: [['N°', 'Couche', 'Rôle', 'Unité', 'Exemples'], ['7', 'Application', 'service rendu à l’utilisateur', 'données', 'HTTP, DNS, SSH, SMTP'], ['6', 'Présentation', 'format, chiffrement', 'données', 'TLS, UTF-8'], ['5', 'Session', 'dialogue', 'données', 'RPC'], ['4', 'Transport', 'bout en bout, ports', 'segment', 'TCP, UDP'], ['3', 'Réseau', 'adressage logique, routage', 'paquet', 'IP, ICMP'], ['2', 'Liaison', 'accès au support, MAC', 'trame', 'Ethernet, Wi-Fi'], ['1', 'Physique', 'signal', 'bit', 'RJ45, fibre, radio']] }, + { t: 'Le modèle TCP/IP', d: '10 min', html: 'Le modèle réellement implémenté compte 4 couches : Accès réseau (OSI 1-2), Internet (3), Transport (4), Application (5-7).' }, + { t: 'L’encapsulation', d: '20 min', html: 'À l’émission, chaque couche ajoute son en-tête aux données reçues de la couche supérieure. À la réception, chaque couche lit et retire le sien.', exemple: '[ HTTP : GET /index.html ]\n[ TCP : port src 51234 → dst 443 ][ HTTP … ]\n[ IP : 192.168.10.65 → 93.184.216.34 ][ TCP … ][ HTTP … ]\n[ Eth : MAC src → MAC passerelle ][ IP … ][ TCP … ][ HTTP … ][ FCS ]' }, + { t: 'Les équipements par couche', d: '10 min', html: 'Hub : couche 1, répète le signal. Switch : couche 2, commute selon les adresses MAC. Routeur : couche 3, achemine selon les adresses IP. Pare-feu : couches 3-4, filtre IP et ports (voire 7 pour un pare-feu applicatif).' }, + { t: 'Diagnostiquer couche par couche', d: '15 min', html: 'On part du bas : ip link (lien actif ?), ip addr (adresse ?), ping la passerelle (couche 3), ss -tlnp (le service écoute-t-il ?), curl (l’application répond-elle ?).', attention: 'Un ping qui échoue ne prouve pas que la machine est éteinte : ICMP est souvent filtré par les pare-feux.' }], + synthese: ['OSI 7 couches, TCP/IP 4 couches', 'bit → trame → paquet → segment → données', 'MAC couche 2, IP couche 3, port couche 4', 'On diagnostique toujours de bas en haut'], + qcm: [ + ['À quelle couche travaille un switch classique ?', ['1', '2', '3', '4'], 1, 'Il commute selon les adresses MAC.'], + ['Quelle est l’unité de la couche Transport ?', ['Trame', 'Paquet', 'Segment', 'Bit'], 2, 'TCP et UDP manipulent des segments (datagrammes pour UDP).'], + ['Le port 443 est une information de couche :', ['2', '3', '4', '7'], 2, 'Les ports sont gérés par la couche Transport.'], + ['Quel protocole n’est PAS de couche application ?', ['DNS', 'SSH', 'ICMP', 'SMTP'], 2, 'ICMP accompagne IP, couche 3.'], + ['Dans une trame Ethernet, l’adresse MAC de destination est celle :', ['du serveur web distant', 'de la passerelle ou du voisin direct', 'du DNS', 'du switch'], 1, 'La MAC change à chaque saut, l’IP de destination reste la même.'], + ['Combien de couches compte le modèle TCP/IP ?', ['3', '4', '5', '7'], 1, 'Accès réseau, Internet, Transport, Application.'], + ['Un poste a une IP mais n’accède pas à Internet. Première vérification ?', ['Réinstaller', 'ping la passerelle', 'Changer le câble', 'Vider le cache DNS'], 1, 'On teste la couche 3 vers la passerelle avant d’aller plus haut.']], + td: [ + { n: 'Échauffement', c: 'Classer par couche OSI : HTTP, IP, switch, TCP, câble RJ45, routeur, TLS, Wi-Fi.', r: '7 · 3 · 2 · 4 · 1 · 3 · 6 · 1-2' }, + { n: 'Application', c: 'Dessiner l’encapsulation d’une requête DNS du poste 192.168.1.20 vers 1.1.1.1.', r: 'DNS (requête) → UDP (port src aléatoire → 53) → IP (192.168.1.20 → 1.1.1.1) → Ethernet (MAC poste → MAC box)' }, + { n: 'Application', c: 'Un utilisateur ne peut pas ouvrir intranet.lycee.fr. Proposer une démarche de diagnostic en 5 commandes, de bas en haut.', r: 'ip link · ip addr · ping passerelle · nslookup intranet.lycee.fr · curl -I https://intranet.lycee.fr' }, + { n: 'Approfondissement', c: 'Expliquer pourquoi l’adresse MAC de destination change à chaque routeur traversé alors que l’adresse IP de destination reste la même.', r: 'La couche 2 ne sert qu’à atteindre le voisin direct ; chaque routeur ré-encapsule dans une nouvelle trame. La couche 3 porte l’adresse finale.' }], + tp: { type: 'Lab VM', url: 'apercu-labs.html', desc: 'Capturer du trafic avec tcpdump et reconnaître chaque en-tête.', etapes: ['Lancer tcpdump sur eth0', 'Faire un curl vers un site', 'Identifier Ethernet, IP, TCP, HTTP', 'Comparer avec une requête DNS en UDP'] }, + plusLoin: [['Cisco Networking Academy · cours gratuits', 'https://www.netacad.com/'], ['RFC 1122 (Requirements for Internet Hosts)', 'https://www.rfc-editor.org/rfc/rfc1122']] }, + +{ id: 'sql', match: /SQL|SELECT|requête|bases de données relationnelles|jointure/i, + titre: 'SQL : interroger une base de données relationnelle', duree: '6 h (CM 2 h · TD 2 h · TP 2 h)', niveau: 'NSI Terminale · BTS SIO SLAM · BUT Informatique · MIAGE', + prerequis: ['Notion de tableau de données'], + competences: ['NSI Tle · Bases de données : langage SQL', 'BTS SIO SLAM · Bloc 2 · Concevoir et exploiter une base de données', 'BUT Info · Compétence « Gérer des données »'], + intro: 'Presque toutes les applications stockent leurs données dans une base relationnelle : un ENT, un site marchand, Syllabus elle-même. SQL est le langage standard pour les interroger. Il se lit presque comme une phrase.', + cm: [ + { t: 'Le modèle relationnel', d: '20 min', html: 'Une base est un ensemble de tables (relations). Chaque ligne est un enregistrement, chaque colonne un attribut typé. La clé primaire identifie une ligne de façon unique ; une clé étrangère référence la clé primaire d’une autre table.', table: [['eleves', 'id (PK)', 'nom', 'prenom', 'classe_id (FK)'], ['', '1', 'Martin', 'Léa', '3'], ['', '2', 'Kaci', 'Inès', '3']] }, + { t: 'Sélectionner : SELECT … FROM', d: '15 min', html: 'On choisit les colonnes, puis la table. * sélectionne toutes les colonnes, DISTINCT supprime les doublons, AS renomme.', exemple: 'SELECT nom, prenom FROM eleves;\nSELECT DISTINCT ville FROM eleves;\nSELECT nom AS "Nom de famille" FROM eleves;' }, + { t: 'Filtrer et trier', d: '20 min', html: 'WHERE filtre avec =, <>, <, >, BETWEEN, IN, LIKE (% = n’importe quelle suite), IS NULL, combinés par AND, OR, NOT. ORDER BY trie (ASC, DESC), LIMIT restreint.', exemple: "SELECT nom, moyenne FROM eleves\nWHERE classe_id = 3 AND moyenne >= 10\nORDER BY moyenne DESC\nLIMIT 5;" }, + { t: 'Agréger : COUNT, AVG, GROUP BY', d: '20 min', html: 'Les fonctions d’agrégat calculent sur un ensemble de lignes : COUNT, SUM, AVG, MIN, MAX. GROUP BY forme des groupes, HAVING filtre les groupes (WHERE filtre les lignes avant).', exemple: 'SELECT classe_id, COUNT(*) AS effectif, AVG(moyenne) AS moy\nFROM eleves\nGROUP BY classe_id\nHAVING COUNT(*) > 20;', attention: 'Toute colonne du SELECT qui n’est pas agrégée doit figurer dans le GROUP BY.' }, + { t: 'Joindre des tables', d: '25 min', html: 'La jointure relie deux tables par leurs clés. INNER JOIN garde les lignes qui ont une correspondance des deux côtés ; LEFT JOIN garde toutes les lignes de gauche, avec NULL s’il n’y a pas de correspondance.', exemple: 'SELECT e.nom, c.libelle\nFROM eleves e\nJOIN classes c ON e.classe_id = c.id;\n\n-- Classes sans aucun élève :\nSELECT c.libelle FROM classes c\nLEFT JOIN eleves e ON e.classe_id = c.id\nWHERE e.id IS NULL;' }, + { t: 'Modifier les données', d: '15 min', html: 'INSERT INTO ajoute, UPDATE … SET … WHERE modifie, DELETE FROM … WHERE supprime.', attention: 'Un UPDATE ou un DELETE sans WHERE touche toutes les lignes. On teste toujours d’abord le WHERE avec un SELECT.' }, + { t: 'Sécurité : l’injection SQL', d: '10 min', html: 'Construire une requête en collant du texte saisi par l’utilisateur permet de détourner la requête (\' OR 1=1 --). On utilise toujours des requêtes préparées avec paramètres.' }], + synthese: ['SELECT colonnes FROM table WHERE condition ORDER BY tri', 'WHERE filtre les lignes, HAVING filtre les groupes', 'JOIN … ON relie clé étrangère et clé primaire', 'Jamais de DELETE ni d’UPDATE sans WHERE', 'Requêtes préparées contre l’injection'], + qcm: [ + ['Quelle clause filtre les groupes après un GROUP BY ?', ['WHERE', 'HAVING', 'ORDER BY', 'LIMIT'], 1, 'HAVING s’applique aux groupes.'], + ['Que renvoie SELECT COUNT(*) FROM eleves WHERE moyenne IS NULL ?', ['Les élèves sans moyenne', 'Le nombre d’élèves sans moyenne', 'Une erreur', '0 toujours'], 1, 'COUNT compte les lignes retenues.'], + ['Quelle jointure garde les classes sans élève ?', ['INNER JOIN', 'LEFT JOIN depuis classes', 'CROSS JOIN', 'Aucune'], 1, 'LEFT JOIN conserve toutes les lignes de la table de gauche.'], + ['LIKE "Ma%" correspond à :', ['Ma exactement', 'tout texte commençant par Ma', 'tout texte finissant par Ma', 'tout texte contenant %'], 1, '% remplace n’importe quelle suite de caractères.'], + ['Que se passe-t-il avec DELETE FROM eleves; ?', ['Rien', 'Toutes les lignes sont supprimées', 'La table est supprimée', 'Erreur de syntaxe'], 1, 'Sans WHERE, toutes les lignes partent. La table reste.'], + ['Quel est le rôle d’une clé étrangère ?', ['Chiffrer', 'Référencer une ligne d’une autre table', 'Accélérer les tris', 'Rendre une colonne unique'], 1, 'Elle garantit l’intégrité référentielle.'], + ['Comment se protéger de l’injection SQL ?', ['Masquer les erreurs', 'Requêtes préparées', 'Mettre des guillemets', 'Utiliser HTTPS'], 1, 'Les paramètres ne sont jamais interprétés comme du SQL.'], + ['Classer les élèves du meilleur au moins bon :', ['ORDER BY moyenne', 'ORDER BY moyenne DESC', 'SORT BY moyenne', 'GROUP BY moyenne'], 1, 'DESC = décroissant.']], + td: [ + { n: 'Échauffement', c: 'Afficher nom et prénom des élèves de la classe 3, triés par nom.', r: 'SELECT nom, prenom FROM eleves WHERE classe_id = 3 ORDER BY nom;' }, + { n: 'Application', c: 'Afficher l’effectif et la moyenne de chaque classe, avec son libellé.', r: 'SELECT c.libelle, COUNT(e.id), AVG(e.moyenne)\nFROM classes c LEFT JOIN eleves e ON e.classe_id = c.id\nGROUP BY c.libelle;' }, + { n: 'Application', c: 'Lister les élèves qui n’ont rendu aucun devoir (tables eleves, rendus).', r: 'SELECT e.nom FROM eleves e\nLEFT JOIN rendus r ON r.eleve_id = e.id\nWHERE r.id IS NULL;' }, + { n: 'Approfondissement', c: 'Afficher les classes dont la moyenne est supérieure à la moyenne générale.', r: 'SELECT classe_id, AVG(moyenne) FROM eleves GROUP BY classe_id\nHAVING AVG(moyenne) > (SELECT AVG(moyenne) FROM eleves);' }, + { n: 'Approfondissement', c: 'Réécrire en requête préparée (PHP PDO) : "SELECT * FROM users WHERE login = \'" . $login . "\'"', r: '$st = $pdo->prepare("SELECT * FROM users WHERE login = ?");\n$st->execute([$login]);' }], + tp: { type: 'IDE SQL', url: 'apercu-ide.html?ex=sql-select', desc: 'Une base SQLite dans le navigateur, requêtes vérifiées automatiquement.', etapes: ['Explorer les tables', '8 requêtes SELECT progressives', '3 jointures', '2 requêtes d’agrégat', 'Défi : le palmarès par classe'] }, + plusLoin: [['SQLBolt · exercices interactifs', 'https://sqlbolt.com/'], ['Défis SQL sur HackerRank', 'https://www.hackerrank.com/domains/sql'], ['DataCamp · Introduction to SQL', 'https://www.datacamp.com/courses/introduction-to-sql']] } +]); diff --git a/design/js/contenus-3.js b/design/js/contenus-3.js new file mode 100644 index 0000000..6bbd620 --- /dev/null +++ b/design/js/contenus-3.js @@ -0,0 +1,92 @@ +// Cours complets · lot 3 : Python, Web, cryptographie +window.CONTENUS_PRO = (window.CONTENUS_PRO || []).concat([ +{ id: 'python', match: /Python|programmation|boucle|variable|algorithm/i, + titre: 'Python : variables, conditions, boucles et fonctions', duree: '6 h (CM 2 h · TD 2 h · TP 2 h)', niveau: 'SNT · NSI Première · BTS SIO SLAM · BUT S1', + prerequis: ['Aucun'], + competences: ['NSI 1re · Langages et programmation', 'BTS SIO SLAM · Bloc 2 · Développer une solution applicative', 'BUT Info · Compétence « Réaliser »'], + intro: 'Python est le langage d’enseignement du lycée à l’université, mais aussi celui des administrateurs, des data engineers et de l’IA. Sa syntaxe courte permet de se concentrer sur l’essentiel : décomposer un problème en instructions.', + cm: [ + { t: 'Variables et types', d: '20 min', html: 'Une variable associe un nom à une valeur. Le type est déduit de la valeur.', table: [['Type', 'Exemple', 'Usage'], ['int', '17', 'entiers'], ['float', '3.5', 'nombres à virgule'], ['str', '"Léa"', 'texte'], ['bool', 'True', 'vrai / faux'], ['list', '[12, 15, 9]', 'suite modifiable'], ['dict', '{"nom": "Léa"}', 'associations clé → valeur']], exemple: 'age = 17\nnom = "Léa"\nprint(f"{nom} a {age} ans") # Léa a 17 ans\nprint(type(age)) # ' }, + { t: 'Opérateurs et entrées', d: '15 min', html: '+ − * / (division réelle), // (division entière), % (reste), ** (puissance). input() lit une saisie, toujours sous forme de texte : on la convertit avec int() ou float().', attention: 'input() renvoie une chaîne : "3" + "4" donne "34", pas 7.' }, + { t: 'Conditions', d: '20 min', html: 'Le bloc exécuté dépend d’une condition. Python délimite les blocs par l’indentation (4 espaces).', exemple: 'note = float(input("Note : "))\nif note >= 16:\n print("Très bien")\nelif note >= 10:\n print("Admis")\nelse:\n print("À retravailler")' }, + { t: 'Boucle for', d: '20 min', html: 'for parcourt une séquence. range(n) produit 0, 1, …, n − 1 ; range(a, b, pas) va de a à b − 1.', exemple: 'notes = [12, 15, 9, 18]\ntotal = 0\nfor n in notes:\n total += n\nprint(total / len(notes)) # 13.5' }, + { t: 'Boucle while', d: '15 min', html: 'while répète tant que la condition est vraie. On l’utilise quand on ne connaît pas le nombre de tours à l’avance.', exemple: 'essais = 0\nmdp = ""\nwhile mdp != "paillasse" and essais < 3:\n mdp = input("Mot de passe : ")\n essais += 1', attention: 'Si la condition ne devient jamais fausse, la boucle est infinie. Ctrl+C l’interrompt.' }, + { t: 'Fonctions', d: '20 min', html: 'Une fonction regroupe des instructions réutilisables. Elle reçoit des paramètres et renvoie un résultat avec return. On la documente avec une docstring et on la teste avec assert.', exemple: 'def moyenne(valeurs):\n """Renvoie la moyenne d\'une liste non vide."""\n return sum(valeurs) / len(valeurs)\n\nassert moyenne([10, 20]) == 15' }, + { t: 'Listes et dictionnaires', d: '10 min', html: 'Une liste s’indexe à partir de 0 : notes[0], notes[-1] (dernier), notes.append(14). Un dictionnaire associe des clés à des valeurs : eleve["nom"].' }], + synthese: ['L’indentation délimite les blocs', 'input() renvoie du texte : convertir avec int() ou float()', 'for quand on connaît la séquence, while sinon', 'Une fonction = paramètres + return + tests'], + qcm: [ + ['Que vaut 7 // 2 ?', ['3.5', '3', '4', '1'], 1, '// est la division entière.'], + ['Que vaut 7 % 2 ?', ['1', '3', '3.5', '0'], 0, '% donne le reste.'], + ['Combien de tours fait for i in range(2, 10, 3) ?', ['2', '3', '4', '8'], 1, 'i prend 2, 5, 8.'], + ['Que renvoie input() ?', ['Un int', 'Un str', 'Un float', 'Un bool'], 1, 'Toujours une chaîne.'], + ['Que vaut notes[-1] pour notes = [12, 15, 9] ?', ['12', '15', '9', 'Erreur'], 2, '-1 désigne le dernier élément.'], + ['Que fait return dans une fonction ?', ['Affiche une valeur', 'Renvoie une valeur et sort de la fonction', 'Recommence la fonction', 'Rien'], 1, 'return termine la fonction avec un résultat.'], + ['Quelle boucle convient pour « redemander tant que la saisie est invalide » ?', ['for', 'while', 'range', 'if'], 1, 'On ne connaît pas le nombre de tours.'], + ['Que produit "3" + "4" ?', ['7', '"34"', 'Erreur', '"7"'], 1, 'Concaténation de chaînes.']], + td: [ + { n: 'Échauffement', c: 'Écrire un programme qui demande l’année de naissance et affiche l’âge en 2026.', r: 'annee = int(input("Année : "))\nprint(2026 - annee)' }, + { n: 'Application', c: 'Écrire est_pair(n) qui renvoie True si n est pair, puis afficher les nombres pairs de 1 à 30.', r: 'def est_pair(n):\n return n % 2 == 0\n\nfor i in range(1, 31):\n if est_pair(i):\n print(i)' }, + { n: 'Application', c: 'Écrire mention(note) qui renvoie « TB », « B », « AB », « Passable » ou « Insuffisant ».', r: 'def mention(n):\n if n >= 16: return "TB"\n if n >= 14: return "B"\n if n >= 12: return "AB"\n if n >= 10: return "Passable"\n return "Insuffisant"' }, + { n: 'Approfondissement', c: 'Écrire maximum(liste) sans utiliser max(), avec ses tests.', r: 'def maximum(l):\n m = l[0]\n for x in l:\n if x > m:\n m = x\n return m\n\nassert maximum([3, 9, 2]) == 9' }, + { n: 'Approfondissement', c: 'Compter le nombre d’occurrences de chaque mot d’une phrase avec un dictionnaire.', r: 'compte = {}\nfor mot in phrase.split():\n compte[mot] = compte.get(mot, 0) + 1' }], + tp: { type: 'IDE Python', url: 'apercu-ide.html?ex=py-pair', desc: 'Exercices corrigés par des tests automatiques, directement dans le navigateur.', etapes: ['Parité et multiples', 'Somme et moyenne d’une liste', 'Compter les voyelles', 'Jeu du nombre mystère', 'Défi : FizzBuzz'] }, + plusLoin: [['France-IOI · parcours Python', 'https://www.france-ioi.org/'], ['HackerRank · Python', 'https://www.hackerrank.com/domains/python'], ['DataCamp · Introduction to Python', 'https://www.datacamp.com/courses/intro-to-python-for-data-science']] }, + +{ id: 'web', match: /HTML|CSS|Le Web|HTTP|serveur web|Apache/i, + titre: 'Le Web : HTTP, HTML, CSS et serveur web', duree: '5 h (CM 1 h 30 · TD 1 h 30 · TP 2 h)', niveau: 'SNT · NSI Première · BTS SIO · BTS CIEL', + prerequis: ['Modèles OSI et TCP/IP (conseillé)'], + competences: ['SNT · Le Web', 'NSI 1re · Interactions entre l’homme et la machine sur le Web', 'BTS SIO · Bloc 1 · Mettre à disposition un service'], + intro: 'Chaque fois que vous ouvrez une page, votre navigateur échange des messages HTTP avec un serveur, puis affiche du HTML mis en forme par du CSS. Comprendre cet échange, c’est pouvoir créer un site, mais aussi le dépanner et le sécuriser.', + cm: [ + { t: 'URL et architecture client-serveur', d: '15 min', html: 'Le client (navigateur) envoie une requête, le serveur (Apache, Nginx) répond. L’URL précise tout : https://www.lycee.fr:443/cours/index.html?id=3 = protocole, nom d’hôte, port, chemin, paramètres.' }, + { t: 'Le protocole HTTP', d: '20 min', html: 'HTTP est un protocole texte. La requête contient une méthode, un chemin et des en-têtes ; la réponse contient un code d’état, des en-têtes et un corps.', exemple: 'GET /index.html HTTP/1.1\nHost: www.lycee.fr\n\nHTTP/1.1 200 OK\nContent-Type: text/html; charset=utf-8\n\n…', table: [['Code', 'Sens'], ['200', 'OK'], ['301 / 302', 'redirection'], ['403', 'accès interdit'], ['404', 'ressource introuvable'], ['500', 'erreur du serveur']] }, + { t: 'HTML : la structure', d: '20 min', html: 'HTML décrit le sens du contenu avec des balises : titres <h1> à <h6>, paragraphes, listes, liens, images, formulaires. Une page bien structurée est lisible par les moteurs de recherche et les lecteurs d’écran.', exemple: '\n\nMon TP\n\n

                          Mon premier site

                          \n

                          Hébergé sur Debian.

                          \n\n' }, + { t: 'CSS : la présentation', d: '20 min', html: 'Une règle CSS associe un sélecteur à des déclarations. Sélecteurs : balise (p), classe (.carte), identifiant (#menu). La mise en page moderne repose sur display: flex et display: grid.', exemple: '.carte {\n border: 2px solid #000;\n padding: 16px;\n}\n.grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }' }, + { t: 'Formulaires : GET et POST', d: '10 min', html: 'Un formulaire envoie des données au serveur. GET les place dans l’URL (recherche, filtres). POST les place dans le corps de la requête (connexion, envoi de fichier).', attention: 'Un mot de passe ne doit jamais passer en GET : il finirait dans l’historique et les journaux du serveur.' }, + { t: 'Héberger : le serveur web', d: '15 min', html: 'Sous Debian, apt install apache2 installe le serveur ; les pages sont dans /var/www/html, la configuration dans /etc/apache2, les journaux dans /var/log/apache2. HTTPS ajoute TLS et un certificat (Let’s Encrypt).' }], + synthese: ['Client → requête HTTP → serveur → réponse avec code', 'HTML = structure, CSS = présentation', 'GET dans l’URL, POST dans le corps', 'Apache : /var/www/html et /var/log/apache2'], + qcm: [ + ['Que signifie le code 403 ?', ['Introuvable', 'Accès interdit', 'Erreur serveur', 'Redirection'], 1, '403 Forbidden.'], + ['Quelle partie de l’URL est ?id=3 ?', ['Le chemin', 'Les paramètres', 'Le port', 'Le protocole'], 1, 'La chaîne de requête.'], + ['Quelle balise pour le titre principal ?', ['', '<h1>', '<head>', '<header>'], 1, '<title> est le titre de l’onglet, <h1> celui de la page.'], + ['Quel sélecteur CSS cible class="carte" ?', ['#carte', '.carte', 'carte', '*carte'], 1, 'Le point cible une classe.'], + ['Pour un formulaire de connexion, on utilise :', ['GET', 'POST', 'PUT', 'HEAD'], 1, 'Les identifiants ne doivent pas apparaître dans l’URL.'], + ['Où Apache sert-il les pages par défaut sous Debian ?', ['/etc/apache2', '/var/www/html', '/home/www', '/srv/http'], 1, 'DocumentRoot par défaut.'], + ['Quel port utilise HTTPS ?', ['80', '443', '8080', '22'], 1, 'HTTP 80, HTTPS 443.']], + td: [ + { n: 'Échauffement', c: 'Décomposer https://ent.lycee.fr:8443/notes?eleve=12 : protocole, hôte, port, chemin, paramètres.', r: 'https · ent.lycee.fr · 8443 · /notes · eleve=12' }, + { n: 'Application', c: 'Écrire une page HTML avec un titre, une liste de 3 TP et un lien vers le lycée.', r: '<h1>Mes TP</h1>\n<ul><li>Terminal</li><li>Droits</li><li>Apache</li></ul>\n<a href="https://…">Mon lycée</a>' }, + { n: 'Application', c: 'Écrire le CSS pour afficher 3 cartes côte à côte, avec une bordure noire.', r: '.grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }\n.carte { border: 2px solid #000; padding: 16px; }' }, + { n: 'Approfondissement', c: 'Avec curl, afficher uniquement les en-têtes de réponse de https://example.org et relever le code et le type de contenu.', r: 'curl -I https://example.org → HTTP/2 200, content-type: text/html' }], + tp: { type: 'Lab web', url: 'apercu-lab-web.html', desc: 'Terminal et navigateur reliés : installer Apache, publier sa page, la voir en direct.', etapes: ['apt install apache2', 'Vérifier le service', 'Remplacer index.html', 'Actualiser le navigateur relié', 'Lire le journal d’accès'] }, + plusLoin: [['MDN Web Docs (Mozilla)', 'https://developer.mozilla.org/fr/'], ['freeCodeCamp · Responsive Web Design', 'https://www.freecodecamp.org/']] }, + +{ id: 'crypto', match: /mot de passe|hachage|chiffrement|crypto|cybers|sécurité des accès|SSH par clé/i, + titre: 'Cryptographie appliquée : hachage, chiffrement, clés', duree: '5 h (CM 2 h · TD 1 h 30 · TP 1 h 30)', niveau: 'BTS SIO · BTS CIEL · BUT R&T Cyber · Master cybersécurité', + prerequis: ['Binaire et hexadécimal', 'Le terminal Linux'], + competences: ['BTS SIO · Bloc 3 · Cybersécurité des services informatiques', 'BTS CIEL · C08 · Sécuriser', 'BUT R&T parcours Cyber · Compétence « Protéger »'], + intro: 'Mots de passe stockés, sites en HTTPS, connexions SSH, signatures de mises à jour : la cryptographie protège presque tout ce que nous faisons en ligne. L’objectif n’est pas de devenir cryptographe, mais de savoir choisir et configurer les bons outils.', + cm: [ + { t: 'Les trois objectifs', d: '10 min', html: '<b>Confidentialité</b> : seul le destinataire lit le message (chiffrement). <b>Intégrité</b> : le message n’a pas été modifié (hachage, MAC). <b>Authenticité</b> : on sait qui l’a envoyé (signature, certificat).' }, + { t: 'Les fonctions de hachage', d: '20 min', html: 'Une fonction de hachage produit une empreinte de taille fixe. Elle est à sens unique, et un seul bit changé en entrée change complètement l’empreinte. Usages : vérifier un fichier téléchargé, stocker un mot de passe, signer.', exemple: '$ echo -n "bonjour" | sha256sum\n2cb4b1431b84ec15d35ed83bb927e27e8967d75f4bcd9cc4b25c8d879ae23e18\n$ echo -n "Bonjour" | sha256sum\n9172e8eec99f144f72eca9a568759580edadb2cfd154857f07e657569493bc44', attention: 'MD5 et SHA-1 sont cassés (collisions) : ne plus les utiliser pour la sécurité.' }, + { t: 'Stocker un mot de passe', d: '20 min', html: 'On ne stocke jamais un mot de passe en clair ni chiffré, mais un <b>hachage lent et salé</b>. Le <b>sel</b>, aléatoire et unique par compte, empêche les tables précalculées ; la lenteur (bcrypt, scrypt, Argon2) freine la force brute.', table: [['Méthode', 'Verdict'], ['En clair', 'interdit'], ['MD5 / SHA-1', 'cassé'], ['SHA-256 sans sel', 'insuffisant'], ['bcrypt, Argon2id', 'recommandé']] }, + { t: 'Chiffrement symétrique', d: '15 min', html: 'Une même clé chiffre et déchiffre. <b>AES</b> (128 ou 256 bits) est le standard : très rapide, il chiffre les disques, les fichiers, le trafic une fois la session établie. Le problème est d’échanger la clé de façon sûre.' }, + { t: 'Chiffrement asymétrique', d: '20 min', html: 'Chaque personne possède une paire de clés : la <b>publique</b>, diffusée, et la <b>privée</b>, gardée secrète. On chiffre avec la clé publique du destinataire ; lui seul déchiffre avec sa clé privée. À l’inverse, on <b>signe</b> avec sa clé privée et chacun vérifie avec la clé publique. Algorithmes : RSA, courbes elliptiques (Ed25519).' }, + { t: 'En pratique : HTTPS et SSH', d: '15 min', html: '<b>HTTPS (TLS)</b> : le serveur présente un certificat signé par une autorité ; un échange asymétrique établit une clé de session, puis AES chiffre le trafic. <b>SSH</b> : l’authentification par clé remplace le mot de passe.', exemple: '$ ssh-keygen -t ed25519 -C "eleve@syllabus"\n$ ssh-copy-id eleve@192.168.10.10\n$ ssh eleve@192.168.10.10 # plus de mot de passe demandé' }], + synthese: ['Hachage = sens unique, pour l’intégrité', 'Mots de passe : bcrypt ou Argon2, avec sel', 'Symétrique (AES) rapide, asymétrique (RSA, Ed25519) pour échanger et signer', 'Chiffrer avec la clé publique, signer avec la clé privée'], + qcm: [ + ['Quel objectif assure une fonction de hachage ?', ['Confidentialité', 'Intégrité', 'Disponibilité', 'Anonymat'], 1, 'Elle détecte toute modification.'], + ['Pourquoi ajouter un sel ?', ['Accélérer', 'Rendre chaque hachage unique et empêcher les tables précalculées', 'Chiffrer le mot de passe', 'Compresser'], 1, 'Deux mots de passe identiques n’ont plus la même empreinte.'], + ['Quel algorithme est recommandé pour stocker un mot de passe ?', ['MD5', 'SHA-1', 'Argon2id', 'AES'], 2, 'Lent, salé, conçu pour ça.'], + ['Pour envoyer un message confidentiel à Alice, on chiffre avec :', ['sa clé privée', 'sa clé publique', 'notre clé publique', 'un hachage'], 1, 'Seule sa clé privée le déchiffrera.'], + ['Pour signer un document, on utilise :', ['sa propre clé privée', 'la clé publique du destinataire', 'AES', 'SHA-1'], 0, 'Tout le monde vérifie avec notre clé publique.'], + ['Dans HTTPS, les données de la page sont chiffrées avec :', ['RSA uniquement', 'une clé de session symétrique', 'le certificat', 'un hachage'], 1, 'L’asymétrique sert à établir la clé de session.'], + ['Quelle commande génère une paire de clés SSH moderne ?', ['ssh-keygen -t ed25519', 'ssh-copy-id', 'openssl md5', 'gpg --hash'], 0, 'Ed25519 est recommandé.']], + td: [ + { n: 'Échauffement', c: 'Pour chaque besoin, dire s’il faut hacher, chiffrer ou signer : stocker les mots de passe, envoyer un bulletin confidentiel, prouver qu’une mise à jour vient bien de l’éditeur.', r: 'hacher (lent, salé) · chiffrer · signer' }, + { n: 'Application', c: 'Vérifier l’intégrité d’une image ISO téléchargée à partir de son fichier SHA256SUMS.', r: 'sha256sum -c SHA256SUMS --ignore-missing' }, + { n: 'Application', c: 'Une base de 10 000 comptes a fuité, hachée en MD5 sans sel. Expliquer les risques et la correction.', r: 'Les mots de passe courants sont retrouvés instantanément (tables arc-en-ciel). Forcer la réinitialisation et passer à Argon2id avec sel.' }, + { n: 'Approfondissement', c: 'Configurer un serveur SSH pour refuser les connexions par mot de passe et celles de root.', r: 'Dans /etc/ssh/sshd_config :\nPasswordAuthentication no\nPermitRootLogin no\npuis systemctl restart ssh' }], + tp: { type: 'Lab VM', url: 'apercu-labs.html', desc: 'Générer une paire de clés, se connecter sans mot de passe, durcir sshd.', etapes: ['Comparer des hachages SHA-256', 'Générer une clé Ed25519', 'Déposer la clé sur le serveur', 'Désactiver l’authentification par mot de passe', 'Vérifier dans /var/log/auth.log'] }, + plusLoin: [['ANSSI · Guide de sélection d’algorithmes cryptographiques', 'https://cyber.gouv.fr/publications/mecanismes-cryptographiques'], ['CNIL · Recommandations sur les mots de passe', 'https://www.cnil.fr/fr/mots-de-passe-une-nouvelle-recommandation-pour-maitriser-sa-securite'], ['Root-Me · challenges cryptanalyse', 'https://www.root-me.org/']] } +]); diff --git a/design/js/contenus-alias.js b/design/js/contenus-alias.js new file mode 100644 index 0000000..8e45a76 --- /dev/null +++ b/design/js/contenus-alias.js @@ -0,0 +1,33 @@ +// Élargit la correspondance de cours complets existants aux chapitres qu’ils couvrent réellement +(function () { +var ext = { + terminal: /Fichiers : cp, mv|Lire et éditer|cat, less|Mode examen « Admin Linux »/i, + archi: /Performance : vmstat|Noyau et modules|lsmod|sysctl/i, + diagnostic0: /\bARP\b|ICMP, ping, traceroute|TCP et UDP : ports|Analyse de trames|Dépannage : réseau cassé|Mode examen « Réseau »/i, + sql: /Modèle relationnel|Agrégats : GROUP BY|DDL : CREATE|DML : INSERT|Vues, procédures|Transactions et ACID|Index, EXPLAIN/i, + tubes: /Expressions régulières/i, + binaire: /Codage des entiers/i, + crypto: /PKI, autorité de certification|X\.509|\bGPG\b/i, + pandas: /Nettoyage et qualité des données|Visualisation et tableaux de bord|Mode examen « Data »/i, + ml: /Sur-apprentissage|Biais, éthique|Sécurité des modèles/i, + neurones: /Traitement du langage et de la voix/i, + iot: /Node-RED|Modbus|CoAP/i, + python: /Mode examen « épreuve pratique NSI »|Types construits|Épreuve pratique chronométrée|Projets?$|Grand oral et projets|SAÉ|Projet technique|Projet de fin d’études|Projet data|Réaliser un développement d’application|Développement web et applications/i, + web2: /Photographie numérique|Histoire de l’informatique|Applications web|Développement : web, API/i, + iot2: /Chaîne d’information et chaîne d’énergie|Localisation et cartographie|GPS, NMEA/i, + ipv42: /Préparer une installation|plan d’adressage|Réseaux et infrastructure du SI/i, + dns2: /Présence en ligne/i, + sauvegarde: /Maintenir et dépanner : diagnostic, sauvegarde/i, + diagnostic2: /Épreuves pratiques|Épreuves blanches|Maintenir et sécuriser l’infrastructure|Administrer et sécuriser les infrastructures/i, + systemd: /Systèmes : Linux|Exploiter les serveurs Linux|LPIC-1|LFCS/i, + routagedyn: /réseau fondamental|CCNA/i, + vulns: /Sécurité offensive|pentest|exploitation/i, + ml2: /Éthique, biais et AI Act/i, + bigdata: /Ingénierie des données et big data/i, + modelisation: /Systèmes d’information et urbanisation|Génie logiciel et architecture/i +}; +(window.CONTENUS_PRO || []).forEach(function (c) { + if (!c.intro) return; + Object.keys(ext).forEach(function (k) { if (k.replace(/\d+$/, '') === c.id) c.match = new RegExp(c.match.source + '|' + ext[k].source, 'i'); }); +}); +})(); diff --git a/design/js/contenus-data-4.js b/design/js/contenus-data-4.js new file mode 100644 index 0000000..336e0f3 --- /dev/null +++ b/design/js/contenus-data-4.js @@ -0,0 +1,171 @@ +// Cours complets · Data & IA lot 4 : pandas, apprentissage automatique, réseaux de neurones +(function () { +var reg = function (c) { + (window.CONTENUS_PRO = window.CONTENUS_PRO || []).unshift(c.cours); + (window.CONTENUS_PLUS = window.CONTENUS_PLUS || {})[c.cours.id] = c.plus; + (window.CONTENUS_EXEMPLES = window.CONTENUS_EXEMPLES || {})[c.cours.id] = c.exemples; + (window.CONTENUS_SCHEMAS = window.CONTENUS_SCHEMAS || {})[c.cours.id] = { termes: c.termes, figs: [] }; +}; + +reg({ +cours: { id: 'pandas', match: /pandas|analyse de données|dataframe|traitement de données|données tabulaires|CSV/i, + titre: 'Analyse de données avec pandas : charger, nettoyer, agréger', duree: '', + niveau: 'NSI Terminale · BTS SIO SLAM · BUT Informatique / SD · Master data', + prerequis: ['Python : listes, dictionnaires, fonctions', 'SQL : SELECT, GROUP BY'], + competences: ['NSI · Traitement de données en tables', 'BTS SIO SLAM · Exploiter des données', 'BUT SD · Traiter des données'], + intro: 'Les données réelles arrivent sales : exports Pronote en point-virgule avec des virgules décimales, cellules vides, doublons, dates au format texte, noms mal orthographiés. Avant toute statistique ou tout modèle d’IA, un data engineer passe l’essentiel de son temps à les charger, les nettoyer et les restructurer. pandas est la bibliothèque Python de référence pour ce travail : elle manipule des tableaux de millions de lignes avec une syntaxe proche de SQL.', + cm: [ + { t: 'Series et DataFrame', d: '', html: 'Une <b>Series</b> est une colonne typée avec un <b>index</b> ; un <b>DataFrame</b> est un tableau de Series partageant le même index. Chaque colonne a un <b>dtype</b> (int64, float64, object pour le texte, datetime64, category). Les opérations sont <b>vectorisées</b> : <code>df["note"] * 2</code> s’applique à toute la colonne en une instruction, bien plus vite qu’une boucle Python.' }, + { t: 'Charger des données réelles', d: '', html: '<code>pd.read_csv</code> accepte de nombreux paramètres indispensables avec les exports français : <code>sep=";"</code>, <code>decimal=","</code>, <code>encoding="utf-8-sig"</code> ou <code>"latin-1"</code>, <code>parse_dates</code>, <code>dtype</code>. On inspecte toujours avant de calculer : <code>df.head()</code>, <code>df.info()</code> (types et valeurs manquantes), <code>df.describe()</code> (statistiques).', exemple: 'import pandas as pd\ndf = pd.read_csv("notes.csv", sep=";", decimal=",", encoding="utf-8-sig", parse_dates=["date"], dayfirst=True)\ndf.info()' }, + { t: 'Sélectionner et filtrer', d: '', html: '<code>df["col"]</code> sélectionne une colonne, <code>df[["a","b"]]</code> plusieurs. <code>df.loc[lignes, colonnes]</code> sélectionne par étiquette, <code>df.iloc</code> par position. Le filtrage utilise des masques booléens combinés par <code>&</code>, <code>|</code> et <code>~</code>, chaque condition entre parenthèses.', exemple: 'df.loc[(df["classe"] == "SIO1") & (df["note"] < 8), ["nom", "matiere", "note"]]', attention: 'Modifier le résultat d’un filtre (df[df.note < 8]["note"] = 8) ne modifie pas df et produit un avertissement SettingWithCopy. On écrit df.loc[df.note < 8, "note"] = 8.' }, + { t: 'Nettoyer', d: '', html: 'Les valeurs manquantes sont <code>NaN</code>. <code>isna().sum()</code> les compte, <code>dropna</code> retire les lignes, <code>fillna</code> les remplace. Le choix est métier : une note absente n’est pas un zéro. <code>drop_duplicates</code> retire les doublons, <code>str.strip().str.upper()</code> normalise le texte, <code>astype</code> et <code>pd.to_numeric(errors="coerce")</code> convertissent les types en transformant les valeurs invalides en NaN.' }, + { t: 'Agréger et joindre', d: '', html: '<code>groupby</code> découpe, applique, combine, exactement comme GROUP BY en SQL : <code>df.groupby("classe")["note"].agg(["mean","median","count"])</code>. <code>pivot_table</code> produit un tableau croisé. <code>merge</code> joint deux DataFrame comme un JOIN, avec <code>how="left"</code> pour garder toutes les lignes de gauche et <code>validate="m:1"</code> pour vérifier qu’on ne multiplie pas les lignes par erreur.' }, + { t: 'Performances et export', d: '', html: 'Sur de gros volumes : lire seulement les colonnes utiles (<code>usecols</code>), typer le texte répétitif en <code>category</code>, éviter <code>apply</code> ligne à ligne au profit des opérations vectorisées, et stocker les résultats intermédiaires en <b>Parquet</b>, format colonne compressé et typé, bien plus rapide que le CSV. L’export final se fait avec <code>to_csv</code>, <code>to_excel</code> ou directement dans une base avec <code>to_sql</code>.' } + ], + synthese: ['DataFrame = colonnes typées partageant un index ; opérations vectorisées', 'read_csv avec sep, decimal, encoding, parse_dates', 'Inspecter : head, info, describe, isna().sum()', 'loc pour sélectionner et modifier ; masques entre parenthèses', 'Valeurs manquantes : décision métier', 'groupby, pivot_table, merge avec validate', 'Parquet et category pour les gros volumes'], + qcm: [ + ['Quel paramètre pour lire « 12,5 » comme un nombre ?', ['sep=","', 'decimal=","', 'dtype=float', 'encoding'], 1, 'Virgule décimale française.'], + ['Que montre df.info() ?', ['Les 5 premières lignes', 'Types et nombre de valeurs non nulles par colonne', 'La moyenne', 'Le graphique'], 1, 'Premier réflexe.'], + ['Comment combiner deux conditions ?', ['and', '(c1) & (c2)', 'c1 && c2', 'c1 + c2'], 1, 'Opérateurs bit à bit sur des masques.'], + ['Une note absente doit-elle devenir 0 ?', ['Toujours', 'Non, c’est une décision métier (absence ≠ zéro)', 'Oui avec fillna', 'Peu importe'], 1, 'Elle fausserait la moyenne.'], + ['Équivalent pandas de GROUP BY ?', ['merge', 'groupby', 'pivot', 'concat'], 1, 'Découper, appliquer, combiner.'], + ['Pourquoi préférer Parquet au CSV pour les fichiers intermédiaires ?', ['Plus lisible', 'Typé, compressé, lecture par colonne rapide', 'Obligatoire', 'Compatible Excel'], 1, 'Format colonne.'] + ], + td: [ + { n: 'Application', c: 'Charger l’export notes.csv (point-virgule, virgule décimale), afficher le nombre de notes manquantes par matière, puis la moyenne par classe et par matière en tableau croisé.', r: 'df = pd.read_csv("notes.csv", sep=";", decimal=",")\ndf.groupby("matiere")["note"].apply(lambda s: s.isna().sum())\ndf.pivot_table(index="classe", columns="matiere", values="note", aggfunc="mean").round(1)' }, + { n: 'Application', c: 'Joindre notes.csv et eleves.csv sur l’identifiant, en vérifiant qu’aucun élève n’est dupliqué, et lister les élèves sans aucune note.', r: 'm = eleves.merge(notes, on="id", how="left", validate="1:m")\nm[m["note"].isna()].drop_duplicates("id")[["nom","prenom"]]' }, + { n: 'Approfondissement', c: 'Repérer les élèves dont la moyenne a baissé de plus de 3 points entre le 1er et le 2e trimestre.', r: 'p = df.pivot_table(index="id", columns="trimestre", values="note", aggfunc="mean")\np[(p[1] - p[2]) > 3]' } + ], + tp: { type: 'IDE Python', url: 'apercu-ide.html', desc: 'Jeu de données anonymisé d’un établissement, tests automatiques.', etapes: ['Charger et inspecter', 'Nettoyer types et doublons', 'Agrégats par classe', 'Jointure avec les effectifs', 'Exporter un bilan en CSV'] }, + plusLoin: [['Documentation pandas', 'https://pandas.pydata.org/docs/'], ['DataCamp · Data Manipulation with pandas', 'https://www.datacamp.com/courses/data-manipulation-with-pandas'], ['data.gouv.fr · jeux de données ouverts', 'https://www.data.gouv.fr/']] }, +plus: { cas: { titre: '', texte: '' }, + resolu: { enonce: 'Le tableau de bord du conseil de classe affiche une moyenne générale de 4,2 pour la SIO1, alors que les enseignants constatent des moyennes autour de 12. Trouver et corriger l’erreur du script d’analyse.', etapes: [ + ['Inspecter les types', 'df.info()\n note 1840 non-null object\n→ La colonne note est du texte : read_csv n’a pas reconnu la virgule décimale.'], + ['Voir ce qui a été calculé', 'df["note"].head(3)\n0 12,5\n1 14\n2 abs\n→ Des valeurs « abs » et des virgules. Le script faisait pd.to_numeric(errors="coerce") : « 12,5 » et « abs » devenaient NaN puis étaient remplacés par 0 avec fillna(0).'], + ['Corriger le chargement', 'df = pd.read_csv("notes.csv", sep=";", decimal=",", na_values=["abs", "ABS", "disp"])\ndf["note"].dtype\nfloat64\n→ Les absences deviennent des valeurs manquantes, pas des zéros.'], + ['Recalculer', 'df.groupby("classe")["note"].mean().round(2)\nSIO1 11.87\n→ Moyenne cohérente avec le terrain.'], + ['Prévenir', '→ Ajout de contrôles automatiques dans le script : assert df["note"].between(0, 20).all(), et journalisation du nombre d’absences traitées. Aucun fillna(0) sur des notes.'] + ] }, + erreurs: ['Oublier decimal="," sur un export français', 'Remplacer les absences par zéro', 'Modifier un filtre au lieu d’utiliser loc', 'Boucler ligne par ligne avec iterrows', 'Joindre sans vérifier les doublons', 'Calculer sans avoir regardé info()'], + memo: [['Instruction', 'Usage'], ['pd.read_csv(f, sep=";", decimal=",")', 'lire un export français'], ['df.head() · df.info() · df.describe()', 'inspecter'], ['df.isna().sum()', 'valeurs manquantes par colonne'], ['df.loc[masque, cols]', 'filtrer et sélectionner'], ['df.groupby(k)[c].agg([...])', 'agréger'], ['df.pivot_table(index, columns, values)', 'tableau croisé'], ['a.merge(b, on, how, validate)', 'joindre'], ['df.drop_duplicates()', 'retirer les doublons'], ['pd.to_numeric(s, errors="coerce")', 'convertir en nombre'], ['df.to_parquet() · df.to_csv()', 'exporter']], + examen: { titre: 'Sujet type · 20 points', q: ['Écrire le chargement d’un export fourni. (3 pts)', 'Nettoyer les valeurs manquantes en justifiant. (4 pts)', 'Produire trois agrégats demandés. (6 pts)', 'Joindre deux tables et détecter les incohérences. (4 pts)', 'Expliquer vectorisation et Parquet. (3 pts)'], r: ['read_csv paramétré', 'na_values, pas de 0', 'groupby / pivot_table', 'merge validate, how', 'voir cours'] }, + prof: { deroule: [['Ouverture', 'Un vrai export raté projeté'], ['Cours', 'DataFrame, chargement, inspection'], ['Pratique', 'Nettoyage dans l’IDE'], ['Pratique', 'Agrégats et jointures'], ['Clôture', 'Quiz flash']], diff: 'Élèves en difficulté : cellules à trous. Élèves avancés : Parquet, polars, DataCamp.', eval: 'Tests IDE, sujet type.' } }, +exemples: [ + ['Inspecter un export', 'Premier chargement.', 'df.info()', 'RangeIndex: 1840 entries\n # Column Non-Null Count Dtype\n 0 nom 1840 non-null object\n 1 classe 1840 non-null object\n 2 note 1712 non-null float64\n 3 date 1840 non-null datetime64[ns]', '128 notes manquantes (absences), types corrects : on peut calculer.'], + ['Compter par groupe', 'Effectifs par classe.', 'df.groupby("classe")["nom"].nunique()', 'classe\nSIO1 31\nSIO2 27', 'nunique compte les élèves distincts, pas le nombre de lignes de notes.'], + ['Détecter des doublons', 'Un élève apparaît deux fois.', 'eleves[eleves.duplicated("ine", keep=False)]', ' ine nom prenom\n12 070123456AB MARTIN Léa\n88 070123456AB Martin Lea', 'Même identifiant INE, casse et accents différents : on normalise avant de dédoublonner.'], + ['Jointure qui multiplie les lignes', 'Le nombre de lignes explose après merge.', 'notes.merge(eleves, on="nom", validate="m:1")', 'MergeError: Merge keys are not unique in right dataset; not a many-to-one merge', 'Deux élèves portent le même nom : on joint sur l’identifiant, jamais sur le nom.'], + ['Tableau croisé', 'Bilan pour le conseil.', 'df.pivot_table(index="classe", columns="matiere", values="note", aggfunc="mean").round(1)', 'matiere Maths Réseaux Dev\nclasse\nSIO1 11.2 12.8 10.4\nSIO2 12.0 13.1 12.7', 'Le Dev de SIO1 est le point faible, piste pour le conseil.'], + ['Mesurer un gain de performance', 'Script lent sur 2 millions de lignes.', '%timeit df["total"] = df.apply(lambda r: r.note * r.coef, axis=1)\n%timeit df["total"] = df["note"] * df["coef"]', '8.41 s ± 120 ms\n6.2 ms ± 0.3 ms', 'La version vectorisée est plus de mille fois plus rapide.'] +], +termes: ['pandas', 'DataFrame', 'Series', 'index', 'dtype', 'read_csv', 'loc', 'iloc', 'NaN', 'isna', 'fillna', 'dropna', 'groupby', 'agg', 'pivot_table', 'merge', 'validate', 'drop_duplicates', 'Parquet', 'category', 'vectorisé'] +}); + +reg({ +cours: { id: 'ml', match: /apprentissage automatique|machine learning|scikit|régression|classification|intelligence artificielle|\bIA\b/i, + titre: 'Apprentissage automatique : du jeu de données au modèle évalué', duree: '', + niveau: 'NSI Terminale (k plus proches voisins) · BUT SD / Informatique · École d’ingénieurs · Master IA', + prerequis: ['Analyse de données avec pandas', 'Statistiques descriptives'], + competences: ['NSI · Algorithme des k plus proches voisins', 'BUT SD · Modéliser', 'Master · Concevoir un système d’apprentissage'], + intro: 'Un modèle d’apprentissage automatique apprend une règle à partir d’exemples plutôt qu’on ne la lui programme. Il détecte un courriel frauduleux, prédit le risque de décrochage d’un élève ou reconnaît un caractère manuscrit. Mais un modèle mal évalué donne des chiffres flatteurs et des décisions fausses. Ce module suit la démarche complète avec scikit-learn : préparer les données, séparer apprentissage et test, choisir un modèle, mesurer correctement, et comprendre les limites éthiques et réglementaires.', + cm: [ + { t: 'Apprendre à partir d’exemples', d: '', html: 'En <b>apprentissage supervisé</b>, chaque exemple a des <b>variables explicatives</b> (X) et une <b>cible</b> (y) connue : on apprend à prédire y à partir de X. C’est une <b>classification</b> si y est une catégorie (décroche / ne décroche pas), une <b>régression</b> si y est un nombre (note finale). En <b>apprentissage non supervisé</b>, il n’y a pas de cible : on cherche une structure, par exemple des groupes d’élèves aux profils proches (clustering).' }, + { t: 'Séparer apprentissage et test', d: '', html: 'Un modèle évalué sur les données qui ont servi à l’entraîner paraît toujours excellent : il les a apprises par cœur. On sépare donc un <b>jeu d’apprentissage</b> et un <b>jeu de test</b> jamais vu (<code>train_test_split</code>, souvent 80/20, stratifié pour garder la proportion des classes). Pour régler les hyperparamètres sans toucher au test, on utilise la <b>validation croisée</b> : l’apprentissage est découpé en k parts, chacune servant tour à tour de validation.<br><br>Le <b>surapprentissage</b> (overfitting) se voit quand le score d’apprentissage est très bon et celui de test nettement moins bon ; le <b>sous-apprentissage</b> quand les deux sont mauvais.', attention: 'La fuite de données (data leakage) fausse tout : normaliser toutes les données avant la séparation, ou inclure une variable connue seulement après coup (la note finale pour prédire le décrochage), donne un modèle parfait en test et inutile en réalité.' }, + { t: 'Préparer les variables', d: '', html: 'Les modèles attendent des nombres. On <b>encode</b> les catégories (OneHotEncoder), on <b>normalise</b> les échelles (StandardScaler) pour les modèles sensibles aux distances comme les k plus proches voisins, on traite les valeurs manquantes (SimpleImputer). Un <b>Pipeline</b> enchaîne ces étapes et le modèle : il apprend les paramètres de préparation sur l’apprentissage uniquement et les applique au test, ce qui évite la fuite de données.', exemple: 'from sklearn.pipeline import make_pipeline\nfrom sklearn.compose import make_column_transformer\nfrom sklearn.preprocessing import StandardScaler, OneHotEncoder\nfrom sklearn.ensemble import RandomForestClassifier\n\nprep = make_column_transformer(\n (StandardScaler(), ["absences", "moyenne_t1", "retards"]),\n (OneHotEncoder(handle_unknown="ignore"), ["filiere"]))\nmodele = make_pipeline(prep, RandomForestClassifier(n_estimators=300, random_state=0))\nmodele.fit(X_train, y_train)' }, + { t: 'Quelques modèles de référence', d: '', html: 'Les <b>k plus proches voisins</b> (au programme de NSI) classent un exemple selon la classe majoritaire de ses k voisins les plus proches. La <b>régression linéaire</b> et la <b>régression logistique</b> sont simples, rapides et interprétables. Les <b>arbres de décision</b> produisent des règles lisibles ; les <b>forêts aléatoires</b> et le <b>gradient boosting</b> en combinent des centaines et sont souvent les plus performants sur des données tabulaires. On commence toujours par une <b>référence simple</b> (prédire la classe majoritaire) pour savoir si le modèle apporte vraiment quelque chose.' }, + { t: 'Mesurer correctement', d: '', html: 'L’<b>exactitude</b> (accuracy) trompe quand les classes sont déséquilibrées : si 5 % des élèves décrochent, prédire « personne ne décroche » donne 95 %. La <b>matrice de confusion</b> distingue vrais et faux positifs et négatifs. La <b>précision</b> mesure la part de vrais positifs parmi les alertes, le <b>rappel</b> la part des vrais cas détectés, le <b>F1</b> leur moyenne harmonique. Le choix dépend du coût des erreurs : manquer un élève en difficulté coûte plus cher qu’un entretien inutile, on privilégie donc le rappel. En régression, on utilise l’erreur absolue moyenne (MAE) ou la racine de l’erreur quadratique (RMSE).' }, + { t: 'Éthique et cadre légal', d: '', html: 'Un modèle reproduit les biais de ses données : entraîné sur des décisions passées discriminantes, il les automatise. Pour des décisions qui touchent des personnes, et a fortiori des mineurs, on vérifie les performances par sous-groupe, on garde un humain dans la décision et on explique les facteurs du modèle. Le <b>RGPD</b> encadre les décisions individuelles automatisées (article 22) et impose la minimisation des données ; le <b>règlement européen sur l’IA</b> (AI Act) classe l’éducation parmi les usages à haut risque, soumis à des obligations de documentation, de qualité des données et de supervision humaine.' } + ], + synthese: ['Supervisé (classification, régression) ou non supervisé', 'Toujours évaluer sur un jeu de test jamais vu ; validation croisée pour régler', 'Pipeline pour préparer sans fuite de données', 'Partir d’une référence simple', 'Accuracy trompeuse si déséquilibre : matrice de confusion, précision, rappel, F1', 'Biais, supervision humaine, RGPD article 22, AI Act'], + qcm: [ + ['Prédire la note finale d’un élève est une :', ['classification', 'régression', 'clustering', 'réduction de dimension'], 1, 'La cible est un nombre.'], + ['Score d’apprentissage 0,99, score de test 0,71 : c’est', ['du sous-apprentissage', 'du surapprentissage', 'normal', 'une fuite de données'], 1, 'Le modèle a appris par cœur.'], + ['5 % de décrocheurs : un modèle qui prédit « aucun » a une accuracy de :', ['5 %', '50 %', '95 %', '0 %'], 2, 'D’où les autres métriques.'], + ['Quelle métrique privilégier pour ne manquer aucun élève en difficulté ?', ['Précision', 'Rappel', 'Accuracy', 'MAE'], 1, 'Part des vrais cas détectés.'], + ['Pourquoi utiliser un Pipeline ?', ['Esthétique', 'Pour appliquer la préparation apprise sur l’apprentissage seulement, sans fuite', 'Plus rapide', 'Obligatoire'], 1, 'Évite la fuite de données.'], + ['Selon l’AI Act, l’usage de l’IA dans l’éducation est classé :', ['interdit', 'à haut risque', 'sans risque', 'non concerné'], 1, 'Obligations renforcées.'] + ], + td: [ + { n: 'Échauffement', c: 'Implémenter les k plus proches voisins en Python pur pour classer un point à partir d’une liste de points étiquetés.', r: 'def knn(pts, x, k):\n d = sorted(pts, key=lambda p: (p[0]-x[0])**2 + (p[1]-x[1])**2)[:k]\n etiq = [p[2] for p in d]\n return max(set(etiq), key=etiq.count)' }, + { n: 'Application', c: 'Entraîner une régression logistique et une forêt aléatoire sur le jeu fourni, comparer leur F1 en validation croisée à 5 plis, puis évaluer la meilleure sur le test.', r: 'from sklearn.model_selection import cross_val_score\nfor m in [logit, foret]:\n print(cross_val_score(m, X_train, y_train, cv=5, scoring="f1").mean())\nmeilleur.fit(X_train, y_train); f1_score(y_test, meilleur.predict(X_test))' }, + { n: 'Approfondissement', c: 'Vérifier si le modèle de détection du décrochage a un rappel différent pour les filles et les garçons, et proposer une conduite à tenir.', r: 'for g in ["F","M"]: m = X_test["sexe"] == g; recall_score(y_test[m], pred[m])\nSi écart important : examiner les données, rééquilibrer, ajuster le seuil par sous-groupe avec prudence, documenter, et garder la décision humaine.' } + ], + tp: { type: 'IDE Python', url: 'apercu-ide.html', desc: 'scikit-learn dans le navigateur (Pyodide), jeu de données synthétique.', etapes: ['Séparer apprentissage et test', 'Construire un Pipeline', 'Comparer trois modèles en validation croisée', 'Lire la matrice de confusion', 'Analyser les performances par sous-groupe'] }, + plusLoin: [['scikit-learn · guide utilisateur', 'https://scikit-learn.org/stable/user_guide.html'], ['CNIL · IA : dossiers et recommandations', 'https://www.cnil.fr/fr/intelligence-artificielle'], ['DataCamp · Supervised Learning with scikit-learn', 'https://www.datacamp.com/courses/supervised-learning-with-scikit-learn'], ['Kaggle Learn · Intro to Machine Learning', 'https://www.kaggle.com/learn/intro-to-machine-learning']] }, +plus: { cas: { titre: '', texte: '' }, + resolu: { enonce: 'Un prototype de détection du décrochage affiche 98 % d’exactitude et 0,97 de F1 en test. Mis en service sur la nouvelle année, il ne détecte presque aucun élève. Trouver pourquoi.', etapes: [ + ['Regarder les variables', 'modele[-1].feature_importances_ triées\nnb_absences_annee 0.71\nmoyenne_t1 0.08\n→ Le nombre d’absences sur l’année entière domine. En septembre, cette variable n’est pas encore connue.'], + ['Identifier la fuite', '→ La variable résume toute l’année, y compris la période où l’élève a déjà décroché : le modèle « prédit » à partir d’un effet du décrochage. C’est une fuite de données temporelle.'], + ['Reconstruire le jeu', 'Variables limitées à ce qui est connu au 15 octobre : absences et retards de septembre, moyenne des premières évaluations, filière.\nSéparation temporelle : apprentissage sur 2022-2024, test sur 2025.\n→ On évalue comme on utilisera le modèle.'], + ['Réévaluer', 'F1 test : 0.58, rappel 0.71, précision 0.49\n→ Scores plus modestes mais honnêtes : le modèle repère 71 % des futurs décrocheurs, avec une alerte sur deux justifiée.'], + ['Décider de l’usage', '→ Usage limité à une aide au repérage pour l’équipe de vie scolaire, jamais une décision automatique ; analyse d’impact (AIPD) et information des familles. Documentation du modèle et de ses limites.'] + ] }, + erreurs: ['Évaluer sur les données d’apprentissage', 'Normaliser avant de séparer', 'Utiliser une variable connue après coup', 'Se fier à l’accuracy sur des classes déséquilibrées', 'Pas de référence simple', 'Décision automatique sur des élèves sans supervision humaine'], + memo: [['Instruction', 'Usage'], ['train_test_split(X, y, test_size=0.2, stratify=y)', 'séparer'], ['make_pipeline(prep, modele)', 'préparer sans fuite'], ['cross_val_score(m, X, y, cv=5, scoring="f1")', 'validation croisée'], ['GridSearchCV', 'régler les hyperparamètres'], ['DummyClassifier', 'référence simple'], ['confusion_matrix · classification_report', 'mesurer'], ['precision_score · recall_score · f1_score', 'métriques'], ['mean_absolute_error', 'régression'], ['feature_importances_ · permutation_importance', 'comprendre le modèle']], + examen: { titre: 'Sujet type · 20 points', q: ['Distinguer classification, régression, clustering. (3 pts)', 'Construire et évaluer un pipeline sur un jeu fourni. (8 pts)', 'Interpréter une matrice de confusion. (4 pts)', 'Identifier une fuite de données dans un cas donné. (3 pts)', 'Citer deux obligations RGPD ou AI Act. (2 pts)'], r: ['voir cours', 'split, pipeline, cv, test', 'précision, rappel', 'variable postérieure', 'art. 22, haut risque'] }, + prof: { deroule: [['Ouverture', 'Un modèle à 95 % qui ne sert à rien'], ['Cours', 'Supervisé, séparation, métriques'], ['Pratique', 'kNN à la main'], ['Pratique', 'Pipeline scikit-learn'], ['Débat', 'IA et décisions sur les élèves'], ['Clôture', 'Quiz flash']], diff: 'Élèves en difficulté : notebook guidé. Élèves avancés : gradient boosting, interprétabilité (SHAP), Kaggle.', eval: 'Notebook rendu, sujet type.' } }, +exemples: [ + ['Séparer proprement', 'Préparer l’évaluation.', 'X_tr, X_te, y_tr, y_te = train_test_split(X, y, test_size=0.2, stratify=y, random_state=0)\nprint(y_tr.mean(), y_te.mean())', '0.0512 0.0508', 'stratify garde la même proportion de cas positifs dans les deux jeux.'], + ['Référence simple', 'Savoir si le modèle apporte quelque chose.', 'DummyClassifier(strategy="most_frequent").fit(X_tr, y_tr).score(X_te, y_te)', '0.949', 'Toute accuracy inférieure à 95 % est pire que ne rien faire : il faut regarder rappel et F1.'], + ['Matrice de confusion', 'Évaluer le modèle.', 'confusion_matrix(y_te, pred)', '[[1782 31]\n [ 28 69]]', '69 décrocheurs repérés sur 97 (rappel 0,71), 31 fausses alertes sur 100 alertes (précision 0,69).'], + ['Rapport complet', 'Présenter les résultats.', 'print(classification_report(y_te, pred, target_names=["reste", "décroche"]))', ' precision recall f1-score support\n reste 0.98 0.98 0.98 1813\n décroche 0.69 0.71 0.70 97', 'La classe minoritaire est celle qui compte ; ses scores sont bien plus faibles que ceux de la majorité.'], + ['Détecter le surapprentissage', 'Arbre de décision très profond.', 'arbre.score(X_tr, y_tr), arbre.score(X_te, y_te)', '(1.0, 0.89)', 'Score parfait en apprentissage, bien moindre en test : on limite max_depth ou on passe à une forêt aléatoire.'], + ['Importance par permutation', 'Expliquer le modèle à l’équipe.', 'r = permutation_importance(modele, X_te, y_te, scoring="f1", n_repeats=10)\nsorted(zip(r.importances_mean, X_te.columns), reverse=True)[:3]', '[(0.21, "absences_sept"), (0.09, "moyenne_eval1"), (0.04, "retards_sept")]', 'Les absences de septembre sont le premier signal, cohérent avec l’expérience des CPE.'] +], +termes: ['apprentissage supervisé', 'classification', 'régression', 'clustering', 'jeu d’apprentissage', 'jeu de test', 'validation croisée', 'surapprentissage', 'fuite de données', 'Pipeline', 'StandardScaler', 'OneHotEncoder', 'k plus proches voisins', 'forêt aléatoire', 'matrice de confusion', 'précision', 'rappel', 'F1', 'accuracy', 'scikit-learn', 'AI Act', 'RGPD'] +}); + +reg({ +cours: { id: 'neurones', match: /réseaux? de neurones|deep learning|apprentissage profond|PyTorch|TensorFlow|OCR|reconnaissance vocale/i, + titre: 'Réseaux de neurones : principe, entraînement et applications (OCR, voix)', duree: '', + niveau: 'BUT Informatique / SD · École d’ingénieurs · Master IA', + prerequis: ['Apprentissage automatique', 'Dérivées et matrices'], + competences: ['Master · Concevoir et entraîner un modèle d’apprentissage profond', 'École d’ingénieurs · Intégrer un modèle en production'], + intro: 'Reconnaître un caractère manuscrit, transcrire une voix, décrire une image : ces tâches, longtemps hors de portée des programmes classiques, sont aujourd’hui résolues par des réseaux de neurones. Ce module explique ce qu’est réellement un réseau, comment il apprend par descente de gradient et rétropropagation, quelles architectures conviennent aux images et au son, et comment on met un tel modèle en production.', + cm: [ + { t: 'Le neurone et la couche', d: '', html: 'Un neurone artificiel calcule une somme pondérée de ses entrées, ajoute un biais et applique une <b>fonction d’activation</b> non linéaire : ReLU (max(0, x)) dans les couches cachées, sigmoïde ou softmax en sortie pour obtenir des probabilités. Une <b>couche dense</b> est un produit matriciel suivi d’une activation. Empiler des couches permet de représenter des fonctions très complexes ; sans non-linéarité, plusieurs couches se réduiraient à une seule transformation linéaire.' }, + { t: 'Apprendre : perte, gradient, rétropropagation', d: '', html: 'L’entraînement minimise une <b>fonction de perte</b> (entropie croisée pour la classification, erreur quadratique pour la régression). La <b>descente de gradient</b> ajuste chaque poids dans la direction qui fait baisser la perte, d’un pas fixé par le <b>taux d’apprentissage</b>. La <b>rétropropagation</b> calcule efficacement ces gradients couche par couche grâce à la règle de dérivation des fonctions composées. On traite les données par <b>lots</b> (mini-batches) et on parcourt plusieurs fois le jeu (<b>époques</b>). Un taux trop grand fait diverger, trop petit rend l’apprentissage interminable.' }, + { t: 'Images : réseaux convolutifs', d: '', html: 'Une image de 28×28 pixels a 784 entrées ; une photo en a des millions. Les <b>réseaux convolutifs</b> (CNN) appliquent de petits filtres qui glissent sur l’image et détectent des motifs locaux (bords, courbes), puis des motifs de plus en plus abstraits d’une couche à l’autre. Les poids d’un filtre sont partagés sur toute l’image, ce qui réduit énormément le nombre de paramètres et rend le réseau insensible à la position du motif. C’est le cœur des systèmes d’<b>OCR</b> : détection des zones de texte, puis reconnaissance des caractères.' }, + { t: 'Séquences : son, texte et transformeurs', d: '', html: 'Le son est une séquence : on le convertit d’abord en <b>spectrogramme</b> (énergie par fréquence au cours du temps, souvent en échelle de Mel), que l’on traite comme une image ou comme une séquence. Les réseaux récurrents ont longtemps servi à la reconnaissance vocale ; ils sont aujourd’hui largement remplacés par les <b>transformeurs</b>, fondés sur le mécanisme d’<b>attention</b> qui relie chaque élément de la séquence à tous les autres. Whisper (transcription) et les grands modèles de langage reposent sur cette architecture.' }, + { t: 'Entraîner en pratique', d: '', html: 'On entraîne rarement de zéro : l’<b>apprentissage par transfert</b> part d’un modèle pré-entraîné sur un grand corpus et l’ajuste (fine-tuning) sur ses propres données. Contre le surapprentissage : <b>augmentation de données</b> (rotations, bruit, variations de vitesse pour la voix), <b>dropout</b>, <b>arrêt précoce</b> quand la perte de validation remonte. Les calculs se font sur GPU ; un suivi des courbes de perte d’apprentissage et de validation est indispensable.' }, + { t: 'Mettre en production', d: '', html: 'Un modèle en production doit être rapide et léger : export en format standard (ONNX), <b>quantification</b> (poids en 8 bits au lieu de 32), exécution sur CPU si possible. On surveille la <b>dérive</b> : les données réelles s’éloignent de celles de l’entraînement (nouvelle police de caractères, micro différent), et les performances baissent sans erreur visible. Côté réglementaire, la voix est une donnée biométrique potentielle au sens du RGPD : traitement local de préférence, finalité limitée, conservation minimale.' } + ], + synthese: ['Neurone = somme pondérée + biais + activation non linéaire', 'Perte, descente de gradient, rétropropagation, lots et époques', 'CNN pour les images et l’OCR ; spectrogrammes et transformeurs pour la voix', 'Transfert, augmentation, dropout, arrêt précoce', 'Production : ONNX, quantification, surveillance de la dérive, RGPD'], + qcm: [ + ['Pourquoi une activation non linéaire ?', ['Pour accélérer', 'Sinon les couches se réduisent à une seule transformation linéaire', 'Pour normaliser', 'Obligatoire en Python'], 1, 'La non-linéarité donne la puissance.'], + ['Que calcule la rétropropagation ?', ['Les prédictions', 'Les gradients de la perte par rapport aux poids', 'Le taux d’apprentissage', 'Les lots'], 1, 'Règle de dérivation en chaîne.'], + ['Avantage principal d’une convolution sur une image ?', ['Couleurs', 'Partage des poids et détection de motifs locaux', 'Plus de paramètres', 'Aucun'], 1, 'Moins de paramètres, invariance à la position.'], + ['Comment représente-t-on souvent le son pour un réseau ?', ['En texte', 'En spectrogramme', 'En binaire brut', 'En CSV'], 1, 'Temps × fréquence.'], + ['La perte de validation remonte alors que celle d’apprentissage baisse :', ['tout va bien', 'surapprentissage, arrêt précoce', 'taux trop faible', 'données manquantes'], 1, 'On arrête ou on régularise.'], + ['Qu’est-ce que la quantification ?', ['Compter les données', 'Réduire la précision des poids pour alléger le modèle', 'Ajouter des couches', 'Chiffrer le modèle'], 1, 'Souvent 8 bits.'] + ], + td: [ + { n: 'Application', c: 'Calculer à la main la sortie d’un neurone : entrées (1, 2), poids (0,5 ; −1), biais 0,2, activation ReLU.', r: '0,5 × 1 + (−1) × 2 + 0,2 = −1,3 → ReLU = 0' }, + { n: 'Application', c: 'Écrire en PyTorch un réseau à deux couches pour MNIST (784 → 128 → 10) et sa boucle d’entraînement.', r: 'model = nn.Sequential(nn.Flatten(), nn.Linear(784,128), nn.ReLU(), nn.Linear(128,10))\nopt = torch.optim.Adam(model.parameters(), 1e-3); loss = nn.CrossEntropyLoss()\nfor x, y in loader: opt.zero_grad(); l = loss(model(x), y); l.backward(); opt.step()' }, + { n: 'Approfondissement', c: 'Un OCR entraîné sur des copies scannées échoue sur des photos prises au téléphone. Proposer trois actions.', r: 'Augmentation (perspective, flou, éclairage) · fine-tuning sur un échantillon de photos annotées · prétraitement (redressement, binarisation) et surveillance de la dérive.' } + ], + tp: { type: 'IDE Python', url: 'apercu-ide.html', desc: 'Réseau dense sur des chiffres manuscrits, dans le navigateur.', etapes: ['Visualiser le jeu de données', 'Construire le réseau', 'Tracer les courbes de perte', 'Mesurer l’exactitude par chiffre', 'Tester l’augmentation de données'] }, + plusLoin: [['3Blue1Brown · Neural networks (vidéos)', 'https://www.3blue1brown.com/topics/neural-networks'], ['Tutoriels PyTorch', 'https://pytorch.org/tutorials/'], ['Fidle (CNRS) · formation deep learning en français', 'https://fidle.cnrs.fr/'], ['CNIL · la voix, une donnée à protéger', 'https://www.cnil.fr/']] }, +plus: { cas: { titre: '', texte: '' }, + resolu: { enonce: 'Le module de transcription vocale des consignes, déployé en salle de TP, fonctionnait bien en tests mais produit des transcriptions incohérentes depuis l’installation des nouveaux casques.', etapes: [ + ['Comparer les entrées', 'soxi test_ancien.wav nouveau.wav\nSample Rate : 16000 | Sample Rate : 48000\n→ Les nouveaux casques enregistrent en 48 kHz ; le modèle attend du 16 kHz.'], + ['Vérifier le prétraitement', '→ Le code passait l’audio brut au modèle sans rééchantillonnage : le spectrogramme calculé était « compressé » en fréquence, comme une voix accélérée trois fois.'], + ['Corriger', 'audio = torchaudio.functional.resample(audio, orig_freq=sr, new_freq=16000)\n→ Rééchantillonnage systématique à l’entrée, avec contrôle du format.'], + ['Valider', 'WER sur 50 consignes de test : 38 % → 7 %\n→ Le taux d’erreur de mots revient au niveau des tests.'], + ['Prévenir', '→ Assertion sur la fréquence et le nombre de canaux, surveillance du WER sur un échantillon hebdomadaire, et traitement local sans conservation des enregistrements.'] + ] }, + erreurs: ['Pas de jeu de validation', 'Taux d’apprentissage choisi au hasard', 'Ignorer les courbes de perte', 'Prétraitement différent entre entraînement et production', 'Entraîner de zéro sans nécessité', 'Envoyer des voix d’élèves à un service tiers sans analyse RGPD'], + memo: [['Élément', 'À retenir'], ['nn.Linear · nn.Conv2d', 'couche dense · convolution'], ['nn.ReLU · softmax', 'activations'], ['nn.CrossEntropyLoss', 'perte de classification'], ['torch.optim.Adam(lr=1e-3)', 'optimiseur courant'], ['loss.backward() · opt.step()', 'rétropropagation et mise à jour'], ['model.eval() · torch.no_grad()', 'mode inférence'], ['Dropout · EarlyStopping', 'contre le surapprentissage'], ['torch.onnx.export', 'export pour la production'], ['WER · CER', 'erreurs de mots et de caractères (voix, OCR)']], + examen: { titre: 'Sujet type · 20 points', q: ['Calculer la sortie d’un petit réseau. (4 pts)', 'Expliquer descente de gradient et rétropropagation. (5 pts)', 'Justifier le choix d’un CNN pour l’OCR. (4 pts)', 'Analyser des courbes de perte fournies. (4 pts)', 'Citer deux précautions de mise en production. (3 pts)'], r: ['produit matriciel + activation', 'voir cours', 'motifs locaux, partage des poids', 'surapprentissage ou non', 'dérive, quantification, RGPD'] }, + prof: { deroule: [['Ouverture', 'Démonstration OCR sur une copie'], ['Cours', 'Neurone, perte, gradient'], ['Pratique', 'Réseau dense MNIST'], ['Cours', 'CNN et spectrogrammes'], ['Clôture', 'Quiz flash']], diff: 'Élèves en difficulté : calculs à la main guidés. Élèves avancés : fine-tuning, Fidle.', eval: 'Notebook, sujet type.' } }, +exemples: [ + ['Vérifier les dimensions', 'Erreur à la première passe.', 'x, y = next(iter(loader)); print(x.shape, model(x).shape)', 'torch.Size([64, 1, 28, 28]) torch.Size([64, 10])', 'Un lot de 64 images en entrée, 10 scores en sortie : les dimensions sont cohérentes.'], + ['Suivre l’apprentissage', 'Entraînement en cours.', 'for e in range(5): … print(e, perte_train, perte_val, acc_val)', '0 0.412 0.228 0.934\n1 0.191 0.160 0.953\n2 0.139 0.131 0.961\n3 0.108 0.129 0.962\n4 0.085 0.134 0.961', 'La perte de validation remonte à l’époque 4 : on garde le modèle de l’époque 3 (arrêt précoce).'], + ['Taux d’apprentissage trop grand', 'La perte explose.', 'opt = torch.optim.SGD(model.parameters(), lr=5.0)', 'époque 0 perte 2.30 → époque 1 perte nan', 'La perte devient NaN : les poids divergent. On revient à lr=1e-2 pour SGD ou 1e-3 pour Adam.'], + ['Mesurer l’OCR', 'Évaluer sur un jeu annoté.', 'jiwer.cer(references, predictions)', '0.043', '4,3 % de caractères erronés : acceptable pour du texte imprimé, à surveiller pour l’écriture manuscrite.'], + ['Alléger le modèle', 'Déploiement sur un mini-PC de salle.', 'q = torch.quantization.quantize_dynamic(model, {nn.Linear}, dtype=torch.qint8)\nprint(taille(model), taille(q))', '1.62 Mo 0.43 Mo', 'Le modèle quantifié est près de quatre fois plus léger, pour une perte d’exactitude généralement faible, à mesurer.'], + ['Transcrire localement', 'Consigne vocale en salle.', 'whisper consigne.wav --model small --language fr', '[00:00.000 --> 00:04.200] Ouvrez le terminal et tapez ip addr.', 'Le modèle tourne sur la machine locale : aucune voix d’élève ne sort de l’établissement.'] +], +termes: ['réseau de neurones', 'neurone', 'couche', 'ReLU', 'softmax', 'fonction de perte', 'descente de gradient', 'rétropropagation', 'taux d’apprentissage', 'époque', 'lot', 'CNN', 'convolution', 'spectrogramme', 'transformeur', 'attention', 'apprentissage par transfert', 'dropout', 'arrêt précoce', 'ONNX', 'quantification', 'dérive', 'OCR', 'WER', 'PyTorch'] +}); +})(); diff --git a/design/js/contenus-devops-1.js b/design/js/contenus-devops-1.js new file mode 100644 index 0000000..3ad8f8d --- /dev/null +++ b/design/js/contenus-devops-1.js @@ -0,0 +1,182 @@ +// Cours complets · DevOps lot 1 : Docker, Docker Compose, Ansible +(function () { +var reg = function (c) { + (window.CONTENUS_PRO = window.CONTENUS_PRO || []).unshift(c.cours); + (window.CONTENUS_PLUS = window.CONTENUS_PLUS || {})[c.cours.id] = c.plus; + (window.CONTENUS_EXEMPLES = window.CONTENUS_EXEMPLES || {})[c.cours.id] = c.exemples; + (window.CONTENUS_SCHEMAS = window.CONTENUS_SCHEMAS || {})[c.cours.id] = { termes: c.termes, figs: [] }; +}; + +reg({ +cours: { id: 'docker', match: /Docker(?! Compose)|Dockerfile|conteneur/i, + titre: 'Conteneurs Docker : images, Dockerfile, réseaux et volumes', duree: '', + niveau: 'BTS SIO SISR / SLAM · BTS CIEL IR · BUT R&T parcours DevCloud · AIS · Master', + prerequis: ['Le terminal Linux', 'Processus et services systemd', 'Réseau : ports, NAT'], + competences: ['BTS SIO SISR · Bloc 2 · Virtualisation et conteneurs', 'BTS SIO SLAM · Bloc 2 · Déployer une solution applicative', 'BUT R&T DevCloud · Compétence « Automatiser le déploiement »', 'AIS · Administrer une infrastructure virtualisée'], + intro: '« Chez moi ça marche. » Pendant des années, le passage d’une application du poste du développeur au serveur de production a été la principale source d’incidents : version de PHP différente, bibliothèque manquante, configuration oubliée. Le conteneur règle ce problème en livrant l’application avec tout son environnement d’exécution, dans une image immuable qui s’exécute à l’identique partout. Docker a popularisé cette approche en 2013 ; elle est aujourd’hui le socle du déploiement moderne, des petites applications de lycée jusqu’aux plateformes Kubernetes des hébergeurs. Ce module explique ce qu’est réellement un conteneur pour le noyau Linux, comment construire des images propres et sûres, et comment les exploiter en production.', + cm: [ + { t: 'Ce qu’est un conteneur pour le noyau', d: '', html: 'Un conteneur n’est pas une machine virtuelle. Il n’y a ni matériel émulé ni second noyau : c’est un <b>processus Linux ordinaire</b>, que le noyau isole grâce à deux mécanismes. Les <b>namespaces</b> donnent au processus sa propre vue du système : arborescence de processus (pid), interfaces réseau (net), points de montage (mnt), nom d’hôte (uts), utilisateurs (user), communications inter-processus (ipc). Les <b>cgroups</b> (control groups) limitent et mesurent les ressources qu’il consomme : processeur, mémoire, entrées-sorties.<br><br>Conséquences directes : un conteneur démarre en une fraction de seconde, consomme très peu de mémoire en plus de son application, et partage le noyau de l’hôte. C’est aussi sa limite de sécurité : une faille du noyau touche tous les conteneurs. Une VM isole plus fortement, un conteneur est plus léger ; en production, on combine souvent les deux (conteneurs dans des VM).', table: [['', 'Machine virtuelle', 'Conteneur'], ['Isolation', 'hyperviseur, noyau séparé', 'namespaces et cgroups, noyau partagé'], ['Démarrage', 'dizaines de secondes', 'fraction de seconde'], ['Taille', 'plusieurs Go', 'quelques Mo à centaines de Mo'], ['OS invité', 'n’importe lequel', 'même noyau que l’hôte (Linux)'], ['Usage type', 'serveur complet, isolation forte', 'application et ses dépendances']] }, + { t: 'Images, couches et registres', d: '', html: 'Une <b>image</b> est un modèle en lecture seule, composé de <b>couches</b> superposées : chaque instruction d’un Dockerfile qui modifie le système de fichiers ajoute une couche. Le pilote de stockage (overlay2) les empile et ajoute au-dessus une couche inscriptible propre à chaque conteneur. Plusieurs conteneurs issus de la même image partagent ses couches sur le disque.<br><br>Une image est identifiée par un nom, un <b>tag</b> et un <b>digest</b> (empreinte SHA-256 du contenu). Le tag est une étiquette mobile : <code>nginx:latest</code> ne désigne pas la même image aujourd’hui et dans six mois. En production, on fixe une version précise (<code>nginx:1.27.2-alpine</code>) voire le digest, pour que chaque déploiement soit reproductible.<br><br>Les images sont stockées dans des <b>registres</b> : Docker Hub, GitHub Container Registry, ou un registre privé (Harbor, Forgejo, GitLab). <code>docker pull</code> télécharge, <code>docker push</code> publie.', attention: 'Ne jamais utiliser le tag latest en production : un redémarrage peut récupérer silencieusement une nouvelle version majeure et casser l’application.' }, + { t: 'Écrire un Dockerfile de production', d: '', html: 'Le <b>Dockerfile</b> décrit la construction d’une image. Chaque instruction produit une couche, et Docker réutilise en cache les couches dont les instructions et les fichiers n’ont pas changé. L’ordre est donc décisif : on place en premier ce qui change rarement (système, dépendances) et en dernier ce qui change souvent (code).<br><br>Quatre bonnes pratiques font la différence entre un Dockerfile de TP et un Dockerfile de production. Partir d’une <b>image de base minimale et versionnée</b> (debian:bookworm-slim, alpine, distroless). Utiliser un <b>build multi-étapes</b> : on compile dans une première image complète, et on ne copie que le résultat dans une image finale légère, sans compilateurs. <b>Ne pas exécuter en root</b> : créer un utilisateur et le déclarer avec USER. Ajouter un <b>.dockerignore</b> pour ne pas envoyer .git, les secrets ou node_modules dans le contexte de construction.', exemple: '# syntax=docker/dockerfile:1\nFROM python:3.12-slim AS build\nWORKDIR /app\nCOPY requirements.txt .\nRUN pip install --no-cache-dir --prefix=/install -r requirements.txt\n\nFROM python:3.12-slim\nRUN useradd --create-home --uid 10001 app\nCOPY --from=build /install /usr/local\nWORKDIR /app\nCOPY --chown=app:app . .\nUSER app\nEXPOSE 8000\nHEALTHCHECK CMD python -c "import urllib.request;urllib.request.urlopen(\'http://localhost:8000/health\')"\nCMD ["gunicorn", "-b", "0.0.0.0:8000", "app:app"]' }, + { t: 'Cycle de vie d’un conteneur', d: '', html: '<code>docker run</code> crée et démarre un conteneur à partir d’une image. Les options essentielles : <code>-d</code> en arrière-plan, <code>--name</code> pour le nommer, <code>-p 8080:80</code> pour publier un port, <code>-e</code> pour une variable d’environnement, <code>-v</code> pour un volume, <code>--restart unless-stopped</code> pour le redémarrer automatiquement, <code>--memory</code> et <code>--cpus</code> pour le limiter.<br><br>Le processus lancé par CMD ou ENTRYPOINT est le <b>PID 1</b> du conteneur : quand il s’arrête, le conteneur s’arrête. C’est pourquoi on ne lance pas un service en arrière-plan dans un conteneur, et pourquoi le programme doit traiter correctement le signal SIGTERM envoyé par <code>docker stop</code> (au bout de 10 secondes, Docker envoie SIGKILL).<br><br>Un conteneur est <b>jetable</b> : on ne le modifie pas à la main, on le recrée à partir d’une nouvelle image. Tout ce qui est écrit dans sa couche inscriptible disparaît avec <code>docker rm</code>.' }, + { t: 'Persister les données : volumes et bind mounts', d: '', html: 'Puisque le conteneur est jetable, les données qui doivent survivre (base de données, fichiers envoyés, configuration) vont dans un <b>volume</b>. Un <b>volume nommé</b> est géré par Docker dans /var/lib/docker/volumes : c’est la solution recommandée pour les données d’application. Un <b>bind mount</b> monte un dossier précis de l’hôte : pratique pour la configuration ou le développement, mais il dépend de l’arborescence de l’hôte et de ses droits.<br><br>La sauvegarde ne se fait pas en copiant un volume de base de données à chaud : on utilise l’outil de la base (pg_dump, mariadb-dump) depuis le conteneur, ou on arrête le service le temps de la copie.', exemple: 'docker volume create pgdata\ndocker run -d --name db -e POSTGRES_PASSWORD_FILE=/run/secrets/pg -v pgdata:/var/lib/postgresql/data postgres:16\ndocker exec db pg_dump -U postgres app > app-$(date +%F).sql' }, + { t: 'Réseaux Docker', d: '', html: 'Par défaut, chaque conteneur est relié au réseau <b>bridge</b> docker0 et reçoit une adresse privée en 172.17.0.0/16. Pour être joignable de l’extérieur, un port doit être publié avec <code>-p</code> : Docker crée alors une règle de <b>DNAT</b> dans netfilter vers le conteneur.<br><br>Sur un <b>réseau bridge utilisateur</b> (<code>docker network create</code>), les conteneurs se trouvent par leur <b>nom</b> grâce au DNS intégré de Docker (127.0.0.11) : l’application joint la base de données par le nom db, sans connaître son adresse. C’est la pratique recommandée. Le mode <b>host</b> supprime l’isolation réseau : le conteneur utilise directement les interfaces de l’hôte.', attention: 'Les ports publiés par Docker passent par ses propres règles netfilter, avant celles d’un pare-feu comme UFW : un -p 5432:5432 expose la base de données sur Internet même si UFW semble la bloquer. On publie uniquement sur la boucle locale (-p 127.0.0.1:5432:5432) ou pas du tout, en utilisant un réseau interne.' }, + { t: 'Sécurité des conteneurs', d: '', html: 'Appartenir au groupe <b>docker</b> équivaut à être root sur l’hôte : on peut lancer un conteneur qui monte / et le modifier. On réserve ce groupe aux administrateurs, ou on utilise Docker en mode <b>rootless</b> ou Podman.<br><br>Les règles de base : images officielles ou construites en interne, <b>analyse de vulnérabilités</b> des images (Trivy, Docker Scout) dans la chaîne d’intégration, exécution en utilisateur non privilégié, jamais de <code>--privileged</code> sans raison impérative, secrets passés par fichiers ou gestionnaire de secrets plutôt qu’en variables d’environnement visibles dans <code>docker inspect</code>, et limites de ressources pour qu’un conteneur ne puisse pas saturer l’hôte.' } + ], + synthese: ['Conteneur = processus isolé par namespaces et limité par cgroups, noyau partagé', 'Image en couches, immuable, identifiée par tag et digest ; jamais latest en production', 'Dockerfile : base minimale versionnée, multi-étapes, USER non root, .dockerignore', 'PID 1 et SIGTERM : un processus au premier plan par conteneur', 'Données dans des volumes nommés, sauvegarde avec les outils de la base', 'Réseau bridge utilisateur et DNS par nom ; attention aux ports publiés qui contournent UFW', 'Groupe docker = root ; scanner les images, limiter les ressources'], + qcm: [ + ['Quels mécanismes du noyau isolent un conteneur ?', ['Hyperviseur et BIOS', 'Namespaces et cgroups', 'chroot et sudo', 'SELinux uniquement'], 1, 'Namespaces pour la vue, cgroups pour les ressources.'], + ['Pourquoi éviter le tag latest en production ?', ['Il est payant', 'Il peut désigner une nouvelle version à chaque pull', 'Il est lent', 'Il n’existe pas'], 1, 'Le déploiement devient non reproductible.'], + ['Quel est l’intérêt d’un build multi-étapes ?', ['Accélérer le réseau', 'Obtenir une image finale sans outils de compilation', 'Lancer plusieurs conteneurs', 'Chiffrer l’image'], 1, 'Image plus petite et surface d’attaque réduite.'], + ['Que se passe-t-il quand le processus PID 1 d’un conteneur se termine ?', ['Rien', 'Le conteneur s’arrête', 'Docker le relance toujours', 'L’hôte redémarre'], 1, 'Le conteneur vit tant que son processus principal vit.'], + ['Où stocker les données d’une base PostgreSQL conteneurisée ?', ['Dans la couche du conteneur', 'Dans un volume nommé', 'Dans l’image', 'Dans /tmp'], 1, 'Elles survivent à la suppression du conteneur.'], + ['Comment une application joint-elle la base de données sur un réseau bridge utilisateur ?', ['Par l’adresse 172.17.0.1', 'Par le nom du conteneur', 'Par localhost', 'Impossible'], 1, 'DNS intégré de Docker.'], + ['Pourquoi -p 5432:5432 peut-il exposer la base malgré UFW ?', ['UFW est désactivé par Docker', 'Docker insère ses règles DNAT avant celles d’UFW', 'Le port 5432 est public par nature', 'Ce n’est pas possible'], 1, 'Publier sur 127.0.0.1 ou ne pas publier.'], + ['Être membre du groupe docker revient à :', ['n’avoir aucun droit', 'être root sur l’hôte', 'pouvoir seulement lire les journaux', 'être administrateur réseau'], 1, 'On peut monter / dans un conteneur.'] + ], + td: [ + { n: 'Échauffement', c: 'Classer VM ou conteneur : (a) serveur Windows pour un logiciel métier, (b) API Python déployée dix fois par jour, (c) isolation forte entre deux clients hébergés, (d) base de tests jetable pour chaque élève.', r: '(a) VM · (b) conteneur · (c) VM (ou conteneurs dans des VM séparées) · (d) conteneur' }, + { n: 'Application', c: 'Réécrire ce Dockerfile pour la production : « FROM python:latest / COPY . /app / RUN pip install -r /app/requirements.txt / CMD python /app/app.py ».', r: 'Version fixée (python:3.12-slim), COPY requirements.txt avant le code pour le cache, pip --no-cache-dir, utilisateur non root et USER, .dockerignore, CMD en forme exec ["python","app.py"], éventuellement multi-étapes et HEALTHCHECK.' }, + { n: 'Application', c: 'Lancer Nginx accessible uniquement depuis l’hôte sur le port 8080, redémarré automatiquement, limité à 256 Mo, avec un dossier de configuration en lecture seule.', r: 'docker run -d --name web --restart unless-stopped --memory 256m -p 127.0.0.1:8080:80 -v /srv/web/conf:/etc/nginx/conf.d:ro nginx:1.27-alpine' }, + { n: 'Approfondissement', c: 'Montrer avec des commandes qu’un conteneur n’est qu’un processus de l’hôte, et retrouver son PID et ses cgroups.', r: 'docker inspect -f "{{.State.Pid}}" web → 4312\nps -fp 4312 · cat /proc/4312/cgroup · ls -l /proc/4312/ns' } + ], + tp: { type: 'Lab VM', url: 'apercu-labs.html', desc: 'Une VM Debian avec Docker : construire, publier, exploiter.', etapes: ['Construire l’image d’une API Python multi-étapes', 'La lancer avec limites de ressources et redémarrage automatique', 'Ajouter PostgreSQL sur un réseau utilisateur avec volume', 'Vérifier les ports réellement exposés', 'Scanner l’image avec Trivy'] }, + plusLoin: [['Docker Docs · Dockerfile best practices', 'https://docs.docker.com/build/building/best-practices/'], ['ANSSI · Recommandations de sécurité relatives au déploiement de conteneurs Docker', 'https://cyber.gouv.fr/publications/recommandations-de-securite-relatives-au-deploiement-de-conteneurs-docker'], ['Trivy', 'https://trivy.dev/']] }, +plus: { + cas: { titre: '', texte: '' }, + resolu: { enonce: 'L’application de réservation de salles, conteneurisée, redémarre en boucle depuis la mise à jour de ce matin. Les utilisateurs obtiennent une erreur 502 du reverse proxy. Diagnostiquer et rétablir.', etapes: [ + ['Constater l’état', 'docker ps -a --filter name=resa\nNAMES IMAGE STATUS\nresa resa-app:2.4.0 Restarting (1) 12 seconds ago\n→ Le conteneur démarre puis s’arrête avec le code 1, et la politique de redémarrage le relance sans fin. Le reverse proxy ne trouve donc jamais de backend : d’où les 502.'], + ['Lire les journaux', 'docker logs --tail 20 resa\nKeyError: \'DATABASE_URL\'\n→ L’application s’arrête au démarrage faute de la variable DATABASE_URL. La nouvelle version attend un nom de variable différent de l’ancienne (DB_URL).'], + ['Comparer avec la version précédente', 'docker inspect -f "{{range .Config.Env}}{{println .}}{{end}}" resa | grep -i db\nDB_URL=postgresql://resa@db/resa\n→ Le conteneur est lancé avec l’ancien nom de variable. Le changement était annoncé dans les notes de version 2.4.0, mais le fichier de déploiement n’a pas été adapté.'], + ['Rétablir le service', 'docker rm -f resa\ndocker run -d --name resa --network resa-net --restart unless-stopped -e DATABASE_URL=postgresql://resa@db/resa resa-app:2.4.0\ndocker ps --filter name=resa\nresa resa-app:2.4.0 Up 20 seconds (healthy)\n→ On ne corrige pas le conteneur existant : on le recrée avec la bonne configuration. Le HEALTHCHECK confirme que l’application répond.'], + ['Vérifier et prévenir', 'curl -sI https://resa.lycee.local | head -1\nHTTP/2 200\n→ Service rétabli. Actions préventives : décrire le déploiement dans un fichier Compose versionné plutôt qu’une commande docker run tapée à la main, relire les notes de version, et tester la nouvelle image sur un environnement de préproduction avant la production.'] + ] }, + erreurs: ['Utiliser latest en production', 'Lancer le processus en root dans l’image', 'Stocker des données dans la couche du conteneur', 'Modifier un conteneur à la main au lieu de reconstruire l’image', 'Publier une base de données sur 0.0.0.0', 'Mettre des secrets dans le Dockerfile ou l’image', 'Oublier .dockerignore et embarquer .git', 'Donner le groupe docker à des utilisateurs non administrateurs'], + memo: [['Commande', 'Usage en production'], ['docker ps -a', 'conteneurs et leur état, y compris arrêtés'], ['docker logs -f --tail 100 <c>', 'journaux de l’application'], ['docker inspect <c>', 'configuration complète : env, montages, réseau'], ['docker exec -it <c> sh', 'shell dans un conteneur en cours'], ['docker stats', 'CPU et mémoire consommés en direct'], ['docker build -t app:1.2.0 .', 'construire une image versionnée'], ['docker image ls · docker image prune', 'lister et nettoyer les images'], ['docker volume ls', 'volumes de données'], ['docker network ls · inspect', 'réseaux et conteneurs rattachés'], ['docker system df', 'espace disque utilisé par Docker'], ['docker run --rm -it image sh', 'explorer une image sans la garder']], + examen: { titre: 'Sujet type · 20 points', q: ['Comparer VM et conteneur en citant les mécanismes du noyau. (4 pts)', 'Critiquer et corriger un Dockerfile fourni. (6 pts)', 'Écrire la commande de lancement d’une application avec volume, réseau, limites et redémarrage. (4 pts)', 'Diagnostiquer un conteneur en redémarrage permanent à partir de sorties fournies. (4 pts)', 'Citer quatre mesures de sécurité des conteneurs. (2 pts)'], r: ['namespaces, cgroups, noyau partagé', 'version, cache, USER, multi-étapes, .dockerignore', 'docker run -d --name … --restart … --memory … -v … --network …', 'logs, inspect, code de sortie', 'non root, scan, pas de --privileged, secrets hors image'] }, + prof: { deroule: [['Ouverture', 'Démonstration : la même application qui échoue sur deux machines, puis qui marche partout en conteneur'], ['Cours', 'Namespaces, cgroups, images et couches'], ['Démonstration', 'Dockerfile naïf puis Dockerfile de production, comparaison de taille'], ['Pratique', 'Lab : API + base de données, volumes et réseau'], ['Incident', 'Conteneur en boucle de redémarrage'], ['Clôture', 'Quiz flash']], diff: 'Élèves en difficulté : Dockerfile à compléter, fiche mémo. Élèves avancés : mode rootless, scan Trivy dans une CI, image distroless.', eval: 'Étapes du lab validées, analyse du Dockerfile, sujet type.' } +}, +exemples: [ + ['Pourquoi ce conteneur s’arrête-t-il ?', 'Un conteneur passe en Exited juste après son lancement.', 'docker ps -a --filter name=api --format "{{.Names}} {{.Status}}"\ndocker logs api | tail -3', 'api Exited (137) 2 minutes ago\nKilled', 'Le code 137 = 128 + 9 : le processus a reçu SIGKILL. Sans docker stop, c’est presque toujours le noyau qui l’a tué pour dépassement de mémoire (OOM). On le confirme avec docker inspect -f "{{.State.OOMKilled}}" api, puis on augmente --memory ou on corrige la fuite.'], + ['Mesurer la consommation', 'Le serveur rame depuis le déploiement.', 'docker stats --no-stream --format "table {{.Name}}\\t{{.CPUPerc}}\\t{{.MemUsage}}"', 'NAME CPU % MEM USAGE / LIMIT\nresa 0.4% 182MiB / 512MiB\nglpi 187.3% 1.1GiB / 15.6GiB\ndb 3.1% 420MiB / 1GiB', 'Le conteneur glpi consomme presque deux cœurs et n’a pas de limite mémoire (la limite affichée est la RAM de l’hôte). On regarde ses journaux et on lui fixe --cpus et --memory pour protéger les autres services.'], + ['Vérifier les ports réellement exposés', 'Audit avant mise en production.', 'docker ps --format "{{.Names}} {{.Ports}}"', 'web 0.0.0.0:443->443/tcp\ndb 0.0.0.0:5432->5432/tcp\nredis 127.0.0.1:6379->6379/tcp', 'La base PostgreSQL est publiée sur toutes les interfaces : joignable depuis Internet malgré le pare-feu de l’hôte. On la retire du -p et on la laisse sur le réseau interne ; Redis, publié sur 127.0.0.1, est correct.'], + ['Comprendre le cache de construction', 'Chaque build prend trois minutes.', 'docker build -t app:dev .', ' => CACHED [2/5] WORKDIR /app\n => [3/5] COPY . .\n => [4/5] RUN pip install -r requirements.txt 172.4s', 'COPY . . est placé avant l’installation des dépendances : toute modification du code invalide le cache et relance pip. En copiant requirements.txt seul, puis en installant, puis en copiant le code, le build passe à quelques secondes.'], + ['Retrouver un conteneur par son nom', 'L’application ne joint pas la base de données.', 'docker exec api getent hosts db ; docker network inspect -f "{{range .Containers}}{{.Name}} {{end}}" appnet', '(aucune sortie)\napi', 'Le nom db ne se résout pas, car le conteneur de base de données n’est pas sur le réseau appnet. On le rattache : docker network connect appnet db.'], + ['Libérer de l’espace disque', 'Le disque de l’hôte est plein à 95 %.', 'docker system df', 'TYPE TOTAL ACTIVE SIZE RECLAIMABLE\nImages 48 6 21.3GB 18.9GB (88%)\nContainers 9 6 1.2GB 0.4GB\nLocal Volumes 12 5 8.7GB 3.1GB\nBuild Cache — — 6.4GB 6.4GB', 'Les anciennes images et le cache de construction occupent 25 Go récupérables. docker image prune -a et docker builder prune les suppriment. On évite docker volume prune sans vérifier : il supprimerait des données.'] +], +termes: ['Docker', 'conteneur', 'image', 'Dockerfile', 'namespaces', 'cgroups', 'couche', 'tag', 'digest', 'registre', 'volume', 'bind mount', 'bridge', 'docker run', 'docker ps', 'docker logs', 'docker exec', 'docker inspect', 'docker stats', 'PID 1', 'SIGTERM', 'SIGKILL', 'multi-étapes', 'USER', 'HEALTHCHECK', 'latest', 'Trivy', 'rootless', 'OOM'] +}); + +reg({ +cours: { id: 'compose', match: /Docker Compose/i, + titre: 'Docker Compose : décrire et exploiter une application multi-conteneurs', duree: '', + niveau: 'BTS SIO SISR / SLAM · BUT R&T DevCloud · AIS', + prerequis: ['Conteneurs Docker'], + competences: ['BTS SIO · Bloc 2 · Déployer une solution applicative', 'BUT R&T DevCloud · Automatiser le déploiement', 'AIS · Industrialiser le déploiement'], + intro: 'Une application réelle ne tient jamais dans un seul conteneur : un site Laravel a besoin d’un serveur web, de PHP-FPM, d’une base de données, souvent d’un cache Redis et d’un planificateur de tâches. Lancer et relier tout cela à coups de docker run est fragile et impossible à reproduire. Docker Compose décrit l’ensemble dans un fichier YAML versionné : services, réseaux, volumes, variables, ordre de démarrage. Ce fichier devient la documentation exécutable du déploiement.', + cm: [ + { t: 'Le fichier compose.yaml', d: '', html: 'Le fichier <code>compose.yaml</code> (anciennement docker-compose.yml) déclare des <b>services</b>, chacun correspondant à un conteneur issu d’une image ou d’un Dockerfile, ainsi que des <b>volumes</b> et des <b>réseaux</b>. Compose crée automatiquement un réseau par projet : chaque service y est joignable par son nom.<br><br>La commande actuelle est <code>docker compose</code> (plugin intégré, version 2), qui remplace l’ancien binaire docker-compose écrit en Python.', exemple: 'services:\n web:\n image: nginx:1.27-alpine\n ports: ["443:443"]\n volumes: ["./nginx:/etc/nginx/conf.d:ro", "certs:/etc/ssl/app:ro"]\n depends_on: [app]\n app:\n build: .\n env_file: .env\n depends_on:\n db: { condition: service_healthy }\n db:\n image: postgres:16\n environment:\n POSTGRES_PASSWORD_FILE: /run/secrets/db_password\n secrets: [db_password]\n volumes: ["pgdata:/var/lib/postgresql/data"]\n healthcheck:\n test: ["CMD", "pg_isready", "-U", "postgres"]\n interval: 5s\n retries: 10\nvolumes:\n pgdata:\n certs:\nsecrets:\n db_password:\n file: ./secrets/db_password.txt' }, + { t: 'Ordre de démarrage et healthchecks', d: '', html: '<code>depends_on</code> seul garantit uniquement que le conteneur de la base est <b>démarré</b> avant l’application, pas qu’il est <b>prêt</b> à accepter des connexions. PostgreSQL met plusieurs secondes à s’initialiser au premier lancement, et l’application qui s’y connecte trop tôt échoue.<br><br>La bonne pratique combine un <b>healthcheck</b> sur la base et <code>condition: service_healthy</code> dans le depends_on de l’application. L’application doit aussi savoir réessayer sa connexion : en production, un redémarrage de la base peut survenir à tout moment.' }, + { t: 'Variables, fichiers .env et secrets', d: '', html: 'Compose lit automatiquement le fichier <code>.env</code> du dossier du projet pour substituer les variables <code>${VAR}</code> du fichier YAML, et <code>env_file</code> injecte des variables dans un conteneur. Ces fichiers ne doivent <b>jamais être versionnés</b> s’ils contiennent des mots de passe : on versionne un <code>.env.example</code> sans valeurs.<br><br>Les <b>secrets</b> de Compose montent un fichier en lecture seule dans <code>/run/secrets/</code> : le mot de passe n’apparaît ni dans les variables d’environnement, ni dans <code>docker inspect</code>. Les images officielles comme postgres ou mariadb acceptent les variables en <code>_FILE</code> pour lire leur valeur dans ce fichier.' }, + { t: 'Exploiter un projet Compose', d: '', html: '<code>docker compose up -d</code> crée ou met à jour tout le projet ; il ne recrée que les services dont la configuration ou l’image a changé. <code>docker compose pull</code> récupère les nouvelles images, <code>docker compose up -d --build</code> reconstruit celles qui ont un Dockerfile. <code>docker compose ps</code>, <code>logs -f service</code>, <code>exec service sh</code> et <code>down</code> complètent l’exploitation courante.<br><br><code>docker compose down</code> supprime conteneurs et réseau mais <b>conserve les volumes</b> ; <code>down -v</code> supprime aussi les volumes, donc les données. Cette option ne doit jamais être tapée par réflexe en production.', attention: 'docker compose down -v sur le serveur de production efface la base de données. Sauvegarder avant toute opération de maintenance, et réserver -v aux environnements de test.' }, + { t: 'Plusieurs environnements', d: '', html: 'Un même projet tourne en développement, en préproduction et en production avec des différences : ports, volumes de code montés, niveau de journalisation, nombre de répliques. Compose fusionne plusieurs fichiers : <code>compose.yaml</code> contient la base commune, <code>compose.override.yaml</code> (chargé automatiquement) les réglages de développement, et <code>compose.prod.yaml</code> ceux de production, appliqués avec <code>docker compose -f compose.yaml -f compose.prod.yaml up -d</code>. Les <b>profils</b> permettent d’activer des services optionnels (outils d’administration, tests).' }, + { t: 'Limites de Compose', d: '', html: 'Compose pilote les conteneurs d’<b>une seule machine</b>. Il ne répartit pas la charge entre plusieurs serveurs, ne déplace pas un service quand un nœud tombe, et ne gère pas les mises à jour sans interruption. Pour un établissement ou une PME, c’est souvent largement suffisant et bien plus simple à maintenir. Au-delà, on passe à un orchestrateur comme <b>Kubernetes</b>, dont les notions (services, volumes, secrets, sondes de santé) prolongent directement celles de Compose.' } + ], + synthese: ['compose.yaml versionné = documentation exécutable du déploiement', 'Réseau par projet, services joignables par leur nom', 'depends_on + healthcheck + condition service_healthy', '.env jamais versionné ; secrets montés dans /run/secrets', 'up -d ne recrée que ce qui a changé ; down -v efface les données', 'Plusieurs fichiers pour plusieurs environnements', 'Une seule machine : au-delà, Kubernetes'], + qcm: [ + ['Que garantit depends_on sans condition ?', ['Que la base accepte les connexions', 'Que le conteneur de la base est démarré avant', 'Que la base est sauvegardée', 'Rien'], 1, 'Démarré ne veut pas dire prêt.'], + ['Que fait docker compose down -v ?', ['Redémarre', 'Supprime conteneurs, réseau et volumes', 'Met à jour les images', 'Affiche la version'], 1, 'Les données sont effacées.'], + ['Comment le service app joint-il le service db ?', ['Par l’IP de l’hôte', 'Par le nom db', 'Par localhost', 'Par un port publié'], 1, 'DNS du réseau du projet.'], + ['Pourquoi préférer les secrets aux variables d’environnement pour un mot de passe ?', ['Plus rapide', 'Le mot de passe n’apparaît pas dans docker inspect', 'Obligatoire', 'Chiffrement automatique sur le disque'], 1, 'Fichier monté en lecture seule.'], + ['Quel fichier est chargé automatiquement en plus de compose.yaml ?', ['compose.prod.yaml', 'compose.override.yaml', 'docker.yaml', '.env.example'], 1, 'Réglages de développement.'], + ['Après modification de l’image d’un seul service, docker compose up -d :', ['recrée tous les services', 'recrée seulement ce service', 'ne fait rien', 'supprime les volumes'], 1, 'Mise à jour ciblée.'] + ], + td: [ + { n: 'Application', c: 'Écrire le compose.yaml d’un GLPI : service web (image diouxx/glpi ou équivalent), service MariaDB avec volume et healthcheck, mot de passe en secret, seul le web publié sur 443.', r: 'services: web (ports 443, depends_on db service_healthy) ; db (mariadb:11, MARIADB_ROOT_PASSWORD_FILE, secrets, volume dbdata, healthcheck healthcheck.sh --connect) ; volumes: dbdata ; secrets: db_root.' }, + { n: 'Application', c: 'Écrire la procédure de mise à jour d’un projet Compose en production sans perte de données.', r: '1. Sauvegarde (docker compose exec db pg_dump …) · 2. docker compose pull · 3. docker compose up -d · 4. docker compose ps et logs · 5. test fonctionnel · 6. en cas d’échec : revenir au tag précédent dans compose.yaml puis up -d.' }, + { n: 'Approfondissement', c: 'Séparer la configuration de développement (code monté, port 8000 publié, débogage) de celle de production (image construite, pas de port applicatif publié).', r: 'compose.yaml : base commune · compose.override.yaml : volumes ./:/app, ports 8000, APP_DEBUG=1 · compose.prod.yaml : image registre:tag, restart unless-stopped, pas de ports sur app · lancement prod : -f compose.yaml -f compose.prod.yaml.' } + ], + tp: { type: 'Lab VM', url: 'apercu-labs.html', desc: 'Déployer une application web, sa base et son cache avec Compose.', etapes: ['Écrire compose.yaml avec trois services', 'Ajouter healthcheck et secrets', 'Démarrer, vérifier ps et logs', 'Mettre à jour une image sans perte de données', 'Sauvegarder et restaurer la base'] }, + plusLoin: [['Docker Docs · Compose file reference', 'https://docs.docker.com/reference/compose-file/'], ['Docker Docs · Secrets in Compose', 'https://docs.docker.com/compose/how-tos/use-secrets/']] }, +plus: { + cas: { titre: '', texte: '' }, + resolu: { enonce: 'Après un redémarrage du serveur, l’application Laravel du CDI affiche « SQLSTATE[HY000] [2002] Connection refused » pendant plusieurs minutes, puis parfois reste en erreur. Diagnostiquer et fiabiliser.', etapes: [ + ['Observer l’ordre de démarrage', 'docker compose ps\nNAME SERVICE STATUS\ncdi-app app Up 3 minutes\ncdi-db db Up 3 minutes (health: starting)\n→ L’application tourne alors que la base n’est pas encore prête.'], + ['Lire les journaux', 'docker compose logs app | head -3\nSQLSTATE[HY000] [2002] Connection refused\ndocker compose logs db | tail -2\nInnoDB: Starting crash recovery...\nready for connections.\n→ Après un arrêt brutal, MariaDB effectue une récupération qui prend du temps. L’application a tenté de se connecter trop tôt et a mis la base en échec dans son cache de configuration.'], + ['Lire le fichier Compose', 'grep -A3 depends_on compose.yaml\n depends_on:\n - db\n→ depends_on sans condition : Compose attend seulement que le conteneur db soit lancé.'], + ['Corriger', 'db:\n healthcheck:\n test: ["CMD", "healthcheck.sh", "--connect", "--innodb_initialized"]\n interval: 5s\n retries: 30\napp:\n depends_on:\n db: { condition: service_healthy }\n restart: unless-stopped\ndocker compose up -d\n→ L’application ne démarre plus qu’une fois la base réellement prête, et redémarre automatiquement en cas d’échec.'], + ['Valider', 'sudo reboot (sur la préproduction)\ndocker compose ps\ncdi-db Up 2 minutes (healthy)\ncdi-app Up 1 minute\n→ L’ordre est respecté. Compte rendu : cause (depends_on sans healthcheck), correction, test de redémarrage ajouté à la procédure de validation.'] + ] }, + erreurs: ['depends_on sans healthcheck', 'Versionner le fichier .env avec les mots de passe', 'Taper docker compose down -v en production', 'Publier les ports de la base de données', 'Ne pas fixer les versions des images', 'Mettre à jour sans sauvegarde préalable'], + memo: [['Commande', 'Usage'], ['docker compose up -d', 'créer ou mettre à jour le projet'], ['docker compose ps', 'état et santé des services'], ['docker compose logs -f <s>', 'journaux d’un service'], ['docker compose exec <s> sh', 'shell dans un service'], ['docker compose pull', 'récupérer les nouvelles images'], ['docker compose up -d --build', 'reconstruire et redéployer'], ['docker compose config', 'afficher la configuration fusionnée et validée'], ['docker compose down', 'arrêter en conservant les volumes'], ['docker compose -f a.yaml -f b.yaml up -d', 'combiner des fichiers d’environnement'], ['docker compose --profile outils up -d', 'activer des services optionnels']], + examen: { titre: 'Sujet type · 20 points', q: ['Écrire le compose.yaml d’une application trois tiers. (8 pts)', 'Expliquer depends_on et les healthchecks. (4 pts)', 'Rédiger la procédure de mise à jour sans perte de données. (5 pts)', 'Justifier le passage à Kubernetes pour un cas donné. (3 pts)'], r: ['services, volumes, secrets, réseau', 'démarré ≠ prêt, condition service_healthy', 'sauvegarde, pull, up -d, contrôle, retour arrière', 'plusieurs nœuds, haute disponibilité'] }, + prof: { deroule: [['Ouverture', 'Lancer à la main trois conteneurs reliés, puis la même chose en un fichier'], ['Cours', 'Services, réseaux, volumes, secrets'], ['Pratique', 'Lab application trois tiers'], ['Incident', 'Ordre de démarrage au redémarrage'], ['Clôture', 'Quiz flash']], diff: 'Élèves en difficulté : compose.yaml à compléter. Élèves avancés : plusieurs environnements, profils, déploiement par CI.', eval: 'Lab validé, sujet type.' } +}, +exemples: [ + ['Valider le fichier avant déploiement', 'Une modification a été faite dans compose.yaml.', 'docker compose config --quiet && echo OK', 'services.app.depends_on.db.condition must be one of the following: "service_started", "service_healthy", "service_completed_successfully"', 'Faute de frappe dans la condition. docker compose config valide et fusionne les fichiers sans rien lancer : à exécuter avant chaque up.'], + ['Voir la santé des services', 'L’application répond lentement au démarrage.', 'docker compose ps --format "table {{.Service}}\\t{{.Status}}"', 'SERVICE STATUS\ndb Up 40 seconds (healthy)\nredis Up 40 seconds\napp Up 12 seconds (health: starting)', 'La base est prête, l’application exécute encore son healthcheck. Tant qu’elle n’est pas healthy, le reverse proxy peut renvoyer des erreurs : c’est normal pendant quelques secondes.'], + ['Mettre à jour une seule image', 'Correctif de sécurité publié pour Nginx.', 'docker compose pull web && docker compose up -d web', '[+] Pulling web … Pulled\n[+] Running 1/1 ✔ Container cdi-web Recreated', 'Seul le service web est recréé ; la base et l’application continuent de tourner.'], + ['Sauvegarder la base d’un projet', 'Avant une mise à jour.', 'docker compose exec -T db pg_dump -U app app | gzip > backup-$(date +%F).sql.gz ; ls -lh backup-*', '-rw-r--r-- 1 admin admin 14M sept. 30 07:02 backup-2026-09-30.sql.gz', '-T désactive le pseudo-terminal pour que la sortie puisse être redirigée proprement dans un fichier.'], + ['Retrouver le nom réel des ressources', 'Un collègue cherche le volume de la base.', 'docker volume ls --filter label=com.docker.compose.project=cdi', 'DRIVER VOLUME NAME\nlocal cdi_pgdata', 'Compose préfixe les volumes et réseaux par le nom du projet (le dossier). Deux projets peuvent donc avoir chacun un volume pgdata sans conflit.'], + ['Afficher les journaux de plusieurs services', 'Erreur 500 intermittente.', 'docker compose logs --since 10m app web | grep -E " 500 |ERROR"', 'cdi-web | "POST /reservations HTTP/1.1" 500\ncdi-app | ERROR: duplicate key value violates unique constraint "resa_salle_creneau"', 'En croisant les journaux, on relie l’erreur 500 vue par Nginx à une violation de contrainte dans l’application : deux réservations simultanées du même créneau. C’est un bug applicatif, pas une panne d’infrastructure.'] +], +termes: ['Docker Compose', 'compose.yaml', 'service', 'depends_on', 'healthcheck', 'service_healthy', 'secrets', '.env', 'env_file', 'docker compose up', 'docker compose down', 'docker compose ps', 'docker compose logs', 'docker compose config', 'profils', 'volume', 'Kubernetes'] +}); + +reg({ +cours: { id: 'ansible', match: /Ansible|IaC|infrastructure as code/i, + titre: 'Ansible : automatiser la configuration des serveurs', duree: '', + niveau: 'BTS SIO SISR · BUT R&T DevCloud · AIS · Master', + prerequis: ['Le terminal Linux', 'SSH par clé', 'Paquets et services'], + competences: ['BTS SIO SISR · Bloc 2 · Automatiser les tâches d’administration', 'BUT R&T DevCloud · Automatiser le déploiement d’une infrastructure', 'AIS · Industrialiser l’administration'], + intro: 'Configurer un serveur à la main prend une heure ; en configurer quarante de façon identique est impossible sans erreur, et personne ne sait plus, six mois après, ce qui a été fait sur lequel. Ansible décrit l’état attendu des machines dans des fichiers YAML versionnés, et l’applique par SSH, sans agent à installer. Relancé autant de fois qu’on veut, il ne change que ce qui n’est pas conforme. C’est l’outil d’automatisation le plus répandu dans les services informatiques, des établissements scolaires aux grands hébergeurs.', + cm: [ + { t: 'Principe : décrire un état, pas des commandes', d: '', html: 'Un script Bash enchaîne des actions : « installe Nginx, copie ce fichier, redémarre ». Lancé deux fois, il peut échouer ou dupliquer une ligne. Ansible décrit un <b>état désiré</b> : « Nginx doit être installé, ce fichier doit avoir ce contenu, le service doit être actif ». Chaque <b>module</b> vérifie l’état actuel et n’agit que si nécessaire : c’est l’<b>idempotence</b>. Un playbook relancé sur une machine déjà conforme affiche <code>changed=0</code>.<br><br>Ansible est <b>sans agent</b> : le poste de contrôle se connecte en SSH, envoie un petit programme Python, l’exécute et le supprime. Il suffit d’un accès SSH et de Python sur les machines gérées.' }, + { t: 'L’inventaire', d: '', html: 'L’<b>inventaire</b> liste les machines gérées et les range en <b>groupes</b>. Il peut être statique (fichier INI ou YAML) ou dynamique (généré depuis un hyperviseur ou un fournisseur cloud). Les <b>variables</b> se placent dans <code>group_vars/</code> et <code>host_vars/</code>, ce qui sépare les données (quelle machine, quelle valeur) de la logique (les tâches).', exemple: '# inventaire/hosts.yaml\nall:\n children:\n web:\n hosts:\n web1.lycee.local:\n web2.lycee.local:\n db:\n hosts:\n db1.lycee.local:\n ansible_host: 10.62.40.31\n vars:\n ansible_user: admin\n\n$ ansible -i inventaire all -m ping\nweb1.lycee.local | SUCCESS => {"changed": false, "ping": "pong"}' }, + { t: 'Playbooks, tâches et modules', d: '', html: 'Un <b>playbook</b> est une liste de <b>plays</b> : chacun associe un groupe de machines à une liste de <b>tâches</b>. Chaque tâche appelle un <b>module</b> avec des paramètres : <code>ansible.builtin.apt</code> pour les paquets, <code>template</code> pour générer un fichier de configuration, <code>service</code> ou <code>systemd</code> pour les services, <code>user</code>, <code>lineinfile</code>, <code>copy</code>, <code>file</code>. On utilise les noms complets (FQCN) pour éviter toute ambiguïté.<br><br><code>become: true</code> élève les privilèges avec sudo. Les <b>handlers</b> sont des tâches déclenchées par <code>notify</code> seulement si une tâche a réellement changé quelque chose : on ne redémarre Nginx que si sa configuration a été modifiée.', exemple: '- name: Serveurs web\n hosts: web\n become: true\n tasks:\n - name: Installer nginx\n ansible.builtin.apt:\n name: nginx\n state: present\n update_cache: true\n - name: Déployer la configuration du site\n ansible.builtin.template:\n src: site.conf.j2\n dest: /etc/nginx/conf.d/site.conf\n mode: "0644"\n notify: Recharger nginx\n - name: Nginx actif au démarrage\n ansible.builtin.service:\n name: nginx\n state: started\n enabled: true\n handlers:\n - name: Recharger nginx\n ansible.builtin.service:\n name: nginx\n state: reloaded' }, + { t: 'Templates Jinja2 et variables', d: '', html: 'Le module <code>template</code> génère un fichier à partir d’un modèle <b>Jinja2</b> : <code>{{ variable }}</code> insère une valeur, <code>{% for %}</code> et <code>{% if %}</code> ajoutent de la logique. La même configuration sert ainsi à toutes les machines, avec leurs valeurs propres. Les <b>facts</b> collectés automatiquement (adresse IP, distribution, mémoire) sont aussi disponibles comme variables.<br><br>Les variables ont un ordre de <b>priorité</b> : valeurs par défaut d’un rôle, group_vars, host_vars, variables du playbook, puis <code>-e</code> en ligne de commande, qui l’emporte sur tout. Mal maîtrisé, cet ordre explique des valeurs « inattendues ».' }, + { t: 'Rôles et collections', d: '', html: 'Au-delà de quelques dizaines de tâches, on range le code en <b>rôles</b> : une arborescence normalisée (tasks, handlers, templates, defaults, vars, files) qui regroupe tout ce qu’il faut pour une fonction, par exemple « serveur web » ou « durcissement SSH ». Un rôle se réutilise dans plusieurs playbooks et se partage. Les <b>collections</b> distribuent rôles et modules (community.general, ansible.posix) et s’installent avec <code>ansible-galaxy</code>.' }, + { t: 'Tester avant d’appliquer et protéger les secrets', d: '', html: '<code>--check</code> simule l’exécution sans rien modifier, <code>--diff</code> montre les différences de fichiers, <code>--limit web1</code> restreint à une machine, <code>--tags</code> à certaines tâches. En production, on valide toujours sur une machine avant tout le parc.<br><br>Les mots de passe et clés ne doivent pas être en clair dans le dépôt Git. <b>Ansible Vault</b> chiffre un fichier de variables avec AES-256 ; le mot de passe du coffre est fourni à l’exécution. <code>ansible-lint</code> détecte les mauvaises pratiques (tâches non nommées, modules shell là où un module dédié existe, droits de fichiers absents).', attention: 'Les modules command et shell ne sont pas idempotents par nature : ils s’exécutent à chaque passage. Préférer un module dédié, ou ajouter creates, removes ou changed_when pour décrire l’état.' } + ], + synthese: ['Ansible décrit un état désiré ; les modules sont idempotents', 'Sans agent : SSH et Python sur les machines gérées', 'Inventaire en groupes, variables dans group_vars et host_vars', 'Playbook → plays → tâches → modules ; become pour sudo', 'Handlers déclenchés uniquement en cas de changement', 'Templates Jinja2, rôles réutilisables', '--check --diff et --limit avant d’appliquer ; Vault pour les secrets'], + qcm: [ + ['Que signifie qu’une tâche Ansible est idempotente ?', ['Elle est rapide', 'La relancer sur une machine conforme ne change rien', 'Elle s’exécute en parallèle', 'Elle est chiffrée'], 1, 'changed=0 au second passage.'], + ['De quoi Ansible a-t-il besoin sur les machines gérées ?', ['Un agent Ansible', 'SSH et Python', 'Docker', 'Un serveur web'], 1, 'Architecture sans agent.'], + ['Quand un handler s’exécute-t-il ?', ['À chaque tâche', 'Quand une tâche qui le notifie a produit un changement', 'Au début du playbook', 'Jamais automatiquement'], 1, 'Par exemple recharger Nginx seulement si sa configuration a changé.'], + ['Quelle option simule sans modifier ?', ['--dry', '--check', '--test', '--simulate'], 1, 'Souvent combinée avec --diff.'], + ['Où placer une variable commune à tous les serveurs web ?', ['host_vars/web1.yaml', 'group_vars/web.yaml', 'dans le template', 'dans /etc/ansible/ansible.cfg'], 1, 'Variables de groupe.'], + ['Comment protéger un mot de passe dans le dépôt ?', ['Le mettre en commentaire', 'Ansible Vault', 'Le coder en base64', 'Le mettre dans le template'], 1, 'Chiffrement AES-256.'], + ['Pourquoi éviter le module shell pour installer un paquet ?', ['Il est interdit', 'Il n’est pas idempotent et masque l’état réel', 'Il est plus lent', 'Il ne supporte pas sudo'], 1, 'Utiliser apt ou dnf.'] + ], + td: [ + { n: 'Application', c: 'Écrire un playbook qui crée l’utilisateur technicien, lui dépose une clé SSH publique, désactive l’authentification SSH par mot de passe et recharge sshd seulement si nécessaire.', r: 'user (name, groups: sudo, shell) · ansible.posix.authorized_key · lineinfile sur /etc/ssh/sshd_config avec regexp "^#?PasswordAuthentication" line "PasswordAuthentication no" validate "sshd -t -f %s" notify Recharger ssh · handler service ssh reloaded.' }, + { n: 'Application', c: 'Transformer ce passage en tâche idempotente : « shell: echo "10.62.40.20 ent" >> /etc/hosts ».', r: 'ansible.builtin.lineinfile: path=/etc/hosts line="10.62.40.20 ent" (la ligne n’est ajoutée qu’une fois).' }, + { n: 'Approfondissement', c: 'Organiser en rôle le déploiement d’un serveur web : arborescence, variables par défaut, template et handler.', r: 'roles/web/{tasks/main.yml, handlers/main.yml, templates/site.conf.j2, defaults/main.yml (web_port: 443, web_root: /var/www/site)} · playbook : roles: [web].' } + ], + tp: { type: 'Lab VM', url: 'apercu-labs.html', desc: 'Un poste de contrôle et trois VM Debian à configurer.', etapes: ['Écrire l’inventaire et tester ansible -m ping', 'Playbook : paquets et utilisateurs', 'Déployer Nginx avec un template et un handler', 'Vérifier l’idempotence (changed=0)', 'Chiffrer un secret avec Vault', 'Passer ansible-lint'] }, + plusLoin: [['Documentation Ansible', 'https://docs.ansible.com/'], ['Ansible Lint', 'https://ansible.readthedocs.io/projects/lint/'], ['Xavki · tutoriels Ansible en français', 'https://www.youtube.com/@xavki']] }, +plus: { + cas: { titre: '', texte: '' }, + resolu: { enonce: 'Le playbook de mise à jour des 12 serveurs web s’est interrompu cette nuit : 4 serveurs ont la nouvelle configuration Nginx, 8 l’ancienne, et web3 ne répond plus. Diagnostiquer, rétablir et fiabiliser.', etapes: [ + ['Lire le récapitulatif', 'PLAY RECAP\nweb1 ok=6 changed=2 failed=0\nweb3 ok=4 changed=1 failed=1\nweb4…web12 (non traités)\n→ Ansible s’est arrêté après l’échec sur web3 : par défaut, un play traite les machines par lots et s’arrête si toutes celles du lot échouent. L’état du parc est hétérogène.'], + ['Identifier l’erreur', 'TASK [Recharger nginx] fatal: [web3]: FAILED! => {"msg": "Unable to reload service nginx: Job for nginx.service failed"}\nssh web3 sudo nginx -t\nnginx: [emerg] unknown directive "ssl_protocol" in /etc/nginx/conf.d/site.conf:7\n→ Le template contient une faute (ssl_protocol au lieu de ssl_protocols). La configuration invalide a été déposée, le rechargement a échoué et Nginx s’est arrêté sur web3.'], + ['Rétablir web3', 'Correction du template site.conf.j2 (ssl_protocols TLSv1.2 TLSv1.3;)\nansible-playbook site.yml --limit web3 --diff\nweb3 ok=6 changed=2 failed=0\ncurl -sI https://web3.lycee.local | head -1\nHTTP/2 200\n→ On corrige la source (le template), jamais le fichier à la main sur le serveur : sinon le prochain passage réintroduirait l’erreur.'], + ['Fiabiliser le playbook', '- ansible.builtin.template:\n src: site.conf.j2\n dest: /etc/nginx/conf.d/site.conf\n validate: nginx -t -c /etc/nginx/nginx.conf\n notify: Recharger nginx\n- hosts: web\n serial: 2\n max_fail_percentage: 0\n→ validate teste le fichier avant de le mettre en place ; serial: 2 déploie deux serveurs à la fois et arrête tout au premier échec. Une erreur ne touche plus qu’un lot.'], + ['Appliquer au parc et contrôler', 'ansible-playbook site.yml --check --diff --limit web4\nansible-playbook site.yml\nweb1…web12 failed=0\nansible-playbook site.yml (second passage)\nweb1…web12 changed=0\n→ Le parc est homogène et le second passage confirme l’idempotence. Compte rendu : cause, impact, correction, et règle d’équipe : --check sur une machine témoin avant tout déploiement, validation des templates dans la CI avec ansible-lint.'] + ] }, + erreurs: ['Utiliser shell ou command là où un module dédié existe', 'Modifier un fichier à la main sur un serveur géré par Ansible', 'Laisser des mots de passe en clair dans le dépôt', 'Déployer sur tout le parc sans --check ni serial', 'Redémarrer un service à chaque passage au lieu d’un handler', 'Déposer une configuration sans validate'], + memo: [['Commande', 'Usage'], ['ansible all -m ping', 'tester la connexion à tout l’inventaire'], ['ansible web -m ansible.builtin.setup', 'afficher les facts d’un groupe'], ['ansible-playbook site.yml --check --diff', 'simuler et voir les différences'], ['ansible-playbook site.yml --limit web1', 'restreindre à une machine'], ['ansible-playbook site.yml --tags nginx', 'n’exécuter que certaines tâches'], ['ansible-inventory --graph', 'visualiser l’inventaire'], ['ansible-vault create|edit|encrypt', 'gérer les secrets chiffrés'], ['ansible-playbook … --ask-vault-pass', 'fournir le mot de passe du coffre'], ['ansible-galaxy collection install', 'installer une collection'], ['ansible-lint', 'contrôler les bonnes pratiques']], + examen: { titre: 'Sujet type · 20 points', q: ['Expliquer l’idempotence et l’architecture sans agent. (4 pts)', 'Écrire un inventaire et un playbook de déploiement avec template et handler. (8 pts)', 'Rendre idempotentes trois tâches shell fournies. (4 pts)', 'Proposer une stratégie de déploiement sûr sur 50 serveurs. (4 pts)'], r: ['État désiré, SSH + Python', 'hosts.yaml, apt, template, service, handler', 'lineinfile, apt, creates', '--check, serial, validate, max_fail_percentage'] }, + prof: { deroule: [['Ouverture', 'Configurer trois VM à la main en chronométrant, puis avec Ansible'], ['Cours', 'Inventaire, playbooks, modules, idempotence'], ['Pratique', 'Lab trois VM'], ['Incident', 'Template invalide sur un parc'], ['Clôture', 'Quiz flash']], diff: 'Élèves en difficulté : playbook à compléter. Élèves avancés : rôles, Vault, CI avec ansible-lint, Molecule.', eval: 'Lab validé (idempotence vérifiée), sujet type.' } +}, +exemples: [ + ['Tester l’accès à tout le parc', 'Avant un déploiement.', 'ansible -i inventaire all -m ping -o', 'web1.lycee.local | SUCCESS => {"changed": false,"ping": "pong"}\nweb2.lycee.local | UNREACHABLE! => {"msg": "Failed to connect to the host via ssh: Connection timed out"}', 'web2 est injoignable en SSH : on le traite avant de lancer le playbook, sinon le parc sera partiellement configuré.'], + ['Simuler un changement', 'Nouvelle version du template Nginx.', 'ansible-playbook site.yml --check --diff --limit web1', '--- before: /etc/nginx/conf.d/site.conf\n+++ after: site.conf.j2\n- client_max_body_size 8m;\n+ client_max_body_size 64m;\nweb1 : ok=5 changed=1 failed=0', 'Seule la ligne attendue change. On peut appliquer sereinement.'], + ['Vérifier l’idempotence', 'Contrôle qualité d’un playbook.', 'ansible-playbook site.yml | tail -3', 'PLAY RECAP\nweb1 : ok=7 changed=1 unreachable=0 failed=0\nweb2 : ok=7 changed=1 unreachable=0 failed=0', 'Au second passage, une tâche est encore « changed » : c’est une tâche shell sans changed_when. Il faut la remplacer par un module dédié ou décrire sa condition de changement.'], + ['Lire les facts d’une machine', 'Adapter un template à la mémoire disponible.', 'ansible db1 -m ansible.builtin.setup -a "filter=ansible_memtotal_mb"', 'db1 | SUCCESS => {"ansible_facts": {"ansible_memtotal_mb": 7957}}', 'La variable ansible_memtotal_mb est utilisable dans un template, par exemple pour dimensionner shared_buffers de PostgreSQL au quart de la mémoire.'], + ['Chiffrer un secret', 'Mot de passe de la base dans group_vars.', 'ansible-vault encrypt group_vars/db/vault.yml ; head -1 group_vars/db/vault.yml', 'Encryption successful\n$ANSIBLE_VAULT;1.1;AES256', 'Le fichier peut être versionné : sans le mot de passe du coffre, il est illisible.'], + ['Détecter les mauvaises pratiques', 'Revue de code avant fusion.', 'ansible-lint site.yml', 'command-instead-of-module: apt-get used in place of apt module\nsite.yml:14 Task/Handler: shell apt-get install -y nginx\nname[missing]: All tasks should be named\nsite.yml:22', 'ansible-lint signale une installation via shell et une tâche sans nom. On l’intègre dans la CI pour bloquer ces erreurs avant qu’elles atteignent la production.'] +], +termes: ['Ansible', 'playbook', 'inventaire', 'module', 'tâche', 'handler', 'notify', 'idempotence', 'become', 'group_vars', 'host_vars', 'Jinja2', 'template', 'facts', 'rôle', 'collection', 'ansible-galaxy', 'Ansible Vault', 'ansible-lint', '--check', '--diff', '--limit', 'serial', 'validate', 'changed=0'] +}); +})(); diff --git a/design/js/contenus-devops-2.js b/design/js/contenus-devops-2.js new file mode 100644 index 0000000..7770712 --- /dev/null +++ b/design/js/contenus-devops-2.js @@ -0,0 +1,122 @@ +// Cours complets · DevOps lot 2 : Git, CI/CD +(function () { +var reg = function (c) { + (window.CONTENUS_PRO = window.CONTENUS_PRO || []).unshift(c.cours); + (window.CONTENUS_PLUS = window.CONTENUS_PLUS || {})[c.cours.id] = c.plus; + (window.CONTENUS_EXEMPLES = window.CONTENUS_EXEMPLES || {})[c.cours.id] = c.exemples; + (window.CONTENUS_SCHEMAS = window.CONTENUS_SCHEMAS || {})[c.cours.id] = { termes: c.termes, figs: [] }; +}; + +reg({ +cours: { id: 'git', match: /\bGit\b|versionn|gestion de versions/i, + titre: 'Git : versionner, collaborer et revenir en arrière', duree: '', + niveau: 'NSI Terminale · BTS SIO SLAM / SISR · BUT Informatique / R&T · Master', + prerequis: ['Le terminal Linux'], + competences: ['BTS SIO · Bloc 1 · Travailler en mode projet', 'BTS SIO SLAM · Bloc 2 · Gérer les versions d’une solution applicative', 'BUT Info · Compétence « Collaborer au sein d’une équipe informatique »'], + intro: 'Un fichier « rapport_final_v3_corrigé_VRAIMENT_final.docx » résume le problème que Git résout. Dès que plusieurs personnes modifient le même code, ou qu’une seule personne veut pouvoir revenir à la version d’hier, il faut un historique fiable. Git enregistre chaque état du projet, permet de travailler en parallèle sur des branches et de fusionner le travail de chacun. C’est l’outil commun à tous les développeurs et, de plus en plus, aux administrateurs qui versionnent leurs configurations, leurs playbooks et leurs fichiers Compose.', + cm: [ + { t: 'Le modèle de Git : instantanés et empreintes', d: '', html: 'Git ne stocke pas des différences mais des <b>instantanés</b> complets du projet. Chaque fichier, chaque dossier et chaque <b>commit</b> est un objet identifié par l’empreinte de son contenu (SHA-1, en transition vers SHA-256). Deux fichiers identiques ne sont stockés qu’une fois, et toute modification de l’historique change les empreintes : l’intégrité est vérifiable.<br><br>Un commit contient un instantané, un auteur, une date, un message et un lien vers son ou ses <b>parents</b>. L’historique est donc un graphe orienté de commits. Une <b>branche</b> n’est qu’un pointeur mobile vers un commit, et <b>HEAD</b> désigne la branche ou le commit sur lequel on travaille.' }, + { t: 'Les trois zones', d: '', html: 'Un fichier passe par trois zones. Le <b>répertoire de travail</b> contient les fichiers tels qu’on les édite. L’<b>index</b> (staging area) contient ce qui sera enregistré au prochain commit : on y ajoute les modifications avec <code>git add</code>. Le <b>dépôt</b> (.git) contient l’historique, et <code>git commit</code> y enregistre l’index.<br><br>Cette étape intermédiaire permet de faire des commits cohérents : on n’ajoute que les modifications qui vont ensemble, même si on a travaillé sur plusieurs sujets à la fois. <code>git status</code> montre à tout moment l’état des trois zones.', exemple: 'git init\ngit add index.html style.css\ngit commit -m "Page d’accueil du TP"\ngit status\ngit log --oneline --graph' }, + { t: 'Branches et fusions', d: '', html: 'On crée une branche pour chaque fonctionnalité ou correction (<code>git switch -c correctif-login</code>). La branche principale (main) reste stable. Quand le travail est terminé, on le <b>fusionne</b>. Si main n’a pas bougé, Git avance simplement le pointeur (<b>fast-forward</b>). Sinon, il crée un <b>commit de fusion</b> qui a deux parents.<br><br>Si les deux branches ont modifié les mêmes lignes, Git ne peut pas choisir : c’est un <b>conflit</b>. Il marque les zones concernées dans le fichier (<code><<<<<<<</code>, <code>=======</code>, <code>>>>>>>></code>). On édite pour garder la bonne version, on ajoute le fichier et on termine le commit.<br><br>Le <b>rebase</b> est l’alternative à la fusion : il rejoue les commits d’une branche au-dessus d’une autre, pour un historique linéaire. Il réécrit les commits, donc on ne rebase jamais une branche déjà partagée.' }, + { t: 'Travailler avec un dépôt distant', d: '', html: 'Un <b>dépôt distant</b> (GitHub, GitLab, Forgejo auto-hébergé) sert de point de rencontre. <code>git clone</code> copie un dépôt, <code>git fetch</code> récupère les nouveautés sans les appliquer, <code>git pull</code> récupère et fusionne, <code>git push</code> publie ses commits. Les branches distantes apparaissent sous le nom <code>origin/main</code>.<br><br>En équipe, on ne pousse pas directement sur main : on pousse une branche et on ouvre une <b>demande de fusion</b> (pull request ou merge request), relue par un collègue et validée par les tests automatiques avant d’être intégrée.', attention: 'Un push refusé (« rejected, non-fast-forward ») signifie que le dépôt distant a des commits que vous n’avez pas. On fait git pull (ou fetch puis rebase), jamais git push --force sur une branche partagée : on effacerait le travail des autres.' }, + { t: 'Revenir en arrière', d: '', html: 'Git offre plusieurs façons d’annuler, selon ce qu’on veut défaire. <code>git restore fichier</code> annule les modifications non ajoutées. <code>git restore --staged fichier</code> retire un fichier de l’index. <code>git commit --amend</code> corrige le dernier commit s’il n’a pas été poussé. <code>git revert id</code> crée un nouveau commit qui annule un commit précédent : c’est la seule méthode sûre sur un historique partagé. <code>git reset</code> déplace la branche en arrière et réécrit l’historique local.<br><br>Même après une erreur, rien n’est perdu tout de suite : <code>git reflog</code> liste les positions successives de HEAD et permet de retrouver un commit « supprimé ».' }, + { t: 'Ce qui ne va pas dans Git', d: '', html: 'Le fichier <code>.gitignore</code> exclut ce qui ne doit pas être versionné : dépendances (node_modules, vendor), fichiers générés, journaux, et surtout <b>secrets</b> (.env, clés). Un mot de passe poussé une fois reste dans l’historique même après suppression du fichier : il faut le considérer comme compromis et le changer.<br><br>Un bon <b>message de commit</b> décrit pourquoi, pas seulement quoi : « Corrige le calcul de la moyenne quand un élève est absent » plutôt que « fix ». Beaucoup d’équipes adoptent la convention Conventional Commits (feat:, fix:, docs:).' } + ], + synthese: ['Git stocke des instantanés identifiés par empreinte ; une branche est un pointeur', 'Répertoire de travail → index (add) → dépôt (commit)', 'Une branche par fonctionnalité, fusion ou rebase ; conflit = même ligne modifiée des deux côtés', 'fetch, pull, push ; demande de fusion relue avant main', 'revert sur l’historique partagé, reset seulement en local, reflog pour retrouver', '.gitignore et aucun secret dans l’historique'], + qcm: [ + ['Que contient l’index ?', ['L’historique', 'Ce qui sera enregistré au prochain commit', 'Les branches distantes', 'Les fichiers ignorés'], 1, 'On y ajoute avec git add.'], + ['Qu’est-ce qu’une branche pour Git ?', ['Une copie du projet', 'Un pointeur mobile vers un commit', 'Un dossier', 'Un dépôt distant'], 1, 'Créer une branche est instantané.'], + ['Quand survient un conflit de fusion ?', ['Toujours', 'Quand les deux branches ont modifié les mêmes lignes', 'Quand on oublie git add', 'Quand le dépôt est trop gros'], 1, 'Git ne peut pas choisir seul.'], + ['Comment annuler proprement un commit déjà poussé sur main ?', ['git reset --hard', 'git revert', 'git push --force', 'supprimer .git'], 1, 'revert ajoute un commit d’annulation.'], + ['Différence entre fetch et pull ?', ['Aucune', 'fetch récupère sans fusionner, pull récupère et fusionne', 'fetch publie', 'pull supprime'], 1, 'fetch est sans risque.'], + ['Un mot de passe a été poussé puis supprimé au commit suivant. Il est :', ['effacé', 'toujours dans l’historique, à changer', 'chiffré', 'invisible'], 1, 'L’historique garde tout.'], + ['Quelle commande retrouve un commit perdu après un reset ?', ['git log', 'git reflog', 'git status', 'git show'], 1, 'Historique des positions de HEAD.'] + ], + td: [ + { n: 'Échauffement', c: 'Initialiser un dépôt, créer README.md, le versionner, le modifier, afficher la différence, puis faire un second commit.', r: 'git init · git add README.md · git commit -m "…" · git diff · git commit -am "…"' }, + { n: 'Application', c: 'Créer une branche nouvelle-page, y faire deux commits, revenir sur main, faire un commit qui touche la même ligne, fusionner et résoudre le conflit.', r: 'git switch -c nouvelle-page … git switch main … git merge nouvelle-page → conflit → éditer, git add, git commit' }, + { n: 'Application', c: 'Écrire le .gitignore d’un projet Laravel.', r: '/vendor\n/node_modules\n.env\n/storage/*.key\n/public/storage\n*.log' }, + { n: 'Approfondissement', c: 'Vous avez fait git reset --hard HEAD~2 par erreur. Retrouver les deux commits.', r: 'git reflog → repérer l’id avant le reset · git reset --hard <id> (ou git branch secours <id>)' } + ], + tp: { type: 'Lab VM', url: 'apercu-labs.html', desc: 'Un dépôt partagé sur un Forgejo de lab, travail en binôme.', etapes: ['Cloner le dépôt', 'Créer une branche et ouvrir une demande de fusion', 'Provoquer et résoudre un conflit avec le binôme', 'Annuler un commit avec revert', 'Retrouver un commit avec reflog'] }, + plusLoin: [['Pro Git (livre officiel, en français)', 'https://git-scm.com/book/fr/v2'], ['Learn Git Branching (exercices interactifs)', 'https://learngitbranching.js.org/?locale=fr_FR'], ['Conventional Commits', 'https://www.conventionalcommits.org/fr/']] }, +plus: { + cas: { titre: '', texte: '' }, + resolu: { enonce: 'Vendredi 17 h : un développeur a poussé sur main un commit qui casse la page de connexion de l’application de vie scolaire, puis un collègue a déjà poussé deux commits par-dessus. Rétablir sans perdre le travail du collègue.', etapes: [ + ['Identifier le commit fautif', 'git log --oneline -5\n9c1e4f2 Traductions du menu\n51ab0d7 Ajout export CSV\ne73f210 Refonte formulaire connexion\n4d02a9b Correctif date\n→ La panne est apparue après e73f210. Les deux commits suivants ne touchent pas à la connexion.'], + ['Confirmer avec git bisect si le doute subsiste', 'git bisect start ; git bisect bad ; git bisect good 4d02a9b\n… git bisect good / bad à chaque étape\ne73f210 is the first bad commit\ngit bisect reset\n→ bisect teste par dichotomie et désigne le premier commit fautif.'], + ['Annuler ce seul commit', 'git revert e73f210\n[main 0f5a8c3] Revert "Refonte formulaire connexion"\n→ Un nouveau commit annule les modifications de e73f210 ; les commits du collègue sont conservés. Surtout pas de reset suivi d’un push --force sur main.'], + ['Publier et vérifier', 'git push origin main\n→ La chaîne d’intégration redéploie ; la connexion fonctionne à nouveau.'], + ['Reprendre le travail proprement', 'git switch -c refonte-connexion\ngit revert 0f5a8c3 (réapplique la refonte sur la branche)\n→ La refonte est corrigée sur une branche, testée, puis fusionnée par demande de fusion. Action préventive : protéger main (fusion uniquement par demande relue et tests verts).'] + ] }, + erreurs: ['Pousser directement sur main', 'Utiliser push --force sur une branche partagée', 'Versionner .env ou des clés', 'Faire un seul énorme commit pour tout', 'Messages de commit du type « fix » ou « modif »', 'Rebaser une branche déjà partagée'], + memo: [['Commande', 'Usage'], ['git status', 'état des trois zones'], ['git add -p', 'ajouter une partie des modifications'], ['git commit -m "…"', 'enregistrer'], ['git log --oneline --graph --all', 'voir le graphe des commits'], ['git diff · git diff --staged', 'différences non ajoutées / ajoutées'], ['git switch -c <branche>', 'créer une branche et s’y placer'], ['git merge <branche>', 'fusionner'], ['git pull --rebase', 'récupérer en gardant un historique linéaire'], ['git push -u origin <branche>', 'publier une branche'], ['git revert <id>', 'annuler un commit partagé'], ['git reflog', 'retrouver une position perdue'], ['git bisect', 'trouver le commit qui a introduit un bug']], + examen: { titre: 'Sujet type · 20 points', q: ['Expliquer les trois zones de Git avec un schéma. (4 pts)', 'Décrire les commandes d’un travail en branche jusqu’à la demande de fusion. (5 pts)', 'Résoudre un conflit fourni. (4 pts)', 'Choisir entre revert et reset dans trois situations. (4 pts)', 'Rédiger le .gitignore d’un projet donné. (3 pts)'], r: ['working tree, index, dépôt', 'switch -c, add, commit, push -u, PR', 'selon le fichier', 'partagé → revert, local → reset', 'dépendances, secrets, fichiers générés'] }, + prof: { deroule: [['Ouverture', 'Le fichier « final_v3_VRAIMENT_final » projeté'], ['Cours', 'Commits, index, branches'], ['Pratique', 'Exercices Learn Git Branching'], ['Pratique', 'Binômes sur un dépôt partagé, conflit provoqué'], ['Clôture', 'Quiz flash']], diff: 'Élèves en difficulté : fiche mémo, un seul flux sans branches. Élèves avancés : rebase interactif, bisect, hooks.', eval: 'Historique du dépôt de binôme évalué, sujet type.' } +}, +exemples: [ + ['Lire l’état du dépôt', 'Avant un commit.', 'git status -s', ' M app/Http/Controllers/NoteController.php\nM routes/web.php\n?? notes.csv', 'M en deuxième colonne : modifié, pas encore ajouté. M en première : ajouté à l’index. ?? : fichier non suivi ; ici un export de notes à ne surtout pas versionner, à ajouter au .gitignore.'], + ['Voir le graphe', 'Comprendre où en sont les branches.', 'git log --oneline --graph --all -6', '* 9c1e4f2 (HEAD -> main, origin/main) Traductions du menu\n| * 3aa71be (export-pdf) Export PDF des bulletins\n|/\n* 51ab0d7 Ajout export CSV', 'La branche export-pdf est partie de 51ab0d7 ; main a avancé depuis. La fusion créera un commit de fusion, ou un rebase rendra l’historique linéaire.'], + ['Push refusé', 'Publication de son travail.', 'git push', '! [rejected] main -> main (fetch first)\nhint: Updates were rejected because the remote contains work that you do not have locally.', 'Un collègue a poussé avant vous. git pull --rebase rejoue vos commits au-dessus des siens, puis git push passe.'], + ['Résoudre un conflit', 'Fusion de deux branches.', 'git merge nouvelle-page ; git diff --name-only --diff-filter=U', 'CONFLICT (content): Merge conflict in index.html\nAutomatic merge failed; fix conflicts and then commit the result.\nindex.html', 'On ouvre index.html, on choisit le contenu entre les marqueurs, on supprime les marqueurs, puis git add index.html et git commit.'], + ['Retrouver un travail « perdu »', 'Après un reset malheureux.', 'git reflog -4', '4d02a9b HEAD@{0}: reset: moving to HEAD~2\n9c1e4f2 HEAD@{1}: commit: Traductions du menu\n51ab0d7 HEAD@{2}: commit: Ajout export CSV', 'Le commit 9c1e4f2 existe toujours. git reset --hard 9c1e4f2 le récupère.'], + ['Trouver qui a modifié une ligne', 'Une règle de calcul semble fausse.', 'git blame -L 42,44 app/Services/Moyenne.php', '51ab0d7 (Inès K. 2026-09-24) $coef = $note->coef ?? 1;\ne73f210 (Tom L. 2026-09-27) $total += $note->valeur;\ne73f210 (Tom L. 2026-09-27) return $total / count($notes);', 'blame associe chaque ligne à son dernier commit. La division par count($notes) ignore les coefficients : on regarde le commit e73f210 avec git show pour comprendre le changement.'] +], +termes: ['Git', 'commit', 'index', 'branche', 'HEAD', 'main', 'merge', 'rebase', 'conflit', 'fast-forward', 'git add', 'git commit', 'git status', 'git log', 'git diff', 'git switch', 'git pull', 'git push', 'git fetch', 'git revert', 'git reset', 'git reflog', 'git bisect', 'git blame', '.gitignore', 'pull request', 'origin'] +}); + +reg({ +cours: { id: 'cicd', match: /CI\/CD|intégration continue|déploiement continu|pipeline/i, + titre: 'CI/CD : intégration et déploiement continus', duree: '', + niveau: 'BTS SIO SLAM / SISR · BUT Informatique / R&T DevCloud · AIS · Master', + prerequis: ['Git', 'Conteneurs Docker'], + competences: ['BTS SIO SLAM · Bloc 2 · Déployer et tester une solution applicative', 'BUT R&T DevCloud · Automatiser le déploiement', 'AIS · Industrialiser les mises en production'], + intro: 'Livrer à la main, c’est se connecter au serveur, tirer le code, lancer les migrations, vider les caches et espérer ne rien oublier. Une chaîne d’intégration et de déploiement continus automatise ces étapes : à chaque push, les tests s’exécutent, l’image est construite et, si tout est vert, l’application est déployée. Les erreurs sont détectées en minutes plutôt qu’en production, et chaque livraison devient un non-événement.', + cm: [ + { t: 'Intégration, livraison, déploiement', d: '', html: 'L’<b>intégration continue</b> (CI) fusionne le travail de chacun fréquemment et vérifie automatiquement chaque modification : compilation, analyse statique, tests. La <b>livraison continue</b> (continuous delivery) produit à chaque fois un artefact prêt à déployer, la mise en production restant une décision humaine. Le <b>déploiement continu</b> (continuous deployment) va jusqu’à la production sans intervention.<br><br>Le principe commun : la branche principale est toujours dans un état déployable, et toute régression est signalée immédiatement à celui qui l’a introduite.' }, + { t: 'Anatomie d’un pipeline', d: '', html: 'Un <b>pipeline</b> est une suite d’<b>étapes</b> (stages) composées de <b>jobs</b>, exécutés par des <b>runners</b> dans des environnements propres, souvent des conteneurs. On y trouve typiquement : vérification du style (lint), tests unitaires, construction de l’image, analyse de sécurité, publication dans un registre, déploiement en préproduction, puis en production.<br><br>Chaque job reçoit le code du commit, produit éventuellement des <b>artefacts</b> (paquet, rapport de tests, image) et renvoie un statut. Un seul échec arrête le pipeline.', exemple: '# .github/workflows/ci.yml (GitHub Actions)\nname: ci\non: [push, pull_request]\njobs:\n tests:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n - uses: actions/setup-python@v5\n with: { python-version: "3.12" }\n - run: pip install -r requirements.txt\n - run: ruff check .\n - run: pytest -q\n image:\n needs: tests\n if: github.ref == \'refs/heads/main\'\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n - run: docker build -t registre.lycee.local/resa:${{ github.sha }} .\n - run: trivy image --exit-code 1 --severity HIGH,CRITICAL registre.lycee.local/resa:${{ github.sha }}\n - run: docker push registre.lycee.local/resa:${{ github.sha }}' }, + { t: 'Les tests, cœur de la CI', d: '', html: 'Une CI ne vaut que par ses tests. Les <b>tests unitaires</b> vérifient une fonction isolée, en millisecondes. Les <b>tests d’intégration</b> vérifient l’application avec sa base de données, souvent démarrée comme service du pipeline. Les <b>tests de bout en bout</b> pilotent un navigateur (Playwright, Cypress). On en écrit beaucoup des premiers, peu des derniers : c’est la pyramide des tests.<br><br>Un test instable (qui échoue une fois sur dix sans raison) est pire que pas de test : l’équipe apprend à ignorer le rouge. Il se corrige en priorité.' }, + { t: 'Déployer sans interruption', d: '', html: 'Le déploiement tire l’image construite et testée, identifiée par l’empreinte du commit, jamais par latest. Plusieurs stratégies limitent le risque. Le <b>déploiement progressif</b> (rolling) remplace les instances une à une. Le <b>blue-green</b> prépare la nouvelle version à côté de l’ancienne puis bascule le trafic. Le <b>canary</b> envoie d’abord une petite part des utilisateurs sur la nouvelle version.<br><br>Dans tous les cas, on prévoit le <b>retour arrière</b> : redéployer l’image précédente doit prendre une commande. Les migrations de base de données doivent rester compatibles avec la version précédente le temps de la bascule.' }, + { t: 'Secrets et sécurité de la chaîne', d: '', html: 'Le pipeline manipule des secrets : accès au registre, clés SSH de déploiement, jetons d’API. Ils se stockent dans le gestionnaire de secrets de la plateforme (secrets GitHub, variables masquées GitLab), jamais dans le dépôt, et avec des droits minimaux (une clé de déploiement ne peut que déployer).<br><br>La chaîne elle-même est une cible : une action tierce compromise ou une dépendance malveillante s’exécute avec les secrets du pipeline. On épingle les actions sur une version précise, on analyse les dépendances (Dependabot, Renovate) et on protège les branches : pas de déploiement en production depuis une branche non relue.' } + ], + synthese: ['CI : vérifier chaque modification ; CD : livrer ou déployer automatiquement', 'Pipeline = étapes → jobs → runners, arrêt au premier échec', 'Pyramide des tests ; un test instable se corrige en priorité', 'Image identifiée par le commit ; stratégie de déploiement et retour arrière prévus', 'Secrets dans la plateforme, actions épinglées, branches protégées'], + qcm: [ + ['Différence entre livraison continue et déploiement continu ?', ['Aucune', 'La livraison laisse la mise en production à une décision humaine', 'Le déploiement ne teste pas', 'La livraison est manuelle'], 1, 'Continuous delivery vs deployment.'], + ['Que se passe-t-il quand un job échoue ?', ['Le pipeline continue', 'Le pipeline s’arrête et signale l’échec', 'Le job est ignoré', 'Le code est supprimé'], 1, 'On ne déploie pas du rouge.'], + ['Pourquoi taguer l’image avec l’empreinte du commit ?', ['Esthétique', 'Pour savoir exactement quel code tourne et pouvoir revenir en arrière', 'Obligatoire', 'Plus léger'], 1, 'Traçabilité et reproductibilité.'], + ['Quelle stratégie envoie d’abord 5 % des utilisateurs sur la nouvelle version ?', ['Rolling', 'Blue-green', 'Canary', 'Big bang'], 2, 'Détection précoce sur un petit échantillon.'], + ['Où stocker la clé de déploiement ?', ['Dans le dépôt', 'Dans les secrets de la plateforme CI', 'Dans le Dockerfile', 'Dans le README'], 1, 'Jamais dans le code.'], + ['Que faire d’un test qui échoue au hasard ?', ['L’ignorer', 'Le corriger en priorité', 'Le supprimer toujours', 'Relancer jusqu’au vert'], 1, 'Sinon on ne croit plus au rouge.'] + ], + td: [ + { n: 'Application', c: 'Écrire un pipeline GitLab CI (.gitlab-ci.yml) en trois étapes : lint, test, build, avec une base PostgreSQL en service pour les tests.', r: 'stages: [lint, test, build]\nlint: { stage: lint, image: python:3.12, script: [pip install ruff, ruff check .] }\ntest: { stage: test, image: python:3.12, services: [postgres:16], variables: { POSTGRES_PASSWORD: test, DATABASE_URL: postgresql://postgres:test@postgres/postgres }, script: [pip install -r requirements.txt, pytest] }\nbuild: { stage: build, image: docker:27, services: [docker:27-dind], script: [docker build -t $CI_REGISTRY_IMAGE:$CI_COMMIT_SHA ., docker push $CI_REGISTRY_IMAGE:$CI_COMMIT_SHA], rules: [{ if: $CI_COMMIT_BRANCH == "main" }] }' }, + { n: 'Application', c: 'Proposer une procédure de retour arrière pour une application déployée avec Compose et des images taguées par commit.', r: 'Garder le tag précédent dans l’historique des déploiements · modifier le tag dans compose.yaml (ou variable IMAGE_TAG) · docker compose pull && up -d · vérifier · migrations compatibles N-1.' }, + { n: 'Approfondissement', c: 'Lister les risques de sécurité d’un pipeline et une mesure pour chacun.', r: 'Secret fuité → secrets masqués, droits minimaux · action tierce compromise → épingler par empreinte · dépendance malveillante → analyse et verrouillage des versions · déploiement non relu → branches protégées.' } + ], + tp: { type: 'Lab VM', url: 'apercu-labs.html', desc: 'Un Forgejo avec runner, une API et son déploiement.', etapes: ['Écrire le workflow lint + tests', 'Casser un test et observer le blocage', 'Construire et scanner l’image', 'Déployer sur la VM de préproduction', 'Revenir à la version précédente'] }, + plusLoin: [['GitHub Actions · documentation', 'https://docs.github.com/fr/actions'], ['GitLab CI/CD · documentation', 'https://docs.gitlab.com/ee/ci/'], ['Forgejo Actions', 'https://forgejo.org/docs/latest/user/actions/']] }, +plus: { + cas: { titre: '', texte: '' }, + resolu: { enonce: 'Le pipeline de l’application de réservation est rouge depuis ce matin sur l’étape tests, alors que les tests passent sur le poste du développeur. Plus aucune correction ne peut être déployée.', etapes: [ + ['Lire le job en échec', 'tests / pytest\nE sqlalchemy.exc.OperationalError: could not connect to server: Connection refused\n Is the server running on host "localhost" and accepting TCP/IP connections on port 5432?\n→ Ce n’est pas un test fonctionnel qui échoue : l’application ne trouve pas sa base.'], + ['Comparer les environnements', 'Sur le poste : PostgreSQL installé localement, DATABASE_URL absente → valeur par défaut localhost.\nDans le pipeline : la base est un service nommé postgres.\n→ Un commit d’hier a supprimé la variable DATABASE_URL du workflow en « nettoyant » le fichier.'], + ['Corriger le workflow', 'services:\n postgres:\n image: postgres:16\n env: { POSTGRES_PASSWORD: test }\n options: --health-cmd pg_isready --health-interval 5s --health-retries 10\nenv:\n DATABASE_URL: postgresql://postgres:test@localhost:5432/postgres\n→ Le service est déclaré avec un healthcheck et la variable est rétablie.'], + ['Vérifier', 'git push → pipeline : lint ✓ tests ✓ image ✓\n→ Le pipeline est vert ; la correction en attente est déployée.'], + ['Prévenir', '→ Le fichier de workflow passe sous relue obligatoire (CODEOWNERS), et un test de fumée vérifie au démarrage que DATABASE_URL est définie, avec un message explicite plutôt qu’une erreur de connexion.'] + ] }, + erreurs: ['Pipeline sans tests réels', 'Tolérer un pipeline rouge « connu »', 'Déployer l’image latest', 'Secrets en clair dans le workflow', 'Actions tierces non épinglées', 'Pas de procédure de retour arrière'], + memo: [['Élément', 'À retenir'], ['on: push / pull_request', 'déclencheurs d’un workflow GitHub'], ['needs:', 'ordre entre jobs'], ['services:', 'base de données pour les tests'], ['secrets.NOM', 'accès à un secret masqué'], ['rules / if', 'n’exécuter que sur main'], ['artifacts', 'conserver rapports et paquets'], ['cache', 'accélérer les dépendances'], ['${{ github.sha }} / $CI_COMMIT_SHA', 'taguer l’image par commit'], ['trivy image --exit-code 1', 'bloquer sur une vulnérabilité critique'], ['environments + approbation', 'validation humaine avant production']], + examen: { titre: 'Sujet type · 20 points', q: ['Définir CI, livraison et déploiement continus. (3 pts)', 'Écrire un pipeline complet pour une application fournie. (8 pts)', 'Comparer trois stratégies de déploiement. (4 pts)', 'Diagnostiquer un pipeline en échec à partir d’un journal. (3 pts)', 'Citer deux risques de sécurité de la chaîne. (2 pts)'], r: ['voir cours', 'lint, tests, build, push, deploy', 'rolling, blue-green, canary', 'selon le journal', 'secrets, actions tierces'] }, + prof: { deroule: [['Ouverture', 'Déploiement manuel chronométré, puis le même en un push'], ['Cours', 'Pipeline, tests, artefacts'], ['Pratique', 'Workflow lint + tests'], ['Pratique', 'Build et déploiement'], ['Clôture', 'Quiz flash']], diff: 'Élèves en difficulté : workflow à compléter. Élèves avancés : déploiement canary, analyse de dépendances.', eval: 'Pipeline vert et retour arrière démontré, sujet type.' } +}, +exemples: [ + ['Lire l’état des pipelines', 'Après un push.', 'gh run list --limit 3', 'STATUS TITLE WORKFLOW BRANCH\n✓ Export CSV ci main\nX Refonte connexion ci refonte\n✓ Traductions ci main', 'La branche refonte est rouge : elle ne pourra pas être fusionnée tant que la protection de branche exige des tests verts.'], + ['Voir le journal d’un job', 'Pipeline rouge.', 'gh run view --log-failed | tail -4', 'tests FAILED tests/test_moyenne.py::test_absent - ZeroDivisionError\ntests 1 failed, 47 passed in 3.21s', 'Un seul test échoue, avec une erreur précise : la moyenne d’un élève sans note divise par zéro. La CI a attrapé le bug avant la production.'], + ['Relancer localement comme la CI', 'Reproduire un échec.', 'docker run --rm -v "$PWD":/app -w /app python:3.12 sh -c "pip install -q -r requirements.txt && pytest -q"', '1 failed, 47 passed', 'Exécuter les tests dans la même image que la CI élimine le « chez moi ça marche ».'], + ['Bloquer une image vulnérable', 'Étape de sécurité.', 'trivy image --exit-code 1 --severity CRITICAL registre.lycee.local/resa:9c1e4f2', 'Total: 1 (CRITICAL: 1)\nopenssl 3.0.2 CVE-2024-XXXX fixed in 3.0.14', 'Le code de sortie 1 fait échouer le job : l’image n’est pas publiée. On met à jour l’image de base et on reconstruit.'], + ['Déployer une version précise', 'Déploiement depuis le pipeline.', 'ssh deploy@preprod "cd /srv/resa && IMAGE_TAG=9c1e4f2 docker compose up -d && docker compose ps"', 'resa-app registre.lycee.local/resa:9c1e4f2 Up 5 seconds (healthy)', 'Le tag est l’empreinte du commit : on sait exactement quel code tourne.'], + ['Revenir en arrière', 'La nouvelle version provoque des erreurs.', 'ssh deploy@prod "cd /srv/resa && IMAGE_TAG=51ab0d7 docker compose up -d"', 'Container resa-app Recreated', 'Retour à la version précédente en une commande, parce que chaque image est conservée avec son tag de commit.'] +], +termes: ['CI/CD', 'intégration continue', 'déploiement continu', 'livraison continue', 'pipeline', 'job', 'runner', 'artefact', 'workflow', 'GitHub Actions', 'GitLab CI', 'Forgejo', 'tests unitaires', 'lint', 'canary', 'blue-green', 'rolling', 'retour arrière', 'secrets', 'Trivy'] +}); +})(); diff --git a/design/js/contenus-exemples.js b/design/js/contenus-exemples.js new file mode 100644 index 0000000..0850877 --- /dev/null +++ b/design/js/contenus-exemples.js @@ -0,0 +1,183 @@ +// Exemples concrets commentés : [titre, contexte, code, sortie, explication] +window.CONTENUS_EXEMPLES = { +binaire: [ + ['Lire une adresse MAC', 'Sur l’étiquette d’une carte réseau.', '3C:52:82:1A:0F:9B', '6 octets · 3C = 0011 1100 = 60', 'Chaque paire hexadécimale est un octet. Les 3 premiers identifient le fabricant (OUI), les 3 derniers la carte.'], + ['Décoder une couleur web', 'Dans une feuille CSS.', '#FF6FB5', 'rouge 255 · vert 111 · bleu 181', 'Trois octets en hexadécimal. FF est le maximum : la couleur est très rouge, un peu bleue, c’est un rose.'], + ['Calculer un masque de tête', 'Un collègue demande « c’est quoi un /22 ? ».', '/22 = 11111111.11111111.11111100.00000000', '255.255.252.0 · 1 022 hôtes', '22 bits à 1 : deux octets pleins, puis 6 bits à 1 (128+64+32+16+8+4 = 252). Il reste 10 bits d’hôte : 2¹⁰ − 2 = 1 022.'], + ['Convertir en Python', 'Vérifier un calcul fait à la main.', 'bin(178), hex(178), int("B2", 16), int("10110010", 2)', "('0b10110010', '0xb2', 178, 178)", 'bin et hex convertissent vers le texte ; int avec une base convertit dans l’autre sens.'], + ['Débordement sur 8 bits', 'Un compteur de capteur repasse à zéro.', 'compteur = (255 + 1) % 256', '0', 'Sur un octet non signé, 255 + 1 ne tient plus : le 9e bit est perdu et l’on repart de 0.'], + ['Taille d’une image', 'Estimer le poids d’une photo non compressée.', '1920 × 1080 pixels × 3 octets', '6 220 800 octets ≈ 5,9 Mio', 'Chaque pixel a 3 couleurs sur 1 octet. C’est pour cela qu’on compresse en JPEG ou PNG.']], +terminal: [ + ['Préparer un TP', 'Créer d’un coup l’arborescence d’un projet.', 'mkdir -p ~/tp/{reseau,systeme,web} && ls ~/tp', 'reseau systeme web', 'Les accolades génèrent trois chemins. -p évite l’erreur si ~/tp existe déjà.'], + ['Retrouver un fichier perdu', 'Un élève ne sait plus où il a enregistré rapport.txt.', 'find ~ -name "rapport*.txt" 2>/dev/null', '/home/eleve/Documents/old/rapport-v2.txt', 'find part du dossier personnel ; 2>/dev/null masque les dossiers inaccessibles.'], + ['Voir les derniers événements', 'Le service web ne démarre pas.', 'sudo journalctl -u apache2 -n 20 --no-pager', 'AH00072: make_sock: could not bind to address [::]:80', 'Le port 80 est déjà pris par un autre programme : on le cherche avec sudo ss -tlnp | grep :80.'], + ['Sauvegarder un dossier', 'Avant une modification risquée.', 'tar czf site-$(date +%F).tar.gz /var/www/site', 'site-2026-09-30.tar.gz', '$(date +%F) insère la date du jour : chaque sauvegarde a un nom unique.'], + ['Repérer ce qui ralentit la machine', 'Le serveur répond lentement.', 'ps aux --sort=-%cpu | head -5', 'www-data 8812 97.3 … php-fpm', 'Un processus PHP consomme presque tout le processeur : on regarde le script en cause avant de le tuer.'], + ['Rejouer une commande', 'Vous avez tapé une longue commande hier.', 'Ctrl+R puis « rsync »', '(reverse-i-search)`rsync\': rsync -av site/ srv:/var/www/', 'La recherche dans l’historique évite de tout retaper.']], +droits: [ + ['Lire une ligne de ls -l', 'Comprendre pourquoi un fichier est inaccessible.', 'ls -l notes.csv', '-rw-r----- 1 alice profs 4096 sept. 30 notes.csv', 'alice lit et écrit, le groupe profs lit, les autres rien. Un élève ne peut pas l’ouvrir.'], + ['Rendre un script exécutable', '« Permission non accordée » au lancement.', 'chmod u+x sauvegarde.sh && ./sauvegarde.sh', 'Sauvegarde terminée.', 'Seul le propriétaire reçoit le droit d’exécution, pas tout le monde.'], + ['Créer un espace partagé', 'Les profs de SIO veulent un dossier commun.', 'sudo mkdir /srv/sio && sudo chown root:profsio /srv/sio && sudo chmod 2770 /srv/sio', 'drwxrws--- root profsio /srv/sio', 'Le s du groupe (SGID) fait que chaque fichier créé appartient à profsio.'], + ['Vérifier ses groupes', 'Après avoir été ajouté à un groupe.', 'id', 'uid=1001(bob) … groupes=1001(bob),1002(devs)', 'Si devs n’apparaît pas, il faut se déconnecter puis se reconnecter.'], + ['Trouver les fichiers trop ouverts', 'Audit rapide d’un serveur.', 'sudo find /var/www -perm -o+w -type f', '/var/www/site/config.php', 'Un fichier de configuration modifiable par tous est une faille : chmod o-w config.php.'], + ['Donner un accès ponctuel', 'Un stagiaire doit lire un seul rapport.', 'setfacl -m u:stagiaire:r rapport.pdf && getfacl rapport.pdf', 'user:stagiaire:r--', 'L’ACL donne l’accès à une seule personne sans toucher au groupe.']], +tubes: [ + ['Compter les comptes humains', 'Combien d’utilisateurs ont un shell ?', 'grep -c "/bin/bash$" /etc/passwd', '14', 'grep -c compte au lieu d’afficher ; $ ancre la recherche en fin de ligne.'], + ['Top des pages visitées', 'Préparer un bilan pour la direction.', "awk '{print $7}' /var/log/apache2/access.log | sort | uniq -c | sort -rn | head -3", ' 812 /\n 430 /planning\n 211 /cours', 'Le 7e champ d’une ligne Apache est le chemin demandé.'], + ['Suivre les connexions en direct', 'Pendant un examen en ligne.', 'tail -f /var/log/auth.log | grep --line-buffered sshd', 'Accepted publickey for prof from 10.0.0.12', 'tail -f affiche au fil de l’eau ; --line-buffered évite que grep retienne les lignes.'], + ['Nettoyer les vieux journaux', 'Libérer de l’espace chaque semaine.', 'find /var/log/app -name "*.log" -mtime +30 | xargs rm -v', "supprimé '/var/log/app/2026-07-01.log'", 'xargs transforme la liste en arguments pour rm.'], + ['Remplacer dans un fichier', 'Passer toutes les URL en HTTPS.', "sed -i 's#http://#https://#g' index.html", '(aucune sortie)', '-i modifie le fichier sur place ; # remplace / comme séparateur pour éviter d’échapper les barres.'], + ['Garder une trace d’un diagnostic', 'Envoyer le résultat au support.', './diagnostic.sh 2>&1 | tee rapport.txt', '(affichage à l’écran + fichier rapport.txt)', '2>&1 fusionne les erreurs dans la sortie, tee écrit tout dans le fichier.']], +osi: [ + ['Tester la couche 3', 'Le poste accède-t-il à la passerelle ?', 'ping -c 3 192.168.10.1', '3 packets transmitted, 3 received, 0% packet loss', 'La couche réseau fonctionne jusqu’à la passerelle.'], + ['Suivre le chemin d’un paquet', 'Un site distant est lent.', 'traceroute www.lycee.fr', ' 1 192.168.10.1 1 ms\n 2 10.0.0.1 4 ms\n 3 * * *\n 4 93.184.216.34 18 ms', 'Chaque ligne est un routeur. Les étoiles indiquent un routeur qui ne répond pas à ICMP, pas forcément une panne.'], + ['Voir les services qui écoutent', 'Le site ne répond pas.', 'sudo ss -tlnp', 'LISTEN 0 511 *:80 users:(("apache2",pid=812))', 'Apache écoute bien sur le port 80 en TCP : le problème est ailleurs (pare-feu, DNS).'], + ['Interroger le DNS', 'Vérifier une nouvelle entrée.', 'dig +short intranet.lycee.fr', '192.168.10.20', 'Le nom se résout : la couche application peut être testée avec curl.'], + ['Lire la table ARP', 'Suspicion de conflit d’adresse.', 'ip neigh', '192.168.10.1 dev eth0 lladdr 3c:52:82:1a:0f:9b REACHABLE', 'Si deux IP différentes affichent la même MAC, on soupçonne une usurpation ARP.'], + ['Capturer une poignée de main', 'Observer TCP en vrai.', 'sudo tcpdump -i eth0 -n "tcp port 443 and tcp[tcpflags] & tcp-syn != 0"', 'Flags [S] … Flags [S.] …', '[S] = SYN envoyé, [S.] = SYN-ACK reçu.']], +sql: [ + ['Liste de classe', 'Imprimer la liste de BTS SIO 1.', "SELECT nom, prenom FROM eleves e JOIN classes c ON c.id = e.classe_id WHERE c.libelle = 'BTS SIO 1' ORDER BY nom;", 'Diallo Adam · Kaci Inès · Martin Léa …', 'La jointure permet de filtrer par libellé plutôt que par numéro.'], + ['Moyenne par classe', 'Préparer le conseil de classe.', 'SELECT c.libelle, ROUND(AVG(e.moyenne), 1) AS moy FROM eleves e JOIN classes c ON c.id = e.classe_id GROUP BY c.libelle;', 'BTS SIO 1 | 11.8\nBTS SIO 2 | 12.6', 'AVG calcule la moyenne de chaque groupe, ROUND arrondit.'], + ['Élèves sans rendu', 'Relancer ceux qui n’ont pas rendu le DM.', 'SELECT e.nom FROM eleves e LEFT JOIN rendus r ON r.eleve_id = e.id AND r.devoir_id = 3 WHERE r.eleve_id IS NULL;', 'Petit · Leroy', 'LEFT JOIN garde tout le monde ; IS NULL isole ceux qui n’ont pas de correspondance.'], + ['Top 3', 'Afficher les meilleures notes du DM.', 'SELECT e.nom, r.note FROM rendus r JOIN eleves e ON e.id = r.eleve_id WHERE r.devoir_id = 3 ORDER BY r.note DESC LIMIT 3;', 'Kaci 19 · Nguyen 16 · Martin 11', 'ORDER BY … DESC puis LIMIT pour un classement.'], + ['Corriger une erreur de saisie', 'Une note a été saisie à 1,5 au lieu de 15.', 'UPDATE rendus SET note = 15 WHERE eleve_id = 7 AND devoir_id = 3;', '1 ligne modifiée', 'Le WHERE est testé d’abord avec un SELECT pour vérifier qu’il ne vise qu’une ligne.'], + ['Bloquer une injection', 'Formulaire de connexion en PHP.', '$st = $pdo->prepare("SELECT id FROM users WHERE login = ?");\n$st->execute([$_POST["login"]]);', '(la saisie n’est jamais interprétée comme du SQL)', 'Même si l’utilisateur tape \' OR 1=1 --, la requête cherche ce texte littéral.']], +python: [ + ['Moyenne d’une classe', 'Calcul rapide à partir d’une liste.', 'notes = [12, 15, 9, 18, 7]\nprint(round(sum(notes) / len(notes), 2))', '12.2', 'sum additionne, len compte ; round arrondit à 2 décimales.'], + ['Saisie robuste', 'Le programme ne doit pas planter sur « douze ».', 'try:\n n = int(input("Note : "))\nexcept ValueError:\n print("Entrez un nombre")', 'Note : douze\nEntrez un nombre', 'L’exception est capturée ; le programme continue.'], + ['Compter les mots', 'Analyser un texte.', 'texte = "le chat et le chien"\nc = {}\nfor m in texte.split():\n c[m] = c.get(m, 0) + 1\nprint(c)', "{'le': 2, 'chat': 1, 'et': 1, 'chien': 1}", 'get(m, 0) renvoie 0 si le mot n’est pas encore dans le dictionnaire.'], + ['Filtrer en une ligne', 'Lister les élèves admis.', 'eleves = {"Léa": 12, "Tom": 8, "Inès": 17}\nprint([n for n, v in eleves.items() if v >= 10])', "['Léa', 'Inès']", 'Liste en compréhension : on lit « les noms n pour chaque paire si la note ≥ 10 ».'], + ['Lire un CSV exporté', 'Fichier de notes du logiciel de vie scolaire.', 'import csv\nwith open("notes.csv", encoding="utf-8") as f:\n for l in csv.DictReader(f, delimiter=";"):\n if float(l["note"]) < 8: print(l["nom"])', 'Petit\nLeroy', 'DictReader donne chaque ligne comme un dictionnaire, indexé par les en-têtes.'], + ['Jeu du nombre mystère', 'Premier programme complet.', 'import random\ns = random.randint(1, 100)\nwhile (p := int(input("? "))) != s:\n print("plus" if p < s else "moins")\nprint("Trouvé !")', '? 50\nplus\n? 75\nmoins\n? 62\nTrouvé !', 'while répète tant que la proposition est fausse ; l’opérateur := affecte et teste en même temps.']], +web: [ + ['Voir une requête HTTP', 'Comprendre ce qu’envoie le serveur.', 'curl -I https://example.org', 'HTTP/2 200\ncontent-type: text/html; charset=UTF-8', '-I n’affiche que les en-têtes : code, type de contenu, taille.'], + ['Page minimale valide', 'Point de départ de tout site.', '<!doctype html>\n<html lang="fr">\n<head><meta charset="utf-8"><title>TP\n

                          Bonjour

                          \n', '(une page avec un titre)', 'lang aide les lecteurs d’écran, charset évite les accents cassés.'], + ['Grille de 3 cartes', 'Mise en page moderne.', '.grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }\n@media (max-width: 700px) { .grille { grid-template-columns: 1fr; } }', '3 colonnes sur ordinateur, 1 sur téléphone', 'Deux règles suffisent pour une mise en page adaptative.'], + ['Réagir à un clic', 'Bouton « Lever la main ».', 'document.querySelector("#main").addEventListener("click", () => {\n document.body.style.background = "#FFD23F";\n});', '(la page devient jaune au clic)', 'addEventListener branche une fonction sur un événement.'], + ['Diagnostiquer une 404', 'Une image ne s’affiche pas.', 'sudo tail -1 /var/log/apache2/access.log', '"GET /img/Logo.png HTTP/1.1" 404', 'Linux distingue les majuscules : le fichier s’appelle logo.png.'], + ['Empêcher une XSS', 'Afficher un commentaire de visiteur en PHP.', 'echo htmlspecialchars($commentaire, ENT_QUOTES, "UTF-8");', '<script> s’affiche comme du texte', 'Les caractères spéciaux sont échappés : le navigateur n’exécute rien.']], +crypto: [ + ['Vérifier un téléchargement', 'Image ISO de Debian.', 'sha256sum -c SHA256SUMS --ignore-missing', 'debian-13.iso: Réussi', 'L’empreinte du fichier correspond à celle publiée : le fichier est intact.'], + ['Constater l’effet avalanche', 'Changer une seule lettre.', 'echo -n bonjour | sha256sum\necho -n Bonjour | sha256sum', '2cb4b143… \n9172e8ee…', 'Une majuscule suffit à changer complètement l’empreinte.'], + ['Hacher un mot de passe en Python', 'Application web.', 'import bcrypt\nh = bcrypt.hashpw(b"Soleil2026!", bcrypt.gensalt())\nbcrypt.checkpw(b"Soleil2026!", h)', 'True', 'gensalt produit un sel aléatoire, stocké dans le hachage lui-même.'], + ['Générer une clé SSH', 'Première connexion à un serveur.', 'ssh-keygen -t ed25519 -C "eleve@syllabus"', 'Your public key has been saved in ~/.ssh/id_ed25519.pub', 'Deux fichiers : la clé privée (à garder) et la clé publique (.pub, à déposer).'], + ['Lire un certificat', 'Vérifier qui a signé le certificat d’un site.', 'echo | openssl s_client -connect example.org:443 2>/dev/null | openssl x509 -noout -issuer -dates', "issuer=… DigiCert …\nnotAfter=Jan 15 2027", 'On voit l’autorité et la date d’expiration.'], + ['Chiffrer un fichier', 'Envoyer les bulletins à la direction.', 'gpg -c --cipher-algo AES256 bulletins.pdf', 'bulletins.pdf.gpg', 'Le mot de passe se transmet par un autre canal (téléphone), jamais dans le même mail.']] +}; + +// === DIAGNOSTIC RÉSEAU === Cours complet : ip, ping, traceroute, ss, ARP, tcpdump / Wireshark +(function () { +window.CONTENUS_PRO = window.CONTENUS_PRO || []; +window.CONTENUS_PRO.unshift({ + id: 'diagnostic', + match: /diagnostic réseau|outils de diagnostic|dépannage réseau/i, + titre: 'Diagnostic réseau en ligne de commande : ip, ping, traceroute, ss, ARP, tcpdump', + duree: '', + niveau: 'BTS SIO SISR · BTS CIEL IR · BUT R&T · Titre pro TSSR / AIS', + prerequis: ['Modèles OSI et TCP/IP, encapsulation', 'Adressage IPv4 et masques', 'Le terminal Linux'], + competences: ['BTS SIO · Bloc 1 · Répondre aux incidents et aux demandes d’assistance', 'BTS SIO SISR · Bloc 2 · Exploiter, dépanner et superviser une solution d’infrastructure réseau', 'BTS CIEL · C09 · Maintenir un réseau', 'BUT R&T · Compétence « Administrer les réseaux et l’Internet »', 'TSSR · Exploiter et maintenir les serveurs et le réseau'], + intro: 'Un serveur de production n’a presque jamais d’interface graphique. Il est rangé dans une baie, dans un datacenter à Paris ou à Roubaix, et l’on s’y connecte en SSH depuis un poste qui peut être à l’autre bout du pays. Quand un utilisateur appelle pour dire « le site ne marche plus », il n’y a ni fenêtre de paramètres réseau ni icône Wi-Fi à regarder : il y a un terminal, et une poignée d’outils en ligne de commande. Ce cours présente ces outils un par un, explique précisément ce que chacun mesure et ce qu’il ne mesure pas, puis les assemble en une méthode de diagnostic que vous pourrez appliquer à n’importe quel incident.', + cm: [ + { t: 'La méthode avant les outils', d: '', html: 'Le réflexe du débutant est de tout essayer en même temps : redémarrer le service, changer le câble, vider le cache du navigateur, relancer la machine. Parfois cela marche, mais on ne sait pas pourquoi, et la panne reviendra. Le professionnel suit une démarche par couches, du bas vers le haut, et ne passe à la couche suivante que lorsque la précédente est validée.

                          Concrètement, on se pose cinq questions dans l’ordre. Le lien est-il actif (couche 1-2) ? La machine a-t-elle une adresse IP correcte et une route vers la destination (couche 3 locale) ? Les paquets atteignent-ils la passerelle, puis la destination (couche 3 de bout en bout) ? Le service écoute-t-il sur le bon port et le pare-feu le laisse-t-il passer (couche 4) ? L’application répond-elle correctement (couche 7) ? Chaque outil de ce cours répond à une de ces questions.

                          Enfin, on note tout. Une commande, sa sortie, l’heure. Un diagnostic écrit peut être relu par un collègue, joint à un ticket, et sert de preuve quand le problème vient d’un prestataire.', table: [['Question', 'Couche', 'Outil principal'], ['Le lien est-il monté ?', '1-2', 'ip link'], ['Ai-je une adresse et une route ?', '3 locale', 'ip addr, ip route'], ['Mon voisin direct répond-il ?', '2-3', 'ip neigh, ping passerelle'], ['La destination est-elle joignable ?', '3', 'ping, traceroute, mtr'], ['Le service écoute-t-il ?', '4', 'ss'], ['Que se passe-t-il vraiment sur le fil ?', 'toutes', 'tcpdump, Wireshark'], ['Le nom se résout-il ?', '7', 'dig'], ['L’application répond-elle ?', '7', 'curl']] }, + { t: 'ip : l’état réseau de la machine', d: '', html: 'La commande ip, du paquet iproute2, remplace depuis longtemps les anciens ifconfig, route et arp, qui ne sont plus installés par défaut sur Debian. Elle se décline en sous-commandes : ip link pour les interfaces, ip addr pour les adresses, ip route pour la table de routage, ip neigh pour la table de voisinage (ARP).

                          ip link indique si l’interface est administrativement activée (UP) et si la couche physique détecte une porteuse (LOWER_UP). Une interface « UP » sans « LOWER_UP » a été activée mais ne voit pas de câble ou de switch en face : le problème est physique. ip -s link ajoute les compteurs de paquets, d’erreurs et de pertes, très utiles pour repérer un câble abîmé ou un duplex mal négocié.

                          ip addr affiche les adresses. L’option -br (brief) donne une ligne par interface, idéale pour un coup d’œil. On y vérifie l’adresse, mais surtout le masque : un poste en 192.168.10.65/24 alors que le réseau est un /26 croira que 192.168.10.130 est sur son réseau local et ne passera jamais par la passerelle.

                          ip route montre la table de routage. La ligne default via 192.168.10.1 est la passerelle par défaut : sans elle, la machine ne sait joindre que son propre réseau. La commande ip route get 8.8.8.8 est précieuse : elle indique quelle route, quelle interface et quelle adresse source seraient utilisées pour joindre une destination donnée, sans envoyer le moindre paquet.', exemple: '$ ip -br link\nlo UNKNOWN 00:00:00:00:00:00 \nens18 UP bc:24:11:5e:2a:10 \n\n$ ip -br addr\nlo UNKNOWN 127.0.0.1/8 ::1/128\nens18 UP 192.168.10.20/24 fe80::be24:11ff:fe5e:2a10/64\n\n$ ip route\ndefault via 192.168.10.1 dev ens18 proto static\n192.168.10.0/24 dev ens18 proto kernel scope link src 192.168.10.20\n\n$ ip route get 1.1.1.1\n1.1.1.1 via 192.168.10.1 dev ens18 src 192.168.10.20 uid 1000', attention: 'Les modifications faites avec ip addr add ou ip route add sont perdues au redémarrage. Sur Debian, la configuration permanente est dans /etc/network/interfaces ou gérée par systemd-networkd / NetworkManager. On teste avec ip, on pérennise dans le fichier.' }, + { t: 'ping : la preuve de joignabilité', d: '', html: 'ping envoie des messages ICMP Echo Request et attend des Echo Reply. Il mesure trois choses : si la destination répond, en combien de temps (le RTT, round-trip time, aller et retour), et quelle proportion des messages se perd en route.

                          Chaque ligne de réponse contient un numéro de séquence (icmp_seq), un TTL et un temps. Des numéros de séquence qui sautent indiquent des pertes. Le TTL de la réponse donne un indice sur la distance et le système distant : Linux part en général de 64, Windows de 128, beaucoup d’équipements réseau de 255 ; un TTL reçu de 57 signifie qu’un paquet parti à 64 a traversé 7 routeurs.

                          Le résumé final est la partie la plus importante. packet loss doit être à 0 % sur un réseau sain ; quelques pour cent de pertes suffisent à rendre une visioconférence pénible et un transfert de fichiers très lent, car TCP réduit son débit à chaque perte. La ligne rtt min/avg/max/mdev donne le temps minimum, moyen, maximum et l’écart moyen (gigue). Une gigue élevée révèle un lien saturé ou un Wi-Fi perturbé.

                          Options utiles : -c 5 limite le nombre de paquets (sans elle, ping tourne jusqu’à Ctrl+C), -i 0.2 accélère l’envoi, -s 1472 -M do envoie un gros paquet interdit de fragmentation pour tester la MTU d’un chemin, -I ens18 force l’interface de sortie.', exemple: '$ ping -c 4 192.168.10.1\nPING 192.168.10.1 (192.168.10.1) 56(84) bytes of data.\n64 bytes from 192.168.10.1: icmp_seq=1 ttl=64 time=0.412 ms\n64 bytes from 192.168.10.1: icmp_seq=2 ttl=64 time=0.387 ms\n64 bytes from 192.168.10.1: icmp_seq=3 ttl=64 time=0.401 ms\n64 bytes from 192.168.10.1: icmp_seq=4 ttl=64 time=0.395 ms\n\n--- 192.168.10.1 ping statistics ---\n4 packets transmitted, 4 received, 0% packet loss, time 3055ms\nrtt min/avg/max/mdev = 0.387/0.398/0.412/0.009 ms', attention: 'Un ping qui échoue ne prouve pas qu’une machine est éteinte. De nombreux pare-feux, dont celui de Windows par défaut et ceux des hébergeurs, bloquent ICMP. À l’inverse, un ping qui répond ne prouve pas qu’un service fonctionne : la machine peut répondre au ping avec un serveur web planté.' }, + { t: 'traceroute et mtr : voir le chemin', d: '', html: 'Quand la destination ne répond pas ou répond lentement, il faut savoir où se situe le problème. traceroute exploite astucieusement le champ TTL de l’en-tête IP. Chaque routeur décrémente ce TTL de 1 ; lorsqu’il atteint 0, le routeur détruit le paquet et renvoie un message ICMP Time Exceeded à l’expéditeur. traceroute envoie donc un premier paquet avec un TTL de 1 (il meurt au premier routeur, qui se dénonce), puis un TTL de 2 (il meurt au deuxième), et ainsi de suite jusqu’à la destination.

                          Chaque ligne correspond à un saut, avec trois mesures de temps. Des étoiles (* * *) signifient qu’aucune réponse n’est revenue pour ce saut. Si les sauts suivants répondent, ce n’est pas une panne : le routeur est simplement configuré pour ne pas répondre ou pour limiter ses réponses ICMP. Si tout s’arrête à un saut et que plus rien ne répond ensuite, le problème se situe à cet endroit ou juste après.

                          Par défaut, traceroute sous Linux envoie des datagrammes UDP vers des ports élevés. Les pare-feux les bloquent souvent ; traceroute -I utilise ICMP comme Windows (tracert), et traceroute -T -p 443 utilise des paquets TCP SYN vers le port 443, qui passent presque partout puisqu’ils ressemblent à une connexion web.

                          mtr combine ping et traceroute : il interroge chaque saut en continu et affiche pour chacun le taux de perte et les temps. C’est l’outil de référence pour documenter un problème de qualité auprès d’un opérateur. Attention à l’interprétation : une perte affichée sur un saut intermédiaire mais pas sur les suivants vient d’un routeur qui limite ses réponses, pas d’une vraie perte. Seule compte la perte qui persiste jusqu’à la destination.', exemple: '$ traceroute -n 1.1.1.1\ntraceroute to 1.1.1.1, 30 hops max, 60 byte packets\n 1 192.168.10.1 0.512 ms 0.470 ms 0.455 ms\n 2 10.255.0.1 2.118 ms 2.097 ms 2.230 ms\n 3 * * *\n 4 62.34.2.57 9.874 ms 9.812 ms 9.930 ms\n 5 1.1.1.1 10.402 ms 10.377 ms 10.361 ms', attention: 'Un temps qui augmente brusquement à un saut puis reste élevé indique un lien lent ou long (câble sous-marin, par exemple). Un temps élevé sur un seul saut, suivi de temps normaux, n’indique rien : le routeur traite simplement ses réponses ICMP avec une faible priorité.' }, + { t: 'ss : qui écoute, qui est connecté', d: '', html: 'ss (socket statistics) remplace netstat. Il liste les sockets ouvertes sur la machine, c’est-à-dire les points de communication entre un programme et le réseau. C’est l’outil qui répond à la question « le service écoute-t-il ? », la plus fréquente après « la machine est-elle joignable ? ».

                          La combinaison à connaître par cœur est ss -tlnp : t pour TCP, l pour les sockets en écoute (LISTEN), n pour afficher les numéros de port au lieu des noms, p pour afficher le processus propriétaire (nécessite sudo). Remplacez t par u pour UDP, ou mettez les deux.

                          La colonne Local Address:Port est décisive. 0.0.0.0:80 ou *:80 signifie que le service écoute sur toutes les interfaces. 127.0.0.1:3306 signifie qu’il n’écoute que sur la boucle locale : il est invisible depuis le réseau, ce qui est voulu pour une base de données, mais une erreur classique pour un service censé être public.

                          Sans l’option l, ss montre les connexions établies et leurs états TCP. ESTAB : connexion établie. SYN-SENT : on a envoyé un SYN et on attend la réponse, souvent le signe d’un pare-feu qui jette les paquets. TIME-WAIT : connexion fermée récemment, normal en grand nombre sur un serveur web. CLOSE-WAIT en grand nombre : l’application ne referme pas ses connexions, c’est un bug applicatif. Des filtres permettent d’être précis : ss -tn state established '( dport = :443 )'.', exemple: '$ sudo ss -tlnp\nState Recv-Q Send-Q Local Address:Port Peer Address:Port Process\nLISTEN 0 128 0.0.0.0:22 0.0.0.0:* users:(("sshd",pid=611,fd=3))\nLISTEN 0 511 0.0.0.0:80 0.0.0.0:* users:(("apache2",pid=842,fd=4))\nLISTEN 0 80 127.0.0.1:3306 0.0.0.0:* users:(("mariadbd",pid=790,fd=21))\n\n$ ss -tn state established\nRecv-Q Send-Q Local Address:Port Peer Address:Port\n0 0 192.168.10.20:22 192.168.10.54:51522' }, + { t: 'ARP et ip neigh : le voisinage', d: '', html: 'Pour envoyer une trame Ethernet, il faut l’adresse MAC du destinataire direct, c’est-à-dire la machine elle-même si elle est sur le même réseau, sinon la passerelle. Le protocole ARP fait la correspondance : la machine diffuse à tout le réseau local « qui a 192.168.10.1 ? », la passerelle répond avec sa MAC, et la réponse est gardée en cache.

                          ip neigh affiche ce cache avec l’état de chaque entrée. REACHABLE : le voisin a été confirmé récemment. STALE : l’entrée est ancienne mais encore utilisable, elle sera vérifiée au prochain envoi. INCOMPLETE : une requête ARP est partie, aucune réponse n’est encore arrivée. FAILED : le voisin n’a jamais répondu.

                          Une passerelle en FAILED explique à elle seule une panne complète : la machine a une adresse, une route, mais ne parvient même pas à parler à son routeur. Les causes sont souvent au niveau 2 : mauvais VLAN sur le port du switch, câble dans la mauvaise prise, passerelle éteinte.

                          arping envoie des requêtes ARP directement et permet de détecter un conflit d’adresse : si deux MAC différentes répondent pour la même IP, deux machines ont été configurées avec la même adresse. Le même phénomène peut signaler une attaque par usurpation ARP (ARP spoofing), où un attaquant se fait passer pour la passerelle afin d’intercepter le trafic.', exemple: '$ ip neigh\n192.168.10.1 dev ens18 lladdr 3c:52:82:1a:0f:9b REACHABLE\n192.168.10.54 dev ens18 lladdr 00:15:5d:0a:11:03 STALE\n192.168.10.99 dev ens18 FAILED\n\n$ sudo arping -c 3 -I ens18 192.168.10.30\nUnicast reply from 192.168.10.30 [00:15:5D:0A:11:07] 0.645ms\nUnicast reply from 192.168.10.30 [08:00:27:3B:C4:12] 0.702ms\nUnicast reply from 192.168.10.30 [00:15:5D:0A:11:07] 0.610ms', attention: 'Deux adresses MAC différentes pour une même IP, comme ci-dessus : conflit d’adresse à traiter immédiatement. Les symptômes typiques sont des coupures aléatoires de quelques secondes pour les deux machines.' }, + { t: 'tcpdump et Wireshark : regarder le fil', d: '', html: 'Tous les outils précédents déduisent ce qui se passe. tcpdump montre ce qui passe réellement sur l’interface, paquet par paquet. C’est l’outil de dernier recours, et souvent celui qui tranche les débats entre équipes (« le pare-feu bloque » contre « l’application ne répond pas »).

                          tcpdump s’exécute avec sudo et accepte un filtre BPF qui limite la capture à ce qui nous intéresse : host 192.168.10.54, port 443, tcp, icmp, combinables avec and, or, not. Sans filtre, sur un serveur actif, l’écran défile trop vite pour être lu, et votre propre session SSH apparaît dans la capture ; on l’exclut avec not port 22. Les options essentielles : -i ens18 choisit l’interface, -n évite la résolution des noms (plus rapide, plus lisible), -c 20 s’arrête après 20 paquets, -w capture.pcap enregistre dans un fichier.

                          Chaque ligne TCP affiche des drapeaux entre crochets. [S] : SYN, demande d’ouverture. [S.] : SYN-ACK, le serveur accepte. [.] : simple ACK. [P.] : données poussées. [F.] : fin de connexion. [R] ou [R.] : RST, refus ou coupure brutale. Savoir lire ces drapeaux permet de distinguer en une seconde un port fermé (le serveur répond RST) d’un port filtré (aucune réponse, les SYN se répètent).

                          Wireshark est l’interface graphique de référence pour analyser une capture. Sur un serveur sans écran, on capture avec tcpdump -w, on rapatrie le fichier .pcap avec scp, puis on l’ouvre dans Wireshark sur son poste. Wireshark décode chaque protocole couche par couche, reconstitue les échanges avec « Suivre le flux TCP » et permet des filtres d’affichage comme tcp.flags.syn == 1 && tcp.flags.ack == 0 ou http.response.code == 500.', exemple: '$ sudo tcpdump -ni ens18 -c 6 "tcp port 80 and host 192.168.10.54"\n10:14:02.118 IP 192.168.10.54.51544 > 192.168.10.20.80: Flags [S], seq 3308715651, win 64240\n10:14:02.118 IP 192.168.10.20.80 > 192.168.10.54.51544: Flags [S.], seq 1920458830, ack 3308715652\n10:14:02.119 IP 192.168.10.54.51544 > 192.168.10.20.80: Flags [.], ack 1\n10:14:02.119 IP 192.168.10.54.51544 > 192.168.10.20.80: Flags [P.], length 78: HTTP: GET / HTTP/1.1\n10:14:02.121 IP 192.168.10.20.80 > 192.168.10.54.51544: Flags [P.], length 3460: HTTP: HTTP/1.1 200 OK\n10:14:02.122 IP 192.168.10.54.51544 > 192.168.10.20.80: Flags [.], ack 3461', attention: 'Capturer du trafic, c’est potentiellement lire des données personnelles et des mots de passe transmis en clair. Sur un réseau d’entreprise ou d’établissement, on ne capture qu’avec une autorisation et on supprime les fichiers après analyse. C’est une obligation liée au RGPD et à la charte informatique.' }, + { t: 'Les compléments indispensables : dig, curl, nc', d: '', html: 'Trois outils finissent le diagnostic au niveau applicatif. dig interroge le DNS et montre la réponse brute : dig +short intranet.lycee.fr donne l’adresse, dig @1.1.1.1 intranet.lycee.fr interroge un serveur précis pour comparer, et le champ status: NXDOMAIN indique que le nom n’existe pas. Beaucoup de « pannes réseau » sont en réalité des pannes DNS.

                          curl joue le rôle du navigateur sans navigateur. curl -I affiche les en-têtes de réponse, curl -v détaille toute la négociation (résolution, connexion TCP, poignée de main TLS, requête, réponse), curl --resolve site.fr:443:192.168.10.20 https://site.fr teste un serveur précis en contournant le DNS.

                          nc (netcat) teste l’ouverture d’un port TCP sans protocole applicatif : nc -zv 192.168.10.20 3306 répond « succeeded » ou « Connection refused ». C’est le moyen le plus rapide de vérifier qu’un pare-feu laisse passer un flux entre deux serveurs.' } + ], + synthese: ['On diagnostique de bas en haut et on note chaque résultat', 'ip link / ip addr / ip route : lien, adresse, masque, passerelle', 'ping mesure joignabilité, latence, pertes ; ICMP peut être filtré', 'traceroute et mtr localisent l’endroit du problème ; seule compte la perte qui persiste jusqu’à la destination', 'ss -tlnp : le service écoute-t-il, et sur quelle adresse ?', 'ip neigh : une passerelle en FAILED oriente vers la couche 2', 'tcpdump tranche : RST = port fermé, silence = port filtré', 'dig, curl, nc terminent le diagnostic applicatif'], + qcm: [ + ['ip link affiche ens18 en UP mais sans LOWER_UP. Que faut-il vérifier en priorité ?', ['Le DNS', 'Le câble et le port du switch', 'Le pare-feu', 'Le service web'], 1, 'L’interface est activée mais ne détecte pas de lien physique.'], + ['Quelle commande indique la route et l’adresse source utilisées pour joindre 8.8.8.8, sans rien envoyer ?', ['ping 8.8.8.8', 'ip route get 8.8.8.8', 'traceroute 8.8.8.8', 'ss -r'], 1, 'ip route get interroge la table de routage.'], + ['Un ping renvoie « 100 % packet loss » vers un serveur web qui affiche pourtant bien son site. Explication la plus probable ?', ['Le serveur est éteint', 'ICMP est filtré par un pare-feu', 'Le DNS est en panne', 'Le câble est coupé'], 1, 'Le site répond, donc la machine est joignable ; seul ICMP est bloqué.'], + ['Sur quel mécanisme repose traceroute ?', ['Le numéro de séquence TCP', 'La décrémentation du TTL et les messages ICMP Time Exceeded', 'Les requêtes ARP', 'Le DNS inverse'], 1, 'Chaque routeur qui met le TTL à 0 se signale.'], + ['Dans mtr, le saut 4 affiche 40 % de pertes, les sauts 5 à 9 et la destination 0 %. Conclusion ?', ['Le lien du saut 4 est défaillant', 'Le routeur 4 limite ses réponses ICMP, pas de vraie perte', 'La destination est saturée', 'Il faut changer d’opérateur'], 1, 'Une perte qui ne se propage pas n’est pas une vraie perte.'], + ['ss -tlnp montre 127.0.0.1:8080 pour l’application. Les postes du réseau ne peuvent pas y accéder. Pourquoi ?', ['Le port 8080 est interdit', 'L’application n’écoute que sur la boucle locale', 'Il manque sudo', 'Le pare-feu est désactivé'], 1, 'Il faut la configurer pour écouter sur 0.0.0.0 ou l’IP du serveur.'], + ['Que signifie l’état SYN-SENT persistant dans ss ?', ['Connexion établie', 'On attend une réponse au SYN, souvent un pare-feu qui jette les paquets', 'Connexion fermée proprement', 'Le serveur a refusé'], 1, 'Un refus donnerait un RST immédiat.'], + ['ip neigh affiche la passerelle en FAILED. Où chercher ?', ['Au niveau DNS', 'Au niveau 2 : VLAN, câble, passerelle éteinte', 'Dans Apache', 'Dans le navigateur'], 1, 'La machine n’obtient même pas la MAC de son routeur.'], + ['Dans tcpdump, un SYN reçoit immédiatement une réponse [R.]. Le port est :', ['filtré', 'fermé', 'ouvert', 'chiffré'], 1, 'La machine répond activement qu’il n’y a rien sur ce port.'], + ['Pourquoi ajouter not port 22 à une capture tcpdump lancée en SSH ?', ['Pour aller plus vite', 'Pour ne pas capturer sa propre session', 'C’est obligatoire', 'Pour chiffrer la capture'], 1, 'Sinon chaque ligne affichée génère du trafic SSH capturé.'], + ['Quel est le rôle de l’option -n de tcpdump et ss ?', ['Capturer moins', 'Afficher les adresses et ports en numérique, sans résolution de noms', 'Ignorer IPv6', 'Afficher en couleur'], 1, 'Plus rapide et plus lisible pour le diagnostic.'], + ['Deux MAC différentes répondent à arping pour la même IP. C’est :', ['normal', 'un conflit d’adresse ou une usurpation ARP', 'un problème DNS', 'un effet du Wi-Fi'], 1, 'À traiter immédiatement.'] + ], + td: [ + { n: 'Échauffement', c: 'Pour chaque symptôme, indiquer la couche concernée et la première commande à lancer : (a) « la carte réseau n’a pas de voyant », (b) « je n’ai pas d’adresse IP », (c) « je ping la passerelle mais pas Internet », (d) « le site s’ouvre par son IP mais pas par son nom ».', r: '(a) couches 1-2 · ip link\n(b) couche 3 locale · ip addr puis journal DHCP\n(c) couche 3 au-delà de la passerelle · ip route puis traceroute\n(d) couche 7 · dig nom-du-site' }, + { n: 'Échauffement', c: 'Interpréter la ligne : « 64 bytes from 10.0.0.5: icmp_seq=7 ttl=121 time=38.2 ms ». Que peut-on dire du système distant et de la distance ?', r: 'TTL initial probablement 128 (Windows) : 128 − 121 = 7 routeurs traversés. RTT de 38 ms aller-retour.' }, + { n: 'Application', c: 'Un serveur répond au ping mais le site ne s’affiche pas. Écrire la suite de commandes, sur le serveur, qui permet de savoir si Apache tourne, sur quel port et sur quelle adresse il écoute, et s’il répond localement.', r: 'systemctl status apache2\nsudo ss -tlnp | grep -E ":80|:443"\ncurl -I http://127.0.0.1\n(puis, depuis un poste client : curl -I http://IP-du-serveur)' }, + { n: 'Application', c: 'Écrire la commande tcpdump qui capture, sur ens18, les 50 premiers paquets échangés avec 192.168.10.54 sur le port 443, sans résolution de noms, dans le fichier https.pcap.', r: 'sudo tcpdump -ni ens18 -c 50 -w https.pcap "host 192.168.10.54 and tcp port 443"' }, + { n: 'Application', c: 'À partir de la sortie mtr fournie par l’enseignant, déterminer si la perte vient du réseau local, de l’opérateur ou de la destination, et rédiger le message à envoyer au support de l’opérateur.', r: 'Repérer le premier saut où la perte apparaît ET persiste jusqu’à la destination. Si c’est un saut de l’opérateur, joindre la sortie mtr -rwc 100, l’heure, l’IP source et l’IP destination.' }, + { n: 'Approfondissement', c: 'Proposer une méthode, avec les commandes, pour distinguer un port fermé d’un port filtré par un pare-feu, depuis un client Linux.', r: 'nc -zv IP port : « refused » immédiat = fermé ; attente puis timeout = filtré.\nConfirmation : sudo tcpdump -ni ens18 host IP and port N → RST reçu (fermé) ou SYN répétés sans réponse (filtré).' }, + { n: 'Approfondissement', c: 'Un transfert de gros fichiers entre deux sites échoue alors que les petites requêtes passent. Formuler une hypothèse sur la MTU et la vérifier avec ping.', r: 'Hypothèse : un tunnel ou un lien réduit la MTU et les paquets ICMP « Fragmentation needed » sont filtrés.\nTest : ping -M do -s 1472 IP (1500 octets) puis réduire -s jusqu’à ce que ça passe, par exemple 1392 → MTU 1420.' } + ], + tp: { type: 'Lab VM', url: 'apercu-labs.html', desc: 'Deux VM Debian reliées, pannes injectées par l’enseignant, diagnostic vérifié étape par étape.', etapes: ['Relever l’état réseau complet avec ip -br link, ip -br addr, ip route', 'Mesurer latence et pertes vers la passerelle et vers Internet', 'Localiser une panne avec traceroute -n puis mtr', 'Trouver pourquoi le service web est injoignable avec ss et curl', 'Capturer une connexion avec tcpdump et identifier SYN, SYN-ACK, ACK', 'Rédiger le compte rendu d’incident'] }, + plusLoin: [['Documentation iproute2 (man ip, man ss)', 'https://man7.org/linux/man-pages/man8/ip.8.html'], ['Documentation officielle de tcpdump et des filtres pcap', 'https://www.tcpdump.org/manpages/pcap-filter.7.html'], ['Wireshark User’s Guide', 'https://www.wireshark.org/docs/wsug_html_chunked/'], ['RFC 792 · ICMP', 'https://www.rfc-editor.org/rfc/rfc792'], ['RFC 9293 · TCP', 'https://www.rfc-editor.org/rfc/rfc9293']] +}); + +window.CONTENUS_PLUS = window.CONTENUS_PLUS || {}; +window.CONTENUS_PLUS.diagnostic = { + cas: { titre: 'Mise en situation · Le lundi où l’ENT n’a plus répondu', texte: 'Lundi, 8 h 05. Le service informatique du lycée reçoit une dizaine d’appels : l’intranet pédagogique ne s’affiche plus, ni en salle de classe ni en salle des professeurs. Le serveur est une VM Debian hébergée sur l’hyperviseur de l’établissement. Le technicien s’y connecte en SSH, suit sa méthode couche par couche, découvre que le service web a bien redémarré après la mise à jour du week-end mais qu’il n’écoute plus que sur la boucle locale à cause d’une directive Listen modifiée, corrige la configuration, vérifie depuis un poste client puis rédige un compte rendu d’incident pour l’équipe. Temps d’indisponibilité : 25 minutes, dont 5 de diagnostic effectif.' }, + erreurs: ['Conclure qu’une machine est éteinte parce qu’elle ne répond pas au ping', 'Interpréter les étoiles d’un saut de traceroute comme une panne alors que les sauts suivants répondent', 'Lancer tcpdump sans filtre en SSH et capturer sa propre session', 'Oublier sudo avec ss -p : la colonne Process reste vide', 'Vérifier l’adresse IP sans vérifier le masque', 'Modifier la configuration avec ip addr add et oublier de la rendre permanente', 'Tout redémarrer avant d’avoir compris, et perdre les traces de la panne', 'Tester uniquement depuis le serveur lui-même (curl localhost) sans tester depuis un client'], + memo: [ + ['Commande', 'À quoi ça sert', 'Ce qu’on regarde'], + ['ip -br link', 'état des interfaces', 'UP et LOWER_UP'], + ['ip -br addr', 'adresses et masques', 'IP attendue, bon préfixe /24, /26…'], + ['ip route', 'table de routage', 'ligne default via '], + ['ip neigh', 'cache ARP', 'passerelle en REACHABLE, pas FAILED'], + ['ping -c 4 ', 'joignabilité, latence', '% packet loss, rtt avg et mdev'], + ['traceroute -n ', 'chemin saut par saut', 'dernier saut qui répond'], + ['mtr -rwc 100 ', 'pertes par saut dans la durée', 'perte qui persiste jusqu’à la destination'], + ['sudo ss -tlnp', 'services en écoute', 'port attendu, adresse 0.0.0.0 ou 127.0.0.1'], + ['sudo tcpdump -ni ', 'trafic réel', 'drapeaux [S] [S.] [R.], absence de réponse'], + ['dig +short ', 'résolution DNS', 'adresse renvoyée, NXDOMAIN'], + ['curl -Iv ', 'réponse applicative', 'connexion, TLS, code HTTP'], + ['nc -zv ', 'test d’ouverture de port', 'succeeded, refused ou timeout'] + ], + resolu: { enonce: 'Le serveur web intranet (192.168.10.20) ne répond plus depuis les postes du lycée. Diagnostiquer et rétablir le service.', etapes: [ + ['1 · Qualifier le symptôme depuis un client', 'curl -I --max-time 5 http://192.168.10.20\ncurl: (7) Failed to connect to 192.168.10.20 port 80: Connection refused\n→ « Connection refused » est une information précieuse : la machine a répondu, et elle a refusé. Elle est donc allumée et joignable. Un timeout aurait orienté vers un problème réseau ou un pare-feu.'], + ['2 · Confirmer la couche 3', 'ping -c 3 192.168.10.20\n3 packets transmitted, 3 received, 0% packet loss\n→ Réseau et routage fonctionnent. Inutile de regarder les câbles, les switchs ou le DHCP. On passe sur le serveur.'], + ['3 · Vérifier l’état réseau du serveur', 'ssh admin@192.168.10.20\nip -br addr\nens18 UP 192.168.10.20/24\nip route | head -1\ndefault via 192.168.10.1 dev ens18\n→ Adresse, masque et passerelle corrects. Le problème est au-dessus de la couche 3.'], + ['4 · Le service tourne-t-il et où écoute-t-il ?', 'systemctl is-active apache2\nactive\nsudo ss -tlnp | grep apache2\nLISTEN 0 511 127.0.0.1:80 0.0.0.0:* users:(("apache2",pid=1204,fd=4))\n→ Voilà la cause : Apache tourne, mais n’écoute que sur 127.0.0.1. Depuis le réseau, le port 80 est fermé, d’où le refus.'], + ['5 · Trouver l’origine et corriger', 'grep -rn "^Listen" /etc/apache2/\n/etc/apache2/ports.conf:5:Listen 127.0.0.1:80\nsudo sed -i "s/^Listen 127.0.0.1:80/Listen 80/" /etc/apache2/ports.conf\nsudo apachectl configtest && sudo systemctl restart apache2\nsudo ss -tlnp | grep apache2\nLISTEN 0 511 *:80 *:*\n→ La directive avait été modifiée lors de la maintenance du week-end. On valide la syntaxe avant de redémarrer.'], + ['6 · Vérifier depuis un client et documenter', 'curl -I http://192.168.10.20\nHTTP/1.1 200 OK\n→ Service rétabli. Compte rendu : heure de détection, symptôme, commandes et sorties clés, cause (directive Listen), correction, heure de rétablissement, action préventive (relecture des changements de configuration avant maintenance, supervision du port 80 depuis l’extérieur).'] + ] }, + vf: [['Un ping sans réponse prouve que la machine est éteinte.', 0, 'ICMP est souvent filtré.'], ['Des étoiles au saut 3 de traceroute, puis des réponses aux sauts 4 et 5, ne sont pas une panne.', 1, 'Le routeur 3 ne répond simplement pas à ICMP.'], ['127.0.0.1:3306 dans ss signifie que MariaDB est accessible depuis le réseau.', 0, 'Seulement depuis la machine elle-même.'], ['Une réponse RST à un SYN signifie que le port est fermé.', 1, 'Un port filtré ne répond pas du tout.']], + examen: { titre: 'Sujet type · 20 points', q: ['Donner, dans l’ordre, les cinq vérifications d’une démarche de diagnostic par couches, avec une commande pour chacune. (5 pts)', 'Interpréter la sortie ping fournie : pertes, latence moyenne, gigue, et conclusion sur la qualité du lien. (3 pts)', 'Expliquer le fonctionnement de traceroute et interpréter une ligne « * * * ». (4 pts)', 'Un service écoute en 127.0.0.1:8080. Expliquer la conséquence et la correction. (3 pts)', 'Écrire la commande tcpdump qui capture les SYN vers le port 443 de 10.0.0.5, puis expliquer comment distinguer un port fermé d’un port filtré. (5 pts)'], r: ['ip link · ip addr / ip route · ping passerelle puis destination · ss -tlnp · curl / dig', 'Selon la sortie : % packet loss, avg, mdev', 'TTL croissant, ICMP Time Exceeded ; étoiles = pas de réponse du saut, pas forcément une panne', 'Injoignable depuis le réseau ; écouter sur 0.0.0.0:8080 ou l’IP du serveur', 'sudo tcpdump -ni ens18 "dst host 10.0.0.5 and tcp dst port 443 and tcp[tcpflags] & tcp-syn != 0" · RST = fermé, pas de réponse = filtré'] }, + prof: { deroule: [['Ouverture', 'Scénario réel : « l’ENT ne répond plus », la classe propose des hypothèses, on les classe par couche'], ['Cours', 'ip, ping, traceroute, avec démonstration en direct sur une VM projetée'], ['Cours', 'ss, ARP, tcpdump ; lecture commentée d’une capture'], ['Pratique', 'Lab VM : pannes injectées (mauvais masque, passerelle absente, service sur 127.0.0.1, pare-feu)'], ['Clôture', 'Quiz flash, puis chaque binôme présente un diagnostic en 2 minutes']], diff: 'Élèves en difficulté : fiche mémo imprimée, un seul outil par panne, indices débloqués après 3 essais. Élèves avancés : analyse d’une capture dans Wireshark, diagnostic MTU, rédaction d’un compte rendu d’incident au format ITIL.', eval: 'Chaque panne du lab est validée automatiquement dans la VM. Le compte rendu d’incident est évalué sur la rigueur (commandes, sorties, cause, correction, prévention). Sujet type sur 20.' } +}; + +window.CONTENUS_EXEMPLES = window.CONTENUS_EXEMPLES || {}; +window.CONTENUS_EXEMPLES.diagnostic = [ + ['Diagnostiquer un port bloqué avec ss', 'L’application métier est installée, mais aucun poste n’y accède sur le port 8080.', 'sudo ss -tlnp "sport = :8080"', 'State Recv-Q Send-Q Local Address:Port Peer Address:Port Process\nLISTEN 0 4096 127.0.0.1:8080 0.0.0.0:* users:(("java",pid=2214,fd=38))', 'Le processus Java écoute bien, mais uniquement sur 127.0.0.1 : il est invisible depuis le réseau. Il faut changer l’adresse d’écoute dans sa configuration (server.address=0.0.0.0 pour une application Spring, par exemple), puis vérifier que le pare-feu autorise le port 8080. Si la ligne avait affiché 0.0.0.0:8080, on aurait orienté la recherche vers le pare-feu avec nc -zv depuis un client.'], + ['Mesurer une perte de paquets', 'Les visioconférences de la salle B204 coupent régulièrement.', 'ping -c 100 -i 0.2 -q 192.168.20.1', '--- 192.168.20.1 ping statistics ---\n100 packets transmitted, 93 received, 7% packet loss, time 19821ms\nrtt min/avg/max/mdev = 0.9/14.6/212.4/31.8 ms', '7 % de pertes vers la passerelle locale, c’est énorme : sur un réseau filaire sain, on attend 0 %. La gigue (mdev) de 31,8 ms et un maximum à 212 ms confirment un lien instable. -q n’affiche que le résumé, -i 0.2 envoie 5 paquets par seconde. Suite du diagnostic : ip -s link pour chercher des erreurs sur l’interface, puis vérification du câble ou de la borne Wi-Fi.'], + ['Lire une poignée de main TCP', 'Vérifier qu’une connexion au serveur de base de données s’établit.', 'sudo tcpdump -ni ens18 -c 3 "host 192.168.10.30 and tcp port 5432"', '09:41:12.004 IP 192.168.10.20.40818 > 192.168.10.30.5432: Flags [S], seq 17290431, win 64240, options [mss 1460]\n09:41:12.005 IP 192.168.10.30.5432 > 192.168.10.20.40818: Flags [S.], seq 91022876, ack 17290432, win 65160\n09:41:12.005 IP 192.168.10.20.40818 > 192.168.10.30.5432: Flags [.], ack 1, win 502', 'Les trois temps de l’ouverture TCP sont visibles : [S] le client demande, [S.] le serveur accepte en acquittant le numéro de séquence + 1, [.] le client confirme. La connexion est établie en 1 ms. Le port source 40818 est choisi au hasard par le client, le port 5432 est celui de PostgreSQL. Si le problème persiste, il est donc applicatif (authentification, base inexistante), pas réseau.'], + ['Distinguer port fermé et port filtré', 'Un collègue affirme que « le pare-feu bloque le port 3306 ».', 'nc -zv -w 3 192.168.10.30 3306\nnc -zv -w 3 192.168.10.30 3307', 'nc: connect to 192.168.10.30 port 3306 (tcp) failed: Connection refused\nnc: connect to 192.168.10.30 port 3307 (tcp) timed out: Operation now in progress', 'Deux comportements différents. Sur 3306, « refused » immédiat : la machine a répondu par un RST, donc aucun pare-feu ne bloque, mais aucun service n’écoute ; il faut regarder MariaDB (arrêté ou en écoute sur 127.0.0.1). Sur 3307, « timed out » : aucun retour, les paquets sont jetés en route, c’est la signature d’un pare-feu. Deux commandes suffisent à trancher le débat.'], + ['Localiser une panne avec traceroute', 'Le serveur de sauvegarde distant (site B) est injoignable depuis le site A.', 'traceroute -n -T -p 22 10.50.0.10', 'traceroute to 10.50.0.10, 30 hops max\n 1 192.168.10.1 0.48 ms 0.44 ms 0.41 ms\n 2 10.255.0.1 2.31 ms 2.28 ms 2.40 ms\n 3 10.254.8.2 6.12 ms 6.05 ms 6.20 ms\n 4 * * *\n 5 * * *\n 6 * * *', 'Les trois premiers sauts répondent : réseau local, routeur du site, puis entrée du lien inter-sites. Plus rien au-delà du saut 3, et la destination ne répond pas non plus : le problème se situe sur le lien entre le site A et le site B ou sur le routeur du site B. -T -p 22 envoie des SYN TCP vers le port SSH, qui passent les pare-feux mieux que l’UDP par défaut. On transmet cette sortie à l’équipe réseau ou à l’opérateur.'], + ['Repérer un problème de voisinage ARP', 'Un serveur fraîchement déplacé dans une autre baie n’a plus aucun accès réseau.', 'ip neigh show dev ens18\nping -c 2 192.168.30.1', '192.168.30.1 dev ens18 FAILED\nFrom 192.168.30.15 icmp_seq=1 Destination Host Unreachable\nFrom 192.168.30.15 icmp_seq=2 Destination Host Unreachable', 'La passerelle est en FAILED : aucune réponse ARP. Le message « Destination Host Unreachable » émis par la machine elle-même (From 192.168.30.15) confirme qu’elle n’a jamais obtenu la MAC du routeur. Adresse et route peuvent être parfaites, rien ne sortira. La cause est presque toujours au niveau 2 : port du switch dans le mauvais VLAN après le déplacement, ou câble branché sur la mauvaise prise. Vérification côté switch : show mac address-table interface .'] +]; + +window.CONTENUS_LONG = window.CONTENUS_LONG || {}; +var K = 'stroke="#000" stroke-width="3"', F = 'font-family="Archivo,sans-serif" font-weight="800"'; +var bx = function (x, y, w, h, c, t) { return '' + t + ''; }; +window.CONTENUS_LONG.diagnostic = { + figure: '' + [['7 · Application', 'curl · dig', '#FF6FB5'], ['4 · Transport', 'ss · nc', '#C4B5FD'], ['3 · Réseau', 'ping · traceroute · mtr · ip route', '#7CF2C0'], ['2 · Liaison', 'ip neigh · arping', '#FFD23F'], ['1 · Physique', 'ip link · ip -s link', '#F6F5F1']].map(function (r, i) { return bx(20, 10 + i * 56, 220, 48, r[2], r[0]) + bx(260, 10 + i * 56, 440, 48, '#fff', r[1]); }).join('') + '', + legende: 'Chaque outil répond à une couche. On remonte de bas en haut, tcpdump observe toutes les couches à la fois.', + photo: 'Photo : baie serveur avec switchs et câbles RJ45 étiquetés', + lecture: [ + 'Sur un poste de travail, quand Internet ne fonctionne plus, on regarde l’icône réseau, on ouvre les paramètres, on clique sur « Résoudre les problèmes ». Sur un serveur, rien de tout cela n’existe. Les machines qui font tourner les ENT, les sites des établissements, les bases de données de vie scolaire ou les services des hébergeurs français sont installées sans interface graphique, pour des raisons de sécurité, de stabilité et de performances : chaque logiciel installé en plus est une faille potentielle et consomme de la mémoire. L’administrateur s’y connecte en SSH, et tout se fait au clavier.', + 'Ces outils en ligne de commande ont un autre avantage décisif : leur sortie est du texte. On peut la copier dans un ticket, l’envoyer à un collègue, la comparer avec celle de la veille, la filtrer avec grep ou l’intégrer dans un script de supervision qui alerte automatiquement quand une valeur dérape. Une capture d’écran d’une fenêtre de paramètres ne se prête à rien de tout cela. Dans une équipe d’exploitation, on attend d’un technicien qu’il fournisse les commandes et les sorties qui prouvent son diagnostic, pas une impression.', + 'Ils ont aussi l’avantage d’être partout. ip, ping, ss et tcpdump sont présents ou installables en une commande sur toutes les distributions Linux, dans les conteneurs, sur les routeurs et les pare-feux basés sur Linux, et leurs équivalents existent sur Windows Server et sur les équipements réseau. Ce que vous apprenez ici se transpose directement sur un switch Cisco, un pare-feu pfSense ou une instance cloud chez Scaleway ou OVHcloud.', + 'La compétence visée n’est pas de connaître toutes les options, elles sont dans le manuel. C’est de savoir quel outil lancer pour quelle question, et de savoir lire ce qu’il répond, y compris ce qu’il ne dit pas. Un ping sans réponse ne dit pas qu’une machine est éteinte. Des étoiles dans un traceroute ne disent pas qu’un lien est coupé. Un service « active » dans systemctl ne dit pas qu’il est joignable. Savoir faire ces nuances, c’est ce qui distingue un technicien qui cherche au hasard d’un technicien qui résout un incident en cinq minutes.' + ] +}; +window.CONTENUS_SCHEMAS = window.CONTENUS_SCHEMAS || {}; +window.CONTENUS_SCHEMAS.diagnostic = { + termes: ['ip link', 'ip addr', 'ip route', 'ip route get', 'ip neigh', 'ip -s link', 'ip -br', 'ping', 'traceroute', 'mtr', 'ss -tlnp', 'ss', 'netstat', 'ifconfig', 'arping', 'tcpdump', 'Wireshark', 'dig', 'curl', 'nc -zv', 'ICMP', 'TTL', 'RTT', 'ARP', 'SYN', 'SYN-ACK', 'RST', 'ACK', 'LISTEN', 'ESTAB', 'SYN-SENT', 'TIME-WAIT', 'CLOSE-WAIT', 'REACHABLE', 'STALE', 'FAILED', 'INCOMPLETE', 'LOWER_UP', 'MTU', '127.0.0.1', '0.0.0.0', 'BPF', 'Time Exceeded', 'Echo Request', 'Echo Reply'], + figs: [ + [3, 'traceroute : le TTL augmente d’un cran à chaque essai', '' + bx(10, 90, 110, 48, '#FFD23F', 'Poste') + [1, 2, 3].map(function (n, i) { return bx(160 + i * 150, 90, 110, 48, '#F6F5F1', 'Routeur ' + n) + 'TTL=' + n + 'Time Exceeded'; }).join('') + bx(610, 90, 100, 48, '#7CF2C0', 'Cible') + 'réponse'], + [4, 'Lire la colonne Local Address de ss', '' + bx(20, 20, 220, 50, '#7CF2C0', '0.0.0.0:80') + 'toutes les interfaces : joignable' + bx(260, 20, 220, 50, '#FFD23F', '192.168.10.20:80') + 'une seule interface' + bx(500, 20, 200, 50, '#FF6FB5', '127.0.0.1:80') + 'boucle locale : invisible'], + [6, 'Port fermé ou port filtré, vu par tcpdump', '' + bx(20, 20, 330, 44, '#F6F5F1', 'Fermé : [S] → [R.] immédiat') + bx(20, 80, 330, 44, '#FF6FB5', 'Filtré : [S] … [S] … [S] sans réponse') + bx(380, 20, 320, 44, '#7CF2C0', 'Ouvert : [S] → [S.] → [.]') + 'nc -zv : succeeded / refused / timed out'] + ] +}; +})(); diff --git a/design/js/contenus-infra-3.js b/design/js/contenus-infra-3.js new file mode 100644 index 0000000..5a872de --- /dev/null +++ b/design/js/contenus-infra-3.js @@ -0,0 +1,172 @@ +// Cours complets · Infra lot 3 : Kubernetes, supervision, annuaire LDAP / Active Directory +(function () { +var reg = function (c) { + (window.CONTENUS_PRO = window.CONTENUS_PRO || []).unshift(c.cours); + (window.CONTENUS_PLUS = window.CONTENUS_PLUS || {})[c.cours.id] = c.plus; + (window.CONTENUS_EXEMPLES = window.CONTENUS_EXEMPLES || {})[c.cours.id] = c.exemples; + (window.CONTENUS_SCHEMAS = window.CONTENUS_SCHEMAS || {})[c.cours.id] = { termes: c.termes, figs: [] }; +}; + +reg({ +cours: { id: 'k8s', match: /Kubernetes|k8s|orchestr/i, + titre: 'Kubernetes : orchestrer des conteneurs en production', duree: '', + niveau: 'BUT R&T DevCloud · BUT Informatique · AIS · Master', + prerequis: ['Conteneurs Docker', 'Docker Compose', 'Réseau : DNS, NAT, équilibrage'], + competences: ['BUT R&T DevCloud · Déployer et exploiter une plateforme de conteneurs', 'AIS · Administrer une infrastructure cloud', 'Master · Architecture des systèmes distribués'], + intro: 'Compose pilote une machine. Quand l’application doit tenir la charge de milliers d’utilisateurs, survivre à la panne d’un serveur et se mettre à jour sans coupure, il faut un orchestrateur. Kubernetes répartit les conteneurs sur un groupe de machines, les relance quand ils tombent, les déplace quand un nœud disparaît et ajuste leur nombre à la demande. Toutes les offres cloud françaises (Scaleway Kapsule, OVHcloud Managed Kubernetes, Outscale) le proposent. Ce module présente son architecture, ses objets principaux et le diagnostic d’un déploiement en panne.', + cm: [ + { t: 'Architecture d’un cluster', d: '', html: 'Un cluster se compose d’un plan de contrôle et de nœuds de travail. Le plan de contrôle comprend l’API server, point d’entrée unique de toutes les commandes ; etcd, base clé-valeur qui stocke l’état du cluster ; le scheduler, qui choisit le nœud de chaque nouveau pod ; et le controller manager, qui fait converger l’état réel vers l’état désiré. Chaque nœud exécute kubelet, qui démarre les conteneurs via un moteur (containerd), et kube-proxy ou un équivalent qui programme le réseau des services.

                          Le principe central est la boucle de réconciliation : on déclare un état (« 3 répliques de cette image ») et des contrôleurs corrigent sans cesse tout écart. On ne dit jamais « démarre un conteneur », on décrit ce qui doit exister.' }, + { t: 'Pods, Deployments et ReplicaSets', d: '', html: 'Le pod est la plus petite unité : un ou plusieurs conteneurs qui partagent une adresse IP et des volumes. On ne crée presque jamais un pod directement : un Deployment décrit l’image, le nombre de répliques et la stratégie de mise à jour, et crée un ReplicaSet qui maintient ce nombre de pods. Une mise à jour d’image crée un nouveau ReplicaSet et fait basculer progressivement les pods (rolling update) ; kubectl rollout undo revient à la version précédente.', exemple: 'apiVersion: apps/v1\nkind: Deployment\nmetadata: { name: resa, namespace: vie-scolaire }\nspec:\n replicas: 3\n selector: { matchLabels: { app: resa } }\n template:\n metadata: { labels: { app: resa } }\n spec:\n containers:\n - name: app\n image: registre.lycee.local/resa:9c1e4f2\n ports: [{ containerPort: 8000 }]\n resources:\n requests: { cpu: 100m, memory: 128Mi }\n limits: { memory: 256Mi }\n readinessProbe: { httpGet: { path: /health, port: 8000 } }\n livenessProbe: { httpGet: { path: /health, port: 8000 }, initialDelaySeconds: 10 }' }, + { t: 'Services et Ingress', d: '', html: 'Les pods sont éphémères et changent d’adresse. Un Service fournit une adresse stable et un nom DNS (resa.vie-scolaire.svc.cluster.local) et répartit le trafic entre les pods dont les labels correspondent à son sélecteur. Le type ClusterIP est interne, NodePort ouvre un port sur chaque nœud, LoadBalancer demande un équilibreur au fournisseur cloud.

                          Pour le trafic HTTP, un Ingress route selon le nom d’hôte et le chemin vers les services, et termine TLS. Il nécessite un contrôleur d’Ingress (ingress-nginx, Traefik) ; cert-manager y ajoute des certificats Let’s Encrypt automatiques.', attention: 'Un Service qui ne sélectionne aucun pod (faute de frappe dans un label) ne renvoie aucune erreur à sa création : il n’a simplement aucun endpoint. kubectl get endpoints le révèle immédiatement.' }, + { t: 'Configuration, secrets et stockage', d: '', html: 'Les ConfigMap portent la configuration non sensible, les Secret les mots de passe et clés ; ils s’injectent en variables ou en fichiers. Les Secret ne sont qu’encodés en base64 par défaut : on active le chiffrement d’etcd et on limite leur lecture par RBAC.

                          Le stockage persistant passe par des PersistentVolumeClaim : le pod demande « 10 Gi en lecture-écriture », et une StorageClass provisionne le volume chez le fournisseur. Pour une base de données, on utilise un StatefulSet, qui donne à chaque réplique un nom et un volume stables.' }, + { t: 'Sondes, ressources et haute disponibilité', d: '', html: 'La readinessProbe indique si un pod peut recevoir du trafic : tant qu’elle échoue, le Service ne lui envoie rien. La livenessProbe indique s’il est vivant : en cas d’échec répété, kubelet redémarre le conteneur. Confondre les deux provoque des redémarrages en boucle au démarrage d’une application lente.

                          Les requests servent au scheduler pour placer les pods ; les limits plafonnent la consommation. Un conteneur qui dépasse sa limite mémoire est tué (OOMKilled). Le HorizontalPodAutoscaler ajuste le nombre de répliques selon la charge, et un PodDisruptionBudget garantit un nombre minimal de pods pendant une maintenance.' }, + { t: 'Accès et sécurité', d: '', html: 'L’accès à l’API passe par des certificats ou des jetons, et les droits par RBAC : Role et ClusterRole définissent des verbes sur des ressources, RoleBinding les attribue. Les namespaces séparent les équipes ou les environnements. Les NetworkPolicy filtrent le trafic entre pods : sans elles, tout pod peut joindre tout autre pod. Les Pod Security Standards interdisent les conteneurs privilégiés ou en root.' } + ], + synthese: ['Plan de contrôle (API server, etcd, scheduler, contrôleurs) et nœuds (kubelet)', 'État désiré et boucle de réconciliation', 'Deployment → ReplicaSet → pods ; rollout et rollout undo', 'Service stable par labels, Ingress pour HTTP et TLS', 'ConfigMap, Secret, PVC et StatefulSet', 'readiness ≠ liveness ; requests et limits', 'RBAC, namespaces, NetworkPolicy'], + qcm: [ + ['Quel composant stocke l’état du cluster ?', ['kubelet', 'etcd', 'kube-proxy', 'Ingress'], 1, 'Base clé-valeur répliquée.'], + ['Que se passe-t-il si l’on supprime un pod géré par un Deployment ?', ['Il disparaît définitivement', 'Le ReplicaSet en recrée un', 'Le Deployment est supprimé', 'Le cluster s’arrête'], 1, 'Réconciliation.'], + ['Comment un Service trouve-t-il ses pods ?', ['Par leur IP', 'Par sélecteur de labels', 'Par leur nom', 'Par le nœud'], 1, 'Les endpoints suivent les labels.'], + ['Une readinessProbe qui échoue provoque :', ['un redémarrage', 'le retrait du pod du Service', 'la suppression du nœud', 'rien'], 1, 'La liveness, elle, redémarre.'], + ['Que signifie OOMKilled ?', ['Réseau coupé', 'Dépassement de la limite mémoire', 'Image absente', 'Droits insuffisants'], 1, 'Le noyau tue le conteneur.'], + ['Quel objet pour une base de données répliquée ?', ['Deployment', 'StatefulSet', 'DaemonSet', 'Job'], 1, 'Identités et volumes stables.'], + ['Sans NetworkPolicy, les pods :', ['sont isolés', 'peuvent tous se joindre', 'n’ont pas de réseau', 'ne sortent pas'], 1, 'Tout est ouvert par défaut.'] + ], + td: [ + { n: 'Application', c: 'Écrire le Service ClusterIP et l’Ingress qui publient le Deployment resa sur resa.lycee.fr en HTTPS.', r: 'Service : selector app: resa, port 80 → targetPort 8000.\nIngress : host resa.lycee.fr, path /, backend service resa port 80, tls secretName resa-tls, annotation cert-manager.io/cluster-issuer.' }, + { n: 'Application', c: 'Mettre à jour l’image vers le tag 51ab0d7, suivre le déploiement, puis revenir en arrière.', r: 'kubectl -n vie-scolaire set image deploy/resa app=registre.lycee.local/resa:51ab0d7\nkubectl -n vie-scolaire rollout status deploy/resa\nkubectl -n vie-scolaire rollout undo deploy/resa' }, + { n: 'Approfondissement', c: 'Écrire une NetworkPolicy qui n’autorise vers la base PostgreSQL que les pods labellisés app: resa.', r: 'podSelector: { matchLabels: { app: postgres } }, policyTypes: [Ingress], ingress: [{ from: [{ podSelector: { matchLabels: { app: resa } } }], ports: [{ port: 5432 }] }]' } + ], + tp: { type: 'Lab VM', url: 'apercu-labs.html', desc: 'Un cluster k3s à trois nœuds.', etapes: ['Déployer l’application en 3 répliques', 'La publier par Service et Ingress', 'Tuer un pod et observer la réconciliation', 'Mettre à jour puis revenir en arrière', 'Isoler la base par NetworkPolicy'] }, + plusLoin: [['Documentation Kubernetes (fr)', 'https://kubernetes.io/fr/docs/home/'], ['k3s', 'https://k3s.io/'], ['ANSSI · Recommandations de sécurité relatives au déploiement de conteneurs', 'https://cyber.gouv.fr/publications/recommandations-de-securite-relatives-au-deploiement-de-conteneurs-docker']] }, +plus: { cas: { titre: '', texte: '' }, + resolu: { enonce: 'Après la mise à jour de l’application de réservation, le site renvoie « 503 Service Temporarily Unavailable ». Diagnostiquer et rétablir.', etapes: [ + ['Regarder les pods', 'kubectl -n vie-scolaire get pods -l app=resa\nNAME READY STATUS RESTARTS\nresa-7d9f6c5b8-2xkq4 0/1 CrashLoopBackOff 6\nresa-7d9f6c5b8-h7m2p 0/1 CrashLoopBackOff 6\n→ Aucun pod n’est prêt : l’Ingress n’a aucun backend, d’où les 503.'], + ['Lire les événements et les journaux', 'kubectl -n vie-scolaire describe pod resa-7d9f6c5b8-2xkq4 | tail -3\nWarning Unhealthy Liveness probe failed: Get "http://10.42.1.17:8000/health": connection refused\nWarning BackOff Back-off restarting failed container\nkubectl -n vie-scolaire logs resa-7d9f6c5b8-2xkq4 --previous | tail -1\nRunning database migrations… (this may take 40s)\n→ La nouvelle version exécute des migrations au démarrage ; la livenessProbe démarre à 10 s et tue le conteneur avant la fin.'], + ['Rétablir immédiatement', 'kubectl -n vie-scolaire rollout undo deploy/resa\nkubectl -n vie-scolaire rollout status deploy/resa\ndeployment "resa" successfully rolled out\n→ L’ancienne version est revenue ; le site répond.'], + ['Corriger la cause', 'Migrations déplacées dans un Job exécuté avant le déploiement, et ajout d’une startupProbe :\nstartupProbe: { httpGet: { path: /health, port: 8000 }, failureThreshold: 30, periodSeconds: 5 }\n→ La liveness n’est évaluée qu’une fois la startupProbe réussie.'], + ['Redéployer et documenter', 'kubectl apply -f resa.yaml ; kubectl -n vie-scolaire get pods -l app=resa\n3/3 Running\n→ Compte rendu : cause (liveness trop agressive face à des migrations), impact, rollback, correction, et test en préproduction avec une base de taille réelle.'] + ] }, + erreurs: ['Confondre readiness et liveness', 'Pas de requests ni de limits', 'Utiliser latest comme image', 'Laisser les Secret non chiffrés et lisibles par tous', 'Aucune NetworkPolicy', 'Faute de label entre Service et pods', 'Base de données en Deployment sans volume persistant'], + memo: [['Commande', 'Usage'], ['kubectl get pods -A -o wide', 'tous les pods et leur nœud'], ['kubectl describe pod

                          ', 'événements, sondes, raisons d’échec'], ['kubectl logs

                          --previous', 'journaux du conteneur précédent'], ['kubectl get events --sort-by=.lastTimestamp', 'derniers événements'], ['kubectl get endpoints ', 'pods réellement derrière un Service'], ['kubectl rollout status|undo deploy/', 'suivre ou annuler un déploiement'], ['kubectl exec -it

                          -- sh', 'shell dans un pod'], ['kubectl top pods', 'consommation CPU et mémoire'], ['kubectl apply -f fichier.yaml', 'appliquer un état désiré'], ['kubectl auth can-i ', 'tester des droits RBAC']], + examen: { titre: 'Sujet type · 20 points', q: ['Décrire l’architecture d’un cluster. (4 pts)', 'Écrire Deployment, Service et Ingress pour une application donnée. (8 pts)', 'Expliquer readiness, liveness et startup probes. (3 pts)', 'Diagnostiquer un CrashLoopBackOff à partir de sorties fournies. (3 pts)', 'Citer deux mesures de sécurité. (2 pts)'], r: ['API server, etcd, scheduler, contrôleurs, kubelet', 'voir cours', 'trafic, redémarrage, démarrage lent', 'describe et logs --previous', 'RBAC, NetworkPolicy'] }, + prof: { deroule: [['Ouverture', 'Arrêter un serveur Compose en direct, puis un nœud Kubernetes'], ['Cours', 'Architecture et réconciliation'], ['Pratique', 'Lab k3s'], ['Incident', 'CrashLoopBackOff'], ['Clôture', 'Quiz flash']], diff: 'Élèves en difficulté : manifestes à compléter. Élèves avancés : Helm, HPA, GitOps avec Argo CD.', eval: 'Lab validé, sujet type.' } }, +exemples: [ + ['Voir où tournent les pods', 'Un nœud va être mis en maintenance.', 'kubectl get pods -n vie-scolaire -o wide', 'NAME READY STATUS NODE\nresa-6b8c7d-4kxz2 1/1 Running noeud-1\nresa-6b8c7d-9mpq7 1/1 Running noeud-1\nresa-6b8c7d-tt2r8 1/1 Running noeud-2', 'Deux répliques sont sur noeud-1 : drainer ce nœud en coupe deux sur trois. Un PodDisruptionBudget minAvailable: 2 et une règle d’anti-affinité répartiraient mieux la charge.'], + ['Service sans endpoints', 'Le site renvoie 503 alors que les pods tournent.', 'kubectl -n vie-scolaire get endpoints resa', 'NAME ENDPOINTS AGE\nresa 3d', 'Aucun pod ne correspond au sélecteur du Service. On compare kubectl get svc resa -o yaml (selector app: resa) avec les labels des pods (app: reservation) : faute de nommage.'], + ['Conteneur tué pour mémoire', 'Redémarrages fréquents.', 'kubectl -n vie-scolaire describe pod resa-6b8c7d-4kxz2 | grep -A2 "Last State"', 'Last State: Terminated\n Reason: OOMKilled\n Exit Code: 137', 'La limite de 256 Mi est trop basse pour la charge actuelle. On mesure avec kubectl top pods puis on ajuste requests et limits.'], + ['Suivre une mise à jour', 'Déploiement d’une nouvelle version.', 'kubectl -n vie-scolaire rollout status deploy/resa', 'Waiting for deployment "resa" rollout to finish: 1 of 3 updated replicas are available...\ndeployment "resa" successfully rolled out', 'Les pods sont remplacés un à un ; le service reste disponible pendant la mise à jour.'], + ['Tester un droit RBAC', 'Un enseignant doit pouvoir lire les journaux de son namespace.', 'kubectl auth can-i get pods/log -n vie-scolaire --as prof-sio', 'yes', 'La commande vérifie les droits effectifs sans les tester réellement.'], + ['Lire les derniers événements', 'Pod en Pending.', 'kubectl -n vie-scolaire get events --sort-by=.lastTimestamp | tail -2', 'Warning FailedScheduling pod/db-0 0/3 nodes are available: 3 Insufficient memory.', 'Aucun nœud n’a assez de mémoire libre pour la request demandée : réduire la request ou ajouter un nœud.'] +], +termes: ['Kubernetes', 'cluster', 'pod', 'Deployment', 'ReplicaSet', 'StatefulSet', 'Service', 'ClusterIP', 'Ingress', 'ConfigMap', 'Secret', 'PersistentVolumeClaim', 'namespace', 'etcd', 'kubelet', 'API server', 'scheduler', 'readinessProbe', 'livenessProbe', 'startupProbe', 'requests', 'limits', 'OOMKilled', 'CrashLoopBackOff', 'RBAC', 'NetworkPolicy', 'kubectl', 'rollout', 'k3s'] +}); + +reg({ +cours: { id: 'supervision', match: /supervision|Zabbix|Prometheus|Grafana|monitoring|Nagios/i, + titre: 'Supervision : mesurer, alerter et anticiper avec Prometheus et Zabbix', duree: '', + niveau: 'BTS SIO SISR · BTS CIEL IR · BUT R&T · TSSR / AIS', + prerequis: ['Diagnostic réseau en ligne de commande', 'Services systemd'], + competences: ['BTS SIO SISR · Bloc 2 · Superviser une infrastructure', 'BTS CIEL · C09 · Maintenir', 'TSSR · Superviser l’infrastructure'], + intro: 'Un service informatique qui apprend une panne par un appel d’utilisateur a déjà perdu. La supervision mesure en permanence l’état des serveurs, des réseaux et des applications, déclenche une alerte avant que les utilisateurs ne soient gênés et conserve l’historique qui permet de comprendre un incident ou d’anticiper une saturation. Ce module présente les notions (métriques, seuils, alertes), puis les deux outils les plus répandus dans les établissements et les entreprises : Zabbix et le couple Prometheus-Grafana.', + cm: [ + { t: 'Que superviser ?', d: '', html: 'On distingue la disponibilité (le service répond-il ?), la performance (en combien de temps ?), la capacité (reste-t-il de la place, de la mémoire, de la bande passante ?) et les erreurs (taux de réponses 5xx, échecs de sauvegarde). Pour une application, la méthode des « quatre signaux d’or » résume l’essentiel : latence, trafic, erreurs, saturation.

                          On supervise à plusieurs niveaux : matériel (disques, température), système (CPU, mémoire, charge, espace disque), réseau (interfaces, pertes), services (ports, processus), et surtout expérience utilisateur : une sonde qui se connecte réellement à l’ENT et vérifie que la page de connexion s’affiche en moins de deux secondes.' }, + { t: 'Collecte : agent, SNMP, export', d: '', html: 'Trois modes de collecte coexistent. Un agent installé sur la machine (Zabbix agent, node_exporter) remonte des métriques système détaillées. SNMP interroge les équipements réseau qui ne peuvent pas recevoir d’agent : switchs, bornes, onduleurs, imprimantes ; on lit des valeurs identifiées par des OID dans des MIB. Les applications modernes exposent elles-mêmes leurs métriques sur une page HTTP (/metrics).

                          SNMPv1 et v2c transmettent la communauté (le « mot de passe ») en clair ; on utilise SNMPv3, avec authentification et chiffrement, ou à défaut on limite v2c en lecture seule à l’adresse du serveur de supervision.' }, + { t: 'Prometheus et Grafana', d: '', html: 'Prometheus vient chercher (pull) les métriques des cibles à intervalle régulier et les stocke en séries temporelles, chaque série étant identifiée par un nom et des labels (instance, job, mountpoint). Le langage PromQL interroge ces séries : taux, moyennes, prédictions. Les règles d’alerte sont évaluées par Prometheus et envoyées à Alertmanager, qui regroupe, déduplique et notifie par courriel, messagerie ou SMS. Grafana affiche les tableaux de bord.', exemple: '# Espace disque libre en %\n100 * node_filesystem_avail_bytes{mountpoint="/"} / node_filesystem_size_bytes{mountpoint="/"}\n\n# Règle : disque plein dans moins de 24 h au rythme actuel\n- alert: DisquePleinSous24h\n expr: predict_linear(node_filesystem_avail_bytes{mountpoint="/"}[6h], 24*3600) < 0\n for: 30m\n labels: { severity: warning }\n annotations: { summary: "{{ $labels.instance }} : disque plein sous 24 h" }' }, + { t: 'Zabbix', d: '', html: 'Zabbix est une solution intégrée très répandue dans les collectivités et les établissements : serveur, base de données, interface web et agents. On y définit des hôtes, auxquels on applique des modèles (templates) qui regroupent éléments (items, les valeurs collectées), déclencheurs (triggers, les conditions d’alerte) et graphiques. Les modèles fournis couvrent Linux, Windows, les principaux switchs et les services courants. La découverte automatique (LLD) crée les éléments pour chaque disque ou chaque interface détectée.' }, + { t: 'Bien alerter', d: '', html: 'Une alerte doit être actionnable : si personne ne doit rien faire en la recevant, ce n’est pas une alerte mais une information pour un tableau de bord. Trop d’alertes produisent la fatigue d’alerte : l’équipe ne les lit plus, et la vraie panne passe inaperçue.

                          Les bonnes pratiques : alerter sur les symptômes vus par l’utilisateur plutôt que sur chaque cause possible ; ajouter une durée (for: 5m) pour ignorer les pics d’une seconde ; utiliser des seuils prédictifs (plein dans 24 h) plutôt que fixes ; hiérarchiser (info, avertissement, critique) ; et regrouper les alertes dépendantes : si le routeur d’un site tombe, on veut une alerte, pas cinquante.' }, + { t: 'Journaux centralisés', d: '', html: 'Les métriques disent qu’il se passe quelque chose ; les journaux disent quoi. On les centralise pour les consulter en un seul endroit et les conserver même si un serveur est compromis : rsyslog ou journald vers un serveur central, ou des piles comme Loki avec Grafana, ou Elasticsearch. La centralisation est aussi une exigence de sécurité : l’ANSSI recommande de conserver et d’horodater les journaux d’authentification et d’administration.' } + ], + synthese: ['Disponibilité, performance, capacité, erreurs ; latence, trafic, erreurs, saturation', 'Agent, SNMP (v3), métriques exposées', 'Prometheus : pull, séries à labels, PromQL, Alertmanager ; Grafana pour l’affichage', 'Zabbix : hôtes, modèles, éléments, déclencheurs', 'Alertes actionnables, durée, seuils prédictifs, dépendances', 'Journaux centralisés et conservés'], + qcm: [ + ['Quel protocole pour superviser un switch sans agent ?', ['SSH', 'SNMP', 'SMTP', 'DHCP'], 1, 'Lecture d’OID.'], + ['Pourquoi préférer SNMPv3 ?', ['Plus rapide', 'Authentification et chiffrement', 'Plus de métriques', 'Obligatoire'], 1, 'v2c envoie la communauté en clair.'], + ['Prometheus collecte les métriques en mode :', ['push', 'pull', 'SNMP trap', 'courriel'], 1, 'Il interroge les cibles.'], + ['Que fait for: 5m dans une règle d’alerte ?', ['Répète l’alerte', 'N’alerte que si la condition dure 5 minutes', 'Supprime l’alerte', 'Envoie 5 messages'], 1, 'Ignore les pics.'], + ['Qu’est-ce qu’une alerte actionnable ?', ['Une alerte rouge', 'Une alerte qui demande une action précise', 'Une alerte fréquente', 'Une alerte par SMS'], 1, 'Sinon c’est du bruit.'], + ['Dans Zabbix, un déclencheur est :', ['une valeur collectée', 'une condition qui génère un problème', 'un graphique', 'un agent'], 1, 'Trigger.'] + ], + td: [ + { n: 'Application', c: 'Lister ce qu’il faut superviser pour l’ENT d’un lycée, du matériel à l’expérience utilisateur, avec un seuil pour chaque élément.', r: 'Disque < 15 % · mémoire > 90 % pendant 10 min · charge > nb de cœurs · port 443 fermé · certificat expirant < 14 j · page de connexion > 2 s · taux de 5xx > 2 % · sauvegarde de la nuit en échec.' }, + { n: 'Application', c: 'Écrire la requête PromQL du taux d’erreurs HTTP 5xx sur 5 minutes, et la règle d’alerte associée.', r: 'sum(rate(http_requests_total{status=~"5.."}[5m])) / sum(rate(http_requests_total[5m])) > 0.02 avec for: 10m.' }, + { n: 'Approfondissement', c: 'Le routeur du site B tombe : 40 alertes arrivent en même temps. Proposer la configuration pour n’en recevoir qu’une.', r: 'Zabbix : dépendance des déclencheurs des hôtes du site B envers celui du routeur. Alertmanager : inhibit_rules qui masquent les alertes d’un site quand l’alerte « routeur injoignable » du même site est active.' } + ], + tp: { type: 'Lab VM', url: 'apercu-labs.html', desc: 'Prometheus, node_exporter, Alertmanager et Grafana sur deux VM.', etapes: ['Installer node_exporter', 'Déclarer la cible dans Prometheus', 'Créer un tableau de bord Grafana', 'Écrire une alerte disque prédictive', 'Remplir le disque et recevoir l’alerte'] }, + plusLoin: [['Documentation Prometheus', 'https://prometheus.io/docs/'], ['Documentation Zabbix', 'https://www.zabbix.com/documentation/current/fr/manual'], ['Google SRE Book · Monitoring Distributed Systems', 'https://sre.google/sre-book/monitoring-distributed-systems/']] }, +plus: { cas: { titre: '', texte: '' }, + resolu: { enonce: 'Lundi 7 h 50 : l’alerte « DisquePleinSous24h » est arrivée à 2 h sur le serveur de fichiers, sans que personne ne réagisse. À 7 h 45 le disque est plein et les enseignants ne peuvent plus enregistrer. Rétablir puis fiabiliser la chaîne d’alerte.', etapes: [ + ['Rétablir le service', 'df -h /srv\n/dev/sdb1 500G 500G 0 100% /srv\nsudo du -xh --max-depth=2 /srv | sort -h | tail -3\n180G /srv/partage/tmp/exports-pronote\n→ Un script d’export mal configuré écrit un fichier toutes les minutes depuis vendredi.'], + ['Arrêter la cause et libérer de la place', 'sudo systemctl stop export-pronote.timer\nsudo find /srv/partage/tmp/exports-pronote -mtime +0 -delete\ndf -h /srv\n/dev/sdb1 500G 322G 178G 65% /srv\n→ Les enseignants peuvent de nouveau enregistrer.'], + ['Comprendre pourquoi l’alerte n’a servi à rien', 'amtool alert query DisquePleinSous24h\nalertname=DisquePleinSous24h severity=warning instance=fichiers:9100\n→ L’alerte a bien été émise, mais en severity warning, routée vers une adresse de courriel lue seulement en journée.'], + ['Corriger le routage', 'route:\n routes:\n - matchers: [severity="critical"]\n receiver: astreinte-sms\n# nouvelle règle : disque plein sous 6 h → critical\n→ L’alerte à 24 h reste un avertissement par courriel ; une seconde règle à 6 h devient critique et part vers l’astreinte.'], + ['Superviser la cause', '→ Ajout d’une alerte sur le nombre de fichiers créés par heure dans /srv/partage/tmp, et correction du script d’export (rotation des anciens fichiers). Compte rendu : l’outil avait détecté le problème six heures à l’avance ; le défaut était dans l’organisation de la réponse.'] + ] }, + erreurs: ['Alerter sur tout, sans hiérarchie', 'Seuils fixes sans durée', 'Aucune supervision de l’expérience utilisateur', 'SNMP v2c en écriture avec la communauté public', 'Alertes envoyées à une boîte que personne ne lit', 'Oublier de superviser les sauvegardes et les certificats'], + memo: [['Outil / commande', 'Usage'], ['curl -s localhost:9100/metrics | head', 'vérifier un node_exporter'], ['promtool check config prometheus.yml', 'valider la configuration'], ['promtool check rules regles.yml', 'valider les règles d’alerte'], ['amtool alert query', 'alertes actives dans Alertmanager'], ['snmpwalk -v3 -l authPriv … IF-MIB::ifOperStatus', 'lire l’état des ports d’un switch'], ['zabbix_get -s -k system.cpu.load', 'tester un élément Zabbix'], ['systemctl status zabbix-agent2', 'état de l’agent'], ['journalctl -u prometheus', 'journaux du serveur'], ['rate(), increase(), predict_linear()', 'fonctions PromQL essentielles']], + examen: { titre: 'Sujet type · 20 points', q: ['Proposer un plan de supervision pour un service donné. (6 pts)', 'Comparer agent, SNMP et métriques exposées. (4 pts)', 'Écrire deux règles d’alerte avec seuils et durées. (5 pts)', 'Analyser un incident de fatigue d’alerte. (5 pts)'], r: ['matériel → expérience utilisateur', 'voir cours', 'expr + for + severity', 'actionnable, hiérarchie, dépendances'] }, + prof: { deroule: [['Ouverture', 'Quelle panne avez-vous apprise par un utilisateur ?'], ['Cours', 'Quoi superviser, comment collecter'], ['Pratique', 'Lab Prometheus et Grafana'], ['Incident', 'Alerte émise mais ignorée'], ['Clôture', 'Quiz flash']], diff: 'Élèves en difficulté : tableau de bord importé, une seule alerte. Élèves avancés : SNMPv3, Loki, inhibitions.', eval: 'Alerte reçue pendant le lab, sujet type.' } }, +exemples: [ + ['Vérifier une cible Prometheus', 'Un serveur n’apparaît plus dans Grafana.', 'curl -s http://prometheus:9090/api/v1/targets | jq -r \'.data.activeTargets[] | "\\(.labels.instance) \\(.health) \\(.lastError)"\'', 'fichiers:9100 up \nweb1:9100 down Get "http://web1:9100/metrics": dial tcp 10.62.40.21:9100: connect: connection refused', 'node_exporter ne tourne plus sur web1 (ou le pare-feu bloque 9100). systemctl status prometheus-node-exporter sur web1.'], + ['Lire l’état des ports d’un switch', 'Un bâtiment signale des coupures.', 'snmpwalk -v3 -l authPriv -u supervision -a SHA -A "…" -x AES -X "…" sw-bat-b IF-MIB::ifOperStatus | grep -v up', 'IF-MIB::ifOperStatus.10017 = INTEGER: down(2)', 'Le port 17 est tombé. Avec ifAlias, on retrouve qu’il s’agit de la liaison montante vers le bâtiment B.'], + ['Prédire la saturation', 'Planifier l’achat de disques.', 'predict_linear(node_filesystem_avail_bytes{instance="fichiers:9100",mountpoint="/srv"}[7d], 30*24*3600)', '-4.2e+10', 'Au rythme des sept derniers jours, il manquera environ 42 Go dans 30 jours : on commande avant l’incident.'], + ['Tester un élément Zabbix', 'Un élément reste vide dans l’interface.', 'zabbix_get -s 10.62.40.10 -k vfs.fs.size[/srv,pfree]', 'ZBX_NOTSUPPORTED: Cannot obtain filesystem information: [2] No such file or directory', 'Le point de montage n’existe pas sur cet hôte : le modèle appliqué ne correspond pas à la machine. On utilise la découverte automatique des systèmes de fichiers.'], + ['Voir les alertes actives', 'Point d’astreinte du matin.', 'amtool alert query --active', 'Alertname Starts At Summary\nCertificatExpire 2026-09-28 06:00 ent.lycee.fr expire dans 9 jours\nSauvegardeEchec 2026-09-30 03:12 sauvegarde nocturne de db1 en échec', 'Deux actions claires pour la journée : renouveler le certificat (vérifier certbot) et relancer la sauvegarde de db1.'], + ['Valider les règles avant rechargement', 'Nouvelle règle d’alerte.', 'promtool check rules /etc/prometheus/regles.yml', 'Checking /etc/prometheus/regles.yml\n FAILED:\n group "systeme", rule 3: could not parse expression: unexpected "}"', 'Une accolade en trop dans la règle 3. Sans ce contrôle, Prometheus aurait refusé de recharger toute la configuration.'] +], +termes: ['supervision', 'métrique', 'alerte', 'seuil', 'SNMP', 'SNMPv3', 'OID', 'MIB', 'agent', 'Prometheus', 'PromQL', 'node_exporter', 'Alertmanager', 'Grafana', 'Zabbix', 'déclencheur', 'modèle', 'predict_linear', 'rate', 'fatigue d’alerte', 'Loki', 'rsyslog'] +}); + +reg({ +cours: { id: 'annuaire', match: /LDAP|Active Directory|annuaire|AD DS|GPO|Samba/i, + titre: 'Annuaires : LDAP, Active Directory, GPO et Samba', duree: '', + niveau: 'BTS SIO SISR · BTS CIEL IR · BUT R&T · TSSR', + prerequis: ['DNS : résolution et zones', 'Droits et utilisateurs'], + competences: ['BTS SIO SISR · Bloc 2 · Administrer les services d’annuaire', 'BTS SIO · Bloc 3 · Gérer les identités et les accès', 'TSSR · Exploiter un annuaire'], + intro: 'Dans un établissement de 1 500 comptes, créer chaque utilisateur sur chaque serveur est impossible. L’annuaire centralise les identités, les groupes et les droits : un élève se connecte avec le même identifiant sur n’importe quel poste, au Wi-Fi, à l’imprimante et aux applications. Active Directory domine dans les établissements et les entreprises ; il repose sur des standards ouverts (LDAP, Kerberos, DNS) que l’on retrouve dans Samba et OpenLDAP. Ce module en décrit le fonctionnement, l’administration et la sécurisation.', + cm: [ + { t: 'LDAP : un arbre d’objets', d: '', html: 'LDAP (Lightweight Directory Access Protocol) est le protocole d’interrogation des annuaires. Les données forment un arbre (DIT) : chaque entrée a un DN (Distinguished Name) unique, lu de la feuille vers la racine, par exemple CN=Léa M.,OU=SIO1,OU=Eleves,DC=lycee,DC=local. Les entrées appartiennent à des classes d’objets (user, group, organizationalUnit) qui définissent leurs attributs (sAMAccountName, mail, memberOf). LDAP écoute sur le port 389, LDAPS (chiffré) sur 636.' }, + { t: 'Active Directory : domaine, forêt, contrôleurs', d: '', html: 'Un domaine AD regroupe comptes, groupes et ordinateurs sous une même autorité, avec un nom DNS (lycee.local, ou mieux un sous-domaine d’un domaine possédé : ad.lycee-exemple.fr). Les contrôleurs de domaine (DC) hébergent l’annuaire et le répliquent entre eux ; on en installe au moins deux. Plusieurs domaines peuvent former une forêt.

                          AD dépend entièrement du DNS : les clients trouvent les DC grâce aux enregistrements SRV (_ldap._tcp.dc._msdcs.lycee.local). Un poste qui n’utilise pas le DNS du domaine ne peut pas le rejoindre. L’authentification repose sur Kerberos, qui impose des horloges synchronisées à cinq minutes près.' }, + { t: 'Organiser : OU, groupes et délégation', d: '', html: 'Les unités d’organisation (OU) rangent les objets pour appliquer des stratégies et déléguer l’administration : OU Eleves, Professeurs, Administration, Ordinateurs\\Salles. Les groupes portent les droits. La méthode AGDLP résume la bonne pratique : les comptes (A) vont dans des groupes globaux par fonction (G, « Profs-SIO »), placés dans des groupes locaux de domaine par ressource (DL, « Partage-SIO-Modification »), auxquels on donne les permissions (P). On ne donne jamais un droit directement à un utilisateur.' }, + { t: 'Stratégies de groupe (GPO)', d: '', html: 'Une GPO applique des paramètres aux ordinateurs et aux utilisateurs d’une OU : fond d’écran, lecteurs réseau, imprimantes, mises à jour, pare-feu, restrictions, déploiement de logiciels. L’ordre d’application est LSDOU : local, site, domaine, OU (de la plus haute à la plus basse) ; la dernière appliquée l’emporte, sauf blocage ou application forcée. gpupdate /force applique immédiatement, gpresult /r montre les GPO effectivement reçues.' }, + { t: 'Samba et intégration Linux', d: '', html: 'Samba partage des fichiers et des imprimantes avec les postes Windows (protocole SMB) et peut même servir de contrôleur de domaine compatible AD, solution répandue dans les établissements attachés aux logiciels libres. Un serveur Linux rejoint un domaine AD avec realmd et SSSD (realm join) : les comptes du domaine s’y connectent en SSH et les groupes AD pilotent les droits sudo.', exemple: 'sudo realm discover lycee.local\nsudo realm join -U administrateur lycee.local\nid lea.martin@lycee.local\nuid=1854201103(lea.martin@lycee.local) … groupes=…(eleves-sio1@lycee.local)' }, + { t: 'Sécurité de l’annuaire', d: '', html: 'L’annuaire est la cible principale des attaquants : compromettre un compte d’administrateur du domaine, c’est posséder tout le réseau. Les recommandations de l’ANSSI s’organisent en niveaux (tiering) : les comptes d’administration du domaine ne se connectent qu’aux DC, jamais à un poste utilisateur. Autres mesures : comptes d’administration séparés des comptes du quotidien, mots de passe longs, LAPS pour des mots de passe administrateur local différents sur chaque poste, désactivation des protocoles anciens (NTLMv1, SMBv1), LDAPS ou signature LDAP, et audit régulier avec des outils comme PingCastle.' } + ], + synthese: ['LDAP : arbre, DN, classes et attributs ; 389 et 636', 'AD : domaine, forêt, au moins deux DC ; dépend du DNS et de Kerberos', 'OU pour organiser et appliquer, groupes pour les droits (AGDLP)', 'GPO appliquées en LSDOU ; gpresult pour vérifier', 'Samba, realmd et SSSD pour Linux', 'Tiering, comptes séparés, LAPS, protocoles anciens désactivés'], + qcm: [ + ['Que désigne un DN ?', ['Un nom DNS', 'Le chemin unique d’une entrée dans l’arbre LDAP', 'Un groupe', 'Un port'], 1, 'Distinguished Name.'], + ['Pourquoi un poste ne trouve-t-il pas le domaine ?', ['Pare-feu Windows', 'Il n’utilise pas le DNS du domaine', 'Mauvais fond d’écran', 'LAPS'], 1, 'Enregistrements SRV.'], + ['Quel écart d’horloge maximal tolère Kerberos par défaut ?', ['1 s', '5 min', '1 h', 'Aucun'], 1, 'D’où NTP obligatoire.'], + ['Où donner une permission sur un partage selon AGDLP ?', ['À l’utilisateur', 'À un groupe local de domaine', 'À l’OU', 'Au DC'], 1, 'Comptes → global → local → permission.'], + ['Quelle commande montre les GPO reçues par un poste ?', ['gpupdate', 'gpresult /r', 'ipconfig', 'netstat'], 1, 'Résultat de la stratégie.'], + ['Quel outil donne un mot de passe administrateur local différent à chaque poste ?', ['GPO', 'LAPS', 'SSSD', 'Kerberos'], 1, 'Local Administrator Password Solution.'] + ], + td: [ + { n: 'Application', c: 'Proposer l’arborescence d’OU et les groupes d’un lycée avec BTS SIO, sa salle de TP et le partage « Sujets » accessible en modification aux profs de SIO, en lecture aux élèves de SIO.', r: 'OU Utilisateurs\\Eleves\\SIO1, SIO2 · OU Utilisateurs\\Profs · OU Ordinateurs\\Salles\\B204 · groupes globaux G-Eleves-SIO, G-Profs-SIO · groupes locaux DL-Sujets-Lecture, DL-Sujets-Modif · permissions NTFS et partage sur ces DL.' }, + { n: 'Application', c: 'Écrire la requête ldapsearch qui liste les comptes de l’OU SIO1 avec leur adresse mail.', r: 'ldapsearch -H ldaps://dc1.lycee.local -D "cn=lecture,…" -W -b "OU=SIO1,OU=Eleves,DC=lycee,DC=local" "(objectClass=user)" sAMAccountName mail' }, + { n: 'Approfondissement', c: 'Expliquer pourquoi un administrateur du domaine ne doit pas ouvrir de session sur un poste d’élève.', r: 'Son jeton ou ses identifiants restent en mémoire du poste ; si celui-ci est compromis, l’attaquant les récupère et devient administrateur du domaine (modèle de tiering de l’ANSSI).' } + ], + tp: { type: 'Lab VM', url: 'apercu-labs.html', desc: 'Un contrôleur Samba AD, un client Windows et un serveur Linux.', etapes: ['Provisionner le domaine Samba AD', 'Vérifier les enregistrements SRV', 'Créer OU, comptes et groupes', 'Joindre le serveur Linux avec realmd', 'Appliquer une GPO de lecteur réseau'] }, + plusLoin: [['ANSSI · Recommandations de sécurité relatives à Active Directory', 'https://cyber.gouv.fr/publications/recommandations-de-securite-relatives-active-directory'], ['Samba Wiki · Setting up Samba as an AD DC', 'https://wiki.samba.org/index.php/Setting_up_Samba_as_an_Active_Directory_Domain_Controller'], ['PingCastle', 'https://www.pingcastle.com/']] }, +plus: { cas: { titre: '', texte: '' }, + resolu: { enonce: 'Ce matin, aucun élève de la salle B204 ne parvient à ouvrir de session (« La relation d’approbation entre cette station de travail et le domaine principal a échoué » sur certains postes, « L’heure du serveur diffère » sur d’autres). Les autres salles fonctionnent.', etapes: [ + ['Vérifier l’heure', 'Sur un poste de B204 (session locale) : w32tm /stripchart /computer:dc1.lycee.local /samples:1\n11:47:02, d:+00.0012s o:-00:07:41.3\n→ Le poste a 7 min 41 s de retard sur le DC : Kerberos refuse l’authentification au-delà de 5 minutes.'], + ['Trouver pourquoi', 'w32tm /query /source\nLocal CMOS Clock\n→ Les postes de B204, réinstallés pendant les vacances à partir d’une image, ne prennent plus l’heure du domaine.'], + ['Corriger l’heure', 'w32tm /config /syncfromflags:domhier /update\nnet stop w32time && net start w32time\nw32tm /resync\n→ Le poste se synchronise sur la hiérarchie du domaine.'], + ['Réparer la relation d’approbation', 'Sur les postes au message « relation d’approbation » :\nTest-ComputerSecureChannel -Repair -Credential lycee\\technicien\nTrue\n→ Le mot de passe du compte ordinateur, restauré depuis une image ancienne, ne correspondait plus à celui de l’annuaire ; le canal sécurisé est réinitialisé.'], + ['Généraliser et prévenir', '→ La correction est déployée par GPO sur l’OU Salles (source de temps du domaine) ; les images de poste sont préparées avec Sysprep et jointes au domaine après déploiement. Compte rendu rédigé.'] + ] }, + erreurs: ['Postes qui n’utilisent pas le DNS du domaine', 'Horloges non synchronisées', 'Un seul contrôleur de domaine', 'Droits donnés directement aux utilisateurs', 'Administrateur du domaine utilisé sur les postes', 'Même mot de passe administrateur local partout', 'LDAP simple non chiffré'], + memo: [['Commande', 'Usage'], ['nslookup -type=SRV _ldap._tcp.dc._msdcs.lycee.local', 'trouver les contrôleurs de domaine'], ['ldapsearch -H ldaps://… -b … "(filtre)"', 'interroger l’annuaire'], ['gpupdate /force', 'appliquer les GPO'], ['gpresult /r', 'GPO effectivement appliquées'], ['w32tm /query /status', 'source et écart de temps'], ['Test-ComputerSecureChannel -Repair', 'réparer la relation avec le domaine'], ['samba-tool user create|list', 'gérer les comptes Samba AD'], ['samba-tool drs showrepl', 'état de la réplication'], ['realm join -U admin domaine', 'joindre un Linux au domaine'], ['id utilisateur@domaine', 'vérifier un compte depuis Linux']], + examen: { titre: 'Sujet type · 20 points', q: ['Décrire le rôle de DNS et Kerberos dans AD. (4 pts)', 'Proposer OU et groupes pour un cas donné selon AGDLP. (6 pts)', 'Expliquer l’ordre d’application des GPO et diagnostiquer une GPO non appliquée. (5 pts)', 'Citer cinq mesures de sécurité de l’annuaire. (5 pts)'], r: ['SRV, tickets, horloge', 'voir TD', 'LSDOU, gpresult', 'tiering, LAPS, comptes séparés, NTLMv1/SMBv1, audit'] }, + prof: { deroule: [['Ouverture', 'Combien de mots de passe auriez-vous sans annuaire ?'], ['Cours', 'LDAP, AD, DNS, Kerberos'], ['Pratique', 'Lab Samba AD'], ['Incident', 'Heure et relation d’approbation'], ['Clôture', 'Quiz flash']], diff: 'Élèves en difficulté : arborescence fournie. Élèves avancés : audit PingCastle, tiering.', eval: 'Lab validé, sujet type.' } }, +exemples: [ + ['Trouver les contrôleurs de domaine', 'Un poste ne rejoint pas le domaine.', 'nslookup -type=SRV _ldap._tcp.dc._msdcs.lycee.local', '_ldap._tcp.dc._msdcs.lycee.local SRV service location:\n priority = 0, weight = 100, port = 389, svr hostname = dc1.lycee.local\n priority = 0, weight = 100, port = 389, svr hostname = dc2.lycee.local', 'Les deux DC sont annoncés. Si la commande échoue, le poste n’interroge pas le DNS du domaine : on vérifie sa configuration DNS avant tout le reste.'], + ['Chercher un compte', 'Retrouver les groupes d’un élève.', 'ldapsearch -LLL -H ldaps://dc1.lycee.local -D "CN=lecture,OU=Services,DC=lycee,DC=local" -W -b "DC=lycee,DC=local" "(sAMAccountName=lea.martin)" memberOf', 'dn: CN=Léa M.,OU=SIO1,OU=Eleves,DC=lycee,DC=local\nmemberOf: CN=G-Eleves-SIO,OU=Groupes,DC=lycee,DC=local', 'LDAPS chiffre l’échange ; le compte de lecture dédié n’a aucun autre droit.'], + ['Vérifier les GPO d’un poste', 'Le lecteur réseau n’apparaît pas.', 'gpresult /r /scope:user', 'Objets Stratégie de groupe appliqués\n GPO-Eleves-Fond\nLes GPO suivants n’ont pas été appliqués car ils ont été filtrés\n GPO-Lecteurs-SIO\n Filtrage : Refusé (Sécurité)', 'La GPO des lecteurs est filtrée par sécurité : le groupe de l’élève n’a pas le droit « Appliquer la stratégie de groupe ».'], + ['Contrôler la réplication', 'Un compte créé sur dc1 n’existe pas sur dc2.', 'sudo samba-tool drs showrepl | grep -A3 "INBOUND" | tail -3', 'DC=lycee,DC=local\n Default-First-Site-Name\\DC1 via RPC\n Last attempt @ … failed, result 1256 (WERR_NO_SUCH_SERVICE)', 'La réplication de dc1 vers dc2 échoue. On vérifie la résolution de dc1 depuis dc2 et l’ouverture des ports RPC.'], + ['Joindre un Linux au domaine', 'Nouveau serveur Debian.', 'sudo realm join -U technicien lycee.local && realm list | grep -E "realm-name|configured"', 'realm-name: LYCEE.LOCAL\nconfigured: kerberos-member', 'Le serveur est membre ; les comptes du domaine peuvent s’y connecter selon les règles de realm permit.'], + ['Repérer les mots de passe qui n’expirent pas', 'Audit des comptes.', 'Get-ADUser -Filter {PasswordNeverExpires -eq $true -and Enabled -eq $true} | Select Name', 'Name\n----\nsvc-sauvegarde\nancien.stagiaire', 'Un compte de stagiaire parti est encore actif avec un mot de passe éternel : on le désactive. Le compte de service doit devenir un compte de service géré (gMSA).'] +], +termes: ['LDAP', 'LDAPS', 'DN', 'OU', 'Active Directory', 'domaine', 'forêt', 'contrôleur de domaine', 'Kerberos', 'SRV', 'GPO', 'LSDOU', 'AGDLP', 'gpupdate', 'gpresult', 'Samba', 'SSSD', 'realmd', 'LAPS', 'tiering', 'NTLM', 'SMB', 'ldapsearch', 'samba-tool'] +}); +})(); diff --git a/design/js/contenus-long.js b/design/js/contenus-long.js new file mode 100644 index 0000000..d1e2790 --- /dev/null +++ b/design/js/contenus-long.js @@ -0,0 +1,64 @@ +// Lecture longue, schémas et emplacements photo pour chaque cours complet +(function () { +var K = 'stroke="#000" stroke-width="3"'; +var box = function (x, y, w, h, fill, txt, fs) { return '' + txt + ''; }; +var arrow = function (x1, y1, x2, y2) { return ''; }; +var svg = function (w, h, body) { return '' + body + ''; }; +var bits = [128, 64, 32, 16, 8, 4, 2, 1], v = [1, 0, 1, 1, 0, 0, 1, 0]; +window.CONTENUS_LONG = Object.assign(window.CONTENUS_LONG || {}, { +binaire: { figure: svg(720, 200, bits.map(function (b, i) { return box(20 + i * 85, 20, 80, 50, '#F6F5F1', b, 16) + box(20 + i * 85, 80, 80, 60, v[i] ? '#FFD23F' : '#fff', v[i], 26); }).join('') + '1011 0010₂ = 128 + 32 + 16 + 2 = 178'), legende: 'Chaque case d’un octet a un poids. On additionne les poids des bits à 1.', + photo: 'Photo : barrette de mémoire vive ou vue au microscope d’une puce', + lecture: ['Imaginez une rangée de huit interrupteurs. Chacun peut être allumé ou éteint. Si l’on convient que le premier vaut 1, le deuxième 2, le troisième 4, et ainsi de suite en doublant à chaque fois, on peut représenter n’importe quel nombre de 0 à 255 en choisissant quels interrupteurs allumer. C’est exactement ce que fait un octet dans la mémoire d’un ordinateur.', + 'Pourquoi doubler ? Parce que chaque interrupteur n’a que deux positions. En base 10, on a dix chiffres, donc chaque position vaut dix fois la précédente : unités, dizaines, centaines. En base 2, on n’a que deux chiffres, donc chaque position vaut deux fois la précédente. La logique est la même, seule la base change.', + 'L’hexadécimal n’est qu’une écriture plus compacte du binaire. Lire 32 zéros et uns d’affilée est pénible et source d’erreurs ; en les regroupant par quatre, on obtient huit symboles faciles à recopier. C’est pour cela que les adresses MAC, les couleurs web et les adresses IPv6 s’écrivent en hexadécimal : l’humain lit vite, et la machine retrouve les bits sans calcul.', + 'Dans la pratique, un administrateur réseau manipule ces conversions tous les jours sans même y penser : un masque /26, c’est 26 bits à 1, donc un dernier octet à 1100 0000, soit 192. Ceux qui maîtrisent ce réflexe découpent un réseau en sous-réseaux de tête ; les autres sortent la calculatrice. L’objectif de ce cours est de vous faire passer dans la première catégorie.'] }, +terminal: { figure: svg(720, 260, box(310, 10, 100, 40, '#000', '/', 20) + [['etc', 20], ['home', 160], ['var', 300], ['usr', 440], ['tmp', 580]].map(function (d) { return arrow(360, 50, d[1] + 60, 95) + box(d[1], 100, 120, 40, '#fff', '/' + d[0], 16); }).join('') + arrow(220, 140, 220, 185) + box(160, 190, 120, 40, '#FFD23F', 'eleve', 16) + arrow(360, 140, 360, 185) + box(300, 190, 120, 40, '#7CF2C0', 'log', 16)), legende: 'L’arborescence Linux part d’une seule racine, /. Votre dossier personnel est /home/eleve.', + photo: 'Photo : une salle serveur ou un administrateur devant un terminal', + lecture: ['Quand on découvre le terminal, l’écran noir impressionne. Pourtant, il ne fait rien d’autre que ce que fait l’explorateur de fichiers : afficher des dossiers, en ouvrir, copier, déplacer. La différence, c’est qu’on écrit ce qu’on veut au lieu de cliquer, et que ce qu’on écrit peut être rejoué, partagé et automatisé.', + 'Sur un serveur, il n’y a souvent pas d’interface graphique du tout. On s’y connecte à distance par SSH depuis un autre ordinateur, parfois depuis l’autre bout du monde, et le terminal est la seule porte d’entrée. Un technicien qui sait s’en servir intervient en quelques secondes là où un autre devrait se déplacer.', + 'La première compétence est de toujours savoir où l’on est. L’invite vous le dit, pwd le confirme. La plupart des erreurs de débutant viennent d’une commande lancée dans le mauvais dossier : un fichier créé « nulle part », un rm qui supprime autre chose que prévu. Prenez l’habitude de regarder l’invite avant d’appuyer sur Entrée.', + 'La deuxième compétence est de ne pas tout retenir. Personne ne connaît toutes les options de toutes les commandes. Les professionnels utilisent man, --help, la touche Tab et l’historique en permanence. Savoir chercher l’information est plus important que la connaître par cœur.'] }, +droits: { figure: svg(720, 190, box(20, 20, 60, 60, '#F6F5F1', '-', 26) + [['r', 'w', 'x', '#FFD23F', 'propriétaire (u)'], ['r', '-', 'x', '#7CF2C0', 'groupe (g)'], ['-', '-', '-', '#FF6FB5', 'autres (o)']].map(function (g, i) { var x = 100 + i * 205; return box(x, 20, 60, 60, g[3], g[0], 26) + box(x + 62, 20, 60, 60, g[3], g[1], 26) + box(x + 124, 20, 60, 60, g[3], g[2], 26) + '' + g[4] + '' + [7, 5, 0][i] + ''; }).join('')), legende: 'rwxr-x--- : trois triplets, un par catégorie. En octal, 750.', + photo: 'Photo : badge d’accès ou porte de salle serveur sécurisée', + lecture: ['Un serveur de lycée héberge à la fois les sujets d’examen des enseignants, les travaux des élèves et les fichiers de configuration du système. Sans règles, n’importe qui pourrait lire les sujets la veille de l’épreuve ou modifier la configuration. Les droits Unix sont ces règles, et elles s’appliquent à chaque fichier.', + 'Le modèle est volontairement simple : trois catégories de personnes, trois actions possibles. Cette simplicité est une force, car elle se vérifie d’un coup d’œil avec ls -l. Elle a aussi des limites, que les ACL viennent combler quand il faut donner un accès à une seule personne sans créer de groupe.', + 'Le piège classique est de « tout ouvrir » pour que ça marche : chmod 777. Le service redémarre, l’utilisateur est content, et le serveur vient de perdre toute protection. Un bon technicien cherche au contraire le droit minimum qui suffit. C’est le principe du moindre privilège, au cœur des recommandations de l’ANSSI.', + 'Retenez enfin que sur un dossier, x ne veut pas dire « exécuter » mais « traverser ». Un dossier en r-- permet de voir les noms des fichiers sans pouvoir les ouvrir, ce qui surprend toujours la première fois.'] }, +tubes: { figure: svg(720, 130, [['auth.log', '#F6F5F1'], ['grep', '#FFD23F'], ['awk', '#7CF2C0'], ['sort | uniq -c', '#C4B5FD'], ['head', '#FF6FB5']].map(function (s, i) { return box(10 + i * 142, 40, 120, 50, s[1], s[0], 14) + (i < 4 ? arrow(130 + i * 142, 65, 150 + i * 142, 65) : ''); }).join('')), legende: 'Chaque commande transforme le flux et passe le résultat à la suivante.', + photo: 'Photo : un écran de supervision avec des journaux qui défilent', + lecture: ['Un journal système, c’est un fichier texte où chaque ligne raconte un événement : une connexion, une erreur, un démarrage de service. Sur un serveur exposé à Internet, auth.log peut grossir de plusieurs milliers de lignes par jour. Personne ne les lit une par une.', + 'La philosophie Unix propose une réponse élégante : de petits outils qui font chacun une seule chose, et un moyen de les brancher entre eux. grep sait filtrer, sort sait trier, uniq sait compter les doublons. Aucun ne sait analyser un journal seul ; ensemble, ils répondent en une ligne à des questions complexes.', + 'Construisez toujours une chaîne pas à pas. Lancez la première commande, regardez le résultat, ajoutez un tube et la commande suivante, regardez encore. Une chaîne de six commandes écrite d’un coup ne marche presque jamais du premier essai ; construite progressivement, elle se met au point en deux minutes.', + 'Quand une chaîne est utile, on la sauvegarde dans un script et on la planifie. C’est le premier pas vers l’automatisation, compétence très recherchée chez les techniciens et les administrateurs.'] }, +osi: { figure: svg(720, 330, ['7 Application · HTTP, DNS', '6 Présentation · TLS', '5 Session', '4 Transport · TCP, UDP', '3 Réseau · IP', '2 Liaison · Ethernet', '1 Physique · câble, radio'].map(function (t, i) { return box(20, 10 + i * 44, 420, 40, ['#FF6FB5', '#FF6FB5', '#FF6FB5', '#C4B5FD', '#7CF2C0', '#FFD23F', '#F6F5F1'][i], t, 15); }).join('') + [['Application', 10, 130], ['Transport', 142, 40], ['Internet', 186, 40], ['Accès réseau', 230, 84]].map(function (c) { return box(470, c[1], 230, c[2], '#fff', c[0], 15); }).join('')), legende: 'À gauche les 7 couches OSI, à droite leurs équivalents dans le modèle TCP/IP.', + photo: 'Photo : baie de brassage avec switchs et câbles RJ45', + lecture: ['Quand vous ouvrez une page web, des dizaines d’équipements différents collaborent : votre carte Wi-Fi, la box, les routeurs de votre opérateur, ceux d’Internet, le serveur. Ils ont été fabriqués par des entreprises différentes, à des époques différentes. Ils se comprennent parce que chacun respecte des règles communes, rangées par couches.', + 'L’analogie du courrier aide à fixer les idées. Vous écrivez une lettre (l’application), vous la mettez dans une enveloppe avec l’adresse (le réseau), la poste la place dans un sac à destination d’un centre de tri (la liaison), et un camion transporte le sac (le physique). À chaque étape, on ajoute un emballage sans ouvrir le précédent. À l’arrivée, on déballe dans l’ordre inverse.', + 'Le modèle OSI à 7 couches est un modèle de référence, très utile pour raisonner et pour dialoguer entre techniciens (« c’est un problème de couche 2 »). Le modèle TCP/IP à 4 couches est celui qui est réellement implémenté. Vous devez connaître les deux et savoir passer de l’un à l’autre.', + 'Le vrai intérêt du modèle en couches se révèle en panne. Plutôt que de tout tester au hasard, on part du bas : le lien, l’adresse, la passerelle, le nom, le service. La première couche qui échoue désigne le coupable. Cette méthode fait gagner un temps considérable.'] }, +sql: { figure: svg(720, 200, box(20, 20, 280, 40, '#FFD23F', 'ELEVE', 16) + box(20, 60, 280, 34, '#fff', 'id · nom · prenom · #classe_id', 14) + box(420, 20, 280, 40, '#7CF2C0', 'CLASSE', 16) + box(420, 60, 280, 34, '#fff', 'id · libelle · annee', 14) + arrow(300, 77, 418, 77) + 'classe_id → idSELECT e.nom, c.libelle FROM eleve e JOIN classe c ON e.classe_id = c.id;'), legende: 'La clé étrangère classe_id relie chaque élève à sa classe. La jointure suit ce lien.', + photo: 'Photo : tableau de bord ou écran d’application de vie scolaire', + lecture: ['Un tableur suffit pour une classe. Pour un établissement entier, avec des milliers d’élèves, des centaines de devoirs et des notes qui arrivent en continu, il faut une base de données. Elle garantit que les données restent cohérentes, que plusieurs personnes peuvent écrire en même temps et qu’on retrouve n’importe quelle information en une fraction de seconde.', + 'L’idée centrale du modèle relationnel est de ne jamais recopier une information. Le libellé d’une classe n’est écrit qu’une fois, dans la table des classes ; chaque élève ne contient que le numéro de sa classe. Si la classe change de nom, on ne modifie qu’une ligne. Les jointures reconstruisent l’information complète au moment de la requête.', + 'SQL est un langage déclaratif : on décrit ce qu’on veut obtenir, pas comment le calculer. C’est la base de données qui choisit la meilleure façon d’y arriver. Cela rend les requêtes courtes et lisibles, presque comme des phrases, mais demande de bien comprendre l’ordre logique : FROM et JOIN d’abord, puis WHERE, GROUP BY, HAVING, SELECT et enfin ORDER BY.', + 'Enfin, une base contient souvent des données personnelles. Le RGPD impose de les protéger : droits d’accès limités, requêtes préparées contre les injections, sauvegardes, et suppression des données qui ne sont plus nécessaires.'] }, +python: { figure: svg(720, 250, box(260, 10, 200, 44, '#F6F5F1', 'note = saisie', 16) + arrow(360, 54, 360, 84) + 'note ≥ 10 ?' + arrow(470, 126, 560, 126) + box(560, 104, 140, 44, '#7CF2C0', 'Admis', 16) + arrow(250, 126, 160, 126) + box(20, 104, 140, 44, '#FF6FB5', 'À revoir', 16) + 'ouinonif note >= 10: print("Admis") else: print("À revoir")'), legende: 'Une condition est un embranchement : le programme suit une seule des deux branches.', + photo: 'Photo : élèves en séance de programmation', + lecture: ['Programmer, ce n’est pas taper du code : c’est découper un problème en étapes assez simples pour qu’une machine les exécute sans réfléchir. Le langage n’est qu’un moyen d’écrire ces étapes. Python est choisi dans l’enseignement parce que sa syntaxe gêne le moins possible cette réflexion.', + 'Trois structures suffisent à écrire presque tous les programmes : la séquence (une instruction après l’autre), la condition (faire ceci ou cela) et la répétition (recommencer). Le reste, fonctions, listes, fichiers, sert à organiser ces trois briques pour que le programme reste lisible quand il grandit.', + 'Un bon réflexe est d’écrire le programme en français avant de l’écrire en Python : « demander la note ; si elle est au moins 10, afficher admis ; sinon, afficher à revoir ». La traduction devient alors presque mécanique, et les erreurs de logique apparaissent avant la première ligne de code.', + 'Enfin, testez tout le temps. Une fonction de trois lignes accompagnée de deux assert est plus précieuse qu’une fonction de trente lignes que personne n’ose modifier. C’est ce que font les développeurs professionnels, et c’est ce que vérifient les tests automatiques de l’IDE.'] }, +web: { figure: svg(720, 200, box(20, 60, 180, 70, '#C4B5FD', 'Navigateur', 18) + box(520, 60, 180, 70, '#7CF2C0', 'Serveur Apache', 18) + arrow(200, 80, 518, 80) + arrow(520, 115, 202, 115) + 'GET /index.html200 OK + HTMLLe navigateur affiche le HTML, applique le CSS, exécute le JavaScript.'), legende: 'Un échange HTTP : une requête du client, une réponse du serveur.', + photo: 'Photo : outils de développement du navigateur ouverts sur une page', + lecture: ['Le Web repose sur une idée simple inventée au CERN en 1989 : des documents reliés par des liens, que l’on demande à un serveur avec un protocole commun. Trente ans plus tard, la même idée fait fonctionner les réseaux sociaux, les ENT et les applications de banque.', + 'Ouvrez les outils de développement de votre navigateur (F12), onglet Réseau, et rechargez une page : vous verrez des dizaines de requêtes, chacune avec sa méthode, son code et sa durée. C’est le meilleur moyen de comprendre HTTP, et c’est l’outil numéro un d’un développeur web pour dépanner.', + 'Séparer la structure (HTML) de la présentation (CSS) n’est pas un caprice : le même contenu peut ainsi s’afficher sur un téléphone, un grand écran ou être lu à voix haute par un lecteur d’écran pour une personne malvoyante. Une page bien structurée est aussi mieux référencée par les moteurs de recherche.', + 'Côté serveur, héberger un site, c’est installer un logiciel qui écoute sur le port 80 ou 443 et renvoie des fichiers. Apache et Nginx font tourner une grande partie des sites du monde. Savoir les installer, les configurer et lire leurs journaux fait partie du socle du technicien.'] }, +crypto: { figure: svg(720, 210, box(20, 70, 150, 60, '#fff', 'Message', 18) + arrow(170, 100, 268, 100) + box(270, 60, 180, 80, '#FFD23F', 'Chiffrement', 18) + arrow(450, 100, 548, 100) + box(550, 70, 150, 60, '#13233A', 'x9#Qa…', 18) + 'clé publique d’AliceSeule la clé privée d’Alice peut déchiffrer'), legende: 'Chiffrement asymétrique : on chiffre avec la clé publique du destinataire.', + photo: 'Photo : cadenas HTTPS dans la barre d’adresse ou clé de sécurité matérielle', + lecture: ['La cryptographie a longtemps été réservée aux militaires et aux diplomates. Aujourd’hui, elle protège chaque connexion HTTPS, chaque message sur une messagerie moderne, chaque paiement par carte. Vous l’utilisez des centaines de fois par jour sans le savoir.', + 'Il faut d’abord bien distinguer les outils. Le hachage ne cache rien : il produit une empreinte qui permet de vérifier qu’un fichier ou un mot de passe n’a pas changé. Le chiffrement, lui, rend un message illisible sans la clé, et il est réversible. Confondre les deux est l’erreur la plus fréquente, en cours comme en entreprise.', + 'Le chiffrement asymétrique a résolu un problème vieux de plusieurs siècles : comment se mettre d’accord sur une clé secrète sans jamais se rencontrer ? La réponse, publiée dans les années 1970, est d’utiliser deux clés liées mathématiquement. On peut diffuser l’une à tout le monde sans jamais compromettre l’autre.', + 'En pratique, un technicien ne réinvente jamais un algorithme. Il choisit des outils éprouvés, suit les recommandations de l’ANSSI, active HTTPS partout, remplace les mots de passe SSH par des clés et vérifie que l’application stocke les mots de passe avec Argon2 ou bcrypt. La sécurité vient d’abord de la rigueur.'] } +}); +})(); diff --git a/design/js/contenus-lot-10.js b/design/js/contenus-lot-10.js new file mode 100644 index 0000000..92c0f6c --- /dev/null +++ b/design/js/contenus-lot-10.js @@ -0,0 +1,227 @@ +// Cours complets · lot 10 : algorithmique et structures, développement web back-end, JavaScript et TypeScript, langage C +(function () { +var reg = function (c) { + (window.CONTENUS_PRO = window.CONTENUS_PRO || []).unshift(c.cours); + (window.CONTENUS_PLUS = window.CONTENUS_PLUS || {})[c.cours.id] = c.plus; + (window.CONTENUS_EXEMPLES = window.CONTENUS_EXEMPLES || {})[c.cours.id] = c.exemples; + (window.CONTENUS_SCHEMAS = window.CONTENUS_SCHEMAS || {})[c.cours.id] = { termes: c.termes, figs: [] }; +}; + +reg({ +cours: { id: 'algo', match: /Tris|dichotomique|complexité|Complexité et notation O|Récursivité|Piles, files|listes chaînées|Graphes : parcours|Dijkstra|Listes, tuples|Fonctions, portée|Tests : assert/i, + titre: 'Algorithmique : complexité, tris, récursivité, structures de données et graphes', duree: '', + niveau: 'NSI Première et Terminale · BTS SIO SLAM · BUT Informatique · classes préparatoires', + prerequis: ['Python : variables, boucles, fonctions'], + competences: ['NSI · Algorithmique et structures de données', 'BTS SIO SLAM · Concevoir une solution applicative', 'BUT Info · Compétence « Optimiser »'], + intro: 'Deux programmes corrects peuvent avoir des comportements radicalement différents : l’un trie un million de lignes en une seconde, l’autre en plusieurs heures. L’algorithmique donne les outils pour choisir la bonne méthode et la bonne structure de données, et pour prévoir comment un programme se comportera quand les données grandiront. Ce module couvre la complexité, les tris et la recherche, la récursivité, les structures linéaires et les graphes, avec leurs applications concrètes en réseau et en informatique de gestion.', + cm: [ + { t: 'Mesurer un algorithme : la complexité', d: '', html: 'La complexité en temps compte le nombre d’opérations élémentaires en fonction de la taille n des données, dans le pire cas. On ne garde que l’ordre de grandeur, noté O : une boucle simple est en O(n), deux boucles imbriquées en O(n²), une recherche qui divise l’espace par deux à chaque étape en O(log n). Pour n = 1 000 000, O(n log n) représente environ 20 millions d’opérations, O(n²) mille milliards : la différence entre une seconde et plusieurs jours. La complexité en espace mesure la mémoire utilisée.', table: [['Complexité', 'Exemple', 'n = 10⁶'], ['O(1)', 'accès à un élément d’un tableau, d’un dictionnaire', '1'], ['O(log n)', 'recherche dichotomique', '≈ 20'], ['O(n)', 'parcours, recherche linéaire', '10⁶'], ['O(n log n)', 'tri fusion, tri de Python', '≈ 2 × 10⁷'], ['O(n²)', 'tri par sélection, double boucle', '10¹²'], ['O(2ⁿ)', 'tester tous les sous-ensembles', 'inenvisageable']] }, + { t: 'Recherche et tris', d: '', html: 'La recherche dichotomique dans un tableau trié compare la valeur cherchée au milieu, puis continue dans la moitié qui convient : O(log n). Les tris simples, par sélection et par insertion, sont en O(n²) ; le tri par insertion est très efficace sur des données presque triées. Le tri fusion découpe le tableau en deux, trie chaque moitié récursivement et fusionne : O(n log n) garanti. Le tri rapide est en moyenne en O(n log n). En pratique, on utilise le tri de la bibliothèque (sorted, Timsort), mais comprendre ces algorithmes permet de raisonner sur les coûts et de réussir les épreuves.', exemple: 'def dichotomie(t, x):\n g, d = 0, len(t) - 1\n while g <= d:\n m = (g + d) // 2\n if t[m] == x:\n return m\n if t[m] < x:\n g = m + 1\n else:\n d = m - 1\n return -1' }, + { t: 'Récursivité', d: '', html: 'Une fonction récursive s’appelle elle-même sur un problème plus petit, jusqu’à un cas de base qui s’arrête. Elle exprime naturellement les problèmes à structure récursive : parcours d’arborescence de fichiers, tri fusion, calculs sur des arbres. Chaque appel occupe une place sur la pile d’appels : sans cas de base atteint, on obtient un dépassement (RecursionError en Python, limite par défaut de 1 000 appels). Certaines récursions recalculent plusieurs fois les mêmes valeurs (Fibonacci naïf en O(2ⁿ)) : la mémoïsation (functools.cache) ou une version itérative corrige le problème.' }, + { t: 'Structures de données linéaires', d: '', html: 'Une pile (LIFO, dernier entré premier sorti) sert à l’historique d’annulation, à la pile d’appels, à la vérification des parenthèses. Une file (FIFO) sert aux files d’attente : impressions, requêtes, mains levées dans l’ordre d’arrivée. En Python, une liste fait une bonne pile (append, pop), mais une mauvaise file (pop(0) en O(n)) : on utilise collections.deque. Une liste chaînée relie des maillons par des références : insertion en tête en O(1), accès au k-ième élément en O(k). Le dictionnaire (table de hachage) donne un accès moyen en O(1) par clé : c’est souvent la structure qui transforme un O(n²) en O(n).' }, + { t: 'Graphes et parcours', d: '', html: 'Un graphe est un ensemble de sommets reliés par des arêtes, éventuellement orientées et pondérées : routeurs et liens, pages web, dépendances entre tâches. On le représente par une matrice d’adjacence ou, plus économiquement, par des listes d’adjacence (un dictionnaire de voisins). Le parcours en largeur (BFS, avec une file) visite par distance croissante et trouve le plus court chemin en nombre d’arêtes ; le parcours en profondeur (DFS, avec une pile ou la récursivité) sert à détecter des cycles ou des composantes connexes.' }, + { t: 'Plus courts chemins : Dijkstra', d: '', html: 'L’algorithme de Dijkstra calcule les plus courts chemins depuis un sommet dans un graphe à poids positifs : il sélectionne à chaque étape le sommet non traité le plus proche et met à jour les distances de ses voisins. Avec une file de priorité (heapq), il s’exécute en O((V + E) log V). C’est exactement ce que fait chaque routeur OSPF pour construire sa table de routage à partir de la carte du réseau, avec un coût par lien inversement proportionnel au débit.', exemple: 'import heapq\ndef dijkstra(g, s):\n dist = {s: 0}\n file = [(0, s)]\n while file:\n d, u = heapq.heappop(file)\n if d > dist[u]:\n continue\n for v, w in g[u].items():\n if d + w < dist.get(v, float("inf")):\n dist[v] = d + w\n heapq.heappush(file, (d + w, v))\n return dist' } + ], + synthese: ['Complexité O : O(1) < O(log n) < O(n) < O(n log n) < O(n²) < O(2ⁿ)', 'Dichotomie sur tableau trié en O(log n) ; tri fusion en O(n log n)', 'Récursivité : cas de base, pile d’appels, mémoïsation', 'Pile LIFO, file FIFO avec deque, dictionnaire en O(1) moyen', 'Graphes : listes d’adjacence ; BFS et DFS', 'Dijkstra et OSPF'], + qcm: [ + ['Complexité de la recherche dichotomique ?', ['O(1)', 'O(log n)', 'O(n)', 'O(n²)'], 1, 'On divise par deux à chaque étape.'], + ['Condition pour utiliser la dichotomie ?', ['Tableau trié', 'Tableau court', 'Nombres entiers', 'Aucune'], 0, 'Sinon on ne sait pas quelle moitié choisir.'], + ['Quelle structure pour une file d’attente en Python ?', ['list avec pop(0)', 'collections.deque', 'set', 'tuple'], 1, 'popleft en O(1).'], + ['Que manque-t-il à une récursion qui provoque RecursionError ?', ['Un return', 'Un cas de base atteint', 'Une boucle', 'Un print'], 1, 'Elle ne s’arrête jamais.'], + ['Quel parcours trouve le plus court chemin en nombre d’arêtes ?', ['DFS', 'BFS', 'Tri fusion', 'Dichotomie'], 1, 'Par distance croissante.'], + ['Quel protocole de routage utilise Dijkstra ?', ['RIP', 'OSPF', 'DHCP', 'ARP'], 1, 'État de liens.'], + ['Deux boucles imbriquées sur n éléments :', ['O(n)', 'O(n²)', 'O(log n)', 'O(2n)'], 1, 'n × n.'] + ], + td: [ + { n: 'Échauffement', c: 'Donner la complexité de : parcourir une liste ; vérifier si deux listes ont un élément commun avec deux boucles ; même chose en transformant la seconde en ensemble.', r: 'O(n) · O(n × m) · O(n + m)' }, + { n: 'Application', c: 'Écrire un tri par insertion, puis compter le nombre de comparaisons sur une liste déjà triée et sur une liste triée à l’envers de 1 000 éléments.', r: 'Déjà triée : environ n comparaisons (O(n)) · à l’envers : environ n²/2 = 500 000 (O(n²)).' }, + { n: 'Application', c: 'Vérifier le bon parenthésage d’une expression avec une pile.', r: 'Empiler chaque ouvrante ; pour chaque fermante, la pile ne doit pas être vide et son sommet doit correspondre ; à la fin, la pile doit être vide.' }, + { n: 'Approfondissement', c: 'Appliquer Dijkstra à la main sur un réseau de cinq routeurs fourni, puis en déduire la table de routage du routeur A.', r: 'Tableau des distances étape par étape ; la table associe à chaque destination le premier saut du plus court chemin.' } + ], + tp: { type: 'IDE Python', url: 'apercu-ide.html', desc: 'Exercices avec tests et mesure du temps d’exécution.', etapes: ['Dichotomie et tests', 'Tri fusion', 'Comparaison des temps selon n', 'File des mains levées avec deque', 'BFS sur un plan de salles', 'Dijkstra sur un réseau de routeurs'] }, + plusLoin: [['France-IOI · parcours algorithmique', 'https://www.france-ioi.org/'], ['HackerRank · Data Structures et Algorithms', 'https://www.hackerrank.com/domains/algorithms'], ['VisuAlgo (visualisation)', 'https://visualgo.net/fr']] }, +plus: { cas: { titre: '', texte: '' }, + resolu: { enonce: 'Le calcul des doublons dans l’export des 12 000 élèves de l’académie prend 40 minutes. Rendre le traitement quasi instantané.', etapes: [ + ['Lire le code', 'for a in eleves:\n for b in eleves:\n if a is not b and a["ine"] == b["ine"]: doublons.append(a)\n→ Deux boucles imbriquées : 144 millions de comparaisons, O(n²).'], + ['Choisir la structure', '→ Un dictionnaire (ou un Counter) compte les occurrences de chaque identifiant en un seul parcours.'], + ['Réécrire', 'from collections import Counter\nc = Counter(e["ine"] for e in eleves)\ndoublons = [e for e in eleves if c[e["ine"]] > 1]\n→ Deux parcours : O(n).'], + ['Mesurer', 'Temps : 40 min → 0,02 s\n→ Même résultat vérifié par un test sur un petit jeu de données connu.'], + ['Retenir', '→ Devant une double boucle de recherche, se demander quelle clé permettrait un accès direct par dictionnaire ou ensemble.'] + ] }, + erreurs: ['Dichotomie sur une liste non triée', 'Oublier le cas de base', 'list.pop(0) pour une file', 'Double boucle là où un dictionnaire suffit', 'Recalculer sans mémoïsation', 'Dijkstra avec des poids négatifs'], + memo: [['Outil', 'Usage'], ['len, in sur set/dict', 'O(1) en moyenne'], ['sorted(t, key=…)', 'tri O(n log n)'], ['bisect', 'dichotomie de la bibliothèque'], ['collections.deque', 'file'], ['collections.Counter', 'compter'], ['heapq', 'file de priorité'], ['functools.cache', 'mémoïsation'], ['timeit', 'mesurer le temps'], ['assert f(x) == y', 'tests simples'], ['sys.setrecursionlimit', 'limite de récursion (avec prudence)']], + examen: { titre: 'Sujet type · 20 points', q: ['Déterminer la complexité de trois fonctions. (4 pts)', 'Écrire la recherche dichotomique et ses tests. (4 pts)', 'Écrire une fonction récursive et justifier sa terminaison. (4 pts)', 'Implémenter une file avec deque. (3 pts)', 'Appliquer Dijkstra à la main. (5 pts)'], r: ['O(n), O(n²), O(log n)', 'voir cours', 'cas de base, taille décroissante', 'append / popleft', 'tableau des distances'] }, + prof: { deroule: [['Ouverture', 'Chronométrer une double boucle puis un dictionnaire'], ['Cours', 'Complexité'], ['Pratique', 'Tris et dichotomie'], ['Cours', 'Récursivité et structures'], ['Pratique', 'Graphes et Dijkstra'], ['Clôture', 'Quiz flash']], diff: 'Élèves en difficulté : visualisations VisuAlgo. Élèves avancés : HackerRank Medium, A*.', eval: 'Tests IDE, sujet type.' } }, +exemples: [ + ['Comparer deux complexités', 'Justifier un choix.', 'python3 -m timeit -s "l=list(range(10**5)); s=set(l)" "99999 in l"\npython3 -m timeit -s "l=list(range(10**5)); s=set(l)" "99999 in s"', '500 loops, best of 5: 612 usec per loop\n5000000 loops, best of 5: 42.1 nsec per loop', 'La recherche dans un ensemble est environ 15 000 fois plus rapide que dans une liste.'], + ['Dichotomie de la bibliothèque', 'Retrouver un seuil de note.', 'import bisect; bisect.bisect_left([8, 10, 12, 14, 16], 13)', '3', 'Position d’insertion de 13 dans la liste triée, en O(log n).'], + ['Limite de récursion', 'Fonction récursive sur une longue liste.', 'def somme(l): return 0 if not l else l[0] + somme(l[1:])\nsomme(list(range(5000)))', 'RecursionError: maximum recursion depth exceeded', 'Au-delà de 1 000 appels : on écrit une version itérative, plus adaptée ici.'], + ['Mémoïsation', 'Fibonacci lent.', 'from functools import cache\n@cache\ndef fib(n): return n if n < 2 else fib(n-1) + fib(n-2)\nfib(200)', '280571172992510140037611932413038677189525', 'Instantané grâce au cache ; la version naïve ne terminerait pas.'], + ['File des mains levées', 'Fonction Lever la main.', 'from collections import deque\nq = deque(["Nora", "Yanis"]); q.append("Léa"); q.popleft(), list(q)', "('Nora', ['Yanis', 'Léa'])", 'Premier arrivé, premier servi, en O(1).'], + ['Plus courts chemins', 'Réseau de quatre routeurs.', 'g = {"A":{"B":10,"C":1},"B":{"D":1},"C":{"B":1,"D":20},"D":{}}\ndijkstra(g, "A")', "{'A': 0, 'C': 1, 'B': 2, 'D': 3}", 'Le chemin vers D passe par C puis B (coût 3) plutôt que par le lien direct C–D (21).'] +], +termes: ['complexité', 'O(n)', 'O(log n)', 'O(n²)', 'O(n log n)', 'recherche dichotomique', 'tri par insertion', 'tri fusion', 'récursivité', 'cas de base', 'pile d’appels', 'mémoïsation', 'pile', 'file', 'deque', 'liste chaînée', 'dictionnaire', 'graphe', 'BFS', 'DFS', 'Dijkstra', 'heapq'] +}); + +reg({ +cours: { id: 'backend', match: /Laravel|MVC|API REST|OpenAPI|Authentification : sessions|OAuth|PHP : bases|Framework back|Déployer une application web|Sécurité web|CSP|CORS|Tests : unitaires, intégration/i, + titre: 'Développement web back-end : MVC avec Laravel, API REST, authentification et sécurité', duree: '', + niveau: 'BTS SIO SLAM · BUT Informatique · licence pro · Master', + prerequis: ['Le Web : HTTP et HTML', 'SQL', 'Git'], + competences: ['BTS SIO SLAM · Bloc 2 · Concevoir et développer une solution applicative', 'BTS SIO · Bloc 3 · Cybersécurité des services', 'BUT Info · Réaliser et déployer'], + intro: 'Une application web professionnelle se compose d’une interface, d’une logique métier, d’une base de données et d’une API, le tout sécurisé et testé. Les frameworks comme Laravel, sur lequel est construit Syllabus, apportent une organisation éprouvée et des protections intégrées. Ce module présente l’architecture MVC, le routage, l’ORM, la conception d’une API REST, l’authentification, les protections contre les failles courantes et le déploiement.', + cm: [ + { t: 'Architecture MVC', d: '', html: 'Le motif Modèle-Vue-Contrôleur sépare les responsabilités. Le modèle représente les données et les règles métier (un élève, une classe, un devoir). La vue présente les données (templates Blade). Le contrôleur reçoit la requête, appelle le modèle et choisit la vue ou la réponse. Le routeur associe chaque URL et méthode HTTP à une action. Cette séparation rend le code testable et permet à plusieurs développeurs de travailler en parallèle.', exemple: '// routes/web.php\nRoute::middleware("auth")->group(function () {\n Route::get("/classes/{classe}", [ClasseController::class, "show"])->name("classes.show");\n});\n\n// app/Http/Controllers/ClasseController.php\npublic function show(Classe $classe) {\n $this->authorize("view", $classe);\n return view("classes.show", [\n "classe" => $classe->load("eleves"),\n ]);\n}' }, + { t: 'Modèles, ORM et migrations', d: '', html: 'L’ORM Eloquent associe chaque table à une classe : Eleve::where("classe_id", 3)->orderBy("nom")->get() produit une requête SQL préparée. Les relations (hasMany, belongsTo, belongsToMany) décrivent les clés étrangères. Les migrations versionnent le schéma de la base avec le code : chaque modification est un fichier, appliqué dans le même ordre partout. Piège de performance classique : le problème N+1, une requête par élément d’une liste, évité par le chargement anticipé (with("eleves")).' }, + { t: 'Concevoir une API REST', d: '', html: 'Une API REST expose des ressources identifiées par des URL et manipulées par les méthodes HTTP : GET /api/devoirs liste, POST /api/devoirs crée, GET /api/devoirs/12 lit, PUT ou PATCH modifie, DELETE supprime. Les réponses sont en JSON avec des codes cohérents : 200, 201 Created, 204 No Content, 400 et 422 pour une requête invalide, 401 non authentifié, 403 interdit, 404 introuvable. On versionne l’API (/api/v1), on pagine les listes, et on la documente avec OpenAPI, qui génère une documentation interactive et des clients.' }, + { t: 'Authentification et autorisation', d: '', html: 'L’authentification établit qui est l’utilisateur ; l’autorisation décide de ce qu’il peut faire. Pour une application web, une session côté serveur, identifiée par un cookie HttpOnly, Secure et SameSite, reste la solution la plus sûre. Pour une API consommée par d’autres applications, on utilise des jetons (tokens d’API, Laravel Sanctum) ou OAuth 2 / OpenID Connect pour déléguer l’authentification à un fournisseur d’identité (ENT, EduConnect). Les mots de passe sont hachés avec bcrypt ou Argon2. L’autorisation se centralise dans des politiques (policies) : un professeur ne voit que ses classes.' }, + { t: 'Sécurité : les failles courantes', d: '', html: 'L’OWASP Top 10 recense les failles les plus fréquentes. Contrôle d’accès défaillant : changer un identifiant dans l’URL donne accès aux données d’un autre (IDOR) ; on vérifie l’autorisation à chaque action. Injection : requêtes préparées systématiques. XSS : Blade échappe automatiquement {{ }} ; {!! !!} ne s’utilise que sur du contenu maîtrisé. CSRF : un jeton dans chaque formulaire (@csrf). Assignation de masse : déclarer les champs modifiables ($fillable). À quoi s’ajoutent les en-têtes : Content-Security-Policy contre l’injection de scripts, CORS limité aux origines autorisées, HSTS.', attention: 'Le mode débogage (APP_DEBUG=true) en production affiche les traces d’erreur, les variables d’environnement et parfois les mots de passe de la base. Il doit être désactivé, et le fichier .env ne doit jamais être accessible par le web ni versionné.' }, + { t: 'Tester et déployer', d: '', html: 'Les tests unitaires vérifient une classe isolée, les tests de fonctionnalité envoient de vraies requêtes à l’application ($this->actingAs($prof)->get("/classes/3")->assertOk()), les tests de bout en bout pilotent un navigateur. Le déploiement suit toujours les mêmes étapes, automatisées par la CI : récupération du code, composer install --no-dev, migrations, mise en cache de la configuration et des routes, redémarrage des workers de file d’attente, derrière Nginx et PHP-FPM, avec un retour arrière possible.' } + ], + synthese: ['MVC : modèle, vue, contrôleur, routeur', 'ORM et migrations ; éviter le N+1 avec with()', 'REST : ressources, méthodes, codes HTTP, JSON, versionnement, OpenAPI', 'Session sécurisée ou jetons ; OAuth 2 / OIDC ; policies pour l’autorisation', 'OWASP : contrôle d’accès, injection, XSS, CSRF, assignation de masse ; en-têtes', 'APP_DEBUG=false, .env protégé ; tests et déploiement automatisés'], + qcm: [ + ['Dans MVC, qui reçoit la requête et choisit la réponse ?', ['Le modèle', 'Le contrôleur', 'La vue', 'La base'], 1, 'Il orchestre.'], + ['Quelle méthode pour créer une ressource en REST ?', ['GET', 'POST', 'DELETE', 'HEAD'], 1, 'Réponse 201.'], + ['Code HTTP pour « authentifié mais pas autorisé » ?', ['401', '403', '404', '500'], 1, '401 = non authentifié.'], + ['Qu’est-ce que le problème N+1 ?', ['Une faille', 'Une requête SQL par élément d’une liste', 'Un code HTTP', 'Une erreur de migration'], 1, 'Chargement anticipé.'], + ['Protection contre le CSRF ?', ['Un jeton dans chaque formulaire', 'HTTPS seul', 'Un captcha', 'Le hachage'], 0, '@csrf.'], + ['Pourquoi désactiver APP_DEBUG en production ?', ['Performance', 'Il expose des informations sensibles', 'Obligation légale', 'Pour le cache'], 1, 'Traces, variables, secrets.'] + ], + td: [ + { n: 'Application', c: 'Concevoir les routes REST de la ressource « devoirs » d’une classe, avec les codes de réponse attendus.', r: 'GET /api/v1/classes/{c}/devoirs 200 · POST 201 · GET /devoirs/{d} 200/404 · PATCH 200/422 · DELETE 204 · 401 sans jeton, 403 si pas professeur de la classe.' }, + { n: 'Application', c: 'Corriger la faille : « public function show($id) { return Eleve::find($id); } ».', r: 'Liaison de modèle + autorisation : show(Eleve $eleve) { $this->authorize("view", $eleve); return $eleve; } avec une policy vérifiant que l’élève appartient à une classe du professeur.' }, + { n: 'Approfondissement', c: 'Écrire un test de fonctionnalité qui vérifie qu’un professeur ne peut pas voir la fiche d’un élève d’une autre classe.', r: '$prof = User::factory()->prof()->create(); $eleve = Eleve::factory()->create(); $this->actingAs($prof)->get(route("eleves.show", $eleve))->assertForbidden();' } + ], + tp: { type: 'IDE', url: 'apercu-ide.html', desc: 'Mini-application Laravel de gestion de devoirs.', etapes: ['Migration et modèle', 'Contrôleur et vues', 'API REST', 'Policy d’autorisation', 'Tests de fonctionnalité', 'Déploiement par CI'] }, + plusLoin: [['Documentation Laravel', 'https://laravel.com/docs'], ['OWASP Top 10', 'https://owasp.org/Top10/fr/'], ['OpenAPI Specification', 'https://spec.openapis.org/oas/latest.html'], ['ANSSI · Recommandations pour la mise en œuvre d’un site web', 'https://cyber.gouv.fr/']] }, +plus: { cas: { titre: '', texte: '' }, + resolu: { enonce: 'Un élève signale qu’en modifiant le numéro dans l’adresse de sa page de résultats, il voit les notes d’un camarade.', etapes: [ + ['Reproduire', 'Connecté comme élève 1204 : GET /resultats/1205 → 200 OK, notes de l’élève 1205.\n→ Faille de contrôle d’accès (IDOR).'], + ['Lire le code', 'public function show($id) { return view("resultats", ["eleve" => Eleve::findOrFail($id)]); }\n→ Aucune vérification que l’élève connecté est celui demandé.'], + ['Corriger', 'Policy EleveResultatsPolicy : un élève voit ses résultats, un professeur ceux de ses classes, la vie scolaire tout l’établissement.\npublic function show(Eleve $eleve) { $this->authorize("voirResultats", $eleve); … }\n→ Réponse 403 pour un autre élève.'], + ['Tester et vérifier les autres routes', '→ Test automatisé ajouté ; revue de toutes les routes prenant un identifiant : deux autres corrigées (exports, devoirs rendus).'], + ['Traiter les conséquences', '→ Analyse des journaux d’accès : consultations anormales par deux comptes. Information du DPO, qui évalue la notification à la CNIL et l’information des familles concernées.'] + ] }, + erreurs: ['Contrôler l’accès seulement dans l’interface', 'Requêtes SQL construites par concaténation', 'Utiliser {!! !!} sur une saisie utilisateur', 'APP_DEBUG=true en production', 'Pas de tests d’autorisation', 'Codes HTTP incohérents dans l’API'], + memo: [['Commande / élément', 'Usage'], ['php artisan route:list', 'lister les routes'], ['php artisan make:model -mcr Devoir', 'modèle, migration, contrôleur'], ['php artisan migrate', 'appliquer les migrations'], ['php artisan make:policy', 'politique d’autorisation'], ['$this->authorize()', 'vérifier un droit'], ['with("relation")', 'éviter le N+1'], ['@csrf', 'jeton de formulaire'], ['php artisan test', 'lancer les tests'], ['php artisan config:cache route:cache', 'optimiser en production'], ['curl -H "Authorization: Bearer …" /api/v1/…', 'tester une API']], + examen: { titre: 'Sujet type · 20 points', q: ['Expliquer MVC sur un exemple. (3 pts)', 'Concevoir une API REST. (5 pts)', 'Écrire un contrôleur avec autorisation. (5 pts)', 'Identifier et corriger trois failles dans un code fourni. (5 pts)', 'Décrire un déploiement. (2 pts)'], r: ['voir cours', 'ressources et codes', 'authorize + policy', 'IDOR, XSS, injection', 'composer, migrate, cache'] }, + prof: { deroule: [['Ouverture', 'Démonstration d’une faille IDOR sur une application de lab'], ['Cours', 'MVC et routage'], ['Pratique', 'Modèle et contrôleur'], ['Cours', 'API et sécurité'], ['Pratique', 'Policies et tests'], ['Clôture', 'Quiz flash']], diff: 'Élèves en difficulté : squelette fourni. Élèves avancés : OAuth 2, files d’attente, OpenAPI.', eval: 'Application testée, sujet type.' } }, +exemples: [ + ['Lister les routes', 'Audit d’une application.', 'php artisan route:list --path=api', 'GET|HEAD api/v1/devoirs ...... devoirs.index › DevoirController@index\nPOST api/v1/devoirs ...... devoirs.store › DevoirController@store\nDELETE api/v1/devoirs/{devoir} devoirs.destroy', 'On vérifie que chaque route sensible a un middleware d’authentification.'], + ['Détecter un N+1', 'Page lente.', 'DB::enableQueryLog(); $c = Classe::all(); foreach ($c as $x) $x->eleves->count(); count(DB::getQueryLog())', '31', '31 requêtes pour 30 classes. Avec Classe::withCount("eleves")->get(), une seule.'], + ['Tester une API', 'Création d’un devoir.', 'curl -s -X POST https://syllabus.local/api/v1/devoirs -H "Authorization: Bearer $T" -H "Content-Type: application/json" -d \'{"titre":"DM 3"}\'', '{"message":"The date limite field is required.","errors":{"date_limite":["…"]}} (HTTP 422)', 'La validation renvoie 422 avec le détail des champs manquants.'], + ['Test d’autorisation', 'Non-régression.', 'php artisan test --filter=ResultatsTest', 'PASS Tests\\Feature\\ResultatsTest\n✓ un élève voit ses résultats\n✓ un élève ne voit pas ceux d’un camarade', 'Le test échouerait si la faille réapparaissait.'], + ['Vérifier les en-têtes', 'Audit de sécurité.', 'curl -sI https://syllabus.local | grep -iE "content-security|set-cookie"', 'content-security-policy: default-src \'self\'; frame-ancestors \'none\'\nset-cookie: syllabus_session=…; secure; httponly; samesite=lax', 'CSP restrictive et cookie de session protégé.'], + ['Déploiement', 'Mise en production.', 'composer install --no-dev -o && php artisan migrate --force && php artisan optimize && php artisan queue:restart', 'INFO Running migrations. 2026_10_01_create_rendus_table ....... DONE\nINFO Caching framework bootstrap, configuration, and metadata.', 'Chaque étape est dans le pipeline CI, avec retour arrière en cas d’échec.'] +], +termes: ['MVC', 'modèle', 'vue', 'contrôleur', 'routeur', 'Laravel', 'Blade', 'Eloquent', 'ORM', 'migration', 'N+1', 'API REST', 'JSON', 'OpenAPI', 'session', 'jeton', 'OAuth 2', 'OpenID Connect', 'policy', 'OWASP', 'IDOR', 'XSS', 'CSRF', 'CSP', 'CORS', 'APP_DEBUG'] +}); + +reg({ +cours: { id: 'js', match: /JavaScript|TypeScript|DOM|fetch|Accessibilité web|RGAA|WCAG|Performance web/i, + titre: 'JavaScript et TypeScript côté navigateur : DOM, asynchrone, fetch, accessibilité', duree: '', + niveau: 'NSI Première · BTS SIO SLAM · BUT Informatique · Titre pro DWWM', + prerequis: ['Le Web : HTML et CSS', 'Python : bases de la programmation'], + competences: ['NSI · Interactions dans le navigateur', 'BTS SIO SLAM · Développer une interface', 'DWWM · Développer la partie front-end'], + intro: 'Tout ce qui réagit dans une page web, du bouton « Lever la main » au terminal xterm.js des labs, est écrit en JavaScript. Le langage s’exécute dans le navigateur, manipule la page, dialogue avec le serveur sans la recharger et doit rester utilisable par tous, y compris au clavier et avec un lecteur d’écran. Ce module présente le langage moderne, le DOM, la programmation asynchrone avec fetch, TypeScript et les exigences d’accessibilité et de performance.', + cm: [ + { t: 'Le langage moderne', d: '', html: 'On déclare avec const (par défaut) et let ; var est à éviter. Les types de base : nombres, chaînes, booléens, null, undefined, objets et tableaux. Les fonctions fléchées (x => x * 2), la déstructuration (const { nom, classe } = eleve), les gabarits de chaînes (`Bonjour ${nom}`) et les méthodes de tableaux (map, filter, reduce, find) forment le socle quotidien. On compare avec ===, qui ne convertit pas les types ("1" == 1 est vrai, "1" === 1 est faux). Les modules (import / export) organisent le code.' }, + { t: 'Le DOM et les événements', d: '', html: 'Le DOM est la représentation de la page sous forme d’arbre d’objets. On sélectionne un élément (document.querySelector("#liste")), on modifie son contenu (textContent), ses classes (classList.add) ou ses attributs, on en crée (createElement). On réagit aux actions de l’utilisateur avec addEventListener("click", …). La délégation d’événements place un seul écouteur sur un parent pour gérer de nombreux enfants, y compris ceux ajoutés plus tard.', attention: 'innerHTML avec une donnée saisie par un utilisateur ouvre une faille XSS : le texte peut contenir un script. On utilise textContent pour du texte, ou on échappe explicitement.' }, + { t: 'Asynchrone : promesses et async/await', d: '', html: 'Le navigateur n’exécute qu’un seul fil de JavaScript ; une opération longue (requête réseau, minuterie) ne doit pas le bloquer. Elle renvoie une promesse, résolue plus tard. La syntaxe async / await permet d’écrire ce code de façon lisible, et try / catch gère les erreurs. Promise.all lance plusieurs requêtes en parallèle. La boucle d’événements exécute les rappels quand le fil principal est libre.' }, + { t: 'Dialoguer avec le serveur : fetch', d: '', html: 'fetch envoie une requête HTTP et renvoie une promesse de réponse. Il ne rejette la promesse qu’en cas d’erreur réseau : une réponse 404 ou 500 est une réponse « réussie », il faut tester response.ok. On envoie du JSON avec l’en-tête Content-Type et on joint le jeton CSRF ou d’authentification. Pour des mises à jour en temps réel (mains levées, présences du quiz), on utilise les WebSockets ou les Server-Sent Events plutôt qu’interroger le serveur toutes les secondes.', exemple: 'async function leverLaMain(labId) {\n const r = await fetch(`/api/v1/labs/${labId}/mains`, {\n method: "POST",\n headers: { "Content-Type": "application/json", "X-CSRF-TOKEN": jeton },\n body: JSON.stringify({ etape: 4 }),\n });\n if (!r.ok) throw new Error(`Erreur ${r.status}`);\n const { position } = await r.json();\n document.querySelector("#position").textContent = `Vous êtes ${position}e dans la file.`;\n}' }, + { t: 'TypeScript', d: '', html: 'TypeScript ajoute un typage statique à JavaScript : on déclare la forme des données (interface Eleve { id: number; nom: string; classe?: string }) et le compilateur signale les erreurs avant l’exécution : propriété mal orthographiée, valeur possiblement undefined, mauvais type d’argument. Le code est compilé en JavaScript standard. Sur un projet de plusieurs milliers de lignes, il réduit fortement les régressions et rend l’éditeur beaucoup plus utile (complétion, renommage sûr).' }, + { t: 'Accessibilité et performance', d: '', html: 'Un site public en France doit respecter le RGAA, fondé sur les normes WCAG. Les règles de base : utiliser les bons éléments HTML (un <button> plutôt qu’un <div> cliquable, qui ne se commande pas au clavier), des étiquettes de formulaire liées, des textes alternatifs, un contraste suffisant (4,5:1 pour le texte), un focus visible, et aria-live pour annoncer les mises à jour dynamiques. Côté performance : réduire le JavaScript chargé, différer ce qui n’est pas indispensable (defer, chargement à la demande), optimiser les images, mettre en cache. Les outils de développement du navigateur et Lighthouse mesurent les deux.' } + ], + synthese: ['const/let, fonctions fléchées, déstructuration, ===, modules', 'DOM : querySelector, textContent, addEventListener, délégation', 'Jamais innerHTML avec une saisie utilisateur', 'Promesses, async/await, try/catch, Promise.all', 'fetch : tester response.ok ; WebSockets pour le temps réel', 'TypeScript : interfaces et vérification avant exécution', 'RGAA/WCAG : éléments natifs, clavier, contraste, aria-live ; performance'], + qcm: [ + ['Que vaut "1" === 1 ?', ['true', 'false', 'undefined', 'erreur'], 1, 'Pas de conversion de type.'], + ['Quelle propriété insérer pour afficher un texte saisi par l’utilisateur ?', ['innerHTML', 'textContent', 'outerHTML', 'eval'], 1, 'Pas d’interprétation HTML.'], + ['Quand fetch rejette-t-il sa promesse ?', ['Sur un 404', 'Sur un 500', 'En cas d’erreur réseau', 'Jamais'], 2, 'Tester response.ok.'], + ['À quoi sert await ?', ['Bloquer le navigateur', 'Attendre le résultat d’une promesse dans une fonction async', 'Créer une boucle', 'Déclarer une variable'], 1, 'Sans bloquer le fil principal.'], + ['Pourquoi préférer

                          • Élèves actifs

                            608

                            +86 ce mois

                          • Taux d’activité

                            91 %

                            élèves connectés / semaine

                          • Labs réalisés

                            4 210

                            depuis la rentrée

                          • Heures de VM

                            2 940 h

                            sur 9 120 h incluses

                          • Élèves accompagnés

                            47

                            suite à une alerte

                          +

                          Établissements

                          ÉtablissementClassesÉlèvesActivitéCompétences validéesStatut

                          Lycée Jean-Jaurès

                          Montreuil

                          		611894 %72 %Actif

                          Lycée Louis-Armand

                          Paris 15e

                          		920490 %68 %Actif

                          Lycée Saint-Exupéry

                          Marseille

                          		48688 %61 %Actif

                          IUT de Villetaneuse

                          Villetaneuse

                          		716092 %70 %Actif

                          Lycée Condorcet

                          Saint-Priest

                          		24071 %55 %Démarrage

                          Lycée Vauban

                          Brest

                          		00——Invité
                          +
                          +

                          Compétences les moins acquises

                          BTS SIO et CIEL
                          • Services réseau (DHCP, DNS)38 %
                          • Scripts Bash46 %
                          • VLAN et commutation52 %
                          • Sécurité des accès58 %
                          • Adressage IPv466 %

                          Piste : proposer une formation académique sur les services réseau.

                          +

                          Rapports

                          • Bilan de rentrée 2026

                            PDF · 12 pages · 01/10

                          • Usage par établissement

                            CSV · 29/09

                          • Compétences par filière

                            PDF · 6 pages · 29/09

                          +
                          + + + + + + + diff --git a/design/resources/views/accueil.blade.php b/design/resources/views/accueil.blade.php new file mode 100644 index 0000000..bead766 --- /dev/null +++ b/design/resources/views/accueil.blade.php @@ -0,0 +1,75 @@ +{{-- resources/views/accueil.blade.php --}} + + + + + + Syllabus — Une vraie machine Linux pour chaque élève + + + @vite(['resources/css/app.css', 'resources/js/app.js']) + + + + + + + + + +
                          + +
                          + +

                          Cours · TP sur machine · suivi des élèves

                          Enseigner l’informatique, du lycée au master.

                          Des cours gratuits, un vrai Linux pour chaque élève et toute la classe sur un écran. Dans le navigateur, rien à installer.

                          Créer une classe gratuite

                          Sans carte bancaire · élève ? rejoindre ma classe

                          • Hébergé en France

                            Paris

                          • RGPD

                            données minimisées

                          • 20 cursus

                            du lycée au master

                          • 443 seulement

                            aucun port à ouvrir

                          • 0 €

                            sans carte bancaire

                          Pour l’élève

                          Un terminal Linux en 5 secondes.

                          Chaque élève a sa propre machine Debian. Il clique, la console s’ouvre. Aucun poste du lycée à configurer.

                          Essayer un lab sans compte →

                          eleve@lab-07 · Debian 12
                          eleve@lab-07:~$ ip -br addr
+ens18  UP  10.20.7.14/24
+eleve@lab-07:~$ ping -c1 10.20.7.1
+64 bytes from 10.20.7.1: time=0.4 ms
+eleve@lab-07:~$

                          Correction

                          Chaque étape se vérifie toute seule.

                          Le lab contrôle directement la machine. L’élève sait s’il a réussi, et reçoit un indice s’il bloque.

                          1. 1. Afficher l’adresse IP✓
                          2. 2. Joindre la passerelle✓
                          3. 3. Configurer le DNSÀ vérifier
                          4. 4. Tester la résolution
                          5. Indice 1 : le fichier se trouve dans /etc. Regardez son nom avec ls.

                          Pour l’enseignant

                          Le roi du silence : la fonction « Lever la main ».

                          Vos élèves n’auront plus que le droit de tousser ou de respirer ! Les demandes arrivent dans l’ordre. Vous ouvrez la console de l’élève sans vous déplacer.

                          Voir le tableau de bord prof →

                          Mains levées

                          3 en attente

                          1. 1Noraétape 3 · depuis 2 minOuvrir sa console
                          2. 2Samiétape 2 · depuis 4 minOuvrir sa console
                          3. 3Jadeétape 1 · depuis 6 minOuvrir sa console

                          Questions fréquentes.

                          Combien ça coûte ?

                          Les cours sont gratuits. Les TP sur VM : 29 € par mois pour une classe, ou 24 € par élève et par an pour un établissement.

                          Faut-il installer quelque chose ?

                          Non. Un navigateur suffit, même sur un vieux PC ou un Chromebook. Tout passe par HTTPS, port 443.

                          Comment inscrire mes élèves ?

                          Par code de classe, import CSV ou saisie rapide. Chaque élève reçoit une fiche de connexion, sans e-mail.

                          Les cours se téléchargent-ils ?

                          Oui. CM, TD avec cases à remplir, correction et QCM papier, en PDF.

                          Où sont les données ?

                          Sur un cloud hébergé en France. Les données des élèves sont supprimées 90 jours après l’archivage de la classe.

                          Voir tous les tarifs →

                          Votre prochain TP commence dans 5 secondes.

                          Créer une classe gratuite

                          Sans carte bancaire

                          + + + + + + + diff --git a/design/resources/views/aide.blade.php b/design/resources/views/aide.blade.php new file mode 100644 index 0000000..f8e0ddb --- /dev/null +++ b/design/resources/views/aide.blade.php @@ -0,0 +1,68 @@ + + + + + + Aide et tutoriels · Syllabus + + + + + + + + + + + + + +
                          + +
                          + +
                          +

                          Centre d’aide

                          Aide et tutoriels

                          Des vidéos courtes et des guides pour prendre Syllabus en main.

                          Poser une question

                          Tutoriels vidéo

                          Vidéos en cours de tournage : les vignettes sont des emplacements.

                          +

                          Guides pas à pas

                          Démarrer

                          En classe

                          Évaluer

                          Établissement

                          +

                          Vous ne trouvez pas ?

                          Écrivez à adam@belkacemi.me. Chaque question aide à améliorer l’outil.

                          +
                          +
                          + + + + + + diff --git a/design/resources/views/auth/connexion.blade.php b/design/resources/views/auth/connexion.blade.php new file mode 100644 index 0000000..8a43d8e --- /dev/null +++ b/design/resources/views/auth/connexion.blade.php @@ -0,0 +1,61 @@ +@extends('layouts.vitrine') + +@section('titre', 'Se connecter') + +@section('contenu') +
                          + +
                          +

                          Se connecter.

                          +
                          +
                          +

                          Je suis élève

                          + + +

                          Ils sont sur ta fiche de connexion. Tu peux aussi scanner le QR.

                          +
                          +
                          +
                          +

                          Je suis enseignant

                          +
                          + + + +
                          + + +
                          Créer une classe
                          +
                          +
                          +
                          +
                          + +@endsection diff --git a/design/resources/views/auth/inscription.blade.php b/design/resources/views/auth/inscription.blade.php new file mode 100644 index 0000000..5754188 --- /dev/null +++ b/design/resources/views/auth/inscription.blade.php @@ -0,0 +1,61 @@ +@extends('layouts.vitrine') + +@section('titre', 'Créer une classe') + +@section('contenu') +
                          + +
                          +
                          +

                          Enseignants

                          +

                          Créer une classe.

                          +

                          Gratuit · sans CB

                          +

                          Ensuite, ajoutez vos élèves par code de classe, import CSV ou saisie rapide. Pour les mineurs, on ne demande que le nom, le prénom et le groupe.

                          +
                          +
                          + @csrf + + + +
                          + + + +
                          + + +
                          +

                          Aucune carte bancaire demandée.

                          +
                          +
                          +
                          + +@endsection diff --git a/design/resources/views/banque.blade.php b/design/resources/views/banque.blade.php new file mode 100644 index 0000000..e986f67 --- /dev/null +++ b/design/resources/views/banque.blade.php @@ -0,0 +1,185 @@ +@extends('layouts.vitrine') + +@section('titre', 'Banque de sujets') + +@section('contenu') +
                          +
                          +
                          +

                          Espace enseignant · Banque

                          +

                          Pour les profs

                          +

                          Banque de sujets et de questions

                          +

                          1 240 questions classées par cursus et par notion. Modifiez-les, ajoutez les vôtres, composez vos sujets.

                          Bibliothèque du référentiel →Générateur de TD →
                          +
                          + + Nouvelle question +
                          +
                          + +
                          +
                          +
                          +

                          Début d’heure

                          +

                          Un quiz flash pour lancer le cours.

                          +

                          Choisissez les outils à réviser. Syllabus tire les questions dans la banque. Un diaporama s’ouvre au tableau. Les élèves se connectent avec leur identifiant depuis leur téléphone ou leur PC, et vous voyez tout de suite qui manque.

                          + Voir le diaporama →Voir la vue élève → +
                          +
                          +

                          Outils à réviser

                          +
                          + + + + + + + + + + + + + + + +
                          +
                          + + + +
                          +
                          + + +
                          +
                          +
                          +
                          + +
                          + + +
                          +

                          Questions · 7 affichées sur 1 240

                          +
                            +
                          • +
                            Choix uniqueBTS SIO · Bloc 2Adressage IPv4Moyen
                            +

                            Quelle est l’adresse réseau de 10.0.3.200/22 ?

                            +

                            2 pts · utilisée 34 fois · réussite 38 %

                            +
                            Modifier
                            +
                            • +
                          • +
                            Choix uniqueBTS CIEL · RéseauxAdressage IPv4Facile
                            +

                            Combien d’hôtes utilisables dans un /27 ?

                            +

                            1 pt · utilisée 51 fois · réussite 71 %

                            +
                            Modifier
                            +
                            • +
                          • +
                            Choix multipleNSI · PremièreCommandes LinuxFacile
                            +

                            Quelles commandes affichent les interfaces réseau sous Debian ?

                            +

                            1 pt · utilisée 22 fois · réussite 64 %

                            +
                            Modifier
                            +
                            • +
                          • +
                            Vrai / fauxBTS SIO · Bloc 2VLANFacile
                            +

                            Un VLAN isole le trafic au niveau 2 du modèle OSI.

                            +

                            1 pt · utilisée 40 fois · réussite 82 %

                            +
                            Modifier
                            +
                            • +
                          • +
                            Réponse courteBTS SIO · Bloc 1Droits LinuxMoyen
                            +

                            Écrivez la commande qui donne les droits rwxr-x--- au fichier notes.txt.

                            +

                            2 pts · utilisée 18 fois · réussite 47 %

                            +
                            Modifier
                            +
                            • +
                          • +
                            Réponse numériqueBUT R&T · S1Services réseauFacile
                            +

                            Quel port utilise par défaut le protocole SSH ?

                            +

                            1 pt · utilisée 29 fois · réussite 88 %

                            +
                            Modifier
                            +
                            • +
                          • +
                            Texte à trousBTS CIEL · RéseauxRoutageDifficile
                            +

                            Complétez : la route par défaut s’écrit ___ via 192.168.1.1.

                            +

                            3 pts · utilisée 9 fois · réussite 29 %

                            +
                            Modifier
                            +
                            • +
                          +
                          + + +
                          + +
                          +
                          +

                          Créer ou modifier une question

                          +
                          + + +
                          +
                          Réponses (cochez la bonne) + + + + +
                          + + + +
                          +
                          +
                          +
                          + +@endsection diff --git a/design/resources/views/bibliotheque.blade.php b/design/resources/views/bibliotheque.blade.php new file mode 100644 index 0000000..ed32d02 --- /dev/null +++ b/design/resources/views/bibliotheque.blade.php @@ -0,0 +1,121 @@ +@extends('layouts.vitrine') + +@section('titre', 'Bibliothèque') + +@section('contenu') +
                          +
                          +

                          Bibliothèque du prof

                          +

                          Pour les profs

                          +

                          Tout le référentiel, fiche par fiche.

                          +

                          Du SNT au master, en passant par l’école d’ingénieurs. Chaque fiche regroupe cours, quiz, TD, labs et examens. Un même chapitre sert plusieurs formations : OSPF compte pour la NSI, le BTS SIO, le BTS CIEL, le BUT R&T et les titres pro.

                          +
                          +

                          Construit à partir des programmes officiels. Vérifié le 29 septembre 2026 :

                          +
                          +
                          +
                          +
                          +
                          + + + +
                          + + + +

                          Ma séquence : 0

                          +
                          +
                          + + + + + + + + + + +
                          +
                          +
                          + + + + + + + + + + + + + + + + + + + + + +@endsection diff --git a/design/resources/views/classes/suivi.blade.php b/design/resources/views/classes/suivi.blade.php new file mode 100644 index 0000000..a192cbe --- /dev/null +++ b/design/resources/views/classes/suivi.blade.php @@ -0,0 +1,157 @@ +@extends('layouts.vitrine') + +@section('titre', 'Suivi de classe') + +@section('contenu') +
                          +
                          +
                          +

                          Espace enseignant · Suivi

                          +

                          Pour les profs

                          +

                          BTS SIO 1 · Groupe A

                          +

                          Bloc 2 · Administration des systèmes et des réseaux · 24 élèves

                          +
                          +
                          + Quiz flash de début d’heure + Devoirs maison + Voir la séquence + +
                          +
                          +
                          +
                          +
                          +
                          Progression moyenne
                          52 %
                          +
                          Moyenne aux QCM
                          13,4
                          +
                          Actifs cette semaine
                          21 / 24
                          +
                          À aider maintenant
                          2
                          +
                          + +
                          +
                          +

                          Élèves

                          +
                          + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
                          ÉlèveAdressage IPv4VLANInter-VLANDHCPDNS BINDQCMTemps VM
                          LLéa M.Terminé18/2012 h 40
                          YYanis B.14/209 h 10
                          NNora KaciMain levée11/208 h 05
                          TTom R.16/2010 h 30
                          IInès D.9/205 h 20
                          SSami L.Bloqué 9 min7/206 h 45
                          CChloé P.En avance19/2013 h 15
                          AAdam F.13/208 h 50
                          +
                          +

                          8 élèves sur 24 affichés · triés par besoin d’aide

                          +
                          + + +
                          +
                          +@endsection diff --git a/design/resources/views/cockpit.blade.php b/design/resources/views/cockpit.blade.php new file mode 100644 index 0000000..5c23a45 --- /dev/null +++ b/design/resources/views/cockpit.blade.php @@ -0,0 +1,185 @@ + + + + + + Cockpit prof · Syllabus + + + + + + + + + + + + + +
                          + +
                          + +
                          +
                          +
                          + +
                          +
                          +

                          Cockpit prof

                          Pour les profs

                          +

                          BTS SIO 1 · Groupe A

                          16 élèves · mardi 29 septembre · 10:22

                          +
                          + Quiz flash + Programmer un DM + +
                          +
                          +
                            +

                          • Présents

                            15/16

                            1 absent signalé

                            • +

                          • Moyenne QCM

                            13,4

                            +0,8 sur 4 semaines

                            • +

                          • À accompagner

                            3

                            +1 cette semaine

                            • +

                          • Mains levées

                            3

                            attente moy. 2 min

                            • +

                          • DM rendus

                            13/16

                            échéance vendredi

                            • +
                          +
                          +

                          Avancement du lab « VLAN »

                          6 étapes · médiane : étape 3

                          + +

                          Largeur = nombre d’élèves à chaque étape. 2 élèves ont terminé.

                          +
                          +
                          +
                          +

                          Élèves

                          +
                          + +
                          +
                          +
                          +
                          + + +
                          Tendance
                          +
                          +
                          +
                          +

                          Surveillance d’examen

                          Inactif
                          +

                          E6 blanc SISR · 1 h 30

                          00:00

                          1. Lancez l’examen pour suivre les sorties d’onglet et de fenêtre.
                          +
                          +
                          +

                          Devoirs maison

                          Tout voir
                          +

                          • DM 3 · Plan d’adressage

                            Rendu ven. 03/10

                            13/16

                          • TP maison · Scripts Bash

                            Rendu lun. 06/10

                            6/16

                          • QCM · Lecture CM VLAN

                            Rendu ce soir

                            15/16

                          +
                          +
                          +
                          +
                          +
                          +
                          +
                          +

                          Mains levées

                          ordre d’arrivée
                          +
                            +
                            +
                            +

                            Priorités du jour

                            +

                            • Léa M. Accompagner

                              3 QCM sous 8/20. Proposer le premier rang et réexpliquer les VLAN.

                            • Lucas M. Accompagner

                              Cours lu en 2 min au lieu de 15. QCM de lecture à refaire.

                            • Hugo P. Relancer

                              DM 3 non rendu. Relance automatique jeudi 18 h.

                            • Inès K. Stimuler

                              Tous les labs réussis. Défi connexe proposé : QoS et priorisation.

                            +
                            +
                            +

                            Observation rapide

                            Classée par élève pour le conseil de classe.

                            +
                            +
                            +
                            + + +
                            + + + + + + diff --git a/design/resources/views/cohortes.blade.php b/design/resources/views/cohortes.blade.php new file mode 100644 index 0000000..f6df979 --- /dev/null +++ b/design/resources/views/cohortes.blade.php @@ -0,0 +1,72 @@ + + + + + + Suivi des cohortes · Syllabus + + + + + + + + + + + + + +
                            + +
                            + +
                            +

                            Scolarité

                            Pour les profs

                            +

                            Suivi des cohortes

                            Assiduité, résultats et alertes par classe. Cliquez sur une classe pour voir ses étudiants.

                            Exporter ▾

                            • Étudiants

                              113

                              6 classes

                            • Assiduité moyenne

                              89 %

                              séances planifiées

                            • Compétences acquises

                              64 %

                              référentiels BTS / BUT

                            • Alertes ouvertes

                              15

                              dont 4 nouvelles

                            +

                            Cohortes

                            ClasseEffectifAssiduitéMoyenneCompétencesAlertes
                            BTS SIO 1 A1693 %12,468 %1 ouverteVoir la classe →
                            BTS SIO 1 B1588 %11,161 %3 ouvertesVoir la classe →
                            BTS SIO 2 A1895 %13,279 %AucuneVoir la classe →
                            BTS SIO 2 B1484 %10,657 %4 ouvertesVoir la classe →
                            BTS CIEL 12290 %11,863 %2 ouvertesVoir la classe →
                            BUT R&T 12886 %11,359 %5 ouvertesVoir la classe →
                            +
                            +

                            Assiduité · BTS SIO 2 B

                            ÉtudiantPrésentAbsentJustifiéTaux
                            Petit Hugo186172 %
                            Leroy Tom213388 %
                            Diallo Adam231196 %

                            Absence = séance planifiée sans connexion ni présence pointée. Une connexion hors séance ne compte pas comme présence.

                            +

                            Règles d’alerte

                            +
                            +

                            Rôles et droits

                            DonnéeEnseignantProf principalCPEDirectionIntendance
                            Notes de ses classesLire, écrireLireLireLire—
                            AssiduitéPointerLireLire, justifierLire—
                            ObservationsÉcrireLire, écrireLire, écrireLire—
                            Fiche élève complèteSes élèvesSa classeTousTous—
                            ExportsSes classesSa classeTousTous—
                            Licences et factures———LireLire, gérer

                            Chaque consultation de fiche et chaque export sont journalisés. Le journal est consultable par la direction et le DPO.

                            +
                            + + + + + + diff --git a/design/resources/views/correction.blade.php b/design/resources/views/correction.blade.php new file mode 100644 index 0000000..225ee5c --- /dev/null +++ b/design/resources/views/correction.blade.php @@ -0,0 +1,75 @@ + + + + + + Correction assistée · Syllabus + + + + + + + + + + + + + +
                            + +
                            + +
                            +

                            Correction assistée

                            Pour les profs

                            +

                            Copie de Léa M.

                            Syllabus pré-corrige selon votre barème. Vous validez, ajustez et commentez.

                            +

                            Rendu de l’élève

                            Question 2 · masque

                            J’emprunte 2 bits car 2² = 4 sous-réseaux. Le masque devient /26 soit 255.255.255.192.

                            Question 4 · plan d’adressage

                            SRRéseauBroadcast
                            SR1.0.63
                            SR2.64.127
                            SR3.128.190 ✕
                            SR4.192.255

                            Question 5 · terminal (rejoué)

                            eleve@srv:~$ sudo ip addr add 192.168.10.65/26 dev eth0
+eleve@srv:~$ ip a show eth0
+    inet 192.168.10.65/26 scope global eth0
                            +

                            Barème et pré-correction

                            pré-correction · à valider
                            • ✓

                              Masque choisi et justifié

                              Suggestion : /26 correct, justification 2² = 4

                            • ✕

                              Plan d’adressage complet

                              Suggestion : SR3 : broadcast .190 au lieu de .191

                            • ✓

                              Commande de configuration

                              Suggestion : ip addr add 192.168.10.65/26 dev eth0

                            • ✕

                              Tests de connectivité

                              Suggestion : ping manquant entre SR1 et SR2

                            • ?

                              Rédaction et clarté

                              À évaluer par vous

                            +

                            Note

                            15/20

                            +
                            +

                            La pré-correction vérifie ce qui est vérifiable (calculs, commandes rejouées dans la VM, tests de code). Elle ne décide jamais seule : la note n’est publiée qu’après votre validation.

                            +
                            +
                            + + + + + + diff --git a/design/resources/views/cours/cm.blade.php b/design/resources/views/cours/cm.blade.php new file mode 100644 index 0000000..3ba5026 --- /dev/null +++ b/design/resources/views/cours/cm.blade.php @@ -0,0 +1,243 @@ +@extends('layouts.vitrine') + +@section('titre', 'CM · Adressage IPv4') + +@section('contenu') +
                            +
                            + CM +

                            Adressage IPv4 et sous-réseaux

                            +

                            Lu : 0 %

                            +

                            00:00/ 20:00 conseillées

                            +
                            +
                            +
                            +
                            +
                            + +

                            Pour les élèves

                            +

                            Adressage IPv4 et sous-réseaux

                            +

                            Lis le cours jusqu’au bout. Le QCM de lecture se débloque quand toutes les parties ont été lues et que 5 minutes se sont écoulées.

                            +
                              +
                            1. 1 · CM
                            2. 2 · QCM de lecture
                            3. 3 · TD optionnel
                            4. 4 · TP
                            5. 5 · Examen
                              6. +
                            +
                            +
                            +
                            + +
                            +
                            +

                            1. Pourquoi des adresses ?

                            +

                            Sur un réseau, chaque machine doit pouvoir être trouvée. Comme une lettre a besoin d’une adresse postale, un paquet a besoin d’une adresse IP de destination.

                            +
                            +

                            La rue

                            = le réseau

                            Toutes les maisons de la rue partagent le même nom de rue.

                            +

                            Le numéro

                            = l’hôte

                            Chaque maison a son numéro, unique dans la rue.

                            +
                            +

                            Une adresse IPv4 contient les deux informations. Le masque indique où s’arrête la rue et où commence le numéro.

                            +
                            +
                            +

                            Vidéo de contexte

                            +

                            Ton prof peut ajouter ici une vidéo YouTube pour illustrer le cours.

                            +
                            +

                            Espace prof · la vidéo s’affiche en mode sans cookie (youtube-nocookie.com).

                            +
                            +
                            +

                            2. Une adresse, 32 bits

                            +

                            Une adresse IPv4 est un nombre de 32 bits. Pour la lire plus facilement, on la découpe en 4 octets de 8 bits, écrits en décimal et séparés par des points.

                            +
                            +

                            192.168.10.77

                            +
                            11000000.10101000.00001010.01001101
                            +
                            192 = 11000000 · 168 = 10101000 · 10 = 00001010 · 77 = 01001101
                            +
                            +

                            Chaque octet va de 0 (00000000) à 255 (11111111). Une adresse comme 192.168.10.300 est donc impossible.

                            +
                            +
                            +

                            3. Le masque de sous-réseau

                            +

                            Le masque est lui aussi un nombre de 32 bits. Il commence par une suite de 1 (la partie réseau) suivie d’une suite de 0 (la partie hôte). La notation CIDR écrit simplement le nombre de 1 : /26.

                            +
                            +

                            /26 = 255.255.255.192

                            +
                            11111111.11111111.11111111.11000000
                            +
                            26 bits de réseau6 bits d’hôte
                            +
                            +

                            Dans le dernier octet, les 2 premiers bits valent 1 : 128 + 64 = 192. D’où 255.255.255.192.

                            +
                            +
                            +

                            4. Trouver l’adresse réseau : le ET logique

                            +

                            Pour trouver le réseau d’une adresse, on fait un ET logique bit à bit entre l’adresse et le masque. Le résultat vaut 1 seulement si les deux bits valent 1.

                            +
                            +
                            Table du ET logique
                            ABA ET B
                            000
                            010
                            100
                            111
                            +
                            +

                            Dernier octet seulement

                            +

                            01001101 (77)

                            +

                            ET 11000000 (192)

                            +

                            = 01000000 (64)

                            +
                            +
                            +

                            Les trois premiers octets du masque valent 255 : ils recopient l’adresse telle quelle. L’adresse réseau de 192.168.10.77/26 est donc 192.168.10.64.

                            +
                            +
                            +

                            5. Diffusion et nombre d’hôtes

                            +

                            L’adresse de diffusion (broadcast) met tous les bits d’hôte à 1. Un paquet envoyé à cette adresse arrive à toutes les machines du réseau.

                            +

                            Ici, les 6 bits d’hôte à 1 donnent 01111111 = 127 : la diffusion est 192.168.10.127.

                            +
                            Hôtes utilisables = 2bits d’hôte − 2
                            +

                            On retire 2 adresses : celle du réseau et celle de diffusion. Avec 6 bits : 2⁶ − 2 = 62 hôtes, de 192.168.10.65 à 192.168.10.126.

                            +
                            +
                            +

                            6. Découper un réseau en sous-réseaux

                            +

                            Emprunter des bits d’hôte pour le réseau crée des sous-réseaux plus petits. Emprunter 2 bits à un /24 donne 2² = 4 sous-réseaux en /26.

                            +
                            +

                            192.168.10.0/24 découpé en 4 × /26

                            +
                            +
                            .0
                            → .63
                            .64
                            → .127
                            .128
                            → .191
                            .192
                            → .255
                            +
                            +
                            Chaque bloc : 64 adresses, 62 hôtes. L’adresse .77 tombe dans le 2ᵉ bloc.
                            +
                            +

                            Astuce : la taille d’un bloc vaut 256 moins la valeur du dernier octet du masque. Pour 192 : 256 − 192 = 64.

                            +
                            +
                            +

                            7. Adresses privées et adresses particulières

                            +

                            Certaines plages sont réservées aux réseaux internes (RFC 1918). Elles ne sont pas routées sur Internet.

                            +
                            • 10.0.0.0/8
                            • 172.16.0.0/12
                            • 192.168.0.0/16
                            +
                            • 127.0.0.1la boucle locale : la machine elle-même
                            • 169.254.x.xadresse automatique quand aucun DHCP ne répond
                            • 0.0.0.0« n’importe quelle adresse » ou « pas encore d’adresse »
                            • 255.255.255.255diffusion limitée au réseau local
                            +
                            +
                            +

                            8. À retenir

                            +
                            • Une adresse IPv4 = 32 bits = 4 octets de 0 à 255.
                            • Le masque sépare la partie réseau de la partie hôte. /n = n bits à 1.
                            • Adresse réseau = adresse ET masque. Diffusion = bits d’hôte à 1.
                            • Hôtes utilisables = 2bits d’hôte − 2.
                            • Taille d’un bloc = 256 − dernier octet du masque.
                            +
                            +
                            +

                            QCM de lecture

                            +

                            4 questions sur les notions du texte, pour vérifier que tu as bien lu.

                            +
                            +

                            🔒 Encore un peu de lecture

                            +

                            Parties lues : 0 / 8 · Temps : 0 / 5 min

                            + +
                            + +
                            +
                            +

                            Pour aller plus loin

                            +

                            Des plateformes externes pour s’entraîner encore, à ton rythme. Elles ne font pas partie de Syllabus.

                            +
                            +
                            + +
                            +
                            + +@endsection diff --git a/design/resources/views/cours/fiche.blade.php b/design/resources/views/cours/fiche.blade.php new file mode 100644 index 0000000..3b89d1a --- /dev/null +++ b/design/resources/views/cours/fiche.blade.php @@ -0,0 +1,174 @@ + + + + + + Cours · Syllabus + + + + + + + + + + + + + +
                            + +
                            + +
                            +
                            +
                            + ← Tous les cours +

                            +

                            Pour les élèves

                            +

                            Chargement…

                            +
                            +
                            +
                            +
                            + +
                            + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
                            + + + + + + diff --git a/design/resources/views/cours/index.blade.php b/design/resources/views/cours/index.blade.php new file mode 100644 index 0000000..4142f2b --- /dev/null +++ b/design/resources/views/cours/index.blade.php @@ -0,0 +1,41 @@ +@extends('layouts.vitrine') + +@section('titre', 'Cours gratuits') + +@section('contenu') +

                            Gratuit, sans compte

                            99 cours gratuits, calés sur vos référentiels.

                            Chaque cours suit le découpage de l’Éducation nationale : un CM pour comprendre, un TD pour s’exercer sur papier, un TP sur une vraie VM, un QCM corrigé et expliqué.

                            99 cours · 45 TD · 59 TP sur VM · 98 QCM corrigés

                            +
                            +
                            +
                            +

                            {{ $c['nom'] }}

                            +

                            {{ $c['sous_titre'] }} · {{ collect($c['blocs'])->sum(fn ($b) => count($b['cours'])) }} cours

                            +
                            +
                            + @foreach ($c['blocs'] as $b) +
                            +

                            {{ $b['titre'] }}

                            + +
                            + @endforeach +
                            +
                            +
                            + @endforeach + +@endsection diff --git a/design/resources/views/cours/show.blade.php b/design/resources/views/cours/show.blade.php new file mode 100644 index 0000000..68ee32f --- /dev/null +++ b/design/resources/views/cours/show.blade.php @@ -0,0 +1,225 @@ +@extends('layouts.vitrine') + +@section('titre', 'Adressage IPv4 et sous-réseaux') + +@section('contenu') +
                            +
                            + +

                            Pour les élèves

                            +

                            Adressage IPv4 et sous-réseaux

                            +
                            + BTS SIO SISR · Bloc 2 + Aussi : BTS CIEL, BUT R&T S1 + 4 h +
                            +
                            +
                            +
                            + +
                            +
                            +

                            1 · CM · Lire le cours

                            + +
                            +

                            Adressage IPv4 et sous-réseaux · cours complet

                            +

                            8 parties illustrées : bits, masque, ET logique, diffusion, découpage, adresses privées. Chronométré, à lire en entier pour débloquer le QCM de lecture.

                            +
                            +
                            ⏱ Lecture chronométréeLire le CM →
                            +                             +
                            + +
                            +
                            +

                            2 · QCM · Valider les notions

                            +

                            5 questions · correction expliquée

                            +
                            +
                            + +
                            + Question 1 +

                            Combien d’adresses d’hôtes utilisables dans un réseau /27 ?

                            +
                            + + + + +
                            + +
                            +
                            + Question 2 +

                            Quelle est l’adresse réseau de 10.0.3.200/22 ?

                            +
                            + + + + +
                            + +
                            +
                            + Question 3 +

                            Quel masque correspond à /26 ?

                            +
                            + + + + +
                            + +
                            +
                            + Question 4 +

                            192.168.1.130/25 et 192.168.1.100/25 sont-ils dans le même réseau ?

                            +
                            + + +
                            + +
                            +
                            + Question 5 +

                            Quelle commande affiche les adresses IP sous Debian ?

                            +
                            + + + + +
                            + +
                            +
                            + + + +
                            +
                            +
                            + +
                            +

                            3 · TD · S’exercer optionnel

                            +
                              +
                            1. +

                              Exercice 1

                              +

                              Pour 172.16.5.130/25, donnez l’adresse réseau, la diffusion et le nombre d’hôtes.

                              +
                              + Voir la correction expliquée +

                              Un /25 coupe le dernier octet en blocs de 128. 130 est dans le bloc 128–255. Réseau : 172.16.5.128. Diffusion : 172.16.5.255. Hôtes : 2⁷ − 2 = 126.

                              +
                              +
                              2. +
                            2. +

                              Exercice 2

                              +

                              Découpez 192.168.1.0/24 en 4 sous-réseaux de même taille.

                              +
                              + Voir la correction expliquée +

                              4 sous-réseaux = 2 bits empruntés, donc /26. Sous-réseaux : 192.168.1.0, .64, .128 et .192, avec 62 hôtes chacun.

                              +
                              +
                              3. +
                            3. +

                              Exercice 3

                              +

                              Le service comptabilité a 50 postes. Quel est le plus petit sous-réseau qui convient ?

                              +
                              + Voir la correction expliquée +

                              Il faut 2ʰ − 2 ≥ 50. Avec h = 6 : 64 − 2 = 62. On garde 6 bits d’hôte, soit un /26 (255.255.255.192). Un /27 ne donnerait que 30 hôtes.

                              +
                              +
                              4. +
                            +
                            + +
                            +

                            4 · TP · Pratiquer sur VM

                            +
                            +
                            +

                            Deux VM, un routeur

                            +
                              +
                            1. 1. Placez deux VM dans 192.168.10.0/26.
                              2. +
                            2. 2. Vérifiez qu’elles se joignent avec ping.
                              3. +
                            3. 3. Passez la seconde en 192.168.10.70/26.
                              4. +
                            4. 4. Constatez l’échec, puis ajoutez une route.
                              5. +
                            +

                            4 étapes vérifiées automatiquement · 45 min

                            + Lancer le TP +
                            +
                            +

                            eleve@vm1:~$ sudo ip addr add 192.168.10.10/26 dev ens3

                            +

                            eleve@vm1:~$ ip -br addr

                            +

                            ens3 UP 192.168.10.10/26

                            +

                            eleve@vm1:~$ ping -c 1 192.168.10.11

                            +

                            1 packets transmitted, 1 received

                            +

                            ✓ Étape 2 validée

                            +
                            +
                            +
                            + +
                            +

                            5 · EXAMEN · Quand le prof le décide

                            +
                            +

                            Le prof compose son sujet dans la banque de questions, le programme pour la classe, et suit l’épreuve en direct : sorties d’onglet, copier-coller bloqué, remise automatique.

                            +
                            Voir le mode examenBanque de sujets (profs)
                            +
                            +
                            + + + + + + +
                            +
                            + +@endsection diff --git a/design/resources/views/devoirs.blade.php b/design/resources/views/devoirs.blade.php new file mode 100644 index 0000000..578c58e --- /dev/null +++ b/design/resources/views/devoirs.blade.php @@ -0,0 +1,65 @@ +@extends('layouts.vitrine') + +@section('titre', 'Devoirs maison') + +@section('contenu') +
                            +
                            +

                            Espace enseignant · Devoirs

                            Pour les profs

                            +

                            Devoirs maison

                            Donnez un TP, un QCM, un TD ou un exercice de code à faire à la maison. Programmez l’ouverture et la date limite, suivez les rendus, corrigez et notez.

                            + + Nouveau devoir +
                            +
                            +
                            +
                            +

                            Devoirs programmés

                            +
                              +
                            • TP sur VMBTS SIO 1 · A⏰ Ven. 3 oct. · 23:59

                              TP Routage inter-VLAN

                              18 / 24 rendus · 2 en retard

                              • +
                            • QCMBTS SIO 1 · A⏰ Lun. 6 oct. · 08:00

                              QCM Adressage IPv4 · 2ᵉ essai

                              11 / 24 rendus

                              • +
                            • IDE2nde NSI · B⏰ Mer. 8 oct. · 18:00

                              Défi Python : somme d’une liste

                              5 / 28 rendus

                              • +
                            • TDBTS SIO 1 · A⏰ Clos · 29 sept.

                              TD Découpage en sous-réseaux

                              24 / 24 rendus · 3 en retard

                              • +
                            +
                            +
                            +
                            +

                            Rendus · TD Découpage en sous-réseaux

                            + + + + + + +
                            ÉlèveÉtatNote
                            Léa M.30 sept. · 17:42Rendu18/20
                            Yanis B.1 oct. · 22:10Rendu14/20
                            Nora Kaci2 oct. · 09:05En retard—
                            Sami L.—Non rendu—
                            Chloé P.29 sept. · 20:31Rendu19/20
                            +
                            +
                            +
                            +
                            +
                            +
                            +

                            Programmer un devoir

                            +
                            + + + + + +
                            Options + + + +
                            +
                            Choisir dans la bibliothèque
                            +
                            +
                            +
                            + +@endsection diff --git a/design/resources/views/eleve.blade.php b/design/resources/views/eleve.blade.php new file mode 100644 index 0000000..afec307 --- /dev/null +++ b/design/resources/views/eleve.blade.php @@ -0,0 +1,65 @@ +@extends('layouts.vitrine') + +@section('titre', 'Espace élève') + +@section('contenu') +
                            + +
                            +
                            +

                            Espace élève · lea.m.sio1-a

                            +

                            Pour les élèves

                            +

                            Salut Léa.

                            +

                            BTS SIO 1 · Groupe A · Bloc 2

                            +
                            + Reprendre mon TP +
                            +
                            +
                            +
                            +

                            À faire

                            + +
                            + +
                            +@endsection diff --git a/design/resources/views/espace-eleve.blade.php b/design/resources/views/espace-eleve.blade.php new file mode 100644 index 0000000..e533953 --- /dev/null +++ b/design/resources/views/espace-eleve.blade.php @@ -0,0 +1,169 @@ + + + + + + Mon espace élève · Syllabus + + + + + + + + + + + + + +
                            + +
                            + +
                            +
                            +
                            + +
                            +
                            +

                            Mon espace élève

                            Pour les élèves

                            +

                            Bonjour Sarah !

                            Mardi 29 septembre · 2 devoirs cette semaine · 1 examen dans 9 jours

                            + Reprendre le lab VLAN · étape 6 +
                            +
                              +

                            • Moyenne QCM

                              16,0

                              +1,2 sur 4 semaines

                            • Labs réussis

                              11/14

                              dont 3 sans indice

                            • Devoirs à rendre

                              2

                              le prochain vendredi

                            • Série

                              6 j

                              d’entraînement d’affilée

                              • +
                            +
                            +
                            +

                            Septembre – octobre 2026

                            +

                            Lun

                            Mar

                            Mer

                            Jeu

                            Ven

                            Sam

                            Dim

                            +
                            +
                            ExamenDevoirQuizCours / TP
                            +
                            +
                            +

                            Au programme

                            mardi 29/09

                            +
                              +
                              +
                              +
                              +
                              +

                              Mes devoirs

                              2 à rendre
                              +

                              • DM 3 · Plan d’adressage

                                Réseaux · M. Belkacemi · ven. 03/10 · 23 h 59

                                À rendre
                                60 %

                              • TP maison · Scripts Bash

                                Linux · Mme Roche · lun. 06/10 · 18 h

                                À rendre
                                20 %

                              • QCM · Lecture CM VLAN

                                Réseaux · hier

                                Rendu · 17/20
                                100 %
                              +
                              +
                              +

                              Examens à venir

                              +
                              • J-9

                                E6 blanc SISR

                                Administration systèmes et réseaux · jeu. 08/10 · 8 h

                                Réviser
                              • J-14

                                Contrôle · Adressage IPv4

                                Réseaux · 1 h · mar. 13/10 · 10 h

                                Réviser
                              • —

                                QCM flash · Commandes Linux

                                Début d’heure · 5 min · chaque lundi

                                Réviser
                              +

                              Pendant un examen, reste sur la page : les changements d’onglet et de fenêtre sont signalés au prof.

                              +
                              +
                              +
                              +

                              S’entraîner

                              +
                              +
                                +
                                +
                                +

                                Ma progression par compétence

                                référentiel BTS SIO

                                +
                                • Installer et configurer un poste85 %
                                • Adressage IPv4 et sous-réseaux72 %
                                • VLAN et commutation64 %
                                • Scripts Bash48 %
                                • Sécurité des accès55 %
                                • Services réseau (DHCP, DNS)30 %
                                +
                                +
                                +
                                +
                                + + +
                                + + + + + + diff --git a/design/resources/views/espace-etablissement.blade.php b/design/resources/views/espace-etablissement.blade.php new file mode 100644 index 0000000..f14c9fa --- /dev/null +++ b/design/resources/views/espace-etablissement.blade.php @@ -0,0 +1,75 @@ + + + + + + Espace établissement · Syllabus + + + + + + + + + + + + + +
                                + +
                                + +
                                +

                                Gestion administrative

                                Pour les profs

                                +

                                Espace établissement

                                Abonnement, licences, documents comptables et contrats. Accès réservé à l’intendance et à la direction.

                                • Formule Établissement

                                  20 classes

                                  renouvelable chaque année

                                • Période

                                  01/09 → 31/08

                                  renouvellement le 01/07/2027

                                • Licences

                                  118 / 120

                                  2 disponibles

                                • Heures de VM

                                  2 940 h

                                  sur 9 120 h incluses

                                +

                                Licences

                                118 actives · 2 libres
                                TitulaireClasse / rôleDébutFinStatut
                                Martin LéaBTS SIO 1 A01/09/202630/06/2027Active
                                Kaci InèsBTS SIO 1 A01/09/202630/06/2027Active
                                Petit HugoBTS SIO 2 B01/09/202515/10/2026Fin programmée
                                Roche AnneEnseignante01/09/2026—Active
                                Leroy TomBTS SIO 1 B01/09/202629/09/2026Retirée

                                Import CSV : colonnes nom;prenom;email;classe;date_fin. Une licence se libère automatiquement à la date de fin ; les données de l’étudiant sont supprimées 12 mois après, sauf export demandé.

                                +
                                +

                                Documents comptables

                                DocumentN° engagementHTTTCChorus Pro
                                Facture F-2026-0412EJ 2026-01872 400,00 €2 880,00 €Déposée
                                Bon de commande BC-2026-031EJ 2026-01872 400,00 €2 880,00 €Validé
                                Devis D-2026-118—2 400,00 €2 880,00 €Accepté
                                Facture F-2025-0298EJ 2025-01421 800,00 €2 160,00 €Payée

                                Fournisseur : Syllabus SAS · SIRET 000 000 000 00000 · TVA FR00000000000 · IBAN FR76 0000 0000 0000 0000 0000 000

                                +

                                Contrats et conventions

                                • Conditions générales de vente

                                  v3 · 01/09/2026 · Acceptées le 03/09/2026

                                • Contrat de service établissement

                                  Formule Établissement · Signé le 03/09/2026

                                • Accord de sous-traitance RGPD (art. 28)

                                  DPA v2 · Signé le 03/09/2026

                                • Fiche fournisseur

                                  SIRET, RIB, contacts · À jour

                                • Modèle de bon de commande

                                  Format administration · Modèle

                                +
                                +
                                +

                                Consommation

                                Heures de VM2 940 / 9 120 h
                                Stockage41 / 200 Go
                                +

                                Paramètres de l’établissement

                                Configurer le SSO et l’API →
                                +
                                +
                                + + + + + + diff --git a/design/resources/views/etablissements.blade.php b/design/resources/views/etablissements.blade.php new file mode 100644 index 0000000..b508da9 --- /dev/null +++ b/design/resources/views/etablissements.blade.php @@ -0,0 +1,14 @@ +@extends('layouts.vitrine') + +@section('titre', 'Établissements') + +@section('contenu') +

                                Pour les établissements

                                Un projet par établissement. Un réseau par classe.

                                Chaque établissement a son espace isolé sur notre cloud hébergé en France, à Paris. Chaque classe a son propre réseau, sans IP publique.

                                Demander un devis

                                Réponse sous 48 h · bon de commande et Chorus Pro

                                Chacun son rôle.

                                • Administrateur

                                  Gère l’établissement

                                  Crée les classes, gère les enseignants et les quotas.

                                • Enseignant

                                  Anime la séance

                                  Réserve une séance, suit la classe en direct, prend la main sur une console.

                                • Élève

                                  Travaille

                                  Se connecte avec sa fiche, lance le lab, lève la main s’il bloque.

                                • Formateur

                                  Forme des adultes

                                  Anime des sessions en titre professionnel.

                                Ce que votre intendance et votre DSI vérifient.

                                • Licences, devis, factures

                                  Ajout et retrait d’élèves, bons de commande, factures déposées sur Chorus Pro, conventions.

                                  Espace établissement →

                                • Intégration et sécurité

                                  Hébergement en France, RGPD, prérequis réseau, authentification unique.

                                  Fiche technique →

                                • Une bibliothèque à dupliquer

                                  Des séquences reliées aux référentiels : cours, TD, quiz et lab. Les quiz s’exportent en GIFT et Moodle XML.

                                  Voir la bibliothèque →

                                Équiper votre établissement.

                                Dites-nous combien de classes et quelles formations. On vous répond avec une proposition.

                                +@csrf + + + + +
                                +
                                +@endsection diff --git a/design/resources/views/examen.blade.php b/design/resources/views/examen.blade.php new file mode 100644 index 0000000..64c33cc --- /dev/null +++ b/design/resources/views/examen.blade.php @@ -0,0 +1,116 @@ + + + + + + Mode examen · Syllabus + + + @vite(['resources/css/app.css', 'resources/js/app.js']) + + + + + +
                                +
                                + MODE EXAMEN +

                                Adressage et VLAN · E6 blanc SISR · Léa M.

                                +

                                Temps restant59:59

                                +
                                +
                                +
                                +
                                  +
                                • ■ Indices désactivés
                                • ■ Copier-coller bloqué
                                • ■ Sortie d’onglet signalée à l’enseignant
                                • ■ VM sans accès Internet
                                • Incidents signalés : 0
                                  • +
                                +
                                +
                                + +
                                +
                                + Question 5 · 1 point +

                                Un service de 50 postes doit avoir son propre sous-réseau. Quel masque choisissez-vous ?

                                +
                                + + + + +
                                +
                                + ← Précédente + + Suivante → +
                                +
                                +
                                +
                                +

                                Partie TP · commutateur-sw1 · console 1

                                + vérification à la remise +
                                +
                                +

                                Créez le VLAN 20 « compta » et placez-y l’interface eth2.

                                +

                                root@sw1:~# ip link add link eth0 name eth0.20 type vlan id 20

                                +

                                root@sw1:~#

                                +
                                +
                                +
                                + +

                                La copie est rendue automatiquement à la fin du temps.

                                +
                                +
                                +
                                + + + diff --git a/design/resources/views/export-ent.blade.php b/design/resources/views/export-ent.blade.php new file mode 100644 index 0000000..c5f5233 --- /dev/null +++ b/design/resources/views/export-ent.blade.php @@ -0,0 +1,72 @@ + + + + + + Export Pronote et ENT · Syllabus + + + + + + + + + + + + + +
                                + +
                                + +
                                +

                                Exports

                                Pour les profs

                                +

                                Export vers Pronote et l’ENT

                                Vos notes, présences et appréciations, prêtes à charger dans votre logiciel de vie scolaire.

                                +

                                1 · Que voulez-vous exporter ?

                                +

                                2 · Format

                                +
                                +

                                3 · Aperçu du fichier

                                notes-bts-sio-1a-dm3.csv
                                NomPrénomClasseDevoirNoteSurCoef.Date
                                MartinLéaBTS SIO 1 ADM 31120103/10/2026
                                NguyenSarahBTS SIO 1 ADM 31620103/10/2026
                                KaciInèsBTS SIO 1 ADM 31920103/10/2026
                                PetitHugoBTS SIO 1 ADM 3ABS20103/10/2026

                                16 lignes · les devoirs non rendus sont marqués ABS · encodage UTF-8

                                +

                                Charger le fichier dans votre logiciel

                                1. 1Téléchargez le fichier CSV ci-dessus.
                                2. 2Dans votre logiciel de vie scolaire, ouvrez l’import de notes du service concerné.
                                3. 3Choisissez le fichier, vérifiez la correspondance des colonnes, validez.

                                Les menus exacts dépendent de votre logiciel et de ses réglages. Un tutoriel vidéo est disponible dans l’aide.

                                +
                                +
                                + + + + + + diff --git a/design/resources/views/facturation.blade.php b/design/resources/views/facturation.blade.php new file mode 100644 index 0000000..3303a3e --- /dev/null +++ b/design/resources/views/facturation.blade.php @@ -0,0 +1,68 @@ + + + + + + Mon abonnement · Syllabus + + + + + + + + + + + + + +
                                + +
                                + +
                                +

                                Facturation

                                Pour les profs

                                +

                                Mon abonnement

                                M. Belkacemi · BTS SIO 1 A et B

                                Changer d’offre

                                Offre actuelle

                                Enseignant · mensuel

                                Actif

                                29,00 € HT · 34,80 € TTC / mois

                                Prochain paiement le 29/10/2026 · 2 classes · 33/35 élèves

                                VM ce mois : 270 h sur 495 h incluses

                                +

                                Moyen de paiement

                                VISA

                                •••• 4242

                                expire 08/28

                                Vous pouvez aussi passer au prélèvement SEPA ou au bon de commande de votre établissement.

                                +

                                Factures

                                N°DateMontant TTCStatut
                                F-2026-10429/09/202634,80 €PayéePDF
                                F-2026-08129/08/202634,80 €PayéePDF
                                F-2026-06029/07/202634,80 €PayéePDF
                                +
                                + + + + + + diff --git a/design/resources/views/fiche-eleve.blade.php b/design/resources/views/fiche-eleve.blade.php new file mode 100644 index 0000000..55bf658 --- /dev/null +++ b/design/resources/views/fiche-eleve.blade.php @@ -0,0 +1,74 @@ + + + + + + Fiche élève · Syllabus + + + + + + + + + + + + + +
                                + +
                                + +
                                +

                                Fiche élève

                                Pour les profs

                                +

                                Léa M.

                                Accès journalisé · visible par l’équipe pédagogique et la vie scolaire

                                Écrire

                                • Moyenne QCM

                                  7,5

                                  −4,5 en 4 semaines

                                • Labs réussis

                                  5/14

                                  3,1 indices par lab

                                • DM rendus

                                  3/3

                                  moyenne 11/20

                                • Temps de lecture

                                  −62 %

                                  vs moyenne de la classe

                                +
                                +

                                Compétences du référentiel

                                BTS SIO · bloc 1

                                • Installer et configurer un poste

                                  80 %

                                • Adressage IPv4

                                  55 %

                                • VLAN et commutation

                                  40 %

                                • Scripts Bash

                                  35 %

                                • Sécurité des accès

                                  60 %
                                +

                                Observations

                                1. Difficulté21/09 · M. Belkacemi

                                  Participe mais se décourage vite.

                                2. Progrès14/09 · Mme Roche

                                  Très bon travail en binôme sur le câblage.

                                3. CPE27/09 · Mme Diallo

                                  Entretien prévu le 02/10 avec la famille.

                                +
                                +

                                Historique

                                1. 29/09LabLab VLAN · étape 2 · 3 indices utilisés
                                2. 28/09ExamenE6 blanc SISR · 9/20 · 1 sortie (6 s)
                                3. 26/09QCMLecture CM VLAN · 7/20 · cours lu en 4 min
                                4. 24/09DMDM 2 · Adressage · rendu · 11/20
                                5. 22/09Quiz flashCommandes Linux · 3/5
                                6. 21/09Observation« Participe mais se décourage vite. » · M. Belkacemi
                                +
                                + + + + + + diff --git a/design/resources/views/fonctionnalites.blade.php b/design/resources/views/fonctionnalites.blade.php new file mode 100644 index 0000000..e5553c3 --- /dev/null +++ b/design/resources/views/fonctionnalites.blade.php @@ -0,0 +1,44 @@ +@extends('layouts.vitrine') + +@section('titre', 'Fonctionnalités') + +@section('contenu') +

                                Fonctionnalités

                                Tout ce qu’il faut pour une classe, en ligne.

                                Cours, TP sur machine Linux, éditeur de code, évaluations et suivi des élèves, dans un seul site. Choisissez un outil pour voir à quoi il sert, puis essayez sa démo.

                                Créer une classe gratuite

                                Sans carte bancaire

                                + +
                                +
                                +

                                Pourquoi un tel outil ?

                                +

                                Suivre chaque élève, même dans une classe de 35.

                                +
                                +

                                Avec des classes entières et une charge de travail déjà lourde, suivre chaque élève individuellement devient presque impossible. Un élève en difficulté décroche vite, souvent sans bruit, et le prof, pris par ses nombreuses classes, s’en rend compte trop tard.

                                +

                                Syllabus surveille tout, sans être intrusif. Le QCM de début d’heure, celui qui suit la lecture du cours, les TP, les devoirs et exercices maison : chaque trace remonte au prof. Il voit rapidement qui accompagner plus régulièrement, qui faire passer au premier rang, à qui demander de réexpliquer une notion.

                                +

                                C’est une supervision bienveillante et naturelle, qui ne remplace pas le regard du prof mais l’aide à savoir où concentrer ses efforts. Tout remonte dans le cockpit prof, d’où il pilote et supervise examens, devoirs maison, quiz et labs.

                                +

                                Dans les labs, chaque étape a ses indices, qui se débloquent après un certain nombre de tentatives. Ils ne remplacent pas l’aide d’un prof (ni une recherche Google 😉), mais ils poussent l’élève à réfléchir un tout petit peu plus avant de vous appeler. Et souvent, ils vous évitent les questions triviales.

                                +

                                Et dans l’autre sens, l’élève en excellence peut s’épanouir. Il aborde des notions plus avancées, avec une difficulté plus forte, sans prendre d’avance sur le programme : il explore des notions connexes qui développent sa culture générale.

                                +

                                Tout cela dans un unique but : faciliter votre travail.

                                +
                                +
                                +
                                +
                                + Alerte douce +

                                Un élève décroche

                                +
                                • 3 QCM de début d’heure sous la moyenne
                                • Cours lu en 2 minutes au lieu de 15
                                • Devoir maison non rendu
                                +

                                → Premier rang, notion à réexpliquer, suivi plus régulier.

                                +
                                +
                                + Excellence +

                                Un élève s’ennuie

                                +
                                • Tous les TP réussis du premier coup
                                • 20/20 au QCM de lecture
                                • Finit avant tout le monde
                                +

                                → Défis plus durs sur des notions connexes, sans prendre d’avance sur le programme.

                                +
                                + +
                                + Labs +

                                Un indice se débloque

                                +
                                1. Tentative 1 · échec
                                2. Tentative 3 · 💡 Indice 1 : regarde la commande ip addr
                                3. Tentative 5 · 💡 Indice 2 : le masque /26 donne 62 hôtes
                                +

                                → L’élève cherche d’abord. Vous gardez votre temps pour les vraies questions.

                                +
                                +
                                +
                                +

                                Piloter

                                Suivre la classe, l’établissement et le territoire.

                                −40 dB

                                Vous devenez le roi du silence grâce à la fonction « Lever la main ».

                                Vos élèves n’auront plus que le droit de tousser ou de respirer !

                                Tous les cours se téléchargent en PDF.

                                CM complet, TD prêt à imprimer avec ses cases à remplir, correction à part, QCM papier.

                                +@endsection diff --git a/design/resources/views/generateur.blade.php b/design/resources/views/generateur.blade.php new file mode 100644 index 0000000..f30e240 --- /dev/null +++ b/design/resources/views/generateur.blade.php @@ -0,0 +1,105 @@ +@extends('layouts.vitrine') + +@section('titre', 'Générateur de TD') + +@section('contenu') +
                                +
                                +

                                Générateur de TD

                                +

                                Pour les profs

                                +

                                Des exercices à l’infini, corrigés tout de suite.

                                +

                                Chaque clic tire un nouvel exercice au hasard. La correction montre le calcul, étape par étape. En mode examen : 10 questions, chronométrées, notées sur 20.

                                +
                                +
                                +
                                + +
                                + +
                                +

                                +

                                +
                                +
                                + +
                                + +
                                +
                                + +@endsection diff --git a/design/resources/views/ide.blade.php b/design/resources/views/ide.blade.php new file mode 100644 index 0000000..225d689 --- /dev/null +++ b/design/resources/views/ide.blade.php @@ -0,0 +1,262 @@ + + + + + + IDE en ligne · Syllabus + + + @vite(['resources/css/app.css', 'resources/js/app.js']) + + + + + + + + + + + + + + + + + + + + + +
                                + +
                                + +
                                +
                                +
                                +
                                +

                                IDE en ligne

                                +

                                Pour les élèves

                                +

                                Coder, exécuter, vérifier. Dans le navigateur.

                                +

                                Python, SQL, HTML/CSS/JavaScript et Linux. Le code s’exécute vraiment, les tests disent tout de suite si c’est juste. Ton code est gardé sur cet appareil.

                                +
                                +
                                +
                                +
                                + +
                                +
                                + + main.py + + + + + +
                                +
                                +
                                +
                                + + + +
                                + 
                                Clique sur ▶ Exécuter pour lancer ton code.
                                + + +
                                +
                                + +
                                + +
                                + + + + + + diff --git a/design/resources/views/integration.blade.php b/design/resources/views/integration.blade.php new file mode 100644 index 0000000..8b244f1 --- /dev/null +++ b/design/resources/views/integration.blade.php @@ -0,0 +1,80 @@ + + + + + + Intégration et sécurité · Syllabus + + + + + + + + + + + + + +
                                + +
                                + +
                                +

                                Documentation technique

                                Pour les profs

                                +

                                Intégration et sécurité

                                Ce qu’il faut savoir pour raccorder Syllabus au système d’information de l’établissement.

                                +
                                +

                                Authentification unique (SSO)

                                Protocoles pris en charge : SAML 2.0 (Shibboleth, ADFS, fédération Renater), OpenID Connect (Entra ID, Google Workspace, Keycloak), CAS (ENT). EduConnect pour les élèves du secondaire via l’ENT de l’académie.

                                ParamètreValeur
                                Entity IDhttps://auth.syllabus.fr/saml/metadata
                                ACS URLhttps://auth.syllabus.fr/saml/acs
                                Attributs requismail, givenName, sn, eduPersonAffiliation
                                Redirect URI OIDChttps://auth.syllabus.fr/oidc/callback
                                +

                                Création et suppression des comptes

                                • Import CSV

                                  Classes et étudiants, depuis l’export de votre logiciel de scolarité

                                • Juste à temps (JIT)

                                  Compte créé à la première connexion SSO, rattaché selon l’affiliation

                                • SCIM 2.0

                                  Synchronisation automatique depuis Entra ID ou Keycloak

                                • LDAP / Active Directory

                                  Synchronisation planifiée des groupes en lecture seule

                                • Suppression

                                  Compte désactivé à la fin de licence, données effacées après 12 mois

                                +
                                +
                                +

                                API REST

                                API REST en JSON, documentée au format OpenAPI 3.1. Authentification par jeton porteur, une clé par établissement avec des droits limités (lecture des notes, gestion des comptes). Limite : 600 requêtes par minute. Webhooks signés (HMAC-SHA256) pour les événements devoir rendu, examen terminé, alerte ouverte.

                                curl -H "Authorization: Bearer $PAILLASSE_TOKEN" \
+  https://api.syllabus.fr/v1/classes/bts-sio-1a/notes?format=csv
                                +

                                Prérequis réseau et postes

                                À autoriserProtocoleUsage
                                syllabus.fr, *.syllabus.frHTTPS 443site, cours, API
                                vm.syllabus.frWSS 443 (WebSocket)terminal et IDE
                                auth.syllabus.frHTTPS 443connexion SSO

                                Aucun port autre que 443, aucun logiciel à installer. Le proxy doit laisser passer les connexions WebSocket (en-tête Upgrade) et ne pas couper les sessions inactives avant 10 minutes. Navigateurs : Firefox, Chrome, Edge et Safari des deux dernières versions majeures. Débit : environ 50 kbit/s par terminal, 300 kbit/s par IDE.

                                +
                                +
                                +

                                Isolation des environnements

                                • ■Une VM KVM dédiée par étudiant et par séance, jamais partagée
                                • ■Trafic entre VM d’étudiants bloqué, y compris dans une même classe
                                • ■Sortie Internet filtrée : fermée par défaut, liste blanche de dépôts (Debian, PyPI, npm) activable par le prof
                                • ■VM détruite en fin de séance ; seul le dossier de travail est conservé, chiffré
                                • ■Quotas CPU, mémoire et disque par VM ; arrêt automatique après 30 min d’inactivité
                                • ■Commandes et connexions journalisées, consultables par le prof et la DSI
                                +

                                Conformité et continuité

                                SujetEngagement
                                HébergementScaleway, datacenters de Paris, France
                                RGPDAccord de sous-traitance art. 28, registre des traitements fourni
                                ConservationTraces d’activité 12 mois, notes jusqu’à fin de scolarité + 1 an
                                SauvegardesQuotidiennes, chiffrées, conservées 30 jours, second site en France
                                Disponibilité99,5 % par mois en période scolaire, maintenance hors cours
                                ChiffrementTLS 1.2+ en transit, AES-256 au repos
                                DPOdpo@syllabus.fr
                                Mentions légales →
                                +
                                +
                                +
                                + + + + + + diff --git a/design/resources/views/labs/essai.blade.php b/design/resources/views/labs/essai.blade.php new file mode 100644 index 0000000..2806986 --- /dev/null +++ b/design/resources/views/labs/essai.blade.php @@ -0,0 +1,83 @@ +@extends('layouts.vitrine') + +@section('titre', 'Lab d’essai · Premiers pas dans le shell') + +@push('head') + + + + +@endpush + +@section('contenu') +
                                +
                                + ← Labs +

                                Pour les élèves

                                +

                                Premiers pas dans le shell

                                + Lab d’essai +
                                +
                                +
                                +
                                +

                                Consignes

                                +
                                  +
                                1. 1Affiche le dossier courant avec pwd.
                                  2. +
                                2. 2Liste son contenu avec ls -la.
                                  3. +
                                3. 3Crée un dossier projets et entre dedans.
                                  4. +
                                4. 4Crée un fichier notes.txt.
                                  5. +
                                5. 5Écris ton prénom dedans avec echo.
                                  6. +
                                +
                                +
                                +
                                + + debian-lab · console 1 · xterm.js +
                                +
                                +
                                + +
                                + +@endsection diff --git a/design/resources/views/labs/index.blade.php b/design/resources/views/labs/index.blade.php new file mode 100644 index 0000000..77d1abe --- /dev/null +++ b/design/resources/views/labs/index.blade.php @@ -0,0 +1,86 @@ +@extends('layouts.vitrine') + +@section('titre', 'Labs') + +@section('contenu') +
                                + +
                                +

                                Catalogue

                                +

                                Pour les élèves

                                +

                                Des labs qui se corrigent tout seuls.

                                +

                                Chaque lab est une vraie VM Debian, ou plusieurs reliées en réseau. L’élève suit les consignes, la vérification valide chaque étape.

                                +
                                +
                                +
                                +
                                +

                                Filtrer

                                + + + + +
                                +
                                  +
                                • + Linux + 01 +
                                  +

                                  Lycée NSI

                                  +

                                  Premiers pas dans le shell

                                  +

                                  Se déplacer, créer des dossiers, lire des fichiers.

                                  + Lancer le lab +
                                  +
                                  • +
                                • + Linux + 02 +
                                  +

                                  BTS SIO · SISR et SLAM

                                  +

                                  Utilisateurs et droits

                                  +

                                  Créer des comptes, régler chmod et chown, tester les accès.

                                  + Lancer le lab +
                                  +
                                  • +
                                • + Réseau + 03 +
                                  +

                                  BTS CIEL

                                  +

                                  Adressage IPv4

                                  +

                                  Configurer deux VM pour qu’elles se voient, puis diagnostiquer.

                                  + Lancer le lab +
                                  +
                                  • +
                                • + Réseau + 04 +
                                  +

                                  BUT · Licence pro

                                  +

                                  Routage statique avec Kathará

                                  +

                                  Trois routeurs en conteneurs, une topologie à faire communiquer.

                                  + Lancer le lab +
                                  +
                                  • +
                                • + Services + 05 +
                                  +

                                  BTS SIO · SISR et SLAM

                                  +

                                  Serveur web Apache

                                  +

                                  Installer, publier une page, lire les journaux.

                                  + Lancer le lab +
                                  +
                                  • +
                                • + Services + 06 +
                                  +

                                  Master · École d’ingé

                                  +

                                  Annuaire Samba AD

                                  +

                                  Monter un contrôleur de domaine et joindre un client.

                                  + Lancer le lab +
                                  +
                                  • +
                                +
                                +@endsection diff --git a/design/resources/views/labs/web.blade.php b/design/resources/views/labs/web.blade.php new file mode 100644 index 0000000..594405a --- /dev/null +++ b/design/resources/views/labs/web.blade.php @@ -0,0 +1,137 @@ + + + + + + Lab web · Syllabus + + + @vite(['resources/css/app.css', 'resources/js/app.js']) + + + + + + + + + +
                                + +
                                + +
                                +
                                +
                                + ← Labs +

                                Pour les élèves

                                +

                                Lab web · Mon premier serveur Apache

                                + SRV-1 · BTS SIO, BUT R&T, NSI +
                                +
                                +
                                + +
                                +
                                web-01 · 192.168.10.10 · xterm.js
                                +
                                +
                                +
                                +
                                + +

                                http://192.168.10.10/

                                +
                                + +
                                +
                                + +
                                + + + + + + diff --git a/design/resources/views/layouts/vitrine.blade.php b/design/resources/views/layouts/vitrine.blade.php new file mode 100644 index 0000000..0648936 --- /dev/null +++ b/design/resources/views/layouts/vitrine.blade.php @@ -0,0 +1,60 @@ + + + + + + @yield('titre') · Syllabus + + + @vite(['resources/css/app.css', 'resources/js/app.js']) + + @stack('head') + + + + +
                                + +
                                + +
                                + @yield('contenu') +
                                + + + + + diff --git a/design/resources/views/legal.blade.php b/design/resources/views/legal.blade.php new file mode 100644 index 0000000..2f2388f --- /dev/null +++ b/design/resources/views/legal.blade.php @@ -0,0 +1,70 @@ +@extends('layouts.vitrine') + +@section('titre', 'Informations légales') + +@section('contenu') +
                                +
                                +

                                Informations légales

                                +

                                Le cadre, en clair.

                                +

                                Dernière mise à jour : 29 septembre 2026

                                +
                                +
                                +
                                + +
                                + +
                                +

                                Mentions légales

                                +
                                +

                                Éditeur : Syllabus, édité par Adam Belkacemi, [à compléter] (forme juridique, capital, SIRET, adresse du siège).

                                +

                                Directeur de la publication : Adam Belkacemi. Contact : adam@belkacemi.me.

                                +

                                Hébergeur : Scaleway SAS, 8 rue de la Ville-l’Évêque, 75008 Paris. Les serveurs sont situés en France, à Paris.

                                +
                                + +
                                +

                                Conditions générales d’utilisation

                                +
                                +

                                1. Objet

                                Syllabus met à disposition des cours, des labs Linux et réseau sur machines virtuelles, des QCM et des outils de suivi pour l’enseignement.

                                +

                                2. Comptes

                                Les enseignants créent un compte avec leur e-mail professionnel. Les élèves se connectent avec l’identifiant et le code remis par leur enseignant. Chacun est responsable de la confidentialité de ses accès.

                                +

                                3. Accès gratuit

                                L’accès enseignant est gratuit et sans carte bancaire. Syllabus peut faire évoluer les fonctionnalités et les limites d’usage, en prévenant les utilisateurs.

                                +

                                4. Usage acceptable

                                Les VM servent uniquement à l’apprentissage. Sont interdits : le minage, les attaques vers des tiers, le contournement des quotas ou du mode examen. Le trafic sortant des VM est bloqué par défaut et l’activité est journalisée.

                                +

                                5. Mode examen

                                Pendant une épreuve, les changements d’onglet, sorties de fenêtre et sorties de souris sont enregistrés et transmis à l’enseignant. L’élève en est informé avant de commencer.

                                +

                                6. Contenus

                                Les conditions de réutilisation des contenus pédagogiques seront précisées ultérieurement. Les travaux des élèves leur appartiennent.

                                +

                                7. Disponibilité et responsabilité

                                Syllabus fait ses meilleurs efforts pour assurer la disponibilité du service, sans garantie d’absence d’interruption. [à compléter]

                                +

                                8. Droit applicable

                                Les présentes conditions sont soumises au droit français.

                                +
                                + +
                                +

                                Confidentialité et RGPD

                                +
                                +

                                Quand un établissement utilise Syllabus avec ses élèves, l’établissement est responsable du traitement et Syllabus agit comme sous-traitant. Pour les comptes enseignants créés directement, Syllabus est responsable du traitement.

                                +

                                Données collectées

                                +
                                • Élèves : nom, prénom, groupe. Aucun e-mail pour les mineurs.
                                • Enseignants : nom, e-mail professionnel, établissement.
                                • Activité pédagogique : étapes de TP, réponses aux QCM, temps passé, remarques des enseignants.
                                • Mode examen : événements de sortie de copie, uniquement pendant l’épreuve.
                                • Journaux techniques de sécurité.
                                +

                                Finalités et base légale

                                Fournir le service d’enseignement demandé par l’établissement (mission d’intérêt public de l’établissement) ou par l’enseignant (exécution du contrat).

                                +

                                Conservation

                                Les données d’une classe sont supprimées automatiquement 90 jours après son archivage de fin d’année.

                                +

                                Hébergement

                                Toutes les données sont hébergées en France, chez Scaleway. Elles ne quittent pas l’Union européenne. Aucune donnée n’est vendue ni utilisée à des fins publicitaires.

                                +

                                Vos droits

                                Accès, rectification, effacement, limitation, opposition et portabilité : écrivez à adam@belkacemi.me ou à votre établissement. Vous pouvez aussi adresser une réclamation à la CNIL (cnil.fr).

                                +

                                Délégué à la protection des données : [à compléter]

                                +
                                + +
                                +

                                Cookies

                                +
                                +

                                Syllabus n’utilise que des cookies strictement nécessaires : le cookie de session qui vous garde connecté, et le jeton de sécurité des formulaires. Aucun cookie publicitaire, aucun traceur tiers. Ils ne demandent donc pas de consentement.

                                +
                                + +
                                +

                                Accord de sous-traitance (article 28 du RGPD)

                                +
                                +

                                Pour chaque établissement, un accord de sous-traitance précise :

                                +
                                • l’objet, la durée et la nature des traitements ;
                                • les mesures de sécurité : chiffrement en transit, isolement des classes, sauvegardes chiffrées ;
                                • la confidentialité des personnes autorisées ;
                                • la liste des sous-traitants ultérieurs (hébergement : Scaleway SAS, France) ;
                                • l’assistance pour répondre aux demandes de droits ;
                                • la notification des violations de données ;
                                • la suppression ou la restitution des données en fin de contrat.
                                +

                                Demander l’accord pour votre établissement

                                +
                                +
                                +
                                +@endsection diff --git a/design/resources/views/maison.blade.php b/design/resources/views/maison.blade.php new file mode 100644 index 0000000..c6fa08c --- /dev/null +++ b/design/resources/views/maison.blade.php @@ -0,0 +1,29 @@ +@extends('layouts.vitrine') + +@section('titre', 'Ressources à la maison') + +@section('contenu') +
                                +
                                +

                                Pour les élèves

                                +

                                Pour les élèves

                                +

                                Envie d’aller plus loin à la maison ?

                                +

                                Sur Syllabus, tu retrouves tes cours, tes QCM, l’IDE et le générateur de TD depuis chez toi, sur ton PC ou ton téléphone. Et si tu en veux encore, voici des ressources gratuites, sérieuses et en grande partie en français.

                                +
                                Coder dans l’IDE →S’entraîner au générateur de TDRelire les cours
                                +
                                +
                                +
                                +

                                Ressources externes gratuites

                                +

                                Elles ne font pas partie de Syllabus. Certaines demandent de créer un compte : demande l’accord de tes parents si tu es mineur.

                                +
                                  +
                                  + + +@endsection diff --git a/design/resources/views/messagerie.blade.php b/design/resources/views/messagerie.blade.php new file mode 100644 index 0000000..00489d7 --- /dev/null +++ b/design/resources/views/messagerie.blade.php @@ -0,0 +1,67 @@ + + + + + + Messagerie · Syllabus + + + + + + + + + + + + + +
                                  + +
                                  + +
                                  +

                                  Messagerie

                                  Pour les profs

                                  +

                                  Yanis B.

                                  Élève · BTS SIO 1 A · lab VLAN en cours

                                  Fiche élève
                                  Échanges visibles par l’élève et son équipe pédagogique. Pas de messages entre élèves. Horaires de réponse conseillés : 8 h – 19 h.

                                  1. Bonjour Monsieur, je ne comprends pas l’étape 4 du lab VLAN, la commande ne marche pas.

                                    10:12

                                  2. J’ai déjà utilisé les 2 indices 😅

                                    10:14

                                  3. Bonjour Yanis. Regarde bien le nom de l’interface avec ip a : ce n’est pas eth0 sur cette VM.

                                    10:16

                                  +
                                  +
                                  + + + + + + diff --git a/design/resources/views/paiement-ok.blade.php b/design/resources/views/paiement-ok.blade.php new file mode 100644 index 0000000..8423032 --- /dev/null +++ b/design/resources/views/paiement-ok.blade.php @@ -0,0 +1,72 @@ + + + + + + Paiement confirmé · Syllabus + + + + + + + + + + + + + +
                                  + +
                                  + +
                                  +
                                  + +

                                  Pour les profs

                                  +

                                  Merci ! C’est activé.

                                  +

                                  Votre offre Enseignant est active. Le reçu et la facture sont envoyés par e-mail.

                                  +
                                  Offre
                                  Enseignant · mensuel
                                  Montant
                                  34,80 € TTC / mois
                                  Prochain paiement
                                  29/10/2026
                                  +
                                  Ouvrir mon cockpit →Gérer mon abonnement
                                  +

                                  Un coup de pouce en plus ? Parlez de Syllabus à votre établissement, ou écrivez vos remarques à adam@belkacemi.me.

                                  +
                                  + + + + + + diff --git a/design/resources/views/paiement.blade.php b/design/resources/views/paiement.blade.php new file mode 100644 index 0000000..25bc51b --- /dev/null +++ b/design/resources/views/paiement.blade.php @@ -0,0 +1,103 @@ + + + + + + Paiement · Syllabus + + + + + + + + + + + + + +
                                  + +
                                  + +
                                  +
                                  ← Retour aux tarifs

                                  Pour les profs

                                  +

                                  Passer à l’offre payante

                                  Les cours restent gratuits pour toujours. Vous payez les VM, le suivi et les outils prof.

                                  +
                                  +
                                  +

                                  1 · Votre offre

                                  +
                                  + +
                                  +

                                  2 · Facturation

                                  +
                                  +
                                  +

                                  3 · Moyen de paiement

                                  +
                                  +

                                  Le numéro de carte est saisi dans un champ sécurisé fourni par Stripe. Syllabus ne le voit ni ne le stocke.

                                  + + +
                                  +
                                  + +
                                  + +
                                  + + + + + + diff --git a/design/resources/views/quiz/eleve.blade.php b/design/resources/views/quiz/eleve.blade.php new file mode 100644 index 0000000..8e994d9 --- /dev/null +++ b/design/resources/views/quiz/eleve.blade.php @@ -0,0 +1,63 @@ + + + + + + Quiz flash · Syllabus + + + @vite(['resources/css/app.css', 'resources/js/app.js']) + + + + + +
                                  +

                                  Vue élève · téléphone ou PC

                                  +
                                  +

                                  Pour les élèves

                                  +

                                  Quiz flash

                                  +
                                  + + + + +
                                  +
                                  + + + +
                                  + + + diff --git a/design/resources/views/quiz/projection.blade.php b/design/resources/views/quiz/projection.blade.php new file mode 100644 index 0000000..6b7f489 --- /dev/null +++ b/design/resources/views/quiz/projection.blade.php @@ -0,0 +1,162 @@ + + + + + + Quiz flash · projection · Syllabus + + + @vite(['resources/css/app.css', 'resources/js/app.js']) + + + + + +
                                  +
                                  + QUIZ FLASH +

                                  BTS SIO 1 · Groupe A · ls, chmod, grep, ip, ping

                                  +

                                  0 / 24 connectés

                                  + +
                                  + +
                                  +
                                  +

                                  Sur ton téléphone ou ton PC, va sur

                                  +

                                  syllabus.fr/quiz

                                  +

                                  et entre le code

                                  +

                                  K7Q4

                                  +

                                  Connecte-toi avec ton identifiant Syllabus.

                                  +
                                  +
                                  +

                                  Présences

                                  0 / 24

                                  +
                                    +
                                  • Léa M.
                                    • +
                                  • Yanis B.
                                    • +
                                  • Nora Kaci
                                    • +
                                  • Tom R.
                                    • +
                                  • Inès D.
                                    • +
                                  • Sami L.
                                    • +
                                  • Chloé P.
                                    • +
                                  • Adam F.
                                    • +
                                  • Maël G.
                                    • +
                                  • Jade T.
                                    • +
                                  • Hugo M.
                                    • +
                                  • Lina G.
                                    • +
                                  • Rayan F.
                                    • +
                                  • Emma B.
                                    • +
                                  • Noah H.
                                    • +
                                  • Sarah R.
                                    • +
                                  • Ilyes M.
                                    • +
                                  • Manon L.
                                    • +
                                  • Lucas M.
                                    • +
                                  • Zoé D.
                                    • +
                                  • Enzo L.
                                    • +
                                  • Camille B.
                                    • +
                                  • Nathan F.
                                    • +
                                  • Anaïs L.
                                    • +
                                  +
                                  +

                                  En attente des connexions…

                                  + +
                                  +
                                  +
                                  + + + + +
                                  + + + diff --git a/design/resources/views/ressource.blade.php b/design/resources/views/ressource.blade.php new file mode 100644 index 0000000..f9e5df1 --- /dev/null +++ b/design/resources/views/ressource.blade.php @@ -0,0 +1,44 @@ +@extends('layouts.vitrine') + +@section('titre', 'Ressources') + +@section('contenu') +
                                  +
                                  +
                                  +

                                  Outil

                                  +

                                  Outil

                                  +

                                  +
                                  + Voir la démo +

                                  Interactive, sans inscription

                                  +
                                  +
                                  +
                                  +
                                  +
                                  +
                                  +

                                  +
                                  +
                                  +
                                  +
                                    +
                                    +
                                    +
                                    +

                                    En trois étapes

                                    +
                                      +
                                      +
                                      +
                                      +
                                      +

                                      +

                                      + Voir la démo +
                                      +
                                      + + + +
                                      +@endsection diff --git a/design/resources/views/sujet-creer.blade.php b/design/resources/views/sujet-creer.blade.php new file mode 100644 index 0000000..842bac1 --- /dev/null +++ b/design/resources/views/sujet-creer.blade.php @@ -0,0 +1,66 @@ + + + + + + Créer un sujet d’examen · Syllabus + + + + + + + + + + + + + +
                                      + +
                                      + +
                                      +

                                      Sujet · étape par étape

                                      Pour les profs

                                      +

                                      Créer un sujet d’examen

                                      Composez un sujet en 5 étapes, à partir de la banque ou de vos questions.

                                      1 · Cadre de l’épreuve

                                      +
                                      + + + + + + diff --git a/design/resources/views/tarifs.blade.php b/design/resources/views/tarifs.blade.php new file mode 100644 index 0000000..81cbe5b --- /dev/null +++ b/design/resources/views/tarifs.blade.php @@ -0,0 +1,20 @@ +@extends('layouts.vitrine') + +@section('titre', 'Tarifs') + +@section('contenu') +

                                      Tarifs HT

                                      Les cours sont gratuits. Les VM coûtent moins qu’un manuel.

                                      Une licence Syllabus pour un élève coûte 24 € par an : QCM, TP sur VM, suivi et mode examen compris.

                                      • Découverte

                                        Élèves, curieux, enseignants

                                        0 €

                                        pour toujours

                                        • ✓Les 99 cours : CM, TD, QCM
                                        • ✓Corrections expliquées
                                        • ✓1 lab d’essai de 30 min par jour

                                        Lire les cours →

                                      • Enseignant

                                        Une classe, sans passer par l’intendance

                                        29 € / mois

                                        ou 290 € / an · jusqu’à 35 élèves

                                        • ✓Les 59 TP sur VM
                                        • ✓Correction automatique
                                        • ✓Suivi des élèves et mode examen
                                        • ✓Cockpit prof, messagerie, correction assistée
                                        • ✓15 h de VM par élève et par mois

                                        Souscrire →

                                      • Le plus choisi

                                        Établissement

                                        Lycée, BTS, IUT, université, école

                                        24 € / élève / an

                                        à partir de 60 élèves · 1 440 € / an

                                        • ✓Tout Enseignant, classes illimitées
                                        • ✓Espace vie scolaire : CPE, direction, intendance
                                        • ✓Export Pronote / ENT
                                        • ✓Espace administrateur et bibliothèque partagée
                                        • ✓Séances réservées, VM prêtes 10 min avant
                                        • ✓Paiement par mandat administratif

                                        Demander un devis

                                      • Région et OF

                                        Académies, régions, organismes de formation

                                        Sur devis

                                        à partir de 500 élèves ou stagiaires

                                        • ✓Tout Établissement
                                        • ✓Capacité réservée
                                        • ✓Suivi par centre ou par site
                                        • ✓Tableau de bord académie
                                        • ✓Accompagnement au déploiement

                                        Nous contacter →

                                      API et MCP pour développeurs : 19 € HT par mois avec 100 h de VM incluses, puis 0,09 € HT l’heure. Les classes restent prioritaires sur la capacité.

                                      +
                                      +
                                      + +

                                      Vos questions, nos réponses.

                                      +

                                      Intendance, données, pédagogie, technique. Une question manque ? adam@belkacemi.me

                                      +
                                      +

                                      Achat et intendance

                                      • Bon de commande et Chorus Pro ?

                                        Oui. Nous envoyons un devis, vous émettez un bon de commande, la facture arrive sur Chorus Pro. Paiement par mandat administratif à 30 jours.

                                      • Faut-il une carte bancaire pour essayer ?

                                        Non. Un enseignant crée sa classe gratuitement, sans CB. En échange, on vous demande juste un coup de pouce : vos remarques, ou votre aide pour faire souscrire votre établissement.

                                      • Une licence couvre quelle période ?

                                        Une licence suit l’année scolaire, de septembre à août. Les comptes archivés sont supprimés 90 jours après la fin d’année.

                                      • Les élèves qui redoublent ?

                                        Ils repartent sur la licence de l’année suivante. Leur historique (notes, observations, progression) peut être conservé si l’établissement le demande.

                                      • Peut-on payer par région ou par académie ?

                                        Oui, un devis groupé est possible pour plusieurs établissements. Écrivez-nous pour en parler.

                                      +

                                      Élèves et données

                                      • Où sont hébergées les données ?

                                        En France, chez Scaleway, sur des serveurs situés à Paris. Rien ne sort de l’Union européenne.

                                      • Et le RGPD ?

                                        Nous collectons le minimum : nom, prénom, classe, résultats. Pas de publicité, pas de revente, pas de traceurs tiers. Un contrat de sous-traitance est fourni à l’établissement.

                                      • Les élèves mineurs peuvent-ils s’inscrire seuls ?

                                        Non. C’est l’enseignant qui crée la classe et distribue les identifiants. L’élève n’a pas besoin d’adresse e-mail.

                                      • Un élève peut-il travailler chez lui ?

                                        Oui, depuis n’importe quel navigateur, sur PC ou téléphone. Cours, QCM, IDE et devoirs maison restent accessibles toute l’année.

                                      +

                                      Pédagogie

                                      • Les cours suivent-ils les programmes officiels ?

                                        Oui. Ils sont construits à partir des référentiels officiels (BO, arrêtés, fiches RNCP), du SNT au master. Chaque CM, TD et TP indique les compétences visées.

                                      • Puis-je modifier un cours ou un sujet ?

                                        Oui. Tout se duplique et se modifie : CM, questions, TD, sujets d’examen. Vos versions restent dans votre bibliothèque.

                                      • Comment marche le mode examen ?

                                        L’élève passe en plein écran. Si sa souris sort de la fenêtre ou s’il change d’onglet, vous le voyez en direct, avec l’heure et la durée.

                                      • Les TD s’impriment-ils ?

                                        Oui. Chaque TD se télécharge en PDF avec ses étapes et ses cases à remplir. La correction s’imprime à part, pour vous.

                                      • Et la fonction « Lever la main » ?

                                        L’élève lève la main depuis son écran, vous voyez la file d’attente. Fini les « Madame ! Monsieur ! » en boucle.

                                      +

                                      Technique

                                      • Faut-il installer quelque chose ?

                                        Non. Tout se passe dans le navigateur : terminal Debian, IDE, navigateur relié à la VM. Rien à installer sur les postes du lycée.

                                      • Et si un élève dépasse 15 h de VM ?

                                        Le compteur est partagé par la classe : un élève peut consommer plus si d’autres consomment moins. Au-delà, les TP restent ouverts en lecture.

                                      • Le réseau du lycée bloque souvent tout…

                                        Syllabus passe par une connexion web chiffrée classique, comme n’importe quel site. En cas de souci, on vous aide à le régler avec votre administrateur réseau.

                                      • Une VM peut-elle casser le réseau du lycée ?

                                        Non. Chaque VM est isolée chez nous. L’élève peut tout casser dedans, il la réinitialise en un clic.

                                      +
                                      +
                                      +
                                      +@endsection diff --git a/design/resources/views/td/imprimable.blade.php b/design/resources/views/td/imprimable.blade.php new file mode 100644 index 0000000..356e0e8 --- /dev/null +++ b/design/resources/views/td/imprimable.blade.php @@ -0,0 +1,165 @@ + + + + + + TD à imprimer · Syllabus + + + + + + + + + + + + + +
                                      + +
                                      + +
                                      +
                                      +
                                      +
                                      +

                                      TD prêt à imprimer

                                      +

                                      Découper un réseau IPv4.

                                      +

                                      Étapes numérotées, cases à remplir, auto-évaluation. La correction s’imprime à part, pour le prof.

                                      +
                                      +
                                      + + +
                                      +
                                      +
                                      +
                                      +
                                      +
                                      +

                                      BTS SIO · BTS CIEL · BUT R&T 1re année

                                      TD · Découper un réseau IPv4

                                      Durée : 1 h · Calculatrice interdite

                                      +

                                      Nom :

                                      Classe :

                                      Date :

                                      +
                                      +

                                      Rappel : un masque /n laisse 32 − n bits pour les hôtes. Nombre d’hôtes utilisables = 2(32 − n) − 2.

                                      +
                                      + +
                                      +
                                      1

                                      Lire l’adresse

                                      L’établissement dispose du réseau 192.168.10.0/24. Complète les cases.

                                      +
                                      +
                                      + +
                                      +
                                      2

                                      Choisir le masque

                                      Il faut 4 sous-réseaux de même taille. Combien de bits emprunter ? Coche puis justifie.

                                      +
                                      1 bit2 bits3 bits4 bits

                                      Justification :

                                      +
                                      + +
                                      +
                                      3

                                      Calculer la taille d’un sous-réseau

                                      Avec ton masque, complète le tableau.

                                      +
                                      Adresse réseau
                                      Masque (décimal)
                                      Nombre d’adresses par sous-réseau
                                      Hôtes utilisables
                                      +
                                      + +
                                      +
                                      4

                                      Découper le réseau

                                      Remplis le plan d’adressage des 4 sous-réseaux.

                                      +
                                      Sous-réseauAdresse réseauPlage d’hôtesBroadcast
                                      SR1 · Administration
                                      SR2 · Élèves
                                      SR3 · Serveurs
                                      SR4 · Wi-Fi invités
                                      +
                                      + +
                                      +
                                      5

                                      Vérifier sur le lab

                                      Connecte-toi au lab « Adressage IPv4 » et configure le poste du SR2. Recopie la commande utilisée.

                                      +
                                      +
                                      + +
                                      +
                                      6

                                      Auto-évaluation

                                      Coche ce que tu sais faire.

                                      +
                                      • Je sais lire une notation CIDR
                                      • Je sais calculer un masque
                                      • Je sais trouver une adresse de broadcast
                                      +
                                      +
                                      +
                                      +

                                      Correction

                                      Version prof
                                      +
                                      + +
                                      +
                                      1

                                      Lire l’adresse

                                      L’établissement dispose du réseau 192.168.10.0/24. Complète les cases.

                                      +
                                      +
                                      + +
                                      +
                                      2

                                      Choisir le masque

                                      Il faut 4 sous-réseaux de même taille. Combien de bits emprunter ? Coche puis justifie.

                                      +
                                      1 bit✕2 bits3 bits4 bits

                                      Justification :

                                      2² = 4 sous-réseaux. Le masque passe de /24 à /26.

                                      +
                                      + +
                                      +
                                      3

                                      Calculer la taille d’un sous-réseau

                                      Avec ton masque, complète le tableau.

                                      +
                                      Adresse réseau192.168.10.0
                                      Masque (décimal)255.255.255.192
                                      Nombre d’adresses par sous-réseau64
                                      Hôtes utilisables62
                                      +
                                      + +
                                      +
                                      4

                                      Découper le réseau

                                      Remplis le plan d’adressage des 4 sous-réseaux.

                                      +
                                      Sous-réseauAdresse réseauPlage d’hôtesBroadcast
                                      SR1 · Administration192.168.10.0192.168.10.1 – .62192.168.10.63
                                      SR2 · Élèves192.168.10.64192.168.10.65 – .126192.168.10.127
                                      SR3 · Serveurs192.168.10.128192.168.10.129 – .190192.168.10.191
                                      SR4 · Wi-Fi invités192.168.10.192192.168.10.193 – .254192.168.10.255
                                      +
                                      + +
                                      +
                                      5

                                      Vérifier sur le lab

                                      Connecte-toi au lab « Adressage IPv4 » et configure le poste du SR2. Recopie la commande utilisée.

                                      +

                                      sudo ip addr add 192.168.10.65/26 dev eth0

                                      +
                                      + +
                                      +
                                      6

                                      Auto-évaluation

                                      Coche ce que tu sais faire.

                                      +
                                      • Je sais lire une notation CIDR
                                      • Je sais calculer un masque
                                      • Je sais trouver une adresse de broadcast
                                      +
                                      +
                                      +
                                      + +
                                      +
                                      +
                                      + +
                                      +

                                      Les élèves signalent un blocage avec la fonction « Lever la main », sans interrompre la classe.« Lever la main ».

                                      +

                                      Chaque demande arrive dans votre tableau de bord, dans l’ordre. !

                                      +
                                      +
                                      +
                                      +
                                      +
                                      + + + + + + + diff --git a/design/resources/views/vie-scolaire.blade.php b/design/resources/views/vie-scolaire.blade.php new file mode 100644 index 0000000..ad39511 --- /dev/null +++ b/design/resources/views/vie-scolaire.blade.php @@ -0,0 +1,139 @@ + + + + + + Vie scolaire et intendance · Syllabus + + + + + + + + + + + + + +
                                      + +
                                      + +
                                      +
                                      +
                                      + +
                                      +
                                      +

                                      Vie scolaire et intendance

                                      Pour les profs

                                      +

                                      Tableau de bord CPE

                                      6 classes · 118 élèves · semaine du 28 septembre

                                      +
                                      + + +
                                      +
                                      +
                                        +

                                      • Alertes ouvertes

                                        5

                                        2 priorité haute

                                      • Présence moyenne

                                        92 %

                                        sur les séances en ligne

                                      • DM rendus

                                        75 %

                                        toutes classes

                                      • Examens surveillés

                                        4

                                        cette semaine · 7 sorties

                                      • Observations

                                        38

                                        prêtes pour les conseils

                                        • +

                                      • Licences

                                        118/120

                                        renouvellement 31/08/2027

                                      • Coût annuel

                                        2 832 €

                                        HT · 24 € / élève

                                      • Heures de VM

                                        612 h

                                        sur 1 770 h incluses ce mois

                                      • Factures

                                        3

                                        1 en attente Chorus Pro

                                      • Classes actives

                                        6

                                        6 enseignants

                                        • +
                                      +
                                      +

                                      Alertes élèves, toutes classes

                                      remontées par les profs et par Syllabus

                                      +
                                      + +
                                      PrioritéÉlèveSignalProf référentAction
                                      Haute

                                      Lucas M.

                                      BTS SIO 1 A

                                      Décrochage dans 3 matières

                                      QCM < 8 en réseaux, maths et CEJM

                                      		M. Belkacemi
                                      Haute

                                      Léa M.

                                      BTS SIO 1 A

                                      Baisse continue sur 4 semaines

                                      12 → 7,5 de moyenne QCM

                                      		M. Belkacemi
                                      Moyenne

                                      Enzo B.

                                      Terminale NSI

                                      5 DM non rendus

                                      Depuis la rentrée

                                      		Mme Roche
                                      Moyenne

                                      Camille D.

                                      BTS SIO 1 A

                                      3 sorties pendant un examen

                                      E6 blanc · 12 s au total

                                      		M. Belkacemi
                                      Moyenne

                                      Mathis C.

                                      BTS CIEL 2

                                      Absences répétées

                                      4 séances de TP manquées

                                      		M. Arnaud
                                      Positif

                                      Inès K.

                                      BTS SIO 1 A

                                      Excellence dans toutes les matières

                                      Proposée pour le tutorat

                                      		M. Belkacemi
                                      +
                                      +
                                      +

                                      Toutes les classes

                                      +
                                      + +
                                      ClasseEnseignantÉlèvesMoy. QCMAlertesDM rendusPrésence
                                      BTS SIO 1 · AM. Belkacemi1613,4381 %94 %
                                      BTS SIO 1 · BM. Belkacemi1712,8276 %91 %
                                      BTS SIO 2 · SISRMme Roche1413,9188 %96 %
                                      BTS CIEL 2M. Arnaud1511,6464 %85 %
                                      Terminale NSIMme Roche2412,1370 %93 %
                                      Seconde SNT 4M. Faure3211,8273 %95 %
                                      +
                                      +
                                      +
                                      +

                                      Conseils de classe · 1er trimestre

                                      +

                                      • BTS SIO 1 · A

                                        lun. 07/12 · observations saisies

                                        Prêt
                                        100 %

                                      • BTS CIEL 2

                                        mar. 08/12 · observations saisies

                                        2 profs à relancer
                                        70 %

                                      • Terminale NSI

                                        jeu. 10/12 · observations saisies

                                        En cours
                                        45 %

                                      • Seconde SNT 4

                                        ven. 11/12 · observations saisies

                                        En cours
                                        20 %
                                      +
                                      +
                                      +

                                      Journal des examens

                                      +

                                      1. lun. 28/09 · 09:14 · BTS SIO 1 A · E6 blanc

                                        Hugo P. · changement d’onglet · 3 s

                                      2. lun. 28/09 · 09:21 · BTS SIO 1 A · E6 blanc

                                        Lucas M. · souris hors fenêtre · 6 s

                                      3. lun. 28/09 · 09:40 · BTS SIO 1 A · E6 blanc

                                        Camille D. · fenêtre réduite · 2 s

                                      4. mar. 29/09 · 14:00 · Terminale NSI · Contrôle SQL

                                        24/24 connectés · aucune sortie

                                      +
                                      +
                                      +
                                      +
                                      +

                                      Licences et factures

                                      paiement par mandat administratif
                                      +
                                      Licences utilisées118 / 120

                                      Il reste 2 licences. Au-delà, chaque élève ajouté est facturé 24 € HT au prorata.

                                      +
                                      PièceDateMontant HTStatut
                                      Devis D-2026-04102/09/20262 880,00 €Accepté
                                      Bon de commande BC-118705/09/20262 880,00 €Reçu
                                      Facture F-2026-09310/09/20262 832,00 €Déposée sur Chorus Pro
                                      +
                                      +
                                      +

                                      Consommation de VM par classe

                                      15 h incluses / élève / mois
                                      +
                                      • BTS SIO 1 · A142 h / 240 h
                                      • BTS SIO 1 · B128 h / 255 h
                                      • BTS SIO 2 · SISR160 h / 210 h
                                      • BTS CIEL 296 h / 225 h
                                      • Terminale NSI58 h / 360 h
                                      • Seconde SNT 428 h / 480 h
                                      +

                                      Le compteur est partagé par classe. Aucun dépassement prévu d’ici la fin de l’année au rythme actuel.

                                      +
                                      +
                                      +
                                      +
                                      +
                                      + + +
                                      + + + + + + diff --git a/design/resources/views/visio.blade.php b/design/resources/views/visio.blade.php new file mode 100644 index 0000000..145a51c --- /dev/null +++ b/design/resources/views/visio.blade.php @@ -0,0 +1,190 @@ + + + + + + Visio de classe · Syllabus + + + + + + + + + + + + + +
                                      + +
                                      + +
                                      +
                                      +

                                      Visio de classe

                                      +

                                      La classe à distance, sans brouhaha.

                                      +

                                      Tous les élèves arrivent en sourdine. Ils lèvent la main, vous donnez la parole, un à la fois.

                                      +
                                      + + + +
                                      +

                                      Les vues sont reliées : levez la main côté élève (Léa M.), puis donnez-lui la parole côté prof.

                                      +
                                      + +
                                      +
                                      +
                                      +
                                      En direct · 00:24:12BTS SIO 1 · Groupe A
                                      +
                                      +
                                      + +
                                        +
                                        +
                                        +

                                        Mains levées

                                          Premier arrivé en haut.

                                          +

                                          Salle d’attente

                                            +

                                            Chat des élèves

                                            +
                                            +
                                            + +
                                            +
                                            BTS SIO 1 · Groupe A · VLAN et routage
                                            +
                                            +
                                            MB

                                            M. B. · votre professeur

                                            + M. B. +
                                            LMVous
                                            +
                                            +
                                            + + + + Quitter +
                                            +

                                            +
                                            + +
                                            +
                                            +
                                            BTS SIO 1 · AEn direct
                                            +
                                            +
                                            MB

                                            M. B.

                                            +
                                            LM
                                            +
                                            +
                                            +
                                            + +
                                            + + + +
                                            +
                                            +
                                            +
                                            + +
                                            + + + + + + diff --git a/design/routes/web.php b/design/routes/web.php new file mode 100644 index 0000000..851fd4e --- /dev/null +++ b/design/routes/web.php @@ -0,0 +1,50 @@ +name('accueil'); +Route::view('/labs', 'labs.index')->name('labs.index'); +Route::view('/labs/essai', 'labs.essai')->name('labs.essai'); +Route::view('/cours', 'cours.index')->name('cours.index'); +Route::view('/cours/adressage-ipv4', 'cours.show')->name('cours.show'); +Route::view('/etablissements', 'etablissements')->name('etablissements'); +Route::view('/tarifs', 'tarifs')->name('tarifs'); +Route::view('/connexion', 'auth.connexion')->name('login'); +Route::view('/inscription', 'auth.inscription')->name('register'); +Route::view('/classes/suivi', 'classes.suivi')->name('suivi'); +Route::view('/examen', 'examen')->name('examen'); +Route::view('/eleve', 'eleve')->name('eleve'); +// À brancher sur l'envoi d'e-mail (Mail::to('adam@belkacemi.me')->send(...)). +Route::post('/contact', fn () => back()->with('contact_ok', true))->name('contact'); +Route::view('/fonctionnalites', 'fonctionnalites')->name('fonctionnalites'); +Route::view('/legal', 'legal')->name('legal'); +Route::view('/cours/adressage-ipv4/cm', 'cours.cm')->name('cours.cm'); +Route::view('/banque', 'banque')->name('banque'); +Route::view('/quiz/projection', 'quiz.projection')->name('quiz.projection'); +Route::view('/quiz', 'quiz.eleve')->name('quiz.eleve'); +Route::view('/ide', 'ide')->name('ide'); +Route::view('/bibliotheque', 'bibliotheque')->name('bibliotheque'); +Route::view('/generateur', 'generateur')->name('generateur'); +Route::view('/labs/web', 'labs.web')->name('labs.web'); +Route::view('/maison', 'maison')->name('maison'); +Route::view('/devoirs', 'devoirs')->name('devoirs'); +Route::view('/td/imprimer', 'td.imprimable')->name('td.imprimable'); +Route::view('/cockpit', 'cockpit')->name('cockpit'); +Route::view('/mon-espace', 'espace-eleve')->name('espace.eleve'); +Route::view('/vie-scolaire', 'vie-scolaire')->name('vie.scolaire'); +Route::view('/eleves/fiche', 'fiche-eleve')->name('fiche.eleve'); +Route::view('/correction', 'correction')->name('correction'); +Route::view('/sujets/creer', 'sujet-creer')->name('sujet.creer'); +Route::view('/messagerie', 'messagerie')->name('messagerie'); +Route::view('/exports', 'export-ent')->name('export.ent'); +Route::view('/aide', 'aide')->name('aide'); +Route::view('/academie', 'academie')->name('academie'); +Route::view('/paiement', 'paiement')->name('paiement'); +Route::view('/paiement/confirme', 'paiement-ok')->name('paiement.ok'); +Route::view('/compte/facturation', 'facturation')->name('facturation'); +Route::view('/cours/fiche', 'cours.fiche')->name('cours.fiche'); +Route::view('/etablissement', 'espace-etablissement')->name('espace.etablissement'); +Route::view('/integration', 'integration')->name('integration'); +Route::view('/cohortes', 'cohortes')->name('cohortes'); +Route::view('/ressources/outil', 'ressource')->name('ressource'); +Route::view('/visio', 'visio')->name('visio'); diff --git a/design/support.js b/design/support.js new file mode 100644 index 0000000..cb009b6 --- /dev/null +++ b/design/support.js @@ -0,0 +1,1911 @@ +// GENERATED from dc-runtime/src/*.ts — do not edit. Rebuild with `cd dc-runtime && bun run build`. +"use strict"; +(() => { + var __defProp = Object.defineProperty; + var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; + var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value); + + // src/react.ts + function getReact() { + const R = window.React; + if (!R) throw new Error("dc-runtime: window.React is not available yet"); + return R; + } + function getReactDOM() { + const RD = window.ReactDOM; + if (!RD) throw new Error("dc-runtime: window.ReactDOM is not available yet"); + return RD; + } + var h = ((...args) => getReact().createElement( + ...args + )); + + // src/parse.ts + function parseDcDocument(doc) { + const dc = doc.querySelector("x-dc"); + if (!dc) return null; + const scriptEl = doc.querySelector("script[data-dc-script]"); + const { props, preview } = parseDataProps( + scriptEl?.getAttribute("data-props") ?? null + ); + return { + template: dc.innerHTML, + js: scriptEl ? scriptEl.textContent || "" : "", + props, + preview + }; + } + function parseDcText(src) { + const openMatch = /]*)?>/.exec(src); + if (!openMatch) return null; + const close = src.lastIndexOf(""); + if (close === -1 || close < openMatch.index) return null; + const template = src.slice(openMatch.index + openMatch[0].length, close); + const doc = new DOMParser().parseFromString(src, "text/html"); + const scriptEl = doc.querySelector("script[data-dc-script]"); + const { props, preview } = parseDataProps( + scriptEl?.getAttribute("data-props") ?? null + ); + return { + template, + js: scriptEl ? scriptEl.textContent || "" : "", + props, + preview + }; + } + function parseDataProps(raw) { + if (!raw) return { props: null, preview: null }; + let parsed; + try { + parsed = JSON.parse(raw); + } catch { + return { props: null, preview: null }; + } + if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) { + return { props: null, preview: null }; + } + const obj = parsed; + const preview = obj.$preview && typeof obj.$preview === "object" ? obj.$preview : null; + const rest = {}; + for (const k of Object.keys(obj)) { + if (k[0] !== "$") rest[k] = obj[k]; + } + return { props: Object.keys(rest).length ? rest : null, preview }; + } + function dcNameFromPath(pathname) { + let p = pathname || ""; + try { + p = decodeURIComponent(p); + } catch { + } + const base = p.split("/").pop() || "Root"; + return base.replace(/\.dc\.html$/, "").replace(/\.html?$/, "") || "Root"; + } + + // src/boot.ts + var BASE_CSS = ` + .sc-placeholder{background:color-mix(in srgb,currentColor 8%,transparent); + border:1px solid color-mix(in srgb,currentColor 50%,transparent); + border-radius:2px;box-sizing:border-box;overflow:hidden} + @keyframes sc-shine{0%{background-position:100% 50%}100%{background-position:0% 50%}} + html.sc-dc-streaming .sc-placeholder, + html.sc-dc-streaming .sc-interp.sc-missing{position:relative; + background:color-mix(in srgb,currentColor 5%,transparent); + border-color:transparent} + html.sc-dc-streaming .sc-placeholder::before, + html.sc-dc-streaming .sc-interp.sc-missing::before{content:''; + position:absolute;inset:0;pointer-events:none; + background:linear-gradient(90deg,rgba(217,119,87,0) 25%,rgba(247,225,211,.95) 37%,rgba(217,119,87,0) 63%); + background-size:400% 100%;animation:sc-shine 1.4s ease infinite} + html.sc-dc-streaming .sc-placeholder:nth-child(n+9 of .sc-placeholder)::before, + html.sc-dc-streaming .sc-interp.sc-missing:nth-child(n+9 of .sc-interp.sc-missing)::before{animation:none; + background:color-mix(in srgb,currentColor 8%,transparent)} + .sc-placeholder-error{padding:4px 8px;font:11px/1.4 ui-monospace,monospace; + color:color-mix(in srgb,currentColor 70%,transparent);word-break:break-word} + .sc-interp.sc-missing{display:inline-block;width:2em;height:1em;overflow:hidden; + vertical-align:text-bottom;background:rgba(255,255,255,.3);border:1px solid rgba(0,0,0,.5); + border-radius:2px;box-sizing:border-box;color:transparent; + user-select:none} + .sc-interp.sc-unresolved{font-family:ui-monospace,monospace;font-size:.85em; + color:color-mix(in srgb,currentColor 50%,transparent); + background:color-mix(in srgb,currentColor 10%,transparent);border-radius:3px; + padding:0 3px} + .sc-host.sc-has-error{position:relative} + .sc-logic-error{position:absolute;top:8px;left:8px;z-index:2147483647;max-width:60ch; + padding:6px 10px;background:#b00020;color:#fff;font:12px/1.4 ui-monospace,monospace; + border-radius:4px;white-space:pre-wrap;pointer-events:none} + /* Mirrors PRINT_BASELINE_CSS in apps/web deck-stage-export.ts \u2014 keep both + in sync until dc-runtime regains a build step. */ + @media print { + @page { margin: 0.5cm; } + figure, table { break-inside: avoid; } + #dc-root, #dc-root > .sc-host { height: auto; } + *, *::before, *::after { + print-color-adjust: exact; -webkit-print-color-adjust: exact; + backdrop-filter: none !important; -webkit-backdrop-filter: none !important; + animation-delay: -99s !important; animation-duration: .001s !important; + animation-iteration-count: 1 !important; animation-fill-mode: both !important; + animation-play-state: running !important; transition-duration: 0s !important; + } + } + `; + var FULL_PAGE_CSS = "html,body{height:100%;margin:0}#dc-root,#dc-root>.sc-host{height:100%}"; + function rootNameForDocument(doc, loc) { + let bootPath = loc.pathname || ""; + if (!/\.dc\.html?$/i.test(safeDecode(bootPath))) { + try { + bootPath = new URL(doc.baseURI || "/").pathname; + } catch { + } + } + return dcNameFromPath(bootPath); + } + function safeDecode(s) { + try { + return decodeURIComponent(s); + } catch { + return s; + } + } + function boot(runtime, doc = document) { + const parsed = parseDcDocument(doc); + if (!parsed) return null; + const React = getReact(); + const rootName = rootNameForDocument(doc, location); + runtime.markFetched(rootName); + runtime.setRootName(rootName); + runtime.adoptParsed(rootName, parsed); + if (!window.__resources) { + fetch(location.href).then((res) => res.ok ? res.text() : "").then((t) => { + const raw = t ? parseDcText(t) : null; + if (raw?.template) runtime.updateHtml(rootName, raw.template); + }).catch(() => { + }); + } + const dc = doc.querySelector("x-dc"); + const hostEl = doc.createElement("div"); + hostEl.id = "dc-root"; + dc.replaceWith(hostEl); + if (!parsed.preview) { + const s = doc.createElement("style"); + s.textContent = FULL_PAGE_CSS; + doc.head.appendChild(s); + } + const Root = runtime.getDC(rootName); + const entry = runtime.registry.get(rootName); + function StandaloneRoot() { + const [, setTick] = React.useState(0); + React.useEffect(() => { + const sub = () => setTick((n) => n + 1); + entry.subs.add(sub); + return () => { + entry.subs.delete(sub); + }; + }, []); + const defaults = React.useMemo(() => { + const d = {}; + for (const k in entry.propsMeta || {}) { + const v = entry.propsMeta?.[k]?.default; + if (v !== void 0) d[k] = v; + } + return d; + }, [entry.propsMeta]); + return h(Root, { ...defaults, ...entry.propOverrides || {} }); + } + const ReactDOM = getReactDOM(); + if (ReactDOM.createRoot) + ReactDOM.createRoot(hostEl).render(h(StandaloneRoot)); + else ReactDOM.render(h(StandaloneRoot), hostEl); + return rootName; + } + + // src/expr.ts + var IDENT_RE = /^[A-Za-z_$][A-Za-z0-9_$]*/; + var NUMBER_RE = /^-?\d+(\.\d+)?$/; + function resolve(vals, src) { + const expr = String(src).trim(); + if (!expr) return void 0; + if (expr[0] === "(" && expr[expr.length - 1] === ")" && parensWrapWhole(expr)) { + return resolve(vals, expr.slice(1, -1)); + } + const eq = findTopLevelEquality(expr); + if (eq) { + const lv = resolve(vals, expr.slice(0, eq.index)); + const rv = resolve(vals, expr.slice(eq.index + eq.op.length)); + switch (eq.op) { + case "===": + return lv === rv; + case "!==": + return lv !== rv; + case "==": + return lv == rv; + default: + return lv != rv; + } + } + if (expr[0] === "!") return !resolve(vals, expr.slice(1)); + if (expr === "true") return true; + if (expr === "false") return false; + if (expr === "null") return null; + if (expr === "undefined") return void 0; + if (NUMBER_RE.test(expr)) return Number(expr); + if (expr.length >= 2 && (expr[0] === '"' || expr[0] === "'") && expr[expr.length - 1] === expr[0]) { + return expr.slice(1, -1); + } + return resolvePath(vals, expr); + } + function parensWrapWhole(expr) { + let depth = 0; + for (let i = 0; i < expr.length - 1; i++) { + if (expr[i] === "(") depth++; + else if (expr[i] === ")") { + depth--; + if (depth === 0) return false; + } + } + return true; + } + function findTopLevelEquality(expr) { + let depth = 0; + for (let i = 0; i < expr.length; i++) { + const c = expr[i]; + if (c === "[" || c === "(") depth++; + else if (c === "]" || c === ")") depth--; + else if (depth === 0 && (c === "=" || c === "!") && expr[i + 1] === "=") { + if (i > 0 && (expr[i - 1] === "=" || expr[i - 1] === "!")) continue; + if (!expr.slice(0, i).trim()) continue; + const op = expr[i + 2] === "=" ? c + "==" : c + "="; + return { index: i, op }; + } + } + return null; + } + function resolvePath(vals, expr) { + const head = expr.match(IDENT_RE); + if (!head) return void 0; + let cur = vals == null ? void 0 : vals[head[0]]; + let i = head[0].length; + while (i < expr.length) { + if (expr[i] === ".") { + const m = expr.slice(i + 1).match(IDENT_RE) || expr.slice(i + 1).match(/^\d+/); + if (!m) return void 0; + cur = cur == null ? void 0 : cur[m[0]]; + i += 1 + m[0].length; + } else if (expr[i] === "[") { + let depth = 1; + let j = i + 1; + while (j < expr.length && depth > 0) { + if (expr[j] === "[") depth++; + else if (expr[j] === "]") { + depth--; + if (depth === 0) break; + } + j++; + } + if (depth !== 0) return void 0; + const key = resolve(vals, expr.slice(i + 1, j)); + cur = cur == null ? void 0 : cur[key]; + i = j + 1; + } else { + return void 0; + } + } + return cur; + } + + // src/encode.ts + var CAMEL_ATTR = "sc-camel-"; + var INLINE_TEXT_TAGS = new Set( + "a abbr b bdi bdo br cite code del dfn em i ins kbd mark q s samp small span strike strong sub sup u var wbr".split( + " " + ) + ); + var RAW_WRAP = { + select: "sc-raw-select", + table: "sc-raw-table", + tbody: "sc-raw-tbody", + thead: "sc-raw-thead", + tfoot: "sc-raw-tfoot", + tr: "sc-raw-tr", + td: "sc-raw-td", + th: "sc-raw-th", + caption: "sc-raw-caption" + }; + var RAW_UNWRAP = Object.fromEntries( + Object.entries(RAW_WRAP).map(([k, v]) => [v, k]) + ); + var EVENT_MAP = { + onclick: "onClick", + onchange: "onChange", + oninput: "onInput", + onsubmit: "onSubmit", + onkeydown: "onKeyDown", + onkeyup: "onKeyUp", + onkeypress: "onKeyPress", + onmousedown: "onMouseDown", + onmouseup: "onMouseUp", + onmouseenter: "onMouseEnter", + onmouseleave: "onMouseLeave", + onfocus: "onFocus", + onblur: "onBlur", + ondoubleclick: "onDoubleClick", + oncontextmenu: "onContextMenu", + onmousemove: "onMouseMove", + onmouseover: "onMouseOver", + onmouseout: "onMouseOut", + onpointerdown: "onPointerDown", + onpointerup: "onPointerUp", + onpointermove: "onPointerMove", + onpointerenter: "onPointerEnter", + onpointerleave: "onPointerLeave", + onpointercancel: "onPointerCancel", + onpointerover: "onPointerOver", + onpointerout: "onPointerOut", + ongotpointercapture: "onGotPointerCapture", + onlostpointercapture: "onLostPointerCapture", + ontouchstart: "onTouchStart", + ontouchend: "onTouchEnd", + ontouchmove: "onTouchMove", + ontouchcancel: "onTouchCancel", + ondragstart: "onDragStart", + ondragend: "onDragEnd", + ondragenter: "onDragEnter", + ondragleave: "onDragLeave", + ondragover: "onDragOver", + onanimationstart: "onAnimationStart", + onanimationend: "onAnimationEnd", + onanimationiteration: "onAnimationIteration", + ontransitionend: "onTransitionEnd" + }; + var ATTRS = `(?:[^>"']|"[^"]*"|'[^']*')*`; + var IMPORT_SELF_CLOSE_RE = new RegExp( + "<(x-import|dc-import)(" + ATTRS + ")/>", + "gi" + ); + var CAMEL_ATTR_RE = /(\s)([a-z]+[A-Z][A-Za-z0-9]*)(\s*=)/g; + function encodeCamelAttrs(html) { + return html.replace( + CAMEL_ATTR_RE, + (_, sp, name, eq) => sp + CAMEL_ATTR + name.replace(/[A-Z]/g, (c) => "-" + c.toLowerCase()) + eq + ); + } + function encodeCase(html) { + html = html.replace( + IMPORT_SELF_CLOSE_RE, + (_, t, a) => "<" + t + a + ">" + ); + html = html.replace(/)/gi, "/gi, ""); + html = encodeCamelAttrs(html); + for (const [real, alias] of Object.entries(RAW_WRAP)) { + html = html.replace( + new RegExp("(])", "gi"), + "$1" + alias + ); + } + return html; + } + function kebabToCamel(s) { + return s.replace(/-([a-z])/g, (_, c) => c.toUpperCase()); + } + function cssToObj(css) { + const o = {}; + for (const decl of css.split(";")) { + const i = decl.indexOf(":"); + if (i < 0) continue; + const prop = decl.slice(0, i).trim(); + o[prop.startsWith("--") ? prop : kebabToCamel(prop)] = decl.slice(i + 1).trim(); + } + return o; + } + function compileAttr(raw) { + const whole = raw.match(/^\s*\{\{([\s\S]+?)\}\}\s*$/); + if (whole) { + const path = whole[1]; + return (vals) => resolve(vals, path); + } + if (raw.includes("{{")) { + const parts = raw.split(/\{\{([\s\S]+?)\}\}/g); + return (vals) => parts.map((s, i) => i & 1 ? resolve(vals, s) ?? "" : s).join(""); + } + return () => raw; + } + + // src/compile.ts + function collectProps(node, kind, host) { + const propGetters = []; + const pseudoClasses = []; + let hintSize = null; + for (const { name, value } of [...node.attributes]) { + if (name === "sc-name" || name === "data-dc-tpl") continue; + let key = name; + if (key.startsWith(CAMEL_ATTR)) + key = kebabToCamel(key.slice(CAMEL_ATTR.length)); + if (key === "hint-size") { + hintSize = value; + continue; + } + if (key.startsWith("style-")) { + pseudoClasses.push(host.pseudoClass(key.slice(6), value)); + continue; + } + if (kind !== "dom") { + if (key.includes("-") && !(kind === "x-import" && (key.startsWith("aria-") || key.startsWith("data-")))) + key = kebabToCamel(key); + } else { + if (key === "class") key = "className"; + else if (key === "for") key = "htmlFor"; + else if (key.startsWith("on")) + key = EVENT_MAP[key] || "on" + key[2].toUpperCase() + key.slice(3); + } + propGetters.push([key, compileAttr(value)]); + } + return { propGetters, pseudoClasses, hintSize }; + } + var HOST_STYLE_PROPS = /* @__PURE__ */ new Set([ + "position", + "left", + "right", + "top", + "bottom", + "inset", + "width", + "height", + "z-index", + "transform" + ]); + function hostPositionStyle(style) { + const all = typeof style === "string" ? cssToObj(style) : style != null && typeof style === "object" ? style : null; + if (!all) return void 0; + const out = {}; + for (const [k, v] of Object.entries(all)) { + const kebab = k.replace(/[A-Z]/g, (c) => "-" + c.toLowerCase()); + if (HOST_STYLE_PROPS.has(kebab)) out[k] = v; + } + return Object.keys(out).length ? out : void 0; + } + function compileTemplate(html, host) { + const tpl = document.createElement("template"); + //! nosemgrep: direct-inner-html-assignment + tpl.innerHTML = encodeCase(html); + let tplN = 0; + (function stamp(node) { + if (node.nodeType === Node.ELEMENT_NODE) { + node.setAttribute("data-dc-tpl", String(tplN++)); + } + for (const c of node.childNodes) stamp(c); + })(tpl.content); + const builders = walkChildren(tpl.content, host); + const render = ((vals, ctx) => builders.map((b, i) => b(vals || {}, ctx, i))); + render.__annotated = tpl.innerHTML; + return render; + } + function walkChildren(node, host) { + return [...node.childNodes].map((c) => walk(c, host)).filter((b) => b != null); + } + var SLIDE_ID_VALUE_RE = /^[0-9a-f]{8}$/; + var DECK_CONTROL_FLOW_RE = /^(sc-if|sc-for|sc-else|dc-import|x-import)$/; + var DECK_AUX_RE = /^(template|script|style|sc-helmet|helmet)$/; + function isDeckMountTag(el) { + if (el.localName === "deck-stage") return true; + return el.localName === "x-import" && (el.getAttribute("component-from-global-scope") || "") === "deck-stage"; + } + function walkDeckChildren(el, host) { + const pairs = [...el.childNodes].map((c) => ({ c, b: walk(c, host) })).filter((p) => p.b !== null); + const kids = pairs.map((p) => p.b); + const seen = /* @__PURE__ */ new Set(); + const wsSeen = /* @__PURE__ */ new Map(); + const keys = []; + const nextSlideId = new Array(pairs.length); + { + let upcoming = null; + for (let j = pairs.length - 1; j >= 0; j--) { + const n = pairs[j].c; + if (n.nodeType === Node.ELEMENT_NODE) { + const t = n.localName; + upcoming = !DECK_AUX_RE.test(t) && !DECK_CONTROL_FLOW_RE.test(t) ? n.getAttribute("data-om-slide-id") : null; + } + nextSlideId[j] = upcoming; + } + } + for (let j = 0; j < pairs.length; j++) { + const { c } = pairs[j]; + if (c.nodeType === Node.TEXT_NODE) { + if ((c.nodeValue ?? "").trim() === "") { + const base = nextSlideId[j] ? "omid-ws:" + nextSlideId[j] : "omid-ws:aux"; + const n = wsSeen.get(base) ?? 0; + wsSeen.set(base, n + 1); + keys.push(n === 0 ? base : base + ":" + n); + continue; + } + return { kids, keys: null }; + } + if (c.nodeType !== Node.ELEMENT_NODE) { + keys.push(j); + continue; + } + const child = c; + const tag = child.localName; + if (DECK_AUX_RE.test(tag)) { + keys.push(j); + continue; + } + if (DECK_CONTROL_FLOW_RE.test(tag)) return { kids, keys: null }; + const v = child.getAttribute("data-om-slide-id"); + if (!v || !SLIDE_ID_VALUE_RE.test(v) || seen.has(v)) { + return { kids, keys: null }; + } + seen.add(v); + keys.push("omid:" + v); + } + return { kids, keys }; + } + function renderDeckKids(kids, kidKeys, vals, ctx) { + return kids.map((b, j) => { + const k = kidKeys ? kidKeys[j] : j; + const out = b(vals, ctx, k); + return kidKeys != null && typeof out === "string" ? h(getReact().Fragment, { key: k }, out) : out; + }); + } + function walk(node, host) { + if (node.nodeType === Node.TEXT_NODE) return walkText(node); + if (node.nodeType !== Node.ELEMENT_NODE) return null; + const el = node; + const tag = el.tagName.toLowerCase(); + if (tag === "sc-for") return walkFor(el, host); + if (tag === "sc-if") return walkIf(el, host); + if (tag === "x-import") return walkXImport(el, host); + if (tag === "sc-helmet") return host.helmet(el); + if (tag === "dc-import") return walkComponent(el, host); + return walkElement(el, host); + } + var warnedHoles = /* @__PURE__ */ new Set(); + function warnUnresolved(ctx, what) { + const key = (ctx?.__name || "?") + "\0" + what; + if (warnedHoles.has(key)) return; + warnedHoles.add(key); + console.warn("[dc-runtime] " + (ctx?.__name || "template") + ": " + what); + } + function walkText(node) { + const txt = node.nodeValue ?? ""; + if (!txt.includes("{{")) { + if (!txt.trim() && !txt.includes(" ")) return null; + return () => txt; + } + const parts = txt.split(/\{\{([\s\S]+?)\}\}/g); + return (vals, ctx, key) => h( + getReact().Fragment, + { key }, + ...parts.map((p, i) => { + if (!(i & 1)) return p; + const v = resolve(vals, p); + if (v === void 0) { + if (!ctx?.__streamingNow) { + if (document.body?.hasAttribute("data-dc-editor-on")) { + return h( + "span", + { key: i, className: "sc-interp sc-unresolved" }, + "{{ " + p.trim() + " }}" + ); + } + warnUnresolved( + ctx, + "{{ " + p.trim() + " }} never resolved \u2014 rendered as empty" + ); + return null; + } + return h( + "span", + { key: i, className: "sc-interp sc-missing" }, + p.trim() + ); + } + if (getReact().isValidElement(v) || Array.isArray(v)) { + return h(getReact().Fragment, { key: i }, v); + } + if (v === null || typeof v === "boolean") return null; + return h("span", { key: i, className: "sc-interp" }, String(v)); + }) + ); + } + function walkFor(el, host) { + const listGet = compileAttr(el.getAttribute("list") || ""); + const asName = el.getAttribute("as") || "item"; + const hintN = parseInt(el.getAttribute("hint-placeholder-count") || "0", 10); + const kids = walkChildren(el, host); + const listSrc = el.getAttribute("list") || ""; + return (vals, ctx, key) => { + let list = listGet(vals); + if (!Array.isArray(list)) { + if (!ctx?.__streamingNow) { + if (list !== void 0 && list !== null) { + warnUnresolved( + ctx, + 'sc-for list="' + listSrc + '" is not an array (' + typeof list + ")" + ); + } + list = []; + } else { + list = hintN > 0 ? Array(hintN).fill(void 0) : []; + } + } + return h( + getReact().Fragment, + { key }, + list.map((item, i) => { + const sub = { ...vals, [asName]: item, $index: i }; + return h( + getReact().Fragment, + { key: i }, + kids.map((b, j) => b(sub, ctx, j)) + ); + }) + ); + }; + } + function walkIf(el, host) { + const valGet = compileAttr(el.getAttribute("value") || ""); + const hintRaw = el.getAttribute("hint-placeholder-val"); + const hintGet = hintRaw != null ? compileAttr(hintRaw) : null; + const kids = walkChildren(el, host); + return (vals, ctx, key) => { + let v = valGet(vals); + if (v === void 0 && hintGet && ctx?.__streamingNow) v = hintGet(vals); + return v ? h( + getReact().Fragment, + { key }, + kids.map((b, j) => b(vals, ctx, j)) + ) : null; + }; + } + function walkComponent(el, host) { + const name = el.getAttribute("name") || el.getAttribute("component") || ""; + el.removeAttribute("name"); + el.removeAttribute("component"); + const tplId = el.getAttribute("data-dc-tpl"); + const styleRaw = el.getAttribute("style"); + el.removeAttribute("style"); + const styleGet = styleRaw != null ? compileAttr(styleRaw) : null; + const { propGetters, hintSize } = collectProps(el, "dc-import", host); + const kids = walkChildren(el, host); + return (vals, ctx, key) => { + const props = { + key, + __hintSize: hintSize, + __tplId: tplId, + __hostStyle: styleGet ? hostPositionStyle(styleGet(vals)) : void 0 + }; + for (const [k, g] of propGetters) { + const v = g(vals); + if (k === "dcProps") { + if (v && typeof v === "object") Object.assign(props, v); + continue; + } + props[k] = v; + } + if (kids.length) props.children = kids.map((b, j) => b(vals, ctx, j)); + return h(host.component(name), props); + }; + } + function walkXImport(el, host) { + const globalNameGet = compileAttr( + el.getAttribute("component-from-global-scope") || "" + ); + const exportNameGet = compileAttr( + el.getAttribute("component") || el.getAttribute("name") || "" + ); + const fromRaw = el.getAttribute("from") || (el.getAttribute("component-from-global-scope") ? "" : el.getAttribute("src") || el.getAttribute("import") || ""); + const urls = fromRaw.trim() ? fromRaw.trim().split(/\s+/) : []; + const url = urls.length ? urls[urls.length - 1] : ""; + const kindOf = (u) => /\.(jsx|tsx)(\?|#|$)/i.test(u) ? "jsx" : "js"; + const tplId = el.getAttribute("data-dc-tpl"); + const styleRaw = el.getAttribute("style"); + el.removeAttribute("style"); + const styleGet = styleRaw != null ? compileAttr(styleRaw) : null; + const wrap = tplId != null || styleGet != null; + const { propGetters, hintSize } = collectProps(el, "x-import", host); + const hasContent = el.children.length > 0 || !!(el.textContent || "").trim(); + const deckKeyed = hasContent && isDeckMountTag(el) ? walkDeckChildren(el, host) : null; + const kids = deckKeyed ? deckKeyed.kids : hasContent ? walkChildren(el, host) : []; + const kidKeys = deckKeyed?.keys ?? null; + const urlBindable = fromRaw.includes("{{"); + if (urls.length && !urlBindable) { + let prev; + for (const u of urls) prev = host.loadExternal(kindOf(u), u, prev); + } + const evalName = (g, vals) => { + const v = g(vals); + const s = v == null ? "" : String(v); + return s.includes("{{") ? "" : s; + }; + return (vals, ctx, key) => { + const globalName = evalName(globalNameGet, vals); + const name = globalName || evalName(exportNameGet, vals); + const C = !name || urlBindable ? null : globalName ? host.resolveExternalGlobal(url, globalName) : host.resolveExternal(url, name); + const hostStyle = styleGet ? hostPositionStyle(styleGet(vals)) : void 0; + const wrapper = wrap ? { + key, + className: "sc-host-x", + "data-dc-tpl": tplId, + style: hostStyle || { display: "contents" } + } : null; + if (!C) { + const error = urlBindable ? "x-import `from` cannot contain {{ \u2026 }} \u2014 module URLs are resolved at parse time; use a literal URL" : host.resolveExternalError(url, name); + const ph = host.placeholder({ + key: wrapper ? void 0 : key, + name, + hintSize, + error + }); + return wrapper ? h("div", wrapper, ph) : ph; + } + const props = wrapper ? {} : { key }; + let unresolvedHole = false; + for (const [k, g] of propGetters) { + if (k === "component" || k === "componentFromGlobalScope" || k === "from") { + continue; + } + const v = g(vals); + if (v === void 0) unresolvedHole = true; + if (k === "dcProps") { + if (v && typeof v === "object") Object.assign(props, v); + continue; + } + props[k] = v; + } + if (unresolvedHole && ctx?.__htmlStreamingNow) { + const ph = host.placeholder({ + key: wrapper ? void 0 : key, + name, + hintSize, + error: null + }); + return wrapper ? h("div", wrapper, ph) : ph; + } + if (kids.length) { + props.children = renderDeckKids(kids, kidKeys, vals, ctx); + } + return wrapper ? h("div", wrapper, h(C, props)) : h(C, props); + }; + } + function contentKey(el) { + const clone = el.cloneNode(true); + for (const d of clone.querySelectorAll("*")) { + while (d.attributes.length) d.removeAttribute(d.attributes[0].name); + } + const s = clone.innerHTML; + let h2 = 5381; + for (let i = 0; i < s.length; i++) h2 = (h2 << 5) + h2 + s.charCodeAt(i) | 0; + return s.length + "." + (h2 >>> 0).toString(36); + } + var NEVER_CONTENT_KEYED = new Set( + "script style textarea option title select canvas iframe video audio".split( + " " + ) + ); + var NOT_INLINE_SELECTOR = ":not(" + [...INLINE_TEXT_TAGS].join(",") + ")"; + function walkElement(el, host) { + const realTag = RAW_UNWRAP[el.localName] || el.localName; + const tplId = el.getAttribute("data-dc-tpl"); + const inlineOnly = el.childNodes.length > 0 && !NEVER_CONTENT_KEYED.has(realTag) && el.querySelector(NOT_INLINE_SELECTOR) === null; + const keySuffix = inlineOnly ? "|" + contentKey(el) : ""; + const { propGetters, pseudoClasses } = collectProps(el, "dom", host); + const deckKeyed = isDeckMountTag(el) ? walkDeckChildren(el, host) : null; + const kids = deckKeyed ? deckKeyed.kids : walkChildren(el, host); + const kidKeys = deckKeyed?.keys ?? null; + return (vals, ctx, key) => { + const props = { + key: key + keySuffix, + "data-dc-tpl": tplId + }; + for (const [k, g] of propGetters) { + let v = g(vals); + if (k === "style" && typeof v === "string") v = cssToObj(v); + if ((k === "value" || k === "checked") && v === void 0) { + v = k === "checked" ? false : ""; + } + props[k] = v; + } + if (pseudoClasses.length) { + props.className = [props.className, ...pseudoClasses].filter(Boolean).join(" "); + } + return h(realTag, props, ...renderDeckKids(kids, kidKeys, vals, ctx)); + }; + } + + // src/logic.ts + var StreamableLogic = class { + constructor(props) { + __publicField(this, "props"); + __publicField(this, "state", {}); + /** Back-pointer to the wrapper component, installed after construction. */ + __publicField(this, "__host"); + this.props = props || {}; + } + setState(update, cb) { + this.__host && this.__host.__setLogicState(update, cb); + } + forceUpdate() { + this.__host && this.__host.forceUpdate(); + } + componentDidMount() { + } + componentDidUpdate(_prevProps) { + } + componentWillUnmount() { + } + /** The flat object the template renders against (merged over props). */ + renderVals() { + return {}; + } + }; + function evalDcLogic(src) { + //! nosemgrep: eval-and-function-constructor + const fn = new Function( + "DCLogic", + "StreamableLogic", + "React", + src + '\n;return (typeof Component!=="undefined"&&Component)||undefined;' + ); + return fn(StreamableLogic, StreamableLogic, getReact()); + } + + // src/component.ts + function shallowEqual(a, b) { + if (!b) return false; + const ak = Object.keys(a).filter((k) => k !== "children"); + const bk = Object.keys(b).filter((k) => k !== "children"); + if (ak.length !== bk.length) return false; + for (const k of ak) if (a[k] !== b[k]) return false; + return true; + } + function Placeholder({ + name, + hintSize, + streaming, + error + }) { + const [w, hgt] = (hintSize || "100%,60px").split(","); + return h( + "div", + { + className: "sc-placeholder" + (streaming ? " sc-streaming" : ""), + style: { width: w.trim(), height: hgt && hgt.trim() }, + title: name + }, + error ? h( + "div", + { className: "sc-placeholder-error" }, + (name ? name + ": " : "") + error + ) : null + ); + } + function hintToMin(hint) { + if (!hint) return void 0; + const [w, hgt] = hint.split(","); + return { minWidth: w.trim(), minHeight: hgt && hgt.trim() }; + } + function createComponentFactory(registry, ensureFetched) { + const React = getReact(); + const AncestorContext = React.createContext([]); + class StreamableComponent extends React.Component { + constructor(props) { + super(props); + __publicField(this, "__name"); + __publicField(this, "__sub"); + __publicField(this, "__needsDidMount", false); + /** Snapshot of the registry's streaming flags taken at render time — + * builders read it off the RenderCtx (this) to pick placeholder vs + * render-nothing for unresolved values. */ + __publicField(this, "__streamingNow", false); + __publicField(this, "__htmlStreamingNow", false); + /** When a construct throws, remember the (class, registry.ver, props) + * triple so render-time reconcile doesn't re-attempt it on every parent + * re-render. A registry bump (new class, template, external module + * resolving via bumpAll) changes `ver` and breaks the memo so an + * env-dependent constructor can self-heal. */ + __publicField(this, "__failedLogic", null); + __publicField(this, "__failedUserProps", null); + __publicField(this, "__failedVer", -1); + /** Per-instance constructor error — kept here (not on the registry entry) + * so one instance's successful construct can't hide a sibling's failure, + * and a construct can never wipe an eval error `updateJs` recorded on + * `r.logicError`. */ + __publicField(this, "__ctorError", null); + __publicField(this, "logic"); + this.__name = props.__name; + this.state = { __v: 0, __err: null }; + this.__sub = () => { + if (this.state.__err) this.setState({ __err: null }); + this.forceUpdate(); + }; + this.__makeLogic(registry.get(this.__name).Logic, null); + ensureFetched(this.__name); + } + /** Error-boundary hook: a render crash anywhere in this DC's subtree + * (its own template, an x-import'd component, a child DC without its + * own deeper boundary) lands here instead of unmounting the page. */ + static getDerivedStateFromError(e) { + return { __err: e instanceof Error && e.message ? e.message : String(e) }; + } + componentDidCatch(e, info) { + console.error( + "[dc-runtime] render error in <" + this.__name + ">:", + e, + info?.componentStack || "" + ); + } + /** Instantiate the logic class (or the no-op base) and adopt `prevState` + * over its initial state — used both at mount and on hot-swap. */ + __makeLogic(Logic, prevState) { + const L = Logic || StreamableLogic; + try { + this.logic = new L(this.__userProps()); + this.__failedLogic = null; + this.__failedUserProps = null; + this.__ctorError = null; + } catch (e) { + console.error(e); + this.__failedLogic = Logic; + this.__failedUserProps = this.__userProps(); + this.__failedVer = registry.get(this.__name).ver; + this.__ctorError = this.__name + ": " + (e instanceof Error && e.message ? e.message : String(e)); + this.logic = new StreamableLogic( + this.__userProps() + ); + } + this.logic.__host = this; + if (prevState) + this.logic.state = { ...this.logic.state || {}, ...prevState }; + } + /** The props the author's logic + template see — internal __-prefixed + * wiring stripped. */ + __userProps() { + const { __name, __hintSize, __tplId, __hostStyle, ...rest } = this.props; + return rest; + } + __setLogicState(update, cb) { + const prev = this.logic.state; + const patch = typeof update === "function" ? update(prev) : update; + this.logic.state = { ...prev, ...patch }; + this.setState((s) => ({ __v: s.__v + 1 }), cb); + } + /** Swap the logic instance when the registry's Logic class changed + * (streaming completion, hot reload). State carries over; didMount + * re-fires after the swap commits so refs exist. */ + __reconcileLogic() { + const r = registry.get(this.__name); + const Next = r.Logic; + const Cur = this.logic.constructor; + if (Next === Cur || !Next && Cur === StreamableLogic || Next === this.__failedLogic && r.ver === this.__failedVer && shallowEqual(this.__userProps(), this.__failedUserProps)) { + return; + } + if (!this.__needsDidMount) { + try { + this.logic.componentWillUnmount(); + } catch (e) { + console.error(e); + } + } + this.__makeLogic(Next, this.logic.state); + this.__needsDidMount = true; + } + componentDidMount() { + registry.get(this.__name).subs.add(this.__sub); + try { + this.logic.componentDidMount(); + } catch (e) { + console.error(e); + } + } + componentDidUpdate(prevProps) { + this.logic.props = this.__userProps(); + if (this.__needsDidMount) { + if (this.state.__err || !registry.get(this.__name).tpl) return; + this.__needsDidMount = false; + try { + this.logic.componentDidMount(); + } catch (e) { + console.error(e); + } + } else { + try { + this.logic.componentDidUpdate(prevProps); + } catch (e) { + console.error(e); + } + } + } + componentWillUnmount() { + registry.get(this.__name).subs.delete(this.__sub); + if (!this.__needsDidMount) { + try { + this.logic.componentWillUnmount(); + } catch (e) { + console.error(e); + } + } + } + render() { + const r = registry.get(this.__name); + const cls = "sc-host" + (r.htmlStreaming ? " sc-streaming-html" : "") + (r.jsStreaming ? " sc-streaming-js" : ""); + const hintStyle = r.htmlStreaming ? hintToMin(this.props.__hintSize) : void 0; + const hostStyle = this.props.__hostStyle || hintStyle ? { ...hintStyle || {}, ...this.props.__hostStyle || {} } : void 0; + const hostBase = { + className: cls, + style: hostStyle, + "data-sc-name": this.__name, + "data-dc-tpl": this.props.__tplId + }; + const chain = Array.isArray(this.context) ? this.context : []; + if (chain.includes(this.__name)) { + const cycle = [ + ...chain.slice(chain.indexOf(this.__name)), + this.__name + ].join(" \u2192 "); + return h( + "div", + { ...hostBase, className: cls + " sc-has-error" }, + h(Placeholder, { + name: this.__name, + hintSize: this.props.__hintSize, + error: "circular import: " + cycle + }) + ); + } + if (this.state.__err) { + return h( + "div", + { ...hostBase, className: cls + " sc-has-error" }, + h( + "div", + { className: "sc-logic-error", "data-omelette-chrome": "" }, + this.__name + ": " + this.state.__err + ), + h(Placeholder, { + name: this.__name, + hintSize: this.props.__hintSize, + error: this.state.__err + }) + ); + } + this.__reconcileLogic(); + if (!r.tpl) { + return h( + "div", + hostBase, + h(Placeholder, { name: this.__name, hintSize: this.props.__hintSize }) + ); + } + const userProps = this.__userProps(); + this.logic.props = userProps; + let vals = userProps; + let renderErr = r.logicError || this.__ctorError; + try { + vals = { ...userProps, ...this.logic.renderVals() || {} }; + } catch (e) { + console.error(e); + renderErr = this.__name + ".renderVals(): " + (e instanceof Error && e.message ? e.message : String(e)); + } + this.__streamingNow = !!(r.htmlStreaming || r.jsStreaming); + this.__htmlStreamingNow = !!r.htmlStreaming; + return h( + "div", + { ...hostBase, className: cls + (renderErr ? " sc-has-error" : "") }, + renderErr && h( + "div", + { className: "sc-logic-error", "data-omelette-chrome": "" }, + renderErr + ), + h( + AncestorContext.Provider, + { value: [...chain, this.__name] }, + r.tpl(vals, this) + ) + ); + } + } + __publicField(StreamableComponent, "contextType", AncestorContext); + const named = /* @__PURE__ */ new Map(); + function getDC(name) { + const hit = named.get(name); + if (hit) return hit; + function Dispatcher(p) { + const [, setTick] = React.useState(0); + React.useEffect(() => { + const sub = () => setTick((n) => n + 1); + registry.get(name).subs.add(sub); + return () => { + registry.get(name).subs.delete(sub); + }; + }, []); + ensureFetched(name); + return h(StreamableComponent, { ...p, __name: name }); + } + Dispatcher.displayName = name; + named.set(name, Dispatcher); + return Dispatcher; + } + return { + getDC, + StreamableComponent + }; + } + + // src/bundled.ts + function bundledBlob(url) { + const blobs = window.__resourceBlobs; + const b = blobs ? blobs[url.split("#")[0]] : void 0; + return b instanceof Blob ? b : null; + } + + // src/cdn.ts + var REACT_URL = "https://unpkg.com/react@18.3.1/umd/react.production.min.js"; + var REACT_SRI = "sha384-DGyLxAyjq0f9SPpVevD6IgztCFlnMF6oW/XQGmfe+IsZ8TqEiDrcHkMLKI6fiB/Z"; + var REACT_DOM_URL = "https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"; + var REACT_DOM_SRI = "sha384-gTGxhz21lVGYNMcdJOyq01Edg0jhn/c22nsx0kyqP0TxaV5WVdsSH1fSDUf5YJj1"; + var BABEL_URL = "https://unpkg.com/@babel/standalone@7.29.0/babel.min.js"; + var BABEL_SRI = "sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y"; + function cdnScriptFor(url, sri) { + const res = window.__resources; + const v = res ? res[url] : void 0; + return typeof v === "string" && v ? { src: v } : { src: url, integrity: sri }; + } + + // src/external.ts + var isCustomElementName = (n) => !n.includes(".") && n.includes("-"); + function isRenderableType(g) { + if (typeof g === "function") return !isElementClass(g); + return typeof g === "object" && g !== null && typeof g.$$typeof === "symbol"; + } + function resolveDottedPath(root, name) { + let cur = root; + for (const seg of name.split(".")) { + if (cur == null) return void 0; + cur = cur[seg]; + } + return cur; + } + var GLOBAL_POLL_INTERVAL_MS = 50; + var GLOBAL_POLL_TIMEOUT_MS = 3e4; + function createExternalModules(onResolved) { + const cache = /* @__PURE__ */ new Map(); + let babelLoading = null; + const reportedMissing = /* @__PURE__ */ new Map(); + const polling = /* @__PURE__ */ new Set(); + function ensureBabel() { + if (window.Babel) return Promise.resolve(); + if (babelLoading) return babelLoading; + const babel = cdnScriptFor(BABEL_URL, BABEL_SRI); + babelLoading = new Promise((res, rej) => { + const s = document.createElement("script"); + s.src = babel.src; + if (babel.integrity) { + s.integrity = babel.integrity; + s.crossOrigin = "anonymous"; + } + s.onload = () => res(); + s.onerror = rej; + document.head.appendChild(s); + }); + return babelLoading; + } + const pending = /* @__PURE__ */ new Map(); + function load(kind, url, after) { + const existing = pending.get(url); + if (existing) return existing; + cache.set(url, null); + console.info("[dc-runtime] x-import: loading", url, "(" + kind + ")"); + const ready = Promise.all([ + kind === "jsx" ? ensureBabel() : Promise.resolve(), + after ?? Promise.resolve() + ]); + const p = ready.then(() => { + const pre = bundledBlob(url); + if (pre) return pre.text(); + return fetch(url).then((r) => { + if (!r.ok) throw new Error("HTTP " + r.status); + return r.text(); + }); + }).then((src) => { + const code = kind === "jsx" ? window.Babel.transform(src, { + filename: url, + presets: ["react", "typescript"] + }).code : src; + const module = { exports: {} }; + const before = new Set(Object.keys(window)); + //! nosemgrep: eval-and-function-constructor + new Function("React", "module", "exports", "require", code)( + getReact(), + module, + module.exports, + () => ({}) + ); + const globals = {}; + for (const k of Object.keys(window)) { + if (!before.has(k) && typeof window[k] === "function") { + globals[k] = window[k]; + } + } + cache.set(url, { mod: module.exports, globals }); + console.info( + "[dc-runtime] x-import: loaded", + url, + "\u2014 exports:", + Object.keys(module.exports), + "window globals:", + Object.keys(globals) + ); + onResolved(); + }).catch((e) => { + cache.set(url, { + mod: {}, + globals: {}, + error: "failed to load: " + (e instanceof Error && e.message ? e.message : String(e)) + }); + console.error( + "[dc-runtime] x-import: FAILED to load", + url, + "(" + kind + ")", + e + ); + onResolved(); + }); + pending.set(url, p); + return p; + } + function resolve2(url, name) { + const entry = cache.get(url); + if (!entry) return null; + const { mod, globals } = entry; + const C = mod && mod[name] || globals && globals[name] || typeof window !== "undefined" && window[name] || mod && mod.default; + if (typeof C === "function") return C; + const key = url + "\0" + name; + if (!reportedMissing.has(key)) { + reportedMissing.set( + key, + entry.error || 'no export named "' + name + '" (has: ' + Object.keys(mod).join(", ") + ")" + ); + console.error( + "[dc-runtime] x-import: module", + url, + "loaded but has no component named", + JSON.stringify(name), + "\u2014 available exports:", + Object.keys(mod), + "window globals:", + Object.keys(globals), + ". The module must `module.exports = {" + name + "}` or set `window." + name + "`." + ); + } + return null; + } + function waitForGlobal(name) { + if (polling.has(name)) return; + polling.add(name); + const started = Date.now(); + const isCE = isCustomElementName(name); + const tick = () => { + const found = isCE ? customElements.get(name) : isRenderableType(resolveDottedPath(window, name)); + if (found) { + polling.delete(name); + onResolved(); + return; + } + if (Date.now() - started >= GLOBAL_POLL_TIMEOUT_MS) { + console.warn( + "[dc-runtime] x-import: global", + JSON.stringify(name), + "never appeared on window after " + GLOBAL_POLL_TIMEOUT_MS + "ms" + ); + return; + } + setTimeout(tick, GLOBAL_POLL_INTERVAL_MS); + }; + setTimeout(tick, GLOBAL_POLL_INTERVAL_MS); + } + function resolveGlobal(url, name) { + const isCE = isCustomElementName(name); + if (!url) { + if (isCE) { + if (customElements.get(name)) return name; + waitForGlobal(name); + return null; + } + const g2 = resolveDottedPath(window, name); + if (isRenderableType(g2)) return g2; + waitForGlobal(name); + return null; + } + const entry = cache.get(url); + if (!entry) return null; + if (isCE && customElements.get(name)) return name; + const g = entry.globals[name] ?? resolveDottedPath(window, name); + if (isRenderableType(g)) return g; + if (name.includes(".")) return null; + const key = url + "\0global\0" + name; + if (!reportedMissing.has(key)) { + reportedMissing.set(key, null); + if (isCE && !customElements.get(name)) { + console.warn( + "[dc-runtime] x-import:", + url, + "loaded but no custom element", + JSON.stringify(name), + "is registered and window." + name + " is not a function \u2014 rendering <" + name + "> as an unknown element." + ); + } + } + return name; + } + function getError(url, name) { + const entry = cache.get(url); + if (entry?.error) return entry.error; + return reportedMissing.get(url + "\0" + name) || null; + } + return { load, resolve: resolve2, resolveGlobal, getError }; + } + function isElementClass(g) { + try { + return typeof g === "function" && typeof HTMLElement !== "undefined" && g.prototype instanceof HTMLElement; + } catch { + return false; + } + } + + // src/atomics.ts + var ATOMIC_CSS = ( + // layout + ".fx{display:flex}.col{display:flex;flex-direction:column}.grid{display:grid}.ac{align-items:center}.jc{justify-content:center}.jb{justify-content:space-between}.f1{flex:1}.noshrink{flex-shrink:0}.wrap{flex-wrap:wrap}.fw5{font-weight:500}.fw6{font-weight:600}.fw7{font-weight:700}.fw8{font-weight:800}.fs11{font-size:11px}.fs12{font-size:12px}.fs13{font-size:13px}.fs14{font-size:14px}.fs15{font-size:15px}.fs16{font-size:16px}.fs20{font-size:20px}.fs22{font-size:22px}.upper{text-transform:uppercase}.tc{text-align:center}.nowrap{white-space:nowrap}.gap8{gap:8px}.gap10{gap:10px}.gap12{gap:12px}.gap16{gap:16px}.gap24{gap:24px}.m0{margin:0}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}.posrel{position:relative}.posabs{position:absolute}.round{border-radius:50%}.ohide{overflow:hidden}.bbox{box-sizing:border-box}.pointer{cursor:pointer}.w100{width:100%}.b0{border:none}" + ); + + // src/helmet.ts + var DESIGN_DOC_MODE_RE = /]*\bname\s*=\s*["']design_doc_mode["'][^>]*\b(?:content|value)\s*=\s*["'](\w+)["']/i; + var CANVAS_BG_LIGHT = "#f0eee6"; + var CANVAS_BG_DARK = "#2e2c26"; + function createHelmetManager(doc, isStreaming) { + const mounted = /* @__PURE__ */ new Set(); + const live = /* @__PURE__ */ new Map(); + let designDocMode = null; + let canvasStyleEl = null; + let appTheme = "light"; + try { + const ds = doc.documentElement.dataset.theme; + appTheme = ds === "dark" || ds === "light" ? ds : new URLSearchParams(doc.defaultView?.location.search ?? "").get( + "theme" + ) === "dark" ? "dark" : "light"; + } catch { + } + function applyCanvasBg() { + if (!canvasStyleEl) return; + const bg = appTheme === "dark" ? CANVAS_BG_DARK : CANVAS_BG_LIGHT; + canvasStyleEl.textContent = `html,body{background:${bg}}#dc-root>.sc-host{position:relative}`; + } + function postDesignMode(mode) { + if (window.parent === window) return; + try { + window.parent.postMessage({ type: "__dc_design_mode", mode }, "*"); + } catch { + } + } + function setDesignDocMode(mode) { + if (mode === designDocMode) return; + designDocMode = mode; + postDesignMode(mode); + if (mode === "canvas") { + doc.documentElement.setAttribute("data-dc-canvas", ""); + canvasStyleEl = doc.createElement("style"); + canvasStyleEl.setAttribute("data-dc-canvas", ""); + applyCanvasBg(); + doc.head.appendChild(canvasStyleEl); + } else { + doc.documentElement.removeAttribute("data-dc-canvas"); + canvasStyleEl?.remove(); + canvasStyleEl = null; + } + } + window.addEventListener("message", (e) => { + const type = e.data && e.data.type; + if (type === "__dc_theme") { + const t = e.data.theme; + if (t === "light" || t === "dark") { + appTheme = t; + applyCanvasBg(); + } + return; + } + if (!designDocMode || type !== "__dc_probe") return; + postDesignMode(designDocMode); + }); + function compile(node) { + const raw = [...node.children]; + const helmetClosed = node.nextSibling != null || node.parentNode?.nextSibling != null; + if (node.hasAttribute("data-dc-atomics") && !mounted.has("__dc-atomics")) { + mounted.add("__dc-atomics"); + const el = doc.createElement("style"); + el.id = "__dc-atomics"; + el.textContent = ATOMIC_CSS; + doc.head.appendChild(el); + } + return (_vals, ctx) => { + const name = ctx && ctx.__name || ""; + const streaming = !!(name && isStreaming(name)); + for (let i = 0; i < raw.length; i++) { + const child = raw[i]; + const tag = child.tagName; + const mayBePartial = streaming && !helmetClosed && i === raw.length - 1; + if (tag === "SCRIPT") { + if (mayBePartial) continue; + const key = "SCRIPT|" + (child.getAttribute("src") || child.textContent || ""); + if (mounted.has(key)) continue; + mounted.add(key); + const el = doc.createElement("script"); + for (const { name: an, value } of [...child.attributes]) + el.setAttribute(an, value); + if (child.textContent) el.textContent = child.textContent; + doc.head.appendChild(el); + } else if (tag === "LINK" || tag === "META") { + if (mayBePartial) continue; + const key = tag + "|" + (child.getAttribute("href") || child.getAttribute("src") || child.outerHTML); + if (mounted.has(key)) continue; + mounted.add(key); + if (tag === "LINK") { + const rel = (child.getAttribute("rel") || "").toLowerCase().split(/\s+/); + const href = (child.getAttribute("href") || "").trim(); + const res = window.__resources; + const pre = res && rel.includes("stylesheet") && !rel.includes("alternate") ? res[href] : void 0; + const blob = typeof pre === "string" && pre ? bundledBlob(pre) : null; + if (blob) { + const el = doc.createElement("style"); + if (child.hasAttribute("disabled")) { + el.setAttribute("media", "not all"); + } else if (child.getAttribute("media")) { + el.setAttribute("media", child.getAttribute("media")); + } + if (child.getAttribute("title")) + el.setAttribute("title", child.getAttribute("title")); + void blob.text().then((css) => { + el.textContent = css; + }); + doc.head.appendChild(el); + continue; + } + } + doc.head.appendChild(child.cloneNode(true)); + } else { + const key = name + "|" + i; + let el = live.get(key); + if (!el || el.tagName !== tag) { + if (el) el.remove(); + el = doc.createElement(tag.toLowerCase()); + live.set(key, el); + doc.head.appendChild(el); + } + for (const { name: an, value } of [...child.attributes]) { + if (el.getAttribute(an) !== value) el.setAttribute(an, value); + } + if (el.textContent !== child.textContent) + el.textContent = child.textContent; + } + } + return null; + }; + } + return { compile, setDesignDocMode }; + } + + // src/pseudo.ts + function scanUnquotedUrl(css, i) { + if (css[i] !== "u" && css[i] !== "U" || css.slice(i, i + 4).toLowerCase() !== "url(" || /[a-z0-9_-]/i.test(css[i - 1] ?? "")) { + return -1; + } + let j = i + 4; + while (j < css.length && /\s/.test(css[j])) j++; + if (css[j] === '"' || css[j] === "'") return -1; + while (j < css.length && css[j] !== ")") { + if (css[j] === "\\") j++; + j++; + } + return j < css.length ? j + 1 : css.length; + } + function stripComments(css) { + let out = ""; + let quote = ""; + for (let i = 0; i < css.length; i++) { + const c = css[i]; + if (quote) { + if (c === "\\") { + out += c + (css[i + 1] ?? ""); + i++; + continue; + } + if (c === quote) quote = ""; + out += c; + } else if (c === "'" || c === '"') { + quote = c; + out += c; + } else if (c === "/" && css[i + 1] === "*") { + const end = css.indexOf("*/", i + 2); + i = end === -1 ? css.length : end + 1; + out += " "; + } else { + const end = scanUnquotedUrl(css, i); + if (end === -1) out += c; + else { + out += css.slice(i, end); + i = end - 1; + } + } + } + return out; + } + function importantify(css) { + css = stripComments(css); + const decls = []; + let start = 0; + let depth = 0; + let quote = ""; + for (let i = 0; i < css.length; i++) { + const c = css[i]; + if (quote) { + if (c === "\\") i++; + else if (c === quote) quote = ""; + } else if (c === "'" || c === '"') quote = c; + else if (c === "(") depth++; + else if (c === ")") depth = Math.max(0, depth - 1); + else if (c === ";" && depth === 0) { + decls.push(css.slice(start, i)); + start = i + 1; + } else { + const end = scanUnquotedUrl(css, i); + if (end !== -1) i = end - 1; + } + } + decls.push(css.slice(start)); + return decls.map((d) => d.trim()).filter(Boolean).map((d) => /!\s*important$/i.test(d) ? d : d + " !important").join(";"); + } + function createPseudoSheet(doc) { + let el = null; + const cache = /* @__PURE__ */ new Map(); + let n = 0; + return (pseudo, css) => { + const k = pseudo + "|" + css; + const hit = cache.get(k); + if (hit) return hit; + if (!el) { + el = doc.createElement("style"); + doc.head.appendChild(el); + } + const cls = "scp" + (n++).toString(36); + const isPseudoElement = pseudo === "before" || pseudo === "after"; + const sel = isPseudoElement ? "." + cls + "::" + pseudo : "." + cls + ":" + pseudo; + el.sheet.insertRule( + sel + "{" + (isPseudoElement ? css : importantify(css)) + "}", + el.sheet.cssRules.length + ); + cache.set(k, cls); + return cls; + }; + } + + // src/registry.ts + function createRegistry() { + const entries = /* @__PURE__ */ Object.create(null); + function get(name) { + return entries[name] || (entries[name] = { + html: "", + tpl: null, + Logic: null, + jsStreaming: false, + htmlStreaming: false, + ver: 0, + subs: /* @__PURE__ */ new Set(), + fetched: false + }); + } + function bump(name) { + const r = get(name); + r.ver++; + for (const fn of r.subs) fn(); + } + return { + entries, + get, + bump, + bumpAll() { + for (const n in entries) bump(n); + } + }; + } + + // src/runtime.ts + var COMPONENT_DIR = "."; + function createRuntime(doc = document) { + const registry = createRegistry(); + const pseudoClass = createPseudoSheet(doc); + const helmet = createHelmetManager( + doc, + (name) => registry.get(name).htmlStreaming + ); + const external = createExternalModules(() => registry.bumpAll()); + const factory = createComponentFactory(registry, ensureFetched); + const host = { + component: (name) => factory.getDC(name), + placeholder: (props) => h(Placeholder, props), + helmet: (node) => helmet.compile(node), + loadExternal: (kind, url, after) => external.load(kind, url, after), + resolveExternal: (url, name) => external.resolve(url, name), + resolveExternalGlobal: (url, name) => external.resolveGlobal(url, name), + resolveExternalError: (url, name) => external.getError(url, name), + pseudoClass + }; + function ensureFetched(name) { + const r = registry.get(name); + if (r.fetched) return; + r.fetched = true; + const url = COMPONENT_DIR + "/" + encodeURIComponent(name) + ".dc.html"; + const res = window.__resources; + const pre = res ? res[url] : void 0; + const target = typeof pre === "string" && pre ? pre : url; + const blob = bundledBlob(target); + (blob ? blob.text() : fetch(target).then((res2) => { + if (!res2.ok) { + console.error( + '[dc-runtime] sibling fetch for "' + name + '" failed:', + url, + "returned", + res2.status, + "\u2014 the reference renders as an empty placeholder." + ); + return ""; + } + return res2.text(); + })).then((t) => { + if (!t) return; + const parsed = parseDcText(t); + if (!parsed) { + console.error( + '[dc-runtime] sibling fetch for "' + name + '":', + url, + "has no block \u2014 not a Design Component." + ); + return; + } + if (parsed.props) r.propsMeta = parsed.props; + if (parsed.preview) r.preview = parsed.preview; + if (parsed.template && !r.html) updateHtml(name, parsed.template); + if (parsed.js && !r.Logic) updateJs(name, parsed.js); + }).catch( + (e) => console.error( + '[dc-runtime] sibling fetch for "' + name + '" threw:', + url, + e + ) + ); + } + let rootName = null; + function updateHtml(name, html) { + const r = registry.get(name); + r.html = html; + if (name === rootName) { + const mode = DESIGN_DOC_MODE_RE.exec(html)?.[1] ?? null; + if (mode || !r.htmlStreaming) helmet.setDesignDocMode(mode); + } + try { + r.tpl = compileTemplate(html, host); + } catch (e) { + console.error("[dc-runtime] template compile FAILED for", name, e); + } + registry.bump(name); + } + function updateJs(name, src) { + const r = registry.get(name); + const seq = r.jsSeq = (r.jsSeq || 0) + 1; + try { + const Cls = evalDcLogic(src); + if (r.jsSeq !== seq) return; + if (typeof Cls !== "function") { + r.logicError = name + ".dc.html: + + + + + + +
                                            + +
                                            + +

                                            Pour les établissements

                                            Un projet par établissement. Un réseau par classe.

                                            Chaque établissement a son espace isolé sur notre cloud hébergé en France, à Paris. Chaque classe a son propre réseau, sans IP publique.

                                            Demander un devis

                                            Réponse sous 48 h · bon de commande et Chorus Pro

                                            Chacun son rôle.

                                            • Administrateur

                                              Gère l’établissement

                                              Crée les classes, gère les enseignants et les quotas.

                                            • Enseignant

                                              Anime la séance

                                              Réserve une séance, suit la classe en direct, prend la main sur une console.

                                            • Élève

                                              Travaille

                                              Se connecte avec sa fiche, lance le lab, lève la main s’il bloque.

                                            • Formateur

                                              Forme des adultes

                                              Anime des sessions en titre professionnel.

                                            Ce que votre intendance et votre DSI vérifient.

                                            • Licences, devis, factures

                                              Ajout et retrait d’élèves, bons de commande, factures déposées sur Chorus Pro, conventions.

                                              Espace établissement →

                                            • Intégration et sécurité

                                              Hébergement en France, RGPD, prérequis réseau, authentification unique.

                                              Fiche technique →

                                            • Une bibliothèque à dupliquer

                                              Des séquences reliées aux référentiels : cours, TD, quiz et lab. Les quiz s’exportent en GIFT et Moodle XML.

                                              Voir la bibliothèque →

                                            Équiper votre établissement.

                                            Dites-nous combien de classes et quelles formations. On vous répond avec une proposition.

                                            + + + + +
                                            +
                                            + + + + + diff --git a/design/vitrine/fonctionnalites.html b/design/vitrine/fonctionnalites.html new file mode 100644 index 0000000..8e59632 --- /dev/null +++ b/design/vitrine/fonctionnalites.html @@ -0,0 +1,96 @@ + + + + + + Fonctionnalités · Syllabus + + + + + + + + + +
                                            + +
                                            + +

                                            Fonctionnalités

                                            Tout ce qu’il faut pour une classe, en ligne.

                                            Cours, TP sur machine Linux, éditeur de code, évaluations et suivi des élèves, dans un seul site. Choisissez un outil pour voir à quoi il sert, puis essayez sa démo.

                                            Créer une classe gratuite

                                            Sans carte bancaire

                                            + +
                                            +
                                            +

                                            Pourquoi un tel outil ?

                                            +

                                            Suivre chaque élève, même dans une classe de 35.

                                            +
                                            +

                                            Avec des classes entières et une charge de travail déjà lourde, suivre chaque élève individuellement devient presque impossible. Un élève en difficulté décroche vite, souvent sans bruit, et le prof, pris par ses nombreuses classes, s’en rend compte trop tard.

                                            +

                                            Syllabus surveille tout, sans être intrusif. Le QCM de début d’heure, celui qui suit la lecture du cours, les TP, les devoirs et exercices maison : chaque trace remonte au prof. Il voit rapidement qui accompagner plus régulièrement, qui faire passer au premier rang, à qui demander de réexpliquer une notion.

                                            +

                                            C’est une supervision bienveillante et naturelle, qui ne remplace pas le regard du prof mais l’aide à savoir où concentrer ses efforts. Tout remonte dans le cockpit prof, d’où il pilote et supervise examens, devoirs maison, quiz et labs.

                                            +

                                            Dans les labs, chaque étape a ses indices, qui se débloquent après un certain nombre de tentatives. Ils ne remplacent pas l’aide d’un prof (ni une recherche Google 😉), mais ils poussent l’élève à réfléchir un tout petit peu plus avant de vous appeler. Et souvent, ils vous évitent les questions triviales.

                                            +

                                            Et dans l’autre sens, l’élève en excellence peut s’épanouir. Il aborde des notions plus avancées, avec une difficulté plus forte, sans prendre d’avance sur le programme : il explore des notions connexes qui développent sa culture générale.

                                            +

                                            Tout cela dans un unique but : faciliter votre travail.

                                            +
                                            +
                                            +
                                            +
                                            + Alerte douce +

                                            Un élève décroche

                                            +
                                            • 3 QCM de début d’heure sous la moyenne
                                            • Cours lu en 2 minutes au lieu de 15
                                            • Devoir maison non rendu
                                            +

                                            → Premier rang, notion à réexpliquer, suivi plus régulier.

                                            +
                                            +
                                            + Excellence +

                                            Un élève s’ennuie

                                            +
                                            • Tous les TP réussis du premier coup
                                            • 20/20 au QCM de lecture
                                            • Finit avant tout le monde
                                            +

                                            → Défis plus durs sur des notions connexes, sans prendre d’avance sur le programme.

                                            +
                                            + +
                                            + Labs +

                                            Un indice se débloque

                                            +
                                            1. Tentative 1 · échec
                                            2. Tentative 3 · 💡 Indice 1 : regarde la commande ip addr
                                            3. Tentative 5 · 💡 Indice 2 : le masque /26 donne 62 hôtes
                                            +

                                            → L’élève cherche d’abord. Vous gardez votre temps pour les vraies questions.

                                            +
                                            +
                                            +
                                            +

                                            Piloter

                                            Suivre la classe, l’établissement et le territoire.

                                            −40 dB

                                            Vous devenez le roi du silence grâce à la fonction « Lever la main ».

                                            Vos élèves n’auront plus que le droit de tousser ou de respirer !

                                            Tous les cours se téléchargent en PDF.

                                            CM complet, TD prêt à imprimer avec ses cases à remplir, correction à part, QCM papier.

                                            + + + + + + diff --git a/design/vitrine/images/logo-syllabus-icone.png b/design/vitrine/images/logo-syllabus-icone.png new file mode 100644 index 0000000..a1deeca Binary files /dev/null and b/design/vitrine/images/logo-syllabus-icone.png differ diff --git a/design/vitrine/index.html b/design/vitrine/index.html new file mode 100644 index 0000000..5394dc4 --- /dev/null +++ b/design/vitrine/index.html @@ -0,0 +1,75 @@ + + + + + + Syllabus — Une vraie machine Linux pour chaque élève + + + + + + + + + + + + + +
                                            + +
                                            + +

                                            VM Linux en ligne · plateforme d’enseignement clé en main

                                            Une VM Linux en quelques secondes. Toute votre classe, clé en main.

                                            Chaque élève ouvre sa propre machine Linux dans le navigateur en quelques secondes. Cours, TP, quiz, examens et suivi des élèves sont déjà prêts : vous enseignez, la plateforme s’occupe du reste.

                                            Créer une classe gratuite

                                            Sans carte bancaire · élève ? rejoindre ma classe

                                            • Hébergé en France

                                              Paris

                                            • RGPD

                                              données minimisées

                                            • 20 cursus

                                              du lycée au master

                                            • 443 seulement

                                              aucun port à ouvrir

                                            • 0 €

                                              sans carte bancaire

                                            Pour l’élève

                                            Un terminal Linux en 5 secondes.

                                            Chaque élève a sa propre machine Debian. Il clique, la console s’ouvre. Aucun poste du lycée à configurer.

                                            Essayer un lab sans compte →

                                            eleve@lab-07 · Debian 12
                                            eleve@lab-07:~$ ip -br addr
+ens18  UP  10.20.7.14/24
+eleve@lab-07:~$ ping -c1 10.20.7.1
+64 bytes from 10.20.7.1: time=0.4 ms
+eleve@lab-07:~$

                                            Correction

                                            Chaque étape se vérifie toute seule.

                                            Le lab contrôle directement la machine. L’élève sait s’il a réussi, et reçoit un indice s’il bloque.

                                            1. 1. Afficher l’adresse IP✓
                                            2. 2. Joindre la passerelle✓
                                            3. 3. Configurer le DNSÀ vérifier
                                            4. 4. Tester la résolution
                                            5. Indice 1 : le fichier se trouve dans /etc. Regardez son nom avec ls.

                                            Pour l’enseignant

                                            Le roi du silence : la fonction « Lever la main ».

                                            Vos élèves n’auront plus que le droit de tousser ou de respirer ! Les demandes arrivent dans l’ordre. Vous ouvrez la console de l’élève sans vous déplacer.

                                            Voir le tableau de bord prof →

                                            Mains levées

                                            3 en attente

                                            1. 1Noraétape 3 · depuis 2 minOuvrir sa console
                                            2. 2Samiétape 2 · depuis 4 minOuvrir sa console
                                            3. 3Jadeétape 1 · depuis 6 minOuvrir sa console

                                            Questions fréquentes.

                                            Combien ça coûte ?

                                            Les cours sont gratuits. Les TP sur VM : 29 € par mois pour une classe, ou 24 € par élève et par an pour un établissement.

                                            Faut-il installer quelque chose ?

                                            Non. Un navigateur suffit, même sur un vieux PC ou un Chromebook. Tout passe par HTTPS, port 443.

                                            Comment inscrire mes élèves ?

                                            Par code de classe, import CSV ou saisie rapide. Chaque élève reçoit une fiche de connexion, sans e-mail.

                                            Les cours se téléchargent-ils ?

                                            Oui. CM, TD avec cases à remplir, correction et QCM papier, en PDF.

                                            Où sont les données ?

                                            Sur un cloud hébergé en France. Les données des élèves sont supprimées 90 jours après l’archivage de la classe.

                                            Voir tous les tarifs →

                                            Votre prochain TP commence dans 5 secondes.

                                            Créer une classe gratuite

                                            Sans carte bancaire

                                            + + + + + + + diff --git a/design/vitrine/js/paillasse-terminal.js b/design/vitrine/js/paillasse-terminal.js new file mode 100644 index 0000000..da27d67 --- /dev/null +++ b/design/vitrine/js/paillasse-terminal.js @@ -0,0 +1,199 @@ +// Terminal élève Syllabus : xterm.js + un petit shell simulé (vitrine et lab d'essai). +// En production, le terminal se branche sur le proxy WebSocket de la console série Nova. +(function () { + var THEME = { + background: '#13233A', foreground: '#E8EDF5', cursor: '#FFD23F', cursorAccent: '#13233A', + selectionBackground: '#2B4A73', black: '#0D192B', red: '#FF7A66', green: '#7CF2C0', yellow: '#FFD23F', + blue: '#8DB4FF', magenta: '#FF6FB5', cyan: '#7CE3F2', white: '#E8EDF5', + brightBlack: '#6B7F99', brightRed: '#FF9A8A', brightGreen: '#7CF2C0', brightYellow: '#FFD23F', + brightBlue: '#A9C6FF', brightMagenta: '#FF8FC6', brightCyan: '#9CEBF7', brightWhite: '#FFFFFF' + }; + var G = '\x1b[1;92m', B = '\x1b[1;94m', Y = '\x1b[93m', R = '\x1b[91m', D = '\x1b[2m', X = '\x1b[0m'; + + function Shell(term, o) { + this.t = term; this.o = o; + this.user = o.user || 'eleve'; this.host = o.host || 'debian-lab'; + this.home = '/home/' + this.user; this.cwd = this.home; + this.dirs = new Set(['/', '/home', this.home, '/etc', '/tmp', '/var', '/var/log']); + this.files = new Map([ + [this.home + '/.bashrc', '# ~/.bashrc'], + ['/etc/hostname', this.host], + ['/etc/os-release', 'PRETTY_NAME="Debian GNU/Linux 13 (trixie)"\nID=debian'] + ]); + this.line = ''; this.hist = []; this.hi = 0; this.busy = false; + } + Shell.prototype.short = function (p) { return p === this.home ? '~' : p.indexOf(this.home + '/') === 0 ? '~' + p.slice(this.home.length) : p; }; + Shell.prototype.prompt = function () { this.t.write(G + this.user + '@' + this.host + X + ':' + B + this.short(this.cwd) + X + '$ '); }; + Shell.prototype.path = function (p) { + if (!p || p === '~') return this.home; + if (p.indexOf('~/') === 0) p = this.home + p.slice(1); + var parts = (p[0] === '/' ? p : this.cwd + '/' + p).split('/'), out = []; + parts.forEach(function (s) { if (!s || s === '.') return; if (s === '..') out.pop(); else out.push(s); }); + return '/' + out.join('/'); + }; + Shell.prototype.parent = function (p) { var i = p.lastIndexOf('/'); return i <= 0 ? '/' : p.slice(0, i); }; + Shell.prototype.base = function (p) { return p.slice(p.lastIndexOf('/') + 1); }; + Shell.prototype.children = function (d) { + var self = this, out = []; + this.dirs.forEach(function (x) { if (x !== '/' && self.parent(x) === d) out.push({ n: self.base(x), dir: true }); }); + this.files.forEach(function (v, x) { if (self.parent(x) === d) out.push({ n: self.base(x), dir: false, size: v.length }); }); + return out.sort(function (a, b) { return a.n.replace(/^\./, '').localeCompare(b.n.replace(/^\./, '')); }); + }; + Shell.prototype.out = function (s) { this.t.write(String(s).replace(/\n/g, '\r\n') + '\r\n'); }; + Shell.prototype.err = function (s) { this.out(R + s + X); }; + + Shell.prototype.exec = function (raw) { + var self = this, parts = raw.split(/&&|;/); + for (var i = 0; i < parts.length; i++) { if (!self.run(parts[i].trim())) break; } + if (this.o.onCommand) this.o.onCommand(raw, this); + }; + Shell.prototype.run = function (cmd) { + if (!cmd) return true; + var toks = [], m, re = /"([^"]*)"|'([^']*)'|(\S+)/g; + while ((m = re.exec(cmd))) toks.push(m[1] != null ? m[1] : m[2] != null ? m[2] : m[3]); + var redir = null, ri = toks.findIndex(function (t) { return t === '>' || t === '>>'; }); + if (ri > -1) { redir = { mode: toks[ri], file: toks[ri + 1] }; toks = toks.slice(0, ri); } + var c = toks[0], a = toks.slice(1), self = this, flags = a.filter(function (x) { return x[0] === '-'; }).join(''), args = a.filter(function (x) { return x[0] !== '-'; }); + var capture = null, print = function (s) { if (redir) capture = (capture ? capture + '\n' : '') + s; else self.out(s); }; + switch (c) { + case 'help': print('Commandes : pwd, ls, cd, mkdir, touch, echo, cat, rm, rmdir, whoami, hostname, date, uname, ip a, clear'); break; + case 'pwd': print(this.cwd); break; + case 'whoami': print(this.user); break; + case 'hostname': print(this.host); break; + case 'date': print(new Date().toLocaleString('fr-FR', { dateStyle: 'full', timeStyle: 'medium' })); break; + case 'uname': print(flags.indexOf('a') > -1 ? 'Linux ' + this.host + ' 6.12.0-amd64 #1 SMP Debian x86_64 GNU/Linux' : 'Linux'); break; + case 'clear': this.t.clear(); break; + case 'ip': + if (/^a|^addr/.test(args[0] || '')) print('1: lo: mtu 65536\n inet 127.0.0.1/8 scope host lo\n2: ens3: mtu 1500\n inet 192.168.10.10/26 brd 192.168.10.63 scope global ens3'); + else print('Usage : ip addr'); break; + case 'ls': { + var d = this.path(args[0] || '.'); + if (!this.dirs.has(d)) { this.err("ls: impossible d'accéder à '" + (args[0] || '.') + "': Aucun fichier ou dossier de ce nom"); return false; } + var all = flags.indexOf('a') > -1, long = flags.indexOf('l') > -1; + var list = this.children(d).filter(function (e) { return all || e.n[0] !== '.'; }); + if (all) list = [{ n: '.', dir: true }, { n: '..', dir: true }].concat(list); + var col = function (e) { return redir ? e.n : e.dir ? B + e.n + X : e.n; }; + if (long) { + var now = new Date(), stamp = now.toLocaleDateString('fr-FR', { day: '2-digit', month: 'short' }) + ' ' + now.toTimeString().slice(0, 5); + print('total ' + list.length * 4); + list.forEach(function (e) { print((e.dir ? 'drwxr-xr-x 2 ' : '-rw-r--r-- 1 ') + self.user + ' ' + self.user + ' ' + String(e.dir ? 4096 : e.size).padStart(5) + ' ' + stamp + ' ' + col(e)); }); + } else if (list.length) print(list.map(col).join(' ')); + break; + } + case 'cd': { + var p = this.path(args[0]); + if (!this.dirs.has(p)) { this.err('bash: cd: ' + args[0] + ': Aucun fichier ou dossier de ce nom'); return false; } + this.cwd = p; break; + } + case 'mkdir': + if (!args.length) { this.err('mkdir: opérande manquant'); return false; } + for (var i = 0; i < args.length; i++) { + var np = this.path(args[i]); + if (this.dirs.has(np)) { if (flags.indexOf('p') < 0) { this.err("mkdir: impossible de créer le répertoire « " + args[i] + " »: Le fichier existe"); return false; } continue; } + if (!this.dirs.has(this.parent(np))) { + if (flags.indexOf('p') < 0) { this.err("mkdir: impossible de créer le répertoire « " + args[i] + " »: Aucun fichier ou dossier de ce nom"); return false; } + var acc = ''; np.split('/').slice(1).forEach(function (s) { acc += '/' + s; self.dirs.add(acc); }); + } else this.dirs.add(np); + } + break; + case 'touch': + if (!args.length) { this.err('touch: opérande de fichier manquant'); return false; } + args.forEach(function (f) { var fp = self.path(f); if (!self.files.has(fp)) self.files.set(fp, ''); }); break; + case 'echo': print(args.join(' ')); break; + case 'cat': { + var f = this.path(args[0]); + if (this.dirs.has(f)) { this.err('cat: ' + args[0] + ': est un dossier'); return false; } + if (!this.files.has(f)) { this.err('cat: ' + args[0] + ': Aucun fichier ou dossier de ce nom'); return false; } + var v = this.files.get(f); if (v) print(v); break; + } + case 'rm': + for (var k = 0; k < args.length; k++) { + var rp = this.path(args[k]); + if (this.dirs.has(rp)) { this.err("rm: impossible de supprimer '" + args[k] + "': est un dossier"); return false; } + if (!this.files.delete(rp)) { this.err("rm: impossible de supprimer '" + args[k] + "': Aucun fichier ou dossier de ce nom"); return false; } + } + break; + case 'rmdir': { + var dp = this.path(args[0]); + if (!this.dirs.has(dp)) { this.err("rmdir: '" + args[0] + "': Aucun fichier ou dossier de ce nom"); return false; } + if (this.children(dp).length) { this.err("rmdir: '" + args[0] + "': Le dossier n'est pas vide"); return false; } + this.dirs.delete(dp); break; + } + case 'sudo': if (this.o.commands) return this.run(a.join(' ')); print(Y + 'Pas besoin de sudo pour ce lab : tout se passe dans ton dossier.' + X); break; + default: + if (this.o.commands && this.o.commands[c]) { var res = this.o.commands[c](a, this); if (res === false) return false; if (res) print(res); break; } + this.err('bash: ' + c + ' : commande introuvable'); return false; + } + if (redir) { + if (!redir.file) { this.err('bash: erreur de syntaxe près du symbole inattendu « newline »'); return false; } + var fp2 = this.path(redir.file); + if (!this.dirs.has(this.parent(fp2))) { this.err('bash: ' + redir.file + ': Aucun fichier ou dossier de ce nom'); return false; } + var prev = redir.mode === '>>' && this.files.has(fp2) ? this.files.get(fp2) : ''; + this.files.set(fp2, prev ? prev + '\n' + (capture || '') : (capture || '')); + } + return true; + }; + + Shell.prototype.key = function (d) { + if (this.busy) return; + var t = this.t; + if (d === '\r') { t.write('\r\n'); var l = this.line; this.line = ''; if (l.trim()) { this.hist.push(l); } this.hi = this.hist.length; this.exec(l); this.prompt(); return; } + if (d === '\x7f') { if (this.line) { this.line = this.line.slice(0, -1); t.write('\b \b'); } return; } + if (d === '\x03') { t.write('^C\r\n'); this.line = ''; this.prompt(); return; } + if (d === '\x0c') { t.clear(); return; } + if (d === '\x1b[A' || d === '\x1b[B') { + if (!this.hist.length) return; + this.hi = Math.max(0, Math.min(this.hist.length, this.hi + (d === '\x1b[A' ? -1 : 1))); + var h = this.hist[this.hi] || ''; + t.write('\b \b'.repeat(this.line.length)); this.line = h; t.write(h); return; + } + if (d[0] === '\x1b') return; + var clean = d.replace(/[\x00-\x1f]/g, ''); this.line += clean; t.write(clean); + }; + + Shell.prototype.demo = function (cmds, loop) { + var self = this, reduce = window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches; + this.busy = true; + var i = 0; + function next() { + if (i >= cmds.length) { + if (!loop || reduce) return; + return setTimeout(function () { self.t.clear(); self.t.write('\x1b[2J\x1b[H'); self.cwd = self.home; self.dirs = new Set(['/', '/home', self.home, '/etc', '/tmp', '/var', '/var/log']); self.files.forEach(function (v, k) { if (k.indexOf(self.home + '/') === 0 && k !== self.home + '/.bashrc') self.files.delete(k); }); i = 0; self.prompt(); setTimeout(next, 600); }, 3500); + } + var c = cmds[i++], j = 0; + if (reduce) { self.t.write(c + '\r\n'); self.exec(c); self.prompt(); return next(); } + (function type() { + if (j < c.length) { self.t.write(c[j++]); return setTimeout(type, 40 + Math.random() * 50); } + setTimeout(function () { self.t.write('\r\n'); self.exec(c); self.prompt(); setTimeout(next, 900); }, 300); + })(); + } + setTimeout(next, 700); + }; + + function mount(el, o) { + o = o || {}; + var term = new window.Terminal({ + theme: THEME, fontFamily: '"IBM Plex Mono", ui-monospace, monospace', fontSize: o.fontSize || 14, + lineHeight: 1.25, cursorBlink: true, cursorStyle: 'block', scrollback: 500, convertEol: false, + disableStdin: !!o.demo, allowTransparency: false + }); + var fit = window.FitAddon ? new window.FitAddon.FitAddon() : null; + if (fit) term.loadAddon(fit); + term.open(el); + var fitNow = function () { try { fit && fit.fit(); } catch (e) {} }; + var raf, doFit = function () { cancelAnimationFrame(raf); raf = requestAnimationFrame(fitNow); }; + fitNow(); window.addEventListener('resize', doFit); + if (window.ResizeObserver) new ResizeObserver(doFit).observe(el); + var sh = new Shell(term, o); + if (o.welcome) term.write(o.welcome.replace(/\n/g, '\r\n') + '\r\n'); + sh.prompt(); + if (o.demo) sh.demo(o.demo, o.loop !== false); + else { term.onData(function (d) { sh.key(d); }); if (o.focus) term.focus(); } + return sh; + } + + window.SyllabusTerminal = { mount: function (el, o) { + var go = function () { mount(el, o); }; + (document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve()).then(go); + } }; +})(); diff --git a/design/vitrine/js/ressource-page.js b/design/vitrine/js/ressource-page.js new file mode 100644 index 0000000..1223871 --- /dev/null +++ b/design/vitrine/js/ressource-page.js @@ -0,0 +1,52 @@ +(function () { + var L = window.RESSOURCES, id = new URLSearchParams(location.search).get('outil'); + var R = L.find(function (r) { return r.id === id; }) || L[0]; + var el = function (i) { return document.getElementById(i); }; + var demo = (window.URL_DEMOS && window.URL_DEMOS[R.id]) || R.demo; + document.title = R.titre + ' · Syllabus'; + el('r-titre-k').textContent = R.titre; + el('r-titre').textContent = R.accroche; + el('r-probleme').textContent = R.probleme; + el('r-pour').textContent = 'Pour : ' + R.pour; + el('r-accroche-fin').textContent = 'Essayez ' + R.titre.toLowerCase() + ' en quelques clics.'; + el('r-demo').href = el('r-demo2').href = demo; + var ul = el('r-points'); + R.points.forEach(function (pt) { + var li = document.createElement('li'), h = document.createElement('h3'), t = document.createElement('p'); + h.style.cssText = 'margin:0;font-size:20px;font-weight:800;letter-spacing:-0.01em;color:#0b1220'; + t.style.cssText = 'margin:12px 0 0;font-size:16px;line-height:1.65;font-weight:500;color:#374151'; + h.textContent = pt[0]; t.textContent = pt[1]; li.appendChild(h); li.appendChild(t); ul.appendChild(li); + }); + var ol = el('r-etapes'); + R.etapes.forEach(function (e, i) { + var li = document.createElement('li'), n = document.createElement('span'), t = document.createElement('p'); + li.style.cssText = 'display:grid;grid-template-columns:48px 1fr;align-items:baseline;gap:16px'; + n.style.cssText = 'font-size:28px;font-weight:800;color:#1d5cf5;font-variant-numeric:tabular-nums'; + t.style.cssText = 'margin:0;font-size:20px;line-height:1.5;font-weight:600;color:#0b1220'; + n.textContent = String(i + 1).padStart(2, '0'); t.textContent = e; + li.appendChild(n); li.appendChild(t); ol.appendChild(li); + }); + var box = el('r-video'), base = window.URL_VIDEOS || 'videos', reduit = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + var v = document.createElement('video'); + v.muted = true; v.loop = true; v.playsInline = true; v.autoplay = !reduit; v.preload = 'metadata'; + v.setAttribute('aria-label', 'Démonstration vidéo : ' + R.titre); + v.style.cssText = 'display:block;width:100%;height:100%;object-fit:cover'; + v.src = base + '/' + R.id + '.mp4'; + var btn = document.createElement('button'); + btn.type = 'button'; + btn.style.cssText = 'position:absolute;right:20px;bottom:20px;width:44px;height:44px;border-radius:999px;border:0;background:rgba(255,255,255,.92);color:#0b1220;font-size:14px;font-weight:800;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.15)'; + var maj = function () { btn.textContent = v.paused ? '▶' : '❚❚'; btn.setAttribute('aria-label', v.paused ? 'Lire la vidéo' : 'Mettre en pause'); }; + btn.addEventListener('click', function () { v.paused ? v.play() : v.pause(); }); + v.addEventListener('play', maj); v.addEventListener('pause', maj); + v.addEventListener('error', function () { + box.innerHTML = ''; + var d = document.createElement('div'); + d.style.cssText = 'height:100%;display:grid;place-items:center;text-align:center;padding:32px'; + d.innerHTML = '

                                            Vidéo de démonstration

                                            Fichier attendu : videos/' + R.id + '.mp4

                                            '; + box.appendChild(d); + el('r-video-legende').textContent = ''; + }); + box.appendChild(v); box.appendChild(btn); maj(); + el('r-video-legende').textContent = R.titre + ', en conditions réelles.'; + if (!reduit) { var pr = v.play(); if (pr && pr.catch) pr.catch(function () {}); } +})(); diff --git a/design/vitrine/js/ressources.js b/design/vitrine/js/ressources.js new file mode 100644 index 0000000..8fcbb2e --- /dev/null +++ b/design/vitrine/js/ressources.js @@ -0,0 +1,123 @@ +// Présentations des outils Syllabus (page ressource). demo = page de démonstration existante. +window.RESSOURCES = [ +{ id: 'visio', cat: 'Piloter', titre: 'Visio de classe', demo: 'liste-attente.html', pour: 'Enseignants, élèves', + accroche: 'Une visio intégrée où les élèves arrivent en sourdine et ne parlent que quand vous leur donnez la parole.', + probleme: 'En classe à distance, les micros ouverts et le chat qui défile empêchent d’enseigner, et les élèves discrets n’osent pas intervenir.', + points: [['Tous en sourdine', 'Micro et caméra bloqués tant que le prof n’a pas donné la parole.'], ['File des mains levées', 'Premier arrivé en haut, avec l’étape du lab de chaque élève.'], ['Salle d’attente', 'Vous admettez chaque élève avant qu’il rejoigne la classe.'], ['Chat contrôlé', 'Désactivé par défaut, activable d’un interrupteur.']], + etapes: ['Lancez la visio depuis votre tableau de bord', 'Admettez les élèves de la salle d’attente', 'Donnez la parole depuis la file des mains levées'] }, +{ id: 'cockpit', cat: 'Piloter', titre: 'Tableau de bord prof', demo: 'liste-attente.html', pour: 'Enseignants', + accroche: 'Toute la classe sur un seul écran : qui avance, qui bloque, qui a levé la main.', + probleme: 'Avec 30 élèves en TP, on ne voit que ceux qui appellent. Les élèves discrets en difficulté passent inaperçus jusqu’à l’évaluation.', + points: [['Mains levées dans l’ordre', 'La file d’attente s’affiche en temps réel avec l’étape où chaque élève bloque.'], ['Alertes de décrochage', 'Un élève qui n’avance plus ou accumule les indices est signalé, sans surveillance intrusive.'], ['Examens et devoirs en cours', 'Copies rendues, sorties de fenêtre, temps restant : tout est suivi depuis le même écran.'], ['Accès à la fiche élève', 'Un clic ouvre l’historique complet pour préparer un entretien ou un conseil de classe.']], + etapes: ['Ouvrez votre classe en début de séance', 'Suivez la progression pendant le TP', 'Repérez les élèves à accompagner en priorité'] }, +{ id: 'espace-eleve', cat: 'Piloter', titre: 'Espace élève', demo: 'liste-attente.html', pour: 'Élèves et étudiants', + accroche: 'Un calendrier, les devoirs à rendre, les examens à venir et de quoi s’entraîner.', + probleme: 'Les consignes sont dispersées entre l’ENT, les mails et le tableau. L’élève ne sait pas toujours ce qu’il doit rendre ni quand.', + points: [['Calendrier unique', 'Devoirs, examens et séances de TP au même endroit, avec rappels.'], ['Progression visible', 'Compétences acquises et chapitres à revoir, chapitre par chapitre.'], ['Entraînement libre', 'Exercices et labs disponibles hors classe, corrigés automatiquement.'], ['Lever la main', 'Une demande d’aide en un clic pendant le TP.']], + etapes: ['L’élève se connecte avec ses identifiants', 'Il consulte ce qui l’attend cette semaine', 'Il s’entraîne et rend ses travaux en ligne'] }, +{ id: 'vie-scolaire', cat: 'Piloter', titre: 'Vie scolaire', demo: 'liste-attente.html', pour: 'CPE, direction, intendance', + accroche: 'L’assiduité et les signaux de décrochage de tout l’établissement, classe par classe.', + probleme: 'Les informations utiles au suivi sont réparties entre les enseignants. Le CPE les découvre souvent trop tard.', + points: [['Présence aux séances en ligne', 'Connexions aux quiz, labs et examens, par classe et par élève.'], ['Signalements centralisés', 'Les alertes des enseignants arrivent au même endroit, avec leur historique.'], ['Suivi des accompagnements', 'Entretiens, contacts familles et décisions consignés.'], ['Exports', 'Données prêtes pour le conseil de classe ou le logiciel de vie scolaire.']], + etapes: ['Choisissez la classe ou le niveau', 'Repérez les élèves signalés', 'Planifiez l’accompagnement et suivez-le'] }, +{ id: 'academie', cat: 'Piloter', titre: 'Académie', demo: 'liste-attente.html', pour: 'Inspection, rectorat, réseaux d’établissements', + accroche: 'Une vue agrégée de plusieurs établissements, sans aucune donnée nominative.', + probleme: 'Évaluer l’usage d’un outil ou repérer les compétences mal acquises à l’échelle d’un territoire demande de compiler des tableaux à la main.', + points: [['Indicateurs par établissement', 'Activité, labs réalisés, compétences validées.'], ['Compétences les moins acquises', 'Pour cibler les formations et les ressources.'], ['Données anonymisées', 'Uniquement des moyennes par établissement et par classe.'], ['Rapports téléchargeables', 'Bilans en PDF et en CSV.']], + etapes: ['Choisissez le périmètre', 'Comparez les établissements', 'Exportez le rapport'] }, +{ id: 'cohortes', cat: 'Piloter', titre: 'Suivi des cohortes', demo: 'liste-attente.html', pour: 'Responsables de formation, scolarité', + accroche: 'La progression d’une promotion entière, semestre après semestre.', + probleme: 'Savoir si une promotion est en avance ou en retard sur le référentiel suppose de croiser les résultats de plusieurs enseignants.', + points: [['Progression par compétence', 'Taux d’acquisition de chaque bloc du référentiel.'], ['Comparaison entre promotions', 'Même formation, années différentes.'], ['Assiduité et résultats', 'Corrélés pour repérer les décrochages.'], ['Export des notes', 'CSV compatible avec les logiciels de scolarité.']], + etapes: ['Sélectionnez la promotion', 'Lisez les indicateurs par compétence', 'Exportez pour le jury ou le conseil'] }, +{ id: 'espace-etablissement', cat: 'Piloter', titre: 'Espace établissement', demo: 'liste-attente.html', pour: 'Intendance, direction', + accroche: 'Licences, devis, factures et conventions au même endroit.', + probleme: 'Commander un service en ligne dans un établissement public impose devis, bon de commande, Chorus Pro et suivi des licences.', + points: [['Gestion des licences', 'Ajout et retrait d’élèves, licences utilisées et disponibles.'], ['Devis et bons de commande', 'Générés au nom de l’établissement.'], ['Factures Chorus Pro', 'Déposées automatiquement, téléchargeables en PDF.'], ['Documents contractuels', 'Conditions, DPA et convention signée.']], + etapes: ['Demandez un devis', 'Validez le bon de commande', 'Gérez les licences au fil de l’année'] }, +{ id: 'integration', cat: 'Piloter', titre: 'Intégration et sécurité', demo: 'liste-attente.html', pour: 'DSI, administrateurs', + accroche: 'SSO, API, hébergement et conformité : ce que votre DSI doit vérifier.', + probleme: 'Avant d’adopter un outil, la DSI doit s’assurer de l’authentification, de la protection des données et des prérequis réseau.', + points: [['Authentification unique', 'Connexion par l’ENT ou l’annuaire de l’établissement.'], ['Hébergement en France', 'Serveurs Scaleway à Paris.'], ['RGPD', 'Registre, DPA, durées de conservation documentées.'], ['Prérequis réseau', 'Navigateur récent, accès HTTPS, aucun logiciel à installer.']], + etapes: ['Consultez la fiche technique', 'Testez la connexion depuis votre réseau', 'Échangez avec nous pour le SSO'] }, +{ id: 'cours', cat: 'Apprendre', titre: 'Cours gratuits', demo: 'liste-attente.html', pour: 'Enseignants et élèves', + accroche: 'Des cours complets alignés sur les référentiels, du lycée au master.', + probleme: 'Préparer un cours technique complet prend des heures, et les ressources en ligne sont rarement adaptées au référentiel.', + points: [['Cours magistral détaillé', 'Théorie, exemples commentés, schémas et mise en situation.'], ['QCM de lecture', 'Pour vérifier que le cours a été lu et compris.'], ['TD et TP corrigés', 'Exercices progressifs et travaux pratiques sur machine.'], ['Sujets d’examen', 'Avec éléments de correction.']], + etapes: ['Choisissez le cursus', 'Ouvrez un chapitre', 'Donnez-le à lire ou projetez-le'] }, +{ id: 'labs', cat: 'Apprendre', titre: 'TP sur machine Linux', demo: 'liste-attente.html', pour: 'Élèves, enseignants', + accroche: 'Une vraie machine Linux par élève, dans le navigateur, corrigée automatiquement.', + probleme: 'Installer et maintenir des machines virtuelles pour chaque élève prend du temps et dépend du matériel de la salle.', + points: [['Terminal dans le navigateur', 'Aucune installation, sur PC comme sur tablette.'], ['Étapes vérifiées', 'Chaque étape est validée automatiquement dans la machine.'], ['Indices progressifs', 'Débloqués après plusieurs essais pour encourager la réflexion.'], ['Machine réinitialisable', 'L’élève peut tout recommencer sans risque.']], + etapes: ['Lancez le lab pour la classe', 'Les élèves suivent les étapes', 'Consultez les résultats dans le tableau de bord'] }, +{ id: 'lab-web', cat: 'Apprendre', titre: 'Lab web', demo: 'liste-attente.html', pour: 'Élèves, enseignants', + accroche: 'Un terminal et un navigateur reliés : on configure un serveur et on voit le résultat.', + probleme: 'Comprendre le lien entre une commande serveur et ce qu’affiche le navigateur est difficile sans les avoir côte à côte.', + points: [['Terminal et navigateur liés', 'Le navigateur affiche la machine de l’élève.'], ['Serveur réel', 'Apache, Nginx, PHP installés pour de vrai.'], ['Vérifications automatiques', 'Page servie, service actif, journaux.'], ['Idéal pour SNT, NSI, SIO', 'Du premier site au serveur HTTPS.']], + etapes: ['Ouvrez le lab', 'Installez et configurez le serveur', 'Actualisez le navigateur relié'] }, +{ id: 'ide', cat: 'Apprendre', titre: 'Éditeur de code en ligne', demo: 'liste-attente.html', pour: 'Élèves, enseignants', + accroche: 'Python, SQL, web et Bash dans le navigateur, avec des exercices testés automatiquement.', + probleme: 'Installer un environnement de développement sur chaque poste et à la maison est une source d’échecs en début d’année.', + points: [['Quatre langages', 'Python, SQL, HTML/CSS/JS et Bash.'], ['Tests automatiques', 'L’élève sait immédiatement si son code est juste.'], ['Exercices progressifs', 'Du niveau découverte aux défis.'], ['Aucune installation', 'Fonctionne aussi à la maison.']], + etapes: ['Choisissez un exercice', 'L’élève code et lance les tests', 'Suivez les réussites dans le tableau de bord'] }, +{ id: 'maison', cat: 'Apprendre', titre: 'Ressources à la maison', demo: 'liste-attente.html', pour: 'Élèves', + accroche: 'Pour aller plus loin chez soi : exercices, défis et plateformes reconnues.', + probleme: 'Les élèves motivés ne savent pas toujours où trouver des ressources sérieuses et adaptées à leur niveau.', + points: [['Parcours par niveau', 'Du lycée au supérieur.'], ['Plateformes reconnues', 'HackerRank, DataCamp, Root-Me, France-IOI.'], ['Défis sans prendre d’avance', 'Des notions connexes qui développent la culture générale.'], ['Suivi optionnel', 'L’enseignant voit les défis réalisés.']], + etapes: ['L’élève choisit un thème', 'Il réalise les exercices', 'Il partage sa progression s’il le souhaite'] }, +{ id: 'bibliotheque', cat: 'Préparer', titre: 'Bibliothèque du prof', demo: 'liste-attente.html', pour: 'Enseignants', + accroche: 'Tous les chapitres du référentiel, avec leurs cours, QCM, TD et TP.', + probleme: 'Retrouver une ressource adaptée à un point précis du programme demande de fouiller plusieurs sites.', + points: [['Classée par référentiel', 'SNT, NSI, BTS SIO, CIEL, BUT, titres professionnels, master.'], ['Recherche', 'Par mot-clé, compétence ou type de ressource.'], ['Prêt à l’emploi', 'À projeter, imprimer ou donner en devoir.'], ['Personnalisable', 'Dupliquez et adaptez une ressource.']], + etapes: ['Choisissez le référentiel', 'Filtrez par chapitre', 'Ajoutez la ressource à votre séquence'] }, +{ id: 'banque', cat: 'Préparer', titre: 'Banque de sujets', demo: 'liste-attente.html', pour: 'Enseignants', + accroche: 'Des centaines de questions et de sujets d’examen, à combiner et à adapter.', + probleme: 'Rédiger des sujets d’évaluation variés et équilibrés prend un temps considérable.', + points: [['Questions classées', 'Par chapitre, type et difficulté.'], ['Sujets blancs', 'Calqués sur les épreuves officielles.'], ['Vos questions', 'Ajoutez et partagez vos propres questions.'], ['Correction fournie', 'Éléments de correction et barème.']], + etapes: ['Recherchez des questions', 'Composez votre sujet', 'Programmez-le en examen'] }, +{ id: 'generateur', cat: 'Préparer', titre: 'Générateur de TD', demo: 'liste-attente.html', pour: 'Enseignants, élèves', + accroche: 'Des exercices de calcul générés à l’infini : conversions, sous-réseaux, droits.', + probleme: 'Pour automatiser un savoir-faire, il faut beaucoup d’exercices différents, ce qu’aucun manuel ne fournit.', + points: [['Exercices aléatoires', 'Toujours nouveaux, jamais copiables.'], ['Correction immédiate', 'Avec la méthode détaillée.'], ['Niveaux réglables', 'De l’échauffement à l’approfondissement.'], ['Mode chronométré', 'Pour préparer l’examen.']], + etapes: ['Choisissez le type d’exercice', 'Réglez la difficulté', 'Lancez la série'] }, +{ id: 'td-imprimable', cat: 'Préparer', titre: 'TD à imprimer', demo: 'liste-attente.html', pour: 'Enseignants', + accroche: 'Des fiches papier avec les étapes à suivre, des cases à remplir et la correction séparée.', + probleme: 'Tout ne se fait pas sur écran : certains exercices s’apprennent mieux sur papier, et la salle n’est pas toujours équipée.', + points: [['Mise en page soignée', 'Format A4, lisible en noir et blanc.'], ['Cases à remplir', 'Pour structurer la réponse.'], ['Correction à part', 'Imprimée séparément.'], ['Export PDF', 'Prêt pour la photocopieuse.']], + etapes: ['Choisissez le TD', 'Prévisualisez', 'Téléchargez le PDF'] }, +{ id: 'quiz', cat: 'Évaluer', titre: 'Quiz flash', demo: 'liste-attente.html', pour: 'Enseignants, élèves', + accroche: 'Un quiz projeté en début d’heure, auquel les élèves répondent depuis leur téléphone ou leur PC.', + probleme: 'Vérifier ce qui a été retenu de la séance précédente prend du temps et ne touche que les élèves qui lèvent la main.', + points: [['Projection en classe', 'Diaporama plein écran, question par question.'], ['Réponse sur tout appareil', 'Dans le navigateur, avec les identifiants de l’élève.'], ['Présences', 'Vous voyez qui est connecté et qui manque.'], ['Résultats immédiats', 'Par question et par élève.']], + etapes: ['Choisissez ou créez un quiz', 'Projetez-le et donnez le code', 'Lisez les résultats en fin de quiz'] }, +{ id: 'sujet', cat: 'Évaluer', titre: 'Créer un sujet', demo: 'liste-attente.html', pour: 'Enseignants', + accroche: 'Un sujet d’examen en cinq étapes : cadre, questions, barème, surveillance, publication.', + probleme: 'Organiser une évaluation en ligne fiable demande de penser au barème, aux aménagements et à la surveillance.', + points: [['Questions de la banque ou personnelles', 'QCM, calcul, code, lab, rédaction.'], ['Barème automatique', 'Ramené sur 20, avec pré-correction.'], ['Mode examen', 'Plein écran, détection des changements d’onglet.'], ['Aménagements', 'Tiers-temps appliqué automatiquement.']], + etapes: ['Définissez le cadre', 'Ajoutez les questions', 'Programmez l’examen'] }, +{ id: 'devoirs', cat: 'Évaluer', titre: 'Devoirs maison', demo: 'liste-attente.html', pour: 'Enseignants, élèves', + accroche: 'Programmez un devoir, recevez les rendus, corrigez en ligne.', + probleme: 'Collecter des devoirs par mail ou sur clé USB, c’est des fichiers perdus, des retards non tracés et des relances.', + points: [['Programmation', 'Date d’ouverture et date limite.'], ['Rendus centralisés', 'Fichiers, code ou lab, horodatés.'], ['Relances automatiques', 'Pour les élèves en retard.'], ['Lien avec la correction', 'Les copies arrivent directement dans l’outil de correction.']], + etapes: ['Créez le devoir', 'Les élèves rendent en ligne', 'Corrigez et publiez les notes'] }, +{ id: 'correction', cat: 'Évaluer', titre: 'Corriger les copies', demo: 'liste-attente.html', pour: 'Enseignants', + accroche: 'Une pré-correction selon votre barème, que vous validez et commentez.', + probleme: 'Corriger 30 copies de TP identiques prend des heures, surtout pour vérifier ce qu’une machine pourrait contrôler.', + points: [['Pré-correction', 'Calculs, commandes et code vérifiés automatiquement.'], ['Vous gardez la main', 'Rien n’est publié sans votre validation.'], ['Commentaires rapides', 'Remarques fréquentes en un clic.'], ['Navigation copie par copie', 'Avec la note recalculée à chaque ajustement.']], + etapes: ['Ouvrez le devoir', 'Validez ou ajustez la pré-correction', 'Publiez les notes'] }, +{ id: 'fiche-eleve', cat: 'Suivre', titre: 'Fiche élève', demo: 'liste-attente.html', pour: 'Enseignants, CPE', + accroche: 'L’historique, les compétences et les observations d’un élève sur une seule page.', + probleme: 'Préparer un conseil de classe ou un entretien demande de rassembler des informations éparses.', + points: [['Compétences et évolution', 'Par bloc du référentiel.'], ['Historique', 'Labs, QCM, devoirs, examens.'], ['Observations partagées', 'Entre enseignants et vie scolaire.'], ['Export PDF', 'Pour le conseil de classe.']], + etapes: ['Ouvrez la fiche depuis le tableau de bord', 'Consultez l’historique', 'Ajoutez une observation'] }, +{ id: 'messagerie', cat: 'Suivre', titre: 'Messagerie', demo: 'liste-attente.html', pour: 'Enseignants, élèves, CPE', + accroche: 'Des échanges encadrés entre enseignant, élève et vie scolaire.', + probleme: 'Les échanges par réseaux sociaux ou téléphone personnel sont difficiles à encadrer et à tracer.', + points: [['Conversations par élève et par classe', 'Avec la fiche élève à portée de clic.'], ['Réponses rapides', 'Envoyer un indice, joindre un cours, proposer un créneau.'], ['Pas de messages entre élèves', 'Échanges visibles par l’équipe pédagogique.'], ['Horaires conseillés', 'Pour respecter le droit à la déconnexion.']], + etapes: ['Ouvrez une conversation', 'Répondez ou joignez une ressource', 'Associez la CPE si besoin'] }, +{ id: 'export', cat: 'Suivre', titre: 'Export Pronote / ENT', demo: 'liste-attente.html', pour: 'Enseignants, scolarité', + accroche: 'Notes, présences et appréciations prêtes à charger dans votre logiciel de vie scolaire.', + probleme: 'Ressaisir les notes d’un outil à l’autre est une perte de temps et une source d’erreurs.', + points: [['Fichier CSV compatible', 'Format attendu par les principaux logiciels de vie scolaire.'], ['Choix du contenu', 'Notes, moyennes par compétence, présences, appréciations.'], ['Aperçu avant export', 'Pour vérifier les colonnes.'], ['Guide d’import', 'Étapes détaillées pour chaque logiciel.']], + etapes: ['Choisissez le contenu et la période', 'Vérifiez l’aperçu', 'Téléchargez et importez le fichier'] } +]; diff --git a/design/vitrine/liste-attente.html b/design/vitrine/liste-attente.html new file mode 100644 index 0000000..59a9ba8 --- /dev/null +++ b/design/vitrine/liste-attente.html @@ -0,0 +1,72 @@ + + + + + + Liste d’attente · Syllabus + + + + + + + + + +
                                            + +
                                            + +
                                            +
                                            +

                                            Ouverture progressive

                                            +

                                            Syllabus ouvre bientôt.

                                            +

                                            Les premiers établissements commencent à la rentrée. Laissez vos coordonnées : nous vous écrivons dès que votre accès est prêt. Gratuit, sans carte bancaire.

                                            +
                                            + + + + +

                                            Vos coordonnées servent uniquement à vous prévenir de l’ouverture. Données personnelles

                                            +
                                            +
                                            +
                                            + + + + + + diff --git a/design/vitrine/mentions-legales.html b/design/vitrine/mentions-legales.html new file mode 100644 index 0000000..85f8ea8 --- /dev/null +++ b/design/vitrine/mentions-legales.html @@ -0,0 +1,124 @@ + + + + + + Informations légales · Syllabus + + + + + + + + + +
                                            + +
                                            + +
                                            +
                                            +
                                            +

                                            Informations légales

                                            +

                                            Le cadre, en clair.

                                            +

                                            Dernière mise à jour : 29 septembre 2026

                                            +
                                            +
                                            +
                                            + +
                                            + +
                                            +

                                            Mentions légales

                                            +
                                            +

                                            Éditeur Syllabus, édité par Adam Belkacemi, [à compléter] (forme juridique, capital, SIRET, adresse du siège).

                                            +

                                            Directeur de la publication Adam Belkacemi. Contact adam@belkacemi.me.

                                            +

                                            Hébergeur Scaleway SAS, 8 rue de la Ville-l’Évêque, 75008 Paris. Les serveurs sont situés en France, à Paris.

                                            +
                                            + +
                                            +

                                            Conditions générales d’utilisation

                                            +
                                            +

                                            1. Objet

                                            Syllabus met à disposition des cours, des labs Linux et réseau sur machines virtuelles, des QCM et des outils de suivi pour l’enseignement.

                                            +

                                            2. Comptes

                                            Les enseignants créent un compte avec leur e-mail professionnel. Les élèves se connectent avec l’identifiant et le code remis par leur enseignant. Chacun est responsable de la confidentialité de ses accès.

                                            +

                                            3. Accès gratuit

                                            L’accès enseignant est gratuit et sans carte bancaire. Syllabus peut faire évoluer les fonctionnalités et les limites d’usage, en prévenant les utilisateurs.

                                            +

                                            4. Usage acceptable

                                            Les VM servent uniquement à l’apprentissage. Sont interdits : le minage, les attaques vers des tiers, le contournement des quotas ou du mode examen. Le trafic sortant des VM est bloqué par défaut et l’activité est journalisée.

                                            +

                                            5. Mode examen

                                            Pendant une épreuve, les changements d’onglet, sorties de fenêtre et sorties de souris sont enregistrés et transmis à l’enseignant. L’élève en est informé avant de commencer.

                                            +

                                            6. Contenus

                                            Les conditions de réutilisation des contenus pédagogiques seront précisées ultérieurement. Les travaux des élèves leur appartiennent.

                                            +

                                            7. Disponibilité et responsabilité

                                            Syllabus fait ses meilleurs efforts pour assurer la disponibilité du service, sans garantie d’absence d’interruption. [à compléter]

                                            +

                                            8. Droit applicable

                                            Les présentes conditions sont soumises au droit français.

                                            +
                                            + +
                                            +

                                            Confidentialité et RGPD

                                            +
                                            +

                                            Quand un établissement utilise Syllabus avec ses élèves, l’établissement est responsable du traitement et Syllabus agit comme sous-traitant. Pour les comptes enseignants créés directement, Syllabus est responsable du traitement.

                                            +

                                            Données collectées

                                            +
                                            • Élèves : nom, prénom, groupe. Aucun e-mail pour les mineurs.
                                            • Enseignants : nom, e-mail professionnel, établissement.
                                            • Activité pédagogique : étapes de TP, réponses aux QCM, temps passé, remarques des enseignants.
                                            • Mode examen : événements de sortie de copie, uniquement pendant l’épreuve.
                                            • Journaux techniques de sécurité.
                                            +

                                            Finalités et base légale

                                            Fournir le service d’enseignement demandé par l’établissement (mission d’intérêt public de l’établissement) ou par l’enseignant (exécution du contrat).

                                            +

                                            Conservation

                                            Les données d’une classe sont supprimées automatiquement 90 jours après son archivage de fin d’année.

                                            +

                                            Hébergement

                                            Toutes les données sont hébergées en France, chez Scaleway. Elles ne quittent pas l’Union européenne. Aucune donnée n’est vendue ni utilisée à des fins publicitaires.

                                            +

                                            Vos droits

                                            Accès, rectification, effacement, limitation, opposition et portabilité : écrivez à adam@belkacemi.me ou à votre établissement. Vous pouvez aussi adresser une réclamation à la CNIL (cnil.fr).

                                            +

                                            Délégué à la protection des données [à compléter]

                                            +
                                            + +
                                            +

                                            Cookies

                                            +
                                            +

                                            Syllabus n’utilise que des cookies strictement nécessaires : le cookie de session qui vous garde connecté, et le jeton de sécurité des formulaires. Aucun cookie publicitaire, aucun traceur tiers. Ils ne demandent donc pas de consentement.

                                            +
                                            + +
                                            +

                                            Accord de sous-traitance (article 28 du RGPD

                                            +
                                            +

                                            Pour chaque établissement, un accord de sous-traitance précise

                                            +
                                            • l’objet, la durée et la nature des traitements ;
                                            • les mesures de sécurité : chiffrement en transit, isolement des classes, sauvegardes chiffrées ;
                                            • la confidentialité des personnes autorisées ;
                                            • la liste des sous-traitants ultérieurs (hébergement : Scaleway SAS, France) ;
                                            • l’assistance pour répondre aux demandes de droits ;
                                            • la notification des violations de données ;
                                            • la suppression ou la restitution des données en fin de contrat.
                                            +

                                            Demander l’accord pour votre établissement

                                            +
                                            +
                                            +
                                            +
                                            + + + + + + diff --git a/design/vitrine/ressource.html b/design/vitrine/ressource.html new file mode 100644 index 0000000..d719b20 --- /dev/null +++ b/design/vitrine/ressource.html @@ -0,0 +1,99 @@ + + + + + + Ressources · Syllabus + + + + + + + + + + + + + +
                                            + +
                                            + +
                                            +
                                            +
                                            +

                                            Outil

                                            +

                                            Outil

                                            +

                                            +
                                            + Voir la démo +

                                            Interactive, sans inscription

                                            +
                                            +
                                            +
                                            +
                                            +
                                            +
                                            +

                                            +
                                            +
                                            +
                                            +
                                              +
                                              +
                                              +
                                              +

                                              En trois étapes

                                              +
                                                +
                                                +
                                                +
                                                +
                                                +

                                                +

                                                + Voir la démo +
                                                +
                                                + + +
                                                + + + + + + diff --git a/design/vitrine/tarifs.html b/design/vitrine/tarifs.html new file mode 100644 index 0000000..553eff1 --- /dev/null +++ b/design/vitrine/tarifs.html @@ -0,0 +1,70 @@ + + + + + + Tarifs · Syllabus + + + + + + + + + +
                                                + +
                                                + +

                                                Tarifs HT

                                                Les cours sont gratuits. Les VM coûtent moins qu’un manuel.

                                                Une licence Syllabus pour un élève coûte 24 € par an : QCM, TP sur VM, suivi et mode examen compris.

                                                • Découverte

                                                  Élèves, curieux, enseignants

                                                  0 €

                                                  pour toujours

                                                  • ✓Les 99 cours : CM, TD, QCM
                                                  • ✓Corrections expliquées
                                                  • ✓1 lab d’essai de 30 min par jour

                                                  Lire les cours →

                                                • Enseignant

                                                  Une classe, sans passer par l’intendance

                                                  29 € / mois

                                                  ou 290 € / an · jusqu’à 35 élèves

                                                  • ✓Les 59 TP sur VM
                                                  • ✓Correction automatique
                                                  • ✓Suivi des élèves et mode examen
                                                  • ✓Cockpit prof, messagerie, correction assistée
                                                  • ✓15 h de VM par élève et par mois

                                                  Souscrire →

                                                • Le plus choisi

                                                  Établissement

                                                  Lycée, BTS, IUT, université, école

                                                  24 € / élève / an

                                                  à partir de 60 élèves · 1 440 € / an

                                                  • ✓Tout Enseignant, classes illimitées
                                                  • ✓Espace vie scolaire : CPE, direction, intendance
                                                  • ✓Export Pronote / ENT
                                                  • ✓Espace administrateur et bibliothèque partagée
                                                  • ✓Séances réservées, VM prêtes 10 min avant
                                                  • ✓Paiement par mandat administratif

                                                  Demander un devis

                                                • Région et OF

                                                  Académies, régions, organismes de formation

                                                  Sur devis

                                                  à partir de 500 élèves ou stagiaires

                                                  • ✓Tout Établissement
                                                  • ✓Capacité réservée
                                                  • ✓Suivi par centre ou par site
                                                  • ✓Tableau de bord académie
                                                  • ✓Accompagnement au déploiement

                                                  Nous contacter →

                                                API et MCP pour développeurs : 19 € HT par mois avec 100 h de VM incluses, puis 0,09 € HT l’heure. Les classes restent prioritaires sur la capacité.

                                                +
                                                + +

                                                Vos questions, nos réponses.

                                                +

                                                Intendance, données, pédagogie, technique. Une question manque ? adam@belkacemi.me

                                                +
                                                +

                                                Achat et intendance

                                                • Bon de commande et Chorus Pro ?

                                                  Oui. Nous envoyons un devis, vous émettez un bon de commande, la facture arrive sur Chorus Pro. Paiement par mandat administratif à 30 jours.

                                                • Faut-il une carte bancaire pour essayer ?

                                                  Non. Un enseignant crée sa classe gratuitement, sans CB. En échange, on vous demande juste un coup de pouce : vos remarques, ou votre aide pour faire souscrire votre établissement.

                                                • Une licence couvre quelle période ?

                                                  Une licence suit l’année scolaire, de septembre à août. Les comptes archivés sont supprimés 90 jours après la fin d’année.

                                                • Les élèves qui redoublent ?

                                                  Ils repartent sur la licence de l’année suivante. Leur historique (notes, observations, progression) peut être conservé si l’établissement le demande.

                                                • Peut-on payer par région ou par académie ?

                                                  Oui, un devis groupé est possible pour plusieurs établissements. Écrivez-nous pour en parler.

                                                +

                                                Élèves et données

                                                • Où sont hébergées les données ?

                                                  En France, chez Scaleway, sur des serveurs situés à Paris. Rien ne sort de l’Union européenne.

                                                • Et le RGPD ?

                                                  Nous collectons le minimum : nom, prénom, classe, résultats. Pas de publicité, pas de revente, pas de traceurs tiers. Un contrat de sous-traitance est fourni à l’établissement.

                                                • Les élèves mineurs peuvent-ils s’inscrire seuls ?

                                                  Non. C’est l’enseignant qui crée la classe et distribue les identifiants. L’élève n’a pas besoin d’adresse e-mail.

                                                • Un élève peut-il travailler chez lui ?

                                                  Oui, depuis n’importe quel navigateur, sur PC ou téléphone. Cours, QCM, IDE et devoirs maison restent accessibles toute l’année.

                                                +

                                                Pédagogie

                                                • Les cours suivent-ils les programmes officiels ?

                                                  Oui. Ils sont construits à partir des référentiels officiels (BO, arrêtés, fiches RNCP), du SNT au master. Chaque CM, TD et TP indique les compétences visées.

                                                • Puis-je modifier un cours ou un sujet ?

                                                  Oui. Tout se duplique et se modifie : CM, questions, TD, sujets d’examen. Vos versions restent dans votre bibliothèque.

                                                • Comment marche le mode examen ?

                                                  L’élève passe en plein écran. Si sa souris sort de la fenêtre ou s’il change d’onglet, vous le voyez en direct, avec l’heure et la durée.

                                                • Les TD s’impriment-ils ?

                                                  Oui. Chaque TD se télécharge en PDF avec ses étapes et ses cases à remplir. La correction s’imprime à part, pour vous.

                                                • Et la fonction « Lever la main » ?

                                                  L’élève lève la main depuis son écran, vous voyez la file d’attente. Fini les « Madame ! Monsieur ! » en boucle.

                                                +

                                                Technique

                                                • Faut-il installer quelque chose ?

                                                  Non. Tout se passe dans le navigateur : terminal Debian, IDE, navigateur relié à la VM. Rien à installer sur les postes du lycée.

                                                • Et si un élève dépasse 15 h de VM ?

                                                  Le compteur est partagé par la classe : un élève peut consommer plus si d’autres consomment moins. Au-delà, les TP restent ouverts en lecture.

                                                • Le réseau du lycée bloque souvent tout…

                                                  Syllabus passe par une connexion web chiffrée classique, comme n’importe quel site. En cas de souci, on vous aide à le régler avec votre administrateur réseau.

                                                • Une VM peut-elle casser le réseau du lycée ?

                                                  Non. Chaque VM est isolée chez nous. L’élève peut tout casser dedans, il la réinitialise en un clic.

                                                +
                                                +
                                                +
                                                + + + + +