هل تريد أن تصبح مصمم ومطور مواقع إنترنت محترف ؟

في عالم تصميم مواقع الإنترنت هناك الكثير من وجهات النظر حول الطريقة المثلى لتكويد صفحة ويب .

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

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

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

الصناديق أم الشجرة ؟

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

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

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

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

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

قمت بالتخطيط لتصميمي ماذا أفعل الآن ؟

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

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

لا تعتمد على الخصائص الافتراضية دائماًً !

تأتي المتصفحات بخصائص افتراضية يتم ادماجها فيها فمثلا انت لا تحتاج لكتابة display:block لـ div لأنه بشكل افتراضي يحتوي على هذه الخاصية لكن ماذا عن وسم مثل header من html5 غير مدوعوم ببعض المتصفحات القديمة ؟

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

هل فكرت بإنشاء css افتراضي تستخدمه دائما؟

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

كيف تكتب الستايل الخاص بك ؟

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

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

ليست السرعة دائماً هي الهدف! الهدف الاتقان أحب ما تقوم به ولا تدع التفاصيل الصغيرة تغيب عنك الاحتراف هو بالتفاصيل الصغيرة دائماً .

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

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

أحب متصفحك ليحب هو أيضاً تصاميمك

تحياتي