HTML5 广告教程（四）
十二、HTML5 前沿
本章与上一章有所不同，因为它的唯一目的是让你对你每天使用的浏览器即将出现的新特性感到兴奋。这些特性中的一些已经融入了当前的 HTML5 规范；其他的保持在 HTML5 域之外，只在特定的浏览器中，或者为 html . next(w3.org/wiki/HTML/next)设置。
在这一章中，我将介绍一些真正令人惊叹的 API 和特性，比如 Web Intents、WebSockets、WebGL、WebRTC、最先进的 CSS3 等等。我还将关注 Google Chrome 团队、Mozilla、Apple 和 Opera 的新兴浏览器，并讨论他们以及微软、Adobe、W3C 和 WHATWG 如何对开放 web 标准做出具体的补充，这些补充将影响您的活动向前发展。
正如您在本书中所了解到的，HTML5 是一个不断发展的规范，但工作组成员目前正在决定哪些应该留在 HTML5 中，哪些应该推迟到 HTML . next。HTML5 规范有两种不同的规范，这似乎有点奇怪，一种由 W3C 管理，旨在使 HTML 5 成为一个快照规范，另一种由 WHATWG 管理，旨在使 HTML 标准成为一个有机的、不断增长的文档，在开放 Web 的发展过程中不断构建和迭代。然而，纠结于哪个规范是哪个规范并不十分重要；只要确保知道浏览器何时实现了这些新特性，以及用户何时会采用这些新特性。
最后，请对这一章持“半信半疑”的态度这些特性中有很多可能无法纳入 HTML5 规范，可能会被推迟到下一次迭代，或者有些甚至会被淘汰。然而，要知道工作组致力于在你的浏览器中创造和实现令人惊奇的东西，并且在它们之上可以让你更好地准备你的客户最终会要求什么。是否登陆 HTML5，6，6。x 或者其他什么完全无关紧要。如果你能使用一个特性，更重要的是，在你的目标受众所在的地方使用它，这是从本章学到的最重要的部分。也就是说，让我们深入挖掘现代网络真正令人惊叹和前沿的功能吧！
新兴浏览器
在这一章中，我将展示即将到来的东西，换句话说，一些真正聪明的人正在炮制的新兴的和最具前瞻性的东西将会出现在你的浏览器中。正如我在前面的章节中强调的，你应该使用你最喜欢的浏览器的最新版本，老实说，如果你已经在使用 IE 6 到 IE 8 的书中做到了这一步，上帝保佑你，请把你的地址发给我，这样我就可以亲自到你家为你安装更新。
特别是对于这一章，你应该使用图 12-1 所示的浏览器。
图 12-1。所有前沿浏览器
你可以在以下网站下载这些尖端的浏览器:Firefox Aurora(aurora.mozilla.org)、Chrome Canary(tools.google.com/dlpage/chromesxs)、Opera Next(opera.com/browser/next)和 Webkit Nightly(nightly.webkit.org)。请记住，这些浏览器并不是 100%稳定的，在生产环境中应该谨慎使用，因为代码库中可能存在错误。最好只在测试实验特性时使用这些浏览器。
注在撰写本文时，Internet Explorer 还没有其最新浏览器的测试版(尽管 IE 10 被设置为非常前沿)。
下载这些浏览器中的一个或全部可以让你 VIP 访问这些超现代浏览器授权访问的所有测试功能。
新的 CSS 功能
既然设置已经完成，让我们进入本章的重要主题，从新兴的 CSS 特性开始。接下来的部分是针对 CSS 规范的许多新的增强的。
CSS 区域
首先是新的 CSS 特性叫做区域 。Adobe 已经为此功能向 W3C 提交了一份草案，这实际上是从一个区域到另一个区域内容自由流动的新规范。这使得你可以自由移动文本，而不依赖于设备和屏幕，这使得在响应式网页和创意设计中的文本布局更加出色。从你对同步广告单元的了解来看，理论上你可以让文本在同一页面上从一个广告自由流动到另一个广告。要使用 CSS 区域，你需要做的就是包含一些空的 div 容器和一些 CSS 声明，如清单 12-1 所示。
清单 12-1 。 CSS 区域示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
/* ad */
#ad .adContent {
-webkit-flow-into: adRegions;
}
.adRegions > div {
content: -webkit-from-flow('adRegions');
-webkit-flow-from: adRegions;
width: 30%;
height: 250px;
float: left;
margin: 10px;
padding: 30px;
border: 1px solid #000;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
</style>
</head>
<body>
<div id="ad">
<div class="adContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec ipsum non massa vehicula
feugiat. Etiam a tempor lectus. Etiam sollicitudin commodo risus, ac hendrerit felis auctor a.
Maecenas sed sem sed libero faucibus elementum eu non sapien. Ut tellus nisl, imperdiet ut eleifend
id, lacinia et enim. Suspendisse feugiat fringilla cursus. Phasellus nisl nisi,congue ac hendrerit
eget, facilisis a nunc. Suspendisse potenti. Ut suscipit, lacus ac imperdiet lacinia, metus ipsum
placerat libero, et dictum massa arcu vitae risus. Vestibulum varius hendrerit congue.
</div>
<div class="adRegions">
<div></div>
<div></div>
</div>
</div>
</body>
</html>
从清单 12-1 中可以看到，在名为 adContent 的 div 中有一些“lorem ipsum”内容，另外两个 div 名为 adRegions(可能是另一个 ad) *。*如 CSS 所示，您指示您的 adContent 将其文本内容流入 adRegions。差不多就是这样！现在，您可以不受屏幕大小的影响随意复制，如图图 12-2 所示。
图 12-2。使用 CSS 区域的 Adobe 示例
请记住，这只适用于百分比设置的宽度，而不适用于您指定的硬值，如 300px。为了在广告环境中工作，请确保您的广告容器的 div 具有 100%的宽度，并将该容器包装在另一个 div 元素中，其宽度设置为 300px(或您的广告清单要求的任何值)。如果您的客户想要模仿动画书类型的创意，这可能会非常有帮助，因为包括副本在内的元素可以自由流入不同屏幕大小的其他区域。
注意在撰写本文时，本章讨论的每一个新兴特性都很可能需要一个特定的厂商前缀才能正常工作。
在撰写本文时，为了利用 CSS 区域特性，您需要使用 Webkit Nightly、Chrome 或 Chrome Canary，并在浏览器设置中启用名为 flags 的 CSS 区域。对于 Chrome，你可以通过在地址栏输入 chrome://flags 来实现。最后，重启你的浏览器以确保设置生效，然后你就可以使用这个很酷的新功能了。要了解更多关于真实世界的例子，我建议访问 css-tricks.com/content-fol… 的网站，要了解更多关于 CSS 区域的规范，请访问 w3.org/TR/css3-reg… 的网站或者 adobe.github.com/web-platfor… 的网站。
CSS 排除〔??〕
说到 CSS 区域，Adobe 还提交了一个新的特性规范，叫做 CSS exclusions 。排除允许文本内容围绕图像、视频、画布和 DOM 树中的其他元素自由流动。有了 CSS 排除，使用非常简单的 CSS 就可以在你的浏览器中创建丰富的类似印刷的杂志效果。真正有趣的是，您可以在 CSS 中创建形状，并将其用作排除，这可以创建具有负空间的真正有趣的效果。让我们看一个来自 Adobe 的例子，它使用 CSS 排除和基于平板电脑方向的自适应文本布局，如图图 12-3 所示。
图 12-3。Adobe 使用 CSS 排除的示例(来源:Adobe)
你可以看到，通过在你的文本布局中加入排除项，你可以获得真正令人惊讶的结果，它与特定的内容形式吻合，在这种情况下，就是山。因此，让我们来看看在一个示例布局中如何使用 CSS 排除，在这个布局中，您将模拟 publisher 内容包装在一个 300x250 的矩形排除框周围，这个矩形排除框可能是您的广告区域。
清单 12-2 。 CSS 排除示例
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body, html{
height:100%;
width:100%;
overflow:hidden;
}
#container{
font-size:14px;
text-align:justify;
-webkit-hyphens:auto;
/* flow the content inside this element */
-webkit-wrap-shape-mode: content;
}
.exclusion {
position:absolute;
height:250px;
width:300px;
/* flow text around this element */
-webkit-wrap-shape-mode: around;
}
.ad{
top: 20px;
left: 100px;
border: 1px solid #000;
-webkit-wrap-shape: rectangle(300px, 250px 300px,250px 250px,300px 250px,250px);
}
#workspace{
position:relative;
width:80%;
}
</style>
</head>
<body>
<div id="workspace">
<div id="exclusion1" class="exclusion ad"> 300x250 </div>
<div id="container">
<p>Lo­rem ip­sum do­lor sit amet, con­sec­te­tur ad­ipisc­ing
elit. Vi­va­mus ac nul­la ac nunc ves­ti­b­u­lum sod­ales sed eget
pu­rus. In­te­ger tris­tique neque at urna eleif­end por­ta. Mau­ris a
sa­pi­en augue, ve­hic­u­la rutrum augue. Sus­pend­isse pre­tium
pulvi­nar tris­tique. Nul­la el­e­men­tum blan­dit mas­sa,
pel­len­tesque el­e­men­tum orci tem­pus sed. Cur­a­bi­tur eget
est neque, nec pel­len­tesque enim. Sed blan­dit do­lor et neque tin­ci­dunt
rutrum. Lo­rem ip­sum do­lor sit amet, con­sec­te­tur ad­ipisc­ing
elit. Nul­lam tin­ci­dunt do­lor vel neque eleif­end frin­g­il­la.
Prae­sent et orci nec jus­to vulpu­tate ul­tri­c­ies ac in leo. In nec
ip­sum enim. Donec sus­cip­it plac­er­at ad­ipisc­ing. Nul­la a
nunc mi. Sed ve­hic­u­la sus­cip­it mag­na sed con­val­lis. Donec
ul­trices con­se­quat tor­tor, at fer­men­tum augue mal­esua­da in.
Ut cur­sus, odio non port­ti­tor var­i­us, dui neque luc­tus la­cus,
in rhon­cus dui odio eges­tas libe­ro. Mae­ce­nas po­s­u­ere
con­sec­te­tur lec­tus, vi­tae con­sec­te­tur lig­u­la
con­sec­te­tur eu.</p>
<p>Lo­rem ip­sum do­lor sit amet, con­sec­te­tur
ad­ipisc­ing elit. Vi­va­mus ac nul­la ac nunc ves­ti­b­u­lum
sod­ales sed eget pu­rus. In­te­ger tris­tique neque at urna eleif­end
por­ta. Mau­ris a sa­pi­en augue, ve­hic­u­la rutrum augue.
Sus­pend­isse pre­tium pulvi­nar tris­tique. Nul­la el­e­men­tum
blan­dit mas­sa, pel­len­tesque el­e­men­tum orci tem­pus sed.
Cur­a­bi­tur eget est neque, nec pel­len­tesque enim. Sed blan­dit
do­lor et neque tin­ci­dunt rutrum. Lo­rem ip­sum do­lor sit amet,
con­sec­te­tur ad­ipisc­ing elit. Nul­lam tin­ci­dunt do­lor
vel neque eleif­end frin­g­il­la. Prae­sent et orci nec jus­to
vulpu­tate ul­tri­c­ies ac in leo. In nec ip­sum enim. Donec sus­cip­it
plac­er­at ad­ipisc­ing. Nul­la a nunc mi. Sed ve­hic­u­la
sus­cip­it mag­na sed con­val­lis. Donec ul­trices con­se­quat
tor­tor, at fer­men­tum augue mal­esua­da in. Ut cur­sus, odio non
port­ti­tor var­i­us, dui neque luc­tus la­cus, in rhon­cus dui odio
eges­tas libe­ro. Mae­ce­nas po­s­u­ere con­sec­te­tur
lec­tus, vi­tae con­sec­te­tur lig­u­la con­sec­te­tur eu.</p>
<p>Lo­rem ip­sum do­lor sit amet, con­sec­te­tur
ad­ipisc­ing elit. Vi­va­mus ac nul­la ac nunc ves­ti­b­u­lum
sod­ales sed eget pu­rus. In­te­ger tris­tique neque at urna eleif­end
por­ta. Mau­ris a sa­pi­en augue, ve­hic­u­la rutrum augue.
Sus­pend­isse pre­tium pulvi­nar tris­tique. Nul­la el­e­men­tum
blan­dit mas­sa, pel­len­tesque el­e­men­tum orci tem­pus sed.
Cur­a­bi­tur eget est neque, nec pel­len­tesque enim. Sed blan­dit
do­lor et neque tin­ci­dunt rutrum. Lo­rem ip­sum do­lor sit amet,
con­sec­te­tur ad­ipisc­ing elit. Nul­lam tin­ci­dunt do­lor
vel neque eleif­end frin­g­il­la. Prae­sent et orci nec jus­to
vulpu­tate ul­tri­c­ies ac in leo. In nec ip­sum enim. Donec sus­cip­it
plac­er­at ad­ipisc­ing. Nul­la a nunc mi. Sed ve­hic­u­la
sus­cip­it mag­na sed con­val­lis. Donec ul­trices con­se­quat
tor­tor, at fer­men­tum augue mal­esua­da in. Ut cur­sus, odio non
port­ti­tor var­i­us, dui neque luc­tus la­cus, in rhon­cus dui odio
eges­tas libe­ro. Mae­ce­nas po­s­u­ere con­sec­te­tur
lec­tus, vi­tae con­sec­te­tur lig­u­la con­sec­te­tur eu.</p>
</div>
</div>
</body>
</html>
在清单 12-2 中，你可以看到没有什么不寻常的，除了一些新的 CSS 属性叫做-webkit-wrap-shape-mode 和-webkit-wrap-shape *。第一个任务是通过使用内容的值来指示 div 容器内的副本应该自由流动。*第二个是指示浏览器将内容包装在排除项(在本例中是您的广告)周围，即 300x250。通过应用这种排除法，你会得到图 12-4 中的结果。
图 12-4。出版商如何排除广告清单中的页面内容的示例
有关排除规范的更多信息，请访问dev.w3.org/csswg/css3-exclusions或html.adobe.com/webstandards。
CSS 着色器
这就是 CSS 真正令人惊奇的地方！有了 CSS 着色器，你终于可以利用机器的 GPU 为浏览器带来真正的运动图形。这是什么意思？首先，您现在可以利用简单的 CSS 声明和顶点着色器来制作丰富的电影效果。顶点着色器是给予机器 GPU 的坐标，用于处理图形操作和阴影，这类似于流行的 3D 程序中使用的技术。
使用顶点着色器(VS) 的原因是为了变换目标对象，并在 3D 空间中操纵它。使用 CSS 着色器，您可以很快控制对象的位置、颜色和纹理等属性，并获得真正的创造性和惊人的结果，这是您在真实的运动图形程序中经常看到的。需要营造逼真的翻页效果或者飘扬的旗帜？那么你应该看看可以用着色器做些什么！这些新功能将在您的网站和广告内容中创建真正令人惊叹的体验，但请记住，这些功能会对您的机器提出很高的要求，因此，请确保当这种工作规范成为现实时，您正在使用更高端的显卡，并且一如既往地，功能检测会提供支持，并为机器可能无法达到速度的用户提供优雅的降级。以下代码是 CSS 着色器的一个示例:
<style>
#someElement {
filter: custom(url(wave.vs), amount 0);
transition-property: filter;
}
#someElement:hover {
filter: custom(url(wave.vs), amount 1);
}
</style>
此示例概述了 filter 属性和一个到 wave.vs 顶点着色器的自定义 URL。在悬停时，您只需将波浪量从 0 增加到 1，这样效果就会过渡到该量，从而创建一个动画效果。CSS 着色器目前正在被纳入 CSS 过滤器规范，甚至将在 IE 10 中实现。
CSS 过滤器
CSS 着色器规范与 CSS 滤镜规范结合使用，使您能够通过直接 CSS 添加类似 Photoshop 的滤镜，并创建一些令人惊叹的图像合成和效果。您可以使用模糊、灰度、投影(不同于方框阴影)和棕褐色等滤镜，以及调整色调、饱和度和色阶(HSL)和反转图像的色彩空间。此外，您可以调整和操作亮度、对比度和饱和度等属性。清单 12-3 概述了如何在 CSS 中轻松实现这一点。
清单 12-3 。 CSS 滤镜示例
<style>
#someElement {
-webkit-filter: blur(10px);
-webkit-filter: grayscale(1);
-webkit-filter: drop-shadow(5px 5px 20px black);
-webkit-filter: sepia(1);
-webkit-filter: brightness(10);
-webkit-filter: contrast(10);
-webkit-filter: hue-rotate(360deg);
-webkit-filter: invert(1);
-webkit-filter: saturate(10);
-webkit-filter: opacity(1);
}
</style>
正如你所看到的，你可以结合滤镜效果来创建一个非常独特的图像排列，甚至可以在这些效果上添加动画。在本例中，您只是操纵每个滤镜属性，这将创建一个由于最大值的对比度和亮度设置而完全褪色的图像。我建议分别使用这些属性，以便熟悉如何在浏览器中对图像进行非破坏性编辑。这对 iDevices 上的移动广告也非常有帮助，因为 iOS6 和 BlackBerry 10 都支持带有 Webkit 前缀的 CSS filters 规范，其他浏览器也将提供支持。CSS 过滤器的好例子位于html 5-demos . app spot . com/static/CSS/filters/index . html；有关 CSS 滤镜规范的更多信息，请访问 dvcs.w3.org/hg/FXTF/raw… 的或在html . Adobe . com/web standards/cssscustomfilters/cssfilterlab开始使用 Adobe 的新 CSS FilterLab 使用滤镜。
注意过滤器是资源密集型的。请谨慎使用，仅在必要时在广告内容中使用，尤其是在制作动画时。总是执行特征检测，因为它还没有被完全采用。
Matrix3D
正如你所知道的，CSS 在它的第 3 级和最终的第 4 级规范中获得了很多新的特性，这是 W3C 正式确定的。我最感兴趣的是元素的 Matrix3D 属性。使用 Matrix3D，完全扭曲 3D 空间中的图像是可能的。考虑到这一点，您可以在 HTML5 video 元素上创建图像操作和过渡，以创建可信的复合图像，其中 DOM 元素似乎嵌入在视频本身中。
Matrix3D 通过将元素上的 3D 变换指定为 4x4 矩阵来工作，该矩阵具有可编辑的独立象限。让我们看看如何在 CSS 中使用 Matrix3D 属性 :
#someElement {
matrix3d(m00, m01, m02, m03, m10, m11, m12, m13, m20, m21, m22, m23, m30, m31, m31, m33)
}
有这么多参数，这看起来有点复杂，但是表 12-1 将帮助你理解你可以更新矩阵的哪一部分。请密切注意表中的参数编号和象限。把这个表想象成任何 DOM 对象的覆盖图，你就会明白你将根据你传递的参数调整图像的哪一部分。
表 12-1 。Matrix3D 网格示例
如果你是个新手，使用 Matrix3D 会让人不知所措，所以我建议在使用它的时候给一个非常有用的在线工具添加书签。具体来说，看看cssglue.com/matrix，它允许你实时编辑和查看更新。
面具
CSS3 中的掩码(该提案由 Webkit 提出，正在考虑用于 W3C 标准化)是 CSS 中另一个可以利用的巨大进步。蒙版 对于许多使用 Flash 设计广告的设计师来说是一个非常受欢迎的工具。使用 CSS 遮罩，您可以通过只显示您想要让查看者看到的图像部分并隐藏其他区域来实现一些非常漂亮的图像技巧。遮罩允许对图像进行非破坏性的操作，对于在浏览器中节省 k-weight 非常有用。它们让您能够以 JPEG 格式保存图像，与 PNGs 相比，这大大节省了 k-weight。存储为 JPEG 格式会保留图像保真度，但不会保留 PNG 文件中的 alpha 透明图层。为此，您可以利用蒙版对图像进行干净的剪切，这将使图像看起来是透明的(像 PNG 一样),但会节省大量的整体文件大小。
在撰写本文时，只有 Webkit 支持掩码 。iOS、Android 和 BlackBerry 上的浏览器都支持它(带有供应商前缀)，确保你已经安装了 Webkit Nightly 或者手边有一部电话，并按照清单 12-4 中的步骤操作。
清单 12-4 。CSS 遮罩示例
<html>
<head>
<style type="text/css">
#theImage {
background-image: url(image.jpg);
background-repeat: no-repeat;
width: 504px;
height: 288px;
}
.mask {
-webkit-mask-position: -60 -60;/*x and y for mask position*/
-webkit-mask-size:600px 400px;
-webkit-mask-image: url(star.png);
}
</style>
</head>
<body>
<div id='theImage' class='mask'></div>
</body>
</html>
从清单 12-4 中，你可以看到你有一个 ID 为 image 的图像和一个名为 mask 的 mask 类。在带有图像的 div 上，应用类 mask，该类 mask 使用 CSS 来应用名为 webkit-mask-image 的仅 Webkit 属性，该属性使用 star.png 资源在图像资源上创建遮罩。您还可以使用–WebKit-mask-position 和–WebKit-mask-size 来调整一些遮罩属性，如位置和大小，这样您就可以在 star.png 遮罩内获得更精确的 位置和居中图像(参见图 12-5 )。
图 12-5。Webkit 掩码的一个例子
注意你可以用 SVG 形状，CSS 渐变，图像来遮罩 DOM 元素，而不是 PNG 图像。
从这个例子中可以看出，调整 star.png 文件会极大地影响输出质量。如果你要缩放或调整你的遮罩，使用 SVG 是最理想的。关于 CSS3 中面具的精彩文章，请访问 css-tricks.com/webkit-imag… iOS、Android 和 BlackBerry 上看起来仍然是一个有效的解决方案，因为在移动设备上节省 k-weight 是必须的！
反光
与带有遮罩的浏览器支持类似，CSS 倒影是一种向任何 DOM 对象(如图像、形状、画布元素，甚至 HTML5 视频)添加倒影的新方法。使用 webkit-box-reflect 属性，您可以在任何方向重复一个元素，应用偏移，甚至使用蒙版，就像您刚刚学习的那样。要使用 CSS 反射规则，您需要看一下语法:
-webkit-box-reflect: <direction> <offset> <mask-box-image>
属性获取方向值、偏移值和掩码。在你的示例图像上使用这个语法，你可以生成清单 12-5 中的代码。
清单 12-5 。CSS 反射示例
<html>
<head>
</head>
<body>
<img src="image.jpg" style="-webkit-box-reflect:below 2px -webkit-gradient(linear, left top,
left bottom, from(transparent), color-stop(0.4, transparent), to(white));">
</body>
</html>
正如您所看到的，您可以在图像元素上使用这种方法和 inline style 属性。对于第一个方向规则，您将其设置为“下方”。对于偏移的第二个规则，你指定 2px，对于第三个规则，你应用一个蒙版渐变，这样图像看起来就像逐渐变细到没有了。如果你在你的浏览器中测试这个例子，你应该得到如图 12-6 所示的结果。
图 12-6。CSS 反射的例子
请记住，您需要为您的示例声明自己的图像源，并确保使用支持的浏览器(如 Webkit)进行测试。
范围样式
正如你现在所知道的，将广告内容从出版商内容中分离出来是一个挑战。通常，如果广告没有包装在 iframe 中，如果命名空间不合适，它们会共享样式和功能。通过对 HTML iframe 元素的沙箱属性的新支持，这将允许发布者管理嵌入内容的安全风险。例如，您可以授予包含发布者控制的内容的 iframe 完全权限，但授予第三方广告服务控制的 iframe 的权限要少得多。更好的是，如果广告服务器使用 CSS scoped 属性将其广告内容包装在一个代码块中，它可以独立于发布者页面的其余部分将样式单独应用于该代码块。这些限定了作用域的样式应该会覆盖从发布者页面继承的任何样式，这应该会正确地呈现广告内容。有了 CSS 作用域属性，你可以编写专门针对广告元素的样式，如清单 12-6 所示。
清单 12-6 。CSS 范围的示例
<html>
<head>
<body>
<section>
<style scoped>
iframe {
position: absolute;
border: 1px solid #000;
top:100px;
left: 200px;
-webkit-box-shadow: 0px 15px 20px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 0px 15px 20px rgba(50, 50, 50, 0.5);
box-shadow: 0px 15px 20px rgba(50, 50, 50, 0.5);
}
</style>
<iframe id='ad' width='300' height='250' seamless src='sampleAd.html'></iframe>
</section>
</body>
</html>
如果你一直跟着做，你会注意到 CSS 样式将只在 iframe 元素上受到影响，在这个例子中它保存你的广告单元，如图 12-7 所示。
图 12-7。CSS 范围样式的示例
在发布者的标记中包含这些限定范围的样式允许发布者专门对标记的某些部分进行样式化，这些部分通过样式表来覆盖默认设置。请记住，CSS 范围的样式在浏览器支持中非常有限，但随着新浏览器版本的发布，这种情况有望改变。请务必通过访问w3schools.com/html5/att_style_scoped.asp来关注此事。
CSS 摘要
许多 CSS3 规范每天都被不同工作组的许多人修改，所以它是非常不稳定的，覆盖所有这些规范就像击中一个移动的目标。浏览器制造商如今竞争激烈(这是一件好事)，他们的发展速度远远超过了大多数工作组的速度。这些特性中的一些是一种优势，因为它们允许你获得浏览器最前沿的功能，并且它们允许你进行实验和真正的创新。然而，这可能是一个缺点，因为通常特性不是作为标准提交的，所以许多开发人员不知道可以访问它们，也不知道这些特性可以在哪些浏览器中正确运行。
如你所知，为一个浏览器开发通常不是最好的方法，因为许多人使用多种操作系统和多个版本的浏览器，这最终意味着你需要在开始任何开发之前定义你的范围。广告业的情况更是如此，因为客户希望他们的信息无处不在；因此，瞄准最广泛的受众并覆盖更多的屏幕/浏览器是绝对必须的，这可能会限制您使用的 CSS 功能。请记住，当使用 Modernizer 之类的功能检测时，当浏览器说，“嘿，当然，我支持这个功能，”您应该首先做一些更多的测试。仅仅因为浏览器声称它支持某个功能，并不意味着它在广告活动中是有效的，尤其是当它与发布者页面上的其他元素一起部署时。对于动画来说尤其如此，它可能会很快烧坏浏览器，让一切都崩溃，因为重新绘制和重排屏幕对性能来说是很昂贵的。
注要获得 CSS 新特性的完整列表，请访问
css3clickchart.com。
新兴应用编程接口
接下来的部分将应用于新兴的 JavaScript 和 DOM APIs，它们将出现在新的现代 web 堆栈中。通过下载前面概述的最新测试版浏览器，可以使用以下大多数 APIs 在最坏的情况下，在撰写本文时，它们还没有在任何浏览器版本或设备中实现，但正式的规范正在开发中。最好密切关注 caniuse.com 和各个工作组的进展和采用情况。让我们从急需的图片元素开始吧。
象素
我想介绍的第一个 DOM 特性是新的图片元素。正如你所知道的，随着屏幕尺寸和像素密度的变化，处理位图图像变得越来越困难，因为它对每个屏幕都进行了正确的优化。虽然有些人选择使用直接的 CSS 和/或 SVG 作为图形元素，并配以响应性的布局方法，但位图图像在更高密度的屏幕上和波动的屏幕布局上看起来仍然非常不同。
幸运的是，有一个工作组致力于开发一种被称为响应图像 的技术，使用一种新的图片元素。使用图片元素 ，您可以根据访问内容的设备指定要加载的特定图片。例如，如果您在苹果 iPhone 3GS 上查看图像，您的设备像素密度将是设备像素和文档的 CSS 像素之间的 1:1 关系。然而，如果你在 iPhone 4+上观看相同的内容，你的设备像素密度会翻倍，达到 2:1 的关系(或者像苹果公司创造的那样，视网膜显示器)。使用这个设备，意味着你的设备像素是 CSS 像素的两倍。清单 12-6 使用图片元素根据您的源媒体查询加载适当的图像。
清单 12-6 。图片元素示例
<html>
<head>
<body>
<picture alt="Sample Image">
<source src="default.jpg">
<!-- small size for viewport widths 400px wide and up -->
<source src="small.jpg" media="(min-width: 400px)">
<!-- medium size for viewport widths 800px wide and up -->
<source src="medium.jpg" media="(min-width: 800px)">
<!-- large size for viewport widths 1000px wide and up -->
<source src="large.jpg" media="(min-width: 1000px)">
<!-- extra large size for viewport widths 1200px wide and up -->
<source src="xlarge.jpg" media="(min-width: 1200px)">
</picture>
</body>
</html>
众所周知，随着越来越多的器件获得更高的像素密度，考虑这种设计方法变得越来越重要。您不希望图像在支持高质量位图的设备上看起来模糊或不清晰。使用传统的 CSS 媒体查询方法，您可以支持多个图像源，并让浏览器/设备处理它可以支持的图像源。有关 responsive images 工作组和图片元素的更多信息，请访问dvcs . w3 . org/Hg/html-proposals/raw-file/tip/responsive-img/responsive-images . html。
iOS 6 Safari 和桌面 Safari 6 中的苹果采取了类似但略有不同的方式。现在，您可以通过对 background-image 的属性使用–WebKit-image-set 方法来利用这个新元素。看看下面的例子，你会有更好的想法:
<style>
.hqImage {
background-image:
-webkit-image-set(
url(standard.jpg) 1x,
url(highdefinition.jpg) 2x
);
}
</style>
正如您在前面的示例中所看到的，您使用了 hqImage 类并将 background-image 属性设置为 new–WebKit-image-set 方法。在该方法中，您需要使用两个参数，即图像资源的 URL 和图像应该使用的像素密度。在这种情况下，您有一个 1x 设备像素密度的 standard.jpg 文件和一个 2x 密度的 highdefinition.jpg 文件。这确实是一个很大的改进，因为如果有更高分辨率的设备访问您的内容，您不需要遍历 DOM 并将所有图像替换为高 DPI 图像。此外，只有支持该设备的映像才会被加载，因此用户下载映像不会有额外的开销；他们只能得到他们的设备支持的那个。
[计] 下载
接下来是 HTML5 中新的下载属性。您是否希望允许用户从您的 web 内容中保存文件？或者让他们在一个广告单元中保存一张优惠券，这样他们以后可以打印出来并在销售点使用它，怎么样？现在，您可以利用新的 download 属性，该属性将指示浏览器将链接作为可下载素材来处理，而不是在新的窗口或选项卡中将浏览器重定向到该资源。清单 12-7 展示了如何使用下载属性。
清单 12-7 。下载属性示例
<html>
<head>
</head>
<body>
<a download="SomeFile.jpg" href="SomeFile.jpg">Download This Image!</a>
</body>
</html>
现在当用户点击下载这个图像！链接，浏览器将下载名为 SomeFile.jpg 的资源，如图图 12-8 所示。
图 12-8。Chrome 浏览器中的下载功能
使用 download 属性的真正好处是在处理 canvas 元素或二进制对象(BLOB)以及利用文件系统 API 时。这将允许用户下载用户可能创建的广告内容。一个很好的例子可以在 html5-demos.appspot.com/static/a.do… 找到。
webrtc
Web 实时通信(WebRTC) 是一种无需 Flash 等第三方插件即可使用摄像头和麦克风等通信手段的技术。其使命是原生使用浏览器，并利用简单的 JavaScript API 和 HTML5 来创建互动和现场体验。WebRTC 允许视频聊天、记录器等等。它的核心功能包括回声消除、降噪、自动增益控制和网络管理。如果你想让用户上传你的品牌或服务的个性化视频，或者允许用户使用他们的麦克风控制广告单元的功能，这真的很有用。向用户提供关于他们如何与你的广告内容互动的实时反馈。想想利用实时捕捉你的观众并把他们作为广告体验的一部分的可能性。将视频捕获到画布元素上，甚至应用 CSS 转换和动画。一切皆有可能！清单 12-8 展示了如何通过使用 getUserMedia API 与 WebRTC 一起工作。
清单 12-8 。WebRTC 示例
<html>
<head>
</head>
<body>
<video autoplay></video>
</body>
<script type="text/javascript">
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
navigator.getUserMedia({audio: true, video: true}, function(stream) {
document.querySelector('video').src = window.URL.createObjectURL(stream);
}, function(e) {
console.log(e);
});
</script>
</htmls>
在清单 12-8 中，你可以看到你创建了一个 HTML5 视频元素，剩下的魔术发生在 JavaScript API 中。您在 JavaScript 中做的第一件事是通过浏览器的 navigator 对象请求 getUserMedia API。通过将音频和视频传入第一个参数，并在第二个参数中创建一个处理流的方法，可以做到这一点。通过在文档中获取对视频对象的引用并通过 createObjectURL 方法将视频源设置为流来处理该流。从图 12-9 中你会注意到的第一件事是你提示用户并要求使用他们的相机。一旦他们“允许”，你就可以播放视频流了。(我甚至指出了视频的源设置为什么！)
图 12-9。在 Chrome 浏览器中显示 WebRTC 功能
当你能获得这种形式的用户交互时，可能性真的是无穷无尽的。您甚至可以使用运动跟踪器来检测用户在视频帧中的位置。一个非常惊人的例子是允许用户弹奏虚拟木琴(soundstep.com/blog/experiments/jsdetection)，但这并没有结束。把他们的头放在一个游戏角色身上，甚至演奏虚拟鼓，与世界各地的其他乐队成员合作，怎么样？想要一个真正好的 WebRTC 演示，请访问 html5rocks.com/en/tutorial… 的。
注意为了观看视频流，你需要在本地或远程服务器上测试这个 WebRTC 演示。
媒体源 API
HTML5 视频的最大限制之一是流式视频的通用规范。现在有了媒体源 API，您可以“分块”或分割 WebM 视频文件，并使用 JavaScript 将视频块拼接在一起，为最终用户提供无缝的视频播放体验。这种方法非常适合在带有视频的网络广告中使用，因为流式视频不会招致出版商设置的额外 k-weight。在撰写本文时，唯一的例子可以在html5-demos.appspot.com/static/media-source.html找到。在测试这个功能之前，一定要访问 chrome://flags 并启用 API，因为它不是一个本机功能，也不是目前采用的功能；相反，这是将 WebM 视频格式流式传输到 Chrome 浏览器的未来解决方案。欲了解更多信息，请访问ion cannon . net/utilities/1515/segmenting-webm-video-and-the-media source-API。
注意在撰写本文时，媒体源 API 仅支持 WebM 视频容器。
Web 音频 API
Web Audio API 直接在浏览器内部提供对音频波的实时处理和分析。它本质上是一个低级音频操作 API，允许您使用 JavaScript 生成和操作音频波，而不需要插件。它使用空间声相、低/高通滤波器、卷积滤波器、增益控制和正弦波生成等效果。使用 Web Audio API，您可以有效地构建复杂的音频平台，在您的 Web 内容中模仿专业工具一样的功能。假设您有一个广告体验，要求用户使用 getUserMedia 记录他们的声音，然后在广告中他们可以定制他们的声音，听起来像花栗鼠或像他们在水下。你可以用网络音频 API 做一些令人惊讶的事情，包括为游戏创造各种各样的声音(【html5rocks.com/en/tutorial…](html5rocks.com/en/tutorial…](html5audio.org)，并确保通过访问[`caniuse.com/#feat=audio…](caniuse.com/#feat=audio…
Web 通知 API
服务器发送事件允许通知以 DOM 事件的形式从服务器发送到客户机(浏览器)。如果你熟悉 Growl ( growl.info )、苹果通知中心或移动设备上的推送通知，你会很快理解这些服务器端事件能做什么。现在，当用户访问您的 web 内容时，您可以直接在浏览器中执行类似的行为。如果你是一个内容所有者，并且有一个用户在你的页面上，这是非常有益的；当更新就绪时，您可以向他们发送提醒以刷新页面。此外，如果你是一个新闻广播员，如果你想在你的网站上向用户推送最新的新闻信息，这将是非常有用的。看看清单 12-9 中的 Web 通知 API。
清单 12-9 。服务器事件 API 示例客户端代码:
<!DOCTYPE html>
<html>
<body>
<h1>Server:</h1>
<div id="output"></div>
<script>
if (typeof(EventSource)!=="undefined") {
var source = new EventSource("sample.php");
source.onmessage=function(event) {
document.getElementById("output").innerHTML += "New " + event.type + " " + event.data + "<br/>";
};
} else {
document.getElementById("output").innerHTML="No Support";
}
</script>
</body>
</html>
以下是服务器代码:
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: John Percival's time is: {$time}\n\n";
flush();
?>
在前面的例子中，您可以看到我将新的 EventSource 对象连接到 sample.php 文件，该文件返回服务器的时间和日期。在那里，我只是监听 onmessage 事件，并通过将事件的数据和类型连接成一个字符串来处理它，并通过将 innerHTML 设置为等于该值来将其呈现到屏幕上。有关 Web 通知 API 的更多信息，请访问dev . w3 . org/2006/Web API/Web Notifications/publish/Notifications . html。
注意你需要在本地或远程服务器上运行这个例子。
求转发到
WebSockets 终于来了！通过 WebSockets (WS) ，您可以使用新的 API 和协议为 Web 提供动态和协作体验。WebSockets 可以用于在浏览器中生成多人、交互式和协作性的 web 内容，而不需要像 Flash 这样的插件来使用套接字连接。WebSockets 规范旨在提供一种双向对话机制，这种机制远远超越了传统的 HTTP 单向协议。它最初依赖单个 HTTP 请求来创建连接，但是随后连接被升级，因此任何一端都可以同时发送和传输数据。使用 WS，您可以提供对数据馈送的实时更新，甚至提供多用户协作，而不需要 Ajax 或 HTTP 上的长时间轮询。清单 12-10 展示了规范的 API 部分，但是请记住它既是 API 也是协议。
清单 12-10 。WebSockets 示例
<script>
window.URL = window.webkitURL || window.URL;
window.WebSocket = window.WebSocket || window.MozWebSocket;
var ws = new WebSocket('ws://johnpercival.org/socket', 80);
ws.binaryType = 'blob';*// or 'arraybuffer'*
ws.onopen = function(e) {
console.log('Connection OPEN');
};
ws.onmessage = function(e) {
console.log('MESSAGE');
};
//Send data to the websocket server
var data = "Sample Data";
ws.send(data);
</script>
通过回顾这个例子，您会注意到您设置了一个新的 WebSocket 对象，向它传递一个 WS: protocol 和 domain 的参数，并传递一个开放端口的第二个参数，在这个例子中是 80。一旦通过 HTTP 建立连接并升级到 WS，服务器和客户机就可以随时发送数据，甚至可以同时发送。只发送数据本身，没有 HTTP 头的开销，这大大减少了传输所需的带宽；此外，因为这是一个推送场景，所以客户端不需要不断轮询服务器以获取更新的信息。对于在不支持 WebSockets 的旧浏览器中使用 web sockets，甚至有一些有用的 polyfills，如 Socket.io，如果浏览器不支持它，它会故障转移到 Flash socket、Ajax 或长轮询。我想你会在广告中看到很多 WebSockets 的例子，用来创建真正有趣的实验，用户可以在广告单元中直接(实时)相互竞争。你可以在 labs.dinahmoe.com/plink 的、socketracing.com 的、mrdoob.com/projects/multiuserpad 的找到一些真正有趣的 WebSocket 实验。有关 WebSockets API 的更多信息，请访问w3.org/TR/2012/WD-websockets-20120809，并确保通过访问lcaniuse.com/#feat=websockets来检查其支持。
web GL(web GL)
还记得在第四章我讨论 canvas 的时候吗？如果是这样的话，你可能还记得画布的绘制背景，以及它目前是如何广泛支持 2D 的。嗯，现在在一些支持的浏览器中，上下文可以通过 WebGL 的方式升级到 3D。WebGL 是一个复杂的 API，它将真正的 3D 引入浏览器，而不需要像 Flash 或 Unity 这样的插件。请记住，建议您仅使用更高端的计算机硬件，这是正确查看 WebGL 内容所必需的。
因为支持 WebGL 的设备和浏览器仍在增长，广告的采用开始得相当缓慢。然而，当采用发生时，有一些非常好的和有文档记录的 API 旨在简化它的使用，即，三个 js(mrdoob.github.com/three.js)和 A3(aerotwist.com/a3)。
在 WebGL 之前，您需要利用 Flash 和 PaperVision 等 3D 库来创建身临其境的 3D 体验。现在(随着时间的推移)，您可以用 JavaScript 和现代浏览器创建这些类似的体验。看一看图 12-10 来自webglstats.com概述了撰写本文时支持 WebGL 内容的桌面和移动浏览器的总体支持。
图 12-10。web GL 对手机和桌面浏览器的全面支持(来源:【webglstats.com】??
在撰写本文时，大多数用户可以接受 WebGL，但它还远远不是一个无处不在的特性。与此同时，我建议多了解一点 WebGL，并了解如何在您未来的广告活动中使用它。WebGL 内容的一些真正令人惊叹的例子是hexgl.bkcore.com和demo.kaazing.com/racer，但是一定要通过访问caniuse.com/#feat=webgl在支持的浏览器上观看它们。
网络意图
由于网络与数量惊人的社交网络、博客平台和外围设备的整合问题日益严重，谷歌 Chrome 团队开发了所谓的 Web Intents。它是一个用于客户端服务发现和应用间通信的框架。首先，服务注册其为用户处理动作的意图。接下来，内容请求开始一个动作(共享、编辑、拍摄、挑选、查看等等)。然后，用户可以选择哪个服务来处理该动作。例如，如果你是 Android 用户或 iOS 6 用户，当你选择分享图片时，这个工作流程听起来会非常熟悉。看一看图 12-11 来更好地了解网络意图 在 Chrome 浏览器中是如何工作的。
图 12-11。Chrome 上的 Web Intents 视图
如您所见，这让用户可以控制他们想对 web 内容做什么。清单 12-11 展示了如何使用 Web Intents API 来生成这个图像。
清单 12-11 。Web 意图示例
<script>
var intentParams = {
"action": "http://webintents.org/share",
"type": "image/*",
"data": location.href
};
var intent = new Intent(intentParams);
window.navigator.startActivity(intent);
</script>
如您所见，您用一个图像文件创建了一个新的意图，此时，任何注册支持基于图像的意图的用户应用都可以为用户处理这个问题。这可能是脸书、邮件、Instagram、任何已安装的应用或 web 应用。关于网络意图的更多信息，请访问 webintents.org 和 w3.org/TR/web-inte… 的。
MIME 和协议 API
你有智能手机吗？很有可能，如果你正在读这本书，你已经有了 iPhone、Android、黑莓或者 Windows Phone。你有没有注意到网络内容中的电话号码或电子邮件地址是如何显示为可点击或可点击的链接的？这个链接使用了不同于普通 HTTP 或 HTTPS 请求的协议。它使用 TEL:和 MAILTO:协议，允许本地电话或邮件应用处理窃听的内容，从而打电话或发送电子邮件。事实上，许多方案已经被列入白名单(意味着不能重复使用)，如 irc:，mailto:，mms:，news:，nntp:，sms:，smsto:，tel:，urn:，webcal:，和 xmpp:。甚至还有针对 dropbox:，hulu:，admarvel:，wsj:，和 chrome:等应用的特定协议。
registerProtocolHandler 方法允许站点将自己注册为特定方案(或意图)的可能处理程序。例如，在线电话消息服务可以将自己注册为 sms:方案的处理程序，这样，如果用户点击这样的链接，用户就有机会使用该网站。类似地，registerContentHandler 方法允许网站将自己注册为内容 MIME 类型的可能处理程序。例如，同一个在线消息服务可以将自己注册为文本/vCard 文件的处理程序，这样，如果用户没有能够处理 vCard 的操作系统应用，他们的 web 浏览器可以建议一个站点来查看联系信息。这一切意味着，网络又一次变得与你每天利用的正常操作系统任务紧密相连。您可以注册一个 vCard MIME 类型的站点，并选择该站点/应用来处理该文件的读取，而不是在 Mac 上打开地址簿。这很酷，因为它模糊了本地操作系统和网络之间的界限。有关协议 ?? API 的更多信息，请访问dev . w3 . org/html 5/spec/system-state-and-capabilities . html # custom-handlers。
web 页格式
WebP 是谷歌在购买了 VP8 inventor 的 On2 技术后开创的一种新的图像格式，它为网络上的图像提供无损和有损压缩。在第七章中，当我讨论 WebM(一种视频格式)的时候，你就明白 Google 为什么要开发 WebP 了。在同等质量下，WebP 无损图像的尺寸比 PNG 图像小 26 %,比 JPEG 图像小 25%到 34%。WebP 只需要 22%的额外字节就可以支持无损透明(也称为 alpha 通道)。更多关于 WebP 项目的信息，请访问developers.google.com/speed/webp。
游戏手柄 api
游戏手柄 API 是一个正在开发的标准，旨在为游戏手柄和网络内容操纵杆提供通用支持。现在，你第一次可以利用游戏手柄 API，通过 JavaScript 读取插入机器的任何控制器的状态。正如你可能已经猜到的那样，这对于网络游戏玩家来说是一个巨大的好处，但甚至其他人也在寻找另一种设备来与网络内容交互，而不是传统的鼠标。因为该规范仍在制定中，并且仅在 Chrome 和 Firefox 的某些测试版本中采用，所以您可以依赖一个有用的 JavaScript 库来处理浏览器、操作系统和平台之间的碎片。这个库叫做 GamePad JS(【gamepadjs.com】??)。因此，如果你有一个 Xbox 360 控制器和一个 USB 端口，试试这个 API，但要确保你使用的是受支持的浏览器之一。
新兴移动 API
在这一节中，我将重点介绍特定的新兴移动 API，这些 API 使您能够访问许多设备功能，允许您针对不断增长的移动环境更具体地定制内容。设备支持一直是客户的普遍要求，他们想知道哪些最新和最棒的功能将使他们的内容和广告真正领先。以下 API 将概述一些目前处于草案或测试使用状态的规范。
电池 API
电池 API 允许开发者在他们的移动和便携设备上查询用户的电池电量状态。这对于获取访问权限非常重要，这样您就不会在用户设备的电力资源有限的情况下向他们征税。如果电池电量非常低，你可以减少甚至不提供广告内容，这允许用户延长时间来处理更重要的任务，如打电话或发电子邮件。使用电池 API，开发人员可以检测设备是否正在充电，检测设备的充电水平，以及检测设备的放电时间。清单 12-12 展示了如何使用这个 API。
清单 12-12 。电池 API 示例
<script>
var theBattery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;
theBattery.addEventListener("chargingchange", function(event) {
console.warn("Charging change: ", theBattery.charging);
}, false);
theBattery.addEventListener("chargingtimechange", function(event) {
console.warn("Charge time change: ", theBattery.chargingTime);
}, false);
theBattery.addEventListener("dischargingtimechange", function(event) {
console.warn("Discharging time change: ", theBattery.dischargingTime);
}, false);
theBattery.addEventListener("levelchange", function(event) {
console.warn("Level change: ", theBattery.level);
}, false);
</script>
如您所见，您通过使用 navigator.battery 对象的带前缀和不带前缀的版本来获取对用户电池的引用。接下来，根据用户电池的状态，您将附加事件监听器并记录关于状态的信息。同样，有了这些信息，你可以更有针对性地为你的终端用户提供广告内容。欲了解更多信息，请访问位于W3.org/TR/battery-status的工作组规范。
网络 API
网络 API 允许开发人员针对不同的网络连接 修改他们的内容。现在你可以通过 navigator.connection.type 优化网络连接状态(可以是未知的*、以太网、* wifi 、 2g 、 3g 、 4g *、*和无)，看看在清单 12-13 中使用网络 API。
清单 12-13 。网络 API 示例
<script type="text/javascript">
while (navigator.onLine) {
var network = navigator.connection.type;
if (network === "ethernet" || network === "wifi" || network === "4g") {
//full ad experience
} else if (network === "3g" || network === "2g") {
//reduced ad experience
} else {
//no ad experince due to unkown network or none.
}
}
</script>
正如你所看到的，你可以根据用户的连接速度来定制你的广告体验。将此与电池 API 结合起来，您可以真正将用户体验提升到一个新的水平。在这个例子中，你检测到一个强连接，并提供完整的广告体验；如果是信号较弱的手机服务，你就稍微降低一点。如果它是未知的或者没有，你就完全去除了广告体验。我认为这个 API 在不久的将来会非常有用，因为浏览器会实现这个 API。有关该 API 的更多信息，请访问w3.org/TR/netinfo-api。
振动 API
另一个有用的移动设备 API 是 Vibration API，它允许 JavaScript 控制设备的振动硬件(如果可用的话)。通过调用振动方法，您可以向用户的移动设备触发通知，如下面的代码片段所示:
<script>
var duration = 2000;
var delay = 500;
navigator.vibrate([duration, delay, duration]);
</script>
在前面的示例中，您将设备设置为振动两秒钟，然后等待半秒钟，然后再次振动两秒钟。如果设备不允许振动，振动呼叫将被忽略。有关振动 API 的更多信息，请访问w3.org/TR/vibration。
日历 API
日历 API 允许通用访问用户的日历 。该 API 可用于创建、检索、更新和删除用户日历中的日历事件信息，如果您的客户有一笔大买卖，并希望从广告部门向他们的用户发送日历邀请，这将非常有用。通过 navigator 对象，您可以获取对用户日历的引用，您可以创建、检索和操作事件。欲了解更多关于该 API 的信息，请访问 w3.org/TR/calendar…
联系人 API
根据您刚刚从 Web Intents API 中了解到的内容，您可以使用它将用户的联系人列表直接拉入广告中(选择加入)。清单 12-14 显示了如何使用 Web Intents API 来访问你的联系人列表 。
清单 12-14 。联系人 API 示例
var intent = new Intent({
action:"http://webintents.org/pick",
type:"http://w3.org/type/contact",
extras:{fields: ["displayName", "emails"] }
});
navigator.startActivity(intent, contactsOK, contactsFail);
function contactsOK (contacts) {
console.log(contacts);
}
function contactsFail (error) {
console.error(error);
}
在这个例子中，您可以看到您正在为用户的应用创建一个新的意图来处理用户地址簿中的联系人。如果您想与联系人中的其他朋友分享广告体验中的交易，使用此 API 可能会有所帮助。有关这种新兴应用编程接口的更多信息，请访问w3.org/TR/contacts-api网站，并确保在生产活动中实现之前检查浏览器支持。
邻近事件
使用接近事件 ，您可以处理特定对象何时靠近您的设备。这可能是当用户在另一台计算机、另一个设备(如电话)附近，或者甚至是能够与您的设备来回传输数据的其他物理对象附近。有了这个 API，一个物理对象的接近可以分派一个事件，并与用户的手机共享信息。这项技术的可能性可能对营销人员非常有帮助，因为例如，当用户靠近商店时，他们的印刷活动可以将交易传输到用户的移动设备上。要了解关于这个非常新兴的 API 的更多信息，请访问 w3.org/TR/2012/WD-… ??【http://developer . Mozilla . org/en-US/docs/DOM/DeviceProximityEvent】网站](w3.org/TR/2012/WD-…
湿度、温度和光照事件
最后，一些设备甚至可以访问非常丰富的功能集，如湿度和温度 传感器以及环境测光表。处理这些事件的可能性可能是，当设备检测到它在户外阳光下时，调整内容的 CSS 以增加对比度。或者，如果该设备可以检测到温度为 100 度，也许广告的创意会根据这一结果定制特定的信息。虽然这些类型的动态数据有无限的可能性，但在撰写本文时，浏览器支持几乎是不存在的。有关这两种规格的更多信息，请访问dvcs . w3 . org/Hg/DAP/raw-file/tip/temperature/overview . html和dvcs . w3 . org/Hg/DAP/raw-file/tip/weather/overview . html。
有关环境光 API 的更多信息，请访问w3.org/TR/2012/WD-ambient-light-20120802。
浏览器支持
正如我在本章提到的，浏览器对所有这些特性的支持是非常有限的，如果有的话。几乎本章中的所有内容都是撰写本文时的最新信息，所以现在警告您:特性和规范会发生变化。最好从最新的 alpha 和 beta 浏览器开始工作，看看会发生什么，并经常查看caniuse.com，看看这些功能是否会在发布的浏览器的生产版本中得到支持。如今，大多数浏览器的一个真正伟大的改进是自动更新过程，这意味着当用户打开和关闭浏览器时，浏览器将检查是否有更新，并在最终用户下次打开浏览器时透明地处理该更新。对于所有浏览器制造商和整个网络来说，这是一个非常简单但巨大的进步，因为你永远不会希望看到老浏览器徘徊不前，就像 IE 6 需要的遗留支持一样。大众越快采用新版本的浏览器，网站设计者和开发者在支持过时版本时需要做的工作就越少，最终客户花费在遗留浏览器开发上的资金就越少。
介入
在这一点上，这似乎是显而易见的，但是创建这些规范的工作组在他们的开发周期中总是向公众开放评论和反馈。不要觉得如果你有一个很棒的想法，或者想看到某个规范被添加、修改或删除，你就没有发言权。其实大家都有；这就是开放网络的魅力所在！将您的意见提交给 W3C、WHATWG、IAB、MMA 或任何基于您的意见最有意义的人。虽然你可能不会马上得到回应，但我保证人们在听。我是他们中的一员！
摘要
现在是时候结束这场关于 HTML5 下一步走向何处以及广告行业如何利用它来使您的广告体验比以往任何时候都更加强大和迷人的讨论了。一些令人惊奇的事情正在出现在网络上，事实是这一章只是触及了表面。随着越来越多的浏览器、设备、工作组和技术出现并协同工作，您将会看到一个全新的前沿功能景观。请记住，您使用的 HTML5/CSS3 功能越新，这些功能与浏览器更新相冲突的可能性就越大。尤其是在使用带前缀的草稿和 beta 版特性的情况下。这通常意味着浏览器实现之间的差异更大，并且更有可能在它们的实际版本之间发生变化。
最后，管理每一个 API 非常困难，因为有太多的 API 正在开发中(dret.typepad.com/dretblog/html5-api-overview.html)。如果你想跟上最前沿的特性，我强烈建议阅读浏览器制造商的博客、开发者倡议文章以及 W3C 和 WHATWG 不断发展的规范。当你开始进入最后一章时，你将会对整个网络广告的前景有一个整体的了解，以及 HTML5 是如何在未来的每一个屏幕上影响它的。
十三、HTML5 广告的未来发展
众所周知，网络广告经历了许多变化，从静态图像到动态 gif，再到 Flash 富媒体，再到今天的 HTML5。公平地说，这是由负担得起的、以网络为中心的移动设备和平板电脑的出现推动的——但接下来会发生什么呢？还有哪些平台将利用新的开放 web 标准？本章将展示这些可能性。HTML5 最终将无处不在:电视、电器、游戏控制台、车辆、机顶盒、户外显示器、广告牌、电梯屏幕甚至出租车后座——基本上，室内和室外的每一个屏幕！你看过那部电影少数派报告吗？对，就像那样！只要有浏览器和网络接入，你就会看到 HTML5，当然还有广告。
HTML5 的采用在我们的行业中已经无处不在；很快，每一种设备和电器都将采用与我们的台式电脑和移动设备相同的技术。这将是传统媒体购买模式的巨大转变，因为一切都将成为“数字购买”。你目前在机构中看到的传统和数字之间的壁垒将会崩溃，你将能够通过数字的测量获得广播的覆盖范围。这将是广告行业的一次巨大颠覆；会涌现出很多新的公司，也会有很多伤亡。通过用户的采用，HTML5 将迅速在所有屏幕上带来普遍性和连续性，使营销人员能够开发统一的营销信息，并更有效地跨渠道衡量广告活动。有了这些知识，广告服务器和数据提供商很快就能把一个观众/用户的指纹(或绑定)到几台电视、一台游戏机、一台平板电脑、一部电话和一台台式电脑上。有了这类信息，肯定会出现隐私问题，因为用户的数据需要得到更多的保护。说了这么多，让我们看看今天的 HTML5 广告，更重要的是，展望未来。
HTML5 广告大约 2012 年
2012 年，HTML5 度过了相当大的一年。它经历了许多变化，包括将规范从工作组中分离出来(w3.org/QA/2012/07/html5_and_htmlnext.html)，向规范中添加了额外的功能，删除了一些功能，以及支持不同级别合规性的新浏览器。然而，你我都知道这仅仅是个开始，因为 HTML5 已经酝酿了很长时间。
具体来说，2012 年的发展给广告业带来了许多困惑，即如何通过这种新的广告发展方式有效地扩大规模。无论企业规模大小，作为一个行业，我们都有很多需要改进的地方；事实上，不要因为一家公司是财富 500 强就认为它知道自己在这个领域做什么。HTML5 是一个巨大的、改变游戏规则的转变，每个人无论大小都需要适应！广告商和营销人员要么不知道如何在不断增长的移动领域锁定用户，要么不确定 HTML5(现在不仅仅是一个流行词)现在和未来几年将会对他们的业务产生巨大影响。为了更好地说明这一点，我整理了一份过去一年中听到的关于 HTML5 和广告的问题清单。以下是一些问题(请注意，这些问题大多来自大型网络公司的董事和首席执行官):
- “HTML5 是什么？”
- “HTML5 多少钱？”
- “Flash 可以在我的 iPad 上运行吗？”
- “可以帮我安装 HTML5 吗？”
- "客户端需要这是在 HTML5 . "—我:“广告里的功能都不要求是 HTML5。”—客户端:“它只需要是 HTML5。”—我:“哦，好吧，现在有道理了。”
- 还有我一直最喜欢的“我看不到我的 HTML5 广告了！”—我:“你用的什么浏览器？”—客户端:“Internet Explorer 8。”—我:“谢谢。”
虽然其中一些很滑稽，但正如你所见，我们仍处于这项技术的初级阶段，尤其是在数字广告业务中。这提供了巨大的机会，但是作为一个行业，我们仍然需要学习、构建、采用和修正 HTML5，更重要的是，在使用新的开放网络标准购买、销售、开发和测量广告的方式上。
注意你可以在
bit.ly/Nuc1tv和rww.to/SOxQr3找到几篇关于这个话题的非常好的文章。
HTML5 平台
HTML5 平台越来越丰富，比人们每天习惯互动的传统 Web 多了很多。随着最新的操作系统和设备不再使用插件模式，越来越多的浏览器厂商和平台开发者开始完全依赖开放网络来增强他们的应用和广告体验。这方面的两个例子是微软的新平台 Windows 8 和微软的新平板电脑 Surface。Windows 8 操作系统中的新用户界面提供了 HTML、CSS 和 JavaScript 前端，这意味着其广告模式也是如此。像 Windows 8 这样的平台将成为常态，因为越来越多的人明白 HTML5 有无限的可能性(一旦采用)。这甚至可以用在网络编辑工具上，因为它们现在已经内置在浏览器中了。换句话说，你不需要在你的电脑上安装一个特殊的应用来编写和设计网页。以 Adobe 项目括号为例(github.com/adobe/brackets)。这展示了一个很棒的网页编辑工具，它就内置在你的浏览器中。
注意Windows 8 中支持插件；但是，它们需要特殊权限才能运行。更多信息请访问
msdn . Microsoft . com/en-us/library/ie/hh 968248(v = vs . 85)。aspx 。
像 Windows 8 这样的平台类似于应用内移动应用的环境，你可以从网上商店或店面获得应用，并通过下载的应用内的浏览器实例或网络视图查看广告。也就是说，可以有把握地认为，这些广告模式将需要依靠网络标准来在这些环境中创造互动和新兴的体验。
说到手机应用，有些甚至是基于 HTML5 构建的，使用 PhoneGap(phonegap.com)这样的框架来编译成本地代码，以便应用商店接受。这再次证明了 HTML5 的真正力量(以及灵活性),因为它可以在几乎任何数字环境中使用。
出版商甚至正在利用新的开放标准，为他们的网页设计提供渐进的增强方法，利用 HTML5 的能力为浏览器支持他们的用户提供更丰富的体验，并保持对传统浏览器的基本支持。事实上，我确信在未来的一年里，你会看到许多出版商对网页内容和广告都采用 HTML5 解决方案。这一章主要关注 HTML5 的新实现，以及你将很快看到浏览器和广告向何处发展。
把这当成 HTML5 驱动的数字广告新前沿，你就是先锋！
连接的电视
首先连接起来的是，或者说智能，电视；在过去的一年里，他们在舞台上表现得非常出色。这些是连接到互联网的电视机，可以支持应用和网络浏览器。最近，如果你在市场上购买一台新电视，你会发现你的选择很可能会有某种形式的有线或无线网络接入，并且你可以期待看到更多的电视使用这种方法。由于谷歌和苹果等供应商非常期待进入这一领域，打破传统的电视观看模式，三星、LG 和索尼等更传统的制造商已经开始在他们的电视机中实现浏览器和他们自己的应用，但最有趣的是，这些屏幕上的浏览器在 HTML5 测试中得分相当高(html5test.com)。事实上，只要看一看图 13-1 就知道了，它展示了在我写这篇文章的时候一些顶级的 HTML5 电视浏览器。
图 13-1。展示支持 HTML5 特性的电视浏览器(来源:【html5test.com/results/tel…??
回顾图 13-1 后，你可以看到这些电视在 HTML5 合规性方面获得了很高的分数。这个市场也有很多初露头角的竞争，对大众来说，这是一个真正未开发的、相当新的市场。这让人想起了手机的早期，我相信我们甚至还没有开始对未来几年的电视机有所期待，这包括网络广告是如何建立、购买、销售和部署到这个屏幕上以及传统的广告方法。联网电视最终将成为消费者的常态，随着大约 38%的用户已经在使用这种电视(channel . com/article/482912-TV _ Sets _ Are _ Connected _ To _ Internet _ In _ 38 _ Of _ homes . PHP)，内容提供商开始以高价向营销人员出售广告库存只是时间问题。真正有趣的是，这些平台大多一开始就考虑了 web 标准和 HTML5！事实上，三星的智能电视应用在很大程度上是 HTML5 和 CSS 驱动的，平台无关的网络应用可以通过各种 API 获得特定设备的访问权限(five minutes . eu/a-birds-eye-view-on-Samsung-smart-TV-apps-development)。对于开发者来说，这是一个令人兴奋的消息，因为它提供了另一个将他们的内容呈现在用户面前的机会，Opera 和 Google 等公司正在关注并提供工具，让你为这一即将到来的转变做好准备。看看 Opera 的电视模拟器(opera.com/business/tv/emulator)，它可以帮助你开发 CE-HTML 和 HTML5 的大屏幕内容，以及谷歌的电视设计指南(developers.google.com/tv/web/docs/design_for_tv)。
注意你可以在
w3.org/2011/07/w3c-webtv-nem.pdf找到更多关于电视采用 HTML5 的信息。
机顶盒
那些不能自己上网的“非智能”电视怎么办？问得好。那些用户不会被落下——相信我，那些眼睛对广告商和内容所有者来说太有价值了！
除了购买支持 HTML5 浏览器的电视机，消费者还期待许多机顶盒(STB)，如罗技的谷歌电视 Revue，以补充他们现有的电视体验。这些形式的电视/网络功能在业内被称为 over-the-top (OTT)，许多硬件制造商通过联网的机顶盒提供电视体验，用户可以安装各种应用来个性化观看体验。在撰写本文时，一些更受欢迎的设备是苹果电视(【apple.com/appletv】??)… YouTube、网飞、Hulu 和 Vimeo 还有 Roku(roku.com)，它提供类似的体验，但内容更加丰富。甚至还有 Boxee ( boxee.tv )和 Slingbox(slingbox.com)提供类似的体验，它们都有自己的合同，通过与 MLB.com、HBO、亚马逊、网飞和 WSJ Live 等内容提供商的合作，为用户提供特色内容。
关于这些机顶盒真正有趣的是，它们中的大多数都允许传统的流媒体视频广告服务，正如你在第七章中了解到的那样，使用 VAST。这意味着您可以通过 IAB 的标准视频传输规范向这些设备提供动态和可寻址的广告内容。同样有趣的是，如果 STB 允许浏览器，那么您没有理由不能使用和利用 web 标准，在 HTML5 视频环境中使用基于 JavaScript 的 VPAID API 来创建更具吸引力或互动性的体验。
注意你可以在
iab.net/vpaid找到更多关于 JavaScript VPAID API 的信息。
电缆平台
有线电视是电视体验的另一个主要部分，这是它变得真正有趣和有点棘手的地方。长期以来，有线电视一直是其内容的保护者，强迫用户购买一系列频道，而用户可能不一定会观看所有频道。这种模式已经运行了多年，有线电视公司通过单一的分发模式“管理”每个人的内容已经非常舒服了。然而，时代在快速变化，用户正在转向其他平台和屏幕来获取他们的内容，并在他们想要的时候获得它，而不是以线性广播模式进行操作。随着有线电视受到这种变化的干扰，大公司正在努力维护其内容的专有权，同时也试图接受即将到来的网络现实及其对传统商业模式的影响。
我认为在未来，用户将能够通过有线电视提供商创建他们自己的频道包，并且只为他们观看的内容付费。如果观众想要一个频道，他们通过广告模式付费或免费获得。这种方法类似于你在应用商店里找到的免费的广告驱动的应用。想想看——目前你正在向大型有线电视公司支付高额费用来观看大量内容，其中大部分内容你永远也不会看，而且你正在接受广告宣传！我预测这种情况将在未来几年最终改变，尤其是当内容被推送到用户所有不同的屏幕上时。
对我和我所在的地方来说，我使用威瑞森的有线电视和互联网服务，即使我是付费用户，威瑞森仍然需要我的许可才能向我出售定向广告。参见图 13-2 ，这是我在注册服务后不久收到的一封来自威瑞森的电子邮件。
图 13-2。一封威瑞森的电子邮件，请求允许投放有针对性的第三方广告
正如你所看到的，这封来自威瑞森的人们的礼貌的电子邮件强调他们正在分享我的信息以提供相关的在线广告，但是如果你从本书的开始回忆起，威瑞森实际上是为了高价向广告商出售这些信息，以换取他们网络上有针对性的广告活动。虽然我认为这种模式需要改变(特别是因为像我这样的客户向有线电视公司支付了一大笔钱)，但这两种模式在市场上都有空间。有线电视应该向用户出售优质的直播内容，比如体育赛事和奥运会，但也应该有免费的广告支持模式。最终，用户应该能够按需控制他们的内容，同时为他们实际消费的内容付费。我预测网络将对这一变化产生巨大影响。
综上所述，有线电视正迅速走向一个基于浏览器的世界。让我们面对现实吧，它是当今家庭中最普遍的平台，美国舞台上的大牌公司如 Comcast/Xfinity 正在利用这一点推出一个名为 X1(xfinity.comcast.net/x1)的平台。X1 是一个革命性的新平台，用于控制通过网络连接的有线机顶盒。它具有各种应用，包括搜索、DVR、点播电影、体育、天气和社交，包括通过手机或平板设备的无线控制器。由于计划与微软的 Skype(【bit.ly/OPxPNf】??)等… 可能是利用 WebRTC 等 web 技术和其他 HTML5 APIs 开发统一的跨屏幕体验，同时保护用户隐私的理想候选人；这将提供前所未有的互动和锁定用户的能力。
如果您是 Skype 用户，请务必查看您的偏好——Skype 也是关于广告的。请记住，如果你免费使用服务，你可能会看到有针对性的第三方广告，如图 13-3 所示。
图 13-3。 Skype 提供第三方广告的默认设置
因此，有了这些关于康卡斯特和 Skype 的信息，你可以看到广告商们可以更多地了解你，从而更有效地开展广告活动。同样令人兴奋的是，像谷歌这样的大型网络公司正在进入有线电视和互联网供应商市场。谷歌开始在密苏里州的堪萨斯城推出一项巨大的计划，提供千兆位速度的互联网接入和带有电缆包的光纤网络接入。如果谷歌能够在全国范围内提供这种服务，它就处于提供跨渠道的凝聚力体验的有利位置——我们将在未来几个月和几年内看到这一点。对于谷歌用户来说，这可能意味着通过你的单一 Google+或 Gmail 登录的跨屏幕体验，并且由于谷歌严重依赖广告(记住，这是一项免费服务)，如果这项服务成为现实，预计会看到许多营销人员和广告商利用谷歌。
虽然所有这些都发生在美国，但它并不是唯一一个将有线电视和互联网整合为一个超级平台的地区。事实上，混合广播宽带电视(HbbTVhttp://hbbtv.org 是一项巨大的欧洲计划，以一种标准化的方式将电视、视频点播、互动广告、游戏和社交元素(以及其他元素)结合在一起。HbbTV 利用开放网络标准和传统广播技术，作为无法扩展的专有技术的替代方案。使用 HbbTV 的服务可以通过不同的广播技术运行，如卫星、电缆或地面网络。
目前，你很可能有一个有线电视订阅，一个像 Apple TV 或 Roku 这样的 OTT 机顶盒，甚至可能有谷歌电视以及连接到网飞或 Hulu 的蓝光播放器。如果有一台设备可以完成所有工作，包括播放用户生成的内容，那不是很好吗？嗯，这就是 HbbTV 的目标！我个人很喜欢！我相信这是这个行业的发展方向，更重要的是，这是它的发展方向。借助 HTML5、WebRTC 等 web 技术和 MPEG-DASH 等视频交付规范，您一定会看到这一领域的革命性改进。
注关于这个话题的精彩文章，请访问
bit.ly/PEZfZ6。
进入互联网时代的广播媒体引发了许多问题。例如，这些平台将如何追踪用户？隐私会和网上一样吗？还是因为这种体验更加个人化和“在客厅里”，它会变得更加严格？如果它变得更严格(我相信它会)，它将需要一个全面的机构转变，传统的创意和媒体机构需要采用通常的数字“要求”，并消除曾经存在的障碍。这些“要求”可以是数字广播在传统广播上提供的任何形式的测量，如印象、互动时间和活动。这也回避了一个更大的问题，即媒体将如何在新的市场上买卖。CPM 模型可能适用于某些人，但不一定适用于所有人；尤其是当一个活动将跨越交互式和线性广播频道时。有一件事是肯定的:用户体验将在整体上胜出，可以跨屏幕测量的广告服务器将胜出。
随着所有这些令人惊叹的技术进入有线平台，增强型电视二进制交换格式(EBIF) ，一种通过广播部署互动体验的模型，不应被忽视。利用 EBIF，有线电视行业的未来会有一些令人惊奇的事情。EBIF 由有线电视实验室(cablelabs.com)开发和维护，目前由康卡斯特/Xfinity 和时代华纳等公司部署在 4000 多万美国家庭中。EBIF 实现了从网络接口到电话服务(如来电显示)甚至家庭报警系统的所有功能。这个家现在高度联网了！令人惊讶的是，我们生活在这样一个世界里，当有人在你家门口时，你的电视可以通知你，你可以换频道来看谁在前门。利用 EBIF 从第二个屏幕控制有线电视机顶盒，并且再也不必与电视指南交互，这为用户、开发者和营销人员提供了真正有趣的跨屏幕机会。使用你的平板电脑或手机来搜索和提示你最喜欢的节目。制作自己的视频播放列表以备不时之需，甚至在电视上观看电影时在第二块屏幕上查找更多信息。
注意 Cable Labs 是有线电视行业的一个开放联盟，就像 W3C 是网络的联盟一样。
游戏机
了解了 OTT 设备和机顶盒后，您可能会对连接到电视机的其他设备感到好奇。像微软的 Xbox、索尼的 PlayStation 或任天堂的 Wii 这样的游戏主机对这个不断增长的市场也并不陌生；这些游戏机不再仅仅是“游戏玩家”的了。随着越来越多的游戏机将娱乐作为一个整体，它们提供的不仅仅是游戏体验，因为您可以像使用其他 OTT 机顶盒一样安装应用，观看电影，上网冲浪，并与您的社区进行社交。随着 IE 10 在 Xbox 上的预期发布，以及 Xbox 利用 Kinect 的新广告计划 NUads(bit.ly/PtZUJu)的推出，你应该会在这些新平台的广告中看到令人惊叹的体验。微软在使用 Xbox 和 Kinect 等设备硬件的同时，通过 WebRTC 等网络标准提供令人惊叹的客厅娱乐体验方面处于非常有利的地位。我们离通过肢体动作、手势和语音命令与基于网络的内容进行互动已经不远了。
对于游戏玩家和喜欢娱乐的人来说，Xbox、PlayStation 和 Wii 游戏机都是非常复杂的硬件和设备。索尼的 PlayStation 3 固件更新为 4.10，为该设备提供了“某种”兼容 HTML5 的浏览器。我之所以说“有点”，是因为根据 ACID3 测试(acid3.acidtests.org)，它在 HTML5 浏览器的总体方案中得分很低(80)，acid 3 测试是一种测试浏览器是否符合网络标准的测量工具。然而，在游戏主机市场上，80 分仍然是一个非常好的成绩，在撰写本文时，它是 HTML5test.com 游戏类别中符合 HTML5 标准最高的浏览器之一，如图图 13-4 所示。
图 13-4。 HTML5test.com 游戏主机浏览器排名
正如你所看到的，任天堂设备在这一类别中处于领先地位，仅次于 Xbox，总体得分约为 100 分。当你展望即将发布的新游戏机时，你会看到 HTML5 的巨大进步，任天堂的 WiiU(nintendo.com/wiiu)和索尼的 PlayStation Vita(【playstation.com/psvita】??)[…](playstation.com/psvita)[`xb…](xbox.com/smartglass)…
数字标牌和广告牌
所以，我已经说了很多关于室内客厅的体验，但我们不要忘记室外。每天我们都看到屏幕在争夺我们的注意力，无论是在路上开车，在出租车后座，还是在纽约时代广场漫步。广告牌和户外显示器对数字景观来说已经不再陌生，在一个由广告推动的行业中，越来越多的显示器由数字屏幕驱动。随着越来越多的显示器随着网络接入变得数字化，在这些媒体素材上开展活动变得越来越便宜和有效。
想想看，您不再需要有人在广告牌的位置安装任何东西，这样可以降低运营成本，而且因为屏幕是连接的，您可以全天运行多个广告活动，甚至显示相关信息，如最近的彩票号码、离出口坡道最近的商店，甚至是该地区的头号通缉犯。使用这些来自 Clear Channel(【http://clearchanneloutdoor.com】)、Adams(【adamsoutdoor.com】[)、CBS(](adamsoutdoor.com)[【http://cbsoutdoor…](cbsoutdoor.com))、Lamar([【http://lamar.com】](lamar.com))、Captivate([【http://captivate.…](captivate.com))和 RGB(【http://rgbnetworks.com】)等公司的媒体属性，您可以为这些大屏幕定制基于位置的及时广告。再加上用户可以通过智能手机与显示屏互动的想法，你就有了以前无法实现的创意选项。想象一下，你开车在路上行驶，注意到广告牌正在检测你通过路上植入的信标移动的速度。从那里，户外显示屏可以显示信息，以减缓，以确保安全，或警察的方式！同样，这些只是想法，但我们离成为现实并有能力从广告部门内部利用这种数据已经不远了。事实上，一些新兴公司正在采用网络方式为他们的户外显示器供电。iadea(iadea.com)使用 SVG、SMIL 和 HTML5 为运行在网络标准上的数字显示器开发硬件。有了这家公司和市场上的其他公司，你很快就会在时代广场和其他地方看到真正吸引人的创意。
注关于户外广告和网络标准主题的有趣文章，请访问
bit.ly/Qc13WR。
车辆
所以，你现在知道户外屏幕正通过数字技术和网络变得更加强大。如果我告诉你，你的汽车或卡车最终会有一个浏览器，你会说什么？你知道，就在你的导航系统那里。事实上，一些车辆已经配备了 Pandora 网络电台和谷歌地图等应用，它们已经可以在你开车时打电话、阅读短信和更新你的脸书状态。很快，你将看到带有浏览器的车辆，请放心，浏览器将具有某种形式的 HTML5 兼容性。对于一个广告模型来说，当一个人在开车时，在屏幕上播放华丽的广告可能不是最有意义的，但通过使用技术和各种设备 API，你将能够检测到用户何时闲置，或许有能力做广告。一家名为 Webinos 的公司和 W3C 已经开始了它的文档化(bit.ly/Pu4DLn)和标准化进程。欲了解更多信息，请访问 bit.ly/O5zVNw.
跨屏倡议
正如您在前面章节中所了解到的，广告商和媒体机构希望用指标来衡量一项活动的表现。虽然出版商和广告商通过广告时间安排及时地在各种渠道发起跨屏幕活动，但在互联屏幕不断增长的情况下，将所有这些分析汇总成一个统一的活动分析供策略师和制作人消化越来越具有挑战性。像 Zeebox(zeebox.com)这样的公司提供真正交互式的第二屏幕体验，随着越来越多的人在各种设备上操纵他们的数字生活，对跨平台测量工具的需求是绝对必要的。无论是通过共享网络使用还是通过合并登录屏幕使用，跨屏幕和设备进行测量的需求是真实的，解决方案正在出现。在接下来的几节中，我将回顾推动这一转变的一些技术。
美国风湿病学学会
一项有效的跨屏技术是自动内容识别(ACR) 。ACR 从一个源读取音频信息，并在接收端显示相关信息。像 Shazam(【shazam.com】)和 sound hound(【soundhound.com】)这样的公司在移动市场上就是这样做的，用户可以听一首歌，然后判断出正在播放的是什么歌。该技术从音频源采样，并可以通过其元数据检测出是什么文件，是音乐曲目、电视节目还是广告。这项技术可以与第二个屏幕配对，向用户显示相关的消息，用户可以在他们的平板设备上被动地观看电视，同时浏览网页。ACR 是一项技术，目前正被应用到机顶盒和手机的原始设备制造商(OEM)中，这样用户就不需要第三方安装了——如果这种情况发生，肯定会扰乱上述公司的商业模式。当用户需要在参与之前安装一个应用来读取二维码时，他们面临着类似的障碍。这些与 ACR 合作的公司包括 audible magic(audiblemagic.com)、grace note(gracenote.com)、TV plus(tvplus.com)和 ensequence(ensequence.com)。
设备指纹识别
另一个允许广告商跨设备跟踪用户的跨屏幕举措是设备指纹识别 的概念。设备指纹是一种检测用户设备或机器信息的技术，这些信息可以保存下来供以后分析。考虑一下在线跟踪——如果你在 iPad 上观看广告，设备标识符可以被保存，下次你观看另一个广告时，广告服务器会根据你以前看过的广告知道你是谁。从这些信息中，可以收集到更多关于你的位置、行为和兴趣的数据，为营销人员提供一个非常好的目标受众群。
在移动开发的早期，应用和广告创意可以通过 SDK 访问所谓的唯一设备标识符 (UDID) ，这是一个特定于设备的字符串，用于标识世界上的特定设备。这就像一个设备的社会安全号码。了解这一点很重要，因为有了这种智能，web 内容可以将这些信息与数据库中存储的数据配对，以明确匹配用户并提供更有针对性的消息。这是跨屏幕和设备跟踪用户的一个巨大优势，但苹果等一些移动设备制造商停止了这样做，因为他们不想侵犯用户的隐私。虽然通过 HTML5 的技术是使用本地存储或其他一些客户端存储技术以及远程数据库，但有一个称为 OpenUDID(github.com/ylechelle/OpenUDID)的倡议，它允许通过开放的设备标识符来跟踪用户，这种标识符与用户的个人信息无关。OpenUDID 目前得到了 17 家以上移动广告公司的支持，如 Appsfire 和 grey stripe(github.com/ylechelle/OpenUDID)。
注从 iOS 6 开始，苹果推出了“广告客户 ID”，旨在取代 UDID 的方式。你可以在
business insider . com/everything-we-know-about-IFA-and-tracking-in-apple-IOs-6-2012-10找到更多信息。
现在，像 ad truth(adtruth.com)这样的许多其他公司使用一种技术，根据用户的在线行为和可用设备信息以及其他值来生成唯一的哈希，使用复杂的统计分析来锁定目标受众，误差很小。随着像这样的公司和像苹果这样的公司(苹果是领先的设备制造商和移动广告网络 iAds 的运营商)的出现，一个许多人都希望利用的市场正在出现。不过，我们会看到它是否仍被封闭在苹果的围墙花园里。。。我猜会的。
近场通信
近场通信(NFC) 是一种通过手机等硬件来检测接近度和特定传感器的技术。使用 NFC，人们可以在两部手机、一部手机和一台电视、甚至一台平板电脑和一辆汽车等设备之间共享信息，这可以为用户与屏幕和显示器交互打开一个全新的世界。浏览器环境中由 HTML5 支持的屏幕可以检测和接收关于用户通过配备的电话或设备的信息。这种转移可以给广告带来一个全新的互动世界。
这方面的主要商业模式是通过金融垂直市场；例如，谷歌将其用于钱包，万事达卡将其用于 Paypass，该设备可以刷过“标签”进行安全的无线数据传输。但是对于广告，标签可以保存与屏幕上的广告相关的特定信息，或者基于上下文或位置数据显示给用户。
所以，有了这些信息，你可能想知道这与 HTML5 或 HTML 有什么关系。事实是，这一切都是相关的，因为随着越来越多的设备采用 NFC，网络上有许多 API(将来会有更多)可以利用这些信息。此外，随着支持邻近事件的新移动设备的发布，您应该很快就会看到有趣的用途。Mozilla 的 Doug Turner 也说过，他想给移动 Firefox 带来设备邻近支持。要提前了解 DOM 中的邻近处理，请访问dvcs . w3 . org/Hg/DAP/raw-file/tip/sensor-API/overview . html。
面部识别软件
面部识别 是一项姗姗来迟的技术。这是一种允许摄像机和网络摄像头以及软件和硬件检测用户面部结构、距离、性别甚至注意力时间的技术。像数字标牌领域的沉浸式实验室和最近被脸书收购的 Face.com 这样的公司已经在使用这项技术，随着越来越多的计算机和设备配备摄像头，你应该会看到未来几年市场的巨大增长。
所以还是那句话，这和 HTML5 有什么关系？
好吧，如果你还记得第七章第七章第一章和第十二章第三章，HTML5 有了一个新的视频标签，和 WebRTC 规范一起，使用面部识别可以为创造性的用户交互开辟一个惊人的新世界。结合你刚刚从微软等设备制造商那里了解到的关于 Kinect 的信息，我想你明白我的意思了。事实上，一些真正聪明的开发人员已经开始在 HTML5 和 WebRTC 中使用面部检测。看看尼夫在 github.com/neave/face-…](github.com/neave/face-…)
另一个有趣的功能是与使用脸书、Twitter、LinkedIn 等社交数据配对。使用这些社交 API 和面部识别技术，你可以通过用户在网上发布的信息非常准确地了解用户的全部信息。一个有趣的产品是 Facedeals，当人们走进一家在入口处安装了 Facedeals 摄像头的商店时，它会通过他们的脸书账户向他们推送优惠。要了解更多信息，请访问 bit.ly/RSUhKb。
不跟踪 (DNT)
在我谈论所有这些令人惊叹的技术时，我想通过讨论用户隐私和安全以及行业范围内的新兴主题“请勿跟踪” (DNT) 来带回家。简而言之，DNT 是附加在所有 HTTP 请求头上的一点信息，不用深入了解 HTTP 头的细节，只要知道每次你访问 Google、Amazon、脸书等等，你的浏览器都会提供一个 HTTP 请求来检索位于这些域的服务器上的信息。附加到浏览器请求的新的 DNT 信息当前具有三个值:1 表示“不允许网站跟踪我”，0 表示“允许网站跟踪我”，并且 Null 是默认设置，如果用户不采取任何动作来将他们的浏览器偏好设置为 1 或 0。现在，因为这些信息被附加到来自用户浏览器的每一个请求上，所以接收端的服务器必须相应地处理这些信息，这就是它变得更加有趣的地方。目前，该行业正试图在新的浏览器版本中采用 DNT，同时也试图弄清楚接收服务器应该如何处理 DNT 的数据(【read.bi/TXBz4N】)。
在撰写本文时，Windows 8 操作系统上的 Internet Explorer 10 默认将 DNT 设置为 1，这意味着在用户不采取任何行动的情况下，所有网站、广告和数据提供商都会看到“不要跟踪我”的请求标头你可能已经猜到，这是广告行业的一个巨大担忧，因为 IE 10 将在未来几个月和几年占据浏览器市场的很大一块。为了从广告的角度更清楚地说明这一点，IAB 的首席执行官 Randall Rothenberg 在这一信息公布后向 IAB 的所有同事发表了一份声明 。
“亲爱的 IAB 同事，今天，微软宣布，与 Windows 8 发布预览版打包在一起的最新版本的 Internet Explorer 将有一个默认设置为“开”的所谓“请勿跟踪”标志。这代表着消费者选择的倒退，我们担心这将损害许多企业，特别是出版商，他们为互联网上如此丰富的内容提供了燃料。”
—兰德尔·罗森伯格，内务部
在那段简短的引用中，你可以看到这一点被非常认真地对待，因为许多广告网络、出版商和数据提供商担心他们将无法在默认情况下从 IE 10 浏览器上的用户那里获取指标。
但是，请记住，这还不是一个标准。W3C 目前正致力于此，并且迄今为止大多数主流浏览器都包含某种 DNT 开关，因此每个请求都包含一个 DNT 值。一些主流浏览器的 DNT 设置在苹果的 Safari 中展示在图 13-5 中。
图 13-5。苹果 Safari 浏览器中的 DNT 设置
图 13-6 显示了 Firefox 中的设置。
图 13-6。Mozilla 的火狐浏览器中的 DNT 设置使用火狐插件 HTTP LiveHeaders 将 DNT 设置为 1
我相信 DNT 价值观并不是非黑即白的。当用户第一次打开浏览器时，应该向他们提出一些问题，询问他们希望广告、网站和网络如何跟踪他们。在这个初始屏幕上，他们需要设置选项，然后才能继续使用浏览器并获得完整体验。不要对你使用的每个浏览器都这样做，应该有一个集中的位置来访问和更新数据，这样所有的浏览器和设备都知道它。
截至 2012 年 9 月，Apache 开发者 Roy Fielding 发布了一个补丁，该补丁将绕过即将发布的 Internet Explorer 10 中的请勿跟踪设置，该设置默认设置为 1。这样做的基础是，Fielding 认为它违背了开放标准所代表的一切，而开放标准是 Apache 的基础，Apache 是服务器端架构和 Web 的巨大提供商和贡献者。欲了解更多关于这一重要行业话题的信息，请随时访问 donottrack.us 和【ftc.gov/opa/2012/05…
注意你可以在
bit.ly/QBcwng找到更多关于阿帕奇服务器补丁的信息。
摘要
显然，这一章的目的是让你提出问题，思考什么是可能的，而不是专注于当前空间的限制。随着互联网广告收入在 2012 年创下单季度 84 亿美元的记录(bit.ly/NupSQs)，这个行业将不会缺少竞争。这意味着，不管你喜不喜欢，广告会一直存在！
在我结束这本书的时候，我想让你知道，外面有一个世界在急切地等待着有品位的在线广告，而且是一个甚至还没有被想象出来的世界。虽然我知道大多数人不喜欢广告，认为它是一种邪恶，但请记住，它为内容提供商提供了一个很好的收入模式，为各种各样的受众提供优质免费内容，因此我们正处于一个非常好的过渡点，以使数字广告业再次有效，并重新定义过去让我们和我们的用户失望的许多事情。因此，请接受这种变化，并提供指导，说明你希望看到这个行业在未来几年如何形成，因为它正在转向使用 web 标准。
最后，要知道网络正变得越来越开放，在网络开发、网络应用和数字广告方面，我们都处在许多伟大事物的尖端。现在，网络出现在手机、台式机、笔记本电脑、平板电脑和电视上，市场比以往任何时候都有更多的增长和机会。今天它出现在你的电视上，但明天它将出现在广告牌、汽车、电梯、电器以及更多我们还没有想到的地方，这将意味着更多的竞争和更多来自广告商的需求来衡量他们营销目标的有效性。我们从 HTML4 和 Flash 的数字过去中学到了很多，但有一点是肯定的:web 标准不会消失，因此学习 HTML、CSS 和 JavaScript 的新功能是你为自己和职业生涯所能做的最好的事情之一。
我个人要感谢大家阅读 HTML5 广告。这是一个相当新的话题，这本书试图为整个行业的转型设定一个战略和发展的基线。随着我们不断向前推进，信息无疑需要进行调整，但我希望您发现这是一篇内容丰富、有趣的文章。当您开始下一次数字活动时，如果有任何问题或意见，请随时联系我。随着我们继续缩小完整的 HTML5 规范和完整的浏览器支持的范围，您将处于一个正面应对整个行业的绝佳位置。接下来的几年将会是激动人心的，我真的希望你们和我一样期待着事态的发展。
继续实验！
