开始你的iPhone和iPad应用开发旅程

上周Enqoo和大家分享了一篇《如何开发你的第一款iPhone应用？》，今天我们继续讨论iPhone和iPad的开发工作。

据AdMob显示，iphone的操作系统已经占据了全球智能手机市场的50%，占据第二位的是Android系统,约为24%.Apple ipad第一年的销售预测在任何地方的运营都是以百万计的。不管你喜不喜欢，ios操作系统，尤其是Safari浏览器，已经成为Web开发一个不可忽视的力量。如果你还没有使用，现在就是时候使用它，并且让你自己熟悉这些优化网站的工具和为ios系统提供的应用软件。

值得庆幸的是，在iOS系统上的的Safari浏览器是一个真的非常好的浏览器。就像为台式电脑开发的Safari4一样，它有着非常好的CSS3 和 HTML5的支持。它也有一些与iPhone和iPad不同的，漂亮的界面元素。最后，因为iPhone OS已经存在相当长一段时间，现在有大量的资源是可用的。

我知道，现在有很多对本地应用程序的iPhone OS平台中心的讨论。但你仍然可以创建使用HTML，JavaScript和CSS的强大的，本土的前瞻性应用。本文将重点讨论三个阶段的建设和优化您的网站：设计，编码和测试。

在我们进入这三个阶段之前，让我们先看一些建立一个本地应用程序，而不是一个Web应用程序的优缺点。

建立一个本地应用程序，而不是一个Web应用程序的优点：

没有苹果公司的审批程序和繁文缛节，这是特别重要但却富有争议的服务。
与其他使用相同代码的流行的平台如Android和黑莓相比，优化你的web应用要容易得多。
你不必学习Objective-C。
如果你向使用者收费，你也不必和Apple公司平分你的收入。
你获得100％以上的支付手段，促进和分配给用户的控制，这也可能是一种消极的，取决于你如何看待它。

建立一个本地应用程序，而不是一个Web应用程序的缺点：

1.不能存在于App Store中。

2.安装设备上的应用程序是一个小麻烦。

3.没有权利访问一些本地的iPhone OS的功能，如推送通知和GUI控件的功能。

设计

设计一个Web应用程序设计，很像是一个本地的应用程序设计，所以你有机会到一些真正极好的工具。无论是线框选择的工具还是铅笔和纸张或桌面软件，你都能找到。

灵感

没有多少人知道，苹果有一个“Web应用程序”在其网站上，这是专门展示优化网站的。

也有一些其他地方展示在移动网络设计的最好的网站：

•Apple App Store (虽然这些都是本地应用程序，你可以找到伟大的视觉灵感在这里。)

纸

纸上原型一直是我为新思路或网站线框设计的首选工具。我真的很喜欢下面的工具，他们提供的角度的大小和你正在处理刚好吻合。要想成功地优化Web应用程序的iPhone OS，你要削减一些东西。我建议保持设计最小线框用Sharpie笔，下面列出的工具之一。

•Notepod: iPad 和 iPhone 的速写本

•App Sketchbook

•PixelPads

•UI Stencils sticky pads

•Apress iPhone Application Sketch Book

•Printable iPhone Wireframe Template (free)

数字化

一旦你真正地知道事物怎样在你的设计中展示，我们可以移动到桌面，并得到具体的细节。我真的很喜欢OmniGraffle 的框架，但有时直接用Photoshop又是有用的。无论哪种方式，这些工具在它需要时会有巨大的帮助。

•iPhone GUI PSD 3.0 and iPad GUI PSD (Photoshop)

•Layered iPhone GUI elements (Photoshop), from Designer’s Toolbox

•PSD Vector Kit (Photoshop), from Smashing Magazine

•iPad and iPhone stencils; see more at Graffletopia (OmniGraffle)

•iPhone and iPad Development GUI Kits, Stencils and Icons

想要知道更多吗？这篇文章对额外的设计工具有一个很好的概述。

编码

当您启动在iPhone OS上启动Safari浏览器时，了解浏览器是如何工作是很重要的。另外，在iPhone和iPad的浏览器还有一些细微的差别，比如怎样使表单选择框运作。最重要的是，Safari浏览器有强大的CSS3和HTML5的支持，所以你可以使用现代化的代码，而不必担心跨浏览器兼容的问题。

教程

实际上，苹果公司为记录ios系统上的safari浏览器做了很好的工作。在我看来唯一的缺点是缺乏浏览器检测和窗口定位的帮助。阅读文章下面的一切，你需要了解这个浏览器的编码。 iPhone Web应用程序的人机界面指南这是关于Safari浏览器在iPhone OS如何运作的一个很好的的全面总结。这肯定是值得一看的，因为它有一些很好的意见，虽然没有具体的编码例子。

iPad的人机界面指南

这个文件为区别的iPhone元素和iPad元素做了很好的工作。这也是值得看一下的，因为它有一些为iPad设计的意见。

Safari网页内容指南

这个文件得到的关于窗口，webclip图标，独特的meta标签和事件处理的具体事例，其中包括许多其他议题。提供代码示例。我建议你开始使用之前从头到尾阅读它。

为iPad准备你的网页内容

本文档为测试您在ipad上的网站提供了一些指点，但其在检测浏览器上的讨论可能没有我想的那样详细。

浏览器检测

大卫·沃尔什在他的博客上提供了在iPad和iPhone上检测浏览器的很好的例子。 PHP和JavaScript选项都包括在内。

iPhone窗口取向的检测

这个开发教程为iPhone的方向如何改变样式表提供了一个很好的例子。

iPad的窗口定位检测

检测窗口iPad的方向要容易得多。下面是代码（没有JavaScript要求的）：

虽然iphone有一些关于移动电话发展的框架，但jQTouch离最好的还有很远。jQTouch给你所有的工具，使您的移动Web应用程序的外观和感觉就像一个本地应用一样。访问该网站，去从你的iPhone的演示网站，获得它的感觉。建设的第一个网站我jQTouch时我唯一的抱怨是缺乏文档和教程。我必须通过用图演示网站的代码打出来。下面是一些jQTouch证明有助于我的第一个网站的文章：

•jQTouch Wiki on Google Code

•Building iPhone Apps with HTML, CSS and JavaScript, Chapter 4: Animation

•PDF slides about getting started with jQTouch, by Philipp Bosch

测试

建立一个网站或Web应用程序的iPhone OS的关键，但又有些棘手的部分就是测试。这比在浏览器上测试要复杂，但用你熟悉的工具，做的过程应该比较简单。

实时查看

当您的应用程序是在设计或编码阶段的初始，实时显示是一个非常实用的测试工具。它允许您从您的桌面上播放图像到您的手机，所以你可以看到是什么样子。这在测试尺寸时是非常有用的，文字的大小和视觉细节恰到好处，因为有时从Photoshop的可视化是很难的。

使用iPhone模拟器

在我看来，没有好的iPhone或iPad模拟器，可用的就是浪费时间。更好的是下载最新版本的SDK，并使用苹果官方的iPhone OS模拟器，这当然也是支持iPad的。设立SDK和一个本地测试环境需要几分钟，但是这非常值得去努力，而不是根据非官方的，并且往往是不准确的模拟器。关于设立一个本地测试环境，我写了一步一步的教程，很值得一读。有关本地测试的一个伟大之处在于，它的速度更快，并且不需要互联网连接。我强烈推荐它，直到你准备开始。

PhoneGap：两全其美？

PhoneGap是一个Web开发人员的游戏转换者。如果你宁愿在HTML，CSS和JavaScript创建你的应用程序，并希望它运行在App Store中，PhoneGap就是解决方案。它是一个开源的开发工具，不仅你的代码编译为本地使用的iPhone OS，也为 Android, Palm, Symbian, Windows Mobile and Blackberry 设备服务。 PhoneGap最近与3.3.1苹果公司的服务条款有点争议。换句话说，PhoneGap编译的应用程序仍然会批准。但会检验与PhoneGap的建立，以了解更多的应用程序列表。

感到忙不过来？