प्रगतिशील वृद्धि क्या है?

प्रगतिशील एन्हांसमेंट एक ऐसी तकनीक है जो यह सुनिश्चित करने में मदद करती है कि आपका सॉफ़्टवेयर मजबूत और सुलभ है। इसका पालन करके, आप यह सुनिश्चित कर सकते हैं कि अधिक से अधिक लोग आपकी वेबसाइट या ऐप का उपयोग कर सकेंगे।

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

प्रगतिशील वृद्धि कैसे काम करती है?

इसकी अत्यधिक वितरित प्रकृति के कारण, वेब को हमेशा उपकरणों की एक विशाल श्रृंखला का समर्थन करने की आवश्यकता होती है। 1970 के दशक के मूल कंप्यूटर से लेकर सक्षम आधुनिक डेस्कटॉप, टैबलेट और टीवी तक, वेबसाइटों ने एक लंबा सफर तय किया है।

सब कुछ के दिल में एचटीएमएल है। जैसा कि यह एक "क्षमाशील" भाषा है, ब्राउज़र HTML को प्रदर्शित करेंगे और साथ ही वे इसे समझेंगे। आमतौर पर, वे ऐसी किसी भी चीज़ की उपेक्षा करेंगे जिसका वे समर्थन नहीं करते हैं।

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

स्टाइलिंग के लिए एक प्रगतिशील दृष्टिकोण

CSS वेब की स्टाइल शीट भाषा है जिसका उपयोग आप रंगों, फोंट को अनुकूलित करने के लिए कर सकते हैं, लेआउट, और आपके पृष्ठों के कई अन्य विज़ुअल पहलू. आप इसका उपयोग अपनी सामग्री के डिफ़ॉल्ट रूप को बढ़ाने के लिए कर सकते हैं, लेकिन इसका मतलब यह नहीं है कि आपको अपनी सामग्री को पहले स्थान पर ठीक से नहीं बनाना चाहिए।

एक मेनू बार लें, उदाहरण के लिए; आप इसे इस तरह बना सकते हैं:

<एनएवी>
<एक href="/register">पंजीकरण करवाना</ए>
<एक href="/login">लॉग इन करें</ए>
<एक href="/about">हमारे बारे में</ए>
<एक href="/contact">संपर्क</ए>
</nav>

एक क्षैतिज मेनू प्रदर्शित करने के लिए, प्रत्येक लिंक एक बटन की तरह दिखने के साथ, आप इस सीएसएस का उपयोग करके इसे स्टाइल कर सकते हैं:

एनएवी ए {
पाठ-सजावट: कोई नहीं;
प्रदर्शन: इनलाइन-ब्लॉक;
गद्दी: 0.5em 1ईएम;
बॉर्डर: 1px सॉलिड;
सीमा-त्रिज्या: 8px;
मार्जिन-राइट: 1em;
}

जब ब्राउज़र इसे पूरी तरह से प्रस्तुत करता है, तो इसे निम्न जैसा दिखना चाहिए:

हालाँकि, यदि CSS अनुपलब्ध है, तो मेनू इस तरह प्रदर्शित होगा:

ध्यान दें कि यह मेनू जैसा कुछ भी नहीं दिखता है और इसका उपयोग करना बहुत आसान नहीं है क्योंकि लिंक एक में विलीन हो जाते हैं।

डिज़ाइन को और अधिक मज़बूत बनाने के लिए आप वैकल्पिक संरचना का उपयोग कर सकते हैं:

<एनएवी>
<उल>
<ली><एक href="/register">पंजीकरण करवाना</ए></li>
<ली><एक href="/login">लॉग इन करें</ए></li>
<ली><एक href="/about">हमारे बारे में</ए></li>
<ली><एक href="/contact">संपर्क</ए></li>
</ul>
</nav>

चूंकि यह मार्कअप एक अनियंत्रित सूची तत्व का उपयोग करता है, यह सीएसएस की अनुपस्थिति में बहुत अधिक उपयोगी है:

ध्यान दें कि ब्राउज़र की डिफ़ॉल्ट स्टाइलिंग के साथ भी इन लिंक्स को जल्दी से स्कैन करना और समझना कितना आसान है। डिफ़ॉल्ट सूची शैलियों को ओवरराइड करने के लिए इस दृष्टिकोण के लिए आपको थोड़ा और सीएसएस जोड़ने की आवश्यकता होगी:

एनएवीली { दिखाना: इन - लाइन; }

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

कार्यक्षमता का उत्तरोत्तर परिचय

जब किसी साइट या ऐप के कामकाज की बात आती है तो प्रगतिशील एन्हांसमेंट सबसे महत्वपूर्ण होता है। सिद्धांत कहता है कि, चाहे कुछ भी हो, आपकी वेबसाइट को यथासंभव अच्छी तरह से कार्य करना चाहिए।

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

इवेंट हैंडलिंग एक बहुत ही सामान्य मामला है। एक ऐसे पृष्ठ की कल्पना करें जो मांग पर अतिरिक्त सामग्री लोड करता है। यह एक मैनुअल अनंत स्क्रॉल, एक टिप्पणी एम्बेड या समान हो सकता है।

<शरीर>
<!--... -->
<बटन ऑनक्लिक ="और लोड करें();">
भार अधिक
</button>
<!--... -->
</body>

बटन का क्लिक पर विशेषता में जावास्क्रिप्ट कोड होता है जो तब चलेगा जब कोई बटन क्लिक करेगा। हालाँकि, यदि जावास्क्रिप्ट अनुपलब्ध है, तो यह बटन कुछ नहीं करेगा। उपयोगकर्ता इस बटन को क्लिक करते ही रह जाएगा और उसे कोई प्रतिक्रिया नहीं मिलेगी और उसे पता ही नहीं चलेगा कि क्या गलत हो रहा है। एक बेहतर दृष्टिकोण प्रगतिशील वृद्धि का उपयोग करता है:

<शरीर>
<!--... -->
<एक आईडी ="p2" href="/page/2">पेज 2</ए>

<लिखी हुई कहानी>
समारोहऔर लोड करें() { सांत्वना देना।लकड़ी का लट्ठा("!"); }

/* लिंक को बटन से बदलें */
वर लिंक = दस्तावेज़.getElementById ("p2");
वर बटन = दस्तावेज़.createElement ("बटन");
बटन.आंतरिक पाठ = "और लोड करें";
बटन.ऐडइवेंट लिस्टनर ("क्लिक", और लोड करें);
दस्तावेज़।शरीरपहले डालें(बटन, जोड़ना);
जोड़ना.parentNode.removeChild(जोड़ना);
</script>
</body>

यह कोड मूल लिंक को ईवेंट हैंडलर वाले बटन में बदल देता है। जावास्क्रिप्ट का उपयोग करके जावास्क्रिप्ट पर निर्भरता शुरू करके, आप निश्चित हो सकते हैं कि यह काम करेगा। और एक कार्यात्मक डिफ़ॉल्ट व्यवहार है जो मानक लिंक के रूप में काम करता है /page/2.

क्या प्रगतिशील संवर्द्धन वास्तव में आवश्यक है?

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

1. पहला, आपकी वेबसाइट पर आने वाला प्रत्येक व्यक्ति ब्राउज़र का उपयोग नहीं कर रहा है। कुछ विज़िटर बॉट होंगे, जैसे सर्च इंजन इंडेक्सर, और हो सकता है कि ये CSS या JavaScript को बिल्कुल भी न समझें।
2. दूसरा, आपकी साइट पर आने वाला प्रत्येक व्यक्ति CSS और JavaScript वाले ब्राउज़र का उपयोग नहीं करेगा। कुछ आगंतुक टर्मिनल-आधारित ब्राउज़र का उपयोग कर सकते हैं, जो न्यूनतम स्वरूपण के साथ सादा पाठ प्रदर्शित करता है। अन्य लोग स्क्रीन रीडर का उपयोग कर सकते हैं।
3. तीसरा, भले ही कोई ब्राउज़र CSS और जावास्क्रिप्ट का समर्थन करता हो, चीजें गलत हो जाती हैं। एक टूटी हुई लिंक या खराब नेटवर्क कनेक्शन के परिणामस्वरूप .css या .js फ़ाइल गुम हो सकती है। जावास्क्रिप्ट में एक बग के कारण अन्य कोड बिल्कुल नहीं चल सकते हैं।
4. अंत में, कुछ विज़िटर सक्रिय रूप से CSS या JavaScript को अक्षम करने का निर्णय ले सकते हैं। वे गोपनीयता की चिंताओं के कारण ऐसा कर सकते हैं या क्योंकि वे धीमे या भुगतान-दर-उपयोग कनेक्शन पर हैं।

एक प्रगतिशील मानसिकता अद्भुत काम करती है

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

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