मोबाइल अनुप्रयोगों के निर्माण के लिए मोबाइल वेब ट्रेंड और दो दृष्टिकोण

आधुनिक वेब के सबसे मजबूत रुझानों में से एक मोबाइल वेब है - मोबाइल उपकरणों, स्मार्टफोन, टैबलेट आदि की पूरी विविधता के लिए साइटों की एक विशेष प्रस्तुति।

यह लेख मोबाइल वेब के वर्तमान रुझानों पर चर्चा करता है। मोबाइल वेब कितनी तेजी से बढ़ रहा है? एक दो साल में मोबाइल वेब से क्या उम्मीद करें? मोबाइल साइट प्रस्तुति व्यवसाय और ऑनलाइन खरीदारी को कैसे प्रभावित करती है? आज मोबाइल साइटों के साथ क्या स्थिति है?

लेख का उद्देश्य इस सवाल का जवाब देना भी है कि मोबाइल साइट्स कैसे बनाई जाती हैं। मैं मोबाइल साइट बनाने की प्रक्रिया में दो मुख्य दिशाओं पर विचार करूंगा और विजुअल स्टूडियो 2012 और ASP.NET MVC के प्रभावी उपकरण आपको साइटों की मोबाइल प्रस्तुति का सामना करने वाले किसी भी कार्य को लागू करने की अनुमति देंगे।

मोबाइल वेब ट्रेंड्स

सबसे पहले, व्यावहारिक भाग पर जाने से पहले, चलो मोबाइल वेब के वर्तमान रुझानों को देखें। इस प्रश्न का उत्तर देने का प्रयास करें "दो साल में मोबाइल वेब कितनी जल्दी विकसित हुआ है?"। सही उत्तर आश्चर्यचकित कर सकता है: 2009 से 2011 तक, ब्राउज़िंग वेबसाइटों के लिए मोबाइल उपकरणों का उपयोग 1000% या 10 गुना (चित्र 1) बढ़ा।


चित्र 1। मोबाइल वेब प्रवृत्ति

इसके अलावा, अगस्त 2011 में, मोबाइल वेब में उपयोगकर्ताओं द्वारा वेब पर आने वाली कुल यात्राओं का 7% हिस्सा था। इस लेखन के समय, यह आंकड़ा काफी अधिक होने की संभावना है।

यदि हम भविष्य को देखते हैं और विभिन्न विश्लेषकों के पूर्वानुमानों पर विचार करते हैं, तो हम यह पता लगा सकते हैं कि 2014 तक मोबाइल वेब नियमित डेस्कटॉप एक्सेस वेब (चित्रा 2) से आगे निकल जाएगा।


अंजीर। २। मोबाइल वेब 2014 में डेस्कटॉप को बायपास करेगा (c)

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

मोबाइल वेब के इस तरह के एक मजबूत रुझान के संबंध में, यह मूल्यांकन करना दिलचस्प हो जाता है कि मोबाइल प्रदर्शन व्यवसाय या वेबसाइटों के लिए यातायात को कैसे प्रभावित करता है।


चित्र 3। मोबाइल संस्करण वाली साइटों के लिए ट्रैफ़िक में वृद्धि

यह पता चला है कि साइट के लिए एक मोबाइल संस्करण की मात्र उपस्थिति आपके संसाधन के पृष्ठों पर यातायात को काफी बढ़ा सकती है। कुछ रिपोर्टों के अनुसार, यह वृद्धि 85% (चित्र 3) तक हो सकती है।

उसी समय, साइटें जो उपयोगकर्ताओं को मोबाइल उपकरणों के माध्यम से स्टोर तक पहुंच प्रदान करती हैं, 51% (चित्र 4) तक की बिक्री में वृद्धि दिखाती हैं!


चित्र 4। मोबाइल संस्करण वाली साइटों की बिक्री में वृद्धि

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

नहीं। 2010 में हुए शोध के अनुसार, मोबाइल सबमिशन (चित्रा 5) के लिए 500 सबसे बड़ी पेशकश की सूची से केवल 20% से थोड़ा अधिक साइटें।


चित्र 5। मोबाइल वेब साइटों के लिए समर्थन (सी)

और केवल 5% ई-कॉमर्स साइटों ने मोबाइल उपयोगकर्ताओं का समर्थन किया! (आंकड़ा 6)


चित्र 6। मोबाइल प्रस्तुति के लिए इंटरनेट साइटों का अनुकूलन (सी)

बेशक, स्थिति धीरे-धीरे सुधर रही है, लेकिन यह स्पष्ट है कि व्यवसाय और बस वेब मोबाइल वेब के विकास के साथ तालमेल नहीं रखते हैं।

और यहां सवाल उठता है: व्यापार मालिकों को इस समस्या को कैसे हल करना चाहिए? मोबाइल साईट कैसे बनाये?

मोबाइल वेब: दो दृष्टिकोण

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

प्रत्येक दृष्टिकोण के अपने पेशेवरों और विपक्ष हैं। आइए उन्हें क्रम में देखें।

दृष्टिकोण: सभी उपकरणों के लिए एक साइट

यदि हम मोबाइल डिवाइस पर Lenta.ru रनवे पर सबसे बड़े समाचार संसाधन पर स्विच करने का प्रयास करते हैं, तो हम निम्नलिखित चित्र (चित्र 7) देख सकते हैं।


चित्र 7। Lenta.ru एक मोबाइल ब्राउज़र में

चित्र खुश नहीं है, आवश्यक जानकारी देखने के लिए हमें टच स्क्रीन (चित्रा 8) पर इशारों के साथ पाठ को ज़ूम करने की आवश्यकता है।


चित्र 8। अनुमानित पाठ Lenta.ru

यह विचार है कि हम साइट के लिए आए थे, इस रूप में हम जानकारी पढ़ सकते हैं।

विभिन्न उपकरणों पर एक साइट की जानकारी प्रदर्शित करने की समस्या का समाधान वेब मानकों में निहित है। उदाहरण के लिए, Visual Studio 2012 (चित्र 9) में ASP.NET MVC4 के साथ जहाज करने वाले डिफ़ॉल्ट टेम्पलेट पर एक नज़र डालें।


चित्र १०। विभिन्न स्क्रीन पर एक साइट स्केलिंग।

डेस्कटॉप कंप्यूटरों की बड़ी स्क्रीन पर केंद्रित एक वेबसाइट होने के बावजूद, जब हम अन्य डिवाइसों पर प्रदर्शित होते हैं तो स्क्रीन को कम करने पर हम पठनीयता नहीं खोते।

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

चित्रा 10 में, उदाहरण के लिए, आकार को कम करते समय, आप पृष्ठ हेडर के लेआउट में बदलाव को नोट कर सकते हैं, सूची डिजाइन तत्वों (काले घेरे) को हटा सकते हैं। अंत में, यहां तक ​​कि सबसे छोटे रिज़ॉल्यूशन पर भी, हमारा पृष्ठ मुख्य सामग्री के लिए आसानी से उपलब्ध होने योग्य है, जो उपयोगकर्ता को चाहिए।

यह तंत्र हासिल किया जाता है, जैसा कि मैंने कहा, वेब मानकों (CSS3 मीडिया क्वेरी) की मदद से, जिस पर लेख के तकनीकी भाग में चर्चा की जाएगी।

दृष्टिकोण: साइट का एक अलग "मोबाइल" संस्करण है

मोबाइल प्रस्तुति बनाने में दूसरे दृष्टिकोण पर विचार करें - एक अलग मोबाइल साइट। उदाहरण के लिए, सोशल नेटवर्क फेसबुक (चित्र 11) की प्रसिद्ध वेबसाइट को लें।


चित्र 11। डेस्कटॉप और फेसबुक का मोबाइल संस्करण

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

इस दृष्टिकोण का समर्थन करने के लिए, विज़ुअल स्टूडियो 2012 ने विशेष मोबाइल साइट टेम्प्लेट जोड़े जो आपको थोड़े समय में ASP.NET MVC और jQuery UI पर आधारित एक अलग मोबाइल साइट बनाने की अनुमति देते हैं (चित्र 12)।


चित्र 12। डेस्कटॉप और मोबाइल ASP.NET साइटें

अब जब हम मोबाइल साइटों के निर्माण के दृष्टिकोण से परिचित हो गए हैं, तो आइए उनके निर्माण के तकनीकी विवरण और विज़ुअल स्टूडियो 2012 और ASP.NET MVC4 के प्रभावी विकास के लिए क्या उपकरण देखें।

ASP.NET MVC 4 के साथ प्रभावी मोबाइल साइट विकास

वर्णित दृष्टिकोणों के क्रम में मोबाइल साइटों के विकास पर विचार करें: पहले "सभी स्क्रीन के लिए एक साइट" दृष्टिकोण के लिए, और फिर "अलग-अलग साइट" के लिए।

सभी स्क्रीन के लिए एक साइट का निर्माण

जैसा कि मैंने पहले लिखा था, जो तंत्र आपको विभिन्न उपकरणों के लिए अपने वेब एप्लिकेशन की सामग्री को अनुकूलित करने की अनुमति देता है, उसे CSS3 मीडिया क्वेरी कहा जाता है। मुझे लगता है कि यह वेब मानक वेब डेवलपर्स के लिए अच्छी तरह से जाना जाता है। ASP.NET MVC डिफ़ॉल्ट रूप से इसका उपयोग प्रदान करता है।

यदि आप Visual Studio 2012 में MVC4 अनुप्रयोग बनाते हैं, तो आप सामग्री फ़ोल्डर में Site.css शैली परिभाषा फ़ाइल पा सकते हैं। इस फ़ाइल में CSS3 मीडिया क्वेरी का बहुत उपयोग होता है, जो पृष्ठ सामग्री को रिज़ॉल्यूशन (चित्र 13) के अनुकूल होने देता है।


चित्र 13। CSS3 मीडिया क्वेरी का उपयोग करना

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

ASP.NET MVC 4 डिफ़ॉल्ट मोबाइल दृश्य बनाने के लिए इस तंत्र का उपयोग करता है। चित्र 13 नियमों का एक समूह दिखाता है जो केवल तभी लागू होगा जब स्क्रीन की चौड़ाई 850 पिक्सेल से कम हो।

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

प्रत्येक साइट पृष्ठ के लिए उपयोग किया जाने वाला एक अन्य महत्वपूर्ण तंत्र "व्यूपोर्ट" मेटा टैग है:

<मेटा नाम = "व्यूपोर्ट" सामग्री = "चौड़ाई = उपकरण-चौड़ाई" />

यह परिभाषा मोबाइल डिवाइस को अपनी स्क्रीन को फिट करने के लिए पृष्ठों के पाठ और सामग्री को समायोजित करने के लिए कहती है। ASP.NET MVC4 टेम्पलेट में, यह परिभाषा _Layout.cshtml लेआउट फ़ाइल में जोड़ी गई है, जो सभी पृष्ठों पर लागू होती है।

विभिन्न उपकरणों या स्थितियों के लिए अलग-अलग विचार बनाएं

यहां तक ​​कि डेस्कटॉप और मोबाइल उपयोगकर्ताओं के लिए एक साइट होने पर, अक्सर विभिन्न उपकरणों के लिए अलग-अलग प्रतिनिधित्व (डिज़ाइन) बनाने की आवश्यकता होती है। विकल्प की कल्पना करें जब आप डेस्कटॉप उपयोगकर्ताओं के लिए एक डिज़ाइन बनाते हैं, मोबाइल उपयोगकर्ताओं के लिए एक और iPhone उपयोगकर्ताओं के लिए एक तिहाई।

एक सरल कार्य, लेकिन एक एकल परियोजना के भीतर आम व्यापार तर्क का उपयोग करके इसे कैसे लागू किया जाए? ASP.NET MVC 4 इसके लिए बहुत ही सरल उपकरण प्रदान करता है, जो आपको मिनटों में समस्या को हल करने की अनुमति देता है।

विज़ार्ड का उपयोग करते हुए, इंडेक्स.मोबाइल नामक एक नया दृश्य जोड़ें / होम फ़ोल्डर में


चित्र 14। एक नया दृश्य जोड़ना

उसके बाद, इस दृश्य का मार्कअप बदलें:

<h2> नमस्कार, मोबाइल उपयोगकर्ता! </ h2>

और निष्पादन के लिए आवेदन चलाएँ। एक डेस्कटॉप उपयोगकर्ता के रूप में, आपको एक मानक पृष्ठ (चित्र 15) दिखाई देगा।


चित्र 15। डेस्कटॉप अनुप्रयोग दृश्य

अब, एप्लिकेशन को बंद किए बिना, मोबाइल क्लाइंट में उसी पते पर जाएं। मैं इसके लिए ओपेरा मोबाइल एमुलेटर का उपयोग करता हूं। आप देख सकते हैं कि समान पते के लिए मोबाइल दृश्य एक नए (चित्र 16) में बदल गया है:


चित्रा 16। मोबाइल देखें एप्लिकेशन

जैसा कि आप देख सकते हैं, एक ही एप्लिकेशन के भीतर दो अलग-अलग डिज़ाइन बनाने के लिए, हमें कोड की एक भी लाइन लिखने की ज़रूरत नहीं थी - यह फ़ंक्शन बॉक्स से बाहर MVC4 द्वारा समर्थित है।

ठीक है, आधा काम किया जाता है, लेकिन तीसरी प्रस्तुति के बारे में क्या, विशेष रूप से आईफोन के लिए? आइए Index.iPhone नामक एक और नया दृश्य जोड़ें, जैसा हमने पहले किया था। और निम्नलिखित कोड के साथ मार्कअप बदलें:

<h2> हैलो iPhone उपयोगकर्ता! </ h2>

अगर अब हम आईई के रूप में IE में डेवलपर टूल का उपयोग करके अपना परिचय देते हैं और पृष्ठ की ओर मुड़ते हैं, तो हमें वह सटीक परिणाम नहीं मिलेगा जिसकी हम गणना कर रहे थे (चित्र 17)।


चित्र 17। पेज पर iPhone के रूप में जा रहे हैं

यह सही है, MVC4 सामान्य रूप से मोबाइल उपकरणों के साथ बॉक्स के काम से बाहर का समर्थन करता है, लेकिन एक विशिष्ट उपकरण का निर्धारण करने के लिए, हमें एक संकेत रूपरेखा बनाने की आवश्यकता है।

यह कोड की तीन लाइनों में किया जाता है। Global.asax फ़ाइल में Application_Start () में निम्न कोड जोड़ें:

DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone") { ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf ("iPhone", StringComparison.OrdinalIgnoreCase) >= 0) }); 

एप्लिकेशन लॉन्च करें और iPhone की आड़ में उसके पास जाएं, आपको वांछित परिणाम मिलेगा (चित्र 18):


चित्र 18। ऐप विशेष रूप से iPhone के लिए देखें

इसलिए, ASP.NET MVC4 तंत्र और कोड की तीन पंक्तियों का उपयोग करते हुए, हम विभिन्न प्रकार के उपकरणों के लिए तीन अलग-अलग अभ्यावेदन के साथ एक एप्लिकेशन बनाने में सक्षम थे: सामान्य रूप से, विशेष रूप से iPhone (चित्र 19) के लिए डेस्कटॉप, मोबाइल डिवाइस।


चित्र 19। एक पृष्ठ के तीन दृश्य

इन विशेषताओं के लिए धन्यवाद, आप विभिन्न उपकरणों के लिए, न केवल विभिन्न उपकरणों के लिए, बल्कि आम तौर पर किसी भी स्थिति पर आधारित - आप इसे अपने आप स्थापित कर सकते हैं।

मोबाइल प्रस्तुति के लिए एक अलग वेबसाइट बनाना

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

विजुअल स्टूडियो 2012 और ASP.NET MVC4 पूरी तरह से इस परिदृश्य का समर्थन करते हैं और लोकप्रिय jQuery यूआई समाधान (चित्र 20) के आधार पर विशेष टेम्पलेट्स के रूप में एक समाधान प्रदान करते हैं।


चित्र 20। एक ही साइट की मोबाइल प्रस्तुति

इन टेम्प्लेट और मानक पैकेज में शामिल jQuery UI और jQuery मोबाइल घटकों का उपयोग करके, आप मोबाइल क्लाइंट के लिए अलग साइट बना सकते हैं।

दो दृष्टिकोणों के बीच का चुनाव

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

एक साइट का दृष्टिकोण समझ में आता है जब एक टीम किसी परियोजना पर काम कर रही होती है, जब साइट में एक जटिल लेआउट नहीं होता है और जब साइट के पृष्ठों में महत्वपूर्ण डिज़ाइन तत्व नहीं होते हैं जो बलिदान नहीं किया जा सकता है।

एक अलग मोबाइल साइट का दृष्टिकोण समझ में आता है जब यह एक अलग टीम या आउटसोर्सिंग द्वारा लगी होती है, जब मुख्य साइट में बड़ी संख्या में कार्यात्मक ब्लॉक के साथ एक जटिल लेआउट होता है।

आप जो भी रास्ता चुनते हैं, विजुअल स्टूडियो 2012 और ASP.NET MVC4 आपके सभी विचारों और इच्छाओं को पूरी तरह से महसूस करेंगे।

निष्कर्ष

इस लेख में, हमने मोबाइल वेब के वर्तमान रुझानों की जांच की, मोबाइल वेब कहां और किस गति से आगे बढ़ रहा है। हमने व्यापार और साइट की सफलता पर मोबाइल जमा समर्थन के प्रभाव पर डेटा की समीक्षा की। हमने आज मोबाइल साइट जमा करने के महत्व के बारे में जाना।

मैंने मोबाइल उपयोगकर्ताओं का समर्थन करने की समस्या को हल करने के लिए दो तरीकों के बारे में बात की: सभी उपकरणों के लिए एक साइट और मोबाइल उपयोगकर्ताओं के लिए एक अलग साइट। इनमें से प्रत्येक दृष्टिकोण को विजुअल स्टूडियो 2012 और ASP.NET MVC 4 में प्रभावी रूप से समर्थित किया गया है। कोड की कुछ ही लाइनों में, आप किसी भी प्रकार के मोबाइल उपयोगकर्ता के लिए अद्वितीय प्रतिनिधित्व कर सकते हैं।

मुझे आशा है कि यह सामग्री आपके लिए उपयोगी थी। चलो सभी उपयोगकर्ताओं के लिए वेब को सुविधाजनक बनाते हैं!