<?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>value class pattern &#8211; notizBlog</title>
	<atom:link href="https://notiz.blog/tag/value-class-pattern/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>Wed, 03 Apr 2024 10:47:53 +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>value class pattern &#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/value-class-pattern/feed/"/>
<atom:link rel="search" type="application/opensearchdescription+xml" title="Search notizBlog" href="https://notiz.blog/wp-api/opensearch/1.1/document" />	<item>
		<title>Operator wird doch weiter entwickelt</title>
		<link>https://notiz.blog/2009/09/08/operator-wird-doch-weiter-entwickelt/</link>
					<comments>https://notiz.blog/2009/09/08/operator-wird-doch-weiter-entwickelt/#respond</comments>
		
		<dc:creator><![CDATA[Matthias Pfefferle]]></dc:creator>
		<pubDate>Tue, 08 Sep 2009 21:40:36 +0000</pubDate>
				<category><![CDATA[Open Web]]></category>
		<category><![CDATA[Addon]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[Firefox 3]]></category>
		<category><![CDATA[Microformats]]></category>
		<category><![CDATA[Microformats API]]></category>
		<category><![CDATA[Mikroformate]]></category>
		<category><![CDATA[Operator]]></category>
		<category><![CDATA[Plugin]]></category>
		<category><![CDATA[value class pattern]]></category>
		<guid isPermaLink="false">http://notizblog.org/?p=1852</guid>

					<description><![CDATA[Gute Neuigkeiten! Michael Kaply, der die Weiterentwicklung von Operator (ein Microformats Addon für Firefox) Ende 2008 eingestellt hat&#8230; Operator – Deciding what to do with Operator is difficult. [&#8230;] That being said, I’m going to do a few fixes for Operator, call it 1.0 and then stop development. &#8230;widmet sich jetzt doch wieder dem de [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>Gute Neuigkeiten! <a href="https://mike.kaply.com/">Michael Kaply</a>, der die Weiterentwicklung von <a href="https://web.archive.org/web/20101120155908/http://kaply.com:80/weblog/operator/">Operator</a> (ein <a href="http://microformats.org/wiki/browser">Microformats Addon</a> für Firefox) Ende 2008 eingestellt hat&#8230;</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
	<p>Operator – Deciding what to do with Operator is difficult. [&#8230;] That being said, I’m going to do a few fixes for Operator, call it 1.0 and then stop development.</p>
</blockquote>



<p>&#8230;widmet sich jetzt doch wieder dem de facto <em>(Microformats) Browser Plugin</em>&#8230;</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
	<p>The biggest news I have is that I have resumed work on Operator. In particular, I’m fixing bugs, adding a few usability enhancements and adding support for new microformat stuff like the value class/pattern for dates. I’m also considering completely removing the “Actions” toolbar and switching to interacting only with the data. I’m definitely looking for feedback on that one.</p>
</blockquote>



<p>Wer Ideen zu neuen Features oder Funktionen hat, kann diese gerne auf Michaels Weblog loswerden.<br/> Mein Wunsch: <a href="https://notiz.blog/2009/06/18/microdata-semantisches-html5/">Microdata</a> support 🙂</p>



<p>(Ich hoffe dass die Angekündigten <a href="http://microformats.org/wiki/value-class-pattern">value-class-pattern</a> Änderungen eventuell auch irgendwann in die native <a href="https://web.archive.org/web/20080701113514/http://www.kaply.com/weblog/2008/05/20/where-are-the-microformat-in-firefox-3/">Microformats Firefox API</a> aufgenommen werden.)</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/2009/09/08/operator-wird-doch-weiter-entwickelt/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Microdata &#8211; wie Microformats bloß besser&#8230; (Teil 1)</title>
		<link>https://notiz.blog/2009/08/10/microdata-wie-microformats-bloss-besser-teil-1/</link>
					<comments>https://notiz.blog/2009/08/10/microdata-wie-microformats-bloss-besser-teil-1/#comments</comments>
		
		<dc:creator><![CDATA[Matthias Pfefferle]]></dc:creator>
		<pubDate>Mon, 10 Aug 2009 20:30:32 +0000</pubDate>
				<category><![CDATA[Open Web]]></category>
		<category><![CDATA[abbr design pattern]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[include pattern]]></category>
		<category><![CDATA[Microdata]]></category>
		<category><![CDATA[Microformats]]></category>
		<category><![CDATA[Mikroformate]]></category>
		<category><![CDATA[value class pattern]]></category>
		<category><![CDATA[XHTML]]></category>
		<guid isPermaLink="false">http://notizblog.org/?p=1790</guid>

					<description><![CDATA[Der Inhalt wurde an die neusten Änderungen der Microdata-Spezifikation angepasst. Letztes Update 30.01.2010. Microdata – wie Microformats bloß besser… (Teil 2): über &#8222;Namenskollisionen und Namespaces&#8220; und &#8222;Informationen Referenzieren&#8220; Wie schon erwähnt, vereint Microdata die Vorzüge von RDFa und Microformats in einem Standard&#8230; aber nicht nur das, Microdata (in Verbindung mit HTML5) bietet auch einige schicke [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>Der Inhalt wurde an die <a href="https://notiz.blog/2009/10/10/microdata-update-und-usability-studie/">neusten Änderungen der Microdata-Spezifikation</a> angepasst. Letztes Update 30.01.2010.
	<a href="https://notiz.blog/2011/06/26/microdata-wie-microformats-blos-besser-teil-2/">Microdata – wie Microformats bloß besser… (Teil 2)</a>: über &#8222;Namenskollisionen und Namespaces&#8220; und &#8222;Informationen Referenzieren&#8220;
</p>



<p>Wie schon <a href="https://notiz.blog/2009/06/18/microdata-semantisches-html5/">erwähnt</a>, vereint Microdata die Vorzüge von <a href="http://rdfa.info">RDFa</a> und <a href="http://microformats.org">Microformats</a> in einem Standard&#8230; aber nicht nur das, Microdata (in Verbindung mit HTML5) bietet auch einige schicke Lösungen für diverse <a href="http://microformats.org/wiki/issues">Microformats-Problemchen</a>.</p>



<h4 class="wp-block-heading">Das <em>abbr-design-pattern</em> oder das <em>value-class-pattern</em></h4>



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



<p>Das <em><a href="http://microformats.org/wiki/abbr-design-pattern">abbr-design-pattern</a></em> ist bisher wohl das <a href="http://www.google.de/search?q=microformats+accessibility+abbr">umstrittenste Pattern</a> im <a href="http://microformats.org/wiki/Main_Page">Microformats-Wiki</a>. Grund für die Kritik an dem Pattern ist die etwas <a href="https://notiz.blog/2008/06/24/bbc-und-das-alte-haccessibility-problemchen/">unorthodoxe Verwendung</a> des <code>&lt;abbr&gt;</code> Tags um maschinenlesbare Meta-Informationen bereit zu stellen.</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">"vevent"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">abbr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dtstart"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"2007-10-05"</span>&gt;</span>October 5<span class="hljs-tag">&lt;/<span class="hljs-name">abbr</span>&gt;</span>
  ...
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></span></pre>


<p>Eine erste Alternative aus der Microformats-Community ist das <em><a href="http://microformats.org/wiki/value-class-pattern">value-class-pattern</a></em>, das zwar das Accessibility-Problem &#8222;behebt&#8220; aber noch lange keine Perfekte Lösung bietet.</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">"vevent"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'dtstart'</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'value-title'</span> <span class="hljs-attr">title</span>=<span class="hljs-string">'2007-10-05'</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
    October 5
  <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>Der HTML-Code wird durch weitere Elemente unnötig aufgeblasen und das Pattern basiert auf teilweise leeren Elementen.</p>



<p><strong>Microdata/HTML5:</strong></p>



<p>In HTML5 gibt es dagegen ein spezielles Tag um Zeit und Datum sowohl user als auch maschinenlesbar zu machen.</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/hcalendar"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">time</span> <span class="hljs-attr">itemprop</span>=<span class="hljs-string">"dtstart"</span> <span class="hljs-attr">datetime</span>=<span class="hljs-string">"2007-10-05"</span>&gt;</span>October 5<span class="hljs-tag">&lt;/<span class="hljs-name">time</span>&gt;</span>
  ...
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></span></pre>


<h4 class="wp-block-heading">Reine Meta-Informationen</h4>



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



<p>Eigentlich spricht es gegen die Prinzipien der Microformats-Idee, reine Metadaten zu verwenden: </p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Visible data = more accurate data. By designing for humans first and making the data presentable (thus viewed and <em>verified</em> by humans), the data is inevitably more accurate, not only to begin with (as errors are easily/quickly noticed by those viewing the pages/sites), but over time as well; in that changes are noticed, and if data becomes out-of-date or obsolete, that&#8217;s more likely to be noticed as well. This is in direct contrast to &#8222;side files&#8220; and invisible data like that contained in <code>&lt;meta&gt;</code> tags.<br> &#8212; <a href="http://microformats.org/wiki/principles#effects_of_principles">Tantek Çelik</a></p></blockquote>



<p>&#8230;aber <a href="http://microformats.org/wiki/geo">GEO-Daten</a> sind z.B. Informationen die der Benutzer nicht unbedingt sehen muss.</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">"geo"</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"latitude"</span>&gt;</span>37.386013<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"longitude"</span>&gt;</span>-122.082932<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><strong>Microdata/HTML5:</strong></p>



<p>In HTML5 gibt es für dieses Problem eine recht schicke Lösung: Laut der <a href="http://dev.w3.org/html5/spec/Overview.html#flow-content">Spezifikation</a> sind &lt;meta /&gt;-Tags im kompletten Quellcode (auch im <code>body</code>) erlaubt.</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#geo"</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">itemprop</span>=<span class="hljs-string">"latitude"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"37.386013"</span> /&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">itemprop</span>=<span class="hljs-string">"longitude"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"-122.082932"</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></span></pre>


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



<p>Selbst wenn sich <a href="https://html.spec.whatwg.org/multipage/microdata.html">Microdata</a> (item und itemprop) nicht durchsetzen sollte, sind &lt;meta&gt; und <a href="https://notiz.blog/2008/07/30/html5-is-made-for-microformats/">&lt;time&gt;</a> schon ein echter &#8222;Segen&#8220; für die <a href="http://microformats.org">Microformats-Community</a> 🙂</p>



<p>Im zweiten Teil nehm&#8216; ich mir das <a href="http://microformats.org/wiki/include-pattern">include-pattern</a> und das Problem der möglichen <a href="http://meiert.com/en/blog/20070913/microformats-and-pseudo-namespaces/">Namens</a>&#8211;<a href="http://meiert.com/en/blog/20090716/microformats-key-flaws/">Kollisionen</a> vor. <a href="https://notiz.blog/2011/06/26/microdata-wie-microformats-blos-besser-teil-2/">Microdata – wie Microformats bloß besser… (Teil 2)</a>: über &#8222;Namenskollisionen und Namespaces&#8220; und &#8222;Informationen Referenzieren&#8220;</p>
<p>You are a true RSS aficionado! While others are drowning in social media noise, you enjoy the simplicity and control of RSS. Congrats!</p>]]></content:encoded>
					
					<wfw:commentRss>https://notiz.blog/2009/08/10/microdata-wie-microformats-bloss-besser-teil-1/feed/</wfw:commentRss>
			<slash:comments>4</slash:comments>
		
		
			</item>
		<item>
		<title>Microformats: Value Class Pattern</title>
		<link>https://notiz.blog/2009/05/12/microformats-value-class-pattern/</link>
					<comments>https://notiz.blog/2009/05/12/microformats-value-class-pattern/#comments</comments>
		
		<dc:creator><![CDATA[Matthias Pfefferle]]></dc:creator>
		<pubDate>Tue, 12 May 2009 17:33:05 +0000</pubDate>
				<category><![CDATA[Open Web]]></category>
		<category><![CDATA[abbr design pattern]]></category>
		<category><![CDATA[Accessibility]]></category>
		<category><![CDATA[FediBlog]]></category>
		<category><![CDATA[GEO]]></category>
		<category><![CDATA[hAccessibility]]></category>
		<category><![CDATA[hAtom]]></category>
		<category><![CDATA[hCalendar]]></category>
		<category><![CDATA[Microformats]]></category>
		<category><![CDATA[Mikroformate]]></category>
		<category><![CDATA[value class pattern]]></category>
		<guid isPermaLink="false">http://notizblog.org/?p=1539</guid>

					<description><![CDATA[Das bisher wohl größte Problem bei der Verwendung von Microformats ist (oder besser wahr) die Accessibility durch die etwas zweckentfremdete Verwendung des &#60;abbr />-Tags. Das so genanntes abbr-design-pattern diente hauptsächlich dazu (es gibt noch einige andere Anwendungsfälle), ein für den Menschen lesbares Datum auch für die Maschine lesbar zu machen und ist Bestandteil von Mikroformaten [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>Das bisher wohl größte Problem bei der Verwendung von <strong>Microformats</strong> ist (oder besser wahr) die <a href="https://notiz.blog/?s=haccessibility">Accessibility</a> durch die etwas zweckentfremdete Verwendung des <a href="http://microformats.org/wiki/abbr-design-pattern"><code>&lt;abbr /></code>-Tags</a>.</p>



<p>Das so genanntes <a href="http://microformats.org/wiki/abbr-design-pattern">abbr-design-pattern</a> diente hauptsächlich dazu (es gibt noch einige andere Anwendungsfälle), ein für den Menschen lesbares Datum auch für die Maschine lesbar zu machen und ist Bestandteil von <strong>Mikroformaten</strong> wie z.B. <a href="http://microformats.org/wiki/hCalendar">hCalendar</a>, <a href="http://microformats.org/wiki/hAtom">hAtom</a> oder <a href="http://microformats.org/wiki/hReview">hReview</a>.</p>



<p>Ein Beispiel: <code>&lt;abbr class="dtstart" title="2009-05-12">heute&lt;/abbr></code></p>



<p><a href="https://wiki.selfhtml.org/wiki/HTML/Elemente/abbr">SelfHTML über das abbr-Element</a>:</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>zeichnet einen Text aus mit der Bedeutung &#8222;dies ist eine Abkürzung&#8220;</p></blockquote>



<p>Selbst wenn man davon ausgeht, dass das Wort <em>heute</em> eine Abkürzung für das volle Datum <em>2009-05-12</em> ist, gibt es ein großes Problem mit Screen-Readern. Die meisten Screen-Reader sind so konfiguriert, dass sie statt der Abkürzung, das im title-Attribut angegebene, vollständige Wort lesen.<br/> Im Falle der <a href="http://microformats.org/wiki/abbr-design-pattern">abbr-design-pattern</a> im oben genannten Beispiel wäre das <em>2009-05-12</em> (gelesen &#8222;Zweitausendneun minus Fünf minus Zwölf&#8220;), also viel missverständlicher als <em>heute</em>.</p>



<p>Das <a href="http://microformats.org/blog/2009/05/12/value-class-pattern/">gerade angekündigte</a> <strong><a href="http://microformats.org/wiki/value-class-pattern">value-class-pattern</a></strong> soll dieses (und einige andere) Problem jetzt beheben.</p>



<p>Ein Datum, wie im Beispiel oben, würde mit dem <strong>value-class-pattern</strong> folgendermaßen aussehen:</p>


<pre class="wp-block-code"><span><code class="hljs language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'dtstart'</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'value-title'</span> <span class="hljs-attr">title</span>=<span class="hljs-string">'2009-05-12'</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
  heute
<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></code></span></pre>


<p>Erklärung:</p>



<ul class="wp-block-list">
	<li><em>dtstart</em> gibt immer noch an, dass es sich bei dem folgenden um ein Datum handelt</li>
	<li>Die folgende Klasse: <em>value-title</em> gibt an, dass sich <em>dtstart</em> auf das <em>title</em>-Attribut des <em>spans</em> bezieht</li>
	<li>Im <em>title</em> steht der maschinen-lesbare text</li>
</ul>



<p>Das neue Pattern beschreibt aber noch eine ganze Reihe an anderen Anwendungsfällen, am besten ihr überfliegt die Seite einfach mal selbst: <a href="http://microformats.org/wiki/value-class-pattern">http://microformats.org/wiki/value-class-pattern</a></p>



<p>&#8230;es sind übrigens alle Microformats-Nutzer aufgerufen, ihre Seiten und Parser auf das neue Pattern umzustellen, also viel Spaß dabei 🙂</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/2009/05/12/microformats-value-class-pattern/feed/</wfw:commentRss>
			<slash:comments>4</slash:comments>
		
		
			</item>
	</channel>
</rss>
