現代化網頁開發技術三要素download.microsoft.com/download/5/9/E/59E3DFD2-ABD0-49B4...2016/01/08...
Transcript of 現代化網頁開發技術三要素download.microsoft.com/download/5/9/E/59E3DFD2-ABD0-49B4...2016/01/08...
![Page 1: 現代化網頁開發技術三要素download.microsoft.com/download/5/9/E/59E3DFD2-ABD0-49B4...2016/01/08 · VorlonJs One more thing… Microsoft](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fdfeeb448a976530805fb8a/html5/thumbnails/1.jpg)
現代化網頁開發技術三要素 Eric ShangKuan
@ericsk
Technical Evangelist
Microsoft Taiwan
![Page 2: 現代化網頁開發技術三要素download.microsoft.com/download/5/9/E/59E3DFD2-ABD0-49B4...2016/01/08 · VorlonJs One more thing… Microsoft](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fdfeeb448a976530805fb8a/html5/thumbnails/2.jpg)
• 為什麼要做現代化網頁
• 現代化網頁基本守則
• 為每個人、每台裝置、每種使用方式優化
• 善用工具提高生產力
大綱
![Page 3: 現代化網頁開發技術三要素download.microsoft.com/download/5/9/E/59E3DFD2-ABD0-49B4...2016/01/08 · VorlonJs One more thing… Microsoft](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fdfeeb448a976530805fb8a/html5/thumbnails/3.jpg)
瀏覽網頁的形式一直在改變
![Page 4: 現代化網頁開發技術三要素download.microsoft.com/download/5/9/E/59E3DFD2-ABD0-49B4...2016/01/08 · VorlonJs One more thing… Microsoft](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fdfeeb448a976530805fb8a/html5/thumbnails/4.jpg)
現代化網頁基本守則
![Page 5: 現代化網頁開發技術三要素download.microsoft.com/download/5/9/E/59E3DFD2-ABD0-49B4...2016/01/08 · VorlonJs One more thing… Microsoft](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fdfeeb448a976530805fb8a/html5/thumbnails/5.jpg)
使用 <!DOCTYPE html> 作為開頭
• 跟瀏覽器說我寫的 code 是標準的 (標準到 HTML5)
• 使用 HTML5 新標籤、data-* 屬性沒有障礙
• 比起其它的宣告字串更簡單好記
不再使用 X-UA-Compatible 表頭
• 永遠封印了瀏覽器的能力 (有些是歷史因素)
• 使用先進的 JavaScript 框架或是其它技巧處理
標準文件模式
![Page 6: 現代化網頁開發技術三要素download.microsoft.com/download/5/9/E/59E3DFD2-ABD0-49B4...2016/01/08 · VorlonJs One more thing… Microsoft](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fdfeeb448a976530805fb8a/html5/thumbnails/6.jpg)
![Page 7: 現代化網頁開發技術三要素download.microsoft.com/download/5/9/E/59E3DFD2-ABD0-49B4...2016/01/08 · VorlonJs One more thing… Microsoft](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fdfeeb448a976530805fb8a/html5/thumbnails/7.jpg)
先問為什麼需要 Flash/Java/Silverlight…
使用者不喜歡安裝外掛程式 (Flash 大多已內建, 但一直有安裝性問題)
行動裝置上幾乎沒有支援外掛程式的瀏覽器
2D/3D 繪圖? 存取檔案? 播放多媒體檔案? …… 很多功能已經能由 HTML5/CSS3/ECMAScript 2015 實作
實在沒辦法的部份 (存取晶片卡) … 依賴 IE11 吧
外掛程式戒斷之旅…
預設使新技術,使用 polyfills 照顧舊版瀏覽器 • https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
使用先進的 JavaScript 框架或是其它技巧處理
減少依賴外掛程式
![Page 8: 現代化網頁開發技術三要素download.microsoft.com/download/5/9/E/59E3DFD2-ABD0-49B4...2016/01/08 · VorlonJs One more thing… Microsoft](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fdfeeb448a976530805fb8a/html5/thumbnails/8.jpg)
Adobe 說…
![Page 9: 現代化網頁開發技術三要素download.microsoft.com/download/5/9/E/59E3DFD2-ABD0-49B4...2016/01/08 · VorlonJs One more thing… Microsoft](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fdfeeb448a976530805fb8a/html5/thumbnails/9.jpg)
你很難記住哪些瀏覽器支援哪些功能
• 現在的網頁瀏覽器已經加快更新頻率
• 不要太相信 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); }
![Page 10: 現代化網頁開發技術三要素download.microsoft.com/download/5/9/E/59E3DFD2-ABD0-49B4...2016/01/08 · VorlonJs One more thing… Microsoft](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fdfeeb448a976530805fb8a/html5/thumbnails/10.jpg)
![Page 11: 現代化網頁開發技術三要素download.microsoft.com/download/5/9/E/59E3DFD2-ABD0-49B4...2016/01/08 · VorlonJs One more thing… Microsoft](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fdfeeb448a976530805fb8a/html5/thumbnails/11.jpg)
升級新版 JavaScript 函式庫的理由…
• 修正舊版本的錯誤、提升效能
• 使用更有效率、瀏覽器原生的 HTML5/ECMAScript2015 APIs
• 大幅導入 HTML5 特性的 jQuery 1.6 都已經是 4 年前的事了…
使用新版的 JavaScript 函式庫
![Page 12: 現代化網頁開發技術三要素download.microsoft.com/download/5/9/E/59E3DFD2-ABD0-49B4...2016/01/08 · VorlonJs One more thing… Microsoft](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fdfeeb448a976530805fb8a/html5/thumbnails/12.jpg)
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); }
![Page 13: 現代化網頁開發技術三要素download.microsoft.com/download/5/9/E/59E3DFD2-ABD0-49B4...2016/01/08 · VorlonJs One more thing… Microsoft](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fdfeeb448a976530805fb8a/html5/thumbnails/13.jpg)
![Page 14: 現代化網頁開發技術三要素download.microsoft.com/download/5/9/E/59E3DFD2-ABD0-49B4...2016/01/08 · VorlonJs One more thing… Microsoft](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fdfeeb448a976530805fb8a/html5/thumbnails/14.jpg)
http://dev.modern.ie
14
![Page 15: 現代化網頁開發技術三要素download.microsoft.com/download/5/9/E/59E3DFD2-ABD0-49B4...2016/01/08 · VorlonJs One more thing… Microsoft](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fdfeeb448a976530805fb8a/html5/thumbnails/15.jpg)
為每個人、每台裝置、每種使用方式優化
![Page 16: 現代化網頁開發技術三要素download.microsoft.com/download/5/9/E/59E3DFD2-ABD0-49B4...2016/01/08 · VorlonJs One more thing… Microsoft](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fdfeeb448a976530805fb8a/html5/thumbnails/16.jpg)
自適應不同的螢幕大小
• 已經無法預測這世界會有多少解析度了…
覺得不好設計,一定是以桌面用戶思考使用情境
套用 RWD framework • 如: Bootstrap, HTML5 Boilerplate, Pure, CreateJS, Less…etc
RWD, Responsive Web Design
![Page 17: 現代化網頁開發技術三要素download.microsoft.com/download/5/9/E/59E3DFD2-ABD0-49B4...2016/01/08 · VorlonJs One more thing… Microsoft](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fdfeeb448a976530805fb8a/html5/thumbnails/17.jpg)
要怎麼做測試?
• 手動調整瀏覽器寬度
• 用工具產生:
• BrowserStack https://www.browserstack.com/
• Microsoft Edge Website Screenshots https://dev.windows.com/zh-tw/microsoft-edge/tools/screenshots/
RWD, Responsive Web Design
![Page 18: 現代化網頁開發技術三要素download.microsoft.com/download/5/9/E/59E3DFD2-ABD0-49B4...2016/01/08 · VorlonJs One more thing… Microsoft](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fdfeeb448a976530805fb8a/html5/thumbnails/18.jpg)
新的裝置幾乎都是高解析度螢幕
支援高解析度螢幕
@media only screen and (min-resolution: 144dpi) { .img { background-image: url([email protected]); background-size: 400px 300px; } }
![Page 19: 現代化網頁開發技術三要素download.microsoft.com/download/5/9/E/59E3DFD2-ABD0-49B4...2016/01/08 · VorlonJs One more thing… Microsoft](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fdfeeb448a976530805fb8a/html5/thumbnails/19.jpg)
向量圖形、向量字型 (尤其是 iconfont)
支援高解析度螢幕
![Page 20: 現代化網頁開發技術三要素download.microsoft.com/download/5/9/E/59E3DFD2-ABD0-49B4...2016/01/08 · VorlonJs One more thing… Microsoft](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fdfeeb448a976530805fb8a/html5/thumbnails/20.jpg)
Touch Friendly
if (navigator.msMaxTouchPoints && navigator.msMaxTouchPoints > 1) { // the user's hardware supports touch input }
![Page 21: 現代化網頁開發技術三要素download.microsoft.com/download/5/9/E/59E3DFD2-ABD0-49B4...2016/01/08 · VorlonJs One more thing… Microsoft](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fdfeeb448a976530805fb8a/html5/thumbnails/21.jpg)
Touch Friendly
‒ 使用 HTML5 Forms,多數虛擬鍵盤已針對特殊的輸入格式作優化:
<input type="email" >
![Page 22: 現代化網頁開發技術三要素download.microsoft.com/download/5/9/E/59E3DFD2-ABD0-49B4...2016/01/08 · VorlonJs One more thing… Microsoft](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fdfeeb448a976530805fb8a/html5/thumbnails/22.jpg)
工欲善其事 必先利其器
![Page 23: 現代化網頁開發技術三要素download.microsoft.com/download/5/9/E/59E3DFD2-ABD0-49B4...2016/01/08 · VorlonJs One more thing… Microsoft](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fdfeeb448a976530805fb8a/html5/thumbnails/23.jpg)
重複的工作讓工具來作
挑一個熟悉、生態系還活著來用
自動化工具
圖片來源 https://ponyfoo.com/articles/measure-optimize-automate
![Page 24: 現代化網頁開發技術三要素download.microsoft.com/download/5/9/E/59E3DFD2-ABD0-49B4...2016/01/08 · VorlonJs One more thing… Microsoft](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fdfeeb448a976530805fb8a/html5/thumbnails/24.jpg)
編譯成 JavaScript 程式碼
完全相容 JavaScript 語法 (支援 ES2015)
為開發大規模 JavaScript 應用而設計
開源、跨平台
http://typescriptlang.org/
TypeScript
![Page 25: 現代化網頁開發技術三要素download.microsoft.com/download/5/9/E/59E3DFD2-ABD0-49B4...2016/01/08 · VorlonJs One more thing… Microsoft](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fdfeeb448a976530805fb8a/html5/thumbnails/25.jpg)
TypeScript
![Page 26: 現代化網頁開發技術三要素download.microsoft.com/download/5/9/E/59E3DFD2-ABD0-49B4...2016/01/08 · VorlonJs One more thing… Microsoft](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fdfeeb448a976530805fb8a/html5/thumbnails/26.jpg)
![Page 27: 現代化網頁開發技術三要素download.microsoft.com/download/5/9/E/59E3DFD2-ABD0-49B4...2016/01/08 · VorlonJs One more thing… Microsoft](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fdfeeb448a976530805fb8a/html5/thumbnails/27.jpg)
將 ES6 (ECMAScript 2015) 的語法翻譯成 ES5
BabelJs
![Page 28: 現代化網頁開發技術三要素download.microsoft.com/download/5/9/E/59E3DFD2-ABD0-49B4...2016/01/08 · VorlonJs One more thing… Microsoft](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fdfeeb448a976530805fb8a/html5/thumbnails/28.jpg)
測試多平台網頁呈現效果的工具
特別適合不易除錯的行動裝置
開源、可開發擴充套件
http://aka.ms/vorlon-blog-tw
VorlonJs
![Page 29: 現代化網頁開發技術三要素download.microsoft.com/download/5/9/E/59E3DFD2-ABD0-49B4...2016/01/08 · VorlonJs One more thing… Microsoft](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fdfeeb448a976530805fb8a/html5/thumbnails/29.jpg)
![Page 30: 現代化網頁開發技術三要素download.microsoft.com/download/5/9/E/59E3DFD2-ABD0-49B4...2016/01/08 · VorlonJs One more thing… Microsoft](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fdfeeb448a976530805fb8a/html5/thumbnails/30.jpg)
One more thing…
![Page 31: 現代化網頁開發技術三要素download.microsoft.com/download/5/9/E/59E3DFD2-ABD0-49B4...2016/01/08 · VorlonJs One more thing… Microsoft](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fdfeeb448a976530805fb8a/html5/thumbnails/31.jpg)
Microsoft <3 JavaScript
![Page 32: 現代化網頁開發技術三要素download.microsoft.com/download/5/9/E/59E3DFD2-ABD0-49B4...2016/01/08 · VorlonJs One more thing… Microsoft](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fdfeeb448a976530805fb8a/html5/thumbnails/32.jpg)