تصميم المواقع من جهة تقنية بحتة قد يصيبك بالملل ولا يعطيني شخصياً ذلك الشعور بالرضى سوف أغطي شيئاً من الجانب الإداري في مشاريع تصميم المواقع خلال الخطوات العملية الأتية :
أولاً : فكرة الموقع :-
قد تطرأ عليك فكرة إنشاء موقع ، وذلك لأسباب مختلفة، منها التجاري والشخصي. وأياً كان الدافع فلا بد من وجوده والتعرف عليه عن كثب لأنه المحرك الرئيسي للمشروع والمحدد لهدف الموقع. عليك أن تجيب نفسك على السؤال: ما الفائدة المرجوة لصاحب الموقع ولزوار الموقع؟ بحيث تكون الفائدة كافية لجميع الفئات للمضي قدماً في المشروع. كمثال فعندما فكرت في إنشاء هذه المدونة حرصت على أن يكون هناك مردود مثمر لوقتي ولوقت زوار المدونة.
ومما يزيد من فعالية الفكرة، ابتكارها! بمعنى آخر لا تلجأ إلى أفكار موجودة مسبقاً وتكررها إلا إذا كان لديك شيئاً جديداً لتضيفه. كأسلوب طرح، أو مادة مفيدة، أو غير ذلك. المهم أن تكون مميزاً في محتوى موقعك، مما سيزيد من عدد زوارك وشهرتك أيضاً على المدى الطويل. ولا تنسى أن تجيب على سؤال كيف سأحصل على محتويات الموقع؟ وكيف ستكون عملية الصيانة؟
بهذا تكون قد استجمعت صورة عامة وأولية عما سيصبح عليه الموقع من محتويات وخدمات، أهمية هذه الخطوة تكمن في إعطائك القدرة على إيصال فكرة مشروع الموقع للمصمم أو المستثمر بشكل واضح ومهني، مما يعينك على تواصل الفعال.
ثانياً: تصميم الموقع
هذه هي أجمل خطوات المشروع وأكثرها استغراقاً للوقت. ففي هذه الخطوة تبدأ بتخيل شكل الموقع على الشاشة. ولكن قبل ذلك من المهم جداً أن تكون لديك خريطة كاملة للموقع، حتى لا تنسى أن تحسب حساباً لكل صفحة أو قسم وروابطهما عند التصميم.
بعد إنهاء خريطة الموقع ضعها بجانبك وأنصحك أن تبدأ بالتخطيط لهيكل الموقع بقلم الرصاص على مجموعة من الأوراق مستعيناً بخيالك، وبعض المواقع التي تحبها، والجو المناسب لك. تذكر أن تخصص مكاناً لكل شيء تريده في صفحة البداية، مثل مساحة لإعلانات الموقع، ومساحة للإعلانات الخارجية. للمزيد حول أنواع هياكل الصفحات إليك -من مدونة الأخت FTM- كيف تقوم بتخطيط التصميم ؟
أما الآن فهو وقت الـ Photoshop (فوتوشوب)، فبعد أن رسمت الهيكل الملائم لموقعك تبدأ بتصميمه وتلوينه على برنامج الرسوميات المفضل لديك. إن تصميم واجهةٍ مناسبةٍ لموقعٍ ما ليس بالعمل السهل كما يظن البعض، فعليك أن ترضي نفسك كمصمم، وأن تكسب رضى العميل -صاحب الموقع-، ثم رضى زوار الموقع، ولا يكون ذلك بخلط سبعة ألوان، مع خمسة فلاشات، وسطور متحركة، كما قد يحب بعض الزبائن! بل التصميم الناجح هو الذي يراعي طبيعة الموقع، ويتناسب مع محتواه من معلومات وخدمات، ويسهل على الزائر عملية استخدام محتوى الموقع بصورة مرتبة ونظيفة، ويسهل مطالعتها. بتفصيل أكثر يجب على كل عنصر في التصميم أن يهدف إلى شيءٍ ما، مثل توضيح فكرة، أو تقسيم، أو جذب إنتباه لنقطة هامة، أو حتى تحسين للمظهر العام بدون مبالغة.
ثالثاً :لغات البرمجة XHTML و CSS :-
بعد أن حصلت على لوحة بديعة لما سيكون عليه موقعك لم يتبقى إلا أن نبعث فيها الحياة! لذلك فعملية تحويل صورة إلى موقع من أحب الأعمال إلي، فهي تتطلب الكثير من التفكير والتركيز، كما أنها شيقة عندما ترى النتيجة على المتصفح.
هناك الكثير من البرامج التي تسهل عليك هذه العميلة، بداية بالتقطيع (Slice) وإنتهاءاً بتصدير ملف الـ XHTML، بامكانك استخدام أداة Slice في الـ Photoshop ثم Save for Web لتحصل على صفحة XHTML من تصميمك، أو برنامجاً متخصصاً أكثر مثل Firewroks وهو سهل جداً ويمكنك من استخدام خواص مثل rollover، ولكن المشكلة هي أن كل هذه البرامج ستعطيك XHTML بهيكل مبني على استخدام الجداول (Table) وهذا مخالف لنصائح W3C لأنه استخدام خاطئ للـ
. للمزيد حول table أم div راجع مقالتي السابقة
الفصل بين المحتوى والتصميم. لذلك فأنا أنصح باستخدام أداة التحديد (Selection) في الـ Photoshop لتقطيع التصميم قطعة قطعة، ثم بناء هيكل الموقع بالـ XHTML يدوياً وإضافة الصور الصغيرة المقطعة على الهيكل مستعيناً بـ CSS عند الحاجة، كما لا يمكن الاستغناء عن بعض JavaScript لبعض التأثيرات والخواص اللطيفة على الصفحة.
الناتج من هذه العملية هو صفحة XHTML تستخدم ملف CSS وملف JavaScript، هذه الصفحة ستكون نواة الموقع، ومنها تستطيع بناء قالب تستخدمه في جميع صفحات الموقع مع القليل من الإضافات التي تستلزمها أحياناً بعض الصفحات الخاصة.
رابعاً : برمجة الموقع وبناء قاعدة البيانات :-
نظراً لقلة خبرتي في هذا المجال سأختصر الحديث. يكفي أن نقول بأن بناء قاعدة البيانات يأتي أولاً بعد النظر إلى التطبيقات التي ستخدم في الموقع للزوار وللصيانة -إن وجدت-، وذلك بالتخطيط لجميع المدخلات والمخرجات، ثم برمجة الصفحات التي ستستخدم قاعدة البيانات بناءاً على متطلبات كل تطبيق على حدة. وفي النهاية تأتي فترة التجربة للموقع ككل لإصلاح الأخطاء أو تحسين بعض الجوانب ثم إطلاق الموقع على بركة الله.
Follow my blog with Bloglovin