{"id":787,"date":"2008-03-28T09:41:36","date_gmt":"2008-03-28T08:41:36","guid":{"rendered":"http:\/\/notizblog.org\/2008\/03\/28\/hcard-mapper\/"},"modified":"2020-10-21T09:39:01","modified_gmt":"2020-10-21T07:39:01","slug":"hcard-mapper","status":"publish","type":"post","link":"https:\/\/notiz.blog\/2008\/03\/28\/hcard-mapper\/","title":{"rendered":"hCard Mapper"},"content":{"rendered":"\n<p>&#8230;oder <em>How to use hCards to fill in forms<\/em>.<\/p>\n\n\n\n<p><a href=\"https:\/\/web.archive.org\/web\/20090211121813\/http:\/\/lib.omnia-computing.de:80\/hcardmapper\">hCardMapper<\/a> ist eine JavaScript-Klasse (basierend auf <a href=\"http:\/\/www.prototypejs.org\/\">Prototype<\/a>) um Kontakt- oder Profil-Formulare mit Hilfe einer hCard automatisch zu f\u00fcllen, \u00e4hnlich wie bei bragster.com oder <a href=\"https:\/\/web.archive.org\/web\/20080831104943\/http:\/\/getsatisfaction.com\/people\/new\">getsatisfaction.com<\/a>.<\/p>\n\n\n\n<p>Das sch\u00f6ne an hCardMapper ist seine flexible Struktur. Die JavaScript Klasse ist so aufgebaut, dass sie eigentlich <a href=\"https:\/\/notiz.blog\/2007\/05\/24\/microformats-parser\/\">Microformats-Parser<\/a> unabh\u00e4ngig funktionieren sollte, da sie die Daten \u00fcber einen &#8222;Proxy&#8220; abfr\u00e4gt. Die einzige Vorgabe ist, dass dieser Proxy eine <a href=\"https:\/\/notiz.blog\/2007\/09\/16\/microjson-microformats-in-json\/\">JSON formatierte hCard<\/a> (<a href=\"https:\/\/web.archive.org\/web\/20080516043808\/http:\/\/microjson.org:80\/wiki\/JCard\">jCard<\/a>) zur\u00fcckgibt. Das Problematische an dieser Variante ist, dass jeder Parser unterschiedliche Ergebnisse liefert&#8230; ich werde es heute abend mal mit dem <a href=\"https:\/\/github.com\/drewm\/hkit\">hKit<\/a>-Parser testen.<\/p>\n\n\n\n<p>Ein weiter Vorteil ist die Formular-Unabh\u00e4ngige Programmierung die es erm\u00f6glicht, das Script auch problemlos auf vorhandene Formulare anzuwenden. \u00dcber <code>mappnings<\/code> werden die hCard-Attribute den entsprechenden Formular-Felder zugeordnet.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">Event.observe(<span class=\"hljs-built_in\">window<\/span>, <span class=\"hljs-string\">'load'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  hcr = <span class=\"hljs-keyword\">new<\/span> com.omniacomputing.HCardMapper({\n    <span class=\"hljs-attr\">register<\/span>: <span class=\"hljs-literal\">true<\/span>,\n    <span class=\"hljs-attr\">proxy<\/span>: <span class=\"hljs-string\">'\/hcardmapper\/hcard?uri='<\/span>,\n    <span class=\"hljs-attr\">insertBelowEl<\/span>: <span class=\"hljs-string\">'hcr-hook'<\/span>,\n    <span class=\"hljs-attr\">mappings<\/span>: {\n      <span class=\"hljs-attr\">given_name<\/span>: <span class=\"hljs-string\">'first'<\/span>,\n      <span class=\"hljs-attr\">family_name<\/span>: <span class=\"hljs-string\">'last'<\/span>,\n      <span class=\"hljs-attr\">tel<\/span>: {<span class=\"hljs-attr\">tel<\/span>: <span class=\"hljs-string\">'phone'<\/span>, <span class=\"hljs-attr\">work<\/span>: <span class=\"hljs-string\">'phone'<\/span>, <span class=\"hljs-attr\">cell<\/span>:<span class=\"hljs-string\">'phone'<\/span>},\n      <span class=\"hljs-attr\">email<\/span>: <span class=\"hljs-string\">'email'<\/span>,\n      <span class=\"hljs-attr\">org<\/span>: {<span class=\"hljs-attr\">org<\/span>: <span class=\"hljs-string\">'company'<\/span>, <span class=\"hljs-attr\">organization_name<\/span>: <span class=\"hljs-string\">'company'<\/span>},\n      <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">'website'<\/span>,\n      <span class=\"hljs-attr\">street_address<\/span>: <span class=\"hljs-string\">'street'<\/span>,\n      <span class=\"hljs-attr\">postal_code<\/span>: <span class=\"hljs-string\">'zip'<\/span>,\n      <span class=\"hljs-attr\">locality<\/span>: <span class=\"hljs-string\">'town'<\/span> \n    }\n  })\n});<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><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>Quelle: <a href=\"https:\/\/web.archive.org\/web\/20090211121813\/http:\/\/lib.omnia-computing.de:80\/hcardmapper\">http:\/\/lib.omnia-computing.de\/hcardmapper<\/a><\/p>\n\n\n\n<p>Tolle Idee, mal schau&#8217;n wie gut das Script mit den (oben schon erw\u00e4hnten) unterschiedlichen Verarbeitungsweisen der Parser umgeht&#8230;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8230;oder How to use hCards to fill in forms. hCardMapper ist eine JavaScript-Klasse (basierend auf Prototype) um Kontakt- oder Profil-Formulare mit Hilfe einer hCard automatisch zu f\u00fcllen, \u00e4hnlich wie bei bragster.com oder getsatisfaction.com. Das sch\u00f6ne an hCardMapper ist seine flexible Struktur. Die JavaScript Klasse ist so aufgebaut, dass sie eigentlich Microformats-Parser unabh\u00e4ngig funktionieren sollte, da [&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":[308,309,404,164,406],"class_list":{"0":"post-787","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-web","7":"tag-ajax","8":"tag-javascript","9":"tag-json","10":"tag-microformats","11":"tag-microjson","12":"h-entry","13":"hentry"},"_links":{"self":[{"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/posts\/787","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=787"}],"version-history":[{"count":3,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/posts\/787\/revisions"}],"predecessor-version":[{"id":20514,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/posts\/787\/revisions\/20514"}],"wp:attachment":[{"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/media?parent=787"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/categories?post=787"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/tags?post=787"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}