hcard-example1-steps: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
(Fixed Spelling)
(rm outdated org info)
Line 1: Line 1:
= hCard Example 1 Steps =
<h1> hCard Example 1 Steps </h1>
{{TOC-right}}


This is a step by step explanation of the first example in the [[hcard|hCard]] specification.
This is a step by step explanation of the first example in the [[hcard|hCard]] specification.


== Example ==
<h2> Example </h2>


=== vCard example ===
=== vCard example ===
Line 14: Line 15:
FN:Tantek Çelik
FN:Tantek Çelik
URL:http://tantek.com
URL:http://tantek.com
ORG:Technorati
END:VCARD
END:VCARD
</nowiki></pre>
</nowiki></pre>
Line 31: Line 31:
   <span class="fn">Tantek Çelik</span>
   <span class="fn">Tantek Çelik</span>
  </a>
  </a>
<div class="org"><span class="organization-name">Technorati</span></div>
</div>
</div>
</nowiki></pre>
</nowiki></pre>
Line 51: Line 50:
   </span>
   </span>
  </a>
  </a>
<div class="org"><span class="organization-name">Technorati</span></div>
</div>
</div>
</nowiki></pre>
</nowiki></pre>
Line 67: Line 65:
   <span class="family-name">Çelik</span>
   <span class="family-name">Çelik</span>
  </a>
  </a>
<div class="org"><span class="organization-name">Technorati</span></div>
</div>
</div>
</nowiki></pre>
</nowiki></pre>
Line 80: Line 77:
   Tantek Çelik
   Tantek Çelik
  </a>
  </a>
<div class="org">Technorati</div>
</div>
</div>
</nowiki></pre>
</nowiki></pre>
Line 88: Line 84:
The display for all versions of this hCard is the same:
The display for all versions of this hCard is the same:


[http://tantek.com/ Tantek Çelik]<br />
[http://tantek.com/ Tantek Çelik]
Technorati




Back to the [[hcard|hCard]] specification.
Back to the [[hcard|hCard]] specification.

Revision as of 22:39, 25 November 2007

hCard Example 1 Steps

This is a step by step explanation of the first example in the hCard specification.

Example

vCard example

Here is a sample vCard:

BEGIN:VCARD
VERSION:3.0
N:Çelik;Tantek
FN:Tantek Çelik
URL:http://tantek.com
END:VCARD

hCard example iteration 0: literal

and an equivalent in literal hCard:

<div class="vcard">
 <a class="url" href="http://tantek.com/">
  <span class="n" style="display:none"> <!-- hide this from display with CSS -->
   <span class="family-name">Çelik</span>
   <span class="given-name">Tantek</span> 
  </span>
  <span class="fn">Tantek Çelik</span>
 </a>
</div>

Note that the "N" type, as defined in RFC2426, Section 3.1.2, has several components, and thus these components are defined using nested elements with a class name that is a direct equivalent of the component from the RFC, e.g. "given-name" and "family-name".

Both the vCard and the literal hCard violate the DRY principle by duplicating the name information. The hCard version compensates for this by hiding one occurence with CSS.

hCard example iteration 1: DRY

However, structurally the same XHTML element could be reused for the "N" and "FN" types (since multiple class names can be placed in one class attribute by space separating them), and thus duplication of the name information itself can be eliminated:

<div class="vcard">
 <a class="url" href="http://tantek.com/">
  <span class="fn n">
   <span class="given-name">Tantek</span> 
   <span class="family-name">Çelik</span>
  </span>
 </a>
</div>

Thus even with this first iteration we have made a significant improvement over the vCard, by avoiding the repeating of name information, and conforming to the DRY principle.

hCard example iteration 2: element conservation

This can be even further optimized by placing the "fn" and "n" class names on the <a href>, and eliminating the intermediate span.

<div class="vcard">
 <a class="url fn n" href="http://tantek.com/">
  <span class="given-name">Tantek</span> 
  <span class="family-name">Çelik</span>
 </a>
</div>

hCard example iteration 3: implied optimizations

Finally, using the Implied "N" Optimization and Implied "organization-name" Optimization, we are able to omit the explicit given and family names markup as well as the explicit "n" and "organization-name".

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

hCard display

The display for all versions of this hCard is the same:

Tantek Çelik


Back to the hCard specification.