केस स्टडी - HTML5 MathBoard

Jeremy Chone

शुरुआती जानकारी

iPad पर MathBoard, एक PalaSoftware ऐप्लिकेशन है. यह कई सूक्ष्म लेकिन प्राकृतिक ऐनिमेशन और अद्वितीय वास्तविक दृश्य और अनुभव वाला शानदार ऐप्लिकेशन है. लक्ष्य था कि iPad ऐप्लिकेशन का सबसे अच्छा फ़िडेलिटी पोर्ट HTML5 पर इस्तेमाल किया जाए.

N2N-Apps एक सॉफ़्टवेयर डेवलपमेंट कंपनी है, जो HTML5 टेक्नोलॉजी वाले वेब और मोबाइल ऐप्लिकेशन की अगली-पीढ़ी की टेक्नोलॉजी पर काम कर रही है. कंपनी को 2010 में जेरेमी चॉने से फ़ंड मिला था. उन्होंने Netscape, Oracle, और Adobe में 11 साल के इंजीनियरिंग और मैनेजमेंट के अनुभव के बाद, अच्छी क्वालिटी वाले वेब और मोबाइल ऐप्लिकेशन बनाने के लिए, अपनी विशेषज्ञता को कारोबारों के साथ शेयर करने का फ़ैसला किया. N2N-ऐप्लिकेशन, डिलीवरी की क्वालिटी और स्पीड पर फ़ोकस करते हैं.

Chrome Web Store के लिए MathBoard डाउनलोड करें Chrome Web Store के लिए MathBoard डाउनलोड करें (मुफ़्त वर्शन)

ज़रूरी शर्तें

इस HTML5 पोर्टिंग प्रोजेक्ट के लिए ज़रूरी शर्तें ये थीं:

1. iPad के ओरिजनल वर्शन और यूज़र इंटरफ़ेस का हाई फ़िडेलिटी पोर्ट.
2. उसे टारगेट डिवाइस के नाप या आकार के मुताबिक बनाएं (जैसे, कीबोर्ड/माउस वाले कंप्यूटर/Mac बनाम टच स्क्रीन).
3. सभी लागू सुविधाओं का इस्तेमाल करें.
4. मुख्य रूप से HTML5 ब्राउज़र टारगेट करें.
5. ऐप्लिकेशन को "सर्वर-लेस" बनाएं, ताकि ऐप्लिकेशन पूरी तरह से क्लाइंट पर चले और उसे किसी स्टैटिक सर्वर या Google Chrome के पैकेज किए गए ऐप्लिकेशन पर होस्ट किया जा सके.
6. एक महीने से भी कम समय में, समस्या हल करने वाले टूल को छोड़कर सभी सुविधाओं वाला 1.0 वर्शन बनाएं.

आर्किटेक्चर

शर्तों को देखते हुए, हमने इन आर्किटेक्चर के साथ काम करने का फ़ैसला किया:

1. HTML5: हमारे पास HTML4 support की कोई ज़रूरत नहीं है, इसलिए हमने HTML5 को बेस के तौर पर इस्तेमाल करने का फ़ैसला किया.
2. jQuery: HTML5 में कई बेहतर सिलेक्टर हैं, जो jQuery को बेहतरीन बनाते हैं, फिर भी हमने jQuery के साथ बने रहने का फ़ैसला लिया, क्योंकि इससे हमें DOM और उससे जुड़े इवेंट में फ़ेरबदल करने का एक बेहद मज़बूत और बेहतर तरीका मिलता है. jQuery में ज़्यादा DOM पर केंद्रित होने का फ़ायदा भी होता है, जो HTML के जैसा ऐप्लिकेशन डिज़ाइन और उसे लागू करने में कारगर साबित होता है.
3. SnowUI: jquery, DOM के साथ काम करने के लिए एक बेहतरीन एपीआई और सबसे सही तरीका उपलब्ध कराता है, हालांकि, HTML5 MathBoard ऐप्लिकेशन के लिए, सभी अलग-अलग व्यू को व्यवस्थित करने के लिए, हमें MVC या MVP स्टाइल फ़्रेमवर्क की ज़रूरत थी. SnowUI, jQuery के ऊपर मौजूद एक आसान और दमदार एमवीसी फ़्रेमवर्क है. यह DOM पर आधारित MVC तकनीक और कस्टम कॉम्पोनेंट बनाने का एक सुविधाजनक तरीका देता है. साथ ही, इससे ऐप्लिकेशन डेवलपर को किसी भी विजेट/कंट्रोल लाइब्रेरी या कस्टम कोड का इस्तेमाल करने का मौका मिलता है जो उसे सबसे अच्छा लगता हो.

iPad से पीसी पर ध्यान देने वाली बातें

पीसी के इस्तेमाल के लिए ऐप्लिकेशन को HTML5 पर पोर्ट करते समय, हमें ऐप्लिकेशन के डिज़ाइन और उपयोगकर्ता के इंटरैक्शन में कई बदलाव करने पड़े.

स्क्रीन ओरिएंटेशन

iPad MathBoard को खास तौर पर वर्टिकल ओरिएंटेशन में रखा गया है. यह पीसी पर डिसप्ले के लिए सही नहीं है, क्योंकि आम तौर पर इसका इस्तेमाल हॉरिज़ॉन्टल तौर पर किया जाता है. इस वजह से, हमने यूज़र इंटरफ़ेस (यूआई) डिज़ाइन को फिर से व्यवस्थित किया और सेटिंग पैनल को स्लाइडिंग व्यू (CSS3 ट्रांज़िशन के ज़रिए ऐनिमेट किए गए) पर दाईं ओर ले जाया गया.

iPad बनाम HTML5 स्क्रीन ओरिएंटेशन

इनपुट: कीबोर्ड/माउस बनाम टच

iPad और वेब वर्शन के बीच एक और खास अंतर इनपुट इंटरफ़ेस है. iPad में आपके पास सिर्फ़ टच इंटरफ़ेस है. इसलिए, पीसी पर आपको माउस और कीबोर्ड, दोनों का ध्यान रखना होगा.

iPad पर मौजूद MathBoard इनपुट कंट्रोल को बेहतर बनाया गया है. हम चाहते थे कि वेब इंटरफ़ेस में भी वैसा ही हाई फ़िडेलिटी वर्शन दिखे. इसके लिए, कीबोर्ड शॉर्टकट के साथ काम करने की सुविधा जोड़ी गई और सीएसएस की पोज़िशनिंग का इस्तेमाल करके यूज़र इंटरफ़ेस (यूआई) कंट्रोल की सुविधा जोड़ी गई. HTML5 का पोर्ट पिक्सेल परफ़ेक्ट था:

iPad बनाम HTML5 वर्शन सेटिंग

iPad इंटरफ़ेस की तरह, इसमें उपयोगकर्ता को कंट्रोल की वैल्यू बदलने के लिए, लेफ़्ट और राइट ऐरो पर क्लिक करने की सुविधा होती है. वर्टिकल लाइन को खींचकर, वैल्यू में तेज़ी से बदलाव किया जा सकता है. click और keydown के लिए बार-बार होने वाला व्यवहार लागू किया गया था, ताकि उपयोगकर्ता माउस या कीबोर्ड को दबाने पर वैल्यू में तेज़ी से बदलाव कर सकें.

एक इनपुट फ़ील्ड से दूसरी में जाने और ← और → ऐरो के ज़रिए वैल्यू बदलने के लिए, Tab सपोर्ट की सुविधा जोड़ी गई है.

iPad वर्शन की एक सुविधा जो पीसी इंटरफ़ेस के लिए ज़्यादा मायने नहीं रखती थी वह थी ड्रॉइंग बोर्ड. इसे लागू करना फ़ैंसी हो सकता था, लेकिन माउस से नंबर बनाना बहुत व्यावहारिक नहीं है. इसके बजाय, हमने ड्रॉइंग बोर्ड लागू करने के बजाय, कीबोर्ड इंटरफ़ेस को बेहतर बनाने में ज़्यादा समय देने का फ़ैसला किया.

HTML5 सुविधाएं

MathBoard के वेब वर्शन में, हम कई HTML5 सुविधाओं का इस्तेमाल करते हैं:

स्थानीय मेमोरी

MathBoard, उपयोगकर्ताओं को क्विज़ सेव करने की सुविधा देता है, ताकि वे बाद में उन्हें फिर से चला सकें. HTML5 MathBoard SnowUI डीएओ इंटरफ़ेस का इस्तेमाल करके, HTML5 localStorage का इस्तेमाल करके इस सुविधा को लागू करता है.

localStorage एक स्वाभाविक विकल्प था, क्योंकि डेटा काफ़ी आसान था और इसके लिए बेहतर इंडेक्स की ज़रूरत नहीं होती. हम सभी क्विज़ को एक ही JSON फ़ॉर्मैट में सेव करते हैं, जिसे हम टेक्स्ट के तौर पर JSON.stringify करते हैं.

SnowUI डीएओ एक आसान CRUD इंटरफ़ेस रैपर है. इसकी मदद से, यूज़र इंटरफ़ेस (यूआई) को डेटा फ़ेच करने की सुविधा मिलती है. साथ ही, आपको इस बात की चिंता नहीं करनी पड़ती कि डेटा असल में कैसे सेव होता है. डीएओ लागू करने से स्टोरेज की सभी ज़रूरतें पूरी होती हैं.

MathBoard में स्टोरेज की ज़रूरतें बहुत आसान थीं. हमें सिर्फ़ उपयोगकर्ता सेटिंग और क्विज़ का डेटा सेव करना था. localStorage में दोनों को, जहां JSON स्ट्रिंग के तौर पर सेव किया जाता है.

उदाहरण के लिए, सेटिंग वैल्यू के लिए डीएओ इस तरह दिखता है:

snow.dm.registerDao('settingValue', (function() {

  var _settingValues = null;

  function SettingValueDao() {};

  // ------ DAO CRUD Interface ------ //
  // get
  SettingValueDao.prototype.get = function(objectType, id) {
    return $.extend({},getSettingValues()[id]);
  };

  // find, remove

  // save
  SettingValueDao.prototype.save = function(objectType, data) {
    var storeValue = getSettingValues('settingValue')[data.id];
    if (!storeValue) {
      storeValue = {};
      getSettingValues()[data.id] = storeValue;
    }

    $.extend(storeValue, data);
    saveSettingValues();
  };
  // ------ /DAO CRUD Interface ------ //

  function getSettingValues() {
    if (_settingValues == null) {
      var settingValuesString = localStorage.getItem('settingValues');
      if (settingValuesString) {
        _settingValues = JSON.parse(settingValuesString);
      } else{
        _settingValues = {};
      }
    }

    return _settingValues;
  }

  function saveSettingValues(){
    var settingValues = getSettingValues();
    if (settingValues != null) {
      localStorage.removeItem('settingValues');
      localStorage.setItem('settingValues', JSON.stringify(settingValues)); 
    }
  }

  return new SettingValueDao();
})());

settingValue के लिए यह डीएओ रजिस्टर हो जाने के बाद, यूज़र इंटरफ़ेस (यूआई), स्टोर लॉजिक की चिंता किए बिना यह कॉल कर सकता है:

var addition = snow.dm.get('settingValue', 'operator_addition');
addition.value = true; // to check the addition checkbox
snow.dm.save('settingValue', addition);

CSS3 फ़ॉन्ट

MathBoard, पसंद के मुताबिक फ़ॉन्ट इस्तेमाल करता है. CSS3 फ़ॉन्ट के साथ काम करने के लिए धन्यवाद, हमारे ऐप्लिकेशन में 'Chalkduster' रीयल टाइप फ़ॉन्ट शामिल करना आसान था:

@font-face {
  font-family: Chalkduster;
  src: url(Chalkduster.ttf);
}

ऐप्लिकेशन में मौजूद ज़्यादातर टेक्स्ट के लिए, यह फ़ॉन्ट डिफ़ॉल्ट तौर पर इस्तेमाल होता था. इसलिए, हमने इसे मुख्य हिस्से के लिए डिफ़ॉल्ट फ़ॉन्ट बना दिया.

body {
  background: #333333;
  font-family: Chalkduster;
  color: #ffffff;
}

CSS3 ग्रेडिएंट, शैडो, गोल कोने

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

स्क्रोलबार के लुक और स्टाइल को और बेहतर बनाने के लिए, हमने बेहतर CSS3 प्रॉपर्टी का भी इस्तेमाल किया है. WebKit ब्राउज़र पर स्क्रोल बार की स्टाइल बदलने के लिए, http://webkit.org/blog/363/styling-scrollbars/ देखें.

CSS3 ट्रांज़िशन

HTML5 MathBoard के लिए, हमने iPad के सभी ऐनिमेशन को कॉपी किया है और स्लाइड करने वाले दाएं पैनल के लिए एक नया ऐनिमेशन भी जोड़ा है. CSS3 ट्रांज़िशन की वजह से, ऐनिमेशन जोड़ना आसान था और इससे बेहतरीन परफ़ॉर्मेंस मिलती थी.

हमारे ऐप्लिकेशन में तीन मुख्य ऐनिमेशन थे.

1.) स्लाइड करने वाला राइट पैनल

पहला ऐनिमेशन दाएं पैनल (#rightPane) में है, जो कि जब उपयोगकर्ता कोई नया क्विज़ शुरू करता है और क्विज़ खत्म होने पर स्लाइड खुलती है, तब यह स्लाइड बंद हो जाती है. इस इफ़ेक्ट को बनाने के लिए, हमने नीचे दिए गए सीएसएस ट्रांज़िशन का इस्तेमाल किया और इसे JavaScript के ज़रिए ट्रिगर किया. राइटपेन का डिफ़ॉल्ट स्टाइल 'खुला है' के तौर पर सेट है:

#rightPane {
  /* look and feel, and layout property */
  position: absolute;
  width: 370px;
  height: 598px;
  top: 28px;
  left: 720px; /* open */
  -webkit-transition: all .6s ease-in-out;
}

जब कोई उपयोगकर्ता क्विज़ शुरू करता है, तो हमारा JavaScript लॉजिक पैनल को मूव करता है:

var $rightPane = $('#rightPane');
var left = $rightPane.position().left - 400;
setTimeout(function() {
  $rightPane.css('left', left + 'px');
}, 0);

इस सुविधा को लागू करने के बारे में ध्यान रखने वाली कुछ बातें:

1. यह देखते हुए कि ऐप्लिकेशन के साइज़ तय होते हैं, हम सीएसएस क्लास '.close' का इस्तेमाल कर सकते हैं और क्लोज़ पोज़िशन को हार्डकोड कर सकते हैं. यह ठीक उसी तरह होता है जिस तरह ऐप्लिकेशन के साइज़ को हार्डकोड किया जाता है.
2. हम सीएसएस 'अनुवाद' का भी इस्तेमाल कर सकते थे, जो पैनल की 'बायां' प्रॉपर्टी को ऐनिमेट करने से ज़्यादा बेहतर होता. यह खास तौर पर मोबाइल डिवाइसों (जैसे कि iOS) के लिए सही है, जहां 3D ट्रांसफ़ॉर्मेशन को हार्डवेयर की मदद से तेज़ी से बदला जाता है.
3. इस मामले में setTimeout की सख्त ज़रूरत नहीं है, क्योंकि बदलाव से पहले मूल जगह सेट कर दी गई थी. हालांकि, इसकी मदद से ब्राउज़र, राइटपेन को राइटपेन में स्लाइड करने से ठीक पहले क्विज़ दिखाकर ऐनिमेशन को बेहतर बना देता है.

2.) सेटिंग डायलॉग बॉक्स ऐनिमेशन

जब उपयोगकर्ता दाईं ओर किसी सेटिंग पर क्लिक करता है, तो स्क्रीन पर सबसे नीचे से सेटिंग डायलॉग दिखता है और स्क्रोल करके उचित सेक्शन में जाता है.

ऐसा करने के लिए, हमने दाएं पैनल पर भी इसी तरह का ट्रांज़िशन किया था. बस थोड़ा ही समय लगा. यह डायलॉग बॉक्स पहली बार दिखने में इस समस्या को दूर करना था. ब्राउज़र को डायलॉग यूज़र इंटरफ़ेस (यूआई) कैश मेमोरी में सेव करने का निर्देश देने के लिए, हमने उसे एक बार दिखाया और उस पर स्क्रोल किया. सबसे पहले, हमने display: none के साथ कोशिश की. यह तरीका गलत था, क्योंकि ब्राउज़र को लगता था कि डायलॉग दिखाना ज़रूरी नहीं है. इसका समाधान यह था कि शुरू करने के समय सेटिंग को z-index: -1 के साथ दिखाया जाए, ताकि यह उपयोगकर्ता को न दिखे, लेकिन ब्राउज़र में दिखे.

3.) क्विज़ मिल गया या गलत मैसेज का ऐनिमेशन

तीसरा ऐनिमेशन, असल में दो-एक ऐनिमेशन है. जब 'सफलता' या 'गलत' मैसेज दिखता है, तो सबसे पहले एक पॉइंट तक स्केल करें, थोड़ी देर इंतज़ार करें और आखिर में, स्केल को और भी बड़ा और गायब करें. इसके लिए, हमारे पास CSS3 की दो ऐनिमेशन स्टाइल हैं. और इसे JavaScript के ज़रिए webkitTransitionEnd इवेंट पर व्यवस्थित किया जाता है.

.quiz-result > div.anim1 {
  opacity: 0.8;
  -webkit-transform: scale(6,6);
}
.quiz-result > div.anim2{
  opacity: 0;
  -webkit-transform: scale(9,9);
}

setTimeout(function() {
  $msg.addClass("anim1");
  $msg.bind("webkitTransitionEnd", function(){
    if ($msg.hasClass("anim1")) {
      setTimeout(function() {
        $msg.removeClass("anim1");
        $msg.addClass("anim2");
      }, 300);
    } else {
      $msg.remove();
      displayNextItem();
      freezeInput = false;
    }
  });
}, 0);

ऑडियो टैग

जब उपयोगकर्ता किसी क्विज़ का जवाब देते हैं, तो ऐप्लिकेशन कामयाब या फ़ेल हो जाता है. सबसे आसान विकल्प, ऑडियो टैग का इस्तेमाल करना और उन पर play() को कॉल करना था. इन ऑडियो बिट को ऐप्लिकेशन के मुख्य पेज पर जोड़ा जाता है:

<audio id="audioCorrect" src="correct.mp3" preload="auto" autobuffer></audio>
<audio id="audioWrong" src="wrong.mp3" preload="auto" autobuffer></audio>

नतीजा

HTML5 सही मायनों में वेब, डेस्कटॉप, और मोबाइल ऐप्लिकेशन की नई किस्म को चालू कर रहा है. CSS3, iPad के लिए MathBoard के उच्च परिष्कार के साथ सटीक रूप से मिलान करने के लिए, ऐप्लिकेशन के रंग-रूप को कस्टमाइज़ करने में सहायक था, हमारे डेटा के बने रहने के लिए, HTML5 स्टोरेज सही फ़िट था और HTML5 ऑडियो की सादगी की वजह से, हमें iPad ऐप्लिकेशन को बारीकी से कॉपी करने में मदद मिली.