কেস স্টাডি - HTML5 ম্যাথবোর্ড

Jeremy Chone

ভূমিকা

iPad-এ MathBoard , একটি PalaSoftware অ্যাপ্লিকেশন, অনেক সূক্ষ্ম কিন্তু প্রাকৃতিক অ্যানিমেশন এবং একটি অনন্য বাস্তবসম্মত চেহারা এবং অনুভূতি সহ একটি অত্যন্ত পালিশ অ্যাপ্লিকেশন। লক্ষ্য ছিল আইপ্যাড অ্যাপ্লিকেশনের সর্বোচ্চ বিশ্বস্ততা পোর্ট HTML5 এ করা।

N2N-Apps হল একটি সফ্টওয়্যার ডেভেলপমেন্ট কোম্পানী যা HTML5 প্রযুক্তির সাথে পরবর্তী প্রজন্মের ওয়েব এবং মোবাইল অ্যাপ্লিকেশন তৈরিতে মনোযোগ দেয়। কোম্পানিটিকে 2010 সালে জেরেমি চোন দ্বারা অর্থায়ন করা হয়েছিল, যিনি Netscape, Oracle এবং Adobe থেকে 11 বছরের প্রকৌশল এবং পরিচালনার অভিজ্ঞতার পরে, উচ্চ-মানের ওয়েব এবং মোবাইল অ্যাপ্লিকেশন তৈরি করতে ব্যবসার সাথে তার দক্ষতা ভাগ করার সিদ্ধান্ত নিয়েছিলেন। N2N-অ্যাপস প্রসবের গুণমান এবং গতির উপর দৃষ্টি নিবদ্ধ করে।

ক্রোম ওয়েব স্টোরের জন্য ম্যাথবোর্ড ডাউনলোড করুন ক্রোম ওয়েব স্টোরের জন্য ম্যাথবোর্ড ডাউনলোড করুন (ফ্রি সংস্করণ)

প্রয়োজনীয়তা

এই HTML5 পোর্টিং প্রকল্পের মূল প্রয়োজনীয়তাগুলি নিম্নরূপ ছিল:

1. আসল আইপ্যাড অ্যাপ্লিকেশনের চেহারা এবং অনুভূতি এবং ব্যবহারকারী ইন্টারফেসের উচ্চ বিশ্বস্ততা পোর্ট।
2. টার্গেট ফর্ম ফ্যাক্টরের সাথে খাপ খাইয়ে নিন (যেমন কিবোর্ড/মাউস বনাম টাচ স্ক্রীন সহ পিসি/ম্যাক)।
3. প্রযোজ্য বৈশিষ্ট্যগুলির 100% প্রয়োগ করুন।
4. লক্ষ্য করুন প্রধানত HTML5 ব্রাউজার।
5. অ্যাপ্লিকেশনটিকে "সার্ভার-হীন" করুন যাতে অ্যাপ্লিকেশনটি সম্পূর্ণরূপে ক্লায়েন্টে চলে এবং একটি স্ট্যাটিক সার্ভার বা Google Chrome প্যাকেজযুক্ত অ্যাপ্লিকেশনে হোস্ট করা যায়৷
6. সমস্ত বৈশিষ্ট্য সহ একটি 1.0 সংস্করণ তৈরি করুন তবে এক মাসেরও কম সময়ের মধ্যে সমস্যা সমাধানকারী৷

স্থাপত্য

প্রয়োজনীয়তার পরিপ্রেক্ষিতে, আমরা নিম্নলিখিত আর্কিটেকচারের সাথে যাওয়ার সিদ্ধান্ত নিয়েছি:

1. HTML5: যেহেতু আমাদের কোনো HTML4 সমর্থনের প্রয়োজনীয়তা নেই, তাই আমরা HTML5-কে ভিত্তি হিসেবে নিয়ে যাওয়ার সিদ্ধান্ত নিয়েছি।
2. jQuery: যদিও HTML5-এ অনেক উন্নত নির্বাচক রয়েছে যা jQueryকে এত দুর্দান্ত করে তোলে, আমরা যেকোনও উপায়ে jQuery এর সাথে লেগে থাকার সিদ্ধান্ত নিয়েছি কারণ এটি আমাদের DOM এবং সম্পর্কিত ইভেন্টগুলি পরিচালনা করার জন্য একটি খুব শক্তিশালী এবং পরিপক্ক উপায় দিয়েছে৷ jQuery-এর আরও বেশি DOM কেন্দ্রিক হওয়ার সুবিধা রয়েছে, যা একটি অ্যাপ্লিকেশনের নকশা এবং বাস্তবায়নকে HTML-এর কাছাকাছি করে তোলে।
3. SnowUI : jQuery একটি দুর্দান্ত API এবং DOM-এর সাথে কাজ করার জন্য সর্বোত্তম অনুশীলন প্রদান করে, তবে, HTML5 MathBoard অ্যাপ্লিকেশনটির জন্য আমাদের একটি MVC বা MVP শৈলীর কাঠামোর প্রয়োজন ছিল যাতে বিভিন্ন দৃষ্টিভঙ্গি অর্কেস্ট্রেট করা যায়। SnowUI হল jQuery-এর উপরে একটি সহজ কিন্তু শক্তিশালী MVC ফ্রেমওয়ার্ক। এটি একটি DOM কেন্দ্রিক MVC মেকানিজম এবং কাস্টম উপাদান তৈরি করার একটি নমনীয় উপায় প্রদান করে যখন অ্যাপ্লিকেশন বিকাশকারীর জন্য যেকোন উইজেট/কন্ট্রোল লাইব্রেরি বা কাস্টম কোড ব্যবহার করার সুযোগ রেখে দেয় যা সে বা সে সর্বোত্তম বলে মনে করে।

আইপ্যাড টু পিসি বিবেচনা

পিসি ব্যবহারের জন্য অ্যাপ্লিকেশনটিকে HTML5 এ পোর্ট করার সময়, আমাদের অ্যাপ্লিকেশনটির নকশা এবং ব্যবহারকারী-মিথস্ক্রিয়াতে বেশ কিছু পরিবর্তন করতে হয়েছিল।

স্ক্রীন অভিযোজন

আইপ্যাড ম্যাথবোর্ড একচেটিয়াভাবে উল্লম্বভাবে ভিত্তিক, যা পিসি ডিসপ্লের জন্য সর্বোত্তম ছিল না কারণ সেগুলি সাধারণত অনুভূমিক ফ্যাশনে ব্যবহৃত হয়। ফলস্বরূপ, আমরা UI ডিজাইনটি পুনর্গঠিত করেছি এবং সেটিংস প্যানেলটিকে একটি স্লাইডিং ভিউতে (CSS3 ট্রানজিশন দ্বারা অ্যানিমেটেড) ডানদিকে সরিয়ে নিয়েছি।

ইনপুট: কীবোর্ড/মাউস বনাম স্পর্শ

আইপ্যাড এবং ওয়েব সংস্করণের মধ্যে আরেকটি মূল পার্থক্য হল ইনপুট ইন্টারফেস। আইপ্যাডে আপনার শুধুমাত্র টাচ ইন্টারফেস আছে, পিসিতে আপনাকে মাউস এবং কীবোর্ড উভয়ই বিবেচনা করতে হবে।

আইপ্যাডে ম্যাথবোর্ড ইনপুট নিয়ন্ত্রণগুলি অত্যন্ত পালিশ করা হয়। আমরা ওয়েব ইন্টারফেসে একই উচ্চ বিশ্বস্ত প্রতিনিধিত্ব চেয়েছিলাম। সমাধানটি ছিল কীবোর্ড শর্টকাটগুলির জন্য সমর্থন যোগ করা এবং CSS পজিশনিং ব্যবহার করে UI নিয়ন্ত্রণগুলি প্রতিলিপি করা। HTML5 এর পোর্টটি পিক্সেল নিখুঁত ছিল:

আইপ্যাড ইন্টারফেসের মতো, আমরা ব্যবহারকারীকে নিয়ন্ত্রণের মান পরিবর্তন করতে বাম এবং ডান তীরটিতে ক্লিক করার অনুমতি দিই। দ্রুত মান পরিবর্তন করতে উল্লম্ব রেখাটিও টেনে আনা যেতে পারে। click এবং keydown জন্য একটি পুনরাবৃত্তি আচরণ প্রয়োগ করা হয়েছিল যাতে ব্যবহারকারীরা মাউস বা কীবোর্ড চাপলে মান পরিবর্তনকে ত্বরান্বিত করতে পারে।

একটি ইনপুট ক্ষেত্র থেকে অন্য ইনপুট ফিল্ডে যাওয়ার জন্য TAB সমর্থন যোগ করা হয়েছে এবং মানগুলির মাধ্যমে ← এবং → তীর চক্র।

আইপ্যাড সংস্করণে একটি বৈশিষ্ট্য যা পিসি ইন্টারফেসের জন্য খুব বেশি অর্থপূর্ণ ছিল না তা হল অঙ্কন বোর্ড। যদিও এটি বাস্তবায়ন করা অভিনব হতে পারে, মাউস দিয়ে সংখ্যা অঙ্কন করা খুব বেশি ব্যবহারিক নয়। পরিবর্তে, আমরা অঙ্কন বোর্ড বাস্তবায়নের চেয়ে কীবোর্ড ইন্টারফেসকে পালিশ করার জন্য আরও বেশি সময় ব্যয় করার সিদ্ধান্ত নিয়েছি।

HTML5 বৈশিষ্ট্য

MathBoard এর ওয়েব সংস্করণে, আমরা অনেক HTML5 বৈশিষ্ট্য ব্যবহার করি:

স্থানীয় স্টোরেজ

MathBoard ব্যবহারকারীদের তাদের ক্যুইজ সংরক্ষণ করার অনুমতি দেয় যাতে তারা পরে পুনরায় চালাতে পারে। HTML5 MathBoard SnowUI DAO ইন্টারফেস ব্যবহার করে HTML5 localStorage ব্যবহার করে এই বৈশিষ্ট্যটি প্রয়োগ করে।

localStorage একটি স্বাভাবিক পছন্দ ছিল যেহেতু ডেটা যথেষ্ট সহজ ছিল এবং উন্নত সূচীকরণের প্রয়োজন ছিল না। আমরা সমস্ত কুইজ একটি JSON ফরম্যাটে সংরক্ষণ করি যা আমরা পাঠ্য হিসাবে JSON.stringify ।

snowUI DAO হল একটি সাধারণ CRUD ইন্টারফেস র‍্যাপার যা UI কে এটি আসলে কীভাবে সংরক্ষণ করা হয় সে সম্পর্কে চিন্তা না করেই ডেটা আনতে দেয়৷ DAO বাস্তবায়ন স্টোরেজ বিবরণের যত্ন নেয়।

MathBoard-এ, স্টোরেজ প্রয়োজনীয়তা খুব সহজ ছিল। আমাদের শুধুমাত্র ব্যবহারকারীর সেটিংস এবং কুইজ ডেটা সংরক্ষণ করতে হবে। উভয়ই localStorage JSON স্ট্রিং হিসাবে সংরক্ষণ করা হয়েছে।

সুতরাং, উদাহরণস্বরূপ, সেটিং মানের জন্য DAO দেখতে এইরকম:

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();
})());

একবার এই DAO settingValue এর জন্য নিবন্ধিত হয়ে গেলে, স্টোরের যুক্তি নিয়ে চিন্তা না করেই UI নিম্নলিখিত কল করতে পারে:

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

CSS3 ফন্ট

MathBoard কাস্টম ফন্ট ব্যবহার করে। CSS3 ফন্ট সমর্থনের জন্য ধন্যবাদ, আমাদের অ্যাপ্লিকেশনে 'চাকডাস্টার' ট্রু টাইপ ফন্ট অন্তর্ভুক্ত করা তুচ্ছ ছিল:

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

এবং, যেহেতু এই ফন্টটি অ্যাপ্লিকেশনের প্রায় সমস্ত পাঠ্যের জন্য ডিফল্ট ছিল, তাই আমরা এটিকে বডির জন্য ডিফল্ট করেছি।

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

CSS3 গ্রেডিয়েন্ট, ছায়া, গোলাকার কোণ

সমস্ত গ্রেডিয়েন্ট, ছায়া, স্বচ্ছতা এবং বৃত্তাকার কোণগুলি CSS3 দিয়ে করা হয়। ইউজার ইন্টারফেস করার প্রথাগত .png পদ্ধতির তুলনায় এটি একটি বাস্তব গেম সেভার ছিল।

স্ক্রলবারের চেহারা এবং অনুভূতিকে আরও সূক্ষ্ম করে তুলতে আমরা উন্নত CSS3 বৈশিষ্ট্যগুলিও ব্যবহার করেছি (ওয়েবকিট ব্রাউজারগুলিতে স্ক্রোল বারগুলিকে স্টাইলিং করার জন্য http://webkit.org/blog/363/styling-scrollbars/ দেখুন)৷

CSS3 রূপান্তর

HTML5 MathBoard-এর জন্য, আমরা iPad এর সমস্ত অ্যানিমেশন প্রতিলিপি করেছি এবং এমনকি স্লাইডিং ডান প্যানেলের জন্য একটি নতুন যোগ করেছি। CSS3 ট্রানজিশনের জন্য ধন্যবাদ, অ্যানিমেশন যোগ করা ছিল তুচ্ছ এবং সেরা পারফরম্যান্সের জন্য অনুমোদিত।

আমাদের অ্যাপ্লিকেশনগুলিতে তিনটি প্রধান অ্যানিমেশন ছিল।

1.) স্লাইডিং ডান ফলক

প্রথম অ্যানিমেশনটি ডান ফলকে ( #rightPane ), যেটি স্লাইড বন্ধ হয়ে যায় যখন ব্যবহারকারী একটি নতুন কুইজ শুরু করেন এবং স্লাইড খোলা হয় যখন ব্যবহারকারী একটি কুইজ শেষ করেন। এই প্রভাব তৈরি করতে, আমরা নিম্নলিখিত CSS রূপান্তর ব্যবহার করেছি এবং জাভাস্ক্রিপ্টের মাধ্যমে এটি ট্রিগার করেছি। ডানপ্যানের ডিফল্ট শৈলী খোলা আছে:

#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;
}

যখন ব্যবহারকারী একটি কুইজ শুরু করেন, তখন আমাদের জাভাস্ক্রিপ্ট লজিক প্যানেলটিকে সরিয়ে দেয়:

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

এই বাস্তবায়নে কয়েকটি নোট:

1. প্রদত্ত যে অ্যাপ্লিকেশনের আকারগুলি স্থির করা হয়েছে, আমরা একটি CSS ক্লাস '.close' ব্যবহার করতে পারতাম এবং ক্লোজ পজিশনটিকে হার্ডকোড করতে পারতাম যেভাবে আমরা খোলাটিকে হার্ডকোড করি।
2. আমরা CSS 'অনুবাদ'ও ব্যবহার করতে পারতাম, যা ফলকের 'বাম' সম্পত্তি অ্যানিমেট করার চেয়ে বেশি পারফরম্যান্স করত। এটি বিশেষ করে মোবাইল ডিভাইসগুলির জন্য সত্য (যেমন iOS) যেখানে 3D রূপান্তরগুলি হার্ডওয়্যার ত্বরান্বিত হয়।
3. এই ক্ষেত্রে setTimeout কঠোরভাবে প্রয়োজনীয় নয় যেহেতু মূল অবস্থানটি পরিবর্তনের আগে সেট করা হয়েছিল। যাইহোক, এটি ব্রাউজারকে রাইটপেনে স্লাইড করার ঠিক আগে কুইজ প্রদর্শন করে অ্যানিমেশনটিকে মসৃণ করতে দেয়।

2.) সেটিংস ডায়ালগ বক্স অ্যানিমেশন

যখন ব্যবহারকারী ডানদিকে একটি সেটিংসে ক্লিক করেন, তখন সেটিংস ডায়ালগটি স্ক্রিনের নিচ থেকে প্রদর্শিত হয় এবং যথাযথ বিভাগে স্ক্রোল করে।

এটি সম্পন্ন করার জন্য, আমাদের ডান ফলকে একটি অনুরূপ রূপান্তর ছিল। সংলাপের প্রথম উপস্থিতিতে ঝাঁকুনি সমাধান করতে কিছু সময় লেগেছিল একমাত্র জিনিস। ডায়ালগ UI ক্যাশে করার জন্য ব্রাউজারকে নির্দেশ দিতে, আমরা এটি একবার প্রদর্শন করে এটিতে স্ক্রোল করে শেষ করেছি। প্রথমে, আমরা display: none । এই পদ্ধতিটি ভুল ছিল কারণ ব্রাউজার ধরে নিয়েছে ডায়ালগ দেখানোর প্রয়োজন নেই৷ সমাধানটি ছিল একটি z-index: -1 প্রারম্ভে, এটি ব্যবহারকারীর কাছে অদৃশ্য কিন্তু ব্রাউজারে দৃশ্যমান করে তোলে।

3.) কুইজ সাফল্য বা ভুল বার্তা অ্যানিমেশন

তৃতীয় অ্যানিমেশন আসলে টু ইন ওয়ান। যখন 'সাফল্য' বা 'ভুল' বার্তাটি উপস্থিত হয়, প্রথমে একটি বিন্দুতে স্কেল করুন, একটু অপেক্ষা করুন এবং অবশেষে আরও বড় স্কেল করুন এবং অদৃশ্য হয়ে যান। এর জন্য, আমাদের কাছে দুটি CSS3 অ্যানিমেশন শৈলী রয়েছে এবং এটি জাভাস্ক্রিপ্টের মাধ্যমে একটি 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 সহায়ক ছিল, HTML5 সঞ্চয়স্থান ছিল আমাদের ডেটা অধ্যবসায়ের জন্য উপযুক্ত উপযুক্ত, এবং HTML5 অডিওর সরলতা আমাদেরকে আইপ্যাড অ্যাপটিকে ঘনিষ্ঠভাবে প্রতিলিপি করার অনুমতি দিয়েছে।