《jQuery Mobile即学即用》试读:第一章:移动平台

如果你正在阅读本书,说明你可能是一位网页设计师或网页开发者,也可能是一位jQuery 爱好者或一位Web 应用开发者。在开始写代码之前,我们首先要了解一下移动生态系统以及jQuery Mobile 适合做些什么。让我们开始吧。 1.1 为什么需要jQuery Mobile 你可能会问的第一个问题是jQuery Mobile 存在的意义是什么?既然已经有大量能渲染标准桌面网站的移动浏览器了,为什么还要专门考虑移动设备?让我从我的另一本书《移动网络程序设计》(Programming the Mobile Web)中复制粘贴一些内容来回答这些问题。当然,我已经从自己这儿得到授权了。 1.1.1 移动互联网的传说 随着人们访问互联网的方式延伸到移动终端,开发者中间也流传着很多故事,这些故事讲述了这个趋势将给他们的工作带来什么影响。虽然有些故事是真实准确的,但也不乏带来误导的、让人迷惑的,甚至是极端错误的描述。 1. 没有所谓的移动互联网,只有一个互联网 过去的几年里我曾经多次听说这个言论。的确只有一个互联网,想一下你的生活吧,你不会为你的手机专门设置另一个Email 账号。(好吧,我知道有些人会这样做,但我相信这并不是普遍情况。)在最喜欢的网站上,比如在ESPN 上阅读最新的NBA 赛事的消息,台式机和手机访问的都是同一个新闻源。你也真的不想用手机访问另一个社交网络,而是希望使用和桌面电脑上相同的Facebook 或Twitter 账号。在桌面电脑上创建朋友列表已经很痛苦了,你已经因此忽略了很多人,你可不想把这些事在手机上再重做一次。 因此,只有一个互联网。不过,在为移动互联网做开发时,我们面对的是非常、非常不一样的设备。最明显的不同是屏幕尺寸,这也将是我们遇到的第一个问题。除此之外,还有很多不那么明显的差异,比如我们使用移动设备的情境,通常和使用舒适的桌面电脑甚至笔记本、上网本时的地点、场景完全不同。 不要误会我,这不是说,开发者必须为我们的工作创建两个、三个或多个版本。这就是jQuery Mobile 要解决的问题。 2. 设计移动网站不需要什么特别处理 今天市场上几乎所有的智能手机,如iPhone 以及基于Android 的设备,都可以读取并显示完整的桌面站点,这是事实。用户希望在移动互联网上的体检和在桌面电脑上的一致,这也是事实。一些统计甚至显示,用户使用智能手机时,更倾向于选择桌面版本而不是移动版本。不过,这是因为我们喜欢通过缩放、滚动以及旋转操作来浏览信息呢,还是因为移动版本的用户体验实在太差了?我曾经见过很多移动互联网网站,除了logo 和若干文本链接之外什么也没有。我希望在智能手机上看到更多的东西! 3. 一个网站应当在所有设备(台式机、手机、电视)上都能运转 如同我们即将看到的,有一些技术能让我们只创建一个文件就能为包括桌面电脑、手机、电视以及游戏终端在内的众多设备提供不同的体验,这个愿景被称为OneWeb。今天,有很多移动设备的连接速度很慢,资源也受限——我说的是非智能手机,理论上它们也能读取并解析文件,但如果我们把为桌面设备准备的文档发给它们,则它们非但不能提供最好的体验,还可能产生一些兼容性问题。因此,OneWeb 仍然是将来时。为了让不同的移动设备都能提供良好的用户体验,还需要做一些额外工作,不过也有一些技术可用于减少这些工作并避免代码和数据的重复。 4. 只要创建一个240像素宽的HTML文件,就算是一个移动网站了 这是另一种关于移动互联网的简单化认识。今天,市场上有3000 多种移动社备,差不多有50 种不同的浏览器(事实上,如果我们按它们的版本号来划分的话,有500多种不同的浏览器)。只有一个HTML 文件的移动网站是相当不靠谱的。另外,这种做法,实际上是在助长移动互联网毫无用处的错误观念。 1.1.2 移动Web应用 我并不打算讨论移动Web 开发与原生开发孰优孰劣,事实上,我相信这个讨论本身没有多大意义。通常,这些讨论的焦点就是对比原生代码与JavaScript 代码,或浏览器应用与本地应用。不过,这些讨论可能不会提到的是,对原生开发环境来说,多平台开发是有挑战的,因为每个平台都有不同的SDK。既然问题的核心是要便利地在多个移动设备上开发及发布,那么移动Web 开发在大多数情况下都是一个完美的解决方案。Web 应用有着大量的同义词或近义词,如移动Web 应用、小部件(widget)、聚合(hybrid)、HTML5 应用等。 特别是,移动Web 应用与通常的移动网站在目标上并不相同。一个Web 应用通常会模仿原生的手机应用,有着更加事务型的用户界面。它虽然仍是由网页技术(HTML、CSS、JavaScript、AJAX)创建的,但向用户提供了一个类似应用程序的体验。 很多移动Web 应用也使用了离线或地理定位(geolocation)等HTML5 特性,以便提供更好的体验。地理定位不是HTML5 官方标准,而是W3C 的一个独立API,不过,它经常以HTML5 名义被提到。 Web 应用可以用很多方式(见图1-1)实现,包括: • 从浏览器中访问; • 安装为一个全屏的 Web 应用; • 通过提供商实现的官方包(有时叫小部件)安装; • 内嵌在本地应用中,通常称为聚合。 图1-1:Web 应用(从左到右):基于浏览器的体验、安装的全屏应用、在本地应用中嵌入的Web 应用 本书剩下的部分将介绍如何创建这些网页应用。想了解这方面的更多信息,可以阅读我的另一本书《移动网络程序设计》。 Web 应用通常会为网页设计师和开发人员带来新的挑战,比如加载视图而不是页面,管理视图之间的双向导航,以及创建为触屏设备定制的富控件等。 1.1.3 再问一次,为什么需要jQuery Mobile 如果你已读过了上面几页(我相信你已经读过了),就会知道在移动互联网设计及开发中有一些新的挑战。我们需要创建Web 应用,而不仅仅是简单的网站。有太多的设备以及浏览器要兼容,同时,也有许多由社区和设备提供商开发的程序库尝试解决这些问题。这就是jQuery Mobile 诞生的原因:让设计师和开发者使用少量代码即可更容易地创建跨平台、可定制的移动互联网体验。jQuery 世界范围的广大社区也将为这个框架的未来提供大量机会。这个框架同时还获得了移动领域许多大牌公司的官方赞助和支持,其中包括: • Adobe; • Mozilla 公司; • HP Palm; • BlackBerry/RIM; • Nokia; • DeviceAtlas 及 dotMobi。 1.2 jQuery Mobile是什么 根据位于http://www.jquerymobile.com 的官方说明: jQuery Mobile 是一个支持所有流行移动设备平台的统一的用户界面系统,基于坚如磐石的jQuery 及jQuery UI。它轻量级的代码使用渐进增强方式构建,具有可伸缩、易更换主题的设计特点。 1.2.1 jQuery Mobile不是什么 知道jQuery Mobile 不是什么,对理解jQuery Mobile 十分重要。jQuery Mobile• 不是移动浏览器上的 jQuery。要使用jQuery Mobile,需先载入通常的jQuery 框架。或者说,它并不是jQuery的替代,而是一个构建于jQuery 之上的UI 层。 • jQuery Mobile不是Web应用的开发包。 可以使用jQuery Mobile 来创建完整的移动应用体验,但你仍然需要一些额外的工作来将它编译为原生应用。在后面几章中,我们将了解到为什么要这样做,以及具体何时、怎样来做。 • jQuery Mobile不是专属于JavaScript爱好者的框架。 除了一些高级主题,使用jQuery Mobile 时一般无需涉及任何JavaScript 代码。对于讨厌大括号、分号这些JavaScript 语法的Web 设计师而言,这是一个好消息。 • jQuery Mobile不是面向所有移动应用/网站/游戏的解决方案。 尽管如此,jQuery Mobile 可以为它们中的大多数提供解决方案。至于剩下的那些,我不得不建议你去阅读我写的另一本相关书籍。 1.2.2 框架 如果你没听说过jQuery,那么你大概是从十年前穿越过来的吧?好吧,如果你是Marty McFly1, 请通过浏览器访问http://jquery.com, 了解一下这个超级有用的JavaScript 框架。事实上, 自2007 年开始, 它就是互联网上使用最为广泛的JavaScript 框架了。 jQuery Mobile 是一个帮助开发者更容易地在移动设备和平板电脑上(这些设备大多具备触摸操作功能)交付跨平台Web 应用的框架,只使用标准HTML5 代码。一个jQuery Mobile 应用看起来大致如图1-2 所示。 jQuery Mobile 使用了jQuery 核心,此外还包含一个JavaScript 库、一个CSS3 样式表,以及一些资源图片。 jQuery Mobile 和桌面端的jQuery UI 类似,即它同样只是一个UI 框架。它的名字没有包含UI 这个词,这也许会让你怀疑它是一个核心框架。在我看来,这个命名选择应该是想借力于jQuery 品牌在设计师和开发者圈子中的巨大影响力。 jQuery Mobile 是由jQuery 主框架的开发团队创建的,由来自Mozilla 的JavaScript 工具开发者John Resig 带队(他的twitter 账号是@jeresig)。 译注1: 经典科幻电影《回到未来》三部曲中的男主人公。 图1-2:一个使用标准主题的典型jQuery Mobile Web 应用,本例中使用的是webOS 智能手机和jQuery 及jQuery UI 一样,这个新的平台也是基于MIT 或GPLv2 双协议发布的开源项目。 如果想参与jQuery Mobile 的开发, 可以通过http://jquerymobile.com/contribute 这个网址提供补丁、bug 修复以及参与讨论。 1.3 移动及平板的世界 人们已不再只通过桌面电脑来浏览互联网了。现在,我们有很多种设备,它们有着不同的屏幕尺寸、输入方式,甚至连我们的老朋友如HTML、JavaScript 以及CSS都有了各种新的特性。毫无疑问,移动设备的时代已经来临。全球有50 多亿台移动终端,并且这个数目仍在增长中。与此同时,平板电脑也正迅速普及,总量以百万计。 1.3.1 设备分类 现在,我们可以将移动设备分为以下几类: • 移动电话; • 低端移动设备; • 中高端移动设备,也被称为社交设备; • 智能手机; • 平板电脑。 1. 移动电话 是的,在某些市场上,我们还能看见移动电话的身影。它们只具备通话和短信功能,没有浏览器,不能连接互联网,无法安装应用。我们不关心这些设备,也不能为它们做任何开发。 要不了几年,随着运营商和设备制造商发起的设备回收以及产品更新服务,这些设备也许就会从市场上彻底消失了。 2. 低端移动设备 低端移动设备有一个很大的优势,即具备Web 接入能力。它们一般只自带一个入门级的浏览器,但总量占市场的主流。也许这些用户目前还不是互联网上最活跃的用户,但随着社交网络和Web 2.0 服务的兴起,一切可能很快会发生变化。如果你的朋友可以从移动设备上发布照片,你或许会希望自己也可以做到,所以只要条件成熟,你可能就会换一新部手机。 诺基亚、摩托罗拉、京瓷、LG、三星以及索尼爱立信都有定位于这个市场的设备。它们通常不具有触屏支持,内存有限,只内置了一个入门级的相机和音乐播放器。 3. 中高端移动设备 对大众市场来说,想获得良好的互联网体验的主流选择即是这类中高端移动设备。中端设备有良好的用户体验,价格也适中。最近几年来,这种类型的设备被称为社交终端,也就是说,用户可以通过这类设备接入社交网站,如Facebook 或Twitter。这个类别的设备通常有一个中等尺寸的屏幕,有基本的HTML 浏览器支持,有些支持3G,带有一个不错的相机、一个音乐播放器,能玩游戏,有些支持触屏操作,可以安装应用。高端移动设备和智能手机间的一个很大的区别是:高端移动设备往往不采用固定费率计划2 进行售卖,用户必须自己去寻找这样的套餐。从2011 年开译注2: 类似于包月包流量的套餐计划。始,这些设备中的大多数开始支持WLAN(WiFi),如图1-3。 图1-3:诺基亚X3-02 触屏键盘版:一个中端触屏设备,带有数字键盘和WiFi 4. 智能手机 市面上有很多智能手机,包括iPhone、基于Android 的设备、webOS、Symbian、黑莓(BlackBerry)以及 Windows Phone 手机(见图1-4)。这是最难被定义的一类移动设备。人们会问,为什么某些中高端设备没有足够“智能”到可以归入智能手机类别?关于智能的定义每年都在变化,事实上,当前市场上最简单的移动设备在10 年前看来也是非常智能的。 图1-4:智能手机设备示例通常当你购买智能手机时,需要签署一份一年或两年期的合约,约定固定的费率和数据流量计划。符合当前关于智能手机的定义的设备,通常会有一个支持多任务的操作系统、一个现代的支持HTML5 的浏览器,支持无线局域网(WLAN,也称WiFi)和3G 接入,还会有一个音乐播放器,以及下列功能: GPS(全球定位• 系统)或 A-GPS(辅助全球定位系统); • 数字指南针; • 可录像的相机; • TV 输出; • 蓝牙; • 触屏; • 3D 视频加速; • 加速传感器。 一些多媒体设备也被我们这些Web 创作者列为智能手机,但它们其实没有电话功能。这些设备包括Apple 的iPod Touch 和Sony 的PSP。它们和平板电脑唯一的区别是其屏幕尺寸通常小于3 英寸。 5. 平板电脑 平板电脑通常带有一块大屏幕(6 到11 英寸之间)、一个完整支持HTML5 的浏览器,支持WLAN 接入(WiFi),有的带3G,支持触屏操作,还具备那些能在智能手机上找到的所有其他功能。 在这个分类中,我们可以找到很多设备,包括: • 苹果 iPad; • 三星 Galaxy Tab; • 黑莓 BlackBerry PlayBook; • 巴诺(Barnes and Noble)Nook Color; • 摩托罗拉 Xoom; • LG Optimus Pad; • 亚马逊 Kindle Fire; • 索尼 S1 和 S2。 1.3.2 操作系统和浏览器 本书并未打算深入研究移动设备的生态系统。在《移动网络程序设计》一书中,可以找到一个详细列举了各种操作系统、平台和浏览器的列表。不过,如果打算创建移动Web 体验,至少要对操作系统和浏览器有所了解。 在移动设备的世界里,我们将操作系统分为两大类:可识别的操作系统和专有操作系统。移动电话、低中端移动设备上的操作系统大多属于后一类。 对那些安装了可识别操作系统的设备,我们更关心它上面所运行的操作系统,而不是它的设备品牌或产品型号。我的意思是说,我们并不是要为三星的Galaxy 开发Web 应用,而是要为Android 设备开发Web 应用。iPhone 是一个例外,因为它的平台是专有的,在写作本书的时候,这个平台只支持一个设备:iPhone。(不同版本的设备也遵循相同的规则,对Web 开发者而言,iPhone 4 和iPhone 3GS 并没有太大的区别。) 表1-1 列举了当前市场上所有智能手机和平板电脑所使用的操作系统。 表1-1:智能手机、社交设备以及平板电脑上的操作系统和浏览器 操作系统厂  商内置浏览器其他浏览器 iOS Apple Safari Opera Mini 和伪浏览器 Android Google Android 浏览器Firefox, Opera Mini, Amazon Silk, Opera Mobile Symbian Nokia Symbian 浏览器Opera Mini, Opera Mobile webOS/Open webOS HP(曾经的 Palm) webOS 浏览器 Windows Phone 微软IE Windows Mobile 微软IE Opera Mobile MeeGo Nokia Micro 浏览器/Nokia 浏览器Firefox BlackBerry OS RIM BlackBerry 浏览器Opera Mini Tablet OS RIM Tablet OS 浏览器 S40 诺基亚诺基亚浏览器 Bada 三星三星浏览器 每个操作系统都有多个版本,有些系统允许用户升级到新版本。每个操作系统都内置一个浏览器,不过用户可以自行安装使用其他浏览器。有时设备制造商或者运营商(你从他们那买的设备)会安装别的浏览器,比如Opera Mobile 浏览器,或者用它替换掉原有的浏览器。 如果我们将浏览器的调查延伸至中低端设备,还会进一步发现20 多种其他浏览器,如Ovi 浏览器、NetFront 浏览器以及LG 的Phantom 浏览器。但它们目前都不是jQuery Mobile 的应用目标。 什么是伪浏览器? 伪浏览器是一个用户可安装到设备上的本地应用,它们和默认浏览器使用同一个引擎,但是提供了更多的功能。在iOS上有大量这样的例子,如SkyFire或PerfectBrowser,它们都使用Safari作为最终渲染引擎,因此,对jQuery Mobile而言,它们是同一个浏览器。 在《移动网络程序设计》一书中有20 页关于每个浏览器类型及特性的详细介绍。 1.3.3 jQuery Mobile兼容性 jQuery Mobile 框架专注于智能手机、平板电脑以及多媒体设备等触屏设备,它的兼 容列表会随着时间的推进以及框架本身的继续演化而改变,因此,这儿没法给出完 整的清单。 jQuery Mobile 1.0 版与下列系统的默认浏览器兼容。 • iOS iOS 3.2 版开始的iPhone、iPod Touch 以及iPad 版Safari。 • Android OS 手机及平板版Android 浏览器。 • BlackBerry OS BlackBerry 浏览器,智能手机版5.0 版及最新版,以及平板电脑版。 • Symbian 支持触屏设备的Nokia 浏览器。 • webOS 自webOS 1.4 版开始的webOS 浏览器。 • Bada Bada 浏览器。 • MeeGo Micro 浏览器及Nokia 浏览器(内置在Nokia N9 中)。 • Windows Phone Windows Phone/Mobile 6.5 及Windows Phone 7.0 中的IE。 • Kindle Kindle 3 中的浏览器。 jQuery Mobile 也与下列第三方浏览器兼容: • Opera Mini,自 5.0 版开始在大多数设备上都能完整支持; • Opera 移动版,自 10.0 版开始在大多数设备上都能完整支持; • Firefox 移动版。 这个兼容清单只是让你有一个初步了解,完整的兼容性展示远比这个清单复杂,因为多个操作系统版本与多个浏览器版本相互交织,不同的组合可能产生不同的结果。甚至,这里没有列出的新设备也可能兼容jQuery Mobile,只要它支持jQueryMobile 框架所必需的最少特性。简单来说,jQuery Mobile 能兼容每个浏览器并提供框架支持的体验。所有现代浏览器都应该在这个清单中。 许多现代浏览器使用基于WebKit 的引擎, 如桌面版浏览器Safari 或Chrome。所有现代的基于WebKit 的移动浏览器都应该能完整兼容jQuery Mobile。同时,桌面版的Chrome、Firefox、Safari、Opera 以及IE 等浏览 器都与jQuery Mobile 兼容。移动分级浏览器支持 jQuery Mobile 用一个图表来表示它与各个设备的兼容情况(见图1-5)。如果我是你,我就不会去趟这道分类的混水,不过,要是你真想了解更多信息,可以在http://jquerymobile.com/gbs/ 查看。 许多现代桌面浏览器,如Firefox、Google Chrome、Safari 或IE 也都兼容jQuery Mobile。虽然jQuery Mobile 无意于桌面应用,但这个特性在测试 时会很有用。另外,后面我们也会看到安装一个模拟环境也很有用。 我相信兼容性问题远比这个表上列出的要复杂,并且一般Web 设计及开发人员不必太关心。判断一个移动浏览器是否支持某个特性,有比将它们逐一分类更好的办法,其中一个方案就在你手中:使用jQuery Mobile。 图1-5:jQuery Mobile 在它的网站上维护着一个浏览器兼容清单 GBS(分级浏览器支持,Graded Browser Support)将移动浏览器分为三个级别:A级、B 级以及C 级。对jQuery Mobile 来说,各级含义如下: • A级 支持CSS3 媒体查询(media queries)的浏览器。这类浏览器会被jQuery 团队完整地测试。不过,如果设备不支持,则一些特性会被自动禁用。jQuery Mobile将提供一个完整的基于AJAX 动画的体验。 • B级 具有增强体验,但是没有AJAX 导航特性的浏览器。 • C级 不兼容jQuery Mobile 的浏览器。这类浏览器不能从jQuery Mobile 框架接收任何CSS 或JavaScript 代码,因此用户将只能看到一个无样式的HTML 文件内容。本书后面会提到如何处理这种情况。 PhoneGap 以及原生开发 上面的jQuery Mobile 移动分级浏览器支持表中,PhoneGap 被当作了一个 浏览器。不过,PhoneGap 并不是浏览器,它是一个用于创建混合解决方案 (嵌入了Web 应用的原生应用)的框架。在iOS、Symbian、BlackBerry、 Android 以及webOS 等平台上,PhoneGap 都被jQuery 官方支持。 好消息是,你可以使用任何你喜欢的混合解决方案框架,只要设备支持 PhoneGap,jQuery Mobile 就也能工作,这是因为PhoneGap 不是浏览器本 身,而是一个使用了原生浏览器引擎的框架。 简单来说,jQuery Mobile 兼容使用HTML 创建原生应用。 1.4 HTML5和CSS3 我知道大多数Web 设计及开发人员都对HTML5 和CSS3 感到恐慌。我首先想说:不要担心,jQuery Mobile 将为你处理一切。因此,即使不懂HTML5 或CSS3 也可以使用jQuery Mobile。尽管如此,我仍然鼓励你学习一下HTML5 和CSS3,这样,在将来的讨论中,你将对这些新标准有一个更深的认识。 本书不会教读者HTML5 或CSS3,不过,了解一些相关知识很重要。很多智能手机、平板电脑内置的移动浏览器都支持HTML5、CSS3 以及其他API。 关于HTML5 有很多可谈论的东西,包括它的历史以及它为移动世界带来了什么。严格来说,HTML5 是一个发展中的标准,它包含了若干对HTML 标记语言的改变以及大量JavaScript 中的新API(是的,HTML5 的大部分内容是关于JavaScriptAPI 的)。在非正式的场合中,HTML5 是许多浏览器中的现代特性的汇总, 包括W3C 的正式的HTML5 标准、其他W3C API、CSS3 以及非标准扩展。可以在 http://mobilehtml5.org 看到HTML5 在各移动浏览器中的兼容信息。 jQuery Mobile 使用了大量的HTML5 特性以便在移动浏览器上提供更好及更快的体验。不过这并不意味着浏览器必须完整地支持HTML5。事实上,许多早于HTML5 出现的老浏览器也支持一些HTML5 标记。在处理动画、渐变、特效以及UI 渲染时,jQuery Mobile 将尽可能地使用CSS3。 为了进一步引起你的兴趣,必须得告诉你:使用HTML5、CSS3 以及一些其他现代技术,可以获得下列特性(无论是否带有jQuery Mobile 体验): • 离线访问; • 离线存储; • Websockets; • 地理位置访问; • 加速计及陀螺仪支持; • 动画; • 2D 及 3D 变换; • 渐变及视觉特效; • 视口(viewport)管理(用于浏览器内置的缩放支持); • Web 应用安装元数据; • 与原生应用整合; • 多媒体支持; • 绘图(矢量图及位图); • 支持自定义字体。 我的博客http://www.mobilexweb.com/ 上有一些关于这些特性的例子及链接。 1.5 主要特性 作为一个现代框架,jQuery Mobile 项目始于2010 年8 月,它包含很多适用于多平台开发的模式及最佳实践。这个框架的主要特性有: • 跨平台、跨设备、跨浏览器; • 为触屏设备优化过的 UI; • 设计为可修改主题及自定义; • 只使用无侵入性的 HTML5 代码,无需了解任何 JavaScript、CSS 或 API 知识; • 自动调用 AJAX 来加载动态内容; • 构建于知名及有良好支持的 jQuery 核心之上; • 轻量级尺寸,压缩后为 12KB; • 渐进增强; • 可访问性支持。 我们已经讨论过其中一些特性,现在让我们深入分析一下其他方面。 1.5.1 使用非侵入性语义的 HTML5 我知道你急切地想看代码,现在代码来了。jQuery Mobile 使用标准及无侵入性的HTML5 创建Web 应用,特别适合搜索引擎优化(SEO)以及网站性能优化(WPO)。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>My first jQuery Mobile code</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/ jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/ 1.0/jquery.mobile-1.0.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div data-role="page" data-theme="a"> <div data-role="header"> <h1>jQuery Mobile</h1> </div> <div data-role="content"> <ul data-role="listview" data-inset="true" data-dividertheme=" b"> <li data-role="list-divider">Summary</li> <li>The Platform</li> <li>The Page</li> <li>Lists</li> <li>Components</li> </ul> <ul data-role="listview" data-inset="true" data-dividertheme=" d"> <li data-role="list-divider">Links</li> <li>Mobile Web Blog </li> <li>O'Reilly Media </li> </ul> </div> <div data-role="footer"> <h4>&copy; 2011 Maximiliano Firtman @firt</h4> </div> </div> </body> </html> 从图1-6 可以看到这个示例在几个移动浏览器上渲染的情况, 图1-7 则显示了 不兼容jQuery Mobile 的情况。如你所见,代码中没有用于初始化或其他用途的JavaScript 代码,只不过包含了几个JavaScript 文件。 图1-6:上面的jQuery Mobile 代码示例在iOS、webOS 以及Android 设备上的效果图1-7:在不兼容的浏览器上,jQuery Mobile 将降级为一个简单的、功能齐全的HTML 文件不要急,下一章我们就开始分析上面的jQuery Mobile 代码。 1.5.2 渐进增强 渐进增强是一种用于Web 设计的简单但非常强大的技术,它定义了几个层次的兼容性,允许所有用户都能访问网站的基本的内容、服务以及功能,同时在那些对标准支持更好的浏览器上提供增强的体验。jQuery Mobile 完全使用这个技术构建。渐进增强这个术语由Steven Champeon 在2003 年提出(http://www.hesketh.com), 虽然这个技术并不是专门为移动互联网定义的,但它却特别适合移动互联网设计。 渐进增强有以下核心原则: • 在所有浏览器上都能访问基本内容; • 在所有浏览器上都能使用基本功能; • 语义标签包含了所有内容; • 增强布局由外部链接的 CSS 提供; • 增强行为由不冲突的、外部链接的 JavaScript 提供; • 尊重终端用户浏览器的偏好设置。 这个列表看起来是不是像jQuery Mobile 的特性列表?是的,就是这样。jQueryMobile 应用也能在不支持CSS 或JavaScript 的入门级的浏览器上工作,这对移动互联网应用来说是一个很好的特性。 1.5.3 可访问性支持维基百科上的定义: Web 可访问性指的是让网站对所有正常人及残疾人都可用的一系列做法。在正确地设计、开发以及编辑的网站上,所有用户都可以平等地访问网站提供的各种信息及功能。移动浏览器上的Web 可访问性浪潮才刚刚兴起。不过,jQuery Mobile 已经完全兼容W3C 关于浏览器兼容的WAI-ARIA 标准(http://www.w3.org/TR/wai-aria/)。在写作本书的时候,还只有带VoiceOver 特性的iOS 4.0 或更新版本才兼容这个标准。因此,在iPhone、iPod 以及iPad 上,基于jQuery Mobile 的Web 应用都能为有视力障碍的人士提供可访问体验。 1.6 测试Web应用 我们提到过,基于jQuery Mobile 的Web 应用可以在绝大多数现代桌面浏览器上运行,不过,最好还是能在更精准的环境中进行测试(见图1-8)。要在不同的环境中测试移动Web 应用,可以使用: • 真实的设备; • 远程实验室; • 仿真器; • 模拟器; • 大量的朋友 3。 译注3: 指让朋友们用自己的手机帮忙测试。 图1-8:在iPad 上测试jQuery Mobile 的可访问性 1.6.1 仿真器与模拟器 仿真器与模拟器是最有用的工具。总的来说,仿真器是一个软件,将已编译的代码从原始架构翻译为当前运行平台的代码,让我们能在一个操作系统上运行另一个操作系统及程序。在移动开发的世界里,仿真器是仿真移动设备的硬件及操作系统的桌面程序,可用于测试及调试应用,以及查看应用的工作状况。浏览器甚至操作系统并不会意识到它们正运行在仿真器上,所以相同的代码也能在真实的设备上运行。我们的移动开发环境中也应该添加一些项目及配置管理的经典工具,如bug 追踪、版本管理以及项目管理等工具。图1-8 显示了如何在iOS 4.0 或更新版本的iPhone、iPod 或iPad 上测试jQuery Mobile 的可访问性。打开菜单“设置➤通用➤可访问性”并激活VoiceOver,然后闭上眼睛,使用手指及耳朵浏览你的网站。图1-9 展示了一个Android 仿真器在桌面上提供完整的Android 系统图形化的效果,可用于仿真Galaxy Tab 或Nook Color 等平板设备。图1-9:一个Android 仿真器 仿真器由厂商开发,向开发者免费提供,有些是独立程序,有些则与开发原生应用的软件开发工具包(SDK)捆绑在一起。也有一些操作系统仿真器,它们与任何真实的设备硬件无关,只仿真了操作系统。Windows Mobile 和Android 都有这类仿真器。另一方面,模拟器则是相对简单的程序,它只模拟设备的一些行为,但不能模拟硬件,也不是基于真实的操作系统设计的。这些工具比较简单,比仿真器用途少。模拟器可能由设备制造商创建,也可能由其他为开发者提供模拟环境的公司提供。在移动浏览方面有一些像素级的模拟器,还有一些则既没有替换桌面浏览器(如Firefox 或Safari)的外观,也不模拟渲染引擎。图1-10 显示了Mac 中免费iOS 模拟器提供的iPad 模拟。其他平板电脑,包括Windows 或Linux 桌面机,也有类似的模拟器。图1-10:iOS 模拟器就算使用仿真器,最终渲染效果以及性能也可能和真实设备上不完全一样。因此,使用真实设备来测试是一个不错的做法,即使只在一些重要设备上测试。对手机网页开发来说,可以找到Nokia、Symbian、BlackBerry、Android、webOS以及Windows Mobile 的仿真器,还有来自苹果公司的用于iPhone 和iPad 的模拟器(不过只能在Mac OS X 上使用)。 还有一些基于浏览器的仿真器(最终能在许多不同的平台上运行),如Opera Mobile仿真器。 表1-2 列出了可下载的仿真器与模拟器。 22 | 第1 章 表1-2:可下载的仿真器与模拟器 名  字平  台类型可用浏览器Windows Mac Linux iOS 模拟器iOS 模拟器Safari 否是否 Android 仿真器Android 仿真器Android 浏览器,可下 载 是是是 HP webOS 仿真器webOS 仿真器webOS 浏览器是是是 Nokia Symbian 仿真器Symbian 仿真器内置浏览器,可下载是否否 Windows Phone 仿真器Windows Phone 仿真器IE 是否否 Nokia S40 仿真器Nokia OS 仿真器S40、Ovi 浏览器、 Opera Mini 是否否 BlackBerry 模拟器BlackBerry OS 仿真器BB 浏览器,可下载是否否 BlackBerry PlayBook 模 拟器 Tablet OS 仿真器Internal 浏览器是是是 Opera 移动仿真器很多浏览器仿 真器 Opera Mobile 是是是 Opera Mini 模拟器很多在线浏览 器仿真器 Opera Mini 是是是 PhoneGap 模拟器很多模拟器PhoneGap 混合是是是 Adobe 设备中心很多模拟器很多是是否 最新的仿真器下载链接列表见http://www.mobilexweb.com/emulators。 1.6.2 远程实验室 远程实验室是一种Web 服务,我们可以远程使用不在同一个物理位置的真实的设 备。这是一个简单但强大的解决方案,只需鼠标一点,即可访问世界各地数以千计 的连接到真实网络的真实设备。可以把它想象为移动电话的远程桌面。 这个市场上最有用的服务如下: Keynote • DeviceAnywhere(商业) http://www.deviceanywhere.com • Perfecto Mobile(商业) http://www.perfectomobile.com • Nokia Remote Device Access for Symbian and MeeGo(免费) http://www.mobilexweb.com/go/rda • Samsung Lab.Dev for Android(免费) http://www.mobilexweb.com/go/labdev 关于这个主题的最新信息见http://www.mobilexweb.com/go/labs

>jQuery Mobile即学即用

jQuery Mobile即学即用
作者: 弗特曼
原作名: jQuery mobile:up and running
isbn: 7115302944
书名: jQuery Mobile即学即用
页数: 226
译者: 吴英杰, 吴敏琦
定价: 49.00元
出版社: 人民邮电出版社
装帧: 平装
出版年: 2013-1