 |
-- 會員 / 註冊 --
|
 |
|
|
|
響應式設計、改造與優化 ( 簡體 字) |
| 作者：趙榮嬌,馬立銘 | 類別：1. -> 程式設計 -> 綜合 |
| 譯者： |
| 出版社：電子工業出版社 |  3dWoo書號： 42159
詢問書籍請說出此書號！【缺書】
NT售價： 445 元 |
| 出版日：9/1/2015 |
| 頁數：256 |
| 光碟數：0 |
|
站長推薦：   |
| 印刷：全彩印刷 | 語系： ( 簡體 版 ) |
| |
加入購物車  │加到我的最愛
(請先登入會員) |
| ISBN：9787121265129 |
| 作者序 | 譯者序 | 前言 | 內容簡介 | 目錄 | 序 |
| (簡體書上所述之下載連結耗時費功, 恕不適用在台灣, 若讀者需要請自行嘗試, 恕不保證) |
| 作者序： |
| 譯者序： |
前言：譯者序
響應式設計的概念來源于2010 年5 月Ethan Marcotte 發表的一篇名為“Responsive Web Design”的文章1，其闡述了如何利用流式布局、媒體查詢和彈性圖片三種公知技術創建一個能夠適配不同分辨率屏幕的網站。Ethan Marcotte 認為應當利用Web 的特性來設計與開發網站：“我們可以將不同聯網設備上眾多的體驗，當作同一網站體驗的不同側面來對待，而不要為每種設備進行單獨剪裁使得設計彼此斷開，這才是我們前進的方向。雖然我們已經能夠設計出最佳的視覺體驗，但還要把基于標準的技術也嵌入到我們的設計中去，這樣才能使得我們的設計不僅靈活，而且能適應渲染它們的各種媒介。”響應式設計能夠面向不同設備收攏并提供卓越的用戶體驗，并且這一方法不會忽視設備間的差異性，也不會強調設計師的控制權，而是選擇了順其自然并擁抱Web 的靈活性。
在移動互聯的浪潮下，Luke Wroblewski 最早提出了移動優先的設計理念2，而響應式設計之所以叫響應式“設計”而不叫響應式“技術”，就是因為它是一項設計先行的工作。面對移動互聯網的蓬勃發展和用戶習慣的悄然改變，從移動端開始進行響應式設計對習慣了PC 環境的設計師來說可能是一種挑戰，需要從思考方式和工作習慣上做出改變。本書前半部分介紹了響應式移動設計的各個要素，并以實例分析如何對現有站點進行響應式移動設計的改造。
性能是響應式設計繞不開的一個話題，對于移動端來說尤為重要。按條件加載、隱藏或顯示什么內容，都會比單一條件判斷的代碼結構煩瑣，并影響用戶體驗及維護。尤其是在移動性能上，多樣的設備具有復雜的使用環境，如何識別設備，并讓用戶在不同設備環境下均能得到良好體驗，也是一根硬骨頭。本書的后半部分重點對于上述問題進行了分析，希望對于讀者的開發實踐有所幫助。
最后，希望能有更多的人在移動端實踐響應式設計，實踐出真知，更加合理、優雅的設計可能就出自你的手中。
本書贏得的贊譽
不論你是正在積累還是精簡你的技能集，《響應式設計、改造與優化》都是現代Web 實踐的指南精粹。Phil 獨一無二的技術背景和實戰經驗賦予了他對于底層核心程序以及像素級完美設計的敏銳洞察力。
— Web/UI 設計師Jacob R. Stuart
如今，Web 開發是不可能不考慮各種屏幕尺寸和比例因素的，因為你永遠不會知道你的用戶使用的是手機、平板電腦還是臺式機。本書有助于構建響應式網頁設計，是一本必讀之書。
—9magnets, LLC 聯合創始人 Cameron Banga
任何一位尋找響應式設計綜合性策略的讀者不妨讀一讀本書。Phil 在這本實踐指南中，揭開了為什么和怎樣對眾多的屏幕尺寸和設備進行響應式設計的面紗。
— WSOL 設計總監 Dennis Kardys
響應式設計的三要素（流動的網格、靈活的圖像和媒體查詢）仍然非常重要，今天創建一個網站比過去需要更多的思想和技術。本書將帶你從基礎開始，逐步了解現代Web 開發的來龍去脈。
— 圣母大學網絡通信系主任 Erik Runyon
Phil Dutson 提出的移動設計的設計建議、資源和實例，有助于將設計師和開發者們聯系在一起。本書是任何一位Web 設計師的書架上都值得擁有并需反復閱讀的全面指南。
—SEO.com 網頁設計師 Kaylee White
謹以此書獻給我的朋友、家人，是你們提醒我以5 歲孩子般好奇的眼光來看待一切，而不用擔心出錯，直到一切都那么完美。
—Phil
前 言
“響應式移動設計”一詞讀起來有點拗口，而且當你仔細剖析它時，語義會發生轉變甚至模糊，很難讓人獲得一個完整的認知，不了解這個詞究竟是什么意思。
概括地說，“響應式移動設計”是一種程序設計方法。從廣義的設計角度來看，這并不是一個新概念。它更像是當你第一次意識到你可以以三維空間的角度來繪畫時，你的草圖里瞬間充斥著各種立方體、球體、多點式、陰影等特效。
假如你能夠退一步來看，意識到用戶想要盡快獲取的信息，并讓它們在設備上適當地展示出來，你就能確保以最美觀的方式讓用戶獲得他們想要的信息。
這就是響應式移動設計：內容、結構和美感的融合，形成用戶將會持續訪問和享受的用戶體驗。
這本書重點介紹了我的經驗，主要是關于移動設備及其設計，甚至一點點的代碼就可以幫助你以最好的方式為數百萬手機用戶提供內容；同時，順便簡單地介紹了一些主題，而另外有一些復雜的主題，就如同你最喜歡的Swedish-metal 樂隊的低音提琴般紛繁難懂。
為了能夠充分有效地使用本書，你需要具備一些Web 設計或開發的經驗。也就是說，對于希望學習新方法和新概念的團隊管理者來說，本書也可成為一個優秀的項目資源，本書介紹的內容可有效地應用于開發團隊。
有些話題是不容易覆蓋到的，或是在沒有對應網站查看例子的情況下無法詳細介紹的。我已經創建了一個網站，從該網站上你可以獲得各種工具、技巧、教程和示例。通過臺式機或者移動設備訪問www.mobiledesignrecipes.com/ 就可以找到這些資源。
你也可以通過Google+（+PhilDutson）或Twitter（@dutsonpa）聯系我。
關于作者
Phil Dutson 是ICON Health ＆ Fitness 客戶端和移動執行解決方案的架構師。他是Sams Teach Yourself jQuery Mobile in 24 Hours、jQuery, jQuery UI, and jQuery Mobile Recipes and Examples、The Android Developer’s Cookbook，2nd Edition 的作者。他熱愛技術的學習和寫作，每次他與兒子玩Ingress 時都向世界傳播啟蒙訊息。
致謝
創作一本書稱得上是不朽的壯舉，但需要許多人共同幫助才能及時完成。首先，我想感謝 Laura Lewin 為這個項目所做的工作和貢獻。我還想感謝Olivia Basegio 對我的所有問題的回復。如果沒有生產團隊的貢獻，這本書不可能完成，包括Kristy Hart、Lori Lyons、Krista Hansing、Mark Taub，以及所有其他無名英雄，是你們讓這本書變成了鉆石。
我特別想感謝Cameron Banga、Dennis Kardys 和Jacob Stuart，感謝你們出眾的才華，絕對是絕佳的資源。我很感謝每位技術編輯的工作，感謝你們對每一章節的清晰理解、敏銳的洞察力和幫助。也要感謝Sheri Cain，我的開發編輯，從頭到尾對每一章的專注，確保我的寫作是有意義的。
我還想感謝我的家人，允許我每星期都消失這么多個夜晚，卻仍然認為我是一個很酷的家伙。沒有Ethan、Kile、Josie、Sam 和Anna 的幫助，就不會有在這本書中的設計和教程的圖片樣本。 |
內容簡介：由于移動設備的大量使用，各種屏幕尺寸、各種操作系統、各種訪問設備及各種需求均對用戶體驗提出了新的挑戰。為了讓我們的網站在各個終端上的用戶體驗都盡可能接近完美，我們需要采用響應式移動設計。本書重點介紹了Phil Dutson的開發經驗，主要是關于移動設備及其設計，甚至一點點代碼就可以幫助你以最好的方式為數百萬手機用戶提供內容；同時，順便簡單地介紹了一些主題，以解決常見的響應式移動設計中可能會遇到的問題。 |
目錄：第 1部分 創建響應式部局
第 1章 內容事項. .... 2
構成內容的要素. ...3
信息采集......3
信息確認......5
選擇合適的內容. ...7
內容性能......7
搜索引擎優化考量......10
用戶期望....11
討論內容滑塊. ....12
小結. ..14
第 2章 為什么移動優先... 15
瀏覽 Web. ....16
從小尺寸開始時的注意事項. .....19
網站主題....20
網站導航....22
營銷圖像....24
網站搜索....25
小結. ..27
第 3章 使用柵格.. 28
選擇柵格.29
Pure.Grids.....30
Bootstrap..30
Foundation....31
Gridpak.....31
Golden.Grid.System......32
Skeleton...32
使用響應式柵格. ......32
使用自適應柵格. ......36
兩全其美.38
小結. ..38
第 4章 顯示表格數據...... 40
定義表格數據. ....41
聯系地址列表. ..41
發票和收據......41
表單41
配方和卡片......42
電子郵件站點和應用...42
使用表格數據. ....42
顯示表單....43
使用表格....47
使用 CSS改變外觀. ...47
創建多個表格. ..50
使用下載鏈接. ..53
小結. ..56
第 5章 使用測量單位...... 57
使用像素.58
使用百分比...60
使用 em和 rem單位....63
viewport測量. ...65
小結. ..69
第 6章 使用媒體查詢...... 70
viewport.meta標簽.....71
實現突變點...73
使用媒體查詢. ..74
IE6-8瀏覽器支持. .....80
設備專屬的媒體查詢.....80
iPad80
iPhone.4S以下. ...81
iPhone.5和 5S....82
Nexus.7（第二代）...82
Galaxy.S4......83
小結. ..83
第 7章 排版設計.. 84
Web字體. ....85
字體格式....85
TTF86
EOT86
WOFF..86
SVG....87
瀏覽器和設備支持...87
設備差異....87
瀏覽器行為......89
提供 Web字體.....91
使用字體服務. ....93
Google字體...93
Adobe.Typekit.....94
Fonts.com.....94
Font.Squirrel..95
icon字體95
小結. ..96
第 8章 改造現有網站...... 97
選擇一個合適的移動布局. ...98
塊級布局....98
響應式布局....100
自適應布局....102
利用組件開展工作......103
導航...103
搜索...105
內容區域..105
滑塊...106
鏈接...107
移動化的注意事項......108
不要濫用懸停. .....108
點擊呼叫..109
模態窗口..109
輸入框.....111
小結. .....112
第 2部分 使用響應式媒體
第 9章 響應式圖片...114
圖片應該是響應式的...115
圖片分發..115
使用 JavaScript的解決方案. ......125
Picturefill組件.. ..126
Pixity組件....127
小結. .....129
第 10章 響應式視頻. ..... 130
使用視頻....131
分發系統....131
Limelight.網絡....132
Akamai...133
Brightcove...133
Vimeo.....134
YouTube......135
制作適配移動設備的視頻. ......136
使用固定比例. .....137
使用本地播放器..140
使用插件..141
小結. .....142
第 11章 圖像壓縮.... 143
圖片類型....144
JPEG/JPG...144
GIF....146
PNG..147
WebP.....148
壓縮工具....150
JPEGmini.....150
PNGGauntlet....151
圖像優化工具 Radical...151
ImageAlpha......151
ImageOptim......153
TinyPNG......153
壓縮結果....154
小結. .....155
第 3部分 性能優化
第 12章 條件.JavaScript. ...... 158
為什么使用條件 JavaScript. ..159
滑塊...160
圖片庫.....160
使用條件 JavaScript..162
JavaScript媒體查詢.....163
使用 JavaScript插件......168
jRespond.....168
mediaCheck......169
ConditionerJS...169
小結. .....170
第 13章 Web組件... 171
使用 Web組件.....172
Web組件示例......172
音頻元素..172
視頻元素..174
日期輸入..175
使用 DOM處理.. ...176
Shadow.DOM...177
使用模板..178
編輯內容..179
Web組件 Polyfill..180
Polymer..181
Polymer元素.....181
X-Tag....182
使用 Brick.....183
小結. .....183
第 14章 設備檢測與服務器請求. ..... 185
設備檢測....186
使用腳本檢測. .....186
讀取 user-agent字符串. ....188
實現設備數據庫..190
HTTP頭部. .....191
使用客戶端提示. ....194
小結. .....196
第 15章 服務器優化. ......197
服務器配置......198
Web.服務器....198
Apache...198
Nginx......199
IIS.199
Tomcat...200
NodeJS..200
服務器插件......201
SPDY.....201
Cache.....205
PageSpeed..207
小結. .....210
第 16章 高性能與開發工具. .. 211
開發工具....212
瀏覽器開發者工具......212
Chrome.開發者工具.. ....212
Firefox....218
Internet.Explorer....223
構建工具....226
Grunt......226
Gulp...228
小結. .....229 |
| 序： |
|
