वेब की Html5 प्रतिक्रिया

HTML5, नवीनतम और लोकप्रिय वेब डिजाइनिंग भाषा, ने अचानक डिजाइनिंग की दुनिया को एक लहर के साथ ले लिया है। पहले हमारे पास HTML था और अब HTML5 है। हालाँकि, यदि हम दोनों के बीच मुख्य अंतर को देखें, तो हमें पता चलता है कि एक चीज, जो वास्तव में HTML5 को HTML से अलग और बेहतर बनाती है, वह है प्रतिक्रियात्मकता ।

वेबपेज के रिस्पॉन्सिवनेस का मतलब है कि वेब पेज के माध्यम से ब्राउज़र पर लोड होने के बाद से प्राप्त आउटपुट या प्रतिक्रिया।

HTML के साथ, कई सीमाएँ हुआ करती थीं, जो एक नए संस्करण की आवश्यकता उत्पन्न करती हैं। वेब डिज़ाइनरों के पास बदलती तकनीक के साथ वेब पेज बनाने का लचीलापन नहीं था।

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

तरल लेआउट

HTML5 HTML, CSS और JavaScript का एक गुलदस्ता है। यह उपयोगकर्ताओं को पानी की तरह तरल या लचीले लेआउट के साथ वेब पेज बनाने की अनुमति देता है। जैसा कि हम जानते हैं, पानी अपने कंटेनर का आकार लेता है, इसी तरह, तरल लेआउट डिजाइनरों को उनकी सामग्री को निर्दिष्ट कंटेनर में तैरने की अनुमति देता है। वही वेबसाइट, जब आईपैड में खोली जाती है, तो उसके आयामों के अनुसार समायोजित हो जाएगी, और यदि मोबाइल पर एक ही यूआरएल का उपयोग किया जाता है, तो उसके आयामों में फिट होगा।

हमारे वेब डिजाइनरों की एक और दलील थी, सामग्री से संबंधित। क्या होगा अगर हम मोबाइल स्क्रीन पर अलग सामग्री और लैपटॉप स्क्रीन पर अलग सामग्री चाहते हैं? मुझे एक बहुत ही सरल उदाहरण का उपयोग करके इस अवधारणा के पीछे के मनोवैज्ञानिक सिद्धांत की व्याख्या करने दें। मान लीजिए, आप अपने कार्यालय में हैं और अचानक आपकी टीम एक आउटडोर लंच पार्टी की योजना बना रही है। आप अपने फोन को बाहर निकालते हैं, जो आस-पास के रेस्तरां (जैसे ज़ोमैटो, डाइनआउट आदि) को देखने के लिए एक वेबपेज खोलता है, अब उन्हें अपने मानदंड के अनुसार फ़िल्टर करें और अपनी आवश्यकताओं के अनुसार सबसे अच्छा विकल्प चुनें। अब, क्या होगा यदि आपकी टीम आने वाले सप्ताहांत में लंच पार्टी पर जाने की योजना बना रही है। इस स्थिति में, आप शायद अपना लैपटॉप खोलें; उसी वेबसाइट का वेबपेज खोलें, पेज के चारों ओर देखें, ऑफ़र, तामझाम और वेबसाइट के ऐड-ऑन की जांच करें।

इस उदाहरण के साथ, हम मानते हैं कि उपयोगकर्ता, जो मोबाइल पर एक वेबपेज खोल रहा है, शायद जल्दी में होगा और उसके पास डिजाइनिंग के आसपास देखने का समय नहीं होगा। उपयोगकर्ता डिज़ाइनर UI के बजाय कार्यक्षमता की तलाश में होगा। हालांकि, जब वही वेबपेज लैपटॉप/डेस्कटॉप ब्राउज़र में देखा जाता है, तो उपयोगकर्ता के पास डिजाइनिंग भाग की सराहना करने का समय हो सकता है।

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

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

रिस्पॉन्सिव वेब डिज़ाइनिंग (आरडब्ल्यूडी) में लेआउट परिमित मानों (जैसे पिक्सेल, पॉइंट आदि) के बजाय लचीले या तरल लेआउट पैरामीटर (जैसे ईएमएस और प्रतिशत) का उपयोग करके किया जाता है

आपके पृष्ठों में प्रतिक्रिया की अनुमति देने के लिए, पृष्ठ की संरचना बदल दी जाती है और HTML5 की मूल अवधारणा चित्र में आ जाती है। HTML5 में कोड लिखने के लिए बुनियादी दिशानिर्देश हैं:

• सामग्री HTML फ़ाइलों में जाती है
• लुक और प्लेसमेंट CSS फाइलों में जाता है
• सत्यापन JavaScript फ़ाइलों में जाता है

इसलिए, प्रतिक्रिया प्राप्त करने के लिए, हमें डिवाइस के स्क्रीन आकार में बदलाव के साथ सीएसएस फाइलों को बदलने की जरूरत है, जबकि हमारी सामग्री (जो एचटीएमएल पेजों में है) वही रहती है।

आरडब्ल्यूडी रणनीति

रिस्पॉन्सिव वेब डिज़ाइनिंग पारंपरिक ग्रेसफुल डिग्रेडेशन के बजाय प्रोग्रेसिव एन्हांसमेंट का उपयोग करती है।

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

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

• मूंगफली:समृद्ध अर्थ html में चिह्नित सामग्री
• अमीर मलाईदार सीएसएस के साथ लेपित

JS को हार्ड कैंडी शेल के रूप में जोड़ा गया

RWD फ्रेमवर्क

एक HTML5 फ्रेमवर्क पूर्व-निर्धारित पुन:प्रयोज्य CSS और JS फ़ाइलों और पृष्ठ पर सामग्री के रूप में डमी टेक्स्ट के साथ पूर्व-निर्मित टेम्पलेट है। वे नवोदित डेवलपर्स को बुनियादी डिजाइनिंग के साथ शुरुआत करने में मदद करते हैं। लेआउट को परिभाषित किया जाता है और डिज़ाइन बनाए जाते हैं।

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

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

उत्तरदायी वेब डिजाइनिंग सबसे वांछित तकनीक है और धीरे-धीरे और धीरे-धीरे किसी भी वेबसाइट के लिए मानक आवश्यकता बन रही है। कार्यान्वयन के लिए ऑनलाइन उपलब्ध के लिए पर्याप्त समर्थन है और इसके साथ खेलने के लिए कई टूल उपलब्ध हैं।