Esta presentación ha sido creada expresamente para el evento de Firefox OS Madrid del 28 de Noviembre de 2014. En esta charla trato los siguientes temas: > Webapps: ¿Qué son? Ventajas e inconvenientes. > Caso a estudio. > Cómo publicar una app en el Market place de Firefox OS. Espero que os sea de utilidad´. Para cualquier cosa teneis mis datos de contacto en la presentación. Un saludo. Jorge Ferreiro.

1. Webaspp, caso de estudio y
publicación en FirefoxOS
@jgferreiro
me@jgferreiro.com

2. ¿Qué es una webapp?

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

4. • Sin Actualizaciones: el usuario siempre
accederá a la última versión disponible.
• Multiplataforma: un diseño, múltiples
dispositivos del mercado.
• Flexibilidad: Cualquier sitio web con
diseño responsive puede ser una
webapp.
¿Por qué una webapp?
@jgferreiro¿Qué es una webapp?

5. • Rendimiento: las aplicaciones nativas
suelen tener una mejor performance.
• Limitaciones en algunas Apis.
• Es necesario utilizar frameworks, como
phonegap, para publicar aplicaciones
web en Google Play o en la App 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

9. @jgferreiroKit de herramientas
Herramienta útil: 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 configuramos según
las necesidades de la aplicación.
@jgferreiro

13. App manifest @jgferreiro
 Locales: Seleccionamos los idiomas de
nuestra aplicación.

14.  Permisos: Indicamos las APIs que usamos:
contactos, alarma, 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 emergentes darse a conocer.
 Me encanta lanzar proyectos que
solucionen problemas reales.
¿Y qué 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
Home page
@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