1. HTML5 & Mobile
Il 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 money
with 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 curve
2. Native stores are over-saturated
3. 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 2013
http://techcrunch.com/2011/12/07/forecast-1-billion-html5-phones-by-2013/
@emabolo

14. option 3
@emabolo

15. Hybrid Apps
Great 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 text
Required 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 Interface
Meta 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 Javascript
Listen to the touchstart, touchmove and touchend
events to support touch
Live demo here:
http://bit.ly/demoswipe
Enter this URL on your mobile phone browser
http://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/orientationdemo
http://www.html5rocks.com/en/tutorials/device/orientation/
@emabolo

25. Geolocation
Geolocation is one of the
most supported HTML5 API
on Mobile (Android 2+,
iOS3+, WinPhone 7.5+,
Blackberry OS 6.0+)
@emabolo

26. Going Offline
Mobile users are not
always connected
Appcache and Web
Storage can help
Supported by Android
2.0+, iOS2.0+
@emabolo

27. Canvas
Canvas allows you
to create graphics
on the fly using
Javascript
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-invasion
https://github.com/cykod/AlienInvasion
by @cykod
@emabolo

29. CSS3
IE 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 more
http://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 text
Required 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 Experience
Javascript
Conference 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