Monat: Juni 2009

  • openweb-podcast.jpg

    So, nach langer Abstinenz ist der OpenWebPodcast endlich wieder da und es ist alles neu… neuer Blog, neue Domain (openwebpodcast.de) und eine neue etwas längere Folge (wir hatten ne Menge aufzuholen 😉 )

    Die Links zur Sendung findet ihr hier!

    Den Podcast abonnieren:

    2 Kommentare zu Wir podcasten wieder…

  • Der Inhalt wure an die neusten Änderungen der Microdata-Spezifikation angepasst. Letztes Update 30.01.2010.

    In dem Punkt, dass HTML semantischer werden muss, ist sich die Web-Welt einig, nur das „Wie“ ist noch nicht ganz klar. Aus verschiedenen Gründen (die alle sehr, sehr technisch sind) ist die WHATWG-Community bzw. Ian Hickson im speziellen, nicht sehr begeistert von dem bisherigen De-facto-Standard RDFa und hat deshalb vor ein paar Wochen Microdata als eine mögliche Alternative vorgestellt.

    Microdata-Objekte bestehen eigentlich nur aus einer Vielzahl von Key/Value-Paaren. Ein Object wird durch einen umschließenden HTML-Tag mit einem itemscope-Attribut gekennzeichnet und hat mehrere Properties ausgezeichnet durch itemprop-Attribute.

    <div itemscope>
 <p>Mein Name ist <span itemprop="name">Matthias</span>.</p>
</div>Code-Sprache: HTML, XML (xml)

    Microdata ist für mich die gelungene Weiterentwicklung der Microformats-Idee unter Berücksichtigung von RDFa und prinzipiell lassen sich auch beide Standards mit Microdata umsetzen. Wie generell von HTML5 gewohnt, kann man auch Microdata auf viele verschiedene Weisen benutzen ohne den Standard zu verletzen.

    Microdata im Microformats-Stil

    Um z.B. eine hCard mit Microdata abzubilden muss man eigentlich nur die bisher verwendeten class durch itemprop-Attribute zu ersetzen und mit itemtype das Format festlegen.

    <div itemscope itemtype="http://microformats.org/profile/hcard">
 <span itemprop="fn">Matthias Pfefferle</span>
 <img itemprop="photo" src="avatar.png" alt="Avatar" />
</div>Code-Sprache: HTML, XML (xml)

    HTML5 und Microdata bieten außerdem eine ganze Reihe weiterer Tags und Attribute die alle bisherigen Microformats-Probleme beheben sollten. Aber darauf werde ich in einem extra Artikel noch detaillierter darauf eingehen.

    Microdata im RDFa-Stil

    item und itemprop können aber auch durch URIs (ähnlich wie RDFa) ausgezeichnet werden und würden sich dadurch relativ leicht (durch z.B. GRDDL) in klassisches RDF konvertieren lassen.

    <div itemscope itemtype="http://www.w3.org/2001/vcard-rdf/3.0#">
  <span itemprop="http://www.w3.org/2001/vcard-rdf/3.0#fn">
    Matthias Pfefferle
  </span>
  <img itemprop="http://www.w3.org/2001/vcard-rdf/3.0#photo"
       src="avatar.png" alt="Avatar" />
</div>Code-Sprache: HTML, XML (xml)

    Fazit

    Trotz anfänglicher Skepsis bin ich immer begeisterter von dem neuen HTML5 Draft! Microdata fühlt sich einfach viel mehr nacht HTML an… 

    <div itemscope itemtype="http://microformats.org/profile/hcard">
  <a itemprop="url" href="https://notiz.blog">
    <span itemprop="fn">Matthias Pfefferle</span>
  </a>
</div>Code-Sprache: HTML, XML (xml)

    …als RDFa.

    <div xmlns:foaf="http://xmlns.com/foaf/0.1/">
  <span typeof="foaf:Person">
    <a property="foaf:name" rel="foaf:homepage" href="https://notiz.blog">
      Matthias
    </a>
  </span>
</div>Code-Sprache: HTML, XML (xml)

    Trotzdem hoffe ich, dass man sich doch noch irgendwie einigen kann und sich vielleicht in der Mitte trifft. Zwei neue HTML-Spezifikationen (XHTML2 & (X)HTML5) sind schon verwirrend genug, da brauchen wir nicht auch noch zwei unterschiedliche Semantik-HTML-Standards

    5 Kommentare zu Microdata – Semantisches HTML5

  • 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 (öffnet in neuem Tab).

    „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 😉

    2 Kommentare zu Mozilla Jetpack (und Microformats)