वेब डिज़ाइन उद्योग में काम करने वाले लोग फ्रंट-एंड वेबसाइट विकास को तीन-पैर वाले मल में पसंद करते हैं। ये तीन पैर - वेब विकास की तीन परतें - संरचना, शैली और व्यवहार शामिल हैं।
आपको परतों को अलग क्यों करना चाहिए?
जब आप एक वेब पेज बना रहे हैं, तो इसकी संरचना को आपके एचटीएमएल, सीएसएस में दृश्य शैलियों, और स्क्रिप्ट के व्यवहार के लिए रेलेगेट किया जाना चाहिए। परतों को अलग करने के कुछ फायदे हैं:
- साझा संसाधन: जब आप बाहरी सीएसएस या जावास्क्रिप्ट फ़ाइल लिखते हैं, तो साइट पर कोई भी पृष्ठ उस फ़ाइल का उपयोग कर सकता है। यदि आपको उस फ़ाइल में बदलाव करने की आवश्यकता है, तो शायद वेबसाइट पर कुछ टाइपोग्राफ़िक शैलियों को अपडेट करने के लिए, उस स्टाइलशीट का उपयोग करने वाले प्रत्येक पृष्ठ में बदलाव आएगा। वेबसाइट के प्रत्येक पृष्ठ को व्यक्तिगत रूप से संपादित करने की कोई आवश्यकता नहीं है, जो एक बड़ी वेबसाइट के लिए एक कठिन उपक्रम हो सकता है।
- तेज़ डाउनलोड: एक बार जब आपके ग्राहक द्वारा पहली बार स्क्रिप्ट या स्टाइलशीट डाउनलोड किया गया है, तो यह वेब ब्राउज़र द्वारा कैश किया जाता है। चूंकि ये साझा संसाधन अब ब्राउज़र के कैश में निहित हैं, ब्राउज़र में अनुरोध किए गए अन्य पृष्ठ अधिक तेज़ी से लोड होते हैं, जो समग्र पृष्ठ की गति और प्रदर्शन को बेहतर बनाता है।
- बहु-व्यक्ति टीम: यदि आपके पास एक बार वेबसाइट पर एक से अधिक व्यक्ति काम कर रहे हैं, तो आप उन सिस्टम का उपयोग कर सकते हैं जो फ़ाइलों को जांचने की अनुमति देते हैं ताकि यह सुनिश्चित किया जा सके कि हर कोई नवीनतम संस्करणों के साथ काम कर रहा है। यदि शैलियों और व्यवहार संरचना दस्तावेजों के साथ अंतर्निहित हैं तो यह करना बहुत कठिन है।
- एसईओ: ऐसी साइट जिसमें शैली और संरचना का स्पष्ट पृथक्करण है, खोज इंजन के लिए बेहतर प्रदर्शन करने की संभावना है क्योंकि वे उस सामग्री को अधिक प्रभावी ढंग से क्रॉल कर सकते हैं और पृष्ठ को समझ सकते हैं बिना दृश्य शैली और व्यवहार की जानकारी में फंस गए।
- पहुँच: बाहरी स्टाइल शीट्स और स्क्रिप्ट फाइलें लोगों और ब्राउज़रों के लिए अधिक सुलभ हैं। स्क्रीन पाठक जैसे सॉफ़्टवेयर संरचना परत से सामग्री को उन शैलियों से निपटने के बिना आसानी से संसाधित कर सकते हैं जिन्हें वे किसी भी तरह से उपयोग नहीं कर सकते हैं।
- अनिच्छुक अनुकूलता: एक ऐसी साइट जो अलग-अलग विकास परतों के साथ डिज़ाइन की गई है, पिछड़ी-संगत होने की अधिक संभावना है क्योंकि ब्राउज़र और डिवाइस जो कुछ सीएसएस शैलियों का उपयोग नहीं कर सकते हैं या जिनके पास जावास्क्रिप्ट अक्षम है, वे अभी भी HTML देख सकते हैं। फिर आप उन वेबसाइटों के लिए अपनी वेबसाइट को प्रगतिशील रूप से बढ़ा सकते हैं जो उन्हें समर्थन देते हैं।
एचटीएमएल: संरचना परत
किसी वेब पेज की संरचना या सामग्री परत उस पृष्ठ का अंतर्निहित HTML कोड है। जैसे ही घर का फ्रेम एक मजबूत नींव बनाता है जिस पर घर का बाकी निर्माण होता है, एचटीएमएल की एक ठोस नींव एक प्लेटफॉर्म बनाती है जिस पर एक वेबसाइट बनाई जा सकती है।
संरचना परत वह जगह है जहां आप उन सभी सामग्री को संग्रहीत करते हैं जिन्हें आपके ग्राहक पढ़ना चाहते हैं या देखना चाहते हैं। एचटीएमएल संरचना में पाठ और छवियां हो सकती हैं, और इसमें हाइपरलिंक्स शामिल हैं जो आगंतुक वेबसाइट के चारों ओर नेविगेट करने के लिए उपयोग करेंगे। यह मानकों-अनुरूप HTML5 में कोडित है और इसमें टेक्स्ट, इमेज और मल्टीमीडिया (वीडियो, ऑडियो इत्यादि) शामिल हो सकते हैं।
किसी साइट की सामग्री के हर पहलू को संरचना परत में प्रदर्शित किया जाना चाहिए। यह उन ग्राहकों को अनुमति देता है जिनके पास जावास्क्रिप्ट बंद है या जो पूरी वेबसाइट पर सीएसएस पहुंच नहीं देख सकते हैं, अगर इसकी सभी कार्यक्षमता नहीं है।
सीएसएस: स्टाइल परत
यह परत निर्देशित करती है कि एक संरचित HTML दस्तावेज़ साइट के विज़िटर को कैसे देखेगा और सीएसएस (कैस्केडिंग स्टाइल शीट्स) द्वारा परिभाषित किया गया है। इन फ़ाइलों में स्टाइलिस्ट निर्देश हैं कि दस्तावेज़ को वेब ब्राउज़र में कैसे प्रदर्शित किया जाना चाहिए। शैली परत में आमतौर पर मीडिया प्रश्न शामिल होते हैं जो स्क्रीन आकार और डिवाइस के आधार पर साइट के प्रदर्शन को बदलते हैं।
किसी वेबसाइट के लिए सभी दृश्य शैलियों को बाहरी स्टाइलशीट में रहना चाहिए। आप एकाधिक स्टाइलशीट का उपयोग कर सकते हैं, लेकिन याद रखें कि प्रत्येक सीएसएस फ़ाइल को साइट प्रदर्शन को प्रभावित करने, इसे लाने के लिए एक HTTP अनुरोध की आवश्यकता होती है।
जावास्क्रिप्ट: व्यवहार परत
व्यवहार परत वेबसाइट पर इंटरैक्टिव बनाती है, जिससे पेज उपयोगकर्ता क्रियाओं का जवाब दे सकता है या शर्तों के सेट के आधार पर बदल सकता है। जावास्क्रिप्ट व्यवहार परत के लिए सबसे अधिक इस्तेमाल की जाने वाली भाषा है, लेकिन सीजीआई और PHP का भी अक्सर उपयोग किया जाता है।
जब डेवलपर्स व्यवहार परत का संदर्भ लेते हैं, तो उनमें से अधिकतर उस परत का अर्थ है जो सीधे वेब ब्राउज़र में सक्रिय होता है। आप इस परत का उपयोग सीधे डोम (दस्तावेज़ ऑब्जेक्ट मॉडल) के साथ संवाद करने के लिए करते हैं। सामग्री परत में वैध HTML लिखना व्यवहार परत में डीओएम इंटरैक्शन के लिए महत्वपूर्ण है। जब आप व्यवहार परत में निर्माण करते हैं, तो आपको गति और प्रदर्शन को अनुकूलित करने के लिए, सीएसएस के साथ बाहरी स्क्रिप्ट फ़ाइलों का उपयोग करना चाहिए।
