https://clementgodbarge.com/ca/category/eines-docents/Eines DocentsHugoBlox Kit (https://hugoblox.com)caThu, 13 Feb 2025 00:00:00 +0000https://clementgodbarge.com/media/icon_hu_64a6c3bec25b3d7b.pnghttps://clementgodbarge.com/ca/category/eines-docents/https://clementgodbarge.com/ca/post/baudot/Thu, 13 Feb 2025 00:00:00 +0000https://clementgodbarge.com/ca/post/baudot/<h2 id="fer-tangibles-els-conceptes-abstractes">Fer tangibles els conceptes abstractes</h2> <p>Aquest emulador de l’ITA2 és una eina docent pràctica. En fer visibles i interactius uns conceptes de codificació que d’entrada són abstractes, introdueix els estudiants a una noció clau de la informàtica i de les telecomunicacions: la representació binària, és a dir, com un text es converteix en seqüències d’uns i de zeros. Sovint ho ensenyem de manera abstracta; veure aparèixer els forats de debò ajuda els estudiants a entendre com un sistema físic pot representar informació digital. <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="context-històric-del-telègraf-a-la-informàtica">Context històric: del telègraf a la informàtica</h2> <p>El codi ITA2 (Alfabet Telegràfic Internacional núm. 2), conegut també com a codi Baudot-Murray, es va desenvolupar als anys vint del segle XX com un refinament del codi telegràfic original que Émile Baudot havia ideat als anys setanta del segle XIX. Aquests primers sistemes de telecomunicació van influir directament en l’evolució posterior de la informàtica:</p> <ul> <li>L’esquema de codificació de 5 bits va ser un dels primers exemples de codificació de caràcters</li> <li>Les limitacions del joc de caràcters (només 32 combinacions possibles amb 5 bits) van donar lloc a l’enginyós mecanisme de canvi LLETRES/XIFRES</li> <li>El sistema es va fer servir en els teletips fins ben entrat el segle XX</li> </ul> <h2 id="aprendre-les-màquines-destats-jugant">Aprendre les màquines d’estats jugant</h2> <p>El mecanisme de canvi LLETRES/XIFRES introdueix les màquines d’estats de manera natural. Tot experimentant, els estudiants descobreixen que un mateix patró pot representar caràcters diferents segons el mode actiu. Aquesta experiència directa amb la codificació basada en estats els prepara per a conceptes informàtics més complexos. Per exemple, el patró de bits <code>00011</code> representa:</p> <ul> <li>La lletra «A» en mode LLETRES</li> <li>El número «1» en mode XIFRES Aquesta doble interpretació segons l’estat és un principi fonamental de com els ordinadors treballen amb les dades.</li> </ul> <h2 id="activitats-per-a-laula">Activitats per a l’aula</h2> <p>Algunes maneres d’incorporar l’emulador de l’ITA2 a la docència:</p> <ol> <li><strong>Repte de desxifratge</strong>: fer que els estudiants descodifiquin missatges codificats en patrons ITA2</li> <li><strong>Codificació eficient</strong>: discutir per què el mecanisme de canvi era important per estalviar amplada de banda</li> <li><strong>Evolució de la codificació</strong>: comparar el codi de 5 bits de l’ITA2 amb l’ASCII (7 bits) i amb Unicode</li> <li><strong>Informàtica física</strong>: relacionar aquest sistema històric amb microcontroladors moderns com Arduino</li> </ol> <h2 id="avantatges-per-a-laccessibilitat">Avantatges per a l’accessibilitat</h2> <p>Més enllà de l’interès històric, aquest enfocament ajuda estudiants amb estils d’aprenentatge diferents:</p> <ul> <li>Els aprenents visuals veuen els patrons</li> <li>Els aprenents cinestèsics interactuen directament amb el procés de codificació</li> <li>Els pensadors conceptuals poden explorar els aspectes matemàtics de la teoria de la informació</li> </ul> <h2 id="detalls-dimplementació">Detalls d’implementació</h2> <p>L’emulador està escrit en JavaScript i s’integra fàcilment en qualsevol plataforma d’aprenentatge en línia. El codi és modular i es pot adaptar a contextos docents diversos. Pots consultar el codi font i provar l’emulador tu mateix a: </p>