相關文章

Applehtml5 logo 自從iPad推出之後,Apple一整個打槍Flash,並說HTML5有多好用,現在Apple官網還推出了HTML5的demo網頁,想要告訴開發者們HTML5有多讚,但很幽默的是,Apple官網上的HTML5 demo只給Safari使用,這好像沒什麼說服力阿!不過我們還是來玩一玩吧!

HTML5的demo總共有7個,分別是影片播放、字體控制、相本、翻頁特效、音樂播放、360度產品展示、虛擬實境,既然是HTML5,那我們就直接用iPad來玩一玩這些demo吧!

影片播放也能玩特效

當HTML5一開始引起大量注意,就是YouTube等影音網站都開始提供HTML5的播放頁面,播放影片的功能也當然被Apple放到了第一位,除了播放之外,還能在影片上做出傾斜、加濾鏡的效果,影片也能在背景中播放。

▲已經有不少影音網站都支援使用HTML5來播放影片。

▲在影片上加上濾鏡並做傾斜的效果,影片還是一樣正常的播放。

文字特效樣樣來

字型效果在CSS中,一向不是什麼問題,CSS3下有許多字體的特效都能做得出來,像是加個字體陰影、旋轉、變顏色、字距加寬等等,輸入中文也沒有問題,不過筆者在iPad輸入中文的時候就會變亂碼,算是一點小bug。

▲輸入字體後可以任意的旋轉和改變顏色。

▲Mac OS下的Safari可以輸入中文,也能把字體加上陰影。

▲另外也還能在字體內加上圖片,不過這部分只能看不能玩。

讓照片更有立體感

這部分是展示相片的功能,能把照片拉出來,並把背景模糊化,做出有3D景深的感覺,不過這種特效在AJAX剛熱的時後就有不少套件做得到,所以也比較不新鮮。

▲HTML5能讓照片展示更炫麗,不再是單調的排排站。

華麗的翻頁效果

這些特效就像是簡報檔中的過片效果一樣,可以很簡單的利用翻轉、移動、飛入的方式來切換照片,和上面的demo有互相對應的感覺。

▲照片在切換的時候可以套用不同的特效,看起來十分酷炫。

播放音樂好簡單

有了HTML5之後,想要播放音樂,只要運用<audio>標籤就能簡單的插入網頁串流,用起來就好像是在播iTunes一樣。

▲按下Play就能播放,不需要安裝任何外掛。

360度就像看見真的產品

常上Apple網站都知道Apple很早就使用360度展示產品,這個功能其實就是把很多張照片串在一起,利用拖拉的方式讓物體旋轉時不停的切換照片,產生立體旋轉的感覺,對於網路上常常看不到實體的商品來說,這個功能十分的好用。

▲看起來好像只有一張圖片,但滑鼠托拉的時候物品會跟著旋轉。

虛擬實境讓你身在現場

有了360度產品展示還不夠,實體的照片也能做成360度的視角,讓你轉來轉去直接看到周圍的景像,這樣的效果相信各位在Google Maps街景都玩過了。

▲上下左右拖拉即可轉換影像,不只是看到一張照片,而是全景。

很多人支援,但尚未普及

儘管很多人倡導HTML5,但也不是每個瀏覽器都支援,像是IE要到第9版才會支援HTML5,有寫過JavaScript和CSS的人都知道不同的瀏覽器常常會搞死人,所以就算是HTML5也不能保證什麼瀏覽器都能用。

Apple也十分機車的直接告訴你要玩這些demo就要先裝Safari才行,所以看得到HTML5雖然可以做到不少事,但最後還是要等瀏覽器和開發工具跟上來才能好好的發光發熱,不然光是各瀏覽器的相容性就會搞死開發者了吧!

另外,開放者網站還有更多的demo,有興趣可以自己玩看看。

▲如果不是使用Safari的話就會出現要你下載Safari的視窗,這一定是Apple的陰謀。

▲最後附上使用iPad來看用Flash做成的網頁,如果不裝外掛的話,HTML5看起來似乎是比較有搞頭一點?

使用 Facebook 留言

F5801a220a937a8f558eec133bb897ec?size=48&default=wavatar
1.  soul (發表於 2010年6月07日 09:02)
在未安裝開啟速度爆慢的 QuickTime 的 Windows 系統中使用 Safari(4.0.5) 開啟 Apple 這個 Demo 網站,播放音樂或影片點選 Play, 也是要求必須安裝 QuickTime 這個 Plug-in,這也是陰謀之一。
28843bbfa7e289c82d9b7072cf5fbe43?size=48&default=wavatar
4.  jhangyu (發表於 2010年6月08日 09:06)
聽說這個Demo網頁根本沒用到什麼HTML5,
竟然還號Safari限定,
只能說蘋果這家公司真是.....
不禁讓人想到IE.....

發表回應

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