smau milano 2012 arena social media emanuele-bolognesi
TRANSCRIPT
![Page 1: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/1.jpg)
HTML5 & Mobile Il futuro è nelle Web Apps
SMAU Mob App Camp
Emanuele Bolognesi @emabolo
Milano, 19 Ottobre 2012
![Page 2: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/2.jpg)
@emabolo
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
Hi, I’m Emanuele!
![Page 3: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/3.jpg)
@emabolo
…and decided it’s time for you to make money with a mobile app..
Let’s say you woke up this morning…
![Page 4: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/4.jpg)
@emabolo
option 1
![Page 5: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/5.jpg)
@emabolo
![Page 6: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/6.jpg)
@emabolo
It’s probably not a good idea.. Why?
1. If you are new to native development, there is a high learning curve
2. Native stores are over-saturated 3. There is a very high competition, very low
conversion rate, very low profit
![Page 7: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/7.jpg)
@emabolo http://app-promo.com/wake-up-call-infographic/
80% of iOS developers are NOT generating enough revenue to support a business, 59% of them are actually losing money!
![Page 8: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/8.jpg)
@emabolo
And.. native apps are not portable..
![Page 9: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/9.jpg)
@emabolo
![Page 10: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/10.jpg)
@emabolo
option 2
![Page 11: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/11.jpg)
@emabolo
![Page 12: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/12.jpg)
@emabolo
Why?
![Page 13: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/13.jpg)
@emabolo
• 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 2013
http://techcrunch.com/2011/12/07/forecast-1-billion-html5-phones-by-2013/
More reasons…
![Page 14: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/14.jpg)
@emabolo
option 3
![Page 15: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/15.jpg)
@emabolo
Hybrid Apps
Great thing but…
![Page 16: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/16.jpg)
@emabolo
• 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
![Page 17: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/17.jpg)
@emabolo
Native App Hybrid App Web App
Languages Obj-C, Java, C#, etc HTML, JS, CSS HTML, JS, CSS
Required Tools Xcode, Android SDK, Eclipse,
Visual Studio…
Phonegap + Native SDKs
Your favourite text editor
Distribution Native App Stores Native App Stores ?
Reviews/Approval Required Required Not required
Monetization Via Native App
Stores or ADV
Via Native App Stores or ADV
?
?
?
HTML5
![Page 18: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/18.jpg)
@emabolo
Building Web Apps
![Page 19: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/19.jpg)
@emabolo
HTML5 features on mobile • Basics – Viewport – Web app settings
• User Interface – Device and features
detection – Position: fixed – Mobile HTML5 forms
• User Interaction – Touch events
– Device orientation – Geolocation
• Offline and Storage – Going offline – Web storage
• Multimedia and Graphics – Audio/Video – Canvas – CSS3 Transitions and
transformations
![Page 20: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/20.jpg)
@emabolo
Mobile User Interface Meta Viewport, media queries, position:fixed, overflow-scrolling: touch, and more…
http://bit.ly/posfixed
Position:fixed demo Enter this URL on your
Mobile Phone Browser:
by @brad_frost
![Page 21: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/21.jpg)
@emabolo
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
![Page 22: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/22.jpg)
@emabolo
Supporting touch in Javascript
http://padilicious.com/code/touchevents/index.html
http://bit.ly/demoswipe Live demo here:
Listen to the touchstart, touchmove and touchend events to support touch
Enter this URL on your mobile phone browser
![Page 23: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/23.jpg)
@emabolo
Device Orientation • The deviceorientation
event informs you about how the device is oriented in space
• The devicemotion event also returns acceleration
• Supported by iOS 4.2+, Android 3.0+
X
Z
Y
alpha
beta
gamma
![Page 24: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/24.jpg)
@emabolo
Device Orientation JS API
http://www.html5rocks.com/en/tutorials/device/orientation/
http://bit.ly/orientationdemo
Live demo here:
![Page 25: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/25.jpg)
@emabolo
Geolocation
Geolocation is one of the most supported HTML5 API on Mobile (Android 2+, iOS3+, WinPhone 7.5+, Blackberry OS 6.0+)
![Page 26: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/26.jpg)
@emabolo
Going Offline
Mobile users are not always connected Appcache and Web Storage can help Supported by Android 2.0+, iOS2.0+
![Page 27: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/27.jpg)
@emabolo
Canvas
BrowserQuest by Mozilla http://browserquest.mozilla.org/
Canvas allows you to create graphics on the fly using Javascript
![Page 28: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/28.jpg)
@emabolo
Canvas Mobile Games
• On Android the only usable browser is Chrome
• Pure web apps perform better than web apps compiled with PhoneGap
https://github.com/cykod/AlienInvasion
http://bit.ly/html5-invasion Live demo here: by @cykod
![Page 29: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/29.jpg)
@emabolo
CSS3
Mobile Safari 4.3.3
IE 9 IE 8 IE 6
Chrome 13 Firefox 5
![Page 30: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/30.jpg)
@emabolo
Design and Animation with CSS3
http://bit.ly/css3bender Live demo here: By @oldknickers
![Page 31: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/31.jpg)
@emabolo
What’s next?
http://www.w3.org/standards/techs/js#w3c_all
• Media Capture API • Battery Status API • Vibration API • Contacts API • Web Intents • WebSocket API • Indexed Database API • Web Audio API • And more
TO YOUR NEAREST JAVASCRIPT CODE
![Page 32: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/32.jpg)
@emabolo
Native App Hybrid App Web App
Languages Obj-C, Java, C#, etc HTML, JS, CSS HTML, JS, CSS
Required Tools Xcode, Android SDK, Eclipse,
Visual Studio…
Phonegap + Native SDKs
Your favourite text editor
Distribution Native App Stores Native App Stores ?
Reviews/Approval Required Required Not required
Monetization Via Native App
Stores or ADV
Via Native App Stores or ADV
?
?
?
HTML5 HTML5
Going back to the table…
![Page 33: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/33.jpg)
@emabolo
Distribution & Monetization
![Page 34: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/34.jpg)
@emabolo
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?
![Page 35: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/35.jpg)
@emabolo
Opportunities for web apps are rising This year HTML5 mobile developers will finally be able to distribute their apps
The good news is you don’t have to choose. Just create your app and submit it to all the existing app stores!
• And more – Facebook app center?
• AppsFuel – beta version is live !
• Mozilla Apps Marketplace – is not yet live, but apps submission is open
![Page 36: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/36.jpg)
@emabolo
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
https://developer.appsfuel.com Join and submit your app here:
http://appsfuel.com
![Page 37: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/37.jpg)
@emabolo
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
![Page 38: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/38.jpg)
@emabolo
Installation Flow
• Automatic “Add to Home Screen” balloon for iPhone users • Android launcher and
widget
![Page 39: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/39.jpg)
@emabolo
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
![Page 40: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/40.jpg)
@emabolo
Purchase Experience
Javascript Conference
Javascript Conference
Javascript Conference
![Page 41: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/41.jpg)
@emabolo
Conclusions
![Page 42: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/42.jpg)
@emabolo
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!
![Page 43: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/43.jpg)
@emabolo
Goodbye!
• Contact me via email: [email protected] or twitter: @emabolo
• Follow our blog: http://blog.appsfuel.com or twitter: @appsfuel
![Page 44: Smau milano 2012 arena social media emanuele-bolognesi](https://reader034.vdocuments.site/reader034/viewer/2022042700/5551934fb4c905013a8b4622/html5/thumbnails/44.jpg)
@emabolo
Thank You!
Emanuele Bolognesi @emabolo