注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

前端攻城师 郭培的博客

Be the best you can

 
 
 

日志

 
 
关于我

前端技术:http://hszy00232.blog.163.com/ 前端设计:http://blog.sina.com.cn/hsjs00232 职业:web前端工程师 现居地:北京 My QQ:365246295 Mail:hszy00232@163.com

网易考拉推荐

适合前端开发者的iPhone Web App开发【转】  

2011-08-02 18:17:43|  分类: mobile WEB |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
iphone有着丰富的软件资源,到目前为止,仅在appStore上架的软件就达十多万个,而相比之下,有着10年历史的WM系统却不过只有大约 2万个应用程序。 随着ipad和iphone 4的发布,iphone/ipad的app应用开发将再次掀起热潮。下面给大家介绍下iPhone App开发的两种途径及有优缺点,以及其中适合前端人员的iPhone webapp的一些开发工具,最后以无线UED Blog为例子看看iPhone webapp的开发过程。
一、什么是iPhone Web App?
目前有两种方式让你开发iphone上的应用:
  • 编写Objective-C 及 iPhone SDK 直接运行在iphone上的原生应用程序
  • 在基于 WebKit 的safari上利用HTML5, CSS3及Javascript编写你所需要的WebApp网络应用程序

而Apple的官方网站上,除了有iPhone/iPad SDK开发的详细资料外,你也可以像SDK应用程序提交到App Store一样,把你的Web App提交到Apple的Web Apps Site。

当然,两种开发模式, SDK应该是首选的开发方式,毕竟SDK才是apple上的原生程序,而Web App是基于Safari,由于本地文件操作等安全问题在功能上会存在较大的限制。但是Web App也并不是没有优势,它的开发更简洁更快捷,它不需要像后者那样向Apple 注册申请使用SDK及 提交 Apple Store 审核才能上架发布;也不需要重新去学习Objective-C的编程语言,另外iPhone 4对CSS3支持的完善也将加快WebApp在iPhone上的应用。

至于iPhone Web App与普通的Web应用在开发上有什么区别?恩,对于Web工程师来说,最明显的一条就是你不需要去关心你的项目跨浏览器的兼容性,因为你面对的只有iPhone的Safari浏览器。iPhone 上的Safari 支持的标准:

  • HTML 4.01
  • XHTML 1.0
  • CSS 2.1 以及部分 CSS 3
  • JavaScript (ES3)
  • DOM (Level 2)
  • AJAX (XMLHttpRequest)

下面是两个比较出名的iPhone Web App应用:Facebook(http://iphone.facebook.com)以及Gmail

二、iPhone WebApp开发工具:

Dashcode

Dashcode由Apple官方开发的, 可以在iPhone/iPod Touch上用的Web Application而产生的开发工具。原来的DashCode是用来做Widget的,而新版的DashCode增加了iPhone的Web App的支持,而且非常方便。它提供了许多模板并附带了不少用于制作iPhone特效的Javascript。这样一来,制作iPhone原生界面的 Web App可以直接用这些JS提供的效果。不过,DashCode只能运行于Mac哦~:)

Eclipse iPhone插件

Apanta为Eclipse提供的一个iPhone插件,利用它可以生成特定的iPhone项目,让你在开发的同时能直接在PC端看到页面模拟在iPhone上的效果,当然,它支持旋转取景器来预览应用程序在iPhone上横竖两种不同效果。

三.iPhone Web App开发实践:

上面是以无线UED博客做的一个iPhone WebApp的应用,使用了iUI的UI库,iUI是一个是Joe Hewitt(目前就职facebook)开发的一套JS+CSS的UI, 完全模拟iPhone缺省的视觉及交互。

先来看看iUI的样式:它提供了iPhone 友好的交互方式与样式。iUI提供的不仅仅是一个CSS文件,基于这个CSS文件你所建立的页面能够符合iPhone的人机界面指引,并且看起来的效果贴近iPhone原生的应用程序。

至于交互方面: iUI提供一个基于page的换页导航机制。这里的Page不是一个Web页面,而是一个<body />内的顶级DOM元素,每一个这样的DOM元素都可以作为一个page,同一时间上仅显示一个page。页面上的所有链接,要么导致page转 跳,要么导致整个页面转跳。

以下是Dem的一些页面截图:

横屏效果:

除了SDK之外,web应用开发是不是也让你眼前一亮?就像传统的 Flash,Flex,Silverlight,Objective-C 那样,形成自己的生态系统,毕竟Web应用比以上的技术更容易出现在任何设备上。

转自:Tencent WSD Blog

  评论这张
 
阅读(1551)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017