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

Jeremy Chone

Giới thiệu

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

N2N-Apps là 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à ứng dụng di động thế hệ mới với công nghệ HTML5. Công ty được tài trợ vào năm 2010 bởi Jeremy Chone. Sau 11 năm kinh nghiệm về kỹ thuật và quản lý tại Netscape, Oracle và Adobe, công ty đã quyết định chia sẻ chuyên môn của mình với các doanh nghiệp nhằm xây dựng các ứng dụng web và ứng dụng 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 dành cho Cửa hàng Chrome trực tuyến xuống Tải MathBoard dành cho Cửa hàng Chrome trực tuyến (phiên bản miễn phí)

Yêu cầu

Các yêu cầu chính đối với dự án chuyển HTML5 này như sau:

1. Cổng có độ trung thực cao của giao diện và giao diện người dùng của ứng dụng iPad gốc.
2. Điều chỉnh cho phù hợp với kiểu dáng đích (tức là PC/Mac có bàn phím/chuột và màn hình cảm ứng).
3. Triển khai 100% các tính năng hiện hành.
4. Chủ yếu nhắm mục tiêu trình duyệt HTML5.
5. Đặt ứng dụng ở chế độ "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 của Google Chrome.
6. Tạo một phiên bản 1.0 có tất cả tính năng nhưng trình giải quyết vấn đề trong vòng chưa đầy một tháng.

Cấu trúc

Dựa trên các yêu cầu đó, chúng tôi quyết định chuyển sang cấu trúc sau:

1. HTML5: Vì chúng tôi không có bất kỳ 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 sử dụng jQuery vì nó mang lại cho chúng tôi một cách hiệu quả và hoàn hảo để thao tác DOM và sự kiện liên quan. jQuery cũng có lợi ích là tập trung vào DOM nhiều hơn, điều này có xu hướng làm cho việc 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 HTML5 MathBoard, chúng tôi cần một khung kiểu MVC hoặc MVP để sắp xếp tất cả các khung hiển thị khác nhau. SnowUI là một khung MVC đơn giản nhưng mạnh mẽ cùng với jQuery. Thư viện này cung cấp cơ chế MVC tập trung vào DOM và cách linh hoạt để xây dựng 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/chế độ kiểm soát hoặc mã tuỳ chỉnh nào mà họ cho là tối ưu.

Những điểm cần lưu ý khi dùng iPad đến 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à tương tác của người dùng với ứng dụng.

Hướng màn hình

iPad Mathboard chỉ được định hướng theo chiều dọc, điều này không tối ưu cho màn hình máy tính vì màn hình này thường được sử dụng theo chiều 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 chế độ xem trượt (hoạt ảnh bằng hiệu ứng chuyển đổi CSS3).

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 thao tác chạm

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 đầu vào. Trên iPad, bạn chỉ có giao diện cảm ứng, trên máy tính, bạn cần tính đến cả chuột và bàn phím.

Các nút điều khiển nhập liệu MathBoard trên iPad đã được trau chuốt rất đẹp. Chúng tôi muốn 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ợ cho các phím tắt và sao chép các chế độ điều khiển trê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ó điểm ảnh hoàn hảo:

Cài đặt phiên bản iPad so với HTML5

Như trong giao diện iPad, chúng ta 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 chế độ điều khiển. Bạn cũng có thể kéo đường thẳng đứng để nhanh chóng thay đổi các giá trị. Một hành vi lặp lại đã được triển khai cho click và keydown để người dùng có thể tăng tốc việc thay đổi giá trị khi nhấn chuột hoặc bàn phím.

Thêm tính năng hỗ trợ TAB để di chuyển từ trường nhập dữ liệu này sang trường nhập dữ liệu khác và mũi tên ← và → chuyể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ù bạn có thể tưởng tượng nếu triển khai tính năng này, nhưng việc vẽ số bằng chuột lại không thực sự hữu ích. Thay vào đó, chúng tôi quyết định dành nhiều thời gian hơn cho việc trau chuốt giao diện bàn phím thay vì triển khai bảng vẽ.

Tính năng HTML5

Trong phiên bản Web của MathBoard, chúng tôi 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 của họ để sau này phát lại. HTML5 MathBoard triển khai tính năng này bằng HTML5 localStorage thông qua giao diện DAO của 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 tôi lưu trữ tất cả các bài kiểm tra ở một định dạng JSON mà chúng tôi 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 thực sự được lưu trữ. Việc triển khai DAO sẽ xử lý các thông tin cụ thể về bộ nhớ.

Trong MathBoard, yêu cầu về bộ nhớ rất đơn giản. Chúng tôi 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ị chế độ cài đặt 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 lưu trữ:

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ữ tùy chỉnh. Nhờ hỗ trợ phông chữ CSS3, việc đưa phông chữ kiểu thực "Chalkduster" vào ứng dụng của chúng tôi là rất đơ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 phông chữ mặc định cho nội dung.

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

Độ dốc CSS3, bóng, góc bo tròn

Tất cả độ dốc, bóng, độ trong suốt và góc tròn được hoàn tất bằng CSS3. Đây là một trình tiết kiệm trò chơi thực sự so với cách sử dụng giao diện người dùng .png truyền thống.

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

Chuyển đổi CSS3

Đối với HTML5 MathBoard, 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ờ có các hiệu ứng chuyển đổi CSS3, việc thêm ảnh động không đáng kể và được phép mang lại hiệu suất tốt nhất.

Chúng ta có ba ảnh động chính trong các ứ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). Các trang trình bày sẽ đóng khi người dùng bắt đầu bài kiểm tra mới và các trang trình bày sẽ mở ra khi người dùng kết thúc 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 đây và kích hoạt hiệu ứng đó thông qua JavaScript. Kiểu mặc định của rightPane là 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 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. Vì kích thước ứng dụng là cố định, nên chúng tôi có thể đã sử dụng lớp ".close" CSS và mã hoá cứng vị trí đóng giống như cách chúng ta mã cứng vị trí đóng.
2. Chúng tôi cũng có thể sử dụng CSS "translate" (dịch) có hiệu quả hơn so với việc tạo ảnh động cho thuộc tính "left" của ngăn. Điều này đặc biệt đúng với các thiết bị di động (chẳng hạn như iOS) trong đó các phép biến đổi 3D được tăng tốc phần cứng.
3. setTimeout là bạn 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, cách 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 đúngPane 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 từ cuối màn hình và cuộn xuống phần thích hợp.

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

3.) Ảnh động về thông báo thành công hoặc không chính xác của câu đố

Ả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 tỷ lệ theo một điểm, đợi một chút và cuối cùng là mở rộng quy mô hơn nữa và biến mất. Để làm được điều này, chúng tôi có 2 kiểu ảnh động CSS3 và kết hợp kiểu ảnh động đó qua JavaScript trên 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 đố vui, ứng dụng sẽ thông báo thành công hoặc không thành công. Lựa chọn đơn giản là sử dụng thẻ âm thanh và gọi play() trên 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ự tạo điều kiện cho các ứng dụng web, ứng dụng máy tính và ứng dụng di động mới. CSS3 đóng vai trò quan trọng trong việc tuỳ chỉnh giao diện của ứng dụng để phù hợp chặt chẽ với tính tinh vi cao của MathBoard dành cho iPad, bộ nhớ HTML5 là lựa chọn hoàn hảo cho việc lưu trữ dữ liệu bền vững và tính đơn giản của âm thanh HTML5 đã cho phép chúng tôi sao chép chặt chẽ với ứng dụng iPad.