CNIC Information System with Pakdata Cf In Pakistan
Â
Smau milano 2012 arena social media emanuele-bolognesi
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
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
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
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
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
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
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
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
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