一、使用HTML5构建移动应用

世界正在走向移动化，每天都有数百万部智能手机被激活。因此，为消费者开发的移动应用越来越多，企业软件产品也在缓慢但稳步地加入这场革命。越来越多的企业确信，为了维持，他们需要在移动领域。你是一名网络开发人员，在一个晴朗的早晨，你的经理告诉你，“我们现在需要专注于移动平台。准备好！”或者你想开发一个需要部署到一个或多个移动应用商店的移动应用。在选择合适的移动开发平台时，有许多因素起作用，例如您的开发技能、原生功能、安全性、离线能力以及对多个平台的支持。在本章中，我们将看到开发移动应用的不同方法，并了解为什么 HTML5 是跨平台开发的流行选择。然后，我们将介绍剑道用户界面移动，并将讨论一些移动应用的设计原则。

在本章中，我们将介绍:

• 本地网站、混合网站和移动网站


• HTML5 和 CSS3


• 剑道用户界面——轻松构建跨浏览器应用


• 剑道用户界面手机


• HTML5 移动网络应用设计指南

您可能已经知道，有三种方法可以开发与移动设备兼容的应用:本机、混合或移动网站。

原生应用 是用特定平台的编程语言编写的，即 iOS 的 Objective C、安卓的 Java 等等。本机应用运行更快，可以访问所有设备 API 和功能，并提供更好的用户体验。由于原生应用是为特定平台构建的，如果原生应用需要在另一个平台上运行，则需要重写整个应用。这将造成代码重复、维护难题、预算增加，以及需要多个开发团队(专门负责某个平台)处理相同的业务规则。通常，需要高性能的游戏和应用是作为纯本机应用开发的。

混合应用 是使用纯网络技术(如 CSS、HTML 和 Javascript)编写的，它们使用设备的浏览器引擎在设备的本地容器中运行。混合应用通常使用 PhoneGap 等工具打包，这有助于应用访问特定于设备的应用接口和硬件功能。WebKit 渲染引擎用于 iOS、Android 和 Blackberry 等平台，渲染要在原生平台的 web 视图控件中显示的基于 web 的脚本/代码。由于混合应用是使用本机应用外壳创建的，因此它们也可以使用应用商店进行分发。Telerik 的 Icenium 是一个基于云的一体化开发环境，用于打包、测试和部署混合应用。PhoneGap 是另一个常用的工具，用于打包网络应用，以便在多个移动平台上部署。

移动网站 使用网址访问，并在移动设备的浏览器中运行。它们可以使用服务器端技术开发，例如 ASP.NET 和 PHP，并且可以在没有任何应用商店批准过程的情况下进行部署和更新。如果移动网站是使用纯 web 技术(HTML、CSS 和 Javascript)编写的，或者使用基于这些技术的框架编写的，例如 jQuery、Kendo UI 和 jQuery Mobile，那么移动网站可以打包安装为混合应用，无需太多努力。移动网站的一个主要缺点是只能访问通过浏览器公开的设备功能，这使得移动网站适合基于内容的应用。没有一个单一的解决方案适合所有的场景。方法的选择将取决于许多因素，如您拥有的技能集、预算、时间表和更新频率。

剑道 UI Mobile 是开发混合应用和移动网站的理想平台。在本书的过程中，我们将使用剑道用户界面手机创建一个电影票应用，该应用最初将被视为一个移动网站，然后在本书的结尾，它将使用 PhoneGap 作为一个移动应用进行打包，并部署到安卓和 iOS 设备上。

HTML5、jQuery 和 CSS3 是开发尖端 web 应用的新咒语。当我们说网络时，它包括标准网站/应用、移动网站/应用以及混合应用。即使这本书是关于剑道 UI Mobile 的，但了解一下剑道 UI Mobile 框架背后的底层技术也很重要，即 HTML5、CSS3 和 jQuery。在我们深入研究剑道 UI Mobile 之前，让我们先简要地从高层次上看一下 HTML5 和 CSS3 技术。因为我们希望这本书的读者对 jQuery 有所了解，所以我们不会在这里讨论 jQuery 的基础知识。

html 5–史蒂夫·乔布斯让我出名

当史蒂夫·乔布斯在 iOS 设备上著名地宣布 Flash 的死亡并认可 HTML5 是未来时，HTML5 在互联网公众中一举成名，因为它有助于在不依赖第三方浏览器插件的情况下构建高级图形、排版、动画和过渡。

HTML5 是一种标记语言规范，由大量特性、技术和 API 组成，允许内容开发人员创建丰富的交互体验。HTML5 仍处于推荐阶段，但许多浏览器已经实现了规范的很大一部分。这对开发人员来说是一个挑战，因为他们需要在启动 HTML5 项目之前弄清楚哪些浏览器支持哪些功能。

html 5 的主要特点

尽管【HTML5 的规范还没有完成，但是大量的特性已经被主流浏览器实现了。以下是 HTML5 目前的一些主要特性:

|

• Application cache supports offline network applications.

| * geographical position |

• Events sent by the server

• audio and video

|

• Index database

|

• Web page API

• 【画布应用编程接口】

|

• 【mathml】

|

• Network storage

• Cross-document message

|

• Micro data

|

• web workers

• drag and drop

|

• Scalable vector graphics ( SVG )

|

• XMLHttpRequest 二级

|

注

谷歌的 http://html5rocks.com是一个非常好的 HTML5 参考网站，有大量的教程、文章和其他资源。

html 5 规范背后是谁？

HTML5 规范的开发背后有三个不同的组织: W3C ( 万维网联盟)WHATWG(网络超文本应用技术工作组)和 IETF ( 互联网工程任务组)。因此，W3C 和 WHATWG 维护的 HTML5 规范有两个版本，分别可以在http://www.w3.org/TR/html5/和http://whatwg.org/html找到。 IETF 由负责 HTTP 等互联网协议的小组组成，处理 HTML5 的 WebSocket API 使用的 WebSocket 协议。

HTML5 的两个不同版本并不令人担忧，因为 WHATWG 版本被认为是一种生活标准(意味着将会不断发展，不再应用版本)，W3C 正计划创建一个单一的最终标准，WHATWG 称之为他们生活标准的快照。

WHATWG 的工作重点是开发 HTML 和相关技术的规范描述(意味着修复 bug、添加新特性和通常跟踪实现)，而 W3C 将继续 HTML5 规范的工作，专注于单一的权威标准。

【HTML5 页面示例

现在让我们把的手弄脏，看看一个简单的 HTML5 页面:

类型

下载示例代码

您可以从您在http://www.packtpub.com的账户中下载您购买的所有 Packt 书籍的示例代码文件。如果您在其他地方购买了这本书，您可以访问http://www.packtpub.com/support并注册，以便将文件直接通过电子邮件发送给您。

DOCTYPE 和字符编码

HTML5 的DOCTYPE声明非常简单:

这一行需要添加到我们创建的每个 HTML5 页面的顶部。新的DOCTYPE声明简单明了，不同于 HTML4 中冗长难记的声明，如下所示:

所有最新的浏览器都会查看新的DOCTYPE声明，并将内容切换到标准模式。

与DOCTYPE声明一样，字符集声明也在 HTML5 中进行了简化，如下所示:

元元素中的meta charset属性被用来代替 HTML4 中的 pragma 指令。

这是 HTML4 中典型字符编码的外观:

一些新的 HTML5 标签

正如在前面的代码中所强调的，您可以看到一些新的 HTML5 标签，它们是语义标记。语义标记向浏览器和开发人员清楚地描述了它们的意义或目的。在 HTML4 中，我们使用

像、