A quick overview about the potential of HTML5 development for mobile and the app we, as Urlist S.R.L, have developed for Firefox OS. Get it at getmanana.tumblr.com
2. HTML5 Market Potential
• ompatibility with Android, +1billion users across all the devices*
C
• Natively cross-device (web, smartphone, tablet)
• ow-cost and fast Firefox OS mobile phones, suitable for all the
L
emerging markets (by 2017 +75% Android traffic will come from
emerging markets*)
• community of +3400 developers and +31 languages** in love with
A
open source, developing new apps and optimizing the existing ones
*Source: Gartner Inc., January 2014
**Source: Mozilla website, January 2014
3. HTML5 Apps – Benefits
• unning on any computer and mobile without installing plug-ins
R
or adapting the code
• Running online and offline
• Delivering multimedia contents easily with no limitations
• asy, immediate, open source, everywhere
E
Urlist S.r.l • 2014, Mobile World Congress
4. 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. 5 steps to build an HTML5 app
#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
Urlist S.r.l • 2014, Mobile World Congress
CSS
JS
6. 5 steps to build an HTML5 app
#02 Learn the HTML5 Web API
HTML5 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
*more here https://wiki.mozilla.org/WebAPI
7. 5 steps to build an HTML5 app
#03 Store your data in the device
Nearly 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
8. 5 steps to build an HTML5 app
#04 Debug and optimize
No 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.
* GPU = Graphics processing unit
9. 5 steps to build an HTML5 app
#05 Distribute your app
Usually, 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
11. Manana App What it is
• FxOS Javascript app
• Target: emerging markets
• Great feedback from the community
• Optimized for offline reading
• Featured by Mozilla Mozilla Hacks
• Developed in 10 languages
12. Manana App How does it look like?
home screen
sidebar
article
13. Manana App 10 languages!
Zachowaj to na jutro - pobierz Manana.
¡Guárdalo para mañana, usa Manana!
Αποθήκευσέ το για αύριο, κατέβασε το Manana.
Прочитайте это завтра, отметьте ссылку в Manana.
Speichern das für Morgen, get Manana.
Deixe para amanhã, use Manana.
Salvalo per domani, installa Manana.