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