دورة تصميم موقع احترافى - تصميم موقع كامل بالفوتوشوب والدريم ويفر

[ابو جودي]

الجزء الاول المقدمه والتمهيد

 

الموقع الالكترونى هو عدة صفحات 

يوجد الموقع الالكترونى على مساحه خاصة به على سيرفر

يتم الوصول للموقع الالكترونى من خلال الدومين 

 

طيب الكلام ده كبير قوى ممكن نبسطه شويه اه طبعا قوى قوى 

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

- السيــــــــــــــــرفر : هو المساحه على الخادم التى تحتوى على كل الصفحات والميديا الخاصه بتصميم الموقع 

- الدوميــــــــــــــــن : هو عنوان الموقع ويبدأ عادة بـ  com.اسم الموقع .www  مثلا او  net.اسم الموقع. www   مثلا او  eg.اسم الموقع. www   ......

 

طيب حلو قوى الكلام ده الموقع الالكترونى زى ما قلنا من شوية بيتمون من صفحات والتى قد تحتوى على الصور او المقالات او الفيديوهات ولكن معالجة البيانات على الموقع لكى تتم تحتاج لقاعدة بيانات 

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

 

طيب يبقى كده علشان نشتغل على تصميم موقع الكترونى لازم له الاتى    

1- قاعدة بيانات ( أكسس )     ويتم ربط الموقع بقاعدة البيانت عن طريق   odbc

2- سيرفر

3- برنامج التكويد الخاص بالبرمجة وكتابة الاكواد اللازمة  ( دريم ويفر )

 

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

انا هأشرح حالا ان شاء الله 

 

نركز لاننا كده بدأنا الشغل الجد الله يبارك لكم

نقوم بتخصيص مكان على الهارد ديسك وذلك لجعله هو السيرفر المحلى

انا مثلا على سبيل المثال خصصت المكان على القرص  c   وقمت بإنشاء فولدر بإسم    www

 

ولتفعيل السيرفر المحلى 

نفتح كنترول بانل  Control Panel واللى غالبا بتكون بالشكل ده

ثم نقوم بتغير العرض كما هو موضح فى الصورة التالية

ثم نقوم بإختيار  Programs and Features    كما هو موضح فى الصورة التالية

تفتح كما بالشكل التالى ونختار  Turn Windows features on or off 

بعد ذلك تفتح عندنا نافذة بهذا الشكل 

من هذه النافذه نختار الـ   ( Internet Information Services ) ونقوم بتفعيله 

نضغط على علامة +  الموجوده بجوار   Internet Information Services  حتى تصبح   -  وتفتح كل الاختيارات التى تندرج تحت الاختيار الاساسى   ( Internet Information Services )   وذلك لتفعيلهم جميعا حتى تصبح كما بالصورة السابقه بوجوده علامة  √ بجوار Internet Information Services

 

نعود مرة اخرى للكنترول بانل  Control Panel ولكن هذه المره نقوم باختيار   Administrative Tools

تفتح لنا نافذه بهذا الشكل 

ونختار منها  Internet Information Services (IIS) Manager   فتفتح لنا نافذه بهذا الشكل 

نقوم بالضغط كليك يمين على اسم الجهاز والمستخدم كما فى الصورة التالية

 فتظهر النافذه بهذا الشكل التالى

نقوم بتغيير البيانات كما فى الشكل التالى 

اسم الموقع طبعا يكون انجليزى بدون مسافات يفضل ان يكون بنفس طريقة اختيار اسم الدومين

تحديد الفولدر الذى تم انشائه لتخصيصه سيرفر محلى على الجهاز الخاص بنا على سبيل المثال كما فعلت انا اسم الفولدر  www  مكان الفولدر القرص  c

نقوم بتغيير رقم البورت من 80  الى 2082

ثم بعد ذلك نقوم بالضغط على   ok

 

كده تمام انتهينا من انشاء السيرفر المحلى الذى سنقوم بتصميم مواقعنا عليه ان شاء الله

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

http://localhost/

تفتح بالشكل التالى 

وللتأكد من فتح الموقع على السيرفر 

http://localhost:2082/

تفتح بالشكل التالى

بهذه النتيجة نكون قد وصلنا الى نهاية الحلقة الاولى ان شاء الله وتفعيل السيرفر المحلى   

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

الى اللقاء   

اخوكم محمد ☺

 

[Morning Dew]

باشمهندس الله يرضى عليك 

 

ليش بدأت بتفعيل السيرفر المحلي ؟!!!

 

وهل تفعيله بيأثر على المساحة أو الأداء !!!

 

اعذرني أستاذي مازلت وإن كبرت طالبة علم 

[أبو العقاب]

أخي الكريم

ان شاء الله سأتابع الدورة من الصفر

أولا :هل يمكن أن أتابع العمل على موقع استضافة يعني على سيرفر الموقع بدل سيرفر محلي 

ثانيا:ألا يلزم قاعدة بيانات sql بدل الآكسس لبناء الموقع

وشكرا

[ابو جودي]

 

باشمهندس الله يرضى عليك 

 

ليش بدأت بتفعيل السيرفر المحلي ؟!!!

 

وهل تفعيله بيأثر على المساحة أو الأداء !!!

 

اعذرني أستاذي مازلت وإن كبرت طالبة علم 

 

 

البداية بتفعيل سيرفر محلى لعرض الشغل بتاعنا لان من غير سيرفر محلى ما نقدر نعرض الشغل كما نقوم بعرضه على الويب

تفعيله لا يؤثر اطلاقا على المساحه ولا اداء الجهاز

 

وممكن نبدا بهذا السيرفر لعرض اعمالنا ومتابعة تصميمها حتى الانتهاء 

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

[ابو جودي]

أخي الكريم

ان شاء الله سأتابع الدورة من الصفر

أولا :هل يمكن أن أتابع العمل على موقع استضافة يعني على سيرفر الموقع بدل سيرفر محلي 

ثانيا:ألا يلزم قاعدة بيانات sql بدل الآكسس لبناء الموقع

وشكرا

 

ممكن تتابع العمل على استضافة حضرتك بدل السيرفر المحلى عادى لكن هتواجه الاتى 

اولا هتحتاج كل شوية ترفع الملفات اللى انت عاوز ترفعها او تضيفها وهتحتاج كل شوية تعدل وده يلزمه وجود الانترنت بصفة مستمره ممكن السرعه تأثر عليك شوية لو النت بطئ

تانى شئ والاهم بالاسلوب ده هتستنزف الباندويث او الترافيك الخاص بك على الفاضى 

ثالث شئ ولا تزعل تحت امرك نلغى الاكسس لو حابب ونشتغل sql  *_^  انت تأمر يا باش مهندس

[ابو جودي]

طيب متابعينا الكرام اللى حابب يشتغل بالسيرفر المحلى اللى نقدر نفعله بالويندوز بدون قواعد بيانات لحد ما ننتهى من تعلم تصميم الصفحة الرئيسية + باقى صفحات الموقع يبقى تمام يفعل زى ما سبق شرحه

اللى حابب يصطب برنامج سيرفر محلى علشان لما نحتاج لقواعد بيانات يبقى تحت امركم وفى الحاله دى ننسى الشرح اللى فات ونسطب برنامج اسمه wamp 

 

ده الموقع الرسمى للبرنامج 

http://www.wampserver.com/en/

طبعا فى تحميل للنسختين    64Bit , 32Bit

 

الروابط المباشر للتحميل 

32Bit

http://cznic.dl.sourceforge.net/project/wampserver/WampServer%202/Wampserver%202.5/wampserver2.5-Apache-2.4.9-Mysql-5.6.17-php5.5.12-32b.exe

 

64Bit

http://cznic.dl.sourceforge.net/project/wampserver/WampServer%202/Wampserver%202.5/wampserver2.5-Apache-2.4.9-Mysql-5.6.17-php5.5.12-64b.exe

 

 

 

برجاء التركيز

اللى عنده ويندوز 32 بيت ينزل الوامب سيرفر الخاص بـ 32 بيت

اللى عنده ويندوز 64 بيت ينزل الوامب سيرفر الخاص بـ 64 بيت

 

برجاء الاتى تحضير البرامج التالية لكل متدرب

Adobe Photoshop CC 

Adobe Dreamweaver CC

wampserver

 

اللى يواجه مشكله فى تحضير او تصطيب البرامج يبلغنى وانا تحت امركم ان شاء الله

[Morning Dew]

اصدار الفوتوشوب CS5 

 

والدريم ويفر 8 

 

وباشتغل بعد إذنك على السيرفر المحلي :) 

 

تم التفعيل يا فندم ^_^ 

 

كذه تمام ! 

[ابو جودي]

السلام عليكم ورحمة الله تعالى وبركاته

متابعينا الكرام

الحلقة الثانية ان شاء الله رب العالمين من الكورس الخاص بتصميم مواقع الانترنت

عنوان الحلقة اليوم   User Interface UI / Web Design 

وسننظر ونلقى الضوء اليوم على User Interface UI / Web Design  واجهة المستخدم من منظور مهم جدا جدا جدا

ان الحقيقة الأساسية التي تكمن في نجاح أي موقع هي واجهة المستخدم او واجهة الاستخدام - User Interface - لذلك الموقع

وهي النقطة التي يجب ان تؤخذ بعيين الاعتبار لدى أي مصمم ويب

ولأن المستخدم لا يرى في هذا الموقع سوى واجهته ولكي تلقي الواجهة ناجحا وحتي تصبح مرغوباً بها لدى أي مستخدم

يجب ان تتوافر فيها بعض المميزات والخصائص يمكن تلخيصها بالنقاط التالية: –

 

1- الدلالة الواضحة Clear Indication : –

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

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

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

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

 

2-الهيكلية The structure principle: –

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

كما ينصح بوضع الأشياء التي ترتبط مع بعضها البعض في مجموعات

ويفضل أيضا فصل الأشياء الغير مرتبطة مع بعضها  

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

 

3-اتباع قاعدة التباين Follow the contrast rule

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

 

4-تجمع العناصر Intuitable Design

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

 

5 – قابلية التصميم للتخمين Intuitable Design:-

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

بعض النصائح التي يجب ان تؤخذ بعين الاعتبار عند التصميم

يجب على مصمم الواجهة وضع ما يلي في الحسبان حينما ينوي تصميم واجهة مستخدم

1. دليل المستخدم غير متوفر للمستخدم

2. في حالة توفر دليل المستخدم، فإن المستخدم لا يقرأه

4. المستخدم لا يحب أن يقرأ

 

خطوات انشاء موقع على شبكة الانترنت:

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

الخطوة الثانية : اسم الموقع
وهى اختيار اسم مناسب للموقع يتناسب مع فكرة الموقع

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

أ. سوف تحتاج الى الصور و الخلفيات الفيديوهات

ب. برامج تصميم الويب و هنالك نوعان منها برامج الجرفيكس و برامج الاكواد البرمجية الخاصة بتصميم صفحات الويب ايا كانت اللغة البرمجية التى تكتب بها

و البرامج المتداولة فى تصميم الويب
1.الفرونت بيدج - والويب اكسبريشن -  والدريم ويفر , وغيرها الكثير والكثير والكثير من البرامج هذا يختص بتصميم الاكواد
2.الادوب فوتوشب لتصميم الجرافيكس كما لا انصح بالارتكاز على برنامج بعينه فخذ من كل شجرة ثمره

جـ. خبره فى التعامل مع هذه البرامج
 

الخطوة الرابعـــة : حجز المساحة على الويب

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

الخطوة السادسة : بعد الانتهاء من تصميم موقعك ارسل ملفات الموقع الى مساحتك على الانترنت

[ابو جودي]

انواع مواقع الانترنت

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

اما المقصود هنا بأنواع المواقع فهو تصنيفها من زاويه اخرى تماما وبمعنى اصح سنقوم بتصنيف انواعها من الزاويه الفنيه او التطبيقيه، والواقع ان للمواقع ثلاثه انواع رئيسيه وهم .

1- مواقع الانترنت الساكنه.
2- مواقع االانترنت الدينامكيه.
3- مواقع التجاره الالكترونيه.

1- مواقع الانترنت الساكنه static web site :
وهى مواقع الانترنت العاديه التى تحتوى على نصوص وصور وغيرها من وسائل العرض النصيه والجرافكيه الثابته والمتحركه طبقا لمحتوى الصفحات وفكرة وهدف الموقع الا ان هذا النوع من المواقع لا يحتوى على امكانيه تغير بياناته بطريقه ديناميكيه متغيره او قاعدة بيانات database يمكن تحديث البيانات من خلالها , حيث يتطلب تغيير اى معلومة او صورة باستخدام ادوات ولغات تطوير المواقع ثم اعاده نشره على الانترنت مره اخرى وبالطبع فإن عدد صفحات الموقع غير محدود ويمكن اضافه المزيد فى اى وقت طبقا للمحتوى المطلوب للموقع .

2- مواقع الانترنت الدينامكيه Dynamic web site :
ويعتبر هذا النوع من المواقع اكثر المواقع تطوراً من المواقع الساكنه حيث يسمح بتغير او اضافة او حذف اى معلومات او صور من صفحاته وجداوله بسهولة تامة من قبل صاحب الموقع او المسئول عنه فى اى وقت يشاء وبأى عدد من المرات دون الرجوع الى مصمم الموقع او الشركه التى قامت بتصميمه، ويتم ادخال واظهار المعلومات وجداول البيانات والصور الموجوده بصفحات المواقع الدينامكيه من خلال قواعد بيانات databases كبيرة تسمح بالاضافه والتحديث المستمر للصفحات ولهذا اطلق عليها المواقع الدينامكيه، ويقوم صاحب الموقع او المسئول عن ادارته بتحديث بيانات الموقع من خلال لوحة تحكم مؤمنة دائما بكلمة سر لا يعرفها سوى مسئول ادارة الموقع .

3- مواقع التجاره الالكترونيه e-commerce :
وهى بالطبع اكثر مواقع الانترنت تطوراً وأهمها من الناحيه التجاريه، وتعد مواقع التجارة الالكترونية بمثابة محال وشركات تعمل على بيع منتجاتها وخدماتها من خلال الويب والانترنت باستخدام طرق دفع اليكترونيه عبر الشبكة ثم توصيل المنتج او الخدمة بعد ذلك للمشترى فى مكانه وتقوم فكرة مواقع التجارة الالكترونية من الناحية العلمية على انشاء موقع ديناميكى يحتوى على كتالوج اليكترونى او صفحات تشرح المنتجات او الخدمات التى تقدمها الجهة صاحبة الموقع مع السماح للمتصفح باختيار ما يرغب منها للشراء ودفع ثمنها باستخدام كروت فى ارسال او شحن المنتجات او الخدمات المطلوبه للعميل المشترى فى مكانه .

[ابو جودي]

مقاييس تصميم صفحات المواقع

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

إن ما يلي يوضح سبب ضرورة التصميم الناجح والمرن على الشبكة الإلكترونية ,وكذلك السبب الذي من أجله تم صنع هذا الدليل.

أجب عن عدد من الأسئلة الأساسية بهدف التركيز:

من سيقوم بزيارة موقعي الإلكتروني ! ... ولماذا ؟

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

قم بتشكيل / تصميم / صفحة قياسية أساسية للموقع الإلكتروني:

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

• ضع في اعتبارك الحيِّز الحقيقي للشاشة. ضع المعلومات الأكثر أهمية إلى أعلى يسار الشاشة .
• لا تفترض حلول بخصوص الشاشة أو تفترض حجمها.
• قم بتسهيل الإطلاع:
• إن غالبية المشاهدين ( حوالي 75%) يقومون أولاً بالإطلاع على النص والقوائم للحصول على المعلومات ( ويقومون بتجاهل الصور) . قم بالتقليل من التفاصيل والعناوين الفرعية في الصفحة الأساسية , ( أقل من 20% يقومون بالقراءة التفصيلية كلمة كلمة ).
• اجعل العرض والتصفح عادياً من حيث المقاييس:
• قم بوضع الشعارات , القوائم , والصفات في مواقع ثابتة وبالإمكان توقعها.
• قم باستعمال (وصلة العودة إلى أعلى) في نهاية الصفحات الطويلة .
• بشكل بديهي قم بتسمية الروابط / الوصلات حسب المضمون والـ (URL) الخاص بالصفحة . قلل من وجود المساحة البيضاء على صفحات القائمة الأساسية. إن هذه المسألة تسلسل وتسهّل عملية البحث.
• قم ببناء المضمون من خلال صفحات متصلة.
• إن الصفحات الموصولة يجب أن تكون ثلاثة أو أقل ضمن الموقع. ويجب دائماً أن يعرف الزائرون أين هم على الموقع ( أين يتواجدون على موقعك) , وأن يكونوا قادرين على الرجوع أو نقطة البداية .
• اجعل النص سهلاً للقراءة ( انظر إلى الدليل الخاص بالكتابة لموقع إلكتروني ) استعمل بحرية كل من النشرات القصيرة , العناوين , العناوين الفرعية , وحجم الحرف . وقم بفصل أجزاء النص بواسطة مساحات بيضاء .

لا تملأ الشاشة بالنص : اي اجعل أجزاء النص تقع في الوسط وأن تكون محاطة بحاشية يسري وحاشية يمنى ومقسمة إلى أعمدة .

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

• ومن أجل أكبر قدر من سهولة الوصول , فإن حجم الحروف يجب أن يكون ملائماً بكشل نسبي , بدلاً من أن يكون ثابتاً أو مطلقاً في حالة
  الثبات.
• فإن أصغر حجم للحروف يجب أن يكون 10 ( PC) أو 12( Macitosh) أومتوسط أو " 3".
• قم باستعمال حجم كبير من الحروف في المواقع التي تخاطب الأطفال الصغار وكبار السن.
• لقد أظهرت الأبحاث وجود اختلاف بسيط من حيث سرعة القراءة أو مسألة التفضيل عند استخدام أحجام وبنوط مختلفة .
• قم باستعمال نوع واحد من البنوط لتوضيح , الاتجاهات والتجوال , وقم باستعمال بنطاً آخر للمضمون . لا تقم باستعمال أكثر من نوعين من
  البنوط ضمن نفس الموقع.
• تجنب أنواع الحروف ذات الأشكال ( الملونة , التي تظهر وتختفي , التي تبدو وكأنها انفلتت من لفافة ) ففي أغلب الأحيان هذه الحروف لا تحقق
  عرضاً مناسباً, أو أنها تعتبر مزعجة.

استعمل الألوان بحكمة :

• إما أن تقوم بتحديد نوعية كل الألوان أو لا تفعل ذلك مع أي منها .
• إن عدم تحديد أي منها سوف يتعارض مع ترتيبات البرمجة الخاصة بكومبيوتر الزائر. في حين أن قيامك بتحديد بعض الألوان فقط , سوف يجعل الآخرين يعيدون ترتيبات البرمجة على أجهزتهم , وهكذا فإن ألوانك المحددة قد تكون مجموعات أو خلطات غير جميلة مع تلك الترتيبات الأصلية.
• قم باستعمال ألوان تختلف عن بعضها البعض بشكل كبير وذلك بالنسبة للون الخلفية من جهة ولون النص من جهة أخرى . ومن المفضل أن تكون الخلفية فاهية (فاتحة) اللون وأن يكون النص داكن اللون.
• تجنب الخلفيات التي تؤثر سلباً على وضوح النص.
• استعمل لوحة ألوان آمنة للمتصفح وتتألف من 216 لوناً. إن هذه الألوان تتسم بالمقاييس المألوفة لجميع المتصفحين .

الصور:

• إن الصور يجب أن لا تتجاوز 75 وحدة من وحدات تشكيل الصورة للبوصة الواحدة (Pixels) . إن هذا هو الحد الذي بالإمكان توصيله عبر الإنترنت . أما ما يزيد عن ذلك فسوف يؤدي إلى تبطيء عملية التنزيل على الجهاز, دون أي زيادة على مدى الرؤية.
• قم باستعمال ملفات الـ ( JPG) وذلك للصور الفوتوغرافية ومن مثل تلك التي تحتوي على ألوان مظللة . في حين قم باستعمال ملفات ( gif) للصور مثل الأشكال ذات المجالات الملونة الواسعة والثابتة .
• نظام بديل يتكون من الرموز . وهو عبارة عن نص وصفي يحل محل , ويصف مضمون أو وظيفة ودور جميع الصور. إن هذا النظام يلائم ذوي المشاكل البصرية . وكذلك يلائم أولئك الذين يقومون بإغلاق أو إلغاء الصور في وسيلة تجوالهم. وكذلك فإن هذا النظام مفيد في مجال وسائل التجوال الخاصة بوصلات المكتبات , وكذلك للوسائل ذات الأساس الرقمي.
• تجنب عرض الصور على أنها وصلات . أما إذا كان ذلك ضرورياً , فإن النص البديل يجب أن يصف محتوى الصفحة الموصلة .
• تجنب الإشارة إلى الصور على أنها نص . بشكل ديكور أو غير ذلك فقد تتحقق قيمة بصرية ضئيلة في حالة وجود حجم نسبي للنص كما وصفنا أعلاه.
• تجنب استعمال الصور الشفافة أو الصور ذات الـ ( Gif) المؤلفة من وحدة واحدة ملونة من الأجزاء التي تتكون منها الصورة على الشاشة دون وجود سبب جيد لعمل ذلك. إن بعض الناس يقومون باستعمال هذه الوسائل كحشوات للوصول إلى شكل ترتيب الصفحة . ينتج عن ذلك أنهم يعملون صفحات لا يمكن استعمالها من قبل الزائرين الذين يتجولون وهم يغلقون برنامج تنزيل الصور.

قم باستعمال القوائم كي تشكل عرضاً أو تصميماً , ولكن :

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

الوصلات:

• كن جيداً في الوصف قدر الإمكان عندما تقوم بوصف مضمون وصلة ما.
• قم بترك فراغ ثم ضع إشارة العمود ثم فراغ , وذلك للفصل ما بين الوصلات التي تأتي بشكل متتالي.
• لا تستعمل عبارات مثل "اضغط هنا" , "أدخل".
• تجنب الصور المستعملة كوصلات , فمن الصعب من ناحية الإبصار الإنتباه إلى كونها وصلات.
• تجنب أسلوب الإنسياب المستمر (Roll Over) للقوائم النازلة من الأعلى إلى الأسفل, إذ أنه من الصعب من ناحية الإبصار معرفة ما إذا كانت هذه القوائم تحتوي على وصلات . كما أنه من الصعب تقديم وصف كافٍ لمحتويات الوصلات.

تجنّب:

• البراويز أو قم باستعمال بديل ليس له إطار.
• برمجة الجافا (Java) والفلاش (Flash) حيث كان ممكناً.
• الأشكال التي ليس لها فائدة حيث إنها تشد الانتباه بعيداً عن المضمون.
• الأشكال التي تفتقر إلى الأعلى وإلى الأسفل , والتي تبرم , والتي تدور أو التي تتحرك بشكل عام دون أن تكون ذات أهمية من حيث القيام بدور توضيحي للمضمون.
• النص المطول الذي يبدو على الشاشة وكأنه انفلت من لفافة .
• شاهد الصفحات الخاصة بك:
• مستعملات ترتيبات برمجة تقوم على أساس الأبيض والأسود وذلك للتأكد من إمكانية وصول ذوي مشكلة عمى الألوان.
• إلغاء الصور , للتأكد من إمكانية وصول ذوي المشاكل البصرية , وكذلك إمكانية وصول التكنولوجيات الخالية من الصور.
• قم بالمشاهدة بواسطة بدائل من وسائل التجوال (Linux , Macintosh , PC... الخ)
• قم بالمشاهدة بواسطة بدائل من وسائل التجوال (Internet Explorer , Netscape , Opera , Linux).
• قم بالمشاهدة بواسطة بدائل من أحجام النص والـ (Windows).

[ابو جودي]

كيف يعمل المصمم ؟

 

اولا:-
أول خطوه يقوم بها اى مصمم حول العالم هو عمل لقاء عمل مع العميل وسؤاله عدة أسئله هامة جدا محورها السؤال التالى على العميل

- ما هى صناعتك ومجال اعمالك ؟

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

 

 

الخطوه البديله

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

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

 

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

 

ثالثا:-
مشكله تحدث دائمآ فى خطوة البرمجه
تجد نفسك بشكل مفاجىء تريد ان تضيف اداه جديده على الموقع ولكن الرد سيكون لك صادم وهو لا نستطيع هذا . أهدء قليلآ وتذكر خطوة التصميم فموافقتك هى صفارة الانطلاق للانتقال المرحله التاليه وهذه المرحله هى أنتقال التصميم من صوره الى مجسم متفاعل تحت يد المبرمج وهنا لا يمكن الاضافه او المسح على التصميم لان اى تعديل سيؤثر على الشكل العام وسيصبح التصميم غير مرتب وفظ للناظريين . أذا تذكر موافقتك على التصميم هى موافقه على الموقع نفسه فأختبارات البرمجه هى خطوه تفاعل ادوات لا أكثر فتريث قليلآ فى خطوة التصميم ولكن لا تطيل فيها

رابعا:

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

هنا الخطأ منحصر عند 3 أفراد فقط

فأما المشكله لدي العميل لانه يريد تغير على الموقع ويرى انه تغير جوهرى لابد منه ( اذا نسى الموقع المنشأ حاليا ودفع من جديد مقابل مادى للموقع ككل بالاضافه الجديده )

 

وأما المشكله فى التصميم وهنا يجب ان يكون هناك تفاهم مع العميل بصدر رحب لان المصممين لهم عقليه خاصه يتعاملو من اساسها وهى ان اى تصميم لا يجب ان يخرج على اساس انه قص ولزق بل هو فن ( سمعة المصمم فى اعماله لذا هم دائمآ لا يوافقون على كل التغيرات )

 

وأما المشكله فى البرمجه وهذه المشكله بالتحديد لها حلول كثيره واذا كنت مبرمج محترف لن تصل الى هذه المرحله ( لا يوجد شىء اسمه مستحيل فى البرمجة )
 

 

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

حتما أنت لا تعرف بنسبة 90% ما تريده عند بدء التفكير فى شكل موقعك

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

- شكل الجسد العام للموقع من مكان البانر واللوجو

- أين تريد قوائم المنتجات ومكان عرض صور المنتجات العامه

- ماذا تريد ان تركز عليه نظر الزائر

- هل الجزء السفلى به ادوات اضافيه ام سيكون نسخه من الروابط باعلى الموقع  

هذه الخطوه لا تنظر لها باستهتار أو انها مرهقه وتأكد من حرسك عليها حتى تكون مصمم ناجح

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

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

وبعد الانتهاء من تصميم الفوتوشوب يتم عرضه مره اخرى على العميل وتكون هذه هى المرحله الاخيره بالنسبه للعميل حتى يتسلم الموقع بعد ذلك

 

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

امممممم

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

ملاحظة هامه جدا 

العمل على الجروب سيكون فقط لرفع الاعمل والاحتفاظ بها اما الشرح والنقاش سيكون من خلال الموضوع هنا فى المنتدى

[محمد الورفلي1]

مجهود رائع وشكراً لتخصص وقتك لنشر العلم    فبارك الله في علمك 

: (لا ﻳَﺸْﻜُﺮُ ﺍﻟﻠَّﻪَ ﻣَﻦْ ﻟَﺎ ﻳَﺸْﻜُﺮُ ﺍﻟﻨَّﺎﺱَ)

 

 

 

                                                    

[ابو جودي]

مجهود رائع وشكراً لتخصص وقتك لنشر العلم    فبارك الله في علمك 

: (لا ﻳَﺸْﻜُﺮُ ﺍﻟﻠَّﻪَ ﻣَﻦْ ﻟَﺎ ﻳَﺸْﻜُﺮُ ﺍﻟﻨَّﺎﺱَ)

 

 

 

                                                     1.PNG

 

السلام عليكم ورحمة الله وبركاته

اخى الحبيب جزاكم الله كل الخير واسال الله ان ينفعنا بما علمنا وان يجعله حجة لنا

واعلم اخى الحبيب هذا ليس تفضلا منى عليكم فمن علمه الله علم وكتمه الجم به بلجام من نار يوم القيامه 

نسال الله السلامه والعافية فى ديننا ودنيانا ونسال الله ان يعلمنا ما ينفعنا وينفعنا بما علمنا ويجعل كل اعمالنا خالصة لوجهه الكريم فتكون حجة لنا لا علينا ان شاء الله

وكل الشكر والتقدير على شعوركم الطيب ومروركم 

[ابو جودي]

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

 

والمطلوب من الساده المتدربين الاتى بعد قراءة الحلقة الخاصة بالجزء النظرى عمل الاتى

على اعتبار اننا مصممين لمواقع الويب نريد انشاء موقع ويب خاص بنا من خلاله نعرف عن انفسنا وعملنا والذى سيكون صورتنا وواجهتنا امام العملاء والذى سيتم التعامل مع العملاء من خلاله   

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

الشكل الذى تخيله للموقع

ونتناقش فى هذا حتى موعد الحلقة القادمة ان شاء الله

[أبو العقاب]

مشكور على مجهودك الرائع

والكل في انتظار العملي

[أبو العقاب]

ما سبب كل هذا التأخير 

أين العملي؟

[yms12]

نحن في الاتنظار

[ابو جودي]

شباب ممكن سؤال |
بصراحه كده هو انتم بتقرأو ا المشاركات بعنايه ام تمرون مرور الكرام ؟

لو انكم تقرأون بعنايه 
هل لاحظتم هذه المشاركة رقم  14

 

 

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

 

والمطلوب من الساده المتدربين الاتى بعد قراءة الحلقة الخاصة بالجزء النظرى عمل الاتى

على اعتبار اننا مصممين لمواقع الويب نريد انشاء موقع ويب خاص بنا من خلاله نعرف عن انفسنا وعملنا والذى سيكون صورتنا وواجهتنا امام العملاء والذى سيتم التعامل مع العملاء من خلاله    

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

الشكل الذى تخيله للموقع

ونتناقش فى هذا حتى موعد الحلقة القادمة ان شاء الله

 

[ابو جودي]

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

الشكل الذى تخيله للموقع

ونتناقش فى هذا حتى موعد الحلقة القادمة ان شاء الله

للاسف لم الاقى اهتمام 
اسا الدوره هو المناقشة والعمل داخل ورشة عمل حقيقية 
اما ان كنت سأقدم الحلول النظرية للتعامل مع الويب فالمواقع والمنتديات لاتخلو منها 

[أبو العقاب]

أخ محمد عصام

حيّاك الله وبيّاك

أنا أقترح أن نقوم بعمل على عمل موقع معيّن أنت تختاره

والتطبيق يكون من المشاركين على موقع يريده المشارك

مثلا لو شرحت دورة عملية على موقع اخباري "مثلا" وشخص آخر من المشاركين طبق المشاركة على موقع تجاري

لم لا يكون هكذا التطبيق 

المهم أن نفهم الأساس والتطبيق ليكن على موقع كذا وكذا وكذا...

أنا مثلا سأتفاعل مع الدورة من البداية حتى النهاية 

ومشروعي هو " موقع تعليمي "

تكون واجهته آخر الأخبار العلمية 

أزاره : مشاهدة فيديوهات تعليمية ،آخر الأخبار،ما الجديد، اتصل بننا

سكريبت :لوحة تحكم :سكريبت تواصل المعلم مع الطلاب صوت وصورة، بوابة تعليمية

اختبارات الكترونية.

وعلى فكرة عندي الفوتوشوب ومايكروسوفت ويب (نفس الدريمويفر ) والسيرفر المحلي وسيرفر موقع استضافة مجانية وأنا جاهر للعملي

ما رأيك أستاذ عصام

تم تعديل أبريل 26, 2015 بواسطه أبو العقاب

[ابو جودي]

أنا أقترح أن نقوم بعمل على عمل موقع معيّن أنت تختاره

والتطبيق يكون من المشاركين على موقع يريده المشارك

 

اسمح لى اوضح شئ لحضرتك

لما يكون البداية واحده لو حضرتك عندك خلفية سابقه هتكون فاهم الكلام كويس 
ولو فى حد عاوز يتابع ومش عنده اى خلفيه هيتوه 

انا كان فى نيتى نبدأ بمشروع موحد للتعليم
ثم مشروع موحد للتدريب 

ثم مشروع مختلف لكل على حده لاثقال الخبرات 
ايه رأى حضرتك 

[أبو العقاب]

توكل على الله أستاذ عصام

وليكن الشرح بداية سهلا حتى يتسنى لنا فهم الأمور كافة

تم تعديل أبريل 27, 2015 بواسطه أبو العقاب