https://clementgodbarge.com/es/category/herramientas-didacticas/Herramientas DidácticasHugoBlox Kit (https://hugoblox.com)es-esThu, 13 Feb 2025 00:00:00 +0000https://clementgodbarge.com/media/icon_hu_64a6c3bec25b3d7b.pnghttps://clementgodbarge.com/es/category/herramientas-didacticas/https://clementgodbarge.com/es/post/baudot/Thu, 13 Feb 2025 00:00:00 +0000https://clementgodbarge.com/es/post/baudot/<h2 id="dar-cuerpo-a-lo-abstracto">Dar cuerpo a lo abstracto</h2> <p>Este emulador de ITA2 es, ante todo, un recurso para el aula. Al volver visibles y manipulables las nociones abstractas de la codificación, introduce a los estudiantes en una idea central de la informática y de las telecomunicaciones: la representación binaria, esto es, el modo en que un texto se convierte en una secuencia de unos y ceros. Solemos explicar todo esto en abstracto; ver cómo van apareciendo los agujeros en la cinta ayuda, en cambio, a comprender que un sistema físico puede contener información 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="contexto-histórico-del-telégrafo-al-ordenador">Contexto histórico: del telégrafo al ordenador</h2> <p>El código ITA2 (Alfabeto Telegráfico Internacional n.º 2), llamado también código Baudot-Murray, se desarrolló en los años veinte del siglo pasado como perfeccionamiento del código telegráfico que Émile Baudot había ideado en la década de 1870. Aquellos primeros sistemas de telecomunicación dejaron una huella directa en la informática posterior:</p> <ul> <li>Su esquema de cinco bits fue una de las primeras codificaciones de caracteres</li> <li>Las limitaciones del repertorio (con cinco bits solo caben 32 combinaciones) obligaron a idear el ingenioso mecanismo de cambio LETRAS/CIFRAS</li> <li>Los teletipos siguieron usando este sistema hasta bien entrado el siglo XX</li> </ul> <h2 id="aprender-las-máquinas-de-estados-jugando">Aprender las máquinas de estados jugando</h2> <p>El mecanismo de cambio LETRAS/CIFRAS es la puerta natural a las máquinas de estados. A fuerza de probar, los estudiantes descubren que un mismo patrón puede representar caracteres distintos según el modo en que se encuentre la máquina; y esa experiencia directa de una codificación dependiente del estado los prepara para nociones informáticas más complejas. Así, el patrón de bits <code>00011</code> representa:</p> <ul> <li>la letra «A» en modo LETRAS</li> <li>la cifra «1» en modo CIFRAS Esta doble lectura según el estado está en la raíz misma de cómo los ordenadores manejan los datos.</li> </ul> <h2 id="actividades-para-el-aula">Actividades para el aula</h2> <p>Algunas maneras de sacar partido al emulador en clase:</p> <ol> <li><strong>Reto de descifrado</strong>: dar a los estudiantes mensajes codificados en ITA2 para que los descifren</li> <li><strong>Codificación eficiente</strong>: discutir por qué el mecanismo de cambio importaba tanto para ahorrar ancho de banda</li> <li><strong>Evolución de las codificaciones</strong>: comparar los cinco bits del ITA2 con los siete de ASCII y con Unicode</li> <li><strong>Computación física</strong>: tender un puente entre este sistema histórico y microcontroladores actuales como Arduino</li> </ol> <h2 id="ventajas-para-la-accesibilidad">Ventajas para la accesibilidad</h2> <p>Más allá de su interés histórico, el enfoque se adapta a distintos estilos de aprendizaje:</p> <ul> <li>Quien aprende con los ojos ve los patrones</li> <li>Quien aprende con las manos interviene directamente en el proceso de codificación</li> <li>Quien prefiere los conceptos puede explorar la vertiente matemática de la teoría de la información</li> </ul> <h2 id="detalles-de-implementación">Detalles de implementación</h2> <p>El emulador está escrito en JavaScript y se integra sin dificultad en cualquier plataforma docente basada en la web. El código es modular y puede adaptarse a contextos de enseñanza muy distintos. El código fuente está disponible, y el emulador puede probarse, en el </p>