Teilen von Links unter Windows 8 mit IE10

IEBlog Deutsch

Blog des Internet Explorer-Entwicklerteams

Teilen von Links unter Windows 8 mit IE10

  • Comments 0

PC-Benutzer teilen häufig Links zu Webseiten, und unter Windows 8 wird dies dank IE10 optimiert. Der Charm „Teilen“ ist eine neue Funktion von Windows 8, mit der Sie problemlos Inhalte von den Apps auf Ihrem PC aus senden können. Wenn Sie früher einen interessanten Artikel an Freunde senden oder auf Ihrem Blog ein lustiges Bild veröffentlichen wollten, mussten Sie den Link aus der Adressleiste kopieren, zu einer anderen Seite oder App wechseln, und den Link dann einfügen. Mit dem Charm „Teilen“ in Windows 8 können Sie jetzt direkt über den Browser Inhalte teilen, ohne dabei die aktuelle Seite zu verlassen.

Wenn Sie zum Teilen einer Website über den Browser den Charm „Teilen“ verwenden, erstellt IE10 zwei Datenformate mit relevanten Inhalten: den URI sowie HTML mit einer detaillierten Darstellung der Seite. Die folgenden beiden Beispiele zeigen, wie die Daten für ein geteiltes YouTube-Video angezeigt werden:

URI (der aktuellen Website)

http://www.youtube.com/watch?v=4DbgiOCTQts

HTML (mit einer Linkvorschau)

Beispiel der detaillierten Vorschau von Webseiten in IE10
Beispiel der detaillierten Vorschau von Webseiten in IE10

Beide Datenformate werden bei „implizitem“ Teilen erstellt. Der Vorgang heißt „implizit“, wenn Sie die aktuell angezeigte Website teilen möchten. Da Webseiten als Links oder in einer detaillierten HTML-Linkvorschau dargestellt werden können, sind in IE10 beide Datentypen enthalten. Wenn Sie nicht die ganze Seite teilen möchten, sondern nur von Ihnen hervorgehobenen Inhalte, teilt IE10 die HTML-Komponente Ihrer Auswahl anstelle des URI und der Linkvorschau. In diesem Fall wird das Teilen einer Auswahl als „explizites“ Teilen bezeichnet. Der Link ist nicht enthalten. In diesem Beitrag wird beschrieben, wie Links geteilt werden, welche Rolle der Freigabe-Vertrag von Windows 8 zur Verwendung von HTML für IE10 spielt und wie Webentwickler mit wenigen Metatags eine Linkvorschau erstellen können.

Der Charm „Teilen“ und IE10

In diesem Video sehen Sie, wie ein Benutzer Links aus dem Browser mit einer HTML-basierten App teilen kann.


Teilen mit IE10: Linkvorschau in Aktion

In diesem Video ist „Stash“ eine Beispiel-App zur Linkspeicherung, die auf dem Windows-Charm „Teilen“ mit HTML beruht. Die Beispiel-App unterstützt einfach das HTML-Datenformat zum Teilen, und IE stellt die Linkvorschau bereit. Die HTML-Linkvorschau beinhaltet einen Titel, ein Bild und eine Beschreibung für jeden geteilten Link. Dadurch können Sie den Inhalt der Website problemlos erkennen. Wenn Sie die Windows 8 Consumer Preview und Visual Studio 11 Beta installiert haben, können Sie Stash herunterladen und auf Ihrem PC ausführen. Stash ist im Freigabe-Vertrag von Windows 8 als Ziel-App enthalten, wie in folgender Abbildung ersichtlich. In dieser allgemeinen Diagrammübersicht wird das Teilen von Links mit IE10 dargestellt.

Diagramm zum Teilen eines Links mit IE10 an Ziel-Apps mithilfe des Datenpakets aus dem Charm „Teilen“
Diagramm: Teilen eines Links mit IE10 an Ziel-Apps mithilfe des Datenpakets aus dem Charm „Teilen“

Der Charm „Teilen“ von Windows 8 übernimmt die Koordination zwischen Ursprungs- und Ziel-Apps, um den Teilvorgang in allen Apps einheitlich zu gestalten. Die Ursprungs- und Ziel-App müssen somit nicht mehr bewusst miteinander koordiniert werden.

Einfacheres Teilen im Web

Das Web besteht aus HTML-Seiten. Daher ist HTML eines der wichtigsten Datenformate bei der Integration von IE10 in den Freigabe-Vertrag. IE10 erstellt eine Linkvorschau. Dies steigert die Benutzerfreundlichkeit und unterstützt Webentwicklern dabei, den Windows 8-Charm „Teilen“ optimal einzusetzen. Mit ein wenig zusätzlichem Metadaten-Markup lässt sich auf Websites definieren, welche Informationen in der jeweiligen Linkvorschau enthalten sind. Außerdem können mit dem Freigabe-Vertrag Ziel-Apps, die das HTML-Datenformat unterstützen, kontextabhängige Weblinks umfassend nutzen, ohne dass Websites analysiert werden müssen. So erhalten Sie eine funktionell umfangreiche Umgebung, in der das Teilen sowohl auf Urspungs- als auch auf Zielseite unkompliziert und flüssig verläuft.

Screenshot von Ziel-Apps im Bereich „Teilen“
Screenshot von Ziel-Apps im Bereich „Teilen“

Screenshot des Bereichs „Teilen“ von Stash
Screenshot des Bereichs „Teilen“ von Stash

Wenn Sie eine Website teilen, wird diese Website von IE10 zwecks Erstellung einer Linkvorschau analysiert. Im vorherigen Beispiel handelt es sich um einen kleinen Ausschnitt des Inhalts, der eine Filmseite aus der IMDb darstellt. Das Teilen von HTML zusätzlich zum URI bietet den Vorteil einer möglichst genauen Darstellung des Inhalts, den der Benutzer teilen möchte. Daher erstellt IE10 bei allen impliziten Teilvorgängen eine Linkvorschau. Der Vorteil von HTML liegt darin, dass es mehr Informationen als ein URI enthalten kann und der HTML-Inhalt im Gegensatz zum Link wesentlich aussagekräftiger ist. Um es mit den Worten von Leslie Knope auszudrücken: „Niemand möchte solch komplizierten Unsinn teilen.“

Standbild aus der NBC-Serie „Parks and Recreation“. Die Figur Ron Swanson hält ein Schild, das für die Wahl von Knope in den Stadtrat wirbt, bei dessen Text es sich größtenteils um eine lange, komplizierte URL handelt. Die Figur Leslie Knope sagt: „Wie Sie sich denken können, hätten wir nie ein solches Schild mit all diesem komplizierten Unsinn bestellt, da wir ja nicht verrückt sind.“
Aus NBCs Parks and Recreation, Season 4, Episode 16

Wie Sie sich denken können, hätten wir nie ein solches Schild mit all diesem komplizierten Unsinn bestellt, da wir ja nicht verrückt sind.

Jedoch sind, je nach Ziel-App, umfangreiche Inhalte nicht die optimalen Daten. Ein URI ist unter Umständen besser geeignet. Beispielsweise sind umfassende HTML-Inhalte für Blog-Apps gut geeignet, für SMS-Apps ist es dagegen der URI. Entwickler von Apps im Metro-Stil können das geeignetste Datenformat bzw. die geeignetsten Datenformate für ihre Apps auswählen, indem sie die Richtlinien für das Teilen in Windows 8 befolgen.

Markup auf Websites zum Festlegen der von IE10 geteilten Inhalte

Da IE10 vorhandenes Markup verwendet, das zum Teilen im Web gedacht ist, werden viele Websites bereits optimal in der HTML-Linkvorschau von Windows 8 angezeigt. Wir unterstützen das OpenGraph-Protokoll, mit dem sich einfach Metadaten über die Seite hinzufügen lassen. Beim Teilen von Websites auf Facebook und über Windows 8 mit IE10 können Sie OpenGraph verwenden, um festzulegen, wie die Webseite anderen Benutzern angezeigt wird.

Hier finden Sie ein Beispiel für eine IE Test Drive-Demo, in dem dieses Markup eingesetzt wird:

<head>

<meta name="description" content="Brick Breaker TestDrive Demo Game, Performance and Touch benchmark" />

<title>Brick Breaker</title>

<meta property="og:image" content="Views/Homepage/Icons/BrickBreaker.png" />

</head>

IE sucht die folgenden Tags im Markup der Website, um die Linkvorschau für die Seite zu erstellen.

EigenschaftHTML-TagZeichenbeschränkung
Titel 1 <meta name="title" content="Website-Titel hier einfügen" /> 160
Titel 2 <title>Website-Titel hier einfügen</title> 160
Beschreibung <meta name="description" content="Website-Beschreibung hier einfügen" /> 253
Bild 1 <meta property="og:image" content="Bildlink_hier_einfügen" /> 2.048 (Beschränkung für Bild-URI)
Bild 2 <link rel="image_src" href="Bildlink_hier_einfügen" /> 2.048 (Beschränkung für Bild-URI)
Bild 3 <meta name="image" content="Bildlink_hier_einfügen" /> 2.048 (Beschränkung für Bild-URI)
Bild 4 <meta name="thumbnail" content="Bildlink_hier_einfügen" /> 2.048 (Beschränkung für Bild-URI)

Beachten Sie, dass es sich hierbei um die Reihenfolge handelt, nach der die Metadaten hinsichtlich der einzelnen Attribute analysiert werden. Beispielsweise wird das Bild 1-Tag verwendet, wenn sowohl Tags für Bild 1 als auch Bild 2 vorhanden sind. Zusätzlich wird die erste Instanz eines Tags im Markup verwendet, wenn mehrere Tags desselben Typs vorhanden sind.

Bezüglich der Zeichenbeschränkungen wird von IE am Ende der Vorschau „…“ eingefügt, wenn die Beschreibung die maximale Länge überschreitet.

Verwenden Sie im Website-Markup mindestens eine Instanz jeder Eigenschaft, um sicherzustellen, das die Seiten beim Teilen in Windows 8 optimal angezeigt werden. Weitere Informationen zur Funktionsweise des Markups finden Sie in dieser Demo auf der IE Test Drive-Website.

Vorteile für Apps durch einen leistungsfähigen Webbrowser

Wenn Ihre App den Zielfreigabe-Vertrag unterstützt, sollten Sie prüfen, ob es sinnvoll ist, dass die App HTML als Datenformat beim Teilen unterstützt. Apps, die HTML verwenden, können von der von IE10 geteilten Linkvorschau profitieren, da IE10 die gesamte Verarbeitung übernimmt. IE10 analysiert die Website und erstellt eine kurze, informative Linkvorschau. Lediglich das HTML muss von der App angezeigt und gehostet werden. Der Link wird in die Vorschau eingebettet. Diese fungiert also als URI, sieht jedoch viel besser aus. So können Apps, die nicht über ausreichende Ressourcen verfügen, um Websites zu analysieren und eine kleine, informative Vorschau zu erstellen, kontextabhängige Links dennoch als HTML anzeigen.

Neben IE10 teilen noch zahlreiche weitere Apps HTML. Ziel-Apps, die HTML akzeptieren, müssen die Quelle der geteilten Daten nicht kennen. Wie bereits erwähnt, wird HTML von IE10 sowohl in impliziten aus auch expliziten Fällen geteilt. Daher kann es sich bei dem HTML sowohl um eine Linkvorschau als auch um eine Benutzerauswahl handeln. In beiden Fällen handelt es sich beim HTML um eine möglichst genaue Darstellung des Inhalts, den der Benutzer teilen möchte. Der folgende Codeausschnitt stellt das von IE10 generierte Linkvorschau-HTML dar, wenn dieses zum Datenpaket des Charms „Teilen“ hinzugefügt wird:

<html>

<body>

<!--StartFragment-->

<style>

/* IE10\uc1\u8217?s metro-style CSS attributes */

</style>

<a class="snippet-URL" href="http://site_link_goes_here">Website Title goes here</a>

<table>

<tr>

<td class="snippet-image">

<img src="image_link_goes_here" />

</td>

<td class="snippet-text">Website description goes here </td>

</tr>

</table>

<!--EndFragment-->

</body>

</html>

Ein Beispiel für eine App, die HTML von IE10 verwendet, erhalten Sie, indem Sie die im vorherigen Video vorgestellte Beispiel-App „Stash“ herunterladen. Diese App zeigt, wie eine App im Metro-Stil beim Teilen HTML-Daten als Ziel verwenden kann.

Hier sehen Sie einen Codeausschnitt aus der App, der zeigt, wie Stash HTML verwendet, das über den Charm „Teilen“ gesendet wurde.

function activatedHandler(eventArgs) {

// In this sample we only do something if it was activated with the Share contract

if (eventArgs.detail.kind

=== Windows.ApplicationModel.Activation.ActivationKind.shareTarget) {

// We receive the ShareOperation object as part of the eventArgs

var shareOperation = eventArgs.detail.shareOperation;

if (shareOperation.data.contains(

Windows.ApplicationModel.DataTransfer.StandardDataFormats.html)) {

shareOperation.data.getHtmlFormatAsync().then(

function (htmlFormat) {

// Extract the HTML fragment from the HTML format

var htmlFragment = Windows.ApplicationModel.DataTransfer

.HtmlFormatHelper.getStaticFragment(htmlFormat);

// Display the HTML in the Share pane.

id("htmlArea").innerHTML = htmlFragment;

});

}

}

}

Durch den vorherigen Code kann Stash HTML akzeptieren, wenn dieses vom Benutzer beim Teilen als Ziel ausgewählt wird. Weitere Informationen zur Entwicklung einer App als Ziel zum Teilen unter Windows 8 finden Sie auf der MSDN-Schnellstartseite für den Empfang von geteilten Inhalten.

Viel Spaß beim Teilen!

– Alex Feldman, Program Manager, Internet Explorer