الحاسب الآلي · الصف الثاني الثانوي · الترم الأول
تخطيط مشروع موقع "قاموس مصطلحات الكمبيوتر المصور"
خطوات تخطيط مشروع موقع قاموس مصطلحات الكمبيوتر المصور: تحديد الهدف والجمهور، وتحديد المحتوى والوظائف، والخريطة الهيكلية للصفحات، وتخطيط بيانات المصطلح، وتوزيع المهام والجدول الزمني.
آخر تحديث: · كيف نراجع المحتوى
مقدمة
- الشعبة: مشترك (كل المسارات)
- الوحدة: الوحدة الأولى: أساسيات تصميم مواقع الويب
- الموضوع: الثاني
الموقع الناجح لا يبدأ بكتابة الكود، بل بورقة وقلم. في هذا الدرس نخطط لمشروع القاموس: لمن نصنعه؟ ماذا سيحتوي؟ ما صفحاته؟ وما البيانات التي نحتاج إلى تخزينها عن كل مصطلح؟
أهداف التعلم
- أن تحدد هدف الموقع وجمهوره والمهام المطلوبة لإنشائه.
- أن تخطط الصفحة الرئيسة وترسم خريطة هيكلية لصفحات الموقع.
- أن تهيئ البيئة المناسبة بتثبيت XAMPP لتشغيل تطبيقي Apache وMySQL.
- أن تخطط بيانات المصطلح التي ستُخزن.
- أن تضع جدولًا زمنيًا وتوزيعًا للمهام.
شرح الدرس
1. الهدف والجمهور
- الهدف: تقديم مرجع مبسط لمصطلحات الكمبيوتر، مع صورة توضيحية لكل مصطلح.
- الجمهور: طلاب المدارس ومن يبدءون تعلم الحاسب.
- النتيجة: لغة بسيطة، وتصميم واضح، وسهولة في البحث.
2. المهام المطلوب تنفيذها في المشروع
- تهيئة البيئة المناسبة لإنشاء الموقع.
- إنشاء قاعدة بيانات لحفظ بيانات القاموس التي تُدخل أو تُعدل عبر صفحات الموقع.
- تصميم الصفحة الرئيسة.
- إضافة مصطلح: باللغتين العربية والإنجليزية (الترجمة)، مع التعريف العلمي للمصطلح وصورة تدل عليه، وحفظها في قاعدة البيانات.
- البحث عن مصطلح داخل قاعدة البيانات.
- حذف مصطلح من قاعدة البيانات.
- تعديل بيانات مصطلح في قاعدة البيانات.
- توفير المساعدة اللازمة حول كيفية التعامل مع الموقع.
3. الخريطة الهيكلية للموقع
الصفحة الرئيسة (index.php)
├── إدخال مصطلح (Add_term.php)
├── بحث عن مصطلح (Search_term.php)
├── تعديل مصطلح (Edit_term.php)
├── حذف مصطلح (Del_term.php)
└── مساعدة (Help.php)وتشترك الصفحات جميعًا في صفحة الرأس (Header.php) التي تضم صورة البانر والروابط، وفي ملف الاتصال بقاعدة البيانات (connection.php). وتساعد الخريطة الهيكلية على تحديد الصفحات والروابط بينها قبل البرمجة.
4. تخطيط بيانات المصطلح
| البيان | اسم الحقل في المشروع | ملاحظة |
|---|---|---|
| رقم المصطلح | id | عدد صحيح، مفتاح أساسي يزيد تلقائيًا |
| المصطلح | term | نص قصير |
| الترجمة | trans | نص قصير |
| التعريف العلمي | defe | نص حتى 220 حرفًا |
| صورة المصطلح | picture | مسار ملف الصورة |
وستنشئ هذه الحقول في جدول terms داخل قاعدة البيانات dbdictionary في الوحدة الثانية.
تهيئة البيئة المناسبة لإنشاء الموقع
- تحديد البرامج التي ستستخدمها في بناء المشروع وتثبيتها (Install) على الكمبيوتر.
- تحديد طريقة حفظ ملفات صفحات الويب الخاصة بالمشروع.
- إعداد جهاز الكمبيوتر الخاص بك ليقوم بدور جهاز الخادم المضيف للموقع (Local Host)، باستخدام برنامج Apache Server الذي يترجم كود PHP.
- لذلك نثبت حزمة XAMPP تحت إشراف المعلم، ثم نشغّل تطبيقي Apache وMySQL من لوحة تحكم XAMPP (بالضغط على Start)، ونحفظ ملفات الموقع داخل المجلد
htdocs، ونعرضها بكتابةlocalhostفي المستعرض.
مراحل تنفيذ المشروع
- إنشاء صفحات ساكنة (Static Pages) من خلال تطبيق مثل Expression Web الذي يعرض كود HTML.
- معالجة محتويات الصفحات الساكنة لتصبح صفحات ديناميكية (Dynamic) بإضافة كود PHP داخل كود HTML.
- عرض صفحات الموقع باستخدام أحد مستعرضات الإنترنت مثل Google Chrome أو Firefox.
5. النموذج الأولي (Wireframe)
رسم تخطيطي بسيط لكل صفحة يوضح أماكن العنوان، وشريط التنقل، ومربع البحث، وبطاقات المصطلحات، والتذييل، دون ألوان أو تفاصيل.
6. توزيع المهام والجدول الزمني
| الأسبوع | المهمة | المسؤول |
|---|---|---|
| الأول | التخطيط والنماذج الأولية | الفريق كله |
| الثاني | تصميم الصفحات بـ HTML وCSS | طالبان |
| الثالث | إنشاء قاعدة البيانات | طالب |
| الرابع والخامس | برمجة صفحات PHP | طالبان |
| السادس | الاختبار والتحسين | الفريق كله |
أمثلة وتطبيقات
تمرين: اكتب ثلاثة مصطلحات ستضيفها أولًا إلى القاموس، مع تعريف مبسط لكل منها، مثل: المعالج (Processor)، والذاكرة العشوائية (RAM)، والمتصفح (Browser).
ملاحظات مهمة
- استخدم أسماء ملفات بالإنجليزية دون مسافات، مثل
add_term.php، لتجنب مشكلات الخادم. - استخدم صورًا من إنتاجك أو مرخصة للاستخدام، واذكر مصدرها.
تطبيق إضافي: قبل البرمجة، اكتب قصة استخدام قصيرة: «بصفتي طالبًا أريد البحث باسم المصطلح لأصل إلى تعريفه وصورته». تكشف هذه الجملة ثلاث حاجات قابلة للاختبار: مربع بحث، وبيانات اسم، وصفحة أو بطاقة تعرض التعريف والصورة. بعد ذلك ارسم مسار المستخدم من الصفحة الرئيسية إلى النتيجة، وحدد البيانات المطلوبة في كل خطوة.
خطأ شائع: بدء كتابة الصفحات قبل الاتفاق على الهدف والبيانات. يؤدي ذلك غالبًا إلى تكرار العمل أو نسيان وظيفة مهمة؛ أما النموذج الأولي فيكشف المشكلة مبكرًا حين يكون تعديلها أسهل.
المفاهيم الأساسية
- التخطيط يبدأ بالهدف والجمهور.
- المهام تحدد الصفحات: Add_term وSearch_term وEdit_term وDel_term وHelp.
- تهيئة البيئة: تثبيت XAMPP وتشغيل Apache وMySQL وحفظ الملفات في htdocs.
- الخريطة الهيكلية توضح الصفحات والروابط بينها.
- تخطيط الحقول وأنواع بياناتها يسبق إنشاء قاعدة البيانات.
- الجدول الزمني وتوزيع المهام ضروريان للعمل الجماعي.
ملخص الدرس
يبدأ مشروع قاموس المصطلحات بتحديد هدفه وجمهوره، ثم مهامه: الإضافة والبحث والتعديل والحذف والمساعدة، وتهيئة البيئة بتثبيت XAMPP، ثم رسم خريطة هيكلية للصفحات ونماذج أولية لها، وتخطيط بيانات المصطلح وأنواعها، وأخيرًا توزيع المهام ووضع جدول زمني. هذا التخطيط يوفر الوقت ويقلل الأخطاء عند التنفيذ.
أسئلة للتدريب
- حدد هدف الموقع وجمهوره المستهدف.
- اذكر ثلاث مهام رئيسية مطلوبة في المشروع.
- ارسم خريطة هيكلية لموقع من خمس صفحات.
- ما الحقل الذي يصلح مفتاحًا أساسيًا لجدول المصطلحات؟ ولماذا؟
- ما الفرق بين الخريطة الهيكلية والنموذج الأولي؟
- ما خطوات تهيئة البيئة المناسبة لإنشاء الموقع؟
- اذكر مراحل تنفيذ المشروع الثلاث.