代码收藏家 面向安卓的 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 年代使用网络浏览器一样，但是经理们对未来充满期待。” 1
移动网站只是灰度手机上 WAP 时代的无线标记语言(WML)页面，如摩托罗拉 V50，但带有一点色彩。从那以后没有太大的变化，大多数移动网站仍然保持着同样的从上到下的线性信息流，交互性不强。这种设计风格有三个原因。
- WAP/GPRS 和 EDGE 都是速度很慢的协议，不能处理大量文件的网站，所以设计和内容被限制为快速传递网站及其信息。
- 旧手机的分辨率和长宽比很糟糕，以至于你几乎不能在屏幕上显示任何内容。
- 传统上，你使用一个球或按键来浏览移动网站。上下滚动似乎比左右滚动更自然。
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 遭遇了开发者最可怕的噩梦，即设备碎片化。设备碎片可能由以下一些因素引起。
正因为如此，挑选一款人人都有的设备进行测试变得极其困难。为了客观地看待这个问题，请参见表 1-1 中截至 2011 年 12 月 Android 设备与行业其他设备的对比统计。
表 1-1 描绘了一幅清晰的画面，Android 设备厂商为 Android 用户生产了各种各样的设备。
理想情况下，你应该挑 12 个安卓设备(6 个手机，6 个平板)。还要考虑以下标准。
你应该以这种方式挑选设备有两个主要原因。
- 设备功能会因价格而异。例如，通常情况下，你不会在低于 100 美元的设备中看到双核 CPU。然而，你还是应该迎合那些没有最新最棒的人。这将允许您针对能力较低的设备进行测试，并确保您的移动 web 应用将适度降级。
- 设备契约以 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 版本勾选以下选项。
**图 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 中看到的，每一类显示器的像素比率如下。
我们使用通用的移动样式表，以便在设备不匹配任何像素比率的情况下，我们可以提供备用图像。然后，我们使用每个像素密度类别的样式表来覆盖图像。
像素密度可能是一个难题，因为这意味着对于您在应用中使用的每个图像，您必须生成两个不同大小的图像。这也意味着，即使您今天创建了最高像素密度的图形，明天您也可能不得不为另一台像素密度更高的显示器重新导出所有内容。在选择图形包来创建你的移动网页设计时，一定要记住这一点。
迎合你的观众
记住你为谁写你的应用和他们用什么来和你的工作互动一样重要。第一步是确保你理解你的用户会用你的应用做什么。为此，您必须对其进行分类。
对你的应用进行分类将有助于你根据你的类别中的其他应用是如何设计的以及它们有什么样的特性来制定通用的交互规则。这听起来像是复制，但是它将帮助用户根据他们以前的经验快速直观地了解如何使用您的应用，从而在最少的时间内启动并运行它。
重要的是要记住，你可以建立在这些规则之上，你不必坚持它们。只要你能让你的用户打开你的移动网络应用，玩几分钟，然后马上说“我明白了”，你就完成了你的工作。
移动 web 应用有许多种类，但大多数都可以归为以下几类。
基于任务
基于任务的应用本质上非常简单。它们是为日常使用而制造的省时设备。这可以是从查找火车时刻到查找最近的酒吧或酒吧在哪里的任何事情。
有几次，我站在伦敦滑铁卢火车站的中央，盯着火车时刻表，看起来茫然和困惑，只是拿出手机启动火车时刻应用，以更快地找到火车时刻。
重要的是要记住，如果一个用户不能用你的应用在最短的时间内完成一项任务，他们会关闭你的浏览器窗口，另找一个能更快完成同样任务的浏览器。
对于基于任务的应用，有两条基本信息可以用来帮助用户更快地执行任务。
这两条关键信息对您的应用来说很容易获得，了解它们将会带来很大的不同。
找出用户的物理位置和他们正在做什么将有助于你在用户访问你的移动网络应用时先发制人。
举例来说，如果你正在创建一个旅程规划器，有几件关于你的用户的事情你应该考虑。
这些因素不仅会影响交互元素(如输入表单)的呈现方式，还会影响如何编写代码来减少用户完成任务所需的工作量。
在图 2-2 和图 2-3 中，您可以看到在创建基于位置的工具时，了解和使用用户的位置并理解他们的情况会带来多大的不同。
图 2-2。 TFL 手机网站用户旅程
在图 2-2 中，你可以看到 TFL 旅程规划移动网站。上面的用户旅程描述了最坏的情况。该用户在移动中，容易犯数据输入错误。因此，为了完成任务，用户必须通过两次额外的页面加载，加载更多的表单字段。
有两个额外的页面来帮助用户验证有什么问题？两个额外的页面相当于超过 3G 的 4 秒以上的加载时间。您还必须考虑用户处理页面和响应页面所需的时间。
我们如何改进 TFL 移动网站？
图 2-3。 BUSit 移动网站用户旅程
图 2-3 显示了一个来自 busitlondon.co.uk 的好例子。在第一次启动移动网络应用时，它会尝试查找您的当前位置。当用户键入开始和结束位置时，它会建议用户使用 Google Maps API 和自动完成来选择选项。您还可以随时选择用户的当前位置。
在你计划好你的目的地后，它会给你建议路线。所有这些信息都包含在一个页面上，无需重新加载页面。用户可以轻松地更改或修改视图，而不必等待图形(除了地图切片)加载。这提供了更多的“本地应用”的外观和感觉。
社交
社交应用的主要目标是促进与朋友或其他感兴趣的人联系和交流的能力。与社交移动网络应用交互所花费的时间通常比使用基于工具的应用所花费的时间要多得多。
社交媒体应用的主要目标通常有三个。
这三个基本规则支撑着当今几乎所有的社交移动应用。如果用户不贡献内容，就没有内容可供其他用户消费和参与。
仅仅因为用户在社交移动网络应用上花费更多的时间，并不意味着完成一项任务(比如分享内容)的途径应该与基于任务的应用有任何不同。应该考虑用户情况的相同因素。应该是既容易分享内容，又容易消费内容。
举个例子，Twitter 和脸书在功能集上截然不同，但这两个应用在移动网络上的主要目标都是让用户更容易消费、贡献和参与。
图 2-4 显示了脸书触摸式移动网站的三个屏幕(左侧)。登录后，您会看到脸书新闻提要，因此您可以立即使用内容。您还可以看到三个清晰而独特的按钮来分享内容，如您的状态、照片和当前位置(签到)。顶部还有一个工具栏，以模式菜单或弹出菜单的形式为您提供与您相关的内容和更新(好友请求、消息和通知)。更多的功能在隐藏菜单中，这为添加更多的次要功能和动作留下了余地，而不会弄乱应用的其余部分。
图 2-4。 脸书 Touch 和 Twitter 移动网站让分享和消费内容变得很容易。
Twitter 的核心功能可以在它的顶部工具栏中找到。共享内容的清晰操作按钮以蓝色突出显示，带有独特的图标。登录后，如果用户使用过 twitter 网站，就会知道这是一个分享内容的按钮。同样的设计模式现在在 Twitter 的桌面、移动和网络版本中引起了共鸣。
娱乐
基于娱乐的应用主要是为了满足某种形式的无聊而创建的。解决方案有多种形式，从显而易见的游戏到交付音乐和视频内容。娱乐应用通常被设计成让用户沉浸在应用的环境中。这甚至可以通过当今移动网络上最基本的 HTML5 游戏来实现。
网络应用与本地应用
在过去的几年中，一个很大的争论和讨论的原因是，是将一个项目构建为一个本地应用还是一个移动 web 应用。两者各有利弊。但是，重要的是要记住，您选择的解决方案应该基于特定项目的需求和您作为开发人员的能力。最重要的是，选择能最快完成项目的解决方案！
有几个因素将帮助您决定是创建移动 web 应用还是本地应用。
如果您已经知道如何使用 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)对话框中，使用以下参数。
设置好所有选项后，单击创建 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 元素，你的用户都会看到同样的东西。有几个原因可以解释为什么做出这样的改变会对你的用户产生影响。
**注意:**虽然示例中没有显示<body />、<html />或<head />标签，但是所有元素都可以放在文档的主体中，除非另有说明。
<条/ >
<article />元素用于表示页面上的独立内容，比如博客文章、新闻文章或评论。原则上，一篇文章应该包含自己的页眉、内容和页脚。您还可以在元素中嵌套关于文章作者的信息。您还可以将文章元素嵌套在另一个文章元素中，以帮助进一步组织内容，例如文章评论。
图 3-2 显示了一个<article />元素相对于一个 HTML5 文档的位置。清单 3-1 显示了一些基本 HTML5 元素的结构，以及<article />元素在这个层次结构中的位置。
图 3-2。 <article />元素(以灰色突出显示)与在移动网站文档中找到的元素相关
**清单 3-1。**html 5 中一篇文章的拟议结构
`
作者：绝不原创的飞龙
