वेब डिजाइन की तीन परतें

क्यों सभी वेबसाइटें संरचना, शैली और व्यवहार के संयोजन के साथ बनाई गई हैं

फ्रंट एंड वेबसाइट विकास का वर्णन करने के लिए उपयोग किया जाने वाला एक आम सादृश्य यह है कि यह 3-पैर वाले मल की तरह है। ये 3 पैर, जिन्हें वेब विकास की 3 परतों के रूप में भी जाना जाता है, संरचना, शैली और व्यवहार हैं।

वेब विकास की तीन परतें

• संरचना या सामग्री परत
  • किसी वेब पेज की संरचना या सामग्री परत उस पृष्ठ का अंतर्निहित HTML कोड है। एक घर के फ्रेम की तरह एक मजबूत नींव बनाता है जिस पर शेष घर बनाया गया है, इसलिए एचटीएमएल की ठोस नींव एक प्लेटफार्म बनाती है जिस पर एक वेबसाइट बनाई जा सकती है। एचटीएमएल संरचना में पाठ या छवियां हो सकती हैं और इसमें हाइपरलिंक्स शामिल हैं जो आगंतुक उस वेबसाइट के चारों ओर नेविगेट करने के लिए उपयोग करेंगे।
• शैली या प्रस्तुति परत
  • शैली या प्रस्तुति परत यह निर्धारित करती है कि एक संरचित HTML दस्तावेज़ साइट के आगंतुकों को कैसे देखेगा। यह परत सीएसएस (कैस्केडिंग स्टाइल शीट्स) द्वारा परिभाषित की गई है। इन फ़ाइलों में शैलियों को शामिल किया गया है जो दर्शाता है कि दस्तावेज़ को वेब ब्राउज़र में कैसे प्रदर्शित किया जाना चाहिए। आज के वेब पर, शैली परत में मीडिया क्वेरीज़ भी शामिल हो सकती हैं जो विभिन्न स्क्रीन आकारों और उपकरणों के आधार पर साइट के प्रदर्शन को बदल सकती हैं।
• व्यवहार
  • व्यवहार परत एक वेब पेज की परत है जो विभिन्न उपयोगकर्ता कार्रवाइयों का जवाब दे सकती है या शर्तों के सेट के आधार पर किसी पृष्ठ में परिवर्तन कर सकती है। अधिकांश वेब पृष्ठों के लिए, व्यवहार स्तर पृष्ठ पर जावास्क्रिप्ट इंटरैक्शन होगा।

आपको परतों को अलग क्यों करना चाहिए?

जब आप एक वेब पेज बना रहे हैं, तो परतों को यथासंभव अलग रखने के लिए वांछनीय है। संरचना को आपके एचटीएमएल, सीएसएस में दृश्य शैलियों, और साइट का उपयोग करने वाली किसी भी स्क्रिप्ट के व्यवहार के लिए माना जाना चाहिए।

परतों को अलग करने के कुछ फायदे हैं:

• साझा संसाधन
  • जब आप बाहरी सीएसएस फ़ाइल या जावास्क्रिप्ट फ़ाइल लिखते हैं, तो आप उस फ़ाइल का उपयोग अपनी वेबसाइट पर किसी भी पेज से कर सकते हैं। यदि आपको उस फ़ाइल में बदलाव करने की आवश्यकता है, तो शायद वेबसाइट पर कुछ टाइपोग्राफ़िक शैलियों को अपडेट करने के लिए, उस स्टाइलशीट का उपयोग करने वाले प्रत्येक पृष्ठ में बदलाव आएगा। वेबसाइट के प्रत्येक पृष्ठ को व्यक्तिगत रूप से संपादित करने की कोई आवश्यकता नहीं है, जो कि बड़ी साइट के लिए एक कठिन उपक्रम हो सकता है।
• तेज़ डाउनलोड
  • एक बार आपकी ग्राहक द्वारा स्क्रिप्ट या स्टाइलशीट को पहली बार डाउनलोड किया गया है, यह उनके वेब ब्राउज़र द्वारा कैश किया गया है। चूंकि ये साझा संसाधन अब कैश में निहित हैं, ब्राउज़र में अनुरोध किए गए अन्य पृष्ठ अधिक तेज़ी से लोड होते हैं, जो समग्र पृष्ठ की गति और प्रदर्शन को बेहतर बनाता है।
• बहु व्यक्ति टीमों
  • यदि आपके पास एक बार वेब साइट पर एक से अधिक व्यक्ति काम कर रहे हैं, तो आप सिस्टम का उपयोग कर सकते हैं कि फाइलों में "चेक इन" और "चेक आउट" के लिए यह सुनिश्चित करने के लिए कि टीम में हर कोई इन फ़ाइलों के नवीनतम संस्करणों के साथ काम कर रहा है। यदि शैलियों और व्यवहार संरचना दस्तावेजों के साथ अंतर्निहित हैं तो यह करना बहुत कठिन है।

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

एचटीएमएल - संरचना परत

संरचना परत वह जगह है जहां आप उन सभी सामग्री को संग्रहीत करते हैं जिन्हें आपके ग्राहक पढ़ना चाहते हैं या देखना चाहते हैं। यह मानक अनुपालन एचटीएमएल 5 में कोडित किया जाएगा और इसमें टेक्स्ट और छवियों के साथ-साथ मल्टीमीडिया (वीडियो, ऑडियो इत्यादि) शामिल हो सकते हैं। यह सुनिश्चित करना महत्वपूर्ण है कि आपकी साइट की सामग्री के हर पहलू को संरचना परत में दर्शाया गया हो। यह किसी भी ग्राहक को जावास्क्रिप्ट बंद कर देता है या जो सीएसएस नहीं देख सकता है, उस साइट की सभी कार्यक्षमताओं की पूरी वेब साइट तक पहुंच नहीं है।

सीएसएस - स्टाइल परत

आप बाहरी स्टाइल शीट में अपनी वेबसाइट के लिए अपनी सभी दृश्य शैलियों का निर्माण करेंगे। आप एकाधिक स्टाइलशीट का उपयोग कर सकते हैं, लेकिन याद रखें कि प्रत्येक अलग सीएसएस फ़ाइल को साइट प्रदर्शन को प्रभावित करने, HTTP अनुरोध को लाने की आवश्यकता होती है।

जावास्क्रिप्ट - व्यवहार परत

जावास्क्रिप्ट व्यवहार परत के लिए सबसे अधिक इस्तेमाल की जाने वाली भाषा है, लेकिन जैसा कि मैंने पहले उल्लेख किया था, सीजीआई और PHP वेब पेज व्यवहार भी उत्पन्न कर सकते हैं। ऐसा कहा जा रहा है, जब अधिकांश डेवलपर्स व्यवहार परत का संदर्भ लेते हैं, तो उनका मतलब है कि वह परत जो सीधे वेब ब्राउज़र में सक्रिय होती है - इसलिए जावास्क्रिप्ट हमेशा पसंद की भाषा है। आप डीओएम या दस्तावेज़ ऑब्जेक्ट मॉडल के साथ सीधे बातचीत करने के लिए इस परत का उपयोग करते हैं। सामग्री परत में वैध HTML लिखना व्यवहार परत में डीओएम इंटरैक्शन के लिए भी महत्वपूर्ण है।

जब आप व्यवहार परत में निर्माण करते हैं, तो आपको बाहरी स्क्रिप्ट फ़ाइलों का उपयोग सीएसएस के साथ करना चाहिए। बाहरी स्टाइल शीट का उपयोग करने के सभी फायदे आपको मिलते हैं।