HTML五、WebKit与移动应用开发

1、        前言

微软之因此可以在过去几十年间称霸IT业，主要是凭借一项没法超越的优点：Windows操做系统，目前快速发展的移动设备成为IT业关注的重点，有可能移动互联网应用将会是IT业下一个高速增加点（也多是泡沫），犹如2001年的互联网通常。而在移动操做系统上，如今看来微软的Windows Mobile操做系统彻底不值一提，就算是其最新的WP7也再也不受人关注，如今你们的目光都集中在两家重量级公司Google和Apple出品的Android和iOS移动操做系统上，其余的什么MeeGo、RIM、Symbian通通都只能让路，网上充斥的都是一些“我该买Iphone4仍是HTC?”、“我该学Android开发仍是iOS开发呢？”这些类二选一问题，可见Android和iOS的风靡程度。

移动操做系统的风靡得益于这几年来移动互联网设备的迅猛发展，从智能手机到平板电脑，CPU从单核到双核以至于四核，目前移动互联网设备的特色，主要有如下特色

1、屏幕大，几乎就是整个机身

2、支持手指触摸以及多点触摸

3、没有输入键盘，取而代之的是屏幕虚拟键盘

4、支持高速无线链接(Wifi 54Mbit/s)

5、支持EDGE网络低速（220kbit/s）链接

6、支持“永远在线”的3G网络链接（384kbit/s-数Mbit/s）

7、支持位置定位(GPRS),如今几乎是必须的

8、大内存、高速的CPU设置独立的GPU

        除了强大的硬件特性，之因此移动智能设备可以风靡全球，还在于它庞大的软件应用，2007年apple发布了第一款iphone手机，起初apple是不欢迎第三方应用开发人员开发iphone下的应用软件的(apple安抚那些超级崇拜iphone的开发人员的办法是：容许他们开发基于Web的应用)，直到2008年，apple提供了针对Iphone的SDK,并正式开放了App Store应用市场，这种创新之举不只给第三方开发者带来了巨大利益，同时Apple的智能设备事业也进入了高速、良性的发展的轨道，App Store能够说的上是智能设备和移动应用的里程碑，使得第三方软件的提供者的积极性空前高涨，Google在发布Android智能设备后的第一件事就是开放了Android Market与Apple相抗衡。就是这样，目前Apple和Google设备上的应用总和已经数以百万计了。

        目前，在AppStore和Android Market上的应用都是基于两大公司提供给第三方应用开发人员的SDK进行开发的，Apple提供的是基于Objective-C语言的iOS SDK开发，Android提供的基于JAVA语言的Andorid SDK开发。二者都可以充分的发挥各自硬件的最大特性，从开发角度而言，Objective-C可能对不少开发人员都很陌生，不少开发人员都是从头开始学习的，我的认为Objective-C自己虽然是基于C的扩展，可是其面向对象的设计思想，学习起来仍是比较容易上手的，而Android基于Java语言，可让不少Java开发人员快速转入到Android SDK的开发，省去了很多学习成本，而且提升了开发效率。总的比较起来，我我的认为iOS SDK更加成熟，由于iOS SDK是Apple应用了多年的系统，有坚实的根基，并且基于C的运行效率比JAVA的运行效率要高不少，Objective-C不支持自动回收，大大的节省了系统资源，而且很是省电，并且iOS系统的多后台运行机制，让只有256M的RAM的设备也可以运行的很是流畅，另外，Apple独此一家的硬件规格，让开发人员再也不为设备的兼容性考虑太多问题。而Android基于Java虚拟机机制，对系统的要求比较高，并且众多厂家推出的不一样的屏幕分辨率的硬件，让开发人员不得不去考虑怎么让UI适应不一样的分辨率。

2、        WEB开发

        除了基于SDK开发的方式，移动智能设备还支持Web开发方式（iphone iOS上的App Store就是一个典型的WebApp），由于移动智能设备的最基础的特色就是移动互联网的应用，iOS和Android都内置了基于WebKit内核的浏览器，iOS中浏览器是Safari Mobile，Android中的浏览器是移动版的Google浏览器，两种浏览器都支持各类标准的Web技术，好比HTML、CSS、JavaScript、PHP、Ruby On Rails和Python。这里不得不提的是WebKit内核，WebKit是一个开源的浏览器引擎，与之对应的有IE的Trident引擎，以及FireFox的Gecko引擎，WebKit内核的浏览器在移动设备上应用很是普遍，好比Andorid、iOS、NOKIA S60、黑莓上的浏览器都是基于WebKit。

3、        WebKit

        WebKit在Apple的推进下，对HTML5和CSS3标准支持的很是好，能够浏览http://developer.apple.com/safaridemos/ 体验一下WebKit下运行HTML5的效果，能够在Google浏览器或者Apple Safari浏览器下进行浏览，两种浏览器下的效果几乎是一致的。

        WebKit在运用到Mac Os上的Safari以后，Webkit很快被普遍地移植到其余系统平台：

一、Apple iOS

二、Android Google浏览器

三、Nokia S60 的Web Browser for S60

四、Web OS，Palm推出的第一款基于WebKit的操做系统

五、Linux ，Linux下的Midori，Google Chrome，GNOME的Epiphany、KDE的Konqueror，Arora都是如今Linux系统下主要的Webkit内核浏览器

六、Windows下的不少浏览器，safari for windows，google chrome，搜狗双核浏览器

     做为浏览器的内核，Webkit做用就是输入一个HTML文档，而后输出一个WEB页面，WebKit由三部分组成，WebCore, JavaSript Core和WebKit，其中，WebCore是Webkit的核心部分，它实现了对文档的模型化，包括了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可以识别7种DOM触摸事件:

l  touchstart 单手指触摸屏幕.

l  touchmove 单手指划过

l  touchend 单手指离开

l  touchcancel 系统取消触摸

l  gesturestart 两个手指触摸

l  gesturechange 多个手指开始移动

l  gestureend 只剩下一个或更少的手指在屏幕上

支持方向改变的事件，好比当设备横屏和竖屏的事件，经过orientationchange事件中判断window.orientation的值来判断是横屏仍是竖屏。

CSS 的转换和动画标记，还包含一个基于SQLite的客户端数据库。除此以外，WebKit还支持特殊标记的CSS样式表标记，好比：

4、        HTML5

WebKit的另一个最大的优点就是支持HTML5，HTML5除了支持原来的DOM接口，另外增长了不少API，主要有如下几个方面的加强：

l  Canvas

Web以前有四种绘图方式：Adobe Flash，SVG和VML以及后来的Silverlight，而其中iOS是不支持Adobe Flash和SVG的，更不要说Silverlight了，之全部这样，是由于Apple本身有了Canvas。Html5 Canvas几乎等同于iOS基层图形库Quartz 2D的所有功能，好比：图形绘制、路径绘制、二维变形、像素级绘图、动画效果等等。Canvas绘图是经过DOM获取HTML中的Canvas节点，并调用渲染上下文（Rendering Context）经过javascript进行绘制，目前有10种以上的开源的Html5图表js库。下图是图表js在Html页面上的绘制效果：

l  多媒体

Html5经过Audio和Video标签提供了在浏览器中不使用插件播放视频和音频的特性。

l  本地存储

为了知足不一样的存储需求，HTML5 提供了 DOM Storage 和 Web SQL Database（SQLite）两种存储机制。前者提供了易用的 key/value 对存储方式，然后者提供了基本的关系数据库存储功能离线工做。

l  离线应用

在 HTML5 中，提供了两种检测当前网络是否在线的方式，浏览器在在线状态时，把这些文件资源缓存到本地。当用户离线访问应用程序时，这些资源文件会自动加载，从而让用户正常使用。HTML5 中，经过 cache manifest 文件指明须要缓存的资源，并支持自动和手动两种缓存更新方式。

l  使用地理位置

Html5能够调用API从服务器取回位置信息,Google也提供了对应的API。

5、        Html5移动设备应用框架

有了WebKit和HTML5的支持，不少Web开发的厂商开始转向基于移动设备的Web应用框架，好比，拥有最有名得开源js库的组织-ExtJs开始推出基于javascript+CSS3+HTML5的移动设备应用框架-Sencha(Sencha日语的意思是煎茶),Sencha 是由 ExtJS、jQTouch 以及 Raphael 三个项目合并而成的一个开源项目，此举是ExtJS为了应对HTML5等新趋势，增强丰富图形和触摸屏功能的重要举措。

其中Sencha Touch的目的是让开发人员在iOS或Android等触摸屏设备上开发出相似于SDK本地应用的Web应用程序出来，先来一个Sencha支持设备的全家福，从左到右分别是Android、黑莓、iphone4和windows 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的本地程序，可是其中仍然是基于Html5的WebApp，这个壳子主要做用就是访问底层的硬件接口。这种框架一般提供了专门的开发环境和编译环境。

开发流程分为3步：

一、基于Html5+javascript+CSS3结合框架提供的一些接口构建程序；

二、经过框架包装成能够访问本地Api的本地程序；

三、将不一样的编译结果发布到不一样的平台上；

6、        结束语

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

SDK方式的优势：

1、能够充分发挥设备硬件和操做系统的特性

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

3、安全性高

SDK方式的缺点：

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

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

3、调试、发布不方便

WebApp方式的优势：

1、开发效率高，不须要专门的IDE

2、通用性、灵活性高，能够跨平台，UI界面一致

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

WebApp方式的缺点：

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

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

因此，排除必需要发布在App Store或Android Market的应用之外，根据实际应用场景，考虑选用不一样的开发方式。也许随着HTML5的逐渐成熟，对于通常的Web数据应用，HTML5真的可以一统江湖。