[W3Conf] 今村友美： “移动网页：HTML5 在移动端的真实案例”

过去 10 年移动设备的变化令人惊叹。2003 年最好的“智能手机”拥有 104MHz 处理器和 4MB RAM。如今的手机性能要好几个数量级。

固着是动物学术语（与“移动”相对，“固定在一个地方”）。

移动设备的主要用例：阅读、玩游戏、拍照、定位、支付、收听/观看媒体、记笔记、聊天、翻译等等。

HTML5 如何帮助我们完成其中一些活动？

拨打电话

<a href="tel:5555555555">

定位

navigation.geolocation.getCurrentPosition(success, fail)

您可以在 CSS 中使用媒体查询更改移动设备上的布局

@media only screen
  and (min-width: 700px) {

}

出版行业以及高级网格布局都可以从中受益。

游戏行业可以从 HTML5 技术中受益，例如画布、触摸事件、音频 API、动画和转换以及 WebSockets。

大约一年前，W3C 创建了 “核心移动 Web 平台”社区小组。其使命是加速将移动 Web 作为现代开发平台的采用。尽管是行业竞争对手，但许多大型公司都在共同努力。目标是在核心功能上达成一致并创建性能测试。

该社区小组创建了一些开源示例应用程序，这些应用程序可在 GitHub 上获得，例如 相机应用程序。

HTML5 从设备相机本身捕获图像的方式

<input type="file" accept="image/*"  capture="camera">

这不是 WebRTC。它是 HTML 媒体捕获，而且更容易。浏览器支持已经相当不错。此特定示例适用于 Android 3+、Chrome 18+、Safari 6+、Firefox 10+、Blackberry 10+。

以这种方式选择文件后，您可以立即通过 JavaScript 访问它。

localFile = input.files[0];
reader = new FileReader();
...

注意：我有一些 相关的示例代码。

获得图像数据后，您可以将其绘制到 <canvas> 上。一旦它在画布上，您就可以像操作 <canvas> 上的任何其他内容一样操作它。使用一些数学技巧，您可以循环遍历并操作每个像素。操作可以像 Instagram 那样，例如“滤镜”。（有点破坏了 Instagram 的魔力，不是吗？）

不过，这种操作相当缓慢。愿望清单上包括画布硬件加速、更快的 GPU、32 位操作和后台工作线程。

要将此操作后的图像转换回“真实”文件，您必须将其转换回“Blob”。

var blob = canvas.toBlob() /* Slightly more to it... */

只有 Firefox 支持此功能，但您可以使用 polyfill。一旦它成为 Blob，您甚至可以将图像数据显示为图像 src。<img src="blob:XXXXX">。

在演示照片应用程序中，将照片保存在本地以及发送到服务器都有意义。使用 IndexedDB 进行本地保存很有道理。与所有这些一样，IndexedDB 的浏览器支持参差不齐。不过，这里尤其糟糕，因为 API 差异很大。

对于服务器发送，您可以创建一个新的 FormData() 对象（不需要实际表单），然后将照片作为数据附加，然后以 Ajax 样式将其 POST 到服务器。您可以轻松显示更新进度，因为您会获得一个回调函数，该函数会传递一个表示上传完成程度的数字。

CORS 在这里也很有用（我们在 Brad 的演讲中 了解了这一点），因为我们可以将其发送到任何服务器，而不仅仅是我们自己的域。注意：一个常见的用例类似于 Amazon S3。

此应用程序中的事件绑定使用了指针事件。不是 CSS 属性，而是 JavaScript 属性。昨天有一个关于这个的演讲，但我错过了 =(。

此应用程序还使用了大量其他 HTML5 内容：历史记录 API（popstate、更改 URL）、屏幕方向 API、CSS 转换和变换、Web 字体、hidden 属性（就像 display: none，但使用 HTML 属性）、data-* 属性。

PhoneGap 可以“填补空白”，用于需要这些功能但在不支持这些功能的设备上运行的应用程序。