الطبقات الثلاث لتصميم الويب

لماذا يتم إنشاء جميع مواقع الويب بمزيج من البنية والأسلوب والسلوكيات

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

الطبقات الثلاث لتطوير الويب

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

لماذا يجب فصل الطبقات؟

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

بعض فوائد فصل الطبقات هي:

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

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

HTML - طبقة الهيكل

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

CSS - طبقة الأنماط

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

JavaScript - طبقة السلوك

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

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