深度剖析“逐漸消失的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.