1. وتطبيقات الانترنت الغنية
تصميم وتطوير الانترنت والتطبيقات Web Application design, Development and management
تصميم صفحات الانترنت
وتطبيقات الانترنت الغنية
MISY 322 -Dr. Waleed Afndy

2. تنظيم مكونات موقع الانترنت
مكونات موقع او تطبيق الانترنت
يتكون أي موقع انترنت من مجموعة من صفحات الانترنت والتي تخزن على هيئة ملف نصي بصيغة .html وتعتبر هذه الصفحات هي المكون الرئيسي لمواقع الانترنت. وتحتوي الصفحات على التالي:
الصور المعروضة في الصفحة
الروابط، وتنقسم الى روابط توصل الى صفحات انترنت اخرى داخلية او خارجية او توصل الى ملفات مختلفة الصيغ.
التطبيقات المختلفة والتي تؤدي مهام او وظائف معينة
في حال كون الصفحات تحوي تطبيق معين فإن صيغة تخزين الصفحة تختلف باختلاف البرنامج الذي تم تطوير التطبيق به فإذا كان التطبيق مطور بلغة PHP يكون صيغة الملف .php وإذا طور بتقنية ASP.net تكون الصيغة .aspx
MISY 322 -Dr. Waleed Afndy

3. تنظيم مكونات موقع الانترنت
تنظيم صور وملفات موقع الانترنت
إذا كان الموقع المراد إنشائه صغير فيكفي إنشاء مجلد واحد لحفظ الصور التي ستستخدم في بناء الموقع.
إذا كان الموقع كبير وبه العديد من الصور يجب بناء هيكلة بحيث تكون مجلدات الصور مقسمة حسب طبيعة الصفحات او أي تصنيف اخر يراه مطور موقع الانترنت، وذلك لسهولة إدارة الصور الموجودة في الموقع.
كذلك يجب إنشاء مجلدات مستقلة لكل نوع من الملفات التي سيتم خزنها على الموقع الالكتروني (word – PDF - PowerPoint – Video – Audio) وكما يمكن إنشاء مجلدات فرعية لكل من انواع الملفات السابقة لخزن الملفات الخاصة بمحتوى معين في موقع الانترنت.
تعتمد الالية السابقة في معظم الاوقات على حجم واحتياجات الموقع وكذلك الاسلوب الذي يتبعه المطور في تنظيم الملفات.
MISY 322 -Dr. Waleed Afndy

4. تنظيم مكونات موقع الانترنت
تسمية الملفات
تسمية ملفات كلاً من صفحات الانترنت والملفات التي يتم رفعها على الموقع
استخدام اسماء بسيطة وشائعة ولها مدلول وعلاقة بموضوع الصفحة مع الالتزام بالقواعد التالية لتسمية الصفحات:
تسمية الصفحات باللغة الانجليزية لأنها اللغة المعيارية في الانترنت.
تجنب الاسماء المركبة كــ PowerPoint-Presentation
تجنب استخدام خط الوسطي الصغير (-) او الخط التحتي ( _ ) او المسافات
عدم استخدام الحروف الانجليزية الكبيرة Capital Letters (تجنب تماما استخدام أي حروف كبيرة في تطوير تطبيقات الانترنت)
كل ما كان الارتباط التشعبي واضح وسهل كل ما كانت فرص وصول المتصفح او المستخدم اسهل.
MISY 322 -Dr. Waleed Afndy

5. مبادئ تصميم صفحات الانترنت
مقدمة
ما هو الشيء الذي يمكن لأي شخص عمله في صفحات الانترنت؟
الاجابة: إنشاء صفحات انترنت بشعة او غير متناسقة.
لتجنب إنشاء صفحات الانترنت بشكل بشع او غير متناسق يجب تعلم المبادئ الاساسية للتصميم.
المبادئ الاربعة الاساسية هي:
المحاذاة لمحتويات الصفحة
تقارب محتويات الصفحة
تناغم وتكرار التصميم
التباين
التحقق الجانب اللغوي لمحتوى الصفحة
من خلال هذه المبادئ تنتقل الصفحات من المظهر العشوائي الى الاحترافي
MISY 322 -Dr. Waleed Afndy

6. مبادئ تصميم صفحات الانترنت
محاذاة محتويات الصفحة
المحاذاة: هي اسلوب تنسيق محتويات (نصوص، صور، ...) الصفحة جنبا الى جنب بطريقة تظهر الصفحة بشكل احترافي ومرتب.
أنواع المحاذة:
المحاذاة الافقية Horizontal alignment
المحاذاة العامودية Vertical alignment
يجب اختيار محاذاة افقية واحدة وعمودية واحدة وتطبيقها على جميع صفحات الموقع الالكتروني (يجب تغيير المحاذاة في صفحات الموقع).
MISY 322 -Dr. Waleed Afndy

7. مبادئ تصميم صفحات الانترنت
تقارب محتويات الصفحة
تقارب المحتويات: هي كيفية تكوين العلاقات لمحتويات الصفحة من حيث تقاربها او تباعدها من بعضها البعض.
يجب ان يكون هناك وعي في عملية توزيع محتويات الصفحة:
تجميعها مع بعضها البعض
او إبعادها ووضع مسافات فيما بينها.
مثال لتقارب محتويات الصفحة هو توزيع الحقول التي يتمكن من خلالها المستخدم من ادخال البيانات:
تجميع ومقاربة حقول المعلومات الشخصية مع بعضها البعض يليها مسافة او فراغ
ومن ثم تجميع معلومات الاتصال مع بعضها البعض.
MISY 322 -Dr. Waleed Afndy

8. مبادئ تصميم صفحات الانترنت
تناغم وتكرار التصميم
تناغم التصميم: هو ربط العناصر من خلال تكرار الخصائص او الترتيبات المشتركة فيما بينها. (مثل: توحيد الخطوط وطريقة عرض الصور)
تكرا التصميم: هو تكرار بعض العناصر عبر كل صفحات موقع او تطبيق الانترنت.
العناصر المكررة والتي توحد المظهر العام لموقع الانترنت:
ايقونات التنقل بين الصفحات او قائمة التنقل بين الصفحات.
الالوان
تنسيق تقسيم الصفحة
خصائص تنسيق المحتويات
MISY 322 -Dr. Waleed Afndy

9. مبادئ تصميم صفحات الانترنت
التباين Contrast
التباين هو ما يجذب نظر المتصفح لصفحات الموقع.
التباين يحقق جذب النظر لعناصر الصفحة من خلال إنشاء بنية هرمية متدرجة تمكن المتصفح من مسح محتويات الصفحة والوصول الى المعلومة التي يحتاجها بسرعة.
التحقق الجانب اللغوي لمحتوى الصفحة
الاخطاء الاملائية والنحوية يمكنها ان تدمر المظهر الاحترافي للصفحة كما يمكن ان تضع المستخدم في موقف عدم تأكد او تعارض في فهم المقصود من المحتوى.
استخدام المصحح اللغوي الالي يمكن ان يقلل من الاخطاء اللغوية بنسبة كبيرة.
MISY 322 -Dr. Waleed Afndy

10. تنسيق الصفحة وتصميم الموقع
تنسيق الصفحة Web Page Layout
تنسيق الصفحة هو امر بالغ الاهمية لتطوير موقع الكتروني متميز
التنسيق السيء للصفحة يتسبب في:
صعوبة التنقل فيما بين صفحات الموقع.
صعوبة ايجاد المعلومات التي يحتاجها المتصفح او المستخدم على الصفحة.
غير جاذب للرؤية
MISY 322 -Dr. Waleed Afndy

11. تنسيق الصفحة وتصميم الموقع
استخدام الجداول
افضل طريقة لضمان الحصول على تنسيق متميز وواضح للصفحة هو استخدام الجداول لتنسيق الصفحة
يجب وضع حدود الصفحة بشكل غير مرئي
الجدول الاكثر شيوعا في تنسيق الصفحات هو جدول 2×2
MISY 322 -Dr. Waleed Afndy

12. تنسيق الصفحة وتصميم الموقع
تقسيم اجزاء الصفحة الاكثر شيوعاً
القائمة
رأس الصفحة
المحتوى
الشعار
في الصفحات باللغة العربية يتم عكس موقع القائمة والشعار الى اليمين ليتوافق مع اعدادات طريقة الكتابة باللغة العربية والتي تبدأ من اليمين الى اليسار
MISY 322 -Dr. Waleed Afndy

13. تنسيق الصفحة وتصميم الموقع
الجداول داخل الجداول
جدول داخل الجدول الداخلي
جدول داخل الجدول الخارجي
الجدول الخارجي
MISY 322 -Dr. Waleed Afndy

14. تنسيق الصفحة وتصميم الموقع
الابعاد في جدول 2×2
القائمة
رأس الصفحة
المحتوى
الشعار
حتى 650 بكسل
بكسل
العرض الكلي للصفحة 760 بكسل.
يتفاوت عرض القائمة ما بين 100 إلى 140 بكسل
عرض رأس الصفحة والمحتوى المتبقي بعد خصم العرض المخصص للقائمة ويصل حتى 650 بكسل
يجب محاذاة الجدول الاساسي كمتوسط ليتوافق مع عرض جميع مقاسات ووضوح الشاشات
MISY 322 -Dr. Waleed Afndy

15. تنسيق الصفحة وتصميم الموقع
تقسيم الموقع
صفحة البداية او الصفحة الرئيسية وهي اول ما يراه من يزور الموقع وتسمى باللغة الانجليزية Splash Page وعادة ما يكون عنوان واسم ملف الصفحة الرئيسية هو index.html
يجب ان تكون جاذبة للنظر تقدم معلومات عن الموقع ويسهل الانتقال من خلالها الى بقية صفحات الموقع.
صفات الموقع الباقية يتم بنائها وتطوير محتواها اعتماداً على القالب او الصفحة النموذجية التي تم شرحها في الفصل السابق.
يجب ان يكون هناك اسلوب متبع في تصنيف صفحات الانترنت الفرعية ويتم ذلك من خلال خريطة الموقع كما سيتم شرحه.
MISY 322 -Dr. Waleed Afndy

16. تنسيق الصفحة وتصميم الموقع
خريطة الموقع
تصمم خريطة الموقع لإظهار العلاقة بين الصفحات وكيفية تصنيف الصفحات التي يحتويها موقع الانترنت.
تستخدم خريطة الموقع المرسومة الخطوط لتظهر العلاقة وتسلسل صفحات الموقع
الصفحات
الداخلية
الصفحة الرئيسية
index.html
الخدمات الالكترونية
app.html
EMES
emes.aspx
Centra
centra.aspx
الطلاب
students.html
المنتسبين
staff.html
MISY 322 -Dr. Waleed Afndy

17. تطبيقات الانترنت الغنية
مقدمة
التقنيات الحديثة في تطوير الانترنت ذهبت بعيدا مما تقدمه لغة HTML لتطوير صفحات الانترنت.
الفكرة حول «العميل الغني» او «الزبون الغني» «Rich Client» هي الواجهة النشطة التفاعلية والمثيرة للرؤية اكثر مما تقدمه الصفحة المطورة بلغة HTML.
تطبيقات الانترنت الغنية Rich Internet Application (RIA) هي التقنيات التي تمكن عمل تطبيقات تعمل بأسلوب واجهات العميل الغني rich client.
تستخدم تطبيقات الانترنت الغنية جانب المستخدم او العميل لتنفيذ العمليات التي يمكنها عرض محتويات وتقديم خدمات وتطبيقات تمتاز بالكثافة والاستجابة العالية.
MISY 322 -Dr. Waleed Afndy

18. تطبيقات الانترنت الغنية
الصفات التي تجعل تطبيقات الانترنت غنية
يمكن وصف مفهوم الغنى في تطبيقات الانترنت الغنية كالتالي:
غنى المعلومات بدون الزيادة التي لا حاجة لها
غنى العرض من حيث المرونة
غنى التفاعلية بحيث تحاكي التطبيقات المثبتة على الاجهزة الشخصية
غنى التجربة بحيث تكون سلة الاستخدام مما يضيف المتعتة في استخدامها من قبل المبتدئين والخبراء
التركيز على الجانب المرئي اكثر من الجانب المكتوب وهو يمثل عامل جذب للمستخدم
امكانية اختصار الخدمات المقدمة في صفحة واحدة بدلاً من التنقل بين العديد من الصفحات لأنجاز مهمة محددة
MISY 322 -Dr. Waleed Afndy

19. تطبيقات الانترنت الغنية
مثال على تطبيقات الانترنت الغنية
الخرائط التفاعلية هي احد الامثلة على تطبيقات الانترنت الغنية والتي تقدم بأسلوب شيق وجذاب وبعرض مرئي للتالي:
المعلومات
البيانات
المعرفة
تقدم الجانب المرئي على الجانب المقروء او النصي.
MISY 322 -Dr. Waleed Afndy

20. تطبيقات الانترنت الغنية
التقنيات المستخدمة في تطبيقات الانترنت الغنية
Java
تمكن لغة الجافا إنشاء تطبيقات عميل معقدة وغنية
المشكلة الاساسية في استخدام الجافا هو التعقيد او صعوبة إنشاء تطبيقات الانترنت الغنية(حتى تطوير نموذج بسيط او معلومات بيانية بسيط يتطلب العشرات من سطور الاكواد لتطوير هذه المهام السهلة)
Adobe Flash
هو منتج تجاري ناضج لتطوير صفحات الانترنت التفاعلية والجذابة من حيث الرسومات وتحريك الصور.
ويتضمن كذلك امكانية تطوير نماذج يمكن تعبئتها.
هي تقنية مثبتة على العديد من اجهزة العملاء وتقدر النسبة ان 90% من اجهزة الحاسب مثبت بها مشغل الفلاش.
MISY 322 -Dr. Waleed Afndy

21. تطبيقات الانترنت الغنية
سلبيات تطبيقات الانترنت الغنية
كلفة تطويرها مرتفعة نسبيا.
يحتاج المستخدم الى مهارات اكبر في استخدام الحاسب وامكانيات معلوماتية اكبر
بعض المشاكل في موضوع سهولة الاستخدام او الامكانيات المتوفرة (مثل: عدم توفر زر او ايقونة العودة)
يجب على المستخدم ان يمتلك الحس التفاعلي والاستكشافي
بعض الاشخاص يتقبل غنى المعلومات كمعلومات غير مهمة بالنسبة له او عبء معلوماتي غير ضروري.
برامج الحماية اصبحت تحد من الدخول على المصادر الداخلية لأجهزة العميل ا المستخدم.
MISY 322 -Dr. Waleed Afndy