Örnek Olay: HTML5 MathBoard

Jeremy Chone
Jeremy Chone

Giriş

MathBoard uygulaması

PalaSoftware uygulaması olan iPad'de MathBoard, birçok ince ancak doğal animasyona ve benzersiz bir gerçekçi görünüme ve tarza sahip son derece iyi tasarlanmış bir uygulamadır. Hedef, iPad uygulamasının HTML5'e en yüksek doğrulukla aktarılmasıydı.

N2N-Apps, HTML5 teknolojisiyle yeni nesil web ve mobil uygulamalar geliştirmeye odaklanan bir yazılım geliştirme şirketidir. Şirket, 2010 yılında Jeremy Chone tarafından kuruldu. Netscape, Oracle ve Adobe'da 11 yıllık mühendislik ve yönetim deneyimi edinen Chone, yüksek kaliteli web ve mobil uygulamalar oluşturmak için uzmanlığını işletmelerle paylaşmaya karar verdi. N2N-Apps, uygulama yayınlamanı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)

Şartlar

Bu HTML5 taşıma projesinin temel koşulları şunlardı:

  1. Orijinal iPad uygulamasının görünümü, tarzı ve kullanıcı arayüzünün yüksek kaliteli bağlantısı.
  2. Hedef form faktörüne (ör. klavye/fareli PC/Mac ve dokunmatik ekran) uyum sağlayın.
  3. Geçerli özelliklerin% 100'ünü uygulayın.
  4. Temel olarak HTML5 tarayıcılarını hedefleyin.
  5. Uygulamanın tamamen istemcide çalışabilmesi ve statik bir sunucuda veya Google Chrome paketli uygulamada barındırılabilmesi için uygulamayı "sunucusuz" hale getirin.
  6. Bir aydan kısa sürede, sorun giderici dışındaki tüm özellikleri içeren 1.0 sürümünü oluşturun.

Mimari

Mimari

Şartlar göz önüne alındığında aşağıdaki mimariyi kullanmaya karar verdik:

  1. HTML5: HTML4 destek şartlarımız olmadığından temel olarak HTML5'i kullanmaya karar verdik.
  2. jQuery: HTML5, jQuery'yi bu kadar mükemmel kılan gelişmiş seçicilerden çoğuna sahip olsa da DOM ve ilgili etkinlikleri değiştirmek için bize çok güçlü ve gelişmiş bir yöntem sunduğundan jQuery'yi kullanmaya devam etmeye karar verdik. jQuery'nin daha DOM odaklı olması da bir avantajdır. Bu, bir uygulamanın tasarımını ve uygulamasını HTML'ye daha yakın hale getirir.
  3. SnowUI: jQuery, DOM ile çalışmak için mükemmel bir API ve en iyi uygulama sağlar. Ancak HTML5 MathBoard uygulamasında, tüm farklı görünümleri koordine etmek için MVC veya MVP tarzı bir çerçeveye ihtiyacımız vardı. SnowUI, jQuery'nin üzerine inşa edilmiş basit ancak güçlü bir MVC çerçevesidir. DOM odaklı bir MVC mekanizması ve özel bileşenler oluşturmanın esnek bir yolunu sunarken uygulama geliştiriciye en uygun widget/kontrol kitaplığını veya özel kodu kullanma fırsatı tanır.

iPad'den PC'ye aktarma ile ilgili dikkat edilmesi gereken noktalar

Uygulamayı PC kullanımı 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 yalnızca dikey olarak yönlendirilmiştir. Bu, genellikle yatay olarak kullanıldığından PC ekranları için ideal değildi. Bu nedenle, kullanıcı arayüzü tasarımını yeniden düzenledik ve ayarlar panelini sağ tarafa, kaydırmalı bir görünüme (CSS3 geçişleriyle animasyonlu) taşıdık.

Ekran Yönlendirme
iPad ve HTML5 ekran yönü

Giriş: klavye/fare ve dokunma

iPad ve web sürümü arasındaki diğer önemli fark giriş arayüzüdür. iPad'de yalnızca dokunmatik arayüz bulunur. PC'de ise hem fareyi hem de klavyeyi dikkate almanız gerekir.

iPad'deki MathBoard giriş kontrolleri son derece gelişmiş. Web arayüzünde de aynı yüksek kaliteli temsili görmek istedik. Çözüm, klavye kısayolları için destek eklemek ve CSS yerleşimi kullanarak kullanıcı arayüzü denetimlerini kopyalamaktı. HTML5'e aktarma işlemi piksel mükemmelliğindeydi:

Kullanıcı Arayüzü Denetimleri
iPad ve HTML5 Sürüm Ayarları

iPad arayüzünde olduğu gibi, kullanıcının bir kontrolün değerini değiştirmek için sol ve sağ okları tıklamasına izin veriyoruz. Dikey çizgiyi sürükleyerek de değerleri hızlıca değiştirebilirsiniz. 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 tekrar davranışı uygulandı.

Bir giriş alanından diğerine geçmek için TAB desteği eklendi ve ← ve → okları değerler arasında geçiş yapar.

iPad sürümündeki çizim tahtası, PC arayüzünde pek anlamlı olmayan bir özellikti. Bunu uygulamak şık olabilir ancak fareyle sayı çizmek çok pratik değildir. Bunun yerine, çizim tahtasını uygulamak yerine klavye arayüzünü iyileştirmeye daha fazla zaman ayırmaya karar verdik.

HTML5 özellikleri

MathBoard'un web sürümünde birçok HTML5 özelliği kullanıyoruz:

Yerel depolama

MathBoard, kullanıcıların testlerini kaydedip daha sonra tekrar oynatmasına olanak tanır. HTML5 MathBoard, bu özelliği SnowUI DAO arayüzünü kullanarak HTML5 localStorage ile uygular.

Veriler yeterince basit olduğu ve gelişmiş dizine ekleme gerektirmediği için localStorage doğal bir seçimdi. Tüm testleri, metin olarak JSON.stringify bir JSON biçiminde depolarız.

snowUI DAO, kullanıcı arayüzünün verilerin nasıl depolandığı konusunda endişelenmeden veri almasına olanak tanıyan basit bir CRUD arayüzü sarmalayıcısıdır. DAO uygulaması, depolama ayrıntılarını yönetir.

MathBoard'da depolama alanı gereksinimleri çok basitti. Yalnızca kullanıcı ayarlarını ve test verilerini saklamamız gerekiyordu. Her ikisi de localStorage içinde JSON dizesi olarak depolanmıştır.

Örneğin, ayar değeri için DAO şu şekilde görünüyordu:

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şelenmenize gerek kalmadan 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'da özel yazı tipleri kullanılır. CSS3 yazı tipi desteği sayesinde, "Chalkduster" true type yazı tipini uygulamamıza eklemek çok kolaydı:

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

Bu yazı tipi, uygulamadaki neredeyse tüm metinler için varsayılan yazı tipi olduğundan, gövde için varsayılan yazı tipi olarak belirledik.

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

CSS3 gradyan, gölge, yuvarlatılmış köşeler

Tüm degrade, gölge, şeffaflık ve yuvarlatılmış köşeler CSS3 ile yapılır. Bu, kullanıcı arayüzlerini oluşturmanın geleneksel .png yöntemine kıyasla gerçekten zaman kazandırıcı bir yöntemdi.

Ayrıca, kaydırma çubuğunun görünümünü ve tarzını özelleştirerek daha ince bir hale getirmek için gelişmiş CSS3 özelliklerini kullandık (WebKit tarayıcılarında kaydırma çubuklarına stil uygulamak 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ı kopyaladık ve hatta kayan sağ panel için yeni bir animasyon ekledik. CSS3 geçişleri sayesinde animasyon eklemek kolaydı ve en iyi performansı elde etmemizi sağladı.

Uygulamalarda üç ana animasyon vardı.

1.) Kaydırılabilir sağ bölme

İlk animasyon sağ bölmede (#rightPane) bulunur. Kullanıcı yeni bir test başlattığında kaydırılarak kapanır ve kullanıcı bir testi tamamladığında kaydırılarak 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 şu şekilde hareket ettirir:

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

Bu uygulamayla ilgili birkaç not:

  1. Uygulama boyutlarının sabit olduğu göz önüne alındığında, ".close" CSS sınıfını kullanabilir ve açık konumu kodladığımız şekilde kapatma konumunu da kodlayabilirdik.
  2. CSS "translate" özelliğini de kullanabilirdik. Bu, bölmenin "sol" özelliğini animasyonlu olarak değiştirmekten daha performanslı olurdu. Bu durum özellikle 3D dönüşümlerin donanım hızlandırmalı olduğu mobil cihazlar (iOS gibi) için geçerlidir.
  3. Orijinal konum, değişiklikten önce ayarlandığından bu durumda setTimeout kesinlikle gerekli değildir. Ancak bu, tarayıcının sağ bölmeyi kaydırmadan hemen önce testi göstererek animasyonun daha akıcı olmasını sağlar.

2.) Ayarlar iletişim kutusu animasyonu

Kullanıcı sağ taraftaki bir ayarı tıkladığında ayarlar iletişim kutusu ekranın alt kısmında görünür ve uygun bölüme ilerler.

Bunu başarmak için sağ bölmeye benzer bir geçiş yaptık. Yalnızca iletişim kutusunun ilk kez göründüğünde yaşanan sarsıntı sorununu çözmek biraz zaman aldı. Tarayıcıya iletişim kutusu kullanıcı arayüzünü önbelleğe almasını bildirmek için iletişim kutusunu bir kez görüntüleyip kaydırarak buraya ulaştık. İlk olarak display: none ile denedim. 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 z-index: -1 ile görüntülemekti. Bu sayede ayarlar kullanıcı için görünmez ancak tarayıcı için görünür hale geliyordu.

3.) Test başarısı veya yanlış mesaj animasyonu

Üçüncü animasyon aslında bir arada iki animasyondur. "Başarılı" veya "Hatalı" mesajı göründüğünde, önce bir noktaya kadar ölçeklendirin, biraz bekleyin ve son olarak daha da büyütün ve kaybolun. Bunun için iki CSS3 animasyon stilimiz var ve bunları webkitTransitionEnd etkinliğinde JavaScript aracılığıyla koordine ediyoruz.

.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ı veya başarısızlık sesi çıkarır. Basit bir seçim olarak ses etiketini kullanıp play()'ü çağırabilirsiniz. Aşağıdaki ses parçaları 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, yeni nesil web, masaüstü ve mobil uygulamaların geliştirilmesine olanak tanıyor. CSS3, uygulamanın görünümünü ve tarzını iPad için MathBoard'un gelişmişliğine yakın bir şekilde özelleştirmede etkili oldu. HTML5 depolama alanı, veri kalıcılığımız için mükemmel bir seçimdi. HTML5 sesinin basitliği ise iPad uygulamasını yakından kopyalamamıza olanak tanıdı.