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代码



<link rel="stylesheet" media="all and (orientation:portrait)"href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)"href="landscape.css">

<link rel="stylesheet" media="all and (orientation:portrait)"href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)"href="landscape.css">

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体验的所有一切工具已经存在，能否充分利用完全取决于读者你！