SlideShare una empresa de Scribd logo
1 de 56
Building Mobile Apps with
 HTML, CSS, & JavaScript
        Jonathan Stark
Staggering Growth
Everything is Up

• Average daily useage
• Mobile media usage
• Smartphone ownership
• 3G/4G subscribers
• % of smartphones vs dumfones
5 Billion Subscriptions
  up from 4.6B in 2009 and 726M in 2000
This isn’t about mobile...
    ...it’s about the future of computing.
Fragmentation
Platform Fragmention
• iOS
• Android (F, G, H, I)
• BlackBerry
• Windows Phone
• webOS
• (Symbian, MeeGo, bada, etc...)
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
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
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
Three Approaches
Three Approaches


• Pure native apps
• Web apps
• Hybrid apps
Pure Native Apps
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
Web Apps
Web Apps

• Finger-friendly mobile web site
• Can run offline (!)
• Can NOT access device APIs
• Can NOT be sold in native app stores
Hybrid Apps
Hybrid Apps

• Web files bindled in native execuatble
• Access to device APIs
• Sell in native app stores
• Not prefect, but pretty damn good
Syllabus...

• How to make good web apps
• How to take web apps offline
• How to access devices APIs from a web app
• DEEBUGGINGG!
Interface Guidelines
Mobile ≠ Desktop
• Tiny screen
• Battery powered
• Spotty connection
• Small pipe
• Expensive data
• Distracted user
Mobile Use-Cases

• Bored
• Busy
• Lost
Mobile Use-Cases

• Bored
 • Gaming
 • Facebook
 • YouTube
 • News
Mobile Use-Cases

• Busy
 • Checking email
 • Updating todos/calendar
 • Transferring money
Mobile Use-Cases

• Lost
 • Where should I go for dinner?
 • How do I get to my hotel?
 • Have my friends been here?
What’s On Your
Home Screen?
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
credit: @globalmoxie
Be Finger Friendly

• Chunky targets
• Generous spacing
• Avoid scrolling
• Controls at the bottom

                           credit: @globalmoxie
Intro to jQTouch
jQTouch

• jQuery plugin
• Created by @DavidKaneda
• Native CSS3 Animations
• and tons more...
demo
CSS3 Transforms,
 Transitions, &
  Animations
demo
Advanced Styling
  with CSS3
demo
Building Offline Web
 Apps with HTML5
Offline Web Apps

• Web Storage
• Web SQL Database
• Application Cache
Web Storage


• localStorage
• sessionStorage
demo
Web SQL Database

• SQLite
• JavaScript API
• Transactions
demo
Application Cache

• A simple text document
• Hosted on your web server
• Lists static resources
demo
Building Native Web
Apps with PhoneGap
PhoneGap

• Open source
• Created by @Nitobi
• Native app wrapper
• Multiple platforms
http://www.phonegap.com/features
demo
build.phonegap.com
Debugging
WEINRE

• WEb INspector REmote
• Created by @pmuellr
• Installed locally
• Interact with DOM
• Interact with Console
demo
JS Console

• Created by @rem
• Online service
• Interact with Console
demo
More Info

• http://jonathanstark.com/books
• http://jonathanstark.com/contact
• http://jonathanstark.com/wdx4

Más contenido relacionado

La actualidad más candente

I os class 1 of 3 actual
I os class 1 of 3 actualI os class 1 of 3 actual
I os class 1 of 3 actual
Vic Ward
 
Building Cross Platform Mobile Apps
Building Cross Platform Mobile AppsBuilding Cross Platform Mobile Apps
Building Cross Platform Mobile Apps
Jonathan Stark
 
Isys 363 group part 1 padres
Isys 363 group part 1 padresIsys 363 group part 1 padres
Isys 363 group part 1 padres
Allison Fleming
 
Firefox phonesimplifiedui
Firefox phonesimplifieduiFirefox phonesimplifiedui
Firefox phonesimplifiedui
Madhava Enros
 

La actualidad más candente (20)

iPad Workshop
iPad WorkshopiPad Workshop
iPad Workshop
 
I os class 1 of 3 actual
I os class 1 of 3 actualI os class 1 of 3 actual
I os class 1 of 3 actual
 
How to write mobile optimized content for your app
How to write mobile optimized content for your appHow to write mobile optimized content for your app
How to write mobile optimized content for your app
 
Building Cross Platform Mobile Apps
Building Cross Platform Mobile AppsBuilding Cross Platform Mobile Apps
Building Cross Platform Mobile Apps
 
Tar tablet september 2013
Tar tablet september 2013Tar tablet september 2013
Tar tablet september 2013
 
Mobile Internet
Mobile InternetMobile Internet
Mobile Internet
 
Smartphone Shootout: Which One is Best?
Smartphone Shootout: Which One is Best?Smartphone Shootout: Which One is Best?
Smartphone Shootout: Which One is Best?
 
How to create a mobile version of your website
How to create a mobile version of your websiteHow to create a mobile version of your website
How to create a mobile version of your website
 
Xamarin.Forms
Xamarin.FormsXamarin.Forms
Xamarin.Forms
 
Get hAPPy. – Apps & Tools for a Better You! - Cassie Dispenza
Get hAPPy. – Apps & Tools for a Better You! - Cassie DispenzaGet hAPPy. – Apps & Tools for a Better You! - Cassie Dispenza
Get hAPPy. – Apps & Tools for a Better You! - Cassie Dispenza
 
Mobile websites
Mobile websitesMobile websites
Mobile websites
 
Content gone mobile
Content gone mobileContent gone mobile
Content gone mobile
 
Mobile Design Concepts
Mobile Design ConceptsMobile Design Concepts
Mobile Design Concepts
 
Going native - Taking desktop applications to mobile devices
Going native - Taking desktop applications to mobile devicesGoing native - Taking desktop applications to mobile devices
Going native - Taking desktop applications to mobile devices
 
Brundrett. 2015
Brundrett. 2015Brundrett. 2015
Brundrett. 2015
 
Smartphone Apps for the Smart Business Owner
Smartphone Apps for the Smart Business OwnerSmartphone Apps for the Smart Business Owner
Smartphone Apps for the Smart Business Owner
 
Apps fpr Real Estate Agents Reinsw
Apps fpr Real Estate Agents ReinswApps fpr Real Estate Agents Reinsw
Apps fpr Real Estate Agents Reinsw
 
Dreamforce - mobility in the enterprise
Dreamforce  - mobility in the enterpriseDreamforce  - mobility in the enterprise
Dreamforce - mobility in the enterprise
 
Isys 363 group part 1 padres
Isys 363 group part 1 padresIsys 363 group part 1 padres
Isys 363 group part 1 padres
 
Firefox phonesimplifiedui
Firefox phonesimplifieduiFirefox phonesimplifiedui
Firefox phonesimplifiedui
 

Destacado

Mobile App Development
Mobile App DevelopmentMobile App Development
Mobile App Development
Chris Morrell
 

Destacado (11)

Pigeonhole Yourself
Pigeonhole YourselfPigeonhole Yourself
Pigeonhole Yourself
 
The Path to Value Pricing
The Path to Value PricingThe Path to Value Pricing
The Path to Value Pricing
 
Rethink Mobile: Mobile Strategy for Product Designers
Rethink Mobile: Mobile Strategy for Product DesignersRethink Mobile: Mobile Strategy for Product Designers
Rethink Mobile: Mobile Strategy for Product Designers
 
Pigeonhole Yourself
Pigeonhole YourselfPigeonhole Yourself
Pigeonhole Yourself
 
The Revolution Will Not Be Televised: Managing Content and Experience in the ...
The Revolution Will Not Be Televised: Managing Content and Experience in the ...The Revolution Will Not Be Televised: Managing Content and Experience in the ...
The Revolution Will Not Be Televised: Managing Content and Experience in the ...
 
Ratchet - Framework para Web Apps - iOS & Android
Ratchet - Framework para Web Apps - iOS & AndroidRatchet - Framework para Web Apps - iOS & Android
Ratchet - Framework para Web Apps - iOS & Android
 
Conversys Profile V1.1.1250511
Conversys Profile V1.1.1250511Conversys Profile V1.1.1250511
Conversys Profile V1.1.1250511
 
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at GoogleWeb Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
 
Thinking Outside The Little Black Box: Interaction Design in The Post-Mobile Era
Thinking Outside The Little Black Box: Interaction Design in The Post-Mobile EraThinking Outside The Little Black Box: Interaction Design in The Post-Mobile Era
Thinking Outside The Little Black Box: Interaction Design in The Post-Mobile Era
 
HTML5 Web Forms
HTML5 Web FormsHTML5 Web Forms
HTML5 Web Forms
 
Mobile App Development
Mobile App DevelopmentMobile App Development
Mobile App Development
 

Similar a Building Mobile Apps with HTML, CSS, and JavaScript

Best practices for delivering quality web experiences
Best practices for delivering quality web experiencesBest practices for delivering quality web experiences
Best practices for delivering quality web experiences
Ben Mantooth
 
2011 code camp
2011 code camp2011 code camp
2011 code camp
imranq2
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
davyjones
 
Philly ete-2011
Philly ete-2011Philly ete-2011
Philly ete-2011
davyjones
 
Designing for Mobile Devices
Designing for Mobile DevicesDesigning for Mobile Devices
Designing for Mobile Devices
OxonDigital
 
Phonegap for Engineers
Phonegap for EngineersPhonegap for Engineers
Phonegap for Engineers
Brian LeRoux
 
Web Apps vs. Native Apps: The Low Down
Web Apps vs. Native Apps: The Low DownWeb Apps vs. Native Apps: The Low Down
Web Apps vs. Native Apps: The Low Down
Apppli
 

Similar a Building Mobile Apps with HTML, CSS, and JavaScript (20)

Best practices for delivering quality web experiences
Best practices for delivering quality web experiencesBest practices for delivering quality web experiences
Best practices for delivering quality web experiences
 
Beyond the Desktop: Sites and Apps for Phones and Tablets
Beyond the Desktop: Sites and Apps for Phones and TabletsBeyond the Desktop: Sites and Apps for Phones and Tablets
Beyond the Desktop: Sites and Apps for Phones and Tablets
 
Phone gap
Phone gapPhone gap
Phone gap
 
Native vs hybrid approach Mobile App Development
Native vs hybrid approach Mobile App DevelopmentNative vs hybrid approach Mobile App Development
Native vs hybrid approach Mobile App Development
 
Future of Mobile
Future of MobileFuture of Mobile
Future of Mobile
 
2011 code camp
2011 code camp2011 code camp
2011 code camp
 
Tuenti Mobile Development
Tuenti Mobile DevelopmentTuenti Mobile Development
Tuenti Mobile Development
 
HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?
 
The mobile browser world
The mobile browser worldThe mobile browser world
The mobile browser world
 
Why Do Mobile Projects Fail?
Why Do Mobile Projects Fail?Why Do Mobile Projects Fail?
Why Do Mobile Projects Fail?
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
 
How To Become A Mobile Application Developer 101
How To Become A Mobile Application Developer 101How To Become A Mobile Application Developer 101
How To Become A Mobile Application Developer 101
 
DjangoSki
DjangoSkiDjangoSki
DjangoSki
 
Synapse india reviews on mobile application development
Synapse india reviews on mobile application developmentSynapse india reviews on mobile application development
Synapse india reviews on mobile application development
 
Philly ete-2011
Philly ete-2011Philly ete-2011
Philly ete-2011
 
Designing for Mobile Devices
Designing for Mobile DevicesDesigning for Mobile Devices
Designing for Mobile Devices
 
Mobile Web High Performance
Mobile Web High PerformanceMobile Web High Performance
Mobile Web High Performance
 
Phonegap for Engineers
Phonegap for EngineersPhonegap for Engineers
Phonegap for Engineers
 
Web Apps vs. Native Apps: The Low Down
Web Apps vs. Native Apps: The Low DownWeb Apps vs. Native Apps: The Low Down
Web Apps vs. Native Apps: The Low Down
 
Webview: The fifth element
Webview: The fifth elementWebview: The fifth element
Webview: The fifth element
 

Más de Jonathan Stark

Principles of Mobile Interface Design
Principles of Mobile Interface DesignPrinciples of Mobile Interface Design
Principles of Mobile Interface Design
Jonathan Stark
 
Enterprise Mobile: The Prosumer Impact On Business
Enterprise Mobile: The Prosumer Impact On BusinessEnterprise Mobile: The Prosumer Impact On Business
Enterprise Mobile: The Prosumer Impact On Business
Jonathan Stark
 
Mobile Apps and the Enterprise
Mobile Apps and the EnterpriseMobile Apps and the Enterprise
Mobile Apps and the Enterprise
Jonathan Stark
 
Offline Application Cache
Offline Application CacheOffline Application Cache
Offline Application Cache
Jonathan Stark
 

Más de Jonathan Stark (18)

Ditching Hourly for Independent Firms
Ditching Hourly for Independent FirmsDitching Hourly for Independent Firms
Ditching Hourly for Independent Firms
 
How To Get More Leads And Increase Your Fees - Jonathan Stark
How To Get More Leads And Increase Your Fees - Jonathan StarkHow To Get More Leads And Increase Your Fees - Jonathan Stark
How To Get More Leads And Increase Your Fees - Jonathan Stark
 
Make More Money Without Working More Hours
Make More Money Without Working More HoursMake More Money Without Working More Hours
Make More Money Without Working More Hours
 
The Hourly Trap
The Hourly TrapThe Hourly Trap
The Hourly Trap
 
How To Write Proposals That Close Without Lowering Your Prices
How To Write Proposals That Close Without Lowering Your PricesHow To Write Proposals That Close Without Lowering Your Prices
How To Write Proposals That Close Without Lowering Your Prices
 
How To Write Better Proposals
How To Write Better ProposalsHow To Write Better Proposals
How To Write Better Proposals
 
How To Increase Your Income Without Hiring Junior Developers
How To Increase Your Income Without Hiring Junior DevelopersHow To Increase Your Income Without Hiring Junior Developers
How To Increase Your Income Without Hiring Junior Developers
 
The Browser is Dead, Long Live the Web!
The Browser is Dead, Long Live the Web!The Browser is Dead, Long Live the Web!
The Browser is Dead, Long Live the Web!
 
The Revolution Will Not Be Televised
The Revolution Will Not Be TelevisedThe Revolution Will Not Be Televised
The Revolution Will Not Be Televised
 
Principles of Mobile Interface Design
Principles of Mobile Interface DesignPrinciples of Mobile Interface Design
Principles of Mobile Interface Design
 
Free Coffee, Bad Apples, and the Future of Currency
Free Coffee, Bad Apples, and the Future of CurrencyFree Coffee, Bad Apples, and the Future of Currency
Free Coffee, Bad Apples, and the Future of Currency
 
Three Things First
Three Things FirstThree Things First
Three Things First
 
Everyone Connected
Everyone ConnectedEveryone Connected
Everyone Connected
 
Enterprise Mobile: The Prosumer Impact On Business
Enterprise Mobile: The Prosumer Impact On BusinessEnterprise Mobile: The Prosumer Impact On Business
Enterprise Mobile: The Prosumer Impact On Business
 
Mobile Apps and the Enterprise
Mobile Apps and the EnterpriseMobile Apps and the Enterprise
Mobile Apps and the Enterprise
 
The Mobile Frameworks Landscape
The Mobile Frameworks LandscapeThe Mobile Frameworks Landscape
The Mobile Frameworks Landscape
 
Offline Application Cache
Offline Application CacheOffline Application Cache
Offline Application Cache
 
The Mobile App Landscape
The Mobile App LandscapeThe Mobile App Landscape
The Mobile App Landscape
 

Building Mobile Apps with HTML, CSS, and JavaScript

Notas del editor

  1. 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
  2. Lemme just preach to the choir for a second...\n
  3. No matter how you slice it, mobile is growning like crazy. \n\n(Based on comScore 2010 Mobile Year in Review)\n
  4. (Based on Sony Ericsson estimates)\n\nhttp://techcrunch.com/2010/07/09/ericsson-estimates-5-billion-mobile-subscriptions-worldwide-growing-fast/\n\n\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. \n
  7. 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
  8. \n
  9. \n
  10. \n
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  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. Interface guidelines for mobile devices\n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. Consider the apps that you use every day. What do they have in common?\n
  27. My main apps are Email, SMS, Browser, Todos, News, Banking, Twitter, Kilo, Camera, Notes\n
  28. 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
  29. 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
  30. 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
  31. \n
  32. 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
  33. \n
  34. - 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
  35. \n
  36. - Gradients\n - Rounded corners\n - Text shadow\n - Box shadow\n - Box reflect\n - Border image\n\n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. Cross platform mobile framework for building native mobile applications with html, css, and javascript.\n
  48. PhoneGap support matrix\n
  49. \n
  50. \n
  51. \n
  52. \n
  53. \n
  54. \n
  55. \n
  56. \n