HTML5 & MobileIl futuro è nelle Web Apps    SMAU Mob App Camp     Emanuele Bolognesi            @emabolo       Milano, 19 ...
Hi, I’m Emanuele!                       o  Captain of the starship AppsFuel                       o  Working with Web tech...
Let’s say you woke up this morning……and decided it’s time for you to make moneywith a mobile app..                        ...
option 1           @emabolo
@emabolo
It’s probably not a good idea.. Why?1.  If you are new to native development, there    is a high learning curve2.  Native ...
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 finally introduced a   standard for mobile web   development•  There were 336 million HTML5-   capab...
option 3           @emabolo
Hybrid AppsGreat thing but…                   @emabolo
•  An HTML5 WebView wrapped in a native container   is always slower than a pure HTML5 web app•  In terms of distribution,...
Native App          Hybrid App           Web App                    Obj-C, Java, C#,Languages                          etc...
Building Web Apps                    @emabolo
HTML5 features on mobile•  Basics                      –  Device orientation   –  Viewport                 –  Geolocation ...
Mobile User InterfaceMeta Viewport, media queries, position:fixed, overflow-scrolling: touch, and more…                   ...
Touch events         Single touch Javascript         APIs are well supported         on all platforms         Multi-touch ...
Supporting touch in JavascriptListen to the touchstart, touchmove and touchendevents to support touch  Live demo here:   h...
Device Orientation•  The deviceorientation     	                                              alpha   event informs you ab...
Device Orientation JS API  Live demo here:   http://bit.ly/orientationdemohttp://www.html5rocks.com/en/tutorials/device/or...
GeolocationGeolocation is one of themost supported HTML5 APIon Mobile (Android 2+,iOS3+, WinPhone 7.5+,Blackberry OS 6.0+)...
Going OfflineMobile users are notalways connectedAppcache and WebStorage can helpSupported by Android2.0+, iOS2.0+        ...
CanvasCanvas allows youto create graphicson the fly usingJavascript                     BrowserQuest by Mozilla           ...
Canvas Mobile Games•  On Android the only usable   browser is Chrome•  Pure web apps perform   better than web apps   comp...
CSS3IE 6                IE 8               IE 9 Firefox 5   Mobile Safari 4.3.3   Chrome 13                               ...
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, J...
Distribution & Monetization                          @emabolo
Key questions•  How do users discover   your web app?•  How do users install   and access your web   app?•  How do you mak...
Opportunities for web apps are rising This year HTML5 mobile developers will finally be able to distribute their apps •  A...
What is AppsFuel•  It’s a marketplace for   HTML5 mobile web apps•  Available worldwide•  Where you can submit your   app ...
How to submit your App to AppsFuel•  No special   requirements!•  Enter the URL of the   app and the   metadata•  or the a...
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, Ge...
Purchase ExperienceJavascriptConference                            Javascript                                      Confere...
Conclusions              @emabolo
Conclusions•  2012 marks the start of a new era for   mobile web apps thanks to a convergence   of factors:  –  The techno...
Goodbye!•  Contact me via email:   emanuele@appsfuel.com   or twitter: @emabolo•  Follow our blog:   http://blog.appsfuel....
Thank You!Emanuele Bolognesi   @emabolo                     @emabolo
Upcoming SlideShare
Loading in …5
×

Smau milano 2012 arena social media emanuele-bolognesi

669 views
623 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
669
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Smau milano 2012 arena social media emanuele-bolognesi

  1. 1. HTML5 & MobileIl futuro è nelle Web Apps SMAU Mob App Camp Emanuele Bolognesi @emabolo Milano, 19 Ottobre 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… HTML5! twitter: @emabolo @emabolo
  3. 3. Let’s say you woke up this morning……and decided it’s time for you to make moneywith a mobile app.. @emabolo
  4. 4. option 1 @emabolo
  5. 5. @emabolo
  6. 6. It’s probably not a good idea.. Why?1.  If you are new to native development, there is a high learning curve2.  Native stores are over-saturated3.  There is a very high competition, very low conversion rate, very low profit @emabolo
  7. 7. 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
  8. 8. And.. native apps are not portable.. @emabolo
  9. 9. @emabolo
  10. 10. option 2 @emabolo
  11. 11. @emabolo
  12. 12. Why? @emabolo
  13. 13. More reasons…•  HTML5 finally introduced 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
  14. 14. option 3 @emabolo
  15. 15. Hybrid AppsGreat thing but… @emabolo
  16. 16. •  An HTML5 WebView wrapped in a native container is always slower than a pure HTML5 web app•  In terms of distribution, you still have a native app and you need to distribute it via native app stores.https://www.scirra.com/blog/85/the-great-html5-mobile-gaming-performance-comparison @emabolo
  17. 17. Native App Hybrid App Web App Obj-C, Java, C#,Languages etc HTML, JS, CSS HTML5 HTML, JS, CSS Xcode, Android Phonegap + Your favourite textRequired Tools SDK, Eclipse, Native SDKs editor Visual Studio…Distribution Native App Stores Native App Stores ?Reviews/Approval Required Required Not required Via Native App Via Native App ?Monetization Stores Stores ? or ADV or ADV @emabolo
  18. 18. Building Web Apps @emabolo
  19. 19. HTML5 features on mobile•  Basics –  Device orientation –  Viewport –  Geolocation –  Web app settings •  Offline and Storage•  User Interface –  Going offline –  Device and features –  Web storage detection –  Position: fixed •  Multimedia and Graphics –  Mobile HTML5 forms –  Audio/Video –  Canvas•  User Interaction –  CSS3 Transitions and –  Touch events transformations @emabolo
  20. 20. Mobile User InterfaceMeta Viewport, media queries, position:fixed, overflow-scrolling: touch, and more… Position:fixed demo Enter this URL on your Mobile Phone Browser: http://bit.ly/posfixed by @brad_frost @emabolo
  21. 21. 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
  22. 22. Supporting touch in JavascriptListen to the touchstart, touchmove and touchendevents to support touch Live demo here: http://bit.ly/demoswipe Enter this URL on your mobile phone browserhttp://padilicious.com/code/touchevents/index.html @emabolo
  23. 23. Device Orientation•  The deviceorientation   alpha event informs you about     how the device is     oriented in space       Z gamma•  The devicemotion event     also returns     acceleration      •  Supported by iOS 4.2+,     Y Android 3.0+     X           beta   @emabolo
  24. 24. Device Orientation JS API Live demo here: http://bit.ly/orientationdemohttp://www.html5rocks.com/en/tutorials/device/orientation/ @emabolo
  25. 25. GeolocationGeolocation is one of themost supported HTML5 APIon Mobile (Android 2+,iOS3+, WinPhone 7.5+,Blackberry OS 6.0+) @emabolo
  26. 26. Going OfflineMobile users are notalways connectedAppcache and WebStorage can helpSupported by Android2.0+, iOS2.0+ @emabolo
  27. 27. CanvasCanvas allows youto create graphicson the fly usingJavascript BrowserQuest by Mozilla http://browserquest.mozilla.org/ @emabolo
  28. 28. Canvas Mobile Games•  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-invasionhttps://github.com/cykod/AlienInvasion by @cykod @emabolo
  29. 29. CSS3IE 6 IE 8 IE 9 Firefox 5 Mobile Safari 4.3.3 Chrome 13 @emabolo
  30. 30. Design and Animation with CSS3 Live demo here: http://bit.ly/css3bender By @oldknickers @emabolo
  31. 31. 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
  32. 32. Going back to the table… Native App Hybrid App Web App Obj-C, Java, C#,Languages etc HTML, JS, CSS HTML5 HTML, JS, CSS Xcode, Android Phonegap + Your favourite textRequired Tools SDK, Eclipse, Native SDKs editor Visual Studio…Distribution Native App Stores Native App Stores ?Reviews/Approval Required Required Not required Via Native App Via Native App ?Monetization Stores Stores ? or ADV or ADV @emabolo
  33. 33. Distribution & Monetization @emabolo
  34. 34. 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
  35. 35. 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
  36. 36. 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
  37. 37. 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
  38. 38. Installation Flow•  Automatic “Add to Home Screen” balloon for iPhone users•  Android launcher and widget @emabolo
  39. 39. Make Money with AppsFuel•  Easy to implement payment API•  Paid apps and Premium Timed access•  Italy, Spain, France, Germany to be launched November 2012•  More countries to follow soon•  Rev. share of more than 70% for developers @emabolo
  40. 40. Purchase ExperienceJavascriptConference Javascript Conference Javascript Conference @emabolo
  41. 41. Conclusions @emabolo
  42. 42. 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
  43. 43. Goodbye!•  Contact me via email: emanuele@appsfuel.com or twitter: @emabolo•  Follow our blog: http://blog.appsfuel.com or twitter: @appsfuel @emabolo
  44. 44. Thank You!Emanuele Bolognesi @emabolo @emabolo

×