#1  
قديم 28/12/2008, 08:54 PM
موقوف
تاريخ التسجيل: 22/12/2004
المكان: الرياض
مشاركات: 682
Post الباب الأول : القواعد الأساسية - الفصل الخامس

بسم الله الرحمن الرحيم

قبل الدخول في الفصل الخامس : مقدمة عن التصميم


أرجو تحميل ملخص الفصول السابقة (الفصل الأول - الفصل الثاني - الفصل الثالث - الفصل الرابع) من الباب الأول (القواعد الأساسية).


لتحميل الملخص للفصول السابقة : إضغط هنا
اضافة رد مع اقتباس
  #2  
قديم 28/12/2008, 09:13 PM
موقوف
تاريخ التسجيل: 22/12/2004
المكان: الرياض
مشاركات: 682
Post الباب الأول : القواعد الأساسية - الفصل الخامس : مقدمة عن التصميم

بسم الله الرحمن الرحيم

إن المصممين المحترفين بشكل عام ومصممي المواقع الإلكترونية على الشبكة العنكبوتية (Internet) يعتمدون على مقاييس عالمية (Standard) أثناء قيامهم بالعمل.

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

المقاييس الدولية (1-1) :
*********************


كما نعلم جميعنا أن شاشة العرض للحاسب الآلي تخضع لمقاييس العرض الدولية والتي تظهر من خلال أنظمة التشغيل المختلفة ، مثلاً في نظام التشغيل (Windows Vista) ومن خلال :

الضغط على الزر الأيمن على سطح المكتب في مكان فارغ – اختيار ( Personalize ) من القائمة المنسدلة ستظهر لنا هذه النافذة:


ومن ثم نقول باختيار (Display Settings) من خلال ضغط عليها بزر الفأرة ، كما هو موضح من الصورة أعلاه .

ستظهر لنا هذه النافذة الجديدة :


لاحظ من السهم الأحمر وكلمة ( Resolution ) وهي خاصة بتحديد مقاس العرض والطول لشاشة الحاسب الآلي (Display Screen).

وكما هو مبين فإن وحدة القياس المستخدمة هي (Pixels ) وهي تعني : أصغر عنصر في الصورة والتصوير الإلكتروني وتستخدم في أجهزة التلفاز ( TVs ) وشاشات الحاسب الآلي ( Monitors ) وهي تكون على شكل مربعات متجاورة متمازجة الألوان.

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


ملاحظة : كلما زادت دقة الشاشة (Resolution) كلما كانت الصورة أكثر دقة وصفاء.

مقاييس التصميم الأساسية (2-1) :
****************************


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

فيتضح من الجدول السابق أن أقصر عرض موجود هو : 800 Pixel ، وعليه يجب أن لا يزيد عرض الصفحة عن ذلك لكي لا يظهر الموقع في صورة أكبر من حجم شاشة العرض ، لكي لا يظهر شريط التمرير العرضي في متصفح الإنترنت ، مما قد يسبب الإزعاج لزوار الموقع الإلكتروني ونفورهم منه.

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

إذاً المقاس الأفضل لتصميم صفحات الإنترنت هو:


بحيث نطرح 20 Pixel من كل من القيمة الدنيا للعرض وهي : 800 Pixel ومن القيمة الدنيا من الطول وهي : 600 Pixel فيصبح لدينا العرض والطول المناسب :


مقاييس التصميم التفصيلية (3-1) :
****************************


لقد تعلمنا من الجزئيين (1-1) و (1-2) فكرة مقاييس الرؤية المستخدمة وعليه استطعنا تحديد أفضل المقاييس الخاصة بتصميم صفحات الإنترنت بحيث تظهر بصورة صافية وفق حجم مستعرض الإنترنت لجميع مستخدمي الحاسب الآلي في العالم.

ربما لاحظتم قصر الطول المستخدم وهو 580 Pixel ، فيجب عدم القلق من هذه الناحية بالتحديد ، فسوف نرى في الأبواب والفصول القادمة ما يجعل طول الصفحة مناسب جداً من خلال نظام الترتيب بالجداول والذي سيتم شرحه بالتفصيل لاحقاً.

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

* مقاييس الشعارات ( Logos ).

* رايات الموقع ( Banners ).

* الحواشي السفلية ( Footers ).

* مقاييس الأزرار ( Buttons ).

* أجسام التصميم (Display Bodies).

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

مقاييس الشعارات Logos 1-3-1 :
****************************


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

إن المقياس الدولي المعتمد لأي شعار في مواقع الإنترنت هو 100 * 100 Pixels ، بحيث يكون مربع الشكل كما في الصور التالية:


ملاحظة : ليس المقصود بأن يكون شكل الشعار مربعاً ، وإنما المحيط الأقصى له يجب أن يكون في حدود : 100 * 100 Pixels .

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

مقاييس الرايات Banners 2-3-1 :
***************************


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

إن الرايات The Banners تنقسم إلى ثلاثة أقسام :

1. الراية العلوية الرئيسية (Main Banners) : وهي موجودة في 95% من المواقع الإلكترونية ، وتمثل المتغير الثابت في جميع الصفحات.
2. الراية العلوية المتغيرة (Moving Banners) : وهي الجيل الجديد من الرايات التي تتغير مع مرور الوقع حسب الوقت أو بلد الدخول.
3. الرايات التفاعلية (Dynamic Banners) : وهي النوع المعتمد على التصميم الحركة المتوالي والذي يحتوي على روابط لصفحات أخرى.

إن المقياس الدولي المعتمد لأي شعار في مواقع الإنترنت هو 760 * 150 Pixels ، بحيث يكون مربع الشكل كما في الصور التالية :


ملاحظة : إن هذا المقاس ليس إلزامياً على الإطلاق ، ولكنها من المقاسات المفضلة لدى الكثير من المصممين.

مقاييس الحواشي السفلية Footers 3-3-1 :
***********************************


تنقسم الحواشي السفلية إلى ثلاثة أنواع :

1. الحاشية السفلية الرئيسية ( Main Footer ) : وهي التي تحتوي على رابط حقوق الملكية الفكرية ، وغالباً ما تكون في قاع الصفحة.
2. الحاشية السفلية للروابط المكملة ( Links Footer ) : وهي التي تحتوي على روابط مختصرة لصفحات الموقع الثانوية.
3. الحاشية السفلية للصور ( Images Footer ) : وهي التي تحتوي على صور متحركة أو خلافة للإعلان عن مواقع أو أمور مستحدثة جديدة في الموقع الإلكتروني.

إن المقاس المعتمد للحاشية السفلية الرئيسية في ميزان المصممين العالميين هي : 20 إلى 25 Pixel فيما يخص الارتفاع ، فيما يخص العرض فهو كما شرحنا سابقاً أنه يجب أن يكون : 760 Pixel ، كما هو موضح في الصورة التالية :


مقاييس الأزرارButtons 4-3-1 :
**************************


إن مقاييس الأزرار تختلف في مفهومها عن باقي المقاييس الأخرى ، فكما هو معروف بأن الأزرار غالباً ما تكون كثيرة ومتتالية ولها تأثيرات بصرية متحركة في أغلب الأحيان.

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

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

وسوف يتم شرح فكرة المقياس الخاص بالأزرار في الأبواب والفصول اللاحقة.


مقاييس جسم التصميمDisplay Body 5-3-1 :
**************************************


من الممكن أن يكون المقياس الأولي للعرض 760 Pixel (ولكن غالباً ما يكون القياس هو 780 Pixel من أجل إضافة بعض المؤثرات الجمالية على برواز التصميم – يأتي شرحها لاحقاً).

وفيما يخص الطول ، فهو 400 Pixel ، ويمكننا التحكم بطول الصفحة لاحقاً من خلال نظام الجداول في برنامج Expression Web (سوف يتم شرح الطريقة لاحقاُ).

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

يعتبر جسم التصميم من أهم أجزاء تصميم المواقع ، فهو الجزء الذي سيحتوي على البيانات والمعلومات (الصور والنصوص وغيرها من الأمور) بشكل أساسي.

وكما سنري في الفصول القادمة أننا سوف ننشأ نموذجين إثنين ، وهما :

1- نموذج التصميم لصفحة البداية.
2- نموذج التصميم لباقي الصفحات الأخرى.

لاحظ الشكل التالي :


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

اخر تعديل كان بواسطة » زعيم الزعماء العالمي في يوم » 30/12/2008 عند الساعة » 09:12 AM
اضافة رد مع اقتباس
  #3  
قديم 28/12/2008, 09:14 PM
موقوف
تاريخ التسجيل: 22/12/2004
المكان: الرياض
مشاركات: 682
إن شاء الله تعالى ، سوف ندخل على الدروس القادمة إبتداء من السبت القادم بحول الله من السنة الميلادية الجديدة .
اضافة رد مع اقتباس
  #4  
قديم 28/12/2008, 09:27 PM
الصورة الرمزية الخاصة بـ miassem
زعيــم مميــز
تاريخ التسجيل: 01/05/2007
مشاركات: 1,957
يعطيك العافيه اخوي عالشرح

بس مافهمت هذولي وشي؟

إقتباس
. الراية العلوية المتغيرة (Moving Banners) : وهي الجيل الجديد من الرايات التي تتغير مع مرور الوقع حسب الوقت أو بلد الدخول.
3. الرايات التفاعلية (Dynamic Banners) : وهي النوع المعتمد على التصميم الحركة المتوالي والذي يحتوي على روابط لصفحات أخرى.

اضافة رد مع اقتباس
  #5  
قديم 28/12/2008, 09:33 PM
موقوف
تاريخ التسجيل: 22/12/2004
المكان: الرياض
مشاركات: 682
Thumbs up

إقتباس
الرسالة الأصلية كتبت بواسطة miassem
يعطيك العافيه اخوي عالشرح

بس مافهمت هذولي وشي؟

أهلاً بك أخي الكريم

Moving Banners هي الصور المتحركه من نوع GIF وأيضاً الصور الفلاشية (وهي عروض متحركة قد تكون متكررة من أجل تجميل الموقع)

Dynamic Banners هي الرايات التفاعلية التلي تحتوي على أزرار وأوامر برمجية ... وهي تتغير بطريقة مستمرة عن طريق الكود البرمجي من قواعد البيانات.


سوف يتم الشرح لاحقاً إن شاء الله تعالى
اضافة رد مع اقتباس
  #6  
قديم 28/12/2008, 09:37 PM
الصورة الرمزية الخاصة بـ miassem
زعيــم مميــز
تاريخ التسجيل: 01/05/2007
مشاركات: 1,957
^^^^^^^^^^^^^

مشكور عالرد اخوي

ان شاء الله بتابع دروسك

اضافة رد مع اقتباس
  #7  
قديم 28/12/2008, 11:33 PM
زعيــم فعــال
تاريخ التسجيل: 10/03/2006
مشاركات: 350
الله يعطيك العافيه ومتابعين معك بإذن الله
اضافة رد مع اقتباس
  #8  
قديم 29/12/2008, 05:15 PM
زعيــم متواصــل
تاريخ التسجيل: 28/07/2006
مشاركات: 144
يال هذا الإبداع ..!!

جزاك الله خيراً ..

ايها المبدع ..

سؤال : هل الرايات هي المقصود بالهيدر ؟؟
اضافة رد مع اقتباس
  #9  
قديم 29/12/2008, 08:57 PM
موقوف
تاريخ التسجيل: 22/12/2004
المكان: الرياض
مشاركات: 682
Thumbs up

إقتباس
الرسالة الأصلية كتبت بواسطة golden_player_7
يال هذا الإبداع ..!!

جزاك الله خيراً ..

ايها المبدع ..

سؤال : هل الرايات هي المقصود بالهيدر ؟؟


الله يعطيك العافية على الرد الجميل

نعم هي البانر العلوي ... أو الهيدر (Header) ...

لا تقلق إن شاء الله سوف نشرحها بالتفصيل الممل
اضافة رد مع اقتباس
  #10  
قديم 30/12/2008, 09:15 AM
زعيــم فعــال
تاريخ التسجيل: 20/10/2008
المكان: Torino ، Madrid
مشاركات: 360
لي عووده ان شاء الله ..
اضافة رد مع اقتباس
  #11  
قديم 07/02/2009, 02:40 PM
في انتظار تفعيل البريد من قبل العضو
تاريخ التسجيل: 16/04/2008
مشاركات: 36
لي عووده ان شاء الله ..
00

اضافة رد مع اقتباس
   


إضافة رد

أدوات الموضوع
طريقة عرض الموضوع

قوانين المشاركة
غير مصرّح لك بنشر موضوع جديد
غير مصرّح لك بنشر ردود
غير مصرّح لك برفع مرفقات
غير مصرّح لك بتعديل مشاركاتك

وسوم vB : مسموح
[IMG] كود الـ مسموح
كود الـ HTML مسموح
Trackbacks are مسموح
Pingbacks are مسموح
Refbacks are مسموح



الوقت المعتمد في المنتدى بتوقيت جرينتش +3.
الوقت الان » 11:09 AM.

جميع الآراء و المشاركات المنشورة تمثل وجهة نظر كاتبها فقط , و لا تمثل بأي حال من الأحوال وجهة نظر النادي و مسؤوليه ولا إدارة الموقع و مسؤوليه.


Powered by: vBulletin Version 3.8.7
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd

Google Plus   Facebook  twitter  youtube