Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

10 أخطاء مطورين ويب الشائعة 

by
Length:LongLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Arabic (العربية/عربي) translation by ansgaradh (you can also view the original English article)

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

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

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

القائمة التالية ليست بترتيب معين. 

1. كتابة HTML المدرسة القديمة 

خطأ : قدمت الأيام الأولى من الإنترنت خيارات أقل بكثير من الترميز مما لدينا اليوم.  ومع ذلك ، تموت العادات القديمة بشدة ، وكثير من الناس يكتبون HTML كما لو كنا لا نزال في القرن العشرين.  تستخدم الأمثلة هنا عناصر <table> للتخطيط ، أو <span> أو <div> عندما تكون العلامات الدلالية الخاصة الأخرى أكثر ملاءمة ، أو تستخدم علامات غير معتمدة في معيار HTML الحالي ، مثل <center> أو <font > > أو تباعد العناصر على صفحة ذات عدد كبير من & nbsp؛ جهات. 

التأثير : يمكن أن تؤدي كتابة HTML في العقد الأخير إلى ترميز مفرط التعقيد يتصرف بطريقة غير متسقة عبر عدة مستعرضات.  وهو ليس ضروريًا في أحدث المستعرضات الحديثة مثل Microsoft Edge وحتى الإصدارات السابقة من Internet Explorer (11 ، 10 ، 9). 

كيف تتجنب : توقف عن استخدام عنصر <table> لتخطيط المحتوى ، وحدد استخدامه لعرض البيانات المجدولة.  تعرف على خيارات الترميز الحالية المتاحة ، مثل تلك التي تظهر على whatwg.org .  استخدم HTML لوصف المحتوى ، وليس كيف سيتم عرضه.  لعرض المحتوى الخاص بك بشكل صحيح ، استخدم CSS . 

2. "إنه يعمل في المتصفح الخاص بي ..." 

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

التأثير : من المرجح أن يؤدي كتابة موقع مرتكز على المتصفح إلى ضعف في الجودة عند عرضه في متصفحات أخرى. 

كيفية تجنب : لن يكون من العملي اختبار صفحات الويب في كل متصفح وإصدار أثناء التطوير.  ومع ذلك ، فإن وجود فاصل زمني منتظم للتحقق من كيفية ظهور موقعك في متصفحات متعددة يعد أسلوبًا جيدًا.  في الوقت الحاضر ، تتوفر الأدوات المجانية للمساعدة بسهولة ، بغض النظر عن النظام الأساسي المفضل لديك: VMs مجانية أو الماسحات الضوئية للموقع .  تعرض المواقع مثل BrowsersStack أو BrowserStack لقطات من كيفية عرض صفحة معينة عبر عدة مستعرضات / إصدارات / منصات.  يمكن لأدوات مثل Visual Studio أيضًا استدعاء عدة مستعرضات لعرض صفحة واحدة تعمل عليها.  عند التصميم باستخدام CSS ، ضع في اعتبارك "إعادة تعيين" جميع الإعدادات الافتراضية كما هو موضح في موقع meyerweb.com . 

إذا كان موقعك يستخدم أي ميزات CSS تم إنشاؤها خصيصًا لمتصفح ، فكن حريصًاعلى كيفية اقترابك من بادئات البائع مثل -webkit- ، -moz- ، أو -ms- .  للحصول على إرشادات حول اتجاهات الصناعة في هذا الصدد ، سيكون من الأفضل وقتك لدراسة المراجع التالية: 

بينما تشرح المراجع المذكورة أعلاه حركة بعيدة عن بادئات البائعين ولماذا ، يقدم هذا الموقعاقتراحات عملية حول كيفية العمل من خلال هذا اليوم. 

3. نموذج غير صحيح 

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

التأثير : يمكن أن تسوء أشياء كثيرة (ومن المحتمل أن يحدث) عندما يكون دخول المستخدم موثوقًا به.   قد تفشل الصفحات إذا لم يتم توفير البيانات المطلوبة ، أو البيانات المتلقاة غير متوافقة مع نظام البيانات الأساسي. والأخطر من ذلك هو الانتهاك المتعمد لقاعدة بيانات الموقع ، ربما من خلال هجمات الحقن (انظرOWASP: Top 10 2013-A1-Injections). 

كيفية تجنب : أول نصيحة هنا هي التأكد من أنه من الواضح للمستخدم نوع البيانات التي تبحث عنها.   في هذه الأيام ، قد يؤدي طلب العنوان إلى إما عنوان تجاري أو منزل أو حتى عنوان بريد إلكتروني!  بالإضافة إلى كونها محددة ، يمكنك الاستفادة من تقنيات التحقق من صحة البيانات المتوفرة في HTML الحالي كما هو موضح في هذه المقالة .   بغض النظر عن كيفية التحقق من صحة البيانات على جانب المتصفح ، تأكد من أنه يتم التحقق من صحة ذلك دائمًا على جانب الخادم أيضًا.   لا تسمح أبدًا باستخدام جملة T-SQL متسلسلة لاستخدام البيانات من إدخال المستخدم دون تأكيد أن كل حقل هو نوع البيانات التي يجب أن تكون. 

4. الاستجابات المتضخمة 

خطأ : تمتلئ الصفحة بالعديد من الرسومات و / أو الصور عالية الجودة ، مع تقليص استخدامسمات <img> ارتفاع وعرض العنصر.  الملفات المرتبطة من الصفحة مثل CSS و JavaScript كبيرة.  قد يكون ترميز HTML المصدر معقدًا وغير شامل أيضًا. 

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

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

  1. اسأل نفسك: "هل كل رسائلي ضرورية للغاية؟"  إذا لم يكن كذلك ، فقم بإزالة الصور غير الضرورية.  يمكنك فحص موقعك هنا للحصول على اقتراحات حول الصور التي سيتم ضغطها. 
  2. قم بتقليل حجم ملف صورك باستخدام أدوات مثل Shrink O'Matic أو RIOT . 
  3. التحميل المسبق للصور.  لن يؤدي ذلك إلى تحسين التكلفة عند التنزيل الأولي ، ولكن يمكن أن يجعل الصفحات الأخرى على الموقع التي تستخدم الصور محملة بشكل أسرع.  للحصول على نصائح حول هذا ، راجع هذه المقالة . 

هناك طريقة أخرى لتقليل التكلفة تتمثل في تقليل ملفات CSS و JavaScript المرتبطة.  هناك الكثير من الأدوات للمساعدة في هذا المسعى ، مثل Minify CSS و Minify JS . 

قبل أن نغادر هذا الموضوع ، نسعى جاهدين لنكون متواجدين مع HTML ( راجع الخطأ رقم 1 ) واستخدم التقدير الجيد عند استخدام علامات <style> أو <script> في HTML. 

5. إنشاء قانون يجب أن تعمل 

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

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

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

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

6. كتابة رمز Forking 

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

التأثير : مع تحديث إصدارات جديدة من المتصفحات ، تصبح إدارة ملفات الرموز ضخمة الحجم ويصعب إدارتها.  وكما ذكر في # 1 ، فإنه لا لزوم لها على نحو متزايد . 

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

7. تصميم غير مستجيب 

خطأ : يفترض تطوير الموقع عرض في نفس حجم الشاشة كمطور / مصمم. 

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

كيف تتجنب : فكر بتجاوب.  استخدم التصميم سريع الاستجابة (راجع مقالة Wikipedia أو A List Apart ) في مواقعك.  فيما يلي بعض البرامج التعليمية العملية حول هذا الموضوع ، بما في ذلك الصور المتجاوبة .  مكتبة شعبية جدا جاهزة للعمل في هذا المجال هو Bootstrap . 

8. صنع صفحات لا معنى لها 

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

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

كيفية تجنب : استخدام كبار المسئولين الاقتصاديين (محرك البحث الأمثل) ودعم الوصول في HTML.  بخصوص تحسين محركات البحث ، تأكد من إضافة علامات<meta> لتوفير معنى لصفحة تحتوي على كلمات رئيسية ووصف.  تم العثور على كتابة جيدة حول ذلك في About Tech .  لتمكين تجربة أفضل لإمكانية الوصول ، يجب أن يتم تحديد سمة alt = "وصف الصورة" في كل منعلامات <img> أو <area> .  بالطبع ، هناك الكثير للقيام به ، ويمكن التحقق من المزيد من الاقتراحات في " حول التقنية" .  يمكنك أيضًا اختبار صفحة ويب عامة في Cynthia Says لمعرفة ما إذا كانت متوافقة مع القسم 508 . 

9. إنتاج المواقع التي هي منعشة للغاية 

خطأ : إنشاء موقع يتطلب تحديثًا كاملاً للصفحة لكل تفاعل. 

التأثير : على غرار الصفحات المتضخمة ( راجع الخطأ رقم 4 ) ، يتأثر أداء وقت تحميل الصفحة.   تفتقر تجربة المستخدم إلى السلاسة ، وقد يتسبب كل تفاعل في إعادة تعيين قصيرة (أو طويلة) للصفحة. 

كيفية تجنب : إحدى الطرق السريعة لتجنب ذلك هي بتحديد ما إذا كان النشر إلى الخادم مطلوبًا بالفعل أم لا.   على سبيل المثال ، يمكن استخدام البرنامج النصي من جانب العميل لتوفير نتائج فورية عند وجود تبعية لموارد من جانب الخادم.  يمكنك أيضًا تبني تقنيات AJAX (Wikipedia ) أو الانتقال إلى أبعد من ذلك باستخدام طريقة "SPA" ( Wikipedia )الخاصة بتطبيق صفحة واحدة .  تتوفر مكتبات / أطر عمل JavaScript الشائعة لجعل تبني هذه الأساليب أسهل بكثير ، مثل JQuery وKnockoutJS و AngularJS . 

10. العمل أكثر من اللازم 

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

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

كيف تتجنب : استكشاف خياراتك.   فكر في استخدام أدوات جديدة أو تقنيات عملية جديدة لكل مرحلة من مراحل التطوير.  على سبيل المثال ، كيف يقارن محرر التعليمات البرمجية الحالي الخاص بك إلى Sublime Text أوVisual Studio ؟   بغض النظر عن محرر الكود الذي تستخدمه ، هل غاصت مؤخرًا في ميزاته؟   ربما يمكن لاستثمار صغير من وقتك في الاطلاع على الوثائق أن يكشف النقاب عن طريقة جديدة للقيام بشيء يمكن أن يوفر ساعات وساعات من الوقت لاحقًا.  على سبيل المثال ، لاحظ كيف يمكن للإضافة إلى Visual Studio زيادة الإنتاجية لمطوري الويب ، كما هو موضح في هذه المشاركة . 

لا تفوّت الأدوات المتاحة على الويب لمساعدتك!  على سبيل المثال ، تحقق من الأدوات الموجودة في dev.modern.ie لتبسيط الاختبار (عبر الأنظمة الأساسية والأجهزة المتعددة) واستكشاف الأخطاء وإصلاحها. 

يمكنك أيضًا المساعدة في تقليل الوقت والأخطاء من خلال أتمتة العمليات.  مثال على ذلك هو استخدام أداة مثل Grunt التي يمكنها أتمتة أشياء مثل تصغير الملفات ( راجع الخطأ # 4 ).  مثال آخر هو Bower التي يمكن أن تساعد في إدارة المكتبات / الأطر ( انظر الخطأ رقم 9 ). 

ماذا عن خادم الويب نفسه؟  مع مساعدة من خدمات مثل Microsoft Azure Web Apps ، يمكنك إنشاء موقع بسرعة لأي سيناريو تطوير يمكن أن يوسع نطاق أعمالك بسهولة! 

ملخص 

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

مزيد من التدريب العملي مع JavaScript 

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

نشجعك على الاختبار عبر المستعرضات والأجهزة بما في ذلك Microsoft Edge - المتصفح الافتراضي لنظام التشغيل Windows 10 - مع أدوات مجانية علىdev.modern.IE : 

تعلم متعمق للتكنولوجيا في Microsoft Edge و Web Platform من مهندسين ومبتكرين: 

المزيد من الأدوات والموارد عبر منصة مجانية لمنصة الويب: 

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.