🧗🏿 🕴🏽 ⚙️ एचटीएमएल 5 में फ़ोटोशॉप, इलस्ट्रेटर आदि के लिए अपना विस्तार कहां से शुरू करें 👩🏽‍💻 🏀 👨🏻‍💻

इस लेख में, मैं आपको फ़ोटोशॉप, इलस्ट्रेटर, प्रीमियर, फ्लैश, प्रस्तावना या InDesign के लिए अपना स्वयं का एक्सटेंशन बनाने के लिए HTML और जावास्क्रिप्ट का उपयोग करने का तरीका दिखाऊंगा।

जून 2013 से, Adobe ने एक्सटेंशन के लिए HTML5 समर्थन जोड़ा, जिससे उनकी रचना सरल हो गई।

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

उपकरण

काम करने के लिए, हमें एक पसंदीदा टेक्स्ट एडिटर और HTML, CSS और जावास्क्रिप्ट के बुनियादी ज्ञान की आवश्यकता है।

हां, हां, अब कोई Adobe विन्यासकर्ता और फ्लैश नहीं।

आवश्यक फ़ाइलों के एक मूल सेट के निर्माण को स्वचालित करने से ग्रहण और ब्रैकेट / एज कोड सीसी की मदद मिलेगी।

इसमें क्या शामिल है

फ़ोटोशॉप के लिए सबसे सरल एक्सटेंशन बनाएं।

फ़ाइलों और उनकी संरचना का न्यूनतम सेट निम्नानुसार है:

ExtensionName/ CSXS/ manifest.xml index.html

जहाँ मैनिफ़ैक्स। xml अपने सभी मापदंडों के विवरण के साथ एक फ़ाइल है,

और index.html स्वयं एक्सटेंशन है।

Manifest.xml में निम्नलिखित जैसे कुछ होते हैं

 <?xml version="1.0" encoding="UTF-8" standalone="no"?> <ExtensionManifest ExtensionBundleId="com.extensionname" ExtensionBundleName="Extension Name" ExtensionBundleVersion="1.0" Version="4.0"> <ExtensionList> <Extension Id="com.extensionname" Version="1.0"/> </ExtensionList> <ExecutionEnvironment> <HostList> <Host Name="PHXS" Version="[14.0,14.9]"/> </HostList> <LocaleList> <Locale Code="All"/> </LocaleList> <RequiredRuntimeList> <RequiredRuntime Name="CSXS" Version="4.0"/> </RequiredRuntimeList> </ExecutionEnvironment> <DispatchInfoList> <Extension Id="com.extensionname"> <DispatchInfo> <Resources> <MainPath>./index.html</MainPath> </Resources> <UI> <Type>Panel</Type> <Menu>ExtensionName</Menu> <Geometry> <Size> <Height>400</Height> <Width>400</Width> </Size> </Geometry> </UI> </DispatchInfo> </Extension> </DispatchInfoList> </ExtensionManifest>

सभी मापदंडों का विस्तृत विवरण

और index.html में, जो भी आपका दिल चाहता है। उदाहरण के लिए:

 <!doctype html> <html> <body> Hello Habrahabr! </body> </html>

वह सब है।

हमारा पहला विस्तार तैयार है।

लांच

अहस्ताक्षरित एप्लिकेशन चलाने के लिए, आपको PlayerDebugMode को सक्षम करना होगा।

ऐसा करने के लिए, खिलाड़ी स्ट्रिंग कुंजी को 1 के स्ट्रिंग मान के साथ जोड़ें

 OS X: ~/Library/Preferences/com.adobe.CSXS.4.plist Windows: HKEY_CURRENT_USER/Software/Adobe/CSXS.4

अगला, बनाए गए एक्सटेंशन वाले फ़ोल्डर को यहां रखा जाना चाहिए

 OS X: ~/Library/Application Support/Adobe/CEPServiceManager4/extensions/ Windows: %APPDATA%\Adobe\CEPServiceManager4\extensions

फ़ोटोशॉप लॉन्च करें और मेनू से विंडो> एक्सटेंशन> हमारे एक्सटेंशन का चयन करें

पहला पैनल

सभी और परिवर्तन सीधे CEPServiceManager4 \ एक्सटेंशन फ़ोल्डर में किए जा सकते हैं।

नीचे फ़ोटोशॉप को पुनरारंभ किए बिना परिवर्तन कैसे करें

डिबगिंग

इस मोड को सक्षम करने के लिए, आपको एक्सटेंशन के रूट फ़ोल्डर में एक .debug फ़ाइल बनाने की आवश्यकता है,

 ExtensionName/ .debug CSXS/ manifest.xml index.html

जिसकी सामग्री लगभग इस प्रकार है

 <?xml version="1.0" encoding="UTF-8"?> <ExtensionList> <Extension Id="com.extensionname"> <HostList> <Host Name="PHXS" Port="8088"/> </HostList> </Extension> </ExtensionList>

जहां एक्सटेंशन आईडी = "com.extensionname" हमारे एक्सटेंशन की आईडी है,

और पोर्ट = "8088" कनेक्ट करने के लिए पोर्ट है।

ब्राउज़र में, लिंक खोलें http: // localhost: 8088 ,

लोकलहोस्ट: 8088

हमारा index.html चुनें।

और यहाँ वे Developer Tools हैं

डेवलपर उपकरण

सफारी और क्रोम में परीक्षण किया गया

जीवन रक्षक उपकरण

एडोब एज कोड सीसी / ब्रैकेट

डेविड डेराड्ट ने इन संपादकों के लिए एक अद्भुत विस्तार किया ब्रैकेट के लिए क्रिएटिव क्लाउड एक्सटेंशन बिल्डर

यह स्वचालित रूप से बनाता है:

फ़ोटोशॉप, इलस्ट्रेटर, प्रीमियर, फ्लैश, प्रस्तावना या इनडिजाइन के लिए सही जगह से सभी आवश्यक फाइलें चुनने के लिए
jQuery और CSInterface लाइब्रेरीज़
आइकन के लिए टेम्पलेट
एडोब शैली में सभी इंटरफ़ेस तत्वों के डिजाइन का अपना पुस्तकालय
स्क्रिप्ट स्वचालित रूप से अनुप्रयोग इंटरफ़ेस के रंग में पैनल को फिर से रंगना है
ताज़ा करें बटन
सभी पंजीकृत डेटा के साथ .debug

मुख्य लाभ आप की जरूरत है और कार्यक्रम को पुनः आरंभ करने के बिना विस्तार को संपादित करने की क्षमता का एक सेट है

एज कोड सीसी में एक्सटेंशन स्थापित करने के बाद, फ़ाइल> नया क्रिएटिव क्लाउड एक्सटेंशन चुनें

ब्रैकेट के लिए क्रिएटिव क्लाउड एक्सटेंशन बिल्डर

ब्रैकेट के लिए क्रिएटिव क्लाउड एक्सटेंशन बिल्डर

Index.html में आवश्यक परिवर्तन करें

एज कोड सी.सी.

सहेजें। हम फ़ोटोशॉप शुरू करते हैं और जो हुआ है उसे खोलते हैं।

हैलो हैबर एक्सटेंशन

ऊपरी दाएं कोने में छोटे "आरएफ" बटन पर ध्यान दें - यह आपको फ़ोटोशॉप को पुनरारंभ किए बिना एक्सटेंशन को पुनरारंभ करने की अनुमति देता है।

वैसे, फ़ोटोशॉप की कार्यक्षमता के साथ सीधे काम करने वाली सभी लिपियों को एक्सटेंशन फ़ोल्डर के jsx फ़ोल्डर में संग्रहीत किया जाता है।

ग्रहण

इस संपादक के लिए, यह ऐड-ऑन एडोब एक्सटेंशन बिल्डर 3 डाउनलोड करें और इसे इंस्टॉल करें।

यह बनाता है:

फ़ोटोशॉप, इलस्ट्रेटर, प्रीमियर, फ्लैश, प्रस्तावना या InDesign के लिए टेम्पलेट
jQuery और CSInterface लाइब्रेरीज़
एडोब शैली में सभी इंटरफ़ेस तत्वों के डिजाइन का अपना पुस्तकालय
एप्लिकेशन इंटरफ़ेस के रंग में विस्तार को स्वचालित रूप से फिर से लिखने के लिए स्क्रिप्ट

सार पहले मामले की तरह ही है।

केवल यहां यह बहुत असुविधाजनक है कि हर बार फ़ोटोशॉप को पुनरारंभ करने के लिए आपको उन परिवर्तनों को देखना होगा।

कोई आइकन या .debug फ़ाइल भी नहीं है।

हां, और ग्रहण खुद उगना पर भारी है।

Eclipse1

ZXP में बनाएँ

अंतिम चरण परिणाम को ZXP फ़ाइल में एकत्रित करना और उस पर हस्ताक्षर करना है।

विंडोज की कमी के लिए, मैं आपको बताता हूं कि ओएस एक्स में यह कैसे करना है।

ऐसा करने के लिए, CC एक्सटेंशन साइनिंग टूलकिट डाउनलोड करें

हम टर्मिनल खोलते हैं और कमांड के साथ एक प्रमाण पत्र प्राप्त करते हैं

 ZXPSignCmd -selfSignedCert <countryCode> <stateOrProvince> <organization> <commonName> <password> <outputPath.p12>

एक उदाहरण है

 ZXPSignCmd -selfSignedCert RU RU Saint-Petersburg "My Company" "Igor Volkov" myPassword myCertificate.p12

प्रमाण पत्र प्राप्त होने के बाद, हम इस प्रमाण पत्र का उपयोग करके ZXP में अपने एक्सटेंशन को पैक करते हैं।

 ZXPSignCmd -sign <inputDirectory> <outputZxp> <p12> <p12Password>

एक उदाहरण है

 ./ZXPSignCmd -sign HelloHabrahabr/ HelloHabrahabr.zxp myCertificate.p12 myPassword

वह सब है।

मुझे उम्मीद है कि यह लेख कई जाने-माने कार्यक्रमों के साथ अपने सुधार को विकसित करने की दिशा में पहला कदम उठाने में मदद करेगा।

उपयोगी लिंक

Davide Barranca द्वारा HTML पैनल टिप्स - विषय पर कुछ उपयोगी लेख

कामिल खडयेव द्वारा फोटोशॉप स्क्रिप्टिंग का परिचय - फोटोशॉप के लिए अपनी पहली स्क्रिप्ट कहां से शुरू करें।

Adobe Eextension SDK का उपयोग - Adobe से विस्तृत निर्देश

एडोब फोटोशॉप स्क्रिप्टिंग - एडोब स्क्रिप्टिंग डॉक्यूमेंटेशन

HTML5 एक्स्टेंसिबिलिटी के लिए एक लघु गाइड - उसी के बारे में जैसा कि मैंने अपने लेख के पहले भाग में बताया है

प्रस्तुत है एचटीएमएल 5 एक्सटेंशन्स - ग्रहण के साथ काम करने के लिए परिचयात्मक वीडियो की एक जोड़ी

एडोब एक्सटेंशन बिल्डर 3 - ZXP फ़ाइलों के लिए एक्लिप्स और पैकर के लिए एक्सटेंशन

ब्रैकेट के लिए क्रिएटिव क्लाउड एक्सटेंशन बिल्डर - एडोब एज कोड सीसी / ब्रैकेट के लिए एक्सटेंशन

एचटीएमएल 5 में फ़ोटोशॉप, इलस्ट्रेटर आदि के लिए अपना विस्तार कहां से शुरू करें

उपकरण

इसमें क्या शामिल है

लांच

डिबगिंग

जीवन रक्षक उपकरण

एडोब एज कोड सीसी / ब्रैकेट

ग्रहण

ZXP में बनाएँ

उपयोगी लिंक

More articles: