{"id":4343,"date":"2012-07-03T08:43:02","date_gmt":"2012-07-03T06:43:02","guid":{"rendered":"http:\/\/notizblog.org\/?p=4343"},"modified":"2021-03-30T16:10:52","modified_gmt":"2021-03-30T14:10:52","slug":"microformats-the-next-generation","status":"publish","type":"post","link":"https:\/\/notiz.blog\/2012\/07\/03\/microformats-the-next-generation\/","title":{"rendered":"Microformats: The next generation"},"content":{"rendered":"\n<div class=\"wp-block-image\"><figure class=\"alignright\"><img decoding=\"async\" src=\"https:\/\/notiz.blog\/wp-content\/uploads\/2007\/03\/mf-white.png\" alt=\"mf-white\"\/><\/figure><\/div>\n\n\n\n<p><a href=\"http:\/\/microformats.org\/2012\/06\/25\/microformats-org-at-7\">microformats.org wird 7<\/a>&#8230; Alles Gute!<\/p>\n\n\n\n<p>Zur Feier des Tages hat sich Frances Berriman die M\u00fche gemacht, die letzten 7 Jahre zusammen zu fassen und einen Ausblick auf die kommenden \u00c4nderungen zu geben.<\/p>\n\n\n\n<p>Da ich, seit ich bloggen kann, schon <a href=\"https:\/\/notiz.blog\/tag\/microformats\/\">\u00fcber Microformats berichte<\/a>, will ich den R\u00fcckblick nicht weiter kommentieren und nur auf die kommende Weiterentwicklung ein wenig eingehen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Microformats und HTML5<\/h2>\n\n\n\n<p>Seit dem ich das letzte mal <a href=\"https:\/\/notiz.blog\/2008\/07\/30\/html5-is-made-for-microformats\/\">\u00fcber diese Kombination geschrieben habe<\/a>, hat sich leider nicht viel ge\u00e4ndert&#8230; Die Microformats Community weigert sich weiterhin auf Microdata oder RDFa &#8222;upzugraden&#8220; und h\u00e4lt krampfhaft an den semantischen <code>classes<\/code> fest. Nichtsdestotrotz macht HTML5 mit <code>&lt;time \/&gt;<\/code> und <code>&lt;data \/&gt;<\/code> dem leidigen Thema <a href=\"https:\/\/notiz.blog\/2009\/05\/12\/microformats-value-class-pattern\/\"><code>abbr-design-pattern<\/code> bzw. <code>value-class-pattern<\/code><\/a> ein Ende. Statt Meta-Informationen umst\u00e4ndlich in HTML-Attributen zu verwurschteln, k\u00f6nnen Termine und GEO Daten bald sauber dargestellt werden:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">time<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"dtstart\"<\/span> <span class=\"hljs-attr\">datetime<\/span>=<span class=\"hljs-string\">\"2006-09-23\"<\/span>&gt;<\/span>a Saturday<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">time<\/span>&gt;<\/span>\n...\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">data<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"geo\"<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"37.386013;-122.082932\"<\/span> &gt;<\/span>Mountain View<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">data<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Immerhin! Mehr dazu im <a href=\"https:\/\/microformats.org\/wiki\/html5\">microformats-wiki<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Namespaces<\/h2>\n\n\n\n<p>Die wohl gr\u00f6\u00dften Ver\u00e4nderungen sind aber die geplanten <a href=\"http:\/\/microformats.org\/wiki\/microformats-2#distinguishing_properties_from_other_classes\">Pseudo-Namespaces<\/a> welche haupts\u00e4chlich das Parsen von Microformats vereinfachen sollen. Microformats waren bisher sehr fehleranf\u00e4llig, da sie sich die <code>class<\/code>-Attribute mit CSS und JavaScript zu teilen hatten. Es besteht immer die Gefahr dass rein f\u00fcr CSS genutzte Attribute f\u00e4lschlicherweise f\u00fcr Microformats genutzt wurden oder dass die semantischen Class-Names einem Re-Design zum Opfer fielen. Die Prefixes &#8218;<code>h-<\/code>&#8218;, &#8218;<code>p-<\/code>&#8218;, &#8218;<code>u-<\/code>&#8218;, &#8218;<code>dt-<\/code>&#8218; und &#8218;<code>e-<\/code>&#8218; sollen das Zuk\u00fcnftig verhindern und ein generisches parsen erm\u00f6glichen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">&#x27;<code>h-<\/code>&#x27; kennzeichnet einen Microformats-Container<\/h3>\n\n\n\n<p>Bisher ist die Microformats Community etwas inkonsequent mit der Benennung ihrer Formate&#8230; Mal mit beginnendem &#8222;v&#8220;, mal mit &#8222;h&#8220; und in seltenen F\u00e4llen auch ohne oder mit anderem Buchstaben:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>hCard: <code>class=\"vcard\"<\/code><\/li><li>hAtom: <code>class=\"hfeed\"<\/code><\/li><li>adr: <code>class=\"adr\"<\/code><\/li><li>xFolk: <code>class=\"xfolkentry\"<\/code><\/li><li>XOXO: <code>class=\"xoxo\"<\/code><\/li><\/ul>\n\n\n\n<p>Mit den Prefixes soll das jetzt alles vereinheitlicht werden:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>hCard: <code>class=\"h-card\"<\/code><\/li><li>hAtom: <code>class=\"h-feed\"<\/code><\/li><li>adr: <code>class=\"h-adr\"<\/code><\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">&#x27;<code>p-<\/code>&#x27; zeichnet <em>Properties<\/em> aus<\/h3>\n\n\n\n<p>Die mit &#8218;<code>p-<\/code>&#8218; gekennzeichnet Properties sollten, wenn nicht expliziert definiert, als Plain-Text interpretiert werden (kein HTML). Ein klassisches Property ist beispielsweise der Name einer Person:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><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>\n <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>Tantek \u00c7elik<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\">&#x27;<code>e-<\/code>&#x27; zeichnet <em>Rich Text<\/em> aus<\/h3>\n\n\n\n<p>Das &#8218;<code>e-<\/code>&#8218; Prefix k\u00f6nnte als Abk\u00fcrzung f\u00fcr &#8222;element tree&#8220;, &#8222;embedded markup&#8220;, oder &#8222;encapsulated markup&#8220; stehen und kann im Gegansatz zu den Properties auch HTML-Code beinhalten. In hAtom k\u00f6nnte der <code>entry-content<\/code> zu <code>e-entry-content<\/code> und bei der hReview die <code>description<\/code> zur <code>e-description<\/code> werden.<\/p>\n\n\n\n<h3>&#x27;<code>dt-<\/code>&#x27; f\u00fcr DateTime und &#x27;<code>u-<\/code>&#x27; f\u00fcr URL<\/h3>\n\n\n\n<p>Aus <code>dtstart<\/code> wird <code>dt-start<\/code> und alle URL-Felder bekommen ein vorgestelltes &#8218;<code>u-<\/code>&#8218;:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"u-url\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"...\"<\/span>&gt;<\/span>...<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"u-photo\"<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"...\"<\/span> \/&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Die URL kann in bestimmten Situtionen auch weg fallen, dazu aber im n\u00e4chsten Beispiel mehr&#8230;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Simpel und unabh\u00e4ngig vom Format<\/h2>\n\n\n\n<p>Zuk\u00fcnftig soll es auch nicht mehr so umst\u00e4ndlich sein Informationen semantisch auszuzeichnen. Will man derzeit einen simplen Link mit einer <a href=\"http:\/\/microformats.org\/wiki\/hcard\">hCard<\/a> versehen, muss man ihn wie folgt aufbl\u00e4hen:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><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>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"url fn\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"http:\/\/tantek.com\/\"<\/span>&gt;<\/span>Tantek \u00c7elik<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Nach der \u00dcberarbeitung soll folgendes reichen:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"h-card\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"http:\/\/tantek.com\/\"<\/span>&gt;<\/span>Tantek \u00c7elik<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Dabei gilt die Regel: Wenn es sich bei (z.B.) einer vCard um einen Link oder ein Bild handelt, kann man auf &#8218;<code>u-*<\/code>&#8218; und &#8218;<code>p-name<\/code>&#8218; verzichten&#8230; so ungef\u00e4r zumindest \ud83d\ude09<\/p>\n\n\n\n<p>Mehr dazu im Microformats-Wiki: <a href=\"http:\/\/microformats.org\/wiki\/microformats-2-implied-properties\">implied properties<\/a><\/p>\n\n\n\n<p>Au\u00dferdem kommt mit v2 eine Anleitung wie Microformats auf andere Formate wie JSON gemappt werden sollen. Aus&#8230;<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"h-card\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"http:\/\/benward.me\"<\/span>&gt;<\/span>Ben Ward<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>wird&#8230;<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JSON \/ JSON mit Kommentaren\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json\">&#91;{\n  <span class=\"hljs-attr\">\"type\"<\/span>: &#91;<span class=\"hljs-string\">\"h-card\"<\/span>],\n  <span class=\"hljs-attr\">\"properties\"<\/span>: {\n    <span class=\"hljs-attr\">\"name\"<\/span>: &#91;<span class=\"hljs-string\">\"Frances Berriman\"<\/span>] \n  }\n}]<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON mit Kommentaren<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\">Fazit<\/h2>\n\n\n\n<p>Ich bin mir noch nicht ganz sicher was ich von den geplanten \u00c4nderungen halten soll&#8230; die Nutzung der neuen HTML5 Tags und die Vereinfachung und Vereinheitlichung der Formate finde ich gut und notwendig&#8230; Auch eine einheitliche Regel, wie Microformats in anderen Formaten abgebildet werden sollen (z.B. JSON) macht durchaus Sinn (warum das Sinn macht, <a href=\"http:\/\/microformats.org\/wiki\/JSON\">hier<\/a>)&#8230; aber den Pseudo-Namespaces kann ich bisher nichts abgewinnen! Der &#8222;Namespace&#8220; sorgt zwar f\u00fcr mehr Qualit\u00e4t beim Parsen der Microformats, aber auf Kosten des semantischen HTMLs.<\/p>\n\n\n\n<p>Microformats sollten weiterhin f\u00fcr sch\u00f6nes, semantisches HTML sorgen und mehr nicht. Geht es um maschinenlesbaren Code, sollte man mit der Zeit gehen und auf <a href=\"https:\/\/notiz.blog\/2009\/06\/18\/microdata-semantisches-html5\/\">Microdata<\/a> oder <a href=\"https:\/\/notiz.blog\/2009\/07\/16\/rdfa-wird-wohl-doch-in-html5-integriert\/\">RDFa<\/a> setzen. Ob man seinen Quelltext an Microformats v2 anpasst oder mit <a href=\"https:\/\/schema.org\/\">Schema.org<\/a> auszeichnet sollte kaum mehr Aufwand sein.<\/p>\n\n\n\n<p>&#8230;\u00dcbrigens: Wer noch mehr \u00fcber die Vorteile von Microdata gegen\u00fcber Microformats lesen will, sollte sich die <a href=\"https:\/\/notiz.blog\/2011\/06\/21\/pfefferles-openweb-microformats-v2\/\">Ausgabe 10 des Webstandards-Magazin<\/a> durchlesen oder die Reihe &#8222;<a href=\"https:\/\/notiz.blog\/2009\/08\/10\/microdata-wie-microformats-bloss-besser-teil-1\/\">Microdata \u2013 wie Microformats blo\u00df besser\u2026<\/a>&#8220; hier im Blog!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>microformats.org wird 7&#8230; Alles Gute! Zur Feier des Tages hat sich Frances Berriman die M\u00fche gemacht, die letzten 7 Jahre zusammen zu fassen und einen Ausblick auf die kommenden \u00c4nderungen zu geben. Da ich, seit ich bloggen kann, schon \u00fcber Microformats berichte, will ich den R\u00fcckblick nicht weiter kommentieren und nur auf die kommende Weiterentwicklung [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"webmentions_disabled_pings":false,"webmentions_disabled":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":""},"categories":[2],"tags":[5171,164,183,527,956,536],"class_list":{"0":"post-4343","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-web","7":"tag-fediblog","8":"tag-microformats","9":"tag-mikroformate","10":"tag-rdfa","11":"tag-schema-org","12":"tag-semantic-html","13":"h-entry","14":"hentry"},"_links":{"self":[{"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/posts\/4343","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/comments?post=4343"}],"version-history":[{"count":2,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/posts\/4343\/revisions"}],"predecessor-version":[{"id":21313,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/posts\/4343\/revisions\/21313"}],"wp:attachment":[{"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/media?parent=4343"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/categories?post=4343"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/tags?post=4343"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}