SlideShare une entreprise Scribd logo
1  sur  21
MISY 322 -Dr. Waleed Afndy 1
‫نت‬‫ر‬‫االنت‬‫صفحات‬‫تصميم‬
‫الغنية‬‫نت‬‫ر‬‫االنت‬‫وتطبيقات‬
wafndy@gmail.com
‫والتطبيقات‬ ‫االنترنت‬ ‫وتطوير‬ ‫تصميم‬
Web Application design,
Development and management
MISY 322 -Dr. Waleed Afndy 2

‫نت‬‫ر‬‫االنت‬‫تطبيق‬‫او‬‫موقع‬‫مكونات‬
•
‫ملف‬‫هيئة‬‫على‬‫تخزن‬‫والتي‬‫نت‬‫ر‬‫االنت‬‫صفحات‬‫من‬‫مجموعة‬‫من‬‫نت‬‫ر‬‫انت‬‫موقع‬‫ي‬‫ا‬‫يتكون‬
‫بصيغة‬‫نصي‬
.html
‫نت‬‫ر‬‫االنت‬‫لمواقع‬‫ئيسي‬‫ر‬‫ال‬‫المكون‬‫هي‬ ‫الصفحات‬‫هذه‬‫وتعتبر‬
.
‫الصف‬‫وتحتوي‬
‫التالي‬‫على‬‫حات‬
:
o
‫الصفحة‬‫في‬‫ضة‬‫و‬‫المعر‬‫ر‬‫الصو‬
o
‫ا‬‫خارجية‬‫او‬‫داخلية‬‫اخرى‬‫نت‬‫ر‬‫انت‬‫صفحات‬‫الى‬‫توصل‬ ‫ابط‬‫و‬‫ر‬‫الى‬‫وتنقسم‬ ،‫ابط‬‫و‬‫الر‬
‫توصل‬‫و‬
‫الصيغ‬‫مختلفة‬‫ملفات‬‫الى‬
.
o
‫معينة‬‫ف‬‫وظائ‬‫او‬‫مهام‬‫تؤدي‬‫والتي‬‫المختلفة‬‫التطبيقات‬
o
‫تختل‬‫الصفحة‬‫تخزين‬‫صيغة‬‫فإن‬‫معين‬‫تطبيق‬‫تحوي‬‫الصفحات‬‫كون‬ ‫حال‬‫في‬
‫باختالف‬‫ف‬
‫بلغة‬‫ر‬‫مطو‬‫التطبيق‬‫كان‬ ‫فإذا‬‫به‬‫التطبيق‬‫تطوير‬‫تم‬‫الذي‬‫نامج‬‫ر‬‫الب‬
PHP
‫الملف‬‫صيغة‬‫يكون‬
.php
‫بتقنية‬‫ر‬‫طو‬‫وإذا‬
ASP.net
‫الصيغة‬‫تكون‬
.aspx
‫نت‬‫ر‬‫االنت‬‫موقع‬‫مكونات‬‫تنظيم‬
MISY 322 -Dr. Waleed Afndy 3

‫نت‬‫ر‬‫االنت‬‫موقع‬‫وملفات‬ ‫ر‬‫صو‬‫تنظيم‬
•
‫ستس‬‫التي‬‫ر‬‫الصو‬‫لحفظ‬‫واحد‬‫مجلد‬‫إنشاء‬‫في‬‫فيك‬‫صغير‬‫إنشائه‬‫اد‬‫ر‬‫الم‬‫الموقع‬‫كان‬‫إذا‬
‫بناء‬‫في‬‫تخدم‬
‫الموقع‬
.
•
‫الص‬‫مجلدات‬‫تكون‬‫بحيث‬‫هيكلة‬‫بناء‬‫يجب‬‫ر‬‫الصو‬‫من‬‫العديد‬‫وبه‬‫كبير‬‫الموقع‬‫كان‬‫إذا‬
‫مقسمة‬‫ر‬‫و‬
‫إدا‬‫لسهولة‬‫وذلك‬،‫نت‬‫ر‬‫االنت‬‫موقع‬‫ر‬‫مطو‬‫اه‬‫ر‬‫ي‬‫اخر‬‫تصنيف‬‫ي‬‫ا‬‫او‬ ‫الصفحات‬‫طبيعة‬‫حسب‬
‫ر‬‫الصو‬‫رة‬
‫الموقع‬‫في‬‫الموجودة‬
.
•
‫المو‬‫على‬‫نها‬‫ز‬‫خ‬‫سيتم‬‫التي‬‫الملفات‬‫من‬‫نوع‬‫لكل‬‫مستقلة‬‫مجلدات‬‫إنشاء‬‫يجب‬‫كذلك‬
‫ني‬‫و‬‫تر‬‫االلك‬‫قع‬
(
word
–
PDF
-
PowerPoint
–
Video
–
Audio
)
‫إنشاء‬‫يمكن‬‫وكما‬
‫معين‬‫بمحتوى‬‫الخاصة‬‫الملفات‬‫لخزن‬‫السابقة‬‫الملفات‬‫انواع‬‫من‬‫لكل‬‫فرعية‬‫مجلدات‬
‫موقع‬‫في‬
‫نت‬‫ر‬‫االنت‬
.
•
‫االسلوب‬ ‫وكذلك‬‫الموقع‬‫واحتياجات‬‫حجم‬‫على‬‫االوقات‬‫معظم‬‫في‬‫السابقة‬‫االلية‬‫تعتمد‬
‫يتبعه‬‫الذي‬
‫الملفات‬‫تنظيم‬‫في‬‫ر‬‫المطو‬
.
‫نت‬‫ر‬‫االنت‬‫موقع‬‫مكونات‬‫تنظيم‬
MISY 322 -Dr. Waleed Afndy 4

‫الملفات‬‫تسمية‬
•
‫الموقع‬‫على‬ ‫رفعها‬‫يتم‬‫التي‬‫والملفات‬‫نت‬‫ر‬‫االنت‬‫صفحات‬‫من‬ ً‫كال‬‫ملفات‬‫تسمية‬
•
‫بالق‬‫ام‬‫ز‬‫االلت‬‫مع‬‫الصفحة‬‫بموضوع‬‫وعالقة‬‫مدلول‬‫ولها‬‫وشائعة‬‫بسيطة‬‫اسماء‬‫استخدام‬
‫التالية‬‫واعد‬
‫الصفحات‬‫لتسمية‬
:
o
‫نت‬‫ر‬‫االنت‬ ‫في‬‫المعيارية‬‫اللغة‬‫نها‬‫ال‬‫االنجليزية‬‫باللغة‬‫الصفحات‬‫تسمية‬
.
o
‫ك‬‫المركبة‬‫االسماء‬ ‫تجنب‬
PowerPoint-Presentation
o
‫الصغير‬‫الوسطي‬‫خط‬‫استخدام‬‫تجنب‬
(
-
)
‫التحتي‬‫الخط‬‫او‬
(
_
)
‫المسافات‬‫او‬
o
‫الكبيرة‬‫االنجليزية‬‫ف‬‫و‬‫الحر‬‫استخدام‬‫عدم‬
Capital Letters
(
‫استخدام‬‫تماما‬‫تجنب‬
‫نت‬‫ر‬‫االنت‬‫تطبيقات‬‫تطوير‬‫في‬‫كبيرة‬‫ف‬‫و‬‫حر‬‫ي‬‫ا‬
)
o
‫ا‬‫او‬‫المتصفح‬‫وصول‬‫فرص‬‫كانت‬‫ما‬‫كل‬ ‫وسهل‬‫واضح‬‫التشعبي‬‫تباط‬‫ر‬‫اال‬‫كان‬ ‫ما‬‫كل‬
‫لمستخدم‬
‫اسهل‬
.
‫نت‬‫ر‬‫االنت‬‫موقع‬‫مكونات‬‫تنظيم‬
MISY 322 -Dr. Waleed Afndy 5

‫مقدمة‬
•
‫نت؟‬‫ر‬‫االنت‬‫صفحات‬‫في‬‫عمله‬‫شخص‬‫ي‬‫ال‬‫يمكن‬‫الذي‬‫الشيء‬‫هو‬‫ما‬
o
‫االجابة‬
:
‫متناسقة‬‫غير‬‫او‬‫بشعة‬‫نت‬‫ر‬‫انت‬‫صفحات‬‫إنشاء‬
.
•
‫اال‬‫المبادئ‬‫تعلم‬‫يجب‬‫متناسق‬‫غير‬‫او‬‫بشع‬‫بشكل‬‫نت‬‫ر‬‫االنت‬‫صفحات‬‫إنشاء‬‫لتجنب‬
‫للتصميم‬‫ساسية‬
.
•
‫هي‬ ‫االساسية‬‫االربعة‬‫المبادئ‬
:
o
‫الصفحة‬‫لمحتويات‬‫المحاذاة‬
o
‫الصفحة‬‫محتويات‬‫تقارب‬
o
‫التصميم‬‫ار‬‫ر‬‫وتك‬‫تناغم‬
o
‫التباين‬
o
‫الصفحة‬‫لمحتوى‬‫اللغوي‬‫الجانب‬‫التحقق‬
•
‫الصفحات‬‫تنتقل‬‫المبادئ‬‫هذه‬‫خالل‬‫من‬
‫العشوائي‬‫المظهر‬‫من‬
‫الى‬
‫افي‬‫ر‬‫االحت‬
‫نت‬‫ر‬‫االنت‬‫صفحات‬‫تصميم‬ ‫مبادئ‬
MISY 322 -Dr. Waleed Afndy 6

‫الصفحة‬‫محتويات‬‫محاذاة‬
•
‫المحاذاة‬
:
‫محتويات‬‫تنسيق‬‫اسلوب‬‫هي‬
(
،‫ر‬‫صو‬،‫نصوص‬
)...
‫بطر‬‫جنب‬‫الى‬‫جنبا‬‫الصفحة‬
‫تظهر‬‫يقة‬
‫تب‬‫ر‬‫وم‬‫افي‬‫ر‬‫احت‬‫بشكل‬‫الصفحة‬
.
•
‫المحاذة‬‫نواع‬‫ا‬
:
o
‫االفقية‬‫المحاذاة‬
Horizontal alignment
o
‫العامودية‬‫المحاذاة‬
Vertical alignment
•
‫اال‬‫الموقع‬‫صفحات‬‫جميع‬‫على‬‫وتطبيقها‬‫واحدة‬‫وعمودية‬‫واحدة‬‫افقية‬‫محاذاة‬‫اختيار‬‫يجب‬
‫ني‬‫و‬‫تر‬‫لك‬
(
‫الموقع‬‫صفحات‬‫في‬‫المحاذاة‬‫تغيير‬‫يجب‬
.)
‫نت‬‫ر‬‫االنت‬‫صفحات‬‫تصميم‬ ‫مبادئ‬
MISY 322 -Dr. Waleed Afndy 7

‫الصفحة‬‫محتويات‬‫تقارب‬
•
‫المحتويات‬‫تقارب‬
:
‫تقاربه‬‫حيث‬‫من‬‫الصفحة‬‫لمحتويات‬‫العالقات‬‫تكوين‬‫كيفية‬‫هي‬
‫من‬‫تباعدها‬‫او‬‫ا‬
‫البعض‬‫بعضها‬
.
•
‫الصفحة‬‫محتويات‬ ‫يع‬‫ز‬‫تو‬‫عملية‬‫في‬‫وعي‬‫هناك‬‫يكون‬‫ان‬‫يجب‬
:
o
‫البعض‬‫بعضها‬‫مع‬‫تجميعها‬
o
‫بينها‬‫فيما‬‫مسافات‬‫ضع‬‫و‬‫و‬‫إبعادها‬‫او‬
.
•
‫المستخد‬‫خاللها‬‫من‬‫يتمكن‬‫التي‬‫الحقول‬‫يع‬‫ز‬‫تو‬‫هو‬ ‫الصفحة‬‫محتويات‬‫لتقارب‬‫مثال‬
‫ادخال‬‫من‬‫م‬
‫البيانات‬
:
o
‫ف‬‫او‬‫مسافة‬‫يليها‬‫البعض‬‫بعضها‬‫مع‬‫الشخصية‬‫المعلومات‬‫حقول‬‫ومقاربة‬‫تجميع‬
‫اغ‬‫ر‬
o
‫البعض‬‫بعضها‬‫مع‬ ‫االتصال‬‫معلومات‬‫تجميع‬‫ثم‬‫ومن‬
.
‫نت‬‫ر‬‫االنت‬‫صفحات‬‫تصميم‬ ‫مبادئ‬
MISY 322 -Dr. Waleed Afndy 8

‫التصميم‬‫ار‬‫ر‬‫وتك‬‫تناغم‬
•
‫التصميم‬‫تناغم‬
:
‫المشتركة‬‫تيبات‬‫ر‬‫الت‬‫او‬ ‫الخصائص‬‫ار‬‫ر‬‫تك‬‫خالل‬‫من‬‫العناصر‬‫ربط‬‫هو‬
‫بينها‬‫فيما‬
(.
‫مثل‬
:
‫ر‬‫الصو‬‫عرض‬‫وطريقة‬‫الخطوط‬‫توحيد‬
)
•
‫التصميم‬‫ا‬‫ر‬‫تك‬
:
‫نت‬‫ر‬‫االنت‬‫تطبيق‬‫او‬‫موقع‬‫صفحات‬‫كل‬‫عبر‬‫العناصر‬ ‫بعض‬‫ار‬‫ر‬‫تك‬‫هو‬
.
•
‫نت‬‫ر‬‫االنت‬‫لموقع‬‫العام‬‫المظهر‬‫توحد‬‫والتي‬‫ة‬‫ر‬‫المكر‬‫العناصر‬
:
o
‫الصفحات‬‫بين‬‫التنقل‬‫قائمة‬‫او‬‫الصفحات‬‫بين‬‫التنقل‬‫ايقونات‬
.
o
‫االلوان‬
o
‫الصفحة‬‫تقسيم‬‫تنسيق‬
o
‫المحتويات‬‫تنسيق‬‫خصائص‬
‫نت‬‫ر‬‫االنت‬‫صفحات‬‫تصميم‬ ‫مبادئ‬
MISY 322 -Dr. Waleed Afndy 9

‫التباين‬
Contrast
•
‫الموقع‬‫لصفحات‬‫المتصفح‬‫نظر‬‫يجذب‬‫ما‬‫هو‬‫التباين‬
.
•
‫تمك‬‫متدرجة‬‫هرمية‬‫بنية‬‫إنشاء‬‫خالل‬‫من‬‫الصفحة‬‫لعناصر‬‫النظر‬‫جذب‬‫يحقق‬‫التباين‬
‫من‬‫المتصفح‬‫ن‬
‫بسرعة‬‫يحتاجها‬‫التي‬‫المعلومة‬‫الى‬‫والوصول‬‫الصفحة‬‫محتويات‬‫مسح‬
.

‫الصفحة‬‫لمحتوى‬ ‫اللغوي‬‫الجانب‬ ‫التحقق‬
•
‫ت‬‫ان‬‫يمكن‬‫كما‬‫للصفحة‬‫افي‬‫ر‬‫االحت‬‫المظهر‬‫تدمر‬‫ان‬‫يمكنها‬‫والنحوية‬‫االمالئية‬‫االخطاء‬
‫المستخدم‬‫ضع‬
‫المحتوى‬‫من‬‫المقصود‬ ‫فهم‬‫في‬‫تعارض‬‫او‬‫كد‬‫تا‬‫عدم‬‫موقف‬‫في‬
.
•
‫كبيرة‬‫بنسبة‬‫اللغوية‬‫االخطاء‬‫من‬‫يقلل‬‫ان‬‫يمكن‬‫االلي‬‫اللغوي‬‫المصحح‬‫استخدام‬
.
‫نت‬‫ر‬‫االنت‬‫صفحات‬‫تصميم‬ ‫مبادئ‬
MISY 322 -Dr. Waleed Afndy 10

‫الصفحة‬‫تنسيق‬
WebPageLayout
•
‫متميز‬‫ني‬‫و‬‫تر‬‫الك‬‫موقع‬‫لتطوير‬‫االهمية‬‫بالغ‬‫امر‬‫هو‬ ‫الصفحة‬‫تنسيق‬
•
‫في‬‫يتسبب‬‫للصفحة‬‫السيء‬‫التنسيق‬
:
o
‫الموقع‬‫صفحات‬‫بين‬‫فيما‬‫التنقل‬‫صعوبة‬
.
o
‫الصفحة‬‫على‬‫المستخدم‬‫او‬‫المتصفح‬‫يحتاجها‬‫التي‬‫المعلومات‬‫ايجاد‬‫صعوبة‬
.
o
‫ية‬‫ؤ‬‫للر‬‫جاذب‬‫غير‬
‫الموقع‬‫وتصميم‬‫الصفحة‬ ‫تنسيق‬
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
‫بكسل‬
100
-
140
‫بكسل‬
•
‫العرض‬
‫الكلي‬
‫للصفحة‬
760
‫بكسل‬
.
•
‫يتفاوت‬
‫عرض‬
‫القائمة‬
‫ما‬
‫بين‬
100
‫إلى‬
140
‫بكسل‬
•
‫عرض‬
‫س‬‫ا‬‫ر‬
‫الصفحة‬
‫والمحتوى‬
‫المتبق‬
‫ي‬
‫بعد‬
‫خصم‬
‫العرض‬
‫المخصص‬
‫للقائمة‬
‫ويص‬
‫ل‬
‫حتى‬
650
‫بكسل‬
•
‫يجب‬
‫محاذاة‬
‫الجدول‬
‫االساسي‬
‫كمتوسط‬
‫ليتوافق‬
‫مع‬
‫عرض‬
‫جميع‬
‫مقاسات‬
‫ض‬‫و‬‫و‬
‫وح‬
‫الشاشات‬
MISY 322 -Dr. Waleed Afndy 15

‫الموقع‬‫تقسيم‬
•
‫ئيسية‬‫ر‬‫ال‬‫الصفحة‬‫او‬‫البداية‬‫صفحة‬
‫اال‬‫باللغة‬‫وتسمى‬ ‫الموقع‬‫ر‬‫و‬‫يز‬‫من‬‫اه‬‫ر‬‫ي‬‫ما‬‫اول‬‫وهي‬
‫نجليزية‬
Splash Page
‫هو‬‫ئيسية‬‫ر‬‫ال‬‫الصفحة‬‫ملف‬ ‫واسم‬‫عنوان‬‫يكون‬‫ما‬‫وعادة‬
index.html
o
‫خالل‬‫من‬‫االنتقال‬‫ويسهل‬‫الموقع‬‫عن‬‫معلومات‬‫تقدم‬‫للنظر‬‫جاذبة‬‫تكون‬‫ان‬‫يجب‬
‫بقية‬‫الى‬‫ها‬
‫الموقع‬‫صفحات‬
.
•
‫الصفحة‬‫او‬‫القالب‬‫على‬ ً‫اعتمادا‬‫محتواها‬‫وتطوير‬‫بنائها‬‫يتم‬‫الباقية‬‫الموقع‬‫صفات‬
‫تم‬‫التي‬‫النموذجية‬
‫السابق‬‫الفصل‬‫في‬‫شرحها‬
.
o
‫ويت‬‫الفرعية‬‫نت‬‫ر‬‫االنت‬‫صفحات‬‫تصنيف‬‫في‬‫متبع‬‫اسلوب‬‫هناك‬‫يكون‬‫ان‬‫يجب‬
‫خالل‬‫من‬‫ذلك‬ ‫م‬
‫شرحه‬‫سيتم‬‫كما‬ ‫الموقع‬‫خريطة‬
.
‫الموقع‬‫وتصميم‬‫الصفحة‬ ‫تنسيق‬
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

‫غنية‬‫نت‬‫ر‬‫االنت‬‫تطبيقات‬‫تجعل‬ ‫التي‬ ‫الصفات‬
•
‫كالتالي‬‫الغنية‬‫نت‬‫ر‬‫االنت‬‫تطبيقات‬‫في‬‫الغنى‬‫مفهوم‬‫وصف‬‫يمكن‬
:
o
‫لها‬‫حاجة‬‫ال‬‫التي‬‫الزيادة‬‫بدون‬‫المعلومات‬‫غنى‬
o
‫نة‬‫و‬‫المر‬‫حيث‬‫من‬‫العرض‬‫غنى‬
o
‫الشخصية‬‫االجهزة‬‫على‬‫المثبتة‬‫التطبيقات‬‫تحاكي‬‫بحيث‬‫التفاعلية‬‫غنى‬
o
‫يضيف‬‫مما‬‫االستخدام‬‫سلة‬‫تكون‬‫بحيث‬‫التجربة‬‫غنى‬
‫المتعتة‬
‫م‬‫استخدامها‬‫في‬
‫قبل‬‫ن‬
‫اء‬‫ر‬‫والخب‬‫المبتدئين‬
o
‫للم‬‫جذب‬‫عامل‬‫يمثل‬‫وهو‬‫توب‬‫المك‬‫الجانب‬‫من‬‫ثر‬‫اك‬‫ئي‬‫ر‬‫الم‬‫الجانب‬‫على‬‫التركيز‬
‫ستخدم‬
o
‫العدي‬‫بين‬‫التنقل‬‫من‬ ً‫بدال‬‫واحدة‬‫صفحة‬‫في‬‫المقدمة‬‫الخدمات‬‫اختصار‬‫امكانية‬
‫الصفحات‬‫من‬‫د‬
‫نجاز‬‫ال‬
‫محددة‬‫مهمة‬
‫الغنية‬ ‫نت‬‫ر‬‫االنت‬‫تطبيقات‬
MISY 322 -Dr. Waleed Afndy 19

‫الغنية‬‫نت‬‫ر‬‫االنت‬‫تطبيقات‬ ‫على‬‫مثال‬
•
‫اال‬‫تطبيقات‬‫على‬‫االمثلة‬ ‫احد‬‫هي‬‫التفاعلية‬ ‫ائط‬‫ر‬‫الخ‬
‫الغنية‬‫نت‬‫ر‬‫نت‬
‫للتالي‬‫ئي‬‫ر‬‫م‬‫وبعرض‬‫وجذاب‬‫شيق‬‫سلوب‬‫با‬‫تقدم‬‫والتي‬
:
o
‫المعلومات‬
o
‫البيانات‬
o
‫المعرفة‬
o
‫النص‬‫او‬‫ء‬‫و‬‫المقر‬‫الجانب‬‫على‬‫ئي‬‫ر‬‫الم‬‫الجانب‬‫تقدم‬
‫ي‬
.
‫الغنية‬ ‫نت‬‫ر‬‫االنت‬‫تطبيقات‬
MISY 322 -Dr. Waleed Afndy 20

‫الغنية‬‫نت‬‫ر‬‫االنت‬‫تطبيقات‬‫في‬ ‫المستخدمة‬ ‫التقنيات‬
•
Java
o
‫وغنية‬‫معقدة‬‫عميل‬‫تطبيقات‬‫إنشاء‬‫الجافا‬‫لغة‬‫تمكن‬
o
‫ا‬‫تطبيقات‬‫إنشاء‬‫صعوبة‬‫او‬‫التعقيد‬‫هو‬ ‫الجافا‬‫استخدام‬‫في‬‫االساسية‬‫المشكلة‬
‫نت‬‫ر‬‫النت‬
‫الغنية‬
(
‫م‬ ‫ات‬‫ر‬‫العش‬‫يتطلب‬‫بسيط‬‫بيانية‬‫معلومات‬‫او‬‫بسيط‬‫نموذج‬‫تطوير‬‫حتى‬
‫ر‬‫سطو‬‫ن‬
‫االكواد‬
‫السهلة‬‫المهام‬‫هذه‬‫لتطوير‬
)
•
Adobe Flash
o
‫حيث‬‫من‬ ‫والجذابة‬‫التفاعلية‬‫نت‬‫ر‬‫االنت‬‫صفحات‬‫لتطوير‬‫ناضج‬‫ي‬‫تجار‬‫منتج‬‫هو‬
‫الرسومات‬
‫ر‬‫الصو‬‫وتحريك‬
.
o
‫تعبئتها‬‫يمكن‬‫نماذج‬‫تطوير‬‫امكانية‬‫كذلك‬‫ويتضمن‬
.
o
‫ان‬‫النسبة‬‫وتقدر‬‫العمالء‬‫اجهزة‬‫من‬‫العديد‬‫على‬‫مثبتة‬‫تقنية‬‫هي‬
90
%
‫الحاسب‬‫اجهزة‬‫من‬
‫الفالش‬‫مشغل‬‫بها‬‫مثبت‬
.
‫الغنية‬ ‫نت‬‫ر‬‫االنت‬‫تطبيقات‬
MISY 322 -Dr. Waleed Afndy 21

‫الغنية‬‫نت‬‫ر‬‫االنت‬‫تطبيقات‬ ‫سلبيات‬
•
‫نسبيا‬‫تفعة‬‫ر‬‫م‬‫تطويرها‬‫كلفة‬
.
•
‫اكبر‬‫معلوماتية‬‫وامكانيات‬‫الحاسب‬‫استخدام‬‫في‬‫اكبر‬ ‫ات‬‫ر‬‫مها‬‫الى‬‫المستخدم‬‫يحتاج‬
•
‫المتوفرة‬‫االمكانيات‬‫او‬‫االستخدام‬‫سهولة‬‫موضوع‬‫في‬‫المشاكل‬‫بعض‬
(
‫مثل‬
:
‫ز‬‫توفر‬‫عدم‬
‫ايقونة‬‫او‬‫ر‬
‫العودة‬
)
•
‫واالستكشافي‬‫التفاعلي‬‫الحس‬‫يمتلك‬‫ان‬‫المستخدم‬‫على‬‫يجب‬
•
‫معلو‬‫عبء‬‫او‬‫له‬‫بالنسبة‬‫مهمة‬‫غير‬‫كمعلومات‬‫المعلومات‬‫غنى‬‫يتقبل‬‫االشخاص‬‫بعض‬
‫غير‬‫ماتي‬
‫ي‬‫ر‬‫و‬‫ضر‬
.
•
‫المست‬‫ا‬‫العميل‬‫جهزة‬‫ال‬‫الداخلية‬‫المصادر‬‫على‬‫الدخول‬‫من‬‫تحد‬‫اصبحت‬‫الحماية‬‫امج‬‫ر‬‫ب‬
‫خدم‬
.
‫الغنية‬ ‫نت‬‫ر‬‫االنت‬‫تطبيقات‬

Contenu connexe

Similaire à تصميم مواقع.pptx

مقدمة الى الأندرويد
مقدمة الى الأندرويدمقدمة الى الأندرويد
مقدمة الى الأندرويدAmal Wishah
 
الويب 1 2-3
الويب 1 2-3الويب 1 2-3
الويب 1 2-3fatimah991
 
مميزات برنامج وثق للأرشفة الإلكترونية - برنامج أرشفة إلكترونية للمستندات والو...
مميزات برنامج وثق للأرشفة الإلكترونية - برنامج أرشفة إلكترونية للمستندات والو...مميزات برنامج وثق للأرشفة الإلكترونية - برنامج أرشفة إلكترونية للمستندات والو...
مميزات برنامج وثق للأرشفة الإلكترونية - برنامج أرشفة إلكترونية للمستندات والو...innoKeen
 
البرمجة | أقوي مجالات العمل والربح من الانترنت..دليلك نحو الاحتراف
البرمجة | أقوي مجالات العمل والربح من الانترنت..دليلك نحو الاحترافالبرمجة | أقوي مجالات العمل والربح من الانترنت..دليلك نحو الاحتراف
البرمجة | أقوي مجالات العمل والربح من الانترنت..دليلك نحو الاحترافMohamed E. Saleh
 
تطبيقات الويب
تطبيقات الويبتطبيقات الويب
تطبيقات الويبmm201500556
 
Use of artificial intelligence websites
Use of artificial intelligence websitesUse of artificial intelligence websites
Use of artificial intelligence websitesNajeh Naji
 
عرض تقنيات وبرمجة الأجهزة الذكية 02
عرض تقنيات وبرمجة الأجهزة الذكية 02عرض تقنيات وبرمجة الأجهزة الذكية 02
عرض تقنيات وبرمجة الأجهزة الذكية 02نوافذ حاسوبية
 
قيمة تك لتصميم وتطوير البرمجيات في مصر أفضل شركات تطوير البرمجيات لعام 2022....
قيمة تك لتصميم وتطوير البرمجيات في مصر  أفضل شركات تطوير البرمجيات لعام 2022....قيمة تك لتصميم وتطوير البرمجيات في مصر  أفضل شركات تطوير البرمجيات لعام 2022....
قيمة تك لتصميم وتطوير البرمجيات في مصر أفضل شركات تطوير البرمجيات لعام 2022....MohamedAbdelBaset37
 
عرض تصميم وإدارة المواقع والشبكات الاجتماعية 03
عرض تصميم وإدارة المواقع والشبكات الاجتماعية 03عرض تصميم وإدارة المواقع والشبكات الاجتماعية 03
عرض تصميم وإدارة المواقع والشبكات الاجتماعية 03نوافذ حاسوبية
 
مشروع التخرج الجديد
مشروع التخرج الجديدمشروع التخرج الجديد
مشروع التخرج الجديدalaa44
 
مشروع التخرج
مشروع التخرج مشروع التخرج
مشروع التخرج alaa44
 
مشروع التخرج الجديد
مشروع التخرج الجديدمشروع التخرج الجديد
مشروع التخرج الجديدalaa44
 
مشروع التخرج
مشروع التخرج مشروع التخرج
مشروع التخرج alaa44
 
عرض الحوسبة السحابية وتطبيقاتها 01
عرض الحوسبة السحابية وتطبيقاتها 01عرض الحوسبة السحابية وتطبيقاتها 01
عرض الحوسبة السحابية وتطبيقاتها 01نوافذ حاسوبية
 
مشروع كلمات Template
مشروع كلمات Templateمشروع كلمات Template
مشروع كلمات TemplateHanaa
 
متطلبات استخدام الانترنت في مراكز مصادر التعلم
متطلبات استخدام الانترنت في مراكز مصادر التعلممتطلبات استخدام الانترنت في مراكز مصادر التعلم
متطلبات استخدام الانترنت في مراكز مصادر التعلمNazzal Th. Alenezi
 
Presentation url shortening services
Presentation   url shortening servicesPresentation   url shortening services
Presentation url shortening servicesBCUCheckDesk
 

Similaire à تصميم مواقع.pptx (20)

مقدمة الى الأندرويد
مقدمة الى الأندرويدمقدمة الى الأندرويد
مقدمة الى الأندرويد
 
الويب 1 2-3
الويب 1 2-3الويب 1 2-3
الويب 1 2-3
 
مميزات برنامج وثق للأرشفة الإلكترونية - برنامج أرشفة إلكترونية للمستندات والو...
مميزات برنامج وثق للأرشفة الإلكترونية - برنامج أرشفة إلكترونية للمستندات والو...مميزات برنامج وثق للأرشفة الإلكترونية - برنامج أرشفة إلكترونية للمستندات والو...
مميزات برنامج وثق للأرشفة الإلكترونية - برنامج أرشفة إلكترونية للمستندات والو...
 
انواع صفحات الويب
انواع صفحات الويب انواع صفحات الويب
انواع صفحات الويب
 
البرمجة | أقوي مجالات العمل والربح من الانترنت..دليلك نحو الاحتراف
البرمجة | أقوي مجالات العمل والربح من الانترنت..دليلك نحو الاحترافالبرمجة | أقوي مجالات العمل والربح من الانترنت..دليلك نحو الاحتراف
البرمجة | أقوي مجالات العمل والربح من الانترنت..دليلك نحو الاحتراف
 
تطبيقات الويب
تطبيقات الويبتطبيقات الويب
تطبيقات الويب
 
تطبيقات
تطبيقات تطبيقات
تطبيقات
 
Use of artificial intelligence websites
Use of artificial intelligence websitesUse of artificial intelligence websites
Use of artificial intelligence websites
 
عرض تقنيات وبرمجة الأجهزة الذكية 02
عرض تقنيات وبرمجة الأجهزة الذكية 02عرض تقنيات وبرمجة الأجهزة الذكية 02
عرض تقنيات وبرمجة الأجهزة الذكية 02
 
قيمة تك لتصميم وتطوير البرمجيات في مصر أفضل شركات تطوير البرمجيات لعام 2022....
قيمة تك لتصميم وتطوير البرمجيات في مصر  أفضل شركات تطوير البرمجيات لعام 2022....قيمة تك لتصميم وتطوير البرمجيات في مصر  أفضل شركات تطوير البرمجيات لعام 2022....
قيمة تك لتصميم وتطوير البرمجيات في مصر أفضل شركات تطوير البرمجيات لعام 2022....
 
عرض تصميم وإدارة المواقع والشبكات الاجتماعية 03
عرض تصميم وإدارة المواقع والشبكات الاجتماعية 03عرض تصميم وإدارة المواقع والشبكات الاجتماعية 03
عرض تصميم وإدارة المواقع والشبكات الاجتماعية 03
 
Ar-PHP.org
Ar-PHP.orgAr-PHP.org
Ar-PHP.org
 
مشروع التخرج الجديد
مشروع التخرج الجديدمشروع التخرج الجديد
مشروع التخرج الجديد
 
مشروع التخرج
مشروع التخرج مشروع التخرج
مشروع التخرج
 
مشروع التخرج الجديد
مشروع التخرج الجديدمشروع التخرج الجديد
مشروع التخرج الجديد
 
مشروع التخرج
مشروع التخرج مشروع التخرج
مشروع التخرج
 
عرض الحوسبة السحابية وتطبيقاتها 01
عرض الحوسبة السحابية وتطبيقاتها 01عرض الحوسبة السحابية وتطبيقاتها 01
عرض الحوسبة السحابية وتطبيقاتها 01
 
مشروع كلمات Template
مشروع كلمات Templateمشروع كلمات Template
مشروع كلمات Template
 
متطلبات استخدام الانترنت في مراكز مصادر التعلم
متطلبات استخدام الانترنت في مراكز مصادر التعلممتطلبات استخدام الانترنت في مراكز مصادر التعلم
متطلبات استخدام الانترنت في مراكز مصادر التعلم
 
Presentation url shortening services
Presentation   url shortening servicesPresentation   url shortening services
Presentation url shortening services
 

تصميم مواقع.pptx

  • 1. MISY 322 -Dr. Waleed Afndy 1 ‫نت‬‫ر‬‫االنت‬‫صفحات‬‫تصميم‬ ‫الغنية‬‫نت‬‫ر‬‫االنت‬‫وتطبيقات‬ wafndy@gmail.com ‫والتطبيقات‬ ‫االنترنت‬ ‫وتطوير‬ ‫تصميم‬ Web Application design, Development and management
  • 2. MISY 322 -Dr. Waleed Afndy 2  ‫نت‬‫ر‬‫االنت‬‫تطبيق‬‫او‬‫موقع‬‫مكونات‬ • ‫ملف‬‫هيئة‬‫على‬‫تخزن‬‫والتي‬‫نت‬‫ر‬‫االنت‬‫صفحات‬‫من‬‫مجموعة‬‫من‬‫نت‬‫ر‬‫انت‬‫موقع‬‫ي‬‫ا‬‫يتكون‬ ‫بصيغة‬‫نصي‬ .html ‫نت‬‫ر‬‫االنت‬‫لمواقع‬‫ئيسي‬‫ر‬‫ال‬‫المكون‬‫هي‬ ‫الصفحات‬‫هذه‬‫وتعتبر‬ . ‫الصف‬‫وتحتوي‬ ‫التالي‬‫على‬‫حات‬ : o ‫الصفحة‬‫في‬‫ضة‬‫و‬‫المعر‬‫ر‬‫الصو‬ o ‫ا‬‫خارجية‬‫او‬‫داخلية‬‫اخرى‬‫نت‬‫ر‬‫انت‬‫صفحات‬‫الى‬‫توصل‬ ‫ابط‬‫و‬‫ر‬‫الى‬‫وتنقسم‬ ،‫ابط‬‫و‬‫الر‬ ‫توصل‬‫و‬ ‫الصيغ‬‫مختلفة‬‫ملفات‬‫الى‬ . o ‫معينة‬‫ف‬‫وظائ‬‫او‬‫مهام‬‫تؤدي‬‫والتي‬‫المختلفة‬‫التطبيقات‬ o ‫تختل‬‫الصفحة‬‫تخزين‬‫صيغة‬‫فإن‬‫معين‬‫تطبيق‬‫تحوي‬‫الصفحات‬‫كون‬ ‫حال‬‫في‬ ‫باختالف‬‫ف‬ ‫بلغة‬‫ر‬‫مطو‬‫التطبيق‬‫كان‬ ‫فإذا‬‫به‬‫التطبيق‬‫تطوير‬‫تم‬‫الذي‬‫نامج‬‫ر‬‫الب‬ PHP ‫الملف‬‫صيغة‬‫يكون‬ .php ‫بتقنية‬‫ر‬‫طو‬‫وإذا‬ ASP.net ‫الصيغة‬‫تكون‬ .aspx ‫نت‬‫ر‬‫االنت‬‫موقع‬‫مكونات‬‫تنظيم‬
  • 3. MISY 322 -Dr. Waleed Afndy 3  ‫نت‬‫ر‬‫االنت‬‫موقع‬‫وملفات‬ ‫ر‬‫صو‬‫تنظيم‬ • ‫ستس‬‫التي‬‫ر‬‫الصو‬‫لحفظ‬‫واحد‬‫مجلد‬‫إنشاء‬‫في‬‫فيك‬‫صغير‬‫إنشائه‬‫اد‬‫ر‬‫الم‬‫الموقع‬‫كان‬‫إذا‬ ‫بناء‬‫في‬‫تخدم‬ ‫الموقع‬ . • ‫الص‬‫مجلدات‬‫تكون‬‫بحيث‬‫هيكلة‬‫بناء‬‫يجب‬‫ر‬‫الصو‬‫من‬‫العديد‬‫وبه‬‫كبير‬‫الموقع‬‫كان‬‫إذا‬ ‫مقسمة‬‫ر‬‫و‬ ‫إدا‬‫لسهولة‬‫وذلك‬،‫نت‬‫ر‬‫االنت‬‫موقع‬‫ر‬‫مطو‬‫اه‬‫ر‬‫ي‬‫اخر‬‫تصنيف‬‫ي‬‫ا‬‫او‬ ‫الصفحات‬‫طبيعة‬‫حسب‬ ‫ر‬‫الصو‬‫رة‬ ‫الموقع‬‫في‬‫الموجودة‬ . • ‫المو‬‫على‬‫نها‬‫ز‬‫خ‬‫سيتم‬‫التي‬‫الملفات‬‫من‬‫نوع‬‫لكل‬‫مستقلة‬‫مجلدات‬‫إنشاء‬‫يجب‬‫كذلك‬ ‫ني‬‫و‬‫تر‬‫االلك‬‫قع‬ ( word – PDF - PowerPoint – Video – Audio ) ‫إنشاء‬‫يمكن‬‫وكما‬ ‫معين‬‫بمحتوى‬‫الخاصة‬‫الملفات‬‫لخزن‬‫السابقة‬‫الملفات‬‫انواع‬‫من‬‫لكل‬‫فرعية‬‫مجلدات‬ ‫موقع‬‫في‬ ‫نت‬‫ر‬‫االنت‬ . • ‫االسلوب‬ ‫وكذلك‬‫الموقع‬‫واحتياجات‬‫حجم‬‫على‬‫االوقات‬‫معظم‬‫في‬‫السابقة‬‫االلية‬‫تعتمد‬ ‫يتبعه‬‫الذي‬ ‫الملفات‬‫تنظيم‬‫في‬‫ر‬‫المطو‬ . ‫نت‬‫ر‬‫االنت‬‫موقع‬‫مكونات‬‫تنظيم‬
  • 4. MISY 322 -Dr. Waleed Afndy 4  ‫الملفات‬‫تسمية‬ • ‫الموقع‬‫على‬ ‫رفعها‬‫يتم‬‫التي‬‫والملفات‬‫نت‬‫ر‬‫االنت‬‫صفحات‬‫من‬ ً‫كال‬‫ملفات‬‫تسمية‬ • ‫بالق‬‫ام‬‫ز‬‫االلت‬‫مع‬‫الصفحة‬‫بموضوع‬‫وعالقة‬‫مدلول‬‫ولها‬‫وشائعة‬‫بسيطة‬‫اسماء‬‫استخدام‬ ‫التالية‬‫واعد‬ ‫الصفحات‬‫لتسمية‬ : o ‫نت‬‫ر‬‫االنت‬ ‫في‬‫المعيارية‬‫اللغة‬‫نها‬‫ال‬‫االنجليزية‬‫باللغة‬‫الصفحات‬‫تسمية‬ . o ‫ك‬‫المركبة‬‫االسماء‬ ‫تجنب‬ PowerPoint-Presentation o ‫الصغير‬‫الوسطي‬‫خط‬‫استخدام‬‫تجنب‬ ( - ) ‫التحتي‬‫الخط‬‫او‬ ( _ ) ‫المسافات‬‫او‬ o ‫الكبيرة‬‫االنجليزية‬‫ف‬‫و‬‫الحر‬‫استخدام‬‫عدم‬ Capital Letters ( ‫استخدام‬‫تماما‬‫تجنب‬ ‫نت‬‫ر‬‫االنت‬‫تطبيقات‬‫تطوير‬‫في‬‫كبيرة‬‫ف‬‫و‬‫حر‬‫ي‬‫ا‬ ) o ‫ا‬‫او‬‫المتصفح‬‫وصول‬‫فرص‬‫كانت‬‫ما‬‫كل‬ ‫وسهل‬‫واضح‬‫التشعبي‬‫تباط‬‫ر‬‫اال‬‫كان‬ ‫ما‬‫كل‬ ‫لمستخدم‬ ‫اسهل‬ . ‫نت‬‫ر‬‫االنت‬‫موقع‬‫مكونات‬‫تنظيم‬
  • 5. MISY 322 -Dr. Waleed Afndy 5  ‫مقدمة‬ • ‫نت؟‬‫ر‬‫االنت‬‫صفحات‬‫في‬‫عمله‬‫شخص‬‫ي‬‫ال‬‫يمكن‬‫الذي‬‫الشيء‬‫هو‬‫ما‬ o ‫االجابة‬ : ‫متناسقة‬‫غير‬‫او‬‫بشعة‬‫نت‬‫ر‬‫انت‬‫صفحات‬‫إنشاء‬ . • ‫اال‬‫المبادئ‬‫تعلم‬‫يجب‬‫متناسق‬‫غير‬‫او‬‫بشع‬‫بشكل‬‫نت‬‫ر‬‫االنت‬‫صفحات‬‫إنشاء‬‫لتجنب‬ ‫للتصميم‬‫ساسية‬ . • ‫هي‬ ‫االساسية‬‫االربعة‬‫المبادئ‬ : o ‫الصفحة‬‫لمحتويات‬‫المحاذاة‬ o ‫الصفحة‬‫محتويات‬‫تقارب‬ o ‫التصميم‬‫ار‬‫ر‬‫وتك‬‫تناغم‬ o ‫التباين‬ o ‫الصفحة‬‫لمحتوى‬‫اللغوي‬‫الجانب‬‫التحقق‬ • ‫الصفحات‬‫تنتقل‬‫المبادئ‬‫هذه‬‫خالل‬‫من‬ ‫العشوائي‬‫المظهر‬‫من‬ ‫الى‬ ‫افي‬‫ر‬‫االحت‬ ‫نت‬‫ر‬‫االنت‬‫صفحات‬‫تصميم‬ ‫مبادئ‬
  • 6. MISY 322 -Dr. Waleed Afndy 6  ‫الصفحة‬‫محتويات‬‫محاذاة‬ • ‫المحاذاة‬ : ‫محتويات‬‫تنسيق‬‫اسلوب‬‫هي‬ ( ،‫ر‬‫صو‬،‫نصوص‬ )... ‫بطر‬‫جنب‬‫الى‬‫جنبا‬‫الصفحة‬ ‫تظهر‬‫يقة‬ ‫تب‬‫ر‬‫وم‬‫افي‬‫ر‬‫احت‬‫بشكل‬‫الصفحة‬ . • ‫المحاذة‬‫نواع‬‫ا‬ : o ‫االفقية‬‫المحاذاة‬ Horizontal alignment o ‫العامودية‬‫المحاذاة‬ Vertical alignment • ‫اال‬‫الموقع‬‫صفحات‬‫جميع‬‫على‬‫وتطبيقها‬‫واحدة‬‫وعمودية‬‫واحدة‬‫افقية‬‫محاذاة‬‫اختيار‬‫يجب‬ ‫ني‬‫و‬‫تر‬‫لك‬ ( ‫الموقع‬‫صفحات‬‫في‬‫المحاذاة‬‫تغيير‬‫يجب‬ .) ‫نت‬‫ر‬‫االنت‬‫صفحات‬‫تصميم‬ ‫مبادئ‬
  • 7. MISY 322 -Dr. Waleed Afndy 7  ‫الصفحة‬‫محتويات‬‫تقارب‬ • ‫المحتويات‬‫تقارب‬ : ‫تقاربه‬‫حيث‬‫من‬‫الصفحة‬‫لمحتويات‬‫العالقات‬‫تكوين‬‫كيفية‬‫هي‬ ‫من‬‫تباعدها‬‫او‬‫ا‬ ‫البعض‬‫بعضها‬ . • ‫الصفحة‬‫محتويات‬ ‫يع‬‫ز‬‫تو‬‫عملية‬‫في‬‫وعي‬‫هناك‬‫يكون‬‫ان‬‫يجب‬ : o ‫البعض‬‫بعضها‬‫مع‬‫تجميعها‬ o ‫بينها‬‫فيما‬‫مسافات‬‫ضع‬‫و‬‫و‬‫إبعادها‬‫او‬ . • ‫المستخد‬‫خاللها‬‫من‬‫يتمكن‬‫التي‬‫الحقول‬‫يع‬‫ز‬‫تو‬‫هو‬ ‫الصفحة‬‫محتويات‬‫لتقارب‬‫مثال‬ ‫ادخال‬‫من‬‫م‬ ‫البيانات‬ : o ‫ف‬‫او‬‫مسافة‬‫يليها‬‫البعض‬‫بعضها‬‫مع‬‫الشخصية‬‫المعلومات‬‫حقول‬‫ومقاربة‬‫تجميع‬ ‫اغ‬‫ر‬ o ‫البعض‬‫بعضها‬‫مع‬ ‫االتصال‬‫معلومات‬‫تجميع‬‫ثم‬‫ومن‬ . ‫نت‬‫ر‬‫االنت‬‫صفحات‬‫تصميم‬ ‫مبادئ‬
  • 8. MISY 322 -Dr. Waleed Afndy 8  ‫التصميم‬‫ار‬‫ر‬‫وتك‬‫تناغم‬ • ‫التصميم‬‫تناغم‬ : ‫المشتركة‬‫تيبات‬‫ر‬‫الت‬‫او‬ ‫الخصائص‬‫ار‬‫ر‬‫تك‬‫خالل‬‫من‬‫العناصر‬‫ربط‬‫هو‬ ‫بينها‬‫فيما‬ (. ‫مثل‬ : ‫ر‬‫الصو‬‫عرض‬‫وطريقة‬‫الخطوط‬‫توحيد‬ ) • ‫التصميم‬‫ا‬‫ر‬‫تك‬ : ‫نت‬‫ر‬‫االنت‬‫تطبيق‬‫او‬‫موقع‬‫صفحات‬‫كل‬‫عبر‬‫العناصر‬ ‫بعض‬‫ار‬‫ر‬‫تك‬‫هو‬ . • ‫نت‬‫ر‬‫االنت‬‫لموقع‬‫العام‬‫المظهر‬‫توحد‬‫والتي‬‫ة‬‫ر‬‫المكر‬‫العناصر‬ : o ‫الصفحات‬‫بين‬‫التنقل‬‫قائمة‬‫او‬‫الصفحات‬‫بين‬‫التنقل‬‫ايقونات‬ . o ‫االلوان‬ o ‫الصفحة‬‫تقسيم‬‫تنسيق‬ o ‫المحتويات‬‫تنسيق‬‫خصائص‬ ‫نت‬‫ر‬‫االنت‬‫صفحات‬‫تصميم‬ ‫مبادئ‬
  • 9. MISY 322 -Dr. Waleed Afndy 9  ‫التباين‬ Contrast • ‫الموقع‬‫لصفحات‬‫المتصفح‬‫نظر‬‫يجذب‬‫ما‬‫هو‬‫التباين‬ . • ‫تمك‬‫متدرجة‬‫هرمية‬‫بنية‬‫إنشاء‬‫خالل‬‫من‬‫الصفحة‬‫لعناصر‬‫النظر‬‫جذب‬‫يحقق‬‫التباين‬ ‫من‬‫المتصفح‬‫ن‬ ‫بسرعة‬‫يحتاجها‬‫التي‬‫المعلومة‬‫الى‬‫والوصول‬‫الصفحة‬‫محتويات‬‫مسح‬ .  ‫الصفحة‬‫لمحتوى‬ ‫اللغوي‬‫الجانب‬ ‫التحقق‬ • ‫ت‬‫ان‬‫يمكن‬‫كما‬‫للصفحة‬‫افي‬‫ر‬‫االحت‬‫المظهر‬‫تدمر‬‫ان‬‫يمكنها‬‫والنحوية‬‫االمالئية‬‫االخطاء‬ ‫المستخدم‬‫ضع‬ ‫المحتوى‬‫من‬‫المقصود‬ ‫فهم‬‫في‬‫تعارض‬‫او‬‫كد‬‫تا‬‫عدم‬‫موقف‬‫في‬ . • ‫كبيرة‬‫بنسبة‬‫اللغوية‬‫االخطاء‬‫من‬‫يقلل‬‫ان‬‫يمكن‬‫االلي‬‫اللغوي‬‫المصحح‬‫استخدام‬ . ‫نت‬‫ر‬‫االنت‬‫صفحات‬‫تصميم‬ ‫مبادئ‬
  • 10. MISY 322 -Dr. Waleed Afndy 10  ‫الصفحة‬‫تنسيق‬ WebPageLayout • ‫متميز‬‫ني‬‫و‬‫تر‬‫الك‬‫موقع‬‫لتطوير‬‫االهمية‬‫بالغ‬‫امر‬‫هو‬ ‫الصفحة‬‫تنسيق‬ • ‫في‬‫يتسبب‬‫للصفحة‬‫السيء‬‫التنسيق‬ : o ‫الموقع‬‫صفحات‬‫بين‬‫فيما‬‫التنقل‬‫صعوبة‬ . o ‫الصفحة‬‫على‬‫المستخدم‬‫او‬‫المتصفح‬‫يحتاجها‬‫التي‬‫المعلومات‬‫ايجاد‬‫صعوبة‬ . o ‫ية‬‫ؤ‬‫للر‬‫جاذب‬‫غير‬ ‫الموقع‬‫وتصميم‬‫الصفحة‬ ‫تنسيق‬
  • 11. MISY 322 -Dr. Waleed Afndy 11  ‫الجداول‬ ‫استخدام‬ • ‫الجدا‬‫استخدام‬‫هو‬‫للصفحة‬ ‫اضح‬‫و‬‫و‬‫متميز‬‫تنسيق‬‫على‬ ‫الحصول‬‫لضمان‬‫طريقة‬ ‫افضل‬ ‫لتنسيق‬ ‫ول‬ ‫الصفحة‬ • ‫ئي‬‫ر‬‫م‬‫غير‬‫بشكل‬‫الصفحة‬‫حدود‬‫وضع‬‫يجب‬ • ‫جدول‬‫هو‬ ‫الصفحات‬‫تنسيق‬‫في‬‫شيوعا‬‫ثر‬‫االك‬ ‫الجدول‬ 2 × 2 ‫الموقع‬‫وتصميم‬‫الصفحة‬ ‫تنسيق‬
  • 12. MISY 322 -Dr. Waleed Afndy 12  ً‫شيوعا‬‫ثر‬‫االك‬‫الصفحة‬‫اء‬‫ز‬‫اج‬‫تقسيم‬ ‫الموقع‬‫وتصميم‬‫الصفحة‬ ‫تنسيق‬ ‫القائمة‬ ‫الصفحة‬‫س‬‫ا‬‫ر‬ ‫المحتوى‬ ‫الشعار‬ • ‫العربية‬‫باللغة‬‫الصفحات‬‫في‬ ‫يتم‬ ‫الى‬‫والشعار‬‫القائمة‬‫موقع‬‫عكس‬ ‫طر‬‫اعدادات‬‫مع‬‫ليتوافق‬‫اليمين‬ ‫يقة‬ ‫والت‬‫العربية‬‫باللغة‬‫تابة‬‫الك‬ ‫من‬‫تبدا‬‫ي‬ ‫اليسار‬‫الى‬‫اليمين‬
  • 13. MISY 322 -Dr. Waleed Afndy 13  ‫الجداول‬ ‫داخل‬ ‫الجداول‬ ‫الموقع‬‫وتصميم‬‫الصفحة‬ ‫تنسيق‬ ‫الخارجي‬‫الجدول‬ ‫الخارجي‬‫الجدول‬‫داخل‬‫جدول‬ ‫الداخلي‬‫الجدول‬‫داخل‬‫جدول‬
  • 14. MISY 322 -Dr. Waleed Afndy 14  ‫جدول‬‫في‬‫االبعاد‬ 2 × 2 ‫الموقع‬‫وتصميم‬‫الصفحة‬ ‫تنسيق‬ ‫القائمة‬ ‫الصفحة‬‫س‬‫ا‬‫ر‬ ‫المحتوى‬ ‫الشعار‬ ‫حتى‬ 650 ‫بكسل‬ 100 - 140 ‫بكسل‬ • ‫العرض‬ ‫الكلي‬ ‫للصفحة‬ 760 ‫بكسل‬ . • ‫يتفاوت‬ ‫عرض‬ ‫القائمة‬ ‫ما‬ ‫بين‬ 100 ‫إلى‬ 140 ‫بكسل‬ • ‫عرض‬ ‫س‬‫ا‬‫ر‬ ‫الصفحة‬ ‫والمحتوى‬ ‫المتبق‬ ‫ي‬ ‫بعد‬ ‫خصم‬ ‫العرض‬ ‫المخصص‬ ‫للقائمة‬ ‫ويص‬ ‫ل‬ ‫حتى‬ 650 ‫بكسل‬ • ‫يجب‬ ‫محاذاة‬ ‫الجدول‬ ‫االساسي‬ ‫كمتوسط‬ ‫ليتوافق‬ ‫مع‬ ‫عرض‬ ‫جميع‬ ‫مقاسات‬ ‫ض‬‫و‬‫و‬ ‫وح‬ ‫الشاشات‬
  • 15. MISY 322 -Dr. Waleed Afndy 15  ‫الموقع‬‫تقسيم‬ • ‫ئيسية‬‫ر‬‫ال‬‫الصفحة‬‫او‬‫البداية‬‫صفحة‬ ‫اال‬‫باللغة‬‫وتسمى‬ ‫الموقع‬‫ر‬‫و‬‫يز‬‫من‬‫اه‬‫ر‬‫ي‬‫ما‬‫اول‬‫وهي‬ ‫نجليزية‬ Splash Page ‫هو‬‫ئيسية‬‫ر‬‫ال‬‫الصفحة‬‫ملف‬ ‫واسم‬‫عنوان‬‫يكون‬‫ما‬‫وعادة‬ index.html o ‫خالل‬‫من‬‫االنتقال‬‫ويسهل‬‫الموقع‬‫عن‬‫معلومات‬‫تقدم‬‫للنظر‬‫جاذبة‬‫تكون‬‫ان‬‫يجب‬ ‫بقية‬‫الى‬‫ها‬ ‫الموقع‬‫صفحات‬ . • ‫الصفحة‬‫او‬‫القالب‬‫على‬ ً‫اعتمادا‬‫محتواها‬‫وتطوير‬‫بنائها‬‫يتم‬‫الباقية‬‫الموقع‬‫صفات‬ ‫تم‬‫التي‬‫النموذجية‬ ‫السابق‬‫الفصل‬‫في‬‫شرحها‬ . o ‫ويت‬‫الفرعية‬‫نت‬‫ر‬‫االنت‬‫صفحات‬‫تصنيف‬‫في‬‫متبع‬‫اسلوب‬‫هناك‬‫يكون‬‫ان‬‫يجب‬ ‫خالل‬‫من‬‫ذلك‬ ‫م‬ ‫شرحه‬‫سيتم‬‫كما‬ ‫الموقع‬‫خريطة‬ . ‫الموقع‬‫وتصميم‬‫الصفحة‬ ‫تنسيق‬
  • 16. MISY 322 -Dr. Waleed Afndy 16  ‫الموقع‬‫خريطة‬ • ‫الت‬‫الصفحات‬‫تصنيف‬‫وكيفية‬‫الصفحات‬‫بين‬‫العالقة‬‫إلظهار‬‫الموقع‬‫خريطة‬‫تصمم‬ ‫موقع‬‫يحتويها‬‫ي‬ ‫نت‬‫ر‬‫االنت‬ . • ‫الموقع‬‫صفحات‬‫وتسلسل‬‫العالقة‬‫لتظهر‬‫الخطوط‬‫المرسومة‬‫الموقع‬‫خريطة‬‫تستخدم‬ ‫الموقع‬‫وتصميم‬‫الصفحة‬ ‫تنسيق‬ ‫الصفحات‬ ‫الداخلية‬ ‫ئيسية‬‫ر‬‫ال‬‫الصفحة‬ index.html ‫نية‬‫و‬‫تر‬‫االلك‬‫الخدمات‬ app.html EMES emes.aspx Centra centra.aspx ‫الطالب‬ students.html ‫المنتسبين‬ staff.html
  • 17. MISY 322 -Dr. Waleed Afndy 17  ‫مقدمة‬ • ‫لغة‬‫تقدمه‬‫مما‬‫بعيدا‬‫ذهبت‬‫نت‬‫ر‬‫االنت‬‫تطوير‬‫في‬‫الحديثة‬‫التقنيات‬ HTML ‫صفحات‬‫لتطوير‬ ‫نت‬‫ر‬‫االنت‬ . • ‫حول‬‫الفكرة‬ « ‫الغني‬‫العميل‬ » ‫او‬ « ‫الغني‬‫الزبون‬ «» Rich Client » ‫النشطة‬‫الواجهة‬‫هي‬ ‫بلغة‬‫ة‬‫ر‬‫المطو‬‫الصفحة‬‫تقدمه‬‫مما‬‫ثر‬‫اك‬‫ية‬‫ؤ‬‫للر‬‫والمثيرة‬‫التفاعلية‬ HTML . • ‫الغنية‬‫نت‬‫ر‬‫االنت‬‫تطبيقات‬ Rich Internet Application (RIA) ‫التي‬‫التقنيات‬‫هي‬ ‫الغني‬‫العميل‬‫واجهات‬‫سلوب‬‫با‬‫تعمل‬‫تطبيقات‬‫عمل‬‫تمكن‬ rich client . • ‫العمليات‬‫لتنفيذ‬‫العميل‬‫او‬‫المستخدم‬‫جانب‬‫الغنية‬‫نت‬‫ر‬‫االنت‬‫تطبيقات‬‫تستخدم‬ ‫عرض‬‫يمكنها‬‫التي‬ ‫العالية‬‫واالستجابة‬‫ثافة‬‫بالك‬‫تمتاز‬‫وتطبيقات‬‫خدمات‬‫وتقديم‬‫محتويات‬ . ‫الغنية‬ ‫نت‬‫ر‬‫االنت‬‫تطبيقات‬
  • 18. MISY 322 -Dr. Waleed Afndy 18  ‫غنية‬‫نت‬‫ر‬‫االنت‬‫تطبيقات‬‫تجعل‬ ‫التي‬ ‫الصفات‬ • ‫كالتالي‬‫الغنية‬‫نت‬‫ر‬‫االنت‬‫تطبيقات‬‫في‬‫الغنى‬‫مفهوم‬‫وصف‬‫يمكن‬ : o ‫لها‬‫حاجة‬‫ال‬‫التي‬‫الزيادة‬‫بدون‬‫المعلومات‬‫غنى‬ o ‫نة‬‫و‬‫المر‬‫حيث‬‫من‬‫العرض‬‫غنى‬ o ‫الشخصية‬‫االجهزة‬‫على‬‫المثبتة‬‫التطبيقات‬‫تحاكي‬‫بحيث‬‫التفاعلية‬‫غنى‬ o ‫يضيف‬‫مما‬‫االستخدام‬‫سلة‬‫تكون‬‫بحيث‬‫التجربة‬‫غنى‬ ‫المتعتة‬ ‫م‬‫استخدامها‬‫في‬ ‫قبل‬‫ن‬ ‫اء‬‫ر‬‫والخب‬‫المبتدئين‬ o ‫للم‬‫جذب‬‫عامل‬‫يمثل‬‫وهو‬‫توب‬‫المك‬‫الجانب‬‫من‬‫ثر‬‫اك‬‫ئي‬‫ر‬‫الم‬‫الجانب‬‫على‬‫التركيز‬ ‫ستخدم‬ o ‫العدي‬‫بين‬‫التنقل‬‫من‬ ً‫بدال‬‫واحدة‬‫صفحة‬‫في‬‫المقدمة‬‫الخدمات‬‫اختصار‬‫امكانية‬ ‫الصفحات‬‫من‬‫د‬ ‫نجاز‬‫ال‬ ‫محددة‬‫مهمة‬ ‫الغنية‬ ‫نت‬‫ر‬‫االنت‬‫تطبيقات‬
  • 19. MISY 322 -Dr. Waleed Afndy 19  ‫الغنية‬‫نت‬‫ر‬‫االنت‬‫تطبيقات‬ ‫على‬‫مثال‬ • ‫اال‬‫تطبيقات‬‫على‬‫االمثلة‬ ‫احد‬‫هي‬‫التفاعلية‬ ‫ائط‬‫ر‬‫الخ‬ ‫الغنية‬‫نت‬‫ر‬‫نت‬ ‫للتالي‬‫ئي‬‫ر‬‫م‬‫وبعرض‬‫وجذاب‬‫شيق‬‫سلوب‬‫با‬‫تقدم‬‫والتي‬ : o ‫المعلومات‬ o ‫البيانات‬ o ‫المعرفة‬ o ‫النص‬‫او‬‫ء‬‫و‬‫المقر‬‫الجانب‬‫على‬‫ئي‬‫ر‬‫الم‬‫الجانب‬‫تقدم‬ ‫ي‬ . ‫الغنية‬ ‫نت‬‫ر‬‫االنت‬‫تطبيقات‬
  • 20. MISY 322 -Dr. Waleed Afndy 20  ‫الغنية‬‫نت‬‫ر‬‫االنت‬‫تطبيقات‬‫في‬ ‫المستخدمة‬ ‫التقنيات‬ • Java o ‫وغنية‬‫معقدة‬‫عميل‬‫تطبيقات‬‫إنشاء‬‫الجافا‬‫لغة‬‫تمكن‬ o ‫ا‬‫تطبيقات‬‫إنشاء‬‫صعوبة‬‫او‬‫التعقيد‬‫هو‬ ‫الجافا‬‫استخدام‬‫في‬‫االساسية‬‫المشكلة‬ ‫نت‬‫ر‬‫النت‬ ‫الغنية‬ ( ‫م‬ ‫ات‬‫ر‬‫العش‬‫يتطلب‬‫بسيط‬‫بيانية‬‫معلومات‬‫او‬‫بسيط‬‫نموذج‬‫تطوير‬‫حتى‬ ‫ر‬‫سطو‬‫ن‬ ‫االكواد‬ ‫السهلة‬‫المهام‬‫هذه‬‫لتطوير‬ ) • Adobe Flash o ‫حيث‬‫من‬ ‫والجذابة‬‫التفاعلية‬‫نت‬‫ر‬‫االنت‬‫صفحات‬‫لتطوير‬‫ناضج‬‫ي‬‫تجار‬‫منتج‬‫هو‬ ‫الرسومات‬ ‫ر‬‫الصو‬‫وتحريك‬ . o ‫تعبئتها‬‫يمكن‬‫نماذج‬‫تطوير‬‫امكانية‬‫كذلك‬‫ويتضمن‬ . o ‫ان‬‫النسبة‬‫وتقدر‬‫العمالء‬‫اجهزة‬‫من‬‫العديد‬‫على‬‫مثبتة‬‫تقنية‬‫هي‬ 90 % ‫الحاسب‬‫اجهزة‬‫من‬ ‫الفالش‬‫مشغل‬‫بها‬‫مثبت‬ . ‫الغنية‬ ‫نت‬‫ر‬‫االنت‬‫تطبيقات‬
  • 21. MISY 322 -Dr. Waleed Afndy 21  ‫الغنية‬‫نت‬‫ر‬‫االنت‬‫تطبيقات‬ ‫سلبيات‬ • ‫نسبيا‬‫تفعة‬‫ر‬‫م‬‫تطويرها‬‫كلفة‬ . • ‫اكبر‬‫معلوماتية‬‫وامكانيات‬‫الحاسب‬‫استخدام‬‫في‬‫اكبر‬ ‫ات‬‫ر‬‫مها‬‫الى‬‫المستخدم‬‫يحتاج‬ • ‫المتوفرة‬‫االمكانيات‬‫او‬‫االستخدام‬‫سهولة‬‫موضوع‬‫في‬‫المشاكل‬‫بعض‬ ( ‫مثل‬ : ‫ز‬‫توفر‬‫عدم‬ ‫ايقونة‬‫او‬‫ر‬ ‫العودة‬ ) • ‫واالستكشافي‬‫التفاعلي‬‫الحس‬‫يمتلك‬‫ان‬‫المستخدم‬‫على‬‫يجب‬ • ‫معلو‬‫عبء‬‫او‬‫له‬‫بالنسبة‬‫مهمة‬‫غير‬‫كمعلومات‬‫المعلومات‬‫غنى‬‫يتقبل‬‫االشخاص‬‫بعض‬ ‫غير‬‫ماتي‬ ‫ي‬‫ر‬‫و‬‫ضر‬ . • ‫المست‬‫ا‬‫العميل‬‫جهزة‬‫ال‬‫الداخلية‬‫المصادر‬‫على‬‫الدخول‬‫من‬‫تحد‬‫اصبحت‬‫الحماية‬‫امج‬‫ر‬‫ب‬ ‫خدم‬ . ‫الغنية‬ ‫نت‬‫ر‬‫االنت‬‫تطبيقات‬