वेब डिझाईनचे तीन स्तर

सर्व वेबसाइट संरचना, शैली आणि व्यवहाराच्या मिश्रणासह का बांधतात

फ्रंट-एंड वेबसाइट विकास वर्णन करण्यासाठी वापरले जाते की एक सामान्य सादृश्य तो एक 3 पायांची स्टूल सारखे आहे हे 3 पाय, ज्याला वेब डेव्हलपमेंटचे 3 थर म्हणूनही ओळखले जाते, हे संरचना, शैली आणि व्यवहार असतात.

वेब डेव्हलपमेंटचे तीन स्तर

• रचना किंवा सामग्री स्तर
  • वेब पृष्ठाची संरचना किंवा सामग्री स्तर त्या पृष्ठाचे अंतर्निहित एचटीएमएल कोड आहे. घराच्या फ्रेमप्रमाणेच एक मजबूत पाया तयार करतो ज्यावर घराचे इतर भाग बांधले गेले आहेत, त्याचप्रमाणे एच.आय.एल ची एक ठोस पाया ज्यामुळे एक वेबसाइट निर्माण करता येते. एचटीएमएल स्ट्रक्चरमध्ये मजकूर किंवा प्रतिमा असू शकतात आणि त्यात हाइपरलिंकचा समावेश आहे जे अभ्यागतांनी त्या वेबसाइटवर नेव्हिगेट करण्यासाठी वापरेल.
• शैली किंवा सादरीकरण स्तर
  • साइट किंवा अभ्यागतांना संरचित HTML दस्तऐवज कसे दिसेल हे शैली किंवा सादरीकरण स्तर सूचित करते. हा स्तर CSS (कॅस्केडिंग शैली पत्रके) द्वारे परिभाषित केला जातो. या फायलींमध्ये अशी शैली आहे जी एक वेब ब्राउझरमध्ये दस्तऐवज कसे प्रदर्शित केले जावे हे दर्शवेल. आजच्या वेबवर, स्टाइल लेयरमध्ये मीडिया क्वेरी समाविष्ट होऊ शकतात ज्या साइटवरील डिस्प्ले वेगळ्या स्क्रीन आकार आणि डिव्हाइसेसवर आधारित बदलू शकतात.
• वागणूक
  • वर्तणूक थर हा वेब पेजचा थर आहे जो वेगळ्या वापरकर्ता क्रियांना प्रतिसाद देऊ शकतो किंवा शर्तींच्या सेटवर आधारित एका पृष्ठावर बदल करू शकतो. बहुतेक वेब पृष्ठांसाठी, वर्तन पातळी पृष्ठावर JavaScript परस्परसंवाद होईल.

आपण स्तरांवर वेगवेगळे का आणावे?

जेव्हा आपण एक वेब पृष्ठ तयार करता तेव्हा ते शक्य तितक्या वेगळ्या ठेवू शकता. रचना आपल्या एचटीएमएल, व्हिज्युअल स्टाइलमध्ये सीएसएसवर आणि व्हेहेयर्सना साईट वापरण्यासाठी वापरल्या जाणा-या कोणत्याही स्क्रिप्टवर विश्वास ठेवायला हवा.

थर विभक्त करण्याचे काही लाभ म्हणजे:

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

• एसइओ
  • अशा साइट्स ज्या शैली आणि संरचनेचे वेगळे वेगळेकरण करतात ते सर्च इंजिनसाठी चांगले कार्य करू शकतात कारण त्या साइट अधिक प्रभावीरित्या त्या सामग्रीला क्रॉल करते आणि व्हिज्युअल शैली किंवा वर्तणुकीच्या माहितीसह खाली न पडता पृष्ठ समजून घेतात.
• प्रवेशयोग्यता
  • बाह्य शैली पत्रके आणि स्क्रिप्ट फायली लोकांसाठी आणि ब्राउझरसाठी अधिक प्रवेशयोग्य आहेत. शैली आणि संरचना वेगळे असल्यामुळे, स्क्रीन वाचकांसारख्या सॉफ्टवेअर शैलीत अडकल्याशिवाय संरचना स्तरावरून अधिक सहजपणे प्रक्रिया करू शकतात कारण ते तरीही वापरु शकत नाहीत.
• बॅकवर्ड सहत्वता
  • आपल्याकडे विकास स्थळांबरोबर डिझाइन केलेली साइट आहे तेव्हा ते अधिक बॅकवर्ड सहत्व असेल कारण ब्राउझर किंवा डिव्हाइस जे काही सीएसएस शैली वापरू शकत नाहीत किंवा ज्यात JavaScript अक्षम आहे ते अजूनही HTML पाहू शकतात. आपल्या वेब साइटला नंतर त्यांना सहाय्य करणार्या ब्राउझरसाठी वैशिष्ट्यांसह सुधारीत केले जाऊ शकते.

एचटीएमएल - स्ट्रक्चर लेअर

रचना थर आहे जिथे आपण आपल्या ग्राहकांना वाचू किंवा पाहू इच्छित असलेली सर्व सामग्री संग्रहित करतो. हे मानके अनुरूप HTML5 मध्ये कोडित केले जाईल आणि त्यात मजकूर आणि प्रतिमा तसेच मल्टीमीडिया (व्हिडिओ, ऑडिओ इ.) समाविष्ट होऊ शकते. आपल्या साइटच्या सामग्रीचे प्रत्येक पैलू संरचनेचे स्तर मध्ये दर्शवले आहे हे सुनिश्चित करणे महत्त्वाचे आहे हे जे JavaScript बंद केले आहे किंवा ज्या साइटला सीएसएस बघता येत नाही अशा सर्व साइटवरील सर्व कार्यक्षमता या वेबसाईटवर प्रवेश करण्याची परवानगी देते.

सीएसएस - शैलियाँ लेअर

आपण आपल्या वेबसाइटसाठी बाह्य शैली पत्रकामध्ये आपल्या सर्व दृश्य शैली तयार कराल. आपण एकाधिक स्टाइलशीट वापरू शकता, परंतु लक्षात ठेवा प्रत्येक स्वतंत्र सीएसएस फाईलला साइटच्या कार्यप्रदर्शनास प्रभावित करणारी एक HTTP विनंती प्राप्त करण्याची आवश्यकता आहे.

JavaScript - वर्तणूक स्तर

वर्तन स्तरासाठी जावास्क्रिप्ट सर्वसामान्यपणे वापरली जाणारी भाषा आहे, परंतु मी आधी नमूद केल्याप्रमाणे, सीजीआय आणि पीओपी वेब पेज वर्तन देखील व्युत्पन्न करू शकतात. म्हटल्या जात असताना, जेव्हा बहुतांश डेव्हलपर वर्तन स्तराचा संदर्भ देतात, तेव्हा ते असे म्हणते की ते वेब ब्राउझरमध्ये थेट सक्रिय झाले आहे - जेणेकरून जावास्क्रिप्ट नेहमी पसंतीची भाषा असते. आपण थेट DOM किंवा दस्तऐवज ऑब्जेक्ट मॉडेलशी संवाद साधण्यासाठी या स्तराचा वापर करा. वर्किंग लेयरमधील वैध HTML लिहिणे देखील DOM परस्पर क्रियांसाठी महत्त्वाचे आहे.

जेव्हा आपण वर्तन स्तरामध्ये बिल्ड करता तेव्हा आपल्याला बाह्य स्क्रीप्ट फायलींचा वापर सीएसएस सारखाच करावा. आपण बाह्य शैली पत्रक वापरण्यासाठी सर्व समान फायदे मिळवा.