mozilla

Revision 543869 of App Center

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

Revision Content

ออกแบบ

เรียนรู้การออกแบบ เว็บแอพ ที่เปิดประสบการณ์ดีๆ ต่อผู้ใช้งานข้ามแฟลตฟอร์ม

สร้างสรรค์

ค้นหาบทเรียนและตัวช่วยที่แนะนำทั้งหมด เพื่อแก้ไขปัญหาการพัฒนาแอพที่เกิดขึ้นจริงของคุณ

วางจำหน่าย

วางจำหน่ายแอพของคุณบน ตลาดเปิด ที่เสนอต่อผู้ใช้งานและนักพัฒนาเป็นอันดับแรก อ่านรายละเอียดเพิ่มเติม Marketplace zone.

เรียนรู้การสร้างเว็บแอพ — พบประสบการณ์มากมาย การทำงานข้ามอุปกรณ์หลากหลายอุปกรณ์และรูปแบบอื่นๆ — โดยใช้เพียงเว็บมาตรฐานและเทคโนโลยีแบบเปิดที่คุณรู้อยู่แล้ว

Quickstart

The basic information you need to get up and running: designing, building and publishing apps.

Design patterns

Information on making your app's UI intuitive and easy to use, regardless of what platform it's running on.

Components

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

Reference Apps

A number of sample Open Web Apps we have published for you to download, install, play with and learn from.

Payments

We provide tailored APIs to allow you to take payments for your apps, including purchased apps and in-app payments.

Publishing

Whether you want to self-publish or distribute your app on our Firefox Marketplace, we've got docs to help.

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")}}

  1. Quickstart
    1. Introduction to open web apps
    2. Introduction to Firefox OS
    3. What makes a great app?
    4. Design principles
    5. UI guidelines
    6. Your first app
    7. App development for web developers
    8. App development for mobile developers
    9. Developing app functionality
    10. App developer tools
  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. Display and feedback
    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">ออกแบบ</a></h2>
  <p>เรียนรู้การออกแบบ เว็บแอพ ที่เปิดประสบการณ์ดีๆ ต่อผู้ใช้งานข้ามแฟลตฟอร์ม</p>
  <ul class="no-bullets">
   <li><a href="/en-US/Apps/Design/Planning_your_app">วางแผนเว็บแอพของคุณ</a></li>
   <li><a href="/en-US/docs/Web/Apps/Design/Design_Principles">ออกแบบการทำงาน</a></li>
   <li><a href="/en-US/Apps/app_layout/responsive_design_building_blocks">สร้างการตอบสนอง</a></li>
  </ul>
 </div>
 <div class="panel">
  <h2 class="section-build" id="Build"><a href="/en-US/docs/Web/Apps/Build">สร้างสรรค์</a></h2>
  <p>ค้นหาบทเรียนและตัวช่วยที่แนะนำทั้งหมด เพื่อแก้ไขปัญหาการพัฒนาแอพที่เกิดขึ้นจริงของคุณ</p>
  <ul class="no-bullets">
   <li><a href="/en-US/docs/Web/Apps/Quickstart/Build/Your_first_app">แอพแรกของคุณ</a></li>
   <li><a href="/en-US/Apps/Build/installable_apps">แอพที่สามารถติดตั้งได้</a></li>
   <li><a href="/en-US/Apps/Developing/App_development_FAQ">FAQ การพัฒนาแอพ</a></li>
  </ul>
  <h2 class="section-build" id="Build">วางจำหน่าย</h2>
 </div>
 <div class="panel">
  <p>วางจำหน่ายแอพของคุณบน ตลาดเปิด ที่เสนอต่อผู้ใช้งานและนักพัฒนาเป็นอันดับแรก อ่านรายละเอียดเพิ่มเติม <a href="/en-US/Marketplace">Marketplace zone</a>.</p>
  <ul class="no-bullets">
   <li><a href="/en-US/Marketplace/Publishing/Publish_options">ตัวเลือกการวางจำหน่าย</a></li>
   <li><a href="/en-US/Marketplace/Submission/Submitting_an_app">ส่งแอพสู่ตลาด</a></li>
   <li><a href="/en-US/Marketplace/Monetization">การชำระเงิน</a></li>
  </ul>
 </div>
</div>
<div class="summary">
 <p><span class="seoSummary">เรียนรู้การสร้างเว็บแอพ — พบประสบการณ์มากมาย การทำงานข้ามอุปกรณ์หลากหลายอุปกรณ์และรูปแบบอื่นๆ — โดยใช้เพียงเว็บมาตรฐานและเทคโนโลยีแบบเปิดที่คุณรู้อยู่แล้ว</span></p>
</div>
<div class="column-container">
 <div class="column-4">
  <h2 id="Quickstart">Quickstart</h2>
  <p>The basic information you need to get up and running: designing, building and publishing apps.</p>
  <ul>
   <li><a href="/en-US/docs/Web/Apps/Quickstart/Build/Your_first_app">Your first app</a></li>
   <li><a href="/en-US/docs/Web/Apps/Quickstart/Design/UI_guidelines">UI guidelines</a></li>
   <li><a href="/en-US/docs/Web/Apps/Quickstart/Build/Developing_app_functionality">Developing app functionality</a></li>
  </ul>
 </div>
 <div class="column-4">
  <h2 id="Design_patterns">Design patterns</h2>
  <p>Information on making your app's UI intuitive and easy to use, regardless of what platform it's running on.</p>
  <ul>
   <li><a href="/en-US/docs/Web/Apps/Quickstart/Design/Design_Principles">Design principles</a></li>
   <li><a href="/en-US/docs/Web/Apps/Design/Responsive_Navigation_Patterns">Responsive navigation patterns</a></li>
   <li><a href="/en-US/docs/Web/Apps/Design/Installed_app_considerations">Installed app considerations</a></li>
  </ul>
 </div>
 <div class="column-4">
  <h2 id="Components">Components</h2>
  <p>We've got a variety of templates and ready-made components to help speed up app developement.</p>
  <ul>
   <li><a href="/en-US/docs/Web/Apps/Developing/App_templates">Using Mortar templates</a></li>
   <li><a href="/en-US/docs/Web/Apps/Developing/Custom_elements">Custom elements</a></li>
   <li><a href="/en-US/docs/Web/Apps/Developing/Web_components">Web components</a></li>
  </ul>
 </div>
</div>
<div class="column-container">
 <div class="column-4">
  <h2 id="Reference_Apps">Reference Apps</h2>
  <p>A number of sample Open Web Apps we have published for you to download, install, play with and learn from.</p>
  <ul>
   <li><a href="/en-US/docs/Web/Apps/Reference_apps/Chrono">Chrono</a></li>
   <li><a href="/en-US/docs/Web/Apps/Reference_apps/Face_value">Face value</a></li>
   <li><a href="/en-US/docs/Web/Apps/Reference_apps/Roller">Roller</a></li>
  </ul>
 </div>
 <div class="column-4">
  <h2 id="Payments">Payments</h2>
  <p>We provide tailored APIs to allow you to take payments for your apps, including purchased apps and in-app payments.</p>
  <ul>
   <li><a href="/en-US/docs/Web/Apps/Publishing/Marketplace_Payments">Marketplace payments</a></li>
   <li><a href="/en-US/docs/Web/Apps/Publishing/In-app_payments">In-app payments</a></li>
   <li><a href="/en-US/docs/Web/Apps/Publishing/Validating_a_receipt">Validating a receipt</a></li>
  </ul>
 </div>
 <div class="column-4">
  <h2 id="Publishing">Publishing</h2>
  <p>Whether you want to self-publish or distribute your app on our <a href="/en-US/Marketplace">Firefox Marketplace</a>, we've got docs to help.</p>
  <ul>
   <li><a href="/en-US/docs/Web/Apps/Quickstart/Publish/App_publishing_options">App publishing options</a></li>
   <li><a href="/en-US/docs/Web/Apps/Publishing/Submitting_an_app">Submitting an app</a></li>
   <li><a href="/en-US/docs/Web/Apps/Publishing/Packaged_Apps">Packaged apps</a></li>
  </ul>
 </div>
</div>
<div class="column-container">
 <div class="column-half">
  <div class="zone-callout">
   <h2 id="Top_articles">Top articles</h2>
   <ol>
    <li><a href="/en-US/docs/Web/Apps/Quickstart/Build/Your_first_app">Your first app</a></li>
    <li><a href="/en-US/docs/Web/Apps/Quickstart/Design/UI_guidelines">UI Guidelines</a></li>
    <li><a href="/en-US/docs/Web/Apps/Publishing/Submitting_an_app">Submitting an app</a></li>
    <li><a href="/en-US/docs/Web/Apps/Developing/Manifest">Manifest</a></li>
    <li><a href="/en-US/docs/Web/Apps/Developing/Offline">Offline apps</a></li>
   </ol>
  </div>
 </div>
 <div class="column-half">
  <div class="zone-callout">
   <h2 class="Tools" id="Tools" name="Tools">Tools for app developers</h2>
   <ul>
    <li><a href="http://buildingfirefoxos.com/">Building Firefox OS: building blocks</a></li>
    <li><a href="https://marketplace.firefox.com/">Visit the Firefox Marketplace</a></li>
    <li><a href="/en-US/docs/Mozilla/Firefox_OS/Using_Firefox_OS_Simulator">Firefox OS Simulator</a></li>
    <li><a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_App_Manager">App Manager</a></li>
    <li><a href="/en-US/docs/Apps/App_developer_tools">App developer tools</a></li>
   </ul>
  </div>
 </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")}}</p>
<h2 id="Subnav">Subnav</h2>
<ol>
 <li><a href="/en-US/Apps/Quickstart/Build/Intro_to_open_web_apps">Quickstart</a>
  <ol>
   <li><a href="/en-US/Apps/Quickstart/Build/Intro_to_open_web_apps">Introduction to open web apps</a></li>
   <li><a href="/en-US/Apps/Quickstart/Build/Intro_to_Firefox_OS">Introduction to Firefox OS</a></li>
   <li><a href="/en-US/Apps/Quickstart/Design/Concept_A_great_app">What makes a great app?</a></li>
   <li><a href="/en-US/Apps/Quickstart/Design/Design_Principles">Design principles</a></li>
   <li><a href="/en-US/Apps/Quickstart/Design/UI_guidelines">UI guidelines</a></li>
   <li><a href="/en-US/Apps/Quickstart/Build/Your_first_app">Your first app</a></li>
   <li><a href="/en-US/Apps/Quickstart/Build/For_Web_developers">App development for web developers</a></li>
   <li><a href="/en-US/Apps/Quickstart/Build/For_mobile_developers">App development for mobile developers</a></li>
   <li><a href="/en-US/Apps/Quickstart/Build/Developing_app_functionality">Developing app functionality</a></li>
   <li><a href="/en-US/Apps/Quickstart/App_developer_tools">App developer tools</a></li>
  </ol>
 </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/Control_the_display">Display and feedback</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