Download as KEY, PPTX
More Related Content
Similar to Building Mobile Apps with HTML, CSS, and JavaScript
Building Mobile Apps with HTML, CSS, and JavaScript
- 1. Building Mobile Appswith HTML, CSS, & JavaScript Jonathan Stark
- 2.
- 3. Everything is Up •Average daily useage • Mobile media usage • Smartphone ownership • 3G/4G subscribers • % of smartphones vs dumfones
- 4. 5 Billion Subscriptions up from 4.6B in 2009 and 726M in 2000
- 5. This isn’t aboutmobile... ...it’s about the future of computing.
- 6.
- 7. Platform Fragmention • iOS •Android (F, G, H, I) • BlackBerry • Windows Phone • webOS • (Symbian, MeeGo, bada, etc...)
- 8. Device Fragmentation • 68Android handsets in the US alone • 100+ tablets announced at CES • Screen sizes range from postage stamp to big screen TV • Screen resolution has become an issue
- 9. Et tu, Apple? •iPhone 2G • iPod Touch 2nd gen • iPhone 3G • iPod Touch 3rd gen • iPhone 3GS • iPod Touch 4th gen • iPhone 4 • iPad 1 • iPod Touch 1st gen • iPad 2
- 10. Et tu, Apple? •Camera or not? • Screen size • Multitasking or not? • Pixel desnsity • 3G or not? • Storage capacity • GPS or not? • Memory limit • Gyro or not? • Processor speed
- 11.
- 12. Three Approaches • Purenative apps • Web apps • Hybrid apps
- 13.
- 14. Pure Native Apps •Obj-C, Android Java, etc... • Can access devices APIs • Can be sold in native app stores • Can NOT run on multiple platforms
- 15.
- 16. Web Apps • Finger-friendlymobile web site • Can run offline (!) • Can NOT access device APIs • Can NOT be sold in native app stores
- 17.
- 18. Hybrid Apps • Webfiles bindled in native execuatble • Access to device APIs • Sell in native app stores • Not prefect, but pretty damn good
- 19. Syllabus... • How tomake good web apps • How to take web apps offline • How to access devices APIs from a web app • DEEBUGGINGG!
- 20.
- 21. Mobile ≠ Desktop •Tiny screen • Battery powered • Spotty connection • Small pipe • Expensive data • Distracted user
- 22. Mobile Use-Cases • Bored •Busy • Lost
- 23. Mobile Use-Cases • Bored • Gaming • Facebook • YouTube • News
- 24. Mobile Use-Cases • Busy • Checking email • Updating todos/calendar • Transferring money
- 25. Mobile Use-Cases • Lost • Where should I go for dinner? • How do I get to my hotel? • Have my friends been here?
- 26. What’s On Your HomeScreen?
- 28. Tapworthy Apps... • Focuson mobile context • Optimize for micro-tasking • Use sensors to enhance local context • Do one thing and do it well credit: @globalmoxie
- 29.
- 30. Be Finger Friendly •Chunky targets • Generous spacing • Avoid scrolling • Controls at the bottom credit: @globalmoxie
- 31.
- 32. jQTouch • jQuery plugin •Created by @DavidKaneda • Native CSS3 Animations • and tons more...
- 33.
- 34. CSS3 Transforms, Transitions,& Animations
- 35.
- 36. Advanced Styling with CSS3
- 37.
- 38. Building Offline Web Apps with HTML5
- 39. Offline Web Apps •Web Storage • Web SQL Database • Application Cache
- 40. Web Storage • localStorage •sessionStorage
- 41.
- 42. Web SQL Database •SQLite • JavaScript API • Transactions
- 43.
- 44. Application Cache • Asimple text document • Hosted on your web server • Lists static resources
- 45.
- 46. Building Native Web Appswith PhoneGap
- 47. PhoneGap • Open source •Created by @Nitobi • Native app wrapper • Multiple platforms
- 48.
- 49.
- 50.
- 51.
- 52. WEINRE • WEb INspectorREmote • Created by @pmuellr • Installed locally • Interact with DOM • Interact with Console
- 53.
- 54. JS Console • Createdby @rem • Online service • Interact with Console
- 55.
- 56. More Info • http://jonathanstark.com/books •http://jonathanstark.com/contact • http://jonathanstark.com/wdx4
Editor's Notes
- #2 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. \n
- #3 Lemme just preach to the choir for a second...\n
- #4 No matter how you slice it, mobile is growning like crazy. \n\n(Based on comScore 2010 Mobile Year in Review)\n
- #5 (Based on Sony Ericsson estimates)\n\nhttp://techcrunch.com/2010/07/09/ericsson-estimates-5-billion-mobile-subscriptions-worldwide-growing-fast/\n\n\n
- #6 (Based on Sony Ericsson estimates)\n\nhttp://techcrunch.com/2010/07/09/ericsson-estimates-5-billion-mobile-subscriptions-worldwide-growing-fast/\n\n\n
- #7 \n
- #8 Each platform have it’s own tools, frameworks, languages, and capabilities. Plus, we have to worry about distribution options, approval criteria, content restrictions, and so on. \n
- #9 \n
- #10 \n
- #11 \n
- #12 The approach I’m going to advocate to deal with all this fragmentation is one that blends web app technology (HTML, CSS, and JavaScript) with native app technology to create what’s been referred to as a “hybrid app”. The concept of a “Native Web App” almost sounds like an oxymoron, but as you’ll see today, it’s an attractive and powerful approach for a wide range of apps. \n
- #13 Each platform have it’s own tools, frameworks, languages, and capabilities. Plus, we have to worry about distribution options, approval criteria, content restrictions, and so on. \n
- #14 The approach I’m going to advocate to deal with all this fragmentation is one that blends web app technology (HTML, CSS, and JavaScript) with native app technology to create what’s been referred to as a “hybrid app”. The concept of a “Native Web App” almost sounds like an oxymoron, but as you’ll see today, it’s an attractive and powerful approach for a wide range of apps. \n
- #15 Each platform have it’s own tools, frameworks, languages, and capabilities. Plus, we have to worry about distribution options, approval criteria, content restrictions, and so on. \n
- #16 The approach I’m going to advocate to deal with all this fragmentation is one that blends web app technology (HTML, CSS, and JavaScript) with native app technology to create what’s been referred to as a “hybrid app”. The concept of a “Native Web App” almost sounds like an oxymoron, but as you’ll see today, it’s an attractive and powerful approach for a wide range of apps. \n
- #17 Each platform have it’s own tools, frameworks, languages, and capabilities. Plus, we have to worry about distribution options, approval criteria, content restrictions, and so on. \n
- #18 The approach I’m going to advocate to deal with all this fragmentation is one that blends web app technology (HTML, CSS, and JavaScript) with native app technology to create what’s been referred to as a “hybrid app”. The concept of a “Native Web App” almost sounds like an oxymoron, but as you’ll see today, it’s an attractive and powerful approach for a wide range of apps. \n
- #19 Each platform have it’s own tools, frameworks, languages, and capabilities. Plus, we have to worry about distribution options, approval criteria, content restrictions, and so on. \n
- #20 Each platform have it’s own tools, frameworks, languages, and capabilities. Plus, we have to worry about distribution options, approval criteria, content restrictions, and so on. \n
- #21 Interface guidelines for mobile devices\n
- #22 \n
- #23 \n
- #24 \n
- #25 \n
- #26 \n
- #27 Consider the apps that you use every day. What do they have in common?\n
- #28 My main apps are Email, SMS, Browser, Todos, News, Banking, Twitter, Kilo, Camera, Notes\n
- #29 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.\n
- #30 Wenger Giant: Holds Guinness world record for most multifunctional pen knife.\nMade for company’s 100th anniversary to include every gadget ever included in a Swiss Army knife.\n87 tools, 141 functions. Cigar cutter, laser pointer, golf reamer.\nBit of humor and whimsy, but as a knife, it’s a failure.\nHeavy physical load, heavy cognitive load\nMobile interface: Clarity should trump density, less is more\n\n
- #31 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. \n
- #32 \n
- #33 There are a number of javascript libraries that make building mobile web apps a lot easier. iUI was the first, Sencha Touch is the most powerful, but my lib of choice is jQTouch.\n
- #34 \n
- #35 - Transforms\n - Translate\n - Scale\n - Skew\n - Rotate\n - Origin\n - Transitions\n - Property\n - Duration\n - Timing\n - Delay\n - Animations\n - Name\n - Duration\n - Timing\n - Iteration Count\n - Direction\n - Keyframes\n - Events\n\n
- #36 \n
- #37 - Gradients\n - Rounded corners\n - Text shadow\n - Box shadow\n - Box reflect\n - Border image\n\n
- #38 \n
- #39 \n
- #40 \n
- #41 \n
- #42 \n
- #43 \n
- #44 \n
- #45 \n
- #46 \n
- #47 \n
- #48 Cross platform mobile framework for building native mobile applications with html, css, and javascript.\n
- #49 PhoneGap support matrix\n
- #50 \n
- #51 \n
- #52 \n
- #53 \n
- #54 \n
- #55 \n
- #56 \n
- #57 \n