現代化網頁開發技術三要素download.microsoft.com/download/5/9/e/59e3dfd2-abd0-49b4...2016/01/08...
TRANSCRIPT
現代化網頁開發技術三要素 Eric ShangKuan
@ericsk
Technical Evangelist
Microsoft Taiwan
• 為什麼要做現代化網頁
• 現代化網頁基本守則
• 為每個人、每台裝置、每種使用方式優化
• 善用工具提高生產力
大綱
瀏覽網頁的形式一直在改變
現代化網頁基本守則
使用 <!DOCTYPE html> 作為開頭
• 跟瀏覽器說我寫的 code 是標準的 (標準到 HTML5)
• 使用 HTML5 新標籤、data-* 屬性沒有障礙
• 比起其它的宣告字串更簡單好記
不再使用 X-UA-Compatible 表頭
• 永遠封印了瀏覽器的能力 (有些是歷史因素)
• 使用先進的 JavaScript 框架或是其它技巧處理
標準文件模式
先問為什麼需要 Flash/Java/Silverlight…
使用者不喜歡安裝外掛程式 (Flash 大多已內建, 但一直有安裝性問題)
行動裝置上幾乎沒有支援外掛程式的瀏覽器
2D/3D 繪圖? 存取檔案? 播放多媒體檔案? …… 很多功能已經能由 HTML5/CSS3/ECMAScript 2015 實作
實在沒辦法的部份 (存取晶片卡) … 依賴 IE11 吧
外掛程式戒斷之旅…
預設使新技術，使用 polyfills 照顧舊版瀏覽器 • https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
使用先進的 JavaScript 框架或是其它技巧處理
減少依賴外掛程式
Adobe 說…
你很難記住哪些瀏覽器支援哪些功能
• 現在的網頁瀏覽器已經加快更新頻率
• 不要太相信 navigator.userAgent 的值，這很容易偽裝
• 檢查瀏覽器是否有此物件，而不是根據瀏覽器版本判斷
• http://caniuse.com
避免判斷瀏覽器版本
// 不推薦的作法 var btn = document.getElementById('my-button'); if (navigator.userAgent.indexOf('MSIE') > -1) { btn.attachEvent('onclick', onClick); } else { btn.addEventListener('click', onClick, false); }
// 比較好的作法 var btn = document.getElementById('my-button'); if (!btn.addEventListener) { btn.attachEvent('onclick', onClick); } else { btn.addEventListener('click', onClick, false); }
升級新版 JavaScript 函式庫的理由…
• 修正舊版本的錯誤、提升效能
• 使用更有效率、瀏覽器原生的 HTML5/ECMAScript2015 APIs
• 大幅導入 HTML5 特性的 jQuery 1.6 都已經是 4 年前的事了…
使用新版的 JavaScript 函式庫
WebKit 是新時代的 IE6
• 很多開發團隊都是為了 iPhone 上的 Safari 開始使用 CSS3
• Safari (含 iOS) + Chrome 主導的市佔率
• 很多抄來的搜尋來的範例都使用了 -webkit-* 作示範，其它瀏覽器看不到
• 升級最新版本的 CSS Framework 或查看 http://caniuse.com/
減少在 CSS 中使用 vendor-prefix
.my-background { background: -webkit-linear-gradient(red, blue); background: -o-linear-gradient(red, blue); background: -moz-linear-gradient(red, blue); background: -ms-linear-gradient(red, blue); background: linear-gradient(red, blue); }
http://dev.modern.ie
14
為每個人、每台裝置、每種使用方式優化
自適應不同的螢幕大小
• 已經無法預測這世界會有多少解析度了…
覺得不好設計，一定是以桌面用戶思考使用情境
套用 RWD framework • 如: Bootstrap, HTML5 Boilerplate, Pure, CreateJS, Less…etc
RWD, Responsive Web Design
要怎麼做測試?
• 手動調整瀏覽器寬度
• 用工具產生:
• BrowserStack https://www.browserstack.com/
• Microsoft Edge Website Screenshots https://dev.windows.com/zh-tw/microsoft-edge/tools/screenshots/
RWD, Responsive Web Design
新的裝置幾乎都是高解析度螢幕
支援高解析度螢幕
@media only screen and (min-resolution: 144dpi) { .img { background-image: url([email protected]); background-size: 400px 300px; } }
向量圖形、向量字型 (尤其是 iconfont)
支援高解析度螢幕
Touch Friendly
if (navigator.msMaxTouchPoints && navigator.msMaxTouchPoints > 1) { // the user's hardware supports touch input }
Touch Friendly
‒ 使用 HTML5 Forms，多數虛擬鍵盤已針對特殊的輸入格式作優化：
<input type="email" >
工欲善其事 必先利其器
重複的工作讓工具來作
挑一個熟悉、生態系還活著來用
自動化工具
圖片來源 https://ponyfoo.com/articles/measure-optimize-automate
編譯成 JavaScript 程式碼
完全相容 JavaScript 語法 (支援 ES2015)
為開發大規模 JavaScript 應用而設計
開源、跨平台
http://typescriptlang.org/
TypeScript
TypeScript
將 ES6 (ECMAScript 2015) 的語法翻譯成 ES5
BabelJs
測試多平台網頁呈現效果的工具
特別適合不易除錯的行動裝置
開源、可開發擴充套件
http://aka.ms/vorlon-blog-tw
VorlonJs
One more thing…
Microsoft <3 JavaScript
