 |
| سلسلة: مدارس بلا إنترنت (المقال 5) |
مقدمة
- في المقالات السابقة، حولنا المعمل إلى منصة اختبارات ومكتبة فيديوهات. اليوم، سننتقل إلى المستوى التالي: تحويل المتصفح إلى بيئة برمجة حقيقية.
- بدلاً من استخدام برامج "المفكرة" البدائية، أو تثبيت برامج ثقيلة على أجهزة المعمل القديمة، سأقدم لكم اليوم "المحرر الذكي". هو ليس مجرد صفحة ويب، بل هو بيئة تطوير متكاملة (IDE) تعمل محلياً، تدعم تلوين الأكواد، ترقيم الأسطر، والوضع الليلي، وتعمل حتى على الجوالات!
- هذا النظام سيمكنك من شرح لغات (HTML, CSS, JavaScript) باحترافية، حيث يكتب الطالب الكود ويرى النتيجة فوراً بضغطة زر.
- جدير بالذكر ان السكربت من إعداد موقع هرمش.
أولاً: مميزات "المحرر الذكي" الذي سنضيفه
هذا السكربت (المبني على مكتبة CodeMirror الشهيرة) يوفر مميزات لا غنى عنها في حصة الحاسب:- تلوين الأكواد (Syntax Highlighting): يميز الوسوم عن النصوص، مما يسهل القراءة واكتشاف الأخطاء.
- أرقام الأسطر: تتيح للمعلم أن يقول: "يا شباب، الخطأ في السطر رقم 5".
- أدوات إضافية: زر لتحميل الكود كملف، زر لتغيير الألوان (Dark/Light Mode)، وزر لتغيير تخطيط الشاشة.
- دعم الجوال: واجهة مخصصة تعمل بسلاسة على شاشات الهواتف والتابلت.
ثانياً: التركيب (خطوة بخطوة)
بما أن النظام متطور، فقد قمت بتجهيزه لك في ملف مضغوط واحد يحتوي على كل المكتبات والملفات اللازمة.- تحميل النظام:
- فك الضغط:
- اذهب لمسار السيرفر (عادةً D:\laragon\www أو حسب مكان تثبيتك)".
- فك الضغط عن الملف، وسينتج لديك مجلد باسم webeditor.
- تأكد: عند الدخول للمجلد يجب أن ترى ملف index.html ومجلدات libraries و js وغيرها.
- التجربة:
- افتح المتصفح واكتب 192.168.1.10/webeditor.
- هل ظهر المحرر بالألوان والأدوات؟ مبارك!
ثالثاً: ربطه بالواجهة الرئيسية
لكي يصل الطلاب للمحرر بسهولة، سنضيف زراً مميزاً في الصفحة الرئيسية:- اذهب لمجلد www وافتح ملف index.html باستخدام Notepad++.
- أضف الكود التالي في قائمة التطبيقات نهاية الروابط تقريباَ كما الصورة السابقة :
- من المتوقع ان تصبح الصفحة الرئيسية قريبة من الاتي :
 |
| صورة توضيحية فقط قد تختلف حسب خطة سيرك |
رابعاً: كيف تستخدمه في حصتك؟ (سيناريو تعليمي)
هذا المحرر يفتح آفاقاً جديدة للتدريس:- تحدي الألوان: اطلب من الطلاب كتابة كود CSS لتغيير خلفية الصفحة، وبما أن المحرر يدعم تلوين الأكواد، سيميز الطالب فوراً بين اسم الخاصية background-color والقيمة red.
- اكتشاف الخطأ: اكتب كوداً ناقصاً (نسيت إغلاق وسم </h1> مثلاً) واطلب منهم تصحيحه. أرقام الأسطر ستساعدهم جداً في تحديد مكان الخطأ.
- الحفظ: بعد أن يبدع الطالب في التصميم، يمكنه ضغط زر "تحميل الكود" ليحتفظ بملف html خاص به كإنجاز يأخذه معه للمنزل.
في المقال القادم..
انتهينا من الجانب "التقني البحت". حان وقت المرح! في المقال القادم، سنضيف "مركز الترفيه التعليمي"، والذي يضم أدوات خفيفة ومسلية مثل: اختبار سرعة الطباعة، ألعاب الذكاء، والسبورة الذكية.جهزوا أنفسكم لجعل المعمل مكاناً ممتعاً!
دمتم بخير