所有 Microformats 都是标准化的 ID 和 Class 名称,用于包装数据。 真的,就是这样。
假设您下周要举办生日派对,并且您要在网上发布有关派对的信息。 此事件有一个名称(生日派对!),一个地点(Chuck E. Cheese!),一个时间(晚上 6:00-9:00),以及一些额外的细节(不要带礼物)。 有很多种方法可以以语义方式在网络上呈现此信息。 该事件可以是使用 DL 和 DT 的定义列表。 您也可以使用非常常见的标题和段落标签。 Microformats 提出的建议是,不要使用这些标签,而是使用一组称为 hCalendar 事件的特定标准化标签。
这是一个 hCalendar 事件的示例:
<div id="hcalendar-Birthday-Party" class="vevent">
<abbr title="2008-09-19T06:00Z00" class="dtstart">September 19, 2008 6</abbr> –
<abbr title="2008-09-19T09:00Z" class="dtend">9am</abbr> :
<span class="summary">Birthday Party</span> at
<span class="location">Chuck E. Cheese</span>
<div class="description">No gifts</div>
</div>
这非常不错,因为它仅使用非常通用的包装器来包装所有数据。 大多数网站不会直接对非常通用的元素(如 div 和 span)应用任何样式。 因此,您有机会使用提供的类名来匹配您网站的样式。
让我们创建一个简单的“名片”网站,该网站具有功能完备的 Microformats“hCard”。 创建您自己的 hCard 的最简单方法可能是使用 Microformats 网站本身的 hCard 生成器。
我的看起来像这样:
<div id="hcard-Chris-Coyier" class="vcard">
<a class="url fn" href="http://chriscoyier.net">Chris Coyier</a>
<div class="org">CSS-Tricks</div>
<p><a class="email" href="mailto:[email protected]">[email protected]</a></p>
<div class="adr">
<span class="locality">Portland</span>,
<span class="region">OR</span>
</div>
</div>
由于 hCard 完全包装在一个 div 中,如果需要,我们实际上可以使用 CSS 针对它并用图像替换整个东西(CSS 图像替换)。 这正是我在演示页面上所做的。 我只是想表明使用 Microformats 不会以任何方式将您锁定在任何特定样式中。
请注意,在演示中,小卡片是可点击的,可以下载我的 vCard。 vCard 是地址簿软件(例如苹果的地址簿)的标准文件格式。 hCard 是基于该标准的 Microformat。 是的,这有点令人困惑…
那么您在网站上使用了 Microformats。 那又怎样呢?
老实说,这可能不是什么大不了的事…… 至少,您可以把它看作“做正确的事”。 每天,您都可以看到现在已被广泛采用的网络标准所能实现的可能性的证据。 想象一下,如果所有数据都迁移到标准化格式,我们还能做些什么。
但作为早期采用者,也有一些很酷的优势。 Remy Sharp 两年前的 Microformats 书签工具 今天仍然很酷。 您所要做的就是将其拖到您的书签栏中,然后单击以在任何页面上激活它。 它会在页面上查找所有 Microformats,并为您提供一个不错的模态窗口来下载它们。 这是将人员添加到地址簿、将事件添加到日历等超级快速的方法。
更多信息
Tails Firefox 扩展: 非常棒的小型 Firefox 插件。 自动检测 Microformats,并在底部栏中显示一个小图标。 单击它以打开一个用于查看/导出它们的侧边栏。
非常棒!
另一个很棒的 Firefox 扩展是 Operator。
感谢您发布有关 Microformats 的信息! 我喜欢 Microformats,以及使用普通的旧 HTML 而不是像 RDF 或 Dublin Core 那样复杂的、令人困惑的、过度设计的 XML 模式,为我们的数据添加语义的能力。
您还应该在“那又怎样?”部分中提到,在您的网站中使用 Microformats 使您的信息非常易于机器读取,并且为一些非常酷的混搭打开了大门。
想象一下,一个日历聚合器可以爬取您所在城镇的所有博客(和推文?),并将所有事件整合到一个中央日历中。 如果事件以自由格式文本发布,则这种操作非常难以编码,但如果每个人都使用 hCalendar,则将轻而易举!
附注:我上面提到的类似功能已经存在于波特兰(http://calagator.org/),但如果 Microformats 得到更广泛的采用,它可以变得更好,并且需要更少的人力。
Microformats 很酷,但不一定代表“正确的事情”。 RDFa 是用于语义标记的类似标准(并且是 W3C 推荐的标准)。 雅虎! 已经开始根据 RDFa 进行索引。
在 Sitepoint 上有一篇 非常有趣的文章 探讨了这些问题。
我一直想在我的作品集网站中添加 hCard Microformat,感谢您的信息!
很高兴看到其他人发布有关 Microformats 的博客文章(它们是我的最爱)。 还有一些需要补充的内容
1. Microformats 规范本身并没有真正包含标记。 正如您提到的,关键是类(而不是 ID)。
Microformats wiki 上的示例包括您用作示例的内容,但您实际上仍然可以根据自己的意愿(理想情况下是语义的)对内容进行标记。
您仍然可以使用 <dl> 或 <hx> 与 <p>。 事实上,有一些方法可以使用“自然语言”来 指定 Microformats
2. 关于 RDFa 与 Microformats 之间的争论,现在判断哪一个更好还为时过早。 两者都有价值。
Microformats 存在一些局限性,但它是一个面向人和机器的可读数据的开放且不断发展的规范。 人们仍在开发工具并实施这种方法,尤其是在使用 rel 属性的 XFN 和基于链接的关系方面。 看看大多数社交网络/媒体网站就行了。
RDFa 也存在一些局限性:它无法在 text/html 中工作(而网络在很大程度上仍然是(X)HTML)。 有消息称 HTML5 可能会解决后一点。 并且有一些解析器可以使其工作。
但是,从根本上讲,两者都不完美,但两者都致力于更语义化的网络,这将使每个人受益,无论我们如何实现这一目标。
需要的是两者之间的某种融合。 并且让更多人编写和讨论 Microformats(和/或 RDFa)以及开发利用两者提供的上下文信息提供的工具和应用程序。
有趣的文章。 标准化始终是一件好事。
对于所有使用 Safari 的人,这里有一个很棒的小型 Microformats 插件:
http://zappatic.net/safarimicroformats/
我一直听说 Microformats,但从来没有真正了解为什么要使用它们,或者它们到底是什么,但这真的让事情变得更清晰了。 谢谢。
http://hcard.geekhood.net/ - hCard 验证器
对我来说,这完全是新东西。 感谢您解释这些内容,变得更加清晰了!
就我个人而言,我更喜欢让最终用户轻松地下载 vCard,而无需依赖书签工具或特定于浏览器的扩展。 我发现的一个巧妙技巧是,如果您只是链接到:http://technorati.com/contacts/<your 联系页面 URL>,则会自动生成并下载 vCard 供最终用户使用(当然,前提是您在联系信息中使用了 Microformats)。
(示例:http://technorati.com/contacts/http://simplebits.com/contact/)
我在自己的网站的联系页面以及许多客户的联系页面上使用了此功能。
@Rev. Mitcz: 这真是一个巧妙的技巧! 完全适用于我的联系页面
http://technorati.com/contacts/http://chriscoyier.net/contact
@ Chris
当我从您提供的链接下载您的 vCard 时,它可以正常下载到我的桌面,但无法导入 Mac 地址簿。仅供参考。
我仍然喜欢将图像链接到 CSS 的想法,就像您上面描述的那样,我只是不知道如何在 WordPress 页面上实现它。