kulturbanause blog


Hier findest Du Artikel, Tutorials, Downloads, Tipps, Hacks, Snippets und aktuelle Szene-News rund um illustratives Webdesign, Social Media und digitale Bildbearbeitung.



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

internet-explorer-webslices-icon

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

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?