تصميم المواقع الإلكترونية

1. ‫الشعبة‬/43032 ‫بإشراف‬/‫د‬.‫منال‬‫العنزي‬
‫الطالبة‬‫إعداد‬/‫شوياء‬‫العرجاني‬

2. ‫إن‬‫المعرفة‬‫لم‬‫تعد‬،‫ثابتة‬‫بل‬،‫متطورة‬‫ومتغيرة‬،‫ومتضاعفة‬‫مع‬‫مرور‬‫الوقت؛‬‫فلم‬‫تعد‬‫الطر‬‫ق‬‫التقليدية‬
‫في‬‫التعليم‬‫كافية‬‫إلكساب‬‫المتعلمين‬،‫المهارات‬‫والقدرات‬‫المعرفية‬‫المطلوبة‬‫لهذا‬‫العصر؛‬‫و‬‫من‬‫ثم‬‫إن‬
‫التعلم‬‫اإللكتروني‬‫أصبح‬‫بوابة‬‫المجتمعات‬‫والحكومات‬‫للولوج‬‫إلى‬‫عالم‬‫المعرفة‬‫الذي‬‫يتمي‬‫ز‬‫بمصادره‬
‫المعرفية‬‫المتعددة‬‫والمتنوعة‬،‫والمتكاملة‬‫والمترادفة‬،ً‫ا‬‫أحيان‬‫والمتفاعلة‬ًً‫ا‬‫أحيان‬‫أخرى؛‬‫وهذ‬‫ا‬‫ما‬‫دفع‬
‫المؤسسات‬‫التعليمية‬‫إلى‬‫استخدام‬‫التعلم‬،‫اإللكتروني‬‫وتبنيه‬‫واعتباره‬ًً‫ا‬‫هدف‬،ً‫ا‬‫قومي‬‫ت‬‫سعى‬‫للوصول‬‫إليه‬
‫وتحقيقه‬ًً‫ا‬‫وفق‬‫للمعايير‬‫العالمية‬‫لتحقيق‬‫أكبر‬‫قدر‬‫من‬‫الفائدة‬‫المرجوة‬‫منه‬,‫فقد‬‫غزت‬‫ال‬‫شبكة‬‫ّة‬‫ي‬‫العنكبوت‬
‫عالمنا‬،‫المعاصر‬‫وأصبحنا‬‫ال‬‫نستطيع‬‫أن‬‫نستغني‬‫عن‬‫استخدام‬‫اإلنترنت‬‫في‬ًّ‫ل‬‫ك‬‫مجاالت‬‫ح‬‫ياتنا‬‫صغيرها‬
‫وكبيرها‬.‫ومن‬‫أكثر‬‫مجاالت‬‫اإلنترنت‬ًً‫ا‬‫استخدام‬‫وأيسرها‬ًً‫ال‬‫استعما‬‫وفائدة‬"‫المواقع‬‫اإللكتر‬‫ّة‬‫ي‬‫ون‬".
‫ّة؟ًوماًهيًأنواعها؟‬‫ي‬‫فماًهيًالمواقعًاإللكترون‬

3. •‫هو‬‫تلك‬‫المساحة‬‫االلكترونية‬‫المحجوزة‬‫ضمن‬‫خادم‬‫ما‬‫وتحت‬‫اسم‬‫نطاق‬‫ّن‬‫ي‬‫مع‬‫في‬
‫الشبكة‬‫العنكبوتية‬–‫اإلنترنت‬.
•‫هو‬‫عبارة‬‫عن‬‫مواد‬‫ّة‬‫ي‬‫معلومات‬‫يمكن‬‫أن‬‫تحتوي‬ًً‫ا‬‫نصوص‬‫أو‬ًً‫ا‬‫صور‬‫أو‬‫رسومات‬‫أ‬‫و‬‫مواد‬
‫سمعية‬‫أو‬‫بصرية‬‫ثابتة‬‫ومتحركة‬‫كاألغاني‬‫أو‬‫مقاطع‬‫الفيديو‬.

4. ‫صة‬ّ‫ص‬‫ةًأوًالمتخ‬ّ‫م‬‫تساعدًعلىًربطًالناسًببعضهمًالبعض،ًمنًخاللًالمنتدياتًالعا‬ً‫،ًأوًمواقع‬
‫ًّالتيًينشر‬‫د‬‫ّةًالتعليقًعلىًالموا‬‫ي‬‫،ًأوًأيًموقعًآخرًيقدمًخاص‬ّ‫ي‬‫التواصلًاالجتماع‬‫ة‬ّ‫م‬‫هاًللعا‬.
‫ّة،ًوالمو‬‫ي‬‫،ًوذلكًمنًخاللًالمواقعًالموسوع‬ّ‫ي‬‫تقدمًالمعلوماتًلمختلفًالناسًبشكلًمجان‬ً‫اقع‬
‫صةًبأنواعها‬ّ‫ص‬‫المتخ‬.
‫تًمشاكلًضيقًالوقت،ًوقلةًالمالًبالنسبةًلألشخاص،ًوذلكًمنًخاللًتسريعًإنجاز‬ّ‫حل‬ً‫األعمال‬
‫ّة‬‫ي‬‫ّة،ًوعلىًرأسهاًاألعمالًالحكوم‬‫ي‬‫الروتين‬
‫،ًحيثًأصبح‬ّ‫ي‬‫قًمنًخاللًمواقعًالتسوقًاإللكترون‬ ّ‫لتًعلىًالناسًعمليةًالتسو‬ّ‫ه‬‫س‬ً‫باستطاعة‬
ً‫ًمكانًفيًالعالمًمنًخاللًهذهًالمواقع‬ّ‫ي‬‫ًغرضًيحتاجهًمنًأ‬ّ‫ي‬‫الشخصًشراءًأ‬.

5. ‫سهلتًعلىًاألفرادًالراغبينًبإكمالًمسيرتهمًالتعليميةًبالقيامًبهذاًاألمر،ًوذلكًمنًخ‬ً‫اللًالتعلم‬
ً‫عنًبعدًمنًخاللًالتواصلًمعًالجامعةًالتيًانتسبًإليهاًالطالب‬.
‫عملتًبعضهاًعلىًتوفيرًمختلفًأصنافًالرفاهيةًلإلنسان،ًفقدًصارًبمقدورًاألفرا‬ً‫دًمتابعة‬
‫ّة،ًولعبًاأللعابًالمسليةًوالمفيدة،ًومشاهدةًاألفالم،ًوقراءةًالكت‬‫ي‬‫القنواتًالتلفزيون‬ً‫ب‬.
ًّ‫ي‬‫ًج‬ً‫ال‬‫ًدخ‬ّ‫يمكنًمنًخاللًبعضًالمواقعًاإللكترونيةًالبدءًباألعمالًالخاصةًالتيًتدر‬ً‫ًعلى‬ً‫ا‬‫د‬
ًّ‫ي‬‫اًيؤديًإلىًاالستقاللًالمال‬ّ‫م‬‫األفراد؛ًم‬.

6. ‫الشخصية‬ ‫المواقع‬ ‫إنشاء‬ ‫خطوات‬
‫الكلمات‬ ‫أهمية‬‫المفتاحية‬‫المواقع‬ ‫إلنشاء‬
‫اإللكترونية‬ ‫المواقع‬ ‫أنواع‬
‫فعال‬ ‫الكتروني‬ ‫موقع‬ ‫على‬ ‫الحصول‬
‫اإللكترونية‬ ‫بالمواقع‬ ‫المتعلقة‬ ‫األسئلة‬ ‫جميع‬ ‫على‬ ‫نتعرف‬ ‫سوف‬
‫المواقع‬ ‫إنشاء‬ ‫من‬ ‫الهدف‬

7. ً‫أنًيكونًلكًتواجدًدائمًعلىًشبكةًالعالمًالواسعًشبكةًاإلنترنت‬
-ً‫امتالكًالشخصًمحلًتجاريًفيًأفضلًاألماكنًويعملًطوالًاليوم‬
-‫يمكنهًأنًيسوقًلمنتجةًأوًخدمتهًبكلًسهولة‬

8. ً‫اختيارًاسمًالنطاقًأو‬‫الدومين‬‫نتجكًأوًخ‬ُ‫م‬‫ًلعملكًو‬ً‫ا‬‫ناسب‬ُ‫م‬ً‫الخاصًبكًعليًأنًيكون‬ً‫دمتكًوعلي‬
‫أنًيكونًسهلًالحفظًوفريد‬
ً‫سمي‬ُ‫ي‬ً‫اختيارًشركةًمنًشركاتًاالستضافةًعليًاإلنترنتًوما‬‫بالسيرفر‬‫الذيًسي‬ً‫كونًبمثابة‬
‫الحافظًلبياناتًالموقعًالخاصًبك‬
‫برمجةًالموقعًالخاصًبك‬
‫تصميمًالموقعًالخاصًبك‬

9. ‫مواقع‬‫ذات‬‫المحتوى‬‫الثابت‬:
‫ويقصد‬‫به‬‫ال‬‫يتغير‬‫تبعا‬‫للزائر‬‫الوحيد‬‫الذي‬‫يغيرة‬‫صاحب‬‫الموقع‬‫أو‬‫مدير‬‫الشبك‬‫ة‬.HTML
‫ليبني‬‫بذلك‬‫أول‬‫موقع‬‫ثابت‬.‫يستخدم‬‫هذا‬‫النوع‬‫اللغات‬‫المعروفة‬‫مثل‬:
HTML,CSS,XHTML
ً‫مواقعًذاتًمحتوىًالتفاعلي‬:
ً‫محتوىًتفاعليًينفذًفي‬‫الخادوم‬
‫محتوىًتفاعليًينفذًعندًالمستخدم‬

10. ً‫يتمًوضعًالكلمات‬‫المفتاحية‬‫فيًعنوانًالموقعًووصفه‬
ً‫وعمل‬‫التدوينات‬ً‫والصفحاتًالتيًتحملًعنوانًالكلمات‬‫فتاحية‬ُ‫م‬‫ال‬
ً‫كماًترفعًكثافةًالكلمة‬‫المفتاحيه‬‫فيًالموقعًمماًيجعلًموقعكًفيًالنتائجًاألوليًل‬‫محركاتًالبحث‬


11. ً‫حجزًاسمًنطاق‬–‫دومين‬–‫خاصًبالموقعًااللكترونيًوهوًبمثابةًاسمًومدخلًلعبورًالموقع‬ً‫على‬
ً‫الشبكة‬‫ّة‬‫ي‬‫العنكبوت‬ً‫التيًتسمىًاإلنترنت‬.
ً‫الفرقًبينًنهايةًكل‬‫دومين‬ً‫أوًنطاقًوماذاًيعني‬:

com:.ً‫وهيًنهايةًتمًتداولهاًلألعمالًالتجاريةًوهيًتعتبرًمنًنهايات‬‫الدومين‬‫أوًالنطاقاتًا‬ً‫ألكثر‬
‫شهرة‬.

12. net:.ً‫وهيًنهايةًتمًتداولهاًللشبكاتًوهيًتعتبرًفيًالمرتبةًالثانيةًمنًنهايات‬‫الدومين‬ً‫أوًالنطاقات‬
‫األكثرًشهرة‬.

org:.‫وهيًنهايةًتمًتداولهاًللمؤسساتًأوًالمنظماتًالغيرًربحيةًوتأتيًفيًالمرتبةًالث‬ً‫الثةًفي‬
ً‫المراتبًاألكثرًشهرةًبالنسبةًلنهايات‬‫الدومين‬‫أوًالنطاق‬.

gov:.ً‫وهيًنهاية‬‫لدومين‬‫أوًنطاقًتمًتداولهاًللمنظماتًالحكوميةًوالوزارات‬.

edu:.ً‫وهيًنهاية‬‫لدومين‬‫أوًنطاقًتمًتداولهاًللجامعاتًوالمؤسساتًالتعليمية‬.

13. ‫حجزًوتخصيصًمساحةًالكترونيةًلدىًخادمًماًالستضافةًوتخزينًموادًالموقعًااللكت‬ً‫روني‬
ً‫عليها‬.ً‫وهذهًالمساحةًأو‬‫اإلستضافة‬‫تختلفًمزاياهاًوأحجامهاًحسبًرغبةًالمستخدمًوحسب‬
ً‫الشركةًالمستضيفةًلهذاًالموقع‬.
‫ّاتًوتطبيقاتًمناسبةًيتعاملًمع‬‫ي‬‫رًالتصميمًالمناسبًباستخدامًبرمج‬ّ‫ف‬‫يجبًتو‬ً‫هاًويفهماًالكمبيوتر‬
ً‫وتتالءمًمعًبروتوكوالتًوقوانينًالشبكة‬‫العنكبوتية‬‫،ًليتمًمنًخاللهاًإظهارًالموقعًب‬ً‫دونًمشاكل‬
ً‫تقنيةًأوًفنية‬.
‫حميلًعندًتصميمًأيًموقعً،ًلتيسيرًتصفحًالموقعًدونًأيًهدرًللو‬ّ‫ت‬‫مراعاةًسرعةًال‬ً‫قت‬.

14. 
ً‫ّةًمثل‬‫ي‬‫منًالضروريًتسجيلًالموقعًعلىًمواقعًالبحثًالرئيس‬‫غوغول‬‫وياهو‬‫ليتمًال‬ً‫وصولًإلى‬
ً‫الموقعًمنًكافةًالمستخدمينًلإلنترنتًعبرًالعالم‬.‫والمواقعًااللكترونيةًتختلفًمن‬ً‫حيثًالحجم‬
‫وطبيعةًالموادًالمعروضةًولغاتًالبرمجةًالمستخدمةًفيًالتصميمً،ًومنهاًالبسيطًومنها‬ً،ً‫د‬ّ‫ق‬‫المع‬
ً‫ومنهاًالصغيرًومنهاًالكبير‬,‫وكلًذلكًيخضعًحسبًحاجةًالمستخدمًوصاحبًالموقعًوالغ‬ً‫اية‬
‫لًفيًصفح‬ّ‫ق‬‫صميمًويراعيًالسهولةًفيًالتن‬ّ‫ت‬‫ًفيًال‬ً‫ال‬‫منهً،ًوكلماًكانًالموقعًسه‬ً‫ما‬ّ‫اتهًالداخليةً،ًكل‬
‫كانًعددًزوارهًوالمستفيدينًمنهًأكثر‬.

15. ‫فهمًخصائصًالمتعلمينًالكبارًلتمكينهمًمنًاالستفادة،ًخاصةًمعًاستقالليتهمًالشخص‬ً‫يةًوفهمهم‬
‫المختلفًللحياة‬.
‫تصميمًمواقعًتتوافقًمعًالخبراتًوالنشاطاتًالتربويةًالتيًيقدمهاًلطالبه‬.
‫تصميمًبيئاتًالتعلمًاإللكترونيةًالنشطةًالتيًتتناسبًمعًاهتماماتًالمتعلمينًالكب‬‫ار‬
ً‫إتقانًإحدىًلغاتًالبرمجة‬,ً‫وبرامجًتصفحًالمواقع‬.
‫إنشاءًمواقعًلمقرراتًدراسيةًأوًمواقعًلدوراتًوورشًتعليمية‬
ً‫استخدامًبرامجًحمايةًالملفات‬.
ً‫معرفتهًبمستحدثاتًالتكنولوجيةًوتوظيفها‬.
‫التعلم‬

16. ‫تعلمًمنًأهمًالدوافعًللتصميمًالمواقعًالتيًتساعدهًعلىًعمليةًال‬ُ‫م‬‫تحديدًالهدفًمنًقبلًال‬‫تعليمية‬
ً‫استخدامًالبريدًاإللكترونيًلتسهيلًاالتصالًبينهمًوبينًالمعلم‬.
ً‫زيارةًأدلةًالمواقعًالتربويةًالعربيةًواألجنبيةًالتيًتضمًأغلبًالمواقعًالتربوية‬
ً‫إنشاءًالمواقعًالشخصية‬,ً‫والمشاركةًفيًمنتدياتًوالمواقعًلوزارةًالتعليم‬
ً‫استخدامًالمصادرًااللكترونية‬
ًًً‫استخدامًًالبرامجًالمساعدةًفيًتصميمًالمواقعًالتعليميةًاإللكترونية‬

17. ‫منًخاللًإطالعكًوتصفحكًللعديدًمنًالمواقعًااللكترونيةًأذكريًأ‬ً‫هم‬
‫النقاطًالتيًترينًأنهاًسببًفيًانجذابكًللموقع‬
‫رمق‬ ‫نشاط‬)(

18. ً‫نظام‬(Html:)ً‫إنهًنظامًخاصًبالنصًيمكنكًمنًصياغةًصفحةًالكترونية‬.‫أو‬
ً‫بمعنيًأشملًهوًلغةًالبرمجةًالخاصةًباإلنترنت‬.
ً‫محررًلغة‬(Html:)‫يوفرًالوسائلًوالطرقًالمختصرةًلصياغةًوتحريرًصف‬ً‫حات‬
‫الـ‬Htmlً‫خاصةًباإلنترنت‬.

19. ًً‫ا‬‫إنًاختالفًالتصميمًيأتيًتبع‬‫إلختالف‬ً‫رادًإنشائه‬ُ‫م‬‫مجالًالموقعًال‬‫لك‬‫أنًتختارًا‬ً‫لتصميم‬
‫المناسبًلمجالًالموقعًعليًأنًيكونًالتصميمًمناسباًلزوارًالموقعًفهناكًبعضًالتص‬ً‫ميمات‬
‫الجذابةًإالًأنهاًالًتتسمًبالسهولةًعليًالزوار‬

20. ‫تصميمًمواقعًشركات‬
ً‫تصميمًمواقعًاإلخبارية‬
‫تصميمًمواقعًتعليمية‬
‫تصميمًمواقعًشخصية‬
‫تصميمًمواقعًحكومية‬
ًً‫تصميمًمواقعًسياحية‬

21. ً‫إنًالصورًيجبًأنًالًتتجاوز‬75ً‫وحدةًمنًوحداتًتشكيلًالصورةًللبوصةًالواحدة‬(Pixels. )
ً‫يجب‬‫إستعمال‬ً‫ملفات‬‫الـ‬(JPG)‫وذلكًللصورًالفوتوغرافيةًومنًمثلًتلكًالتيًتحتويًعلى‬ً‫ألوان‬
ً‫مظللة‬.
‫أستخدام‬ً‫نظامًبديلًيتكونًمنًالرموز‬.
ً‫تجنبًعرضًالصورًعلىًأنهاًوصالت‬.
ً‫تجنبًاإلشارةًإلىًالصورًعلىًأنهاًنص‬.

22. ً‫تجنبًاستعمالًالصورًالشفافةًأوًالصورًذات‬‫الـ‬(Gif)ً‫المؤلفةًمنًوحدةًواحدةًملونةًمن‬
‫األجزاءًالتيًتتكونًمنهاًالصورةًعلىًالشاشةًدونًوجودًسببًجيدًلعملًذلك‬.
ًً‫ا‬‫ًأوًتصميم‬ً‫ا‬‫استعمالًالقوائمًكيًتشكلًعرض‬,ً‫ولكن‬:
ً‫البدًمنًتحديدًعرضًالقوائمًوخالياًالقوائمًبنسبًمئوية‬
ً‫وتجنبًوضعًالقوائمًمعًالفقراتًأوًخلطهاًمعًالنصوص‬.

23. ‫األمور‬ ‫هي‬ ‫ما‬‫تجنب‬ ‫يجب‬ ‫التي‬‫ها‬
‫عند‬
‫رمق‬ ‫نشاط‬(2)

24. ‫البراويزًأوًًاستعمالًبديلًليسًلهًإطار‬.
ً‫برمجة‬‫الجافا‬(Java)ً‫والفالش‬(Flash)ًً‫ا‬‫حيثًكانًممكن‬.
‫ًعنًالمضمون‬ً‫ا‬‫األشكالًالتيًليسًلهاًفائدةًحيثًإنهاًتشدًاالنتباهًبعيد‬.
ً‫األشكالًالتيًتفتقرًإلىًاألعلىًوإلىًاألسفل‬,ً‫والتيًتبرم‬,‫والتيًتدورًأوًالتيًت‬ً‫تحركًبشكلًعام‬
‫دونًأنًتكونًذاتًأهميةًمنًحيثًالقيامًبدورًتوضيحيًللمضمون‬.
ً‫النصًالمطولًالذيًًعلىًالشاشةًالرئيسية‬.

25. ً‫التصميم‬:
‫بتحفيزًجمهورك‬:‫عاميليهم‬‫باحترامًووفريًفرصةًللزائرينًالرجوعًالدائ‬ً‫مًإلي‬
‫الموقع‬.
ً‫ضعيًأهدافًللموقعًتمتازًبالوضوحًوقابليةًالقياس‬.
‫قوميًباالعترافًوالتقديرًتجاهًردودًاألفعال‬.‫الجهود‬,‫النجاح‬.
ً‫االجتهادًوعملًالتغيراتًكيًيرتقيًإلىًمستوىًالتوقعات‬.

26. ‫المحتوىًومضمونًتصميمًالمواقع‬:
ً‫البدًمنًتحديدًمحتوىًالموقعًالخاصًبكًبشكلًمكثف‬.
‫يجبًأنًتكونًاللغةًبسيطةًومفهومةًمنًقبلًجمهورًعالمي‬.
ً‫أدخليًنصوصًالمحتوىًفيًصفحاتًذاتًخلفيةًبيضاء‬.
ً‫أنًيكونًسهلًأمامًالجمهورًاإلطالعًعلىًالمفاهيمًالهامة‬.
‫تعامليًمعًمعلوماتكًحسبًأولوياتها‬,ً‫كماًلوًأنكًتقومينًبوضعًخطوط‬
ً‫عريضة‬.

27. ‫توجية‬‫مسارًالتصفحًبأسلوب‬:
‫بسيط،ًوواضح،ًيقومًعلىًخرائطًللموقعًتتألفًمنًطبقاتًأوًمستويات‬ً‫منظمة‬
ً‫التفكيرًبطريقةًالخطوطًالعريضة‬.
‫األشكالًأوًالصورًالمتداخلة‬:،‫إنًتطويرًالموقعًيبدأًبعملًنصًوهيكلًله‬ً‫بعدًأن‬
‫يتمًتطويرًالهيكلًاألساسي‬,‫يجبًتحليلًالمحتوىًمنًحيثًمنًالذيًسي‬ً‫ستفيدًمن‬
ً‫عملًالتصاميمًالتيًتقومًعلىًالصورًأوًالنص‬.

28. ‫اختيارًألوانًكلًمنًالنصًوالخلفيةًعلىًأنًيكونًالفرقًكبيرًبينهما‬.
‫توحيدًشكلًوحجمًحروفًالنصًبشكلًدائمًومستمر‬.
‫اختيارًلوحةًألوانًآمنةًالستعمالًالزائر‬.‫لكيًتتسمًبالثبات‬.
‫تجنبًإحداثًتغييراتًعلىًاأللوان‬.
‫تجنبًاستعمالًالحروفًالمائلةًوإحداثًتغييراتًعلىًاأللوان‬

29. ً‫تجنبًوضعًخطًتحتًالكلماتًحيثًيمكنًالخلطًبينهاًوبينًالوصالت‬(Links)
‫تجنبًالنصًالمطولًأكثرًمنًاللزوم‬.
ً‫تجنبًاستعمالًالخلفياتًذاتًالنسقًالشبكي‬,‫ألنًذلكًيصعبًالقراءة‬.
‫توضيحًالمضمونًباستعمالًتصاميمًوأشكالًتتسمًبالبساطة‬,‫المالأمة‬,‫صغرًا‬ً،‫لحجم‬
‫والثبات‬.

30. ‫طرقًتصميمًالمواقعًااللكترونية‬
ً‫هناكًطريقتانًلتصميمًالمواقعًعلىًاالنترنت‬:
‫الطريقةًاألولىًتتطلبًمعرفتكًللغة‬HTML
‫الطريقةًالثانيةًًعنًطريقًبرامجًالتصميمًوهيًاألسهل‬,‫التيًالًتحتاجًإلىًمعرفةًم‬ً‫سبقة‬
ً‫بلغاتًبرمجةًالمواقعًمثلًبرنامج‬Front page‫ويمكنًتصميمًصفحاتًعربيةًعلية‬.

31. ً‫برمجةًالمواقع‬..‫هيًعبارةًعنًتصميمًمواقعًًالويبًالمكونةًمنًمجموعةًصفحاتًتكونًم‬ً‫ع‬
ً‫بعضهاًماًيسمىًبرنامجً،،ًًوالبرامجًفيًاالنترنتًتختلفًعنًالبرامجًعلىًاألجهزة‬!!..ًً‫فبينما‬
ً‫برنامج‬‫الفرونت‬‫بيج‬ً‫مثالًبرنامجًيستخدمًعلىًالجهاز‬..‫فانًبرنامجًالمنتدىًعبارةًع‬ً‫نًمجموعة‬
ًًً‫صفحاتًتكونًبامتدادًخاصًباالنترنت‬(ً‫مثال‬php‫او‬html)

32. •ً‫ماًهيًلغة‬‫ال‬HTML‫؟‬
ً‫لغة‬ ‫أ‬-‫الـ‬HTML‫او‬Hyper text markup languageً‫بمعنىًلغةًترميز‬
‫النصوص،ًهيًلغةًمستخدمةًإلنشاءًصفحاتًاالنترنت‬
•ً‫ماًلفرقًبين‬‫الـ‬htmlً‫ولغاتًبرمجةًأخرىً؟‬
‫إنهاًبسيطةًورموزهاًسهلة‬ ‫أ‬-
‫إنهاًليستًلغةًبرمجةًبالضبطً،ًفهيًالًتحتاجًًلبرنامجًيترجمهاًللغةًالحاسبًو‬ ‫ب‬-ً‫هوًما‬
ً‫يسمى‬‫الـ‬compiler‫بلًيتمًتنفيذًتعليماتهاًمباشرةًعبرًمتصفحًاالنترنت‬
•

33. ًً‫وهذهًالصفحاتًتقومًبوضعهاًفيًموقعكًمثلًأيًصفحاتًأخرىًتصممها‬‫بالفرونت‬‫بي‬‫ج‬ً‫ولكن‬
‫البرامجًتختلفًقليالًبحيثًأنهاًتتطلبًمعلوماتًمعينةً،ًًمثلًالكلمةًالسريةًلدخولًق‬ً‫اعدةًالبيانات‬
ً‫للحصولًعلىًالمعلوماتًمنهاً،ًاسمًقاعدةًالبياناتً،ًوبعضًالمعلوماتًاألخرى‬.

34. ً‫مفهومًالتصميمًاصطالحاًيعنيًهندسةًالشيءًوفق‬‫محكات‬‫معينه‬
‫ويشيرًًعليًعبدًالمنعمًإنًتصميمًالتعليمًعمليةًلهاًفنياتهاًًومنطقهاًومنهجهاًوهذهًالفن‬ً‫ياتًيمكن‬
‫تحديدهاًإجرائياًكماًيمكنًاكتسابهاًوالتمكنًمنهاًإليًجانبًأنهاًتزيدًمنًكفاءةًوفاعليةًالمو‬ً‫اقفًالتعليمة‬
ً‫التيًتصممًًوفقًمنهجًمعينًيتصفًبالمرونةًوالتكاملية‬(‫عليًعبدًالمنعم‬,1991,‫ص‬91(

35. ‫ويمكنًتصنيفًالمدارسًالمؤثرةًفيًطبيعةًالتصميمًالتعليميًإلىًأربعةًمدارسًرئيسية‬:
×ً‫الــمدرسةًالـسلوكية‬
×ً‫المدرسةًالمعرفية‬(ً‫اإلدراكية‬)
×ً‫مدرسة‬‫الذكاءات‬ً‫المتعددة‬
×‫ا‬ً‫لمدرسةًالبنائيـــة‬:
ً‫تعتمدًعلىًالفلسفةًالذاتيةًالتي‬"ً‫مًالمعرفةًكلهاًعلىًأساسًالخبرةًالذاتية‬ َ‫تقو‬"‫فيًه‬ً‫ذاًالنموذج‬,ً‫يفهم‬
ً‫المتعلمًالعالمًمنًخاللًخبراتهًالخاصة‬,‫نًالمعنىًمنًخاللًالتفسيرًالشخصيًللخب‬ َ‫ويكو‬ً‫رة‬.ً‫لهذاًيتوقع‬
‫منًالمتعلمًأنًيأتيًبمعلوماتًتختلفًعنًصيغتهاًاألصليةًولذلكًيمكنًأنًنقولًأنًهذهًالمدر‬ً‫سةًساهمت‬
‫بشكلًكبيرًفيًكيفيةًبناءًوتصميمًبرامجًومصادرًالتعلمًوفقًخصائصًالمتعلمينًال‬ً‫كبار‬ً‫شاملة‬
ً‫للبرمجيات‬.
‫التعلم‬

36. .1ً‫مرحلةًالتحليل‬:‫ويتمًفيهاًتحليلًكلًمنًاألهدافًوالمحتوىًوخصائصًالطلبًالمتعلمين‬ً‫وحاجاتهم‬
‫التعليميةًوتقديرًاالحتياجاتًواإلمكانات‬
.2‫مرحلةًالتصميم‬:‫وتشتملًعلىًتصميمًالمحتوىًوالشاشاتًوتحديدًالتتابعًوإستراتي‬ً‫جياتًالتعليم‬
‫والتعلم‬
.3ً‫مرحلةًالتطوير‬:‫وتشتملًعلىًعملياتًالبرمجةًوالتنفيذًوتوظيفًالوسائطًوالتغذيةًال‬‫راجعة‬

37. ‫النظريات‬ ‫من‬ ‫عدد‬ ‫على‬ ‫األساس‬ ‫في‬ ‫يرتكز‬ ‫االلكتروني‬ ‫التعلم‬ ‫لبرمجيات‬ ‫التعليمي‬ ‫التصميم‬‫والمبادئ‬
‫التالية‬ ‫باالستراتيجيات‬ ‫االهتمام‬ ‫ضرورة‬ ‫على‬ ‫تؤكد‬ ‫والتي‬ ‫والمعرفية‬ ‫النفسية‬:-
.1‫إستراتيجياتًخاصةًبتنظيمًوتتابعًالمحتوىًوتسلسلًاألحداثًالتعليميةًداخلًالمح‬‫توى‬
.2‫إستراتيجياتًخاصةًباالتصالًالتعليميًوالتفاعلًبينًالمتعلمًوالمحتوىًمنًخاللًا‬‫لوسائطًالمتعددة‬
.3‫إستراتيجياتًخاصةًبإدارةًعمليةًالتعلمًومساعدةًالمتعلمًعلىًالتفاعلًمعًالتصميمًو‬ً‫ممارسة‬
ً‫األنشطةًالتعليميةًالواردةًبالبرمجية‬.
‫التعلم‬

38. ‫وفىًضوءًالمراحلًالمختلفةًللتصميمًالتعليميًواالستراتيجياتًالمختلفةًواالطالعًع‬ً‫لىًبعضًنماذج‬
ً‫التصميمًالتعليمي‬ً‫للبرمجياتًااللكترونية‬‫وفيماًيليًالمراحلًالتيًيتكونًمنهاًالنموذج‬:-
‫التحليل‬ ‫مرحلة‬:‫هي‬ ‫فرعية‬ ‫عمليات‬ ‫أربعة‬ ‫وتتضمن‬
·‫تقديرًاالحتياجاتًوتحديدًالمشكلةًالتعليمية‬
·‫تحليلًخصائصًالمتعلمين‬
·‫تحليلًالمهامًالتعليمية‬
·ً‫تحليلًالمصادر‬‫والمواردًالتعليمية‬
‫التعلم‬

39. 2.‫التصميم‬ ‫مرحلة‬:‫هي‬ ‫فرعية‬ ‫عمليات‬ ‫أربعة‬ ‫وتتضمن‬
·‫تصميمًاألهدافًالعامةًواألهدافًاإلجرائية‬
·‫تصميمًواختيارًالمحتوى‬
·‫تحديدًإستراتيجياتًالتعليمًوالتعلم‬
·ً‫تصميمًأدواتًالقياس‬
3.‫السيناريو‬ ‫إعداد‬ ‫مرحلة‬:‫هي‬ ‫فرعية‬ ‫عمليات‬ ‫ثالث‬ ‫وتتضمن‬
·‫إعدادًوتصميمًالسيناريوًالمبدئي‬
·‫تصميمًوجهاتًالتفاعل‬
·‫تحديدًمعاييرًتوظيفًالوسائطًالمتعددة‬

40. 4.‫التنفيذ‬ ‫مرحلة‬:‫هي‬ ‫فرعية‬ ‫عمليات‬ ‫ثالثة‬ ‫وتتضمن‬
·‫تنفيذًالسيناريوًالمحددًللبرمجية‬
·‫تحديدًمتطلباتًاإلنتاج‬
·‫ضبطًالتفاعالتًداخلًالبرمجية‬
5.‫واالستخدام‬ ‫الضبط‬ ‫مرحلة‬:‫ثالثة‬ ‫وتتضمن‬‫هي‬ ‫فرعية‬ ‫عمليات‬
·‫الضبطًالمبدئيًللبرمجية‬
·‫الضبطًالنهائيًللبرمجية‬
·‫نشرًواستخدامًومتابعةًالبرمجية‬

41. ً‫عناصرًتصميمًموقعًتعليميًعبر‬‫االنتر‬‫نت‬
‫يري‬‫روفيني‬‫وا‬ ‫التعليمي‬ ‫التصميم‬ ‫لعملية‬ ‫المكونة‬ ‫العناصر‬ ‫من‬ ‫عدد‬ ‫هناك‬ ‫أن‬‫يجب‬ ‫لتي‬
‫عبر‬ ‫التعليمية‬ ‫المواقع‬ ‫صفحات‬ ‫في‬ ‫تضمينها‬‫األنترنت‬‫يوض‬ ‫التالي‬ ‫والشكل‬‫ذلك‬ ‫ح‬
‫عبر‬ ‫تعليمي‬ ‫موقع‬ ‫تصميم‬ ‫عناصر‬‫األنترنت‬

42. ً‫يتكونًالنموذجًمنًسبعةًعناصرًهي‬
_‫الجمهور‬:‫المستهدفًيجبًأنًًيراعيًالموقعًالتعليميًحاجاتًمستخدميهًوتوقعاتهمًمنًالمع‬ً‫لومات‬
ً‫التيًيدرسونهاًويبحثونًعنها‬.
_ً‫األهداف‬:‫تعدًكتابةًاألهدافًالتعليميةًالواضحةًوالمحددةًأمرًمهماًفيًعمليةًالتخطيطًوالت‬ً‫صميم‬
ً‫صفحةًالبدايةًوالمحتويات‬.
‫يجبًأنًيتضمنًالموقعًالتعليميًصفحةًبدايةًالعملًالتيًيتفرعًمنهاًصفحاتًالمحتوى‬ً‫وتتضمنًتلك‬
ً‫الصفحةًصورةًالمؤلفًومعلوماتًعنه‬.


43. ً‫بيئةًتصفحًالموقع‬
‫يجبًأنًيتمًالتنقلًفيًصفحةًبدايةًالعملًإلىًصفحاتًالمحتوىًغيرًخطيًوتوجدًأربعًنظ‬ً‫مًلربطًبين‬
ً‫صفحاتًالويبًالمكونةًللموقعًالتعليميًوهي‬
ً‫الموقع‬‫التتابعي‬ً‫وفيهًترتبطًكلًصفحةًبماًيليها‬
ً‫الموقعًالشبكيًوفيهًترتبطًالصفحات‬‫ببعضها‬ً‫علىًهيئةًشبكية‬
‫الموقعًالهرميًوفيهًترتبطًالصفحاتًبطريقةًهرميهًحيثًترتبطًكلًفئةًبطريقةًمتابع‬ً‫ة‬
ً‫الموقع‬‫العنكبوتي‬ً‫وفيهًترتبطًالصفحةًبصفحاتًمتعددة‬

44. ً‫تصميمًالصفحات‬
‫ينبغيًأنًتتبعًصفحاتًالموقعًمبادئًلتصميمًالتالية‬
ً‫البساطةًوالوضوح‬
‫تتناسقًفيًاأللوان‬
ً‫استخدامًألوانًفاتحةًللخلفية‬
ً‫المحافظةًعلىًطولًالصفحاتًبسهولةًالتحميل‬

45. ً‫النصًوالرسومًالخطية‬
ً‫يعتمدًوضوحًالمعلوماتًعلىًدرجة‬‫التساير‬ً‫البصريًبينًحجمًالخطًوكتلًالنص‬‫و‬‫العناوي‬ً‫ن‬,
‫والمساحةًالبيضاءًالمحيطة‬.
ً‫اختيارًبرنامجًتأليفًالويب‬
‫تشتملًبرامجًالويبًعلىًمميزاتًجديدةًالًتتطلبًمهاراتًالبرمجةًويجبًاختيارًالبرنامجًا‬ً‫ألكثر‬
‫مالأمة‬ً‫وقدرهًعلىًمساعدةًالمصممًفيًتحقيقًأهدافه‬.

46. 1ً‫مهاراتًمتعلقةًبالنصوص‬(ً‫إضافةًنص‬,ً‫تنسيقًالنصوص‬,‫إدراجًنصًمتحرك‬)
2ً‫مهاراتًمتعلقةًبالصور‬(ً‫إدراجًصوره‬,‫تغييرًحجمًصورة‬)
3ً‫مهاراتًمتعلقةًبإنشاءًالروابط‬(‫إنشاءًرابطًبينًالصفحةًالحاليةًوصفحةًأخرىًداخلًنف‬ً‫سًالموقع‬,
ً‫مهاراتًإنشاءًبرابطًبينًالصفحةًالحاليةًوصفحةًأخرىًمنًموقعًآخر‬/‫مهاراتًإنشاءًرابطًبي‬ً‫ن‬
ً‫الصفحةًالحاليةًموقعًالبريدًااللكتروني‬)

47. 4ً‫مهاراتًمتعلقةًبخلفيةًصفحةًالويب‬(ً‫تغييرًلونًالخلفية‬,‫إضافةًصورةًكخلفيةًلص‬ً‫فحة‬/ً‫إضافة‬
ً‫صوتًكخلفيةًصفحةًويب‬)
5ً‫مهاراتًاستعراضًصفحاتًالويب‬
6‫مهاراتًتثبيتًبعضًالبرامجًأوًلغاتًتصميمًصفحاتًالويبًوالتعرفًعلىًإمكانياتهاًو‬ً‫مساحة‬
ً‫العملًالخاص‬‫بها‬

48. ‫أ‬-ً‫األسسًالتقنيةًلتصميمًصفحاتًالويب‬
1ً‫اإليجازًبحيثًالًيتعدىًحجمًالصفحةًمساحةًثالثًشاشاتًوحتىًال‬‫يظطر‬‫المتعلمًإلىًاستخ‬ً‫دامًشريط‬
ً‫التمريرًلمدةًطويلةًلكيًيصلًإلىًالمعلومة‬.
2‫الوضوحًوسهولةًالقراءة‬,‫ويستلزمًمنًالمصممًاستخدامًالجملًالقصيرة‬.
3ً‫سهولة‬ً‫التجولًوالمالحةًبحيثًيجبًأنًتكونًأداوتًالتنقلًداخلًالموقعًسهلهًوواضحة‬
4ً‫الشكلًالجماليًللصفحة‬
5ً‫تجنب‬‫بطى‬ً‫تحميلًالصفحاتًولهًعدةًأسبابًهماًالصورةًكبيرةًالحجم‬
6ً‫عرضًالصفحةًفيًالمتصفح‬

49. ً‫فكرةًالموضوعًاألساسيةًينبغيًأنًتكونًالفكرةًمرئيةًوواضحة‬
ً‫مكانًاألفكارًاألساسيةًيجبًأنًتكونًفيًرأسًالصفحة‬
‫الشكلًالهيكليًللمحتوىًالموقعًااللكترونيًيجبًأنًيكونًمميزًوواضحًلكيًيتمكنًالزائ‬ً‫رًمن‬
ً‫التعرفًإليه‬
‫التركيبًاللغويًالبسيطًهوًاألفضلًفوضعًفكرةًواحدةًضمنًمجموعةًكلماتًأفضلًمنًتع‬‫ددًاألفكار‬

50. ً‫تجنبًالمصطلحاتًالتقنية‬
ً‫تنقيحًوإزالةًالمعلوماتًالغيرًالضرورية‬
ً‫تحديثًالمحتوىًمنًخاللًاستقبالًالرسائلًمنًزائرينًالموقع‬
‫التنسيقات‬‫يجبًأنًيكونًتصميمًكلًصفحةًثابتةًبمعنىًأنًتظلًالخياراتًالواجهةًوخص‬ً‫ائصها‬
ً‫والمفاتيحًالمرتبطة‬‫بها‬‫ثابتةًالًتتغيرًبتغيرًالصفحات‬

51. ً‫هذهًالمعاييرًالًتحددًعنًطريقًالمتصفحًوإنماًعنًطريق‬‫الـ‬w3cً‫وهيًاختصارًلـ‬
world wide web consortiumً‫بمعنىًاتحادًالشبكةًالعالميةًالواسعة‬

52. ً‫إقامةًوسيلةًاتصالًذاتًطريقًمزدوجًبينًاألستاذًوالمتعلمًالكبير‬.
‫نشرًثقافةًالتعلمًوالتدربًالذاتيينًفيًالمجتمعًوالتيًتمكنًمنًتحسينًوتنميةًقد‬ً‫راتًالمتعلمين‬
‫والمتدربينًبأقلًتكلفةًوبأدنىًمجهود‬
‫رفعًشعورًوإحساسًالطالبًبالمساواةًفيًتوزيعًالفرصًفيًالعمليةًالتعليميةًوكسرًح‬ً‫اجزًالخوف‬
ً‫والقلقًلديهمًوتمكينًالدارسينًمنًالتعبيرًعنًأفكارهمًوالبحثًعنًالحقائقًوالمعلومات‬

53. ‫ًللطريقةًاألفضلًبالنسبةًللمتدرب‬ً‫ا‬‫تسمحًبالتحويرًوفق‬,‫فمنهمًمنًتناسبهًالطري‬ً‫قةًالمرئيةً،ًومنهم‬
‫تناسبهًالطريقةًالمسموعةًأوًالمقروءة،ًوبعضهمًتتناسبًمعهًالطريقةًالعملية‬.
‫تعتبرًوسائلًراحةًحيثًيسهلًالموقعًعليًالمتعلمًأوًالمتدربًاالنضمامًإلىًدوراتًدراس‬ً‫يةًفيًأي‬
‫وقتًوأيًمكان‬
ً‫يتمًاجتيازًدوراتًالتعليمًااللكترونيًفيًعددًمنًالمواقعًالمتوفرةًعلىًشبكة‬‫االنتر‬‫ن‬‫ت‬ً‫بنسبة‬
%50‫أسرعًمنًالدوراتًالعاديةًًبحيثًانهًيمكنًللمتعلمًمنًتخطيًالموادًالتيًيعرفهاًوالع‬ً‫ملًعلى‬
ً‫فهمًالموادًالتيًهوًبحاجةًللتدريبًعليها‬.
ً‫نشرًالتقنيةًفيًالمجتمعًوإعطاءًمفهومًأوسعًللتعليمًالمستمر‬.

54. ً‫تقديمًالخدماتًالمساندةًفيًالعمليةًالتعليمةًمثلًالتسجيلًالمبكر‬‫و‬‫إدارةًالشعبًالدراس‬ً‫يةًوبناء‬
‫الجداولًالدراسيةًوأنظمةًاالختباراتًوالتقييمًوتوجيهًالمتعلمًمنًخاللًالمواقعًالتابعةًلل‬ً‫جامعات‬
ً‫المنتدياتًالفوريةًمثلًمجالسًالنقاشًوغرفًالحوارًتساعدًالمتعلمًمنًطرح‬‫آراءة‬‫الخاصةًو‬ً‫تكوين‬
ً‫معرفةًوآراءًقويةًوسديدةًوذلكًمنًخاللًما‬‫اكتسبة‬ً‫منًمعارفًومهاراتًعنًطريقًتصميمًغرف‬
‫الحورًبالمواقع‬.
‫مراعاةًالفروقًالفرديةًبينًالمتعلمينًوإتاحةًالفرصةًللمتعلمينًللتفاعلًالفوريًمنًخ‬ً‫اللًوسائل‬
ً‫البريدًاإللكترونيًًوالوصولًإلىًالمعلم‬

55. ‫مواقعًالمعاهدًالرسميةًوالجامعاتًومواقعًالتعلمًمنًبعدًومنتدياتًااللكترونيةًللجامعات‬ً‫التعلم‬
‫منًبعد‬.
ً‫رواق‬:ً‫هيًمنصةًعربيةًللتعلمًالمفتوحً،ًتقدمًدوراتًنوعيةًفيًعدةًمجاالتًومنًخبراء‬
ًً‫ومتخصصينًفيًهذاًمجاالتهم‬https://www.rwaq.org/
ً‫إدراك‬:ً‫منصةًللتعليمًالمفتوحًمقدمةًمنًمؤسسةًالملكةًرانيا‬
https://www.edraak.org/
ً‫أكاديميةًالتحرير‬:‫مجهودًرائعًودوراتًفيديوًمجانيةًفيًالعديدًمنًالمجاالتًبشكلًاحت‬ً‫رافي‬
‫وجذاب‬http://tahriracademy.org/
‫أكاديميةًخانًفهوًإنسانًمتعلمًايجابيًأحبًأنًالًيكونًالعلمًمقيدًفيًالجامعاتًوالمراك‬ً‫ز‬
ً‫المتخصصةًفقط‬http://www.khanacademy.org/

56. ‫عالم،ًإسالم‬,(2007),ً‫أثرًاستخدامًالتعليمًالمدمجًفيًتنميةًالتحصيل‬‫و‬‫بعضًمهاراتًت‬ً‫صميم‬
‫المواقعًالتعليميةًلدىًطالبًالمعلمين‬,ً‫مجلةًالبحوثًالنفسيةًوالتربوية‬,‫مج‬22,‫ع‬3,ً‫ص‬238-
287,ً‫كليةًالتربيةًجامعةًالمنوفية‬–‫مصر‬
‫إبراهيم‬,‫إبراهيم‬,‫دليلًإرشاديًلتمكينًالعاملينًفيًتعليمًالكبارًفيًتكنولوجياًال‬ً‫معلومات‬
‫واالتصاالت‬,‫ورقةًعملًمقدمةًإلىًالمؤتمرًالسنويًالتاسعًلمركزًتعليمًالكبار‬,‫جامعةًع‬ً‫ين‬
‫شمس‬,‫مصر‬

61. http://www.studygs.net/arabic/design.htm
http://www.lahaonline.com/articles/view/42436.htm
http://ju6emamc.blogspot.com/2013/03/blog-post_10.html
http://www.studygs.net/arabic/design.htm
http://www.studygs.net/arabic/basics.htm
http://elearning.qou.edu/?page_id=86
http://kenanaonline.com/users/edu-techno/posts/309838