The document discusses web applications (webapps), highlighting their benefits such as flexibility, multi-platform compatibility, and automatic updates, while also mentioning some limitations compared to native applications. It outlines the development process including necessary technologies like HTML5, CSS3, and JavaScript, and details the configuration of the app manifest necessary for publishing on platforms like Firefox Marketplace. Additionally, it introduces 'music4deejays.com', a project aimed at supporting emerging electronic music artists.

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