🚴🏻 👩🏼‍🔧 📊 HTA के रूप में इंटरएक्टिव पोस्टकार्ड 🌰 🛀🏾 🍜

एचटीए अनुप्रयोगों का वर्णन पहले ही हबर पर किया जा चुका है। अब शांतिपूर्ण उद्देश्यों के लिए प्रौद्योगिकी के उपयोग का एक ठोस उदाहरण पर विचार करें।

किस लिए?

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

मानव की आवश्यकताएं

1. HTML और जावास्क्रिप्ट का ज्ञान।
2. कल्पना।
3. लेआउट कौशल।

सिस्टम आवश्यकताओं

निर्माण सॉफ्टवेयर से, कम से कम एक नोटबुक स्वाद के लिए उपयुक्त है। और इसे देखने के लिए, आपको mshta.exe की आवश्यकता है, जो विंडोज़ के किसी भी संस्करण के साथ आता है जिसके साथ IE को संस्करण 5.0 से ऊपर दिया गया था (यह भी बिना IE के जहाजों के विंडोज 7E पर परीक्षण किया गया था)।

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

चलिए शुरू करते हैं

सबसे पहले, postcard.hta फ़ाइल में एप्लिकेशन फ्रेमवर्क बनाएं:

<html> <head> <title>iPostcard</title> <hta:application applicationName="HTAPOSTCARD" innerBorder="no" selection="no" scroll="no" caption="no" maximizebutton="no" minimizebutton="no" contextmenu="no" /> <style type="text/css"> </style> </head> <body> </body> </html>

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

applicationName - एप्लिकेशन पहचानकर्ता, आप कुछ भी लिख सकते हैं, उदाहरण के लिए इसे "HTAPOSTCARD" होने दें।
इनर बॉर्डर - विंडो के आंतरिक फ्रेम की उपस्थिति। सुंदरता के लिए बंद करें, हालांकि स्वाद में विसंगति हो सकती है। मान या तो हाँ है या नहीं।
चयन - HTA विंडो में पाठ के चयन को सक्षम / अक्षम करें। पोस्टकार्ड के लिए यह आवश्यक नहीं है, हम पैरामीटर मान में "नहीं" डालते हैं। तदनुसार, "हाँ" इस तरह की कार्रवाई की अनुमति देगा।
स्क्रॉल - विंडो में स्क्रॉल बार की उपस्थिति निर्धारित करता है। निषिद्ध, जैसा कि सामग्री का आकार तय किया जाएगा।
कैप्शन - एक खिड़की शीर्षक की उपस्थिति निर्धारित करता है। यह हमारे लिए उपयोगी नहीं होगा, इसलिए हम "नहीं" डालते हैं।
अधिकतमबटन और मिनिममबटन - "मिनिमम" और "फुल स्क्रीन के लिए अधिकतम" बटन की उपस्थिति को निर्धारित करता है, शीर्षक और एप्लिकेशन के सिस्टम मेनू में संबंधित आइटम के साथ। हमने पहले ही बटन के साथ हेडर को बंद कर दिया है, इसलिए हम इन बिंदुओं का उपयोग केवल एप्लिकेशन के सिस्टम मेनू के माध्यम से विंडो को कम या अधिकतम करने की क्षमता को बाहर करने के लिए करेंगे।
referencemenu - अंत में संदर्भ मेनू (सही माउस बटन के साथ कहा जाता है) को "नहीं" के पैरामीटर को हटाकर (मैं "हां" सेट करके यह नोट करना चाहता हूं कि मैंने अभी भी इस मेनू को नहीं देखा था)।

डिज़ाइन

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

 <!-- /* Content-Type: multipart/related; boundary="_SEPARATOR_" --_SEPARATOR_ Content-Location:imagebg Content-Transfer-Encoding:base64 /9j/4AAQSkZJRgAB ... 5Jxk570UUUAf//Z --_SEPARATOR_-- */ --> <html>...</html>

हम कंटेनर को भविष्य के लिए आदत के लिए टिप्पणी में रखेंगे - अन्य ब्राउज़र बस इस कोड को टिप्पणी के रूप में छोड़ देंगे, और IE इसे एक देशी कंटेनर के रूप में देखेगा। मुझे इस कोड में क्या और क्यों समझाएं:
सामग्री-प्रकार: मल्टीपार्ट / संबंधित; - सामग्री के प्रकार को इंगित करें।
सीमा = "_ SEPARATOR_" - उद्धरण चिह्नों में वाक्यांश कोई भी हो सकता है, यह कंटेनरों का विभाजक है। बेशक, यह विचार करने योग्य है कि इस वाक्यांश में अक्षरों का संयोजन किसी भी तरह से बेस 64 कोड में नहीं होना चाहिए।
--_ SEPARATOR_ - अगले संसाधन की शुरुआत, "-" से शुरू होती है और इसमें उपरोक्त विभाजक शामिल हैं।
सामग्री-स्थान - अगले संसाधन का लेबल, यह इस लेबल पर है कि हमें आवश्यक चित्र मिल जाएगा। हमेशा की तरह, अलग-अलग नाम देना बेहतर है। इस उदाहरण में, यह एक छवि - चित्र, बीजी - पृष्ठभूमि - पृष्ठभूमि है।
सामग्री-अंतरण-एन्कोडिंग - एक संसाधन एन्क्रिप्शन विधि।
उसके बाद हमारी कोडित तस्वीर आती है, जिसे मैंने काट-छाँट के रूप में उद्धृत किया है।

RFC 2387 विनिर्देश के अनुसार , प्रत्येक कंटेनर को एक बंडल द्वारा तैयार किया जाना चाहिए - [विभाजक वाक्यांश] और अंतिम संसाधन को बंडल द्वारा बंद किया जाना चाहिए - [विभाजक वाक्यांश] -। मुझे कहना होगा कि यह एक अलग विभाजक के बिना भी काम करता है, लेकिन हम मानकों से विचलित नहीं होंगे।

अब हमारे पास एक एम्बेडेड छवि है, जिसे हम एप्लिकेशन की पृष्ठभूमि बनाने जा रहे हैं। कुछ भी आसान नहीं है:

  <style> body{ background-image: url(mhtml:file://C:\__\postcard.hta!imagebg); </style>

लेकिन चौकस पाठक ने पहले से ही समस्या को देखा। PATH_DO_FILE और क्या है? और यहां mhtml द्वारा बनाई गई समस्या खुलती है, जिसे संसाधन कंटेनर के साथ फ़ाइल के लिए पूर्ण पथ की आवश्यकता होती है। सच कहूं तो, जब मुझे इस बारे में पता चला (और रिश्तेदार रास्तों के विभिन्न रूपों के बारे में जानने की कोशिश की), तो मेरे हाथ लगभग गिर गए। लेकिन इंटरनेट ज्ञान का एक अथाह भंडार है, और एक समाधान मिल गया है! एक संसाधन पर, मैंने रनटाइम पर शैलियों की जगह के विचार की जासूसी की। मुख्य विचार दस्तावेज़ के पूर्ण URL के साथ संसाधन को पथ को बदलना है। मैंने लेखक द्वारा दिए गए निर्णय को नहीं लिया, क्योंकि मैं नहीं चाहता था कि आवेदन में लिपटी स्क्रिप्ट हो। इसे जावास्क्रिप्ट होने दें और अधिक कुछ नहीं। हालांकि, मैंने निश्चित रूप से कार्यक्षमता खो दी है। वह स्क्रिप्ट तुरंत सभी शैलियों में पथ बदलती है। खैर, और यहाँ मेरे पास जवाब देने के लिए कुछ है - मैं न केवल शैलियों में, बल्कि तरीका बदलूंगा। इसके बारे में नीचे। और अब ...

... आइए प्रोग्रामिंग शुरू करें

संसाधन के लिए पूर्ण पथ को गतिशील रूप से बदलने के लिए, तब तक प्रतीक्षा करें जब तक दस्तावेज़ में दस्तावेज़ का टैग दिखाई न दे और तुरंत स्क्रिप्ट एम्बेड करें:

  <body> <script language=javascript> $("body").css("background-image","url(mhtml:"+document.URL+"!imagebg)"); </script> ... </body>

एक बार फिर, चौकस उपयोगकर्ता पहले से ही अलार्म बज रहा है: - किस तरह का $ ("शरीर")? यह jQuery है! और सही मायने में उनका आक्रोश, सुविधा के लिए मैं लोकप्रिय ढांचे का उपयोग करता हूं। मुझे लगता है कि आपके पास यह सवाल नहीं है कि वह एक स्व-निहित एप्लिकेशन में कैसे समाप्त हुआ, लेकिन फिर भी मैं इसे "गुप्त" प्रकट करूंगा। बस jQuery ले लो और टैग के बीच ढांचे के स्रोत कोड को पेस्ट करें:

 <html> <head> ... <script language=javascript> ... /*   */ ... </script> </head> ... </html>

JQuery के रचनाकारों के कॉपीराइट को संरक्षित करते हुए, मैं इसे आपके विवेक पर छोड़ दूंगा। लेकिन मैं खुद मानता हूं कि दूसरे लोगों के श्रम का सम्मान होना चाहिए।

ऐसी उत्कृष्ट कार्यक्षमता के साथ, छवियों को एम्बेड करना कोई समस्या नहीं है:

 <img src="" id="imgdata1"/></div> <script language=javascript> $("#imgdata1").attr("src","mhtml:"+document.URL+"!imgdata1"); </script>

परिणाम

परिणामस्वरूप हमें क्या मिला? संसाधनों के भंडारण के साथ एक पूर्ण-स्व-निहित अनुप्रयोग, (RFC को गहरा खोदना, आप देखेंगे कि संसाधन कुछ भी हो सकते हैं) और शक्तिशाली प्रारंभिक कार्यक्षमता (मेरा मतलब है रूपरेखा)। इसके अलावा, इंटरफ़ेस को सादे HTML के साथ चिह्नित किया गया है! क्या अधिक सुंदर और अधिक सुविधाजनक हो सकता है? इस समझदार सैंडबॉक्स का उपयोग करने के लिए पहले से ही एक समझदार हैबरेज़र के पास विभिन्न विचार हैं। साधारण पोस्टकार्ड और पूर्ण-स्क्रीन प्रस्तुतियों से लेकर पूर्ण VEB क्लाइंट और डेस्कटॉप एप्लिकेशन (VBScript के लिए धन्यवाद, आप फ़ाइलों और रजिस्ट्री के साथ काम कर सकते हैं)।

स्क्रिप्ट के साथ थोड़ा स्टाइल, HTML- कोड, सीज़न जोड़ें और हमारे लंबे समय से प्रतीक्षित उदाहरण प्राप्त करें जिसमें एक पृष्ठ पर पाठ और दूसरे पर संसाधनों से एक चित्र है। एप्लिकेशन कोड बिल्कुल खुला है। इसे शुरू करने से पहले, आप इसे एक पाठ संपादक में खोल सकते हैं और कोड का निरीक्षण कर सकते हैं।

HTA के रूप में इंटरएक्टिव पोस्टकार्ड