尋找奧茲之旅-HTML5強大展示互動遊戲

尋找奧茲之旅

尋找奧茲之旅是Google與迪士尼合作的一款HTML5互動遊戲,除了展示HTML5的火力之外,也可以透過互動的方式讓網友親身經歷遊戲的一些過程。這個遊戲的故事來源是來自於迪士尼即將上映的動畫電影《奧茲大帝(Oz: The Great and Powerful)》,透過層疊方式來產生3D視覺效果,整體來說表現非常優異,值得花時間去玩一下,保證不會後悔!遊戲開始前會先問你要用“標準:速度最快”還是“HD:畫值最好”,我一開始選擇的HD:畫值最好,然後我開始聽到我的MacBook Pro 的風扇開始努力運轉了,但整體過程非常順暢,沒有什麼停頓或卡住的情況發生。

尋找奧茲之旅

一開始進入遊戲之後,就開始探索,你會發現有些東西上面會出現亮點,這代表這個物件可以點擊,點擊後就會出現不同的畫面,還蠻有趣的。

馬戲團照相棚是你第一個會遇到的互動遊戲,在這裡會詢問你是否要開起視訊功能進行互動。

音樂創作是你第二個會遇到的互動遊戲,我個人沒什麼音樂天份,不過按著按著也還蠻不錯聽的,這部分的技術是用 Chrome Web Lab 的 Universal Orchestra技術所完成的,有空可以看一下Universal Orchestra,還蠻有趣的。

創作電影是第三個會遇到的互動遊戲,這裡也會詢問你是否開啓視訊功能,原則上就是把一張一張的照片串連起來變成影片,是一個簡短的逐格影片製作,不過完成影片後會有意外的驚喜出現!

熱氣球飛行之旅會是最後一個互動遊戲,你必須用滑鼠操控熱氣球,不過我控制的不是很好,想衝到龍捲風裡面卻偏偏進不去,折騰好一下子才衝進去。

遊戲尾聲是來到奧茲帝國,算是奧茲大帝整部影片的主要發生地吧,挺夢幻的,讓我對這部電影還蠻期待的。

最後還有預告片可以看一下,光看截圖就會發現3D技術不錯,裡面的物件都非常擬真,比方說那個泡泡上面的彩虹波紋,我就覺得非常真實。

這個遊戲在手機也是可以執行的,不過因為還蠻耗效能的,所以還是建議用電腦玩比較適合,當然這個網站在Chrome瀏覽器上執行效果應該是最好的,不過你也可以用其它來瀏覽器來跑看看,當作一個HTML5功能實驗,也是不錯的測試網站喔!最後附上遊戲的介紹影片給大家來看一下,如果你用Chrome瀏覽器,而且也想玩一下這個遊戲,請點擊一下“尋找奧茲之旅”即可立即取得:

有些朋友不用Chrome,所以在這裡提供這個網站的連結:http://www.findyourwaytooz.com/,你不需要有Chrome也可以玩喔!

[HTML5]讓比IE9老的IE瀏覽器支援HTML5 - html5shiv

HTML5已經推出一段時間,雖然還有部分尚未完備,但是也推出了許多酷炫的新功能可以使用,但是許多網頁設計師或程式設計師會礙於比IE9老的IE瀏覽器無法支援,所以遲遲不敢使用,甚至因此還為踏上學習的路程,為了推廣HTML5,讓網頁設計師與程式設計師可以立馬開始學習並使用,所以國外許多先進設計師已經共同研發一個簡單易用的方式,就是將所有比IE9老的IE瀏覽器所欠缺的標籤,用javascript的方式自行補上,雖然無法達到百分之百的HTML5支援,但其實已經有非常多的功能可以透過此種方式運作在比IE9老的IE瀏覽器上,如果你因為大眾IE瀏覽器無法支援,所以還沒接觸HTML5,現在看了這篇文章,你覺得你還有理由不去學習嗎?

使用方式非常簡單,你只需在</head>前貼上下面這段Code即可:

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

是不是簡單到爆點了?由於採取外部連結,所以只要有更新就會自動更換,不需要擔心javascript內容新舊的問題,而且放置在Googlecode上,穩定度自然不需擔憂太多,是不是覺得比想象中簡單很多?

這個可以讓比IE9老的IE瀏覽器支援Html5標簽的js名為html5shiv,事實上還有另外一隻js名為html5shimhtml5shivhtml5shim差別在哪裡呢?根據html5shiv頁面說明來看,答案是沒有差別的!如果你慣用的瀏覽器還是IE,也因為該版本不支援HTML5,現在你可以使用html5shiv來補足瀏覽器不足之處,趕快踏上HTML5的學習路途吧!

[展示] 讓Adobe來告訴你CSS3跟HTML5有多酷

一直以來都以發展Flash技術聞名的Adobe,自從被Apple重重的一拳打在臉上後也開始認真的發展CSS3與HTML5技術相關軟體與應用,而在今年的八月初,Adobe推出了Beta網站—the expressive web,這個網站是基於HTML5環境,運用CSS3的搭配,製作出一些新穎的網頁效果,換句話說,the expressive web是Adobe為了展示HTML5與CSS3的效果所製作的展示網站,你可以隨著左下方的箭頭一格一格觀看,相信每點一格都會讓你發現一些驚奇。

為什麼這個網站是Beta?原因很簡單,因為並不是所有的瀏覽器都可以看到完整的畫面,而且也不是所有的瀏覽器都可以支援HTML5新增的全部功能(更何況HTML5還沒有正式訂定完成),只能說普遍上都可以運作而已,至於哪些瀏覽器不能支援?想當然爾,如果你的瀏覽器不是最新版本,那支援機率當然就會比較低,而每個展示畫面下方都會列出哪項新功能在哪些瀏覽器有支援,而這些有支援的瀏覽器又佔整體使用者多少百分比,原則上都在40~50%之間,相信有數據的搭配呈現會讓整體更有說服力。

透過the expressive web網站的建立,Adobe展示小組也公佈了本次過程中所學到的經驗,以下將用我個人的理解加上自己的解說將Adobe小組的經驗做一個簡短的呈現:

最後,在the expressive web上也有資源庫頁面,可以讓你查看the expressive web上使用的HTML5與CSS3有哪些之外,也整理了一些HTML5與CSS3的資源網站供大家查看,相信大家看完這個網站,對於HTML5與CSS3會有更明確的視覺感受!

[HTML5]Google 首頁的電吉他解密

2011年6月9日,Google為了慶祝電吉他之父Les Paul的生日,特地把招牌Google改編成電子吉他,是的,這次的Google Doodle是一把可以互動、可以彈奏的數位電吉他,相信許多人對於這樣的創意表現都為之讚歎,究竟是怎麼做的呢?根據Google官方部落格顯示,這把數位電吉他是使用JavaScript, HTML5 的Canvas , CSS, Flash以及Google以開發過的api套件,可以說是使用了非常新穎的技術,但是由於有用到Flash技術,所以很遺憾的,iPhone、iPad或iPod Touch使用者只能觀看無法彈奏,但是我相信有電腦的網友們今天應該都有玩一下,這樣的互動也不知不覺變成Google獨特的特色了。

如果想玩一下這把電吉他並且彈出一些什麼東西,這裡提供幾個我看到網友分享的樂譜,請開起鍵盤模式照著按,相信你會彈的更愉快:

兩隻老虎

TYUT TYUT UIO UIO OPOIUT OPOIUT UWT UWT

瑪莉有隻小綿羊

9878999888999987899988987

小蜜蜂

533 422 1234555 533 422 13553 2222234 3333345 533 422 13551

滄海一聲笑(笑傲江湖)

POUYT UYTEW WEWETYUOP PPOUYTY

隱形的翅膀

358787 6568321 11186532122 358787 6568321 1118653211

好了,相信各位玩過之後應該有部份的朋友,對於這樣的技術還是非常有興趣的,雖然個人知道的有限,剛好這幾天我在練HTML5的Canvas,所以就我所知的稍微解說一下,如果有錯誤也歡迎各位指證一下啦!

google doodle css sprites

首先來說說這把電吉他的視覺畫面組成部份,全隻電吉他是採用css sprites技術,就如上圖所示,電吉他的零件解析出來就是這樣,你可以點擊這裡觀看Google的線上圖片部份,而css sprites技術其實就是指把原本零零散散的圖片集合成一張,可以有效減少Http Request次數,簡單來說就是可以更快的開起網頁,經過實驗證明,使用css sprites技術不但有效減少Http Request還可以減少整體圖片檔案大小,對於流量的節約是非常有幫助的,使用時搭配css的background可達最大效益。

說完了吉他的外觀再來說說吉他弦這些線的部份,線的部份就是使用HTML5的Canvas技術,使用HTML5的Canvas需要搭配Javascript才能正確繪製出所需的線段或是圖案,所以整體來說包括線條的粗細、顏色,甚至彈的動態效果應該都是HTML5的Canvas技術的表現,之後如果有時間我會在針對HTML5的Canvas的部份在做深入的介紹。

最後就是整把數位電吉他的精髓,也就是電吉他的聲音部份,這部份次採用flash技術來播放音效,這個flash除了感應撥弦的位置並播放聲音以外,應該是沒有其他功效,也因為沒有其他功效,所以整個flash看起來空空如也,完全想不到這個傢伙會是整把數位電吉他的靈魂所在,真正表現出看不見的靈魂這個精髓。

以上就是今天Google Doodle塗鴉部份的解說,離今天結束還有半小時,各位觀眾趕快走開,記得回來,好好珍惜你跟這把電吉他寶貴的相處時光吧!

補充:Google Doodle - Google 塗鴉博物館

[HTML5]關於HTML5這回事-淺談HTML5

關於HTML5這回事

什麼是 HTML5?

HTML5是目前最新的HTML協議,目的是取代1999年所定訂的HTML 4.01和XHTML 1.0 標準,以現今網路使用需求來說HTML 4.01與XHML 1.0已經無法滿足需求,所以發展HTML5是早晚的事情。廣義來說HTML5的內容包含了HTML、CSS和JavaScript三大部份,與以往相比,HTML5已經無法用單一語意式協議來闡明一切,而HTML5的最大使命就是彙整所有網路常用媒體協議,如Adobe Flash、Microsoft Silverlight、Oracle JavaFX等等,提供更有效、更完整、更強大的的媒體組合。

HTML5 的發展

HTML 5的前身名為Web Applications 1.0,是2004年由WHATWG提出,WHATWG的成員皆來自蘋果、Mozilla 和 Opera等知名瀏覽器團隊。到了 2007 年,WHATWG的規範被 W3C 組織採用,作為下一代 HTML 標準,並成立了新的HTML5制定團隊。在2008年1月22日,第一份正式草案發佈。目前HTML5尚未完全訂定完成,負責編纂標準格式檔案的Google代表Ian Hickson預期,可能得等到2012年才會推出建議候選版(W3C Candidate Recommendation)。

儘管HTML5已經網路相關行業非常知名,但是讓HTML5衝上雲霄的話題莫過於2010年的4月Apple老闆賈伯斯發表一篇題為「對flash的思考」的文章,內容指出Adobe Flash將不會再是必備軟體,隨後Apple出產的當紅炸子雞iPhone系列皆不採用Flash,引發了Apple與Adobe之爭,而且時間正逢Adobe推出CS5系列產品之前,讓Adobe顏面盡失,而Adobe也發現了Flash致命的缺失可能導致整個Adobe的失敗,隨後短短時間就推出了HTML5補充包,更推出了支援HTML5的CS5.5,以搶救遭受無數質疑的Flash。

HTML5 的改變

HTML5新增了許多標簽,同時也取消了一些過時的標簽,在外掛模組上,以往安裝完瀏覽器皆須另外安裝Flash player,但是採用HTML5標準後就不需要在安裝Flash player,而HTML5在二維繪圖(Canvas API)、媒體播放控制(video、audio)、離線儲存、編輯、拖移、通訊、歷史瀏覽、資料庫索引、目錄瀏覽等支援程度遠遠超過前HTML 4.01或XHTML 1.0協議,功能強大讓人歎為觀止,但是一般人都會對HTML5有一個誤解,那就是透過HTML5就可以製作出動畫效果的想法是不對的,要做到動畫效果是必須搭配Javascript與CSS才可以達成。

HTML5 的危機

雖然目前各瀏覽器大廠皆同意採用HTML5協議作為標準,即便是微軟的IE9也納入了HTML5,但是微軟擁有類似Flash的Silverlight,如果微軟堅持不採用HTML5並與Adobe的Flash聯手抵抗HTML5,那網際網路將又會面臨雙分天下的局面,這將會比萬惡的IE6還要恐怖。所以HTML5的轉機就在於搶攻行動瀏覽市場,取得未來先機,讓微軟與Adobe無法大量佔據行動市場,最後只能接納HTML5,並且協助HTML5發展的更加完善。

HTML5 的火力展示

本篇關於HTML5的延伸閱讀