Internet Explorer 9 Pinned Sites...

© 2011 Microsoft. Alle Rechte vorbehalten. Stand: 22.06.2011 – Alle Angaben ohne Gewähr. Alle hier aufgeführten Beschreibungen und Anleitungen erheben keinen Anspruch auf Vollständigkeit und Korrektheit.

Seite 1 von 14

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

http://msdn.microsoft.com/de-de/ie/dd797411

http://msdn.microsoft.com/de-de/ie/default


Seite 2 von 14

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:

a) Name der Pinned-Site Applikation

b) Tooltip

c) Definition der Startseite

d) Anfangsgröße des Browserfensters

e) Farbe des Vor –und Zurück Buttons

f) Eine zusätzliche Trennleiste, die die Tasklisten-Elemente in zwei Teile unterteilt

g) Tasklisten-Elemente

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

http://msdn.de/library/gg491740.aspx



Seite 3 von 14

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

Weiterführende Informationen entnehmen Sie bitte der MSDN unter




Seite 4 von 14

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


Seite 5 von 14

ext.msSiteModeCreateJumpList("Neuigkeiten");

Nachdem wir der Liste einen Namen gegeben haben, erzeugen wir ein Listenelement:


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");

ANMERKUNG: Es können mehr als 5 Listenelemente erzeugt werden. Die Reihenfolge,

wie Sie die Elemente per Javascript anlegen, ist für die spätere Reihenfolge in dem

Popupfenster entscheidend.

Beispiel:




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.

Abbildung 1: Taskliste

Zum Schluss wird die Liste noch sichtbar gemacht:

ext.msSiteModeShowJumpList();


Seite 6 von 14

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.

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


Seite 7 von 14

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.

Weiterführende Informationen entnehmen Sie auch bitte der MSDN unter




Seite 8 von 14

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="" 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)

Das sieht dann so aus:

<img onclick="window.external.msAddSiteMode();"src="images/Taskliste.png" alt="" /> oder mit einem Link: <a onclick="window.external.msAddSiteMode();" href="#">Klicken Sie hier, um die Seite an das Startmenü anzuheften.</a>

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


Seite 9 von 14

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.


Seite 10 von 14

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



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.


Seite 11 von 14

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={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:

Button um die pinned Site im Startmenü zu integrieren: <a onclick="window.external.msAddSiteMode();" href="#">{Text}</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();

Icon in der Taskleiste einblenden (overlay): window.external.msSiteModeSetIconOverlay("{Iconpfad}", '{Referenzname}');


Seite 12 von 14

Sprungliste löschen: ext.msSiteModeClearJumpList();

Sprungliste erzeugen: ext.msSiteModeCreateJumpList("{Name}");

Sprunglisten-Element erzeugen: ext.msSiteModeAddJumpListItem("{Name}","{URL}","{Iconpfad}");

Sprungliste anzeigen: ext.msSiteModeShowJumpList();


Seite 13 von 14

Zu 8.: Weiterführende Links und Hinweise.

MSDN Pinned Sites Einführung

Angeheftete Sites

Einführung in angeheftete Sites

Verwenden dieser Dokumentation

Anheften einer Website

Erstellen einer einfachen angehefteten Site

Deklarieren von Metadaten für angeheftete Sites

Hinzufügen von Aufgaben zu einer Sprungliste

Anpassen des Sitesymbols

Erkennen einer angehefteten Site

Erstellen von dynamischen Sprunglisten

Erstellen einer benutzerdefinierten Sprunglistenkategorie

Dynamisches Hinzufügen von Elementen zu einer Sprungliste

Erstellen von Miniaturansicht-Symbolleisten

Erstellen einer Miniaturansicht-Symbolleiste für eine angeheftete Site

Reagieren auf Klicks auf die Miniaturansicht-Symbolleiste

Deaktivieren und Ausblenden von Schaltflächen auf einer

Miniaturansicht-Symbolleiste

Wechseln des Schaltflächenzustands auf einer Miniaturansicht-

Symbolleiste

Bereitstellen von Benachrichtigungen

Arbeiten mit benutzerdefinierten Symbolüberlagerungen

http://msdn.microsoft.com/de-de/ie/dd797411

http://msdn.microsoft.com/de-de/library/gg491731(VS.85).aspx






















Seite 14 von 14

Aufblinken der Taskleistenschaltfläche der angehefteten Site

Verbessern der Erkennbarkeit

Auffordern von Benutzern zum Anheften einer Site

Ziehen eines Bilds zum Anheften der Site

Erstellen einer Anpassung für das erste Ausführen

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: http://download.microsoft.com/download/7/8/7/7876BDB8-E185-4DFD-A22A-

EE982CE0EC53/banner.zip

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.







http://go.microsoft.com/fwlink/?LinkId=206680

http://www.favicons.de/

http://de.wikipedia.org/wiki/Favicon

http://msdn.microsoft.com/de-de/library/gg491738(v=VS.85).aspx





http://msdn.microsoft.com/de-de/library/gg491738(VS.85).aspx#the_pinned_site_api_

http://msdn.microsoft.com/de-de/library/gg491738(VS.85).aspx#the_pinned_site_api_

http://social.msdn.microsoft.com/Forums/de-DE/internet_explorerde/threads

http://www.microsoft.com/germany/msdn/beginner/default.aspx

http://www.microsoft.com/germany/msdn/beginner/default.aspx

Internet Explorer 9 Pinned Sites...

Documents

Transcript of Internet Explorer 9 Pinned Sites...