<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Tim Einfeldt &#187; microformats</title>
	<atom:link href="http://timeinfeldt.com/tag/microformats/feed/" rel="self" type="application/rss+xml" />
	<link>http://timeinfeldt.com</link>
	<description>Blog</description>
	<lastBuildDate>Wed, 31 Mar 2010 00:17:55 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Howto: Microformats in four steps</title>
		<link>http://timeinfeldt.com/howto-microformats-in-four-steps/</link>
		<comments>http://timeinfeldt.com/howto-microformats-in-four-steps/#comments</comments>
		<pubDate>Mon, 12 May 2008 20:31:52 +0000</pubDate>
		<dc:creator>Tim</dc:creator>
				<category><![CDATA[How to]]></category>
		<category><![CDATA[Webdesign]]></category>
		<category><![CDATA[howto]]></category>
		<category><![CDATA[microformats]]></category>
		<category><![CDATA[semantic web]]></category>
		<category><![CDATA[tutorial]]></category>

		<guid isPermaLink="false">http://timeinfeldt.com/?p=54</guid>
		<description><![CDATA[Microformats sind schon mindestens drei Jahre im Umlauf. Das semantische Web ist aus dem täglichen Buzzword Bingo kaum noch wegzudenken. Trotzdem kommt die Idee nicht so richtig aus dem Quark. Das Prinzip besteht darin, normale (X)HTML-Tags mit bestimmten Attributen zu versehen, um einem Tag damit eine zusätzliche inhaltliche Ebene zu geben. Einfaches Beispiel: &#60;a href=&#8221;http://hallowelt.de/&#8221;&#62;Marc&#60;/a&#62; [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://microformats.org/"><img src="http://microformats.org/img/logo.gif" alt="" width="144" height="36" /></a></p>
<p><a href="http://microformats.org/">Microformats</a> sind schon mindestens drei Jahre im Umlauf. Das semantische Web ist aus dem täglichen Buzzword Bingo kaum noch wegzudenken. Trotzdem kommt die Idee nicht so richtig aus dem Quark. Das Prinzip besteht darin, normale (X)HTML-Tags mit bestimmten Attributen zu versehen, um einem Tag damit eine zusätzliche inhaltliche Ebene zu geben.</p>
<p><span id="more-54"></span></p>
<p>Einfaches Beispiel:</p>
<p>&lt;a href=&#8221;http://hallowelt.de/&#8221;&gt;Marc&lt;/a&gt;</p>
<p>würde wie gewohnt einen Link zu Marcs Seite darstellen, ohne Microformats. Mittels <a href="http://de.wikipedia.org/wiki/XHTML_Friends_Network">XFN</a> (eines von vielen Microformats) kann ich der Verbindung zwischen Marc und mir zusätzliche Semantik verleihen, indem ich unsere (frei erfundene) Beziehung näher klassifizere:</p>
<p>&lt;a rel=&#8221;met colleague&#8221; href=&#8221;http://hallowelt.de/&#8221;&gt;Marc&lt;/a&gt;</p>
<p>Mit diesem kleinen Zusatz habe ich dem Link die Zusatzinformation hinzugefügt, dass Marc ein Kollege ist (colleague), den ich schon einmal getroffen habe (met). Voilá, Microformats.</p>
<p>Nachdem nun geklärt ist, dass Microformats sexy sind, wie kann man sie einfach implementieren? Nachfolgend der propagierte Ansatz in vier Schritten:</p>
<h3>1. Welche Microformats?</h3>
<p><a href="http://premasagar.com/microformats/compound/"><img class="alignnone size-medium wp-image-55" title="microformats_1" src="http://timeinfeldt.com/wp-content/uploads/2008/05/microformats_1-400x88.png" alt="" width="400" height="88" /></a></p>
<p>Es gibt eine ganze Reihe von Formaten, die Methode zur Implementierung bleibt aber gleich. Die <a href="http://premasagar.com/microformats/compound/">Beispielseite zu compound Microformats</a> zeigt einige kombinierte Anwendungen der beliebtesten Microformats, inklusive Codebeispielen. Einfach die passende Kombination aussuchen. Ich habe mich für das Beispiel hCard + adr + geo entschieden.</p>
<h3>2. Geoinformationen finden</h3>
<p><a href="http://www.satsig.net/maps/lat-long-finder.htm"><img class="alignnone size-medium wp-image-56" title="microformats_2" src="http://timeinfeldt.com/wp-content/uploads/2008/05/microformats_2-400x252.png" alt="" width="400" height="252" /></a></p>
<p>Für die Geoinformationen im &#8220;geo&#8221;-Format benötigen wir die Latitude/Longitude-Angaben des jeweiligen Ortes. Also auf zum <a href="http://www.satsig.net/maps/lat-long-finder.htm">lat-long-finder</a>.</p>
<h3>3. Einbauen und Bestaunen</h3>
<p><img class="alignnone size-medium wp-image-57" title="microformats_3" src="http://timeinfeldt.com/wp-content/uploads/2008/05/microformats_3.png" alt="" width="292" height="39" /></p>
<p>Im Beispiel der compound Microformats braucht man lediglich die entsprechenden Angaben zu verändern, die Struktur bleibt bestehen. Jetzt noch eine schöne Stelle auf der Website finden (im Optimalfall übergreifend, damit die Microformats auf allen Seiten zu finden sind) und das Ergebnis bestaunen.</p>
<p>Ich habe den Footer gewählt, da dieser auf allen Seiten gleich ist und die Geoinformationen da nicht sonderlich stören. Man könnte die Informationen auch per CSS verstecken.</p>
<h3>4. Microformats testen &amp; nutzen mit Operator (optional)</h3>
<p><a href="https://addons.mozilla.org/de/firefox/addon/4106"><img class="alignnone size-medium wp-image-58" title="microformats_4" src="http://timeinfeldt.com/wp-content/uploads/2008/05/microformats_4.png" alt="" width="291" height="30" /></a></p>
<p>Die ersten drei Schritte würden ausreichen, wenn man die Microformats für Suchmaschinen, zukünftige Browser (<a href="http://mozillalinks.org/wp/2007/08/on-firefox-3-and-microformats-with-michael-kaply/">Firefox 3 wird Microformats nativ unterstützen</a>) oder andere Applikationen eingebaut hat.</p>
<p>Um selber Microformats auf Websites zu nutzen, gibt es unter anderem das <a href="https://addons.mozilla.org/de/firefox/addon/4106">Operator Add-on</a> für Firefox. Damit erhält man eine (weitere) Toolbar, die vorhandene Microformats auf der betrachteten Seite anzeigt.</p>
<p>So, Beitrag zum semantischen Web getan. Fehlen nur noch die Killer Apps, die davon Gebrauch machen.</p>
]]></content:encoded>
			<wfw:commentRss>http://timeinfeldt.com/howto-microformats-in-four-steps/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>

