صنع المواقع والدروس والألعاب
بالذكاء الاصطناعي
من فكرة مبسطة إلى موقع تعليمي حي يصله طلابك من أي هاتف — في ساعة واحدة، بصفر تكلفة، بدون خبرة برمجية. أوامر جاهزة وخطوات مفصّلة لكل مرحلة.
لجميع معلمي ومراكز التعليم الديني والكوادر التعليمية
أساسيات البرمجة للمواقع
لا تحتاج لحفظ شيء — الذكاء الاصطناعي يكتب كل هذا نيابةً عنك. فقط افهم المفهوم!
الذكاء الاصطناعي يكتب كل هذا الكود نيابةً عنك! مهمتك أن تعرف كيف تطلب منه بالأسلوب الصحيح، وأين تضع الكود الناتج. هذه الورشة تعلّمك ذلك بالضبط.
هيكل الملف الواحد الكامل
<!-- ملف index.html — الثلاثة داخل ملف واحد --> <!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="UTF-8"> <title>عنوان الدرس</title> <style> /* هنا يوضع CSS — كل ألوان وتصميم الصفحة */ body { font-family: 'Tajawal', sans-serif; } </style> </head> <body> <!-- هنا يوضع HTML — محتوى الصفحة المرئي --> <h1>عنوان الدرس</h1> <p>محتوى الدرس هنا...</p> <script> // هنا يوضع JavaScript — كل التفاعل والوظائف console.log('الدرس يعمل!'); </script> </body> </html>
ماذا يمكن للمعلم أن يصنع؟
أنواع الذكاء الاصطناعي
افهم الفرق بين أنواع أنظمة الذكاء الاصطناعي لتختار الأنسب لكل مهمة
الأنسب لـ: كتابة الكود، إنتاج المحتوى، الإجابة عن الأسئلة، التلخيص
الأنسب لـ: المشاريع الكاملة التلقائية، التصحيح التلقائي، البحث وإنجاز المهام المركّبة
الأنسب لـ: تحليل الصور، استخراج نص من الكتب المصورة، شرح الرسوم البيانية
تفريغ صوتي: TurboScribe (تحويل المحاضرات لنص بدقة عالية جداً)
الأنسب لـ: إنشاء صور للدروس، تصميم شعارات، إنتاج محتوى بصري إسلامي
متى تستخدم أياً منهم؟
| المهمة | النوع المناسب | المثال |
|---|---|---|
| كتابة درس تفاعلي HTML | محادثة (Chatbot) | Claude / Gemini |
| بناء موقع كامل تلقائياً | وكيل (Agent) | Manus AI |
| تلخيص كتاب مرفوع كصورة | متعدد الوسائط | Gemini + رفع الملف |
| تصميم صور إسلامية للدرس | توليد الصور | Bing Creator / نانو بنانا |
| تحويل الكتاب لبودكاست وأسئلة | متخصص | NoteBookLM |
| كتابة محتوى يومي متعدد الصيغ | محادثة سخية | Gemini (مجاني) |
عندما يخترع الذكاء الاصطناعي معلومات غير صحيحة بثقة كاملة. الحل: دائماً أعطه النص الأصلي من الكتاب ولا تطلب منه "تذكّر" المعلومات الشرعية من تلقاء نفسه. قل له: "النص الأصلي هو: [الصق النص هنا]" ثم اطلب التحليل.
أدوات الذكاء الاصطناعي
دليل شامل لأكثر من ٣٠ أداة — لكل مرحلة من مراحل إنتاج المحتوى التعليمي
🆕 أدوات جديدة مهمة يجب معرفتها
🧑💻 أدوات توليد الكود والمحتوى
مجاني سخي
محدود مجاناً الأنسب: كود طويل معقد
محدود مجاناً
مجاني سخي
مجاني بالكامل بديل ممتاز مجاني
مدفوع
مجاني للمطورين
| الأداة | جودة الكود | طول الكود | دعم العربية | السياق | التكلفة |
|---|---|---|---|---|---|
| Claude | ★★★★★ | طويل جداً | ممتاز | 200K رمز | محدود |
| Gemini | ★★★★☆ | متوسط | ممتاز | 1M رمز | مجاني |
| Kimi | ★★★★☆ | طويل | جيد جداً | 128K رمز | مجاني |
| Z.ai | ★★★★☆ | طويل جيد | ممتاز | 128K+ رمز | مجاني |
| ChatGPT | ★★★★☆ | متوسط | جيد | 128K رمز | محدود |
| Manus | ★★★★★ | مشاريع كاملة | جيد | وكيل | مدفوع |
🖼️ أدوات توليد الصور
مجاني
جزئياً مجاني
مجاني تجريبي
📊 أدوات الدروس والعروض والإدارة
مجاني
جزئياً مجاني
مجاني بحدود
هندسة الأوامر
الفرق بين أمر يعطيك ٢٠٠ سطر وأمر يعطيك ١٨٠٠ سطر — تعلّم كيف تصيغ الأمر المناسب
الجمل السحرية الخمس
أسلوب تبادل الأدوار (Role Prompting)
أخبر الذكاء الاصطناعي بالدور الذي تريده أن يتبناه قبل طلبك — هذا يُغير كامل طريقة تفكيره وإجابته.
// الأسلوب: أعطه هوية خبير قبل طلبك تصرّف كمعلم حوزوي خبير متخصص في تدريس الفقه للمبتدئين، يستخدم أساليب تبسيطية حديثة مع الحفاظ على دقة المتن العلمي. الآن: أكتب لي درس تفاعلي عن [الموضوع]...
أمثلة لأدوار مفيدة للمعلم:
- "تصرّف كمصمم واجهات تعليمية متخصص في المحتوى الإسلامي"
- "تصرّف كمطور ألعاب تعليمية للأطفال بأسلوب جذاب وبسيط"
- "تصرّف كمحرر علمي حوزوي يُراجع دقة المتون الفقهية"
التلقين التدريجي بالأمثلة (Few-Shot Prompting)
استخراج بنك أسئلة بصيغة JSON
🧩 تقنيات هندسة الأوامر المتقدمة
بدل أن تطلب الإجابة مباشرة، اجعل الذكاء الاصطناعي يفكك المسألة خطوةً بخطوة قبل الكتابة. النتيجة أعمق وأدق بكثير خصوصاً في المسائل الفقهية المعقدة.
أقوى تقنية لضمان عدم تغيير الذكاء الاصطناعي لكلمة واحدة في المتن — ضرورية للمتون الفقهية والأدعية والزيارات:
بدل كتابة الأسئلة مباشرة في HTML، اطلب أن تُخزّن كـ JSON متغير داخل الكود — هذا يجعل تعديل الأسئلة لاحقاً أسهل بكثير:
أسرار الحصول على نتيجة مناسبة
GitHub و Netlify
من الكود على جهازك إلى رابط قابل للمشاركة مع الجميع — في دقائق لا ساعات، مجاناً تماماً
🐙 الخطوة الأولى: GitHub
my-lesson — اجعله Public — اضغط "Create repository"fiqh.html ← صفحة فرعية: darsi.netlify.app/fiqh/
quiz.html ← صفحة أخرى: darsi.netlify.app/quiz/
🚀 الخطوة الثانية: Netlify
darsi-arabi — سيكون: darsi-arabi.netlify.app📁 التنظيم المناسب للمستودع
// هيكل مستودع منظّم للمعلم my-website/ ├── index.html ← الصفحة الرئيسية ├── fiqh.html ← صفحة الفقه ├── quiz.html ← صفحة المسابقات ├── images/ ← مجلد الصور │ ├── logo.png │ └── banner.jpg ├── audio/ ← مجلد الصوتيات │ └── tilawa.mp3 └── README.md ← وصف المشروع
الرابط المجاني ينتهي بـ
.netlify.app ولا يمكن إزالته في الخطة المجانية. للاستخدام التعليمي غير الرسمي هو يكفي تماماً.التعامل مع أخطاء الذكاء الاصطناعي
مشاكل شائعة يواجهها كل معلم — وحلول عملية جاهزة للتطبيق الفوري
🚨 المشاكل الشائعة وحلولها
المشكلة: الذكاء الاصطناعي يتوقف عن الكتابة في المنتصف لأن الكود أكبر من حد الرد.
الحل: اكتب فوراً:
أكمل من حيث توقفت بالضبط — لا تُعيد ما كتبته، فقط أكمل باقي الكود من آخر سطر توقفت عندهإذا احتجت الملف كاملاً في آخر المطاف، قل:
الآن أعطني الملف بالكامل من البداية مدمجاً في رد واحد، دون اختصار أي سطرالمشكلة: الذكاء الاصطناعي يخترع نصوصاً فقهية أو يُغيّر المتن الأصلي.
الحل: أعطه النص الأصلي ومنعه صراحةً:
النص الأصلي من الكتاب هو بالضبط: "[ألصق النص]"
التزم بهذا النص حرفياً. لا تُغيّر كلمة واحدة ولا تُضف من عندك.
عند الاقتباس اكتب بالضبط ما كتبه المصنف ولا تُفسّر أو تُعدّل.المشكلة: بعد عشرات الرسائل يبدأ الذكاء الاصطناعي "بالنسيان" أو يُقصّر.
الحل:
- افتح محادثة جديدة بعد كل درس كامل
- في المحادثة الجديدة: ابدأ بلصق كودك الحالي كاملاً قبل طلبك
- أو أضف ملخصاً في بداية الرسالة: "هذا الكود الحالي للدرس: [الصق الكود]"
المشكلة: يُعطيك كوداً قصيراً رغم طلبك التفصيل.
الحل — تقسيم طلبات الموقع الكبير:
// بدلاً من طلب الكل دفعة واحدة، قسّم: رسالة ١: "أكتب لي فقط القسم الأول من الدرس: العنوان والمقدمة والمتن الأصلي بأقصى إمكانياتك" رسالة ٢: "أضف الآن قسم التقسيم الهرمي والشجرة التفاعلية للكود السابق" رسالة ٣: "أضف جدول الملخص والأمثلة والأسئلة التقييمية" رسالة ٤: "أعطني الملف الكامل مدمجاً"
إذا شككت في صحة الكود أو المحتوى، اطلب منه مراجعة ذاته:
راجع الكود الذي كتبته للتو بعناية واكتشف:
١. هل هناك أخطاء برمجية؟
٢. هل هناك معلومات دينية اخترعتها غير موجودة في النص الأصلي؟
٣. هل كل الميزات المطلوبة موجودة؟
ثم أعطني النسخة المُصحّحة الكاملة.افتح صفحة الكود في المتصفح، اضغط F12 لفتح أدوات المطور، انسخ رسالة الخطأ الحمراء، ثم قل:
الكود يُعطي هذا الخطأ: [الصق رسالة الخطأ]
هذا هو الكود الكامل: [الصق الكود]
أصلح الخطأ فقط ولا تُغيّر بقية الكود وأعطني الملف كاملاً🔁 متى تفتح محادثة جديدة؟
المفاهيم المتقدمة
API ونظام GlideStack الذي يُحوّل المواقع الثابتة إلى ديناميكية بصفر تكلفة
ما هو API؟
موقعك (الزبون) يطلب بيانات ← API (النادل) يذهب للخادم ويجلبها ← موقعك يعرضها للزائر.
بدون API موقعك الثابت لا يستطيع جلب بيانات جديدة — البيانات مجمّدة في الكود. مع API موقعك "حي" يتحدث مع الإنترنت.
المواقع الثابتة مقابل الديناميكية
| المعيار | 🧱 موقع ثابت | ⚡ موقع ديناميكي | ✨ GlideStack |
|---|---|---|---|
| التكلفة الشهرية | $0 | $5 - $100+ | $0 |
| تحديث البيانات | يحتاج تعديل الكود | فوري من لوحة تحكم | من Google Drive مباشرة |
| الاستضافة | GitHub/Netlify مجاناً | سيرفر مدفوع | GitHub/Netlify مجاناً |
| قاعدة البيانات | لا توجد | MySQL/MongoDB مدفوعة | Google Drive مجاناً |
| المناسب لـ | دروس، ألعاب | منصات كبيرة | مكتبات، دروس، متاجر |
✨ نظام GlideStack / GDSA
لماذا هذه المعمارية ثورية للمعلم؟
كيف يعمل GDSA خطوة بخطوة؟
📋 أمثلة تطبيقية لمعلمي التعليم الديني
| المشروع | هيكل Drive | ما يظهر في الموقع |
|---|---|---|
| مكتبة الكتب الدينية | 📁 فقه / 📁 عقائد / 📁 أدعية → 📄 كتاب.pdf | مكتبة قابلة للبحث والتحميل |
| أرشيف دروس المعلم | 📁 الفصل الأول / 📁 الثاني → 📄 درس.pdf | أرشيف منظم مع بحث |
| بنك أسئلة الاختبارات | 📊 Sheets: السؤال، الخيارات، الجواب | اختبار تفاعلي يجلب الأسئلة تلقائياً |
| قاعدة الأدعية والزيارات | 📁 يومية / 📁 زيارات / 📁 تعقيبات | موقع دعاء مصنّف قابل للبحث |
| صور الفعاليات | 📁 2024 / 📁 2025 → 🖼️ صور | معرض صور منظم بالسنة |
🔧 تقنيات متقدمة مفيدة للمعلم
أضف عداداً تنازلياً لمسابقاتك أو اختباراتك. ينتهي تلقائياً وينتقل للسؤال التالي:
// عداد تنازلي - أضفه في أمرك للذكاء الاصطناعي let timeLeft = 60; const timer = setInterval(() => { timeLeft--; document.getElementById('timer').textContent = timeLeft; if (timeLeft <= 0) { clearInterval(timer); nextQuestion(); } }, 1000);
الذكاء الاصطناعي يكتب أكواد SVG ترسم أقواساً وزخارف إسلامية مباشرة في HTML — بدون أي صور خارجية، وخفيفة الحجم:
هذه الـ APIs مجانية بالكامل ويمكن إضافتها لأي درس:
| الخدمة | الرابط | ما تجلبه |
|---|---|---|
| أوقات الصلاة | api.aladhan.com | مواقيت الصلوات الخمس |
| التاريخ الهجري | api.aladhan.com/v1/gToH | تحويل الميلادي للهجري |
| آية قرآنية يومية | api.alquran.cloud | آيات + ترجمات + تلاوات |
| أسماء الله الحسنى | api.aladhan.com/v1/asmaAlHusna | الأسماء + المعاني |
// مثال: جلب أوقات الصلاة في البحرين fetch('https://api.aladhan.com/v1/timingsByCity?city=Manama&country=BH&method=8') .then(r => r.json()) .then(data => { const times = data.data.timings; document.getElementById('fajr').textContent = times.Fajr; document.getElementById('dhuhr').textContent = times.Dhuhr; });
جزء من تقنية PWA — يحفظ الصفحة في ذاكرة الهاتف لتعمل بدون إنترنت. مثالي لمكتبات الأدعية والدروس التي يحتاجها الطالب في أي وقت:
حين يصبح الكود ضخماً جداً (أكثر من ٢٠٠٠ سطر)، يمكن تقسيمه:
مكتبة الأوامر الجاهزة
أوامر جاهزة بالعربية للنسخ والاستخدام الفوري — خصّصها بموضوعك وانتهيت في دقائق
إضافات تفاعلية للدروس
ميزات احترافية تُضاف لأي درس أو لعبة لتُحسّن تجربة الطالب
💾 حفظ تقدم الطالب (Local Storage)
يمكن حفظ تقدم الطالب ونتائجه في متصفحه دون أي سيرفر. البيانات تبقى حتى بعد إغلاق الصفحة.
🖨️ زر الطباعة بتنسيق الورق (Print CSS)
🎓 نظام الشهادات التلقائية
🎊 تأثيرات المكافآت البصرية
🔊 دمج الصوتيات والتلاوات
🔎 البحث الداخلي في الدرس
🪟 نوافذ شرح المصطلحات (Modals)
مثالية لشرح غريب الألفاظ والمصطلحات الفقهية. الطالب ينقر على "الترخّص" أو "السهو" فتظهر له بطاقة تعريف أنيقة دون أن يغادر الدرس.
🎯 وضع التركيز — Focus Mode
↕️ التمرير السلس بين الأقسام — Smooth Scroll
/* أضف في CSS الخاص بدرسك */ html { scroll-behavior: smooth; } /* وفي JavaScript للتنقل إلى قسم معين */ document.getElementById('section-3') .scrollIntoView({ behavior: 'smooth', block: 'start' });
في أمرك للذكاء الاصطناعي: "أضف تمريراً سلساً بين الأقسام عند الضغط على أي رابط في الفهرس"
إدارة الملفات والاستضافة
تقنيات لإدارة مشاريعك بشكل أفضل وتجنب المشاكل الشائعة
🔄 حل مشكلة الكاش (Cache)
المشكلة: حدّثت الموقع في GitHub لكن الطلاب يرون النسخة القديمة.
الحل للطلاب: Ctrl+Shift+R (أو Cmd+Shift+R في Mac) لتحديث الصفحة مع تجاهل الكاش.
الحل البرمجي: أضف رقم إصدار لروابط CSS/JS في الكود:
<!-- غيّر الرقم في كل مرة تحدّث الكود --> <link rel="stylesheet" href="style.css?v=1.5"> <script src="app.js?v=1.5"></script>
↩️ التراجع عن خطأ نُشر بالخطأ (GitHub Version Control)
📲 تحويل الموقع لتطبيق هاتف (PWA)
يمكن تحويل موقعك الثابت لـ"تطبيق" يمكن للطالب تثبيته على هاتفه بدون متجر التطبيقات — يعمل أوفلاين!
🖼️ بدائل رفع الصور بدون GitHub
📊 مراقبة الزيارات والاستهلاك
| الخدمة | الحد المجاني | ماذا يحدث عند التجاوز |
|---|---|---|
| Netlify Bandwidth | 100 GB شهرياً | يتوقف الموقع — يُمكن الترقية أو الانتظار للشهر الجديد |
| GitHub Storage | 1 GB للمستودع | تُرفض الملفات الجديدة — يجب حذف ملفات قديمة |
| Google Drive API | 1,000,000 طلب يومياً | نادراً ما يُتجاوز في المواقع التعليمية |
تجربة المستخدم والجانب التربوي
اجعل دروسك سهلة الاستخدام على الهاتف ومُريحة للعين ومُراعية للجميع
📱 التوافق مع الهواتف (Mobile First)
🔤 الخطوط العربية الاحترافية
/* إضافة خطوط Google Fonts العربية */ <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&family=Amiri:wght@400;700&display=swap" rel="stylesheet"> /* في CSS */ body { font-family: 'Tajawal', sans-serif; /* للنصوص العادية */ } .quran, .hadith { font-family: 'Amiri', serif; /* للنصوص الدينية */ font-size: 1.2rem; line-height: 2.2; }
🌙 الوضع الفاتح والداكن
♿ إمكانية الوصول (Accessibility)
📑 الفهرس الجانبي العائم
بنية الدرس المناسب
المكوّنات السبعة التي يجب أن يحتويها أي درس تفاعلي تطلبه من الذكاء الاصطناعي
✦ نص المتن الأصلي مُظلّل ✦ تقسيم هرمي ✦ شجرة تفاعلية ✦ جدول ملخص ✦ أمثلة حياتية ✦ أسئلة تفاعلية ✦ خريطة ذهنية ✦ وضع ليلي ✦ طباعة ✦ شهادة
أفكار مشاريع مبتكرة
٣٥+ فكرة لمشاريع تعليمية رقمية يمكن بناؤها بالذكاء الاصطناعي في ساعات
🛠️ أدوات تربوية يومية
📚 مشاريع تعليمية متوسطة
🎮 ألعاب تعليمية مبتكرة
✨ مشاريع خاصة ومبتكرة
💡 أفكار متقدمة للمعلمين المبدعين
أنشئ ملف Google Doc مشتركاً بين جميع معلمي المركز يحتوي على:
- الأوامر الناجحة التي أنتجت أفضل النتائج
- قوالب الدروس الجاهزة لكل مادة
- قائمة الأخطاء الشائعة وكيف تُتجنب
- روابط أفضل الدروس المُنتجة كأمثلة
يُحدَّث جماعياً بمشاركة كل معلم لما يتعلمه. هذا يُراكم معرفة المركز ويُوفّر وقت الجميع.
<!-- زر واتساب جاهز للنسخ --> <a href="https://wa.me/97312345678?text=لدي سؤال عن درس [اسم الدرس]" target="_blank" style="background:#25D366;color:white;padding:12px 20px;border-radius:10px;text-decoration:none"> 📱 تواصل مع المعلم </a>
يمكن إضافة عرض وقت الصلاة القادم في أي درس باستخدام API مجاني:
// API مجاني لأوقات الصلاة fetch('https://api.aladhan.com/v1/timingsByCity?city=Manama&country=BH&method=8') .then(r => r.json()) .then(data => { const fajr = data.data.timings.Fajr; document.getElementById('prayer-time').textContent = `الفجر: ${fajr}`; });
📋 مرجع سريع — أدوات الورشة كاملة
| المهمة | الأداة | الرابط | التكلفة |
|---|---|---|---|
| كتابة كود HTML طويل | 🧠 Claude | claude.ai | محدود |
| كود + محتوى عربي | 🔮 Gemini | gemini.google.com | مجاني |
| نصوص طويلة جداً | 🌙 Kimi | kimi.com | مجاني |
| مشاريع كاملة تلقائية | 🤖 Manus | manus.im | مدفوع |
| تجريب نماذج Google | 🔬 AI Studio | aistudio.google.com | مجاني |
| أدوات AI تجريبية | 🧪 Google Labs | labs.google/fx/ar | مجاني |
| توليد صور | 🖼️ Bing Create | bing.com/create | مجاني |
| صور متخصصة | 🍌 نانو بنانا | nanobanana.pro | جزئياً |
| ملخصات + بودكاست | 📓 NoteBookLM | notebooklm.google.com | مجاني |
| سلايدات من نص | 🎯 Gamma | gamma.app | جزئياً |
| حفظ الكود | 🐙 GitHub | github.com | مجاني |
| استضافة الموقع | 🚀 Netlify | netlify.com | مجاني |
| مفتاح API | ☁️ Google Cloud | console.cloud.google.com | مجاني بحدود |
| رفع الصور | 📷 Imgbb | imgbb.com | مجاني |
انتهت الورشة
بُنيت هذه الورشة بعناية — استخدمها بحرية كاملة وشاركها مع زملائك المعلمين في جميع مراكز التعليم الديني
✅ خلاصة الورشة في ١٠ مبادئ لا تنساها
📋 مرجع سريع — أدوات الورشة كاملة
| المهمة | الأداة | الرابط | التكلفة |
|---|---|---|---|
| كتابة كود HTML طويل | 🧠 Claude | claude.ai | محدود |
| نموذج جديد مجاني قوي | ⚡ z.ai | chat.z.ai | مجاني |
| كود + محتوى عربي | 🔮 Gemini | gemini.google.com | مجاني |
| نصوص طويلة جداً | 🌙 Kimi | kimi.com | مجاني |
| مشاريع كاملة تلقائية | 🤖 Manus | manus.im | مدفوع |
| ملخصات كتب + بودكاست | 📓 NoteBookLM | notebooklm.google.com | مجاني |
| تفريغ صوتي عربي | 🎙️ TurboScribe | turboscribe.ai | جزئياً |
| توليد صور | 🖼️ Bing Creator | bing.com/create | مجاني |
| رسوم توضيحية تلقائية | 💡 Napkin.ai | napkin.ai | مجاني |
| بحث وتوثيق | 🔍 Perplexity | perplexity.ai | مجاني |
| سلايدات من نص | 🎯 Gamma | gamma.app | جزئياً |
| حفظ الكود | 🐙 GitHub | github.com | مجاني |
| استضافة الموقع | 🚀 Netlify | netlify.com | مجاني |
| رفع الصور | 📷 Imgbb | imgbb.com | مجاني |
📞 تواصل مع المُعدّ
طالب حوزة الغدير للعلوم الإسلامية · مركز المرتضى (ع) معلم · صانع أكواد AI
لأي استفسار أو طلب محتوى مخصص أو دعم في الورشة:
حالة استقبال الطلبات: مفتوح إن تيسّر الوقت