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

  • 發布日期: 2010-06-28 13:52
  • 貢獻者: A+
  • 瀏覽人數:2,114
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的多媒體特效。其中像是影音娛樂的

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

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

標籤為可縮放向量圖型,這是用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網站



---

內容來源 http://feedproxy.google.com/~r/techbang/~3/r7bSawKjcFw/2887-google-launched-html5-rocks-website-with-you-know-more-html5


瀏覽人數:

2,114

  • 發布日期: 2010-06-28 13:52
  • 貢獻者: A+
  • 0人喜歡, 0人不喜歡

熱門推薦

http://cdn0.techbang.com.tw/system/images/21617/original/2010-6-24_05-26-52.png?1277385334
手機版線上求助企業合作社團合作刊登廣告隱私權保護愛逛街樂多日誌朋友圈外小優仕優仕網首頁
YouthWant 優仕網 since April, 2000. Copyright© Shinewant Tech. 2000-2014. All rights reserved.
本網站已依台灣網站內容分級規定處理常年法律顧問: 誠泰法律事務所 魏啟翔律師 明沂律師事務所 陳以蓓律師