Maquettes Claude Design avec visio de classe

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 '<rect x="' + x + '" y="' + y + '" width="' + w + '" height="' + h + '" fill="' + fill + '" ' + K + '/><text x="' + (x + w / 2) + '" y="' + (y + h / 2 + (fs || 16) / 3) + '" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="800" font-size="' + (fs || 16) + '">' + txt + '</text>'; };
+var arrow = function (x1, y1, x2, y2) { return '<line x1="' + x1 + '" y1="' + y1 + '" x2="' + x2 + '" y2="' + y2 + '" ' + K + ' marker-end="url(#fl)"/>'; };
+var svg = function (w, h, body) { return '<svg viewBox="0 0 ' + w + ' ' + h + '" class="h-auto w-full" role="img"><defs><marker id="fl" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0 0 L10 5 L0 10 z"/></marker></defs>' + body + '</svg>'; };
+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('') + '<text x="20" y="180" font-family="IBM Plex Mono,monospace" font-weight="600" font-size="18">1011 0010₂ = 128 + 32 + 16 + 2 = 178</text>'), 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', '<tspan fill="#fff">/</tspan>', 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) + '<text x="' + (x + 92) + '" y="110" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="800" font-size="16">' + g[4] + '</text><text x="' + (x + 92) + '" y="150" text-anchor="middle" font-family="IBM Plex Mono,monospace" font-weight="600" font-size="26">' + [7, 5, 0][i] + '</text>'; }).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) + '<text x="360" y="130" text-anchor="middle" font-family="IBM Plex Mono,monospace" font-weight="600" font-size="14">classe_id → id</text><text x="20" y="180" font-family="IBM Plex Mono,monospace" font-weight="600" font-size="15">SELECT e.nom, c.libelle FROM eleve e JOIN classe c ON e.classe_id = c.id;</text>'), 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) + '<polygon points="360,86 470,126 360,166 250,126" fill="#FFD23F" ' + K + '/><text x="360" y="131" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="800" font-size="16">note ≥ 10 ?</text>' + 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) + '<text x="505" y="115" font-family="Archivo" font-weight="800" font-size="14">oui</text><text x="190" y="115" font-family="Archivo" font-weight="800" font-size="14">non</text><text x="20" y="220" font-family="IBM Plex Mono,monospace" font-weight="600" font-size="15">if note >= 10: print("Admis")  else: print("À revoir")</text>'), 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) + '<text x="360" y="70" text-anchor="middle" font-family="IBM Plex Mono,monospace" font-weight="600" font-size="14">GET /index.html</text><text x="360" y="140" text-anchor="middle" font-family="IBM Plex Mono,monospace" font-weight="600" font-size="14">200 OK + HTML</text><text x="20" y="185" font-family="Archivo,sans-serif" font-weight="700" font-size="14">Le navigateur affiche le HTML, applique le CSS, exécute le JavaScript.</text>'), 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', '<tspan fill="#fff">x9#Qa…</tspan>', 18) + '<text x="360" y="40" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="800" font-size="15">clé publique d’Alice</text><text x="360" y="185" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="800" font-size="15">Seule la clé privée d’Alice peut déchiffrer</text>'), 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.'] }
+});
+})();