文档章节

HTML5、WebKit与移动应用开发

京宝
 京宝
发布于 2012/05/30 03:06
字数 3405
阅读 626
收藏 2

一、        前言

微软之所以能够在过去几十年间称霸IT业,主要是凭借一项无法超越的优势:Windows操作系统,目前快速发展的移动设备成为IT业关注的重点,有可能移动互联网应用将会是IT业下一个高速增长点(也可能是泡沫),犹如2001年的互联网一般。而在移动操作系统上,现在看来微软的Windows Mobile操作系统完全不值一提,就算是其最新的WP7也不再受人关注,现在大家的目光都集中在两家重量级公司GoogleApple出品的AndroidiOS移动操作系统上,其他的什么MeeGoRIMSymbian统统都只能让路,网上充斥的都是一些“我该买Iphone4还是HTC?”、“我该学Android开发还是iOS开发呢?”这些类二选一问题,可见AndroidiOS的风靡程度。
移动操作系统的风靡得益于这几年来移动互联网设备的迅猛发展,从智能手机到平板电脑,CPU从单核到双核以致于四核,目前移动互联网设备的特点,主要有以下特点
1、屏幕大,几乎就是整个机身
2、支持手指触摸以及多点触摸
3、没有输入键盘,取而代之的是屏幕虚拟键盘
4、支持高速无线连接(Wifi 54Mbit/s)
5、支持EDGE网络低速(220kbit/s)连接
6、支持“永远在线”的3G网络连接(384kbit/s-Mbit/s
7、支持位置定位(GPRS),现在几乎是必须的
8、大内存、高速的CPU设置独立的GPU
        除了强大的硬件特性,之所以移动智能设备能够风靡全球,还在于它庞大的软件应用,2007apple发布了第一款iphone手机,起初apple是不欢迎第三方应用开发人员开发iphone下的应用软件的(apple安抚那些超级崇拜iphone的开发人员的办法是:允许他们开发基于Web的应用),直到2008年,apple提供了针对IphoneSDK,并正式开放了App Store应用市场,这种创新之举不仅给第三方开发者带来了巨大利益,同时Apple的智能设备事业也进入了高速、良性的发展的轨道,App Store可以说的上是智能设备和移动应用的里程碑,使得第三方软件的提供者的积极性空前高涨,Google在发布Android智能设备后的第一件事就是开放了Android MarketApple相抗衡。就是这样,目前AppleGoogle设备上的应用总和已经数以百万计了。
        目前,在AppStoreAndroid Market上的应用都是基于两大公司提供给第三方应用开发人员的SDK进行开发的,Apple提供的是基于Objective-C语言的iOS SDK开发,Android提供的基于JAVA语言的Andorid SDK开发。两者都能够充分的发挥各自硬件的最大特性,从开发角度而言,Objective-C可能对很多开发人员都很陌生,很多开发人员都是从头开始学习的,个人认为Objective-C本身虽然是基于C的扩展,但是其面向对象的设计思想,学习起来还是比较容易上手的,而Android基于Java语言,可以让很多Java开发人员快速转入到Android SDK的开发,省去了不少学习成本,并且提高了开发效率。总的比较起来,我个人认为iOS SDK更加成熟,因为iOS SDKApple应用了多年的系统,有坚实的根基,而且基于C的运行效率比JAVA的运行效率要高很多,Objective-C不支持自动回收,大大的节省了系统资源,并且非常省电,而且iOS系统的多后台运行机制,让只有256MRAM的设备也能够运行的非常流畅,另外,Apple独此一家的硬件规格,让开发人员不再为设备的兼容性考虑太多问题。而Android基于Java虚拟机机制,对系统的要求比较高,而且众多厂家推出的不同的屏幕分辨率的硬件,让开发人员不得不去考虑怎么让UI适应不同的分辨率。

二、        WEB开发

        除了基于SDK开发的方式,移动智能设备还支持Web开发方式(iphone iOS上的App Store就是一个典型的WebApp),因为移动智能设备的最基础的特点就是移动互联网的应用,iOSAndroid都内置了基于WebKit内核的浏览器,iOS中浏览器是Safari MobileAndroid中的浏览器是移动版的Google浏览器,两种浏览器都支持各种标准的Web技术,比如HTMLCSSJavaScriptPHPRuby On RailsPython。这里不得不提的是WebKit内核,WebKit是一个开源的浏览器引擎,与之对应的有IETrident引擎,以及FireFoxGecko引擎,WebKit内核的浏览器在移动设备上应用非常广泛,比如AndoridiOSNOKIA S60、黑莓上的浏览器都是基于WebKit

三、        WebKit

        WebKitApple的推动下,对HTML5CSS3标准支持的非常好,可以浏览http://developer.apple.com/safaridemos/ 体验一下WebKit下运行HTML5的效果,可以在Google浏览器或者Apple Safari浏览器下进行浏览,两种浏览器下的效果几乎是一致的。
        WebKit在运用到Mac Os上的Safari之后,Webkit很快被广泛地移植到其他系统平台:
1、Apple iOS
2、Android Google浏览器
3、Nokia S60 Web Browser for S60
4、Web OSPalm推出的第一款基于WebKit的操作系统
5、Linux Linux下的MidoriGoogle ChromeGNOMEEpiphanyKDEKonquerorArora都是现在Linux系统下主要的Webkit内核浏览器
6、Windows下的很多浏览器,safari for windowsgoogle chrome,搜狗双核浏览器
     作为浏览器的内核,Webkit作用就是输入一个HTML文档,然后输出一个WEB页面,WebKit由三部分组成,WebCore, JavaSript CoreWebKit,其中,WebCoreWebkit的核心部分,它实现了对文档的模型化,包括了CSS, DOM, Render等的实现, JavaSript Core是对JavaSript支持的实现。而Webkit部分包含了很多不同平台对Webkit封装的实现。
     另外,WebKit的一个优势是开始支持移动设备页面,WebKit通过一些特殊的metatag,由设备的浏览器支持,比如:
l  自动适应设备的屏幕 
<meta name=”viewport” content=”width=device-width”/>
l  设置缩放
<meta name="viewport" content="width=device-width, initial-scale=1.0 
user-scalable=yes" /> 自动设置缩放的倍数以及是否允许缩放
WebKit在移动设置上还能够识别手势和触摸,这些都是HTML5目前还没有实现的功能,比如,WebKit能够识别7DOM触摸事件:
l  touchstart 单手指触摸屏幕.
l  touchmove 单手指划过
l  touchend 单手指离开
l  touchcancel 系统取消触摸
l  gesturestart 两个手指触摸
l  gesturechange 多个手指开始移动
l  gestureend 只剩下一个或更少的手指在屏幕上
支持方向改变的事件,比如当设备横屏和竖屏的事件,通过orientationchange事件中判断window.orientation的值来判断是横屏还是竖屏。
除此之外,WebKit还支持特殊标记的CSS样式表标记,比如:CSS 的转换和动画标记,还包含一个基于SQLite的客户端数据库。
 

四、        HTML5

WebKit的另外一个最大的优势就是支持HTML5HTML5除了支持原来的DOM接口,另外增加了很多API,主要有以下几个方面的增强:
l  Canvas
Web之前有四种绘图方式:Adobe FlashSVGVML以及后来的Silverlight,而其中iOS是不支持Adobe FlashSVG的,更不要说Silverlight了,之所有这样,是因为Apple自己有了CanvasHtml5 Canvas几乎等同于iOS基层图形库Quartz 2D的全部功能,比如:图形绘制、路径绘制、二维变形、像素级绘图、动画效果等等。Canvas绘图是通过DOM获取HTML中的Canvas节点,并调用渲染上下文(Rendering Context)通过javascript进行绘制,目前有10种以上的开源的Html5图表js库。下图是图表jsHtml页面上的绘制效果:
l  多媒体
Html5通过AudioVideo标签提供了在浏览器中不使用插件播放视频和音频的特性。
l  本地存储
为了满足不同的存储需求,HTML5 提供了 DOM Storage  Web SQL DatabaseSQLite)两种存储机制。前者提供了易用的 key/value 对存储方式,而后者提供了基本的关系数据库存储功能离线工作。
l  离线应用
 HTML5 中,提供了两种检测当前网络是否在线的方式,浏览器在在线状态时,把这些文件资源缓存到本地。当用户离线访问应用程序时,这些资源文件会自动加载,从而让用户正常使用。HTML5 中,通过 cache manifest 文件指明需要缓存的资源,并支持自动和手动两种缓存更新方式。
l  使用地理位置
Html5可以调用API从服务器取回位置信息,Google也提供了对应的API

五、        Html5移动设备应用框架

有了WebKitHTML5的支持,很多Web开发的厂商开始转向基于移动设备的Web应用框架,比如,拥有最有名得开源js库的组织-ExtJs开始推出基于javascript+CSS3+HTML5的移动设备应用框架-Sencha(Sencha日语的意思是煎茶),Sencha 是由 ExtJSjQTouch 以及 Raphael 三个项目合并而成的一个开源项目,此举是ExtJS为了应对HTML5等新趋势,加强丰富图形和触摸屏功能的重要举措。
其中Sencha Touch的目的是让开发人员在iOSAndroid等触摸屏设备上开发出类似于SDK本地应用的Web应用程序出来,先来一个Sencha支持设备的全家福,从左到右分别是Android、黑莓、iphone4windows mobile
Sencha Touch有如下特性:
  • HTML5离线存储
  • HTML5地理定位
  • Sencha Touch icon设置
  • JSONP代理
  • YQL数据代理
  • 重力感应滚动
  • 滚动Touch事件
  • 遮罩弹出层
  • 为移动优化的表单元素
  • CSS3 Gradients
  • CSS3 Transitions
  • Multi-Card布局
  • Tab组件
  • 滚动列表视图
  • 其它……

具体大家可以用自己的移动设备去官网查看演示程序

http://dev.sencha.com/deploy/touch/examples/kitchensink/
Sencha Touch的界面是模拟的iphone iOS的界面和控件,比如按钮、拨盘、列表框,以及一些触摸的过渡效果,让Web程序看起来就像是本地应用一样,而且这些控件的样式都是集中在Sencha Touch框架的sencha-touch.css文件和sencha-touch.js文件中,开发者只需要在一个空白的html文件中引用这两个文件,直接可以写客户端独立application js放自己的实现逻辑,或者通过动态语言的由Web服务器返回Html结果。Sencha touch已经将一些常用的空间封装成js对象,界面只需要填充值就行了。
        Sencha Touch是纯正的WebApp,是WebApp就注定了硬件设备的一些特性,比如不支持加速计、蓝牙、地址薄、GPS、照相机。
        为了充分利用硬件的特性,还有另外一种html5的移动应用框架,它通过javascript封装接口访问移动设备底层的API,比如GPS定位、重力感应、短信等,以web app的形式开发业务逻辑,并通过WebView control作为运行时环境,使其作为native app部署到不同移动OS上。通俗一点说就是,壳子是SDK的本地程序,但是其中仍然是基于Html5WebApp,这个壳子主要作用就是访问底层的硬件接口。这种框架通常提供了专门的开发环境和编译环境。
开发流程分为3步:
1、基于Html5+javascript+CSS3结合框架提供的一些接口构建程序;
2、通过框架包装成可以访问本地Api的本地程序;
3、将不同的编译结果发布到不同的平台上;

六、        结束语

针对移动智能设备的应用开发,SDK方式和WebApp的方式都有其可取之处,也有其弊端,我总结如下几点:

SDK方式的优点:

1、可以充分发挥设备硬件和操作系统的特性

2、运行效率高,不受网络速度的限制

3、安全性高

SDK方式的缺点:

1、开发效率低,需要掌握专门的语言和IDE

2、通用性不高,不能跨平台

3、调试、发布不方便

WebApp方式的优点:

1、开发效率高,不需要专门的IDE

2、通用性、灵活性高,可以跨平台,UI界面一致

3、调试、发布方便,一次编写,到处运行

WebApp方式的缺点:

1、运行效率受网络速度的限制

2、不能发挥设备硬件和操作系统的特性

所以,排除必须要发布在App StoreAndroid Market的应用以外,根据实际应用场景,考虑选用不同的开发方式。也许随着HTML5的逐渐成熟,对于一般的Web数据应用,HTML5真的能够一统江湖。

© 著作权归作者所有

上一篇: 设计模式本身
京宝

京宝

粉丝 59
博文 169
码字总数 97582
作品 1
朝阳
CTO(技术副总裁)
私信 提问
Web浏览器引擎 - WebKit

WebKit是开源的Web浏览器引擎,苹果的Safari、谷歌的Chrome浏览器都是基于这个框架来开发的。WebKit 还支持移动设备和手机,包括iPhone和Android手机都是使用WebKit做为浏览器的核心。 WebK...

匿名
2008/09/22
115K
7
法国开源软件公司 Nexedi 起诉苹果扼杀 HTML5

据法国媒体Challenges报道,10月6日法国开源软件公司Nexedi向法国巴黎商业法庭提起诉讼,状告苹果公司有违公平原则,在iOS平台上对HTML5缺乏必要支持(例如强制第三方浏览器使用Safari浏览器...

凝小紫
2016/10/08
5.3K
36
好程序员教程之配置H5的滚动条样式示例代码

配置H5的滚动条样式示例代码有不少的小伙伴在网上寻找,本篇文章好程序员小编和大家分享一下配置H5的滚动条样式示例代码,希望对HTML5开发感兴趣的小伙伴有所帮助,下面我们一块来看一下吧:...

好程序员IT
03/22
8
0
WebApp与Native App的区别

WebApp与Native App的区别 Native App: 1、开发成本非常大。一般使用的开发语言为JAVA、C++、Objective-C。 2、更新体验较差、同时也比较麻烦。每一次发布新的版本,都需要做版本打包,且需...

一真的鱼
2018/07/03
79
1
Webkit 很酷,但并非一统天下者

分裂严重的移动市场 长期以来,如同瘟疫一般感染移动产业的分裂现象越来越严重,这一事实已不是秘密。 根据来自Gartner的最新数据,Symbian 仍然是第一大移动设备操作系统,但是仅仅占据了百...

红薯
2010/05/29
2.8K
4

没有更多内容

加载失败,请刷新页面

加载更多

栈-链式(c/c++实现)

上次说“栈是在线性表演变而来的,线性表很自由,想往哪里插数据就往哪里插数据,想删哪数据就删哪数据...。但给线性表一些限制呢,就没那么自由了,把线性表的三边封起来就变成了栈,栈只能...

白客C
7分钟前
3
0
Mybatis Plus service

/** * @author beth * @data 2019-10-20 23:34 */@RunWith(SpringRunner.class)@SpringBootTestpublic class ServiceTest { @Autowired private IUserInfoService iUserInfoS......

一个yuanbeth
15分钟前
2
0
php7-internal 7 zval的操作

## 7.7 zval的操作 扩展中经常会用到各种类型的zval,PHP提供了很多宏用于不同类型zval的操作,尽管我们也可以自己操作zval,但这并不是一个好习惯,因为zval有很多其它用途的标识,如果自己...

冻结not
昨天
5
0
溢出\越界\泄漏

溢出:栈溢出是指函数中的局部变量造成的溢出,递归次数太多也会栈溢出 一是分配的大小超过栈的最大值,char a[99999999999999999]; 二是分配的大小没有超过最大值,但是接收的buff比新buff小...

SibylY
昨天
5
0
导览Linux系统文件系统类型

虽然对于普通用户来说可能并不明显,但在过去十年左右的时间里,Linux 文件系统已经发生了显著的变化,这使它们能够更好对抗损坏和性能问题。 如今大多数 Linux 系统使用名为 ext4 的文件系统...

老孟的Linux私房菜
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部