دليل معلمي التعليم الديني
إعداد: أ. حسن سديف

صنع المواقع والدروس والألعاب
بالذكاء الاصطناعي

من فكرة مبسطة إلى موقع تعليمي حي يصله طلابك من أي هاتف — في ساعة واحدة، بصفر تكلفة، بدون خبرة برمجية. أوامر جاهزة وخطوات مفصّلة لكل مرحلة.

🎯 الهدف من الورشة: ستتمكن من بناء ونشر درس تفاعلي أو لعبة تعليمية كاملة على الإنترنت — بدون خبرة برمجية مسبقة
١٤
محوراً رئيسياً
٣٠+
أداة ذكاء اصطناعي
تكلفة شهرية
٦٠+
فكرة ومشروع
💡 فكرة
💬 أمر
📄 كود
🚀 نشر
🔗 رابط حي
تنقّل بالأسهم أو عبر شريط التنقل بالأسفل

لجميع معلمي ومراكز التعليم الديني والكوادر التعليمية

المحور الأول

أساسيات البرمجة للمواقع

لا تحتاج لحفظ شيء — الذكاء الاصطناعي يكتب كل هذا نيابةً عنك. فقط افهم المفهوم!

HTML — هيكل الصفحة
مثل عظام الجسم — يحدد ماذا يوجد في الصفحة: عناوين، فقرات، صور، جداول، أزرار. هو الأساس والإطار الذي يحتوي كل شيء.
البنية والمحتوى
CSS — مظهر الصفحة
مثل الملابس والزينة — يحدد كيف تبدو الأشياء: ألوان، خطوط، مسافات، تحريكات وتأثيرات جمالية رائعة. يُكتب داخل الملف نفسه.
التصميم والجمالية
JavaScript — سلوك الصفحة
مثل عضلات الجسم — يحدد ماذا تفعل الصفحة: نقر الأزرار، البحث، التنقل، جلب البيانات من الإنترنت تلقائياً عبر API.
التفاعل والوظائف
المهم في عمل المعلم:
الذكاء الاصطناعي يكتب كل هذا الكود نيابةً عنك! مهمتك أن تعرف كيف تطلب منه بالأسلوب الصحيح، وأين تضع الكود الناتج. هذه الورشة تعلّمك ذلك بالضبط.

هيكل الملف الواحد الكامل

<!-- ملف 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>

ماذا يمكن للمعلم أن يصنع؟

📖
دروس تفاعلية كاملة
درس مصوّر بالعناوين والجداول والخرائط الذهنية والأسئلة التقييمية — كل ذلك في ملف واحد.
🎮
ألعاب تعليمية
لعبة أسئلة وأجوبة مع نقاط ومستويات وعجلة حظ وشاشة نتائج — جذابة للطلاب.
📊
عروض تقديمية
سلايدات تفاعلية بتنقل جميل وتحريكات وخرائط ذهنية بديلاً عن PowerPoint التقليدي.
🌐
مواقع كاملة
موقع تعليمي ديني متكامل بصفحات متعددة ومكتبة كتب وأقسام للدروس والألعاب.
🧮
آلات حاسبة فقهية
حاسبة الخمس، الزكاة، المواريث، المواقيت — برمجة معادلات شرعية تفاعلية.
🗓️
متتبعات العبادة
تتبع الصلوات اليومية، الأذكار، تقدم الحفظ — أدوات تربوية رقمية.
الفرق بين معلم يقضي أسبوعاً لإنتاج درس واحد، ومعلم يقضي ساعة لإنتاج عشرة دروس تفاعلية كاملة — هو معرفة كيف تتحدث مع الذكاء الاصطناعي.— رسالة هذه الورشة
المحور الثاني

أنواع الذكاء الاصطناعي

افهم الفرق بين أنواع أنظمة الذكاء الاصطناعي لتختار الأنسب لكل مهمة

💬
الذكاء الاصطناعي التوليدي (المحادثة)
Generative AI / Chatbot
هو النوع الأكثر شيوعاً — يستقبل سؤالاً ويُعطيك إجابة مباشرة. لا يتذكر المحادثات القديمة بين الجلسات ولا يقوم بخطوات متعددة تلقائياً. تتحدث معه وينتج كوداً أو نصاً أو صورة.
أمثلة: Claude، ChatGPT، Gemini، Kimi، z.ai
الأنسب لـ: كتابة الكود، إنتاج المحتوى، الإجابة عن الأسئلة، التلخيص
مبتدئ — سهل الاستخدام
🤖
وكيل الذكاء الاصطناعي (الوكيل / الأيجنت)
AI Agent
نوع متقدم يستطيع التخطيط وتنفيذ مهام متعددة بشكل مستقل. يتصفح الإنترنت، يكتب الكود، يختبره، يُصلح الأخطاء، ويُنهي المشروع — كل ذلك دون تدخل منك في كل خطوة. يعمل مثل موظف مستقل يُعطى مهمة وينجزها.
أمثلة: Manus AI، Cursor AI، Devin AI
الأنسب لـ: المشاريع الكاملة التلقائية، التصحيح التلقائي، البحث وإنجاز المهام المركّبة
متقدم — يعمل باستقلالية
🖼️
الذكاء الاصطناعي متعدد الوسائط
Multimodal AI
يفهم ويُنتج أنواعاً متعددة من المحتوى في آنٍ واحد: النص + الصورة + الصوت + الفيديو. يمكنك رفع صورة كتاب وطلب تلخيصه، أو رفع صورة مسألة فقهية وطلب شرحها.
أمثلة: Gemini Ultra (يفهم الصور والفيديو)، Claude (يفهم الصور والمستندات)
الأنسب لـ: تحليل الصور، استخراج نص من الكتب المصورة، شرح الرسوم البيانية
متوسط — متعدد القدرات
🎨
الذكاء الاصطناعي التوليد المتخصص
Specialized Generative AI
أنظمة متخصصة في توليد نوع محدد من المحتوى بجودة عالية: توليد الصور (Midjourney, DALL·E)، توليد الصوت والموسيقى، تحويل النص لفيديو، أو توليد كود برمجي متخصص.
أمثلة الصور: Bing Creator، Adobe Firefly، نانو بنانا
تفريغ صوتي: TurboScribe (تحويل المحاضرات لنص بدقة عالية جداً)
الأنسب لـ: إنشاء صور للدروس، تصميم شعارات، إنتاج محتوى بصري إسلامي
سهل — لكل مهمة نموذجها

متى تستخدم أياً منهم؟

المهمةالنوع المناسبالمثال
كتابة درس تفاعلي HTMLمحادثة (Chatbot)Claude / Gemini
بناء موقع كامل تلقائياًوكيل (Agent)Manus AI
تلخيص كتاب مرفوع كصورةمتعدد الوسائطGemini + رفع الملف
تصميم صور إسلامية للدرستوليد الصورBing Creator / نانو بنانا
تحويل الكتاب لبودكاست وأسئلةمتخصصNoteBookLM
كتابة محتوى يومي متعدد الصيغمحادثة سخيةGemini (مجاني)
مصطلح مهم — هلوسة الذكاء الاصطناعي (AI Hallucination):
عندما يخترع الذكاء الاصطناعي معلومات غير صحيحة بثقة كاملة. الحل: دائماً أعطه النص الأصلي من الكتاب ولا تطلب منه "تذكّر" المعلومات الشرعية من تلقاء نفسه. قل له: "النص الأصلي هو: [الصق النص هنا]" ثم اطلب التحليل.
المحور الثالث

أدوات الذكاء الاصطناعي

دليل شامل لأكثر من ٣٠ أداة — لكل مرحلة من مراحل إنتاج المحتوى التعليمي

🆕 أدوات جديدة مهمة يجب معرفتها

جديد ⚡
z.ai — مجاني وقوي
نموذج ذكاء اصطناعي جديد ومجاني بجودة عالية في الكود العربي. بديل ممتاز حين ينتهي حد Claude المجاني اليومي.
chat.z.ai مجاني
مهم جداً
TurboScribe — تفريغ صوتي عربي
يحوّل أي تسجيل صوتي أو فيديو لنص عربي مكتوب بدقة استثنائية. مثالي لتفريغ دروس الشيوخ ثم تحويلها لصفحة HTML.
turboscribe.ai/ar جزئياً مجاني
ElevenLabs — صوت عربي احترافي
يُوّلد صوتاً بشرياً بالعربية الفصحى بنبرة احترافية. اكتب نص المتن واحصل على قراءة صوتية جاهزة لموقعك.
elevenlabs.io جزئياً مجاني
Napkin.ai — رسوم توضيحية تلقائية
الصق أي نص فقهي فيتحوّل تلقائياً إلى مخطط انسيابي أو رسم توضيحي. مثالي لتصوير التشجيرات والعلاقات الفقهية.
napkin.ai مجاني
Perplexity.ai — بحث موثوق
محرك بحث بالذكاء الاصطناعي يُلخص المصادر ويرفق روابطها. استخدمه للتحقق من المعلومات الدينية والبحث في المراجع.
perplexity.ai مجاني
Poe.com — كل النماذج بمكان واحد
منصة تجمع Claude وGPT وGemini في واجهة واحدة. جرّب نفس الأمر على كل النماذج وقارن النتائج بثوانٍ.
poe.com مجاني
Mermaid Live Editor — خرائط ذهنية
اطلب من الذكاء الاصطناعي كود Mermaid للتشجير ثم الصقه هنا لتظهر خريطة ذهنية مصوّرة جميلة قابلة للتصدير.
mermaid.live مجاني
v0.dev — مواقع بالوصف النصي
صِف موقعك بالعربية واحصل على كود HTML/CSS/JS كامل فوراً. مثالي حين تريد موقعاً جاهزاً بدون كتابة أمر مفصّل.
v0.dev جزئياً مجاني

🧑‍💻 أدوات توليد الكود والمحتوى

🔮
Google Gemini
من أقوى النماذج المجانية. ممتاز للاستخدام اليومي ومتكامل مع Google Workspace. يدعم اللغة العربية احترافياً ويتيح رفع الملفات والكتب.
gemini.google.com
مجاني سخي
🧠
Claude (Anthropic) ⭐
الأفضل في كتابة الكود الطويل والمعقد والمفصّل. يعطي كوداً منظماً ومكتملاً دون اختصار. مثالي لبناء الدروس التفاعلية الكاملة.
claude.ai
محدود مجاناً الأنسب: كود طويل معقد
ChatGPT (OpenAI)
الأكثر شهرة. ممتاز لتوليد المحتوى التعليمي والأسئلة وشرح المفاهيم الدينية بأساليب متعددة.
chatgpt.com
محدود مجاناً
🌙
Kimi AI جديد
نموذج صيني متقدم من شركة Moonshot AI. يتميز بنافذة سياق ضخمة جداً (يقرأ آلاف الصفحات دفعة واحدة) وهو مجاني ومميز في العربية والكود.
kimi.com
مجاني سخي
Z.ai Chat جديد
نموذج صيني متقدم من شركة Zhipu AI يجمع أقوى النماذج في منصة واحدة سريعة ومجانية. يتميز بكتابة الكود العربي والمحتوى التعليمي بجودة عالية. بديل مثالي حين ينتهي حد Claude أو Gemini. يدعم رفع الصور والمستندات وتحليلها.
chat.z.ai
مجاني بالكامل بديل ممتاز مجاني
🤖
Manus AI
وكيل ذكاء اصطناعي يتصفح الإنترنت وينجز مهام متعددة تلقائياً. يبني مشاريع كاملة من وصف نصي بسيط بشكل مستقل تماماً.
manus.im
مدفوع
🔬
Google AI Studio متقدم
بيئة تجريب مباشرة لنماذج Gemini من Google. تتيح ضبط النماذج، اختبار الأوامر، الحصول على مفاتيح API مجانية، وبناء تطبيقات.
aistudio.google.com
مجاني للمطورين
الأداةجودة الكودطول الكوددعم العربيةالسياقالتكلفة
Claude★★★★★طويل جداًممتاز200K رمزمحدود
Gemini★★★★☆متوسطممتاز1M رمزمجاني
Kimi★★★★☆طويلجيد جداً128K رمزمجاني
Z.ai★★★★☆طويل جيدممتاز128K+ رمزمجاني
ChatGPT★★★★☆متوسطجيد128K رمزمحدود
Manus★★★★★مشاريع كاملةجيدوكيلمدفوع

🖼️ أدوات توليد الصور

🖼️
Bing Image Creator
مجاني تماماً بنموذج DALL·E 3. مناسب للصور الإسلامية والتعليمية.
bing.com/create
مجاني
🍌
نانو بنانا برو
منصة متخصصة بنماذج متنوعة لتوليد الصور. تخصيص دقيق للأسلوب.
nanobanana.pro
جزئياً مجاني
🎨
Adobe Firefly
صور مُرخّصة تجارياً. مثالي للمطبوعات التعليمية.
firefly.adobe.com
محدود مجاناً
🧪
Google Labs أدوات AI جديد
مختبر تجريبي من Google يضم أدوات ذكاء اصطناعي متقدمة للصور والتحرير والتصميم ومعالجة الصوت. تجريبية مجانية.
labs.google/fx/ar/tools
مجاني تجريبي

📊 أدوات الدروس والعروض والإدارة

📓
Google NoteBookLM
الأداة الأقوى لتحويل الكتب والمقررات إلى ملخصات ذكية وأسئلة وبودكاست صوتي. ارفع الكتاب وانتهى!
notebooklm.google.com
مجاني
🎯
Gamma.app
تحويل النصوص إلى سلايدات جميلة في ثوانٍ. يدعم العربية.
gamma.app
جزئياً مجاني
📱
Canva AI
تصميم سلايدات ومنشورات بمساعدة الذكاء الاصطناعي. قوالب إسلامية جاهزة.
canva.com
جزئياً مجاني
☁️
Google Cloud Console (APIs) متقدم
المنصة الرسمية للحصول على مفاتيح API لجميع خدمات Google. ضروري لتفعيل Google Drive API في نظام GlideStack.
console.cloud.google.com
مجاني بحدود
سير عمل المعلم خطوة بخطوة
١
ارفع الكتاب في NoteBookLM
أنتج ملخصات وأسئلة وبودكاست صوتي للمادة الدراسية تلقائياً
٢
أعطِ الأسئلة لـ Claude
قل: "اجعلها لعبة تفاعلية HTML بأقصى إمكانياتك"
٣
ارفع الكود في GitHub
احفظ الملف في مستودع جديد باسم إنجليزي
٤
انشر على Netlify
بضغطة واحدة يصبح موقعك حياً على الإنترنت
٥
أرسل الرابط للطلاب
عبر واتساب أو تيليجرام — الوقت الكلي: أقل من ساعة!
المحور الرابع

هندسة الأوامر

الفرق بين أمر يعطيك ٢٠٠ سطر وأمر يعطيك ١٨٠٠ سطر — تعلّم كيف تصيغ الأمر المناسب

أمر ضعيف
اشرح دعاء عرفة في html فيه css
⚠️ كود قصير ~٢٠٠ سطر — تصميم عادي — محتوى مختصر
أمر احترافي
اشرح دعاء عرفة بشكل أكاديمي، في كود html فيه css، بأقصى إمكانياتك وقدراتك التصميمية البرمجية، وبأطول ما يمكنك كتابته، حول درس أخلاقي عن تواضع الإنسان، ولا تهمل أي تفصيل
✅ كود ١٨٠٠+ سطر — تصميم احترافي — محتوى شامل

الجمل السحرية الخمس

🎯
بأقصى إمكانياتك وقدراتك
تُخبره بعدم التقصير والبذل بكل طاقته
📏
بأطول ما يمكنك كتابته
يمنع الاختصار ويُوسّع كل نقطة
🧪
وفكر طويلاً للغاية
يُخطط قبل الكتابة ولا يندفع
🔍
ولا تهمل أي شيء أبداً
يمنعه من حذف التفريعات والملحقات
📐
التنسيقية البرمجية التصميمية
يُوسّع تفكيره للجماليات والتفاعلية

أسلوب تبادل الأدوار (Role Prompting)

أجعله يتصرف كخبير

أخبر الذكاء الاصطناعي بالدور الذي تريده أن يتبناه قبل طلبك — هذا يُغير كامل طريقة تفكيره وإجابته.

// الأسلوب: أعطه هوية خبير قبل طلبك
تصرّف كمعلم حوزوي خبير متخصص في تدريس الفقه للمبتدئين، 
يستخدم أساليب تبسيطية حديثة مع الحفاظ على دقة المتن العلمي.
الآن: أكتب لي درس تفاعلي عن [الموضوع]...

أمثلة لأدوار مفيدة للمعلم:

  • "تصرّف كمصمم واجهات تعليمية متخصص في المحتوى الإسلامي"
  • "تصرّف كمطور ألعاب تعليمية للأطفال بأسلوب جذاب وبسيط"
  • "تصرّف كمحرر علمي حوزوي يُراجع دقة المتون الفقهية"

التلقين التدريجي بالأمثلة (Few-Shot Prompting)

📖 أمر تقسيم المسائل الفقهية بالمثال
أريدك أن تقسّم المسائل الفقهية التالية وفق هذا النمط تماماً: مثال على النمط المطلوب: النص: "السابع: أن يصل إلى حدّ الترخّص فلا يجوز التقصير قبله..." التقسيم: - الموضوع: أن يصل إلى حدّ الترخّص - الحكم: لا يجوز التقصير قبله - التعريف: المكان الذي يتوارى فيه المسافر... - العلامة: تواريهم عن نظره (علاقة تلازمية) - الاستثناء: محلّ الإقامة والمكان الذي بقي فيه... - الاحتياط الاستحبابي: الجمع بين القصر والتمام... الآن طبّق هذا النمط بالضبط على المسائل التالية: [ألصق هنا نصوص المسائل من الكتاب] ⚠️ لا تُضف معلومات ليست في النص ولا تختصر المتن الأصلي

استخراج بنك أسئلة بصيغة JSON

❓ أمر استخراج أسئلة بصيغة برمجية
اقرأ النص الديني التالي واستخرج منه ١٥ سؤالاً لاختبار اختيار متعدد. النص: [ألصق النص هنا] أخرج الأسئلة بصيغة JSON فقط (بدون أي كلام إضافي) بهذا الشكل: [ { "سؤال": "ما هو حدّ الترخّص؟", "خيارات": ["الجواب أ", "الجواب ب", "الجواب ج", "الجواب د"], "صحيح": 0, "تفسير": "لأن..." } ] // يمكن إدراج هذا JSON مباشرة في كود لعبة HTML تفاعلية

🧩 تقنيات هندسة الأوامر المتقدمة

🔗 التفكير المتسلسل — Chain of Thought

بدل أن تطلب الإجابة مباشرة، اجعل الذكاء الاصطناعي يفكك المسألة خطوةً بخطوة قبل الكتابة. النتيجة أعمق وأدق بكثير خصوصاً في المسائل الفقهية المعقدة.

أمر Chain-of-Thought للمسائل الفقهية
قبل أن تكتب الكود، فكّر بصوت عالٍ في: ١. ما هي الأقسام الرئيسية التي تحتوي عليها هذه المسألة؟ ٢. ما هي العلاقات المنطقية بين هذه الأقسام؟ ٣. ما هي أفضل طريقة لعرض المعلومات تصميمياً وبصرياً؟ ٤. هل هناك استثناءات أو ملاحظات يجب إبرازها؟ بعد هذا التحليل، ابدأ بكتابة الكود الكامل. الموضوع: [اسم الدرس] النص: [ألصق نص الدرس هنا]
🛡️ حماية دقة النصوص الدينية — Text Lock

أقوى تقنية لضمان عدم تغيير الذكاء الاصطناعي لكلمة واحدة في المتن — ضرورية للمتون الفقهية والأدعية والزيارات:

أمر قفل النص الأصلي
⚠️ النص التالي محمي ومقفل لا يُمسّ: «[ألصق المتن الأصلي حرفياً هنا]» قواعد صارمة: ١. اكتب هذا النص بالضبط كما هو — لا تغيّر كلمة أو حرف أو تشكيل ٢. ضعه داخل قسم "المتن الأصلي" مظلّلاً بلون مميز ٣. ضع شرحك وتقسيمك في أقسام منفصلة بعده ٤. في حال الاقتباس من المتن، اكتبه حرفياً بالضبط
📊 استخراج JSON للألعاب — Local Database

بدل كتابة الأسئلة مباشرة في HTML، اطلب أن تُخزّن كـ JSON متغير داخل الكود — هذا يجعل تعديل الأسئلة لاحقاً أسهل بكثير:

أمر بناء قاعدة أسئلة JSON
من النص التالي، اصنع قاعدة أسئلة بصيغة JSON واحفظها كـ const داخل JavaScript: [ألصق النص هنا] الصيغة المطلوبة بالضبط: const QUESTIONS = [ { q: "نص السؤال هنا", opts: ["خيار أ", "خيار ب", "خيار ج", "خيار د"], correct: 0, explain: "لأن..." } ]; // بعد الإنشاء، يمكنني تعديل الأسئلة بدون لمس بقية الكود

أسرار الحصول على نتيجة مناسبة

ألصق النص الكامل دائماً
لا تقل "درس المفاعيل" — ألصق النص من الكتاب مباشرة. الدقة تأتي من المصدر الأصلي. كلما كان النص أكثر تفصيلاً، كانت النتيجة أدق وأكمل وأقل احتمالاً للهلوسة أو الاختراع.
رقّم طلباتك دائماً
أولاً، ثانياً، ثالثاً... هذا يمنع الذكاء الاصطناعي من نسيان أي طلب وينظّم تفكيره. الأوامر المرقّمة تحصل على نتائج أكثر اكتمالاً.
قل له ما لا تريده
"لا تغير أي شيء آخر" + "لا تقصّر الكود" + "أعطني الملف كاملاً" + "لا تحذف أي ميزة موجودة" — هذه تمنع الاختصار غير المطلوب.
جرّب أكثر من نموذج
إذا لم تعجبك النتيجة من أداة، جرّب نفس الأمر في أداة أخرى. Gemini للسرعة، Claude للتفصيل والكود الطويل، Kimi للنصوص الطويلة.
اطلب منه شرح كوده
إذا أنتج كوداً لا تفهمه قل: "اشرح لي هذا الكود بلغة بسيطة كأنني لا أعرف البرمجة. ماذا يفعل كل جزء؟" — هذا يُعلّمك تدريجياً.
المحور الخامس

GitHub و Netlify

من الكود على جهازك إلى رابط قابل للمشاركة مع الجميع — في دقائق لا ساعات، مجاناً تماماً

🤖
الذكاء الاصطناعي يكتب
📄
ملف HTML تحفظه
🐙
ترفعه GitHub
🚀
Netlify ينشره
🔗
رابط حي للجميع

🐙 الخطوة الأولى: GitHub

١
إنشاء حساب GitHub
ادخل على github.com وسجّل حساباً مجانياً. هذا هو "خزنة الكود" التي ستحفظ فيها جميع ملفاتك.
٢
إنشاء مستودع جديد (Repository)
اضغط الزر الأخضر New — اختر اسماً بالإنجليزي مثل: my-lesson — اجعله Public — اضغط "Create repository"
٣
رفع ملف الكود — اسم الملف مهم!
اضغط Add file ← Create new file ثم الصق الكود
index.html ← الصفحة الرئيسية: darsi.netlify.app/
fiqh.html ← صفحة فرعية: darsi.netlify.app/fiqh/
quiz.html ← صفحة أخرى: darsi.netlify.app/quiz/
٤
حفظ التغييرات (Commit)
انزل لأسفل — اضغط Commit changes — الملف محفوظ الآن!

🚀 الخطوة الثانية: Netlify

١
سجّل الدخول بحساب GitHub
ادخل على netlify.com — اختر "GitHub" للتسجيل.
٢
أنشئ مشروعاً جديداً
Add new site ← Import an existing project ← GitHub ← اختر المستودع
٣
اختر اسم الموقع
في Site name اكتب: darsi-arabi — سيكون: darsi-arabi.netlify.app
٤
✅ Deploy — انتهى!
بعد 30 ثانية موقعك حي! أي تعديل في GitHub ينعكس خلال دقيقة تلقائياً.

📁 التنظيم المناسب للمستودع

// هيكل مستودع منظّم للمعلم
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 موقعك الثابت لا يستطيع جلب بيانات جديدة — البيانات مجمّدة في الكود. مع API موقعك "حي" يتحدث مع الإنترنت.

المواقع الثابتة مقابل الديناميكية

المعيار🧱 موقع ثابت⚡ موقع ديناميكي✨ GlideStack
التكلفة الشهرية$0$5 - $100+$0
تحديث البياناتيحتاج تعديل الكودفوري من لوحة تحكممن Google Drive مباشرة
الاستضافةGitHub/Netlify مجاناًسيرفر مدفوعGitHub/Netlify مجاناً
قاعدة البياناتلا توجدMySQL/MongoDB مدفوعةGoogle Drive مجاناً
المناسب لـدروس، ألعابمنصات كبيرةمكتبات، دروس، متاجر

✨ نظام GlideStack / GDSA

GDSA = Google Drive as Static Architecture — معمارية ثورية تحوّل Google Drive إلى قاعدة بيانات حية كاملة بصفر تكلفة. التكلفة الشهرية للمعمارية التقليدية: $20-$500، تكلفة GDSA: $0.
تحميل GDSA.md

لماذا هذه المعمارية ثورية للمعلم؟

🗄️
Drive = قاعدة بيانات مرئية
أضف كتاباً = ارفع ملف PDF في المجلد المناسب. أضف تصنيفاً = أنشئ مجلداً جديداً. لا SQL ولا خوادم ولا تعلّم تقني.
تحديثات من الهاتف مباشرة
ارفع صورة في Drive → تظهر في الموقع فوراً. عدّل خلية في Sheets → يتحدث الموقع. لا تحتاج لمطور للتحديث اليومي.
🛡️
موثوقية Google التحتية
Google Drive Uptime 99.9%+. بنية تحتية تخدم مليارات المستخدمين — أكثر موثوقية من أي خادم شخصي مدفوع.

كيف يعمل GDSA خطوة بخطوة؟

١
احصل على مفتاح API من Google Cloud
اذهب إلى console.cloud.google.com ← أنشئ مشروعاً ← فعّل Google Drive API ← أنشئ API Key. قيّد المفتاح بنطاق موقعك للأمان.
٢
نظّم مجلداتك في Google Drive
أنشئ مجلداً جذراً لموقعك. أضف مجلدات فرعية لكل تصنيف (كتب فقه، دروس عقائد...). اجعل المجلد الجذر عاماً "Anyone with the link can view".
٣
أعطِ Claude الأمر مع مفتاحك ومعرّف مجلدك
قل: "أريد موقع مكتبة دينية يجلب من Drive API باستخدام مفتاح [KEY] ومجلد [FOLDER_ID]. اكتبه بـ HTML+CSS+JS كاملاً بأقصى إمكانياتك."
٤
انشر الملف على Netlify
ملف HTML واحد فقط = اسحب وأفلت. الموقع يجلب بياناته من Drive تلقائياً عند كل زيارة.
٥
أدِر موقعك من هاتفك — لا من الكود!
كل التحديثات عبر Drive مباشرة. أضف ملفاً، أنشئ مجلداً، عدّل في Sheets — الموقع يتحدث تلقائياً خلال دقيقة.

📋 أمثلة تطبيقية لمعلمي التعليم الديني

المشروعهيكل Driveما يظهر في الموقع
مكتبة الكتب الدينية📁 فقه / 📁 عقائد / 📁 أدعية → 📄 كتاب.pdfمكتبة قابلة للبحث والتحميل
أرشيف دروس المعلم📁 الفصل الأول / 📁 الثاني → 📄 درس.pdfأرشيف منظم مع بحث
بنك أسئلة الاختبارات📊 Sheets: السؤال، الخيارات، الجواباختبار تفاعلي يجلب الأسئلة تلقائياً
قاعدة الأدعية والزيارات📁 يومية / 📁 زيارات / 📁 تعقيباتموقع دعاء مصنّف قابل للبحث
صور الفعاليات📁 2024 / 📁 2025 → 🖼️ صورمعرض صور منظم بالسنة
🗺️ أمر بناء موقع GDSA كامل
أكتب لي موقع [مكتبة دينية / أرشيف دروس / معرض صور] ديناميكي كامل باستخدام Google Drive API (نظام GlideStack/GDSA) في ملف HTML واحد. الإعدادات: ✦ مفتاح API: [API_KEY من Google Cloud Console] ✦ معرف المجلد الجذر: [FOLDER_ID من رابط Drive] المطلوب: ✦ يجلب الملفات والمجلدات من Drive تلقائياً ✦ بحث وفلترة وترتيب ✦ كاش ذكي 5 دقائق لتقليل استدعاءات API ✦ وضع Loading أنيق أثناء جلب البيانات ✦ وضع فاتح وداكن ومتوافق مع الهواتف ✦ تصميم إسلامي احترافي بأقصى إمكانياتك وقدراتك وبأطول ما يمكنك كتابته
$0
تكلفة شهرية
1M
طلب يومياً مجاناً
15GB
تخزين مجاني
📄
Frontend
ملف HTML واحد
☁️
Backend
Google Drive API
🗄️
Database
مجلدات Drive
📊
Relations
Google Sheets
🖥️
CMS
واجهة Drive
🚀
Hosting
Netlify مجاناً

🔧 تقنيات متقدمة مفيدة للمعلم

⏱️ مؤقتات التفاعل — Timer API

أضف عداداً تنازلياً لمسابقاتك أو اختباراتك. ينتهي تلقائياً وينتقل للسؤال التالي:

// عداد تنازلي - أضفه في أمرك للذكاء الاصطناعي
let timeLeft = 60;
const timer = setInterval(() => {
  timeLeft--;
  document.getElementById('timer').textContent = timeLeft;
  if (timeLeft <= 0) { clearInterval(timer); nextQuestion(); }
}, 1000);
أمر إضافة عداد تنازلي
أضف عداداً تنازلياً من ٦٠ ثانية لكل سؤال في هذه اللعبة: ✦ ينتقل للسؤال التالي تلقائياً عند انتهاء الوقت ✦ يتحوّل للأحمر عند بقاء ١٠ ثوانٍ ✦ صوت تنبيه عند الانتهاء ✦ لا تغير بقية الكود [الصق كودك هنا]
🎨 زخارف إسلامية بـ SVG — بدون صور

الذكاء الاصطناعي يكتب أكواد SVG ترسم أقواساً وزخارف إسلامية مباشرة في HTML — بدون أي صور خارجية، وخفيفة الحجم:

أمر إضافة زخارف إسلامية
أضف لهذا الموقع زخارف هندسية إسلامية باستخدام SVG: ✦ نمط هندسي إسلامي خفيف كخلفية شبه شفافة للرأس ✦ إطار مزخرف للبطاقات بأقواس عربية أنيقة ✦ خط فاصل زخرفي بين الأقسام ✦ الألوان: ذهبي وأزرق داكن يتناسب مع التصميم ✦ اجعل الزخارف خفيفة لا تُثقل الصفحة [الصق كودك هنا]
📡 APIs مجانية للمواقع الدينية

هذه الـ 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;
  });
📲 الوضع الأوفلاين — Service Worker

جزء من تقنية PWA — يحفظ الصفحة في ذاكرة الهاتف لتعمل بدون إنترنت. مثالي لمكتبات الأدعية والدروس التي يحتاجها الطالب في أي وقت:

أمر تحويل الدرس للعمل أوفلاين
أضف لهذا الدرس قدرة العمل بدون إنترنت: ✦ أنشئ ملف sw.js (Service Worker) يحفظ الملفات في الكاش ✦ أنشئ ملف manifest.json لإمكانية التثبيت على الهاتف ✦ أضف زر "تثبيت التطبيق" إذا أمكن ✦ أعطني الملفات الثلاثة منفصلة مع تعليمات الرفع على GitHub [الصق كودك هنا]
✂️ تقسيم الكود لملفات منفصلة

حين يصبح الكود ضخماً جداً (أكثر من ٢٠٠٠ سطر)، يمكن تقسيمه:

أمر تقسيم الكود
قسّم هذا الكود إلى ثلاثة ملفات منفصلة: ١. index.html — الهيكل فقط مع روابط للملفات الأخرى ٢. style.css — كل التصميم والألوان ٣. script.js — كل التفاعل والوظائف أعطني كل ملف على حدة مع كيفية ربطها معاً [الصق كودك هنا]
تنبيه مهم: نظام GlideStack معقد ويحتاج مفتاح API من Google Cloud Console وإعداد المجلدات بشكل صحيح. يُنصح بإتقان المواقع الثابتة أولاً.
المحور الثامن

مكتبة الأوامر الجاهزة

أوامر جاهزة بالعربية للنسخ والاستخدام الفوري — خصّصها بموضوعك وانتهيت في دقائق

📖 أمر درس ديني / فقهي شامل
أكتب لي درس كامل عن [موضوع الدرس] من كتاب [اسم الكتاب] للصف [الصف]، وهذا النص الكامل للدرس: [ألصق هنا نص الدرس من الكتاب كاملاً] اكتب الكود في صفحة html داخله css وjavascript ✦ بأقصى إمكانياتك وقدراتك التنسيقية البرمجية التصميمية ✦ بأطول ما يمكنك كتابته بشكل مفصّل ودقيق للغاية ✦ ولا تهمل أي شيء فيه أبداً ✦ وفكر طويلاً للغاية قبل الكتابة يجب أن يحتوي على: ✦ نص المتن الأصلي مظلّلاً بلون مميز ✦ تقسيم هرمي للمحتوى (موضوع، حكم، تعريف، علامة، استثناء) ✦ شجرة تفاعلية للمحتوى ✦ جدول ملخص شامل ✦ الأمثلة والتطبيقات الحياتية ✦ أسئلة تقييم تفاعلية مع الإجابات ✦ خريطة ذهنية بصرية ✦ وضع فاتح وداكن ⚠️ لا تُغيّر أي كلمة في المتن الأصلي — التزم بالنص الحرفي تماماً
🎮 أمر لعبة تعليمية تفاعلية
أكتب لي لعبة تعليمية تفاعلية في html+css+js عن موضوع [الموضوع]. اللعبة تحتوي على: ✦ أسئلة اختيار متعدد (١٠ أسئلة على الأقل) ✦ عداد نقاط ومؤقت زمني ✦ تأثيرات بصرية عند الإجابة الصحيحة والخطأ (مكافآت بصرية) ✦ مستويات صعوبة (سهل، متوسط، صعب) ✦ شاشة نهاية مع النتيجة وشهادة يُدخل فيها الطالب اسمه ✦ إمكانية إعادة اللعب ✦ عجلة حظ عشوائية لاختيار الطلاب بإمكانية إدخال أسمائهم ✦ وضع فاتح وداكن ✦ حفظ أعلى نتيجة في المتصفح بأقصى إمكانياتك وقدراتك التصميمية البرمجية، بأطول ما يمكنك كتابته، واجعله جذاباً لطلاب [الفئة العمرية]
📊 أمر عرض تقديمي تفاعلي
أكتب لي عرض تقديمي تفاعلي في html+css+js عن موضوع [الموضوع]. العرض يحتوي على: ✦ ١٢ شريحة على الأقل ✦ شريحة عنوان جذابة مع صورة خلفية ✦ شرائح محتوى مع تحريكات عند الانتقال ✦ جداول ورسوم بيانية حيث يناسب ✦ خريطة ذهنية تلخيصية ✦ شريحة أسئلة تفاعلية ✦ تنقل بالأزرار (التالي / السابق) وبلوحة المفاتيح ✦ شريط تقدم يوضح الشريحة الحالية ✦ وضع فاتح وداكن وزر طباعة بأقصى إمكانياتك وقدراتك التصميمية، تصميم احترافي إسلامي أنيق، بأطول ما يمكنك كتابته
🧮 أمر آلة حاسبة فقهية
أكتب لي آلة حاسبة فقهية تفاعلية في html+css+js لحساب [الخمس / الزكاة / المواريث]. تحتوي على: ✦ حقول إدخال واضحة باللغة العربية ✦ شرح لكل حقل ومصطلح ✦ حساب فوري مع إظهار الخطوات ✦ جدول نتائج مفصّل ✦ إمكانية الطباعة ✦ أمثلة توضيحية جاهزة بأقصى إمكانياتك وقدراتك التصميمية البرمجية وبأطول ما يمكنك كتابته ⚠️ استند للنصوص المرجعية التالية في الحساب: [ألصق النص]
✏️ أمر تعديل كود موجود
هذا ملف الكود الخاص بـ [اسم الموقع]، أريدك أن تحرره وتعدل الأمور التي أطلبها فقط: أولاً: [التعديل الأول بالتفصيل] ثانياً: [التعديل الثاني بالتفصيل] ثالثاً: [التعديل الثالث بالتفصيل] [ألصق هنا الكود الحالي كاملاً] ⚠️ مهم جداً: ✦ لا تغير أي شيء آخر في الكود ✦ لا تحذف أي ميزة موجودة ✦ أعطني الملف كاملاً بعد التعديل ✦ لا تختصر أو تقول "باقي الكود كما هو"
🌲 أمر شجرة نسب أو تسلسل تاريخي تفاعلي
أكتب لي شجرة [نسب الأئمة / تسلسل تاريخي] تفاعلية بصرية في html+css+js تحتوي على: ✦ رسم بياني للشجرة بتصميم عربي أصيل ✦ عند النقر على كل شخصية تظهر معلومات تفصيلية عنها ✦ خط زمني تفاعلي للأحداث المهمة ✦ ألوان مميزة لكل فرع أو حقبة ✦ إمكانية التكبير والتصغير ✦ تصميم متوافق مع الهواتف البيانات: [ألصق المعلومات المطلوبة] بأقصى إمكانياتك وقدراتك التصميمية وبأطول ما يمكنك كتابته
المحور التاسع

إضافات تفاعلية للدروس

ميزات احترافية تُضاف لأي درس أو لعبة لتُحسّن تجربة الطالب

💾 حفظ تقدم الطالب (Local Storage)

لا قاعدة بيانات — حفظ في المتصفح مباشرة!

يمكن حفظ تقدم الطالب ونتائجه في متصفحه دون أي سيرفر. البيانات تبقى حتى بعد إغلاق الصفحة.

💾 أمر إضافة نظام الحفظ التلقائي
أضف لهذا الكود نظام حفظ تقدم الطالب تلقائياً باستخدام localStorage في المتصفح بحيث: ✦ يحفظ تلقائياً كل إجابة ونتيجة ووقت التقدم ✦ يُذكّر الطالب بتقدمه عند عودته للصفحة ✦ يعرض لوحة إنجازات تُظهر المستوى والنقاط المتراكمة ✦ زر لمسح البيانات والبدء من جديد ✦ بدون تغيير أي شيء آخر في الكود [الصق كودك هنا]

🖨️ زر الطباعة بتنسيق الورق (Print CSS)

🖨️ أمر إضافة زر طباعة احترافية
أضف لهذا الكود: ✦ زر "طباعة الدرس" بتصميم جميل ✦ عند الطباعة: يختفي شريط التنقل والأزرار ويبقى المحتوى فقط ✦ تنسيق خاص للورق يُظهر عنوان الدرس والتاريخ والصفحة بشكل مُرتّب ✦ خطوط مناسبة للطباعة وألوان مناسبة للورق الأبيض [الصق كودك هنا]

🎓 نظام الشهادات التلقائية

🎓 أمر إضافة شهادة تفاعلية
بعد انتهاء التقييم في هذا الكود أضف: ✦ حقل لإدخال اسم الطالب قبل البدء ✦ عند الانتهاء بنجاح (أكثر من ٧٠٪): تظهر شهادة جميلة مُصمّمة بالتصميم الإسلامي ✦ الشهادة تحتوي: اسم الطالب، اسم الدرس، النتيجة، التاريخ ✦ زر "طباعة الشهادة" يطبعها كاملة ✦ زر "حفظ الشهادة كصورة" [الصق كودك هنا]

🎊 تأثيرات المكافآت البصرية

مطر النجوم والكونفيتي
تأثيرات رسوم متحركة جميلة عند الإجابة الصحيحة أو إنهاء الدرس. تضاف بجملة واحدة في الأمر.
نظام التتابع (Streak)
إحصاء الإجابات الصحيحة المتتالية مع مكافأة بصرية خاصة عند وصول عدد معين.
ألقاب الطالب
منح الطالب لقباً حسب نتيجته: "متقدم — جيد — ممتاز" مع أيقونة مميزة لكل مستوى.
🎊 أمر إضافة مكافآت بصرية
أضف لهذا الكود مكافآت بصرية احترافية: ✦ مطر كونفيتي ملوّن عند كل إجابة صحيحة ✦ رسالة تشجيع عشوائية ("أحسنت! رائع! ممتاز!") مع كل إجابة صحيحة ✦ تأثير اهتزاز خفيف للكرت عند الإجابة الخاطئة ✦ عداد تتابع يُظهر عدد الإجابات الصحيحة المتتالية ✦ احتفال كبير (نجوم + رسالة) عند الانتهاء بنجاح [الصق كودك هنا]

🔊 دمج الصوتيات والتلاوات

🔊 أمر إضافة مشغّل صوتي تفاعلي
أضف لهذا الكود مشغّل صوتي إسلامي يحتوي على: ✦ أزرار تشغيل/إيقاف لكل مقطع صوتي ✦ شريط تقدم للصوت مع عرض الوقت ✦ إمكانية إضافة روابط ملفات صوتية (MP3) من Google Drive ✦ تصميم يتلاءم مع القرآن والأدعية (خلفية داكنة أنيقة) ✦ يعمل على الهاتف والكمبيوتر روابط الملفات الصوتية: [ضع روابط Google Drive للصوتيات] // روابط Drive: انسخ رابط الملف ثم غيّر "view" إلى "uc?export=download"

🔎 البحث الداخلي في الدرس

🔎 أمر إضافة بحث داخلي
أضف لهذا الكود مربع بحث داخلي: ✦ مربع بحث في أعلى الصفحة ✦ يُضيء (يُبرز) كلمات البحث في النص بلون أصفر ✦ يُظهر عدد النتائج ✦ أزرار للانتقال بين النتائج (السابق / التالي) ✦ مسح البحث بضغطة واحدة [الصق كودك هنا]

🪟 نوافذ شرح المصطلحات (Modals)

عند النقر على كلمة تظهر بطاقة شرح — بدون مغادرة الصفحة!

مثالية لشرح غريب الألفاظ والمصطلحات الفقهية. الطالب ينقر على "الترخّص" أو "السهو" فتظهر له بطاقة تعريف أنيقة دون أن يغادر الدرس.

🪟 أمر إضافة نوافذ المصطلحات
أضف لهذا الدرس نظام نوافذ منبثقة لشرح المصطلحات: ✦ كل مصطلح فقهي يصبح قابلاً للنقر (مُسطّر بشكل خفيف) ✦ عند النقر تظهر بطاقة منبثقة أنيقة تحتوي: المصطلح + التعريف + مثال ✦ إغلاق البطاقة بالنقر خارجها أو على زر X ✦ تصميم يتناسب مع المحتوى الديني الأنيق قائمة المصطلحات وتعريفاتها: [اكتب هنا: المصطلح: تعريفه، على كل سطر] [الصق كودك هنا]

🎯 وضع التركيز — Focus Mode

🎯 أمر إضافة وضع التركيز
أضف لهذا الدرس زر "وضع التركيز": ✦ يخفي كل شيء (القوائم، الأزرار، الزخارف) ويبقي فقط المتن الأصلي ✦ خط أكبر (1.3rem) وتباعد سطور أرحب (2.4) ومتن يمتد بعرض مريح ✦ خلفية كريمية هادئة لا تُجهد العين ✦ زر صغير ثابت للخروج من وضع التركيز ✦ يحفظ التفضيل في المتصفح [الصق كودك هنا]

↕️ التمرير السلس بين الأقسام — 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)

١
اذهب للمستودع في GitHub
ادخل على المستودع واضغط على اسم الملف الذي تريد التراجع عنه
٢
اضغط History
ستجد قائمة بكل التعديلات السابقة مع تاريخها
٣
اختر النسخة القديمة
اضغط على التعديل الذي تريد العودة إليه وانسخ الكود القديم
٤
الصق الكود القديم وأحفظه
افتح الملف الحالي، احذف الكود الجديد الخاطئ، الصق القديم، اضغط Commit

📲 تحويل الموقع لتطبيق هاتف (PWA)

التطبيق التدريجي (Progressive Web App)

يمكن تحويل موقعك الثابت لـ"تطبيق" يمكن للطالب تثبيته على هاتفه بدون متجر التطبيقات — يعمل أوفلاين!

📲 أمر تحويل الموقع لـ PWA
حوّل هذا الكود لتطبيق Progressive Web App (PWA) يمكن تثبيته على الهاتف: ✦ أضف ملف manifest.json بالعربية ✦ أضف Service Worker للعمل أوفلاين ✦ أضف أيقونة للتطبيق ✦ أضف شاشة تحميل (Splash Screen) ✦ أعطني الملفات كلها منفصلة مع تعليمات رفعها على GitHub [الصق كودك هنا]

🖼️ بدائل رفع الصور بدون GitHub

Imgbb.com
ارفع الصورة واحصل على رابط مباشر في ثوانٍ. مجاني تماماً ومثالي للصور الصغيرة.
imgbb.com
Google Drive (مباشر)
ارفع الصورة في Drive، اجعلها عامة، غيّر الرابط: أبدل "view" بـ "uc?export=view" للحصول على رابط مباشر.
Cloudinary.com
منصة متقدمة لرفع وضغط الصور. تُصغّر حجم الصور تلقائياً لتسريع الموقع.
cloudinary.comمجاني بحدود

📊 مراقبة الزيارات والاستهلاك

الخدمةالحد المجانيماذا يحدث عند التجاوز
Netlify Bandwidth100 GB شهرياًيتوقف الموقع — يُمكن الترقية أو الانتظار للشهر الجديد
GitHub Storage1 GB للمستودعتُرفض الملفات الجديدة — يجب حذف ملفات قديمة
Google Drive API1,000,000 طلب يومياًنادراً ما يُتجاوز في المواقع التعليمية
نصيحة: لموقع تعليمي بمئات الطلاب يومياً، الحد المجاني من Netlify يكفي لسنوات. المشكلة تحدث فقط عند رفع ملفات فيديو ضخمة مباشرة في GitHub.
المحور الحادي عشر

تجربة المستخدم والجانب التربوي

اجعل دروسك سهلة الاستخدام على الهاتف ومُريحة للعين ومُراعية للجميع

📱 التوافق مع الهواتف (Mobile First)

📱 أمر جعل الدرس متوافقاً مع الهاتف
اجعل هذا الكود متوافقاً تماماً مع الهواتف المحمولة: ✦ تصميم يتأقلم مع الشاشات الصغيرة (Responsive Design) ✦ الأزرار كبيرة بما يكفي للنقر بالإبهام (٤٤px على الأقل) ✦ الخطوط قابلة للقراءة على الهاتف (١٦px كحد أدنى) ✦ لا يوجد تمرير أفقي ✦ القوائم تتكيّف مع الشاشة الصغيرة ✦ الصور لا تتجاوز عرض الشاشة [الصق كودك هنا] لا تغير التصميم الأساسي — فقط اجعله متوافقاً

🔤 الخطوط العربية الاحترافية

/* إضافة خطوط 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)

👁️ ضعاف البصر — تكبير الخط
أضف في أمرك: "أضف أزرار تكبير وتصغير الخط — ثلاثة أحجام: عادي، كبير، كبير جداً — مع حفظ الاختيار في المتصفح"
🎨 ألوان واضحة للجميع
في أمرك أضف: "تأكد من أن التباين بين النص والخلفية عالٍ (نسبة ١:٤.٥ على الأقل) لضمان قراءة مريحة لضعاف البصر"

📑 الفهرس الجانبي العائم

📑 أمر إضافة فهرس جانبي
أضف لهذا الدرس فهرساً جانبياً عائماً: ✦ يُولّد الفهرس تلقائياً من عناوين الدرس (h2, h3) ✦ يبقى ظاهراً عند التمرير على الكمبيوتر ✦ يختفي على الهاتف ويُفتح بزر ✦ يُضيء العنصر الحالي أثناء التمرير ✦ عند النقر ينتقل بسلاسة للقسم المطلوب [الصق كودك هنا]
المحور الثاني عشر

بنية الدرس المناسب

المكوّنات السبعة التي يجب أن يحتويها أي درس تفاعلي تطلبه من الذكاء الاصطناعي

١
رأس الدرس — العنوان والمقدمة
عنوان جذاب، رقم الدرس، الصف الدراسي، اسم المادة. مقدمة قصيرة تشوّق الطالب وتربط بالدروس السابقة.
٢
نص المصنّف — المتن الأصلي
نص الكتاب المقرر كما هو — مُظلّل بلون مميز ومقسّم بوضوح. يحتفظ بدقة الكتاب المصدر تماماً.
٣
التشجير والتقسيم الهرمي
تحويل النص لشجرة أقسام: الموضوع ← الحكم ← التعريف ← العلامة ← الاستثناء ← الاحتياط
٤
جدول الملخص المنظّم
جدول يجمع كل معلومات الدرس: الاسم | التعريف | الحكم | الشرط | المثال. للمراجعة السريعة.
٥
الأمثلة والشواهد
أمثلة حياتية ملموسة، وشواهد من القرآن والحديث، وتطبيقات عملية من واقع الطالب.
٦
الخريطة الذهنية التفاعلية
تمثيل بصري للعلاقات بين الأفكار — المركز ثم الفروع ثم التفريعات بألوان مختلفة.
٧
التقييم الختامي والشهادة
أسئلة اختيار متعدد وصواب/خطأ وتطبيقية — مع شهادة للطالب عند النجاح.
قائمة تحقق الدرس المناسب:
✦ نص المتن الأصلي مُظلّل ✦ تقسيم هرمي ✦ شجرة تفاعلية ✦ جدول ملخص ✦ أمثلة حياتية ✦ أسئلة تفاعلية ✦ خريطة ذهنية ✦ وضع ليلي ✦ طباعة ✦ شهادة
المحور الثالث عشر

أفكار مشاريع مبتكرة

٣٥+ فكرة لمشاريع تعليمية رقمية يمكن بناؤها بالذكاء الاصطناعي في ساعات

🛠️ أدوات تربوية يومية

📿
عداد التسبيح الرقمي
عداد رقمي جميل مع اختيار الذكر، صوت النقر، شريط التقدم، وحفظ العدد اليومي.
سهلHTML
متتبع الأعمال العبادية
قائمة مهام يومية للصلوات والأذكار والقرآن تُصفَّر تلقائياً كل منتصف ليل.
سهلLocal Storage
🎡
عجلة الحظ للطلاب
عجلة تدور باسم طالب عشوائي من قائمة تُدخلها. مثالية للمشاركة في الفصل.
سهلJavaScript
🕌
عرض أوقات الصلاة
موقع يعرض أوقات الصلاة حسب الموقع الجغرافي باستخدام API مجاني.
متوسطAPI
📅
التقويم الهجري
عرض التاريخ الهجري والمناسبات الإسلامية تلقائياً باستخدام API مجاني.
سهلAPI
💬
زر التواصل الفوري
زر في كل درس يفتح واتساب أو تيليجرام المعلم مباشرة لطرح الأسئلة.
سهلHTML

📚 مشاريع تعليمية متوسطة

🌲
شجرة نسب الأئمة
شجرة نسب تفاعلية بصرية عند النقر تظهر معلومات كل شخصية مع خط زمني للأحداث.
متوسطSVG
🧮
حاسبة الخمس
آلة حاسبة فقهية تفاعلية لحساب الخمس مع شرح كل خطوة وفق المرجع المختار.
متوسطJavaScript
🗺️
خريطة رحلات النبي ﷺ
خريطة تفاعلية تُظهر مسارات السيرة النبوية مع الأحداث والتواريخ.
متقدمMaps API
📖
مكتبة رقمية للكتب
مكتبة تُعرض الكتب تلقائياً من Google Drive مع البحث والتصنيف والتحميل.
متقدمGlideStack
🏆
منصة مسابقات القرآن
منصة لمسابقات حفظ القرآن مع نظام نقاط ولوحة شرف وشهادات للفائزين.
متقدمFull Platform
📝
متتبع خطط الحفظ
لوحة تتبع حفظ القرآن السور والأجزاء مع تقويم إنجاز يومي وتذكيرات.
متوسطLocal Storage

🎮 ألعاب تعليمية مبتكرة

🔄
لعبة تطابق المفاهيم
يربط الطالب بالسحب والإفلات بين المصطلح الفقهي (السهو، الشك، اليقين) وتعريفه. نقاط وعداد وقت وتأثيرات بصرية.
متوسطDrag & Drop
💡
من سيربح المليون العقائدية
أسئلة متدرجة الصعوبة بتصميم مُشوّق. ٤ خيارات، مساعدات (٥٠:٥٠ والجمهور)، ومستويات جوائز للحماس في الفصل.
سهلJSON
🧩
محاكي الوضوء والصلاة
شاشات متسلسلة يرتّب فيها الطالب أفعال الوضوء أو الصلاة بالخطوات الصحيحة ويُصحّح الأخطاء تلقائياً.
سهلSequential
🔑
لعبة البحث عن الكنز
ينتقل الطالب من صفحة لأخرى بحل ألغاز فقهية. كل إجابة صحيحة تفتح رابط الصفحة التالية حتى الوصول لـ"الكنز".
متوسطMulti-page
🎪
مسابقة التحدي الرمضاني
٣٠ قفلاً — يفتح كل قفل في يومه من رمضان تلقائياً برمجياً ليعرض سؤالاً جديداً ويحفظ إجابات الطالب.
متوسطDate-Based
📜
دليل أحكام التجويد الملون
يُلون أحكام التجويد في الآيات برمجياً — الإخفاء بلون، الإدغام بلون، الإظهار بلون. مع أمثلة صوتية عند النقر.
متقدمText Processing

✨ مشاريع خاصة ومبتكرة

🌿
يوميات كربلاء — Timeline
خط زمني تفاعلي يعرض أحداث كربلاء جغرافياً وزمنياً بأسلوب مبسط ومؤثر. النقر على كل حدث يعرض تفاصيله.
متوسطSVG Timeline
🏅
منصة أهداف حفظ القرآن
يظلّل الطالب السور التي حفظها ويعرض نسبة مئوية للتقدم الكلي مع تقويم إنجاز يومي وخطة مخصصة.
متوسطProgress
📖
مكتبة المخطوطات المبسّطة
عرض نصوص تراثية حيث النقر على الكلمة الصعبة يظهر معناها في نافذة أنيقة. مثالي لكتب الأدعية القديمة.
متوسطModals
🎓
مولّد الشهادات التلقائي
الطالب يكتب اسمه بعد اجتياز الدورة فتُولَّد شهادة تقدير جميلة بتصميم إسلامي قابلة للطباعة والتحميل.
سهلCanvas API
🔗
دليل حقيبة الحاج والمعتمر
موقع مصغّر يعمل أوفلاين تماماً يضم خطوات المناسك والأدعية مرتبة حسب المحطات. يُثبَّت على هاتف الحاج.
متوسطPWA Offline
موقع أسئلة وأجوبة شائعة (FAQ)
بطاقات منسدلة Accordion تجمع أبرز الشبهات والأسئلة الشرعية. يرجع إليها الطالب في أي وقت.
سهلAccordion

💡 أفكار متقدمة للمعلمين المبدعين

🤝 مكتبة أوامر مشتركة لجميع معلمي المركز

أنشئ ملف 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 مجاني:

// 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 طويل🧠 Claudeclaude.aiمحدود
كود + محتوى عربي🔮 Geminigemini.google.comمجاني
نصوص طويلة جداً🌙 Kimikimi.comمجاني
مشاريع كاملة تلقائية🤖 Manusmanus.imمدفوع
تجريب نماذج Google🔬 AI Studioaistudio.google.comمجاني
أدوات AI تجريبية🧪 Google Labslabs.google/fx/arمجاني
توليد صور🖼️ Bing Createbing.com/createمجاني
صور متخصصة🍌 نانو بناناnanobanana.proجزئياً
ملخصات + بودكاست📓 NoteBookLMnotebooklm.google.comمجاني
سلايدات من نص🎯 Gammagamma.appجزئياً
حفظ الكود🐙 GitHubgithub.comمجاني
استضافة الموقع🚀 Netlifynetlify.comمجاني
مفتاح API☁️ Google Cloudconsole.cloud.google.comمجاني بحدود
رفع الصور📷 Imgbbimgbb.comمجاني
لا تبنِ خادماً إذا استطعت أن تُحوِّل بنية تحتية موجودة إلى قاعدة بيانات. أعظم الابتكارات لا تخترع شيئاً جديداً، بل تُعيد توظيف ما هو موجود بذكاء أعمق.— مبدأ GlideStack في صناعة المواقع الذكية
🎓

انتهت الورشة

بُنيت هذه الورشة بعناية — استخدمها بحرية كاملة وشاركها مع زملائك المعلمين في جميع مراكز التعليم الديني

إعداد: أ. حسن سديف | ورشة الذكاء الاصطناعي لمعلمي التعليم الديني
🎓

أنجزت الورشة! ابدأ مشروعك الأول اليوم

المعلم الذي يتقن هذه الأدوات لا يوفّر وقته فحسب — بل يرفع من جودة تجربة طلابه ويُحدث أثراً تربوياً أعمق يمتد لأجيال. كل درس رقمي تصنعه هو صدقة جارية.

✅ خلاصة الورشة في ١٠ مبادئ لا تنساها

١
الجمل السحرية لا تُنسى: "بأقصى إمكانياتك" + "بأطول ما يمكنك" + "لا تهمل أي شيء" = نتيجة استثنائية دائماً
٢
ألصق النص الأصلي دائماً: لا تكتفِ بذكر اسم المسألة — ألصق نصها الكامل من الكتاب للحصول على دقة كاملة وتجنب الهلوسة
٣
رقّم طلباتك: أولاً، ثانياً، ثالثاً... يمنع نسيان أي طلب وينظّم تفكير الذكاء الاصطناعي وتحصل على نتائج أكمل
٤
الكود الكامل دائماً: اطلب "أعطني الملف كاملاً بعد التعديل" — لا تقبل "باقي الكود كما هو"
٥
جرّب أكثر من أداة: Gemini للسرعة والمجان، Claude للعمق والكود الطويل، Kimi للنصوص الضخمة، Z.ai كبديل مجاني قوي
٦
محادثة جديدة لكل درس: بعد كل درس مكتمل افتح محادثة جديدة للحصول على تركيز كامل وجودة أعلى
٧
تحقق من النصوص الدينية: الذكاء الاصطناعي يهلوس أحياناً — تحقق من المتون الفقهية والأحاديث بالمصدر الأصلي دائماً
٨
F12 صديقك المبرمج: عندما لا يعمل الكود: F12 في المتصفح ← انسخ الخطأ الأحمر ← ألصقه للذكاء الاصطناعي
٩
ابنِ وشارك ووسّع: كل درس تبنيه هو استثمار. شاركه مع زملائك وسيوفر ساعات من عملهم
١٠
ابدأ الآن: لا تنتظر الكمال. درس بسيط تنشره اليوم أفضل من موقع مثالي تبنيه في ذهنك شهوراً

📋 مرجع سريع — أدوات الورشة كاملة

المهمةالأداةالرابطالتكلفة
كتابة كود HTML طويل🧠 Claudeclaude.aiمحدود
نموذج جديد مجاني قوي⚡ z.aichat.z.aiمجاني
كود + محتوى عربي🔮 Geminigemini.google.comمجاني
نصوص طويلة جداً🌙 Kimikimi.comمجاني
مشاريع كاملة تلقائية🤖 Manusmanus.imمدفوع
ملخصات كتب + بودكاست📓 NoteBookLMnotebooklm.google.comمجاني
تفريغ صوتي عربي🎙️ TurboScribeturboscribe.aiجزئياً
توليد صور🖼️ Bing Creatorbing.com/createمجاني
رسوم توضيحية تلقائية💡 Napkin.ainapkin.aiمجاني
بحث وتوثيق🔍 Perplexityperplexity.aiمجاني
سلايدات من نص🎯 Gammagamma.appجزئياً
حفظ الكود🐙 GitHubgithub.comمجاني
استضافة الموقع🚀 Netlifynetlify.comمجاني
رفع الصور📷 Imgbbimgbb.comمجاني

📞 تواصل مع المُعدّ

أ. حسن سديف

طالب حوزة الغدير للعلوم الإسلامية · مركز المرتضى (ع) معلم · صانع أكواد AI
لأي استفسار أو طلب محتوى مخصص أو دعم في الورشة:

تواصل عبر واتساب @bh_h16 إنستقرام الموقع التعليمي H-EDU

حالة استقبال الطلبات: مفتوح إن تيسّر الوقت

لا تبنِ خادماً إذا استطعت أن تُحوِّل بنية تحتية موجودة إلى قاعدة بيانات. أعظم الابتكارات لا تخترع شيئاً جديداً، بل تُعيد توظيف ما هو موجود بذكاء أعمق.— مبدأ GlideStack في صناعة المواقع الذكية