Giriş
Bir PalaSoftware uygulaması olan MathBoard on iPad, ustaca tasarlanmış ama doğal animasyonların yanı sıra benzersiz, gerçekçi bir görünüm ve tarza sahip son derece gösterişli bir uygulamadır. Amaç, iPad uygulamasının HTML5'e en yüksek doğruluklu bağlantı noktasını yapmaktı.
N2N-Apps, HTML5 teknolojisiyle yeni nesil Web ve Mobil uygulamaları oluşturmaya odaklanan bir Yazılım Geliştirme şirketidir. Şirket 2010 yılında Netscape, Oracle ve Adobe'de 11 yıllık mühendislik ve yönetim deneyiminden sonra yüksek kaliteli Web ve Mobil uygulamalar oluşturmak için uzmanlığını işletmelerle paylaşmaya karar veren Jeremy Chone tarafından finanse edildi. N2N-Apps teslimatın kalitesine ve hızına odaklanır.
Chrome Web Mağazası için MathBoard'u indirin Chrome Web Mağazası için MathBoard'u indirin (ücretsiz sürüm)
Koşullar
Bu HTML5 taşıma projesi için temel gereksinimler şunlardı:
- Orijinal iPad uygulamasının görünümü ve tarzı ile kullanıcı arayüzüne ait yüksek kaliteli bağlantı noktası.
- Hedef form faktörüne uyum sağlayın (ör. klavye/fare ile PC/Mac veya dokunmatik ekran).
- Uygulanabilir özelliklerin% 100'ünü uygulayın.
- Esas olarak HTML5 tarayıcılarını hedefleyin.
- Uygulamanın tamamen istemcide çalışması ve statik bir sunucuda veya Google Chrome paket uygulamasında barındırılabilmesi için uygulamayı "sunucusuz" hale getirin.
- Bir aydan kısa sürede, tüm özelliklere sahip sorun çözücünün 1.0 sürümünü hazırlayın.
Mimari
Bu şartları göz önünde bulundurarak aşağıdaki mimariyi kullanmaya karar verdik:
- HTML5: HTML4 destek gereksinimlerimiz olmadığından, temel olarak HTML5'i kullanmaya karar verdik.
- jQuery: HTML5, jQuery'yi bu kadar mükemmel yapan birçok gelişmiş seçiciye sahip olsa da, DOM'u ve ilgili etkinlikleri değiştirmek için bize çok sağlam ve olgun bir yol sunduğundan yine de jQuery'yi kullanmaya karar verdik. jQuery, daha fazla DOM merkezli olması sayesinde de uygulamanın tasarımını ve uygulanmasını HTML'ye daha yakın hale getirir.
- SnowUI: jQuery, DOM ile çalışmak için mükemmel bir API ve en iyi uygulama sağlar. Ancak, HTML5 MathBoard uygulaması için tüm farklı görünümleri düzenlemek üzere MVC veya MVP tarzı bir çerçeveye ihtiyacımız vardı. SnowUI, jQuery'nin yanı sıra basit ama güçlü bir MVC çerçevesidir. DOM merkezli bir MVC mekanizması ve özel bileşenler oluşturmak için esnek bir yöntem sunar. Aynı zamanda uygulama geliştiricisine de optimum olduğunu düşündüğü herhangi bir widget/denetim kitaplığını veya özel kodu kullanma fırsatı tanır.
iPad'den PC'ye geçişte dikkat edilmesi gereken noktalar
Uygulamayı PC için HTML5'e taşırken uygulamanın tasarımında ve kullanıcı etkileşiminde birkaç değişiklik yapmak zorunda kaldık.
Ekran yönü
iPad MathBoard özellikle dikey olarak tasarlanmıştır. Bu nedenle, genellikle yatay modda kullanıldığı için PC ekranları için ideal değildir. Sonuç olarak, kullanıcı arayüzü tasarımını yeniden düzenledik ve ayarlar panelini, CSS3 geçişleriyle animasyonlandırılan kayan bir görünümde sağ tarafa taşıdık.
Giriş: klavye/fare ile dokunma karşılaştırması
iPad ile web sürümü arasındaki diğer önemli bir fark da giriş arayüzüdür. iPad'de yalnızca dokunmatik bir arayüz vardır, PC'de ise hem fareyi hem de klavyeyi dikkate almanız gerekir.
iPad'deki MathBoard giriş kontrolleri son derece gösterişlidir. Web arayüzünde de aynı yüksek doğruluk oranıyla sunum yapmak istiyorduk. Çözüm, klavye kısayolları için destek eklemek ve CSS konumlandırmasını kullanarak kullanıcı arayüzü kontrollerini çoğaltmaktı. HTML5 bağlantı noktası piksel olarak mükemmeldi:
iPad arayüzünde olduğu gibi, kullanıcının bir kontrolün değerini
değiştirmek için sol ve sağ oku tıklamasına olanak tanıyoruz. Değerleri hızla değiştirmek için dikey çizgi de
sürüklenebilir. Kullanıcıların fare veya klavyeye basıldığında değer değişikliğini hızlandırabilmesi için click ve keydown için bir tekrar davranışı uygulanmıştır.
Bir giriş alanından diğerine geçmek için TAB desteği eklendi ve ← ve → okları değerler arasında geçiş yaptı.
iPad sürümünün PC arayüzü için pek anlamlı olmayan bir özelliği çizim tahtasıydı. Uygulamak zor olsa da fareyle sayı çizmek pek pratik değil. Bunun yerine, çizim tahtasını uygulamak yerine klavye arayüzünü düzenlemeye daha fazla zaman harcamaya karar verdik.
HTML5 özellikleri
MathBoard'un Web sürümünde birçok HTML5 özelliği kullanılır:
Yerel depolama
MathBoard, kullanıcıların testlerini kaydedip daha sonra tekrar oynatmalarına olanak tanır. HTML5 MathBoard, bu özelliği SnowUI DAO arayüzünü kullanarak HTML5 localStorage kullanarak uygular.
Veriler yeterince basit olduğu ve gelişmiş dizine ekleme gerektirmediği için localStorage doğal bir tercihti. Tüm testleri, metin olarak JSON.stringify verdiğimiz tek bir JSON biçiminde saklarız.
snowUI DAO, verilerin gerçekte nasıl depolandığı konusunda endişe duymadan kullanıcı arayüzünün verileri getirmesini sağlayan basit bir CRUD arayüz sarmalayıcıdır. DAO uygulaması, depolama alanıyla ilgili ayrıntıları halleder.
MathBoard'da depolama alanı gereksinimleri çok basitti. Yalnızca kullanıcı ayarlarını ve test verilerini
depolamamız gerekiyordu. Her ikisi de localStorage içinde JSON dizesi olarak depolanır.
Dolayısıyla, ayar değerinin DAO'su aşağıdaki gibi görünürdü:
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();
})());
Bu DAO, settingValue için kaydedildikten sonra kullanıcı arayüzü, mağaza mantığıyla ilgili endişe duymadan aşağıdaki çağrıyı yapabilir:
var addition = snow.dm.get('settingValue', 'operator_addition');
addition.value = true; // to check the addition checkbox
snow.dm.save('settingValue', addition);
CSS3 yazı tipleri
MathBoard özel yazı tipleri kullanır. CSS3 yazı tipi desteği sayesinde "Chalkduster" gerçek türü yazı tipini uygulamamıza eklemek çok önemliydi:
@font-face {
font-family: Chalkduster;
src: url(Chalkduster.ttf);
}
Bu yazı tipi, uygulamadaki neredeyse tüm metinlerde varsayılan yazı tipi olduğundan, gövde için varsayılan yazı tipi yaptık.
body {
background: #333333;
font-family: Chalkduster;
color: #ffffff;
}
CSS3 gradyanı, gölge, yuvarlatılmış köşeler
Tüm gradyan, gölge, şeffaflık ve yuvarlatılmış köşeler CSS3 ile yapılır. Bu yöntem, kullanıcı arayüzleri oluşturmaya yönelik geleneksel .png yöntemine kıyasla gerçek bir oyun tasarrufu sağladı.
Ayrıca kaydırma çubuğunun görünümünü ve tarzını özelleştirmek için daha belirgin hale getirmek amacıyla gelişmiş CSS3 özellikleri de kullandık (WebKit tarayıcılarında kaydırma çubuklarının stilini belirlemek için http://webkit.org/blog/363/styling-scrollbars/ adresine bakın).
CSS3 geçişleri
HTML5 MathBoard için iPad'in tüm animasyonlarını çoğalttık ve sağdaki kayan panel için yeni bir animasyon bile ekledik. CSS3 geçişleri sayesinde animasyon eklemek önemsizdi ve en iyi performansın sağlanmasına olanak tanıdı.
Uygulamalarda üç ana animasyonumuz vardı.
1.) Kayan sağ bölme
İlk animasyon sağdaki bölmededir (#rightPane). Kullanıcı yeni bir test başlattığında kapanır ve bir testi bitirdiğinde slaytlar açılır.
Bu efekti oluşturmak için aşağıdaki CSS geçişini kullandık ve JavaScript aracılığıyla tetikledik. RightPane'in varsayılan stili açıktır:
#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;
}
Kullanıcı bir teste başladığında, JavaScript mantığımız paneli hareket ettirir:
var $rightPane = $('#rightPane');
var left = $rightPane.position().left - 400;
setTimeout(function() {
$rightPane.css('left', left + 'px');
}, 0);
Bu uygulamaya ilişkin birkaç not:
- Uygulama boyutlarının sabit olduğu düşünülürse bir ".close" CSS sınıfını kullanıp kapatma konumunu açık konumu kodladığımız şekilde kodlayabilirdik.
- Ayrıca, bölmenin "left" özelliğini canlandırmaktan daha yüksek bir performans sağlayacak olan CSS "translate" de kullanılabilirdi. Bu, özellikle 3D dönüşümlerin donanım hızlandırmalı olduğu mobil cihazlar (iOS gibi) için geçerlidir.
- Orijinal konum değişiklikten önce ayarlandığı için bu durumda
setTimeoutgerekli değildir. Ancak, tarayıcının, rightPane'i kaydırmadan hemen önce testi görüntüleyerek animasyonu daha pürüzsüz hale getirmesini sağlar.
2.) Ayarlar iletişim kutusu animasyonu
Kullanıcı sağdaki bir ayarı tıkladığında ayarlar iletişim kutusu ekranın alt kısmında görünür ve aşağı kaydırarak uygun bölüme gider.
Bunu başarabilmek için, sağ bölmeye benzer bir geçiş yaptık. Biraz zaman alan tek şey,
diyaloğun ilk görünümündeki sarsıntıyı çözmekti.
Tarayıcıya iletişim kutusu kullanıcı arayüzünü önbelleğe almasını söylemek için söz konusu arayüzü bir kez görüntüleyip kaydırdık. Başta display: none ile denedik.
Tarayıcı, iletişim kutusunun gösterilmesi gerekmediğini varsaydığı için bu yaklaşım yanlıştı.
Çözüm, ayarları başlatma sırasında bir z-index: -1 ile görüntülemek ve böylece kullanıcı tarafından görünmez ancak tarayıcı tarafından görünür hale gelmesiydi.
3.) Test başarılı veya yanlış mesaj animasyonu
Üçüncü animasyon aslında ikide bir oluyor. "Başarılı" veya "yanlış" mesajı göründüğünde, önce bir noktaya kadar ölçeklendirin, biraz bekleyin ve son olarak daha da büyük ölçeklendirip kaybolur. Bunun için iki CSS3 animasyon stilimiz vardır ve bunları bir webkitTransitionEnd etkinliğinde JavaScript aracılığıyla düzenleriz.
.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);
Ses etiketi
Kullanıcılar bir testi yanıtladığında, uygulama "başarılı" veya "başarısız" gibi bir ses çıkarır.
Basit bir seçim, ses etiketini kullanıp ondan play() numaralı telefonu aramak oldu.
Bu ses bitleri uygulamanın ana sayfasına eklenir:
<audio id="audioCorrect" src="correct.mp3" preload="auto" autobuffer></audio>
<audio id="audioWrong" src="wrong.mp3" preload="auto" autobuffer></audio>
Sonuç
HTML5; Web, masaüstü ve mobil uygulamaların gerçekten yeni neslini mümkün kılıyor. CSS3, uygulamanın görünümünü ve tarzını iPad için MathBoard'un yüksek gelişmişliğiyle yakından eşleşecek şekilde özelleştirmede önemli bir rol oynadı, HTML5 depolama alanı da veri kalıcılığımız için mükemmel bir seçim oldu ve HTML5 sesin basitliği, iPad uygulamasını yakından kopyalamamıza olanak tanıdı.