App Center

Index

Found 106 pages:

# Page Tags and summary
1 App Center Apps, Mobile, Modern web apps, Progressive web apps, Web Development
Learn how to create modern web apps using the latest web technologies and ideas — web apps that will have super powers in the latest modern browsers, but still provide an acceptable user experience in less able browsers.
2 Advanced topics Apps, Firefox OS, Mobile
These articles provide extra information on more advanced Open Web Apps topics.
3 After the purchase NeedsContent
This page is a placeholder for future content.
4 App developer tutorials Apps, NeedsContent
Here is a list of tutorials to help you with app development:
5 Audio and video app tutorials Apps, Landing
These tutorials are for audio and video apps:
6 Debugging the app Debugging, Error Console, Example, Firefox OS, WebApp runtime
Enable Error Console with -jsconsole to debug your app inside the WebApp runtime.
7 Games Apps, Games, Tutorial
Here is a list of tutorials for games:
8 Serpent game Apps, Code, Games, Tutorial
This Open Web App is a simple game based on the classic "snake" game. It uses the WebGameStub template, which can help you to quickly create a Web game.
9 General app development tutorial Apps, Marketplace
Here is a tutorial for creating a Twitter-based Web application that will show tweets from selected geographical areas. The tutorial describes how to create an app, write a manifest file for it, and submit it to the Firefox Marketplace.
10 App code Apps
Outside of the different colors and imagery that apps use, an app's design isn't necessarily dynamic: the principles of designing a flexible app are largely the same. But the style and tools a developer uses in coding an application is a completely different story. Numerous libraries and frameworks are available for coding mobile apps.
11 App design Apps
There are many considerations to ponder before designing your web app.
12 Configuring your development environment Apps
Before you can dive into creating your web application, you need to make sure you have the tools required.
13 Create your app! Apps
Using open Web technologies to create rich, powerful applications for numerous devices is a fun, rewarding, and potentially profitable process. The open Web provides the tools needed to make app creation possible, while Mozilla provides an excellent marketplace for showcasing and distributing your app. Use the information provided in this document to create your incredible app and share it with the world!
14 Creating the Area Tweet app Apps
With all of the design goals and coding standards laid out, it's time to get into the coding of our app.
15 Debugging the app Apps, Firefox OS
For debugging an app the first step is, of course, to use a full-capabilities desktop browser such as Firefox with all its available tools. But once the app is installed on a platform (cf. Platform-specific details of app installation) it becomes a native app, it is run from inside the webapp runtime and things get more complicated.
16 Foundations of an HTML5 Web app Apps
An Open Web App is basically an HTML5 app. While the role of HTML, CSS, and JavaScript are obvious to some, let's do a quick recap of how each plays its own important role in an HTML5 app.
17 Testing the app Apps
App testing is of immense importance, especially when supporting multiple platforms and devices. The number of tests and types of testing needed depend on the devices and platforms supported. Test types include:
18 Your app development environment Text editors, Web developer tools
Before you can dive into creating your web application, you need to make sure you have the tools required.
19 Media demo app tutorial Apps, NPR, Tutorial
This is a tutorial on the "NPR demo" app.
20 Weather app tutorial Apps
This tutorial tells you how to build an example app called weatherme.
21 App layout Apps, Design
Creating an effective layout for a modern web site or app is a challenge. In some ways, your job is easier - CSS generally has much more solid, consistent support across browsers and platforms than it used to, so you no longer have to rely on as many horrible hacks. But in other ways, it is harder; there are so many devices around these days that can access the Web, with different browsers, screen sizes, resolutions, processing power, and usage contexts (for example is the device portable, will it have a network connection?)
22 Getting started with app development Apps
Web apps are apps built using standard Web technologies. They work in any modern Web browser, and can be developed using your favorite tools. Some characteristics that distinguish Web apps from websites: Apps are installed by a user, they are self-contained and don't always require the chrome of a browser window, and they can be built to run offline. Gmail, Twitter, and Etherpad are Web apps.
23 Identity integration for apps Apps, BrowserID, Identity, NeedsContent, Persona
Mozilla's open solution for user identity, BrowserID (part of Mozilla Persona), is used in several ways in the apps ecosystem, most of which require no action from app developers (other than logging in to the Firefox Marketplace).
24 Index Apps, Index
Found 106 pages:
25 Mobile First Mobilegeddon, NeedsContent, moobile first, webdesign responsive
The first site to feature a layout that adapts to browser viewport width was Audi.com launched in late 2001,[43] created by a team at razorfish consisting of Jürgen Spangl and Jim Kalbach (information architecture), Ken Olling (design), and Jan Hoffmann (interface development). Limited browser capabilities meant that for Internet Explorer, the layout could adapt dynamically in the browser whereas for Netscape, the page had to be reloaded from the server when resized.
26 Progressive web apps Apps, Modern web apps, Progressive web apps
Progressive web applications are like good old web sites but better. In a modern browser they exhibit super–powers and become…
27 Discoverable Apps, Manifest, Modern web apps, Progressive web apps, discoverable, web manifest
Eventual aims for web apps:
28 Installable Apps, Installable, Manifest, Modern web apps, Progressive web apps
None written as yet; contributions appreciated.
29 Linkable Apps, Linkable, Modern web apps, Progressive web apps
None written as yet; contributions appreciated.
30 Network independent App shell, Apps, IndexedDB, Modern web apps, Network independant, Offline, Progressive web apps, Service Workers, localStorage
The basic ideas behind network independence are to be able to:
31 Progressive Apps, Modern web apps, Progressive web apps, progressive, progressive enhancement, responsive
No core guides listed as yet. Contributions appreciated.
32 Re-engageable Apps, Modern web apps, Notifications, Progressive web apps, Push, Service Workers, Web
No summary!
33 Responsive design Apps, Media Queries, Modern web apps, Progressive web apps, Web Development, flexbox, responsive, viewport
Responsive web apps use technologies like media queries and viewport to make sure that their UIs will fit any form factor: desktop, mobile, tablet, or whatever comes next.
34 Graphic design for responsive sites CSS, Graphics, JavaScript, SVG, WebGL
Textual content is not a problem, as text boxes are innately responsive, but the picture starts to get ugly when you start including graphics and complex layouts on your pages — especially when those graphics and layouts need to adapt to different displays! This is why we have included an entire docs section covering each of these topics (the one you are currently in, and app layout.)
35 Media CSS, CSS:Getting_Started, Example, Guide, Intermediate, NeedsBeginnerUpdate, NeedsUpdate, Web
This is the 14th and last section of Part I of the CSS Getting Started tutorial. Many of the pages in this tutorial have focused on the CSS properties and values that you can use to specify how to display a document. This page looks again at the purpose and structure of CSS stylesheets.
36 Mobile first Apps, CSS, HTML
In our Planning your App article, we provided a high level look into the kinds of planning and functionality decisions you should make before you start coding an app, including some ideas for desktop and mobile design. This article offers some related ideas, looking at the concept of mobile first — the practice of designing a web site so that the default layout/configuration is for mobile devices, and layouts and features for desktop browsers are then layered on top of that default. This guide looks at a few useful techniques inside the mobile first umbrella.
37 Responsive Navigation Patterns Guide, Mobile, Navigation, Responsive Design, navigation, patterns
Need some help designing your app's navigation? These patterns are a great place to start.
38 The building blocks of responsive design Apps, CSS3, HTML5, Mobile, Responsive Design
For Web developers, it is now fairly common to be called upon to create a Web site or app that changes its user interface depending on the browser or device accessing the site to provide an optimized experience. One approach to this is to create different versions of your site/app for different platforms or browsers and serve them appropriately after detecting which browser or platform is looking at your site. But this is increasingly inefficient: browser sniffing is inherently error prone, and maintaining multiple copies of your code can turn out to be a nightmare.
39 Safe Apps, HTTPS, Modern web apps, Progressive web apps, Safe, Security, Web
No core guides listed as yet. Contributions appreciated.
40 Rec Room - Accessing Phone APIs and Hardware Apps, Design, Development, Firefox OS, Quickstart
WebAPIs are simply JavaScript APIs that allow applications to interact with mobile device features. There are a number of WebAPIs available for accessing device hardware (battery status, device vibration hardware, camera, etc.) and data (calendar data, contacts, etc.). Though many of these APIs are still being iterated on — and some are still working towards stabilization — there are strategies available for checking compatibility so we can leverage these APIs and build feature-rich applications.
41 Rec Room - Animation and Graphics Apps, Design, Development, Firefox OS, Quickstart
TODO This section needs more work
42 Rec Room - Data Management and Offline Apps, Design, Development, Firefox OS, Quickstart
When developing for mobile devices, we face some unique challenges around storing and maintaining user data. Mobile users are likely going to be travelling in and out of connected areas, which means we must have a solid strategy for handling offline data. In this chapter, we'll go over techniques for detecting connectivity and how to persist application data at appropriate times regardless of a user's connection.
43 Rec Room - Networking Apps, Design, Development, Firefox OS, Quickstart
In order to communicate with a web service, we can specify a `systemXHR` permission in our application manifest. In our podcasts app, we have this permission set to allow us to fetch and download podcasts. In our episode model, app/scripts/models/episode_model.js, we can see how to put XHR to use:
44 Rec Room - User Interface and Layout Apps, Design, Development, Firefox OS, Quickstart
FirefoxOS leverages HTML and CSS for user interfaces. The website Building FirefoxOS, produced by Mozilla partner Telefonica, provides reusable UI widgets, as well as CSS for common app layouts, transitions, etc. The site contains numerous other resources, including a Photoshop stencil kit, fonts, icons and much more.
45 Security guidelines Apps, Security
All Firefox OS apps use standard web technologies like HTML, JavaScript, CSS and SVG, but sensitive app permissions are restricted to privileged apps, which are delivered in a signed archive through the Firefox Market, rather than being deployed dynamically by an arbitrary web server. The purpose is to allow these apps to be reviewed from a security and quality perspective, to ensure they can be trusted with increased permissions levels. This section is intended to guide developers in writing secure packaged apps.
46 Web app basics Apps, Firefox OS, Mobile
No summary!
47 Web app fundamentals Apps, Firefox OS, Guide, Mobile
This page lists topics useful for building webapps; each page includes workflows, tutorials, references, examples, and other useful information.
48 App functionality: task categories
This page describes and links to the sub-pages we have that cover the development of different categories of app functionality, or "things you will want your app to do".
49 Audio and Video Delivery Audio, HTML5, Media, Video
Whether we are dealing with pre-recorded audio files or live streams, the mechanism for making them available through the browser's <audio> and <video> elements remains pretty much the same. Currently, to support all browsers we need to specify two formats, although with the adoption of MP3 and MP4 formats in Firefox and Opera, this is changing fast. You can find compatibility information in the following places:
50 Adding captions and subtitles to HTML5 video HTML5, Media, WebVTT, captions, subtitles, track
In other articles we looked at how to build a cross browser video player using the HTMLMediaElement and Window.fullScreen APIs, and also at how to style the player. This article will take the same player and show how to add captions and subtitles to it, using the WebVTT format and the <track> element.
51 Creating a cross-browser video player Apps, HTML5, Video, full screen
This article describes a simple HTML5 video player that uses the Media and Fullscreen APIs and works across most major desktop and mobile browsers. As well as working fullscreen, the player features custom controls rather than just using the browser defaults. The player controls themselves won't be styled beyond the basics required to get them working; full styling of the player will be taken care of in a future article.
52 Cross-browser audio basics Apps, Audio, Guide, HTML5, Media, events
This article provides a basic guide to creating an HTML5 audio player that works cross browser, with all the associated attributes, properties and events explained, and a quick guide to custom controls created using the Media API.
53 H.264 support in Firefox Apps, Codec, Firefox, Firefox OS, H.264, Reference, Video, codec support, video
This article explains the state of support for the H.264 video format in Firefox/Firefox OS, including code examples, tips and tricks.
54 Live streaming web audio and video Guide, adaptive streaming
Live streaming technology is often employed to relay live events such as sports, concerts and more generally TV and Radio programmes that are output live. Often shortened to just streaming, live streaming is the process of transmitting media 'live' to computers and devices. This is a fairly complex and nascent subject with a lot of variables, so in this article we'll introduce you to the subject and let you know how you can get started.
55 Media buffering, seeking, and time ranges Apps, Buffer, HTML5, TimeRanges, Video, buffering, seeking
Sometimes it's useful to know how much <audio> or <video> has downloaded or is playable without delay — a good example of this is the buffered progress bar of an audio or video player. This article discusses how to build a buffer/seek bar using TimeRanges, and other features of the media API.
56 Setting up adaptive streaming media sources Audio, HLS, HTML5, HTTP Live Streaming, MPEG-DASH, Video, adaptive streaming
Let's say you want to set up an adaptive streaming media source on a server, to be consumed inside an HTML5 media element. How would you do that? This article explains how, looking at two of the most common formats: MPEG-DASH and HLS (HTTP Live Streaming.)
57 Video player styling basics Apps, Guide, Media, Styling, Video, video
In the previous Cross browser video player article we described how to build a cross-browser HTML5 video player using the Media and Fullscreen APIs. This follow-up article looks at how to style this custom player, including making it responsive.
58 Web Audio playbackRate explained Apps, Audio, Media, Video, playbackRate
The playbackRate property of the <audio> and <video> elements allows us to change the speed, or rate, at which a piece of web audio or video is playing
59 Writing Web Audio API code that works in every browser API
You probably have already read the announcement on the Web Audio API coming to Firefox, and are totally excited and ready to make your until-now-WebKit-only sites work with Firefox, which uses the unprefixed version of the spec.
60 Audio and video manipulation Audio, Canvas, HTML5, Reference, Référence, Video, Web Audio API, WebGL, audio, developer recommendation, video
The ability to read the pixel values from each frame of a video can be very useful.
61 Control basic data flow through your apps Beginner
The core of every web app is its internal and external data flow. As the web has evolved, the complexity of these data flows has increased. Understanding these data flows will help you build better, and more efficient web apps.
62 Developing game apps Apps, Games, páginas_a_traducir
references and guides provide information useful to developers creating game apps using open Web technologies.
63 Gather and modify data API, Camera, Contacts, File, Geolocation, Guide, Storage, Web Activities, WebAPI, camera, data, getusermedia, storage
The following flowchart illustrates the typical workflow for retrieving data from the device hosting an open web app:
64 Keep it level: responding to device orientation changes Apps, Device Orientation, Firefox OS, devicemotion, deviceorientation
Game development is doubtless the most interesting area in which motion and orientation data are useful: for example you might think of using this data to control the direction of characters, vehicles or balls, and make them jump.
65 Near or far? Responding to proximity Call, Device, Guide, Mobile, Proximity, Proximity API, Sensor
As we have seen above, Low Energy Messenger hides clickable/tappable DOM elements when the ear is near to the device during a call. In Firefox OS certified applications it's possible to do something more by using the PowerManager.screenEnabled property, with which you can control the device's screen and turn the screen off and on for real. Have a look at the Power Management API documentation for more details about it.
66 Optimizing for high and low network speeds API, Apps, Guide, Network Information API
The Network Information API provides information about the system's connection. The specification defines a connection object, a type property and a typechange event.
67 Plotting yourself on the map Apps, Geolocation, Google Maps, Maps, OpenLayers, OpenStreetMap
There are plenty of online maps available these days. To get an idea of the global and local map services available, have a look at this list. This article will focus on the most used one (Google Maps) and on the most open one (OpenStreetMap).
68 Responding to light conditions API, Ambient Light, Apps, CSS, Christmas, Firefox, HTML
Ambient light sensors are used in a variety of functions such as adjusting display brightness to a comfortable level.
69 Retrieving Battery status information API, Battery, Battery Status API, Firefox OS, Web app
In the context of Open Web Apps, knowing the battery status can be useful in a number of situations:
70 Updating phone contacts from the Web API, Apps, Contacts, Firefox OS, Geolocation, mozContacts
The Contacts API is part of the WebAPI, and provides a simple interface to manage contacts stored in a device's system address book.
71 Icon implementation for apps Apps, B2G, Firefox OS, Icons, dimensions
TBD
72 Modern web app architecture Apps, Architecture, Ember, Frameworks, Guide, MVC, Tools
Technical review completed.
73 Controllers App, Architecture, Controller, Ember, app
Technical review completed.
74 Creating an Ember app Apps, Command Line, Ember, Ember CLI
We are going to create a simple MVC app called world-clock, which will display the local time, update it every second, and allow you to choose additional timezones to display. You can view a demo of the app, and check out the complete source code on Github.
75 MVC architecture Apps, Architecture, Controller, Ember, MVC, Model, Tutorial, View
Model View Controller (MVC) is a software architecture pattern, commonly used to implement user interfaces: it is therefore a popular choice for architecting web apps. In general, it separates out the application logic into three separate parts, promoting modularity and ease of collaboration and reuse. It also makes applications more flexible and welcoming to iterations.
76 Models and application data Adapter, Apps, Data Store, Ember, Routes, adapter, data, models
Here we'll finish off our world-clock app, adding functionality that enables users to choose additional timezones to display when they click on the timezones link. This will help users schedule meetings with friends in diverse locations such as San Francisco, Buenos Aires, and London. We'll use Ember Data and the LocalForage library to store our data in an IndexedDB instance so the app is usable offline, and the Moment Timezone library to provide timezone data.
77 Publishing your app Apps, Build, Ember, GitHub, Github, Guide, build, gh-pages, guide, production, publication
If you are comfortable with using GitHub, one great option for hosting your application (especially if you want to put it up somewhere for others to test) is GitHub Pages. Using our World Clock application as an example, we'll build our files for production and commit them to a gh-pages branch in our git repo.
78 Styling your Ember app Apps, CSS, Ember, Fonts, Guide, Images, Styling
The app structure created by Ember CLI when you first generated your app contains a public directory. The contents of this directory are copied over unchanged to the root of the dist folder when you serve your app with ember serve, so this is where you should put assets to be used in your app, like images and fonts. You should use the usual good practices for storing these, such as having separate images and fonts directories.
79 Views and templates Application, Apps, Ember, Links, Routes, Templates, views
Technical review completed.
80 Performance Apps, Firefox OS, Performance
Articles related to Open Web App/Firefox OS performance.
81 App performance validation Apps, B2G, Firefox OS, Performance, Testing, Validation
Editorial review completed.
82 CSS and JavaScript animation performance Animation, Animations, CSS, FPS, JavaScript, Performance, Transitions, animation, animations, performance, transitions
Browsers are able to optimize rendering flows. In summary, we should always try to create our animations using CSS transitions/animations where possible. If your animations are really complex, you can may have to rely on JavaScript-based animations instead.
83 Optimizing startup performance Apps, Games, Performance
Regardless of platform, it's always a good idea to start up as quickly as possible. Since that's a universal issue, we won't be focusing on it too much here. Instead, we're going to look at a more important issue when building Web apps: starting up as asynchronously as possible. That means not running all your startup code in a single event handler on the app's main thread.
84 Performance fundamentals Apps, Firefox, Gecko, Guide, Performance
Performance means efficiency. In the context of Open Web Apps, this document explains in general what performance is, how the browser platform helps improve it, and what tools and processes you can use to test and improve it.
85 Power Bash, CodingScripting, Guide, Howto, Mobile, Mozilla
FxOS Powertool! is a command-line-based, power testing framework that is useful to optimize client software/applications for power consumption. The tool collects data from multiple tests, and outputs them with basic statistics calculations. This page walks you through how to use this tool with examples.
86 Nexus 4 Harness Guide, Howto, Mobile
To use FxOS Powertool! for a power consumption test on the LG Nexus 4 phone, follow this guide to set up a battery harness.
87 UI Synchronicity
UI Synchronicity describes the way a user interface reacts to user interaction, whether that be in a blocking or non-blocking manner.
88 Platform-specific details of app installation Apps, páginas_a_traducir
Gaia (the Firefox OS user interface) includes a marketplace link on the second homepage, and apps can be installed in this way. Default apps included with Gaia are stored in the Gecko profile on the device as an offline cache of the Web app at /data/local/OfflineCache/*.
89 Quick Start Guide to App Development Apps, Beginner, Design, Development, Intro, Quickstart, Tools, Web apps
There are many different ways to build an open web application. With so many frameworks, libraries and tooling options to choose from, narrowing down the best approach can be a daunting task. To lighten this responsibility, Mozilla has published a set of recommended JavaScript libraries and tools you can use to write your next app. From project creation to templating and deployment, this tool chain will help you quickly create awesome web apps in less time.
90 Application setup Apps, Beginner, Design, Development, Ember, Quickstart, beginner
Though we are deferring a decent amount of responsibility to Ember CLI, it is still important to familiarize yourself with the way these projects are set up. Let's get started by creating a new project. We will generate the basic app skeleton and serve it locally to be viewed in the browser. Later in the quickstart, we will work with this skeleton to create a simple clock application with timezone support.
91 Building simple functionality with Ember Apps, Design, Development, Firefox OS, Quickstart
In the previous two sections we learned how to generate a basic app skeleton, view it in the browser, and access tools for testing and debugging the code. Now we're ready to build some real functionality into our basic skeleton — we'll create a simple clock application that displays and updates the current local time, and allows a user to compare selected timezones.
92 Design Design, Quickstart
Quickstart information on designing open web apps.
93 Concept: A great app Apps, concept
Look around your world, find an unmet need, and then address it. If you already have a list of tasks, an idea for your app and the type of user you are targeting, it's time to create a goal statement: Define your app's purpose and the most important user in one sentence. This is your main use case.
94 Testing and debugging Apps, Design, Development, Firefox OS, Quickstart
If you don't currently have your Ember CLI application running locally, use your command line or terminal to navigate to your project directory and run ember serve.
95 User input and controls Screen Orientation, contenteditable, drag and drop, fullscreen, keyboard, mouse, pointer lock, touch, user input
Modern web user input goes beyond simple mouse and keyboard: think of touchscreens for example. This article provides recommendations for managing user input and implementing controls in open web apps, along with FAQs, real-world examples, and links to further information for anyone needing more detailed information on the underlying technologies. Relevant APIs and events include touch events, Pointer Lock API, Screen Orientation API, Fullscreen API, Drag & Drop and more.
96 Touch Gestures and Events Draft, Gestures, touch, user input
Touch Screen/ Gestures are the most popularly used technology to make user experience more smart and simple. Touch pads/screens make gaming more interactive and fun, and are being used widely all over the globe.
97 User notifications API, Notifications, Vibration, alarm
Here's the typical workflow for managing notifications:
98 Checking when a deadline is due Apps, Date, Example, Firefox OS, IndexedDB, deadline, indexeddb
A screenshot of the sample app. A red main title saying To do app, a test to-do item, and a red form for users to enter new tasks
99 Detecting when to notify users Guide, Notifications, Vibration, alarm, events
Events are the standard programmatic way in which we respond to the various happenings in an application. Event handlers can be attached to objects so that when an occurrence of an event is detected, we can respond to that event with some kind of code. Some events have been around forever, and can be regarded as old classics. For example, a simple onclick handler to run a function when a button is pressed:
100 Good vibrarions: harnessing the vibration API for user feedback NeedsContent
vibration content
101 Notifying users via the Notification and Vibration APIs Apps, Firefox OS, Notifications
In case you didn't read the previous article, here is a quick recap on the sample app we're looking at. We're looking at To-do list notifications, a simple to-do list application that stores task titles and deadline times and dates using IndexedDB, and then provides users with notifications when deadline dates are reached, making use of the Notification and Vibration APIs. You can download the To-do list notifications app from github and play around with the source code, or view the app running live.
102 Using Alarms to notify users API, Alarm API, Apps, Firefox OS, Notification API, Notifications, alarm
The example referred to throughout this article is To-do List Alarms, a to-do list example that stores to-do list information (task and time and date task is due) in an IndexedDB instance. When a to-do list task is stored, the Alarm API is used to store an Alarm reference in the system, which is handled by the same application. When the alarm is due, a system notification is shown to notify the user of this, which works whether the application is open at the time or not.
103 Using the full screen: Full screen API explained NeedsCompatTable, NeedsContent, NeedsExample
full screen api
104 User services NeedsExamples
In this section we look at APIs designed to facilitate common user services, such as taking payments and login functionality.
105 Utilities Deprecated
No summary!
106 Working offline IndexedDB, Offline, appcache, localStorage, localforage
The following diagram illustrates the typical workflow of an offline app. The entry point is when the app is downloaded/installed and then launched — navigated to in the case of an online web app, and installed and opened in the case of an installable app (e.g. on Firefox OS.) At this point the standard behaviour should be to store the assets and initial dataset for the app on the device, if possible, after which the app can be used, storing its dataset offline and periodically syncing with the dataset on the server.

Document Tags and Contributors

Tags: 
 Contributors to this page: necrophcodr, fscholz
 Last updated by: necrophcodr,