Revision 630623 of App Center

  • Revision slug: Web/Apps
  • Revision title: App Center
  • Revision id: 630623
  • Created:
  • Creator: Jeanni_Lynn
  • Is current revision? No
  • Comment

Revision Content

Design

Learn how to design installable Open Web Apps that provide a great cross-platform user experience.

Build

Find all the recommendations and tutorials you'll need for solving your real world development problems.

Publish

Distribute your apps on an open marketplace that puts users and developers first. Read more on the Marketplace zone.

Learn how to create Open Web Apps — rich experiences that run across multiple devices and form factors — using the same Web standards and open technologies that you already know.

Firefox OS

Useful information covering creating apps for Firefox OS, Mozilla's open web-based mobile operating system.

Debugging

Whatever your debugging needs are, we've got information on the best tools to help you with your work.

Components

We've made a variety of tools and ready-made components to help speed up app developement.

Note: We are keeping track of ongoing work on App Center documentation on our Apps documentation status page. If you want to help contribute to App Center documentation, please have a look at this page to see what work needs doing!

{{CommunityBox("Open Web Apps", "dev-webapps", "mozilla.dev.webapps", "openwebapps", "Newsletter|https://marketplace.firefox.com/developers/#newsletter-signup|Sign up|Sign up for the Open Web Apps newsletter||Dev Derby|https://developer.mozilla.org/en/demos/devderby|See our community-written demos|Visit the Dev Derby to see demos and examples produced by the Open Web apps community||Alt Stack Overflow|http://stackoverflow.com/r/mozilla|Main Mozilla Stack Overflow|An alternative place to ask questions about app development")}}

  1. Quickstart
  2. Design
    1. Design overview
    2. Planning
    3. Design principles
    4. Installed app considerations
    5. Graphics for responsive sites
    6. Content styleguide
    7. Firefox OS styleguide
    8. Small screen design patterns
    9. Responsive navigation patterns
    10. Design asset library
    11. Building blocks of responsive design
    12. Responsive design versus adaptive design
    13. Mobile first
    14. Flexible boxes
  3. Build
    1. Build overview
    2. Installable apps
    3. Basic data flow
    4. Gather and modify data
    5. User notifications
    6. User input and controls
    7. Offline apps
    8. Manipulating media
    9. Advanced network communication
    10. Develop games
    11. Localization
    12. Porting
    13. App performance
    14. App development FAQ
  4. Publish
  5. Tools and frameworks
  6. Reference apps
    1. Chrono
    2. Face Value
    3. Podcasts
    4. Roller
    5. Webfighter
    6. General notes
    7. rtcamera
  7. API Reference
    1. Foundations of a Firefox OS app
    2. Layout and structure
    3. Drawing and animation
    4. Firefox OS device APIs
    5. General web APIs
    6. Firefox Marketplace services

Revision Source

<div class="initial-steps clear" id="sect1">
 <div class="panel">
  <h2 class="section-design" id="Design"><a href="/en-US/docs/Web/Apps/Design">Design</a></h2>
  <p>Learn how to design installable Open Web Apps that provide a great cross-platform user experience.</p>
  <ul class="no-bullets">
   <li><a href="/en-US/Apps/Design/Planning_your_app">Planning your app</a></li>
   <li><a href="/en-US/docs/Web/Apps/Design/Design_Principles">Design principles</a></li>
   <li><a href="/en-US/Apps/app_layout/responsive_design_building_blocks">Responsive design</a></li>
  </ul>
 </div>
 <div class="panel">
  <h2 class="section-build" id="Build"><a href="/en-US/docs/Web/Apps/Build">Build</a></h2>
  <p>Find all the recommendations and tutorials you'll need for solving your real world development problems.</p>
  <ul class="no-bullets">
   <li><a href="/en-US/Apps/Quickstart">Quickstart</a></li>
   <li><a href="/en-US/Apps/Build/installable_apps">Installable apps</a></li>
   <li><a href="/en-US/Apps/Developing/App_development_FAQ">App development FAQ</a></li>
  </ul>
 </div>
 <div class="panel">
  <h2 class="section-publish" id="Publish"><a href="/en-US/docs/Mozilla/Marketplace">Publish</a></h2>
  <p>Distribute your apps on an open marketplace that puts users and developers first. Read more on the <a href="/en-US/Marketplace">Marketplace zone</a>.</p>
  <ul class="no-bullets">
   <li><a href="/en-US/Marketplace/Publishing/Publish_options">App publishing options</a></li>
   <li><a href="/en-US/Marketplace/Submission/Submitting_an_app">Submit to Marketplace</a></li>
   <li><a href="/en-US/Marketplace/Monetization">Payments</a></li>
  </ul>
 </div>
</div>
<div class="summary">
 <p><span class="seoSummary">Learn how to create Open Web Apps — rich experiences that run across multiple devices and form factors — using the same Web standards and open technologies that you already know.</span></p>
</div>
<div class="column-container">
 <div class="column-4">
  <h2 id="Firefox_OS">Firefox OS</h2>
  <p>Useful information covering creating apps for Firefox OS, Mozilla's open web-based mobile operating system.</p>
  <ul>
   <li><a href="/en-US/Firefox_OS/Screencast_series:_App_Basics_for_Firefox_OS">Screencast series: App basics for Firefox OS</a></li>
   <li><a href="/en-US/Firefox_OS/Developer_phone_guide">Developer phones guide</a></li>
   <li><a href="/en-US/Apps/Build/Performance/Firefox_OS_performance_testing">Firefox OS performance</a></li>
  </ul>
 </div>
 <div class="column-4">
  <h2 id="Debugging">Debugging</h2>
  <p>Whatever your debugging needs are, we've got information on the best tools to help you with your work.</p>
  <ul>
   <li><a href="/en-US/Apps/Tools_and_frameworks/App_developer_tools">Mozilla app developer tools summary</a></li>
   <li><a href="/en-US/Firefox_OS/Using_the_App_Manager">Using the App Manager</a></li>
   <li><a href="/en-US/docs/Tools">Tools zone</a></li>
  </ul>
 </div>
 <div class="column-4">
  <h2 id="Components">Components</h2>
  <p>We've made a variety of tools and ready-made components to help speed up app developement.</p>
  <ul>
   <li><a href="/en-US/Apps/Tools_and_frameworks/Cordova_support_for_Firefox_OS">Cordova support for Firefox OS</a></li>
   <li><a href="/en-US/Apps/Tools_and_frameworks/Web_components">Web components and Mozilla Brick</a></li>
   <li><a href="/en-US/docs/Web/Apps/Developing/App_templates">Using Mortar templates</a></li>
  </ul>
 </div>
</div>
<div class="note">
 <p><strong>Note:</strong> We are keeping track of ongoing work on App Center documentation on our <a href="/en-US/docs/MDN/Doc_status/Apps">Apps documentation status</a> page. If you want to help contribute to App Center documentation, please have a look at this page to see what work needs doing!</p>
</div>
<p>{{CommunityBox("Open Web Apps", "dev-webapps", "mozilla.dev.webapps", "openwebapps", "Newsletter|https://marketplace.firefox.com/developers/#newsletter-signup|Sign up|Sign up for the Open Web Apps newsletter||Dev Derby|https://developer.mozilla.org/en/demos/devderby|See our community-written demos|Visit the Dev Derby to see demos and examples produced by the Open Web apps community||Alt Stack Overflow|http://stackoverflow.com/r/mozilla|Main Mozilla Stack Overflow|An alternative place to ask questions about app development")}}</p>
<h2 id="Subnav">Subnav</h2>
<ol>
 <li><a href="/en-US/Apps/Quickstart">Quickstart</a></li>
 <li><a href="/en-US/Apps/Design" title="Information regarding app and interface design practices.">Design</a>
  <ol>
   <li><strong><a href="/en-US/Apps/Design">Design overview</a></strong></li>
   <li><a href="/en-US/Apps/Design/Planning_your_app">Planning</a></li>
   <li><a href="/en-US/Apps/Design/Design_Principles">Design principles</a></li>
   <li><a href="/en-US/Apps/Design/Installed_app_considerations">Installed app considerations</a></li>
   <li><a href="/en-US/Apps/Design/Graphics_for_responsive_sites">Graphics for responsive sites</a></li>
   <li><a href="/en-US/Apps/Design/Content">Content styleguide</a></li>
   <li><a href="http://www.mozilla.org/en-US/styleguide/products/firefox-os/">Firefox OS styleguide</a></li>
   <li><a href="/en-US/Apps/Design/Patterns">Small screen design patterns</a></li>
   <li><a href="/en-US/Apps/Design/Responsive_Navigation_Patterns">Responsive navigation patterns</a></li>
   <li><a href="/en-US/Apps/Design/Design_asset_library">Design asset library</a></li>
   <li><a href="/en-US/Apps/app_layout/responsive_design_building_blocks">Building blocks of responsive design</a></li>
   <li><a href="/en-US/Apps/app_layout/Responsive_design_versus_adaptive_design">Responsive design versus adaptive design</a></li>
   <li><a href="/en-US/Apps/app_layout/Mobile_first">Mobile first</a></li>
   <li><a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes">Flexible boxes</a></li>
  </ol>
 </li>
 <li><a href="/en-US/Apps/Build" title="This section contains documentation about building app functionality, with HTML5 and device APIs (WebAPIs).">Build</a>
  <ol>
   <li><strong><a href="/en-US/Apps/Build">Build overview</a></strong></li>
   <li><a href="/en-US/Apps/Build/installable_apps">Installable apps</a></li>
   <li><a href="/en-US/Apps/Build/Basic_data_flow">Basic data flow</a></li>
   <li><a href="/en-US/Apps/Build/gather_and_modify_data">Gather and modify data</a></li>
   <li><a href="/en-US/Apps/Build/User_notifications">User notifications</a></li>
   <li><a href="/en-US/Apps/Build/User_input_methods">User input and controls</a></li>
   <li><a href="/en-US/Apps/Build/Offline">Offline apps</a></li>
   <li><a href="/en-US/Apps/Build/Manipulating_media">Manipulating media</a></li>
   <li><a href="/en-US/Apps/Build/Advanced_network_communication">Advanced network communication</a></li>
   <li><a href="/en-US/docs/Games">Develop games</a></li>
   <li><a href="/en-US/Apps/Build/Localization">Localization</a></li>
   <li><a href="/en-US/Apps/Build/Porting">Porting </a></li>
   <li><a href="/en-US/Apps/Build/Performance">App performance</a></li>
   <li><a href="/en-US/Apps/Build/App_development_FAQ">App development FAQ</a></li>
  </ol>
 </li>
 <li><a href="/en-US/Marketplace">Publish</a></li>
 <li><a href="/en-US/Apps/Tools_and_frameworks">Tools and frameworks</a></li>
 <li><a href="/en-US/Apps/Reference_apps">Reference apps</a>
  <ol>
   <li><a href="/en-US/Apps/Reference_apps/Chrono">Chrono</a></li>
   <li><a href="/en-US/Apps/Reference_apps/Face_value">Face Value</a></li>
   <li><a href="/en-US/Apps/Reference_apps/Podcasts">Podcasts</a></li>
   <li><a href="/en-US/Apps/Reference_apps/Roller">Roller</a></li>
   <li><a href="/en-US/Apps/Reference_apps/Webfighter">Webfighter</a></li>
   <li><a href="/en-US/Apps/Reference_apps/General_notes">General notes</a></li>
   <li><a href="/en-US/Apps/Reference_apps/rtcamera">rtcamera</a></li>
  </ol>
 </li>
 <li><a href="/en-US/Apps/Reference">API Reference</a>
  <ol>
   <li><a href="/en-US/Apps/Reference/Foundation_of_a_Firefox_OS_app">Foundations of a Firefox OS app</a></li>
   <li><a href="/en-US/Apps/Reference/Layout_and_structure">Layout and structure</a></li>
   <li><a href="/en-US/Apps/Reference/Drawing_and_animation">Drawing and animation</a></li>
   <li><a href="/en-US/Apps/Reference/Firefox_OS_device_APIs">Firefox OS device APIs</a></li>
   <li><a href="/en-US/Apps/Reference/General_Web_APIs">General web APIs</a></li>
   <li><a href="/en-US/Apps/Reference/Firefox_Marketplace_services">Firefox Marketplace services</a></li>
  </ol>
 </li>
</ol>
Revert to this revision