webapps, caso de estudio y publicación de aplicaciones en firefox os
TRANSCRIPT
![Page 1: Webapps, caso de estudio y publicación de aplicaciones en Firefox OS](https://reader036.vdocumento.com/reader036/viewer/2022062900/58ea49151a28abc4698b5933/html5/thumbnails/1.jpg)
Webaspp, caso de estudio & publicación
en FirefoxOSJorge Ferreiro - 28/11/2014
![Page 2: Webapps, caso de estudio y publicación de aplicaciones en Firefox OS](https://reader036.vdocumento.com/reader036/viewer/2022062900/58ea49151a28abc4698b5933/html5/thumbnails/2.jpg)
¿Qué es una webapp?
![Page 3: Webapps, caso de estudio y publicación de aplicaciones en Firefox OS](https://reader036.vdocumento.com/reader036/viewer/2022062900/58ea49151a28abc4698b5933/html5/thumbnails/3.jpg)
Versión optimizada de una página web para dispositivos móviles
¿Qué es una webapp? @jgferreiro
![Page 4: Webapps, caso de estudio y publicación de aplicaciones en Firefox OS](https://reader036.vdocumento.com/reader036/viewer/2022062900/58ea49151a28abc4698b5933/html5/thumbnails/4.jpg)
• 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.
Ventajas de una webapp @jgferreiro
![Page 5: Webapps, caso de estudio y publicación de aplicaciones en Firefox OS](https://reader036.vdocumento.com/reader036/viewer/2022062900/58ea49151a28abc4698b5933/html5/thumbnails/5.jpg)
• 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
![Page 6: Webapps, caso de estudio y publicación de aplicaciones en Firefox OS](https://reader036.vdocumento.com/reader036/viewer/2022062900/58ea49151a28abc4698b5933/html5/thumbnails/6.jpg)
Ejemplos de webapps
Candy rain 2 CameranOpenwapp
Ejemplos de webapps @jgferreiro
![Page 7: Webapps, caso de estudio y publicación de aplicaciones en Firefox OS](https://reader036.vdocumento.com/reader036/viewer/2022062900/58ea49151a28abc4698b5933/html5/thumbnails/7.jpg)
¿Cómo crear una webapp?
![Page 8: Webapps, caso de estudio y publicación de aplicaciones en Firefox OS](https://reader036.vdocumento.com/reader036/viewer/2022062900/58ea49151a28abc4698b5933/html5/thumbnails/8.jpg)
+ +HTML5 JS CSS3
Combinando
¡Mix de tecnologías! @jgferreiro
![Page 9: Webapps, caso de estudio y publicación de aplicaciones en Firefox OS](https://reader036.vdocumento.com/reader036/viewer/2022062900/58ea49151a28abc4698b5933/html5/thumbnails/9.jpg)
Herramienta útil: Firefox OS simulator
Nuestro kit de herramientas @jgferreiro
![Page 10: Webapps, caso de estudio y publicación de aplicaciones en Firefox OS](https://reader036.vdocumento.com/reader036/viewer/2022062900/58ea49151a28abc4698b5933/html5/thumbnails/10.jpg)
Web webapp?
Si la idea es convertir una web en una webapp… ¿Cómo lo hacemos?
![Page 11: Webapps, caso de estudio y publicación de aplicaciones en Firefox OS](https://reader036.vdocumento.com/reader036/viewer/2022062900/58ea49151a28abc4698b5933/html5/thumbnails/11.jpg)
App manifest
![Page 12: Webapps, caso de estudio y publicación de aplicaciones en Firefox OS](https://reader036.vdocumento.com/reader036/viewer/2022062900/58ea49151a28abc4698b5933/html5/thumbnails/12.jpg)
Obligatorio!
Archivo JSON que se configuramos según las necesidades de la aplicación.
App manifest: options @jgferreiro
![Page 13: Webapps, caso de estudio y publicación de aplicaciones en Firefox OS](https://reader036.vdocumento.com/reader036/viewer/2022062900/58ea49151a28abc4698b5933/html5/thumbnails/13.jpg)
Locales: Seleccionamos los idiomas de nuestra aplicación.
App manifest: options @jgferreiro
![Page 14: Webapps, caso de estudio y publicación de aplicaciones en Firefox OS](https://reader036.vdocumento.com/reader036/viewer/2022062900/58ea49151a28abc4698b5933/html5/thumbnails/14.jpg)
Permisos: Indicamos las APIs que usamos: contactos, alarma, notificaciones, geolocalización...
Más información sobre el App manifest:https://developer.mozilla.org/es/Apps/Build/Manifest#permisos
App manifest: options @jgferreiro
![Page 15: Webapps, caso de estudio y publicación de aplicaciones en Firefox OS](https://reader036.vdocumento.com/reader036/viewer/2022062900/58ea49151a28abc4698b5933/html5/thumbnails/15.jpg)
Mi webapp:Music4deejays
![Page 16: Webapps, caso de estudio y publicación de aplicaciones en Firefox OS](https://reader036.vdocumento.com/reader036/viewer/2022062900/58ea49151a28abc4698b5933/html5/thumbnails/16.jpg)
Hace unos meses tuve una idea...
![Page 17: Webapps, caso de estudio y publicación de aplicaciones en Firefox OS](https://reader036.vdocumento.com/reader036/viewer/2022062900/58ea49151a28abc4698b5933/html5/thumbnails/17.jpg)
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?
![Page 18: Webapps, caso de estudio y publicación de aplicaciones en Firefox OS](https://reader036.vdocumento.com/reader036/viewer/2022062900/58ea49151a28abc4698b5933/html5/thumbnails/18.jpg)
¿Qué es Music4deejays.com?Plataforma para:
EscucharCompartirDescargar
La mejor Música electrónica de artistas emergentes
![Page 19: Webapps, caso de estudio y publicación de aplicaciones en Firefox OS](https://reader036.vdocumento.com/reader036/viewer/2022062900/58ea49151a28abc4698b5933/html5/thumbnails/19.jpg)
Home page
Music4deejays screenshots @jgferreiro
![Page 20: Webapps, caso de estudio y publicación de aplicaciones en Firefox OS](https://reader036.vdocumento.com/reader036/viewer/2022062900/58ea49151a28abc4698b5933/html5/thumbnails/20.jpg)
Diseño adaptablea cualquier dispositivo
Music4deejays screenshots @jgferreiro
![Page 21: Webapps, caso de estudio y publicación de aplicaciones en Firefox OS](https://reader036.vdocumento.com/reader036/viewer/2022062900/58ea49151a28abc4698b5933/html5/thumbnails/21.jpg)
¿Cómo publicar en FirefoxOS Marketplace?
![Page 22: Webapps, caso de estudio y publicación de aplicaciones en Firefox OS](https://reader036.vdocumento.com/reader036/viewer/2022062900/58ea49151a28abc4698b5933/html5/thumbnails/22.jpg)
https://marketplace.firefox.com/developers/submit/
Firefox Marketplace
Publicación @jgferreiro
![Page 23: Webapps, caso de estudio y publicación de aplicaciones en Firefox OS](https://reader036.vdocumento.com/reader036/viewer/2022062900/58ea49151a28abc4698b5933/html5/thumbnails/23.jpg)
Tipo de app + ruta del manifest
Publicación @jgferreiro
![Page 24: Webapps, caso de estudio y publicación de aplicaciones en Firefox OS](https://reader036.vdocumento.com/reader036/viewer/2022062900/58ea49151a28abc4698b5933/html5/thumbnails/24.jpg)
Error ☹ Hay que configurar el .htacces
AddType application/x-web-app-manifest+json .webapp
Añadir al .htaccess:
Publicación @jgferreiro
![Page 25: Webapps, caso de estudio y publicación de aplicaciones en Firefox OS](https://reader036.vdocumento.com/reader036/viewer/2022062900/58ea49151a28abc4698b5933/html5/thumbnails/25.jpg)
Requisitos de la app
AddType application/x-web-app-manifest+json .webapp
Añadir al .htaccess:
Publicación @jgferreiro
![Page 26: Webapps, caso de estudio y publicación de aplicaciones en Firefox OS](https://reader036.vdocumento.com/reader036/viewer/2022062900/58ea49151a28abc4698b5933/html5/thumbnails/26.jpg)
Información
AddType application/x-web-app-manifest+json .webapp
Añadir al .htaccess:
Publicación @jgferreiro
![Page 27: Webapps, caso de estudio y publicación de aplicaciones en Firefox OS](https://reader036.vdocumento.com/reader036/viewer/2022062900/58ea49151a28abc4698b5933/html5/thumbnails/27.jpg)
Unos pasos más y…
Listo! Ya solo faltan que aprueben nuestra app (de 2 a 5 días)
Publicación @jgferreiro
![Page 28: Webapps, caso de estudio y publicación de aplicaciones en Firefox OS](https://reader036.vdocumento.com/reader036/viewer/2022062900/58ea49151a28abc4698b5933/html5/thumbnails/28.jpg)
More information:@Music4deejays
music4deejays.com
![Page 29: Webapps, caso de estudio y publicación de aplicaciones en Firefox OS](https://reader036.vdocumento.com/reader036/viewer/2022062900/58ea49151a28abc4698b5933/html5/thumbnails/29.jpg)
• https://marketplace.firefox.com/developers/docs/deploy
• Curso HTML5 para Firefox OS.• Pautas para el desarrollo de aplicaciones• Distribuir tu aplicación
@jgferreiroEnlaces de Interés
![Page 30: Webapps, caso de estudio y publicación de aplicaciones en Firefox OS](https://reader036.vdocumento.com/reader036/viewer/2022062900/58ea49151a28abc4698b5933/html5/thumbnails/30.jpg)
¿Alguna pregunta?