編輯推薦
HTML5和移動開發,都是目前最熱門的話題。這兩種話題的結閤,有實際的應用開發需求。60多種技巧,幫助你構建針對iphone5、android、等手機係統的快速、響應式HTML移動網站。書中的特點在於簡明收的風格,精心挑選的任務和問題,高效解決問題的清晰指導,舉一反三,將解決方案用於其它情況。
內容簡介
HTML5和移動開發,都是目前最熱門的話題。這兩種話題的結閤,有實際的應用開發需求。60多種技巧,幫助你構建針對iphone5、android、等手機係統的快速、響應式HTML移動網站。書中的特點在於簡明收的風格,精心挑選的任務和問題,高效解決問題的清晰指導,舉一反三,將解決方案用於其它情況。
作者簡介
當今,移動應用開發掀起軟件行業的新一輪浪潮。然而,手機設備發展迅猛,屏幕尺寸各不相同、存儲和性能仍有局限性,如何在多平颱上創建高性能、響應式的移動網站,是程序員所要麵對的首要挑站。
《HTML5移動Web開發實戰》提供瞭應對這一挑戰的解決方案。通過閱讀本書,你將瞭解如何有效地利用的HTML5的那些針對移動網站的功能,橫跨多個移動平颱。全書共分10章,從移動Web、設備端配置和優化,變互、響應式設計、設備訪問,調試、性能測試、富媒體等角度齣發,包含瞭60多個實用的示倒,詳細闡釋如何構建快速、響應式的HTML5移動網站,適用於iOS、Android、Windows Phone和Black Berry等眾多主流移動應用平颱。
《HTML5移動Web開發實戰》作者是HTML5 Boilerplate項目的成員,Mobile Boilerplate的主要開發人員。《HTML5移動Web開發實戰》為那些緻力於實現高性能、響應式、跨平颱的HTML5移動網站的程序員量身打造,也適閤對移動Web開發感興趣的讀者學習參考。
內頁插圖
精彩書評
石川,有超過5年的Web開發經驗,他是HTML5 Boilerplate項目的成員,Mobile Boilerplate的主要開發人員,JavaScript Patterns項目的所有人。他現在是居住在美國和的獨立開發者。他愛好閱讀、旅遊、美食以及電子技術、Indie音樂。譯者簡介劉暘:經曆過各種技術和職位,最終發現前端開發纔是其歸宿,現為ThoughtWorks前端程序員,專注於實踐優秀的前端代碼架構。同時也是ThoughtWorks UX Group一員,關注用戶體驗以及響應式設計、視差滾動等新興設計元素。熱衷於分享、社區活動、結交朋友。
目錄
第1章 HTML5與移動網站
1.1 簡介
1.2 確定網站的適用移動設備
1.2.1 用戶最常用的平颱和瀏覽器是什麼
1.2.2 有多少用戶使用支持現代腳本的移動設備
1.2.3 Google Analytics的替代品
1.2.4 Google Analytics的精準度
1.2.5 對服務端讀取速度的擔憂
1.3 配置移動開發工具
1.3.1 準備
1.3.2 實踐
1.3.3 迴顧
1.3.4 延伸
1.4 BlackBerry仿真器
1.4.1 準備
1.4.2 實踐
1.5 配置移動開發環境
1.5.1 準備
1.5.2 實踐
1.5.3 迴顧
1.5.4 延伸
1.6 在移動網站中使用HTML
1.6.1 準備
1.6.2 實踐
1.6.3 迴顧
1.6.4 延伸
1.7 跨瀏覽器HTML
1.7.1 準備
1.7.2 實踐
1.7.3 迴顧
1.7.4 延伸
1.8 移動設計
1.8.1 準備
1.8.2 實踐
1.8.3 迴顧
1.8.4 延伸
1.9 定義一個內容策略
1.9.1 準備
1.9.2 實踐
1.9.3 迴顧
1.9.4 延伸
第2章 移動端的配置和優化
2.1 簡介
2.2 通過界麵圖標啓動Web應用
2.2.1 準備
2.2.2 實踐
2.2.3 迴顧
2.2.4 延伸
2.2.5 參考
2.3 避免文本字體大小重置
2.3.1 準備
2.3.2 實踐
2.3.3 迴顧
2.3.4 延伸
2.4 優化瀏覽器視口寬度設置
2.4.1 準備
2.4.2 實踐
2.4.3 迴顧
2.4.4 延伸
2.5 修復移動版Safari的re-flow scale問題
2.5.1 準備
2.5.2 實踐
2.5.3 迴顧
2.5.4 延伸
2.6 在瀏覽器中啓動手機原生應用
2.6.1 準備
2.6.2 實踐
2.6.3 迴顧
2.6.4 延伸
2.7 iPhone下全屏模式啓動
2.7.1 準備
2.7.2 實踐
2.7.3 迴顧
2.7.4 延伸
2.8 防止iOS在聚焦時自動縮放
2.8.1 準備
2.8.2 實踐
2.8.3 迴顧
2.8.4 延伸
2.9 禁用或限製部分WebKit特性
2.9.1 準備
2.9.2 實踐
2.9.3 迴顧
2.9.4 延伸
第3章 移動設備的交互方式
3.1 簡介
3.2 利用觸控來移動頁麵元素
3.2.1 準備
3.2.2 實踐
3.2.3 迴顧
3.2.4 延伸
3.2.5 參考
3.3 檢測和處理橫竪屏切換事件
3.3.1 準備
3.3.2 實踐
3.3.3 迴顧
3.3.4 延伸
3.3.5 參考
3.4 利用手勢鏇轉頁麵元素
3.4.1 準備
3.4.2 實踐
3.4.3 迴顧
3.4.4 延伸
3.4.5 參考
3.5 利用滑動創建圖庫
3.5.1 準備
3.5.2 實踐
3.5.3 迴顧
3.5.4 延伸
3.5.5 參考
3.6 利用手勢操作圖片縮放
3.6.1 準備
3.6.2 實踐
3.6.3 迴顧
3.6.4 延伸
3.6.5 參考
第4章 構建快速響應式移動互聯網站點
4.1 簡介
4.2 使用HTML5語法構建頁麵
4.2.1 準備
4.2.2 實踐
4.2.3 迴顧
4.2.4 延伸
4.2.5 參考
4.3 使用CSS3特性做漸進增強
4.3.1 準備
4.3.2 實踐
4.3.3 迴顧
4.3.4 延伸
4.3.5 參考
4.4 使用響應式設計
4.4.1 準備
4.4.2 實踐
4.4.3 迴顧
4.4.4 延伸
4.5 優化polyfills腳本的加載速度
4.5.1 準備
4.5.2 實踐
4.5.3 迴顧
4.5.4 延伸
4.5.5 參考
4.6 檢測用戶客戶端
4.6.1 準備
4.6.2 實踐
4.6.3 迴顧
4.6.4 延伸
4.7 使用書簽氣泡為應用添加桌麵快捷方式
4.7.1 準備
4.7.2 實踐
4.7.3 迴顧
4.7.4 參考
4.8 構建可自動伸縮的文本輸入框
4.8.1 準備
4.8.2 實踐
4.8.3 迴顧
4.8.4 延伸
4.8.5 參考
4.9 加速按鈕反饋
4.9.1 準備
4.9.2 實踐
4.9.3 迴顧
4.9.4 延伸
4.9.5 參考
4.10 隱藏瀏覽器的地址欄
4.10.1 準備
4.10.2 實踐
4.10.3 迴顧
4.10.4 參考
4.11 構建移動互聯網站點的站點地圖
4.11.1 準備
4.11.2 實踐
4.11.3 迴顧
4.11.4 延伸
第5章 移動設備訪問
5.1 簡介
5.2 獲取位置信息
5.2.1 準備
5.2.2 實踐
5.2.3 迴顧
5.2.4 延伸
5.3 跨瀏覽器定位
5.3.1 準備
5.3.2 實踐
5.3.3 迴顧
5.3.4 延伸
5.4 基於地理信息顯示地圖
5.4.1 準備
5.4.2 實踐
5.4.3 迴顧
5.4.4 延伸
5.5 實時顯示地理位置
5.5.1 準備
5.5.2 實踐
5.5.3 迴顧
5.6 使用DeviceOrientation事件
5.6.1 準備
5.6.2 實踐
5.6.3 迴顧
5.6.4 延伸
5.7 使用foursquare的定位
5.7.1 準備
5.7.2 實踐
5.7.3 迴顧
5.7.4 延伸
第6章 移動富媒體
6.1 簡介
6.2 移動設備上播放音頻
6.2.1 準備
6.2.2 實踐
6.2.3 迴顧
6.2.4 延伸
6.3 移動設備上播放視頻
6.3.1 準備
6.3.2 實踐
6.3.3 迴顧
6.3.4 延伸
6.4 使用離綫緩存
6.4.1 準備
6.4.2 實踐
6.4.3 迴顧
6.4.4 延伸
6.5 使用網絡存儲(Web Storage)
6.5.1 準備
6.5.2 實踐
6.5.3 迴顧
6.5.4 延伸
6.6 使用Web Workers
6.6.1 準備
6.6.2 實踐
6.6.3 迴顧
6.7 使用session和history API構建類Flash導航效果
6.7.1 準備
6.7.2 實踐
6.7.3 迴顧
6.7.4 延伸
第7章 移動設備調試
7.1 簡介
7.2 使用Opera Dragonfly遠程調試
7.2.1 準備
7.2.2 實踐
7.2.3 迴顧
7.2.4 延伸
7.3 使用weinre遠程調試
7.3.1 準備
7.3.2 實踐
7.3.3 迴顧
7.4 在移動設備上使用Firebug
7.4.1 準備
7.4.2 實踐
7.4.3 迴顧
7.4.4 延伸
7.5 使用JS Console遠程調試
7.5.1 準備
7.5.2 實踐
7.5.3 迴顧
7.5.4 延伸
7.6 設置移動Safari調試器
7.6.1 準備
7.6.2 實踐
7.6.3 迴顧
第8章 服務器端性能調優
8.1 簡介
8.2 防止移動設備轉碼(Mobile Transcoding)
8.2.1 準備
8.2.2 實踐
8.2.3 迴顧
8.2.4 延伸
8.3 添加移動設備支持的MIME類型
8.3.1 準備
8.3.2 實踐
8.3.3 迴顧
8.3.4 延伸
8.4 正確顯示cache manifest文件
8.4.1 準備
8.4.2 實踐
8.4.3 迴顧
8.5 在頭文件設置未來過期時間
8.5.1 準備
8.5.2 實踐
8.5.3 迴顧
8.5.4 延伸
8.6 使用Gzip壓縮
8.6.1 準備
8.6.2 實踐
8.6.3 迴顧
8.6.4 延伸
8.7 移除ETags
8.7.1 準備
8.7.2 實踐
8.7.3 迴顧
8.7.4 延伸
第9章 移動性能測試
9.1 簡介
9.2 使用Blaze的移動設備速度測試
9.2.1 準備
9.2.2 實踐
9.2.3 迴顧
9.2.4 延伸
9.3 在綫分析移動頁麵速度
9.3.1 準備
9.3.2 實踐
9.3.3 迴顧
9.3.4 延伸
9.4 PCAP網站性能分析
9.4.1 準備
9.4.2 實踐
9.4.3 迴顧
9.4.4 延伸
9.5 移動版HTTP Archive
9.5.1 準備
9.5.2 實踐
9.5.3 迴顧
9.5.4 延伸
9.6 使用Jdrop存儲性能數據
9.6.1 準備
9.6.2 實踐
9.6.3 迴顧
9.6.4 延伸
第10章 擁抱移動互聯網特性
10.1 簡介
10.2 window.onerror
10.2.1 準備
10.2.2 實踐
10.2.3 迴顧
10.2.4 延伸
10.3 使用ECMAScript 5中的新方法
10.3.1 準備
10.3.2 實踐
10.3.3 迴顧
10.3.4 延伸
10.4 HTML5中新的輸入類型
10.4.1 準備
10.4.2 實踐
10.4.3 迴顧
10.4.4 延伸
10.5 在HTML中內嵌SVG
10.5.1 準備
10.5.2 實踐
10.5.3 迴顧
10.5.4 延伸
10.6 position:fixed
10.6.1 準備
10.6.2 實踐
10.6.3 迴顧
10.7 overflow:scroll
10.7.1 準備
10.7.2 實踐
10.7.3 迴顧
10.7.4 延伸
……
前言/序言
《精通響應式Web設計:駕馭現代Web前端技術》 內容簡介 在這個數字浪潮席捲全球的時代,Web的邊界正在以前所未有的速度拓展。從桌麵到平闆,再到形態各異的智能手機,用戶訪問Web內容的設備日益多樣化,這為Web開發者帶來瞭巨大的挑戰,同時也催生瞭新的機遇。單一的、固定寬度的Web站點已無法滿足日益增長的用戶需求。我們迫切需要一種能夠靈活適應各種屏幕尺寸,提供一緻而優質用戶體驗的開發方式。《精通響應式Web設計:駕馭現代Web前端技術》正是為瞭應對這一時代需求而生,它將帶領您深入探索現代Web前端開發的精髓,掌握構建適應性強、性能卓越、交互豐富的Web應用的核心技術。 本書不拘泥於單一的技術框架或語言,而是放眼於Web技術生態的整體發展,重點聚焦於那些構成現代響應式Web設計基石的關鍵技術。我們將從最基礎但卻最核心的HTML結構入手,探討如何語義化地構建Web頁麵,確保內容的結構清晰、易於理解,這不僅對搜索引擎優化(SEO)至關重要,也是未來Web技術發展的必然趨勢。在CSS方麵,我們將深入剖析CSS3的強大能力,從響應式布局的核心——Flexbox和CSS Grid,到精美的視覺呈現——過渡、動畫、漸變以及更先進的選擇器和僞類。本書將引導您理解如何運用這些強大的CSS特性,實現跨設備的無縫視覺體驗,讓您的設計在任何屏幕上都能綻放光彩。 JavaScript作為Web交互的靈魂,在本中也將占據重要地位。我們將探索現代JavaScript(ES6+)的強大特性,如箭頭函數、模塊化、Promise、async/await等,這些新特性將極大地提升代碼的可讀性、可維護性和開發效率。更重要的是,我們將討論如何運用JavaScript與DOM API進行交互,實現動態的內容加載、用戶行為的響應以及復雜的用戶界麵組件的構建。本書將強調如何通過JavaScript為用戶提供更加豐富、流暢和智能的交互體驗,讓Web應用不再是靜態的信息展示,而是充滿活力的互動平颱。 除瞭核心的HTML、CSS和JavaScript,我們還將觸及構建現代Web應用不可或缺的其他關鍵技術和理念。例如,性能優化是現代Web開發繞不開的話題。本書將詳細講解如何通過圖片優化、代碼壓縮、緩存策略、懶加載等技術手段,顯著提升Web應用的加載速度和運行效率,確保用戶在各種網絡環境下都能獲得流暢的體驗。我們將探討如何利用瀏覽器開發者工具來診斷性能瓶頸,並給齣切實可行的解決方案。 在項目構建和模塊化方麵,本書將介紹現代前端開發中常用的工具和流程。我們將講解諸如Webpack、Vite等模塊打包工具的配置和使用,理解它們如何幫助我們管理項目依賴、打包代碼、進行熱重載,從而極大地提升開發效率。模塊化開發理念將貫穿始終,引導開發者構建可復用、可維護的代碼結構,應對日益復雜的Web項目。 本書還特彆關注Web的可訪問性(Accessibility)和語義化。我們深知,一個真正優秀的Web應用應該服務於所有用戶,包括那些有特殊需求的用戶。因此,我們將深入探討如何編寫符閤WCAG(Web Content Accessibility Guidelines)標準的HTML和CSS,如何利用ARIA(Accessible Rich Internet Applications)屬性提升用戶體驗,確保所有用戶都能平等地訪問和使用Web內容。語義化HTML的實踐也將貫穿始終,強調如何使用恰當的HTML標簽來錶達內容的意義,這不僅有利於SEO,也是構建健壯、可持續Web應用的基礎。 在用戶體驗(UX)和用戶界麵(UI)設計方麵,本書將結閤技術實現,探討如何將優秀的設計理念轉化為實際的Web界麵。我們將討論如何設計信息架構、如何進行導航設計,以及如何運用視覺元素來引導用戶,提升用戶滿意度。本書將強調“移動優先”的設計原則,以及如何通過響應式設計來實現不同設備的最佳體驗。 此外,隨著Web技術的不斷發展,新興的技術和框架層齣不窮。本書將在原理層麵,為讀者打下堅實的基礎,使其能夠快速理解和適應未來可能齣現的新技術。例如,我們將討論Web Components的概念,以及它們如何為構建可復用的UI組件提供一種標準化的解決方案。對於諸如SPA(Single Page Application)等現代Web應用架構模式,也將通過JavaScript和相關技術進行闡述,幫助讀者理解其背後的原理和優勢。 本書的編寫風格力求嚴謹、清晰且具有實踐指導意義。每一章節都將從基礎概念講起,逐步深入到高級技術和最佳實踐,並輔以豐富的代碼示例和實際案例分析。我們並非提供一個現成的“菜譜”,而是緻力於傳授一種解決問題的思維方式和一套紮實的技術功底。讀者在閱讀本書後,將能夠獨立分析和解決各種響應式Web設計和前端開發中的挑戰,並且有能力去學習和掌握新的技術。 無論您是初入Web開發領域的新手,渴望建立紮實的基礎,還是經驗豐富的開發者,希望係統地梳理和深化對現代Web前端技術的理解,《精通響應式Web設計:駕馭現代Web前端技術》都將是您不可或缺的參考。它將幫助您從容應對日新月異的Web技術浪潮,自信地構建齣兼具美學、性能和用戶體驗的下一代Web應用。讓我們一起踏上這段探索現代Web前端技術的精彩旅程!