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

講師：Jollen Chen <jollen@jollen.org>
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

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

License
This 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 speciﬁed 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 文件撰寫
<!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
Source: http://web-proﬁle.com.ua/html/html5- </footer>
</body>
document-structure/
</html>
10


第⼀一個 HTML5 文件

11


1.html

12


2.html

13

第一次畫 Layout 就上手



14


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

非眼睛所見

圖像的像素

#content {
width: 128px;
}

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

15


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

眼睛所見

16


high-resolution
1 CSS pixel 需要 16 個 device pixel

更細緻

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

17


with zoom out
4 pixel

CSS pixel 等於 device pixel

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

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

18


screen size

screen.width
screen.height

Source: Moko365 Inc.
19


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

20


window size

window.innerWidth
window.innerHeight


21


viewport

window.innerWidth
window.innerHeight


22


viewport

document.documentElement.clientWidth
document.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 layout
viewport 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 width
content width = 900px

使用 %

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

28


content = document
content width = document width

使用 %

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

29


content = document, and viewport
before 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>
7 <meta name="viewport" content="width=device-width;">
9 </head>

34


圖片問題
before after

35


圖片大小怎麼處理

no good

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

36


Media Query
CSS @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>
7 <meta name="viewport" content="width=device-width,initial-scale=1.0">
9 </head>

42


ViewPort 與 Content
ViewPort

Content
(Surface)

43


ViewPort 等於 Layout Viewport

44


Scale = 2.0
scale=1.0
100% zoom
480x320
(Content)

scale=2.0
200% zoom
960x640
(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 Query
7.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
├── css
│ ├── common.css
│ └── medium.css
└── index.html

6 <link rel="stylesheet"
7 media="screen"
8 href="css/common.css"
9 type="text/css" />
11 media="screen and (max-width: 480px)"
12 href="css/medium.css"
14 <meta name="viewport" content="width=device-width,initial-scale=1.0">
16 </head>

49


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

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

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 範圍

480
481 720
721 800
801

52


依手機實作 CSS
7 media="screen and (max-width: 480px)"
8 href="css/480.css"
11 media="screen and (max-width: 720px) and (min-width: 481px)"
15 media="screen and (max-width: 800px) and (min-width: 721px)"
19 media="screen and (min-width: 801px)"
20 href="css/large.css"

53


目前文件結構

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

54


實作 CSS
480.css 800.css

img { img {
width: 300px; width: 720px;
} }

#content { #content {
width: 100%; width: 100%;
} }

720.css large.css

img { img {
width: 480px; width: 800px;
} }

#content { #content {
width: 100%; width: 100%;
} }

55


-webkit-device-pixel-ratio
WebView 支援 “-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" />

href="mdpi.css" />

href="ldpi.css" />

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.

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 speciﬁc screen densities using
the -webkit-device-pixel-ratio media feature.
Notice that the hdpi device shows a diﬀerent
image that's applied in CSS.

to terms described in the Creative Commons 2.5 Attribution License.
57

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



58


property of the element
element size

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

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

59


Galaxy SII

60


HTC One X

61


em vs rem

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

elements will elements will
be 20% be 20%
greater the greater then
element root em

62


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

➡ 原本是 16px

使用 rem 單位

➡ 相對於 root element

63


em vs rem
body { font-size:62.5%; } 16px * 0.625 = 10px
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 */

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 }
Root Element (HTML):
12
16px * 0.625 = 10px
13 /* zeroing out the default 8px margin */
10px / 1.3 = 7.69px = 8px
14
15 body {
Body:
16 font-size: 1.3rem;
8px * 1.3rem = 10px;
17 margin: 0;
18 }

66


使用 base.css + 120% font size
HTC One X Galaxy SII
(ratio = 50%) (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 1p{
│ ├── base.css 2 font-size: 1.2rem;
│ ├── common.css 3}

68


All in ‘12px’
HTC One X Galaxy SII Galaxy SII
Android Browser Firefox Android Browser

Galaxy SII
Firefox

69


頁面放大

70


關掉 scaling 功能

24 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
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

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


使用 jQuery
JavaScript 核心程式庫

JavaScript 的插件平臺

JavaScript 的外部程式庫

85


JavaScript Minify

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

minify 未 minify，浪
(compress) 後費載入時間
的版本

86


偵測 Document Ready
<script>
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)

$ $(document)

selector. 從 DOM 裡面有一
DOM 裡找出指個 document
定的對象對象

88


載入後再執行

$(document).ready() $(document).ready(screenSize)

screenSize 是
接著呼叫
ready 事件的
jQuery 的
callback
ready() 函數
function

89


認識 DOM
DOM

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>

id=notes <body>
<header>
</header>
<nav>
</nav>
<article>
var content =
findElememtById(“notes”); <section>summary</section>
<div id= notes ></div>
var content = $(“notes”); </article>
<aside>
</aside>
<footer>
</footer>
</body>
</html>
91


二種選擇對象的方法
var content =
ﬁndElememtById( notes ); var content = $( notes );

呼叫 DOM 提使用 jQuery 選
供的函數來找出擇器來找出
notes 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() { function() {
} }

具名函數匿名函數，使用
於 callback
function 參數
}

不需要名字
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
78 screenSize();
79 $("#content").css("display", "none");
80 $("#content").fadeIn("slow");
81 });
82 </script>
96


查詢函數用法
.css(); .fadeIn();

1 .css( propertyName ) .fadeIn( [duration] [, callback] )
2 .css( propertyName, value )
3 .css( propertyName, function(index, value) )
4 .css( map )

97


動態修改 CSS

#content {
$( #content ).css(
display: none;
display , none );
}

98


DOM Selector
getElememtById()

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 Pattern
function Person(name, job) {
! this.name = name;
! this.job = job;
! this.queryJob = function() {
! ! alert(this.job);
! };
}

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

alert(person instanceof Person); // true

102


Closure (封閉性)
function() { (function() {
var base; var base; var base;

function square( ) { function square( ) { function square( ) {
base = base * base; base = base * base; base = base * base;
} } }
} }) ();
沒有封閉...
完成封閉，成
(function() {
var base; 為一個封包
function square( ) {
base = base * base;
}
})

103


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

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

匯入 jQuery
封包

104


jQuery Plugins
Add new methods to jQuery module (object).

105


做⼀一個 jQuery Plugin

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

106


將功能插件化
(function($) {
var base;

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

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


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

base = base * base;
插件包, 這個
$( #content ).html(base); 插件裡有2個
}
$.fn.minus = function( ) { 函數
base = base - 10;
}

}) (jQuery);

108


插件裡有多個函數
(function($) {
var base = 5; up objct
base = base * base;
this.html(base);
}
$.fn.minus = function( ) { <div id= content ></div>
base = base - 10; <div id= message ></div>
this.html(base); <script>
} $( #content ).square();
$( #message ).minus();
}) (jQuery); </script>

109


this 的 up object 是 content
<div id= content ></div>
<div id= message ></div>
<script>
$( #content ).square();
$( #message ).minus();
</script> content
function() {
(function($) { this
var base = 5; }

base = base * base; message
this.html(base);
}

}) (jQuery);
110

第一次學 UI Framework 就上手



111


JavaScript UI Framework
jQuery Mobile

jQuery Tools, http://ﬂowplayer.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>
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" />
...
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>
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" />
.
.
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>
.
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 Framework
jQTouch

jQuery Mobile

➡ http://jquerymobile.com/

123


“data-” attribute

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

124


data-role=”page”

使用 “data-” attribute

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

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 Transitions
jQuery Mobile 支援 CSS3 方式的 Page Transition

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

描述方式：

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

127

使用 Dialogs

<h1>Page Title</h1>

<a href="page-2.html" data-rel="dialog">Open dialog</a>

</div>

128

使用 Transition

<h1>Page Title</h1>

<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 API
http://docs.phonegap.com

135


Accelerometer API
navigator.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.
to terms described(C) 2013 Moko365 Inc. All Rights Reserved.
Copyright in the Creative Commons 2.5 Attribution License.
138


Canvas
HTML5 新增的繪圖標籤

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

139


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

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

var ctx = canvas.getContext("2d");
!
canvas.width = 480; 推薦網站：http://www.javascriptkit.com/domref/
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>

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").addEvent
Listener("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.ﬁllStyle = inPath ? "orange" : "teal";
ctx.ﬁll();
}
</script>
146


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

了解 window/document 的 width/height

設好 ViewPort

寫好不同 Media Type 的 CSS

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

147

更多資訊請上 Go8Panel.com
148

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

Recommandé

Recommandé

Contenu connexe

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

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

Plus de Jollen Chen

Plus de Jollen Chen (19)

Dernier

Dernier (17)