HTML5 NextPotential and opportunities in HTML5

development for mobile

HTML5 Market Potential

• Compatibility with Android, +1billion users across all the devices*

• Natively cross-device (web, smartphone, tablet)

• Low-cost and fast Firefox OS mobile phones, suitable for all the emerging markets (by 2017 +75% Android traffic will come from emerging markets*)

• A community of +3400 developers and +31 languages** in love with open source, developing new apps and optimizing the existing ones

*Source: Gartner Inc., January 2014**Source: Mozilla website, January 2014

HTML5 Apps – Benefits

• Running on any computer and mobile without installing plug-ins or adapting the code

• Running online and offline

• Delivering multimedia contents easily with no limitations

• Easy, immediate, open source, everywhere

Urlist S.r.l • 2014, Mobile World Congress

Urlist for FxOs Manana

Firefox OS is the Operative System based on HTML5 for mobile by Mozilla.

Manana is one of the most appreciated indie app in the Firefox OS marketplace, with 1200 downloads and average 4 stars reviews in 3 languages (ENG, ES, PT) in the first 2 months (December 2013 - January 2014)

Urlist S.r.l • 2014, Mobile World Congress

5 steps to build an HTML5 app

Urlist S.r.l • 2014, Mobile World Congress

#01 Fire up your editor!If you are a web developer, you know the 90% you need to write an HTML5 app, in fact the three main components of an HTML5 app are:

HTML CSS JS

5 steps to build an HTML5 app

*more here https://wiki.mozilla.org/WebAPI

#02 Learn the HTML5 Web APIHTML5 is not only new tags, like <article> or <section>. HTML5 is a rich collection of APIs you can use to access low level features of the phone, such as:

geolocation/accelerometers/compass

battery level/ambient light sensor

push notifications

5 steps to build an HTML5 app

#03 Store your data in the deviceNearly all applications need to store some data in the user’s device. HTML5 provides two main facilities to do so:

localStorage easy to use

IndexedDB slightly more difficult to set-up, but better performance

Urlist S.r.l • 2014, Mobile World Congress

5 steps to build an HTML5 app

* GPU = Graphics processing unit

#04 Debug and optimizeNo need to learn new tools you can use both Firefox and Chrome developer tools to inspect your javascript code and html layout.

Pro tip: remember to use CSS3 Transitions to exploit the GPU* in the device and have smooth animation.

5 steps to build an HTML5 app

#05 Distribute your appUsually, packing your app is as easy as creating a “zip” archive with all your files. Remember to create a text file which contains information a Web browser needs to interact with your app (this file is called “manifest”).

Depending on the Marketplace, your app may be required to be assessed through a review process.

Urlist S.r.l • 2014, Mobile World Congress

Save it for tomorrow

• FxOS Javascript app• Target: emerging markets• Great feedback from the community• Optimized for offline reading• Featured by Mozilla & Mozilla Hacks• Developed in 10 languages

Manana App What it is

Manana App How does it look like?

home screen sidebar article

Manana App 10 languages!

¡Guárdalo para mañana, usa Manana!

Zachowaj to na jutro - pobierz Manana.

Прочитайте это завтра, отметьте ссылку в Manana.

Αποθήκευσέ το για αύριο, κατέβασε το Manana.

Speichern das für Morgen, get Manana.

Deixe para amanhã, use Manana.Salvalo per domani, installa Manana.

Get Manana! getmanana.tumblr.comhttps://marketplace.firefox.com/app/manana

Thanks!

chiara@urli.st 0049(0)178-1729499