移动web设计精髓04


Nick Francis iPhone 和 iPad 的 Web 应用发 展:已经开启 第 4 章 第 4 章 iPhone 和 iPad 的 Web 应用发展:已经开启 36 根据 AdMob 的调查显示,iPhone 的操作系统是占全球智能手机操作系统份额最 高的手机操作系统,高达 40%,而排名第二的安卓系统所占比例为 26%。在苹 果发布 iPad 的第一年,其世界各地的销售量均突破 100 万台,最高达到 400 万台。 无论你是喜欢还是反感,iOS 和 Safari 现在已经成为移动互联网开发的一个不容 忽视的角色。如果你对 iOS 还不熟悉,那我劝你最好先静下心来,好好学习和 熟悉 iOS 网络应用开发与 iOS 环境下移动网站优化所需要的要点和工具。 幸好 iPhone 内置的 Safari 浏览器是一个优秀的浏览器。像用于电脑的 Safari 一 样,iPhone 内置的 Safari 也支持 CSS3 和 HTML5。Safari 浏览器也有一些非常独 特的光滑界面元素设计,这些设计在 iPhone 和 iPad 上有着不同的显示效果。因 为 iOS 已经趋向成熟并拥有大量的用户,所以该系统可利用的资源非常丰富。 我们知道大家讨论的焦点就是 iOS 平台上的原生应用程序。但是你仍然可以通 过使用 HTML、JavaScript 和 CSS 来开发类似于系统原生程序的强大应用。本文 将重点讲解创建和优化网站的三个重要阶段:设计理念、编写代码、功能测试。 在开始讨论上述三个重要步骤之前,让我们先来看一看网络应用程序与原生 应用程序相比较所存在的一些优点和不足。 开发网络应用程序的优点: (1) 不用经历苹果公司繁杂的审批程序,特别是现在那些复杂冗长的服务纠 纷条款。 (2) 用相同的程序代码优化运用于像安卓系统和黑莓系统等其他主流操作平 台的网络应用程序时更方便也更容易。 (3)不用另外学习 Objective-C。 (4)如果你开发的是收费应用程序,你不用和苹果公司共享你的收入。 (5) 你对用户支付手段、费用分配和产品促销有着完全的控制权,同时这也 可能有负面影响,关键在于你如何对待。 众妙之门iPhone 和 iPad 的 Web 应用发展:已经开启 4.1  设计理念 37 开发网络应用程序的缺点: (1)你的应用不会出现在 App Store 中。 (2)在设备上安装该应用程序可能会有点麻烦。 (3)不能拥有一些原生 iOS 应用程序的功能,例如推送通知和 GUI 控件。 4.1 设计理念 其实设计一个 iOS 平台上的网络应用程序和设计原生 iOS 应用的理念大同小 异,首先你要具备必要的操作工具。无论你是准备用笔和纸来勾勒网站的框 架,或是用电脑软件来完成,你都要做好充足的准备。 1. 迸发灵感 没有多少人知道在苹果网站有“网络应用程序”这个链接,这一部分专门展 示一些网站优化的案例。 苹果网站上的网络应用页面。 第 4 章 iPhone 和 iPad 的 Web 应用发展:已经开启 38 2. 图纸 在设计网站和构思线框的时候,图纸一直是表达思想和理念的首选工具。因 为它们能为设计构想的事物提供既定的空间和透视图的效果。你必须全神贯 注才能顺利完成用于 iOS 平台的网络应用程序。建议使用下述的其中一种工 具进行设计,然后建议用美观的线框保留最简明的设计。 3. 数码软件 一旦你知道这些软件是如何使用的,我们就可以直接把设计搬到电脑桌面上, 利用这些软件来完成。可以用 OmniGraffle 来绘制线框,不过有时候直接用 Photoshop 也是可行的。总之,这些数码软件对你绘制线框还是很有帮助的。 Teehan + Lax 的 iPad 桌面预览。 4.2 编写代码 当你开始为 iOS 系统上的 Safari 浏览器编写代码的时候,理解浏览器的运行 原理是非常重要的。同样,iPhone 和 iPad 的浏览器在使用上还是存在着一 些细微的差别,例如表单框的选取就不一样。还有一点非常重要,因为 Sa- fari 支持 CSS3 和 HTML5,所以你可以放心地使用现在的代码而不用担心跨 众妙之门iPhone 和 iPad 的 Web 应用发展:已经开启 4.2  编写代码 39 浏览器兼容问题。 学习资源 iOS 系统确实对于 Safari 的优化下了很大的功夫,并且做得很好。我个人认 为唯一不足的地方就是没有做好窗口定向,还有就是缺乏辅助浏览器检测 功能。读了下面的文章你就会对浏览器代码编写有一个全面细致的了解。 iPhone 网络应用程序的人机交互手册 https://developer.apple.com/library/safari/#documentation/InternetWeb/Con- ceptual/iPhoneWebAppHIG/Introduction/Introduction.html 该文章全面地总结了 Safari 浏览器是如何在 iOS 系统上运行的。虽然文章里 没有具体的程序编码案例,但是给读者提供了许多很好的意见,所以还是值 得去深入学习了解的。 iPad 人机交互手册 https://developer.apple.com/library/iOS/#documentation/General/Conceptual/ iPadHIG/Introduction/Introduction.html 这篇文章则详细描写了 iPhone 和 iPad 的细节差别。因为这篇文章里收录了 一些有对 iPad 设计有重大参考价值的建议,所以也建议你花时间来读一读。 Safari 网页内容指南 https://developer.apple.com/library/safari/#documentation/AppleApplications/ Reference/SafariWebContent/Introduction/Introduction.html 这篇文章详细介绍了 Safari 包含视窗、网络收藏图标、独特的元标签和事件 处理在内的很多内容。同时文章中还提供了代码示例。建议读者能把这本书 从头到尾一字不漏地完整看一遍。 定义浏览器 大卫 • 沃尔什在他的博客上列举了很多正确定义 iPhone 和 iPad 浏览器的例 子。这其中也包含了使用 JavaScript 和 PHP。 第 4 章 iPhone 和 iPad 的 Web 应用发展:已经开启 40 检测 iPhone 窗口定义 http://net.tutsplus.com/tutorials/tools-and-tips/learn-how-to-develop-for-the-iPhone/ Nettuts 的 iPhone 开发教程为如何根据 iPhone 的定义来改变样式表提供了一 个非常好的例子。 检测 iPad 窗口定义 相比之下,检测 iPad 的窗口定义要容易得多。下面是编译代码(不需要用 JavaScript): JQTouch 移动网络框架 虽然 iPhone 有一些已经发展成熟的移动网络框架,但是 jQTouch 无疑是最 好的。jQTouch 所提供的功能能让你的移动网络应用做得像系统原生应用一 模一样。 众妙之门iPhone 和 iPad 的 Web 应用发展:已经开启 4.4  两全其美的 PhoneGap 41 4.3 功能测试 开发一个适用于 iOS 系统的网络应用软件或者网站最关键也最难搞定的部分 就是功能测试。在手机上进行浏览器测试比在电脑上进行浏览器要更有难度, 但是只要你熟悉测试工具和测试流程,测试一般还是可以顺利进行的。 1. 实时显示 如果你的应用程序还正在设计当中,或者正处于编码的初始阶段,那么实时 显示是一个非常有用的工具。它可以通过电脑连接你的手机并获取手机里的 显示图像,让你对手机内的程序进展一目了然。由于有时候通过 Photoshop 来显示手机里的图像是很麻烦的,所以用实时显示能有效协助你调整页面文 字的大小和一些显示细节。 2. 使用 iPhone 模拟器 那些能用的 iPhone 和 iPad 模拟器没有一个是好的,用这些模拟器简直就是 在浪费时间。与其如此,还不如下载最新版本的 SDK,或者在苹果官方网站 上下载同时支持 iPhone 和 iPad 的 iOS 模拟器。 通常设定 SDK 和本地测试环境要花上一段时间,不过和依靠并不准备的模拟 器来测试,多花上几分钟等待环境建立好还是很值得的。本地测试有一个最 大的好处,那就是不仅不知道链接网络完成工作而且测试的速度也很快。如 果你准备进行功能测试的话,更推荐你使用这种方法。 4.4 两全其美的 PhoneGap PhoneGap 对于网页开发者来说是一个制胜法宝。如果你想用 HTML、CSS 和 JavaScript 来开发网络应用程序,但又想让这些程序能进入 App Store 并 在设备上完美运行,那么你就需要 PhoneGap。PhoneGap 是一个开源的开 发工具,通过使用 PhoneGap 不仅能让你的代码在 iOS 系统下自如使用, 同样还可以在安卓系统、Palm 系统、塞班系统、Windows 移动系统和黑莓 上实现运用。 第 4 章 iPhone 和 iPad 的 Web 应用发展:已经开启 42 4.5 忙到晕头转向 如果你感到有些忙得不知所措,那么一些好的托管服务可以帮助同时在多个 平台下对你的网站进行优化,这样你就不用挨个从头开始做了。它们能在各 种运行环境中给你提供灵活的优化方式,但所有的服务都是使用类似于所见 即所得编辑来帮助你动态地创建移动网站。 如果你不在乎从头开始构建网站,其实 Mobify 也是一个非常不错的选择。 4.6 总结 当你成为一个移动 Web 开发者的那一天一定是个值得纪念的日子,因为能 使用像 iOS 系统这样的非桌面平台,并不断追随现代移动网络新标准,同 时创造出了更多的可能性。要建立一个杰出的移动网站所需要的全部工具 和知识要点如今你在互联网上都能找到,你要做的就是不断地学习并把它 们做到最好!
还剩7页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 3 金币 [ 分享pdf获得金币 ] 1 人已下载

下载pdf

pdf贡献者

czzhengkw

贡献于2013-11-03

下载需要 3 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf