مطالعه موردی - HTML5 MathBoard

Jeremy Chone

معرفی

MathBoard در iPad ، یک برنامه PalaSoftware ، یک برنامه کاربردی بسیار شیک با بسیاری از انیمیشن های ظریف اما طبیعی و ظاهر و احساس واقعی منحصر به فرد است. هدف این بود که بالاترین پورت وفاداری برنامه iPad را به HTML5 انجام دهیم.

N2N-Apps یک شرکت توسعه نرم افزار است که بر روی ساخت نسل بعدی برنامه های وب و موبایل با فناوری HTML5 تمرکز دارد. این شرکت در سال 2010 توسط Jeremy Chone تأمین مالی شد که پس از 11 سال تجربه مهندسی و مدیریت از Netscape، Oracle و Adobe، تصمیم گرفت تخصص خود را با مشاغل برای ساخت برنامه های وب و موبایل با کیفیت بالا به اشتراک بگذارد. N2N-Apps بر کیفیت و سرعت تحویل تمرکز دارد.

دانلود MathBoard برای فروشگاه وب Chrome دانلود MathBoard برای فروشگاه وب Chrome (نسخه رایگان)

الزامات

الزامات کلیدی برای این پروژه انتقال HTML5 موارد زیر بود:

1. پورت وفاداری بالا ظاهر و احساس و رابط کاربری برنامه اصلی iPad.
2. با فاکتور فرم هدف (یعنی PC/Mac با صفحه کلید/ماوس در مقابل صفحه نمایش لمسی) سازگار شوید.
3. 100٪ از ویژگی های قابل اجرا را اجرا کنید.
4. عمدتاً مرورگرهای HTML5 را هدف قرار دهید.
5. برنامه را "بدون سرور" بسازید تا برنامه به طور کامل روی کلاینت اجرا شود و بتواند روی یک سرور ثابت یا برنامه بسته بندی شده Google Chrome میزبانی شود.
6. در کمتر از یک ماه نسخه 1.0 را با تمام امکانات اما حل کننده مشکل بسازید.

معماری

با توجه به الزامات، تصمیم گرفتیم با معماری زیر برویم:

1. HTML5: از آنجایی که ما نیازی به پشتیبانی HTML4 نداریم، تصمیم گرفتیم HTML5 را به عنوان پایه انتخاب کنیم.
2. jQuery: در حالی که HTML5 دارای بسیاری از انتخابگرهای پیشرفته است که جی کوئری را بسیار عالی می کند، ما تصمیم گرفتیم به هر حال از jQuery بمانیم زیرا راهی بسیار قوی و بالغ برای دستکاری DOM و رویدادهای مرتبط به ما می دهد. jQuery همچنین دارای مزیت DOM محوری بیشتر است که طراحی و پیاده سازی یک برنامه را به HTML نزدیک تر می کند.
3. SnowUI : jQuery یک API عالی و بهترین تمرین برای کار با DOM ارائه می‌کند، با این حال، برای برنامه MathBoard HTML5 ما به یک چارچوب سبک MVC یا MVP برای هماهنگ کردن همه نماهای مختلف نیاز داشتیم. SnowUI یک چارچوب ساده و در عین حال قدرتمند MVC در بالای jQuery است. این یک مکانیسم MVC محور DOM و یک روش منعطف برای ساخت اجزای سفارشی ارائه می‌کند و در عین حال این فرصت را برای توسعه‌دهنده برنامه فراهم می‌کند تا از هر کتابخانه ویجت/کنترل یا کد سفارشی که بهینه می‌داند استفاده کند.

ملاحظات iPad به PC

هنگام انتقال برنامه به HTML5 برای استفاده رایانه شخصی، مجبور شدیم تغییرات زیادی در طراحی و تعامل کاربر با برنامه ایجاد کنیم.

جهت صفحه نمایش

iPad MathBoard منحصراً عمودی است، که برای نمایشگرهای رایانه شخصی مطلوب نبود، زیرا آنها معمولاً به صورت افقی استفاده می شوند. در نتیجه، طراحی UI را دوباره سازماندهی کردیم و پانل تنظیمات را در یک نمای کشویی (متحرک شده توسط انتقال CSS3) به سمت راست منتقل کردیم.

ورودی: صفحه کلید/موس در مقابل لمس

یکی دیگر از تفاوت های اصلی بین iPad و نسخه وب، رابط ورودی است. در iPad فقط رابط لمسی دارید، در رایانه شخصی باید هم ماوس و هم صفحه کلید را در نظر بگیرید.

کنترل‌های ورودی MathBoard در iPad بسیار صیقلی هستند. ما می خواستیم همان نمایش وفاداری بالا را در رابط وب داشته باشیم. راه حل اضافه کردن پشتیبانی از میانبرهای صفحه کلید و تکرار کنترل های UI با استفاده از موقعیت یابی CSS بود. پورت به HTML5 پیکسل کامل بود:

همانطور که در رابط iPad، ما به کاربر اجازه می دهیم تا روی فلش چپ و راست کلیک کند تا مقدار یک کنترل را تغییر دهد. خط عمودی را نیز می توان برای تغییر سریع مقادیر کشید. یک رفتار تکرار برای click و keydown به کار گرفته شد تا کاربران بتوانند با فشار دادن ماوس یا صفحه کلید، تغییر مقدار را تسریع کنند.

پشتیبانی TAB برای جابجایی از یک فیلد ورودی به فیلد دیگر اضافه شد و فلش‌های ← و → در مقادیر چرخش می‌کنند.

یکی از ویژگی‌هایی که در نسخه آی‌پد وجود داشت که برای رابط رایانه شخصی چندان معنا نداشت، تخته طراحی بود. در حالی که اجرای آن می توانست فانتزی باشد، رسم اعداد با ماوس چندان کاربردی نیست. در عوض، تصمیم گرفتیم زمان بیشتری را صرف پرداختن رابط صفحه‌کلید به جای پیاده‌سازی تابلوی طراحی کنیم.

ویژگی های 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 زیر استفاده کردیم و آن را از طریق جاوا اسکریپت فعال کردیم. سبک پیش‌فرض سمت راست باز است:

#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 'translate' استفاده کنیم، که عملکرد بهتری نسبت به متحرک کردن ویژگی 'left' صفحه داشت. این امر به ویژه برای دستگاه های تلفن همراه (مانند iOS) که در آن تبدیل های سه بعدی سخت افزاری شتاب می گیرد، صادق است.
3. setTimeout در این مورد به شدت ضروری نیست زیرا موقعیت اصلی قبل از اصلاح تنظیم شده است. با این حال، به مرورگر اجازه می دهد تا با نمایش مسابقه درست قبل از کشیدن صفحه سمت راست، انیمیشن را روان تر کند.

2.) تنظیمات انیمیشن جعبه محاوره ای

هنگامی که کاربر روی یک تنظیم در سمت راست کلیک می کند، کادر گفتگوی تنظیمات از پایین صفحه ظاهر می شود و به سمت پایین به بخش مربوطه می رود.

برای انجام این کار، یک انتقال مشابه به سمت راست داشتیم. تنها چیزی که زمان برد این بود که در اولین ظاهر دیالوگ مشکل را برطرف کنیم. برای اینکه به مرورگر دستور دهید تا رابط کاربری گفتگو را کش کند، یک بار آن را نمایش دادیم و به آن پیمایش کردیم. ابتدا با 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 در شخصی‌سازی ظاهر و احساس برنامه برای مطابقت دقیق با پیچیدگی بالای MathBoard برای iPad بسیار مفید بود، فضای ذخیره‌سازی HTML5 برای ماندگاری داده‌های ما مناسب بود، و سادگی صدای HTML5 به ما این امکان را می‌داد تا برنامه iPad را دقیقاً تکرار کنیم.