<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>样式之美 &#187; XFN</title>
	<atom:link href="http://www.aoao.org.cn/blog/tag/xfn/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.aoao.org.cn</link>
	<description>没落的角落</description>
	<lastBuildDate>Fri, 16 Apr 2010 02:38:52 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>XFN™ (XHTML Friends Network)</title>
		<link>http://www.aoao.org.cn/blog/2007/09/xfn/</link>
		<comments>http://www.aoao.org.cn/blog/2007/09/xfn/#comments</comments>
		<pubDate>Mon, 03 Sep 2007 15:40:42 +0000</pubDate>
		<dc:creator>aoao</dc:creator>
				<category><![CDATA[Web开发]]></category>
		<category><![CDATA[Microformats]]></category>
		<category><![CDATA[tool]]></category>
		<category><![CDATA[XFN]]></category>
		<category><![CDATA[语义化]]></category>

		<guid isPermaLink="false">http://www.loaoao.com/blog/2007/09/xfn.html</guid>
		<description><![CDATA[XFN是microformats的一种应用，从我以前写的应该知道这也是一种从非结构化的网页中提取结构化数据的方式。那XFN是提取什么呢？它是提取人与人之间的关系。比如： &#60;a href=http://www.junchenwu.com/ rel=friend title=...&#62;JunChen&#60;/a&#62; 这只是一个普通的链接，但它却能表示我与JunChen的关系：rel=friend。那怎样看呢？我们不能可能打开源代码去看吧。而官方说的用:after有...]]></description>
			<content:encoded><![CDATA[<p>XFN是microformats的一种应用，从我<a href="http://www.aoao.org.cn/blog/2006/11/microformats/" title="microformats 微格式">以前写的</a>应该知道这也是一种从非结构化的网页中提取结构化数据的方式。那XFN是提取什么呢？它是提取人与人之间的关系。比如：</p>
<pre><code>&lt;a href="http://www.junchenwu.com/" rel="friend" title="..."&gt;JunChen&lt;/a&gt;</code></pre>
<p>这只是一个普通的链接，但它却能表示我与JunChen的关系：<code>rel="friend"</code>。那怎样看呢？我们不能可能打开源代码去看吧。而官方说的用:after有点理想化。浏览器啊浏览器。那点一下这个：<a href="javascript:var s=document.createElement('script');s.setAttribute('src', 'http://tools.microformatic.com/rel-lint/rel-lint.js');document.getElementsByTagName('head')[0].appendChild(s);void(s);">rel-lint</a> （记得打开JavaScript，-_-b好像是废话的样子），你也可以把它拉到你的收藏夹里下次使用。看看能看到什么，页面上的一些信息给提取出来，如果你有到<a href="http://www.junchenwu.com/" rel="friend">JunChen</a>的网站里去试一下，你也发现出现了同样的情况。如果有对应的程序把关系连起来的话，就会就得很好玩。</p>
<p>那要怎样开始呢？如果你是用WordPress的话，那就很方便了，在添加链接的同时顺便关系标一下，已经自己有XFN代码生成器。现在已经好多blog程序都自带有了，要是真的没有就用<a href="http://gmpg.org/xfn/creator" title="XFN English Creator">XFN Creator</a>学习一下，或者用我很久前一直在搞都未完成的<a href="http://www.loaoao.com/tools/xfn-creator-zh/">XFN  生成工具</a>，因为后面到了恋爱那部分我看不懂。就一直没放出来。写邮件问人家人家都不理。大家有什么建议也帮我提下＝。＝</p>
<p>可能你认为加这样的东西在现在来说是没什么意义，的确，大家都不用时，什么意义都没有。虽然XFN已经集成在WordPress很久了。可是多少使用WordPress的朋友会使用它呢?也许因为到现在都没看到什么像样的应用吗？不过我还是希望大家一起来做。 那么，开始把！先在head改成这样：</p>
<pre><code>&lt;head profile="http://gmpg.org/xfn/1"&gt;</code></pre>
<p>这样，人们或者程序将会知道从哪里获得在rel属性里XFN值的意思，＝。＝ 默认WordPress已经是加了。然后给适当的链接加个rel属性与对应的属性值。简单不。</p>
<p>如刚才有点rel-lint的朋友可能会发现还有其他的一些信息。那就到<a href="http://microformats.org/">http://microformats.org/</a>看一下是什么呢？你会发现很多好玩滴东东滴。 </p>
<hr />
<p>推荐本书：<a href="http://www.aoao.org.cn/book/web-standards-design/" title="《Web标准设计》的专题页面">《Web标准设计》</a></p>]]></content:encoded>
			<wfw:commentRss>http://www.aoao.org.cn/blog/2007/09/xfn/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>microformats 微格式</title>
		<link>http://www.aoao.org.cn/blog/2006/11/microformats/</link>
		<comments>http://www.aoao.org.cn/blog/2006/11/microformats/#comments</comments>
		<pubDate>Sun, 05 Nov 2006 17:56:21 +0000</pubDate>
		<dc:creator>aoao</dc:creator>
				<category><![CDATA[Web开发]]></category>
		<category><![CDATA[hCard]]></category>
		<category><![CDATA[Microformats]]></category>
		<category><![CDATA[XFN]]></category>
		<category><![CDATA[浏览器]]></category>

		<guid isPermaLink="false">http://wordpress.cs/?p=9</guid>
		<description><![CDATA[microformats 是什么呢？我估计很多人有听过看过试过， 很多人说他只是一套不知干什么的命名规则。 的确，他只是一套命名规则，而这套规则能干什么呢？这才是我们关心的。 先给Firefox 装上这个插件 Tails Export ，不过暂时这个插件只 如果你的Firefox是2.0的话，可以参考这里 装插件，或者用flock 来装 Tails Export ，Flock 现在的内核还是Firefox1.5的。 装完会在浏览器...]]></description>
			<content:encoded><![CDATA[<p>microformats 是什么呢？我估计很多人有听过看过试过， 很多人说他只是一套不知干什么的命名规则。<br />
<img src='http://www.aoao.org.cn/wp-content/uploads/2007/10/microformats.png' alt='microformats' style="float:right" /><br />
的确，他只是一套命名规则，而这套规则能干什么呢？这才是我们关心的。</p>
<p>先给Firefox 装上这个插件 <a href="https://addons.mozilla.org/firefox/2240/">Tails Export</a> ，不过暂时这个插件只 如果你的Firefox是2.0的话，可以参考<a href="http://forums.mozine.cn/lofiversion/index.php/t788.html#faq039">这里</a> 装插件，或者用<a href="http://www.flock.com/">flock </a>来装 <a href="http://extensions.flock.com/extension_detail/5563">Tails Export</a> ，Flock 现在的内核还是Firefox1.5的。</p>
<p>装完会在浏览器右下角~多出这样的<img src="http://www.aoao.org.cn/wp-content/uploads/2007/10/tails_export_ff.gif" alt="tails export icon" />图标如果是橙色的话就是表示网页上有信息给提取出来..</p>
<p>比如像这样的<br />
<img src="http://www.aoao.org.cn/wp-content/uploads/2007/10/microformats_v.gif" /><br />
左边上面是hCard 左边下面是XFN 右边是 hReview 当还有其他别的如 xFolk hCalendar</p>
<p>hCard跟hCalendar是可以导出 <abbr title="vCard format">.vcf</abbr>.vcf or <abbr title="iCal format">.ics</abbr>.ics 的。很方便，不过相应的支持太少了。<br />
不过也有很多问题。。比如。我可能会选择用图片或者JS的方式来显示我的邮件地址，因为我怕spam，这时 Tails Export就没办法提不出来。</p>
<p>在实际应用中，个人只感觉 hCard跟hCalendar有用，或者应该说还没有相应的软件来发挥他们的作用。</p>
<p>abbr title=&#8221;XHTML Friends Network&#8221;&gt;XFNXFN 现在只是个美好的愿意，希望通过网页的标签就能表现人与人的关系，可惜像Wordpress有N多使用者的blog程序集成了那样久都没见有多少人有用，哎！</p>
<p>有个<a href="http://www.hicksdesign.co.uk/journal/highlight-microformats-with-css">用CSS高亮显示microformats</a> 效果还不错。<a href="http://www.hicksdesign.co.uk/file_download/23">CSS文件在这里</a> 可以下去看看，原理很简单<br />
<img src="http://www.aoao.org.cn/wp-content/uploads/2007/10/highlight-microformats-with-css.png" alt="highlight microformats with css" /></p>
<p>官方提供的几个工具(<a href="http://tools.microformatic.com/">http://tools.microformatic.com/</a>)也不错，只是除了rel-lint我都不喜欢<br />
点击试下<a href="javascript:var s=document.createElement('script');s.setAttribute('src', 'http://tools.microformatic.com/rel-lint/rel-lint.js');document.getElementsByTagName('head')[0].appendChild(s);void(s);">rel-lint</a> ，不过好像IE不能用，真失策，放弃了这样多的用户，当然你也可以把他拉到收藏夹里多次使用，这个rel-lint 的作者估计不知道firefox用系统字体显示中文有点难看，哎～还要自己改CSS。</p>
<p>本来这篇很久前就想写，可我不是太懒就是太忙，都扔草稿里好多久了，好像还没写完，</p>
<p>补充更新：新的FF插件 <a href="https://addons.mozilla.org/firefox/4106/" title="Operator-firefox插件安装地址">Operator下载</a>，<a href="http://www.minamax.org/forum/comments.php?DiscussionID=30&amp;page=1#Item_1" title="Operator-firefox插件安装地址">介绍</a>，<a href="http://www.kaply.com/weblog">插件官方</a>。</p>
<p>扩展阅读</p>
<ul>
<li><a href="http://www.microformats.org/">microformats官方</a></li>
<li><a href="http://www-128.ibm.com/developerworks/cn/xml/x-microformats/index.html">使用 microformats 分离数据与格式</a></li>
<li><a href="http://suda.co.uk/projects/microformats/cheatsheet/">Microformats Cheat Sheet</a></li>
</ul>
<hr />
<p>推荐本书：<a href="http://www.aoao.org.cn/book/web-standards-design/" title="《Web标准设计》的专题页面">《Web标准设计》</a></p>]]></content:encoded>
			<wfw:commentRss>http://www.aoao.org.cn/blog/2006/11/microformats/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
	</channel>
</rss>

<!-- Dynamic Page Served (once) in 3.574 seconds -->
