網頁簡歷結構和語義信息 hResume微格式

2024-07-11 08:46:10

字體：大中小

來源：轉載

供稿：網友

在兩個月前開始了這個系列。我希望能夠通過講述我如何實現他們的細節(jié)來傳播我對微格式的熱愛，鼓勵更多的人來支持他。到現在為止，我們已經討論了：
基于鏈接關系的微格式:使用rel屬性
為網頁添加hCard微格式
非常酷的微格式：XFN規(guī)范
為網頁內容添加結構和語義的hAtom微格式

現在，我們來討論hResume微格式，他通常被用來為網頁內容中的簡歷添加結構和語義信息。

hResume背景

在我們詳細討論hResume之前，先來了解一些背景知識。

提案規(guī)范

hResume是一個處于提案狀態(tài)的微格式。這是什么意思呢？意味著在成為正式提案之前還會有很多變化，雖然說最終一定會通過。這會不會有很大影響？可能對您來說，但是對我來說影響不大。我非常接受的一點就是現在所有的互聯網技術都是日新月異的，這是互聯網的特性。

微格式最好的地方

hResume屬于簡單的微格式之一，只有八個屬性。同時，hResume還是一個很復雜的微格式；他利用另外三個微格式：rel-tag，hCard 和 hCalendar。在很多方面上看，這也呈現出微格式最強大的特點：他們使用已有的標準。

最不好的地方

hResume如何利用hCard和hCalendar對于我來說，很多時候都非常讓人困惑和有挫敗感。也許是因為他還處于提案狀態(tài)，在最后通過的時候希望這些問題都能夠被解決。不過，也可能是因為我沒有想好如何把hCard和hCalendar信息更好的同我的簡歷融合在一起。不過不管是什么原因，從我的角度來說，hResume在某種程度上顯示了微格式很不好的地方。并不是只有在使用hResume的時候才有問題。所有的微格式都缺少容易理解的信息和很好的文檔。我想這讓推動微格式很苦惱。

因為hResume還是提案階段，所以很難期望有很多人分享這方面的信息和資源。但是微格式的Wiki上還是提供了很詳細的定義。因為另外的資源非常少，所以才使得實現這個微格式非常的痛苦和挫敗。不過這也是我為什么寫這些關于微格式的博客文章，我也希望能夠有越來越多的文章出現，越來越多的人談論他，就會有越來越多更好的資源和信息。

歷史

hResume的歷史非常簡單。不像hCard、hCalendar和hAtom，在他之前沒有類似的技術手段。不過，他還是建立在對現有簡歷格式的研究基礎上，例如HR-XML和Europass。

基礎知識

跟所有微格式一樣，他也有一些規(guī)則這里還要說明：

屬性和子屬性通過class代碼聲明。這些代碼定義了hResume微格式
屬性和子屬性名稱大小寫敏感
“根”屬性不能和其他子屬性組合在一起。因此，<p class="hresume contact"> 是無效的
包含微格式的標記元素跟微格式之間沒有直接關系（建議使用有效并具有語義信息的標記）

Profile

在實現hResume的頁面中，需要在<head>中聲明他的Profile：

前面提過，hResume利用hCard和hCalendar來描述信息，所以，如果您也實現了這兩個微格式，您還需要包含他們的Profile聲明。W3C允許多個Profile聲明（使用空格隔開），所以可以同時包含三個Profile：

由于hCard和hCalendar屬于正式標準，所以，他們可以使用組合Profile URL來聲明，我推薦使用該聲明：

例子

同前面講過的微格式不同，我沒有在博客上實現hResume。因為真是找不到原因在我的博客上放個人簡歷，而且我已經在我的設計檔案中提供了hResume實現。下面的例子是從我我設計檔案中的簡歷提取出來的。不過真實的信息是非常多的標記元素和信息，所以我刪除了一些重復的信息，盡量保持簡潔，此外還剔除了用來定義顯示風格的class值。

如果需要的話，您可以去我的頁面中查看全文的代碼。

<div class=”hresume”>
<div class=”contact vcard”>
<img src="/images/personal/emilyLewis.jpg" width="150" height="203" class="photo" alt="Emily Lewis" />
<h2 class="fn n" id="emily-hcard-name"><span class="given-name">Emily</span> <span class="additional-name">Paige</span> <span class="family-name">Lewis</span></h2>
<p class="adr"><span class="locality">Albuquerque</span>, <abbr class="region" title="New Mexico">NM<abbr> <span class="postal-code">87106</span> <abbr class="country-name" title="United States of America">USA</abbr></p>
<ul>
<li><a href="mailto:eplewis@gmail.com" class="email">eplewis[at]gmail[dot]com</a></li>
<li><a href="http://www.emilylewisdesign.com/" class="url" rel="me">Design Portfolio</a></li>
<li><a href="http://www.linkedin.com/in/emilyplewis/" rel="me">LinkedIn profile</a></li>
</ul>
</div>
<h3>Highlights of Qualifications</h3>
<ul class=”summary”>
<li>Web designer specializing in hand-coded semantic XHTML, cross-browser CSS, progressive enhancement accessibility and usability</li>
<li>Expert in the design of corporate web sites, intranets, email campaigns and e-commerce applications</li>
…
</ul>
<h3>Technical Expertise</h3>
<h4>Web Design & Development</h4>
<ul>
<li><a href="http://technorati.com/tag/xhtml" class=”skill” rel=”tag”>XHTML</a> — 9 yrs</li>
<li><a href="http://technorati.com/tag/css" class=”skill” rel=”tag” >CSS</a> — 9 yrs</li>
…
</ul>
…
<h3>Experience & Accomplishments</h3>
<div class="vcalendar">
<div class=”experience vevent vcard”>
<a class="include nonVisual" href="#emily-hcard-name"></a>
<h4 class="title summary">Web Designer</h4>
<p class="org fn">Pitney Bowes Business Insight</p>
<p><abbr class="dtstart" title="2004-12-01">December 2004</abbr> – present</p>
<ul class="description">
<li>Designed interfaces and developed XHTML, CSS and graphics for main corporate site, international sites, marketing newsletters, corporate blog, corporate intranet and user conference site</li>
…
</ul>
</div>
…
</div>
<h3>Education</h3>
<div class="vcalendar">
<div class=”education vevent vcard”>
<h4 class="summary">Web Design & Development Certification</h4>
<p class="org fn"><a href="http://www.gwu.edu/index.cfm" class="url" title="Link opens off this site">George Washington University</a>, Center for Professional Development</p>
<p><abbr class="dtstart" title="2001-09-01">September 2001</abbr>–<abbr class="dtend" title="2003-06-01">June 2003</abbr></p>
<p>GPA 3.8</p>
</div>
</div>
…
</div>

根屬性：hresume

根屬性是hresume，是必須要有的。所有的hResume信息都要包含在被指定class="hresume"的元素中：

必要屬性：contact

hResume只有一個必須有的屬性，就是contact，用來表明簡歷作者的姓名和聯系信息，而且只能使用一次。hResume要求其中的聯系信息為hCard格式：

<div class="contact vcard“>
<img src="/images/personal/emilyLewis.jpg" width="150" height="203" class=”photo” alt=”Emily Lewis” />
<h2 class=”fn n” id=”emily-hcard-name”><span class=”given-name”>Emily</span> <span class=”additional-name”>Paige</span> <span class=”family-name”>Lewis</span></h2>
<p class=”adr”><span class=”locality”>Albuquerque</span>, <abbr class=”region” title=”New Mexico”>NM<abbr> <span class=”postal-code”>87106</span> <abbr class=”country-name” title=”United States of America”>USA</abbr></p>
<ul>
<li><a href="mailto:eplewis@gmail.com" class=”email”>eplewis[at]gmail[dot]com</a></li>
<li><a href="http://www.emilylewisdesign.com/" class=”url” rel=”me”>Design Portfolio</a></li>
<li><a href="http://www.linkedin.com/in/emilyplewis/" rel="me">LinkedIn profile</a></li>
</ul>
</div>

同rel-me定義統(tǒng)一的身份

在上面的例子中，我在到網站的鏈接上使用了rel-me：

<li><a href="http://www.emilylewisdesign.com/" class="url" rel=”me”>Design Portfolio</a></li>
<li><a href="http://www.linkedin.com/in/emilyplewis/" rel=”me”>LinkedIn profile</a></li>

如同我們在第一部分中討論的，rel="me"用來定義從關于某人的某個頁面到另一個頁面的超鏈接關系。

使用address的問題

hResume規(guī)范中也建議使用<address>來描述個人聯系信息。根據W3C的描述，<address>元素為：

“… used by authors to supply contact information for a document or a major part of a document such as a form.（譯：作者用來為文檔或者文檔大部分內容提供聯系信息）“

在簡歷的例子中，<address>語義上是正確的，因為他描述的聯系信息是屬于簡歷作者的。不過，您會注意到我在上面的例子中沒有使用<address>，這是因為<address>不能包含塊級元素。當然，我可以使用<span>來替換所有的<p>和<ul>，但是那會讓文檔失去很多語義信息和結構，所以就沒有考慮<address>。

可選屬性：summary

可選屬性summary用來表明求職意向和勝任工作的簡介。同樣，只能在hResume中使用一次。在我的簡歷中，我沒有描述求職意向，但是卻提供了勝任工作的列表：

<h3>Highlights of Qualifications</h3>
<ul class=”summary”>
<li>Web designer specializing in hand-coded semantic XHTML, cross-browser CSS, progressive enhancement accessibility and usability</li>
<li>Expert in the design of corporate web sites, intranets, email campaigns and e-commerce applications</li>
…
</ul>

可選屬性：skill

可選屬性skill附加在內容元素上，用來表明個人的特殊才能和技術。skill可以使用多次。規(guī)范要求技能的內容需要包含在指定了class="skill"和rel="tag"的鏈接元素中：

<ul>
<li><a href="http://technorati.com/tag/xhtml" class=”skill” rel=”tag”>XHTML</a> — 9 yrs</li>
<li><a href="http://technorati.com/tag/css" class=”skill” rel=”tag”>CSS</a> — 9 yrs</li>
…
</ul>

瘋狂的鏈接

我按照規(guī)范要求的實現了skill屬性，但是我非常不喜歡這些鏈接。我不明白為什么規(guī)范需要屬性必須要被包含在鏈接之內，為什么不能包含在內容元素中？我并不能確認這些鏈接帶來任何的價值，尤其是對于可能的雇主來說。事實上，這會讓想了解我的人注意力分散。

標簽空間似乎無關

另外一個問題就是規(guī)范要求這些鏈接必須實現rel="tag"。在第一部分中，我們討論過，rel-tag表示鏈接的目的地址是一個標簽地址。而且rel-tag需要在鏈接中使用標簽內容作為URL的最后一段。由于這些限定，我把所有的skill鏈接都指向了Technorati，因為他提供了標簽空間。

可是，這就讓這些鏈接更跟我的內容無關了。如果我使用這些鏈接，我更希望他們能夠鏈接到能給出具體信息的地方，比如Wikipedia，但是他并沒有提供這些技能的條目。最后，我可能會把所有能指向wikipedia的鏈接都換成指向wikipedia，而內容不存在的技能鏈接就只好刪掉。或者只好把整個skill部分都刪除，反正他是可選的。

可選屬性：experience

可選屬性experience用來表明個人的工作經歷。可以使用多次。規(guī)范要求每個工作經歷都作為一個“事件”可以使用hCalendar來描述，并且把職務/角色的內容寫在hCard中：

<div class=”vcalendar”>
<div class="experience vevent vcard“>
<a class="include nonVisual" href="#emily-hcard-name"></a>
<h4 class="title summary“>Web Designer</h4>
<p class=”org”>Pitney Bowes Business Insight</p>
<p><abbr class=”dtstart” title=”2004-12-01″>December 2004</abbr> – present</p>
<ul class=”description”>
<li>Designed interfaces and developed XHTML, CSS and graphics for main corporate site, international sites, marketing newsletters, corporate blog, corporate intranet and user conference site</li>
…
</ul>
</div>
…
</div>

包含模式：避免冗余

因為規(guī)范要求為所有工作職務和角色指定hCard信息，而hCard需要fn屬性（人的格式化名字）這就意味著對于我簡歷中每條experience，我需要列出我的名字信息。這真是沒有太大意思。

幸好，微格式的家伙們想出了辦法──包含模式，允許在頁面中使用已經在某個地方定義好的數據。使用包含模式，我就可以在experience中包含我已經在contact中定義好的fn信息了。首先，我需要為我的contact hCard fn值定義一個id，這樣我就可以引用他：

<h2 class="fn n" id=”emily-hcard-name”><span class=”given-name”>Emily</span> <span class=”additional-name”>Paige</span> <span class=”family-name”>Lewis</span></h2>

然后，對應所有的experience，我可以為鏈接<a>指定class="include"，而在鏈接的href值中指定到fn id：

<div class="vcalendar">
<div class="experience vevent vcard">
<a class=”include nonVisual” href=”#emily-hcard-name”>Emily Paige Lewis</a>
<h4 class="title">Web Designer</h4>
<p class="org fn">Pitney Bowes Business Insight</p>
<p><abbr class="dtstart" title="2004-12-01">December 2004</abbr> – present</p>
<ul class="description">
<li>Designed interfaces and developed XHTML, CSS and graphics for main corporate site, international sites, marketing newsletters, corporate blog, corporate intranet and user conference site</li>
…
</ul>
</div>
…
</div>

此外，包含模式還允許使用<object>。<object>比鏈接要更加具有語義信息，不過他會造成顯示問題。

例如，在Safari中：
Display of include object in Safari

Chrome也會有類似問題：
Display of include object in Chrome

Opera不會顯示滾動條，但是會顯示一大片空白區(qū)域：
Display of include object in Opera

IE6和IE7也顯示一些東西（不知道具體是什么東西）：
Display of include object in IE

由于這些顯示問題，目前還是推薦使用鏈接方式，不過同樣有問題。其實算不上問題，只是需要記住：鏈接內部必須有指定內容，以便無障礙訪問的屏幕發(fā)聲程序有東西可以讀取。

日期時間設計模式

對于每個工作“事件”，我都使用了推薦的hCalendar方式描述。這意味著我要使用對開始和結束的時間使用日期時間設計模式：

<p><abbr class=”dtstart” title=”1999-11-01″>November 1999</abbr> – <abbr class=”dtend” title=”2004-01-01″>January 2004</abbr></p>

這個模式要求被包含在<abbr>元素中，該元素使用title屬性值來定義“機器可讀”的時間格式，而通過包含的內容來指定人類可讀的時間格式。在title中包含的日期時間格式需要遵循ISO 8601格式要求。

可選屬性：education

可選屬性education表明教育“事件”，比如本科教育。education也可以使用多次。并且同experience相似，規(guī)范要求每個education“事件”都使用hCalendar格式描述。雖然規(guī)范中沒有要求，我還是為大學或學院添加了hCard信息描述：

<div class=”vcalendar”>
<div class=" education vevent vcard“>
<h4 class=”summary”>Web Design & Development Certification</h4>
<p class=”org fn”><a href=”http://www.gwu.edu/index.cfm” class=”url” title=”Link opens off this site”>George Washington University</a>, Center for Professional Development</p>
<p><abbr class=”dtstart” title=”2001-09-01″>September 2001</abbr>–<abbr class=”dtend” title=”2003-06-01″>June 2003</abbr></p>
<p>GPA 3.8</p>
</div>
</div>

我沒有使用什么

hResume還支持affiliation和發(fā)表作品信息。我沒有實現他們因為同我關系不太大。

可選屬性：affiliation

可選屬性affiliation表明個人屬于/有關系的機構組織。affiliation可以被使用多次。規(guī)范要求其中的組織要使用hCard來描述：

<ul>
<li class="affliation vcard“><span class=”fn org”>Association for Accounting Marketing</span></li>
<li class="affliation vcard“><span class=”fn org”>NM Adobe Users Group</span></li>
</ul>