html5 & phonegap usage.

1. HTML5 & PhoneGap
@clonncd
Caesar Chi

2. Why
is

3. Long time ago,
Desktopis only we have

4. But now ...

6. Most interface are NOT complex

8. Code once, Runs Anywhere

10. Lets
Try

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

12. <meta name="viewport" content="width=1024" />
Bad Smell

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

14. Use %

16. Float

17. display

18. http://jsbin.com/muhayenudo/2/edit
Media Percent

19. http://jsbin.com/muguniwaqu/1/edit
Basic media Query

20. Display
http://jsbin.com/muhayenudo/3/edit

21. http://mediaqueri.es/
Reference

22. Shut Up
Do Code

23. Phonegap install

24. http://phonegap.com/

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

26. npm install -g phonegap

27. npm install -g cordova
npm install -g phonegap
Installation

29. phonegap new [$NAME]
phonegap platform add iOS
phonegap platform add android
phonegap platform add browser
phonegap run browser
command
http://docs.phonegap.com/en/3.0.0/guide_cli_index.md.html

30. Build a phonegap app

31. https://build.phonegap.com/apps
compressed project to zip and upload
deploy to github repo

32. Problem & Solution

33. iOS
npm install -g ios-deploy
npm install -g ios-sim

34. Browser
http://emulate.phonegap.com/

35. android
Set ENV $ANDROID_HOME

36. Support
• Amazon Fire OS
• Android
• BlackBerry 10
• Firefox OS
• iOS
• Ubuntu
• Windows Phone 8
• Windows

37. Please install Android target "android-19"
Problem

38. Please install Android target "android-19"
Solution

39. Suggestion

40. Suggestion
http://www.genymotion.com/

41. More

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

43. http://ionicframework.com/