iPhone和iPad Web开发上手指南

9顶
2踩

2012-07-04 17:57 by 副主编 MnouW 评论(0) 有9575人浏览

apple ios 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很适合将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脚本）：

<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方面的内容对我提供了非常大的帮助。

测试

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应用及客户的不同，下面这些服务中可能有适合你的。