Nghiên cứu điển hình – MathBoard HTML5

Jeremy Chone
Jeremy Chone

Giới thiệu

Ứng dụng MathBoard

MathBoard trên iPad, một ứng dụng PalaSoftware, là một ứng dụng được đánh bóng cao với nhiều ảnh động tinh tế nhưng tự nhiên và giao diện thực tế độc đáo. Mục tiêu là chuyển đổi ứng dụng iPad sang HTML5 với độ trung thực cao nhất.

N2N-Apps là một công ty Phát triển phần mềm tập trung vào việc xây dựng ứng dụng Web và Di động thế hệ mới bằng công nghệ HTML5. Công ty được Jeremy Chone tài trợ vào năm 2010. Sau 11 năm kinh nghiệm về kỹ thuật và quản lý tại Netscape, Oracle và Adobe, ông đã quyết định chia sẻ chuyên môn của mình với các doanh nghiệp để xây dựng các ứng dụng Web và Di động chất lượng cao. N2N-Apps tập trung vào chất lượng và tốc độ phân phối.

Tải MathBoard xuống Cửa hàng Chrome trực tuyến Tải MathBoard xuống Cửa hàng Chrome trực tuyến (phiên bản miễn phí)

Yêu cầu

Sau đây là các yêu cầu chính đối với dự án chuyển đổi sang HTML5 này:

  1. Cổng có độ trung thực cao của giao diện người dùng và giao diện ứng dụng iPad ban đầu.
  2. Điều chỉnh cho phù hợp với kiểu dáng mục tiêu (tức là máy tính/máy Mac có bàn phím/chuột so với màn hình cảm ứng).
  3. Triển khai 100% các tính năng hiện có.
  4. Nhắm mục tiêu chủ yếu đến trình duyệt HTML5.
  5. Tạo ứng dụng "không có máy chủ" để ứng dụng chạy hoàn toàn trên máy khách và có thể được lưu trữ trên máy chủ tĩnh hoặc ứng dụng đóng gói Google Chrome.
  6. Tạo phiên bản 1.0 có tất cả tính năng ngoại trừ trình giải quyết vấn đề trong vòng chưa đầy một tháng.

Kiến trúc

Kiến trúc

Dựa trên các yêu cầu, chúng tôi quyết định sử dụng cấu trúc sau:

  1. HTML5: Vì không có yêu cầu hỗ trợ HTML4 nào, nên chúng tôi quyết định sử dụng HTML5 làm cơ sở.
  2. jQuery: Mặc dù HTML5 có nhiều bộ chọn nâng cao giúp jQuery trở nên tuyệt vời, nhưng chúng tôi vẫn quyết định gắn bó với jQuery vì nó mang đến cho chúng tôi một cách thức rất mạnh mẽ và trưởng thành để thao tác với DOM và các sự kiện liên quan. jQuery cũng có lợi ích là tập trung nhiều hơn vào DOM, giúp thiết kế và triển khai ứng dụng gần với HTML hơn.
  3. SnowUI: jQuery cung cấp một API tuyệt vời và phương pháp hay nhất để làm việc với DOM. Tuy nhiên, đối với ứng dụng MathBoard HTML5, chúng ta cần một khung kiểu MVC hoặc MVP để điều phối tất cả các chế độ xem khác nhau. SnowUI là một khung MVC đơn giản nhưng mạnh mẽ dựa trên jQuery. Khung này cung cấp một cơ chế MVC tập trung vào DOM và một cách linh hoạt để tạo các thành phần tuỳ chỉnh, đồng thời tạo cơ hội cho nhà phát triển ứng dụng sử dụng bất kỳ thư viện tiện ích/thiết bị điều khiển hoặc mã tuỳ chỉnh nào mà họ cho là tối ưu.

Những điều cần cân nhắc khi chuyển từ iPad sang máy tính

Khi chuyển ứng dụng sang HTML5 để sử dụng trên máy tính, chúng tôi đã phải thực hiện một số sửa đổi đối với thiết kế và hoạt động tương tác của người dùng với ứng dụng.

Hướng màn hình

MathBoard trên iPad chỉ có hướng dọc, không tối ưu cho màn hình máy tính vì màn hình máy tính thường được sử dụng theo hướng ngang. Do đó, chúng tôi đã sắp xếp lại thiết kế giao diện người dùng và di chuyển bảng cài đặt sang bên phải, trên một chế độ xem trượt (hiệu ứng chuyển động bằng hiệu ứng chuyển đổi CSS3).

Hướng màn hình
Hướng màn hình iPad so với HTML5

Phương thức nhập: bàn phím/chuột so với cảm ứng

Một điểm khác biệt chính khác giữa phiên bản iPad và phiên bản Web là giao diện nhập. Trên iPad, bạn chỉ có giao diện cảm ứng, còn trên máy tính, bạn cần cân nhắc cả chuột và bàn phím.

Các nút điều khiển đầu vào MathBoard trên iPad được đánh bóng rất cao. Chúng tôi muốn có cùng một bản trình bày có độ chân thực cao trong giao diện Web. Giải pháp là thêm tính năng hỗ trợ phím tắt và sao chép các chế độ điều khiển giao diện người dùng bằng cách sử dụng tính năng định vị CSS. Cổng sang HTML5 có độ phân giải pixel hoàn hảo:

Thành phần điều khiển trên giao diện người dùng
Chế độ cài đặt phiên bản iPad so với HTML5

Giống như trong giao diện iPad, chúng tôi cho phép người dùng nhấp vào mũi tên trái và phải để thay đổi giá trị của một thành phần điều khiển. Bạn cũng có thể kéo đường dọc để thay đổi nhanh các giá trị. Hành vi lặp lại đã được triển khai cho clickkeydown để người dùng có thể tăng tốc thay đổi giá trị khi nhấn chuột hoặc bàn phím.

Hỗ trợ TAB được thêm để di chuyển từ trường nhập này sang trường nhập khác và các mũi tên ← và → luân phiên qua các giá trị.

Một tính năng trong phiên bản iPad không phù hợp với giao diện máy tính là bảng vẽ. Mặc dù có thể rất thú vị khi triển khai tính năng này, nhưng việc vẽ số bằng chuột không thực tế lắm. Thay vào đó, chúng tôi quyết định dành nhiều thời gian hơn để đánh bóng giao diện bàn phím thay vì triển khai bảng vẽ.

Các tính năng HTML5

Trong phiên bản Web của MathBoard, chúng ta sử dụng nhiều tính năng HTML5:

Bộ nhớ cục bộ

MathBoard cho phép người dùng lưu bài kiểm tra để phát lại sau. MathBoard HTML5 triển khai tính năng này bằng cách sử dụng localStorage HTML5 thông qua giao diện DAO SnowUI.

localStorage là một lựa chọn tự nhiên vì dữ liệu khá đơn giản và không yêu cầu lập chỉ mục nâng cao. Chúng ta lưu trữ tất cả bài kiểm tra ở một định dạng JSON mà chúng ta JSON.stringify dưới dạng văn bản.

snowUI DAO là một trình bao bọc giao diện CRUD đơn giản cho phép giao diện người dùng tìm nạp dữ liệu mà không phải lo lắng về cách dữ liệu được lưu trữ thực sự. Việc triển khai DAO sẽ xử lý các thông tin chi tiết về bộ nhớ.

Trong MathBoard, các yêu cầu về bộ nhớ rất đơn giản. Chúng ta chỉ cần lưu trữ chế độ cài đặt của người dùng và dữ liệu bài kiểm tra. Cả hai đều được lưu trữ dưới dạng chuỗi JSON trong localStorage.

Ví dụ: DAO cho giá trị cài đặt sẽ có dạng như sau:

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

Sau khi DAO này được đăng ký cho settingValue, giao diện người dùng có thể thực hiện lệnh gọi sau mà không cần lo lắng về logic cửa hàng:

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

Phông chữ CSS3

MathBoard sử dụng phông chữ tuỳ chỉnh. Nhờ tính năng hỗ trợ phông chữ CSS3, việc đưa phông chữ True Type "Chalkduster" vào ứng dụng của chúng ta trở nên đơn giản:

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

Và vì phông chữ này là mặc định cho hầu hết văn bản trong ứng dụng, nên chúng tôi đã đặt phông chữ này làm mặc định cho phần nội dung.

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

Hiệu ứng chuyển màu, bóng đổ, góc bo tròn CSS3

Tất cả hiệu ứng chuyển màu, bóng đổ, độ trong suốt và góc bo tròn đều được thực hiện bằng CSS3. Đây là một cách thực sự giúp tiết kiệm trò chơi so với cách tạo giao diện người dùng .png truyền thống.

Chúng tôi cũng sử dụng các thuộc tính CSS3 nâng cao để tuỳ chỉnh giao diện của thanh cuộn để thanh cuộn tinh tế hơn (xem http://webkit.org/blog/363/styling-scrollbars/ để tạo kiểu thanh cuộn trên trình duyệt WebKit).

Hiệu ứng chuyển đổi CSS3

Đối với MathBoard HTML5, chúng tôi đã sao chép tất cả ảnh động của iPad và thậm chí thêm một ảnh động mới cho bảng điều khiển trượt bên phải. Nhờ hiệu ứng chuyển đổi CSS3, việc thêm ảnh động trở nên đơn giản và mang lại hiệu suất tốt nhất.

Chúng tôi có 3 ảnh động chính trong ứng dụng.

1.) Ngăn trượt bên phải

Ảnh động đầu tiên nằm trên ngăn bên phải (#rightPane). Ảnh động này sẽ trượt đóng khi người dùng bắt đầu một bài kiểm tra mới và trượt mở khi người dùng kết thúc một bài kiểm tra. Để tạo hiệu ứng này, chúng tôi đã sử dụng hiệu ứng chuyển đổi CSS sau và kích hoạt hiệu ứng đó thông qua JavaScript. Kiểu mặc định của rightPane đang mở:

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

Khi người dùng bắt đầu một bài kiểm tra, logic JavaScript của chúng ta sẽ di chuyển bảng điều khiển:

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

Một số lưu ý về cách triển khai này:

  1. Do kích thước ứng dụng được cố định, chúng ta có thể sử dụng lớp CSS ".close" và mã hoá cứng vị trí đóng giống như cách chúng ta mã hoá cứng vị trí mở.
  2. Chúng ta cũng có thể sử dụng CSS "dịch", hiệu suất sẽ cao hơn so với việc tạo ảnh động cho thuộc tính "trái" của ngăn. Điều này đặc biệt đúng đối với các thiết bị di động (chẳng hạn như iOS) khi các phép biến đổi 3D được tăng tốc phần cứng.
  3. setTimeout không thực sự cần thiết trong trường hợp này vì vị trí ban đầu đã được đặt trước khi sửa đổi. Tuy nhiên, việc này cho phép trình duyệt làm cho ảnh động mượt mà hơn bằng cách hiển thị bài kiểm tra ngay trước khi trượt rightPane vào.

2.) Ảnh động trong hộp thoại cài đặt

Khi người dùng nhấp vào một chế độ cài đặt ở bên phải, hộp thoại cài đặt sẽ xuất hiện ở cuối màn hình và cuộn xuống phần thích hợp.

Để thực hiện việc này, chúng ta đã có một quá trình chuyển đổi tương tự sang ngăn bên phải. Việc duy nhất mất chút thời gian là giải quyết tình trạng giật khi hộp thoại xuất hiện lần đầu. Để hướng dẫn trình duyệt lưu giao diện người dùng của hộp thoại vào bộ nhớ đệm, chúng ta đã hiển thị giao diện người dùng đó một lần và cuộn đến giao diện người dùng đó. Ban đầu, chúng ta đã thử với display: none. Cách tiếp cận này là không chính xác vì trình duyệt giả định rằng không cần hiển thị hộp thoại. Giải pháp là hiển thị các chế độ cài đặt bằng z-index: -1 khi khởi chạy, làm cho người dùng không nhìn thấy nhưng trình duyệt có thể nhìn thấy.

3.) Ảnh động thông báo về việc làm bài kiểm tra thành công hoặc không chính xác

Ảnh động thứ ba thực sự là hai trong một. Khi thông báo "thành công" hoặc "không chính xác" xuất hiện, trước tiên, hãy điều chỉnh theo tỷ lệ đến một điểm, đợi một chút rồi điều chỉnh theo tỷ lệ lớn hơn và biến mất. Để làm việc này, chúng ta có hai kiểu ảnh động CSS3 và điều phối ảnh động đó thông qua JavaScript trên một sự kiện 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);

Thẻ âm thanh

Khi người dùng trả lời câu đố, ứng dụng sẽ phát ra âm thanh thành công hoặc không thành công. Cách đơn giản là sử dụng thẻ âm thanh và gọi play() trên các thẻ đó. Các bit âm thanh này được thêm vào trang chính của ứng dụng:

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

Kết luận

HTML5 thực sự đang hỗ trợ một thế hệ mới của các ứng dụng Web, máy tính và thiết bị di động. CSS3 là công cụ giúp tuỳ chỉnh giao diện của ứng dụng sao cho phù hợp với sự tinh vi của MathBoard cho iPad, bộ nhớ HTML5 phù hợp hoàn hảo với tính năng lưu trữ dữ liệu của chúng tôi và sự đơn giản của âm thanh HTML5 cho phép chúng tôi mô phỏng chính xác ứng dụng iPad.