Internet Explorer 9 Pinned Sites How-To-Guide
Total Page:16
File Type:pdf, Size:1020Kb
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: <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. 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. <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. 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. <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. Seite 4 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. 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. Seite 5 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. 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. Seite 6 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. 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