详情
本书中的文章来自于世界知名设计与开发博客Smashing Magazine， 书中涉及的内容广泛：网站再设计的商业思考，HTML5与CSS3，重新认识Javascript，构建更优用户体验的技术，移动用户体验设计，等等。这些都是目前业内最为火热、从业人员最想了解的话题。
THE SMASHING BOOK
#3 Redesign The Web
腾讯 ISUX社交用户体验设计部 译
北京
这是一本精彩、实用的网站UI设计宝典，其中的文章来自于世界知名Web设计与开发博客Smashing Magazine。全书内容丰富，包括：网站重新设计的商业思考，HTML5与CSS3，重新认识JavaScript，构建更优用户体验的技术，移动用户体验设计，等等。这些都是目前业内热度最高、从业人员最想了解的话题。无论是设计师还是开发人员，无论水平是高还是低，读者都能从Web设计顶尖高手的字里行间汲取到对自己有价值的知识，帮助自己提高和进步。
本书内容丰富、案例精彩，适合具有一定经验的移动Web设计师或相关专业的学生阅读。
我们身处一个快速发展的行业，在持续的革新中，每时每刻都让人激动。如果说，“现在是Web设计和开发行业最精彩的时代”，这样说是不准确的。只要身处Web领域的最前沿，每时每刻都是让人激动，过去是，现在是，将来也一直是。
近几个月，我也仍然在重复这些话，因为“现在”正是让人激动的时代。在早期基于表格的布局时代，作为一个新奇的“新媒体”，我们是紧张的小孩，向父辈传统媒体寻求帮助；21世纪刚开始的时候，我们是笨手笨脚的年轻人，尝试各种工具和技术，有一些很好（比如Web标准），也有一些很糟糕（比如一些有专利的插件）。而现在，我们进入充满自信的二十几岁，把我们的所有知识融入到一个全新的，令人激动的体验中——最终，让我们拥抱Web的本质：短暂、可塑、开放、自适应。
仅仅拥有强大的工具是不够的，而只有技术和创造性的知识也是不够的。真正的成熟来源于两者的结合：一个是更深层地理解，理解技术可以实现什么，但更重要的是，知道应该实现什么。能够让多浏览器支持一个实验性的新CSS特性不是革新；优雅地使用它们才是革新。有一千种字体可以选择使用不是革新；优雅地使用它们才是。使用媒体查询（media queries）来通过浏览器宽度来改变样式不是革新；优雅地使用它才是。
我们日渐成熟的Web行业的这一原则——或者说是我们意识到的原则——已经在世界的舞台上崭露头角，在我们的印刷杂志上、日报上、图书中，当然还有Web中数不胜数的博客上。Web已经长大了，正是这一理念鞭策了我对Smashing Magazine 网站的重新设计，而重新设计这一主题也将贯穿本书。Paul Boag 描绘了开始重新设计之前的商业思考；Ben Schwarz，Lea Verou，David Storey 和Christian Heilmann 讨论了重新设计网站用到的一些新型技术，比如HTML5、CSS3 和JavaScript ；Stephen Hay 和Andy Clarke 描绘了重新设计网站时使用响应式的，对移动设备友好的技术；Rachel Andrew，Dmitry Fadeyev、Marc Edwards、Aral Balkan 和Aaron Walter 将他们对重新设计的理解拓展到更宽广的话题。
正是“把事情做得更好”这一渴望驱动我们对Smashing Magazine 进行重新设计，这也鼓励我们创造了第三本众妙之门。也是这一激情让我们凝聚成一个合作团队，而不是竞争对手——我相信你在阅读本书的时候一定会感到这一激情——这一激情鼓舞我们每一个人努力让Web变得更好……比如一个CSS渐变，一个Web字体，或者一个媒体查询。
【译注】
1.优雅降级，指对支持CSS 3 属性的浏览器使用新属性，而对不支持这一属性的老式浏览器使用可接受的替代方案。
Elliot Jay Stocks
</header>
作者：Ben Schwarz
译者：Tyson Pan
如果你让我解释什么是HTML5，我可能会说，Web开发者的职责已经悄然转变。我会假设你精通HTML（一种标记语言）、CSS（以及它的跨浏览器兼容）和Javascript（和它在各浏览器API中的微妙区别）。然后我的话题会转到设计理论、动画、3D、服务器端技术以及音响工程（译注：指视频音频的播放和摄取）。
沉默片刻之后,你可能想要知道：为什么HTML会包含如此多的技术？并想知道为什么自己当初选择了这一行。
HTML5（作为一门专业技术）细分出了很多技术，囊括了截然不同的领域，所以不要烦恼。对HTML、CSS和Javascript有一个坚实的基础，这确保你可以独立工作，进而发展一种其他人不具有的特定知识。也可以说，你对HTML5中某种“非核心”的特定技术的精通会让你在团队和公司中无可替代。对于许多炫目的新特性，最佳实践还没有确定下来，所以如果你想学一些真正酷的东西（并且成为开发中的明星），是时候下载一个最新浏览器并开始试验了。大部分浏览器厂商都会放出beta版来允许开发者体验最新的技术。五大浏览器都有beta版可供下载。
• Google Chrome 有3 个非正式版本：Beta（给开发者）、Dev channel（给开发者，有一周内刚加入的新功能）、Canary[1]。
• 苹果的Safari浏览器有一个版本：Webkit（webkit.org）。
• Opera有一个Next版本：smashed.by/operadev。
• Firefox 有一个nightly 版（smashed.by/ffndev）和一个叫做Aurora 的pre-beta的（smashed.by/ffadev）。
• 最后一个不可忽视的，微软自己发布的IE 最新版本（不是nightly 版）：smashed.by/iedev。
浏览器对新特性的支持正在以一种模块化的节奏发展。一些浏览器厂商（特别是Google和Mozilla）现在以6到8周一个版本的速度发布新版本，版本号不再像以前那么重要。喜欢尝鲜的开发者可能会喜欢这样的方式。网站会有一个版本，但它对用户不重要。所以，作为Web开发者，你要考虑哪些特性可以最好地讲述你的故事，并且把你的设计转变成活生生的、有呼吸的产品。
即使Web技术在进步，我们仍然要考虑一些老式的浏览器。值得庆幸的是，HTML标准也考虑到了这一点。所以我们不必改变用户的访问路径，也不用增加一份代码就可以开始使用HTML5——这真让人宽慰。不论你是用什么DOCTYPE，用户的浏览器都会尽它所能解析页面。如果你用一个老式的DOCTYPE加上新的HTML5特性，它仍然可以完全无误地解析。
在这一章中，我们不会讨论WebGL、音频和视频、设备API、Web sockets或者SVG。我会把它们留给你去探索，因为每一个话题都可以成为一章。相反，我们会引导你进入HTML5的世界，告诉你在探索那些高级话题之前你需要知道的一切。
3.1 我们从哪里来，将到哪里去
HTML5包括很多东西，直到最近的一次HTML的主要版本为止，我们已经走了很长的一段路。网络超文本应用技术工作小组（WHATWG）定义HTML5为“HTML：灵活的标准”（它去掉了5）。也就是说，HTML是一种与版本无关的技术。如前所述，浏览器厂商们按照它们自己的喜好去选择实现某些功能，这就是为什么浏览器对HTML的支持各不相同。
3.1.1 WHATWG、W3C和互联网公司
你可能听说过万维网联盟（W3C），也在前几段文字中看到过WHATWG这个名词。WHATWG是一个由苹果公司、Mozilla和Opera的代表所组成的工作小组，他们担心W3C缺少对于HTML的开发，因此他们决定成立自己的工作小组。
WHATWG把W3C的很多工作成果直接拿来用了，而W3C的许可证也确实授权如此，因为W3C规范的许可证中声明：“你被授权使用、复制以及改进这些规范文档”。
W3C确实共享出这些规范，不过这些规范文档更多的不是创建标准，而是提出建议。并且由于W3C是由所有的大型电脑公司和浏览器厂商们共同成立的，它致力于开放标准，因此它不会偏袒任何一家公司。
因此，作为一个Web开发人员，你可以肯定的是，所有HTML的新进展（特别是那些与Web应用相关的）一定会被浏览器厂商们所实现，因为这是他们可观的收入来源之一。同时，随着时间的推移，这些进展也一定会被W3C所认可。
这个奇怪的关系导致了那些需要许可费或者有着所有权限制的技术不被大多数人看好。浏览器之间的竞争从一开始就是那么的激烈。
3.1.2 了解应该采用哪些技术
一个当代的Web开发人员必须了解他们的用户，为自己的网站选择正确的技术，并且知道如果某项功能不被用户的浏览器所支持时会出现怎样的效果。
天知道某一个特定的功能是否被广泛地支持，所以你应该感谢When Can IUse(smashed.by/wcai)[2]。这个网页列举了哪些功能是被主流的电脑浏览器和移动终端浏览器的近期版本所支持，以及哪些功能将被未来的版本所支持。它是可搜索的，甚至可以与 Google Analytics 结合，让你知道你的用户正在使用的是什么浏览器。现在，就让我们从最原始的地方开始，开始HTML之旅。
3.1.3 文档类型
你是否还记得HTML4.01(或者XHTML)完整的文档类型声明？反正我是不记得。那么，让我们看一下HTML5的文档类型。
<!doctype html>
就是仅仅如此，它可以是大写的，也可以是小写的。这就是你把浏览器设置成标准模式所需要的全部内容。你会奇怪为什么我们还需要一直复制粘贴HTML文档的头部内容。
当然，多年来我们一直被HTML的一堆所谓重要的头部标签搞得非常纠结。现在我们看一下在HTML5中还有什么被简化了。
3.1.4 META字符集
<meta http-equiv="Content-Type" content="text/html";
charset="utf-8">
噢，这是多么复杂！这个meta标签非常重要并且要出现在title标签前面，以确保浏览器正确地设置编码。幸运的是，在HTML5中，它被简化成容易记忆的一小段。
<meta charset="utf-8">
一些XML解析器在处理不闭合的标签时会有麻烦，这就是为什么有些Web开发人员会比较倾向于使用自闭合的标签（如XHTML的风格）。不过在这里，这完全取决于你自己，但是我们建议让标签不必闭合。
3.1.5 样式表链接和脚本标签
在<linkrel="stylesheet"href="layout.css">和script标签中，type属性可被省略。以前，如果想使用VBScript而不是JavaScript的话，可以指定script的type属性，但是现在已经完全不需要了。
可以省略那些让我们的文档变得更长更复杂的细节，这真让人开心。但目前我们只是接触了一些表面，接下来让我们了解关于script标签的更多内容。
3.1.6 异步脚本下载
首先，让我们用一句话概括浏览器下载文件的原理。在浏览器下载和解析完HTML文档后，它会收集所有的资源（如图片、css、JavaScript等），然后按照它们出现的先后顺序进行下载。
以前，我们使用拨号上网，这种方式并不能很好地处理多个并发的请求。现在，不同带宽差异很大（特别是那些移动设备），对于每一个顶级域名，浏览器被限制一次只能请求少量的资源。
这就是为什么一些开发者使用内容分发网络（CDN）或者在子域名（如as-sets.example.com）中采用部署资源；与此同时，使用不同的顶级域名让开发人员拥有更多的下载空间去获取脚本、样式表、图片和iframes。要知道，这些都是出于性能优化的考虑！
在浏览器下载JavaScript时，它一次只下载一个，让浏览器可以更好地进行解析和预处理。现在，为了让整个体验有所改变，我们可以使用脚本加载器（如LABjs、Yepnope、RequireJS或者其他）去同时加载多个脚本，设置依赖关系，或者决定某一个脚本文件是否需要被加载。
提高页面的加载性能具有重大意义。亚马逊表明，页面的加载时间每增加100毫秒，销售量将减少1%[3]（smashed.by/amzspeed）。考虑到这一点，下面让我们看看我最喜爱的脚本加载器——Yepnope（smashed.by/yepnope）。[4]
举例说明：
yepnope([
{
test: window.JSON,
nope: '/javascripts/json2.js'
}
])
这一小段巧妙的JavaScript会检查浏览器是否具有原生的JSON解析器，对于那些没有的（如IE6/7），它会加载/javascripts/json2.js，这是一个JSONpolyfill（译注：polyfill是一段代码或一个插件，它可以让开发者使用一些浏览器原本不支持的功能）。
现在我们已经大致地覆盖了脚本加载器的一些基础内容，还谈及脚本的并行加载，那么是时候去了解script标签中的两个新属性。第一，async：
<script src="/javascripts/application.js" async></script>
async是个布尔属性，这意味着它的单独存在就代表true，或者“是的，请使用这个属性”。它告诉浏览器在application.js可用时就立即运行。那些使用了async属性加载的脚本一旦被下载完就会马上运行，也就是说，不根据它们在HTML文档中出现的先后顺序。
3.1.7 更快地下载资源文件
值得一提的是，在性能优化方面，我们所取得的最大成果是把脚本文件作为一个整体来减少他们的体积。第一种减少脚本文件体积的方法是对它们启用gzip （同样适用于样式表和HTML文件）。如果想为你的网页添加gzip支持，请在GitHub上查阅HTML5模板的Web服务器配置信息库（smashed.by/configs）。[5]
如果你还不确定你的网页的加载方式，那么是时候去熟悉一下浏览器的开发人员工具了。对于Webkit内核的浏览器（例如Safari和Chrome），你可以同时按下Command+Option+I（MAC上）或者Control+Shift+I（Windows上）来打开浏览器的开发人员工具。
在选项卡Network下面，你可以看到当前页面加载的一系列资源文件，你可以查看列表中任何一个文件的请求头和响应头。
第二种提升网站性能的方式是对你的文件进行合并和压缩（实际上对脚本文件的处理会带来最佳的性能提升）。在这里我推荐UglifyJS编译器（smashed.by/uglify）。[6]
一些聪明的人[7]像Steve Souders）已经投身于研究浏览器加载、解析和渲染网页的领域，如果你对制作一些性能良好的网站或应用感兴趣，就跟随Steve的工作吧！
3.1.8 新的语义化标签以及何时使用它们
因为我们现在谈的是HTML5，所有的话题都关于性能和脚本会显得有点奇怪。现在让我们看一下一些新的语义化标签，然后决定什么时候该使用它们。
在使用任何新标签之前，要确保已经使用了著名的HTML5 Shiv。这个脚本是必需的，因为如果没有它，IE6/7/8将会忽略所有它不能识别的HTML标签上的样式（就如HTML5 的新标签）。你可以在Google Code 上拿到HTML5Shiv的一个副本，这个项目的代码就放在上面（smashed.by/steve）。[8]
你可以使用Modernizr[9] 来获取HTML5 Shiv（译注：Modernizr 是一个开源的JS库，它使得设计师可以在支持HTML5和CSS3的浏览器中充分利用HTML5和CSS3的特性进行开发，同时又不会牺牲其他不支持这些新技术的浏览器的控制）。在这章中不涵括Modernizr，但是你确实应该去了解它，反正我最近两年做的每一个网页中都用到它了。
3.1.9 重置网页的默认样式
不同浏览器之间在赋予元素的默认样式上会有所不同，然而规范化的代码可以使得我们更好地进行跨浏览器开发和维护，因此第二件需要做的事就是使用CSS reset。
请使用那些新版的CSS reset，因为旧的那些没有对HTML5新元素的样式定义。我强烈推荐Nicolas Gallagher[10]和Jonathan Neal[11]的Normalize.css[12]。很多的旧版reset 样式（比如Eric Meyer 的经典Reset CSS）很笨拙：他们重置每一个元素，而且有些改变是值得商榷的，比如把strong标签默认设置成非粗体。相对而言，Normalize.css更加优雅地重置元素的样式，而且它还处理一些浏览器的怪异行为。它给你一个在浏览器中尽可能公平且合理的环境。Jon Neal和Nicolas Gallagher 仔细地解释这个文件所做的每一项处理。你可以阅读文件中众多的注释，那真是不可思议！
3.2 重构你的网站
到了这个点上，你可能会想，“好了，是时候开始去用那些最新和最好的标签去书写我的网站了。”其实，当那些新的语义化标签被创建时，开发者需要做一些工作去分析该赋予它们什么样的classes和ID。不过他们所发掘的那些东西的确一点都不精彩：他们总是使用一些相同的命名规则（或者是它们的细微变换）。然而，新标签的命名应该能反映出我们正在做的事情。
3.2.1 SECTION标签
section标签可被用来分隔开主页的不同部分。可能你的博客由个人资料、个人演示以及日常的文章组成，那么你可以把它们分开放入不同的section标签中：
<section class="articles"></section>
<section class="about-me"></section>
<section class="presentations"></section>
每一块都可以拥有它的头部，所以我们有理由把它们作为重要的一部分，然后根据我们的判断去让它们成为section。如果你正在写一本书（就像你现在手上拿着的这本），你可以使每一章成为一个section。然而网络上的每一样东西都与语义相关，所以不要纠结于细节上。根据你当时所能获取的最佳信息选择一个元素，然后继续你的工作。语义化是主观的，不要因为琐碎事而烦恼。
3.2.2 ARTICLE标签
当我们继续探讨HTML5时，你可能会为section和article的区别而感到困惑。可能你会猜测article标签主要用于博文和在线新闻，其实你离真实的做法已经不远了。
如果你只能记得article标签的一样东西，请记住这条经验法则：如果一个内容片段脱离了它的上下文（也就是说，假如用户看不到该内容片段周围的页面），仍然能表达出它的意思，那么它很可能就是一个article。例如，博文和在线新闻。
<section class="presentations">
<header>
<h1>My Presentations</h1>
</header>
<article>
<h2>An Introduction to HTML5</h2>
<p>A four-hour workshop that I ran around Australia.</p>
</article>
<article>
<h2>Compass and SASS</h2>
<p>Use a well-written library of CSS so that you can focus on the important things.</p>
</article>
</section>
目光锐利的读者可能会问：“那看起来像一个列表，为什么不用ul呢？”你并没有错，它完全可以是一个list元素。但是article表明的是，这些元素相似的同时，它们之间并没有关联性。事实上，我们可以为这个问题争论好几个小时；不过最后，你还是要自己做个决定。
3.2.3 HEADER标签
你是否曾经给一个网站的头部区域使用过一个class或者ID类似像mast-head、banner甚至top这样的名称？header标签远不仅仅被用于网站的头部，它还可以被用于很多的地方，比如在一个article或section里面使用，不过这完全是可选的。在你需要一个块级元素去在页面上划分一个空间来使得整体更加清晰时，你就可以使用它。比如，我经常在一篇博文的头部中写上它的标题和一些额外信息，这时我就会使用到header。
3.2.4 FOOTER标签
footer标签就跟header标签一样，你可以在article或section甚至body中使用它。
3.2.5 ASIDE标签
aside标签可被用在body下或者article里面，它的内容可被认为是一些有用但不是必需的信息。
比如，你的网站在针对移动设备的版本中，可以选择性隐藏掉aside标签。无论你如何对待它，这个标签迫使你对你的网站内容做一些决定。一篇博文的结构可以这样写：
<article>
<header>
<h1>All About Tractors</h1>
<time datetime="2012-01-01">1 January 2012</datetime>
</header>
<aside>
<p>Written entirely by Bruce Lawson</p>
</aside>
<!-- The body of the post goes here.-->
</article>
3.2.6 TIME标签
你是否在最近的代码片段中发现这个新标签？time标签的使用非常简单：用它来表示时间。同时，你也可以提供一个机器可读的版本。
<article>
<p>Published on <time datetime="1984-04-03"
pubdate>3 April 1984</time></p>
</article>
pubdate属性可被用于表示一篇文章的首次出版日期。在规范中指出，pub-date属性在一个article中应当只能使用一次。
3.2.7 NAV标签
nav这个元素明显地就是用于网站的导航。你可以用nav标签去创建一个下拉菜单，不过这个标签不适用于我先前在谈及article标签时所提到的介绍性列表。请为网站本身的结构化导航保留使用nav。例如：
<nav>
<ul role="navigation">
<a href="/products">Products</a>
<a href="/contact">Contact and Locations</a>
<a href="/about">About Our Company</a>
</ul>
</nav>
（想知道role属性的作用是什么？你需要继续往下读！）
3.2.8 FIGURE和FIGURE CAPTION标签
你可能会在你的网页中添加很多的图片。不过你是否考虑过有更好的方法去给这些图片添加标题？如果可以让一个标题清晰地围绕在它所描述的图片旁边，这不是很好吗？那么，这就是figure标签的用途。
<figure>
<img src="whisky.png" alt="A glass of whisky,
with a side of water in a small jug.">
<figcaption>A glass of whisky, with a side of
water in a small jug.</figcaption>
</figure>
不仅仅如此，你还可以将figure标签用在video、svg和更多的其他事物上，只要他们是可视，并且可被冠以一个标题来说明的。
3.2.9 DIV标签
比起所有这些新的标签，你可能会想，div是一个过去的事物。事实上，并不是如此。开发人员已经泛滥地使用了div很多年，以至于得了“divitus”的疾病（译注：divitus指不分场合地大量使用div标签）。
一个div是一个“区域”，有时候真的没有一个更好的标签去描述一块特定的内容。可能你所需要的只是一个可以添加样式的盒子，就是这样，我不怪你。语义化不仅棘手，而且难以把握。如果上述的任何一个新标签都无法恰当地描述这一块内容，那就使用div吧，这无可厚非。
3.2.10 关于语义化大纲的几句话
现在我们拥有了一些新的划分区间的元素（例如section和article），那么，以往的对于文档的简单划分方式有了一些改变。那些用于划分区间的元素本身也可被视作一个文档。换句话说，标题级别h1到h6可以在它们里面使用。不过等一下！这意味着你可能会遇到像以下这样的结构：
<body>
<header role="banner">
<h1>Full Frame: A Blog About Cycling</h1>
<article>
<h1>Early Morning Over Black Spur</h1>
...
</article>
</body>
同一个文档里有多个h1？这简直是不可思议的！相反，我在一个特定的区域里使用不同的标题级别：
<body>
<header role="banner">
<h1>Full Frame: A Blog About Photography</h1>
</header>
<article>
<h2>Early Morning Over Black Spur</h2>
...
</article>
<section>
<h2>Buy Our Book!</h2>
<section>
<h3>Print</h3>
...
<button>Purchase:$90</button>
</section>
<section>
<h3>Electronic: PDF or eBook</h3>
...
<button>Purchase:$15</button>
</section>
</section>
</body>
这样做不仅仅使得给标题添加样式时更容易，而且这看起来也更美观，不容易混淆，并且这样的做法是顺势而为。
在没有section和article这些标签作为我们的处理办法之前，我们真的只能用h1到h6去描述一个网站的不同深度或者层次结构。现在，我们可以描述到无限级别的深度和准确地表示出每一级的内容。
如果在看完这些所有之后，你还是不确定应该使用哪个标签元素，那么请到HTML5 sectioning elements[13]查阅由Oli Studholme和Piotr Petrus制定的绝妙流程图。把它打印出来，贴到墙上，然后你将知道该用哪个元素。事实上有可能如此，但我不保证。一如既往地，你可能会想验证你的HTML文档来使它符合规范，我推荐Validator.nu。[14]
3.2.11 从根本上了解WAI-ARIA的角色
WAI-ARIA（Web Accessibility Initiative: Accessible Rich Internet Applications）的角色一直是现代HTML技术的一部分，它们是如此重要，乃至提及它们时可能会使很多的网页开发人员目瞪口呆。
设计这个角色是为了让那些使用屏幕阅读器的用户更容易访问和使用网站或其他应用。任何在可访问性领域的专家（他们的人数真的是远远不够）都可以证实WAI-ARIA的重要性，然而在大多数情况下，他们都被很大程度上忽略了。
很多公司都在说可访问性有多重要，但他们对其做的研究和设计却是另外一套。然而，作为网站建设者，你的任务是使得每一个用户都买你的单。
对于盲人和弱视用户，WAI-ARIA角色描述了上下文和为他们编排这些信息的目的。一个网页的某一部分不仅仅是看上去不一样——它在内容上也不一样。屏幕阅读器软件可以为他们解释这些不同点，让他们与网页的那块内容互动，并且不错过一个细节。
我绝不是一个可访问性领域的专家，但我会尽可能给你一个有充分依据的理由，告诉你为什么WAI-ARIA的重要性远远超过可访问性。如果你曾经用过本章中提到的任何一个用于划分区间的元素，那么你可能已经遇到过类似下述的情况：
<body>
<header>
<h1>Tractors: An Interactive Guide</h1>
</header>
<article>
<header>
<h2>Tractor Maintenance</h2>
</header>
</article>
</body>
你认出它了吗？这个文档有两个header标签，而且他们都是合理使用的。那么，问题出在CSS中：
header {
margin: 0 2em;
}
这个元素选择器对两个header都起到了作用。虽然我们可以使用一个子选择器（如body>header），但是这样的处理感觉有点重，而且没有提及这个顶级的header应是整个网站的开头。这里，出于便利，我们可以简单地使用一个WAI-ARIA角色，方法是添加role="banner"到HTML文档中。
<body>
<header role="banner">
<h1>Tractors: An Interactive Guide</h1>
</header>
<article>
<header>
<h2>Tractor Maintenance</h2>
</header>
</article>
</body>
这个role 属性声明<header role="banner"> 是一个“全局”元素，它里面包含的内容适用于整站，而不仅仅是当前网页。这是一个不错的选择，同时由于是一个简单的属性选择器，我们可以比较容易地给它添加样式：
header[role="banner"] {
margin: 0 2em;
}
因为header标签和footer标签可被用在很多地方，因此我们似乎缺少一个专门用于表示主要内容的标签。幸运的是，ARIA role 在这件事情上已经有所准备。
通过给 article 添加 role= " main "（例如，<article role="main" >），我们可以很容易地辨别出当前文档的主要内容是包含在article里面。（你可能在上述的片段中已经意识到，h1是用在顶级标题中，h2是用在次级标题中。结合起来看，这一切完美地描述了文档的层次结构）。
你可能已经开始被这种方法的优雅所迷倒。网页内容的描述变得更加详细，而且我们可以以最小的影响范围对新标签添加样式。ARIA的第三个role是contentinfo，它经常被用于版权信息、隐私声明，以及当前网页或网站的概括内容。
最后，ARIA的第四个role，非常有用且被大家所熟知的，就是navigation。它可以从老式的普通链接列表中容易地区分出导航区域。给网页添加ARIA角色是一个很好的方法去使已经存在的网站内容和上下文变得更加可读和有语义。日后，当你决定彻底重构你的网站时，你可以去使用那些新标签。
但愿这么简短的一个介绍可以帮助你了解到语义化内容为每一个人带来的好处。其中ARIA角色就是这样一个极佳的例子。
3.3 本地储存
现在我们讨论一个全新的事物：HTML5本地存储。至今，对于本地存储，我们已经有了一些选择。最普遍的莫过于简陋的基于cookies的session，但是cookies的存储方法被许多问题所困扰，其中最伤脑筋的是这些。
• 会话中存储的数据在每个请求的过程中都会在客户端和服务器端之间来回传输。
• 存储数据的大小在4KB以内。
• 所有的cookies数据都会过期。
尽管这样，cookies也并排一无是处。cookies可以保存用户的登录状态，以及帮助服务器识别用户的身份。然而，很显然，我们需要另外一种方式来保存数据。幸运的是，在本地储存这个问题上，我们的确拥有一个绝妙的解决方案。它是什么？我很高兴你问了这个问题。
因为有localStorage和sessionStorage，我们具备了两套在浏览器中保存文本字符串的Javascript API。SessionStorage 保存的数据会在用户会话结束后清除（比如浏览器的标签页或者浏览器本身被关闭），而localStorage保存的数据则会一直保留下来，直至开发者（通过调用javascript的某些接口）或用户（通过浏览器的某些设置）决定清除它们。这两个API实质上是相同的，唯一的不同就是它们所保存数据的生存期长短。
在一个现代浏览器（比如最近三年内发布的一个版本）中打开你的开发人员工具栏，输入localStorage.setItem(“name”,”Ben”)。如果在Webkit内核的浏览器中，你就会在“Resources”标签栏（还需要展开“LocalStorage”）看到我的名字被保存在里面。就在刚刚，你已经保存了你的第一个item到localStorage里了。
现在，让我们用localStorage.getItem(“name”)来取回刚才保存的东西。你应该看到“Ben”被整齐地打印在console面板中。最后，需要清理这些数据，我们可以用localStorage.deleteItem(“name”)来删除我的名字或者用localStorage.clear()来清除localStorage里面的所有内容。当用户调用lo-calStorage.clear()时，其实删除的只是当前域下的数据。因此，如果用户在example.com下保存了一些数据，当切换到google.com的tab页时，他们会发现并不能获取得到他们在example.com的tab页下保存的数据。
LocalStorage的API非常有用。假如你正在构建一个Twitter的客户端，它需要完成以下功能。
• 在你的PC浏览器和手机上使用。
• 在线的时候，查看最新的推文。
• 离线的时候，把推文放入队列中以便日后发布。
使用localStorage，这一切完全可能实现。下面的代码片段为你演示了这个过程。（这纯粹是用来表示大意的，因此请不要纠结于一些小细节。）
postTweet = function(tweetText) {
//Check if we’re online
if(navigator.onLine) {
//Hey, we’re online! Send that tweet, baby!
} else {
//Hm, we aren’t online right now.Better store it for another day.
localStorage.setItem("queue-" + +new Date(),tweetText)
}
}
这并不复杂，对吧？如果要查看localStorage中保存的所有数据，我们可以遍历它，就像处理一个数组：
for (item in localStorage) { console.debug(item) }
这样会打印出所有你保存的数据的键列表。假如你想显示出你的推文队列，那么你将这样做：
for (item in localStorage) { console.debug(localStorage[item]) }
localStorage和sessionStorage的API可以在所有的现在浏览器（包括IE8+）中使用，因此，你没有理由不马上开始构建你自己的应用，或者在本地应用中利用它们做点新的尝试。
小结
在你彻底改造你的网站之前，花点时间去学习下ARIA角色和浏览器性能，以及整体地思考一下如何构架代码。使用一个新标签只可以让你觉得爽，而用上ARIA role 则会使很多人觉得爽。这听起来有点像作诗，但事实上就是这么简单：这是你的工作。
开始使用新技术时，不要觉得你一定要使用最新的简化版DOCTYPE，浏览器会尽其所能去解析你的网页。并没有什么“HTML5模式”，因此你也可以参与其中。
这只是在一个我们称为HTML5的平台上做的一些尝试。我们可以持续讨论这个话题好几天，而最终，我们还是决定留下一些参考文献让你加入到书签中。
• HTML5 Please,html5 please.us
想知道什么时候你需要升级那些老版的浏览器？或者什么时候当一个非常新的标签还不适合在当前时期使用？这个网站会告诉你这方面的基础知识，让你上升一个档次。
• HTML5：A Technical Specification for Web Developers,smash ed by/whotwg
这本指南是完整HTML5规范的一个简短版本。它去掉了所有那些浏览器厂商用于搭建浏览器的繁重细节。它可检索，也可运作于移动设备上（甚至离线状态），它确实是由你们所创造的。
• HTML5 Rocks,html5rock.com
这个网站是Google的员工维护的，几乎每一篇文章不仅具有启发性，而且是令人兴奋的。
• HTML5 Doctor,html5doclor.com
先不说这个网站上的文章是由一群了不起的家伙所撰写的，HTML5 Doctor研究的深度无人能比。这是一个不可多得的资源。
我是一个善于说出大名鼎鼎的事物的人；在整一章中，我一直在提及很多著名的人，如同无人能敌一般。但是，我并不是没有理由的。我提及的那些人或网站都是这个领域的领军人物。我强烈建议你关注他们的Twitter或者Google+，订阅他们的博客或者给他们买瓶啤酒。如果想学习更多的互联网知识，没有比建立一个强大的在线交流社区更好的方法了。最后，我将让你开始重构你的网站。祝你好运！
关于作者
Ben Schwarz 通过使用标准技术设计出尖端的网络应用，以此来支撑他对美食（在家）和日本米酒（在酒吧）的热爱。更重要的是，他疯狂地渴望着创造出的不仅仅是优雅的代码，还是用户手中令人惊叹的软件。他同时也是Ruby Australia的委员之一，他在2011年12月份作为一个受邀专家加入到W3CCSS 工作小组。
关于译者
Tyson Pan 毕业于广东外语外贸大学，现就职于腾讯，从事Web前端相关工作。他在HTML5方面和移动终端有一定的研究，平时喜欢做些新的尝试，追求实在而简洁的代码，微博是http://weibo.com/u/1800323474。
注 释
