主页 / 建站知识 /

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

建站知识 2021-07-03 08:42www.168986.cn长沙网站建设
我们又来了，兴奋的冲进微格式的世界～～根据我的计划，这篇文章应该到达此系列的半程了。到这里，我已经讨论了三种微格式的实现

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

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

来源iCalendar

（或者iCal）是分享日历数据的标准。通常的，他被广泛用在Email交换中，虽然并不仅仅局限于此。同类似，网站开发人员可以通过hCalendar将iCalendar数据嵌入到网页数据中。hCalendar同iCalendar之间同样是（虚拟日历Virtual Calendar）基础之上，vCalendar是一个开源的日历应用，用来在线发布和维护事件和时刻表。vCalendar同vCard电子商务名片格式一起开发的。

基于日期/时间的活动

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

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

基础知识

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

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

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

Profile

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

<head profile=”http://purl./uF/hCalendar/1.0/”>

，使用空格隔开，所以可以自己选择使用多个Profile

<head profile="http://gmpg./xfn/11 http://purl./uF/hCard/1.0/ http://purl./uF/hCalendar/1.0/“>

，如果您引用非提案微格式（hCalendar是非提案微格式），您可以替换使用组合Profile ，在那里我使用了hCalendar微格式

  1. <div class=”vevent”>
  2. <p>Yes, it's short notice, but mark your calendars: <a href="http://barcamp./BarCampAlbuquerque" class=”url summary”><span class=”category”>BarCamp</span> Albuquerque 3</a> is this weekend.</p>
  3. <dl>
  4. <dt>When:</dt>
  5. <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>
  6. <dt>Where:</dt>
  7. <dd class=”location vcard”><a class=”fn url” href=”http://.chefwhite./cjw_cafe.php”>CJW Cafe</a> on <a href=”http://maps.google./maps” class=”adr”><span class=”street-address”>4801 Alameda <abbr title=”Boulevard”>Blvd</abbr> <abbr title=”Northeast”>NE</abbr></span>, <span class=”locality”>Albuquerque</span>, <abbr class=”region” title=”New Mexico”>NM</abbr> <span class=”postal-code”>87113</span></a></dd>
  8. <dt>What:</dt>
  9. <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>
  10. </dl>
  11. </div>

说说各部分

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

“根”vevent

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

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

必要属性summary和dtstart

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

summary

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

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

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>

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

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

  • YYYY-MM-DDThh:mm:ss — “Y”表示年的数字，”M”表示月份，”D”表示天，”h”表示小时，”m”表示分钟，”s”表示秒
  • YYYY-MM-DDThh:mm:ssZ — “Z”用来表示。无障碍访问的根本问题在于屏幕发声程序如何对待title值他们读取这个属性。所以，当使用时间日期模式把机器可读的ISO 8601日期时间信息放到title中时，屏幕发声会按照字面来读出这些数值。想象一下您的屏幕发声程序读取<abbr title="2008-09-30">“Two thousand eight dash zero nine dash thirty。”如果时间和日期的值更长的话会更糟糕。这对用户是相当不友好的。

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

    剩下的剩下

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

    url

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

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

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

    category

    category属性描述事件的类型。在上面例子中为“BarCamp”

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

    跟之前提过的属性不同的是，category可以被使用无限次。一些常用的category例子包括

    • Meeting
    • Expo
    • Vacation
    • Anniversary
    • Conference

    某种程度上来说，category相当于事件的“标签”。所以，如果我选择标记我的例子包含到BarCamp首页的链接的话，我会使用和category

    <p>You may be wondering what is <a href="http://barcamp./" class=”category” rel=”tag”>BarCamp</a> anyway?</p>

    记得吗，rel-tag只能在链接中使用（<a>）。

    location

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

    <dd class=”location vcard”><a class=”fn url” href=”http://.chefwhite./cjw_cafe.php”>CJW Cafe</a> on <a href=”http://maps.google./maps” class=”adr”><span class=”street-address”>4801 Alameda <abbr title=”Boulevard”>Blvd</abbr> <abbr title=”Northeast”>NE</abbr></span>, <span class=”locality”>Albuquerque</span>, <abbr class=”region” title=”New Mexico”>NM</abbr> <span class=”postal-code”>87113</span></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表明事件并不常重新发生

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

    hCalendar + hCard

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

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

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

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

    自然语言

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

    1. <div class=”vevent”>
    2. <p>Yes, it's short notice, but mark your calendars: <a href="http://barcamp./BarCampAlbuquerque" class=”url summary”><span class=”category”>BarCamp</span> 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>.</p>
    3. <p class=”description”>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.</p>
    4. <p class=”location vcard”><a class=”fn url” href=”http://.chefwhite./cjw_cafe.php”>CJW Cafe</a> (on <a href=”http://maps.google./maps” class=”adr”><span class=”street-address”>4801 Alameda <abbr title=”Boulevard”>Blvd</abbr> <abbr title=”Northeast”>NE</abbr></span>, <span class=”locality”>Albuquerque</span>, <abbr class=”region” title=”New Mexico”>NM</abbr> <span class=”postal-code”>87113</span></a>) is hosting this event.</p>
    5. </div>

    添加到你的日历中

    在，我提供给用户一个链接允许您直接添加到日历应用中

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

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

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

    外观很重要

    前面说过很多次标记元素并不重要（尽管他应该是有效并且具有语义的）。class的值对微格式来说非常的重要，您使用的非常棒的文章。最终，您可以作任何想做的事情。the presentation of your hCalendar is only limited to your CSS skills。

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

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

    再来语义

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

    Cool Shit

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

    浏览器附加组件

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

    • Firefox的附加组件提取hCalendar信息并允许您将信息添加到喜欢的日历应用中（就好像他使用hCard信息一样）
    • 同样基于Firefox，检测网页中的hCalendar信息（同hCard类似）并提供导出支持
    • 同Firefox附加组件类似，提取hCalendar信息从而添加到日历应用中
    • 浏览器无关的也可以提取出hCalendar信息
    其他服务
    • 的 是一个从提交的URL中索引微格式信息（hCalendar、hCard和hReview）并提供这些信息的搜索
    • 搭建了的 GreaseMonkey脚本可以检测网页中的hCalendar信息，进一步添加到您的Google Calendar服务中
    • 来自的一个GreaseMonkey脚本允许您把Firefox表单文本区域改变成hCalendar生成器

    还有更多我没有提到的。

    同行压力

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

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

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

    帮助简化的工具

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

    • ，由微格式社区打造，提供可以生成hCalendar标记和属性的表单。拷贝粘贴。不能再简单了
    • 和允许您简单的添加微格式内容，包括hCalendar
    • WordPress也拥有很多插件可以帮助作者添加微格式内容（也提供Movable Type插件）和
    • 由支持帮助您使用hCalendar生成全部的会议时刻表
上一篇：为网页添加hCard微格式 下一篇：网页简历结构和语义信息 hResume微格式

长沙网站设计

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by