深度剖析“逐渐消失的Flash网站”

导言：
如果你想要一个盛大的视觉效果的网站，含有复杂的交互以及跨浏览器的富体验，flash是唯一的选择。确实如此吗？回答是“不是”。随着现代浏览器的进步与提升，以及JavaScript库的被广泛采纳，使用flash显得没有意义了。但是考虑到渐进增强的需要，目前flash站点在web上仍有一席之地。

在当前的景观技术下，以及通过诸如相框，netbooks、手机、电视这类设备访问互联网时，网络标准的好处要大于那些flash，尤其是当提供内容是在各种设备上面对更广泛的受众时。

Flash是一个坐在浏览器扩展功能顶部的专利产品 。尽管flash可以提供在某一段时间内可能缺失的功能，但是对于现代浏览器而言，其所带来的价值几乎为0. 随着越来越多的设计师以及开发人员意识到web标准的好处，以及开始使用一些HTML5和CSS3的特征，我们会更少看到由Flash驱动的网站。

Flash vs Web标准之争

倡导者们宣传web标准已经超过10年了。设计者与开发人员之间的争论犹如同性恋结婚这类争论般激烈，这导致了在领域中最聪明的一些人之间一些不舒服的分歧。（图01）

图01

随着最近iPad宣传不支持Flash，以及iPhone对Flash的持续不支持，这个争论已经上升到了社会发展的高度（包括Adobe和 Apple他们自己）。随着苹果公司的反Flash立场，那些基于Flash的网站已经无力再去争论什么了，毕竟他们面对的是丢失一个巨大的潜在的用户群。

最后，Flash会让自己适应移动设备（2.5亿的设备预计在2012年底将全部支持），但是这真的仅有一小部分的争论，且仅有一个比较好的论证是有web标准倡导者提出的。

在这个问题的核心是如何提供给用户一个前所未有的体验，而不在于技术或平台。

“HTML5 vs. Flash” is the wrong discussion. “Accessible rich media” is the right one.

— Jeffrey Zeldman (via Twitter)

最后，我们都只是想创建可访问和易于使用的网站，忽略工具本身。

#p#e#

良性竞争

在Web最初的那些日子里，Flash几乎是提供跨浏览器富互联网体验的唯一途径。浏览器对CSS以及JavaScript支持不一致，使得CSS以及js成为不值得依赖的麻烦。（图02）

图02

Flash在早期就看到了巨大的成功，并且迅速向前推进。原本主要是用来制作动画的小小的程序迅速成为有价值的开发环境。开发人员和设计师都选择了集中在这方面努力，经常使他们自己从开发实验室及对专有技术的支持中分离出来。Flash网站接管了web，以及用户开始期待的web标准不允许开发者创建的体验。

Web标准可能是暂时落后了，但它依旧持续不断的被那些愿意去拥抱一个开放网络的从人员向前推进。

Web标准：收益以及采用的原因

用户总是期待丰富的用户体验，在大多数情况下，这些精湛的体验现在可以使用HTML, CSS和JavaScript实现，这些都是基于web标准的。（图03）

图03

网站是基于Flash还是web标准建设的界线已经变得模糊了。如果不是通过查看源代码，乍看之下，即使是最精明的网站开发人员也不能辨别出网站使用的技术。

丢弃Flash而支持web标准的网站每天都在增加。即使这些决定受iPad及iPhone不支持Flash影响，但久而久之，他们会发现使用web标准带来的好处。

#p#e# 

当前趋势
曾经几乎只能在Flash中执行的东西现在可以轻松使用JavaScript外加一点点的创新完成。标准的广泛采用可以归功于轻松使用JavaScript库来增强交互和CSS在当前浏览器的支持。

视频对于推进web标准迈出了重要的一步。视频可以说是过去只能使用Flash呈现的少数几个东西之一。而目前最大的飞跃在于YouTube已经采用了HTML5视频元素（虽然测试中），其允许现代浏览器绕过Flash插件，而使用浏览器自带的视频播放器。

虽然HTML5视频收到争议（由于当前的解码器崩溃）以及业绩报告不温不火，但是这些问题都会被解决的。网站开发人员将实施HTML5视频并选择合适的解码器。当最大的网站做出了这项决定，我们有理由相信，我们会有一个最终的事实的标准，为浏览器提升性能。

现代浏览器的采用
HTML5和CSS3代表了提升本地浏览器的性能所做的巨大努力，许多浏览器供应商已经实施他们的规范，即使他们没有多大的改变。我们有很多期待：CSS动画，canvas，本地存储，地理位置和其他规范，这将使得web标准步入一个新时代。

尽管我们还要很多年才看到浏览器100%的支持这些规范，并且绝大多数的用户都升级到这些浏览器，如果我们接受这些进步的加强的内容，我们将更好的在开发者中推行web标准。

渐进增强
学习生产渐进增强的内容，放弃在每一个浏览器中像素级的完美呈现，在旧的浏览器中拥抱优美退化可以腾出时间专注于其他领域的发展，如可用性和平台-传输的不可知论。（图04）

图04

如果您的网站的用户没有启用JavaScript或CSS的，他们仍然可以以一个更有限的方式访问，这并不同于Flash网站，Flash网站是典型的在缺乏Flash与JavaScript情况下不提供任何内容的。

脑中谨记渐进增强的设计，万丈高楼平地起要求设计师和开发工程师对网站的基础设施做更多的思考，这往往在自上而下工作时（例如设计一个网站，然后考虑到撤回）暴露各类出现的问题。

#p#e# 

智能手机浏览器与上下传输
移动网络目前仍处于起步阶段，通常在设计过程中可有可无，而基于标准的设计在手机上就像老式的桌面浏览器上显示那样赞，在没有Flash插件的情况下，网站还可以提供一个可接受的体验而不需要付出额外的努力（这在Flash网站上是很难处理的）。

移动Web浏览正成倍的增加，忽略这些用户显然是不明智的。 Web标准是提供更丰富的移动浏览器交互功能的唯一选择。

内容管理
给网站所有者和编辑的能力，编辑里面的内容管理系统的交互式内容的手段不必与Flash开发人员协调，以建立和维持体制外的内容。许多机构已放弃为WordPress供电网站，使用JavaScript来提升经验，可快速方便地更新内容，允许投资组合和闪光。

给予网站所有者和编辑人员在内容管理系统内部标记交互内容的能力就意味着不一定非要与Flash开发人员协作创建和维护系统之外的内容。许多以 WordPress驱动的机构已经舍弃了Flash，转而使用JavaScript来增强用户体验，同时允许很迅速简单地升级与内容更新。

开放性
Web标准正如他的字面意思（例如制定标准的代码结构和服务协议），网站外部的用户代理和脚本可以直接从HTML中获取数据。搜索引擎(Search engines)，微格式(microformats)，订阅(feeds)，翻译(translation)和书签(bookmarklets)，这些正是由于数据开放性和一致性才大放异彩的。（图05）

图05

如果我们希望网站能够真正可扩展且相互关联，微格式和微观数据内容以及APIs可能就是答案。否则，我们将受困于自己竖起的围墙里，停留在和几天年相同的位置上。

自由
许多人认为，互联网背后的技术应该与过去一样，是公开的非竞争的。人应该自由地消费与创造信息，而不应该受限于许可限制，或是诸如Flash、Silverlight或者其他公司所拥有的技术的合法性。

使用web标准创建和传输内容并不是最好的技术，但是其支持了开发互联网的所核心的东西–自由。

#p#e#

Flash可以也将继续将很多事情做的很好

Flash驱动的网站逐渐消失并不意味着Flash本身会随着一起消失。太多的建立已久的内容与基础神奇般的消失。没有对组织与进程进行大量的重构与重建，大量的Flash开发人员将继续被雇佣，大量的Flash广告将针对那些准备忽略它的人。

我们感激Flash，正是由于Flash的存在，才有了如今的web，这是它应得的荣誉。即使其展示的潜力要小于其他早期出现的插件技术，例如 Java applets，在用户的无缝传输与开发部署易用性方便有着很赞的平衡。其他一些web技术，例如VRML和SVG，试图挑战Flash在web领域的地位同时又符合标准。

如果没有Flash以及其带来的创新，现在的互联网指不定在哪儿呢！

易用性
出了门，对于开发人员和设计人员来讲，Flash是视觉化的，易用的应用程序，可轻松实现动画效果，进一步扩大到服务器端应用程序。（图06）

图06  孩子也能用

由于易用性，对于启蒙设计者或是开发者。Flash有着更低的门槛。加上与Adobe其他应用程序套件的结合，在设计师的工作流程中，Flash非常适合。

一致性
不可否认的是，多年来是唯一的持续的跨浏览器平台的同时有着丰富交互体验就是Flash。Flash还是唯一的可以在旧的浏览器上传输视频和音频的方式，而且这将依旧多年不变。

如果你对字体有些偏执，你的网站上需要一种特殊的字体，但是面对当前浏览器对字体的支持，你只能哭了。好在有个捷径，就是使用Flash及swfObject 到@font-face和各种形式字体的广泛支持。

#p#e# 

标准也不难令人信服
web标准日渐增多，我们固足于对旧浏览器，那些只能使用Flash才能传送音频视频和一些复杂数据交互的旧浏览器的的支持。好在浏览器提供商与时俱进，我们如今可以开始使用HTML5音频和视频标签了。但是我们依旧要想想在旧浏览器上如何传输媒体。

这同样使用于canvas元素，canvas元素可以传送复杂的视觉呈现，3D动画效果以及游戏。如果想要支持类似IE6的浏览器，提供一个适宜的 canvas元素的fall-back也是可以的。 在这种情况下，Flash可以说是最好的选择。一如往常，您的现有和潜在的用户决定了你的方向。

Flash的渐进增强

最好的Flash开发工程师和web标准人群采用相同的方法，使用Flash作为一个层来增强他们的网站与应用程序。如果持续，在实现精湛的体验，服务移动设备，触探搜索引擎和其他用户端技术上，Flash仍有一席之地。Flash注射技术是融合两者做简单的方式。

Flash的未来
Adobe是那种绝不会让产品停滞不前的公司。可以确信的是他将尽可能的将Flash推向移动设备。（图07）

图07

通过Creative Suite 5(Adobe cs5)，开发人员将能够使用iPhone包装程序输出原生的iPhone项目。Flash将迅速从早期的动画应用程序转向一个完整的桌面和移动设备应用程序开发环境，这需要借助AIR及相关进步（AIR在移动空间可能相当迅速）的帮助。

随着在桌面程序和移动设备之间稳定传送应用程序需求增加，Flash开发人员很可能会有大的需求。

#p#e#

Flash, HTML, CSS和JavaScript都仅仅是工具

无论是web标准，还是Flash，抑或其他插件技术都是创建web内容的工具。即使Flash在网站领域逐渐衰退，Flash开发人员也没有任何理由去担心被淘汰。

不管你使用的是什么工具，只要能够创建丰富的互联网应用程序都是正确的，过渡到web标准可能比你想得还要早。（图08）

图08

Flash和Web标准开发人员的共同点要多于他们的不同

界面和交互设计， 排版，布局，平面设计和面向对象编程对于两种技术都有举足轻重的作用。

两方的开发人员对许多一样的问题进行争论。他们都着手创建一个伟大的用户体验，设计直观的互动，让网站更易于使用。所有这一切都是并非技术本身，而是它背后的人。

基于web标准站点大放异彩

下面是一些拥抱web标准，同时又有丰富交互的网站。如果你想跟随当前趋势，许多基于标准建立的优秀的站点在网站上展出。例如NotCoffee和jQuery Style。

#p#e# 

优秀网站分享

Pigeon and Pigeonette
这个网站就一个页面，通过导航进行过渡。除了显示的信息，其还提供了几个Flash游戏。

Good Works Media
一个代理网站，首页有个手风琴折叠结合lightbox的效果。

Made by Elephant
水平手风琴效果的网站。

Artopod (English translation)
复古设计，在内容上有个高度固定的“窗口”。

DreamerLines
大胆，多彩，全屏印象的单页面，组合lightbox。

Serial Cut
主要全屏图象的组合，包括立体，平面设计和摄影。

Kobe
比较传统的站点，有着轻微的导航效果和图片和内容也随着导航变换。

Unowhy (English translation)
另一个手风琴效果网站，有着光滑的内容过渡和大量的“悬停”效果。

#p#e# 

Creative People
非常有创意的图像，大量的Ajax，有许多工作室作品示例。

World of Merix
一个全屏幕的客户可拖动地图的机构，其内容为流畅的灯箱效果。

The Sixty One
常喜欢的应用程序，在享受音乐服务的同时让你浏览艺术家和相关信息。当你听的时候，信息就会出现在乐队上。

Banadies Architech
高亮的建筑风格的网站作品，当点击一个导航的时候，页面会很优雅地移动。

Paul J. Noble
黑色风格网站，导航实现方法很有趣。

Adult Swim Shows
最近上线的网站，使用全屏的图片做导航。

Glyde
一个市集网站，有着简单的交互，产品使用切换导航，细节描述使用灯箱效果。

Alex Arts
Alex Abramov个人站点，全屏图像，弹出式内容。

Rix
Adam Rix个人作品，全屏图像和精致的导航。

Eric Johansson
个人作品，设计很有趣，界面可滚动。

#p#e#

来自（接近）未来的网站

下面是一些“实验性”的网站，证明什么的web标准的可能性。警告：这些作品可能只在最现代的浏览器下有最佳效果。

BespinMozilla提供的在线编辑器。

Sketchpad
一个简单的绘图程序。

JavaScript Wolfenstein 3D from Nihilogic
使用web标准方法实现的经典的游戏。

Leaf Transform from Disegno Cetell
使用canvas元素实现的简单的落叶效果。

Canvas Animation Demo
使用canvas 元素实现的卡通动画。

Canvas Experiment from 9elements
音频可视化，响应鼠标。

Ball Pool
一个基于物理的演示，让您拖和推着彩色圆圈。

Dynamic Content Injection 来自Mozilla的Paul Rouget
一个“几乎”以假乱真的演示，把图片注入视频。

Canopy Animation
一个可视化的树发生变异，开花结果。

Bean
图片从屏幕上落下。

3-D Cube Demo
一个可拖动的，可缩放的彩色的三维立方体。

JavaScript Bike
游戏，开摩托车，根据地形进行导航。

Comments Visualization
超时评论可视化，作者为Matt Ryall，使用js文件是Processing.js.