دراسة حالة - HTML5 MathBoard

Jeremy Chone

مقدمة

يعد MathBoard على iPad، وهو تطبيق من تطبيقات PalaSoftware، تطبيقًا مصقولاً للغاية يحتوي على العديد من الرسوم المتحركة الخفية التي تبدو طبيعية وفريدة من نوعها. كان الهدف هو القيام بالمنفذ عالي الدقة لتطبيق iPad إلى HTML5.

N2N-Apps هي شركة لتطوير البرامج تركّز على إنشاء الجيل التالي من تطبيقات الويب والتطبيقات للأجهزة الجوّالة باستخدام تكنولوجيا HTML5. تم تمويل الشركة في عام 2010 من قبل جيريمي تشوني الذي قرر مشاركة خبرته مع الشركات لإنشاء تطبيقات ويب وجوال عالية الجودة، وذلك بعد 11 عامًا من الخبرة في مجال الهندسة والإدارة لدى Netscape وOracle وAdobe. تركز N2N-Apps على جودة وسرعة التسليم.

تنزيل MathBoard لسوق Chrome الإلكتروني تنزيل MathBoard لسوق Chrome الإلكتروني (إصدار مجاني)

المتطلّبات

في ما يلي المتطلبات الأساسية لمشروع نقل HTML5 هذا:

1. منفذ عالي الدقة لشكل وأسلوب تطبيق iPad الأصلي وواجهة المستخدم
2. ننصحك بالتكيّف مع شكل الجهاز المستهدَف (أي أجهزة الكمبيوتر الشخصي/أجهزة Mac المزوّدة بلوحة مفاتيح/ماوس في مقابل شاشة تعمل باللمس).
3. تنفيذ جميع الميزات السارية.
4. استهداف متصفحات HTML5 بشكل أساسي.
5. يمكنك جعل التطبيق "بدون خادم" بحيث يتم تشغيل التطبيق بالكامل على العميل ويمكن استضافته على خادم ثابت أو تطبيق حزمة Google Chrome.
6. عليك إنشاء إصدار 1.0 يتضمّن جميع الميزات مع إمكانية حلّ المشاكل في أقل من شهر.

هندسة معمارية

وبالنظر إلى المتطلبات، قررنا استخدام البنية التالية:

1. HTML5: نظرًا لعدم وجود أي متطلبات لدعم HTML4، قررنا استخدام HTML5 كقاعدة.
2. jQuery: على الرغم من احتواء HTML5 على العديد من أدوات الاختيار المتقدمة التي تجعل jQuery رائعًا للغاية، قررنا التمسك باستخدام jQuery على أي حال لأنه منحنا طريقة قوية ومتطورة للغاية لمعالجة DOM والأحداث ذات الصلة. وعلاوةً على ذلك، يستفيد jQuery من تركيزه على DOM، وهو ما يجعل تصميم التطبيق وتنفيذه أقرب إلى HTML.
3. SnowUI: يوفر jQuery واجهة برمجة تطبيقات رائعة وأفضل ممارسة للعمل مع DOM. ومع ذلك، نحتاج إلى إطار عمل نمط MVC أو MVP مع تطبيق HTML5 MathBoard لتنسيق كل طرق العرض المختلفة. SnowUI هو إطار عمل MVC بسيط ولكنه قوي على رأس jQuery. ويوفّر هذا الإصدار آلية MVC ترتكز على نموذج العناصر في المستند (DOM) وطريقة مرنة لإنشاء مكوّنات مخصَّصة مع إتاحة الفرصة لمطوّر التطبيق لاستخدام أي مكتبة أدوات/عناصر تحكُّم أو رموز مخصَّصة يعتبرها مثالية.

نقاط يجب أخذها في الاعتبار من iPad إلى الكمبيوتر الشخصي

عند نقل التطبيق إلى HTML5 لاستخدام الكمبيوتر الشخصي، كان علينا إجراء عدة تعديلات على تصميم التطبيق وتفاعل المستخدم.

اتجاه الشاشة

كانت لوحة MathBoard توجه عموديًا حصريًا، وهي ليست مثالية لشاشات الكمبيوتر الشخصي لأنها تُستخدم بشكل عام بطريقة أفقية. وبالتالي، أعدنا تنظيم تصميم واجهة المستخدم ونقلنا لوحة الإعدادات إلى الجانب الأيمن، من خلال عرض منزلق (متحرك باستخدام انتقالات CSS3).

الإدخال: لوحة المفاتيح/الماوس مقابل اللمس

آخر اختلاف رئيسي بين iPad وإصدار الويب هو واجهة الإدخال. على جهاز iPad، لديك واجهة تعمل باللمس فقط، وعلى الكمبيوتر الشخصي، يجب مراعاة كلاً من الماوس ولوحة المفاتيح.

عناصر تحكم إدخال MathBoard على iPad مصقولة للغاية. أردنا نفس التمثيل عالي الدقة في واجهة الويب. كان الحل هو إضافة دعم لاختصارات لوحة المفاتيح وتكرار عناصر تحكم واجهة المستخدم باستخدام تحديد موضع CSS. كان المنفذ إلى HTML5 بكسل مثالي:

وكما هي الحال في واجهة iPad، نسمح للمستخدم بالنقر على السهم المتّجه لليسار واليمين لتغيير قيمة عنصر تحكّم. يمكن أيضًا سحب الخط الرأسي لتغيير القيم بسرعة. تم تنفيذ سلوك متكرّر لكل من click وkeydown حتى يتمكّن المستخدمون من تسريع تغيير القيمة عند الضغط على الماوس أو لوحة المفاتيح.

تمت إضافة إمكانية استخدام TAB للانتقال من حقل إدخال إلى آخر بينما يدور السهمان ← و← بين القيم.

إحدى الميزات في إصدار iPad التي لم يكن لها معنى كبير لواجهة الكمبيوتر الشخصي كانت لوحة الرسم. على الرغم من أنه كان من الممكن أن يكون تنفيذه أمرًا رائعًا، إلا أن رسم الأرقام باستخدام الماوس ليس عمليًا للغاية. بدلاً من ذلك، قررنا قضاء وقت أطول في صقل واجهة لوحة المفاتيح بدلاً من تنفيذ لوحة الرسم.

ميزات HTML5

في إصدار الويب من MathBoard، نستخدم العديد من ميزات HTML5:

التخزين المحلي

تتيح MathBoard للمستخدمين حفظ اختبارهم لإعادة تشغيله لاحقًا. ينفِّذ HTML5 MathBoard هذه الميزة باستخدام HTML5 localStorage باستخدام واجهة SnowUI DAO.

كان localStorage خيارًا طبيعيًا، لأنّ البيانات كانت بسيطة بما يكفي ولا تتطلب فهرسة متقدّمة. نخزّن جميع الاختبارات بتنسيق JSON واحد JSON.stringify كنص.

SnowUI DAO هو برنامج تضمين بسيط لواجهة CRUD يسمح لواجهة المستخدم بجلب البيانات بدون الحاجة إلى القلق بشأن كيفية تخزينها فعليًا. يهتم تنفيذ DAO بتفاصيل التخزين.

في MathBoard، كانت متطلبات التخزين بسيطة للغاية. كنا بحاجة إلى تخزين إعدادات المستخدم وبيانات الاختبار فقط. تم تخزين كلاهما كسلاسل JSON في localStorage.

لذلك، على سبيل المثال، بدا مقياس 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، يمكن لواجهة المستخدم إجراء الاستدعاء التالي بدون الحاجة إلى القلق بشأن منطق المتجر:

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 المتقدمة لتخصيص مظهر شريط التمرير ومظهره لجعله أكثر دقة (يمكنك الاطّلاع على http://webkit.org/blog/363/styling-scrollbars/، لمعرفة نمط أشرطة التمرير على متصفّحات WebKit).

عمليات نقل CSS3

بالنسبة إلى HTML5 MathBoard، قمنا بنسخ جميع الرسوم المتحركة في iPad وأضفنا كذلك واحدة جديدة للوحة التمرير اليمنى. بفضل انتقالات CSS3، كانت إضافة الرسوم المتحركة بسيطة وسمحت بتحقيق أفضل أداء.

كان لدينا ثلاثة رسوم متحركة رئيسية في التطبيقات.

1.) الجزء الانزلاقي الأيمن

تتوفّر الصورة المتحركة الأولى في الجزء الأيسر (#rightPane)، وهي الشرائح التي يتم إغلاقها عندما يبدأ المستخدم اختبارًا جديدًا وتفتح الشرائح عندما ينهي المستخدم اختبارًا. لإنشاء هذا التأثير، استخدمنا عملية الانتقال من CSS التالية وتم تشغيلها عبر 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);

في ما يلي بعض الملاحظات حول عملية التنفيذ هذه:

1. بما أن أحجام التطبيقات ثابتة، كان بإمكاننا استخدام فئة CSS ".CLOSE" والترميز الثابت لموضع الإغلاق بالطريقة نفسها التي نطبق بها الترميز الثابت المفتوح.
2. كان بإمكاننا أيضًا استخدام لغة CSS "ترجمة" التي كان أداؤها أكثر من تحريك خاصية "يسار" في الجزء. وهذا ينطبق بشكل خاص على الأجهزة المحمولة (مثل iOS) حيث يتم تسريع التحويلات ثلاثية الأبعاد باستخدام الأجهزة.
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 مفيدًا في تخصيص شكل ومظهر التطبيق ليتوافق بشكل وثيق مع التطور العالي للوحة MathBoard لأجهزة iPad، وكان تخزين HTML5 مناسبًا تمامًا للحفاظ على البيانات لدينا، وسمحت لنا بساطة صوت HTML5 بتكرار تطبيق iPad بشكل وثيق.