عندما أقوم بزيارة موقع ويب جميل، لا يسعني إلا أن ألقي نظرة على الكود المصدري. إنه مثل امتلاك زوج من نظارات الأشعة السينية والقدرة على رؤية أي شخص - حتى من خلال ورقة التين الخاصة به. هذه مجرد مسألة بالطبع! لا أستطيع الانتظار لمعرفة ما إذا كان هذا الموقع الجميل مكتوبًا بنفس الكود الجميل أم أنه مجرد جمال في الجمال. شفرة؟ جمال؟ بالتأكيد! بعد كل شيء، الكود يشبه الشعر. (ملاحظة الترجمة: "الرمز هو الشعر" هو شعار نظام التدوين الشهير WordPress.) هذه مجرد لغة HTML الأساسية وهي بطبيعة الحال ليست معقدة وأنيقة مثل اللغات الديناميكية الأخرى، لكنها لا تزال تحتفظ بالسحر الذي توفره السكتات الدماغية الفنية.
هذا جعلني أبدأ بالتفكير في كيفية جعل الكود جميلًا؟ مع HTML، كل هذا عمل يدوي. دعونا نلقي نظرة على كيف يمكن للغات الترميزية أن تصل إلى حالة من الجمال.
الصورة كبيرة بما يكفي (2000 × 2000) بحيث يمكنك طباعتها ولصقها في خزانتك الشخصية وإبهار أصدقائك. وبعد قولي هذا، هذا في الواقع حجم مربك. سأقوم بإصدار صورة PSD الأصلية ليقوم الجميع بتعديلها.
HTML5 - HTML5 وعناصره الجديدة تضفي جمالًا غير مسبوق.
DOCTYPE - HTML5 لديه أفضل نوع مستند .
المسافة البادئة - يتم استخدام علامات التبويب والمسافات لوضع مسافة بادئة للتعليمات البرمجية لإظهار العلاقة بين الوالدين والطفل بين العلامات بشكل صحيح والتأكيد على البنية الهرمية.
مجموعة الأحرف - يجب تقديم إعلان مجموعة الأحرف في الرأس قبل كل المحتوى.
العنوان - عنوان الموقع بسيط وواضح. ابدأ بوصف وظيفة الصفحة، بعد الفاصل، وانتهي بعنوان موقع الويب.
CSS - يستخدم فقط ورقة أنماط بسيطة (يتم الإعلان عن أنواع الوسائط في ورقة الأنماط)، ويستهدف فقط المتصفحات الجيدة. سيحصل IE6 والإصدارات الأقل على ورقة أنماط عامة.
الجسم - من خلال إعطاء معرف للنص ، يمكنك تصميمه بشكل فريد لصفحات مختلفة دون الحاجة إلى المزيد من العلامات.
جافا سكريبت - تسمى jQuery (أجمل مكتبة جافا سكريبت ) من جوجل. يتم تحميل ملف JavaScript واحد فقط. تتم الإشارة إلى كل برنامج نصي في أسفل الصفحة.
مسار الملف - لتحقيق الكفاءة، استخدم المسارات النسبية لموارد الموقع. من منظور التكيف مع إعادة الطباعة، تستخدم ملفات المحتوى (مثل الصور) مسارات مطلقة.
سمات الصورة - تحتوي الصورة على نص بديل، وذلك بشكل أساسي في حالة فقدان الصورة، ولكن يمكن استخدامها أيضًا للتحقق. لتحسين كفاءة العرض، من الأفضل تحديد عرض الصورة وارتفاعها.
المحتوى الرئيسي أولاً - يجب أن يكون المحتوى الرئيسي للصفحة بعد الترميز الأساسي والتنقل، وقبل أي محتوى مساعد (مثل الأشرطة الجانبية).
العناصر الوصفية المناسبة على مستوى الكتلة - HEADER، NAV، SECTION، ARTICLE، ASIDE - ستصف " أقسام الوصف " الجديدة المحتوى بشكل أفضل من DIV السابق.
التسلسل الهرمي - ستكون الكتابة بالأحرف الكبيرة لعلامات العنوان فعالة وتتبع " تسلسلاً هرميًا " واضحًا.
العلامات الوصفية المناسبة - يتم وضع علامات على القوائم وفقًا للاحتياجات المختلفة: القوائم غير المصنفة والمرتبة والمخصصة التي لا يتم استخدامها بشكل شائع.
المحتوى المشترك المضمن – من الأفضل تضمين نفس المحتوى الذي يظهر على صفحات مختلفة في الصفحة من جانب الخادم. (بأي طريقة أو لغة أو نظام إدارة المحتوى أو أيًا كان ما يناسبك.)
الفئات الدلالية - ليس من الضروري إعداد أسماء العناصر الصحيحة فحسب، بل أيضًا التأكد من أن أسماء الفئات والمعرفات ذات دلالات : يمكن أن تلعب دورًا وصفيًا حتى بدون تعليمات محددة. (على سبيل المثال، "عمود" أفضل من "يسار")
الفئات – عندما تحتاج عناصر متعددة إلى استخدام أنماط متشابهة، حاول تحديد نفس الفئة لها. (قابلية إعادة الاستخدام)
المعرفات – عندما يظهر العنصر مرة واحدة فقط في الصفحة، حاول تحديد معرفات لهم، ولا تحدد نفس المعرف لعناصر مختلفة.
العناصر الديناميكية - تتم إضافة التأثيرات الديناميكية فقط عند الحاجة إليها حقًا.
الأحرف المشفرة – عند ظهور أحرف خاصة، يرجى الانتباه إلى ترميز الأحرف .
خالية من التصميم - كل شيء على الصفحة ليس له علاقة بالتصميم ، ولا تحتاج حتى إلى تحديد النمط الذي تريده. يقتصر كل شيء في الصفحة على العناصر الثلاثة التالية: موارد الموقع المطلوبة والمحتوى والوصف.
التعليقات - عند النظر إلى الكود، سيتم تضمين المحتوى الذي لا يتطلب تركيزًا خاصًا أو غير واضح بشكل خاص في التعليقات .
صالح - يتوافق الترميز على مستوى الموقع مع التحقق من صحة W3C. انتبه إلى إغلاق العلامة، وتأكد من السمات الضرورية، وتجنب الأساليب القديمة، وما إلى ذلك.