不只玩小遊戲，HTML5 Rocks教你寫程式

Google和Apple同為HTML5的大力推手，繼Apple前陣子推出Safri專屬HTML5測試網站後，Google也推出了HTML5 Rocks網站，名稱真是取的太搖滾了！Oh Yeah！特別的是網站提供了HTML5的API原始碼，讓開發者能邊看邊玩HTML5，手癢的話還能自行修改原始碼來玩。

如果你認為HTML5 Rocks只是另一個普通的HTML5示範網站、或是測試瀏覽器網站，那就錯了，它的功能更像是教學網站，presentation頁面是以投影片展示HTML5功能，最特別的是同時也附上這些HTML5功能的API原始碼，讓開發者具體了解HTML5功能的應用案例。

Tutorials頁面則是提供了9個step by step步驟式教學，內有詳細的文字和原始碼說明，讓網頁開發者能鉅細靡遺學習使用HTML5的功能。此外在playground頁面也能叫出presentation中展示過的HTML5功能，同樣提供API原始碼讓使用者自行修改原始碼後執行API，很像在玩開發工具。

看投影片邊玩邊學HTML5

首先來看presentation，它是以HTML5製作的網頁投影片，每一頁就是一項HTML5的功能。投影片上方會秀出該API的原始碼，下方則是可讓使用者實際操作。對於想要研究HTML5的新手而言，可以藉由原始碼更了解新功能的運作方式；對於只是想體驗看看的路人，可以學小編自動把原始碼腦內補完馬賽克，直接玩就可以了。

▲HTML5 Rocks特色就是邊玩邊學HTML5，請點選presentation。

▲HTML5示範是以投影片方式呈現，投影片本身就是HTML5的傑作。

▲首先介紹了一下網路標準的歷史。

▲HTML5包含了HTML、CSS、JavaScript APIs三大元素。

HTML5是由HTML、CSS、JavaScript APIs三大元素所構成，投影片也就以此區分為三大區塊介紹。首先是JavaScript APIs，介紹了Client Side Storage、Communication、Desktop experience、Geolocation共4大類型的服務。

▲首先介紹各種JavaScript APIs功能。例如Web Storage可將文字儲存在Client端。

▲Web SQL Database同樣是Client端儲存的應用，可在Client端建立資料庫。

▲這是在Google I/O 2010示範過的Geolocation功能，可透過瀏覽器傳送座標位置。

▲Drag and drop功能只要將圖片或文字拖曳到右側drop area區域（圖左粉紅區），source area（圖右灰色區）就會顯示相關資訊。

接下來是HTML的應用，包含了Semantics、Accessibility、Web Forms 2.0、Multimedia、2D and 3D drawing共5種類別的介紹，新的標籤讓網頁撰寫更方便，許多功能都能做到過去要靠Flash的多媒體特效。其中像是影音娛樂的<audio>、<video>標籤，以及繪圖用到的<canvas>、<svg>標籤等，都是HTML5的大熱門。

▲HTML功能介紹了新的標籤和語法，例如建立表格的語法更簡單。

▲<audio>和<video>標籤是HTML5強打功能，不需要Flash也可以播放影片、音樂檔案。

▲<canvas>標籤大大提升圖片的支援程度，可直接用canvas語法繪圖，也能做出簡單的圖片調整工具。

▲<svg>標籤為可縮放向量圖型，這是用svg語法做成的放大鏡。

最後是CSS，它主要是用來美化網頁，簡單的說就像是幫素顏女生上妝變得更好看。網站介紹了Typography、Visuals Transitions、transforms and animations三大類別，能針對網頁寬度調整文字斷行方式、輕鬆調整文字編排，使用漂亮的圓角框架、文字藝術效果，以及做些移動、放大縮小等動態效果。

▲CSS是把網頁變漂亮的藝術家，Text wrapping是調整文字斷行的方式。

▲CSS很好用的地方是可以使用許多文字特效、像是用簡單的指令加上外框。

▲transforms可做出許多效果，例如將表格變成蹺蹺板搖擺、或是將表格放大縮小。

想玩原始碼？請進Code Playground

對於想更深入認識、看HTML5究竟能做出多少效果的人，可以到code playground實際演練一番。Playground與前面的presentation展示的HTML5功能相同，不過這裡倒像是個開發工具，選擇API後就會出現完整的原始碼，使用者可在「Edit Code」區調整原始碼，按下「Run Code」觀看修改的成果。

▲Code Playground可讓使用者自行修改HTML5的API原始碼。

▲左上方是HTML5的各種API，右上方是該API的原始碼，下方是執行的結果。

▲在右上方「Edit Code」區域中，上方會告知是JavaScript、CSS或是HTML File，也可點選Related Links觀看該API的文件說明。

▲此時改變原始碼後，按下「Run Code」就會執行修改原始碼後的結果。範例是改變影片的寬度，可看到影片變大了，這只是幼幼班的玩法。

9大教學深入了解HTML5奧義

要認真學習HTML5的使用者，Trtorials中提供了9個step by step教學，包含了chrome developer Tools使用教學，以及Geolocation API、WebDatabase等API，對認真要踏入HTML5領域的開發者而言相當實用。

▲Tutorials提供了9個HTML5的step by step教學。

▲還會告知使用者目前有哪些瀏覽器支援該HTML5功能。

▲內有功能簡介以及步驟式教學。

HTML5 Rocks並沒有限制使用Google Chrome瀏覽器，要用同為Webkit引擎的Safari瀏覽器也沒問題，當然要使用IE、Firefox、Opera瀏覽器也可以，只是瀏覽器不支援的HTML5功能就無法呈現。

▲Resources頁面附上了許多HTML5的相關網站，包含之前介紹過的HTML5 Test網站。