写点什么

The expressive web.com beta 版简介

  • 2011-08-19
  • 本文字数:4783 字

    阅读完需:约 16 分钟

目录

要求

用户级别

全部

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

图 1. Expressive Web 登录页面

该站点突出强调了以下 HTML5 和 CSS3 特性(如图 2 所示):

每个特性页面都包含:

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

图 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 开展的全部工作。

clip_image007

本文遵守知识共享—署名- 非商业性使用- 相同方式共享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

2011-08-19 03:47969

评论

发布
暂无评论
发现更多内容

2023 届 36under36 发布,涛思数据 92 年联合创始人侯江燚上榜

爱倒腾的程序员

时序数据库 taosdata

ipa文件怎么安装到iPhone手机上?

雪奈椰子

靠这份GitHub 标星80K的图解算法,杀进大厂!

程序知音

Java 数据结构 算法 后端技术 算法与数据结构

天翼云CDN全站加速产品对websocket协议的支持

天翼云开发者社区

云计算 CDN

免费堡垒机选择云堡垒机可以吗?哪家好?

行云管家

堡垒机 云堡垒机 免费堡垒机

vue组件通信方式有哪些?

bb_xiaxia1998

Vue 前端

美团前端vue面试题

bb_xiaxia1998

Vue 前端

万物可卷!低代码充满想象,能打敢战

引迈信息

低代码 JNPF

免费下载|《建设数字中国 升级数智底座-企业数智化底座白皮书》

用友BIP

2023用友BIP技术大会

打造河南水务行业数智化标杆!中州水务电子化采购平台正式上线

用友BIP

这年头怕数据泄露?全密态数据库:无所谓,我会出手

华为云开发者联盟

数据库 后端 华为云 华为云开发者联盟 企业号 5 月 PK 榜

量化交易系统开发合约策略

薇電13242772558

量化策略

滴滴前端必会vue面试题汇总

bb_xiaxia1998

Vue 前端

阿里大佬耗时半年!肝出了这1015页分布式全栈手册

程序知音

Java 分布式 java架构 Java进阶 后端技术

ipa如何安装到iphone

雪奈椰子

机器学习平台PAI支持抢占型实例,模型服务最高降本90%

阿里云大数据AI技术

人工智能 机器学习

DPU 厂商大禹智芯加入龙蜥社区,共建领先的 IT 基础设施

OpenAnolis小助手

开源 操作系统 龙蜥社区 DPU 大禹智芯

企业数字转型加速器!居然是他!该不会还有人没用上吧?

加入高科技仿生人

低代码 数智转型 智能科技

vue组件通信6种方式总结(常问知识点)

bb_xiaxia1998

Vue 前端

使用 NFTScan NFT API 开发一个多链 NFT Marketplace

NFT Research

API NFT\

亚马逊云是哪个国家的?收费标准贵吗?

行云管家

云计算 云服务 云管理 亚马逊云

阿里巴巴“高并发”核心笔记!《基础+实战+源码+面试+架构》

程序知音

Java 并发编程 高并发 java架构 Java进阶

创新灵感来源于用户实践,TDengine 首次公开四项专利申请

爱倒腾的程序员

时序数据库 #TDengine taosdata

Pose泰裤辣! 一键提取姿态生成新图像

华为云开发者联盟

人工智能 AI 华为云 华为云开发者联盟 企业号 5 月 PK 榜

解密领域驱动设计(DDD):搭建强大、灵活的软件架构神器

xfgg

Java 架构 DDD 领域驱动模型

虚拟化技术 - CPU虚拟化

天翼云开发者社区

cpu 虚拟化

如何让数据安全管理工作化繁为简?uDSP 十问十答

原点安全

数据库 数据安全 动态脱敏 分类分级 uDSP

Cloud Studio 内核升级之触手可及

CODING DevOps

软件工程 Cloud Studio 云端IDE

使用增强版 singleflight 合并事件推送,效果炸裂!

捉虫大师

golang 性能优化

ChatGPT与深度学习的完美融合:打造智能化推荐系统新时代

蓝海大脑GPU

行云流水| CI 3.0 云原生构建全新上线

CODING DevOps

DevOps 云原生 软件工程 研发效能 持续构建

The expressive web.com beta版简介_Java_Mike Chambers_InfoQ精选文章