過去十多年來,技術的發展變化很大,例如網路幾乎無所不在,隨時可以接取網頁的應用、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)。看來,這部份的發展還有待努力。

具有本機儲存的能力提升

對於智慧型手機或平板電腦,目前要達到持續與網路連線的目標,還有一段距離,因此一定必須面對離線時的處理。當網頁技術不斷發展,也許有一天我們不再需要用原生應用程式,而是都用HTML、CSS和JavaScript來寫,那如何保障程式不論離線與否,都可以執行呢?

若使用者不能上線,應用程式就有必要在單機內能夠執行,如同我們目前在個人電腦上執行Word、Excel。

盧育聖認為,這時候Local Storage對網頁應用程式來說,就很重要。讓程式可以在離線環境下執行編輯內容,等到連線恢復時再同步資料,此時,可透過HTML5的Web Sockets以網路傳輸資料,來達到目的。

就本機儲存的功能而言,HTML5分為Web Storage和本機資料庫(SQLite和Indexed Database)。前者的目的,是企圖取代目前網頁以Cookies儲存資料的作法,而這又可細分為暫時性儲存的sessionStorage,以及較長久儲存的localStorage等兩種。sessionStorage是指使用者瀏覽該網站期間所要儲存的資料,而localStorage則是會儲存在磁碟中,即使瀏覽器關閉,以此方式儲存的資料還是存在。

叡揚資訊知識產品國際事務處產品開發經理邱維新表示,以前使用者瀏覽網頁時,要儲存資料,須透過Cookies或存放在網站伺服器端;現在可在瀏覽器存取時,預載在使用者本機記憶體中作為快取。他們主要是利用本機儲存,以Key-Value的方式暫存部分資料,讓使用者不用每次都從伺服器端重載,同時節省頻寬及伺服器的負載程度,並且加快App的反應速度。

但他也說,由於HTML5目前只能做到部分離線處理,因各種瀏覽器在SQLite的支援度不一,所以暫時還沒有考慮使用。未來,如果這方面的功能支援得非常完整,他認為將可以讓App發揮更強大的資料處理能力。

對於HTML5的本機儲存,但仍有一些部分的實作需要考量。王森也有類似觀察,他說,就算是Google Docs,應用上也遇到一些限制,如同步機制。目前網頁應用的同步機制並沒有標準化的做法。此外,這樣的機制能否具有儲存大量資料的能力,也令人感到疑慮。

關於本機儲存如何運用,普奇科技ZK核心開發團隊的工程師王景弘表示,首先要考量用途是傾向於作動態資料的快取,或是靜態資料之類的儲存?由於使用者還是需要資料的同步更新,使用者切換不同瀏覽器去存取網頁的行為也很常見,所以這種單靠本地的資料庫,去儲存所有的資料的狀況,目前還不容易發生。

此外,王景弘也觀察到網頁瀏覽器目前對HTML5本機資料庫提供的支援,仍以No-SQL(這裡所指的是Indexed Database)的部分居多,因為No-SQL是新興的資料儲存方式,還有待發展。

Canvas讓開發人員能直接用網頁繪出圖形

先前HTML不具備繪圖的機制,因此開發人員常需先做出圖片檔才能達到效果,但同時還必須處理圖片互相遮蔽的狀況。而HTML5提供了Canvas(畫布)的方式後,現在開發人員可直接用JavaScript來繪製矩形、圓形、多角形、圖片影像、圖表、動畫。

王景弘說,Canvas預設是透明的,所以就可以任意疊加∕畫在其他元素上。Canvas也可以用來繪製3D圖形,也就是所謂的WebGL。相較之下,以前缺乏有效的方案。

Canvas不只是提供2D與3D繪圖,能應用在遊戲上,在商用軟體的領域中,Canvas也能發揮特色,例如許多應用程式中,常見的統計圖表描繪,目前已經有一些廠商推出基於HTML5 Canvas所開發的圖表庫。

此外,也有廠商思考Canvas能否達到其他目的。叡揚知識產品國際事務處CRM雲端服務部經理楊東城表示,他們會考慮讓使用者在App中,利用畫圖的方式來寫報告,或是記錄客戶的記事。

提供觸碰事件的處理能力

網頁應用程式原本就支援滑鼠事件的處理,然而針對觸碰式的設備,如智慧型手機或平板電腦,若繼續用滑鼠事件對應,相關的操作可能會受到限制。

現在,HTML5將觸碰裝置的使用列入規範,它提供介面讓應用程式可以直接處理觸碰事件,以及多點觸碰裝置。它目前支援touchstart、touchend、touchmove、touchcancel等4種觸碰事件的處理。

王景弘認為,當使用者使用支援觸碰的裝置上網時,使用體驗將大幅改變:舉凡以雙指進行縮放、單指移出∕移入、多點觸碰等,這些都有機會改變人們操作網頁的習慣。隨著這類裝置的普及,人機介面可能會與現在大相逕庭,而這也有助於開發者對操作介面的運用,開拓出新的想像空間。而HTML5 將觸碰事件列入規範,也能避免各家實作不一的窘境。

使伺服器端與個人端能雙向通訊的WebSocket

過去,網頁與瀏覽器之間只能透過HTTP,用Stateless的Request、Response方式來互動,現在HTML5可允許用WebSocket在兩端建立雙向通訊管道,而不需要重新建立連線。但這麼做之後,很多人會擔心應用的安全性會有疑慮。

王景弘提到,當初WebSocket的設計是為了解決無法即時∕隨時傳輸的問題,而沒有考慮到安全性的部份。使用者可能開啟多個WebSocket來對伺服器發動DDoS攻擊,特別是網頁遭到惡意程式碼攻擊時(例如XSS)。也有一些人討論它被用作Proxy的可能性(攻擊、存取其他遠方伺服器)。

因為安全性的問題,Firefox(第4版和第5版)和Opera (第11版)一度移除WebSocket。這規格因為還在草案的關係,變化相當快,去年底IETF新發布的RFC 6455,對規格有所編修。而目前支援RFC 6455的瀏覽器已有Chrome 16和Firefox 11,而Apple Safari 5.0.2/5.1、iOS 4.2/55 支援的WebSocket規格,是較早的草案(hixie-76)。

可獲得使用者地理位置資訊的Geolocation

不論是App或網頁應用程式,結合地理位置感知的服務(Location-Based Service)已相當風行,而透過Geolocation的運用,例如使用者所在的經度、緯度、海拔高度,以及行進方向、速度等資訊,網頁應用程式可經由裝置本身的GPS定位功能提供,或從網路上取得,充分發揮設備本身的特色。

楊東城提到,在他們的CRM產品應用中,可運用此功能來記錄使用者的所在地,提供類似打卡的功能。同時,根據使用者目前的位置,還能用來幫助業務員找出正在附近活動的客戶,讓他可以隨時就能去拜訪戶。

除了定位,HTML5還可以讓網頁應用程式存取聲音或影像的輸入裝置,例如麥克風和網路錄影機(HTML Media Capture API)、聯絡人(Contacts API)及裝置傾斜角度(Device Orientation Event API)等本機資料。

Web Workers提供多工,瀏覽器可在背景執行其他程式

運用JavaScript時,通常每次只能執行一個執行緒,現在有了Web Workers的機制,程式碼可以在背景執行,獨立於其他使用介面執行的程式碼之外,讓長期執行的程式可以持續運作,不會受到部分需回應使用者的動作所中斷。盧育聖認為,Web Workers就像多執行緒、多工。若應用程式的執行改成以瀏覽器、網頁技術為主,具有這項機制的HTML5將扮演很重要的角色。

降低圖片用量,讓版面配置更美觀的CSS3

很早的時候(1996年),CSS(Cascading Style Sheets)就已經開始應用在網頁設計上,對初學者而言,除了要搞懂HTML和JavaScript怎麼寫之外,也要了解CSS如何設計與運用。

對於CSS的存在,很多人的認識是為了將網頁的內容與呈現方式分開,而用它來控制網頁的風格和外觀,目前相關規格已發展到Level 3,簡稱為CSS3。到了現在,HTML5在發展上,不只是要借助JavaScript的力量,W3C也將CSS3納入HTML5的範疇內。

CSS細分多個部分,包含選擇器、背景與邊緣、文字特效、2D/3D變形、動畫、多欄呈現和使用介面。

以文字的呈現為例,CSS可以開發人員用word-break和word-wrap等屬性,指定將內容依視窗寬度自動換行,也可以用column-count、column-gap等屬性,來設定欄位數量和欄位間隔距離。

對於顏色的透明度,CSS3也允許開發人員用Opacity屬性來操作。它同時也可以用Gradients來做到顏色漸層的效果。

CSS3中還有一個特別受到很多人歡迎的屬性,那就是border-radius。以網頁開發人員要將特定區塊或按鈕做成是邊緣有圓角的樣式,往往得借助圖片來進行,有這個屬性後,單靠CSS就可以達到目的。

王景弘說,HTML5+CSS3可以簡化一些Layout組成的方式,例如按鈕可以很彈性地放大、縮小。以前要讓按鈕有圓邊、陰影,需透過切九宮格或十幾宮格的方式規畫,相當麻煩。現在在HTML5和CSS3就已經支援,省了很多功夫。

瀏覽器支援CSS3 border-radius與否的差異

想快速了解新舊版瀏覽器對CSS的支援度如何,可以用圖中這個完全以CSS語法呈現的哆啦A夢網頁(http://css3.zxq.net/doraemon/doraemon_css3.html),或波提獅網頁(http://goo.gl/93RAv)來印證。

HTML5可使網頁直接播放視訊

若網頁用HTML的Video標籤來呈現影音檔,支援HTML5的瀏覽器開啟這個網頁後,可以呈現畫面進度、音量大小的控制桿。圖中取自Apple的HTML5示範網站(http://goo.gl/Hm0CT),內容是電影《創:光速戰記》的預告片。

網頁可直接產生圖表,而不需仰賴圖檔或Flash

HTML5的Canvas屬性,可用作視覺化圖表元件的產生,圖中為由RGraph圖表元件用HTML5和JavaScript所示範的長條圖。


相關報導請參考「用HTML5打造次世代網頁」


熱門新聞

Advertisement