firefox os talk - web applications and firefoxos marketplace

Web Applications and FirefoxOS Marketplace

Jorge Ferreiro - 28/11/2014

What is a WebApp?

Optimised version for mobile devices of a web page

What is a WebApp? @jgferreiro

• No updates: the user always accessthe latest production versionavailable on your server.

• Multiplatform: one design, multipledevices.

• Iterate fast: test your new featuresdirectly with the customer the sameday you released them.

Why webapps? @jgferreiro

• Performance: native applicationshave better performance (normallythey are compiled).

• Could exists some API’s limitations(depends on the platform).

• You may need to use frameworks(eg, phonegap, ionic) to publish yourApps on Android, IOs…

Drawbacks @jgferreiro

Some cool Webapps out there!

Candy rain 2 CameranOpenwapp

Examples @jgferreiro

How to develop a Webapp?

+ +HTML5 JS CSS3

Technology Mix!

How to develop? @jgferreiro

Useful Tool: Firefox OS Simulator

Tools kit @jgferreiro

Web webapp

So the idea is turning a website into a webapp... But, how can we do that?

App manifest

Required fields

JSON configuration file of your project.

App manifest: options @jgferreiro

App manifest: options @jgferreiro

Locales: Which languages you support?

App manifest: options @jgferreiro

Permissions: Indicates the API’s your Application is using

My webapp:

Music4deejays

A few months ago I had an idea...

Passion for electronic music

Nowadays is very difficult for artists and producers to be discovered.I like to solve problems creating online services / products

What motivates me?

What is Music4deejays?

ListenShare

Download

The best electronic music from emerging artists

Home page

Music4deejays screenshots @jgferreiro

Responsive Designto any Device

Music4deejays screenshots @jgferreiro

How to publish on

FirefoxOS Marketplace?

https://marketplace.firefox.com/developers/submit/

Firefox Marketplace

Publishing @jgferreiro

Type + Manifest Route

Publishing @jgferreiro

Error ☹ Configure .htacces file

AddType application/x-web-app-manifest+json .webapp

Add to .htaccess:

Publishing @jgferreiro

App Requirements

AddType application/x-web-app-manifest+json .webapp

Añadir al .htaccess:

Publishing @jgferreiro

Basic Information

AddType application/x-web-app-manifest+json .webapp

Añadir al .htaccess:

Publishing @jgferreiro

Just a few more steps and…

Ready! You only need Firefox approves the application

Publishing @jgferreiro

More information:

@Music4deejays

music4deejays.com

• https://marketplace.firefox.com/developers

/docs/deploy

• Curso HTML5 para Firefox OS.

• Pautas para el desarrollo de aplicaciones

• Distribuir tu aplicación

@jgferreiroInteresting links

Questions?

Thank youKeep in touch!

Mail: me@jgferreiro.comWebsite: www.jgferreiro.com