https://clementgodbarge.com/vi/tag/lich-su-%C4%91ien-toan/Lịch Sử Điện ToánHugoBlox Kit (https://hugoblox.com)vi-vnThu, 13 Feb 2025 00:00:00 +0000https://clementgodbarge.com/media/icon_hu_64a6c3bec25b3d7b.pnghttps://clementgodbarge.com/vi/tag/lich-su-%C4%91ien-toan/https://clementgodbarge.com/vi/post/baudot/Thu, 13 Feb 2025 00:00:00 +0000https://clementgodbarge.com/vi/post/baudot/<h2 id="biến-cái-trừu-tượng-thành-cái-sờ-được">Biến cái trừu tượng thành cái sờ được</h2> <p>Máy mô phỏng ITA2 này là một công cụ giảng dạy đúng nghĩa. Nhờ làm cho những khái niệm mã hóa vốn trừu tượng trở nên hữu hình và có thể thao tác, nó dẫn sinh viên đến với một ý niệm then chốt của ngành điện toán và viễn thông: biểu diễn nhị phân – làm sao chữ viết biến thành những chuỗi số 0 và số 1. Chúng ta thường dạy điều này trên giấy. Nhưng khi tận mắt thấy các lỗ đục hiện ra trên băng, sinh viên hiểu ngay rằng một hệ thống vật lý cũng có thể mang thông tin số. <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="bối-cảnh-lịch-sử-từ-điện-báo-đến-máy-tính">Bối cảnh lịch sử: từ điện báo đến máy tính</h2> <p>Mã ITA2 (Bảng chữ cái điện báo quốc tế số 2), còn gọi là mã Baudot-Murray, ra đời trong thập niên 1920, là bản hoàn thiện của mã điện báo nguyên thủy do Émile Baudot đặt ra từ thập niên 1870. Những hệ thống viễn thông sơ khai ấy đã ảnh hưởng trực tiếp đến các bước phát triển sau này của ngành điện toán:</p> <ul> <li>Sơ đồ mã hóa 5 bit là một ví dụ sớm về mã hóa ký tự</li> <li>Giới hạn của bộ ký tự (chỉ 32 tổ hợp với 5 bit) đã dẫn đến cơ chế chuyển đổi LETTERS/FIGURES đầy tài tình</li> <li>Hệ thống này còn được dùng cho máy điện báo chữ (teletype) suốt một phần lớn thế kỷ XX</li> </ul> <h2 id="học-máy-trạng-thái-qua-trò-chơi">Học máy trạng thái qua trò chơi</h2> <p>Cơ chế chuyển đổi LETTERS/FIGURES đưa khái niệm máy trạng thái vào bài học một cách tự nhiên. Tự tay thử nghiệm, sinh viên phát hiện rằng cùng một chuỗi bit có thể biểu thị những ký tự khác nhau, tùy vào chế độ hiện hành. Trải nghiệm trực tiếp với mã hóa dựa trên trạng thái này chuẩn bị cho các em bước tới những khái niệm điện toán phức tạp hơn. Chẳng hạn, chuỗi bit <code>00011</code> biểu thị:</p> <ul> <li>Chữ &lsquo;A&rsquo; khi ở chế độ LETTERS</li> <li>Số &lsquo;1&rsquo; khi ở chế độ FIGURES Cách đọc kép tùy theo trạng thái này chính là nền tảng cho cách máy tính xử lý dữ liệu.</li> </ul> <h2 id="hoạt-động-trên-lớp">Hoạt động trên lớp</h2> <p>Vài gợi ý để đưa máy mô phỏng ITA2 vào giờ học:</p> <ol> <li><strong>Thử thách giải mã</strong>: Cho sinh viên giải mã những thông điệp đã được mã hóa theo mẫu ITA2</li> <li><strong>Mã hóa tiết kiệm</strong>: Thảo luận vì sao cơ chế chuyển đổi lại quan trọng đến thế trong việc tiết kiệm băng thông</li> <li><strong>Tiến hóa của mã hóa</strong>: So sánh mã 5 bit của ITA2 với ASCII (7 bit) và Unicode</li> <li><strong>Điện toán vật lý</strong>: Nối hệ thống lịch sử này với các vi điều khiển hiện đại như Arduino</li> </ol> <h2 id="lợi-ích-về-tiếp-cận">Lợi ích về tiếp cận</h2> <p>Ngoài giá trị lịch sử, cách tiếp cận này còn giúp những sinh viên có phong cách học khác nhau:</p> <ul> <li>Người học bằng mắt nhìn thấy các mẫu hình</li> <li>Người học bằng tay tương tác trực tiếp với quá trình mã hóa</li> <li>Người thiên về khái niệm có thể khám phá khía cạnh toán học của lý thuyết thông tin</li> </ul> <h2 id="chi-tiết-triển-khai">Chi tiết triển khai</h2> <p>Máy mô phỏng được viết bằng JavaScript và dễ dàng tích hợp vào bất kỳ nền tảng học tập trực tuyến nào. Mã nguồn được tổ chức theo mô-đun và có thể tùy biến cho những bối cảnh giảng dạy khác nhau. Bạn có thể xem mã nguồn và tự mình thử máy mô phỏng tại: </p>