كورسات تصميم المواقع Web-Design

كورسات تصميم المواقع Web-Design:

تعريف تصميم الويب :

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

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

التصميم و المحتوى :

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

سهولة التصفح :

• يجب ان يكون تظام التصفح سهل و واضح للمستخدم و لايحتاج منة جهد للوصول إلى الصفحة المراد الوصول اليها
• يجب أيضا ان يكون وصلات التصفح نفسها واضحة في الصفحة في مكان بارز
• يجب ان يعلم المستخدم هو في آي صفحة من صفحات الموقع بتضيح العنوان في مكان ظاهر لة او بتغير لون وصلة الصفحة الراهنة

التصميم المتجانس و سهولة التحميل :

• التصميم المتجانس

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

• سهولة التحميل

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

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

• HTML
• CSS
• XHTML
   

مواقع ذات المحتوى التفاعلي :
وقسمت إلى نوعين:

• محتوى تفاعلي ينفذ في الخادوم :

هذا النوع ظهر نتيجة الحاجة إلى توسيع مهام الشابكة (الإنترنت ) . من مجرد كتابات مقروءة إلى تطبيقات ذكية تلبي حاجات المستخدم وتطوع قدراتها له حيث تمت التجربة الأولى بصنع موقع تفاعلي بلغة Perl. ثم تبعتها إختراع لغة PHP المخصصة للتنفيذ على خواديم الشابكة (الإنترنت ) وقد أضيف لهذا المجال لغات وتقنيات أشهرها:
PHP
Perl
Python
ASP
JSP
Cold Fusion
 

• محتوى تفاعلي ينفذ عند المستخدم :

وفي أثناء هذا التطور ظهر نوع آخر من المواقع التفاعلية ألا وهي المواقع ذات المحتوى الذي ينفذ عند المستخدم النهائي. ويتكون هذا النوع من عدة تقنيات تشمل:
Javascript
VBScript
Flash

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

برامج تصميم المواقع :

• سكرييم: في لينكس
• كوانتا+: في لينكس وماك
• أدوبي دريمويفر: في وندوز وماك
• مايكروسوفت فرونت بايج: في وندوز (البرنامج تخلت عنه مايكروسوفت رسمياً).
• مايكروسوفت إيكسبريشن ستوديو: في وندوز.

مراحل تصميم مواقع الانترنت (مجال العمل) :

• المرحلة الأولى : التخطيط لبنية الموقع

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

• المرحلة الثانية : تصميم شكل الموقع وألوانه

وهذه المرحلة من أهم المراحل ففيها يتم تصميم الشكل الخارجي للموقع والصفحات الداخلية ويستخدم فيها أحد برامج التصميم وأشهرها Adobe Photoshopبأحد إصداراته أو برامج تصميم أخرى مثل (Adobe Fireworks – Adobe Illustrator) وغيرها
وعادة في شركات تصميم المواقع يتم اسناد هذه المهمة الى قسم التصميم لانها مهمة تصميمية بحتة لاتحتاج أي معرفة بلغة html أو php  أو اي شئ عن تصميم المواقع

• المرحلة الثالثة : تحويل التصميم الى صفحة html 

حيث يتم نقل التصميم من صورة جامدة إلى  صفحة html  من دون بيانات وهذا يتطلب من مصمم الموقع ان يتعلم لغة html  واستعمال الانماط CSS  وعدة أمور أخرى , حتى تكون النتيجة كصفحة html  مطابقة للتصميم الاساسي الذي بدأنا به
وطبعا نحتاج في هذه المرحلة استعمال Adobe Photoshop  للتعامل مع التصميم الاساسي وتصدير عناصره الى صفحة html  النهائية  , والأهم أننا سنتعامل مع برامج إدارة المواقع وأشهرها Adobe Dreamweaver  وكذلك Frontpage قديما وبرامج أخرى

• المرحلة الرابعة : وضع البيانات في الصفحات وربطها

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

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

ديناميكيا : وذلك عن طريق لغات البرمجة مثل Php  و Aspوقواعد البيانات مثل mysql, حيث يتم تهيئة الصفحة لاستقبال البيانات عن طريق لغات البرمجة ويتم تخزين البيانات في قواعد البيانات , وبهذا نحصل على موقع ديناميكي Dynamic Site

• المرحلة الخامسة : تجميل الموقع :

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

• المرحلة السادسة : رفع الموقع ونشره على الانترنت

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