微格式随想

微格式是建立在classname上的语义化XHTML代码片段，classname和XHTML标记达到松耦合，可以比较容易的嵌入到XHTML代码中。

如果有下面一个事件：

WebReBuild.ORG以8.18作为对外成立日，于深圳举办第一次聚会。

    * 座谈会内容：相互见面、交流、公布WebReBuild.ORG发展路向，招收第一期委员会人员。
    * 座谈会费用：AA制。
    * 预定人数：20人。
    * 参与条件：将本次活动相关内容做成页面（包括CSS），发送到twinsenliang@gmail.com，抄送到lovej1bz@gmail.com。
    * 地点：深圳-华侨城生态广场-大灰狼餐厅
* 时间：2007-08-18 的18：30 到23：30

应用微格式hCalendar建立一个日程：

 

< div  class ="vevent" >
  < p  class ="summary" >< a  href ="#"  class ="url uid " > WebReBuild.ORG </ a > 以8.18作为对外成立日，于深圳举办第一次 < span  class ="category" > 聚会 </ span > 。 </ p >
  < ul >
   < li > 座谈会内容： < span   class ="description" > 相互见面、交流、公布WebReBuild.ORG发展路向，招收第一期委员会人员 </ span > 。 </ li >
   < li > 座谈会费用：AA制。 </ li >
   < li > 预定人数：20人。 </ li >
   < li > 参与条件：将本次活动相关内容做成页面（包括CSS），发送到 < a  class ="email"  href ="mailto:twinsenliang@gmail.com" > twinsenliang@gmail.com </ a > ，抄送到 < a  class ="email"  href ="mailto:lovej1bz@gmail.com" > lovej1bz@gmail.com </ a > 。 </ li >
   < li > 地点： < span  class ="location" > 深圳-华侨城生态广场- < abbr  class ="geo"  title ="37.774200;-122.417068" > 大灰狼餐厅 </ abbr ></ span ></ li >
   < li > 时间： < abbr  class ="dtstart"  title ="2007-08-18T18:30:00" > 2007-08-18 的18：30 </ abbr >  到 < abbr  class ="dtend"  title ="2007-07-18T23:30" > 23：30 </ abbr ></ li >
  </ ul >
</ div >

 

通过如下的Classname建立了一个强语义化的一个代码片段

dtstart：开始的日期时间
summary：事件概要、标题、名称

以这两者其一指定事件结束时间：
dtend：结束的日期时间
duration：历时，时间长度
category：分类。常用值有 MEETING（会议）、APPOINTMENT（聚会）、CONFERENCE（大会）、EXPO（博览会）等。这个特性可以重复（一个事件可能归于好几种分类。）
location：事件发生地点
url：事件详情的网址
description：比「摘要」详细点的事件描述
last-modified：事件信息最后更新日期时间。

 

 

 

使用Tails Export提取出来的事件如下
 

众所周知，比较好的语义表达XML的优势是不可阻挡的。如果把这段代码片段用XML，利用微格式的classname作为标记来表示大概是这个样子。

 

<? xml version="1.0" encoding="utf-8" ?>
< vevent >
  < category > 聚会 </ category >
  < summary > WebReBuild.ORG以8.18作为对外成立日，于深圳举办第一次聚会 </ summary >
  < description > 相互见面、交流、公布WebReBuild.ORG发展路向，招收第一期委员会人员 </ description >
  < participant >
   < costmethed > AA制 </ costmethed >
   < number > 20 </ number >
   < condition > 将本次活动相关内容做成页面（包括CSS），发送到twinsenliang@gmail.com，抄送到lovej1bz@gmail.com </ condition >
   < address >
    < addrname > 深圳-华侨城生态广大灰狼餐厅 </ addrname >
    < geo > 37.774200;-122.417068 </ geo >
   </ address >
   < datetime >
    < dtstart > 2007-08-18T18:30:00 </ dtstart >
    < dtend > 2007-07-18T23:30 </ dtend >
   </ datetime >
  </ participant >
</ vevent >

 

规划一个严格语义的XML文档是比较困难的，我按照自己的思路，微格式表达的语义转化成为了XML，当然JSON格式的也可以。

Classname的随意性可以容易的制订出一套微格式规范，那么我们在自己的项目中也可以很容易的制订自己开发小组内的规范，对一个个小用例以同样的方式最近规划，比如规划导航，tab切换，分页，输入表单，基本相同的列表。采用上层ID组织模块，下层classname建立用例，ID .classname {}的继承方式进行样式的维护。

形成一套相对严谨和通用的文档结构，让开发人员都容易读懂，以一个个人blog的开发为例吧。显而易见blog的Classname命名已经非常简单了，以为RSS已经为我们提供了一套很好的命名参考。

 

< rss  version ="2.0" >
  < channel >
   < title >
   < link >
   < description >
   < copyright >
   < generator >
   < lastBuildDate >
   < ttl > 60 </ ttl >
   < image >
    < url >
    < title >
    < link >
   </ image >
   < item >
    < title >
    < link >
    < description >
   
    </ description >
    < category >
    < author >
    < pubDate >

 

将其转换成相应的classname,大概一个blog的日志列表就可以这样定义

   < class ="log_item" >
    < class ="log_title" >
    < class ="log_link" >
    < class ="log_desc" >
    < class ="log_cate" >
    < class ="log_tag" >
    < class ="log_author" >
    < class ="pubDate" >
    < class ="log_con" >
    < class ="log_viewer" >
    < class ="log_comm" >

 

应用于XHTML

< ol  class ="log_list" >
  < li  class ="log_item" >
   < h3  class ="log_title" >   < a  class ="log_link"  href ="#"  title ="log_title" > log title </ a ></ h3 >
   < div  class ="log_desc" >
      < p > 正在日本为其单曲《提线木偶》进行宣传的天娱传媒旗下歌手刘力扬，日前在日本获邀参加了某著名国际品牌2007年秋冬新品的发布会，并与日本演艺界的巨星木村拓哉、小野丽莎同场看秀。 </ p >

    </ div >
   < div >< a  href ="#"  class ="log_author" > log_author </ a >   < span  class ="pubtime" > 2007-08-30 12:30:00 </ span ></ div >
   < div >< span  class ="log_cate" > posted in  < a  href ="#" > XHTML </ a ></ span >< span  class ="log_tag" >  Tagged by  < a  href ="#" > XHTML </ a >< a  href ="#" > CSS </ a > > </ span  >< span  class ="log_viewer" > 123200 </ span >   < span  class ="log_comm" > 10 commons </ span ></ div >
  </ li >
  < li  class ="log_item" >
   < h3  class ="log_title" >   < a  href ="#"  title ="log_title" > log title </ a ></ h3 >
   < div >< a  href ="#"  class ="log_author" > log_author </ a >   < span  class ="pubtime" > 2007-08-30 12:30:00 </ span ></ div >
   < div >< span  class ="log_cate" > posted in  < a  href ="#" > XHTML </ a ></ span >< span  class ="log_tag" >  Tagged by  < a  href ="#" > XHTML </ a >< a  href ="#" > CSS </ a ></ span ></ div >
   < div  class ="log_desc" >
    < p > 正在日本为其单曲《提线木偶》进行宣传的天娱传媒旗下歌手刘力扬，日前在日本获邀参加了某著名国际品牌2007年秋冬新品的发布会，并与日本演艺界的巨星木村拓哉、小野丽莎同场看秀。 </ p >
   </ div >
   < div >< span  class ="log_viewer" > 123200 </ span >   < span  class ="log_comm" > 10 commons </ span ></ div >
  </ li >
</ ol >

 

举的这个例子太垃圾，等有空了，再继续写吧！