กรณีศึกษา - HTML5 MathBoard

Jeremy Chone

เกริ่นนำ

MathBoard บน iPad ซึ่งเป็นแอปพลิเคชัน PalaSoftware เป็นแอปพลิเคชันที่ปรับแต่งมาอย่างดีและมีภาพเคลื่อนไหวที่บอบบางแต่เป็นธรรมชาติ และมีรูปลักษณ์และความรู้สึกที่สมจริงและไม่เหมือนใคร เป้าหมายคือการทำพอร์ตที่มีความแม่นยำสูงสุดของแอปพลิเคชัน iPad ไปยัง HTML5

N2N-Apps เป็นบริษัทพัฒนาซอฟต์แวร์ที่มุ่งเน้นการสร้างแอปพลิเคชันบนเว็บและอุปกรณ์เคลื่อนที่รุ่นใหม่ด้วยเทคโนโลยี HTML5 บริษัทได้รับเงินทุนสนับสนุนในปี 2010 โดย Jeremy Chone ผู้ซึ่งมีประสบการณ์ด้านวิศวกรรมและการจัดการจาก Netscape, Oracle และ Adobe มา 11 ปี ได้ตัดสินใจที่จะแชร์ความเชี่ยวชาญของตนกับธุรกิจต่างๆ เพื่อสร้างแอปพลิเคชันคุณภาพสูงบนเว็บและอุปกรณ์เคลื่อนที่ N2N-Apps มุ่งเน้นคุณภาพ และความเร็วในการนำส่ง

ดาวน์โหลด MathBoard สำหรับ Chrome เว็บสโตร์ ดาวน์โหลด MathBoard สำหรับ Chrome เว็บสโตร์ (เวอร์ชันฟรี)

ข้อกำหนด

ข้อกำหนดหลักสำหรับโปรเจ็กต์การโอน HTML5 นี้คือ:

1. พอร์ตที่มีความแม่นยำสูงสำหรับรูปลักษณ์และอินเทอร์เฟซผู้ใช้เดิมของแอปพลิเคชัน iPad
2. ปรับให้เข้ากับรูปแบบของอุปกรณ์เป้าหมาย (เช่น PC/Mac ที่มีแป้นพิมพ์/เมาส์เทียบกับหน้าจอสัมผัส)
3. ใช้ฟีเจอร์ที่เกี่ยวข้อง 100%
4. กำหนดเป้าหมายเบราว์เซอร์ HTML5 เป็นหลัก
5. ทำให้แอปพลิเคชันเป็นแบบ "ไร้เซิร์ฟเวอร์" เพื่อให้แอปพลิเคชันทำงานได้บนไคลเอ็นต์ทั้งหมด และสามารถโฮสต์บนเซิร์ฟเวอร์แบบคงที่หรือแอปพลิเคชันแพ็กเกจของ Google Chrome
6. สร้างเวอร์ชัน 1.0 ที่มีฟีเจอร์ทั้งหมดยกเว้นเครื่องมือแก้ปัญหาในเวลาไม่ถึง 1 เดือน

สถาปัตยกรรม

ตามข้อกำหนด เราจึงตัดสินใจใช้สถาปัตยกรรมต่อไปนี้

1. HTML5: เนื่องจากเราไม่มีข้อกำหนดใดๆ ในการสนับสนุน HTML4 เราจึงตัดสินใจใช้ HTML5 เป็นพื้นฐาน
2. jQuery: ถึงแม้ HTML5 จะมีตัวเลือกขั้นสูงมากมายที่ทำให้ jQuery ยอดเยี่ยมมาก แต่เราก็ตัดสินใจที่จะใช้ jQuery ต่อไปเนื่องจากเป็นวิธีที่มีประสิทธิภาพและสมบูรณ์มากในการจัดการ DOM และเหตุการณ์ที่เกี่ยวข้อง นอกจากนี้ jQuery ยังได้ประโยชน์จากการทำให้ jQuery เป็นศูนย์กลางมากกว่า ซึ่งมีแนวโน้มที่จะทำให้การออกแบบและการใช้งานแอปพลิเคชันใกล้เคียงกับ HTML ยิ่งขึ้น
3. SnowUI: jQuery มี API ที่ยอดเยี่ยมและแนวทางปฏิบัติที่ดีที่สุดในการทำงานร่วมกับ DOM อย่างไรก็ตาม สำหรับแอปพลิเคชัน HTML5 MathBoard เราต้องการเฟรมเวิร์กรูปแบบ MVC หรือ MVP เพื่อจัดกลุ่มมุมมองต่างๆ ทั้งหมดเข้าด้วยกัน SnowUI เป็นเฟรมเวิร์ก MVC ที่เรียบง่ายแต่ทรงประสิทธิภาพซึ่งอยู่เหนือ jQuery โดยมอบกลไก MVC ที่เน้น DOM และวิธีที่ยืดหยุ่นในการสร้างคอมโพเนนต์ที่กำหนดเอง ขณะเดียวกันก็เปิดโอกาสให้นักพัฒนาแอปพลิเคชันได้ใช้ไลบรารีวิดเจ็ต/การควบคุมหรือโค้ดที่กำหนดเองซึ่งเห็นว่าเหมาะสมที่สุด

การพิจารณาระหว่าง iPad กับ PC

เมื่อย้ายแอปพลิเคชันไปยัง HTML5 สำหรับการใช้งานบน PC เราต้องปรับเปลี่ยนการออกแบบและการโต้ตอบของผู้ใช้หลายอย่างในแอปพลิเคชัน

การวางแนวหน้าจอ

iPad MathBoard แสดงในแนวตั้งเท่านั้น ซึ่งไม่เหมาะกับหน้าจอ PC เพราะมักใช้งานในแนวนอน เราจึงจัดระเบียบการออกแบบ UI ใหม่ และย้ายแผงการตั้งค่าไปทางด้านขวาในมุมมองแบบเลื่อน (เคลื่อนไหวโดยใช้การเปลี่ยน CSS3)

การวางแนวหน้าจอของ iPad เทียบกับ HTML5

การป้อนข้อมูล: แป้นพิมพ์/เมาส์ กับ การแตะ

ความแตกต่างสำคัญอีกอย่างหนึ่งระหว่างเวอร์ชัน iPad และเวอร์ชันเว็บคืออินเทอร์เฟซอินพุต บน iPad คุณมีเฉพาะอินเทอร์เฟซแบบสัมผัสบน PC คุณต้องคำนึงถึงทั้งเมาส์และแป้นพิมพ์

การควบคุมการป้อนข้อมูลด้วย MathBoard บน iPad ทำได้สวยงามมาก เราอยากให้การแสดง ความแม่นยำสูงเหมือนกันในอินเทอร์เฟซเว็บ โซลูชันนี้เพิ่มการรองรับแป้นพิมพ์ลัดและการจำลองการควบคุม UI โดยใช้การจัดตำแหน่ง CSS พอร์ตไปยัง HTML5 นั้นสมบูรณ์แบบเป็นพิกเซล:

การตั้งค่าเวอร์ชัน iPad เทียบกับ HTML5

ในอินเทอร์เฟซของ iPad เราอนุญาตให้ผู้ใช้คลิกลูกศรด้านซ้ายและขวาเพื่อเปลี่ยนค่าของการควบคุมได้ คุณยังสามารถลากเส้นแนวตั้งเพื่อเปลี่ยนค่าอย่างรวดเร็วได้ด้วย ใช้ลักษณะการทำงานซ้ำสำหรับ click และ keydown เพื่อให้ผู้ใช้เร่งการเปลี่ยนแปลงค่าเมื่อมีการกดเมาส์หรือแป้นพิมพ์

เพิ่มการรองรับแท็บเพื่อย้ายจากช่องป้อนข้อมูลหนึ่งไปยังอีกช่องหนึ่ง โดยมี ← และ → ลูกศรหมุนเวียนค่าต่างๆ

ฟีเจอร์หนึ่งในเวอร์ชัน iPad ที่ไม่ค่อยเหมาะกับอินเทอร์เฟซ PC มากนัก ก็คือกระดานวาดภาพ แม้ว่าจะอาจจะซับซ้อนและค่อนข้างซับซ้อน แต่การวาดตัวเลขด้วยเมาส์นั้นไม่ค่อยได้ผลนัก เราจึงตัดสินใจที่จะใช้เวลาปรับแต่งอินเทอร์เฟซแป้นพิมพ์มากกว่าการใช้กระดานวาดภาพ

ฟีเจอร์ HTML5

ใน MathBoard เวอร์ชันเว็บ เราใช้ฟีเจอร์ HTML5 หลายอย่าง ดังนี้

พื้นที่เก็บข้อมูลในเครื่อง

MathBoard ให้ผู้ใช้บันทึกแบบทดสอบไว้เล่นซ้ำภายหลังได้ HTML5 MathBoard ใช้ฟีเจอร์นี้ได้โดยใช้ HTML5 localStorage โดยใช้อินเทอร์เฟซ DAO ของ SnowUI

localStorage เป็นตัวเลือกที่ดี เนื่องจากข้อมูลเรียบง่ายมากพอและไม่จำเป็นต้องมีการจัดทำดัชนีขั้นสูง เราจัดเก็บแบบทดสอบทั้งหมดไว้ในรูปแบบ JSON รูปแบบเดียวที่เราJSON.stringifyเป็นข้อความ

SnowUI DAO เป็น Wrapper อินเทอร์เฟซ CRUD แบบง่าย ซึ่งช่วยให้ UI ดึงข้อมูลได้โดยไม่ต้องกังวลว่าจะจัดเก็บข้อมูลดังกล่าวไว้อย่างไร การใช้งาน DAO จะดูแลเฉพาะรายละเอียดของพื้นที่เก็บข้อมูล

ข้อกำหนดของพื้นที่เก็บข้อมูลใน MathBoard เป็นข้อกำหนดที่เรียบง่าย เราจึงจำเป็นต้องจัดเก็บ เฉพาะการตั้งค่าของผู้ใช้และข้อมูลแบบทดสอบเท่านั้น ทั้ง 2 ตำแหน่งที่จัดเก็บเป็นสตริง JSON ใน localStorage

ตัวอย่างเช่น DAO สำหรับค่าการตั้งค่ามีลักษณะดังนี้

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

เมื่อลงทะเบียน DAO นี้สำหรับ settingValue แล้ว UI จะเรียกใช้ดังต่อไปนี้ได้โดยไม่ต้องกังวลเกี่ยวกับตรรกะของ Store

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

แบบอักษร CSS3

MathBoard ใช้แบบอักษรที่กำหนดเอง เนื่องจากการสนับสนุนแบบอักษร CSS3 ทำให้ เราใส่แบบอักษรประเภท "Chalkduster" จริงลงในแอปพลิเคชันได้อย่างง่ายดาย

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

และเนื่องจากแบบอักษรนี้เป็นค่าเริ่มต้นสำหรับข้อความเกือบทั้งหมดในแอปพลิเคชัน เราจึงกำหนดให้แบบอักษรนี้เป็นค่าเริ่มต้นสำหรับเนื้อความ

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

การไล่ระดับสี CSS3, เงา, มุมโค้งมน

การไล่ระดับสี เงา ความโปร่งใส และมุมโค้งมนทั้งหมดทำได้ด้วย CSS3 นี่คือคุณภาพที่ประหยัดเกมได้อย่างแท้จริง เมื่อเทียบกับรูปแบบ .png ดั้งเดิมของอินเทอร์เฟซผู้ใช้

นอกจากนี้ เรายังใช้คุณสมบัติ CSS3 ขั้นสูงเพื่อปรับแต่งรูปลักษณ์ของแถบเลื่อนเพื่อให้มีความละเอียดยิ่งขึ้น (โปรดดูการจัดรูปแบบแถบเลื่อนใน WebKit ใน http://webkit.org/blog/363/styling-scrollbars/)

การเปลี่ยน CSS3

สำหรับ HTML5 MathBoard เราจำลองภาพเคลื่อนไหวทั้งหมดของ iPad และแม้แต่เพิ่มภาพเคลื่อนไหวใหม่สำหรับแผงด้านขวาแบบเลื่อน ด้วยการเปลี่ยน CSS3 การเพิ่มภาพเคลื่อนไหวจึงไม่ใช่เรื่องง่ายและทำให้ได้ประสิทธิภาพที่ดีที่สุด

เรามีภาพเคลื่อนไหวหลัก 3 รายการในแอปพลิเคชัน

1.) แผงเลื่อนด้านขวา

ภาพเคลื่อนไหวแรกจะอยู่ในแผงด้านขวา (#rightPane) ซึ่งจะเลื่อนปิดเมื่อผู้ใช้เริ่มแบบทดสอบใหม่และสไลด์จะเปิดขึ้นเมื่อผู้ใช้ทำแบบทดสอบจบ เราใช้การเปลี่ยน CSS ต่อไปนี้และทริกเกอร์ผ่าน JavaScript เพื่อสร้างเอฟเฟกต์นี้ รูปแบบเริ่มต้นของ rightPane เปิดอยู่

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

เมื่อผู้ใช้เริ่มทำแบบทดสอบ ตรรกะของ JavaScript จะย้ายแผงดังนี้

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

ข้อควรทราบบางประการเกี่ยวกับการติดตั้งใช้งานนี้

1. เนื่องจากขนาดแอปพลิเคชันคงที่ เราจึงอาจใช้คลาส CSS ".close" และฮาร์ดโค้ดตำแหน่งปิดไว้เหมือนกับที่เราฮาร์ดโค้ดแอปแบบเปิด
2. เรายังใช้ CSS "translate" ได้ ซึ่งน่าจะมีประสิทธิภาพมากกว่าการทำให้คุณสมบัติ "ซ้าย" ของแผงเคลื่อนไหว โดยเฉพาะอย่างยิ่งในอุปกรณ์เคลื่อนที่ (เช่น iOS) ซึ่งการแปลงแบบ 3 มิติจะใช้ฮาร์ดแวร์เร่งการแสดงผล
3. setTimeout ไม่จำเป็นมากในกรณีนี้ เนื่องจากตำแหน่งเดิมถูกกำหนดไว้ก่อนการแก้ไข แต่จะช่วยให้เบราว์เซอร์ทำให้ภาพเคลื่อนไหวราบรื่นขึ้นโดยแสดงแบบทดสอบก่อนเลื่อนลูกศรขวา

2.) ภาพเคลื่อนไหวของกล่องโต้ตอบการตั้งค่า

เมื่อผู้ใช้คลิกการตั้งค่าทางด้านขวา กล่องโต้ตอบการตั้งค่าจะปรากฏขึ้นจากด้านล่างของหน้าจอ แล้วเลื่อนลงไปที่ส่วนที่เหมาะสม

เราจึงต้องเปลี่ยนที่แผงด้านขวาในลักษณะที่คล้ายกัน สิ่งเดียวที่ต้องใช้เวลาก็คือแก้ปัญหาความไม่สม่ำเสมอเมื่อปรากฏกล่องโต้ตอบครั้งแรก หากต้องการสั่งให้เบราว์เซอร์แคช UI ของกล่องโต้ตอบ เราจะแสดง URL นั้น 1 ครั้งแล้วเลื่อนไปที่หน้าจอ ตอนแรกเราได้ลองใช้ display: none วิธีนี้ไม่ถูกต้องเนื่องจากเบราว์เซอร์คาดไว้ว่าไม่จำเป็นต้องแสดงกล่องโต้ตอบ วิธีแก้ไขคือการแสดงการตั้งค่าด้วย z-index: -1 ในการเริ่มต้น ทำให้ผู้ใช้มองไม่เห็นแต่เบราว์เซอร์

3.) แบบทดสอบสําเร็จหรือภาพเคลื่อนไหวของข้อความที่ไม่ถูกต้อง

ภาพเคลื่อนไหวที่สามเป็น 2 ใน 1 จริงๆ เมื่อข้อความ 'สำเร็จ' หรือ 'ไม่ถูกต้อง' ปรากฏขึ้น ให้ปรับขนาดทีละจุด รอสักครู่ และสุดท้าย ปรับขนาดให้ใหญ่ขึ้นและหายไป สำหรับกรณีนี้ เรามีภาพเคลื่อนไหว CSS3 2 รูปแบบ และจัดเรียงผ่าน JavaScript ในเหตุการณ์ 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);

แท็กเสียง

เมื่อผู้ใช้ตอบคำถาม หมายความว่าแอปพลิเคชันจะส่งเสียงว่าสำเร็จหรือไม่ผ่าน วิธีเดียวคือการใช้แท็กเสียงและเรียกใช้ play() กับแท็กดังกล่าว ระบบจะเพิ่มบิตเสียงเหล่านี้ลงในหน้าหลักของแอปพลิเคชัน

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

บทสรุป

HTML5 เปิดใช้งานแอปพลิเคชันบนเว็บ เดสก์ท็อป และอุปกรณ์เคลื่อนที่รูปแบบใหม่ได้อย่างแท้จริง CSS3 เป็นเครื่องมือในการปรับแต่งรูปลักษณ์ของแอปพลิเคชันให้สอดรับกับความเชี่ยวชาญขั้นสูงของ MathBoard สำหรับ iPad อย่างใกล้ชิด พื้นที่เก็บข้อมูล HTML5 จึงเป็นอันสมบูรณ์แบบสำหรับความต่อเนื่องของข้อมูล และความเรียบง่ายของเสียง HTML5 ช่วยให้เราจำลองแอป iPad ได้อย่างใกล้ชิด