HTML5案例觀摩 (四)各式近期HTML5案例選

　　本篇將會將小樽第一堂課的課程中，針對目前HTML5可以做到哪些效果的案例，將剩下的案例一次寫完，不再獨篇介紹，如果往後有其他補充小樽再另開新文章。

RA RA RIOT—網址在此，這個作品一開始會要輸入一個名字，可以隨便打，按下Enter以後他會隨著音樂的播放，讓你可以控制滑鼠並展現出華麗的筆刷效果，同時他也是個小遊戲，吃畫面上的藍點會加分並且累積一些視覺效果，吃到紅色的則反，最後會結算你的成績~而要你輸入的名字也就是讓你登錄分數可用，附帶補充以前有一個小樽介紹過的效果很類似的Flash，提供比較參考。

(image)

BallDroppings網址在此，這個效果在以前的JavaScript也可以做到只是現在有canvas標籤就可以很容易的發布在網頁上，使用方法是你可以在螢幕上畫線，左方掉落出來的點就會因為你畫的線而產生反彈，依照不同的線所敲擊出來的聲音也不一樣，並可在畫面下方改變球的掉落速率和重力參數。 Read more »

HTML5案例觀摩 (一)Ｔhe Ｗilderness Ｄowntown

這是一個很有名的以HTML5製作的網路互動電影(Interactive film)範例，為了得到最好的效果請用Chroma瀏覽器開啟，播放過程會有需要使用者介入操作的部份，請輸入你成長的家(the address of the home where you grew up)，如果你給的資訊太少，程式會要你參考google map上你家的住址，可以輸入中文唷，輸入以後就可以Play Film。 原文網址：http://www.thewildernessdowntown.com/

(image)

看不懂的話小樽稍微解釋一下，這個網頁使用HTML5的技術撰寫，除了影音的播放以外，也整合使用Google Map的技術，還有展示了canvas互動效果，算是一經典DEMO範例。

 

認識HTML5 (二)瀏覽器支援度

因為Html5的規格都還在開發中，對於要支援什麼不支援什麼，其中參雜了許多商業競爭，舉例來說究竟網路影片格式要如何支援也是各家角力的項目之一，因為這牽扯到影片編碼的權利金問題。關於開發到現階段各家瀏覽器對於目前HTML5的支援度標準如何，比較可靠的參考數據就是THE HTML5 TEST網站，只要點開網站馬上幫你測你現在所使用的瀏覽器對HTML5的支援度和支援項目細節(下圖是用Google Chroma跑出來的分數)。

(image)

該網站有”目前”(2011/5/18)各家瀏覽器的支援狀況，為了等標準訂立出來以後還可以考古懷念一下，留一張目前為止的瀏覽器分數列表。 Read more »

認識HTML5 (一)緣起與差異

　　網路上關於HTML5的文章很多，各種說法也傳言甚囂，基本的認識從WIKI上面應該是可以了解到十之八九，在本文撰寫的同時標準都還在制定中，此教學是為了所上的一堂課中的一個部分所撰寫，如需引用請註明出處。不論商業上的戰爭如何發展，HTML5的演化都其來有自，基於雲端概念的”再”炒作，所有大廠都看準下一個資訊時代大餅，策畫著借由瀏覽器主導雲端的端(Client)口市場，為了達到這個目標各家瀏覽器都認同必須將瀏覽器再提升到新的境界，以滿足即將到來的商業服務型態，距離標準制定完成還有一段時間，變數也很多，知己知彼百戰百勝。 Read more »