hcard-example1-steps - Revision history

Tantek: remove inapplicable prose re: "organization-name"

2007-11-25T22:41:53Z

remove inapplicable prose re: "organization-name"

← Older revision		Revision as of 22:41, 25 November 2007
Line 70:		Line 70:
	=== hCard example iteration 3: implied optimizations ===		=== 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, we are able to omit the explicit given and family names markup as well as the explicit "n".

	<pre><nowiki>		<pre><nowiki>

Tantek: rm outdated org info

2007-11-25T22:39:10Z

rm outdated org info

← Older revision		Revision as of 22:39, 25 November 2007
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.

67.162.169.209: Fixed Spelling

2005-08-15T04:59:40Z

Fixed Spelling

← Older revision		Revision as of 04:59, 15 August 2005
Line 48:		Line 48:
	<span class="fn n">		<span class="fn n">
	<span class="given-name">Tantek</span>		<span class="given-name">Tantek</span>
	<span class="~~gamily~~-name">Çelik</span>		<span class="family-name">Çelik</span>
	</span>		</span>
	</a>		</a>

Tantek: /* hCard Example 1 Steps */

2005-07-27T21:09:05Z

hCard Example 1 Steps

← Older revision		Revision as of 21:09, 27 July 2005
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".

	~~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:		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.

RyanKing at 01:16, 19 June 2005

2005-06-19T01:16:26Z

New page

= hCard Example 1 Steps =

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

== Example ==
Here is a sample vCard:

<pre><nowiki>
BEGIN:VCARD
VERSION:3.0
N:Çelik;Tantek
FN:Tantek Çelik
URL:http://tantek.com
ORG:Technorati
END:VCARD
</nowiki></pre>

and an equivalent in literal hCard:

<pre><nowiki>
<div class="vcard">
<a class="url" href="http://tantek.com/">
<span class="n" style="display:none"> 
<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>
</nowiki></pre>

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

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

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

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

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

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

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

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

Back to the [[hCard]] specification.