HTML5 網路的大未來，關注瀏覽器的發展概況
Chrome、Firefox、IE、Opera，透過瀏覽器使用的網站服務愈來愈強大，也愈來愈美觀，這可能是因為使用了 HTML5 技術。 HTML5 這個新一代的網路技術，讓網路程式的功能趕上了桌面軟體，讓純網路的作業環境變得更可能，各家瀏覽器的實際應用與未來發展，請看小編的介紹。
快速目錄：
- HTML5 八大特色
- Opera：HTML5的先驅者，最歡迎HTML5的網路平台
- Chrome：HTML5的實踐家，HTML5實際應用就看它
- Firefox：低調的支持者，挾HTML5進攻行動平台
- IE：沉穩的後來者，市場老大加入HTML5陣容
不論你使用什麼瀏覽器，你一定聽過HTML5這個下一代的網路標準，不過HTML5到底是什麼呢？狹義的HTML5當然就是指新一代的超文本語言，用來取代現在製作網站的HTML4。不過廣義的HTML5則包含了HTML5、CSS3、JavaScript等各種不同的技術，和過去的「Ajax」一詞涵意類似。
目前HTML5還處於非常初期的發展階段，2011年5月才進入Last Call Working draft，邀請開發者加入HTML5標準初稿制定的最後階段，因此許多標準都還有可能變動，目前W3C Working Group預計要到2014年，才會到達穩定的候選版（Recomadation）階段，這時多數標準都已經大致底定，不過Google在W3C HTML工作小組的編輯Ian Hickson曾猜測搞不到要到2022年才能達到這個目標。
▲目前最新版的HTML5標準是2011年5月的Last Call Working Draft。
HTML5的目的在於讓網路開發者能夠擺脫對於各種第三方外掛程式的依賴，加入了許多新的語言標記和格式支援，許多必須加上外掛後才能夠達到的功能，未來只要利用HTML5這個開放標準就可以達成，例如HTML5將支援視訊標記，讓瀏覽器不需依靠Flash就可以播放視訊或是音訊，另外也提供了網路攝影機、麥克風等多媒體裝置的支援，網路程式未來的功能也就更為多樣化。
▲依靠HTML5的新功能，網頁開發者可以製作出不輸Flash的效果。
雖然HTML5還在發展初期，不過已經出現了許多穩定而且實用的功能，因此包含Google、微軟、蘋果、Opera和Mozilla基金會在內的五大瀏覽器廠商，都迫不急待地在自家瀏覽器加入了適合自家的HTML5功能。這些較為穩定的HTML5功能可以分成以下8組。
HTML5 八大特色
離線與儲存
HTML5為開發者提供了儲存程式快取和簡易的資料庫功能，並可以指定線上和離線狀態時，要進行何種工作。這個功能讓網路程式在離線時也能夠正常運作，讓網際網路變身成一個系統平台。儲存功能由網路儲存空間、檔案存取和IndexedDB資料庫搭配而成，讓HTML5程式可以將網路上的檔案儲存在本機端。
▲在本機端離線修改後，也具備將檔案同步回伺服器的能力。
多媒體
HTML5的多媒體支援使用者已經聽到不要聽了吧，從YouTube支援HTML5影片播放，到Steve Jobs撰文批評Flash，並支持HTML5，都是媒體爭相報導的大事。HTML5支援直接插入影片、音訊等多媒體資源，不再需要第三方外掛
▲第三方外掛可能將走入歷史。
風格呈現
HTML5的另一個亮點就是搭配CSS3所能呈現出的網頁版面，CSS3提供了圓角、網路字型、轉場、2D和3D變型等功能，讓網頁的排版方式更為多樣，也讓網際網路可以變成最佳的電子書平台。
▲CSS3提供了多種字型，讓排版方式多變。
語意
HTML5加入了過去沒有的語意標籤，並修改了自上一代HTML和XHTML流傳下來的缺點，讓HTML的語意更為完善，也支援更多功能，讓HTML5能夠自給自足，成為一個完整的程式平台，而不需依靠第三方提供的外掛，例如影音播放、遊戲製作、版面安排等功能，都是HTML5新加入的重點功能。
▲加入新的語意標籤。
檔案存取
另一個HTML5的有趣功能就是它可以存取本地端的檔案系統，聽起來沒什麼好玩的。不過如果你想把桌面的檔案直接拖入網路程式中，就得依賴這個功能。檔案存取功能可以讓瀏覽器讀取檔案內容，例如你要上傳照片，瀏覽器就可以在上傳的同時顯示縮圖等。
▲桌面檔案直接丟進瀏覽器。
效能
HTML5有多種增加執行效能的功能，讓網路程式的反應速度更加貼進原生程式，例如使用程式快取、CSS3的轉場和動畫功能、背景執行JavaScript等，都可以提升網路程式的反應速度，讓使用者有更加愉快的使用體驗。
▲執行效能加速！讓你不用等。
圖像
瀏覽器的硬體加速想必大家都聽過，這是HTML5提供的圖像功能，讓瀏覽器能夠使用GPU的功能處理2D canvas、WebGL、SVG、CSS 3D變形等功能，讓網頁能夠在使用更先進的圖像時，保持網頁的反應速度。
▲讓瀏覽器增強3D、2D效果。
連結性
HTML5的最後一個特點資訊傳遞方式的增強，HTML5提供WebSocket協定，讓本地端和伺服器之間能夠保持通訊連線，降低資料傳遞的反應時間。開發者還能利用HTML5擷取本地端裝置的功能，讓HTML5程式具有即時通訊功能。另外HTML5也加入了伺服器將訊息推送到客戶端的功能。
▲瀏覽器就是你的MSN！
延伸閱讀：
不必學語法！Google 幫你把 Flash 轉成 HTML5
（後面還有瀏覽器：Opera HTML5的介紹喔！）
Opera：HTML5的先驅者
最歡迎HTML5的網路平台
Opera在對於HTML5的支援採取積極態度，並在W3C的HTML工作小組中非常活躍，甚至在HTML5發展早期Opera就貢獻了不少基礎規範，目前的HTML5是由W3C在當初由Opera、Apple和Firefox開發的Web Applications 1.0基礎上建立起來的。Opera對於HTML5和CSS 3的接受度非常高。
▲未來瀏覽器將可以不依靠第三方程式，就可以驅動你的網路攝影機。
Opera也表示了對於HTML5的樂觀看法，認為HTML5的Web app具有跨平台、開放的特性而且使用常見網頁技術，讓HTML5的網路程式不但容易開發、方便散布，而且流通性高的優點，讓網際網路不再只是一個工具，而是一個完整的平台，未來你的電腦系統可能僅以瀏覽器作為作業平台，讓你透過瀏覽器就可以獲得完整的電腦能力。
▲HTML5抓取的視訊可以變成HTML物件並和網頁內容互動。
不過Opera也表示HTML5現在仍有缺點，目前面臨的最大問題就是3D效能不足，轉向偵測和獲利來源的問題。對於這些問題，W3C的HTML工作小組，針對3D效能不足的問題，HTML5提供了硬體加速功能，讓HTML5開發的程式可以利用顯示卡的效能，使得Web App的效能可以更接近原生程式。
▲Opera開發的Native Page功能可以讓網頁自動呈現為電子書的形式。
Opera正在開發的HTML5功能中，包含了GetUserMedia、Camera和Native Page功能。GetUserMedia可以讓網站存取使用者電腦上的多媒體裝置和檔案，例如開發者可以利用HTML的Video標籤，將<source>的來源換成使用者裝置上的相機，讓網頁可以即時使用網路攝影機的影像，並和網頁上的物件互動。除此之外，GetUserMedia也可以存取本機電腦上的資料流、音訊、聯絡人和行事曆資料，讓電腦與本機檔案的交流更加方便。
搶先試用HTML5新功能
為了讓開發者更加熟悉這個功能，Opera內部的員工也提供了一個開發版Opera在部落格上，讓開發者能夠搶先試用支援這些功能的Opera瀏覽器，另外裡面也詳細解說了這些功能的作法，如果有興趣的讀者可以看看。
Opera Labs Camera and Pages網址：http://dev.opera.com/articles/view/playing-with-html5-video-and-getusermedia-support/
▲你可以在Opera Labs找到具有Native Pages和Camera支援的特殊版本Opera。
▲Opera也詳盡解說了Native Page所使用的技術。
（後面還有瀏覽器：Chrome HTML5的介紹喔！）
Chrome：HTML5的實踐家
HTML5實際應用就看它
在眾多瀏覽器中，和Opera一樣積極將HTML5功能加入的，當屬Google的Chrome瀏覽器了，不過Chrome瀏覽器並不是像Opera一樣採用最先端的HTML5技術，相反地，Google穩健地在Chrome中加入已經開始成熟的HTML5功能，例如離線儲存等，以搭配各樣的Google服務，並藉著HTML5的功能，建立一個純網路的作業系統平台，例如Google就將HTML5的離線儲存功能廣泛地應用在各種Google服務中，讓使用者可以將檔案暫存在瀏覽器的暫存檔中，即使在離線時，也能夠使用Google服務的某些功能。另外Google也利用HTML5存取本機端檔案的功能，讓Gmail等服務利用拖拉放的方式，將檔案傳送到網路服務中。
▲Google收集了許多HTML5展示，顯示Chrome強大的硬體加速3D功能。
Chrome瀏覽器另一個著重的點在於硬體加速的導入，Chrome在數個版本之前就已經導入WebGL功能，讓瀏覽器的3D顯示能力能夠藉由GPU大幅增強，在2D部分，Chrome瀏覽器也正在實驗利用GPU加速2D內容和瀏覽器視窗的構成。
▲網路上也開始出現HTML5小遊戲，未來甚至將可以進化到3D遊戲呢！
不論是離線儲存、檔案存取和硬體加速，Google都是為了增加自家Chrome OS的功能性。Chrome OS是一個純粹使用瀏覽器作為操作介面的瀏覽器，並依靠網路程式為作業系統增加功能，因此HTML5的出現使得Chrome OS的功能大進，減少對原生程式的依賴，也這讓Chrome OS成為可以獨當一面的系統。
▲WebRTC的即時訊息功能是Google Chrome即將加入的HTML5功能。
未來Chrome也將加入WebRTC功能，WebRTC指的是Web browser with Real-Time Communications（瀏覽器即時通訊），是一組JavaScript API，可以讓網路程式具有和Skype一樣的功能，而且不需安裝第三方程式，未來我們想使用Google+的Hangout+或是Facebook裡的視訊功能，就不需要額外再安裝軟體了，目前WebRTC W3C工作小組已經提出第一份標準草案（first draft）。
Google的HTML5實驗
在Chrome瀏覽器中很早就加入了硬體加速的功能，讓Chrome瀏覽器具備顯示3D物件的能力，雖然還無法達到像原生軟體一樣的效能，但我們仍可一窺網路程式未來的樣貌，未來無論是遊戲或是3D建模，也許不過安裝任何程式，只要上網就可以辦得到，下一代Chrome也將加入遊戲手把的支援，讓網路遊戲平台更加完整。Google也製作了許多以HTML5打造的網站，展示未來網站設計師可以利用HTML5設計出什麼樣的網站，例如之前的OK GO的All is not Lost音樂錄影帶，就是以HTML5打造的。如果你對HTML5的功能有興趣，Google提供的Chrome Experiments網站會是很好的展示。
Chrome Experiments網址：http://www.chromeexperiments.com/
▲Google提供的Chrome Experiments網站具有非常多HTML5和WebGL展示。
（後面還有瀏覽器：Firefox HTML5的介紹喔！）
Firefox：低調的支持者
挾HTML5進攻行動平台
比起Opera和Chrome，由社群開發的Firefox比較沒有資源大張旗鼓地宣傳自己的HTML5支援度，不過Firefox的HTML5支援能力可不比這兩個瀏覽器差，默默地支援了許多已經加入HTML5草案的功能。而Firefox的硬體加速支援比Opera和Chrome更具彈性，除了採用採用OpenGL做為構成加速的技術之外，在 2D 內容物件的加速上會依各平台調整，現在就可以達成全平台支援，Firefox採用微軟的 Direct2D（Windows平台）、Quartz（OS X）或 XRender（Linux平台）處理 2D 物件的組成。
▲B2G將支援行動裝置的底層功能，包括撥打電話。
另外Firefox未來將純粹利用HTML5等網路技術打造一個行動平台Boot to Gecko（B2G），讓手機開發商能夠用一個完全開發的選擇。B2G計畫預計所有的功能和程式都是以HTML5網路技術打造，讓使用者開啟手機後即可啟動瀏覽器，使用這個完全雲端的行動平台，也解決了開發者為不同裝置重覆開發的煩惱。B2G平台和過去號稱以網路技術打造的WebOS有什麼不同呢？B2G完全以網路技術打造，並在網路程式中，加入行動平台API，讓瀏覽器可以執行所有的手機功能，如打電話、SMS等等，而不需轉介到原生平台，因此它在理論上可以支援所有平台上的行動瀏覽器。
▲SMS也是預定加入的功能之一。
雖然B2G看起來非常目有未來性，但現階段仍有許多問題，有許多工作尚待解決。例如加入各種新的Web API，讓B2G平台可以支援電話、簡訊、相機、藍牙、USB和NFC等手機底層功能，另外待機模式也有待開發，最重要的工作則是確定各式網路程式可以輕鬆轉譯到B2G平台上。
▲B2G未來的Demo圖，不過目前還有許多問題待解決。
搶先試玩B2G
你想搶先試玩這個以HTML5打造的行動平台嗎？Mozilla基金會在自家Wiki中提供了網路版Demo，讓你可以利用Firefox瀏覽器試用B2G平台和其前端介面Gaia，我們可以透過這個Demo了解B2G未來的藍圖。
B2G示範網頁：http://andreasgal.github.com/gaia/
▲在B2G的Demo網站中，可以玩B2G模擬器。
▲如果你對B2G有更深的興趣，可以在MozillaWiki找到更多資料，網址為：https://wiki.mozilla.org/B2G。
（後面還有瀏覽器：IE HTML5的介紹喔！）
IE：沉穩的後來者
市場老大加入HTML5陣容
老牌的Internet Explorer從IE 9開始就擺脫了過去封閉的形象，開始導入HTML5標準，到了IE 10更將進一步支援更多HTML5功能，我們從目前的IE 10 Preview平台可以看到微軟這次對HTML5開放標準的支援是玩真的，開始支援許多幾乎確定加入HTML5標準的功能。
▲IE 10的開發者預覽只有在Windows 8下才能安裝。
不過IE的腳步還是比其他廠商稍慢，台灣微軟的應用開發技術副理上官林傑先生表示，由於HTML5標準尚未完全確定，微軟並不會因為搶快而加入許多還不穩定的HTML5功能，而會慢慢地加入許多已經成熟的功能，提供使用者最高的穩定性，也讓HTML5在IE中的表現達到最好。除此之外，上官先生還提到目前使用HTML5還有一些疑慮，像是SVG和canvas經過硬體加速之後是否能達到使用者的標準，和JavaScript與WebGL會曝露記憶體位置的安全疑慮，都是微軟在全面支援HTML5標準之前，需考慮的重點。
▲使用者可以透過微軟的Build Windows網站下載Windows 8預覽版，體驗IE 10的HTML5威力。
動作慢並不表示微軟就不支援HTML5這個標準了，在W3C的HTML工作小組中，微軟也積極地參與HTML5標準制定的工作，像是目前HTML5中儲存網路資料的IndexedDB功能，就由Microsoft和Mozilla共同提出到W3C HTML工作小組中，未來也很有可能成為HTML5儲存網路資料的標準API。
▲在IE Test Drive網站中，也提供許多HTML5展示，讓你體驗IE 10的硬體加速威力。
Build Windows網址：http://www.buildwindows.com/
IE Test Drive網址：http://ie.microsoft.com/testdrive/
微軟的硬體加速採用自家的DirectX方案，以Direct3D加速3D內容，並利用Direct2D和DirectWrite加速2D物件和文字，顯示結果不但美觀而且快速。不過微軟的硬體加速目前只有在Windows Vista/7甚至是Windows 8才有效果。
HTML5 Labs
目前我們在IE 9只看得到些微的HTML5支援，不過真正的好戲還藏IE 10中，目前IE 10正加緊腳步開發中，想看看微軟IE未來將支援什麼樣的HTML5功能嗎？那就不能錯過HTML5 Labs網站，這個微軟架設的網站列出微軟正在進行的HTML5計畫，我們可以看出下一代IE不但將支援用來和伺服器傳輸資料的WebSocket，也將支援儲存網路資料的IndexedDB，另外HTML5影片字幕、多媒體擷取也是IE將來可能有的HTML5功能。
▲從HTML5 Labs我們可以知道IE未來將會支援什麼HTML5功能。
HTML5 Labs網址：http://html5labs.interoperabilitybridges.com/
本文同步刊載於PC home雜誌
歡迎加入PC home雜誌粉絲團！
