الشفرة

لماذا مسألة العلامات نظيفة في تصميم المواقع؟

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

لا يساعد الترميز النظيف والبناء بمعايير الويب على القيام بذلك فحسب ، بل سيوفر لك الوقت والمال على المدى الطويل.

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

أول جافا سكريبت ، ثم CSS ، و XML وأحدث AJAX. إن تبني HTML 5 على نطاق واسع هو قاب قوسين أو أدنى ، حيث يتمتع Firefox و Safari و Opera و Chrome بدعم كامل تقريبًا من HTML 5 (لا يتخلف الطفل البطيء في المتصفح ، Internet Explorer ، عن المعتاد).

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

ماذا يعني أن يكون لديك علامة "نظيفة"؟

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

يجعل HTML خالٍ من الفوضى استخدامًا متقطعًا للعلامات ، ويقضي على الدخيلاً وينجز مهمته بأقل ترميز حسب الضرورة . فهو يتجنب السمات غير الضرورية ، مثل CSS المضمَّن ، ويترك كل مستند منظمًا ومنظمًا.

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

تعني المعايير المتوافقة أن صفحاتك تحقق من الصحة وفقًا للمعايير المنصوص عليها في W3C ل HTML و CSS و XML. يعني استخدام مدققي W3C المجانيين للتحقق من الأخطاء وتصحيحها والاختبار مرة أخرى حتى تصل إلى 100٪ صالح قدر الإمكان .

لماذا يجب أن أهتم؟ يعمل ، أليس هذا يكفي؟

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

من السهل الوقوع في فخ التفكير يجب أن يعني سريعًا ، وهذا الترميز النظيف والمتوافق مع المعايير يستغرق وقتًا أطول. من السهل القول "إنها تعمل وهذا كل ما يهم."

بالتأكيد ، إنه يعمل ... الآن ، من أجلك. ماذا عن العام المقبل ، أو بعد ثلاث سنوات من الآن؟ ماذا عن المتصفحات الجديدة؟ ماذا عن سهولة الوصول؟

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

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

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

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

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

التوسعة ، سهولة الوصول ، الترجمة والتدقيق في المستقبل

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

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

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

سيساعد الترميز النظيف والامتثال للمعايير إلى حد بعيد على ضمان عمل مواقعك في كل من هذه السيناريوهات.

ما يجب فعله و ما لا يجب فعله:

  • استخدام العلامات لأنها مخصصة. على سبيل المثال: h1 هو أول عنصر من المستوى الأعلى في الصفحة ، ثم h2 ، h3 وهكذا. يجب ألا يكون هناك سوى علامة h1 واحدة لكل صفحة.
  • يمكنك تسمية فئات CSS ومعرّفاتك باستخدام عبارات ذات معنى ، واسأل نفسك ما إذا كان شخص آخر سيعرف ما يفعله الصف / المعرّف من اسمه وحده. ما اصطلاح التسمية الأكثر منطقية: # box12 أو # comment-footer؟
  • استفد من ميراث CSS. على سبيل المثال: إذا قمت بتعيين خط في حاوية ، فلن تحتاج إلى تحديده مرة أخرى على كل عنصر تابع ما لم يحتاج عنصر الطفل إلى استخدام خط مختلف. سيؤدي ذلك إلى بقاء أوراق الأنماط لديك قليلة وسريعة التحميل.
  • تحقق من صحة HTML و CSS و XML وقم بتصحيح أكبر عدد ممكن من الأخطاء. انتبه إلى التحذيرات المتولدة أيضًا.
  • لا تحقق مزدوج WYSIWYG رمز ولدت وتنظيف حسب الضرورة. إنهم سيئ السمعة لقيامهم بصق ترميز ضخم ومتضخم مع كميات من الزبالة غير الضرورية وغير الصالحة.
  • لا تدفع الأنماط المضمنة أو العلامات والسمات الدخيلة لمجرد أنك في عجلة.
  • لا يعني ذلك أن الصفحة لا تجعله لا يعني أن العلامة تحت غطاء المحرك متوافقة مع المعايير أو خالية من المشاكل أو محرك البحث.

مزيد من القراءة والموارد


مكتوبة حصريًا لـ WDD بواسطة Jeff Couturier.

هل تتبع معايير الويب في مواقع الويب الخاصة بك؟ لما و لما لا؟ يرجى مشاركة تعليقاتكم معنا.

التصميم معايير الويب علامة نظيفة تصل