Recommended
More Related Content
What's hot
What's hot (16)
Viewers also liked
Similar to Building Cross Platform Mobile Apps
Similar to Building Cross Platform Mobile Apps (20)
More from Jonathan Stark
More from Jonathan Stark (20)
Recently uploaded
Recently uploaded (20)
Building Cross Platform Mobile Apps
- 1. Building Cross-Platform Mobile Apps Jonathan Stark
- 2. “There’s never been a better time to be a web nerd.” - Jonathan Stark
- 3. Web Nerds, Rejoice! • HTML5 rocks • User base is huge & growing • Browsers are appearing everywhere
- 4. Mobile Apps
- 6. Architecture Options • Native apps • Web apps • SMS apps
- 7. Architecture Options • Native apps - Fragmentation • Web apps - Sandboxing • SMS apps - Discoverability
- 8. Architecture Options The approach that is best for you depends on your goals and target market.
- 10. Considerations Native Web Depends Cosmetics X Functionality X Development X Testing X Distribution X Payment X Support X
- 11. Web Apps Win • Cheapest to produce • Most standardized • Easiest to distribute
- 12. jQTouch • jQuery plugin • Created by @DavidKaneda • Native CSS3 Animations • and tons more...
- 13. Hybrid Apps PhoneGap gives developers the best of both worlds.
- 14. PhoneGap • Open source • Created by @Nitobi • Native app wrapper • Multiple platforms
- 16. Considerations Native Web Depends Cosmetics X Functionality X Development X Testing X Distribution X Payment X Support X
- 17. Considerations Native Web+PG Depends Cosmetics X Functionality X Development X Testing X Distribution X Payment X Support X
- 18. Conclusion "If you can build your app with HTML, CSS, and JavaScript, you probably should." - Jonathan Stark
- 20. Mobile ≠ Desktop • Tiny screen • Battery powered • Spotty connection • Small pipe • Expensive data • Distracted user
- 21. Mobile Use-Cases • I’m here • I’m bored • I’m micro-tasking
- 22. Mobile Use-Cases • I’m here • Where should I go for dinner? • How do I get to my hotel? • Have my friends been here?
- 23. Mobile Use-Cases • I’m bored • Gaming • Facebook • YouTube • News
- 24. Mobile Use-Cases • I’m micro-tasking • Checking email • Updating todos/calendar • Transferring money
- 25. What’s On Your Home Screen?
- 27. Tapworthy Apps... • Focus on mobile context • Optimize for micro-tasking • Use sensors to enhance local context • Do one thing and do it well credit: @globalmoxie
- 29. Be Finger Friendly • Chunky targets • Generous spacing • Avoid scrolling • Controls at the bottom credit: @globalmoxie
- 30. CSS3 Transforms, Transitions, & Animations
- 31. demo
- 32. Advanced Styling with CSS3
- 33. demo
- 34. Building Offline Web Apps with HTML5
- 35. Offline Web Apps • Web Storage • Web SQL Database • Application Cache
- 36. Web Storage • localStorage • sessionStorage
- 37. demo
- 38. Web SQL Database • SQLite • JavaScript API • Transactions
- 39. demo
- 40. Application Cache • A simple text document • Hosted on your web server • Lists static resources
- 41. demo
- 42. Building Native Web Apps with PhoneGap
- 43. demo
- 44. More Info • http://jonathanstark.com/books • http://jonathanstark.com/contact • http://jonathanstark.com/web20
Editor's Notes
- Hi I’m Jonathan Stark. I’m a software consultant from Providence RI. For a living, I help big companies with little apps. In my free time, I write books about mobile app development, and maintain a mobile UI library called jQTouch.
- Although you run HTML5 apps on anything from a car dashboard to a web TV, we’re going to talk specifically about mobile apps.
- One of the first things you have to worry about when you start a mobile initiative is what architecture are you going to use.
- There are three types of mobile apps that I think will remain relevant for a long time: - Native apps (e.g. WebEx, SalesForce) - Web apps (e.g. Gmail, Google Calendar) - SMS apps (e.g. Google SMS, Twitter, Aardvark)
- We could debate the pros and cons of each approach all day long. Ultimately, each has a glaring achilles heel.
- Should all boats be made of fiberglass? The right one for you depends on your situation: - Selling iPhone cases in U.S.? Native app - Selling office supplies in North America? Web app - Providing banking services in rural China? SMS app
- I want to drill down on a native vs web for a second because I know that there is a lot of confusion there.
- Web apps can run 100% offline.
- I typically work with corporate clients who are trying to reach a really broad market with their apps. They want to be on iPhone, Android, and Blackberry at least. - Platform is easy to learn, most orgs have web talent in house already. - Web is a proven, stabile platform that works reasonably well across the widest range of devices. - Host your app and email out the links. - No approval process, no multiple app stores, no delay on bug fixes.
- There are a number of javascript libraries that make building mobile web apps a lot easier. iUI was the first, but my lib of choice is jQTouch.
- Actually, you don’t have to really pick between native and web. Single code base that can be deployed as a standalone web app AND deployed with addition functionality through the various app stores.
- Cross platform mobile framework for building native mobile applications with html, css, and javascript.
- PhoneGap support matrix
- Here’s that chart again...
- ... and here it is with PhoneGap added in.
- I think this is the most pragmatic approach. If nothing else, it’s the most flexible. And the way things are growing at this point, flexibility is of the utmost importance.
- Interface guidelines for mobile devices
- Consider the apps that you use every day. What do they have in common?
- My main apps are Email, SMS, Browser, Todos, News, Banking, Twitter, Kilo, Camera, Notes
- My good friend and fellow author Josh Clark has a book out called Tapworthy. Josh spends a lot of time reviewing app designs and interviewing developers and has compiled a list of qualities that great apps share.
- Wenger Giant: Holds Guinness world record for most multifunctional pen knife. Made for company’s 100th anniversary to include every gadget ever included in a Swiss Army knife. 87 tools, 141 functions. Cigar cutter, laser pointer, golf reamer. Bit of humor and whimsy, but as a knife, it’s a failure. Heavy physical load, heavy cognitive load Mobile interface: Clarity should trump density, less is more
- Josh brings up many great points in Tapworthy, but the one that caught me most by surprise was the notion of putting controls on the bottom and content on the top, because this is the exact reverse of what we typically see in web programming.
- - Transforms - Translate - Scale - Skew - Rotate - Origin - Transitions - Property - Duration - Timing - Delay - Animations - Name - Duration - Timing - Iteration Count - Direction - Keyframes - Events
- - Gradients - Rounded corners - Text shadow - Box shadow - Box reflect - Border image