HTML5-广告教程-全-
HTML5 广告教程(全)
零、简介
为什么要写一本以 HTML5 为重点的面向广告的书?在 2011 年的大部分时间里,我的工作是在新兴的浏览器市场上创建、调试 HTML、CSS 和 JavaScript,并做出明智的决策,天哪,这真令人沮丧!在那一年的 12 月,我有一些属于自己的空闲时间,并花时间根据我全年面临的所有麻烦为我想读的一本书起草了一个大纲。不用说,我有很多话要说,所以大纲增长到 20 多页,涵盖了数字世界中广告的所有主题,更重要的是它如何被 HTML5 彻底改变。
在 2012 年初,我最终向几个人推销了这个大纲,试图衡量业内其他人的兴趣,从我很快发现的情况来看,我不是唯一一个考虑这个东西的人!在 2012 年的 Q1,我自信我已经在内容上形成了一个足够强大的大纲,我真的很兴奋能写这个东西!因此,在与 Apress 的好心人签约后,我在 2012 年的大部分时间里开始写作、开发和测试。我想你可以说我已经听够了诸如“Flash 会在平板电脑上实现吗?”或者“为什么我的广告需要有五个版本?”注意:如果这些问题对你来说似乎是新的,不要惊慌;我将在整本书中涵盖所有这些主题。不用说,这个行业的需求是强烈的!
说了这么多,让我第一个欢迎你来到疯狂的数字广告世界(如果这对你来说是新的)。这个行业是快节奏的、前沿的,并且在不断发展。如果有一件事与它一致,那就是它变化很快。我已经在这个行业工作了近十年,可以证明这需要精力充沛、反应迅速的人,通常还需要能够应对压力环境的人。如果你想通过阅读这本书来改变你的职业,我觉得你应该先了解一些重要的东西。说完这些,让我们看看下一个逻辑问题:
HTML5 是什么?
W3C 声明如下:
HTML5 是作为万维网的核心标记语言 HTML(超文本标记语言)的下一个主要修订版而开发的。HTML5 是为 HTML 4.01、XHTML 1.0 和 DOM Level 2 HTML 提出的下一个标准。它旨在减少对基于插件的富互联网应用(RIA)技术的需求,如 Adobe Flash 和 Microsoft Silverlight。
这是一个伟大的通用大纲,但我想为你详细阐述它,因为它与这本书的背景有关。
HTML5 是新兴开放网络的规范。这通常是一个广泛使用的术语,用来笼统地描述针对不接受闪存的平台的能力。然而现实中 HTML5 远不止这些(http://platform.html5.org
)。这是一个不断发展的标准,建立在我们已经习惯于丰富平台的许多 web 功能之上,如 Adobe 的 Flash 环境。由于 HTML5 依赖于浏览器的原生质量和 API,它为 web 和广告开发提供了更快、更高性能的方法,因为它提供了我们已经习惯于使用 Flash 等插件看到的相同的健壮体验。相反,由于 HTML5 是一个不断发展的规范,由两个联盟(W3C 和 WHATWG)管理,有两个不同的规范议程,这意味着它是一个移动的部署目标,因为在市场上有足够的空间来划分和解释哪些浏览器和设备可以利用新规范的哪些功能集,更重要的是,何时利用。
HTML5 是网络的未来,但更重要的是网络广告的现在,特别是如果你想在不断增长的移动和平板电脑领域瞄准用户,这正成为一个频繁的请求,因为越来越多的客户从 Flash 等专有平台转移到开放的网络标准,以获得更多的覆盖面和渗透率。广告领域完全采用 HTML5 作为其交付和呈现广告的主要平台还需要很多年,但这本书旨在调查当前的形势,做出一些有根据的假设,并在转变发生时添加一些开发人员帮助。
在我们深入研究之前,我将回顾一下这本书是什么,不是什么,以便相应地设定期望。首先,您必须理解 HTML5 规范在未来几年内不会完成和定型。除此之外,浏览器制造商还必须发布最终的更新和漏洞修复程序,才能在市场上得到全面采用,并在各种浏览器之间安全地使用新功能。
第二,这本书假设你有一些 Web 和开发的基础知识,这意味着你理解 HTML、CSS、JavaScript Flash 和 API 的使用,因为通篇都有代码示例。
接下来,你不应该使用过时的浏览器,也不应该试图使用 HTML5 和章节中的代码示例。IE6,我在看你!如果这对你来说很奇怪,相信我,当你读这本书的时候,你会理解得更多。因此,在继续之前,请务必下载以下浏览器之一:
- 铬∶
http://google.com/chrome
- Mozilla:
http://mozilla.org/en-US/firefox
- 戏曲:
http://opera.com
- 游猎:
http://apple.com/safari
- 网络浏览器:
http://ie.microsoft.com
接下来,这本书不是一个编码或广告开发的初学者指南,而是一个帮助 web 开发人员理解代码实践以及它如何与 Web 上的广告相关的指南,同时还提供了关于为什么某些事情会发生在复杂的广告世界中的洞察力。
最后,通过这本书,你将了解 HTML5 及其对网络广告的影响,但最终,我希望你能理解如何在支持它的浏览器中利用这一很酷的技术。此外,我很乐意在本书中包括与 HTML5 相关的广告技术的每个方面,但事实是,有太多的东西正在发展和变化,这是一件好事!这个行业发展如此之快,以至于任何试图记录一些特征的努力都会对你和我造成伤害,因为这是浪费精力。在我们开始之前,如果您对 HTML5 规范的发展有兴趣,请访问以下网站,因为那里的信息总是在变化:
http://whatwg.org
http://w3c.org
有了这些基础知识,让我们继续第一章,开始了解数字广告的未来。
一、活动过程
欢迎来到 HTML5 广告。这第一章的目标是在我们深入研究大问题之前,获得整个活动流程的完整、端到端的视图。了解营销活动流程将有助于深入了解每个人是如何齐心协力按时开展营销活动的。此外,这本书还旨在阐明创意和发展在该计划中的位置。在将流程分解成重要的部分并逐一解构之后,我们将把所有的东西重新组合在一起,呈现给你一个大画面。
本章各节将概述许多事情,从典型的媒体购买和创意开发到发起活动和报告活动表现。技术、术语、流程和通用行业缩略语(可能会使新读者和用户感到困惑)——所有这些都将被回顾。还将回顾开展活动的不同方式——通过讨论品牌时间与直接回应创意,明确行动号召的重要性,以及时刻牢记用户体验。我们将讨论品牌故事的基本原理,以及广告商如何利用它来吸引潜在客户。我们还将提供对创意规格和限制的理解,因为它们与出版商有关,并在启动数字广告活动时指明下一步的方向。最后,我们将快速总结一下我们所讲述的内容,并让您熟悉这些术语。准备好开始了吗?那我们开始吧。。。
数字化战略
既然你正在读这本书,你可能想知道,“我在网上看到的那些广告是怎么做的?”或者“到底是谁想出来的?”在在线广告中,数字战略关注的是为品牌或广告商开发符合其目标、愿景和业务目标的创意营销信息的方法。这个策略可以采取你熟悉的信息的形式;类似于“返校特卖”或“阵亡将士纪念日特卖”数字战略通常是这一过程的第一步,它允许创意机构创建模型和设计,并向客户(广告商)推销新想法。根据广告公司的规模和结构,这一过程通常会涉及一名创意或艺术总监以及一名或多名文案、项目经理和技术专家,他们都致力于有效地推销创意,以使广告商接受营销信息。虽然图 1-1 应该能让你更好地了解这是如何运作的,但请记住每个机构的运作方式都是不同的。所以这只是一个例子。
图 1-1。典型的创意公司如何与广告商互动
这项工作可能需要数周(如果不是数月)的开发和规划,以确保向客户正确传达推介内容。在某些情况下,一家代理公司可能会投入这么多时间,结果却因为以下几个原因而被客户否决:因为它们与客户的目标不一致,因为执行成本太高,或者更糟糕的是,因为代理公司团队之间的微小差异毁了整个项目。最后一种情况是最不幸的,因为当这种情况发生时,伟大的想法可能会过早地进入坟墓。最终,这个过程的存在是为了发展广告活动,也就是说,广告商想要传达给观众和潜在客户的整体营销信息。该活动可能只存在于网上,也可能扩展到其他分销渠道,包括广播电视、印刷品和广告牌。
数字战略过程的另一个重要部分包括以前的战役情报。假设你是一个广告商,叫做乔氏五金,位于美国东北部。7 月份,你有一个销售雪铲的在线广告活动。在分析这场运动的表现时,你很可能意识到铲子卖得不是很好。一旦你意识到在 7 月中旬出售雪铲可能是一个错误,你所学到的东西可以用来将你的下一个活动变成一个更好的活动。(显然这个例子过于简单了,但是它的经验可以应用到更复杂的活动中。)
注意由于动态活动允许实时分析信息,因此可以在活动进行的同时调整创意信息。没有必要等到活动结束后才利用学到的知识来做出改变。在第十一章会有更多关于这个的内容。
数字战略旨在识别营销人员面临的挑战,制定统一的解决方案,并有效地向目标受众传递信息。抓住这些要点并正确执行,将为成功的在线广告活动奠定基础。
媒体购买
既然你已经了解了成功营销活动的要素,并对相关各方有所了解,那么让我们看看下一步通常是什么:为特定的营销活动购买媒体。
注意媒体购买可以发生在广告活动的任何阶段,但就本章的目的而言,我们假设购买发生在策略制定之后。
首先,让我们定义一下与数字广告业相关的媒体的含义。简而言之,该术语指的是通过各种出版商或网络等对广告目录的规划、实现和购买。为数字活动购买媒体的地方包括但不限于
- 出版商网站:今日美国、ESPN、英国广播公司、英国卫报等。
- 门户网站:雅虎、MSN、AOL 等。
- 广告网络:The Deck,Google AdSense,Chitika 等。
- 视频播放器:YouTube、Vevo、震颤视频等。
Publisher 网站
出版商网站是最传统的在线媒体购买方式;页面顶部的排行榜广告和网站左侧或右侧的方形广告就是典型的例子。这些是传统的,因为它们存在的时间最长。任何拥有热门博客或网站的人都可以出售这种形式的广告库存。事实上,和类似的网站帮助内容制作者和广告商这样做。任何人谁是获得一个网页的一群独特的访客,并希望一种形式的被动收入应该考虑包括广告。《纽约邮报》网站(www.nypost.com/)是出版商网站上广告体验的典型例子。
网络门户
就广告库存而言,门户网站实际上类似于出版商网站。它们的不同之处在于它们是通向其他站点或站点信息子部分的网关。门户网站包括美国在线旅游、雅虎音乐和许多其他网站。AOL 的子部分包括 AOL 新闻、AOL 音乐、AOL 旅游和 AOL 货币。针对特定用户兴趣定制的每个子部分可以包括特定部分的广告目录。
盟营销
一个广告网络,是一个发布者网站的集合,可以在一个团体的基础上购买和出售广告,可以是大的或小的。它的主要功能是从出版商的贡献列表中积累广告清单,并将其与广告商的要求相匹配。通过广告网络,广告客户可以接触到比一次只通过一个发行商网站所能接触到的更多的网络素材。一个非常好的成功广告网络的例子是 Deck ( http://decknetwork.net/
)。
视频播放器
视频播放器媒体购买是相当新的场景。如果你在 YouTube 或另一个向观众展示广告以向他们提供免费内容的内容提供商上观看一个受欢迎的视频,你就会看到它们。这将是在内容之前播放的典型的 15 或 30 秒的流内视频点。通常,视频自动播放;它禁止用户在广告播放之前跳到该内容。视频播放器广告也可以是下三分之一类型的广告单元,传统上称为“后置广告”,出现在播放器内容上
媒体购买者
保护任何或所有上述出口是它自己的工作。这就是媒体购买者介入的地方。媒体购买者在整个活动过程中起着至关重要的作用:媒体购买者通常是媒体代理的一部分,专门负责获得合适的媒体渠道。媒体采购员的工作之一是确保库存采购符合广告商的整体愿景。例如,如果我是广告客户 Titleist Golf Balls,我会希望我的媒体购买者将我的品牌放在所有的高尔夫网站和相关网络上。在狗展上展示高尔夫广告没有多大意义。
出版商库存
正如你可能猜到的,上述采购网点 都是基于可用的出版商库存。这可能会严重限制媒体购买者,并受到许多变量的影响,包括但不限于
- 星期几或一天中的时间
- 内容的流行度
- 所需视图的百分比
让我们快速看一下这种情况,因为它与广播电视的传统媒体购买形式有关。可以合理地假设,你会为超级碗第二节的 30 秒广告支付比深夜电视随机频道的相同广告多得多的费用。换句话说,随着网站内容越来越受欢迎,越来越多的广告商会想在上面投放广告。所以继续在你的博客上发布好的内容吧!
你能明白为什么媒体购买者很难在热门网站上获得库存吗?由于媒体购买者的工作是在计划的分配预算范围内搜寻和收集所有适合于传播广告客户信息的媒体,这实际上只不过是以新面貌出现的老式供求关系。
CPM 和路障
你现在可能想知道,如果媒体是基于受欢迎程度来销售的,那么这与实际的美元有什么关系呢?在数字广告行业,这个数额是由一个广告的浏览量来评估的。一个视图叫做一个印象。媒体购买者在查看媒体页时,将统计广告活动将在所有不同的地方进行,以产生估计的印象量。基于每 1000 次展示的成本可能从几分之一美分(对于不太受欢迎的内容)到几美元或更多,这取决于已经提到的许多变量。
由于每印象成本(也称为每千分之一成本(来自拉丁语“mille”,意思是“一千”))在流量大的网站上更高,因此很难在 CNN、纽约时报、BBC 和类似网站上获得主要库存。如果你想成为那天唯一的广告客户,那就特别困难。例如,像苹果这样的广告商通常会在开展活动的日子里购买所谓的“路障”或“接管”。不会出现与品牌信息相冲突的广告信息。
路障确实是最划算的买卖,而且通常代价很高也就不足为奇了。这个 buy 的特别之处在于,它通常允许你对出版商的页面内容做任何你想做的事情。这可能包括全屏视频、操作与广告单元交互的页面元素,有时甚至是更长的广告动画时间。一个路障,当做得很有品味时,可以提供一个独一无二的品牌体验。
实时竞价
在这一部分的开始,我提到了媒体购买通常是在广告活动的数字战略制定和广告商的信息最终确定之后进行的。虽然这在大多数情况下是正确的,但另一种形式的媒体购买在广告商中越来越受欢迎。这种新的媒体购买技术,即实时竞价,是通过需求方平台(DSP)完成的。DSP 也被称为媒体购买的交易平台。这意味着,当一个广告创意已经开发出来,并急切地等待一个地方运行,媒体可以通过这个交易台进行买卖,这样它就可以确保网站上的广告库存,并在购买的确切时间运行广告。显然,只有当广告商是最高出价者时,这才是正确的。rocket fuel(rocketfuel.com
)和类似公司受雇于媒体机构和广告商,实时管理出版商网站上的媒体库存购买,以消除浪费的广告支出。我喜欢把它看作是广告购买的易贝,只是它发生得更快,而且对广告商来说往往更具成本效益。
发行商规格
根据购买的媒体,广告需要开发不同的尺寸,以满足出版商可用库存中的所有位置。这就是为什么在进行任何开发之前,了解广告将在哪里投放是非常重要的。如果广告具有特定的功能和丰富的特性,如扩大房地产或强制视频播放,就更重要了。由于某些网站不允许这些功能,广告商最好事先了解这些要求。误解出版商的要求可能会导致广告体验降低或广告活动推迟。
我知道你在说什么。“我为什么要降低我的创造力?我想尽我所能制造最大的轰动,让我的目标观众惊叹不已!”好吧,如果你可以的话,那当然很好,但是最终,如果出版商因为某个特定的功能集而不刊登你的广告,你就不会引起任何轰动。出版商是一个很难改变的群体;毕竟,这是他们的内容和用户群。你会邀请某人到你的客厅,让他自由地重新布置房间,添加东西,甚至移走它们吗?可能不会——除非你得到了某种回报。我喜欢这句话,“不管你有多喜欢披萨,你永远不会把你房子的钥匙给送货员”。所以为了你自己,请仔细检查你的媒体计划;在任何开发开始之前,注意什么是可以接受的,什么是不可以接受的,以及在哪里可以接受。你可以考虑与你的出版商进行一对一的通话,在活动开始前解决所有未解决的细节问题。
广告尺寸
正如刚才提到的,不同的出版商需要不同大小的广告单元来满足他们的库存。桌面显示的典型广告尺寸是 160 像素宽,600 像素高;这就是所谓的 160 × 600 ad 单元或摩天大楼。其他典型尺寸为 300 × 250 和 728 × 90。对于移动设备,300 × 50 和 320 × 50 是非常标准的。但是注意每个发行商的要求不一样;它们可以从一个站点到下一个站点有很大的不同。与媒体计划相关的规格表应提供创意开发的技术细节。在建立创意之前,一定要向出版商和广告网络索取这张表;从长远来看,这样做会节省你的时间。我见过比你想象的更多的情况,一个创意被制作出来,试图把它放到酒吧的网站上,却发现他们不接受它的尺寸和功能。
响应性设计
理解媒体计划非常重要,但理解为什么出版商不能或不愿意在一个广告单元中采用某些格式或功能也很重要。他们的原因可能与他们站点架构中的技术限制有关;例如,它可能不接受特定的 HTML 元素、CSS 样式或 JavaScript 命令。当这种情况发生时,最好的办法是在开始之前与出版商召开动员会,解决所有的细节问题。
一种发展中的设计模式是响应式网页设计(RWD);它也被称为适应性网页设计。关于 RWD 要考虑的一件事是,广告布局可能需要迎合网站的布局。因此,可能需要为 300 × 250 尺寸和 160 × 600 尺寸开发 728 × 90 的广告单元,并且所有这些都在同一个广告标签内。出版商的要求在这里是至高无上的;它们应该在开发和设计开始之前进行讨论。由于如此多的手机、平板电脑和电视能够访问网站,RWD 正在成为网络世界中一个令人感兴趣的巨大领域。出版商不希望增加他们的运营工作量,也不希望担心为每个可以访问网站的设备开发不同版本的网站。因此,他们严重依赖级联样式表(CSS) 和 JavaScript 来动态管理网站布局变化,而不管请求内容的屏幕。
使用 CSS 媒体查询(第三章中关于这个主题的更多内容),出版商可以定制内容,使其格式适合访问它的设备或屏幕。例如,如果我在我的 27 英寸苹果 iMac 台式电脑上全屏观看 www.bostonglobe.com,我的全屏宽度将是 2560 像素,而如果我在我的 iPad 上纵向观看 ??,屏幕宽度将是 768 像素。当使用这个值来检查 CSS 媒体查询的屏幕宽度时,允许发布者动态地调整其站点布局并重新对齐内容。它仍然是相同的站点和 URL,但是布局发生了变化,这可能会导致如图 1-2 所示的图像。
图 1-2。www.bostonglobe.com如何在苹果 iMac 上以 2560 像素显示,在苹果 iPad 上以 1024 像素横向显示
网站的动态适应对于任何出版商的网站开发者和设计者来说都是一股新鲜空气。然而,对于数字广告人来说,这有点像噩梦,因为在任何时候显示发生变化,无论我是在桌面上缩放窗口还是在平板电脑上切换横向和纵向方向,该特定页面上的广告库存都可能改变或请求另一个广告,如果该广告被请求不止一次,可能会产生重复的印象。这可能导致图 1-2【4 层楼高的潮汐】所示的 300 × 250 ad 的移除。这也引出了一个问题,即印象是否也需要适应新的布局,不是吗?如果《波士顿环球报》在我的媒体计划中,我如何能确定较小的展示将会到达我的目标受众?这是一个有趣的问题,这个行业正经历一段艰难的时间试图标准化,因为它影响了视觉广告布局和报道问题。
我的希望是,随着移动广告服务变得越来越受欢迎,并成为广告商媒体计划的主要焦点,广告服务公司和出版商将开发一种一致的方式,为多个屏幕和设备调整和定制他们的广告视图,而不管分销渠道如何。更有可能的是,这将需要一些时间来开发,甚至需要更多的时间来完全采用,但一个标准最终会诞生。幸运的是,数字广告有一个组织来帮助制定这些标准。
注关于这个话题的更多信息,请看www . ravel rumba . com/blog/Responsive-ads-real-world-ad-server-implementation/的“Responsive-ize it”一节。
IAB
在数字广告领域,有一个成熟的机构来帮助这个行业解决头痛的问题和碎片化相关的问题,无论是移动广告、显示广告,还是联网电视。互动广告局(IAB)提供广告尺寸、规格和度量标准的标准化,得到了许多出版商、广告服务器、创意机构和 IAB 工作组积极成员的认可。它通过平衡竞争环境,提供跨媒体购买和广告网络的规模。因为它设定了整个行业都知道的实践,所以采用更普遍。
IAB 规格和尺寸指南
IAB 致力于为所有分销渠道开发广告和广告形式创建一个全面的、不断发展的图表。表 1-1 提供了许多桌面广告的 IAB 规格和尺寸要求的示例。
表 1-1 。IAB 的一些桌面显示器尺寸指南
注有关 IAB 展示指南的最新信息,请访问www.iab.net/guidelines/508676/508767/displayguidelines
从表中可以看出,这些准则概述了广告的初始尺寸、广告动画的帧速率,甚至动画的持续时间。正如它所支持的行业一样,IAB 也在不断变化。它定期举行讨论和会议,以促进该行业的利益。
另一个评估你的广告是否符合 IAB 准则的有用工具是 Adobe 的广告认证。这个在线工具为您的广告创意提供了一套全面的分析工具,无论它是 Flash SWF 文件还是实际的广告标签。在整个过程中运行的广告将生成一份详细的报告,表明广告是否符合 IAB 规范。有关使用该工具的更多信息,请参见https://adthenticate.adobe.com
。该工具旨在消除创意开发和出版商规格之间的猜测,因此没有混淆,也不需要重复工作。
创意
好了,回到竞选过程。你已经看到广告商想把他们的媒体费用花在哪里;现在一个广告需要设计和开发。在这一点上,为了有效地开发广告并清楚地传达广告客户的信息,你应该清楚地了解所有出版商的要求和规格。
创意是在发布当天呈现在发布者页面上的实际元素。是 SWF 文件或 HTML 传达了广告客户的信息——更确切地说,是视觉传达广告客户信息的文件。广告商的主要关注点是什么?是提供一个直接的有创意的回应,还是仅仅为了让用户尽可能长时间地停留在广告体验中? 的目标是在一个创新的、可扩展的广告单元中创造广告主的愿景,这个单元将贯穿媒体计划中的每一个发布者网站。在行业术语中,这是创造性开发的 LCD(最小公分母)规范。按照这种规格开发和设计将允许最终的规模和更少的问题。
创意开发和设计
在这一阶段,广告商的创意机构将回到在数字战略部分提出的模型和设计。该机构将引进创意和技术团队成员(就是你!)为广告商设计和构建最终的广告体验。这包括利用技术和代码的设计技巧。设计师使用 Adobe Photoshop 和类似的工具,技术人员利用 JavaScript 等代码语言来完成执行。
因为广告体验各不相同,营销人员总是想要最新的东西,技术变化如此之快,有时很难跟上所有的变化。我通过阅读新技术和尝试不同的代码语言来保持领先。找到适合你的方法并坚持下去。根据广告的复杂程度和广告商的要求,设计和开发可能需要几周时间才能完成,因此这项活动可以与其他活动要求一起完成,如最终确定媒体购买。对一些人来说,创造性发展是竞选中最重要的过程;它传达了广告人的信息。也有人说是媒体在收买和优化目标受众。我自己觉得没有令人惊叹的创意信息,什么都做不了。有了引人注目的创意,你可以让人们想要他们以前不想要的东西。如果你能在大量受众中做到这一点,那么广告在哪里投放并不重要。但是请记住:你最后一次上网看广告是什么时候?无论如何,当一场运动既有效又及时时,它总是表现得很好。
品牌时间与直接回应
当谈到与观众沟通时,广告商有许多选择。它可以提供包括游戏或视频的广告体验,这通常会成为品牌时间的倡议。或者它可以允许观众或用户点击某些东西或填写表格并提交信息,希望获得潜在有用的个人信息(这种形式的广告称为直接响应)。某些选项在某些屏幕上和某些广告客户身上效果更好。来自广告服务公司 PointRoll 的统计数据显示,品牌时间在平板电脑和大屏幕上效果更好,而直接回应在手机上效果非常好。PointRoll 认为,大屏幕和平板电脑更像是一种靠后的广告方式,而手机则更像是一种基于实用的体验。当用户在移动时,它能迅速吸引他们的注意力。
广告人在创意开发中的另一个重点是有一个清晰的行动号召。如果你想让你的观众做些什么,告诉他们!如果你想让他们看视频或点击按钮,你可以通过指导观众来获得更高的回应率。除了保持 CTA(行动号召)清晰明了之外,某些出版商不会允许你开发不符合其试图传达的信息的创意。例如,假设我开发了一个广告,CTA 声明“点击此处获取免费优惠券!”然而,当观众点击时,会弹出一个没有优惠券链接的视频。出版商通常会保护自己的读者,不进行这样的误导性广告宣传。
因为这是创意的用户体验方面的所有部分,你会想尽你最大的努力来开发一个在视觉上和功能上都对你的观众有意义的广告活动。关键是记住用户;时刻记住他或她的全部经历。
讲故事
广告商的另一个主要关注点是通过一个或多个广告活动来讲述一个故事的能力。许多广告客户使用跨屏幕倡议来传达信息。这种跨媒体方式让广告商通过多个屏幕和设备向用户传递单一的内聚性信息。也许它是在指导用户访问一个广播点的网页以获取更多信息,或者它是从你的手机上传一张照片以便有机会在电视上看到你自己并赢得一个奖项。这种参与形式的可能性几乎是无限的,广告商的投资回报率(ROI)也是巨大的。有了他们通常得不到的用户群信息,他们可以更容易地锁定在特定时间、特定设备或屏幕上收听的个人。
创意液晶显示器
如前所述,这个开发过程的目标是创建一个 LCD 规范,这样广告就可以完美地在每一个出版商和广告网络上运行。这是一个创意机构需要做出许多艰难选择的地方。为了创造性地提高门槛,你可能需要忽略或打破一些出版商的规范,但为了在任何地方开展活动,你需要遵循最低的规范。这是一个艰难的决定,尤其是当你试图在这个领域创新的时候。
注意有创意的广告客户将与广告服务器合作,要求特殊的出版商津贴来运行他们的创意。
这需要在投放之前与发布者进行一次性对话,以解决他们对广告执行的任何担忧。许多不同的事情可以解决,例如广告可以有多大的文件大小(或 k-weight)以及出版商将允许什么功能。在大多数情况下,展示创意将有助于出版商签署或同意执行。最糟糕的事情是他们让你修改一些东西。
这种一次性的对话总是会发生,但空间中的成员对它们的感觉是不同的,这取决于他们站在围栏的哪一边。一方面,这种对话可以让广告商或创意机构变得极具创新性,打破曾经适用于所有人的规则。另一方面,他们为其他寻求做类似事情的广告商树立了一个糟糕的先例,因为这不是一个公共标准,其他机构将不得不申请同样的特别许可。
归根结底,这个过程是政治和金钱驱动的。“嘿,欢迎来到广告界!”如果你和出版商关系密切,或者在一项活动中投入大量资金,你很有可能会被允许做任何你想做的事情。作为一项独立的工作,这一过程通常涉及到让广告服务供应商,如 PointRoll(pointroll.com
)、Media Mind(【www.mediamind.com】??)或 Crisp Media(www.crispmedia.com)获得许可,并运行一个大型的创新数字广告活动。这些公司专注于发展强大的出版商关系,以便广告商和创意机构能够专注于创新和继续发明。
广告服务
一旦创意被设计、开发并被广告商认可,它通常会被传递给广告服务器 。广告服务器的工作就像它的名字所说的那样:为创意团队设计和开发的广告服务。一旦广告服务公司获得创意,它将经历一个素材接收过程,在该过程中,对创意素材进行分析和处理,以确保所有文件都存在并符合规范,并遵循遵循出版商指导原则的一般最佳实践。如果确定创意文件完全不符合规范,通常会将它们返回给开发它们的机构进行进一步优化。如果素材只需要最少的工作——调整尺寸或削减 k-weight——广告服务公司通常会为创意机构完成工作,无论是满足客户还是确保继续工作,或者基于其他收入来源浮动成本。
跟踪
一旦素材被签署,它们将被发送给广告开发人员和工程师,以安装用于报告目的的跟踪和指标。跟踪是将额外的代码实现到创意素材中,以便在每次观看时产生印象,点击按钮和交互信标来跟踪用户交互。对于广告服务器,跟踪通常通过 API(应用编程接口)来安装。API 有多种形式,但在这种情况下,它是广告创意和广告服务平台之间的通信层。
这里有一些广告服务器可能捕获的跟踪指标:
-
印象
-
点击
-
互动或活动
-
交互作用时间
-
视频指标
-
播放/暂停/停止/重启/重放
-
开始率和完成率
根据创意的需要,其他跟踪要求可能是数据收集,如电子邮件地址、姓名和电话号码。这个信息是一个用户控制的过程:观众需要在广告的表单域中输入信息。
第三方跟踪
数字广告中的另一个跟踪概念涉及第三方重定向和第三方跟踪验证。第三方跟踪的情况是,另一家分析公司为了验证指标,将跟踪像素与广告服务器一起放在创意中。第三方跟踪中使用的平台包括 Dart、Atlas 和 ComScore 1x1 等。通常情况下,DoubleClick 的 Dart、微软的 Atlas 和 ComScore 都提供对创意中像素的跟踪,但它们并没有托管和服务。1x1 是不可见的 gif(图像文件),当用户查看广告或进行某种类型的交互时会触发。这可以是一个或几个像素,取决于广告客户对活动的需求。
另一种形式的第三方跟踪使用重定向。当用户在广告单元内执行点进动作时,进行重定向,并且用户在到达最终目的地之前被引导通过重定向服务器位置。广告商可以在广告单元中包括他们希望的任意多的重定向来验证点击跟踪。
注意传统上,你添加到 URL 字符串的重定向越多,你可能会看到报告中的差异越多。此外,由于浏览器的限制,网址可能会被切断;用户最终会进入一个糟糕的登录页面。
图 1-3 和 1-4 显示了用户的一次点击操作是如何在显示登录页面之前 ping 几个不同的位置的。图 1-3 展示了什么叫做带内点击重定向。带内是 ping 服务器需要“菊花链”效应的两种方法中较老的一种。
图 1-3。带内点击重定向的工作原理
第二种方法,带外点击重定向,一次 pings 所有的服务器(见图 1-4 )。
图 1-4。带外点击跟踪的工作原理
注关于如何设置合适的点击跟踪的更多信息,请参见 IAB 的点击测量 PDF:
www . IAB . net/media/file/click-measurement-guidelines 2009 . PDF
。
最佳化
跟踪完成后,需要一个额外的创意优化级别 ,以确保所有创意符合 k-weight 规范,并且不会占用用户机器的 CPU 能力。优化检查确保广告可以在多台机器、平台、出版商和设备上完美运行。优化过程可以包括重写代码、压缩位图图像、将图像转换为矢量图形、简化矢量图形以及基于用户交互来错开加载顺序。这可能需要相当长的时间,取决于广告的数量以及目标设备和屏幕(最终由媒体计划决定)。这些测试通常非常严格,因为每个广告必须实时运行在多台计算机和操作系统上,并且依赖于广告动画或视频持续时间的长度。因此,优化步骤的数量会增长得非常快。
标签
在创意运行一轮全面的预发布质量保证检查之后,广告服务公司将从创意素材中创建广告标签,以确保创意在其新的广告服务环境中准确执行。广告标签的创建通常包括上传到广告服务公司运营的内容管理系统(CMS)。无论是静态图像、HTML 还是 Flash 文件,创意素材都会被编译并存储在系统中。根据出版商的规格,广告服务器将生成几种不同标签类型和格式中的任何一种,包括以下内容:
- iframe 标记
- JavaScript 标签
- Flash SWF 标签
- 图像和点击标签
注意iframe 用于将一个 HTML 文档嵌入到另一个文档中。
对于更丰富的执行,一些发布者可能需要一个驻留在他们服务器上的文件;它允许广告服务器与发布者站点所在的域进行通信。当需要“iframe 破坏”(一个行业术语)时,这是一个需求。Iframe 破坏允许广告标签在发布者期望的广告 iframe 之外呈现;这又允许广告服务器直接与发布者的内容交互。这种类型的执行应事先与发布者建立联系,以确保各方都在同一页面上,并且在投放广告时该文件已准备就绪。这种类型的执行权限通常只授予受信任的 ad 服务器,因为破坏 iframe 会造成破坏。图 1-5 显示了一个广告标签如何对待 iframe 的“终结”和“非终结”。
图 1-5。当发布者的托管文件就位时,广告标签可以脱离 iframe
质量保证
一旦广告服务器生成并分析了广告标签,就运行最后一轮跟踪质量保证(QA) 以确保所有的印象都被激发并且度量都被考虑在内。假设跟踪电话准备就绪,唯一的标签被发送给媒体计划中的每一个发布者。收到标签后,发布者将执行自己的 QA,以确保它们在真实环境中与其他网站内容一起顺利运行。出版商可能需要几天时间来完成这一过程,这取决于其广告运营的规模和要安排的标签数量。
在这个阶段,发布者通常会向广告服务器提供一个测试页面,以便在广告服务器端完成更多的 QA 工作。测试页面通常反映广告上线当天页面的外观和功能。所使用的页面通常是主页,带有通常的虚拟副本——“lorem ipsum”类型的内容——而不是实际的编辑内容。执行该测试只是因为在真实环境中可能会发生任何事情。你可以让其他广告竞争电脑处理能力,或者隐藏导航菜单,把你的广告降低 20 个像素。无论是什么情况,这个测试都是为了消除任何可能破坏活动启动的神秘因素。这可能会导致广告服务器、出版商和创意代理之间的许多来回,这取决于问题的领域。这种反复肯定会很费时间,但是在发布前解决活动中可能出现的问题是很重要的。你可以把它想象成在赛车上路前的试驾。
活动启动
当发行商和广告服务器对所提供的标签最终同意时,它们将由发行商安排一个特定的发布日期并开始活动。最后,广告服务器、出版商、创意代理,以及最重要的广告商,对标签进行最后一轮检查。所有的检查都已到位,以确保在 的整个发射过程中性能保持平稳。
分析和报告
在活动开始和结束时,广告商和媒体代理将要求广告服务器和任何第三方测量公司运行他们的分析报告。这在开始时完成,以确保所有分析都被成功跟踪,并在结束时汇总所有结果和指标。广告服务器的报告将记录到目前为止的总数;该统计包括但不限于印象、点击、活动、视频指标、点击率(CTR)、点击率、互动时间和转化率。这些结果将作为最终报告提供给所有请求方,从中他们可以清楚地了解运动的总体表现。
这份报告中的信息对广告商来说是无价的;它概述了活动的关键绩效指标(KPI),无论它们是否与推动品牌知名度或互动率有关。报告可以以 Microsoft Excel 文档、CSV、XML 或 JSON 文件的形式发布,甚至可以通过用户控制的分析仪表板集中放置在广告服务器的 CMS 应用上。
一旦该报告被发出并被所有各方审阅,广告服务器基于 CPM 模型,基于所提供的总印象和可能的开发中的劳动力,向出版商或媒体代理记账。在这个阶段,媒体和创意人员可以了解哪些对他们的广告客户有用,哪些没用,并将最近获得的知识应用到未来更好的广告活动中。这种数字处理和统计分析可以反馈给负责数字战略的人,更重要的是,反馈给广告商。
付款
基于由广告客户的总数字支出所决定的总体预算,媒体代理将有特定的金额用于确保适当的媒体库存。另一项预算分配给创造性和技术设计。媒体预算将用于支付出版商的广告清单费用,也可能用于支付广告服务器制作和提供广告标签的费用。对于创意和技术开发,这些付款被发送到创意机构,也可能是广告服务器,用于优化素材所需的任何任务。
注意根据活动的不同,可能需要某些一次性供应商——技术合作伙伴、支持者、数据提供商。他们的存在将导致额外的费用。
基于商定的 CPM,广告商、媒体代理或出版商将浮动成本。有时,广告服务器和媒体代理之间的交易是在满足一定数量的印象的基础上达成的。因为广告服务器也对 CPM 模型收费,如果给定数量的印象 x 得到保证,则广告服务器可以覆盖所有与生产相关的成本。如果你想增加你的整体销量,让客户尝试一个暂定的印象数——例如,每分钟 1 美元 10,000,000 或每分钟 0.5 美元 50,000,000——是一个很好的方法。如果没有满足约定的印象,媒体代理支付额外的费用来弥补没有计入广告服务器的费用。
有时候,事情并没有按计划进行,人们不得不承受由于技术或管理限制而错过印象的成本。这些不幸是以弥补为代价的。当广告服务公司做了一些阻碍标签按时发布给出版商的事情时,制成品通常是可支付的。如果出版商在计划最初要求的特定时间有两倍或三倍的图书广告库存,情况也是如此。这种弥补通常是通过免费广告服务或广告服务器覆盖的约定数量的额外印象来实现的。出版商的条款可能略有不同;它可能会提供另一天的广告清单或在其网站或网络内的另一部分以优惠价格甚至免费提供广告位,这取决于它与客户的关系。
正如你所看到的,很多人都把手伸向了广告商的支出领域。由于每一个活动都是不同的,取决于所需的工具和人员,因此在确定开展活动所需的条件时,必须了解预算限制。确保成功、减少制造品和安排准确的上市日期至关重要。
目标受众—更智能的未来
随着技术变得越来越复杂,媒体购买变得越来越智能,广告商能够非常容易地购买受众分群,并相应地锁定他们的受众。受众分群通常作为一组广义的个人进行销售,他们最有可能观看广告并对其品牌信息做出积极反应。公司使用许多不同的系统来获取用户的信息。这些信息包括但不限于
- 位置
- 在线行为和浏览历史
- 人口统计信息
- 发布者传递了数据
这些信息要么由广告服务器的广告标签直接提供,要么从浏览器 cookies 中获得,这些 cookie 曾经被用户访问过的网站丢弃。这样做的好处和好处是,观众可以根据自己的喜好定制个性化信息。广告商喜欢这种工具:他们获得了关于客户群、购买习惯和地点的重要信息。他们获得了影响观众的力量,尤其是当他们把脸书和推特这样的社交渠道结合在一起的时候。
有一句名言:“权力越大,责任越大。”在网络广告中,这当然是事实。由于在处理此类数据时用户隐私是一个大问题,接下来的部分将展示信息是如何被访问、收集、分发和使用的。
隐私
在线隐私目前是一个巨大的话题,不仅是在行业中,甚至在美国和欧洲的政府层面。不管你喜不喜欢,谷歌、雅虎、MSN、微软和许多其他公司都有你的信息。信不信由你,或多或少是你自己交给他们的。一个小问题:你有 Gmail、Yahoo 或 MSN 邮件账户吗?你使用社交网络吗——脸书、Google+等等?我想至少其中一个问题的答案是响亮的,是的。事实是,当你注册并向这些社交网络和出版商提供信息时,你实际上是在用这些信息来换取他们的工具和服务。你有效地让自己成为广告商眼中的谷歌和脸书的产品。这些服务向广告商出售受众信息,因为他们知道你的喜恶,你的年龄,甚至你住在哪里。这可能有点可怕,甚至有点老大哥的味道,但真的,你永远不会免费得到任何东西。所以在你交出你的信息之前明智地选择。
更多关于美国政府如何帮助网络用户了解他们的权利的信息,请访问onguardonline.gov
。
饼干
所以你可能会问自己,如果我不注册这些服务,他们怎么能得到我的信息?你不需要交出你所有的信息来被在线追踪。就其本身而言,在线行为对广告商来说是一个非常有价值的指标。你是否曾经在亚马逊或其他购物网站上购物,然后浏览了几个网页,发现你最初在亚马逊上看到的产品现在正在你上网的任何地方向你做广告?如果你有,你并不孤单。发生这种情况是因为您在浏览器存储中丢弃了一个 cookie。
每个浏览器都有一些内存专门用于在本地缓存中存储文件。它们可以被存储以优化您经常访问的网站的浏览。根据 cookie 来自哪个域(在这个例子中是 Amazon ),不同种类的信息位被存储在你作为观众的信息中。在亚马逊的例子中,这些信息可能是你看到了什么产品,它是什么颜色,你在一天中的什么时间查看它,或者其他大量的信息。
一旦 cookie 信息进入你的缓存,你就可以带着它去网上的任何地方。有点像数字购物护照!这些信息可以与数据提供商(Blue Kai 和类似的公司)共享,当您浏览时,这些数据提供商使用这些信息来查找您的更多信息。你浏览得越多,关于你和你的浏览行为的信息就积累得越多:你潜在的喜欢和不喜欢什么,你通常什么时候搜索网页——这样的例子不胜枚举。这些信息甚至可以与唯一的 ID 号配对,并加载到数据库中进行查找和重新定位。AdTruth ( http://adtruth.com
)和像它这样的公司值得一查。严格地说,这些信息不是个人的;它只是关于你和你的在线行为的信息。但是,数据提供商可以将这些信息出售给广告商,帮助他们按群体或细分市场锁定受众,甚至可能锁定个人。
如果你是火狐浏览器用户,有一个真的很不错的浏览器插件,叫共谋 。当你浏览互联网时,它有助于可视化正在发生的事情(见图 1-6 )。
图 1-6。火狐浏览器插件勾结是什么样子
正如你所看到的,共谋显示了当你浏览网页时,哪些网站共享了你的信息,更重要的是,它们如何访问彼此的信息。图中的图像是通过访问五个不同的网址拍摄的。值得注意的是,除了输入 URL 之外,用户不用做太多事情就可以收集到多少信息。一个广告客户可以看到一些出版商在用户身上设置 cookies 来跟踪某些信息。然后,可以出售这些信息,以进行更好的媒体购买和/或定制广告本身的创意信息。
注在其网站上了解更多关于共谋的信息:
www.mozilla.org/en-US/collusion/
。
发布者传递的数据
如你所知,当你使用 Gmail 或 Yahoo Mail 或类似的东西时,你实际上是允许将你的信息用于广告目的。发布者传递的数据允许发布者将加密的信息串放入广告服务器的广告标签中,并允许广告服务器确定它拥有什么样的观众,并制作适当的广告消息。这些信息可能包括年龄、地理区域、邮政编码、性别,甚至还有其他输入的兴趣。
这么说吧,从我的电子邮件和浏览记录来看,雅虎知道我 18 岁,对电子产品感兴趣。如果广告商向我推销新产品,雅虎可以向广告服务器传递信息,说明我对电子产品感兴趣,并且我已经 18 岁了。广告服务器有输入来确定准确的输出信息,也许是视频游戏系统和 iPod——谁知道呢?你现在已经明白了,可能会问自己,“等等,广告商有我的所有信息吗?”答案各不相同,但至少他们没有任何个人身份信息(PII)。
血浆无机碘
个人身份信息(PII) 是关于用户或用户活动的情报,会泄露他或她的确切身份。这包括但不限于姓名、地址、信用卡号和社会保险号。媒体机构和出版商希望获得尽可能多的关于受众的信息,以便做出更明智的商业决策,并通过锁定愿意倾听的人群,让广告商的资金更加有效。在处理观众的个人信息时,他们必须遵守关于在线隐私的联邦法律,不得恶意使用这些详细信息。这种类型的信息可以通过广告单元传递的唯一方式是通过使用选择加入过程。它可以是在广告中提交表单或注册免费服务之前的复选框选择。
对观众和用户来说幸运的是,法律还要求一个选择退出的过程。从根本上说,选择退出程序是为了让用户在自愿或不自愿地注册免费服务后,不允许在谷歌和脸书等网站和网络上分享他们的信息。选择退出的过程很棘手,因为它回避了一个问题,即适用于一家出版商的东西是否也适用于下一家。此外,他们已经掌握的关于你的所有信息会怎么样?
隐私的下一步是什么?
我的直觉告诉我,互联网和在线广告隐私的新规则、政策和指导方针迟早会出现;可能很快。国会积极寻求所有领先的在线素材和广告渠道的代表,与他们讨论这个话题和相关问题,并最终试图确定公司是否可以自我监管,或者需要美国政府介入。另一个问题是,整个世界都是在线的,各国的隐私法并不统一。
任何对在线隐私有疑问的人应该联系广告服务器、IAB、IAB UK 或当地的政治代表。如何利用受众的信息来投放量身定制的相关广告,应该有明显的好处,如果你觉得自己的权利受到了威胁,你应该表达自己的担忧。随着广告和技术变得越来越智能,你也应该这么做。
术语评论
在本章中,你已经接触了大量的行业术语和行话。目的是,在你必须与团队成员或潜在客户沟通的情况下,不要混淆,而是进行教育。使用表 1-2 复习本章迄今为止涉及的关键词和首字母缩略词。
表 1-2 。活动流程术语审查
单词 | 定义或含义 |
---|---|
创意广告 | 一家创意公司开发了一条营销信息,并将其推销给客户,即广告商。 |
媒体购买 | 其中媒体代理在各种发布者站点和广告网络上保护广告库存以满足广告活动的发起。 |
印象 | 在整个广告活动中,广告在屏幕上出现的次数。 |
每千成本(cost per mille) | 每千分之一成本(千);指的是提供的展示的计算。 |
路障(或接管) | 通常情况下,当一个广告商购买了出版商页面上的独家广告位时,他是某一天唯一的广告商,并拥有完全的创意控制权。 |
死后无子女。 | 需求方平台(或交易台);它允许通过拍卖实时购买媒体。 |
安置 | 发布者页面或广告网络中特定部分的特定广告。 |
半铸钢ˌ钢性铸铁(Cast Semi-Steel) | 级联样式表;它们决定了页面或广告的外观和感觉。 |
Java Script 语言 | 处理页面或广告的功能和逻辑的工具。 |
互联网架构委员会(Internet Architectrue Board) | 互动广告局;一个致力于在线广告发展和标准制定的组织。 |
液晶显示 | 最低公分母;指的是在整个媒体购买中运作良好的广告的开发。 |
三醋酸纤维素 | 行动号召;在你的创意中有一个清晰的行动号召将确保你的用户知道如何互动。 |
k 重量 | 将在发布者页面上呈现的广告单元的二进制权重,例如 40 KB。 |
CPU 进程 | 当一个繁重的创意(通常涉及大量的图形、动画和代码)被渲染到页面上时,中央处理器通常会达到峰值。这些因素会降低用户机器的速度,并阻碍整体用户体验。 |
第三方的 | 1 对 1 跟踪来自第三方广告供应商的像素,以验证在线广告中的指标。 |
羧甲基淀粉钠 | 内容管理系统,通常由广告服务公司用来存放创意和创建广告标签。也用于库存和汇总分析。 |
iframe 破坏 | 当出版商允许广告创意在页面上指定的广告 iframe 之外工作时使用的术语。 |
点进率 | 点击率;它决定了特定广告活动的点击率除以提供的印象数。 |
交互作用时间 | 花费在广告体验中的互动时间。这可能是当用户扩展了广告素材、观看了视频或玩了游戏时。 |
转换策略 | 执行所需操作用户。例如,单击了解更多信息或单击某个按钮进入登录页面。 |
饼干 | 放在浏览器存储中的文件,其中包含有关用户在线行为的信息。其他供应商可以访问这些信息。 |
血浆无机碘 | 个人身份信息;指定查看广告或与广告交互的用户身份的任何信息。例如姓名、地址、SSID。 |
决定不参与 | 允许用户禁止与广告商共享信息的流程。 |
摘要
本章详尽地回顾了典型的广告活动流程。你已经看到了广告公司如何制定策略来实现广告商的目标、愿景和商业目的。还讨论了如何找到和购买媒体,是通过传统的购买方式,还是通过使用实时竞价方法的交易台。您还看到了创意设计和开发是如何进行的,以及数字故事是如何成为成功营销活动的关键因素。您了解了广告服务器如何接收素材并添加跟踪以利用关于观众的信息并定制消息。您看到了广告服务器的分析和报告如何等同于支付以及对未来活动的了解和洞察。引入了许多行业术语;会上讨论了关于该行业的许多关键点,包括隐私和出版商规范。对你来说,检查这个信息是非常重要的;本书的其余部分将触及这里概述的概念和术语。
现在是时候将您对活动流程的了解带入第二章,深入了解今天是什么让我们来到这里,并看看启动这一切的技术。这有点像历史课,但它为 HTML5 如何在 2012 年变得如此流行以及广告如何需要调整和效仿奠定了基础。
如果你准备好了,我们继续。。。
二、广告技术的演变
现在,您已经对营销活动流程有了深入的了解,是时候了解是哪些技术和业务推动我们走到今天这一步了。正如前一章所讨论的,这个行业一直在经历快速的变化,作为一名 HTML5 设计者和开发者,理解所有这些很重要。技术进步、流程改进和总体效率的提高呈现出可预测的规律性。随着新浏览器的开发、技术规范的编写和新插件的快速部署,需要考虑的重要方面从来都不会少。
首先,让我们讨论一下以前和现在网络的基础,内容是如何通过不同的技术呈现在屏幕上的,以及现在看到的在几年前是不可想象的改进。让我们看看从 HTML 到 Flash 平台的起源和过渡,以及 Web 上使用的技术背后的业务,并深入了解 HTML5 的新热点——并从广告客户的角度来看这一切。
本章将讨论 HTML5 是如何出现的,它的目标是什么,以及一个有影响力的先驱是如何将它推向主流市场的。在本章结束时,将有一个术语回顾,来回顾一些可能不熟悉的术语。最后,当我们深入到这本书的核心部分,学习更多关于如何用新兴的网络标准 : HTML、CSS 和 JavaScript 来开发和设计广告时,将会有一个到目前为止所学内容的总结。
早期的 Web 和 HTML
首先,尽管听起来很老套,但让我们沿着记忆的轨迹来一次旅行,讨论一下万维网的基础。那是 20 世纪 90 年代——珍珠酱、牛仔夹克,更重要的是早期网络的时代。这一切都始于一位名叫蒂姆·伯纳斯·李的麻省理工学院毕业生和计算机科学家,他创建了万维网规范,并提出超文本标记语言(HTML)作为所有浏览器最终都能理解并在屏幕上呈现元素的结构化语言。万维网联盟,或 W3C ,声明
HTML 是描述网页结构的语言。
除了 HTML 构建模块之外,还需要样式和功能。层叠样式表(CSS) 保持样式,JavaScript 是控制用户看到的网页内容的逻辑和功能(也称为页面内的“行为”)的语言。还有文档对象模型(DOM),它是一个对象层次结构,用于在浏览器堆栈中读取和编辑对象。对于那些认真研究 web 开发的人来说,DOM ,这个庞大的话题本身就非常值得理解。
事后看来,早期的网络是不完整的。浏览器在设计上是原始的,试图计算已安装用户群的市场份额是一个很大的挑战。这使得浏览器上的 web 开发变得一团糟;每个都有自己的局限性和代码库。把它放在电视机的环境中,把电视当成你的浏览器;根据电视机的制造商——索尼、LG、三星等等——正在观看的节目需要考虑所有不同的电视,并做出相应的调整。这现在听起来完全不现实,但这正是早期网络的样子。这就是 HTML 规范开始时非常简单的原因。它首先需要被采用;然后它可以迭代,变得更加进步。
用 HTML 做广告
每个人现在都认识到网页是用 HTML、CSS 和 JavaScript 开发和设计的。随着互联网变得越来越主流,广告商 进入市场只是时间问题。这让我想起了一个问题“哪里看不到广告?”答案是,“在你睡觉的时候。”从 20 世纪 90 年代到 21 世纪初,几乎每个人都有机会上网,广告商需要进入出版商的页面,这样偶然上网的人——一个巨大的潜在观众——就会看到他们的广告。
自然,在开始的时候,广告是非常基本的;起初只是静态图像 。想想 56k 拨号调制解调器上的早期 AOL 启动页面;你知道,就是那种你必须拔掉手机才能使用的(如果你精通技术,你会有一个电话线分离器)。取决于你认为多久以前,广告库存是稀缺的,如果存在的话。
注互联网时光倒流机 允许你在它的数据库中输入一个网址——例如【AOL.com】——然后查看网站历年来的旧版本。广告时段没有呈现,因为这些活动早就结束了,但你可以了解当时在哪里以及如何使用广告。请访问这里(注意,并非所有网站都支持):
archive.org/web/web.php
。
弹出广告及其后续发展
我们都知道弹出式广告信息有多让人讨厌,它们在早期给互联网带来了多大的困扰,所以我就不多说些讨厌的话了,而是给你上一堂教育课。简而言之,令人讨厌的弹出广告只是 JavaScript 代码执行的一个片段。在 JavaScript 中,以下代码打开一个新的浏览器窗口,并接受以下参数或自变量或 URL、名称、规格和替换。
window.open(URL,name,specs,replace);
使用前面的代码,当用户查看包含该代码的页面时,会生成一个新窗口。众所周知,当用户随意浏览网页时,打开许多新窗口是令人讨厌的,因此浏览器开发人员实现了所谓的弹出窗口拦截器来保持任何窗口打开。。。);用户不点击任何东西就可以执行代码。这是在线整体用户体验的一大进步;它迫使广告保持在特定的页面范围内。鉴于这种影响,就不同形式的在线广告而言,广告客户非常有限。他们知道,由于“新”屏幕的流行,他们想进入数字空间,但他们不太知道如何衡量他们的投资回报。通常,他们进行简单的广告活动;没什么特别的,因为创意的限制和他们永远无法衡量竞选表现的事实。对于媒体购买来说,这是一种非常不同的方式,也是一种新型的媒体库存,可以为广告商提供保障。在很长一段时间里,他们只需要担心电视作为他们的主屏幕,他们有尼尔森(nielsen.com)和其他公司来分析他们电视广告的成功。
该领域的先驱们将广告客户的沮丧视为一个巨大的机会,开始在他们相对简单的广告活动中添加指标和创造性的增强。一开始,广告和指标的创意是非常温顺和原始的,要么是静态的,要么只有轻微的移动,使用动画 gif,只根据印象和点击量来衡量。此外,由于用户对浏览器的采用是分散的,广告设计师不得不利用特定于浏览器的代码来维护广告在各种环境下的外观。这种额外的努力,只是为了让一个简单的运动出门,被证明是一个耗时的过程。
富媒体
随着广告客户越来越多地要求他们的在线广告活动具有更多的创意和衡量标准,一种新的在线广告形式应运而生——富媒体广告 。由于在线广告在早期的网络中几乎是静态的,交互性、翻转和扩展广告体验的出现在广告市场中受到了真正的欢迎和迅速的采用,这使他们看到了一个新的、急需的创意窗口和有效衡量在线成功的方法。
另一方面,媒体供应商认为这是广告制作、购买和销售方式的转变。正如您可能猜到的,早期的富媒体广告是使用传统的 HTML、CSS 和 JavaScript 技术开发的。图 2-1 展示了第一个富媒体广告——电影《永不妥协》(Erin Brockovich),由 PointRoll(pointroll.com)公司制作并提供服务。
图 2-1。第一个富媒体广告
当然,从那以后事情发生了一些变化,但是在当时的网络空间,这确实是开创性的。用户第一次可以滚动广告单元,并让它扩展到更强大的体验。传统的“点击此处”的行动呼吁(CTA)被修改为显示“鼠标点击此广告”,邀请用户通过简单地滚动广告单元来互动,以获得更多内容。值得注意的是,即使在演示环境中,也有处理浏览器差异和不一致的消息。在大多数情况下,如果你看不到丰富的广告体验,广告服务器公司会为你提供一个静态或默认的广告(见图 2-2 )。
图 2-2。第一个富媒体广告的备份静态或默认广告
广告服务平台将足够聪明,能够通过使用所谓的“用户拥有”规则来确定用户是否能够以丰富的形式呈现广告。这种技术分析用户的系统和浏览器,并检测用户的机器能够在什么级别上呈现该单元。这种动态调整在富媒体之前是闻所未闻的。此外,在用户看到静态广告而不是丰富广告的情况下,广告平台将不同地报告印象;在大多数情况下,静态印象将以降低的 CPM 提供给广告商。
跟踪和测量
在早期的富媒体广告中,追踪和测量很少,但足以有效地向营销人员讲述一个故事。然而,如果广告商打算在这个领域投入更多的媒体资金,他们希望更多地了解他们的客户。随着越来越多的资金最终流入该行业,富媒体成为在线广告的常用手段。
由于广告商现在能够衡量有多少人互动、扩展和关闭了一个广告,他们可以包括照片画廊、电子邮件表单和其他吸引受众的创意元素,同时报告一切并将其反馈给广告商,以获得有价值的品牌洞察力。随着时间的推移,这种广告方式变得足够稳固,足以维持广告商的兴趣,但 HTML、CSS 和 JavaScript 在创造力以及在原生浏览器环境中可以做什么方面存在局限性。
对广告商来说幸运的是,有一个漂亮的小浏览器插件正在市场上获得牵引力。由 Macromedia 创建的著名的“skip intro”插件允许开发人员轻松创建丰富的动画并添加视频和交互性。简单来说,这个插件一手改变了网络广告的面貌。
闪光
在整个 2000 年代,数字广告 被动画 gif、HTML、CSS 和 JavaScript 推向了最大限度。通常,一些简单的互动和动画 gif 将是一个活动的创意范围。营销人员和广告商创造性地推动了这个极限,但是浏览器的局限性太明显了。广告商不能直接在浏览器中做他们想做的事情。对此限制的回应是 Macromedia 的 Flash 播放器 。
Flash 允许通过使用安装的插件在浏览器中提供华丽的、高度互动的内容。Flash 播放器迅速移动到最前面;它的普及和无处不在使它成为推动在线广告发展的主要平台。它最终为开发人员和设计人员提供了一种跨浏览器的方式来轻松开发在线体验,并在任何地方进行一致的部署。在它出现之前,这样的事情真是闻所未闻。
由于其快速的开发环境,从商业角度来看,Flash 创造性地解决了许多问题。通过使用该插件,web 开发人员确信,无论浏览器制造商、操作系统或版本如何,都可以获得相同的体验。一个曾经由静态广告和基本 HTML 驱动的体验主导的市场迅速过渡到 Flash,这要归功于它的易用性和庞大的安装用户群。
在全球主要市场中,闪存的市场渗透率将增长到 90%以上。没有其他浏览器插件有如此大的影响力。除了增强图形和交互性之外,它最终将支持视频和音频内容的双向流,这是一个浏览器无法想象的事情(至少在当时是这样)。
虽然许多开发人员和设计人员喜欢 Flash 的易用性,但其他人不喜欢它更简单的编程语言,它允许不成熟的开发人员构建低效和设计糟糕的程序或体验。Flash 的类似 JavaScript 的语言 、ActionScript 允许代码在动画帧上执行,由于早期 Flash 用户使用的糟糕的编码技术,它降低了浏览器体验,甚至经常因占用计算机资源而导致浏览器崩溃。由于广告的开发方式可能会降低用户机器的速度并过度使用系统资源,Flash 通常会受到核心软件开发人员社区的指责。
砖坯黏土
随着 Macromedia 的 Flash 在 web 开发和在线广告领域的持续增长,Adobe 看到了 Flash 的巨大商机,最终在 2005 年 12 月 3 日以 34 亿美元的天价收购了 Macromedia 及其所有产品。随着 Adobe 对 Flash 的收购及其第一个公司版本 9 的发布,Flash 已经拥有了多年的开发兴趣、用户群和平台开发。因此,Adobe 继续大力投资 Flash,将其作为开发和部署丰富的互联网应用和网络广告的巅峰之作。
Flash 播放器无处不在
到了第 9 版,安装了 Flash 播放器的市场令人震惊。到 2008 年 6 月,98.4%的用户安装了 Flash Player 或更高版本。有了这些数字,广告商们就只能依靠 Flash 平台来实现他们丰富的网络体验。他们不仅在在线广告活动中利用了该平台,还意识到了该平台在创建品牌网站、登录页面和其他网络素材方面的力量。
该领域的其他插件——包括 Java 小程序和较新的 Unity player——从未见过如此高的渗透率,这就是为什么广告商目前不认为它们是影响深远的在线广告的理想平台。
注这里可以看到目前的 Flash Player 普及率:
www . adobe . com/products/Player _ census/Flash Player/PC . html
。
Flash Player 视频
从这一刻起,网络上发生了很多变化;由于 Flash 和更快的机器,广告、缩略图大小的视频 和视频播放器差异的时代已经成为过去。从 2002 年 3 月发布的 Flash Player 版本 6 开始,视频可以包含在编译的 Flash 文件(SWF)本身中;从版本 8 开始,它可以支持来自服务器的流媒体视频内容。在很高的层面上,这永远改变了营销人员和广告商开发在线广告的方式!娱乐广告商现在可以为网络制作电影预告片,甚至可以在广告单元内观看。
网络视频过去是,现在仍然是一个巨大的话题。随着越来越多的广告商和人们想要网络视频,随着技术最终加速发展,YouTube 和其他价值数十亿美元的企业应运而生。随着拨号上网成为遥远的记忆,越来越多的人成为宽带互联网的用户,下载速度达到每秒 10 到 30 兆字节,随着 10.2 版 Flash player 的增强,视频现在可以全屏高清并卸载到用户机器的 GPU,这使得播放更加流畅;同时,CPU 被释放出来做诸如资源分配和代码执行之类的事情。
从出版商的角度来看,由于视频是以流的形式进入广告单元的,因此创意广告的整体 k-weight 尺寸没有额外的成本。现在,广告商可以在广告中做更多的事情,而不用担心用户体验不佳,甚至违反规范。随着网络高清视频成为常态,Akamai 等公司创建了真正的流媒体高清网络和交付解决方案,用于交付和分析视频性能。
用 Flash 做广告
随着 Flash Player 在主要市场中接近 100%的台式机上使用,广告商看到了在单个统一平台上创建具有全动态图形和动态数据的引人注目的交互式富媒体的机会。营销人员完全被吸引住了;Flash 解决了 HTML 早期版本中存在的所有问题。随着创意的进化,追踪也跟着进化;越来越复杂,事实证明,对广告商 和媒体买家来说,这是一个更好的投资回报(ROI) 。
广告服务公司可以跟踪任何东西:浏览量、滚动量,甚至视频里程碑和完成率。基本上,如果你能想到,他们会跟踪它。随着富媒体利用 Flash Player,指标和创造力飙升到新的水平。Flash 允许使用 API 进行更深入的跟踪和分析集成。开发 Flash 的 ActionScript APIs 是为了提供与广告服务平台的通信,这允许跨活动进行更集成的跟踪。
正如上一章关于浏览器 cookies 所讨论的,Flash 也有自己的方式将数据存储在其内部缓存中。默认情况下,本地共享对象(称为 Flash cookies)允许开发人员存储高达 100 千字节的数据,以在 ads 中提供更丰富的体验。然而,围绕隐私的法律问题仍然出现在广告中,无论是基于浏览器还是基于 Flash 的 cookies。不过,有一点是肯定的:有了 Flash,富媒体广告真正诞生了;通过使用一个真正的无处不在的插件,丰富的动画、视频、动态数据等最终可以在浏览器中完成。
HTML5
因此,现在我们知道 Flash 已经对在线广告产生了最大的影响,我们离看到 HTML5 如何再次做到这一点已经不远了。当然,HTML 到目前为止已经经历了几个版本,甚至一些变化(XHTML),但是我们现在正在进行第五个版本。截至 2012 年,HTML5 草案还没有公开定稿,但广告商正在寻求利用 HTML5 的新功能来创建他们的下一个创新广告活动,采取 Flash 在插件中的做法,但全部在浏览器中进行。HTML5 规范从 Flash 中学到了很多东西,所以在全局中看到它的重要性是非常重要的。
HTML5 的特性包括画布元素、拖放和视频元素,这些都是从 Flash Player 和浏览器本身无法处理的东西中发展而来的。想想看:投币电话之前没有手机!你必须明白,Flash Player 做了浏览器在大约十年内做不到的事情,所以看到我们最终会回到 web 标准和 HTML5 是非常令人兴奋的,毕竟 Flash 已经用了这么长时间。
HTML5 看起来像是一个新手,但实际上 W3C 和工作组成员在 2008 年 1 月起草了第一个规范。从那以后,它经历了许多修订和公开的“最后呼吁”,W3C 内外的成员对当前规范的完整性进行了投票。
为什么是 HTML5?
有人可能会问,“是什么让 HTML5 这么快就出现了?”或者“为什么 Flash 在这么长时间内都很好,而突然之间,HTML5 成了每个在线用户的焦点?”有一个简单的答案。2007 年 6 月 29 日,苹果公司的史蒂夫·乔布斯通过发布 iPhone 改变了世界,其浏览器不支持 Flash 播放器。现在,我说改变世界有多种原因——首先,它将是第一款拥有玻璃触摸屏的完整网络浏览体验的智能手机。第二,它将永远改变网络,因为在它发布之前,几乎所有的网站都至少有一点 Flash 内容用于图形、视频或动态内容。最后,随着网络的发展,数字广告也将紧随其后,因为迄今为止几乎所有的数字广告都是用 Flash 制作的。
对于苹果决定不在 iOS 操作系统上支持 Flash,许多人有着复杂的感受。有人说这与商业有关;其他人更关注智能手机和平板电脑的整体性能和电池寿命。我自己并不太在意 Flash、HTML5 或者别的什么是新标准。几年前,当每个人都过渡到闪存时,情况也是如此。最终,从长远来看,使用 web 标准并从外部插件中移除任何依赖性将始终使您处于领先地位。就像那个时代所有受人尊敬的技术一样,它最终会走到尽头,减轻每个人的分裂。要深入了解史蒂夫·乔布斯对 Flash 平台的看法,请查看现在臭名昭著的帖子“关于 Flash 的想法”(apple.com/hotnews/thoughts-on-flash)。
HTML5 采用
现在你可能会说,“好吧,苹果通过移除 iPhone 上的 Flash Player 推动了 HTML5,但其他浏览器呢?”这是一个很好的问题,但却不容易回答。首先,如前一节所述,HTML5 处于工作规范状态,这意味着它还不完整。甚至在我写这篇文章的时候,它还在发展。因此,采用是分散的,支持往往是有限的,但不断增长。苹果首次发布的 iPhone 只实现了新网络标准的部分功能;事实上,直到今天,HTML5 的采用仍然非常分散。在桌面领域,浏览器都符合 HTML5 的不同级别,并且因为规范还没有最终确定,所以符合性总是在变化。你知道这会有多混乱吗?如果你访问beta.html5test.com,你将能够看到你的浏览器与当前的 HTML5 规范相比排名如何。很可能它在 HTML5 的整体范围内是不合格的,有些功能完全不受支持。你可能会问:“为什么还选择使用它?”嗯,没关系!事实上,在撰写本文时,只有最前沿的测试版浏览器,如 Chrome Canary、Firefox 和 Webkit Nightly builds,支持大多数最新和最棒的功能(但不是全部)。当前 HTML5 的采用是名义上的;你可以看到开发人员和设计人员在这个分散的领域创建统一的体验是多么令人头疼。这很容易让人想起早期的网络。尽管如此,如果我们希望在移动和平板设备上渗透,我们需要开始利用 HTML5 的功能。对于广告主来说,这是必须的!
HTML5 视频
HTML5 整体功能集的一个小功能——它在一些博客和新闻论坛中被称为“Flash 黑仔”——是 HTML5 视频(将在第七章中更详细地介绍)。我想花一分钟来澄清一下,就像许多受过教育的开发人员以前做过的那样。首先,因为 Flash 是一个平台,它需要一个插件在你的浏览器中播放视频。Flash 可以支持渐进下载的视频以及流媒体。它还可以支持各种协议的视频,并在播放过程中自适应地改变。其次,由于 HTML5 的视频元素是 HTML 标记中的一个标签,目前处理这个标签有局限性。例如,几乎每个浏览器都有自己的文件包装器和编解码器来正确地呈现视频。事实证明,这对于视频转码工作以及任何试图在创意中加入视频的人来说都是一项艰巨的任务。此外,由于没有通过 HTML5 流式传输视频的标准,该领域也需要更多的开发。
在线视频大师 Robert Reinhardt 撰写的一篇非常全面的文章概述了围绕 HTML5 的视频元素的碎片化,更不用说对 HTML5 的整体支持了(参见“HTML5 视频的痛苦世界”:transitioning . to/2012/01/The-World-of-Pain-That-html 5-Video/)。像流式传输和自适应比特率都是这篇文章中概述的内容。
HTML5 与 Flash 在移动设备上的对比
对于现代世界的广告客户来说,移动是一个重要的目标平台,了解不断发展的技术能在这里实现什么是很重要的。可以很有把握地说,手机在一开始确实很原始,当时仅有的智能手机是诺基亚、Palms 和黑莓,它们的网络浏览器也是如此。。。呃,找不到更好的词了,糟糕。大约在 2000 年代末,自苹果 iPhone 问世以来,手机已经成为一个巨大的市场。许多人预见到了这一点。由于 iPhone 的网络浏览器,它提供了一种功能齐全的实际网络体验,不像早期的设备那样提供网络,但视图不同。在 Flash 上投入了大量资金的 Web 开发人员和设计人员需要确保业务端的决策者明白,他们的在线计划需要支持 HTML5 在移动设备上不断增长的市场份额——哦,天哪,它还在增长!
行业内有很多困惑,因为它涉及到 HTML5/Flash 的争论。该领域的许多创业公司看到了这一点;他们进入这个市场,利用恐惧作为燃料,提供服务来缓解这种过渡,这反过来又使 HTML5 前进得更快。Adobe 和 Google 等公司开始制作工具,将 Flash 时间轴动画转换为 HTML、CSS3 和 JavaScript 动画,供新兴浏览器在不使用 Flash Player 插件的情况下呈现。
随着苹果的 iOS 占据了移动操作系统市场的巨大份额,谷歌的 Android 和黑莓的 Playbook 也推出了对 Flash 的支持。Adobe 的信条是,这些设备的用户将获得“完整的网络体验”,Flash Player 将在其产品路线图中得到支持并安装在移动设备上。事实上,Adobe 发布了这个统计数据,概述了 2015 年 Flash Player 在移动设备上的未来支持(见图 2-3 )。
图 2-3。展示了 Flash Player 在智能手机中的预计渗透率(鸣谢:Adobe)
Adobe 对在移动设备上支持 Flash 抱有很大的野心,认为有了 Android 和黑莓市场的巨大支持,苹果最终会让步在 iOS 上支持 Flash;有一段时间,这不是一件值得傻笑的事情。据说,苹果实际上给了 Adobe 一个机会来证明移动 Flash 播放器可以在他们的手机上运行,并且不会过度消耗用户设备的电池寿命,最终导致应用崩溃。我不知道这是否发生过,但 Adobe 在这件事上的态度大不相同。
这就是由来已久的 HTML5 与 Flash 业务背后的政治因素发挥作用的地方。希望有了目前概述的信息,您可以得出自己的结论。也就是说,2011 年底,Adobe 发布了一份公开声明,称他们公司将最终在移动设备上淘汰 Flash Player,并专注于利用 HTML5 的 web 标准。这引起了许多反响。首先,Adobe 忠实的开发者社区感到被背叛和被暗算;他们认为他们在手机上的未来被谋杀了。此外,许多业内人士认为这是 Adobe 向苹果投降的白旗。然而,如果你看看围绕它的商业决策,Adobe 为公司采取了一种完全不同的方法。Adobe 还表示,它将继续支持基于 Adobe 的集成运行时(AIR) 构建的原生移动应用。
注意在高层次上,Adobe AIR 本质上是一个框架,它利用了与 Flash Player 中使用的非常相似的代码库和结构。借助 AIR,开发人员可以使用与使用 Flash Player 构建富互联网应用相同的方法,在桌面和移动设备上构建本机应用。事实上,在撰写本文时,Adobe AIR 已经发布了 3.2 版本,并继续在许多发行渠道中受到支持,包括桌面、移动和电视。
使用 AIR 构建原生应用的方法,当开发人员的应用被编译时,它实际上是将代码从原生 ActionScript 重写为 iOS 和 Android 操作系统的原生 Objective-C 或 Java。这意味着 AIR 编译器和打包器将实际上把一切都写入设备的程序集,这是非常低级的代码,比 iOS 或 Android 开发者为原生应用构建的 API 还要低。它非常接近机器代码!1 和 0,我的朋友;仅此而已。
移动广告的发展
随着 Adobe 概述的新闻,移动开发不得不进入使用 web 标准 的方法,并完全从 Flash 播放器中分离出来。这在一个已经很新的市场上引起了巨大的变化,移动广告也需要跟进。曾经由 Flash 主导的行业认为,它在 Android 操作系统和黑莓中有可取之处,它真的认为 iOS 最终也会接受它。
不用说,这种情况并没有发生,所以移动广告生态系统开始时规模相对较小。当广告客户知道他们想要进入这个领域时,他们会向他们的创意机构和第三方广告服务器寻求帮助,在这个更加分散的领域导航,并提供表达能力来巩固实际的移动投资回报。然而,软件、硬件、操作系统版本和软件开发工具包(SDK)之间的划分让人们不敢投入实际的媒体资金。从操作上来说,开发人员创建同一广告的 Flash 和 HTML5 版本没有任何意义,更不用说支持所有不同的大小,移动设备上所有不同的屏幕,以及不同的 SDK 接口。光是想想就累死了!
这给广告业带来了一个巨大的问题。记得上一章我们简要讨论了响应式设计和跟踪需求;目前,在线广告行业的这一部分仍然非常分散。客观地说,发行商 A 的页面上发生的情况对发行商 b 来说可能不一样。那么,当您试图通过广告网络购买媒体时会发生什么情况呢?当您需要担心所有这些不同的变量时,您应该如何增加工作负载的规模呢?
过渡到 HTML5
随着市场争先恐后地找出统一的发展方向,许多流行的浏览器和移动设备都过渡到(或正在过渡到)一个完全以 HTML5 为中心的平台,这使得广告商和营销人员需要跟进,以便将他们的品牌信息传递给他们的最终用户,而不管访问内容的屏幕或设备是什么。此外,越来越清楚的是,Flash 实际上是一个设计非常好的快速开发环境——迄今为止没有像 HTML5、CSS3 和 JavaScript 那样的环境,但我觉得随着工具的发展和碎片化的缓解,这种情况将会改变——因此,为了实现 Flash Player 长期以来一直做得很好的相同体验,目前的广告商对运营时间和成本感到沮丧。
IAB 增强功能和 SDK 提供商
在所有的混乱、分裂和运营困境中,IAB 一直致力于通过开发一些增强功能来帮助和支持涉及 HTML5 和移动的转型。随着移动应用支持的多样化,媒体购买者无法确保大规模的库存,因为无法保证它能在每个人的应用中工作。在整个移动生态系统中,在 iPhones 和 Android 设备上每个人都知道并喜欢的应用中,有许多不同的广告投放方式——例如,愤怒的小鸟、与朋友交谈和画点什么。在这些地方看到的广告通过 SDK 进入免费应用。这些 SDK 提供了广告创意(HTML5、CSS3 和 JavaScript)和应用代码库(Objective-C 或 Java)之间的沟通渠道。把它想象成两种不同语言之间的翻译器。
开放富媒体移动广告(ORMMA) 草案是根据行业需求制定的,旨在规范移动富媒体广告在各种平台上的显示方式。该领域还有其他 SDK 提供商,他们有自己的解决方案。仅举几个例子,有苹果的 iAds,谷歌的 AdMob,Medialets,千禧传媒,Opera 的 AdMarvel 和 RadiumOne。很容易想象这会增加多少碎片。没有标准,就无法在媒体购买或开发中提供规模!移动富媒体广告接口定义(MRAID) ,IAB 认可的 JavaScript API,强烈基于 ORMMA 计划的学习和发展。MRAID 是一个纯粹的基于 JavaScript 的 API,它以类似于 ORMMA 的方式与出版商的应用进行通信,但它要简单得多,因为它的存在只是为了在所有移动富媒体广告中提供少量的功能。最后,移动新星是由行业成员开发的格式,并被 IAB 采用为通用移动富媒体广告格式。这些格式旨在跨出版商进行扩展;也就是说,如果出版商通过了 IAB 的认证,他们应该采用他们的规范。
注意我们将在第九章中更详细地介绍 SDK 和应用内广告。
开发工具
我们已经谈了一些公司运营中的问题,以及 IAB 如何试图通过标准化来提供便利,但我们还没有从创意的角度讨论过,在创建富媒体广告时,出现了哪些工具来减轻开发人员和设计人员的工作量。Adobe 的开发工具,如 Wallaby、Edge、Shadow,甚至 Flash,明确展示了 Adobe 作为一家公司,如何真正专注于新兴的 web 标准,并致力于为开发人员提供 HTML5 浏览器市场上的创意设计所需的最佳工具(请参见“Adobe”部分的更多信息)。
Sencha 是这一领域的新来者,它也在这一领域取得了许多进步,比如 Sencha Animator,甚至还有 HTML5 企业应用市场、ExtJS 和 Sencha Touch。Sencha Animator 是一个桌面应用,它简化了 HTML5、CSS3 和 JavaScript 创意的开发。这些工具可以用于从简单到复杂的任何动画,也可以轻松地包括交互性、自定义执行的 JavaScript 和跨平台视频,所有这些都在 Adobe 的 Flash Professional 用户非常熟悉的一个干净的用户界面中。这两家公司(以及这里没有提到的其他公司)都开发了这些工具,以帮助减轻在新浏览器上构建广告甚至富网络应用的运营成本。(要了解更多信息,请访问Sencha.com和Adobe.com查看当前产品下载。)
注意我们将在第八章和第九章中更深入地挖掘移动工具集和程序。
HTML5 业务
不出所料,HTML5 既是一项业务,也是 web 技术的进步。接下来的章节将深入探讨不同公司对 HTML5 的立场,以及它们如何适应环境,并最终支持不断发展的规范。此外,这些部分将给出它们在广告部门中的位置。读完这一部分后,你应该对谁是这个领域的大玩家以及谁是新来者有更清楚的了解,并成为一个准备更充分的 HTML5 广告客户。此外,在本书中,我们将看看所有寻求帮助 HTML5 广告创作的公司。
苹果
苹果长期以来一直与创新、技术和在线改进联系在一起。由于 iPhone 和 iPad 在将网络转向 HTML5 方面负有部分责任,因此从这家公司开始并概述他们与 HTML5 和新兴网络标准相关的目标似乎是唯一合适的。正如你所记得的,许多人感谢史蒂夫·乔布斯推动了即将到来的网络标准,现在被称为 HTML5。每本关于史蒂夫·乔布斯的书都讲述了他对完美的专注。也许正是这种完美主义让苹果的市场份额和资本收益在过去几年里扶摇直上。经过与癌症的长期斗争,乔布斯于 2011 年去世,蒂姆·库克成为世界上最大、最赚钱的公司的首席执行官。
蒂姆·库克的核心愿景与史蒂夫的非常一致。新版 iPad、iPhone 和 Mac 已经如期发布,苹果的市场份额继续上升。苹果发布的硬件继续变得更快、更强大、更移动。拥有这些复杂的设备使开发人员和设计人员能够真正提高与 HTML5 相关的标准。至于 HTML5,苹果成员活跃在 W3C 中,并不断将他们的浏览器 Safari 构建成 HTML5、CSS3 和 JavaScript 发电站。
Safari 是一个使用 Webkit 构建的快速浏览器,Webkit 是一个开源项目,位于苹果的家乡加州库比蒂诺。每一个新的稳定的 Safari 版本通常不会包括 HTML5 提供的所有最新和最棒的内容,但用户总是可以每晚下载 Webkit,这是苹果 Safari 浏览器的前沿版本,可以试验可能(也可能不会)进入最终 HTML5 规范的功能。
国际天体物理十年(International Astrophysical Decade)
iAD 它有一些优点和缺点。从积极的一面来看,这是一个标准,由苹果公司开发,只需创建一次,就可以在他们庞大的广告网络中部署。第二,iAD 提供了一套软件,用于极其轻松地创建真正丰富的广告。然而,这是苹果,苹果在某种程度上被称为“围墙花园”——你需要遵循苹果的所有规则才能进入内部,一旦进入,就只有一套特定的功能可以玩。此外,被锁定在苹果开发的一套软件工具中,我注意到 iADs 的 k-weight 绝对巨大,尤其是对于移动设备而言;在我看来,这似乎是一个巨大的疏忽。除此之外,iAD 曾经以 100 万美元的最低竞选预算开始。然而,由于缺乏参与者,苹果公司最近再次将票价降至 10 万美元。我们将看看苹果计划如何在未来增强其工具和 iAD 平台,但我们将在第九章中更多地关注 iAD。
谷歌
像苹果一样,谷歌在网络上有着悠久的历史。作为一个搜索引擎,它已经进入了许多不同的网络市场:社交、地图、分析、浏览器和移动。与苹果的 Safari 浏览器非常相似,谷歌的浏览器 Chrome 是建立在 Webkit 引擎上的,谷歌的新兴网络浏览器 Chrome Canary 支持许多领先的 HTML5 功能,这些功能可能会也可能不会成为最终的 HTML5 规范。
AdMob
谷歌在移动领域的努力之一是其广告网络 AdMob 。AdMob 于 2009 年 11 月以 7.5 亿美元收购,拥有自己的移动出版商名单,这些出版商利用 AdMob SDK,允许广告商在 AdMob 网络上运行,并在应用之间保持相同的功能。除了广告网络,谷歌还为移动设备运行安卓操作系统。Android 在移动生态系统中拥有巨大的市场份额,但它对开放性的关注造成了它自己的市场微碎片化。Android 设备的屏幕大小可能会有所不同。由于系统是开放的,所以浏览器、视频播放器和其他功能集以及操作系统的版本也可能不同。与 Android 不同,苹果有一个受控的开发环境,通过明确保持操作系统关闭,让开发者知道他们正在进入什么。
关于 Google 最后要提到的是它的 Dart 编程语言。Dart 是谷歌在其 Chrome 浏览器中更快速地执行和替换 JavaScript 的方法,也解决了 JavaScript 的一些问题。Dart 是一种具有 C 风格语法的面向对象编程(OOP)语言。Dart 要么被编译成本机 JavaScript,要么直接在支持 Dart 虚拟机的最新浏览器上运行。截至 2012 年 3 月,苹果、Mozilla、微软和 Opera 都没有在浏览器中实现 Dart 的计划。但是,如果或当您部署到支持 DART 的浏览器时,请记住这种语言。这可能对未来的发展有益。
砖坯黏土
在前面的章节中已经有很多关于 Adobe 和 Flash 平台的内容。Adobe 长期以来一直以 Flash 平台扎根于 Web,Flash 插件也经历了一些变化(至少可以这么说)。然而,Adobe 作为 W3C 和工作组的积极成员,仍然致力于新兴的 web 标准,并为 HTML5 草案提供各种补充,如 CSS 区域和 CSS 着色器,旨在通过 CSS 样式提供布局和丰富的电影功能。
面向开发者的应用
此外,Adobe 还向开发者社区发布了一些有用的应用,这些应用专注于 HTML5、CSS3 和 JavaScript 的设计和开发,包括 Edge、Wallaby、Shadow,甚至 Flash Professional。Edge 是一款与 Flash 非常相似的工具,可以创建基于时间轴的动画。它们之间的主要区别在于,Edge 可以直接在最新的浏览器中使用,而不需要使用插件。Wallaby 是一个工具,将允许 Flash 设计师和动画师采取他们的。fla 文件,并将其导出到本机 HTML5、CSS3 和 JavaScript 动画。Shadow 是一个多设备开发套件;它允许开发者完全控制内容在各种显示器上的外观。最后,Flash Professional 支持导出到 HTML5 画布对象和创建 Sprite 工作表。
除了桌面应用,Adobe 还发布了平板电脑和移动设备的触摸应用。触控类 app 有 Photoshop、Proto、Ideas、出道;它们允许设计师和开发人员在旅途中进行创作,并使用他们的 Creative Cloud 工具无缝地将创作的内容整合回他们的桌面。创意云本质上是开发者所有创意素材的全球同步。Adobe 还在 PhoneGap 和 Typekit 领域进行了巨额收购交易。PhoneGap 允许 web 开发人员灵活地将他们的 HTML5、CSS3 和 JavaScript 文件打包,作为应用在移动设备上本地使用。另一方面,Typekit 是一个巨大的网络字体库,旨在让使用 CSS 网络字体的设计人员能够非常轻松地做到这一点。最后,Adobe 的 Flex 平台被捐赠给 Apache,作为完全由开发人员社区驱动的开源软件。
注意要查看 Adobe 对新兴网络的看法,请访问beta.theexpressiveweb.com。
浏览器名
Mozilla 是一家专注于开源开发和更大网络社区参与的公司。Mozilla 是非常流行的浏览器 Firefox 和不太流行的电子邮件客户端 Thunderbird 的幕后推手。Mozilla 是一家非营利公司,专注于通过开放、安全和由更关心网络而不是商业方面的人来构建网络。
和其他公司一样,Mozilla 也为 HTML5 工作草案开发了一些功能,并开发了一款名为 Firefox Nightly 的尖端浏览器,用于测试最新功能。就像 Chrome Canary 和 Webkit Nightly 一样,这款浏览器可能包含一些从未真正纳入最终 HTML5 规范的功能,但它也包含一个用于浏览器的奇妙的 web inspector 工具包,名为 Firebug。使用 Firebug,开发人员可以轻松地在动态页面上调试 HTML、CSS 和 JavaScript。最后,Camino 是 Mozilla 的 Mac OSX 浏览器;它旨在为 Mac 用户提供一个开放的浏览器。
微软
微软几乎是一个家喻户晓的名字。它开发了 Windows 操作系统、Xbox 360 和网络浏览器 IE。多年来,IE 一直是事实上的标准浏览器,因为它是 Windows PCs 自带的。然而,随着浏览器公司的出现,以及微软推出 IE 第 6 版浏览器,许多用户转向 Firefox 或 Chrome,甚至成为苹果用户,并将 Safari 作为他们的主要网络浏览器。随着微软开始采用下一代网络标准,他们在 Windows XP 上仍然有一个挥之不去的客户群,Windows XP 最多只支持浏览器 IE8。因此,XP 用户永远不会有一个新兴的浏览器,除非他们更新到 Windows 7 或最新的 8 或在浏览器中安装谷歌的 Chrome 框架。
注欲了解更多关于 Chrome 框架的信息,请访问google.com/chromeframe。
运行 Windows 7 及以上版本的用户可以使用 IE9,但它只支持部分 HTML5 功能。事实上,许多人认为 IE9 绝不是支持最新网络标准的新兴浏览器。参见people.mozilla.com/∼prouget/ie9。此外,随着 Windows 8 和 IE10 的发布,IE9 很快就会过时。IE10 将是微软在新兴网络浏览器市场的第一个主要竞争者,因为它将支持 HTML5 的许多功能集。它还计划支持最新的 HTML5 规范,并提供所谓的插件免费浏览器,被称为“Metro”或以前被称为 Metro 的东西。Metro 本质上是 Windows 中新的非常著名的“开始”菜单。Metro 风格的应用将从前端支持 HTML5、CSS3 和 JavaScript,从后端支持各种微软技术。也有传言称,某些个人电脑将开始在电脑中安装 Kinect 摄像头,提供另一种与屏幕上的内容进行互动的方式。真的,没有插件的浏览器是什么意思?简单地说,不支持 Flash、Unity 和其他插件。是时候学习网络标准了,不是吗?
森查
就技术而言,Sencha 是城里的新成员。Sencha 总部位于加州,为桌面和移动设备开发基于 JavaScript 的框架,称为 Sencha Touch 和 ExtJS,用于 HTML5 web 应用构建。他们的网络开发应用可以很容易地与 Adobe 的 PhoneGap(或另一个打包者的设备)结合,后者将 HTML5、CSS 和 JavaScript 文件移植到本地文件,设备可以在浏览器环境之外运行这些文件。开发人员经常使用 Sencha 的工具快速构建网络应用,并部署到苹果应用商店和安卓市场等应用商店。
除了这个企业应用之外,Sencha 还运行一个名为 Sencha Animator 的产品,这是它使用 web 标准和基于 CSS3 的图形动画为基于时间轴的动画提供的解决方案。像 Adobe Edge 和 Flash 一样,Sencha 提供了一个在浏览器环境中处理丰富图形、动画甚至视频的界面。Animator 主要面向移动行业;此外,它还提供了对 ORMMA 和 MRAID API 的本地支持。在业务方面,自从最近 Adobe 的许多 Flash 员工被解雇后,一些人从 Adobe 转移到街上从事 Sencha 的新兴产品。我敢打赌,随着时间的推移,Sencha 将成为这个领域的一个更大的参与者。
边
以黑莓(Blackberry)操作系统而闻名的 RIM(research In Motion)已经在安全业务和企业领域存在了很长一段时间,但至少可以说,黑莓浏览器在移动领域也一直处于原始状态。直到最近,RIM 还没有提供真正的网络体验,但最近它已经开始制造消费者友好的 Playbook、Torch 和 Curve 平板电脑和手机,具有增强的浏览器、触摸屏支持,甚至 Flash 支持。然而,由于市场份额迅速下降,2011 年 RIM 决定退出消费市场,重返企业市场。
黑莓很快将发布其操作系统的第 10 版,支持另一个名为 Blackberry App World 的市场应用,但它在消费者的移动和平板电脑市场上仍然处于下风。它的主要竞争对手苹果留给它的市场份额微乎其微。
歌剧
我们不能忘记 Opera 浏览器 。尽管它在美国市场并不庞大,但它在欧洲和非洲市场拥有巨大的支持(尤其是 Opera Mini),因为由于缺乏有线连接,移动互联网在那里更普遍。Opera 成立于 1994 年,首先开发网络产品,然后是 Opera 浏览器,最近是面向移动设备的 Opera。Opera 为开发者提供了强大的工具,包括蜻蜓(Opera 的 Firebug 等价物)、移动模拟器、电视模拟器、OperaDriver 和 OperaWatir。
注要查看更多 Opera 的开发者工具,请访问opera.com/developer/tools.
除了移动浏览器,Opera 还拥有 AdMarvel,一家移动广告服务公司和 SDK 提供商。AdMarvel 为移动出版商提供了通过 AdMarvel 平台投放广告的能力。
其他人
HTML5 和移动生态系统中还有许多其他浏览器、设备制造商和软件制造商。这些部分旨在描绘一幅更大的画面,并试图理解所有运动的部分。市场上有来自 Kindle、Nook、HTC、摩托罗拉、三星和华硕的设备,大多数使用开放的 Android 操作系统,并在其浏览器中支持至少一些 HTML5 功能。由于开放的 Android 操作系统以及不同的屏幕尺寸,移动开发人员和设计人员很难尝试标准化他们的产品部署。幸运的是,你会有一本概述一切的书!
注意要查看 W3C 关于浏览器、操作系统和屏幕分辨率市场份额的月度统计,请访问w3counter.com/globalstats.php.
下一步是什么?
显然,这里有很多东西需要消化,你可能需要再次回顾这一章,并自己做一些研究,以真正理解一切是如何演变的,以及每个公司是如何适应这个难题的。这一章的重点不是让你晕头转向,但是我完全理解你在试图记住所有事情时的沮丧。在技术、政治和设备碎片化之间,我希望这堂历史课能让你对大局有更深刻的认识。事实上,形势变化如此频繁,以至于自写作之时起,许多事情无疑已经发生了变化或更新。公司改变他们的战略,被收购,开发新的设备,或者增加更多的部门。HTML5 草案将很快标准化;只有到那时,它才会被所有的浏览器制造商完全采用。这只是野兽的本性,需要一些时间来完成。我会尽量提供有用的链接,让你可以找到关于重要主题的最新信息,这样你就可以参考未来发生变化的内容。你可以看到移动市场确实在技术和广告方面加速了 HTML5。随着我们更多地讨论 HTML5 及其对广告的影响,我们将讨论更快的 JavaScript 执行浏览器的重要方面,广告服务器如何处理响应性 Web,k-weight 和文件大小不可避免的增加,文件加载问题,整体采用,用户体验,行业细分,以及如何在这个不断变化的市场中进行专业导航。请记住,这一章的目的只是给你一个我们今天所学到的背景知识。
术语评论
和上一章一样,我们看到了许多新的首字母缩写词、概念和单词。让我们快速回顾一下与第二章相关的一些术语。
表 2-1。HTML、Flash 和 HTML5 术语回顾
单词 | 定义或含义 |
---|---|
应用接口 | 应用界面 |
CSS3 | 对级联样式表规范的 CSS 级补充 |
CSS 预处理器 | 一种使用变量、常量和混合的语言,但是符合真正的 CSS,所以浏览器能够理解 |
数字正射影像图 | 文档对象模型 |
国家政治保卫局。参见 OGPU | 图形处理单元 |
超文本标记语言 | 超文本标记语言;网络和浏览器的语言 |
HTML5 | 超文本标记语言,第 5 版 |
爪哇 | 谷歌 Android 的原生编程语言 |
Java Script 语言 | 所有浏览器中处理功能和逻辑的代码库 |
目标-C | 苹果 iOS 的原生编程语言 |
静态(默认) | 当用户无法查看富广告时提供的故障转移图像 |
摘要
在这一章中,我们详细回顾了 HTML5 的出现。既然我们已经努力理解了将 HTML5 引向这个方向的技术和业务规则,那么是时候深入研究工作规范以了解广告行业如何应对这些变化了。在接下来的章节中,我们将采用一种完全不同的方法,更深入地研究 HTML、CSS 和 JavaScript 在新兴网络和广告中的实际应用。
进入下一章,我希望你现在对来自 Flash 或 Actionscript 背景的代码有一个基本的了解,并且理解 HTML5 还不是一个正式的标准。它仍在开发中,W3C 和 WHATWG 正在弄清楚哪些应该保留,哪些应该删除或添加到各自的规范中。随着我们更多地了解与广告相关的 HTML5,还有更多的内容要介绍,所以请准备好做笔记,为一些页面添加书签,并跟随一些示例。最终了解了活动流程、行业和技术后,您现在就可以开始真正钻研了。我很激动,让我们开始吧!
三、网络标准广告
这一章将讨论 HTML5 和开放网络标准的新的和有用的特性,你可以在你的下一次广告活动中利用它们。要记住的是,HTML5 不仅仅是 HTML 标记的进步;在其他技术中,它还开创了新的 JavaScript APIs 和 CSS 特性。将研究一些 HTML5、CSS3 和 JavaScript 技术,您将看到如何将它们结合使用来增强现代浏览器市场中的创造性开发。
众所周知,网络广告经历了许多阶段:静态图像、动态 gif、基本的 HTML 广告、Flash 的丰富功能。现在 HTML5 和现代网络堆栈正在建立一个新的发展阶段。随着这本书的继续,我将介绍随着新兴 web 标准的成熟,设计人员和开发人员遇到的一些常见陷阱,您将看到如何立即使用这一新规范,同时为使用旧浏览器的用户提供良好的回退。
我已经讨论了 HTML5 广告世界中的富媒体广告是如何产生的;因此,让我们假设从这一点开始,网络上的所有广告都将被认为是“丰富的”和高度互动的。本章旨在让你完全掌握使用新兴网络技术处理广告时的一些细微差别。我将介绍 HTML5 中的一些新特性,利用 API,优化您的代码以跨发行商高效运行。
然而,首先要做的是。确保您使用的是最新版本的 Safari、Internet Explorer、Chrome、Opera 或 Firefox。因为我将会先看一下本章中的一些代码,所以你拥有一个现代化的浏览器是很重要的。把这一章当作入门,因为它将全面展示 HTML5 的前景及其对整个网络广告的影响。接下来的每一章都将着重于更深入地研究这里讨论的技术,但这是你涉足的地方。所以让我们开始吧!
HTML5 广告
HTML5 已经带来了——在撰写本文时,还在带来—许多对网页内容创作的增强。这本书的重点是 HTML5 及其各种技术如何影响在线广告市场,但我强烈建议你学习更多关于 HTML5 标记以及它如何影响整个网络的知识。像<文章>、<旁白>、<细节>、<页眉>、<页脚>和<部分>——以及<画布>、<视频>、<音频>,以及其他一些我们将在后面详细介绍的标签——都是 HTML5 规范中的新标签。有了这些新标签,开发人员和设计人员可以在浏览器中本地创建语义和逻辑标记。一定要看看 W3C( w3.org/TR/2011/WD-html5-20110525
)和 WHATWG ( whatwg.org/specs/web-apps/current-work/multipage
)对 HTML5 的最新看法,看看它如何影响整个网络。也就是说,新兴的和有竞争力的浏览器厂商现在正在整合 HTML5 的特性,允许开发者用这些即将成为标准的 HTML 语义来定义文档的结构。
使用
因为知道用什么元素包装你的广告内容才是这里真正关注的,所以一些 HTML5 特性——那些与广告空间相关的特性——比其他特性更重要。在 HTML 规范的早期版本中,文档的结构通常用
标签以及特定的 id 和类来标记,因此发布者可以在他们的页面标记中的特定部分插入广告代码。使用< div >标签,出版商和内容开发者可以将他们的页面分割为标题、导航、广告和其他特定内容。例如,在开发网站属性时,拥有一个名为 header、footer 或 ad 的< div >容器可以提供一个非常标准的结构。以来自出版商雅虎的图 3-1 中的例子为例。
图 3-1。使用 Chrome 的 inspect 元素功能对雅虎页面进行标记
图 3-1 展示了雅虎实际上使用了一个 ID 为“ad”的广告容器 div。这告诉其他开发者页面的这一部分是为广告设计的(广告位)。如果您检查任何页面,您会发现标记中的其他 div 指定了其他元素,如“y-header”和“y-footer”,这是 Yahoo 标记的特定命名约定。
新的广告容器选项:
有了新的 HTML5 标记元素,开发者可以利用两个新的广告容器元素:
图 3-2。浏览器中 section 和 aside 元素的标记
数据属性
HTML5 中另一个有趣的特性是新的数据属性。这种属性添加起初可能看起来有点疯狂,但是它提供了一些非常好的用例,尤其是在广告领域。使用广告标记中的数据属性,您可以自定义特定元素的特定值。例如,在广告投放中,所谓的宏通常用于在广告投放时将变量替换为其他值;它的使用方式取决于广告面向的出版商,以及在将广告呈现到页面之前我们可以了解的其他信息。这个宏值非常类似于传统编码语言中的变量,通常看起来像,??宏??,或者类似的东西,这取决于广告服务公司及其解析特定字符以插入值的能力。宏值可以通过数据属性添加到广告的标记中;当提供广告时,根据广告服务器收集的信息,该属性将被应该存在的值所替换。清单 3-1 展示了如何通过替换一个广告的点击 URL 来让同一个广告创意服务于许多出版商。点击 URL 可以根据广告服务器动态变化的事实有助于您在多个出版商之间传播相同的创意,但仍希望拥有唯一的点击 URL。
清单 3-1。 一个广告投放宏的例子
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css" media="screen">
#clickBtn {background-color:#000; width:100px; height:20px; color:#FFF; cursor:pointer;}
</style>
</head>
<body>
<div align="center" id="clickBtn" data-link=$MACRO$onClick=window.open(macroValue)>Open Macro</div>
</body>
<script type="text/javascript">
var macroValue = document.getElementById('clickBtn').getAttribute('data-link') //returns value to be replaced by ad server
</script>
</html>
在广告投放时,值被广告服务器定义的值所替换。这种情况下可能会出现 =www.google.com
或www.bing.com
的情况。简而言之,数据属性的规则规定,任何以“data-”开头的属性都将被视为最终用户看不到的存储区域。同样,当您试图在不改变元素的外观或感觉的情况下指定关于元素的显式信息时,这是非常有价值的。
HTML5 注意事项
应该注意的是,HTML5 新增加的标记是辅助技术的巨大进步,因为它们允许机器更好地解释文档的结构以进行解析和解释。然而,由于广告往往只存在于其活动的生命周期中,通常最多几个月,所以在一个良好的 ol' common div 标签中发布广告通常会更好,并应用特定的 id 和类。我发现这是出版商和广告网络最常用的方法。
还应该注意到,每个发布者将具有其自己的用于在其整个网络内容中构建广告清单的实现。也就是说,我能给出的最好建议是直接联系出版商,了解他们是否使用 HTML5 元素,溢出设置为 none 的 div,或者甚至是作为广告包装元素的 iFrame。虽然这可能不是每个活动都要关心的问题,但是更复杂和交互式的活动可能需要操作站点的元素或跳出 iFrame,所以这些信息可能是至关重要的。如果你想了解更多关于 HTML5 构建模块的信息,或者你对这些有点困惑,看看来自 html5doctor.com??的图 3-3 中的图片。
图 3-3。HTML5 医生的 html 5 元素选择器流程图
HTML5 已经有了太多的新元素,到最终规范发布时,可能会有更多的新元素。更多的新的和更新的元素将涵盖在整本书。
注意有关 HTML5 元素索引的最新信息,请访问
html5doctor.com/element-index
。
对于 web 创建者来说,HTML5 中新的语义标记在创建结构良好、搜索引擎友好的 web 内容时非常有价值。它改善了整体搜索引擎优化(SEO),因为像谷歌这样的搜索巨头可以更有效地解析页面内容,将页面内容与其结构分离开来。这也有助于开发人员在跨属性开发时保持标准的命名实践,因为标记名称现在将保持不变。例如,现在将有页眉和页脚标签,就像头和正文标签一样。
注意兼容 HTML5 的浏览器不需要在属性周围加引号。比如< div id="ad" > < /div >现在可以写成< div id=ad > < /div >。
安全 iframe
正如上面简要提到的,打破 iFrame 是需要发生的事情,以确保广告在网络或出版商的页面上提供丰富的体验。然而,将广告呈现在发布者的文档上可能会产生名称空间冲突和引用变量。例如,如果广告有一个名为照片库的元素,网页也是如此,对该元素的任何操作都可能传递给广告体验,甚至破坏页面内容。在广告创意的 Flash (SWF)时代,这并不是一个问题,因为 SWF 元素本来就在出版商页面的沙盒中。必须有一种更好的方式来提供丰富的 HTML 体验,可以从出版商的内容沙盒,对不对?
如果您认为将广告内容包装在 iFrame 中可以解决所有这些混乱,那么您绝对是正确的。然而,iFrame 限制了体验的丰富性,因为它将广告限制在页面上的特定区域;此外,对于页面来说,这有点占用内存,因为它创建了文档的一个新实例,一个可能不需要的实例。(想象一下,如果页面上有多个 iFrames,甚至多个 iFrames 嵌套在一起,会发生什么情况。)
传统上,使用发布者端脚本,广告可以检查该脚本是否在适当的位置并突破发布者指定的 iFrame。这是绝对必要的,因为大多数丰富的广告体验需要扩展和关闭功能。然而,一旦广告被删除并写入发布者页面的主文档,同样的规则也适用于 CSS 继承和 JavaScript 变量范围。因此,冲突和样式问题可能会出现——事实上,它们肯定会出现。
基于 iFrame 可以保护您免受出版商内容影响的知识,如何提供一个通用 API,一个允许 iFrame 扩展和收缩以及将有价值的指标收集到广告体验中的 API?IAB 和各种工作组成员正在致力于一项名为“安全 iFrames”的计划,该计划旨在成为出版商和广告之间的协议,并成为一个通用的 API,允许“丰富”广告在 iFrames 内被沙箱化,并且仍然可以访问特定的扩展和收缩命令等。发布者将有效地向 iFrame 添加一些代码,以允许广告调用发布端函数来展开和折叠。虽然这种方法需要标准化和采用,以成为一种可扩展的方法,但它在处理页面内容和广告冲突方面有一定的前景。(我模拟了一个简单的例子来说明您可以在jsbin.com/omodus/5
展开或折叠实际的 iFrame。)请记住,这将涉及到发布者端的特殊代码;它将控制页面上 iFrame 的功能和动画,而不是第三方广告服务器标签。
注意出版商甚至有可能使用 MRAID API 来提供广告标签。在第九章的中寻找更多关于 MRAID 规格的信息。
HTML5 更多与广告相关的特性将在本书后面讨论。HTML5 是关于更新和推动网络整体向前发展的;广告是这一过程的关键部分。浏览器中更新的任何东西都会对广告产生影响。
用 CSS3 做广告
正如您刚刚了解到的,HTML5 对页面的整体结构进行了许多增强,包括添加、删除或修改。当然,伴随标记结构而来的是风格。CSS 长期以来一直是浏览器风格的支柱,随着现代浏览器采用 CSS3 特性 ,包括谷歌、苹果和 Mozilla 在内的许多制造商正在利用最新的 CSS3 附件来处理 web 动画和演示,这是前所未有的。因为 CSS3 是如此强大的设计工具集,设计师现在可以利用它直接在浏览器中创建丰富的、值得打印的图形。他们不再需要依赖 Flash 或使用图像来创建他们追求的设计。
对于 CSS 来说,有些事情是必须的,因为每个制造商对于最新的 CSS3 规范都有自己的解释和采用率。首先,供应商在其环境中经常有可变性。这种不一致性以 CSS 重置的形式为设计者带来了代价,这是跨浏览器重置呈现元素所必需的。尼古拉斯·加拉格尔的 normal . CSS(necolas.github.com/normalize.css
)是新兴浏览器的一个非常有用的工具,它让所有浏览器,无论是旧的还是最新的,都可以一致地呈现元素,而不会应用不必要的样式。
一个好的建议是从你的广告的顶层元素向下重置。这意味着,如果您将整个广告包装在一个充当广告容器的 div 元素中,您可以将一个名为“adContainer”的类应用于该 div。现在,在 CSS 文档中,您可以简单地通过编写以下内容来添加特定的重置或样式:
#adContainer .adBanner {
}
这样,只有广告标记中的元素被作为目标,并且这保持了发布者页面内容和广告内容之间的清晰分离。
除了重置之外,如果您部署的浏览器碰巧与 HTML5 不兼容,您将需要优雅的故障转移来正确设置页面样式。一个很好的例子是在网站CSS-Tricks.com
上。该网站实际上在 IE6 这样的旧浏览器中降级得非常好,但当用户的浏览器支持并能够增强体验时,它利用了新兴的 CSS3 功能。这种被称为渐进增强的技术也可以应用到你的广告创意中。如果你正在运行一个需要针对任何和所有用户的活动,并且没有指定一个浏览器版本,不管是否符合 HTML5,总是要考虑到老年用户来构建广告体验。维护核心功能和消息传递,并构建更新的浏览器能够处理的更丰富的功能。
规则
CSS 规范还有一个 at-rule 索引。At-rules 用于以各种方式处理 CSS 文档并指示 CSS 解析器。这里有一些流行的 at 规则。
- @charset:这指定了外部样式表的字符集。
- @import:这将外部样式表文件导入到当前样式表中。
- @media:这指定了应该应用样式的媒体。
- @page:这为分页媒体的样式表中的页面框指定了边距值。
- @font-face:这定义了自定义字体属性。
以上所有规则都允许设计者根据请求风格化内容的机器或设备来创建特定的视觉体验。
正如您在简介中看到的,CSS 媒体配置文件用于请求呈现 web 内容的不同显示。屏幕、打印、手持和电视(仅举几个例子)允许基于视觉的内容在请求内容的设备上动态更新。如果你正在部署一个跨设备的活动,这个特性会非常有用,因为它允许设计师在设计阶段考虑许多不同的显示。此外,CSS 可以通过@import 规则集(见上文)用作外部链接,或者作为链接文件添加到 HTML 文档中。但是它也可以用作 HTML 元素的内联样式。这两种技术的使用都有值得争议的优点和缺点,不胜枚举。开始开发时,您应该相应地权衡您的选择。
我个人的发展方式是从形式和功能外化风格。这样做可以在不接触标记或 JavaScript 的情况下轻松更新布局。另一方面,一些广告平台要求您的 CSS 保持内联,并与内联 HTML 标记捆绑在一起。这种情况,显然很难扩展,有时是一种需求;因此,一定要保持样式的良好格式,因为您可能需要返回代码并执行更新和修订。然而,如果你被允许外部化你的 CSS 文件(我真的希望你可以),我最喜欢的 CSS 开发工具之一是bearcss.com
,它允许上传你的原始 HTML 标记,并为你构建一个样板 CSS 模板。这是一个巨大的时间节省,因为您不需要在构建标记后重写一堆元素声明。
供应商前缀
随着 CSS level 3 规范在 HTML5 中被采用,每个浏览器制造商都使用自己的前缀来区分浏览器渲染引擎中的标准内容。因此,使用新兴的 CSS 功能,您需要包括 Webkit、Mozilla、Microsoft 和 Opera 的前缀——假设您将在下一个 HTML5 活动中针对所有浏览器(通常是这种情况)。供应商前缀的几个例子分别是,-webkit,-moz,-ms 和-o;在使用新兴的 CSS 规范构建时使用这些前缀 将确保您在各自的浏览器环境中拥有最新的前沿 CSS3 特性集。
注意随着规范在各种浏览器中被采用,对这些前缀的需求将会减少,结果是开发人员将不得不回到代码库中删除它们,这样一旦对带前缀版本的代码的支持下降,就不会有任何东西破坏代码。
众所周知,广告的生命周期通常比传统的网页内容要短得多,但是在部署内容时记住供应商前缀非常重要。如果你想现在就做一些对未来可持续的事情,失败将是一个真正的痛苦。尽管你正在使用的特性可能会在浏览器的后续版本中被删除,但是你可以把任何带有厂商前缀的东西看作是对即将到来的事情的一个偷偷的高峰。在使用这一新兴标准进行开发时,一个非常好的工具是prefixer.com
。Prefixer 允许你用 CSS 开发。只需点击一个按钮,它就会自动为您翻译所有必要的供应商前缀,这又是一个巨大的时间节省!有关最新的 CSS3 规范,请访问 W3C 当前草案,网址为w3.org/Style/CSS
。
媒体查询
CSS 的一个非常重要的功能是利用媒体查询的能力 ,这个功能从第 2 版开始就有了,但是被归入了 CSS3。媒体查询允许您执行该术语所述的操作:查询设备或屏幕上支持的媒体。有用的媒体示例包括设备宽度、设备高度、像素密度和方向。这些特性在移动开发中非常重要,是响应式 web 设计的基础。通过使用它们,开发人员可以创建一个 CSS 文档,根据访问设备动态调整 web 内容。一些非常棒的响应式 web 设计框架是 Foundation ( foundation.zurb.com
)、320 及以上(stuffandnonsense.co.uk/projects/320andup
)和黄金网格系统(goldengridsystem.com
)。这些工具为在屏幕上开发单一的统一体验提供了蓝图。
这种方法在 web 开发领域很棒,但是请注意,当用这种格式构建广告时,几乎可以肯定 k-weight 会增加,因为您要考虑不止一个屏幕——这意味着更多的 CSS 声明。在开发之前,我建议联系你的出版商,确定他们是想要一个响应性的广告布局还是为所有屏幕变化生成新的标签。事实上,这取决于出版商想要什么。通常会有更多的广告库存出售,所以如果用户重新定位他们的设备或在响应性布局上缩放他们的浏览器,他们会给人留下不止一个印象。广告清单将改变而不是适应,这将导致发行商看起来更多的广告清单,并且将需要广告服务器为每个尺寸生成单独的标签;发布者或第一方广告服务器将需要相应地调整。一个好的做法是将 CSS 内容剥离成必要的部分,并通过使用媒体查询加载特定于设备的外部样式表。这样,您就不会为在不符合所应用的媒体查询规则的移动设备上查看的用户带来不需要的 CSS 代码,或者更糟糕的是,在带宽非常有限的设备上查看。使用我们之前的例子,清单 3-2 利用了对平板设备和电视的媒体查询,并考虑了它的方向。
清单 3-2。 某媒体查询示例
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" media="all" href="base.css" />
<link rel="stylesheet " media="all and (orientation:portrait) " href="tablet_portrait.css">
<link rel="stylesheet " media="all and (orientation:landscape) " href="tablet_landscape.css">
<link rel="stylesheet" media="tv" href="tv.css" />
</head>
<body>
<div align=center id=clickBtn data-link=$MACRO$ onClick=window.open(macroValue)>Open Macro</div>
</body>
<script type="text/javascript">
var macroValue = document.getElementById('clickBtn').getAttribute('data-link') //returns $MACRO$
</script>
</html>
因为这样做显然需要额外的开发和设计时间,所以请确保您的团队了解这一点;仅当您知道您的广告将在需要响应式布局的发布商之间运行时,才使用此方法。(有关 CSS3 媒体查询的更多信息,请访问w3.org/TR/css3-mediaqueries
。)
注意在 HTML5 doc 解析器中,不再要求包含 type = " text/JavaScript ";这是现在默认的假设。因此,编写<脚本></脚本>现在可以工作了。
响应式广告在成为现实之前还有时间成长。这归结于出版商和广告服务器如何收集广告的指标,而这是可以改变的。这是一种思维模式的转变。传统上,广告服务器和发行商根据印象向客户收费,并将影响这些印象的广告分成大小类别,以更细致地了解广告活动的表现。然而,如果你在页面上有一个广告标签,并允许创意者相应地调整大小和重新布局,那么就不需要考虑其他标签。这是广告运营人员的一个梦想——他们不必担心哪个标签在哪个分销渠道上到达哪个酒店。无论是智能手机、平板电脑、台式机还是电视,都是一样的标签,因此广告交易的运营规模是一个巨大的胜利!然而,客户肯定想知道什么尺寸的广告获得了最多的浏览量,因为这将有助于确定访问该广告的用户群。下面的模型(见清单 3-3 )有助于进一步分解这一点;它允许标签跟踪一个主要的活动印象,并根据呈现在用户屏幕上的创意大小来发出补充印象。
清单 3-3。 一个响应式广告的例子
var publisherSize;//Get this value from the publisher's page.
window.addEventListener('load', function () {
//fire off uber impression
var img = new Image()
img.src = 'http://imptracker.adserver.com';
//Pass publisher's layout to the checkSize function
checkSize(publisherSize);
}, false);
function checkSize (creativeSize) {
//Check the size to fire off supplementary impression
switch (creativeSize) {
case "300x50" :
http://sizetracker.adserver.com/300x50
break;
case "300x250" :
http://sizetracker.adserver.com/300x250
break;
case "728x90" :
http://sizetracker.adserver.com/728x90
break;
}
}
由于每个创意都是不同的,这个例子没有考虑要应用的 CSS 样式规则或所有的广告大小,因为它们依赖于发布者的页面,但它展示了如何为适应观众屏幕的广告收集相同的丰富指标。如果广告要从 publisherSize 变量中获得一个字符串值,广告服务器将能够发出正确大小的展示来进行报告。
选择器
CSS 规范中另一个有趣的部分是选择器。选择器 允许你以不同的方式定位你的标记中的特定元素。您可以通过 ID、类、标记名、类型甚至属性以及特定的值来定位它们。下面是 CSS 选择器的一些常见例子。
-
*:以文档中的每个元素为目标。
-
ad:按 ID 定位元素。
-
。中心:按类定位元素。
-
header:按标记类型定位元素。
-
div + p:只针对 div 之前的元素。
-
footer > a:目标是 footer 的直接子级。
-
a[title]:通过属性 title 定位元素。
*注意,以上元素仅为示例,请务必使用您自己的元素进行更新。
上面的例子是 CSS 选择器在现实世界中如何工作的一些常见例子。我将在本书后面的例子中使用它们——但是请注意,它们远不止本章所讨论的那些。所以我强烈建议看一看 W3C 关于 CSS 选择器的最新文档。
注关于 CSS3 选择器的更多信息,参见
w3.org/TR/selectors
。
伪类
CSS 的另一个有趣的特性是伪类。伪类很像选择器,但是它们有一个额外的层来对布局或交互做出反应。下面是一些 CSS 伪类 。
- :主动:主动元素
- :焦点:具有焦点的元素
- :已访问:已访问的链接
- :hover:被悬停的元素(记住这在触摸设备上不起作用)
- :选择:用户当前选择的元素
- :选中:选中的表单元素
- :n-child(n):第 n 个兄弟元素(您也可以使用奇数/偶数关键字来代替这里的 n
- :n-last-child(n):是第 n 个同级的元素,从最后一个同级开始计数
这些伪类对操纵你的广告布局非常有帮助。使用它们可以做任何事情,从将鼠标悬停在 CTA 元素上并改变其比例,到使用偶数和奇数编号来设计无序列表的样式。在接下来的章节中,伪类和选择器将被用来定位我们的元素。
注关于 CSS3 伪类的更多信息,请访问
coding.smashingmagazine.com/2009/07/13/css-3-cheat-sheet-pdf
。
伪元素
最后,CSS 中也有伪元素;它们允许设计者将目标元素 相对于他们自己的标记和设计。以下是其中的几个。
- *首字母:以文本的首字母为目标
- *第一行:针对文本的第一行
-
- before:元素之前的目标
-
- after:元素之后的目标
使用伪元素,您可以极其轻松地快速获得类似杂志和报纸的类型布局。如果你想把一个段落的第一个字母加粗,或者简单地增加它的字体大小,伪元素是可以考虑的。与所有新兴事物一样,在您的活动中使用这些功能之前,或者如果旧的浏览器成为目标,请确保检查浏览器的兼容性。
CSS 预处理器
最近,代码开发方面的 web 进步真的起飞了!似乎每天都有另一种精品元语言被创造出来。其中一种语言是代码预处理器和开发人员创建的定制工具,以新的方式生成 CSS 和 HTML 标记代码。这些进步包括 SASS、LESS 和 HAML,它们是 CSS 和 HTML 预处理程序。
厚颜无耻
SASS,或语法上令人敬畏的样式表,是一种元语言:它位于普通 CSS 开发之上。SASS 最初由 Hampton Catlin 设计,旨在用比传统 CSS 开发更多的结构和风格来描述 CSS 文档。使用 SASS 需要编译器将 SCSS 文件翻译成普通的 CSS 文件,这样浏览器才能理解它们并完成它的工作。一个流行的 SASS 编译器是 Compass,位于compass-style.org
。SASS 允许开发人员和设计人员快速生成动态代码,并轻松地更新和更改代码;因为它接受包含变量、混合和参数,所以它是开发 CSS 的真正逻辑和动态的方法。例如,您可以将背景颜色设置为名为$ BG-color:# ffffff;的变量。由于您的付费客户端经常希望将背景从白色改为黑色,因此开发人员很容易回到 SASS 代码库,将这一行更新为#000000,并让它在引用该变量的所有内容中扩散。这就是萨斯的真正力量发挥作用的地方!
较少的
Alexis Sellier 的 LESS ,是另一种动态样式表语言;它允许设计者利用类似于 SASS 的特性——变量、混合、嵌套规则、数学和带参数的函数。LESS 的主要区别在于它可以在客户端和服务器端环境中工作(“客户端”是指在用户的浏览器中,而“服务器端”是指托管服务器执行操作)。事实上,W3C 甚至考虑在未来将变量原生包含在 CSS 规范中(见dev.w3.org/csswg/css-variables
)。这可能会成功,也可能不会,但是如果你等不及了,这些时髦的语言会让你开始学习。还有其他的 CSS 预处理程序——Stylus 就是其中之一——但是我希望您现在已经了解了他们的目标是解决什么。如果你正在构建更大更复杂的广告,这些广告反映了丰富的应用开发,从长远来看,使用预处理器可能会让你的生活更轻松。
注有关使用 LESS 的更多信息,请访问
lesscss.org
。
低增生性急性髓细胞性白血病
最后,既然我们在预处理程序的主题上,我将提到 HTML 抽象标记语言(HAML)。HAML 是专门为 HTML 标记设计的预处理器;它可以帮助加速您的标记开发。我不会说得更详细,但是为了看看 HAML 是否适合你,请访问haml-lang.com/try.html
并尝试一下吧!这些新的编码语言的全部前提是用更少的代码做更多的事情。我是说,真的,一个 CSS 变量?那真的太牛逼了!
用 JavaScript 做广告
正如我已经说过的,在本书的其余部分,你会看到很多关于 JavaScript 的内容。您可能记得 JavaScript 不仅处理页面的行为;它还可以控制功能和交互性。值得注意的是,有了 HTML5,我们现在可以利用的 JavaScript APIs 比以往任何时候都多。同样重要的是要注意,JavaScript 是一种解释型语言——不像 Flash 的 Actionscript 或 Objective-C 那样是编译型语言。
在这种情况下,浏览器被指示运行它理解的命令,从左到右和从上到下书写。如果您来自 Flash 开发领域,这可能是一种完全不同的思考方式,因为您几乎总是会遇到这样的问题:JavaScript 命令被解释到甚至还没有在标记中创建的元素上。由于常见的“空对象引用”,这通常会导致错误并破坏您的广告中的代码。同样,这与 ActionScript 有很大的不同,因为编译器会打包以确保所有元素都存在,因此可以对它们的属性进行操作。
一些非常流行的 JavaScript 语法元素有 getElementById();和 getElementsByTagName();—这些 JavaScript 命令允许在 DOM 树中选择元素。另外,现在还有 getElementsByClassName();和新的 querySelectorAll();和 query selector();它允许开发人员在 DOM 中查询他们希望作为参数作为 CSS 选择器传递的任何元素。这对于直接定位元素非常有帮助,可以用来代替流行的 JavaScript 库,如 jQuery。无论你是否是 JavaScript 的新手,在深入研究之前,我都推荐你阅读一下丽贝卡·墨菲的一篇名为《前端开发人员的基线》的快速文章。她概述了构建、测试和过程自动化的重要性;这些是每个开发人员都可能涉及到的事情。
注意DOM 树是文档中元素的标记。有关 DOM 树的更多信息,请访问
w3schools.com/htmldom/dom_nodetree.asp
。
使变小
当你处理 JavaScript、HTML 和 CSS 时,拥有一个缩小版和一个存档版总是好的。缩小版应在活动生产环境中使用;它通过删除换行符和空格以及用单个字母引用替换冗长的名称,将代码缩减为 k-weight 比归档版本更小的单个代码块。存档的版本应该永远是你的冗长、清晰的代码库——也就是说,你可以在几年后回去,快速理解它并进行更新。
当代码被部署到 3G 或更低速度的移动设备和平板电脑上时,精简代码尤其有用。一些开发人员甚至自动化了编译和缩小所有 JavaScript 文件的过程。当您准备好部署 JavaScript 时,Apache 的 ANT、Maven 和 Grunt 等工具可以帮助您简化这个过程。相反,如果您曾经想要解混 JavaScript 代码,一个极其有用的工具是jsbeautifier.org
;它允许您以一种更加格式化和易于理解的方式查看代码。jQuery 的库缩小版(code.jquery.com/jquery-1.8.2.min.js
)和非缩小版(code.jquery.com/jquery-1.8.2.js
)就是一个例子。
异步ˌ非同步(asynchronous)
在 HTML5 兼容的现代浏览器中,JavaScript 现在提供了一个异步属性来加载脚本文件;当脚本文件与页面上加载的其他脚本并行且异步加载时,使用 async。这些脚本不依赖于页面内容的其余部分。这对于帮助更快地加载页面或者当外部脚本没有响应时特别有用。使用 async 加载脚本允许页面呈现,而不会在尝试执行失败的脚本时被阻止。async 的主要优点是避免解析器阻塞——在脚本文件完成之前文档停止呈现的情况。这通常会导致没有元素呈现在屏幕上,因为大多数脚本文件都被添加到文档的头部,解析器无法越过它。对于 JavaScript 广告标签,使用 async 可以确保您的广告脚本不会延迟发布者页面的呈现,直到您的所有广告内容都下载下来。为了更好地理解这一点,请随意查看幻灯片和BuySellAds.com
( css-tricks.com/thinking-async
)中的一些示例。清单 3-4 概述了异步在广告呼叫中的使用。
清单 3-4。 在广告调用中使用异步 JavaScript
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script async src='http://code.someAdTag.js'></script>
</head>
<body>
</body>
</html>
推迟
除了 async,您很可能会看到更多依赖于其他脚本的脚本。你可以引用一个外部库或者其他依赖项,比如页面内容,它们在广告执行之前就存在了。您可以使用一个名为 defer 的新 JavaScript 属性,它指示 DOM 解析器按照脚本被解释的顺序加载脚本。例如,您可能希望在加载引用前一个脚本的另一个脚本之前加载一个更大的延迟脚本。更多地使用 defer 属性,在处理脚本文件的排序时,您会注意到更少的错误。清单 3-5 概述了如何使用延期属性。
清单 3-5。 使用 JavaScript 的 defer 属性
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script defer src='http://code.one.js'></script>
<script defer src='http://code.two.js'></script>
<script defer src='http://code.three.js'></script>
<script defer src='http://code.four.js'></script>
</head>
<body>
</body>
</html>
请记住,async 和 defer 都不会阻塞 DOM 解析器,从而为查看页面内容的用户带来更好的体验。它还提到了 defer 发生在浏览器的 DOMContentLoaded 事件之前。
requestAnimationFrame
HTML5 欢迎用户使用 requestAnimationFrame 来处理 JavaScript 动画,而不是使用 setTimeout 或 setInterval 的旧方法。使用 requestAnimationFrame 明确地告诉浏览器你对动画的意图。传统上,开发者使用清单 3-6 中的代码来移动页面上的东西。
清单 3-6。JavaScript setinterval
<script>
window.setInterval(function() {
//move and repeat.
console.log('animate');
}, 1000 / 60); // 60fps.
</script>
现在,我们可以使用 requestAnimationFrame,如清单 3-7 所示。
清单 3-7。 使用 requestAnimationFrame
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id='box' style='position:absolute; background-color:black; width:50px; height:50px;'></div>
</body>
<script>
var globalRequestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||← window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = globalRequestAnimationFrame;
var theElement = document.getElementById('box');
var movement = 0;
function animate(timestamp) {
//move something the new way
movement += 5;
globalRequestAnimationFrame(animate);
theElement.style.left = movement + 'px';
console.log(movement);
}
//kick animation off
globalRequestAnimationFrame(animate);
</script>
</html>
使用 requestAnimationFrame 允许浏览器智能地将动画偏移到 GPU(支持这样做的地方);这使得动画更加流畅,并且还可以检测用户何时没有在隐藏的浏览器标签上查看动画内容。浏览器降低动画的帧速率可以节省资源;如果用户返回到该选项卡,它会自动恢复。这与使用 setTimeout 有天壤之别;由于浏览器能够真正理解设计者的意图,它适当地分配资源。(因为 requestAnimationFrame 仍然是一个新兴的特性,而不是一个最终的规范,所以一定要包含厂商前缀的版本。)
可扩展置标语言
XML (可扩展标记语言)长期以来一直是网络语言和许多其他软件编程语言。XML 的真正魅力在于它不特定于任何语言。完全不可知,它描述了人类和各种编码语言都可读的规则。使用 XMLHttpRequest,XML 是处理 HTTP web 服务调用时的响应。XMLHttpRequest 受制于同源策略,出于安全原因,该策略只允许从页面内容的域内发出请求。也就是说,不能使用 XMLHttpRequest 从twitter.com
或google.com
访问信息。也就是说,在与 JavaScript 开发人员打交道时,XML 响应通常不是最受欢迎的。通常,开发人员要求他们的 web 服务以 JSON 格式响应。
数据
JSON (JavaScript object notation)是一个名称/值对对象,通过 JavaScript 在内部进行本机处理。它之所以如此有用,是因为它非常轻便,易读。在移动设备中为 web 服务使用 API 时,JSON 对响应非常有帮助。此外,带填充的 JavaScript 或 JSON-P 将 JSON 视为原生 JavaScript,这意味着当从外部域请求服务时,您不会遇到跨域策略问题。JSON 正成为 Twitter 和其他流行 API 服务的标准响应,因为它响应速度快,可读性强。清单 3-8 展示了一个简单易懂的 JSON 结构。
清单 3-8。 一个基本 JSON 结构
"people": [
{"name": "John",
"age":"28",
"title":"Developer"
},
{"name": "Alison",
"age":"26",
"title":"Teacher"
}]
在网络广告中,开发者总是与外部 API 一起工作,为广告单元带来更多的相关性。典型的请求是通过 RSS 提要将广告商的最新新闻拉入广告单元。jQuery 的创始人 John Resig 提供了一个 JSON 格式的工具:RSS2JSON ( ejohn.org/projects/rss2json
)。
注意我们将在第十一章中使用 API 更深入地讨论 JSON。
JavaScript 库
因为编写原生 JavaScript 有时很麻烦,所以许多有才华的开发人员创建了库和抽象来使用和编写原生 JavaScript。大多数情况下,在广告环境中使用 JavaScript 库意味着您会给广告增加额外的代码膨胀。请记住,您可以在原生 JavaScript 中完成这些库所做的一切,因此请始终权衡依靠库来完成工作的利弊。也就是说,最流行的库可能是 jQuery。
框架
jQuery 在开发者社区群体中是庞大的,它拥有非常干净简单的编码语言。事实上,我亲眼看到许多 Actionscript 开发人员在从 Flash 开发转向 JavaScript 开发时都倾向于使用 jQuery。不过,这种方法也有利弊。一方面,jQuery 有一个非常简单的语法,AS3 开发人员会发现自己很熟悉。另一方面,jQuery 在广告界也有不利的一面,因为它会增加整体 k 权重,并且对于简单的广告创作来说可能是不必要的。如果您注意到使用 jQuery 只是简单地在屏幕上制作几个项目的动画,并且很容易引用 DOM 节点,那么您真的应该停止使用它。如果你绝对必须依靠 jQuery 来实现跨浏览器兼容性或类似的东西,广告服务器能做的最好的事情就是提供一个使用或不使用它的选项,这取决于出版商的页面是否包含它。既然 jQuery 如此受欢迎——我的意思是非常非常受欢迎——作为一名开发人员,您很有可能不必为您的广告内容提供多余的 jQuery。如果发布者已经加载了 jQuery,只需利用它。做一个快速的条件检查,类似于清单 3-9 中的内容。
清单 3-9。 一个 jQuery 条件检查
<script>
(function(window){
var latestVersion = "1.8.2";//update to jQuery's latest version
var libraries = {
pubjQuery: window.jQuery || window.$,
iFramePubjQuery: window.parent.jQuery,
googjQuery: "https://ajax.googleapis.com/ajax/libs/jquery/" + latestVersion + "/jquery.min.js",
}
for (var libs in libraries) {
var lib = libraries[libs];
console.log("Possible Libs: " + lib);
}
if (libraries.pubjQuery || libraries.iFramePubjQuery) {
console.log("Publisher Has jQuery - We're Good!");
} else {
loadScript(libraries.googjQuery);
}
function loadScript(_script) {
var script = document.createElement("script")
script.type = "text/javascript";
script.defer = true;
script.src = _script;
document.getElementsByTagName("head")[0].appendChild(script);
console.log("We choose " + _script);
}
})(window);
</script>
可以在广告中使用这个条件来检测页面是否包含 jQuery。如果没有,广告服务器可以在广告加载之前引入它,因为它可能依赖于它。使用 jQuery 的另一个好建议是从 Google 的 CDN 中提取。这很可能已经缓存在用户的机器上了(每个人都使用谷歌);因此不需要额外的下载。这是一项巨大的优化技术——为什么要做得比你必须做的更多,对吗?
因为有很大的机会,即使不是所有的,也有一些出版商会利用 jQuery,所以在广告体验中使用之前,一定要问他们是否已经加载了库的修改版本。发行商很有可能会加载 jQuery 1 . 8 . 2 版本,但事实上它是该库的变体。仅仅这个事实就可以引导许多广告开发者远离使用出版商的库。
在 web 开发和内容创建方面,jQuery 非常棒。当压缩和缩小它的特性集时,它是相对轻量级的。它拥有一大批支持代码库的开发人员,甚至得到了 Adobe 和 Google 等大公司的支持。也就是说,在广告中,如果不是完全需要,它会产生不必要的代码膨胀和沉重的加载时间。快速开发的 JavaScript 库可能是一个巨大的优势,尤其是如果您只是试图原型化一些东西来测试功能的话。然而,请记住,保持代码最小化和精简有助于更快的代码执行和更好的性能,尤其是在移动设备上。
一些非常流行的 JavaScript 库,在表 3-1 中列出,提供了有用的特性来处理跨浏览器的差异,以及处理诸如触摸事件、视频、画布和离线存储等特定特性。在后面的章节中会有更多关于这些库的内容。
表 3-1。一些适用于各种用例的有用的 JavaScript 库
JavaScript 库 | 描述 |
---|---|
工艺 | craftjs.org/ |
把手 | handebrsjs . com |
哈默杰斯 | 八种媒体. github.com/hammer.js |
幽怪 | 幻像 js.org |
朗夏尔 | westcoastlogic.com/lawnchair |
图形动画 | createjs.com |
加工 j | processingjs.org |
洛卡切斯 | locachejs.org |
要求的 | 需求. org】?? |
HeadJS | head js . com |
视频 | videojs.com |
RevealJS | lab.hakim.se/reveal-js |
UnderscoreJS | underscorejs.org/ |
注意还有更多的 JavaScript 库——在广告中,有些比其他的更有用——但是这里举不胜举。查看一下javascriptlibraries.com的好列表,或者看看 Smashing Magazine 对 40 个最有用的 JavaScript 库的分析:coding . smashingmagazine . com/2009/03/02/40-单机-JavaScript-专用库。
JavaScript 编译器
还记得读过关于 CSS 和 HTML 开发的萨斯和 HAML 吗?不要忘记 JavaScript 和它的小 JavaScript 编译语言 CoffeeScript。CoffeeScript 旨在以更简单的方式展示 JavaScript 的优点。CoffeeScript 编译成 JavaScript 的速度和开发人员手工编码一样快,甚至更快。它还保证通过 JavaScript Lint 或任何其他 JavaScript 测试器;当您在团队成员之间传递脚本文件时,这非常有用。你不会相信有多少工具和编译器可以编译成本地 JavaScript。许多人说,为了构建复杂的网络应用,比如谷歌的 Gmail 和地图,你需要在原生 JavaScript 之上再加一层构造。事实上,对于大多数广告活动来说,这样做可能有点矫枉过正,但如果你正在处理一个有许多活动部分的非常深入和复杂的活动,那么可能值得看看 CoffeeScript。另外,看一下 Google 的 Dart 和闭包编译器来了解一下我所说的抽象层次。
注关于 JavaScript 编译器的完整列表,请参见
github.com/jashkenas/coffee-script/wiki/List-of-languages-that-compile-to-JS
。
多填充物
polyfill 是一段代码(或插件),它提供了开发者希望浏览器本身提供的技术。如果你愿意,可以把 API 的前景变平。
—雷米·夏普
Polyfills 处理不支持一点技术的浏览器差异。当你开展广告活动时,你的用户群会在几种不同的浏览器和设备上。聚合填充被编码来处理这些差异。一些典型的 polyfills 处理最新的 HTML5 兼容浏览器中支持的新兴功能,如<画布>元素以及视频和离线存储。如果您的活动需要跨浏览器和设备运行,多填充非常重要。(这些信息应该在你最初的媒体计划中列出。)如果您只是运行针对单个设备或浏览器的广告,您通常不需要添加聚合填充,因为您可以将客户期望设置为该浏览器上当前可用的内容。
注意,有一个非常有用的在线工具叫做caniuse.com(我会在书中经常提到)。它分解了所有主流现代浏览器的当前特性支持,甚至给出了未来版本中会有什么特性的见解。我的建议?书签吧!
需要注意的一点是,添加多孔填料几乎总是会增加额外的 k 重量。出版商可能不会发现这是一个理想的情况,所以当你意识到这一点时,一定要标记出来。然而,随着 HTML5 规范的最终确定和浏览器采用更新和更改,对 polyfill 的需求将会减少,就像对供应商前缀的需求一样,因此添加 polyfill k-weight 膨胀的需求将会消除。目前,polyfills 是创意开发过程中不可或缺的一部分,应该根据活动目标来使用。
一些真正有用的聚合填充工具是 yepnopejs.com 的和 afarkas.github.com/webshim/demos 的和。但是,请记住,大多数都是建立在 jQuery 或 Modernizer 之上的,这增加了额外的 k-weight。最好的解决方案是向你的客户展示目前能做什么。如果一个活动需要跨设备和浏览器运行,您几乎总是需要利用 polyfill,或者大幅缩减创意设计和功能。同样,我建议使用 caniuse.com 的,它会记录什么时候有什么功能可用。
浏览器扩展
当你建立一个活动时,用于网络开发的浏览器扩展 可以给你极大的帮助。他们允许你进入浏览器,弄清楚某些事情如何和为什么会发生在你的广告创意上。本节回顾了 Webkit、Mozilla、Opera 和 IE 浏览器的一些非常有用的扩展的使用和安装。
当开发新兴浏览器时,每个开发人员都需要浏览器扩展的基本要素。它们可以更有效地帮助调试和分解您的创造性开发,因为它们在浏览器中呈现您最终将部署的内容。
有些扩展非常有用,我甚至认为它们是强制性的。其中一个就是萤火虫(getfirebug.com)。Firebug 提供了一套工具,类似于谷歌的 Chrome 浏览器在你右击并检查页面上的元素时提供的工具(也称为浏览器的 web inspector 工具)。Mozilla 浏览器的另一个有用的插件是 HTTP fox(【addons.mozilla.org/en-US/firefox/addon/httpfox】)它可以分析你浏览器中的 HTTP 流量。这在调试进出服务器的某些 API 调用时非常有用。无论是 HTML 标记、CSS 样式和动画,还是 JavaScript,这些工具在代码调试中都至关重要。其他流行的浏览器扩展是 Adblock Plus(【adblockplus.org】)和类似的广告拦截器,它们会阻止广告在浏览器中的呈现。我不鼓励你安装这个扩展,因为它会阻止所有的广告,甚至一些与广告无关的重要网页内容。然而,理解这些存在是有好处的,并且观察未来广告拦截器的行为将是有趣的(它们传统上被用于杀死 Flash 内容的域)。如果被阻止的域向用户提供有用的内容,该内容也将被阻止,从而给最终用户带来失败的体验。我的猜测是,这些扩展需要变得更聪明,如果他们只是想有效地阻止广告为他们的安装基础。否则,用户将看不到 publisher 内容和其他重要的 web 内容。
调试
正如任何开发人员都会告诉你的,调试代码很容易就占据了工作时间的一半,通常是大部分。调试 就是验证代码,检查错误和 bug 的过程。根据广告单元的复杂程度,这可能是一个相当漫长的过程。对每个功能进行单元测试需要极大的耐心以及重构,这可能是一个非常耗时的过程。幸运的是,今天的开发人员拥有许多对以前的开发人员来说只是梦想的增强功能和工具。使用这些工具,您可以调试标记、样式和脚本中的任何内容。您可以直接在 DOM 上操作元素,并实时获得反馈。像 Charles 这样的工具(用于 Mac【charlesproxy.com】和《提琴手》(针对 Windowsfiddler2.com/fiddler2,像 HttpFox 一样监控网络流量。这些代理工具对于调试桌面和移动设备以及测试 web 服务调用至关重要。它们可以提供从请求到响应的浏览器网络流量执行情况的有价值的见解——如果您正在进行外部 HTTP 调用并需要验证响应,这非常有用。它可以帮助您了解您的错误是客户端的还是服务器端的。然而对我来说,也许现代浏览器中最重要的工具是网页浏览器。正如我在上一节中提到的,Web Inspectors 为开发人员提供了许多测试和调试工具,默认情况下,所有现代浏览器都附带了这些工具。
我在开发人员调试代码时看到的常见问题中,尤其是来自使用 trace 语句的 Flash/Actionscript 世界的开发人员,会弹出 JavaScript 测试警报。弹出警告框是通过编写命令-alert(' hello world ')来执行的;—在您的脚本中;这将导致代码停止执行。正如您在查看 async 和 defer 属性时看到的,DOM 解析器将被阻塞,这将阻止您的代码执行,直到用户清除警告窗口。所以最好不要抛出警告和暂停解析器。相反,如果您正在寻找与 Actionscript 的 trace 语句类似的体验,请在现代浏览器中使用 JavaScript 控制台。从那里,您将能够打印输出日志到控制台,并查看在浏览器的引擎盖下发生了什么,它如何执行您的广告代码。通过调用 console.log()使用 throw()语句甚至 log 语句来代替 alerts 对于普通的跟踪输出语句,console . warn();如果您希望处理警告信号,请在测试代码中的潜在错误时使用 console.error()。有了所有这些调试命令,您将能够轻松地导航您的 JavaScript 代码,并确定哪里发生了错误或者哪里可以进行优化。
当您使用 console.log、console.warn 和 console.error 时,每个命令都会在浏览器的控制台查看器中写入不同颜色的代码以进行区分。这非常有用,因为根据广告代码的复杂程度,您可能有许多命令。还有许多其他的开发工具,每个开发人员都有一个特殊的“定位”工具。我发现一些有用的是 Dom Monster(mir.aculo.us/dom-monster)和 JsPerf(jsperf.com)。Dom Monster 很棒,因为它是浏览器的一个不错的小书签,JsPerf 很适合针对代码片段编写测试用例。我的建议是先尝试使用这些工具,直到你找到一个适合你的。
注关于在 Chrome 中访问开发者工具的信息,请访问developers.google.com/chrome-developer-tools/docs/profiles。
广告最佳实践
由于“最佳实践”在每个行业都是一个相当老套的术语,如果你对它有意见,请原谅我使用它。此外,目前没有人能够处理将“最佳实践”应用到非最终的东西上。然而,我希望有一些有用的提示可以让你不陷入困境。IAB 甚至在其创意指南页面 上声明:
在 iPhone 和 iPad 等设备被广泛采用之前,Flash 格式的创意在整个行业中被广泛接受并易于展示。在今天的市场中,必须进行调整以适应跨多个显示设备的广告。HTML5 提供了一种解决方案,但是还没有被广泛采用,并且需要与 Flash 格式的创意不同的创意规范。有人要求调出一个单独的创意规格类别来容纳 HTML5 广告,但对于这一发布的创意指南,决定保持规格“技术中立”。HTML5 展示广告最佳实践附录目前正在制定中。
如您所见,对于仍在出现的事物,很难说有“最佳实践”。我和其他工作组成员正在努力开发一个关于 HTML5 和广告的正式概述。当该规范成为最终版本时,IAB 肯定会更新该指南。(访问iab.net/guidelines/508676/508767/displayguidelines了解更多关于这个话题的信息。)
边框
第一个广告最佳实践是,如果广告颜色与页面背景颜色没有明显不同,出版商通常会要求所有创意都包含 1 像素的黑色边框。如果单元周围需要 1 个像素的边框,你只需要在 ads div 容器上添加 CSS,这样它就可以与发布者的页面内容清楚地分开。
跟踪
HTML5 广告能够跟踪用户,就像出版商能够使用 Flash 一样。现在,广告公司可以利用谷歌分析和 URL 缩短链接,如 Bit.ly ,它允许跟踪点击。广告设计师可以将这些免费的分析平台嵌入到他们的创意代码中,并获得对用户位置、行为和技术的宝贵见解。对于 HTML5 广告,有很多关于广告服务公司使用 HTML5 ping 属性来跟踪 URL 的讨论。该属性可以存储一个值,并将其“ping”到重定向服务器,这对于跟踪非常有用。(关于此事的更多信息,请访问lists . whatwg . org/htdig . CGI/whatwg-whatwg . org/2005-10 月/004926.html 。)
点击标签
广告追踪的一种特殊形式涉及到所谓的点击标签。它们允许广告服务器在服务时将特定的值注入到点击的 URL 目的地。(这与清单 3-1 中概述的宏观方法非常相似。)点击标签可以根据广告服务器以多种方式分配,但它几乎总是添加在广告创意中。它们可以用广告服务器要求的任何变体来编写——clickTAG、ClickTag、click tag 或其他。在创意开发期间,请咨询您的广告服务提供商,以便使用正确的变量。让我们来看看如何使用点击标签(见清单 3-10 )。
清单 3-10。 一个点击标记例子
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id='clickBtn1' onClick=window.open(clickTag1)>CLICK HERE!</div>
<div id='clickBtn2' onClick=window.open(clickTag2)>CLICK HERE!</div>
</body>
</html>
如您所见,使用点击标签非常简单。根据广告服务器的不同,URL 在开发过程中的位置将是 clickTag 和您要使用的编号。在这种情况下,有两个,所以我简单地称它们为 clickTag1 和 clickTag2。在广告投放时,点击标签值将被广告服务器上定义的任何值所替换。当创意被发送到媒体购买的各种出版商和广告网络时,这将保持特定的跟踪和重定向完好无损。
文件大小
文件大小 与 Flash SWF 相比,使用基于 HTML 的广告创意时,考虑因素可能是最大的转变。Flash 非常擅长使用专有的压缩格式将创意资源打包到一个小的 SWF 文件容器中。这种压缩确实大大压缩了带有动画、字体和图像的广告的文件大小——你能想到的都有。正因为如此,IAB 和各种出版商已经为富媒体广告采用了更小的 k-weight 足迹,通常从 40kb 到 100kb 不等,如果你幸运的话。因为我们不再包含在 SWF 包装中,所以需要做两件事。首先,作为开发人员和设计人员,我们需要优化我们用于创意的程序。这可能是优化 Adobe Photoshop 的图像压缩,甚至是在上传到我们的主机之前缩小代码库。第二,IAB 和它的各种出版商将需要更新文件大小的指导方针。当对在特定文件大小限制内可以做什么有不切实际的期望时,我们作为一个行业无法推进我们的创造性创新。在此更新期间,设计人员和开发人员可以使用适当的优化技术,如使用 sprite sheets、代码缩减和压缩、通过 GZIP (wire weight)测量文件大小,以及利用 CDN 托管的 JS 库(所有这些都将在本书的其余部分详细介绍)。
素材交付
广告开发与 web 开发非常相似,需要许多不同的组件来生成您在浏览器中看到的最终作品。请确保当您从代理机构或客户处请求创意文件时,您总是会要求以下内容:
- 图像—PNG、JPG、GIF(动态和静态)
- 分层源文件(Photoshop 文档)
- HTML、CSS 和 JavaScript 文件
- 音频和视频文件(如果需要)
- 字体和/或(CSS web 字体)
- 故事板(pdf)
无论你是出版商、代理商还是广告服务人员,这都将有助于你在试图处理所有不同的格式和文件以及试图在稍后的过程中进行更新和修改时保持理智。确保在最初的素材接收流程中考虑到所有这些文件,可以确保周转时间和客户期望不会因为缺少文件和/或不必要的来回沟通而受到影响。
元素名称
保持命名约定的明确和完整有助于降低广告代码与发布者页面代码冲突的风险。使用没有特定名称的元素 可能会导致代码执行冲突,甚至可能将来自发布者页面的脚本和样式合并到您的广告内容中。例如,如果发布者的页面有一个名为 container 的 div,广告代码也有,并且您有 JavaScript 代码在该 DOM 元素上执行,那么广告代码很可能会与发布者的代码冲突。当应用样式时,也会发生同样的事情。最好保留 div 标签和其他非常能描述广告平台的标签。就我个人而言,我喜欢在元素上使用我自己的前缀。例如,如果我有一个广告容器,我将查看哪个广告服务器提供创意,并将名称添加到相应的元素中。如果是 DFP 在投放广告,大概会是这样:
;或者如果是 PointRoll,那么就会是。这样,页面上很有可能没有其他带有该前缀的元素。如果你需要更详细的信息,包括广告的大小以及广告服务器的前缀名。相同输入–相同输出规则
广告通常也遵循“同进同出”的规则。这就是广告单元的功能,以及它如何基于用户交互来扩展和收缩。例如,如果用户点击或轻敲来扩展广告创意,用户应该点击或轻敲来关闭。同样的规则也适用于在桌面上使用鼠标的交互。请注意,所有支持富媒体广告活动的出版商通常都遵循这一规则。
移动的
如果你的广告公司准备开始构建 HTML5 广告,这是一个很好的机会,你和你的客户也可以专注于移动市场 的渗透和覆盖,因为 Flash 在 iDevices 上不受支持。从整体来看,手机仍是一个小市场,但它正在快速增长。2011 年,移动广告比 2010 年增长了 149 %;总的来说,广告将很快完全取代 Flash,利用 HTML5、CSS3 和 JavaScript 来创造体验。为了进行 A/B 比较,请看来自 Sencha 的广告样本:dev.sencha.com/deploy/css3-ads。你能说出 Flash 和 CSS3 的区别吗?有可能你可以,但是随着越来越多的 HTML5 浏览器成为标准,期待看到更多类似 Flash 的使用 web 标准开发的体验。此外,使用html5readiness.com保持最新的整体浏览器接受度。
图像与图标
对于移动设备,尤其是像素密度不断变化的设备,利用浏览器创建图形并尽可能使用较少的位图图像更有意义。为什么?因为不管怎样,当图像被缩放时是绝对可怕的。放大会导致图像保真度和整体质量的损失;缩小会导致不必要的锯齿,这会降低图像的整体锐度。考虑到这一点,Drew Wilson 为各种屏幕布局和整体设计创建了一个字体图标库 Pictos (pictos.cc)。今天许多网络出版商使用这些图标。如果你被要求使用图像,因为你的客户绝对不会满足于字体图标,我会鼓励你使用一种服务,比如 Sencha 的图像服务,这是一种代理服务,允许设计师优化多个设备和屏幕请求的图像。(请访问sencha.com/learn/how-to-use-src-sencha-io了解这项技术的更多信息。)反过来,你可以使用 Resize.ly (resize.ly)这样的服务,这是一个基于云的图片大小调整工具。简而言之,如果在充分利用 CSS3 的同时可以让浏览器完成繁重的工作,那么比通过多次 HTTP 请求从服务器获取图像要好得多。确保明智地使用图像,并且只针对桌面用户。如果你在手机上开展活动,问问自己是否需要图片,如果需要,需要多少?在大多数情况下,移动或低带宽设备上的用户将从单映像或无映像加载中受益更多。同样,确保在移动设备上使用 CSS、SVG、canvas 或其他替代方法。在后面的章节中,你会学到更多关于它们的知识。
现场活动
在广告中,站点事件允许从一个广告单元跟踪到一个发布者的页面;这个过程也称为转换。对于广告商来说,增加网站事件代表了真正的投资回报率;它显示了用户从哪里点击,以及他们如何到达广告商的网站。然而,由于 cookie 用于跟踪站点事件,因此 iOS 设备上的转换处理方式存在限制,因为 iOS 默认设置不允许丢弃第三方 cookie,除非用户访问了该域。这是行业内的巨大挑战;许多广告服务公司想把这个故事告诉广告商,但是不得不寻找其他方式。许多人认为 HTML5 本地存储可以提供这种跟踪转换的机制(在本书的后面,您将更深入地了解如何使用它)。其他人认为这将如何改变未来的事情。出版商会代表广告服务器充当广告服务第一方 cookie drops 吗?第三方广告服务器会消失吗?有一点是肯定的:随着 HTML5 在广告市场上变得越来越大,隐私方面的限制和未来问题是每个人最关心的问题。
定义你的范围
HTML5 广告要成为标准还需要时间,但我相信在未来几年你会看到越来越多的广告——尤其是在 2013 年。随着越来越多的营销人员意识到,为每个屏幕构建两个版本的相同广告体验并不划算,我们正在慢慢看到移动和桌面网络上从 Flash 内容到 HTML5 的转变。在完全转变之前,你可以做很多事情来让 HTML5 广告朝着正确的方向发展。首先,你通过阅读这本书做了迄今为止最好的事情,但也开始为新兴的网络发展;经常去caniuse.com了解你现在可以使用的功能。然后鼓励使用谷歌的 Chrome 框架,该框架允许 IE6 和其他旧浏览器使用新的 HTML5 功能(它通过向用户的 IE 浏览器注入一个不可见的渲染框架来工作)。接下来,教育其他人开始利用开放网络。如果仍然有代理和广告服务器支持过时的插件模式,我们就不能推动行业前进。最后,始终包括优雅的故障转移,尤其是在这个过渡时期。鉴于一个活动的周转时间,达到 100%的用户群几乎是不可能的,所以一定要尽一切努力在差异成为问题之前解决它们。记住,在你定义了你的目标范围后,要考虑最老的浏览器用户群;随着新浏览器的支持,在最初的基础上迭代更复杂的特性。通过这种方式,所有新老用户都能获得他们能够处理的体验。不是每个浏览器都是一样的,所以每个广告体验也不应该是一样的。一旦浏览器的前景变得平坦,HTML5 的特性被广泛采用——我们将能够忽略用户可能使用的旧版本浏览器的开发困境。
摘要
本章回顾了 HTML5、CSS 和 JavaScript 的网络标准及其对广告的整体影响。在我们准备深入研究 HTML5 广告的具体细节时,您现在应该已经全面了解了核心广告开发实践。在接下来的章节中,canvas 元素、web 字体的使用、SVG、动画、演示、表单、拖放、Web 工作器、媒体、离线存储等等都将被详细介绍。现在,您既了解了行业的基本语言,也了解了一些真正有助于入门的最佳实践。最后,如果你对如何帮助本章讨论的规范感到好奇,或者如果你对过渡到 HTML5 有疑问,请访问whatwg.org/mailing-list#specs并帮助开发。还有时间来塑造新网络的未来!我们开始吧。
四、使用画布、SVG 和 Web 字体
我们已经讨论了基本的网络标准、新兴的浏览器,以及广告如何融入 HTML5 这个大话题。现在是时候深入研究驱动 HTML5 的技术了,包括新的 canvas 元素、SVG 和 Web 字体支持。我们将首先谈论 HTML5 规范中最大的进步之一,canvas。
canvas 元素是新的显示 API,用于直接在浏览器中处理图形。如果你来自一个使用显示列表 API 的 Flash 背景,canvas 将是一个受欢迎的过渡调整。这个元素可以提供完整的动画、图像操作,显然还有一个绘图工具,并且在本机浏览器环境中完成所有这些,而不需要像 Flash 这样的插件。我们将更深入地提供处理 canvas 元素的用例和示例,因为它与广告有关,并深入研究工具和 API,这可以帮助 Flash 开发人员过渡到使用它们进行创造性开发。对于 CSS 方面的事情,我们将讨论 web 字体如何通过普通的 CSS 语法直接在浏览器中提供丰富的字体呈现。我们还将讨论字体松鼠,以及这个工具和其他工具如何帮助将许多字体格式转换成浏览器友好的格式。最后,我们将回顾浏览器中的 HTML5 标记如何解释可缩放矢量图形(SVG) ,以及 SVG 如何为图标和符号提供优于传统图像的诸多优势。作为上一章关于图像和图标讨论的后续,你将深入了解如何优化任何屏幕的图形。简而言之,这一章充满了有用的花絮,所以一定要关注并跟随。
帆布
canvas 元素,用于在现代浏览器中渲染图形,可以说是 HTML5 规范最大的补充之一。对于广告来说,这是一个特别大的规范,因为有了它,人们最终可以像 Flash 一样绘制丰富的图形——但本质上,直接在浏览器中!“画布”标签最初由苹果公司于 2004 年开发,用于 Mac OSX 操作系统的 dashboard widgets 及其浏览器 Safari。不久之后,Web 超文本应用技术工作组(WHATWG)将其添加到 HTML5 标准中,后来它被 Firefox、Opera、Google 以及最终的微软所采用。
canvas 元素通过渲染图形、动画甚至交互性为浏览器带来了许多好处。使用 canvas 元素有许多不同的方式;下面几节将更深入地探讨如何使用它。在标记中设置 canvas 元素非常简单。这是一个标签,就像你使用的其他标签一样:
、、。清单 4-1 概述了如何创建元素。
清单 4-1 。 如何创建画布元素
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<canvas id="adCanvas" width="100" height="100"></canvas>
</body>
</html>
如您所见,在 HTML5 中创建标签相当简单。如果你打开你最喜欢的文本编辑器,输入清单 4-1 代码,保存为 canvas.html,并在你最喜欢的现代浏览器中打开它,你会注意到没有任何东西呈现到屏幕上。不要惊慌;把它想象成一个艺术家把他的画布放在画架上——这一次你是艺术家,尽管你还没有真正开始画任何东西。要在画布上画画,你需要利用这个新的 HTML5 元素的真正力量;那是在它的 API 里,全部都是 JavaScript。JavaScript 控制图形、动画和交互性的绘制。(最好将元素看作是您将利用 JavaScript 创建的图形的容器或外壳。)
在介绍 canvas 的 JavaScript 实现之前,请注意元素在 HTML 标记中有一些 DOM 属性,包括宽度和高度。
注 DOM 是指页面的文档标记,由元素、属性和标签组成。canvas 元素是 DOM 结构的一部分,它可以有各种属性,包括 ID、类、高度和宽度。
更重要的是,canvas 有几个方法来绘制路径、形状、渐变和字符,以及添加图像和合成。这只是开始!除了检测用户输入和渲染复杂的动画之外,还可以指示该元素做许多事情,例如交互式游戏。它甚至可以在浏览器中多次使用,通过创建一堆画布元素,一个在另一个之上,来表示一个复杂的图像组合,甚至可以在页面的不同区域使用。作为开发人员和设计人员,利用这个强大的 Web 新功能真的取决于您。
让我们以清单 4-1 中的代码为基础,通过添加一些简单的 JavaScript 代码,在屏幕上呈现一个绿色的正方形。尝试在你的文本编辑器中按照清单 4-2 中的进行操作。
清单 4-2 。 用画布将一个绿色方块渲染到屏幕上
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<canvas id="adCanvas" width="300" height="250"></canvas>
</body>
<script type="text/javascript">
//get a reference to the canvas
var canvas = document.getElementById('adCanvas');
var context = canvas.getContext('2d');
//draw a green square
context.fillStyle = 'green';
context.fillRect(0, 0, 250, 250);
</script>
</html>
一旦你刷新你的页面,你应该得到一个绿色小方块的图像,如图 4-1 所示。
图 4-1。用画布元素制作的 250 × 250 的正方形
如果你看到正方形,你就准备好回顾正在发生的事情。如果没有,请确保您使用的是支持 canvas 的现代浏览器,并仔细检查您的代码。
注意在caniuse.com/#feat=canvas检查帆布支撑。
首先,让我们创建一个变量来获取对 DOM 中 canvas 元素的引用。在这种情况下,通过在标记中写入来赋予它 ID“ad canvas”。一旦有了引用,就向画布添加一个 2D 上下文,这样画布就知道如何绘制图形。简而言之,2D 上下文表示一个平面笛卡尔坐标系,其中原点(0,0)位于画布的左上角,向右时 x 值增加,向下时 y 值增加-类似于您在代数中所学的内容。
有了这个元素和背景,让我们开始在画布上“绘画”。为此,告诉 fillStyle 属性以绿色呈现(它也可以取一个十六进制和 RGB 值),然后调用 fillRect 方法,通过编写 context.fillRect(0,0,250,250)传入特定的参数或自变量来呈现一个矩形;。在图 4-1 中,一个正方形是通过为其 x 坐标传入 0,为其 y 坐标传入 0,为其宽度和高度都传入 250 而创建的。该值采用浮点数;也就是说,不在整数上绘制,如 10,将导致子像素走样。如果你试图保持艺术的清晰度,这可能会有问题。(如果你想深入了解画布的其他属性和方法,请查看 roblaplaca.com/examples/canvasHelloWorld的综合备忘单。
注这本书印刷时唯一可用的上下文支持是 2D。在第十二章中有更多关于 3D 和 WebGL 的内容。
这可能看起来很简单,但它很强大。还要记住,您已经看到了这个元素所能做的事情的开始。有许多用例需要涵盖;接下来,我将展示在实际方法中利用 canvas 的例子,特别是当它与构建在线广告相关时,包括图形动画和处理用户输入。
插画到画布
你可能已经在问自己,“等等,为什么我需要使用 JavaScript 以编程方式在画布上绘图?我是一名设计师;我不能用我正常的设计工具吗?”你不是唯一一个问这个问题的人;有一个很好看的工具,是专门为设计师使用而开发的,叫 AiCanvas(visit mix . com/labs/Ai 2 Canvas);它允许设计师在他们知道和喜爱的基于矢量的程序中进行设计,尤其是 Adobe Illustrator。
Ai Canvas 插件使 Adobe Illustrator 能够将矢量和位图作品直接导出到 HTML5 canvas 元素,该元素可以在支持 Canvas 的浏览器中呈现。该插件提供绘图、动画和事件等编码选项,以便您可以构建交互式的、设计良好的基于画布的 web 应用。
在创意部门,当你在一个团队中工作时,这个工具特别有用,在这个团队中,设计师需要向开发人员提供概念和模拟。你可以让你的设计师在 Illustrator 中工作,让你的开发人员在 JavaScript 中工作。该工具在设计和功能之间提供了一个清晰的分离,当客户需要改变时(他们总是这样),它会提供帮助。除了使用 Illustrator 以这种方式绘图之外,该插件还支持动画、事件处理甚至调试。(如果你问我的话,我会觉得很甜蜜,而且这一切都是免费的。)这些特性使得这个插件成为任何设计者的工具箱的一个有价值的补充。由于它适用于某些应用,如果您真的想使用 canvas 来处理高度可视化和复杂的艺术作品,我建议您检查一下。但是请记住,随着图形变得更加复杂,k 权重肯定会增加,插件将生成的未经优化的 JavaScript 也会增加。因此,正确地计划你的执行,让你的客户和出版商知道你在做什么,特别是如果 k-weight 约束很紧的话。
将闪烁到画布
如果你从事 Flash 工作,或者认识一些现在或过去从事 Flash 工作的人,他们会告诉你,就为网络制作创新的丰富图形而言,这是一个突破性的平台。正如你现在所知道的,canvas 元素是一个受欢迎的附加元素,因为它让设计人员和开发人员在 HTML5 广告中更好地利用图形。现在,在最新的 Adobe Flash Professional CS6 中,由于一个名为 CreateJS 的库和工具包,设计人员可以更轻松地使用 canvas 元素。
CreateJS
CreateJS 的产品套件中有很多很棒的东西。
- EaselJS(稍后将详细介绍)
- TweenJS(用于动画)
- SoundJS(用于 HTML5 音频)
- 预加载(用于预加载素材)
- Zoe(一个精灵表生成器)
注意 TweenJS,SoundJS,PreloadJS,Zoe 不在本章讨论。你可以在 http://createjs.com 了解更多关于这些图书馆的信息。
对于设计人员和开发人员来说,由 Grant Skinner 开发的 CreateJS 框架提供了一套完整的 JavaScript 库,用于图形、动画、声音和预加载,以帮助构建 HTML5 内容。
图形动画
EaselJS 是一个 JavaScript 库,是 CreateJS 的一部分,它允许 Flash 设计人员和开发人员在 Flash 创作环境中创建图形。使用 EaselJS,您可以访问 Actionscript 3.0 中的许多类似语法,同时利用 JavaScript 创建本地浏览器图形和动画。根据 Grant Skinner 的说法,EaselJS 练习了十多年来 Flash 的显示列表 API 的开发;他想将其移植到一个全面的 JavaScript 库,用于处理 HTML5 中的 canvas 元素。在语法上,EaselJS 非常类似于在 ActionScript 3 (AS3) 中使用显示列表 API,如清单 4-3 所示。
清单 4-3 。EaselJS 的一个例子
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>EaselJS</title>
<script src="easeljs-0.4.2.min.js"></script>
<script src="BoxBlurFilter.js"></script>
<style>
* {background-color: #000;}
</style>
</head>
<body onLoad="init()">
<canvas id="canvas" width="1024" height="768"></canvas>
</body>
<script>
var stage,
canvas = document.getElementById("canvas"),
context = canvas.getContext("2D"),
logoImage = new Image(),
logo,
fps = 30,
speed = 0.2;
function init() {
stage = new Stage(canvas);
//Keep a local image or you'll get the following error:
//Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
logoImage.src = 'logo.jpg';
logoImage.onload = function () {
logo = new Bitmap(logoImage);
logo.cache(0, 0, logoImage.width, logoImage.height);
logo.regX = logo.image.width * 0.5;
logo.regY = logo.image.height * 0.5;
stage.addChild(logo);
Ticker.setFPS(fps);
Ticker.addListener(window);
}
}
function tick() {
var splitX = (stage.mouseX - logo.x) * speed;
var splitY = (stage.mouseY - logo.y) * speed;
logo.x += splitX;
logo.y += splitY;
logo.updateCache();
logo.filters = [new BoxBlurFilter(5000, 5000, 2)];
stage.update();
}
</script>
</html>
好吧,这需要完成相当多的代码,但任何来自 Flash 或 ActionScript 背景的人都会证明,就语法而言,它非常接近 JavaScript。在 init 函数中,与 Flash 的相似之处非常大。因此,如果你在 HTML5 中使用图形,我强烈建议你看看 EaselJS——不仅仅是因为它的易用性,还因为它的轻量级。它只有大约 45 千字节——通常足以带来一些开销来绘制一些真正令人惊叹的图形,假设出版商默认在其网站上没有包含这个库。
让我们分解清单 4-3 中的代码样本。首先设置 canvas 元素,通过编写 var stage 创建一些变量,canvas = document . getelementbyid(" canvas "),context = canvas.getContext("2D "),logoImage = new Image(),logo,fps = 30,speed = 0.2。对于偶尔使用 JavaScript 的用户来说,目前还没有什么新东西。第二,通过编写 init()创建 init 方法;,将事情拉开序幕。然后将 canvas 元素传递给 stage 对象,如 EaselJS 中所指定的那样—同样,非常类似于 ActionScript。第三,创建图像,并通过编写 logo = new Bitmap(logoImage)将其赋给一个位图对象;并通过调用 addChild 方法(另一个 ActionScript 代码片段)添加到舞台。最后一部分是驱动动画的部分。Ticker 对象本质上是应用的心跳;它以每秒一定的帧数被调用。在这种情况下,30,如上面通过编写 Ticker.setFPS(fps)在变量中定义的;。tick 方法在动画的每一帧都会被调用。应用基于用户鼠标坐标的 logo 移动,通过调用 EaselJS 框架中的 BoxBlurFilter 来应用一个好看的运动模糊滤镜,这个框架可以在 tick 方法和 Wahlaa 中找到!。您刚刚使用 EaselJS 创建了第一个基于画布的动画。显然,这个库还有更多内容,我鼓励你在自己的时间里通过深入研究文档[[http://www.createjs.com/Docs/EaselJS]]来尝试更多内容。也许,开始采取以前的 Flash 为基础的广告单元,并将其转换过来。如果您真的想使用 canvas 元素,我强烈建议您非常熟悉 EaselJS。当使用 canvas 元素时,它将使开发更加清晰,尤其是如果您来自 Flash/ActionScript 背景。
其他 JavaScript 库
您可能知道也可能不知道许多其他 JavaScript 库可以使用 canvas 元素,而不仅仅是 EaselJS。了解市场中的其他人是很重要的,因为你很有可能在未来的活动中或者在代理和广告服务器之间移交素材时遇到他们。我们来看两个比较流行的:KinectJS 和 ProcessingJS。
kinectjs〔??〕
Kinect js(kineticjs.com)是一个 canvas JavaScript 库,它通过为桌面和移动设备启用路径和像素检测来扩展 canvas 的二维上下文。您可以在画布上添加内容,然后向其中添加事件监听器—独立于其他元素移动、缩放和旋转它们,以支持动画、交互性和过渡。KinectJS 可以处理许多类型的交互事件,包括鼠标点击、触摸、点击和拖动。凭借其丰富的功能集和较小的文件大小(66 千字节),您肯定会在许多利用 canvas 元素的广告活动中看到这个库。
加工 j
我想介绍另一个库,但它肯定不是市场上不断增长的 canvas JavaScript 库列表中的最后一个。Processing js(processingjs.org)是从 Processing language 发展而来,这是一种基于 Java 的可视化语言,已经在许多故事片中用于创建基于节点的、“网络”和抽象元素。ProcessingJS 的库很强大;它可以创造一些非常引人注目的创造性体验(processingjs.org/exhibition)。我包括这个库是因为它既惊人又沉重——如此沉重以至于我建议不要在广告环境中使用 ProcessingJS 作为代码基础。仅包括库就有惊人的 400 多千字节,更不用说您自己的代码库来处理 canvas 元素了。当您和您的客户使用 canvas 构建体验时,请记住这一点。仅仅因为它看起来很棒,并不意味着你的所有用户都会得到相同的体验,尤其是当文件这么大的时候。
这些库就在那里,大部分都是免费使用的。我提到它们只是为了展示有许多选择,但并不是每一个都适合广告空间。因此,请记住整体用户体验、加载时间和发布者 k-weight 限制。从已定义的发布规范向后工作将允许您选择正确的库,如果您需要走这条路的话。
画布示例
到目前为止,我已经介绍了一些关于 canvas 元素的工作,以及在使用这个新元素时可以加快开发时间的外部 JavaScript 库。你已经看到了它能做什么,它如何帮助你的创意过程,甚至在广告中使用它时的一些限制。在接下来的几节中,我们将介绍如何在不需要第三方插件的情况下使用 canvas 元素。这将允许您快速上手,而不需要依赖外部库。也就是说,如果您确实使用了一个库,那么当您使用它们时,语法无疑会发生变化,所以在深入研究之前,一定要查看 API 文档。
线
广告语在广告活动中一直被使用。它们非常适合呈现路径——地图方向、矢量图,甚至是图表。广告创意中的线条使用案例非常广泛。清单 4-4 展示了如何使用 HTML5 的 canvas 元素呈现一个简单的线条。
清单 4-4 。 用画布渲染一条线
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<canvas id="adCanvas"></canvas>
</body>
<script>
//get a reference to the canvas
var canvas = document.getElementById('adCanvas');
var context = canvas.getContext('2d');
var adWidth = 300;
var adHeight = 250;
canvas.width = adWidth;
canvas.height = adHeight;
context.moveTo(0,0);
context.lineTo(adWidth,0);
context.moveTo(adWidth,0);
context.lineTo(adWidth,adHeight);
context.moveTo(adWidth,adHeight);
context.lineTo(0,adHeight);
context.moveTo(0,adHeight);
context.lineTo(0,0);
context.stroke();
</script>
</html>
这段代码概述了一个动态的方式来添加一个广告边框。首先获取对 canvas 元素的引用,并将其命名为 canvas。接下来,设置一个 2D 绘图上下文,并声明两个变量 adWidth 和 adHeight。这些值将动态地将画布元素更新为所需的尺寸。这个例子使用了普通的广告尺寸 300 × 250。最后,使用 canvas 的绘图 API,通过使用方法 lineTo 和 moveTo 的序列,在整个元素周围移动和添加一条线,这呈现了图 4-2 中的图像。
图 4-2。使用 canvas 元素创建 300 × 250 的边框
如您所见,使用 canvas 元素绘制动态广告边框相当简单。(这非常有用,因为出版商和 IAB 规范要求您在广告周围添加 1 像素的边框。)然而,事情并没有就此结束。试着用线做一下,看看你还能想出什么。请记住,你可以用你的设计工具做的任何事情,你几乎都可以用画布来做,甚至添加贝塞尔曲线和弧线。如果你需要一个起点,从 W3C 学校“尝试”编辑器(w3schools.com/html5/tryit.asp?filename=tryhtml5_canvas_line)开始。
形状
如果你能创造线条,你就能创造形状(这里没什么大惊小怪的!).让我们来看看使用画布创建复杂的形状。成功地将一个绿色正方形渲染到屏幕上,让我们制作一个星形(见清单 4-5 )。为了节省空间,我将省略完整的 HTML 标记,重点放在 JavaScript 部分。
清单 4-5 。 用画布做出星形
<script>
//get a reference to the canvas
var canvas = document.getElementById('adCanvas');
var context = canvas.getContext('2d');
//draw a star
context.save();
context.beginPath();
context.moveTo(92.0, 1.1);
context.lineTo(120.1, 58.1);
context.lineTo(183.0, 67.2);
context.lineTo(137.5, 111.5);
context.lineTo(148.2, 174.1);
context.lineTo(92.0, 144.6);
context.lineTo(35.8, 174.1);
context.lineTo(46.5, 111.5);
context.lineTo(1.1, 67.2);
context.lineTo(63.9, 58.1);
context.lineTo(92.0, 1.1);
context.closePath();
context.fillStyle = 'rgb(255, 255, 0)';
context.fill();
context.stroke();
context.restore();
</script>
您可能已经注意到 canvas 元素的尺寸需要增加到 200 × 200 才能看到完整的星星。如果您试图绘制比画布尺寸支持的更大的东西,请记住这一点,因为您的绘制将渲染元素并产生剪辑。
查看清单 4-5 ,你可以看到同样的方法被用来画线,但是这次在起点和终点的位置上有一点复杂。您还可以看到添加了一个 fillStyle 方法,并在 RGB(红绿蓝)空间中赋予了黄色值。如果你跟着做,你应该会在你的浏览器中看到图 4-3 中的图像。
图 4-3。使用画布元素制作的星星
这看起来很简单,但实际上非常强大。现在,您可以让浏览器完成所有繁重的工作,而不是引入大的位图图形,这会导致最终用户的加载时间更长。请记住,如果它是一个矢量形状,您可以使用 canvas 元素或多或少地重新创建它
梯度
canvas 元素的另一个特性是它使用渐变的能力。渐变对于将形状从一种颜色填充到另一种颜色或者在堆栈中建立多个颜色值非常有用。渐变在网上很多东西都有广泛应用。长久以来,开发人员和设计人员使用 CSS 创建并重复 1 像素宽的渐变条带。现在,有了 canvas 元素的原生渐变支持,浏览器又可以处理繁重的工作了。当客户将 Photoshop 文档交给您时,这一点非常重要,您需要在浏览器中重新创建精确的表示,同时最小化 k 权重。不要从 PSD 中引入位图,而是让画布来处理它。这可能有点耗时,但最终结果是值得等待的。渐变可以是线性或径向或者在 0 和 1 之间有多个颜色停止点。
线性渐变和径向渐变的主要区别在于渐变的起点。图 4-4 显示了它们之间的视觉差异。
图 4-4。线性渐变和径向渐变的区别
清单 4-6 为图 4-3 中的星形制作一个线性渐变填充。
清单 4-6 。 使用画布进行线性渐变填充
<script>
//greenish gradient
var gradient=context.createLinearGradient(0,0,200,50);
gradient.addColorStop(0,"#FFFF00");
gradient.addColorStop(1,"#00FFFF");
context.save();
context.beginPath();
context.moveTo(92.0, 1.1);
context.lineTo(120.1, 58.1);
context.lineTo(183.0, 67.2);
context.lineTo(137.5, 111.5);
context.lineTo(148.2, 174.1);
context.lineTo(92.0, 144.6);
context.lineTo(35.8, 174.1);
context.lineTo(46.5, 111.5);
context.lineTo(1.1, 67.2);
context.lineTo(63.9, 58.1);
context.lineTo(92.0, 1.1);
context.closePath();
context.fillStyle = gradient;
context.fill();
context.stroke();
context.restore();
</script>
即使快速浏览一下加粗的代码也可以发现,制作渐变就像在 2D 上下文对象上调用 createLinearGradient 方法并传递正确的参数一样简单。创建渐变后,通过调用 addColorStop 方法并指定浮点偏移量(0–1)和十六进制格式的颜色值来添加颜色停止点。因此,您可以在 0.2、0.4、0.8 等位置指定一个停止点,以获得完整的粒度和灵活性。最后,将这个新的渐变值添加到星星形状的填充样式中,产生了图 4-5 所示的输出。
图 4-5。创建线性渐变
形象
虽然最好让 canvas 元素处理广告中的图形合成,但有时您无法避免使用位图图像,例如当您与希望展示新产品的零售客户或希望展示最新车型的汽车公司合作时。记住这一点,让我们进入在 HTML5 的画布上处理图像的领域。这样工作的话,开发者可以很容易地在画布上绘制一个图像位图(见清单 4-7 )。
清单 4-7 。 画布位图图像
<script type="text/javascript">
//get a reference to the canvas
var canvas = document.getElementById('adCanvas');
var context = canvas.getContext('2d');
//draw image
var img=new Image();
img.src="test.jpg";
img.onload = function(){
context.drawImage (img,0,0);
};
</script>
正如您在清单脚本中看到的,我创建了一个新的图像对象 img,并将其源指定给 test.jpg(注意,这将随着您使用的图像路径而改变)。一旦图像被加载,它将触发 onload 事件,该事件将执行函数来调用 drawImage 并将图像绘制到画布元素上。
事件
正如您已经意识到的,canvas 元素是 HTML5 中的一个很好的特性,用于将矢量和位图图形呈现到屏幕上。但事情还没完。画布也能反应;它可以处理来自浏览器或用户输入的事件,包括鼠标、触摸和 DOM 事件。清单 4-8 展示了画布如何通过将输出记录到浏览器的 JavaScript 控制台来对许多事件做出反应。
清单 4-8 。?? 使用 Canvas 将日志输出到 JavaScript 控制台
<script type="text/javascript">
//get a reference to the canvas
var canvas = document.getElementById('adCanvas');
var context = canvas.getContext('2d');
//Mouse Events
canvas.addEventListener('click', function(evt){
console.log('Click: ' + evt);
});
canvas.addEventListener("mouseover", function(evt) {
console.log('MouseOver: ' + evt);
});
canvas.addEventListener("mouseout", function(evt) {
console.log('MouseOut: ' + evt);
});
canvas.addEventListener("mousemove", function(evt) {
console.log('MouseMove: ' + evt);
});
//Touch Events
canvas.addEventListener("touchstart", function(evt) {
console.log('TouchStart: ' + evt.touches.length);
});
canvas.addEventListener("touchmove", function(evt) {
evt.preventDefault();
var touch = evt.touches[0];
console.log("Touch x:" + touch.pageX + ", y:" + touch.pageY);
});
canvas.addEventListener("touchend", function(evt) {
console.log('TouchEnd: ' + evt);
});
canvas.addEventListener("touchcancel", function(evt) {
console.log('TouchCancel: ' + evt);
});
</script>
用户输入在鼠标点击和触摸事件时被处理,输出被记录到 JavaScript 控制台。请记住,如果设备支持的话,您可以将它扩展到使用鼠标甚至手指绘画的用户。让用户用 canvas 元素输入可以提供交互性,这是一个很好的特性,可以融入到您的创意中。它可能涉及到在画布上开始或停止动画,甚至与你的广告单元内的游戏互动。在制作需要交互性和用户输入的广告时,请记住这一点。
保存
现在,您已经知道如何通过控制用户输入来提供交互性,让我们尝试将画布上的图像保存到本地驱动器。要将画布存储为图像,请将图像源设置为图像 todataURL。从那里,用户可以将其保存到本地机器。相当酷!尤其是当你想让用户在体验中定制一些东西,并把它带走,或者通过电子邮件或社交网站分享。
注意如果画布上有来自其他域的颜料,toDataURL()方法将抛出一个 SECURITY_ERR 异常。
清单 4-9 展示了如何通过 toDataURL 方法使用 canvas 保存图像格式。
清单 4-9 。 使用画布保存图像
<script type="text/javascript">
//get a reference to the canvas
var canvas = document.getElementById('adCanvas');
var context = canvas.getContext('2d');
var img=new Image();
img.src="test.jpg";
img.onload = function(){
context.drawImage (img,0,0);
};
//Mouse Events
canvas.addEventListener('click', function(evt){
console.log('Click: ' + evt);
// no argument defaults to image/png; image/jpeg, etc. also work on some. image/png is the only one that must be supported per spec.
try {
window.location = canvas.toDataURL("image/png");
} catch (error) {
console.log(error);
}
});
</script>
你现在可以在你的画布容器中保存图像了!如果你正在创建一个交互式广告单元,你想让用户用它来绘画或创作,如果你想让用户能够把它保存到他们的机器上或与另一个 web 服务共享,这是非常有用的。如清单 4-9 中的所示,将图像绘制到画布上,单击鼠标调用方法 toDataURL,将画布保存为默认 mime 类型为 png 的图像。您也可以保存为其他格式,如 jpeg 和 gif,以及通过设置正确的 mime 类型。
动画片
让 canvas 元素处理动画是设计师的另一大优势——尤其是动画师。在浏览器中可以用几种不同的方式处理动画。清单 4-10 展示了符合 HTML5 的浏览器中最合理的方法,requestAnimationFrame 方法。
清单 4-10 。 使用画布制作动画
<script>
var canvas = document.getElementById('adCanvas');
var context = canvas.getContext('2d');
var gradient = context.createLinearGradient(0, 0, 200, 200);
gradient.addColorStop(0, '#000000');
gradient.addColorStop(1, '#999999');
context.fillStyle = gradient;
var x = 0, y = 0;
var shapeWidth = 50, shapeHeight = 50;
var speed = 12;
function animate() {
reqAnimFrame = window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame;
reqAnimFrame(animate);
x += Math.round(speed);
if (x <= 0 || x >= canvas.width - shapeWidth) {
speed = Math.round(−speed);
}
draw();
}
function draw() {
context.clearRect(0, 0, 500, 170);
context.fillRect(x, y, shapeWidth, shapeHeight);
}
animate();
</script>
从清单中可以看出,canvas 元素通过利用 requestAnimationFrame 非常容易地处理动画;它告诉浏览器你正在有意地尝试制作动画。首先,获取 canvas 元素并添加它的 2D 上下文(没有什么新的)。然后添加一些设置变量来控制动画的 x,y,宽度,高度和速度。接下来,设置一个名为 animate 的函数,它在每次请求帧时调用自身,并调用 draw 方法。
注意当函数被附加到一个对象上时,它们被称为方法。
最后,draw 方法中有两个方法,clearRect 和 fillRect,它们负责将正方形清除并绘制到屏幕上。如果您的目标需求包括所有现代 HTML5 浏览器,请记住包括 requestAnimationFrame 的供应商前缀的完整列表(暂时)。
高级画布
从上面的简短示例中,您现在应该对 canvas 元素的功能以及它给 HTML5 规范带来的许多增强有了很好的理解。以下是一些更高级的画布示例,你可以在自己的时间里查看。
- impact js . com
- craftymind.com/factory/html5video/CanvasVideo.html
- 哇。什么. jp/jscloth
- fir.sh/projects/jsnes
- spielzeugz.de/html5/liquid-particles.html
- nihilogic.dk/labs/canvas3dtexture_0.2
- William Malone . com/articles/create-html 5-canvas-JavaScript-drawing-app
在探索新的库和教程时,请记住文件的重量和整体性能,尤其是在观看演示并试图为您的广告创意提供参考时。也要记住,没有人会上网看你的广告,所以尽量避免矫枉过正。通常,最好的方法是给浏览者一个体验,让他们在登陆页面上获得更全面的体验。过于复杂的广告会让用户的机器不堪重负,甚至崩溃,这取决于设备、机器的局限性,甚至是广告发布者。最后,看看html5rocks.com/en/tutorials/canvas/performance关于在网络上最大化你的画布性能的提示,包括复杂图形的画布元素分层和避免不必要的舞台变化。
画布浏览器支持
因为 canvas 元素是 HTML5 规范的一个新兴特性,所以许多旧浏览器不支持它。因此,如果您需要为不支持新元素的浏览器设计,您将需要使用 polyfills 和 shivs。例如,闪存可以作为针对桌面和显示器的完美故障切换。要检测桌面和移动设备对现代浏览器的支持,可以使用一个名为 Modernizr 的库(modernizr.com)。Modernizr 或多或少面向 k-weight 不是主要问题的 web 内容开发。在网络广告中,让你的广告创意包含 Modernizr 可以显著增加 k-weight。弄清楚你的出版商是否包括 Modernizr,以及它是否能为广告提供合适的“挂钩”。如果你能利用它,Modernizr 是一种用于特征检测的中国餐馆菜单;您只需要包含您绝对需要检查的内容,这样可以节省整体 k 重量。在理想的情况下,出版商和广告网络将默认包含这个库,这样广告就可以挂钩到网站内容已经检查过的有用功能。请务必联系您的出版商,了解其页面是否使用 Modernizr,以及广告创意是否可以检测到受支持的功能。清单 4-11 展示了一个为画布使用 Modernizr 的例子,不包括库。
清单 4-11 。 使用 Modernizr 进行画布检测
if (Modernizr.canvas) {
// canvas is supported—do canvas stuff
}else{
//canvas is not supported use Flash or something similar as a failback
}
正如你所看到的,广告设计者可以通过简单地包含一个条件(if/else)语句来非常容易地使用它,如果出版商已经将它包含在他们的网站中。
你可能会问,老的浏览器呢,比如微软的 IE6 到 IE8?他们可以从利用 ExplorerCanvas(excan vas . SourceForge . net)中受益,这是一个用于与不支持新元素的浏览器一起工作的聚合填充。canvas 元素还可以以多种不同的方式使用。将多个元素堆叠在一起形成最终的组合是一种方法,它避免了画布状态的改变。在画布上绘画是一项昂贵的操作,因为一些浏览器在机器的 CPU 上处理所有的处理能力。然而,随着现代浏览器的版本,如 Chrome 版,为 canvas 元素提供硬件加速的 GPU 支持,性能和渲染将大大加快。随着越来越多的浏览器采用这些功能,它们将非常有助于部署到移动设备上,在移动设备上消耗 CPU 会耗尽电池的寿命,最终导致浏览器崩溃。(一个非常好的写在画布上的表现发现在 html5rocks.com/en/tutorials/canvas/performance.)
动画 Gif
你听说过这样一句话吗,“仅仅因为你可以用一种方式做某事并不一定意味着这是最好的方式”?浏览器动画中一个经常被忽视的组件是传统的动画 gif 格式。是的,我知道,这是一种在网络上创建动画的稍微成熟和原始的方法,但它今天仍然有一些吸引力。你可能还记得,在 Flash 广告出现之前,动画 gif 非常流行。还记得第一章中的静态 HTML 或通过简单的 gif 图像制作动画的 HTML 广告吗?动画 gif 可以在必要时快速制作一系列图像的动画,或者如果你不太了解如何在画布上工作(不过,这应该不再是一个问题!).这也是将视频帧转换成图像序列的一个很好的解决方法,这样开发人员可以在 iPhones 和 iPads 以及类似设备上模拟自动播放(苹果禁止自动播放视频,因为它会吞噬客户的数据计划)。此外,动画 gif 在任何地方都被接受,在几乎所有的浏览器上。像 Adobe 的 Photoshop 和 Adobe Fireworks 这样的软件可以非常容易地创建动画 gif,只需做一点工作。一些在线网络服务甚至更简单:
- 吉忍者:吉忍者. com
- Mothereffing 动画 gif:mothereffinganimatedgif.com
您会发现,并不是每种类型的动画都需要 canvas 元素,尤其是因为它是一个新兴的特性。动画 gif 仍然是一个有用和可行的功能;因此,利用它们在创建时的易用性和渲染时的整体文件大小。然而,如果你想用更丰富的动画让你的客户惊叹,你最好使用 canvas 元素。我建议在你承诺一个或另一个功能之前,从出版商或广告网络那里了解活动的目标和要求。谁知道呢,你也许可以很容易地利用这两者,首先用 canvas 进行开发,然后在不支持 HTML5 体验的用户浏览器上优雅地退化为动画 gif 体验。与您的第一和第三方广告服务器合作,提供用户代理检测,并适当地提供创意和标签。要利用 canvas 元素的动画 gif 故障转移,请将动画 gif 图像包装在 canvas 标记中;比如
。对于支持 canvas 的浏览器,inside 元素(在本例中是 img 标签)将被省略;否则,对于不支持 canvas 的浏览器,标签会被识别,并且图像会呈现到屏幕上。
广告中的画布
太好了,您已经了解了使用新 canvas 元素的设计师和开发人员可以使用的所有惊人的功能和增强功能,但是在广告领域,一切是如何进行的呢?嗯,canvas 元素为广告带来了许多新的增强。首先,人们第一次可以直接在浏览器中创建类似 Flash 的图形,而无需使用第三方插件。随着现代浏览器变得无处不在,将会有一套在网络上创建图形的标准。此外,canvas 在移动和平板设备上非常棒;跨制造商、操作系统和浏览器的支持非常强大。移动设备上的浏览器将很快通过图形处理单元(GPU)利用硬件支持来加快渲染速度,并大大减轻 CPU 的负担。Canvas 是在线广告和整个网络的一个巨大的游戏改变者。使用 canvas 元素的活动示例可在以下 URL 中找到:
我期望在不久的将来看到更多的广告设计师和开发者在他们的 HTML5 活动中使用 canvas。简而言之,画布将长期存在。这将是在网络上处理图形的一个习惯元素——但是,请记住,它还在发展中。因此,将它用于活动中的任何动画和图形可能不是最明智的做法,除非您已经准备好了故障转移。
挽救(saving 的简写)
正如您所看到的,canvas 元素非常适合在 HTML5 中创建丰富的图形和动画,但是还有一种已经存在了很长时间的图形语言(自 2003 年以来):SVG。SVG(可缩放矢量图形),现在通过 HTML5 支持内联。(“内联”意味着可以简单地通过在 HTML 标记中添加
我们先来分解一下 SVG 是做什么的。可缩放矢量图形本质上是 XML 标记,它以浏览器可以理解的方式定义了一组笔画、填充和图形指令。在任何大小或缩放水平下,SVG 都可以将艺术清晰地呈现在屏幕上。在广告活动中,保持品牌名称、标志、字体和整体文案的易读性尤为重要。在像素密度不断变化的移动设备生态系统中,SVG 仍然会清晰地呈现在屏幕上,所以无论何时何地都可以使用 SVG。
SVG 强大而简单,因为它是基于矢量的——这意味着笔画和填充是通过坐标在屏幕上以数学方式呈现的。相比之下,位图是以像素为单位渲染的,如果位图没有驻留在整个像素上,则会导致子像素锯齿和羽化或模糊图像的产生。原生 SVG 支持是对 HTML5 规范的重要增强;它允许设计师在 Adobe 的 Illustrator(或任何他们选择的矢量工具)中进行创作,并通过将他们的作品保存为 SVG 文件导出到屏幕上。这种文件格式是 W3C 规范,在各种浏览器中得到广泛支持。SVG 真的很擅长节省 art 的 k-weight 以及它的易读性和整体保真度。参见图 4-6 ,图中显示了百事可乐的标志(来自【brandsoftheworld.com】??)。
图 4-6。百事可乐标志的 SVG 和 IMG 版本
图 4-6 将一个矢量(SVG)版本放置在一个位图(IMG)版本之上。您可以看到 SVG 版本与位图图像一样清晰,无论图像的缩放比例或屏幕上的缩放级别如何,它都会保持清晰,而位图的质量会随着缩放比例的增加而下降。此外,SVG 版本是 8kb,而 IMG 图像是 12kb。这看起来没什么大不了的,但是当你添加更多的图像和更多的颜色值,图形变得更复杂时,你会很快注意到这种方法可以在你的广告中节省大量的文件大小。(你会在 bogotobogo.com/svg.html 的找到更多使用 SVG 的例子。在 HTML5 中发起利用 SVG 的活动之前,记得使用 caniuse.com/svg-html5的来检查浏览器支持。)
拉斐尔 t 0
我想让你注意一个强大的 JavaScript 库,叫做 raphaljs(raphaeljs.com),它可以通过网络上的矢量图形简化你的工作流程。raphaljs 使用 SVG W3C 推荐标准,其中您在它的库中创建的对象也是 DOM 对象;因此,您可以为用户输入或其他事件附加通常的 JavaScript 事件处理程序。raphaljs 也非常跨浏览器友好,如 Firefox 3.0、Safari 3.0、Chrome 5.0、Opera 9.5、IE6.0,以及这些浏览器的所有新版本都支持它。然而,在广告领域,raphaljs 有点大,除非你有空间玩 k-weight。因为它有大约 89 千字节缩小版和超过 200 千字节未缩小版,它可能会让一些出版商倾家荡产。所以在走这条路之前要小心,因为可能很难改变创意或让出版商在规格上让步。
同步化多媒体整合语言(Synchronous Multimedia Integrate Language)
SMIL (同步多媒体集成语言)允许在 SVG 元素中使用动画。根据 Mozilla 开发者网络(【developer.mozilla.org/en/SVG/SVG_animation_with_SMIL】??)的说法,SMIL 提供了动画元素的数字属性、变换属性、颜色属性和运动路径的能力。清单 4-12 展示了如何在 SVG 中利用 SMIL。
清单 4-12 。 利用 SVG 内的 SMIL
<svg width="300px" height="100px">
<rect x="0" y="0" width="300" height="100" fill="white" stroke="white" stroke-width="1" />
<circle cx="0" cy="50" r="50" fill="green" stroke="white" stroke-width="1">
<animate attributeName="cx" from="0" to="300" dur="1s" repeatCount="indefinite" />
</circle>
</svg>
在这个清单中,一个绿色圆圈在 1 秒钟内移动了 300 个像素,这个过程一直重复。如果你看一下加粗的代码行,这很容易实现。在浏览器中测试列表;你会注意到 SVG 动画出奇的快。还有更多的功能可以利用——这个简单的代码只显示 x 值上的动画——所以一定要查看 URL[srufaculty.sru.edu/david.dailey/svg
],了解更多信息并开始尝试。尝试调整颜色,沿着设定的路径制作动画,甚至在制作动画时操纵形状。最后,在利用 SMIL 清单之前,总是使用 caniuse.com/svg-smil 的来检查整体支持。
画布和 SVG
您可能会想,“我有 canvas 元素和 SVG 支持,但是我使用哪一个呢?”从最终用户的角度来看,它们在处理能力上是相似的,但是在技术上有很大的不同。两者都支持布局、渐变、动画、用户输入和遮罩,但一个由 JavaScript API 驱动,另一个由 XML 标记形成。SVG 的一个好处是它可以通过 CSS 进行样式化,因为在文档的标记中有实际的 DOM 元素,而 canvas 只是 DOM 中的一个对象(容器), CSS 样式化是被禁止的,除非你只针对 canvas 元素本身。简而言之,你应该真正利用这两者,这取决于创意的要求和活动的范围。要获得非常详细和全面的文章,请访问 Opera 浏览器的开发者网站(dev . Opera . com/articles/view/SVG-or-canvas-chopping-between the two)。
广告中的 SVG
在 web 标准广告中使用 SVG 是一件大事。多年来,我一直在 Flash 中使用矢量艺术来节省文件大小,这同样适用于现在的浏览器开发。SVG 不仅通过直接在浏览器标记中描述一堆数学坐标来呈现简单和复杂的矢量图形;它在品牌识别、保持图像保真度和字体渲染方面也非常重要(如下一节所述)。此外,SVG 可以通过设计者已经在使用的程序保存。这使得学习曲线更容易应付。SVG 渲染速度很快,正如你所看到的,与 SMIL 动画结合得很好。因此,我强烈建议您在广告活动中使用 SVG,尤其是在图形是强制性的、目标屏幕各不相同以及在 publisher 页面的开发和测试过程中文件大小受到限制的情况下。
网页字体
进入使用 CSS3 的 HTML5 的创造性开发,让我们稍微改变一下思路,了解更多关于使用 CSS3 web 字体将字体渲染到屏幕上的信息。很长一段时间,网络上的字体都很可怕;只有精选的几种“网络安全”字体可用:Arial、Courier、Times、Verdana 等。。。虽然这很好,因为它为最终用户提供了一致的体验,但它严重限制了设计师的创造力。设计师希望在网络上复制他们的印刷创意水平,但他们不能,除非他们将排版设计保存为图像,或者在 Flash 成为广告标准时利用它。保存为图像是一件痛苦的事情—更新并不容易,因为它们经常被制作成图像,并且随着更多的图像文件到达最终用户,导致更长的加载时间。此外,你当然可以用设计好的排版抛弃动态文本内容的可能性。当 Flash 成为标准时,品牌和营销人员爱上了它丰富的字体渲染和用品牌的精确字体提供动态文本的能力。
严格地说,网络字体并不是新的;他们一直处于 CSS 级,但是有限的浏览器采用和分散的供应商支持破坏了他们与设计师合作的能力。在最新的 CSS level 3 spec (CSS3)中,包含 web 字体带来了通过 CSS 渲染任何设计者字体的能力,包括字体的 at-rule 集。清单 4-13 展示了一种在你的 CSS 样式中包含网络字体的可靠方法——具体来说,就是 Oxygen,谷歌免费网络字体库中的一种字体。
清单 4-13 。 使用 CSS3 网页字体(HTML)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href=' [`fonts.googleapis.com/css?family=Oxygen`](http://fonts.googleapis.com/css?family=Oxygen) ' rel='stylesheet' type='text/css'>
<style rel='stylesheet' type='text/css'>
html, body {
font-family: 'Oxygen', sans-serif;
}
</style>
</head>
<body>
</body>
</html>
注意谷歌的开源和免费网络字体列表可以在google.com/webfonts找到。
请注意,我已经链接到了 Google 域名上的外部 CSS 文件。加载后,新的字体系列 Oxygen 可以添加到样式表中,或者作为 HTML 标记中的内联样式。够简单吗?清单 4-14 查看我们链接到的谷歌提供的样式表中发生了什么。
清单 4-14 。 使用 CSS3 网页字体(CSS)
@font-face {
font-family: 'Oxygen';
font-style: normal;
font-weight: 400;
src: local('Oxygen'),url('http://themes.googleusercontent.com/static/fonts/oxygen/v1/←
eAWT4YudG0otf3rlsJD6zOvvDin1pK8aKteLpeZ5c0A.woff') format('woff');
}
当我们链接到 Google 提供的 CSS 文件时,请注意 CSS 语法实际上是为 Oxygen 声明了一个新的字体规则,这样当 font family 属性被分配给 Oxygen 时,文档的其余部分就可以理解它是什么了。在清单中,设置了供浏览器使用的字体系列、字体样式、字体粗细和字体文件的来源。这一部分可能看起来令人困惑,但它实际上只是针对 WOFF 字体文件。这些任意字符是 Google 在服务时生成的,很可能是为了掩盖服务器上的文件名和统计对文件的请求。WOFF 字体文件是分散的 web 字体空间中的许多格式之一(我们将在下面的部分中更详细地介绍)。谷歌服务的好处在于,它能检测到哪个浏览器在请求字体,并为那个特定的浏览器提供合适的格式。
woff〔??〕
从我们刚刚讨论的那个开始,WOFF (web 开放字体格式)字体文件是一个为浏览器提供 web 字体的开发标准。WOFF 文件本质上是 TrueType 文件,经过压缩后可通过 Web 传送,并带有附加的元数据信息。WOFF 格式的总体目标是有一个能被所有浏览器接受的标准,并且足够轻量级,以最小带宽服务于浏览器和设备(如移动设备)。在撰写本文时,Mozilla 的 Firefox 版本 3.6 及更高版本、Google 的 Chrome 版本 5 及更高版本和 Opera 都支持 WOFF 格式;微软的 IE9 也支持它。对于 Apple 和 Safari,从版本 5.1 开始,仅在 Mac OS X Lion 上提供支持。许多人认为,在不久的将来,WOFF 文件将成为 web 字体交付的事实标准。我希望它能让这个空间的碎片化消失。
TrueType Font
TrueType 字体(TTF) 是我将要讨论的最古老的字体格式。TrueType 字体由苹果公司在 20 世纪 80 年代开发,在 OS X 狮子(10.7 版)和 Safari 5.1 版之前,苹果公司的 Safari 浏览器中使用 TrueType 字体。如果您尝试通过在 Safari 浏览器中查看我们的 Oxygen 样式表 URL 来验证这一点,您会从 Google 得到以下响应:
@font-face {
font-family: 'Oxygen';
font-style: normal;
font-weight: 400;
src: local('Oxygen'), url('http://themes.googleusercontent.com/static/fonts/oxygen/v1/ WNVARKadHCfwbQ2n3MQeIOvvDin1pK8aKteLpeZ5c0A.ttf
') format('truetype');
}
谢天谢地,谷歌正在为你做浏览器检测,如你所见,字体空间已经变得相当分散。
嵌入式 OpenType
恰如其分的 web 字体碎片和我们的 Google web 字体例子对于 Oxygen ( 清单 4-14 ),Embedded OpenType(【EOT】)字体文件都是在微软浏览器、Internet Explorer 中使用的。从 IE 浏览器向我们的样式表发出请求将会得到 Google 的如下响应:
@font-face {
font-family: 'Oxygen';
font-style: normal;
font-weight: 400;
src: url('http://themes.googleusercontent.com/static/fonts/oxygen/v1/←
RuRdwqUdkfYP0fpTfyGHiA.eot');
src: local('Oxygen'), url('http://themes.googleusercontent.com/static/fonts/oxygen/v1/←
RuRdwqUdkfYP0fpTfyGHiA.eot') format('embedded-opentype'), url('http://themes.googleusercontent.com/static/fonts/oxygen/v1/←
RzoNiRR1p2Mqyyz2RwqSMw.woff') format('woff');
}
谷歌正在通过向 ie 浏览器提供 EOT 文件来处理浏览器,并通过新采用的 WOFF 格式来处理浏览器。这是一个很好的方式来告诉你,你需要经常根据你的目标受众提供多种字体。
对字体使用 SVG
让我们最后看一下 SVG;特别是将 SVG 文件作为字体字符表。我们仍然依赖 SVG 字体,因为旧版本的 mobile Safari(在 iPhone 和 iPad 上)只接受这种文件格式。但是 SVG 字体并不是你刚刚学到的真正的字体格式;它们只是表示为标准 SVG 元素和属性的字体轮廓的指令。你可能认为包含所有的字形很好,但是如果你只需要 10 个而不是 200 个呢?这是使用 SVG 作为 Web 字体的最大困难之一。EOT 和 WOFF 将压缩嵌入到字体格式中;它允许快速传输和下载时间。然而,就规范的本质而言,SVG 字体是未压缩的,非常大,尤其是对于移动应用。SVG 的另一个问题是,某些字体文件包含关于某些字符如何一起使用的信息。当字体转换为 SVG 时,这些信息会丢失。关于如何布局某些连字、特殊字符、行距和字距调整的重要元数据信息也丢失了。从 Mobile Safari 版本 5 开始,mobile Safari 已经采用了即将成为标准的 WOFF 格式,但是对于 Android 用户,你需要提供 TTF 或 SVG 格式。
字体松鼠
你可能会想,“我必须记住 web 字体的语法,这太可笑了,更不用说如何生成不同的文件格式,以及哪些浏览器支持哪些格式。”我们将我在这里告诉你一个非常好的书签工具是字体松鼠(Font Squirrel for web Font creation)(fontsquirrel.com/fontface/generator)字体松鼠允许开发者上传一个字体文件到他们的用户界面;这项免费的服务会处理到其他格式的转换过程,并为您提供坚如磐石的 CSS 语法,供您在创作中使用。要详细了解 Font Squirrel 是如何生成其代码的,可以看看 Paul Irish 的博客中关于 font face 实现语法的文章(paulirish . com/2009/防弹-字体-面孔-实现-语法)。
使用这项免费服务时,你会发现你试图上传的一些字体会被列入黑名单,禁止转换。您需要具备许可条款才能执行此操作;因此,考虑探索替代途径。这就把我们带到了网络字体许可的话题上。
网络字体许可
虽然网上有许多免费的开源网络字体服务,包括谷歌和 Adobe 的 Typekit,但你可能想知道如何从成熟的字体代工厂获得许可的字体——Helvetica 新、Futura 和 Myriad,仅举几例。网络上有授权字体的付费服务,比如一些来自 Typekit 的 Monotype 和 WebType。这些服务提供了大多数品牌正在使用或可能使用的许多流行字体,使用租赁许可商业模式。它们允许开发人员托管或提供托管,并通过处理浏览器碎片来缓解常见问题。你不应该感到惊讶,购买字体许可证以在某些创意中使用特定字体并不意味着你也可以在网络嵌入中使用它,或@font-face。@font-face 有特定的许可证;它们通常与特定的铸造厂分开销售。在开始一项活动之前,你是你的广告客户,看看他们是否已经为他们的网站购买了字体许可。如果他们有,你很可能会用它来做广告。关于网络字体协议(最终用户许可协议)的更多信息可以在blog.themeforest.net/general/font-licensing-for-the-web找到。
广告中的网络字体
很明显,广告商的营销团队希望你在设计的任何活动中使用品牌的标识和特定的字体系列。随着 Flash 和它使用的字体渲染引擎逐渐成为过去,你将需要使用更新的 web 标准来利用 web 字体。这无疑引起了出版商的一些关注,因为额外字体系列的 k-weight 限制需要修订。正如您所看到的,Oxygen 字体系列可以将所有文件格式的总大小增加 100 千字节左右,并为跨浏览器广告服务提供全部字体。因此,从谷歌那里得到一个提示:根据请求检测用户代理并提供适当的文件是最有意义的,特别是如果用户使用的是蜂窝连接和有限带宽的设备。
由于您希望支持所有各种格式,以实现无缝的跨浏览器体验,因此需要提及的另一件事是,在投入生产环境之前,确保您的广告服务器的 mime 类型能够处理更新的文件格式。也请不要使用像 JavaScript 库 Cufon[cufon.shoqolate.com
这样的解决方案。它们可以渲染 web 字体,但它们会导致可访问性和性能问题,并且由于文件大小增加而需要很长时间来加载。许多讨论都是关于为移动访问者提供网络字体,因为他们的下载成本更高,获得内容的等待时间也更长。即便如此,我认为无论用户在什么设备或屏幕上,广告商和品牌都希望获得一致的体验。因此,是否为移动用户提供特殊的网页字体真的是一个广告客户的电话。然而,你应该向你的客户概述速度与视觉连续性的关系,然后让他们做出决定。在某些情况下,出版商和内容所有者可能不想让步,可能只是对他们的移动广告库存中的任何网络字体说不。当你计划在出版商和广告网络中使用网络字体时,一定要记住这一点。
Firefox 和 Opera 等非 Webkit 浏览器的另一个常见问题是处理 FOUT(非样式文本的闪烁)。这个问题很可能迟早会出现。FOUT 指的是在设置字体样式之前呈现到屏幕上的内容。在 Google 的免费网络服务中,有一个解决这个问题的好办法,就是利用 JavaScript 技术来检测样式何时被加载。如果你没有使用谷歌的服务,你可以隐藏所有屏幕上的文字 2 到 5 秒钟,然后打开它的可见性。Hacky,当然,但是如清单 4-15 所示,它是有效的。
清单 4-15 。 保罗爱尔兰人的 FOUT 剧本
<script>
(function(){
// if firefox 3.5+, hide content till load (or 3 seconds) to prevent FOUT, from paulirish.com
var d = document, e = d.documentElement, s = d.createElement('style');
if (e.style.MozTransform === '' || e.style.OTransform === ''){
s.textContent = 'body{visibility:hidden}';
var r = document.getElementsByTagName('script')[0];
r.parentNode.insertBefore(s, r);
function f(){ s.parentNode && s.parentNode.removeChild(s); }
addEventListener('load',f,false);
setTimeout(f,3000);
}
})();
</script>
请记住,还有供应商特定的 CSS 属性,如 Webkit 字体平滑和易读性优化,这将使您的字体消除锯齿并平滑任何粗糙点。
有关 CSS3 网络字体的更多信息,请参见www.w3.org/TR/css3-webfonts。冒着打死马的风险,再次注意它仍在出现,但采用正在快速增长;所以一定要去 caniuse.com/#feat=fontface 的看看目前支持的浏览器。
摘要
这一章,关于使用 HTML5 canvas 元素,SVG 规范,和使用 web 字体,已经涵盖了很多!我已经为 HTML5 给浏览器带来的强大功能以及开发人员和设计人员现在可以利用的功能做好了准备。您已经看到了代码示例,展示了如何将 canvas 元素用于图形、图像和动画,以及 SVG 和 SMIL 如何提供类似的体验。我们已经讨论了这些方法之间的差异以及每种方法如何在广告领域发挥作用。您还看到了如何在浏览器中创建原生图形,而无需利用第三方插件——这是 HTML5 在 web 标准方面的巨大进步。
在下一章中,将会有更多关于使用 JavaScript 和 CSS3 的图形的讨论,以及关于如何使用网络标准将动画和演示带给你的创意人员。所以如果需要的话就休息一下,因为我们才刚刚开始!
五、动画和演示
正如您所看到的,在浏览器中可以以多种形式处理动画:通过新的 canvas 元素、动画 gif,甚至是使用 SMIL 的 SVG 中的动画。本节将介绍在浏览器中构建动画以及使用 CSS level 3(或 CSS3)创建动画。除了 CSS 动画、变换和过渡,CSS3 带来的所有新的演示和样式都将被详细介绍。随着本章深入 CSS3 的世界,将回顾特性、浏览器支持和需要记住的重要“问题”。一旦你吃饱了,我们将讨论 sprite sheets 的重要主题(它们对设计人员和开发人员的 web 优化产生的巨大影响),更重要的是,访问 Web 的移动设备,这是一项优化文件大小至关重要的技术。
请注意,从本章开始以及本书的其余部分,我将把 CSS 规范第 3 级称为 CSS3。此外,您应该理解 HTML5 不是 CSS3,反之亦然,但是您可能知道 HTML5 正在成为浏览器利用、新的 HTML 标记、更新的 CSS 规范以及新的 JavaScript 和 DOM APIs 中所有新出现的事物的总称。因此,虽然这并不准确,但这两个术语经常互换使用,通常,任何符合 HTML5 的浏览器都会呈现大多数 CSS level 3 特性。尽管 CSS3 在技术上不是 HTML5 规范的一部分,但了解所有新的 web 技术以及它们如何互补仍然是有益的。说了这么多,准备学习什么是 CSS3,它将如何影响你的 web 开发,更具体地说,CSS3 将如何帮助你为支持它的现代浏览器构建广告。
还要注意,下面的内容假设您熟悉基本的 CSS 和 DOM 元素的样式,并且对供应商前缀有所了解,因为它们将在本章中频繁使用。如果你需要复习,去 http://developer.mozilla.org/en-US/learn/cssCSS3 吧。
在我撰写本文时,CSS3 是 W3C 级联样式表标准的最新工作草案。一直处理网页的样式和布局的相同规范已经更新了许多新的补充,这使得一些开发人员在发布的早期挠头。CSS3 不仅处理样式和布局,而且它现在允许处理动画、丰富的效果和内容,甚至 3D,所有这些都在 CSS 排列中。你可以在图 5-1 中看到 CSS3 的新鲜、新的(尽管还是非官方的)标志。
图 5-1。 CSS3 的官方新标志
CSS3 给现代浏览器带来了一个全新的效率世界,你将在本章中听到所有这些。然而,由于到 2012 年末,最终的规范还没有确定,我只能介绍到目前为止已经发布的内容。因此,请务必访问一个非常有用的网站来查看一下这份说明书,css3clickchart.com
。此外,您将了解 Adobe、Apple 和 Google 等公司提交并包含在规范中的特性,这些公司正在做一些了不起的事情。
不过,首先,让我们来看看 CSS3 动画,这是有史以来第一次,你可以在网页的 CSS 中利用关键帧数据,更重要的是,你的网络广告。有了这个更新,最新的浏览器可以本地处理动画,从而提供了另一种在浏览器中制作动画的方式。但是不要太不知所措——你会发现它的优点和缺点,并学习在许多不同的场景中处理动画的理想方法。
浏览器支持
不过,首先,让我们讨论一下使用 CSS3 动画时浏览器支持的普遍问题。目前,由于 CSS3 动画仍处于工作草案状态,浏览器正在以不同的速度采用这些功能。例如,微软刚刚在 Windows 8 的最新版本 10 中采用了它们。来自 http://caniuse.com的图 5-2 中的图表显示了截至 2012 年 11 月对 CSS3 动画的支持。
图 5-2。浏览器支持 CSS3 动画(2012 年 11 月;http://caniuse.com
因此,当你通过 CSS3 开展一项使用动画的活动时,请记住,你的老 IE 或 Opera Mini 上的观众将需要优雅地切换到另一种形式的动画,甚至可能是静态体验。与您的广告服务器合作伙伴合作,将特定的创意瞄准特定的浏览器、浏览器版本和设备,这样您的用户群仍然可以获得某种体验,即使这不是最引人注目的体验。通常,第一方或第三方广告服务器可以做到这一点。
在处理广告和整体浏览器支持时,请记住查看您广告的目标受众的类型。这可能包括各种浏览器、浏览器版本、操作系统和设备。考虑到这一点,一个非常好的名为 CSS3 Maker(css3maker.com
)的 CSS3 生成器能够为您的广告内容生成新的 CSS3 功能,并检查当前浏览器对该给定功能的支持。图 5-3 显示了截至 2012 年 11 月 CSS3 中的一些支持。
图 5-3。浏览器支持 CSS3 特性(2012 年 11 月;http://html5rocks.com/en/features/presentation
要获得最新的信息,你可以随时去w3.org/Style/CSS/current-work
查看 W3C 关于 CSS level 3 规范的最新工作和工作组讨论,并且像往常一样,在使用你的用户的浏览器可能不支持的功能之前,快速参考书签caniuse.com
。
注意如果你绝对需要通过 IE9 浏览器在 IE6 上锁定目标用户,而一个客户坚持使用 CSS3 的特性,那么访问
css3pie.com
,或者让客户下载谷歌的 Chrome 框架www.google.com/chromeframe。无论在哪种情况下,它都会帮到你。
CSS3 动画
如前所述,CSS3 动画是草案的全新补充。随着该规范的最新更新,浏览器供应商正在通过 CSS 支持动画,W3C 甚至符合更新(大部分),使其很快成为浏览器中的标准。
这个 CSS 模块为作者描述了一种方法,通过使用关键帧,使 CSS 属性的值随时间变化而变化。这些关键帧动画的行为可以通过指定它们的持续时间、重复次数和重复行为来控制。
w3 . org/tr/CSS 3 动画
这是一件大事。在 CSS3 动画出现之前,你需要使用 gif 动画、Flash 等第三方插件或者昂贵的 JavaScript 命令来制作动画。这显然是在我们刚刚在画布和 SVG 动画中所涉及的内容之前。在大多数情况下,动画越复杂和健壮,用户处理和渲染动画就越费力。现在有了 CSS3,动画可以卸载到用户机器或设备的 GPU 上,这种方法为浏览器中的动画提供了一种更加流畅和无缝的方法。这太令人兴奋了!
让我们来看看 CSS3 中的新动画属性,你今天可以利用它们(见表 5-1 )。
表 5-1。 CSS3 动画属性
财产 | 使用 |
---|---|
动画延迟 | 定义动画开始的时间。 |
动画方向 | 定义动画是否应该在交替循环中反向播放。 |
动画-时长 | 定义动画完成一个循环需要多少秒或毫秒。 |
动画填充模式 | 指定 CSS 动画在执行之前和之后应该如何将样式应用于其目标。 |
动画-迭代-计数 | 定义动画应该播放的次数。 |
动画名称 | 指定@关键帧动画的名称。 |
动画-播放-状态 | 指定动画是正在运行还是暂停。 |
动画-计时-功能 | 指定动画的速度曲线。 |
当在 CSS3 兼容浏览器中使用时,所有这些属性构成了浏览器要处理的动画的定义。让我们来看一个例子,您可能想在下一次营销活动或未来的某个时间使用它。让我们称这个动画为“glow”并密切注意厂商前缀(见清单 5-1 )。
清单 5-1。 CSS3 发光动画
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
#square {
-webkit-animation-name: glow;
-moz-animation-name: glow;
-ms-animation-name: glow;
-o-animation-name: glow;
animation-name: glow;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 15;
-moz-animation-iteration-count: 15;
-ms-animation-iteration-count: 15;
-o-animation-iteration-count: 15;
animation-iteration-count: 15;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-ms-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-ms-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
}
@keyframes "glow" {
0% {
-webkit-box-shadow: 0px 0px 0px #999999;
box-shadow: 0px 0px 0px #999999;
}
50% {
-webkit-box-shadow: 5px 5px 15px #ffffff;
box-shadow: 5px 5px 15px #ffffff;
}
100% {
-webkit-box-shadow: 0px 0px 0px #999999;
box-shadow: 0px 0px 0px #999999;
}
}
@-moz-keyframes glow {
0% {
box-shadow: 0px 0px 0px #999999;
}
50% {
box-shadow: 5px 5px 15px #ffffff;
}
100% {
box-shadow: 0px 0px 0px #999999;
}
}
@-webkit-keyframes "glow" {
0% {
-webkit-box-shadow: 0px 0px 0px #999999;
box-shadow: 0px 0px 0px #999999;
}
50% {
-webkit-box-shadow: 5px 5px 15px #ffffff;
box-shadow: 5px 5px 15px #ffffff;
}
100% {
-webkit-box-shadow: 0px 0px 0px #999999;
box-shadow: 0px 0px 0px #999999;
}
}
@-ms-keyframes "glow" {
0% {
box-shadow: 0px 0px 0px #999999;
}
50% {
box-shadow: 5px 5px 15px #ffffff;
}
100% {
box-shadow: 0px 0px 0px #999999;
}
}
@-o-keyframes "glow" {
0% {
box-shadow: 0px 0px 0px #999999;
}
50% {
box-shadow: 5px 5px 15px #ffffff;
}
100% {
box-shadow: 0px 0px 0px #999999;
}
}
</style>
</head>
<body>
<div id=square></div>
</body>
</html>
如果您正在跟进,不要害怕 CSS3 中新的关键帧块。这个例子使用 CSS 中的 box-shadow 属性,通过使用关键帧的 percent 方法,对 DOM 中的 square 元素应用发光动画。该动画甚至符合 publisher 动画规范,因为它只有 15 秒长,您可以通过查看动画迭代计数来了解这一点。正如你所看到的,这是相当冗长的,只是为了完成一些相当简单的事情,所以请记住,CSS 也有一种速记的方式来编写动画的属性。下面是如何使用速记技术编写 glow 示例。
#square {
-webkit-animation: glow 1s 15s alternate forwards ease-in-out;
-moz-animation: glow 1s 15s alternate forwards ease-in-out;
-ms-animation: glow 1s 15s alternate forwards ease-in-out;
-o-animation: glow 1s 15s alternate forwards ease-in-out;
animation: glow 1s 15s alternate forwards ease-in-out;
}
我想你会同意这种技术在手指上要容易得多。显然,您仍然需要定义什么是“发光”,使用关键帧来激活方形元素。此外,请记住,我们使用了所有必要的供应商前缀,以允许这种效果跨浏览器运行。这可能会减少,取决于您的活动的需求和您的目标受众的浏览器。
注意把你所有的动画关键帧定义放在一个单独的样式表上是个好主意。这样,它就不会弄乱你的主样式表,并保持风格与核心布局的分离。
至于动画属性,方向取两个不同的值,正常和交替。计时函数采用几个不同的值,缓动、缓出、缓入、缓出、线性和三次贝塞尔(x1,y1,x2,y2),这允许自定义计时函数(使用三次贝塞尔时,一个非常好的 web 工具是cubic-bezier.com
)。填充模式的值为向前、向后、两者或无。Delay 是动画开始前的时间偏移量,在上面的例子中,它将在 DOM 加载后 2 秒开始。最后,play state 属性确定动画是正在运行还是暂停,这对于通过 JavaScript 检测动画是否正在运行非常有用。利用所有这些优势,您将能够创建一个非常可信和真实的动画,您可能会记得在广告中使用 Flash。
注意属性的速记顺序无关紧要,除非同时使用持续时间和延迟时间,它们需要按顺序排列,持续时间比延迟时间优先。
现在已经介绍了基于 CSS 的动画的基础知识,让我们看看如何在 CSS 中使用@keyframes 规则并使用这些新属性。如上所示,我们的第一个例子涉及百分比。清单 5-2 使用来自的单词和到来声明我们的关键帧事件。
清单 5-2。 CSS3 关键帧示例
<!DOCTYPE HTML>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
#square {
width:100px;
height:100px;
background:black;
-webkit-animation:spin 5s; /* Safari and Chrome */
-moz-animation:spin 5s; /* Firefox */
-ms-animation:spin 5s; /* IE */
-o-animation:spin 5s; /* Opera */
animation:spin 5s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-ms-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
@keyframes spin {
from {
background:black;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
} to {
background:yellow;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes spin {/* Firefox */
from {
background:black;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
} to {
background:yellow;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes spin {/* Safari and Chrome */
from {
background:black;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
} to {
background:yellow;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes spin {/* Opera */
from {
background:black;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
} to {
background:yellow;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id='square'></div>
</body>
</html>
好了,我们来分解一下这个例子。首先,让我们设置 HTML 文档,然后通过编写#square {,包含一些 CSS 来指向 ID 为“square”的 div。。。};没什么新鲜的。现在给正方形一个黑色的背景色,宽度和高度为 50 像素。最后也是最重要的,制作一个名为“spin ”的动画,时长 15 秒,重复“无限”。现在,使用 CSS3,通过@keyframes 规则声明旋转动画。在规则内,通过动画显示正方形并将其旋转 360 度来定义其起点(“from”)和终点(“to”)。(我包括了必要的前缀,因为我在所有浏览器上工作,但是请记住,最终的规范将不包括前缀。然而,为了向后兼容,浏览器可能仍然支持它,这样将来就不会出现代码中断。)最后,在你的浏览器里打开这个——就这样!这是非常惊人的东西,仅仅使用直接的 CSS。
使用 CSS 动画时,有一些事情需要注意。首先,它们不能堆叠,也就是说,你不能让一个名为“wiggle”的动画和一个名为“spin”的动画同时使用。只有最后应用的动画,在本例中是“spin”,将被应用到你的目标 DOM 对象上(注意,随着规范的最终确定,这很可能会改变,但是在撰写本文时,它在我测试过的浏览器中是这样的)。此外,当使用 CSS3 动画时,您可能会注意到在应用动画和动画结束时屏幕会有轻微的闪烁。这是浏览器利用机器的 GPU 来处理动画。如果你问我,我会说这是一个 bug,它需要一个巧妙的解决方法。最有效的方法是对变换应用 z 索引,即使你不打算在(3D) z 空间制作动画。包含 z 轴属性最初启用硬件加速 (GPU),并消除动画出现时的屏幕闪烁。(如果你对“癫痫效应”感兴趣,这对你没多大关系,尽管你的客户可能会要求去掉它。)
最后,请记住,W3C 的规范很可能比浏览器实际支持的要有限得多。苹果、Mozilla、谷歌和其他厂商支持各种功能,这些功能可能不会成为 W3C 的决定,但它们仍然很有趣,尤其是在创建 3D 和有趣的视差效果方面。然而,我提醒你要了解你的用户群——你的活动是为谁开发和部署的?这应该决定你在下一次活动中应该和不应该使用什么功能集。
供应商前缀
正如在第三章中所讨论的,为了使用浏览器最新最棒的 CSS3 特性,厂商前缀就是你的通行证。动画前缀没有什么不同:仍然需要明确的方法来调用浏览器的渲染引擎。把它们想象成自己的 API 来指导浏览器制作动画——因为这就是它们。可以预见,开发人员和设计人员对供应商前缀又爱又恨。一方面,它们允许使用最新和新兴的技术;另一方面,如果浏览器制造商在最终的 CSS 规范中放弃他们自己的前缀,它们会带来冗长语句的代价。如果发生这种情况,网络会变得非常丑陋!理解一个厂商前缀的属性是 CSS 规范的一部分还是最终将成为它的一部分可能是一个挑战,因为一些厂商甚至没有提交他们所有的(特定于浏览器的)属性用于 W3C 标准化。在某些情况下,你会发现网站只使用-webkit 前缀,尤其是在移动设备中,即使 Opera、IE 和 Firefox 都有移动版本的浏览器。说了这么多,让我们回顾一下清单 5-3 中的一些厂商前缀,并看看 CSS 中径向渐变类的前缀。
清单 5-3。 CSS3 厂商前缀示例
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
#square {
width:500px;
height:500px;
}
.radial-gradient {
background: -webkit-radial-gradient(10% 10%, yellow, black);
background: -moz-radial-gradient(10% 10%, yellow, black);
background: -o-radial-gradient(10% 10%, yellow, black);
background: -ms-radial-gradient(10% 10%, yellow, black);
background: radial-gradient(10% 10%, yellow, black);
}
</style>
</head>
<body>
<div id='square' class='radial-gradient'></div>
</body>
</html>
神圣的重复!如果你是一名开发人员或程序员,不得不一遍又一遍地做任何事情是你可以做得更好的明显标志。这个例子给出了设计者和开发者在使用新兴功能创建跨浏览器体验时所面临的操作负载的概念——在这种情况下,新兴是在 iPhone 和 iPad 等设备上渗透的一个要求。平时听到“运营规模”和“新兴”用在同一句话里,我都会笑。现在你也可以了!
广告行业的一个常见困境是,许多客户希望使用最新、最棒的可用功能,但他们不明白开发这些功能需要什么,也不明白为什么要花这么长时间来完成对他们来说相当简单的事情。在这个简单的渐变例子中,如果实现了标准化,需要的代码量是原来的四倍。由于我们的代码现在是原来的四倍大,从服务器下载更多的字节也会被吃掉。另外,当需要进行更新时,我们现在必须在五个不同的地方进行更新,以达到相同的效果。随着代码的增长,它会很快让人筋疲力尽。
这个话题引起了整个行业的极大关注;2012 年 4 月甚至有过一次讨论,W3C 和 Opera 质疑是否将 webkit 前缀作为标准加入。本质上,Opera 将在浏览器引擎中采用 Webkit 命令,以适应大多数程序员省略特定前缀的懒惰。在我看来,这违背了 W3C 所代表的一切——在 CSS 领域,应该创建一个独立于供应商的标准来消除对任何和所有前缀的需要,从而创建真正的浏览器互操作性。将 Webkit 作为一个标准并让其他浏览器制造商采用它,这根本不是在创造一个标准;它创造了与流行的东西的一致性,并且由于开发人员的懒惰而被最普遍地使用。关于这个话题的好文章可以在www.sitepoint.com/opera-css3-webkit-prefix
找到。
无前缀前进
开发人员的普遍共识似乎是,head 的方法是根本没有前缀。随着这些新特性在开放网络中变得标准化,跨浏览器调用这些新特性的能力是需要的,也应该发生。CSS3 规范中的一些新特性目前已经基本完成,处于采用过程中的“候选推荐”阶段。这意味着其中一些根本不需要前缀,因为浏览器开始支持无前缀。这些属性中的一些在表 5-2 中列出。
表 5-2 。CSS 无前缀属性
财产 | 使用 |
---|---|
边框半径 | 用于圆化 DOM 对象的边框。 |
箱形阴影 | 用于给 DOM 对象添加阴影效果。 |
颜色 (RGBA) | 允许通过 RGB 和 alpha(透明度)设置来定义颜色。 |
颜色(HSLA) | 允许以 HSL(色调、饱和度和亮度)或 HSLA 格式(色调、饱和度、亮度和 alpha)定义颜色。 |
媒体查询 | 根据媒体类型(印刷品、屏幕等)为浏览器提供样式。)和媒体条件(屏幕大小、肖像、风景等)。). |
多重背景 | 允许在单个元素上放置多个背景图像。 |
不透明 | 允许将透明度设置应用于元素及其所有子元素。 |
这实际上是需要前缀的新兴特性。然而,如你所知,网络发展非常迅速;因此,请继续查看今天可以投入使用的功能。网站上也有一些非常好的工具,任何开发人员或设计人员都可以使用它们来消除编写 CSS3 时的猜测。一个这样的工具是无前缀的(leaverou.github.com/prefixfree
)。Prefix Free 是一个包含在文档中的 JavaScript 文件,它将当前浏览器的前缀添加到任何 CSS 代码中,但仅在需要时应用它。最小的代码膨胀!它的小文件大小(只有 8 千字节)使它特别适合做广告。但是,它有一些限制,所以在生产活动中实现它之前,一定要在网站上仔细阅读。另一个有用的工具是 Prefixr(【http://prefixr.com】??)。你粘贴你的 CSS 语法,然后按下按钮,WHALAA!它允许您更新您的 CSS,以包含跨浏览器部署可能需要的所有供应商前缀。
JavaScript 动画与 CSS3 动画
在上一章学习了一些 JavaScript 和 canvas 元素动画之后,您很可能想知道 JavaScript 和 CSS3 动画之间的区别是什么?事实上,两者都有利弊;查看您的活动的最终目标和要求,以确定使用哪种方法。然而,我可以提供一些信息让你开始。首先,JavaScript 是一种解释型语言。JS 动画依靠浏览器的 JavaScript 引擎在运行时解释、解析和执行指令。另一方面,浏览器可以在浏览器的底层代码库(引擎)中本地实现 CSS3 动画。通常用 C、C++或类似的语言编写,这些代码被编译成机器语言,所以它总是存在、发布和安装在浏览器中。这使得 CSS3 通常可以进行硬件加速,并卸载到机器的 GPU 上进行动画等密集型操作,这使得用户可以在 iOS Safari 或 Android 的原生浏览器等移动浏览器上获得更好的体验。
在这两者之间,许多开发人员会认为这归结于易用性、可扩展性、支持和整体性能的某种组合。如果您需要针对较旧的浏览器,JavaScript 是明显的赢家。如果你只关心主观易用性、现代网络和硬件支持,CSS3 是一个可行的解决方案。此外,记住 JavaScript 在新的浏览器引擎上速度惊人!作为广告界的一名开发人员,优化和性能就是一切,您最终应该利用这两者,同时考虑活动和目标受众的需求。在一天结束的时候,有很多方法可以完成一些事情。知道一种做事情的方法并不意味着它在任何时候、任何情况下都是最好的方法。了解谁是你的目标受众,以及他们使用的主要浏览器。这可能涉及到出版商方面的一些浏览器统计调查,以找出他们的用户的主要用户群是什么。
如果你还没有使用 http://stackoverflow.com,我强烈建议你熟悉一下它。如果你有关于这个或其他话题的问题,很可能你不会是第一个问的人。
最后,我不能执行所有已知的测试来找出哪种动画技术在你的特定场景中更好。我想授权你自己去测试;作为回报,用一个非常棒的工具:jsperf.com
记录你的测试,为开发者社区做点贡献。如果您需要重新创建 bug 或测试脚本中多种执行方式之间的差异,请熟悉使用这种方法。
requestAnimationFrame、setInterval 和 setTimeout?
让我们来谈谈通过 JavaScript 驱动动画的代码。传统上,在 requestAnimationFrame 可用于支持 IE10、Firefox 4、Chrome 10、Safari 6 和其他现代浏览器之前,动画是通过调用 setInterval 或 setTimeout 来实现的。通过重复调用这些 JavaScript 方法之一,浏览器会一遍又一遍地执行命令,通常直到满足某个条件并停止动画。如果出于某种原因它从未停止,浏览器将永远执行脚本,并最终崩溃或冻结(这种情况有时仍会发生在编写得很差的脚本中)。然而,由于 requestAnimationFrame 是由 Mozilla 引入并由 Webkit 重复的,所以目标很简单:提供一个本地 API 来完全控制浏览器中的动画。无论是 DOM 元素、CSS、基于画布,甚至是 WebGL(在第十二章中会有更多关于 WebGL 的内容),浏览器都会在一个动画阶段处理和优化任何动画,从而提高整体动画质量。如果你的动画在一个不可见的标签中循环播放——比如说,你的广告的动画,而用户没有看到广告——浏览器不会让它继续运行,也不会占用系统资源。出版商应该会喜欢这一点——这意味着可以分配更少的资源和更少的内存使用,最终导致更长的电池寿命,尤其是对支持新方法的移动设备而言。我觉得微软的开发者中心解释得很完美:
msRequestAnimationFrame 方法通过考虑 web 应用的可见性和显示器的刷新率来确定每秒分配给动画的帧数,从而提供流畅的动画和最佳的能效。msRequestAnimationFrame 是调度非声明性脚本动画的一种非常有效的方法,应该用来代替 setTimeout 和 setInterval。
msdn.microsoft.com/en-us/library/windows/apps/hh453391.aspx
因此,如果你正在为现代浏览器制作动画,停止使用 JavaScript 中的 setInterval 或 setTimeout,并学会利用 requestAnimationFrame。否则,尽可能在支持的地方使用基于 CSS3 的动画。学习和使用这两者将会节省时间并减少麻烦,特别是当你由于出版商回扣或从创意代理处获得素材而不得不进行优化或调试时。
CSS3 与 Flash
你所要做的就是通读声称 Flash 已死的网络文章,不久你就会感受到网络上的疯狂。暴民尖叫,“HTML5 万岁!”回到现实,我在这里不是为了选择立场,甚至不是为了深入讨论这个琐碎的话题。这不是这本书的内容,我也不想在这本书上浪费你的时间。简单地说,这两种技术各有利弊,但有一点是肯定的:HTML5、CSS3 和 JavaScript 将会继续存在,所以不管你是否选择使用它们,你都应该学习它们。在我看来,Flash 仍然是一个令人惊叹的平台,并且在最新的 web 标准上已经有很多年了。
然而,CSS3 特别是其对新兴浏览器的动画特性,展示了 web 标准将如何很快成为未来的标准。Sencha 的博客上有一个很好的并排对比,展示了两个相同的广告,一个用 CSS3 制作,一个用 Flash 制作,是如何配对的(dev.sencha.com/deploy/css3-ads
)。改进是必要的,但初步看来,它们非常接近,这表明无插件但丰富的网络就在眼前。不明显的是,这个例子还展示了更广泛的东西:CSS3 广告与 Flash 广告存在于同一个领域,我认为这是 web 广告在一段时间内的发展方向:Flash 和 web 标准(HTML5/CSS3/JS)的结合和谐共存。(提示励志音乐。。。)
我想到的一件事是文件大小。我制作网络广告已经有一段时间了,并且知道出版商对文件大小规格有严格的控制,我有几个问题想得到解答。
- HTML/CSS/JavaScript 广告应该有多少 k-weight?
- 能否按顺序控制素材和外部文件的加载?
- 分析和测量会受到怎样的影响?
- 如果一次将多个单元加载到页面上,性能和用户体验会发生什么变化?
随着客户希望将 HTML5 用于 reach,这些问题越来越频繁地出现,事实上,在规范制定、测试和采用之前,没有什么灵丹妙药。使用 Flash 播放器的广告不是一夜之间就被采用的,那么这有什么不同呢?不过,有一点是肯定的:出版商、代理商和广告服务平台,以及 IAB,需要在这些紧迫问题成为整个行业非常明显和普遍的问题之前,制定并商定一套标准来解决它们。幸运的是,有一个活跃的工作组致力于这项倡议和许多其他推动我们行业的倡议。您可以通过访问了解有关这些功能的更多信息。iab.net/member_center/committees
。
CSS3 演示和风格
现在我已经介绍了很多关于 CSS3 动画以及它们如何在空间中发挥作用的内容,这一节将回顾现代 Web 中新的 CSS3 演示增强功能。传统上,CSS 代表布局和风格,但随着最新功能的出现——阴影、变换和渐变——CSS 可以比以往做更多的事情。已经介绍了一些新的选择器、伪类、web 字体和动画,让我们深入研究一下 CSS 的传统表示和样式的其他增强。
方框阴影
CSS3 框阴影是一个新特性,几乎是为 W3C 最终版本和支持浏览器供应商而设置的。框阴影允许对图像、画布或 div 元素等 DOM 对象应用平滑的阴影效果。清单 5-4 展示了一个在广告中工作的盒子阴影。
清单 5-4。 框影广告举例
<style>
#ad {
position: absolute;
width: 300px;
height: 250px;
background-color: white;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 1);
}</style>
如您所见,这只是您习惯的常规 CSS 语法,做了一些更新以获得新的浏览器效果。假设我们的 ad 元素具有 ad 的 ID,这个 CSS 块将在发布者页面上为我们的广告应用一个漂亮的投影。这个列表会产生如图 5-4 所示的效果。
图 5-4。使用 CSS3 的带有框阴影的广告容器
正如你所看到的,一些非常简单的 CSS 可以为我们的广告目录在发布者页面上的位置应用漂亮的阴影。框阴影属性使用两个必需的参数,水平阴影位置和垂直阴影位置,后面是四个可选参数,模糊(我们设置为 20 像素)、扩散、颜色和插入。
注意颜色可以使用十六进制、RGBA 或 HSLA 颜色值作为框阴影属性。
多重背景
基于你在清单 5-4 中看到的,多重背景是一个新特性,它允许设计师将多重背景图像应用于一个元素。如果您想从两个独立的图像源创建一个复杂的广告背景图像,这可能会很有帮助。事实上,让我们在构建广告背景时尝试这样做(见清单 5-5 )。
清单 5-5。 多重背景举例
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
#ad {
position: absolute;
width: 300px;
height: 250px;
background-color: white;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 1);
/*
top level icon (x,y,repeat)
bottom level background (x,y,repeat)
*/
background:
url(logo.png) 20px 10px no-repeat,
url(300x250Bg.jpg) 0px 0px no-repeat;
}
</style>
</head>
<body>
<div id='ad'></div>
</body>
</html>
如果您添加前面的代码并刷新浏览器,您将会看到该示例在两个单独的图像中加载到 div 元素 ad 的背景属性中(参见图 5-5 )。注意参数是 URL,X,Y 和 repeat。
图 5-5。使用 CSS3 的多背景广告背景
通过 CSS 调用 background 属性提供了一个以逗号分隔的 URL 位置图像资源列表。图像的顺序很重要,所以首先添加顶层素材,最后添加底层素材。
文本阴影
让我们通过添加行动号召(CTA)为我们的广告单元添加一些文案。但是我们也给 CTA 添加一个阴影。文本阴影与框阴影非常相似,只是文本阴影只能应用于字体。让我们看看如何处理文本阴影(见清单 5-6 )。
清单 5-6。 文字阴影举例
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
#ad {
position: absolute;
width: 300px;
height: 250px;
background-color: white;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 1);
background:
url(logo.png) 20px 10px no-repeat,
url(300x250Bg.jpg) 0px 0px no-repeat;
}
#cta {
position: absolute;
top: 210px;
left: 190px;
color: white;
font-family: Verdana;
font-size: 16px;
cursor: pointer;
text-shadow: 0px 0px 5px #000000;
}
</style>
</head>
<body>
<div id=ad>
<section>
<div id=cta>Click Here</div>
</section>
</div>
</body>
</html>
添加更新的代码并刷新您的浏览器,您将在我们的广告中看到文本阴影的示例(参见图 5-6 )。
图 5-6。使用 CSS3 中文本阴影属性的 CTA 广告
虽然投影可能很难看到,但在副本上添加它可以让用户通过将它从背景中分离出来,更清楚地查看重要信息。在 CTA 这种重要的广告文案上使用投影时尤其如此。text shadow 属性的语法与 box-shadow 属性的语法相同,但它仅适用于字体。它还允许在浏览器中添加这种效果,而不必使用应用了投影效果的图像。
注意一个文本阴影也可以应用到网页字体上(参见第四章)。
边框半径
该规范的另一个几乎最终确定的特性是边框半径,这可能是早期 CSS3 的特性之一,让所有的设计师都为之雀跃。他们呼吁这种效果很久了,原因是在 border radius 之前,设计师需要通过 Photoshop 导出圆角图像,并将其加载到页面中。这种软件开发起来很耗时,而且下载到用户机器上的成本也很高。现在不需要 Photoshop,我们可以让浏览器来处理繁重的工作。让我们给我们的广告例子添加一些圆角边框(见清单 5-7 )。
清单 5-7。 边框半径示例
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
#ad {
position: absolute;
width: 300px;
height: 250px;
background-color: white;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 1);
background:
url(logo.png) 20px 10px no-repeat,
url(300x250Bg.jpg) 0px 0px no-repeat;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#cta {
position: absolute;
top: 210px;
left: 190px;
color: white;
font-family: Verdana;
font-size: 16px;
cursor: pointer;
text-shadow: 0px 0px 5px #000000;
}
</style>
</head>
<body>
<div id=ad>
<section>
<div id=cta>Click Here</div>
</section>
</div>
</body>
</html>
添加边框半径的 CSS 属性(在清单 5-7 中以粗体显示)并刷新您的浏览器将为我们的广告元素添加一个 10 像素的圆角。边框半径语法相当简单:您所需要做的就是向它传递一个想要舍入的值(以像素为单位)。你可以在图 5-7 中看到效果。
图 5-7。我们使用 CSS3 的圆形边框广告
注意边框半径可以独立调整,而不是四个角同时调整。如果你的客户是 CVS 药房(www.cvs.com),这可能会有所帮助。
梯度
CSS3 现在提供了渐变,这是该规范的另一个特性,允许设计人员删除图像,并利用浏览器的图形。正如您在 canvas 元素中学习的那样,它允许通过 JavaScript 定义线性或径向颜色渐变。现在有了我们的 CSS 语法,我们可以在不接触脚本文件的情况下做类似的事情。让我们通过使我们的 CTA 更像一个有风格的按钮来给我们的广告例子添加一个渐变(见清单 5-8 )。
清单 5-8。 渐变 CSS3 示例
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
* {
font-family: Verdana;
}
#ad {
position: absolute;
left: 30px;
top: 30px;
width: 300px;
height: 250px;
background-color: white;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 1);
background:
url(logo.png) 20px 10px no-repeat,
url(300x250Bg.jpg) 0px 0px no-repeat;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#cta {
position: absolute;
top: 190px;
left: 160px;
color: white;
font-size: 16px;
cursor: pointer;
text-shadow: 0px 0px 5px #000000;
}
.button {
font-size: 16px;
color: white;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#e3e3e3 0%,
#545454);
background: -webkit-gradient(
linear, left top, left bottom,
from(#e3e3e3),
to(#545454));
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 10px;
border: 1px solid #000000;
-moz-box-shadow:
0px 1px 3px rgba(0,0,0,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
-webkit-box-shadow:
0px 1px 3px rgba(0,0,0,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
box-shadow:
0px 1px 3px rgba(0,0,0,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
text-shadow:
0px -1px 0px rgba(000,000,000,0.4),
0px 1px 0px rgba(255,255,255,0.3);
}
</style>
</head>
<body>
<div id=ad>
<section>
<div id=ctaclass=button>Click Here</div>
</section>
</div>
</body>
</html>
如果你已经跟随了,刷新你的浏览器,你会注意到结果(见图 5-8 )。
图 5-8。我们的广告带有一个性感的 CTA 按钮,使用 CSS 渐变和圆形边框
使用 CSS 添加渐变是利用浏览器构建光滑按钮或复杂背景的好方法,而不是使用传统的图像方法。对终端用户来说也更容易,因为它不会消耗掉 k-weight,也不会因为另一次下载而向用户征税,这两者在广告界都是巨大的收益。我自己经常使用的一个工具是在colorzilla.com/gradient-editor
,特别是因为它易于使用,添加了所有的厂商前缀,并通过过滤器属性提供了旧的微软浏览器支持。
过渡
CSS3 Transitions 模块提供了一个很好的方法来为某些元素添加过渡属性。过渡可以应用于背景、颜色、高度、宽度和其他特定属性,或者可以使用特殊的“all”关键字将过渡应用于元素上的所有属性。过渡允许广告体验扩展和收缩,创建一个标志性的富媒体扩展效果。清单 5-9 展示了当用户点击 CTA 时,如何转换广告容器以扩展 500 像素(让我们也添加一点 JavaScript)。
清单 5-9。 CSS 转场示例
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
* {
font-family: Verdana;
}
#ad {
position: absolute;
left: 30px;
top: 30px;
width: 300px;
height: 250px;
background-color: white;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 1);
background:
url(logo.png) 20px 10px no-repeat,
url(300x250Bg.jpg) 0px 0px repeat;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#cta {
position: absolute;
top: 190px;
left: 160px;
color: white;
font-size: 16px;
cursor: pointer;
text-shadow: 0px 0px 5px #000000;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.button {
font-size: 16px;
color: white;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#e3e3e3 0%,
#545454);
background: -webkit-gradient(
linear, left top, left bottom,
from(#e3e3e3),
to(#545454));
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 10px;
border: 1px solid #000000;
-moz-box-shadow:
0px 1px 3px rgba(0,0,0,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
-webkit-box-shadow:
0px 1px 3px rgba(0,0,0,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
box-shadow:
0px 1px 3px rgba(0,0,0,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
text-shadow:
0px -1px 0px rgba(000,000,000,0.4),
0px 1px 0px rgba(255,255,255,0.3);
}
#close {
position: absolute;
top: 10px;
left: 480px;
opacity: 0;
cursor: pointer;
color: white;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
</style>
</head>
<body>
<div id=ad>
<section>
<div id=close>X</div>
<div id=cta class=button>Click Here</div>
</section>
</div>
</body>
</html>
<script>
var ad = document.querySelector('#ad’);
var cta = document.querySelector('#cta’);
var close = document.querySelector('#close’);
cta.addEventListener('click’, expandAd, false);
close.addEventListener('click’, collapseAd, false);
function expandAd () {
ad.style.width = '500px’;
cta.style.left = '360px’;
close.style.opacity = 1;
}
function collapseAd () {
ad.style.width = '300px’;
cta.style.left = '160px’;
close.style.opacity = 0;
}
</script>
如果您一直在跟进,请密切关注清单 5-9 代码中的粗体部分。在它的 CSS 中,transition:全 1 ease-in-out;已经添加到所有要移动的元素中—在本例中,是我们的广告、CTA 和新的关闭图标。在 HTML 标记中,通过编写< div id=close > X < /div >,在我们的 section 容器中添加了一个新的 div 元素。这将结束扩展的广告体验。最后,看一下清单代码末尾的 JavaScript。最少的 JavaScript 代码首先声明变量来引用我们的 DOM 中的对象。在这种情况下,它是我们的广告、CTA 按钮和新的关闭图标。接下来,通过编写 cta.addEventListener('click ',expandAd,false),为用户的鼠标单击添加事件侦听器;以及 close.addEventListener('click ',collapseAd,false);。这样做可以适当地处理用户的动作,并分别调用 expandAd 和 collapseAd。在 expand 方法中,广告的宽度扩展到 500 像素,按钮在其 left 属性上移动,关闭图标的不透明度通过将其值设置为 1 来切换。(不透明度属性是 CSS3 规范中另一个几乎定型的特性;它提供了在 0 和 1 之间调整元素或图像填充的能力。)相反,通过调用 collapseAd 函数,广告被重置为其原始设置。图 5-9 显示了点击 CTA 按钮会在浏览器中得到什么。
图 5-9。我们的广告使用 CSS3 过渡进行扩展
希望你能从清单 5-9 中看到,你可以使用 CSS 相当容易地重新创建一个扩展的广告单元,并使用一点 JavaScript 进行控制。此外,请记住,您可以对多个 CSS 属性使用过渡,包括颜色、高度、边距等等。如果你需要广告向不同的方向和维度扩展,这将非常有帮助。
注意可以通过编写 element . addevent listener(' transition end ',transitionEndHandler)为 DOM 的 transitionend 事件添加一个 JavaScript 事件监听器;。当转换完成时,这对于以某种方式控制您的广告内容非常有用。
CSS3 变换
让我们通过讨论 CSS3 转换来总结这些例子,CSS3 转换允许在关系空间中操作和转换元素。transform 属性将 2D 或 3D 变换应用于元素,这允许您旋转、缩放、移动和倾斜以创建一些真正有趣的变换。默认情况下,transform 应用于元素的左上角,即(0,0),但是您也可以调整元素的 transform-origin 属性来重新定向中心点。还有一个 Webkit 浏览器当前支持的属性,它允许嵌套项目保留元素所在的空间(2D 或 3D)。transform-style 属性标识如何在所需空间中呈现嵌套元素。清单 5-10 为我们的扩展广告单元增加了一个快速 3D 翻转。
清单 5-10。 CSS3 变换示例
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
* {
font-family: Verdana;
}
#ad {
position: absolute;
left: 30px;
top: 30px;
width: 300px;
height: 250px;
background-color: white;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 1);
background:
url(logo.png) 20px 10px no-repeat,
url(300x250Bg.jpg) 0px 0px repeat;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#cta {
position: absolute;
top: 190px;
left: 160px;
color: white;
font-size: 16px;
cursor: pointer;
text-shadow: 0px 0px 5px #000000;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.button {
font-size: 16px;
color: white;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#e3e3e3 0%,
#545454);
background: -webkit-gradient(
linear, left top, left bottom,
from(#e3e3e3),
to(#545454));
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 10px;
border: 1px solid #000000;
-moz-box-shadow:
0px 1px 3px rgba(0,0,0,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
-webkit-box-shadow:
0px 1px 3px rgba(0,0,0,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
box-shadow:
0px 1px 3px rgba(0,0,0,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
text-shadow:
0px -1px 0px rgba(000,000,000,0.4),
0px 1px 0px rgba(255,255,255,0.3);
}
#close {
position: absolute;
top: 10px;
left: 480px;
opacity: 0;
cursor: pointer;
color: white;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.flip3D {
-webkit-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
transform: rotateY(360deg);
-webkit-transform-style: preserve3d;
-moz-transform-style: preserve3d;
-ms-transform-style: preserve3d;
transform-style: preserve3d;
}
</style>
</head>
<body>
<div id=ad>
<section>
<div id=close>X</div>
<div id=cta class=button>Click Here</div>
</section>
</div>
</body>
</html>
<script>
var ad = document.querySelector('#ad');
var cta = document.querySelector('#cta');
var close = document.querySelector('#close');
cta.addEventListener('click', expandAd, false);
close.addEventListener('click', collapseAd, false);
function expandAd () {
ad.style.width = '500px';
cta.style.left = '360px';
close.style.opacity = 1;
cta.style.opacity = 0;
ad.classList.toggle("flip3D");
}
function collapseAd () {
ad.style.width = '300px';
cta.style.left = '160px';
close.style.opacity = 0;
cta.style.opacity = 1;
ad.classList.toggle("flip3D”);
}
</script>
同样,您可能已经注意到了更新代码中的粗体部分。在我们的 CSS 中要做的第一件事是添加一个. flip3D 类,并通过为所有浏览器供应商编写 rotateY(360deg)来定义它的转换属性。其次,添加 style 的另一个转换属性,它告诉浏览器在应用转换时保留 3D 空间。接下来,利用 HTML5 浏览器中一个叫做 classList API 的新特性;在我们的 JavaScript 中,通过调用 ad.classList.toggle('flip3D ')来切换 flip3D 类;。这指示浏览器在展开和折叠时添加或移除类(developer . Mozilla . org/en-US/docs/DOM/element . class list
有关于 classList API 的更多信息)。
添加清单 5-10 中的代码并刷新你的浏览器应该会给人一种类似于图 5-10 中快照所示的体验。
图 5-10。我们的广告使用 CSS3 变换进行 3D 旋转扩展
当使用这个新的 CSS3 特性时,请记住这个规范处于工作草案状态,需要供应商前缀。在 http://w3.org/TR/css3-2d-transforms 有更多关于转变的内容。在 http://caniuse.com 的检查浏览器支持。
注意 CSS3 的过渡和变换在纸上演示起来很复杂。在
w3.org/TR/css3-transitions
和w3.org/TR/2012/WD-css3-transforms-20120911
有更详细的信息。
在总结我们的 CSS3 示例时,可以简要讨论一些其他特性。一个新增功能是通过 text-overflow 属性进行文本换行,这是一个很棒的新功能,它允许您操纵一行文本在靠近对象的容器元素或浏览器窗口的边缘时如何换行。这在响应式广告技术中很有帮助;当广告控制尺寸时,你可以指定你想要广告文案的换行方式。这在处理动态数据和 web 服务时也非常有用,因为在动态数据和 web 服务中,字符数会根据服务器返回的信息量而变化很大。(在第十一章中会有更多关于这个话题的内容。)以我们的广告为例,添加一个 text-overflow: ellipsis 的 CSS 属性,并让浏览器处理 add "。。."这比我们想要的 300 × 250 的广告区域要大。清单 5-11 展示了这种技术。
清单 5-11。 正文-溢出示例
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
* {
font-family: Verdana;
}
.adContainer{
position: absolute;
width: 300px;
height: 250px;
}
#ad {
position: relative;
width: 100%;
height: 100%;
background-color: white;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 1);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
white-space:nowrap;
overflow:hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class='adContainer'>
<div id='ad'>
Lorem Ipsum 只是印刷和排版行业的虚拟文本。自 16 世纪以来,Lorem Ipsum 一直是行业的标准虚拟文本,当时一个不知名的印刷商拿走了一条铅字,并将其打乱,制成了一本铅字样本书。它不仅存活了五个世纪,而且飞跃到电子排版,基本上保持不变。它在 20 世纪 60 年代随着包含 Lorem Ipsum 段落的 Letraset 表的发布而流行起来,最近随着 Aldus PageMaker 等桌面出版软件包括 Lorem Ipsum 的版本而流行起来。
</div>
</div>
</body>
</html>
CSS3 的功能相当多。我将在第十二章中回顾更多来自 Adobe 和 Google 等供应商的新兴 CSS3 提交,包括着色器、过滤器、区域和排除。但是今天就开始和他们玩吧——如果没有别的原因,只是为了测试他们的表现,为你的广告增添一些活力。一个开始深入挖掘的好地方是 http://css3clickchart.com 的,它概述了常见的和新兴的 CSS 特性。如果你有兴趣学习更多关于 CSS3 动画的知识,丹·伊登的 animate . CSS(【http://daneden.me/animate】??)是一个快速入门的好工具——但是总是有一个优雅的回切,因为它可能不是在所有地方都工作。
如果你一直跟着做,你会发现通过添加一些简单的 CSS 来创建一个看起来很好的简单广告是相当简单的。您看到了从添加多个背景图像、圆角、添加渐变,甚至利用一点 JavaScript 进行控制的过渡和变换。充分利用所有这些工具,你就能想出一些让你的客户惊叹不已的广告。
在广告中
所以 CSS3 动画以及它们如何影响广告空间是巨大的!说真的,你上一次没有看到动画广告或利用刚刚提到的一些演示功能是什么时候?通常是“让我的 logo 变大”和“我们能在这里加一点动画吗?”广告商都在争夺用户的注意力,所以让广告持续流动对他们来说非常重要。粒子发生器(或系统)和加载器图标是对 CSS3 动画非常有帮助的几个例子,特别是如果它们利用 GPU 的话。使用它们的一个主要例子是在假日季节,这时广告需要雪花飘落的效果。
通过 CSS3 处理雪动画并利用 z 空间将使动画在 GPU 上超级流畅地运行(即使对于移动设备)。显然,这也可以在 JavaScript 中完成,但是取决于其他动画的数量,CSS3 最有可能出现在上面。
加载图标在广告中是巨大的,用户选择更多的内容,广告在最初的加载中会拉进更多的内容。微调器、加载器和其他类似的图标都可以卸载到浏览器中,而不是发出额外的 HTTP 请求来获取动画 GIF。同样,这有助于基于用户交互的附加后续加载。通常,ads 将加载 70-100 千字节的初始 k 权重限制;在用户交互之后,他们将加载额外的 100 甚至 200 千字节的重量(取决于 pub 规范)。
简而言之,如果你在下一次广告活动中使用(或计划使用)任何新兴的 CSS3 功能,我有三个简单的规则可以遵循。
- 了解您的目标受众,并了解出版商目前在功能方面的优势。有可能它出售与其内容一致的媒体库存。如果它的内容面向更懂技术的受众,并且出版商不太关心 IE6 到 IE8 的用户,你应该可以使用更前沿的功能。
- 如果你需要安抚群众,与你的出版商合作,包括多填充。更有可能的是,你需要额外的 k 重量津贴,如果它还没有被烤入网站。
- 为你的广告使用 CSS 重置。埃里克·迈耶对 HTML5 的重置是其中较好的一个(
html5doctor.com/html-5-reset-stylesheet
)。请记住,您应该只重置广告内容,而不是广告所在的页面。因此,请确保适当命名您的 CSS 规则。如果底层的浏览器技术以不同的方式呈现创意,那么在多种浏览器之间努力让创意体验保持一致是没有意义的。如果不复位,从零开始,调试起来会很乱。
由于 CSS3 规范正在发展,许多供应商提交的内容已经准备就绪,一些浏览器迫不及待地想让 W3C 采用,所以我们产生了分歧。理解在现代浏览器中你能做什么和不能做什么是非常重要的。定义您的活动范围将决定您现在和未来活动中可以利用的功能。不要仅仅依赖 CSS3 的核心特性。通过参考caniuse.com
从所有浏览器中的标准功能开始,并在支持更丰富功能集的浏览器中为您的广告添加渐进式增强。
子画面
在这个关于 CSS3 的大讨论中,最后但同样重要的是文件大小和控制图像使用,尤其是在带宽有限的设备上。有时你无法摆脱使用图像,有时你会有一个活动,有很多他们,所以现在是一个伟大的时间来讨论雪碧表。一个完美的用例是游戏中的角色动画。当您需要按顺序将特定的位图数据帧重绘到屏幕上时,通常无法处理图像。为了优化这个用例,我们可以使用一个 sprite 表,它在一个大的图像表中包含动画的每一帧。Sprite sheets 是理想的,因为只有一个对托管图像素材的服务器的请求。一旦文件存储在浏览器缓存中,开发人员可以通过 CSS 和/或 JavaScript 将 sprite 表移动到特定区域,以在任何给定的时间点显示特定的动画帧。这在动画中非常强大,但在向出版商的页面发送带有图像的广告时也应该是最佳实践。sprite 工作表提供了巨大的图像优化优势,因为其中的所有图像都可以共享像素数据。也就是说,JPEG、GIF 或 PNG 图像编解码器不需要为不同的图像多次写入该信息;一旦写入,它将被工作表中具有相同值的所有其他图像共享。如果您注意到您经常压缩图像以达到 k 权重限制,请尝试将您的所有图像尽可能紧密地捆绑在一个文件中(具有足够的全像素填充),然后压缩它。与压缩单个文件相比,您可能会节省更多的 k-weight,此外,您还会消除多个 HTTP 请求的开销。
那么你如何使用雪碧工作表呢?CSS 可以在给定的时间点偏移背景元素的顶部和左侧属性,以创建从一个区域到另一个区域的无缝过渡。图 5-11 显示了六个流行的网络图标的混搭,单独计算,总计 84 千字节。然而,使用 sprite sheet 方法可以将其降低到 66 千字节。(它甚至可以被压缩,使用一个叫做 ImageOptim(【http://imageoptim.com】)的免费工具,一直压缩到 55 千字节。)
图 5-11。以 55 千字节保存为 PNG 文件的 sprite 工作表示例
现在你已经有了最终的图像素材,只需使用清单 5-12 中所示的 CSS 代码来调整这个 sprite 工作表的 CSS。
清单 5-12。 雪碧工作表 CSS
.linkedin, .twitter, .yahoo, .yelp, .youtube, .rss{
background: url(sprites.png) no-repeat;
}
.linkedin{
background-position: -7px 0;
width: 256px;
height: 256px;
}
.twitter{
background-position: -269px 0;
width: 256px;
height: 256px;
}
.yahoo{
background-position: -8px -252px ;
width: 256px;
height: 256px;
}
.yelp{
background-position: -269px -252px ;
width: 256px;
height: 256px;
}
.youtube{
background-position: -531px 0;
width: 256px;
height: 256px;
}
.rss{
background-position: -531px -253px ;
width: 256px;
height: 256px;
}
从我们的例子中可以看出,我们最初通过编写 background:URL(sprites . png)no-repeat;然后,根据指定的类别,我们简单地在特定的 X,Y 位置偏移背景图像,以便只显示图像中我们正在寻找的部分。网络上到处都是雪碧。事实上,即使是流行的Apple.com导航条也是由一个精灵表组成的。(如果你查看源代码,你会发现有一个请求是发给 http://images.apple.com/global/nav/img/globalnavbg.png 的。)所以发挥创造力,尝试它们,并记住优化,同时减少对服务器的请求。动画 GIF 雪碧表有人吗?
最后,创建 sprite 工作表的一个非常好的工具是直接的 Adobe Flash CS6,但是它的价格很高。因此,如果你没有 Flash,我建议你下载格兰特·斯金纳和他的团队开发的 AIR 应用 Zoe(easeljs.com/zoe.html
),或者使用一些免费的在线工具,叫做 SpritePad(【http://spritepad.wearekiss.com】??【个人最喜欢的】,和 SpriteCow(spritecow.com
)。前往css-tricks.com/css-sprites
了解更多关于 sprite sheet 使用的详细信息。
手机上的精灵表
在移动开发中,由于不一致的网络连接的可能性,我们经常试图节省对服务器的 HTTP 请求,sprite sheets 是广告优化中的一个巨大进步。理想情况下,我们的目标是在移动设备中使用尽可能少的图像,并走 SVG、canvas 或基于字体的图标的路线,而不是位图,因为屏幕像素密度更高,文件大小也更大,但有时这是无法避免的。可以理解的是,对于这种情况有许多不同的观点,无论是使用 CSS 和 JavaScript 的动画 gif 还是 sprite 工作表。无论哪种方式,只要确保你理解活动的需求和目标,以及你的用户体验。将一个 sprite 工作表更新为 Photoshop (PSD)文件比需要重新编辑和重新导出 30 个独立的图像要简单得多。如果你有兴趣更多地了解这个话题,并且喜欢听人们谈论这些话题,我建议你看看 5by5 脱口秀吹毛求疵,特别是第 61 集,【http://5by5.tv/hypercritical/61】??。
摘要
在结束这一章时,让我们回顾一下到目前为止所讨论的内容。CSS3 还不是最终版本,但是它为开发者和设计者提供了许多惊人的特性。在浏览器支持的情况下,它也可以用于生产活动。您已经看到了决定动画何时使用 JavaScript 或 CSS3 的一些关键因素;已经讨论了性能和易用性,以及使设计和开发更容易的工具。提交的规范和工作草案中的所有演示更新都经过了详细的审核,我还提供了代码示例,您可以在下一次广告活动中加以利用。最后,我介绍了 sprite sheets,这是一个非常重要的主题——它们的使用方式、用途以及使用它们带来的性能提升,特别是在移动设备上。
优化对于广告和整个网络来说都是至关重要的,我鼓励你花时间将这些实践融入到你的工作流程中,这样每个人都可以更快地运行网络。对使用这些新特性感到兴奋,并做好准备学习新技术。CSS3 不再仅仅是关于布局和风格。远不止这些。结合 GPU 支持、丰富的图形和 JavaScript,CSS level 3 是对设计师工具带的一个很好的补充。
在第六章中,焦点转移回 HTML5 领域,尤其是新的 JavaScript APIs 可以利用。我们将更详细地讨论一些更新的可用标记和元素,包括 HTML5 输入,以及拖放 API 和 Web 工作器。
六、HTML5 API
许多人在访问一个新的国家时会请翻译或导游。他们依靠的是一个对这片土地和这里的人了如指掌的人,一个能告诉你当你到达时该做什么和不该做什么的人。在这种情况下,把新国家想象成所有现代浏览器技术,把翻译器想象成用于与这些技术通信的应用编程接口(API)。要在这个国家或任何一个新的国家把事情做好,你需要“说到做到”——这基本上就是 API 所做的。它们是一个通信层,通过代码通信来提供对特定技术形式的访问。
在本章中,我们将涉及很多 HTML5 APIs。既然到目前为止你已经了解了一些,那就认为你已经有了一个良好的开端。canvas、CSS3 甚至 SVG 都是 API,本章将回顾新兴的 HTML5 浏览器带给我们的一些新 API。然而,我们不会涵盖所有这些,因为在本书的范围内有太多的事情要做。然而,你可以在 http://platform.html5.org 看到它们中的大多数。另外,请记住,大多数 API 并不是实际 HTML5 规范的一部分。有几个是从 HTML5 规范开始的,后来被移到他们自己的标准中,因此默认采用了 HTML5 这个总括术语。虽然这些 API 中的大多数都需要某种级别的 JavaScript 来操作,但是它们都做不同的事情,并且以不同的方式运行。此外,研究它们将完全改变你在浏览器中使用标准的方式。相信我!所以让我们开始挖掘 HTML5 的真正肌肉。一定要戴上编码的帽子,因为 HTML5 APIs 严重依赖 JavaScript。
拖放式
首先,我们来聊聊拖放(DnD) API,这是 HTML5 规范中相对较新的一项。这个 API 提供了一个非常简单的方法来在页面或内容上拖放元素,就像一个广告单元。此外,它需要最少的代码来实现。最初由微软在 Internet Explorer 浏览器的第 5 版中创建,由于 API 规范中的错误、浏览器中的实现以及围绕拖动事件的使用,它经历了一些开发人员的反弹(至少可以这么说)。详见quirksmode . org/blog/archives/2009/09/the _ html 5 _ drag . html
。
经过一些改进,由于 IE、Opera、Firefox、Safari 和 Chrome 都以某种方式支持它,这个 API 现在为现代浏览器环境带来了原生的拖放支持,而无需第三方插件或 JavaScript 库。只需在您希望用户拖动的任何 DOM 元素上添加一个“draggable = true”属性(同时通过 JavaScript 在“拖放区”上包含一些基本的事件侦听器/处理程序),您就可以指示浏览器将元素放到哪里。
注意默认情况下,元素 img 和 a(带有 href)是可拖动的,但是请记住,不是所有的元素(例如图像)都可以是拖放区域。
拖放式 API 已经走过了漫长的道路。在使用浏览器的原生功能之前,开发人员和设计人员需要使用 jQuery 等外部库或 Flash 等插件。感谢 HTML5 规范,默认情况下,它现在是现代浏览器的主要组件。几乎任何东西都可以拖动:图像、链接、文本——实际上是任何 DOM 节点。还要注意的是,对原生浏览器的支持使得网络速度更快,反应更灵敏,对我们来说,就是广告创意。只要你能利用浏览器的本地 API,就去做吧!毕竟,标准化和构建硬连接到浏览器环境中的用户友好的 API 是 HTML5 和本书的全部内容。清单 6-1 概述了如何在一个非常简单的广告中使用 DnD,其中发布者是一个产品制造商,广告是一个产品拖放区,通过拖放保存。
清单 6-1 。 拖放示例
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
#ad {
width:300px;
height:250px;
border:1px solid #000;
overflow: hidden;
}
#logo {
position: absolute;
top: 5px;
left: 1px;
width: 300px;
height: 250px;
font-family: Arial, "MS Trebuchet", sans-serif;
font-size: 40px;
text-align: center;
color: #fff;
z-index: 3;
}
#cta {
position: absolute;
top: 220px;
left: 1px;
width: 300px;
height: 250px;
font-family: Arial, "MS Trebuchet", sans-serif;
font-size: larger;
text-align: center;
color: #fff;
z-index: 2;
}
#dropper {
position: relative;
top: 25px;
left: 80px;
z-index: 101;
}
#dropArea {
position: absolute;
top: 60px;
left: 10px;
width: 280px;
height: 150px;
background: #f2f5f6; /* Old browsers */
background: -moz-linear-gradient(top, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f5f6), color-stop(37%,#e3eaed), color-stop(100%,#c8d7dc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* IE10+ */
background: linear-gradient(to bottom, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 ); /* IE6-9 */
border: 1px dashed;
border-radius:10px;
z-index: 81;
}
#background {
position: absolute;
top: 1px;
left: 1px;
width: 300px;
height: 250px;
background: #c0c5d6; /* Old browsers */
background: -moz-linear-gradient(top, #c0c5d6 0%, #3f4c6b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c0c5d6), color-stop(100%,#3f4c6b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #c0c5d6 0%,#3f4c6b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #c0c5d6 0%,#3f4c6b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #c0c5d6 0%,#3f4c6b 100%); /* IE10+ */
background: linear-gradient(to bottom, #c0c5d6 0%,#3f4c6b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c0c5d6', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */
z-index: 0;
}
/******Mock Publisher Content********/
#publisherContent {
position: absolute;
top: 300px;
left: 100px;
}
#pubProduct {
position: absolute;
top: 0px;
left: 0px;
width:100px;
height:100px;
background: url(hammer.png) no-repeat;
z-index: 90;
}
</style>
<script type="text/javascript">
//fires when product is over the drop area
function allowDrop(event) {
//cancel default for drop event to fire
event.preventDefault();
console.log("YOU'RE OVER THE DROP AREA!!!")
}
function dropArea(event){
var data = event.dataTransfer.getData("Text");
var dropArea = document.getElementById('dropper');
var element = document.getElementById(data);
dropArea.appendChild(element);
console.log(element)
}
//initial drag when product is selected
function drag(event) {
var dropImg = document.createElement("img");
dropImg.src = "add.png";
dropImg.width = "48px";
dropImg.height = "48px";
dropImg.style.opacity = "0.5";
event.dataTransfer.effectAllowed='all';
event.dataTransfer.setData("Text", event.target.getAttribute('id'));
event.dataTransfer.setDragImage(dropImg, 25, 25);
}
function adInit(event) {
console.log(event.type)
}
window.addEventListener('DOMContentLoaded', adInit, false);
</script>
</head>
<body>
<div id="publisherContent">
<div id="pubProduct" draggable="true" ondragstart="drag(event)"></div>
</div>
<div id="ad">
<div id="logo">Shopping Cart</div>
<div id="cta"> Drag Products To Drop Area! </div>
<div id="dropArea" ondrop=dropArea(event) ondragover=allowDrop(event)>
<div id="dropper"></div>
</div>
<div id="background"></div>
</div>
</body>
</html>
希望您正在使用您最喜欢的文本编辑器。现在让我们看一下代码。首先,我们使用清单中的 CSS 做一些基本的广告设置和设计。第二,在 HTML 中,我们模拟发布者内容(publisher content)并将发布者页面中的模拟产品放到广告区域(ad)。接下来,在我们的 publisherContent div 中,有一个示例产品 pubProduct,它的 draggable 属性被设置为 true,并且有一个事件 ondragstart,要用名为 drag(event) 的函数来处理。
注意你必须在“事件”中传递参数;否则代码将无法正常运行。
接下来,我们通过利用 ondrop 和 ondragover 事件在广告中添加更多的事件处理程序。这些事件分别附加 dropArea(事件)和 allowDrop(事件)。接下来,使用 JavaScript 编写我们的函数。对于拖动,我们通过调用 setDragImage() 方法并向其传递三个参数来使用带有来自 dataTransfer 对象的方法的拖动图像。第一个参数是图像资源,第二个和第三个是图像的 x 和 y 坐标位置,即鼠标开始拖动的位置。如果您希望在用户拖动时为元素创建自定义图像,这可能会很有帮助。
接下来,我们处理 allowDrop 方法,它表示何时可以将产品放到内容区域。在这种情况下,我们使用整个广告作为拖放区。
注意默认情况下,dragOver 和 dragEnter 事件不能放下元素。您必须通过调用 event.preventDefault()显式取消这些默认浏览器操作;删除一个元素。
最后,一旦你知道你被允许放下产品,一旦用户放开鼠标,这个动作可以用 dropArea 处理程序来处理。在 dropArea 方法中,我们通过再次调用 dataTransfer 对象来获取产品的数据,但这次我们通过编写 var data = event . data transfer . get data(" Text ")来检索数据。有了数据对象,我们就可以将数据注入到广告的不动产中。用户现在看到了广告区域内的元素,如图 6-1 中的展示了 。
图 6-1。展示了广告的拖放示例
我希望你都明白了;我知道这很多。如果你没有,你可以通读一遍前面的代码,并为后续学习的访问html5laboratory.com/drag-and-drop.php
。对于一些用户来说,DnD 是一块隐藏的宝石,尤其是在广告环境中,所以如果它是广告体验中的一个特定功能,一定要包括一个相关且清晰的行动号召,以确保你的用户采取适当的行动。
广告中的拖放
有了一些基本的 DnD 入门知识,让我们想想拖放(DnD) API 如何应用于广告领域。起初,我认为 DnD API 可以带来玩互动游戏的新方法。例如,它允许用户更准确地玩国际象棋游戏,因为它类似于用户的自然行为。它可以重新创建一个交互式的购物车体验,用户可以将产品拖到收银台购物车中,购物车会根据放入的产品数量而装满。我认为一旦你开始使用这个 API,使用这个标准的可能性是无限的。
它可以将元素拖到待办事项列表中,以便用户可以在以后打印,甚至可以用于 mix up 益智游戏的功能,其中用户需要为隐藏的提议组装拼图。我还看到 DnD 带来了处理复杂的出版商集成的能力——例如,用户将出版商页面上的精选内容拖放到广告的拖放空间(正如刚才所讨论的)。这可能有点像寻找复活节彩蛋,最终用户在站点内找到相关内容,并通过发现这些“彩蛋”获得特殊待遇
诚然,DnD 仍有相当一部分古怪的问题,但如果你有兴趣深入了解 DnD 的空气污染指数,请前往 http://html5rocks.com/en/tutorials/dnd/basics。你可以在 http://dev.w3.org/html5/spec/dnd.html#dnd 的和的 http://whatwg . org/specs/we B- apps/current-work/multipage/dnd . html # dnd查看目前的规格。
文件
html 5 中更新的文件 API 允许网页内容提示用户选择他们机器上的本地文件,然后在浏览器中阅读这些文件的内容,而不需要服务器端的帮助或插件。这种选择可以通过使用 HTML 输入元素或刚刚学会的 DnD API 来完成。如果你使用 Gmail(谷歌的邮件服务)和一个现代浏览器,当你把文件附加到邮件中时,你很可能在不知不觉中使用了文件 API。你可能会想,“当然,我以前也给电子邮件添加过附件,”但是你知道你可以把这些附件从你电脑的操作系统拖到 Gmail 里吗?DnD 可以让你将文件数据传输到 Gmail 的应用中,但在浏览器中阅读文件会充分利用文件 API。
DnD 和文件 API 一起使用时,会提供与在您的操作系统或桌面 上使用本机应用相同的体验。HTML5 的这一新增功能本质上允许用户将 web 应用视为其本地操作系统(OS)的扩展。如果你要求用户上传他们自己的图片到你的广告单元,这将是一个巨大的帮助。他们所需要做的就是把它从桌面拖到浏览器定义的拖放区——在我们的例子中,它可以是广告。
传统上,文件 API 使用给用户一个基本的输入,允许本地操作系统文件选择器窗口,也允许 HTML 文档引用位于用户文件系统上的文件——但仅此而已。
如今,文件 API 允许用户直接在浏览器中读取各种文件格式的文件,而无需服务器端技术。使用新的 FileReader API,可以将文件读取为字符串、数组缓冲区,甚至是 BLOB (二进制大对象)输入。有了浏览器自带的这些信息,就可以读取、解释、显示甚至操作文件中的二进制信息,然后保存到更新和修改的版本中。通过 JavaScript ,文件 API 提供了一个原生机制来读取文件的数据,并按照您的意愿写入。随着 web 变得更加以应用为中心(正如 HTML5 所希望的),用户计算机的原生文件系统和 Web 上的应用将变得更加交织在一起。对于许多普通的日常用户来说,Web 和原生操作系统之间的界限将会变得模糊。例如,不需要用户检索保存在他们机器上的名为 someimage.jpg 的素材,文件 API 和文件阅读器 API 可以被附加到 DnD API 上,以无缝集成操作系统和网络应用,甚至允许访问用户的内置摄像头,捕捉位图图像信息并将其保存到网页或广告中——同样,所有这些都在浏览器的原生架构内。
这种方法比仅仅要求用户提供以前保存的图像资源要高级得多,你说呢?此外,您甚至可以使用 XMLHttpRequest (AJAX)方法 从另一个数据源检索信息,并将其作为 BLOB、Array 或 String 对象导入,以便 FileReader API 进行解释,并可能在以后要求用户进行操作。使用 AJAX 方法,这个过程可以在不触发页面刷新的情况下发生,这同样使最终用户可以无缝集成。
记住这一点,让我们看看如何在 JavaScript 中使用文件 API。清单 6-2 要求用户将自己的图像拖入广告体验中。
清单 6-2 。 文件 API 示例
<!DOCTYPE html>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#drop_zone {
width:300px;
height: 250px;
background-color:#999;
border: 1px dashed #000;
}
p {
width: 300px;
}
</style>
<head>
<meta charset=utf-8>
<body>
<div class="percent">0%</div>
<input type=file>
<div id="drop_zone">Drop Zone</div>
<p>Select an image from your machine or drop onto the drop zone to read the contents of the file without using a server</p>
<script>
function adInit(event) {
event.preventDefault();
var upload = document.getElementsByTagName('input')[0];
var progress = document.querySelector('.percent');
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('drop', handleFileSelect, false);
// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {
var reader = new FileReader();
console.log('Sweet! All File APIs supported');
upload.onchange = function (event) {
var file = upload.files[0];
var img = new Image();
reader.onload = function (event) {
console.log(event.type);
};
reader.onprogress = function (event) {
console.log(event.type);
var percentLoaded = Math.round((event.loaded / event.total) * 100);
progress.textContent = percentLoaded + '%';
console.log(percentLoaded)
};
reader.onloadend = function (event) {
if (!file.type.match('image.*')) {
alert("Not an image!!");
} else {
img.src = event.target.result;
if (img.width >= 300) {
img.width = 300;
}
}
console.log(event.type);
dropZone.innerHTML = '';
dropZone.appendChild(img);
};
reader.onerror = function (event) {
console.log(event.type);
};
reader.readAsDataURL(file);
console.log(reader);
return false;
};
function handleFileSelect(event) {
event.stopPropagation();
event.preventDefault();
//event.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
var files = event.dataTransfer.files; // FileList object.
var file = files[0];
reader.onloadend = function (event) {
console.log(event.target);
dropZone.style.width = "300px";
dropZone.style.height = "300px";
dropZone.style.background = 'url(' + event.target.result + ') no-repeat center';
};
reader.readAsDataURL(file);
return false;
console.log(file)
}
} else {
alert('The File APIs are not fully supported in this browser.');
}
}
window.addEventListener('DOMContentLoaded', adInit, false);
</script>
</body>
</html>
如这段代码所示,首先允许用户选择本地计算机上的图像文件,或者通过将标记中的一个区域定义为 drop_zone,将图像拖动到广告的拖放区。一旦加载 DOM 后广告启动,adInit 函数 被触发;它通过获取对 DOM 对象的变量引用来开始。(您可以看到,通过调用 getElementsByTagName、getElementById 和新的 querySelector,我使用了各种方法来获取引用。)一旦用户将图像拖放到拖放区域,我们在创建一个文件读取器引用后运行几个方法,首先调用 upload.onchange,它在输入元素改变状态时处理抓取用户图像文件。第二,我们使用文件阅读器——姑且称之为 reader——并将特定的方法附加到对象上——onload、onprogress、onloadend、onerror 和 readAsDataURL——当用户将图像放到拖放区域时,所有这些方法都会处理特定的命令。最后,我们来关注一下 onloadend 方法,该方法通过编写 drop zone . style . background = ' URL('+event . target . result+')no-repeat center ',通过 CSS 将用户的图片写入 drop_zone 元素中;。一旦发生这种情况,图像就显示在浏览器中,而不需要往返服务器。这显示在图 6-2 中,使用了我桌面上的一个示例图像。
图 6-2。一个图片文件的例子上传
注意通过多重属性,用户可以一次选择多个文件。
广告中的文件访问
现在我们已经让用户能够上传图像,他们可以对文本文件、PDF、PSD——你能想到的都可以——做同样的事情,并让浏览器解析、操作和呈现信息到屏幕上。了解了这些信息后,让我们允许用户将图像从桌面拖放到广告的实际区域,并让他们使用 HTML5 canvas 元素在图像上绘画。由此,让我们也允许用户在本地保存被操作的文件。清单 6-3 给出了一个例子。
清单 6-3 。 用画布文件 API 示例
<!DOCTYPE html>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
position: relative;
}
canvas {
position: absolute;
top: 20px;
left: 0px;
width: 300px;
height: 250px;
border: 1px solid #000;
}
.percent {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
}
button {
position: absolute;
top: 300px;
width: 200px;
height: 50px;
visibility: hidden;
}
</style>
<head>
<meta charset=utf-8>
<body>
<div class="percent">Loader: 0%</div>
<canvas width=300 height=250>
<p>No Canvas Support</p>
</canvas>
<button></button>
<script>
function adInit(event) {
event.preventDefault();
var canvas = document.getElementsByTagName('canvas')[0],
context = canvas.getContext('2d'),
progress = document.querySelector('.percent'),
img = document.createElement("img"),
saveBtn = document.querySelector("button"),
mouseIsDown = false,
hasText = true,
clearCanvas = function () {
if (hasText) {
context.clearRect(0, 0, canvas.width, canvas.height);
hasText = false;
}
};
// GENERIC CTA
context.fillText("Drop an image onto the ad!", 50, 50);
// Image for loading
img.addEventListener("load", function () {
clearCanvas();
context.drawImage(img, 0, 0, 300, 250);
}, false);
// To enable drag and drop
canvas.addEventListener("dragover", function (evt) {
evt.preventDefault();
}, false);
canvas.addEventListener("drop", function (event) {
var files = event.dataTransfer.files;
if (files.length > 0) {
var file = files[0];
if (typeof FileReader !== "undefined") {
var reader = new FileReader();
reader.onload = function (event) {
console.log(event.type);
};
reader.onprogress = function (event) {
console.log(event.type);
var percentLoaded = Math.round((event.loaded / event.total) * 100);
progress.textContent = "Loader: " + percentLoaded + '%';
console.log(percentLoaded)
};
reader.onloadend = function (event) {
console.log(event.type);
if (!file.type.match('image.*')) {
alert("Not an image!!");
} else {
img.src = event.target.result;
}
beginCanvasDrawing();
};
reader.onerror = function (event) {
console.log(event.type);
};
reader.readAsDataURL(file);
}
}
event.stopPropagation();
event.preventDefault();
}, false);
function beginCanvasDrawing() {
var brush = "rgba(200, 34, 2, .5)";
canvas.addEventListener("mousedown", function (event) {
mouseIsDown = true;
clearCanvas();
context.beginPath();//starts the drawing once users mouse is down
}, false);
canvas.addEventListener("mousemove", function (event) {
if (mouseIsDown) {
canvas.style.cursor = "pointer";
context.strokeStyle = brush;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowBlur = 15;
context.shadowColor = brush;
context.lineWidth = 5;
context.lineJoin = "round";
context.lineTo(event.layerX, event.layerY);
context.stroke();
} else {
console.log("hold mouse button down")
}
}, false);
canvas.addEventListener("mouseup", function (event) {
mouseIsDown = false;
var colors = context.getImageData(event.layerX, event.layerY, 10, 10).data;
console.log(colors);
brush = "rgba(" + colors[0] + ", " + colors[1] + ", " + colors[2] + ", " + colors[3] + ")";
console.log(brush);
}, false);
saveBtn.style.visibility = "visible";
saveBtn.innerHTML = "Save Your Creation";
saveBtn.addEventListener("click", function (event) {
var newImg = new Image();
newImg.src = canvas.toDataURL();
window.location.href = newImg.src.replace('image/png', 'image/octet-stream');
}, false);
}
}
window.addEventListener('DOMContentLoaded', adInit, false);
</script>
</body>
</html>
从代码中可以看出,用户被要求将图像拖放到广告的 canvas 元素上,DND API 和 File API 将图像呈现到屏幕上。从那里,我们将调用一个方法 beginCanvasDrawing ,该方法将调用我们特定的画布绘制函数,允许用户在浏览器中插入图像后进行“绘制”。
在 beginCanvasDrawing 中,我们将检测用户是否在用鼠标绘图,并为用户提供一个按钮来保存新的图像组合。一旦用户选择了按钮,就会创建一个新图像,并且画布的新位图信息会应用到图像的源。在那里,通过将图像的文件类型替换为 image/octet-stream,图像被保存到他们的文件系统,这允许用户将图像信息保存为二进制文件。图 6-3 显示了浏览器应该呈现的内容。
图 6-3。带有文件和画布的图像文件上传示例
注意你可以检测浏览器是否支持文件写入器 API,并以这种方式在本地保存信息。否则,您可以使用服务器端代码来获取二进制信息,并以正确的文件名保存素材。
此外,HTML5 被设置为支持 ,而不是导航到 URL 。(参见html5-demos.appspot.com/static/a.download.html
的例子。还有,看nihilogic.dk/labs/canvas2image
;这是一个有用的轻量级库,可以从 canvas 元素中保存不同的图像类型。)
我自己仍然记得当 Flash Player 10 让广告开发人员获得文件访问权来创建用户生成的内容(经过用户许可)时,我是多么兴奋。现在,在浏览器中,我们可以做同样的事情——获取本地文件,从用户的机器上访问视频或音频。如果你问我,我会说这些都是非常令人惊奇的东西!
注意记住,这个 API 实际上并不是 HTML5 规范的一部分,它处于工作草案状态。因此,随着规范工作的继续,功能可能会有所改变。参见www.w3.org/TR/FileAPI获取更多关于文件 API 的信息。
页面可见性
页面可见性 API 是我期待已久的东西!我非常渴望开始利用这个特性,因为它为最终用户和开发人员提供了巨大的性能优势。页面可见性 API 允许浏览器根据页面的可见性来处理或“切换”内容和系统资源。简而言之,如果你没有在看什么东西,比如说,如果它在另一个标签上,浏览器将停止为该内容分配资源,为用户当前正在查看的内容释放更多的系统资源。让我们看看如何在一个广告例子中使用页面可见性 API(参见清单 6-4 )。
清单 6-4 。 页面可见性 API 示例
<!DOCTYPE html>
<head>
<meta charset=utf-8>
<body>
</body>
<script>
var isHidden,
state,
visibilityChangeEvent;
function adInit(event) {
console.log(event.type)
if (typeof document.hidden !== "undefined") {
isHidden = "hidden";
visibilityChangeEvent = "visibilitychange";
state = "visibilityState";
} else if (typeof document.mozHidden !== "undefined") {
isHidden = "mozHidden";
visibilityChangeEvent = "mozvisibilitychange";
state = "mozVisibilityState";
} else if (typeof document.msHidden !== "undefined") {
isHidden = "msHidden";
visibilityChangeEvent = "msvisibilitychange";
state = "msVisibilityState";
} else if (typeof document.webkitHidden !== "undefined") {
isHidden = "webkitHidden";
visibilityChangeEvent = "webkitvisibilitychange";
state = "webkitVisibilityState";
}
document.addEventListener(visibilityChangeEvent, function (event) {
if (document[state] == "hidden") {
pauseAd();
} else {
startAd();
}
}, false);
}
function pauseAd () {
console.log("pauseAd");
//code to pause ad animation or video
}
function startAd () {
console.log("startAd");
//code to resume ad animation or video
}
window.addEventListener('DOMContentLoaded', adInit, false);
</script>
</html>
如代码所示,您可以监听文档可见性的状态变化,并触发 pauseAd 或 startAd 方法,这将分别暂停或开始广告的动画或视频播放,如果创意利用这些功能的话。
广告中的页面可视性
我想你会同意,在广告领域,这可能是为用户提供最佳体验的巨大优势。我们可以暂停动画、视频播放,甚至是隐藏的浏览器标签上的外部请求。我甚至可以说,这应该是未来数字广告 的绝对标准(因为浏览器采用了这一功能)。
为了获得更大的粒度,JQuery 还有一个插件来检测元素在页面上的可见性。当计算真实可见广告印象与提供的广告印象时,或者甚至当消除用户当前没有查看的页面上的广告单元的资源时,该插件可能更加有益。想一想——为什么要在没人看的时候初始化创意内容?“如果一个广告出现在页面上,但没有人浏览,它还能算作一个印象吗?”传统上是这样的,但是随着类似措施的实现,这种情况不会持续太久——这将给广告商带来更好的广告回报。
注意要检测元素可见性,看看
inview
插件github.com/protonet/jquery.inview
。
在撰写本文时,该规范仍处于工作草案状态,因此对页面可见性 API 的支持非常少。在我写这篇文章时,它只在 Chrome 13+,Firefox 10+和 Internet Explorer 10+中受支持。随着供应商市场的采用和用户群的增长,我希望看到更广泛的实现,甚至可能出现围绕这一点的 IAB 标准。当前工作草案见dvcs . w3 . org/Hg/web perf/raw-file/tip/specs/page visibility/overview . html
。
历史
现在我们来讨论一下历史 API。每个互联网浏览器都有它,几乎每个互联网用户都经常点击浏览器的后退按钮,以便回到浏览器的时间。它无疑是浏览器整体界面中最受欢迎的按钮。history API 提供了一种在用户的浏览器历史中添加和删除记录的方法,在这种方法中,可以保留恢复页面状态的数据并更新 URL,而无需刷新页面内容。这种方法与选择 Back 按钮有很大不同,因为这样做时,页面总是会重新加载,实际上导致浏览器重新呈现内容,向服务器发出请求,并再次触发任何广告展示。
history API 有一堆有用的特性,在你的下一次广告活动中使用它也会很有趣。例如,您可以构建一个创意,假装知道用户最后访问了哪里。是的,有点令人毛骨悚然;这可能会吓到一些用户,甚至引起一些反弹,但它确实是无害的,因为您不会收集任何个人身份信息。您只需调用浏览器存储内存中的历史记录。
对于广告开发人员来说,这个 API 有点棘手。假设用户正在浏览广告内容,可能在动态产品提要中搜索不同的产品,开发人员将每个用户交互记录到浏览器的历史记录中。现在,如果用户使用浏览器的后退按钮,它将返回到之前在广告内容中查看的状态,而不是返回到之前的页面内容。虽然这都是非常新的和新兴的,我们将不得不看看数字广告适合在它的历史 API 的使用;它可能会与许多事情发生冲突,甚至可能是数字广告的禁区。无论事情如何发展,历史 API 都值得熟悉;我甚至看到一些有趣的例子,复制了滚动文本的老套字幕,但是在这种情况下,是在 URL 栏中。
有趣的是,出版商和内容制作者将如何在他们的页面中实现历史 API。例如,当使用 API 并调整用户的浏览器状态时,如果没有页面重新加载,屏幕上的广告内容不会重新加载;因此,没有印象会火。然而,有人再次看到了内容,甚至可能是一个全新的人,这应该会产生新的印象,对吗?
有关历史 API 的更多信息,请访问dev . Opera . com/articles/view/introducing-the-html 5-History-API/
查看 Opera 的开发频道
网络存储
在任何应用中,保存数据都是一项非常普通的任务,而在 HTML5 中,它在 Web 上变得更加重要。有时,您会希望存储数据以供以后参考;其他时候,您可以使用 HTML5 历史 API 保存的关于用户浏览历史的数据。你甚至可以保存数据供离线查看,你将在第十章中了解到。无论从哪个角度来看,存储都是软件开发中的一个重要特性,所以让我们来看看在 HTML5 中使用 web 存储 API 的情况。
你需要记住两种类型的网络存储。
- localStorage:保存没有截止日期的数据
- sessionStorage:保存一个浏览会话的数据
在浏览器重启后, localStorage 中的数据仍然存在,而 sessionStorage 仅在页面刷新时才存在。该规范是用于浏览器中数据的名称/值对的数据存储的 API。这是非常革命性的,因为您不必通过服务器请求来请求保存的信息;一切都保存在客户端。现代浏览器通常允许高达 5 兆字节的客户端存储,而在 HTML4 中,cookie 用于存储关于用户会话的少量信息,高达 4 千字节的存储,并且它随每个 HTTP 请求一起传输。现在,你可以通过 Base64 编码将图像保存到一串文本中,并将其保存在浏览器每个域 5 兆字节的存储空间内(大约)。另一个很好的特性是,如果你试图超过浏览器设置的默认存储量,浏览器会要求用户允许或拒绝存储更多的信息。
本地存储
现在,sessionStorage 是一种在本地存储客户端数据(名称/值对)的方法——很像 cookies,但它有更多的优点。通过 sessionStorage,您现在可以将用户浏览会话的数据保存在内存中,以便以后在广告体验中检索,而无需多次往返服务器。使用 sessionStorage 的真正优势在于它支持所有主流浏览器,甚至低至 IE8!同样,它的操作类似于 cookies,但与 cookies 不同,web 存储数据不会随每个服务器请求一起发送,并且没有 cookies 的 4kb 数据存储大小限制。存储的数据是受域限制的;这意味着浏览器的会话存储对象信息仅对最初放置该数据的域是可读的。
注意如果用户在同一个站点打开了多个窗口,每个窗口都有自己的 sessionStorage 对象。
本地存储
由于我是 Mac 用户,所以疯狂使用 Command+Tab;对于 Windows 用户,应该是 Ctrl+Tab。它提供了一种在我的机器上的多个窗口/应用之间切换的简单方法,如果你像我一样,你很可能会几次误按 Command+Q 或 Ctrl+Q 退出应用。(当你在网上填写一个大表格时,没有什么比手指滑动并选择 Q 而不是 Tab 更令人沮丧的了!
现在有了 localStorage ,开发人员可以通过保存用户在表单文本字段中输入的内容来帮助用户。在这种情况下,如果我退出(我经常不经意地这样做),我可以在重启浏览器后回到网站,从离开的地方继续。这对用户体验非常有益。这背后的驱动技术是 localStorage,它允许开发人员保存浏览器的持久数据,这样,如果用户关闭并重新打开浏览器,数据将会保留,开发人员可以在以后检索数据。
如上所述,保存 localStorage 时没有应用浏览器到期日期。也就是说,它永远存在,除非开发人员清除或修改它,或者用户完全删除浏览器应用或清除所有浏览器内存。
无论您使用 sessionStorage 还是 localStorage,存储和检索值的语法都是相同的——如下例所示,其中存储了用户名。
localStorage.setItem("userName", "John");
或者
sessionStorage.setItem("userName", "John");
让我们看看在 ad 单元中使用 localStorage。在清单 6-5 中,用户被提示输入他或她的名字;然后,name 值进入 localStorage 对象,该对象允许广告在广告文本中使用该名称,即使用户稍后在另一个发布者站点上看到该广告。
清单 6-5 。local storage API 示例
<!DOCTYPE HTML>
<html>
<head>
</head>
<style>
* {
margin: 0px;
padding: 0px;
position: relative;
font-family: Verdana;
}
#ad {
position: relative;
top: 0px;
left: 0px;
width: 300px;
height: 250px;
border: 1px solid black;
text-align: center;
}
#name {
font-size: 60px;
z-index: 20;
color: white;
}
#usersName {
font-size: 50px;
z-index: 20;
font-weight: bold;
}
#cta {
z-index: 10;
-moz-box-shadow: 0px 0px 0px 0px #caefab;
-webkit-box-shadow: 0px 0px 0px 0px #caefab;
box-shadow: 0px 0px 0px 0px #caefab;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #77d42a), color-stop(1, #5cb811) );
background:-moz-linear-gradient( center top, #77d42a 5%, #5cb811 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77d42a', endColorstr='#5cb811');
background-color:#77d42a;
-moz-border-radius:42px;
-webkit-border-radius:42px;
border-radius:42px;
border:3px solid #268a16;
display:inline-block;
color:#306108;
font-family:arial;
font-size:28px;
font-weight:bold;
padding:20px;
text-decoration:none;
text-shadow:1px 1px 0px #aade7c;
}
#cta:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5cb811), color-stop(1, #77d42a) );
background:-moz-linear-gradient( center top, #5cb811 5%, #77d42a 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cb811', endColorstr='#77d42a');
background-color:#5cb811;
}
#cta:active {
position:relative;
top:1px;
}
#background {
z-index: 0;
width: 300px;
height: 250px;
position: absolute;
top: 0px;
left: 0px;
background: rgb(201,222,150); /* Old browsers */
background: -moz-linear-gradient(top, rgba(201,222,150,1) 0%, rgba(138,182,107,1) 44%, rgba(57,130,53,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(201,222,150,1)), color-stop(44%,rgba(138,182,107,1)), color-stop(100%,rgba(57,130,53,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(201,222,150,1) 0%,rgba(138,182,107,1) 44%,rgba(57,130,53,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(201,222,150,1) 0%,rgba(138,182,107,1) 44%,rgba(57,130,53,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(201,222,150,1) 0%,rgba(138,182,107,1) 44%,rgba(57,130,53,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(201,222,150,1) 0%,rgba(138,182,107,1) 44%,rgba(57,130,53,1) 100%); /* W3C */
}
</style>
<body>
<div id='ad'>
<div id='name'>Hello!<span id='usersName'></span></div>
<a id='cta'>Click Here</a>
<div id='background'></div>
</div>
</body>
</html>
<script>
function adInit () {
if(localStorage) {
if (localStorage.getItem('userName') === '' || localStorage.getItem('userName') === null) {
var uname = prompt('Enter Your Name');
localStorage.setItem('userName', uname);
document.getElementById('usersName').innerHTML = uname;
} else {
document.getElementById('usersName').innerHTML = '<br>' + localStorage.getItem('userName');
}
} else {
alert('Browser not supported!');
}
}
window.addEventListener('load', adInit, false);
</script>
让我们回顾一下代码,并在您最喜欢的文本编辑器中随意跟随。通过为要加载的文档添加一个事件监听器,并附加一个名为 adInit 的处理函数来启动。该函数首先检测浏览器是否支持 localStorage。如果是,该函数将继续检测是否为名为 username 的项输入了值。如果没有,则提示用户输入他或她的名字并将其呈现到广告单元中。现在,如果用户刷新页面,在另一个网站上查看广告,甚至关闭浏览器,该名称将再次显示在广告单元中,直到数据被清除或修改。
通过刷新浏览器,你应该会看到类似于图 6-4 中的图片的东西。
图 6-4。带有用户名的 localStorage 广告示例
如果你看到与图中相似的东西,干得好!如果没有,重新检查代码并再试一次。现代网络浏览器甚至有工具来帮助你。通过使用 web 检查器并转到 Resources 选项卡,您可以查看浏览器保存的所有存储项目。图 6-5 显示了使用谷歌的 Chrome 浏览器时的样子。(在第十章的中会有更多关于数据存储和测量的内容。)
图 6-5。谷歌 Chrome 浏览器上的 localStorage web inspector 视图
注意使用 web inspector,还可以查看本地数据库、web 存储项目、cookies 和 HTML5 应用缓存条目。
用户隐私
与数据存储相关的隐私问题一直是数字广告相关各方讨论的重要话题。目前,许多初创公司试图利用设备和用户“指纹识别”方法;它通过各种形式的网络存储在用户的机器上存储唯一的、可跟踪的 id,用于跨网站、广告网络或两者的测量。诉讼还涉及 Bluecava 和 Ringleader 这样的公司,因为他们复杂的用户检测技术,利用 HTML5 存储和数据库来锁定和跟踪未知用户。开发人员甚至开发了被称为“僵尸 Cookie”的技术,这种技术可以在几乎所有情况下持续存在,因为它在各个领域存储值,包括 web 存储、Cookie 和数据库。
最后,HTML5 存储很有前途,但隐私有点令人担忧。如果你需要支持早期的浏览器,你可以利用网上一些很棒的 polyfills 在商店试试这些:github.com/marcuswestin/store.js
和github.com/jensarps/IDBWrapper
。你可以在 http://dev.w3.org/html5/webstorage 的了解更多关于网络存储 API 的信息,在 http://dev.w3.org/html5/webstorage#privacy 的了解更多关于第三方广告网络中用户隐私的信息。
网络工作者
你很可能在浏览网页时看到过浏览器通知(见图 6-6 )。
图 6-6。“浏览器无响应”屏幕
我使用 Chrome,但其他浏览器有类似的消息向您(作为用户)显示页面内容变得没有响应,并要求您停止并清除代码执行。无论信息是什么,你都会觉得浏览器让你失望了。不要烦恼;谷歌的 Web 工作器 团队在新浏览器中推出了一个惊人的新功能。
当执行密集型脚本时,浏览器可能会变得无响应,直到页面上的代码(或广告)最终执行完毕。在某些情况下,这可能需要一段时间,最坏的情况是,它永远不会停止执行。这可能会将用户锁定在用户界面 (UI)元素之外,暂停动画,停止视频播放,或者最糟糕的是,使浏览器崩溃。
这里发生的事情是,浏览器试图完成解释和运行有问题的脚本,它将利用所有可用的系统资源来这样做。为了在新的现代浏览器市场中解决这个问题,可以使用网络工作者。
本质上,web worker 是由浏览器在后台解释的 JavaScript,独立于其他脚本和 DOM,最终不会影响整体性能。这真的很牛逼;你可以继续在广告创意的用户界面中做任何你想做的事情:点击、轻击、悬停、滚动——你明白了——所有这些都是在工作脚本并行运行的同时“帮助”其他脚本和内容中的功能。Web 工作者使用 JavaScript 提供了一个非常需要的多线程方法来进行创造性开发,如图 6-7 所示。
图 6-7。典型网络工作者工作流程演示
希望在看完图 6-7 后,你会同意委派另一个工人来做你的工作比你自己承担所有工作更有效率。这是网络工作者努力要实现的目标。他们将繁重的 JavaScript 执行任务分解成多个工作线程。
在 Web 工作器 出现之前,开发人员需要变得狡猾,将他们的代码分解开来,这样浏览器就可以一次解释更小的“代码块”。这相当于在单线程浏览器世界中使用劣质的多线程方法。显然,这从来没有真正工作得太好,因为它要求脚本严重依赖于计时器和间隔,所有这些都大大降低了体验,这取决于用户的机器资源 。对于用户来说,它也经常产生不希望的“突突”或交错加载的效果。
最初是 Google 在 Gears 项目 中提出的一个概念,Web 工作器 最终从其他浏览器供应商和 W3C 那里获得了足够的认可,从而产生了自己的规范。通过将物理或数学负载到一个单独的线程上,它可以真正地加快搜索输入、数学计算甚至复杂动画的文本过滤。有人说粒子发生器吗?
Web 工作器 是模块化项目代码的好方法,也很有创意。如果您有 UI 代码,允许它成为标记的一部分,并独立于 worker 脚本加载它,worker 脚本可以处理随机数生成器或其他与 UI 不直接相关的东西。
注意网络工作者需要被托管在本地或远程服务器上才能工作。
广告业的网络工作者
在广告业,网络工作者可以极大地提升用户体验。我们终于有了一个独立于页面上的任何东西在后台运行 JavaScript 的 API,这将允许长时间运行的任务被完成,而不会使页面无响应。如果你用 JavaScript 做任何种类的计算或复杂的算法,你绝对应该选择使用 web worker,如果它们在你的目标浏览器中可用的话。最终用户将获得更好、更快的体验。让我们来看看如何使用一个简单的 worker,它从浏览器中的 Navigator 对象 返回用户的信息(参见清单 6-6 )。
清单 6-6 。 网络工作者广告示例 (主脚本)
<!DOCTYPE HTML>
<head>
<script>
if (!!window.Worker) {
var worker = new Worker('worker.js');
// Receive the message from the worker thread
worker.onmessage = function (event) {
var workerMsg = event.data;
document.write(workerMsg);
};
} else {
console.log('No Worker Support')
}
</script>
</head>
<body>
</body>
</html>
//Code in worker.js file
for (property in navigator) {
postMessage("<b>" + property+"</b>: "+navigator[property]+"<br>");
}
从我们的例子中可以看到,我们不是通过编写来设置 worker.js 脚本文件,而是通过编写 var worker = new worker('worker.js ')来创建一个新的 Worker 对象,并将脚本文件的位置传递给它;。
接下来,worker 脚本将运行其 for 循环,该循环将通过 postMessage 调用返回用户的 Navigator 对象的所有属性。回到主脚本,我们通过编写 worker.onmessage 来处理 postMessage 调用;通过该事件,我们调用一个新变量 workerMsg,并将其设置为 event.data。
最后,我们只是将结果输出到 DOM 供您查看,但实际上,这些信息可以用于更具体地绑定到广告服务器的其他目的,例如检测用户的用户代理、平台、应用名称和版本号。
有很多方法可以利用一个工人。也许你想做一些复杂的数学或重复的动画功能;无论哪种方式,请记住,性能最终决定一切,在广告中,以及在一般的网络上,提供快速的体验大有帮助。
注意 Web 工作器 不能访问以下 JavaScript 对象:DOM、窗口、文档和父对象。
克-奥二氏分级量表
你介绍过两个不同人群的人互相认识吗?比起让他们在没有你的情况下第一次聊天,你通常会促进介绍和对话,以确保双方彼此感到舒适。同样的原则也适用于网络上的资源共享。跨来源资源共享(CORS) 定义了当使用普通 HTTP 请求访问来自不同来源的资源时,浏览器(客户端)和服务器(主机)可以并且应该如何相互通信。
CORS 允许浏览器和服务器了解彼此的足够信息,以确定请求或响应是否应该发生。这意味着需要在服务器或主机级别以及客户端级别进行一些配置。CORS 是一种规范,它允许跨域请求的开放访问资源共享,而不受“同域”策略的限制,该策略授权运行在来自同一站点的页面上的脚本访问彼此的方法和属性。
让我们面对现实吧,我们经常需要从一个资源请求数据,而这个资源与我们请求的资源没有相同的域。对于这一点,有一些变通办法,比如使用 JSON-P 或定制代理服务,但是这需要更多的操作时间来开发——此外,在您需要的时候请求您需要的东西,并且知道来源可以被客户端信任并且您被允许这样做,这不是很好吗?回到上面的例子,因为我们的两个朋友相遇了,他们应该感到足够舒服,可以在将来互相拜访。
注意在
json-p.org
有更多关于 JSON-P 的信息。
广告界的 CORS
假设 DoubleClick 上的一个广告想要访问网站www.nytimes.com上的一些信息。这种类型的整合发行商运营通常是一种路障广告体验,需要创意机构、发行商和广告服务器花费大量时间来开发和完成。由于发布者和广告服务器位于不同的域中,在浏览器的同源策略下,传统上不允许两者之间的任何脚本或对脚本的访问,如前所述。
然而,通过在服务器和客户端支持 CORS,www.nytimes.com域可以添加一些特殊的响应头,允许双击分别访问网站的数据。这可能意味着由第三方广告服务器 DoubleClick 提供的广告可以依赖于由纽约时报托管的脚本,甚至可以解析来自其网站的数据——本质上,成为所有未来数据传输的“白名单”,或者只是在活动期间。回想一下我们在第四章中的画布例子,在那里我们不能引用外部域的图像。现在有了 CORS,我们可以了!在启用 CORS 的情况下,我们可以干净地从外部域提取图像,而不会在浏览器中出现任何错误。当广告服务器成为“白名单”时,这变得非常有趣,某些数据提供商和出版商允许他们从各种可信来源获取信息。让我们看看清单 6-7 中的,我们使用 CORS 从一个域请求数据,以显示响应信息。
清单 6-7 。 CORS API 示例
<!DOCTYPE HTML>
<head>
<script>
var call = new XMLHttpRequest();
var url = 'http://free.worldweatheronline.com/feed/weather.ashx?q=19043&format=json&num_of_days=3&key=XXXXXXXXXXXXXX';
function callOtherDomain() {
if(call) {
call.open('GET', url, true);
call.withCredentials = true;
call.onreadystatechange = gotThatData;
call.send();
}
}
function gotThatData (data) {
console.log(data)
}
callOtherDomain()
</script>
</head>
<body>
</body>
</html>
从清单中,您可以看到我们通过编写 var call = new XMLHttpRequest()来使用 XMLHttpRequest object XMLHttpRequest 对象;。从那里,我们设置另一个变量,url,它将指向免费天气服务,我们试图在那里访问信息。接下来,我们设置一个函数 callOtherDomain(),它将处理对域的请求并提供对函数 gotThatData()的回调,在这里我们只需注销响应(如果有)。
如果你在你的浏览器中跟踪并发出那个请求,首先,你需要你的免费 API 键来请求www.worldweatheronline.com,但是之后,你应该会在浏览器的控制台中看到一些非常有趣的东西——就像你在图 6-8 中看到的一样。
图 6-8。失败的 CORS 请求的演示
这条消息基本上是在告诉你,天气服务的域名还没有建立,CORS 使用的是我的本地主机域名。如果不是这样,您将能够在我们的浏览器中看到响应数据。
为了利用 API,广告需要从其他域获取信息,这意味着服务器的响应头需要包含一些基本的访问,通过 Access-Control-Allow-Origin: *(公共)或 Access-Control-Allow-Origin:example.com
(受保护)。在第一个例子中,它是一个通配符,因此允许任何域访问信息。在后一种情况下,URL 将与您请求广告内容的域相匹配。如果该域与访问控制头不匹配,对广告的响应将失败。
另一个有趣的问题涉及用户的个人和私人数据。在任何形式的广告中,这都是一个重要的话题,尤其是在域之间共享数据时,因此请务必与发布者和数据提供商核实,以确保他们的服务条款(TOS )符合您打算在广告中使用的功能。有很多网络服务你可以“技术上”使用,但是你最不想担心的就是诉讼!
此外,当您与发布者合作进行这些丰富的集成时,一定要获得一个测试页面,但要确保测试页面与活动页面托管在同一个域中,并尽可能地代表发布当天的体验。如果您要在广告服务器、发布者和数据提供商的域之间发布和请求数据,它们都需要 CORS 访问权限才能做到这一点。我见过许多活动被“列入白名单”到一个沙盒或测试帐户,只是为了让它上线后就破产,因为内容托管在不同的域上。
最后,请记住,正如 cani use(caniuse.com/#feat=cors
)所概述的,CORS 还处于工作草案规范中,但它很快显示出在所有主流浏览器中的采用。在 www.w3.org/TR/cors 有更多关于 CORS 规格的信息。同时,请访问enable-cors.org
,深入了解如何在您的服务器上启用 CORS。
微观数据
万一你想进一步扩展 HTML5,microdata API 为你的 HTML 标记增加了一个补充的语义层。有了这些添加的信息,搜索引擎、浏览器和机器阅读器可以挖掘标记中的所有元数据,并最终为不同的设备提供更丰富、适应性更强的体验,包括那些可以帮助有特殊需求的个人的设备(如果开发人员提供了这些信息)。微数据在标记属性中使用简单的名称/值对来定义项目。在动态广告或素材标记中,从语义上了解一个值最后更新的时间,甚至只是跟踪创意的变化,这真的很有帮助。在下面的例子中,使用 itemprop=date,您可以将时间戳直接添加到广告的标记中,并在以后解析或过滤特定的信息。让我们来看看一些样本标记(见清单 6-8 )可能包含在销售饮料产品的动态零售广告中。
清单 6-8 。 微数据示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<body>
<span itemprop=products>
<span itemprop=name><a itemprop=url
href="http://www.retailer.com/soda">Soda</a></span>
<time itemprop=date datetime="2012-06-04">Last Updated</time><span itemprop=name><a itemprop=url
href="http://www.retailer.com/juice">Juice</a></span>
<time itemprop=date datetime="2012-06-14">Last Updated</time><span itemprop=name><a itemprop=url
href="http://www.retailer.com/milk">Milk</a></span>
<time itemprop=date datetime="2012-06-05">Last Updated</time><span itemprop=name><a itemprop=url
href="http://www.retailer.com/beer">Beer</a></span>
<time itemprop=date datetime="2012-06-10">Last Updated</time>
</span>
</body>
</html>
现在,您可以解析标记中的所有 itemprop=products 节点,同时引用 itemprop=date 和 datetime 属性。如果您在任何地方看到与当前日期不同的日期产品,您就知道该产品没有更新。这也是可访问富互联网应用(ARIA)的良好实践;尽管它不是(至少到 2012 年底还不是)网络广告的标准,但它仍然是网络内容开发的绝佳实践。有关微数据 API 或 ARIA 的更多信息,请参见www.w3.org/TR/microdata/#using-the-microdata-dom-api和www.w3.org/TR/wai-aria。
摘要
在这一章中,我们仅仅触及了这些有用而强大的 API 的皮毛。为了找到更多信息并深入了解每一种方法,请深入研究代码并尝试各种可能的方法。所有这些 API 和即将出现的类似技术都可以归类为现代网络,它们将影响未来广告的创作方式。
这一章涵盖了很多 API,老实说,如果我要列出所有其他与 HTML5 密切相关的 API,单单这一章就可能是一本非常大的书。只知道浏览器发展很快,市场竞争巨大。这些新兴特性从 W3C 和 WHATWG 中获得标准还需要一段时间,这些委员会通常很难跟上!也就是说,尽可能多地收藏有用的信息,并使用像 http://html5please.com 这样的在线工具来缓解你的开发困境。
在本章结束时,你应该知道还有一个 API 我们还没有讨论,一个如此庞大和开创性的 API,它有理由有自己的一章。媒体 API 就是那个 API,它是真正的 HTML5 规范的很大一部分。仅这个 API 就引起了许多争论,所谓的 Flash 与 HTML5 之战,以及过去几年网络上的整体混乱。下一章将关注 HTML5 中最流行的特性:浏览器中的本地音频和视频支持。
七、HTML5 媒体
在本章中,您将学习如何使用新的 HTML5 video 元素在跨浏览器的广告中部署视频。我还将介绍当浏览器不能识别新的视频元素时对插件的故障转移支持。在处理视频时,有许多事情需要注意,包括浏览器支持、转码、压缩、交付等等。本章不会让你成为专家,但它会给你一个自学的平台,这样你就可以在处理视频和网络标准时做出更明智的决定。
过去,Flash 被用于独立于操作系统的漂亮的跨浏览器视频体验。无论您是向支持 QuickTime 的 Mac 用户部署视频,还是向支持 Windows Media Player 的 Windows 用户部署视频,Flash 都是一个无处不在的选项,只需部署一次视频,就可以通过一种普遍接受的格式(FLV)将视频发送给每个人。因为 Flash 播放器在所有的桌面屏幕上无处不在,这就创造了一个可以在整个生态系统中完美运行的视频解决方案。然而,随着新兴的手机和平板电脑市场,营销人员和创意开发人员现在面临着使用 HTML5 的新视频元素构建“仅浏览器”解决方案。有了 HTML5 ,视频现在是浏览器架构的一流成员。这意味着视频现在是 HTML 规范的一部分,就像段落和 div 一样。
在我从事开发工作之前,我大量参与了视频制作和后期制作,所以我知道内容创作者为了实现高质量的作品所付出的努力。处理在线视频所需的格式、编解码器 和数学知识可能会让人精疲力尽,因此我将介绍浏览器可以解码的格式,并在此过程中提供有用的提示。如果您对哪些视频格式适用于哪些浏览器、什么是编解码器以及如何使用它们来获得最佳质量,或者如何准确遵循出版商和设备规范感到困惑,本章将通过关注行业术语来快速理解这一切。本章将详细解释如何为 HTML5 浏览器和设备开发、设计和优化数字媒体内容。我们开始吧!
HTML5 视频
在这一节中,我将讨论 HTML5 中用于控制和处理视频回放的新 API,这无疑是新规范最大的增强之一。HTML5 视频 API 引发了一场大规模的“Flash 已死”的辩论,在网络和广告行业引发了许多混乱和困惑。正如您所了解的,Flash(尤其是视频,具有丰富的功能集和无处不在的播放器,如 GPU 加速视频播放、自适应比特率流和针对内容创作者的数字版权管理保护)长期以来一直是网络广告之王。然而,随着 HTML5 现在允许原生视频支持,你还需要依赖 Flash 吗?
当 HTML5 视频在 2007/2008 年随着苹果 iPhone 和后来的 iPad 的推出而爆发时,出版商和内容所有者惊慌失措地想出如何在新设备上提供和访问他们的视频内容;目前,如果你想让人们看到你的视频内容,你需要考虑 HTML5 视频以及 Flash。当你的目标用户是使用旧操作系统和浏览器(比如 IE8)以及移动和平板设备的用户时,这一点尤为重要。
你很可能知道在你的下一次数字营销活动中有一个视频是非常重要的。当前的数字视频市场规模巨大,2012 年约为 40 多亿美元,而且近期没有放缓的迹象。但是,在这个新的现代网络中,如何跨屏幕、设备和浏览器提供视频内容呢?HTML5 视频对于任何内容制作者、发布者和设计者来说都是一个大新闻,因为通过在 HTML 标记中实现一个简单的视频标签,您现在可以非常轻松地创建一个视频播放控制器。在我展示其简单性之前,我将与您一起回顾一下它是如何使用 Flash 实现的。清单 7-1 展示了一个使用这种方法的样本视频。
清单 7-1。 Flash 视频播放举例
<div id="flashContent">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="640" height="360" id="VideoTest" align="middle">
<param name="movie" value=" VideoTest.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--[if !IE]>−−>
<object type="application/x-shockwave-flash" data="VideoTest.swf" width="640" height="360">
<param name="movie" value="VideoTest.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/img/get_flash_player.gif"
alt="Get Adobe Flash player" /></a>
<!--[if !IE]>−−>
</object>
<!--<![endif]-->
</object>
</div>
我想你会同意,仅仅在屏幕上显示一个视频就需要很多代码!现在,要在广告创意中实现 HTML5 视频元素,只需通过编写以下代码在 DOM 中创建视频元素:
<video></video>
接下来,您将需要包括一些属性来为您的特定用例定制视频体验。在下面的例子中,我包含了一个源、一个高度属性和一个宽度属性:
<video src='yourVideoFile.mp4' height='640' width='360'></video>
通过编写这些内容,我已经指示浏览器呈现一个 HTML5 视频元素,以 640x360 的尺寸播放文件 yourVideoFile.mp4。如果您想要包含视频控件,只需通过编写以下代码添加另一个属性:
<video controls src='yourVideoFile.mp4' height='640' width='360'></video>
浏览器现在将呈现玩家的控件。否则,您可以隐藏控件并创建自己的控件。可以通过使用 CSS 样式化控件元素和使用 JavaScript 处理视频行为来实现这一点。显然,这种方法比基于 Flash 的例子更加简单。
让我们首先看看驱动 HTML5 视频的标记,并解构其语法,然后我将进入开发的本质。考虑一下清单 7-2 中的代码。
清单 7-2。 HTML5 视频回放示例
<html>
<head></head>
<body>
<video>
<source src="sample.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src=" sample.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>
</body>
</html>
前面的代码使用新的 HTML5 视频标记和必要的源标记,这允许浏览器调用支持的视频文件。理想情况下,每个浏览器都可以处理一种支持的文件格式。如果是这种情况,让视频源内联 也可以,如下例所示:
<video src="sample.mp4"></video>
确保托管和传送文件的服务器设置了正确的 MIME 类型,以传送每个视频文件的文件格式,这一点很重要。另外,一定要指定 type 属性,这样用户的浏览器就不会下载它不能播放的文件。本质上,用 MIME 类型和编解码器 来指定类型允许浏览器有效地选择它需要的文件。
所以,你可能会问,“如果我的广告活动需要达到尽可能广泛的受众,会发生什么?包括对老 IE 版本的支持?”简单来说,你真的有两个选择:要么使用谷歌的 Chrome 框架,要么进行快速故障回复。
谷歌的 Chrome frame 在 IE 浏览器中注入了一个 Webkit 渲染引擎,让你能够在较老的 IE 环境中渲染 HTML5 内容。或者,使用快速回切将允许您的用户首先获得 HTML5 视频,如果不支持视频标签,将通过 SWF 文件的对象标签使用之前的方法。
HTML5 视频对浏览器来说是一个很大的进步。视频元素支持一系列特性和属性,并且在当前浏览器市场中的支持几乎是稳定的。然而,与所有新兴事物一样,它可能会有一些不一致之处,并且它不会因为其碎片化而停留在视频元素本身。跨浏览器、屏幕和设备的支持需要大量的源视频文件来实际回放 HTML5 视频标签中的视频资源。正如您可能已经猜到的,创建、调整大小、转码和托管所有不同的素材版本需要一些时间和金钱,如果您正在谈论多点流,您甚至需要创建更多的内容(稍后将详细讨论这些主题)。一个值得访问的链接是caniuse.com/video
,它可以更好地帮助你开发跨浏览器的视频。
内容创建
创意机构专门为各种屏幕拍摄视频。你再也看不到在线广告单元中重新定位的广播电视广告。他们通常会设置路障,用完整的互动视频和声音占据用户屏幕的很大一部分。其他人专门为桌面制作场景,并在不同屏幕上无缝工作的环境中拍摄他们的演员。在任何情况下,数字广告都是关于创造性地产生影响,大多数有影响力的广告都有视频。既然您已经了解了构建 HTML5 视频元素的内容,那么真正精彩的部分就在您将视频元素与 canvas、SVG 和 CSS3 等其他新兴 web 技术集成在一起的时候。记住这一点,你就可以在下一次在线活动中创造出一些令人惊讶的丰富功能和图形。然而,在你走上这条路之前,有一些东西你想用在视频元素上,也有一些你想避免的。让我们看看每一个,从你应该使用的东西开始。
你应该用什么
海报图像是静态图像(或动画 GIF),在视频回放开始之前最初可以看到。我认为这是你的 CTA 信息,吸引用户点击并播放你的视频内容。海报图像不是必需的属性,但是就广告而言,你应该使用它,这样如果你的用户从未点击你的视频,他们仍然会得到一个静态的(或动画)图像或信息。
接下来是控制;控件包括播放/暂停控件、静音/取消静音、搓擦条、当前时间指示器(CTI)以及浏览器本身与视频标签一起使用的全屏图标。给视频添加控制很简单,如下所示:
<video src="sample.mp4" controls></video>
如果您将视频用于动画以外的任何目的,您应该确保您的控件已打开。如果你不喜欢浏览器使用的原生控件,也不用担心;你可以通过 CSS 来设置它们的外观,并通过 JavaScript 添加它们的功能来控制视频。但是,如果您选择对控件使用 CSS 和 JavaScript,请确保删除 video 标签中的 controls 属性。因为视频现在是一等公民,也是 DOM 的一部分,所以您还可以使用最新的 CSS3 属性(如反射、遮罩、渐变、变换、过渡和动画)来设置它的样式(假设您的浏览器支持它们)。你甚至可以在视频元素上使用 SVG 和 SMIL 制作动画。也许您想在视频在屏幕上移动时使用 SVG 滤镜模糊视频,或者让视频元素像栅栏上的大门一样打开。有很多技巧和窍门可以让你的视频在下一次活动中表现得更好、更独特。
你不该用的东西
当你在下一个战役中使用视频的时候,你几乎不应该使用循环属性 ,它会一遍又一遍的播放你的视频。这将创造一个糟糕的用户体验,并让出版商或广告服务公司在活动开始前就将其标记出来。
其次是对自动播放的使用和依赖。自动播放是横幅内强制视频的一个很好的功能,就像动画一样,但一些利用蜂窝网络或数据计划的移动设备,如苹果 iPad 和 iPhone,限制自动播放属性的工作,以保护客户的数据计划不超过他们甚至没有选择观看的内容的限制。如果你确实在桌面广告中使用自动播放视频,确保默认关闭音频。没有人想去一个网站阅读或观看内容,并以完整的声音播放广告。那对每个用户来说都是很差的体验!
另一件要注意的事情是删除视频中的小字体。如果你不这样做,你的视频副本(取决于浏览器的缩放级别)可能会看起来很差,并产生不必要的文本锯齿。
此外,如果你是动画的视频元素,尽一切努力保持视频播放器在一个完整的像素。这将再次消除视频播放器的任何不必要的混叠。
最后,密切关注更大数据速率视频的 CPU 和 GPU 负载。事实上,如果你在播放过程中注意到浏览器停滞不前,很可能是因为你正在播放的视频占用了太多的系统资源。我的建议是进一步优化你的视频(后面会有更多)。
最后,在创建在线视频内容时,你所使用的工具才是最重要的。请记住,HTML5 视频只是在没有插件的情况下在浏览器内播放视频内容的一种方式。如何创造创意内容完全取决于你和活动的要求。我建议使用以下一些工具。对于高端运动图形和在绿/蓝屏上拍摄的抠像镜头,我喜欢 Adobe 的 After Effects(adobe.com/products/aftereffects.html
)。为了 3D 的需要,我使用 http://maxon.net/products/cinema-4d-studio 马辰的 4D 电影院。将两者结合使用可以制作出可以部署到任何屏幕上的精彩视频。使用 Adobe 的 Media Encoder(【http://adobe.com/products/mediaencoder.html】)、Apple 的 QuickTime Pro(Apple . com/us/product/d 3380 z/A/QuickTime-7-Pro-for-MAC-OS-x
)等工具,为设计人员和开发人员提供强大的功能,包括设置压缩、大小、帧速率等,以便根据他们的喜好和出版商的要求调整他们的视频内容。
编码和代码转换
现在,您已经了解了视频资源的内容创建部分以及 HTML5 视频标签的基本构建块,您可以进入视频编码和转码的复杂世界了。简而言之,编码是用于视频的初始压缩技术,通常来自后期制作视频工作室,转码是将视频从一种格式转换为另一种格式。
编码
在网络广告如日中天的时代,获取原始的 MOV 或 AVI 文件并将其转码为适合在 SWF 中播放的 FLV 视频是非常常见的。对于初始编码任务 ,这通常是一种无损压缩,这意味着文件的核心保真度保留在输出文件中。当带宽限制不是问题时,这种无损技术或多或少用于传输文件,输出非常适合存档或回放最真实的源视频。
转码
另一方面,转码通常是一种有损压缩技术。当您生成通过 Web 回放的视频文件时,通常使用 Lossy,这通常是为了通过 HTTP 或 RTMP 协议进行传输。有损不会保持原始源视频文件的质量;它牺牲了一些整体视频质量,以获得更小的文件大小。非常好的压缩技术也可以用来以非常小的占用空间保持非常高质量的图片,我将在下面的部分中讨论其中的一些。
对视频进行编码和转码是大部分时间花在网络视频上的地方,你很快就会发现,网络视频的质量取决于用于转码的源文件。我们称之为“垃圾进,垃圾出”规则。基本上,你不能提高视频的质量和播放已经严重压缩或改变很差。视频压缩很像图像压缩;一旦文件中的数据丢失,它就永远消失了!用于网络交付的视频编码/代码转换既是一门艺术,也是一门科学。说真的,可以就其背后的技术、理论和实践写一整本书(许多人已经这样做了)。这一部分不是为了让你成为压缩专家,而是在你下一次 HTML5 活动中处理视频时给你一个高层次的策略。让我们来看看在处理视频时你可以调整的一些设置。
多通道的
多通道编码 ,也称为两通道甚至三通道,是一种使用多通道将视频编码和转码为另一种格式以保持最佳质量的技术。基本上,视频编码器/代码转换器在应用任何压缩之前首先检查视频:这是一次通过。接下来,从开始到结束,以及中间的每一帧,后续的视频传递发生两到三次,以在第一次传递给编码器一些如何进行压缩的指导之后应用压缩。在检查文件时,编码器创建关于源视频的信息,并将该信息写入日志文件;一旦写入该信息,编码器就可以查找该信息,并确定在用户为该过程设置的预定限制内调整视频质量的最佳方式。
多通道编码 仅用于可变比特率编码(VBRs)作业,因为恒定比特率(CBR)编码不为编码器提供任何“让步”来调节每帧的可用比特率。我喜欢把这个过程看作是“会说话的脑袋”视频和“动作序列”之间的区别。正在说话的头部视频通常很少移动,因此帧之间的比特率可以保持一致,并且通常一遍作业就足够了。随着场景中的帧因不同的颜色值、混合和/或严重的运动模糊而变得更加复杂,动作序列需要调整其可用的比特率。该序列通常需要两遍甚至三遍才能在指定的视频比特率内获得所需的质量和大小。这种多通道技术为某些视频可能存在的可变场景差异创造了更好的整体质量。
比特率
比特率通常是开发者在对网络视频进行转码时调整的那些预先确定的用户设置之一。比特率实际上是视频中存储的信息量,在大多数情况下,比特率越高,视频质量越清晰。当然,如果您将 FLV 等高度压缩的视频资源转码为未压缩的编解码器,这是不正确的。压缩算法会将更多的数据写入整个视频,而不会增加图像保真度,但这实际上是矫枉过正,因为图像信息在压缩作业之前就已经丢失了。这种做法将在已经受损的视频中为您提供明显更高的比特率。比特率在 HTML5 视频的交付中发挥着巨大的作用,我稍后将讨论自适应比特率流。
脱颖而出〔??〕〔??〕
在传统的广播电视中,运动图像是以隔行图像格式从电视台前端传输的。这意味着图片实际上将由多条单独的扫描线组成,其中每两到三帧视频将是前一帧和下一帧的混合,从而创建一个交错图像。随着更新的电视和电脑显示器技术的发展,网络上的视频图像是以渐进的方式传输的,这意味着每一帧都是一次传送到屏幕上的独立图像。迷惑?图 7-1 解释道。通过看左边的图像,你可以看到有一个模糊或重影的效果。这种效果就是交错的画面。在右边,你可以看到图像被去交错,或者说是渐进的,它不会产生模糊效果,因为图像是一秒钟的全帧。对于网络交付,最好使用渐进式方法。
图 7-1。隔行视频素材(左)和逐行视频素材(右)之间的视觉差异
FPS
每秒帧数 (FPS) 是组成整个视频序列的单个视频帧。可以把这想象成一组图像组成一秒钟的视频。当你还是个孩子的时候,你有没有制作过一本动画书,你在每张纸上画相同的图片,然后稍微调整一下,这样当你翻阅的时候,它就创建了一个无缝的动画。这本质上就是视频在做的事情。如果你还记得《??》第五章中关于 CSS sprite sheets 的讨论,同样的原理也适用于这里。对于去隔行视频,由于混合帧的出现,典型的 FPS 是 23.976 或 29.97,而逐行视频的典型 FPS 是 24 或 30,因为完整的单个图像在没有混合的情况下被渲染。具有大量快速移动动作的视频通常需要更高的帧速率来对抗不想要的抖动效果,如果您正在寻找超清晰的慢动作视频,同样的规则也适用。一些高端相机每秒拍摄几千帧视频,这可以创造出真正令人惊叹的慢动作镜头,用于创意。同样,对于 web 回放,您通常希望使用 24 或 30 FPS。
长宽比
与图像非常相似,视频也有宽度属性和高度属性。在视频中,很像图像,保持原始尺寸的比例很重要。在视频中,长宽比 是其宽度和高度的比例关系。网络视频中最常见的宽高比是 16:9 的宽屏格式和 4:3 的标准格式。这种比例关系与视频中像素的大小直接相关,因为像素可以是正方形或长方形。你会经常听到这被称为“16 乘 9”或“4 乘 3”保持您正在转码的视频的宽高比很重要,因为这将保持源视频资源和转码后的文件之间的一对一关系。但是,在某些情况下,您的创意会要求您将视频资源调整到非 16:9 或 4:3 设计的大小。在这种情况下,您将使用一种称为信箱或信箱 的技术,在分配的视频空间中的空白区域添加黑条。图 7-2 展示了一个比例正确的视频,其中应用了 16:9 和 4:3 宽高比的信箱和边框。
图 7-2。信箱视频和 pillarbox 的区别
最常见的情况是将视频提供给不同大小的广告单元或出版商的视频播放器。如果广告商的视频资源是 16:9,播放器环境是 4:3,您会注意到视频顶部和底部有黑条或信箱,以保持视频的比例。
工具
在我深入探讨视频编解码器这个大话题之前,你可能想知道为什么在使用 HTML5 时要学习所有这些与视频相关的信息。嗯,视频是目前在线广告中最流行的媒体,确保最佳的视频播放将赢得你的客户。因此,我将介绍需要了解的不同视频属性,以及该领域需要关注的不同编解码器/格式。这一切都归结于为分散的浏览器空间开发和交付最佳的 HTML5 视频。在开始实现之前,让我们看看一些创建 HTML5 视频的工具。
为什么会有所有这些不同的视频设置、变化以及分散的浏览器和设备支持?嗯,专利、版税(即金钱)和压缩质量是阻止某些东西开源和免费使用的原因。我喜欢这样想:每当你有一个真正伟大的产品,你通常会收费使用它,即使有免费的替代品。例如,你为有线电视付费,因为它质量更好,提供更多的频道,而不是标准的空中天线广播,在空中天线广播中,你只能收到有限的频道,而且广播质量很差。目前,如果你想将你的视频内容部署到最广泛的用户群,你需要在 HTML5 空间中容忍这些碎片化的编解码器和视频格式。有许多工具可以帮助你提供在线视频服务。其中许多都是用来转换视频成适当的格式使用免费或购买的程序在您的电脑上。这包括但不限于开源的 FFMPEG(ffmpeg.org
)、FireOgg(firefogg.org
)、QuickTime Pro(apple.com/quicktime
)和 Adobe Media Encoder(adobe.com/products/mediaencoder.html
),甚至更强大的视频应用,如 Adobe After Effects(adobe.com/products/aftereffects.html
)、Avid(avid.com
)和 Apple Final Cut Pro(apple.com/finalcutpro
)。
到目前为止,FFMpeg 是最健壮的,而且它是开源的,这意味着你可以轻松自由地通用转码/编码成各种不同的格式。这个工具可以将任何视频和音频格式转换成适合各种屏幕的格式。如果你习惯使用命令行,我强烈建议你使用 FFMpeg。这很可能是目前最强大的视频转换工具。此外,还有许多用于转换不同格式的插件和库。请务必咨询您的发行商,因为他们需要为他们的播放器提供一定大小的视频资源,并确保经常检查他们的规格并正确调整。
视频编解码器
现在,您已经了解了视频编码和转码的内容,我将谈谈您可以随意使用的视频编解码器,以及在利用 HTML5 视频时您将使用的编解码器。编解码器可能会有点混乱,因为有太多的编解码器可供选择,并且都有一定的变化和浏览器支持。一个视频编解码器是根据您的需要压缩视频的软件,正如您刚刚了解到的所有先前的视频属性,所有这些都可以使用视频特定编解码器进行配置。
本节并不打算让您成为视频编解码器方面的专家,但它会让您知道下次想要在您的活动中包含 HTML5 视频时,以及当您遇到来自各种创意机构的视频素材时,应该注意什么。编解码器具有特定的浏览器和设备支持,并且需要一个耗时的过程来向多个用户正确传送视频。图 7-3 展示了过去 12 年间视频编解码器的激增。
图 7-3。浏览器和制造商支持的各种视频编解码器(来源:【http://appleinsider.com】??
这可能看起来令人困惑,但正如您所看到的,大多数编解码器来了又去,就像许多其他技术一样,在本节的剩余部分,我将只讨论在今天的 HTML5 视频市场上仍然显而易见的编解码器技术,它们是 MP4 (H.264)、WebM (VP8)和 OGV (Theora)。我将排除 VC-1,因为在撰写本文时,没有浏览器支持这种编解码器/包装器变体。
H.264
我现在将讨论可能是现代网络上最流行的视频编解码器,MPEG 的 H.264 。H.264 编解码器是一种高度优化的编解码器,可提供最高的压缩率,对整个视频的质量几乎没有影响。H.264 可以在相对较低的比特率下提供很好的有损质量。H.264 带有许多可调整的参数和功能,事实上如此之多,如果你查找 H.264,你会对这种编解码器的能力感到惊讶。但是,您需要特别注意它的配置文件,即基线、主和高。某些设备(如旧款 iPhones 和 iPod touches)只能支持基本配置文件,而其他高端设备(如台式电脑和蓝光播放器)支持主配置文件到高配置文件。配置文件的级别是在 1 到当前的 5.2 之间的范围内测量的,随着配置文件级别的增加,比特率和通常的质量也会增加。
注要了解更多 H.264 视频,我建议在
sonnati.wordpress.com
阅读法比奥·索纳蒂的作品。
H.264 由苹果、微软和各种其他大公司大力推动,目前苹果、微软和谷歌在其各自的浏览器中支持 h . 264,尽管谷歌已经提到它将停止对编解码器的支持,以支持其 VP8 替代方案(在下一节中对此有更多介绍)。然而,在撰写本文时,谷歌仍然在 Chrome 版本中支持它。此外,Mozilla 甚至讨论过支持 H.264,因为缺乏对其支持的开源编解码器 Ogg Theora 的支持(下一节将详细介绍)。H.264 在其称为 X264 ( x264.nl
)的复杂编码算法上也有免版税的开源版本。
苹果公司是 H.264 编解码器的主要支持者,因为这是其 Safari 浏览器中唯一支持的编解码器,建议通过 Safari 为 iDevices 提供如图图 7-4 所示的编码设置。
图 7-4。苹果对 iOS 设备的编码建议
当您将视频部署到移动 iOS 设备时,关注这张图表非常重要。因为就像整体视频景观在编解码器中被分割一样,苹果自己的设备需要进行特定的调整,以补偿其旧设备,如 iPhone 3G,更不用说 WiFi 和手机网络连接了。这只会增加开发跨屏幕和设备部署的视频的时间。
请记住,H.264 不是自由软件;它由许多不同的公司拥有和申请专利,包括微软,它由一个名为 MPEG-LA 的财团管理。苹果公司为其生产的每一台可以编码和解码 H.264 视频的电脑、设备、相机和配件支付许可证。下次你购买苹果产品的时候考虑一下这个问题,因为你支付的一部分是使用 H.264 技术的能力。
VP8
HTML5 视频领域另一个流行的编解码器是 VP8 。曾经是 On2 的一项技术,后来被 Google 收购,被重新命名为 WebM 编解码器。谷歌一直在推动这一事实上的编解码器,在现代浏览器中使用 HTML5 传输视频时使用。然而,要使它完全成形,浏览器厂商需要采用它作为他们视频需求的标准。正如你刚刚了解到的,苹果和微软并没有太多地采用 WebM,因为他们长期支持 H.264。VP8/WebM 在编码算法和质量上与 h . 264 相当,但更重要的是它没有许可成本,这是开放 web 标准和支持它的浏览器(如 Firefox、Chrome 和 Opera)的巨大胜利。
西奥拉
H.264 虽然是开放标准,但并不是免费的。它是基于各种公司贡献的视频压缩和相关技术专利池,以换取“公平、合理和非歧视性”的许可费。Mozilla、Opera 和其他自由和开放源码的倡导者反对使用任何可能需要许可费的技术来生产或分发网络内容,因为否则将违背他们对开放网络的支持。正因为如此,除了 VP8 之外,他们还依赖于一种开源视频压缩技术,即 Xiph 基金会的 Theora。关于 H.264 的 Ogg Theora 战争结束了,HTML5 工作组成员同意,不要将 Ogg Theora 或 H.264 或任何其他东西定义为通过 HTML5 视频标签提供的视频的“基线”编解码器,而是应该由市场和网络用户及互联网广播公司投票决定(这显然造成了碎片化)。Theora 是早期版本的 Flash Video (FLV)中使用的旧 VP3 编解码器。他们采用了旧版本并加以改进。效率不如 H.264,但开源了。
从历史上看,HTML 总是与其他类型的图像媒体文件一起工作;没有基线图形格式。例如,开发人员自己决定是使用 GIF、JPEG 还是 PNG 格式。现代浏览器都支持它们,在我看来视频也应该效仿。
GOP 和关键帧
在压缩技术中,你有所谓的一组图片(GOP) 。该组由关键帧间隔决定。如果您曾经做过 Flash 动画或任何基于时间轴的动画工作,您会知道关键帧是重要事件发生的重要时间点。在视频压缩中,这些是视频回放中的点,在这些点上,编码/转码引擎有机会休息并重新分析视频内容,以确保其与编码过程的其余部分保持一致。有些编解码器支持不同的压缩算法 ,如 I、P 和 B 帧。
- I 帧:这是压缩率最低的帧,但不需要其他帧解码。
- P 帧:使用前一帧的信息进行解压缩。
- B 帧:这使用视频的前一帧和前一帧来获得参考,并获得最高的智能压缩量。
图 7-5 显示了不同帧类型的视频关键帧。如果您的客户要求您使用 HTML5 视频元素为各种屏幕优化他们的视频内容,请记住这些信息。但是,请注意,某些编解码器仅允许特定的关键帧设置。
图 7-5。压缩的 I、P 和 B 帧
有趣的是,压缩技术决定了编码文件的整体质量和大小;人们经常担心视频的大小,但实际上是大小加上时长。例如,如果您有一个 6MB 的文件,视频持续时间为 1 分钟,这意味着每 10 秒钟的视频就有 1MB 的数据。如果一分钟的视频有 60MB 的文件,那么每 10 秒钟就有 10MB 的数据,即每秒 1MB。所以,你需要在视频的大小和时长之间找到一个好的平衡点。一些机器和解码器根本不够快,无法以如此快的速度解码视频帧。如果数据速率太高而无法处理,你经常会看到机器在播放时被卡住;其他有足够的权力将处理它没有问题,并提供惊人的播放质量。这也是为什么更高端的显卡被用于专业视频编辑设备,以处理高数据速率。然而,对于 Web 和 HTML5 视频,在大小和持续时间之间保持良好的关系,尤其是在向手机和平板电脑等系统资源比台式机慢的设备交付时。
第十六章的规则
关于视频代码转换,最后一点需要注意的是“16 规则”如果您还没有,您会发现在为 Web 创建视频时,处理不同大小的视频资源并需要转码为不同的大小会有很多时间。我之前提到过,视频编码领域有一门科学,没有人比视频专家罗伯特·莱因哈特更擅长这门科学。据我所知,莱因哈特是第一个为这一规则命名的人。基本上,在高层次上,它分解了当执行代码转换作业时以及当机器解码视频以进行播放时,视频应该被转换成的最佳大小。如果你看一下图 7-6 ,你会注意到视频编码最好以 16 的倍数进行,质量会下降到 8(更好)和 4(好)。
图 7-6。 Robert Reinhardt 的图表用于优化视频大小
Reinhardt 的发现揭示了当帧宽度和高度使用 16 的倍数时,视频表现最佳。当您对下一个视频进行转码时,请记住这一点,虽然您可以使用任何宽度,但非最佳尺寸可能会导致质量下降和丢帧,并会对解码回放造成不必要的负担。为了保持最佳输出,您应该始终使用 16、8 或至少 4 的倍数的宽度和高度。倍数越低,质量和性能受到的影响就越大。一个非常好的书签工具是 Reinhardt 在 http://videorx.com/video-sizer 的视频分级器。此工具允许您插入您的数字,并在使用所需设置时获得关于转换工作好坏的即时反馈。如果你有兴趣了解更多关于编码、转码和压缩技术的知识,我强烈推荐你访问他的网站(【http://videorx.com/】??)。
包装纸
您已经了解了您需要了解的关于视频编解码器的知识,所以现在我将介绍支持每种类型的文件格式。容器格式,或包装器,是存储视频信息的文件格式。这是典型的 MOV、AVI 和 FLV 文件格式。这些容器都包含编码的视频信息以及关于文件的基本元数据信息。视频的包装很像图像的 PNG、JPEG 和 GIF 文件。事实上,它们在 HTML 标记中是如此的相似,如果你知道如何使用 img 标签,在你的浏览器中包含视频是非常简单的。
MP4
MP4 是大多数 HTML5 浏览器的常见网络视频格式,如苹果的 Safari、微软的 Internet Explorer 以及目前的谷歌 Chrome。如前所述,它实际上是容纳 AVC/H.264 编解码器的容器格式。对于这种容器类型,文件扩展名会有所不同,可以包括 M4P、M4V,甚至 Adobe 的 F4V。图 7-7 显示了撰写本文时当前的浏览器支持。
图 7-7。当前浏览器对 H.264/MP4 视频的支持(来源:【http://caniuse.com】??
MP4 是处理 HTML5 视频时的常用格式。事实上,根据我的经验,这是你最终要处理的最常见的形式,尤其是在移动设备上运行的广告活动中。广告商将希望瞄准市场上越来越多的苹果 iPhones 和 iPads,将 MP4 与 H.264 结合使用是实现这一目标的唯一途径。
注意移动视频通常在设备的原生视频播放器中播放,而不是在浏览器中。
WebM
另一种视频容器格式是 WebM ,如你所知,它包含了 Google 的开源 VP8 编解码器。简单来说,WebM 可以提供与 MP4 视频一样的质量,而不需要在微软和苹果浏览器上的渗透。此外,如果你关心支付版税或许可费,WebM 格式是你最好的选择,因为它没有专利。WebM 是为 Web 设计的,旨在缓解开放 Web 上的视频问题。谷歌试图提供一种高质量和高效的编码工具,任何人都可以免费用于他们的网络内容,谷歌正在积极努力使 WebM 成为通过 HTML5 视频标签在线提供音频和视频的开源标准。在撰写本文时,caniuse.com
概述了对 WebM 格式的支持,如图图 7-8 所示。
图 7-8。当前浏览器对 VP8/WebM 视频的支持(来源:【http://caniuse.com】??
如果你有兴趣了解更多关于 WebM 视频容器格式的信息,我建议你访问谷歌位于 http://webmproject.org/docs/container 的 WebM 网站。请记住,任何提供给 Chrome、Firefox 和 Opera 用户的视频广告都可以安全地依赖这种格式。
注意安装了 VP8/WebM 编解码器的用户将能够在 Safari 和 IE 上观看视频。
格式
最后,还有 OGG 视频格式 。OGG 是一种开放容器格式,由开源基金会 Xiph 管理。仅举几个例子,OGG 的容器格式包括 OGG、OGV 和 OGA。基于 Theora 的视频压缩算法和 Vorbis 的音频压缩算法,OGG 旨在创建一个真正开源的视频编解码器/包装器,供任何人使用,而不管版税或许可权。很像前面的例子,图 7-9 概述了浏览器对 OGG 视频格式的支持。
图 7-9。当前浏览器对 http://caniuse.com/OGG 视频的支持(来源:
从这些图表中,我想你可以清楚地看到,在 HTML5 视频编解码器支持方面,谷歌 Chrome 是最强大的功能丰富的浏览器。然而,当使用 HTML5 视频时,您的大多数客户都希望跨所有浏览器访问,尽管对 HTML5 视频元素的支持几乎是 100%,但填充该元素的视频编解码器/格式仍然非常零碎,这要求您开发所有这些格式以实现跨浏览器渗透。是的,这确实是一个非常耗时的过程。
为了同时支持 HTML5 兼容浏览器和旧版本浏览器,建议您使用浏览器和设备检测,并通过在视频元素中包含 embed 或 object 标签来优雅地降级到替代视频体验,例如 Flash 故障转移,如下所示:
<video controls height='640' width='360'>
<source src='yourVideo.mp4' type='video/mp4' />
<source src='yourVideo.webm' type='video/webm' />
<! -- Flash Code Here -->
<embed src='yourVideo.flv' width='640' height='360' quality='high' type='application/x-shockwave-flash'></embed>
</video>
通过将闪存故障转移代码包含在视频标签中,如果浏览器无法识别视频标签,它将忽略该视频标签并使用闪存代码。相反,支持视频元素的浏览器不会呈现视频标记中的部分,在本例中是 Flash 嵌入代码。
阿尔法支持
Alpha 视频 是视频的透明部分。通常,视频将在绿色或蓝色屏幕上拍摄,然后在后期制作中使用键,即移除绿色或蓝色背景元素。完成抠像后,视频将被导出到支持 alpha 透明度信息的视频编解码器和格式。这在覆盖页面内容或在广告视频内容和发布者页面内容之间提供无缝集成的视频中很常见。图 7-10 显示了苹果的 QuickTime (QT) 7 Pro 中的编解码器“animation”以及 millions+的设置,millions+代表百万种颜色;另外,视频中保留了 alpha 信息。如果您从客户或代理处获取视频文件,最好使用 Apple 的 QuickTime 打开视频,然后按 Command+I(对于 Mac)或 Control+I(对于 Windows ),这将打开 QT 检查器面板。
图 7-10。苹果 QuickTime 播放器中的百万+信息
这种抠像技术会剔除所有具有相关颜色值的像素,这是您每天都会看到的,甚至可能不会注意到的。事实上,你有没有碰巧看到昨晚的天气预报?嗯,气象学家很可能站在一个绿色屏幕前,而不是一张实际的地图前。这里需要理解的重要一点是,这是任何媒体中视频的一个巨大的功能部分,当然还有在线媒体。在前沿广告活动中,在发布者页面上放置视频(无论是否互动)是必不可少的。一些最具创新性的主屏幕收购通过使用 alpha video 取得了很好的效果。
然而,在 HTML5 视频支持中,目前没有支持 alpha 通道的跨浏览器编解码器/包装器——没有 H.264、VP8 甚至 Vorbis。只有 VP8 显示出未来可以处理支持的承诺,但它仅限于在某些浏览器上工作,最重要的是,苹果的 Safari 没有显示出支持它的迹象,这是对移动设备整体市场份额的巨大损失。很明显,这是一个很大的问题,很快就会得到解决,但在此期间,设计人员和开发人员需要利用 HTML5 的 canvas 元素,在播放期间将视频中的位图数据写入 canvas 元素,并在那里输入像素。你可以在 http://jakearchibald.com/scratch/alphavid 的或者 http://github.com/m90/jquery-seeThru 的找到一个很好的例子。虽然没有真正的 HTML5 视频编解码器支持 alpha 信息,但对最终用户的影响基本相同;但是,请记住性能,因为通过组合两个元素将视频信息写入 canvas 元素,您实际上使浏览器的负载加倍了。在此期间,直到 HTML5 视频本身支持处理阿尔法信息的编解码器;您可以随时回切以使用 Flash Player,因为自 2005 年以来,它就通过 VP6 编解码器支持此功能。
视频传输
所以,你现在知道在网络上对视频进行编码和转码需要做多少工作了;我现在将谈论在网络上实际传送视频。HTML5 视频最大的问题之一是它的交付。传统上,Flash 广告会从流媒体服务器上下载视频,以避免在广告的整体 k 权重中产生任何视频文件大小。然而,对于 HTML5,我们目前受限于标准的流媒体解决方案,正因为如此,大多数通过桌面和移动交付的 HTML5 视频仍然使用基于 HTTP 的渐进式下载作为主要交付方法。虽然这种方法在所有浏览器中都得到了广泛的支持,但它不可避免地会增加广告的权重,并通过更长的“等待”时间来影响用户的体验。当更大尺寸和更高质量的视频素材(HD)的视频比特率增加时,这也变得越来越糟糕。
在视频创作和交付的庞大世界中,最终要定义你想要接触的目标用户群(在广告中通常是每个人)、你可支配的资源以及客户周转时间。在操作上,转换所有不同风格的视频可能是一项非常耗时的任务,因为浏览器和设备需要不同的编解码器和格式。以下部分将帮助您了解该领域当前的问题,如何解决这些问题,以及如何在符合 HTML5 的视频播放器中有效地交付您的内容。
通过视频广告网络和出版商的交付规格可能会很棘手。每个出版商和网络都有自己的规范,这增加了这个领域的混乱。这些规范通常是为了确保对最终用户的影响较小,并确保视频内容达到最大范围,同时尽可能与发布者的视频内容相匹配。以下部分涵盖了当今网络上视频传输的两种方式。
进步分子
渐进式视频传输是指文件从一台服务器上传下来,并存储在客户端以供播放。渐进式交付是一种非常常见的视频传输形式,因为它可以被所有浏览器和设备接受,甚至像 YouTube 这样的主要网站每天都在使用这种方法。渐进式可以允许用户在完全下载之前开始观看视频,因此等待时间显著减少,但它也有很大的成本,因为实际文件是缓存在客户端上的。Progressive 通常是通过 HTTP 协议提供的,因为实际的素材存储在客户机上,所以理论上用户可以保存该素材供以后查看。对于广告来说,这不是一个问题,但对于优质的长篇内容,在这方面几乎没有保护,这使得这种交付形式对内容所有者来说不太理想。清单 7-3 展示了一个 HTML5 视频标签的例子;指向 MP4、WebM 或 OGG 等视频资源,您会看到该视频将被逐步下载。
清单 7-3。 HTML5 渐进式视频示例
<video autoplay src='http://cdn.someSite.com/someVideo.mp4'></video>
如你所见,我正在通过 HTML5 视频源从 someSite.com 的服务器上下载 MP4 视频资源。如果要将这一行代码插入到文本编辑器中,请将其保存为。html 文件,并在浏览器中打开它,您就可以看到视频自动播放。(请记住,您需要更新您的视频 src 属性,以指向实际视频所在的位置。).虽然这种方法在广告场合不太理想,但 IAB 为视频文件大小设定的规范是 2.2MB。有关富媒体指南的更多信息,请访问 www.iab.net/displayguidelines。
流动
接下来,我将讨论第二种网络视频传输形式。流式传输交付是指视频素材由流式服务器提供,并根据用户请求实时呈现给用户。由于素材没有存储在客户端的机器上,流媒体是保护优质内容以及规避发行商文件大小限制的理想选择。出版商和广告服务器可能需要使用流式视频,因为它不会像渐进式下载那样影响广告单元的整体文件大小。常见的流服务器协议是实时消息协议(RTMP) 。这种服务器协议最初由 Macromedia 开发,后来被 Adobe 收购,它支持内容保护加密和 HTTP 隧道以穿越防火墙限制。也存在许多其他流媒体服务器,如苹果 QuickTime 流媒体服务器,但它们的运行和操作都非常昂贵,除非你是一家专注于视频传输的大公司。如果你是 Hulu 或网飞这样的主要内容提供商,流媒体服务器或多或少是保护你的内容免受下载和盗版以及提供良好用户体验的必要条件。
客户可能会要求您进行实时直播,例如在通过网络传输的同时拍摄视频并压缩视频。这在体育、政治和新闻等公开广播的重大事件中很受欢迎。Influxis(influxis.com
)等公司使用基于 Adobe Media Server(正式名称为 Flash Media Server)的技术使这变得非常简单,Adobe Media Server 支持将视频流传输到 Flash 播放器和 HTML5 视频播放器。然而,请记住,也有免费的替代产品,如 UStream、JustinTV 等,但它们不提供与付费服务相同的支持、质量和服务。
从用户体验的角度来看,流媒体也是相当困难的,因为用户不能像渐进式文件那样准确地浏览时间线。这是因为播放器需要使用用户想要的更新来 ping 流媒体服务器,并且因为信息不存在于客户端(像 progressive),所以需要在用户放下视频播放头时发出请求,这产生了一些不需要的视频缓冲。
还有所谓的 HTTP 上的自适应流,它基本上通过标准 HTTP 协议传输小块视频信息,但我将在下面的部分中更详细地讨论这一点。
自适应流式传输
带宽在网络上是一个至关重要的问题,你需要知道你用了多少带宽来通过 HTML5 进行视频传输。越来越多的设备正在访问信息,作为开发人员和设计人员,我们需要尽可能节省带宽,尤其是在通过各种网络连接提供较大文件时。作为广告客户,您需要考虑到用户可能正在无线设备上通过较差的蜂窝网络连接查看内容,或者更糟的是离线查看内容。幸运的是,使用复杂的编程技术;开发人员可以利用带宽检测,并在最终用户请求时向其提供适当的视频文件,同时在用户连接中断时限制播放。
我现在将介绍自适应比特率流 。这项技术算不上新技术,但通过检测和适应各种条件来提供高质量的视频体验比以往任何时候都更重要。在自适应比特率流中,服务器 pings 请求内容的用户,并了解用户可以处理视频回放和比特率质量的级别。之前,我讨论了视频文件的比特率以及比特率如何保存视频素材的所有信息。一旦收集了关于用户处理视频内容的能力的信息,就如描述或清单文件所描述的那样传送适当比特率的视频。这个过程发生在整个视频回放过程中,并且随着带宽的增加或减少而适应或改变。这为最终用户提供了一个无缝的回放,无论连接质量如何,这是一个对长格式内容非常重要的功能,尤其是在移动设备上。典型的使用案例从较低比特率的视频开始,随着带宽被检测到并被发现更加充足而逐渐增加。这个上升时间可能需要几秒钟,所以短格式内容可能看不到效果。
现在,您已经了解了自适应比特率的基础知识,让我们深入了解支持它的各种技术,以及如何在 HTML5 视频工作流中利用每项技术。请记住,视频流可能还没有标准,但当您知道您的广告将针对特定的浏览器和设备时,我们鼓励您使用这些技术。
流媒体
HTTP Live Streaming (HLS) 是 Apple 的规范,用于以 M3U8 文件的方式通过 HTTP 传输视频文件的片段(传输流)。苹果的开发者工具包括一个媒体分割器,这是一个命令行工具,供 Mac 用户分割和创建他们想要使用的视频素材的清单文件。清单 7-4 指示媒体文件分段器(developer . apple . com/library/IOs/# documentation/networking internet/conceptual/streaming media guide/UsingHTTPLiveStreaming/UsingHTTPLiveStreaming . html
)在您的位置获取一个 H.264 文件,并将输出分段到一个 M3U8。M3U8 文件只是一个描述文件,指示 HTML5 视频播放器如何播放视频片段以及特定的视频元数据。在本例中,将段和 M3U8 文件保存在您想要的目标位置,每个块的目标持续时间大约为 17 秒。
清单 7-4。 媒体分割器示例
mediafilesegmenter Your/File/Location.mov -t 17 -f Your/File/Destination.m3u8
由于媒体文件被分割成更小的“块”或片段,因此视频资源的传送是突发的,而不是一个大的渐进式下载,这改善了整体回放体验。这在 HTML5 广告中对您的意义在于,您现在不是定位源资源,而是在您的视频源属性中定位 M3U8 文件。基于前面的命令,清单 7-5 展示了一个清单文件的输出,该文件被称为 M3U8 文件。
清单 7-5。 M3U8 举例
M3U8 File:
#EXTM3U
#EXT-X-TARGETDURATION:18
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-PLAYLIST-TYPE:VOD
#EXTINF:16.984,
fileSequence0.ts
#EXTINF:17.017,
fileSequence1.ts
#EXTINF:16.95,
fileSequence2.ts
#EXTINF:17.017,
fileSequence3.ts
#EXTINF:16.95,
fileSequence4.ts
#EXTINF:17.017,
fileSequence5.ts
#EXTINF:16.95,
fileSequence6.ts
#EXTINF:17.017,
fileSequence7.ts
#EXTINF:16.984,
fileSequence8.ts
#EXTINF:16.316,
fileSequence9.ts
#EXT-X-ENDLIST
HTML5:
<video src=index.m3u8></video>
如您所见,M3U8 文件按顺序描述了所有视频传输流以及传输流(TS)资源的相对路径。请注意,这些可能是到另一个位置的绝对路径,甚至是远程的另一台服务器上的路径。注意这一点很重要,因为您可以在 M3U8 清单中动态插入视频广告。
由于这是苹果公司的定义,而不是一个开放的网络标准,采用仅限于某些设备和浏览器;然而,在最近的新闻中,Adobe 展示了 Flash Player 10.1 中对 HLS 的支持,因此如果您的目标是 HTML5 的 Flash Player 回切,您可以使用相同的交付机制。要查看 HLS 的良好示例,请访问 Wowza 在wowza.com/html/iphone.html
的示例。
注在撰写本文时,HTML5 HLS 支持仅在 iOS、Safari、Android 3.0+中。
快速交货服务(Hot Delivery Service 的缩写)
说到 Adobe 对 HLS 的支持,Adobe 也支持自己的通过 HTTP 传输视频的规范。Adobe 的解决方案叫做 HTTP 动态流(HDS) 。Adobe 有自己的清单规范,用于通过 HTTP 向其开源媒体框架(OSMF)提供视频数据包。与 HLS 非常相似,HDS 需要一个视频资源(MP4)和一个清单文件,即 F4M 文件。
下面是 F4M 清单文件的一个例子;请注意,该文件只是一个简单的 XML 模式,其中有一个基本文件节点,其中包含一个媒体和不同媒体 URL,用于不同比特率的各种视频。
<?xml version="1.0" encoding="utf-8"?>
<manifest FontName3">http://ns.adobe.com/f4m/1.0">
<id>videoRx.com :: Adaptive Bitrate Video Player</id>
<mimeType>video/mp4</mimeType>
<baseURL>rtmp://hosted.videorx.com/vods3</baseURL>
<media url="vid1.mp4" bitrate="385" width="364" height="156" />
<media url="vid2.mp4" bitrate="508" width="436" height="184" />
<media url="vid3.mp4" bitrate="651" width="506" height="214" />
<media url="vid4.mp4" bitrate="1030" width="646" height="274" />
<media url="vid5.mp4" bitrate="1487" width="858" height="364" />
</manifest>
注意在撰写本文时,只有 Windows 和 Linux 操作系统支持 Adobe file packager for HDS。
平滑流式传输
既然你已经看到了苹果和 Adobe 通过 HTTP 传输视频内容的规范,让我们来看看微软的平滑流规范。清单 7-6 展示了为 Silverlight、Windows Media Player 和其他能够平滑流式传输的设备生成自适应流式传输的清单文件。
清单 7-6。 微软的流畅流媒体例子(来源:Silverlight.net)
<SmoothStreamingMedia
MajorVersion="2"
MinorVersion="0"
Duration="5964800000">
<StreamIndex
Type="video"
Chunks="299"
QualityLevels="3"
MaxWidth="368"
MaxHeight="208"
DisplayWidth="368"
DisplayHeight="208"
Url="QualityLevels({bitrate})/Fragments(video={start time})">
<QualityLevel
Index="0"
Bitrate="477000"
FourCC="WVC1"
MaxWidth="368"
MaxHeight="208"
CodecPrivateData="250000010FC38E0B70678A0B7819E80450808E8E7474400000010E5A67F840" />
<QualityLevel
Index="1"
Bitrate="331000"
FourCC="WVC1"
MaxWidth="284"
MaxHeight="160"
CodecPrivateData="250000010FC38A08D04F8A08D813E80450808A1950CF400000010E5A67F840" />
<QualityLevel
Index="2"
Bitrate="230000"
FourCC="WVC1"
MaxWidth="224"
MaxHeight="128"
CodecPrivateData="250000010FC38606F03F8A06F80FE80450800704704DC00000010E5A67F840" />
<c n="0" d="19999968" />
<c n="298" d="4166661" />
</StreamIndex>
<StreamIndex
Type="audio"
Index="0"
FourCC="WMAP"
Chunks="299"
QualityLevels="1"
Url="QualityLevels({bitrate})/Fragments(audio={start time})">
<QualityLevel
Bitrate="64000"
SamplingRate="44100"
Channels="2"
BitsPerSample="16"
PacketSize="2973"
AudioTag="354"
CodecPrivateData="1000030000000000000000000000E00042C0" />
<c n="0" d="22755555" />
<c n="298" d="4992290" />
</StreamIndex>
</SmoothStreamingMedia>
为了节省空间,我删除了 0 到 298 之间的段,但是在本例中,您可以看到,这种格式将媒体分成流索引,其中类型为视频或音频。同样,您应该看到不同交付规范之间的趋势,因为它们都依赖于某种形式的指令或清单文件。
注意某些活动可能需要流畅的流媒体才能使用。这通常是对 Silverlight 播放器、Windows Phone 7 和 Xbox 游戏机的微软视频广告的要求。
MPEG-DASH
从前面的例子中可以看出,通过 HTTP 传输视频的碎片越来越多,竞争越来越激烈。当开放的网络世界寻找一站式 HTTP 交付解决方案,以满足来自 Adobe、微软和苹果的所有平台和浏览器时,DASH promoters group(dashpg.com
)正准备这样做。目前,该小组正在制定一个标准,希望在市场上获得采用,并成为跨浏览器和设备的普遍解决方案,同时使用 HTML5 视频。
遇见 MPEG-DASH 。DASH 代表 HTTP 上的动态自适应流。该小组在该规范上的工作始于 2010 年,目的是为音频和视频提供一种不可知的交付机制,这种机制需要一个标准清单文件来跨防火墙和直接 HTTP 部署。Adobe、Akamai、微软等公司,甚至思科和三星等设备制造商在行业中的采用越来越强劲。
2012 年,Adobe 和 Akamai 在 NAB 会议上发布了 DASH 在最新 Flash 播放器中工作的示例,这引起了业界的极大兴趣,尤其是对 HTML5 支持的意向。DASH 使用所谓的媒体呈现描述 或 MPD 清单来定义其传输流,很像 HLS 中的早期示例清单。DASH 演示文件(MPD)有望成为在 HTML5 浏览器和设备中交付所有视频的全方位解决方案,而不仅仅是 Flash Player。清单 7-7 显示了一个 DASH 清单文件的例子。
清单 7-7。 MPEG-DASH 示例
<MPD type="static" profiles="urn:mpeg:dash:profile:full:2011" minBufferTime="PT1.2S" mediaPresentationDuration="PT0H2M59.23S">
<Title>MPEG-DASH Example</Title>
</ProgramInformation>
<Period start="PT0S" duration="PT0H2M59.23S">
<AdaptationSet>
<ContentComponent id="1" contentType="video"/>
<SegmentTemplate initialization="vid.mp4"/>
<Representation id="1" mimeType="video/mp4" codecs="avc1.64001f" width="1280" height="720" startWithSAP="1" bandwidth="534520">
<SegmentTemplate timescale="1000" duration="9750" media="vid.mp4." startNumber="1"/>
</Representation>
<Representation id="2" mimeType="video/mp4" codecs="avc1.64001f" width="1280" height="720" startWithSAP="1" bandwidth="812797">
<SegmentTemplate timescale="1000" duration="9750" media="vid.mp4" startNumber="1"/>
</Representation>
<Representation id="3" mimeType="video/mp4" codecs="avc1.64001f" width="1280" height="720" startWithSAP="1" bandwidth="1607936">
<SegmentTemplate timescale="1000" duration="9750" media="vid.mp4" startNumber="1"/>
</Representation>
<Representation id="4" mimeType="video/mp4" codecs="avc1.64001f" width="1280" height="720" startWithSAP="1" bandwidth="3088816">
<SegmentTemplate timescale="1000" duration="9750" media="vid.mp4" startNumber="1"/>
</Representation>
<Representation id="5" mimeType="video/mp4" codecs="avc1.64001f" width="1280" height="720" startWithSAP="1" bandwidth="3861547">
<SegmentTemplate timescale="1000" duration="9750" media="vid.mp4" startNumber="1"/>
</Representation>
</AdaptationSet>
<AdaptationSet>
<ContentComponent id="1" contentType="audio" lang="en"/>
<SegmentTemplate initialization="vid.mp4"/>
<Representation id="1" mimeType="audio/mp4" codecs="mp4a.40.02" sampleRate="44100" numChannels="2" lang="en" startWithSAP="1" bandwidth="257141">
<SegmentTemplate timescale="1000" duration="9980" media="audio.m4s" startNumber="1"/>
</Representation>
</AdaptationSet>
</Period>
</MPD>
在前面的例子中,您可以看到 MPD 文件实际上只是简单的 XML,概述了视频播放器摄取的指令。您会注意到,在 XML 中,某些节点概括了 DASH player 要解释的指令的表示。DASH 与视频编解码器无关,理想情况下,通过浏览器和设备的采用,MPEG-DASH 将成为通过 HTTP 传输 HTML5 视频的事实标准。如果这种采用,我相信会的,你会看到完全在客户端处理的动态视频广告的非常好的用途。基本上,清单文件实际上只是一个播放列表或描述文件;当观众开始观看开始的几个片段时,描述中后面的片段可以被保留用于目标广告。这将消除在服务器上渲染成千上万的定制视频排列以将它们瞄准正确观众的需要。借助 DASH,可以相当简单地实现真正可寻址的视频内容。
注你会在第十一章中了解到更多关于动态广告的内容。
云服务
你可能会问,“关于视频的编码、转码和交付问题,有这么多讨论,一个组织如何在运营上理解这些问题并实现盈利?”
不用担心,有很多云编码服务 ,如Encoding.com
(Vid.ly)、Wowza、Zencoder、Akamai 和其他旨在为企业和内容所有者缓解这种视频碎片化的服务。这些服务允许您将源媒体素材上传到他们基于云的服务;然后你选择你想要的目标设备和浏览器,它们处理代码转换和交付过程。可以说,你甚至可以打开“遮光罩”,真正自定义你在本章中学到的视频编码参数,也就是说,如果你觉得这样做足够舒服的话。这些云服务通常位于亚马逊云服务器之上,随着更多的请求进入,它们会启动更多的服务器来处理转码作业。这极大地减少了运行和维护几个服务器的开销,这些服务器在给定时刻可能工作,也可能不工作。如果您正在为一个主要的媒体网络构建一个内容站点,或者是一个希望在所有屏幕上进行部署的内容所有者,那么您会想要看看这些白标解决方案中的一个。有一个外部服务处理你的视频转换成所有正确的格式是一件幸事;它允许你“推卸责任”给你的客户,让你从管理、转换和托管所有视频素材的操作噩梦中解脱出来。这个过程适用于 YouTube、Vimeo、Ooyala、Brightcove 和其他网站。我相信随着更多像开源 WebM 编码和播放器无关的 MPEG-DASH 交付这样的解决方案变得可用,我们作为一个行业将会走出碎片化的困境。我希望几年后我们都能反思这一点,并对我们不得不跨越的部署视频的疯狂障碍摇头。
内容交付网络
如果你希望托管你的素材,而不是让第三方来托管,这些云服务中的大多数会自动将转码后的视频文件传输到你的托管服务器上,并允许缓存到内容交付网络(CDN) 。在 CDN 上存储素材(视频、JavaScript 文件、CSS 文件、图像等)允许素材存储在共享网络上的多个服务器位置。在多个服务器上缓存这些素材被称为边缘缓存。本质上,您将素材放在网络的最边缘,因此请求素材的用户不必向离他们太远的位置发出 HTTP 请求。我喜欢维基百科给 cdn 的定义:
CDN 是一个包含数据副本的计算机系统,放置在网络中的不同点,以最大化带宽,通过网络从客户端访问数据。与所有客户端访问相同的中央服务器相反,客户端访问客户端附近的数据副本,以避免该服务器附近的瓶颈。
来源:维基百科
你可以在图 7-11 中看到这个过程的可视化。
图 7-11。网络上单个服务器和多个服务器的过程(CDN)
图 7-11 在左边展示了一个服务器如何包含数据,而右边的图像(CDN)有多个数据副本来支持多个用户请求内容。事实上,如果你正在建立任何大型企业视频网络,如 YouTube、网飞或 Vimeo,CDN 将是你的用户的一个要求,因为它将加快视频播放到用户机器的响应时间。
HTML5 视频开发
对于许多浏览器来说,HTML5 video 仍然是一个相对较新的功能,有些技术已经做了很长时间,比如 Flash,浏览器需要花时间来实现规范并获得用户的采纳。很明显,当谈到视频编解码器和交付时,这是一个碎片化的空间,但对于全屏支持和字幕来说更是如此。
全屏 API
全屏 API 是 Flash 和 Silverlight 等插件已经有一段时间的特性,它也正在成为浏览器的一个特性。目前,浏览器中的大多数全屏选项只是将视频对象缩放到浏览器窗口的高度和宽度,而不是接管显示器全屏的预期方法。这是在广告中提供游戏的广告商特别是娱乐客户喜欢的另一个功能,因为它允许用户完全沉浸在内容中,无论是互动游戏还是高清视频预告片。至少可以说,全屏 API 在不同的浏览器厂商中有很大的差异,所以请务必查看 http://caniuse.com/#search=fullsc的最新信息。
全屏 API 的有趣之处在于,当它被支持时,它应该在 CSS 中包含一个伪类。这里有一个例子:
<style>
video:-webkit-full-screen {...}
video:-moz-full-screen {...}
video:fullscreen {...}
</style>
前面的代码允许开发人员和设计人员在全屏模式下自定义视频和广告内容的布局。目前,如果您想对视频或画布元素使用全屏 API,您将需要使用 Webkit 和 Mozilla 的供应商前缀来调用 JavaScript 方法,如下所示:
<script>
someElement.requestFullscreen(); //go fullscreen
someElement.exitFullscreen(); //exit fullscreen
</script>
请注意,在 Opera 的新版本中,您不必这样做,因为有本地支持!
字幕和说明文字
HTML5 视频的另一个发展中的功能是所谓的文本轨道 API ,它将允许全球观众访问视频内容。例如,广告和广告商可能希望将其内容的画外音作为字幕,并普遍使用创意元素,这意味着只要字幕使用正确的语言,就可以让单个视频资源在多个位置运行。Google I/O 演示中的图 7-12 显示这可能是一个非常有益的特性。
图 7-12。与美国接入需求相比的互联网使用情况
虽然这只是整个市场的一小部分,但我们不应该将这些用户排除在在线体验之外。网络应该为每个人服务!利用字幕的另一种可能方式是在视频播放时包含相关数据。想想基于位置的齿轮报价,并通过字幕文本添加本地化的方向。使用字幕的一个好处是它们是可搜索的,因此内容提供商和出版商也将从 SEO 增长中受益。WebVTT 文件 概述了用于视频解析的描述文件,并收集了回放时应该在屏幕上预设的信息。清单 7-8 演示了 WebVTT 文件格式。
清单 7-8。 WebVTT 示例
WEBVTT FILE
0:00:00.000 --> 0:00:02.000
<b>Hello, World!</b>
0:00:03.040 --> 0:00:06.920 T:60% A:middle
Just <i>dropping</i> by to say <i>HELLO!</i>
在这段代码中,一个示例 WebVTT 文件在视频回放时显示屏幕上的文本。正如你所看到的,在 0 秒和 2 秒的时间之间,单词“Hello,World”将以粗体文本出现。使用一些基本的 HTML 标记来加粗、倾斜和加下划线,以及使用中间位置,你可以真正地给副标题内容添加一些味道。当前规范允许水平文本位置、对齐和垂直线位置。您甚至可以使用 CSS,通过一个名为 cue 的新伪元素,根据您的喜好来设计标题。参见清单 7-9 了解更多关于如何在 CSS 中实现 cue 元素的信息。
清单 7-9。 WebVTT Cue 示例
WEBVTT
1
0:00:00.000 --> 0:00:05.000
<b>Hello, World</b>
2
0:00:05.000 --> 0:00:10.000
How <i>are</i> you <i>,<c.green>Today?!</c></i>
CSS
<style>
.green {
color: green;
text-transform: uppercase;
}
</style>
HTML
<video width="640" height="360">
<source src="someVideo.mp4" type="video/mp4" />
<source src=" someVideo.webm" type="video/webm" />
<source src=" someVideo.ogg" type="video/ogg" />
<track src="helloWorld.vtt" kind="subtitles" srclang="en" label="English" />
</video>
注意确保你的服务器的。htaccess 或 http.conf 文件被配置为支持 VTT MIME 类型。请使用 AddType text/vtt .vtt。
使用 HTML5 视频中的 track 标签,您可以显示字幕、副标题和/或关于视频内容的元数据,使用前面的示例,您可以看到您甚至可以将特定的 CSS 规则指向副标题信息。track 元素的文件格式使用一个 WebVTT 文件,浏览器支持目前是有限的,但它即将到来!使用前面的代码,你应该会看到一个类似于图 7-13 的例子。
图 7-13。 WebVTT 视频字幕
如果您没有看到这一点,请确保您的浏览器支持 WebVTT 和 HTML5 视频轨道元素;如果你的浏览器两者都不支持,我建议你使用一个很棒的叫做 captionatorjs.com 的 JavaScript polyfill。
这可能是使用网络标准的动态视频广告的巨大进步。真正令人兴奋的是,如果 WebVTT 格式开始支持更多的 CSS 功能,甚至 CSS3 的功能,包括变换和动画,您将有能力在视频上进行一些非常真实的动态内容插入。在那之前,我们只能等待并找出答案。关于 WebVTT 规范的更多信息,我鼓励你访问dev.w3.org/html5/webvtt
,如果你有兴趣了解你的 WebVTT 是否有效,你可以将有用的链接【http://quuz.org/webvtt】?? 加入书签。
注意我将在第十二章中讨论其他新兴的 HTML5 视频功能,如网络摄像头和麦克风接入。
视频测量
如你所知,视频的很大一部分是对广告客户的衡量,这样他们就可以看到他们的活动如何为他们服务。他们通常想知道观众观看视频时视频的表现如何。测量还包括视频开始、完成、四分位数、播放、暂停、重放、声音开/关等。几乎任何用户操作的开关、按钮或开关,广告服务器都会报告。HTML5 视频 API 通过 JavaScript 公开所有这些视频属性,因此附加事件和跟踪调用非常简单。有关所有视频属性的更多信息,请访问www.w3.org/2010/05/video/mediaevents.html。
QOS
除了正常的广告服务器报告,广告商还可以将分析引擎嵌入到他们的视频内容和视频播放器中,以实时报告视频的服务质量(QOS)。Akamai 等公司利用其媒体分析工具,这是一种可以捆绑到视频播放器中的 API,因此可以对视频进行实时技术分析。这种分析可以包括服务的最高比特率、带宽和网络连接、每秒帧数,甚至回放帧速率。通过这些测量,公司可以切入可能效率低下的媒体文件,并重新优化以获得更好的用户体验。很多这种 QOS 与视频的“垃圾输入,垃圾输出”规则直接相关,在这种情况下,您只能保持转码后的视频文件的质量;你不能在他们被操纵变坏后再增加他们。这些分析允许广告商、内容所有者和广告服务器测试他们的内容如何表现的真实世界的例子。
视频播放器
随着越来越多的浏览器市场及其各自的用户群支持 HTML5 视频标签,各种视频播放器变得越来越符合 HTML5。YouTube、Vimeo、Brightcove 和其他公司通过提供 HTML5 视频来实现这一点,同时根据需要优雅地失败于 Flash 或 Silverlight 体验。此外,网飞和 Hulu 等需要 DRM 保护的公司依赖于这些插件技术,因为 HTML5 视频规范中没有流保护标准,但有一个标准正在制定中。我已经讨论过的一些交付格式(比如 HLS)可以使用从服务器到客户端的令牌/密钥交换来提供某种保护,但是这个特性目前只在 Safari 浏览器中受支持。
由于广告客户需要将广告部署到各种视频播放器,IAB 和行业工作组已经开发了一个通用的标准规范,用于将广告标签传送到出版商和网络视频播放器。该规范称为“广阔”。
广阔的
视频广告投放模板(VAST ) 是视频播放器的通用标签投放格式。目前在 2.0 版本中,VAST 的目标是通过创建一个所有播放器都可以并且应该遵守的通用定义,来缓解所有各种视频播放器的广告交付要求。VAST 允许在视频内容之间轻松插入广告,也称为视频预播放或流内视频 。视频播放器将通过 URL 请求联系广告服务器,广告服务器将使用有效的 XML 标记进行响应。清单 7-10 显示了一个来自虚拟广告服务器的巨大响应的例子。
清单 7-10。 浩瀚的例子
<VAST version="2.0">
<Ad id="12345">
<InLine>
<AdSystem>Acudeo Compatible</AdSystem>
<AdTitle>VAST 2.0 Instream Test</AdTitle>
<Description>VAST 2.0 Instream Test</Description>
<Error>http://url/error</Error>
<Impression>http://tracking/impression</Impression>
<Creatives>
<Creative AdID="12345">
<Linear>
<Duration>00:00:30</Duration>
<TrackingEvents>
<Tracking event="creativeView">http://tracking/creativeView</Tracking>
<Tracking event="start">http://tracking/start</Tracking>
<Tracking event="midpoint">http://tracking/midpoint</Tracking>
<Tracking event="firstQuartile">http://tracking/firstQuartile</Tracking>
<Tracking event="thirdQuartile">http://tracking/thirdQuartile</Tracking>
<Tracking event="complete">http://tracking/complete</Tracking>
</TrackingEvents>
<VideoClicks>
<ClickThrough>http://www.somedomain.com</ClickThrough>
<ClickTracking>http://tracking/click</ClickTracking>
</VideoClicks>
<MediaFiles>
<MediaFile delivery="progressive" type="video/x-flv" bitrate="800" width="640" height="360" scalable="true" maintainAspectRatio="true">
http://cdn.somedomain.com/video</MediaFile>
</MediaFiles>
</Linear>
</Creative>
<Creative AdID="12345Companion">
<CompanionAds>
<Companion width="300" height="250">
<StaticResource creativeType="image/jpeg">http://cdn.somedomain.com/some.jpg</StaticResource>
<TrackingEvents>
<Tracking event="creativeView">http://tracking </Tracking>
</TrackingEvents>
<CompanionClickThrough>http://www.somedomain.com</CompanionClickThrough>
</Companion>
</CompanionAds>
</Creative>
</Creatives>
</InLine>
</Ad>
</VAST>
从示例中可以看出,XML 概述了视频播放器要处理的许多有用的值,包括各种广告服务器 id、创意和媒体 URL、跟踪节点以及创意的大小。根据这些信息,视频播放器将拥有部署广告所需的一切。
注意有不同版本的广告可以投放:线性和非线性。线性表示它发生在视频内容之前,而非线性发生在内容中间,通常作为叠加。
如果您要测试前面的巨大广告标签,它会失败,因为它只是一个模拟;但是,您可以通过访问 IAB 的网站并下载一些样本(http://IAB . net/guidelines/508676/digital video/vsuite/vast/vast _ copy/vast _ XML _ samples)来了解这些样本标签是如何工作的。一旦你得到一个样本,打开谷歌位于developers . Google . com/interactive-media-ads/docs/VAST Inspector _ dual
的 VAST Inspector 并粘贴广告标签。你应该看到一些示例内容,如图图 7-14 所示。
图 7-14。典型的流内巨幅广告
请记住,许多出版商和广告网络依赖于出版商端平台,如 Adobe 的 Auditude(adobe.com/products/auditude.html
)或平台(theplatform.com
)来处理他们的媒体内容和传播他们的广告。这些工具可以将视频资源编码为所需的规格,以便它们可以跨平台和设备运行。使用这个平台对广告商和广告服务器同样有利,因为他们可以利用出版商的交付规范,提供与他们制作的内容质量一样好的视频广告。当内容切换到广告时,这提供了类似广播的体验,反之亦然。
视频播放器广告界面定义
既然你已经知道了如何通过 VAST 向视频播放器提供视频广告,你可能会想,“我如何让它具有互动性?那不会和视频播放冲突吗?”这就是 VPAID 发挥作用的地方。视频播放器-广告接口定义(VPAID) 本质上是一个 API,通过各种暴露的 API 调用,从广告单元内部与视频播放器进行通信。
VPAID API 被嵌入到创意的 JavaScript 中,向发布者视频播放器发出某些命令,例如“暂停视频;用户想要扩展广告”或“您可以恢复播放;用户已关闭广告。这些指令允许播放器内容和广告体验之间的无缝集成。此外,它是由 IAB 和其他机构支持的业界采用的标准。利用 VPAID 的广告与 VAST 协同工作;VPAID 处理交互性,VAST 处理交付。利用这两个优势将使您的广告标签可以轻松地在多个视频播放器上运行,但请确保您联系了某些出版商,以确保他们的播放器符合 VAST 标准,并且可以在开发您的创意执行之前处理 VPAID API。
使用 VPAID,如果广告商想要做与页面周围元素互动的播放器外视频广告,这可能会变得非常有趣。显然,这将是一个相当复杂的媒体计划,因为出版商很可能都需要一个特定的创意版本,但一次性的解决方案可以更容易地完成。有关 VPAID 和 JavaScript API 文档的更多信息,请访问iab.net/media/file/VPAID_2.0_Final_04-10-2012.pdf
;请注意,3.0 版本将很快推出。
VMAP
视频多广告播放列表(VMAP) 是一种新的协议,当内容所有者不控制视频播放器或内容分发出口时,它允许内容所有者描述广告时段或插播应该放置在他们的视频内容中的何处。视频广告增强包括对“可跳过”视频广告的支持,这允许发布者和内容所有者基于可以播放完整或提供可跳过功能的广告来进行不同的定价。此外,还支持在单个广告时段中显示“pod”或多个广告。这允许创建与广播电视类似的体验,在广播电视中,你经常会在 30 秒的广告时段中看到两个 15 秒的广告。欲了解更多关于国际实验室 VMAP 规范的信息,请访问 http://iab.net/guidelines/508676/digitalvideo/vsuite/vmap。
移动视频
移动视频内容 正在快速增加,随着越来越多的人将目光放在更小的屏幕上,广告商很快也会跟进。目前,技术的碎片化很难部署移动广告活动,但使用 VAST 和 VPAID,广告商可以更容易地进入移动视频领域。为了了解当前移动视频的前景,请看图 7-15 中 eMarketer 的图表。
图 7-15。2011 年至 2016 年全球移动视频观众预测(来源:eMarketer.com)
这显示了相当惊人的增长,使用 IAB 的标准交付格式,如 VAST,广告商可以向每个支持 VAST 标签格式的视频播放器交付跨屏幕视频。目前包括 YouTube、VEVO、震颤和 Adap.tv 等,其采用率正在迅速增长。这在桌面和移动上都适用,由于 iOS 不支持 Flash,如果你正在部署到移动设备,你绝对需要开始使用 HTML5 视频。
还应注意,所有视频都在电话设备的本机播放器中播放。使用 CSS 和 JavaScript 来样式化和控制播放器控件不可能发生在移动设备上,除非它在平板设备上内嵌播放。在为移动设备部署时,以下内容应该会让您对视频规范有一个很好的了解:
- 格式:H.264/MP4
- 分辨率:480x360 或 640x360
- 视频时长:15 至 30 秒
- 视频比特率:600k 至 1024 kbps 或更快
- 音频:64k 到 128k @ 44.1kHz 或更快
- 帧速率:24 或 30 帧/秒
- 文件大小:2.2MB 或更小,除非使用流式传输
HTML5 音频
我刚刚详尽地回顾了 HTML5 视频领域,概述了许多可以利用的特性,但也回顾了一些问题。如你所知,没有音频,视频什么都不是,最后在 HTML5 中,音频现在是浏览器的原生功能。很长一段时间,你需要依赖插件或应用在浏览器环境中回放音频,就像视频一样。在接下来的几节中,我将回顾如何使用 HTML5 和 JavaScript 加载音频并与之交互;我还将讨论浏览器不支持 HTML5 时的故障转移,以及目前市场上的支持。我将关注满足所有浏览器所需的不同音频格式。看完前面几节,理解 HTML5 中的音频会容易很多。我先解决了最难的部分,你不高兴吗?
音频标签
HTML5 的新标签是音频标签,就像视频一样,音频在 HTML5 兼容的浏览器中成为一等公民,有许多很好的特性可以利用。让我们通过查看一些代码来深入研究 HTML5 中的新音频元素,以使其工作(参见清单 7-11 )。一定要注意源标签,以满足不同的浏览器环境。
清单 7-11。 HTML5 音频示例
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<audio controls>
<source src="sampleAudioFile.mp3" type="audio/mpeg" />
<source src=" sampleAudioFile.ogg" type="audio/ogg" /> <!—Support Old FireFox -->
<object type="application/x-shockwave-flash" width="250" height="50">
<param name="movie" value="sampleAudioPlayer.swf" />
<param name="FlashVars" value="mp3=sampleAudioFile.mp3" />
<embed href="sampleAudioPlayer.swf" width="200" height="20" name="movie" type="application/x-shockwave-flash" flashvars="sampleAudioFile.mp3"></embed>
</object>
</audio>
</html>
让我们看看前面的代码。首先添加属性控件,正如您从视频部分所了解的,它允许用户看到浏览器对元素的本地控件。对于音频,它看起来像图 7-16 。
图 7-16。html 5 中带控件的音频元素
请记住,您可以像处理视频标签一样处理控件。在示例中,我相信您会同意它看起来非常类似于视频实现,为旧浏览器提供了快速回切,并包括多个音频文件,以支持需要不同音频编解码器和格式的所有浏览器。
音频格式和编解码器
让我们来谈谈在开发利用音频的广告时,您最有可能遇到的不同编解码器。音频比视频稍微简单一点,因为就视觉完整性而言,需要考虑的要少得多;然而,音频仍然必须清晰,并为网络正确压缩。你在下一个活动中瞄准的大多数浏览器都支持表 7-1 中概述的格式。
表 7-1 。HTML5 音频格式和浏览器支持
浏览器 | 版本 | 多媒体数字信号编解码器 |
---|---|---|
微软公司出品的 web 浏览器 | 9+ | MP3,AAC |
铬 | 9+ | OGG、MP3、WAV |
火狐浏览器 | 4+ | 奥格,威 |
旅行队 | 5+ | MP3,AAC,WAV |
歌剧 | 10+ | 奥格,威 |
机器人 | 2.3+ | 设备相关 |
移动旅行 | 3+ | MP3,AAC |
黑莓 | 6+ | MP3,AAC |
正如您从表 7-1 中看到的,音频支持相当分散,因此如果您打算在活动中使用多个浏览器,请确保包含多个音频源。您可能还希望将音频流式传输到您的广告中,并且您需要依靠前面讨论的一种自适应流式传输技术。唯一的区别是,你不使用 MP4 或另一个视频文件,你会包括你的音频文件,并相应地调整比特率设置。最后要注意的是,为不支持音频标签的浏览器提供回切是很重要的,所以利用 Flash 或 Silverlight 等插件来处理这一点。
注意我将在第十二章中讨论 HTML5 音频的更多新兴特性,包括网络音频 API。
音频工具
如果您需要将音频文件转换成以前的格式以支持多浏览器,网上有许多免费服务。例如,如果你打算转换成所有以前的音频格式(OGG、WAV、AAC 和 MP3),我建议你去 http://audio.online-convert.com 看看,在那里你可以转换成这些格式和许多其他格式。
音频 JavaScript API
正如您可能已经猜到的,您可以像在视频中一样使用 JavaScript 来控制音频回放。如果你正在为浏览器的内部播放器定制你自己的控制,这是非常有用的。因为您可能要重新创建播放/暂停和音频开/关的定制按钮,所以您需要利用 JavaScript API 来添加事件和检查格式。清单 7-12 展示了前一个例子,在这里我将展示如何使用 JavaScript 来构建它们,而不是使用浏览器的默认控件。
清单 7-12。 HTML5 音频 JavaScript 示例
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<button onClick="handleEvent(this);">Play Audio</button>
<button onClick="handleEvent(this);">Pause Audio</button>
<button onClick="handleEvent(this);">Audio On</button>
<button onClick="handleEvent(this);">Audio Off</button>
</body>
<script>
var player = new Audio ();
if (document.createElement('audio').canPlayType('audio/ogg')) {
//play ogg file
player.src = 'someAudioFile.ogg';
} else if (document.createElement('audio').canPlayType('audio/mpeg')) {
//play mp3 file
player.src = 'someAudioFile.mp3';
} else if (document.createElement('audio').canPlayType('audio/mp4')) {
//play aac file
player.src = 'someAudioFile.aac';
} else {
//Flash or Silverlight failover
}
function handleEvent (event) {
var t = event.textContent;
switch (t) {
case 'Play Audio' :
player.play();
break;
case 'Pause Audio' :
player.pause();
break;
case 'Audio On' :
player.volume=1;
break;
case 'Audio Off' :
player.volume=0;
break;
}
console.log(t);
}
</script>
</html>
从示例中可以看出,您从 HTML 标记中删除了音频元素,并将其添加到 JavaScript 中。你要做的第一件事是创建按钮来切换你的音频播放/暂停和声音开/关。接下来进入 JavaScript,通过编写 var player = new Audio()行创建一个新的音频对象;。在那里,您检查浏览器可以回放哪种音频格式。在这个条件检查中,您使用 canPlayType 方法来确定它是 OGG、MP3 还是 AAC。一旦确定了浏览器可以播放的内容,就可以通过编写 player.src = 'someAudioFile '来指定您转换为播放器的 source 属性的特定音频格式。从那里,您可以通过单击 Play Audio 按钮开始,该按钮贯穿名为 handleEvent 的 case 语句。最后,通过将 play()或 pause()方法附加到 player 对象,以及将音量调整为 1 或 0,来处理所有特定的事件。给自己一个机会吧!此外,通过访问caniuse.com/#feat=audio
,了解新兴浏览器及其对音频标签的支持。
术语回顾
我在这一章中介绍了很多新的术语和缩略语。为了更好地为您提供快速参考,我将详细概述一些我已经触及的内容;参见表 7-2 。
表 7-2 。HTML5 媒体术语回顾
单词 | 定义或含义 |
---|---|
编码 | 这是根据不同的回放规范为输出准备一个视频项目。 |
转码 | 这是根据不同的播放规范,从一种格式到另一种格式的转换过程。 |
CBR | 这是编解码器的输出比特率数据应该设置的速率,它是一个常量值。 |
可变码率 | 这改变了每个时间段要消耗的输出数据量。VBR 允许在复杂场景中使用较高的比特率,在不太复杂的场景中使用较低的比特率。 |
比特率 | 这是每单位回放时间用于表示音频或视频的位数。 |
英国制药学会会员 | 这是一秒钟内渲染到屏幕上的视频帧数。 |
纵横比 | 这是视频或图像的宽度和高度之间的比例关系;通常是 16:9 或 4:3,但也存在其他比例。 |
多媒体数字信号编解码器 | 这是一种能够对数字数据进行编码或解码的设备或软件。 |
大老党 | 这是编码视频文件中的一组连续图片。 |
阿尔法通道 | 这是为透明度信息保留的像素数据。这通常用于在彼此之上叠加或合成图形。 |
摘要
我们正处于行业的一个巨大转折点,在线音频和视频交付比以往任何时候都更加混乱和重要。客户希望他们制作的视频能够以最佳的质量和清晰的音频传送到每一个屏幕上,而用户希望快速启动的视频质量好,播放时不会出现停顿。然而,由于只有特定的视频格式才能在特定的浏览器、操作系统和设备上播放得很好,因此创建一个无处不在的高质量跨屏幕体验是一项挑战,而且通常非常耗时。
本章涵盖了很多内容,但重要的是要理解大环境,并理解创建、交付和优化网络视频和音频的所有活动部分,尤其是使用 HTML5 的在线广告。如果你使用的是质量低劣的视频资源和用户甚至无法播放的交付机制,你的潜在客户就不会给你时间。如果您的下一个活动需要某种形式的媒体,我建议您回顾一下这一章,这样您就可以确保了解视频创建、压缩和交付的整个流程。但更重要的是,确保你的客户理解。视频,像目前网络上的许多东西一样,是超级碎片化的,但这个过程变得越来越容易处理,你会牢牢抓住竞争,因为你现在正在处理它。不要害怕在下一次广告活动中使用 HTML5 视频,并寻找与 VAST 和 VPAID 的集成点,以帮助加快您的活动需求。这将确保你的视频可以跨媒体购买,而我介绍的技术将确保它可以跨浏览器和设备。尝试不同的压缩技术,并开始熟悉使用 JavaScript APIs。此外,确保在不同的网络条件下,在不同的设备上测试您的创意和视频,包括移动设备、平板电脑和操作系统。如果在时间紧迫的情况下很难将所有事情都考虑进去,请记住我提到的帮助你快速开始的在线服务。
本书接下来的几章是关于移动设备的,我会在这几章中更多地讨论视频。把你在这里学到的东西应用到未来。
八、移动网络广告
我认为可以肯定地说,移动和平板电脑市场推动了 HTML5 的出现。苹果发布 iPhone 和 iPad 的唯一原因是它们都不支持 Flash 播放器,这使得 HTML5 成为一个家喻户晓的名字和推动移动领域发展的必要技术。本章将重点关注 HTML5 广告,因为它与不断增长、不断变化且略微分散的移动领域相关。在我写作时,移动市场充斥着各种浏览器、设备和操作系统,更不用说支持不同 HTML5 的各种浏览器和操作系统的几个版本了。市场实际上是相当分散的,至少可以这么说,但不要担心,我一定会引导你通过这一切。
到目前为止,焦点一直集中在 HTML5 的功能上,因为它们或多或少与桌面有关,但移动设备的功能使 HTML5 的优势更加突出。通过使用 API,您可以利用原生设备功能,如触摸、方向、指南针、加速度计和电池状态,更不用说 HTML5 为桌面浏览器带来的所有新功能,这些功能也可以渗透到移动领域。面对现实吧,我们现在生活在一个移动的世界。由于可以上网的智能设备,人们可以在飞机上用手机登记登机牌,进行电子支付,甚至可以通过优步这样的服务叫出租车。因此,让我们来谈谈移动开发如何将 HTML5 推进一步,并具体谈谈设备功能、它们的使用方式、当前支持的内容以及即将推出的内容。由于移动设备和桌面浏览器使用 HTML5 有很大不同,本章将概述 HTML5 可以访问的当前设备功能,并重点介绍如何使用这些功能为我们的客户创建真正令人惊叹的广告。如果广告商希望在手机和平板电脑上接触到他们的观众,他们肯定需要依靠 HTML5 向前发展。移动市场为许多创新的事物提供了入口;所以让我们深入研究,找出到底是什么。
移动世界
让我们搞清楚一件事:移动技术已经出现,相信我,它会一直存在下去!越来越多的人配备了带有网络连接的智能手机和平板电脑。硬件的制造成本比以往任何时候都低,随着苹果、三星、LG 和其他 OEM(原始设备制造商)以相对较小的价格创造出非常复杂和互联的设备,日常消费者的进入门槛已经降低,这使其成为一个高利润的广告渠道。这些设备在许多方面都很复杂,但其中一个需要关注的是现代浏览器对 HTML5 的支持。因为社交、工作、收发电子邮件或只是在旅途中玩游戏比以往任何时候都更容易,而且随着如此多的眼球从传统的桌面和电视转向更小的屏幕,广告商已经注意到了这一趋势,并渴望进入这个新兴市场。许多分析师预测,移动市场将在未来两三年内超过标准桌面市场。例如,看看摩根士丹利研究公司 ?? 的图 8-1 。
图 8-1。2013-2015 年移动互联网用户和桌面用户预测(来源:摩根士丹利研究)
正如您所看到的,对于移动领域的任何人来说,这都是一个激动人心的趋势,为长期繁荣的未来提供了机会。有一点是肯定的:HTML5 将在这个市场上非常突出,因为它是目前唯一可以跨越所有移动平台的无处不在的技术。没有其他技术可以部署到所有的浏览器和设备上——无论是 Flash 还是 Silverlight。除非你知道 Objective-C 或 Java,或者使用 Adobe AIR for iOS 或类似的打包程序,否则你肯定无法为主流移动操作系统构建应用。HTML5 不仅允许你构建令人惊叹的网络应用;它甚至可以在像 PhoneGap(phonegap.com
)这样的框架的帮助下,在阿帕奇·科尔多瓦(incubator.apache.org/cordova
)上创建本地移动应用。使用在现代网络浏览器中工作的相同工具和语法,现在可以跨设备、浏览器和各种操作系统使用,以确保编译到本机应用时的兼容性。这是 HTML5 在移动设备上变得如此有吸引力的主要原因。您可以构建一次,然后在任何地方部署(目前支持任何地方)。既然您已经知道了 HTML5 为什么如此重要,那么在深入研究每种设备的代码和实践之前,让我们来看看市场上的各种设备。
移动设备、浏览器和操作系统
桌面浏览器对 HTML5 的支持是分散的,移动设备也不例外。有许多不同的设备制造商,每个都有自己的变化,并在其浏览器中采用 HTML5 规范。目前该领域有如此多的不同设备,以至于几乎不可能跟踪在哪里支持什么,以及我们可以访问的设备的最新功能是什么。
注意关于碎片化移动生态系统的非常好的信息,我强烈建议去看看
www.quirksmode.org/mobile/
。
接下来的几节将讨论撰写本文时市场上的顶级设备,我们还将回顾一些随时可能出现的新兴竞争对手。有各种不同的屏幕尺寸和操作系统,数以吨计的浏览器版本,以及数以百计的设备模型,广告单元都必须在其上显示。接下来的几个部分将帮助你浏览风景并理解它。
苹果 iOS
当苹果在 2007 年推出 iPhone 时,智能手机市场真的起飞了。从那以后,手机的外观就再也不一样了,用户已经习惯了手持设备上丰富的触摸功能。多年来,苹果经历了多次硬件和软件迭代;开发人员和用户从更快的硬件、更多的设备 API 和整体性能提升中受益匪浅。例如,随着 iOS 6 的最新发布,用户可以从网络浏览器访问相机和照片库,并利用一种称为网络音频 API 的新功能(更多信息请参见第十二章)。对于开发人员来说,iOS 提供了一个很好的开发环境,有丰富的工具和模拟器来测试本地应用和 web 内容。就开发者和广告支出而言,苹果几乎是智能手机市场的王者,尽管其主要竞争对手谷歌在全球范围内拥有更大的用户群。JiWire(【www.jiwire.com/insights】??)概述了英国和美国每台设备的广告请求数量。2012 年的结果显示,iOS 在广告方面的市场份额最大。
这些信息表明了一些事情,其中之一是广告商似乎喜欢在 iOS 市场开发内容,因为这是一个结构化的环境,而 Android 则因为其开放性而更加分散。第二件事是,这可能意味着更多的人在 iOS 设备上观看带有广告支持模式的在线内容和应用。无论你从哪个角度看,这些数字都不会说谎。
Google Android
谷歌坚信开源,并通过其移动操作系统 Android 坚守这一信念。Android 是目前移动领域最大的操作系统,安装在各种设备上。在这种情况下,开放既是一件好事,也是一件坏事。它创造了大量的创新和竞争,但反过来,也给需要在这种环境下进行开发的开发者带来了很多挫折。由于有超过 2,000 种不同的 Android 产品(并且还在增长),开发人员面临着浏览器中不同级别的 HTML5 合规性、不同的屏幕分辨率、不同的像素密度,甚至是传统的 Flash Player 支持。但随着 Android 4.1 的全面采用,Flash Player 支持将正式消失。访问 http://opensignalmaps.com/reports/fragmentation.php,你会了解到 Android 的开发是多么的分散和混乱。你可能会发现这项研究的结果令人震惊!正如这项研究所说,用三星或 HTC 设备测试和开发内容是最有意义的,因为它们是当今市场上最突出的产品。然而,如果你是一名开发人员,你就无法逃避为 Android 设备进行开发。由于大多数手机和平板电脑市场都使用这种操作系统的版本,广告商更有理由希望出现在他们的屏幕上。
其他人
市场上的其他一些设备有 Galaxy 平板电脑、黑莓 Playbook、Nooks 和 Kindles,所有这些设备都支持各种 Android 操作系统的混合,只有 Playbook 例外,它使用黑莓自己的平板电脑操作系统。据说,截至 2012 年 4 月,亚马逊的 Kindle Fire 拥有美国 54.4%的安卓平板电脑,这一事实证明了为该设备创建正确显示和工作的内容的合理性。这些设备中的大多数都提供非常符合 HTML5 的浏览器,大多数操作系统都有频繁的更新。(你可以在 http://html5test.com 查看这些结果。)其他开源浏览器和平台正在开发中,其中包括 ti Zen(【http://tizen.org】)据说在这项研究期间拥有最好的 HTML5 兼容浏览器之一(it world . com/mobile-wireless/262120/ti Zen-pops-html 5-winner
)。最终,移动世界可能真的会变得支离破碎,但支持在这些设备上做广告仍然是必要的,因此请确保与您的客户讨论他们希望在活动的分配时间和预算内瞄准哪些操作系统平台。如果您一开始就知道您的客户想要的目标,这可以节省您几个小时甚至几天的开发和调试时间。
移动广告
您已经看到,HTML5 是在兼容桌面的浏览器中构建和交付广告的标准;现在,让我们更深入地了解这是如何影响移动领域的。使用 HTML5 的广告提供了广告内容和页面内容之间的无缝集成,尤其是在移动设备中不支持 iFrames 的情况下。随着广告真正成为页面的一部分,网络和广告开发者有能力做一些令人惊讶的事情。但这对他们来说也是相当具有破坏性的,因此他们需要紧密合作来完成复杂的富媒体执行。由于 HTML5 目前的接受状态,无法保证 HTML5 构建的广告能够在移动生态系统中的所有浏览器和操作系统上同等呈现。web 设计人员和开发人员为确保每个像素和功能在不同浏览器间都正确而经历的同样的问题和测试在这里也同样适用。在接下来的章节中,让我们回顾一下移动广告是如何被购买、销售、创建、服务和分析的。
众所周知,移动广告行业正在蓬勃发展,而且短期内不会放缓。如果你是移动广告的新手,你很快就会发现移动广告是独一无二的;从桌面过渡的开发人员和设计人员有他们的工作要做。移动是一个新兴的有利可图的行业,但在我们像在桌面创作中一样得心应手之前,还有很多东西要学习和解决。事实上,一整本书都可以专门讨论这个话题。所有购买、销售、创建、提供和分析广告的方式仍处于发展阶段,但随着市场上有如此多的手机和平板电脑,广告商希望他们的活动能够覆盖最广泛的范围。通常,巨大的牺牲来自运营规模和周转时间,因为开发需要编写许多条件和功能检测,以便广告可以有效和正确地跨屏幕部署,同时也可以优雅地失败。移动广告市场仍处于起步阶段,但增长迅速。为了证明这一点,请看图 8-2(??),其中有来自 eMarketer 的关于全球在线广告支出的数据。
图 8-2。按形式划分的全球在线广告总支出(来源:【eMarketer.com】??
如果你正在寻找一个职业改变,甚至只是一个新的爱好,这是一个很好的行业!预计到 2016 年,全球移动广告支出将会有最大的百分比增长。然而,在你能把它想成所有的乐趣和利润之前,有许多事情要涵盖。让我们从移动广告定价开始。
移动定价
移动广告定价与桌面广告非常相似,因为广告通常是根据印象计费的;即,广告被呈现到页面或被请求的次数。传统上,移动富媒体是按 CPM 计费的(即,按每一千次展示计费)。这也可以与可视印象相结合——当广告实际出现在用户的机器上时。通常,该指标有助于呈现“折叠线以下”的广告,当用户访问页面时,该区域不在初始视图中。点击或点击是用户触摸横幅以扩展它的次数,CTR(点击率)——在移动设备中应该称为 TTR(点击率)——是广告被点击的总次数除以提供的广告展示次数。例如,如果一个广告被播放 1000 次,被点击 10 次,那么它的点击率为 1.0%。最后,费用由所报告的时间段内支付的总金额以及可能的基于所提供的展示总数的账单来分解。在mymobileagency . co . uk/blog/mobile-advertising-pricing-explained . html
有一个很好的、非常详细的移动广告定价分类。
广告创作
既然你已经了解了移动广告的定价,让我们来深入探讨一下手头更大的话题,也就是广告的创意设计和开发。对于移动设备,最好将所有广告的样式表放在发布者页面的头部或 iFrame 的头部,如果是这样的话(你的发布者会告诉你你的广告将如何呈现在页面上)。
注意旧设备浏览器中的 iFrame 广告会导致系统内存问题,尤其是当它们嵌套在一起的时候。随着新设备的出现,这变得不那么令人担忧了,但在定义您的活动范围时,请记住这一点。
样式不应该包含在其他任何地方,因为在创建元素后应用它们会导致回流、重画和不必要的(和不必要的)非样式内容闪烁。当包含特定于您的广告的 CSS 时,请确保在缩小和压缩时将所有 CSS 文件捆绑到一个文件中。在移动领域,请求越少越好,因为网络条件可能会有很大的变化。我推荐使用 CSSCompressor 、【http://csscompressor.com】和 js compress(jscompress.com
),因为缩小或压缩代码会减少整体文件大小——这对移动设备来说超级重要。对于依赖于元素的脚本,让它们在 DOM“就绪”或“加载”之后执行——这是通过使用 DOMContentLoaded 或“加载”事件来完成的。
此外,如果您需要依赖图像素材,您应该尽可能预加载;预加载在将任何广告内容呈现到屏幕之前提供完整的广告体验。虽然图像在移动世界中很重要,但你不能总是不使用它们,所以一定要像我们在第五章学到的那样使用精灵表。这样,当用户最终看到内容时,您可以确信内容是可操作的和可见的。清单 8-1 展示了预加载图像素材的常用技术。
清单 8-1。 JavaScript 图像预加载器
<!DOCTYPE html>
<html lang="en">
<head>
<script>
var images = new Array();
var numImages = '3';
var count;
function preloading () {
for (i = 0; i < preloading.arguments.length; i++){
images[i] = new Image();
images[i].src = preloading.arguments[i];
count = i+1;
if(count.toString() === numImages) {
//initialize ad
console.log('adInit');
}
}
}
preloading(
"image1.gif",
"image2.gif",
"image3.gif"
);
</script>
</head>
<body>
</body>
</html>
正如您所看到的,正在建立一个名为 images 的数组对象。接下来,让我们创建一个名为 preloading 的函数,该函数将传递一组图像素材,循环遍历并从中创建新的图像对象,并将它们的源属性分配给函数中提供的文件路径。最后,加载图像时可以调用任何其他需要的东西,比如启动广告的 init 函数。
除了预加载外部内容之外,您还应该优先加载特定的素材。如果您正在利用脚本将依赖的外部 JavaScript 库,那么排序是强制性的。幸运的是,您可以利用两个新的脚本标记属性 Async 和 Defer 来更好地帮助发布者进行代码排序。延迟脚本是依赖于其他脚本的脚本,比如外部库。因此,如果您绝对需要在移动活动中使用 jQuery 和其他相关脚本,那么您应该推迟使用它们。
注意延迟脚本在 DOMContentLoaded 事件之前执行。
广告服务器的 JavaScript 广告标签应该使用异步属性,这样发布者页面的加载速度会更快。Async 适用于加载后立即执行的脚本,不需要依赖其他脚本——它们非常适用于广告标签、社交网络小工具和网站上其他第三方内容,这些内容与网站内容没有明确的联系。这两个新属性的真正好处是它们不会阻塞 HTML 解析器,否则会阻塞用户的重要 UI(用户界面)元素。让我们看一下清单 8-2 ,它概述了 defer 和 async 属性的使用。
清单 8-2。 JavaScript 延迟示例
<html>
<head>
<script defer src='jquery.js'></script>
<script defer src='mainSiteScript.js'></script>
<script async src='adTag.js'></script>
</head>
</html>
您可以看到,首先加载的是 jquery.js 脚本,使用的是 defer 设置,然后是 mainSiteScript.js,它依赖于 jquery 库。最后,为我们的广告内容调用第三方 JavaScript 标记,它不依赖于发布者内容。由于在移动设备上解析 JavaScript 可能需要几毫秒的时间,这取决于网络连接,所以保持网站对用户的功能并在主要内容加载后加载广告是很重要的。
在开始 HTML5 活动和开始创意开发之前,请始终询问您的广告运营或活动经理标签将在哪里运行。什么设备,浏览器,等等。定义你的范围;这将决定整体功能,因为对某些功能的支持是有限的。创意所需的功能将决定跨浏览器/设备构建的开发时间。在 http://media.admob.com 的 HTML5 中有一个非常全面的关于移动广告开发的概要。
考虑到这一点,我们先来讨论一下移动中的视口。视窗实际上是浏览器在移动设备上呈现内容的虚拟窗口。通过在文档页面的头部使用 meta 标签,您可以指定宽度、比例和用户可伸缩性,甚至设置浏览器窗口要解释的最小和最大值。由于这对于在移动设备上正确格式化内容非常重要,让我们看看清单 8-3 ,它显示了浏览器窗口被设置为访问其内容的设备的屏幕大小。
清单 8-3。 视口移动元标签
<!DOCTYPE HTML>
<html>
<head>
<meta name = "viewport" content = "width=device-width">
</head>
当您在移动浏览器中打开此文档时,您会注意到浏览器中的任何内容都已被设置为设备的宽度。对于苹果 iPhone,这将是 320 CSS 像素宽;Kindle Fire 的像素是 600 CSS。这种可变宽度是一个很好的特性。由于它使浏览器看起来像是设备的原生应用,这是广告应该考虑的事情,因为大多数发布者页面都会包含这些元标签。清单 8-4 通过设置比例值和用户输入显示了一个更精细的视口示例。
清单 8-4。 用视口元标签设置比例
<!DOCTYPE HTML>
<html>
<head>
<meta name = "viewport" content = "initial-scale = 1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
</head>
这也可以通过使用 JavaScript 文件中包含的 JavaScript 方法来实现(见清单 8-5 )。
清单 8-5。 用 JavaScript 设置视口宽度和比例
var viewMeta=document.createElement('meta');
viewMeta.name='viewport';appleMeta.content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0';
document.getElementsByTagName('head')[0].appendChild(viewMeta);
当在浏览器中查看时,这些代码示例都将页面内容的宽度设置为设备的屏幕宽度,将初始、最小和最大缩放级别设置为 100%,并且不允许用户使用收缩手势放大页面内容。这些信息对于希望为移动访问者实现最佳呈现的内容所有者至关重要,尤其是那些想要模仿为 Web 构建的本地应用的内容所有者。关于广告商、代理商和广告服务器——同样,当向专门设置了此视窗的页面投放广告时,这是需要注意的事情,因为你的创意可能会受到影响。创意元素可以根据比例设置放大或缩小,这可能会创建难以辨认或更糟的副本或图像,或者如果出版商使内容比广告预期的更窄,则会对广告的宽度进行不必要的更改。
媒体查询和像素密度和
当调整视窗时,您很可能会希望利用 CSS 媒体查询来进行移动广告创意。您可能不知道将访问媒体页上您的广告内容的每一个设备,因此您必须制作一个响应迅速并适应查看它的设备的广告。响应式广告设计需要大量的工作和清晰的执行计划,但如果做得正确,可以节省大量的时间。由于许多设备有不同的屏幕尺寸和像素密度,广告设计师越来越难以处理创意构建中的所有差异。因为这是为各种尺寸和密度的移动设备开发的设计师的一个问题,所以 Teehan+Lax 的人开发了一个漂亮的图形和图表(teehanlax.com/blog/density-converter
)来帮助你为各种像素密度的屏幕设计内容(见图 8-3 )。
图 8-3。缩放各种像素密度的屏幕内容
在撰写本文时,苹果设备的像素密度为 1.0 和 2.0;Android 有各种其他版本,包括 1.4、1.75 和 2.3。例如,iPhone 4 及以上支持更高的像素密度——苹果称之为视网膜显示器。在这些设备上,宽度仍然是 320 CSS 像素,但设备的像素每像素翻倍,以创建更高的图像保真度。例如,300 × 250 的图像需要 600 × 500 的图像才能在这些更高像素密度的显示器上看起来清晰(有关此主题的更多信息,请参见quirks mode . org/blog/archives/2010/04/a _ pixel _ is _ not . html
)。通过阅读这篇文章,你会明白这个故事的寓意是 CSS 像素与实际的物理设备像素没有什么关系。因此,应该尽可能地使用它们,因为不管设备的底层分辨率如何,它们在各种浏览器中的解释都是一致的。清单 8-6 展示了如何使用 CSS 处理更高像素密度的图像。(写这样的东西不要觉得不舒服。)
清单 8-6。CSS 中双倍像素密度示例
<style>
.adContainer {
background-image: url(bg_600x500.jpg);
width: 300px;
height: 250px;
}
</style>
正如您所看到的,代码示例将背景图像的大小增加了一倍,以弥补额外的设备像素。我知道这会让你很困惑!但是,现在已经有了正在开发的规范,甚至可以使用特定的厂商前缀特性。有关更多信息,请阅读 CSS 中的图像集属性(blog . cloud four . com/safari-6-and-chrome-21-add-Image-Set-to-support-retina-images
)以及备受期待的新兴图片元素规范(【http://github.com/scottjehl/picturefill】)。
移动提示
现在,您已经设置好了 viewport 和 CSS,让我们来讨论一些关于使用各种移动设备的重要“问题”。接下来的部分将会帮助你处理移动广告开发中一些常见的陷阱。客户经常会要求去掉设备的灰色轮廓。这个轮廓在移动 Safari 上看起来像一个灰色的点击区域,在 Android 设备上看起来像一个琥珀色或绿色的区域。参见图 8-4 了解该问题的图示。
图 8-4。某些移动设备上的触摸轮廓
如果你想去掉这个大纲,这里有一些代码演示了如何使用 CSS 做到这一点。
button {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
outline: none;
}
注意我们是如何将前缀 webkit-tap-highlight-color 的 RGBA 标度设置为 0,并将其命名为透明的。最后,为了安全起见,我们将大纲设置为 none 来禁用它。
CSS 和 mobile 的另一个有用的特性是禁用选择。如果您或您的客户希望在广告单元中禁用剪切、复制和粘贴操作,您可以使用 CSS 来实现这一点。图 8-5 描绘了复制粘贴过程在手机上的样子。
图 8-5。移动设备上的复制粘贴技术
如果您希望禁止用户从 ad 单元获取信息,禁用此功能可能会很有用。也许是及时和动态的数据或一次性优惠券交易。无论哪种方式,只要确定您真的想要为您的用户群禁用此设置。这里有一个 CSS 片段可以实现这个结果。
p {
-webkit-user-select: none;
}
有时,当用户点击图像并按住它或按住内容中的链接时,您可能会收到在 iOS 设备上禁用标注窗口的请求。图 8-6 更好地说明了我所说的。
图 8-6。iOS 上的标注气球
默认情况下,当用户点击图像或 URL 并按下一段时间时,操作系统会提供一个菜单项列表供用户选择。如果这不是您的广告体验的一部分,CSS 可以删除本机标注窗口。
img, a {
-webkit-touch-callout: none;
}
在前面的代码中,只需将名为 touch-callout 的 Webkit 属性设置为 none,就可以禁用该操作系统标注功能。
通常,您希望为用户提供特定的输入,而不是传统的文本输入键盘。这对于在表单中输入数字数据(电话号码、邮政编码)非常有用。为了更改表单输入上的这些键盘显示,请在输入标记上指定 input-type 属性。例如,在图 8-7 中,我用模式[0–9]*将输入字段设置为 tel,因为我希望用户输入邮政编码。有点令人困惑,但它是有效的,因为 ZIP 没有输入类型(至少现在还没有),我所关心的是这个特定输入的数字条目。
图 8-7。移动设备上的“tel”键盘输入
正如您所看到的,当用户将焦点放在输入字段上时,设备的数字键盘就会出现。这里有一些代码可以用来切换键盘,以获得更好的用户体验。
注意如果输入类型不受支持,浏览器将默认为“文本”类型的通用输入
<!-- display a standard keyboard -->
<input type="text" />
<!-- display a telephone keypad -->
<input type="tel" />
<!-- display a URL keyboard -->
<input type="url" />
<!-- display an email keyboard -->
<input type="email" />
<!-- display a numeric keyboard on iOS -->
<input type="tel" pattern="[0–9]*" />
使用这些代码片段,您可以根据自己的创作目标为用户显示所有类型的输入字段。让这变得非常简单和有用的是,浏览器会为您处理这一切。您不需要构建和定制特定的输入字段。
另一件有趣的事情是字体平滑属性。在你的创意中经常会有一些动画,有时会涉及到复制元素的动画。图 8-8 展示了“o”字符的字体平滑效果。
图 8-8。CSS 字体平滑属性的效果
有些动画可能涉及复制或文本元素,有一个很棒 CSS 片段可以防止字体上出现锯齿或脊状动画。这里有一些代码提供复制元素的反走样。
.smoothCopy {
font-smooth:always;
}
注在撰写本文时,字体平滑功能仅在 Webkit 浏览器中可用。它不是任何 web 标准规范的一部分。
除此之外,移动广告和基于 CSS 的网络字体也是一个潜在的大问题。一方面,广告商和品牌将希望使用他们实际的字体,因为它们通常是他们品牌身份的核心——想想可口可乐或百威啤酒——而唯一的方法就是增加 CSS 字体或透明 PNG 图像的 k 权重。另一方面,CSS3 字体的负载导致最终用户的下载时间更长,并且各种格式需要更多的 HTTP 请求。这种情况没有灵丹妙药;有些客户绝对会要求你使用他们的品牌字体。最好的做法是向客户表明,做它想做的事情会让用户付出代价。他们的体验可能会受到影响,尤其是在低带宽连接上。如果客户坚持,有一些非常好的优化字体库可以使用:谷歌的网络字体库(www.google.com/webfonts
)、Adobe 的 Typekit(typekit.com/
)和 WebType(www.webtype.com/
),正如你在第五章中所了解的,这些字体库只带来设备所需的格式。权衡使用或不使用的利弊,也考虑透明的 PNG 文件。然而,当复制需要改变或者是动态的时,png 不是一个选项。对于 iOS 设备上的默认字体支持,请查看iosfonts.com
。Android 用户对默认字体的选择要有限得多——Droid Sans、Droid Sans Mono、Droid Serif 和 Roboto——但希望随着操作系统的未来更新,会有更多的选择。
注意这些只是一些问题和解决方法。还有很多,但是考虑到所有正在使用的设备和浏览器,把它们都列出来超出了本书的范围。更多移动 CSS 调整见
css-infos.net
。
正如你可能已经猜到的,许多移动广告来自于桌面广告。调查、“发送给朋友”、优惠券下载、客户数据收集、动画、应用商店的直接链接、地图、视频、投票、互动、广告内购买和基于位置的交易等广告功能都是可能的,但它们可能需要更多的理解才能完美地跨设备实现。这些功能确实能让广告主受益;他们可以利用从桌面营销活动中学到的东西,并将其应用到移动设备中,或者重新定位他们的营销活动,以获得更适合移动设备的功能。这是迄今为止不一样的媒体,但在功能方面,很多相同的事情和更多的可以完成。业界的一个大问题是如何处理素材,因为它们不仅仅是 SWF 文件。这适用于移动广告,也适用于 HTML5 广告。以下是在内部和外部团队成员之间处理或移交创意素材时需要注意的事项。
- 超文本标记语言
- 半铸钢ˌ钢性铸铁(Cast Semi-Steel)
- Java Script 语言
- 分层 PSD 和/或带有子画面的图像
- Illustrator 文件
- 情节串连图板
- 字体
- 媒体文件(视频/音频)(如果需要)
- 自述文本文件,概述了素材的说明。
所有这些素材可能会以 ZIP 文件的形式提供给您,这可以确保所有素材在整个转移过程中保持在一起。当需要移交素材时,确认所有这些文件都存在可以避免后续的混乱。这种混乱往往会消耗宝贵的时间,并可能会破坏活动的启动。
营销活动通常要求您将数据 ping 到第三方服务器,尤其是当其他供应商为验证跟踪指标而向您提供 1 × 1 数据时。这可以通过在 JavaScript 中创建一个新的图像对象并应用图像的源属性来指向你希望的第三方目的地来实现(见清单 8-7 )。
清单 8-7。 像素跟踪示例
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id='icon' style='background-color:black; width:50px; height:50px;'></div>
</body>
<script>
var someElement = document.querySelector('#icon');
someElement.addEventListener('touchstart', activityHandler, false);
function activityHandler () {
var img = new Image ();
img.src = 'http://www.tracker.com/ping';
}
</script>
</html>
您可以看到一个事件监听器已经添加到您选择的元素中,当点击时,我们调用 activityHandler 函数。在该函数中,创建了一个新的图像对象 img,并将其提供给要调用的目的地。现在,浏览器将向该源发出请求,接收端将记录一个交互度量。(只要确保在您希望跟踪的用户活动上这样做;否则,您的报告指标将会失真。)此外,请记住,对移动设备使用此功能意味着另一个 HTTP 调用,基于带宽限制,这可能会有偏差。如果没有足够的带宽,第三方的请求可能会失败,但动作仍然会从创意内部发生。
最后,与展示广告一样,移动广告也适用同样的“进/出”规则。如果用户点击或轻触广告来扩大广告,他们很可能需要点击或轻触来结束体验。这或多或少是由发行商的需求决定的,但是在考虑整体用户体验时要记住这一点。
优化
优化是移动开发的关键部分。在移动生态系统中保持轻量级广告应该是任何开发者或设计师的首要关注点,因为这对最终用户可能面临的各种网络连接极其重要。由于图像和脚本在 3G 连接上负担过重,检测这些限制并为用户提供替代体验。在 Android 设备 2.2 及更高版本上,检查 navigator.connection.type 属性;它可以检测来自以太网、2G 或 3G 连接的 WiFi,并相应地调整您的广告。对于黑莓设备,查看 blackberry.network 获取类似信息;在 iOS 上,除非第一方广告服务器可以提供,否则要等到网络信息上的 API 来到那个浏览器。有关网络 API 的更多信息,请参见w3.org/TR/netinfo-api
。
在理想情况下,最好的情况是检测用户的当前带宽,并提供替代信息或适当的故障转移。例如,如果用户不在 WiFi 上或连接不好,提供一个简化的创意版本,几乎没有图像和依赖于各种 HTTP 请求的动态内容。连接信息将让广告真正适应用户的设备和观看条件。将此与广告内容的响应性创意设计相结合,您将拥有一个可以在任何条件下在任何屏幕上运行的广告——没问题!这基本上是广告服务的圣杯。
此外,使用 mobile 最好移除所有沉重的、不需要的外部库;尽可能使用直接的本地 JavaScript。库提供了极大的易用性,但是由于这个原因,太多的开发人员依赖于它们。如果内容仅针对一个操作系统或设备,则不保证包含它们。像 jQuery 这样的库提供了令人惊讶的一致的跨浏览器体验,但是如果您只是为了它的动画和语法易用性而使用它,那么您就用额外的重量杀死了最终用户。事实上,在 2012 年的一个版本中,jQuery 压缩了 93 千字节,压缩了 34 千字节。这对移动用户来说是相当大的,尤其是广告内容。始终尝试使用裸 JavaScript,最小化 k-weight,减少网络下载,并且永远不要忘记您应该利用的正常方法,例如缩小脚本和 CSS 文件,以及将您的素材压缩为最小的传输大小。
最后,尽量保持你的浏览器重画非常低。对于移动设备来说,重新绘制 DOM 的布局是一项非常昂贵的任务。随着更多动画和 DOM 操作的出现,重画可能会大大减少用户的电池寿命。
代码执行
在优化之后,另一个重要的实践是代码执行。对于移动广告,代码执行可能是一场噩梦,尤其是在等待页面内容加载时,首先是各种网络条件和移动设备上非移动优化的 web 内容。这实际上是一个序列、检查和扮演交通警察游戏。我的一个同事兼朋友总是称之为“舞蹈”无论您是在对 DOM 元素调用操作之前检查它们是否存在,还是等待 JavaScript 平台和库下载,当您的 ad 标签进入实际环境时,这总是一个调试过程。事实上,这句话总结了在浏览器中处理解释代码执行时的挫败感,尤其是发布者一方无法控制的代码。就像一个新的舞伴,你不知道他们是否会踩你的脚。
在广告领域,发布者的页面内容首先要加载,通常作为一个 onload 事件;则该页面向广告服务器发出请求以请求广告内容。此时,广告填充发布者的页面或指定的 iFrame。广告代码仍然需要加载所有与广告相关的文件——在这种情况下,它可以是 CSS、JavaScript、任何图像、web 字体以及其他任何文件。最后,得到许可后,我们的广告体验就可以开始了。我见过很多这样做的方法,但是不管它是如何完成的,都有很多步骤,特别是对于必须快速执行的广告内容!记住,没有人上网看广告,所以你必须快速渲染,尽可能抓住用户的注意力。您将了解到,最好的网站为广告提供回调以开始加载,甚至异步加载它们的广告脚本。清单 8-8 显示了我自己确保所有元素都被写入页面的方法。
清单 8-8。 DOM 元素检查器示例
<script>
function adChecker () {
if (document.querySelector("#yourLastDOMElement")) {
initAd();
} else {
setTimeout(adChecker,100);
}
}
function initAd () {
//Ad content starts here
}
adChecker();
</script>
从代码中可以看出,正在使用一个名为 adChecker 的函数。它通过一个条件来检查广告代码的最后一个元素是否呈现在页面上。一旦返回 true,就会执行名为 initAd 的函数。它将开启我们的创意。否则,将超时函数设置为 100 毫秒,并再次调用 adChecker 函数。这将反复发生,直到广告的标记完全呈现到文档中。这种一遍又一遍的循环可能是一个昂贵的操作,这就是为什么我说最好的网站提供广告挂钩的回调。它们比这种重复功能效率高得多,尤其是在手机上。
移动站点事件
客户的一个常见要求是能够在移动设备上跟踪网站事件。站点事件是放置在广告商网站上的跟踪标签。当用户查看广告或与广告交互并随后访问广告商的网站时,会触发网站事件度量,从而显示广告可能会使用户在注意到广告后转到广告商的 URL 的 ROI。传统上,网站事件基于 cookie 模型进行跟踪;在一些移动浏览器中,这完全没问题。然而,在 iOS 和 mobile Safari 上,第三方 cookie 被默认禁用,这些设备和浏览器被禁止使用 cookie 方法跟踪站点事件。为了更好地说明这个设置,请看图 8-9 ,它展示了 iOS 上的默认设置。
图 8-9。iOS Safari 上的默认 cookie 设置
如果你依赖移动广告中的 cookie 模式,这种情况会是一个很大的限制。相反,利用 HTML5 的 localStorage 属性将该信息而不是 cookie 放在客户端的浏览器上。清单 8-9 显示了如何使用 JavaScript 在广告代码中实现这一点。
清单 8-9。 某 localStorage 网站事件示例(Ad)
<script>
//iOS Site Events - local storage technique - platform.
function setiOSiteEvent (ad, placement, campaign, publisher) {
var m = new Date().getMonth()
var d = new Date().getDate();
var y = new Date().getFullYear();
var dom = window.location.href;
var timeLoc = m + '/' + d + '/' + y + '&' + dom;
var se = ad + '-' + placement + '-' + campaign + '-' + publisher + timeLoc;
localStorage.setItem('SiteEvent', se);
}
setiOSiteEvent('advertiser', 'placement', 'campaign' , 'publisher');
</script>
如清单 8-9 所示,你可以创建一个名为 setiOSiteEvent 的函数,它获取一些参数,这些参数最终会在广告服务时由广告服务器传入。这些可以是广告客户的名称、位置标识符、活动标识符和发布广告的出版商。接下来,在我们的函数中,声明几个变量——m,d,y——它们在站点事件发生时准确地标记时间戳。接下来,通过编写 var dom = window.location.href 来获取对 URL 位置的引用;—这将给出查看者看到广告的确切页面位置。接下来,调用另一个变量 timeLoc,它代表时间/位置,并获得时间值和位置的串联值,或者 URL 地址。接下来,创建我们的最终 var,称为 se,它获取所有的 ad 服务器值,以及我们的时间戳和位置值。最后,调用我们的 localStorage 对象,并通过 setItem 调用存储该值,将 se 分配给它。这个 localStorage.setItem 调用将把所有的站点事件(se)信息存储到用户的浏览器中,以便广告商的页面以后可以引用它。清单 8-10 展示了如何在广告商的页面上实现这一点。
清单 8-10。 某 localStorage 网站事件示例(广告客户的页面)
function getiOSiteEvent () {
if(localStorage == '' || localStorage == null) {
return;
} else {
//Grab iOS Site Event
console.log(localStorage.getItem('SiteEvent'));
var seCall = new Image();
seCall.src = 'http://tracking.adserver.com?siteevent=' + localStorage.getItem('SiteEvent');
setTimeout(localStorage.clear(), 500);//Clear the information once the metric is reported
}
}
getiOSiteEvent ();
当用户访问广告商的页面时,getiOSiteEvent 函数将被触发。在该功能中,检查用户是否有任何位置存储信息。如果用户没有,就退出该功能;如果用户这样做了,创建一个新的图像(很像我们的第三方跟踪示例),并将其 source 属性设置为跟踪位置。最后,一旦广告服务器获得指标,设置一个超时并清除用户浏览器中的 localStorage,这样我们就不会再跟踪这个值。除了过时的 cookie 方法,还有许多方法可以做到这一点;一般来说,选择取决于你使用的广告服务器和浏览器对客户端存储技术的采用。
移动视频广告
在写这篇文章的时候,最大的移动广告市场是视频——传统的流内或前置视频。正如上一章所展示的,VAST 是 IAB 向视频播放器发送视频广告的行业规范,手机也不例外。移动视频是我们行业中增长最快的市场之一,广告商开始寻求使用前置广告来吸引小屏幕空间中所有眼球的注意力。图 8-10 (来自 eMarketer)估计了 2016 年全球移动视频的使用情况。
图 8-10。2011 年至 2016 年全球移动视频观众估计数
许多网络和出版商在他们的视频播放器中实现了 HTML5 支持,在我写这篇文章的时候,他们已经取得了不同程度的进展。但预计实现会随着时间的推移而增长。一个技术问题是从广告服务器加载外部素材,这在原生 JavaScript 中带来了某些相同的域安全限制。这就是为什么使用 CORS 方法,如在第六章中所讨论的,对于资源共享是非常重要的。让我们看看如何使用一个兼容 HTML5 的视频资源的移动标签(见清单 8-11 )。
清单 8-11。 移动广阔的例子
<VAST version="2.0">
<Ad id="12345">
<InLine>
<AdSystem>HTML5 Compatible</AdSystem>
<AdTitle>VAST 2.0 Instream Test</AdTitle>
<Description>VAST 2.0 Instream Test</Description>
<Error>http://url/error</Error>
<Impression>http://tracking/impression</Impression>
<Creatives>
<Creative AdID="12345">
<Linear>
<Duration>00:00:30</Duration>
<TrackingEvents>
<Trackingevent="creativeView">http://tracking/creativeView</Tracking>
<Tracking event="start">http://tracking/start</Tracking>
<Tracking event="midpoint">http://tracking/midpoint</Tracking>
<Tracking event="firstQuartile">http://tracking/firstQuartile</Tracking>
<Tracking event="thirdQuartile">http://tracking/thirdQuartile</Tracking>
<Tracking event="complete">http://tracking/complete</Tracking>
</TrackingEvents>
<VideoClicks>
<ClickThrough>http://www.somedomain.com</ClickThrough>
<ClickTracking>http://tracking/click</ClickTracking>
</VideoClicks>
<MediaFiles>
<MediaFile delivery="progressive" type="video/mp4" bitrate="1000" width="640" height="360" scalable="true" maintainAspectRatio="true">
[`cdn.somedomain.com/video.mp4`](http://cdn.somedomain.com/video.mp4)
</MediaFile>
<MediaFile delivery="progressive" type="video/ogg" bitrate="1000" width="640" height="360" scalable="true" maintainAspectRatio="true">
[`cdn.somedomain.com/video.ogg`](http://cdn.somedomain.com/video.ogg)
</MediaFile>
<MediaFile delivery="progressive" type="video/webm" bitrate="1000" width="640" height="360" scalable="true" maintainAspectRatio="true">
[`cdn.somedomain.com/video.webm`](http://cdn.somedomain.com/video.webm)
</MediaFile>
</MediaFiles>
</Linear>
</Creative>
<Creative AdID="12345Companion">
<CompanionAds></CompanionAds>
</Creative>
</Creatives>
</InLine>
</Ad>
</VAST>
这只是常规的大量标记——但是,请查找媒体文件节点(粗体)和所使用的特定视频资源。你能看见吗?使用了三种不同的视频类型(MP4、OGG、WebM ),以满足所有 HTML5 浏览器及其不同的格式要求。此外,请记住,一些 HTML5 视频播放器可能需要 JSON 代码,而不是 XML。同样,这些信息将来自特定的发行商和他们的视频播放器需求。
本机设备功能
本节将回顾 mobile 可以访问的一些原生特性,以及赋予移动开发者权限的各种 API。移动浏览器和设备有许多功能:打电话、GPS 定位、深度链接到应用商店、加速度计、陀螺仪和指南针等等。所有这些设备功能都可以用来更好地增强您的创造力,您将在以下章节中了解到这一点。一些新兴设备甚至支持 NFC(近场通信)、用于检测气候的气压计和用于检查磁性的磁力计,所有这些都可以帮助你的广告获得真正相关的信息——比如用户查看你的广告时的湿度。让我们回顾一下如何使用这些令人惊叹的 API 和 JavaScript 来访问这些功能,并为移动设备提供高度丰富的广告体验,同时在不支持它们的地方进行优雅的故障转移。在深入研究之前,请参见mobilehtml5.org
了解哪些 API 和特性可以用于特定的设备和浏览器。
触摸
让我们从触摸开始,这可能是最受欢迎的移动设备功能。你肯定知道,当今市场上的大多数手机和平板电脑都提供电容式触摸屏界面,允许用户用手指进行交互,而不是传统的点击鼠标界面。这是 web 内容开发方式的一个巨大转变,因为业界已经习惯于将鼠标点击和鼠标悬停作为一种交互和测量的形式。现在,开发人员可以利用点击、滑动、挤压和其他手势来增加创意的交互性,从而为广告商和创意机构开辟一个全新的沉浸式创意世界。与传统的“点击展开”CTA 不同,您会注意到“点击展开”、“点击呼叫”、“点击地图”等等。这些 CTA 越来越广泛地应用于触摸设备,尤其是移动广告。
触摸事件
在移动设备和平板电脑上使用 touch API 时会用到以下事件:touchstart,当手指放在任何 DOM 元素上时都会触发;touchmove,当手指沿着任意 DOM 元素拖动时触发;和 touchend,当手指从任何 DOM 元素移开或拿起时触发。还记得我们的视窗设置吗?移动浏览器本身有默认的触摸设置。如果你想一想,如果你的浏览器有自己的滑动和手势行为,你的广告创意也有,这就不会那么好了。要解决这个问题,请使用 user-scalable=no 设置视口,使用户无法缩放。通过在您的代码编辑器中执行并使用 JavaScript touch API,您可以使用代码来触摸并拖动屏幕上的元素,并指示浏览器阻止其默认行为,即移动整个窗口(参见清单 8-12 )。
清单 8-12。 阻止浏览器的默认触摸行为
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="initial-scale=1, user-scalable=no">
</head>
<body>
<div id="element" style="position:absolute; background-color:black; width:50px; height:50px;"></div>
</body>
<html>
<script>
var element = document.getElementById("element");
element.addEventListener('touchmove', function(event) {
event.preventDefault();
if (event.targetTouches.length === 1) {
console.log(event)
var touch = event.targetTouches[0];
// Place element where the finger is
element.style.left = touch.pageX + 'px';
element.style.top = touch.pageY + 'px';
}
}, false);
</script>
</html>
如果你在一个支持触摸的浏览器上刷新你的页面,你可以用你的手指在浏览器上触摸并拖动元素。无论你的手指去哪里,元素都会跟着去。这可能是在支持触摸的浏览器上实现拖放式效果的一个很好的方法。
如果你经常使用 touch——我希望你在为移动设备开发时也经常使用——一个非常好的 JavaScript 框架,叫做 hammer js(eightmedia.github.com/hammer.js
),可以加速你的开发。这个框架允许你在头脑中快速开发触控功能,压缩后只需要大约 2 千字节,这足以在移动广告单元中自由使用。
注意当在支持触摸的浏览器中对输入字段应用 CSS3 变换时,一些 Android 设备会失去对输入的关注。在未来版本中解决这些问题之前,最好不要应用 CSS 转换。
方向
方向是移动设备的另一个有趣的特征(大多数移动设备都有这些传感器)。方向仅仅是指用户如何物理地握住实际的手机或平板电脑。在纵向或横向模式下,您可以使用方向 API 来检测屏幕布局并做出相应的反应。这一点很重要,因为你很可能需要为两个版本开发两种不同的广告,或者使用一个“安全区域”来适应两个版本。有时,出版商会要求提供两个独立的广告标签,但这有望很快淘汰,因为不应该为设备级功能进行另一个 HTTP 调用。理想情况下,目标应该是能够适应设备屏幕的响应式广告布局。典型的情况是使用 JavaScript 和 CSS 将创意重新加工到新的维度,并相应地调整创意布局。清单 8-13 可以用来检测你的创意中的方向。
清单 8-13。 定向示例(HTML)
<html>
<head>
<link rel="stylesheet" media="screen and (orientation:portrait)" href="portrait.css"><link rel="stylesheet" media="screen and (orientation:landscape)" href="landscape.css">
</head>
<body>
</body>
</html>
从这段代码中可以看到,在文档的头部有两个样式表引用——一个处理纵向布局,另一个处理横向布局(注意媒体查询)。这样,广告创意可以根据用户的方向相应地调整其布局。还有一种方法可以达到这种效果,那就是使用直接的 CSS(见清单 8-14 )。
清单 8-14。 定向示例(CSS)
@media only screen and (orientation: landscape) {
*/* rules for device in landscape orientation */*
*#ad {...};*
}
@media only screen and (orientation: portrait) {
*/* rules for device in portrait orientation */*
*#ad {...};*
}
如您所见,CSS 规则可以在 CSS 样式表中包含特定的媒体查询。要了解除定位之外的其他媒体查询,请参见w3.org/TR/css3-mediaqueries
。
注在撰写本文时,媒体查询中的 orientation 属性在苹果的 iPhone 和其他一些手机设备上不可用。
在我看来,最好的技术还是了解你所服务的设备的屏幕尺寸,并使用 CSS 媒体查询和 JavaScript 中的 orientationchange 事件来满足每个设备的需求。清单 8-15 显示了如何检测变更事件。
清单 8-15。 方位示例(JavaScript)
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
<script>
window.addEventListener("orientationchange", function() {
if (window.orientation === 0 || window.orientation === 180) {
//portrait
showPortrait();
} else {
//landscape
showLandscape();
}
}, false);
function showPortrait () {
document.body.style.backgroundColor = 'yellow';
}
function showLandscape () {
document.body.style.backgroundColor = 'black';
}
</script>
</html>
请注意,事件侦听器被添加到 orientationchange 事件的窗口对象中。如果设备改变方向,它将广播此事件,这可以调整。请注意,在我们的函数中,正在检查 window.orientation,它是 window 对象的一个固有属性。如果你发现它返回 0 或者 180,你就知道这个设备是纵向的,如图图 8-11 所示。
图 8-11。纵向设备
否则,它要么是 90°要么是 90 °,这意味着设备处于横向,如图图 8-12 所示。
图 8-12。横向放置的设备
因为在广告中,你必须很快地把东西推出去,所以开发两种创造性的布局根本不是一个选择。在这种情况下,我通常会指示客户开发对广告布局最有意义的方向,并在用户切换方向时为他们切换指示卡。图 8-13 展示了最近的一次 iPad 宣传活动。在左边你会看到纵向布局的指导卡,在右边你会注意到完整的广告体验。
图 8-13。以下是移动广告如何在每个方向上有两种不同的设计
在某些情况下,这是一个更好的技术,特别是如果创意是一个在风景中看起来更好的视频,或者是一个在肖像中更好的游戏。再说一次,这大部分将在个案的基础上处理,所以一定要考虑你自己的创意,并在开发前指导你的客户。
陀螺仪、指南针和加速度计
既然您刚刚了解了移动设备的方向,让我们更进一步,讨论陀螺仪、指南针和加速度计。这些 API 中的每一个都可以通过直接绑定到设备功能来为您的广告创意提供丰富的增强功能。如何在广告体验中使用这个 API 的一个很好的例子是在bit.ly/OAf8BX
发现的,它利用加速计 API 和画布为用户提供迷宫般的体验。
为了利用这些很酷的特性,您需要了解一些关于 deviceorientation 规范的知识。设备定位 API 概述了 DOM 将如何监听特定事件——如设备定位、compassneedscalibration 和设备运动——以通过我们的广告的 JavaScript 进行挖掘。查看清单 8-16 中的代码,了解如何使用这个 API。
清单 8-16。 加速度计/陀螺仪示例
<script>
var ad = document.querySelector('#ad');
window.addEventListener("deviceorientation", function(event) {
// process
var a = event.alpha;
var b = event.beta;
var g = event.gamma;
console.log('Alpha : ' + a + ' Beta : ' + b + ' Gamma : ' + g);
ad.style.webkitTransform = 'translate3d(' + Math.round(a) + 'px, ' + Math.round(b) + 'px, ' + Math.round(g) + 'px)';
}, true);
</script>
您可以看到,我们正在为设备方向事件添加一个事件侦听器,它将返回关于窗口方向状态的 alpha、beta 和 gamma。那么什么是阿尔法、贝塔和伽玛呢?它们实际上是设备从上到下、从左到右以及以环形方式旋转的度量(在方向规范中有更详细的解释)。最后,使用我们的 ad 元素,通过调用 translate3d 函数并对 ad 的 x、y 和 z 属性应用 alpha、beta 和 gamma 值,对 ad 单元应用 CSS3 转换。如果你跟着做,你应该能够看到你的广告元素在屏幕上根据你如何改变方向而移动。如果你问我的话,这是一个非常微妙但巧妙的效果!
使用加速度计也可以访问“摇动”手势,但由于需要一些编码,请务必查看github.com/alexgibson/shake.js
以快速实现。有关器件方向规范的更多信息,请参见 http://dev.w3.org/geo/api/spec-source-orientation.html 的。有关 iOS 和 compass 使用的更多信息,请参见developer . apple . com/library/safari/# documentation/safaridomain additions/Reference/deviceorientionevent/deviceorientionevent . html。
注意在
help . ArcGIS . com/EN/webapi/JavaScript/ArcGIS/help/js samples _ start . htm # js samples/mobile _ compass . html
有一个很好的使用 Webkit compass 的例子。
协议
移动广告的另一大优势是直接在广告体验中打电话和发短信。在移动设备中,特定协议可用于 TEL 和 SMS 等。电话和短信可以让用户在设备上打开本地电话或短信客户端。这个例子演示了如何做。
<a href="tel:18005551212">Call!</a>
<a href="sms:18005551212">Text!</a>
这种简单的交互提供了出色的用户体验;用户不必复制和粘贴文本,也不必在应用之间切换。他们需要做的只是点击链接 CTA,然后收到通知,让他们打电话或发短信。如果你想让某人联系客户服务,或者甚至在当地汽车经销商处安排一次试驾,这真的很棒。除了这些内置协议之外,当用户在特定链接上进行交互时,本机应用可以分配自己的协议,以便从浏览器中打开自己。这里有一段代码展示了苹果的 Facetime 和微软的 Skype 是如何使用它们自己的协议的。
<a href="facetime://18005551212">Facetime me!</a>
<a href="skype:youUserID?call">Skype!</a>
请记住,许多应用都有自己的协议,但在移动领域,这对广告商来说非常有利。这也不是电话或通讯应用特有的;内容提供商和出版商——包括使用 wsj://【的《华尔街日报》——使用协议从一个链接打开应用内部的特定用户交互。当网页或广告与原生应用无缝通信时,这是一个非常好的特性。你可以让用户从广告单元中尝到信息的滋味,并要求他们通过更深入地挖掘应用环境来阅读更多信息。
MMA 和 IAB
在回顾所有这些信息时,你可能会问自己一个关于标准和移动广告准则的问题。幸运的是,就像桌面广告一样;在移动领域也有一套新兴的标准和指导方针需要遵循。移动营销协会(MMA)(mmaglobal.com
)和互动广告局(IAB;http://iab.net 是移动在线广告的标准组织。MMA 传统上侧重于静态广告,而 IAB 更侧重于移动领域的丰富广告。以下是 IAB 和 MMA 为 rich 和 static 设置的一些常见的移动广告单元大小。
- 典型的移动富媒体横幅尺寸:300 × 50、320 × 50
- 典型的移动富媒体面板尺寸:300 × 300、320 × 320 或全屏(320 × 480)
- 需要面板上的关闭按钮
- 静态 MMA 尺寸
- XL (300 × 50)
- 大(216 × 36)
- 中等(168 × 28)
- 小(120 × 20)
IAB 还专注于被称为“明日之星”的移动富媒体格式,这种格式对广告出版商和广告服务器来说更有吸引力。这些格式包括全屏单元、滑块和电影创意广告单元。每一个都提供了独特的体验;他们超越了静态横幅房地产。参见iab.net/risingstarsmobile
了解更多信息。
设备测试
在本章结束时,我想谈谈在处理移动开发时可以使用的工具——我知道这可能会让人不知所措!在所有这些移动设备上进行测试可能会很痛苦。有太多的设备可以控制你的内容在每个屏幕上的外观和行为。有很多服务可以进行虚拟设备和浏览器测试:Device Anywhere、BrowserStack、Opera 的移动模拟器等等。它们非常好,但是没有什么比在真实的东西上测试更准确,所以一定要联系在线社区,在他们可能随时可用的设备上启动一些测试。网络上也有各种免费工具来缓解你的移动开发困境:jsconsole.com
、remote-tilt.com
,以及移动“查看源”工具、snoopy.allmarkedup.com
,都有非常棒的免费功能集。此外,还有免费的远程调试工具:Adobe Edge Inspect(正式名称为 Adobe Shadow)[html.adobe.com/edge/inspect
],Weinre[people.apache.org/∼pmuellr/weinre/docs/latest
],以及 Safari 为 iOS 6 新开发的开发者工具集都值得一试。最后,有时你绝对需要在实际设备上进行测试,所以如果你需要开车去当地的电子商店查看最新的设备,那么就去吧——特别是如果你的客户将使用你无法获得的设备。有可能你至少会有一个客户会在“百万分之一”的设备上观看你的创意,如果你不测试它,它可能会让你付出整个活动的代价。
摘要
这一章已经介绍了很多关于移动广告和移动网络的内容。景观是广阔的,破碎是非常明显的。某些技术仅适用于某些浏览器、设备和操作系统版本。移动广告和 HTML5 携手并进,移动对如何与不断发展的 HTML5 规范合作以及其各种 API 开发者可以获得什么有着特定的看法。我们回顾了我们生活的移动世界以及如何构建它,甚至讨论了各种可以用来构建丰富的广告创意的原生设备功能。希望在读完这一章后,你会有信心回答客户的问题,比如“JavaScript 能和 HTML5 一起用于开发 iPad 的互动广告吗?”下一章关注移动应用广告的广阔世界。这是事情变得更棘手的地方,空间碎片明显变得更厚。但这也是移动广告更复杂、更吸引人的地方。如果你准备好了,让我们深入应用广告的世界。
九、应用内广告
在回顾了关于移动网络广告的第八章之后,是时候开始了解广告商是如何将他们的广告带入新兴的应用世界的。这些应用可以是任何东西,从用户从应用商店下载的手机应用到游戏机或智能电视上的应用。我将讨论每种设备和操作系统的不同环境,并讨论所有环境的使用案例。我将回顾软件开发工具包(SDK)和它们如何参与广告服务,以及广告如何在应用中比在移动网络环境中提供更丰富的功能。我将讨论 SDK 提供商,如 AdMarvel、Medialets 和 Millennial Media,它们提供应用内广告,我将重点讨论 IAB 的解决方案和标准,以及 ORMMA 和 MRAID API。
注意复习本章时请记住,SDK 和应用是会变化的。本章介绍了当前应该做什么,但是随着 SDK 供应商和内容所有者更新他们的 SDK 或使用其他供应商来传播他们的广告,信息可能会发生变化。
移动应用
移动应用是在您的移动设备上运行的本地应用。你可以把它们想象成微软 Office 或 Adobe Photoshop 之类的应用,它们原本在你的台式电脑上运行,但现在却在你的手机或平板电脑上运行。使用移动应用,而不是强迫用户在浏览器中访问 URL 此外,通过提供应用,内容所有者可以完全控制他们的应用,因为它位于设备浏览器之外。应用开发人员通过使用操作系统所依赖的底层代码来创建这些“应用”。对于苹果 iOS 来说是 Objective-C,对于安卓来说是 Java。拥有这些技能的开发人员可以为自己创造一个非常有利可图的职业生涯,为生产力、娱乐甚至游戏开发应用。至少可以说,应用市场正在蓬勃发展,因为 2011 年应用内购买占了 9.7 亿美元的销售额。到 2015 年,这一数字预计将增长到 56 亿美元。Juniper Research 在 2012 年报告称,到今年年底,应用内广告将达到 24 亿美元。到 2015 年,这一数字将飙升至 71 亿美元。这些应用获得了大量的浏览量,因为人们可以在任何时候花很少的费用甚至免费将它们下载到他们的设备上。这当然给应用市场带来了很多关注,以及用户抓住它们是多么容易。
在苹果的应用商店、谷歌的 Play marketplace 和黑莓的应用世界等各种应用商店中,有近百万种不同的应用可供选择;每款应用的功能和价格都各不相同,甚至可以免费进行应用内购买。在接下来的部分中,我将介绍一些领先的应用市场。
苹果
苹果对移动应用市场并不陌生。通过 iOS 和苹果应用商店,用户可以浏览超过 50 万个应用,而且大多数应用都是免费的,还附带广告。开发人员过去可以在他们的应用中获取用户的唯一设备标识符(UDID),但苹果公司删除了这一功能,因为它对用户的隐私问题构成了威胁。基本上,拥有一个用户 UDID 可以让应用开发者通过他们的应用更好地将广告商的信息传递给正确的客户。将位置、时间和兴趣等信息都绑定到一个唯一的设备 ID 或哈希,这意味着广告商可以更好地了解谁在何时查看他们的广告内容。虽然 UDIDs 现在不允许应用在 iOS 中访问广告,但从 iOS 6 开始,还有另一个广告标识符,允许应用通过类似的方式更好地定位。此外,甚至有一个称为 open UDID 的开放 UDID 的倡议,它将被所有设备访问,但它尚未真正起飞(github.com/ylechelle/OpenUDID
)。
苹果凭借在这样一个受控的开发者环境中提供的优质应用数量,在应用市场上几乎占据了至高无上的地位。再加上苹果设备的爆炸性增长,这意味着应用是一个非常有价值的市场。图 9-1 显示了 eMarketer 对美国 iPad 用户未来三年的预测。
图 9-1。2010 年至 2015 年美国 iPad 用户(数据来源:eMarketer.com)
图 9-1 表示,到 2015 年,大约 9000 万美国用户将接触 iPad 平板电脑并与之互动。随着许多人转向基于平板电脑的体验,而不是传统的桌面应用,预计会看到更多的应用和广告商进入这一领域。
机器人
谷歌的 Android 是另一个主要的竞争应用操作系统。截至去年,谷歌拥有全球最多的每台设备操作系统安装量,许多人认为这是因为它提供了一个稳定和开放的操作系统,可以安装在许多制造商的设备上,如三星、LG、摩托罗拉和其他公司。谷歌提供了与苹果应用商店非常相似的体验,在安卓设备上下载和安装应用;谷歌的商店叫做 Google Play(play.google.com/store/apps
)。从安卓设备上,用户可以浏览近百万个应用,包括免费和付费的。就像它的竞争对手苹果一样,由于许多应用都是免费提供的,谷歌应用通常是由基于广告的模式推动的。
关于 Android,需要注意的一件重要事情是,它的操作系统版本在其用户群中有很大差异,这就是为什么对于 Android,你经常会听到碎片化。这种碎片化的出现是因为所有不同的操作系统版本,以及用户无法或缺乏兴趣采用最新版本。我说“无法”是因为许多设备无法更新到最新版本的 Android,这使得其用户群非常多样化。这反过来为开发人员和设计人员创造了大量额外的工作,他们需要创建原生应用和基于 HTML5 的广告。这是 iOS 对开发者保持很大吸引力的主要原因之一;它的用户群采用(并且能够)非常快速地安装最新的操作系统,这给了开发者一个公平的竞争环境来部署内容。为了更好地理解这种碎片化,请访问all thingsd . com/2012 09 20/usage-of-Apple-ios-6-hits-staggering-levels-on-first-day-available
,在那里你会发现 Android 的操作系统采用率与苹果的 iOS 相比是失败的。
Android 仍然是移动操作系统领域的主要竞争对手,如果你有兴趣为世界上最大的移动操作系统开发应用,请访问 http://developer.android.com/sdk/index.html。
其他人
许多其他移动操作系统也在市场上,包括黑莓的 App World(appworld.blackberry.com
)和 Windows Phone 的 store(windowsphone.com/store
),但与 iOS 和 Android 相比,它们目前在全球操作系统市场上的份额都非常小。预计黑莓将在 2013 年发布最新最棒的操作系统黑莓 10,这可能是该公司迫切需要的推动力。在blackberry.com/BlackBerry-10
阅读更多特色。
根据研究公司尼尔森(Nielsen)的说法,Windows Phone 在 Windows Phone 7 上的起步也很慢,但预计会有很大的变化,因为 Windows 应该会随着 Windows 8 更新而起飞,Windows 8 更新是与微软的第一款平板电脑 Surface 一起发布的。Windows 最初将这一新操作系统的用户界面命名为“Metro ”,但后来移除了 Windows 8 用户界面的这一品牌。黑莓和 Windows 在移动领域仍然具有竞争力,如果你正在制作需要在这些操作系统上的各种应用中部署的广告,你需要继续阅读,以了解如何利用高度分散的移动市场。
应用内广告
你可能已经猜到,有了所有这些应用商店,这些设备上的用户数量,以及免费应用的数量,广告商注意到并将其部分广告支出转移到这个新兴的数字渠道只是时间问题。嗯,你完全正确。在为设备开发原生应用时,应用内广告正成为开发者收入流的巨大市场。许多内容提供商和开发者以广告支持的模式免费提供他们的应用。以非常受欢迎的游戏 Word with Friends 为例,这款游戏可以在任何操作系统上运行,有免费版和付费版供用户下载。这两款游戏为最终用户提供了非常相似的体验,除了免费版有广告,付费版没有广告。随着这些流行游戏的数以百万计的下载,广告商注意到人们的目光不再都集中在桌面或电视上,所以他们将广告资金转移到了吸引眼球的地方。
应用内广告其实并不新鲜;事实上,自从 2010 年苹果 iPad“发明”了平板电脑市场以来,广告就一直存在于应用中。例如,广告服务器 PointRoll 在 iPad 向用户发布的第一天提供了如图 9-2 所示的广告单元。图 9-2 展示了一个富媒体 Lincoln 广告,它是通过 text plus(textplus.com
)应用在 iPad 上使用 SDK 提供商 AdMarvel 部署的。
图 9-2。最早的 iPad 广告之一
就率先上市和创新的平板电脑广告而言,林肯的广告相当具有开创性。用户的体验是点击应用中的静态横幅,他们将被带到一个全屏沉浸式环境,其中有视频、高分辨率图像和多种布局,具体取决于设备的方向。这种体验为更具创新性的广告体验铺平了道路,包括游戏、互动和现场投票。很快,广告商们意识到,你可以在桌面上做的任何事情,也可以带到移动和平板电脑环境中。
随着广告商越来越多地涉足这一媒介,预计未来几年将有更多的资金投入这一市场。事实上,eMarketer 和 Juniper Research 指出,2015 年应用中的广告支出将超过 70 亿美元(见图 9-3 )。
图 9-3。2012 年至 2015 年全球移动应用内广告支出(来源:eMarketer.com)
随着未来几年应用内广告支出的增加,现在是学习如何将富广告部署到这些新的分发渠道的绝佳时机。但是现在还不完全是有趣和有利可图的。在跨 oss 开发之前,你需要掌握一些关键的技术要点。你可能会认为现在所有的错误都被解决了,这种情况比你最初从 HTML5 和其他移动设备中学到的要少得多。遗憾的是,事实远非如此,在下一节中,您将了解在处理应用内广告时需要考虑的额外碎片。
sdks
HTML5 中的碎片是非常明显的,正如你在前面的章节中了解到的。在移动 web 领域更是如此,有各种不同的操作系统、版本号和各种级别的 HTML5 兼容性。对于移动应用领域,事情变得更加棘手,因为现在开发人员必须了解哪些应用支持哪些广告平台 SDK 以及 SDK 的版本。许多出版商和应用广告服务器使用软件开发工具包(SDK)来处理许多不同应用环境中各种广告标签的交易和调度。可以将 SDK 视为广告管理系统和用户设备上的应用之间的中介层。由于 SDK 实际上只是包含在原生应用中的一点代码,开发人员需要预见到他们的应用应该或将要在某个时候包含广告。例如,目前一些应用,如脸书、Instagram,甚至 Twitter 都没有广告,因此在其应用的开发中不需要第三方广告 SDK。然而,像华尔街日报、今日美国和潘多拉电台这样的应用向用户提供广告,以换取免费内容,无论是音乐、体育还是新闻。这些广告通常是通过发布者端的广告服务器和应用软件开发工具包来传播的。一方面,你有广告服务器的活动管理工具,它允许用户安排和定位他们的标签以及设置基本的发送规则。另一方面,您有一个 SDK,它与活动管理工具进行通信,以便接收预定的特定广告。图 9-4 更好地展示了两端之间的连接。
图 9-4。应用和广告服务器之间通过 SDK 进行通信
在图 9-4 中,可以看到应用内容会通过 SDK 向广告服务器发出请求。一旦广告服务器知道是什么应用发出了广告请求,它就会通过 SDK 返回适当的广告内容。所以,你可能会想,必须有一个标准的方法来做到这一点,对不对?好吧,回答你的问题,答案是肯定的和否定的。目前,在移动应用内场景中有许多不同的发行商广告服务器和 SDK,在下面的章节中,你将仔细看看一些更受欢迎的,你将在开发应用内活动时处理的。
苹果的 iAd
苹果自己的 iAd 平台(advertising.apple.com
)是更受欢迎的应用内广告网络之一。苹果 iAd 平台允许开发者通过横幅和丰富的全屏广告获得收入,其中苹果出售你的应用中的广告空间,并通过其网络发送广告以填充广告位。然后,当用户查看(印象或与应用中显示的广告互动(活动)时,应用开发者可以获得收入。
苹果 iAd 平台是在 4.0 版本的操作系统中向 iOS 开发者和广告商推出的,过去每个广告活动的价格高达 100 万美元,但由于缺乏初始参与者,价格已经大幅下降。要使用苹果的 iAd 平台,你必须成为苹果开发者和 iAd 网络成员,只有这样,应用发行商或开发者才能控制应用中的广告。有了 iAd,开发者可以使用苹果的免费工具,如 iAd Producer,它为快速构建 iOS 广告提供了一个干净的界面。此外,由于广告是为 iPhone 和 iPad 等 iOS 和苹果设备构建的,开发者可以利用一些真正令人惊叹的应用内功能,例如:
- 在后台下载应用或 iTunes 内容
- 将提醒事项直接添加到日历应用
- 使用联系人列表,在广告中撰写和发送品牌电子邮件
- 借助 WebGL 支持体验身临其境的 3D 图形(更多关于 WebGL 的信息,请参见第十二章)
- 在自定义框架中查看在线音频和视频
- 保存优惠券、条形码、食谱或品牌壁纸
- 使用地理定位查找附近的商店
除了 iAd 用户可用的丰富功能外,该平台还提供有价值的指标和分析,例如:
- 印象
- 龙头和龙头通过率
- 独特的访问
- 平均花费时间
- 浏览量和每次访问的浏览量
- 互动(观看视频、玩游戏等)
- 转换和下载
最后,iAd 还提供了一些丰富的受众和设备定位功能,例如:
- 人口统计数据
- 应用首选项
- 音乐、电影、电视和有声读物类型兴趣
- 位置
- 设备(iPhone、iPad、iPod touch)
- 网络(WiFi、3G)
如果你是一个出版商或内容所有者,并希望在你的应用中利用 iAd 平台,我强烈建议你访问developer . apple . com/library/IOs/# DOCUMENTATION/user experience/Conceptual/iAd _ Guide/Introduction/Introduction . html
。
谷歌的 AdMob*
你可能已经猜到了,谷歌也在这个领域,它的大型移动广告平台叫做 AdMob(google.com/ads/admob
)。谷歌在 2009 年以 7.5 亿美元收购了该公司,目前 AdMob 每年运营数十亿条横幅和基于文本的广告展示。它的 SDK 跨 Android、iOS 和 Window Phone 7 应用运行,并在一个界面中管理多个广告网络。AdMob 通过与 Adfonic、BrightRoll、HUNT、iAD、InMobi、Jumptap、Millennial Media、MobFox 等网络合作,提供了一个巨大的广告网络中介,为广告管理提供了一个单一的界面。应用开发人员将 SDK 代码库安装到他们的应用中,并可以通过在环境中提供富媒体广告来获得收入。除了 SDK 之外,AdMob 还直接与 DoubleClick for publishers (DFP)接口,后者允许用户直接通过 AdMob 广告网络填充广告库存。AdMob 允许富媒体,提供利用 HTML5 的高级创意格式,并提供针对特定人口统计和位置的受众。要下载最新的 AdMob SDK,请访问 http://developers.google.com/mobile-ads-sdk/download。例如,对于使用 AdMob SDK 的应用,请访问 http://code.google.com/p/google-mobile-dev。
歌剧广告*
另一个移动广告服务器和 SDK 提供商是 AdMarveladmarvel.com
。AdMarvel 隶属于浏览器制造商 Opera,是一家强大的出版商端广告服务器、优化/中介(移动广告交换)和富媒体 SDK 提供商。与 AdMob 非常相似,它提供了一个 iOS 和 Android SDK 以及一个黑莓 SDK。因此,应用开发人员/发行商可以获得最好的服务,并访问其他富媒体提供商,同时减少应用中的 SDK 混乱。通过 AdMarvel 接口,标准目标包括:
- 时间
- 地区
- 设备
- 操作系统
- 网络运营商
请注意,自定义目标也是可用的(专门针对 AdMarvel)。这意味着活动经理和开发人员可以根据之前的输入为某些广告标签设置规则,以呈现到用户的设备上。当您想要为特定设备、一天中的某个时间,甚至是手机网络状态提供定制的消息或创意时,这非常有用。
媒体*
另一个流行的移动富媒体广告服务器和 SDK 提供商是 media lets(medialets.com
)。Medialets 专门从事移动富媒体,在在线出版商和电子杂志等数字出版物市场都有很大的渗透力。Medialets 提供了自己的 SDK,用于集成到 iOS、Android 和 BlackBerry 应用中,并提供了一套分析工具来衡量您的活动效果。由于 Medialets 是一个在应用环境中工作的 SDK 提供者,它可以提供很好的定位,包括时间、地理位置、应用内容、设备类型和连接状态。
千禧年媒体
千禧传媒(millennialmedia.com
)自称是最大的独立移动广告网络,与谷歌的 AdMob 和苹果的 iAd 竞争。Millennial Media 还推出了完整的 SDK (MMSDK ),可以在各种设备上的各种应用中提供富媒体移动广告。您可以下载适用于各种设备操作系统的 MMSDK,包括 iOS、Android、BlackBerry、Windows Phone、PSP 和 WebOS 等等。通过 Millennial Media 的工具,开发人员可以通过实时结果和分析支持交互式移动视频广告、移动富媒体和传统横幅广告。千禧媒体还提供目标定位,包括人口统计、行为、地理位置和背景等。你可以在 http://tools.mmedia.com 的了解更多关于它的工具集(一定要先注册)。
其他人
移动广告网络和提供 HTML5 驱动的富媒体的 SDK 提供商还有很多。对于本书的范围来说,有太多的名字,这是一个不断变化的生态系统。但是为了让你知道其他几个,你可能还需要把你的广告标签放到 Jumptap(jumptap.com
)、grey stripe(greystripe.com
)和 InMobi(inmobi.com
)这样的网络中。请注意,他们可能依赖这里没有提到的 SDK。事实上,某些应用拥有自己的“自制”广告服务 SDK,如 Pandora Music 应用,当服务于此类应用时,应用提供商、SDK 供应商和创意机构需要共同确定需要对平台进行哪些调用,以识别广告的某些丰富功能,如广告是扩展还是关闭。Pandora 对移动领域并不外行,但出于某种原因,它选择不与 iAd、Millennial Media 和 AdMeld 等提供商合作,可能是因为安全问题(cnnmoneytech . Tumblr . com/post/4588292154/Pandora-boots-its-outside-ad-platforms
)。
所有这些 SDK 供应商信息的要点是,这些 SDK 需要被您交付的 HTML5 广告创意引用。ad 和 SDK 供应商之间的这种通信是通过 API 进行的,它通常通过 ad 的 JavaScript 代码进行通信。对于扩展、关闭并提供视频和游戏的移动富媒体广告,包含广告的应用需要根据用户交互了解广告处于什么状态。这可能看起来很熟悉,因为我在第七章的中讨论了在出版商的视频播放器中使用 VPAID API。基本上,同样的规则也适用于此,广告需要与发行商的应用进行沟通,这样最终用户的体验才不会不舒服。问题是,这个领域有这么多不同的供应商,很难理解什么样的 API 适用于所有这些供应商,即使存在这样的供应商。这就是移动应用空间中出现碎片的地方。这在不同的网络和设备之间会有很大的不同,这使得广告商很难保证购买的媒体在任何地方都能完美运行。
以一个“家庭酿造”解决方案为例,当使用 Pandora 应用时,你可以使用清单 9-1 中的代码片段在它的移动应用中运行一个基本的扩展/折叠富媒体广告。
清单 9-1 。 潘多拉 App API 示例
<!DOCTYPE HTML>
<html>
<head>
<meta name = "viewport" content = "width=device-width">
</head>
<body>
<button onclick=expandPandora()>Open Panel</button>
<button onclick=closePandora()>Close Panel</button>
</body>
<script>
document.addEventListener('DOMContentLoaded', function() {
}, false)
function expandPandora() {
try {
PandoraApp.setViewportHeight(300)
} catch (e) {
console.log (e + " No PandoraApp Reference")
};
initExpand();
}
function initExpand () {
console.log('initExpand')
}
function closePandora () {
try {
PandoraApp.setViewportHeight(50);
} catch (e) {
console.log(e + " No PandoraApp Reference")
};
closeExpand();
}
function closeExpand () {
console.log('closeExpand')
}
</script>
</html>
从前面的例子中可以看出,通过 JavaScript 调用使用 Pandora 的 SDK 相当简单,但它只适用于 Pandora。在其他出版商之间投放广告的广告商需要为每个出版商定制广告,从操作上来说,这对于规模和快速周转时间没有意义,因为您可能需要在脚本中创建一个大型条件语句来与所有供应商的 API 接口。
考虑到这个广告可能会被发送给潘多拉之外的出版商,我喜欢用一个 try/catch 方法来包装我的调用。虽然这不是最佳的编码实践,但它确保了如果 Pandora 对象不存在,代码将记录一条消息并继续运行而不会中断。目前,当你想让一个广告在多个网站和网络上运行时,这是一个很好的做法。同样,这个特定的用例只是针对潘多拉的,但是你可以很容易地看到这是如何迅速失控的!让开发人员添加大量的 try/catch 语句或条件是一项额外的工作和测试,在您可以在什么浏览器、什么设备、什么操作系统版本上使用什么功能之间,将这种 SDK 碎片添加到难题中真的会让您头疼!(还记得广告主是怎么想要规模的吗?)总得有更好的吧?!
奥尔玛和 MRAID
因此,对于所有这些应用,您可能会问自己,“这是怎么回事?在 HTML5 广告开发已经多样化的情况下,我为什么还要担心额外的 SDK 碎片?”嗯,一段时间以来(甚至在我写这篇文章的时候),这种方式一直存在,因为供应商认为他们可以将他们的客户捆绑在一起,使用他们自己专有的 SDK 代码库,从而导致客户被他们的广告服务“卡住”。虽然这是一个非常聪明的商业模式,因为它使开发者很难做出改变,但现实是这不是一个长期的商业模式,因此,我向你介绍奥尔马(ormma.org
)和 MRAID(iab.net/mraid
)。
开放富媒体移动广告(ORMMA)是一项全行业倡议,旨在让广告商拥有一套通用的规则,用于在各种移动应用平台上显示富媒体广告。ORMMA 是一个 SDK 和 API,允许广告设计人员使用一种通用的方式与 ORMMA 兼容的应用进行交互。应用开发人员需要遵循 ORMMA 规范,以允许广告设计人员将引人注目的富媒体广告添加到他们的应用中。虽然 ORMMA 开始大规模构建移动富媒体,但随着 IAB MRAID 的发布,这已经成为过去。
移动富媒体广告接口定义(MRAID)本质上是 VPAID 对于发行商视频播放器的意义,除了移动应用。它建立在 ORMMA 提出的许多原则的基础上,其唯一目的是缓解设备、应用和广告服务器之间的碎片化,使移动富媒体成为一个有利可图的行业。MRAID 得到 IAB 的坚定支持,并有一个致力于其发展的专门工作组。IAB 认为 MRAID 应该成为移动富媒体广告单元与应用环境通信的事实标准。目前在其第二个版本中,MRAID 允许移动广告开发者利用一组标准功能在广告和应用的 SDK 之间进行通信,例如告诉应用广告将扩展、关闭,甚至播放视频。MRAID 并不意味着践踏 HTML5 或当前的 APIs 相反,它的存在是为了帮助广告设计者进行开发,因为某些 HTML5 碎片可能仍然存在。
MRAID 旨在简化和易于实现,并且不依赖于各种 SDK。事实上,对 MRAID 的唯一要求是应用选择的 SDK 应该是 MRAID 兼容的,并且能够识别来自广告代码内部的 API 调用。这些信息只能来自出版商,或者可能是记录谁是 MRAID 认证的或者不是的 IAB。然而,我前面提到的大多数 SDK 供应商都在努力实现 MRAID 合规性,因此在他们的平台内工作应该会很好。
所以,现在你知道了一点为什么 MRAID 对广告设计师很重要,让我们在下一节和清单 9-2 中回顾一些基本的 MRAID 代码。
注在撰写本文时,标有*的 SDK 部分据说是兼容的,支持 IAB 的 MRAID。
MRAID 电码
既然所有未来的 SDK 都应该是 MRAID 兼容的,那么回顾一下 MRAID 代码 在应用中与兼容 SDK 的接口是值得的。清单 9-2 概述了一个使用基本 MRAID API 函数的基本可扩展广告。
清单 9-2 。 MRAID JavaScript API 示例
<!DOCTYPE HTML>
<html>
<head>
<meta name = "viewport" content = "width=device-width">
</head>
<body>
<div id='cta' hidden data='http://johnpercival.org'>Click Here</button></div>
<section id='banner'><button onclick=expandMRAID()>Open Panel</button></section>
<section id='panel'><button onclick=closeMRAID()>Close Panel</button></section>
</body>
<script>
function checkMRAID (){
if (mraid.getState() != 'ready') {
console.log("MRAID Ad: adding event listener for ready");
/* mraid still loading, registering for ready event */
mraid.addEventListener('ready', init);
} else if (mraid.getState() === 'ready') {
console.log("MRAID Ad: already ready, calling init");
init();
} else {
console.log("MRAID Ad: I think its ready, calling init");
init();
}
}
function init () {
mraid.removeEventListener('ready', init);
console.log("Mraid Version = " + mraid.getVersion());
console.log("Mraid Placement Type = " + getPlacementType());
mraid.setExpandProperties({
width : 320,
height : 480,
useCustomClose : true
});
mraid.addEventListener('error', handleErrorEvent);
mraid.addEventListener('stateChange', handleStateChangeEvent);
document.getElementById('cta').removeAttribute('hidden');
document.getElementById('cta').addEventListener('click', function() {
var url = document.getElementById('cta').getAttribute('data');
openBrowser(url);
});
}
function expandMRAID () {
try {
mraid.expand();
} catch (e) {
console.log(e + " No MRAID Reference")
};
}
function closeMRAID () {
try {
mraid.close();
} catch (e) {
console.log(e + " No MRAID Reference")
};
}
function handleStateChangeEvent(state){
switch (state) {
case "default":
document.getElementById('banner').style.display = 'block';
document.getElementById('expandable').style.display = 'none';
break;
case "expanded":
document.getElementById('banner').style.display = 'none';
document.getElementById('expandable').style.display = 'block';
break;
}
console.log("State - " + state + " at handleStateChangeEvent");
}
function openBrowser(href) {
try {
mraid.open(href);
} catch (e) {
console.error(e);
} finally {
window.setTimeout('location.href="' + href + '"', 150);
}
}
function handleErrorEvent (message, action){
var msg = "MRAID ERROR ";
if (action != null) {
msg += "caused by action '" + action + "', ";
}
msg += "Message: " + message;
console.error(msg);
}
window.addEventListener("DOMContentLoaded", function() {
try {
var head = document.getElementsByTagName('head')[0];
var js = document.createElement('Script');
js.setAttribute('type', 'text/javascript');
js.setAttribute('src', 'mraid.js');
head.appendChild(js);
} catch (e) {
console.log("Error injecting mraid.js");
}
console.log('DOM Loaded');
checkMRAID();
});
</script>
</html>
该代码以最简单的方式概述了如何与 MRAID API 进行交互。作为广告开发人员,您需要做的第一件事是通过将 mraid.js 脚本添加到您的广告标签来表明您是 MRAID 广告。通过侦听 DOMContentLoaded 事件可以做到这一点,因为这将在 DOM load 事件之前触发。尽快将这些信息提交给 SDK 是至关重要的,因为这是你与 MRAID 广告合作的唯一标志。如果您没有能力监听和处理 DOM 事件,那么您的广告脚本标记应该通过编写
注意Chrome、Firefox、Opera、Safari、IE9+都支持 DomContentLoaded。如果你的目标是 IE8,那么如果使用 jQuery,一定要使用 onload 或 DOM ready。
回到代码:接下来,通过在 checkMRAID()方法中添加一个事件侦听器来侦听 MRAID 就绪事件;。有时,事件在您可以调用侦听器来处理它之前就触发了,所以在这种情况下,您可以假设 MRAID 存在并被加载,并且可以安全地调用 init();。在 init 中,您删除事件监听器,检查 SDK 支持的 MRAID 版本,并检查您的放置类型。这些信息对于广告开发人员来说非常重要,如果早期版本的 MRAID API 不支持某些功能,他们可以调整广告体验。您还可以通过将宽度设置为 320,高度设置为 480 来设置您的扩展属性,并告诉 SDK 您正在使用自己的自定义关闭按钮,这样您就不需要在扩展时让 SDK 为您提供一个按钮。最后,为 MRAID 上的错误以及广告上的状态变化添加两个事件侦听器。最后,当 ad 调用 expandMRAID()和 closeMRAID() 时,可以调用 mraid.expand()和 mraid.close()方法来分别指示应用 ad 正在打开和关闭,这个函数应该暂停应用环境中的任何内容。
这个例子相当简单,但是就语法而言,可能需要一些时间来适应。MRAID 并没有就此结束;如果 creative 或 SDK 需要,还可以添加更多内容,包括保存图片、播放视频,甚至将提醒保存到移动设备的日历应用的方法。在 API 的 2.0 版本中,开放这些功能集,这对那些标准尚未完全确定并在 HTML5 或其他规范中采用的广告开发人员来说有很大的好处。也就是说,MRAID 并不打算与 HTML5 和 DOM APIs 或浏览器的新功能发生冲突。它充当广告和应用之间的通信层,并在需要时为广告创意提供特征检测,并允许广告适度降级。IAB 对 MRAID 2.0 的描述如下:
MRAID v.2 提供了一种标准的方式来查询富媒体 SDK 的某些设备功能,提供了视频创意的一致处理,并解决了 HTML5 目前没有很好地实现的两个原生设备功能:向设备日历添加条目和在设备照片卷中存储图像。
MRAID 是任何开发广告创意应用的人的福音,如果你发现一个应用不支持它,但提供广告,我强烈建议联系开发者,让他们采用它。事实上,非常努力地追求它;你将为他们、你自己以及将来需要开展活动的所有人提供服务。有关 MRAID 文档的更多信息,请访问 http://iab.net/mraid。
测试
在应用广告的世界里,没有什么比在设备上测试创意 更好的了。然而,在许多情况下,这与实际情况相去甚远。应用的发布者和内容所有者通常没有能力允许每个广告开发者访问他们应用的“测试版本”,要么是因为他们不知道如何这样做,要么是因为他们已经达到了他们可以分发的设备的极限。
注意一个名为 TestFlightApp(
testflightapp.com
)的优秀应用测试服务可以帮助解决这个问题。
不管是什么情况,只要知道大多数时候获得发行商应用的测试版本是一种奢侈,所以调试你的广告代码可能是一个巨大的挑战。这里的问题是,在应用中的设备上进行测试可以提供最准确的结果,就像在多个浏览器中测试桌面活动一样。回想一下,当出版商提供测试页面时,广告服务器可以将他们的广告标签传输到一个与广告发布当天的真实环境非常相似的环境中。这是同样的概念,只是更难得到!
总是在一开始就询问与你合作的发行商和/或应用提供商他们是否能支持这一点,如果不能,他们还能以什么方式支持测试。了解他们是否可以提供他们的应用版本,这样你就可以运行你的广告,而不只是在浏览器中测试或相信别人的话。就我个人而言,我喜欢把我的广告测试分成以下四层。我总是试着射第一个球,但是有时候由于前面提到的各种原因,第一个球还是遥不可及。
- 在要运行的设备上使用应用的测试版本。
- 在要运行的设备上使用本机 web 浏览器进行测试。
- 使用要运行的设备的设备模拟器进行测试。
- 使用与移动 web 浏览器类似的渲染引擎的桌面浏览器,如 Webkit for Mobile Safari。
在 MRAID 的情况下,你可以在位于 http://webtester.mraid.org 的 MRAID 网络测试器中查看符合要求的广告,但是你也可以下载源代码并在你自己的域名上运行你自己的网络测试器。在那里,您将能够使用 MRAID API 模拟一个应用环境,并验证您的广告功能是否正常工作。
我想你会同意测试对于应用内广告来说是一个挑战,但是我预测随着时间的推移,随着更多的广告投入进入这个市场,这将变得更加容易。事实上,苹果的 iOS 6 和 Mac OS X Safari 允许通过桌面 Safari 使用 Safari 的开发工具在 iPhones 和 iPads 等设备上进行测试和检查。设计人员和开发人员现在可以在实际设备上实时查看他们的应用、web 内容和广告。
最终,在应用内的设备上进行测试是最理想的。但是,如果你需要满足于你可以访问的东西,使用 iOS、Android 和其他移动操作系统的模拟器,如果你需要,开车到你最近的电子商店,在地板模型上测试(说真的,我已经这样做了)。请记住,今天是平板电脑和手机,但接下来将是电视和其他电器和汽车。我们不能指望拥有并测试每一台冰箱,不是吗?争取从发行商那里获得测试应用,特别是如果你计划与他们一起做不止一次的活动。当你这样做的时候,构建、测试和调试将会顺利得多,如果你是一个应用开发者或发布者,使用像 TestFlightApp(testflightapp.com
)这样的工具,它允许你通过空中(OTA)将你的应用传递给不同的团队成员。如果您的生产和开发团队遍布全球,这尤其有用!
MRAID 收养〔??〕〔??〕
MRAID 在某些方面仍然是相当新的,但它有望成为应用内部广告工作的标准。出版商需要一段时间来采用新的做法,但 MRAID 的支持是对行业的巨大推动,甚至是 IAB 的更大推动。在我写这篇文章的时候,IAB 正在为 MRAID 的未来版本进行许多测试和讨论,并向出版商和广告服务器发布认证标签,声明他们符合 MRAID 标准。虽然我个人希望他们能更好地监管这一点,所以出版商和广告服务器必须证明他们是 MRAID 兼容的,我想这将做他们声明他们是。如果他们不在,我们随时可以叫他们出来。
事实是,如果你有一个活动,要求你进入一个应用,因为它是在媒体购买中概述的,首先要确保出版商的 SDK 是 MRAID 兼容的。第二,进行一次试飞,以确保在进行一场真正的战役之前,一切都解决了。这将允许你轻松地跨多个发行商和应用进行伸缩,并且确信你的广告将在任何和所有支持该 API 的应用中正确运行。在这个空间中不再需要处理 SDK 碎片。我们都知道开发者有更大的事情要担心,尤其是在行业其他领域的分裂。如果你确实遇到了一个问题,一个出版商或应用声称它符合 MRAID 标准,但你的测试证明不是这样,告诉 IAB,以便它可以强制遵守(iab.net/guidelines/508676/compliance/2153679
)。再说一次,这是为了整个行业的改善,而不是指责。
创意特色
在应用环境中工作允许 ads 与设备和本机设备功能 有更深入的整合。你可以拥有比典型的移动网络广告更丰富的功能。创意可以使用诸如检测网络连接、设备硬件和特殊文件访问等功能来添加到日历或相册中,正如您刚刚了解到的那样。当你构思下一个广告活动时,这些都应该被考虑在内,因为创意可以将所有这些惊人的功能考虑在内,并真正让用户惊叹。确保为创造性的头脑风暴会议带来合适的开发人员和技术人员。他们将能够在任何进展发生之前通知你某件事是不可能的。
摘要
这一章讲述了很多关于移动应用的内容,包括作为其中一部分的前景和盈利能力。此外,它还覆盖了各种移动设备应用中的广告的广阔世界。具体来说,我介绍了应用 SDK 的复杂世界,以及它们在应用环境中交付尖端富媒体的不可或缺的角色,以及它与移动 web 环境的不同之处。我回顾了 SDK 的分散角色,以及像 MRAID 这样的技术如何从应用开发人员和广告开发人员的角度来缓解这种分散。我讨论了 SDK 之间的一些细微差别,甚至回顾了一些代码示例,因此您可以在今天的活动中使用它们。我强调确保应用符合 MRAID 标准是很重要的,因为这一标准将使每个人的生活更加轻松。
在下一章中,我将讨论如何让广告离线,并在用户恢复网络连接时仍然进行报告。移动是一个很难成功导航的世界,但是了解基础知识将有助于你进入下一章。第十章见!
十、离线存储,跟踪、调试和优化
本章重点介绍移动和平板设备上日益重要的广告离线支持、强制跟踪,以及在浏览器和设备上调试的繁琐且通常非常耗时的过程。离线支持正成为许多网络应用的一项要求,广告也在迅速跟进。在这一章中,我将回顾如何处理离线事件,检测用户何时恢复在线,甚至讨论当用户网络连接不良时检测的 API。我将介绍如何使用 HTML5 的 AppCache API 将素材缓存到客户端浏览器和设备。我还将讨论通过跟踪像素和 JavaScript 来跟踪用户在广告中的交互,我将使用这些方法来处理跟踪调用,并使用 HTML5 的 API 在客户端数据库中存储调用。此外,我将讨论 IndexDB API 和 WebSQL API 之间的差异和浏览器支持。我还将讨论 Lawnchair JS 等 API,以及如何处理跨浏览器存储和缓存,以及如何在用户离线时启动跟踪调用。最后,我将详细介绍桌面浏览器和移动设备上的调试和优化。太多了,我们开始吧。
离线支持
从我记事起,我就一直从网络接入的角度来认识网络。从过去开始,我们有拨号调制解调器,然后是 DSL,然后是电缆线路,然后是今天的光纤。然而,在当今世界,我们还必须关注 2G、3G 甚至 4G LTE 连接等无线蜂窝网络,以及智能手机、电子阅读器和平板电脑等越来越多的设备是如何移动的。随着这些设备能够进入典型计算机不能进入的领域,如飞机、火车和汽车,网络连接可以来来去去,迅速而突然。幸运的是,开发人员可以使用浏览器的一个有用的新功能来检测用户是否可以访问网络。清单 10-1 概述了如何在兼容的浏览器中检测这一点。
清单 10-1 。 检测离线示例
<!DOCTYPE HTML>
<html>
<head>
<script>
function networkIndicator() {
document.getElementById('status').textContent = navigator.onLine ? 'online' : 'offline';
}
</script>
</head>
<body onload="networkIndicator()" ononline=" networkIndicator ()" onoffline=" networkIndicator ()">
<p>The network is: <span id="status"></span></p>
</body>
</html>
从前面的代码中,您可以看到我正在创建一个名为 networkIndicator 的函数,它会将 status 元素中的文本更新为 online 或 offline。然后在 body 元素的 onload 方法上,我调用了 ononline 和 onoffline 处理程序上的 networkIndicator 函数。这种简单的检测可以确定是否有网络连接。另外,前面的代码,当用户的网络访问变为连接或断开时,它还会调度下面这些你可以通过 JavaScript 处理的事件:
<script>
window.addEventListener("offline", function(e) {
alert("offline");
});
window.addEventListener("online", function(e) {
alert("online");
});
</script>
检查浏览器的 navigator.onLine 属性并在没有网络连接时提供替代体验是任何 HTML5 web 应用的必备功能,随着更多的广告进入 web 标准世界,您需要为需要它的出版商考虑这一点。就个人而言,将线下支持纳入品牌活动是最有意义的,因为游戏、视频或某种形式的重度用户互动是活动成功的最重要因素。对直接回应广告提供离线支持可能不是最有意义的,因为如果用户无法连接到任何网络,他们将无法点击/点击目的地和登录页面。然而,将游戏的元素缓存到设备或者甚至更小的预告视频以供离线使用允许用户在广告体验中进行交互并花费宝贵的时间。当品牌或广告商在活动结束后重新获得联系进行分析时,所有这些都可以被跟踪。基本上,如果用户有网络接入,你可以为他们提供完整的体验;例如,它可以是一个功能丰富的游戏或一个长篇视频广告。此外,你可以将重要的甚至替代的素材缓存到用户的浏览器中,这样当他们离线时,仍然可以在某种程度上与广告进行交互。
注意出版商可能会要求不缓存任何内容供离线使用,或者对离线内容进行某些 k 权重限制。在开发广告之前,请咨询您的出版商或应用开发商。
广告中的离线支持绝不是标准做法。事实上,整个行业都在朝着一个坚实的标准努力,因为在检查可靠的连接状态时,使用 navigator.onLine 存在漏洞。例如,如果您的 ISP 关闭,但您的无线路由器启动并运行,会发生什么情况?浏览器可能会说用户在线,但实际上他们并不在线。更好的测试方法是通过 XMLHttpRequest (Ajax request )从服务器请求一个小素材来进行小检查,这样对最终用户来说是透明的,他们不会遇到任何带宽瓶颈,也不会刷新页面。使用清单 10-2 中显示的代码,您可以自信地识别用户是否连接。
清单 10-2 。 使用 Ajax 检测离线示例
<script>
function testConnection (fileToPing) {
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
//For IE6, IE5
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange=function() {
if (xhr.readyState==4 && xhr.status==200) {
console.log("Online")
} else {
console.log("Offline")
}
}
xhr.open("GET",fileToPing,true);
xhr.send();
}
testConnection("http://www.yourdomain.org/1x1.gif");
</script>
清单 10-2 创建了一个名为 testConnection ,的方法,该方法带有一个参数 fileToPing,这是一个你想要 Ping 的 URI 的字符串值,用来检查连接。该函数创建一个 XMLHttpRequest,并从服务器头检查状态是否为 200。如果是这样,您知道您对该素材的请求已经正确解析,因此用户已经连接。如果您没有从服务器获得 200 响应,您将确信用户离线。
注意你必须在你的服务器上允许你想要请求的域名的访问控制允许来源。例如,使用 Access-Control-Allow-Origin:
yourdomain.com
或*,这将允许任何来源访问素材。
最好的情况是使用这两种技术来获得关于用户连接的最多信息。另外,一定要问清楚线下是否是发布者和/或广告主的强制要求。无论您使用 HTML5 还是从 API 调用到应用的 SDK 的特定“挂钩”,都要确保预先了解工作的全部范围。这是至关重要的信息,因此设计师和开发人员可以考虑以这种方式开发和设计广告的额外时间(如果有的话)。
有时文件会被缓存到浏览器/设备中,而您不希望它们被缓存。如果您为了验证指标而发出第三方或第四方跟踪电话,就可能出现这种情况。如果您不想允许缓存您的文件,您可以在向这些文件位置发出特定的 HTTP 请求时使用“cache-bust”方法。清单 10-3 展示了你将如何做来给第三方留下 1x1 的印象。
清单 10-3 。 缓存缉捕举例
<!DOCTYPE HTML>
<html>
<head>
<script>
function fireImpression () {
var beacon = new Image ();
beacon.src = "http://tracking.somedomain.com?r=" + cacheBust();
}
function cacheBust () {
var num = Math.random();
return num;
}
</script>
</head>
<body onload=fireImpression()>
</body>
</html>
使用前面的代码片段时,您创建了一个新的图像,并将该图像的源设置为您想要访问的 URI,但是您将一个缓存破坏方法连接到该字符串。这种破坏缓存的方法称为 cacheBust,它告诉浏览器生成一个随机数,并将其添加到查询字符串中的 r 参数中。这会产生类似于tracking.somedomain.com 的东西吗?r=0.123456
,这种做法可以用于任何 HTTP 请求;请记住,缓存素材在大多数情况下是一件好事,比如不会改变的较重的 k-weight JavaScript 库、图像或 CSS 文件。然而,对于报告和分析,为了获得准确的结果,缓存破坏是相当强制性的。
当使用应用内时,一些 SDK 要求将广告缓存到设备上以供离线使用。例如,如果你要查看华尔街日报 iPad 应用,内容和广告会被缓存到设备中,这样用户就可以在离线模式下查看内容。如果用户要登上一架没有连接的飞机,这将非常有用。在这种情况下,当前的 SDK 提供商 AdMarvel 通过缓存文件将应用内容和所有广告缓存到设备中。清单 10-4 展示了如何使用 AdMarvel SDK 实现这一点。
清单 10-4 。 AdMarvel 缓存文件示例
ADMARVEL-CACHE
assets/style.css http://cdn.domain.com/assets/style.css
assets/script.js http://cdn.domain.com/assets/script.js
assets/logo.png http://cdn.domain.com/assets/logo.png
缓存文件保存为制表符分隔的。txt(纯文本)文件,通过相对和绝对位置(本地/远程)定位构成广告体验的所有素材,并与广告创意一起交付给 AdMarvel。
注意每个 SDK 都有自己实现缓存广告素材的方式。请务必在活动开始前与他们核实。
网络连接 API
本节介绍网络连接 API ,它允许开发者查询用户当前使用的网络连接的强度和类型。在撰写本文时,该 API 目前还不被任何现代浏览器支持,但是它的 API 文档正在修订中,当这一新兴标准在现代浏览器中可用时,它将提供许多有用的特性。目前的 API 允许开发人员检测用户是否在使用以太网、WiFi、2G、3G、4G、无或未知连接。将这类信息与 Navigator.onLine 和 Ajax 测试结合起来,开发人员可以将他们的广告体验用于复杂的离线使用。如果您不能等到规范最终确定或浏览器将它实现到他们的架构中,您可以通过 SDK 从应用内广告中利用这一点。事实上,在 MRAID,广告开发人员和设计人员可以通过调用 getNetwork 方法向 MRAID 兼容的 SDK 查询有关用户连接的信息。此外,当网络连接发生变化时,他们可以为 networkChange 事件添加一个事件监听器。目前,MRAID 可能的连接类型有离线、WiFi、手机和未知。理想情况下,我们会看到这些 API 很快成形,并立即实现,这样采用就会很快。只有这样,您才能提供准确的网络连接检测,并提供丰富的离线体验。
注意如果您的广告需要离线可用性,请确保删除 tap 周围的任何 CTA,因为离线查看广告时将没有网络,因此用户将无法查看页面。
应用缓存
在这一节中,我将介绍离线 web 应用规范以及如何使用应用缓存。本节面向希望为其 web 应用提供离线支持的出版商和内容所有者。在 HTML5 中,通过创建一个简单的清单文件来支持应用缓存,该文件列出了应用脱机使用的素材。这些素材是需要存储到用户浏览器的文件,以便在没有任何互联网访问的情况下正确呈现。在我们深入探讨之前,请记住,将所有素材缓存到用户的浏览器可能会导致很长的缓存时间以及臃肿的清单文档,因此请明智地选择存储。
当用户在无法访问网络的情况下查看文档时,浏览器会切换到使用本地缓存的资源。因此,理论上,假设应用缓存正确地将文件存储到了设备上,用户应该能够在地铁或没有飞行 WiFi 的飞机上完成与游戏的交互或观看视频。有了强大的浏览器支持,特别是在移动领域,这是你可以立即开始利用的东西。图 10-1 概述了截至 2012 年 11 月对应用缓存的巨大支持。
图 10-1。演示浏览器对 HTML5 应用缓存的支持(来源:caniuse.com)
使用 HTML5 应用缓存,出版商可以提供更快、响应更快的 web 应用,这对于最终用户来说是一种更好的用户体验。此外,如果你是 Chrome 用户,我建议使用 chrome://appcache-internals,它可以帮助检测哪些域正在你的浏览器中存储素材。
应用缓存示例
因为我刚刚介绍了为什么您应该利用离线素材缓存,所以我将展示如何将理论付诸实践。虽然 HTML5 AppCache API 通常用于缓存 web 应用中的特定素材,但您也可以使用类似的缓存机制来缓存离线广告内容。当然,这肯定意味着如果你在发布端,这将增加你的工作量,因为你需要在每次新闻广告更新时更新缓存清单。当出版商的内容(如杂志、报纸和其他完全缓存在用户设备上的内容)需要离线查看时,这一点变得越来越重要。查看以下代码片段,了解如何使用 AppCache 。在 HTML 标记中,添加对。通过编写以下内容来创建 appcache 文件:
<!DOCTYPE HTML>
<html manifest="cache.appcache">
. . .
</html>
在前面的示例中,您向名为 manifest 的 HTML 文件中的 HTML 节点添加了一个属性,并将该属性设置为 cache.appcache ,,它是与 HTML 文件位于同一目录中的清单文件。
接下来,让我们看看如何构建清单文件。您可以使用下面的示例清单结构来构建您的离线广告,但是请注意,根据发布者和广告内容的不同,这些素材需要针对您自己的特定用例进行更改。在构建清单缓存文件之前要做的第一件事是设置您的服务器接受 MIME 类型的. appcache。appcache 到我的。我的服务器根目录下的 htaccess 文件。请记住,一些服务器可能没有这个文件,或者它可能是隐藏的,所以一定要查看隐藏文件来找到它。否则,就创建一个。
注了解更多信息。htaccess,我推荐去
htaccesstools.com
看看。
一旦您的服务器被配置为接受 appcache 文件类型,您就可以用您的缓存素材构建一个清单文本文件,并将其保存为 yourfile.appcache。
清单 10-5 。 构建一个 HTML5 AppCache 文件
CACHE MANIFEST
# 2012-12-13:v1 – Keep the version to purge the cache when updates are needed
# Explicitly cached entries
CACHE:
index.html
css/style.css
ad/adstyle.css
js/script.js
ad/adscript.js
ad/bg.jpg
img/button.png
img/bg.jpg
fonts/webfont.otf
fonts/webfont.ttf
fonts/webfont.woff
fonts/webfont.svg
media/audio.mp3
media/video.mp4
media/video.webm
# offline.html will be served if the user is offline and request new "non-cached" assetsFALLBACK:
index.html offline.html
# Resources that require the user to be online.
NETWORK:
submit.aspx
http://api.twitter.com
etc. . .
注意您可以通过以#开始一行来向清单文件添加注释。此外,如果一项素材下载失败,整个缓存都会失败。
让我们回顾一下清单。您要做的第一件事是定义缓存清单,并设置一个带有上次更新日期和版本号 1 的注释。你要做的第二件事是,通过编写 ad/style.css、ad/adscript.js 和 ad/bg.jpg,列出你需要缓存到用户浏览器供离线使用的所有素材和文件,包括广告的素材,记住,这不需要是你的所有素材,只要足以提供可接受的离线体验即可。在这个例子中,我已经包括了 CSS、JS、图像、字体、媒体和广告素材,但是这很可能是多余的,这取决于您的 web 应用和广告的创意需求。此外,要小心你在广告中缓存的内容。一旦 JavaScript 文件等素材被缓存,即使您在服务器上更改文件,浏览器也将继续使用缓存的版本。确保浏览器更新缓存素材的唯一方法是更改。appcache 文件,这就是为什么要通过编写在注释部分添加日期和版本。# 2012-12-13:v1。清单文件中的下一步是在清单的 FALLBACK 部分下为您的 index.html 文件提供一个备用 offline.html 文件,当用户离线并试图访问未缓存的信息时,将会提供该文件。在用户访问他们看不到的信息时,这是一个很好的选择;在这种情况下,他们将获得默认的缓存素材,而不是他们在线时没有缓存的素材。
出版商可能会从 HTML5 的 AppCache API 中看到真正的好处,因为他们可以有效地为他们的客户和访问者创建非常丰富的离线体验,同时仍然为他们提供用户想要的内容。广告或多或少会找到自己的方式来为用户缓存素材,但在走上任何特定的道路之前,一定要与你的出版商、广告服务器和代理商进行对话。
既然已经在 HTML 文档中设置并分配了缓存文件,让我们使用一些 JavaScript 来检测素材的加载和缓存(参见清单 10-6 )。
清单 10-6 。 HTML5 AppCache JavaScript 示例
<script>
var cache = window.applicationCache;
cache.addEventListener('cached', handleCacheEvent, false);
cache.addEventListener('checking', handleCacheEvent, false);
cache.addEventListener('downloading', handleCacheEvent, false);
cache.addEventListener('error', handleCacheError, false);//Good to use if the manifest is moved or if the user is offline
cache.addEventListener('noupdate', handleCacheEvent, false);
cache.addEventListener('obsolete', handleCacheEvent, false);
cache.addEventListener('progress', handleCacheEvent, false);
// When a new manifest is downloaded, swap the new cache assets and reload.
cache.addEventListener('updateready', reloadAssets, false);
function reloadAssets (){
if (cache.status == cache.UPDATEREADY) {
cache.swapCache();
if (confirm('A new version is available')) {
window.location.reload();
}
}
};
function handleCacheEvent () {
. . .
}
</script>
使用前面的 JavaScript,您可以将事件侦听器添加到 applicationCache,并在素材处于缓存过程的不同阶段时、素材正在下载时、素材准备就绪时以及其他事件中进行处理。当确定用户是否有最新和最大的素材可供脱机使用时,以及当对您的缓存清单文件进行常规调试时,这非常有用。
因此,您可能想知道为什么要在本地缓存素材。浏览器没有原生缓存吗?是的,确实如此,但这通常是不可靠的,因为用户和浏览器通常会在缓存池填满太多后清除缓存,或者这可能是默认的浏览器设置,在每次浏览器会话后清除缓存。
缓存资源可以创建更快的 web 内容,无论网络连接如何,这都是一种全面的改进。当你进入动态广告时,这可能是非常有益的,用户可能会在整个活动周期中看到各种各样的广告版本。既然只有广告的某些部分是动态的(文本、图片等等),为什么不在随后的视图中下拉动态素材,让其他素材保持不变呢?这将允许更快的加载时间,并且能够只从服务器中提取您需要的素材,从而减少需要发生的请求的数量。今天,这些做法正在许多网络应用中使用,包括谷歌的 iOS 和 Android 版 Gmail。一篇关于缓存及其对网络影响的非常好的文章可以在www.stevesouders.com/blog/2012/10/11/cache-is-king
找到
注关于 AppCache 的更多信息和事实,请访问
appcachefacts . info
。
跟踪
追踪广告是任何活动的关键部分。分析团队渴望广告服务公司收集的指标,以便他们可以更好地调整他们的媒体支出,并更好地教育他们的客户在他们的在线广告活动中什么是有效的,什么是无效的。要做到这一点,跟踪必须贯穿整个广告,这样当用户与广告内容互动时,报告公司可以了解互动的发生。跟踪需求的一个重要主题是当网络访问不存在时跟踪用户的能力。这种离线跟踪在移动设备中很重要,用户更倾向于在离线情况下与手机和平板电脑应用进行交互。
正如你在本书的前几节中所知道的,只有当用户访问了 cookie 丢弃域或者将他们的浏览器设置切换为全部接受时,移动苹果设备上的 cookie 丢弃才被接受。虽然这消除了广告客户寻求瞄准的很大一部分市场,但其他浏览器在 iOS 上越来越受欢迎,如谷歌的 Chrome 浏览器,它默认接受 cookies,而不管域如何,在撰写本文时,iOS 版 Chrome 大约有 20,000 个用户评级。虽然不是安装的真实衡量标准,但这仍然是一个有希望的数字,但由于没有能力使 Chrome 成为用户的默认移动网络浏览器(除非你“越狱”你的 iOS 设备),你肯定会看到比 Chrome 更多的移动 Safari 流量。移动领域的其他浏览器,如 Opera Mini,处理追踪的方式有所不同。对于像非洲这样的发展中国家的很大一部分市场份额来说,有线网络很少,大多数是带有 Opera Mini 的电话。然而,对于 Opera Mini,JavaScript 在默认情况下是不打开的,或者是不存在的,所以在这些场景中,唯一的跟踪形式称为像素跟踪 ,或者使用 1x1 图像,其中用户单击 HTML 标记中的标签,请求通过重定向 URL。然而,在大多数情况下,JavaScript 是最常见的,许多分析平台如谷歌的分析使用清单 10-7 所示的跟踪方法。
清单 10-7 。 谷歌分析追踪示例
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-25177661-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
现在,在基于 HTML 的广告中,你可以使用网络分析平台,如谷歌概述的平台,来处理你的指标。但是,如果浏览器中禁用了 JavaScript,那么基于 JavaScript 的跟踪也会被禁用。一个好的解决方法是使用 imagebeacon,这是一个 ping 服务器的 1x1 GIF 图像,通常带有特定的查询参数,指示会话 id 或创意 id,以及活动类型和一个随机数来缓存 bust。不管怎样,最好是了解你的受众是谁。如果你的目标是一堆移动设备,请记住,一些移动浏览器在一些手机上默认没有 JavaScript,例如黑莓的 OS5 和更老的手机以及大多数诺基亚功能手机。
存储和发射离线跟踪
虽然线下广告跟踪没有标准定义,但需要一个标准,理想情况下,通过实践和采用,我们将在未来的活动中有一个干净的线下实现方式。Crisp Media 的开发副总裁兼 ORMMA initiative 的联合创始人 Nathan Carver 声明如下:
“这确实在一定程度上取决于广告。如果是直接回应,比如说,那么线下就没有意义了。真的只有品牌广告受益于线下。最终,这是 SDK 目前的差异化空间。存储转发或保管/分享技术可能真的有所帮助,但目前还没有关于线下市场的定义。”
内森·卡弗
首先,用户在网上与广告互动;在整个交互过程中,网络连接变得很差,用户不可避免地会离线一会儿。由于广告已经被缓存到用户的设备(使用广告服务设备检测),用户不会注意到他们实际上是离线的,因为广告的所有功能仍然完好无损。这里重要的变化是广告中的每一次互动都是可追踪的;如果用户离线,这些跟踪活动将无法返回到服务器。也就是说,你需要在客户端捕捉这些互动,以免它们永远消失,失去宝贵的品牌洞察力。通过使用 HTML5 和各种其他 API,您可以利用各种新技术来实现这一点,包括本地存储/会话存储,甚至客户端数据库,如 WebSQL 和 IndexedDB,您将在下面的部分中了解到一些内容。让我们看看如何使用 HTML5 的本地存储技术来处理清单 10-8 中的离线点击跟踪。
清单 10-8 。local storage 离线点击跟踪示例
<script>
var NetworkAccess = navigator.onLine;
var trackingCalls = {
"clicks" : [{
"name": "clickButton1",
"online": "1023-online",
}, {
"name": "clickButton2",
"online": "1024-online",
}]
}
function trackClick(name) {
if (!NetworkAccess) {
//No network - clicks won't fire
return false;
} else {
var trackingID;
var clickName;
}
for (var n = 0; n < trackingCalls.clicks.length; n++) {
if (name == trackingCalls.clicks[n].name) {
clickName = trackingCalls.clicks[n].name;
trackingID = trackingCalls.clicks[n].online;
}
}
if (trackingID){
location.href = "http://clicks.someurl.com?clickName=" + clickName + "&trackingID="
+ trackingID + "&r=" + cacheBust();
}
}
function cacheBust () {
var num = Math.random();
return num;
}
function buttonClick (event) {
var type = event.target.attributes.value.value;
switch (type) {
case "buttonOne" :
trackClick("clickButton1");
break;
case "buttonTwo" :
trackClick("clickButton2");
break;
}
console.log(type)
}
function AdInit () {
console.log("AdInit : NetworkAccess " + NetworkAccess)
document.removeEventListener("DOMContentLoaded", AdInit);
//set up Ad UI here
document.getElementById('buttonOne').addEventListener('click', buttonClick, false);
document.getElementById('buttonTwo').addEventListener('click', buttonClick, false);
}
document.addEventListener("DOMContentLoaded", AdInit, false);
</script>
让我们回顾一下这段代码。您要做的第一件事是通过检查 NetworkAccess 和重要的 trackingCalls JavaScript 对象在脚本顶部设置您的跟踪变量,该对象存储所有在线使用的点击。接下来,在脚本的底部,您开始监听您的 DOMContentLoaded 事件,并启动 adInit 函数,这将启动程序;那里没什么新东西。接下来,如果用户在广告环境中单击 buttonOne 或 buttonTwo,它将通过一个名为 buttonClick 的函数,该函数将接受事件参数并执行一个 switch/case 来确定哪个按钮被单击。根据触发的事件,您将调用函数 trackClick 并为按钮传入字符串值;在这种情况下,它可以是 track click(" click button 1 ");或者 track click(" click button 2 ");。现在,如果您使用 trackClick 功能,您会注意到您做的第一件事是检测用户是否可以访问网络。如果没有,您只需将用户从函数中返回。但是,如果它们这样做了,您需要设置两个新的变量 trackingID 和 clickName ,,这两个变量将存放您想要保存的跟踪值。当 for 循环遍历 JavaScript 对象中定义的所有跟踪点击时,您可以根据用户的操作来跟踪用户并将其发送到适当的 URL(如果已连接)。
既然您已经了解了如何处理离线点击,那么让我们从广告体验的角度来看一下用户活动。同样,这是你想报道的广告的局部内容,不会将用户从广告体验中引开。理解互动是很重要的,比如滑动、触摸、视频播放、游戏,以及其他对广告商的品牌认知活动很重要的东西。看看清单 10-9 中修改后的代码。
清单 10-9 。 LocalStorage 离线活动跟踪示例
<script>
var NetworkAccess = navigator.onLine;
var trackingCalls = {
'pings': [{
'name': 'touchstart',
'online': '1011-online',
'offline': '1011-offline'
}, {
'name': 'touchmove',
'online': '1012-online',
'offline': '1012-offline'
}]
}
function trackPing (name) {
var activityName;
var onlineTrackingID;
var offlineTrackingID;
for (var n = 0; n < trackingCalls.pings.length; n++) {
if (name == trackingCalls.pings[n].name) {
activityName = trackingCalls.pings[n].name;
onlineTrackingID = trackingCalls.pings[n].online;
offlineTrackingID = trackingCalls.pings[n].offline;
}
}
if (NetworkAccess) {
fire('http://tracking.someurl.com?trackingName=' + activityName + '&trackingID=' + onlineTrackingID + '&r=' + cacheBust(), false);
} else {
var t = new Date().getTime();
var m = new Date().getMonth()
var d = new Date().getDate();
var y = new Date().getFullYear();
var timeStampedName = activityName+t+m+d+y;
//No network - storing offline tracking
storeOffline(timeStampedName, offlineTrackingID);
}
}
function storeOffline (name, id) {
//store client side and add listeners for network events
console.log('Storing Offline : ' + name + ' + ' + id)
localStorage.setItem(name, id);
}
//on reconnect fire off all the cached pings
function checkOfflineStorage () {
if(NetworkAccess) {
if (localStorage.length >= 1) {
for (var i = 0; i < localStorage.length; i++) {
var key = localStorage.key(i);
var value = localStorage[key];
var offlineCall = 'http://tracking.someurl.com?trackingID=' + value + '&r=' + cacheBust();
fire(offlineCall, true);
}
} else {
console.log('No offline metrics stored')
}
}
console.log('NetworkAccess ' + NetworkAccess)
}
//Tracking Utils
function fire(url, clear) {
var trackingImg;
if (clear === true) {
trackingImg = new Image ().src = url;
console.log(trackingImg);
setTimeout(clearStorage, 3000);
} else {
trackingImg = new Image ().src = url;
}
}
function clearStorage() {
console.log('clearing storage');
localStorage.clear();
}
function cacheBust () {
var num = Math.random();
return num;
}
function userAction (event) {
var type = event.type;
switch (type) {
case 'touchstart' :
trackPing('touchstart');
break;
case 'touchmove' :
trackPing('touchmove');
break;
}
console.log(type)
}
function AdInit () {
console.log('AdInit')
document.removeEventListener('DOMContentLoaded', AdInit);
//set up Ad UI here
window.addEventListener('touchstart', userAction, false);
window.addEventListener('touchmove', userAction, false);
checkOfflineStorage();
}
window.addEventListener('online', checkOfflineStorage);
window.addEventListener('offline', checkOfflineStorage);
document.addEventListener('DOMContentLoaded', AdInit, false);
</script>
让我们回顾一下代码示例。同样,它在设置上与点击跟踪示例非常相似,但是现在一旦您进入 adInit 函数,您就可以通过调用 window . addevent listener(" online ",checkOfflineStorage,false)为 ad 环境设置您的触摸事件侦听器,并为在线/离线状态设置一个事件侦听器;。接下来,调用 checkOfflineStorage 函数来确定是否有任何存储的离线活动。在 checkOfflineStorage 中,首先检查用户是否有网络连接,以及 localStorage 对象中是否存储了项目。如果有网络但没有存储,您只需通过编写 console.log('没有存储离线指标')来登录控制台。但是,如果有项目存储在 localStorage 中,您可以通过获取它们的键/值并将其传递给一个名为 fire 的函数来遍历它们。现在,在 fire 函数中,通过编写 if (clear === true ),您检查是否需要在启动跟踪调用后清除存储。现在,您将创建图像对象,并将 URL 请求添加到跟踪服务器,方法是将该值设置为图像的 source 属性。最后,一旦您启动了所有的调用,您就可以设置一个超时来调用函数 clearStorage,这将清除用户浏览器中所有的 localStorage 跟踪调用。现在代码中有很多内容,所以我建议使用您最喜欢的文本编辑器,并在您最喜欢的浏览器的 web inspector 中检查所有日志。请记住,这种技术对于数字杂志和出版物变得越来越重要,因为它们的所有内容都被缓存到用户的设备上。通过 JavaScript 使用 HTML5 的离线检测,可以相应地处理度量;除了前面的 XMLHTTPRequest 方法,您还可以确保用户是否真正连接。
对于与 SDK 供应商(如 AdMarvel 或 Medialets)合作的移动人员来说,他们很有可能为您提供离线指标的缓存。作为一名广告设计师,你很可能只需要调用特定的 SDK 方法,SDK 会为你处理这些。除此之外,MRAID 工作组已经提出了包括实现离线跟踪的标准方法的想法,但现实是这个领域还太年轻,还不能标准化。让我们看看 MRAID API 文档中的引用:
能够在设备没有网络连接的情况下工作的富媒体广告需要能够存储并稍后转发关于用户如何以及何时与广告交互的指标。MRAID 然而,在测量方法和指标本身标准化之前(例如通过正在进行的 IAB/MMA/MRC 应用内广告测量指南项目),为 MRAID 增加测量功能还为时过早。MRAID 工作组期望这种能力将被评估并可能作为未来 3.0 版本的一部分添加到 MRAID 中。
MRAID 工作组
MRAID 的工作组有一个很好的方法,我认为在确定一个解决方案并将其称为标准之前,最好先看看所有提议的解决方案。会是 HTML5 和各种允许标准化离线跟踪的 JavaScript APIs 吗?或者它会是只涉及 SDK 的其他东西吗?或许两者都有?与此同时,客户会要求你这样做,这最终会成为在线广告领域的标准操作程序。现在,你必须拿出你自己的自制解决方案,就像之前概述的那样,或者你甚至可以看看轻量级的 JavaScript 库,比如 lawn chair(brian.io/lawnchair
)来满足你的需要。
Lawnchair 似乎是客户机数据库存储的一个可能的答案,因为它通过 JavaScript 使用简单的名称/值对赋值,并通过 JSON 检索值。它还可以配备许多适配器,以便在一些浏览器不接受其他技术的情况下,优雅地切换到其他客户端存储技术。这意味着它将使用 blackberry-persistent-store、DOM storage、WebSQL 和 IndexDB,等等。Lawnchair 缓解了存储技术之间的碎片化,并为开发人员提供了一种节省价值的简单方法。另外,缩小后只有 6KB,压缩后更小。这非常有利于创建用户交互的离线档案,并最终在用户重新获得网络连接时迭代交互并启动用户活动。
注意如果大多数用户与广告交互,并且从未重新获得网络访问权以将指标推送到报告服务器,则跟踪可能会偏离离线使用。应该向所有团队传达这永远不会是 100%准确的。
索引 b
在讨论离线缓存和离线指标的话题时,我不得不提到 HTML5 中一个新出现的 API,名为 IndexDB 。IndexDB 是一个 API,用于在客户端以非常结构化的方式存储大量数据。使用 IndexDB 通常意味着您有大量的数据要处理,并且比使用 sessionStorage 或 localStorage 的典型 DOM 存储要多得多,这可能会面临浏览器对存储到客户端的数据量的限制。虽然这两个 API 都为客户端浏览器提供了处理大量数据的好方法,但是当您处理非常大的数据池并且需要以结构化的方式大规模处理数据时,IndexDB 将是您的首选。由 Mozilla group 开发,使用这种精心制作的网络存储,你可能允许用户在广告体验中定制一个详细的载体,并在下次访问另一个网站的广告时从他们停止的地方继续。
IndexDB 现在是 HTML5 工作组正在研究的最新规范。根据 W3C 的说法,以前 WebSQL API 是离线存储大量数据的主要方式,但该规范已经停止发展。(然而,它仍然在一些浏览器中使用。)据说该行业在可预见的将来会向 IndexDB 过渡。 Origin ,或者说创建数据库的站点的域,作用于每个 IndexDB 数据库,这可能是处理广告离线数据的一个好的解决方案,但是要注意的是,它可能还不能在所有的浏览器中工作。请务必关注 http://caniuse.com/#feat=indexeddb 的以确定支持。
Web 检查器
可以说最流行的 web 开发工具是 Web Inspector ,它内置于所有现代浏览器中。如果你使用 Chrome、Opera、Firefox 或 IE 10,你只需右击你的浏览器窗口并选择 Inspect Element 。这将在你的浏览器中打开 Web Inspector,并为你提供一系列工具,用于检查你的 DOM 中的元素,查看加载的脚本,分析网络流量,了解离线存储,以及实时执行命令。如果您使用的是 Safari,您需要首先进入浏览器偏好设置,并在菜单栏中启用开发菜单。启用后,您将能够像其他元素一样右键单击并检查元素。图 10-2 显示了在苹果的 Safari 浏览器中寻找什么。
图 10-2。 Safari 的开发菜单设置
除了流行的 Web Inspector,还有一个名为 Firebug 的浏览器扩展,它本质上做类似的事情,并为开发人员提供类似的工具,用于在各种浏览器上调试 Web 内容。要了解更多关于 Firebug 的信息,请访问 http://getfirebug.com。Firefox 最近也更新了它的网页检查器,可以观看 3D 内容。如果您需要了解元素的堆叠顺序并确定某些元素是否位于其他元素之上,这将非常有用
开发工具
如果你曾经做过一段时间的开发人员,你就会知道有多少时间可以投入到代码调试的艺术和过程中。如果你是开发新手,相信我说的,“习惯于不工作的东西,并开始学习解决它们。”除了拥有正确的工具、工作流程和技术之外,耐心是调试中的一个关键特质。在这一节中,我将回顾一些非常棒的免费工具,以及一些惊人的技术,它们将在为多个平台和设备进行调试时为您带来竞争优势。
网络上有大量的开发者工具。只要谷歌一下任何网络开发工具,你就会看到很多结果。我最喜欢的几个在线工具是 js console(jsconsole.com
)用于调试移动设备上的 JavaScript,JSBin(jsbin.com
)用于快速模仿并与朋友和同事分享代码,js beautiier(jsbeautifier.org
)用于干净地取消库和代码的混淆以提高可读性,remote tilt(remote-tilt.com
)用于在原生设备之外处理动作事件。Remy Sharp 是 extra ordinaire 的开发者,他开发了除 JSBeautifer 之外的所有这些工具,我个人在调试广告内容时在无数的活动中使用过它们。其他非常有用的工具包括 DOM monster(mir.aculo.us/dom-monster
)、y slow(yslow.org
)和 page speed(developers.google.com/speed/pagespeed
),所有这些工具都允许调试和优化你的网页内容。
我最喜欢的一个工具是 HTTP 监控工具。这些类型的工具捕获并记录浏览器中发生的所有 HTTP 流量。例如,如果您有一个发出许多 HTTP 请求并调用外部服务的广告,那么这个工具非常有价值,可以让您了解“幕后”到底发生了什么。其中一些工具是查理(Mac 版)(charlesproxy.com
)和菲德勒(PC 版)(fiddler2.com/fiddler2
),它们甚至可以代理到你的移动设备上,用于捕捉智能手机、平板电脑和电视上的网络流量。这些 HTTP 监控工具真正了不起的地方是能够验证跟踪、报告和重定向来自广告的呼叫。开展活动后,进行测试以确保报告的准确性至关重要。对于那些使用 Firefox 的人来说,还有一个免费的浏览器插件叫做 http fox(addons.mozilla.org/en-us/firefox/addon/httpfox
),它本质上做的事情和 Charles and Fiddler 一样,但是直接在浏览器内部。另一个是 Firefox 插件 Live HTTP Headers(HTTP://addons . Mozilla . org/en-US/Firefox/addon/Live-HTTP-Headers),它允许用户在浏览时查看页面的 HTTP 标题。HTTP 监控对于移动调试非常有帮助,因为移动设备目前缺少本地开发工具。要使用 Charles 共享到您的设备,请查看以下步骤。
对于 iDevices ,连接到计算机和无线设备之间的共享网络,然后转到 iDevice 上的设置。在 HTTP Proxy 下,选择 Manual,并在 server spot 中输入您计算机的 IP 地址;然后输入任何未使用的端口,如 8888 。接下来,开始访问移动 Safari 或某个应用(任何有网络流量的东西),最终 Charles 会提示您,另一个服务正在请求使用这个网络作为代理。选择“允许”,并开始使用您的设备,同时在您的电脑上查看网络流量。
当您需要调试应用内部的广告时,如果您没有浏览器的本机功能(如控制台日志),那么在移动设备上调试可能会更成问题。在移动应用中进行调试时,您可以利用 HTTP 请求的能力来欺骗调用,使其成为跟踪语句,以了解您的 ad 代码内部发生了什么。一个很好的例子是创建一个虚拟图像文件,并将其来源分配给一个带有一些日志语句 URL 参数的假跟踪调用。下面的例子概述了我正在讨论的内容:
<script>
function adInit() {
var traceImage = new Image();
traceImage.src = "http://yourdomain.com?trace=statement";
}
</script>
现在,当调用函数 adInit 时,您将在 HTTP 监视器中看到一个对伪 URL 的请求,trace 的查询参数等于您想要输出的任何语句。在这种情况下,这可能是在广告体验中开始的功能,所以它可能看起来像下面的代码片段(和图 10-3 ):
图 10-3。网络监控查理斯(Mac)
<script>
function adInit() {
var traceImage = new Image();
traceImage.src = "http://yourdomain.com?trace=AD-STARTED";
}
</script>
从示例中可以看出,这在调试浏览器和移动设备中的网络流量时非常有用。使用这些技巧,开发人员可以深入了解他们的代码是如何执行的,即使他们不能在物理设备上测试。
移动开发工具
移动开发工具是一个正在成长的行业。这曾经是一个完全令人头痛的管理问题,因为工具不可用,而移动广告作为一项业务已经飞速发展,所以需求很大。Adobe Edge Inspect(html.adobe.com/edge/inspect
)和 Weinre(pmuellr.github.com/weinre
)等工具直接在你的台式机上为移动设备和平板电脑提供远程调试和开发。其他一些真正伟大的开发工具是在你的个人电脑上测试移动模拟器和仿真器的能力。这将使用苹果的 Xcode 和 Mac AppStore 上的 iOS 模拟器、谷歌的 Android 开发工具(developer.android.com/tools/index.html
)、黑莓 10(developer.blackberry.com/platforms/bb10
)、Windows Phone(microsoft.com/en-us/download/details.aspx?id=27570
)和 Opera 的移动模拟器(opera.com/developer/tools/mobile
)。这些工具中的每一个都提供了与您在设备上观看内容时所期望的非常相似的体验。然而,对设备本身进行测试是目前为止作为开发人员所能做的最好的测试。如我所说,如果你需要去你当地的电子商店测试一些广告,那就去做吧!
现在也有很多服务可以用来测试你的内容在各种设备上的表现和功能。一个这样的服务叫做 device anywhere(keynotedeviceanywhere.com
),它有效地允许在任何特定设备上虚拟查看你的内容。你想知道你的广告在运行 iOS 3.1 的第一代苹果 iPad 上是什么样子的?它掩护你。运行 Android 2.3 的 HTC 怎么样?是的,那个也是!DeviceAnywhere 是一个很好的工具,可以利用它访问的设备,但在我看来,它仍然缺乏动手调试的经验。如果你是一个出版商,想在移动设备上测试你的网络内容,但手头的资源有限,那就去看看 Akamai 的 MobiTest(【http://mobitest.akamai.com/m/index.cgi】??)。该工具允许用户从不同的位置在不同的设备上测试页面内容,您甚至可以视频捕捉结果以与其他同事共享。再说一次,这些工具中的大多数都是你试图为像我这样的怀疑者测试的环境的虚拟窗口;你可能只需要在真实的东西上测试。
最佳化
在制作网页内容或广告时,优化是一个持续的过程。即使不是为了满足发布者的要求而提高性能,DOM 中的每一项添加内容或加载到广告中的任何附加素材最终都需要进行优化。此外,带宽是一种有限的资源,用户体验是首要的,所以一定要使用 Adobe 的 Photoshop 或 Fireworks 等程序使用适当的设置来压缩图像。如果你是一名 Mac 用户,可以使用名为 ImageOptim(imageoptim.com
)和 image alpha(pngmini.com
)的图像优化应用来优化透明的 PNG。
对于脚本方面的事情,请确保您通过自己的垃圾收集来完成清理工作;如果您有事件侦听器,请确保在处理完事件后删除它们。此外,确保在不需要动画循环或迭代过程时移除它们。像 setInterval 和 setTimeout 这样的计时器会变得很贵,很快就会变得很累,所以一定要在不使用时清除它们。
确保总是缩小基于文本的文件,如制作广告的 HTML、CSS 和 JavaScript,并保留一份更详细的版本,以便回去进行编辑,这样你就不必处理缩小的版本。在缩小的同时,确保尽可能使用 GZIP 压缩。通过对基于文本的文件进行 gzip 压缩,您创建了一个. gz 版本的文件,它比单独的缩小版本要小得多。通过 GZIP 压缩允许最小的文件传输大小,这将最小化带宽限制,并提供整体更快的网络体验。只要确保你的托管服务器或 CDN 有适当的配置来提供 GZIP 文件。如果请求浏览器的用户不能在呈现文件之前解压缩或解压文件,则用户将只得到缩小版本的资源,尽管现在大多数浏览器都支持压缩内容。要测试你的服务器是否提供 gzip 文件,请访问gidnetwork.com/tools/gzip-test.php
。此外,最好使用自动构建系统,该系统获取您的源文件,将其缩小,GZIP 压缩,并将其放置在您的托管服务器上的所需位置。蚂蚁[ant.apache.org/
]、玛文[maven.apache.org/
]等工具可以自动帮你做到这一点。
通过检查你最喜欢的网页检查器中的“时间线”标签来避免对 DOM 的回流和重绘。通过使用这个工具,您将能够看到当用户请求您的内容时,浏览器实际上在执行什么任务。通过在需要回流和/或重画之前处理所有的 DOM 设置,这将消耗更少的进程并提供更好的整体用户体验。图 10-4 展示了在 CNN.com 请求页面时,你的网页检查器中的时间线部分会是什么样子。
图 10-4。浏览器的时间线检查器
正如你所看到的,当你输入网址后按回车键会发生很多事情。在本例中,您可以看到 HTTP 请求及其响应时间、脚本文件中的函数调用,甚至是对 DOM 的重画和渲染。此外,更重要的是,你甚至可以看到你正在检查的页面上有什么广告。真正有用的是,您可以检查 DOM 事件“content loaded”和“load”何时触发,并在需要深入研究特定于广告的优化之前获得对页面优化的更好评估。在这种情况下,触发 DOMContentLoaded 用了不到 1.6 秒,触发 Load 事件用了大约 2.8 秒。这对广告服务器来说很重要,因为服务器通常希望监听这些事件中的一个,并在主要内容呈现到屏幕上之后提供广告。这样你就可以确定页面是否需要更好的优化,你的广告内容或者两者都需要。
除了时间线中的“waterflow”视图,您还可以检查用于呈现页面内容的内存,包括 DOM 标记、样式、脚本甚至广告。图 10-5 显示了当你请求同一个页面时,内存部分的样子。
图 10-5。浏览器的内存使用情况
在这张图片中,您会看到请求开始时出现了一个大尖峰,因为浏览器需要尽快填充所有 DOM 节点并解析脚本和样式。此外,在内容请求的开始,您可以看到仅向用户呈现页面就使用了将近 70MB 的内存。
注意这些测量值取决于系统性能和网络连接速度。请自行进行代码优化。
在你的优化技术中使用的另一个重要工具是在你的浏览器的网页检查器中使用审计标签。审计功能允许开发人员对您请求的页面进行一些检查和平衡。在评估了页面内容、广告等之后,web inspector 将提供如何提高性能和加速页面渲染的提示。它可能会建议您压缩基于文本的文件,甚至删除没有呈现的元素上的样式声明。【http://johnpercival.org】图 10-6 展示了对我的域名的审计。
图 10-6。浏览器的审计工具
注意我完全意识到我的领域需要优化,这就是为什么它是一个完美的测试案例。
对网络内容的优化分析适用于手机,也适用于桌面和其他使用网络连接的格式。习惯于检查和撕毁网页和广告,试图从你的内容中获得最小的数字足迹。再次提醒你,没有人会去网上看广告,除非你是制作广告的人。看电视广告也是如此。广告应该是有影响力的、引人注目的和吸引人的,而不是仅仅因为一些写得不好的广告代码正在吞噬系统资源就让你的计算机或设备负担过重。时刻牢记这一点,让网络成为每个人更好的体验。调试和优化是耗时的过程,只有经常重复地做,你才能掌握它们。这一章不会让你成为专家,但它会给你优势,并允许你使用各种伟大的工具来帮助你前进。这些工具中的一些可能会成为你的最爱,而另一些你甚至不会给第二次机会。我鼓励您在尝试其他方法的同时,找到适合您的开发工作流程。
移动提示和技巧
既然你已经对如何调试和优化你的内容有了一个好的想法,让我们来看看你在处理 HTML5 广告时通常会看到的一些常见的“陷阱”或陷阱,无论是在桌面上还是在移动设备上。让我们从 HTML 和 CSS 命名空间开始;如果您的广告中的任何标记与发布者页面上的元素同名,并且没有包装在 iframe 中,则该元素的样式和功能可能会继承到您的广告中。为了避免这种情况,通常的标准做法是在所有 ad 元素中使用前缀命名约定。我喜欢做广告服务前缀;例如,如果 AdMob 提供内容,它将是 am-container;PointRoll 应该是 pr-container。另一个很好的技巧是从 CSS 顶层元素向下命名空间。这可能是您的广告容器元素,因此您的所有 CSS 样式将被专门设置为广告元素,而不是出版商的页面。通过编写类似于 #adContainer 的东西。banner {…} 您可以通过 ID 明确定位广告容器,并定位嵌套元素,如我们示例中的 banner 类。
接下来我将讨论素材缓存。缓存经常是移动应用的一个问题,尤其是当用户注意到你的广告内容过时,但你知道你已经更新了它。确保您的客户端已退出应用/网络浏览器,清除了浏览器缓存,并从任何后台进程中删除了应用。在 iOS 的情况下,这可以通过双击设备的 home 按钮,轻按,并按住应用,直到出现关闭按钮来完成。对于 Android,你需要进入正在运行的应用并明确地终止它们的进程。
手机网络工具包
Webkit 有一个非常复杂的渲染引擎,它是 iOS 和 Android 设备的默认设备浏览器引擎。它也有许多有用但常常隐藏的属性可以利用。如果你注意到 Webkit 正在以一种奇怪的方式处理你的内容,甚至可能是一种理想的方式,但不太确定为什么,我建议访问 Webkit.org,了解这个强大的浏览器的内部工作方式。简单来说,我在这里列出了一些你在广告界最常遇到的例子。当您在创造性的开发、调试和测试中注意到一些有用的属性时,我希望这些有用的属性会对您有所帮助。第一个是当 Webkit 在 DOM 元素上执行任何类型的 CSS 动画时的字体渲染故障。当字体在动画中看起来清晰时,经常会出现这种故障,但在动画完成时,字体会无缘无故地变得更粗,并经常导致不必要的闪烁效果。如果您或您的客户注意到了这一点,请尝试对包装文本的容器 div 应用以下 CSS 规则:
<style>
.smoothFont {
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
}
</style>
该规则将在广告体验期间将 GPU 设置为“开启”,这不会导致任何字体故障。还要记住,随着越来越多的浏览器利用 GPU,这个问题可能会在未来的浏览器版本中自行解决。另一个有用的 Webkit 技巧是防止 Safari 在设备方向改变时调整文本大小。旋转设备时,浏览器会调整文本大小。如果出于某种原因,您想防止这种影响,请使用下面的 CSS 规则:
<style>
.maintainSize {
-webkit-text-size-adjust: none;
}
</style>
注意 text-size-adjust 是一个只有 Webkit 才有的 CSS 属性,允许你控制文本调整。
如果你是一个出版商,你会经常想要为你的移动访问者创建一个 web 应用体验。如果您负责构建广告将在其上运行的内容,并希望您的武器库中有一个方便的脚本来隐藏移动网页的默认工具栏,请查看以下代码片段,它可以附加到 DOM load 事件:
<script>
window.addEventListener('load', function() {
setTimeout(scrollTo (0, 1));
}, false);
</script>
此外,既然我们在谈论手机,那么可以相当肯定地说,你生活在一个触摸世界。虽然这对于 UI 来说非常棒,但对于创建用户习惯于鼠标输入的传统行为来说,这确实带来了一些挑战。其中一个挑战是创建一个“悬停”效果,虽然这在技术上是不可能的,但你仍然可以让 UI 中的按钮做出反应,就好像它们真的被点击了一样。以下 JavaScript 示例可以帮助您模拟这种效果,这对于某些设计交互非常有用:
<script>
var myLinks = document.getElementsByTagName('a');
for(var i = 0; i < myLinks.length; i++){
myLinks[i].addEventListener('touchstart', function () {
this.className = "hover";
}, false);
myLinks[i].addEventListener('touchend', function (){
this.className = "";
}, false);
}
</script>
如您所见,您获取了所有的 a 标签,并在 touchstart 和 touchend 事件上添加了一个悬停类。现在,一旦您将 JavaScript 添加到文档中,您就可以像在 CSS 中一样使用 hover 类来设计样式了。
最后一个移动代码片段再次与触摸事件相关。您通常会注意到,当您与 DOM 中支持触摸的对象进行交互时,整个浏览器窗口都会移动,而不是您的目标对象。开发人员没有包括 preventDefault 方法,该方法在您用手指移动元素时告诉浏览器“后退”,通常会导致这种情况。加这个真的很简单,看看下面:
<script>
document.ontouchmove = function(event){
event.preventDefault();
}
</script>
请记住,大多数情况下,出版商会包含特定的 HTML 元标签来锁定浏览器的视窗,但如果您需要在广告结束时解决这个问题,知道另一个选项仍然很好。
摘要
这一章充满了关于离线存储资源的有用的技巧和诀窍,离线使用的跟踪,以及一般的调试和优化。您深入了解了如何使用 HTML5 的 AppCache 缓存素材,以及哪些素材由于文件大小而不应该缓存。我讨论了在应用内部,这最终取决于出版商的要求,因为如果一个应用不支持离线,你的广告也不会得到支持。除了 HTML5 的应用缓存,您还将了解如何使用 navigator.onLine 检测您的 web 内容何时在线和离线,以及如何在应用中利用 SDK。我简要地谈到了新兴的 API,如网络连接 API,以及一旦规范最终确定,浏览器的采用,您将拥有一个非常好的 API 来为最终用户提供自适应的体验。在离线状态下,我讨论了如何在离线状态下使用离线跟踪技术来记录指标。无论您是使用缓存文件和 SDK 在应用中跟踪指标,还是在使用 DOM 存储或客户端数据库的移动设备上跟踪指标,请放心,您有能力完成这项工作。最后,我讨论了调试和优化这个复杂的主题。这个话题是我非常热衷的,如果你打算用 HTML5 在网上提供广告内容,你也应该如此。我涵盖了所有的工具和技术,您可以在您的指尖获得最小的文件大小,并分析您的广告内容跨多个屏幕。
当您思考离线、跟踪和调试时,您将进入 HTML5 动态广告的巨大领域。当你在广告中加入动态元素时,事情变得非常令人兴奋,但是它们的创建和调试也变得非常复杂。但是,请放心,您现在已经掌握了处理下一章主题的知识。
十一、使用 HTML5 的动态广告
动态广告在当今世界并不新鲜。用户和营销人员已经习惯于看到丰富创意与相关信息和数据相结合的概念。然而,这种动态行为传统上是使用 Flash 完成的,广告将引用外部 web 服务来更新其创意内容,这些内容可以是更新的文本、新图像,甚至是全新的广告体验。在这一章中,我将把重点放在帮助塑造动态广告市场的相同概念上,但我将主要关注 HTML5 和相关的开放网络技术。
让我们更深入地探讨“动态”这一主题,并弄清楚如何利用外部数据、发布者传递的数据、公共和私有 web 服务以及各种 API 来操纵广告投放时的创意。我将介绍基于地理定位的本地目标用户,并演示广告不一定要“嵌入”其中。我将回顾广告服务器和广告服务技术如何使用定制宏来帮助加速运行时动态,我还将展示广告如何能够及时、相关和高效地动态创建“热插拔”内容。使用这些技术,我将介绍您的广告将利用动态数据的技术,包括 XML、JSON 和直接 JavaScript。学习这些工具将最终打开在线广告的新世界。
交付规则
让我们从最基本的动态广告形式开始,它们是广告服务器的动态属性。通常,广告服务器可以为请求广告内容的用户设置传送规则。这种关系是这样的:“嘿,广告服务器,我是一个横向的 iPad 用户。给我一个不是基于 Flash 并且大小合适的创意。”然后,广告服务器将通过浏览器字符串(用户代理)查找来仔细检查用户是否确实在 iPad 上,然后将根据请求交付适当的创意类型。图 11-1 解释了用户和广告服务器之间的请求-响应关系。
图 11-1。具有动态输入/输出值的典型广告服务器请求-响应
交付规则有很大的威力,因为它们是广告服务器的第一道入口;广告服务公司试图使这种广告响应超快,以便为观看内容的每个人留下印象。他们通常以毫秒为单位来判断这个响应时间。广告服务器不仅仅使用浏览器嗅探技术;它们可以嗅出用户 cookies 或存储在客户端浏览器缓存中的数据,以及 IP 地址、ISP 和其他各种数据,我将在后面介绍。递送规则或设置通常适用于如何通过请求用户的广告标签将广告提供给发布者页面。交付规则通常可以有频率、轮换和用户自定义规则以及与之相关联的特定创作类型。这些规则还可以与其他变量配对,例如一天中的时间、位置以及广告服务器可以分析的任何其他变量。我将在接下来的小节中逐一介绍这些技术。
频率是用户会看到广告的次数。如果活动持续一天,并且用户一天多次频繁访问发布者页面,则该用户可以在初始查看之后“限制频率”,并且此后提供不同的创意。 轮换简单来说就是一个用户在一次活动执行中可能看到多少不同的创意。如果广告商准备好了多个创意版本,广告服务器可以将它们轮流放置,这样用户就可以通过多个广告请求来观看新鲜内容。用户散列规则检测客户端浏览器或设备能够呈现什么。这可能是一个静态创意,Flash 创意,或 HTML5 创意。这实际上取决于客户端浏览器可以处理哪些功能,包括浏览器的特定功能。如果用户不能支持 HTML5,用户能支持 Flash 吗?如果没有,图像怎么样?
注意每个广告服务供应商都有不同的能力。接触他们,以确定什么对你和你的竞选活动有效。
利用这些广告服务设置,可以实现一些非常巧妙和动态的用例。例如,你可以通过相同的广告标签向 iPad 用户和智能电视用户提供创意。这使得发行商可以通过他们所有的分销渠道销售媒体,并让他们的 AdOps 团队高枕无忧,因为他们只需要传输一个标签。您能想象为每个移动设备、平板电脑、电脑、电视等处理多个标签有多难吗?很快就变得疯狂了!
随着广告服务器和技术供应商向其注入更多数据,交付规则变得更加强大。广告服务器可以分析的数据越多,广告体验就越定制。这种技术通常由所谓的动态创造性优化 (DCO) 驱动。DCO 引擎允许在许多变量甚至第三方变量或输入上提供动态创意。真正智能的 DCO 引擎可以考虑位置、性别、年龄、性取向和兴趣,以及许多其他输入值。利用这些有价值的数据,营销人员可以更有效地锁定他们的受众,知道他们想要触及哪些受众群体(以及哪些创意信息)。一些广告服务器甚至可以检测 WiFi 热点,并根据他们使用的网络服务相应地定向广告。例如,图 11-2 是我去年在三藩市参加会议时收到的。当我访问出版商网站Bloomberg.com时,广告服务器根据我的 IP 地址知道我在使用免费的会议 WiFi,并相应地定向广告。为了更好地理解这种动态能力,请看下面的一系列图片。
图 11-2。Bloomberg.com上的初始屏幕使用 AT & T 的 3G 服务
这第一张图片是我在 iPad 上使用 AT & T 的 3G 网络时向Bloomberg.com发出的最初请求。如你所见,我在屏幕右侧看到一些广告。现在,如果我跳上会议的 w if I,正如你将在图 11-3 中看到的,我将看到更新的体验。
图 11-3。屏幕使用旧金山的免费会议 WiFi
图 11-3 展示了我在 iPad 上进入设置应用打开会议的免费 WiFi 时的情况。图 11-4 展示了更新后的广告体验。
图 11-4。使用免费 WiFi 服务后更新的【Bloomberg.com 站点
正如你从图 11-4 中看到的,我被广告服务器根据我的已知位置定向了一个特定的广告。因为我使用的是的免费 WiFi 服务,广告服务器知道我在哪里,可以根据那个 IP 地址提供相关的广告。现在如果我点击并按住广告,如图图 11-5 所示,你会看到广告服务器的域名。
图 11-5。负责显示这些动态广告的广告服务器
如图 11-5 所示,你可以看到,当我点击并按住广告时,我看到的是这个广告单元的点击目的地,http://myturfads.com是广告服务器,负责识别我在免费网络上的 IP 地址,并呈现这些相关的动态广告。
发布者传递的数据
广告服务器本身就非常强大,当与 DCO 产品和动态交付规则结合使用时,它们真的非常强大。但有趣的是,广告服务器甚至可以使用出版商的数据来为广告体验带来更多动态。发布者传递的数据可以用于提供动态广告,方法是将发布者知道的访问者信息传递到广告服务器的广告标签中。该信息通常以字符串值的形式通过广告标签,通常以逗号或竖线分隔,但它通常可以在来自发布者的标签传递中加密,然后由广告服务器解密。这种加密是为了防止恶意行为在不知情的情况下利用用户的数据。发布者通常通过向用户/成员提供注册的免费服务来收集这些数据。这可能是一个电子邮件帐户,免费音乐流媒体帐户,甚至是一个社交网络。以下示例可以表示 ad 标记输入的许多值,如年龄、邮政编码、性别和兴趣:
var adInput = "29|19428|M|Business,Technology"
Or Base64 encoded:
var adInput = "Mjl8MTk0Mjh8TXxCdXNpbmVzcyxUZWNobm9sb2d5";
注关于 Base64 编码的更多信息,请访问
base64encode.org
。
如您所见,adInput 变量可能是广告服务器的广告标签的主要输入。然后,当广告在其页面上呈现时,发布者将填充数据。利用这种类型的数据传递的出版商有 Yahoo、MSN、AOL 和许多许多其他出版商,因为它允许在其用户群中使用更相关的广告方法。如果你还记得第一章,我提到过,大多数免费服务,如雅虎和谷歌,为他们的广告商提供庞大的用户群,以换取媒体费用。换句话说,出版商提供收集用户信息的免费服务。因此,用户是出版商出售的产品,广告商是出版商的客户。然而,这并不都是消极的。人们发现,使用这些丰富的集成将使您的活动提高十倍,因为它将正确的消息在正确的时间关联到正确的用户,用户可以从他们真正关心的广告中受益。
宏和变量
宏是我要介绍的最后一个广告服务功能。软件中的宏通常被用作临时替代值,以后会被替换。当您在 JavaScript 中引用其他值的地方使用变量时,您可能对此很熟悉。
一个简单的例子是 var man = john,其中 man 是变量,john 是值。更进一步,宏可以用于大量的服务器端值替换。例如,假设你开发了一个创意,你所有的点击链接都依赖于广告发布页面。如果是这种情况,而你没有宏指令,创意就需要用许多不同的方式来开发,以满足每一个位置。但是,对于宏,您可以使用这些替代宏值,并且在发布广告时,根据发布者的位置,这些值会被切换到正确的值。如果你向 CNN.com 和 BBC.com 提供相同的广告,下面的代码示例将更好地展示这个概念:
Ad server assignment forCNN.com:
MACRO= "http://www.cnn.com"
Ad server assignment for BBC.com:
MACRO= "http://www.bbc.co.uk"
HTML for creative:
<a href=MACRO target="_blank"></a>
正如您所看到的,以这种方式开发比在未来需要做出改变时更新大量创意更具可伸缩性。
使用 XML 和 JSON
到目前为止,从广告服务器的角度来看,您已经对广告如何动态地针对您这个用户有了相当的了解,但是让我们稍微转换一下话题,更多地讨论动态广告的技术方面,因为它们与 HTML5 和开放 Web 相关。尤其是在创意方面,你可以利用数据来操纵广告中的创意元素。但在你走上这条路之前,你需要弄清楚你的创意如何处理来自各种服务的外部数据。在 HTML5 中工作的两个最常见的通信层是可扩展标记语言(XML)和 JavaScript 对象符号(JSON) 。XML 和 JSON 在业界被广泛采用,因为它们被用于各种数据端点的许多 RESTful APIs 中。
注意要获得 RESTful APIs 的详细信息,请访问
blog.apigee.com/detail/restful_api_design
。
使用一种所有低级代码语言都能理解和解析的通用语言,可以让 web 开发人员轻松采用、交流和普及。从引入一个品牌的 Twitter feed 到引入一个股票行情自动收录器,甚至使用一个天气 feed 或当地零售产品,都可以被引入广告创意。传统上,这都是使用 XML 或 JSON 数据完成的,下面几节将展示使用 XML 和 JSON 与外部数据提供者合作的最佳方式。
XML
XML 可能是 web 服务最常用的语言。我不打算深入 XML 的本质,但是在广告世界中,广告会通过 HTTP 请求向某个 web 服务发出请求,通常带有一些必要的 URL 查询参数。web 服务对该请求提供的响应传统上是 XML 格式的。清单 11-1 展示了来自雅虎开放天气服务的请求和 XML 响应。
清单 11-1 。雅虎的天气 API XML 示例
HTTP Request:
http://query.yahooapis.com/v1/public/yql/jonathan/weather?zip=19428
Server Response:
<query yahoo:count="1" yahoo:created="2012-08-01T23:15:47Z" yahoo:lang="en US" xmlns:yahoo="http://www.yahooapis.com/v1/base.rng">
<results>
<channel>
<title>Yahoo! Weather - Conshohocken, PA</title>
<link>http://us.rd.yahoo.com/dailynews/rss/weather/Conshohocken__PA/*http://weather.yahoo.com/forecast/USPA0326_f.html</link>
<description>Yahoo! Weather for Conshohocken, PA</description>
<language>en-us</language>
<lastBuildDate>Wed, 01 Aug 2012 6:34 pm EDT</lastBuildDate>
<ttl>60</ttl>
<yweather:location city="Conshohocken" country="US" region="PA" xmlns:yweather="http://xml.weather.yahoo.com/ns/rss/1.0"/>
<yweather:units distance="mi" pressure="in" speed="mph" temperature="F" xmlns:yweather="http://xml.weather.yahoo.com/ns/rss/1.0"/>
<yweather:wind chill="70" direction="0" speed="0" xmlns:yweather="http://xml.weather.yahoo.com/ns/rss/1.0"/>
<yweather:atmosphere humidity="94" pressure="29.85" rising="2" visibility="4" xmlns:yweather="http://xml.weather.yahoo.com/ns/rss/1.0"/>
<yweather:astronomy sunrise="5:57 am" sunset="8:12 pm" xmlns:yweather="http://xml.weather.yahoo.com/ns/rss/1.0"/>
<image>
<title>Yahoo! Weather</title>
<width>142</width>
<height>18</height>
<link>http://weather.yahoo.com</link>
<url>http://l.yimg.com/a/i/brand/purplelogo//uh/us/news-wea.gif</url>
</image>
<item>
<title>Conditions for Conshohocken, PA at 6:34 pm EDT</title>
<geo:lat xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#">40.08</geo:lat>
<geo:long xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#">−75.3</geo:long>
<link>http://us.rd.yahoo.com/dailynews/rss/weather/Conshohocken__PA/*http://weather.yahoo.com/forecast/USPA0326_f.html</link>
<pubDate>Wed, 01 Aug 2012 6:34 pm EDT</pubDate>
<yweather:condition code="30" date="Wed, 01 Aug 2012 6:34 pm EDT" temp="70" text="Partly Cloudy" xmlns:yweather="http://xml.weather.yahoo.com/ns/rss/1.0"/>
<description>
<![CDATA[ <img src="http://l.yimg.com/a/i/us/we/52/30.gif"/><br /> <b>Current Conditions:</b><br /> Partly Cloudy, 70 F<BR /> <BR /><b>Forecast:</b><BR /> Wed - Scattered Thunderstorms. High: 82 Low: 66<br /> Thu - Partly Cloudy. High: 91 Low: 70<br /> <br /> <a href="http://us.rd.yahoo.com/dailynews/rss/weather/Conshohocken__PA/*http://weather.yahoo.com/forecast/USPA0326_f.html">Full Forecast at Yahoo! Weather</a><BR/><BR/> (provided by <a href="http://www.weather.com" >The Weather Channel</a>)<br/> ]]>
</description>
<yweather:forecast code="47" date="1 Aug 2012" day="Wed" high="82" low="66" text="Scattered Thunderstorms" xmlns:yweather="http://xml.weather.yahoo.com/ns/rss/1.0"/>
<yweather:forecast code="30" date="2 Aug 2012" day="Thu" high="91" low="70" text="Partly Cloudy" xmlns:yweather="http://xml.weather.yahoo.com/ns/rss/1.0"/>
<guid isPermaLink="false">
USPA0326_2012_08_02_7_00_EDT
</guid>
</item>
</channel>
</results>
</query>
从清单 11-1 中可以看到,该广告使用查询参数 zip=19428 向 http://query.yahooapis.com域发出 HTTP 请求,并获得一个有效的 XML 作为响应,其中包含用户定义的邮政编码的详细天气情况。这个真的很厉害!如果您从您的广告服务器中了解到,您可以让广告服务器在最初的广告请求中检测您的位置,将位置数据转换为邮政编码,并将该邮政编码传递给气象服务,以提供相关和最新的广告体验,这是用户在广告投放时真正关心的。
数据
JSON 与 XML 非常相似,它以层次结构来组织数据,但它的主要区别在于它实际上是由浏览器本地解析的 JavaScript 对象,而不管 XML 清单如何。JSON 和 JSON-P 的另一个好处是,它不关心它来自哪个领域。这意味着,如果托管信息的域(在本例中是 Yahoo)与发出请求的域(在本例中是 ad)不是同一个域,那么 XML 的响应就会受到影响。有办法绕过这种跨源策略,要么使用 CORS,你在第六章中了解到,要么简单地使用 JSON-P。有时 JSON-P 不是 web 服务响应数据格式的一个选项,但如果是,你就永远不需要担心处理 HTML5 广告时的域安全问题。以雅虎的天气服务为例,发出 JSON 请求与 XML 非常相似。清单 11-2 展示了使用 JSON 的同一个例子。
清单 11-2 。雅虎天气 API JSON 示例
Request:
http://query.yahooapis.com/v1/public/yql/jonathan/weather?zip=19428&format=json
Response:
{
"query": {
"count": 1,
"created": "2012-08-01T23:29:00Z",
"lang": "en-US",
"results": {
"channel": {
"title": "Yahoo! Weather - Conshohocken, PA",
"link": "http://us.rd.yahoo.com/dailynews/rss/weather/Conshohocken__PA/*http://weather.yahoo.com/forecast/USPA0326_f.html",
"description": "Yahoo! Weather for Conshohocken, PA",
"language": "en-us",
"lastBuildDate": "Wed, 01 Aug 2012 6:53 pm EDT",
"ttl": "60",
"location": {
"city": "Conshohocken",
"country": "US",
"region": "PA"
},
"units": {
"distance": "mi",
"pressure": "in",
"speed": "mph",
"temperature": "F"
},
"wind": {
"chill": "72",
"direction": "0",
"speed": "0"
},
"atmosphere": {
"humidity": "94",
"pressure": "29.85",
"rising": "0",
"visibility": "5"
},
"astronomy": {
"sunrise": "5:57 am",
"sunset": "8:12 pm"
},
"image": {
"title": "Yahoo! Weather",
"width": "142",
"height": "18",
"link": "http://weather.yahoo.com",
"url": "http://l.yimg.com/a/i/brand/purplelogo//uh/us/news-wea.gif"
},
"item": {
"title": "Conditions for Conshohocken, PA at 6:53 pm EDT",
"lat": "40.08",
"long": "-75.3",
"link": "http://us.rd.yahoo.com/dailynews/rss/weather/Conshohocken__PA/*http://weather.yahoo.com/forecast/USPA0326_f.html",
"pubDate": "Wed, 01 Aug 2012 6:53 pm EDT",
"condition": {
"code": "30",
"date": "Wed, 01 Aug 2012 6:53 pm EDT",
"temp": "72",
"text": "Partly Cloudy"
},
"description": "\n<img src=\"http://l.yimg.com/a/i/us/we/52/30.gif\"/><br />\n<b>Current Conditions:</b><br />\nPartly Cloudy, 72 F<BR />\n<BR /><b>Forecast:</b><BR />\nWed - Scattered Thunderstorms. High: 82 Low: 66<br />\nThu - Partly Cloudy. High: 91 Low: 70<br />\n<br />\n<a href=\"http://us.rd.yahoo.com/dailynews/rss/weather/Conshohocken__PA/*http://weather.yahoo.com/forecast/USPA0326_f.html\">Full Forecast at Yahoo! Weather</a><BR/><BR/>\n(provided by <a href=\"http://www.weather.com\" >The Weather Channel</a>)<br/>\n",
"forecast": [{
"code": "47",
"date": "1 Aug 2012",
"day": "Wed",
"high": "82",
"low": "66",
"text": "Scattered Thunderstorms"
}, {
"code": "30",
"date": "2 Aug 2012",
"day": "Thu",
"high": "91",
"low": "70",
"text": "Partly Cloudy"
}],
"guid": {
"isPermaLink": "false",
"content": "USPA0326_2012_08_02_7_00_EDT"
}
}
}
}
}
}
正如您在清单 11-2 中看到的,请求几乎是相同的。唯一需要改变的是数据的格式。在这种情况下,您向名为 format=json 的请求添加一个额外的查询参数。这又是一个非常强大的功能,它允许广告从不同的领域获取数据,而不需要“白名单”想一想当你可以动态地改变你的广告而不“实际上”改变它的可能性。
注意有客户端 XML 到 JSON 的格式化程序(参见
thomasfrank.se/xml_to_json.html
),但是它们不能解决跨域策略的问题。
内容格式化
所以,你可能会问自己,这种动态数据很好,但我不需要处理和调节注入广告的数据吗?这是一个很棒的问题,显而易见的答案是肯定的!像使用脏话过滤器、添加省略号、调整文本大小、插入换行符代码等都需要考虑在内。
首先,脏话过滤器通常可以在后端或服务器端完成。在这些数据被输入到服务中之前,通常最好的做法是对针对该品牌的脏话和负面评论进行处理。也就是说,接触后端开发人员以确保这项技术到位总是好的。如果不是,清单 11-3 显示了一个很好的使用 JavaScript 的客户端脏话过滤器。
清单 11-3 。JavaScript 发誓过滤器示例
<html>
<head>
<script type="text/javascript">
//Grow this list for as long as you wish...
var keyWords = [D'oh,'jeez','dagnabit','boo','agh','Golly'];
function replaceChars(chr,cnt) {
var s = '';
for (var i=0; i<cnt; i++) {
s += chr;
console.log(s);
}
return s;
}
function checkWords() {
var inputText = document.getElementById('textArea').value;
var outputText = document.getElementById('conditionedText');
for (var i=0; i < keyWords.length; i++) {
var rg = new RegExp(keyWords[i]+' ',"ig");
inputText = inputText.replace(rg,replaceChars('*',keyWords[i].length)+' ');
}
outputText.textContent = inputText;
}
</script>
</head>
<body>
<textarea id="textArea" rows="5" cols="13">
This chapter is dagnabit amazing!
</textarea>
<button onclick="checkWords()">Submit!</button>
<div id="conditionedText"></div>
</body>
</html>
你这么说真是太好了!如您所见,您可以向关键字数组中添加任意数量的单词,并且可以随意使用对您来说最有意义的单词。将 JSON 文件中的单词外部化也可能是一个更好的主意,这样就可以轻松地进行更新,而无需深入核心脚本文件。这也可以用于我们在第六章中学到的网络工作者。
另一种调节数据的方法是 CSS 的“HTML5 新特性”省略号文本属性。如果您不确定 web 服务返回的字数,您可以设置文本区域的宽度和高度值,并将文本区域内的副本设置为 overflow: ellipsis。看看清单 11-4 中的。
清单 11-4 。溢出省略号示例
<html>
<head>
</head>
<body>
<div id="textArea">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
<style type="text/css">
#textArea {
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
height: 100px;
width: 200px;
overflow: hidden;
white-space: nowrap;
padding: 5px;
}
</style>
</html>
现在,填充名为 textArea 的 div 的任何副本都将在副本的末尾附加一个省略号,以防单词溢出 div 容器。还有另一个对移动设备有用的 CSS 技巧,叫做 overflow: scroll。在移动设备(iOS 5 以上)上使用以下 CSS 将为您提供与本机操作系统类似的本机优雅滚动功能:
#textArea {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
接下来,我将讨论随着数据和单词的增长而调整文本大小的概念。同样,在处理动态数据时,您不知道响应中有多少数据。除非您事先与可能采用字符限制的后端开发人员讨论这个问题,否则您将需要使用一些文本大小调整代码,您可以通过 JavaScript 利用这些代码来检测 div 容器的大小和填充容器的字数。使用 Nikolay Kuchumov 的位于jsfiddle.net/qW5h2/1
的例子,你可以减小字体的大小,以适应其设计的分配空间。这有点棘手,如果副本明显减少,甚至会反过来咬你一口,特别是如果你的客户是制药公司,出于法律原因,每个字都需要清楚。最好的办法是与您的 web 服务提供商沟通,如果时间允许,他们可能会添加一个带有字体大小值的特殊节点。通过这种方式,ad 可以适当地检查该节点的值和大小,而无需执行任何逻辑。
我还想提到另一个技巧,那就是视口大小的概念。这对移动设备越来越重要。简而言之,视口大小/比例可以根据视口的缩放级别动态更新屏幕上字体的大小和比例。如果你在 vw 中使用 CSS 字体大小,这是需要注意的。请记住,这将改变之前显示的容器大小方法,但是在这些技巧之间,您应该很好地了解什么技术最适合您和您的活动。更多关于视窗尺寸类型的信息,请访问css-tricks.com/viewport-sized-typography
。
注意还有一个非常好的轻量级 jQuery 插件叫做 FitText(
fittextjs.com
)用于响应字体大小。
HTML5 数据属性
现在,您已经了解了利用广告中的数据是多么有效,让我们来看看 HTML5 允许您在新的浏览器市场中使用的一些新功能。HTML5 中新增了可选的任意数据属性,可以在 HTML 标记中使用。以“宏和变量”一节中的例子为例,您可以在 HTML 中插入这些未定义的宏值,而不会影响您的有效标记。data 属性是向标记中添加动态值的好方法,而不用通过脚本将它们移植到 DOM 中。清单 11-5 展示了如何在你的广告中使用自定义数据属性,如果你想从一个零售商店的 web 服务中动态添加产品,比如来自(【http://shoplocal.com】??)的一个。
清单 11-5 。HTML5 数据属性示例
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div data-name="product" data-url="http://www.productURL.com"></div>
</body>
<script>
var element = document.getElementsByTagName('div')[0];
var name = element.dataset.name = "product"
var url = element.dataset.url = "http://www.productURL.com"
console.log('name' + name, 'url' + url)
</script>
</head>
</html>
注关于ShopLocal.com零售 API 的更多信息,请访问
aboutshoplocal.com/products/paperboy
。
data 属性只需使用 data-,其中代表您想要的任何值。在这种情况下,您使用名称和 URL,因为它们与产品信息相关,可以根据来自 Shoplocal API 的响应在您的广告中动态填充。只是重申一下,这可以是你想要的任何名字!发疯吧——这些都是有效的 HTML!
使用数据属性的真正好处是,通过添加的所有属性,您可以立即向用户显示信息,而不必担心发出任何额外的外部请求或进行任何服务器端查询。由于数据是放在标记中的,所以它已经存在了。这极大地提高了性能,因为数据已经存在于 DOM 中。您不需要“请求更多信息”,因为这些信息已经包含在初始回复中了。有关 HTML5 中自定义数据属性的更多详细信息,请访问html5doctor.com/html5-custom-data-attributes
。
H TML5 中另一个真正有用的新属性叫做 hidden。使用 hidden 属性时,浏览器不应呈现元素;但是,该元素在标记中仍然可见,并且可以从 DOM 中访问。当您想要显示元素时,可以使用 JavaScript 移除隐藏的属性。这很简单。清单 11-6 定义了一个隐藏的宏值。在 JavaScript 执行并检测到您的值被广告服务器替换后,您可以将元素及其值呈现到屏幕上供用户显示。这在您需要在将数据呈现给用户之前请求数据的情况下非常有用。
清单 11-6 。HTML5 隐藏属性示例
<!DOCTYPE HTML>
<html lang=en>
<head>
<script>
var output = document.getElementsByTagName('p')[0];
function onAdServerComplete (value) {
// macro value
var welcome = "Hello " + value;
output.innerHTML = welcome;
output.removeAttribute('hidden');
}
//Example Callback with value from AdServer
onAdServerComplete("John");
</script>
</head>
<body>
<p hidden>MACRO</p>
</body>
</html>
内容可编辑
下一个特性与其说是 API,不如说是属性,但它仍然是用户交互的重点,这是 HTML5 规范和动态数据的主要特性。信不信由你,内容可编辑自微软的 Internet Explorer 5.5 版本以来就已经存在,现在它在所有五种主要的现代浏览器中都得到支持。当使用内容可编辑特性时,您需要做的就是在您想要使之可编辑的元素上将 content editable 属性设置为 true。您还可以将此功能与推送至服务器或客户端存储的能力相结合,并管理更改,以便在用户再次体验时参考。清单 11-7 展示了 contenteditable 属性的作用。
清单 11-7 。内容可编辑示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<body>
<header contenteditable=true>Enter Some Text Here</header>
</body>
</html>
漂亮,简单,对吧?现在,您可以编辑 header 元素中的任何内容。实际上,您可以将该属性添加到 body 元素中,并允许编辑整个页面。广告中可编辑的内容有很大的潜力。实际上,您可以让用户编辑创意元素,允许他们创造性地改变自己的广告体验,而不是为所有用户输入使用输入字段。例如,如果您有一个广告活动,要求用户输入信息,允许他们定制、操作和编辑任何内容,包括广告本身的风格,会怎么样?这可能不是所有时候的理想情况,但对于特定的活动,这可能是一种独特的方法。当其他广告客户向他们的终端用户强行灌输信息时,这可以采取相反的方法,要求用户进行创造性的输入。这样,你就可以允许用户编辑整个广告,并将更改保存到浏览器或服务器上,下次他们按顺序查看广告时,就会看到他们曾经编辑过的最新保存版本。这也将允许品牌好好看看他们的用户是如何定制他们的品牌体验的,这将为品牌关系提供重要的细节。看一下清单 11-8 ,用户可以编辑广告体验的 CSS 样式,并将他们的更改保存到浏览器存储中。
清单 11-8 。内容可编辑广告示例
<!DOCTYPE html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
-webkit-tap-highlight-color:rgba(0,0,0,0);
outline: none;
text-rendering: optimizeLegibility;
}
#cta {
font: 175% sans-serif;
text-align: center;
margin-bottom: 20px;
}
#ad style{
display: block;
text-align: center;
}
#ad:hover{
background-color: #999;
width: 300px;
height: 250px;
}
button {
margin-top: 20px;
margin-bottom: 20px;
width: 300px;
height: 30px;
}
</style>
<body align="center">
<div id="cta">Edit Your Own CSS!</div>
<div id="ad" contenteditable>
<div id="style">
<style contenteditable>
#ad {
background-color: #fff;
width: 300px;
height: 250px;
border: 1px solid #000;
}
</style>
</div>
</div>
<button id="clearValues">clear storage</button>
<div id="output"></output>
<script type="text/javascript">
var adStyle = document.querySelector('#style'),
clearIt = document.querySelector('#clearValues'),
output = document.querySelector('#output');
function adInit () {
if (localStorage.getItem('adValue') === 'null' || localStorage.getItem('adValue') === null) {
console.log('init')
} else {
adStyle.textContent = localStorage.getItem('adValue');
console.log(localStorage.getItem('adValue'))
output.textContent = "Values Loaded!!!";
}
adStyle.addEventListener('DOMCharacterDataModified', updateAdStyle, false);//Fires everytime a character is changed
clearIt.addEventListener('click', clear, false);
adStyle.focus();
}
function updateAdStyle () {
if(localStorage) {
output.textContent = "Values Saved!!!";
console.log(adStyle.textContent);
//store the values
var styleFix = "<style contenteditable>" + adStyle.textContent + "</style>";
localStorage.setItem('adValue', styleFix);
}
}
function clear () {
if(localStorage.getItem('adValue') != 'null' || localStorage.getItem('adValue') != null) {
localStorage.clear();
}
output.textContent = "";
console.log('clear')
}
window.addEventListener('DOMContentLoaded', adInit, false);
</script>
</body>
</html>
正如您在前面的例子中看到的,您允许用户直接在页面上编辑 CSS,或者在本例中是 300 250 ad 单元。根据用户所做的编辑,在 localStorage 中存储一个名为 adValue 的长字符串值。现在,下一次用户查看广告时,这些值将被存储,并且仍然可以被操作。这真的打开了真正定制广告体验的大门。
HTML5 表格和输入
表单很可能是你第一次意识到你的网页内容可以变成交互式的。你不仅可以和你的用户互动,还可以根据他们的输入来定制你的网站和内容。这实质上是动态内容的整个基础。允许互动,优化反馈,并特别向与广告互动的用户呈现信息。也就是说,谈到动态广告,我不能不提到 HTML5 中表单和输入的更新。表单和输入标签长期以来一直与 Web 上的用户输入相关联。HTML5 表单最令人兴奋的新特性之一是使用客户端验证的能力。
以下是 HTML4 的前一种方法:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form>
<input name="email" oninput=validate(this);>
</form>
</body>
</html>
function validate (input) {
...tons of validation code and regex magic
}
这是 HTML5 的新方法:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form>
<input type=email required>
</form>
</body>
</html>
就这样!你注意到粗体字了吗?只要确保在 input 元素中包含所需的属性,浏览器就会处理输入验证。对于新手来说,这似乎合乎逻辑,没有什么了不起的,但实际上,在此之前,您需要包含一些长的 JavaScript 验证/regex 函数来检查字符串值,以确保它的格式良好,便于服务器处理。现在,浏览器会为您处理这一切。好好想想吧!每个开发人员都希望确保他们的输入得到正确的验证,所以如果每个开发人员都这样做,就让浏览器自己处理吧。为什么要为每个需要的项目重复自己?这也是 HTML5 努力实现的目标。
除了表单验证,HTML5 兼容的浏览器还包括本机数据类型,如日期、颜色、电子邮件、URL 和电话号码表单标记,所有这些都带有必要的客户端验证,正如您在前面的示例中所了解的。让我们分别来看看如何使用它们。首先,约会。
默认情况下,浏览器可以在浏览器的 UI 中为用户包含日历选择器元素。 图 11-6 展示了浏览器 Chrome 如何处理<输入 type = " date "></输入>。
图 11-6。Chrome 浏览器如何处理日期输入
接下来是颜色输入。使用 可以告诉浏览器显示一个色轮供用户选择十六进制值,如图图 11-7 所示。请注意,并非所有的浏览器都处理这些输入。浏览器对于 UI 元素也有自己的视觉差异。
图 11-7。Chrome 浏览器如何处理颜色输入
注意浏览器不能识别的任何输入类型都会优雅地降级为默认文本输入。
HTML5 还支持数字增量和滑块作为输入。只需添加以下输入,就可以让用户增加值并滑动一个简单的(但 CSS 可以换肤的) UI 元素。
<input type="number"></input>
<input type="range" min="1" max="5">range</input>
尝试之前的输入标签,你会注意到数字类型会在右边有箭头,范围类型会呈现一个简单的滑块,如图 11-8 中的所示。
图 11-8。Chrome 浏览器如何处理数字和范围输入
这些新的(和旧的)输入格式真正有趣的是与它们相关联的新属性,比如占位符、必填项和真正酷的模式。这些属性中的每一个都有它自己的好处;例如,placeholder 属性允许输入字段显示一些示例文本,以表明用户应该输入什么样的文本格式。这对于特定的文本格式很有帮助,例如信用卡、电话号码,甚至是社会保险号。
正如您所了解的,required 是一个很好的属性,可以确保用户在提交之前填写表单中的某个部分。浏览器现在将检查是否需要任何输入,并在用户试图提交表单时标记它们。
模式属性本质上允许您直接在 HTML 标记中使用自己的正则表达式(regex)。传统上,这只能通过 JavaScript 来处理,如果您希望您的用户显式地输入诸如五位数的邮政编码之类的内容,您可以使用 regex 模式来确保在用户提交数据之前客户端验证已经就绪。清单 11-9 概述了我正在讨论的内容。
清单 11-9 。模式属性示例
<!DOCTYPE html>
<html>
<body>
<form>
Zip code: <input type="tel" pattern="^\d{5}$" title="Five digit ZIP code" />
<input type="submit" />
</form>
</body>
</html>
正则表达式是非常强大的代码,可以被调整以适应各种各样的用例。在前面的例子中,您使用的是^\d{5}$的 regex 模式,它确保用户输入正确的美国邮政编码的五位数。
注意对于有用的正则表达式测试器/验证器,请访问
regexpal.com
。
输入的另一个真正酷的地方是,您可以基于从用户交互(或非交互)中应用的伪类来定制您的 CSS。下面的 CSS 示例显示了如何为未验证的表单元素显示错误区域:
input {
border: 1px solid #000000;
}
input:focus {
border: 2px dashed #666666;
}
input:invalid {
border: 5px solid #FF0000;
}
看看前面的 CSS 声明,您可以在焦点上更新边框粗细和颜色,当值无效时,为用户提供更大的边框粗细和亮红色表示“错误”
这些输入的另一个真正有用的特性是 datalist 元素。你是否曾经开始在 Google 上搜索某样东西,并注意到你正在搜索的主题已经被预先填充在输入框下面的列表中?嗯,使用 HTML5 datalist 元素,您可以在用户向 input 标签输入信息时提供类似的有用提示。如果用户试图通过一堆类别过滤广告,datalist 元素会非常有帮助。以之前的 ShopLocal retail 为例,可以向您的用户展示各种类别和产品的广告。为用户过滤它们不是很有帮助吗?让我们来看看下面的例子:
<body>
<input type="text" name="categories" list="categories" />
<datalist id="categories">
<option value="Electronics">
<option value="Furniture">
<option value="Office Supplies">
<option value="Kitchen">
<option value="Bedding">
<option value="Bath">
</datalist>
</body>
从代码中可以看出,您有一个名为 categories 的数据表,其中包含所有可能类别的选项值。现在,当用户开始在输入字段中输入内容时,使用名为 categories 的列表属性,您可以在用户输入时向他们显示选项。
表单并没有就此结束,它有很多改进,甚至工作组也在为 HTML5 和 HTML 制作更多的内容。也就是说,一个用于输入的成熟的 JavaScript 语音 API 正在开发中,目前谷歌 Chrome 浏览器的新版本支持该 API。显然是由 Google 的人带头的,您可以在浏览器中开始利用这一点,在您的输入标签中包含以下内容:
<input type="text" x-webkit-speech />
在输入标签中使用先前的 x-webkit-speech 属性将在输入文本区域产生图 11-9 。
图 11-9。Chrome 浏览器如何支持语音输入
您还可以使用下面的代码片段解析输入语音的结果,方法是侦听传入的事件并从该事件中获取 results 对象。接下来,您将使用结果的发音和置信度注销到控制台,这是 speech API 中分析用户输入的两个属性。
<script>
input.addEventListener('webkitspeechchange', function(event) {
if (event.results) {
for (var i = 0, result; result = event.results[i]; ++i) {
console.log('Speech: ' + result.utterance + ' ' + result.confidence);
}
}
}, false);
</script>
注意你可以去
developer . Chrome . com/extensions/experimental . speech input . html
了解更多关于 Chrome 的语音 API。
如果你熟悉语音到文本识别服务,比如 Dragon diction,甚至苹果的 Siri,这个功能对你和你的用户来说会非常熟悉和有用。有关 JavaScript speech API 工作规范的更多信息,请访问lists . w3 . org/Archives/Public/Public-web apps/2011 octdec/att-1696/speech API . html
。所以,你可能会想,“如果一些浏览器不能识别它们,那么这些令人敬畏的属性有什么用呢?”好问题。一定要看看 http://caniuse.com 的或者利用 Modernizer 之类的工具(如果你有的话);否则,您可以像这样做一些简单的 JavaScript 检查:
<script>
if (!'x-webkit-speech' in document.createElement('input') ) {
// no speech input
} else {
// speech!
}
</script>
最后,记住你的用户群,并记住不是所有的用户都有能力呈现现代网络的所有特性。
详细信息和汇总元素
细节元素是现代浏览器中一个伟大的新特性。你有没有想过最初只显示一点信息,然后在用户选择后显示更多信息,有点像手风琴打开/关闭的效果?嗯,细节元素可以帮助你快速做到这一点。看一下清单 11-10 ,它将细节元素合并到示例广告中。对于本例,假设您知道用户在哪里,并且希望根据他们的位置显示最近的商店。
清单 11-10 。详细信息/摘要示例
<!DOCTYPE HTML>
<html lang=en>
<head>
<style type="text/css">
summary {
-webkit-tap-highlight-color:rgba(0,0,0,0);
outline: none;/*removes outline*/
}
li:nth-child(odd) {
background: #CCC;
color: green;
}
</style>
</head>
<body>
<details>
<summary>Closest Store Locations</summary>
<ul>
<li><p>500 Ford Street, East Lanford IL 12345</p></li>
<li><p>13 West Nectar Road, Brunswick FL 12345</p></li>
<li><p>275 Bimba Drive, Clifton PA 12345</p></li>
</ul>
</details>
</body>
</html>
如果您在浏览器中预览它,您会看到您可以打开和折叠信息,这是一个非常有用的 UI 元素,也可以通过 CSS 进行样式化。您甚至可以添加一些属性,比如 open,它允许浏览器在文档加载时默认打开 details 元素。您甚至可以将细节和摘要元素嵌套在一起,创建一个非常复杂的 UI 元素堆栈。从图 11-10 可以看出,在本文撰写之时,details 元素仅在 Chrome、Safari 6 和 Android 4.0 中受支持。但是,请注意这个元素,因为采用应该很快就会开始。
图 11-10。对明细和汇总元素的支持。来源:http://caniuse.com/#feat=details。
你可能会问自己,“等等!我们怎么知道用户在哪里?”这是一个很好的问题,我很高兴向您介绍下一部分。
地理定位
现代网络堆栈的另一个巨大的补充是地理定位 API。地理位置数据是用户的纬度和经度坐标。传统上,你需要利用像maxmind.com
这样的网络服务,并经历一个查找用户 IP 地址并将其绑定到一个大概位置的过程。这不是防错的,因为它是由互联网服务提供商(ISP) 将 IP 分配给用户。(这可能是威瑞森、康卡斯特和其他你付费购买互联网服务的公司。)在我目前的使用案例中,使用 Comcast 的互联网服务,我的 IP 地址假设我在费城地区周围,这是在 WiFi 上,考虑到我只是在城外,这已经很好了;然而,我在某些情况下看到 IP 查找甚至不准确的状态。当用户使用手机运营商网络时,情况会越来越糟。因此,对于真正准确的使用,IP 位置查找是非常不可预测和不可靠的,尤其是对于移动设备。
幸运的是,有了新的地理定位 API,您可以获取用户的实际纬度和经度,这被证明是一个比昂贵(很少可靠)的查找服务更快、更准确的工具。我提到这个词昂贵的是因为这些查找工具中的一些不是免费的,因为它们向远程服务器和查找数据库发出请求来收集用户的大概位置,这反过来又会耗费时间。地理定位 API 通过浏览器在地理上定位用户(具有选择加入权限)。我强调“有权限”是因为一旦你试图检测到一个用户,浏览器的初始默认动作将提示用户一个警告,说明内容的域正在请求访问他们的位置。这个提示是所有浏览器和设备都采用的安全措施。图 11-11 展示了这是如何出现在谷歌的 Chrome 浏览器中的。
图 11-11。谷歌 Chrome 浏览器中的地理定位提示
图 11-12 显示了它在 iDevice 的移动 Safari 浏览器上。
图 11-12。手机 Safari 上的地理定位提示
如果用户选择、允许、拒绝或者只是等待太长时间才回复,那么开发人员可以根据执行的操作过程,通过检测 PERMISSION_DENIED、POSITION_UNAVAILABLE 或 TIMEOUT 来处理用户如何响应。在任何情况下,确保你的广告创意足够智能,以适应各种用户输入,因为不是每个人都允许基于位置的服务。清单 11-11 展示了如何使用 JavaScript 进行地理定位。
清单 11-11 。地理定位 API 示例
<!DOCTYPE html>
<head>
<meta charset=utf-8>
<body>
<header>
<h1>geolocation</h1>
<div id="coords"></div>
</header>
<script>
function success(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
document.getElementById('coords').innerHTML = "<p><strong>lat: </strong>" + lat + " <br><strong>long: </strong>" + long + "";
}
function error(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
alert("user did not share geolocation data");
break;
case error.POSITION_UNAVAILABLE:
alert("could not detect current position");
break;
case error.TIMEOUT:
alert("retrieving position timed out");
break;
default:
alert("unknown error");
break;
}
}
function adInit(event) {
console.log(event.type)
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
error('not supported');
}
}
window.addEventListener('DOMContentLoaded', adInit, false);
</script>
</body>
</html>
正如您在前面的代码示例中看到的,您检查了 navigator.geolocation 对象,如果它是真的,您就知道您的浏览器或设备支持地理定位 API。之后,调用 navigator . geolocation . getcurrentposition 并传入两个参数,一个是成功回调函数,一个是错误回调函数。一旦您运行这个命令,用户将会注意到前一个提示的轮廓,并且用户将需要采取必要的操作。假设他们选择了 allow,它将通过 success 方法运行;否则,它将通过 error 方法运行,您可以通过查看在回调中收到的错误代码来处理错误发生的原因。
一旦用户允许共享他们的位置,您就可以从 position 对象中获取纬度和经度值,该对象随成功回调一起提供。有了这些位置信息,你可以将它与基于位置的服务联系起来,或者将纬度/经度地理编码到一个邮政编码中,以查询雅虎的天气服务或谷歌的地图服务等服务。底线是地理定位在广告环境中提供了一些丰富的体验。
广告中的地理定位
位置是网络广告的重要组成部分。如你所知,广告商希望通过尽可能多的必要方式锁定用户,以确保他们的媒体投资获得良好的投资回报。有了这个新的 API,开发人员可以做到这一点!当与谷歌、苹果或必应(Bing)等地图服务配对时,或者当您想要定位用户并通过向他们提供进入商店的详细指示来导航他们到最近的零售店时,这些位置信息非常有用。
及时和相关的广告大有帮助;例如,如果你来自芝加哥,注意到一个广告给你提供了关于英国伦敦的产品和方向的信息,这对广告商,更重要的是对你,最终用户来说,是非常浪费和无用的。广告商每年花费数百万美元通过各种输入来锁定受众。使用位置作为创意的输入,广告商能够向用户传递特定的动态信息,这实际上是为了与潜在消费者创建更加个性化的交互。品牌和广告商喜欢这种关系,因为它创造了回头客,因为用户最终会信任品牌。
好了,策略说够了。让我们来看一个地理定位的例子,在这个例子中,您根据用户的位置提供一个特定的位置,并利用 WatchPosition API 将用户导航到提供优惠的商店(参见清单 11-12 )。
清单 11-12 。地理位置广告示例
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<header>
<h1>Find The Product!</h1>
<div id="coords"></div>
</header>
<script>
var MAGIC_LOCATION = "40.068134,-75.318797"//Don't be creepy
var location = document.getElementById('coords');
var watch;
function success(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
location.innerHTML = "<p><strong>lat: </strong>" + lat + " <br><strong>long:
</strong>" + long + "";
//start watching the users location
watch = navigator.geolocation.watchPosition(updatePosition, error);
}
function error(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
alert("user did not share geolocation data");
break;
case error.POSITION_UNAVAILABLE:
alert("could not detect current position");
break;
case error.TIMEOUT:
alert("retrieving position timed out");
break;
default:
alert("unknown error");
break;
}
}
function updatePosition(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
var newLocation = lat + ',' + long;
//This fires everytime the users location changes
if (newLocation === MAGIC_LOCATION) {
//You win!
productFound();
location.innerHTML = "<p><strong style='color:red'>" + newLocation + "</strong>";
} else {
location.innerHTML = "<p><strong style='color:blue'>" + newLocation + "</strong>";
}
}
function productFound() {
navigator.geolocation.clearWatch(watch);
window.alert("You Win!")
//show coupon to the user to buy the product at the store
}
function adInit(event) {
console.log(event.type)
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
console.error('geo not supported');
//supply different ad experience
}
}
window.addEventListener('DOMContentLoaded', adInit, false);
</script>
</body>
</html>
正如你从这个例子中看到的,我已经扩展了它,使它成为一个独特的游戏。还记得“你是热的,暖的,还是冷的”游戏吗?你知道,就是用户试图在另一个人的帮助下盲目地寻找某样东西?现在,这可以在数字世界中复制!试着以这个例子为例,将其更新为使用您所在地区的商店位置。甚至可能设置一个时间限制。如果一个用户能在规定时间内找到它,他们会得到一个特别的优惠怎么样?这项技术的可能性是无限的。
同样,请记住地理定位是一个选择加入的过程,用户必须明确“同意”或“允许”该功能。确保处理用户可能做出的所有响应,并注意用户位置的轮询。有了这个 API,开发人员可以利用 watch position 方法,如果用户在移动中,它将持续检查用户的更新位置。虽然这对于提供准确和实时的方向非常有用,但请记住,您轮询和请求用户的确切位置越频繁,处理请求所消耗的电池和资源就越多。对于移动用户来说,最好将它保持在最低限度,甚至允许用户根据自己的意愿更新他们的位置。随着 Battery API 的最终确定和广泛采用,您可以使用更复杂的方法来检测当前电池百分比的状态,然后再进行位置轮询。地理定位为营销人员打开了新的广告世界,在日益增长的移动领域,用正确的信息抓住移动用户变得前所未有的重要。不相信我?看一下图 11-13 中来自 eMarketer.com 的图形。
图 11-13。美国消费者对定位服务的使用
在图 11-13 中可以看到,location 挺大的,而且用得比较勤!如果你没有在下一个移动广告中使用它,我相信你会在客户要求后不久使用它。同样,地理位置 API 是一种规范,尽管它是独立的,但经常被合并到 HTML5 中。在 http://isgeolocationpartofhtml5.com 的亲自看看。然而,它确实与 HTML5 的许多新功能密切相关。如果你想了解更多关于地理定位规范的信息,请访问 http://dev.w3.org/geo/api/spec-source.html。
位置的 Web 服务
在这一节的最后,我想看看其他一些针对位置和其他 API 的 web 服务。请记住,这些 API 有付费和免费两种版本,因此请根据您的活动目标和预算做出明智的选择。也许最受欢迎的位置 API 应该是谷歌的地图 API(developers.google.com/maps
);然而,如果你计划在你的制作工作中使用谷歌地图,并且你期望从你的广告中获得大量的流量,你最终会为此付费,因为谷歌限制了其免费服务的请求数量。如果你负担不起谷歌,另一个很好的选择是开放的街道地图 API(openstreetmap.org
),这是一个很好的免费服务,但往往缺乏谷歌的功能和地理信息。其他一些有用的定位服务有 IPinfoDB(ipinfodb.com/ip_location_api.php
)、info chimps(infochimps.com
)和 Open B Map(openbmap.org/api/openbmap_api.php5
)。此外,如果美国法律不限制你,你可以利用在bluevia.com/en/page/tech.APIs.UserContextAPI
找到的其他有用数据。
注意小心处理这些信息。尽管广告商会恳求你跟踪和存储他们潜在客户的数据,但请注意,这可能并不总是符合人类的最佳利益,你可能会面临法律问题。
社会的
社交广告市场正在快速增长。如果你想一想,有什么比你的朋友在说什么更有活力和相关性呢?无论发生在哪个平台上,社交聊天总是在发生。使用社交平台,例如 four square(developer.foursquare.com/docs
)、Facebook(developers.facebook.com
)、Twitter(dev.twitter.com
)、insta gram(instagram.com/developer
)、LinkedIn(developer.linkedin.com/apis
)、Google+(developers.google.com/
+/API)、SoundCloud(developers.soundcloud.com
)等等,开发人员和设计人员可以利用这些丰富的社交平台,为用户的社交图提供更加集成的体验。如果你的一个朋友喜欢耐克的活动,这些信息可以实时呈现给你。或者,如果你想看看对这部新电影预告片的评论,为什么不从这部电影的 Twitter 账户中引入标签呢?有了各种将社交数据引入广告的 API,这一切都成为可能。
注意Open Graph API(
ogp . me
)允许用社交网络的元数据来标记网络内容和广告,以在用户的社交图中从网络内容创建丰富的对象。
社交 API
几乎每个人和他们的母亲都在脸书、推特或 Linkedin 上。我是说,连国王都在上面,而且他已经死了很多年了(twitter.com/ElvisPresley
)]!社交几乎是当今互联网的主流;我们比历史上任何时候都更能接触和洞察人们在说什么,他们的感受如何,以及个人信息。更相关的是与我们的朋友、家人以及我们关注的其他人的对话。社交几乎是许多人的生活来源。请看一下图 11-14 中来自eMarketer.com的图形。
图 11-14。对细节和摘要元素的支持
这就是证据!到 2014 年,超过一半的美国人将会与某种社交网络联系在一起。有了这些数据和将它们添加到广告中的潜在能力,包括地理定位。。。我想你明白我的意思;挺厉害的!在广告中加入社交元素可以很好地利用动态内容。说真的,还有什么比活生生的社交图更“活”的呢?有许多社交平台可以利用,但在利用这些社交 API 时,一定要记住权利和使用规则。像现在拥有 Instagram 的脸书这样的公司,允许开发者将他们的服务和平台整合到其他网络应用中;然而,在撰写本文时,脸书(和其他人)不允许你将用户的信息引入第三方广告体验。
同步单位
同步广告单元是指同一页面上的两个广告似乎在相互交流,从而为最终用户创造一种“捆绑在一起”的效果。这可以是从排行榜广告(728±90)单元开始并解析到盒子(300±250)单元的动画。同步单元通常由发行商一起出售,这通常是一个障碍,传统上,对于 Flash,您需要使用外部接口调用 JavaScript,以便在页面上的两个单元之间进行通信。既然你没有被“黑盒子”在 SWF 容器中,你的广告可以进行你自己特定的 JavaScript 调用来产生同步效果。看一下清单 11-13 ,其中 728 90 单位与 300 250 配套单位同步 CSS 过渡效果。
清单 11-13 。同步广告示例 728 广告
<!DOCTYPE HTML>
<html lang=en>
<head>
</head>
<style type="text/css">
#ad728 {
position: absolute;
top: 0px;
left: 0px;
width: 728px;
height: 90px;
border: 1px solid #000;
font-family: Arial;
font-size: 80px;
background-color: red;
color: black;
opacity: 1;
-webkit-transition-property: color;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: cubic-bezier(0.5, 0.2, 0.9, 0.4);
}
#ad728:hover {
color: white;
}
</style>
<body align=center>
<div id="ad728">728x90</div>
</body>
<script type="text/javascript">
var ad300 = "stop";
var ad728 = document.getElementById('ad728');
var ad728value = window.getComputedStyle(ad728,null).getPropertyValue("color");
ad728.addEventListener('webkitTransitionEnd', function(event) {
if(ad728value === "red") {
ad300 = "play";
} else {
ad300 = "stop";
}
}, false );
</script>
</html>
在本例中,您将看到 728 90 单位在其 CSS 颜色属性上获得了过渡效果。一旦用户悬停在 728 单元上,您将听到 webkitTransitionEnd ,的事件,该事件在转换事件结束时触发。这很有用,因为现在您可以处理这些事件并启动其他函数。在这种情况下,您为 300 单元设置一个值来监听名为 ad300 的变量上的播放值。 清单 11-14 显示了 300 个单元监听从停止到播放的值变化。
清单 11-14 。同步广告示例 300 广告
<!DOCTYPE HTML>
<html lang=en>
<head>
</head>
<style type="text/css">
#ad300 {
position: absolute;
top: 0px;
left: 0px;
width: 300px;
height: 250px;
border: 1px solid #000;
font-family: Arial;
font-size: 50px;
background-color: red;
color: black;
opacity: 1;
-webkit-transition-property: color;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: cubic-bezier(0.5, 0.2, 0.9, 0.4);
}
</style>
<body align=center>
<div id="ad300">300x250</div>
</body>
<script type="text/javascript">
var checker300 = window.setInterval(check, 100);
function check () {
if (ad300 === "play") {
animate300();
} else {
console.log('300 is stopped');
}
}
function animate300 () {
clearInterval(checker300);
document.getElementById('ad300').style.color = 'white';
}
</script>
</html>
如您所见,您触发了一个间隔来检查共享的 ad300 值,以确定是停止还是播放 300 单元的动画。对于这种类型的执行,有一些事情需要记住。首先,你需要知道出版商的页面是如何向你提供服务的。您是在 iframe、安全框架、MRAID 容器还是 CSS 溢出设置为隐藏的 div 中?这些都会影响到如何处理通过 JavaScript 的交流。例如,如果在一个包含 overflow : hidden 的 div 中为您提供发布者页面,您需要做的就是让两个广告在脚本中以相同的共享值进行通信(就像前面的示例)。同样,将 0 设置为 1 可以做到这一点,当该值发生变化时,让“checker”间隔轮询会很有帮助。此外,您可以从 728 单元为 300 单元分派定制事件来监听和处理。如果你通过某个容器(iframe 或 MRAID)接受服务,你需要通过该容器进行通信,以便广告连接。考虑到此时两个广告都将被包装,这有点棘手,如果它跨广告网络运行,就不知道容器会是什么,除非您有一个广告加载程序脚本文件,其唯一的工作是检测广告投放的环境。如果是 iframe,假设你有读写值的权限,你应该能够定位父窗口。如果是在 MRAID,你需要看看是否有某些 MRAID 或出版商的电话,以便让广告传输数据。
此外,您可能认为轮询值并不是一种真正优化的技术。事实并非如此,一些浏览器会在一定时间后简单地去除重复出现的间隔调用。幸运的是,HTML5 还有一个新特性,叫做跨文档消息传递的通信 API。它非常适合同步广告开发!
通信 API
用于跨文档消息传递的通信 API 允许通过窗口对象进行传输,而不管域安全性以及内容是否包装在发布者页面上的 iframe 中。基本上,如果你想发送信息给另一个广告,说“嘿,300 单位,这是 728 单位告诉你动画!”然后,您可以让发布者的页面或页面上的其他元素(从不同的域托管)侦听消息并做出相应的反应。这是通过使用一种叫做 postMessage 的方法来完成的;清单 11-15 展示了修改后的同步广告示例。
清单 11-15 。通信 API 728 示例
<!DOCTYPE HTML>
<html lang=en>
<head>
<style type='text/css'>
#ad728 {
position: absolute;
top: 0px;
left: 0px;
width: 728px;
height: 90px;
border: 1px solid #000;
font-family: Arial;
font-size: 80px;
background-color: red;
color: rgb(0, 0, 0);
opacity: 1;
-webkit-transition-property: color;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: cubic-bezier(0.5, 0.2, 0.9, 0.4);
}
#ad728:hover {
color: rgb(255, 255, 255);
}
</style>
</head>
<body align=center>
<div id='ad728'>728x90</div>
</body>
<script type='text/javascript'>
var ad728 = document.getElementById('ad728'),
ad728value;
function adInit () {
console.log('adInit');
ad728.addEventListener('webkitTransitionEnd', nudge300, false);
}
function nudge300 (event) {
console.log(event);
ad728value = window.getComputedStyle(ad728,null).getPropertyValue('color');
if (ad728value === 'rgb(255, 255, 255)') {
if(typeof window.postMessage === 'undefined'){
console.error('Your browser does not support the communication API');
//fail over to our other method
} else {
//Same Domain
console.log('Message: ' + window.postMessage)
window.postMessage('play300', 'http://johnpercival.org');//Insert your domain here
//Cross Domain
//document.getElementsByTagName('iframe')[0].contentWindow.postMessage('play300', 'http://johnpercival.org');
}
} else {
//some other color
console.log(ad728value);
}
};
window.addEventListener('load', adInit, false);
</script>
</html>
首先,像前面一样设置 728 单元,但主要区别是您使用了一个接受两个参数的 postMessage 调用。第一个是要传递的字符串值,第二个是窗口对象的域(在本例中是我的域,但一定要使用托管文件的域),通常是 ad 服务器。
注意如果不太在意域名来源,可以传递一个文字字符串值*,它是通配符,允许所有域名转移。
现在,一旦用户悬停在 728 单元上,您就可以向任何收听者发布消息。在这种情况下,它将是 300 单位,如清单 11-16 中的所示。
清单 11-16 。通信 API 300 示例
<!DOCTYPE HTML>
<html lang=en>
<head>
<style type="text/css">
#ad300 {
position: absolute;
top: 0px;
left: 0px;
width: 300px;
height: 250px;
border: 1px solid #000;
font-family: Arial;
font-size: 50px;
background-color: red;
color: black;
opacity: 1;
-webkit-transition-property: color;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: cubic-bezier(0.5, 0.2, 0.9, 0.4);
}
</style>
</head>
<body align=center>
<div id="ad300">300x250</div>
</body>
<script type="text/javascript">
function adInit () {
window.addEventListener('message', messageHandler, true);
console.log('adInit')
}
function messageHandler(event) {
switch(event.origin) {
case "http://johnpercival.org":
//only listen for events from our domain
if(event.data === 'play300') {
animate300();
} else {
//not our 300's message to animate
}
break;
}
}
function animate300 () {
document.getElementById('ad300').style.color = 'white';
}
window.addEventListener('load', adInit, false);
</script>
</html>
在接收器中,300 单位,非常简单。您设置了一个事件监听器来监听消息事件,并使用 messageHandler 函数对其进行相应的处理。在该处理程序中,您检查事件的来源,确保它来自johnpercival.org或您选择的域,最后检查附加到该事件的数据是否具有 play300 的值。如果是这样,你只需调用 animate300 方法来创建同步效果。
虽然这只是剥猫皮的一种方式,但是还有很多其他方式可以达到你想要的效果。请记住,这种风格可以在两个单元之间共享。请记住,我说过保持名称间距以广告服务器供应商为前缀,例如 AdServer-AdContainer。在向页面交付同步单元的情况下,我建议在名称空间前加上单元的大小。所以,AdServer-AdContainer 就变成了 AdServer-300x250-Container。这有点冗长,但适当地保留这个前缀将确保你的风格和其他事件不会在广告中共享,甚至在页面内容中共享。
注意这种方法可以用于在出版商的页面内容和托管在其他域上的广告之间传输数据。
高级动力学
高级动力学是真正令人兴奋的地方。当集成多个 HTML5 特性、web 服务、API 和 publisher 买入时,您可以创建一个前沿的活动。没有什么可以阻止你使用位置数据、天气服务、商店查询服务、股票订阅,甚至要求用户提供一些输入来定制和制作个性化的广告体验。当然,这需要时间、精力和金钱来完成,但是执行起来会很惊人,并且对最终用户非常有用。
通常,你会陷入寻找一个 web 服务来满足你的需求。在这种情况下,请查看 GitHub 上的开发人员社区并四处询问。如果您有服务器端编码技能,那么您可以自己编写,甚至向客户展示创建 web 服务的额外成本。这可能会让客户不想要这项服务,或者他们可能会请求这项服务,并将其用于未来的许多其他活动。
动态视频
我在第七章里讲了很多关于视频的内容,但是没有过多提到动态视频。在我完全沉浸在 HTML5 开发中之前,我非常喜欢 ActionScript 和 After Effects 中的组合数据。我做了一些很酷的例子,你可以动态地更新和改变叠加在视频上的内容。这些内容将通过元数据与视频的移动、倾斜、旋转和缩放具体联系起来,并由 SWF 读入,以创建无缝的视频/动画效果。尽管技术发生了很大的变化,但理论是不变的。使用 HTML5 canvas 和 video、WebVTT、CSS3 transforms 和 JavaScript 的特性,您可以做非常类似的事情。甚至还有一些有用的库,用于将数据实时绑定到视频内容。看看 PopcornJS(popcornjs.org
),你就会明白我在说什么了。
摘要
我在本章中讲述了很多,包括从您的广告服务器的各种输入中动态提供广告,使用交付规则,使用发布者传递的数据,使用 XML 和 JSON,使用 HTML5 中的新功能,如 data 属性,使用 contenteditable,使用表单,使用各种有用的属性,以及使用来自浏览器的惊人的新地理位置数据。我甚至讨论了一些关于社交 API 和广告集成、高级动态执行和流行的同步广告单元的内容。
请随意花些时间访问代码示例并自行测试。动态广告可以做很多事情,只要你有信息和数据可以利用,真的没有限制。请记住,不是每个广告都应该是动态的。如果你专门针对移动设备上的用户,记住他们的用户体验。在带宽不充足的情况下,用户可能处于明显减少的连接中。如果是这种情况,我建议在广告请求时检测到这一点,并提供替代版本的广告体验。不要对用户的机器征税!最后,你真的想提供一个有品位的、有效的广告体验,而不是一个霸占所有系统资源、呈现糟糕体验、用户会责怪品牌甚至出版商的广告体验。如今,用户比以往任何时候都聪明,他们拥有人类已知的所有社交渠道,让你意识到自己搞砸了。最后,为你的用户提供良好的体验,了解网络条件是一个变量,并随时调整。保持活力,适应变化。
我希望你喜欢这一章;这是下一个讨论的很好的入门,前沿的 HTML5。现在你已经知道了 HTML5 广告的基本知识,以及如何在你的广告中包含动态,我将谈论一些在不久的将来即将出现或者可能已经出现在新兴 web 标准中的真正令人惊奇的特性。
十二、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 来实现。最后,重启你的浏览器以确保设置生效,然后你就可以使用这个很酷的新功能了。要了解更多关于真实世界的例子,我建议访问 http://css-tricks.com/content-folding 的网站,要了解更多关于 CSS 区域的规范,请访问 http://w3.org/TR/css3-regions 的网站或者 http://adobe.github.com/web-platform/samples/css-regions 的网站。
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 滤镜规范的更多信息,请访问 http://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html 的或在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 中面具的精彩文章,请访问 http://css-tricks.com/webkit-image-wipes。虽然浏览器支持对于跨浏览器制作工作来说是最小的,但它在 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 在最坏的情况下,在撰写本文时,它们还没有在任何浏览器版本或设备中实现,但正式的规范正在开发中。最好密切关注 http://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 时。这将允许用户下载用户可能创建的广告内容。一个很好的例子可以在 http://html5-demos.appspot.com/static/a.download.html 找到。
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 演示,请访问 http://html5rocks.com/en/tutorials/getusermedia/intro 的。
注意为了观看视频流,你需要在本地或远程服务器上测试这个 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 做一些令人惊讶的事情,包括为游戏创造各种各样的声音(【http://html5rocks.com/en/tutorials/webaudio/games】)或者甚至创造类似吉他效果板(【http://dashersw.github.com/pedalboard.js】)的东西。对于其他一些真正伟大的例子,请访问html5audio.org
,并确保通过访问caniuse.com/#feat=audio-api
来检查支持。
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 的例子,用来创建真正有趣的实验,用户可以在广告单元中直接(实时)相互竞争。你可以在 http://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 对手机和桌面浏览器的全面支持(来源:【http://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 应用。关于网络意图的更多信息,请访问 http://webintents.org 和 http://w3.org/TR/web-intents 的。
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(【http://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 的信息,请访问 http://w3.org/TR/calendar-api。
联系人 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 的更多信息,请访问 http://w3.org/TR/2012/WD-proximity-20120712和 ??【http://developer . Mozilla . org/en-US/docs/DOM/DeviceProximityEvent】网站。
湿度、温度和光照事件
最后,一些设备甚至可以访问非常丰富的功能集,如湿度和温度 传感器以及环境测光表。处理这些事件的可能性可能是,当设备检测到它在户外阳光下时,调整内容的 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 特性的电视浏览器(来源:【http://html5test.com/results/television.html】??
回顾图 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),许多硬件制造商通过联网的机顶盒提供电视体验,用户可以安装各种应用来个性化观看体验。在撰写本文时,一些更受欢迎的设备是苹果电视(【http://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(【http://bit.ly/OPxPNf】??)等应用集成,X1 可能是利用 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(【http://playstation.com/psvita】??),它提供了网络浏览器、应用和另一种第二屏幕体验的解决方案——很像微软的智能眼镜(xbox.com/smartglass
)。
数字标牌和广告牌
所以,我已经说了很多关于室内客厅的体验,但我们不要忘记室外。每天我们都看到屏幕在争夺我们的注意力,无论是在路上开车,在出租车后座,还是在纽约时代广场漫步。广告牌和户外显示器对数字景观来说已经不再陌生,在一个由广告推动的行业中,越来越多的显示器由数字屏幕驱动。随着越来越多的显示器随着网络接入变得数字化,在这些媒体素材上开展活动变得越来越便宜和有效。
想想看,您不再需要有人在广告牌的位置安装任何东西,这样可以降低运营成本,而且因为屏幕是连接的,您可以全天运行多个广告活动,甚至显示相关信息,如最近的彩票号码、离出口坡道最近的商店,甚至是该地区的头号通缉犯。使用这些来自 Clear Channel(【http://clearchanneloutdoor.com】)、Adams(【http://adamsoutdoor.com】)、CBS(【http://cbsoutdoor.com】)、Lamar(【http://lamar.com】)、Captivate(【http://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(【http://shazam.com】)和 sound hound(【http://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 中使用面部检测。看看尼夫在 http://github.com/neave/face-detection的例子。
另一个有趣的功能是与使用脸书、Twitter、LinkedIn 等社交数据配对。使用这些社交 API 和面部识别技术,你可以通过用户在网上发布的信息非常准确地了解用户的全部信息。一个有趣的产品是 Facedeals,当人们走进一家在入口处安装了 Facedeals 摄像头的商店时,它会通过他们的脸书账户向他们推送优惠。要了解更多信息,请访问 http://bit.ly/RSUhKb。
不跟踪 (DNT)
在我谈论所有这些令人惊叹的技术时,我想通过讨论用户隐私和安全以及行业范围内的新兴主题“请勿跟踪” (DNT) 来带回家。简而言之,DNT 是附加在所有 HTTP 请求头上的一点信息,不用深入了解 HTTP 头的细节,只要知道每次你访问 Google、Amazon、脸书等等,你的浏览器都会提供一个 HTTP 请求来检索位于这些域的服务器上的信息。附加到浏览器请求的新的 DNT 信息当前具有三个值:1 表示“不允许网站跟踪我”,0 表示“允许网站跟踪我”,并且 Null 是默认设置,如果用户不采取任何动作来将他们的浏览器偏好设置为 1 或 0。现在,因为这些信息被附加到来自用户浏览器的每一个请求上,所以接收端的服务器必须相应地处理这些信息,这就是它变得更加有趣的地方。目前,该行业正试图在新的浏览器版本中采用 DNT,同时也试图弄清楚接收服务器应该如何处理 DNT 的数据(【http://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
和【http://ftc.gov/opa/2012/05/donottrack.shtm】??。
注意你可以在
bit.ly/QBcwng
找到更多关于阿帕奇服务器补丁的信息。
摘要
显然,这一章的目的是让你提出问题,思考什么是可能的,而不是专注于当前空间的限制。随着互联网广告收入在 2012 年创下单季度 84 亿美元的记录(bit.ly/NupSQs
),这个行业将不会缺少竞争。这意味着,不管你喜不喜欢,广告会一直存在!
在我结束这本书的时候,我想让你知道,外面有一个世界在急切地等待着有品位的在线广告,而且是一个甚至还没有被想象出来的世界。虽然我知道大多数人不喜欢广告,认为它是一种邪恶,但请记住,它为内容提供商提供了一个很好的收入模式,为各种各样的受众提供优质免费内容,因此我们正处于一个非常好的过渡点,以使数字广告业再次有效,并重新定义过去让我们和我们的用户失望的许多事情。因此,请接受这种变化,并提供指导,说明你希望看到这个行业在未来几年如何形成,因为它正在转向使用 web 标准。
最后,要知道网络正变得越来越开放,在网络开发、网络应用和数字广告方面,我们都处在许多伟大事物的尖端。现在,网络出现在手机、台式机、笔记本电脑、平板电脑和电视上,市场比以往任何时候都有更多的增长和机会。今天它出现在你的电视上,但明天它将出现在广告牌、汽车、电梯、电器以及更多我们还没有想到的地方,这将意味着更多的竞争和更多来自广告商的需求来衡量他们营销目标的有效性。我们从 HTML4 和 Flash 的数字过去中学到了很多,但有一点是肯定的:web 标准不会消失,因此学习 HTML、CSS 和 JavaScript 的新功能是你为自己和职业生涯所能做的最好的事情之一。
我个人要感谢大家阅读 HTML5 广告。这是一个相当新的话题,这本书试图为整个行业的转型设定一个战略和发展的基线。随着我们不断向前推进,信息无疑需要进行调整,但我希望您发现这是一篇内容丰富、有趣的文章。当您开始下一次数字活动时,如果有任何问题或意见,请随时联系我。随着我们继续缩小完整的 HTML5 规范和完整的浏览器支持的范围,您将处于一个正面应对整个行业的绝佳位置。接下来的几年将会是激动人心的,我真的希望你们和我一样期待着事态的发展。
继续实验!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
2023-08-19 赏味不足:详细来聊下轻资产运作,我从不做重资产
2023-08-19 老隋:什么赚钱就做什么,记住轻资产运营,试错成本低
2023-08-19 iBooker 技术评论 20230819:打工是风险最高的事情
2023-08-19 卓钥商学苑:创业期间被合伙人背叛了怎么办?处理方式有哪些?