Your SlideShare is downloading. ×
0
Developing for Multiple Platforms
Developing for Multiple Platforms
Developing for Multiple Platforms
Developing for Multiple Platforms
Developing for Multiple Platforms
Developing for Multiple Platforms
Developing for Multiple Platforms
Developing for Multiple Platforms
Developing for Multiple Platforms
Developing for Multiple Platforms
Developing for Multiple Platforms
Developing for Multiple Platforms
Developing for Multiple Platforms
Developing for Multiple Platforms
Developing for Multiple Platforms
Developing for Multiple Platforms
Developing for Multiple Platforms
Developing for Multiple Platforms
Developing for Multiple Platforms
Developing for Multiple Platforms
Developing for Multiple Platforms
Developing for Multiple Platforms
Developing for Multiple Platforms
Developing for Multiple Platforms
Developing for Multiple Platforms
Developing for Multiple Platforms
Developing for Multiple Platforms
Developing for Multiple Platforms
Developing for Multiple Platforms
Developing for Multiple Platforms
Developing for Multiple Platforms
Developing for Multiple Platforms
Developing for Multiple Platforms
Developing for Multiple Platforms
Developing for Multiple Platforms
Developing for Multiple Platforms
Developing for Multiple Platforms
Developing for Multiple Platforms
Developing for Multiple Platforms
Developing for Multiple Platforms
Developing for Multiple Platforms
Developing for Multiple Platforms
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Developing for Multiple Platforms

1,551

Published on

This presentation will investigate how to take advantage of Web technologies (including HTML5, CSS3, and JavaScript) to build a cross-platform mobile app. The presentation will cover important steps …

This presentation will investigate how to take advantage of Web technologies (including HTML5, CSS3, and JavaScript) to build a cross-platform mobile app. The presentation will cover important steps towards optimizing a Web app for a mobile device as well as using PhoneGap to expose core device features, like the accelerometer or the camera, to an app.

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,551
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
1
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Introduction – about me.Developer at FloatLots of experience in web developmentDegree from BradleyFollow: @mediaboundsLove coding!My beautiful fiancé
  • The mobile landscape as it currently stands.Review market share of different OSes.Big players—you can assume your user is on one of these devices.
  • “Native” language of each OS – “native” meaning the language that the SDK is written inLow percentage of reusable code – almost nil. (although you can use the same logic)Expensive to build for multiple platforms – not a great option to just build for one
  • Introduce PhoneGapBuild your apps in HTML/CSS/JavaScript and wrap it in PhoneGap/PhoneGap exposes core features of the device as well as a plugin structure to communicate with the native code.
  • Supports 6 different platformsBada is still under development—although I believe that it is available for use.Windows Mobile 7 is under development.
  • Common workflow for Web developers.Take comfort in knowing that all 6 of the platforms I just mentioned run on some version of WebKit.Windows Mobile 7 runs at some Frankenstein combination of IE7/IE8
  • Less code means less bugs.
  • Less time means less money
  • Every platform running on same code base.
  • Web will always be relevantNew devices will have a browserBlackBerry is notorious for burning their developers with differences in the SDK…now for PlayBook you have to develop in Flash/Adobe AIR.
  • Apple has set the bar on this one – when I touch the screen, something should happen immediately.
  • WebKit providestouchstart/touchend events.
  • It has less memory and less processing power
  • This is not a “rule”; simply some guidance…some things to look out for.
  • Especially true forPhoneGap apps—you’ll have to weigh the pros and cons for a mobile website.In addition to reducing the cost of a reflow, we need to reduce the number of times a reflow occurs.
  • CSS transitions/animations work directly on the paint layer
  • PhoneGap exposes some common features of the device to your mobile web app—gives you a leg up on a simple web page.
  • Transcript

    • 1. Developing for Multiple Platforms<br />Using Web standards to efficiently target multiple devices<br />
    • 2. Dan Pfeiffer<br />Developer at Float Mobile Learning<br />@mediabounds<br />
    • 3. The Mobile Landscape<br />StatCounter; Mar-May 2011<br />comScore; Mar 2011<br />
    • 4. The Mobile Landscape<br />
    • 5. PhoneGap<br />
    • 6. PhoneGap – Supported Platforms<br />Android<br />Bada*<br />BlackBerry WebWorks (5.0 & 6.0)<br />iOS<br />Symbian<br />webOS<br />
    • 7. Write once—debug everywhere.<br />
    • 8. High percentage of code reuse<br />
    • 9. High percentage of code reuse<br />Faster development time<br />
    • 10. High percentage of code reuse<br />Faster development time<br />Cheaper development<br />
    • 11. High percentage of code reuse<br />Faster development time<br />Cheaper development<br />Easier to update<br />
    • 12. Forward compatibility<br />
    • 13. Limited by device’s browser engine<br />
    • 14. A Basic App<br />Demo<br />
    • 15. Performance<br />
    • 16. Performance & Perception<br />User expects immediate feedback to his/her interaction.<br />
    • 17. Performance & Perception<br />User expects immediate feedback to his/her interaction.<br />There is a 400ms delay between user interaction and the `click` event.<br />
    • 18. Performance & Perception<br />User expects immediate feedback to his/her interaction.<br />There is a 400ms delay between user interaction and the `click` event.<br />Use touch events.<br />
    • 19. Performance & Perception<br />Demo<br />
    • 20. Less Powerful<br />Mobile devices are less lenient of inefficient code.<br />
    • 21. Less Powerful<br />Mobile devices are less lenient of inefficient code.<br />Inefficient code/processes manifest themselves in the user interface.<br />
    • 22. Reflow<br />
    • 23. Reflow<br />The cost of reflow is a major performance issue.<br />
    • 24. Reflow<br />The cost of reflow is a major performance issue.<br />Simple way to reduce the cost of a reflow is to remove extraneous tags.<br />
    • 25. Watch for Extraneous Tags<br /><ul><br /> <li><a href="#view1">View 1</a></li><br /> <li><a href="#view2">View 2</a></li><br /> <li><a href="#view3">View 3</a></li><br /> <li><a href="#view4">View 4</a></li><br /></ul><br />
    • 26. Watch for Extraneous Tags<br /><ul><br /> <li><a href="#view1">View 1</a></li><br /> <li><a href="#view2">View 2</a></li><br /> <li><a href="#view3">View 3</a></li><br /> <li><a href="#view4">View 4</a></li><br /></ul><br /><a href="#image"><br /><imgsrc="/some/image.jpg"><br /></a><br />
    • 27. Reflow<br />Semantics takes a backseat to efficient HTML to reduce the cost of reflow.<br />
    • 28. JavaScript-based animation<br />
    • 29. JavaScript-based animation<br />For every frame!<br />
    • 30. CSS Transition/Animation<br />
    • 31. CSS Animation<br />Demo<br />@-webkit-keyframesroll{<br />from{<br />-webkit-transform: translate3d(0px,0,0);<br />}<br />to{<br />-webkit-transform: translate3d(200px,0,0) rotate(180deg);<br />}<br />}<br />
    • 32. PhoneGap API<br />
    • 33. PhoneGap API<br />navigator.camera.getPicture( <br />cameraSuccess, <br />cameraError, <br />[ cameraOptions ] <br />);<br />
    • 34. PhoneGap API<br />Demo<br />
    • 35. PhoneGap API<br />
    • 36. PhoneGap Plugins<br />
    • 37. Debugging<br />Check your syntax<br />JS Lint<br />JS Hint<br />
    • 38. Debugging – Web Inspector<br />DOM<br />CSS<br />JavaScript Console<br />
    • 39. Debugging - WEINRE<br />Demo<br /><script src="http://localhost:8081/target/target-script-min.js#anonymous" type="text/javascript"></script><br />
    • 40. Conclusion<br />
    • 41. Questions?<br />www.floatlearning.com @mediaboundsdpfeiffer@floatlearning.com<br />
    • 42. Resources<br />http://floatlearning.com/blog/<br />http://phonegap.com/start/<br />http://microjs.com/<br />http://docs.phonegap.com/<br />

    ×