前 言 Web Web Web Android ipod iphone BlackBerry ios Android SDK Web Web Web Web HTML CSS JavaScript HTML5 CSS3 JavaScript Web Web app Apple App Store Google Play CSS3 HTML5 1 JavaScript iphone ipad Android Firefox OS Windows Phone Wii Web 1 我 們 會 使 用 HTML5 來 代 表 所 謂 的 HTML:The Living Standard
xvi 10 Web Web iphone canvas SVG Safari 4.0 Web worker 2009 canvas iphone Chrome Opera Firefox Internet Explorer Android Web HTML CSS DOM SVG XHR HTML5 CSS3 Web vs. Web App Store iphone Google Play Amazon Android Web 2 3 App Web Web Web iphone App CSS3 HTML5 Web App itunes App 2 Apple 會 確 實 地 審 查 應 用 程 式, 裡 面 不 能 有 妨 害 風 化 的 圖 片, 也 不 能 有 暴 力 內 容 似 乎 可 愛 的 暴 力 行 為 (cute violence) 可 通 過 審 核, 但 是 如 果 你 想 要 加 入 以 兒 童 為 對 象 的 暴 力 行 為 又 會 如 何 呢? 3 若 要 將 你 的 iphone 本 機 應 用 程 式 提 交 給 App Store, 你 必 須 支 付 Apple 開 發 人 員 年 費, 無 論 你 的 應 用 程 式 成 功 與 否, 甚 至 無 論 是 否 通 過 審 核
前 言 xvii iphone Bump Twitterific Gowalla iphone HTML5 Web Web HTML5 Web HTML CSS HTML5 CSS3 iphone ipod touch iphone ipad Windows BlackBerry Android Android Android ios Google TV ios HTML5/CSS3 Web WebKit IE10 Blink Opera Mobile mini Firefox Web HTML5 CSS3 HTML5 CSS3 Web Internet Explorer 8 Internet Explorer 9 HTML5 CSS3 Internet Explorer 10 iphone SDK 2008 iphone app SDK Web Web HTML5 HTML5 API Web Web iphone ipod ipad Flash Safari WebKit ios HTML5 <video>
xviii Internet Explorer Web 21 Web Internet Explorer IE6 IE7 IE8 CSS3 HTML5 Internet Explorer 6 8 Web IE6 IE7 HTML5 CSS3 X Web Safari Chrome Firefox Opera IE10 Web HTML 4.01 XHTML HTML5 CSS 2.1 CSS3 JavaScript AJAX DOM Level 2 Windows HTML5 2010 Windows 2012 2 Windows phone Windows phone Windows Mobile Windows phone Web Web
前 言 xix Web vs. 2007 6 iphone iphonedevcamp iphone SDK iphone Web iphone iphone OS EDGE 10 KB 10 KB 10 KB JavaScript iphonedevcamp Web iphone onorientationchange JavaScript CSS iphone Joe Hewitt iui iphone JavaScript CSS Nicole Lazarro Tilt iphone iphone Dori Smith iphone Bingo JavaScript iphone Richard Herrera Ryan Christianson Wai Seto Pickleview Twitter Major League Baseball AJAX CSS3 opacity iphone Web Apple iphone app Apple iphone Web iphone WebKit Safari iphone OS iphone Web iphone SDK SDK iphone SDK 2008 3 6 iphone SDK Apple iphone ipod touch ipad 2008 7 Apple Store SDK App Store iphone iphone App Store App
xx SDK iphone iphone 2008 Web Web app Web app 2008 iphone Safari 10 MB Web app CSS3 HTML5 iphone Safari app 2008 XCode App Store 2013 Web app app Web app 2013 HTML CSS iphone app 2013 App Store $99 Apple Developer 30% HTML5
前 言 xxi API HTML5 4 2004 Web Applications 1.0 A Safari Chorme Internet Explorer 10+ Firefox Opera IE8 IE9 HTML5 Web HTML5 WebKit/Blink Opera Mobile 5 Firefox OS Windows HTML5 HTML5 Web API HTML5 HTML5 API HTML5 API HTML5 semantic <div> <span> Web email HTML5 JavaScript HTML5 4 HTML5 已 經 變 成 一 個 總 稱 HTML5 只 是 代 表 HTML5 傘 下 的 元 件 而 已 Bruce Lawson 曾 經 建 議 使 用 NEWT 來 代 表 這 個 總 稱, 它 的 意 思 是 New Exciting Web Technologies 我 喜 歡 蠑 螈 (newt) 寶 寶, 但 我 認 為 這 個 名 稱 很 瞎 5 Opera Mini 並 未 完 善 地 支 援 HTML5, 以 後 也 不 會 它 是 不 同 型 的 瀏 覽 器 :proxy 瀏 覽 器, 其 目 的 是 利 用 有 限 的 功 能 來 降 低 頻 寬 的 使 用 量 Opera Mini 是 透 過 Opera 的 伺 服 器 來 請 求 網 頁 當 網 頁 被 傳 送 至 手 機 之 前, 伺 服 器 會 處 理 並 壓 縮 它 們, 以 大 幅 度 地 減 少 資 料 傳 輸 量 這 種 預 先 處 理 的 過 程 可 以 增 加 非 手 機 專 用 網 頁 的 相 容 性, 但 是 會 限 制 該 網 站 的 互 動 性 與 功 能
xxii email JavaScript SVG Canvas HTML HTML5 HTML <svg> <canvas> CSS DOM <svg> <canvas> HTML5 HTML5 WebM mp4 DOM CSS ios Flash Silverlight HTML5 <video> <audio> API HTML5 相 關 的 API API HTML5 API Web API API microdata ARIA Web worker microdata Web ARIA Accessible Rich Internet Applications
前 言 xxiii hijacked Web worker JavaScript JavaScript UI CSS CSS3 RGBA HSLA Alpha CSS border-radius box-shadow text-shadow 3D opacity animation background-size columns border-image text-overflow Web Web Web 安 全 字 型 iphone vs. @font-face sans-serif Helvetica Roboto Web http://www.standardista.com/mobile Web Web tap 點 擊 click
xxiv WiFi Web JavaScript Web 12 Web CSS2 HTML5 WebKit Android iphone OpenMoko BlackBerry BlackBerry Android ios WebKit Bolt Dolphin Ozone Skyfire Firefox Opera IE Presto Opera Opera Chrome Blink Web Internet Explorer Internet Explorer CSS3 CSS2 HTML CSS
前 言 xxv HTML CSS Web Web iphone padding
xxvi HTML5 HTML5 Web Forms 2.0 HTML5 API API SVG canvas Web AppCache Web worker CSS3 Web Web Web Web Italic Email Constant width Constant width bold
1 第 一 章 HTML5 CSS3 JavaScript Internet Explorer 1 IE6 IE IE6 polyfill IE localstorage localstorage localstorage localstorage 1 在 2001 年 IE6 問 世 時, 它 是 一 項 尖 端 產 品 它 幾 乎 壟 斷 所 有 瀏 覽 器 市 場, 因 此 沒 有 什 麼 對 手, 而 且 它 不 曾 更 新
2 第 一 章 2 OS JavaScript vanilla JavaScript vanilla JavaScript polyfill bug bug HTML5 JavaScript API polyfill bug HTML5 CSS3 JavaScript API CubeeDoo HTML5 HTML5 CSS3 web CSS3 Twitter/ web Pickleview 2007 iphone iphone Safari Opera IE6 IE7 Firefox 2 Chrome Web 2007 2010 HTML5 CSS3 Chrome 12 Safari 3.1 HTML5 CSS3 JavaScript 2007 2010 IE
為 行 動 HTML5 CSS3 與 JavaScript 架 設 學 習 舞 台 3 3 2013 HTML5 CSS3 Internet Explorer 9 IE6 Android 2.3 Android 2.3 HTML5 CSS3 JavaScript API 1-1 CubeeDoo frontend-coded iphone 9-3 HTML5 generated content CSS CSS SVG JSON websql localstorage sessionstorage HTML5 Data URI 1-1 CubeeDoo
4 第 一 章 4 vanilla JavaScript HTML5 CSS API polyfill polyfill polyfill polyfill CSS3 HTML5 API Web Web Web Internet Explorer web IDE web 整 合 開 發 環 境 integrated development environment IDE IDE FTP IDE Sublime Text TextMate Dreamweaver Eclipse WebStorm IDE IDE IDE
為 行 動 HTML5 CSS3 與 JavaScript 架 設 學 習 舞 台 5 5 Chrome Canary Google Chrome beta Chrome Canary Apple iphone ipad ipod touch Windows 8 Metro Windows Unix Android Mac IDE web JavaScript API Windows Phone Internet Explorer Safari Google Chrome Android Bada Blackberry ios Gecko Firefox Opera Presto Opera Mobile 14 Chromium Opera Chrome Blink 2 Mac Safari Windows Internet Explorer Chrome Firefox Opera Unix Chrome Canary Aurora Opera Next WebKit Nightly 2 Blink 是 WebKit 147503 版 製 作 的 WebCore 元 件 它 是 Chrome 28 版 之 後 Opera 15 版 之 後, 及 其 他 Chromium 瀏 覽 器 的 瀏 覽 器 引 擎
6 第 一 章 DOM JavaScript CSS web web 6 Firebug 3 F12 Web Inspector / DragonFly Firebug Mozilla F12 Web Inspector DragonFly Internet Explorer Chrome/Safari Opera CSS HTML DOM JavaScript HTTP Firebug getfirebug.com Safari Develop "Show develop menu in menu bar" Preferences Advanced Chrome View Developer Developer Tools Command-Option-I Control-I Chrome Safari Firebug Opera F12 Firebug CSS JavaScript HTML Web Inspector Error Console User Agent CSS HTML JavaScript DOM Web Inspector Firebug DragonFly F12 Developer Tools Timeline 3 Firefox 已 附 有 開 發 工 具, 但 是 大 部 分 的 開 發 人 員 都 會 使 用 Firefox 的 附 加 程 式 Firebug
為 行 動 HTML5 CSS3 與 JavaScript 架 設 學 習 舞 台 7 行 動 檢 視 區 7 1-2 Settings Overrides Chrome Developer Tools Developer Tools Web Inspector 1-2 Chrome Developer Tools Settings Overrides
8 第 一 章 User Agent Chrome 8 device metrics device metrics ScreenQueri.es thumbs.js TouchEvent polyfill Chrome Developer Tools web HTML CSS DOM Opera 2008 Opera Opera Dragonfly Opera HTML CSS DOM Dragonfly Android 4 ios 6 WebKit USB Chrome Chrome chrome.exe --remote-debugging-port=9222 --user-data-dir=remote-profile /Applications/Chromium.app/Contents/MacOS/Chromium --remote-debugging-port=9222 Firefox Firebug Debug API Crossfire
為 行 動 HTML5 CSS3 與 JavaScript 架 設 學 習 舞 台 9 Browser Testing and Tools Working Group Remote Debugging Protocol http://www. w3.org/2011/08/browser-testing-charter.html 9 Android 除 錯 工 具 Android SDK API Android App Web SDK 1-3 1-3 OS X Android 4.2.2 http://developer.android.com/sdk/ SDK Android Debug Bridge ADB
10 第 一 章 tool android ADB ADB UNIX 10 ADB https://github.com/repenaxa/adbplugin Chrome ADB SDK tools Monitor Android Debug Monitor Monitor console.log() 1-4 log 1-4 Android Debug Monitor 1-5 Monitor Window Android Virtual Device Manager 1-3 11 Weinre Weinre web inspector remote JavaScript HTML CSS Weinre PhoneGap debug.phonegap.com Weinre 13 Adobe Edge Inspect
為 行 動 HTML5 CSS3 與 JavaScript 架 設 學 習 舞 台 11 1-5 Android Virtual Device Manager 12 Weinre WebKit Weinre Node.js WebSockets 4 Weinre DOM JavaScript JavaScript 4 在 一 開 始, 它 是 以 Java 為 基 礎 的 在 使 用 WebSockets 之 前, 它 使 用 的 是 CORS JSON 與 XHR