The document discusses the benefits of developing mobile applications using web standards and frameworks like PhoneGap for cross-platform compatibility. Key advantages include high code reuse, faster and cheaper development, and easier updates, while addressing performance issues such as reflow and user interaction delays. It also outlines debugging tools and provides resources for further learning.

1. Developing for Multiple PlatformsUsing Web standards to efficiently target multiple devices

2. Dan PfeifferDeveloper at Float Mobile Learning@mediabounds

3. The Mobile LandscapeStatCounter; Mar-May 2011comScore; Mar 2011

4. The Mobile Landscape

5. PhoneGap

6. PhoneGap – Supported PlatformsAndroidBada*BlackBerry WebWorks (5.0 & 6.0)iOSSymbianwebOS

7. Write once—debug everywhere.

8. High percentage of code reuse

9. High percentage of code reuseFaster development time

10. High percentage of code reuseFaster development timeCheaper development

11. High percentage of code reuseFaster development timeCheaper developmentEasier to update

12. Forward compatibility

13. Limited by device’s browser engine

14. A Basic AppDemo

15. Performance

16. Performance & PerceptionUser expects immediate feedback to his/her interaction.

17. Performance & PerceptionUser expects immediate feedback to his/her interaction.There is a 400ms delay between user interaction and the `click` event.

18. Performance & PerceptionUser expects immediate feedback to his/her interaction.There is a 400ms delay between user interaction and the `click` event.Use touch events.

19. Performance & PerceptionDemo

20. Less PowerfulMobile devices are less lenient of inefficient code.

21. Less PowerfulMobile devices are less lenient of inefficient code.Inefficient code/processes manifest themselves in the user interface.

22. Reflow

23. ReflowThe cost of reflow is a major performance issue.

24. ReflowThe cost of reflow is a major performance issue.Simple way to reduce the cost of a reflow is to remove extraneous tags.

25. Watch for Extraneous Tags<ul> <li><a href="#view1">View 1</a></li> <li><a href="#view2">View 2</a></li> <li><a href="#view3">View 3</a></li> <li><a href="#view4">View 4</a></li></ul>

26. Watch for Extraneous Tags<ul> <li><a href="#view1">View 1</a></li> <li><a href="#view2">View 2</a></li> <li><a href="#view3">View 3</a></li> <li><a href="#view4">View 4</a></li></ul><a href="#image"><imgsrc="/some/image.jpg"></a>

27. ReflowSemantics takes a backseat to efficient HTML to reduce the cost of reflow.

28. JavaScript-based animation

29. JavaScript-based animationFor every frame!

30. CSS Transition/Animation

31. CSS AnimationDemo@-webkit-keyframesroll{from{-webkit-transform: translate3d(0px,0,0);}to{-webkit-transform: translate3d(200px,0,0) rotate(180deg);}}

32. PhoneGap API

33. PhoneGap APInavigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );

34. PhoneGap APIDemo

35. PhoneGap API

36. PhoneGap Plugins

37. DebuggingCheck your syntaxJS LintJS Hint

38. Debugging – Web InspectorDOMCSSJavaScript Console

39. Debugging - WEINREDemo<script src="http://localhost:8081/target/target-script-min.js#anonymous" type="text/javascript"></script>

40. Conclusion

41. Questions?www.floatlearning.com @mediaboundsdpfeiffer@floatlearning.com

42. Resourceshttp://floatlearning.com/blog/http://phonegap.com/start/http://microjs.com/http://docs.phonegap.com/