HTML5 & PhoneGap@clonncd

Caesar Chi

Why is

Long time ago,

Desktop is only we have

But now ...

Most interface are NOT complex

Code once, Runs Anywhere

Lets Try

<meta name="viewport" content="width=1024" />

<meta name="viewport" content="width=1024" />

Bad Smell

<meta name="viewport" content="width=device-width”>

Use %

Float

display

http://jsbin.com/muhayenudo/2/editMedia Percent

http://jsbin.com/muguniwaqu/1/edit

Basic media Query

Displayhttp://jsbin.com/muhayenudo/3/edit

http://mediaqueri.es/

Reference

Shut Up Do Code

Phonegap install

http://phonegap.com/

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

npm install -g phonegap

npm install -g cordova npm install -g phonegap

Installation

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

Build a phonegap app

https://build.phonegap.com/apps

compressed project to zip and uploaddeploy to github repo

Problem & Solution

iOS

npm install -g ios-deploynpm install -g ios-sim

Browser

http://emulate.phonegap.com/

android

Set ENV $ANDROID_HOME

Support

• Amazon Fire OS

• Android

• BlackBerry 10

• Firefox OS

• iOS

• Ubuntu

• Windows Phone 8

• Windows

Please install Android target "android-19"

Problem

Please install Android target "android-19"

Solution

Suggestion

Suggestion

http://www.genymotion.com/

More

https://facebook.github.io/react-native/

http://ionicframework.com/