https://clementgodbarge.com/pt/tag/programacao/ProgramaçãoHugoBlox Kit (https://hugoblox.com)pt-ptThu, 13 Feb 2025 00:00:00 +0000https://clementgodbarge.com/media/icon_hu_64a6c3bec25b3d7b.pnghttps://clementgodbarge.com/pt/tag/programacao/https://clementgodbarge.com/pt/post/baudot/Thu, 13 Feb 2025 00:00:00 +0000https://clementgodbarge.com/pt/post/baudot/<h2 id="tornar-tangível-o-abstrato">Tornar tangível o abstrato</h2> <p>Este emulador ITA2 é um auxiliar pedagógico de uso prático. Ao dar forma visível e interativa a conceitos abstratos de codificação, introduz os estudantes numa noção central da informática e das telecomunicações: a representação binária – ou seja, como um texto se converte em sequências de uns e zeros. Costumamos ensiná-la em abstrato; ora, ver os furos aparecerem na fita ajuda os estudantes a perceber como um sistema físico pode representar informação 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-do-telégrafo-à-informática">Contexto histórico: do telégrafo à informática</h2> <p>O código ITA2 (International Telegraph Alphabet No. 2), também conhecido como código Baudot-Murray, foi desenvolvido nos anos 1920 como aperfeiçoamento do código telegráfico original de Émile Baudot, que datava da década de 1870. Estes primeiros sistemas de telecomunicação influenciaram diretamente a informática que se lhes seguiu:</p> <ul> <li>O esquema de codificação em 5 bits foi um dos primeiros exemplos de codificação de caracteres</li> <li>As limitações do conjunto de caracteres (apenas 32 combinações possíveis com 5 bits) deram origem ao engenhoso mecanismo de comutação LETTERS/FIGURES (letras/algarismos)</li> <li>O sistema continuou a ser usado nos teleimpressores até bem entrado o século XX</li> </ul> <h2 id="aprender-as-máquinas-de-estados-a-brincar">Aprender as máquinas de estados a brincar</h2> <p>O mecanismo de comutação LETTERS/FIGURES introduz as máquinas de estados com toda a naturalidade. Experimentando, os estudantes descobrem que o mesmo padrão pode representar caracteres diferentes consoante o modo ativo. Esta experiência direta da codificação dependente de um estado prepara-os para conceitos informáticos mais complexos. Por exemplo, o padrão de bits <code>00011</code> representa:</p> <ul> <li>A letra «A» em modo LETTERS</li> <li>O algarismo «1» em modo FIGURES Esta dupla interpretação em função do estado está na base da maneira como os computadores lidam com os dados.</li> </ul> <h2 id="atividades-para-a-sala-de-aula">Atividades para a sala de aula</h2> <p>Eis algumas maneiras de integrar o emulador ITA2 no ensino:</p> <ol> <li><strong>Desafio de descodificação</strong>: pedir aos estudantes que decifrem mensagens codificadas em padrões ITA2</li> <li><strong>Codificação eficiente</strong>: discutir por que razão o mecanismo de comutação era importante para poupar largura de banda</li> <li><strong>Evolução da codificação</strong>: comparar o código de 5 bits do ITA2 com o ASCII (7 bits) e o Unicode</li> <li><strong>Computação física</strong>: ligar este sistema histórico aos microcontroladores modernos, como o Arduino</li> </ol> <h2 id="vantagens-em-matéria-de-acessibilidade">Vantagens em matéria de acessibilidade</h2> <p>Para além do interesse histórico, esta abordagem serve estudantes com estilos de aprendizagem diversos:</p> <ul> <li>Os visuais veem os padrões</li> <li>Os cinestésicos interagem diretamente com o processo de codificação</li> <li>Os de pendor conceptual podem explorar a vertente matemática da teoria da informação</li> </ul> <h2 id="pormenores-de-implementação">Pormenores de implementação</h2> <p>O emulador está escrito em JavaScript e integra-se facilmente em qualquer plataforma de ensino em linha. O código é modular e adaptável a diferentes contextos pedagógicos. O código-fonte está disponível, e o emulador pode ser experimentado, no </p>