”HTML5 將移動終端與雲計算融為一體，所以它不只是技術，更是一種新概念，是一種各行各業都要把服務往移動終端整合的新概念”

為什麼要參加本講座？

1. 學習HTML5 = Mobile + Cloud的軟體架構
2. 學習HTML5與JavaScript程式碼的整合與組織模式
3. 建立HTML5應用開發的基本能力

雲端技術

介紹如何將網站平台化，使用JSON 製作Server-Side APIs，整合手機App

JavaScript in HTML5 開發

本講座以數個Design Pattern ，說明其與HTML5 的整合技術

HTML5 & 雲端整合: 深入Mobile & Cloud 設計模式 (課程大綱)

1. 再談 WOA (Web-Oriented Architect) • Device-Server 設計模式
• Async & Offline 將是主流架構
• JavaScript Prototype 王者歸來？		 30 mins
2. JavaScript 特性與重點 • Objects ＆ Functions
• Callback, Module & Exceptions
• Inheritance & Prototype		 30 mins
3. JavaScript DOM & Debug • Introducing JavaScript DOM
• Best Practice: Performance
• Debugging JavaScript & Benchmark		 60 mins
4. JavaScript with Browser: The Design Pattern • Creational Pattern
• jQuery & Modular Pattern
• Asynchronous Module in Browser		 60 mins
5. Organizing JavaScript Code, HTML5, AJAX and JSON • AJAX Pattern
• ‘div’ element & Dynamic data
• Separate View and Control: the MVC Model		 30 mins
6. Node.js 開發教學 • Node.js 使用案例 (Use Case)
• Request handlers
• Non-block requests
• Route requests		 30 mins
7. Node.js 實例與高級技術 • Node.js Process
• 如何 Spawn child process
• Proxying Node.js
• 實例研究		 30 mins

這門課程在學什麼？

本文出處：Jollen’s Blog

上週(6/15)在北京舉辦「課程名稱HTML5 & 雲端整合: 深入MOBILE & CLOUD 設計模式」課程。這門課是從 HTML5 觀念到實作的第一門課（The 1st lesson from concepts to practice），這門課的重點在於「設計模式」(Design pattern)。

當天介紹了「jQuery pattern」。jQuery pattern就是開發jQuery插件(Plugin)的方式，所以技術上倒也沒有什麼學問。不過，jQuery pattern有很高深的哲學道理，意思是說，在軟體工程領域裡，它創造了一個獨特的觀念。這個觀念就是jQuery知名的”$”(Dollar sign)，也就是「Selector」。

以下的例子，就是jQuery pattern：

$(“div#news”).html(“<h2>News Today</h2>”);

從jQuery設計模式的角度思考，如果今天我們想要透過WebSocket與伺服器溝通，並且在一個”div”裡來顯示結果，應該怎麼設計呢？想法如下：

1. 將WebSocket的功能寫成一個function

2. 將JavaScript function封裝成module

3. 在jQuery裡擴充新的函數，簡單說，就是製作一個jQuery插件(Plugin)

以下是一段程式碼樣板：

(function($) {
$.fn.createWebSocket = function () {
  if ("WebSocket" in window)
  {
     alert("WebSocket is supported by your Browser!");
     var ws = new WebSocket("ws://<you-ip-adderess>:8888/start");
     ws.onopen = function()
     {
     };
     ws.onmessage = function (evt) 
     { 
     };
     ws.onclose = function()
     { 
     };
     ws.onerror = function()
     { 
     };
  }
  else
  {
     alert("WebSocket NOT supported by your Browser!");
  }
};


})($);

上述的寫法，採用暱名模組來實作。接者，再將程式碼儲存為jquery.websocket.js。使用方法如下：

<!DOCTYPE html>
<head>
<script type='text/javascript' src="./jquery.min.js">
<script type='text/javascript' src="./jquery.websocket.js">
</head>
<body>
<div id="message"></div>
　
<script type="text/javascript">  
$("#message").createWebSocket();
</script>
</body>
</html>

這種做法也可以良好地組織HTML5與JavaScript程式碼。此外，JavaScript的module具備「Closure」的特性，即封閉性，可以避免一些衍生問題。

由於HTML5+JavaScript的設計思想，和Natvie App的作法有很大的不同，所以了解HTML5+Javascript的應用程式「如何設計」，會是重要的一門課。了解設計模式，除了能有效組織HTML5+JavaScript程式碼外，也能做出正確的設計。

先備知識

  • ● HTML5 標籤
  • ● JavaScript 基本語法

適合對象

  • ● 手機 App 開發人員
  • ● Web 開發人員
  • ● 美工設計人員
  • ● 圖書出版與編輯
  • ● 媒體業人員
  • ● 有意以HTML5開發應用的業者

報名費用

1.原價 2.仕橙廠商方案 3.早安鳥方案 4.團報與仕橙VIP方案 5.兩場合報優惠
NT$3,800(每人) NT$3,200(每人) NT$3,500(每人) NT$3,200(每人) NT$5,600(每人,兩場費用)
•繳費日期：2012/07/07前報名繳費(含現場報名)
•本講座恕無法合併使用折價卷與VIP 卡		 •繳費日期：2012/6/29
•仕橙企業客戶的員工參加本課程，皆享有此優惠		 •繳費日期：2012/6/29 前報名繳費
•本講座恕無法合併使用折價卷與VIP 卡		 •繳費日期：2012/6/29 前報名繳費
•團報：二人以上報名
•仕橙VIP：報名表須填寫VIP卡號，並請攜帶VIP卡報到
•本講座恕無法合併使用折價卷		 •繳費日期：2012/6/11 前報名繳費
•此為報名參加 6/19 與6/20 兩場研討講座者，且報名參加為同一人者，才可享有此優惠
•本講座恕無法合併使用折價卷與VIP 卡

2012 Android Day 學員專屬優惠

1.原價 2.一場優惠 3.兩場合報優惠
NT$3,800(每人) NT$2,980(每人) NT$5,400(每人)
•繳費日期：2012/6/19前報名繳費(含現場報名)
•本講座恕無法合併使用折價卷與仕橙VIP 卡		 •優惠期間：凡於 2012 Computex 展期間，報名並繳費者即享有此優惠（即 6/9前）
•優惠獲得方式：於填寫報名表時，請於 VIP Code 欄位中，填寫2012 Android Day的『 報到編號 』，並於開課當日出示『 Android Day 活動識別證 』即可
•本講座恕無法合併使用折價卷與仕橙VIP 卡		 •優惠期間：凡於 2012 Computex 展期間，報名並繳費者即享有此優惠（即 6/9前）
•優惠獲得方式：於填寫報名表時，請於 VIP Code 欄位中，填寫2012 Android Day的『 報到編號 』，並於開課當日出示『 Android Day 活動識別證 』即可
•此為報名參加 6/19 與6/20 兩場研討講座者，且報名參加為同一人者，才可享有此優惠
•本講座恕無法合併使用折價卷與仕橙VIP 卡

如何報名

  • 1. 下載報名表如下
  • 2. 請回傳至 contact@moko365.com 或傳真 (02) 2383-1660
  • 3. 客服人員將會主動與您連絡並寄發繳費通知

下載報名表

講座時間

日期：2012年07月07日（星期六）
時間：09:30~12:30，13:30~17:00

講座地點

地點：新領域教育訓練中心 A館
            台北市中正區館前路49 號4 樓405教室 (台灣產物大樓, 台灣銀行樓上)


檢視較大的地圖

主辦單位

協辦單位