New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

初试微格式:为网页添加 hCard #7

Open
cssmagic opened this Issue Feb 27, 2016 · 0 comments

Comments

Projects
None yet
1 participant
@cssmagic
Owner

cssmagic commented Feb 27, 2016

说到 “微格式”,有人力捧,有人质疑。归根结底,我觉得还是浏览器和终端设备的支持没有跟上,没有形成一个完整的应用流程。尽管如此,Yahoo、Google 等行业巨头已经开始在各自的主流产品中应用微格式。而作为网站开发者和个人站长,你对 “微格式” 的应用仍在观望之中吗?

其实,微格式并不复杂,它离我们也并不遥远。不妨现在就行动起来,试试在网页中添加微格式吧!

在我看来,微格式最主打的应用非 hCard 莫属。所以本文将着重介绍一些 hCard 的应用经验。

vCard/VCF

在讨论 hCard 之前,有必要先介绍一下 vCard。

vCard 是电子名片的文件格式标准,它可以存储联系人的姓名、公司名称、职位、电话、地址、电子信箱、网站等信息。vCard 的文件扩展名通常为 .vcf,一个简单的 VCF 文件看起来通常是这个样子的:

BEGIN:VCARD
VERSION:2.1
N:Michael;Jackson
TEL:13912345678
END:VCARD

虽然对普通网友来说,VCF 文件似乎并不常见,但事实上它已经在众多领域得到了广泛的支持和应用。

我第一次接触到 VCF 文件是在整理手机通讯录时。当时我需要将手机中的通讯录转移到新手机中,我下载并试用了一些相关的工具软件,比如 PC 端手机管理软件 NOKIA PC Suite 与 Oxygen Phone Manager、通讯录管理软件 Outlook/Outlook Express、手机端通讯录备份工具 SmartVCard 等等。我发现所有这些软件都 “不约而同” 地支持 VCF 格式,NOKIA Symbian S60 智能手机甚至原生支持在手机端导入/导出 VCF 文件。

hCard

再来看看 hCard。我们知道 hCard 是一种微格式,通常应用在 HTML 等语言中,主要用于组织并标记网页中的联络信息。hCard 直接采用 vCard 的属性名称作为自身的标记规则,这意味 hCard 与 vCard 有着天生的兼容性。这些特性令它成为最受关注的微格式应用。

和其它微格式一样,hCard 对网页的浏览者是完全透明的。hCard 使用 HTML 标签的 class 属性来对数据进行标记。有时,当 HTML 文档中现有的标签不足以进行细致的标记时,可能需要增加额外的标签(通常是不影响网页外观的 <span><div> 标签)。关于在网页中添加 hCard(或将 vCard 转换成 hCard)的具体方法,我不打算在此赘述,因为网上已经有了非常详尽的参考资料,我会将它们列在本文的末尾。

在何处添加 hCard

在网页的什么地方添加 hCard 呢?其实从它的用途可以看出,网页中凡是涉及到个人、网站或公司的联系信息都可以采用 hCard 来进行标记。

CSS魔法 的首页为例,涉及此类联系信息的页面元素有站点标题、“关于站长”、“友情链接” 三块区域,我们就可以分别以网站、站长、朋友为主体单独设置 hCard。

为什么要使用 hCard

你可能会问,既然 hCard 对网页的浏览者是完全透明的,那我们为什么又要费神费力地在网页中添加 hCard 呢?

目前看来,这似乎是一件费力不讨好的事情,因为 hCard 等微格式尚未得到浏览器和终端设备的良好支持。但是一旦这些不足得到了改善,hCard 就会为我们的数字生活带来极大的便利。来看几个理想中的例子:

  • 当我用手机浏览某公司的网站时,手机浏览器识别出了网页中的 hCard 信息。这个 hCard 标记了该公司的多种联络方式,手机浏览器很聪明地提示我 “是否保存到通讯录”,于是我很经松地保存了我所需要的信息。
  • 手机浏览器还可以将页面中的 hCard 导出为 VCF 文件,我将 VCF 文件用蓝牙传输到同事的手机上,他们也轻松保存了这些联系信息,同时也可以方便地同步到电脑上的通讯录软件中。
  • 更令我惊喜的是,手机浏览器识别出了 hCard 中的地理位置信息(经纬度),并可将此信息传递给手机内的 GPS 导航软件,这样连出行道路都不需要我四处打听了!

这些应用看起来似乎不错吧?其实这些情景离我们已经越来越近了,目前 hCard 已经有了一些可行的应用流程。

现阶段的 hCard 应用

现阶段的 hCard 应用主要以桌面端为主,因为目前似乎还没有支持微格式的手机端浏览器。

目前可以识别微格式信息的浏览器包括安装了 Tails Export 或 Operator 扩展的 Firefox,以及安装了 Safari Microformats Plugin 插件的 Mac 版 Safari 浏览器。

[安装了 Tails Export 扩展的 Firefox]

这些的浏览器在识别出页面中的 hCard 信息之后,通常都可以提供导出 VCF 文件的功能。这些导出的 VCF 文件可以很方便地添加到本机的通讯录(Outlook 或 Address Book)中,随后便可以通过 NOKIA PC Suite 或 Apple iTunes 等软件将本机通讯录同步到 NOKIA 手机或 iPhone/iPod 等便携设备之中。

其中,Safari Microformats Plugin 插件可以直接将 hCard 中的联系人信息导入本机(仅限 Mac OS)的通讯录。

[Safari Microformats Plugin (示意图)]

此外,Firefox 的 Operator 扩展还提供了一些针对微格式的在线应用,比如 “使用 Google 地图查找”、“添加至雅虎通讯录” 等等,有效地丰富了 hCard 的应用范围。

[安装了 Operator 扩展的 Firefox]

值得一提的是,还有一个完全在线的、与浏览器无关的实现方案——Microformats Bookmarklet(微格式书签)。虽然它的界面明显借鉴自 Safari Microformats Plugin,但它实际上是跨浏览器的(支持 Safari、Firefox 和 IE 等浏览器)。它的使用很简单,也很有趣,把这个链接 “[微格式书签工具](javascript:%28function%28%29{function%20l%28u,i,t,b%29{var%20d=document;if%28!d.getElementById%28i%29%29{var s=d.createElement%28'script'%29;s.src=u;s.id=i;d.body.appendChild%28s%29}s=setInterval%28function%28%29{u=0;try{u=t.call%28%29}catch%28i%29{}if%28u%29{clearInterval%28s%29;b.call%28%29}},200%29}l%28'http://leftlogic.com/js/microformats.js','MF_loader',function%28%29{return!!%28typeof MicroformatsBookmarklet=='function'%29}, function%28%29{MicroformatsBookmarklet%28%29}%29}%29%28%29;)” 拖放至书签栏(或添加到收藏夹),就算是完成了 “安装”。此后在浏览任何网页时,只要点击这个书签项(或打开这个收藏夹项目),就可以识别并操作网页中的微格式信息了。(不过这个工具需要调用 jQuery,可能会与网页自身调用的 JS 库相冲突,或者因 jQuery 加载失败导致失效,不够稳定。)

[Microformats Bookmarklet (微格式书签工具)]

结语

虽然目前微格式尚未得到浏览器和终端设备的良好支持,但我们相信,在不远的将来,hCard 等微格式应用会令网页中的信息更加精确和丰富,并为互联网用户带来更多的便利。


相关阅读

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment