unslug zh-cn: move

3 files changed, 185 insertions, 0 deletions

diff --git a/files/zh-cn/conflicting/web/progressive_web_apps/index.html b/files/zh-cn/conflicting/web/progressive_web_apps/index.html
new file mode 100644
index 0000000000..ca256085b4
--- /dev/null
+++ b/files/zh-cn/conflicting/web/progressive_web_apps/index.html
@@ -0,0 +1,49 @@
+---
+title: 响应式设计
+slug: Web_Development/Mobile/Responsive_design
+translation_of: Web/Progressive_web_apps
+translation_of_original: Web/Guide/Responsive_design
+---
+<p>在解决对桌面和移动环境开发网站这个问题上，与<a href="/en/Web_Development/Mobile/Separate_sites" title="en/Web development/Mobile/Separate sites">分离网站</a>的方法相反，一种相对较新（其实相当<a class="external" href="http://www.alistapart.com/articles/dao/">古老</a>）的方法渐渐流行起来：摒弃用户代理检测，而是在客户端根据浏览器的能力进行页面变化。这种方法最早是由Ethan Marcotte在他为<a class="external" href="http://www.alistapart.com/">A List Apart</a>所写的文章中提出的，也就是我们所熟知的<a class="external" href="http://www.alistapart.com/articles/responsive-web-design/">响应式设计</a>。和分离网站设计方式一样，响应式设计也有自己的优势和弊端。</p>
+<h2 id="优势">优势</h2>
+<p>尽管一开始这种方法并不是为了创建移动端网站而提出的，但在近一段时间以来，作为分离式移动端网站的替代者，响应式设计作为一种向移动端友好的方向迈进的方式而备受关注。</p>
+<ol>
+ <li>因为无需为不同的设备维护不同的网站，这种方式节省了时间和金钱。</li>
+ <li>响应式设计为每一个页面提供了一个单独且独有的URL。</li>
+ <li>社会化分享统计（Facebook Likes, Tweets, +1 on Google plus）也不会割离开，因为移动端和桌面端使用的都是一个唯一的URL。</li>
+ <li>响应式设计无需考虑用户代理的检测。</li>
+</ol>
+<p>这一方法有着许多非常好的方面。因为其不需要进行用户代理检测，相比于分离式网站方法，响应式设计更加具有韧性并经得起未来发展的考验。</p>
+<h2 id="弊端">弊端</h2>
+<p>当然，这一方法并非没有其局限性。因为内容必须在客户端使用Javascript进行调整，所以变化的内容要尽可能的最少。一般来说，当你尝试编写两组不同的Javascript来操作同一个DOM时，事情就会变得很麻烦。这也是为什么网络应用往往不采用这种方法的一个很重要的原因。</p>
+<p>如果你的网站还没有支持<a class="external" href="http://www.smashingmagazine.com/2008/06/26/flexible-layouts-challenge-for-the-future/">弹性布局</a>，那么将你的一个已有网站重新做响应式设计就必须重写你的样式。但是，这也有可能因祸得福。让你的网站成为响应式的设计，可能是一个升级和整理网站CSS的好机会。</p>
+<p>最后，由于增加了脚本和样式的代码量，响应式的网站的性能可能会比分离式网站要差。尽管通过将脚本和样式进行合理的重构能够节省出一些资源，但性能的下降是无法避免的。</p>
+<h2 id="何时选择响应式设计">何时选择响应式设计</h2>
+<p><a href="/@api/deki/files/5894/=teixido_responsive-300x177.png" title="teixido_responsive-300x177.png"><img align="right" alt="teixido_responsive-300x177.png" class="internal rwrap" src="/@api/deki/files/5894/=teixido_responsive-300x177.png?size=webview" style="width: 300px; height: 177px;"></a>正如上面所提到的，因为内容的改变很困难，当你使用响应式设计的时候，你无法给予用户一个有着显著区别的移动端体验，除非你大幅地增加代码的复杂度。也就是说，如果网站的桌面端和移动端内容非常相似，那么响应式设计就是一个很好的选择。那些以文档为中心的网站，他们在不同的设备上的主要用途都不会改变，比如一个产品页面，对于这种网站响应式的设计就非常的适合。你会注意到下面的例子全都是博客和宣传页面！</p>
+<h2 id="举例">举例</h2>
+<p>尽管它还没有像分离式网站那么流行，但每天都有很多网站开始应用这项技术。幸运的是，因为所有的代码都是在客户端的，如果你想了解一个网站是如何实现这项技术的，只需要简单地访问该网站并查看他的页面源代码即可。下面是一些网站的例子：</p>
+<ul>
+ <li><a class="external" href="http://teixido.co/">http://teixido.co/</a> – 我最喜欢的一个自适应设计，在上面也有图片展示！</li>
+ <li><a class="external" href="http://adactio.com/journal/1696">http://adactio.com/journal/1696</a> – 另一篇很好的文章，上面有各种例子的链接。</li>
+ <li><a class="external" href="http://thinkvitamin.com/">http://thinkvitamin.com/</a></li>
+ <li><a class="external" href="http://stephencaver.com/">http://stephencaver.com/</a></li>
+ <li><a class="external" href="http://hicksdesign.co.uk/">http://hicksdesign.co.uk/</a></li>
+</ul>
+<p>尽管是一个相对较新的方法，响应式设计也逐渐积累了许多良好的经验。如果你正打算设计一个响应式网站，通常值得<a class="external" href="http://www.lukew.com/ff/entry.asp?1117">先创建一个小屏幕的设计</a>，使得移动端的限制因素在一开始设计的时候就被考虑到。并且，这样更利于为你的样式使用渐进增强的技术，而不是使用Media Queries来隐藏已有网站中的元素。这样的话，那些老的不支持Media Queries的浏览器依旧能显示正确的布局。根据这一方法来设计的出色示范可以看<a class="external" href="http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu">这里</a>。</p>
+<h2 id="开发移动网站的途径">开发移动网站的途径</h2>
+<p>想了解移动平台开发的相关背景和其他方法，请参看以下文章。</p>
+<ul>
+ <li><a href="/en/Web_Development/Mobile/Mobile-friendliness" title="XML Web Services">友好型移动设计是什么概念?</a></li>
+ <li><a href="/en/Web_Development/Mobile/Separate_sites" title="en/Web development/Mobile/Hybrid approach">独立网站</a></li>
+ <li><a href="/en/Web_development/Mobile/A_hybrid_approach" title="en/Web development/Mobile/Hybrid approach">复合方法</a></li>
+ <li><a href="/en/docs/Web/Apps/app_layout/Responsive_design_versus_adaptive_design" title="en/Web development/Mobile/Hybrid approach">响应式设计 VS. 自适应设计</a></li>
+</ul>
+<h2 id="参考">参考</h2>
+<ul>
+ <li>其他<a href="/en/Web_Development/Responsive_Web_design" title="Responsive Web design">自适应网站设计</a>相关资料</li>
+</ul>
+<div class="originaldocinfo">
+ <font face="Georgia, Times, Times New Roman, serif" size="3"><b>原稿信息</b></font><br>
+ <p>Originally published on 27 May, 2011 on the Mozilla Webdev blog as "<a class="external" href="http://blog.mozilla.com/webdev/2011/05/27/approaches-to-mobile-web-development-part-3-responsive-design/" title="http://blog.mozilla.com/webdev/2011/05/27/approaches-to-mobile-web-development-part-3-responsive-design/">Approaches to Mobile Web Development Part 3 - Responsive Design</a>", by Jason Grlicky.</p>
+</div>
+<p> </p>
diff --git a/files/zh-cn/conflicting/web/progressive_web_apps/introduction/index.html b/files/zh-cn/conflicting/web/progressive_web_apps/introduction/index.html
new file mode 100644
index 0000000000..809b1edb38
--- /dev/null
+++ b/files/zh-cn/conflicting/web/progressive_web_apps/introduction/index.html
@@ -0,0 +1,58 @@
+---
+title: 渐进式webApp优势
+slug: Web/Progressive_web_apps/优势
+translation_of: Web/Progressive_web_apps/Introduction#Advantages_of_web_applications
+translation_of_original: Web/Progressive_web_apps/Advantages
+---
+<p class="summary">以下是渐进式webApp所有的优势清单</p>
+
+<h2 id="Discoverable">Discoverable<img alt="" src="https://mdn.mozillademos.org/files/12654/discoverable.svg" style="float: right; height: 40px; width: 38px;"></h2>
+
+<p>The eventual aim is that web apps should have better representation in search engines, be easier to expose, catalog and rank, and have metadata usable by browsers to give them special capabilities.</p>
+
+<p>Some of the capabilities have already been enabled on certain web-based platforms by proprietary technologies like <a href="http://ogp.me/">Open Graph</a>, which provides a format for specifying similar metadata in the HTML <code>&lt;head&gt;</code> using meta tags.</p>
+
+<p>The relevant web standard here is the <a href="/en-US/docs/Web/Manifest">Web app manifest</a>, which defines features of an app such as name, icon, splash screen, and theme colors in a JSON-formatted manifest file. This is for use in contexts such as app listings and device home screens.</p>
+
+<ul>
+</ul>
+
+<h2 id="Installable">Installable<img alt="" src="https://mdn.mozillademos.org/files/12656/installable.svg" style="float: right; height: 40px; width: 38px;"></h2>
+
+<p>A core part of the apps experience is for users to have app icons on their home screen, and be able to tap to open apps into their own native container that feels nicely integrated with the underlying platform.</p>
+
+<p>Modern web apps can have this native app feel via properties set inside the Web app manifest, and via a feature available in modern smartphone browsers called <a href="/en-US/docs/Web/Apps/Progressive/Add_to_home_screen">Add to home screen</a>.</p>
+
+<h2 id="Linkable">Linkable<img alt="" src="https://mdn.mozillademos.org/files/12658/linkable.svg" style="float: right; height: 40px; width: 38px;"></h2>
+
+<p>One of the most powerful features of the Web is to be able to link to an app at a specific URL — no app store needed, no complex installation process. This is how it has always been.</p>
+
+<h2 id="Network_independent">Network independent<img alt="" src="https://mdn.mozillademos.org/files/12660/network-independent.svg" style="float: right; height: 40px; width: 38px;"></h2>
+
+<p>Modern web apps can work when the network is unreliable, or even non-existent. The basic ideas behind network independence are to be able to:</p>
+
+<ul>
+ <li>Revisit a site and get its contents even if no network is available.</li>
+ <li>Browse any kind of content the user has previously visited at least once, even under situations of poor connectivity.</li>
+ <li>Control what is shown to the user in situations where there is no connectivity.</li>
+</ul>
+
+<p>This is achieved by a combination of technologies — <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a> to control page requests (for example storing them offline), the <a href="/en-US/docs/Web/API/Cache">Cache API</a> for storing responses to network requests offline (very useful for storing site assets), and client-side data storage technologies such as <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage</a> and <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> to store application data offline.</p>
+
+<h2 id="Progressive">Progressive<img alt="" src="https://mdn.mozillademos.org/files/12662/progressive.svg" style="float: right; height: 40px; width: 38px;"></h2>
+
+<p>Modern web apps can be developed to provide a super cool experience to fully capable browsers, and an acceptable (although not quite as shiny) experience to less capable browsers. We've been doing this for years with best practices such as <a href="/en-US/docs/Glossary/Progressive_Enhancement">progressive enhancement</a>.</p>
+
+<h2 id="Re-engageable">Re-engageable<img alt="" src="https://mdn.mozillademos.org/files/12666/re-engageable.svg" style="float: right; height: 40px; width: 38px;"></h2>
+
+<p>One major advantage of native platforms is the ease with which users can be re-engaged by updates and new content, even when they aren't looking at the app or using their devices. Modern web apps can now do this too, using new technologies such as <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service Workers</a> for controlling pages, the <a href="/en-US/docs/Web/API/Push_API">Web Push API</a> for sending updates straight from server to app via a service worker, and the <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> for generating system notifications to help engage users when they're not in the browser.</p>
+
+<h2 id="Responsive">Responsive<img alt="" src="https://mdn.mozillademos.org/files/12650/responsive.svg" style="float: right; height: 40px; width: 38px;"></h2>
+
+<p>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.</p>
+
+<h2 id="Safe">Safe<img alt="" src="https://mdn.mozillademos.org/files/12664/safe.svg" style="float: right; height: 47px; width: 38px;"></h2>
+
+<p>The web platform provides a secure delivery mechanism that prevents snooping and ensures content hasn’t been tampered with — as long as you take advantage of HTTPS and develop your apps with security in mind. In addition, you can verify the true nature of a PWA by confirming that it is at the correct URL, whereas apps in apps stores can often look like one thing, but be another (<a href="https://twitter.com/andreasbovens/status/926965095296651264">example</a>).</p>
+
+<p> </p>
diff --git a/files/zh-cn/conflicting/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.html b/files/zh-cn/conflicting/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.html
new file mode 100644
index 0000000000..3177fc1c29
--- /dev/null
+++ b/files/zh-cn/conflicting/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.html
@@ -0,0 +1,78 @@
+---
+title: Responsive design
+slug: Web/Progressive_web_apps/Responsive
+tags:
+  - Media Queries
+  - PWA
+  - Progressive web apps
+  - Responsive web design
+  - viewport
+translation_of: Web/Progressive_web_apps/Responsive/responsive_design_building_blocks
+translation_of_original: Web/Progressive_web_apps/Responsive
+---
+<div class="column-container summary">
+<div class="column-11"><span class="seoSummary">响应式Web应用使用媒体查询和viewport等技术，以确保它们的页面适配任何设备，比如：桌面、移动手机、平板，或者其他新的设备。</span></div>
+
+<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12650/responsive.svg"></div>
+</div>
+
+<h2 id="核心指南">核心指南</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Apps/Modern/Responsive/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/docs/Web/Apps/Modern/Responsive/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>
+</dl>
+
+<h2 id="技术">技术</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Technology</th>
+   <th scope="col">Description</th>
+   <th scope="col">Support summary</th>
+   <th scope="col">Latest spec</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Media_Queries">Media queries</a></td>
+   <td>Defines expressions allowing styling to be selectively applied to content depending on viewport size, resolution, orientation, etc.</td>
+   <td>Widespread across modern browsers (<a href="/en-US/docs/Web/CSS/Media_Queries#Browser_compatibility">more detail</a>)</td>
+   <td><a href="https://drafts.csswg.org/mediaqueries-4/">Media Queries Level 4</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@viewport">@viewport</a>/<a href="/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">viewport meta tag</a></td>
+   <td>Controls viewport settings, primarily on mobile devices.</td>
+   <td>@viewport: Experimental (<a href="/en-US/docs/Web/CSS/@viewport#Browser_compatibility">more detail</a>)<br>
+    Viewport meta tag: Widespread across modern mobile devices</td>
+   <td><a href="https://drafts.csswg.org/css-device-adapt/#the-atviewport-rule">CSS Device Adaptation Module Level 1</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
+   <td>A very useful CSS feature for creating flexible, responsive layouts.</td>
+   <td>Widespread across modern browsers (<a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout#Browser_compatibility">more detail</a>)</td>
+   <td><a href="https://drafts.csswg.org/css-flexbox-1/">CSS Flexible Box Layout Module Level 1</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="工具">工具</h2>
+
+<dl>
+ <dt><a href="https://modernizr.com/">Modernizr</a></dt>
+ <dd>A feature detection library for applying different CSS and JS to your page depending on whether certain CSS/JS features are supported.</dd>
+ <dt><a href="https://code.google.com/archive/p/css3-mediaqueries-js/">css3-mediaqueries-js</a></dt>
+ <dd>A JavaScript polyfill to add Media Query support to old versions of IE (5+.)</dd>
+</dl>
+
+<h2 id="参见">参见</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Apps/Modern/Responsive/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/docs/Web/Apps/Modern/Responsive/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>
+</dl>