样式之美 » Microformats http://www.aoao.org.cn 没落的角落 Fri, 13 Jan 2012 03:37:59 +0000 en hourly 1 http://wordpress.org/?v=3.0.4 hAtom应用 让结构提供数据 http://www.aoao.org.cn/blog/2008/05/hatom/ http://www.aoao.org.cn/blog/2008/05/hatom/#comments Fri, 30 May 2008 20:20:04 +0000 aoao http://www.aoao.org.cn/?p=107 首先了解一下什么是hAtom，简单来说，它是microformat的成员之一，源于atom，而atom又是什么呢，简单来说，你就看成跟RSS一样的东东，而复杂来说，你可以看这里，为什么要hAtom？选择使用总是需要一个理由的。

例如我的网站有提供Feed，但blog的某个分类却没提供，这时如果分类的页面能输出hatom的结构与数据的话，就可以能过工具（例如： hAtom transcoder ， hatom2atom ）把它转换成atom或者RSS，试着访问： http://tools.microformatic.com/transcode/atom/hatom/http://www.aoao.org.cn/blog/category/dev/ 看到的就是转换出来的atom，这样的话你甚至可以把搜索的结果转成atom（其实WP虾米feed都是可以输出），好像转把页面转成RSS或者atom也没什么特别的作用，介于这样，我们只研究不应用好了。

hAtom整体结构如下:

  • hfeed (hfeed). optional.
    • feed category. optional. keywords or phrases, using rel-tag.
    • hentry (hentry).
      • entry-title. required. text.
      • entry-content. optional (see field description). text. [*]
      • entry-summary. optional. text.
      • updated. required using datetime-design-pattern. [*]
      • published. optional using datetime-design-pattern.
      • author. required using hCard. [*]
      • bookmark (permalink). optional, using rel-bookmark.
      • tags. optional. keywords or phrases, using rel-tag.

    • [*] Some required elements have defaults if missing, see below.

本来想全译成中文的，可是我发现我用了二十几年的语言都不知道怎样表达 Feed Entry及一些看起来很简单的东东，所以大家就将就着看，我也就不翻译了，抽出几个出来，详细完整的介绍看官方WIKI。

  • Feed : 标示一个feed元素，使用class hfeed，可选，如果没用则假设整个页面都是，hAtom可能包括有多个feed元素
  • Feed Category：必须在feed内但又不在entry内，使用rel标记。
  • Entry：在<blockquote> or <q> 里的微格式会给忽视。
  • Entry Title：如果没有的话会找entry里第一个Hx 或者页面的<title>（在没有feed的情况下），或者把它当成空处理。
  • Entry Content：出现多个会按文档顺序连起来
  • Entry Permalink：如果没有的话会用网页的url，如果entry内有ID的话就是锚点，
  • Entry Updated：如果没有就用Entry Published，
  • Entry Author：要hCard，可以有多个。

如果你想在wordpress上使用hatom的话，可以参考一下这篇hAtom and WordPress。

在官方有批examples ，上边有各种关于hatom奇奇怪怪的应用。 个人看法，现在对应的“硬件”不成熟，各种应用都比较极限，也许在以后，hAtom会有很好的发展。

]]> http://www.aoao.org.cn/blog/2008/05/hatom/feed/ 11 IE8的WebSlices http://www.aoao.org.cn/blog/2008/03/ie8-webslices/ http://www.aoao.org.cn/blog/2008/03/ie8-webslices/#comments Fri, 07 Mar 2008 19:36:19 +0000 aoao http://www.aoao.org.cn/blog/2008/03/ie8-webslices/ 这两天M$出了个IE8beta1版~害得我的Google Reader里全是IE8的信息，可惜有用的信息太少了，在翻M$的网站时，倒是发现了一个比较帅的功能：“WebSlices”。

简单的来说，它的功能就是把网页的某一块“剪”出来放收藏夹里。这个功能与Mac OS上的Web Clip Widget性质不大一样，Web Clip是由用户自由剪网页，而WebSlices是要网页输出特定的格式可以“剪”的。如果你已经装了IE8的话，来我的站上逛下，应该可以看到这图片里的效果：
WebSlices使用效果图

是不是感觉很无聊滴样子，当然，是在blog上是没什么特别的效果。M$介绍了个应用：ebay的IE8特别版，比如把某个正在拍卖的商品剪出来就有意义了。实现的方式其实很简单，只要指定HTML的class与ID就行，看一下列子：

<div class="hslice" id="testWebSlice">
<p class="entry-title">传说中滴标题</p>
<div class="entry-content">传说中滴可以被剪的内容</div>
</div>

是不是看到entry-title和entry-content感觉有点熟悉呢？嗯，就是Microformats的hAtom，那些差点给人忘记的东西给M$翻出来用了。其实我的Blog一直渗着hAtom的约定，只是所有渗着hAtom的内容却不适合WebSlices，要注意的一点点就是，ID不能少。-_-b 介于M$IE比较强的特点，ID可以用数字，人家官方的例子就是用数字当ID。

测试传说中滴标题

可以用IE8来测试一下能不能把这传说中滴内容剪出来

除了设置要剪的内容话，还可以设置过期的时间，比如：

<p>End time:<abbr class="endtime" title="2008-02-28T17:00:00">1 day 18 hours</abbr></p>

跟Microformats一样的用法，不过选的class是endtime而不是dtend。当浏览器发现过期时会显示过期的标记。

同时也可以用跟RSS一样作用的ttl来定最长缓存时间，比如：

<p>This clip updates every <span class="ttl">15</span> minutes </p>

你甚至可以用Feed来重定向被剪的内容，只要在entry-content中加上：

<a rel="feedurl"href="auction.microsoft.com/item.xml">Subscribe to WebSlice</a>

M$的白皮书少了个“h”，href跟ref是两回事，完全就是在欺骗我的感情。白皮书中说到要在Feed中加上一些特定的元素来指定ttl endtime等属性，不想再复制代码了，有兴趣的同学查书去。

同时可以指定默认的WebSlices，只要在head里加上：

<link rel="default-slice" type="application/x-hatom" href="www.example.com/#auction" />

也可以控制WebSlices在网页里不出现剪切的提示，在head加上：

<meta name="slice" scheme="IE" content="off" />

白皮书中还有一些关于样式的有效范围和一些认证跟其他一些东东，有兴趣的朋友可以看一下：Internet Explorer 8 Beta 1 Whitepapers – Release:WebSlices

]]> http://www.aoao.org.cn/blog/2008/03/ie8-webslices/feed/ 11 XFN™ (XHTML Friends Network) http://www.aoao.org.cn/blog/2007/09/xfn/ http://www.aoao.org.cn/blog/2007/09/xfn/#comments Mon, 03 Sep 2007 15:40:42 +0000 aoao http://www.loaoao.com/blog/2007/09/xfn.html XFN是microformats的一种应用，从我以前写的应该知道这也是一种从非结构化的网页中提取结构化数据的方式。那XFN是提取什么呢？它是提取人与人之间的关系。比如：

<a href="http://www.junchenwu.com/" rel="friend" title="...">JunChen</a>

这只是一个普通的链接，但它却能表示我与JunChen的关系：rel="friend"。那怎样看呢？我们不能可能打开源代码去看吧。而官方说的用:after有点理想化。浏览器啊浏览器。那点一下这个：rel-lint （记得打开JavaScript，-_-b好像是废话的样子），你也可以把它拉到你的收藏夹里下次使用。看看能看到什么，页面上的一些信息给提取出来，如果你有到JunChen的网站里去试一下，你也发现出现了同样的情况。如果有对应的程序把关系连起来的话，就会就得很好玩。

那要怎样开始呢？如果你是用WordPress的话，那就很方便了，在添加链接的同时顺便关系标一下，已经自己有XFN代码生成器。现在已经好多blog程序都自带有了，要是真的没有就用XFN Creator学习一下，或者用我很久前一直在搞都未完成的XFN 生成工具，因为后面到了恋爱那部分我看不懂。就一直没放出来。写邮件问人家人家都不理。大家有什么建议也帮我提下＝。＝

可能你认为加这样的东西在现在来说是没什么意义，的确，大家都不用时，什么意义都没有。虽然XFN已经集成在WordPress很久了。可是多少使用WordPress的朋友会使用它呢?也许因为到现在都没看到什么像样的应用吗？不过我还是希望大家一起来做。 那么，开始把！先在head改成这样：

<head profile="http://gmpg.org/xfn/1">

这样，人们或者程序将会知道从哪里获得在rel属性里XFN值的意思，＝。＝ 默认WordPress已经是加了。然后给适当的链接加个rel属性与对应的属性值。简单不。

如刚才有点rel-lint的朋友可能会发现还有其他的一些信息。那就到http://microformats.org/看一下是什么呢？你会发现很多好玩滴东东滴。

]]> http://www.aoao.org.cn/blog/2007/09/xfn/feed/ 4 microformats 微格式 http://www.aoao.org.cn/blog/2006/11/microformats/ http://www.aoao.org.cn/blog/2006/11/microformats/#comments Sun, 05 Nov 2006 17:56:21 +0000 aoao http://wordpress.cs/?p=9 microformats 是什么呢？我估计很多人有听过看过试过， 很多人说他只是一套不知干什么的命名规则。
microformats
的确，他只是一套命名规则，而这套规则能干什么呢？这才是我们关心的。

先给Firefox 装上这个插件 Tails Export ，不过暂时这个插件只 如果你的Firefox是2.0的话，可以参考这里 装插件，或者用flock 来装 Tails Export ，Flock 现在的内核还是Firefox1.5的。

装完会在浏览器右下角~多出这样的tails export icon图标如果是橙色的话就是表示网页上有信息给提取出来..

比如像这样的

左边上面是hCard 左边下面是XFN 右边是 hReview 当还有其他别的如 xFolk hCalendar

hCard跟hCalendar是可以导出 .vcf.vcf or .ics.ics 的。很方便，不过相应的支持太少了。
不过也有很多问题。。比如。我可能会选择用图片或者JS的方式来显示我的邮件地址，因为我怕spam，这时 Tails Export就没办法提不出来。

在实际应用中，个人只感觉 hCard跟hCalendar有用，或者应该说还没有相应的软件来发挥他们的作用。

abbr title=”XHTML Friends Network”>XFNXFN 现在只是个美好的愿意，希望通过网页的标签就能表现人与人的关系，可惜像Wordpress有N多使用者的blog程序集成了那样久都没见有多少人有用，哎！

有个用CSS高亮显示microformats 效果还不错。CSS文件在这里 可以下去看看，原理很简单
highlight microformats with css

官方提供的几个工具(http://tools.microformatic.com/)也不错，只是除了rel-lint我都不喜欢
点击试下rel-lint ，不过好像IE不能用，真失策，放弃了这样多的用户，当然你也可以把他拉到收藏夹里多次使用，这个rel-lint 的作者估计不知道firefox用系统字体显示中文有点难看，哎～还要自己改CSS。

本来这篇很久前就想写，可我不是太懒就是太忙，都扔草稿里好多久了，好像还没写完，

补充更新：新的FF插件 Operator下载，介绍，插件官方。

扩展阅读

]]> http://www.aoao.org.cn/blog/2006/11/microformats/feed/ 7