{"id":679,"date":"2007-12-17T21:19:09","date_gmt":"2007-12-17T20:19:09","guid":{"rendered":"http:\/\/notizblog.org\/2007\/12\/17\/unobtrusively-mapping-microformats-with-jquery\/"},"modified":"2023-03-01T16:45:35","modified_gmt":"2023-03-01T15:45:35","slug":"unobtrusively-mapping-microformats-with-jquery","status":"publish","type":"post","link":"https:\/\/notiz.blog\/2007\/12\/17\/unobtrusively-mapping-microformats-with-jquery\/","title":{"rendered":"Unobtrusively Mapping Microformats with jQuery"},"content":{"rendered":"\n<p>Auf 24 ways habe ich einen sch\u00f6nen Artikel \u00fcber <em><a href=\"https:\/\/web.archive.org\/web\/20210728003837\/https:\/\/24ways.org\/2007\/unobtrusively-mapping-microformats-with-jquery\/\">Unobtrusively Mapping Microformats with jQuery<\/a><\/em> gefunden.<\/p>\n\n\n\n<p><a href=\"https:\/\/en.wikipedia.org\/wiki\/Unobtrusive_JavaScript\">Unobtrusive JavaScript<\/a> verfolgt den Ansatz, den JavaScript Code komplett von der HTML Seite zu trennen. Dise Methode erm\u00f6glicht das schnelle und einfache \u00c4ndern des JavaScript-Codes an zentraler Stelle, \u00e4hnlich wie bei der Trennung von Design und <abbr title=\"Hypertext Markup Language\">HTML<\/abbr> bei <abbr title=\"Cascading Style Sheets\">CSS<\/abbr>.<\/p>\n\n\n\n<p>Der Artikel beschreibt, wie man mit <a href=\"http:\/\/microformats.org\/wiki\/hCard\">hCard<\/a> ausgezeichnete Kontakt-Daten auf <a href=\"http:\/\/maps.google.de\">Google-Maps<\/a> anzeigt.<\/p>\n\n\n\n<p>Eine wesentlich simplete Demo l\u00e4sst sich mit den <a href=\"http:\/\/microformats.org\/wiki\/rel\">rel-Attribute<\/a> realisieren. Als Beispiel HTML Code nehmen wir das <a href=\"http:\/\/microformats.org\/wiki\/rel-nofollow\">rel-nofollow<\/a> Microformat:<\/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\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"http:\/\/google.de\"<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"nofollow\"<\/span>&gt;<\/span>Google.de<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/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>Mit dem folgenden Code ist es M\u00f6glich, das <code>a<\/code> HTML-Tag mit dem CSS-Code <code>text-decoration: line-through;<\/code> zu erweitern.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">jQuery(<span class=\"hljs-string\">\"a&#91;@rel=nofollow]\"<\/span>).css(<span class=\"hljs-string\">\"text-decoration\"<\/span>, <span class=\"hljs-string\">\"line-through\"<\/span>);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Das ganze funktioniert nat\u00fcrlich auch wesentlich eleganter mit CSS, aber es geht hier ja nur ums Prinzip \ud83d\ude09 <\/p>\n\n\n\n<p>Den wesentlich besseren und ausf\u00fchrlicheren Bericht gibt es auf <a href=\"https:\/\/web.archive.org\/web\/20210728003837\/https:\/\/24ways.org\/2007\/unobtrusively-mapping-microformats-with-jquery\/\">24ways.org<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Auf 24 ways habe ich einen sch\u00f6nen Artikel \u00fcber Unobtrusively Mapping Microformats with jQuery gefunden. Unobtrusive JavaScript verfolgt den Ansatz, den JavaScript Code komplett von der HTML Seite zu trennen. Dise Methode erm\u00f6glicht das schnelle und einfache \u00c4ndern des JavaScript-Codes an zentraler Stelle, \u00e4hnlich wie bei der Trennung von Design und HTML bei CSS. Der [&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":[469,164,183,468],"class_list":{"0":"post-679","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-web","7":"tag-jquery","8":"tag-microformats","9":"tag-mikroformate","10":"tag-unobtrusive-javascript","11":"h-entry","12":"hentry"},"_links":{"self":[{"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/posts\/679","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=679"}],"version-history":[{"count":5,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/posts\/679\/revisions"}],"predecessor-version":[{"id":22535,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/posts\/679\/revisions\/22535"}],"wp:attachment":[{"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/media?parent=679"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/categories?post=679"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/tags?post=679"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}