Your SlideShare is downloading. ×
0
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Build, Distribute, Monetize HTML5 Mobile Web Apps - Nov 2012
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

2,243

Published on

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

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,243
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
1
Comments
0
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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!
  • Transcript

    • 1. Build, distribute, monetizeHTML5 Mobile Web Apps Emanuele Bolognesi @emabolo November 2012
    • 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. Good Morning! @emabolo
    • 4. So, you woke up this morning……and decided it’s time for you to makemoney with a mobile app.. @emabolo
    • 5. option 1 @emabolo
    • 6. @emabolo
    • 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. 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. And.. native apps are not portable.. @emabolo
    • 10. @emabolo
    • 11. option 2 @emabolo
    • 12. @emabolo
    • 13. Why? @emabolo
    • 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. option 3 @emabolo
    • 16. Hybrid Apps @emabolo
    • 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. So let’s try to choose Option 2 pure web apps @emabolo
    • 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. Building Web Apps @emabolo
    • 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. LibrariesJavascript and HTML5 already give you a lot of power! @emabolo
    • 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. Design & Layout @emabolo
    • 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. 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. 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. 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. 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. 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. 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. 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. User Interaction @emabolo
    • 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. 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. 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. 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. 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. GeolocationGeolocation is one of themost supported HTML5 APIon Mobile (Android 2+,iOS3+, WinPhone 7.5+,Blackberry OS 6.0+) @emabolo
    • 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. Storage @emabolo
    • 42. Going OfflineMobile users arenot alwaysconnectedAppcache andweb storage canhelp (though theyare not perfect) @emabolo
    • 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. 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. Graphics @emabolo
    • 46. Canvas Canvas allows you to create graphics on the fly using JavascriptBrowserQuest by Mozillahttp://browserquest.mozilla.org/ @emabolo
    • 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. 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. CSS3IE IE IE 6 8 9 Firefox Mobile Safari 4.3.3 Chrome 13 5 @emabolo
    • 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. Design and Animation with CSS3 Live demo here: http://bit.ly/css3bender By @oldknickers @emabolo
    • 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. 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. Distribution & Monetization @emabolo
    • 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. 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. 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. 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. 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. Installation Flow• Automatic “Add to Home Screen” balloon for iPhone users• Android launcher and widget @emabolo
    • 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. Purchase ExperienceJavascriptConferenc Javascripte Conferenc e Javascript Conference @emabolo
    • 63. Conclusions @emabolo
    • 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. Let’s stay in touch•emanuele@appsfuel.com• twitter: @emabolo• AppsFuel www.appsfuel.com• Mobile Web Italy www.mobilewebitaly.org @emabolo
    • 66. Thank You!www.mobilewebitaly.org @emabolo

    ×