HTML5 广告教程（一）

于 2024-08-15 00:52:50 发布
阅读量631 收藏 3
点赞数 4
分类专栏： VKDoc 文章标签： VKDoc
License CC BY-NC-SA 4.0 / 自豪地采用谷歌翻译
本文链接：https://blog.csdn.net/wizardforcel/article/details/141203504
版权

原文：HTML5 Advertising

协议：CC BY-NC-SA 4.0

零、简介

为什么要写一本以 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 中另一个有趣的特性是新的数据属性。这种属性添加起初可能看起来有点疯狂，但是它提供了一些非常好的用例，尤其是在广告领域。使用广告标记中的数据属性，您可以自定义特定元素的特定值。例如，在广告投放中，所谓的宏通常用于在广告投放时将变量替换为其他值；它的使用方式取决于广告面向的出版商，以及在将广告呈现到页面之前我们可以了解的其他信息。这个宏值非常类似于传统编码语言中的变量，通常看起来像 M A C R O MACRO MACRO，？？宏？？，或者类似的东西，这取决于广告服务公司及其解析特定字符以插入值的能力。宏值可以通过数据属性添加到广告的标记中；当提供广告时，根据广告服务器收集的信息，该属性将被应该存在的值所替换。清单 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>

在广告投放时， M A C R O MACRO MACRO值被广告服务器定义的值所替换。这种情况下可能会出现$ MACRO $ =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
加工 jprocessingjs.org
洛卡切斯locachejs.org
要求的需求. org】??
HeadJShead js . com
视频videojs.com
RevealJSlab.hakim.se/reveal-js
UnderscoreJSunderscorejs.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 以编程方式在画布上绘图？我是一名设计师；我不能用我正常的设计工具吗？”你不是唯一一个问这个问题的人；有一个很好看的工具，是专门为设计师使用而开发的，叫 Ai外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传Canvas(visit mix . com/labs/Ai 2 Canvas)；它允许设计师在他们知道和喜爱的基于矢量的程序中进行设计，尤其是 Adobe Illustrator。

Ai 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 Canvas 插件使 Adobe Illustrator 能够将矢量和位图作品直接导出到 HTML5 canvas 元素，该元素可以在支持 Canvas 的浏览器中呈现。该插件提供绘图、动画和事件等编码选项，以便您可以构建交互式的、设计良好的基于画布的 web 应用。

visitmix.com/labs/ai2canvas

在创意部门，当你在一个团队中工作时，这个工具特别有用，在这个团队中，设计师需要向开发人员提供概念和模拟。你可以让你的设计师在 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 规范带来的许多增强有了很好的理解。以下是一些更高级的画布示例,你可以在自己的时间里查看。

在探索新的库和教程时，请记住文件的重量和整体性能，尤其是在观看演示并试图为您的广告创意提供参考时。也要记住，没有人会上网看你的广告，所以尽量避免矫枉过正。通常，最好的方法是给浏览者一个体验，让他们在登陆页面上获得更全面的体验。过于复杂的广告会让用户的机器不堪重负，甚至崩溃，这取决于设备、机器的局限性，甚至是广告发布者。最后，看看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，只需做一点工作。一些在线网络服务甚至更简单:

您会发现，并不是每种类型的动画都需要 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 内容。)

我们先来分解一下 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 功能，我有三个简单的规则可以遵循。

  1. 了解您的目标受众，并了解出版商目前在功能方面的优势。有可能它出售与其内容一致的媒体库存。如果它的内容面向更懂技术的受众，并且出版商不太关心 IE6 到 IE8 的用户，你应该可以使用更前沿的功能。
  2. 如果你需要安抚群众，与你的出版商合作，包括多填充。更有可能的是，你需要额外的 k 重量津贴，如果它还没有被烤入网站。
  3. 为你的广告使用 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 工作器。

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值