💀 👨🏿‍🍳 ㊗️ IBOOK लेखक आवेदन के लिए HTML विजेट लिखना 🤙🏾 👾 🦀

यह कोई रहस्य नहीं है कि मुद्रित पुस्तकें अतीत की बात हैं। उन्हें उपकरणों की एक नई पीढ़ी (और उनके साथ कार्यक्रम) द्वारा प्रतिस्थापित किया जा रहा है जो न केवल पढ़ने की सामग्री, एक किताब की तरह, बल्कि इंटरैक्टिव आवेषण के साथ पढ़ने में विविधता लाने की अनुमति देता है। यह कुछ गतिशील रूप से बदलने वाली सामग्री (ट्विटर फ़ीड, आदि), या कुछ इंटरैक्टिव सामग्री (संधारित्र के संचालन का एनीमेशन, आदि) की तरह हो सकता है
Apple ने IBOOK लेखक ऐप जारी किया है, जो आपको IBOOKS iPad ऐप के लिए इंटरैक्टिव किताबें बनाने की अनुमति देता है। आज मैं एक उदाहरण के रूप में ट्विटर विजेट का उपयोग करके इस एप्लिकेशन के लिए HTML विजेट बनाने के तरीके से परिचित होने का प्रस्ताव करता हूं।
विगेट्स बनाने के लिए कई कार्यक्रम हैं, जिनकी लागत 0 (डैशकोड) से 60 (Tumult Hype ) तक भिन्न होती है।
हम विशेष कार्यक्रमों का उपयोग किए बिना, अपने विजेट "मैन्युअल रूप से" बनाएंगे।
अब मैं शब्दों से कर्मों की ओर बढ़ने का प्रस्ताव करता हूं।

विजेट संरचना

IBOOK के लिए HTML विजेट wdgt एक्सटेंशन वाला एक फोल्डर है।
HTML विजेट बनाते समय, आप निम्न आवश्यक फ़ाइलों का चयन कर सकते हैं:

Default.png = फ़ाइल - विजेट पूर्वावलोकन। यह छवि उपयोगकर्ता को तब तक दिखाई जाएगी जब तक वह विजेट लॉन्च नहीं करता। फ़ाइल का नाम मजबूत और मामला संवेदनशील है। विजेट का रिज़ॉल्यूशन (जब तक कि अन्यथा निर्दिष्ट न हो) इस चित्र के रिज़ॉल्यूशन के बराबर होगा।
रेटिना: यदि आप एक विजेट बनाते हैं जो रेटिना डिस्प्ले को सपोर्ट करता है, तो Default@2x.png फाइल भी बनानी होगी, जिसमें मूल Default.png की तुलना में दोगुना रिज़ॉल्यूशन है।
मुख्य HTML फ़ाइल - आप कोई भी फ़ाइल नाम सेट कर सकते हैं। यह विजेट का मुख्य कार्यात्मक हिस्सा है। इसमें सीएसएस और जेएस फाइलें दोनों शामिल हो सकती हैं (कोई प्रतिबंध नहीं है, सब कुछ वेब पेज लिखने के समान है)
रेटिना: समर्थन के लिए रेटिना डिस्प्ले के लिए वेब पेजों के समान लिखना आवश्यक है ( इस विषय पर लेख पहले से ही हब पर चपटा हुआ है)
Info.plist - विजेट के लिए कॉन्फ़िगर फ़ाइल। इसमें विजेट का नाम, इसका रिज़ॉल्यूशन, मुख्य HTML फ़ाइल आदि की जानकारी होती है। चलो इस पर थोड़ा और ध्यान दें ...

Info.plist - कॉन्फ़िगरेशन में क्या है?

यह कॉन्फ़िग फ़ाइल एक xml फ़ाइल के अलावा और कुछ नहीं है जिसमें पैरामीटर लिखे गए हैं

<key></key> < ></ >

उपयोग किए गए पैरामीटर:

CFBundleDevelopmentRegion - एक वैकल्पिक पैरामीटर, एक नियम के रूप में, विजेट निर्माता की मूल भाषा का वर्णन करता है। इसके मूल्य अंग्रेजी, रुसिन हो सकते हैं
CFBundleDisplayName - एक आवश्यक पैरामीटर, जिसका मान विजेट के नाम के साथ एक स्ट्रिंग है। हमारे उदाहरण में, ट्विटर निर्दिष्ट करें
CFBundleIdentifier - आवश्यक; एक स्ट्रिंग जो विशिष्ट रूप से विजेट को पहचानती है। एक उल्टे डोमेन नाम का उपयोग किया जाता है। उदाहरण के लिए: ru.MySite.widgets.Twitter
CFBundleName - विजेट के नाम को परिभाषित करने वाले एक स्ट्रिंग द्वारा दर्शाया गया एक वैकल्पिक पैरामीटर।
CFBundleVersion और CFBundleShortVersionString - वैकल्पिक पैरामीटर - विजेट के संस्करण वाले तार। "लंबी" और "लघु" संस्करण, क्रमशः
ऊंचाई और चौड़ाई वैकल्पिक पैरामीटर हैं। - इन मापदंडों का मूल्य संख्याएं हैं जो विजेट की ऊंचाई और चौड़ाई निर्धारित करती हैं
IBNotifyOnReady - वैकल्पिक पैरामीटर। जब यह पैरामीटर सही पर सेट हो जाता है, तो विजेट को एप्लिकेशन को तब बताना चाहिए जब चित्र को हटाकर HTML कोड में जाना आवश्यक हो (जब तैयार होने तक विजेट को लोड करना हो, Default.png प्रदर्शित हो) यदि डेटा प्रदर्शित हो तो यह पैरामीटर सही पर सेट होना चाहिए। विजेट को "जटिल गणना" करनी चाहिए या कई सर्वरों से डेटा एकत्र करना चाहिए ... (सामान्य स्थिति में, जब विजेट थोड़ी देर के लिए "जानकारी तैयार करेगा")। अन्य मामलों में, इसे गलत पर सेट करना बेहतर है। HTML से छवि पर स्विच करना विजेट द्वारा किया जाता है। नोटिफिकेशनकंट्री रीड ()
MainHTML - एक स्ट्रिंग के रूप में दर्शाया गया, विजेट की मुख्य HTML फ़ाइल का नाम परिभाषित करता है

इन मापदंडों का उपयोग करना पहले विजेट बनाने के लिए पर्याप्त होगा।

अब आइए विजेट के कार्यान्वयन के लिए सीधे आगे बढ़ें।

सीधे एक विजेट को लागू करने

हम विजेट की योजना बनाते हैं

लेखक विजेट को नियंत्रित करने में सक्षम होने के लिए, हम प्रारंभिक शर्तें लेते हैं:

स्टार्टअप पर विजेट सर्वर के लिए एक अनुरोध भेजता है, यह प्रदर्शित होने वाले उपयोगकर्ताओं के हैशटैग की एक सूची प्राप्त करता है
ट्विटर के लिए आवश्यक "प्रारूप" में डेटा उत्पन्न करता है
"Imports" ट्विटर एपीआई स्क्रिप्ट, इसकी प्रतिक्रिया का इंतजार कर रहा है
डेटा को उपयोगकर्ता के अनुकूल तरीके से डिजाइन करता है

इस विजेट में, हम JQuery लाइब्रेरी (JSON के साथ काम को आसान बनाने और AJAX अनुरोध बनाने के लिए) का उपयोग करेंगे

Html फ़ाइल

इस उदाहरण में "व्यावहारिक" लाभ नहीं। भविष्य के ट्वीट के लिए एक कंटेनर होता है:

 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script type="text/javascript" src="jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <input type="hidden" id="ID" value="SomeWidgetIDForServerQuery" /> <div id='tweet-container'> </div> <script type="text/javascript" src="ServerQuery.js"></script> </body> </html>

जावास्क्रिप्ट भराई

स्क्रिप्ट का मुख्य कार्य सर्वरों को AJAX अनुरोध भेजना होगा। एक सीमा है। हम सीधे ऐसे अनुरोध नहीं भेज पाएंगे। अधिक सटीक रूप से, अनुरोध सर्वर पर जाएगा, सर्वर इसे संसाधित करेगा, लेकिन विजेट डेटा प्राप्त करने में सक्षम नहीं होगा। इसलिए, इस स्थिति से बाहर का रास्ता JSONP का उपयोग करना है।
यह क्या है यह एक पैटर्न है जो हमें एक दूरस्थ सर्वर और डोमेन प्रतिबंध नीति "बायपास" करने के लिए डेटा भेजने की अनुमति देगा।
यह तरीका कैसा दिखता है?
विजेट एक GET अनुरोध बनाता है, जिसके मापदंडों में (आवश्यक जानकारी के अलावा) कॉलबैक फ़ंक्शन का संकेत दिया गया है। सर्वर एक जावास्क्रिप्ट फ़ंक्शन कॉल में लिपटे डेटा को फॉर्मेट में लौटाता है

 callback-(   JSON);

हम उस डेटा को परिभाषित करते हैं जो सर्वर भेजेगा: मान लीजिए कि डेटा में केवल एक परिणाम पैरामीटर होता है, जिसे नाम तत्वों की एक सरणी के रूप में प्रस्तुत किया जाएगा (हम यहां उपयोगकर्ता और हैशटैग दोनों शामिल हैं)
नमूना सर्वर प्रतिक्रिया:

 jsonp_callback({"results":[{"name":"user1"},{"name":"#hashCode1"}]});

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

 //       var requestStr = ""; //  " "    function PrepareItem(item) { if (requestStr != "") requestStr += '+OR+'; if (item[0] != "#") {//     requestStr += 'from:' + item; } else {//   - requestStr += '%23'; for (var index = 1; index < item.length; index++) requestStr += item[index]; } } $(document).ready(function() { $.ajax({ //    dataType: 'jsonp', jsonp: 'jsonp_callback', // GET       -callback url: "http://mySite.ru/widgets/twitter.php", data: { ID:$('#ref').val() }, success: function( result ) { $(result.results).each(function(item) { PrepareItem(item.name); }); //    (    ) CreateQueryToTwitter(requestStr); } });

हालांकि, JSONP भी डेटा ट्रांसफर करने का दूसरा तरीका बताता है (शारीरिक रूप से यह पहले से अलग नहीं है - अंतर केवल सॉफ्टवेयर कार्यान्वयन में है) - यह दूसरा तरीका है जिसे हम ट्विटर पर अनुरोध भेजने के लिए उपयोग करेंगे।

इस पद्धति में HTML कोड में एक "स्क्रिप्ट" तत्व शामिल है, जिसका शरीर खाली है, और src में कॉलबैक फ़ंक्शन और अन्य मापदंडों को इंगित करने वाला समान GET अनुरोध शामिल है।

अनुरोध भेजने के बाद, हम केवल ट्विटर की प्रतिक्रिया (परिणाम तत्व में सबसे उपयोगी जानकारी है) को पार्स कर सकते हैं और इसे प्रारूपित कर सकते हैं।

 function CreateQueryToTwitter(request) { var newScript = document.createElement('script'); newScript.setAttribute("type", "text/javascript");//  newScript.setAttribute("src", "http://search.twitter.com/search.json?q=" + request + "&callback=tweetResponse&rpp=40"); //   HTML  document.getElementsByTagName("head")[0].appendChild(newScript); } function tweetResponse(result) { var container=$('#tweet-container'); container.html(''); //  $(result.results).each(function () { var str = (' <div class="tweet">\ <div class="avatar"><a href="http://twitter.com/'+this.from_user+'" target="_blank"><img src="'+this.profile_image_url+'" alt="'+this.from_user+'" /></a></div>\ <div class="user"><a href="http://twitter.com/'+this.from_user+'" target="_blank">'+this.from_user+'</a></div>\ <div class="txt">' + formatTweet(this.text) + '</div>\ '); container.append(str); }); } //   ,     function formatTweet(str) { str=' '+str; str = str.replace(/((ftp|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>'); str = str.replace(/([^\w])\@([\w\-]+)/gm,'$1@<a href="http://twitter.com/$2" target="_blank">$2</a>'); str = str.replace(/([^\w])\#([-,-,az,AZ,\-]+)/gm,'$1<a href="http://twitter.com/search?q=%23$2" target="_blank">#$2</a>'); return str; }

यह विजेट के लिए शैलियों को निर्धारित करने के लिए ही बना हुआ है और HTML कोड तैयार है:

 body { font-family: Tahoma,Arial,Verdana,sans-serif; width:1024px; margin: auto; height:768px; } #tweet-container { overflow-y:scroll; height:768px; width:660px; margin: auto; } .tweet { color:black; margin-top:5px; background-color:#F0F1F4; border-bottom:3px solid #5ea8de; padding:10px; margin-left:5px; width:600px; height:autopx; } .avatar { float:left; } .avatar:hover { opacity:0.5; } .user { float:left; padding-left:10px; } .user a { text-decoration:none; color:black; font-size:1.1em; } .user a:hover { color:#DB4FDB } .txt { clear:left; }

अब इस वेब पेज पर फ़ाइल Info.plist जोड़ें। मेरे विजेट में, यह इस तरह दिखता है:

  <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> <plist version="1.0"> <dict> <key>BackwardsCompatibleClassLookup</key> <true/> <key>CFBundleDevelopmentRegion</key> <string>Russian</string> <key>CFBundleDisplayName</key> <string>twitter</string> <key>BRNotifiesOnReady</key> <true/> <key>CFBundleIdentifier</key> <string>ru.mySite.widget.twtter</string> <key>CFBundleName</key> <string>twitter</string> <key>CFBundleShortVersionString</key> <string>1.0</string> <key>CFBundleVersion</key> <string>1.0</string> <key>KFNotifiesOnReady</key> <false/> <key>Height</key> <integer>768</integer> <key>MainHTML</key> <string>main.html</string> <key>Width</key> <integer>1024</integer> <key>IBNotifiesOnReady</key> <false/> </dict> </plist>

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

निष्कर्ष में

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

मुझे उम्मीद है कि इस लेख ने न केवल आपका समय लिया, बल्कि यह उपयोगी भी होगा। :)

IBOOK लेखक आवेदन के लिए HTML विजेट लिखना