<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="https://notiz.blog/wp-content/plugins/pretty-feeds/pretty-feed-v4.xsl" type="text/xsl" media="screen" ?>


<!--

	Feeds whisper secrets,
	In the RSS Club's embrace,
	Knowledge blooms in grace.

-->

<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/"
	xmlns:source="http://source.scripting.com/"
xmlns:creativeCommons="http://backend.userland.com/creativeCommonsRssModule"
>

<channel>
	<title>namespaces &#8211; notizBlog</title>
	<atom:link href="https://notiz.blog/tag/namespaces/feed/" rel="self" type="application/rss+xml" />
	<link>https://notiz.blog</link>
	<description>a weblog mainly about the open, portable, interoperable, small, social, synaptic, semantic, structured, distributed, (re-)decentralized, independent, microformatted and federated social web</description>
	<lastBuildDate>Mon, 05 Mar 2018 23:01:51 +0000</lastBuildDate>
	<language>de</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://notiz.blog/wp-content/uploads/2019/10/cropped-notizblog-icon-1-32x32.png</url>
	<title>namespaces &#8211; notizBlog</title>
	<link>https://notiz.blog</link>
	<width>32</width>
	<height>32</height>
</image> 
<source:blogroll>https://reader.pfefferle.org/i/?a=opml&amp;get=c_2</source:blogroll>
<creativeCommons:license>https://creativecommons.org/licenses/by-sa/4.0/</creativeCommons:license>
<atom:link rel="hub" href="https://pubsubhubbub.appspot.com"/>
<atom:link rel="hub" href="https://pubsubhubbub.superfeedr.com"/>
<atom:link rel="hub" href="https://switchboard.p3k.io/"/>
<atom:link rel="self" href="https://notiz.blog/tag/namespaces/feed/"/>
<atom:link rel="search" type="application/opensearchdescription+xml" title="Search notizBlog" href="https://notiz.blog/wp-api/opensearch/1.1/document" />	<item>
		<title>Microdata – wie Microformats bloß besser… (Teil 2)</title>
		<link>https://notiz.blog/2011/06/26/microdata-wie-microformats-blos-besser-teil-2/</link>
					<comments>https://notiz.blog/2011/06/26/microdata-wie-microformats-blos-besser-teil-2/#comments</comments>
		
		<dc:creator><![CDATA[Matthias Pfefferle]]></dc:creator>
		<pubDate>Sun, 26 Jun 2011 20:06:32 +0000</pubDate>
				<category><![CDATA[Open Web]]></category>
		<category><![CDATA[include pattern]]></category>
		<category><![CDATA[Microdata]]></category>
		<category><![CDATA[Microformats]]></category>
		<category><![CDATA[namespaces]]></category>
		<guid isPermaLink="false">http://notizblog.org/?p=3693</guid>

					<description><![CDATA[Microdata – wie Microformats bloß besser… (Teil 1): über abbr-design-pattern, value-class-pattern und Meta-Informationen Knapp zwei Jahre nach dem ersten Teil, komme ich endlich mal zu Nummer 2 🙂 Nach den ganzen Diskussionen um schema.org und Microformats V2 ist es mal wieder an der Zeit, am Image von Microdata zu arbeiten. Namenskollisionen und Namespaces class-Attribute werden [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p><strong><a href="https://notiz.blog/2009/08/10/microdata-wie-microformats-bloss-besser-teil-1/">Microdata – wie Microformats bloß besser… (Teil 1)</a>: über abbr-design-pattern, value-class-pattern und Meta-Informationen</strong></p>



<p>Knapp zwei Jahre nach dem ersten Teil, komme ich endlich mal zu Nummer 2 🙂 Nach den ganzen <a href="https://notiz.blog/2011/06/02/websemantics-google-yahoo-und-bing-einigen-sich-auf-einen-standard/">Diskussionen um schema.org</a> und <a href="https://notiz.blog/2011/06/21/pfefferles-openweb-microformats-v2/">Microformats V2</a> ist es mal wieder an der Zeit, am Image von Microdata zu arbeiten.</p>



<h3 class="wp-block-heading">Namenskollisionen und <em>Namespaces</em></h3>



<p><code>class</code>-Attribute werden in erster Linie zum Gestalten (CSS) und für JS benutzt! Laut &quot;<em><a href="http://www.webdirections.org/sotw10">The State of Web Development 2010</a></em>&quot; setzen nur <a href="http://www.webdirections.org/sotw10/markup/#semantics">knapp 35% aller Befragten</a> Microformats ein, das heißt mehr als 65% haben keine Ahnung von Mikroformaten oder setzten sie nicht ein. Das kann zu zwei Problemen führen:</p>



<ol class="wp-block-list">
    <li>Microformats werden oft durch Re-Designs zerstört. Facebook ist wohl das prominenteste Beispiel, nach einem Re-Design verschwanden alle Microformats von den Profilseiten.</li>
    <li>Es werden fälschlicherweise <code>class</code>-Attribute interpretiert die gar nichts mit Microformats zu tun haben nur zufällig den passenden Namen tragen. Anfällige Klassen sind z.B. <code>url</code> (hCard), <code>photo</code> (hCard), <code>summary</code> (hReview), <code>description</code> (hReview) oder <code>author</code> (hAtom).</li>
</ol>



<p>Um diesem Problem Herr zu werden denkt <del>die Community</del> Tantek Çelik über eine Art <a href="http://microformats.org/wiki/microformats-2#ADVANTAGES"><em>Namespace</em>-Erweiterung</a> nach.</p>



<p><strong>Microformats</strong></p>



<p>So könnten Microformtas demnächst folgendermaßen aussehen:</p>


<pre class="wp-block-code"><span><code class="hljs language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"h-card"</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-fn"</span>&gt;</span>Max Mustermann<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></span></pre>


<p>Dabei steht:</p>



<ul class="wp-block-list">
    <li>&quot;h-*&quot; für die <em>root-names</em>, z.B. &quot;h-card&quot;, &quot;h-event&quot;, &quot;h-entry&quot;</li>
    <li>und &quot;p-*&quot; für &quot;simple&quot; (Text) Properties, z.B. &quot;p-fn&quot;, &quot;p-summary&quot;</li>
</ul>



<p>&#8230;und es gibt noch eine reihe weiterer <em>Prefixes</em>. Das ist zwar schön und gut und verhindert sicherlich einen Großteil der Namenskollisionen und man kann seinen Entwicklern sicherlich auch eintrichtern, alle <code>x-</code> Klassen in ruhe zu lassen&#8230; aber man mach damit jegliche Semantik kaputt. Nix mehr mit <em><a href="http://microformats.org/wiki/posh">Plain Old Semantic HTML</a></em> (POSH):</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
    <p>POSH encapsulates the best practices of using semantic HTML to author web pages. Semantic HTML is the subset of HTML 4.01 (or XHTML 1.0) elements and attributes that are semantic rather than presentational. The best way to learn and understand POSH is to do it.</p>
</blockquote>



<p>&#8230;und <em><a href="http://www.w3.org/QA/Tips/goodclassnames">semantic class names</a></em>:</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
    <p>Think about why you want something to look a certain way, and not really about how it should look. Looks can always change, but the reasons for giving something a look stay the same.</p>
</blockquote>



<p>Außerdem verkompliziert man das, jetzt noch so einfach zu nutzende, Format unnötig. Wann ist etwas eine id (<code>i-*</code>) oder eine Nummer (<code>n-*</code>) und was ist mit Attributen, die sowohl aus auch sein können?</p>



<p><strong>Microdata</strong></p>



<p>Der Microdata Teil ist relativ schnell abgehandelt&#8230; Durch die Trennung von <em>Semantik</em> und <em>Design</em> kommt es bei Mircodata per se zu keinen Kollisionen:</p>


<pre class="wp-block-code"><span><code class="hljs language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">itemtype</span>=<span class="hljs-string">"http://microformats.org/profile/hcard"</span> <span class="hljs-attr">itemscope</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">itemprop</span>=<span class="hljs-string">"fn"</span>&gt;</span>Max Mustermann<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></span></pre>


<h3 class="wp-block-heading">Informationen Referenzieren</h3>



<p>Informationen stehen auf Webseiten nicht immer so nahe beieinander, so dass es oftmals schwer ist, alle Daten mit einem HTML Attribut zu umschließen.</p>



<p><strong>Microformats</strong></p>



<p>Je komplizierter das Format oder der Anwendungsfall, desto mehr stößt man mit Microformats an die grenzen des machbaren. HTML 4 bietet keinerlei Mechanismen, den oben angesprochenen Problem zu lösen, deshalb greift die Microformtas-Community zu einer recht Kreativen Lösung: dem <em><a href="http://microformats.org/wiki/include-pattern">include-pattern</a></em>.</p>


<pre class="wp-block-code"><span><code class="hljs language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vcard"</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"include"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#author-name"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"fn n"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"author-name"</span>&gt;</span>Max Mustermann<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></code></span></pre>


<p>oder:</p>


<pre class="wp-block-code"><span><code class="hljs language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vcard"</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">object</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"include"</span> <span class="hljs-attr">data</span>=<span class="hljs-string">"#author-name"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">object</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"fn n"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"author-name"</span>&gt;</span>Max Mustermann<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></code></span></pre>


<p>Nette Idee mit etlichen Unschönheiten:</p>



<ul class="wp-block-list">
    <li>Leere HTML-Elemente</li>
    <li>Zweckentfremdung von Object- bzw. Link-Element</li>
    <li>Die Nutzung von <code>&lt;object /&gt;</code> führt zu einigen Problem bei einigen Versionen von Internet Explorer, Safari und Firefox</li>
</ul>



<p><strong>Microdata</strong></p>



<p>Microdata löst das Problem mit dem <code>itemref</code>-Attribut:</p>


<pre class="wp-block-code"><span><code class="hljs language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">itemscope</span>
     <span class="hljs-attr">itemtype</span>=<span class="hljs-string">"http://microformats.org/profile/hcard"</span>
     <span class="hljs-attr">itemref</span>=<span class="hljs-string">"author-name"</span>&gt;</span>
 ...
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">itemprop</span>=<span class="hljs-string">"fn n"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"author-name"</span>&gt;</span>Max Mustermann<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></code></span></pre>


<p>Viel mehr gibt es dazu eigentlich nicht zu sagen 🙂</p>



<h3 class="wp-block-heading">Fazit</h3>



<p>Als Fazit, passt hier sehr gut ein Satz den ich auch als Fazit im aktuellen <a href="https://notiz.blog/2011/06/21/pfefferles-openweb-microformats-v2/">Webstandards-Magazin</a> verwende:</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
    <p>Microformats sind und bleiben Plain Old Semantic HTML und man sollte auch in Zukunft keinesfalls darauf verzichten sie einzusetzen, selbst mit dem Risiko einer fehlerhaften Implementierungen oder Namenskollisionen, „erzieht“ die Nutzung von Microformats einen jeden Webentwickler dazu „schönen“ und „sprechenden“ HTML-Code zu schreiben.</p>
</blockquote>



<p>&#8230;um HTML-Code aber wirklich maschinenlesbar zu machen, wird es Zeit auf Microdata und RDFa zu setzen. Microformats haben den Weg für bessere und native Lösungen geebnet und haben weiterhin ihre Daseinsberechtigung aber man sollte nicht mehr als dem Format machen, als es leisten kann.</p>
<p>Congratulations on being an RSS reader! You are part of an elite group of people who know how to stay updated in style.</p>]]></content:encoded>
					
					<wfw:commentRss>https://notiz.blog/2011/06/26/microdata-wie-microformats-blos-besser-teil-2/feed/</wfw:commentRss>
			<slash:comments>2</slash:comments>
		
		
			</item>
	</channel>
</rss>
