Build, distribute, monetizeHTML5 Mobile Web Apps     Emanuele Bolognesi        @emabolo        November 2012
Hi, I’m Emanuele                       o Captain of the starship AppsFuel                       o Working with Web technol...
Good Morning!                @emabolo
So, you woke up this morning……and decided it’s time for you to makemoney with a mobile app..                              ...
option 1           @emabolo
@emabolo
It’s probably not a good idea.. Why?1. If you are a web developer the learning   curve is high2. Native stores are over-sa...
80% of iOS developers are NOT generating enough revenue to support a business, 59% of them are actually losing money!     ...
And.. native apps are not portable..                                       @emabolo
@emabolo
option 2           @emabolo
@emabolo
Why?       @emabolo
More reasons…• HTML5 is now a standard for  mobile web development• There were 336 million  HTML5-capable phones sold  in ...
option 3           @emabolo
Hybrid Apps              @emabolo
• An HTML5 WebView wrapped in a  native container is always slower  than a pure HTML5 web app• In terms of distribution, h...
So let’s try to choose Option 2        pure web apps                              @emabolo
Native App        Hybrid App        Web App                  Obj-C, Java, C#,Languages                            HTML, JS...
Building Web Apps                    @emabolo
What is a mobile web app? “A product or service specificallydesigned and optimized for mobile devices and developed with w...
LibrariesJavascript and HTML5 already   give you a lot of power!                               @emabolo
HTML5 features on mobile• Basics  – Viewport              • Offline and Storage  – Web app settings        – Going offline...
Design & Layout                  @emabolo
Meta Viewport The Meta Viewport tells the browser that the page is optimized for mobilehttp://seooutsourcingchick.com/2011...
How to set the meta viewport<meta name="viewport" content="width=device-width">// or<meta name="viewport" content="width=d...
Web Apps Settings<link rel="apple-touch-icon-precomposed" href="/icon.png"><meta name="apple-mobile-web-app-capable" conte...
Device and feature detection                                      if (DetectTierTablet()) {  Device detection:            ...
Fixed Positioning with CSS                                                          h1#titlebar {   Position: fixed       ...
Scrolling-webkit-overflow-scrolling : touch;Native style momentum scrolling inside your web app (onlyavailable on iOS5+)  ...
HTML5 Mobile Forms<input      type="text" name="login" required><input      type="email" name="myemail” required><input   ...
Forms ValidationYou can use the validity property:// Testing the "myemail" field validityif (!myemail.validity.valid) {   ...
User Interaction                   @emabolo
Touch events         Single touch Javascript         APIs are well         supported on all         platforms         Mult...
Supporting Touch in Javascript                            var obj = document.getElementById(id);Listen to thetouchstart,  ...
How to support Finger swipe?• touchStart handler saves the starting coordinates• touchMove saves the current coordinates• ...
Device Orientation• The deviceorientation                                  alpha  event informs you  about how the device ...
Device Orientation JS APIif (window.DeviceOrientationEvent) {// if orientation is supported, listen for the eventwindow.ad...
GeolocationGeolocation is one of themost supported HTML5 APIon Mobile (Android 2+,iOS3+, WinPhone 7.5+,Blackberry OS 6.0+)...
Using Geolocation in Web Apps• getCurrentPositio                    navigator.geolocation.getCurrentPosition  n and       ...
Storage          @emabolo
Going OfflineMobile users arenot alwaysconnectedAppcache andweb storage canhelp (though theyare not perfect)              ...
Web StoragelocalStorage.setItem("name", "Walter Bishop");localStorage.name = "Walter Bishop"; // fasterdelete localStorage...
Appcache                                     <html manifest="appcache.manifest">• Good news:  it’s very well              ...
Graphics           @emabolo
Canvas   Canvas allows   you to create   graphics on the   fly using   JavascriptBrowserQuest by Mozillahttp://browserques...
Using Canvas 2D context is                  <canvas id="testCanvas" width="320"                                height="200...
Canvas Mobile Games• Canvas performance is  very good on iOS• On Android the only  usable browser is  Chrome• Pure web app...
CSS3IE                IE                  IE 6                8                    9 Firefox   Mobile Safari 4.3.3   Chrom...
CSS3 on Mobile• Gradients                    .default {                                -webkit-transition: all 1s ease-in-...
Design and Animation with CSS3    Live demo here:   http://bit.ly/css3bender                      By @oldknickers         ...
What’s next?•    Media Capture API•    Battery Status API•    Vibration API•    Contacts API•    Web Intents•    WebSocket...
Going back to the table…                    Native App        Hybrid App        Web App                  Obj-C, Java, C#,L...
Distribution & Monetization                          @emabolo
Key questions• How do users  discover your web  app?• How do users install  and access your web  app?• How do you make  mo...
Opportunities for web apps are rising This year HTML5 mobile developers will finally be able to distribute their apps • Ap...
What is AppsFuel• It’s a marketplace for  HTML5 mobile web apps• Available worldwide• Where you can submit  your app for f...
How to submit your app to AppsFuel• No special  requirements!• Enter the URL of the  app and the  metadata• or the app man...
How to submit to Firefox OS marketplace• Just enter the  Manifest URL• The manifest  file is json file  with title,  descr...
Installation Flow• Automatic “Add to  Home Screen” balloon  for iPhone users• Android launcher and  widget                ...
Make Money with AppsFuel• Easy to implement payment  API• Paid apps and Premium  Timed access• Italy, Spain, France to be ...
Purchase ExperienceJavascriptConferenc                  Javascripte                          Conferenc                    ...
Conclusions              @emabolo
Conclusions• 2012 marks the start of a new era for  mobile web apps thanks to a  convergence of factors:  – The technology...
Let’s stay in touch•emanuele@appsfuel.com• twitter: @emabolo• AppsFuel  www.appsfuel.com• Mobile Web Italy  www.mobilewebi...
Thank You!www.mobilewebitaly.org   @emabolo
Upcoming SlideShare
Loading in...5
×

Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012

2,340

Published on

Updated November 2012 - Presented at: Javascript Conference (Düsseldorf) October 2012, Codemotion (Venezia) and Mobile Tea Meetup (Rome) November 2012

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,340
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
1
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide
  • The touches property contains information about every finger currently touching the screen, while the targetTouches only the fingers touching the DOM node
  • You can integrate it with Google maps, Foursquare API, Twitter and more to build amazing services!
  • And also videogames!
  • Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012

    1. 1. Build, distribute, monetizeHTML5 Mobile Web Apps Emanuele Bolognesi @emabolo November 2012
    2. 2. Hi, I’m Emanuele o Captain of the starship AppsFuel o Working with Web technologies since 1997 o Working with Mobile technologies since 2005 o Part time evangelist, speaker and teacher o Huge fan of Fringe, Star Trek, Sid Meier’s videogames, and… twitter: @emabolo HTML5! @emabolo
    3. 3. Good Morning! @emabolo
    4. 4. So, you woke up this morning……and decided it’s time for you to makemoney with a mobile app.. @emabolo
    5. 5. option 1 @emabolo
    6. 6. @emabolo
    7. 7. It’s probably not a good idea.. Why?1. If you are a web developer the learning curve is high2. Native stores are over-saturated3. There is a very high competition, very low conversion rate, very low profit @emabolo
    8. 8. 80% of iOS developers are NOT generating enough revenue to support a business, 59% of them are actually losing money! http://app-promo.com/wake-up-call-infographic/ @emabolo
    9. 9. And.. native apps are not portable.. @emabolo
    10. 10. @emabolo
    11. 11. option 2 @emabolo
    12. 12. @emabolo
    13. 13. Why? @emabolo
    14. 14. More reasons…• HTML5 is now a standard for mobile web development• There were 336 million HTML5-capable phones sold in 2011• There will be one billion HTML5-capable phones sold in 2013http://techcrunch.com/2011/12/07/forecast-1-billion-html5-phones-by-2013/ @emabolo
    15. 15. option 3 @emabolo
    16. 16. Hybrid Apps @emabolo
    17. 17. • An HTML5 WebView wrapped in a native container is always slower than a pure HTML5 web app• In terms of distribution, hybrid app means native apphttps://www.scirra.com/blog/85/the-great-html5-mobile-gaming-performance-comparison @emabolo
    18. 18. So let’s try to choose Option 2 pure web apps @emabolo
    19. 19. Native App Hybrid App Web App Obj-C, Java, C#,Languages HTML, JS, CSS HTML5 HTML, JS, CSS etc Xcode, Android Phonegap + Your favouriteRequired Tools SDK, Eclipse, Native SDKs text editor Visual Studio… Native App Native AppDistribution ? Stores StoresReviews/Approva Required Required Not requiredl Via Native App Via Native App ?Monetization Stores Stores ? or ADV or ADV @emabolo
    20. 20. Building Web Apps @emabolo
    21. 21. What is a mobile web app? “A product or service specificallydesigned and optimized for mobile devices and developed with web technologies only” “Any sufficiently advanced technology is indistinguishable from magic.” A.C. Clarke @emabolo
    22. 22. LibrariesJavascript and HTML5 already give you a lot of power! @emabolo
    23. 23. HTML5 features on mobile• Basics – Viewport • Offline and Storage – Web app settings – Going offline – Web storage• User Interface – Device and features • Multimedia and detection Graphics – Position: fixed – Audio/Video – Mobile HTML5 forms – Canvas – CSS3 Transitions and• User Interaction transformations – Touch events – Device orientation – Geolocation @emabolo
    24. 24. Design & Layout @emabolo
    25. 25. Meta Viewport The Meta Viewport tells the browser that the page is optimized for mobilehttp://seooutsourcingchick.com/2011/11/15/the-importance-of-mobile-website-optimization/ @emabolo
    26. 26. How to set the meta viewport<meta name="viewport" content="width=device-width">// or<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no"> Introduced by Mobile Safari, now it’s widely supported by smartphones, including iOS, Android, Blackberry, Windows Phone 7.http://quirksmode.org/presentations/Autumn2012/viewports_bologna.pdf @emabolo
    27. 27. Web Apps Settings<link rel="apple-touch-icon-precomposed" href="/icon.png"><meta name="apple-mobile-web-app-capable" content="yes">• Touch-icon-precomposed Set the bookmark icon• Mobile-web-app-capable Enable full screen mode, hides the address bar, improves performance (iOS only) @emabolo
    28. 28. Device and feature detection if (DetectTierTablet()) { Device detection: // HTML5 compatible tablets ... • MobileESP } else if (DetectTierIphone()) { // touchscreen phones with webkit browsers ... }Feature detection: if (Modernizr.canvas) { // draw something• Modernizr ... }• Media querieshttp://code.google.com/p/mobileesp/http://modernizr.com/ @emabolo
    29. 29. Fixed Positioning with CSS h1#titlebar { Position: fixed position: fixed; } Now supported on iOS5.0+, Android 2.3+, BB 7.0+ Remember to disable viewport scaling to avoid strange behavior Position:fixed Live demo: http://bit.ly/posfixed by @brad_frosthttp://bradfrostweb.com/blog/mobile/fixed-position/http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/ @emabolo
    30. 30. Scrolling-webkit-overflow-scrolling : touch;Native style momentum scrolling inside your web app (onlyavailable on iOS5+) Live demo: http://bit.ly/overdemohttp://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/ @emabolo
    31. 31. HTML5 Mobile Forms<input type="text" name="login" required><input type="email" name="myemail” required><input type="url" name="website"><input type="number" name="age">Note: on mobile theinput types usually don’tprevent forms to besubmitted but jsvalidation workshttp://wufoo.com/html5/ @emabolo
    32. 32. Forms ValidationYou can use the validity property:// Testing the "myemail" field validityif (!myemail.validity.valid) { if (myemail.validity.valueMissing) { alert("Please enter a value"); } else if (myemail.validity.typeMismatch) { alert("Please enter a valid email address"); } else { alert("...still invalid"); }}http://css.dzone.com/articles/html5-form-validation @emabolo
    33. 33. User Interaction @emabolo
    34. 34. Touch events Single touch Javascript APIs are well supported on all platforms Multi-touch and gestures are fully supported on iOS4+ but don’t work properly on Android 2.x and 3.x @emabolo
    35. 35. Supporting Touch in Javascript var obj = document.getElementById(id);Listen to thetouchstart, obj.addEventListener("touchmove",touchmove function(event){and // if one finger touch is detectedtouchend if(event.touches.length == 1){events tosupport // do somethingtouch } }, false);http://www.sitepen.com/blog/2011/12/07/touching-and-gesturing-on-iphone-android-and-more/ @emabolo
    36. 36. How to support Finger swipe?• touchStart handler saves the starting coordinates• touchMove saves the current coordinates• touchEnd calculates the distance and angle of the swipe, then the direction, and finally decides what to do Source code and Live demo here: http://bit.ly/demoswipehttp://padilicious.com/code/touchevents/index.html @emabolo
    37. 37. Device Orientation• The deviceorientation alpha event informs you about how the device is oriented in space Z• The devicemotion gamma event also returns acceleration• Supported by iOS Y 4.2+, Android 3.0+ X beta @emabolo
    38. 38. Device Orientation JS APIif (window.DeviceOrientationEvent) {// if orientation is supported, listen for the eventwindow.addEventListener("deviceorientation", function(eventData) { var tiltLR = eventData.gamma; var tiltFB = eventData.beta; var compassDir = eventData.alpha; // do something ...}, false);} Live demo here: http://bit.ly/orientationdemohttp://www.html5rocks.com/en/tutorials/device/orientation/ @emabolo
    39. 39. GeolocationGeolocation is one of themost supported HTML5 APIon Mobile (Android 2+,iOS3+, WinPhone 7.5+,Blackberry OS 6.0+) @emabolo
    40. 40. Using Geolocation in Web Apps• getCurrentPositio navigator.geolocation.getCurrentPosition n and (successCallbackFn, errorCallbackFn); watchPosition can be used to asynchronously function successCallbackFn(position) { get the position var lat = position.coords.latitude; var lon = position.coords.longitude;• When the position // I got the position! is returned, it’s ... contained within a } position object http://msdn.microsoft.com/en-us/magazine/hh563893.aspx @emabolo
    41. 41. Storage @emabolo
    42. 42. Going OfflineMobile users arenot alwaysconnectedAppcache andweb storage canhelp (though theyare not perfect) @emabolo
    43. 43. Web StoragelocalStorage.setItem("name", "Walter Bishop");localStorage.name = "Walter Bishop"; // fasterdelete localStorage.title;• Two versions: local and session• Supported by Android 2.0+, iOS 2.0+• You can only store strings (use JSON if necessary)• Safe up to 2.5 MB• Unfortunately isn’t asynchronous http://www.nczonline.net/blog/2012/03/07/in-defense-of-localstorage/ @emabolo
    44. 44. Appcache <html manifest="appcache.manifest">• Good news: it’s very well CACHE MANIFEST # version 0.0.1 supported and very powerful js/script-v1.0.js css/style-v1.1.css• Bad news: it’s img/logo.png going to give NETWORK: you a lot of pages/* headaches FALLBACK: / index_offline.htmlhttp://www.alistapart.com/articles/application-cache-is-a-douchebag/ @emabolo
    45. 45. Graphics @emabolo
    46. 46. Canvas Canvas allows you to create graphics on the fly using JavascriptBrowserQuest by Mozillahttp://browserquest.mozilla.org/ @emabolo
    47. 47. Using Canvas 2D context is <canvas id="testCanvas" width="320" height="200"></canvas> widely ... supported on var canvas = document.getElementById("testCanvas"); mobile, but var context = canvas.getContext("2d"); not 3D context context.beginPath(); (WebGL) context.moveTo(50, 50); context.lineTo(300, 100); context.lineWidth = 10; context.strokeStyle = "#ff0000"; context.stroke();http://www.html5canvastutorials.com/ @emabolo
    48. 48. Canvas Mobile Games• Canvas performance is very good on iOS• On Android the only usable browser is Chrome• Pure web apps perform better than web apps compiled with PhoneGap Live demo here: http://bit.ly/html5-invasion by @cykodhttps://github.com/cykod/AlienInvasion @emabolo
    49. 49. CSS3IE IE IE 6 8 9 Firefox Mobile Safari 4.3.3 Chrome 13 5 @emabolo
    50. 50. CSS3 on Mobile• Gradients .default { -webkit-transition: all 1s ease-in-• Selectors (:nth-child etc) out;• Border-radius transition: all 1s ease-in-out; }• Transitions and transforms are supported .rotated { on mobile -webkit-transform:rotate(45deg); transform:rotate(45deg);• Note: most animations } are hardware accelerated on Webkit, so they are much better than any other custom solution• Box-shadow: don’t use it, poor performance on mobile! @emabolo
    51. 51. Design and Animation with CSS3 Live demo here: http://bit.ly/css3bender By @oldknickers @emabolo
    52. 52. What’s next?• Media Capture API• Battery Status API• Vibration API• Contacts API• Web Intents• WebSocket API• Indexed Database API• Web Audio API TO YOUR NEAREST JAVASCRIPT CODE• And morehttp://www.w3.org/standards/techs/js#w3c_all @emabolo
    53. 53. Going back to the table… Native App Hybrid App Web App Obj-C, Java, C#,Languages HTML, JS, CSS HTML5 HTML, JS, CSS etc Xcode, Android Phonegap + Your favouriteRequired Tools SDK, Eclipse, Native SDKs text editor Visual Studio… Native App Native AppDistribution ? Stores StoresReviews/Approva Required Required Not requiredl Via Native App Via Native App ?Monetization Stores Stores ? or ADV or ADV @emabolo
    54. 54. Distribution & Monetization @emabolo
    55. 55. Key questions• How do users discover your web app?• How do users install and access your web app?• How do you make money with your web app? @emabolo
    56. 56. Opportunities for web apps are rising This year HTML5 mobile developers will finally be able to distribute their apps • AppsFuel – beta version is live ! • Mozilla Apps Marketplace – is not yet live, but apps submission is open • And more – Facebook app center? The good news is you don’t have to choose. Just create your app and submit it to all the existing app stores! @emabolo
    57. 57. What is AppsFuel• It’s a marketplace for HTML5 mobile web apps• Available worldwide• Where you can submit your app for free• And earn money via mobile operator billing http://appsfuel.com Join and submit your app here: https://developer.appsfuel.com @emabolo
    58. 58. How to submit your app to AppsFuel• No special requirements!• Enter the URL of the app and the metadata• or the app manifest• Your app will go live immediately developer.appsfuel.com @emabolo
    59. 59. How to submit to Firefox OS marketplace• Just enter the Manifest URL• The manifest file is json file with title, description, screenshots and all the other info about your apphttps://marketplace.mozilla.org/developers/submit/app/manifest @emabolo
    60. 60. Installation Flow• Automatic “Add to Home Screen” balloon for iPhone users• Android launcher and widget @emabolo
    61. 61. Make Money with AppsFuel• Easy to implement payment API• Paid apps and Premium Timed access• Italy, Spain, France to be launched Dec 2012• More countries to follow soon• Rev. share of more than 70% for developers @emabolo
    62. 62. Purchase ExperienceJavascriptConferenc Javascripte Conferenc e Javascript Conference @emabolo
    63. 63. Conclusions @emabolo
    64. 64. Conclusions• 2012 marks the start of a new era for mobile web apps thanks to a convergence of factors: – The technology is improving every day – Distribution channels are being launched – Monetization is just around the corner ;-)• If you haven’t yet begun, start developing your HTML5 mobile web app right now! @emabolo
    65. 65. Let’s stay in touch•emanuele@appsfuel.com• twitter: @emabolo• AppsFuel www.appsfuel.com• Mobile Web Italy www.mobilewebitaly.org @emabolo
    66. 66. Thank You!www.mobilewebitaly.org @emabolo

    ×