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. Seite 1 von 14 Stand: 22.06.2011 – Alle Angaben ohne Gewähr. Alle hier aufgeführten Beschreibungen und Anleitungen erheben keinen Anspruch auf Vollständigkeit und Korrektheit.
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:
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. Seite 2 von 14 Stand: 22.06.2011 – Alle Angaben ohne Gewähr. Alle hier aufgeführten Beschreibungen und Anleitungen erheben keinen Anspruch auf Vollständigkeit und Korrektheit.
HINWEIS: Breite und Höhe werden als Pixel interpretiert.
ACHTUNG: Vergessen Sie das #-Zeichen nicht.
HINWEIS: Fügen Sie die Zeile genauso wie sie ist, zwischen die Tasklisten-Elemente, zwischen die eine Trenngerade soll.
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. Seite 3 von 14 Stand: 22.06.2011 – Alle Angaben ohne Gewähr. Alle hier aufgeführten Beschreibungen und Anleitungen erheben keinen Anspruch auf Vollständigkeit und Korrektheit.
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.
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