第1章 使HTML5创建移动应用程序.docx

《第1章 使HTML5创建移动应用程序.docx》由会员分享，可在线阅读，更多相关《第1章 使HTML5创建移动应用程序.docx（14页珍藏版）》请在冰点文库上搜索。

第1章使HTML5创建移动应用程序

第1章使用HTML5创建移动应用程序

这个世界已经是移动互联的时代了，每天有成千上万台智能手机被激活。

有越来越多的手机应用提供给消费者，而企业软件产品则是发展缓慢而稳定地运行着。

越来越多的企业深信为了企业的可持续发展，涉及移动开发已是无可避免的了。

假设你是一名网页开发人员，那么也许某一天早晨你的主管会告诉你：

“好好准备一下，我们要开始关注移动平台了！

”；又或者是想开发一个手机应用部署到一个或若干个移动应用市场上。

要选择一个合适的开发平台，必须考虑很多因素，如编程技术水平、原生系统功能、安全性、脱机功能、支持多种平台等。

本章将介绍各种不同的移动开发方式，并介绍为何HTML5能够成为比较受欢迎的多平台移动开发工具。

然后介绍KendoUIMobile框架及移动应用程序开发原理。

本章内容涵盖如下几部分：

❑原生应用、混合应用以及移动网站的比较

❑HTML5与CSS3

❑KendoUI框架——简化了多浏览器应用的开发

❑KendoUIMobile框架

❑HTML5移动Web应用程序设计指南

1.1原生应用、混合应用以及移动网站的比较

读者也许已经清楚了有如下3种方式可用于开发兼容性良好的移动应用，分别是原生、混合以及移动网站。

原生应用由特定平台的编程语言所编写，如IOS平台是ObjectiveC，Android平台是Java等。

原生程序运行速度较快，拥有最高的权限来调用系统的各种API和功能，能提供较好的用户体验。

由于原生应用只为特定的平台量身定制，所以要运行于另一个平台，整个应用系统需要重写一遍才能满足需求。

这会导致代码冗余、加大维护难度、增加开发预算并且需要组建额外的开发团队来（一个团队专攻一种平台）实现同一套业务逻辑。

通常情况下，游戏程序和性能要求高的程序应由原生程序开发。

混合应用则使用纯Web技术（如CSS、HTML和JavaScript）编写，运行于一个使用设备自带的浏览器引擎的容器里。

混合应用程序通常使用诸如PhoneGap等第三方工具来打包，这将有助于应用程序访问特定于设备的API和硬件特性。

诸如IOS、Android和BlackBerry等平台所使用的WebKit渲染引擎将会被显示在设备原生平台的一个Web视图控件当中，该引擎用于显示基于Web的脚本或代码。

由于混合应用是根据本地应用shell所创建的，因而也可以利用应用商店进行分发。

Telerik的Icenium是一个基于云计算的集成了打包、测试、部署混合应用程序等功能的一体化开发平台。

PhoneGap也是一个常用的开发平台，可将Web应用程序打包并部署到多个移动平台中去。

移动网站运行于移动设备上的浏览器当中，通过一个URL来进行访问，可以使用诸如ASP.NET和PHP等服务器端技术开发，也可以部署和更新而不需要通过任何应用商店的审批。

如果移动网站是使用纯Web技术（HTML、CSS、JavaScript）或使用基于其他如jQueryUI、KendoUI及jQueryMobile框架等Web框架开发的情况下，该网站不用执行过多操作就可以打包成为混合程序。

移动网站最主要的缺点是：

设备必须配备浏览引擎才可以访问，这限制了移动网站只适用于基于内容的应用程序。

没有一个解决方案可适用于所有的情况。

选择哪种方法取决于很多的因素，如开发技能、预算、时间表及更新频率。

KendoUIMobile框架是一个用来开发混合程序和移动网站的理想开发平台。

在本书后续的各章节当中，一开始将介绍如何基于KendoUIMobile框架来创建一个MovieTickets（电影票务管理）的应用程序，然后在本书末尾使用PhoneGap将程序打包成可用于Android和iOS平台上的应用程序。

1.2HTML5与CSS3

HTML5、jQuery以及CSS3是前沿Web应用程序开发技术的代名词。

这里所提到的Web内容当中包括了标准的网站或网站应用程序、移动网站或移动应用程序，以及混合应用程序。

尽管本书是介绍KendoUIMobile框架的，但了解移动框架所隐藏的实现技术，即HTML5、jQuery以及CSS3技术也是非常有必要的。

在深入探讨KendoUIMobile框架之前，先来简单了解HTML5和CSS3的相关知识。

这里期望读者已经掌握了jQuery的基本用法，因为本书不会对jQuery的基本知识进行讲解。

1.2.1HTML5——史蒂夫·乔布斯让我一举成名

当史蒂夫·乔布斯宣布iOS设备不支持Flash，而HTML5将是未来发展方向之后，HTML5便一举成名。

HTML5有创建功能强大的图形、丰富的排版、生动的动画以及不需要依赖第三方浏览器插件页面的过渡方式。

HTML5是一种标记语言的规范，由大量的功能特性、技术和API组成，允许开发人员创建丰富的内容和交互体验。

HTML5目前仍在推广阶段，但很多浏览器已经实现其规范当中的很大一部分。

这也给开发人员带来了许多挑战，因为他们在项目开始之前就必须明确不同的浏览器分别支持HTML5的哪些特性。

1.2.2HTML5的主要功能特性

尽管HTML5的规范还不够完整，但是各主流的浏览器已经支持大部分HTML5的新特性。

下面是当前HTML5的一些主要特性：

❑支持离线浏览Web应用的应用程序缓存

❑地理定位（Geolocation）

❑服务器发送事件

❑音频及视频

❑IndexedDB

❑WebSocketAPI

❑画布API

❑MathML

❑Web存储

❑跨文档消息传递

❑微数据（Microdata）

❑Web处理线程（WebWorkers，Web平台上的多线程处理功能）

❑可拖放

❑可伸缩矢量图形（SVG）

❑XMLHttpRequestLevel2

技巧：

是Google旗下一个非常好的HTML5参考网站，提供了丰富的教程、文章和其他学习资源。

1.2.3HTML5规范相关的组织

目前有3个不同的组织在推动着HTML5标准的制定，分别是W3C（WorldWideWebConsortium，万维网联盟）、WHATWG（WebHypertextApplicationTechnologyWorkingGroup，Web超文本应用技术工作组）以及IETF（InternetEngineeringTaskForce，互联网工程任务组）。

因此目前分别由W3C以及WHATWG来维护两套不同版本的HTML5规范，这些内容可参见http:

//www.w3.org/TR/html5和http:

//whatwg.org/html。

IETF负责制定HTTP等互联网协议以及HTML5下WebSocketAPI等相关的处理协议。

两套HTML5标准的不同并不值得关注，因为WHATWG标准被认为是一个“living”标准（这套标准将会不断地进行更新和变化，不过版本将不再进行更新）。

另一面，W3C则计划建立一个明确的标准，这套标准被WHATWG视为是其“living”标准的“快照”。

WHATWG专注于HTML的规范化描述及相关技术（即不断地修正标准中的错误、添加新的功能、追踪反馈）。

而W3C则专注于制定一个明确版本的HTML5标准。

1.2.4HTML5页面样例

下面编写一个HTML5页面样例，其页面代码如下所示：

DOCTYPEHTML>

提示：

下载本书样例代码

用户可以在Packt网站http:

//www.PacktP下载以用户本人账号所购买的书籍中的实例代码。

如果是在别处购买了本书，可以访问http:

//www.PacktPsupport进行注册，之后代码文件将会直接发送至注册邮箱中。

1．DOCTYPE声明及字符编码

HTML5的DOCTYPE声明非常简单：

DOCTYPEhtml>。

在每个HTML5页面的最顶部需要添加这一行代码。

这种新型的DOCTYPE声明十分简洁；相比之下，HTML4版本当中的声明则显得冗长并难以记住，HTML4的声明如下所示：

DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"

"http:

//www.w3.org/TR/html4/strict.dtd">

DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Frameset//EN"

"http:

//www.w3.org/TR/html4/frameset.dtd">

所有最新版本的浏览器根据DOCTYPE声明将显示内容切换成相应的标准模式。

与DOCTYPE声明类似，HTML5下字符集的声明也相应地进行了简化。

如下面的代码所示：

Meta元素当中的metacharset属性被用于替代HTML4中的相应的指令。

HTML4中典型的字符编码声明如下：

2．HTML5当中的一些新标签

在前面的代码当中已经看到一些新的HTML5的语义化标签。

这些语义化的标签清晰地向开发人员和浏览器阐述了其意义或目的。

HTML4下的

HTML5从数十亿的网页中，将开发人员经常使用的ID和CSS类名提取成一个HTML5规范子集，增加了很多语义化的标签，如