https://clementgodbarge.com/fr/tag/histoire-numerique/Histoire NumériqueHugoBlox Kit (https://hugoblox.com)fr-frThu, 13 Feb 2025 00:00:00 +0000https://clementgodbarge.com/media/icon_hu_64a6c3bec25b3d7b.pnghttps://clementgodbarge.com/fr/tag/histoire-numerique/https://clementgodbarge.com/fr/post/baudot/Thu, 13 Feb 2025 00:00:00 +0000https://clementgodbarge.com/fr/post/baudot/<h2 id="donner-corps-à-labstraction">Donner corps à l’abstraction</h2> <p>Cet émulateur ITA2 est d’abord un outil de classe. Il rend visible, et manipulable, une notion qui est au cœur de l’informatique comme des télécommunications : la représentation binaire, c’est-à-dire la façon dont un texte se change en une suite de uns et de zéros. On l’enseigne d’ordinaire au tableau, abstraitement ; or il suffit de voir les trous se percer un à un dans la bande pour comprendre qu’un dispositif matériel peut porter de l’information numérique. <div class="baudot-emulator"> <h2>ITA2 (Baudot-Murray) Telegraph Type Emulator</h2> <p>Type a word in the input below to see its representation on the ITA2 tape.</p> <div class="baudot-controls"> <label for="baudot-input">Type word:</label> <input id="baudot-input" class="text-input" size="50" maxlength="50" /> <button type="button" id="baudot-ltr-button" class="control-button active">LTR</button> <button type="button" id="baudot-fig-button" class="control-button">FIG</button> </div> <div class="tape-outer-container"> <div class="tape-container"> <table> <tbody id="baudot-tape"></tbody> </table> </div> </div> <style> .baudot-emulator { --light-color: #f3f4f6; --dark-color: #1f2937; --light-alt-color: #e5e7eb; --dark-alt-color: #374151; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; max-width: 100%; margin: 2rem 0; padding: 0; box-sizing: border-box; } .baudot-emulator { --tape-bg: var(--light-color); --hole-bg: var(--light-color); --hole-border: #d1d5db; --punched-bg: var(--dark-color); --punched-border: var(--dark-color); --sprocket-bg: var(--light-color); --sprocket-border: #9ca3af; --button-bg: var(--light-color); --button-bg-active: #d1d5db; --button-text: var(--dark-color); --button-border: #d1d5db; --input-bg: white; --input-border: #d1d5db; --input-text: var(--dark-color); --line-number: #6b7280; } html.dark .baudot-emulator, html[data-theme='dark'] .baudot-emulator, body.dark .baudot-emulator { --tape-bg: var(--dark-alt-color); --hole-bg: var(--dark-alt-color); --hole-border: #4b5563; --punched-bg: var(--light-color); --punched-border: var(--light-color); --sprocket-bg: var(--dark-alt-color); --sprocket-border: #9ca3af; --button-bg: var(--dark-alt-color); --button-bg-active: #4b5563; --button-text: var(--light-color); --button-border: #4b5563; --input-bg: var(--dark-alt-color); --input-border: #4b5563; --input-text: var(--light-color); --line-number: #9ca3af; } .baudot-controls { margin-bottom: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .baudot-emulator .text-input { flex: 1; min-width: 200px; padding: 0.5rem; font-size: 1rem; border: 1px solid var(--input-border); border-radius: 4px; background: var(--input-bg); color: var(--input-text); } .baudot-emulator .control-button { padding: 0.5rem 1rem; background: var(--button-bg); color: var(--button-text); border: 1px solid var(--button-border); border-radius: 4px; cursor: pointer; font-size: 0.9rem; } .baudot-emulator .control-button.active { background: var(--button-bg-active); font-weight: bold; } .tape-outer-container { padding: 0; margin-bottom: 1.5rem; border-radius: 4px; overflow: hidden; } .tape-container { width: 100%; overflow-x: auto; background: var(--tape-bg); padding: 1rem 0.5rem; } .baudot-emulator table { border-collapse: collapse; width: 100%; table-layout: fixed; border: none; } .baudot-emulator tr { height: 24px; border: none; } .baudot-emulator td { border: none; padding: 0; } .baudot-emulator .line-number { width: 20px; text-align: center; color: var(--line-number); font-size: 0.8rem; padding: 0 8px 0 0; font-weight: bold; } .baudot-emulator .cell { position: relative; width: 20px; height: 20px; } .baudot-emulator .cell-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; border-radius: 50%; background: var(--hole-bg); border: 1px solid var(--hole-border); } .baudot-emulator .punched .cell-content { background: var(--punched-bg); border: 1px solid var(--punched-border); } .baudot-emulator .sprocket-hole { position: absolute; left: 50%; top: 100%; transform: translate(-50%, -50%); width: 4px; height: 4px; border-radius: 50%; background: var(--sprocket-bg); border: 1px solid var(--sprocket-border); z-index: 2; } </style> <script> document.addEventListener('DOMContentLoaded', function() { initBaudotEmulator(); }); function initBaudotEmulator() { if (!document.getElementById('baudot-input')) return; const textInput = document.getElementById('baudot-input'); const tape = document.getElementById('baudot-tape'); const ltrButton = document.getElementById('baudot-ltr-button'); const figButton = document.getElementById('baudot-fig-button'); const ita2Code = { 'A': '00011', 'B': '11001', 'C': '01110', 'D': '01001', 'E': '00001', 'F': '01101', 'G': '11010', 'H': '10100', 'I': '00110', 'J': '01011', 'K': '01111', 'L': '10010', 'M': '11100', 'N': '01100', 'O': '11000', 'P': '10110', 'Q': '10111', 'R': '01010', 'S': '00101', 'T': '10000', 'U': '00111', 'V': '11110', 'W': '10011', 'X': '11101', 'Y': '10101', 'Z': '10001', '1': '00011', '2': '11001', '3': '01110', '4': '01001', '5': '00001', '6': '01101', '7': '11010', '8': '10100', '9': '01011', '0': '11000', '-': '00011', '?': '00100', ':': '01010', '(': '11000', ')': '11101', '.': '01000', ',': '00010', "'": '10001', '=': '01111', '/': '10011', '+': '11011', ' ': '00100', 'FIG': '11011', 'LTR': '11111', }; function generateTape() { let rows = ''; for (let row = 0; row < 5; row++) { rows += '<tr>'; rows += `<td class="line-number">${row + 1}</td>`; for (let col = 0; col < 50; col++) { rows += `<td id="baudot_${row}_${col}" class="cell unpunched"> <div class="cell-content"></div> ${row === 2 ? '<div class="sprocket-hole"></div>' : ''} </td>`; } rows += '</tr>'; } tape.innerHTML = rows; } function updateITA2Code(word) { clearTape(); word = word.toUpperCase(); let tapePosition = 0; let currentCharType = 'LTR'; ltrButton.classList.add('active'); figButton.classList.remove('active'); for (let i = 0; i < word.length; i++) { const char = word[i]; let code = ita2Code[char] || ita2Code[' ']; let requiredCharType = /[A-Z ]/.test(char) ? 'LTR' : 'FIG'; if (requiredCharType !== currentCharType) { const shiftCode = requiredCharType === 'LTR' ? ita2Code['LTR'] : ita2Code['FIG']; punchTape(shiftCode, tapePosition++); currentCharType = requiredCharType; ltrButton.classList.toggle('active', currentCharType === 'LTR'); figButton.classList.toggle('active', currentCharType === 'FIG'); } punchTape(code, tapePosition++); } } function punchTape(code, tapePosition) { if (tapePosition >= 50) return; for (let bit = 0; bit < 5; bit++) { const cell = document.getElementById(`baudot_${bit}_${tapePosition}`); if (cell) { cell.className = code[bit] === '1' ? 'cell punched' : 'cell unpunched'; } } } function clearTape() { for (let i = 0; i < 50; i++) { for (let bit = 0; bit < 5; bit++) { const cell = document.getElementById(`baudot_${bit}_${i}`); if (cell) { cell.className = 'cell unpunched'; } } } } generateTape(); textInput.addEventListener('input', function() { updateITA2Code(this.value); }); ltrButton.addEventListener('click', function() { this.classList.add('active'); figButton.classList.remove('active'); if (textInput.value) { updateITA2Code(textInput.value); } }); figButton.addEventListener('click', function() { this.classList.add('active'); ltrButton.classList.remove('active'); if (textInput.value) { updateITA2Code(textInput.value); } }); if (textInput.value) { updateITA2Code(textInput.value); } } </script> </div> </p> <h2 id="un-peu-dhistoire-du-télégraphe-à-lordinateur">Un peu d’histoire : du télégraphe à l’ordinateur</h2> <p>Le code ITA2 (International Telegraph Alphabet No. 2), dit aussi code Baudot-Murray, fut mis au point dans les années 1920 ; il perfectionnait le code télégraphique conçu par Émile Baudot dès les années 1870. Ces premiers systèmes de télécommunication ont pesé directement sur l’informatique qui allait suivre :</p> <ul> <li>le codage sur 5 bits est l’un des premiers exemples de codage de caractères ;</li> <li>l’étroitesse du jeu de caractères (5 bits ne donnent que 32 combinaisons) a suscité l’ingénieuse bascule LETTRES/CHIFFRES (LETTERS/FIGURES) ;</li> <li>les téléscripteurs ont continué de s’en servir jusque fort avant dans le XX^e siècle.</li> </ul> <h2 id="les-machines-à-états-en-jouant">Les machines à états, en jouant</h2> <p>La bascule LETTRES/CHIFFRES introduit sans qu’on y prenne garde la notion de machine à états. À force d’essais, les étudiants s’aperçoivent qu’un même motif désigne des caractères différents selon le mode en vigueur ; cette expérience concrète d’un codage qui dépend de l’état leur ouvre la voie vers des notions informatiques plus ardues. Ainsi, le motif <code>00011</code> représente :</p> <ul> <li>la lettre « A » en mode LETTRES ;</li> <li>le chiffre « 1 » en mode CHIFFRES. Cette double lecture, commandée par l’état, est au fondement même de la manière dont les ordinateurs traitent les données.</li> </ul> <h2 id="en-classe">En classe</h2> <p>Quelques manières d’intégrer l’émulateur ITA2 à un cours :</p> <ol> <li><strong>Déchiffrement</strong> : donner aux étudiants des messages codés en ITA2 à décoder</li> <li><strong>Économie du codage</strong> : expliquer pourquoi la bascule était précieuse pour ménager la bande passante</li> <li><strong>Généalogie des codages</strong> : comparer les 5 bits de l’ITA2 aux 7 bits de l’ASCII, puis à Unicode</li> <li><strong>Informatique physique</strong> : rapprocher ce système ancien des microcontrôleurs d’aujourd’hui, Arduino par exemple</li> </ol> <h2 id="un-outil-pour-tous-les-profils">Un outil pour tous les profils</h2> <p>Au-delà de son intérêt historique, l’émulateur convient à des étudiants dont les manières d’apprendre diffèrent :</p> <ul> <li>les visuels voient les motifs ;</li> <li>les manuels agissent directement sur le codage ;</li> <li>les esprits théoriciens peuvent pousser jusqu’aux mathématiques de la théorie de l’information.</li> </ul> <h2 id="sous-le-capot">Sous le capot</h2> <p>L’émulateur est écrit en JavaScript et s’intègre sans peine à toute plateforme pédagogique en ligne ; son code, modulaire, s’adapte à des contextes d’enseignement variés. Le code source est disponible, et l’émulateur peut s’essayer, ici : </p>