الأخطاء الخمسة الأكثر شيوعًا التي يصنعها مطورو HTML5: دليل المبتدئين

لقد مرت أكثر من 20 عامًا منذ أن حدد Tim Berners-Lee و Robert Cailliau لغة HTML ، والتي أصبحت لغة الترميز القياسية المستخدمة لبناء الإنترنت. منذ ذلك الحين ، توسل مجتمع تطوير HTML لإجراء تحسينات على هذه اللغة ، ولكن هذه الصرخة سمعها في الغالب مطورو مستعرض الويب الذين حاولوا تخفيف مشكلات HTML الخاصة بزملائهم. لسوء الحظ ، أدى هذا إلى المزيد من المشكلات التي تسبب في العديد من مشكلات التوافق عبر المستعرضات وتكرار أعمال التطوير. على مدار العشرين عامًا الماضية ، تمت ترقية HTML 4 مرات ، بينما حصلت معظم المتصفحات على عدد مزدوج من التحديثات الرئيسية بالإضافة إلى العديد من التصحيحات الصغيرة.

كان من المفترض أن تحل HTML5 مشاكلنا أخيرًا وأن تصبح معيارًا واحدًا يحكمها جميعًا (المتصفحات) . ربما كانت هذه واحدة من أكثر التقنيات المتوقعة منذ إنشاء شبكة الويب العالمية. هل حدث ذلك؟ هل حصلنا أخيرًا على لغة ترميزية واحدة ستكون متوافقة تمامًا عبر المستعرضات وستعمل على جميع الأنظمة الأساسية لسطح المكتب والجوّال مما يمنحنا كل تلك الميزات التي كنا نطلبها؟ لا أدري، لا أعرف! قبل أيام قليلة (16 سبتمبر 2014) تلقينا مكالمة أخرى لمراجعتها من قبل W3C لذا فإن مواصفات HTML5 لا تزال غير مكتملة.

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

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

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

الخطأ الشائع الأول: الثقة في التخزين المحلي

دعهم يأكلون كعكة! كان هذا النهج عبئًا على المطورين على مر العصور. نظرًا للخوف المعقول إلى حد معقول من الانتهاكات الأمنية وحماية أجهزة الكمبيوتر ، في "العصور المظلمة" عندما كان الكثيرون يخشون الإنترنت ، سُمح لتطبيقات الويب بترك كميات صغيرة بشكل غير معقول من البيانات على أجهزة الكمبيوتر. صحيح ، كانت هناك أشياء مثل بيانات المستخدم التي قدمها لنا "خبراء متصفح رائعون من Microsoft (r)" ، أو أشياء مثل Local Shared Objects في Flash ، ولكن هذا بعيد كل البعد عن الكمال.

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

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

الخطأ الشائع الثاني: توقع التوافق بين المتصفحات

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

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

على سبيل المثال ، تعد رسوم الويب المتحركة ميزة رائعة لا يدعمها سوى Chrome و Opera ، بينما يتم تجاهل ميزة إعلام الويب التي تسمح بتنبيه المستخدم خارج سياق صفحة ويب بحدوث حدث ما ، مثل تسليم البريد الإلكتروني ، تمامًا بواسطة Internet Explorer.

لمعرفة المزيد حول ميزات HTML5 والدعم من قبل متصفحات مختلفة ، راجع دليل HTML5 على www.caniuse.com.

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

الخطأ الشائع الثالث: افتراض الأداء العالي

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

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

الخطأ الشائع الرابع: الوصول المحدود

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

يمكنك التحقق من هذا المكان لمزيد من المعلومات حول إمكانية الوصول في HTML5 والحالة الحالية لميزات الوصول الأكثر شيوعًا.

الخطأ الشائع الخامس: عدم استخدام تحسينات HTML5

وسعت HTML5 مجموعة علامات HTML / XHTML القياسية بشكل ملحوظ. بالإضافة إلى العلامات الجديدة ، حصلنا على عدد غير قليل من القواعد والسلوكيات الجديدة. اختار عدد كبير جدًا من المطورين بعض التحسينات وتخطوا بعض الميزات الجديدة الرائعة جدًا لـ HTML5.

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

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

 <form action="demo_form.asp"> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"> </form> Last name: <input type="text" name="lname" form="form1">

حتى إذا لم يكن lname داخل النموذج ، فسيتم نشره مع fname .

لمزيد من المعلومات حول سمات وتحسينات النموذج الجديدة ، يمكنك التحقق من شبكة مطوري Mozilla.

يتم إحتوائه

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