Flash: 瀏覽器plugin之死

Flash Player之死是從Adobe宣佈不再做Mobile版的Flash Player開始...
新聞稿

然後是Adobe把Flex放手給Apache基金會的消息
Adobe將Flex捐贈給Apache基金會

本文要說的是從geek/網頁開發者的角度去看的Flash Player (Plugin)之死。如果不熟Flash系列、需要名詞解說或想參考一下Flash開發者的意見可以看下文
Adobe放棄開發行動平台Flash Player之我見

利申: 我是網頁開發者，而且是HTML5+CSS3+jQuery為主，外加cross-browser及cross-platform (desktop+mobile) 。
==================
通常一個plugin會死都是離不開當年Java applet的死亡方式: 慢、browser crasher、安全問題多、有取代技術 (Flash)，儘管當時Applet是很強大但依然不得人心、難逃一死。

(其實applet某些功能是Flash仍然難以取代，所以其實只是衰落而非死亡－是少了很多人用，但某些特殊Applet仍是有的)

而今日的Flash Player面對的問題也是: 慢*、browser crasher、安全問題多、有取代技術 (HTML5)。
( 歷史是不斷重演的。(′_ゝ`) )
* IE是好一點有硬體加速，可是其他Browser都沒有....

然而真正替Flash Player釘蓋的是: 資源緊拙、多重解像度、沒有滑鼠鍵盤的手機和平板。

簡單來說就是: 在Mobile上是得Flash Player無所用。看影片燒電 (硬體支援不足只好去燒CPU)、一堆遊戲看到玩不到 (鍵盤操作的全滅)、網站是燒完頻寬後再加上一整個難用 (解像度問題)...所以就算Flash Player可以配合與其八字嚴重不合的Webkit engine，以desktop環境為主的Flash跟本是不配合，Flash開發者或是Flash Player要改成mobile friendly的方式也很困難。

所以Adobe的Flash派在Mobile Browser上如何努力也是玩不下去。(Apple和M$顯然是老早知道所以從來沒有在自家手機OS的Browser搞Flash支援)

在"Write Once, Run Everywhere"的理想和渴望消滅plugin的HTML5的夾擊之下，Flash在Browser應用上喪鐘已響: 網站這部分在HTML5日漸完善的世界，純Flash網站這種用家不能轉編碼、維護困難、SEO效果不良(架構、語意全滅)、Accessibility差的邪道應該被淘汰；Rich Media (Video & Audio)、傳統動畫應該可以再撐一會，在Video和Audio在戰格式、用CSS3/HTML5做動畫的IDE未完善之時可以作為過渡 (Sencha Animator、Hype、Radi、EDGE/MUSE等IDE離動畫師用的IDE太遠了)；作為Browser Game的前景則是未明－雖然為數極多的新Browser Game仍是Flash，但在Browser Game其中一大市場Facebook自己也在推HTML5時以及開發者把心力投向可以賺錢的Mobile Game的時候，Flash Game的存在價值也許是日漸下降 (儘管因為IE 6-8會死慢很多)。

是以Flash可能會是Browser Plugin橫行的時代的最後榮光: Flash作為IDE應該可以透過Air支援Desktop、LLVM轉原生App去支援Mobile、甚至是HTML支援全平台得以繼續存在，說Flash要死其實是不太正確。然而以Browser Plugin存在的Flash Player則劫數難逃－Mobile上的已死，Desktop的也難逃衰落至Applet般的命運－儘管這要數年的時間。

==================
後記:
其實本文是在barcamp當日在WebOS上惡搞一堆Flash Demo和日後再和動畫師聊天的成品。
後記之後記:
Adobe Flash Player的Developer, @mesh, 出來解畫，政治原因是有但有更多是技術上的原因: Clarifications on Flash Player for Mobile Browsers, the Flash Platform, and the Future of Flash

HTML5 Game - Random Pick #1

有人在G+上問過HTML5遊戲到哪個程度剛好又有人把這個Blog丟出來，因為可以玩的例子真的滿多，所以就在這裡寫一下幾個比較經典的...

[2D]
HTML5做2D Game基本上是廣泛支援，下列的遊戲不論FF5還是Chrome 13也運行的不錯...(IE 9應該也可以，不過我沒有IE 9在手邊就算了)

Infinit Super Mario
我見過可玩性最高的版本，玩的人之多還令Server一度流量爆炸...

Sierra Adventure Game on iPad 
將Sierra經典遊戲製成iPad的webapp重製版。Desktop browser的版本見此

The Legend of Zelda: Link’s Awakening
Gameboy版的移植，有Save & Load，操作見此

[3D]
其實現在也有一些用webGL製作的3D browser game，不過大多數只支援chrome:

ro.me : three dream of black
綞典的WebGL互動網站，訪客可以和3D世界互動－玩完之後更可以製作自己的Dream，超神...

FastKat
3D canvas + webGL，滑鼠閃避遊戲，只是判定太痛苦了...(畫面好花)

Dogfan - HTML5+CSS3的「 お父さん扇風機 」

這是將日本軟銀廣告出現過的「 お父さん扇風機 」（爸爸風扇）用HTML5+CSS3再現的小玩意。

[連結]
DogFan @ heroku
玩法很簡單: 接電再按下面的control XD
基本功能有這些:

• 電力發動: 所以要接插頭開風扇 (點一下插頭就會接電、再點斷電)
• お父さん: 把風扇開起來就會聽到牠的叫聲喔～
• 三段變速: 可以改變風扇的速度，3最快1最慢。另有Slider可以細調

目前只support webkit系的Safari和Chrome-完美版是Mac的Safari，Chrome是轉速有差，Mobile版不論是Chrome或Safari都只有主要動畫及接電效果沒問題
下一個會支援的是FF5，應該在FF 5 release前會完成。IE 9就別問我了，大方向是知道但沒library輔助會很痛苦...

[Source]
本Project有Opensource放在github上喔:DogFan的github

授權是MIT。自行轉host或改造前請讀Readme。

[技術細節]
本文的重點。

風扇組成 - absolute positioning + multiple background，因為是我自己切圖+@evenwu作的psd整理得非常不錯所以我是用了最懶的方法切－就是不做trimming只用show/hide去生png ￣▽￣，變成這部分沒甚麼特別的...
唯一要注意的是為了避免rotateZ block了插頭所以扇葉有加pointer-events:none去預防，不過android的chrome好像不太理會?


扇葉轉動 - CSS3 animation on CSS3 transformation。主要是用rotateZ+linear timing function去轉，所以是用animation duration去控制轉一圈的時間－duration愈短風扇轉的愈快...不過有趣的是就算是webkit轉速看起來也有微妙的不同

• Chrome 11 (Desktop/Mac) - 轉的比Desktop Safari 5快一點 (就是因為這樣才決定用Range Slider)
• Chrome (Flyer) - 轉的比Desktop Safari更快，快至我懷疑是有偷格...
• Chrome (G1) - 明顯有lag所以轉不動或是逆走orz

p.s.1 在某些frequency下會有好像Zoetrope的定格效果...
p.s.2 transform-origin不是50% 50%, 有一點offset...
p.s.3 我有懷疑過是floating point problem，因為我是只用三格keyframe就做完整個animation...


神秘的震動效果 - 條件請自行發掘 XD。那個只是同時更改兩個background的background-position (用common來分)，數字是亂填但效果很不錯 XD。和風扇一樣的是用duration控制速度，不過因為不配合風扇的轉速去變速不自然及震太快太傷眼所以用了一個mapping function+DOM style interface去設定duration


插頭接合 - jQuery+CSS3 Transition on background-position，jQuery做event handler去轉插頭(還有風扇)的state而trigger transition (最簡單是加class)。用transition做而非animation的主因是我要保留最後的background-position + 效果很簡單懶的用keyframe...compatibility並不在考慮之列 (FF4淚目)


插頭垂下 - 目前只有Desktop browser才會正確Play的CSS3 Animation，因為涉及keyframe轉換timing function加上一開始有改state而試了fill-mode，所以一堆mobile browser不是不會處理就是錯亂了 XD
話說做來是想看的人意識到那是可以點的東西，不過因為是一載入即Play+Playtime短所以不太看到而變成考驗browser能力的東西orz


お父さん - HTML5 Audio。HTML本身已有audio的tag和source，不過沒control和autoplay(和隱形沒兩樣)。聲音是用js播放，不過在iOS上似乎不出來...(可能因為聲音太短，有人提過此事)


Slider - 這個是用HTML5 的Range Input去做。因為一開始是在Desktop上做所以value會在mouse up的一剎那處理。另外為了配合上面的數字(slider左至右: 小至大，但和轉速相反)所以value得要做成負數、min/max的值要反轉放(但step要是正數)、handler也得要用Math.abs去處理value，不過event handler用.val()就可以拿到slider的值倒是很方便。(jQuery rocks!)


和Java port相比這個的技術其實很簡單...而且很好改(如果有用compass.app會更好)，時間其實用了去想animation和風扇行為要怎樣才自然－實作只用了3天，除了第一天外其餘都是工餘時間做的...(第一天還有一半時間去和heroku打交道，剩下的在切圖，風扇轉也只是用css去作)

[特別鳴謝]

• @sillyleo, 風扇圖的原型的作者
• @evenwu, 巨大版風扇+PSD檔的作者 (很偉大的任人惡搞)
• @hlb, 音效提供

－以及Twitter(以及plurk)上提供意見的各位 m(_ _)m

Google另一個歡樂的Doodle: Les Paul結他

這個Doodle本來是昨天紀念結他之父Les Paul 96歲生日而作的結他Doodle，因為可以用mouse和鍵盤彈而大受歡迎，於是和Google Doodle食鬼一樣有permalink，而且還加了錄音和play-by-link的功能~

[Link]
Google Doodle : Les Paul Guitar
* 用iGoogle的人要再按一下傳統首頁才看到       已經會redirect到下面的連結了

Google Doodle : Les Paul Guitar (Permalink)
真正的permalink

[結他教學]
How To Play Guitar On The Les Paul Google Doodle (LESSONS)

[關於錄音]
1. 打開上面的結他連結(任一)
2. 看到結他之後按中間的黑色鍵可以用鍵盤彈+開始錄chord (銀色的status bar會有Recording字樣，黑鍵上的紅燈會亮起)
3. 彈完再按一次黑鍵會停止錄音，之後小等一下銀色的status bar裡會有一個可以autoplay的短網址
4. 這個短網址可以給別人，進入這個網址結他自己就會autoplay剛才的錄音

Enjoy, happy Friday :D

(OT: 技術上這個是用canvas和png sprites做UI、flash做聲音操作的小玩意)
(13/6: 更新連結)

HTML5 Little thought: legacy template

Question came from the presentation of @codepo8:

using html5 sensibly
audio and video (video is 'coming soon')

His idea: How about moving  IE < 9 fixes to server-side? Padding with DIVs with classes and no JS for IE?

If think with Responsive Web Design...

The Idea will be: make responsive web design more responsive with legacy web browser.

The reason: even JS patch works, still, legacy browsers are too problematics to developers. (e.g. the speed, DOM incompatibility, etc)

Idea is here but the implementation is problem...may be similar to mobile template (lets call it legacy template), with much more inaccuracy. Also it may be suffer from the problem of versioning again.

IE, please die. Old version of modern browsers, please rest.

HTML5/Browser戰報: HTML沒版號及其他...

HTML5
HTML沒版號: Living-Standardize?
WHATWG:HTML is the new HTML5
2012後WAHTWG會把HTML轉Living Standard，下一版的HTML沒有版本號
HTML5 vs. HTML – Jeffrey Zeldman Presents The Daily Report
Standard大師，Jeffery Zeldman對此事的感想－至少CSS3分出來是好事...

<video>
HTML5 and Web Video: Questions for the Industry from the Community - IEBlog - Site Home - MSDN Blogs
M$出H.264 plugin給chrome，搞啥...?

隱憂1: webM開始有patent pool形成[1][2]，就算有FSF給背書也是官司連場...
隱憂2: H.264本身問題其實不少，有developer聲稱照足spec做仍是會fail
隱憂3: H.264授權是貴死人沒命賠的那種
video這片仍然有很多問題。不過已經有人做出一些很瘋狂的事出來了

WebForm
new form features in html5
Opera又加feature了: 這次連color-picker也搞出來了...

Accessibility
http://html5accessibility.com/
全軍覆沒，一如<audio>... [Spec]
(不過<audio>其實還算是可以用的...)

相關技術
WebGL
gl64k
和js1k相似的比賽，come on 3D programmer!
Exporting video from WebGL
把WebGL輸出video，不過仍需server (node.js + ffmpeg)

瀏覽器大戰
Firefox 4, 5, 6 and 7 to be released before the end of 2011
繼Chrome後FF加入版本號競賽，一年跳(票)三個版本...

微軟將在2月10號公布IE9最終預覽版
IE9 RC，2月10日。CSS人可以先看M$官方的CSS相容性列表...

Mobile browser shares 4/4
Mobile browser戰場系列: 常識(webkit天下)是管用，不過不管Opera明顯是個bad idea...

HTML5 戰報: HTML5 Logo 及...其惡搞 (還有一些雜七雜八的)

本日焦點: HTML5 LOGO

對，就是它啦～W3C在18日公佈了這個HTML5的專用LOGO，有用HTML5 doctype的website都可以掛。同時他們也推出了專屬網站HTML5 Logo，有Badge Builder玩、有T-shirt賣和有貼紙可供索取^{^}~
^{^}全世界的人也可以拿，只要用國際回郵信封(IRC)+足夠郵費即可，美國則用本土信封+郵費。信封則用No.10，不確認買3M出的一定OK
至於這個Logo和Badge的Icon也有故事，詳見製作特輯[Behind the Scene] 、W3C的訪談[W3C interview]

[惡搞物]
最GJ
[by @sinnick]
//我自己(及不少人)的第一印象確實是Transformer...


冒汗

//Twitter: Angry Rabbit

太強大
有人極速弄了個Chrome extension去highlight用html5 doctype的網站... [HTML5 Powered]

絕望
有人做了Flash版...HTML5 logo in Flash

看不見的世界 (Update)
盲人點字版...HTML5 logo in Braille

[小記]
至於我本人對這個logo的感想嘛...「W3C總算有沒有那麼Dry的Badge可以用了!」

雜七雜八的

• CSS3 gradient 語法是mozilla獲勝，webkit的標準gradient會跟隨 [webkit's blog]
• FF4 beta 9，Feature基本上已經不會改現實是還是要改(而且是改不少－有原生webM和IndexedDB) [mozilla hack]，UI還有一點微調 [T客邦]
• IE9有流言是1月28日出RC [tom's hardware/twitter]
• Google會出IE和Safari的plugin 去支援WebM (開倒車?!) [Slashdot]
• Device API的實例 [W3C]

HTML5 戰報: 新API x 2、Chrome打算不再支援H.264

本週叫做有比較搶眼的事發生+我失眠，很快的寫一下:

-新的API有兩個: FullScreen和Navigation Timing。前者一如其名是網頁全畫面化的API，Mozilla在做，只是webkit也說要支援。後者是W3C Draft，用來做網頁Profiling(效能評估)所需的精確時間量度的API，IE和Chrome有做出來，現在Last Call。 [Source]

-這件事絕對叫人反白眼: Chrome打算不再支援H.264 (即.mp4，詳見 Google To Drop Support For H.264 In Chrome )，然後你再去看這個HTML5 video格式支援列表真的想去撞牆－5大Browser沒有共同格式，這是在玩content provider嗎? 再者，把opera mini無視掉幾乎全部webkit手機瀏覽器支援的就只有H.264啊...

而且Twitter上有人提過，H.264之優勢在有硬體支援(GPU或是專用晶片)，Chrome搞這套是叫用家走路嗎?

(OT: Chrome因為API限制是不太可能像FF一樣靠plugin/extension解決問題，超衰)

HTML5/Browser戰報: Adobe HTML5 Tool、Silverlight、w3c html5 test、mobile戰場開打

本文其實是三篇合一篇...

HTML 5 Framework/Boilplate, Round 2

這是上集的延續...以下兩pack做的事和之前的兩個大同小異，所以不外加說明了...

HTML5 Starter Pack

Blank HTML5 Website Framework

這種懶人包只會一直出，每多一個browser就會更新 (遠目IE 9)，HTML5要像HTML4般廣泛支援、輕鬆使用路還很遠...

================
OFF Topic: Yet another HTML4 CSS Reset
.toucan-css-reset
HTML4/XHTML的CSS一向都是用Eric Meyer's CSS Reset或者是YUI: CSS Reset，這是另一個選擇

W3C: 不建議使用在網站上使用HTML5

標題說的是這篇:
W3C: Hold off on deploying HTML5 in websites
超精華版:
「W3C的不建議用HTML 5的主因是"interoperability"(互通性－可理解為跨平台*兼容性)」
*這類指在各種不同環境下的瀏覽器

3行回應:

1. 太過看重十年的科技就永遠只能用十年前的科技 (對，那個叫"I*6"的瀏覽器，我是說你)
2. 沒競爭沒進步，要不是Mozilla和Webkit加入HTML5 & CSS3，IE 9哪會有這麼大的進步? 
3. Open貴在自由，DRM甚至是User ("interoperability")不是阻礙前進的理由

因為這篇實在太過令人想吐糟，Slashdot固然是滿滿的吐糟，不過網上也有正經和諷刺之極的回應:

1. Hold off on deploying HTML5 in websites? - 比較長篇的正經回應
2. CSS 2.1 “not ready for use” says journalist  - 完全是惡搞 XD
   感想: 你永遠不可能滿足所有人，總有不知道升級為何物的User－"interoperability"不是你只用CSS 1.0、Table和frame的理由，在IE也要追Web Standard的今天請不要拿IE來威嚇Web Developer或要他們以IE作指標，就算表面沒說一個真正的Web Developer會打從心底看不起你: Web Standards才是future proof的東西，只看現在或過去終有一天會無法前進、也會被世界遺棄而被迫退下。
   而那天其實不遠。

[Special Thanks: @othree and @patrickliu]

[HTML5] HTML5 framework

HTML5近年已成話題，Apple WWDC和Google IO都有session特別提及HTML5足以見證其重要性。然而因為某些不受Developer歡迎的browser及browser間的差異所以HTML 5未能被廣泛應用...

終於有人忍無可忍，推出了類似CSS framework的東西－HTML5 Framework
這些Framework的共通點是:提供cross-browser support的HTML5 範本和必要的fix，讓你copy一下就可以寫出IE6也看的懂的HTML5~

HTML5 Reset
統client side的framework package，用法和blueprint CSS相若－除了要copy的東西多了很多...

HTML5 Boilerplate
終極HTML5支援，client至server設定(Apache)一應俱全

以上兩者優點是支援遠至IE 6，缺點是檔案太多...

不過就算browser真的support HTML5，一定程度的Reset也是必要，另文再談。