الخطوات العملية لمشروع تصميم موقع
مدرج تحت قسم: مقالات
لأن تصميم المواقع من جهة تقنية بحتة قد يصيبنا بالملل -ولا يعطيني شخصياً ذلك الشعور بالرضى- سوف أغطي شيئاً من الجانب الإداري في مشاريع تصميم المواقع خلال الخطوات العملية التالية:
أولاً: فكرة الموقع
تطرأ فكرة إنشاء موقع على بال الكثيرين من مستخدمي الشبكة، وذلك لأسباب مختلفة، منها التجاري والشخصي. وأياً كان الدافع فلا بد من وجوده والتعرف عليه عن كثب لأنه المحرك الرئيسي للمشروع والمحدد لهدف الموقع. عليك أن تجيب نفسك على السؤال: ما الفائدة المرجوة لصاحب الموقع ولزوار الموقع؟ بحيث تكون الفائدة كافية للجميع للمضي قدماً في المشروع. مثلاً عندما فكرت في إنشاء هذه المدونة حرصت على أن يكون هناك مردود لوقتي ولوقت زوار المدونة، لذلك جعلت للمدونة تخصصاً واضحاً -تصميم المواقع- حتى يستفيد المصممون العرب مما أطرحه من أفكار وأستفيد من نقاشها معهم بالإضافة لتكوين معارف في هذه الأوساط.
ومما يزيد من فعالية الفكرة، ابتكارها! بمعنى آخر لا تلجأ إلى أفكار موجودة مسبقاً وتكررها إلا إذا كان لديك شيئاً جديداً لتضيفه. كأسلوب طرح، أو مادة مفيدة، أو غير ذلك. المهم أن تكون مميزاً في محتوى موقعك، مما سيزيد من عدد زوارك وشهرتك أيضاً على المدى الطويل. ولا تنسى أن تجيب على سؤال كيف سأحصل على محتويات الموقع؟ وكيف ستكون عملية الصيانة؟
بهذا تكون قد استجمعت صورة عامة وأولية عما سيصبح عليه الموقع من محتويات وخدمات، أهمية هذه الخطوة تكمن في إعطائك القدرة على إيصال فكرة مشروع الموقع للمصمم أو المستثمر بشكل واضح ومهني، مما يعينك على تواصل الفعال.
ثانياً: تصميم الموقع
هذه هي أجمل خطوات المشروع وأكثرها استغراقاً للوقت. ففي هذه الخطوة تبدأ بتخيل شكل الموقع على الشاشة. ولكن قبل ذلك من المهم جداً أن تكون لديك خريطة كاملة للموقع، حتى لا تنسى أن تحسب حساباً لكل صفحة أو قسم وروابطهما عند التصميم.
بعد إنهاء خريطة الموقع ضعها بجانبك وأنصحك أن تبدأ بالتخطيط لهيكل الموقع بقلم الرصاص على مجموعة من الأوراق مستعيناً بخيالك، وبعض المواقع التي تحبها، والجو المناسب لك. تذكر أن تخصص مكاناً لكل شيء تريده في صفحة البداية، مثل مساحة لإعلانات الموقع، ومساحة للإعلانات الخارجية. للمزيد حول أنواع هياكل الصفحات إليك -من مدونة الأخت FTM- كيف تقوم بتخطيط التصميم ؟
أما الآن فهو وقت الـ Photoshop (فوتوشوب)، فبعد أن رسمت الهيكل الملائم لموقعك تبدأ بتصميمه وتلوينه على برنامج الرسوميات المفضل لديك. إن تصميم واجهةٍ مناسبةٍ لموقعٍ ما ليس بالعمل السهل كما يظن البعض، فعليك أن ترضي نفسك كمصمم، وأن تكسب رضى العميل -صاحب الموقع-، ثم رضى زوار الموقع، ولا يكون ذلك بخلط سبعة ألوان، مع خمسة فلاشات، وسطور متحركة، كما قد يحب بعض الزبائن! بل التصميم الناجح هو الذي يراعي طبيعة الموقع، ويتناسب مع محتواه من معلومات وخدمات، ويسهل على الزائر عملية استخدام محتوى الموقع بصورة مرتبة ونظيفة، ويسهل مطالعتها. بتفصيل أكثر يجب على كل عنصر في التصميم أن يهدف إلى شيءٍ ما، مثل توضيح فكرة، أو تقسيم، أو جذب إنتباه لنقطة هامة، أو حتى تحسين للمظهر العام بدون مبالغة.
ثالثاً: XHTML و CSS
بعد أن حصلت على لوحة بديعة لما سيكون عليه موقعك لم يتبقى إلا أن نبعث فيها الحياة! لذلك فعملية تحويل صورة إلى موقع من أحب الأعمال إلي، فهي تتطلب الكثير من التفكير والتركيز، كما أنها شيقة عندما ترى النتيجة على المتصفح.
هناك الكثير من البرامج التي تسهل عليك هذه العميلة، بداية بالتقطيع (Slice) وإنتهاءاً بتصدير ملف الـ XHTML، بامكانك استخدام أداة Slice في الـ Photoshop ثم Save for Web لتحصل على صفحة XHTML من تصميمك، أو برنامجاً متخصصاً أكثر مثل Firewroks وهو سهل جداً ويمكنك من استخدام خواص مثل rollover، ولكن المشكلة هي أن كل هذه البرامج ستعطيك XHTML بهيكل مبني على استخدام الجداول (Table) وهذا مخالف لنصائح W3C لأنه استخدام خاطئ للـ <table>. للمزيد حول table أم div راجع مقالتي السابقة الفصل بين المحتوى والتصميم. لذلك فأنا أنصح باستخدام أداة التحديد (Selection) في الـ Photoshop لتقطيع التصميم قطعة قطعة، ثم بناء هيكل الموقع بالـ XHTML يدوياً وإضافة الصور الصغيرة المقطعة على الهيكل مستعيناً بـ CSS عند الحاجة، كما لا يمكن الاستغناء عن بعض JavaScript لبعض التأثيرات والخواص اللطيفة على الصفحة.
الناتج من هذه العملية هو صفحة XHTML تستخدم ملف CSS وملف JavaScript، هذه الصفحة ستكون نواة الموقع، ومنها تستطيع بناء قالب تستخدمه في جميع صفحات الموقع مع القليل من الإضافات التي تستلزمها أحياناً بعض الصفحات الخاصة.
رابعاً: برمجة الموقع وبناء قاعدة البيانات
نظراً لقلة خبرتي في هذا المجال سأختصر الحديث. يكفي أن نقول بأن بناء قاعدة البيانات يأتي أولاً بعد النظر إلى التطبيقات التي ستخدم في الموقع للزوار وللصيانة -إن وجدت-، وذلك بالتخطيط لجميع المدخلات والمخرجات، ثم برمجة الصفحات التي ستستخدم قاعدة البيانات بناءاً على متطلبات كل تطبيق على حدة. وفي النهاية تأتي فترة التجربة للموقع ككل لإصلاح الأخطاء أو تحسين بعض الجوانب ثم إطلاق الموقع على بركة الله.
والسـلام
- سؤال: هل نسيتُ شيئاً؟
- سؤال آخر: هل تمر أنت على هذه الخطوات أثناء مشروع تصميم موقع؟
أريد أن أسألك أخي عن تعاملك مع المتصفحات
من IE6 و FF و opera و غيرها …
ألا تشغل بالك في تصميم المواقع ؟!
تنوع طريقة العرض فيها يصيبني بالإحباط ..
يا ترى هل الاعتماد على XHTML و CSS قياسية مقدم على زوار الموقع ..
أم الزوار أهم منها ؟
فكما تعلم أغلب الزوار يأتيك ممن يستخدم IE6 خصوصًا ، و هو لب المشكل ..
نصيحتك ؟
@ محمد
الـAccessibilty (قابلية الوصول) هو تجهيز مهم لموقعك، ومن ذلك التأكد من ظهور الموقع بالشكل المقصود على المتصفحات المختلفة بدون أخطاء. إنها عملية شاقة، ولكنها أصبحت ضرورية في هذه الأوقات بالذات بعد ظهور FireFox على الساحة، وترقية IE6 إلى IE7.
بالنسبة لي شخصياً فإنني أهتم بـIE6 وIE7 وFF2 فقط، وأمضي الكثير من الوقت أصحح CSS الموقع وأقرأ عن سبب هذه المشكلة في IE وتلك في FF وفي قليل من الأحيان أقوم بإعادة النظر إلى الهيكل الذي اخترته للموقع -والذي يعتبر قراراً مهماً- في البداية. وعلى الرغم من ذلك فإن النتيجة النهائية غالباً ما ستسرك.
نصيحتي ألا تهتم عند مرحلة التصميم في Photoshop بهذه المشاكل، ودعها لحينها، كذلك في الخطوة الثالثة: XHTML و CSS فجهز موقعك لآخر نسخة من IE ثم تأكد من توافق الموقع مع النسخة التي قبلها، وبعد ذلك آخر نسخة من FireFox، اعلم أن الموقع لن يكون 100% كما هو في كل المتصفحات، ولكن سدد وقارب حتى لاتكون تجربة الزائر تختلف باختلاف المتصفح.
وفي الختام اعلم بأن المعايير القياسية وضعت لراحة زوار الموقع، فهما لا يتضادان بل يسيران معاً يداً بيد.
بالتوفيق
والسـلام
ليس لي تعليق يضيف شي مميز لما تقدم ولكن قد تكون هناك بعض الاسأله التي يحتاج الى اجاباتها كل من يريد تصميم موقع او انشاء موقع جديد
وهي 1 / ماذا علي ان اطلب ممن اتفقت معه ليصمم موقعي
2 / ماهي المواصفات التي يجب تطبيقها في التصميم
3 كيف اعرف بأن تصميم موقعي احترافي ومتوافق مع محركات البحث
4 / هل هناك موقع يوفر لك الاستشاره في تسأولاتك قبل انشاء موقع
ختاما شكرا للقائمين على هذا المشروع الذي اتمنا له النجاح والتوفيق
@ عشق الشرق
1/ ماذا علي ان اطلب ممن اتفقت معه ليصمم موقعي؟
عليك أن تقدم له جميع معلومات الخطوة الأولى، ومن ثم اطلب منه خطة انشاء للموقع.
2/ ماهي المواصفات التي يجب تطبيقها في التصميم
المعايير القياسية + “التصميم الناجح هو الذي يراعي طبيعة الموقع، ويتناسب مع محتواه من…”
3/ كيف اعرف بأن تصميم موقعي احترافي ومتوافق مع محركات البحث
يكون تصميم موقعك احترافي إذا خدم أهداف الموقع، وتناسب تصميمه مع طبيعة الموقع بشكل جميل لأغلبية الزوار. وبالنسبة للتوافق مع محركات البحث فلذلك موضوعه الخاص ولكن للإفادة احرص على توفير جميع معلومات موقعك على شكل نصي واحرص على جودة المحتوى.
4/ هل هناك موقع يوفر لك الاستشاره في تسأولاتك قبل انشاء موقع
نعم، يقدم أغلبية مصممي المواقع -المحترفين- هذه الخدمة.
والسـلام
شكرا لك على المقال اخي
مقال اكثر من رائع ..
وليس هذا بغريب على كتاب المشروع :)
فقط اضيف ملحوظه صغيره .. الا وهى مراعاة حجم التصميم … 750 ام التمدد
اريد المزايا والعيوب من ناحية المعايير القياسيه .. ام انه ليس لذلك دخل !!
ايضاً .. موقعى (yallagroup.net) بفضل الله صديق لمحركات البحث .. وفى تقدم كبير .. لكنى لا اشعر بالراحه النفسيه تجاه اتباعه للمعايير القياسيه xhtml
هل هناك اداه بموقع او ما شابه .. لتحويل كود الـ html لكود مطابق للمعايير بـ xhtml ؟؟
أم ان على معرفة كل الاكواد الخاصه المتعلقه بالـ xhtml وتعديلها جميعاً
ام .. (بما جاء فى الموضوع) .. اعيد تقسيم تصميمى بالفوتوشوب من جديد باختيار xhtml
رجاء الافاده
وبارك الله فيكم ولكم وبكم
عاشق الصداقة
بخصوص التمدد، فـ “ليس لذلك دخل”..
أما عن المعايير فيمكنك أيضاً تحقيق المعايير عن طريق HTML وليس بالضرورة XHTML، كل الموضوع يكمن في الكتابة بشكل صحيح، فالمعايير هي أن تكتب الكود بشكل صحيح وتستخدم كل كود في مكانه المناسب، وكل لغة لهدفها.. هذا كل ما في الأمر، ويمكنك تحقيق ذلك بـHTML أو XHTML. وXHTML لا تختلف عن HTML إلا في بعض الفروقات الصغيرة، وهذا للاستزادة:
http://www.w3schools.com/xhtml/xhtml_html.asp
وإليك بعض الروابط التي ستفيدك للتعرف أكثر على هذا الموضوع:
http://www.serdal.com/archives/2006/03/22/ws-quiz/
http://www.serdal.com/archives/2006/03/18/web-standards-faq/
http://www.serdal.com/archives/2006/03/19/web-standards-faq-2/
http://www.almashroo.com/%d9%85%d8%b9%d8%a7%d9%8a%d9%8a%d8%b1-%d8%aa%d8%b7%d9%88%d9%8a%d8%b1-%d8%a7%d9%84%d9%85%d9%88%d8%a7%d9%82%d8%b9-web-standards%d8%8c-%d9%85%d8%a7%d9%87%d9%8a%d8%9f-%d9%88%d9%84%d9%85%d8%a7%d8%b0%d8%a7/
وأنصحك وبشدة بزيارة القسم العام وقسم HTML في المشروع هنا والتنقل بين الصفحات وزيارة المواضيع فيها، فستجد الجواب على كثير من أسئلتك وستتعرف على أمور مختلفة.
اولا شكرا لكم على هدا المقال و فعلا استفدت الكثير كما الجميع و اتمنى لهدا المشروع كل التوفيق و مع كل المتمنيات للجميع بالتوفيق بكل ما يطمحون اليه.
اخوك في الله جديد في مجال البرمجة و انا اكيد انني ساجد لديكم الكثير مما استفيد به و ان شاء الله افيد بما اعرفه و السلام
أخي صراحة هدا المقال رائع وهو قد يفيد الكتير من المبرمجين في الإبحار في عالم المواقع… وكدالك يمكن الإعتماد على هده المقالة في إنجاح المواقع والوصول إلى قمة المواقع وشكراً كتيراً
بسم الله الرحمان الرحيم
اول اأخي و قبل كل شيء أشكرك على المدونة الجميلة جدا و استفدت منها في العديد من النقاط.
بالنسبة للخطوات التي ذكرت فأغلبها أقوم بها
و لكن مشكلتي أنني لا زلت أعتمد على الجدوال و أنا الآن في طور تعلم css
لأصبح ان شاء الله أحترم المعايير القياسية
و شكرا مجددا على المدونة
السلام عليكم أرجوا منكم المساعدة أنا طالبة في الجامعة وانا الان أقوم بتجهيز مشروع التخرج ارجوا منكم المساعدة ولكم مني جزيل الشكر
أنا أريد تصميم موقع الكتروني للمكتبه في المعهد “مشروع تخرج” ولم أعرف الأساسيات في ذلك ياريت اتكون معاي حتئ ولو علئ الايميل
estbrak_2010@yahoo.com
ولك مني جزيل الشكر والأحترام,.,,,,,,
شكرا ليكم