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