initial commit

5 files changed, 250 insertions, 0 deletions

diff --git a/files/zh-cn/web_development/index.html b/files/zh-cn/web_development/index.html
new file mode 100644
index 0000000000..3082847803
--- /dev/null
+++ b/files/zh-cn/web_development/index.html
@@ -0,0 +1,95 @@
+---
+title: Web 开发
+slug: Web_Development
+translation_of: Web/Guide
+---
+<p><strong>Web 开发</strong> 包括开发网站和Web应用程序的方方面面。</p>
+<p>在本文中，您将学到创建从简单到复杂的Web站点、使用最新Web技术的高度互动的网站。</p>
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="文档主题">文档主题</h2>
+    <h3 id="技术">技术</h3>
+    <dl>
+     <dt>
+      <a class="internal" href="/zh-CN/docs/Web_Development/Introduction_to_Web_development" title="zh-CN/docs/Web Development/Introduction to Web development">Web 开发介绍</a></dt>
+     <dd>
+      一份介绍怎样开发进行Web开发的指南。</dd>
+     <dt>
+      <a class="internal" href="/zh-CN/docs/HTML" rel="internal">HTML</a></dt>
+     <dd>
+      超文本标记语言是创建网页和其他显示在浏览器的文档的基础语言。</dd>
+     <dt>
+      <a class="internal" href="/zh-CN/docs/CSS" rel="internal">CSS</a></dt>
+     <dd>
+      层叠样式表的强大功能能使您在 Web 上安排布局和页面设计。</dd>
+     <dt>
+      <a class="internal" href="/zh-CN/docs/JavaScript" rel="internal">JavaScript</a></dt>
+     <dd>
+      JavaScript 是最常用的 Web 应用程序开发的脚本语言；它也用于开发基于 Mozilla 的软件。</dd>
+     <dt>
+      <a class="internal" href="/zh-CN/docs/DOM" rel="internal">DOM</a></dt>
+     <dd>
+      文档对象模型是一个 HTML 和 XML 文档的 API，其提供了一个结构化的文档表示以供修改它的可见表示。</dd>
+     <dt>
+      <a class="internal" href="/zh-CN/docs/AJAX" rel="internal">AJAX</a></dt>
+     <dd>
+      AJAX（异步的 JavaScript 与 XML 技术）并非一种技术，而是这两种技术的组合应用；通过 JavaScript 和其他时髦的 Web 技术共同创建动态 Web 应用程序。</dd>
+     <dt>
+      <a class="internal" href="/zh-CN/docs/XHTML" title="zh-CN/docs/XHTML">XHTML</a></dt>
+     <dd>
+      可扩展的超文本标记语言是一个基于 XML 的类 HTML 语言，同 HTML 相比其语法更加严格。</dd>
+     <dt>
+      <a class="internal" href="/zh-CN/docs/SVG" rel="internal">SVG</a></dt>
+     <dd>
+      可缩放矢量图形是一个描述二维矢量图形的 XML 标记语言。</dd>
+    </dl>
+    <h3 id="策略">策略</h3>
+    <dl>
+     <dt>
+      <a class="internal" href="/zh-CN/docs/Web_Standards" title="en-US/docs/Web Standards">Web 标准</a></dt>
+     <dd>
+      了解如何使你的网站或者应用程序通过开放 Web 标准，兼容最大多数用户的访问。</dd>
+     <dt>
+      <a href="/zh-CN/docs/Web_Development/Responsive_Web_design" title="zh-CN/docs/Web development/Responsive Web design">响应性 Web 设计</a></dt>
+     <dd>
+      使用 CSS 在所有硬件平台上呈现相同内容，从手机到宽屏、高分辨率的桌面显示器。</dd>
+     <dt>
+      <a href="/zh-CN/docs/Web_development/Writing_forward-compatible_websites" title="Writing forward-compatible websites">编写向前兼容的网站</a></dt>
+     <dd>
+      建立即使浏览器更新也不会出现问题的网站的最佳实践。</dd>
+     <dt>
+      <a href="/zh-CN/docs/Web_Development/Mobile" title="/en-US/docs/Web development/Mobile">移动 Web 开发</a></dt>
+     <dd>
+      通过一些与面向桌面浏览器开发完全不同的独特方法，来开发面向移动设备的网站。</dd>
+     <dt>
+      <a class="internal" href="/zh-CN/docs/Mozilla_Web_Developer_FAQ" title="en-US/docs/Mozilla Web Developer FAQ">Mozilla Web 开发者常见问题解答</a></dt>
+     <dd>
+      Web开发者经常提的一些问题。当然还有答案喽！</dd>
+    </dl>
+    <p><span class="alllinks"><a href="/zh-CN/docs/tag/Web_Development" title="zh-CN/docs/tag/Web_Development">查看更多...</a></span></p>
+   </td>
+   <td>
+    <h2 class="Community" id="社区">社区</h2>
+    <ul>
+     <li><a class="external" href="http://hacks.mozilla.org" title="http://hacks.mozilla.org">Mozilla Hacks 博客（英文）</a></li>
+     <li><a class="external" href="http://www.whatwg.org/" rel="external nofollow" title="http://www.whatwg.org/">WHAT 工作组</a></li>
+     <li><a class="external" href="http://webdevfeedhouse.com/" rel="external nofollow" title="http://webdevfeedhouse.com/">WebDev FeedHouse（英文）</a></li>
+    </ul>
+    <h2 class="Tools" id="工具">工具</h2>
+    <ul>
+     <li><a href="/zh-CN/docs/Tools" title="zh-CN/docs/Tools">主要工具</a></li>
+     <li><a class="link-https" href="https://addons.mozilla.org/zh-CN/firefox/addon/1843" rel="external nofollow" title="https://addons.mozilla.org/zh-CN/firefox/addon/1843">Firebug 扩展</a></li>
+     <li><a class="link-https" href="https://addons.mozilla.org/zh-CN/firefox/addon/60" rel="external nofollow" title="https://addons.mozilla.org/zh-CN/firefox/addon/60">Web Developer 扩展</a></li>
+     <li><a href="/zh-CN/docs/Venkman" rel="internal">Venkman</a>，一款 JavaScript 调试器</li>
+     <li><a href="/zh-CN/docs/DOM_Inspector" rel="internal" title="zh-CN/docs/DOM Inspector">DOM 查看器</a></li>
+     <li><a href="/zh-CN/docs/Tools/Scratchpad" title="zh-CN/docs/Tools/Scratchpad">暂存器</a></li>
+    </ul>
+    <p><span class="alllinks"><a href="/zh-CN/docs/tag/Web_Development:Tools" title="zh-CN/docs/tag/Web_Development:Tools">查看更多...</a></span></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p> </p>
+<p>{{ languages( { "de": "de/Webentwicklung", "en": "en/Web_Development","es": "es/Desarrollo_Web", "fr": "fr/D\u00e9veloppement_Web", "it": "it/Sviluppo_Web", "ja": "ja/Web_Development", "pl": "pl/Programowanie_WWW" } ) }}</p>
diff --git a/files/zh-cn/web_development/introduction_to_web_development/index.html b/files/zh-cn/web_development/introduction_to_web_development/index.html
new file mode 100644
index 0000000000..9178cb39f5
--- /dev/null
+++ b/files/zh-cn/web_development/introduction_to_web_development/index.html
@@ -0,0 +1,28 @@
+---
+title: Web开发介绍
+slug: Web_Development/Introduction_to_Web_development
+translation_of: Web/Guide/Introduction_to_Web_development
+---
+<p>不论你是刚开始Web开发，还是想学习Web开发，这些链接都能帮助你。至少，立刻我们就能在这儿看到很多链接。</p>
+<div class="note">
+ <strong>Note:</strong> This page is obviously a stub; we need to generate content here.</div>
+<table class="mainpage-table" style="width: 1097px; height: 113px;">
+ <tbody>
+  <tr>
+   <td>
+    <h2 id="文档主题">文档主题</h2>
+    <p>暂无文章，欢迎补充。</p>
+   </td>
+   <td>
+    <h2 id="资源">资源</h2>
+    <dl>
+     <dt>
+      <a class="external" href="http://www.w3schools.com.cn/" title="http://www.w3schools.com.cn/">w3schools</a></dt>
+     <dd>
+      免费Web开发教程，从HTML入门到进阶Web技术。</dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p> </p>
diff --git a/files/zh-cn/web_development/mobile/index.html b/files/zh-cn/web_development/mobile/index.html
new file mode 100644
index 0000000000..3400f80920
--- /dev/null
+++ b/files/zh-cn/web_development/mobile/index.html
@@ -0,0 +1,17 @@
+---
+title: 移动 Web 开发
+slug: Web_Development/Mobile
+tags:
+  - Mobile
+  - NeedsTranslation
+  - TopicStub
+  - Web Development
+translation_of: Web/Guide/Mobile
+---
+<p>开发能在移动设备上浏览的网站需要一些方法来确保网站在移动设备上可以如同在桌面浏览器上一样正常运作。以下的文章介绍了部分方法：</p>
+<ul>
+ <li><a class="vt-p" href="/en/Web_Development/Mobile/Mobile-friendliness" title="/en/Web_development/Mobile/Mobile-friendliness">什么是 mobile-friendliness?</a></li>
+ <li><a class="vt-p" href="/en/Web_Development/Mobile/Separate_sites" title="en/Web_development/Mobile/Separate sites">Separate sites</a></li>
+ <li><a class="vt-p" href="/en/Web_Development/Mobile/Responsive_design" title="/en/Web_development/Mobile/Responsive design">响应式设计</a></li>
+ <li><a class="vt-p" href="/en/Web_development/Mobile/A_hybrid_approach" title="A New Approach to Web Applications (external)">A hybrid approach</a></li>
+</ul>
diff --git a/files/zh-cn/web_development/mobile/responsive_design/index.html b/files/zh-cn/web_development/mobile/responsive_design/index.html
new file mode 100644
index 0000000000..451160d0e2
--- /dev/null
+++ b/files/zh-cn/web_development/mobile/responsive_design/index.html
@@ -0,0 +1,48 @@
+---
+title: 响应式设计
+slug: Web_Development/Mobile/Responsive_design
+translation_of: Web/Progressive_web_apps
+---
+<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/web_development/响应式_web_设计/index.html b/files/zh-cn/web_development/响应式_web_设计/index.html
new file mode 100644
index 0000000000..af96643b53
--- /dev/null
+++ b/files/zh-cn/web_development/响应式_web_设计/index.html
@@ -0,0 +1,62 @@
+---
+title: 响应式 Web 设计
+slug: Web_Development/响应式_Web_设计
+tags:
+  - Web开发
+  - 响应式设计
+translation_of: Web/Progressive_web_apps
+---
+<p>随着越来越多的用户使用移动设备来浏览网站和应用，Web设计人员和开发人员需要确保他们的作品在移动设备上同样能正常运作，并且看上去和在传统台式电脑上一样好。 著名设计师 Luke Wroblewski 主张 "<a class="external" href="http://www.lukew.com/ff/entry.asp?933" title="http://www.lukew.com/ff/entry.asp?933">移动优先</a>" 设计而不是为桌面端设计完之后再考虑移动端。 无论您将移动设备作为主要目标来设计或作为额外目标，您都可以借助强大的CSS来保证同样的内容从手机到宽屏高分辨率显示器上，实现跨全部硬件平台访问和适应。</p>
+
+<p>这种方法被称为“响应式 Web 设计”。它的一些策略包括：:</p>
+
+<ul>
+ <li><strong>流式布局：</strong> 按照浏览器视窗的百分比来设定所有容器的宽度，从而使容器在浏览器窗口大小变化时自动缩放。</li>
+ <li><strong>媒体查询：</strong> 基于显示设备的物理特性（例如：尺寸、分辨率、宽高比、颜色位深等）来调用不同的样式表。</li>
+ <li><strong>流式图片：</strong> 设置图像所占宽度至多为设备的最大宽度。</li>
+</ul>
+
+<h3 id="Firefox_Marketplace_的最低需求">Firefox Marketplace 的最低需求</h3>
+
+<p>如果您提交一个应用到 Firefox OS 或 Firefox for Android 上的Firefox Marketplace，那么这个应用必须响应不同的手机屏幕尺寸和屏幕像素密度。请记住屏幕最小尺寸为 320 * 480 像素。另一个常见的错误是未识别屏幕像素密度，以至于没有相应地调整字体大小和触摸目标。欲了解更多信息， 请参阅 <a href="/en-US/docs/Web/Apps/Publishing/Marketplace_review_criteria" title="/en-US/docs/Web/Apps/Publishing/Marketplace_review_criteria">Marketplace 审查准则</a>。</p>
+
+<h2 id="相关资源">相关资源</h2>
+
+<h3 id="概述">概述</h3>
+
+<ul>
+ <li><a class="external" href="http://www.alistapart.com/articles/responsive-web-design/" title="http://www.alistapart.com/articles/responsive-web-design/">响应式 Web 设计</a>, by Ethan Marcotte</li>
+ <li><a class="external" href="http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/" title="http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/">响应式 Web 设计：初学者入门教程</a>, by Rick Petit</li>
+ <li><a class="external" href="http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/" title="http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/">响应式 Web 设计介绍与应用</a>, by Kayla Knight</li>
+ <li><a class="external" href="http://www.lukew.com/ff/entry.asp?1436" title="http://www.lukew.com/ff/entry.asp?1436">多设备 Web 设计：一种进化</a>, by Luke Wroblewski</li>
+ <li><em>响应式设计工作流</em> by Stephen Hay (book)</li>
+ <li>响应式 Web 设计 - 介绍 </li>
+</ul>
+
+<h3 id="技术文档">技术文档</h3>
+
+<ul>
+ <li><a href="/en/CSS/Media_queries" title="CSS media queries">CSS 媒体查询</a> 参考文档</li>
+ <li><a class="external" href="http://davidwalsh.name/pointer-media-query" title="pointer Media Query">指针媒体查询</a>, by David Walsh</li>
+ <li><a class="external" href="http://css-tricks.com/6731-css-media-queries/" title="http://css-tricks.com/6731-css-media-queries/">使用 CSS 媒体查询响应不同可用空间</a>, by Chris Coyier</li>
+ <li><a class="external" href="http://www.maxdesign.com.au/articles/liquid/" title="http://www.maxdesign.com.au/articles/liquid/">简单流式布局</a>, by Russ Weakley</li>
+ <li><a class="external" href="http://unstoppablerobotninja.com/entry/fluid-images/" title="http://unstoppablerobotninja.com/entry/fluid-images/">流式图像</a>, by Ethan Marcotte</li>
+ <li><a class="external" href="http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/" title="http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/">为触摸屏而设计</a>, by Chris Kemm</li>
+ <li><a class="external" href="http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/" title="http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/">响应式 Web 设计技术、工具以及设计方案</a>, by Smashing Editorial Team</li>
+</ul>
+
+<h3 id="工具">工具</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Responsive_Design_View" title="/en-US/docs/Tools/Responsive_Design_View">Responsive Design View</a> in Firefox</li>
+</ul>
+
+<h3 id="样例">样例</h3>
+
+<ul>
+ <li><a href="/en-US/demos/devderby/2011/october" title="https://developer.mozilla.org/en-US/demos/devderby/2011/october/">DevDerby demos of CSS 媒体查询</a></li>
+ <li><a class="external" href="http://designshack.net/articles/css/20-amazing-examples-of-using-media-queries-for-responsive-web-design" title="http://designshack.net/articles/css/20-amazing-examples-of-using-media-queries-for-responsive-web-design">20个使用媒体查询完成的响应式 Web 设计的震撼样例</a>, by Joshua Johnson</li>
+ <li><a class="external" href="http://designmodo.com/responsive-design-examples/" title="http://designmodo.com/responsive-design-examples/">响应式设计：50个样例和最佳实践</a></li>
+</ul>
+
+<h3 id="sect1"></h3>