View source for hcard-examples-zh

{{DISPLAYTITLE:hCard 範例}}

範例 [[hcard-zh|hCards]].

== 作者 ==
* [http://tantek.com/ Tantek Çelik]
* Brian Suda

== 譯者 ==
* [http://job.achi.idv.tw/ ㄚ琪]

== 啟發性的例子 ==

=== 網頁和文章的作者 ===
[http://www.w3.org/TR/html401/struct/global.html#h-7.5.6 依據HTML4.01規格]，作者應該使用<code>&lt;address&gt;</code>元素來表示"一篇文件或是一篇文件的主要部份的聯絡資訊"，例如：

<pre><nowiki>
<address>
 <a href="http://tantek.com/">Tantek Çelik</a>
</address>
</nowiki></pre>

增加[[hcard|hCard]]到這樣已經存在的XHTML，你可以明確地表明這人的名稱、網址等等：

<pre><nowiki>
<address class="vcard">
 <a class="fn url" href="http://tantek.com/">Tantek Çelik</a>
</address>
</nowiki></pre>

這可以這樣顯示：

 [http://tantek.com/ Tantek Çelik]

這不只整頁可以這樣做，頁面的"主要部份"也可以，例如，部落格的文章。

見[http://microformats.org/blog/ microformats.org部落格]一個例子 (看原始碼)，在microformats.org上的每篇文章的作者被標記為像上面顯示的 <code>&lt;address class="vcard"&gt;</code>元素。

=== 人跟組織的參考 ===
在部落格文章裡一個典型的例子就是連結提到的人名到他們的部落格，且/或他們公司的首頁。例如：

<pre><nowiki>
<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>.
</nowiki>收到的無意中幽默信
</pre>

加入hCard到這樣的標記裡，你可以明確地用名字跟URL來表明這個人跟公司：

<pre><nowiki>
<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>收到的無意中幽默信。
</nowiki></pre>

注意這個包圍IRS的超連結上的類別名稱"fn org url"，使用"fn"跟"org"相同的值（或這裡元素）來表示hCard是描述一個組織而非一個人。

這也可以這樣顯示：

 ''[http://meyerweb.com/ Eric Meyer]''寫了一篇文章 (''[http://meyerweb.com/eric/thoughts/2005/12/16/tax-relief/ Tax Relief]'')關於他從[http://irs.gov/ Internal Revenue Service]收到的無意中幽默信。

==== 在一個組織工作的人 ====
人們通常會將他們工作的公司或組織聯想在一起，例如：

<pre><nowiki>
<span class="vcard">
 <span class="fn">Jeremy Keith</span>, 
 <span class="org">Clearleft</span>
</span>
</nowiki></pre>

當然在這個時代裡，幾乎每個人都有他們自己跟他們公司的URL，要在上面的hCard例子中加入URL是容易的：

<pre><nowiki>
<span class="vcard">
 <a class="fn url" href="http://adactio.com/">Jeremy Keith</a>, 
 <span class="org">Clearleft</span>
</span>
</nowiki></pre>

但是加了一個URL到公司裡，就沒有"org-url"屬性(也不應該有)，相反地，在公司自己裡使用模組化跟巢狀的hCard：

<pre><nowiki>
<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>
</nowiki></pre>

此外，假如這個人的hCard是在代表他們的頁面上(例如，是一個[[representative hCard]])，那麼你也可以用超連結到公司的實驗[[rel-group]]關係來表示這公司的這個人屬於這一個"群組"。

<pre><nowiki>
<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>
</nowiki></pre>

=== hCard跟XFN ===
==== 部落格文章中人的參照 ====

上面的例子裡，一個人(部落客)正在參照另一個人(Eric Meyer)，除了使用hCard來明確標記這個人的參照外，部落客可以使用[http://gmpg.org/xfn/ XFN] (XHTML朋友網路)來表示他們跟Eric Meyer的關係，例如：

<pre><nowiki>
<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>.
</nowiki></pre>

這會跟前面的例子有一樣的顯示。

==== 部落格聯播(Blogrolls)中人的參照 ====
很多部落客正使用XFN(通常使用一個簡單的使用者介面像是內建在[http://wordpress.org WordPress])的那一種來明確表示在他們的部落格聯播中跟這個人的關係:

<pre><nowiki>
<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>
</nowiki></pre>

將hCard標記加入到XFN朋友的部落格聯播中，你可以明確表示這人的名稱跟URL，除了他們的關係之外：

<pre><nowiki>
<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>
</nowiki></pre>

這樣可能顯示為：
* [http://meyerweb.com Eric Meyer]
* [http://photomatt.net Matt Mullenweg]

這會參照為[[hcard-xfn-supporting-friends-lists]]，這也是[[social-network-portability]]關鍵組成的部份。 

更多XFN的資訊，見[http://gmpg.org/xfn/ XFN home page]、[http://gmpg.org/xfn/join joining XFN]及[http://gmpg.org/xfn/background XFN的背景].

這個技術用在WordPress的[http://factorycity.net/projects/wp-microformatted-blogroll/ WP Microformatted Blogroll]外掛中。

=== 新型態的聯繫方式 ===

自從vCard設計出來後，就有許多的其他的服務來提供個人的地址或其他方式的聯繫，例如，即時通、voip等等。

這意味著vCard(以及hCard)必須擴充到可以代表這些嗎？

感謝URL屬性的彈性，答案是No，不需任何的擴充，相反地，我們使用可以辨認服務（協定、機器且/或路徑）服務的適當URL，然後置放個人的位址在裡面。

* vCard ''已經''[ftp://ftp.rfc-editor.org/in-notes/rfc4770.txt 擴充]這個，我們是否應接受這個新的"IMPP"屬性？ [[User:TobyInk|TobyInk]] 10:03, 17 Mar 2008 (PDT)

==== AOL Instant Messenger (AIM) ====
[http://dashboard.aim.com/aim AOL Instant Messenger] (AIM) ids 可以使用<code>aim:</code>協定來表現，很多人可以這樣做可點擊的網址來發佈他們的AIM ids，例如：

<pre><nowiki>
<a href="aim:goim?screenname=ShoppingBuddy">IM with the AIM ShoppingBuddy</a>
</nowiki></pre>

對於hCard，我們將接受這個現有的內容發佈行為，並且簡單地擷取它作為hCard另一個網址：

<pre><nowiki>
<a class="url" href="aim:goim?screenname=ShoppingBuddy">IM with the AIM ShoppingBuddy</a>
</nowiki></pre>

==== Yahoo! 即時通 ====
同樣地，[http://messenger.yahoo.com/ Yahoo! 即時通] (YIM) ids 可以使用<code>ymsgr:</code>協定來表現，同樣地很多人可以這樣做可點擊的網址來發佈他們的YIM ids，例如：

<pre><nowiki>
<a href="ymsgr:sendIM?SomeYahooFriend">IM with SomeYahooFriend</a>
</nowiki></pre>

再一次，對於hCard來說，我們將接受這個現有的內容發佈行為，並且簡單地擷取它作為hCard另一個網址：

<pre><nowiki>
<a class="url" href="ymsgr:sendIM?SomeYahooFriend">IM with SomeYahooFriend</a>
</nowiki></pre>

==== MSN Messenger ====
[http://en.wikipedia.org/wiki/Windows_Live_Messenger MSN Messenger] (MSNIM) ids 可以使用<code>msnim:</code>協定來表現，並且同樣地很多人可以這樣做可點擊的網址來發佈他們的MSNIM ids，例如：

<pre><nowiki>
<a href="msnim:chat?contact=joebob@hotmail.com">IM with joebob@hotmail.com</a>
</nowiki></pre>

對hCard來說，我們將接受這個現有的內容發佈行為，並且簡單地擷取它作為hCard另一個網址：

<pre><nowiki>
<a class="url" href="msnim:chat?contact=joebob@hotmail.com">IM with joebob@hotmail.com</a>
</nowiki></pre>

見相關的[[hcard-examples-issues#MSN_Messenger|議題]]。

==== XMPP (Jabber) ====
[http://www.xmpp.org/ Extensible Messaging and Presence Protocol (XMPP)] ids 可以使用<code>xmpp:</code>協定來表現，例如：

<pre><nowiki>
<a class="url" href="xmpp:username@jabberservice.com">IM with username@jammerservice.com</a>
</nowiki></pre>

這個協定允許更多的URLs，見[http://www.faqs.org/rfcs/rfc4622.html RFC4622]。

目前有很多[http://www.jabber.org/clients 客戶端支援這個協定]。

==== Skype ====
IP電話服務[http://www.skype.com Skype]的帳戶可以使用<code>skype:</code>協定來表現，它可以用來開啟一個網路聊天室或是一個Skype呼叫。 

<pre><nowiki>
<a href="skype:echo-chinese?chat">IM with the Skype echo service (Chinese)</a>
</nowiki></pre>


<pre><nowiki>
<a href="skype:echo-chinese?call">Skype call to Skype echo service (Chinese)</a>
</nowiki></pre>

因此對於hCard來說，我們可以接受這個現有的內容發佈行為，並且簡單地擷取它作為hCard的另一個網址：

<pre><nowiki>
<a class="url" href="skype:echo-chinese?chat">IM with the Skype echo service (Chinese)</a>
</nowiki></pre>

<pre><nowiki>
<a class="url" href="skype:echo-chinese?call">Skype call to Skype echo service (Chinese)</a>
</nowiki></pre>

==== ICQ ====
[http://www.icq.com/ ICQ]沒有URL的結構，反而在web上ICQ的連結使用HTTP超連結來下載一種內容類型<code>application/x-icq</code>的資源，之後作業系統接著就會打開使用者的ICQ客戶端。

因此我們可以標記那些有內容類型的HTTP超連結明確地設定來跟ICQ語義溝通：

<pre><nowiki>
<a class="url"
   type="application/x-icq" 
   href="http://www.icq.com/people/cmd.php?uin=[ICQNUMBER]&amp;action=message">
 Contact with ICQ</a>
</nowiki></pre>

將[ICQNUMBER]取代為使用者真正的ICQ號碼。

=== 網站專頁 ===
部落客通常會在內容託管服務上使用網址到他們的首頁、饋送或專頁來顯示他們的身份在這些服務上，他們透過標籤作為URL屬性，這些額外的身份也可以在hCard發佈。

* <code>[http://del.icio.us delicious]:</code>
** <code>&lt;a class="url" href="http://del.icio.us/rbach"&gt;Robert Bachmann's links&lt;/a&gt;</code>
* <code>[http://flickr.com Flickr]:</code>
** <code>&lt;a class="url" href="http://flickr.com/photos/tantek/"&gt;See my photos&lt;/a&gt;</code>
** <code>&lt;a class="url" href="http://flickr.com/people/tantek/"&gt;Flickr profile&lt;/a&gt;</code>
* <code>[http://technorati.com/ Technorati]:</code>
** <code>&lt;a class="url" href="http://technorati.com/profile/tantek/"&gt;Technorati profile&lt;/a&gt;</code>
* 在這裡增加更多...
** ....

==== 列出你其他的專頁 ====
列出其他個人資料的網站最常見的情況是部落客列出自己其他的個人資料，或網站允許使用者列出他在站上的個人資料，連結到其他人的個人資料，使用戶要列出其個人資料在該網站上，鏈接到他或她的其他個人資料，由於很清楚地這個作者/使用者表示所有那些個人資料指德是同一個人，使用[[XFN]]的<code>rel="me"</code>將他們標記起來做明確的身份合併是最好的，例如，在Tantek的部落格或其他社交網路的個人資料的那些連結：

* <code>[http://del.icio.us delicious]:</code>
** <code>&lt;a class="url" href="http://del.icio.us/rbach"&gt;Robert Bachmann's links&lt;/a&gt;</code>
* <code>my [http://flickr.com Flickr]:</code>
** <code>&lt;a class="url" href="http://flickr.com/photos/tantek/"&gt;See my photos&lt;/a&gt;</code>
** <code>&lt;a rel="me" class="url" href="http://flickr.com/people/tantek/"&gt;Flickr profile&lt;/a&gt;</code>
* <code>[http://technorati.com/ Technorati]:</code>
** <code>my &lt;a rel="me" class="url" href="http://technorati.com/profile/tantek/"&gt;Technorati profile&lt;/a&gt;</code>
* 在這裡增加更多...
** ....

像這種明確以使用者為導向的身份合併也是建構[[social-network-portability]]區塊的一個關鍵，這會在[[hcard-xfn-supporting-friends-lists]]這節有更多的解釋。

=== 典型的網站簡介 ===
網佔有時後會對一個人有很多不同的頁面作為"首頁"，以及那個人的使用者個人資料頁。

舉Flickr的例子：
* 你的首頁在一個網址像：<code>http://flickr.com/photos/</code>後跟著你的使用者名稱，例如： 
** http://flickr.com/photos/tantek/
* 你的個人資料頁在一個網址像：<code>http://flickr.com/people/</code>後跟著你的使用者名稱，例如：
** http://flickr.com/people/tantek/

此外，網站通常有一個他個人<em>典型</em>的網址及幾個備用網址。

如上所述，在hCard裡連到這些網址的連結會表示那些人應該有classname "url"。  

此外，在hCard裡站上像這樣的連結到一個人的典型網址應該也有"uid"這個classname，這個技術是Ryan King第一次在[[events/2007-08-28-social-network-portability-today|Social Network Portability Today lunchtime meetup]]提出。 

上一節建構的例子：
* [http://flickr.com Flickr]:
** <code>&lt;a class="url" href="http://flickr.com/photos/tantek/"&gt;See my photos&lt;/a&gt;</code>
** <code>&lt;a rel="me" class="url uid" href="http://flickr.com/people/tantek/"&gt;Flickr profile&lt;/a&gt;</code>

這樣的"url" + "uid"屬性也被網站使用作為個人的[[OpenID]]網址。

這件工作已開發進[[representative-hcard|representative hCards]]，到那裡有最新這類的思維。

=== 組織跟部門 ===

部門使用"organization-unit"類別名稱在"org"元素裡，明確的"organization-name"標記可以與其他部門區隔：

<pre><nowiki>
<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>
</nowiki></pre>

該部門也可以是位址的一部分，在這種情況下，你會想要明確的標記它作為除了"organization-unit"以外的"extended-address"。

<pre><nowiki>
<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>
</nowiki></pre>

請注意在位址裡的org的巢狀結構，我們要避免有重複的部門名稱。

=== 組織列表 ===
類似[[hcard-examples#References_to_People_in_Blogrolls|lists of people]]，組織列表（例如樂隊）應該使用一個有列表項目跟超連結到各自的組織首頁的列表（無序的，除非有理由要排序）。

例如，這個簡單的[[POSH]]：

<pre><nowiki>
<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>
</nowiki></pre>

可以很容易地使用hCard來加強：

<pre><nowiki>
<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>
</nowiki></pre>

== hCard裡<nowiki>RFC 2426</nowiki>的範例 ==
見：[[hcard-examples-rfc2426]]

== 測試用例 ==

這是[[hcard|hCard]]的例子，都被認為是在hCard分析器裡在尋找錯誤時特別有用（例如X2V）。

=== BDAY資訊的問題 ===

這個例子：

<pre>
    <!-- birthday -->
    <div class="bday">
    <dt>Birthday</dt>
    <dd>
        <abbr class="value" title="1985-10-27T00:00:00Z">October 27, 1985</abbr>
    </dd>
    </div>
</pre>

應該產生"BDAY:1985-10-27T00:00:00Z"，但是它卻產生"BDAY:Birthday October 27\, 1985" [在哪？這像敘述好像毫無意義]，有趣的是apple的通訊錄還是希望接受這樣的方式。

* 也許造成HTML的解析錯誤，就像<code>&lt;dt></code>跟<code>&lt;dd></code>不允許作為 <code>&lt;div></code>子標籤一樣。

=== 型態值不靈敏的例子 ===

* "home" vs. "Home"

這個例子在X2V可以運作：

<pre>
    <div class="tel">
    <dt>Phone (<span class="type">home</span>)</dt>
    <dd><span class="value">+438123418</span></dd>
    </div>
</pre>

這不行，但是應該可以吧，它只會變成在vcard裡沒有的型態TEL。

<pre>
    <div class="tel">
    <dt>Phone (<span class="type">Home</span>)</dt>
    <dd><span class="value">+438123418</span></dd>
    </div>
</pre>

=== GEO解析 ===
下面的hCard：

<pre><nowiki>
<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>
</nowiki>
</pre>

應該可以轉換為下面的vCard：

<pre><nowiki>
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
</nowiki></pre>

X2V(2005-12-18)目前不能解析/匯出GEO屬性。

== 相關網頁 ==
* [[hcard-examples-issues]]
{{hcard-related-pages}}

== Translations ==
* [[hcard-examples|英語]]