賽拉維的秋天

在這個Session是由Google的工程師Kurrik所進行。
由於這個Session的Demo很多都只能在Chrome進行，
所以還蠻符合HTML5 in Chrome這個主題的。
但其實這也點出了HTML5目前面臨的課題，
那就是它還沒有Final，
而各個瀏覽器都用自己的方式實作HTML5的Feature。

本Session的投影片一如大多數的HTML5 Demo，
投影片本身就以HTML5撰寫，
好處是可以立即展現HTML5的效果，
但是我覺得也有壞處，
那就是沒辦法完全離線來展示，
即使我將整個網頁都儲存下來，
直接執行該HTML檔還是有點怪怪。

不管如何，
讓柯南Recap Kurrik進行的這場精彩的HTML5 in Chrome的演講吧！

首先Kurrik提醒大家有一個很好的網站可以瞭解HTML5，
那就是 html5rcoks.com 。

Kurrik接著利用HTML5的技術展示Web的歷史簡介。

從1990年開始的第一個網頁，到2009年的HTML5。

如果最近常參加HTML5的演講，
應該對這些HTML5常提到的功能都有些熟悉才對。

這張投影片更清楚點出HTML5目前是由哪些元素所建構出來。

Canvas2D是可以讓開發者直接將網頁當畫布的方法，
首先我們必須先取得畫布的DOM元素，
接著利用moveTo/ lineTo/ arc等函式在畫布做出對應的動作。
對Canvas 2D API有興趣的朋友，
可以進一步到 http://dev.w3.org/html5/canvas-api/canvas-2d-api.html 取得更詳細的資料。

Canvas 3D的特效比2D更驚人，
像上面這個cooliris的網頁，
這一整片可滑動的照片牆真的是很酷炫。
依據投影片的資料，
Canvas 3D是採用WebGL的技術實作出來的。
什麼是WebGL呢？
根據Wikipedia的解釋，
WebGL是一組提供3D繪圖的API，
而且瀏覽器應該要實作它，
讓使用者不用再安裝Plug-ins就可以執行嚕。
關於WebGL的說明，
有興趣的朋友可到此看 http://en.wikipedia.org/wiki/WebGL 。

SVG是另一種實現在網頁上繪圖的方式，
在Opera的網站中有針對SVG與Canvas進行比較，
有興趣的朋友可以去看看。
http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/

利用新語法直接播放影音，
也是對開發者很方便的功能。
更誇張的是影片結合Canvas畫布，
影片也可以邊播出邊做出繪圖特效，
不過在柯南的電腦上這個Video + Canvas的效果，
執行地不太順就是。

Local Storage是另一個幫助開發者的利器，
事實上我相信這部分已經有不少人利用它來達到儲存資料在使用者本機端的目的了，
其中包含一些iPhone的Apps。

Web Worker可以讓花時間的程式在背景跑而不影響前景程式的使用。

WebSocket是另一個HTML5的Feature，
他可以讓我們在網頁上建立雙向的溝通協定，
不過在Server端與Client端都必須有對應的程式來配合，
在網路上找了一下WebSocket䙷資料，
似乎有不少人對於WebSocket之於Social Game的應用很有興趣呢。

HTML5對於本機端的互動也有不少支援，
我相信這應該是因為HTML5之與Mobile Device的野心。
Drag & Drop與Notifications的支援是之前就常聽到的。
不過Device的方向感應就令人驚奇了，
而且MacBook Pro竟然有內建方向感應器!?
這真的是太神奇了!!

對於CSS的增強支援，
讓不少開發者(例如我的強者同事群)都很高興和興奮呢。

透過CSS還可以讓圖片變形呢！！
當然動畫也不是問題。

Web Fonts讓網頁減低字型的問題，
不過對於中文字型的支援似乎還有些議題需要考量。

GeoLocation也是很常被提到與用到的HTML5功能，
我們可以透過GeoLocation的API取得使用者的所在位置。

Kurrik的HTML5演講，
柯南覺得很精彩，
不論是內容或肢體語言，
這個簡報的網址在 http://goo.gl/WQOV
有興趣的朋友可以直接連過去用Chrome觀看^^