This presentation has been created especially for the event of Firefox OS Madrid from November 28, 2014. In this talk I try the following: > Webapps: What are they? Advantages and disadvantages. > Case Study: Music4deejays.com > How to publish an app in the Market place of Firefox OS. I hope you find it utilidad'. For anything you have my contact details in the presentation. A greeting. Jorge Ferreiro.

1. Webapps, case study and
Publishing applications on Firefox OS
@jgferreiro
jgferreiro.me@gmail.com

2. What is a webapp?

3. What is a webapp? @jgferreiro
A webapp is:
an optimised version for mobile devices
of a web page

4. What is a webapp? @jgferreiro
Why to make webapps?
• Flexibility: Any page can "become" a webapp.
• Multiplatform: one design, multiple devices.
• No updates: Since is a webpage users always access
the latest version.
• The only requirement is that the web should be
responsive (having a design that suits according to
the resolution of the device)

5. What is a webapp? @jgferreiro
Cons of a webapp
• Although the performance of web apps is good and
getting better and better, native applications are
usually superior.
• There may be some limitation in using some apis
depending on the platform that we are developing.
• You will need to use a framework (eg, phonegap)
to publish your app in some stores of applications
(Android / Ios)

6. What is a webapp?
Examples of webapps
@jgferreiro
Candy rain 2 Openwapp Cameran

7. How to develop a webapp?

8. Technologies @jgferreiro
Combining HTML5 + CSS3 + JAVASCRIPT
+ +
HTML5 JS CSS3

9. Tools kit @jgferreiro
Useful Tool: Firefox OS simulator

10. If the idea is to turn a website into a
webapp... How do we do that?
Web webapp

11. App manifest

12. App manifest
 JSON file to be configured according to the
needs of your application
Required!
@jgferreiro

13. App manifest
@jgferreiro
Other interesting properties.
 Locales: Allows you to set various languages
for the same application.

14. App manifest @jgferreiro
 Permissions: indicates which APIs your
application is using: contacts, alarms,
notifications, geolocation ...
More info about how to configure your manifest:
https://developer.mozilla.org/es/Apps/Build/Manifest#permisos

15. My webapp:
Music4deejays

16. A few months ago I had an idea...

17. And what motivates me to do it?
 Passion for electronic music
 Today it is very difficult for artists and
producers to be known.
 I love launching projects that solve real
problems.

18. What is music4deejays.com?
Plaftform for:
Listen
Share
Download
The best Electronic Music
from Emerging artists

19. Music4deejays.com
Página principal music4deejays.
@jgferreiro

20. Music4deejays.com @jgferreiro
Adaptive design
to any device
Responsive Design!

21. How do I published my app in Firefox marketplace?

22. Publishing
@jgferreiro
jgferreiro.com/music4deejays-web
jgferreiro.com/music4deejays.webapp

23. Publishing
Firefox Marketplace
@jgferreiro
https://marketplace.firefox.com/developers/submit/

24. Publishing
App type + manifest route
@jgferreiro

25. Publishing
@jgferreiro
Error .htaccess must be configured for
apache servers
Add to .htaccess:
AddType application/x-web-app-manifest+json
.webapp

26. Publishing
App requirements
Añadir al .htaccess:
AddType application/x-web-app-manifest+
json .webapp
@jgferreiro

27. Publishing
Information
Añadir al .htaccess:
AddType application/x-web-app-manifest+
json .webapp
@jgferreiro

28. Publishing @jgferreiro
Few more steps and…
Ready! Now we only need to wait until the
app is approved (2 to 5 days normally)
https://marketplace.firefox.com/app/music4deejays/

29. More information:
Info@music4deejays.com
www.music4deejays.com

30. Interesting links @jgferreiro
• https://marketplace.firefox.com/developers/d
ocs/deploy
• Curso HTML5 para Firefox OS.
• Pautas para el desarrollo de aplicaciones
• Distribuir tu aplicación

31. Questions?

32. Thank you
Keep in touch!
@jgferreiro
jgferreiro.me@gmail.com