Windows 7 Desktop Integration mit Internet Explorer 9: Anheften von Webseiten

Update am 28.02.2011: Ergänzung der Feature-Erkennung und Verlinkung weiterer Blogpostings sowie Neuformatieren der Codebeispiele mit Zeilennummern und –umbruch zwecks besserer Lesbarkeit.

Internet Explorer 9 unterstützt die nahtlose Integration von Webseiten auf Computern unter Windows 7 durch das Anheften an der Taskleiste, auf den Desktop oder in das Startmenü. Untersuchungen von Microsoft haben ergeben, dass Anwender angeheftete Webseiten zwischen 15% und 50% häufiger besuchen.

Diese nahtlose Integration von Webseiten in Windows 7 stellt eine Reihe von neuen Funktionen zur Verfügung, die ich in einer losen Artikelreihe anhand einer Beispielwebseite erklären möchte.

Anheften von Webseiten

Die Windows 7 Desktop Integration funktioniert bisher nur mit Internet Explorer 9. Das Mozilla-Team plant zur Zeit ähnliche Funktionen in der übernächsten Firefox-Version 5. Webseitenbetreiber sollten daher nicht mit Hilfe einer Browserweiche, sondern über Feature-Erkennung herausfinden, ob der Besucher einen Webbrowser nutzt, der die neuen Funktionen unterstützt.

Das folgende Beispiel zeigt eine mögliche Abfrage, welche true zurückliefert, wenn das Feature im aktuell genutzten Browser unterstützt wird:

    1:  if (window.external.msIsSiteMode) {

    2:      // Check if the website was launched from a pinned site.

    3:      if (window.external.msIsSiteMode())

    4:      {

    5:          // TRUE

    6:      }

    7:      else

    8:      {

    9:          // FALSE

   10:      }

   11:  } 

Möchte man Besucher einer Webseite dazu bewegen, mit Internet Explorer 9 die Webseite in Windows 7 zu integrieren, kann man mittels JavaScript über die Methode window.external.msIsSiteMode() ermitteln, ob die Webseite schon angeheftet wurde. In diesem Fall liefert die Methode true zurück. Diese Schnittstelle kann über jedes HTML-Element angesprochen werden, wie folgendes Codebeispiel zeigt:

    1:  <a onclick="window.external.msAddSiteMode();" href="#">Anheften</a><br />

Sollte diese Abfrage jedoch false zurückliefern, kann man die Besucher darauf aufmerksam machen, dass sie die Webseite in Windows 7 direkt integrieren können.

Um eine Webseite an die Taskleiste anzuheften, muss der Besucher nur eine Registerkarte aus dem Internet Explorer 9 per Drag und Drop auf die Taskleiste ziehen und dort fallen lassen. Alternativ kann man auch das Icon der Webseite aus der Adressleiste oder aus der Übersicht nach dem Öffnen einer neuen Reiterkarte zum Anheften nehmen.

Neue Funktionen

Nach dem Anheften können Anwender neue Funktionen nutzen, wenn der Entwickler die Webseite um die entsprechenden Funktionen erweitert hat:

• Statische Liste von Elementen für schnelle Navigation zu oft genutzten Teilen der Webseite.
• Dynamische Liste von Elementen für personalisierte Aufgaben (zum Beispiel aktuellste News).
• Erzeugen von Aufmerksamkeit durch sanftes Blinken oder Überlagern der Webseite durch ein neues Icon (zum Beispiel zum Anzeigen der Anzahl ungelesener Emails in einem Webmailclient).
• Hinzufügen von Steuerungsfunktionen in die Vorschau des Programms über der Taskleiste.
• Anpassen des Look & Feel des Webbrowsers durch farbliche Anpassung des Zurück- und Vorwärtsbuttons.
• Hervorheben der Webseite durch ein Icon in hoher Auflösung außerhalb des Webbrowsers.

High-Res Icon

Durch die Integration in die Taskleiste wird die Webseite wie ein Programm angezeigt und kann über diese Verknüpfung direkt gestartet werden. Als Icon wird das Favicon der Webseite genutzt. Sebastian Kuhbach von Winfuture.de hat mir freundlicherweise erlaubt, seine Webseite als Beispiel zu nehmen. So sieht das klassische Favicon von Winfuture in der Adressleiste und auf der Registerkarte aus:

Wenn man aber die Webseite an die Taskleiste anheften möchte, benötigt Windows 7 ein Icon mit einer höheren Auflösung. Die Taskleiste ist um einiges größer als das klassische Favicon. Internet Explorer 9 nutzt Icons mit folgenden Auflösungen:

• Adressleiste (16x16)
• Neue Registerkarte (32x32)
• Taskleiste (32x32)
• Browser UI einer angehefteten Webseite (24x24)

Angeheftete Webseiten nutzen darüberhinaus:

• Aufgaben in Sprunglisten (16x16)
• Vorschaubilder von Toolbar-Buttons (16x16)
• Überlagernde Icons (16x16)

Ein Favicon kann mehrere Bilder in unterschiedlicher Auflösung beherbergen. Für die beste Darstellung mit Internet Explorer 9 empfehlen wir folgende Auflösungen:

• Empfehlung: 16x16, 32x32, 48x48
• Optimal: 16x16, 24x24, 32x32, 64x64

Wenn eine Webseite kein Icon in geeigneter Auflösung zur Verfügung stellt, wird das vorhandene nicht einfach hochskaliert. Dabei auftretende unschöne Pixelartefakte aufgrund der geringen Quellgröße würden das Gesamtbild deutlich trüben. Daher wird das bestehende Icon in Originalgröße eingebunden und mit einem weißen Rahmen umgeben.

Um ein hochaufgelöstes Favicon zu erzeugen, nehme ich das Logo von Winfuture, entferne den Textanteil und zentriere den Grafikteil, so dass das Bild quadratisch mit der Auflösung von 1920x1920 Pixel vorliegt. Dann importiere ich das Bild in X-Icon Editor und wähle die gewünschten Zielauflösungen aus:

Ein Blick auf die Vorschau zeigt, wie das neue Icon an den verschiedenen Stellen in Internet Explorer 9 und Windows 7 dargestellt wird:

Wenn man zufrieden mit dem Ergebnis ist, exportiert man die fertige Datei ins ICO-Format und speichert sie auf der eigenen Webseite. Meistens platziert man das Favicon im Wurzelverzeichnis der Webseite und bindet es über ein Link-Element in der <head>-Bereich der Webseite als neues Favicon ein:

    1:  <link rel="shortcut icon" href="/favicon.ico" />

Zu beachten ist dass das Favicon bei jedem Webseitenzugriff geladen wird. Bei populären Webseiten kann bei der Verwendung eines High-Res Icon durchaus der Traffic um Gigabytes zunehmen. Daher ist es ratsam, im Webserver das clientseitige Caching des Favicons über den HTTP-Header einzuschalten. Internet Explorer 9 beachtet hier die Elemente "max-age" und "expires date". Zusätzlich kann für die Datei die GZIP-Komprimierung aktivieren, so dass die Dateigröße während der Auslieferung um ungefähr die Hälfte verringert werden kann.

Weitere Informationen rund um Favicons stellt Microsoft im Microsoft Developer Network zur Verfügung:

• How to Add a Shortcut Icon to a Web Page
• Customizing the Site Icon

Metadaten

Neben dem Favicon können für das Anheften von Webseiten spezielle Metadaten im <head>-Bereich der Webseite übergeben werden, die die Darstellung der angehefteten Webseite beeinflussen. Diese Daten spielen während der Installation und zur Laufzeit eine Rolle.

application-name

"application-name" definiert den Namen der Anwendungsinstanz der angehefteten Seite. Der Begriff erscheint, sobald man über das Icon der angehefteten Seite auf der Taskleiste mit der Maus fährt sowie als Fenstertitel der Anwendungsinstanz der angehefteten Seite.

    1:  <meta name="application-name" content="WinFuture.de" />

Wenn das Element nicht vorhanden ist, wird der Name des Dokuments an dieser Stelle verwendet.

msapplication-tooltip

"msapplication-tooltip" blendet einen zusätzlichen Hilfetext ein, wenn man mit der Maus über das Icon der angehefteten Seite im Startmenü oder auf dem Desktop fährt.

    1:  <meta name="msapplication-tooltip" content="WinFuture.de" />

msapplication-starturl

"msapplication-starturl" enthält die URL der Webanwendung. Die Startadresse kann der vollqualifizierte oder ein ein relativer Bezeichner der aktuellen Webseite sein. Es sind sowohl HTTP, als auch HTTPS als Protokoll erlaubt. Sollte die URL eine Umleitung auf eine andere Webseite sein, muss die Webseite komplett mit führendem "https://" und abschließendem "/" angegeben werden:

    1:  <meta name="msapplication-starturl" content="./" />

Wenn dieses Element nicht vorhanden ist, wird die URL der aktuellen Webseite verwendet.

msapplication-window

"msapplication-window" legt die Startgröße der angehefteten Webseite fest, wenn sie vom Anwender zum ersten Mal aufgerufen wird. Sobald der Anwender jedoch das Fenster in der Größe verändert, gelten zukünftig die neuen Größen.

    1:  <meta name="msapplication-window" content="width=800;height=600" />

Die minimale Größe für "width" sind 800 und für "height" 600 Pixel. Größere Werte sind natürlich auch möglich.

msapplication-navbutton-color

Über "msapplication-navbutton-color" kann man die Farbe des Vorwärts- und Zurückbuttons beeinflussen. Die Farbe kann als Name oder Hexwert angegeben werden.

    1:  <meta name="msapplication-navbutton-color" content="#016AB0" />

Wenn dieses Element nicht vorhanden ist, wird die Farbe von der Palette des Favicons abgeleitet.

Startmenü

Webseiten lassen sich über die Methode window.external.msAddSiteMode() neben der Taskleiste auch in das Startmenü integrieren:

    1:  <a onclick="window.external.msAddSiteMode();" href="#">Startmenü</a><br />

Danach blendet Windows 7 eine Sicherheitsabfrage ein, die der Anwender bestätigen muss, bevor die Webseite dem Startmenü hinzugefügt wird:

Wenn der Webentwickler diese Funktion auf der Webseite nicht integriert hat, kann jeder Anwender auch über die GUI den Vorgang selbst durchführen. Dazu muss er nur den Extras-Button (Tastaturkürzel ALT+X) anklicken und unter "Datei" die Option "Webseite dem Startmenü hinzufügen" auswählen:

Zusammenfassung

Diese ersten Anpassungen und das Favicon schicke ich als nächstes Sebastian per Mail zu:

    1:  <meta name="msapplication-starturl" content="https://www.winfuture.de/" />

    2:  <meta name="msapplication-navbutton-color" content="#016AB0" />

    3:  <meta name="msapplication-tooltip" content="WinFuture" />

Weitere Informationen zur Windows 7 Desktop Integration mit Internet Explorer 9 habe ich in folgenden Beiträgen zusammengestellt:

1. Anheften von Webseiten
2. Sprunglisten
3. Benachrichtigungen und Steuerfunktionen

Have fun!

Daniel

Comments

• Anonymous
  February 20, 2011
  Sehr schön :P

• Anonymous
  February 22, 2011
  Wie Funktioniert es wenn man, am anderren Ende sitzt? Sprich wenn man als Nutzer selbst eine solche Verknüpfung anlegen will? Die .website dateien scheinen nach anderrem schema zu funktionieren... TIA