仓酷云

标题: 来谈谈：十分酷的微格局：XFN标准 [打印本页]

作者: 蒙在股里 时间: 2015-1-15 23:25
标题: 来谈谈：十分酷的微格局：XFN标准
使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。
网页制造poluoluo文章简介：在这个系列文章的第一部分中，我注释了rel微格局的分歧完成。在注释rel-me微格局的时分，扼要的提到了XFN微格局。
在这个系列文章的第一部分中，我注释了rel微格局的分歧完成。在注释rel-me微格局的时分，扼要的提到了XFN微格局。
原文链接：http://www.ablognotlimited.com/articles/getting-semantic-with-microformats-part-2-xfn/
如今，我们消费一点工夫来好悦目看这个十分酷的微格局。
在链接中放进团体信息

由GMPG──环球媒体协定组──制定的XHTML密友收集是一个十分复杂却壮大的往中央化形貌体例，经由过程利用链接(<a>)的rel属性来展示人际干系。
这个观点同我在第一部分中形貌的基于链接的干系是分歧的：
<ahref="http://twitter.com/emilylewis"rel=”me”>Twitter</a>
在这个例子中，rel="me"代码申明这个链接的目标地点(href)指向关于我的一个页面(大概是我卖力的页面)。
XFN微格局所形貌的基于链接的人际干系完整超出我们之前形貌的观点。
我们都是毗连在一同的

XFN扩大了rel-me的观点，不单单包括团体身份同交际收集之间的干系。您能够为链接中的rel属性复杂的增加多个属性值用以形貌干系信息。
比方，我常常在博客中援用我的老板兼密友，IanIanIanIanIan：
<ahref="http://www.iso-100.com/"rel=”metcolleagueco-workerfriend”>IanPitts</a>
在下面的例子中，我为指向他博客的链接增加了rel="metcolleagueco-workerfriend“这些属性。这些rel属性值申明：

met：我见到过Ian自己。
colleague：Ian是我的同事，也就是说我以为他跟我是具有类似乐趣和手艺的人。
co-worker：Ian是我的老板，由于他也是我的同事。
friend：我把Ian看成的我伴侣（他很侥幸吧）。

我们是怎样毗连在一同的

XFN标准供应了各类干系属性值，这些属性值都长短常复杂并直不雅的。
交情/熟习度

仅能利用这个列表中的一个值：

friend：依据团体界说变更。但基本来讲，这是在熟习度种别中最“亲热”的值。
acquaintance：标明一其中等的熟习水平。
contact：标明仅仅是我具有接洽信息的团体。

物理特征

met──相遇──标明已经见过自己的干系。能够同其他一切属性值共存。
职业

可使用个中一个大概两个属性值：

colleague：具有类似乐趣大概手艺的人，同寅。
co-worker：同事。

地舆信息

仅可以使用个中一个属性值：

co-resident：跟您住在统一条街道上的人。
neighbor：一个更狭义的地舆援用，一般是住的十分近（靠您本人界说），可是不在统一个街道上的。

家属

仅可使用个中一个属性值：

child：孩子
parent：怙恃
sibling：兄弟姐妹，也包含您娶亲以后对方何处的兄弟姐妹
spouse：夫妇（不管正当与否）
kin：任何亲戚，不论是直系，仍是经由过程婚姻大概领养。

浪漫干系

可使用一个大概多个属性值：

muse：猎取灵感的人
crush：您单相思的人
date：您今朝绝对流动的约会工具
sweetheart：您今朝十分心思大概物理投进的人

因为我实验微格局入手下手时分的困惑，有需要注释一下muse（猎取灵感的人）。固然他存在于“浪漫干系”这个分类，但他权衡于同“感性”对照的角度。灵感不属于感性，由于属于浪漫干系。（译注：没懂）
我常常援用一些业内好汉的链接(比方，JeffreyZeldman,EricMeyer和JasonSantaMaria)。关于这些人的链接，我都利用了属性rel="muse"。
而这些相对不是“浪漫干系”。我仅仅是（深入的）崇敬他们的事情，并常常从他们那边猎取灵感。
别的，我发明这里对这些“浪漫干系”的形貌非常的风趣。
团体身份

me指向在别的一个分歧中央(href)的本人。
我但愿有一点十分分明的是，为您本人赋值friend是过剩的，固然您会以为您是本人的伴侣。一样还包含met和其他一些属性值。但仅仅是由于不必要如许做，而不是由于如许做有效。
特地的复杂=效力

包含我在内，作为十分存眷细节的人，会十分感谢利用这些复杂而弄笑的词语。我们就复杂的承受co-worker（同事干系），而不要往争持事实是否是必要增加向导仍是上司的属性。
值得提的一点是，在利用这些属性值的时分没有特定的按次请求。
别的，这些值是不具有对称性的。因而，假如您援用一团体为friend而他们援用您为acquaintance，这并没有任何逻辑上的毛病（除非您感应非常的丢失）。
指定Profile

除在您熟悉的这些人的链接上加上rel声明，GMPG倡议您最好也让扫瞄器和搜刮引擎晓得您的网页撑持XFN，这个事情能够经由过程在<head>代码中指定XFN的材料链接。
关于我而言，我选择在一切页面中都声明XFN的材料链接，由于我的<head>代码经由过程一个全局文件来保护。这会让事情简单良多，同时，可让rel="me"呈现在我一切的页面中（一样，能够在页脚链接到我的Flickr、,Delicious、iLike和Twitter的团体材料页面）：
<headprofile=”http://gmpg.org/xfn/11″>
告知全球

GMPG也倡议让人们晓得您的网站是撑持XFN的。他们供应了一个徽章，您能够加到本人的网站上：

从团体角度来讲，我并非这些按钮大概徽章的粉丝。可是我撑持这个发起，以是在我的页脚中加上了XFN的链接：
<ahref="http://gmpg.org/xfn"title="撑持XHTML密友收集">XFN</a>

让他变得更复杂

固然复杂的为超链接增加这些属性和属性值不是一项出格浩荡的工程，可是也有一些工具可以匡助您更简单完成XFN：

XFN1.1天生器是一个基于网页的导游，用来给链接指定符合的XFN值，并供应多种言语撑持。
MTMTMTMTMTBlogroll2.12Manual是一个MovableType的插件用来为援用链接界说XNF干系。
XFNLinkCreator也是一个为链接加上XFN属性值的导游。
WordPressLinksManager能够设置同意您为blogroll链接增加XFN干系值。
WPWPWPWPWPMicroformattedBlogroll0.2是增加XFN链接的WordPress插件。
rel-lint是一个JavaScript书签，用来反省那些XFN属性值，并标注出哪些他没法辨认。

语义网

我晓得我已反重复复的反复很多多少遍（这也一定不是我最初一次说）：语义是微格局主要的优点之一。XFN也包括在内。
利用微格局来为网页内容增加布局和语义，使网页变得对人类对呆板一样可读。关头是，他们只利用了今朝已存在的尺度中的标志言语和数据。这点很棒！
微格局让我们间隔TimBerners-Lee提出的语义网愈来愈近。
交际收集

“语义”促使我在这个博客中大批利用微格局，这只是一方面，由于我意想到这点勾引关于某些人来讲其实不那末吸惹人。针关于这些人，我嫌疑XFN的“交际”特征大概更主要一些。
社会搜刮

Rubhub是一个社会搜刮引擎，您能够在那边提交网站，他会被索引，并同其他网站举行对照，从而创建社会干系的索引。
一旦索引，您能够看到您网站的交际了局，包含其他网站怎样援用（经由过程rel="me"）您，另有其他团体是怎样援用您的干系。
可视化

XFNGraph会天生一个蛛网图来展现这些站点怎样相互链接，供应交际干系的可视化展示。从这里，您能够晓得人们是怎样毗连起来，并能够经由过程这个展现找到那些跟您具有类似乐趣的人。
连通性

Google的SocialGraphAPI利用XFN来使得用户在新网站中交伴侣加倍简单。
比方，在Google供应的“MyConnections”的演示程序中，显现您怎样跟其别人毗连起来。这里有一个截图：

伴侣列表

有大批的站点，特别是那些交际收集站点，都利用XFN标志来创建密友/接洽人列表。好比，Twitter和LinkedIn都在他们的follower和接洽人链接上增加了rel="contact"。
在看得更远一点，一些站点公布hCard+XFN构成的密友列表，这个数据能够用来被导进/定阅。（我会在第三部分中申明hCard微格局）
这为未来同意用户在分歧网站之间互换交际收集信息打下了基本。
身份一致

在第一部分中提到过，XFN关于身份一致很主要。
交际收集站点

比方，良多交际收集站点在他们的团体材料页中都完成rel="me"属性，包含Flickr、Twitter、LinkedIn等。以是，在任何利用其他身份的网页中，分离的团体身份被从头汇合在一同。（译注：好流畅，不会翻）
ClaimID

一样，也有一些在线身份一致的服务撑持XFN。比方，claimID可让您手动设置团体材料，集成您一切的在线身份，每个都能够被标注为rel="me"。这里有一个我ClaimID团体信息的截图，包含了这些链接：

设立ClaimID上的团体材料有一个优点就是他会给你一个OpenID。
OpenID是为用户数字身份供应的开放的往中央化的自在框架。他利用已有的互联网手艺来改动存在的数字身份（比方博客、照片等），您可使用这个身份在撑持OpenID的站点上登录。这个跟XFN并没有间接干系，不外他很酷。
Plaxo

另有一个Plaxo’sOpenSocialGraph值得一提，他会依据您供应的站点URL来搜刮rel="me"链接。然后往抓取这些链接。他还会搜刮双向的链接来断定这两个中央(href)的确是统一团体。上面是一个抓取的截图：

Plaxo的在线地点簿和交际收集服务都撑持XFN，会主动的增加rel="me"属性到您团体材料中。我在Plaxo的团体材料页上每条链接都完成了rel-me的属性标注：

另有Google的SocialGraphAPI中的演示使用，“SiteConnectivity”，也经由过程列出他之道是你的站点汇合，还包含那些他以为是你的站点。上面一样是一个截图：

来点本性

一样在第一部分提到过，您可使用CSS属性选择器来为特定的rel界说一些作风。比方，您但愿使用XFN微格局图标，您可使用上面的属性选择器：
a[rel~="friend"]:before{content:url(xfn-friend.png);}
在撑持CSS2.1标准的扫瞄器(IE6不撑持)，这个能够被显现为：

延长浏览：
基于链接干系的微格局:利用rel属性
为网页增加hCard微格局
</p>
CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。

作者: 简单生活 时间: 2015-1-17 22:39
滚动条)层属性--溢出(visible/hidden/scroll/auto)

作者: 若天明 时间: 2015-1-26 23:23
所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

作者: 金色的骷髅 时间: 2015-2-5 08:13
还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

作者: 只想知道 时间: 2015-2-11 08:27
使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

作者: 柔情似水 时间: 2015-3-2 05:56
学Dreamweaver技术的过程其实是一个增加信心的过程。

作者: 透明 时间: 2015-3-11 05:09
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

作者: 不帅 时间: 2015-3-17 23:10
使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

作者: 冷月葬花魂 时间: 2015-3-25 11:21
在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

欢迎光临仓酷云 (http://ckuyun.com/)