WebSlices für den Internet Explorer 8 (IE8) erstellen

Webslice IconWebSlices ermöglichen das Abonnieren von Seiteninhalten ähnlich wie RSS. Diese Funktion ist eine Neuerfindung des bald erscheinenden Internet Explorers 8.
Wird ein WebSlice abonniert, so erscheint ein entsprechender Eintrag in den Favoriten. Per Klick öffnet sich ein kleines Fenster und zeigt die herausgelösten Inhalte an. In diesem Artikel erkläre ich wie Ihr mittels Mikroformaten WebSlices erstellt.

Mikroformate zur Einbettung von WebSlices

WebSlices definieren sich über Microsofts neue Mikroformate “hslice”, “entry-title” und “entry-content”. Diese drei Formate müssen vorhanden sein um ein WebSlice darzustellen. Ebenso muss das Element dem die Klasse “hslice” zugewiesen wurde über eine ID verfügen.

hslice
Dieses Mikroformat muss die anderen beiden Mikroformate beinhalten. Es bildet den äußeren Rahmen des WebSlices.
entry-title
Dieses Mikroformat muss innerhalb von “hslice” verwendet werden. Es stellt den Titel des WebSlices dar. Dieser erscheint in den Favoriten oder der Lesezeichen-/WebSliceleiste.
entry-content
Dieses Mikroformat beschreibt den Inhalt des Webslices. Es darf mehrfach verwendet werden und kann weitere HTML-Elemente enthalten.

Beispiel zur Verwendung

Folgendermaßen könnten die Mikroformate angewendet werden.

<div class="hslice" id="idname">
 <h1 class="entry-title">Titel des WebSlice in den Favoriten</h1>
 <div class="entry-content">
  <h2>Überschrift</h2>
  <p>Absatz</p>
 </div>
</div>

Bei der Ausgabe des WebSlices wird um das Mikroformat “entry-content” ein BODY generiert. Dieser hat jedoch leider die selben Eigenschaften wie die Mutter-Seite. Demzufolge werden auch per CSS vergebene Attribute angewendet. Microsoft “löst” dieses Problem mit dem Vorschlag dem BODY der Website eine ID zuzuweisen und diese über CSS anzusprechen.

WebSlice ausprobieren

Nach diesem Absatz habe ich einen Test-WebSlice verlinkt. Sofern Ihr den Internet Explorer 8 nutzt, erscheint beim hovern des Bereichs ein entsprechendes Icon. Ein Klick auf dieses Icon abonniert den Inhalt.

Link: Testseite besuchen

WebSlice-Icon deaktivieren

Wie oben veranschaulicht, erscheint ein kleines Icon sofern ein Inhalt als WebSlice erkannt wird. Soll dies nicht geschehen, so kann die Icon-Anzeige über folgenden META-Header deaktiviert werden.

<meta name="slice" scheme="IE" content="off"/>

Weitere Informationen

Da ich das WebSlice-Icon ewig gesucht habe, erspare ich Euch diese Misere und poste gleich den Link zum offiziellen Download von Microsoft. Das Paket enthält das Icon in Größen von 16-256 Pixeln sowie im PNG und GIF-Format. Also alles was das Herz begehrt.

Download: WebSlice-Icon herunterladen

Mit WebSlices lassen sich selbstredend noch deutlich komplexere Inhalte darstellen. Hier könnt Ihr Euch noch weiter mit dem Thema befassen. Beachtet auch meinen Artikel IE8 Release Candidate kommt. Was ist zu tun?

Photoshop CS4 für Webdesigner

Themenverwandte Artikel:

Folgende Beiträge könnten dich ebenfalls interessieren.


Dieser Beitrag wurde am 18. Dezember 2008 in der Kategorie Applications, Browser, Coding, Resources, Tips 'n' Tricks, Tutorials, Web Trends, Webdesign veröffentlicht. Es wurden folgende Tags vergeben: , , , ,

7 Reaktionen auf diesen Beitrag

  1. Matt
    19. Dezember 2008, 10:20 Uhr

    Interessant. hab das grad mal eingebaut.

    Fragen und Anregungen:
    Wer braucht das bzw. warum nutzt man nicht einfach RSS dazu?
    Wie kann man den Slice abonnieren, wenn das Icon abgeschaltet ist?
    Man muss im CSS möglicherweise ein paar zusätzliche Regeln definieren, da das Slice isoliert aus dem Kontext gerissen wird und dadurch die eigentlich vorhandene Kaskadierung im Stylesheet nicht mehr greift. Ich hatte anfänglich nämlich nur schwarzen Text auf dunkelgrauem Hintergrund, was nicht so toll ist.

  2. Jonas
    19. Dezember 2008, 11:34 Uhr

    @Matt: Wer das braucht kann ich dir nicht sagen. Microsoft brauchte vllt einen pseudo USP um den IE8 besser zu vermarkten. Beworben wird die Funktion mit dem Verfolgen von Wetterberichten und ebay-Auktionen.
    Wenn das Icon deaktiviert wurde erscheint es nicht mehr beim hovern, trotzdem wirst du oben im Browser informiert.
    Zu deiner Anregung mit dem CSS: Wie oben erwähnt ist es sinnvoll eine BODY-ID zu vergeben (der echten Website). Dann musst du nicht das BODY-Tag im CSS ansprechen sondern eben diese ID. Sofern das geschieht, nutzt das WebSlice einen “sauberen” body. Sprich: Weißer BG und schwarzer Text oder so. Hab ich allerdings aus Lust und Zeitmangel auch noch nicht gemacht.

  3. Plugin “WebChunks” zeigt WebSlices im Firefox - Kulturbanause
    19. Dezember 2008, 17:34 Uhr

    [...] WebSlices für den Internet Explorer 8 erstellt werden habe ich ja bereits in einem Artikel beschrieben. Nun stelle ich Euch das Firefox 3 Plugin “WebChunks” vor. Dieses Plugin ermöglicht [...]

  4. Internet Explorer 8 (IE8) steht zum Download bereit auf Kulturbanause
    19. März 2009, 21:15 Uhr

    [...] WebSlices für den Internet Explorer 8 (IE8) erstellen [...]

  5. Kevin Golde
    25. März 2009, 15:48 Uhr

    Hallo,
    mir gefällt dieser Beitrag sehr gut und hat mir viel gebracht nur ein problem habe ich noch…ich bin mir nich ganz sicher welche Inhalte ich darüber anbieten will. :-)

  6. Jonas
    25. März 2009, 18:17 Uhr

    @Kevin: Seeehr gut. Das Problem kenne ich :D

  7. Steven
    14. Juli 2009, 18:22 Uhr

    “Diese Funktion ist eine Neuerfindung des bald erscheinenden Internet Explorers 8. ”
    Die WebClips von Safari waren allerdings früher da und sehen den Webslices verblüffend ähnlich…

Bitte kommentiere diesen Eintrag!

Dir hat dieser Eintrag gefallen, du hast Fragen, Anregungen oder Kritik? Hier ist Platz dafür. Jeder Kommentar wird ernst genommen und trägt zum Informationsgehalt meiner Seite bei. Also los!