नोकिया उपकरणों के लिए एचटीएमएल 5 मोबाइल ऐप डेवलपमेंट बेसिक्स

यह पोस्ट " स्मार्ट फोन फॉर स्मार्ट पोस्ट " प्रतियोगिता में भाग ले रही है।

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

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

CACHE MANIFEST CACHE: /system/js/jquery-1.7.min.js /system/css/style.css NETWORK: /system/php/login.php 

CACHE पैरामीटर के साथ, हम ब्राउज़र को बताते हैं कि इन फ़ाइलों को डाउनलोड करने की आवश्यकता है। नेटवर्क - इंगित करता है कि हमें यहां इंटरनेट की आवश्यकता है। यही है, आपने एप्लिकेशन का उपयोग किया था, उस समय लॉगिन.php पृष्ठ पर जाने की आवश्यकता थी, एप्लिकेशन स्वचालित रूप से इंटरनेट से कनेक्ट हो जाएगा, और आप इसे शांति से उपयोग करना जारी रखेंगे।
लेकिन एक मैनिफ़ेस्ट बनाना सभी के लिए नहीं है, आपको उस ब्राउज़र को स्पष्ट करने की ज़रूरत है जो मौजूद है। ऐसा करने के लिए, आपको टैग का उपयोग करके इसे पृष्ठ पर संलग्न करना होगा। मैनिफ़ेस्ट विशेषता का मान, मेनिफ़ेस्ट फ़ाइल का पथ है।

 manifest="manifest.mf" 

आगे बढ़ो।
LocalStorage - यह एक बहुत अच्छा HTML5 विशेषता है जो आपको स्थानीय ब्राउज़र डेटाबेस में डेटा संग्रहीत करने की अनुमति देता है। कोई कह सकता है कि लोकलस्टोरीज कुकीज़ की तरह है। लेकिन ऐसा नहीं है, यह बहुत अधिक सुविधाजनक और कार्यात्मक है। लब्बोलुआब यह है, आपने जावास्क्रिप्ट पर कई कार्य लिखे हैं और डेटाबेस के साथ काम करते हैं।


यह कोड एक स्थानीय डेटाबेस बनाएगा, जिसे आप ऊपर दिए गए स्क्रीनशॉट में देखते हैं।

 var DB; var shorlName='TestBase'; var versionBase='1.0'; var DisplayName='TestBase'; var maxsize=65536; DB=openDatabase(shorlName,versionBase,DisplayName,maxsize); DB.transaction( function(transaction) { transaction.executeSql( 'CREATE TABLE IF NOT EXISTS sites'+ '(url TEXT NOT NULL,'+ 'name TEXT NOT NULL);' ); } ); 

OpenDatabase () पैरामीटर के साथ, हम संकेत देते हैं कि हमें निर्दिष्ट पैरामीटर का उपयोग करके डेटाबेस बनाने की आवश्यकता है।
अगला, लेनदेन का उपयोग करके, हम आवश्यक तालिकाओं का निर्माण करते हैं। मैंने काम के पूरे सिद्धांत को नहीं दिखाया है, यह Sql का उपयोग करता है, जो कि विनिर्देश में कहा गया है, किसी भी sql कमांड का समर्थन करता है। मैं आपको दिखाऊंगा कि डेटा कैसे जोड़ा जाता है:

 transaction.executeSql('INSERT INTO testbase (text, name) VALUES (" 1"," 2")'); 

यह पंक्ति तालिका में डेटा जोड़ेगी, जब तक कि यह मौजूद नहीं है।


जावास्क्रिप्ट
मोबाइल एप्लिकेशन विकसित करने के लिए, आप jquery (jquerymobile) का उपयोग कर सकते हैं।
Jquerymobile एक फ्रेमवर्क है जो jQuery और jQuery UI पर आधारित है, और HTML5 समर्थन के साथ सबसे महत्वपूर्ण है। Jquerymobile बाहरी और आंतरिक लिंक के साथ शानदार काम करता है।
उदाहरण के लिए, जब दूसरे पृष्ठ पर संपर्क किया जाता है - contact.php, Jquery href को बाहर निकालेगा और एक अजाक्स अनुरोध उत्पन्न करेगा, यदि कोई त्रुटि होती है, तो एक विंडो इस बारे में सूचित करेगी।
आंतरिक लिंक निम्नानुसार संरचित होना चाहिए: लिंक
पृष्ठ बनाते समय एक महत्वपूर्ण विशेषता डेटा-भूमिका है। यह उसके लिए है कि Jquery आवश्यक तत्वों की खोज करेगा।
फू एक अद्वितीय पहचानकर्ता है जो कि jquery का उपयोग करेगा। Jquerymobile पर मैं और क्या ध्यान देना चाहूंगा कि यह थीम का समर्थन है। संक्षेप में, ये सीएसएस फाइलें हैं जिनमें पहले से ही इंटरफ़ेस तत्वों के लिए स्टाइल है।
मैं एक छोटा कोड दूंगा:

  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> <div data-role="page"> <div data-role="header"> <h1></h1> </div> <div data-role="content"> <p></p> </div> <div data-role="footer"> <h4>The Footer</h4> </div> </div> 

जैसा कि हम देख सकते हैं, यह मानक मार्कअप है; डेटा-रोल विशेषता के अलावा कुछ भी नया नहीं है।
लोहे का फोन।
बहुतों के पास शायद एक सवाल है, लेकिन मैं एक HTML5 एप्लिकेशन कैसे लिख सकता हूं जो फोन के हार्डवेयर (कैमरा, मेमोरी आदि) का उपयोग कर सकता है। तब PhoneGap हमारी सहायता के लिए आता है। मैं इसमें काम के पूर्ण सिद्धांत पर विचार नहीं करूंगा, मैं केवल कुछ विशेषताओं का वर्णन करूंगा।
फोनगैप एक खुला स्रोत ढांचा है जो आपको अपने फोन की ग्रंथियों तक पहुंचने की अनुमति देता है। PhoneGap आपको किसके साथ काम करने की अनुमति देता है:
1. एक्सेलेरोमीटर
2. कैमरा
3. कम्पास
4. डिवाइस (डिवाइस जानकारी का संग्रह)
5. जियोलोकेशन
6. अधिसूचना (डिवाइस पर दृश्य, ध्वनि सूचनाएं)
7. नेटवर्क (नेटवर्क स्थिति की त्वरित जांच, साथ ही साथ नेटवर्क की जानकारी)
8. कैप्चर (मीडिया फ़ाइलों को कैप्चर करें)।
9. संपर्क (उपकरण पता पुस्तिका के साथ कार्य)
10. फाइलें (फाइल सिस्टम के साथ काम करें)
11. भंडारण
12. मीडिया (रिकॉर्ड और ऑडियो फ़ाइलें चलाएं)
फ्रेमवर्क निम्नलिखित प्लेटफार्मों का समर्थन करता है: iPhone, Android, OS, WebOS, WP7, सिम्बियन, बड़ा,
नए प्लेटफार्मों के आगमन के साथ, इस सूची का विस्तार हो रहा है। हालांकि सभी प्लेटफ़ॉर्म हमें रुचि नहीं देते हैं। परियोजना निरंतर विकास के अधीन है, इसलिए कुछ सिस्टम कुछ गुणों का समर्थन नहीं करते हैं, जैसा कि स्क्रीनशॉट में देखा जा सकता है (हालांकि यह थोड़ा पुराना हो सकता है)।


हम देखते हैं कि सिम्बियन 3 गुणों का समर्थन नहीं करता है, चलो आशा करते हैं कि यह जल्द ही ठीक हो जाएगा। सिम्बियन लाइन से पता चलता है कि इस प्रणाली के साथ न केवल उपकरणों का समर्थन किया जाता है, बल्कि उनके अपडेट (अन्ना, बेले ... सूची लगातार अपडेट की जाती है)। PhoneGap कैसे काम करता है?