View
2
Download
0
Category
Preview:
Citation preview
© 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
© 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 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:
© 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 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
http://msdn.de/library/gg491732.aspx
© 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 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.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:
© 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 5 von 14
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");
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:
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.
Abbildung 1: Taskliste
Zum Schluss wird die Liste noch sichtbar gemacht:
ext.msSiteModeShowJumpList();
© 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 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
© 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 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
http://msdn.de/library/gg491743.aspx
© 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 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:
© 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 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.
© 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 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
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.
© 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 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}');
© 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 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();
© 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 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
© 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 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.
Recommended