परिचय
deviantART ने 7 अगस्त, 2010 को अपना 10वां जन्मदिन मनाया था. हमने अपने जन्मदिन का जश्न, deviantART muro नाम का HTML5 ड्रॉइंग टूल लॉन्च करके मनाया. इस टूल का इस्तेमाल, स्टैंडअलोन वेब ऐप्लिकेशन के तौर पर किया जा सकता है. साथ ही, फ़ोरम की टिप्पणियों में तस्वीरें जोड़ने के लिए, इसे एक आसान ड्रॉइंग टूल के तौर पर भी इस्तेमाल किया जा सकता है.
deviantART कम्यूनिटी ने इस नए ड्रॉइंग टूल का बहुत उत्साह से स्वागत किया. अब इस टूल पर उतना ही ट्रैफ़िक आता है जितना कुछ अच्छी वेब प्रॉपर्टी पर आता है. लॉन्च होने के बाद से, deviantART muro का इस्तेमाल करके हर पांच सेकंड में एक नई ड्रॉइंग सबमिट की जाती है. ये सिर्फ़ पूरे हो चुके ड्रॉइंग की संख्या है. कई ड्रॉइंग शुरू किए गए थे, लेकिन उन्हें सेव नहीं किया गया.
इस लेख में, हमने बताया है कि हम HTML5 का इस्तेमाल कैसे कर रहे हैं. साथ ही, यह भी बताया है कि हमने किन टेक्नोलॉजी का इस्तेमाल किया है और किसी बड़ी वेबसाइट के लिए, पूरी तरह से HTML5 वाले पहले ऐप्लिकेशन को लिखते समय हमें क्या पता चला.
मेरा बैकग्राउंड
साल 2005 के आखिर में, Draw Here में इस्तेमाल किए गए ड्रॉइंग टूल के लिए, मैं एक डेवलपर था. यह टूल, 'वेब ग्राफ़िटी' टूल था. इसे बुकमार्कलेट की मदद से लॉन्च किया गया था. इसका इस्तेमाल, किसी भी वेबपेज पर चित्र बनाने के लिए किया जाता था. Draw Here को शुरू में SVG का इस्तेमाल करके बनाया गया था. उस समय Firefox 1.5 बीटा वर्शन हाल ही में रिलीज़ हुआ था. यह SVG फ़ॉर्मैट के साथ काम करने वाले पहले ब्राउज़र में से एक था.
Internet Explorer पर, हम बैकग्राउंड में SVG बना रहे थे, लेकिन VML का इस्तेमाल करके ड्रॉइंग को रेंडर कर रहे थे. उस समय WebKit में SVG काम नहीं करता था. इसलिए, मैंने कैनवस का इस्तेमाल करके SVG को रेंडर करने के लिए, अपना कोड पोर्ट किया. कैनवस उस समय सिर्फ़ WebKit में दिखने वाली एक नई टेक्नोलॉजी थी. एक समय, मैंने एक पोर्ट भी बनाया, ताकि हमारे एसवीजी कोड को पुराने ब्राउज़र पर रेंडर किया जा सके. इसके लिए, एक साथ चिपकाए गए कई डिव एलिमेंट का इस्तेमाल किया गया. (यह ज़्यादातर एक मज़ाक था, ताकि यह दिखाया जा सके कि ऐसा किया जा सकता है और इसका इस्तेमाल करना बहुत धीमा था).
Draw Here की लोकप्रियता के दौरान, हर दिन करीब 100 ड्रॉइंग बनाई जाती थीं. यह एक्सपेरिमेंट इतना बेहतर था कि इसे सिर्फ़ एक्सपेरिमेंट नहीं कहा जा सकता. हालांकि, इसमें किसी बड़े वेब ऐप्लिकेशन की तरह बेहतरीन सुविधाएं नहीं थीं. साल 2006 के मध्य में, इस प्रोजेक्ट को बंद कर दिया गया था. हालांकि, साइट अब भी काम कर रही है.
deviantART muro में इस्तेमाल की जाने वाली टेक्नोलॉजी
HTML5 टेक्नोलॉजी के शुरुआती दिनों में, मैंने इनका इस्तेमाल किया था. इसलिए, मुझे deviantART muro का मुख्य डेवलपर बनने के लिए कहा गया. इस लेख को पढ़ने वाला कोई भी व्यक्ति, शायद यह समझ सकता है कि हमने Silverlight या Flash जैसी प्लग-इन आधारित टेक्नोलॉजी के बजाय, एचटीएमएल5 का इस्तेमाल क्यों किया. हमें एक ऐसा टूल चाहिए था जो भरोसेमंद हो और ओपन स्टैंडर्ड का इस्तेमाल करता हो.
कैनवस और SVG में से किसी एक को चुनना
हमने कैनवस का इस्तेमाल करके ड्रॉइंग लेयर बनाने का फ़ैसला लिया. कुछ लोगों को यह शायद पता न हो कि कैनवस का इस्तेमाल कब करना चाहिए और एसवीजी का इस्तेमाल कब करना चाहिए. इन दोनों टेक्नोलॉजी से बहुत कुछ किया जा सकता है. Draw Here से यह साबित हुआ है कि ड्रॉइंग ऐप्लिकेशन बनाने के लिए, दोनों टेक्नोलॉजी का इस्तेमाल किया जा सकता है.
मुझे लगता है कि अगर आपको खींचे गए ऑब्जेक्ट के हैंडल को बनाए रखना है, तो एसवीजी का इस्तेमाल करना बेहतर है. उदाहरण के लिए, अगर आपको उपयोगकर्ता को लाइन खींचने की सुविधा देनी है, ताकि वह लाइन के आकार को बदलने के लिए, लाइन के कुछ हिस्सों को खींचकर छोड़ सके, तो SVG का इस्तेमाल करना काफ़ी आसान होगा. हालांकि, कैनवस का इस्तेमाल करके ऐसा करना बहुत मुश्किल है.
कैनवस का इस्तेमाल करने पर, उस पर कॉन्टेंट डाला जाता है और फिर उसे भूल जाता है. कोड में, खाली कैनवस और एक घंटे तक ड्रॉ किए गए कैनवस का व्यवहार एक जैसा होता है. साथ ही, दोनों का मेमोरी फ़ुटप्रिंट भी एक जैसा होता है. आम तौर पर, रेस्टर ड्रॉइंग प्रोग्राम, फ़ायर और फ़ॉरगेट टेक्नोलॉजी के साथ बहुत अच्छा काम करता है. हालांकि, इससे कुछ चीज़ें मुश्किल हो जाती हैं. उदाहरण के लिए, SVG की तुलना में कैनवस में, तुरंत पहले जैसा करने की सुविधा बनाना काफ़ी मुश्किल है. SVG में, अपनी पिछली कई लाइनों को हैंडल किया जा सकता है. साथ ही, उन ऑब्जेक्ट को हटाने के लिए, उन्हें बस हटाना होता है. कैनवस में, लाइन पेंट करने के बाद, आपको यह पता नहीं चलता कि उसके नीचे क्या था. इसलिए, लाइन हटाने के लिए, उस जगह को फिर से ड्रॉ करना पड़ता है जहां वह लाइन थी.
कैनवस के लिए HTML5 का इस्तेमाल करने का फ़ैसला लेने के बाद, हमने यहां-वहां HTML5 की कुछ सुविधाओं का इस्तेमाल करने का फ़ैसला लिया. इसका एक उदाहरण यह है कि हमने उपयोगकर्ता की ब्रश सेटिंग को ट्रैक करने के लिए, localStorage का इस्तेमाल कैसे किया. इस तरह, जब वे अपने अलग-अलग ब्रश को अपनी पसंद के मुताबिक सेट अप कर लेते हैं, तो अगली बार हमारे टूल का इस्तेमाल करते समय वे उन सेटिंग पर वापस आ सकते हैं. लोकल स्टोरेज का मतलब है कि हमें उन प्राथमिकताओं को पाने के लिए, अपनी कुकी का इस्तेमाल करने या सर्वर पर कोई ट्रिप करने की ज़रूरत नहीं है.
कैनवस का इस्तेमाल करना
पिछले पांच सालों में, कैनवस काफ़ी आगे बढ़ चुका है. Draw Here की मदद से, हमने कैनवस पोर्ट पब्लिश नहीं किया, क्योंकि इसकी परफ़ॉर्मेंस अच्छी नहीं थी. अब, मुझे लगता है कि यह कहना सुरक्षित है कि यह आपके हिसाब से बेहतर परफ़ॉर्म कर सकता है. कैनवस के बड़े हिस्से को मिटाने और जटिल आकार फिर से बनाने में, आम तौर पर इंसान की तुलना में ज़्यादा तेज़ी से काम किया जा सकता है. मुझे कभी-कभी पिक्सल सैंपल करने के लिए, getImageData() का इस्तेमाल करने में बहुत ज़्यादा समय लगा. कैनवस के साइज़ के हिसाब से, ऑपरेशन की स्पीड तय होती है. हालांकि, बड़े कैनवस पर, गलत समय पर getImageData() करने पर, उपयोगकर्ता को ऐसा लग सकता है कि ऐप्लिकेशन का रिस्पॉन्स देना धीमा है.
कैनवस के अलग-अलग ट्यूटोरियल पढ़ने के बाद, मुझे शुरू में लगा कि यह एक ऐसी चीज़ है जिसका इस्तेमाल कम किया जाना चाहिए. शायद किसी पेज पर एक या दो बार किया जाना चाहिए. मुझे नहीं पता कि सभी को यह समझ आती है या नहीं, लेकिन मुझे यह समझ आ गई थी. इसलिए, जब हमने deviantART muro को कोडिंग करना शुरू किया था, तब हमने इसका कम इस्तेमाल किया था. हालांकि, कुछ समय बाद, मुझे पता चला कि ऐसी कई छोटी-छोटी जगहें हैं जहां कैनवस का इस्तेमाल करके, बहुत मेहनत बचाई जा सकती है. उदाहरण के लिए, हमारे ऐप्लिकेशन के मॉक-अप में बताया गया था कि एक कलर पिकर होना चाहिए, जिसमें प्राइमरी और सेकंडरी कलर दिखाने वाले दो ओवरलैप होने वाले ट्राएंगल होने चाहिए:
सबसे पहले, मैंने सोचा कि एचटीएमएल और सीएसएस का इस्तेमाल करके, इस छोटे यूज़र इंटरफ़ेस (यूआई) गिजमो को कैसे बनाया जा सकता है. सीएसएस को हैक करने में माहिर लोग बता सकते हैं कि सीएसएस की मदद से यह सब कैसे किया जा सकता है. हालांकि, रंग बदलने वाले दो हिस्सों के त्रिकोण आकार की वजह से, यह आसानी से समझ नहीं आता.
जब मुझे सिर्फ़ कैनवस का इस्तेमाल करने का आइडिया आया, तो मैंने एक डीओएम एलिमेंट और JavaScript की कुछ लाइनों के साथ विजेट बनाया. deviantART muro, हर जगह कैनवस नोड का इस्तेमाल करता है. हर लेयर एक कैनवस होती है. लेयर का क्रम बदलने के लिए, सिर्फ़ z-इंडेक्स को स्विच करना होता है. ज़ूम 'नेविगेटर' पैलेट, ड्रॉइंग एरिया का छोटा व्यू दिखाता है. यह सिर्फ़ एक और कैनवस है, जो कभी-कभी लेयर कैनवस को सोर्स इमेज के तौर पर इस्तेमाल करके drawImage() को कॉल करता है. ड्रॉइंग एरिया का कर्सर भी एक कैनवस होता है. यह दो रंगों वाला एक गोला होता है, जो ब्रश के साइज़ और ज़ूम के हिसाब से अपना साइज़ अडजस्ट करता है. यह कर्सर, माउस के नीचे फ़्लोट करता है.
हमने अन्य HTML5 टेक्नोलॉजी के मुकाबले कैनवस के लिए ज़्यादा छूट दी है, क्योंकि Google की ExplorerCanvas लाइब्रेरी की मदद से, Internet Explorer में कैनवस को सिम्युलेट किया जा सकता है. इससे मुझे अगले सेक्शन पर ले जाया जाता है.
Internet Explorer (IE)
ज़्यादातर बड़ी वेबसाइटें अब तक HTML5 का इस्तेमाल नहीं कर रही हैं, इसकी मुख्य वजह यह है कि वे Internet Explorer का इस्तेमाल करने वाले अपने उपयोगकर्ताओं को नहीं खोना चाहती हैं. मुझे यकीन है कि जब भी कोई डेवलपर यह सुनता है कि deviantART ने HTML5 ड्रॉइंग ऐप्लिकेशन बनाया है, तो सबसे पहले उसके मन में यह सवाल आता है कि 'IE के लिए क्या किया गया है?'
हमने शुरुआत में ही तय कर लिया था कि हम इंटरनेट एक्सप्लोरर में सभी चीज़ों को काम करने के लिए पूरी कोशिश करेंगे. हालांकि, हम वेब डेवलपमेंट के कम से कम सामान्य स्टाइल का इस्तेमाल नहीं करेंगे. वेब कम्यूनिटी ने यह तरीका अपनाया है कि जब तक कोई साइट हर ब्राउज़र पर एक जैसी नहीं दिखती, तब तक उसे लॉन्च नहीं किया जा सकता. इसलिए, उपयोगकर्ता यह नहीं बता सकते कि उनके ब्राउज़र में क्या कमी है. आम तौर पर, उपयोगकर्ता इंटरनेट कनेक्शन की समस्याओं को पेज लोड होने में लगने वाले समय की वजह मानते हैं. साथ ही, वे यह भी मानते हैं कि हर पेज को लोड होने में लगने वाला समय एक जैसा होता है. इसलिए, वे यूज़र इंटरफ़ेस की छोटी-मोटी चीज़ों के आधार पर, अपने पसंदीदा ब्राउज़र का फ़ैसला लेते हैं. जैसे, बैक बटन का रंग.
हमने तय किया कि हम HTML5 स्पेसिफ़िकेशन का इस्तेमाल करके, कोई भी ऐसी शानदार सुविधा बनाएंगे जो हमें याद आए. साथ ही, हम कोशिश करेंगे कि वह सुविधा Internet Explorer में काम करे. अगर वह सुविधा काम नहीं करती, तो हम एक मोडल पॉप-अप करेंगे. इसमें यह जानकारी दी जाएगी कि यह सुविधा उपलब्ध नहीं है, क्योंकि उनके ब्राउज़र में अब तक कोई वेब स्टैंडर्ड लागू नहीं किया गया है.
हमने शुरुआत में, Google के ExplorerCanvas (exCanvas) के साथ काम करने की कोशिश की थी. यह ज़्यादातर चीज़ों के लिए कैनवस की नकल करने में काफ़ी अच्छा है. हालांकि, इसका एक नुकसान है. कैनवस पर किया गया हर स्ट्रोक, VML ट्रांसलेशन में एक DOM ऑब्जेक्ट होता है. कैनवस पर ज़्यादातर चीज़ें बनाने के लिए, यह तरीका ठीक है. हालांकि, deviantART muro के कुछ ब्रश, एक साथ कई स्ट्रोक की लेयर से आकार बनाते हैं. जब Internet Explorer को ऐसे VML से सामना करना पड़ता है जिसमें हज़ारों नोड होते हैं, तो यह तेज़ मशीन पर भी काम नहीं करता. इस वजह से, हमें ज़्यादातर ड्रॉइंग कॉल के लिए, असल VML में जाकर कोड डालना पड़ा. साथ ही, हमने कुछ तरकीबें भी अपनाईं. जैसे, हमने नोड को एक साथ जोड़ा और यह बताने के लिए कि कहां गैप होने चाहिए, हमने मूव कमांड का इस्तेमाल किया. इंटरफ़ेस में मौजूद कई छोटे कंट्रोल और अन्य चीज़ें, कैनवस टैग का इस्तेमाल करती हैं, क्योंकि आम तौर पर ये छोटे इस्तेमाल, exCanvas के साथ ठीक से काम करते हैं.
हमने exCanvas के साथ कुछ चीज़ों को काम करने के साथ-साथ, उपयोगकर्ताओं को यह सुझाव भी दिया कि अगर वे Google Chrome Frame प्लग-इन इंस्टॉल करें, तो वे अपने Internet Explorer वर्शन का इस्तेमाल जारी रख सकते हैं. Google Chrome Frame एक प्लग-इन है, जो Internet Explorer में Google Chrome के रेंडरिंग इंजन को एम्बेड करता है. उपयोगकर्ता के हिसाब से, वह अब भी उसी ब्राउज़र का इस्तेमाल कर रहा है जिसका उसे पहले से पता है. हालांकि, इसके पीछे हमारा पेज, Chrome की एचटीएमएल5 सुविधाओं और तेज़ JavaScript के साथ रेंडर होता है.
मुझे पता था कि Chrome Frame के साथ काम करने के लिए, ऐप्लिकेशन को पोर्ट करना आसान होगा, लेकिन मुझे नहीं पता था कि यह कितना आसान होगा. बस एक अतिरिक्त मेटा टैग जोड़ें और… बस, IE में चीज़ें काम करना शुरू कर देती हैं.
खास जानकारी
HTML5 स्पेसिफ़िकेशन में नई टेक्नोलॉजी के साथ काम करना बहुत अच्छा लगता है. मेरे हिसाब से, मैंने जो भी टेक्नोलॉजी इस्तेमाल की है वह प्राइम टाइम के लिए तैयार है. भले ही, आपको IE पर चीज़ों को बिना किसी रुकावट के काम करना हो, फिर भी कैनवस और exCanvas को मिलाकर बहुत कुछ किया जा सकता है. साथ ही, SVG और VML के बीच ट्रांसलेशन लेयर लिखना भी आसान है. इस टेक्नोलॉजी का इस्तेमाल शुरू करने के बाद, ऐसा लगता है कि आप किसी नई दुनिया में पहुंच गए हैं.
रेफ़रंस
- deviantART muro
- deviantART का फ़ोरम, जहां ड्रॉ किया जा सकता है (इसके लिए लॉगिन करना ज़रूरी है)
- ExplorerCanvas
- Google Chrome Frame