HTML5 的幾個範例

Selection_001
應該很多人已經聽過 Apple 跟 Google 不斷地在鼓吹 HTML5 ,Apple 甚至用很強硬的態度撇開 Adobe 的糾纏,可是 HTML5 到底能作些什麼?似乎只有播播影片而已?如果網頁設計師還不清楚什麼是 DHTML、什麼是 HTML5 ,大概會很快的就被歸類回美術人員的職位與水準了。

雖然 HTML5 的整個規劃還在草案階段,但是已經很快速的被 W3C 所接受,而新穎的瀏覽器也很快的就開始支持這些新的特色,而所謂新穎的瀏覽器主要是指 Google ChromeSafariFirefox 、Opera 這些瀏覽器, IE 則可能要到第 9 版才有可能支援。

Apple 在發出拒絕 Flash 的聲明、尋求社會支持他的理念時,網站也同時展示出了他們用 HTML5 做的幾個 DEMO:HTML5 Showcase
最後丟了一句話:
Developers: Learn how to do it yourself. (XDDD)
但是這個 Demo 網站卻只能用 Safari 看...

事實上已經有不少 HTML5 網站範例出現了,在 8 Simply Amazing HTML5 Canvas and Javascript Animations 這篇文章當中介紹了八個簡約的 HTML5 網站,這些網站用了 JavaScript 配合 HTML5 的新標籤 Canvas 做出非常吸引人的效果,當然,要看這些網站請用「新穎的」網頁瀏覽器:

Tunnelers
只要點住滑鼠就可以看到華麗的效果;
Burn
滑鼠滑過就產生燃燒的效果;
The Mesmerizer
迷幻的格子變化;
Cheloniidae Live
透過指令與數學邏輯去繪製數學圖形,令人相當驚豔啊...
Bomono
追著滑鼠的繪圖指標,能夠畫出非常動態的效果;
Canvas 3D engine
3D 圖片牆,後端直接連結 flickr 的相片庫;
DDD
追隨滑鼠形成的線條,有某整程度的立體感與旋轉;
Plasma Tree
這個大推,非常的漂亮,在滑鼠點擊的地方就會長出螢光樹出來;

這些網站都沒有使用其他的外掛(不像 Falsh 需要 Flash Player),目前試驗過後,在 Google Chrome 當中表現最好,設計師只要熟悉 HTML 、 JavaScript 與記事本就可以開始創造網頁,如果再配合上 CSS3 將可以創造更多漂亮的視覺效果與互動效果。事實上觀看這些網頁的原始碼,有許多效果是根基於「數學計算」的基礎上,看來以後數學不好的人可能連網頁設計師都當不了。如果現在還有企業在製作網站的時候,會以 IE6.0 為開發標準,最好是儘快離開比較好。

這個網誌中的熱門文章

Gatsby 廣告中木村拓哉機械舞的背後

玩玩軟路由系統

Google Doodle : Pacman 小精靈