html5 應用程式開發簡介

HTML5 應用程式開發簡介簡冠庭 ((mdream) Web Developer DEV310

<me /> !   “(mdream” !  Web Developer, not Designer

l  經歷了數十年的 Web 技術演化，從 FrontPage 到 HTML5

l  但至今還是 PhotoShop 苦手，只能用小畫家 !  不敢妄稱自己是 Programmer

l  各位前輩大家好 m(_ _)m

HTML5 文字雲，hKp://(mc.idv.tw/wordcloud/

Outline !  瀏覽器環境簡介 !  何謂 HTML5 新技術 !  開發環境與預設樣板、常用函式 !   IE10 新功能選輯，介紹與範例 !  Web 技術在哪裡？ !  結論

在網頁裡寫程式

JavaScript

CSS 外觀

DOM 樹

HTML 文件

How browsers work: Behind the scenes of modern web browsers hKp://taligarsiel.com/Projects/howbrowserswork1.htm

這些縮寫是什麼？ !   HTML 文件標記語言（1991）

!   描述單純的文件與交互索引連結 !   網頁應用程式的起始檔案（crica. 2004）

!   CSS 樣式語言（1995） !   操弄 HTML 元素外觀 !   動態的外觀（2010）

!   JavaScript 程式語言（ECMAScript；1996） !   Event-‐based，動態操作 HTML 與 CSS 定義，運算 !   取得外部資料（XMLHKpRequest，2004）

!   Document Object Model（DOM）（1996） !   HTML 文件解讀後重建的元素樹與功能函式

張惠妹《姊妹》（1996）

JavaScript

CSS 外觀

DOM 樹

HTML 文件

Web as an Applica(on Plaborm

HTML5 與他的朋友

!  新的 <HTML 元素 />？ !   <blink> 和 <marquee> 事件重演？

!   Buzzword™？ !  水果公司教主拿來抵抗 Flash 的東西？

hKp://lovesansrival.blogspot.com/2010/10/first-‐internet-‐browser-‐wars.html

HTML5 與他的朋友是 … !  瀏覽器的新 API 規格，讓開發者取得

l  更好的程式開發架構 l  暴露 OS 功能 l  標準化介面

hKp://www.w3.org/html/logo/

更好的程式開發架構

!   Library, not Framework !  但是在這之上可以很方便的設計出自己的

frameworks，發揮高度自由 !  延伸既有的語言功能

!   Say good bye to some of the “JavaScript PaKerns”


暴露 OS 功能

!   2D 繪圖、重力計、檔案讀取、字型、地理感知、資料庫、多執行緒 … !   Typed Arrays 物件相當於暴露記憶體位址


標準化介面

!  由標準組織與各家廠商組成的工作小組設計，各家瀏覽器均使用相同介面 !   但還是有針對目標平台的特異功能

!  不由單一廠商把持的程式平台 !   不看 A 公司、G 公司、O 公司或是 M 公司的臉色吃飯


hKp://xkcd.com/934/

-‐ 我是 Mac -‐ 我是 PC -‐ 既然現在所有事情都在瀏覽器裡面完成，我們已經沒有差別了

<!doctype html>

IDE 那是什麼，可以吃嗎？ !  瀏覽器＋除錯工具＝IDE !  不需編譯＊ !  使用任意文字編輯器編輯檔案

* 除非用了某些 Authoring Tools

Internet Explorer F12 Developer Tools

Chrome, Safari, Webkit Nightly Web Inspector

Opera Dragonfly

Firefox Web Console, Firebug

除錯訊息 console.log() 與主控台（Console） !  在程式碼插入 console.log() 可以傳送訊息出來

!  在 Console 可以直接在環境執行訊息 !   Console API:

hKp://gebirebug.com/wiki/index.php/Console_API

HTML 基本外殼因為有些事情還是講清楚比較好 <!doctype html> <html lang="zh-tw"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>TITLE</title> <link rel="stylesheet" href="assets/style.css"> </head> <body>  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script src="assets/script.min.js"></script> </body> </html>

HTML 基本外殼因為有些事情還是講清楚比較好 <!doctype html>  <html lang=“zh-tw”>  <head>  <meta charset=“utf-8”> <!– 編碼 --> <meta http-equiv=“X-UA-Compatible” content=“IE=edge”>  <title>TITLE</title>  <link rel=“stylesheet” href=“assets/style.css”>  </head> <body>   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>  <script src=“assets/script.min.js”></script>  </body> </html>

hKp://www.spreadshirt.co.uk/-‐C4408A6786516

JavaScript

CSS 外觀

DOM 樹

HTML 文件

Minimal HTML 就通通交給 JavaScript 吧！ <!doctype html> <html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge”> </head> <body><script src="assets/script.min.js"></script></body> </html>

JavaScript 嚴謹模式 ECMAScript 5 Strict Mode !  在檔案開頭加上

!   “Use Strict”; !  嚴謹模式下：

!   變數必須用 var 宣告明確的 scope !   禁止使用 with ! arguments.callee 屬性被禁用 !   …

!   For “The Good Part” !  另外，記住 eval is evil

jQuery Library The Dollar

!  將 DOM Element 物件$(包裝起來)成為 jQuery 物件，提供常用功能

$(”#neat").addClass("ohmy").show("slow"); var el = document.getElementById(‘neat’); if (!/\bohmy\b/.test(el.className) el.className += ‘ ohmy’;

html5shiv Library 世界沒有這麼美好

!   IE6/7/8 無法正確處理 HTML5 元素 !  在 <head> 使用 IE condi(onal comment，選擇性載入 html5.js

瀏覽器功能偵測因為不可能測試地球上所有瀏覽器

!  偵測該函式或物件是否存在 if (!window.FileReader) { … } if (!document.createElement(‘canvas’).getContext) { … } if (!Array.prototype.forEach) { … }

!  Modernizer 函式庫 ! Polyfill：JavaScript 墊片(shim)

Polyfill 範例

if (!Array.prototype.forEach) { Array.prototype.forEach = function(c,d){var e,a;if(this==null)throw new TypeError(" this is null or not defined");var b=Object(this),g=b.length>>>0;if({}.toString.call(c)!="[object Function]")throw new TypeError(c+" is not a function");d&&(e=d);for(a=0;a<g;){var f;a in b&&(f=b[Pk],c.call(e,f,a,b));a++}}; }

取自 Mozilla Developer Network，經過 Closure Complier 壓縮

Modernizr Library !  偵測超過 40 個瀏覽器 HTML5 功能 !  將結果存到 Modernizr 物件 !  在 <HTML> 元素加上 class，供切換樣式 !  提供條件式 script loader !  …

Modernizr Library 條件式載入 polyfill

Modernizr.load({ test: Modernizr.geolocation, yep : 'geo.js', nope: 'geo-polyfill.js' });

<h1>Hello World</h1>

網頁效能 API requestAnima(onFrame, setImmediate …

!  網站建置百寶箱的「雪花紛飛」動畫 !   最後修改時間是 2005 年 ! setInterval = 太快？太慢？ !   太快：不必要的運算，耗光電池 !   太慢：動畫卡卡的 snowtimer = setInterval("snowIE_NS6()", 10);

hKp://www.altan.hr/snow/index.html#eng

F.I.R. 飛兒樂團（2005）

setInterval vs requestAnimateFrame

http://msdn.microsoft.com/en-us/ie/hh272906

網頁效能 API vender prefix shim and fallback

window.requestAnimationFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback, element){ window.setTimeout(callback, 1000 / 60); }; })(); requestAnimationFrame( function step() { snowIE_NS6(); if (not_stopped) requestAnimationFrame(step); } );

hKp://paulirish.com/2011/requestanima(onframe-‐for-‐smart-‐anima(ng/

網頁效能 API

Web Workers 多執行緒

!  好慢？用 while(true) 最快？ while(true) { snowIE_NS6(); };

!  使用 Web Workers 將大量計算放到新的 thread，在 while loop 執行，再回傳結果 var worker = new Worker(‘./snow_calc.js’); worker.onmessage = function (ev) { … };

Web Workers 限制 !  無法存取 DOM

l  沒有 window 與其 global object，無法修改畫面 l  但是有 XMLHKpRequest 與 importScript() l  沒有 console.log() (T____T)

!  完全仰賴 postMessage() 來收發訊息給頁面 scope

Web Workers

Drag Drop API & File API 檔案存取

!  讓 script 可以讀取使用者指定的檔案 l  使用 <input type=“file”> 或是從檔案總管拖入

!  使用範例 !   拖放式選擇檔案 !   讀取檔案計算呈現 !   上傳前預覽

Drag Drop API & File API

Web 技術在哪裡？

Beyond Browsers !   Site-‐specific Browsers

!   HTA: HTML Applica(ons (.hta) !   Ac(veX Control 在 Windows 程式嵌入 IE

!  Web 與 OS 整合 !   IE4 的 Ac(ve Desktop（1997） !   Windows Widgets 等桌面小工具技術 !   IE9+ 釘選網站 !   Windows 8 Metro-‐style App

!  瀏覽器即 OS !   G 公司的 C 作業系統張雨生 (1966-‐1997)

Build Windows 2011 Keynote, http://www.buildwindows.com/

Metro UI start screen, http://www.microsoft.com/presspass/events/build/

Going Mobile !  智慧型手機的行動瀏覽器 !  Web App as App

!   A 公司 i 系列手機：「Add to Home Screen」功能 ! PhoneGap，支援 Windows Phone 7 等手機

JavaScript is more than web !  瀏覽器以外的 JavaScript 執行環境

!   Windows Script Host !   許多應用程式選用的巨集語言 ! Node.JS 網路伺服器 !   Titanium 跨平台應用程式開發平台 !   Mozilla Applica(on Plaborm (XUL Runner)

結論

Toward a more beau(ful web !  Web 是唯一的真正跨平台開發環境 !  Web 技術作為應用程式平台，受到各廠商一致支持 !   Single toolset for all plaborm

!  使用正確的樣板與函式庫，事半功倍 !   前面提到 jQuery 與 Modernizr

!  善用功能偵測，應用程式可以與多瀏覽器相容，或是提供相稱的功能

相關課程與內容使用 HTML5 開發遊戲程式 ( DEV311 ) 9/15/2011 10:20 – 11:30

hKp://caniuse.com/ (When can I use … 瀏覽器功能支援查詢)

hKp://diveintohtml5.org/ (Dive into HTML5 深入淺出談 HTML5 ) (英文)

Required Slide 給講師的備忘錄：請輸入與您相關課程名稱(課程代碼)、課程日期、時間、地點範例：微軟商業智慧完整藍圖及最佳案例分享 ( BIN201 ) 　　　2011/9/13 13:30 – 14:40 Room 101CD Required Slide

給講師的備忘錄：詳細課程時間還未出爐，請講師密切注意TechDays網站的課程資訊更新。課程資訊連結： hKp://www.microsow.com/taiwan/techdays2011/class.aspx

hKp://technet.microsow.com/zh-‐tw/default.aspx

Resources for IT Professionals

hKp://msdn.microsow.com/zh-‐tw/default.aspx

Resources for Developers

windows.microsow.com/zh-‐TW/internet-‐explorer/products/ie/home Microsow Internet Explorer 9 首頁

其他資源

Required Slide 給講師的備忘錄：在TechNet與msdn的區塊下方，您可自行放入相關的其他連結及連結名稱。

ie.microsow.com/testdrive/ Internet Explorer Test Drive (下載 IE 10 Preview 2) (英文)

hKp://msdn.microsow.com/zh-‐tw/ie/gg192966.aspx 給開發者的 Internet Explorer 平台預覽版指南

© 2009 Microsow Corpora(on. All rights reserved. Microsow, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The informa(on herein is for informa(onal purposes only and represents the current view of Microsow Corpora(on as of the date of this presenta(on. Because Microsow must respond to changing market condi(ons, it should not be interpreted to be a commitment on the part of Microsow, and Microsow cannot guarantee the accuracy of any informa(on provided awer the date of this presenta(on. MICROSOFT MAKES NO WARRANTIES, EXPRESS,

IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

html5 應用程式開發簡介

Technology