From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web_development/index.html | 95 ++++++++++++++++++++++ .../introduction_to_web_development/index.html | 28 +++++++ files/zh-cn/web_development/mobile/index.html | 17 ++++ .../mobile/responsive_design/index.html | 48 +++++++++++ .../index.html" | 62 ++++++++++++++ 5 files changed, 250 insertions(+) create mode 100644 files/zh-cn/web_development/index.html create mode 100644 files/zh-cn/web_development/introduction_to_web_development/index.html create mode 100644 files/zh-cn/web_development/mobile/index.html create mode 100644 files/zh-cn/web_development/mobile/responsive_design/index.html create mode 100644 "files/zh-cn/web_development/\345\223\215\345\272\224\345\274\217_web_\350\256\276\350\256\241/index.html" (limited to 'files/zh-cn/web_development') 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 +--- +

Web 开发 包括开发网站和Web应用程序的方方面面。

+

在本文中，您将学到创建从简单到复杂的Web站点、使用最新Web技术的高度互动的网站。

+ + + + + + + +
+

文档主题

+

技术

+
+
+ Web 开发介绍
+
+ 一份介绍怎样开发进行Web开发的指南。
+
+ HTML
+
+ 超文本标记语言是创建网页和其他显示在浏览器的文档的基础语言。
+
+ CSS
+
+ 层叠样式表的强大功能能使您在 Web 上安排布局和页面设计。
+
+ JavaScript
+
+ JavaScript 是最常用的 Web 应用程序开发的脚本语言；它也用于开发基于 Mozilla 的软件。
+
+ DOM
+
+ 文档对象模型是一个 HTML 和 XML 文档的 API，其提供了一个结构化的文档表示以供修改它的可见表示。
+
+ AJAX
+
+ AJAX（异步的 JavaScript 与 XML 技术）并非一种技术，而是这两种技术的组合应用；通过 JavaScript 和其他时髦的 Web 技术共同创建动态 Web 应用程序。
+
+ XHTML
+
+ 可扩展的超文本标记语言是一个基于 XML 的类 HTML 语言，同 HTML 相比其语法更加严格。
+
+ SVG
+
+ 可缩放矢量图形是一个描述二维矢量图形的 XML 标记语言。
+
+

策略

+
+
+ Web 标准
+
+ 了解如何使你的网站或者应用程序通过开放 Web 标准，兼容最大多数用户的访问。
+
+ 响应性 Web 设计
+
+ 使用 CSS 在所有硬件平台上呈现相同内容，从手机到宽屏、高分辨率的桌面显示器。
+
+ 编写向前兼容的网站
+
+ 建立即使浏览器更新也不会出现问题的网站的最佳实践。
+
+ 移动 Web 开发
+
+ 通过一些与面向桌面浏览器开发完全不同的独特方法，来开发面向移动设备的网站。
+
+ Mozilla Web 开发者常见问题解答
+
+ Web开发者经常提的一些问题。当然还有答案喽！
+
+

查看更多...

+ 		+

社区

+ +

工具

+ +

查看更多...

+
+

 

+

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

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 +--- +

不论你是刚开始Web开发，还是想学习Web开发，这些链接都能帮助你。至少，立刻我们就能在这儿看到很多链接。

+
+ Note: This page is obviously a stub; we need to generate content here.
+ + + + + + + +
+

文档主题

+

暂无文章，欢迎补充。

+ 		+

资源

+
+
+ w3schools
+
+ 免费Web开发教程，从HTML入门到进阶Web技术。
+
+
+

 

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 +--- +

开发能在移动设备上浏览的网站需要一些方法来确保网站在移动设备上可以如同在桌面浏览器上一样正常运作。以下的文章介绍了部分方法：

+ 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 +--- +

在解决对桌面和移动环境开发网站这个问题上，与分离网站的方法相反，一种相对较新（其实相当古老）的方法渐渐流行起来：摒弃用户代理检测，而是在客户端根据浏览器的能力进行页面变化。这种方法最早是由Ethan Marcotte在他为A List Apart所写的文章中提出的，也就是我们所熟知的响应式设计。和分离网站设计方式一样，响应式设计也有自己的优势和弊端。

+

优势

+

尽管一开始这种方法并不是为了创建移动端网站而提出的，但在近一段时间以来，作为分离式移动端网站的替代者，响应式设计作为一种向移动端友好的方向迈进的方式而备受关注。

+
    +
  1. 因为无需为不同的设备维护不同的网站，这种方式节省了时间和金钱。
    2. +
  2. 响应式设计为每一个页面提供了一个单独且独有的URL。
    3. +
  3. 社会化分享统计（Facebook Likes, Tweets, +1 on Google plus）也不会割离开，因为移动端和桌面端使用的都是一个唯一的URL。
    4. +
  4. 响应式设计无需考虑用户代理的检测。
    5. +
+

这一方法有着许多非常好的方面。因为其不需要进行用户代理检测，相比于分离式网站方法，响应式设计更加具有韧性并经得起未来发展的考验。

+

弊端

+

当然，这一方法并非没有其局限性。因为内容必须在客户端使用Javascript进行调整，所以变化的内容要尽可能的最少。一般来说，当你尝试编写两组不同的Javascript来操作同一个DOM时，事情就会变得很麻烦。这也是为什么网络应用往往不采用这种方法的一个很重要的原因。

+

如果你的网站还没有支持弹性布局，那么将你的一个已有网站重新做响应式设计就必须重写你的样式。但是，这也有可能因祸得福。让你的网站成为响应式的设计，可能是一个升级和整理网站CSS的好机会。

+

最后，由于增加了脚本和样式的代码量，响应式的网站的性能可能会比分离式网站要差。尽管通过将脚本和样式进行合理的重构能够节省出一些资源，但性能的下降是无法避免的。

+

何时选择响应式设计

+

teixido_responsive-300x177.png正如上面所提到的，因为内容的改变很困难，当你使用响应式设计的时候，你无法给予用户一个有着显著区别的移动端体验，除非你大幅地增加代码的复杂度。也就是说，如果网站的桌面端和移动端内容非常相似，那么响应式设计就是一个很好的选择。那些以文档为中心的网站，他们在不同的设备上的主要用途都不会改变，比如一个产品页面，对于这种网站响应式的设计就非常的适合。你会注意到下面的例子全都是博客和宣传页面！

+

举例

+

尽管它还没有像分离式网站那么流行，但每天都有很多网站开始应用这项技术。幸运的是，因为所有的代码都是在客户端的，如果你想了解一个网站是如何实现这项技术的，只需要简单地访问该网站并查看他的页面源代码即可。下面是一些网站的例子：

+ +

尽管是一个相对较新的方法，响应式设计也逐渐积累了许多良好的经验。如果你正打算设计一个响应式网站，通常值得先创建一个小屏幕的设计，使得移动端的限制因素在一开始设计的时候就被考虑到。并且，这样更利于为你的样式使用渐进增强的技术，而不是使用Media Queries来隐藏已有网站中的元素。这样的话，那些老的不支持Media Queries的浏览器依旧能显示正确的布局。根据这一方法来设计的出色示范可以看这里。

+

开发移动网站的途径

+

想了解移动平台开发的相关背景和其他方法，请参看以下文章。

+ +

参考

+ +
+ 原稿信息
+

Originally published on 27 May, 2011 on the Mozilla Webdev blog as "Approaches to Mobile Web Development Part 3 - Responsive Design", by Jason Grlicky.

+
+

 

diff --git "a/files/zh-cn/web_development/\345\223\215\345\272\224\345\274\217_web_\350\256\276\350\256\241/index.html" "b/files/zh-cn/web_development/\345\223\215\345\272\224\345\274\217_web_\350\256\276\350\256\241/index.html" new file mode 100644 index 0000000000..af96643b53 --- /dev/null +++ "b/files/zh-cn/web_development/\345\223\215\345\272\224\345\274\217_web_\350\256\276\350\256\241/index.html" @@ -0,0 +1,62 @@ +--- +title: 响应式 Web 设计 +slug: Web_Development/响应式_Web_设计 +tags: + - Web开发 + - 响应式设计 +translation_of: Web/Progressive_web_apps +--- +

随着越来越多的用户使用移动设备来浏览网站和应用，Web设计人员和开发人员需要确保他们的作品在移动设备上同样能正常运作，并且看上去和在传统台式电脑上一样好。 著名设计师 Luke Wroblewski 主张 "移动优先" 设计而不是为桌面端设计完之后再考虑移动端。 无论您将移动设备作为主要目标来设计或作为额外目标，您都可以借助强大的CSS来保证同样的内容从手机到宽屏高分辨率显示器上，实现跨全部硬件平台访问和适应。

+ +

这种方法被称为“响应式 Web 设计”。它的一些策略包括：:

+ + + +

Firefox Marketplace 的最低需求

+ +

如果您提交一个应用到 Firefox OS 或 Firefox for Android 上的Firefox Marketplace，那么这个应用必须响应不同的手机屏幕尺寸和屏幕像素密度。请记住屏幕最小尺寸为 320 * 480 像素。另一个常见的错误是未识别屏幕像素密度，以至于没有相应地调整字体大小和触摸目标。欲了解更多信息， 请参阅 Marketplace 审查准则。

+ +

相关资源

+ +

概述

+ + + +

技术文档

+ + + +

工具

+ + + +

样例

+ + + +

-- cgit v1.2.3-54-g00ecf