मोबाइल वेब विकास

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



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

मोबाइल वेब अवलोकन

सबसे पहले, यह समझना महत्वपूर्ण है कि लोगों को वास्तव में साइट के मोबाइल संस्करण की आवश्यकता क्यों है। शायद कोई कहेगा कि बहुत कम प्रतिशत उपयोगकर्ता इस बारे में सोचने के लिए अपने मोबाइल फोन का उपयोग करके किसी वेबसाइट पर जाते हैं। वास्तव में, वह गलत है। फेसबुक के आंकड़ों के अनुसार, “वर्तमान में 250 मिलियन से अधिक सक्रिय उपयोगकर्ता मोबाइल उपकरणों के माध्यम से फेसबुक का उपयोग कर रहे हैं। »[1] फेसबुक के ५०० मिलियन से अधिक सक्रिय उपयोगकर्ता हैं, इसलिए उनमें से ५०% मोबाइल उपयोगकर्ता हैं। YouTube उपयोगकर्ताओं के 75% ने रिपोर्ट किया है कि मोबाइल सामग्री तक पहुंचने का उनका प्राथमिक तरीका है। [2]
ऐसा क्यों? क्योंकि लोग हमेशा कंप्यूटर या लैपटॉप नहीं ले जा सकते हैं, और एक मोबाइल फोन हमेशा पास में होता है।
मोबाइल उपकरणों का उपयोग करने वाले आगंतुकों के प्रतिशत का पता लगाने का सबसे आसान तरीका Google Anlytics लॉन्च करना है। अपने उपयोगकर्ताओं द्वारा उपयोग किए जाने वाले उपकरणों और ऑपरेटिंग सिस्टम के प्रकारों पर ध्यान देना न भूलें। यह समझने की कोशिश करें कि उपयोगकर्ता अपने मोबाइल डिवाइस का उपयोग करके साइट पर क्यों आते हैं और उन्हें किन विशेषताओं की आवश्यकता है।



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

निर्माण विकल्प

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

यहां वेब एप्लिकेशन बनाने के मुख्य लाभ हैं, न कि मूल:
• क्रॉस-प्लेटफॉर्म।
• उद्देश्य-सी या में एक विशेषज्ञ की तुलना में HTML प्रोग्रामर खोजना बहुत आसान है। नेट।
• प्रत्येक मूल एप्लिकेशन के लिए एक वेबसाइट को फिर से डिज़ाइन करना आसान है।
• आप किसी भी समय अपनी साइट को अपडेट कर सकते हैं।
• उपयोगकर्ता देशी अनुप्रयोगों [4] के बजाय ब्राउज़रों को पसंद करते हैं।



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

सभी प्लेटफार्मों का समर्थन करने का केवल एक ही तरीका है: वेब मानकों का उपयोग करना, और अब यह एचटीएमएल 5 मानक [5]।

मोबाइल विकास के मुद्दे

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

मोबाइल उपकरणों के लिए डेवलपर्स के लिए सामान्य समस्याएं:
• स्क्रीन का आकार। बहुत सारे देवता हैं और सभी के अलग-अलग आकार हैं, 240 x 320 से शुरू होकर 800 x 480 से समाप्त होते हैं। इसका मतलब है कि एक डेवलपर एक निश्चित चौड़ाई का डिज़ाइन नहीं बना सकता है, यह डिवाइस के आधार पर भिन्न होना चाहिए।
• ओरिएंटेशन। इसके अलावा, ये 240 x 320 आसानी से 320 x 240 में बदल सकते हैं।
• स्पर्श करने योग्य। विभिन्न क्लिक करने योग्य तत्वों के बीच पर्याप्त जगह होनी चाहिए।

मोबाइल एप्लिकेशन बनाने के लिए सिफारिशें

मोबाइल उपकरणों के लिए मुख्य विकास लक्ष्य एक छोटे प्रदर्शन के लिए लेआउट को बदलना है।
मोबाइल वेब पेज दो मोड में देखे जा सकते हैं: पोर्ट्रेट और लैंडस्केप। जावास्क्रिप्ट का उपयोग करके, आप window.orientation का उपयोग कर सकते हैं:
• 0 - पोर्ट्रेट ओरिएंटेशन
• -90 और 90 - परिदृश्य अभिविन्यास

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

 window.onorientationchange = function() { var orientation = window.orientation; switch(orientation) { case 0: document.body.setAttribute("class","portrait"); break; case 90: document.body.setAttribute("class","landscape"); break; case -90: document.body.setAttribute("class","landscape"); break; } } 

मोबाइल डिवाइस पर पेज लोड होने के बाद, केवल स्क्रॉल करते समय URL बार गायब हो जाता है।
लेकिन आप इसे प्रोग्रामेटिक रूप से कर सकते हैं:

 window.addEventListener ('load',  () { setTimeout (ScrollTo, 0, 0, 1); }, False); 

मोबाइल साइट के लिए अनुकूलन का मतलब है कि आपको सर्वर अनुरोधों की संख्या कम करनी चाहिए:

• एक सीएसएस का उपयोग करें।
• सीएसएस स्प्राइट का उपयोग करें।
• डेटा को कैश करने के लिए एचटीएमएल 5 स्थानीय भंडारण का उपयोग करें।

डिज़ाइन टिप्स

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

मोबाइल ऐप परीक्षण

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

अपने खुद के मोबाइल एप्लिकेशन बनाएं

मोबाइल एप्लिकेशन के लिए पर्याप्त चौखटे हैं, मैंने इन पांचों की कोशिश की: jQTouch, iWebKit, Wink Toolkit, jQuery Mobile और Sencha Touch। पहले तीन बहुत अच्छे नहीं हैं - वे केवल एक या दो प्लेटफार्मों का समर्थन करते हैं। शेष दो से चुनने के लिए कुछ कर रहे हैं। इसे पढ़ने के बाद, मैंने स्नेहा टच के साथ शुरुआत करने का फैसला किया। इसके अलावा, एक्सटी जेएस (सेन्चा परिवार का एक उत्पाद) के साथ मेरे पास पहले से ही अनुभव था। हाल ही में, मुझे एक नई परियोजना के लिए इस तरह की योजना द्वारा निर्देशित किया गया है: यदि मुझे बड़ी संख्या में प्लेटफार्मों के लिए समर्थन की आवश्यकता है, तो मैं jQuery मोबाइल का उपयोग करता हूं, लेकिन आमतौर पर iOS + एंड्रॉइड ग्राहकों के लिए पर्याप्त है, तो मेरी पसंद: स्नेचा टच - वास्तव में बहुत अच्छा है ।
Sencha Touch को निम्नलिखित प्लेटफार्मों द्वारा समर्थित किया गया है: iOS, Android, WebOS, BlackBerry + on Chrome, Safari।

एक उदाहरण के रूप में, मैं एक सरल गेम दिखाऊंगा, जो सभी प्लेटफार्मों के ऊपर है।

यह मेरा पहला और परीक्षण लेख है, मैं यह समझना चाहता हूं कि उपयोगकर्ता इस विषय में कितनी रुचि रखते हैं, सामान्य तौर पर मैं Sencha टच और jQuery मोबाइल फ्रेमवर्क का उपयोग करके मोबाइल वेब एप्लिकेशन विकसित करने पर लेख / ट्यूटोरियल लिखने जा रहा हूं।

संदर्भ

[१] फेसबुक सांख्यिकी www.facebook.com/press/info.php?statistics
[२] YouTube मोबाइल उपयोगकर्ता googlemobileads.blogspot.com/2010/11/75-of-youtube-mobile-users-report-that.html?m=0 रिपोर्ट करते हैं
[३] बीबीसी मोबाइल भविष्य www.bbc.co.uk/blogs/bbcinternet/2010/02/bbc_online_our_mobile_future.html
[४] मोबाइल उपयोगकर्ता www.emarketer.com/Article.aspx?R=1008010 पर ब्राउज़रों को प्राथमिकता देते हैं
[५] HTML5 diveintohtml5.org में गोता लगाएँ
[६] मोबाइल एमुलेटर www.mobilexweb.com/emulators