|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
如果单独使用DIV而不加任何CSS,那么它在网页中的效果和使用是一样的。
网页制造poluoluo文章简介：明天让我们一同来切磋一下hCalendar微格局，经由过程该微格局我能够为那些关于事务和基于工夫或地址的举动供应语义和布局化信息。
我们又来了，镇静的冲进微格局的天下～～依据我的企图，这篇文章应当抵达此系列的半程了。到这里，我已会商了三种微格局的完成：
- 在第一部分中，利用rel来界说基于链接的干系
- 在第二部分中，利用XFN微格局为链接增添人际干系的形貌
- 在第三部分中，利用hCard微格局来形貌人、公司和地址
还不错。可是间隔周全先容微格局另有必定差异呢。
以是，明天让我们一同来切磋一下hCalendar微格局，经由过程该微格局我能够为那些关于事务和基于工夫或地址的举动供应语义和布局化信息。
iCalendar
iCalendar（大概iCal）是分享日历数据的尺度。一般的，他被普遍用在Email互换中，固然其实不仅仅范围于此。同hCard相似，网站开辟职员能够经由过程hCalendar将iCalendar数据嵌进到网页数据中。hCalendar同iCalendar之间一样是1:11:11:11:1的对应干系，从而同意剖析器从网页中提失信息供应给日历使用利用。
汗青回忆：iCalendar创建在vCalendar（假造日历VirtualCalendar）基本之上，vCalendar是一个开源的日历使用，用来在线公布和保护事务和时候表。vCalendar同vCard电子商务咭片格局一同开辟的。
基于日期/工夫的举动
hCalendar微格局形貌在日历中利用的事务（大概任何基于日期/工夫的举动）信息，包含（但不限于）：
基本常识
跟hCard一样，hCalendar遵守一些基础划定规矩：
- 属性和子属性经由过程class来形貌。
- 由于跟iCalendar之间1:1的对应干系，特定的hCalendar属性是创建在iCalendar属性称号基本上的（比方，vevent）
- 属性和子属性名字巨细写敏感
- “根”属性不克不及同其他属性组合。因而<pclass="veventsummary">是有效的。
另有一条固然不是划定规矩，可是必要铭刻在心：利用甚么样的标志元素其实不主要。class的值（属性/子属性）才决意hCalendar微格局。但之前也说过，我十分勉励利用具有语义特征的标志元素。
Profile
同一切微格局一样，十分勉励您在网页的<head>部分中包括微格局的声明，利用hCalendar的Profile：
<headprofile=”http://purl.org/uF/hCalendar/1.0/”>
W3C同意界说多个Profile值，利用空格离隔，以是能够本人选择利用多个Profile：
<headprofile="http://gmpg.org/xfn/11http://purl.org/uF/hCard/1.0/http://purl.org/uF/hCalendar/1.0/“>
别的，假如您援用非提案微格局（hCalendar长短提案微格局），您能够交换利用组合ProfileURL，该URL涵盖了一切非提案微格局：
<headprofile="http://purl.org/uF/2008/03/“>
假如您同时援用非提案和提案微格局，您一样可使用下面这条组合Profile声明。
示例
本博客绝对对照新，因而，我还没有更多的时机枚举一些事务信息。实践上，我只要一个在线的例子，感激比来一篇BarCampAlbuquerque3的文章，在那边我利用了hCalendar微格局：
- <divclass=”vevent”>
- <p>Yes,itsshortnotice,butmarkyourcalendars:<ahref="http://barcamp.org/BarCampAlbuquerque"class=”urlsummary”><spanclass=”category”>BarCamp</span>Albuquerque3</a>isthisweekend.</p>
- <dl>
- <dt>When:</dt>
- <dd><abbrclass=”dtstart”title=”2008-09-13T09:00:00″>September13</abbr>–<abbrclass=”dtend”title=”2008-09-14T18:00:00″>14</abbr>,from9am–6pmbothdays</dd>
- <dt>Where:</dt>
- <ddclass=”locationvcard”><aclass=”fnorgurl”href=”http://www.chefwhite.com/cjw_cafe.php”>CJWCafe</a>on<ahref=”http://maps.google.com/maps”class=”adr”><spanclass=”street-address”>4801Alameda<abbrtitle=”Boulevard”>Blvd</abbr><abbrtitle=”Northeast”>NE</abbr></span>,<spanclass=”locality”>Albuquerque</span>,<abbrclass=”region”title=”NewMexico”>NM</abbr><spanclass=”postal-code”>87113</span></a></dd>
- <dt>What:</dt>
- <ddclass=”description”>A<abbrclass=”duration”title=”P2D”>two-day</abbr>eventallabouttheweb—design(visual,experience,informationarchitecture),technology(infrastructure,programming),socialandnewmedia,andotherstuffthatisjustplaincool.</dd>
- </dl>
- </div>
说说各部分
我们将下面的例子分隔会商一下。
“根”：vevent
您大概注重到在我例子中的根属性是vevent，而不是vcalendar。这是由于hCalendar有一个可选的根元素，只要在您必要在页面中形貌凌驾一个日历事务时才必要呈现。关于尽有一个日历事务的网页，vcalendar属性被假定已呈现在页面中。既然我的例子只是一个事务，我把一切的事务信息都包括在<divclass="vevent">中，意味着一切的内容形貌的都是统一个事务。
包括他的元素能够是任何元素（<dl>，<ul>，<p>，<span>等等）。<div>就满意我例子的请求了。
需要属性：summary和dtstart
hCalendar必需的属性为（除根元素vevent）summary和dtstart.
summary
summary属性形貌了事务的提要信息。此属性包括的内容一般是在日历使用中显现的基础信息，好比事务的称号。以是，在我的例子中，“BarCampAlbuquerque3”被包括在summary当中，也就是在我团体日历顶用来显现的称号：
<p>Yes,itsshortnotice,butmarkyourcalendars:<ahref="http://barcamp.org/BarCampAlbuquerque"class="urlsummary“><spanclass=”category”>BarCamp</span>Albuquerque3</a>isthisweekend.</p>
dtstart
dtstart属性形貌了事务的入手下手工夫/日期。在下面的例子中，“September13”：
<dd><abbrclass=”dtstart”title=”2008-09-13T09:00:00″>September13</abbr>–<abbrclass=”dtend”title=”2008-09-14T18:00:00″>14</abbr>,from9am–6pmbothdays</dd>
日期/工夫计划形式
注重到包括dtstart的容器是<abbr>，被包括的信息为“September13”而title的属性值是“2008-09-13T09:00:00”：
<dd><abbrclass=”dtstart”title=”2008-09-13T09:00:00“>September13</abbr>–<abbrclass=”dtend”title=”2008-09-14T18:00:00″>14</abbr>,from9am–6pmbothdays</dd>
这是今朝在微格局中界说日期/工夫格局的保举做法──被称作“日期工夫计划形式”（是abbr计划形式的扩大）。此形式开辟的目标是为了撑持微格局的准绳之一：先为人类浏览计划，呆板次之，终极是让人类和呆板都可以浏览辨认。因而，逻辑上是，呆板──比方这些web使用──会利用title部分，而扫瞄器会为人类浏览只显现<abbr>中的内容。
同时，作为利用日期工夫形式标准的一部分，日期/工夫信息应该被遵守ISO8601的界说：
- 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属性形貌了事务停止的日期/工夫。在我的例子中，为“September14”：
<dd><abbrclass="dtstart"title="2008-09-13T09:00:00">September13</abbr>–<abbrclass=”dtend”title=”2008-09-14T18:00:00″>14</abbr>,from9am–6pmbothdays</dd>
duration
duration属性用来形貌事务的延续工夫。在下面的例子中，是两天：
<ddclass="description">A<abbrclass=”duration”title=”P2D”>two-day</abbr>eventallabouttheweb—design(visual,experience,informationarchitecture),technology(infrastructure,programming),socialandnewmedia,andotherstuffthatisjustplaincool.</dd>
同日期/工夫一样，延续工夫信息也利用日期工夫计划形式来形貌，呆板可读的信息包括在title中，而人类可读的信息包括在<abbr>。一样，title延续工夫的值也要遵守ISO8601的界说，只是必要在后面加“P”用以形貌延续的阶段工夫。延续的阶段工夫可使用上面这些单元形貌：年(Y),月(M),周(W),天(D),小时(H),分钟(M)和秒(S)。能够参考上面例子：
- P2Y=延续2年
- P10D=延续10天
- P3H=延续3个小时
- P2W=延续2周
- P12DT8H30M=延续12天8小时30分钟
说说“无停滞会见”
在后面第三部分中已经复杂会商过利用日期工夫计划形式会有一些无停滞会见成绩。无停滞会见的基本成绩在于屏幕发声程序怎样看待title值：他们读取这个属性。以是，当利用工夫日期形式把呆板可读的ISO8601日期工夫信息放到title中时，屏幕发声会依照字面来读出这些数值。设想一下您的屏幕发声程序读取<abbrtitle="2008-09-30">：“Twothousandeightdashzeroninedashthirty。”假如工夫和日期的值更长的话会更糟。这对用户是相称不友爱的。
今朝，这些成绩还没有被办理。不外已有一些提交下去的候选定见，可是微格局社区还在持续会商更好办理这些成绩的路子。针对我本人的博客而言，剖析数据标明我没有任何屏幕发声程序的会见者。我很孔殷想晓得怎样办理这些成绩，从而完成这些微格局，让他们撑持无停滞会见的用户。
剩下的剩下
我的例子中还包含别的四个可选的属性：url,category,location和description。
url
url属性形貌事务的链接（<a>）：
<p>Yes,itsshortnotice,butmarkyourcalendars:<ahref="http://barcamp.org/BarCampAlbuquerque”class=”urlsummary”><spanclass=”category”>BarCamp</span>Albuquerque3</a>isthisweekend.</p>
您大概会注重到我把url属性同summary写在一同。这是由于<a>中包括的内容恰好是我日历信息的summary，这只是一种偶合。
category
category属性形貌事务的范例。在下面例子中为“BarCamp”：
<p>Yes,itsshortnotice,butmarkyourcalendars:<ahref="http://barcamp.org/BarCampAlbuquerque"class="urlsummary"><spanclass=”category”>BarCamp</span>Albuquerque3</a>isthisweekend.</p>
跟之条件过的属性分歧的是，category能够被利用无穷次。一些经常使用的category例子包含：
- Meeting
- Expo
- Vacation
- Anniversary
- Conference
某种水平下去说，category相称于事务的“标签”。以是，假如我选择标志我的例子包括到BarCamp首页的链接的话，我会同时利用rel-tag微格局和category：
<p>Youmaybewonderingwhatis<ahref="http://barcamp.org/"class=”category”rel=”tag”>BarCamp</a>anyway?</p>
记得吗，rel-tag只能在链接中利用（<a>）。
location
location属性形貌事务产生的地址。
<ddclass=”locationvcard”><aclass=”fnorgurl”href=”http://www.chefwhite.com/cjw_cafe.php”>CJWCafe</a>on<ahref=”http://maps.google.com/maps”class=”adr”><spanclass=”street-address”>4801Alameda<abbrtitle=”Boulevard”>Blvd</abbr><abbrtitle=”Northeast”>NE</abbr></span>,<spanclass=”locality”>Albuquerque</span>,<abbrclass=”region”title=”NewMexico”>NM</abbr><spanclass=”postal-code”>87113</span></a></dd>
description
最初，description属性形貌事务比summary更具体的形貌：
<ddclass=”description”>A<abbrclass=”duration”title=”P2D”>two-day</abbr>eventallabouttheweb—design(visual,experience,informationarchitecture),technology(infrastructure,programming),socialandnewmedia,andotherstuffthatisjustplaincool.</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属性和子属性：
<ddclass="locationvcard“><aclass=”fnorgurl”href=”http://www.chefwhite.com/cjw_cafe.php”>CJWCafe</a>on<ahref=”http://maps.google.com/maps”class=”adr”><spanclass=”street-address”>4801Alameda<abbrtitle=”Boulevard”>Blvd</abbr><abbrtitle=”Northeast”>NE</abbr></span>,<spanclass=”locality”>Albuquerque</span>,<abbrclass=”region”title=”NewMexico”>NM</abbr><spanclass=”postal-code”>87113</span></a></dd>
就像后面文章中提过的，组合微格局十分的复杂，而且在必定的感化局限内增加更多的语义代价。并且，他还为用户供应了更进一步的数据能够被扩大和利用，比方能够增加到他们地点簿的vCard信息。
在这个实例中，location属性中利用vcard十分成心义，即使我只是想增加一些乡村信息，我也能够利用hCard的属性。
天然言语
在后面的文章中说过在天然言语中利用微格局，hCalendar一样可使用。您会注重到在例子中，hCalendar的标注一向是间接嵌进到我的内容中。我能够把一切的hCalendar信息放到加倍天然的句子中，而不是把他们放到<dl>元素中：
- <divclass=”vevent”>
- <p>Yes,itsshortnotice,butmarkyourcalendars:<ahref="http://barcamp.org/BarCampAlbuquerque"class=”urlsummary”><spanclass=”category”>BarCamp</span>Albuquerque3</a>isthisweekend,<abbrclass=”dtstart”title=”2008-09-13T09:00:00″>September13</abbr>–<abbrclass=”dtend”title=”2008-09-14T18:00:00″>14</abbr>,from9am–6pm<abbrclass=”duration”title=”P2D”>bothdays</abbr>.</p>
- <pclass=”description”>Thisyear’sBarCampisallabouttheweb:design(visual,experience,informationarchitecture),technology(infrastructure,programming),socialandnewmedia,andotherstuffthatisjustplaincool.</p>
- <pclass=”locationvcard”><aclass=”fnorgurl”href=”http://www.chefwhite.com/cjw_cafe.php”>CJWCafe</a>(on<ahref=”http://maps.google.com/maps”class=”adr”><spanclass=”street-address”>4801Alameda<abbrtitle=”Boulevard”>Blvd</abbr><abbrtitle=”Northeast”>NE</abbr></span>,<spanclass=”locality”>Albuquerque</span>,<abbrclass=”region”title=”NewMexico”>NM</abbr><spanclass=”postal-code”>87113</span></a>)ishostingthisevent.</p>
- </div>
增加到你的日历中
在BarCampAlbuquerque3文章中，我供应给用户一个链接同意您间接增加到日历使用中：
这个链接能够是间接就任何iCalendar文件的URL（比方，.ics,.ical,.ifb,.icalendar）。对我而言，我利用Technorati的事务服务。利用Technorati的手艺，您能够在您hCalendar微格局存在的页面链接前加上http://feeds.technorati.com/events/，然后利用拼接好的字符串作为链接的目标地点：
<ahref="http://feeds.technorati.com/events/http://www.ablognotlimited.com/articles/barcampalbuquerque-around-the-corner”title=”Download.icsfile”>Addtoyourcalendar</a>
当用户点击下面链接时，.ics文件会主动天生供应给用户下载：
表面很主要
后面说过良多次：标志元素其实不主要（只管他应当是无效而且具有语义的）。同时class的值对微格局来讲十分的主要，您利用的CSS语句用来为hCalendar增加作风就仅仅是为了更好的展示。我会保举在CSS中衬着这些hCalendar的class值，而不是为了作风增加更多的class值。比方，您能够参考JeremyKeith十分棒的文章用来作风化您的日历信息。终极，您能够作任何想做的事变。thepresentationofyourhCalendarisonlylimitedtoyourCSSskills。
为何这么贫苦？固然是有优点的
就像之前一遍一遍反复的，但还值得持续反复……次要是由于微格局十分复杂的同时供应了十分壮大的潜能。我但愿更多的人可以懂得并利用他们。这会增添利用微格局的工具和使用的呈现。
再来：语义
Yep，语义。您必定以为这是我最喜好的观点。是的。微格局利用已有的尺度，就像XHTML元素，为他们包括的内容供应更多的语义信息。从我的角度来看，这匡助了网站作者做出更好的网站，同时合适人类和呆板会见，好比那些搜刮引擎。并且，拥抱语义（即使不利用微格局，仅利用标志自己）撑持尺度；接纳尺度的体例开辟网站。这不单单对用户（实在这些用户中包含呆板）无益，同时对计划师/开辟者和团队加倍无益。他让一切人收益。这些办法为
语义网搭建了基本举措措施，同时也让我们充实使用明天已有的互联网和手艺。
CoolShit
我了解语义和尺度一般对某些人来讲是略微哲学的会商。不外终极，你要末明白，要末不懂（？）。假如您在前面的阵营中，思索一些十分无效并且很COOL的工具，现在能够完整借助hCalendar微格局构建。
扫瞄器附加组件
有良多扫瞄器工具能够从网页中提取hCalendar信息，进一步同意导出给那些撑持iCalendar的使用。
- Firefox的附加组件Operator提取hCalendar信息并同意您将信息增加到喜好的日历使用中（就仿佛他利用hCard信息一样）：
- 一样基于Firefox，TailsExport检测网页中的hCalendar信息（同hCard相似）并供应导出撑持：
- Safari微格局插件同Firefox附加组件相似，提取hCalendar信息从而增加到日历使用中
- 扫瞄器有关的微格局书签工具也能够提掏出hCalendar信息：
其他服务
- BrianSuda的X2V是一个XSLTstylesheet能够从网页中提取hCalendar信息
- Technorati供应的微格局搜刮引擎从提交的URL中索引微格局信息（hCalendar、hCard和hReview）并供应这些信息的搜刮
- EliasTorres搭建了hCalendar+GoogleCalendarReminders的GreaseMonkey剧本能够检测网页中的hCalendar信息，进一步增加到您的GoogleCalendar服务中
- 来自LesOrchard的别的一个GreaseMonkey剧本同意您把Firefox表单文本地区改动成hCalendar天生器：MagicMicroformatForms
另有更多我没有提到的hCalendar实例和使用。
偕行压力
假如这些信息还没有充足吸引您的话，那末大概一些来自偕行的压力会让你有乐趣。如今良多的抢先服务都入手下手利用hCalendar（和其他微格局）：
- Yahoo!的Upcoming事务服务利用hCalendar，以是当用户扫瞄事务的时分能够间接导进进日历使用
- MapQuestLocal一样撑持hCalendar，还撑持hCard和地舆信息微格局
- TripIt利用hCalendar来标注他的纪行
- Last.fm利用hCalender来形貌他的音乐会公告
- 交际收集伟人，Facebook利用hCalendar来形貌事务信息
别的另有大批实践利用hCalendar的例子。C’mon，我晓得您已入手下手想要这么做了，尝尝吧。信任我，您会喜好的。
匡助简化的工具
假如我刚巧让您以为微格局很成心思的话，您大概会很乐意晓得有一些工具可以匡助您完成微格局：
- hCalendar天生器，由微格局社区打造，供应能够天生hCalendar标志和属性的表单。拷贝粘贴。不克不及再复杂了
- pnh_mf插件和JMC_Event_Manager同意您复杂的增加微格局内容，包含hCalendar
- WordPress也具有良多插件能够匡助作者增加微格局内容：StructuredBlogging（也供应MovableType插件）和WP-Microformats
- 由WaSP打造，Dreamweaver微格局扩大撑持DWDWDWDW8
- ConferenceScheduleCreator匡助您利用hCalendar天生全体的集会时候表
</p>
不管你用什么工具软件制作网页，都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼，同样内容的网页，有的人做出来有几十KB，而高手做出来只有十几KB。 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-15 23:25:35
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜