برمجة المواقع التعليمية Django Framework 2024 PDF

‫جــــــامعة دميــــــــاط‬ ‫كليــــة التربية النوعيــــة‬ ‫قــســم الحــاســب اآللــى‬ ‫برجمة املواقع التعليمية‬ ‫(باستخدام ‪) Django Framework‬‬ ‫د‪/‬هند عبد احلميد اللبان‬ ‫مدرس استخدامات الحاسب اآللى في التع...

‫جــــــامعة دميــــــــاط‬ ‫كليــــة التربية النوعيــــة‬ ‫قــســم الحــاســب اآللــى‬ ‫برجمة املواقع التعليمية‬ ‫(باستخدام ‪) Django Framework‬‬ ‫د‪/‬هند عبد احلميد اللبان‬ ‫مدرس استخدامات الحاسب اآللى في التعليم‬ ‫‪ 2024‬م‬  ‫بسم اهلل الرمحن الرحيم‬ ‫الحمد هلل الذي علم اإلنسان ما لم يعلم‪ ،‬وأسبغ عليه نعمة العلم والتعلّم‪ ،‬والصالة والسالم على خير‬ ‫المعلمين سيدنا محمد‪ ،‬وعلى آله وصحبه أجمعين‪.‬‬ ‫يسرني أن أقدم لكم هذا الكتاب المتخصص في برمجة المواقع التعليمية باستخدام إطار العمل‬ ‫‪ ،Django‬والذي يأتي استجابة لحاجة متزايدة لتوظيف التكنولوجيا الحديثة في تطوير العملية‬ ‫التعليمية‪ ،‬وتمكين المعلمين والمطورين من إنشاء منصات تعليمية فعّالة وسهلة االستخدام‪.‬‬ ‫في عصر الثورة الرقمية الذي نعيشه اليوم‪ ،‬أصبحت البرمجة واحدة من أهم األدوات التي تُسهم في‬ ‫صا عندما تُستخدم في تحسين التعليم وجعله أكثر شموالً وتفاعلية‪.‬ويُعد‬‫بناء المستقبل‪ ،‬وخصو ً‬ ‫‪ Django‬أحد أبرز أطر العمل التي تساعد المطورين على بناء مواقع قوية وقابلة للتوسع‪ ،‬بفضل‬ ‫بساطته ومرونته وقوته في معالجة البيانات‪.‬‬ ‫يهدف هذا الكتاب إلى تقديم شرح مبسط وممنهج لكل من يرغب في دخول عالم برمجة المواقع‬ ‫التعليمية‪.‬ستتعرف من خالله على أساسيات إطار العمل‪ ، Django‬وكيفية استخدامه لتطوير مواقع‬ ‫تعليمية تخدم الطالب والمعلمين على ح ٍد سواء‪.‬‬ ‫أسأل هللا أن يكون هذا الكتاب معينًا لكل من يسعى إلثراء التعليم باستخدام التكنولوجيا‪ ،‬ودليالً عمليًا‬ ‫لكل مطور يرغب في اإلبداع في هذا المجال الحيوي‪.‬‬ ‫وهللا ولي التوفيق‪.‬‬ ‫د‪ /‬هند عبد الحميد اللبان‬  ‫الفصل األول‬ ‫مدخل اىل برجمة املواقع التعليمية‬ ‫حماور الفصل‪:‬‬ ‫‪ ‬مقدمة عن تطوير الويب ‪Web Development‬‬ ‫‪ ‬تطوير مواقع الويب أو املواقع االلكرتونية‪Websites Development‬‬ ‫‪ ‬برجمة املواقع التعليمية‬  ‫الفصل األول‪ :‬مدخل اىل برجمة املواقع التعليمية‬ ‫ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬ ‫مقدمة عن تطوير الويب ‪Web Development‬‬ ‫تطوير الويب ‪ Web Development‬هو أحد أشهر مجاالت العمل الحر حاليًا‪ ،‬فهو واح ٌد من بين أكثر المجاالت‬ ‫نظرا لكونه يتعلّق بإنشاء وصناعة المواقع اإللكترونية وتطبيقات الويب بصور ٍة أساسيةٍ‪،‬‬ ‫طلبًا في السوق التقنية‪ً ،‬‬ ‫حيث تحتاج إليه جميع المؤسسات والشركات واألفراد العاملون في هذا المجال‪.‬‬ ‫ونظرا لزيادة اعتماد العالم على اإلنترنت إلدارة وإتمام األعمال قد يحتاج الجميع إلى مواقع وتطبيقات وخدمات‬ ‫ً‬ ‫يوم منذ اختراع اإلنترنت‬ ‫إلكترونية‪ ،‬هذا باإلضافة إلى التحول الرقمي للمؤسسات والحكومات الذي يزداد يو ًما بعد ٍ‬ ‫وظهور الويب‪ ،‬حيث زاد بصور ٍة ملحوظ ٍة في اآلونة األخيرة بما تحْ مله من أحداث و ُمستجدات‪.‬‬ ‫سيساعدك تعلم تطوير الويب على إنشاء المواقع اإللكترونية وتطبيقات الويب سوا ًء لك أو لعمالئك المحتملين‪ ،‬وهو‬ ‫سن من خبرتك أو سيجلب لك مصدر دخ ٍل إضافيٍ‪ ،‬وقد يصبح مصدر دخلك األساسي‪.‬‬ ‫ما سيُح ّ‬ ‫ما هو جمال تطوير الويب ‪ Web Development‬؟‬ ‫تطوير الويب هو المجال المختص بإنشاء وتطوير المواقع اإللكترونية وتطبيقات الويب التي تهدف إلى توفير ميزة‬ ‫أو خدمة معينة عبر اإلنترنت‪.‬كلمة تطوير الويب تتكون من كلمتين‪ ،‬وهما‪:‬‬ ‫‪ ‬الويب ‪ : Web‬يشير إلى مواقع اإلنترنت ‪ Websites‬أو تطبيقات الويب ‪.Web Applications‬‬ ‫‪ ‬تطوير ‪ : Development‬يشير إلى بناء الموقع أو التطبيق من الصفر‪.‬‬ ‫توجد عدة مجاالت فرعية لمجال تطوير الويب من أبرزها‪:‬‬ ‫‪.1‬تطوير الواجهات األمامية ‪Frontend Development‬‬ ‫‪.2‬تطوير الواجهات الخلفية ‪Backend Development‬‬ ‫‪.3‬المطور الشامل ‪Full-Stack‬‬ ‫]‪[4‬‬  ‫الفصل األول‪ :‬مدخل اىل برجمة املواقع التعليمية‬ ‫ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬ ‫أوال‪ :‬تطوير الواجهة األمامية ‪Frontend Development‬‬ ‫يُطلق على الجزء من موقع الويب الذي يتفاعل فيه المستخدم مباشرة ً اسم الواجهة األمامية ‪. front end‬ويُطلق عليه‬ ‫ضا اسم "جانب العميل ‪ "client side‬للموقع‪.‬يختص بالمظهر الجمالي والهيكلة األمامية للمواقع والتطبيقات‬ ‫أي ً‬ ‫اإللكترونية‪.‬‬ ‫أشهر التقنيات المستخدمة في برمجة الواجهة األمامية للمواقع اإللكترونية ‪Frontend Development‬‬ ‫‪ :HTML ‬هي اختصار الى ‪.Hyper Text Markup Language‬يتم استخدامها في إنشاء بنية موقع الويب‪.‬‬ ‫تستخدم لغة الترميز ‪ HTML‬في تصميم صفحات الويب أى بناء هيكل الموقع بالكامل‪.‬هي لغة هيكلة أو توصيف‬ ‫ِبنية صفحات اإلنترنت‪ ،‬إذ تفهمها جميع متصفحات الويب؛ ويُحدِد المطورين في هذه الهيكلة األجزاء المختلفة من‬ ‫َعرض في نهاية األمر‬ ‫الصفحات اإللكترونية عبْر كتابة رموز بطريقة معينة لكي تفهمها المتصفحات‪ ،‬وبالتالي فهي ت ِ‬ ‫النصوص والعناصر بهيكلية وطريقة ظاهرة في الواجهة األمامية يراها المستخدم‪.‬‬ ‫‪ :CSS ‬هي اختصار الى ‪ Cascading Style Sheets.‬وهي لغة تستخدم في تصميم الموقع من خالل تنفيذ‬ ‫التنسيقات الالزمة لعرض صفحات الموقع‪.‬هي لغة تنسيق تُستع َمل لتنسيق هيكلة وعناصر ‪ HTML‬لتسمح للمطورين‬ ‫بتغيير تنسيق العناصر التي تُعَرض للمستخدمين مثل األلوان والحدود واألشكال والخلفيات والرسوميات والصور‪،‬‬ ‫بمعنى أنه من دون ‪ CSS‬ستحصل على صفحا ٍ‬ ‫ت عديمة التنسيق واأللوان‪ ،‬أي أن ‪ CSS‬تتحكم في كل شيءٍ مرئي ٍ‪.‬‬ ‫‪ :Bootstrap ‬عبارة عن مجموعة أدوات مجانية ومفتوحة المصدر إلنشاء مواقع ويب وتطبيقات ويب سريعة‬ ‫االستجابة‪.‬وهو إطار عمل ‪ CSS‬األكثر شهرة لتطوير مواقع ويب سريعة االستجابة وموجهة لألجهزة المحمولة‪.‬في‬ ‫الوقت الحاضر‪ ،‬أصبحت مواقع الويب مثالية لجميع المتصفحات (‪ IE‬و‪ Firefox‬و‪ )Chrome‬ولجميع أحجام‬ ‫الشاشات (أجهزة سطح المكتب واألجهزة اللوحية والهواتف المحمولة)‪.‬‬ ‫‪ :JavaScript ‬هي لغة برمجة تستخدم لتوفير لجعل الموقع الويب الخاص بنا تفاعلى (ديناميكى)‪.‬فهي تحتوي‬ ‫تضمن للخوارزميات والمتغيرات وهياكل البيانات وإجراء االتصاالت وقواعد البيانات‪،‬‬ ‫على المنطق البرمجي ال ُم ِ‬ ‫ُصعب العمل‪،‬‬ ‫وتدعمها جميع متصفحات الويب‪ ،‬ويمكن تطوير مواقع إنترنت ال تستعمل جافاسكربت‪ ،‬إال أن هذا سي ِ‬ ‫كما سيحد من مميزات وخصائص الموقع بصورةٍ كبيرةٍ‪.‬‬ ‫توجد أُطر العمل متوفرة للغة جافاسكربت وهى ‪ React‬و ‪ Angular‬و ‪ Vue.js‬و ‪ ،jQuery‬هناك أي ً‬ ‫ضا مكتباتٌ‬ ‫أخرى تستعمل تنسيق جافاسكربت ولكن بمميزا ٍ‬ ‫ت وطريقة كتاب ٍة مختلف ٍة مثل ‪.TypeScript‬‬ ‫]‪[5‬‬  ‫الفصل األول‪ :‬مدخل اىل برجمة املواقع التعليمية‬ ‫ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬ ‫ثانيا‪ :‬تطوير الواجهات الخلفية ‪Backend Development‬‬ ‫الواجهة الخلفية هي جانب الخادم ‪ server side‬لموقع الويب‪.‬وهي جزء من موقع الويب ال يمكن للمستخدمين رؤيته‬ ‫والتفاعل معه‪.‬وهي جزء من البرنامج ال يتصل مباشرة بالمستخدمين‪.‬وهي تستخدم لتخزين البيانات وترتيبها‪.‬‬ ‫أشهر التقنيات المستخدمة في برمجة الواجهة الخلفية للمواقع اإللكترونية ‪Backend Development‬‬ ‫أوال ‪ :‬أشهر لغات البرمجة وأطر العمل الخاصة بها‬ ‫‪ :PHP ‬هي لغة برمجة يتم تنفيذها لدى الخادم ‪ server-side scripting language‬مصممة خصي ً‬ ‫صا لتطوير‬ ‫الويب‪.‬إطار العمل ‪ ، Laravel : Framework‬نظام إدارة المحتوى ‪WordPress : CMS‬‬ ‫‪ :Java ‬تعد لغة ‪ Java‬واحدة من أكثر لغات البرمجة شيو ً‬ ‫عا واستخدا ًما‪.‬وهي قابلة للتطوير بدرجة كبيرة‪.‬إطار‬ ‫العمل ‪Spring, Hibernate : Framework‬‬ ‫‪ :Python ‬بايثون هي لغة برمجة تمكنك من العمل بسرعة ودمج األنظمة بكفاءة أكبر‪.‬‬ ‫إطار العمل ‪. Django, Flask :Framework‬إدارة الحزمة ‪Python PIP :Package Manager‬‬ ‫‪ :Node.js ‬هي بيئة تشغيل مفتوحة المصدر ومتعددة األنظمة األساسية لتشغيل كود ‪ JavaScript‬خارج‬ ‫المتصفح‪.‬إطار العمل ‪Express : Framework‬‬ ‫ثانيا ‪ :‬قواعد البيانات ‪: Databases‬‬ ‫في تكنولوجيا الويب‪ ،‬ت ُ َعد قاعدة البيانات مجموعة منظمة من البيانات يتم تخزينها إلكترونيًا ويمكن الوصول إليها عبر‬ ‫تطبيق ويب‪.‬وهي تعمل كمكون خلفي حيث يتم تخزين البيانات وإدارتها واسترجاعها‪.‬وهي تمكن تطبيقات الويب من‬ ‫التعامل مع المحتوى الديناميكي وبيانات المستخدم والمعامالت والمزيد من خالل توفير قدرات تخزين واسترجاع‬ ‫ومعالجة فعالة‪.‬تُستخدم أنظمة إدارة قواعد البيانات ‪ Database management systems‬للتفاعل مع قاعدة‬ ‫البيانات‪ ،‬مما يضمن سالمة البيانات وأمانها وأدائها‪.‬‬ ‫‪.1‬قواعد البيانات عالئقية ‪:Relation Database‬‬ ‫تخزن قاعدة البيانات العالئقية البيانات في جداول‪ ،‬تشبه جداول البيانات‪ ،‬حيث يحتوي كل جدول على صفوف وأعمدة‪.‬‬ ‫تحتوي الصفوف على سجالت فردية‪ ،‬وتحدد األعمدة سمات البيانات‪.‬يمكن ربط الجداول ببعضها البعض من خالل‬ ‫مفاتيح خاصة‪ ،‬مما يسمح بربط البيانات ذات الصلة‪.‬‬ ‫]‪[6‬‬  ‫الفصل األول‪ :‬مدخل اىل برجمة املواقع التعليمية‬ ‫ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬ ‫أشهر أنظمة إدارة قواعد البيانات العالئقية ‪: Relational Database‬‬ ‫‪ :Postgre SQL ‬عبارة عن قاعدة بيانات عالئقية قوية مفتوحة المصدر تدعم ميزات ‪ SQL‬المتقدمة واالستعالمات‬ ‫المعقدة‪.‬وهي تتعامل مع البيانات المنظمة وتضمن االمتثال لمعايير ‪ ،ACID‬وهي معروفة بموثوقيتها وقابليتها‬ ‫للتوسع‪.‬‬ ‫‪ :MariaDB ‬هي قاعدة بيانات عالئقية مفتوحة المصدر تطورت من ‪ ،MySQL‬وتوفر أداء ً وأمانا ً وميزات‬ ‫محسنة‪.‬وهي تدعم استعالمات ‪ ،SQL‬وتتوافق مع ‪ ،ACID‬ومتوافقة بشكل كبير مع ‪.MySQL‬‬ ‫‪ :MySQL ‬هو نظام إدارة قواعد بيانات عالئقية مفتوح المصدر يستخدم ‪ SQL‬إلدارة البيانات المنظمة‪.‬وهو‬ ‫معروف بموثوقيته وسهولة استخدامه وأدائه‪ ،‬ويُستخدم على نطاق واسع في تطبيقات الويب‪.‬‬ ‫‪.2‬قواعد البيانات غير عالئقية ‪:)NoSQL database ( non-relational Database‬‬ ‫تخزن قواعد بيانات ‪ NoSQL‬البيانات بتنسيق مرن غير جدولي‪ ،‬على عكس قواعد البيانات العالئقية التقليدية‪.‬فبدالً‬ ‫من استخدام الجداول ذات الصفوف واألعمدة‪ ،‬قد تستخدم قواعد بيانات ‪ NoSQL‬المستندات ‪ documents‬أو أزواج‬ ‫قيمة المفتاح ‪ key-value pairs‬أو األعمدة العريضة ‪ wide-columns‬أو الرسوم البيانية ‪ graphs‬لتخزين‬ ‫البيانات‪.‬وهذا يسمح لها بالتعامل مع كميات كبيرة من البيانات غير المنظمة أو شبه المنظمة بكفاءة‪.‬وهي مصممة‬ ‫للتوسع بسهولة وإدارة تطبيقات البيانات الضخمة‪.‬‬ ‫أشهر أنظمة إدارة قواعد البيانات غير عالئقية ‪:NoSql Database‬‬ ‫‪ :Mongodb ‬هي قاعدة بيانات ‪ NoSQL‬تخزن البيانات في مستندات تشبه ‪.JSON‬وهي تتعامل مع البيانات‬ ‫غير المنظمة‪ ،‬وتدعم االستعالمات القوية‪ ،‬وتتوسع بسهولة عبر الخوادم‪ ،‬مما يجعلها شائعة للتطبيقات المرنة القابلة‬ ‫للتوسع‪.‬‬ ‫‪ Apache Cassandra :Cassandra ‬هي قاعدة بيانات ‪ NoSQL‬مفتوحة المصدر تُستخدم في التعامل مع‬ ‫البيانات الضخمة‪.‬تتمتع بالقدرة على التعامل مع البيانات المهيكلة وشبه المهيكلة وغير المهيكلة‪.‬‬ ‫‪ :Redis ‬هي قاعدة بيانات ‪ NoSQL‬مخزنة في الذاكرة ومعروفة بسرعتها‪.‬وهي تدعم هياكل بيانات مختلفة مثل‬ ‫البيانات النصية ‪ strings‬و‪ hashes‬والقوائم ‪ ، lists‬مما يجعلها مثالية للتخزين المؤقت والتحليالت في الوقت الفعلي‬ ‫والمراسلة‪.‬‬ ‫ثالثا‪ :‬المطور الشامل ‪Full-Stack‬‬ ‫ص آخر من تخصصات تطوير‬ ‫ص ٌ‬ ‫يشمل تطوير الواجهتين األمامية والخلفية معًا ‪ ،Full-Stack Developer‬وهو ت َخ ُّ‬ ‫الو يب‪ ،‬يجمع بين تطوير الواجهتين األمامية والخلفية‪ ،‬إال أنه يزيد عليهما بإمتالك الشخص لبعض الخبرة في إدارة‬ ‫العمليات ‪ ،DevOps‬حيث سيُطلب منه استالم كامل المشروع من األلف إلى الياء بما في ذلك النشر ‪.Deployment‬‬ ‫]‪[7‬‬  ‫الفصل األول‪ :‬مدخل اىل برجمة املواقع التعليمية‬ ‫ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬ ‫تطوير مواقع الويب أو املواقع االلكرتونية ‪Websites Development‬‬ ‫تطوير مواقع الويب يعني إنشاء المواقع وبرمجتها وصيانتها‪.‬والبرمجة تحديدا هي كواليس تشغيلها حيث إن كل‬ ‫موقع ظاهر لك ما هو إال سلسلة من األكواد البرمجية التي ال تكون وال تراها وإنما ترى آثارها وضمانها لتشغيل‬ ‫الموقع بأداء سريع يحقق تجربة جيدة للمستخدم‪.‬‬ ‫عند تطوير المواقع االلكترونية يقوم المبرمج من خالل لغات البرمجة بكتابة تعليمات برمجية تؤدي وظائف معينة!‬ ‫وعموما ينقسم تطوير مواقع الويب إلى الواجهة األمامية (ما يراه العمالء) والواجهة الخلفية (ما يراه مطور الويب‬ ‫ويضع فيه تعليماته البرمجية لتشغيل الموقع)‪.‬‬ ‫الموقع االلكتروني ‪Website‬‬ ‫عبارة عن مجموعة من صفحات الويب ‪ Web Pages‬ذات الصلة التي تحتوي على صور ‪ images‬ونصوص ‪Texts‬‬ ‫وصوت ‪ Audio‬وفيديو‪ Videos‬و روابط ‪ ،Links‬ويمكن أن يتكون من صفحة واحدة‪ ،‬أو عدة صفحات مرتبطة‬ ‫ببعضها البعض من خالل الروابط التشعبية ‪.hyperlinks‬توفر محتوى مرئيًا ون ً‬ ‫صا ويمكن تطويرها وصيانتها بواسطة‬ ‫فرد أو شركة‪ ،‬ويتم إستضافة الموقع االلكتروني على خادم واحد أو على خوادم متعدد‬ ‫يوجد أمثلة كثيرة من المواقع االلكترونية مثل مواقع التدوين ‪،‬المواقع التجارية والمواقع الشخصية ‪ ،‬المواقع التعليمية‪.‬‬ ‫يشمل تطوير المواقع ‪ Website Development‬العديد من الجوانب وهى‪:‬‬ ‫‪ ‬تصميم الموقع ‪web design‬‬ ‫‪ ‬نشر الموقع ‪web publishing‬‬ ‫‪ ‬برمجة الموقع ‪web programming‬‬ ‫‪ ‬إدارة قواعد البيانات ‪database management‬‬ ‫أنواع المواقع اإللكترونية‪:‬‬ ‫أوال ً‪ :‬مواقع ساكنة (ثابتة) ‪Static Web Pages‬‬ ‫تتضح من أسمها أنها مواقع ثابتة المحتوى دائ ًما‪ ،‬وال يُمكن تغيير محتواها أو التعديل فيه أو إجراء أي تعديالت سواء‬ ‫في المحتوى أو تصميم الصفحات أو إضافة أي خدمات للموقع إال عن طريق مبرمج ‪ ،‬وال يمكن لصاحب أو مالك‬ ‫الموقع القيام بذلك اال اذا كان مبرمج ويستطيع التعامل مع االكواد‪ ،‬وتحتوى على صفحات ‪ HTML‬منفصلة‪ ،‬بمعنى‬ ‫أنه إذا أردت إضافة أي تعديل على موقعك الثابت تضطر إلى تغيير كل صفحة من صفحاته على حدة‪ ،‬كما أنها ال‬ ‫تحتوي على قاعدة بيانات ‪ Database‬أو ملفات خارجية يمكن الرجوع إليها أثناء التعديل‪ ،‬وبالتالي فإنه في حالة‬ ‫الحاجة إلى إجراء أي تعديل فلم تستطيع ذلك إال من خالل المبرمج الذي قام بتصميم الموقع‪.‬‬ ‫]‪[8‬‬  ‫الفصل األول‪ :‬مدخل اىل برجمة املواقع التعليمية‬ ‫ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬ ‫مميزات الصفحات الثابتة ‪- :‬‬ ‫‪ ‬بسيطة للغاية بسبب محتواها الثابت دائما‪.‬‬ ‫‪ ‬سريعة التطوير ولكن من قِبل المبرمج فقط‪ ،‬حيث أنها ال تتطلب إلى إجراءات كثيرة أو معقدة أثناء تطويرها‪.‬‬ ‫كثيرا‪.‬‬ ‫ً‬ ‫‪ ‬رخيصة التطوير ألنها ال تتطلب إمكانيات عالية‪ ،‬وال تحتاج إلى العمل عليها‬ ‫‪ ‬رسوم االستضافة قليلة ألنها متواضعة الموارد‪.‬‬ ‫‪ ‬سريعة األرشفة والظهور في محركات البحث ألن محتواها ثابت وغير متغير‪ ،‬وبالتالي يمكن لمحركات البحث‬ ‫الوصول إليها بسرعة وسهولة‪.‬‬ ‫سلبيات الصفحات الثابتة ‪- :‬‬ ‫‪ ‬ال تستطيع تطويرها بنفسك‪ ،‬ويتم ذلك فقط من خالل المبرمج‪ ،‬حيث يمكنك إرسال التحديثات أو التعديالت‬ ‫واإلضافات التي تريدها ويتولى مصمم الموقع القيام بذلك‪.‬‬ ‫‪ ‬تتطلب الخبرة الكافية في التطوير وتحديث المواقع‪.‬‬ ‫‪ ‬تجعل موقعك غير جذاب أو غير ممتع وممل بعض الشيء ألن محتواه ثابت‪ ،‬وبذلك يكون المستخدم قد اطلع‬ ‫على كافة تفاصيل ومحتويات الموقع الخاص بك من أول زيارة سواء كانت صور أو فيديوهات أو أي شيء أخر‪،‬‬ ‫وال يكن لديه الشغف لزيارته مرة أخرى‪.‬‬ ‫ثانيا ً‪ :‬مواقع تفاعلية ‪:Dynamic Web Pages‬‬ ‫هي مواقع سهلة ومرنة االستخدام وتفاعلية ومتنوعة المحتوى‪ ،‬وقابلة للتجديد بكل سهولة من قبل صاحب أو مالك‬ ‫الموقع لذلك تسمى بالمواقع الديناميكية ‪ ،Dynamic‬حيث يمكنك بنفسك وبكل سهولة إجراء أي تحديثات أو تعديالت‬ ‫أو إضافة وإدخال خدمات أو خصائص ومزايا جديدة على موقعك‪ ،‬وبالتالي تمنحك المواقع الديناميكية خاصية تجديد‬ ‫محتواك بنفسك دون الحاجة أو اللجوء إلى المبرمج‪ ،‬فيمكنك نشر وتجديد األخبار أو األحداث أو الصور والفيديوهات‬ ‫وتحديث محتوى صفحات موقعك بالكامل من خالل لوحة التحكم الخاصة بالموقع (‪ ،)Admin area‬والتي تستطيع‬ ‫بواسطتها تحديث قواعد البيانات ‪ databases‬الخاصة بك بمرونة وسهولة تامة‪ ،‬فيستطيع صاحب الموقع أو المسؤول‬ ‫عن إدارته بتحديث بيانات الموقع من خالل لوحة التحكم المؤمنة دائ ًما بكلمة سر ال يعرفها سوى مسؤول إدارة الموقع‪.‬‬ ‫ولن يقتصر عمل المواقع الديناميكية فقط على إجراء التحديثات أو تعديل المحتوى‪ ،‬ولكن بإمكانها التحكم في نظم‬ ‫إدارة الموقع‪ ،‬ونظم التجارة اإللكترونية‪ ،‬والتحكم في سياسات اإلعالنات المعروضة على الموقع‪ ،‬مع القدرة على‬ ‫التحكم بصالحيات المستخدم؛ سواء بما يعرضه المستخدم إلنشاء محتوى أو إضافة معلومات إلى الموقع‪.‬‬ ‫]‪[9‬‬  ‫الفصل األول‪ :‬مدخل اىل برجمة املواقع التعليمية‬ ‫ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬ ‫مميزات المواقع الديناميكية ‪- :‬‬ ‫‪ ‬سهلة التحديث وإدخال تعديالت وإضافات جديدة على المحتوى من قبل صاحب أو مالك الموقع أو المسؤول عن‬ ‫إدارته‪.‬‬ ‫‪ ‬الحرية الكاملة في التحديث وإجراء التعديالت؛ كالتحكم باأللوان أو إضافة الصور والفيديوهات‪ ،‬وإدخال مزايا‬ ‫وخصائص جديدة للموقع‪.‬‬ ‫‪ ‬إدارة قواعد البيانات الخاصة بالموقع بسهولة وكفاءة عالية دون الحاجة إلى الرجوع لمطور الويب‪.‬‬ ‫‪ ‬مرنة وسهلة في التحديث‪.‬‬ ‫‪ ‬تمنحك محتوى جديد ومحدث باستمرار يمكنك من جذب الزوار إلى موقعك‪ ،‬ويساعدك ذلك على الظهور في‬ ‫محركات البحث بسهولة‪ ،‬ألن محركات البحث تفضل المحتوى المطور والمميز وتبحث عنه باستمرار ألرشفته‬ ‫وتصديره في أولى نتائج محركات البحث‪.‬‬ ‫‪ ‬تمكن المستخدمين بالتواصل والتعاون عن بُعد‪.‬‬ ‫‪ ‬تتمتع بدرجة عالية من الحماية واألمان مقارنة بالمواقع الثابتة‪.‬‬ ‫سلبيات المواقع الديناميكية ‪-:‬‬ ‫‪ ‬تحتاج إلى تكاليف عالية للتطوير والتحديث المستمر‪.‬‬ ‫‪ ‬تكاليف االستضافة عالية مقارنة بالمواقع الثابتة‪.‬‬ ‫‪ ‬تتطلب المزيد من الجهد واإلجراءات الخاصة من أجل األرشفة والظهور في محركات البحث‪ ،‬كالدقة في كتابة‬ ‫وعرض المحتوى وفق شروط ومتطلبات لتحسين موقعك في محركات البحث ‪.SEO‬‬ ‫يستخدم هذا النوع من المواقع مع المحتوى الذي يتطلب تحديث على مدار الساعة؛ مثل المواقع اإلخبارية‪ ،‬ومواقع‬ ‫ضا مع المواقع التجارية‪،‬‬ ‫شركات المبيعات التي تتطلب عرض ما لديها من منتجات جديدة كل لحظة‪ ،‬وتستخدم أي ً‬ ‫المواقع التعليمية‪.‬‬ ‫أيضا تنقسم صفحات الويب التفاعلية وفقا لمكان تنفيذ كود الصفحة‪:‬‬ ‫‪ ‬صفحات تنفذ لدى جهاز العميل ‪ : Client‬هي صفحات يقوم المستخدم بطلبها من الخادم ‪ server‬الذى يقوم‬ ‫بالبحث عنها باستخدام أحد برامج خدمة الويب ‪ web server‬وإرسالها بشكلها الكودى الى جهاز العميل ‪ client‬وتنفذ‬ ‫لديه ويكون امتداد الصفحة ‪HTML‬‬ ‫‪ ‬صفحات تنفذ لدى الجهاز الخادم ‪ : Server‬هي صفحات تفاعلية يقوم المستخدم بطلبها من الجهاز الخادم الذى‬ ‫يقوم بالبحث عنها باستخدام أحد برامج خادمات الويب وتنفيذها لديه وإرسال النتيجة الى جهاز العميل وهذه الصفحات‬ ‫ال تكون بامتداد لغة ‪ HTML‬ولكن تكون بامتداد لغة البرمجة وليكن مثال ‪.php‬أو ‪.ASP‬‬ ‫]‪[10‬‬  ‫الفصل األول‪ :‬مدخل اىل برجمة املواقع التعليمية‬ ‫ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬ ‫‪ ‬العميل ‪Client‬‬ ‫هو جهاز مستخدم الويب مثل جهاز الكمبيوتر أو الهاتف الذى تتوفر فيه خدمة االتصال باالنترنت باستخدام برامج‬ ‫تصفح الويب ‪ Browsers‬مثل ‪Firefox ، chrome‬‬ ‫‪ ‬الخادم ‪server‬‬ ‫عبارة عن جهاز حاسوب بمواصفات خاصة عالية قادر على العمل لفترات طويلة جدا دون توقف ومتصل باالنترنت‬ ‫بسرعة كبيرة وكل ذلك حسب الوظيفة المحددة له‪.‬‬ ‫مكونات الخادم‪ :‬هي المكونات الرئيسية لجهاز الحاسوب والتي هي‪:‬‬ ‫‪ ‬المكونات المادية ‪ : Hardware‬والتي تشمل األجزاء الملموسة للجهاز مثل المعالج والرام واللوحة األم والقرص‬ ‫الصلب وبقية القطع التي يمكن لمسها‪.‬‬ ‫‪ ‬المكونات البرمجية ‪ :Software‬وهو نظام التشغيل ‪ Operating System‬بنوعيه الويندوز ‪Windows‬‬ ‫واللينوكس ‪ Linux‬وما يشمل بداخله‪.‬‬ ‫أنواع الخوادم ‪: Server‬‬ ‫أوال‪ :‬أنواع الخوادم ‪ servers‬حسب الوظيفة‪:‬‬ ‫يمكن تصنيف السيرفرات حسب فوائد ومهام السيرفر التي صمم ألجلها إلى‪:‬‬ ‫‪ -1‬خادم الويب ‪ :Web server‬وهو الخادم المسؤول عن احتواء المواقع اإللكترونية وعرضها عند الطلب من‬ ‫خالل بروتوكول ‪ http‬أو بروتوكول ‪https‬‬ ‫‪ -2‬خادم نظام أسماء النطاقات ‪ :DNS server‬وهو المسؤول عن ترجمة عنوان ‪ IP‬للمواقع اإللكترونية إلى اسم‬ ‫قابل للقراءة والحفظ عند الطلب‪.‬‬ ‫‪ -3‬خادم االيميل ‪ :Email server‬وهو الخادم المسؤول عن استقبال وارسال االيميالت حسب البروتوكوالت‬ ‫المخصصة لذلك مثل ‪ POP3‬وغيرها‪.‬‬ ‫صمم بناء‬ ‫‪ -4‬خادم التطبيقات ‪ :App server‬وهو الخادم المخصص لتشغيل تطبيقات معينة دون غيرها أي أنه ُ‬ ‫على متطلبات تلك التطبيقات‪.‬‬ ‫ثانيا‪ :‬أنواع الخوادم حسب نظام التشغيل‪:‬‬ ‫‪ ‬خادم لينوكس ‪ :Linux server‬وهي تلك التي تعمل بنظام التشغيل لينوكس ‪ Linux‬مثل ‪ Debian‬و ‪CentOS‬‬ ‫وتعد األكثر شيوعا بسبب مجانية نظام التشغيل وألنه مفتوح المصدر‪.‬‬ ‫‪ ‬خوادم ويندوز ‪ :Windows Servers‬هي الخوادم المنصب عليها نظام التشغيل ويندوز مثل ‪windows‬‬ ‫‪ server 2012‬وغيره وتعد أقل شيوعا بسبب أن نظام التشغيل ‪ Windows‬غير مجاني‪.‬‬ ‫]‪[11‬‬  ‫الفصل األول‪ :‬مدخل اىل برجمة املواقع التعليمية‬ ‫ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬ ‫ثالثا‪ :‬أنواع خوادم استضافة المواقع اإللكترونية‬ ‫وهي ‪ 3‬أنواع وذلك حسب الموارد مثل المعالج والرام والباندويث وغيرهما وهي‪:‬‬ ‫‪ ‬خادم مشترك ‪ :Shared server‬وهو المخصص الستضافة المواقع التي تكون على استضافة مشتركة ولذلك‬ ‫سمي بذلك‪.‬وينصح بها االستضافة المشتركة للمواقع الجديدة والصغيرة إلى المتوسطة‪.‬ومن أفضل شركات‬ ‫االستضافة‪.InterServer ، HostGator ، A2hosting :‬‬ ‫‪ ‬خادم افتراضي خاص ‪ :Virtual Private Server – VPS‬وهو جزء بموارد معينة من سيرفر كامل ويعمل‬ ‫دون التأثير في بقية السيرفرات االفتراضية الموجودة ضمن الخادم الكامل‪.‬ويستخدم للمواقع المتوسطة إلى الكبيرة‪.‬‬ ‫‪ ‬خادم متكامل أو كامل مخصص ‪ :Dedicated Server‬ونعني بذلك امتالك خادم بكامل موارده دون أن يتم‬ ‫استخدام أي من موارده من قبل أصحاب مواقع آخرين فيكون لك وحدك‪.‬ويستخدم الستضافة المواقع الضخمة‪.‬‬ ‫خادم الويب ‪: Web Server‬‬ ‫خادم الويب هو جهاز كمبيوتر مخصص لتقديم صفحات الويب عبر اإلنترنت‪.‬وظيفته األساسية هي استقبال طلبات‬ ‫المستخدمين من خالل متصفح الويب ‪ ،web browser‬وإرسال الملفات المطلوبة بما فيها صفحات ‪ ،HTML‬وملفات‬ ‫‪ ،CSS‬والصور‪ ،‬والبيانات األخرى الضرورية لعرض صفحة ويب‪.‬‬ ‫هو جهاز كمبيوتر يستخدم الستضافة وتقديم محتوى الويب للمستخدمين عبر اإلنترنت أو عبر الشبكة الداخلية‪.‬يقوم‬ ‫خادم الويب بتقديم خدماته عبر بروتوكول ‪ HTTP‬أو ‪ HTTPS‬حيث يقوم بمعالجة طلبات ‪[ HTTP‬أو ‪]HTTPS‬‬ ‫الواردة من العمالء [مثل المتصفحات‪ ،‬والتطبيقات األخرى]‪ ،‬وإرسال االستجابات المناسبة التي قد تتضمن صفحات‬ ‫‪ ،HTML‬ملفات ‪ ،CSS‬صور‪ ،‬نصوص ‪ ،JavaScript‬أو أي موارد أخرى مطلوبة‪.‬‬ ‫خوادم الويب يمكن أن تعالج الطلبات باستعمال بروتوكول ‪ HTTP‬أو بروتوكول ‪ HTTPS‬األكثر أمانًا والذي يضيف‬ ‫طبقة من التشفير لحماية البيانات المتنقلة بين الخادم والمستخدم الذي قام بطلب صفحة الويب‪.‬‬ ‫ضا لمواقع الويب أن تكون ديناميكية وتفاعلية عن طريق التكامل مع لغات البرمجة مثل ‪PHP‬‬ ‫خوادم الويب تتيح أي ً‬ ‫‪ ،Java،Python ،‬وقواعد البيانات مثل ‪ ،MySQL‬وأنظمة إدارة المحتوى مثل ‪.WordPress‬‬ ‫]‪[12‬‬  ‫الفصل األول‪ :‬مدخل اىل برجمة املواقع التعليمية‬ ‫ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬ ‫وظائف خادم الويب‪:‬‬ ‫‪ ‬استقبال طلبات ‪ :HTTP‬يستلم طلبات ‪ HTTP‬الواردة من العمالء بما في ذلك الطلبات للحصول على صفحات‬ ‫الويب أو البيانات‪.‬‬ ‫‪ ‬معالجة الطلبات‪ :‬يُفسر وبعالج الطلبات‪.‬قد يشمل ذلك قراءة الملفات الثابتة من نظام الملفات أو تنفيذ برامج نصية‬ ‫على الخادم‪.‬‬ ‫‪ ‬تقديم االستجابات‪ :‬يُنشئ الردود التي يتم إرسالها للعمالء‪ ،‬مثل صفحة ‪ HTML‬أو بيانات ‪ JSON‬أو رسائل الحالة‬ ‫(مثل ‪.)Not Found 404‬‬ ‫‪ ‬التعامل مع بروتوكوالت األمان‪ :‬يُدير االتصال اآلمن باستخدام )‪ HTTPS (HTTP Secure‬عبر بروتوكول‬ ‫‪ SSL/TLS‬لتشفير البيانات المتبادلة بين العميل والخادم‪.‬‬ ‫‪ ‬التسجيل والتشخيص‪ :‬يُسجل نشاطات الطلبات وتقدم معلومات التشخيص للمسؤولين عن النظام‪.‬‬ ‫كيفية عمل خادم الويب‬ ‫عندما يطلب المستخدم طلب لزيارة موقع ويب من خادم الويب ‪ web server‬يحدث التالي‪:‬‬ ‫‪.1‬يرسل المتصفح طلبا ً‪ :‬عندما يدخل المستخدم عنوان موقع ويب في المتصفح‪،‬‬ ‫‪ ‬يتصل المتصفح مع خادم أسماء النطاقات ‪ DNS Server‬لمعرفة عنوان ‪ IP‬المرتبط بذلك النطاق من خالل‬ ‫شبكة االنترنت لهذا من الضروري أن تكون متصال باالنترنت وإال فلن تستطيع زيارة المواقع اإللكترونية‪.‬‬ ‫‪ ‬يرسل خادم أسماء النطاقات عنوان ‪ IP‬المعروف للتو إلى المتصفح‪.‬‬ ‫‪ ‬يقوم المتصفح بإنشاء طلب ‪ HTTP‬وإرساله إلى عنوان ‪ IP‬المحدد للموقع‪.‬‬ ‫‪.2‬يستقبل الخادم الطلب‪ :‬يتلقى الخادم الطلب ويحلله ليحدد الموارد المطلوبة مثل ملفات ‪ ،HTML‬الصور‪ ،‬أو ملفات‬ ‫الفيديو‪.‬‬ ‫‪.3‬استجابة الخادم بالموارد‪ :‬يجمع الخادم الردود المناسبة‪ ،‬ثم يرسلها مرة أخرى إلى المتصفح كحزمة بيانات‪.‬‬ ‫‪.4‬عرض الصفحة‪ :‬يستقبل المتصفح البيانات ويعرضها كموقع ويب يمكن للمستخدم التفاعل معه‪.‬‬ ‫بالطبع تلك الخطوات تتم بسرعة كبيرة كما نالحظ عند زياراتنا للمواقع وتعتمد السرعة بشكل كبير على مواصفات‬ ‫وأداء الخادم‪.‬‬ ‫]‪[13‬‬  ‫الفصل األول‪ :‬مدخل اىل برجمة املواقع التعليمية‬ ‫ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬ ‫تاريخ خوادم الويب‬ ‫يرجع تاريخ خوادم الويب إلى بداية الويب في أوائل التسعينات والبداية كانت مع مشروع اإلنترنت العالمي ‪World‬‬ ‫‪ Wide Web‬الذي بدأه العالم تيم بيرنرز لي في عام ‪.1989‬‬ ‫‪ :1991 -‬تم تقديم أول خادم ويب الذي وتم تنفيذه باستخدام برنامج يسمى ‪ CERN httpd‬والذي يمكن القول بأنه‬ ‫أول برنامج خادم ويب‪.‬‬ ‫‪ :1995 -‬ظهر خادم ‪ ،Apache HTTP Server‬والذي حصل على شعبية كبيرة بسبب كونه مفتوح المصدر‪،‬‬ ‫وسهل التخصيص‪ ،‬ويعمل بشكل جيد ومستقر‪.‬‬ ‫مشهورا بفضل أدائه العالي واستهالكه المنخفض للموارد‪.‬‬ ‫ً‬ ‫‪ :2004 -‬تم تقديم خادم الويب ‪ ،Nginx‬الذي أصبح‬ ‫دور خادم الويب في بنية اإلنترنت‪ :‬يعتبر خادم الويب جز ًءا مه ًما من بنية اإلنترنت ويعمل كحلقة وصل بين المستخدم‬ ‫النهائي وموارد الويب الموجودة على الخادم‪.‬‬ ‫مفاهيم أساسية لخوادم الويب‬ ‫‪ ‬بروتوكول نقل النص الفائق ‪ :[Hyper Text Transfer Protocol] HTTP‬هو بروتوكول االتصال‬ ‫األساسي المستخدم في الويب لنقل البيانات بين المتصفح أو العميل والخادم‪ ،‬ويستخدم هذا البروتوكول منفذ رقم ‪،80‬‬ ‫وهو ال يقوم بتشفير البيانات‪ ،‬مما يعني أنها قد تكون معرضة لالختراق أو الكشف‪.‬‬ ‫‪ ‬بروتوكول نقل النص الفائق اآلمن [‪ :HTTPS [Hyper Text Transfer Protocol Secure‬هو نفس‬ ‫بروتوكول ‪ HTTP‬لكن مع طبقة أمان إضافية تستخدم ‪ ،SSL/TLS‬ويعمل على منفذ رقم ‪ ،443‬ويقوم بتشفير‬ ‫البيانات؛ مما يحميها من االعتراض أو التعديل‪.‬‬ ‫مفهوم التشفير وأهميته باستخدام ‪ :HTTPS‬التشفير يحمي البيانات من االعتراض أو التالعب أثناء انتقالها بين‬ ‫المتصفح والخادم‪.‬‬ ‫ً‬ ‫اتصاال عبر ‪ HTTPS‬يبدأ تبادل يسمى ‪ SSL Handshake‬بين‬ ‫كيفية عمل ‪ :HTTPS‬عندما يطلب المستخدم‬ ‫المتصفح والخادم لضبط اتصال آمن‪ ،‬وخالل هذا التبادل يتم تبادل مفاتيح التشفير إلعداد قناة مشفرة‪.‬‬ ‫كيفية توليد وتثبيت شهادة ‪ :SSL/TLS‬شهادة ‪ SSL/TLS‬هي أداة عبارة عن مفتاح إلكتروني يستخدم لتشفير‬ ‫البيانات التي تنتقل بين الخادم والمتصفح لمنع المتلصصين من فهم البيانات‪.‬ويمكن أن تكون الشهادة ذاتية التوقيع‬ ‫لألغراض التجريبية أو من جهة مصدقة ‪.]Certificate Authority] CA‬‬ ‫‪ ‬كيفية التحقق من أمان االتصال في المتصفح‪:‬‬ ‫غالبًا ما يعرض المتصفح رمز قفل بجوار عنوان ‪ URL‬لإلشارة إلى أن االتصال آمن ويمكن النقر على القفل لرؤية‬ ‫تفاصيل الشهادة والتحقق من صحة وأمان االتصال‪.‬‬ ‫]‪[14‬‬  ‫الفصل األول‪ :‬مدخل اىل برجمة املواقع التعليمية‬ ‫ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬ ‫‪ ‬أنواع طلبات ‪:HTTP‬‬ ‫‪ :GET -‬يُستخدم لطلب البيانات من الخادم‪ ،‬وتُرسل البيانات المطلوبة في عنوان ‪ ،URL‬وهو مناسب لعمليات الجلب‬ ‫‪ fetch‬دون تغيير النظام ويعني ذلك أن تلك البيانات يتم عرضها على جهاز المستخدم دون أن تتغير البيانات على‬ ‫الخادم‪.‬‬ ‫‪ :POST -‬يستخدم إلرسال البيانات إلى الخادم إلنشاء مورد ‪ ،Resource‬ويستخدم عادة في عمليات اإلدخال مثل‬ ‫إرسال النماذج أو رفع الملفات‪ ،‬ويتم إرسال البيانات في جسم الطلب ‪ body‬وليس في عنوان ‪.URL‬‬ ‫‪ :PUT -‬يُستخدم لنقل الملفات أو البيانات إلى الخادم لتحديث مورد موجود بالفعل على الخادم أو إلنشائه ويمكن أن‬ ‫يقوم بإنشائه في بعض األحيان إذا لم يكن موجودًا‪.‬عند القيام بإرسال طلب ‪ PUT‬عدة مرات بنفس البيانات فستظل‬ ‫النتيجة كما هي بعد أول طلب‪ ،‬على عكس الطلب ‪ POST‬فسيتم إنشاء تكرار لنفس المورد إذا تم إرساله عدة مرات‪.‬‬ ‫‪ :DELETE -‬يُستخدم لحذف بيانات محددة من الخادم‪.‬‬ ‫‪ :HEAD -‬يشبه ‪ GET‬لكنه يعيد المعلومات األساسية فقط دون محتوى الرد من الخادم‪ ،‬ويستخدم عادة ً للحصول‬ ‫على معلومات حول البيانات دون تنزيلها‪.‬‬ ‫‪ :OPTIONS -‬يُستخدم لالستعالم عن قدرات االتصال الخاصة بالخادم مثل طرق ‪ HTTP‬المدعومة‪.‬‬ ‫‪ ‬أنواع خوادم الويب‬ ‫‪ :Apache Web Server -‬هو أشهر خادم ويب مفتوح المصدر‪ ،‬ويستخدم على نطاق واسع في تقديم صفحات‬ ‫الويب‪ ،‬وهو يتميز بدعمه لعدد كبير من لغات البرمجة ومرونته في التحكم بإعداداته عبر ملفات ‪htaccess‬؛ مما‬ ‫يجعله مناسبًا للمواقع الكبيرة‪.‬‬ ‫‪ :IIS Web Server Internet Information Services -‬خادم ويب مقدم من ‪ Microsoft‬يندمج بشكل‬ ‫ممتاز مع بيئة ‪ ،Windows‬وهو يتميز بواجهة مستخدم بسيطة وسهلة وبدعمه لتقنيات ‪ASP.NET‬؛ مما يجعله‬ ‫خيارا جيدًا لتطبيقات الويب في المؤسسات‪.‬‬ ‫ً‬ ‫‪ :Nginx Web Server -‬هو خادم ويب مشهور فهو يُعرف بأدائه العالي في إدارة الموارد‪ ،‬ويستخدم لتقديم‬ ‫المحتوى الثابت بسرعة لقدرته على معالجة عدد كبير من االتصاالت المتزامنة؛ مما يجعله مثاليًا للمواقع ذات‬ ‫الزيارات العالية‪.‬‬ ‫‪ :Node.js -‬بيئة مفتوحة المصدر لتشغيل التطبيقات عبر اإلنترنت وهي تتميز بوجود الكثير من األدوات التي يمكن‬ ‫استخدامها بسهولة وسرعتها؛ مما يجعلها مناسبة للتطبيقات التي تحتاج إلى التفاعل الفعلي مثل الدردشة‪.‬‬ ‫‪ :LiteSpeed Web Server -‬يستخدم لعرض محتويات مواقع الويب الثابتة والديناميكية بسرعة وكفاءة فهو يقدم‬ ‫أدا ًء جيدًا وأمانًا عاليًا‪ ،‬كما أنه متوافق مع إعدادات ‪ Apache‬ولكنه يستهلك موارد أقل‪.‬‬ ‫]‪[15‬‬  ‫الفصل األول‪ :‬مدخل اىل برجمة املواقع التعليمية‬ ‫ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬ ‫‪ :Apache Tomcat -‬هذا الخادم موجه لتشغيل تطبيقات ‪ ،Java‬ويدعم تشغيل ‪ Java Servlet‬و]‪JSP‬‬ ‫‪] JavaServer Pages‬؛ مما يجعله مناسبًا لتطبيقات الويب الديناميكية التي تعتمد على لغة ‪.Java‬‬ ‫‪ :Lighttpd -‬خادم ويب خفيف الوزن وعالي الكفاءة‪ ،‬ويستخدم في البيئات ذات الموارد المحدودة مثل الذاكرة‬ ‫والمعالج‪ ،‬ومن أمثلة تلك البيئات‪ :‬الخوادم االفتراضية الصغيرة‪ ،‬أو المشاريع الصغيرة التي ال تحتاج لموارد كبيرة‪.‬‬ ‫‪ :OpenLiteSpeed -‬هذا الخادم هو نسخة مجانية ومفتوحة المصدر من ‪ LiteSpeed‬وتتميز بسرعتها العالية‬ ‫وسهولة التحكم فيها‪ ،‬وهي متوافقة بدرجة كبيرة مع إعدادات ‪ ،Apache‬وتستخدم لجعل المواقع تعمل بسرعة‪.‬‬ ‫‪ :Jigsaw Server -‬خادم ويب مفتوح المصدر تم تطويره بواسطة منظمة ‪ W3C‬وهو يستخدم لألغراض التعليمية‬ ‫والتجريبية ويتضمن مميزات متقدمة تساعد المطورين في تطوير واختبار مواقع الويب‪.‬‬ ‫‪ :Sun Java System Web Server -‬خادم ويب قامت بتطويره شركة ‪ Sun Microsystems‬ثم قامت شركة‬ ‫‪ Oracle‬باالستحواذ عليه‪ ،‬ويتكامل هذا الخادم بشكل جيد مع ‪ ،Java‬ويستخدم عادة ً لتشغيل تطبيقات الويب الكبيرة‬ ‫للمؤسسات فهو يتميز بكونه آمن جدًا ويقدم أدا ًء عاليًا في معالجة طلبات المستخدمين‪.‬‬ ‫البرمجة لدى العميل ‪ Client-side Scripting‬و البرمجة لدى الخادم ‪Server-side Scripting‬‬ ‫‪ :Client-side Scripting ‬الكود الذي يتم تشغيله على العميل (مثل متصفح الويب) وينفذ المهام مباشرة على‬ ‫جهاز المستخدم‪.‬‬ ‫‪ :Server-side Scripting ‬الكود الذي يتم تشغيله على الخادم ويقوم بإنشاء صفحات ‪ HTML‬ديناميكية يتم‬ ‫إرسالها إلى العميل‪.‬‬ ‫بشكل عام‪ ،‬كود البرمجة من جانب العميل ‪ Client-side Scripting‬أسرع ولكنها محدودة في الوظائف‪ ،‬في حين‬ ‫تكون البرمجة من جانب الخادم ‪ Server-side Scripting‬أبطأ ولكنها توفر المزيد من القوة والتنوع‪.‬‬ ‫]‪[16‬‬  ‫الفصل األول‪ :‬مدخل اىل برجمة املواقع التعليمية‬ ‫ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬ ‫‪Server-side Scripting‬‬ ‫‪Client-side Scripting‬‬ ‫المزايا‬ ‫إلضافة التفاعل إلى واجهة المستخدم لتنفيذ المهام لدى الخادم والتحكم في تدفق‬ ‫الغرض منها‬ ‫المعلومات بين الخادم والعميل‬ ‫وتحسين تجربة المستخدم‬ ‫يتم تنفيذه بواسطة متصفح الويب الخاص يتم تنفيذها بواسطة خادم الويب‬ ‫التنفيذ‬ ‫بالعميل ‪Client Browser‬‬ ‫الكود يتم تنفيذه على المتصفح الخاص يتم تنفيذه على الخادم ‪ server‬حيث الكود‬ ‫بالمستخدم ‪ Browser‬حيث يتم تحميله الخاص به يكون مخفى عن المستخدم وال‬ ‫يستطيع الحصول أو مشاهدة ذلك الكود غير‬ ‫على الجهاز الخاص به ومن ثم تنفيذه‬ ‫مكان التنفيذ‬ ‫فقط كود ‪ HTML‬المرتبط به والناتج‬ ‫النهائي عن تنفيذ الكود‬ ‫أسرع حيث تتم كافة العمليات على جهاز أبطأ أثناء المعالجة التي تتم على الخادم‬ ‫سرعة المعالجة‬ ‫العميل‬ ‫مزيد من تفاعل المستخدم‪ ،‬حيث يتم تنفيذ تفاعل محدود للمستخدم‪ ،‬حيث يتم تنفيذ الكود‬ ‫الكود البرمجى على جهاز الكمبيوتر البرمجى لدى الجهاز الخادم‬ ‫تفاعل المستخدم‬ ‫الخاص بالعميل‬ ‫أقل أمانًا حيث يمكن عرض الكود الخاص أكثر أمانًا ألن الكود الموجود لدى الخادم‬ ‫األمان‬ ‫غير متاح للعميل‬ ‫بالعميل وتعديله بسهولة‬ ‫الكود متاح للجميع حيث يتم تنفيذه على الكود ليس متا ًحا للجميع ألنه يتم تنفيذه على‬ ‫إمكانية الوصول‬ ‫الخادم‬ ‫متصفح العميل‬ ‫سرعة نقل البيانات يتطلب سرعة نقل بيانات قليلة حيث تتم يتطلب سرعة عالية في نقل البيانات أثناء‬ ‫حدوث المعالجة على الخادم‬ ‫معظم المعالجة على جهاز العميل‬ ‫‪Bandwidth‬‬ ‫ال يعتمد على خادم الويب ويمكن تشغيله يعتمد على خادم الويب وال يمكن تشغيله‬ ‫االعتمادية على الخادم‬ ‫بشكل مستقل‬ ‫بشكل مستقل‬ ‫‪PHP, Ruby on Rails, Python,‬‬ ‫‪JavaScript, JQuery, VBScript‬‬ ‫أمثلة‬ ‫‪ASP.NET‬‬ ‫عملية تطوير موقع الويب‪:‬‬ ‫على الرغم من أن إنشاء موقع ويب قد يبدو بسي ً‬ ‫طا عند نظرة أولية‪ ،‬إال أنه يتضمن عملية متكاملة ومتعددة الخطوات‬ ‫تهدف إلى تصميم وتطوير موقع ويب متكامل وذو جودة عالية‪.‬إليك نظرة عامة على عملية تطوير موقع الويب‪:‬‬ ‫‪.1‬تحديد األهداف والمتطلبات‪ :‬تبدأ عملية التطوير بفهم أهداف الموقع ومتطلباته‪.‬يجب تحديد الجمهور المستهدف‬ ‫والوظائف التي يجب أن يقدمها الموقع‪.‬‬ ‫‪.2‬تخطيط المحتوى‪ :‬يتم تحديد نوع المحتوى الذي سيتضمنه الموقع‪ ،‬مثل الصور والنصوص والفيديوهات‪.‬يتم تحديد‬ ‫هيكل الموقع وكيفية تنظيم الصفحات‪.‬‬ ‫‪.3‬تصميم الواجهة الرسومية‪ :‬يتم إنشاء تصميم واجهة المستخدم الرسومية (‪ ،)UI‬والذي يتضمن تحديد األلوان‬ ‫واألشكال والخطوط والرموز التي ستستخدم في الموقع‪.‬‬ ‫]‪[17‬‬  ‫الفصل األول‪ :‬مدخل اىل برجمة املواقع التعليمية‬ ‫ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬ ‫‪.4‬تطوير البرمجيات‪ :‬تبدأ عملية كتابة الشيفرة البرمجية لتحقيق وظائف الموقع‪.‬تستخدم لغات البرمجة المختلفة مثل‬ ‫‪ JavaScript ،CSS ،HTML‬وغيرها‪.‬‬ ‫‪.5‬تطوير قاعدة البيانات ‪ :‬إذا كان الموقع يحتاج إلى تخزين بيانات المستخدمين أو المحتوى‪ ،‬يتم تطوير قاعدة بيانات‬ ‫لتخزين واسترجاع هذه البيانات‪.‬‬ ‫‪.6‬تطوير وظائف متقدمة‪ :‬إذا كان الموقع يتطلب وظائف متقدمة مثل البحث‪ ،‬والمدفوعات اإللكترونية‪ ،‬وتسجيل‬ ‫الدخول‪ ،‬يتم برمجة هذه الوظائف وتكاملها مع الموقع‪.‬‬ ‫‪.7‬اختبار وتصحيح‪ :‬يتم اختبار الموقع بشكل دقيق للتحقق من عمل جميع الوظائف بشكل صحيح وسليم‪.‬يتم تصحيح‬ ‫األخطاء والمشاكل التي تظهر خالل هذه المرحلة‪.‬‬ ‫‪.8‬نشر الموقع‪ :‬بعد اكتمال تطوير الموقع وتجربته‪ ،‬يتم نشره على الخوادم وجعله متا ًحا للجمهور عبر عنوان ويب‪.‬‬ ‫‪.9‬صيانة وتحديث‪ :‬بعد نشر الموقع‪ ،‬يتم مراقبته وصيانته بشكل دوري‪.‬يتم إجراء التحديثات وإصالح األخطاء‬ ‫وتحسين األداء على مر الزمن‪.‬‬ ‫‪.10‬تحليل وتقييم‪ :‬يتم مراقبة أداء الموقع وتحليل تفاعل المستخدمين معه‪.‬يتم التقييم والبحث عن طرق لتحسين‬ ‫تجربة المستخدم وتحقيق األهداف المرجوة‪.‬‬ ‫الموارد المطلوبة للموقع اإللكتروني‪:‬‬ ‫إنشاء موقع ويب يتطلب تخصيص مجموعة من الموارد التي تشمل الوقت والمهارات واألدوات‪.‬باإلضافة إلى إنشاء‬ ‫محتوى الموقع وبنيته‪ ،‬هناك عدة موارد أخرى يجب أخذها في االعتبار‪:‬‬ ‫كبيرا‪.‬يجب إعداد النصوص واختيار الصور‬ ‫ً‬ ‫‪ -1‬المحتوى‪ :‬إنشاء محتوى جذاب ومالئم للموقع يستغرق وقتًا‬ ‫والفيديوهات بعناية‪.‬يجب أن يكون المحتوى ذو جودة عالية ومالئ ًما لجمهور المستهدف‪.‬‬ ‫‪ -2‬تصميم واجهة المستخدم (‪ :)UI‬تحتاج إلى مصمم واجهة مستخدم يقوم بتصميم عناصر الواجهة الرسومية مثل‬ ‫األلوان‪ ،‬الخطوط‪ ،‬األيقونات‪ ،‬واألشكال‪.‬هذا يتطلب مهارات في التصميم الجرافيكي‪.‬‬ ‫‪ -3‬تطوير الواجهة األمامية (‪ :)Front-End Development‬تحتاج إلى مطور واجهة أمامية لتحويل تصميم‬ ‫واجهة المستخدم إلى شيفرة برمجية قابلة للتفاعل‪.‬هذا يتطلب معرفة بلغات البرمجة مثل ‪،CSS ،HTML‬‬ ‫و‪.JavaScript‬‬ ‫‪ -4‬تطوير الواجهة الخلفية (‪ :)Back-End Development‬تحتاج إلى مطور واجهة خلفية لبناء األنظمة‬ ‫والتطبيقات التي تدير العمليات وتخزين البيانات وتوفير الوظائف المتقدمة‪.‬‬ ‫‪ -5‬مصمم قاعدة البيانات (‪ :)Database Designer‬إذا كان هناك حاجة لقاعدة بيانات‪ ،‬ستحتاج إلى مصمم قاعدة‬ ‫بيانات لتصميم هيكل البيانات والجداول المطلوبة‪.‬‬ ‫]‪[18‬‬  ‫الفصل األول‪ :‬مدخل اىل برجمة املواقع التعليمية‬ ‫ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬ ‫‪ -6‬اختبار وجودة (‪ :)Testing and Quality Assurance‬تحتاج إلى وقت الختبار الموقع والتحقق من عمل‬ ‫الوظائف بشكل صحيح وتصحيح أي أخطاء‪.‬‬ ‫‪ -7‬التحسين والتعديل‪ :‬بنا ًء على نتائج اختبار التطبيق وتعليقات المستخدمين‪ ،‬يتم إجراء التحسينات والتعديالت الالزمة‬ ‫لتحسين أداء التطبيق وتجربة المستخدم‪.‬‬ ‫‪ -8‬إطالق التطبيق‪ :‬بعد اجتياز جميع مراحل التطوير واالختبار والتحسين‪ ،‬يتم إطالق التطبيق للجمهور‪.‬يجب مراقبة‬ ‫األداء بعد اإلطالق ومعالجة أي مشكالت ظهرت‪.‬‬ ‫‪ -9‬التطوير المستمر‪ :‬يتطلب تطبيقات الويب العناية المستمرة والتطوير لتلبية احتياجات المستخدمين المتغيرة‬ ‫والتحديثات التقنية والتغيرات في السوق‪.‬‬ ‫خطوات تطوير مواقع الويب‬ ‫أوالً‪ :‬جمع البيانات‬ ‫في المرحلة األولى من تطوير مواقع الويب! من الضروري أوال أن يقوم المبرمج بجمع المعلومات حول األهداف‬ ‫والجمهور الذي سيستخدم الموقع! ونوعية المحتوى المضاف على صفحاته مع الوظائف الضرورية التي من المطلوب‬ ‫أن يحققها الموقع للمستخدمين‪.‬وألن هذه المعلومات ستؤثر في كل مرحلة من مراحل تطوير مواقع الويب فمن المهم‬ ‫أن تتحرى الدقة البالغة في جمع المعلومات وهذه نصائح لك ستساعدك في جمع البيانات بدقة‪:‬‬ ‫‪ ‬تحديد األهداف المرتبطة بالموقع‬ ‫يجب أن يخدم تطوير مواقع الويب الشركات والعالمات التجارية والمؤسسات المختلفة! فمواقع الويب التي تركز على‬ ‫تقديم خدمة ليست كموقع ويب يستخدم لترويج منتجات أو بضائع وبالتالي يحتاج تطوير مواقع الويب إلى معرفة‬ ‫الهدف الرئيس من الموقع لتوفير المعلومات الالزمة عن إجراء وتنفيذ أشياء معينة ضرورية بالموقع‪.‬‬ ‫‪ ‬تحديد الجمهور المستهدف‬ ‫من المهم مراعاة شخصية المستخدمين الذين سيركزون استخدامهم للموقع! سواء كانوا جمهورا داخليا وخارجي‪.‬‬ ‫فتحديد الجمهور بدقة بالغة سيؤثر في بينية تصميم الموقع وتكوينه وضمان جاذبيته ومناسبته لهذا الجمهور ومناسبته‬ ‫للمحتوى الذي سيقدم لهذا الجمهور‪.‬وبناء عليه فإن تحديد الجمهور المستهدف بخصائص مثل العمر أو الموقع‬ ‫الجغرافي أو األذواق والتفضيالت أو االحتياجات المحددة يمكن أن يكون حاس ًما في تقديم الموقع وعرض أقسامه‬ ‫المختلفة بما يناسب المستخدمين له‪.‬‬ ‫‪ ‬تحديد المحتوى‬ ‫على عكس ما قد يظنه البعض‪ ،‬هذه المرحلة مهمة قبل تطوير مواقع الويب‪.‬حتى تتمكن من معرفة خصائص هذا‬ ‫المحتوى وحجمه! حيث سيؤثر تحديدك للمحتوى في تمثيل مخطط الصفحات وتنفيذها كما ينبغي‪.‬‬ ‫]‪[19‬‬  ‫الفصل األول‪ :‬مدخل اىل برجمة املواقع التعليمية‬ ‫ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬ ‫األمر ال يرتبط فقط بالمحتوى المكتوب‪ ،‬بل يضم المحتوى النصوص والصور الفوتوغرافية أو الوسائط المتعددة مثل‬ ‫مقاطع الفيديو وأي صور التفاعل! ويجب تحديد ما سيحتاجه الموقع في هذه المرحلة بشكل أو بآخر قبل التصميم أو‬ ‫التخطيط أو تطوير مواقع الويب‪.‬‬ ‫ثانياً‪ :‬التخطيط‬ ‫ع ند تصميم وتطوير مواقع الويب من األساسي والضروري تقسيم المشروع إلى مراحل محددة ومؤطرة بزمن محدد‪.‬‬ ‫حتى يكتمل كل جزء ويتم تقييمه واختباره والتحقق منه بعد تجميع بقية األجزاء‪.‬في التخطيط يبرز مصطلح خريطة‬ ‫الموقع أو التي تسهل عملية االنتقال فيه! ليعبر المفهوم عما سيكون ضروريا في الموقع وإبراز أهم الوظائف التي‬ ‫نريد للمتلقي أن يلتفت لها‪.‬مع ضمان رضاه فما هي عناصر عملية التخطيط في تطوير مواقع الويب؟‬ ‫‪ ‬خريطة الموقع‬ ‫في مرحلة التخطيط‪ ،‬من المهم إنشاء هيكل التبويبات لتخطيط الصفحات على موقع الويب من أجل تعزيز انتقال سهل‬ ‫وغيرمزعج بل وسريع داخل الموقع مع مراعاة تغطية كافة احتياجات الموقع من تبويبات تسهل على المتلقي أن يصل‬ ‫إلى ما يريد‪ ،.‬فالتنظيم الصحيح للمحتوى وتقديمه بسيمترية واضحة وبسيطة يسهل على المتلقي سرعة االستيعاب‬ ‫عند التفاعل مع األقسام المختلفة‪.‬‬ ‫‪ ‬الجانب التقني‬ ‫في مرحلة التخطيط كذلك‪ ،‬يحتاج تطوير مواقع الويب إلى تحديد التقنيات والنظم األساسية التي سيتم استخدامها‬ ‫وتقنيات الويب ولغات البرمجة ومنصة إدارة المحتوى‪ ،‬ومهمة هذه الخطة تحديد وتقييم الخصائص والمزايا التي‬ ‫ستوفرها منصة إدارة المحتوى أو لغة البرمجة على مستوى التصميم والوظائف التي ينبغي أن تتوفر‪.‬ويتضمن هذا‬ ‫االختيار أيضا التفكير المستقبلي في إدارة الموقع وسهولة صيانته ومتابعته وهل سيكون هناك فريق من الدعم الفني‬ ‫أم شخص مستقل أم شركة التصميم التي صممت الموقع ستكون هي المسؤولة عن الدعم الفني وضمان تشغيل الموقع؟‬ ‫‪ ‬التجاوب مع مختلف األجهزة‬ ‫ي عد تجاوب الموقع مع مختلف األجهزة قرارا في مرحلة التخطيط‪ ،‬وهي نقطة غاية في األهمية ينبغي مراعاتها عند‬ ‫تطوير مواقع الويب مهما كانت ألنك ستحدد في هذه المرحلة آلية عرض الصفحات في األجهزة المختلفة والبدائل‬ ‫الممكنة ذات االستجابة السريعة عند تغير الجهاز‪.‬‬ ‫‪ ‬الرسم التخطيطي‬ ‫كل صفحة من صفحات الموقع لها تصميم يعتمد على نوعية المعلومات التي تعرضها‪.‬ومن أجل تحقيق تجربة سعيدة‬ ‫للمستخدمين مهم أن يتم الرسم على الورق قبل أن يذهب إلى الشاشة‪.‬قد يتم تقديم عدد من االسكتشات المختلفة التي‬ ‫فيها تخطيط لكل صفحة أو قائمة مع ترتيب لعناصر الصفحات ببساطة ووضوح وتخطيط القوالب وأماكن الصور‬ ‫]‪[20‬‬  ‫الفصل األول‪ :‬مدخل اىل برجمة املواقع التعليمية‬ ‫ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬ ‫والمحتوى بما يعطي لمطور الويب فرصة لدراسة الخيارات المختلفة واألشياء المطلوبة وتحسين النتيجة النهائية‬ ‫لتطوير مواقع الويب‪.‬‬ ‫‪ ‬تخطيط المحتوى‬ ‫المحتوى الجذاب ذو الصلة بنشاط المؤسسة والجمهور هو األكثر أهمية في النهاية‪.‬فما الذي سيظهر في كل صفحة؟‬ ‫وبأي طريقة سيتم عرض هذه المواد؟ وبناء على اإلجابة على األسئلة المتعلقة بالمحتوى قد تنشأ مجموعة متنوعة من‬ ‫المراجعات المتعلقة بتغيير في هذه المرحلة أو مراحل أخرى إليجاد توازن في عرض الصفحات وتقديمها للمعلومات‪.‬‬ ‫ثالثاً‪ :‬التصميم الجمالي والوظيفي‬ ‫في هذه المرحلة‪ ،‬يتم االنتقال من العمل على الورق إلى العمل على الشاشات حيث يبدأ تصميم صفحات الموقع‬ ‫باستخدام تقنيات التصميم المختلفة والتطبيقات كذلك‪.‬ويجب أن يفي تصميم الموقع لتوقعات أصحاب الشركة‬ ‫والجمهور! من حيث ال جانب الفني والجمالي ومالذي يمثل العالمة التجارية ويعبر عنها؟ وأيضا الجانب الوظيفي في‬ ‫نفس الوقت! فكل عنصر في التصميم يؤدي وظيفة جمالية معينة‪.‬‬ ‫رابعاً‪ :‬برمجة مواقع الويب‬ ‫يرتبط مفهوم تطوير مواقع الويب بالبرمجة وهي المرحلة التالية حيث يتم تحويل التصميمات إلى واجهة أمامية‬ ‫مصممة‪.‬ولكن ال تستجيب هذه الواجهة ما لم يتم تكويدها وإدماجها في الواجهة الخلفية حيث بذلك يستطيع المتلقي أن‬ ‫يبحث في الموقع ويتنقل فيه ويتفاعل معه‪.‬وهذه الخطوة مهمة ألنها تحول التصميم الجامد إلى موقع ديناميكي يستجيب‪.‬‬ ‫وبالتالي يتمكن الزائر من االشتراك أو التنزيل أو البحث أو الدفع‪.‬وكلها ال تتم إال من خالل لغات البرمجة المختلفة‪.‬‬ ‫خامساً‪ :‬إطالق واختبار الموقع‬ ‫ب عد تطوير مواقع الويب يتم اختبار موقع الويب بالكامل بما في ذلك كل صفحة من صفحاته وأدائها لوظيفتها على‬ ‫أكمل وجه‪.‬ثم تجربة التنقل بين الصفحات واألقسام والقوائم واستجابة التصميم في مختلف األجهزة وتصحيح أي‬ ‫أخطاء أو أزرار ال تستجيب‪.‬ليقوم المطور بعد ذلك بحل هذه المشكلة قبل أن يجدها القارئ وينزعج‪.‬‬ ‫سادساً‪ :‬صيانة وتحديث الموقع‬ ‫الهدف من تطوير مواقع الويب في النهاية هو التواصل مع القارئ‪.‬وبالتالي لتحقيق أهداف أي شركة بالتواصل الدائم‬ ‫مع عمالئها! عليها أن تضمن أن الموقع سليم بنسبة ‪ %100‬وضمان سالمته وصيانته وإجراء تحديثات عليه‪.‬‬ ‫باإلضافة إلى ذلك‪ ،‬ترتبط أي إستراتيجية على اإلنترنت بالتحديث والتطوير! لجذب عمالء جدد والحفاظ على العمالء‬ ‫الحاليين وبالتالي سوف تح تاج إلى وضع آلية وجدول عمل لتنفيذ عمليات التحديث في المحتوى والدمج وغيرها من‬ ‫خططك للتطوير في الموقع‪.‬‬ ‫]‪[21‬‬  ‫الفصل األول‪ :‬مدخل اىل برجمة املواقع التعليمية‬ ‫ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ‬ ‫الفرق بين المواقع اإللكترونية ‪ Websites‬وتطبيقات الويب ‪Web Application‬‬ ‫‪ ‬الموقع االلكتروني ‪ Website‬عبارة عن مجموعة من صفحات الويب ‪ Web Pages‬ذات الصلة التي تحتوي على‬ ‫صور ‪ images‬ونصوص ‪ Texts‬وصوت ‪ Audio‬وفيديو‪ Videos‬و روابط ‪ ،Links‬ويمكن أن يتكون من صفحة‬ ‫واحدة‪ ،‬أو عدة صفحات مرتبطة ببعضها البعض من خالل الروابط التشعبية ‪.hyperlinks‬‬ ‫تطبيقات الويب ‪ : Web Applications‬برنامج يمكن الوصول إليه باستخدام أي متصفح ويب‪ ،‬يمكن القول إن‬ ‫تطبيقات الويب هي مواقع ويب ذات وظائف وعناصر تفاعلية‪ ،‬فإن تطبيقات الويب قابلة للتخصيص ‪،‬ويمكن أن تؤدي‬ ‫مجموعة كبيرة ومختلفة من المهام والوظائف‪ ،‬حيث أنها أكثر تعقيدًا وصعوبة في البناء‪،‬ويتطلب إلنشائها فريقًا محترفا ً‬ ‫من مطوري البرامج ‪.‬مثل ‪.Twitter (X) ، YouTube ، Facebook‬‬ ‫تطبيقات الويب‪Web Application‬‬ ‫المواقع اإللكترونية ‪Websites‬‬ ‫وجه المقارنة‬ ‫‪ -1‬تُعد صيانة تطبيقات الويب أسهل مقارنةً‬