很多PhoneGap新手总是需要一些基础问题的解答，Adobe技术布道师Andrew Trice常在其博文中回答诸如” PhoneGap是什么?”、“phonegap应用开发出来是什么样的形态?”、“如何开发phonegap?”等问题。近日他将这些问题回答整理成文以帮助开发者理解和使用PhoneGap。

1. PhoneGap是什么?

PhoneGap是一个基于HTML和JavaScript的应用开发平台，使用它可以构建本地应用。你可以把PhoneGap看作一个正方形的web view container，它使用JavaScript编程接口实现用户在不同操作系统下的访问。你可以利用传统的web开发技术(如HTML、CSS、JavaScript )开发用户接口，利用PhoneGap容器把它们部署到不同的应用环境和设备上。

PhoneGap可以被用来开发跨平台的应用，这些平台包括Apple iOS、 Google Android,、Windows Phone、BlackBerry、 HP WebOS,、Symbian 和 Bada。你可以通过链接http://phonegap.com/about/features 获取更多关于PhoneGap支持的平台及其特色功能的信息。

PhoneGap是一个开源的框架,用户可以去http://incubator.apache.org/projects/callback.html获取更多信息。

2.开发出的PhoneGap应用是什么样的形态？

由于UI绘制引擎就是移动设备的内置web浏览器，所以PhoneGap应用的形态可能多种多样。你可以使用标准的HTML&CSS使它看起来就像一个简单的网页，也可以使用UI框架使它像jQuery UI, Kendo UI, Sencha, Twitter Bootstrap或Skeleton(或者其它任意基于HTML/CSS/JS的用户框架接口)。另外你也可以采用CSS模式/主题使它看起来就像一个本地应用，如模仿iOS 和 Android的iUI，模仿BlackBerry的bbUI。

PhoneGap应用可以是基于HTML的静态UIs，也可以是利用JavaScript开发具有动态效果和交互体验动态UIs。这取决于特定的应用、用户体验设计、受众目标以及指示PhoneGap应用如何出现的应用实例。

使用PhoneGap应用，你可以通过缩小放大操作放大或者缩小查看的内容，或者利用利用viewport metadata tag锁定浏览内容的大小。你可以利用常规浏览器的操作方式滚动浏览网页也可以像iScroll一样采用基于接触的滑动方式浏览网页。

基于HTML, CSS & JavaScript你有许多方式可以创建用户接口，所以并没有一个典型的外观。如果你没有使用任何的CSS模式，那么用户接口各元素默认和使用的操作系统或者浏览器保持一致，包括按钮、链接、色彩以及亮度。这时PhoneGap应用和操作系统默认的浏览器一样运行。

3. 如何利用PhoneGap开发应用？

利用PhoneGap开发应用非常简单，90%的PhoneGap应用只需要一个文本编辑器即可。PhoneGap也能很容易的与特定的设备整合形成开发环境。具体可以参考以各应用平台上的开发指导链接：

•iOS: http://phonegap.com/start#ios-x4
•Android: http://phonegap.com/start#android
•BlackBerry: http://phonegap.com/start#blackberry
•Windows Phone: http://phonegap.com/start#wp
•WebOS: http://phonegap.com/start#webos
•Symbian: http://phonegap.com/start#symbian

在开发PhoneGap应用应用时 ，一定要谨记你是在web浏览器实例中运行代码。你是利用HTML和JavaScript开发应用而不是本地代码，因此不需要其它任何东西。实际上我的大部分开发都是利用HTML编辑器和Chrome浏览器实现的。当我需要在设备上做测试的时候再切换到特定的设备环境。

4. 如何调试PhoneGap应用？

调试PhoneGap应用是PhoneGap开发过程中最棘手部分。只在物理设备上测试，并不能测试出所有的JavaScript异常。下面是一些具体的调式策略：

尽可能利用桌面浏览器调试

由于PhoneGap应用是利用HTML, CSS, and JavaScript进行开发的，你可以利用HTML编辑器开发大部分应用然后利用桌面web浏览器调试。最新版本的web浏览器(包括Chrome、IE、Firefox、 Opera 和Safari)都提供了丰富的调试功能。利用web浏览器开发工具，你可以检查HTML DOM元素，检查CSS的模式、设置JavaScript断点、检查内存和JavaScript变量。通过下面链接可以获得更多更多关于桌面浏览器开发工具的信息：

•Chrome Developer Tools: http://code.google.com/chrome/devtools/docs/overview.html
•Firefox via FireBug: http://getfirebug.com/
•Safari Developer Tools: https://developer.apple.com/technologies/safari/developer-tools.html
•IE Developer Tools: http://msdn.microsoft.com/en-us/ie/aa740478
•Opera Developer Tools: http://dev.opera.com/articles/view/opera-developer-tools/

你一旦利用桌面工具开发了应用的主要功能，便可以切换到特定的设备环境增加特定的设备功能并与PhoneGap APIs整合。

利用真实设备进行测试是必不可少的。利用真实设备测试可能获得不同于桌面浏览器和模拟器的性能，也可以发现不同的bug和问题包括API的不同和UX脚本的不同。

用debug.phonegap.com调试

利用debug.phonegap.com可以进行远程的基于设备的调试。利用Weinre调试工具你可以远程检查DOM、测试资源下载、检测网络使用、检测时间线以及控制台输出。如果你已经使用了上述列出的开发工具，就会发现它们看起来很相似。只是你不能在移动设备上设置断点，但是肯定比什么都没有强。

利用iOS5进行远程web调试

利用iOS5模拟器实现远程调试只需要开通远程调试功能即可。然后利用iOS5桌面模拟器发布应用。一旦应用运行它就会打开一个本地Safari实例http://localhost:9999/。这将启动远程调试工具，完成断点设置和脚本测试。

通过连接http://hiediutley.com/2011/11/22/debugging-ios-apps-using-safari-web-inspector/你可以获取更多信息。

其他调试信息

通过下面链接你可以阅读更多关于PhoneGap应用应用的调试信息：

•http://phonegap.com/2011/05/18/debugging-phonegap-javascript/
•http://wiki.phonegap.com/w/page/16494768/Debugging%20PhoneGap%20Apps

5. 如何部署PhoneGap应用？

部署PhoneGap应用和创建移动设备web是一样的，唯一不同的就是PhoneGap应用程序在本地初始化HTML设置而不是远程服务器。PhoneGap应用加载初始化的HTML，它可以用来申请服务器或者本地上的资源。由于PhoneGap是基于浏览器的，可以像浏览器一样运行。你可以同时下载各种网页但是一旦你下载或者关闭一个网页很可能丢失通过JavaScript脚本存储在内存中的数据。PhoneGap也支持单页浏览模式，建议用户使用单页浏览模式。

单页浏览模式部署

单页浏览架构就是指只有一个HTML页基于数据和用户输入进行动态更新，你可以把它看做是客户/服务器模式，由一个客户应用和一个服务器组成。客户应用可以请求数据或者进行更新而不用重新加载web页。

通过使用单页浏览模式你可以维护内存中的数据。通过如下链接可以了解更多关于单页模式的知识http://en.wikipedia.org/wiki/Single-page_application。

可以利用任意常见的JS架构如Angular, Ember, Backbone, Mustache部署PhoneGap 应用。

6.如何使PhoneGap应用在移动设备和应用环境中运行？

对每一个给定的平台而言，PhoneGap应用采用和本地应用相同的规则部署，你必须遵守每一个应用平台的部署规则。你可以利用每个平台的构建过程为这个平台编译可执行文件也可以利用build.phonegap.com进行编译。build.phonegap.com是可以为每个平台编译使用时具体平台的应用的服务。构建过程的输出是适用于一个特定平台的二进制文件：适用于iOS的IPA，适用于Android的APK。通过下面链接你可以获得更多信息：

•iOS App Store: https://developer.apple.com/programs/ios/distribute.html
•Google Android Market: https://market.android.com/publish
•Amazon App Store: https://developer.amazon.com/welcome.html
•BlackBerry App World: https://bdsc.webapps.blackberry.com/devzone/appworld
•Barnes & Nobe Nook Store: https://nookdeveloper.barnesandnoble.com
•Windows Phone Marketplace:http://msdn.microsoft.com/en-us/library/ff941089(v=vs.92).aspx

7. PhoneGap和AIR的区别是什么？

PhoneGap和AIR最根本的不同就是你利用Flash平台(如Flex, Flash, ActionScript, MXML)开发AIR应用而基于HTML, CSS, & JavaScript开发PhoneGap应用。AIR应用利用AIR开发环境运行，这样应用只需要一个代码基便可以在所有它支持的平台上运行，PhoneGap可以在每一个它支持的平台上的浏览器上运行。由于这个原因，不同的平台可能有不同的代码基，在开发PhoneGap应用时需要考虑这一点。

可以在iOS、Android、BlackBerry Playbook和desktop (mac and windows)包括上Windows Metro开发AIR应用。通过下面链接可以了解更多关于AIR支持的平台的信息。

http://www.adobe.com/products/air/tech-specs.html

ActionScript动作脚本语言支持传统的继承编程模式。可以使用Flex框架构建AIR应用，这使得开发者可以快速的构建企业类应用。AIR应用中的组件是具有行为、属性和图形上下文的逻辑客体。

基于JavaScript的应用支持原型继承编程，有许多开源框架和工具可以被使用。HTML/JS通过HTML DOM元素实现可视化。虽然利用JavaScript模板可以创建HTML接口，但是实际上你只是创建了具有属性和模式的DOM元素。

虽然两者构建应用的语法不通但是基本的交互式设计和交互式开发的概念却是一直的。两个开发平台各有优缺点。

接下来做什么？

你可以去链接http://phonegap.com/ 下载PhoneGap并开发，当然你也可以去链接 http://phonegap.com/apps查看其他人开发的应用。

原文链接：（英文）“What is PhoneGap?” & Other Common Questions（中文）新手必读：PhoneGap入门六大问题

PhoneGap入门之问题解读，首发于润物无声。

1) Codtch

2) CSSUsage

3) JavaScript Debugger

4) ColorZilla

5) Firebug

6) Web Developer

7) Total Validator

8 ) HTML Validator

9) FirePHP

10) MeasureIt

Web 设计师专用的 Firefox 4 插件，首发于润物无声。

Shutter Effect Portfolio with jQuery and Canvas

How To Build a Sliding Feature Slideshow with jQuery

Drag Drop Shopping Cart Using JQuery

Image Wall with jQuery

Photobooth with PHP, jQuery and CSS3

HTML5 Grayscale Image Hover

jQuery and CSS Single Page Portfolio, a Vertical Parallax Navigation Experiment

How To Create a Cool Animated Menu with jQuery

Shuffle Between Images Using jQuery

Rotating Image Slider with jQuery

Animated Scroll to Top

Better Check Boxes with jQuery and CSS

Expanding Image Menu with jQuery

Animate Panning Slideshow with jQuery

原文来源： http://webexpedition18.com/articles/15-fresh-and-brilliant-jquery-tutorials/

15个绚丽的jQuery特效，首发于润物无声。