Your SlideShare is downloading. ×
  • Like
Smau milano 2012   arena social media emanuele-bolognesi
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Smau milano 2012 arena social media emanuele-bolognesi

  • 520 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
520
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
6
Comments
0
Likes
0

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

Transcript

  • 1. HTML5 & MobileIl futuro è nelle Web Apps SMAU Mob App Camp Emanuele Bolognesi @emabolo Milano, 19 Ottobre 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… HTML5! twitter: @emabolo @emabolo
  • 3. Let’s say you woke up this morning……and decided it’s time for you to make moneywith a mobile app.. @emabolo
  • 4. option 1 @emabolo
  • 5. @emabolo
  • 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. 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. And.. native apps are not portable.. @emabolo
  • 9. @emabolo
  • 10. option 2 @emabolo
  • 11. @emabolo
  • 12. Why? @emabolo
  • 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. option 3 @emabolo
  • 15. Hybrid AppsGreat thing but… @emabolo
  • 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. 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. Building Web Apps @emabolo
  • 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. 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. 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. 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. 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. Device Orientation JS API Live demo here: http://bit.ly/orientationdemohttp://www.html5rocks.com/en/tutorials/device/orientation/ @emabolo
  • 25. GeolocationGeolocation is one of themost supported HTML5 APIon Mobile (Android 2+,iOS3+, WinPhone 7.5+,Blackberry OS 6.0+) @emabolo
  • 26. Going OfflineMobile users are notalways connectedAppcache and WebStorage can helpSupported by Android2.0+, iOS2.0+ @emabolo
  • 27. CanvasCanvas allows youto create graphicson the fly usingJavascript BrowserQuest by Mozilla http://browserquest.mozilla.org/ @emabolo
  • 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. CSS3IE 6 IE 8 IE 9 Firefox 5 Mobile Safari 4.3.3 Chrome 13 @emabolo
  • 30. Design and Animation with CSS3 Live demo here: http://bit.ly/css3bender By @oldknickers @emabolo
  • 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. 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. Distribution & Monetization @emabolo
  • 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. 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. 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. 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. Installation Flow•  Automatic “Add to Home Screen” balloon for iPhone users•  Android launcher and widget @emabolo
  • 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. Purchase ExperienceJavascriptConference Javascript Conference Javascript Conference @emabolo
  • 41. Conclusions @emabolo
  • 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. Goodbye!•  Contact me via email: emanuele@appsfuel.com or twitter: @emabolo•  Follow our blog: http://blog.appsfuel.com or twitter: @appsfuel @emabolo
  • 44. Thank You!Emanuele Bolognesi @emabolo @emabolo