Building Mobile Apps with HTML, CSS, and JavaScript

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