iPhone和iPad Web开发上手指南

        根据移动广告公司 AdMob（现已被 Google 收购）的数据，iPhone 操作系统占全球智能手机市场份额的 50%，位居第二位的是 Android 操作系统，占 24%。苹果 iPad 发售当年的销售量预计在一百万到四百万台之间（据 2011 年苹果公布的数字，2010全年 iPad 的销售量为 1500 万台）。不管你愿不愿意，iPhone OS 尤其是 Safari 已经成为 Web 开发人员必须认真考虑的一股势力。如果你还没有的话，那么现在是时候让自己涉足并熟悉 iOS 网站及 Web 应用的各类优化工具。

        感谢上天，iPhone 操作系统上的 Safari 浏览器幸好是一款优秀的浏览器。跟桌面版的 Safari 4 一样，它对 CSS3 及 HTML5 有良好的支持。另外它也提供若干一流的界面元素供即用，不过这些界面元素在 iPhone 和 iPad 之间有时还存在差别。另外，由于 iPhone 操作系统面世已经很长一段时间了，网络上有很多资源可供利用。

        我了解的大多数对 iPhone 操作系统平台的讨论都是围绕原生应用程序开展的。但是我们仍然可以利用 HTML，JavaScript 和 CSS 打造类似原生应用程序的强大应用。本文主要关注网站建造和优化的三大阶段：设计，编程及测试。

        在开始之前，我们先分析下选用 Web 应用而非原生应用的一些优缺点。

        Web 应用相对原生应用的优点：

• 没有苹果审核流程的繁文缛节，考虑到目前服务条款争议仍在发酵中，这点尤其重要。
• 在相同的代码基础上，开发人员针对 Android 和黑莓这类平台对 Web 应用的优化工作要容易的多。
• 你不用学 Objective-C。
• 如果你向用户收费，你不用与苹果分享利润。
• 你对支付方式，推广及内容分发拥有百分之百的控制权，这可能也是缺点，具体取决你如何看待。

        Web 应用相对原生应用的缺点：

• 不会在苹果应用商店中上架。
• 在设备上安装 Web 应用实际上有点棘手。
• 无法使用 iPhone 操作系统原生的一些特性，比如推送通知和 GUI 控件。

        设计

        该平台上的 Web 应用设计类似原生应用设计，因此你需要利用一些真正优秀的工具。你无论是使用纸笔还是桌面软件画线框图，本文内容都有所涉及。

        灵感

        知道苹果官网上有“Web 应用”专题一栏的人还真不多，这里专门用来展示针对 iPhone 操作系统优化了的网站。

        苹果官网上的特色 Web 用应用

        下面是其他一些展示优秀移动网页设计的地方。

• 苹果官网上的 Web 应用列表
• Mobile Awesomeness 设计展示
• CSS iPhone 设计展示
• Well Placed Pixels
• 苹果应用商店 （尽管这里面都是原生应用，但你仍可在这里寻找一些视觉设计上的灵感。）

        纸笔

        纸上原型设计（Paper Prototyping）一直以来都是我画网站线框图的首选工具。下图中这个工具我最喜欢的一个地方就是它提供了 iPhone 和 iPad 尺寸的直观感受。要想成功的为 iPhone 操作系统优化 Web 应用，你需要做各项精简。我建议你使用下列工具做线框图，保持设计的简约。

• Notepod： iPad 及 iPhone 素描本
• 应用程序素描本
• PixelPads
• UI Stencils 上卖的 iPhone 便签
• 可打印 iPhone 线框图模板 （免费）

        Notepod 很适合将 iPhone 及 iPad 应用的模糊创意画成草图

        数字工具

        一旦我们理清了设计中各要素的精确布局，我们就可以切换到电脑桌面，敲定细节。我个人很喜欢使用 OmniGraffle 画线框图，但有时直接用 PhotoShop 中也是可以的。不管怎样，这些工具在做设计时都给了巨大的帮助。

• iPhone GUI PSD 3.0 和 iPad GUI PSD （Photoshop）
• Designer’s Toolbox 网站提供的分图层 iPhone GUI 元素 （Photoshop）
• Smashing Magazine 网站提供的 PSD 矢量图形包 （Photoshop）
• iPad 及 iPhone 设计模板; 更多设计模版见 Graffletopia （OmniGraffle）
• iPhone 及 iPad GUI 开发工具包，设计模板以及图标

        Teehan + Lax 提供的 iPad 图形用户界面 PSD 文件

        意犹未尽？这篇文章另外罗列了一些不错的设计工具。

        编程

        为 iPhone 操作系统上的 Safari 构建代码时，开发人员了解浏览器的工作原理很重要。另外，iPhone 和 iPad 浏览器资之间有细微的差异，比如表单中的选项框工作方式。不过最为重要的是，Safari 对 CSS3 和 HTML5 有良好的支持，所以你可以使用一些只能在现代浏览器中运行的代码，而不用担心跨浏览器方面的兼容性。

        学习资料

        苹果 iPhone 操作系统上的 Safari 浏览器为开发者提供了非常不错的技术文档，在我看来，苹果真正有所有所欠缺的地方是未对浏览器检测（browser detection）及屏幕旋转（window orientation）提供相关技术文档支持。若要了解为 safari 浏览器编写代码的相关知识，读者可阅读下面罗列的每篇内容。

        iPhone Web 应用的人机界面设计规范

        该规范是对 iPhone 操作系统上 Safari 工作方式方面很全面的一个概述总结。虽然该规范没有提供具体的代码示例，但是由于提供了一些不错的设计建议，很值得仔细阅读一遍。

        iPad 人机界面设计规范

        该设计文档在 iPhone 元素和 iPad 元素区别上做了非常不错的说明。由于该规范就 iPad 人机界面设计提供了非常不错的建议，也值得仔细阅读。

        Safari Web 内容指南

        该文档主要涉及视口（viewport），主屏图标（webclip icons），Safari 私有 meta 标签，事件处理（event handling）以及其他一些内容。该文档也提供代码实例。在开始学习 Web 开发之前，我建议读者先从头到尾一字不拉的读上一遍。

        针对 iPad 优化你的网站内容

        这篇内容就如何在 iPad 上测试你的网站提供了若干小技巧，但是文中对浏览器检测方面的内容不如我想象的详细。

        浏览器检测

        戴维·沃尔什（David Walsh）在他博客上就 iPad 及 iPhone 上的浏览器检测方法提供了非常不错的示例。其中提供了 PHP 和 JavaScript 两种检测方式。

        检测 iPhone 屏幕方向

        Nettuts 上的 iPhone 开发教程就如何根据 iPhone 屏幕方向提供不同的 CSS 样式表给出了非常不错的示例。

        检测 iPad 屏幕方向

        检测 iPad 屏幕方向非常简单。下面是所用代码（无需 JavaScript 脚本）：

        Html 代码

1.   
2.   

        JQTOUCH MOBILE 框架

        尽管 iPhone 上已有几款移动设备开发框架，但 jQtouch 却一枝独秀。jQtouch 提供了一切所需工具，可让你的移动网站应用用起来像是原生应用。读者可访问项目主页，用 iPhone 体验下上面的 Demo 网站。

        我在使用 jQtouch 开发自己首个网站时，只有一个不满的地方：jQtouch 却缺乏相关的文档和教程。我不得不研究 Demo 站点的代码才弄清楚 jQtouch 的用法。下面这几篇 jQtouch 方面的内容对我提供了非常大的帮助。

• Google Code 上的 jQtouch 维基
• 《用 HTML, CSS 及 JavaScript 制作 iPhone 应用》第四章：动画效果
• 《jQTouch 入门》PDF 幻灯片，Philipp Bosch

        测试

        iPhone 上的网站或 Web 应用开发过程中一个关键且有些棘手的地方就是测试。它比一般的用浏览器来测试网站要复杂一点，不过你熟练使用几款工具的话可让测试过程简单不少。

        LIVEVIEW

        在应用的设计及初始编程阶段，Liveview 是一款测试神器，它可以将桌面图像传输到你的 iPhone 上，方便实际的效果。在调整文本字体大小和视觉效果时非常有用，因为有时光凭 PhotoShop 是很难反映实际效果的。

        使用 iPhone 模拟器

        依我之见，目前市面上还没有一款优秀的 iPhone 或者 iPad 模拟器。目前的模拟器都是浪费时间的。最好是下载最新版本的开发工具包（SDK），并使用苹果官方的 iPhone 操作系统模拟器，这款模拟器理所当然的也支持 iPad。

        设置 SDK 以及本地测试环境需要耗费不少时间，相比依赖不靠谱的非官方模拟器，这点时间还是值得的。本人写过一篇如何设置本地测试环境的教程，值得一度。本地测试的一个好处就是速度很快，不需要连接互联网。我极力推荐读者依此方式开发，直至应用开发完毕，可以上线。

        PhoneGap: 两全其美的解决之道?

        对 Web 开发人员而言，PhoneGap 堪称规则颠覆者（game-changer）。如果你即想用 HTML，CSS 及 JavaScript 制作应用，但是也想程序能在本地运行，并在苹果应用商店中上架，那么 PhoneGap 则是解决之道。这是一款开源开发工具，它不仅可以将你的代码编译成 iPhone 操作系统上原生应用，而且它可以将代码编译成能够在 Android，Palm，Symbian，Windows Mobile 以及黑莓设备上运行的程序。

        PhoneGap 也避开了最近苹果极具争议的服务条款中的3.3.1条款。换句话而言，使用 PhoneGap 编译的应用层序仍可得到批准，可以在应用商店上架。读者可以了解下使用 PhoneGap 制作的应用程序清单，了解相关情况。

        感觉有些眼花缭乱了?

        如果是的话，一些优秀的服务可以让你不用从头开始针对多个平台优化网站。这些服务在灵活性上有所差异，但是所有这些服务都利用了类似所见即所得（WYSIWYG）的编辑器，帮助用户创建网站。根据你的 Web 应用及客户的不同，下面这些服务中可能有适合你的。

• Mobify (Smashing Magazine’s移动站点使用的就是这个)
• Wapple
• Mofuse
• Mobi10

        如果你不想从头开始制作制作 Web 应用，那 Mobify 是一个不错的选择

        结论

        现今是 Web 开发人员的黄金年代，此前从没有一个桌面平台像 iPhone 操作系统这样为我们带来了表现创造能力和释放创业精神的无限可能，于此同时并遵循现代 Web 标准。iPhone 操作系统目前正在主宰移动领域，在这个平台上创造优秀 Web 体验的所有一切工具已经存在，能否充分利用完全取决于读者你！