面向安卓的 HTML5 和 JavaScript 学习手册（一）

原文：Learn HTML5 and JavaScript for Android

协议：CC BY-NC-SA 4.0

零、简介

欢迎来到学习 Android 的 HTML5 和 JavaScript】。这本书将为 Android 操作系统 4.0 版本的 Android 浏览器(称为冰淇淋三明治)提供 HTML5、JavaScript 和 CSS3 的介绍。这本书将带你了解如何利用最好的移动网络技术和方法来开发可靠的移动网站，不仅仅是为 Android，也为其他平台。

这本书不是关注现成的框架和库，而是关注普通 JavaScript、CSS 和 HTML5 的使用，希望一旦你完成这本书，你将有足够的能力使用普通 JavaScript for mobile，以及 JavaScript mobile web 框架。

这本书是给谁的

这本书是为任何有网络开发或原生移动应用开发经验并想掌握移动网络的人准备的。你需要一些 JavaScript/ActionScript 或其他编程语言的知识。

这本书的结构

这本书分为九章。

• Chapter 1 (Introduction): This chapter will guide you to build your development environment.
• Chapter 2 (Introduction of creating mobile network applications for Android): This chapter will give you a deeper understanding of the history behind the mobile network and the differences between it and desktop-based websites. It will take you through several case studies of existing mobile websites and explain how to improve or change them to make them easier for users.
• Chapter 3 (HTML5) and Chapter 4 (Start your project with HTML5): These chapters will introduce you to some new HTML5 tags, which are specifically for mobile devices. This chapter will also show you how to encode video and audio for mobile devices and embed them with HTML5. After you finish the HTML5 chapter, the seminar will take you through the form of movie reminding mobile web application to create the HTML foundation of mobile web application.
• Chapter 5 (CSS3 for Mobile) and Chapter 6 (laying the foundation of CSS3): These chapters will show you some new CSS3 mobile compatible features, such as transformation, animation, shadow and fillet. You will also learn how to use SASS, a CSS3 precompiler. This seminar will guide you to design your mobile web application using SASS and best practices while using the precompiler.
• Chapter 7 (Mobile JavaScript) and Chapter 8 (JavaScript: model, view and controller): These chapters will show you how to use JavaScript to enhance your mobile application. There are no libraries in this chapter, such as jQuery, Sencha or jQuery Mobile. The Getting Started with JavaScript chapter will show you how to use ordinary JavaScript to build a basic framework and interact with canvas and audio. The seminar will take you to enhance mobile web applications by adding pagination and communicate with third-party APIs through JSONP.
• Chapter 9 (Testing and deploying your mobile Web application): This chapter will show you how to test your application with QUnit and deploy it with Capistrano.

下载代码

本书中所示示例的代码可在 Apress 网站[www.apress.com](http://www.apress.com)上获得。在该书的信息页面上的源代码/下载选项卡下可以找到一个链接。该选项卡位于页面相关标题部分的下方。

联系作者

如果你有任何问题或意见，或者发现你认为我应该知道的错误，你可以通过[gavin@justanotherdeveloper.co.uk](http://gavin@justanotherdeveloper.co.uk), [tweet @fishrodgavin](http://tweet@fishrodgavin) or visit [www.justanotherdeveloper.com](http://www.justanotherdeveloper.com).联系作者

一、入门指南

在 2008 年 9 月发布第一款 Android 手机和 2007 年 6 月发布第一款 iPhone 手机之前，移动网络浏览器的标准化并没有立即推进。播放视频需要 Flash mobile 或低质量的 3GP 版本的视频。开发人员避免使用 JavaScript，因为 JavaScript 在大多数移动 web 浏览器上默认是禁用的，而其他浏览器根本不支持 JavaScript。一个这样的开发者，登录 stackoverflow.com，评论说使用 JavaScript 是“一场噩梦”。。。就像在 90 年代使用网络浏览器一样，但是经理们对未来充满期待。” ¹

移动网站只是灰度手机上 WAP 时代的无线标记语言(WML)页面，如摩托罗拉 V50，但带有一点色彩。从那以后没有太大的变化，大多数移动网站仍然保持着同样的从上到下的线性信息流，交互性不强。这种设计风格有三个原因。

1. WAP/GPRS 和 EDGE 都是速度很慢的协议，不能处理大量文件的网站，所以设计和内容被限制为快速传递网站及其信息。
2. 旧手机的分辨率和长宽比很糟糕，以至于你几乎不能在屏幕上显示任何内容。
3. 传统上，你使用一个球或按键来浏览移动网站。上下滚动似乎比左右滚动更自然。

---

1 Stackoverflow.com，由安娜卡塔发布，[stackoverflow.com/questions/316876/using-javascript-in-mobile-webapplication#316920](http://stackoverflow.com/questions/316876/using-javascript-in-mobile-webapplication#316920)。

我们现在不再依赖基于硬件的控件来浏览移动设备上的内容。随着每一款新的平板电脑和手机的发布，屏幕的尺寸、质量、分辨率、像素密度/PPI 和颜色深度都在增加。我们看到桌面浏览器引擎，如 WebKit 和 Geko，被插入到网络浏览器中，如移动 Safari、Android 浏览器和 Firefox，就在我们的移动设备上。这有助于开发人员制作出令人惊叹的移动网站，这些网站在目前流行的 Android 和 iOS 手机以及平板设备上的外观和感觉都是一致的。

此外，最新的手机浏览器也支持 GPU 加速。这意味着移动网络应用可以变得更加精致和互动，因为大多数渲染现在可以卸载到图形处理器上(这在几年前还是闻所未闻的)。

考虑到 Adobe axing Flash Mobile 的最新发布，以及将更快的 CPU 和 ram 塞入移动设备的持续竞争，现在不仅是进入移动 web，而且是 HTML5、CSS3 和 JavaScript 的最佳时机。

作为一名移动 web 开发人员，您现在有机会在现有 web 标准的基础上为小型笔记本电脑开发近乎原生的应用。

然而，不要被愚弄；就标准化而言，移动网络世界还有很长的路要走。所以，在这本书里，我会给你一些防御性的编程技巧，帮助你在开发移动网络时避免常见的错误和误解。

开始之前，你需要一台平板电脑和/或一台基于 Android 的移动设备来测试应用。您还需要一个坚实的开发环境来工作。

选择测试设备

虽然不是必需的，但手边有一个实体的 Android 设备，如手机和平板电脑，会有很大帮助。你可以使用 Android SDK 或普通的网络浏览器来测试你的移动网络应用。然而，这也有缺点。众所周知，Android SDK 启动极其缓慢，运行缓慢；在桌面浏览器上进行测试不允许你在设计和构建的平台上测试你的 web 应用。

与其他移动操作系统不同，Android 遭遇了开发者最可怕的噩梦，即设备碎片化。设备碎片可能由以下一些因素引起。

• 不止一个设备供应商为单一操作系统生产设备。
• 每种设备都有不同的硬件规格和限制。
  • 加速计
  • 全球（卫星）定位系统
  • 陀螺仪
  • 屏幕分辨率
  • 像素密度
  • 中央处理器
  • 随机存取存储
• 旧设备不支持具有最新功能的最新操作系统，例如具有最新 API 和渲染引擎的最新默认浏览器。

正因为如此，挑选一款人人都有的设备进行测试变得极其困难。为了客观地看待这个问题，请参见表 1-1 中截至 2011 年 12 月 Android 设备与行业其他设备的对比统计。

表 1-1 描绘了一幅清晰的画面，Android 设备厂商为 Android 用户生产了各种各样的设备。

理想情况下，你应该挑 12 个安卓设备(6 个手机，6 个平板)。还要考虑以下标准。

• 高端设备(450 美元或以上)
  • 最近六个月内释放
  • 12-18 个月前发布
• 一款中档设备(150-449 美元)
  • 最近六个月内释放
  • 12-18 个月前发布
• 低端设备(不到 150 美元)
  • 最近六个月内释放
  • 12-18 个月前发布

你应该以这种方式挑选设备有两个主要原因。

1. 设备功能会因价格而异。例如，通常情况下，你不会在低于 100 美元的设备中看到双核 CPU。然而，你还是应该迎合那些没有最新最棒的人。这将允许您针对能力较低的设备进行测试，并确保您的移动 web 应用将适度降级。
2. 设备契约以 12 个月、18 个月和现在的 24 个月为周期结束。这是用户升级手机和设备供应商发布新硬件的理想时机。记住这一点，您应该选择购买用户将在 2-3 个月后升级的设备。同样，这将帮助您针对设备进行测试，并确保您的移动 web 应用能够正常降级。

如果你只能选择一个设备，选择最新最好的。这个装置本身可以让你使用一年多一点。如果您的目标是每年升级一次设备，那么您将会收集大量的旧设备进行测试，并且这些设备与您的用户将要使用的设备相同或相似。

出于这本书的目的，我将使用 HTC Desire HD、华硕 Eee Pad 和三星 Galaxy 智能手机。

设置您的开发环境

既然您已经选择了要测试的设备，现在是时候设置您的开发环境了。

我选择的操作系统是 Mac OS X 狮子；但是，其他平台的设置过程非常相似。

我选择了开源或免费的应用来开发。所有的应用都可以在 Mac、Windows 或 Linux 上运行。

Aptana

Aptana 是一个用于 web 开发的集成开发环境(IDE)。IDE 不同于常规的文本编辑器，如 TextMate 或 BBEDIT，也不同于网站编辑器，如 Dreameweaver。它们将提供开箱即用的开发所需的一切，并且可以扩展以适应您特定的开发风格或平台。

Aptana 基于 Eclipse，因此可以支持大多数(如果不是全部)Eclipse 插件；它将管理您的虚拟 Android 测试环境，执行代码完成，验证您的代码，并为您部署它。

要下载 Aptana，请前往[aptana.com/](http://aptana.com/)。您将看到图 1-1 中所示的下载选项。

图 1-1。 Aptana 下载选项

选择图 1-1 所示的“单机版”，点击下载按钮。安装它并继续安装 Android SDK。

**注意:**你可以改变 Aptana 中编辑器的外观来适应你的偏好(例如，你可能希望你的 IDE 有一个或暗或亮的主题)。为此，只需转到首选项。“首选项”窗口将会打开。使用左上角的过滤器并键入主题。点按搜索栏下方菜单中的“主题”选项。默认将是 Aptana Studio，但选择任何你喜欢的主题并点击 OK。

Android SDK

Android SDK 将允许您创建虚拟的 Android 环境，以便使用不同的硬件配置和 SDK/OS 版本进行开发。Eclipse 有一个插件，允许您管理、创建和配置虚拟 Android 设备，并从 Aptana 中启动它们。

在安装 ADT 之前，您需要在 Aptana 中启用 Eclipse Helios 更新站点。这包含了 Eclipse 的 Android ADT 插件的依赖项。

要启用 Eclipse Helios 更新站点，请从苹果任务栏转到 Aptana Studio 3，然后选择首选项安装/更新可用软件站点。将出现一个类似于图 1-2 的屏幕。

图 1-2。 启用日食太阳神更新网站

要为 Aptana 安装 ADT，请转到[developer.android.com/sdk/eclipse-adt.html#downloading](http://developer.android.com/sdk/eclipse-adt.html#downloading)。

按照说明操作。成功安装 ADT 后，Aptana 将重新启动，您将看到类似于图 1-3 的屏幕。

图 1-3。 初始 ADT 启动屏幕

保留所有默认选项，然后单击下一步>。您可以决定是否要向 Android 发送使用数据，然后单击“完成”。接受最后一个屏幕上的所有选项，并再次单击 Finish。ADT 将开始下载最新的 SDK，这将需要几分钟时间。

现在已经安装了 ADT，您可以安装所有的 SDK 来测试您的 Android web 应用。Android ADT 可以在窗口菜单底部找到，如图图 1-4 所示。

**图 1-4。**Aptana的新安卓菜单

转到 Android SDK 管理器。你会看到一个 Android SDKs 下载列表，如图图 1-5 所示。展开所有 Android 版本，并确保为每个 Android 版本勾选以下选项。

• 谷歌公司的谷歌 API。
• SDK 平台
• 三星电子的 GALAXY Tab

**图 1-5。**Android SDK 管理器

点击安装按钮开始下载和安装过程。

在随后的屏幕上选择全部接受，然后单击安装。你应该会看到一个类似于图 1-6 的窗口。安装 SDK 的过程可能需要相当长的时间，这取决于您的计算机的能力和您的互联网速度。

**图 1-6。**Android SDK 管理器安装包

完成这些步骤后，您就可以用 Android SDK 的每个版本来测试您的移动网络应用了。

萨斯

SASS 是一个 CSS 预处理器。它允许您嵌套 CSS 规则，在 CSS 中使用变量，重用 CSS 块(比如用 mixins 设置一组元素的边框半径)，并允许 CSS 规则继承其他规则。

SASS 将贯穿本书来编写 CSS。为了让 SASS 工作，需要安装 SASS Ruby gem。

这对于使用终端的 OS X 来说相当简单。终端可以在应用工具中找到。

打开“终端”后，输入以下命令:

sudo gem install sass

输入您的密码，等待 SASS gem 安装完成。要测试 SASS 是否已成功安装，请输入:

sass –v

如果 SASS 已经成功安装，您将看到 SASS 的版本号。要在 Windows 或 Linux 上安装，在 SASS 的下载页面[sass-lang.com/download.html](http://sass-lang.com/download.html)上有安装程序和说明。如果您没有安装 Ruby，您必须先安装它。从[rubyinstaller.org/downloads/](http://rubyinstaller.org/downloads/)下载并安装。安装 Ruby 后，从程序 Ruby【版本】运行它，用 Ruby 启动命令提示符。从那里，运行“gem install sass”。

Apache

为了在开发环境之外的 Android 设备上测试移动网站，需要一个 web 服务器。Mac OS X 预装了 Apache，所以只需要打开它。

为此，进入系统偏好设置共享并启用网络共享，如图 1-7 所示。单击创建个人网站文件夹按钮。这将为您创建一个文件夹，将您的网页内容储存在您的 Mac 帐户中，以便在网页浏览器中查看。要测试它，请单击按钮上方的链接。这将打开带有欢迎页面的网站。

图 1-7。??【OS X 狮子】上启用网络共享

总结

既然您的开发环境已经设置好了，您就可以开始为 Android 编写和测试移动网站了。这将为您提供一个坚实的平台来开发小型和大型的移动 web 应用。

二、为 Android 创建移动 Web 应用

既然您的开发环境已经设置好了，那么您一定渴望深入研究一些代码！

在你开始之前，本章将带你了解移动网络与传统桌面环境相比的基本原理。

如果您可以一次构建和部署一个应用，并让它立即在所有设备上可用(不仅仅是 Android)，生活将会简单得多。移动网络旨在解决这个问题。原生应用有其优势，当它们需要大量的图形处理、CPU 和 RAM，以及访问 Android 操作系统的几乎所有方面时，它们就会发挥作用。

像 Mozilla 这样的浏览器供应商正试图改变这种情况，并向网络标准倾斜。通过利用 Android 的原生 API，并通过浏览器中的 JavaScript APIs 向 web 开发人员提供这些 API，我们有可能在不久的将来开发出与原生应用开发人员相同的 API。与此同时，将 HTML5 引入移动设备有助于填补我们等待的空白，并提供一个坚实的基础。诸如 PhoneGap、Rhomobile 和 Appcelerator 等多种基于手机网络的应用框架将取代未来浏览器目前为我们提供的草案规范。

通过认可 web 标准，我们应该可以说，我们为 Android 手机和平板电脑部署的相同 web 应用现在和将来也可以在 iOS 和 Windows Phone 7 手机和平板电脑上工作。

本章将带你了解一些关于移动网站设计和开发的基本原则。

• What’s different about the mobile web?

  您将了解移动网络与桌面的不同之处，以及如何确保移动用户从他们可用的控件(他们的手指)中获得最佳体验！

• Catering to your audience

  在这里，您将了解受众如何影响您设计和布局移动网站，如何区分内容的优先级，以及如何为目标受众提供最佳功能。

• Web vs. native apps

  如果你对是否开发纯本地应用、混合应用或纯 web 应用犹豫不决，那么这将带你了解每种解决方案的优缺点。

• The first line of code: Hello World

  这最后一节将带您了解应用的构建模块，例如设置 ANT 进行自动部署，以及构建和压缩 SASS/CSS 文件和 JavaScript。

移动网络有什么不同？

迎合 3.654 亿永久连接用户的潜在受众使移动网络成为最令人兴奋的开发平台之一。为桌面环境创建 web 应用是令人满意的。但是，用户只能使用一个指点设备和一个键盘来与您的作品进行交互。移动网络带来了一个全新的可能性世界。移动设备充当交互元素的空白画布，用户只需触摸即可与之交互。作为一名开发人员，你可以通过占据整个屏幕，让用户沉浸在你的移动网络应用的世界中，来创造一种更加亲密的体验。

不幸的是，尽管移动网络带来了现实世界中的所有优势，但在平台继续发展的同时，您也将面临桌面环境中同样的开发和用户体验绊脚石。

物体/特征检测

移动网络上可供开发者使用的 API 的碎片化可能是一个问题。解决跨浏览器 API 差异的最常见解决方案是使用 JavaScript 来检测浏览器或设备，并根据使用的浏览器提供不同的样式表或执行特定的 JavaScript 片段。这种方法被称为用户代理(UA)嗅探或浏览器嗅探。清单 2-1 显示了一个通用的 UA 嗅探脚本。

清单 2-1。 用于 UA 嗅探的 JavaScript 代码

`// Get the user agent string
var browser = navigator.userAgent;

// Check to see whether Firefox is not in the string
if(browser.match(/Firefox/) === null){

// If it’s not Firefox, send the user to another page
   window.location.href = “sendstandardmessage.html”;

} else {

// If it is, use the Mozilla SMS API to send an SMS
   navigator.mozSms.send(“01234567891”, “My Message”);

}`

UA 嗅探可能有什么问题？虽然您将为 Firefox 提供支持，并为其他浏览器提供后备，但您将无法支持可能与 Firefox 具有相同 API 的浏览器。

这个特殊的 API 也只在 Firefox 11+中可用，所以您还需要确保该版本包含在 UA 嗅探脚本中。

当您开始增加浏览器检测脚本的粒度时，由于必须不断更新嗅探代码以适应新的浏览器和版本，您也降低了可维护性并增加了复杂性。不知不觉中，您的 JavaScript 库变成了不可维护的意大利面条代码。

更好的方法是通过物体检测。修改后的代码可以在清单 2-2 中看到。首先，我们发现 SMS API 是否存在。如果它不存在，我们将用户发送到另一个页面；如果是的话，我们就可以发送短信了。

清单 2-2。 用于对象检测的 JavaScript 代码

`// Check to see whether navigator.mozSms is an object (if it exists)
if (typeof navigator.mozSms === “object”){

// If it does, send a message using the built-in SMS API
   navigator.mozSms.send(“01234567891”, “My Message”);

} else {

// If it doesn’t, send the user to another location
   window.location.href = “sendstandardmessage.html”;

}`

对象检测的方法还允许我们为浏览器特定的 API 提供回退。Firefox 11 nightlies 目前只支持 SMS API，但未来可能会有其他浏览器和其他设备通过不同的方法或类支持相同的实现。

我们可以使用一个类将这变成我们应用的一个特性。我们可以在一个方法中委托消息的发送，如清单 2-3 所示。这在理论上应该允许我们使用自己的 API 在应用中发送消息。当浏览器供应商将 SMS API 添加到他们的浏览器中时，我们只需要将该方法添加到单个位置，而不是在整个应用中查找和替换它。

清单 2-3。 使用委托发送消息，用我们自己的 Web 服务作为后备

`var Message = function Message(message, recipient){

this.message = message;
   this.recipient = recipient;

this.sendSMS = function sendSMS(recipient){

if(typeof navigator.mozSms === “object”){

// Send SMS using the user’s mobile phone
         navigator.mozSms.send(this.recipient, this.message);

} else if (typeof navigator.otherSms === “object”) {

// Use another browser’s SMS implementation
         navigator.otherSms.sendMessage(this.message, this.recipient);

} else {          // If sending via the user’s mobile isn’t possible,
         // send the message using a third-party web service
         this.ajaxSend(this.recipient, this.message);

}

}

function ajaxSend(recipient, message){
      // Send the SMS using a web-based SMS gateway via Ajax
   }

}

var messageInst = new Message(“my message!”, “01234567891”);
messageInst.sendSMS();`

正如你从清单 2-3 中看到的，无论浏览器的功能是什么，我们都可以使用对象检测来确保用户获得相同或相似的体验，无论设备的功能是什么。

使用 JavaScript 检测这些利基特性非常容易。但是如何测试 CSS3 或 HTML5 的功能，并为 CSS3 动画和 3D 转换等功能提供向后兼容性呢？

一个名为 Modernizr 的 JavaScript 库可以帮助您实现这一点。它使用相同的对象检测方法来检测用户 web 浏览器的 HTML/CSS/JavaScript 功能。

它通过向 HTML 标签添加类来修改 DOM(文档对象模型),以便为您自己的 CSS 和 JavaScript 特性检测提供挂钩。图 2-1 显示了这在 haz.io 中的作用。这将在第七章中详细介绍。

图 2-1。 使用 Modernizr 检测 haz.io 上的特征

屏幕尺寸和像素密度

在开发移动 web 应用时，您可能希望创建一个对平板设备和移动设备具有相同功能的应用，但呈现不同的视图或布局，以利用设备的额外空间或方向。媒体查询有助于促进这一点。

使用媒体查询和弹性设计的组合，您可以生成响应用户显示的视图，而不是检测用户的设备类型并为其提供视图。这就是所谓的响应式网页设计。

这种开发方法比根据用户使用的设备的类型来决定用户应该如何浏览你的网站要优雅得多。相反，你应该关注可用的空间和可用的像素密度。

像素密度是一个概念，它允许具有相同物理尺寸屏幕的移动设备根据每平方英寸可用的像素数量而改变分辨率。

Android 设备分为三类像素密度:

• 低的
• 中等
• 高的

这对您的移动 web 应用有什么影响？当您为普通网站制作图像时，您制作的单个图像不能在所有屏幕类型上缩放和工作，因为布局将随图像本身缩放以适合固定宽度或弹性布局。

对于移动网站，您通常会创建一个移动应用来适应整个视窗，并具有相同的尺寸，而不管设备的像素密度如何。

例如，如果您为低像素密度屏幕制作 500 像素宽的图像，它在高密度屏幕上会显得更小。这是因为 500 px 在高密度屏幕上不会像在低密度屏幕上占用那么多空间。

移动浏览器的解决方案是根据目标密度放大或缩小图像。例如，如果您为中等密度的屏幕开发应用，浏览器将为低密度屏幕缩小图像，为高密度屏幕放大图像。无论以哪种方式缩放图像，都会导致开销，放大图像时会出现像素化，缩小图像时会出现潜在的失真。

为了解决这个问题，我们可以专门为高密度屏幕开发应用，并允许手机缩小图像。就 CPU/GPU 和网络活动而言，这可能非常昂贵。这两个因素都会对渲染时间产生影响，并且可能会影响下载不必要资源的用户口袋。或者，我们可以使用媒体查询来确保为正确的显示类型提供正确的内容。为此，您必须将viewport元标签的target-densitydpi属性设置为device-dpi，并使用媒体查询导入特定于像素密度的样式表，如清单 2-4 所示。

清单 2-4。 使用媒体查询像素密度–特定样式

`// Set the viewport to match the devices pixen density and width

// Pull in the main stylesheet

// Pull in high, medium, and low stylesheets to provide pixel density
// specific images

`

正如你在清单 2-4 中看到的，每一类显示器的像素比率如下。

• 低:0.75
• 中等:1.0
• 高:1.5

我们使用通用的移动样式表，以便在设备不匹配任何像素比率的情况下，我们可以提供备用图像。然后，我们使用每个像素密度类别的样式表来覆盖图像。

像素密度可能是一个难题，因为这意味着对于您在应用中使用的每个图像，您必须生成两个不同大小的图像。这也意味着，即使您今天创建了最高像素密度的图形，明天您也可能不得不为另一台像素密度更高的显示器重新导出所有内容。在选择图形包来创建你的移动网页设计时，一定要记住这一点。

迎合你的观众

记住你为谁写你的应用和他们用什么来和你的工作互动一样重要。第一步是确保你理解你的用户会用你的应用做什么。为此，您必须对其进行分类。

对你的应用进行分类将有助于你根据你的类别中的其他应用是如何设计的以及它们有什么样的特性来制定通用的交互规则。这听起来像是复制，但是它将帮助用户根据他们以前的经验快速直观地了解如何使用您的应用，从而在最少的时间内启动并运行它。

重要的是要记住，你可以建立在这些规则之上，你不必坚持它们。只要你能让你的用户打开你的移动网络应用，玩几分钟，然后马上说“我明白了”，你就完成了你的工作。

移动 web 应用有许多种类，但大多数都可以归为以下几类。

• 基于任务
• 社会的
• 娱乐

基于任务

基于任务的应用本质上非常简单。它们是为日常使用而制造的省时设备。这可以是从查找火车时刻到查找最近的酒吧或酒吧在哪里的任何事情。

有几次，我站在伦敦滑铁卢火车站的中央，盯着火车时刻表，看起来茫然和困惑，只是拿出手机启动火车时刻应用，以更快地找到火车时刻。

重要的是要记住，如果一个用户不能用你的应用在最短的时间内完成一项任务，他们会关闭你的浏览器窗口，另找一个能更快完成同样任务的浏览器。

对于基于任务的应用，有两条基本信息可以用来帮助用户更快地执行任务。

• 用户在哪里？
• 他们用的是什么设备？

这两条关键信息对您的应用来说很容易获得，了解它们将会带来很大的不同。

找出用户的物理位置和他们正在做什么将有助于你在用户访问你的移动网络应用时先发制人。

举例来说，如果你正在创建一个旅程规划器，有几件关于你的用户的事情你应该考虑。

• 用户在哪里？他们的网络连接是否有限(例如，3G/EDGE 或更糟的 GPRS)。
• 用户在移动吗？他们有时间边走边填表，用拇指输入数据吗？

这些因素不仅会影响交互元素(如输入表单)的呈现方式，还会影响如何编写代码来减少用户完成任务所需的工作量。

在图 2-2 和图 2-3 中，您可以看到在创建基于位置的工具时，了解和使用用户的位置并理解他们的情况会带来多大的不同。

图 2-2。 TFL 手机网站用户旅程

在图 2-2 中，你可以看到 TFL 旅程规划移动网站。上面的用户旅程描述了最坏的情况。该用户在移动中，容易犯数据输入错误。因此，为了完成任务，用户必须通过两次额外的页面加载，加载更多的表单字段。

有两个额外的页面来帮助用户验证有什么问题？两个额外的页面相当于超过 3G 的 4 秒以上的加载时间。您还必须考虑用户处理页面和响应页面所需的时间。

我们如何改进 TFL 移动网站？

• 增加反馈回路。我们可以在用户使用自动完成功能输入出发地/目的地位置时向他们提供建议。然后，他们可以选择一个适合他们的建议来预填充旅程规划表单字段。
• 我们可以使用用户的当前位置作为他们旅程的起点/终点的建议。
• 如果我们使用本地存储，我们还可以向用户建议最近目的地的列表。例如，如果我们知道他们刚刚计划了去某个地方的旅行，那么当他们重新打开移动 web 应用时，很有可能会想知道如何返回。

图 2-3。 BUSit 移动网站用户旅程

图 2-3 显示了一个来自 busitlondon.co.uk 的好例子。在第一次启动移动网络应用时，它会尝试查找您的当前位置。当用户键入开始和结束位置时，它会建议用户使用 Google Maps API 和自动完成来选择选项。您还可以随时选择用户的当前位置。

在你计划好你的目的地后，它会给你建议路线。所有这些信息都包含在一个页面上，无需重新加载页面。用户可以轻松地更改或修改视图，而不必等待图形(除了地图切片)加载。这提供了更多的“本地应用”的外观和感觉。

社交

社交应用的主要目标是促进与朋友或其他感兴趣的人联系和交流的能力。与社交移动网络应用交互所花费的时间通常比使用基于工具的应用所花费的时间要多得多。

社交媒体应用的主要目标通常有三个。

• 用户通过访问来消费内容。
• 用户通过访问来贡献内容。
• 用户访问参与。

这三个基本规则支撑着当今几乎所有的社交移动应用。如果用户不贡献内容，就没有内容可供其他用户消费和参与。

仅仅因为用户在社交移动网络应用上花费更多的时间，并不意味着完成一项任务(比如分享内容)的途径应该与基于任务的应用有任何不同。应该考虑用户情况的相同因素。应该是既容易分享内容，又容易消费内容。

举个例子，Twitter 和脸书在功能集上截然不同，但这两个应用在移动网络上的主要目标都是让用户更容易消费、贡献和参与。

图 2-4 显示了脸书触摸式移动网站的三个屏幕(左侧)。登录后，您会看到脸书新闻提要，因此您可以立即使用内容。您还可以看到三个清晰而独特的按钮来分享内容，如您的状态、照片和当前位置(签到)。顶部还有一个工具栏，以模式菜单或弹出菜单的形式为您提供与您相关的内容和更新(好友请求、消息和通知)。更多的功能在隐藏菜单中，这为添加更多的次要功能和动作留下了余地，而不会弄乱应用的其余部分。

图 2-4。 脸书 Touch 和 Twitter 移动网站让分享和消费内容变得很容易。

Twitter 的核心功能可以在它的顶部工具栏中找到。共享内容的清晰操作按钮以蓝色突出显示，带有独特的图标。登录后，如果用户使用过 twitter 网站，就会知道这是一个分享内容的按钮。同样的设计模式现在在 Twitter 的桌面、移动和网络版本中引起了共鸣。

娱乐

基于娱乐的应用主要是为了满足某种形式的无聊而创建的。解决方案有多种形式，从显而易见的游戏到交付音乐和视频内容。娱乐应用通常被设计成让用户沉浸在应用的环境中。这甚至可以通过当今移动网络上最基本的 HTML5 游戏来实现。

网络应用与本地应用

在过去的几年中，一个很大的争论和讨论的原因是，是将一个项目构建为一个本地应用还是一个移动 web 应用。两者各有利弊。但是，重要的是要记住，您选择的解决方案应该基于特定项目的需求和您作为开发人员的能力。最重要的是，选择能最快完成项目的解决方案！

有几个因素将帮助您决定是创建移动 web 应用还是本地应用。

• 您是否已经知道如何为目标平台开发
• 您的应用是依赖网络连接还是某种形式的在线存储的动态数据
• 您的应用依赖哪种类型的设备功能(例如，GPS、加速度计、陀螺仪、地址簿、日历、密集的 CPU/GPU 操作)
• 您的项目现在或将来是否有机会将功能移植到其他平台(例如 iOS、Blackberry、Windows Phone、desktop)
• 您发布应用的频率，以及您将如何处理用户不在他们的设备上更新您的应用的情况
• 时间和预算

如果您已经知道如何使用 web 标准进行开发，那么移动 web 应用可能是最好的解决方案。但是，如果您已经可以针对目标平台进行开发，那么开发一个原生应用可能会更有优势。然而，这将稍微关闭一个可以在其他平台上运行的应用的大门，因为除非您使用一个跨平台的应用框架，如 Marmalade，否则需要为所有平台重新创建相同的应用。

制作一个移动 web 应用是一种经济有效的方法，在将应用本地化之前，可以在所有平台上对其进行测试或原型制作。通过使用分析，你可以看到你应该把哪些平台作为原生应用的目标。通过进行用户研究，您可以看到创建一个具有特定于平台的特性的原生应用是否对您的用户有利。

如果您的应用依赖于无法通过 web 浏览器访问的 API，如电话簿、日历、陀螺仪或加速度计，那么移动 web 应用可能是不可能的，因为这些 API 目前无法通过大多数移动 web 浏览器访问。

如果您的应用依赖于动态数据，那么使用 web 标准开发应用可能是一个明智的选择，因为您可以使用 Ajax 通过网络向应用快速交付内容。您还可以使用移动 web 应用缓存和存储文件，这样当没有网络连接时，您的应用仍然可以脱机使用。

如果您经常为移动应用提供更新，您可能会遇到用户没有像您希望的那样经常更新到最新版本的问题。通过创建一个移动网络应用，你可以简单地将更新推送到你的网络服务器，你的所有用户将立即拥有你的应用的最新版本。

在图 2-5 中，你可以看到 Twitter 原生应用(左)和移动网络应用(右)展示了作为原生应用的社交应用和作为移动网络应用的区别。如你所见，没有真正的区别。移动 web 应用中要放弃的主要特性是使用第三方本地应用共享内容的能力。Twitter 还取消了在移动网络应用上分享照片的功能。对象/特征检测可以提供在某些设备上上传照片的能力。

图 2-5。 Twitter 原生应用(左)和 Twitter 移动网络应用(右)

到目前为止，本节收集的信息应该有助于您决定是使用本地网站还是移动网站。

然而，还有第三种选择。多种基于 web 的电话应用框架，如 PhoneGap、Appcelerator 和 Rhomobile，将允许您用 XHTML/JavaScript 和 CSS 构建应用，但利用一些可能只适用于本地 web 应用的 API。

这些框架为你开发应用提供了一个 web 视图，并通过使用 JavaScript 作为两者之间的桥梁，为移动 API 提供了一个代理。图 2-6 显示了多种手机网络应用框架的结构。

图 2-6。 一个多手机网络应用框架的结构

以这种方式部署您的移动 web 应用会给您带来新的机会。我们知道，在某个时候，移动网络浏览器将提供 API 来与第三方应用进行交互，并利用移动设备的硬件，如 CPU/GPU 和摄像头。所以继续开发浏览器是有意义的。然而，多电话基于网络的应用框架有助于将本地应用可用的 API 和服务带到网络应用中。

通过以这种方式构建应用，您可以一次构建并部署一个功能有限的移动 web 应用。然后，您可以在基于 web 的多电话应用框架内使用对象/功能检测来逐步增强该应用，就像增强本地应用一样。这让你两全其美。

第一行代码:Hello World

现在是你写第一行代码的时候了。在这个 Hello World 应用中，您只需创建一个带有“Hello World！”并显示在 Android 虚拟设备上。

设置

首先打开 Aptana Studio。您将需要创建一个新项目，因此转到文件新建 Web 项目。

您将看到一个类似于图 2-7 中的屏幕。输入项目名称，然后单击完成。我选择了第二章作为我的。

图 2-7。 Aptana 的新 Web 项目向导

这将在 Aptana 中创建新的空项目。新项目将出现在左侧的应用浏览器面板中。

HTML

为移动网络编写与为桌面网络应用编写没有什么不同。我们将从创建一个基本的 HTML5 文档开始。

创建新文件的方式与创建新文件夹大致相同，只是选择文件而不是文件夹。将该文件命名为index.html。确保该文件存在于项目的根目录中是很重要的。下面的代码将构成我们的 HTML 文件的基础。

**清单 2-5。**Hello World 的 HTML 源代码！

`

      
      

Hello World!

`

如果您不熟悉清单 2-5 中的一些 HTML 元素，第一行是新的 HTML5 doctype。在 HTML5 中，您不需要指定 DTD，这通常可以在 XHTML 1.1 页面中找到。清单 2-6 展示了 XHTML 1.1 文档类型声明和 HTML5 文档类型声明的区别。

**清单 2-6。**XHTML 1.1 Doctype 声明和 HTML5 Doctype 声明的区别

`

`

如您所见，现在不需要搜索或记忆 DTD 路径的位置，也不需要指定 HTML 版本。

在 HTML 标签中，我添加了两个属性:<html lang="en-GB" dir="ltr">. lang将指定文档中使用的语言，dir决定阅读方向。从左到右dir被设置为ltr，英国人lang被设置为en-GB。

前进到 head 元素，有两个 meta 标签，如清单 2-7 中的所示。

**清单 2-7。**源代码中的元元素

<meta charset="UTF-8" /> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no; target-densitydpi=device-dpi;"/>

第一个 meta 标记指定了文档中使用的字符集。这通常应该是 UTF 8，这将涵盖大多数语言字符。

第二个 meta 标记专门用于控制移动网站上的布局或视口。有了这个 meta 标签，我们可以使用width属性将页面的宽度设置为等于、小于或大于视窗(浏览器屏幕的可视区域)。

您还可以使用这个标签来控制用户通过initial-scale和maximum-scale属性放大您的 web 应用的程度。

user-scalable属性是一个标志，用于允许或禁止用户通过挤压或点击来放大或缩小您的移动 web 应用。

最后，target-densitydpi属性用于指示网页应该如何根据用户屏幕的像素密度进行缩放。将此属性设置为device-dpi将阻止图像自动放大高像素密度的设备或缩小低像素密度的设备。这有助于防止设备缩放图像时常见的图像像素化。在第三章中，你会发现如何使用媒体查询来防止图像在高/中、低密度设备上像素化。清单 2-8 显示了 viewport meta 标签的完整定义。

清单 2-8。 全视区元标签定义

<meta name="viewport"    content="       height = [pixel_value | device-height] ,       width = [pixel_value | device-width ] ,       initial-scale = float_value ,       minimum-scale = float_value ,       maximum-scale = float_value ,       user-scalable = [yes | no] ,       target-densitydpi = [dpi_value | device-dpi |                            high-dpi | medium-dpi | low-dpi]    " />

清单 2-9 显示了<title />标签，它包含了页面的标题。

清单 2-9。 标题标签

<title>My First Mobile Web App</title>

最后，如清单 2-10 所示，在主体中，有一个包含文本“Hello World！”的<h1 />标签。

清单 2-10。 标题和链接标签

`

Hello World!

`

测试

在继续之前，您应该使用 Aptana 中的 Android SDK 创建一个 Android 虚拟设备(AVD ),以测试您的网站并查看其进度。出于本章的目的，您将创建一个功能最少的简单 AVD。

首先进入窗口 AVD 管理器，如图图 2-8 所示。

图 2-8。 创建新的 Android 虚拟设备

当 AVD 对话窗口出现时，点击位于窗口右侧的新建。

在创建新的 Android 虚拟设备(AVD)对话框中，使用以下参数。

• 名称:我的测试
• 目标:Android 4.0–API 级别 14
• SD 卡:大小:100 兆字节
• 快照:已启用
• 皮肤:内置:WVGA800
• 硬件:
  • 抽象液晶密度:240
  • 最大虚拟机应用堆大小:24
  • 设备 ram 大小:1024

设置好所有选项后，单击创建 AVD 按钮。您的新 AVD 将出现在 Android 虚拟设备管理器中。选择它并单击开始。将会出现一个新的对话框，您应该在其中接受默认值并单击 Launch。众所周知，avd 启动和运行极其缓慢。还有其他选择，但不会在本书中讨论。

几分钟后，您应该有一个虚拟 Android 设备启动并运行。单击互联网图标启动浏览器。

现在，您需要将应用部署到 web 服务器上。在第三章的中，您将找到更多关于自动部署应用的信息，但是现在您可以使用 Aptana 将项目导出到适当的文件夹中。转到文件文件系统并点击下一步。选择第二章，并在“至目录”中选择浏览。浏览到主目录中的站点文件夹，然后选择打开。单击 Finish，Aptana 将开始向该目录发布文档。](03.html)

你现在可以使用 AVD 的内置浏览器和你在第一章 ( [your-ip-address/~username/Chapter-2/](http://your-ip-address/~username/Chapter-2/))中记下的网址访问网站。如果一切正常，你应该会看到 AVD 屏幕上的图 2-9 中显示的内容。

图 2-9。 你好世界！

总结

在这一章中，你应该已经了解了三种不同类型的 web 应用:基于任务的、社交的和娱乐的。

您应该了解用户如何与您的应用交互。除了本书之外，你应该了解在开发移动 web 应用时如何考虑用户的潜在情况，以及这将如何影响你的功能、设计和用户体验。

这一章应该让你深入了解 JavaScript 开发的最佳实践，以及响应式设计的皮毛。

最后，这一章应该已经给了你一些关于是否将你的项目作为一个本地的，web 的，或者多手机的基于 web 的应用框架项目来开始。

三、HTML5

随着生产跨平台移动应用的需求，HTML5 对移动行业来说从未如此重要。它是创建简单但功能丰富的应用的最佳候选之一，这些应用可以构建和部署一次，以支持当今所有主要的智能手机和平板设备。

对基于 HTML5 的应用的常见误解是，它们可能很慢，没有响应，并且达不到用户对原生移动应用的预期速度和质量。这仅仅是对的一半，你可能已经从上一章看到了；这取决于正在构建的应用的类型。例如，App Store 上提供的英国《金融时报》应用似乎是一个原生应用。然而，如果你仔细观察，你会发现英国《金融时报》的应用只是英国《金融时报》的移动网络应用(app.ft.com)，包装在原生应用的网络视图中。

从图 3-1 中可以看到，iPhone 和 Android 的应用看起来都很相似。抛开 UI 带来的几个特定于平台的增强，它们实际上是同一个应用。

**注意:**使用 PhoneGap 等多种基于手机网络的应用框架，构建一个网络应用并将其展示给各种应用市场并没有错。它增加了您的应用的曝光率，并使您的用户更容易访问它。如果 App Store 的条款和条件变得对你不利，以这种方式制作你的应用也可以为你提供一个即时的解决方案。

图 3-1。 原生《金融时报》安卓应用(左)和 iOS 网络应用(右)

在这一章中，你将学习 HTML5 的关键基础知识，以及如何在移动网络中利用它。

您还将了解如何为移动设备编码视频和音频内容，以及有助于向用户交付这些内容的服务类型。

本章将更深入地介绍如何使用媒体查询来根据屏幕属性设计内容的样式。

最后，您将了解新的表单元素，以及如何提示某些类型的输入数据来影响浏览器中的键盘。

有什么新消息？

HTML5 在 HTML4/XHTML1.1 的基础上有了重大飞跃。它提供了新的 HTML 标签，如header、footer、hgroup、nav、section和article，进一步改进了我们标记文档的方式。这使我们能够生产更有意义和机器可读的内容。比如我们现在可以用<。除此之外，HTML5 还带来了 API 访问的标准化，比如地理定位、画布、web 套接字和 web 存储。

HTML5 规范中有许多新的变化，但在这一章中，我们将重点关注适用于移动设备的变化。

HTML5 规范中的变化将在提供的代码示例中显而易见。但你可能会问自己，这有什么意义？不管你是否使用新的 HTML5 元素，你的用户都会看到同样的东西。有几个原因可以解释为什么做出这样的改变会对你的用户产生影响。

• 您可以生成更清晰、更易于维护的代码。
• 机器消费者会更容易阅读和理解你的代码。机器包括搜索引擎机器人、浏览器插件和依赖于理解文档内容结构的功能。
• 您不必在文档中定义那么多的类和 id。您可以更多地依靠 cascade 来为您完成大部分工作。

**注意:**虽然示例中没有显示<body />、<html />或<head />标签，但是所有元素都可以放在文档的主体中，除非另有说明。

<条/ >

<article />元素用于表示页面上的独立内容，比如博客文章、新闻文章或评论。原则上，一篇文章应该包含自己的页眉、内容和页脚。您还可以在元素中嵌套关于文章作者的信息。您还可以将文章元素嵌套在另一个文章元素中，以帮助进一步组织内容，例如文章评论。

图 3-2 显示了一个<article />元素相对于一个 HTML5 文档的位置。清单 3-1 显示了一些基本 HTML5 元素的结构，以及<article />元素在这个层次结构中的位置。

图 3-2。 <article />元素(以灰色突出显示)与在移动网站文档中找到的元素相关

**清单 3-1。**html 5 中一篇文章的拟议结构

`

Article Title

Created by Daniel Carpenter on
          March 15^th 2012

  

Article Content

Written by
            
                Daniel Carpenter
            

Follow him on
            Twitter

`

清单 3-1 中显示的元素似乎有意义。<header />元素包含与文章相关的所有标题信息，比如标题、作者和发布时间。请注意，文章中的内容不需要包装在另一个元素中。最后，<footer />包含关于作者的信息，它嵌套在一个<address />元素中。

将此与清单 3-2 中的进行比较，它显示了在以前的 HTML 版本中您可能是如何编写的。

**清单 3-2。**html 4 和 Prior 中一篇文章的拟议结构

`

Article Title

Created by Daniel Carpenter on
          March 15^th 2012

Article Content

Written by
            
                Daniel Carpenter
            

Follow him on
            Twitter

`

正如你从清单 3-2 中看到的，这个标记没有真正明显的结构。有许多 div 都有与之相关的类；然而，创建这样的文档并没有真正的标准。

<暂且不提/ >

<aside />元素可以用来表示与网站主要内容无关的内容，比如 tweets、相关链接、标签和导航元素。这些通常出现在文件的左侧或右侧，如图 3-3 中的所示。

图 3-3。 具有<aside />元素的文档结构(以灰色突出显示)

我们可以根据屏幕大小隐藏 aside 元素，并在用户单击按钮显示它时显示它，从而利用 aside 元素。这种设计模式可以在 facebook mobile web 应用中找到，并将在第四章的研讨会中进行更深入的探讨。

清单 3-3 展示了应该如何使用 aside 元素，而清单 3-4 展示了如何在 HTML4 中编写相同的代码。

**清单 3-3。**html 5中提出的结构

`

Places To Go

• Somewhere
• Somewhere Else

• `

  从清单 3-3 中可以看出，我们使用<aside />元素为网站导航，因为它存在于<section class="content" />元素定义的内容部分之外。<aside />元素将被浮动在内容的左边。

  为 HTML4 编写的相同标记看起来像清单 3-4 中的。

  清单 3-4。 提议在 HTML4 中搁置结构

  `

• Somewhere
• Somewhere Else

• </div class=“navigation”>

  ` `
  `

  正如您所看到的，使用 div 而不是有意义的标记使得乍一看很难理解内容。

  <音频/ >

  元素用于在网页中嵌入音频内容。这是 HTML5 的新功能，在 HTML4 中没有。对于不支持 HTML5 音频的浏览器，可以在<audio />标签中提供一个 3gp 版本音频文件的链接。清单 3-5 展示了如何嵌入一个音频文件。

  清单 3-5。 如何在 HTML5 中使用音频标签

  `

  Your browser does not support HTML5 Audio,
        click here to download

  `

  这将为手机呈现本机音频播放器。在<audio />标签中，您将看到几个<source />元素。这些用于为浏览器提供不同的音频格式，如 MP3、OGG 或 WAV。您应该指定音频文件的 mime 类型，以便浏览器选择正确的音频文件。

  图 3-4 展示了 Android 4 中的<audio />元素。

  

  图 3-4。 <audio />安卓 4 冰淇淋三明治中的元素

  <audio />标签还支持几个额外的基于媒体的属性。表 3-1 显示了这些属性及其描述。

  

  支持的媒体格式

  并非所有的媒体格式都能在 Android 上运行。表 3-2 显示了适用于大多数 Android 手机的格式。

  

  <画布/ >

  元素为你在 HTML 中绘制形状提供了一个上下文/舞台。你将在第七章的中学习如何使用 canvas JavaScript API 绘图。

  canvas API 将为您提供一种使用 DOM 元素制作图形密集型动画或绘图的替代方法。<canvas />元素支持width和height属性。元素中的任何文本都将显示给不支持它的浏览器。

  清单 3-6 显示了如何使用画布绘制一个简单的半透明正方形。

  清单 3-6。 在 HTML5 画布上画一个简单的正方形

  `
    

  Your browser does not support HTML5 Canvas 😦

  
  
  `

  如你所见，你使用<canvas />元素在 HTML 中定义了画布。对于不支持 canvas 的浏览器来说，<canvas />元素中的任何文本都是可见的。然后使用 JavaScript 在画布上绘制路径。图 3-5 显示了结果。

  

  **图 3-5。**上的渲染矩形<canvas />元素

  <图/ >和<图标题/ >

  <figure />和<figcaption />元素用于标记网页上的图形，例如代码样本、图像或图表。清单 3-7 展示了如何用 HTML5 编写 figcaption。

  清单 3-7。 创建人物和标题

  `

  

  `

  正如您在清单 3-7 中所看到的，已经使用了id属性。这将允许你使用 URL 散列从一个链接直接跳转到一个图。例如，<a href="#figure-1">Jump to Figure 1</a>可以用来直接链接到页面内的一个图。

  注意到<figcaption />已经嵌套在<figure />元素中。这允许您为用作图的项目提供标题。如果你引用文本，你也可以使用<cite />元素来引用文本的来源。清单 3-8 展示了如何使用它。

  清单 3-8。 援引消息来源

  `

  

  `

  <页脚/ >

  <footer />元素可以用来替换<div />元素，通常用于在文档中创建页脚。<footer />元素通常用于包含联系人和版权信息，以及隐私政策或条款和条件的链接。清单 3-9 展示了如何创建一个<footer />。您也可以在一个文档中使用多个页脚，例如在一个节或一篇文章中。

  清单 3-9。 在 HTML5 中创建页脚

  `

  © 2012 My Company

  `

  清单 3-10 显示了如何在 HTML4 中实现同样的事情。

  清单 3-10。 在 HTML4 中创建页脚

  `

  © 2012 My Company

  `

  图 3-6 显示了<footer />通常在 DOM 中呈现的位置。

  

  图 3-6。 具有<footer />元素的文档结构

  <表头/ >

  元素可以用来在文档中创建一个标题。标签可以在一个文档中多次使用。它通常包含一个徽标和/或一组标题元素。<header />元素最常见的用途是在页面顶部添加徽标和导航。清单 3-11 展示了如何做到这一点。

  虽然不是必需的，但是您可以用一个<nav />元素包装通常用于导航的<ul />。这使得消费者在阅读您的代码时清楚地知道它是一个导航元素。

  清单 3-11。 在 HTML5 文档中创建标题

  `

  

• Home
• About
• Contact Us

• `

  您可以使用清单 3-12 中的代码在 HTML4 中获得相同的结果。

  清单 3-12。 在 HTML4 中创建标题

  `

  

• Home
• About
• Contact Us

• `

  <【hgroup/>

  <hgroup />元素可以用来将相关的标题组合在一起，比如标题的<h1 />元素和副标题的<h2 />元素。<hgroup />元素不应包含除标题元素之外的任何元素(即<h1 />、<h2 />、<h3 />、<h4 />等)。).

  文档中<hgroup />的等级由该<hgroup />中等级最高的头元素定义。

  清单 3-13 展示了如何在 HTML5 中使用一个<hgroup />，清单 3-14 展示了如何在 HTML4 中对标题进行分组。

  清单 3-13。 使用 Hgroup 在 HTML5 中定义标题

  `

  My Header

  My Subheader

  `

  清单 3-14。 在 HTML4 中定义一组头

  `

  My Header

  My Subheader

  `

  <马克/ >

  元素可以用来突出显示文档中的文本。清单 3-15 展示了如何在 HTML5 中使用它，而清单 3-16 展示了如何使用 CSS 和 HTML 的组合在 HTML4 中实现它。

  清单 3-15。 在 HTML5 中使用 Mark 标签

  <p>This is an <mark>important</mark> reminder for Inga Lyon</p>

  清单 3-16。 高亮显示 HTML4 中的文本

  `

  This is an important reminger for Inga Lyon

  `

  <导航/ >

  元素可以用来定义页面中的导航链接。元素应该只用于定义页面中的主要导航元素，比如主导航或者侧边/子导航。您可以在<nav />元素中添加任何内容，只要它包含指向网站内容的链接。清单 3-17 展示了如何在 HTML5 中使用<nav />元素，清单 3-18 展示了如何在 HTML4 中定义一个导航。

  清单 3-17。 在 HTML5 中创建导航

  `  

• Home
• About
• Contact Us

• `

  清单 3-18。 在 HTML4 中创建导航

  `

• Home
• About
• Contact Us

• `

  <输出/ >

  元素可以用来显示计算的结果。当显示动态/AJAX 表单的结果时,<output />元素可以派上用场。不要通过修改<span />元素的内部 HTML 来显示结果，可以像设置任何其他基于 HTML 表单的输入元素一样设置值。

  **注意:**提交带有<output />标签的表单不会发送输出的值。如果您希望这样做，您必须将隐藏字段的值设置为计算结果。

  清单 3-19 展示了如何在 HTML5 中实现这一点，清单 3-20 展示了如何在 HTML4 中实现这一点。for属性可用于指定用于计算的相关输入。

  清单 3-19。 使用 HTML5 中的输出元素

  `

  +
     =
    

  `

  清单 3-20。 在 HTML4 中创建类似输出的东西

  `

  +
     =
    

  `

  <章节/ >

  元素可以用来定义 HTML5 文档中的一个部分。您可以使用<section />标签将常见的元素组合在一起，例如博客文章的章节或电子商务网站的产品信息。一个常见的误解是用<section />元素替换所有的<div />元素。如果您使用<section />元素来帮助样式化或脚本化，而不是创建语义文档，那么您可能应该使用带有类的<div />。

  清单 3-21 展示了如何使用一个<section />元素将一篇博客文章上的评论组合在一起。

  清单 3-21。 在 HTML5 中使用 Section 元素

  `

  Article Title

  Created by Daniel Carpenter on
           March 15^th 2012

  Article Content

  
    
  
          

  
              From Becci Buckley on
              March 20^th 2012
          

  
        

  This is a great article Dan, it might need some work 😄

    

  Written by
              
                 Daniel Carpenter
              

  
  

  Follow him on
              Twitter

  `

  从清单 3-21 的中可以看到，您可以在<section />元素中嵌套<article />元素。事实上，你可以在<section />标签中添加任何你喜欢的 HTML 元素。

  <时间/ >

  元素可以用来指定文档中的时间。除了为基于时间的元素提供语义标记之外，它目前似乎没有做太多事情。元素支持一个datetime属性，该属性可以用来以机器可读的格式给出日期或时间。它还支持与最近的父元素<article />相关的pubdate属性。清单 3-22 展示了如何使用<time />元素。

  清单 3-22。 使用时间元素显示文章的发布时间

  `

  Article Title

           Created by Daniel Carpenter on
           March 15^th 2012

  `

  <视频/ >

  元素可以用来在页面中嵌入视频。我将在本章后面的“用 HTML5 嵌入视频”一节中介绍这一点。

  元素提供了一种使用 Flash 在 HTML 文档中嵌入视频的替代方法。它还有几个 JavaScript APIs 来控制视频的回放。

  正在播放的视频在低于 Android 4 冰淇淋三明治的版本上会自动进入 Android 浏览器全屏，但在 Android 4 及以上版本会保持原位。

  表 3-3 显示了<video />元素可用的属性。

  

  

  元素目前也支持最流行的视频容器和编解码器。

  表 3-4 显示了 Android 浏览器目前支持的格式和 mime 类型。如何对这些格式进行编码将在本章后面讨论。

  

  在 HTML5 中处理多媒体

  随着移动设备速度的不断提高，以及移动 web 浏览器支持越来越多的视频和音频容器和编解码器，现在是探索向移动 web 应用添加视频的最佳时机。

  向移动网站添加视频时，您需要考虑几个问题。不幸的是，这并不像为某个文件扩展名或格式编码视频和音频那么简单。

  当编码 HTML5 的视频和音频时，有四件事你应该考虑。

  • 设备支持的容器
  • 设备上支持的编解码器和解码器
  • 最终视频和音频的质量
  • 最终视频和音频的文件大小

  为了播放视频，您需要使用目标设备可以理解和播放的编解码器对视频和音频进行编码。

  **注意:**编解码器由两部分组成:编码器和解码器。当您使用特定的编解码器压缩视频时，需要相同的编解码器来解压缩视频以备回放。不同的编解码器能够进行不同类型和质量的压缩(例如，H.264 将对视频进行不同于 VP8 的编码)。由于压缩视频的方式不同，不同的编解码器会对文件大小和质量产生影响。

  编码视频的质量取决于您设置的比特率；这也会对文件大小产生直接影响。如果你有一个目标文件大小的想法，你可以计算视频的比特率应该是多少，并从那里开始工作。下面的公式应该可以帮助你解决这个问题。

  *((视频比特率[Kb/秒] +音频比特率[Kb/秒]) 长度[秒]) * 0.125) =文件大小[Kb]

  网上有各种各样的比特率计算器，可以帮助你根据许多其他因素来计算视频或音频文件的比特率。这在使用命令行编码工具(如 FFMPEG 或美柯德)时会很有用。

  围绕压缩/未压缩视频和音频的是一个容器。容器通常会为视频提供多个轨道的详细信息。一个轨道将用于视频本身，第二个轨道将用于视频的音频。容器不一定描述视频或音频文件是如何被编码的，但是可以定义关于视频应该如何被编码用于该特定容器的特定标准。

  选择容器时，选择支持有限数量编解码器的容器很重要。这将使编码更加简单，因为您不必研究当前和更新的设备支持哪些编解码器。例如，Matroska (MKV)容器几乎支持目前可用的任何视频和音频编解码器，因此选择在容器中使用哪些编解码器是一项更大的任务；而 WebM 将仅支持 VP8 视频编解码器和 Vorbis 音频编解码器。这使得在为支持 WebM 容器的设备编码时任务变得更加简单。

  为了避免混淆，表 3-5 显示了在为移动设备嵌入视频时您应该提供支持的最流行的编解码器和容器。

  

  Android 文档还根据质量建议了以下分辨率，如表 3-6 所示。

  

  表 3-7 显示了 Android 上推荐的支持音频的容器和编解码器。

  支持这两个容器和编解码器应该为所有 Android 设备提供足够的支持，而不需要您进行大量的批量编码和测试。

  为移动网络优化视频

  现在，您应该对移动网络视频编码的复杂性有所了解。有许多应用可以让你为网络视频编码。其中一些是免费和开源的桌面应用(如用于 Mac/Windows 的 Easy HTML5 Video 和用于 Mac/Windows 的新 Miro Video Encoder)，其他是基于网络的托管解决方案，也提供对在线托管视频的支持(如 bitsontherun.com、zencoder.com 或 encoding.com)。

  您应该使用最佳的编码解决方案来满足您的需求。

  托管解决方案

  托管解决方案非常适合按需编码，如果您希望将大量网站流量卸载到另一台服务器上。大多数托管解决方案都提供 API，允许您通过 web 将视频推送到他们的服务。视频完成编码后，会给你一个 URL，可以用来嵌入你的视频。他们通常会消费以任何格式编码的视频，编码通常需要几分钟。托管解决方案还将提供基于设备或格式的常用编码选项列表。

  使用这些托管解决方案最简单的是 bitsontherun.com，尽管 encoding.com 和 zencoder.com 对你如何编码你的视频提供了更多的控制，如图 3-7 所示。

  

  图 3-7。encoding.com 上的?? 编码选项

  正如你所看到的，bitsontherun.com 通过提供基本选项来创建编码设置时要简单得多，如图 3-8 所示。如果你想对你的视频压缩选项有更多的控制，那么 encoding.com 和 zencoder.com 将提供最好的选择。如果你只是想编码视频，而不担心各种压缩选项，那么 bitsontherun.com 是最好的选择。如果您没有非常强大的机器，并且希望快速编码视频，或者如果您有大量视频要编码，托管编码解决方案是最佳解决方案。托管解决方案上可用的预设也在不断改进和调整。

  使用托管解决方案的缺点是，你要根据上传和下载的数量付费，而在 zencoder.com，你要根据你编码的视频时长付费。

  

  图 3-8。bitsontherun.com 上的?? 编码选项

  桌面解决方案

  桌面编码解决方案非常适合小型编码运行。如果你有一台低规格的电脑，准备好去最近的酒吧喝一两杯啤酒，同时让你的电脑旁边的风扇开着以防止它过热！对视频进行编码需要大量的处理能力，并且可能需要几秒钟来渲染一帧。这个过程可能很耗时。电脑的处理器越好，编码时间就越短。

  使用命令行工具，如 FFMPEG 和美柯德，而不是为它们提供接口的图形用户界面，会有它的优点。例如，它使您能够从用 Python、PHP 或 Ruby 编写的服务器端脚本中触发编码作业。您还可以在 bash 脚本中包装各种编码参数。这使您可以一次性对一个装满视频的文件夹进行批量编码。

  Windows 和 Mac 最简单的免费桌面解决方案是 Miro Video Converter，如图图 3-9 所示。

  

  图 3-9。??【米罗】Mac 视频转换器

  如您所见，它有一个简单的拖放 UI，可以转换成许多不同的格式。当对基于桌面的 HTML5 网站的视频进行编码时，Miro 是完美的；然而，你会希望在不影响质量的前提下，尽可能多地从移动网络视频中挤出内容。米罗，目前，不允许你调整任何输出设置。

  因此，目前最好的选择是使用 bitsontherun.com 为移动网络编码视频。

  用比特对视频进行编码

  首先要做的是前往[www.bitsontherun.com](http://www.bitsontherun.com)创建一个免费账户。一个免费的帐户将会给你一个小时的视频存储和每月 20 小时的流媒体播放时间。这应该足够写这本书了。如果您需要更多，您可以随时升级到专业帐户。

  创建帐户后，您需要为编码作业创建模板。

  模板允许您为您的视频和音频创建自定义编码模板。您可以一次性创建一个模板，并将其用于所有视频和音频文件。

  **注意:**不幸的是，如果你创建了一个模板，你必须用新模板手动重新编码任何视频。有一种方法可以通过使用 Run API 上的位来解决这个问题。

  登录进入账户页面，如图图 3-10 所示。

  

  图 3-10。bitsontherun.com 上的 账户选项

  点击账户页面上的属性选项卡(也如图 3-10 所示)。在帐户属性下，单击模板选项卡。

  从这里，您将创建两个模板。一个将用于 MP4 (H.264)，另一个将用于 WebM (VP8)。

  点击页面下方的“添加新模板”按钮，如图图 3-11 所示。

  

  图 3-11。 【添加新模板】按钮

  然后你会看到一个类似于图 3-12 所示的“创建新模板”对话框。确保已经设置了以下设置:

  • 名称:HTML5 MP4
  • 格式:MP4 视频(H.264/AAC)

  单击创建。

  

  图 3-12。 【创建新模板】对话框

  类似于图 3-13 的“模板属性”页面将出现在您面前。确保设置了以下选项。

  • 自动:自动将此模板应用到新视频
  • 目标宽度:480
  • 扩展:总是构建这个模板，即使原始模板更小
  • 视频质量:良好的质量-文件大小权衡(推荐)
  • 音频质量:良好的质量-文件大小权衡(推荐)
  • 水印:无水印

  单击保存。

  您需要为 WebM 再次重复这个过程。除了在“创建新模板”对话框中输入以下信息。

  • 名称:HTML5 WebM
  • 格式:WebM 视频(VP8/Vorbis)

  在“模板属性”页面上输入以下信息。

  • 自动:自动将此模板应用到新视频
  • 目标宽度:480
  • 向上扩展:总是构建这个模板，即使原始模板更小
  • 视频质量:良好的质量-文件大小权衡(推荐)
  • 音频质量:良好的质量-文件大小权衡(推荐)
  • 水印:无水印

  

  图 3-13。 模板属性

  现在，您应该可以开始将视频上传到您在 Run 帐户上的 Bits。为此，转到“视频”选项卡，点击右侧边栏中的“上传新视频”，如图 3-14 所示。

  

  图 3-14。 【上传新视频】按钮

  你会看到“上传新视频:步骤 1”对话框，类似于图 3-15 所示。

  

  图 3-15。 “上传新视频:步骤 1”对话框

  在字段中输入适当的信息。由于这是一个测试视频，你可以选择任何你喜欢的。从这里开始，“我的视频”将指您刚刚上传的视频。点击“继续上传”按钮。

  你现在应该在“上传新视频”对话框的第 2 步。点击浏览按钮，如图图 3-16 所示，选择您希望用作样本视频的任何视频。请确保您选择的视频小于 100 MB 否则，您可能需要等待一段时间才能上传测试视频。

  

  图 3-16。 “上传新视频:步骤 2”对话框

  上传完成后，运行中的 Bits 将开始编码过程。您的视频现在可以嵌入了。您可以下载视频并将其复制到您的移动 web 项目中，或者使用<video />元素中的src属性直接链接到该项目。下载它的好处是,不必担心当你达到极限时，运行中的数据会被删除。

  用 HTML5 嵌入视频

  在网络上嵌入视频曾经是一个非常冗长的过程。在 Flash 流行之前，所有的浏览器、计算机，甚至同一操作系统的同一版本都有不同的编解码器和容器支持。没有真正的通用格式，你不能简单地将同一视频嵌入几种格式，这样浏览器就可以为用户选择正确的视频。

  Flash 的出现解决了大部分问题。只需要一个插件就能播放所有格式的视频，这是网络视频的“闪亮盔甲骑士”。以至于几乎每个网站都用它来向用户发送视频。

  然后智能手机出现了，Flash 移动版成了一场噩梦。它需要大量的 CPU，会像吸血鬼一样耗尽手机的电池。几乎任何便携式设备上的闪存也是如此，消耗了大量的 CPU 功率，这不仅影响了机器的性能，还影响了冷却 CPU 和供电的电池消耗。时至今日，Flash 仍然在 MAC 上消耗大量的 CPU。

  除此之外，开发人员通常不会考虑手机来制作基于 Flash 的内容。因此，当在面向桌面的移动设备上观看视频时，你通常会得到一个 500 MB 的高清视频，但它并没有真正针对你的手机进行优化。这对用户的口袋也有影响，因为每月 500 MB 的数据计划将在几分钟内被一个视频消耗掉。

  HTML5 出现了。最后，重点是浏览器、标准和硬件加速，不需要第三方插件。

  HTML5 带来了 HTML5 视频。HTML5 视频为浏览器提供了一种支持在浏览器内解码视频的方式，而不管平台上支持的编解码器如何。这在现在意味着，如果一个用户在使用 Android 浏览器，他们肯定会有对 WebM 或 MP4 的支持；而且如果他们用的是 Safari 浏览器，肯定会支持 MP4 而不支持 WebM。不仅如此，HTML5 视频还支持多种不同类型的视频源。这意味着您可以提供针对每个编解码器和容器优化的视频文件。浏览器将从资源列表中选择最佳的编解码器和容器，对其进行流传输，并将其交付给用户的浏览器。

  HTML5 规范的新特性还包括支持视频源中的媒体查询。这可以确保如果您使用平板设备，您可以获得更高分辨率的视频，而不必选择您希望观看的媒体质量。如果您使用的是移动手机，您将获得针对您的手机优化的视频，文件大小较小，因此它不会消耗您所有的数据许可。

  **注意:**视频媒体查询存在于 HTML5 规范中，但似乎还没有任何浏览器支持它。

  将你的视频嵌入 HTML5 相对简单。您使用video标签并指定视频的width和height属性。然后，您可以指定视频的标志帧。海报帧是视频中的一张静态图片，在用户单击播放按钮之前，您可以使用它向用户显示。

  在 Aptana 中创建一个名为 tutorials 的新文件夹，并在其中创建一个名为 video 的文件夹。该文件夹将用于本练习。在 video 文件夹中，创建一个名为 media 的文件夹。将您已编码并从 Bits 下载的视频和海报图像文件复制到媒体文件夹，并按如下方式重命名。

  • video.webm
  • video.mp4
  • poster.jpg

  在视频文件夹中创建一个名为index.html的新文件。您的文件夹结构应该如下所示:

  • 教程
    • 录像
    • 媒体
      • video.webm
      • video.mp4
      • poster.jpg
    • index.html

  在 Aptana 中打开index.html并输入来自清单 3-23 中的 HTML。

  清单 3-23。 在 HTML5 中嵌入视频

  `

  
        
        
        
    

  
          
          

  
              Your browser does not support HTML5 Video, click here
              to download
          

  `

  保存并导出您的视频。在您的 Android 浏览器中找到该文件。网址应该是[/tutorials/video/media/](http://<yourcomputeripaddress>/tutorials/video/media/)。您应该会看到一个类似于图 3-17 的屏幕。

  

  图 3-17。 HTML5 视频内嵌内容

  点击播放按钮，视频将开始缓冲和播放。从 Android 4+开始，Android 浏览器将与内容一起内联播放视频，而不是自动全屏。这带来了一个小问题，因为它在新旧设备处理视频的方式上存在不一致。这个问题的解决方案是使用 JavaScript video API 自动将视频放大到全屏。这将在第七章中介绍。

  为移动网络优化音频

  幸运的是，Bits on the Run 还支持音频编码和网络托管。但是，由于编码音频比编码视频占用的 CPU 资源少得多，因此您可以使用桌面软件来完成这项工作。最流行的免费跨平台音频应用是 Audacity。您可以从 Audacity 网站的[audacity.sourceforge.net/download/](http://audacity.sourceforge.net/download/)下载并安装当前的稳定测试版。

  当对移动网络的音频进行编码时，同样的规则也适用。

  • 确保文件很小。
  • 确保最终音频的质量足够好，可以通过耳机和小扬声器听到。

  和视频编码一样，你需要在质量和文件大小之间找到一个合适的平衡点。不像视频，用户必须同时关注音频和视频，只有音频，用户将主要关注于听你的音频，所以音频的质量是最重要的。这意味着必须更加小心，以确保每个轨道都以正确的方式进行转码和压缩。

  需要大量的试验和错误，但是根据您想要转码的音频类型，您可以开始在 Audacity 中构建预置。例如，与包含音乐曲目的音频内容相比，您将对仅包含声音的音频内容(如有声读物)使用不同的设置。例如，你从人声中听到的频率比从摇滚乐队中听到的频率要窄得多。这意味着有声读物的文件大小可能比使用有损压缩的音乐轨道的文件大小小。

  **注意:**压缩类型有无损和有损两种。无损压缩试图以这样一种方式对音频进行编码，即在编码时它具有较小的文件大小，但在解码时它仍将与压缩前相同。有损压缩将分析音频内容，并删除可能听不到的部分。这意味着使用有损压缩时，无论解压缩技术如何，您都会丢失信息。

  大胆编码音频

  用 Audacity 编码音频可能是一个简单的过程。在这个例子中，你需要下载一个未压缩的音频文件，所以直接下载 SoundCloud ( [www.soundcloud.com](http://www.soundcloud.com))。使用 SoundCloud 搜索您喜欢的任何音乐曲目，并确保选择了以下选项，如图 3-18 所示。

  • 未压缩的文件
  • 曲目应为:可下载
  • 仅搜索知识共享许可曲目
  • 它们应该:可以自由地用于商业用途

  

  图 3-18。soundcloud.com搜索选项

  选择任何一首频率范围高的歌曲(从 dub step 流派中挑选一些会是一个不错的选择)并下载它。这应该给你一个未压缩的 WAV 或 AIFF 文件进行实验。

  我们的目标是让每分钟的音频文件大小在 0.5 到 1 MB 之间。这相当于在 HSDPA 上加载 1 分钟的音频需要 4-8 秒，在 3G 上需要 1-2 秒。当试图计算在移动数据网络上下载 1 MB 数据需要多长时间时，应使用表 3-8 。

  

  这本书的样本曲目是一个 WAV 文件，具有以下设置:86.1 MB，时间长度为 4:59，平均每分钟 18.75 MB。每种格式的目标文件大小在 4 到 5 MB 之间。

  编码 OGG

  您将首先以 OGG 格式编码音频文件。这是两者中比较简单的一个，因为 Audacity 提供了一个单一的配置选项。打开 Audacity 并打开您的文件，方法是转到文件打开，并选择您刚刚下载的文件。如果出现图 3-19 所示的警告，确保“编辑前备份文件(更安全)”和“不再警告并总是使用我上面的选择”都被选中。

  

  **图 3-19。**来自无畏的警告对话框

  当文件处理完毕后，你会看到该文件的波形，类似于图 3-20 。

  您现在可以将音频文件导出为 OGG Vorbis 音频文件。转到文件导出。在“格式”下，选择“Ogg Vorbis 文件”,然后单击选项右侧的“选项”按钮。

  

  图 3-20。 轨迹的波形

  你将看到一个类似于图 3-21 的选项对话框。选择最低质量，然后单击确定。Vorbis 是可变比特率(VBR)编码的一种形式。VBR 将根据每段音频的复杂程度，在整个音轨中使用不同的比特率。与以恒定比特率编码的具有相同或更低质量的文件相比，这可能产生具有合理质量的非常小的文件，但是由于音频的复杂性，文件大小要大得多。

  

  图 3-21。 Ogg Vorbis 输出选项

  这种编码的结果应该是一个音频轨道，听起来应该类似于原始的 WAV 文件，但文件大小小于 3 MB。在 OGG 的最低质量设置下编码时，本书使用的测试音轨的结果是文件大小为 2.5 MB，音质没有明显差异。

  编码 MP3

  编码 MP3 音频的过程类似于为 Vorbis 导出音频。按照相同的步骤打开原始 WAV 文件，并转到文件导出。从格式下拉列表中选择 MP3 文件(而不是 Ogg Vorbis 文件)。单击选项…按钮。

  您将看到一个类似于图 3-22 中所示的导出对话框。MP3 VBR 编码的表现似乎不如 OGG Vorbis。即使在最高压缩设置下，音频文件大小仍然是 OGG Vorbis 压缩输出的两倍。使用 128 kbps 的平均位速率模式将为您提供与最低 OGG Vorbis 压缩选项相同或相似的质量，但文件大小更大，并且仍在可接受的文件大小范围内，即每分钟音频 0.5 到 1 MB。

  

  图 3-22。 MP3 导出选项

  单击确定并保存。如果您希望在下一个屏幕上输入元数据，请继续输入；否则，再次单击确定，音频文件将开始导出。

  用 HTML5 嵌入音频

  用 HTML5 嵌入音频相当简单。在 HTML5 之前，没有真正的标准方法来用不同的编解码器嵌入音频，尤其是在移动设备中。对于 mobile，首选方式是使用 Flash 或提供一个 3GP 文件的链接，这是一种移动设备广泛支持的格式。随着在移动设备上传送和播放高质量音乐的能力变得越来越流行，音频标签将开始被广泛使用。

  在 HTML5 中嵌入音频的过程类似于嵌入视频。您使用 audio 标记并指定几个来源，以便浏览器选择正确的来源。

  在教程文件夹中新建一个名为 audio 的文件夹，然后在 audio 文件夹中新建一个名为 media 的文件夹，再新建一个名为index.html的文件。将您转换的音频文件复制到媒体文件夹，并将其重命名为audio.ogg和audio.mpg。

  您的文件夹结构应该类似于此。

  • 教程
    • 声音的
    • 媒体
      • audio.mp3
      • 音频.ogg
    • index.html

  打开index.html文件，使用清单 3-24 中的代码。

  清单 3-24。 在 HTML5 中嵌入音频

  `

  
        
        

  
              Your browser does not support HTML5 Audio, click
              here to download
          

    

  `

  在您设备的浏览器中打开页面；你会看到类似于图 3-23 的东西。

  

  **图 3-23。**html 5 中的音频

  单击播放按钮，您将通过设备的扬声器或耳机听到音频。您可以使用 HTML5 音频标签创建一个带有自己的 UI 的自定义播放器。这将在第七章中介绍。

  HTML5 移动表单

  对于填写表单的用户和创建表单的开发人员来说，表单可能是一个枯燥乏味的主题。还记得上次你在电脑上填写注册表格是多么令人恼火吗？现在想象一下，如果你在一个小屏幕、没有鼠标和键盘的设备上填写同样的表格，会是多么令人恼火。

  使用移动表单与使用普通 web 表单没有什么不同。由于屏幕尺寸的限制，必须考虑表单的布局，以及您真正需要从用户那里收集多少信息。图 3-24 展示了 confused.com 手机版和桌面版车险报价表的区别。

  

  图 3-24。 汽车保险报价表手机版(左)和桌面版(右)

  正如您所看到的，问题是相同的，但是考虑到屏幕大小，通过重新定位字段标签和字段本身来利用窄而长的屏幕。

  不同数据类型的字段

  根据所需字段和数据的类型，您可以为 Android 浏览器使用不同类型的输入字段。表 3-9 显示了 Android 浏览器目前支持哪些 HTML5 字段类型。

  

  

  如你所见，Android 浏览器目前支持的字段类型只有电子邮件、号码和电话。其他字段类型应该在将来的某个时候实现。您可以选择现在实现它们并解决缺少支持的问题，但是您可能会在支持最终到达后遇到问题。

  您可以在您的设备上对此进行测试，方法是在名为 forms 的项目中为此练习创建一个新文件夹。在名为index.html的文件中创建一个新文件。

  清单 3-25 显示了产生三种不同输入表单类型的代码。

  清单 3-25。 输入类型代码

  `

  
        
        
        
    
    

  HTML5 Input Types             

  
                 Email
                
              

  
                 Number
                
              

  
                 Telephone
                
              

  `

  这只是一个标准的 HTML5 表单。您可能会注意到在一些字段中有一个名为placeholder的属性。属性允许您为表单输入显示有用的示例文本，以帮助用户弄清楚他们需要在表单字段中输入什么。当用户点击填写表单域时，占位符文本将会消失。

  根据不同的输入类型，你会看到不同的键盘来帮助用户更快地输入信息。图 3-25 显示了用于三种支持的输入类型的不同键盘布局。

  

  图 3-25。 数字(左)、电话(中)、电子邮件(右)的键盘布局

  在你手机的浏览器中加载新的网页进行测试。

  总结

  Android 版 HTML5 到此结束。从这一章中，你应该已经获得了大量关于为网络和移动网络编码视频和音频的知识。你现在应该对编码媒体的不同方式有了基本的了解，你不需要一台强大的机器来编码媒体，只需要一个快速的互联网连接。

  本章已经带你了解了 Android 浏览器目前支持的所有新的 HTML5 元素，以及如何有效地使用它们。

  希望这一章能让你为这本书的其余部分做好准备，因为我们开始更详细地探索交互性。HTML 本身提供了一个基础，我们可以在这本书中进一步使用 CSS 进行表示，使用 JavaScript 进行交互。

  在下一章中，您将通过创建 HTML 框架来关注移动 web 应用的开端。在这本书里，你将学习移动网络开发的一个特殊方面，然后使用这些知识来构建和增强你的应用。这就是所谓的渐进式增强，这是一种为 web 所采用的实践，以确保您的应用能够跨所有平台工作，而不管它们的能力如何。

  您还将学习三种不同类型的移动 web 表示解决方案，包括为应用的每个页面使用标准 HTML 页面，使用基于卡片的系统，其中所有页面都位于一个 HTML 文件中，以及使用 Ajax 加载每个页面。

  下一章非常实用，所以加载 Aptana Studio，准备编码吧！

  四、使用 HTML5 启动您的项目

  HTML 为任何 web 项目提供了一个很好的起点。它本质上给了你一个框架，让你在用 CSS(视觉风格)和 JavaScript(交互性)增强网页时可以使用。对于本书中的三个研讨会(HTML5、CSS 和 JavaScript)，您将逐步增强一个名为 MoMemo 的移动 web 应用。MoMemo 将利用以下 HTML/HTML5 特性。

  • 帆布
  • JavaScript APIs
  • CSS3 过渡
  • 媒体查询
  • HTML5 视频/音频
  • 离线存储

  在这一章中，你将学习三种不同的方法来设计你的网页，这取决于你正在制作的移动网络应用的类型。

  您还将开始用 HTML 创建 MoMemo 应用的框架。在此之前，您将学习如何将一个移动应用从一个想法，到需求收集，到 IA，最后用 HTML5 编码。您还将简要介绍应用缓存，该功能允许您指定在用户的移动设备上缓存哪些元素，以及在没有网络连接时如何返回到不应该缓存的文件。

  分页策略

  在 HTML 中创建页面有三种主要方式。

  • 标准 HTML: 创建标准 HTML 页面并链接到它们
  • 单页面 Ajax: 使用单个页面并使用 Ajax 加载后续页面
  • **单页面容器:**使用单个页面作为容器，多个页面保存在一个容器<div />中，并使用 JavaScript 在它们之间移动

  每种方法都有其优点和缺点。例如，当使用单页面容器方法时，具有许多页面和资源(图像、CSS、JavaScript)的移动 web 应用可能会出现性能问题，因为所有资源和页面都将在第一次页面加载时加载。因此，Ajax 或标准 HTML 方法可能会提供更好的性能和加载时间。

  对于小型应用和原型开发，单页容器方法可能是首选。CSS3/JavaScript 可以处理页面之间的动画转换，由于资源数量可能很少，所以不会对页面加载产生很大影响。这可能是首选，因为最终用户不必等待通过 Ajax 或标准 HTML 方法加载页面。这创造了一个更像应用的体验。

  对于简单的应用，标准的 HTML 方法可能是首选。但是，页面之间的动画可能会变得不切实际，并且当在页面间导航时加载页面和资源时会有一点等待时间。

  **注意:**要使用本章中的练习，在 Aptana 项目中创建一个名为exercises的新文件夹，并在其中创建一个名为chapter4的文件夹。在示例中，我们将这称为“章节文件夹”。

  使用标准 HTML 分页

  创建标准 HTML 分页的方法很简单。首先，在项目的 chapter 文件夹中创建一个名为standard的新文件夹，并创建两个名为index.html和index2.html的基本移动友好网页，如清单 4-1 所示。

  清单 4-1。 基础 HTML 手机网页

  `

  
        
        

  `

  这里没有什么特别的，正如在第一章的中解释的那样，我们设置了charset和viewport meta 标签，以确保页面相应地缩放，并防止用户用手指放大。我们还设置了页面标题。在index.html的主体中，创建一个链接和标题，如清单 4-2 所示。

  清单 4-2。 在 index.html 创建链接

  <h1>Page 1</h1> <a href="./index2.html">Page 2</a>

  在index2.html中，在主体中创建另一个链接，链接回上一页，如清单 4-3 所示。

  清单 4-3。【index2.html 创建回 index.html 的链接

  <h1>Page 2</h1> <a href="./index.html">Page 1</a>

  在你的手机浏览器中加载并测试它。就这么简单。为移动设备创建指向其他标准 HTML 页面的链接没有什么特别的。

  用单页 Ajax 分页

  使用单页面 Ajax 创建移动应用需要更多的思考和努力。Ajax 允许从用户所在的当前网页之外的文件或页面中动态获取内容。这可以使应用更具可伸缩性，因为您不必在一个页面上包含多个页面。相反，当你需要他们的时候，你就把他们拉进来。这样做的好处是，当用户在页面之间移动时，您可以使用 CSS3 来应用动画。清单 4-4 显示了通过 Ajax 加载一个 HTML 页面的基本要求。

  清单 4-4。 使用 Ajax 加载 HTML】

  `

  
    
        

  Page 1

  
         Page 2
    
  `

  清单 4-4 中的代码可能看起来有点混乱和冗长，但它将允许你加载外部 HTML 文档，像普通的 HTML 文档一样遍历它的 DOM，并从中挑选元素。它还绑定所有属性设置为xhr的链接。

  与使用 XML 或 JSON 相比，这样做的好处是，如果您想让 web 应用在没有 JavaScript 支持的设备上工作，您不必这样做——您不需要创建不同的视图，您只需删除 JavaScript 代码就可以在页面之间移动。

  为此，我们要做的第一件事是设置页面，如下面的代码片段所示。

  `

  
    
        

  Page 1

  
         Page 2
    
  `

  这就产生了一个容纳卡片的容器。在容器中，有一个带有标题和链接的基本卡。HTML5 允许我们使用数据属性在标记中设置自定义属性。

  接下来，您必须使用下面的代码片段将所有链接绑定到 JavaScript 方法。

  `function bindLinks(){

  [].forEach.call(document.querySelectorAll(“#container a[data-method]”),
  function(el){

  if(el.getAttribute(“data-method”) == “xhr”){
           el.addEventListener(“click”, function requestCard(event){
              loadCard(this.href);
              event.preventDefault();
           });
        }
     });

  }`

  这个功能包含在一个名为bindLinks的函数中，以便稍后使用。该方法中的第二行遍历从查询选择器返回的 HTML 元素列表或节点列表。这样做的方法看起来有点复杂。首先使用[]创建一个新的空数组对象。从这里开始，使用call方法在查询返回的节点列表的上下文中运行Array对象的forEach方法。forEach方法接受一个回调函数作为第一个参数。回调函数也接受以下三个参数:

  • 正在迭代的当前元素
  • 数组中当前元素的索引
  • 实际的数组

  您只需要当前元素，这样您就可以在回调函数中使用它；这叫el。

  该方法中的第三行检查属性data-method是否存在，值是否为xhr。如果这是真的，它将向链接添加一个事件侦听器。这允许您手动指定应该通过 Ajax 获取哪些链接。

  第四行向 click 事件添加一个事件侦听器。click 事件的行为方式与在桌面上的行为方式非常相似，只是如果用户将手指从链接上移开，就会取消该事件。您为此使用了一个命名函数，以便在 Android 浏览器或 Chrome for Android 中调试时可以在调用堆栈中跟踪它。

  在事件监听器函数中，当用户点击链接时，方法loadCard被调用，调用的参数包含链接的预期路径event.target.getAttribute("href")。这取自链接的href属性。event.preventDefault();阻止链接在浏览器中被跟踪，并阻止下一页以通常的方式加载。

  下一个代码片段中显示的loadCard函数将使用XMLHttpRequest从 path 参数加载 html，获取页面中的卡片，并使用setCardContent方法用新内容替换当前页面中的卡片。完成后，该方法将使用事件处理程序重新绑定链接，以便以相同的方式加载所有后续页面，因为新内容中的任何新链接都不会附加事件处理程序。

  `function loadCard(path){

  var xhr = new XMLHttpRequest();
     xhr.open(“GET”, path, true);
     xhr.onreadystatechange = function contentLoaded(){

  if (this.readyState === this.DONE) {          var container = document.querySelector(“#container”);

  if (this.status === 200) {

  var domParser = new DOMParser(),
              externalDocument = domParser.parseFromString(this.responseText,
  ‘text/html’),
              card = externalDocument.querySelector(“#card”).outerHTML;

  setCardContent(card);
              bindLinks();

  } else {

  setCardContent(‘

  Oops

  Something went
  wrong!

  ’);

  }

  }

  }

  xhr.send();

  }`

  这个函数中的第一行实例化了一个新的XMLHttpRequest ( xhr)对象。第二行设置了xhr请求。open 方法接受以下五个参数:

  • 方法—获取、发布
  • 统一资源定位器
  • Async—true，false(默认为 true，调用 send 方法后将继续运行 JavaScript。如果设置为 false，它将在运行 send 方法后冻结浏览器，直到请求完成)
  • 用户(如果请求受 HTTP 用户名和密码保护，您可以在此输入用户名)
  • 密码(如果请求受 HTTP 用户名和密码保护，您可以在此输入密码)

  调用open不会发出 Ajax 请求。第四行设置了onreadystatechange事件的处理程序。

  用单页容器分页

  使用单页容器分页允许您在一个 HTML 页面中创建一组卡片，并使用 JavaScript 在它们之间导航。随着应用的增长，这可能会产生潜在的问题，即试图管理包含多个卡的多个部分/功能。解决这个问题的方法是将每一组特性分成几个 HTML 页面。在每个 HTML 页面中，都有一副与特定功能相关的卡片。要在不同的卡片组之间导航，您可以通过 Ajax 将它们拉进来，或者使用标准 HTML 在它们之间导航，而无需动画。

  创建单页面容器移动 web 应用很简单，其工作方式与 Ajax 方法非常相似。

  首先，在练习文件夹中创建一个名为container的文件夹。在这个文件夹中，创建一个名为css的文件夹。创建一个名为mobile.css的新 CSS 文件，并添加清单 4-5 中的 CSS。

  清单 4-5。 单页容器的 CSS

  `/**
   * Sets the body, html, and deck element styles
   /
  body, html, #deck {
     height: 100%; /* Sets the height of the document to 100% of the viewport /
     overflow: hidden; / Set so that all content that flows outside is hidden
  /
     margin: 0; / The body’s margin is usually never 0, so this removed any
  margin /
     position: realtive; / The card will be positioned relative to the deck **/
  }

  /**
   * The card within the deck’s styles
   /
  #deck .card {
     overflow: auto; /* If there is too much content, this lets the user scroll
  /
     height: 100%; / Sets the height of the card to be 100% /
     position: absolute; / Allows the card to be absolutely positioned /
     left: -100%; / Sets the default position to be off the screen (hidden) /
     width: 100%; / Sets the width of the card to be the width of the deck **/
  }

  /**
   * Sets the active card style so that it is visible when the class is added to
  it
   / #deck .card.active {
     left: 0; /* moves the card back into view **/
  }`

  这个 CSS 中的第一条规则将把body、html和deck的高度设置为100%。这将使网络浏览器的视窗中充满这副牌和卡片。在这里，您将overflow设置为hidden，这样这些元素之外的任何内容都将被删除，并且不显示滚动条。你也把margin设置成0；这将只应用于主体，但是这样可以省去专门为主体编写新的 CSS 规则。

  第二条规则为卡片本身设定了样式。每张卡都将overflow设置为auto。当内容超出屏幕的可见高度时，这将允许用户用手指滚动卡片中的更多内容。每张牌都有一个absolute的position，因此它的位置可以放在牌组内的任何地方。这样做可以让卡片在不需要的时候放在屏幕之外。将left CSS 规则设置为-100%会将该副牌中所有非活动的牌推到视窗左侧的宽度，这样用户就看不到了。

  第三个规则将 CSS 规则设置为active卡片。这将把卡的left位置设置为0，这将使卡回到用户的视野中。显示卡片非常简单，只需使用 JavaScript 为您想要呈现给用户的卡片添加和移除active类。清单 4-6 展示了如何做到这一点。

  清单 4-6。 显示和隐藏卡片的 JavaScript

  `function goToCard(to) {
     /**
      * Gets all cards with the active class and removes it. This hides the card
      * from view.
      */
     document.querySelectorAll(‘.card.active’)[0].classList.remove(‘active’);

  /**
      * Adds the active CSS class to the target card and brings it into view.
      */
     document.querySelectorAll(to)[0].classList.add(‘active’);
  }`

  从goToCard方法中，您可以看到它采用了一个to参数。to参数是从清单 4-7 中显示的 HTML 链接的 URL 中提取的散列

  清单 4-7。 从卡片组加载卡片的链接的 HTML】

  <a data-method="push" href="#card-index">Page 1</a>

  从这里，您可以看到data属性用于标识将内容推至顶层的链接。在这种情况下，使用 push 但是，任何其他属性都可以用于您的需求。属性与卡的 ID 相关联，如清单 4-8 中的所示。

  清单 4-8。 一副套牌的 HTML】

  `

  
    

  Page 1

  
     Page 2
  `

  从这段代码中可以看到，卡的id被设置为card-index。您使用card作为前缀来帮助命名卡片组。这将防止您无意中在另一个 HTML 元素上使用index，从而导致分页问题。清单 4-9 展示了如何使用 JavaScript 来激活页面。

  清单 4-9。 激活一副牌内的牌

  /**  * Works in much the same way as the previous method. It will iterate over all matched  * elements and call the callback method.  */ [].forEach.call(document.querySelectorAll('.card a[data-method="push"]'), function(el){    /**     * As you can see, the callback method is named. Instead of function(event){     * function pushCard(event) is used. This can help with debugging; e.g., in     * the JavaScript stack trace you can see the function’s name rather than     * anonymous.     */    el.addEventListener("click", function pushCard(event){       /**        * This gets the hash (#card-second-page) element of the href in        * the link and assigns it to pageid. The href object has various        * properties, all of which can be found at        * http://www.w3.org/TR/html5-author/urls.html#url-decomposition-idl-        * attributes.        */       var pageid = this.href.hash;       /**        * This calls the goToCard method that will load the content with the        * specified pageID.        */       goToCard(pageid);       /**        * This will prevent the browser from following the URL.        */       event.preventDefault();    }); });

  您使用与 Ajax 方法相同风格的 JavaScript 将事件绑定到带有push数据属性的链接。在事件监听器中，使用this.href.hash从链接中获取散列。这被传递给来自清单 4-5 的goToCard方法，该方法从可见卡片中移除了active类，并将其添加到卡片中以显示给用户。完整的代码示例可以在清单 4-10 中看到。

  清单 4-10。 完整的单页容器示例

  `

                       
          

  Page 1

           Page 2       
  
          

  Page 2

  
           Page 3
        
  
          

  Page 3

  
           Page 1
        

  function goToCard(to){

  document.querySelectorAll(‘.card.active’)[0].classList.remove(‘active’);
           document.querySelectorAll(to)[0].classList.add(‘active’);
        }

  `

  正如您所看到的，有几种有用的方法来寻呼移动设备。虽然这些例子是分开展示的，但是您可以将它们组合起来。例如，您可以结合容器和 Ajax 方法来分离应用的不同部分和功能。您还可以使用 Ajax 通过 JSON/XML 和本章中提到的任何方法来动态加载内容和数据，从而生成新的动态视图。

  下一节将带您完成创建 MoMemo 应用的第一个阶段。

  创建应用

  创建可用的移动 web 应用的关键在于规划。确定移动 web 应用的关键功能，以及用户如何获得重要的功能和数据，将有助于您决定如何使用分页技术、设计和 UI 来实现应用本身。如果你不喜欢计划，这可能是一个费力又无聊的任务，但它会帮助你在开始开发和设计之前解决问题。

  策划 MoMemo

  这个过程的第一步是用一句话来定义应用。在用一句话定义一个应用的时候，你应该尽量避免包括特性或者技术细节。句子应该简单描述应用及其目标。对于 MoMemo，应用定义如下:

  MoMemo 是一个应用，允许用户快速记下他们在电影院看到的电影预告片，并在电影上映时得到提醒。

  下一步是定义必须具备的特性，这些特性将有助于满足应用的主要目标。MoSCoW(必须有，应该有，可能有，不会有)可以是定义应用核心特性和功能的好方法。它将允许您定义核心功能(必须具备)，提供附加值的功能(应该具备)，如果在项目结束时还有剩余时间可以实现的功能(可能具备)，以及由于时间或资金限制而无法实现但可以在不久的将来实现的功能(不会具备)。这将有助于防止范围蔓延和“永无止境的项目”综合症，即开发人员不断谈论一个应用及其极长的不可能的功能列表，但从未实际创建它。

  要使 MoMemo 成功，应用必须:

  • 允许用户在个人列表中快速添加和删除电影
  • 允许用户观看列表中的电影

  它应该:

  • 在用户键入时提供电影建议列表
  • 显示关于电影的信息，包括
    • 摘要
    • 发布日期
    • 演员表

  它可以:

  • 允许用户观看电影预告片
  • 允许用户播放电影中的声音剪辑
  • 允许用户在社交网络上共享添加到其列表中的项目
  • 查看电影备忘录时，向用户显示最近电影院的地图

  不会的:

  • 电影上映时向用户发送通知
  • 允许用户在看过电影后对电影进行分级
  • 允许用户邀请其他用户去电影院看电影

  既然已经定义了核心特性和功能，我们就可以开始基于必须具备、应该具备和可能具备的特性集来创建用户旅程了。

  首先，我们应该从必备类别中构建我们的核心特性集。图 4-1 显示了应用的核心功能应该如何运行。用户应该启动应用，并提出了他们已经添加的电影列表。从这里，他们可以添加或删除列表。然后它们将被带回到电影列表。

  

  图 4-1。 应用的主要特性

  现在，您可以在此基础上开始添加应有的功能。在图 4-2 中，可以看到只增加了电影信息功能。我们仍然需要在用户输入时提供一个电影建议列表，但是这个电影建议列表将是 Add Movie 特性的一个特性，而不是 Movie Info 特性。

  

  图 4-2。 应用的二级特性

  最后，您可以添加可能拥有的或增值的功能，如图图 4-3 所示。

  

  图 4-3。 增值增值功能

  正如您从图 4-3 中看到的，电影信息功能有三个子功能，允许您在电影信息主功能之间导航。这增加了应用的复杂性，并建议电影信息应该潜在地被分解到它自己的页面或卡片组中。

  现在我们已经清楚地了解了应用当前应该如何运行，我们可以开始创建 UI 了。

  创建用户界面和 HTML

  如果你曾经专门为 Android 开发过一个应用(原生或网络)，你会知道一些设计原则不同于你对 iOS 或 Windows Mobile 等其他移动操作系统的预期。例如，在谷歌 Galaxy Nexus 和三星 Galaxy Tab 上，系统栏(导航栏和组合栏)位于屏幕底部，并且在使用 Android 浏览器时总是活跃或可见的。一个好的设计原则是不要把工具栏堆叠在系统栏的顶部；这将防止用户无意中点击系统按钮，而他们实际上是想与你的应用进行交互。

  为了方便用户使用该应用，有必要为用户提供一种清晰的方式来添加和查看他们的电影，同时也为您提供在未来添加新功能的能力。

  LinkedIn 提供了一个很好的清晰的例子。正如你从图 4-4 中看到的，很明显，移动网络应用的主要用途是搜索人和查看最近的更新。如果你想访问更多的功能，在搜索栏旁边的“在”图标下有一个隐藏的工具栏。如果你想更新你的 LinkedIn 状态，你可以点击右上角的信息气球图标。

  

  图 4-4。 LinkedIn 为整洁的登陆/主页提供的解决方案

  在应用的每个页面上都可以看到这个顶栏。在设计任何基于移动设备的网站时，你应该记住，它可以在各种屏幕尺寸上以横向或纵向模式浏览。

  **注:**迄今为止，还没有已知的方法可以将网络浏览器的方向锁定为横向或纵向。所以当你设计一个移动网络应用时，你应该考虑到方向会改变。

  创建电影列表

  MoMemo 应用的 UI 围绕着屏幕顶部的搜索栏。图 4-5 和图 4-6 显示了应用的电影列表部分，包括平板电脑和移动设备的任务栏。

  

  图 4-5。 电影列表为风景写字板

  从图 4-5 中可以看到，在浏览之前添加到列表中的电影时，可以访问搜索和添加电影的功能。用户也很清楚，这会将项目添加到列表中，而不是搜索现有的列表，因为提交表单的按钮被标记为 add 而不是 search。

  图 4-6 以同样的方式显示信息，但屏幕更小；但是，列表项稍大一些，以适应用户手指敲击准确度可能较低的情况。虽然列表项被捆绑在一起，但是用户点击以查看关于电影的更多信息的目标是相当大的。将任务栏放在顶部还允许用户自然轻松地浏览他们保存的电影列表，而不必担心意外激活应用的另一部分。应用的两个 UI 模型在 HTML 方面是相同的；但是，我们可以使用 CSS 媒体查询来确定特定的显示大小和方向。您还可以利用流体布局来确保应用对方向和屏幕大小的变化做出正确的反应。

  

  图 4-6。 人像手机电影列表

  用 HTML 标记这一点非常简单。首先，在项目的根目录下创建一个名为application的文件夹。在该文件夹中，再创建三个名为css、img和js的文件夹。css文件夹将存储你的 CSS/SASS，img将存储你所有的图片和精灵，js将存储你所有的库和应用 JavaScript。

  您还需要在js中创建两个名为lib和app的文件夹，在js/app/文件夹中创建一个名为bootstrap.js的文件，在css文件夹中创建一个名为mobile.scss的文件。

  在application文件夹中创建一个名为index.html的新文件；清单 4-11 中的代码将有助于引导应用。

  清单 4-11。 初始引导 HTML

  `

  
        
        
        
        
    

  
        

  `

  你可以看到，有一个div围绕着名为shoe的甲板。这将有助于包含出现在每个页面上的全局元素，例如顶部任务栏，并且如果应用需要在未来扩展，它将拥有多个面板。除了与赌场和扑克牌相关的命名约定之外，您可以使用任何层次命名约定。

  **注意:**这只是一个命名约定，我采用它是为了让我和其他开发人员更容易理解我的应用的结构。这也使得在编写 CSS 和 JavaScript 来挂钩移动 web 应用的功能时，语义更加清晰。您可以使用任何您希望的 id 或类，或者您可以使用 suite 并使用我的。只要确保它们是有意义的。

  你会注意到 CSS 没有链接到mobile.scss。这是因为 SCSS 文件需要被 SASS 编译并转换成 CSS。一旦编译完成，就会出现mobile.css文件。打开mobile.scss文件按 Shift + CMD + R 然后按 1。这将把 SASS 文件编译成 CSS 文件。(SASS 将在第五章的中介绍。)

  是时候为应用创建标题了。在清单 4-12 中显示的代码应该被添加到<div id="shoe">元素中，但是在<div id="deck">元素之前。

  清单 4-12。 标题代码

  `

  Mo Memo

  
        
        
    

  `

  这将简单地创建一个标题和表格供用户搜索，如图 4-7 所示。使用 CSS，这将被放置在屏幕的顶部。

  

  图 4-7。 没有样式的任务栏

  现在是时候添加第一张卡片了，电影列表卡片。这很简单，通过创建一个无序的数据列表来实现，如清单 4-13 中的代码所示。

  清单 4-13。 保存的电影列表

  `

  • 
      
  • 
          
            
                
            
            

    My Movie Title

    
            

    My Movie Description

    
          
      
  • 
      
  • 
          
            
                
            
            

    My Movie Title

    
            

    My Movie Description

    
          
      
  `

  在 HTML5 中，可以用href标签包围块级元素。这使得将列表项的全部内容链接到另一个资源变得更加容易。

  从图 4-8 中可以看出，这个页面看起来相当无聊。下一个研讨会将涉及使用 CSS 样式的应用。

  

  图 4-8。 完整电影列表页面

  电影搜索和添加

  有了电影列表功能，现在是时候介绍搜索和添加电影的任务了。这可以通过两种方式之一来实现。

  • 用户搜索一部电影，并得到一个列表。从这个列表中，用户点击电影，然后将他们带到电影信息屏幕。从这个屏幕上，用户可以将电影添加到列表中并返回到电影列表。
  • 第二个选项是向用户提供建议，允许他们点击适合他们的建议，然后单击 add 按钮。然后，用户可以在以后查看电影信息。

  这两种选择都没有错，但最优的还是在于用户在搜索电影时所处的情境。要回答这个问题，你需要参考莫斯科对这个项目的要求。必备要求之一是“允许用户快速在个人列表中添加和删除电影”。用户很可能会打开应用，搜索电影，添加电影，关闭应用，并在以后更详细地查看电影列表。图 4-9 和 4-10 展示了基于此的平板电脑和移动设备的搜索功能。

  

  图 4-9。 平板电脑电影列表

  搜索和显示搜索结果将是 JavaScript 的任务(在第八章的中介绍)。

  

  图 4-10。 手机电影列表

  电影信息

  MoMemo 应用的最后一部分是电影信息部分。它有几个子功能，包括电影简介，剪辑，演员阵容，配乐和最近的电影院。您可以在单独的卡片上呈现这些信息，但是当您在大屏幕设备(如平板电脑)上查看小部分内容(如概要)时，最终会有很多空白空间。为了解决这个问题，您可以将所有内容放在同一个视图中，但允许用户在纵向设备上侧滚至内容，以利用垂直空间，并在横向模式下正常滚动。图 4-11 和 4-12 显示了这应该如何呈现。

  

  图 4-11。 人像移动设备上的电影信息

  

  图 4-12。 平板设备上的电影信息

  虽然两个视图的显示略有不同，但内容是相同的，并且可以使用 CSS 媒体查询重新定位，以适应设备的方向。创建一个id为card-movie_info的新卡，并添加来自清单 4-14 的 HTML。

  清单 4-14。 电影信息头

  `

  
    

  
        

  My Movie Title

  
        

  Released: Monday 10th March 2012

  
    
  `

  这将为标题创建标记，根据设备的方向，可以使用 CSS 以不同的方式显示该标记。您使用hgroup对发布日期信息进行分组，该信息不应该包含在h2元素中。

  清单 4-15 显示了大纲块，它将只包含文本。有一个div,其中一类内容围绕着块内的内容，但不包括主标题。这是为了使内容可以滚动，但标题始终在视图中。

  清单 4-15。 剧情简介块

  `

  
    
        

  Hello world, this is my synopsis

  
    
  `

  清单 4-16 显示了铸造块。从设计上看，演员名单应该可以在它的区块内滚动；但是，标题应该始终保持在顶部。这个块还显示了列表将被标准化，以减少 CSS 中的臃肿。

  清单 4-16。 施展封锁

  `

  
    

  Cast List

  
    
        

  • 
            
  • 
                
                

    Actor Name

    
            
  • 
          

  
    
  `

  然后你移动到视频块，如清单 4-17 所示。在两种线框中，视频都以网格格式显示，但它们是灵活的，因为一行可以包含两个或四个视频，这使得使用表格不灵活。为此，您可以选择使用常规列表，并根据设备的方向使用 CSS 对其进行格式化。

  清单 4-17。 视频块

  `

  Video Clips

  
        

• 
              
                
              
              

  Clip name - 00:38

  
          

• 
    

  `

  音轨块非常简单，因为它在两个方向上都很相似，在平板电脑和移动设备上都是如此。这显示在清单 4-18 中。

  清单 4-18。 配乐块

  `

  Soundtrack

  
              
                  
                 Title
                 Artist
              
                   
              
                
                    
                
                
                    A Ridiculously Long Track Title
                
                
                    Track Artist
                
              
              
                
                    
                
                
                    A Ridiculously Long Track Title
                
                
                    Track Artist
                
              
          

  `

  如您所见，每行的第一列都有一个canvas元素。我们将使用 HTML 画布来生成播放按钮和动画进度条。

  最后，清单 4-19 显示了最近的电影院街区。这由一个带有类map的div组成。谷歌地图应用编程接口将用于这项任务。

  清单 4-19。 最近的电影院街区

  `

  Closest Cinemas

  
        
    
  `

  为 MoMemo 创建标记的工作到此结束。任务栏如何对应用做出反应将在 JavaScript 的第八章中讨论。

  如果您看到类似于图 4-13 中所示的内容，请不要惊慌。你将在第五章中学习如何使用 SASS 生成模块化 CSS。

  

  图 4-13。 三星 Galaxy 标签上的完整标记

  您可能希望做的最后一件事是开始实现应用的离线缓存功能。这将允许用户在没有接收信号时浏览他们的电影列表。

  第一步是将manifest属性添加到html标签中，如清单 4-20 所示。

  清单 4-20。 应用清单属性

  `

  `

  现在在应用目录的根目录下创建一个名为momemo.cache的文件。在这个文件中，添加清单 4-21 中的代码。

  清单 4-21。 缓存清单文件

  CACHE MANIFEST index.html js/app/bootstrap.js css/mobile.css

  这将确保缓存index.html、bootstrap.js和mobile.css文件以供离线查看。随着应用的构建，更多的文件和规则将被添加到缓存清单文件中。

  总结

  从本章中，你应该已经了解了如何在移动 web 应用中管理分页，以及如何根据项目的需求选择合适的分页策略。您还应该了解如何开始构建应用——从想法到需求，从 IA/线框到用 HTML 编写基础代码，以及设备的方向和屏幕大小将如何影响您设计应用。

  在第五章中，你接下来将学习 CSS 如何改变你的风格、动画和提高你的移动网络应用的性能，以及 SASS 如何帮助组织你的 CSS 规则和产生一组结构化的 CSS 文件。