2010-6-24_04-15-31 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三大類別,能針對網頁寬度調整文字斷行方式、輕鬆調整文字編排,使用漂亮的圓角框架、文字藝術效果,以及做些移動、放大縮小等動態效果。

Typograph
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網站

使用 Facebook 留言

大家的回應

5e223a298a380579d1108529d299484e?size=48&default=wavatar
1.  student (發表於 2010年6月28日 12:20)
請問在『▲首先介紹各種JavaScript APIs功能。例如Web Storage可將文字儲存在Client端。』那個圖裡的那句"mother fucker"是什麼意思呀?
sugizo
2.  sugizo (發表於 2010年6月28日 12:47)
@ student:

是筆者測試輸入的文字啦
再輸入欄位輸入文字後按下Save就會存在Client端
Cbacdd80fd9886e0339f00fcf7e4ecb1?size=48&default=wavatar
3.  blind (發表於 2010年6月28日 13:00)
@作者

不雅文字不會因為用英文呈現就變莊重
建議把那兩個字換掉
在這個網站看到這種粗字非常礙眼
C3f237ecef8241ddf71a0e2ab358fbbc?size=48&default=wavatar
4.  Ric (發表於 2010年6月28日 13:04)
@ student:

阿豆仔的三字經...而且是很粗俗的那種
在這個全年齡的公開網站上拿來當「範例」,
實在不妥...

發表回應 / 至 T17 討論

謹慎發言,尊重彼此。按此展開留言規則