WebSlices 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.

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"/>

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 7 Kommentare

  1. Steven
    schrieb am 14.07.2009 um 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…

    Antworten
  2. Kevin Golde
    schrieb am 25.03.2009 um 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. :-)

    Antworten
    • Jonas
      schrieb am 25.03.2009 um 18:17 Uhr:

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

      Antworten
  3. Internet Explorer 8 (IE8) steht zum Download bereit auf Kulturbanause
    schrieb am 19.03.2009 um 21:15 Uhr:

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

    Antworten
  4. Plugin “WebChunks” zeigt WebSlices im Firefox - Kulturbanause
    schrieb am 19.12.2008 um 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 […]

    Antworten
  5. Jonas
    schrieb am 19.12.2008 um 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.

    Antworten
  6. Matt
    schrieb am 19.12.2008 um 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.

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →