HTML5移動Web開發（一）——HTML5和移動網站基本概念以及一些模擬器

標籤：

　　當前，手機裝置發展迅猛、螢幕尺寸各不相同、儲存和效能仍有局限性，如何結合HTML5的功能，在多平台上建立高效能、響應式的移動網站，是Web開發人員所要面對的首要挑戰。HTML5以及移動網站都是很有前景的技術，本身也仍在不斷的演化。移動端Safari瀏覽器是當前最常用的iPhone應用，它使開發人員可以建立高效能的網頁應用並提高使用者的瀏覽體驗。移動網站的好處在於，你不需要申請開發人員帳號就可以運營和維護，不需要通過任何應用市場的審核就發布，不需要通過繁瑣的審核就可以在任何時候更新。但是它也有許多問題，比如，瀏覽器的不一致；相對於原生應用缺少某些功能和安全性。

　　在接下來的學習中會注於6種最流行的行動裝置，特別是iPhone、Android、Windows Phone：

iOS、Android、Windows Mobile、Blackberry v6.0上、Symbian 60、Palm webOS；兩種跨裝置的瀏覽器：Opera Mobile、Firefox Mobile。

　　一、確定網站的適用行動裝置

　　當你建立一個移動網站，你必須思考以下類似的問題：

　　1.使用者最常用的平台和瀏覽器是什嗎？

　　你必須首先確定誰是你的目標使用者，他們會使用什麼行動裝置來訪問你的網站。有許多分析工具可以協助你回答這些問題，例如Google Analytics。你可以免費註冊Google Analytics的帳號：http://www.google.com/analytics/。使用Google Analytics的方法非常簡單，你需要做的只是從Google Analytics網站引入一小段JavaScript嵌入到你的網站中。大部分現代智能手機都支援JavaScript,所以在移動網站中使用它與在案頭網站中沒有不同。

　　2.有多少使用者使用支援現代指令碼的行動裝置？

　　也許你想知道有多少人使用行動瀏覽器訪問你的網站，同時你也想知道有多少人使用完全不支援JavaScript的老舊行動瀏覽器。因為如果使用低端智能手機的人多於使用高端智能手機的人，那麼就不值得以HTML5作為核心技術了（雖然這種可能性很低）。這時Google Analytics移動版可以派上用場。你可以在這裡下載指令碼：http://code.google.com/mobile/analytics/download.html#Download_the_Google_Analytics_server_side_package。Google Analytics移動版伺服器端程式包當前支援JSP、ASPX、Perl以及PHP。

　　遺憾的是，當你使用服務端版本，就不能同時使用ga.js這一JavaScript跟蹤程式碼程式庫。放棄JavaScript版本讓人很遺憾，因為JavaScript版本提供了很多服務端版本所缺乏的動態跟蹤機制。

　　3.應該在哪些裝置和模擬器上測試？

　　先確定需要支援的核心行動裝置，再看看如何配置。我們的目標是最大化覆蓋率和最小化成本，雖然所有的裝置都有模擬器，但他們並不支援所以的平台。

　　Google Analytics不是市場上唯一的Mobile Analytics服務商，還有其他的服務商提供更有針對性的服務，比如PercentMobile提供一個協助分析你的移動使用者群和網站價值的移動數據分析服務。行動裝置報告的位置並不總是精確的，Google Analytics的Map Overlay報告以使用者的IP地址來確定使用者的位置。由於行動裝置的IP來源於無線網關，它不需要也不知道移動使用者的準確位置，所以些許不準確也是可以接受的。　　

　　對於服務端讀取速度的擔憂：

　　基於服務端的處理方式，可能會對伺服器造成額外的負擔和影響，所以Google建議先在某些頁面小範圍測試一下，確保一切正常之後再在全站部署。

　　下面是用於網頁設計和測試的主流行動裝置模擬器下載表：

　　針對跨平台瀏覽器的工具，特別是Opera和Firefox。瀏覽器的模擬器下載表：

　　BlackBerry模擬器（這裡不做過多介紹）

　　大部分行動裝置模擬器都可以很容易地根據其官方網站的介紹來安裝和配置，但是BlackBerry模擬器的工作方式與其他模擬器不同。從BlackBerry模擬器串連互連網，除了下載模擬器還需要下載安裝BlackBerry Email and MDS Services Simulator。

　　社區搜集的模擬器、模擬器：

　　如果你沒有智能手機,也可以使用很多模擬器、模擬器，你可以在Mobile Boilerplate項目的wiki頁面找到：http://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Emulators-&-Simulators

　　Fritman搜尋的模擬器、模擬器：

　　Maximmiliano Fritman,一個移動網站開發人員和作家，他維護了一個模擬器列表：http://www.mobilexweb/emulators

HTML5移動Web開發（一）——HTML5和移動網站基本概念以及一些模擬器