构建 HTML5 应用程序

  • 项目

使用 HTML5 打造移动体验

Brandon Satrom

下载代码示例

上个月，我向您介绍了 CSS3 媒体查询 (msdn.microsoft.com/magazine/hh882445)，一个允许您根据条件规则调整页面样式的新模块。 虽然媒体查询在各种设备系列中都具有广泛的适用性，但却是在构建移动站点和应用程序时经常被提及。 也就是说，之前文章中对于媒体查询的介绍主要是围绕平板电脑和移动体验的打造。

考虑到构建移动站点和应用程序存在的困难，媒体查询的问世也就不足为奇了。 与不尽人意的替代方法（例如浏览器探查，有时也称为设备检测）以及必须在每个平台的基础上打造移动体验相比，媒体查询看起来的确是天赐的珍宝。 它们确实是智能模块，上月我介绍它们的原因是因为您今天应该正在使用它们。

再谈快速响应的 Web 设计

但是，还有其他的内容： CSS 媒体查询非常强大，但它们只是您打造卓越的移动 Web 体验真正所需内容的一小部分。 上个月，我提到了术语“快速响应的 Web 设计”，这是 Ethan Marcotte 在他的同名创意文章 (bit.ly/9AMjxh) 中创造的术语。 Marcotte 主要介绍了媒体查询，但是他还指出了另外两个必要的实践： 流畅的网格和灵活的图像。 媒体查询是推动快速响应且自适应网站的引擎，但它们仅在这些网站的设计也同样具有快速响应和自适应能力时才有效。 这个月，我将向您介绍有关“快速响应 Web 设计”的另外两个重要元素的一些想法。 首先我会概述一些即将推出的 CSS 布局模块，然后讨论使非文本元素（例如图像和嵌入视频）也具有自适应性的一些技术。 在这期间，我将介绍帮助您使用这些技术的一些框架和库。 我还将介绍用于创建移动 Web 应用程序的一些热门框架，并简单讨论如何使用 HTML5 构建“本机”应用程序。 阅读完本文后，您应该已经打下了在自己的应用程序中实现快速响应 Web 设计的坚实基础。

流畅的网格和布局

使用网格进行排版设计是已经通过这样或那样的形式存在了几个世纪的做法，甚至早于活字印刷术的发明。 通过由相互交错的垂直轴和水平轴构成的二维结构，设计师可以对齐和组织元素以实现美观的布局，如图 1 所示。 在过去的几年内，Web 设计师已经开始对他们的数字作品应用许多相同的原则，一些常用框架（例如 960 网格系统 (960.gs) 和语义网格系统 (semantic.gs)）的推出现在已经使所有人都可以使用网络布局。

A Typographic Grid
图 1 排版网格

但是，直接将排版网格应用到 Web 具有一个重要缺陷： 打印布局是固定的，而 Web 布局却不是。 另外，许多网格实现的语义不是很清晰，也就是说它们需要额外的标记来定义网格，从而使您的 HTML 页面的外观和内容混为一体。

这就让我们想到了 Marcotte“流畅的网格”中“流畅”的问题。要真正实现响应迅速，网格（或布局）应适应不断变化的体验。 正如我上个月所讨论的，媒体查询可帮助您定义重新放置元素的规则，但是为了保证有效性，那些元素则必须首先在流畅或灵活的容器中定义。 之前提到的工具（以及许多其他工具）不管是通过本机（语义网格）还是通过使用辅助库（960 网格的 Adapt.js adapt.960.gs）的方式，的确可以解决这个问题，但是还有许多新出现的 CSS 模块可用于帮助创建流畅的布局。

请注意，我冒昧地将 Marcotte 的术语“流畅的网格”延伸为“流畅的布局”。 我这么做是因为某些新的 CSS 模块虽然并非基于网格，但是仍然可以帮助您创建流畅的、可自适应的容器。

让我们首先看一下 CSS3 灵活框布局模块（或 Flexbox），这可以在 bit.ly/yguOHU 中找到。 Flexbox 旨在帮助您创建用于容纳元素的布局容器，以便在水平或垂直流中自动放置子项，并提供自动的间距 (Goodbye “ul li { float: right; }”!)。 Internet Explorer 10 平台预览版、Firefox、Chrome、Safari、iOS Safari 和 Android 都支持此模块 — 供应商前缀（有关详细信息，请查看 caniuse.com/flexbox）。

首先，我们将 Flexbox 应用于我在上个月介绍的照片库站点。 拥有图 2 中所示的 CSS 后，您可以看到图 3 中的结果，为了便于说明为这些结果设置了样式。 请注意，图 2 中的 CSS 仅使用“-ms-”供应商前缀。 在线提供的示例代码 (archive.msdn.microsoft.com/mag201205HTML5) 中，我包括了其他供应商前缀（-webkit、-moz、-o），您也应该为自己的站点这么做。

图 2 使用 Flexbox 模块的 CSS

ul.thumbnails {
  width: 100%;
  background: #ababab;
  display: -ms-box;
  -ms-box-orient: horizontal;
  -ms-box-pack: center;
  -ms-box-align: center;
}
ul.thumbnails li {
  -ms-box-flex: 1;
}

Photo Gallery Images with Flexbox Applied
图 3 应用了 Flexbox 的照片库图像

很漂亮，但是当然，之前我们就已经做到这一点了。 若要展示 Flexbox 的灵活性，请调整您浏览器窗口的大小，或者在移动仿真器或设备上打开页面。 此示例中没有定义媒体查询，并且布局看起来更流畅一些。 结合这两个模块，您将能够创建以可快速响应的方式对齐、分隔和转移元素的流畅容器。 例如，您可以为小于 480 像素的屏幕创建媒体查询规则，将框方向更改为垂直，就是这样，您已经开始初步接触移动布局了。

CSS 网格布局（或者简单地说 CSS 网格）是较新的规范（可以在 bit.ly/ylx7Gq 中找到），于 2011 年 4 月提交给万维网联盟 (W3C) CSS 工作组，当前仅在 Internet Explorer 10 Consumer Preview 中实施。 其宗旨是在浏览器内提供内在的强大网格支持。 对于开发人员和设计人员来说，它可生成丰富的排版网格，而无需表格布局，也无需存在不受语义限制的标记。

CSS 网格允许您使用预定义的行和列定义页面布局，以及指定内容流入那些元素和在那些元素之间流动的方式的规则。 第一步是定义网格容器，将“grid”指定为所选元素的显示属性：

    body {
      display: -ms-grid; // A vendor prefix is required.
    }

我在这里选择的是 body 元素，这意味着我的网格将填充整个文档。 这并不是必需的，我可以轻松在页面的局部再制作一个网格，或者甚至在一个页面上定义多个网格。 定义好网格后，我需要定义其行和列的大小：

    body {
      display: -ms-grid;
      -ms-grid-rows: 50px 30% 20% auto;
      -ms-grid-columns: 75px 25px 2fr 1fr;
    }

这里，我指定的是四列和四行的网格，在某些情况下设置绝对大小（例如 50px、75px），在某些情况下设置相对于窗口的大小（30%、20%），以及根据其内容的宽度自动设置大小（自动）。 我还使用新的分数值单位 fr，这在 CSS 网格规范中定义为“可用空间的一部分”。在指定固定大小并在使用这些值定义的所有行和列中按比例分割这些大小后，计算分数值。 在我的示例中，这意味着在为第一列和第二列分配 100 像素后，第三列将被赋予三分之二的剩余空间，而第四列则被赋予三分之一的剩余空间。

定义网格后，可以很方便地通过指定行和列的值来在网格内放置子元素，例如：

    #main {
      -ms-grid-row: 2;
      -ms-grid-column: 2;
      -ms-grid-row-span: 2;
      -ms-grid-row-align: center;
    }

这里，我将我的“main”分段元素放在网格的第二行和第二列。 我允许该元素跨越两行，并在容器中将内容居中。 Microsoft Internet Explorer Test Drive Demo 站点使用其 CSS 网格布局实现创建热门网格系统站点 (thegridsystem.org) 的具体实现，您可以亲自在 bit.ly/gEkZkE 上进行了解。

如果您曾经使用标记和 CSS2.1 尝试过类似的事情，那么对于 CSS 网格可以提供这样的灵活性，您应该是没有什么值得怀疑的。 另外，当结合媒体查询时，CSS 网格可以用于创建自适应布局，以便于在用户调整设备的大小和方向时能通过较少的规则更改随之进行调整。

我要介绍的最后一个布局规范是 CSS 多列布局模块，您可以在 bit.ly/yYEdts 中找到它。 CSS 多列处于“候选推荐”状态 (bit.ly/x5IbJv)，并在所有浏览器中享有广泛的支持，包括 Internet Explorer 10 规划的支持。 顾名思义，多列允许您在页面中布置多个列，无需手动放置或浮动。 您只需在容器上应用“列宽度”属性（需要时使用前缀），如下所示：

    article {
      width: 960px;
      column-width: 240px;
    }

使用此规则，文章元素将分为多个 240 像素的列，创建容器允许的尽可能多的列（在本例中，需要四个 240 像素的列填充 960 像素的容器）。 我还可以使用列计数属性定义固定数量的列，此时列宽度将在我容器的宽度内均匀分布。

与 Flexbox 和网格模块一样，将模块与媒体查询结合可允许您快速定义简单的自适应规格，以向移动用户提供理想的用户体验。

我在这里介绍的这三个模块存在很多共同点，每一个都提供有相应的功能，您可以使用这些功能创建真正快速响应的网站要求的那种流畅布局。 建议您对每一种模块都进行研究和试用，以便您在解决指定的布局难题时可以选择正确的模块。

您还将希望了解利用这些规范的新兴框架。 使用这些内容之一可以快速开始构建您自己站点的流畅布局。 Skeleton (getSkeleton.com) 和 Bootstrap (twitter.github.com/bootstrap) 是两个值得关注的框架，后者是 Twitter 提供的完整站点入门工具包。 最近，我在 Skeleton（请参见 html5tx.com）的帮助下重新构建了自己的一个站点。

快速响应的媒体

在快速响应 Web 设计（特别是移动设备）方面，媒体是棘手的问题。 让我们从图像开始说明。 设置图像样式以使其响应更快的最简单的方式之一就是将以下内容添加到您的样式表：

    img {
        max-width: 100%;
      }

该规则总是会调整您的图像（放大或缩小）以适应图像的父容器。 因此，如果您的容器元素响应迅速（或许使用之前介绍的一项技术），那么您的图像也应该响应迅速。

此方法面临的挑战是，您站点上的图像需要足够大，可以缩放至它们可能需要达到的任何大小。 在我一直使用的照片库站点上，原始图像都非常大，因此可以执行重新调整大小。

但是使用可调大小的大图像会为移动设备带来大问题： 开销问题，从而潜在造成较差的移动体验。 即使您重新调整大图像的大小以适应 320 x 240 的窗口，也会将完整图像传输给设备。 这意味着当设备只需要一张 10KB 的照片时，您可能会发送一张 2MB 的照片。 在移动领域里，带宽仍然很重要，所以必须使用其他方法取代设备带宽战略。

遗憾的是，这仍是个难题，W3C 尚未正式支持某个特定的方法。 虽然存在大量方法可以解决快速响应的图像问题，但是所有这些都可分为两类： 它们要么在服务器上解决该问题，要么尝试在客户端上解决。 许多服务器方法（如 bit.ly/rQG0Kw 中介绍的这个）依赖于使用 1 x 1 像素的占位符图像、客户端 Cookie 和服务器重写规则，以便将正确的图像提供给正确的设备。 客户端方法（如 bit.ly/tIdNYh 中介绍的这个）通常在 CSS 中使用 JavaScript、<noscript> 回退、条件注释和一些有趣的技巧。 两种方法都感觉有些高深莫测（因为它们确实是这样），但是考虑到 <img> 标签的约束，它们已经是我们能够想到的最好的方法了。 短期看来，您最好了解下这两种方法，并决定哪种适合您的应用程序。

从长远来看，当然还是有希望的。 在 Smashing Magazine 的一篇文章“HTML5 语义”(bit.ly/rRZ5Bl) 中，Opera 的 Bruce Lawson 说添加 <picture> 元素可以产生与 <audio> 和 <video> 标签类似的效果，这意味着开发人员可以访问父 <picture> 中的多个 <source> 子元素。 当与内嵌媒体查询结合使用时，新的 <picture> 元素将是最终为快速响应的图像提供强大解决方案的希望之光：

<picture alt="cat gallery">
  <source src="nyan-high.png" media="min-width:800px" />
  <source src="nyan-med.png" media="min-width:480px" />
  <source src="nyan-low.png" />
  <!-- fallback for unsupporting browsers -->
  <img src="nyan-med.png" alt="cat gallery" />
</picture>

尽管该解决方案已经非常流行，并且已针对它成立了 W3C 社区组 (bit.ly/AEjoNt)，但是据我所知还没有正式的工作组。 或许我们能够在 HTML6 中看到此元素。

将快速响应的视频添加到站点和应用程序存在类似的挑战，尽管 HTML5 中的视频解决方案比图像解决方案更强大。 对于初学者来说，媒体查询增强型 <source> 元素（就像之前提到的虚构 <picture> 元素所演示的那样）可用于 <video>，如下所示：

<video>
  <source src="nyan-mashup-high.webm" media="min-width:800px" />
  <source src="nyan-mashup-med.webm" media="min-width:480px" />
  <source src="nyan-mashup-low.webm" />
  <!-- Insert Silverlight or Flash Fallback here -->
</video>

如果您从自己的服务器提供视频或使用提供多个可嵌入版本的服务，我强烈建议使用此语法以确保您的用户能获得适合在设备上播放的视频。

虽然此解决方案将帮助节省您用户的带宽，但是您仍然需要考虑调整那些嵌入式视频元素的大小，就像您对图像做的一样。 使用媒体查询，可以很方便地根据不同屏幕大小调整视频元素，但是如果您想寻找更自动化一点的解决方案，请看一下 FitVids.js (fitvidsjs.com)，它是一个可自动让您的视频元素流畅且响应迅速的 jQuery 插件。 但是请记住，作为 jQuery 插件，此解决方案不适用于禁用了 JavaScript 的用户。

使用 HTML5 框架构建移动 Web 应用程序

我们已经讨论了快速响应 Web 设计的另外两个重要元素（流畅的布局和灵活的图像），现在我们来谈谈您不只是构建适合在移动设备上显示的网站或应用程序的情况，您要专门打造移动体验。

在开发领域，传统的台式机（或客户端）和 Web 模式已让位于另一种类型的应用程序，通常称为本机应用程序，因为它们位于给定设备（例如基于 Windows Phone 的智能手机或 iPad）上，使用特定于设备的框架（iOS 和 Android）开发，并通过应用商店或市场进行安装。

随着这些框架的日益丰富和强大，有时 Web 开发人员希望向他们的移动 Web 应用程序提供相似的“本机感觉”。 此类应用程序仍然位于您的服务器上，并可从设备的应用商店或市场之外交付。

虽然您肯定可以手动构建这些类型的应用程序，但是使用框架进行构建更为常见。 移动 Web 应用程序的一个常见选择就是 jQuery Mobile (jquerymobile.com)，它是一个移动开发框架，可针对几乎所有移动平台提供基于 HTML5 的 UI 系统。 图 4 展示了 OpenTable.com 移动应用程序的示例，该应用程序是使用 jQuery UI 构建的。

A Sample Mobile Screen Built with jQuery Mobile
图 4 使用 jQuery Mobile 构建的示例移动屏幕

构建具有本机外观的移动应用程序的另一个常见选项是 Kendo UI Mobile (kendoui.com)，它是 Telerik Inc 推出的 HTML5、JavaScript 和 CSS 框架。 Kendo UI 允许您在基于 iOS 和 Android 的设备上创建完全具有本机感觉的移动应用程序，只需一份基本代码即可做到这点。 图 5 和图 6 显示了此功能的实际应用，您可以在 bit.ly/wBgFBj 中亲身体验一下。

A Kendo UI Mobile Demo Application Viewed on an iOS-Based Device
图 5 在基于 iOS 的设备上看到的 Kendo UI Mobile 演示应用程序

图 6 在基于 Android 的设备上看到的示例 Kendo UI Mobile 应用程序

使用 HTML5 构建本机应用程序

为 Web 应用程序提供本机感觉不仅有利于发挥您作为 Web 开发人员的技能，还有利于创建符合用户在移动环境中的预期的应用程序。 但是，这些应用程序在那些设备上使用本机传感器和 API 时只能达到这个程度。 虽然移动浏览器已具备一些功能（例如地理位置），但是仍不具备许多像加速感应器或视频这样的功能。 要访问这些功能，仍然需要使用本机应用程序。

但是，好消息是 Web 编程的流行使得 HTML5、JavaScript 和 CSS 越来越“本机化”，让一切照原样运作。 诸如 PhoneGap (phonegap.com) 和 Titanium Appcelerator (appcelerator.com) 等流行的框架允许您使用 HTML5 和 JavaScript 构建 iOS、Android 和 Windows Phone 的本机应用程序，使用设备 API 访问进行引导。 另外，诸如 jQuery Mobile 和 Kendo UI Mobile 等移动开发框架在这些环境中的使用情况与在浏览器中一样良好。 图 7 显示使用 PhoneGap 和 Kendo UI 构建的本机 iOS 应用程序。 有关详细信息，请查看 bit.ly/zpIAPY 上的博客文章。

An iOS Application Built with HTML, JavaScript and CSS
图 7 使用 HTML、JavaScript 和 CSS 构建的 iOS 应用程序

Microsoft 已通过正式添加对使用 HTML5、JavaScript 和 CSS（所有这些都不需要额外的抽象或框架）构建 Windows 8 应用程序的支持，将本机 Web 开发提升到一个新的水平。 您可以在 dev.windows.com 上查看 Windows 8 Consumer Preview，以及这些平台的新开发人员工具。

当涉及移动 Web 时，您已经有选择了！ 如果您是想要打造本机体验（包括增强实境功能）的 Web 编程人员，请考虑 Windows 8 或诸如 PhoneGap 或 Titanium Appcelerator 之类的框架。 如果您只是想在浏览器中寻找本机感觉，请考虑 jQuery UI 和 Kendo UI Mobile。 最后，如果您的目标是创建响应多个设备和体验的单个网站或应用程序，请尝试我在本文和上个月文章中讨论的快速响应的战略。 毫无疑问，移动平台是现在最热门的开发平台之一。 不管您选择何种策略或平台，都应优先选择移动开发平台。

Brandon Satrom 是 Kendo UI (kendoui.com) 的一名产品经理，Kendo UI 是 Telerik Inc. 推出的 HTML5 和移动工具集。Brandon Satrom 的博客网址为 userinexperience.com，可通过 Twitter 地址 twitter.com/brandonsatrom 关注他，另外他正与 Chris Sells 一起忙于编写一本书《Building Metro Style Apps for Windows 8 in JavaScript》（使用 JavaScript 构建适用于 Windows 8 的 Metro 风格的应用程序）。

衷心感谢以下技术专家对本文的审阅： Jon Box、Burke Holland 和 Clark Sell