https://clementgodbarge.com/nl/tag/geschiedenis-van-de-informatica/Geschiedenis Van De InformaticaHugoBlox Kit (https://hugoblox.com)nl-nlThu, 13 Feb 2025 00:00:00 +0000https://clementgodbarge.com/media/icon_hu_64a6c3bec25b3d7b.pnghttps://clementgodbarge.com/nl/tag/geschiedenis-van-de-informatica/https://clementgodbarge.com/nl/post/baudot/Thu, 13 Feb 2025 00:00:00 +0000https://clementgodbarge.com/nl/post/baudot/<h2 id="abstracte-begrippen-tastbaar-maken">Abstracte begrippen tastbaar maken</h2> <p>Deze ITA2-emulator is een praktisch hulpmiddel voor de les. Door abstracte coderingsbegrippen zichtbaar en interactief te maken, laat hij studenten kennismaken met een kernbegrip uit de informatica en de telecommunicatie: de binaire voorstelling – hoe tekst verandert in patronen van enen en nullen. Meestal onderwijzen we dat abstract; wie de gaatjes daadwerkelijk ziet verschijnen, begrijpt beter hoe een fysiek systeem digitale informatie kan weergeven. <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="historische-context-van-telegraaf-tot-computer">Historische context: van telegraaf tot computer</h2> <p>De ITA2-code (International Telegraph Alphabet No. 2), ook bekend als de Baudot-Murray-code, werd in de jaren twintig van de vorige eeuw ontwikkeld als verfijning van de oorspronkelijke telegraafcode van Émile Baudot uit de jaren 1870. Deze vroege telecommunicatiesystemen hebben de latere ontwikkeling van de computer rechtstreeks beïnvloed:</p> <ul> <li>De vijfbitscodering was een vroeg voorbeeld van tekencodering</li> <li>De beperkte tekenset (met vijf bits zijn maar 32 combinaties mogelijk) leidde tot het vernuftige LETTERS/FIGURES-schakelmechanisme</li> <li>Het systeem bleef tot ver in de twintigste eeuw in gebruik voor telexapparaten</li> </ul> <h2 id="toestandsmachines-leren-door-te-spelen">Toestandsmachines leren door te spelen</h2> <p>Het LETTERS/FIGURES-schakelmechanisme is een natuurlijke inleiding tot toestandsmachines. Studenten ontdekken al experimenterend dat hetzelfde patroon verschillende tekens kan voorstellen, afhankelijk van de actieve modus. Wie zo hands-on ervaring opdoet met toestandsafhankelijke codering, is beter voorbereid op ingewikkelder concepten uit de informatica. Het bitpatroon <code>00011</code> staat bijvoorbeeld voor:</p> <ul> <li>de letter ‘A’ in de LETTERS-modus</li> <li>het cijfer ‘1’ in de FIGURES-modus Deze dubbele lezing, afhankelijk van de toestand, ligt aan de basis van hoe computers met gegevens omgaan.</li> </ul> <h2 id="lesactiviteiten">Lesactiviteiten</h2> <p>Enkele manieren om de ITA2-emulator in het onderwijs in te zetten:</p> <ol> <li><strong>Codekraken</strong>: laat studenten berichten ontcijferen die als ITA2-patronen zijn gecodeerd</li> <li><strong>Zuinig coderen</strong>: bespreek waarom het schakelmechanisme belangrijk was om bandbreedte te sparen</li> <li><strong>Evolutie van de codering</strong>: vergelijk de vijfbitscode van ITA2 met ASCII (7 bits) en Unicode</li> <li><strong>Physical computing</strong>: leg het verband tussen dit historische systeem en moderne microcontrollers zoals Arduino</li> </ol> <h2 id="winst-voor-de-toegankelijkheid">Winst voor de toegankelijkheid</h2> <p>Los van het historische belang komt deze aanpak tegemoet aan uiteenlopende leerstijlen:</p> <ul> <li>visueel ingestelde studenten zien de patronen</li> <li>wie al doende leert, grijpt rechtstreeks in het coderingsproces in</li> <li>conceptuele denkers kunnen de wiskundige kant van de informatietheorie verkennen</li> </ul> <h2 id="technische-details">Technische details</h2> <p>De emulator is geschreven in JavaScript en laat zich eenvoudig in elk webgebaseerd leerplatform inbouwen. De code is modulair en kan aan verschillende onderwijscontexten worden aangepast. De broncode vind je hier, en je kunt de emulator er meteen zelf uitproberen: </p>