Tag Archives: JavaScript

hAwesome

Posted on by

Da findet man ein paar echt schicke Sachen im Web und nimmt sich vor mal darüber zu bloggen… richtig drüber zu bloggen… nicht als OpenWeb-Notizen oder solches Zusammenfass-Zeugs… richtig drüber bloggen! …und dann vergisst man ‘s oder hat keine Zeit!

Also hier ein paar echt großartige Microformats-News… Zusammengefasst!

Microformats Shiv

Glenn Jones, der hier schon wegen etlicher Dinge, Scripte, Addons, usw. erwähnt wurde, bastelt an einem “[...] light weight cross brower JavaScript Microformats parser“. Der Parser basiert auf der Microformats API von Mozilla und funktioniert in allen gängigen Browsern. Unterstützte Formate: hCard, hCalendar, hResume, hReview, hAtom, XFN, adr, geo, tag.

Draggables

Und schon wieder Glenn Jones, diesmal mit einem Microformats/HTML5/JavaScript/Drag&Drop – Dingens. Mit dem Script ist es möglich, Microformats zwischen unterschiedlichen Seiten per drag&drop auszutauschen:

Having observed users connect to sites using OAuth without really understanding what exchange of data has taken place, I decided to investigate other metaphors/conventions that might be more transparent. Draggables is a series of demos that explore the use of drag and drop to directly exchange data between web sites.

Das ist nicht ganz neu, aber gar keine schlechte Idee… ein Profil mit der Maus auf das Adressbuch zu ziehen ist sicherlich verständlicher als die ganze OAuth oder OpenID Hin-und-Her-Leiterei… zumindest für Web-Neulinge!

hForms

…und nochmal Glenn Jones. Zu guter Letzt treibt er noch das hcard-input-brainstorming voran um auch Profil- oder Event-Eingaben zu standardisieren… hForms oder Microforms so zu sagen :)

Use hCard properties as class names on form elements inside a container (such as a containing <fieldset> or the containing <form>) to indicate that those form elements accept values with the semantics of the respective hCard properties.

So, genug für heute! Demnächst gibt’s dann auch noch ein bisschen mehr zu OStatus for WordPress… natürlich ausführlich und nicht zusammengefasst :)

Schlaft schön!

Mozilla Jetpack (und Microformats)

Posted on by

Jetpack ist das jüngste Baby der Mozilla Labs und bietet eine Art API, die es Entwicklern ermöglicht, den Firefox mit klassischen Web-Techniken (HTML, JavaScript und CSS) zu erweitern. Statt mit XUL kann man seine Firefox Addons demnächst vielleicht wirklich mit HTML und CSS gestalten. Großartige Idee!

Übrigens unterstützt Jetpack, wie auch Ubiquity, die ab der Version 3 in Firefox nativ implementierte Microformats API. Der folgende Code zeigt, wie man die Microformats API in Jetpack-Skripte integrieren kann. Das Beispiel zählt z.B. alle hCards der Seite, auf der man sich gerade befindet und zeigt das Ergebnis per Info-Message an:

Components.utils.import("resource://gre/modules/Microformats.js");

// count hCards
jetpack.tabs.onFocus(function() {
  // load HTML
  var doc = jetpack.tabs.focused.contentDocument;
  // count microformats
  var uFcount = Microformats.count('hCard', doc);
  // load notifier
  jetpack.notifications.show({
    title: 'hCards',
    body: 'number of hCards on this website: ' + uFcount,
    icon: 'http://microformats.org/favicon.ico'
  });
});

Nachtrag:

Unter Windows und Linux scheinen die Messages nicht so ganz zu funktionieren, deshalb gibt’s hier nochmal nen Beispiel wo der Counter in der Statusbar ausgegeben wird:

Components.utils.import("resource://gre/modules/Microformats.js");

jetpack.statusBar.append({
  html: '<img src="http://microformats.org/favicon.ico">
           hCards: <span id="hcard-count">0</span>',
  onReady: function(jetpackWidget) {
    function counthCard(){
      //load HTML
      var doc = jetpack.tabs.focused.contentDocument;
      // count microformats
      var uFcount = Microformats.count('hCard', doc);
      if (uFcount > 0) {
       $(jetpackWidget).find('#hcard-count').html(uFcount);
      }
    }
    jetpack.tabs.onFocus(counthCard);
  }
});

Mal schaun ob mir demnächst noch etwas sinnvolleres Einfällt ;)

hCardMapper für WordPress

Posted on by

Wie in meinem letzten Post über den hCardMapper beschrieben, war es in der Tat nicht möglich den Microformats-Parser/Proxy ohne weitere Probleme auszutauschen. Die generierten JSON Formate der einzelnen Parser (ufXtract, hKit, mofo) unterscheiden sich an einigen Stellen zu sehr um sie alle gleich behandeln zu können. Soweit zur schlechten Nachricht…

Die gute Nachricht ist, dass sich Gordon Oheim (der Macher des hCardMappers) nochmal alle JSON Formate vorgenommen und eine neue Version gebastelt hat:

v0.94 – Added better support for JSON returned by Optimus, ufXtract and hKit.

Der Mapper sollte also mit mofo, Optimus, ufXtract and hKit problemlos funktionieren.

Die nächste tolle Nachricht ist, dass Gordon auch auf einen kleinen Änderungswunsch von mir sofort eingegangen ist, so dass wir euch jetzt eine hCardMapper Edition von dem WordPress hCard-Commenting Plugin anbieten können :) .

Download: hCardMapper for WordPress v0.1 hCardMapper bei WordPress.org

Wenn ihr immer die aktuelle Version haben wollt, hier ist der Link zum SVN.

Ich hab das Plugin auch mal auf notizBlog aktiviert und würde mich über euer Feedback freuen. Macht es Sinn über das Admin-Menü zwischen beiden Versionen (hCard-Commenting und hCardMapper-Commenting) zu wechseln?

Ein dickes Danke nochmal an Gordon für seine tolle und schnelle Arbeit… tolles Script.

hCard Mapper

Posted on by

…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üllen, ähnlich wie bei bragster.com oder getsatisfaction.com.

Das schöne an hCardMapper ist seine flexible Struktur. Die JavaScript Klasse ist so aufgebaut, dass sie eigentlich Microformats-Parser unabhängig funktionieren sollte, da sie die Daten über einen “Proxy” abfrägt. Die einzige Vorgabe ist, dass dieser Proxy eine JSON formatierte hCard (jCard) zurückgibt. Das Problematische an dieser Variante ist, dass jeder Parser unterschiedliche Ergebnisse liefert… ich werde es heute abend mal mit dem hKit-Parser testen.

Ein weiter Vorteil ist die Formular-Unabhängige Programmierung die es ermöglicht, das Script auch problemlos auf vorhandene Formulare anzuwenden. Über mappnings werden die hCard-Attribute den entsprechenden Formular-Felder zugeordnet.

Event.observe(window, 'load', function() {
  hcr = new com.omniacomputing.HCardMapper({
    register: true,
    proxy: '/hcardmapper/hcard?uri=',
    insertBelowEl: 'hcr-hook',
    mappings: {
      given_name: 'first',
      family_name: 'last',
      tel: {tel: 'phone', work: 'phone', cell:'phone'},
      email: 'email',
      org: {org: 'company', organization_name: 'company'},
      url: 'website',
      street_address: 'street',
      postal_code: 'zip',
      locality: 'town'
    }
  })
});

Quelle: http://lib.omnia-computing.de/hcardmapper

Tolle Idee, mal schau’n wie gut das Script mit den (oben schon erwähnten) unterschiedlichen Verarbeitungsweisen der Parser umgeht…

Optimus User Script for Operator

Posted on by

optimus transformer

I wrote a small User Script for the Operator Toolbar (Firefox Plugin to handle Microformats), so you can transform the detected microformats using the Optimus transformer. Optimus supports two kinds of transformations (microformats to jSON or to XML) and a basic microformats validation.

The User Script supports the transformations and the validation for the following Microformats: , , , , , , , , , and .

Download: Optimus User Script for Operator V .1 Latest Version

If you find a bug, please report it through the comments…

User Script tutorials:

microJSON – Microformats in JSON

Posted on by

microJSON ist ein Projekt von Jon Sykes und Jim Barraud. Es geht darum, Microformats in Form der JSON Schreibweise darzustellen. Die Idee von JSON ist, einen einfachen Datenaustausch von Objekten oder auch anderen Datenstrukturen wie z.B. Arrays zwischen Client Systemen (z.B. dem WebBrowser) und Server Systemen zu realisieren. Der Vorteil von JSON ist, dass sie kaum Overhead produziert und in JavaScript über die eval() Funktion wieder ganz einfach in ein Objekt gewandelt werden kann.

Beipiel einer hCard:

<div id="hcard-given-middle-family" class="vcard">
  <span class="fn n">
    <span class="given-name">given</span>

    <span class="additional-name">middle</span>
    <span class="family-name">family</span>
  </span>
  <div class="org">org</div>

  <a class="email" href="mailto:email">email</a>
  <div class="adr">
    <div class="street-address">street</div>

    <span class="locality">city</span>,<span class="region">state/province</span>,<span class="postal-code">postal</span>
    <span class="country-name">country</span>

  </div>
  <div class="tel">phone</div>
  <a class="url" href="aim:goim?screenname=AIM">AIM</a>

  <a class="url" href="ymsgr:sendIM?YIM">YIM</a>
</div>

Die gleiche hCard als jCard:

{
"vcard":{
  "name":{
    "given":"John",
    "additional":"Paul",
    "family":"Smith"

  },
  "org":"Company Corp",
  "email":"john@companycorp.com",
  "address":{
    "street":"50 Main Street",
    "locality":"Cityville",
    "region":"Stateshire",
    "postalCode":"1234abc",
    "country":"Someplace"

  },
  "tel":"111-222-333",
  "aim":"johnsmith",
  "yim":"smithjohn"
}

Neben den Abbildungen der Microformats hCard (jCard) und hCalendar (jCalendar) sind auch die Format jAtom, jResume, jReview, jAtom und jResume geplant. Weitere abbildung gibt es für normale Formulare (jForm), sowie auch für RSS Feeds (jRSS).

MicroJSON sind meiner Meinung nach eine sehr gute Idee, wenn man Bedenkt dass viele gute Microformats Parser, wie z.B. der vom Firefox Addon Operator verwendete ufParser, auf JavaScript basiert.