Text

· · zu lesen

Ich habe in den letzten Monaten eine Menge über Web Intents gelesen und ich finde immer noch dass der Webmonkey die Thematik bisher am treffendsten beschrieben hat:

In practice Web Intents work a bit like mailto: links, defining an action and then passing it along to the browser, which allows the user to choose how to handle the action. The difference is that instead of opening a desktop app, Web Intents connect to web services.

Der Vergleich ist simple und ich habe mir die Frage gestellt: Wieso nicht einfach wirklich unterschiedliche Schemes für die jeweiligen Anforderungen definieren? Eine App kann beim Browser anmelden dass sie share:// oder subscribe:// unterstützt und bei einem Klick auf einen entsprechenden Link, öffnet sich (statt der E-Mail App) eben die entsprechende Web-App.

…vor kurzem hab ich dann mal ein wenig mit Superfeedrs msgboy herumgespielt und entdeckt dass es bei HTML5 wirklich Custom-Schemes gibt die man frei definieren kann!

Mit folgendem Befehl kann man beim Browser einen eigenen Protocol-Handler setzen:

navigator.registerProtocolHandler('web+share', 'http://spread.ly/?url=%s', 'Spread.ly');Code-Sprache: JavaScript (javascript)

Alle neuen Schemes sollten mit "web+" beginnen, ausnahmen sind schon bestehende Schemes, wie z.B. "mailto", "mms", "nntp", "rtsp" oder "webcal".

Der passende a-Tag zum oben genannten Beispiel müsste also folgendermaßen aussehen:

<a href="web+share:http://pfefferle.org">Share this Page</a>Code-Sprache: HTML, XML (xml)

Klickt ein User den Link, wird einfach das %s vom Handler mit dem href ersetzt und aufgerufen:

http://spread.ly/?url=web+share:http://pfefferle.orgCode-Sprache: JavaScript (javascript)

Bisher war ich ja ein großer Web Intents Fan (und bin es auch immer noch), aber für solche simplen Aktionen wie "Share", "Like", "Subscribe" oder "Follow" reicht doch ein simples Custom-Scheme vollkommen aus. Kein unnötiges JavaScript (mal abgesehen vom Registrieren des Handlers), nur ein wenig HTML. Großartig!

Protocol-Handler lassen sich übrigens auch abhängig vom Mime-Type setzen:

navigator.registerContentHandler('application/atom+xml', 'http://www.google.com/ig/add?feedurl=%s', 'Google Reader')Code-Sprache: JavaScript (javascript)

Bei allen Web-Dokumenten mit dem Mime-Type application/atom+xml sollte der Browser jetzt nachfragen ob er die URL mit dem Google-Reader öffnen soll.

Text

· · zu lesen

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!

Text

· · zu lesen

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!

Hier klicken, um den Inhalt von Vimeo anzuzeigen.
Erfahre mehr in der Datenschutzerklärung von Vimeo.

„Mozilla Labs Jetpack – Intro & Tutorial“ direkt öffnen

Ü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'
  });
});Code-Sprache: JavaScript (javascript)

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);
  }
});Code-Sprache: JavaScript (javascript)

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

Text

· · zu lesen

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.

Text

· · zu lesen

…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' 
    }
  })
});Code-Sprache: JavaScript (javascript)

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…

Text

· · zu lesen
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: hCard, hCalendar, adr, hReview, hResume, tag, geo, XFN, xFolk, license and hAtom-hFeed.

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

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

Text

· · zu lesen

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>Code-Sprache: HTML, XML (xml)

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"
}Code-Sprache: JSON / JSON mit Kommentaren (json)

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.