Web應(yīng)變之道

目錄前言 xiii第 1 章 擁抱不確定性 1擁抱不確定性 2從微軟獨(dú)家壟斷到今天百花齊放 4我們現(xiàn)在所處的位置 5瀏覽器 6開放的 Web 平臺(tái) 11網(wǎng)絡(luò)速度和質(zhì)量 18人機(jī)交互界面 19屏幕分辨率和屏幕方向 21像素密度 212% 究竟意味著什么？ 25這正是我們想要的 26第 2 章 掌控 Web 的不確定性 29不要因 Web 的本性而責(zé)備它 30識(shí)別和擁抱你的受眾 30測(cè)試并祈禱最好的結(jié)果 34專注于最優(yōu)，而不是絕對(duì)的解決方案 38擁抱可訪問性 40為非文字的內(nèi)容提供可替代的文本 41確保信息和結(jié)構(gòu)與表現(xiàn)的分離 44確?？梢杂面I盤進(jìn)行所有功能性操作 44除非必需的定時(shí)或移動(dòng)，否則用戶應(yīng)當(dāng)可以暫停內(nèi)容 45提供機(jī)制幫助用戶找到內(nèi)容、定位位置和導(dǎo)航頁面 45幫助用戶避免犯錯(cuò)讓糾正錯(cuò)誤變得簡(jiǎn)單 46為現(xiàn)在和未來的 UA 提供兼容（包括輔助技術(shù)） 47不要止步于此 47丟掉你的技術(shù)偏見 47iPhone 是唯一的移動(dòng)端體驗(yàn) 48可關(guān)掉的，無法修復(fù)/重現(xiàn)的問題。 49和主流的觀點(diǎn)相反， IE 確實(shí)還存在 49設(shè)身處地 51丟掉你的框架庫偏見 51jQuery 52MV* 框架 53關(guān)注技術(shù)前沿 53張開你的翅膀（并質(zhì)疑你的推斷） 55第 3 章 新特性的開發(fā) 57特征檢測(cè) 58一個(gè)比較復(fù)雜的特征檢測(cè)案例 59使用 Modernizr 庫 60舊版本 IE： Modernizr 讓它現(xiàn)代化的案例 61使用（和不使用） Modernizr 61Modernizr 的特征檢測(cè) 64定制 Modernizr 67使用 Modernizr 進(jìn)行特征檢測(cè) 68跨瀏覽器的 Polyfils 71其他的 Modernizr 方法 72管理那些不可檢測(cè)的特征 75常用的特征檢測(cè)及相關(guān)的 polyfils 77“前端開發(fā)做該做的事情” 80第 4 章 響應(yīng)式設(shè)計(jì)與移動(dòng)端體驗(yàn)設(shè)計(jì)81波士頓環(huán)球報(bào)采用響應(yīng)式重新設(shè)計(jì) 82響應(yīng)式設(shè)計(jì)真的適合所有網(wǎng)站？ 83移動(dòng)端優(yōu)先， RESS 及其他通用的移動(dòng)端開發(fā) 85專用的移動(dòng)體驗(yàn) 86移動(dòng)端優(yōu)先 87漸進(jìn)增強(qiáng) 87RESS 87選擇正確的開發(fā)捷徑 88你的團(tuán)隊(duì)的大小與技能 88你的網(wǎng)站或應(yīng)用的要求 88你的用戶類型 88你的預(yù)算 89響應(yīng)式設(shè)計(jì)的好處 89響應(yīng)式的缺點(diǎn) 90專用的移動(dòng)端站點(diǎn)體驗(yàn)的優(yōu)點(diǎn) 91專用的移動(dòng)端站點(diǎn)體驗(yàn)的缺點(diǎn) 92Facebook 做什么，我們就要跟著做什么嗎？或者是美國最大的站點(diǎn)在做什么我們就要去做什么嗎？ 93選擇對(duì)你項(xiàng)目有實(shí)際意義的架構(gòu) 95重定向應(yīng)該解決邏輯問題 97重定向選項(xiàng) 99簡(jiǎn)單的重定向 99更復(fù)雜的查詢 103總是在你的移動(dòng)站點(diǎn)上提供一個(gè)出口 104盡可能保持流體設(shè)計(jì) 106不要吝嗇于使用斷點(diǎn) 109相對(duì)單位 110“接受事物的潮起潮落” 112第5 章 處理用戶輸入 113Web 上用戶輸入的現(xiàn)狀 114“觸屏”檢測(cè)的概念問題 116“觸屏”檢測(cè)的技術(shù)問題 116后果自負(fù) 118徹底失敗 119局部失誤 120為各種潛在的用戶輸入方式做設(shè)計(jì) 122為所有界面提供觸摸功能 122別依賴 Hover 122擁抱明確性 123處理所有的用戶輸入方式 123觸摸事件與鼠標(biāo)事件的現(xiàn)狀 123別假設(shè)任何事，為所有人服務(wù) 137第6 章 出奇復(fù)雜的Web 圖片139圖片悄悄地變復(fù)雜了 140提供盡可能小的文件尺寸 142利用瀏覽器的預(yù)加載 142為各種分辨率提供尺寸合適的圖片 143為具備多種像素比的設(shè)備提供正確尺寸的圖片 143在不同環(huán)境使用不同尺寸的圖片或不同的圖片 143使用設(shè)計(jì)斷點(diǎn) 144提供正確的圖片格式 144圖片很簡(jiǎn)單，并且應(yīng)該保持簡(jiǎn)單 144為 Web 去優(yōu)化圖片 144JPEG 144選擇正確的圖片格式 147尋求 CDN 解決方案 148響應(yīng)式圖片 148通過配置去解決問題（至少不需要增加額外的事情） 149srcset 屬性 150picture 元素 153Picturefil、 picture 元素的 Polyfil 157擁抱 SVG 158服務(wù)端處理 162超實(shí)用的開發(fā)指南 162明確圖片對(duì)你站點(diǎn)的重要性 163把基本的處理做好 163盡可能用最簡(jiǎn)單的方案 163學(xué)會(huì)去愛 SVG 164測(cè)試！ 164小結(jié) 164第7 章 極其復(fù)雜的 Web 視頻165核心技術(shù) 166video 元素 166通過 Flash 降級(jí) 169存儲(chǔ)與編解碼 170Video.js 173Mime 類型和流媒體自適應(yīng)比特率 175用專業(yè)的方式去處理 177YouTube 177Vimeo 181一個(gè)復(fù)雜的例子 184第8 章 理想的 Web 187事情總會(huì)變得更好（雖然偶爾會(huì)變得更糟） 188Firefox 宣布支持 h.264 編解碼 188從消亡中回來的 picture 189Point 事件或許真的會(huì)消失 189我知道這樣的事情會(huì)發(fā)生 190讓我們推動(dòng)一切向前發(fā)展 190開發(fā)人員、瀏覽器廠商和標(biāo)準(zhǔn)機(jī)構(gòu)作用下的 Web 世界 190快速、可靠、廣泛地使用 Web 世界 191Web 沒有所謂的贏 193開啟我們想要的 Web 世界 194索引195