परिचय

iPad पर MathBoard, PalaSoftware का एक ऐप्लिकेशन है. यह ऐप्लिकेशन बहुत ही बेहतरीन है. इसमें कई छोटे, लेकिन स्वाभाविक ऐनिमेशन और यूनीक रीयलिस्टिक लुक और फ़ील है. हमारा लक्ष्य, iPad ऐप्लिकेशन को एचटीएमएल5 में सबसे बेहतर क्वालिटी में पोर्ट करना था.
N2N-Apps एक सॉफ़्टवेयर डेवलपमेंट कंपनी है. यह HTML5 टेक्नोलॉजी की मदद से, अगली पीढ़ी के वेब और मोबाइल ऐप्लिकेशन बनाने पर फ़ोकस करती है. इस कंपनी को 2010 में जेरेमी चॉन ने फ़ंड दिया था. उन्होंने Netscape, Oracle, और Adobe में 11 साल तक इंजीनियर और मैनेजर के तौर पर काम किया. इसके बाद, उन्होंने कारोबारों के साथ अपनी विशेषज्ञता शेयर करने का फ़ैसला लिया, ताकि वे बेहतर क्वालिटी के वेब और मोबाइल ऐप्लिकेशन बना सकें. N2N-Apps, डिलीवरी की क्वालिटी और स्पीड पर फ़ोकस करता है.
Chrome Web Store के लिए MathBoard डाउनलोड करें Chrome Web Store के लिए MathBoard डाउनलोड करें (मुफ़्त वर्शन)
ज़रूरी शर्तें
इस HTML5 पोर्टिंग प्रोजेक्ट के लिए, ये ज़रूरी शर्तें थीं:
- iPad के ओरिजनल ऐप्लिकेशन के लुक और यूज़र इंटरफ़ेस को हाई फ़िडेलिटी में पोर्ट किया गया हो.
- टारगेट किए गए डिवाइस के फ़ॉर्म फ़ैक्टर के हिसाब से बदलाव करना. जैसे, कीबोर्ड/माउस के साथ पीसी/Mac बनाम टच स्क्रीन.
- लागू होने वाली सभी सुविधाओं को 100% लागू करें.
- मुख्य रूप से HTML5 ब्राउज़र को टारगेट करें.
- ऐप्लिकेशन को "सर्वर-लेस" बनाएं, ताकि ऐप्लिकेशन पूरी तरह से क्लाइंट पर चल सके और उसे स्टैटिक सर्वर या Google Chrome के पैकेज किए गए ऐप्लिकेशन पर होस्ट किया जा सके.
- एक महीने से भी कम समय में, सभी सुविधाओं के साथ 1.0 वर्शन बनाएं. हालांकि, इसमें समस्या हल करने की सुविधा शामिल न करें.
आर्किटेक्चर

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

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

iPad इंटरफ़ेस की तरह ही, हम उपयोगकर्ता को कंट्रोल की वैल्यू बदलने के लिए, बाएं और दाएं ऐरो पर क्लिक करने की अनुमति देते हैं. वैल्यू को तुरंत बदलने के लिए, वर्टिकल लाइन को खींचा और छोड़ा भी जा सकता है. click
और keydown
के लिए, दोहराए जाने वाले व्यवहार को लागू किया गया था, ताकि उपयोगकर्ता माउस या कीबोर्ड को दबाने पर, वैल्यू में तेज़ी से बदलाव कर सकें.
एक इनपुट फ़ील्ड से दूसरे में जाने के लिए, TAB बटन का इस्तेमाल किया जा सकता है. साथ ही, ← और → ऐरो का इस्तेमाल करके वैल्यू के बीच स्विच किया जा सकता है.
iPad वर्शन में ड्रॉइंग बोर्ड की सुविधा थी, जो पीसी इंटरफ़ेस के लिए काम की नहीं थी. इसे लागू करना अच्छा हो सकता था, लेकिन माउस से संख्याएं बनाना बहुत आसान नहीं है. इसके बजाय, हमने ड्रॉइंग बोर्ड को लागू करने के बजाय, कीबोर्ड इंटरफ़ेस को बेहतर बनाने पर ज़्यादा समय बिताने का फ़ैसला किया.
HTML5 की सुविधाएं
MathBoard के वेब वर्शन में, हम HTML5 की कई सुविधाओं का इस्तेमाल करते हैं:
स्थानीय मेमोरी
MathBoard की मदद से, उपयोगकर्ता अपने क्विज़ को सेव करके बाद में फिर से चला सकते हैं. HTML5 MathBoard, SnowUI DAO इंटरफ़ेस का इस्तेमाल करके, HTML5 localStorage
का इस्तेमाल करके इस सुविधा को लागू करता है.
localStorage
को इसलिए चुना गया, क्योंकि डेटा काफ़ी आसान था और उसे बेहतर इंडेक्स करने की ज़रूरत नहीं थी. हम सभी क्विज़ को एक JSON फ़ॉर्मैट में सेव करते हैं, जिसे हम टेक्स्ट के तौर पर JSON.stringify
करते हैं.
snowUI DAO, एक आसान सीआरयूडी इंटरफ़ेस रैपर है. इसकी मदद से, यूज़र इंटरफ़ेस (यूआई) को डेटा फ़ेच करने की सुविधा मिलती है. साथ ही, उसे इस बात की चिंता नहीं करनी पड़ती कि डेटा को कैसे सेव किया गया है. डीएओ लागू करने पर, स्टोरेज की जानकारी अपने-आप सेव हो जाती है.
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
के लिए इस DAO को रजिस्टर करने के बाद, स्टोर लॉजिक के बारे में चिंता किए बिना, यूज़र इंटरफ़ेस (यूआई) यह कॉल कर सकता है:
var addition = snow.dm.get('settingValue', 'operator_addition');
addition.value = true; // to check the addition checkbox
snow.dm.save('settingValue', addition);
CSS3 फ़ॉन्ट
MathBoard, कस्टम फ़ॉन्ट का इस्तेमाल करता है. सीएसएस3 फ़ॉन्ट के साथ काम करने की सुविधा की मदद से, हमारे ऐप्लिकेशन में 'Chalkduster' ट्रू टाइप फ़ॉन्ट को शामिल करना आसान हो गया:
@font-face {
font-family: Chalkduster;
src: url(Chalkduster.ttf);
}
साथ ही, यह फ़ॉन्ट ऐप्लिकेशन में मौजूद ज़्यादातर टेक्स्ट के लिए डिफ़ॉल्ट था. इसलिए, हमने इसे मुख्य हिस्से के लिए डिफ़ॉल्ट फ़ॉन्ट बना दिया.
body {
background: #333333;
font-family: Chalkduster;
color: #ffffff;
}
सीएसएस3 ग्रेडिएंट, शैडो, गोल कोने
सभी ग्रेडिएंट, शैडो, पारदर्शिता, और गोल कोने, CSS3 की मदद से बनाए जाते हैं. यूज़र इंटरफ़ेस बनाने के लिए, .png फ़ॉर्मैट का इस्तेमाल करने की तुलना में, यह तरीका काफ़ी बेहतर था.
हमने स्क्रोलबार को ज़्यादा बेहतर बनाने के लिए, सीएसएस3 की ऐडवांस प्रॉपर्टी का भी इस्तेमाल किया है. WebKit ब्राउज़र पर स्क्रोल बार की स्टाइल बनाने के लिए, http://webkit.org/blog/363/styling-scrollbars/ देखें.
CSS3 ट्रांज़िशन
HTML5 MathBoard के लिए, हमने iPad के सभी ऐनिमेशन को दोहराया है. साथ ही, स्लाइड करने वाले दाएं पैनल के लिए एक नया ऐनिमेशन भी जोड़ा है. CSS3 ट्रांज़िशन की मदद से, ऐनिमेशन जोड़ना आसान हो गया. साथ ही, इससे बेहतर परफ़ॉर्मेंस भी मिली.
हमारे ऐप्लिकेशन में तीन मुख्य ऐनिमेशन थे.
1.) दाईं ओर स्लाइड करने वाला पैनल
पहला ऐनिमेशन दाएं पैनल (#rightPane
) में होता है. जब कोई उपयोगकर्ता नया क्विज़ शुरू करता है, तो यह स्लाइड होकर बंद हो जाता है. साथ ही, जब कोई उपयोगकर्ता क्विज़ खत्म करता है, तो यह स्लाइड होकर खुल जाता है.
यह इफ़ेक्ट बनाने के लिए, हमने यहां दिए गए सीएसएस ट्रांज़िशन का इस्तेमाल किया है और इसे JavaScript के ज़रिए ट्रिगर किया है. rightPane की डिफ़ॉल्ट स्टाइल खुली है:
#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);
इस सुविधा को लागू करने के बारे में कुछ बातें:
- ऐप्लिकेशन के साइज़ तय होने की वजह से, हम सीएसएस क्लास '.close' का इस्तेमाल कर सकते थे और बंद करने की पोज़िशन को उसी तरह से हार्डकोड कर सकते थे जिस तरह से हमने खोलने की पोज़िशन को हार्डकोड किया है.
- हम सीएसएस 'translate' का भी इस्तेमाल कर सकते थे. यह पैनल की 'left' प्रॉपर्टी को ऐनिमेट करने के मुकाबले बेहतर परफ़ॉर्म करता. यह बात खास तौर पर उन मोबाइल डिवाइसों (जैसे, iOS) के लिए सही है जहां 3D ट्रांसफ़ॉर्मेशन, हार्डवेयर से तेज़ किए जाते हैं.
- इस मामले में
setTimeout
का इस्तेमाल करना ज़रूरी नहीं है, क्योंकि बदलाव करने से पहले मूल स्थिति सेट की गई थी. हालांकि, इससे ब्राउज़र को ऐनिमेशन को आसानी से चलाने में मदद मिलती है. इसके लिए, वह दाएं पैनल को स्लाइड करने से ठीक पहले क्विज़ दिखाता है.
2.) सेटिंग डायलॉग बॉक्स का ऐनिमेशन
जब उपयोगकर्ता दाईं ओर मौजूद किसी सेटिंग पर क्लिक करता है, तो सेटिंग डायलॉग स्क्रीन के सबसे नीचे दिखता है और सही सेक्शन पर स्क्रोल करता है.
ऐसा करने के लिए, हमने दाएं पैनल में भी इसी तरह का ट्रांज़िशन किया है. हालांकि, डायलॉग बॉक्स के पहली बार दिखने पर होने वाली रुकावट को ठीक करने में थोड़ा समय लगा.
ब्राउज़र को डायलॉग यूज़र इंटरफ़ेस (यूआई) को कैश मेमोरी में सेव करने का निर्देश देने के लिए, हमने इसे एक बार दिखाया और उस पर स्क्रोल किया. सबसे पहले, हमने display: none
के साथ कोशिश की.
यह तरीका गलत था, क्योंकि ब्राउज़र ने यह मान लिया था कि डायलॉग बॉक्स दिखाने की ज़रूरत नहीं है.
इसका समाधान यह था कि सेटिंग को शुरू करने पर z-index: -1
के साथ दिखाया जाए, ताकि उपयोगकर्ता को न दिखे, लेकिन ब्राउज़र को दिखे.
3.) क्विज़ में सफलता या गलत मैसेज ऐनिमेशन
तीसरा ऐनिमेशन, असल में दो में एक है. 'सफ़लता' या 'गलत' मैसेज दिखने पर, पहले उसे थोड़ा बड़ा करें और थोड़ा इंतज़ार करें. इसके बाद, उसे और बड़ा करें और फिर हटाएं. इसके लिए, हमारे पास दो सीएसएस3 ऐनिमेशन स्टाइल हैं. साथ ही, हम webkitTransitionEnd
इवेंट पर JavaScript की मदद से इसे ऑर्केस्ट्रेट करते हैं.
.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 की मदद से, वेब, डेस्कटॉप, और मोबाइल ऐप्लिकेशन को बेहतर बनाया जा रहा है. सीएसएस3 की मदद से, ऐप्लिकेशन के लुक और स्टाइल को iPad के लिए MathBoard के स्टाइल के हिसाब से बनाया गया. एचटीएमएल5 स्टोरेज, डेटा को सेव रखने के लिए सबसे सही विकल्प था. साथ ही, एचटीएमएल5 ऑडियो की मदद से, iPad ऐप्लिकेशन को हूबहू बनाया गया.