上周，大约 2500 名开发人员、设计师、企业家和经理来到立陶宛的维尔纽斯，参加了第五届 Login 会议。演讲者包括来自诺基亚、连线杂志、Flattr.com（由海盗湾创始人运营）、泰特现代美术馆和国际特赦组织的人员，会议涵盖了从病毒视频到网络安全和隐私，再到前沿的网络开发实践等各个方面。

我在 Mozilla 的工作是进行最后的主题演讲，提醒人们他们在两天内听到的内容，并让他们对我们讨论的新技术充满兴趣。以下是演讲的幻灯片和详细笔记。视频很快就会发布，我们会在发布后在这里发布。

闭幕主题演讲“使用开放的新技术构建更好的网络”的幻灯片

您也可以在 Slideshare 上查看和下载 带注释的版本。

演讲笔记

今天我将讨论令人兴奋的新开放技术，以及如何利用它们来改善网络，并同时为自己赢得声誉。

我是 Chris Heilmann，我在 Mozilla 担任首席布道师，专注于 HTML5 和开放网络。我是一名开发者布道师，如果您不知道这是什么，请查看 developer-evangelism.com 以了解所有相关信息。

我是一个电影迷——我不看电视，而是看电影。而且我喜欢古怪的电影。我最近迷上的一部电影是科恩兄弟执导的《哈德萨克代理人》。在这部电影中，我们认识了诺维尔·巴恩斯，一位商学院毕业生，来到纽约寻找创业的声誉和财富——结果却沦为一家公司邮件室里卑微的职员。然而，诺维尔有想法，并且完全缺乏与人沟通这些想法的技巧。他对他伟大想法的推销方式是向人们展示一张纸，上面有一个戒指，并说“你知道，给孩子们用的”。当公司老板跳窗自杀后，诺维尔获得了一次机会。其他股东发现他的遗嘱，意识到他们需要将公司股票公开上市，这促使他们在之前确保股票暴跌。为了做到这一点，他们想聘用一个完全的傻瓜作为首席执行官——那就是诺维尔。

诺维尔有机会打造他的发明，结果是呼啦圈。该公司花费大量时间进行广告宣传，但结果却惨败——没有人想购买呼啦圈。当一个商店老板把它们扔到街上，一个孩子在学校前面开始使用它时，一切都发生了变化。呼啦圈获得了巨大的成功。

那么这与本次会议有什么关系呢？

呼啦圈是一个很好的例子，它证明了一个产品不应该需要任何营销，而是可以通过看到其他人使用它来发挥作用，并且只需要一个人来展示使用它的乐趣。

使用新的、酷炫的东西不应该需要任何营销……

这就是现代网络技术。升级驱动网络的技术完全是理所当然的。但我们并没有仅仅将它们提供给关心它们的人，而是等待大型企业为我们做到这一点。

思考惊人的技术并等待奇迹发生是没有意义的。如果你仔细观察，我们考虑的很多事情其实并不聪明。

直接加入进来，开始体验吧！

好吧，我今天来这里是为了告诉你，你可以并且应该使用你能接触到的所有新技术——为了网络的利益，也为了你公司的利益。

设定长远目标……

支持基于标准的新技术意味着你是在为长远打算。你想构建一些新颖而酷炫的东西，但你也想让它在未来易于维护。这些技术并不难学——CSS、JavaScript 和 HTML 已经存在很长时间了。如今的好消息是，今天我们可以用它们构建令人惊叹的东西。

使用整个技术栈

我认为，作为企业家和新开发者，我们有责任拥抱新技术并将其引入主流市场。老牌公司没有这样的机会。所以，采取行动，加入进来，开始行动。

HTML5 为我们提供了比以往任何时候都更丰富的表单。我们有自动完成控件、颜色选择器、URL、电话和电子邮件字段，这些字段可以利用我们智能手机的联系人数据库和日期选择器。这些功能还内置了浏览器验证，这使得构建出色的体验变得更加容易。

查找访客的位置只需 3 行 JavaScript 代码——并且使用雅虎的 GeoPlanet 等免费数据库，您可以将其转换为地址，并使用“查找我”按钮为用户预填充表单。这难道不是很有用吗？

使用本地和离线存储，即使访客在移动中，我也可以使我的应用程序正常工作。没有连接不应该意味着应用程序的结束——只需告诉用户您处于离线状态，并在可以再次同步之前将数据存储在本地。本地存储还可以用于缓存用户不需要反复从服务器加载的信息。

使用 SVG 和 Canvas，我们可以在网络上绘画。我们可以构建极其丰富的交互式图表，还可以创建以前仅在 Flash 或 Silverlight 中可用的游戏。D3 是一个很棒的库，可以将文档中的任何数据转换为交互式图表。像 d3.js 这样的库可以为您提供很多帮助。

CSS3 允许样式超越添加颜色、尺寸和字体。您可以构建根据可用屏幕大小调整大小的界面，进行转换并创建阴影和渐变。

使用原生视频和音频，您可以以非常简单的方式与文档进行交互。您可以叠加视频并对当前视频的时间做出反应。在这个示例中，我构建了 印第安纳·琼斯地图，方法是在动画地图上叠加视频。您可以使用此技术简单地 构建交互式视频教程。

您可以轻松构建自己的视频播放器，这些播放器具有以前任何播放器都不具备的功能——例如，我在这里编写了 一个允许您缩放和旋转视频的视频播放器。

将 Canvas 和 SVG 与视频结合使用，您可以动态分析视频数据并做出反应。在此演示中，我们找到视频中的白色部分，并将其用作 注入内容 的锚点。

通过使用触摸手势和设备方向，您可以使您的产品更易于人类使用——游戏行业在过去几年里蓬勃发展，正是因为这一点。

WebGL 允许您在浏览器中原生使用真正的 3D 模型。查看 Google 提供的令人惊叹的 人体浏览器示例。

消息传递和工作线程

使用 WebSockets 在您的站点和计算机之间进行消息传递，您可以构建可扩展到数千用户的实时应用程序。工作线程意味着您可以使用 JavaScript 进行密集计算，而不会减慢界面速度。

贪婪一点，追求最佳体验。

在过去，某个系统的 HTML 版本是 Flash 站点的后备方案，而现在，当涉及到美丽而丰富的体验时，我们不再需要隐藏。现在是时候采用新技术并用它们构建出色的体验了。

• 微软的 网络之美 展示了一些很酷的新网站。
• 关于浏览器和网络的 20 件我学到的东西 是一个很好的 HTML5 示例，说明了如何在网上展示书籍。
• 日产聆风网站 是一个使用 CSS、HTML 和 JavaScript 的汽车 3D 展示。
• 耐克的更美好世界 是一个外观精美且运作方式不同于普通网站的网站，但它不使用 Flash。
• Mozilla 的网络奇观 通过一些非常酷的演示来突破界限。

透过镜子的另一面……

使用开放网络技术的一大好处是，您完全处于开放状态。每个人都可以看到你在做什么。这听起来很可怕，但在科技界实际上是一个巨大的优势。当不需要编译时，调试产品要容易得多。作为额外奖励，开放系统还可以确保您吸引人才。如果您的产品采用了最新和最酷的技术，您会发现招聘开发人员的工作要轻松得多。极客们喜欢成为新事物的一部分。如果您公开您的源代码——那就更好了。

让您的技术人员发声

走向开放的下一步是信任您的技术人员。与其隐藏您的技术技能，不如开设一个博客来展示您的成就，在博客中谈论您的团队以及他们的工作方式。这表明您像重视资金一样重视您的技术。

当然，也存在问题！

没有问题，任何事情都不会立即奏效。假装情况并非如此毫无意义。并非您使用的所有内容都适用。在我们目前拥有的技术中，存在浏览器差异和支持问题。在 HTML5 中嵌入音频和视频应该很容易——应该像指向视频一样简单地将其添加到文档中。但是，不同浏览器之间的版权和许可差异使得需要以 3 种不同的格式提供视频。

您不能指望每个人都拥有最新的浏览器。IE6 仍然存在，并且是任何开发人员的一块心病。但是，它正在减少，微软正在积极解决这个问题。

使用可以帮助您的工具

规范的工作完全是公开的，任何人都可以参与。您可以将 HTML5 看作是当前的辩论俱乐部，并且邀请您陈述您的观点。网络上有大量免费的最新文档可供您使用——例如，在 HTML5 Doctor 上，甚至还有一本完整的书籍 深入 HTML5，作者是 Mark Pilgrim。

Modernizr 是一个嵌入到您的产品中的 JavaScript，它测试对所有新技术的支持情况。它在 HTML 元素上添加类，供您读取和做出反应。HTML5 模板 是一个复制粘贴的 HTML5 项目启动模板——它包含 Modernizr 并重置 CSS，并为您提供正确的服务器设置。

Vid.ly 是 encoding.com 提供的一项服务，它将视频转换为所有必要的格式，并创建一个指向视频元素的单个 URL。Vid.ly 不仅为浏览器创建视频，还支持每种手持设备和游戏机。它甚至可以根据最终用户的连接速度创建文件大小较小或较大的视频。

Appmator 可以一键将 HTML5 网站打包成 Google 应用。

Build.phonegap.com 将 HTML5 应用程序转换为所有设备的原生代码，并在云端为您完成。

成为演变的一部分

HTML5 和新技术不应仅限于极客和手动编写所有产品的人员。我们应该努力构建允许我们使用新技术构建产品，并将到目前为止仍然是桌面工作的任务迁移到浏览器的产品。已经有一些很好的例子了。

• Popcorn 和 Butter 允许您将视频内容与网络内容同步，并将其作为演示文稿格式发送给联系人。
• Aviary 是一个在线 HTML5 图像编辑器。
• Scribd 抓取 PDF 和 Flash 文档，并将其转换为 iPad 上可读的 HTML 格式。
• Diagramo 是一个用于流程图和图表绘制的 HTML5 编辑器。
• Slideshare 使用 WebSockets 进行聊天和网络广播。

不要假装新技术与您无关——让我们共同努力——你知道——为了一个更好的网络！