Untersuchungen von Microsoft haben ergeben, dass Anwender angeheftete Webseiten zwischen 15 und 50 Prozent häufiger besuchen. Diese nahtlose Integration von Webseiten in Windows 7 stellt eine Reihe von neuen Funktionen zur Verfügung, die hier beispielhaft erklärt werden.
Foto: Microsoft TechNet
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:
<a onclick="window.external.msAddSiteMode();" href="#">Anheften</a><
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.
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über hinaus:
-
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.
Es empfiehlt sich daher durchaus ein hochauflösendes Favicon anzulegen. Dieses speichert man im ICO-Format 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:
<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 GBytes 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:
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.
<meta name="application-name" content="TecChannel.de" />
Wenn das Element nicht vorhanden ist, wird der Name des Dokuments an dieser Stelle verwende
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.
<meta name="msapplication-tooltip" content="TecChannel.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 "http://" und abschließendem "/" angegeben werden:
<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.
<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ück-Buttons beeinflussen. Die Farbe kann als Name oder Hexwert angegeben werden.
<meta name="msapplication-navbutton-color" content="#016AB0" />
Wenn dieses Element nicht vorhanden ist, wird die Farbe von der Palette des Favicons abgeleitet.
Startmenü-Integration
Webseiten lassen sich über die Methode window.external.msAddSiteMode() neben der Taskleiste auch in das Startmenü integrieren:
<a onclick="window.external.msAddSiteMode();" href="#">Startmenü</a>
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. (mje)
Dieser Artikel basiert unter anderem auf einem Beitrag aus dem Windows-7-Blog von Daniel Melanchthon.