محاضرة عن تطبيقات البرمجة التعليمية في مجال تصميم وبناء صفحات الويب و الفرق بين لغات برمجة الويب و تطبيقاتها المختلفة WEB Developing & Programming

محاضرة عن تطبيقات البرمجة
التعليمية في مجال تصميم وبناء صفحات الويب و
الفرق بين لغات برمجة الويب و تطبيقاتها المختلفة

إعداد أ.ياسر عبد المنعم قطب

yasserkoutb@yahoo.com
yasserkoutb@hotmail.com
أولاً تطبيقات البرمجة التعليمية في مجال تصميم وبناء صفحات الويب

ما المقصود ببرمجة وتطوير الويب WEB Developing & Programming

هي إعداد المواقع والتطبيقات التي تعمل علي الإنترنت.

المواقع Web Sites

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

تطبيق الويب Web Application

تطبيق يعمل من خلال شبكة الإنترنت
وذلك لتحقيق وظيفة معينة.

مثال

تطبيق مواقع التعلم عن بعد حيث يسجل
المتعلم بياناته ويوفر التطبيق خدمة الدراسة عن بعد للمتعلم .

طرق وأدوات إعداد مواقع
الإنترنت Web site tools

تحتاج خبرة ومجهود أقل من متطلبات
إعداد تطبيقات الويب

ومن هذه الأدوات

1. استعمال أوامروعلامات HTML

2. استعمال برامج
جاهزة مثل Front Page وبرنامج Dream
Weaver

3.استعمال برامج
حركة مثل Flash

4.تحميل المواقع
علي الإنترنت UPLOAD.

كيف تعمل مواقع الويب:

أ-اسم النطاق Domain Name

و يعني اسم الموقع الذي يكتبه المستخدم في المتصفح مثل:www.Yahoo.com

لذا لابد من حجز اسم الموقع علي الإنترنت ويتم ذلك بعد اختيار العنوان المناسب وعادة
مايسمي باسم المؤسسة التعليمية المملوك لها وتعد عملية حجز الموقع ماهي إلا تسجيل
هذا العنوان ويسمي بالنطاق وتوجد هيئات معتمدة دوليا علي الإنترنت مثل هيئةICANN التي تقوم بتسجيل عنوان الموقع Domain Name في قاعدة البيانات الخاصة بأسماء المواقع علي ألا
يكون مكررا.

ب- الإستضافة Web Hosting

لكي تظهر صفحات الموقع علي الإنترنت
لابد من عمل إستضافة Hosting لملفات موقعك علي المساحة المحددة التي قمت بحجزها
سلفا وتحدد قيم المساحة المستضافة GB

وهناك أكثر من خطة للإستضافةHosting Plan وتختلف
أحجامها بوحدة GB وبنظام التشغيل الذي يعمل عليه السيرفر .

المواصفات الفنية لخطة الإستضافة .

1. المساحة ( Web Space
) وهي الحجم المتاح بالخطة لإستضافة ملفات الموقع بGB

2. عدد صناديق البريد الإلكتروني ( E- mail boxes )

3. معدل المرور ( Transfer Rate ) : أي مدي استيعاب الخادم لعدد زوار الموقع.

4. دعم لصفحات قواعد البيانات Databases

6. لوحة التحكم ( Control Panel )

7. نوع السيرفر و نظام التشغيل Web Server and Server OS .

ثانيا الفرق بين لغات برمجة الويب و تطبيقاتها المختلفة:

Different Web Programming Languages and its Applications

تختلف لغات برمجة الويب عن اللغات
الأخري في كونها لغات برمجة نصية scripting
Language

- ولغة البرمجة النصية أو
اللغة الممتدة هي لغة برمجة معدة للتحكم بتطبيق برمجي معين.عادة ماتعامل الأكواد
النصية (الإسكريبتات) على أنها غير البرامج حيث أن البرامج تنفذ باستقلالية دون
الحاجة إلى تطبيق برمجى معين.كما أنها مختلفة عن الأكواد الأساسية للبرنامج التي
تعمل بداخلة فهي في العادة تكون بلغة أخرى أيضا. (ويكيبيديا، الموسوعة الحرة -2009)

أنواع
مواقع الويب

تقسم
مواقع الويب تبعا الي عدة تصنيفات نخص بالذكر ثلاثة منها:

أ)
من حيث المحتوي

- المواقع ذات
المحتوي الثابت: وهي مصممة بلغة ترميز HTML والأنتقال باستخدام
الروابط و تحتوي علي النصوص و الصور بدون تفاعلية.

- المواقع ذات المحتوي المتغير: هي مواقع ديناميكية
من خلال تطبيقات لغات البرمجة و تتصل فيها المواقع بقواعد البيانات.

ب)حسب
طرق الإنتاج

1- مواقع يقوم المعلم بالتصميم بالكامل مثل بالبرنامج
الجاهزة مثل Ms FRONT PAGE أو Dreamweaver

2- مواقع بتطبيقات برمجية جاهزة مثل المنتديات و مواقع
إدارة و نشر المحتوي الإلكتروني مثل Moodle و WebCT

3- ومواقع شبه جاهز مثل باستخدام قوالب جاهزة YAHOO Geocities وموقع tripod

ج)كما
يمكن تقسيمها تبعاً لصفحات الموقع:

1- صفحات الويب الساكنةStatic Web pages ( لا تحتاج من المتصفح الا القراءة والأحاطة ) و تقوم علي
لغة ترميزHTML

ماالمقصود
باللغة التأشيريةHTML (Hyper Text Markup Language)
؟

و
ُتعرف بلغة ترميز النص الفائق و تستخدم في تصميم صفحات الويب و مواقع الإنترنت،
و تعتبر هذه اللغة من أقدم اللغات و أوسعها استخداماً في تصميم صفحات الويب. ولغة HTML ليست لغة برمجة، بل هي لغة للوصف (لغة ترميز) وتعطي برنامج تصفح
الانترنت وصفاً ليكفية عرضه للمحتويات، كم إنها لاتحتوي
علي أية عمليات منطقية .

طرق
كتابة لغة HTML .

هناك
نوعان من المحررات Editors:

·
محرر النصوص Text Editorويتيح لنا كتابة كود
بلغة HTMLبطريقة يدوية

·
المحرر بطريقة
واجهة المستخدم الرسومية GUI:

ظهرت
لان عملية كتابة الكود بالطريقة اليدوية عملية شاقة وفي هذه الطريقة يكتب الكود
بطريقة تلقائية وعلي المستخدم استعمال الفأرة مع القوائم وشرائط الأدوات ويقوم البرنامج
بتحويل الأوامر إلي إلي لغة HTML ومن أمثلتها : Macromedia
Dreamweaver - Microsoft FrontPage-

2- صفحات الويب
الديناميكية Dynamic Web Pages (تتطلب التفاعل مع محتواها مثل
البحث في قواعد البيانات والمعلومات أو إجابة أسئلة

و تقوم علي لغات برمجة الويب و توجد
أنواع مختلفة منها و تقسم لنوعين رئيسيين:

Ø
أوامر
scripts تنفذ عند
المستخدم وتسمي Side scripts Client

هي
أوامر تكتب داخل ملفات HTMLالخاصة بالصفحات وتنفذ من خلال عارض صفحات الإنترنت Web Browser ومن أمثلها
script .java script- VB

Ø
أوامر
scripts تنفذ علي جهاز الخادم Server
Side scripts

وتسمي
Server Side لأنها
تنفذ علي جهاز الخادم المحمل عليه ملفات الموقع ومن أمثلة هذه اللغات- (Active Server Pages)ASP-(Java
Server Pages)JSP (Hypertext Preprocessor)
PHP
و Perl – Cgi-

·
(Java Server Pages)JSP

و
ترعاها شركة Sun Microsystems المنافس
الشرس ل Microsoft و هي مفتوحة المصدر و متاحة مجاناً و
تعمل علي معظم انطمة التشغيل. و قامت شركة (Sun Microsystems) بعمل تطوير لتكنولوجيا ال (Java Server Pages) و هى مبنية على تكنولوجيا ال (Servlet).

الهدف
من تكنولوجيا ال (Java Server Pages) او ال (Servlets)
هو جعل محتويات الصفحات متغيرة من ال (Server). هذا المحتوى قد يكون (HTML) أو أى محتوى أخر.

·
(Active Server Pages)ASP

وهي
عباره عن صفحات الخادم النشطة Active server
pages))
و هي من إنتاج Microsoft و هي بالطبع مغلقة المصدر و يجب شراء ترخيص لها . و تعمل علي أنطمة Windows Server و تعمل على محركات الخوادم لصفحات الويب الدينامكية

يستطيع
أن يحتوي على نصوص و اوامر لغة ترميزHTML وملفات ال ASP تنفذ على السيرفر و امتدادها( asp.)
أو (.aspx)

·
(Hypertext Preprocessor) PHP

و
هي لغة ويب مفتوحة المصدر و متاحة للجميع و تعمل علي انطمة Linux

وصُممت
بي اتش بي من اجل استخدامها من ناحية الخادم و بناء تطبيقات ويب تفاعليه، وقد أصبحت
مشهورة جداً في صناعة الويب كطريقة عمل برمجيات ويب آمنة، غير مكلفة، ويمكن
الاعتماد عليها.

تطبيقات برنامج FrontPage

ما ?و برنامج الFrontpage؟

ُيعد
FrontPageمن أ?م البرامج استخداماً في إنشاء صفحات الويب وذلك للمزايا التي يتمتع ب?ا من حیث الس?ولة في التعامل إضافة إلى الإمكانیات
التي يتمتع ب? .

كيفية إنشاء موقع ويب
باستخدام FrontPage

إعداد مواقع ويب وإنشاؤها والعمل فيها
باستخدام
Microsoft® Office FrontPage® 2003.

بمجرد تحديد هدف الموقع، ستبدأ في تصميم
الموقع الخاص بك باستخدام FrontPage على الفور.
لكن من المستحسن عمل رسم توضيحي للموقع كما هو موضح في شكل 1، قبل الشروع في العمل.

<table width="100%" cellpadding="0" cellspacing="0"><tr><td>
</td></tr></table>

<table width="100%" cellpadding="0" cellspacing="0"><tr><td>
</td></tr></table>

<table width="100%" cellpadding="0" cellspacing="0"><tr><td>شكل(1) رسم توضيحي للموقع</td></tr></table>

<table width="100%" cellpadding="0" cellspacing="0"><tr><td>
</td></tr></table>

<table width="100%" cellpadding="0" cellspacing="0"><tr><td>
</td></tr></table>

<table width="100%" cellpadding="0" cellspacing="0"><tr><td>
</td></tr></table>

استخدم قلم رصاص وورقة لرسم مربعات للصفحات والأسهم من أجل الارتباطات. تذكر أن
تحتفظ بهدفك نصب عينيك أثناء عمل ذلك الرسم التوضيحي.

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

بعد الفراغ من عمل رسم توضيحي للموقع الخاص
بك، حان الوقت للبدء في عمل رسم توضيحي
للتخطيط الشائع لكل صفحة. كما في شكل 2

يمكنك البدء في تصميم
التخطيط الشائع باستخدام FrontPage
ولكننا ننصح بالاحتفاظ به على الورق حتى هذه اللحظة.

ما هو موقع FrontPage على ويب؟

موقع على ويب تم
إنشاؤه في FrontPage ويحتوي على صفحات
ورسومات ومستندات ووسائط متعددة.

كيفية إنشاء موقع ويب باستخدام FrontPage؟

يوجد نوعان من مواقع الويب يتم إنشاؤهما
باستخدام FrontPage موقع مستند إلى قرص و
مستند إلى سيرفر.

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

أ‌)
مواقع
ويب مستندة إلى قرص

موقع ويب مستند إلى قرص هو موقع قد أنشأته على القرص الثابت المحلي الصلب
الخاص بك. بعد تصميم الموقع والعمل عليه،
يمكنك نشره فيما بعد إلى مكان بعيد مثل سيرفر ويب.
يمكنك عمل هذا باستخدام FrontPage أو
أي نوع آخر من برامج النشر.

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

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

ب‌)
مواقع
ويب مستندة إلى سيرفر

موقع ويب الذي يستند إلى سيرفر هو موقع يمكنك إنشاؤه والعمل عليه مباشرةً
على سيرفر ويب حيث يكون هذا الموقع على
السيرفر وليس على جهاز الكمبيوتر الخاص بك.

هذا يعني أنه بمجرد حفظ التغييرات، سيتم رؤيتها مباشرةً على شبكة ويب
العالمية. يرجع بعض الأشخاص إلى ذلك أثناء
العمل على موقع ويب في ُمعد مسبقاً.

مـاذا حـدث لـبرنـامـج FrontPage ؟

بعد
تسع سنين من كونه أداة مستعرض الويب الحائزة على جوائز، توقـف إنتاج برنامج FrontPage في آخر
عام 2006. مع تقديم هذه الأدوات الجديدة لإنشاء التطبيقات مواقع الويب باستخدام أحدث التقنيات ببرنامج: Microsoft® Office SharePoint®2007 وMicrosoft® Expression™ Web
Designer

نشر موقع الويب وإدارته

الاستعداد لنشر موقع الويب الخاص بك :

هناك عدة طرق أهمها عن طريق FrontPage
وطرق آخري مثل File
Manager و برنامج نقل الملفات FTP (File Transfer Protocol) مثل WS_FTP أو CuteFTP

أما مساوئ
File
Manager في أنه لا يمكنك أن ترسل جميع ملفاتك دفعة واحدة بل عليك أن ترسلها ملف تلو الآخر ولذلك الطريقة صعبة وقليلة الاستخدام

ونشر موقع الويب عملية في غاية السهولة إذا استخدمت Frontpage.
كل ما تفعله هو أن تحدد الموقع الذي تريد

نشره ثم تحدد الموقع الذي تريد أن يتم عليه النشر . أما
Frontpage، فيتولى القيام بكل ?ذا . لكن قبل الإقدام على نشر موقع الويب الخاص بك ، ثمة مهام قليلة ينبغي عليك القيام بها :

أولاً
: ينبغي أن تتأكد من وجود خادم ويب نشط على الإنترنت فمن الضروري أن يتوافر خادم ويب حتى يتمكن الآخرون من استعراض موقعك .

ثانياً : ينبغي أن تتأكد من أن خادم الويب الذي تنوي النشر عليه يدعم خدمة FTP
لإرسال وربط ملفاتك بالخادم الذي . و ذلك حتي لا تحتاج إلى إجراء أي تغييرات أو إعدادات في Front page
لكي تنشر مواقع الويب الخاصة بك .

إرسال موقع الويب إلى الخادم :

١- حدد وافتح موقع الويب الذي تريد نشره .

2. من قائمة ملف File اختر أمر نشر ويب لتفتح مربع حوار نشر ويب publish Web انظر الشكل .

3. في مربع نص أدخل وجهة النشر Enter
publish destination , اكتب عنوانURL الخاص بخادم الويب الذي ستنشر عليه موقعك تستطيع أن تحدد في ?ذا المربع بروتوكول . FTP أو HTTP .

إذا كنت – على سبيل المثال ستنشر على أحد أجهزة خادم الويب في مجال

My
School.com

فلك أن تكتب عنوان ULR ، ?ذا http://www. School.com

أو
ftp://ftp.mySchool.com طبعاً حتى تكتب http يجب أن يكون الخادم عندك يدعم Front
pageأما إذا لم يكن
.
يدعم Front
pageفاستخدم ftp
.

طبعاً سيطلب منك كتابة اسم المستخدم + كلمة المرور و?اتان الكلمتان تحصل عليهما من الخادم المضيف

4.
انقر
زر نشر
publish لتبدأ إرسال موقعك إلى الخادم .

٥- بحسب حجم موقع الويب الذي تقوم بنشره وسرعة الاتصال بالخادم , قد تستغرق عملية النشر ما يتراوح بين . بضع ثوان وبضع دقائق عندما ينتهي Front pageمن نشر موقعك ونجاح عملية النشر ستعرض لك رسالة توضح ذلك .

6 . سوف يظ?ر عند الانت?اء وصلة لمعاينة الموقع الذي تم نشره ، انقر ارتباط نشر موقع ويب published web site .

7. انقر زر إنهاء Done لإغلاق مربع حوار نشر ويب publish web.

مكروميديا
دريمويفر (Macromedia
Dreamweaver)

برنامج تطويرو إنشاء مواقع ويب. أنتجته شركة ماكروميدياMacromedia ثم انتقل إلى ملكية أدوبيAdobe بعد أن اشترت
أدوب مايكروميديا في عام 2005.

دريمويفرمتاح لأنظمة لويندوز وماك. تدعم النسخ الحديثة لغات العديد من
لغات تطوير الويب وإطارات العمل، مثل Java
script و CSS وASP.NETPHP,.

المميزات

كغيره من برامج تحرير
صفحات الويب، يتيح دريمويفر تصميم الصفحات والمواقع للمستخدمين الذين لا يتـقنون http://ar.wikipedia.org/wiki/%D8%A5%D8%AA%D8%B4_%D8%AA%D9%8A_%D8%A5%D9%85_%D8%A5%D9%84HTML.

يتيح دريمويفر أيضا إنشاء
"إمتدادات" لأداء مهام ووظائف إضافية (عادة تستخدم الإتش تي إم إل
والجافاسكربت).
هذا بالإضافة إلى إمكانية معاينة الصفحة في العديد من المتصفحات،‌بشرط أن تكون
مثبتة على الكمبيوتر المستخدم.

أدوبي فلاش ('ماكرميديا فلاش سابقا) هو برنامج
لتصميم الرسوم
المتحركة. يستخدم بشكل رئيس في تصميم صفحات ويب
، بالإضافة إلى كونه برنامج لتصميم الرسوميات يحتوى على لغة برمجة مساعدة تسمى Action script. تتميز التطبيقات الناتجة عنه بصغر
حجمها وجودة مظهرها ولكنها تحتاج مشغل فلاش على جهاز المستخدم. وتم شراء منتج (
ماكرميديا فلاش ) مؤخراً من قبل شركة أدوبي المشهوره في عالم التصميم. وقد مر
الفلاش بعدت نقلات كبيرة بعد منها Flash
mx أكس
ومن ثم Flash 8 وآخيرا Flash cs3 الذي تم إنتاجه من شركة ADOBE وتم إصدار النسخة الحديثة وهي ACTION script3 التي تعد نقلة كبيرة بأسلوب البرمجة بالفلاش والتحديثات
التي أضافوها فيها والتي بالإمكان تعلمها بشكل أسهل من قبلها

أدوبي فايروركس

أدوبي فايروركس (Adobe Fireworks ويعرف اختصاراً بـ Fw) هو محرر رسوميات نقطية ومتجهة.
تم تطويره في الأصل من قبل ماكروميديا
التي حصلت عليها أدوبي عام 2005، وهو موجه لمصممي الويب. تم تصمميه ليتم دمجه مع
منتجات ماكروميديا الأخري السابقة، مثل أدوبي
دريم ويفر وأدوبي
فلاش. فايروركس متاح كبرنامج مستقل أو في باقة
الإبداع 3. النسخة 8 كانت مجمعة في ماكروميديا ستوديو 8

تسمح لأي شخص لتحويل
الملفات القابلة للطباعة بضغطة واحدة.الي
صيغة فلاش و تصبح بشكل الكتاب الالكتروني فتصبح الملفات آمنة غير قابلة للحفظ او
التعديل

برنامج Contribute

وهو أيضاً أحد البرامج
في حزمة Macromedia studio وهو متخصص بإدارة وتعديل مواقع
الويب ويستخدمه المشرفين علي مواقع الويب لتحديث وتعديل محتوي مواقع الويب بسهولة ويسر

تطبيقات حزمة برامج Macromedia Studio في التصميم التعليمي

ماهية التصميم التعليمي

علم يصف الأجراءات
الأزمة لتنظيم التعليم وتحليله وتطويره وتنفيذه وتقويمه من أجل تحقيق أهداف
تعليمية معينه

وهناك عدة نماذج اجنبية
وعربية تتناول التصميم التعليمي

مثل كمب وبردج ونموذج
عبد اللطيف الجزار وجميعا تعتمد علي أساس مدخل تحليل النظم الذي يعتمد علي دراسة
المفاهيم في منظومة متكاملة والتي يمكن
تلخيصها

1-
مرحلة
التحليل (تحليل البنية التعلمية والأمكانات المادية والمصادر )

2-
مرحلة
التنفيذ ( يتم اللتنفيذ والتطبيق الفعلي

3-
مرحلة
الأداره تتضمن حسن سير العملية التعلمية ومراقبة النظام

4-
مرحلة
التقويم تتضمن الحكم علي مدي تحقق الأهداف
التعلمية وتتحديد نقاط الضعف وعلاجها.

بعد عرض مفهوم التصميم التعليمي يمكن استنتاج تطبيقات حزمة برامج Macromedia Studio في التصميم التعليمي

ويتضح أن معظم تطبيقات هذه البرامج تنحصر في عمليتي
التنفيذ والإدارة

التطبيقات في مرحلة التنفيذ

أولا مكروميديا دريمويفر (Macromedia
Dreamweaver)

ويمكن استخدامه في بناء ونشر وإدارة مواقع الويب
التعليمية

ثانيا ماكرميديا فلاش

ويمكن استخدامه في عمل لقطات الأفلام المتحركة كما يمكن
استخدامه لعمل البرامج التعليمية التفاعلية باستخدام Action script

يعطيكم العافية على ماتبذلونه في المنتدى من مجهود .