https://clementgodbarge.com/sv/tag/datorhistoria/DatorhistoriaHugoBlox Kit (https://hugoblox.com)sv-seThu, 13 Feb 2025 00:00:00 +0000https://clementgodbarge.com/media/icon_hu_64a6c3bec25b3d7b.pnghttps://clementgodbarge.com/sv/tag/datorhistoria/https://clementgodbarge.com/sv/post/baudot/Thu, 13 Feb 2025 00:00:00 +0000https://clementgodbarge.com/sv/post/baudot/<h2 id="att-göra-det-abstrakta-gripbart">Att göra det abstrakta gripbart</h2> <p>Den här ITA2-emulatorn är ett handfast hjälpmedel i undervisningen. Genom att göra abstrakta kodningsbegrepp synliga och interaktiva leder den studenterna fram till ett av datorteknikens och telekommunikationens nyckelbegrepp: den binära representationen – hur text blir mönster av ettor och nollor. Det brukar vi lära ut abstrakt, men när hålen faktiskt dyker upp på remsan blir det lättare att begripa hur fysiska system kan bära digital information. <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="historisk-bakgrund-från-telegraf-till-dator">Historisk bakgrund: från telegraf till dator</h2> <p>Koden ITA2 (International Telegraph Alphabet No. 2), även kallad Baudot–Murray-koden, utvecklades på 1920-talet som en förfining av Émile Baudots ursprungliga telegrafkod från 1870-talet. Dessa tidiga telekommunikationssystem påverkade den senare datorutvecklingen direkt:</p> <ul> <li>Fembitarskodningen var ett tidigt exempel på teckenkodning</li> <li>Teckenuppsättningens begränsningar (bara 32 möjliga kombinationer med fem bitar) ledde till den sinnrika skiftmekanismen mellan BOKSTÄVER och SIFFROR (LETTERS/FIGURES)</li> <li>Systemet användes för fjärrskrivare långt in på 1900-talet</li> </ul> <h2 id="tillståndsmaskiner-på-lek">Tillståndsmaskiner på lek</h2> <p>Skiftmekanismen mellan BOKSTÄVER och SIFFROR är en naturlig ingång till tillståndsmaskiner. Genom att pröva sig fram upptäcker studenterna att samma mönster kan stå för olika tecken beroende på vilket läge apparaten befinner sig i. Den praktiska erfarenheten av tillståndsberoende kodning förbereder dem för mer avancerade datavetenskapliga begrepp. Bitmönstret <code>00011</code> står t.ex. för:</p> <ul> <li>bokstaven ’A’ i BOKSTÄVER-läget</li> <li>siffran ’1’ i SIFFROR-läget Denna dubbla tolkning, styrd av tillståndet, är grundläggande för hur datorer hanterar data.</li> </ul> <h2 id="övningar-i-klassrummet">Övningar i klassrummet</h2> <p>Några sätt att använda ITA2-emulatorn i undervisningen:</p> <ol> <li><strong>Kodknäckning</strong>: låt studenterna avkoda meddelanden skrivna som ITA2-mönster</li> <li><strong>Effektiv kodning</strong>: diskutera varför skiftmekanismen var viktig för att spara bandbredd</li> <li><strong>Kodningens utveckling</strong>: jämför ITA2:s fembitarskod med ASCII (sju bitar) och Unicode</li> <li><strong>Fysisk databehandling</strong>: koppla det historiska systemet till moderna mikrokontroller som Arduino</li> </ol> <h2 id="tillgänglighet">Tillgänglighet</h2> <p>Bortom det historiska intresset passar det här arbetssättet studenter som lär sig på olika sätt:</p> <ul> <li>den som lär visuellt ser mönstren</li> <li>den som lär genom att göra griper direkt in i kodningsprocessen</li> <li>den som tänker i begrepp kan utforska informationsteorins matematiska sida</li> </ul> <h2 id="teknisk-utformning">Teknisk utformning</h2> <p>Emulatorn är skriven i JavaScript och kan enkelt byggas in i vilken webbaserad lärplattform som helst. Koden är modulär och kan anpassas till olika undervisningssammanhang. Källkoden finns här, och där kan du också pröva emulatorn själv: </p>