42 lines
11 KiB
JavaScript
42 lines
11 KiB
JavaScript
// Schémas supplémentaires insérés dans le CM + termes à surligner
|
||
(function () {
|
||
var K = 'stroke="#000" stroke-width="3"', F = 'font-family="Archivo,sans-serif" font-weight="800"', M = 'font-family="IBM Plex Mono,monospace" font-weight="600"';
|
||
var b = function (x, y, w, h, fill, t, fs, col) { return '<rect x="' + x + '" y="' + y + '" width="' + w + '" height="' + h + '" fill="' + fill + '" ' + K + '/><text x="' + (x + w / 2) + '" y="' + (y + h / 2 + (fs || 15) / 3) + '" text-anchor="middle" ' + F + ' font-size="' + (fs || 15) + '"' + (col ? ' fill="' + col + '"' : '') + '>' + t + '</text>'; };
|
||
var a = function (x1, y1, x2, y2) { return '<line x1="' + x1 + '" y1="' + y1 + '" x2="' + x2 + '" y2="' + y2 + '" ' + K + ' marker-end="url(#fl2)"/>'; };
|
||
var t = function (x, y, s, fs, mono) { return '<text x="' + x + '" y="' + y + '" ' + (mono ? M : F) + ' font-size="' + (fs || 14) + '">' + s + '</text>'; };
|
||
var S = function (w, h, body) { return '<svg viewBox="0 0 ' + w + ' ' + h + '" class="h-auto w-full" role="img"><defs><marker id="fl2" 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 Y = '#FFD23F', G = '#7CF2C0', P = '#FF6FB5', L = '#C4B5FD', N = '#F6F5F1', W = '#fff', D = '#13233A';
|
||
window.CONTENUS_SCHEMAS = Object.assign(window.CONTENUS_SCHEMAS || {}, {
|
||
binaire: { termes: ['bit', 'octet', 'quartet', 'poids fort', 'complément à deux', 'hexadécimal', 'base 2', 'base 16', '0x', 'Kio', 'ko'], figs: [
|
||
[3, 'Divisions successives : 45 en binaire', S(720, 250, [45, 22, 11, 5, 2, 1].map(function (n, i) { return b(20, 10 + i * 38, 140, 32, N, n + ' ÷ 2', 14) + b(180, 10 + i * 38, 60, 32, Y, n % 2, 16); }).join('') + a(280, 210, 280, 20) + t(300, 120, 'lecture de bas en haut', 16) + b(300, 140, 220, 50, G, '101101₂', 22))],
|
||
[4, 'Regrouper par 4 bits pour passer en hexadécimal', S(720, 170, b(20, 20, 150, 50, Y, '1011', 22) + b(180, 20, 150, 50, L, '0010', 22) + a(95, 70, 95, 105) + a(255, 70, 255, 105) + b(20, 110, 150, 45, W, 'B', 22) + b(180, 110, 150, 45, W, '2', 22) + t(380, 90, '1011 0010₂ = 0xB2 = 178', 20, 1))],
|
||
[6, 'Complément à deux : coder −5 sur 8 bits', S(720, 200, b(20, 20, 300, 44, W, '+5 = 0000 0101', 17) + a(170, 64, 170, 84) + b(20, 86, 300, 44, Y, 'inverser : 1111 1010', 17) + a(170, 130, 170, 150) + b(20, 152, 300, 44, P, '+1 : 1111 1011 = −5', 17) + t(360, 60, 'Plage sur 8 bits signés :', 16) + b(360, 80, 340, 50, G, '−128 … +127', 22))] ] },
|
||
terminal: { termes: ['pwd', 'ls -la', 'ls -l', 'cd ..', 'cd', 'mkdir -p', 'touch', 'cp -r', 'mv', 'rm -rf', 'rm', 'man', 'find', 'locate', 'echo $HOME', 'echo $PATH', '$HOME', '$PATH', '$USER', 'history', 'Ctrl+C', 'Ctrl+R', 'Tab', 'sudo', '/etc', '/home', '/var/log', '/tmp', '~'], figs: [
|
||
[0, 'Lire l’invite du shell', S(720, 170, b(20, 50, 110, 50, Y, 'eleve', 18) + b(130, 50, 40, 50, W, '@', 18) + b(170, 50, 120, 50, G, 'debian', 18) + b(290, 50, 30, 50, W, ':', 18) + b(320, 50, 60, 50, L, '~', 20) + b(380, 50, 50, 50, P, '$', 20) + t(20, 35, 'utilisateur', 13) + t(170, 35, 'machine', 13) + t(320, 35, 'dossier', 13) + t(380, 130, '$ = utilisateur · # = root', 15))],
|
||
[2, 'Chemin absolu et chemin relatif', S(720, 180, b(20, 20, 330, 44, Y, '/home/eleve/projets/web', 15) + t(20, 90, 'absolu : part toujours de /', 15) + b(380, 20, 320, 44, G, 'projets/web', 15) + t(380, 90, 'relatif : part du dossier courant', 15) + b(20, 120, 200, 40, N, '. = ici', 15) + b(240, 120, 200, 40, N, '.. = parent', 15) + b(460, 120, 240, 40, N, '~ = /home/eleve', 15))],
|
||
[4, 'Les 4 gestes sur les fichiers', S(720, 130, [['mkdir', Y, 'créer'], ['cp', G, 'copier'], ['mv', L, 'déplacer'], ['rm', P, 'supprimer']].map(function (c, i) { return b(20 + i * 175, 20, 160, 50, c[1], c[0], 20) + t(40 + i * 175, 100, c[2], 15); }).join(''))] ] },
|
||
droits: { termes: ['chmod', 'chown', 'umask', 'usermod -aG', 'adduser', 'sudo', 'visudo', 'SUID', 'SGID', 'sticky bit', 'setfacl', 'getfacl', '/etc/passwd', '/etc/shadow', '/etc/group', 'rwx', '777', '750', '644', 'moindre privilège'], figs: [
|
||
[2, 'Calculer un droit octal : r = 4, w = 2, x = 1', S(720, 170, b(20, 20, 80, 50, Y, 'r 4', 18) + t(110, 52, '+', 22) + b(130, 20, 80, 50, Y, 'w 2', 18) + t(220, 52, '+', 22) + b(240, 20, 80, 50, Y, 'x 1', 18) + t(330, 52, '=', 22) + b(360, 20, 80, 50, G, '7', 24) + b(20, 100, 80, 50, Y, 'r 4', 18) + t(110, 132, '+', 22) + b(130, 100, 80, 50, N, '– 0', 18) + t(220, 132, '+', 22) + b(240, 100, 80, 50, Y, 'x 1', 18) + t(330, 132, '=', 22) + b(360, 100, 80, 50, G, '5', 24) + t(480, 95, 'rwxr-x--- = 750', 20, 1))],
|
||
[4, 'Les trois droits spéciaux', S(720, 150, [['SUID 4', Y, 'droits du propriétaire'], ['SGID 2', G, 'hérite du groupe'], ['Sticky 1', P, 'chacun ses fichiers']].map(function (c, i) { return b(20 + i * 235, 20, 215, 55, c[1], c[0], 20) + t(30 + i * 235, 110, c[2], 15); }).join(''))] ] },
|
||
tubes: { termes: ['stdin', 'stdout', 'stderr', '2>', '>>', '&>', '/dev/null', 'grep', 'grep -E', 'grep -c', 'cut', 'sort', 'uniq -c', 'wc -l', 'head', 'tail -f', 'awk', 'sed', '|', '$( )', 'cron'], figs: [
|
||
[0, 'Les trois flux d’un processus', S(720, 180, b(260, 60, 200, 60, D, 'processus', 18, '#fff') + b(20, 70, 160, 40, Y, '0 · stdin', 15) + a(180, 90, 258, 90) + a(460, 75, 538, 45) + b(540, 20, 160, 40, G, '1 · stdout', 15) + a(460, 105, 538, 135) + b(540, 120, 160, 40, P, '2 · stderr', 15))],
|
||
[1, 'Écraser ou ajouter', S(720, 150, b(20, 20, 200, 50, Y, 'cmd > f', 18) + t(240, 52, 'f est vidé puis rempli', 15) + b(20, 85, 200, 50, G, 'cmd >> f', 18) + t(240, 117, 'la sortie s’ajoute à la fin de f', 15))] ] },
|
||
osi: { termes: ['TCP', 'UDP', 'IP', 'ICMP', 'ARP', 'MAC', 'Ethernet', 'HTTP', 'HTTPS', 'DNS', 'TLS', 'port', 'segment', 'paquet', 'trame', 'switch', 'routeur', 'SYN', 'ACK', 'ping', 'ip addr', 'ip link', 'ip neigh', 'ss -tlnp', 'tcpdump'], figs: [
|
||
[3, 'Encapsulation : chaque couche ajoute son en-tête', S(720, 230, b(470, 10, 230, 40, P, 'Données HTTP', 15) + b(360, 60, 110, 40, L, 'TCP', 15) + b(470, 60, 230, 40, P, 'Données', 15) + b(250, 110, 110, 40, G, 'IP', 15) + b(360, 110, 340, 40, L, 'segment', 15) + b(140, 160, 110, 40, Y, 'Ethernet', 15) + b(250, 160, 450, 40, G, 'paquet', 15) + t(20, 35, 'Application', 13) + t(20, 85, 'Transport', 13) + t(20, 135, 'Réseau', 13) + t(20, 185, 'Liaison', 13))],
|
||
[6, 'La poignée de main TCP', S(720, 230, b(20, 20, 150, 44, Y, 'Client', 17) + b(550, 20, 150, 44, G, 'Serveur', 17) + '<line x1="95" y1="64" x2="95" y2="220" ' + K + ' stroke-dasharray="6 6"/><line x1="625" y1="64" x2="625" y2="220" ' + K + ' stroke-dasharray="6 6"/>' + a(95, 95, 622, 115) + t(330, 95, 'SYN', 16, 1) + a(625, 145, 98, 165) + t(310, 145, 'SYN-ACK', 16, 1) + a(95, 195, 622, 215) + t(330, 195, 'ACK', 16, 1))],
|
||
[7, 'ARP : qui a 192.168.10.1 ?', S(720, 170, b(20, 60, 160, 50, Y, 'Poste', 17) + a(180, 75, 538, 75) + t(220, 65, 'broadcast : qui a .10.1 ?', 14, 1) + b(540, 60, 160, 50, G, 'Passerelle', 17) + a(540, 100, 182, 100) + t(220, 130, 'réponse : 3c:52:82:1a:0f:9b', 14, 1))] ] },
|
||
sql: { termes: ['SELECT', 'FROM', 'WHERE', 'ORDER BY', 'GROUP BY', 'HAVING', 'JOIN', 'LEFT JOIN', 'INNER JOIN', 'INSERT INTO', 'UPDATE', 'DELETE', 'COUNT', 'AVG', 'LIMIT', 'DISTINCT', 'clé primaire', 'clé étrangère', 'BEGIN', 'COMMIT', 'ROLLBACK', 'EXPLAIN', 'index', 'requête préparée'], figs: [
|
||
[4, 'INNER JOIN et LEFT JOIN', S(720, 200, '<circle cx="140" cy="100" r="70" fill="' + Y + '" ' + K + '/><circle cx="220" cy="100" r="70" fill="' + Y + '" fill-opacity=".001" ' + K + '/><path d="M180 43 A70 70 0 0 1 180 157 A70 70 0 0 1 180 43" fill="' + G + '" ' + K + '/>' + t(60, 190, 'LEFT JOIN : toute la gauche', 14) + '<circle cx="480" cy="100" r="70" fill="' + W + '" ' + K + '/><circle cx="560" cy="100" r="70" fill="' + W + '" fill-opacity=".001" ' + K + '/><path d="M520 43 A70 70 0 0 1 520 157 A70 70 0 0 1 520 43" fill="' + G + '" ' + K + '/>' + t(420, 190, 'INNER JOIN : l’intersection', 14))],
|
||
[3, 'Ordre logique d’exécution d’une requête', S(720, 110, ['FROM', 'WHERE', 'GROUP BY', 'HAVING', 'SELECT', 'ORDER BY'].map(function (c, i) { return b(10 + i * 118, 30, 104, 44, [Y, Y, G, G, L, P][i], c, 14) + (i < 5 ? a(114 + i * 118, 52, 126 + i * 118, 52) : ''); }).join(''))] ] },
|
||
python: { termes: ['print', 'input', 'int', 'float', 'str', 'bool', 'list', 'dict', 'if', 'elif', 'else', 'for', 'while', 'range', 'def', 'return', 'assert', 'try', 'except', 'with open', 'import csv', 'indentation'], figs: [
|
||
[3, 'Boucle for : un tour par élément', S(720, 170, [12, 15, 9, 18].map(function (n, i) { return b(20 + i * 90, 20, 80, 50, Y, n, 20); }).join('') + a(200, 80, 200, 110) + b(20, 115, 360, 44, G, 'total += n → 54', 17) + t(420, 55, 'for n in notes:', 18, 1) + t(420, 85, ' total += n', 18, 1))],
|
||
[5, 'Une fonction : entrée → traitement → sortie', S(720, 140, b(20, 40, 180, 60, Y, '[10, 20]', 18) + a(200, 70, 258, 70) + b(260, 30, 200, 80, D, 'moyenne()', 18, '#fff') + a(460, 70, 518, 70) + b(520, 40, 180, 60, G, '15.0', 22))] ] },
|
||
web: { termes: ['GET', 'POST', 'HTTP', 'HTTPS', '200', '404', '403', '500', '<h1>', '<title>', '<a>', 'class', 'display: grid', 'display: flex', 'apt install apache2', '/var/www/html', '/var/log/apache2', 'apachectl configtest', 'certbot', 'XSS', 'DOM', 'F12'], figs: [
|
||
[0, 'Anatomie d’une URL', S(720, 130, b(10, 30, 90, 44, Y, 'https', 15) + b(100, 30, 180, 44, G, 'www.lycee.fr', 15) + b(280, 30, 70, 44, L, ':443', 15) + b(350, 30, 200, 44, P, '/cours/index.html', 14) + b(550, 30, 160, 44, N, '?id=3', 15) + t(10, 105, 'protocole', 13) + t(100, 105, 'hôte', 13) + t(280, 105, 'port', 13) + t(350, 105, 'chemin', 13) + t(550, 105, 'paramètres', 13))],
|
||
[2, 'Structure d’une page HTML', S(720, 230, b(20, 10, 680, 36, N, '<html lang="fr">', 15) + b(40, 56, 300, 160, Y, '<head>', 15) + t(60, 150, 'meta, title, css', 14) + b(360, 56, 320, 160, G, '<body>', 15) + b(380, 110, 280, 30, W, '<h1>', 14) + b(380, 146, 280, 30, W, '<p> <a>', 14) + b(380, 182, 280, 26, W, '<form>', 13))] ] },
|
||
crypto: { termes: ['hachage', 'SHA-256', 'MD5', 'SHA-1', 'sel', 'bcrypt', 'Argon2id', 'AES', 'RSA', 'Ed25519', 'clé publique', 'clé privée', 'certificat', 'TLS', 'ssh-keygen', 'ssh-copy-id', 'sha256sum', 'PasswordAuthentication no', 'PermitRootLogin no', 'ANSSI', 'CNIL'], figs: [
|
||
[1, 'Hachage : une empreinte à sens unique', S(720, 150, b(20, 30, 170, 50, Y, '"bonjour"', 17) + a(190, 55, 258, 55) + b(260, 20, 170, 70, D, 'SHA-256', 18, '#fff') + a(430, 55, 498, 55) + b(500, 30, 200, 50, G, '2cb4b1…3e18', 15) + t(260, 130, 'impossible de revenir en arrière', 15))],
|
||
[2, 'Stocker un mot de passe', S(720, 150, b(20, 40, 140, 50, Y, 'mot de passe', 14) + t(170, 72, '+', 22) + b(195, 40, 120, 50, L, 'sel', 17) + a(315, 65, 378, 65) + b(380, 30, 150, 70, D, 'Argon2id', 17, '#fff') + a(530, 65, 588, 65) + b(590, 40, 110, 50, G, 'hash', 17))],
|
||
[5, 'HTTPS en trois temps', S(720, 150, [['1 · certificat', Y], ['2 · échange de clé', L], ['3 · trafic en AES', G]].map(function (c, i) { return b(20 + i * 235, 40, 210, 60, c[1], c[0], 15) + (i < 2 ? a(230 + i * 235, 70, 253 + i * 235, 70) : ''); }).join(''))] ] }
|
||
});
|
||
})();
|