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

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

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

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

الإفراط في الاعتماد على jQuery

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

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

يعتبر الكثير من أرباب العمل أن jQuery مسؤولية وليس أمرًا ضروريًا لأن بعض المطورين يفشلون في فهم كيفية عمل JavaScript تمامًا.

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

الاعتماد المفرط على أطر CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

التحقق من صحة الإدخال غير مكتمل

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

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

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

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

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

مُحسّنات محرّكات البحث عملية طويلة ومعقدة تحتاج إلى بحث مستمر للبقاء في حلقة قواعد اللعبة المتغيرة باستمرار. مع امتداده المتقوس ، لا ينبغي رفض القيام به في نهاية عملية التنمية.

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

عدم وجود الأيقونة المفضلة

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

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

تجاهل التصميم سريع الاستجابة

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

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

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

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

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

خاتمة

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

-

عن هو المؤلف

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