Internet Explorer 9
Pinned Sites How-To-Guide

Was sind den eigentlich Pinned Sites?

Pinned Sites sind eine Funktion des Internet Explorers ab Version 9 im Zusammenspiel mit Windows 7. Damit lassen sich Websites ganz einfach wie eine Windows-Applikation in die Taskleiste oder das Startmenü einbinden. Dies ist schon von anderen Programmen bekannt, die an die Taskleiste angeheftet werden können. Durch das Anheften der Website an die Taskleiste ist es möglich, die Navigation zu Favoriten zu beschleunigen und zu vereinfachen. Ändern sich die Neuigkeiten, werden Sie visuell darauf aufmerksam gemacht. Das beste daran ist, dass die Realisierung einer Pinned Site für den Besitzer einer Webseite sehr einfach ist. Es bedarf nur an ein paar wenigen Schritten um die Funktionalität einer Pinned Site zu erhalten.

Was muss gemacht werden, um die Pinned Site Funktionen in meine Seite zu integrieren?

  1. Erstellen Sie Favoriten-Icons (Favicon.ico) und definieren Sie weitere Icons.
  2. Favicon in Ihre Seite einbinden.
  3. Meta-Elemente im Head der Seite anlegen.
  4. Taskliste generieren (mit Hilfe von meta-Elementen, siehe Punkt 3).
  5. Dynamische Liste erstellen.
  6. Erscheinungsbild aufbessern.
  7. Wichtige Befehle Im Überblick
  8. Weiterführende Links und Hinweise.
  9. Schlussbemerkung

Zu 1.: Erstellen Sie Favoriten-Icons (Favicon.ico) und definieren Sie weitere Icons.

Am Anfang sollten Sie ein Favicon und wenn Sie möchten noch andere Icons, die Sie für angemessen halten, in ein Verzeichnis kopieren, das von Ihrem Webserver erreicht werden kann. Das Favicon ist das Icon, dass in der Taskleiste, links in der Adressleiste des Browsers und links in der Registerkarte erscheint. Ausserdem wird das Favicon dazu verwendet, den Vor –und Zurück Button im Browser (zur Navigation) visuell hervorzuheben, falls Sie dieses nicht mit Hilfe von meta-Elementen definieren.

Weitere Informationen entnehmen Sie bitte der MSDN unter http://msdn.de/library/gg491740.aspx.

Zu 2.: Favicon in Ihre Seite einbinden.

Dies können Sie leicht bewerkstelligen, indem sie in den Head Ihrer Webseite folgende Zeile einfügen:

<link href="{Iconpfad}" rel="Shortcut Icon" type="image/x-icon"/>

Weitere Informationen entnehmen Sie bitte der MSDN unter http://msdn.de/library/gg491740.aspx.

Zu 3.: Meta-Elemente im Head der Seite anlegen.

Erstellen Sie mit Hilfe von meta-Elementen im Head Ihres Browsers folgende Definitionen:

  1. Name der Pinned-Site Applikation
  2. Tooltip
  3. Definition der Startseite
  4. Anfangsgröße des Browserfensters
  5. Farbe des Vor –und Zurück Buttons
  6. Eine zusätzliche Trennleiste, die die Tasklisten-Elemente in zwei Teile unterteilt
  7. Tasklisten-Elemente

Hier die Zeilen, die eingefügt werden müssen:

<meta content="{NAME DER APPLIKATION}" name="application-name" /> 
<meta content="{NAME DES TOOLTIPS}" name="msapplication-tooltip" /> 
<meta content="{URL DER STARTSEITE}" name="msapplication-starturl" /> 
<meta content="width={BREITE};height={HÖHE}" name="msapplication-window" />

HINWEIS: Breite und Höhe werden als Pixel interpretiert.

<meta content="#{HEXADEZIMALWERT DER FARBE}" name="msapplication-navbutton-color" />

ACHTUNG: Vergessen Sie das #-Zeichen nicht.

<meta content="[unique value]" name="msapplication-task-separator" />

HINWEIS: Fügen Sie die Zeile genauso wie sie ist, zwischen die Tasklisten-Elemente, zwischen die eine Trenngerade soll.

<meta content="name={TASK-ELEMENT NAME};action-uri={URL DER SEITE};icon-uri={PFAD DES ICONS}" name="msapplication-task" />

ACHTUNG: Das Icon muss die Endung .ico haben.

HINWEIS: Die obere meta-Element Definition können Sie öfters einfügen, jedoch maximal fünf Mal.

Weitere Informationen entnehmen Sie bitte der MSDN unter http://msdn.de/library/gg491732.aspx.

Zu 4.: Taskliste generieren (mit Hilfe von meta-Elementen, siehe Punkt 3).

Dazu müssen Sie nur mehrere (maximal 5) Tasklisten-Elemente generieren (siehe Punkt 3)

Zu 5.: Dynamische Liste erstellen.

Um die Sprungliste manuell zu generieren schauen Sie sich bitte folgendes Code-Snippet an, aber keine Sorge, es ist nicht schwer.

<script type="text/javascript"> 
try { 
	if (window.external.msIsSiteMode()) { 
		ext = window.external; 
		ext.msSiteModeClearJumpList(); 
		ext.msSiteModeCreateJumpList("Sprunglist-Name"); 
		ext.msSiteModeAddJumpListItem("List-Element 3", "Url 3", "Icon-Pfad 3"); 
		ext.msSiteModeAddJumpListItem("List-Element 2", "Url 2", "Icon-Pfad 2"); 
		ext.msSiteModeAddJumpListItem("List-Element 1", "Url 1", "Icon-Pfad 1"); 
		ext.msSiteModeShowJumpList(); 
	} 
} catch (exception) { } 
</script>

Was passiert hier? Mit Hilfe dieses Codes kann eine dynamische Liste erzeugt werden. Schauen wir uns einmal die einzelnen Zeilen an:

Am Anfang definieren wir mit <script type="text/javascript"> ein Javascript. Die Methode ext.msSiteModeClearJumpList(); entfernt die alte Sprungliste, falls schon eine definiert worden ist.

Die Methode 

window.external.msIsSiteMode()
prüft, ob die Webseite schon angeheftet wurde und somit als Windows-Applikation läuft, oder ob sie noch nicht angeheftet worden ist.Wenn Sie bereits angeheftet wurde, wird mit der Zeile ext = window.external; ein Pinned-Site Objekt erzeut, dass später verwendet wird, um einzelne Elmente der Sprungliste zu erzeugen und um der Liste einen Namen zu geben.Den Namen der Liste erzeugen wir mit folgender Zeile:ext.msSiteModeCreateJumpList("Sprunglist-Name");wobei “Sprunglist-Name” der Name der Liste ist. Hier können Sie zum Beispiel “Neuigkeiten” als Namen verwenden. Das sieht dann wie folgt aus: 
ext.msSiteModeCreateJumpList("Neuigkeiten");
Nachdem wir der Liste einen Namen gegeben haben, erzeugen wir ein Listenelement:
ext.msSiteModeAddJumpListItem("List-Element 1", "Url 1", "Icon-Pfad 1");

List-Element 1 -> der Name des Listenelements

Url 1 -> die verlinkte Website

Icon-Pfad 1 -> ein Verzeichnispfad für den Fall, dass Sie ein Icon links neben dem Namen haben wollen. Sollten Sie kein Icon haben wollen, empfiehlt es sich die Anführungszeichen leer zu lassen: “ ”

Beispiel:

ext.msSiteModeAddJumpListItem("Informationen", "http://www.beispiel/infos.de", "./icons/info.ico");

HINWEIS: Es können mehr als 5 Listenelemente erzeugt werden. Die Reihenfolge, per Javascript anlegen ist für die spätere Reihenfolge in dem Popupfenster entscheidend.

Beispiel:

ext.msSiteModeAddJumpListItem("List-Element 3", "Url 3", "Icon-Pfad 3");
ext.msSiteModeAddJumpListItem("List-Element 2", "Url 2", "Icon-Pfad 2");
ext.msSiteModeAddJumpListItem("List-Element 1", "Url 1", "Icon-Pfad 1");

Hier wurden die Sprunglist-Elemente in absteigender Reihenfolge erzeugt. Das erste Element (List-Element 3) wird so wie in Abbildung 1 zu sehen, als letztes in die Sprungliste eingefügt.

Taskliste mit Listen-Elementen

Abbildung 1: Taskliste

Zum Schluss wird die Liste noch sichtbar gemacht:

ext.msSiteModeShowJumpList();

Wenn sich in der Sprungliste etwas ändern sollte, können Sie mit folgender Methode ein zusätzliches Icon auf das Icon der Pinned Site in der Taskliste legen.

window.external.msSiteModeSetIconOverlay("{PFAD DES ICONS}", "{BESCHREIBUNG}");

Beispiel:

window.external.msSiteModeSetIconOverlay("icons/Exclamation.ico", 'overlayIcon');

So einfach ist die Implementierung einer dynamischen Liste in Javascript.

Popupfenster mit Taskliste und Sprungliste

Abbildung 2: Komplettes Popupfenster mit Taskliste und Sprungliste

Wenn Sie die die ersten fünf Schritte absolviert haben, dann erhalten Sie das oben dargestellte Popupfenster. Um noch weitere Funktionen einzubauen, lesen Sie bitte weiter.

Sie müssen hier allerdings bedenken, dass Sie jetzt zwar eine dynamische Liste erzeugt haben, diese sich aber im Laufe der Zeit nicht ändern wird. Dazu müssen Sie mit Hilfe von JavaScript die Funktionalität Ihrer Webseite erhöhen. Dazu können Sie zum Beispiel einen RSS Feed dahin überprüfen, ob sich Einträge geändert haben oder nicht. Falls ja, dann kann ein zusätzliches Icon in der Taskleiste angezeigt werden, dass den Benutzer der Webseite auf die Änderung aufmerksam macht. Die Methode um ein Icon zusätzlich in über das Favicon Ihrer Pinned Site zu legen ist: 

window.external.msSiteModeSetIconOverlay("{Iconpfad}", "{Referenzname}");
Um ein Icon zu entfernen, benützen Sie folgende Methode: 
window.external.msSiteModeClearIconOverlay();

Ein zusätzlicher Hinweis zu Sprunglisten-Elemente:

Diese können innerhalb des Popupfensters angeheftet werden. Dazu müssen sie nur auf das Pin-Symbol klicken, dass erscheint, wenn Sie mit der Maus auf ein Sprunglisten-Element gehen.

Link pinnenPinned Links

Weitere Informationen entnehmen Sie bitte der MSDN unter http://msdn.de/library/gg491743.aspx.

Zu 6.: Erscheinungsbild aufbessern

Sie können mit Hilfe eines Banners, Benutzer dazu auffordern Ihre Seite zu einer Pinned-Site zu machen. Wenn Sie den Banner mit der linken Maustaste anklicken und dann in die Taskleiste ziehen, wird die Seite angeheftet. Dazu eignen sich auch andere Bildformate, wie zum Beispiel PNG nutzen oder sogar reinen Text.Sie müssen lediglich dem IMAGE-Element die msPinSite-Klasse zuweisen.

Beispiel:

<img class="msPinSite" alt="Zieh mich auf die Taskleiste" src="images/pinsite_120x240.gif"/>

Sie können ebenfalls die Benutzer Ihrer Seite dazu auffordern, die Seite an das Startmenü anzuheften. Das geht ganz einfach indem Sie einem Bild, einem Button oder einem Link folgende Methode zur Ausführung definieren:

onclick="window.external.msAddSiteMode(); (einmal klicken)

oder

ondblclick="window.external.msAddSiteMode(); (Doppelklick)

Mit einem Bild sieht es dann so aus:

<img onclick="window.external.msAddSiteMode();" src="images/Taskliste.png" alt="An das Startmenü heften" />

oder mit einem Link:

<a onclick="window.external.msAddSiteMode();" href="#">Seite an das Startmenü anheften.</a>

Sobald der Benutzer auf das Bild oder den Link klickt, erscheint folgendes Fenster:

Dialog: Seite ans Startmenü anheften

Abbildung 3: Erscheint, wenn der Benutzer die Pinned Site an das Startmenü heften will

Hier kann der Benutzer entweder die Seite an das Startmenü anheften oder den Vorgang abbrechen.

Eine weitere nützliche Funktion, die Sie mit Hilfe von Javascript in Ihre Website einbauen können, ist:

if(window.external.msIsSiteMode()) { this.location.href = "http://msdn.microsoft.com/de-DE/ie/dd797411.aspx"; }

Die erste Zeile kenne wir schon. Die Methode window.external.msIsSiteMode() prüft, ob die Seite schon an die Startleiste angeheftet wurde. Durch die Zeile 

this.location.href = "http://msdn.microsoft.com/de-DE/ie/dd797411.aspx";
wird beim ersten Anheften eine andere Website dargestellt.

Mögliche Fehlerquellen:

Wenn Änderungen an der Taskliste nicht angezeigt werden, müssen Sie zuerst die alte Version der Pinned Site von der Taskleiste lösen. Danach rufen Sie die Website auf und heften sie erneut an.

Sollten Sie im Laufe der Zeit das Favicon Ihrer Website ändern und stellen fest, dass immer noch das alte Favicon im Browser erscheint, drücken Sie einfach Str + F5 um die Seite erneut vom Server zu laden. Sollte diese Methode nicht funktionieren, versuchen Sie das Problem zu lösen, indem Sie den Cache Ihres Browser leeren.

Wird ihre Sprungliste in der falschen Reihenfolge angezeigt, dann liegt es daran, dass Sie die Sprunglist-Items von unten nach oben anordnen müssen. Sie müssen also mit dem letzten Sprunglist-Element anfangen.

ext.msSiteModeAddJumpListItem("List-Element 3", "Url 3", "Icon-Pfad 3"); //ELEMENT 3 
ext.msSiteModeAddJumpListItem("List-Element 2", "Url 2", "Icon-Pfad 2");//ELEMENT 2 
ext.msSiteModeAddJumpListItem("List-Element 1", "Url 1", "Icon-Pfad 1");//ELEMENT 1

Wenn die Sprungliste nicht angzeigt wird, dann kann es eventuell daran liegen, dass die Methode ext.msSiteModeShowJumpList(); nicht definiert worden ist, nachdem die Liste und deren Elemente erzeugt wurden.

Zu 7.: Wichtige Befehle Im Überblick:

META-Elemente in den Head Ihrer Website:

Favicon Einbinden:
<link href="{Pfad des Icons}" rel="Shortcut Icon" type="image/x-icon"/>
Applikations-Name:
<meta content="{Name}" name="application-name" />
Tooltip:
<meta content="{Tooltip}" name="msapplication-tooltip" />
StartUrl:
<meta content="{URL der Startseite}" name="msapplication-starturl" />
Anfangsgröße des Fensters:
<meta content="width={Wert};height={Wert}" name="msapplication-window" />
Tasklist-Element:
<meta content="name={Name};action-uri={Url};icon-uri={Icon Pfad}" name="msapplication-task" />
Tasklist Trennlinie:
<meta content="[unique value]" name="msapplication-task-separator" />
Farbe des Vor –und Zurück Buttons:
<meta content="#{Hexadezimalwert}" name="msapplication-navbutton-color" />

HTML-Elemente in den Body Ihrer Website:

Link um die pinned Site im Startmenü zu integrieren:
<a onclick="window.external.msAddSiteMode();" href="#">{Text-Tooltip}</a>

Javascript zwischen ein SCRIPT-Element in den Body oder Head Ihrer Website:

Prüfen ob die Site angeheftet ist:
window.external.msIsSiteMode()
IconOverlay löschen:
window.external.msSiteModeClearIconOverlay();
Sprungliste löschen:
ext.msSiteModeClearJumpList();
Sprungliste erzeugen:
ext.msSiteModeCreateJumpList("{Name}");
Sprunglisten-Element erzeugen:
ext.msSiteModeAddJumpListItem("{Name}","{URL}","{Iconpfad}");
Sprungliste anzeigen:
ext.msSiteModeShowJumpList();
Icon in der Taskleiste einblenden (overlay):
window.external.msSiteModeSetIconOverlay("{Iconpfad}", "{Icon-Tooltip}");

Zu 8.: Weiterführende Links und Hinweise.

Favicon und generell Icons:

Favoriten Icons und generell Icons sind sehr wichtig für die Usability Ihrer Webseite und das Nutzerverhalten. Falls Sie auf Ihrer Webseite noch kein Favoriten-Icons nutzen, empfehlen wir ihnen folgende weiterführende Artikel: http://msdn.de/library/gg491740.aspx, X-Icon Editor, www.favicons.de sowie http://de.wikipedia.org/wiki/Favicon

Banner:

Um die Pinned Sites-Funktionalität zu bewerben, empfehlen wir Ihnen die Nutzung eines Banners. Gerne verwenden Sie hierzu ein kostenfrei erhältlichen Banner von Microsoft: Microsoft Banner

Schlussbemerkung:

Angeheftete Seiten (Pinned Sites) bieten Ihnen verschieden Funktionalitäten - Favicons, Benachrichtigungen, Sprunglisten und Thumbnail Toolbars. Mit wenigen Zeilen HTML oder JavaScript können Sie diese Features nutzen, um Ihre Webseite interessanter zu machen und diese aus dem Browser heraus in Ihre Startleiste zu holen. Für Rückfragen nutzen Sie bitte das MSDN Internet Explorer Forum.

Computer und Software sind aus unserem täglichen Leben nicht mehr wegzudenken. Falls Sie gerade mit der Webentwicklung anfangen oder generell mit der Software-Entwicklung, dann haben Sie sich ja vielleicht schon einmal gefragt, wie ein Programm erstellt wird, wie es aufgebaut ist, oder ob sie vielleicht sogar selbst lernen könnten, Software zu programmieren. Egal was Ihre Beweggründe sein mögen: die Coding Class des Microsoft Developer Networks (MSDN) möchte Sie bei den ersten Schritten in die aufregende Welt des Programmierens unterstützen.