diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:56:40 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:56:40 +0100 |
commit | 310fd066e91f454b990372ffa30e803cc8120975 (patch) | |
tree | d5d900deb656a5da18e0b60d00f0db73f3a2e88e /files/zh-cn/web_development | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-310fd066e91f454b990372ffa30e803cc8120975.tar.gz translated-content-310fd066e91f454b990372ffa30e803cc8120975.tar.bz2 translated-content-310fd066e91f454b990372ffa30e803cc8120975.zip |
unslug zh-cn: move
Diffstat (limited to 'files/zh-cn/web_development')
4 files changed, 0 insertions, 191 deletions
diff --git a/files/zh-cn/web_development/index.html b/files/zh-cn/web_development/index.html deleted file mode 100644 index ef8d7dac56..0000000000 --- a/files/zh-cn/web_development/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Web 开发 -slug: Web_Development -translation_of: Web/Guide -translation_of_original: Web_Development ---- -<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 deleted file mode 100644 index 9178cb39f5..0000000000 --- a/files/zh-cn/web_development/introduction_to_web_development/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -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 deleted file mode 100644 index ac53f993c1..0000000000 --- a/files/zh-cn/web_development/mobile/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: 移动 Web 开发 -slug: Web_Development/Mobile -tags: - - Mobile - - NeedsTranslation - - TopicStub - - Web Development -translation_of: Web/Guide/Mobile -translation_of_original: Web_Development/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 deleted file mode 100644 index ca256085b4..0000000000 --- a/files/zh-cn/web_development/mobile/responsive_design/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -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> |