Studi Kasus - MathBoard HTML5

Pengantar

Aplikasi MathBoard

MathBoard di iPad, aplikasi PalaSoftware, adalah aplikasi yang sangat rapi dengan banyak animasi yang halus tetapi alami serta tampilan dan nuansa realistis yang unik. Tujuannya adalah untuk melakukan port fidelitas tertinggi aplikasi iPad ke HTML5.

N2N-Apps adalah perusahaan Pengembangan Software yang berfokus pada pembuatan aplikasi Web dan Seluler generasi berikutnya dengan teknologi HTML5. Perusahaan ini didanai pada tahun 2010 oleh Jeremy Chone yang, setelah 11 tahun pengalaman engineering dan manajemen dari Netscape, Oracle, dan Adobe, memutuskan untuk membagikan keahliannya kepada bisnis untuk membuat aplikasi Web dan Seluler berkualitas tinggi. N2N-Apps berfokus pada kualitas dan kecepatan pengiriman.

Download MathBoard untuk Chrome Web Store Download MathBoard untuk Chrome Web Store (versi gratis)

Persyaratan

Persyaratan utama untuk project transfer HTML5 ini adalah sebagai berikut:

  1. Port fidelitas tinggi dari tampilan dan nuansa aplikasi iPad asli serta antarmuka pengguna.
  2. Menyesuaikan dengan faktor bentuk target (yaitu PC/Mac dengan keyboard/mouse vs layar sentuh).
  3. Terapkan 100% fitur yang berlaku.
  4. Menargetkan browser HTML5 secara khusus.
  5. Buat aplikasi "tanpa server" sehingga aplikasi berjalan sepenuhnya di klien dan dapat dihosting di server statis atau aplikasi yang dipaketkan Google Chrome.
  6. Buat versi 1.0 dengan semua fitur kecuali pemecah masalah dalam waktu kurang dari sebulan.

Arsitektur

Arsitektur

Dengan persyaratan tersebut, kami memutuskan untuk menggunakan arsitektur berikut:

  1. HTML5: Karena tidak memiliki persyaratan dukungan HTML4, kami memutuskan untuk menggunakan HTML5 sebagai dasar.
  2. jQuery: Meskipun HTML5 memiliki banyak pemilih lanjutan yang membuat jQuery begitu bagus, kami memutuskan untuk tetap menggunakan jQuery karena memberi kami cara yang sangat andal dan matang untuk memanipulasi DOM dan peristiwa terkait. jQuery juga memiliki manfaat yang lebih berfokus pada DOM, yang cenderung membuat desain dan implementasi aplikasi lebih dekat dengan HTML.
  3. SnowUI: jQuery menyediakan API yang bagus dan praktik terbaik untuk bekerja dengan DOM, tetapi, untuk aplikasi MathBoard HTML5, kita memerlukan framework gaya MVC atau MVP untuk mengatur semua tampilan yang berbeda. SnowUI adalah framework MVC sederhana namun canggih di atas jQuery. Library ini menyediakan mekanisme MVC yang berfokus pada DOM dan cara yang fleksibel untuk mem-build komponen kustom sekaligus memberikan peluang bagi developer aplikasi untuk menggunakan library widget/kontrol atau kode kustom yang dianggap optimal.

Pertimbangan iPad ke PC

Saat memindahkan aplikasi ke HTML5 untuk penggunaan PC, kami harus melakukan beberapa perubahan pada desain dan interaksi pengguna aplikasi.

Orientasi layar

MathBoard iPad secara eksklusif berorientasi vertikal, yang tidak optimal untuk layar PC karena umumnya digunakan secara horizontal. Oleh karena itu, kami menyusun ulang desain UI dan memindahkan panel setelan ke sisi kanan, pada tampilan geser (dianimasikan oleh transisi CSS3).

Orientasi Layar
Orientasi layar iPad vs. HTML5

Input: keyboard/mouse vs. sentuh

Perbedaan utama lainnya antara versi iPad dan Web adalah antarmuka input. Di iPad, Anda hanya memiliki antarmuka sentuh, di PC, Anda perlu mempertimbangkan mouse dan keyboard.

Kontrol input MathBoard di iPad sangat rapi. Kami menginginkan representasi fidelitas tinggi yang sama di antarmuka Web. Solusinya adalah menambahkan dukungan untuk pintasan keyboard dan mereplikasi kontrol UI menggunakan pemosisian CSS. Port ke HTML5 memiliki kualitas pixel sempurna:

Kontrol UI
Setelan Versi iPad vs. HTML5

Seperti pada antarmuka iPad, kita mengizinkan pengguna mengklik panah kiri dan kanan untuk mengubah nilai kontrol. Garis vertikal juga dapat ditarik untuk mengubah nilai dengan cepat. Perilaku berulang diterapkan untuk click dan keydown sehingga pengguna dapat mempercepat perubahan nilai saat mouse atau keyboard ditekan.

Dukungan TAB ditambahkan untuk berpindah dari satu kolom input ke kolom input lainnya dan panah ← dan → berputar melalui nilai.

Salah satu fitur di versi iPad yang tidak terlalu cocok untuk antarmuka PC adalah papan gambar. Meskipun mungkin terlihat bagus untuk menerapkannya, menggambar angka dengan mouse tidak terlalu praktis. Sebagai gantinya, kami memutuskan untuk menghabiskan lebih banyak waktu untuk meningkatkan kualitas antarmuka keyboard daripada menerapkan papan gambar.

Fitur HTML5

Di MathBoard versi Web, kami menggunakan banyak fitur HTML5:

Penyimpanan lokal

MathBoard memungkinkan pengguna menyimpan kuis untuk diputar ulang nanti. HTML5 MathBoard menerapkan fitur ini menggunakan localStorage HTML5 menggunakan antarmuka SnowUI DAO.

localStorage adalah pilihan yang wajar karena datanya cukup sederhana dan tidak memerlukan pengindeksan lanjutan. Kami menyimpan semua kuis dalam satu format JSON yang kami JSON.stringify sebagai teks.

snowUI DAO adalah wrapper antarmuka CRUD sederhana yang memungkinkan UI mengambil data tanpa harus khawatir tentang cara penyimpanannya yang sebenarnya. Implementasi DAO menangani detail penyimpanan.

Di MathBoard, persyaratan penyimpanan sangat sederhana. Kita hanya perlu menyimpan setelan pengguna dan data kuis. Keduanya disimpan sebagai string JSON di localStorage.

Jadi, misalnya, DAO untuk nilai setelan terlihat seperti ini:

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

Setelah DAO ini terdaftar untuk settingValue, UI dapat melakukan panggilan berikut tanpa perlu khawatir dengan logika penyimpanan:

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

Font CSS3

MathBoard menggunakan font kustom. Berkat dukungan font CSS3, menyertakan font true type 'Chalkduster' ke dalam aplikasi kita menjadi mudah:

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

Selain itu, karena font ini adalah font default untuk hampir semua teks dalam aplikasi, kami menjadikannya sebagai font default untuk isi.

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

Gradien, bayangan, sudut membulat CSS3

Semua gradien, bayangan, transparansi, dan sudut membulat dilakukan dengan CSS3. Ini adalah penghemat game yang nyata dibandingkan dengan cara .png tradisional untuk membuat antarmuka pengguna.

Kami juga menggunakan properti CSS3 lanjutan untuk menyesuaikan tampilan dan nuansa scrollbar agar lebih halus (lihat http://webkit.org/blog/363/styling-scrollbars/ untuk menata gaya scrollbar di browser WebKit).

Transisi CSS3

Untuk MathBoard HTML5, kami mereplikasi semua animasi iPad dan bahkan menambahkan animasi baru untuk panel kanan geser. Berkat transisi CSS3, menambahkan animasi menjadi mudah dan memungkinkan performa terbaik.

Kami memiliki tiga animasi utama dalam aplikasi.

1.) Panel kanan geser

Animasi pertama berada di panel kanan (#rightPane), yang tertutup saat pengguna memulai kuis baru dan terbuka saat pengguna mengakhiri kuis. Untuk membuat efek ini, kita menggunakan transisi CSS berikut dan memicunya melalui JavaScript. Gaya default rightPane terbuka:

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

Saat pengguna memulai kuis, logika JavaScript kita akan memindahkan panel:

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

Beberapa catatan tentang penerapan ini:

  1. Mengingat ukuran aplikasi bersifat tetap, kita dapat menggunakan class CSS '.close' dan melakukan hardcode pada posisi tutup dengan cara yang sama seperti kita melakukan hardcode pada posisi terbuka.
  2. Kita juga dapat menggunakan 'translate' CSS, yang akan lebih berperforma daripada menganimasikan properti 'left' panel. Hal ini terutama berlaku untuk perangkat seluler (seperti iOS) yang transformasi 3D-nya diakselerasi hardware.
  3. setTimeout tidak terlalu diperlukan dalam hal ini karena posisi asli ditetapkan sebelum modifikasi. Namun, tindakan ini memungkinkan browser membuat animasi lebih lancar dengan menampilkan kuis tepat sebelum menggeser rightPane.

2.) Animasi kotak dialog setelan

Saat pengguna mengklik setelan di sebelah kanan, dialog setelan akan muncul dari bagian bawah layar dan men-scroll ke bawah ke bagian yang sesuai.

Untuk melakukannya, kita memiliki transisi serupa ke panel kanan. Satu-satunya hal yang memerlukan waktu adalah menyelesaikan ketidakstabilan saat dialog pertama kali muncul. Untuk menginstruksikan browser meng-cache UI dialog, kita akhirnya menampilkannya sekali dan men-scroll ke sana. Awalnya, kita mencoba dengan display: none. Pendekatan ini salah karena browser mengasumsikan bahwa dialog tidak perlu ditampilkan. Solusinya adalah menampilkan setelan dengan z-index: -1 saat inisialisasi, sehingga tidak terlihat oleh pengguna, tetapi terlihat oleh browser.

3.) Animasi pesan keberhasilan atau pesan yang salah untuk kuis

Animasi ketiga sebenarnya adalah dua dalam satu. Saat pesan 'success' atau 'incorrect' muncul, pertama-tama skalakan ke titik, tunggu sebentar, lalu skalakan lebih besar dan hilang. Untuk ini, kita memiliki dua gaya animasi CSS3, dan mengaturnya melalui JavaScript pada peristiwa 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);

Tag audio

Saat pengguna menjawab kuis, aplikasi akan mengeluarkan suara berhasil atau gagal. Pilihan sederhananya adalah menggunakan tag audio dan memanggil play() di tag tersebut. Bit audio ini ditambahkan ke halaman utama aplikasi:

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

Kesimpulan

HTML5 benar-benar memungkinkan generasi baru aplikasi Web, desktop, dan seluler. CSS3 berperan penting dalam menyesuaikan tampilan dan nuansa aplikasi agar cocok dengan kecanggihan MathBoard untuk iPad, penyimpanan HTML5 sangat cocok untuk persistensi data kami, dan kesederhanaan audio HTML5 memungkinkan kami mereplikasi aplikasi iPad dengan cermat.