<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Admin |</title><link>https://clementgodbarge.com/de/authors/admin/</link><atom:link href="https://clementgodbarge.com/de/authors/admin/index.xml" rel="self" type="application/rss+xml"/><description>Admin</description><generator>HugoBlox Kit (https://hugoblox.com)</generator><language>de-de</language><lastBuildDate>Thu, 13 Feb 2025 00:00:00 +0000</lastBuildDate><item><title>Binärcode begreifen mit dem ITA2-Telegrafen-Emulator</title><link>https://clementgodbarge.com/de/post/baudot/</link><pubDate>Thu, 13 Feb 2025 00:00:00 +0000</pubDate><guid>https://clementgodbarge.com/de/post/baudot/</guid><description>&lt;h2 id="abstraktes-greifbar-machen"&gt;Abstraktes greifbar machen&lt;/h2&gt;
&lt;p&gt;Dieser ITA2-Emulator ist ein handfestes Lehrmittel: Er macht sichtbar und anfassbar, was sonst abstrakt bleibt, und führt Studierende so an einen Grundbegriff von Informatik und Telekommunikation heran – die Binärdarstellung, also die Frage, wie aus Text ein Muster aus Einsen und Nullen wird.
Oft lehren wir das rein abstrakt. Wer aber zusieht, wie die Löcher tatsächlich im Streifen erscheinen, begreift viel leichter, dass ein physisches System digitale Information tragen kann.
&lt;div class="baudot-emulator"&gt;
&lt;h2&gt;ITA2 (Baudot-Murray) Telegraph Type Emulator&lt;/h2&gt;
&lt;p&gt;Type a word in the input below to see its representation on the ITA2 tape.&lt;/p&gt;
&lt;div class="baudot-controls"&gt;
&lt;label for="baudot-input"&gt;Type word:&lt;/label&gt;
&lt;input id="baudot-input" class="text-input" size="50" maxlength="50" /&gt;
&lt;button type="button" id="baudot-ltr-button" class="control-button active"&gt;LTR&lt;/button&gt;
&lt;button type="button" id="baudot-fig-button" class="control-button"&gt;FIG&lt;/button&gt;
&lt;/div&gt;
&lt;div class="tape-outer-container"&gt;
&lt;div class="tape-container"&gt;
&lt;table&gt;
&lt;tbody id="baudot-tape"&gt;&lt;/tbody&gt;
&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;style&gt;
.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;
}
&lt;/style&gt;
&lt;script&gt;
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 &lt; 5; row++) {
rows += '&lt;tr&gt;';
rows += `&lt;td class="line-number"&gt;${row + 1}&lt;/td&gt;`;
for (let col = 0; col &lt; 50; col++) {
rows += `&lt;td id="baudot_${row}_${col}" class="cell unpunched"&gt;
&lt;div class="cell-content"&gt;&lt;/div&gt;
${row === 2 ? '&lt;div class="sprocket-hole"&gt;&lt;/div&gt;' : ''}
&lt;/td&gt;`;
}
rows += '&lt;/tr&gt;';
}
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 &lt; 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 &gt;= 50) return;
for (let bit = 0; bit &lt; 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 &lt; 50; i++) {
for (let bit = 0; bit &lt; 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);
}
}
&lt;/script&gt;
&lt;/div&gt;
&lt;/p&gt;
&lt;h2 id="historischer-hintergrund-vom-telegrafen-zum-computer"&gt;Historischer Hintergrund: Vom Telegrafen zum Computer&lt;/h2&gt;
&lt;p&gt;Der ITA2-Code (Internationales Telegrafenalphabet Nr. 2), auch Baudot-Murray-Code genannt, entstand in den 1920er Jahren als Weiterentwicklung des Telegrafencodes, den Émile Baudot in den 1870er Jahren entworfen hatte. Diese frühen Fernmeldesysteme haben die spätere Entwicklung des Computers unmittelbar geprägt:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Das 5-Bit-Schema ist ein frühes Beispiel für Zeichenkodierung&lt;/li&gt;
&lt;li&gt;Weil fünf Bit nur 32 Kombinationen zulassen, brauchte es einen Kunstgriff: die Umschaltung zwischen Buchstaben und Ziffern (LETTERS/FIGURES)&lt;/li&gt;
&lt;li&gt;Fernschreiber arbeiteten mit diesem System bis weit ins 20. Jahrhundert hinein&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="zustandsautomaten-im-spiel-lernen"&gt;Zustandsautomaten im Spiel lernen&lt;/h2&gt;
&lt;p&gt;Mit der LETTERS/FIGURES-Umschaltung ist der Zustandsautomat wie von selbst im Raum. Beim Ausprobieren entdecken die Studierenden, dass ein und dasselbe Muster je nach Modus ein anderes Zeichen bedeutet – eine handfeste Erfahrung mit zustandsabhängiger Kodierung, die den Boden für anspruchsvollere Begriffe der Informatik bereitet.
Das Bitmuster &lt;code&gt;00011&lt;/code&gt; etwa steht für:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;den Buchstaben ‚A‘ im LETTERS-Modus&lt;/li&gt;
&lt;li&gt;die Ziffer ‚1‘ im FIGURES-Modus
Dass die Bedeutung vom Zustand abhängt, gehört zum Kern dessen, wie Computer mit Daten umgehen.&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="übungen-für-den-unterricht"&gt;Übungen für den Unterricht&lt;/h2&gt;
&lt;p&gt;Einige Vorschläge, wie sich der ITA2-Emulator in die Lehre einbauen lässt:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Code knacken&lt;/strong&gt;: Lassen Sie Studierende Nachrichten entschlüsseln, die als ITA2-Muster vorliegen&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Sparsam kodieren&lt;/strong&gt;: Erörtern Sie, warum die Umschaltung wichtig war, um Bandbreite zu sparen&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Kodierung im Wandel&lt;/strong&gt;: Stellen Sie dem 5-Bit-Code von ITA2 ASCII (7 Bit) und Unicode gegenüber&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Physical Computing&lt;/strong&gt;: Schlagen Sie die Brücke von diesem historischen System zu heutigen Mikrocontrollern wie dem Arduino&lt;/li&gt;
&lt;/ol&gt;
&lt;h2 id="ein-gewinn-für-die-zugänglichkeit"&gt;Ein Gewinn für die Zugänglichkeit&lt;/h2&gt;
&lt;p&gt;Abgesehen vom historischen Reiz kommt dieser Zugang Studierenden mit ganz unterschiedlichen Lernweisen entgegen:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Wer visuell lernt, sieht die Muster&lt;/li&gt;
&lt;li&gt;Wer über die Hand lernt, greift unmittelbar in den Kodierungsvorgang ein&lt;/li&gt;
&lt;li&gt;Wer begrifflich denkt, kann die mathematische Seite der Informationstheorie erkunden&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="zur-implementierung"&gt;Zur Implementierung&lt;/h2&gt;
&lt;p&gt;Der Emulator ist in JavaScript geschrieben und lässt sich ohne Umstände in jede webbasierte Lernplattform einbinden. Der Code ist modular aufgebaut und für verschiedene Unterrichtssituationen anpassbar.
Quellcode und Emulator zum Selbstausprobieren finden Sie hier:
&lt;/p&gt;</description></item></channel></rss>