الأشخاص الذين يعملون في تصميم الويب شبّهت الصناعة تطوير مواقع الويب الأمامية بمقعد ثلاثي الأرجل. تتكون هذه الأرجل الثلاثة - الطبقات الثلاث لتطوير الويب - من بنية الموقع وأسلوبه وسلوكياته.
لماذا يجب فصل الطبقات؟
عندما تقوم بإنشاء صفحة ويب ، يجب أن يتم تحويل هيكلها إلى HTML الخاص بك ، الأنماط المرئية لـ CSS، وسلوكيات البرامج النصية. بعض فوائد فصل الطبقات هي:
- الموارد المشتركة: عند كتابة ملف CSS أو JavaScript خارجي ، يمكن لأي صفحة على الموقع استخدام هذا الملف. إذا كنت بحاجة إلى إجراء تغيير على هذا الملف ، فربما إلى تحديث بعض الأنماط المطبعية على موقع الويب ، ستحصل كل صفحة تستخدم ورقة الأنماط هذه على التغيير. ليست هناك حاجة لتعديل كل صفحة من صفحات الموقع على حدة ، الأمر الذي قد يكون مهمة شاقة لموقع ويب كبير.
- تنزيلات أسرع: بعد أن يقوم العميل بتنزيل البرنامج النصي أو ورقة الأنماط لأول مرة ، يتم تخزينه مؤقتًا بواسطة مستعرض الويب. لأن هذه الموارد المشتركة موجودة الآن في ملف مخبأ المتصفح، يتم تحميل الصفحات الأخرى المطلوبة في المتصفح بسرعة أكبر ، مما يؤدي إلى تحسين سرعة الصفحة وأدائها بشكل عام.
- فرق متعددة الأشخاص: إذا كان لديك أكثر من شخص واحد يعمل على موقع ويب في وقت واحد ، فاستخدم أنظمة التحكم في الإصدارات التي تسمح بإيداع الملفات وسحبها للتأكد من أن الجميع يعملون مع أحدث الإصدارات. يصعب القيام بهذه العملية إذا كانت الأنماط والسلوكيات متداخلة مع مستندات الهيكل.
- SEO: الموقع الذي يوضح فصلًا واضحًا بين الأسلوب والهيكل من المرجح أن يؤدي بشكل أفضل لمحركات البحث لأنها يمكن الزحف إلى هذا المحتوى بشكل أكثر فاعلية وفهم الصفحة دون التورط في الأسلوب المرئي والسلوك معلومة.
- إمكانية الوصول: أوراق الأنماط الخارجية وملفات البرامج النصية أكثر سهولة بالنسبة للأشخاص والمتصفحات. برامج مثل قارئات الشاشة يمكنهم معالجة المحتوى من طبقة الهيكل بسهولة أكبر دون التعامل مع الأنماط التي لا يمكنهم استخدامها على أي حال.
- التوافق: من المرجح أن يكون الموقع المصمم بطبقات تطوير منفصلة متوافقًا مع الإصدارات السابقة بسبب يمكن للمتصفحات والأجهزة التي لا يمكنها استخدام أنماط CSS معينة أو التي تم تعطيل JavaScript فيها عرض ملف لغة البرمجة. يمكنك بعد ذلك تحسين موقع الويب الخاص بك تدريجيًا باستخدام ميزات المتصفحات التي تدعمها.
HTML: طبقة الهيكل
البنية أو طبقة المحتوى لصفحة الويب هي الأساس لغة البرمجة رمز تلك الصفحة. تمامًا كما يُنشئ إطار المنزل أساسًا قويًا يُبنى عليه باقي المنزل ، فإن الأساس المتين لـ HTML ينشئ نظامًا أساسيًا يمكن إنشاء موقع ويب عليه.
طبقة الهيكل هي المكان الذي تخزن فيه كل المحتوى الذي يريد عملاؤك قراءته أو الاطلاع عليه. يمكن أن تتكون بنية HTML من نصوص وصور ، وتتضمن امتداد الارتباطات التشعبية التي سيستخدمها الزوار للتنقل حول موقع الويب. هذه المعلومات مشفرة في الامتثال للمعايير HTML5 ويمكن أن تتضمن نصًا وصورًا ووسائط متعددة (فيديو ، صوت ، إلخ).
يجب تمثيل كل جانب من جوانب محتوى الموقع في طبقة الهيكل. يسمح هذا الفصل للعملاء الذين تم إيقاف تشغيل JavaScript أو الذين لا يمكنهم عرض وصول CSS إلى موقع الويب بالكامل ، إن لم يكن جميع وظائفه.
CSS: طبقة الأنماط
تحدد هذه الطبقة كيف سيبدو مستند HTML المنظم على زوار الموقع ويتم تعريفه بواسطة CSS (اوراق النمط المتعاقب). تحتوي هذه الملفات على إرشادات أسلوبية لكيفية عرض المستند في مستعرض ويب. عادة ما تتضمن طبقة النمط تساؤلات الإعلام التي تغير عرض الموقع بناءً على حجم الشاشة والجهاز.
يجب أن تكون جميع الأنماط المرئية لموقع الويب موجودة في ورقة أنماط خارجية. يمكنك استخدام أوراق أنماط متعددة ، لكن كل ملف CSS يتطلب طلب HTTP لجلبه ، تؤثر على أداء الموقع.
جافا سكريبت: طبقة السلوك
تجعل طبقة السلوك موقع الويب تفاعليًا ، مما يسمح للصفحة بالاستجابة لإجراءات المستخدم أو التغيير بناءً على مجموعة من الشروط. JavaScript هي اللغة الأكثر استخدامًا لطبقة السلوك ، ولكن CGI و بي أتش بي كثيرا ما تستخدم أيضا.
عندما يشير المطورون إلى طبقة السلوك ، فإن معظمهم يعني الطبقة التي يتم تنشيطها مباشرة في متصفح الويب. استخدم هذه الطبقة للتفاعل مباشرة مع Document Object Model. كتابة HTML صالح في طبقة المحتوى مهم لتفاعلات DOM في طبقة السلوك. عند إنشاء طبقة السلوك ، يجب عليك استخدام ملفات البرامج النصية الخارجية ، تمامًا كما هو الحال مع CSS ، لتحسين السرعة والأداء.