Este documento explica qué es una webapp y cómo desarrollar y publicar una en Firefox OS. Una webapp es una página web optimizada para dispositivos móviles que ofrece flexibilidad, es multiplataforma y no requiere actualizaciones. El autor creó una webapp llamada Music4deejays para compartir música electrónica emergente usando HTML5, CSS3 y JavaScript. Publicó su webapp en el Firefox Marketplace agregando un archivo de manifiesto y configurando el servidor para admitirlo.

1. Webapps, caso de estudio y
publicación de aplicaciones en Firefox OS
@jgferreiro
jgferreiro.me@gmail.com

2. ¿Qué es una webapp?

3. ¿Qué es una webapp? @jgferreiro
Una webapp es:
Una versión de la página web optimizada para
dispositivos móviles.

4. ¿Qué es una webapp? @jgferreiro
¿Por qué una webapp?
• Flexibilidad: Cualquier página puede “convertirse”
en una webapp.
• Multiplataforma: un diseño, múltiples dispositivos
• No requiere actualización: Ya que al ser una página
web, el usuario siempre accederá a la última versión.
•El único requisito es que la web debe ser responsive
(tener un diseño que se adapte según la resolución
del dispositivo)

5. ¿Qué es una webapp? @jgferreiro
Contras de una webapp
• Aunque el rendimiento de las web apps es bueno y
se mejora cada vez más, una aplicación nativa suele
ir mejor.
• Puede haber alguna limitación de acceso a las apis
según para qué plataforma desarrollemos.
• Se necesita utilizar un framework (ej, phonegap)
para poder publicar tu app en algunas tiendas de
aplicaciones (Android/Ios)

6. ¿Qué es una webapp? @jgferreiro
Ejemplos de webapps
Candy rain 2 Openwapp Cameran

7. ¿Cómo se desarrolla una webapp?

8. Tecnologías @jgferreiro
Combinando HTML5 + CSS3 + JAVASCRIPT
+ +
HTML5 JS CSS3

9. Kit de herramientas @jgferreiro
Herramienta util: Firefox OS simulator

10. Si la idea es convertir una web en una
webapp… ¿Cómo lo hacemos?
Web webapp

11. App manifest

12. App manifest
 Archivo JSON que se debe configurar según
las necesidades de tu aplicación.
Obligatorio!
@jgferreiro

13. App manifest
 Locales: Te permite configurar distintos
idiomas para una misma aplicación.
@jgferreiro
Otras propiedades interesantes

14. App manifest @jgferreiro
 Permisos: indica qué APIs está utilizando la :
contactos, alarmas, notificaciones,
geolocalización ...
Más información sobre el App manifest:
https://developer.mozilla.org/es/Apps/Build/Manifest#permisos

15. Mi webapp:
Music4deejays

16. Hace unos meses tuve una idea..

17. ¿Y que me llevó a hacerla?
 Pasión por la música electrónica
 Hoy en día es muy complicado para artistas
y productores darse a conocer.
 Me encanta lanzar proyectos que
solucionen problemas reales.

18. ¿Qué es Music4deejays.com?
Plataforma para:
Escuchar
Compartir
Descargar
La mejor Música electrónica
De artistas emergentes

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

20. Music4deejays.com @jgferreiro
Diseño adaptable
a cualquier dispositivo
Responsive Design!

21. ¿Cómo publiqué mi app en Firefox marketplace?

22. Publicación
@jgferreiro
jgferreiro.com/music4deejays-web
jgferreiro.com/music4deejays.webapp

23. Publicación @jgferreiro
Firefox Marketplace
https://marketplace.firefox.com/developers/submit/

24. Publicación
Tipo de app + ruta del manifest
@jgferreiro

25. Publicación
@jgferreiro
Error  Hay que configurar el .htacces
Añadir al .htaccess:
AddType application/x-web-app-manifest+json
.webapp

26. Publicación
Requisitos de la app
Añadir al .htaccess:
AddType application/x-web-app-manifest+
json .webapp
@jgferreiro

27. Publicación
Información
Añadir al .htaccess:
AddType application/x-web-app-manifest+
json .webapp
@jgferreiro

28. Publicación @jgferreiro
Unos pasos más y…
Listo! Ya solo faltan que nos aprueben
nuestra app (de 2 a 5 días)
https://marketplace.firefox.com/app/music4deejays/

29. Más información:
@music4deejays
www.music4deejays.com

30. Enlaces de interés @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. ¿Alguna pregunta?

32. Gracias
Keep in touch!
@jgferreiro
jgferreiro.me@gmail.com