首页 > 开发 > CSS > 正文

非常酷的微格式:XFN规范

2024-07-11 09:03:19
字体:
来源:转载
供稿:网友

武林网(www.vevb.com)文章简介:在这个系列文章的第一部分中,我解释了rel微格式的不同实现。在解释rel-me微格式的时候,简要的提到了XFN微格式。

在这个系列文章的第一部分中,我解释了rel微格式的不同实现。在解释rel-me微格式的时候,简要的提到了XFN微格式。

原文链接:

现在,我们花费一点时间来好好看看这个非常酷的微格式。

在链接中放入个人信息

由GMPG──全球媒体协议组──拟定的XHTML好友网络是一个非常简单却强大的去中心化描述方式,通过使用链接(<a>)的rel属性来展现人际关系。

这个概念同我在第一部分中描述的基于链接的关系是一致的:

<a href="" rel=”me”>Twitter</a>

在这个例子中,rel="me"代码说明这个链接的目的地址(href)指向关于我的一个页面 (或者是我负责的页面)。

XFN微格式所描述的基于链接的人际关系完全超越我们之前描述的概念。

我们都是连接在一起的

XFN扩展了rel-me的概念,不仅仅包含个人身份同社交网络之间的关系。您可以为链接中的rel属性简单的添加多个属性值用以描述关系信息。

例如,我经常在博客中引用我的老板兼好友,IanIanIanIanIan

<a href="" rel=”met colleague co-worker friend”>Ian Pitts</a>

在上面的例子中,我为指向他博客的链接添加了rel="met colleague co-worker friend“这些属性。这些rel属性值说明:

我们是如何连接在一起的

XFN规范提供了各种关系属性值,这些属性值都是非常简单并直观的。

友谊/熟悉度

仅能使用这个列表中的一个值:

物理特性

met──相遇──表明曾经见过本人的关系。可以同其他所有属性值共存。

职业

可以使用其中一个或者两个属性值:

  • colleague:具有相似兴趣或者技术的人,同僚。
  • co-worker:同事。
  • 地理信息

    仅可使用其中一个属性值:

  • co-resident:跟您住在同一条街道上的人。
  • neighbor:一个更广义的地理引用,通常是住的非常近(靠您自己定义),但是不在同一个街道上的。
  • 家族

    仅可以使用其中一个属性值:

    浪漫关系

    可以使用一个或者多个属性值:

    由于我尝试微格式开始时候的疑惑,有必要解释一下muse(获取灵感的人)。虽然他存在于“浪漫关系”这个分类,但他衡量于同“理性”对比的角度。灵感不属于理性,因为属于浪漫关系。(译注:没懂)

    我经常引用一些业内英雄的链接(例如,Jeffrey Zeldman, Eric MeyerJason Santa Maria)。对于这些人的链接,我都使用了属性rel="muse"。

    而这些绝对不是“浪漫关系”。我仅仅是(深刻的)崇拜他们的工作,并经常从他们那里获取灵感。

    另外,我发现这里对这些“浪漫关系”的描述异常的有趣。

    个人身份

    me指向在另外一个不同地方(href)的自己。

    我希望有一点非常明显的是,为您自己赋值friend是多余的,虽然您会认为您是自己的朋友。同样还包括met和其他一些属性值。但仅仅是因为不需要这样做,而不是因为这样做无效。

    特意的简单 = 效率

    包括我在内,作为非常关注细节的人,会非常感激使用这些简单而搞笑的词语。我们就简单的接受co-worker(同事关系),而不要去争吵究竟是不是需要添加领导还是下属的属性。

    值得提的一点是,在使用这些属性值的时候没有特定的顺序要求。

    此外,这些值是不具有对称性的。因此,如果您引用一个人为friend而他们引用您为acquaintance,这并没有任何逻辑上的错误(除非您感到异常的失落)。

    指定Profile

    除了在您认识的这些人的链接上加上rel声明,GMPG建议您最好也让浏览器和搜索引擎知道您的网页支持XFN,这个工作可以通过在<head>代码中指定XFN的资料链接。

    对于我而言,我选择在所有页面中都声明XFN的资料链接,因为我的<head>代码通过一个全局文件来维护。这会让工作容易很多,同时,可以让rel="me"出现在我所有的页面中(同样,可以在页脚链接到我的Flickr、, Delicious、iLike 和 Twitter的个人资料页面):

    <head profile=”″>

    告诉全世界

    GMPG也建议让人们知道您的网站是支持XFN的。他们提供了一个徽章,您可以加到自己的网站上:

    从个人角度来说,我并不是这些按钮或者徽章的粉丝。但是我支持这个提议,所以在我的页脚中加上了XFN的链接:

    <a href="" src="http://www.vevb.com/uploads/allimg/130804/0914446254_0.png" />

    朋友列表

    有大量的站点,尤其是那些社交网络站点,都使用XFN标记来建立好友/联系人列表。比如,Twitter和LinkedIn都在他们的follower和联系人链接上添加了rel="contact"。

    在看得更远一点,一些站点发布hCard+XFN组成的好友列表,这个数据可以用来被导入/订阅。(我会在第三部分中说明hCard微格式)

    这为将来允许用户在不同网站之间交换社交网络信息打下了基础。

    身份统一

    在第一部分中提到过,XFN对于身份统一很重要。

    社交网络站点

    例如,很多社交网络站点在他们的个人资料页中都实现rel="me"属性,包括Flickr、Twitter、LinkedIn等。所以,在任何使用其他身份的网页中,分散的个人身份被重新集合在一起。(译注:好晦涩,不会翻)

    ClaimID

    同样,也有一些在线身份统一的服务支持XFN。例如,claimID可以让您手动设置个人资料,集成您所有的在线身份,每一个都可以被标注为rel="me"。这里有一个我 ClaimID个人信息的截图,包括了这些链接:

    非常酷的微格式:XFN规范

    设立ClaimID上的个人资料有一个好处就是他会给你一个OpenID。

    OpenID是为用户数字身份提供的开放的去中心化的自由框架。他使用已有的互联网技术来改变存在的数字身份(例如博客、照片等),您可以使用这个身份在支持OpenID的站点上登录。这个跟XFN并没有直接关系,不过他很酷。

    Plaxo

    还有一个Plaxo’s Open Social Graph值得一提,他会根据您提供的站点URL来搜索rel="me"链接。然后去抓取这些链接。他还会搜索双向的链接来确定这两个地方(href)确实是同一个人。下面是一个抓取的截图:

    非常酷的微格式:XFN规范

    Plaxo的在线地址簿和社交网络服务都支持XFN,会自动的添加rel="me"属性到您个人资料中。我在Plaxo的个人资料页上每一条链接都实现了rel-me的属性标注:

    非常酷的微格式:XFN规范

    还有Google的Social Graph API中的演示应用,“Site Connectivity”,也通过列出他之道是你的站点集合,还包括那些他认为是你的站点。下面同样是一个截图:

    非常酷的微格式:XFN规范

    来点个性

    同样在第一部分提到过,您可以使用CSS属性选择器来为特定的rel定义一些风格。例如,您希望利用XFN微格式图标,您可以使用下面的属性选择器:

    a[rel~="friend"]:before {content: url(xfn-friend.png);}

    在支持CSS 2.1 规范的浏览器 (IE 6不支持),这个可以被显示为:

    延伸阅读:

    基于链接关系的微格式:使用rel属性

    为网页添加hCard微格式

    发表评论 共有条评论
    用户名: 密码:
    验证码: 匿名发表