科技: 人物 企业 技术 IT业 TMT
科普: 自然 科学 科幻 宇宙 科学家
通信: 历史 技术 手机 词典 3G馆
索引: 分类 推荐 专题 热点 排行榜
互联网: 广告 营销 政务 游戏 google
新媒体: 社交 博客 学者 人物 传播学
新思想: 网站 新书 新知 新词 思想家
图书馆: 文化 商业 管理 经济 期刊
网络文化: 社会 红人 黑客 治理 亚文化
创业百科: VC 词典 指南 案例 创业史
前沿科技: 清洁 绿色 纳米 生物 环保
知识产权: 盗版 共享 学人 法规 著作
用户名: 密码: 注册 忘记密码?
    创建新词条
科技百科——欢迎光临全球最大的互联网博物馆
  • 人气指数: 6745 次
  • 编辑次数: 1 次 历史版本
  • 更新时间: 2012-07-05
土土
土土
发短消息
相关词条
整体到细节的交互设计规划
整体到细节的交互设计规划
页面切换的动画过渡
页面切换的动画过渡
27款海量网站设计集
27款海量网站设计集
让网站适应视网膜分辨率
让网站适应视网膜分辨率
iPhone和iPad Web开发上手指南
iPhone和iPad Web开发上手指南
15个华丽的移动UI设计灵感
15个华丽的移动UI设计灵感
iPad和iPhone App界面设计的30个案例
iPad和iPhone App界面设计的30个案例
通往优秀UI设计师之路的20个路标
通往优秀UI设计师之路的20个路标
统计图和信息可视化之争
统计图和信息可视化之争
Metro风格软件界面欣赏
Metro风格软件界面欣赏
推荐词条
希拉里二度竞选
希拉里二度竞选
《互联网百科系列》
《互联网百科系列》
《黑客百科》
《黑客百科》
《网络舆情百科》
《网络舆情百科》
《网络治理百科》
《网络治理百科》
《硅谷百科》
《硅谷百科》
桑达尔·皮查伊
桑达尔·皮查伊
阿里双十一成交额
阿里双十一成交额
王健林电商梦
王健林电商梦
陌陌IPO
陌陌IPO
最新词条

热门标签

微博侠 数字营销2011年度总结 政务微博元年 2011微博十大事件 美国十大创业孵化器 盘点美国导师型创业孵化器 盘点导师型创业孵化器 TechStars 智能电视大战前夜 竞争型国企 公益型国企 2011央视经济年度人物 Rhianna Pratchett 莱恩娜·普莱契 Zynga与Facebook关系 Zynga盈利危机 2010年手机社交游戏行业分析报告 游戏奖励 主流手机游戏公司运营表现 主流手机游戏公司运营对比数据 创建游戏原型 正反馈现象 易用性设计增强游戏体验 易用性设计 《The Sims Social》社交亮 心理生理学与游戏 Kixeye Storm8 Storm8公司 女性玩家营销策略 休闲游戏的创新性 游戏运营的数据分析 社交游戏分析学常见术语 游戏运营数据解析 iPad风行美国校园 iPad终结传统教科书 游戏平衡性 成长类型及情感元素 鸿蒙国际 云骗钱 2011年政务微博报告 《2011年政务微博报告》 方正产业图谱 方正改制考 通信企业属公益型国企 善用玩家作弊行为 手机游戏传播 每用户平均收入 ARPU值 ARPU 游戏授权三面观 游戏设计所运用的化学原理 iOS应用人性化界面设计原则 硬核游戏 硬核社交游戏 生物测量法研究玩家 全球移动用户 用户研究三部曲 Tagged转型故事 Tagged Instagram火爆的3大原因 全球第四大社交网络Badoo Badoo 2011年最迅猛的20大创业公司 病毒式传播功能支持的游戏设计 病毒式传播功能 美国社交游戏虚拟商品收益 Flipboard改变阅读 盘点10大最难iPhone游戏 移动应用设计7大主流趋势 成功的设计文件十个要点 游戏设计文件 应用内置付费功能 内置付费功能 IAP功能 IAP IAP模式 游戏易用性测试 生理心理游戏评估 游戏化游戏 全美社交游戏规模 美国社交游戏市场 全球平板电脑出货量 Facebook虚拟商品收益 Facebook全球广告营收 Facebook广告营收 失败游戏设计的数宗罪名 休闲游戏设计要点 玩游戏可提高认知能力 玩游戏与认知能力 全球游戏广告 独立开发者提高工作效率的100个要点 Facebook亚洲用户 免费游戏的10种创收模式 人类大脑可下载 2012年最值得期待的20位硅谷企业家 做空中概股的幕后黑手 做空中概股幕后黑手 苹果2013营收 Playfish社交游戏架构

iPhone和iPad Web开发上手指南 发表评论(0) 编辑词条

目录

iPhone和iPad Web开发上手指编辑本段回目录

感谢上天,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

→如果您认为本词条还有待完善,请 编辑词条

词条内容仅供参考,如果您需要解决具体问题
(尤其在法律、医学等领域),建议您咨询相关领域专业人士。
2

标签: iPhone和iPad Web开发上手指

收藏到: Favorites  

同义词: 暂无同义词

关于本词条的评论 (共0条)发表评论>>

对词条发表评论

评论长度最大为200个字符。