Skip to content

Presentation Layer in Website Design

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

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

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

प्रस्तुति कोड में शामिल हैं:

  • एचटीएमएल और एचटीएमएल 5
  • सीएसएस
  • स्क्रिप्टिंग भाषाएं जैसे जावास्क्रिप्ट, jQuery और अजाक्स।

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

1. मल्टीमीडिया इंटरफ़ेस बनाना

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

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

एचटीएमएल 5, एचटीएमएल के नवीनतम संस्करण ने प्रस्तुति परत डिजाइन क्षमताओं के मामले में एक बड़ा कदम आगे बढ़ाया है। यह तत्वों और गुणों का एक बेहतर टूलकिट प्रदान करता है और डिजाइनरों के काम करने और विशेष तत्वों का उपयोग करने के तरीके को स्वीकार करता है। उदाहरण के लिए यह डिजाइनरों को पहले इस्तेमाल किए गए ‘div’ तत्व के बजाय नए ‘एनएवी’ के साथ एक नेविगेशन समूह को परिभाषित करने की अनुमति देता है। HTML5 की एनिमेशन और इंटरेक्शन डिज़ाइन समर्थन सुविधाओं में भी प्रभावशाली ढंग से सुधार हुआ है, और यह तथ्य कि HTML5 मोबाइल ब्राउज़रों पर समर्थित है, जैसे कि Apple’s Safari ने वेब डिज़ाइन की संभावनाओं को खोल दिया है।

एडोब फ्लैश के बारे में कुछ शब्द

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

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

HTML5 – फ्लैश विकल्प

जैसा कि पहले उल्लेख किया गया है, HTML 5, CSS और jQuery कोड का संयोजन अब एनिमेटेड वेबसाइटों को पुन: पेश करना संभव बनाता है जो केवल फ्लैश में संभव थे। ‘कैनवास’ तत्व का उपयोग करना अब समृद्ध और एनिमेटेड यूजर इंटरफेस को डिजाइन करना पहले से कहीं अधिक आसान है। अधिकांश आधुनिक डेस्कटॉप और मोबाइल ब्राउज़र HTML5 मानक का समर्थन करते हैं जिससे ऐसा डिज़ाइन बनाना संभव हो जाता है जो कई प्लेटफ़ॉर्म पर काम करता है।

१.१ डीएचटीएमएल, जावास्क्रिप्ट, jQuery, और अजाक्स

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

जावास्क्रिप्ट एक गतिशील स्क्रिप्टिंग भाषा है जो जटिल एनीमेशन और अंतःक्रियात्मक प्रभावों में सक्षम है, जैसे ड्रॉप-डाउन मेनू या विस्तारित विंडो परत बनाना। यह उपयोगकर्ता के साथ बातचीत करने, ब्राउज़र को नियंत्रित करने और प्रदर्शित होने वाली वेब पेज सामग्री को बदलने की अनुमति देता है। जब जावास्क्रिप्ट को HTML में लागू किया जाता है, तब HTML को ‘DHTML’ कहा जाता है। डायनामिक HTML (DHTML) दिलचस्प इंटरैक्टिव घटक और एनिमेशन बनाने की अनुमति देता है।

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

JQuery प्रभाव के उदाहरण:

  • खिड़कियों के अनुसार विस्तार और ढहना
  • हिंडोला छवि रोटेशन
  • रोलओवर आदि पर छवि ज़ूम।

ajax (अतुल्यकालिक जावास्क्रिप्ट और एक्सएमएल) वेब पेज के प्रदर्शन या व्यवहार में हस्तक्षेप किए बिना डेटा प्रोसेसिंग की अनुमति देता है जैसे डेटा भेजना या पुनर्प्राप्त करना पृष्ठभूमि में (एसिंक्रोनस रूप से) होता है। इसलिए पृष्ठ को पुनः लोड करने या “अपडेट” बटन पर क्लिक करने की आवश्यकता नहीं है और पृष्ठ पर डेटा स्वचालित रूप से ताज़ा/अपडेट किया जा सकता है।

1.2 उन्नत सीएसएस ग्राफिक प्रभाव

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

आजकल CSS तत्वों की उपस्थिति पर शैलीगत नियंत्रण के बढ़ते स्तरों की पेशकश कर रहा है। अब केवल कोड के माध्यम से पाठ और तत्वों में ग्रेडेशन, गोल कोनों, प्रतिबिंबों और सॉफ्ट ड्रॉप शैडो को जोड़ना संभव है।

कुछ उपयोगी CSS ग्राफिकल स्टाइल कंट्रोल हैं जिन्हें यूजर इंटरफेस के निर्माण में बिटमैप ग्राफिक्स के उपयोग से बचने के लिए लागू किया जा सकता है।

हमारे यूजर इंटरफेस के लिए CSS का उपयोग करने के लाभों में शामिल हैं:

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

1.3 प्रभावी डिजाइन

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

उत्तरदायी डिजाइन संभव है ‘CSS3 विनिर्देश के मीडिया प्रश्न भाग’ के लिए धन्यवाद। यह ब्राउज़र के आकार को पहचानता है और पेज को उपयुक्त स्टाइल शीट लोड करने के लिए कहता है, उदाहरण के लिए ‘widescreen.css’ या ‘mobilescreen.css’। यह संभव है क्योंकि अलग-अलग स्टाइल शीट में अलग-अलग लेआउट सिस्टम, फ़ॉन्ट आकार और छवि अनुकूलन सेटिंग्स होती हैं।

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

Leave a Reply

Your email address will not be published.