課程名稱：八屏一雲時代來臨教你HTML5六小時打通(1)

講師：Jollen Chen <[email protected]>Blog：http://www.jollen.org/blog課程：http://www.moko365.com

課程專案：鴻海科技集團贊助課程課程名稱：八屏⼀一雲時代來臨教你HTML5六小時打通課程日期：2012/12/19 (三)課程時間：10:00~17:00

八屏一雲時代來臨教你HTML5六小時打通

Copyright (C) 2013 Moko365 Inc. All Rights Reserved.

本教材由仕橙3G教室製作與維護

1

http://www.moko365.com/enterprise/starting-html5-app

2

現場實況

3

現場實況

4

現場實況

5

現場實況

6

《八屏⼀一雲時代來臨教你HTML5六小時打通關》


LicenseThis work is licensed under a Creative Commons Attribution-NoDerivs 3.0 Unported License.

You are free:• to Share — to copy, distribute and transmit the work• to make commercial use of the work

Under the following conditions:

• Attribution — You must attribute the work in the manner specified by the author or licensor (but not in any way that suggests that they endorse you or your use of the work).

• No Derivative Works — You may not alter, transform, or build upon this work.

With the understanding that:

• Waiver — Any of the above conditions can be waived if you get permission from the copyright holder.• Public Domain — Where the work or any of its elements is in the public domain under applicable law, that status

is in no way affected by the license.• Other Rights — In no way are any of the following rights affected by the license:◦ Your fair dealing or fair use rights, or other applicable copyright exceptions and limitations;◦ The author's moral rights;◦ Rights other persons may have either in the work itself or in how the work is used, such as publicity or privacy

rights.• Notice — For any reuse or distribution, you must make clear to others the license terms of this work. The best way

to do this is with a link to this web page.

7



第一次寫 HTML5 就上手

8



HTML5 重要基礎<div>

<Canvas>

Web Socket

Web Storage

9



需要了解 HTML5 文件撰寫

Source: http://web-profile.com.ua/html/html5-document-structure/

<!doctype html><html><head><meta charset="utf-8"><title>page title</title></head> <body><header> header</header><nav> navigation</nav><article> <section>summary</section></article><aside> sidebar</aside><footer> footer</footer></body></html>

10



第⼀一個 HTML5 文件

11



1.html

12



2.html

13



第一次畫 Layout 就上手

14



CSS pixel定義於 CSS 裡的稱為 device pixel

非眼睛所見

圖像的像素

See more: http://www.quirksmode.org/mobile/viewports.html

#content { width: 128px;}

15



device pixel螢幕 (Screen) 的顯示像素

眼睛所見

16



high-resolution1 CSS pixel 需要 16 個 device pixel

更細緻

Source: www.w3.org/TR/css3-values/

17



with zoom out4 pixel

CSS pixel 等於 device pixel

Zoom out: ⼀一個 device pixel 包含多個 CSS pixel

Source: http://www.quirksmode.org/mobile/viewports.html

18



screen size

Source: Moko365 Inc.

screen.widthscreen.height

19



Screen Size 測量方式screen size 使用 device pixel 測量

20



window size


window.innerWidthwindow.innerHeight

21



viewport


window.innerWidthwindow.innerHeight

22



viewport


document.documentElement.clientWidthdocument.documentElement.clientHeight

23



visual viewport

visual viewport

“the part of the page that’s currently shown on-screen”

24



layout viewport

layout viewport

25



visual 不等於 layout

visual viewport

layout viewport

26



“width=320” 1 <!DOCTYPE html > 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 6 <link href="2.css" rel="stylesheet" type="text/css" /> 7 <meta name="viewport" content="width=320"> 8 <title>我在 Android World 2012 深圳：與會心得分享</title> 9 </head>

27



content widthcontent width = 900px

使用 %

1 #content { 2 width: 900px; 3 }

28



content = documentcontent width = document width

使用 %

1 #content { 2 width: 100%; 3 }

29



content = document, and viewportbefore after

30



其它 layout 屬性margin >> border >> padding

position >> box-sizing >> z

31



更多關於 viewport只適用於 mobile browser

手機瀏覽可讓 visual viewport = layout viewport

32



visual viewport

visual viewport

“the part of the page that’s currently shown on-screen”

33



“width=device-width”3.html

1 <!DOCTYPE html > 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 6 <link href="3.css" rel="stylesheet" type="text/css" /> 7 <meta name="viewport" content="width=device-width;"> 8 <title>我在 Android World 2012 深圳：與會心得分享</title> 9 </head>

34



圖片問題before after

35



圖片大小怎麼處理

1 #content { 2 width: 100%; 3 } 4 5 img { 6 width: 300px; 7 }

no good

36



Media QueryCSS @media rule

<style>@media screen { p.test {font-family:verdana,sans-serif;font-size:14px;} }@media print { p.test {font-family:times,serif;font-size:10px;} }@media screen,print { p.test {font-weight:bold;} }</style>

See more: http://www.w3schools.com/css/css_mediatypes.asp

37



Media Type

Source: http://www.w3schools.com/css/css_mediatypes.asp

38



不同的 Media Type

39



使用 Media Query大部份手機瀏覽器不實作 @media handheld

5.css 1 #content { 2 width: 100%; 3 } 4 5 @media screen { 6 img { 7 } 8 } 9 10 @media screen and (max-width: 480px) { 11 img { 12 width: 300px; 13 } 14 }

40



瀏覽器相容5.html at iOS6 6.html

41



解決問題解決方式

6.html

建議方式: fully implement

1 <!DOCTYPE html > 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 6 <link href="6.css" rel="stylesheet" type="text/css" /> 7 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 8 <title>我在 Android World 2012 深圳：與會心得分享</title> 9 </head>

42



ViewPort 與 ContentViewPort

Content (Surface)

43



ViewPort 等於 Layout Viewport

44



Scale = 2.0scale=1.0100% zoom480x320

(Content)

scale=2.0200% zoom960x640

(Content)

45



Scale考慮 Scaling

手機設定 scale=1.0 (100% zoom)

➡ one CSS pixel 等於 one device pixel

➡ 12px / 1.2em

➡ ppi = pixel per inch

➡ 240 ppi

46



使用 ViewPort<head> <title>Example</title> <meta name="viewport" content="width=device-width, user-scalable=no" /></head>

<meta name="viewport" content=" height = [pixel_value | device-height] , width = [pixel_value | device-width ] , initial-scale = float_value , minimum-scale = float_value , maximum-scale = float_value , user-scalable = [yes | no] , target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] " />

Source: Android Dev Guide. Portions of this page are reproduced from work created and shared by the Android Open Source Project and used according to terms described in the Creative Commons 2.5 Attribution License.

47



Media Query7.css 1 @media screen {

2 img { 3 } 4 #content { 5 width: 100%; 6 } 7 } 8 9 @media screen and (max-width: 480px) { 10 img { 11 width: 300px; 12 } 13 #content { 14 width: 100%; 15 } 16 }

48



自訂 Media Type

6 <link rel="stylesheet" 7 media="screen" 8 href="css/common.css" 9 type="text/css" /> 10 <link rel="stylesheet" 11 media="screen and (max-width: 480px)" 12 href="css/medium.css" 13 type="text/css" /> 14 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 15 <title>我在 Android World 2012 深圳：與會心得分享</title> 16 </head>

├── css│ ├── common.css│ └── medium.css└── index.html

49



多個 CSS├── css│ ├── common.css│ └── medium.css└── index.html

1 img { 2 width: 300px; 3 } 4 5 #content { 6 width: 100%; 7 }

1 img { 2 } 3 4 #content { 5 width: 100%; 6 }

├── css│ ├── common.css│ └── medium.css└── index.html

50



根據手機解析度定義Nexus S 4"@240dpi 480x800

Galaxy SII 4.3"@ 480x800

Galaxy Tab 2 7"@160dpi 600x1024

Galaxy Nexus 4.65"@320dpi 720x1280

HTC One X 4.7"@320dpi 720x1280

Galaxy SIII 4.8"@320dpi 720x1280

Galaxy Note 5.3"@320dpi 800x1280

Nexus 7 7"@213dpi 800x1280

51



Media Type 範圍

~ 480481 ~ 720721 ~ 800801 ~

52



依手機實作 CSS 6 <link rel="stylesheet" 7 media="screen and (max-width: 480px)" 8 href="css/480.css" 9 type="text/css" /> 10 <link rel="stylesheet" 11 media="screen and (max-width: 720px) and (min-width: 481px)" 12 href="css/720.css" 13 type="text/css" /> 14 <link rel="stylesheet" 15 media="screen and (max-width: 800px) and (min-width: 721px)" 16 href="css/800.css" 17 type="text/css" /> 18 <link rel="stylesheet" 19 media="screen and (min-width: 801px)" 20 href="css/large.css" 21 type="text/css" />

53



目前文件結構

├── css│ ├── 480.css│ ├── 720.css│ ├── 800.css│ └── large.css└── index.html

54



實作 CSS480.css 800.css

img { width: 300px;}

#content { width: 100%;}



720.css large.css





55



-webkit-device-pixel-ratioWebView 支援 “-webkit-device-pixel-ratio” CSS 樣式

➡ 0.75, 1.0, 1.5

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" />

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" />


56



Webkit 有自已的個性

#header { background:url(medium-density-image.png);}

@media screen and (-webkit-device-pixel-ratio: 1.5) { /* CSS for high-density screens */ #header { background:url(high-density-image.png); }}

@media screen and (-webkit-device-pixel-ratio: 0.75) { /* CSS for low-density screens */ #header { background:url(low-density-image.png); }

Figure 5. A web page with CSS that's targetted to specific screen densities using the -webkit-device-pixel-ratio media feature. Notice that the hdpi device shows a different image that's applied in CSS.


57



第一次學跨裝置 Font Size 就上手

58



property of the elementelement size

p { font-size: 1.2em } 表示比原本預設的大 20%

p {font-size: 14px} 不建議使用絕對值

59



Galaxy SII

60



HTC One X

61



em vs rem

“elements will be 20% greater the element”

p { font-size: 1.2em} p { font-size: 1.2rem}

“elements will be 20% greater then root em”

62



font size 建議做法將 root element 的 default font size 改為 10px

➡ 原本是 16px

使用 rem 單位

➡ 相對於 root element

63



em vs rembody { font-size:62.5%; }h1 { font-size: 2.4em; } /* =24px */p { font-size: 1.4em; } /* =14px */li { font-size: 1.4em; } /* =14px ? */

body { font-size:62.5%; }h1 { font-size: 2.4em; } /* =24px */p { font-size: 1.4em; } /* =14px */li { font-size: 1.4em; } /* =14px */

html { font-size: 62.5%; } body { font-size: 14px; font-size: 1.4rem; } /* =14px */h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */

16px * 0.625 = 10px

64



Base Property 觀念WebKit based browser 的問題

可使用 “Base” 觀念解決

➡ thierryk/base.css - https://gist.github.com/1396486

➡ “Styling for WebKit-based browsers”,

➡ http://www.css-101.org/articles/base-styles-sheet-for-webkit-based-browsers/index.php

65



修改 base font size將 default (base) font size 改為 8px

7 /* setting line-height and family while leaving default font-size using *rem * */ 8 9 html { 10 font: 62.5%/1.3 sans-serif; 11 } 12 13 /* zeroing out the default 8px margin */ 14 15 body { 16 font-size: 1.3rem; 17 margin: 0; 18 }

Root Element (HTML):16px * 0.625 = 10px10px / 1.3 = 7.69px = 8px

Body:8px * 1.3rem = 10px;

66



使用 base.css + 120% font sizeHTC One X (ratio = 50%)

Galaxy SII(ratio = 50%)

67



很重要但不能用切勿在 @media {} 裡使用 ‘rem’ 單位

@media {} 裡無法使用 ‘rem’ 單位 ?

➡ Bug 78295: Support for CSS rem unit in Media Queries,

➡ https://bugs.webkit.org/show_bug.cgi?id=78295

├── css│ ├── 480.css│ ├── 720.css│ ├── 800.css│ ├── base.css│ ├── common.css│ └── large.css└── index.html

1 p { 2 font-size: 1.2rem; 3 }

68



All in ‘12px’HTC One X

Android BrowserGalaxy SIIFirefox

Galaxy SIIAndroid Browser

Galaxy SIIFirefox

69



頁面放大

70



關掉 scaling 功能

24 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> 25 <title>我在 Android World 2012 深圳：與會心得分享</title> 26 </head>

71



使用 “font-size: 4vw”vw: viewport’s width (%)

4x165mm/100 = 6.6mm = 0.66cm

viewport 的實體大小 ? 用尺量 !

72



字的大小是 0.66 公分目前發佈的 webkit based 瀏覽器不支援

73



現在能用 vw 嗎Bad news: 瀏覽器不支援

➡ Please just wait.

Good news:

➡ Implement vw/vh/vmin (viewport sizes) from CSS 3 Values and Units,

➡ https://bugs.webkit.org/show_bug.cgi?id=27160 and

➡ http://trac.webkit.org/changeset/109656

74



第一次寫 Screen Detection 就上手

75



Screen 大小偵測iMac Galaxy SII HTC One X

76



找喳時間又到了Firefox Android Browser Android Browser

77



使用 adapt.js├── css│ ├── 480.css│ ├── 720.css│ ├── 800.css│ └── large.css└── index.html

78



多屏 UI 的關鍵Screen Detection: 使用 JavaScript 取代 Media Query

了解 window/document 的 width/height

設好 ViewPort

寫好不同 Media Type 的 CSS

找⼀一個好的 browser engine (webkit) 工程師

➡ webkit engineer 應該和 UI designer 合作

➡ 工程師不會告訴你這是他的錯

79



第一次學 JavaScript 就上手

80



www.codeyear.com

81



screenSize();<script>function screenSize() { var screenWidth, screenHeight, windowWidth, windowHeight;

screenWidth = screen.width; screenHeight = screen.height;

windowWidth = window.innerWidth; windowHeight = window.innerHeight;

alert("screenWidth: " + screenWidth + ", screenHeight: " + screenHeight); alert("windowWidth: " + windowWidth + ", windowHeight: " + windowHeight);}

screenSize();</script>

82



JavaScript 主要用途瀏覽器的程式語言

寫在 HTML 文件裡

主要目的是開發動態網頁

83



進階觀念Document ready 後才執行

Document 與 JavaScript 是並行載入 (concurrent)

84



使用 jQueryJavaScript 核心程式庫

JavaScript 的插件平臺

JavaScript 的外部程式庫

85



JavaScript Minify

“minify (compress) 後的版本”

jquery-1.8.3.min.js jquery-1.8.3.js

“未 minify，浪費載入時間”

86



偵測 Document Ready<script>function screenSize() { var screenWidth, screenHeight, windowWidth, windowHeight;

screenWidth = screen.width; screenHeight = screen.height;

windowWidth = window.innerWidth; windowHeight = window.innerHeight;

alert("screenWidth: " + screenWidth + ", screenHeight: " + screenHeight); alert("windowWidth: " + windowWidth + ", windowHeight: " + windowHeight);}

$(document).ready(screenSize);</script>

87



使用 $(document)

“selector. 從 DOM 裡找出指定的對象”

$

“DOM 裡面有一個 document 對象”

$(document)

88



載入後再執行

“接著呼叫 jQuery 的 ready() 函數”

$(document).ready()

“screenSize 是 ready 事件的 callback function”

$(document).ready(screenSize)

89



認識 DOMDOM

Document Object Model

document 是 DOM 裡的根 (root) 對象

每⼀一個標籤都是⼀一個對象，文件載入後掛進 DOM

學習 JavaScript 的重點是認識 DOM

JavaScript 的核心概念: Access DOM

不的標籤是不同的對象，並提供許多 API (函數)

90



認識 Selector<!doctype html><html><head><meta charset="utf-8"><title></title></head> <body><header></header><nav></nav><article> <section>summary</section> <div id=”notes”></div></article><aside></aside><footer></footer></body></html>

id=notes

var content = findElememtById(“notes”);

var content = $(“notes”);

91



二種選擇對象的方法

“呼叫 DOM 提供的函數來找出 notes”

var content = findElememtById(“notes”);

“使用 jQuery 選擇器來找出 notes”

var content = $(“notes”);

92



Anonymous Function 63 <script> 64 function screenSize() { 65 var screenWidth, 66 screenHeight, 67 windowWidth, 68 windowHeight; 69 70 screenWidth = screen.width; 71 screenHeight = screen.height; 72 73 windowWidth = window.innerWidth; 74 windowHeight = window.innerHeight; 75 76 alert("screenWidth: " + screenWidth + ", screenHeight: " + screenHeight); 77 alert("windowWidth: " + windowWidth + ", windowHeight: " + windowHeight); 78 } 79 80 $(document).ready(function() { 81 alert("OK!"); 82 }); 83 </script>

93



使用於 Callback function 參數

“具名函數”

function screenSize() {}

“匿名函數，使用於 callback function 參數”

function() {}

function screenSize() {}

“不需要名字”

94



認識 Anonymous Function匿名函數

function constant

lambda function

發源於 1958 LISP 語言

多種語言採用

經常使用於 Callback function 參數

在 JavaScript 裡，anonymous function 有別於 Closure

95



學習 jQuery 63 <script> 64 function screenSize() { 65 var screenWidth, 66 screenHeight, 67 windowWidth, 68 windowHeight; 69 70 screenWidth = screen.width; 71 screenHeight = screen.height; 72 73 windowWidth = window.innerWidth; 74 windowHeight = window.innerHeight; 75 } 76 77 $(document).ready(function() { 78 screenSize(); 79 $("#content").css("display", "none"); 80 $("#content").fadeIn("slow"); 81 }); 82 </script>

96



查詢函數用法

1 .css( propertyName )2 .css( propertyName, value )3 .css( propertyName, function(index, value) )4 .css( map )

.css();

.fadeIn( [duration] [, callback] )

.fadeIn();

97



動態修改 CSS

$(“#content”).css(“display”, “none”);

#content { display: none;}

98



DOM SelectorgetElememtById()

jQuery

Sizzle

99



JavaScript 重要基礎Object (物件觀念)

Module Pattern (模組製作)

輸入事件處理 (Input Events)

➡ Drag & Drop

DOM (Document Object Model)

100



Create Objects

var person = {

! name: "Jollen",

! job: "Software Developer",

!

! queryJob: function() {

! ! alert(this.job);

! }

};

person.queryJob();

101



JavaScript Constructor Patternfunction Person(name, job) {

! this.name = name;

! this.job = job;

! this.queryJob = function() {

! ! alert(this.job);

! };

}

// 將 Person() 視為 constructorvar person = new Person("Jollen", "Software Developer");

alert(person instanceof Person); // true

102



Closure (封閉性)

“沒有封閉...”

var base;

function square( ) { base = base * base;}

function() {var base;

function square( ) { base = base * base;}}

(function() {var base;

function square( ) { base = base * base;}})

(function() {var base;

function square( ) { base = base * base;}}) ();

“完成封閉，成為一個封包”

103



匯入外部封包(function($) {var base;

function square( ) { base = base * base; $(“#content”).html(base);}}) (jQuery);

“匯入 jQuery 封包”

$ = jQuery

104



jQuery PluginsAdd new methods to jQuery module (object).

105



做⼀一個 jQuery Plugin

$.fn.cover = function () {...};

106



將功能插件化

(function($) {var base;

$.fn.square = function( ) { base = base * base; $(“#content”).html(base);}}) (jQuery);

“插件要打包, 一個插件裡有一個函數”

107



插件裡有多個函數(function($) {var base;

$.fn.square = function( ) { base = base * base; $(“#content”).html(base);}$.fn.minus = function( ) { base = base - 10; $(“#content”).html(base);}

}) (jQuery);

“插件包, 這個插件裡有2個函數”

108



插件裡有多個函數(function($) {var base = 5;

$.fn.square = function( ) { base = base * base; this.html(base);}$.fn.minus = function( ) { base = base - 10; this.html(base);}

}) (jQuery);

up objct

<div id=”content”></div><div id=”message”></div><script>$(“#content”).square();$(“#message”).minus();</script>

109



this 的 up object 是 content<div id=”content”></div><div id=”message”></div><script>$(“#content”).square();$(“#message”).minus();</script> content

message

(function($) {var base = 5;

$.fn.square = function( ) { base = base * base; this.html(base);}

}) (jQuery);

function() { this}

110



第一次學 UI Framework 就上手

111



JavaScript UI FrameworkjQuery Mobile

jQuery Tools, http://flowplayer.org/tools/index.html

jQuery UI, http://jqueryui.com/home

Kendo UI, http://www.kendoui.com/

Ignite,

Prototype UI, http://www.prototype-ui.com/

MochaUI, http://mochaui.com/

UKI, http://ukijs.org/

112



非常多 Open Source 計畫iUI, http://code.google.com/p/iui/

Yahoo YUI, http://developer.yahoo.com/yui/

XUI, http://xuijs.com/

Alloy, http://alloy.liferay.com/

Jitsu, http://www.jitsu.org/jitsu/index.html

Qutensil, http://qutensil.com/

Dojo Mobile, http://http://dojotoolkit.org/

113



使用 jQuery Mobile

3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 6 <link rel="stylesheet" href="css/base.css" type="text/css" /> 7 <link rel="stylesheet" href="css/common.css" type="text/css" /> 8 <link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" type="text/css" /> ... 25 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> 26 <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script> 27 <script src="js/jquery.mobile-1.1.1.min.js" type="text/javascript"></script> 28 <title>我在 Android World 2012 深圳：與會心得分享</title> 29 </head>

114



jquery.ebook.js

1 (function() { 2 3 $.fn.cover = function() { 4 var ctx = this; 5 6 $(ctx).css("background", "#000000"); 7 $(ctx).css("color", "#ffffff"); 8 } 9 10 }) (jQuery);

115



javascriptcompressor.com

116



jquery.ebook.min.js

(function(){$.fn.cover=function(){var ctx=this;$(ctx).css("background","#000000");$(ctx).css("color","#ffffff")}})(jQuery);

117



直接修改不方便CSS 應定義在獨立的 .css 文件

使用 jQuery 的 .addClass() 來引用

118



jquery.ebook.css

1 .ebook_cover { 2 background: #000000; 3 color: #ffffff; 4 height: 30rem; 5 }

119



修改 index.html 8 <link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" type="text/css" /> 9 <link rel="stylesheet" href="css/jquery.ebook.css" type="text/css" /> . . 26 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> 27 <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script> 28 <script src="js/jquery.mobile-1.1.1.min.js" type="text/javascript"></script> 29 <script src="js/jquery.ebook.js" type="text/javascript"></script> . . 35 <div id="cover"> 36 <p>我在 Android World 2012 深圳：與會心得分享</p> 37 </div> . 89 $(document).ready(function() { 90 screenSize(); 91 $("#content").css("display", "none"); 92 $("#content").fadeIn("slow"); 93 $("#cover").cover(); 94 }); 95 </script>

120



jquery.ebook.js

1 (function() { 2 3 $.fn.cover = function() { 4 var ctx = this; 5 6 ctx.addClass("ebook_cover"); 7 } 8 9 }) (jQuery);

121



第一次學 jQuery Mobile 就上手

122



jQuery UI FrameworkjQTouch

jQuery Mobile

➡ http://jquerymobile.com/

123



“data-” attribute

The jQuery Mobile framework uses HTML5 data- attributes to allow for markup-based initialization and configuration of widgets. These attributes are completely optional; calling plugins manually and passing options directly is also supported.

124



data-role=”page”

<body data-role="page"> ...content goes here...</body></html>

使用 “data-” attribute

125

jQuery Mobile 頁面結構<body>

<div data-role="page">

<div data-role="header"> <h1>Page Title</h1> </div>

<div data-role="content"> <p>Page content goes here.</p> </div>

<div data-role="footer"> <h4>Page Footer</h4> </div></div>

</body></html>

126



Page TransitionsjQuery Mobile 支援 CSS3 方式的 Page Transition

可套用在 page link 或是 form (表單)

描述方式：

<a href="index.html" data-transition="pop">Home</a>

127

使用 Dialogs<div data-role="page">


<div data-role="content"> <p>Page content goes here.</p> <a href="page-2.html" data-rel="dialog">Open dialog</a> </div>


128

使用 Transition<div data-role="page">


<div data-role="content"> <p>Page content goes here.</p> <a href="page-2.html"

data-rel="dialog" data-transition="slidedown">Open dialog</a>

</div>


129



jQuery 佈景jQuery Mobile 支援 CSS3 方式的自定佈景 (theme)

使用 ThemeRoller 工具

130



第一次學 PhoneGap 就上手

131



將網站打包成 App

package com.moko365.examples.phonegap;

import android.app.Activity;import android.os.Bundle;

import com.phonegap.*;import org.apache.cordova.*;

public class HelloPhoneGapActivity extends ActivityDroidGap { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); super.loadUrl("file:///android_asset/www/index.html"); }}

132



應用程式的 UI: index.html

133



HTML5 App: 從這裡開始<!DOCTYPE HTML><html><head>

<title>PhoneGap</title><script type="text/javascript" charset="utf-8" src="phonegap.js"></script>

</head><body>

<h1>Hello World</h1></body></html>

134



使用 JavaScript 呼叫 Device APIhttp://docs.phonegap.com

135



Accelerometer APInavigator.accelerometer.getCurrentAcceleration(accelerometerSuccess, accelerometerError);

function onSuccess(acceleration) { alert('Acceleration X: ' + acceleration.x + '\n' + 'Acceleration Y: ' + acceleration.y + '\n' + 'Acceleration Z: ' + acceleration.z + '\n' + 'Timestamp: ' + acceleration.timestamp + '\n');};

function onError() { alert('onError!');};

navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);

136



acceleration.html<!DOCTYPE html><html> <head> <title>Acceleration Example</title> <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> <script type="text/javascript" charset="utf-8"> document.addEventListener("deviceready", onDeviceReady, false);

// PhoneGap is ready // function onDeviceReady() { navigator.accelerometer.getCurrentAcceleration(onSuccess, onError); } function onSuccess(acceleration) { alert('Acceleration X: ' + acceleration.x + '\n' + 'Acceleration Y: ' + acceleration.y + '\n' + 'Acceleration Z: ' + acceleration.z + '\n' + 'Timestamp: ' + acceleration.timestamp + '\n'); } function onError() { alert('onError!'); } </script> </head> <body> <h1>Example</h1> <p>getCurrentAcceleration</p> </body></html>

137



Native Web App 觀念


Figure 1. You can make your web content available to users in two ways: in a traditional web browser and in an Android application, by including a WebView in the layout.

138



CanvasHTML5 新增的繪圖標籤

不同瀏覽器的支援程度不同

139



使用 <Canvas><canvas id="cover"></canvas>

<script>var canvas = document.getElementById("cover");

var ctx = canvas.getContext("2d");!canvas.width = 480;canvas.height = 640;

ctx.fillStyle = "black";ctx.beginPath();ctx.arc(100, 100, 100, 0, Math.PI * 2, true);ctx.fill();

ctx.fillStyle = "white";ctx.beginPath();ctx.arc(100, 100, 50, 0, Math.PI * 2, true);ctx.fill();</script>

推薦網站：http://www.javascriptkit.com/domref/

140



Audio

<audio controls id="player"><source src="test.ogg"/></audio>

<script>var audio = document.getElementById("player");

document.onkeydown = function(e) {! if (e.keyCode == 83) { // 'P': Start! ! audio.pause();! } else if (e.keyCode == 80) {! ! audio.play(); // 'P': Play! }}</script>

141



第一次學 Event 處理就上手

142



處理 Click 事件

document.getElementById("content").addEventListener("click", function() {}, false);

143



‘touchmove’ 事件

Touch X: <input id="touchx"><br/>Touch Y: <input id="touchy">

<script>var touchx = document.getElementById("touchx"),! touchy = document.getElementById("touchy");!document.addEventListener("touchmove", function(e) {! var touch = e.touches[0];! touchx.value = touch.clientX;! touchy.value = touch.clientY;! e.preventDefault();}, false);</script>

144



Touch 事件

touchstart

touchmove

touchend

145



結合繪圖與事件處理<canvas id="canvas" width="400" height="300"></canvas>

<script>var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d");

canvas.addEventListener("touchmove", function(e) { hitTest(e.targetTouches[0]); e.preventDefault();}, false);canvas.addEventListener("mousemove", hitTest, false);

function hitTest(e) { var rect = canvas.getBoundingClientRect(), x = e.clientX - rect.left, y = e.clientY - rect.top, inPath = ctx.isPointInPath(x, y); ctx.fillStyle = inPath ? "orange" : "teal"; ctx.fill();}</script>

146



多屏 UI 的關鍵: 結論Screen Detection: 使用 JavaScript 取代 Media Query

了解 window/document 的 width/height

設好 ViewPort

寫好不同 Media Type 的 CSS

用對 UI Framework (多屏 UI Framework 有待開發)

147

更多資訊請上 Go8Panel.com148

課程名稱：八屏一雲時代來臨教你HTML5六小時打通(1)

Education

Transcript of 課程名稱：八屏一雲時代來臨教你HTML5六小時打通(1)

課程名稱：八屏一雲時代來臨 教你HTML5六小時打通(1)

Education

Transcript of 課程名稱：八屏一雲時代來臨 教你HTML5六小時打通(1)

課程名稱：八屏一雲時代來臨教你HTML5六小時打通(1)

Transcript of 課程名稱：八屏一雲時代來臨教你HTML5六小時打通(1)