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

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

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

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

The WebGL Globe是利用HTML5主推的3D語言WebGL技術並讀取SEDAC上1990年到2000年世界各點人口的視覺化呈現,可以使用滑鼠旋轉縮放,和google earth的操作方法一樣。

Sketchpad這個線上繪圖可能就不少人玩過了,網址在此,當然線上繪圖工具打從有網頁以來就一直都有,Flash也曾經有過這樣的應用,只是這既然是主打HTML5,展開原始碼你就會看到落落長的JavaScript,有興趣的就自行操作吧,我只會畫皮卡丘…而且用滑鼠畫的請多包涵XD

—Bomomo雖然也是繪圖軟體但是是比較特殊的繪圖軟體,網址點這裡,是依靠程式的規則變化來產生不規則的圖形,結果也可以讓你存起來…說真的…有時候這種不規則的規則隨便塗一塗可能都可以當海報了(大笑)

physicSketch這個物理模擬效果網站在此,開發者是個日本工程師,Flash也有人寫過類似的函式庫,而主打HTML5的話當然就是改成用JS寫,該作者有官方的影片和網址,可以去瞻仰一下。

  除了繪圖,HTML5要做影像處理也是ok的啦,aviary提供了現成的線上簡易影像處理工具,你可以上傳電腦裡的圖片到上面去做一些簡單的影像處理,如果你覺得不錯玩也可以申請一個API Key將這個工具嵌在你的網頁裡,我們就拿蘋果教主的尊榮來當範例吧。

LucidChart真的是一個已經可以說是雲端軟體等級的Webapp應用,用來作流程圖的繪製,網址在此,功能很好很強大,自己體會看看吧~。

—HTML5 Chess Game這是一個基本邏輯在以前的JS就可以寫完或者用Flash寫出來的西洋棋遊戲,網址在此,之所以提到他主要是他也應用了WebGL的技術,你可以按一下3D View,切換到3D顯示模式來玩這個遊戲。


20 thingsi learned是一個線上雜誌的應用,網址在此,我想他主要想表達的應該就是以往Flash才能完成的視覺化翻書互動效果現在可以用HTML5完成,是的沒錯~仰賴現在強大的CSS3可搭配HTML5完成很多視覺效果…but…他當然還是要寫JS來完成整個互動效果。

  關於HTML5的範例實在太多了,但是現在最大的爭議性在於-HTML5是將網頁(web page)的概念提升到網路應用程式(webApp)的轉捩點,淘汰以往拿來閱讀瀏覽內容為主的架構,而是想藉由雲端再次發酵一口氣將我們使用電腦的體驗,直接複製到網路(雲端),所以這是一個入口,一個新的開始,好處與壞處都有許多討論不過這個有機會以後再另闢主題來提,總之爭議的地方就會是-許多應用其實說穿了就只是用Java完成的應用程式…透過canvas直接嵌在網頁上,你並不能反駁他就是個HTML5網頁,但他可能已經是一個服務的窗口,包括上面舉的許多應用程式方向的例子多是~看那精美的憤怒小鳥都可以線上玩了。

  而且有了canvas 2D繪圖的能力甚至加上WebGL的3D圖學語言…精明點的使用者應該也發現一些以往超大咖的3D遊戲引擎商,不再以販賣那天價的開發工具給遊戲商,而是以免費或很親民的方案提供給一般的程式工程師或教學單位,讓他們可以輕鬆的使用這些開發工具來製作遊戲,否則如果WebGL挾HTML5的標準一旦定案…要提心吊膽的就是這些現在要掛在網頁也還是要靠外掛的遊戲引擎開發商,開發成本降低…有錢的龐大遊戲商不再是主要生產者而且利潤有可能分散…如果想再靠這些遊戲商養自己的引擎開發成本可是很危險的賭盤,當然局是尚未明朗我們靜觀其變,重點是網站網頁和應用程式的界線已經很模糊,想要一窺未來-請趕快學好Java(笑)。

  除了上述的服務,如果你想進一步了解目前究竟哪些功能是HTML5新增的,哪些瀏覽器目前可以支援這些效果,以及他產生的到底是甚麼東西可以參考這個很有名的HTML5製作的html5Rock slides,裡面有所有的效果講解以及他的CODE和效果,其次是HTML 5 Demos and Examples這個網頁,他用條列式的方式列出所有新標籤和瀏覽器支援情形,並且提供範例檔案讓你測試,想要看酷炫的使用者開發案例可以到Chrome Experiments

  網頁已經不在只是網頁…所以HTML5的HTML5部分嚴格說起來應該是網路應用服務Client端的呈現輔助語言,除非只當傳統網頁可能+CSS3可以做出一些有別於以往只能靠Flash完成的視覺效果網站,骨子裡可能要用JS完成服務的主架構…甚至有些互動視覺效果也是靠JS才行,但反過來說只要你會JS…在新世代來臨時你也不用太擔心會不會被淘汰的問題,反之亦然,目前Google非常積極的針對HTML5為基底推廣的Chrome web app超級無敵多…以Google的概念只要這個局勢沒有太大變數…以後行動裝置只要可以連上網路甚麼都可以做~換而言之使用者是依靠一個帳號行天下,機器用桌機還是pad還是smart phone都不重要(所以看看現在賣桌機零件的市場多蕭條),今年Google I/O 2011也送出第一批Chrome OS的平板電腦,不久就會開始大量鋪貨,想要早一步體驗那是甚麼感覺可以到,請到Chrome線上應用程式商店,看看到底你電腦裡裝的軟體有多少取代方案,如果你認為這些應用程式沒有網路就哭哭那表示你上面HTML5的功課沒有做好~請複習那強大的離線儲存和應用程式快取章節,至於如何進入這個開發世代~HTML5撰寫課程將從之後的文章開始!如果有鎖碼請多包涵0v0~認識的親友或之前有再互動的老網友請msn或mail敲我~不認識的就不好意思惹~最近發現越來越多機器人直接把我網頁文章整個抽走…雖然我有啟用防盜連機制和一些防機器人的設定,不過因應我寫的心路歷程等理由~我應該還是會鎖密碼,不便之處請多包涵:)