Contenu connexe Similaire à تصميم مواقع.pptx (20) تصميم مواقع.pptx1. 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
الغنيةنتراالنتتطبيقات سلبيات
•
نسبياتفعةرمتطويرهاكلفة
.
•
اكبرمعلوماتيةوامكانياتالحاسباستخدامفياكبر اترمهاالىالمستخدميحتاج
•
المتوفرةاالمكانياتاواالستخدامسهولةموضوعفيالمشاكلبعض
(
مثل
:
زتوفرعدم
ايقونةاور
العودة
)
•
واالستكشافيالتفاعليالحسيمتلكانالمستخدمعلىيجب
•
معلوعبءاولهبالنسبةمهمةغيركمعلوماتالمعلوماتغنىيتقبلاالشخاصبعض
غيرماتي
يروضر
.
•
المستاالعميلجهزةالالداخليةالمصادرعلىالدخولمنتحداصبحتالحمايةامجرب
خدم
.
الغنية نتراالنتتطبيقات