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: emanuele@appsfuel.com or twitter: @emabolo

•  Follow our blog: http://blog.appsfuel.com or twitter: @appsfuel

@emabolo

Thank You!

Emanuele Bolognesi @emabolo