Page 1
HTML5 & PhoneGap@clonncd
Caesar Chi
Page 3
Long time ago,
Desktop is only we have
Page 6
Most interface are NOT complex
Page 8
Code once, Runs Anywhere
Page 11
<meta name="viewport" content="width=1024" />
Page 12
<meta name="viewport" content="width=1024" />
Bad Smell
Page 13
<meta name="viewport" content="width=device-width”>
Page 18
http://jsbin.com/muhayenudo/2/editMedia Percent
Page 19
http://jsbin.com/muguniwaqu/1/edit
Basic media Query
Page 20
Displayhttp://jsbin.com/muhayenudo/3/edit
Page 21
http://mediaqueri.es/
Reference
Page 24
http://phonegap.com/
Page 25
Support
• Amazon Fire OS
• Android
• BlackBerry 10
• Firefox OS
• iOS
• Ubuntu
• Windows Phone 8
• Windows
資料資源http://docs.phonegap.com/en/edge/
guide_support_index.md.html#Platform%20Support
Page 26
npm install -g phonegap
Page 27
npm install -g cordova npm install -g phonegap
Installation
Page 29
phonegap new [$NAME]phonegap platform add iOSphonegap platform add androidphonegap platform add browserphonegap run browser
command
http://docs.phonegap.com/en/3.0.0/guide_cli_index.md.html
Page 30
Build a phonegap app
Page 31
https://build.phonegap.com/apps
compressed project to zip and uploaddeploy to github repo
Page 32
Problem & Solution
Page 33
iOS
npm install -g ios-deploynpm install -g ios-sim
Page 34
Browser
http://emulate.phonegap.com/
Page 35
android
Set ENV $ANDROID_HOME
Page 36
Support
• Amazon Fire OS
• Android
• BlackBerry 10
• Firefox OS
• iOS
• Ubuntu
• Windows Phone 8
• Windows
Page 37
Please install Android target "android-19"
Problem
Page 38
Please install Android target "android-19"
Solution
Page 40
Suggestion
http://www.genymotion.com/
Page 42
https://facebook.github.io/react-native/
Page 43
http://ionicframework.com/