擁抱IE10,開發新世界!

2013.01.04 by
《數位時代》整合行銷部
擁抱IE10,開發新世界!
隨著智慧型手機、平板電腦漸趨普及,不僅使觸控一躍成為主流輸入方式,為使用者形塑新穎的網路瀏覽體驗,也為開發者開啟寬廣大門,只要巧妙運用HTM...

隨著智慧型手機、平板電腦漸趨普及,不僅使觸控一躍成為主流輸入方式,為使用者形塑新穎的網路瀏覽體驗,也為開發者開啟寬廣大門,只要巧妙運用HTML5與CSS3技術,即可走進一個更自由無拘、更易於展現創意的嶄新世界!

以往人們要遨遊網路世界,至少得倚賴三種元素-鍵盤、滑鼠、螢幕;所以只見電腦使用者,長時間坐定在固定位置,聚精會神緊盯螢幕,配合滑鼠移動、鍵盤敲擊,沈浸在自己的一片天地。

只不過,鮮少歷經電腦薰陶的年長人士,無奈被隔絕在繽紛網路世界之外,只能靠著傳統的報章書籍,填補求知渴望。

但最近這2~3年,所有的事情,開始變得不一樣!人們連結網路的主要載具,從個人電腦變成行動裝置,輸入方式由鍵盤及滑鼠變成了觸控;隨著這個轉變,使用者不再受限於時空疆界,無論身處何地,只要能連網,都可恣意翱翔數位天空,即使年長人士,都因為觸控打破層層壁壘,得以融入缺席已久的數位情境。

身處這個嶄新世界,人們啟動數位應用的第一個接觸點-瀏覽器,無疑顯得格外重要,因此它身繫重任,必須引領人們突破過往的網頁使用模式,營造快速飆網、流暢觸控、安全無虞的瀏覽體驗。譬如隨著微軟新一代作業系統Windows 8聯袂現身的Internet Explorer 10(以下簡稱IE10),便以此為主要訴求。

藉由IE10,我們清楚看到顛覆傳統的「無邊框」設計、直觀實用的釘選網站(Pinned Sites)功能,或透過常用工具列(Charm bar),輕鬆啟用網頁分享功能,一切的一切,都足以匯聚為深刻的感觸,讚嘆現今瀏覽技術之進步飛快!

更值得一提的,Windows 8為求因應不同裝置屬性,分別提供最美好的操作體驗,所以特別內建「雙版本」IE10,一是適用傳統環境的桌面版IE10,另一則是適用觸控環境的Modern IE10。

當然,要真正孕育完美的網路使用經驗,固然需要快速、直覺、安全的瀏覽器服務來牽成,更重要的,仍有賴開發人員展現絕佳設計成果。為此微軟在IE10悉心新增許多實用功能,幫助開發人員實現創意巧思,挑戰無限可能。且看IE10如何引領開發者進入全新的紀元?而開發者如何善用創新功能,開闢另一個嶄新世界?

更加完整支援HTML5
從IE9開始,微軟已展現支援HTML5技術的決心,到了IE10,支援範圍則更加完整徹底,一些過去仍須倚靠外掛程式(例如Plugins、ActiveX等)、或圖片技巧才能營造的效果,如今都能獨立完成。

首先,它引進HTML5視訊增強功能,採用

再者,它開始支援draggable屬性,使得套用與屬性相關的任何HTML元素,都能在頁面上拖曳,不僅如此,IE10也在dataTransfer物件中新增files屬性,得以從桌面拖放一或多個檔案到網頁,相當方便。

另外,IE10也新增了對WebSocket API的支援,此後開發者只需動用少許程式碼,就能輕易利用低延遲的雙向資料交換,建立快速的線上遊戲、即時社交網路通知、即時顯示股票和天氣資訊等即時資料,打造迅捷流暢的網頁顯示效果。

大量支援CSS規格
對開發者的另一大福音,即在於IE10增加支援許多新的「階層式樣式表(CSS)」規格,包括了新的進階配置、視覺效果、移動瀏覽與縮放功能。譬如開發者可利用CSS3 Animation製作網頁動畫,也可利用CSS3 Transition設定網頁元素過場特效。

不僅如此,開發者還可使用CSS3 Transformation改變網頁元素的縮放、位移或旋轉,輕鬆創造各種變形效果;至於CSS Grid Layout、CSS Multi-column layout或CSS Flexible Box,則有助開發者快速進行排版。也就是說,開發者過去「辦不到」或「很難辦到」的特效,都不再是難解習題。

因IE10大力支持HTML5,也使它擁有一項重要特質,不再只是單純的網頁顯示工具,可搖身一變成為APP平台。誠如多奇數位創意技術總監黃保翕所說,IE10的誕生,讓開發者得以運用HTML5單一技術標準,快速打造跨瀏覽器、跨行動裝置的應用成果。

台灣微軟應用開發技術經理上官林傑呼應這個說法,有了HTML5的加持,開發者的想像力不會框限於網頁,可同時展現在眾多平台。

「HTML5時代真的到了!」悠邁科技共同創辦人劉詩雁說,IE10讓HTML5真正進入開發者的主流世代,堪稱是重要分水嶺!

擁抱開發新世界
挾著「網頁無邊框」、「快速瀏覽」、「安全」、「流暢觸控」及「跨平台裝置」等嶄新特色,再加上HTML5及CSS3技術助陣,IE10將大幅顛覆開發者對IE瀏覽器的想像,讓無窮的創意巧思,得以跨越瀏覽器、行動裝置等疆界,揮灑在一個美麗新世界!

Touch時代新整合
無論是多奇數位創意技術總監黃保翕、悠邁科技共同創辦人劉詩雁,或台灣微軟的應用開發技術經理上官林傑,三人都有渾厚的技術底蘊,擁有豐富的開發實務經驗,對於IE10不管是形諸於外、甚或看不見的功能特質,都有深刻體悟。

接下來的篇幅,將透過與三人的對談(註:黃保翕簡稱『黃』、劉詩雁簡稱『劉』、上官林傑簡稱『上官』),帶領開發者深入探索IE10,領略Touch時代的新整合內涵,使得想像力一飛衝天!

《趨勢面》
問:消費者未來使用資訊產品樣貌是什麼?
黃:未來資訊產品將是多元的,不論滑鼠、鍵盤、觸控,甚至Kinect 3D立體輸入,任何以使用者為中心所設計的輸出入方式,都可能蓬勃發展。

上官:未來有無限可能,不會拘泥在某一種型式,人類操控機器的方式,將會不斷進步與改良,除了觸控外,其餘包括實體按鍵、聲控、手勢控制等等,都將朝著最符合人們習慣使用的方向持續演進,想像空間無窮大。另由「無邊框」設計帶動的全新網站體驗,使用者只需輕鬆撥動手指就能啟用許多功能,更蘊含無限可能。

劉:據我的觀察,現在每一節捷運車廂內,至多可同時看到10~15台平板電腦,只見人們聚焦會神地閱讀或使用即時通訊,顯見觸控功能深植人心,今後會有更多以觸控為基礎的應用誕生。

問:消費者使用經驗與使用方式改變,帶動哪些事情?哪些商機?
黃:使用經驗改變,但有一點肯定不會變,那就是連網!透過網路,將使人與人的互動更為即時,另外拜觸控所賜,以往不擅長電腦打字的中老年族群,也得以加入這場互動體驗,可望帶動一些與人際相關的應用商機,我估計這個商機,起碼是現在的2~3倍大。

劉:隨著智慧型手機普及,預期未來結合手機、LBS定位服務、擴增實境(AR)等新興應用商機將會陸續現身;例如當人們走進賣場,開啟該商場的App,並將手機鏡頭朝著某個專區拍攝,很快的,屬於該專區的商家介紹及相關Campaign,就會呈現在手機螢幕。此外,一些結合心跳、血糖等偵測機制的客製化平板裝置,可望隨著中高齡者對於健康照護的殷切需求,找到不錯利基。

上官:我提出一個另類商機,當人們隨身攜帶的裝置變多且頻頻觸摸,類似像擦拭布等保養工具,理應具有不錯的銷售潛力。另外,未來行裝動置會更加聰明,甚至藉由使用者的手指觸控或聲控,感知其身心狀態,例如從聲紋辨識出使用者為老年人,瀏覽器便自動放大字體,營造更完美的體驗,此類商機頗具看頭。

問:這些改變,對開發者,又帶來哪些機會?有哪些挑戰?
黃:多元性的裝置與輸出入方式,使得應用格局擴大,開發者可發揮的機會變多,但有鑑於長尾效應,研判市場上最為大宗的應用需求,恐怕只會由1~2家少數業者掌控,多數開發者唯有朝向獨特的創新應用發展,才不致被市場洪流淹沒。

劉:網路創業圈成功案例其實不多,因為不管是Web或APP應用,不過是服務通路的型式,很難變成主要業務,因此開發者恐怕得好好經營網站營運、社群人脈,才有利於創造商機。

上官:儘管隨著Web與行動裝置崛起,已觸動社會運作方式之轉變,使開發者有機會直接接觸閱聽眾,但不變的是,仍需結合行銷與業務助力,才可望吸引閱聽眾的眼球;因此開發者鑽研技術研發之餘,必須透過異業結盟或其他方式,補足這部分的能量。

《效益面》
問:IE10對開發者,帶來哪些契機?
上官:我經常用平板展示一款Atari網頁遊戲,若不特別說明,大家都以為它是APP,因為觸控流暢度實在太棒;此套遊戲是以IE10為基礎開發而成,看到這裡,似已無須多言,開發者理應體認到,這其中實在蘊藏莫大契機。

從前若不靠Flash等外掛程式,單單以JavaScript或CSS開發網頁遊戲,想做到類似Atari的煙霧特效,難度非常高,就算勉強做出,順暢度也不佳;現在透過IE10對HTML5等新技術的支援,再配合強大的硬體加速功能,所有難題終告化解。更重要的是,拜HTML5所賜,網頁程式可直接轉換為APP,開發者只須做一次工,不必多寫任何一行Code,既可放到Web、又可放到APP市集,兼顧不同市場需求,何樂而不為?不論上述的Atari,或是Cut the Rope、Contre Jour等知名遊戲,全都是「既IE10又APP」的成功案例。

黃:就像Cut the Rope,每一條擺動的繩子,皆由1萬多個三角形組成,過去只能用DIV與CSS來做,然一旦超過幾百個Pixels,就開始出現明顯的Lag,導致效能不佳,現在那怕更複雜的物件,在IE10都能順暢運行。

其中有兩大關鍵,第一是HTML5 Canvas技術,充分利用硬體顯示卡的加速效果,將2D繪圖運算交由繪圖加速晶片處理,不再成為CPU的負擔;第二是IE10內建Chakra引擎,大幅提升JavaScript效能。而IE10所提供的Pointer API,訴求可用一次設計,同時滿足滑鼠、觸控、筆控等不同輸入裝置,對開發者亦是一大福音。

劉:前對滑鼠、觸控、筆控等不同輸入,以往需要各自撰寫大量程式,譬如採用複雜的運算式,判斷touchstart、touchmove與touchend等運行軌跡,辛苦程度不在話下。現在透過Pointer API,讓許多原本繁瑣的動作,得以大幅簡化為單單一行程式。

問:請分享實際使用IE10的幾個最棒功能。
上官:IE10的精髓,就在於對HTML5的擴大支援,使一些棘手任務變得輕而易舉;畢竟從1999年過後,Web標準的進步有限,迫使開發者必須套用一些「怪招」,或採取複雜計算、使用Plugins,才能滿足某些需求,但現在不管要做格線對齊、影音播放、2/3D繪圖、增加觸控功能,或是進行RWD(Responsive web design)設計,只要下幾個標準語法就輕鬆搞定,負擔頓時減輕大半。

我認為,開發人員應將心力聚焦於產品研發,而非將大把時間花在調整行距等瑣事,與其做得辛苦且效果不佳,倒不如讓IE10代為自動處理。

劉:IE10提供不少精采功能,例如CSS Regions、Grid System都頗具代表性。CSS Regions打破以往頁面區塊的線性排列慣性,可讓各個區塊不規則分佈排列,即使如同雜誌型態的複雜排版,都能做得到;Grid System則讓開發者不再需要運用複雜程式,不斷計算絕對定位,即可補足過去Table或CSS所欠缺的版面配置彈性,自動根據不同螢幕尺寸放大或縮小。

黃:IE10也支援多欄位排版(Multi-column Layout)功能,開發者只需動用2~3行CSS屬性設定,就能解決從前無解的文章斷句難題。假設某網頁內容,當平板採取橫向顯示(Landscape Mode)適合以三欄呈現,若調整為直向顯示(Portrait Mode),即適合以兩欄呈現;現在只要設好CSS屬性,兩欄或三欄不管如何切換,都能維持斷句的正確性。

Modern IE10另提供一項可直連Windows 8 APP的功能,讓使用者能在網頁、APP之間隨意切換,甚至透過Modern IE10引導下載互相關連的APP。而IE10支援影片播放的字幕顯示功能,也是歷代IE之首見。

問:推薦與IE10相關論壇、相關社群。
上官:我首先推薦Internet Explorer Test Drive,這是一個專屬於IE瀏覽器的火力展示平台,不僅陳列各項功能,也提供完整的技術參考文獻。此外,開發者也可以在MSDN官網上獲取豐富素材。

劉:個人覺得IEBlog非常棒,文章質量相當高,不論是技術原理的詳盡解釋,或是範例碼的完整提供,相信都會讓開發者獲益良多。

黃:CodeProject也相當不錯,同樣分享許多技術文章與程式碼;而微軟也在這個網站開闢專欄,專門講述HTML5。

《工具面》
問:開發者如何選平台?如何看待不同開發工具?
劉:我服務的公司,也承接Web開發專案,依專案的實現面,自然需要廣泛支援不同瀏覽器平台,特別是位居主流的IE,一定加以支援。其次就看專案本身的需求,若涉及轉場效果,即使IE9都需要靠Flash等其他程式來填充需求缺口,IE10則不必,此時IE10就是當然的首選。

黃:若是消費性Web應用,任何瀏覽器都得支援,但如果是企業內部Web應用,則會有所選擇,但不妨可考慮幾個要素,一是部署的方便性,IE10內建於Windows,可結合AD進行軟體派送,方便性最佳;二是參考文件的完整性,IE10相關的教學文件、範例碼資源眾多,也有專業的論壇,而且都由官方支援,足以滿足開發者各項需求;三是安全性,IE10提供SmartScreen篩選工具,可協助攔阻惡意網站,其餘瀏覽器並未見到類似功能。

最後則是開發工具考量。微軟Visual Studio 2012程式碼編輯器功能強大,外掛的Web Essentials實用性甚高,也可望為IE加分。

上官:我針對Web Essentials補充,它可以快速輔助開發者使用正確語法,甚至以CSS語法描述顏色時,也會立即在一旁顯示真實顏色,頗具實用價值。

隨著HTML5等開放標準演進,開發工具選項變得更加多元,亦出現許多來自開放原始碼社群的Package或外掛程式,但其實很多東西,Visual Studio 2012都能予以整合,不見得必然互斥。我想呼籲的是,不少HTML5功能規格,在2~3年前都還只是草案,因此通常由瀏覽器供應商以附加前置詞方式搶先提供,但隨著草案陸續底定,開發者大可從語法中拿掉前置詞,以免在跨瀏覽器的開發上出現問題。

IE10的工具
1. Internet Explorer Test Drive
http://ie.microsoft.com/testdrive/

2. MSDN
http://msdn.microsoft.com/zh-TW/ie

3. IEBlog
http://blogs.msdn.com/b/ie/

4. CodeProject
http://www.codeproject.com/

 

每日精選科技圈重要消息