課程名稱：八屏一雲時代來臨教你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六小時打通

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

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

現場實況

《八屏⼀一雲時代來臨教你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.

第一次寫 HTML5 就上手

HTML5 重要基礎<div>

Web Socket

Web Storage

需要了解 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>

第⼀一個 HTML5 文件

1.html

2.html

第一次畫 Layout 就上手

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

非眼睛所見

圖像的像素

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

#content { width: 128px;}

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

眼睛所見

high-resolution1 CSS pixel 需要 16 個 device pixel

更細緻

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

with zoom out4 pixel

CSS pixel 等於 device pixel

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

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

screen size

Source: Moko365 Inc.

screen.widthscreen.height

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

window size

window.innerWidthwindow.innerHeight

viewport

window.innerWidthwindow.innerHeight

viewport

document.documentElement.clientWidthdocument.documentElement.clientHeight

visual viewport

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

layout viewport

visual 不等於 layout

visual viewport

layout viewport

“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>

content widthcontent width = 900px

使用 %

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

content = documentcontent width = document width

使用 %

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

content = document, and viewportbefore after

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

position >> box-sizing >> z

更多關於 viewport只適用於 mobile browser

手機瀏覽可讓 visual viewport = layout viewport

visual viewport

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

“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>

圖片問題before after

圖片大小怎麼處理

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

no good

Media QueryCSS @media rule

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

Media Type

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

不同的 Media Type

使用 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 }

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

解決問題解決方式

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>

ViewPort 與 ContentViewPort

Content (Surface)

ViewPort 等於 Layout Viewport

Scale = 2.0scale=1.0100% zoom480x320

(Content)

scale=2.0200% zoom960x640

(Content)

Scale考慮 Scaling

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

➡ one CSS pixel 等於 one device pixel

➡ 12px / 1.2em

➡ ppi = pixel per inch

➡ 240 ppi

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

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.

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 }

自訂 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

多個 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

根據手機解析度定義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

Media Type 範圍

~ 480481 ~ 720721 ~ 800801 ~

依手機實作 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" />

目前文件結構

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

實作 CSS480.css 800.css

img { width: 300px;}

#content { width: 100%;}

720.css large.css

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

➡ 0.75, 1.0, 1.5

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.

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

property of the elementelement size

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

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

Galaxy SII

HTC One X

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”

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

➡ 原本是 16px

使用 rem 單位

➡ 相對於 root element

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

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

修改 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;

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

Galaxy SII(ratio = 50%)

很重要但不能用切勿在 @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 }

All in ‘12px’HTC One X

Android BrowserGalaxy SIIFirefox

Galaxy SIIAndroid Browser

Galaxy SIIFirefox

頁面放大

關掉 scaling 功能

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

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

4x165mm/100 = 6.6mm = 0.66cm

viewport 的實體大小 ? 用尺量 !

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

現在能用 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

第一次寫 Screen Detection 就上手

Screen 大小偵測iMac Galaxy SII HTC One X

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

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

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

了解 window/document 的 width/height

設好 ViewPort

寫好不同 Media Type 的 CSS

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

➡ webkit engineer 應該和 UI designer 合作

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

第一次學 JavaScript 就上手

www.codeyear.com

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>

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

寫在 HTML 文件裡

主要目的是開發動態網頁

進階觀念Document ready 後才執行

Document 與 JavaScript 是並行載入 (concurrent)

使用 jQueryJavaScript 核心程式庫

JavaScript 的插件平臺

JavaScript 的外部程式庫

JavaScript Minify

“minify (compress) 後的版本”

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

“未 minify，浪費載入時間”

偵測 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>

使用 $(document)

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

“DOM 裡面有一個 document 對象”

$(document)

載入後再執行

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

$(document).ready()

“screenSize 是 ready 事件的 callback function”

$(document).ready(screenSize)

認識 DOMDOM

Document Object Model

document 是 DOM 裡的根 (root) 對象

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

學習 JavaScript 的重點是認識 DOM

JavaScript 的核心概念: Access DOM

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

認識 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”);

二種選擇對象的方法

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

var content = findElememtById(“notes”);

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

var content = $(“notes”);

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>

使用於 Callback function 參數

“具名函數”

function screenSize() {}

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

function() {}

function screenSize() {}

“不需要名字”

認識 Anonymous Function匿名函數

function constant

lambda function

發源於 1958 LISP 語言

多種語言採用

經常使用於 Callback function 參數

在 JavaScript 裡，anonymous function 有別於 Closure

學習 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>

查詢函數用法

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

.css();

.fadeIn( [duration] [, callback] )

.fadeIn();

動態修改 CSS

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

#content { display: none;}

DOM SelectorgetElememtById()

jQuery

Sizzle

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

Module Pattern (模組製作)

輸入事件處理 (Input Events)

➡ Drag & Drop

DOM (Document Object Model)

Create Objects

var person = {

! name: "Jollen",

! job: "Software Developer",

! queryJob: function() {

! ! alert(this.job);

person.queryJob();

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

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

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

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

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

“匯入 jQuery 封包”

$ = jQuery

jQuery PluginsAdd new methods to jQuery module (object).

做⼀一個 jQuery Plugin

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

將功能插件化

(function($) {var base;

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

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

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

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

}) (jQuery);

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

插件裡有多個函數(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>

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}

第一次學 UI Framework 就上手

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/

非常多 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/

使用 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>

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

javascriptcompressor.com

jquery.ebook.min.js

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

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

使用 jQuery 的 .addClass() 來引用

jquery.ebook.css

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

修改 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>

jquery.ebook.js

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

第一次學 jQuery Mobile 就上手

jQuery UI FrameworkjQTouch

jQuery Mobile

➡ http://jquerymobile.com/

“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.

data-role=”page”

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

使用 “data-” attribute

jQuery Mobile 頁面結構<body>

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

Page TransitionsjQuery Mobile 支援 CSS3 方式的 Page Transition

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

描述方式：

使用 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>

使用 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>

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

使用 ThemeRoller 工具

第一次學 PhoneGap 就上手

將網站打包成 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"); }}

應用程式的 UI: index.html

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>

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

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

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>

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.

CanvasHTML5 新增的繪圖標籤

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

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

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/

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

第一次學 Event 處理就上手

處理 Click 事件

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

‘touchmove’ 事件

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

Touch 事件

touchstart

touchmove

touchend

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

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>

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

了解 window/document 的 width/height

設好 ViewPort

寫好不同 Media Type 的 CSS

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

更多資訊請上 Go8Panel.com148

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

Education

html5? html5!

concentrated html5 & attractive html5

html5 guide

html5マークアップ珍プレー集 - html5 conference...

visual studio 2012 で実現する html5 & マルチ...

html5プロフェッショナル認定試験レベル1...

2013년 html5 총정리 (summary of html5 trend in 2013)

apresentação html5

html5プロフェッショナル認定試験レベル2...

guida html5

introduction to html5 new html5 user interface and...

gumi -...

pub html5 - lib.kmutt.ac.th · what is pub html5? pub html5...

html5ではないサイトを html5へ - change html5 from...

html5. waarom html5 nu relevant is voor jóu

html5 canvas

html5 handbuch

html5 tema4 atributos en html5

실전 html5 가이드 -...

curso html5

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

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