Pengantar
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 porta {i> fidelity <i}tertinggi dari 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. Setelah 11 tahun pengalaman di bidang engineering dan manajemen dari Netscape, Oracle, dan Adobe, perusahaan ini memutuskan untuk berbagi keahliannya dengan berbagai bisnis dalam membangun 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 porting HTML5 ini adalah sebagai berikut:
- Port fidelitas tinggi dari tampilan dan nuansa aplikasi iPad asli serta antarmuka pengguna.
- Menyesuaikan dengan faktor bentuk target (misalnya PC/Mac dengan keyboard/mouse vs layar sentuh).
- Implementasikan 100% fitur yang berlaku.
- Menargetkan terutama browser HTML5.
- Jadikan aplikasi "server-less" sehingga aplikasi berjalan sepenuhnya di klien dan dapat dihosting di server statis atau aplikasi terpaket Google Chrome.
- Membuat versi 1.0 dengan semua fitur tetapi dapat memecahkan masalah dalam waktu kurang dari sebulan.
Arsitektur
Mengingat persyaratan yang ada, kami memutuskan untuk menggunakan arsitektur berikut:
- HTML5: Karena kami tidak memiliki persyaratan dukungan HTML4, kami memutuskan untuk menggunakan HTML5 sebagai dasarnya.
- jQuery: Meskipun HTML5 memiliki banyak pemilih canggih yang membuat jQuery begitu hebat, kami tetap memutuskan untuk tetap menggunakan jQuery karena HTML5 memberikan cara yang sangat kuat dan matang untuk memanipulasi DOM dan peristiwa terkait. jQuery juga memiliki keunggulan berupa lebih berfokus pada DOM, yang cenderung membuat desain dan implementasi aplikasi lebih dekat dengan HTML.
- SnowUI: jQuery menyediakan API yang hebat dan praktik terbaik untuk bekerja dengan DOM, namun, untuk aplikasi HTML5 MathBoard, kami memerlukan framework gaya MVC atau MVP untuk mengatur semua tampilan yang berbeda. SnowUI adalah framework MVC yang sederhana tetapi andal selain jQuery. Library ini menyediakan mekanisme MVC yang berpusat pada DOM dan cara fleksibel untuk mem-build komponen kustom, sekaligus memberikan kesempatan bagi developer aplikasi untuk menggunakan library widget/kontrol atau kode kustom yang menurutnya optimal.
Pertimbangan iPad ke PC
Saat mem-porting aplikasi ke HTML5 untuk penggunaan PC, kami harus melakukan beberapa modifikasi pada desain dan interaksi pengguna aplikasi.
Orientasi layar
MathBoard iPad hanya berorientasi vertikal, yang tidak optimal untuk layar PC karena umumnya digunakan secara horizontal. Akibatnya, kami menyusun ulang desain UI dan memindahkan panel setelan ke sisi kanan, pada tampilan geser (dianimasikan oleh transisi CSS3).
Input: keyboard/mouse vs. sentuh
Perbedaan utama lainnya antara versi iPad dan Web adalah antarmuka input. Di iPad, Anda hanya memiliki antarmuka sentuh, sedangkan di PC Anda perlu mempertimbangkan mouse dan keyboard.
Kontrol input MathBoard di iPad sangat canggih. Kami menginginkan representasi {i>high-fidelity <i} yang sama di antarmuka Web. Solusinya adalah menambahkan dukungan untuk pintasan keyboard dan mereplikasi kontrol UI menggunakan pemosisian CSS. Porta ke HTML5 sempurna dengan piksel:
Seperti pada antarmuka iPad, kita memungkinkan pengguna mengklik panah kiri dan kanan
untuk mengubah nilai kontrol. Garis vertikal juga dapat ditarik untuk
mengubah nilai dengan cepat. Perilaku berulang telah diimplementasikan 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 → bergerak melalui nilai.
Salah satu fitur dalam versi iPad yang tidak cocok untuk antarmuka PC adalah papan gambar. Meskipun mungkin bagus untuk menerapkannya, menggambar angka dengan mouse tidaklah praktis. Jadi, kami memutuskan untuk menghabiskan lebih banyak waktu untuk memoles antarmuka {i>keyboard<i} daripada menerapkan papan gambar.
Fitur HTML5
Pada MathBoard versi Web, kami menggunakan banyak fitur HTML5:
Penyimpanan lokal
MathBoard memungkinkan pengguna menyimpan kuis untuk mengulanginya di lain waktu. HTML5 MathBoard
menerapkan fitur ini menggunakan localStorage HTML5 menggunakan
antarmuka DAO SnowUI.
localStorage adalah pilihan yang wajar karena datanya cukup sederhana dan tidak memerlukan pengindeksan lanjutan. Kita menyimpan semua kuis dalam
satu format JSON yang kita JSON.stringify sebagai teks.
DAO SnowUI adalah wrapper antarmuka CRUD sederhana yang memungkinkan UI mengambil data tanpa harus khawatir tentang bagaimana data sebenarnya disimpan. Implementasi DAO menangani detail penyimpanan.
Di MathBoard, persyaratan penyimpanannya 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 didaftarkan untuk settingValue, UI dapat
melakukan panggilan berikut tanpa perlu mengkhawatirkan 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, mudah menyertakan font jenis asli 'Chalkduster' ke dalam aplikasi kami:
@font-face {
font-family: Chalkduster;
src: url(Chalkduster.ttf);
}
Dan, karena font ini merupakan default untuk hampir semua teks dalam aplikasi, kami menjadikannya default untuk isi.
body {
background: #333333;
font-family: Chalkduster;
color: #ffffff;
}
Gradien CSS3, bayangan, sudut membulat
Semua gradien, bayangan, transparansi, dan sudut membulat dilakukan dengan CSS3. Ini adalah cara {i>game saver<i} yang sebenarnya dibandingkan dengan cara {i>.png<i} tradisional untuk melakukan 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 scroll bar di browser WebKit).
Transisi CSS3
Untuk HTML5 MathBoard, kami mereplikasi semua animasi iPad dan bahkan menambahkan animasi baru untuk panel geser kanan. Berkat transisi CSS3, penambahan animasi menjadi mudah dan memungkinkan performa terbaik.
Kami memiliki tiga animasi utama dalam aplikasi.
1.) Panel geser kanan
Animasi pertama ada di panel kanan (#rightPane), yang slide
tertutup saat pengguna memulai kuis baru dan slide terbuka saat pengguna mengakhiri kuis.
Untuk membuat efek ini, kami menggunakan transisi CSS berikut dan memicunya
melalui JavaScript. Gaya default kananPane adalah 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:
- Mengingat bahwa ukuran aplikasi tetap, kita bisa menggunakan class CSS '.close' dan melakukan hardcode pada posisi tutup dengan cara yang sama seperti melakukan hardcode pada class yang terbuka.
- Kita juga bisa menggunakan 'translate' CSS, yang performanya lebih baik daripada menganimasikan properti 'left' panel. Hal ini terutama berlaku untuk perangkat seluler (seperti iOS) dengan transformasi 3D yang mengaktifkan akselerasi hardware.
setTimeouttidak sepenuhnya diperlukan dalam kasus ini karena posisi asli telah ditetapkan sebelum modifikasi. Namun, cara ini memungkinkan browser membuat animasi lebih halus dengan menampilkan kuis tepat sebelum menggeser Panel kanan ke dalam.
2.) Animasi kotak dialog setelan
Jika 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, kami melakukan transisi yang serupa ke panel kanan. Satu-satunya hal yang
perlu waktu adalah menyelesaikan masalah saat pertama kali dialog muncul.
Untuk memerintahkan browser meng-cache UI dialog, kita akhirnya menampilkannya
sekali dan men-scroll ke UI dialog tersebut. Pada awalnya, kami mencoba dengan display: none.
Pendekatan ini salah karena browser berasumsi 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 kuis berhasil atau salah
Animasi ketiga sebenarnya adalah
dua dalam satu. Saat pesan 'berhasil' atau 'salah' muncul, skalakan ke suatu titik terlebih dahulu, tunggu sebentar, dan terakhir skalakan bahkan lebih besar dan menghilang. Untuk itu, kita memiliki dua gaya animasi CSS3, dan mengorkestrasinya 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 membuat suara berhasil atau gagal.
Pilihan sederhananya adalah menggunakan tag audio dan memanggil play() di dalamnya.
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 jenis baru aplikasi Web, desktop, dan seluler. CSS3 berperan penting dalam menyesuaikan tampilan dan nuansa aplikasi agar sangat sesuai dengan kecanggihan MathBoard untuk iPad yang sangat canggih, penyimpanan HTML5 sangat cocok untuk persistensi data kami, dan kesederhanaan audio HTML5 memungkinkan kami mereplikasi aplikasi iPad dengan lebih dekat.