La siguiente lista contiene una referencia a nivel de código que puedes necesitar desarrollando apps para Firefox OS. Para más guías , herramientas, vídeos e información sobre el ecosistema de aplicaciones Firefox OS visita el Firefox Marketplace Developer Hub. Para búsquedas rápidas de Web APIs y métodos, puedes utilizar dochub.io, un sitio que usa la API de MDN's.
Fundamentos de una aplicación Firefox OS
Una aplicación Firefox OS es simplemente una Open Web App.
- Manifiesto de la aplicación
- El manifiesto que describe tu app. Esta guía explica cómo funciona el manifiesto y cómo crear uno.
- Apps JavaScript API
- La interfaz usada para instalar aplicaciones y gestionarlas.
- Permitir a tu aplicación funcionar offline
- Estarategias y tecnologías que puedes usar para asegurarte que tu aplicación funciona cuando no hay conexión disponible.
- Tipos de Aplicaciones
- Este artículo explica los tipos de aplicaciones: alojadas, privilegiadas y certificadas. Necesitarás que tu app sea privilegiada o certificada cuando teng que acceder a APIs específicas del sistema. Las aplicaciones privilegiadas y certificadas sólo pueden ser aplicaciones empaquetadas.
- Permisos de las Aplicaciones
- El acceso a las APIs del dispositivo puede ayudarte a crear aplicaciones más útiles. Aquí encontrarás qué está disponible y cómo acceder a ellas.
Diseño y estructura
- Diseño adaptativo («responsivo»)
- Tu aplicación debe ser capaz de ajustarse a diferentes tamaños de pantalla y ser independiente del dispositivo utilizado. Este guía te ayudará lograrlo.
- Media queries
- Una de las tecnologías más importantes a la hora de crear una aplicación responsiva son los media queries. Éstos permitirán a tu app ajustarse a diferentes tamaños de pantalla, resolución, orientación del dispositivo y otras variables, usando reglas CSS o JavaScript. También puedes ver Usando media queries y MediaQueryList.
- Flexible boxes
- Las cajas flexibles CSS te permitirán configurar automáticamente la interfaz para que ajuste su posición y tamaño basándose en el tamaño y la orientación de la pantalla.
Dibujo y animaciones
- Transformaciones CSS
- Las transformaciones CSS te permiten rotar, escalar y hacer zoom sobre el contenido HTML, tomando ventaja de la aceleración del hardware cuando este está disponible y sin hacer uso de JavaScript.
- Transiciones CSS
- Las trancisiones CSS te permiten animar cambios en tus reglas CSS. Una vez que unatransición CSS está configurada, loas cambios en tu CSS ocurrirán en un periodo de tiempo en vez de instantáneamente. Esto hace posible que fácil y eficientemente se puedan crear una variedad de efectos visuales en tus aplicaciones.
- Animaciones CSS
- Las animaciones CSS te permitirán animar cambios en tu documento. Utilizando keyframes podrás configurar de forma precisa el efecto de tu animación. También te permite crear ciclos de animaciones que se repitan una y otra vez en vez de efectos que ocurren sólo una vez. Todo esto sin utilizar JavaScript.
- HTML canvas
-
El elemento HTML
<canvas>
provee de un espacio de trabajo 2D para que dibujen en él. Puede tener muchos usos, incluyendo juegos en 2D. - WebGL
- WebGL es una versión para la web de OpenGL ES que permite a tu app ofrecer gráficos 3D acelerados por hardware.
- SVG
- Scalable Vector Graphics (SVG) es una tecnología que te permite dibujar objetos vectoriales en vez de utilizar imágenes. Son muy útiles, gracias a su escalabilidad, para mostrar diagramas y gráficos y también para interfaces de usuario escalables.
APIs del dispositivo Firefox OS
Las APIs De Firefos OS son estándares web emergentes y APIs propias del dispositivos cruciales para desarrollar aplicaciones y Open Web Apps.
Las tablas siguientes muestran los pemisos para las aplicaciones alojadas y certificadas. Para más información puedes ver la sección de Permisos de las Aplicaciones.
Manifest permission | API name | Description | Minimum app type required | access property |
Default granted | Platform |
---|---|---|---|---|---|---|
alarms |
Alarm | Schedule a notification, or schedule an application to be started. | hosted | none | Allow |
FxOS |
audio-capture |
GetUserMedia | Obtain MediaStream from audio input devices, e.g. microphone. This is needed to allow audio capture in Firefox OS 1.2+. | hosted | none | Prompt (even for certified Apps) |
FxOS |
audio-channel-alarm |
Audio Policy | Alarm clock, calendar alarms. | privileged | none | Allow |
FxOS |
audio-channel-content |
Audio Policy | Music, video. | hosted | none | Allow |
FxOS |
audio-channel-normal |
Audio Policy | UI sounds, Web content, music, radio. | hosted | none | Allow |
FxOS |
audio-channel-notification |
Audio Policy | New email, incoming SMS. | privileged | none | Allow |
FxOS |
browser |
Browser | Enables the app to implement a browser in an iframe . |
privileged | none | Allow |
FxOS |
contacts |
Contacts | Add, read, or modify contacts from the address book on the device and read contacts from the SIM. | privileged | readonly , readwrite , readcreate , or createonly |
Prompt for all installed App types. |
FxOS |
desktop-notification |
mozNotification for Gecko <22, Notification for Gecko 22+ | Display a notification on the user's desktop. Note that this has changed, so for Gecko <22 (Firefox OS <1.2) you need to use mozNotification , while for Gecko 22+ (Firefox 1.2+) you need to use Notification . |
hosted | none | Prompt for Web content. Allow for all installed App types. |
FxOS, Android, Desktop |
device-storage:music |
Device Storage | Add, read, or modify music files stored on the device. | privileged | readonly , readwrite , readcreate , or createonly |
Prompt |
FxOS |
device-storage:pictures |
Device Storage | Add, read, or modify picture files stored on the device. | privileged | readonly , readwrite , readcreate , or createonly |
Prompt |
FxOS |
device-storage:sdcard |
Device Storage | Add, read, or modify files stored on the device's SD card. | privileged | readonly , readwrite , readcreate , or createonly |
Prompt |
FxOS |
device-storage:videos |
Device Storage | Add, read, or modify video files stored on the device. | privileged | readonly , readwrite , readcreate , or createonly |
Prompt |
FxOS |
fmradio |
FM Radio | Control the FM radio. | hosted | none | Allow |
FxOS |
geolocation |
Geolocation | Obtain the current location of the user. | hosted | none | Prompt (even for certified Apps) |
FxOS, Desktop, Android |
keyboard |
Keyboard | Allows the app to act as a virtual keyboard by listening to focus change events in other apps. | privileged | none | Allow |
FxOS |
mobilenetwork |
Mobile Network | Obtain mobile network information (MCC, MNC, etc.). | privileged | none | Allow |
FxOS |
push |
Simple Push | Enable an app to wake up to receive notification. | hosted | none | Allow |
FxOS |
storage |
Storage | Utilize storage (appcache, pinned apps, IndexedDB) without size limitations. See appcache, IndexedDB. | hosted | none | Allow |
FxOS, Desktop |
systemXHR |
SystemXHR | Allows anonymous (no cookies) cross-origin XHR without the target site having CORS enabled. Similar to the TCP Socket API but restricted to XHR, not just raw sockets, so it is slightly less risky. See XMLHttpRequest. | privileged | none | Allow |
FxOS |
tcp-socket |
TCP Socket | Create TCP sockets and communicate over them. | privileged | none | Allow |
FxOS, Desktop |
video-capture |
GetUserMedia | Obtain MediaStream from video input devices, e.g. camera. This is needed to allow video capture in Firefox OS 1.4+. | hosted | none | Prompt (even for certified Apps) |
FxOS |
Web APIs Generales
Elementos, eventos, peticiones a la red, almacenamientos y otras Web APIs estandar.
- Network requests - enviar y recibir datos con XMLHttpRequest
-
XMLHttpRequest
es el API del DOM usado para enviar y recibir información usando HTTP, incluyendo la descarga de archivos. - Eventos del DOM
- La documentación sobre eventos proporciona una lista completa de todos los eventos que pueden ser enviados y recibidos para interactuar conlos objetos del DOM.
- Eventos de toque
- Esta documentación cubre los eventos táctiles (touch) que podrás utilizar a la hora de desarrollar apps para dispositivos táctiles.
- Eventos Online y offline
- Permite a tu app responder dinámicamente a cambios en el estado de la red (online y offline).
- Historial
- Manipula y navega a través del historial de tu app con varios comandos. Útil para hacer retorceder o avanzar al usuario a través de tu app.
- Audio
- Integra y manipula contenido de audio con la etiqueta Audio de HTML5.
- Vídeo
- Integra y manipula contenido de video con la etiqueta Audio de HTML5.
- Geolocalización
- Permite a tu app requerir la ubicación del usuario y segir los cambios que se realicen en la misma.
- Orientación de la pantalla
- SIgue los cambios de orientación de la pantalla entre las posiciones vertical y apaisada.
- Orientación del dispositivo
- Permite a tu app detectar cambios de orientación del dispositivo mediante los sensores del mismo.
- IndexedDB
- Acceso a una base de datos para aplicaciones web que provee de una interfaz para guardar y recuperar grandes cantidades de datos en el dispositivo del usuario.
- Almacenamiento
-
La API de almacenamiento provee de varias maneras de guardar una cantidad limitada de datos simples de forma persistente en el dispositivo del usuario.
- localStorage
- sessionStorage
- Blob - Un objeto que guarda los datos planos de un archivo. Los datos que contiene pueden ser también manipulados.
- Web workers
- Permite a la aplicación ejecutar código JavaScript (que no puede interactuar con el DOM o con con el objeto window) como una tarea en el fondo, lo que permite optimizar el rendimiento y desbloquear el redenderizado de la interfaz de usuario.
Servicios del Firefox Marketplace
Estos documentos y guías te ayudarán a aprender cómo publicar tu aplicación y gestionarla en el Firefox OS Marketplace.
- API de envío
- La API de envío te permite validar tu app, ponerla al día y recibir información sobre las apps disponibles para ser instaladas.
- API de pago
- La API de pagos te permite recibir información y procesar pagos dentro de tu aplicación así como recibir información sobre los precios disponibles.
- API del Marketplace
- Toda la documentación relativa al Marketplace es recogida aquí.