Index

Found 105 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 105 pages:
25	Mobile First	NeedsContent
		Need to insert more information.
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, manifest, web manifest
		Eventual aims for web apps:
28	Installable	Apps, Installable, Manifest, Modern web apps, Progressive web apps, manifest
		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, indexeddb, localStorage, offline
		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, Flexbox, 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	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.
36	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.
37	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.
38	Safe	Apps, HTTPS, Modern web apps, Progressive web apps, Safe, Security, Web
		No core guides listed as yet. Contributions appreciated.
39	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.
40	Rec Room - Animation and Graphics	Apps, Design, Development, Firefox OS, Quickstart
		TODO This section needs more work
41	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.
42	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:
43	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.
44	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.
45	Web app basics	Apps, Firefox OS, Mobile
		No summary!
46	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.
47	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".
48	Audio and Video Delivery	Audio, HTML5, Media, Video, audio, 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:
49	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.
50	Creating a cross-browser video player	Apps, HTML5, Video, full screen, video
		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.
51	Cross-browser audio basics	Apps, Audio, Events, Guide, HTML5, Media, audio, 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.
52	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.
53	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.
54	Media buffering, seeking, and time ranges	Apps, Buffer, HTML5, TimeRanges, Video, buffering, seeking, video
		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.
55	Setting up adaptive streaming media sources	Audio, HLS, HTML5, HTTP Live Streaming, MPEG-DASH, Video, adaptive streaming, audio, video
		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.)
56	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.
57	Web Audio playbackRate explained	Apps, Audio, Media, Video, audio, playbackRate, video
		To start with, let's look at a brief example of playbackRate usage:
58	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.
59	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.
60	Control basic data flow through your apps	Beginner, 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.
61	Developing game apps	Apps, Games, páginas_a_traducir
		references and guides provide information useful to developers creating game apps using open Web technologies.
62	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:
63	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.
64	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.
65	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.
66	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).
67	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.
68	Retrieving Battery status information	API, Battery, Battery Status API, Firefox OS, Web app, web app
		In the context of Open Web Apps, knowing the battery status can be useful in a number of situations:
69	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.
70	Icon implementation for apps	Apps, B2G, Firefox OS, Icons, dimensions
		TBD
71	Modern web app architecture	Apps, Architecture, Ember, Frameworks, Guide, MVC, Tools, guide
		Technical review completed.
72	Controllers	App, Architecture, Controller, Ember, app
		Technical review completed.
73	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.
74	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.
75	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.
76	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.
77	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.
78	Views and templates	Application, Apps, Ember, Links, Routes, Templates, templates, views
		Technical review completed.
79	Performance	Apps, Firefox OS, Performance
		Articles related to Open Web App/Firefox OS performance.
80	App performance validation	Apps, B2G, Firefox OS, Performance, Testing, Validation
		Editorial review completed.
81	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.
82	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.
83	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.
84	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.
85	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.
86	UI Synchronicity
		UI Synchronicity describes the way a user interface reacts to user interaction, whether that be in a blocking or non-blocking manner.
87	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/*.
88	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.
89	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.
90	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.
91	Design	Design, Quickstart
		Quickstart information on designing open web apps.
92	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.
93	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.
94	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.
95	Touch Gestures and Events
		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.
96	User notifications	API, Notifications, Vibration, alarm
		Here's the typical workflow for managing notifications:
97	Checking when a deadline is due	Apps, Date, Example, Firefox OS, IndexedDB, deadline, indexeddb
98	Detecting when to notify users	Events, 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:
99	Good vibrarions: harnessing the vibration API for user feedback	NeedsContent
		vibration content
100	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.
101	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.
102	Using the full screen: Full screen API explained	NeedsCompatTable, NeedsContent, NeedsExample
		full screen api
103	User services	NeedsExamples
		In this section we look at APIs designed to facilitate common user services, such as taking payments and login functionality.
104	Utilities	Deprecated
		No summary!
105	Working offline	IndexedDB, Offline, appcache, localStorage, localforage, offline
		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.