hcard-examples-zh: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
(New page: <entry-title>hCard 範例</entry-title> 範例 hCards. == Authors == * [http://tantek.com/ Tantek Çelik] * Brian Suda == Instructive Examples == === Authors of Pages and ...)
 
m (Replace <entry-title> with {{DISPLAYTITLE:}})
 
(17 intermediate revisions by one other user not shown)
Line 1: Line 1:
<entry-title>hCard 範例</entry-title>
{{DISPLAYTITLE:hCard 範例}}


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


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


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


=== Authors of Pages and Posts ===
== 啟發性的例子 ==
[http://www.w3.org/TR/html401/struct/global.html#h-7.5.6 Per the HTML4.01 specification], authors should be using the <code>&lt;address&gt;</code> element to indicate the "contact information for a document or a major part of a document." E.g.
 
=== 網頁和文章的作者 ===
[http://www.w3.org/TR/html401/struct/global.html#h-7.5.6 依據HTML4.01規格]，作者應該使用<code>&lt;address&gt;</code>元素來表示"一篇文件或是一篇文件的主要部份的聯絡資訊"，例如：


<pre><nowiki>
<pre><nowiki>
Line 18: Line 21:
</nowiki></pre>
</nowiki></pre>


By adding [[hcard|hCard]] to such existing semantic XHTML, you can explicitly indicate the name of the person, their URL, etc.:
增加[[hcard|hCard]]到這樣已經存在的XHTML，你可以明確地表明這人的名稱、網址等等：


<pre><nowiki>
<pre><nowiki>
Line 26: Line 29:
</nowiki></pre>
</nowiki></pre>


This could be displayed as:
這可以這樣顯示：


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


This works not only for whole pages, but also for "major part[s]" of pages, e.g. blog posts.
這不只整頁可以這樣做，頁面的"主要部份"也可以，例如，部落格的文章。


See the [http://microformats.org/blog/ microformats.org blog] (view the source) for a live example.  The author of every blog post on the microformats.org blog is marked up as an <code>&lt;address class="vcard"&gt;</code> element like the example shown above.
見[http://microformats.org/blog/ microformats.org部落格]一個例子 (看原始碼)，在microformats.org上的每篇文章的作者被標記為像上面顯示的 <code>&lt;address class="vcard"&gt;</code>元素。


=== References to People and Organizations ===
=== 人跟組織的參考 ===
A common pattern in blog posts is to link mentions of people's names to their blogs, and/or organizations to their home pages.  E.g.:
在部落格文章裡一個典型的例子就是連結提到的人名到他們的部落格，且/或他們公司的首頁。例如：


<pre><nowiki>
<pre><nowiki>
<cite>
<cite>
  <a href="http://meyerweb.com/">Eric Meyer</a>
  <a href="http://meyerweb.com/">Eric Meyer</a>
</cite> wrote a post
</cite> 寫了一篇文章
(<cite>
(<cite>
   <a href="http://meyerweb.com/eric/thoughts/2005/12/16/tax-relief/">
   <a href="http://meyerweb.com/eric/thoughts/2005/12/16/tax-relief/">
Line 46: Line 49:
   </a>
   </a>
  </cite>)  
  </cite>)  
about an unintentionally humorous letter he received from the
關於他從<a href="http://irs.gov/">Internal Revenue Service</a>.
<a href="http://irs.gov/">Internal Revenue Service</a>.
</nowiki>收到的無意中幽默信
</nowiki></pre>
</pre>


By adding hCard to such markup, you can explicitly indicate both the person and the organization by name and URL:
加入hCard到這樣的標記裡，你可以明確地用名字跟URL來表明這個人跟公司：


<pre><nowiki>
<pre><nowiki>
<cite class="vcard">
<cite class="vcard">
  <a class="fn url" href="http://meyerweb.com/">Eric Meyer</a>
  <a class="fn url" href="http://meyerweb.com/">Eric Meyer</a>
</cite> wrote a post
</cite>寫了一篇文章
(<cite>
(<cite>
   <a href="http://meyerweb.com/eric/thoughts/2005/12/16/tax-relief/">
   <a href="http://meyerweb.com/eric/thoughts/2005/12/16/tax-relief/">
Line 61: Line 64:
   </a>
   </a>
  </cite>)  
  </cite>)  
about an unintentionally humorous letter he received from the
關於他從<span class="vcard">
<span class="vcard">
  <a class="fn org url" href="http://irs.gov/">Internal Revenue Service</a>
  <a class="fn org url" href="http://irs.gov/">Internal Revenue Service</a>
</span>.
</span>收到的無意中幽默信。
</nowiki></pre>
</nowiki></pre>


Note the class names "fn org url" on the hyperlink surrounding the IRS.  Using the same value (or element for that matter) for "fn" and "org" indicates that the hCard describes an organization rather than a person.
注意這個包圍IRS的超連結上的類別名稱"fn org url"，使用"fn"跟"org"相同的值（或這裡元素）來表示hCard是描述一個組織而非一個人。


This could be displayed as:
這也可以這樣顯示：


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


==== a person who works for an organization ====
==== 在一個組織工作的人 ====
People often associate themselves with a company or organization that they work for. E.g.
人們通常會將他們工作的公司或組織聯想在一起，例如：


<pre><nowiki>
<pre><nowiki>
Line 84: Line 85:
</nowiki></pre>
</nowiki></pre>


Of course in this day and age, nearly everybody has a URL both for themselves and for their company. It's easy to add a URL for the person in the above hCard example:
當然在這個時代裡，幾乎每個人都有他們自己跟他們公司的URL，要在上面的hCard例子中加入URL是容易的：


<pre><nowiki>
<pre><nowiki>
Line 93: Line 94:
</nowiki></pre>
</nowiki></pre>


But to add a URL to the company, there is no "org-url" property (nor should there be), instead, use modularity and a nested hCard for the company itself:
但是加了一個URL到公司裡，就沒有"org-url"屬性(也不應該有)，相反地，在公司自己裡使用模組化跟巢狀的hCard：


<pre><nowiki>
<pre><nowiki>
Line 102: Line 103:
</nowiki></pre>
</nowiki></pre>


Furthermore, if this person hCard is on a page that represent them (e.g. is a [[representative hCard]]), then you can also use the experimental [[rel-group]] relationship on the hyperlink to the company to indicate that the company is a "group" that the person belongs to.
此外，假如這個人的hCard是在代表他們的頁面上(例如，是一個[[representative hCard]])，那麼你也可以用超連結到公司的實驗[[rel-group]]關係來表示這公司的這個人屬於這一個"群組"。


<pre><nowiki>
<pre><nowiki>
Line 111: Line 112:
</nowiki></pre>
</nowiki></pre>


=== hCard and XFN ===
=== hCard跟XFN ===
==== References to People in Blog Posts ====
==== 部落格文章中人的參照 ====


In the above example, one person (the blogger) is referring to another person (Eric Meyer).  In addition to using hCard to explicitly mark up the reference as a person, the blogger can use [http://gmpg.org/xfn/ XFN] (the XHTML Friends Network) to indicate their relationship to Eric Meyer, e.g.:
上面的例子裡，一個人(部落客)正在參照另一個人(Eric Meyer)，除了使用hCard來明確標記這個人的參照外，部落客可以使用[http://gmpg.org/xfn/ XFN] (XHTML朋友網路)來表示他們跟Eric Meyer的關係，例如：


<pre><nowiki>
<pre><nowiki>
Line 133: Line 134:
</nowiki></pre>
</nowiki></pre>


It would be displayed the same as the previous example.
這會跟前面的例子有一樣的顯示。


==== References to People in Blogrolls ====
==== 部落格聯播(Blogrolls)中人的參照 ====
Many bloggers are using XFN (often using an easy user interface like that built into [http://wordpress.org WordPress]) to explicitly indicate their relationships to the people in their blogrolls:
很多部落客正使用XFN(通常使用一個簡單的使用者介面像是內建在[http://wordpress.org WordPress])的那一種來明確表示在他們的部落格聯播中跟這個人的關係:


<pre><nowiki>
<pre><nowiki>
Line 149: Line 150:
</nowiki></pre>
</nowiki></pre>


By adding hCard markup to an XFN Friendly blogroll, you can explicitly indicate the name and URL of the person in addition to their relationship:
將hCard標記加入到XFN朋友的部落格聯播中，你可以明確表示這人的名稱跟URL，除了他們的關係之外：


<pre><nowiki>
<pre><nowiki>
Line 162: Line 163:
</nowiki></pre>
</nowiki></pre>


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


This is referred to as [[hcard-xfn-supporting-friends-lists]], and is a key building block of [[social-network-portability]].
這會參照為[[hcard-xfn-supporting-friends-lists]]，這也是[[social-network-portability]]關鍵組成的部份。


For more information on XFN, see the [http://gmpg.org/xfn/ XFN home page], [http://gmpg.org/xfn/join joining XFN], and [http://gmpg.org/xfn/background background on XFN].
更多XFN的資訊，見[http://gmpg.org/xfn/ XFN home page]、[http://gmpg.org/xfn/join joining XFN]及[http://gmpg.org/xfn/background XFN的背景].


The technique is used in the [http://factorycity.net/projects/wp-microformatted-blogroll/ WP Microformatted Blogroll] plugin for WordPress.
這個技術用在WordPress的[http://factorycity.net/projects/wp-microformatted-blogroll/ WP Microformatted Blogroll]外掛中。


=== New Types of Contact Info ===
=== 新型態的聯繫方式 ===


Since vCard was designed, there have been numerous other services that provide individuals with addresses or other means of contact, e.g. instant messaging, voip, etc.
自從vCard設計出來後，就有許多的其他的服務來提供個人的地址或其他方式的聯繫，例如，即時通、voip等等。


Does this mean that vCard (and hence hCard) must be extended to represent these?
這意味著vCard(以及hCard)必須擴充到可以代表這些嗎？


Thanks to the flexibility of the URL property, the answer is no, no extensions are necessary.  Instead, we use the proper URL for the service which identifies the service (protocol, machine, and/or path), and place the individual's address inside that.
感謝URL屬性的彈性，答案是No，不需任何的擴充，相反地，我們使用可以辨認服務（協定、機器且/或路徑）服務的適當URL，然後置放個人的位址在裡面。


* vCard ''has'' been [ftp://ftp.rfc-editor.org/in-notes/rfc4770.txt extended] for this. Should we adopt the new "IMPP" property? [[User:TobyInk|TobyInk]] 10:03, 17 Mar 2008 (PDT)
* 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 can be represented using the <code>aim:</code> protocol.  Many  who publish their AIM ids do so with clickable URLs e.g.:
[http://dashboard.aim.com/aim AOL Instant Messenger] (AIM) ids 可以使用<code>aim:</code>協定來表現，很多人可以這樣做可點擊的網址來發佈他們的AIM ids，例如：


<pre><nowiki>
<pre><nowiki>
Line 189: Line 190:
</nowiki></pre>
</nowiki></pre>


Thus for hCard, we will adopt this existing content publisher behavior, and simply capture it as another URL for the hCard:
對於hCard，我們將接受這個現有的內容發佈行為，並且簡單地擷取它作為hCard另一個網址：


<pre><nowiki>
<pre><nowiki>
Line 195: Line 196:
</nowiki></pre>
</nowiki></pre>


==== Yahoo! Messenger ====
==== Yahoo! 即時通 ====
Similarly, [http://messenger.yahoo.com/ Yahoo! Instant Messenger] (YIM) ids can be represented using the <code>ymsgr:</code> protocol.  And similarly many publish their YIM ids as clickable URLs e.g.:
同樣地，[http://messenger.yahoo.com/ Yahoo! 即時通] (YIM) ids 可以使用<code>ymsgr:</code>協定來表現，同樣地很多人可以這樣做可點擊的網址來發佈他們的YIM ids，例如：


<pre><nowiki>
<pre><nowiki>
Line 202: Line 203:
</nowiki></pre>
</nowiki></pre>


Again, for hCard, we will adopt this existing content publisher behavior, and simply capture it as another URL for the hCard:
再一次，對於hCard來說，我們將接受這個現有的內容發佈行為，並且簡單地擷取它作為hCard另一個網址：


<pre><nowiki>
<pre><nowiki>
Line 209: Line 210:


==== MSN Messenger ====
==== MSN Messenger ====
[http://en.wikipedia.org/wiki/Windows_Live_Messenger MSN Messenger] (MSNIM) ids can be represented using the <code>msnim:</code> protocol. And similarly many publish their MSNIM ids as clickable URLs e.g.:
[http://en.wikipedia.org/wiki/Windows_Live_Messenger MSN Messenger] (MSNIM) ids 可以使用<code>msnim:</code>協定來表現，並且同樣地很多人可以這樣做可點擊的網址來發佈他們的MSNIM ids，例如：


<pre><nowiki>
<pre><nowiki>
Line 215: Line 216:
</nowiki></pre>
</nowiki></pre>


For hCard, we will adopt this existing content publisher behavior, and simply capture it as another URL for the hCard:
對hCard來說，我們將接受這個現有的內容發佈行為，並且簡單地擷取它作為hCard另一個網址：


<pre><nowiki>
<pre><nowiki>
Line 221: Line 222:
</nowiki></pre>
</nowiki></pre>


See related [[hcard-examples-issues#MSN_Messenger|issue(s)]].
見相關的[[hcard-examples-issues#MSN_Messenger|議題]]。


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


<pre><nowiki>
<pre><nowiki>
Line 230: Line 231:
</nowiki></pre>
</nowiki></pre>


The protocol allows much richer URLs, see [http://www.faqs.org/rfcs/rfc4622.html RFC4622].
這個協定允許更多的URLs，見[http://www.faqs.org/rfcs/rfc4622.html RFC4622]。


There are many current [http://www.jabber.org/clients clients supporting the protocol].
目前有很多[http://www.jabber.org/clients 客戶端支援這個協定]。


==== Skype ====
==== Skype ====
Accounts on the Voice-over-IP service [http://www.skype.com Skype] can be represented using the <code>skype:</code> protocol. It can be used to open a chat session or make a Skype call.
IP電話服務[http://www.skype.com Skype]的帳戶可以使用<code>skype:</code>協定來表現，它可以用來開啟一個網路聊天室或是一個Skype呼叫。


<pre><nowiki>
<pre><nowiki>
Line 246: Line 247:
</nowiki></pre>
</nowiki></pre>


Thus for hCard, we could adopt this existing content publisher behavior, and simply capture it as another URL for the hCard:
因此對於hCard來說，我們可以接受這個現有的內容發佈行為，並且簡單地擷取它作為hCard的另一個網址：


<pre><nowiki>
<pre><nowiki>
Line 257: Line 258:


==== ICQ ====
==== ICQ ====
[http://www.icq.com/ ICQ] does not have a URL scheme.  Rather ICQ links on the web use HTTP hyperlinks to download a resource of content-type <code>application/x-icq</code> which then the operating system opens with the user's ICQ client.
[http://www.icq.com/ ICQ]沒有URL的結構，反而在web上ICQ的連結使用HTTP超連結來下載一種內容類型<code>application/x-icq</code>的資源，之後作業系統接著就會打開使用者的ICQ客戶端。


Thus we can markup those HTTP hyperlinks with the content-type set explicitly to communicate the ICQ semantic:
因此我們可以標記那些有內容類型的HTTP超連結明確地設定來跟ICQ語義溝通：


<pre><nowiki>
<pre><nowiki>
Line 268: Line 269:
</nowiki></pre>
</nowiki></pre>


Replacing [ICQNUMBER] with the user's actual ICQ number.
將[ICQNUMBER]取代為使用者真正的ICQ號碼。


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


* <code>[http://del.icio.us delicious]:</code>
* <code>[http://del.icio.us delicious]:</code>
Line 280: Line 281:
* <code>[http://technorati.com/ Technorati]:</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>
** <code>&lt;a class="url" href="http://technorati.com/profile/tantek/"&gt;Technorati profile&lt;/a&gt;</code>
* 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 <code>rel="me"</code> for explicit identity consolidation, e.g. if those links were on Tantek's blog or other social network profile:
列出其他個人資料的網站最常見的情況是部落客列出自己其他的個人資料，或網站允許使用者列出他在站上的個人資料，連結到其他人的個人資料，使用戶要列出其個人資料在該網站上，鏈接到他或她的其他個人資料，由於很清楚地這個作者/使用者表示所有那些個人資料指德是同一個人，使用[[XFN]]的<code>rel="me"</code>將他們標記起來做明確的身份合併是最好的，例如，在Tantek的部落格或其他社交網路的個人資料的那些連結：


* <code>[http://del.icio.us delicious]:</code>
* <code>[http://del.icio.us delicious]:</code>
Line 293: Line 294:
* <code>[http://technorati.com/ Technorati]:</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>
** <code>my &lt;a rel="me" class="url" href="http://technorati.com/profile/tantek/"&gt;Technorati profile&lt;/a&gt;</code>
* 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]].
像這種明確以使用者為導向的身份合併也是建構[[social-network-portability]]區塊的一個關鍵，這會在[[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:
舉Flickr的例子：
* your home page is at a URL like: <code>http://flickr.com/photos/</code> followed by your username, e.g.:
* 你的首頁在一個網址像：<code>http://flickr.com/photos/</code>後跟著你的使用者名稱，例如：
** http://flickr.com/photos/tantek/
** http://flickr.com/photos/tantek/
* your profile page is at a URL like: <code>http://flickr.com/people/</code> followed by your username, e.g.:
* 你的個人資料頁在一個網址像：<code>http://flickr.com/people/</code>後跟著你的使用者名稱，例如：
** http://flickr.com/people/tantek/
** http://flickr.com/people/tantek/


In addition, sites often have a <em>canonical</em> URL for a person, and several alternate URLs.
此外，網站通常有一個他個人<em>典型</em>的網址及幾個備用網址。


As noted above, links to these URLs inside hCards that represent those people should have classname "url".  
如上所述，在hCard裡連到這些網址的連結會表示那些人應該有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 [[events/2007-08-28-social-network-portability-today|Social Network Portability Today lunchtime meetup]].
此外，在hCard裡站上像這樣的連結到一個人的典型網址應該也有"uid"這個classname，這個技術是Ryan King第一次在[[events/2007-08-28-social-network-portability-today|Social Network Portability Today lunchtime meetup]]提出。


Building on the example(s) from the previous section:
上一節建構的例子：
* [http://flickr.com Flickr]:
* [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 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>
** <code>&lt;a rel="me" class="url uid" href="http://flickr.com/people/tantek/"&gt;Flickr profile&lt;/a&gt;</code>


Such a "url" + "uid" property could also be used by a site as that person's [[OpenID]] URL.
這樣的"url" + "uid"屬性也被網站使用作為個人的[[OpenID]]網址。


This work has been developed into [[representative-hcard|representative hCards]]. Go there for the latest on this line of thinking.
這件工作已開發進[[representative-hcard|representative hCards]]，到那裡有最新這類的思維。


=== 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:
部門使用"organization-unit"類別名稱在"org"元素裡，明確的"organization-name"標記可以與其他部門區隔：


<pre><nowiki>
<pre><nowiki>
Line 335: Line 336:
</nowiki></pre>
</nowiki></pre>


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


<pre><nowiki>
<pre><nowiki>
Line 352: Line 353:
</nowiki></pre>
</nowiki></pre>


Note that by nesting the org inside the address we avoided having to duplicate the department name.
請注意在位址裡的org的巢狀結構，我們要避免有重複的部門名稱。


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


E.g. this simple [[POSH]]:
例如，這個簡單的[[POSH]]：


<pre><nowiki>
<pre><nowiki>
Line 375: Line 376:
</nowiki></pre>
</nowiki></pre>


can be easily enhanced with hCard:
可以很容易地使用hCard來加強：


<pre><nowiki>
<pre><nowiki>
Line 393: Line 394:
</nowiki></pre>
</nowiki></pre>


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


== Test Cases ==
== 測試用例 ==


These are [[hcard|hCard]] examples which have been found to be particularly useful in finding bugs in hCard parsers (e.g. X2V).
這是[[hcard|hCard]]的例子，都被認為是在hCard分析器裡在尋找錯誤時特別有用（例如X2V）。


=== Problem with BDAY Information ===
=== BDAY資訊的問題 ===


this example:
這個例子：


<pre>
<pre>
Line 414: Line 415:
</pre>
</pre>


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


* Perhaps caused by an HTML parsing error, as <code>&lt;dt></code> and <code>&lt;dd></code> are not allowed as children of <code>&lt;div></code>.
* 也許造成HTML的解析錯誤，就像<code>&lt;dt></code>跟<code>&lt;dd></code>不允許作為 <code>&lt;div></code>子標籤一樣。


=== case-INSENSITIVITY of type values ===
=== 型態值不靈敏的例子 ===


* "home" vs. "Home"
* "home" vs. "Home"


this example works with X2V:
這個例子在X2V可以運作：


<pre>
<pre>
Line 431: Line 432:
</pre>
</pre>


this does not, but should. but instead it becomes just TEL without a type in the vcard
這不行，但是應該可以吧，它只會變成在vcard裡沒有的型態TEL。


<pre>
<pre>
Line 440: Line 441:
</pre>
</pre>


=== GEO parsing ===
=== GEO解析 ===
The following hCard:
下面的hCard：


<pre><nowiki>
<pre><nowiki>
Line 474: Line 475:
</pre>
</pre>


Should be translated into the following vCard:
應該可以轉換為下面的vCard：


<pre><nowiki>
<pre><nowiki>
Line 490: Line 491:
</nowiki></pre>
</nowiki></pre>


X2V currently (2005-12-18) fails to parse/export the GEO property at all.
X2V(2005-12-18)目前不能解析/匯出GEO屬性。


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

Latest revision as of 16:25, 18 July 2020


範例 hCards.

作者

譯者

啟發性的例子

網頁和文章的作者

依據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，然後置放個人的位址在裡面。

  • vCard 已經擴充這個，我們是否應接受這個新的"IMPP"屬性？ TobyInk 10:03, 17 Mar 2008 (PDT)

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的另一個網址： 

<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沒有URL的結構，反而在web上ICQ的連結使用HTTP超連結來下載一種內容類型application/x-icq的資源，之後作業系統接著就會打開使用者的ICQ客戶端。

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

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

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

網站專頁

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

列出你其他的專頁

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

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

典型的網站簡介

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

舉Flickr的例子：

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

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

此外，在hCard裡站上像這樣的連結到一個人的典型網址應該也有"uid"這個classname，這個技術是Ryan King第一次在Social Network Portability Today lunchtime meetup提出。

上一節建構的例子：

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

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

組織跟部門

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

<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>

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

<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>

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

組織列表

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

例如，這個簡單的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>

可以很容易地使用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>

hCard裡RFC 2426的範例

見：hcard-examples-rfc2426

測試用例

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

BDAY資訊的問題

這個例子： 

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

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

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

型態值不靈敏的例子

  • "home" vs. "Home"

這個例子在X2V可以運作： 

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

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

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

GEO解析

下面的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>

應該可以轉換為下面的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(2005-12-18)目前不能解析/匯出GEO屬性。

相關網頁

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.

Translations

Retrieved from "http://microformats.org/wiki/index.php?title=hcard-examples-zh&oldid=69836"