smau milano 2012 arena social media emanuele-bolognesi
TRANSCRIPT
HTML5 & Mobile Il futuro è nelle Web Apps
SMAU Mob App Camp
Emanuele Bolognesi @emabolo
Milano, 19 Ottobre 2012
@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!
@emabolo
…and decided it’s time for you to make money with a mobile app..
Let’s say you woke up this morning…
@emabolo
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 curve
2. Native stores are over-saturated 3. There is a very high competition, very low
conversion rate, very low profit
@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!
@emabolo
And.. native apps are not portable..
@emabolo
@emabolo
option 2
@emabolo
@emabolo
Why?
@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…
@emabolo
option 3
@emabolo
Hybrid Apps
Great thing but…
@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
@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
@emabolo
Building Web Apps
@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
@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
@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
@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
@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
@emabolo
Device Orientation JS API
http://www.html5rocks.com/en/tutorials/device/orientation/
http://bit.ly/orientationdemo
Live demo here:
@emabolo
Geolocation
Geolocation is one of the most supported HTML5 API on Mobile (Android 2+, iOS3+, WinPhone 7.5+, Blackberry OS 6.0+)
@emabolo
Going Offline
Mobile users are not always connected Appcache and Web Storage can help Supported by Android 2.0+, iOS2.0+
@emabolo
Canvas
BrowserQuest by Mozilla http://browserquest.mozilla.org/
Canvas allows you to create graphics on the fly using Javascript
@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
@emabolo
CSS3
Mobile Safari 4.3.3
IE 9 IE 8 IE 6
Chrome 13 Firefox 5
@emabolo
Design and Animation with CSS3
http://bit.ly/css3bender Live demo here: By @oldknickers
@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
@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…
@emabolo
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 money with your web app?
@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
@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
@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
@emabolo
Installation Flow
• Automatic “Add to Home Screen” balloon for iPhone users • Android launcher and
widget
@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
@emabolo
Purchase Experience
Javascript Conference
Javascript Conference
Javascript Conference
@emabolo
Conclusions
@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!
@emabolo
Goodbye!
• Contact me via email: [email protected] or twitter: @emabolo
• Follow our blog: http://blog.appsfuel.com or twitter: @appsfuel
@emabolo
Thank You!
Emanuele Bolognesi @emabolo