internet explorer 10: 重新想像網站設計
TRANSCRIPT
Eric ShangKuanTechnical EvangelistMicrosoft
Internet Explorer 10重新想像網站設計
Agenda‒ 導入 HTML5/CSS3 優化網站設計‒ 適應式網站設計 (Responsive Web Design)‒ 友善的觸控介面 (Touch-friendly)‒ 站在 Windows 8 / Windows RT 的肩膀上
Internet Explorer 10
支援更多基於 HTML5 的網頁標準
全新的開發者工具(F12)
在 Windows 8 上提供絕佳觸控體
驗
各種 Internet Explorer 10
Modern IE 10‒ 無邊框設計，專注瀏覽內容‒ 無外掛程式 ( 有限 Flash 支援 )‒ 觸控優先 / 適用於平板環境‒ 結合 Windows 8 系統功能
桌面版 IE 10‒ 完整 plugin 支援‒ 適用於桌面環境‒ Win7 / Win8
IE 10 on Windows Phone 8‒ 部份 HTML5 限制‒ 無外掛程式 ( 完全沒有 )‒ 完全觸控操作‒ 結合 Windows Phone 8 分享功能
HTML5CSS3
使用 HTML5 優化網站效能透過良好的語意標籤及結構，更有利於 SEO
使用 Canvas / SVG 做有效率的繪圖及圖片呈現效果
<video> 與 <audio> 可以更容易以程式控制影音播放，並且適用於行動裝置
利用快取、本地端儲存以及 IndexedDB ，以提升資料存取的速度或是離線使用
Drag&Drop API , File Reader API , Form Validation 以提供更好的桌面結合體驗
透過 WebWorker 多執行緒、 WebSocket 連線功能讓網站功能更有效率
使用 CSS3 優化網站排版或效果顯示使用 CSS3 處理圓角矩形、陰影、漸層圖案或是特殊字型
善用 Flexible Box Layout, Grid Layout, Multi-column 來製作排版
製作動畫、轉場動畫及以空間轉換的效果
更有效率的 CSS 選擇器 , Media Queries
使用 Exclusion, Region 來自動改變資料流
控制文字選取行為以及觸控操作
使用 Compat Inspector
IE10 使用標準檢視可以提昇 30% 頁面載入效能 ( 相較於相容性檢視 ) Compat Inspector+ Fiddler = automatic old markup detection
去除網頁插件 使用 HTML5/CSS3/ new APIs 不是全用或全不用的決定 透過 feature-detection / fallback 提供相同的使用體驗
偵測支援 HTML5 則使用 <video> 不支援時才用 Flash plugin
秘技 : <meta http-equiv="X-UA-Compatible" content="requiresActiveX=true">
各式各樣的解析度 網頁的排版不應受到硬體規格 ( 螢幕解析度 ) 的限制
@media (max-width: 480px) { body { padding-top: 70px; }}@media (max-width: 768px) { body { padding-top: 0; }}
根據不同的解析度套用不同的樣式‒ 設計網頁時盡量不要設定一
個大小的畫布作繪製‒ 使用 CSS3 Media Queries
語法套用不同的樣式‒ 使用知名套件 ( 如 : twitter
bootstrap) 作輔助
邁向友善的觸控介面 (touch-friendly)‒ 適合手指點擊的參數：
‒ 偵測機器是否支援觸控、幾點觸控if (navigator.msMaxTouchPoints && navigator.msMaxTouchPoints > 1) { // the user's hardware supports touch input}
‒ 減少使用 mouseover (:hover) 的行為
邁向觸控優化 (touch-friendly)‒ 使用 HTML5 Forms ，多數虛擬鍵盤已針對特殊的輸入格式作優化：
<input type="email" >
邁向觸控優化 (touch-friendly)‒ 重新定義元素的觸控行為，避免系統預設手勢影響設計
( 如 : double-tap 是 zoom-in ，但遊戲設計也許是發射飛彈 )
Value Description
auto Default value for -ms-touch-action. Browser determines.
none No default behavior is allowed.
manipulation Only panning, pinch zoom, and swiping to navigate forward or back are allowed.
double-tap-zoom Only double-tap zooming is allowed.
inherit The element inherits the value of -ms-touch-action from its parent.
-ms-touch-action: auto | none | manipulation | double-tap-zoom | inherit;
利用觸控方式捲動和縮放 : http://msdn.microsoft.com/zh-TW/library/ie/hh920761.aspx
Pointer Event‒ 統一將滑鼠、觸控筆及手指觸控觸發 pointer event 。若需
要也可以透過 event.pointerType 判斷‒ Microsoft 正向 W3C 提交‒ 使用 feature detection 來處理 event
var el = document.getElementById('drawface');// 判斷是否支援 pointer eventif (navigator.msPointerEnabled) { el.addEventListener('MSPointerDown', handleTouchInput, false);} else { // fallback el.addEventListener('mousedown', handleTouchInput, false);}
參考 : http://blogs.msdn.com/b/ie/archive/2011/09/20/touch-input-for-ie10-and-metro-style-apps.aspx
Gesture event‒ 偵測觸控操作中常用的手勢事件‒ 分為兩種手勢：
‒ 靜態手勢 : 點擊 , 長按‒ 動態手勢 : 縮放 , 旋轉 , 滑動 , 拖曳
‒ 可加入 Pointer 作為手勢判斷var el = document.getElementById('drawface');var gesture = new MSGesture();// 加入 pointerel.addEventListener('MSPointerDown', function (evt) { gesture.addPointer(evt.pointerId);}, false);// Tap and Holdel.addEventListener('MSGestureTap', handleTap, false);el.addEventListener('MSGestureHold', handleHold, false);// dynamic gesture// 讀取 evt 裡各種位移、旋轉、速度等參數el.addEventListener('MSGestureChange', handleGesture, false); 參考 : http
://blogs.msdn.com/b/ie/archive/2012/06/20/go-beyond-pan-zoom-and-tap-using-gesture-events.aspx
觸控優化的網頁Demo
讓您的網站支援觸控操作 : http://msdn.microsoft.com/zh-TW/library/ie/jj583807.aspx
釘選網站 (Pinned Site)‒ 從 Internet Explorer 9 開始，
使用者可以將網站釘選 (pin) 至工具列
‒ 除了快速開啟網站之外，可以透過工作清單、跳躍清單、推播通知等結合網站功能至桌面
‒ Internet Explorer 10 更可以釘選至開始畫面，可自訂圖示、 tile 的背景顏色以及顯示 badge 等
‒ 快速製作工具 : http://buildmypinnedsite.com/
‒ 在網頁中加入下列標籤<meta name="msapplication-TileImage" content="logo.png" ><meta name="msapplication-TileColor" content="#123456" >
Windows 8 子母畫面 (Snapped view)‒ Modern IE10 可被貼齊 (snap)
至子畫面中，使用 RWD 技巧來處理
‒ 使用 Modern IE10 提供的 media query:
@media screen and (max-width: 400px) { @-ms-viewport { width: 320px; }
/* 當 Modern IE10 在貼齊模式時的樣式設定，並且將可視區域設為 320px */
}
Full
Snap
快速翻頁 (Flip ahead)‒ 在網頁中 (尤其是分頁閱
讀內容 ) 加入適當的標籤，使翻頁結合手勢操作
‒ Modern IE10 會試著去理解有無分頁
‒ 使用方式 :點擊翻頁鍵、或是從右 swipe 至左
<link rel="prev" href="/page/2"><link rel="next" href="/page/4">
從 Web 到 App‒ 使用 JavaScript (HTML5) 技術直接開發 Windows 市集應用程式
‒ 在網站中加入對應的標籤，讓使用者可以到市集中下載你的應用程式
<meta name="msApplication-ID" content="App"><meta name="msApplication-PackageFamilyName" content=" 在市集中的 Package 名稱 ">
結論HTML5 Ready
Touch Ready
App Ready
參考資源‒ Internet Explorer 開發中心http://msdn.microsoft.com/ie ‒ Internet Explorer 官方部落格http://blogs.msdn.com/b/ie ‒ Internet Explorer Test Drivehttp://ietestdrive.com/ ‒ Build My Pinned Siteshttp://buildmypinnedsite.com
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.