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

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

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

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

الاعتماد الزائد على jQuery

يعتبر jQuery بلا منازع الإطار الأكثر شهرة في العالم للغة جافا سكريبت. ومن المغري اعتماده في مشروعك فور إنشائه، ولكن لا تكن مستعجلاً.

على الرغم من أن jQuery يوفر العديد من الطرق المريحة لتسريع تطوير الويب الخاص بك، إلا أنه من المهم عدم استخدامه بشكل مفرط. يقوم معظم المطورين الجدد بخطأ فهم طرق API لـ jQuery دون فهم كيف تعمل تلك الأساليب تحت الغطاء.

يعتبر العديد من أصحاب العمل jQuery عائقًا بدلاً من أن يكون شيئًا لطيف الحصول عليه لأن بعض المطورين يفشلون في فهم كيفية عمل جافا سكريبت بشكل عام.

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

الاعتماد الزائد على إطارات العمل CSS

توفر إطارات العمل CSS مثل Semantic UI وBootstrap الكثير من الوقت. إذا استخدمتها، فلن يكون هناك حاجة للتنسيق اليدوي ودمج التصميم المستجيب داخل تطبيقك.

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

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

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

عدم وجود أداة استعادة

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

WP Reset هي أفضل حل لك عندما تواجه مشكلات على موقع الويب الخاص بك، سواء كانت المشكلة عدم القدرة على الوصول إلى WP admin أو مواجهة شاشة الويت الموت. أيًا كانت المشكلة، فإن WP Reset يقدم لك الدعم اللازم. يأتي مجهزًا بأدوات تنظيف مفيدة تتيح لك استعادة موقع الويب الخاص بك بسرعة وسهولة.

بالإضافة إلى ذلك، يمكنك استخدامه لتثبيت أي مكونات إضافية وقوالب بسرعة، أو تعطيلها إذا كانت بها عيوب. علاوة على ذلك، تتيح ميزة Snapshots في WP Reset التقاط لقطة لموقع الويب الخاص بك قبل أي تغيير تقوم به، مما يتيح لك استعادة تلك اللقطة إذا لم تسر الأمور كما خططت.

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

نسيان تحسين موقعك للسرعة

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

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

يتطلب تحسين السرعة الكثير من الجهد. ولذلك، فإن العديد من العوامل تلعب دورًا في ذلك، مثل الخطوط والصور والملفات الإضافية لجافا سكريبت وCSS، وضغط الملفات. وبمجرد أن تتقن هذه الجوانب، قم بالنظر في حزم التجميع مثل Webpack و Rollup التي يمكنها إزالة فئات CSS وطرق جافا سكريبت غير المستخدمة من ملفاتك.

التحقق الناقص من المدخلات

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

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

يتم إجراء التحقق من المدخلات عبر جافا سكريبت، وهو سهل التعطيل. وعليه، يوصي Kenneth Sytian من Sytian Web Developer Philippines بضرورة القيام دائمًا بالتحقق من المدخلات على كل من الجانب الأمامي والخلفي. بالإضافة إلى ذلك، يجب تفادي جميع الحروف والرموز الغير أبجدية ورقمية لجعل الهجمات بالحقن مستحيلة.

تجاهل أهمية تحسين محركات البحث

ليس من الكافي أن تقوم ببناء مواقع جميلة وتطويرها، فمن المهم بنفس القدر أن يرى الأشخاص المحتوى الذي تقدمه ويقدرونه. وأفضل طريقة للقيام بذلك هي تحسين معرفتك بـ SEO وتنفيذه.

تحسين محركات البحث (SEO) هو عملية طويلة ومعقدة تحتاج إلى بحث مستمر للبقاء على اطلاع بالقواعد المتغيرة باستمرار. وبما أنه يشمل نطاقًا واسعًا، فلا يجب إهماله وتركه حتى نهاية عملية التطوير.

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

عدم وجود favicon

من السهل إهمال favicon واعتباره غير ضروري بسبب سهولة إعداده، ولكن وجوده مهم للغاية. في الويب الحديث، من المشترك أن يكون للمستخدمين العديد من العلامات مفتوحة حتى يتمكنوا من زيارتها مرة أخرى لاحقًا. تعمل رموز favicons كإشارة مرجعية لموقعك حتى يكون مرئيًا في نظرة واحدة. في حالة عدم وجوده، قد يعني ذلك فقدان الاهتمام من قبل المستخدمين.

يوصي مصممة تجربة المستخدم الحائزة على الجوائز، Michelle Dipp، بدلاً من إنشاء رمز favicon بنفسك باستخدام Photoshop، باستخدام أدوات تصميم الجرافيك المجانية التي يمكنك العثور عليها عبر الإنترنت. يمكنك حتى العثور على قوالب favicon لتصميم رمزك الخاص دون أي عناء.

تجاهل التصميم المتجاوب

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

يمكنك تحسين تجربة المستخدم عن طريق تنفيذ عناصر لاصقة (Sticky Elements) على موقعك الإلكتروني. وتعتبر العناصر اللاصقة هي تلك العناصر التي تظل ثابتة على الصفحة أثناء تصفح المستخدم. عندما تكون العناصر ثابتة، يسهل الوصول إليها ويعرف المستخدمون أنها دائمًا في مكان واحد، مما يعد أمرًا أساسيًا عند استخدام الهاتف المحمول.

على هذا النحو، يعد WP Sticky هو البرنامج المثالي الذي يمكنك استخدامه لجعل عناصرك اللاصقة. يتيح لك WP Sticky جعل العديد من العناصر لاصقة كما تريد، دون كتابة سطر واحد من الشفرة؛ فقط عليك اختيار العنصر الخاص بك من الشاشة.

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

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

الاستنتاج

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