hcard-example1-steps: Difference between revisions
No edit summary |
|||
| Line 1: | Line 1: | ||
= hCard Example 1 Steps = | = hCard Example 1 Steps = | ||
This is a step by step explanation of the first example in the [[hCard]] specification. | This is a step by step explanation of the first example in the [[hcard|hCard]] specification. | ||
== Example == | == Example == | ||
=== vCard example === | |||
Here is a sample vCard: | Here is a sample vCard: | ||
| Line 15: | Line 17: | ||
END:VCARD | END:VCARD | ||
</nowiki></pre> | </nowiki></pre> | ||
=== hCard example iteration 0: literal === | |||
and an equivalent in literal hCard: | and an equivalent in literal hCard: | ||
| Line 33: | Line 37: | ||
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". | 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 [http://c2.com/cgi/wiki?DontRepeatYourself 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: | |||
<pre><nowiki> | <pre><nowiki> | ||
| Line 46: | Line 54: | ||
</div> | </div> | ||
</nowiki></pre> | </nowiki></pre> | ||
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 [http://c2.com/cgi/wiki?DontRepeatYourself 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. | This can be even further optimized by placing the "fn" and "n" class names on the <a href>, and eliminating the intermediate span. | ||
| Line 58: | Line 70: | ||
</div> | </div> | ||
</nowiki></pre> | </nowiki></pre> | ||
=== 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". | 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". | ||
| Line 69: | Line 83: | ||
</div> | </div> | ||
</nowiki></pre> | </nowiki></pre> | ||
=== hCard display === | |||
The display for all versions of this hCard is the same: | The display for all versions of this hCard is the same: | ||
| Line 75: | Line 91: | ||
Technorati | Technorati | ||
Back to the [[hCard]] specification. | |||
Back to the [[hcard|hCard]] specification. | |||
Revision as of 21:09, 27 July 2005
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 ORG:Technorati 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 class="org"><span class="organization-name">Technorati</span></div> </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="gamily-name">Çelik</span> </span> </a> <div class="org"><span class="organization-name">Technorati</span></div> </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 class="org"><span class="organization-name">Technorati</span></div> </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 class="org">Technorati</div> </div>
hCard display
The display for all versions of this hCard is the same:
Tantek Çelik
Technorati
Back to the hCard specification.