iPhone和iPad Web开发上手指南

标签: 推荐阅读 资料报告 | 发表时间:2012-07-03 13:28 | 作者:P迪
出处:http://www.alibuybuy.com

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

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

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

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

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

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

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

设计

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

灵感

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

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

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

纸笔

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

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

数字工具

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

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)在他博客上就 iPadiPhone上的浏览器检测方法提供了非常不错的示例。其中提供了PHP和JavaScript两种检测方式。

检测 iPhone屏幕方向

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

检测iPad屏幕方向

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

JQTOUCH MOBILE框架

jQTouch

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

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

测试

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

LIVEVIEW

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

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

结论

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

来源: http://article.yeeyan.org/view/11302/298771

译文来源: http://www.21haolou.com/articles/show/167


© 推荐 for 互联网的那点事, 2012. | Permalink | No comment | Add to del.icio.us
Post tags:

你可能也喜欢:

PHP、jQuery、CSS、HTML等Web开发参考手册CHM文档中文版下载 (@iplaysoft)

iPhone4 评测 - 苹果最新智能手机详尽试用感受 (@iplaysoft)

iPhone/iPad开发讲座 第二讲 iPhone用户界面设计

iPhone/iPad开发讲座:第三讲–基础UI和基础编程

Web 开发工具箱:120个 Web 开发工具(上)
无觅

Feed enhanced by Better Feed from Ozh

相关 [iphone ipad web] 推荐:

iPhone和iPad Web开发上手指南

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

Opera Mini 6 for iPhone和iPad发布

- Seaver - Solidot
51开源社区 写道 "Opera周二公布了面向苹果iPhone和iPad的新移动浏览器Opera Mini 6. Opera是目前全球使用最广泛的移动浏览器. Opera称,Opera Mini 6具备一个多功能键,用户可以借此在Facebook、vKontakte和My Opera上发布和共享信息.

因为 iPad,我不再需要 iPhone

- Jim - 爱范儿 · Beats of Bits
John Brownlee 是一位 iPhone 3GS 和 iPad 用户. 在一次外出的过程中,他的 iPhone 再次不慎遗失. 不过这一次他没有慌乱,甚至没有试图去找回 iPhone,而是购买了一台 feature phone —— 诺基亚 C3-00. 没有受困于功能的落后,John 很喜欢 C3-00.

苹果怒告 Samsung『复制 iPhone、iPad』

- Jarod - Engadget 中国版
不过第一个遭殃的对象,并不是广大的致敬机,而是 Samsung 家一海票的手机、平板;根据华尔街日报报导,苹果上周五前正式对 Samsung 提出告诉,说 Samsung 复制了 iPad / iPhone 的外观跟界面,而涉及到的手机、平板包括了 Galaxy S 4G、Epic 4G、Nexus S 以及 Galaxy Tab(七寸).

伪装成世界最大iPhone的iPad

- 翔晨 - Engadget 中国版
这是放在英国St Pancras车站的宣传广告牌,主要是要帮App Store新推的一个游戏 - Lara Croft Guardian of Light(古墓奇兵新系列)作宣传,一共享了56部iPad当成超大iPhone 4外壳的屏幕,不失为一种广告手法,而且建制成本稿不好彼等大尺寸的电视墙便宜也说不定.

iPhone和iPad更能吸引注意力

- Stan - 36氪
相信大家也看到了,移动互联网是现在的一大热点. 由苹果开启的移动互联网的变革,使得现在移动产品的竞争非常激烈. 各大科技巨头都不断的加入到这场竞争中来,有的风光无限,比如苹果,有的是不断的壮大,比如Android大军,有的被打的鼻青脸肿,比如TouchPad,有的正凭借其在PC中的统治地位要挤进移动领域,比如微软和它的windows8.

苹果发布 iPad Pro、新款 Apple TV、iPhone 6s 和 iPhone 6s Plus

- - 理想生活实验室
北京时间 9 月 10 日凌晨,苹果 2015 年秋季发布会在美国旧金山的比尔格拉汉姆公民大礼堂进行,在越来越难以保密的今天,发布会之前泄露的消息几乎都成为现实,不过各个产品功能细节也仍然带来了惊喜,在此前 WWDC 更多强调应用的情况下,这次的发布会四款新品亮相,无论是数量规模还是在各自产品线上的意义,这次的发布会都显得诚意十足,干货相当多.

iphone Web App 导航设计探讨

- Vingel - 互联网的那点事
最近在做iphone端Web App的项目. 由于产品形式新颖,技术环境不成熟,公司给与了较宽松的研发时间. 在一个月的交互设计阶段,每个环节都得到多次讨论推敲,我从中感悟颇多. 导航系统的设计是一个比较典型的点,拿出来与大家分享讨论一下. iphone Native App较常见的导航如下图所示:.