訪客留言簿

星期五, 4月 16, 2010

HTML 5 有多棒?

前言

雖然我也不太清楚詳細內容,不過 HTML 5 不是只有新增 audiovideo 兩種元素而已,好像還加入了很多跟 AJAX(Javascript) 和 CSS 有關的先進技術呀。

換句話說,HTML 網頁終於不再只是靜態的? XD

HTML 5 與影音播放

優點

利用 HTML 5 的 audiovideo 兩種元素及相關屬性,可以讓你在網頁中播放 ogg/ogv 這種開放的影音格式,或 mp4 這種常見的影音包裝格式。

這有個重點,是你不必管你的播放器是否得三不五時,為了無聊的小事去頻頻更新,而且也不必太擔心不能播放 ogg/ogv 檔。

缺點

雖然說是 HTML,但 audiovideo 常常還是需要有 Javascript 支援,才能正常使用那些操作面板。

另外就是影音檔案的連結可能會很容易被抓出來,得靠些方式擋直連或暴力下載。

而且並不是說不用 Flash,播放影片就會比較順,畢竟採 h.264 壓縮方式的 mp4 影音檔,如果是壓成 HD 畫質的話,可是超級吃 CPU 的。(所以 Nico Video 限制影音總流量也不是沒啥道理,原因是不是這樣我不知道就是。)

還有個問題就是,不支援 HTML 5,只支援 Flash Player 的瀏覽器(即一些不再提供更新的),可能得要直接下載檔案來播才行,無法在瀏覽器內播放。

(至於「彈幕」能不能玩,我想 HTML 5 是有可能做到的,只是我沒研究如何才能做到。)

相關連結

HTML 5 與圖片繪製

優點

在 HTML 5 規格中,有一個 canvas 元素,可以讓你配合 Javascript,即時繪製動態的 2D(SVG) 或 3D(WebGL) 圖片。意思是說,你可以用簡單的一些圖文,製造出與使用者互動的圖片,比如說玩皮球俄羅斯方塊之類的,或者你也可以拿來畫畫

另外因為是用向量繪圖的方式繪製向量圖片,所以不太需要擔心會像點陣圖那樣失真。

缺點

基本上用 canvas 技術畫出來的圖片,只是即時運算出來的「圖形」,所以不會有任何圖片檔案,你想下載什麼原始的點陣圖片是沒辦法的。

相關連結

用 HTML 5 控制物件動作

這部分好像牽扯到挺複雜的 Javascript 知識,我不太會解釋,要請各位直接看範例了。

HTML 5 與更符合網頁內容的標籤

國文老師上課都會教到,你的文章要有固定格式,標題該空四格、段落開頭要空兩格、引用要用引用符號……等等的,所以一開始就是用來承載文章的 HTML,當然也要特別注重去使用「有意義的標籤」。

HTML 5 改掉舊時代什麼都想用 div 包起來的大問題,而採用 nav、section、aside 和 footer 等有意義的元素,來裝該裝進這些容器中的有意義的內容。

這樣做的好處,不只是你在搜尋引擎所顯示的結果中,排名會比較前面、顯示的資料會比較清楚而已,這也會帶給你諸多網頁親和力上的好處。

HTML 5 與遊戲移植

既然 HTML 5 配上支援的瀏覽器,可以讓你播放影音、控制物件的話,那要做成線上遊戲也是可以的!

其它:有點離題的東東

4 comments:

BCSEEATI 提到...

1. Canvas 可以用 toDataURL() 轉存成圖片。
2. SVG 跟 Canvas 是不同的技術。

匿名 提到...

http://diveintohtml5.org/forms.html
這個網站提到的新功能包括新的表單元素,還有像是選日期的好用東東。能讓網頁設計師的工作簡單很多。

wini 提到...

感謝 BCSEEATI 指正,看來我要再多查一下相關資料後,再修正一下。

wini 提到...

感謝 匿名 網友分享 :)

 

本站著作(不包含圖片、影音以及回應留言)係採用 Creative Commons 姓名標示-非商業性-相同方式分享 2.5 台灣 (中華民國) 授權條款授權