2019
11
05

一手掌握HTML5技術的關鍵特色[轉載自iThome]

關鍵字:HTML

過去十多年來,技術的發展變化很大,例如網路幾乎無所不在,隨時可以接取網頁的應用、Web 2.0的風潮席捲整個網頁世界;市占最高的微軟IE也逐步改版,坊間也出現許多種類型的瀏覽器,像是Mozilla Firefox、Apple Safari、Google Chrome,紛紛強調具有更優異的執行效能與對開放標準的高支援性,大幅縮短網頁應用程式與原生應用程式之間的效能差距,讓使用者願意接受不同的選擇,連帶地,也讓開發人員更願意採用HTML5這類標準。

不過,如同前一篇所提到,智慧型手機和平板電腦在這幾年快速竄紅,影響力也已擴及企業,使得這樣新興個人端連網環境,已經無法輕易被忽視。而這些行動裝置上所搭配的瀏覽器,都可以大幅支援HTML5規格,完全不像PC環境,仍有很多包袱,例如須考量廣大舊版瀏覽器用戶(如市佔仍有7%的IE6),而必須背負對新版網頁標準相容性不足的問題。

換句話說,開發人員除了要注意網頁能否在各種瀏覽器之間執行的效果差異,還需要想辦法在舊版瀏覽器環境中做出類似效果。

HTML5涵蓋的範圍

一般而言,HTML5的出現是為了接替HTML4,同時也是集合歷代HTML規格的最新修訂版,因此現行網站的所有網頁,對於支援HTML5的瀏覽器來說,都是可以執行的,相對地,若用不支援HTML5的瀏覽器,去開啟以HTML5新增的規格撰寫內容的網頁,就會產生不相容的狀況。

然而,就廣義來說,HTML5也是3種網頁前端開發技術的總集:包含HTML、CSS3(Cascading Style Sheets Level-3)、和JavaScript。

CSS的目的是,能以樣式表為網頁提供視覺呈現的統一效果。JavaScript則是瀏覽器開啟網頁時,能同時執行應用的指令碼語言(Web Scripting Language),程式碼需透過瀏覽器直譯和執行,而不像其他程式語言需先經過編譯,轉成Binary Code,它可用來操作網頁元素的產生與控制計算,並提供函式庫,裡面預設提供物件和方法,以便和網頁的文件物件模型(Document Object Model,DOM)互動。

值得注意的是,要善用HTML5的重要特色,基本上,可能都需要同時搭配CSS或JavaScript,才有可能辦到。

有哪些特色?從W3C的觀點來看,他們整理出8個:語意、離線與儲存、裝置存取、連線、多媒體、效能與整合與CSS 3。接下來,我們將針對其中幾項加以介紹。

網頁可直接播放多媒體

若在網頁上要呈現視訊、聲音,使用者端設備需安裝可播放的應用程式、編解碼器(Codec),或者仰賴Flash,搭配同樣需額外安裝的播放軟體進行。而這些對瀏覽器而言,都是需外掛的程式,而非內建機制。隨著Adobe不再開發手機與Linux平臺的Flash播放軟體,以及瀏覽器對HTML5標準的積極支援,未來你將會看到更多直接透過瀏覽器本身播放影音檔的例子。

在HTML5中,網頁要播放視訊和聲音的方法非常簡單,只要用<video>和<audio>標籤即可。例如<audio src=”http://www.ithome.com.tw/audio/tech.mp3”> </audio >,即是在網頁上播放檔名為tech.mp3的音訊檔。

回顧過去,網頁無法直接播放視訊畫,而播放聲音也沒有特定標準,所以很多網頁都採用Flash來呈現多媒體;如今,Flash應用將出現無法跨平臺的狀況(Adobe決定不繼續投入手機和Linux上的Flash應用),將會影響很大。

已投入Android平臺開發多年的聖星科技創辦人盧育聖表示,這改變(格式轉換)需要時間。會有人開始從Flash應用離開,一旦手機無法播放相關影音,業者就必須想辦法轉到HTML5。但他認為瀏覽器也要內建相關的標準Codec,於是大家就會逐漸往這方向走。畢竟,使用者都喜歡看Video。

目前各大瀏覽器主要支援哪些多媒體解碼格式?視訊方面,像是Ogg Theora、VP8、H.264,而音訊格式,則主要支援Ogg vorbis、WAV、MP3等。

但這樣的支援對於特定應用來說,還是不夠的,例如遊戲。

前微軟資深開發技術推廣經理,現為自由工作者的王森表示,標準的audio標籤是無法混音的,導致非Chrome瀏覽器上的Angry Birds遊戲不能用Audio API,只能用Flash彌補。

他認為,用HTML5開發Casual Game是可以的,但是對於需要大量3D運算的遊戲,目前還沒看到有好的例子出現。另外,開發遊戲需倚賴搭配好的遊戲引擎,以加速開發,而HTML5目前仍缺乏常用的遊戲引擎。

其他人也有類似看法,例如身為Timefire共同創辦人暨CTO的Ray Cromwell,他在〈The problems with HTML5 <Audio>〉一文中表示,HTML5的audio標籤,雖然像音樂播放器,一樣可以做到快轉、循環播放與控制音量,但單靠它,並無法合成聲音、取樣、處理音訊樣本、套用環境特效,或是基本的立體聲移位(stereo panning)。看來,這部份的發展還有待努力。

想知道更多訊息嗎? 請點擊以下網址看更多喔!!

傑立資訊傑立資訊事業有限公司

電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:[email protected] | 臺北市信義區和平東路3段257號6樓map

© 2019 傑立資訊 All rights reserved.