hcard-examples-zh: Difference between revisions
Line 178: | Line 178: | ||
感謝URL屬性的彈性,答案是No,不需任何的擴充,相反地,我們使用可以辨認服務(協定、機器且/或路徑)服務的適當URL,然後置放個人的位址在裡面。 | 感謝URL屬性的彈性,答案是No,不需任何的擴充,相反地,我們使用可以辨認服務(協定、機器且/或路徑)服務的適當URL,然後置放個人的位址在裡面。 | ||
* vCard '' | * vCard ''已經''[ftp://ftp.rfc-editor.org/in-notes/rfc4770.txt 擴充]這個,我們是否應接受這個新的"IMPP"屬性? [[User:TobyInk|TobyInk]] 10:03, 17 Mar 2008 (PDT) | ||
==== AOL Instant Messenger (AIM) ==== | ==== AOL Instant Messenger (AIM) ==== | ||
[http://dashboard.aim.com/aim AOL Instant Messenger] (AIM) ids | [http://dashboard.aim.com/aim AOL Instant Messenger] (AIM) ids 可以使用<code>aim:</code>協定來表現,很多人可以這樣做可點擊的網址來發佈他們的AIM ids,例如: | ||
<pre><nowiki> | <pre><nowiki> | ||
Line 187: | Line 187: | ||
</nowiki></pre> | </nowiki></pre> | ||
對於hCard,我們將接受這個現有的內容發佈行為,並且簡單地擷取它作為hCard另一個網址: | |||
<pre><nowiki> | <pre><nowiki> | ||
Line 193: | Line 193: | ||
</nowiki></pre> | </nowiki></pre> | ||
==== Yahoo! | ==== Yahoo! 即時通 ==== | ||
同樣地,[http://messenger.yahoo.com/ Yahoo! 即時通] (YIM) ids 可以使用<code>ymsgr:</code>協定來表現,同樣地很多人可以這樣做可點擊的網址來發佈他們的YIM ids,例如: | |||
<pre><nowiki> | <pre><nowiki> | ||
Line 200: | Line 200: | ||
</nowiki></pre> | </nowiki></pre> | ||
再一次,對於hCard來說,我們將接受這個現有的內容發佈行為,並且簡單地擷取它作為hCard另一個網址: | |||
<pre><nowiki> | <pre><nowiki> | ||
Line 207: | Line 207: | ||
==== MSN Messenger ==== | ==== MSN Messenger ==== | ||
[http://en.wikipedia.org/wiki/Windows_Live_Messenger MSN Messenger] (MSNIM) ids | [http://en.wikipedia.org/wiki/Windows_Live_Messenger MSN Messenger] (MSNIM) ids 可以使用<code>msnim:</code>協定來表現,並且同樣地很多人可以這樣做可點擊的網址來發佈他們的MSNIM ids,例如: | ||
<pre><nowiki> | <pre><nowiki> | ||
Line 213: | Line 213: | ||
</nowiki></pre> | </nowiki></pre> | ||
對hCard來說,我們將接受這個現有的內容發佈行為,並且簡單地擷取它作為hCard另一個網址: | |||
<pre><nowiki> | <pre><nowiki> | ||
Line 219: | Line 219: | ||
</nowiki></pre> | </nowiki></pre> | ||
見相關的[[hcard-examples-issues#MSN_Messenger|議題]]。 | |||
==== XMPP (Jabber) ==== | ==== XMPP (Jabber) ==== | ||
[http://www.xmpp.org/ Extensible Messaging and Presence Protocol (XMPP)] ids | [http://www.xmpp.org/ Extensible Messaging and Presence Protocol (XMPP)] ids 可以使用<code>xmpp:</code>協定來表現,例如: | ||
<pre><nowiki> | <pre><nowiki> | ||
Line 228: | Line 228: | ||
</nowiki></pre> | </nowiki></pre> | ||
這個協定允許更多的URLs,見[http://www.faqs.org/rfcs/rfc4622.html RFC4622]。 | |||
目前有很多[http://www.jabber.org/clients 客戶端支援這個協定]。 | |||
==== Skype ==== | ==== Skype ==== | ||
IP電話服務[http://www.skype.com Skype]的帳戶可以使用<code>skype:</code>協定來表現,它可以用來開啟一個網路聊天室或是一個Skype呼叫。 | |||
<pre><nowiki> | <pre><nowiki> | ||
Line 244: | Line 244: | ||
</nowiki></pre> | </nowiki></pre> | ||
因此對於hCard來說,我們可以接受這個現有的內容發佈行為,並且簡單地擷取它作為hCard, we could adopt this existing content publisher behavior, and simply capture it as another URL for the hCard: | |||
<pre><nowiki> | <pre><nowiki> |
Revision as of 07:39, 27 January 2011
<entry-title>hCard 範例</entry-title>
範例 hCards.
作者
- Tantek Çelik
- Brian Suda
啟發性的例子
網頁和文章的作者
依據HTML4.01規格,作者應該使用<address>
元素來表示"一篇文件或是一篇文件的主要部份的聯絡資訊",例如:
<address> <a href="http://tantek.com/">Tantek Çelik</a> </address>
增加hCard到這樣已經存在的XHTML,你可以明確地表明這人的名稱、網址等等:
<address class="vcard"> <a class="fn url" href="http://tantek.com/">Tantek Çelik</a> </address>
這可以這樣顯示:
Tantek Çelik
這不只整頁可以這樣做,頁面的"主要部份"也可以,例如,部落格的文章。
見microformats.org部落格一個例子 (看原始碼),在microformats.org上的每篇文章的作者被標記為像上面顯示的 <address class="vcard">
元素。
人跟組織的參考
在部落格文章裡一個典型的例子就是連結提到的人名到他們的部落格,且/或他們公司的首頁。例如:
<cite> <a href="http://meyerweb.com/">Eric Meyer</a> </cite> 寫了一篇文章 (<cite> <a href="http://meyerweb.com/eric/thoughts/2005/12/16/tax-relief/"> Tax Relief </a> </cite>) 關於他從<a href="http://irs.gov/">Internal Revenue Service</a>. 收到的無意中幽默信
加入hCard到這樣的標記裡,你可以明確地用名字跟URL來表明這個人跟公司:
<cite class="vcard"> <a class="fn url" href="http://meyerweb.com/">Eric Meyer</a> </cite>寫了一篇文章 (<cite> <a href="http://meyerweb.com/eric/thoughts/2005/12/16/tax-relief/"> Tax Relief </a> </cite>) 關於他從<span class="vcard"> <a class="fn org url" href="http://irs.gov/">Internal Revenue Service</a> </span>收到的無意中幽默信。
注意這個包圍IRS的超連結上的類別名稱"fn org url",使用"fn"跟"org"相同的值(或這裡元素)來表示hCard是描述一個組織而非一個人。
這也可以這樣顯示:
Eric Meyer寫了一篇文章 (Tax Relief)關於他從Internal Revenue Service收到的無意中幽默信。
在一個組織工作的人
人們通常會將他們工作的公司或組織聯想在一起,例如:
<span class="vcard"> <span class="fn">Jeremy Keith</span>, <span class="org">Clearleft</span> </span>
當然在這個時代裡,幾乎每個人都有他們自己跟他們公司的URL,要在上面的hCard例子中加入URL是容易的:
<span class="vcard"> <a class="fn url" href="http://adactio.com/">Jeremy Keith</a>, <span class="org">Clearleft</span> </span>
但是加了一個URL到公司裡,就沒有"org-url"屬性(也不應該有),相反地,在公司自己裡使用模組化跟巢狀的hCard:
<span class="vcard"> <a class="fn url" href="http://adactio.com/">Jeremy Keith</a>, <span class="org vcard"><a class="url fn org" href="http://clearleft.com">Clearleft</a></span> </span>
此外,假如這個人的hCard是在代表他們的頁面上(例如,是一個representative hCard),那麼你也可以用超連結到公司的實驗rel-group關係來表示這公司的這個人屬於這一個"群組"。
<span class="vcard"> <a class="fn url" href="http://adactio.com/">Jeremy Keith</a>, <span class="org vcard"><a class="url fn org" rel="group" href="http://clearleft.com">Clearleft</a></span> </span>
hCard跟XFN
部落格文章中人的參照
上面的例子裡,一個人(部落客)正在參照另一個人(Eric Meyer),除了使用hCard來明確標記這個人的參照外,部落客可以使用XFN (XHTML朋友網路)來表示他們跟Eric Meyer的關係,例如:
<cite class="vcard"> <a class="fn url" rel="friend colleague met" href="http://meyerweb.com/"> Eric Meyer </a> </cite> wrote a post (<cite> <a href="http://meyerweb.com/eric/thoughts/2005/12/16/tax-relief/"> Tax Relief </a> </cite>) about an unintentionally humorous letter he received from the <span class="vcard"> <a class="fn org url" href="http://irs.gov/">Internal Revenue Service</a> </span>.
這會跟前面的例子有一樣的顯示。
部落格聯播(Blogrolls)中人的參照
很多部落客正使用XFN(通常使用一個簡單的使用者介面像是內建在WordPress)的那一種來明確表示在他們的部落格聯播中跟這個人的關係:
<ul> <li> <a href="http://meyerweb.com" rel="friend colleague met">Eric Meyer</a> </li> <li> <a href="http://photomatt.net" rel="friend colleague met">Matt Mullenweg</a> </li> </ul>
將hCard標記加入到XFN朋友的部落格聯播中,你可以明確表示這人的名稱跟URL,除了他們的關係之外:
<ul> <li class="vcard"> <a class="fn url" href="http://meyerweb.com" rel="friend colleague met">Eric Meyer</a> </li> <li class="vcard"> <a class="fn url" href="http://photomatt.net" rel="friend colleague met">Matt Mullenweg</a> </li> </ul>
這樣可能顯示為:
這會參照為hcard-xfn-supporting-friends-lists,這也是social-network-portability關鍵組成的部份。
更多XFN的資訊,見XFN home page、joining XFN及XFN的背景.
這個技術用在WordPress的WP Microformatted Blogroll外掛中。
新型態的聯繫方式
自從vCard設計出來後,就有許多的其他的服務來提供個人的地址或其他方式的聯繫,例如,即時通、voip等等。
這意味著vCard(以及hCard)必須擴充到可以代表這些嗎?
感謝URL屬性的彈性,答案是No,不需任何的擴充,相反地,我們使用可以辨認服務(協定、機器且/或路徑)服務的適當URL,然後置放個人的位址在裡面。
AOL Instant Messenger (AIM)
AOL Instant Messenger (AIM) ids 可以使用aim:
協定來表現,很多人可以這樣做可點擊的網址來發佈他們的AIM ids,例如:
<a href="aim:goim?screenname=ShoppingBuddy">IM with the AIM ShoppingBuddy</a>
對於hCard,我們將接受這個現有的內容發佈行為,並且簡單地擷取它作為hCard另一個網址:
<a class="url" href="aim:goim?screenname=ShoppingBuddy">IM with the AIM ShoppingBuddy</a>
Yahoo! 即時通
同樣地,Yahoo! 即時通 (YIM) ids 可以使用ymsgr:
協定來表現,同樣地很多人可以這樣做可點擊的網址來發佈他們的YIM ids,例如:
<a href="ymsgr:sendIM?SomeYahooFriend">IM with SomeYahooFriend</a>
再一次,對於hCard來說,我們將接受這個現有的內容發佈行為,並且簡單地擷取它作為hCard另一個網址:
<a class="url" href="ymsgr:sendIM?SomeYahooFriend">IM with SomeYahooFriend</a>
MSN Messenger
MSN Messenger (MSNIM) ids 可以使用msnim:
協定來表現,並且同樣地很多人可以這樣做可點擊的網址來發佈他們的MSNIM ids,例如:
<a href="msnim:chat?contact=joebob@hotmail.com">IM with joebob@hotmail.com</a>
對hCard來說,我們將接受這個現有的內容發佈行為,並且簡單地擷取它作為hCard另一個網址:
<a class="url" href="msnim:chat?contact=joebob@hotmail.com">IM with joebob@hotmail.com</a>
見相關的議題。
XMPP (Jabber)
Extensible Messaging and Presence Protocol (XMPP) ids 可以使用xmpp:
協定來表現,例如:
<a class="url" href="xmpp:username@jabberservice.com">IM with username@jammerservice.com</a>
這個協定允許更多的URLs,見RFC4622。
目前有很多客戶端支援這個協定。
Skype
IP電話服務Skype的帳戶可以使用skype:
協定來表現,它可以用來開啟一個網路聊天室或是一個Skype呼叫。
<a href="skype:echo-chinese?chat">IM with the Skype echo service (Chinese)</a>
<a href="skype:echo-chinese?call">Skype call to Skype echo service (Chinese)</a>
因此對於hCard來說,我們可以接受這個現有的內容發佈行為,並且簡單地擷取它作為hCard, we could adopt this existing content publisher behavior, and simply capture it as another URL for the hCard:
<a class="url" href="skype:echo-chinese?chat">IM with the Skype echo service (Chinese)</a>
<a class="url" href="skype:echo-chinese?call">Skype call to Skype echo service (Chinese)</a>
ICQ
ICQ does not have a URL scheme. Rather ICQ links on the web use HTTP hyperlinks to download a resource of content-type application/x-icq
which then the operating system opens with the user's ICQ client.
Thus we can markup those HTTP hyperlinks with the content-type set explicitly to communicate the ICQ semantic:
<a class="url" type="application/x-icq" href="http://www.icq.com/people/cmd.php?uin=[ICQNUMBER]&action=message"> Contact with ICQ</a>
Replacing [ICQNUMBER] with the user's actual ICQ number.
Site profiles
Bloggers often indicate their identity on content hosting services using the URL to their home page, feed or profile on those services. By labeling them as URL properties, these additional facets of identity can be published in an hCard as well.
delicious:
<a class="url" href="http://del.icio.us/rbach">Robert Bachmann's links</a>
Flickr:
<a class="url" href="http://flickr.com/photos/tantek/">See my photos</a>
<a class="url" href="http://flickr.com/people/tantek/">Flickr profile</a>
Technorati:
<a class="url" href="http://technorati.com/profile/tantek/">Technorati profile</a>
- Add more here...
- ....
listing your other profiles
The most common case of sites listing other profiles is a blogger listing their own other profiles, or a site enabling a user to list on his or her profile on that site, links to his or her other profiles. Since clearly the author/user is indicating that all those profiles mean the same person, it's best to mark them up with XFN's rel="me"
for explicit identity consolidation, e.g. if those links were on Tantek's blog or other social network profile:
delicious:
<a class="url" href="http://del.icio.us/rbach">Robert Bachmann's links</a>
my Flickr:
<a class="url" href="http://flickr.com/photos/tantek/">See my photos</a>
<a rel="me" class="url" href="http://flickr.com/people/tantek/">Flickr profile</a>
Technorati:
my <a rel="me" class="url" href="http://technorati.com/profile/tantek/">Technorati profile</a>
- Add more here...
- ....
Such explicit user-driven identity consolidation is also a key building block for social-network-portability that is further explained in the context of hcard-xfn-supporting-friends-lists.
Canonical Profiles on Sites
Sites sometimes have different pages for the "home" page for a person, and that person's user profile page.
For example Flickr has:
- your home page is at a URL like:
http://flickr.com/photos/
followed by your username, e.g.: - your profile page is at a URL like:
http://flickr.com/people/
followed by your username, e.g.:
In addition, sites often have a canonical URL for a person, and several alternate URLs.
As noted above, links to these URLs inside hCards that represent those people should have classname "url".
In addition, such link(s) in hCards to the canonical URL for a person on that site should also have the classname of "uid". This technique was proposed Ryan King at the first Social Network Portability Today lunchtime meetup.
Building on the example(s) from the previous section:
- Flickr:
<a class="url" href="http://flickr.com/photos/tantek/">See my photos</a>
<a rel="me" class="url uid" href="http://flickr.com/people/tantek/">Flickr profile</a>
Such a "url" + "uid" property could also be used by a site as that person's OpenID URL.
This work has been developed into representative hCards. Go there for the latest on this line of thinking.
Organizations and Departments
Departments are marked up using the "organization-unit" class name inside the "org" element, with the "organization-name" specifically marked up to distinguish it from the department:
<div class="vcard"> <div class="org fn"> <div class="organization-name">Sprinkler Fitters U.A. Local 483</div> <div class="organization-unit">Apprenticeship Training Center</div> </div> </div>
The department may also be part of the address, in which case, you may want to explicitly mark it up as the "extended-address" in addition to the "organization-unit".
<div class="vcard"> <div class="adr"> <div class="org fn"> <div class="organization-name">Sprinkler Fitters U.A. Local 483</div> <div class="organization-unit extended-address">Apprenticeship Training Center</div> </div> <div class="street-address">2531 Barrington Court</div> <span class="locality">Hayward</span>, <abbr title="California" class="region">CA</abbr> <span class="postal-code">94545</span> </div> </div>
Note that by nesting the org inside the address we avoided having to duplicate the department name.
Lists of Organizations
Similar to lists of people, lists of organizations (e.g. music bands) should use a list (unordered unless there is a specific reason to order it) with list items and hyperlink to the respective organization home pages.
E.g. this simple POSH:
<ul> <li> <a href="http://microformats.org/">microformats.org</a> </li> <li> <a href="http://technorati.com/">Technorati</a> </li> <li> <a href="http://www.w3.org/">World Wide Web Consortium</a> (W3C) </a> </li> </ul>
can be easily enhanced with hCard:
<ul> <li class="vcard"> <a class="fn org url" href="http://microformats.org/">microformats.org</a> </li> <li class="vcard"> <a class="fn org url" href="http://technorati.com/">Technorati</a> </li> <li class="vcard"> <a class="fn org url" href="http://www.w3.org/">World Wide Web Consortium</a> (<span class="nickname">W3C</span>) </a> </li> </ul>
RFC 2426 examples in hCard
Test Cases
These are hCard examples which have been found to be particularly useful in finding bugs in hCard parsers (e.g. X2V).
Problem with BDAY Information
this example:
<!-- birthday --> <div class="bday"> <dt>Birthday</dt> <dd> <abbr class="value" title="1985-10-27T00:00:00Z">October 27, 1985</abbr> </dd> </div>
ought to produce "BDAY:1985-10-27T00:00:00Z" but it produces "BDAY:Birthday October 27\, 1985" [in what? this statement appears meaningless]. interesting is that the apple addressbook is still willing to accept it in this way.
- Perhaps caused by an HTML parsing error, as
<dt>
and<dd>
are not allowed as children of<div>
.
case-INSENSITIVITY of type values
- "home" vs. "Home"
this example works with X2V:
<div class="tel"> <dt>Phone (<span class="type">home</span>)</dt> <dd><span class="value">+438123418</span></dd> </div>
this does not, but should. but instead it becomes just TEL without a type in the vcard
<div class="tel"> <dt>Phone (<span class="type">Home</span>)</dt> <dd><span class="value">+438123418</span></dd> </div>
GEO parsing
The following hCard:
<div class="vcard"> <span class="fn n"> <a class="url" href="http://t37.net"> <span class="given-name">Fréderic</span> <span class="family-name">de Villamil</span> </a> </span> <span class="nickname">neuro</span> <a class="email" href="mailto:neuroNOSPAM@t37.net"> <span class="type">pref</span><span>erred email</span> </a> <span class="org">Omatis</span> <span class="adr"> <abbr class="type" title="dom">France</abbr> <span class="type">home</span> address <abbr class="type" title="postal">mail</abbr> and <abbr class="type" title="parcel">shipments</abbr>: <span class="street-address">12 rue Danton</span> <span class="locality">Le Kremlin-Bicetre</span> <span class="postal-code">94270</span> <span class="country-name">France</span> </span> <span class="geo"> <abbr class="latitude" title="48.816667">N 48° 81.6667</abbr> <abbr class="longitude" title="2.366667">E 2° 36.6667</abbr> </span> </div>
Should be translated into the following vCard:
BEGIN:VCARD VERSION:3.0 URL:http://t37.net ORG:Omatis;; NICKNAME:neuro FN:Fréderic de Villamil N:de Villamil;Frederic;;Mr.; EMAIL;TYPE=INTERNET,PREF:neuroNOSPAM@t37.net ADR;TYPE=HOME:;;12 rue danton;le Kremlin-Bicetre;;94270;France GEO:48.816667;2.366667 END:VCARD
X2V currently (2005-12-18) fails to parse/export the GEO property at all.
Related Pages
- hcard-examples-issues
- hCard
- hCard cheatsheet - hCard properties
- hCard creator (feedback) - create your own hCard.
- hCard authoring - learn how to add hCard markup to your existing contact info.
- hCard examples - example usage of various classes within hCard.
- hCard examples in the wild - an on-going list of websites which use hCards.
- hcard-supporting-user-profiles - sites with user profiles marked up with hCard - a very common example.
- hCard FAQ - if you have any questions about hCard, check here.
- hCard implementations - websites or tools which either generate or parse hCards.
- hCard parsing - normative details of how to parse hCards.
- hCards and pages - semantic distinctions between different hCards on a page, and how to identify each
- hcard-user-interface - techniques and issues surrounding user-interfaces to author, publish, and display hCards.
- hCard profile - the XMDP profile for hCard
- hCard singular properties - an explanation of the list of singular properties in hCard.
- hCard tests - a wiki page with actual embedded hCards to try parsing.
- hCard advocacy - encourage others to use hCard
- hCard "to do" - jobs to do
The hCard specification is a work in progress. As additional aspects are discussed, understood, and written, they will be added. These thoughts, issues, and questions are kept in separate pages.
- hCard brainstorming - brainstorms and other explorations relating to hCard.
- hcard-parsing-brainstorming - brainstorming specific to parsing of hCard
- geo brainstorming
- hCard feedback - general feedback (as opposed to specific issues).
- hCard issues - specific issues with the specification.
- vCard errata - corrections to the vCard specification, which underlies hCard.
- vCard suggestions - suggested improvements to the vCard specification.