initial commit

4 files changed, 87 insertions, 0 deletions

diff --git a/files/th/archive/apps/design/index.html b/files/th/archive/apps/design/index.html
new file mode 100644
index 0000000000..6177bbf1c3
--- /dev/null
+++ b/files/th/archive/apps/design/index.html
@@ -0,0 +1,34 @@
+---
+title: Designing Open Web Apps
+slug: Archive/Apps/Design
+tags:
+  - Apps
+  - CSS
+  - Design
+  - Examples
+  - Guide
+  - Layout
+  - Mobile
+  - NeedsTranslation
+  - Styleguides
+  - TopicStub
+  - UX
+  - Usability
+  - Web Development
+  - patterns
+translation_of: Archive/Apps/Design
+---
+<div class="summary">
+<p>In this section, we'll introduce design and UX principles to incorporate into your Open Web Apps. In an effort to help you kickstart your project, we have included links to relevant examples and style guides.</p>
+</div>
+
+<h2 id="General_Web_app_design">General Web app design</h2>
+
+<p>The items under this section apply generally to Web app design.</p>
+
+<dl>
+	<dt><a href="/en-US/Apps/Design/Planning">Planning</a></dt>
+	<dd>The articles in this section provide information on planning a successful Web app, including high level planning ideas and general design principles.</dd>
+	<dt><a href="/en-US/Apps/Design/UI_layout_basics">UI layout basics</a></dt>
+	<dd>These articles provide guides and theory behind implementing effective layouts for Open Web Apps, including responsive design, flexible boxes, etc.</dd>
+</dl>
diff --git a/files/th/archive/apps/design/ui_layout_basics/index.html b/files/th/archive/apps/design/ui_layout_basics/index.html
new file mode 100644
index 0000000000..e9b9d4c5a4
--- /dev/null
+++ b/files/th/archive/apps/design/ui_layout_basics/index.html
@@ -0,0 +1,29 @@
+---
+title: UI layout basics
+slug: Archive/Apps/Design/UI_layout_basics
+tags:
+  - Design
+  - Layouts
+  - NeedsTranslation
+  - TopicStub
+  - UI
+translation_of: Archive/Apps/Design/UI_layout_basics
+---
+<div class="summary">
+<p>Guides and theory behind implementing effective layouts for Open Web Apps.</p>
+</div>
+
+<dl>
+ <dt><a href="/en-US/Apps/Design/UI_layout_basics/responsive_design_building_blocks">The building blocks of responsive design</a></dt>
+ <dd>Learn the basics of responsive design, an essential topic for modern app layout.</dd>
+ <dt><a href="/en-US/Apps/Design/UI_layout_basics/Responsive_design_versus_adaptive_design">Responsive design versus adaptive design</a></dt>
+ <dd>Demystifying the terms "responsive" and "adaptive", and how they relate.</dd>
+ <dt><a href="/en-US/Apps/Design/UI_layout_basics/Mobile_First">Mobile first</a></dt>
+ <dd>Often when creating responsive application layouts, it makes sense to create the mobile layout as the default, and build wider layouts on top.</dd>
+ <dt><a href="/en-US/Apps/Design/UI_layout_basics/Graphics_for_responsive_sites">Graphics for responsive sites</a></dt>
+ <dd>Ideas to keep in mind when designing graphics for responsive sites and applications.</dd>
+ <dt><a href="/en-US/Apps/Design/UI_layout_basics/Responsive_Navigation_Patterns">Responsive navigation patterns</a></dt>
+ <dd>How do you make a UI that looks and works as great on a smartphone as it does on the desktop? Learn how to design UIs that change to fit your user's screen.</dd>
+ <dt><a href="/en-US/Web/Guide/CSS/Flexible_boxes">Flexible boxes</a></dt>
+ <dd>Flexbox is a very useful CSS feature for flexible, responsive layouts.</dd>
+</dl>
diff --git a/files/th/archive/apps/design/ui_layout_basics/responsive_design_versus_adaptive_design/index.html b/files/th/archive/apps/design/ui_layout_basics/responsive_design_versus_adaptive_design/index.html
new file mode 100644
index 0000000000..46955e9f20
--- /dev/null
+++ b/files/th/archive/apps/design/ui_layout_basics/responsive_design_versus_adaptive_design/index.html
@@ -0,0 +1,10 @@
+---
+title: Responsive design versus adaptive design
+slug: Archive/Apps/Design/UI_layout_basics/Responsive_design_versus_adaptive_design
+translation_of: Archive/Apps/Design/UI_layout_basics/Responsive_design_versus_adaptive_design
+---
+<p><font><font>ทั้งความพยายามในการออกแบบที่ตอบสนองและปรับตัวได้เพื่อเพิ่มประสิทธิภาพประสบการณ์ผู้ใช้ในอุปกรณ์ต่าง ๆ ปรับขนาดวิวพอร์ตที่แตกต่างกันความละเอียดบริบทการใช้งานกลไกการควบคุมและอื่น ๆ</font></font></p>
+
+<p><font><font>การออกแบบที่ตอบสนองต่อการทำงานบนหลักการของความยืดหยุ่น - เว็บไซต์ของเหลวเดียวที่สามารถดูดีบนอุปกรณ์ใด ๆ </font><font>เว็บไซต์ตอบสนองใช้การสืบค้นสื่อกริดที่ยืดหยุ่นและรูปภาพตอบสนองเพื่อสร้างประสบการณ์ผู้ใช้ที่ยืดหยุ่นและเปลี่ยนแปลงตามปัจจัยหลายประการ</font></font></p>
+
+<p><font><font>การออกแบบที่ปรับเปลี่ยนได้นั้นมีความหมายเหมือนกับนิยามของการปรับปรุงแบบก้าวหน้า </font><font>แทนที่จะเป็นการออกแบบที่ยืดหยุ่นเพียงแบบเดียวการออกแบบแบบปรับได้จะตรวจจับอุปกรณ์และคุณสมบัติอื่น ๆ จากนั้นให้คุณสมบัติและรูปแบบที่เหมาะสมโดยยึดตามขนาดชุดวิวพอร์ตที่กำหนดไว้ล่วงหน้าและคุณสมบัติอื่น ๆ</font></font></p>
diff --git a/files/th/archive/apps/index.html b/files/th/archive/apps/index.html
new file mode 100644
index 0000000000..dca7e09fea
--- /dev/null
+++ b/files/th/archive/apps/index.html
@@ -0,0 +1,14 @@
+---
+title: Apps
+slug: Archive/Apps
+tags:
+  - Apps
+  - Firefox OS
+  - NeedsTranslation
+  - TopicStub
+  - Web
+translation_of: Archive/Apps
+---
+<p class="summary">This page includes archived content for Apps, including obsolete web app content, Firefox OS app-related content, and so forth.</p>
+
+<dl><dt class="landingPageList"><a href="/en-US/docs/Archive/Apps/Advanced_topics">Advanced topics</a></dt><dd class="landingPageList">These articles provide extra information on more advanced Open Web Apps topics. Topics such as app architecture documentation to help with the design and implementation of open web apps and other documentation for creating a store for selling and distributing open web apps.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Apps/Reference">App Development API Reference</a></dt><dd class="landingPageList">Technical review completed. Editorial review completed.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Apps/Design">Designing Open Web Apps</a></dt><dd class="landingPageList">The items under this section apply generally to Web app design.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Apps/Graphics_and_UX">Graphics and UX</a></dt><dd class="landingPageList">When creating Open Web Apps, you need to give a lot of consideration to the look and feel, user experience and workflow of your applications. In previous parts of this material we looked at application planning and flexible layouts for applications, and in this section we will go further, looking at both general patterns and design techniques that work for Open Web Apps, and specific techniques and assets that will help you put together great-looking Firefox OS apps that match the experience of the device's default applications.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Apps/Architecture">Open web app architecture</a></dt><dd class="landingPageList">Apps can be installed from the server that hosts them ("self-hosting") or from a store. Mozilla launched the Firefox Marketplace in a test mode for apps in 2012. Other third-party app stores are also possible using this architecture. Apps can be free or paid. Stores can support validation of purchases to ensure that apps are run only by users who purchased them. The Firefox Marketplace will support this.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Apps/Rec_Room_-Animation_and_Graphics">Rec Room - Animation and Graphics</a></dt><dd class="landingPageList">There are various tools found all around the web for creating animations and graphics for your work. In this article, we will go over a few of these options so that you can use to make your project stand out! For example, CSS is one way to apply animations to HTML elements, while Chartist is a great tool for creating graphs and charts.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Apps/Tools_and_frameworks">Tools and frameworks</a></dt><dd class="landingPageList"></dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Apps/App_validator">Validating web apps with the App Validator</a></dt><dd class="landingPageList">Some checks that the validator performs include:</dd></dl>