Building Mobile Apps with HTML, CSS, and JavaScript

4,264 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
4,264
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
53
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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
  • Lemme just preach to the choir for a second...\n
  • No matter how you slice it, mobile is growning like crazy. \n\n(Based on comScore 2010 Mobile Year in Review)\n
  • (Based on Sony Ericsson estimates)\n\nhttp://techcrunch.com/2010/07/09/ericsson-estimates-5-billion-mobile-subscriptions-worldwide-growing-fast/\n\n\n
  • (Based on Sony Ericsson estimates)\n\nhttp://techcrunch.com/2010/07/09/ericsson-estimates-5-billion-mobile-subscriptions-worldwide-growing-fast/\n\n\n
  • \n
  • 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
  • \n
  • \n
  • \n
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • Interface guidelines for mobile devices\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Consider the apps that you use every day. What do they have in common?\n
  • My main apps are Email, SMS, Browser, Todos, News, Banking, Twitter, Kilo, Camera, Notes\n
  • 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
  • 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
  • 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
  • \n
  • 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
  • \n
  • - 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
  • \n
  • - Gradients\n - Rounded corners\n - Text shadow\n - Box shadow\n - Box reflect\n - Border image\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Cross platform mobile framework for building native mobile applications with html, css, and javascript.\n
  • PhoneGap support matrix\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Building Mobile Apps with HTML, CSS, and JavaScript

    1. 1. Building Mobile Apps with HTML, CSS, & JavaScript Jonathan Stark
    2. 2. Staggering Growth
    3. 3. Everything is Up• Average daily useage• Mobile media usage• Smartphone ownership• 3G/4G subscribers• % of smartphones vs dumfones
    4. 4. 5 Billion Subscriptions up from 4.6B in 2009 and 726M in 2000
    5. 5. This isn’t about mobile... ...it’s about the future of computing.
    6. 6. Fragmentation
    7. 7. Platform Fragmention• iOS• Android (F, G, H, I)• BlackBerry• Windows Phone• webOS• (Symbian, MeeGo, bada, etc...)
    8. 8. Device Fragmentation• 68 Android 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. 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. 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. 11. Three Approaches
    12. 12. Three Approaches• Pure native apps• Web apps• Hybrid apps
    13. 13. Pure Native Apps
    14. 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. 15. Web Apps
    16. 16. Web Apps• Finger-friendly mobile web site• Can run offline (!)• Can NOT access device APIs• Can NOT be sold in native app stores
    17. 17. Hybrid Apps
    18. 18. Hybrid Apps• Web files bindled in native execuatble• Access to device APIs• Sell in native app stores• Not prefect, but pretty damn good
    19. 19. Syllabus...• How to make good web apps• How to take web apps offline• How to access devices APIs from a web app• DEEBUGGINGG!
    20. 20. Interface Guidelines
    21. 21. Mobile ≠ Desktop• Tiny screen• Battery powered• Spotty connection• Small pipe• Expensive data• Distracted user
    22. 22. Mobile Use-Cases• Bored• Busy• Lost
    23. 23. Mobile Use-Cases• Bored • Gaming • Facebook • YouTube • News
    24. 24. Mobile Use-Cases• Busy • Checking email • Updating todos/calendar • Transferring money
    25. 25. Mobile Use-Cases• Lost • Where should I go for dinner? • How do I get to my hotel? • Have my friends been here?
    26. 26. What’s On YourHome Screen?
    27. 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
    28. 28. credit: @globalmoxie
    29. 29. Be Finger Friendly• Chunky targets• Generous spacing• Avoid scrolling• Controls at the bottom credit: @globalmoxie
    30. 30. Intro to jQTouch
    31. 31. jQTouch• jQuery plugin• Created by @DavidKaneda• Native CSS3 Animations• and tons more...
    32. 32. demo
    33. 33. CSS3 Transforms, Transitions, & Animations
    34. 34. demo
    35. 35. Advanced Styling with CSS3
    36. 36. demo
    37. 37. Building Offline Web Apps with HTML5
    38. 38. Offline Web Apps• Web Storage• Web SQL Database• Application Cache
    39. 39. Web Storage• localStorage• sessionStorage
    40. 40. demo
    41. 41. Web SQL Database• SQLite• JavaScript API• Transactions
    42. 42. demo
    43. 43. Application Cache• A simple text document• Hosted on your web server• Lists static resources
    44. 44. demo
    45. 45. Building Native WebApps with PhoneGap
    46. 46. PhoneGap• Open source• Created by @Nitobi• Native app wrapper• Multiple platforms
    47. 47. http://www.phonegap.com/features
    48. 48. demo
    49. 49. build.phonegap.com
    50. 50. Debugging
    51. 51. WEINRE• WEb INspector REmote• Created by @pmuellr• Installed locally• Interact with DOM• Interact with Console
    52. 52. demo
    53. 53. JS Console• Created by @rem• Online service• Interact with Console
    54. 54. demo
    55. 55. More Info• http://jonathanstark.com/books• http://jonathanstark.com/contact• http://jonathanstark.com/wdx4

    ×