IE10,帶您走進HTML5時代
微軟隨著 Windows 8 操作系統(tǒng)提供了 Internet Explorer 10.0 版,這標志IE瀏覽器對HTML5等新技術支持性的進一步發(fā)展與成熟,同時,IE10也提供了新的 Windows 8 風格的一個輕量級App,更加適合觸摸,帶給用戶沉浸式的用戶體驗。
IE10 對 HTML5 的表現(xiàn)能力究竟如何?
先說一點,那就是 HTML 5 的重要變化之一——引入了針對非標準HTML、特別是錯誤格式HTML的標準化解析規(guī)則。也就是說,當瀏覽器在遇到存在錯誤的HTML時(如缺少結束標記),通常會處理得很寬松。這是一個廣受贊譽的特點,因為相比XHTML來說,HTML在此種情況下會繼續(xù)正常處理。IE10 就是這樣一個完全支持 HTML5 標準化解析規(guī)則的瀏覽器。
除此之外呢?我們來簡單看看 IE10 中針對 HTML5 等現(xiàn)代 Web 標準又增加的主要功能特性支持:
其實早在 IE10 開發(fā)者預覽版的時候,就有人做過當時的不同主流瀏覽器之間對 HTML5 支持度的綜合測評,這里給出一張圖表,展現(xiàn)的是各瀏覽器處理 HTML5 各種任務的能力考量,分數(shù)越高越好:
當然,當時的測評還有其他的各方面,由于篇幅有限,就不一一列舉,當時***的結論是,IE10 除了在對 HTML5 標準支持度方面略顯落后外,在 HTML5 其他性能方面都完勝其他瀏覽器。時隔半年多,如今 IE10 正式版發(fā)布了,對 HTML5 標準的支持度方面又有了新的增強。
我們不妨找一臺帶獨立顯卡的 PC 體驗一下魚缸速度測試(點擊圖片打開鏈接)
通過測試我們可以看到 IE10 對圖形圖像和 JavaScript 處理方面的性能優(yōu)勢,有了高性能的呈現(xiàn),那么對于富用戶體驗的 HTML5 交互式網(wǎng)站而言,無疑是流暢體驗的一種保障。
其實還有更多針對 HTML5 的測試,大家可以訪問 http://ietestdrive2.com/ 進行體驗。
IE10 能給消費者和開發(fā)者帶來什么?
作為消費者的我們,可以通過 HTML5 獲得一種輕量、明快的無插件瀏覽體驗,視頻、音頻和動畫均不需要使用任何插件,直接通過瀏覽器呈現(xiàn)。而 IE10 會繼續(xù)利用 GPU 資源加速處理這些多媒體和 JavaScript,讓瀏覽體驗變得更加快速自然。上圖展示的就是一個 cnBeta 新聞站點利用 HTML5 等現(xiàn)代 Web 技術開發(fā)出來的新聞閱讀體驗,該網(wǎng)站在使用 Windows 8 UI 風格的 IE10 打開之后體驗更佳,帶給用戶專注的沉浸式用戶體驗。
這幅圖展示的則是一個基于 HTML5 的網(wǎng)頁版游戲——割繩子,它的用戶體驗毫不遜色于桌面版的應用程序,或者 Windows 8 UI 風格的、從應用商店下載的割繩子 App.
上面這幅圖展示的也是一個網(wǎng)站應用,通過瀏覽器訪問,基于 HTML5,在這里,您可以把照片自然地鋪開在桌子上,供您把玩和欣賞。該應用著重展示的是觸控場景,通過它,您可以用手指輕松將照片鋪開、縮放和旋轉,您可以體驗到自然人機交互帶來的樂趣。當然,照片應用只是一個例子,生活中其實還有很多可以用觸摸作為交互手段的場景,特別是網(wǎng)頁游戲。微軟推出的 MS Pointers API 讓您的觸控開發(fā)起于一個全新高度,Pointer 事件封裝了觸摸、數(shù)字筆和鼠標的輸入,有助于輕松構建不依賴于硬件設備的交互方式的體驗。
像這樣的炫酷的 HTML5 游戲和實用性網(wǎng)站,能夠給用戶帶來舒心的用戶體驗。如果用戶具備觸摸設備,那么用戶還可以通過更加自然的人機交互方式與其互動。試想,要是很多網(wǎng)站都具備這樣的用戶體驗,您每天瀏覽互聯(lián)網(wǎng)的時候,是不是會更加開心呢?我是非常期待的。
但是,這需要時間,需要開發(fā)者們的配合。開發(fā)人員一直是新技術普及和投產(chǎn)的核心人物,他們擔當著應用新技術開發(fā)出產(chǎn)品的重要使命。在 IE10,F(xiàn)12 開發(fā)人員工具將一如既往地為開發(fā)人員提供直觀的錯誤排查和性能等跟蹤分析和調(diào)試,助力于 HTML5 網(wǎng)站的開發(fā)。國外已經(jīng)有了很多針對 HTML5 的成功網(wǎng)站和商業(yè)案例,國內(nèi)這一塊還得依靠我們國內(nèi)的廣大開發(fā)人員的努力。
"HTML5 增加了大量提升用戶體驗的功能標準:canvas 元素可以讓開發(fā)者在一個特定區(qū)域內(nèi)繪制各種復雜圖形,同時可以用 JavaScript 控制你所繪的圖形的動效,使得非 flash 的豐富的視覺效果成為可能,用戶在移動端和 PC 端可以享受到一致的視覺體驗;試想一個你曾經(jīng)使用過的網(wǎng)絡應用程序,一個在線圖片編輯程序,你會用它做簡單的圖片處理,但絕對不會拿它代替 Photoshop,因為它的交互性、響應率和功能性都遠不及本地用程序。HTML5 能夠很好地解決這些問題。對于交互而言,它支持的 menu 元素能夠模擬菜單欄、工具欄、列表欄等本地應用控件, 而且很容易實現(xiàn),Drag-and-Drop 功能可以模仿"將文件拖拽進垃圾箱"的操作;對于響應率而言, Programmable HTTP Cache and Serving 功能能使 Web app 內(nèi)容動態(tài)寫入瀏覽器緩存,使 App 響應率接近于本地應用;Web Workers 允許 App 執(zhí)行多任務,提高用戶并發(fā)操作的穩(wěn)定性能;Offline Web Application 允許 App 在離線狀態(tài)下存儲用戶數(shù)據(jù)、正常瀏覽。你還能通過瀏覽器獲取用戶的位置信息以及更多等待你去探索的功能。"—— 摘自IE瀏覽器中文網(wǎng)站 iefans.net
我覺得這對于開發(fā)者來說,是一個新的機遇,也是一份新的挑戰(zhàn)。從現(xiàn)在的趨勢看,Web 2.0 時代的網(wǎng)站已經(jīng)朝著應用程序的趨勢在發(fā)展,只不過,現(xiàn)有的技術不能很好地滿足設計者對于渾然天成的網(wǎng)站效果的追求,也不能帶給用戶真正完好統(tǒng)一的用戶體驗。踏入 HTML5 開發(fā)的園地,我們不僅可以開發(fā)出高質量的、內(nèi)容精美的網(wǎng)站,更可以編織未來,編寫新的基于互聯(lián)網(wǎng)的 HTML5 應用程序。設想一下未來的用戶不再下載應用程序,而是打開一個網(wǎng)站完成他想做的事情的場景。
現(xiàn)在,各家主流瀏覽器廠商也為 HTML5 做好了準備,是時候開始開發(fā) HTML5 的網(wǎng)站了,不論您是對現(xiàn)有的網(wǎng)站進行升級,還是借機會將新的業(yè)務搭建在 HTML5 之上,都是很好的起點。使用 HTML5 做開發(fā),不僅可以給用戶帶來更多優(yōu)質體驗,開發(fā)者自身也可以節(jié)省很多時間。其中最為突出的是,不必再為了不同的平臺和瀏覽器編寫差異性的代碼以確保用戶體驗的一致了。Windows Phone 8 的移動版 IE 瀏覽器采用的也是 IE10 的內(nèi)核,也有更多的掌上設備中的瀏覽器支持 HTML5,在我看看來,這對于開發(fā)者而言,是一個***的機遇。
如果您想在這個新的開發(fā)領域大展拳腳,那么您也會遇到一些挑戰(zhàn)。針對 HTML5 的開發(fā),如果您選擇 IE10 作為一個平臺,那么正式版的 IE10 已經(jīng)能夠為您的開發(fā)提供卓越的支撐。IE10 對 HTML5 的支持已經(jīng)該進得相當好了,多點觸控技術可為用戶帶來新的自然體驗,同時支持多點觸控和多種觸控方式的 MS Pointers API 為您開發(fā)觸控友好的網(wǎng)站提供了捷徑,IE10 也使用了速度最快的 JavaScript 引擎,同時支持硬件加速,再有就是微軟 Windows 8 上桌面版的 IE10 同 Windows 8 UI 風格的 IE10 一起實現(xiàn)了 PC 與平板瀏覽的體驗一致。這從平臺的層面,為您步入 HTML5 開發(fā)掃清了一些障礙。另外,微軟也已通過一些案例的解讀和文檔的支持,為您掃除了一些頭疼的兼容性方面的障礙,例如如何兼容現(xiàn)有網(wǎng)站,如何在用戶使用舊版瀏覽器時,HTML5 網(wǎng)站自動進行優(yōu)雅的降級(一樣具備良好的用戶體驗)等等。在這里,我想分享一份 IE10 開發(fā)兼容性白皮書 給大家,如果您感興趣,可以抽一點點時間進行閱讀,如果它對您有幫助,也希望您能分享給您身邊的其他做 Web 開發(fā)的朋友們;如果您覺得它不夠好,請向我反饋各位的需求,看看大家還希望這份文檔講些什么內(nèi)容,以對大家的 HTML5 開發(fā)提供更大的幫助! J
***,再給出一個針對開發(fā)者的資源——HTML5 開發(fā)攻略(http://www.beautyoftheweb.cn/bowdevelopers),這個是微軟為開發(fā)者準備的聚合資源,這里有成功案例解析,有新特性的解讀,有開發(fā)好的示例,還有更多其他的您可能會用到的資源。希望大家能夠順利進入 HTML5 開發(fā)的進程中,也希望消費者們能夠通過新的 HTML5 技術和 IE10 獲得您所喜愛的用戶體驗!
原文鏈接:http://www.cnblogs.com/mvperic/archive/2013/01/17/2864768.html