The expressive web.com beta 版简介

目录

• 为何使用 beta 版的形式？
• 经验教训
• 反馈意见
• 更多信息

要求

用户级别

全部

最近，我们启动了一个一直在着手处理的新站点的 beta 版本，即 theexpressiveweb.com 。这是我们在 Big Spaceship 的协助下整合的一个项目，目标是创建资源和示例，突出强调当今的 Web 中新增的创新、有表现力的特性（如图 1 所示）。除了强调和提供有关 12 种全新 HTML5 和 CSS3 特性的信息之外，这个站点本身也广泛利用了多种新特性，例如 CSS3 过渡、 CSS3 变换、 web 存储等，以便提供极富视觉冲击力的资源，帮您进一步学习 HTML5 和 CSS3。

图 1. Expressive Web 登录页面

该站点突出强调了以下 HTML5 和 CSS3 特性（如图 2 所示）：

• CSS3 动画
• CSS3 渐变
• CSS3 媒体查询
• CSS3 阴影
• CSS3 变换
• CSS3 过渡
• CSS3 web 字体
• HTML5 音频
• HTML5 画布
• HTML5 表单
• HTML5 视频
• Web 存储

每个特性页面都包含：

• 该特性的一个演示。
• 有关浏览器支持的数据。
• 外部使用该特性的示例链接。
• 更多深入资源和教程的链接。
• 特性的检测和回退战略。

图 2. 每个 HTML5/CSS3 特性都包含一个演示和一些与特性相关的资源。

目标在于提供新特性的快速简介和理解，同时提供信息和链接，使设计人员和开发人员能够更加深入地了解该特性究竟是什么、它能用于哪些用途以及如何使用特性。

为何使用 beta 版的形式？

这个网站为什么要采用 beta 版本的形式启动？最简单的答案就是，网站中仍然存在某些 bug，特别是在旧版本的浏览器和某些设备中体现得更加明显。尽管如此，我们仍然决定将该网站以 beta 版本的形式启动，以便与社区分享资源和信息、分享我们在开发这个网站的过程中掌握的一些经验教训，同时获得有关网站的反馈意见。

早在几个月前，在启动这个网站的开发工作时，我们制定了野心勃勃的计划，希望得到一个利用和强调广泛的前沿特性的网站。实际上，事后回想起来，当时确定的范围或许有些过大。在 Web 开发中，除了处理常规的浏览器内问题之外，我们还要处理在浏览器之间大量未得到一致支持（或者完全未得到支持）的网站核心功能。尽管这是旧版本浏览器的一个特殊问题，但对于目前的大多数浏览器来说，这个问题同样不容忽视。举例来说，网站使用 CSS3 过渡来实现页面过渡的动画效果，这种特性是 Internet Explorer 9 当前发布版所不支持的。

我们原本可以选择仅支持最新浏览器，但我们认为，即便不提供特性演示，各页面中列出的资源和内容也仍然对开发人员和设计人员极有价值。因此，尽管我们所强调的大多数特性不受旧版本的浏览器支持，但该网站仍可在 Internet Explorer 7 等旧版本的浏览器上运行。

当然，Web 开发确实要处理浏览器之间的差异。您需要在开发时考虑到这一点，并且为所需特性不受支持的情况开发回退战略。但就我们面对的情况而言，由于我们专门强调新特性，因此必须处理比一般站点更多的浏览器支持和实现问题。

经验教训

那么，我们在创建广泛利用全新的 HTML5 和 CSS3 特性的网站的过程中，学到了哪些经验教训？

尽早确定是否支持旧版本的浏览器

在使用新特性的时候，支持旧版本的浏览器会使项目的复杂性进一步提高。您添加的新特性越多，就要付出越多的努力来在旧版本的浏览器中实现和调试回退解决方案。

至少应保证您已经很好地理解了新特性能降级到怎样的程度。举例来说，如果 web 字体不可用，那么您可以轻松回退到内置字体。然而，如果 CSS3 动画对于您的网站至关重要，那么您就可能需要开展额外的工作，在 CSS 动画不受支持的情况下通过 JavaScript 实现动画。

如果确实决定了支持旧版本的浏览器，那么就需要考虑减少您的网站依靠的新特性的数量。

仅使用对网站必不可少的全新 HTML5/CSS3 特性

对于在项目中使用的每一种新增前沿特性，您都必须考虑以下各项的开发时间和成本：

• 为不支持特性的浏览器开发回退战略。
• 处理支持特性的浏览器之间的特定实现差异。
• 针对浏览器的新版本改变其特性实现的情况做好准备（下文将进一步加以说明）。

如果您的目标是不支持某些新特性的旧版本浏览器，那么这样的考虑尤为重要。

这并非表示不应使用新特性，而是表示您需要预先考虑到可能会产生的开发和维护成本。通过仅关注网站必不可少的特性，即可帮助降低上述几项的整体影响。

在发布后制定更多的维护计划

这个问题当初曾经令我们措手不及。如果您正在构建广泛利用全新的 HTML5 和 CSS3 特性的网站，那么就需要计划超出常规的维护资源。

这是由于 HTML5 和 CSS3 包括许多相对较新的特性，而这些特性不一定已经实现了标准化。这些特性是如此之新，因此各发布版之间的浏览器实现可能（也必将）有所不同。

遗憾的是，我们走了一段弯路才发现这个问题。在网站启动前大约一个星期，Apple 发布了 Safari 5.1，这个发布版导致我们的网站中的一些内容出现了问题。网站启动的时间越长，浏览器发布版的数量就越多，因此网站中可能出现问题的内容也就更多。当然，这适用于任何 Web 内容，但考虑到这些特性的新鲜程度，在使用某些新增 HTML5 和 CSS3 功能时，问题将尤其严重。

性能不仅仅与 JavaScript 有关

最初启动项目时，我们的主要性能忧虑在于 JavaScript 在不同浏览器之间的执行差异（特别是在旧版本的浏览器中）。然而，在开始实现某些 CSS3 过渡以便获得页面过渡动画效果时，我们必须处理不同浏览器间的动画性能差异。

由于越来越多的网站开始使用动态图片，因此这将成为内容制作者面对的一个重要问题。举例来说，对于 CSS3 过渡，产生差异的原因主要有两种。

首先，某些浏览器对 CSS3 过渡进行硬件加速，这能够提供非常出色的动画性能。然而，并非所有浏览器都能进行硬件加速。对于我们来说，在过渡未被加速时，动画性能可保持相同，但 CPU 占用率将显著升高。

其次，在各种设备上，动画内容的性能概况可能截然不同。不仅仅是桌面浏览器和设备之间的差异，还包括不同设备之间的差异。举例来说，我们发现，对于我们的项目来说，Apple iPad 提供的动画性能比摩托罗拉 XOOM 更为出色。

关键在于理解特定动态图片的界限如何，在性能降级到某个点时，您需要考虑实现回退解决方案，以便使用更加精简的动画。这样的界限根据项目的不同而各有不同。

对于 theexpressiveweb.com，在浏览器或者设备无法流畅地播放动画时，网站将切换为使用更简单的过渡，直接显示图片，而非从侧面采用动画效果显示。

不要一次移动过多内容

这一条非常简单，但作为一条通用规则，同时采用动画效果的内容越少，动画执行的就越流畅。

在 theexpressiveweb.com 中，更改页面时会发生以下情况：

• 页面导航和信息元素以动画形式淡出
• 页面演示显示
• 页面导航和信息元素以动画形式淡入
• 演示资源以动画形式淡入

某些浏览器可以同时处理所有这些元素的动画效果。然而，某些浏览器难以流畅地实现所有这些元素的动画效果。我们解决这个问题的方法就是首先以动画形式淡入导航元素和内容，随后开始页面 / 演示过渡。

这不仅能够提供更加流畅的动画，还能尽早为用户提供信息和内容，这两个方面均可使网站的响应速度更快。

为关键特性制定回退战略是开发计划的核心组成部分

您应为所使用的任何全新 HTML5/CSS3 特性制定回退战略。对于对站点或者您尝试打造的体验十分关键的特性来说，这一点尤为重要。对于这些特性，您需要从开始便开发回退战略，将其作为网站开发和设计流程的关键组成部分。

对于 theexpressiveweb.com，我们广泛利用 CSS3 过渡来实现页面过渡的动画效果。这些动态图片是网站体验的关键组成部分。由于它们极其重要，因此我们在开发网站时必须从最初起便考虑到回退战略。

如上所述，如果 CSS3 过渡不受支持（或者性能不佳），那么网站将回退至较为简单的页面过渡动画。这仍然能提供良好（但略有降级）的用户体验。

我们原本可以回退到使用 JavaScript 的过渡动画，但我们发现基于 JavaScript 的过渡在某些情况下（特别是在某些设备上）表现不佳。我们仍然要为这些场景实现一种更简单、更高性能的过渡，因此决定不实现利用 JavaScript 的回退。

在设计和开发时时刻谨记移动

在设计普通网站时有必要考虑到移动浏览器，在设计和开发使用动态图片的网站时则尤为重要。除了必须处理设备分辨率和输入方法的差异之外，您还需要特别关注任何动画的性能。

大体上，移动浏览器可为新特性提供更出色的整体支持，同时也能为 CSS3 过渡、变换和动画提供良好的硬件加速支持。然而，任何动作和动画都有着给浏览器和设备施加压力的方面。在开发周期的早期理解这些限制将使您的开发过程更加顺畅。

使用 Modernizr

这方面要说的不多。如果您正在使用新特性，就需要确保浏览器支持这些特性。 Modernizr 提供了最便捷、最健壮的方法来检测浏览器支持哪些特性。

如果需要频繁检查网站中的特性支持，那么可能值得在初次加载时完成所有这些检查，随后保存结果；而不是在每次需要时进行检查。我们发现，在某些情况下，这能显著改进初始化性能。

工具

我们经常听到的一个问题就是：你们使用哪些工具构建了这个网站？具体来说，你们在构建网站时是否使用了 Adobe Edge Preview ？

首先，我们的团队使用的工具与其他 Web 设计人员和开发人员用于开发网站的工具完全相同。这其中包括 Adobe Dreamweaver 、 TextMate 、 Coda 和 Photoshop 等工具。我们还利用 Adobe Flash 创建了 HTML5 Audio 页面中使用的 sprite sheet 动画。

然而，我们并未使用 Adobe Edge Preview 创建网站的动态图片。几个月之前，在我们启动项目时，Edge Preview 仍然处于开发过程之中。更重要的是，当前的 Edge Preview 实际上并不是以这种动态的运行时动画为目标。

正如 Adobe Edeg 网站中的示例所强调的那样，当前的 Adobe Edge 预览版 关注的是创建静态的创作时动画。尽管您可以通过 JavaScript 获得其输出，但这并不是本发布版的主要关注点。当然，这仅仅是一个预览版，未来发布版中有计划提供挂钩程序，以便实现 theexpressiveweb.com 中的那种动态、事件驱动的动画。

然而，在开发 Flash、与 Flash 社区密切合作的过程中，我们学习到的一件事就是：工具中创作时实现动画的内容以及以编程方式在运行时实现动画的内容之间存在着一种平衡关系。举例来说，对于 theexpressiveweb.com，Adobe Edge 可能对为所有页面内容和导航元素迅速创建动画和过渡极有帮助。但对于构建演示的块动画，我们仍然要使用 JavaScript 和 CSS3 过渡，在运行时实现各个块的动画效果。这是因为动画的复杂性、类似的动画使用的次数（我们的网站中是 12 次）、实现动画的项目的绝对数量以及重用代码模型添加新动画的简便性。Adobe Edge 支持此类需要实现数百个元素的动画效果的复杂动画，但在某些情况下，您可能仍然需要直接使用 JavaScript 和 CSS。Adobe Edge 将为您提供选择的机会。

Adobe Edge 的最终目标在于提供在两种模型中工作的灵活性。然而，在第一个预览版中，团队关注的主要是创作时动画。

反馈意见

该网站是 beta 版本，但我们乐于倾听任何反馈、问题或者您遇到的难题。您可以通过 theexpressiveweb_feedback@adobe.com 将反馈意见发送给我们。

更多信息

如果您希望进一步了解我们开发这个网站的方法或者 HTML5 和 CSS3 的整体情况，请关注 8 月 5 日星期五在纽约举办的 HTML5 Camp 活动。本次活动中将有大量与 HTML5/CSS3、Adobe 与 HTML5 相关的研讨会，此外，本项目的首席开发人员 Stephen Kock 也会主讲一次有关 theexpressiveweb.com 的研讨会。

我们还在 theexpressiveweb.com 中整理了一个资源页面，其中列出了多种 HTML5/CSS3 入门的有用资源。当然， beta.theexpressiveweb.com 也是一个有关具体特性的出色资源。

图 3. theexpressiveweb.com 上的其他资源

最后，您可以访问 Adobe 与 HTML5 展示站点，进一步了解 Adobe 围绕 HTML5 开展的全部工作。

本文遵守知识共享—署名- 非商业性使用- 相同方式共享3.0 Unported License (Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License) 许可条件。

查看原文： http://www.adobe.com/devnet/html5/articles/introducing-expressive-web.html