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

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

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

الشروط الواجب مراعاتها عند تصميم المواقع:

• عند تصميم المواقع يجب التقليل من الرسوم المتحركة الوميضية  بالرغم من أن هذه الرسوم تزيد  من جاذبية الموقع إلا أن محركات البحث لاتميز سوى البيانات النصية فقط، الأمر الذي يعني أن الباحث المستخدم لتلك المحركات لن يتمكن من الوصول إلى الموقع عبرها.
• يجب الحرص على استخدام لغة (XHTML)عند تصميم المواقع.
• التقليل من حجم صفحات الموقع عند تصميم المواقع: حيث تشير الإحصائيات إلى أن المستخدم سينتظر 4 ثوان قبل أن تبدأ الصفحة في التحميل و20 ثانية لاكتمال التحميل، لكن لو زادت المدة عن ذلك سيضطر الزائر إلى الانصراف عن الموقع، لذا يجب أن تكون صفحات الموقع ذات أحجام منخفضة حتى يمكن تصميم الموقع وظهوره على الوجه الأكمل.
• التوزيع المناسب للبيانات المهمة عند تصميم المواقع: تشير الأبحاث إلى أن الزائر لايقوم فعليا بقراءة البيانات التي يحتويها الموقع وإنما يقوم فقط بتصفح الموقع بحثا عن أية معلومة مهمة أو مثيرة، لذا ينبغي عند تصميم المواقع الألكترونية من قبل مصممي المواقع؛ توزيع البيانات المهمة عبر صفحات الموقع وعدم تركيزها في الصفحة الرئيسية.
• الإطلاع على المواقع الألكترونية ذات الهدف المشابه لهدف الموقع الخاص؛ لمعرفة كيفية تصميمها وتلافي الأخطاء الممكنة عند تصميم المواقع.
• عدم استخدام المصحح الإملائي عند تصميم المواقع وهذا الأمر قد يكون أقل أهمية لبعض الزوار لكن النصوص السليمة والخالية من الأخطاء تهم الغالبية وتعطي انطباعا جيدا عن الموقع.
• الإكثار من استخدام الخط السفلي تحت بعض الكلمات أثناء تصميم المواقع؛ لإبرازها حيث ينبغي استخدام الخط المائل أو العريض لإبراز الكلمات المهمة والتي لاتشكل رابطا لأحد المواقع.
• عدم إظهار بيانات صاحب الموقع أثناء تصميم المواقع: يحتاج بعض زوار المواقع في بعض الأحيان لأن يراجعوا صاحبه لأمر ما. لذا فإنه يجب أن يضع طرق التواصل معه كبريده الإلكتروني أو رقم هاتفه في رأس كل صفحة من صفحات الموقع.

أهمية تصميم المواقع:

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

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

خطوات تصميم المواقع:

هناك أمور يجب أن نحددها عند تصميم المواقع مثل لون الموقع المراد تصميمه وتنسيق الموقع كما نحدد العرض المناسب للموقع، وهل نريده متمدد بنسبة 100% أم نريده ثابت بمقاس واحد ؟، ونلاحظ أن أغلب المواقع الكبيرة مثل you tube, Facebook, Yahoo, Word Press,تستخدم تصميم ذو عرض ثابت.

بالنسبة لمقاسات العرض الثابت يُفضل أن يكون أقصى عرض 1003px لكي تكون مناسبة مع دقة الشاشة  لجميع المستخدمين لكن بدأت هذه الظاهرة في الانقراض، وذلك لأن أغلب المستخدمين يستخدمون حاليا مقاس دقة شاشة أكبر من 800*600 مثل 1280*800 عند تصميم المواقع.

الخطوة الأولى من تصميم المواقع:

نبدأ تصميم المواقع  بفتح برنامج الفوتوشوب.

الخطوة الثانية من تصميم المواقع:

ثم نفتح صفحة جديدة بالضغط من القائمة العلوية File- New.

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

محتويات الخلفية أثناء تصميم المواقع دائما تكون موضوعة على شفاف يُفضل جعلها بيضاء بدل شفاف أو نقوم بتعبئة الخلفية باللون الأبيض بعد إنشاء الصفحة بأداة التعبئة.

بعد إنشاء الصفحة نختار أداة المربع من هنا .

الخطوة الثالثة من تصميم المواقع:

خطوات تصميم الجزء العلوي من  الموقع:

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

الخطوة الرابعة من تصميم المواقع:

ثم نضغط على الزر الأيمن من الفأرة ونختار خيارات الدمج أو  Blending Options وهي على نفس الطبقة التي أنشاناها .

وإذا كانت نافذة الطبقات غير موجودة نتوجه إلى أعلى القائمة ونختار  layers ثم windows.

وعند فتح النافذة نختار تغشية متدرجة بالألوان 185ba2 إلى درجة اللون  92c7fd.

وكما رسمنا المستطيل الكبير في أعلى الصفحة نرسم مستطيل آخر تحته ولكن ارتفاعه أصغر بكثير، وذلك باستخدام أداة رسم الشكل المربع التالية:

ويُفضل في هذه الحالة أن يكون اللون نفس اللون الموجود بالصورة وهو درجة اللون هذه (86c542).

الخطوة الخامسة من تصميم المواقع:    

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

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

نختار اللون كما هو موجود في الشكل التالي بدرجة اللون هذه ( c7e4a7 ) # ثم نرسم شكلاً جميلاً بإمكانك عمل كما رسمت أو الإبداع بنفسك بكل سهولة بالتنقيط.

ولابد أن تكون الخلفية شفافة لكي يظهر اللون الذي نضع عليه القناع.

ونجعل هذا التصميم نموذج قناع لاستخدامه في أداة التعبئة المحشية بضغط  تحرير ثم تحديد النموذج أو Edit ثم Define Pattern

ونكتب اسم النموذج ثم نضغط موافق ونغلق الصفحة التي انشأناها.

وبعد ذلك نعود إلى المستطيل الأخضر مرة أخرى ونختار نمط الطبقة بالضغط على الطبقة بالزر الأيمن ثم اختيار خيارات الدمج أو Blending Options.

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

ثم نختار نمط تعبئة الحشو، ونختار تغشية الحشو التي أنشأناها سابقا، ثم نضغط موافق.

سنرى بعد ذلك أن الشكل المستطيل ظهرت عليه نقشة جميلة.

الأن نريد تصميم خلفية الجزء السفلي من الموقع والذي يسمى بـ (Footer) نقوم بمضاعفة طبقتي المستطيلين باختيار واحد منهم ثم من لوحة المفاتيح الضغط على CTRL مع اختيار الطبقات التي نريدها وفي حالتنا هذه يكون المستطيل الآخر

ثم نضغط بالزر الأيمن من الفأرة ونختار مضاعفة طبقات أو Duplicate Layer.

سنجد الطبقتين قد تضاعفتا

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

الأن نختار أداة التحريك أو الـ move من أدوات التحكم أو نضغط حرف V الموجودة بلوحة المفاتيح

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

الخطوة الثامنة من تصميم المواقع:

ثم في الصفحة نسحب الطبقتين إلى الأسفل واقلبهما بالضغط على CTRL + T ثم نقوم بضغط الزر الأيمن من الفأرة واختيار قلب افقي أو دوران افقي أو Flip Vertical

بعد ذلك نود أن نعكس تدرجات الخلفية التي في المستطيل الكبير لكي يكون تصميم جميل بشكل أفضل،  فنختار طبقة المستطيل الكبير ونختار  خيارات الدمج أو Blending Options ثم في نمط تعبئة متدرجة نضع صح على ( عكس ) أو Reverse.

ويصبح لدينا مثل هذا الشكل

الأن لدينا خلفية الجزء العلوي (Header) وخلفية الجزء السفلي (Footer) , ونريد بعد ذلك تصميم خلفية جزء المحتوى أو الجزء الوسطي (Content, Middle)

الخطوة التاسعة من تصميم المواقع: 

نختار أداة رسم الشكل المستطيل ذو الزوايا المائلة ونختار درجة الميلان 25 بكسل ( درجة الميلان تكون في أعلى القائمة ).

نرسم شكل مستطيل كبير في وسط الصفحة يقطع جزء بسيط من الجزء العلوي والجزء السفلي حيث يكون درجة اللون له ( cdeaf9 ) # كما في الصورة التالية.

الأن في نفس الطبقة نختار خصائص الدمج أو Blending Options لكي نقوم بتغيير نمط هذا المستطيل ذو الزوايا المائلة.

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

مع اختيار خاصية الحدود بمقاس 13 بكسل واللون ( 70a7e1 ) #

لتظهر النتيجة كما في الشكل التالي :

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

والكتابة في أعلى الصفحة يكون موازي لبداية خلفية المحتوى ويكون خصائص الخط كالتالي

ومن ثم نكتب في أسفل عنوان الموقع هذا السطر ( الرئيسية  ، من أنا ؟  ، سجل الزوار  ،إتصل بي ) والذي يمثل القائمة العلوية ونقوم بتحديد الكلمات ووضعها باللون 3372b6.

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

وبذلك نكون قد انتهينا من تصميم الجزء العلوي من الموقع، وننتقل بعد ذلك إلى تصميم الجزء السفلي من الموقع.

ونضيف هذا النص في الجزء السفلي في وسط الصفحة ( جميع الحقوق محفوظة powerd by WordPress).

الخطوة العاشرة من تصميم الموقع:

خطوات تصميم محتوى الموقع:

ثم ننتقل إلى تصميم الجزء المتعلق بمحتوى الموقع ويكون في وسط الموقع.

نختار أداة رسم الخط لنرسم الفاصل بين القائمة الجانبية ومقالات الموقع كالتالي:

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

فنبدأ بالعنوان لنرسم خلفية جميلة ونوع ولون نص مناسب للعنوان، نختار أداة الفرشاة

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

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

ثم نكتب نص العنوان باللون الأبيض ونوع الخط  Arial.

برمجة المواقع:

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

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

لغات البرمجة:

تنقسم لغات برمجة المواقع الإلكترونية إلى قسمين رئيسيين:

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

قسم من لغات البرمجة يعمل في جهة العميل ويعني ذلك أن العمليات البرمجية تتم في جهاز صاحب الموقع.

 القسم الأول من أقسام لغات البرمجة:

يتكون من 6 لغات برمجة أساسية وهي:

PHP,Perl,Asp,CGI,JSP,XML.

القسم الثاني من أقسام لغات البرمجة:

يتكون من 7 لغات أساسية وهي:

Java,Java Script,Java Applet, DHTML, HTML, CSS, Flash Action Script.

CGI:

ترمز سي جي آي إلى (Common Gateway Interface) أي واجهة الإدخال المشتركة، وهي من أهم لغات البرمجة وتمثل وسيط للبرمجة العاديّة بين خادم الويب و البرامج الخارجيّة، ببساطة، سي جي آي تمكن صفحات موقعك من إدارة البرامج الموجودة في خادمك، لذا تتطلّب برامج سي جي آي أحياناً أن توضع في دليل على خادمك بحيث يكون باسم “cgi-bin”. ويمكننا اعتبار جميع لغات برمجة الأنترنت التي تعمل جهة الخادم “CGI واجهات إدخال مشتركة” حيث إنها تقوم بالربط بين الخادم (وما يحتويه من برامج وقواعد بيانات)، ومتصفحك (الذي تستخدمه في الإبحار في صفحات الإنترنت) والذي لا يفهم إلا لغة برمجة واحدة وهي HTML إذن تعددت لغات البرمجة والنتيجة واحدة.

نبذة سريعة عن كل لغة برمجية:

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

HTML

لغة النص المتشعب هي لغة البرمجة الإجبارية في كل صفحة، فهي روح صفحات الأنترنت، ولا نستطيع إطلاق مصطلح “صفحة إلكترونية” على أي صفحة لا تتكون من هذه اللغة.

JS

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

Flash

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

CFM، ASP، PHP ،JSP

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

CGI , Perl

مثل لغة البرمجة، ولكن الأخيرة أصابتها الشيخوخة فهي الآن نادرا ما تُستخدم بسبب سهولة سابقاتها المتناهية.

CSS

ولغة البرمجة هذه ليست ملزمة، كما ينصح بها بشدة، فهي بمثابة “مساحيق تجميل” صفحات الإنترنت.

XML 

تٌستخدم لغة البرمجة هذه عندما نحتاج إلى ربط البيانات بطريقة معقدة بين أنظمة تشغيل مختلفة.