From 310fd066e91f454b990372ffa30e803cc8120975 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:56:40 +0100 Subject: unslug zh-cn: move --- .../index.html | 30 ++++ .../index.html | 185 +++++++++++++++++++++ .../howto/create_an_mdn_account/index.html | 44 ----- .../howto/do_a_technical_review/index.html | 57 ------- .../howto/do_an_editorial_review/index.html | 55 ------ .../howto/set_the_summary_for_a_page/index.html | 59 ------- .../howto/tag_javascript_pages/index.html | 69 -------- .../index.html | 117 ------------- .../index.html" | 30 ---- .../index.html" | 185 --------------------- .../index.html" | 53 ------ 11 files changed, 215 insertions(+), 669 deletions(-) create mode 100644 files/zh-cn/mdn/contribute/howto/add_or_update_browser_compatibility_data/index.html create mode 100644 files/zh-cn/mdn/contribute/howto/create_an_interactive_exercise_to_help_learning_the_web/index.html delete mode 100644 files/zh-cn/mdn/contribute/howto/create_an_mdn_account/index.html delete mode 100644 files/zh-cn/mdn/contribute/howto/do_a_technical_review/index.html delete mode 100644 files/zh-cn/mdn/contribute/howto/do_an_editorial_review/index.html delete mode 100644 files/zh-cn/mdn/contribute/howto/set_the_summary_for_a_page/index.html delete mode 100644 files/zh-cn/mdn/contribute/howto/tag_javascript_pages/index.html delete mode 100644 files/zh-cn/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html delete mode 100644 "files/zh-cn/mdn/contribute/howto/\345\246\202\344\275\225\346\267\273\345\212\240\346\210\226\346\233\264\346\226\260\346\265\217\350\247\210\345\231\250\345\205\274\345\256\271\346\200\247\346\225\260\346\215\256/index.html" delete mode 100644 "files/zh-cn/mdn/contribute/howto/\345\255\246\344\271\240_\344\272\244\344\272\222_\345\234\250\347\272\277_\350\265\267\346\255\245_\345\274\200\345\247\213/index.html" delete mode 100644 "files/zh-cn/mdn/contribute/howto/\346\210\220\344\270\272\344\270\200\345\220\215\346\265\213\350\257\225\347\211\210\350\257\225\351\252\214\345\221\230/index.html" (limited to 'files/zh-cn/mdn/contribute/howto') diff --git a/files/zh-cn/mdn/contribute/howto/add_or_update_browser_compatibility_data/index.html b/files/zh-cn/mdn/contribute/howto/add_or_update_browser_compatibility_data/index.html new file mode 100644 index 0000000000..8c0513d654 --- /dev/null +++ b/files/zh-cn/mdn/contribute/howto/add_or_update_browser_compatibility_data/index.html @@ -0,0 +1,30 @@ +--- +title: 如何添加或更新浏览器兼容性数据 +slug: MDN/Contribute/Howto/如何添加或更新浏览器兼容性数据 +translation_of: MDN/Contribute/Howto/Add_or_update_browser_compatibility_data +--- +
{{MDNSidebar}}

如果你有浏览器在兼容Web特性方面的信息 —— 或者有意愿并有能力做一些这方面的研究和/或实验 —— 你可以帮助更新MDN的浏览器兼容性数据库（BCD）。

+ + + +
+
哪些地方需要做？
+
+

在MDN上你有这几种方法可以帮助改进浏览器兼容性方面的信息：

+ +
    +
  • 添加尚未收录在BCD仓库内的网页特性数据
    • +
  • 依据浏览器新版本的变更内容、现有数据中的更正错误，或者某项技术的特性之最新变更等信息来更新现有数据
    • +
  • 提交 pull requests 到 BCD issues filed on Github.
    • +
+
+
做这个任务你需要知道哪些知识？
+
做这个任务需要哪些步骤？
+
欲了解如何更新在GitHub上的组成BCD仓库的 JSON 文件的详细信息，请参见兼容性表格页面。如要了解我们特别寻求帮助的问题列表，请到 Github issues with the "Help Wanted" tag.
+
 
+
 
+
diff --git a/files/zh-cn/mdn/contribute/howto/create_an_interactive_exercise_to_help_learning_the_web/index.html b/files/zh-cn/mdn/contribute/howto/create_an_interactive_exercise_to_help_learning_the_web/index.html new file mode 100644 index 0000000000..91b8a8640d --- /dev/null +++ b/files/zh-cn/mdn/contribute/howto/create_an_interactive_exercise_to_help_learning_the_web/index.html @@ -0,0 +1,185 @@ +--- +title: 如何创建一个交互学习环境 +slug: MDN/Contribute/Howto/学习_交互_在线_起步_开始 +tags: + - MDN Meta + - 交互 + - 如何使用 + - 学习 + - 教程 +translation_of: MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web +--- +
{{MDNSidebar}}

动态的内容对于学习 Web 来说是重要的。 她能让学习的人更加积极主动。 这可以是练习，实例，任务，评价等等。总之，任何有助于学习理解的东西都行。

+ +

这儿还没有能够直接创建动态的实例内容。但是一些第三方工具可以帮助你创建（如： JSFiddle，CodePen，Dabblet，等），你可以将其链接放在 MDN 文章中。另外，你可以使用 WebMaker 项目的 Thimble 来创造更加高级的内容。

+ +

目前，MDN 虽然没有能够轻易创建动态实例内容的工具。不过，如果你是工程师，可以使用当前 MDN 提供的功能创建自定义的主动学习内容，下面内容将告诉你如何操作。

+ +

MDN live samples

+ +

MDN 有一个非常炫酷的功能：live samples。她是一种可以将 MDN 页面内任何 HTML, CSS, Javascript 代码等效执行的机制。在使用她以前，你最好通读一下 Using the live sample system，这是我们关于她的完整文档。虽然她很容易使用，不过通过阅读文档，你会学到一些奇淫巧技。

+ +

有意思的是，将任何类型的工具或实例嵌入到 MDN 页面中都可以通过调教她轻松做到。

+ +

隐藏代码

+ +

通过实例创建主动学习内容的第一种方法是编辑要添加内容的页面。使用 Live Sample 功能创建内容，只构建你需要的功能，不要在乎代码的复杂度。当内容准备好之后，只需切换到编辑器视图，并用 class 为 hidden 的 {{HTMLElement('div')}} 来包围你的代码。这样代码就会隐藏，不过实例依然可以访问和显示。

+ +

看看这个简单的代码：

+ +
+

点击这个方块提供随机色，或者直接输入色值

+ + +{{EmbedLiveSample('hidden_code_example', 120, 120)}}
+ +

如果你使用 MDN 编辑器查看该页面代码，你会看到如下 HTML 代码：

+ +
<div class="moreinfo">
+<p>Click on the following square to randomly change its color or just type an hexadecimal code color</p>
+
+<div class="hidden">
+<h4 id="hidden_code_example">hidden code example</h4>
+
+<h5 id="HTML">HTML</h5>
+
+<pre class="brush: html">
+&lt;div class="square"&gt;
+  #&lt;input class="color"&gt;
+&lt;/div&gt;</pre>
+
+<h5 id="CSS">CSS</h5>
+
+<pre class="brush: css">
+body {
+  padding: 10px;
+  margin : 0;
+}
+
+.square {
+  width  : 80px;
+  height : 80px;
+  padding: 10px;
+  background-color: black;
+  color: white;
+  text-align: center;
+}
+
+.color {
+  width: 60px;
+  text-transform: uppercase;
+}
+</pre>
+
+<h5 id="JS">JS</h5>
+
+<pre class="brush: js">
+function setColor(color) {
+  document.querySelector('.square').style.backgroundColor = '#' + color;
+  document.querySelector('.color').value = color;
+}
+
+function getRandomColor() {
+  var color = Math.floor(Math.random() * 16777215);
+  return color.toString(16);
+}
+
+function getInputColor() {
+  var value = document.querySelector('.color').value;
+  var color = Number('0x' + color);
+  if (color === +color) {
+    return color.toString(16);
+  }
+  return value;
+}
+
+document.addEventListener('click', function () {
+  setColor(getRandomColor());
+});
+
+document.addEventListener('keyup', function () {
+  setColor(getInputColor());
+});
+</pre>
+</div>
+
+\{{EmbedLiveSample('hidden_code_example', 120, 120)}}
+</div>
+ +

你可以在 the Canvas API page 查看更多高级例子。

+ +

外部代码

+ +

前面的例子在你想嵌入主动学习内容时是可行的。不过，如果你想要处理更加复杂的代码，这个 hidden 的 {{HTMLElement('div')}} 就比较麻烦。

+ +

另外种方案是将内容写入 MDN 页面，然后嵌入另一个页面中。为此，我们可以使用 {{TemplateLink("EmbedDistLiveSample")}} 替代{{TemplateLink("EmbedLiveSample")}} 。

+ +

我们学习配置这个模拟远程代码嵌入的实例：

+ +
+

点击这个方块提供随机色，或者直接输入色值

+{{EmbedLiveSample('The_example', 120, 120, '', 'MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web/distant_example')}}
+ +

这下如果你继续使用 MDN 编辑器查看页面源码，将看不到隐藏元素。如果你需要看，则需要前往这个页面地址。

+ +

你可以在 HTML 表单教程中查看更多高级例子，那里可以使用表单尝试。

diff --git a/files/zh-cn/mdn/contribute/howto/create_an_mdn_account/index.html b/files/zh-cn/mdn/contribute/howto/create_an_mdn_account/index.html deleted file mode 100644 index 256d61b897..0000000000 --- a/files/zh-cn/mdn/contribute/howto/create_an_mdn_account/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: 如何创建 MDN 账号 -slug: MDN/Contribute/Howto/Create_an_MDN_account -tags: - - MDN - - 创建账户 - - 初学者指南 - - 新手上路 -translation_of: MDN/Contribute/Howto/Create_an_MDN_account ---- -
{{MDNSidebar}}
- -

 要对MDN的内容进行任何更改，你需要一个MDN账户。别担心，如果你只是打算阅读或搜索MDN，就不需要一个账户！这个指南  将帮助你建立MDN账户。

- -
-
-

为什么MDN需要我的电子邮件地址？

- -

你的电子邮件地址用于帐户恢复；必要时，MDN管理员会通过它来联系您，讨论你的账户或在网站上的活动。

- -

此外，你可以选择订阅通知（例如，当特定的页面被更改）和消息（例如，如果你选择加入我们的beta测试团队，你可能会收到关于待测试新功能的邮件）。

- -

你的电子邮件地址永远不会显示在MDN，并只会按照我们的隐私政策使用。

- -
如果你通过Github登录到MDN，并且你的Github账号使用了“noreply”的电子邮件地址，你将不会收到任何来自MDN的信息（包括你从页面订阅的通知）。
-
-
- -
    -
  1. 在每个MDN页面的顶部都有一个登录按钮。将鼠标指向它（如果你在移动设备上使用，轻触即可），以显示支持的登录到MDN的认证服务列表。
    2. -
  2. 选择一项服务以登录。目前，我们只支持使用Github登录。值得注意的是如果你选择GitHub，你的MDN公开资料页上将显示一个链接，其指向你的GitHub个人资料页。
    3. -
  3. 按照Github的提示，将你的GitHub帐户绑定到MDN。
    4. -
  4. 从认证服务页面返回到MDN之后，MDN会提示你输入用户名和电子邮件地址。你的用户名会公开显示，以便展示你做过的工作。请不要将你的电子邮件地址作为用户名。
    5. -
  5. 点击创建我的MDN个人资料。
    6. -
  6. 如果你在步骤4中指定的电子邮件地址与认证服务所使用的不同，请检查这个邮箱，并点击我们发送的确认邮件中的链接。
    7. -
- -

一切就绪！你已经拥有一个MDN帐户，并可以立即编辑页面！

- -

你可以在任何MDN页面的顶部点击你的名字以查看账号的公开资料。从那里，你可以点击编辑按钮修改或更新你的个人资料。

- -
-

注：新用户名不能包含空格或“@”字符。请记住，你的用户名将会公开显示，以标识你做过的工作！

-
diff --git a/files/zh-cn/mdn/contribute/howto/do_a_technical_review/index.html b/files/zh-cn/mdn/contribute/howto/do_a_technical_review/index.html deleted file mode 100644 index 83945186c5..0000000000 --- a/files/zh-cn/mdn/contribute/howto/do_a_technical_review/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: 如何进行技术审查 -slug: MDN/Contribute/Howto/Do_a_technical_review -tags: - - MDN Meta - - 复核 - - 如何做 - - 指南 - - 文档 -translation_of: MDN/Contribute/Howto/Do_a_technical_review ---- -
{{MDNSidebar}}
- -

技术复核包括审查一篇文章的技术准确性和完整性，并在必要的时候予以纠正。 如果一篇文章的作者需要其他人来对文章进行技术复核的话，就需要在编辑时勾选”技术复核“选项。通常情况下，作者会联系特定的工程师来执行技术审查，但是任何具有此领域专业技能的人都可以完成技术复核。

- -

本文介绍如何进行技术复核，从而帮助确保MDN的内容的正确性。

- -

任务是什么？

- -

  审查和纠正文章的技术准确性和完整性。

- -

什么地方需要技术审核？

- -

  在被标记为需要技术审核的特定文章中。

- -

开始做任务前你需要了解什么？

- - - -

完成任务的步骤是什么？

- -
    -
  1. 选取一篇需要复查的文章： -
      -
    1. 前往 technical reviews 页面。这里列出了所有需要技术复核的文章。
      2. -
    2. 选择一个你非常熟悉的领域的页面。
      3. -
    3. 点击该页面。
      4. -
    -
    2. -
  2. 在阅读这篇文章的时候注意文章里的所有技术细节：这篇文章的内容正确吗？是否缺少了一些细节？如果你觉得这篇文章不适合你，那么请毫不犹豫地换一篇文章。
    3. -
  3. 如果没有错误，你不需要重新编辑来把这篇文章标识为”已复核“，你只需要找到左边导航栏最下方的”快速复核“框。黄色背景的框里列出了所有等待复核的请求，像这样：
    4. -
  4. 去掉需要技术复核前面的勾，然后点保存。
    5. -
  5. 如果你发现了需要被修正的错误，你可以在编辑器里修改这篇文章的审核请求状态。以下是操作步骤： -
      -
    1. 点击页面顶部的编辑按钮，进入 MDN editor 页面，来编辑该页面。
      2. -
    2. 更正不正确的技术信息，还可以添加文章遗漏的任何重要信息。
      3. -
    3. 在文章的底部输入修改注释。这个注释简要地描述你的修改工作，比如“完成技术审查。”如果你更正了某些信息，将它们写进你的注释，比如“技术审查以及修复参数的相关描述。”这将帮助其他贡献者和网站编辑人员知道你修改的部分以及原因。如果你认为文章中有些不必要被审查的部分，也可以在注释中提出来。
      4. -
    4. 取消勾选“需要审查”下面的“技术”选项框了吗？它就在页面的审查注释区域。
      5. -
    5. 点击发布按钮。
      6. -
    -
    6. -
- -

祝贺你，你已经完成了你的第一篇技术复核，感谢您的帮助！

diff --git a/files/zh-cn/mdn/contribute/howto/do_an_editorial_review/index.html b/files/zh-cn/mdn/contribute/howto/do_an_editorial_review/index.html deleted file mode 100644 index 48396dcd33..0000000000 --- a/files/zh-cn/mdn/contribute/howto/do_an_editorial_review/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: 如何进行编辑审核 -slug: MDN/Contribute/Howto/Do_an_editorial_review -tags: - - 指导 - - 文档 - - 编辑审核 -translation_of: MDN/Contribute/Howto/Do_an_editorial_review ---- -
{{MDNSidebar}}
- -
{{IncludeSubnav("/zh-CN/docs/MDN")}}
- -

编辑审核的工作由修改文中排版错误，拼写、语法、用法等文本错误构成。并不是所有贡献者都是语言专家，但有了他们的共同努力，他们把那些需要编辑以及校对的文章转化为了极其有用的文章；这些都是在编辑审核的工作中完成的。

- -

这篇文章描述了如何进行编辑审核，从而帮助实现 MDN 的内容精确。

- -
-
任务是什么？
-
编辑并审核那些被标记为需要编辑审核的文章。
-
应该在何处处理它？
-
在特定的文章中会有标记有需要编辑审核的地方。
-
开始做任务前你需要了解什么？
-
你需要有好的中文语法和词汇技能。文章复核是要确保语法、用词都是正确的并且有意义，同时遵循 MDN 样式指南。
-
完成任务的步骤是什么？
-
-
    -
  1. 选择一篇文章来审核： -
      -
    1. 访问需要复核的文章列表。它陈列了所有请求编辑审核的页面。
      2. -
    2. 点击文章链接进入页面。
      - 注意：这个列表是自动生成的，但更新并不频繁，所以列表中的一些文章是不再需要编辑审核的。如果你选择的文章没有显示“这篇文章需要复核”，跳过这一篇文章，再选择其他的文章。
      3. -
    -
    2. -
  2. 仔细阅读文章，特别注意其中可能出现的排版、错字、语法或者词语使用错误。如果你觉得这篇文章不适合你，随时可以换一篇其它文章。
    3. -
  3. 如果文章中没有任何错误，你不需要进入编辑页面再把它标记为“已审核”。在页面的左侧边栏处可以找到“快速复核”对话框：
    - 文法复核边栏屏幕截图
    4. -
  4. 取消 文法 的勾选之后点击 保存 。
    5. -
  5. 如果你发现了需要改正的错误： -
      -
    1. 点击右上角蓝色的 编辑 按钮；它将带你进入 MDN 编辑器。
      2. -
    2. 更正所有你看到的的排版、错字、语法或者词语使用错误。你并不需要将所有问题都一次性改好，不过当完成整篇文章的时候你还觉得不确定是否完美，一定要保留文法复核的请求。
      3. -
    3. 在文本底部输入一段修订注释；比如 “文法符合：更改了排版，语法和用词错误。” 这有助于其他编辑者和网站管理员知道你更改了什么以及为什么做出更改。
      4. -
    4. 在 需要复核吗？ 下面取消 文法 的选择。这一项位于页面的 版本备注 当中。
      - 文法复核编辑模式屏幕截图
      5. -
    5. 点击 发布 按钮。
      6. -
    -
    6. -
- -
-

你所做出的更改在保存后不一定立即可见，页面保存和处理过程可能出现一些延迟。

-
-
-
diff --git a/files/zh-cn/mdn/contribute/howto/set_the_summary_for_a_page/index.html b/files/zh-cn/mdn/contribute/howto/set_the_summary_for_a_page/index.html deleted file mode 100644 index bf90ff0262..0000000000 --- a/files/zh-cn/mdn/contribute/howto/set_the_summary_for_a_page/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: 如何为页面编写概要 -slug: MDN/Contribute/Howto/Set_the_summary_for_a_page -tags: - - 指南 -translation_of: MDN/Contribute/Howto/Set_the_summary_for_a_page ---- -
{{MDNSidebar}}
- -

您可以在MDN的每一个页面上定义概要，它可以在很多方面起到作用，如包含在搜索引擎的搜索结果中，或者在其他MDN页面如热门话题页或者工具提示页。它应该概括的描述该页面的所有内容，并且当在其他页面显示时，不包含页面内容的无关部分。

- -
-

一个概要可以被明确的定在在一个页面中。如果概要没有被明确的定义，通常会使用该页面内容的第一句话作为概要，而它往往不是该页面最精确的描述。

-
- - - - - - - - - - - - - - - - - - - - -
任务是什么？标记应被用作其在其他情况下摘要页面中的文本;这项任务可能包括在需要写相应的文本。
哪些地方需要它？在缺乏一个总结或总结不太好的页面。
完成任务需要什么？能够使用MDN编辑器的能力;良好的英语写作能力;对网页的主题足够熟悉，以便于能写一个很好的总结。
怎样完成任务？ -
    -
  1. 选择一个页面来设置总结: -
      -
    1. 在MDN documentation status 页面上的section中, 点击你所了解的话题。
      2. -
    2. 在主题的文档状态页面，单击汇总表中的页头。这需要你在该主题区段的所有网页的索引;它示出了在左侧列中的页面的链接，以及在右栏中的标签和摘要。
      3. -
    3. 挑选缺少一个总结页面，或者说有一个较差的总结的页面。
      4. -
    -
    2. -
- -
-

点击链接进入该页面。

-
- -
    -
  1. 单击编辑在MDN编辑器中打开该页面。
    2. -
  2. 找一两句话，作为一个总结。如果需要，可以编辑现有的内容来创建或修改的句子来做一个很好的总结。
    3. -
  3. 选择要使用的摘要文本。
    4. -
  4. 在样式插件的编辑器工具栏，选择搜索引擎优化摘要。 (In the page source, this creates a {{HTMLElement("span")}} element with class="seoSummary" around the selected text.)
    5. -
  5. 保存你的更改，并附上类似“设置页面总结”的修改意见。修改意见是可选的，但我们鼓励你添加一个。这样便于其他人了解变更的情况。
    6. -
-
- -

完成这样的一份任务后，你就是MDN的一员。

diff --git a/files/zh-cn/mdn/contribute/howto/tag_javascript_pages/index.html b/files/zh-cn/mdn/contribute/howto/tag_javascript_pages/index.html deleted file mode 100644 index 4420d3f04e..0000000000 --- a/files/zh-cn/mdn/contribute/howto/tag_javascript_pages/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: 如何给JavaScript相关页面添加标签 -slug: MDN/Contribute/Howto/Tag_JavaScript_pages -translation_of: MDN/Contribute/Howto/Tag_JavaScript_pages ---- -
{{MDNSidebar}}

标记工作包括给页面添加元信息，使得这些页面的相关内容能被搜索工具等正确的分拣。

- -
-
哪里需要做这件事?
-
那些特定的没有标签的JavaScript相关的页面
-
开始标记任务前你需要知道些什么？
-
一些基本的JavaScript编程知识，比如javascript中的方法和属性都是些什么。
-
你的工作有以下几个步骤
-
-
    -
  1. 选择下面列举的某篇文章。
    2. -
  2. 点击该文章所对应的链接，载入页面。
    3. -
  3. 当页面载入完毕时，点击顶部附近的EDIT按钮，就会进入MDN编辑模式。
    4. -
  4. 最后就是添加Javascript相关的标签了，我们提供了如下可选的标签。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    标签名适用于含有哪些内容的页面
    Method方法
    Property属性
    Prototype原型
    Object type name所述对象的名字，例如String.fromCharCode就应该有String标签
    ECMAScript6 and Experimental在新版ECMAScript标准中增加的特性
    Deprecated不赞成使用的特性（那些不鼓励使用但仍然被浏览器支持的特性）
    Obsolete被废弃的特性（那些不再被浏览器支持的特性）
    others查看 MDN 标签规则 中其他可选标签
    -
    5. -
  5. 添加备注信息并保存你的修改。
    6. -
  6. 你做到了！
    7. -
-
-
- -

 

diff --git a/files/zh-cn/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html b/files/zh-cn/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html deleted file mode 100644 index 15c6f0b2ee..0000000000 --- a/files/zh-cn/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: 如何写文章帮助人们了解 Web -slug: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web -tags: - - MDN元数据 - - 学习社区 - - 指导 - - 贡献指南 -translation_of: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web ---- -
{{MDNSidebar}}
- -

MDN 的学习区是我们给新手开发者介绍 Web 概念的大本营。因为它的内容主要面对初学者，这是你分享知识，帮助新手逐渐了解 Web 的绝佳地点。确保新手开发者能够跟上这里的内容是很重要的，所以我们格外重视学习区。

- -

这篇文章解释了如何给学习区写文章。

- -

如何写学习社区的文章

- -

要开始贡献你的知识，只需点击绿色大按钮，然后按照下面的五个步骤。如果你想找点子，请看一下我们的团队 Trello ！

- -
写一篇新的学习文章 - -
-
- -

这篇文章可能不会在正确的地方出现，但至少是在MDN上。如果你需要找人谈谈把它搬到正确的地方，请联系我们。

- -

第一步：写两行

- -

你文章的第一句话需要总结一下你将要涉及的主题，第二句话应该更详细地介绍你要放在文章中的内容（项目）。例如：

- -
-

 {{glossary("HTML")}} 文件包含的结构和内容, {{Glossary("CSS")}}以及其他主要的Web技术，使内容看起来像你想要的那样。在本文中，我们将介绍这项技术是如何工作的，以及如何编写你自己的基本示例。

-
- -

注意示例如何简要说明CSS是用于样式化页面的核心Web技术。 这足以使读者很好地了解本文所涵盖的内容。

- -

因为学习区域的文章主要是针对初学者的，所以每篇文章都应该涵盖一个简单的主题，以免给读者带来太多的新信息。如果你不能在一句话中总结这篇文章，那么你可能在一篇文章中做得太多了!

- -

第二步：添加一个顶部框

- -

然后添加一个顶框，以帮助读者了解他们在学习过程中的位置。 这是“了解URL及其结构 ”顶部框的示例。 您可以在编写自己的文章时将其用作模型。

- - - - - - - - - - - - -
必要条件:您首先必须清楚Internet的工作方式，Web服务器是什么，与Web链接背后的所有概念。
目标:您将了解什么是URL以及它如何在Web上工作
- -
-
必要条件
-
读者首先必须知道什么东西才能读懂你的一篇文章?在有可能的状况下，让每一个前提条件链接到另一篇涵盖概念的学习领域的一篇文章(除了您写的是是一篇完全不需要首先先验知识的无比基础的文章)。
-
目标
-
这一章节粗略说明了您的读者在阅读学习这篇文章的过程中会学到（并学会）什么。这与一行程序有点不同;一行代码总结了文章的主题，而目标部分专门列出了读者在阅读文章过程中所希望完成的全部内容。
-
- -
-

注意:要创建此表，您可以复制并粘贴上面的示例表，或者使用MDN的编辑器 台式工具。如果选择使用table工具，则需要在默认的standard-table类之外特别添加learn-box CSS类。为此，当您创建或编辑表的属性时，请转到“Advanced”面板并将样式表类字段设置为“standard-table learn-box”。

-
- -

第三步:写一个完整的描述

- -

接下来，写一个更长的描述，提供更全面的文章概述，突出最重要的概念。不要忘记解释为什么读者要花时间来学习这个主题并阅读你的文章！

- -

第四步：更深一步

- -
当你完成了所有这些，你终于可以深入到主题。你可以根据自己的喜好来组织文章的这一部分(尽管您能够随时咨询我们的 设计指南)。这是你闪耀的机会!详细解释你要写的主题。提供指向完整参考文档的链接，详细解释该技术的工作原理，提供语法和用法细节，等等。由你决定 - -
-
- - - -

看一看我们的函数的前几节可重用代码块文章 ，有一些很好的描述部分。

- -

第五步:提供“主动学习”材料

- -

为了阐明本文并帮助读者更好地理解他们正在学习的内容，请确保提供练习、教程和需要完成的任务。通过让他们积极地、实际地使用和试验你文章中解释的概念，你可以帮助他们将信息“锁定”在大脑中。

- -

您可以选择在页面中直接包含这些示例作为 实时实例,或者直接链接到它们。 （如果它们不能作为实时实例。） 如果你有兴趣帮助创造这些有价值的东西 ，请参阅《创建一个交互式的练习来帮助学习网络》

- -

如果您不能提供到现有活动学习材料的链接(您不知道或者没有时间创建它们)，那么您应该在文章中添加标记{{tag ("NeedsActiveLearning")}}。这样，其他贡献者就可以找到需要积极学习材料的文章，并可能帮助你找到它们。

- -

看看《主动学习:选择不同的元素》进行现场互动学习练习或者《主动学习: 玩转范围》或者另一种不同风格的练习，要求它们在本地下载模板并按照提供的步骤更改

- -

- -

                                                                                         

- -

第六步：查看文章，并放入学习区域导航菜单

- -

在你写完你的文章后，让我们知道，这样我们可以看一看，做一个回顾，并提出改进建议 。再次看看我们的 联系方式 板块以寻找最好的联系方式。

- -

完成文章的另一部分是把它放在学习区主导航菜单中。这个菜单是 LearnSidebar 宏生成的。 你需要特殊的权限来编辑，所以，再一次，让我们团队中的一个人把它添加进去。

- -

您至少应该将其添加到您的页面中，这是通过在页面顶部的段落中添加宏调用\{{LearnSidebar}}来完成的。

- - - -

推荐文章

- -

您想做出贡献，但是您不知道该写什么?

- -

学习社区维护了一个要写文章的Trello看板。随意挑选一个，然后开始去写吧！

diff --git "a/files/zh-cn/mdn/contribute/howto/\345\246\202\344\275\225\346\267\273\345\212\240\346\210\226\346\233\264\346\226\260\346\265\217\350\247\210\345\231\250\345\205\274\345\256\271\346\200\247\346\225\260\346\215\256/index.html" "b/files/zh-cn/mdn/contribute/howto/\345\246\202\344\275\225\346\267\273\345\212\240\346\210\226\346\233\264\346\226\260\346\265\217\350\247\210\345\231\250\345\205\274\345\256\271\346\200\247\346\225\260\346\215\256/index.html" deleted file mode 100644 index 8c0513d654..0000000000 --- "a/files/zh-cn/mdn/contribute/howto/\345\246\202\344\275\225\346\267\273\345\212\240\346\210\226\346\233\264\346\226\260\346\265\217\350\247\210\345\231\250\345\205\274\345\256\271\346\200\247\346\225\260\346\215\256/index.html" +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: 如何添加或更新浏览器兼容性数据 -slug: MDN/Contribute/Howto/如何添加或更新浏览器兼容性数据 -translation_of: MDN/Contribute/Howto/Add_or_update_browser_compatibility_data ---- -
{{MDNSidebar}}

如果你有浏览器在兼容Web特性方面的信息 —— 或者有意愿并有能力做一些这方面的研究和/或实验 —— 你可以帮助更新MDN的浏览器兼容性数据库（BCD）。

- - - -
-
哪些地方需要做？
-
-

在MDN上你有这几种方法可以帮助改进浏览器兼容性方面的信息：

- -
    -
  • 添加尚未收录在BCD仓库内的网页特性数据
    • -
  • 依据浏览器新版本的变更内容、现有数据中的更正错误，或者某项技术的特性之最新变更等信息来更新现有数据
    • -
  • 提交 pull requests 到 BCD issues filed on Github.
    • -
-
-
做这个任务你需要知道哪些知识？
-
做这个任务需要哪些步骤？
-
欲了解如何更新在GitHub上的组成BCD仓库的 JSON 文件的详细信息，请参见兼容性表格页面。如要了解我们特别寻求帮助的问题列表，请到 Github issues with the "Help Wanted" tag.
-
 
-
 
-
diff --git "a/files/zh-cn/mdn/contribute/howto/\345\255\246\344\271\240_\344\272\244\344\272\222_\345\234\250\347\272\277_\350\265\267\346\255\245_\345\274\200\345\247\213/index.html" "b/files/zh-cn/mdn/contribute/howto/\345\255\246\344\271\240_\344\272\244\344\272\222_\345\234\250\347\272\277_\350\265\267\346\255\245_\345\274\200\345\247\213/index.html" deleted file mode 100644 index 91b8a8640d..0000000000 --- "a/files/zh-cn/mdn/contribute/howto/\345\255\246\344\271\240_\344\272\244\344\272\222_\345\234\250\347\272\277_\350\265\267\346\255\245_\345\274\200\345\247\213/index.html" +++ /dev/null @@ -1,185 +0,0 @@ ---- -title: 如何创建一个交互学习环境 -slug: MDN/Contribute/Howto/学习_交互_在线_起步_开始 -tags: - - MDN Meta - - 交互 - - 如何使用 - - 学习 - - 教程 -translation_of: MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web ---- -
{{MDNSidebar}}

动态的内容对于学习 Web 来说是重要的。 她能让学习的人更加积极主动。 这可以是练习，实例，任务，评价等等。总之，任何有助于学习理解的东西都行。

- -

这儿还没有能够直接创建动态的实例内容。但是一些第三方工具可以帮助你创建（如： JSFiddle，CodePen，Dabblet，等），你可以将其链接放在 MDN 文章中。另外，你可以使用 WebMaker 项目的 Thimble 来创造更加高级的内容。

- -

目前，MDN 虽然没有能够轻易创建动态实例内容的工具。不过，如果你是工程师，可以使用当前 MDN 提供的功能创建自定义的主动学习内容，下面内容将告诉你如何操作。

- -

MDN live samples

- -

MDN 有一个非常炫酷的功能：live samples。她是一种可以将 MDN 页面内任何 HTML, CSS, Javascript 代码等效执行的机制。在使用她以前，你最好通读一下 Using the live sample system，这是我们关于她的完整文档。虽然她很容易使用，不过通过阅读文档，你会学到一些奇淫巧技。

- -

有意思的是，将任何类型的工具或实例嵌入到 MDN 页面中都可以通过调教她轻松做到。

- -

隐藏代码

- -

通过实例创建主动学习内容的第一种方法是编辑要添加内容的页面。使用 Live Sample 功能创建内容，只构建你需要的功能，不要在乎代码的复杂度。当内容准备好之后，只需切换到编辑器视图，并用 class 为 hidden 的 {{HTMLElement('div')}} 来包围你的代码。这样代码就会隐藏，不过实例依然可以访问和显示。

- -

看看这个简单的代码：

- -
-

点击这个方块提供随机色，或者直接输入色值

- - -{{EmbedLiveSample('hidden_code_example', 120, 120)}}
- -

如果你使用 MDN 编辑器查看该页面代码，你会看到如下 HTML 代码：

- -
<div class="moreinfo">
-<p>Click on the following square to randomly change its color or just type an hexadecimal code color</p>
-
-<div class="hidden">
-<h4 id="hidden_code_example">hidden code example</h4>
-
-<h5 id="HTML">HTML</h5>
-
-<pre class="brush: html">
-&lt;div class="square"&gt;
-  #&lt;input class="color"&gt;
-&lt;/div&gt;</pre>
-
-<h5 id="CSS">CSS</h5>
-
-<pre class="brush: css">
-body {
-  padding: 10px;
-  margin : 0;
-}
-
-.square {
-  width  : 80px;
-  height : 80px;
-  padding: 10px;
-  background-color: black;
-  color: white;
-  text-align: center;
-}
-
-.color {
-  width: 60px;
-  text-transform: uppercase;
-}
-</pre>
-
-<h5 id="JS">JS</h5>
-
-<pre class="brush: js">
-function setColor(color) {
-  document.querySelector('.square').style.backgroundColor = '#' + color;
-  document.querySelector('.color').value = color;
-}
-
-function getRandomColor() {
-  var color = Math.floor(Math.random() * 16777215);
-  return color.toString(16);
-}
-
-function getInputColor() {
-  var value = document.querySelector('.color').value;
-  var color = Number('0x' + color);
-  if (color === +color) {
-    return color.toString(16);
-  }
-  return value;
-}
-
-document.addEventListener('click', function () {
-  setColor(getRandomColor());
-});
-
-document.addEventListener('keyup', function () {
-  setColor(getInputColor());
-});
-</pre>
-</div>
-
-\{{EmbedLiveSample('hidden_code_example', 120, 120)}}
-</div>
- -

你可以在 the Canvas API page 查看更多高级例子。

- -

外部代码

- -

前面的例子在你想嵌入主动学习内容时是可行的。不过，如果你想要处理更加复杂的代码，这个 hidden 的 {{HTMLElement('div')}} 就比较麻烦。

- -

另外种方案是将内容写入 MDN 页面，然后嵌入另一个页面中。为此，我们可以使用 {{TemplateLink("EmbedDistLiveSample")}} 替代{{TemplateLink("EmbedLiveSample")}} 。

- -

我们学习配置这个模拟远程代码嵌入的实例：

- -
-

点击这个方块提供随机色，或者直接输入色值

-{{EmbedLiveSample('The_example', 120, 120, '', 'MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web/distant_example')}}
- -

这下如果你继续使用 MDN 编辑器查看页面源码，将看不到隐藏元素。如果你需要看，则需要前往这个页面地址。

- -

你可以在 HTML 表单教程中查看更多高级例子，那里可以使用表单尝试。

diff --git "a/files/zh-cn/mdn/contribute/howto/\346\210\220\344\270\272\344\270\200\345\220\215\346\265\213\350\257\225\347\211\210\350\257\225\351\252\214\345\221\230/index.html" "b/files/zh-cn/mdn/contribute/howto/\346\210\220\344\270\272\344\270\200\345\220\215\346\265\213\350\257\225\347\211\210\350\257\225\351\252\214\345\221\230/index.html" deleted file mode 100644 index 08693b3ff1..0000000000 --- "a/files/zh-cn/mdn/contribute/howto/\346\210\220\344\270\272\344\270\200\345\220\215\346\265\213\350\257\225\347\211\210\350\257\225\351\252\214\345\221\230/index.html" +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: 如何成为一名测试版试验员 -slug: MDN/Contribute/Howto/成为一名测试版试验员 -tags: - - MDN Meta -translation_of: MDN/Contribute/Howto/Be_a_beta_tester ---- -
{{MDNSidebar}}
- -

随着MDN Kuma平台的开发人员不断地对站点进行更改，我们为那些选择成为测试版测试人员提供对这些新特性的早期访问。与任何“beta”测试一样，在某些情况下，一些功能可能无法正常工作。

- -

参与beta测试

- -
    -
  1. 登录MDN，在顶部导航栏点击你的用户名。
    - Shows location of the user's profile link in the top navigation
    - 随后跳转到你的资料页。
    2. -
  2. 点击编辑按钮。
    - Shows location of the button to edit a user's profile (which may vary depending on window dimensions
    - 随后在编辑模式下打开资料页。
    3. -
  3. 勾选复选框成为 Beta 测试者。
    - Shows the location of the Beta Tester checkbox
    4. -
  4. 点击资料页底部的发布按钮
    - Shows the location of the Publish button on a user's profile page
    5. -
- -

退出Beta测试

- -
    -
  1. 登录MDN，在顶部导航栏点击你的用户名。随后会跳转到你的资料页。
    2. -
  2. 点击编辑按钮。随后在编辑模式下打开资料页。
    3. -
  3. 取消 Beta 测试者的复选框
    4. -
  4. 点击发布按钮.
    5. -
- -

对beta测试给予反馈

- -

你有两种方式可以对 beta 测试进行反馈:

- - - -
    -
  1. 如果你还没有账号，创建一个 Bugzilla 账号.
    2. -
  2. 打开 bug report in Bugzilla for MDN.
    3. -
  3. 在“摘要”字段中包含 “beta” 一词，帮助 MDN开发人员过滤和区分传入的 bug。.
    4. -
  4. 尽你所能填写 bug 报告. 越详细越好.
    5. -
  5. 点击提交按钮.
    6. -
- -

 

-- cgit v1.2.3-54-g00ecf