Web應(yīng)變之道

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