प्रोग्रेसिव एनहांसमेंट या ग्रेसफुल डिग्रेडेशन

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

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

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

1. "गुड-ओल्ड-एचटीएमएल" चरण
2. सीएसएस चरण
3. CSS3 के चरण
4. जावास्क्रिप्ट चरण

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

दूसरे चरण में, दस्तावेज़ को पुराने पुराने CSS का उपयोग करके तैयार किया जाता है और अधिक साफ-सुथरा रूप धारण करता है: पृष्ठ ग्रिड प्रकट होता है, तत्वों के फ़ॉन्ट पैरामीटर, पृष्ठभूमि चित्र, और इसी तरह सेट होते हैं।

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

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

हम वर्णित चरणों के उद्देश्य को संक्षेप में प्रस्तुत करते हैं:

1. दस्तावेज़ का अर्थ, तार्किक मार्कअप। प्रौद्योगिकी: एचटीएमएल।
2. सूरत। प्रौद्योगिकी: सीएसएस।
3. अव्यक्त रूप। प्रौद्योगिकी: CSS3।
4. सहभागिता, अन्तरक्रियाशीलता, सुविधा। प्रौद्योगिकी: जावास्क्रिप्ट।

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

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

सामान्य तौर पर, वेब इंटरफेस विकसित करने के लिए प्रगतिशील वृद्धि एक अधिक कठोर और सुसंगत विचारधारा है।

प्रगतिशील संवर्द्धन क्यों दिखाई दिया?

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

इसका उत्तर सरल है: कुछ लोगों ने बहुत ही उच्च गुणवत्ता वाले सुशोभित गिरावट का सामना किया। यह सही मायने में upscale और जिम्मेदार डेवलपर्स को परेशान करता है। आखिरकार, लगभग कोई भी कह सकता है कि "मैं अच्छी तरह से काम कर रहा हूं और सुशोभित क्षरण कर रहा हूं", लेकिन विभिन्न डेवलपर्स की लागत और प्रयास परिमाण के आदेशों से भिन्न होते हैं।

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

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

व्यावहारिक उदाहरण

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

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



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



तीसरे चरण में, हम कुछ नए सीएसएस गुणों का उपयोग करते हैं ताकि रूप में निखार आए। बॉर्डर-त्रिज्या का उपयोग करके गोलाई जोड़ें, बॉक्स-छाया का उपयोग करने वाले तत्वों के लिए छाया, बटन को स्टाइल करने के लिए सीएसएस ग्रेडिएंट का उपयोग करें, और इसी तरह। अतिरिक्त इंडेंटेशन से छुटकारा पाने के लिए हम कुछ उन्नत चयनकर्ताओं का उपयोग करते हैं। परिणाम बहुत अच्छा है:



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

सबसे सरल उदाहरण का उपयोग करते हुए, हमने दिखाया कि प्रगतिशील वृद्धि का तरीका कैसे काम करता है। वैसे, यह उदाहरण htmlacademy पर एक इंटरैक्टिव प्रदर्शन में "लाइव महसूस" किया जा सकता है।

यह समझने के लिए कि कैसे सुंदर गिरावट काम करती है, बस विपरीत दिशा में उदाहरण में दिए गए चरणों की समीक्षा करें। सवाल उठता है - क्या इस उदाहरण के लिए सुंदर गिरावट को खराब करना संभव है? बेशक, हाँ! उदाहरण के लिए, यदि कोई टाइप्टर इस तरह सोच रहा था:

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

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

प्रगतिशील संवर्धन और उत्तरदायी डिजाइन

हाल ही में, रूसी में उत्तरदायी डिजाइन , अनुकूली या उत्तरदायी डिजाइन नामक एक दृष्टिकोण लोकप्रियता प्राप्त कर रहा है। दृष्टिकोण का सार वेब पेज को विभिन्न उपकरणों पर पर्याप्त रूप से प्रदर्शित करने के लिए तकनीक के विशिष्ट सेट (रबर ग्रिड, रबर इमेज, सीएसएस मीडिया क्वेरी) का उपयोग करना है: स्मार्टफोन से एक वाइडस्क्रीन मॉनिटर तक। यह पृष्ठ ग्रिड, तत्व आकार और इतने पर गतिशील रूप से बदलकर प्राप्त किया जाता है।

उसी समय, मोबाइल नामक एक समान दृष्टिकोण पहली बार दिखाई दिया । इसका नाम रूसी में "मोबाइल फोन के लिए पहली" के रूप में अनुवादित किया जा सकता है। वास्तव में, यह एक ही अनुकूली डिजाइन है, लेकिन एक शर्त के साथ: हमेशा मोबाइल संस्करण के साथ एक अनुकूली इंटरफ़ेस डिजाइन करना शुरू करें।

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

यह ध्यान देने योग्य है कि आवाज वाले दृष्टिकोण पूरी तरह से एक दूसरे के साथ संयुक्त हैं और एक दूसरे के पूरक हैं। और निकट भविष्य में, सभी शीर्ष कलाकार घोषणा करेंगे: "हम मोबाइल पहले + प्रगतिशील वृद्धि कर रहे हैं।"

---

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