hCalendar微格式关于事件和基于时间或地点的活- CSS样式表

当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > hCalendar微格式关于事件和基于时间或地点的活

技术文章搜索

关键字

CSS样式表中的 hCalendar微格式关于事件和基于时间或地点的活

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 35 ::

收藏到网摘: n/a

网页简历结构和语义信息 hResume微格式 CSS下!important属性

我们又来了，兴奋的冲进微格式的世界～～根据我的计划，这篇文章应该到达此系列的半程了。到这里，我已经讨论了三种微格式的实现：

在第一部分中，使用rel来定义基于链接的关系
在第二部分中，使用XFN微格式为链接增加人际关系的描述
在第三部分中，使用hCard微格式来描述人、公司和地点
还不错。但是距离全面介绍微格式还有一定差距呢。

所以，今天让我们一起来探讨一下hCalendar微格式，通过该微格式我可以为那些关于事件和基于时间或地点的活动提供语义和结构化信息。

来源：iCalendar

iCalendar（或者iCal）是分享日历数据的标准。通常的，他被广泛用在Email交换中，虽然并不仅仅局限于此。同hCard类似，网站开发人员可以通过hCalendar将iCalendar数据嵌入到网页数据中。hCalendar同iCalendar之间同样是1:11:11:1的对应关系，从而允许解析器从网页中提取信息提供给日历应用使用。1:11:11:1的对应关系，从而允许解析器从网页中提取信息提供给日历应用使用。

历史回顾：iCalendar建立在vCalendar（虚拟日历Virtual Calendar）基础之上，vCalendar是一个开源的日历应用，用来在线发布和维护事件和时刻表。vCalendar同vCard电子商务名片格式一起开发的。

基于日期/时间的活动

hCalendar微格式描述在日历中使用的事件（或者任何基于日期/时间的活动）信息，包括（但不限于）：

概述
日期和时间
地点
详细描述
重复发生

基础知识

跟hCard一样，hCalendar遵循一些基本规则：

属性和子属性通过class来描述。
因为跟iCalendar之间1:1的对应关系，特定的hCalendar属性是建立在iCalendar属性名称基础上的（例如，vevent）
属性和子属性名字大小写敏感
“根”属性不能同其他属性组合。因此是无效的。

还有一条虽然不是规则，但是需要铭记在心：使用什么样的标记元素并不重要。class的值（属性/子属性）才决定hCalendar微格式。但之前也说过，我非常鼓励使用具有语义特性的标记元素。

Profile

同所有微格式一样，非常鼓励您在网页的<head>部分中包含微格式的声明，使用hCalendar的Profile：

W3C允许定义多个Profile值，使用空格隔开，所以可以自己选择使用多个Profile：

另外，如果您引用非提案微格式（hCalendar是非提案微格式），您可以替换使用组合Profile URL，该URL涵盖了所有非提案微格式：

如果您同时引用非提案和提案微格式，您同样可以使用上面这条组合Profile声明。

示例

本博客相对比较新，因此，我还没有更多的机会列举一些事件信息。实际上，我只有一个在线的例子，感谢最近一篇BarCamp Albuquerque 3的文章，在那里我使用了hCalendar微格式：

<div class=”vevent”>
Yes, it's short notice, but mark your calendars: <a href="http://barcamp.org/BarCampAlbuquerque" class=”url summary”>BarCamp Albuquerque 3</a> is this weekend.
<dl>
<dt>When:</dt>
<dd><abbr class=”dtstart” title=”2008-09-13T09:00:00″>September 13</abbr>–<abbr class=”dtend” title=”2008-09-14T18:00:00″>14</abbr>, from 9am–6pm both days</dd>
<dt>Where:</dt>
<dd class=”location vcard”><a class=”fn org url” href=”http://www.chefwhite.com/cjw_cafe.php”>CJW Cafe</a> on <a href=”http://maps.google.com/maps” class=”adr”>4801 Alameda <abbr title=”Boulevard”>Blvd</abbr> <abbr title=”Northeast”>NE</abbr>, Albuquerque, <abbr class=”region” title=”New Mexico”>NM</abbr> 87113</a></dd>
<dt>What:</dt>
<dd class=”description”>A <abbr class=”duration” title=”P2D”>two-day</abbr> event all about the web — design (visual, experience, information architecture), technology (infrastructure, programming), social and new media, and other stuff that is just plain cool.</dd>
</dl>
</div>

说说各部分

我们将上面的例子分开讨论一下。

“根”：vevent

您可能注意到在我例子中的根属性是vevent，而不是vcalendar。这是因为hCalendar有一个可选的根元素，只有在您需要在页面中描述超过一个日历事件时才需要出现。对于尽有一个日历事件的网页，vcalendar属性被假设已经出现在页面中。既然我的例子只是一个事件，我把所有的事件信息都包含在<div class="vevent">中，意味着所有的内容描述的都是同一个事件。

包含他的元素可以是任何元素（<dl>，<ul>，，等等）。<div>就满足我例子的要求了。

必要属性：summary和dtstart

hCalendar必须的属性为（除了根元素vevent）summary和dtstart.

summary

summary属性描述了事件的概要信息。此属性包含的内容通常是在日历应用中显示的基本信息，比如事件的名称。所以，在我的例子中，“BarCamp Albuquerque 3”被包含在summary之中，也就是在我个人日历中用来显示的名称：

Yes, it's short notice, but mark your calendars: <a href="http://barcamp.org/BarCampAlbuquerque" class="url summary“>BarCamp Albuquerque 3</a> is this weekend.

dtstart

dtstart属性描述了事件的开始时间/日期。在上面的例子中，“September 13”：

<dd><abbr class=”dtstart” title=”2008-09-13T09:00:00″>September 13</abbr>–<abbr class=”dtend” title=”2008-09-14T18:00:00″>14</abbr>, from 9am–6pm both days</dd>

日期/时间设计模式

注意到包含dtstart的容器是<abbr>，被包含的信息为“September 13”而title的属性值是“2008-09-13T09:00:00”：

<dd><abbr class=”dtstart” title=”2008-09-13T09:00:00“>September 13</abbr>–<abbr class=”dtend” title=”2008-09-14T18:00:00″>14</abbr>, from 9am–6pm both days</dd>

这是目前在微格式中定义日期/时间格式的推荐做法──被称作“日期时间设计模式”（是abbr设计模式的扩展）。此模式开发的目的是为了支持微格式的原则之一：先为人类阅读设计，机器次之，最终是让人类和机器都能够阅读识别。因此，逻辑上是，机器──例如这些web应用──会使用title部分，而浏览器会为人类阅读只显示<abbr>中的内容。

同时，作为使用日期时间模式规范的一部分，日期/时间信息应当被遵循ISO 8601的定义：

YYYY-MM-DDThh:mm:ss — “Y”表示年的数字，”M”表示月份，”D”表示天，”h”表示小时，”m”表示分钟，”s”表示秒
YYYY-MM-DDThh:mm:ssZ — “Z”用来表示GMT（格林威治）时间
YYYY-MM-DDThh:mm:ss+hh (或者 -hh) — “+hh” 和 “-hh” 表示参照格林威治时间的偏移量

为了简单说明，举个例子，2008-09-30T13:00:00 = 2008年9月30日下午1:00（当地时间）。上面例子中的字母”T”将日期信息和时间信息分开。如果您仅仅有一个日期，忽略“T”和后面的时间信息就可以了。类似的，如果您只有时间信息，忽略掉“T”和前面的日期信息即可。这个模式目前不幸的还有一些无障碍访问问题，我会在文章后面继续讨论。现在，让我们继续上面的例子。

剩下的日期/时间属性

上面例子中还有可选的日期时间属性，包括：dtend和duration。

dtend

dtend属性描述了事件结束的日期/时间。在我的例子中，为“September 14”：

<dd><abbr class="dtstart" title="2008-09-13T09:00:00">September 13</abbr>–<abbr class=”dtend” title=”2008-09-14T18:00:00″>14</abbr>, from 9am–6pm both days</dd>

duration

duration属性用来描述事件的持续时间。在上面的例子中，是两天：

<dd class="description">A <abbr class=”duration” title=”P2D”>two-day</abbr> event all about the web — design (visual, experience, information architecture), technology (infrastructure, programming), social and new media, and other stuff that is just plain cool.</dd>

同日期/时间一样，持续时间信息也使用日期时间设计模式来描述，机器可读的信息包含在title中，而人类可读的信息包含在<abbr>。同样，title持续时间的值也要遵循ISO 8601的定义，只是需要在前面加“P”用以描述持续的阶段时间。持续的阶段时间可以使用下面这些单位描述：年 (Y), 月 (M), 周 (W), 天 (D), 小时 (H), 分钟 (M) 和秒 (S)。可以参考下面例子：

P2Y = 持续2年
P10D = 持续10天
P3H = 持续3个小时
P2W = 持续2周
P12DT8H30M = 持续12天8小时30分钟

说说“无障碍访问”

在前面第三部分中曾经简单讨论过使用日期时间设计模式会有一些无障碍访问问题。无障碍访问的根本问题在于屏幕发声程序如何对待title值：他们读取这个属性。所以，当使用时间日期模式把机器可读的ISO 8601日期时间信息放到title中时，屏幕发声会按照字面来读出这些数值。想象一下您的屏幕发声程序读取<abbr title="2008-09-30">：“Two thousand eight dash zero nine dash thirty。”如果时间和日期的值更长的话会更糟糕。这对用户是相当不友好的。

目前，这些问题还没有被解决。不过已经有一些提交上来的候选意见，但是微格式社区还在继续讨论更好解决这些问题的途径。针对我自己的博客而言，分析数据表明我没有任何屏幕发声程序的访问者。我很急切想知道如何解决这些问题，从而实现这些微格式，让他们支持无障碍访问的用户。

剩下的剩下

我的例子中还包括另外四个可选的属性：url, category, location和description。

url

url属性描述事件的链接（<a>）：

Yes, it's short notice, but mark your calendars: <a href="http://barcamp.org/BarCampAlbuquerque” class=”url summary”>BarCamp Albuquerque 3</a> is this weekend.

您可能会注意到我把url属性同summary写在一起。这是因为<a>中包含的内容恰恰是我日历信息的summary，这只是一种巧合。

location

location属性描述事件发生的地点。

<dd class=”location vcard”><a class=”fn org url” href=”http://www.chefwhite.com/cjw_cafe.php”>CJW Cafe</a> on <a href=”http://maps.google.com/maps” class=”adr”>4801 Alameda <abbr title=”Boulevard”>Blvd</abbr> <abbr title=”Northeast”>NE</abbr>, Albuquerque, <abbr class=”region” title=”New Mexico”>NM</abbr> 87113</a></dd>

description

最后，description属性描述事件比summary更详细的描述：

<dd class=”description”>A <abbr class=”duration” title=”P2D”>two-day</abbr> event all about the web — design (visual, experience, information architecture), technology (infrastructure, programming), social and new media, and other stuff that is just plain cool.</dd>

还没有包括哪些

还有一些hCalendar常用的属性我没有在上面例子中使用的：

dtstamp表明hCalendar信息生成的日期和时间
last-modified表明hCalendar信息最近更新的日期和时间
status表明事件确认信息。允许的值包括”cancelled,” “confirmed”和”tentative”
class表明事件级别。允许的值包括”private,” “public “和”confidential”
rrule表明事件通常的重复发生信息。如果属性被使用，他需要子属性freq来说明发生的频率（会在以后讨论的计量规范中讨论，比如count或者interval）
rdate表明事件并不常重新发生

还有很多其他的属性可以被应用。查看hCalendar例子的wiki页面获取更多信息。

hCalendar + hCard

也许，现在您已经注意到在我hCalendar标记中包含了hCard属性和子属性：

<dd class="location vcard“><a class=”fn org url” href=”http://www.chefwhite.com/cjw_cafe.php”>CJW Cafe</a> on <a href=”http://maps.google.com/maps” class=”adr”>4801 Alameda <abbr title=”Boulevard”>Blvd</abbr> <abbr title=”Northeast”>NE</abbr>, Albuquerque, <abbr class=”region” title=”New Mexico”>NM</abbr> 87113</a></dd>

就像前面文章中提过的，组合微格式非常的简单，并且在一定的作用范围内添加更多的语义价值。而且，他还为用户提供了更进一步的数据可以被扩展和使用，例如可以添加到他们地址簿的vCard信息。

在这个实例中，location属性中使用vcard非常有意义，即便我只是想添加一些城市信息，我也可以使用hCard的属性。

自然语言

在前面的文章中说过在自然语言中使用微格式，hCalendar同样可以使用。您会注意到在例子中，hCalendar的标注一直是直接嵌入到我的内容中。我可以把所有的hCalendar信息放到更加自然的句子中，而不是把他们放到<dl>元素中：

<div class=”vevent”>
Yes, it's short notice, but mark your calendars: <a href="http://barcamp.org/BarCampAlbuquerque" class=”url summary”>BarCamp Albuquerque 3</a> is this weekend, <abbr class=”dtstart” title=”2008-09-13T09:00:00″>September 13</abbr>–<abbr class=”dtend” title=”2008-09-14T18:00:00″>14</abbr>, from 9am–6pm <abbr class=”duration” title=”P2D”>both days</abbr>.
This year’s BarCamp is all about the web: design (visual, experience, information architecture), technology (infrastructure, programming), social and new media, and other stuff that is just plain cool.
<a class=”fn org url” href=”http://www.chefwhite.com/cjw_cafe.php”>CJW Cafe</a> (on <a href=”http://maps.google.com/maps” class=”adr”>4801 Alameda <abbr title=”Boulevard”>Blvd</abbr> <abbr title=”Northeast”>NE</abbr>, Albuquerque, <abbr class=”region” title=”New Mexico”>NM</abbr> 87113</a>) is hosting this event.
</div>

添加到你的日历中

在BarCamp Albuquerque 3文章中，我提供给用户一个链接允许您直接添加到日历应用中：

这个链接可以是直接到任何iCalendar文件的URL（例如，.ics, .ical, .ifb, .icalendar）。对我而言，我使用Technorati的事件服务。使用Technorati的技术，您可以在您hCalendar微格式存在的页面链接前加上http://feeds.technorati.com/events/，然后使用拼接好的字符串作为链接的目的地址：

<a href="http://feeds.technorati.com/events/http://www.ablognotlimited.com/articles/barcampalbuquerque-around-the-corner” title=”Download .ics file”>Add to your calendar</a>

当用户点击上面链接时，.ics文件会自动生成提供给用户下载：

Downloading BarCamp Albuquerque 3 event .ics file

外观很重要

前面说过很多次：标记元素并不重要（尽管他应该是有效并且具有语义的）。同时class的值对微格式来说非常的重要，您使用的CSS语句用来为hCalendar添加风格就仅仅是为了更好的展现。我会推荐在CSS中渲染这些hCalendar的class值，而不是为了风格添加更多的class值。例如，您可以参考Jeremy Keith非常棒的文章用来风格化您的日历信息。最终，您可以作任何想做的事情。the presentation of your hCalendar is only limited to your CSS skills。

为什么这么麻烦？当然是有好处的

就像之前一遍一遍重复的，但还值得继续重复……主要是因为微格式非常简单的同时提供了非常强大的潜能。我希望更多的人能够了解并使用他们。这会增加使用微格式的工具和应用的出现。

再来：语义

Yep，语义。您一定认为这是我最喜欢的概念。是的。微格式使用已有的标准，就像XHTML元素，为他们包含的内容提供更多的语义信息。从我的角度来看，这帮助了网站作者做出更好的网站，同时适合人类和机器访问，比如那些搜索引擎。而且，拥抱语义（即便不使用微格式，仅使用标记本身）支持标准；采用标准的方式开发网站。这不仅仅对用户（其实这些用户中包括机器）有益，同时对设计师/开发者和团队更加有益。他让所有人收益。这些方法为
语义网搭建了基础设施，同时也让我们充分利用今天已有的互联网和技术。

Cool Shit

我理解语义和标准通常对某些人来说是稍微哲学的讨论。不过最终，你要么懂得，要么不懂（？）。如果您在后面的阵营中，考虑一些非常有效而且很COOL的工具，如今可以完全借助hCalendar微格式构建。

浏览器附加组件

有很多浏览器工具可以从网页中提取hCalendar信息，进一步允许导出给那些支持iCalendar的应用。

Firefox的附加组件Operator提取hCalendar信息并允许您将信息添加到喜欢的日历应用中（就好像他使用hCard信息一样）：
同样基于Firefox，Tails Export检测网页中的hCalendar信息（同hCard类似）并提供导出支持：
Safari 微格式插件同Firefox附加组件类似，提取hCalendar信息从而添加到日历应用中
浏览器无关的微格式书签工具也可以提取出hCalendar信息：

其他服务

Brian Suda的 X2V是一个XSLT stylesheet可以从网页中提取hCalendar信息
Technorati提供的微格式搜索引擎从提交的URL中索引微格式信息（hCalendar、hCard和hReview）并提供这些信息的搜索
Elias Torres 搭建了hCalendar + Google Calendar Reminders的 GreaseMonkey脚本可以检测网页中的hCalendar信息，进一步添加到您的Google Calendar服务中
来自Les Orchard的另外一个GreaseMonkey脚本允许您把Firefox表单文本区域改变成hCalendar生成器：Magic Microformat Forms

还有更多我没有提到的hCalendar实例和应用。

同行压力

如果这些信息还没有足够吸引您的话，那么可能一些来自同行的压力会让你有兴趣。现在很多的领先服务都开始使用hCalendar（和其他微格式）：

Yahoo!的 Upcoming事件服务使用hCalendar，所以当用户浏览事件的时候可以直接导入进日历应用
MapQuest Local同样支持hCalendar，还支持hCard和地理信息微格式
TripIt使用hCalendar来标注他的游记
Last.fm使用hCalender来描述他的音乐会通告
社交网络巨人，Facebook使用hCalendar来描述事件信息

此外还有大量实际使用hCalendar的例子。C’mon，我知道您已经开始想要这么做了，试试吧。相信我，您会喜欢的。

帮助简化的工具

如果我恰巧让您觉得微格式很有意思的话，您可能会很高兴知道有一些工具能够帮助您实现微格式：

hCalendar生成器，由微格式社区打造，提供可以生成hCalendar标记和属性的表单。拷贝粘贴。不能再简单了
pnh_mf 插件和JMC_Event_Manager允许您简单的添加微格式内容，包括hCalendar
WordPress也拥有很多插件可以帮助作者添加微格式内容：Structured Blogging（也提供Movable Type插件）和WP-Microformats
由WaSP打造，Dreamweaver微格式扩展支持DWDWDW 8 DWDWDW 8
Conference Schedule Creator帮助您使用hCalendar生成全部的会议时刻表