https://clementgodbarge.com/ar/tag/%D8%A7%D9%84%D8%AA%D8%AF%D8%B1%D9%8A%D8%B3/التدريسHugoBlox Kit (https://hugoblox.com)arThu, 13 Feb 2025 00:00:00 +0000https://clementgodbarge.com/media/icon_hu_64a6c3bec25b3d7b.pnghttps://clementgodbarge.com/ar/tag/%D8%A7%D9%84%D8%AA%D8%AF%D8%B1%D9%8A%D8%B3/https://clementgodbarge.com/ar/post/baudot/Thu, 13 Feb 2025 00:00:00 +0000https://clementgodbarge.com/ar/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)، وتُعرف كذلك بشفرة بودو-موراي، في عشرينيات القرن العشرين تهذيبًا للشفرة التلغرافية الأصلية التي ابتكرها إميل بودو (Émile Baudot) في سبعينيات القرن التاسع عشر. وقد كان لهذه الأنظمة المبكرة أثرٌ مباشر في ما تلاها من تطور الحوسبة:</p> <ul> <li>كان الترميز بخمسة بتات مثالًا مبكرًا على ترميز المحارف</li> <li>ولّد ضيق مجموعة المحارف (32 تركيبة لا غير بخمسة بتات) آليةً بارعة للتبديل بين وضع الحروف (LETTERS) ووضع الأرقام (FIGURES)</li> <li>ظل هذا النظام مستعملًا في آلات التلغراف الطابعة (teletype) حتى وقت متقدم من القرن العشرين</li> </ul> <h2 id="تعلم-آلات-الحالة-لعبا">تعلّم آلات الحالة لعبًا</h2> <p>تفتح آلية التبديل بين الحروف والأرقام باب آلات الحالة من تلقاء نفسها؛ فيكتشف الطلاب بالتجربة أن النمط الواحد قد يدل على محرفين مختلفين تبعًا للوضع الجاري. وهذه المعايشة العملية للترميز القائم على الحالة تُعدّهم لما هو أعقد من مفاهيم الحوسبة. فنمط البتات <code>00011</code>، مثلًا، يدل على:</p> <ul> <li>الحرف &lsquo;A&rsquo; في وضع الحروف (LETTERS)</li> <li>الرقم &lsquo;1&rsquo; في وضع الأرقام (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>https://clementgodbarge.com/ar/code/baudot-emulator/Thu, 13 Feb 2025 00:00:00 +0000https://clementgodbarge.com/ar/code/baudot-emulator/<p>هذا المحاكي لشفرة ITA2 وسيلةٌ تعليمية عملية تجعل مفاهيم الترميز المجردة مرئيةً يتفاعل معها الطالب بيده. فحين يكتب الطلاب نصًّا ويرونه ينقلب في الحال أنماطًا من الثقوب، فإنهم يتعلمون في آن واحد عدة مفاهيم محورية في الحوسبة والاتصالات.</p> <h2 id="الفوائد-التعليمية">الفوائد التعليمية</h2> <p>فهو أولًا يجسّد التمثيل الثنائي، أي كيف يستحيل النص أنماطًا من آحاد وأصفار. نحن نعلّم هذا الأمر في الغالب تعليمًا نظريًّا؛ أما أن يرى الطالب الثقوب وهي تظهر على الشريط، فذلك ما يفهمه كيف تحمل الأنظمة المادية معلومات رقمية.</p> <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>ثم إن آلية التبديل بين وضع الحروف (LETTERS) ووضع الأرقام (FIGURES) تفتح باب آلات الحالة من تلقاء نفسها؛ فيكتشف الطلاب بالتجربة أن النمط الواحد قد يدل على محرفين مختلفين تبعًا للوضع الجاري. وهذه المعايشة العملية للترميز القائم على الحالة تُعدّهم لما هو أعقد من مفاهيم الحوسبة.</p> <h2 id="تفاصيل-التنفيذ">تفاصيل التنفيذ</h2> <p>كُتب المحاكي بلغة JavaScript وHTML/CSS، فيسهل تضمينه في أي صفحة ويب. والشيفرة معيارية قابلة للتطويع بحسب السياق التعليمي.</p> <p>تجدون الشيفرة المصدرية ويمكنكم تجربة المحاكي بأنفسكم في .</p>