Presentación creada en exclusiva para Firefox OS España, en el evento organizado el pasado 28 de Noviembre en Medialab prado. > Webapps: ¿Qué son? Ventajas e inconvenientes. > Caso a estudio. > Cómo publicar una app en el Market place de Firefox OS.

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

2. ¿Qué es una webapp?

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

4. • Flexibilidad: Cualquier página web que tenga un
diseño responsive 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.
¿Por qué una webapp?
@jgferreiro¿Qué es una webapp?

5. •Una aplicación nativa suele tener un mejor
rendimiento en el tiempo de ejecución.
• Limitaciones a la hora de utilizar algunas APIS.
• Es necesario utilizar frameworks como phonegap,
para publicar aplicaciones en Google play o Apple
store
Contras de una webapp
@jgferreiro¿Qué es una webapp?

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

7. ¿Cómo se desarrolla una webapp?

8. + +
HTML5 JS CSS3
@jgferreiroTecnologías
Combinando HTML5 + CSS3 + JAVASCRIPT

9. @jgferreiroKit de herramientas
Herramienta util: Firefox OS simulator

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

11. App manifest

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

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

14.  Permisos: indica qué APIs está utilizando la :
contactos, alarmas, notificaciones,
geolocalización ...
App manifest @jgferreiro
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.  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.
¿Y que me llevó a hacerla?

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. Diseño adaptable
a cualquier dispositivo
Music4deejays.com @jgferreiro

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

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

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

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

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

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

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

28. @jgferreiroPublicación
Unos pasos más y…
Listo! Ya solo faltan que 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. • https://marketplace.firefox.com/developers/d
ocs/deploy
• Curso HTML5 para Firefox OS.
• Pautas para el desarrollo de aplicaciones
• Distribuir tu aplicación
@jgferreiroEnlaces de interés

31. ¿Alguna pregunta?

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