【转载】Hybrid App:借助HTML5、JavaScript和CSS3开发

标签: HTML5 技术博文 HTML5最新动态 | 发表时间:2012-05-30 13:32 | 作者:HTML5研究小组
出处:http://www.mhtml5.com
早在2011年10月9日Sam Gentile就在在开发Hybrid App,彼时他就写过这方面的一篇题目是《视口元标签和使用HTML5/CSS3/jQuery来构建移动界面》的博文,可以说Sam Gentile最早研究Hybrid App的开发者。

AD:

 

【51CTO独家译文】本文为开发者Sam Gentile的一篇博文《Hybrid App:借助HTML5、JavaScript和CSS3开发》。

以下为全部译文:

我(51CTO注:Sam Gentile)曾提过两个关键概念,它们对于用这些技术来开发移动应用程序而言极为重要:

  1. 视图元标签(Viewport Meta Tag)
  2. CSS媒体查询(CSS Media Queries)

虽然我介绍了这两个重要的基本概念,但当时还处在边学习边摸索的阶段,所以现在觉得那时给出的上下文和解释不够(我举了一个媒体查询的例子,却没有定义媒体查询、也没有交待媒体查询的用途!)本文试图弥补一些缺憾。

我不仅认为这些技术代表着Web开发的现在和未来,还代表着从事跨浏览器、跨平台移动设备用户界面开发的一种方式。是的,你没有听错。这些技术头一次让人们有可能从事真正的跨浏览器、跨平台移动Web开发。这是一些背景。

上面这番话没错,但主要还是看你在构建哪种类型的应用程序。如今大家之所以对HTML5、CSS3及相关的JavaScript API抱有如此高涨的兴趣,原因完全在于,大家不想构建“原生”的移动应用程序,至少在企业领域不想这么做。原生移动应用程序需要你为每一种平台学习不同的编程语言和集成开发环境(IDE)。相反,我们大多数人都想重复运用我们在构建“Web应用程序”方面已经掌握的现有技能,可以重复使用一些代码。这属于“Hybrid”或“纯粹”的移动应用程序这个类别。如果你不需要访问设备的原生功能,就可以只用HTML5和CSS3来构建一个“纯粹”的移动Web应用程序。但是这种情况并不多见。这种类型的应用程序在充分利用那些设备上的原生传感器和API方面本领有限。虽然一些功能(如地理位置)提供给了移动浏览器,但还是有许多功能并没有提供,比如方向感应器或视频。不过好消息是,大行其道的Web编程让HTML5、JavaScript和CSS能够在某种程度上“走原生道路”。PhoneGap和Titanium Appcelerator等流行的框架让你能够使用HTML5和JavaScript,为iOS、Android和Windows Phone开发原生应用程序,另外还可以访问设备。因而,“ Hybrid App”随之出现。

我谈论了视口和媒体查询,但是基于所谓的自适应或响应式Web应用程序这一上下文,这类应用程序可以随不同的设备而按比例增加或缩减。最近出现了几个变化,让 Hybrid App开发成为了可能:

  • 移动标签让移动浏览器不要按比例缩减你的站点
  • 新标准大大简化了构建可在多种移动浏览器中正常运行的站点这一任务
  • 新标准使得构建的站点运行起来更像Web应用程序。

这些标准包括HTML5标准系列和CSS3。我在此探讨HTML5。

我之前谈论了视口元标签:那么,什么是视口元标签呢?视口元标签由苹果Mobile Safari引入,目的是为了让Web开发者可以控制视口的比例和大小。现在它成了一项普遍的标准。除非你另有要求,否则iPhone上的Safari会假设你的页面宽度是980px。如果你想为iPhone和尺寸比较小的BlackBerry设备进行移动Web开发,就得让Mobile Safari(或面向BlackBerry的Ripple)知道这一点,为此需要把视图元标签添加到HTML文档中根据设备宽度来设定的头部分:

    
  1. <meta name="viewport" content="user-scalable=no, width=device-width" />

我当时举了一个媒体查询的例子,但未作深入讨论!

    
  1. <link rel="stylesheet" type="text/css" href="iphone.css"
  2. media="only screen and (max-width: 480px)" />

媒体查询(CSS3的新增特性)功能很强大,我鼓励各位读一下Dan Wahlin所写的 这篇博文,详细介绍了媒体查询;不过大体意思是,它们是一种可以评价为真或假的CSS表达式。如果是真,就会运用表达式的CSS选择器和属性。如果与CSS级联规则结合使用,它让你能够响应不同的分辨率、方向或者分辨率或方向的变化。这个规则实际上是说“对设备最大宽度是480px的移动设备来说,就运用iPhone样式表。”

同样,这篇博文只是触及了这整个方面的皮毛,但愿弥补了一些缺憾,并且阐述了视口和媒体查询,这是用HTML5、JavaScript和CSS3来构建 Hybrid App的两个基本概念。我打算以后更深入地介绍这些内容。

原文地址:http://samgentile.com/Web/html5-css3-jquery/hybrid-mobile-applications-with-html5-javascript-and-css3/

 

相关 [hybrid app html5] 推荐:

【转载】Hybrid App:借助HTML5、JavaScript和CSS3开发

- - HTML5研究小组
早在2011年10月9日Sam Gentile就在在开发Hybrid App,彼时他就写过这方面的一篇题目是《视口元标签和使用HTML5/CSS3/jQuery来构建移动界面》的博文,可以说Sam Gentile最早研究Hybrid App的开发者. 【51CTO独家译文】本文为开发者Sam Gentile的一篇博文《Hybrid App:借助HTML5、JavaScript和CSS3开发》.

Hybrid APP架构设计思路

- - SegmentFault 最新的文章
关于Hybrid模式开发app的好处,网络上已有很多文章阐述了,这里不展开. 本文将从以下几个方面阐述Hybrid app架构设计的一些经验和思考. 原文及讨论请到 github issue. 作为一种跨语言开发模式,通讯层是Hybrid架构首先应该考虑和设计的,往后所有的逻辑都是基于通讯层展开.

论Web App、Hybrid App、Native App设计差异

- - 百度MUX
目前主流应用程序大体分为三类:Web App、Hybrid App、 Native App. 一、Web App、Hybrid App、Native App 纵向对比. 首先,我们来看看什么是 Web App、Hybrid App、 Native App. Web App 指采用Html5语言写出的App,不需要下载安装.

Hybrid APP开发者一定不要错过的框架和工具

- - 方糖气球
最近开始给 快简历的移动版本做技术选型,发现了很多好玩的东西,写出来给大家分享下. 我是hybrid app的忠实粉丝和大力倡导者,从 新浪移动云开始就不断的寻找能帮助Web程序员开发出漂亮又好用的UI层框架. 在历经了jqmobile、sencha touch等框架后,一直没能找到一个真正符合我的想法的框架:它应该为hybrid app设计、组件化结构、UI简洁而优美.

HTML5 vs Mobile App 谁将是主流

- 小趴 八足趴 八足 ramener - 互联网的那点事...
HTML5的出现让移动平台的竞争由系统平台转向了浏览器之间:移动端的IE、Chrome、FireFox、Safari,亦或是新出现的浏览器,谁能达到在移动端对HTML5更好的支持,谁就能在以后的移动应用领域占据更多的市场. 有了HTML5以后怎么装APP. 更灵活、更方便的app使用及安装方式将成为HTML5在移动平台上大放异彩的保障之一.

如何用HTML5制作iPhone App

- - HTML5研究小组
所有的object-c的开发者都有一段在iPhone上写程序的痛苦经历. 你曾经想找一两篇iPhone开发的初级教程,但是它的C语言太难学了. 我不想说一些让你放弃的消极的话:你可以放弃它,这意味着这些时间你可以做些别的. 你可以作一个nativeapp 和别的app 一样,并且,很大程度上,它看起来就是一个完美的仿冒的应用程序.

Nokia Maps 正式推出 HTML5 web app 版

- - UNWIRE.HK 流動科技生活
看來近年寫程式的趨勢,已由以往的 native app,開始轉向採用 web app,因為後者始終不受平台限制,只要編寫一個支援 HTML-5 格式的 web app,就可以在 iPhone、iPad、Android 手機、平板、Windows Phone 手機、甚至在 Blackberry 平台的裝置上使用,對於研發程式的公司來說,確實是最具經濟效益的方法.

基于HTML5 的网页APP时代即将到来?

- Feng - Tech2IPO
去年的这个时候我发博文表示我很看好 HTML5 移动网页APP的前景. 网页上的APP时代超过了我之前的预想. Kindle 已经可以再浏览器中使用了,下面是在safari 上我的图书馆:. 和Kindle  APP一样,我也可以在线下载后阅读. 我的朋友Etsy也在 Android推出了她的 HTML5 主题页面,这是在我手机上的页面效果:.

HTML5将成“香饽饽” APP要何去何从

- - HTML5研究小组
“App刷票”,近来移动互联网领域一个炙手可热的新名词. 意指由专门的团队在苹果AppStore这类软件商店中,通过使用大量账户下载和评论某款应用,使其排名迅速攀升. “App刷票”背后则是移动互联网市场竞争渐趋白热化. 据统计,目前国内iOS和Android平台上的开发者达20万,但整个市场收入才15亿元人民币左右,即平均年收入7500元.

网易摄影推出html5开发的iPad APP

- - HTML5研究小组
网易摄影精选是网易摄影(http://pp.163.com/)出品的第一款基于html5开发的ipad应用,聚焦于用户浏览美图时的体验,崇尚极简主义的设计,一切皆为用户看到自己喜欢的高清美图而服务. 没有复杂的功能,用户不需要注册、填写任何信息就能使用. 网易摄影精选采用目前比较流行的混搭模式(native+web)开发,native层选用phonegap开源框架用来提供web层对设备功能的支持,web层基于网易自主研发的前端开发框架用来实现页面布局及业务逻辑,应用对部分HTML5/CSS3技术做了实践,整个应用大小只有500K左右.