https://clementgodbarge.com/ru/tag/%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5/ПрограммированиеHugoBlox Kit (https://hugoblox.com)ru-ruThu, 13 Feb 2025 00:00:00 +0000https://clementgodbarge.com/media/icon_hu_64a6c3bec25b3d7b.pnghttps://clementgodbarge.com/ru/tag/%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5/https://clementgodbarge.com/ru/post/baudot/Thu, 13 Feb 2025 00:00:00 +0000https://clementgodbarge.com/ru/post/baudot/<h2 id="как-сделать-абстрактное-осязаемым">Как сделать абстрактное осязаемым</h2> <p>Эмулятор ITA2 — практическое учебное пособие. Делая абстрактные понятия кодирования зримыми и интерактивными, он знакомит студентов с одной из ключевых идей вычислительной техники и телекоммуникаций — двоичным представлением, то есть тем, как текст превращается в последовательности нулей и единиц. Обычно мы преподаём это отвлечённо; но когда студент своими глазами видит, как в ленте появляются отверстия, ему куда легче понять, каким образом физическая система может нести цифровую информацию. <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="исторический-контекст-от-телеграфа-к-компьютеру">Исторический контекст: от телеграфа к компьютеру</h2> <p>Код ITA2 (Международный телеграфный алфавит № 2), известный также как код Бодо — Мюррея, был разработан в 1920-е годы как усовершенствование первоначального телеграфного кода Эмиля Бодо 1870-х годов. Эти ранние системы связи напрямую повлияли на позднейшее развитие вычислительной техники:</p> <ul> <li>пятибитная схема была одним из первых примеров кодирования символов;</li> <li>ограниченность набора символов (пять бит дают всего 32 комбинации) породила остроумный механизм переключения регистров LETTERS/FIGURES (буквы/цифры);</li> <li>система использовалась в телетайпах ещё долгие десятилетия XX века.</li> </ul> <h2 id="конечные-автоматы-в-игре">Конечные автоматы в игре</h2> <p>Механизм переключения LETTERS/FIGURES естественным образом подводит к понятию конечного автомата. Экспериментируя, студенты сами обнаруживают, что одна и та же комбинация может означать разные символы в зависимости от текущего режима. Такой живой опыт работы с кодированием, зависящим от состояния, готовит их к более сложным понятиям информатики. Скажем, комбинация битов <code>00011</code> означает:</p> <ul> <li>букву «A» в режиме LETTERS;</li> <li>цифру «1» в режиме FIGURES. Эта двойственность прочтения, зависящая от состояния, лежит в самой основе того, как компьютеры обращаются с данными.</li> </ul> <h2 id="задания-для-аудитории">Задания для аудитории</h2> <p>Вот несколько способов включить эмулятор ITA2 в занятия:</p> <ol> <li><strong>Взлом шифра</strong>: предложите студентам расшифровать сообщения, закодированные в виде комбинаций ITA2.</li> <li><strong>Экономное кодирование</strong>: обсудите, почему механизм переключения регистров был так важен для экономии пропускной способности.</li> <li><strong>Эволюция кодировок</strong>: сравните пятибитный код ITA2 с ASCII (7 бит) и Unicode.</li> <li><strong>Физические вычисления</strong>: свяжите эту историческую систему с современными микроконтроллерами вроде Arduino.</li> </ol> <h2 id="польза-для-доступности">Польза для доступности</h2> <p>Помимо исторического интереса, такой подход помогает студентам с разными стилями обучения:</p> <ul> <li>визуалы видят узоры;</li> <li>кинестетики напрямую взаимодействуют с процессом кодирования;</li> <li>те, кто мыслит понятиями, могут заняться математической стороной теории информации.</li> </ul> <h2 id="подробности-реализации">Подробности реализации</h2> <p>Эмулятор написан на JavaScript и легко встраивается в любую веб-платформу для обучения. Код модульный и настраивается под разные учебные задачи. Исходный код можно посмотреть, а эмулятор — опробовать здесь: </p>