什么是TEAP? TEAP,Turingbook Early Access Program,即图灵在译新书的试读样章。一本书的翻译周期约为3到6个月,在这么长时间内,译者与读者没有沟通和交流是一件不可想象的事儿。TEAP 模仿的是 Manning 的 MEAP,事先公开未经编辑的内容,读者可以提前阅读将来才能出版的内容,同时译者也能收获宝贵的反馈意见,以便改进翻译,提高质量。本文节选自《HTML5秘籍》第3章3.2节。

通过标记巧妙地表达语义并不是什么新点子。事实上,早在HTML5还是一个幻想,存在于WHATWG编辑Ian Hickson的大脑中的时候,就有非常多的Web开发人员大声疾呼,要求为他们提供有意义的标记。他们的目标也不尽相同,有些人希望提高无障碍性,有些人打算要进行数据挖掘,而还有一些人仅仅是希望自己的简历多一个闪光点。不过,所有这些人在标准HTML语言中都找不到自己的想要的标记。由此,一些新标准的应运而生也就不足为奇了。

接下来几节,我们介绍4种这样的标准。首先,就是ARIA,它致力于提升屏幕阅读器中的无障碍性。其次,我们要看一下另外三种并存的手段,它们用于描述不同的内容,比如联系人、地址、企业名录,或其他各种HTML页面可能出现的内容。

3.2.1 ARIA

ARIA(Accessible Rich Internet Applications,无障碍富因特网应用)是一个还在制定中的标准,它规定了在任意HTML元素上使用的属性,而通过这些属性可以为屏幕阅读器提供额外的信息。例如,ARIA中规定了一个role属性,表示所在元素的用途。下面就以一个表示页眉的

元素为例:

<div class="header">

通过为其指定值为bannerrole属性,可以告诉屏幕阅读器它的用途是保存横幅图片。

<div class="header" role="banner">

当然,我们上一章刚刚学过,HTML5为标注页眉提供了一个语义元素。因此,这时候最合适的方式莫过于:

<header role="banner">

这个例子说明了两方面问题:首先,ARIA规定了一些推荐的角色名。(要了解所有角色名,请参考规范中相应的部分:http://www.w3.org/TR/wai-aria/roles#landmark_roles。)其次,部分ARIA与新HTML5语义元素重复——这是合情合理的,因为ARIA早于HTML5。不过,重复也不是完全重复。比如,有些角色名在HTML5中确实也出现了(像“banner”和“article”),而有些则可能在将来才会出现(如“toolbar”和“search”)。

ARIA还针对HTML表单定义了属性。文本框的aria-required属性表示用户必须输入值。而文本框的aria-invalid属性表示当前值不正确。这些属性可以让屏幕阅读器用户,特别是的视力不好的用户,不会因为看不到提示信息(比如必填字段旁的星号,或闪烁的红色错误图标)而受影响。

为了恰当地采用ARIA,需要学习标准,也要花时间评审自己的标记。对于是否值得为此投入,Web开发人员的看法各一。因为这个标准尚未制定完成,而HTML5又提供了一些类似的语义元素,且用起来省事儿不少。不过,假如你真的想创建一个可以无障碍访问的网站,必须既考虑ARIA,又要考虑HTML5。因为屏幕阅读器支持ARIA,不支持HTML5。

注意 要了解有关ARIA(全名是WAI-ARIA,因为它是由Web Accessibility Initiative工作组负责制定的)的更多信息,请参考其规范:http://www.w3.org/TR/wai-aria/。

3.2.2 RDFa

RDFa(Resouce Description Framework,资源描述框架 )也是一种使用属性向网页中嵌入详细信息的标准。与本章讨论的其他方式不同,RDFa有一个明显的优点:它是一个稳定、不变的标准。RDFa也有两个明显的缺点:一是复杂,二是针对XHTML而非HTML5。换句话说,嵌入RDFa元数据后的网页比最初要长得多,而且显得很笨重。目前,不少极为聪明的网站开发人员也想出了一些好办法,让我们能够在HTML5中使用RDFa。可是,毕竟它植根于更严格的语法和无法变通的XML规则,所以也有可能不会对HTML5产生太大影响。

本章不会详细讨论RDFa,不过假如你希望了解更多信息,可以在Wikipedia上看到完整的介绍:http://en.wikipedia.org/wiki/RDFa。或者,也可以参考3.1节介绍的Google Rich Snippets,其中所有示例都有对应的RDFa版本。

3.2.3 Microformats

Microformats是一种在网页中嵌入元数据的简单而又比较合理的方式。Microformats并没有想成为任何官方标准。相反,它只是对一组统一的约定进行了宽松地描述,这些约定有助于网页之间共享结构化信息,但又不会导致像采用RDFa那样复杂。Microformats因此获得了巨大的成功,谷歌最近的一次调查显示,在包含元数据的页面中,有94%都基于Microformats。

注意 读者可能会想,既然Microformats如此受欢迎,那么语义Web之战似乎已经分出胜负了。但事实上并没有这么快,且听我细说缘由。首先,绝大多数网页根本没有包含任何语义数据。其次,那些使用Microformats网页,大多数都只将其用于两个用途:联系信息和活动列表。第三,Microformats的简单有可能阻碍它在更先进任务中的应用,特别是HTML5流行起来之后。不过,虽然Microformats不会很快就无处不在,但显然是不能忽略它的。

在标记数据之前,首先要选择要使用的微格式。最常用的微格式不过几个十而已,且其中大部分还在调整和修订中。要了解可以使用哪些微格式以及相关的用法说明,请参考这里:http://microformats.org/wiki。不过,下面我们还是要介绍两个最常见的微格式:hCard和hCalendar。

1. 使用hCard标注联系信息

hCard是一种针对联系信息而设计的通用微格式,可用于人、公司、组织或某一地点的联系信息。根据最新统计,W eb上包含20多亿的hCard,因而它当之无愧地成为迄今为止最流行的微格式。

Microformats的应用方式比较新颖,它们附加在通常用于添加样式的class属性上。你可以根据数据的类型,使用某些标准的样式名来标注数据。然后,其他程序可以读取你的标记,提取数据并通过检查class属性来确定数据的含义。要创建hCard,需要找一个根元素,为其class属性指定vcard值。在这个元素内部,至少要包含一个格式化的名字,这外名字必须包含在另一个元素中。内部的这个元素的class属性值必须是fn。比如下面就是按要求写的一段标记:

<div class="vcard">
    <div class="fn">Mike Rowe Formatte</div>
</div>

在通过class属性来应用微格式的时候,不用考虑为该类名创建匹配的样式。(事实上,这样做只会带来麻烦。)相反,此时的类名完全用于不同的用途,即告知外界你标注的数据具有良好的格式和特定的含义。

尽管hCard只需要一个名字,但多数情况下它要包含更多细节,比如邮政编码、电子邮件、网站URL、电话号码、生日、头衔、组织名称,等等。只要使用的类名正确,就可以在vcard元素中以任意顺序包含这些信息。请看下面的例子,其中重要的类名都加粗了。

<div class="vcard">
    <div class="fn">Mike Rowe Formatte</div>
    <img class="photo" src="face.jpg" alt="Mike's Face">
    <div class="title">Web Developer</div>
    <div class="org">The Magic Semantic Company</div>
    <a class="url" href="http://www.magicsemantics.com">www.magicsemantics.com</a>
    <div class="tel">641-545-0234</div>
</div>

提示 要了解所有受支持hCard属性,请参考http://microformats.org/wiki/hcard。

好了,前面的例子展示了怎么从头开始创建与hCard微格式匹配的标记。不过,更常见的情况可能是改进已有的网页,为其添加微格式。比如,有一个页面中包含联系信息,你想把其中的信息标注起来,以便理解hCard微格式的程序能够访问这些信息。这个任务相当简单,只要按照下列提示做即可:

  • 通常,有些重要的数据会混在一些不需要标注的内容里。此时,可以为这些重要的数据分别添加新元素。如果想用块级元素,就使用<div>;如果想用行级元素,就使用<span>
  • 不用担心其他带有不同类名的元素。在读取微格式时,程序会忽略所有带非标准类名的内容。
  • 如果要在微格式中添加照片,可以使用<img>元素;如果要添加链接,可以使用<a>元素。剩下的工作,无非就是为一些普通文本添加标记而已了。

下面就来看一个典型的例子。想象一下,你打开了一个“About Me”页面(如图3-3所示),其中包含如下内容:

<h1>About Me</h1>

<img src="face.jpg" alt="Mike's Face">
<p>This website is the work of <b>Mike Rowe Formatte</b>.
His friends know him as <b>The Big M</b>.</p>

<p>You can contact him where he works, at
The Magic Semantic Company (phone
641-545-0234 and ask for Mike).</p>

<p>Or, visit him there at:<br>
42 Jordan Gordon Street, 6th Floor<br>
San Francisco, CA 94105<br>
USA<br>
<a href="http://www.magicsemantics.com">www.magicsemantics.com</a>

enter image description here

图3-3:包含作者信息的“About Me”页面

以下就是使用微格式之后的标记:

<h1>About Me</h1>

<div class="vcard">
    <img class="photo" src="face.jpg" alt="Mike's Face">
    <p>This website is the work of
    <span class="title" style="display:none">Web Developer</span>
    <b class="fn">Mike Rowe Formatte</b>.
    His friends know him as <b class="nickname">The Big M</b>.</p>

    <p>You can contact him where he works, at
    <span class="org">The Magic Semantic Company</span> (phone
    <span class="tel">641-545-0234</span> and ask for Mike).</p>

    <p>Or, visit him there at:<br>
    <span class="street-address">42 Jordan Gordon Street, 6th Floor</span><br>
    <span class="locality">San Francisco</span>,
    <span class="region">CA</span>
    <span class="postal-code">94105</span><br>
    <span class="country-name">USA</span><br>
    <a class="url" href="http://www.magicsemantics.com">www.magicsemantics.com
    </a>
</div>

这个例子涉及了几个技巧。

  • 为添加vcard而新增了<span>元素;
  • 在合适的元素上添加了class属性。比如,既然有了包含名字信息的<b>元素,就没有必要再添加多余的<span>元素了。(当然,你可以这样做。比如,如果你既想应用格式又想标注名字,同时又想让样式表与微格式保持分离,那可能会写成这样:<b class="KeywordEmphasis"><span class="fn">Mike Rowe Formatte</span></b>。)
  • 使用隐藏的内容指出了人的头衔(是一位Web开发人员)。这个信息没有必要显示在页面上,因为通过这句话就能看出来了:“This website is the work of….”(本网站由……开发)。不过,这个技巧还是有争议的,因为某些工具(如谷歌)会忽略页面中不显示的信息。

既然都费劲地做了这么多,下面就该看一看这样做有什么好处了。尽管没有浏览器能识别微格式(至少在本书写作时还没有),但有很多插件和脚本可以赋予浏览器这种能力。如何利用这些微格式?不难想象。比如,浏览器可以检测页面中的hCard,将其中的信息列在一个面板中,同时给你一个命令,让你能像收藏页面一样把某个人的联系信息添加到地址簿中。在这里可以找到支持微格式的浏览器插件:http://microformats.org/wiki/browsers。

Oomph(http://oomph.codeplex.com/)就是这样一个工具,可以将它作为一个插件安装到Internet Explorer中。然后,Oomph就会从你访问的页面中搜索三个微格式:hCard(联系人信息)、hCalendar(活动列表)和hMedia(图像、音频和视频)。如果它找到某个微格式,就会在窗口左上解添加一个小图标(见图3-4)。单击这个图标,就能看到它找到的联系人、活动和媒体文件,以及相应的链接。

P93图

图3-4:上:图标表明Oomph至少找到了一种微格式;下:单击图标,可以看到完整的信息,包括显示相应地理位置的地图和一个将联系人信息快速转移到电子邮件地址簿中的选项。如果页面中包含多个微格式,也可以看到让你查看hCard、hCalendar和hMedia的链接。

不过,Oomph真正有意思的地方在于,还有另一种方式使用它,即通过JavaScript库。在这种情况下,你所要做的就是在页面中引用相应的脚本:

<head>
    <meta charset="utf-8">
    <title>hCard Example</title>
    <script src="jquery-1.3.2.min.js"></script>
    <script src="oomph.min.js"></script>
<style>

这样,所有访问你页面的人,无论使用什么浏览器,都可以通过弹出的微格式按钮来增强体验。实际上,图3-4中的谷歌Chrome就是这样来利用微格式的。有兴趣的读者可以到http://www.prosetech.com/html5试一试。

注意 我们应该把Oomph看作一个概念验证,它展示了可以利用微格式能做什么,但不能把它当成真正的工具来用。微格式将来最好是能整合到浏览器中,就像IE、Firefox、Safari中的RSS一样。比如,在通过Firefox访问某个博客时,它会自动检测RSS源,并允许你创建一个“活的”书签。类似这样的功能,正是可以利用微格式的最佳途径。

2. 使用hCalendar标注活动

流行程度仅次于hCard的是hCalendar,它是标注活动的一种简单方式。比如,可以使用hCalendar标注约会、会议、假日、产品发布时间、商店开业时间等。目前,Web上有数千万的网页中有hCalendar活动。图3-5展示了一个例子。

enter image description here

图3-5:Facebook的所有活动页面都使用hCalendar微格式标注活动,使用hCard微格式标注地点。这样,用户就可以通过Operator(https://addons.mozilla.org/zh-CN/firefox/addon/operator)等浏览器插件从页面中提取详细信息。

在创建了第一个hCard之后,理解hCalendar就没有什么困难了。首先,需要把活动列表包装在一个元素中,将这个元素的class属性值设置为vevent。在这个元素内部,至少要包含两段信息:开始日期(使用类名dtstart)和说明(使用类名summary)。此外,也可以选择http://microformats.org/wiki/hcalendar中列出的其他可选的属性,包括结束日期工持续时间、地点,以及包含更详细信息的页面URL。下面来看一个例子:

<div class="vevent">
    <h2 class="summary">Web Developer Clam Bake</h2>
    <p>I'm hosting a party!</p>
    <p>It's
    <span class="dtstart" title="2011-10-25T13:30">Tuesday, October 25,
    1:30PM</span>
    at the <span class="location">Deep Sea Hotel, San Francisco, CA</span>
    </p>
</div>

在格式化日期时,必须使用3.1.1节介绍的通用日期格式。不过,也有一个折中的方案,即通过title属性提供计算机可以理解的日期信息,然后在页面中显示任何格式的日期。遗憾的是,目前微格式还不能自动使用HTML5 元素的datetime属性中的信息(稍后就会介绍到,微数据标准解决了这个问题)。

3.2.4 Microdata

Microdata(微数据)是尝试解决语义标记问题的另一种选择。它最早是HTML5规范的一部分,后来分离出来成为一个独立的标准:http://dev.w3.org/html5/md/。微数据采用的方法与RDFa类似,但简化了一些。另外,与微格式不同,它使用自己的属性,因而不存在与样式表规则冲突的风险(也不会让Web开发人员感到困惑)。这种设计意味着微数据更讲究逻辑性,而且更容易改编为适合你网页的语言。不过这一切是以牺牲简洁性为代价的,采用微数据的网页要比采用微格式的网页大很多。

注意 作为最新的语义标准,在HTML5兴起的这一波浪潮中,微数据是可以乘势而上,还是为其他既定的标准让路(比如以简洁见长的微格式和以满足复杂需求为目标的各种RDFa应用形式),目前还不明朗。但无论如何,学习微数据还是值得的。下一节我们将会介绍,谷歌已经支持微数据,而且让它看起来很像RDFa。这样,无论将来哪个标准流行,你都可以顺畅地切换过去。

在标注微数据的时候,首先要给相应元素(如果连元素也需要新添加,那

元素从逻辑上更像一个容器)添加itemscope和itemtype属性。其中,itemscope属性表示开始一段新的语义内容,而itemtype属性表示内容中包含的数据类型:

<div itemscope itemtype="http://data-vocabulary.org/Person">
    ...
</div>

标识数据类型时,要使用一个叫XML命名空间的预定义的、独一无二的字符串。在这个例子中,http://data-vocabulary.org/Person就是XML命名空间,其中定义了用于编写联系人信息的数据格式。

XML命名空间一般是URL形式的。有时候,在浏览器中打开相应的URL,可以看到对相应数据类型的说明(就像你打开http://data-vocabulary.org/Person一样)。不过,XML命名空间不一定非要在网上有对应的页面,甚至不必是URL形式。换句话说,是什么形式,完全取决于创建相应格式的人。URL形式的好处是利用个人或公司的域名,从而确保命名空间的唯一性。这样,就不应该有其他人使用同一个命名空间来创建不同的数据格式,也就避免了混淆。

定义完容器元素后,就可以开始下一步了。在容器元素内,使用itemprop属性来标注重要信息。这种方式与微格式的基本规则相同——通过公认的itemprop名称,其他软件可以从关联的元素中取得信息。实际上,微数据与微格式最重要的不同,就是微数据标注元素时使用itemprop属性,而不是class属性。

<div itemscope itemtype="http://data-vocabulary.org/Person">
    <span itemprop="name">Mike Rowe Formatte</span>.
    ...
</div>

微数据与微格式相比,结构上可以更复杂一些。例如,微数据的一种数据类型可以嵌套另一种数据类型。就说联系人信息吧,你可以在其中嵌入几条地址信息。从技术上讲,所有地址信息都由一个数据类型定义,而这个数据类型则通过一个不同的XML命名空间来标识。因此,需要另外用一个

元素,并为其指定itemscope和itemtype属性,如下所示:

<div itemscope itemtype="http://data-vocabulary.org/Person">
    ...
    <span itemprop="address" itemscope
    itemtype="http://data-vocabulary.org/Address">
        <span itemprop="street-address">42 Jordan Gordon Street,
        6th Floor</span><br>
        <span itemprop="locality">San Francisco</span>,
        <span itemprop="region">CA</span>
        </span>
</div>

知道了这个规则,我们可以使用微数据来改进之前的“About Me”页面(见3.2.3节)。以下是最终的结果,修改的地方都加粗了:

<h1>About Me</h1>

<div itemscope itemtype="http://data-vocabulary.org/Person">
    <img itemprop="photo" src="face.jpg" alt="Mike's Face">
    <p>This website is the work of
    <span itemprop="title" style="display:none">Web Developer</span>
    <b itemprop="name">Mike Rowe Formatte</b>.
    His friends know him as <b itemprop="nickname">The Big M</b>.</p>

    <p>You can contact him where he works, at
    <span itemprop="affiliation">The Magic Semantic Company</span> (phone
    <span itemprop="tel">641-545-0234</span> and ask for Mike).</p>

    <p>Or, visit him there at:<br>
    <span itemprop="address" itemscope
    itemtype="http://data-vocabulary.org/Address">
        <span itemprop="street-address">42 Jordan Gordon Street,
        6th Floor</span><br>
        <span itemprop="locality">San Francisco</span>,
        <span itemprop="region">CA</span>
        <span itemprop="postal-code">94105</span><br>
        <span itemprop="country-name">USA</span><br>
    </span>
    <a itemprop="url" href="http://www.magicsemantics.com">www.magicsemantics.
    com</a>
</div>

读者可能注意到了,这个例子与前面hCard的例子很相似。尽管属性名从class变成了itemprop,但属性的值却几乎相同(不同的只有fn变成了name,org变成了affiliation)。如果你熟悉RDFa,甚至会发现更多一致之处,因为微数据和RDFa使用的都是http://www.data-vocabulary.org/Person/数据格式。

注意 这三种富语义数据标准——RDFa、微数据和微格式——很多地方都是相似的。虽然它们不完全兼容,但使用其中一种标准的技能,多数情况下都适用于其他标准。

微数据有一个明显的缺陷:还没有任何浏览器插件或者JavaScript脚本从页面中提取这些数据。不过,微数据对于增强网页搜索效果还是很有用的,而这正是下一节要介绍的主题。

(完)