Mozilla 开发者网络焕新颜

去年夏天,Mozilla 开发者网络 (MDN) 经历了一次重大的平台变更,从第三方托管解决方案迁移到我们自己的自定义 Django 应用程序,代号为 Kuma。此举为我们最新的 MDN 重大升级奠定了基础:彻底的 前端重新设计,包括许多新功能以及可用性和可访问性增强。让我快速概述一下您在新的 MDN 上可以看到的内容以及我们未来正在开发的功能!

MDN 新功能

更加重视搜索

大多数 MDN 用户希望在访问 MDN 首页时立即找到文档,因此我们将搜索功能置于首位。

我们还添加了搜索筛选器,使用户能够根据其特定需求缩小搜索结果范围。

从技术角度来看,我们已将搜索迁移到 Elasticsearch,以便我们能够持续改进索引和筛选,并根据需要添加新的搜索功能。我们预计在收到反馈后会对搜索进行微调,因此我们将继续努力,帮助您更快地找到更好的文档。

简化导航

在之前的版本中,文档之间的切换是一个痛点,因此我们通过两种方式解决了这个问题。首先是创建内容区域,这是一种为给定主题创建导航的方法。我们从 MDN 最突出的部分开始,包括 应用中心FirefoxFirefox OSFirefox 应用商店附加组件Persona

内容区域

MDN 的新内容区域提供了关于给定主题的完整文档集,涵盖了主题的基本知识到 API 细节和高级技巧。我们将从以下区域开始:

Firefox OS

Firefox OS 区域的亮点包括:

  • 详细的平台指南
  • 构建和安装详细信息
  • Firefox OS 黑客
  • 应用设计与开发
Firefox 应用商店

此区域的亮点包括:

  • 应用提交和审核
  • 应用发布和盈利
  • 应用商店 API 信息
应用中心

应用中心区域的亮点包括:

  • 快速入门指南
  • 设计和构建技巧
  • 应用发布指南
  • API 参考
Persona

Persona 区域的亮点包括:

  • 在您的网站上使用 Persona 的指南
  • 成为身份提供者
  • 关于 Persona 项目的详细信息
Firefox

Firefox 区域的亮点包括:

  • 完整的 Firefox 附加组件概述
  • 有关 Firefox 内部信息
  • 构建 Firefox 和贡献的详细说明
附加组件

附加组件区域的亮点包括:

  • XUL 扩展信息
  • 最佳实践技巧
  • 主题
  • 附加组件发布指南

“另请参阅”链接

我们还实现了“另请参阅”链接,这些链接可能出现在任何维基页面中,并链接到可能与您当前正在查看的文档相关的文档。

区域子导航和“另请参阅”链接侧边栏小部件都是由维基文档中的基本链接列表构建的,因此,任何希望为 MDN 贡献的人都可以轻松地添加链接和调整导航。这些链接列表也可以使用 MDN 的宏语言 Kumascript 构建,我们的写作团队在自动化“另请参阅”链接方面做得非常出色,以便贡献者可以节省手动查找其他相关文档的工作。

顶级导航

在顶级导航中,您可以访问五个不同的区域:

  • 上述内容区域
  • Web 平台,包括指向有关技术、参考和指南的更多信息的直接链接
  • 开发者计划 - 为了能够帮助开发者并建立长期合作关系和渠道,我们创建了 Mozilla 开发者计划。我们有很多计划和想法来迭代扩展该计划,并且希望您参与其中!因此,请注册!您将获得会员资格,能够订阅我们的时事通讯,并随着时间的推移获得访问功能的权限,因为我们将逐步推出它们。
  • 工具 - 有关 Firefox 开发者工具及其功能的更多信息
  • 演示,它是指向演示工作室的直接链接

增强的 Kumascript 宏功能

Kumascript,MDN 的动态宏语言,也配备了读取外部 RSS 订阅的功能。目前,MDN 正在使用订阅阅读器功能从 StackOverflow 获取论坛帖子,以及从 Mozilla Hacks 博客获取博客文章。查看 MDN:Common 宏 以查看fetchJSONResourcefetchHTTPResource 方法,这些方法有助于在维基文档中显示订阅内容。

未来功能

此次视觉重新设计仅仅是我们努力使 MDN 更具活力和可用性的开始。MDN 开发和 UX 团队在 2014 年还有更多计划。以下是一些您可能看到的预告!

动态搜索筛选

为了提高用户搜索效率,我们计划实现井号前缀文本筛选,这些筛选可以在初始搜索中添加 - 这样做将避免用户在进入搜索结果页面时需要进行额外的筛选。

Holly Habstritt Gaal 在她的 博客 上详细介绍了 此查询系统。查看她的博客文章以了解实现细节。

文档导航器

因此,您已完成搜索并点击了您认为适用的第一个链接,但您想继续查看其他结果。无需再返回搜索结果页面,维基页面(如果用户来自搜索)将显示文档导航器以移动到下一个或上一个结果,或者您可以查看原始搜索中的所有结果列表。

image

只需另一种更快找到所需内容的便捷方法!

演示工作室和 Dev Derby 重新设计

MDN 演示工作室 和 Dev Derby 的重新设计即将推出。我们有一个 正在审查的出色设计,我们希望在 2014 年初推出。

如果您有任何建议或在新的 MDN 中发现任何错误,请告知我们

期待 2014 年及以后 MDN 的更多内容。MDN 平台承诺扩展和改进我们查看、编写和体验文档以及 Web 技术的方式!

关于 Robert Nyman [荣誉编辑]

技术布道师和 Mozilla Hacks 编辑。发表演讲和撰写有关 HTML5、JavaScript 和开放 Web 的博客。Robert 坚定地相信 HTML5 和开放 Web,自 1999 年以来一直在从事 Web 前端开发工作 - 在瑞典和纽约市。他还定期在 http://robertnyman.com 上发表博客,并且热爱旅行和结识新朋友。

更多 Robert Nyman [荣誉编辑] 的文章…


57 条评论

  1. ChrisArchitect

    太棒了。祝贺大家。

    2013 年 12 月 9 日 13:42

    1. groovecoder

      谢谢 Chris。这是一条漫长的道路,但重新设计实际上在我们进行重新设计本身时帮助了我们!太神奇了。

      2013 年 12 月 9 日 14:08

  2. Lance

    伙计们,看起来真是太棒了!

    非常感谢,你们的辛勤工作 *真的* 值得赞赏。

    2013 年 12 月 9 日 14:10

    1. Robert Nyman [编辑]

      谢谢,很高兴听到这个消息!

      2013 年 12 月 10 日 03:07

  3. gabriele vidali

    为什么还没有允许在此处使用社交评论系统?(Persona 和 Disqus)

    2013 年 12 月 9 日 14:26

    1. Robert Nyman [编辑]

      希望我们以后能在这里使用 Persona。

      2013 年 12 月 9 日 14:27

  4. Chris More

    祝贺大家发布这个版本!网站重新设计是可以想象的最难的网站项目之一,通常比启动一个全新的网站还要难。

    2013 年 12 月 9 日 14:45

    1. Robert Nyman [编辑]

      谢谢 Chris!是的,它确实带来了一些额外的挑战!

      2013 年 12 月 10 日 03:08

  5. Ivan Dejanovic

    到目前为止我看到的东西看起来都不错。在我使用 MDN 获取一些示例以在我的应用中使用时,您进行了更改。在一秒钟内,它变成了红色和橙色,然后突然变成了蓝色。:)

    MDN 在之前的版本中非常好,我一直都在开发中使用它,但至少对我来说,有时很难导航。关于如何为 Firefox OS 应用编写清单的一些信息分布在几个单独的文档中,而不是单个文档包含我需要的所有信息,因此在我尝试发布我的第一个应用时,我不得不一直切换。希望新的外观能改善这一点。

    继续努力。

    2013 年 12 月 9 日 16:02

    1. Robert Nyman [编辑]

      谢谢!希望导航有所帮助,但同时,如果您认为某些信息应该在同一页面而不是分散在各处,请随时编辑它。MDN 是一个维基,如果没有所有收到的贡献,它是无法实现的。

      2013 年 12 月 10 日 02:20

  6. Maurizio

    我尝试了此布局的测试版,我非常喜欢它。干得好。

    2013 年 12 月 9 日 16:29

    1. Robert Nyman [编辑]

      感谢您尝试测试版,很高兴您喜欢它!

      2013 年 12 月 10 日 02:20

  7. Randy Apuzzo

    我喜欢你们,继续努力,你们对网络的重要性无法言喻。

    2013 年 12 月 9 日 17:04

    1. Robert Nyman [编辑]

      谢谢!我想相信重要的是我们所有人共同努力构建一个更好的网络。:-)

      2013 年 12 月 10 日 02:21

  8. Yaroslaff Fedin

    是我还是截图上的布局坏了?

    2013 年 12 月 9 日 18:39

    1. Robert Nyman [编辑]

      哪个截图?

      2013 年 12 月 10 日 03:02

  9. Andrea Giammarchi

    太棒了,伙计们!

    2013 年 12 月 9 日 19:10

    1. Robert Nyman [编辑]

      谢谢!

      2013 年 12 月 10 日 03:03

  10. Rudolf Olah

    非常非常棒!我喜欢它,我真正喜欢的是搜索 URL 没有改变,所以仍然可以使用 Firefox 中的搜索关键词和 DuckDuckGo 中的 !mdn 进行搜索!:-D

    2013 年 12 月 9 日 22:41

    1. Robert Nyman [编辑]

      谢谢,很高兴一切按您希望的那样工作!

      2013 年 12 月 10 日 03:03

  11. Rolfen

    这些颜色太糟糕了。有人缺乏灵感,然后看了看 MSDN……这就是我们得到的结果。甚至徽标现在也变成了蓝色。
    另外,如何为用户提供一些选择或警告?

    2013 年 12 月 9 日 23:04

    1. Robert Nyman [编辑]

      我不确定维护网站的两个版本是否可扩展。此外,我们在 MDN 上发布了几个月的横幅,用户可以在我们发布之前选择尝试新设计。如文章中所述,欢迎任何反馈:http://mzl.la/mdn-post-redesign-feedback

      2013 年 12 月 10 日 03:06

  12. Vikash

    太棒了~

    2013 年 12 月 10 日 00:11

    1. Robert Nyman [编辑]

      谢谢!

      2013 年 12 月 10 日 03:03

  13. Francisc

    还可以,但我更喜欢旧版。
    新版有太多白色在冲击你(我的显示器是 30 英寸)。
    旧版有较暗的颜色,更容易阅读。
    至少对我来说是这样。

    2013 年 12 月 10 日 05:37

    1. Robert Nyman [编辑]

      感谢您的反馈。请在 http://mzl.la/mdn-post-redesign-feedback 上分享这些反馈!

      2013 年 12 月 10 日 05:53

  14. ady

    嗨,大家好 :) 你们做的很棒 - 设计比以前的版本漂亮多了。但它有一个缺点 - 颜色太亮了。我习惯使用较暗的主题(任何使用过暗色 Visual Studio 的人?),并且非常喜欢你们之前主题的暗色调。有没有办法获得更暗的主题版本?(我甚至不是指之前的颜色,只是更暗一些)。

    2013 年 12 月 10 日 06:06

    1. Robert Nyman [编辑]

      感谢您的反馈!没有办法获得其他颜色,除非我们更改默认颜色 - 因此请使用上面的链接提交您的反馈。

      2013 年 12 月 10 日 06:37

      1. ady

        好的 :) 再一次 - 感谢这些很棒的更改!:D

        2013 年 12 月 10 日 09:44

  15. thelolcat

    呃,它现在看起来像一个随机的微软网站。你们是用 ThemeForest 主题吗?因为所有这些主题都复制了微软的样式……

    这改版太糟糕了。虽然比之前的版本好看一些,但可用性却下降了。在网站上待不到 5 秒,眼睛就开始疼。程序员不在乎美观,他们关心的是易用性,而 MDN 现在变得毫无用处了。

    至少要以某种方式提供旧样式,比如一个样式切换器之类的东西……

    2013年12月10日 上午08:04

    1. Robert Nyman [编辑]

      如文章和上面几条评论中提到的,请将您的反馈提交到 http://mzl.la/mdn-post-redesign-feedback

      2013年12月10日 上午08:21

  16. John Soutar

    祝贺所有参与的人。看起来很棒。

    2013年12月10日 上午09:59

    1. Robert Nyman [编辑]

      谢谢!

      2013年12月10日 下午12:52

  17. Tin Aung Lin

    你们经过一系列持续的努力才完成了它。

    干杯

    2013年12月10日 上午11:34

    1. Robert Nyman [编辑]

      谢谢!

      2013年12月10日 下午12:52

  18. Andre Jaenisch

    … 只是另一个“现代”网站。好吧,我得重新学习一下这里的导航。

    同时,我想请你们为图片添加详细的 alt 属性。这不仅导致我的 RSS 阅读器无法显示任何内容(在旅途中离线阅读),而且屏幕阅读器也无法读取任何内容。可以问问 Mozilla QA 团队的 Marco Zehe ;-)

    哦,顺便说一下。请将“通过电子邮件通知我后续评论”移动到提交按钮的上方。上次我在此处评论时没有看到它。

    你们要求反馈 ;-)

    2013年12月10日 下午14:40

    1. Robert Nyman [编辑]

      很好的建议。请将反馈提交到 http://mzl.la/mdn-post-redesign-feedback
      关于“通知”复选框的建议已收到!

      2013年12月11日 上午04:00

  19. lem torov

    太棒了。非常整洁漂亮。如果我能做出这样的东西就好了。
    漂亮。

    你们是怎么做出带渐变的蓝色方格网格的?我在代码中找不到。

    它可能是一张带有蓝色渐变和渐变网格的单一图像,但事实并非如此。
    它可能是两张叠加的图像,一张只有网格,另一张上面有透明的白色渐变。
    或者是一张带网格的图像,以及一个使用 CSS 创建的渐变,并通过 z-index 定位到上面。

    但我找不到这样的图像。我确实在 CSS 中查找了 base64 图像,但没有找到 :)

    我看到了。它是响应式的。

    2013年12月10日 下午23:12

    1. Robert Nyman [编辑]

      谢谢!
      页面的背景网格?它是 body 元素 CSS 代码中的多个背景图像。

      2013年12月11日 上午04:01

  20. Rummy

    你好!可用性很棒。但现在在视觉上浏览文档有点困难,文本、注释、链接看起来对比度有点低。

    2013年12月11日 上午04:31

    1. Robert Nyman [编辑]

      谢谢!请将反馈提交到 http://mzl.la/mdn-post-redesign-feedback

      2013年12月11日 上午04:36

  21. Felipe Nascimento de Moura

    看起来太棒了!:)
    也很实用,恭喜!

    2013年12月11日 下午14:17

    1. Robert Nyman [编辑]

      谢谢!

      2013年12月11日 下午15:07

  22. Abin Abraham

    外观和感觉都不错

    2013年12月11日 下午21:20

    1. Robert Nyman [编辑]

      谢谢,很高兴你喜欢!

      2013年12月12日 上午02:41

  23. Derek

    MDN 的新设计确实不错,但我有一点不喜欢,那就是太白了。缺乏对比度,我很难阅读文本。(整个页面太白了,很难专注于主要内容。)此外,页面也没有像以前那样居中,现在我需要把头转向左边才能阅读文本。如果在右边可能还好,但在左边,有点太偏了。

    2013年12月12日 上午02:09

    1. Robert Nyman [编辑]

      感谢您的想法。如上所述,请将反馈提交到 http://mzl.la/mdn-post-redesign-feedback

      2013年12月12日 上午02:42

  24. Dwayne

    各位干得不错。我对这些以及未来的变化感到兴奋。MDN 作为开发人员的资源真是太棒了,因此我感谢大家为使其更加用户友好和出色的所有努力。

    2013年12月12日 上午06:28

    1. Robert Nyman [编辑]

      谢谢,Dwayne!

      2013年12月12日 下午12:21

  25. Robert Ivan

    网站看起来很棒。不过我有一些问题。
    1. 为什么选择 Django
    2. 为什么选择 Elasticsearch 而不是 Solr
    3. 响应式体验非常流畅。有什么魔法吗?

    2013年12月12日 下午16:24

    1. groovecoder

      1. 我们在许多 Mozilla 网站上使用 Django,因此我们在内部拥有大量的 Django 专业知识。[1] 大约 4 年前,Mozilla 将许多大型网站从 PHP(我记得是 CakePHP)迁移到 Python 和 Django。

      2. 同样,许多 Mozilla 网页平台(AMO、SUMO、Input 等)都使用 ElasticSearch。我在 SourceForge.net 工作期间个人使用过 Solr,所以我喜欢 ES,因为它具有所有熟悉的 Lucene 功能,但也包括动态模式和集群架构。

      [1] https://blog.mozilla.org/webdev/tag/django/

      2013年12月16日 上午09:02

  26. Roma Matusevich

    各位干得不错。我喜欢 MDN 的新“面孔”。

    2013年12月14日 上午06:44

    1. Robert Nyman [编辑]

      谢谢!

      2013年12月16日 上午04:12

  27. Tyson

    设计更新非常棒。大家辛苦了!

    2013年12月14日 下午21:29

    1. Robert Nyman [编辑]

      谢谢,很高兴听到这个消息!

      2013年12月16日 上午04:13

  28. Steve

    这是个好消息,看来是一个不错的版本。开发人员做得很好。

    颜色搭配很好,导航也很好。

    2013年12月15日 上午04:22

    1. Robert Nyman [编辑]

      谢谢,很高兴你喜欢!

      2013年12月16日 上午04:13

本文评论已关闭。