結合HTML5的App V.S. 用HTML5的行動版網頁:Yahoo!奇摩在行動平臺上已開始採用HTML5,像是「Y!每日好康」App(左圖),以及「無名小站」行動版網頁(右圖),其中的3D效果及一些JavaScript都是使用新標準。

隨著HTML5的討論聲浪,許多網頁開發人員已經開始嘗試採用新的網頁標準,也有許多開發者可能對於HTML5的現況有些疑惑,像是目前瀏覽器的支援程度不一致的情況,不過,近年各家瀏覽器的改版頻率加快,並開始標榜與HTML5的相容性,這方面的差距將逐漸縮小,而行動平臺的興起,也加快HTML5的發展速度。

面對HTML5技術,主流網站已超過3成採用

隨著各瀏覽器加速對HTML5的支援性,雖然HTML5的推動時間並不長,且標準仍未抵定,不過,國際間的各大網站針對HTML5的技術應用步調其實相當快,且比例並不低。追蹤網路技術的科技網站binvisions.com去年曾經分析全球100個流量較大的網站,在他們的調查中,已有34%的網站已採用HTML5技術。主要是搜尋引擎與社交媒體網站,像是Google、Yahoo!、百度、Facebook、YouTube、Twitter等,同時也有其他各類型網站,已經使用HTML5技術。這樣的數據也顯示出,雖然該技術標準尚未定案,但許多知名網站其實都已經先著手支援,趨勢已然成形。

回到臺灣,有哪些網站已經用HTML5?臺灣Yahoo!奇摩就是一個例子,已經在手機版採用HTML5技術,像是行動版的臺灣Yahoo!奇摩首頁、無名小站、電子信箱等頁面,而在App方面,像是「Yahoo!」以及「Y!每日好康」等,也是以HTML5技術實作。

Yahoo!亞太區科技研發工程部經理蔡篤豪表示,他們對於使用者體驗相當重視,以資訊瀏覽類型的網站來說,採用HTML5技術能帶來許多方便性。由於這類網站重視網站執行的速度,並強調網站的動線與內容資訊的分類,希望帶給使用者在瀏覽網頁時能有最佳的視覺效果,而新標準所呈現的視覺效果更直覺流暢。

舉例來說,瀏覽無名小站網頁時,左上角的回上一頁的邏輯是以HTML5的Local storage實作,相較以往開發者要結合Server site的方式,現在只要直接用瀏覽器就可執行,可以大幅加快開發的速度。更重要的是,目前這項技術在手機上的支援性已經算是相當不錯,因此他們已針對行動版網頁的部分內容,改以HTML5技術來製作。

智慧型手機對HTML5的支援性高

過去Flash一直是解決網站互動性的最佳解決方案,在智慧型手機出現之後,以及Apple平臺中的iPhone和iPad拒絕使用Flash等因素影響,使得相關應用無法在行動裝置上推展;同時,隨著新的網路標準制定,HTML5、CSS3與JavaScript可應用於內容設計與互動媒體方面,甚至讓網頁突破傳統的限制,成為功能完整的應用程式,Adobe最終宣布不再為行動瀏覽器開發新版Flash。

隨著智慧型手機與平版裝置的興起,也連帶影響到上網瀏覽的使用體驗,過去我們從電腦開啟瀏覽器上網,現在透過手機上網的比例也逐漸增加。根據研究機構IDC的數據,智慧型手機去年第4季在臺灣市場佔比已超過6成。

而HTML5對於行動裝置的開發,有著相當大的影響。目前智慧型手機上以iOS與Android的市佔率最高,它們的瀏覽器多是基於Webkit引擎執行,而這些瀏覽器對於HTML5的支援性較高,因此,在手機瀏覽器上的問題相對較少,開發人員較能放心的採用一些HTML5新技術。

Google亞太區Chrome產品總監胡皓霖表示,以HTML5技術而言,它的優勢在於,開發者人員不需要為每個平臺都寫一個版本,同樣的程式在不同平臺與裝置上都能執行。原本需要用行動裝置原生應用程式開發框架才能做出的效果,其實現在也能利用HTML5或CSS3的技術來完成。而且,撰寫HTML的門檻要比撰寫Native API的門檻低。

不過,在開發手機平臺上時,很多開發人員還會面對到一個問題,就是該使用Web App的應用程式,或者是原生應用程式(Native App)來開發。

一般而言,Web App的部署成本與學習門檻較低,並且在跨平臺開發上有相對優勢。而Native App就像是打包好的套裝軟體,從網路應用程式商店下載後便可以在手機上直接執行,執行較快、支援離線操作、能夠調用系統底層服務。

以現今HTML5的應用來看,除了單純開發Web App,大家關心的焦點也放在以HTML5+Native的方式來實作。這種混合型的應用,簡單來說,就是將HTML5包成一個像是原生應用程式的封裝,因此,執行上仍是以原生應用程式的方式進行,而其中的程式則是採用HTML5技術。

這樣的好處在於,可以節省開發時間,只有少部份要因應系統、裝置的差異而作修改,且技術門檻也不高,比起同時寫不同平臺容易很多,可降低整體開發成本,而原生應用程式的優點也能保留,因而在效能上的表現會好一些,並能夠調用系統底層服務。附帶一提的是,雖然HTML5的開發難度不高,但目前大家對Javascript的深度使用仍不足,可能是開發人員更應該積極去加強的部分。

現場直擊

直接執行Web App的新一代行動裝置平臺

在目前手機平臺發展上,由於Apple、Google與微軟自身均提供手機平臺與作業系統,對於過去沒有手機平臺的Mozilla基金會而言,使用者在行動裝置上瀏覽器的選擇性上更低,反而比在電腦上所受到的限制還要大。

確實,Firefox在行動裝置上的腳步慢了一些,Mozilla研發總監何福軒表示,他們的宗旨希望對網路使用者能有一個自由開放的選擇,不過目前行動市場上的選擇卻比個人電腦上所受到限制來的多,因此,Mozilla基金會今年開發出一套新的智慧型手機系統Boot to Gecko(B2G),它是一個以Gecko為底層、基於HTML 5的系統,而其中搭載的Firefox行動版,也在這次有了大幅度的優化。

該平臺的所有應用程式都是在網路上執行,並提供不錯的HTML5支援性,未來,Mozilla更將推出提供基於HTML5發展的應用程式軟體商店,讓開發人員可以透過HTML5開發跨平臺軟體。從這樣來看,HTML5對未來網路應用發展的重要性確實相當高。

同時,何福軒在現場也特別展示了1支三星Galaxy S2智慧型手機,有趣的是,它已經移除了其中的Android系統,並搭載Boot to Gecko平臺的智慧型手機。實際操作時,它的開機速度相當快,並以Web App的方式執行其中的程式,可以說是一個以Web為基礎的平臺,直接在網路上執行程式時,亦能顯示網頁的原始碼,我們看到,像是其中的地圖服務,實際上只是包一個十幾行的程式,便能很迅速做出一個連結Google Maps的功能,這是因為網路上的許多服務已經對於HTML5有很高的支援性。當然,對應到手機該有的功能,除了藍牙或收發簡訊等裝置功能,Mozilla也將針對需要存取API的電話、手機攝影鏡頭、GPS元件等功能加入WebAPI內容整合對應。

由於B2G是一個開放的網路應用程式平臺開發專案,未來各企業廠商、電信商都可以免費藉由這套平臺,來設計出符合它們理想介面的裝置,而不像Android與iOS平臺需要依照規範的標準來設計。目前,西班牙電信商Telefonica已準備與Mozilla合作推出手機。

以HTML5為核心應用的手機

Mozilla基金會開發出一套新的智慧型手機平臺Boot to Gecko,它是一個以Gecko為底層、基於HTML 5的系統,甚至將是一個完全以Web為基礎的行動平臺。


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


Advertisement

更多 iThome相關內容