angeheftete und fensterlose Webseiten für moderne Browser

In der heutigen Zeit gibt es eine Vielzahl an Browsern die auf einer Vielzahl von Betriebssystemen laufen. Jedes System setzt eigene Bedingungen für die Darstellung von Programmen, wie z.B. einen Fensterrahmen für Browserfenster. Die Browser-Hersteller sind auf das angewiesen was das Betriebssystem ihnen ermöglicht um den Browser näher in das System einzubinden. Für einen normalen PC-Nutzer wäre es z.B. interessant bestimmte Webseiten viel schneller zu erreichen als erst durch den Start des Browser und den Klick auf einen Favoriten in diesem Browser. Seit Einführung des neuen Internet Explorer 9 ist dies möglich. Ja, auch das iPad und iPhone machen hierbei mit.

Aus Sicht des Webseitenbetreibers

Ein Webseitenbetreiber möchte seine Webseite möglichst vielen Besuchern zeigen. Um diese anzulocken gibt es vielfältige Mittel, wie z.B. Suchmaschinenoptimierung und die Verwendung von sozialen Netzwerken wie Facebook. Besucher, die eine Webseite aber wiederholt aufrufen sollen, sind schwerer zu fassen. Wenn ein Besucher eine Webseite besonders interessant findet, dann legt er sie in seinen eigenen Browser-Favoriten oder -Lesezeichen ab, findet sie dort aber vlt. gar nicht so leicht wieder.

Daher sollte man als Webseitenbetreiber durchaus das Interesse haben solchen wiederkehrenden Besuchern die Rückkehr zu erleichtern. Seit Einführung von Windows 7 und 8 bzw. dem Internet Explorer 9 ist dies bei Nutzern die einen Desktop-PC verwenden durchaus einfach machbar. Es erfordert jedoch genau wie bei der Verwendung von Favoriten nur die Mitarbeit des Nutzers.

Aus Sicht des Nutzers

Wenn man als Besucher einer Webseite diese interessant findet, kann man sie sich merken, in die Favoriten legen oder einfach irgendwo eine Notiz hinterlassen. Wenn man Windows 7 oder 8 als Betriebssystem hat dann hat man sogar noch einen vierten Weg hierfür.

Beispiel:
Rufen Sie www.viomatrix.de in einem Internet Explorer 9 oder 10 auf. Sie sehen daraufhin z.B. diese links stehende Ansicht.
Klicken Sie jetzt mit der linken Maustaste auf das Tab mit dem Seitentitel "VIO.Matrix Content-Manage..." und halten Sie die Maustaste gedrückt. Ziehen Sie die Maus bei gedrückter Maustaste auf Ihre Taskleiste, so wie im zweiten Bild zu sehen.

Sie müssen hier den Hinweis "Anheften an Taskleiste" sehen. Wenn Sie das haben, lassen Sie die linke Maustaste los. Sofort wird das von Ihnen verschobene Tab geschlossen und ein neues Fenster mit der selben Ansicht geöffnet.

Die selbe Ansicht? Nein, nicht ganz. Hier sind plötzlich die Buttons orange. Und wenn Sie genau hinschauen haben Sie in der Taskleiste ein neues Icon. Was ist hier geschehen?

Der Hintergrund

Die eben beschriebene Funktion ist eine Windows-eigene die sich der Internet Explorer zu nutze macht. Windows ermöglicht es einzelne Programme an die Taskleiste anzuheften. Der Internet Explorer schiebt somit einfach eine Webseite als Web-Applikation in die Taskleiste von Windows und übergibt dabei auch noch einige zusätzliche Eigenschaften, die nur der Internet Explorer auslesen und verstehen kann.

Die orange gefärbten Buttons z.B. werden durch den Internet Explorer ermöglicht. Ebenso wird das Icon in der Taskleiste durch den Internet Explorer gesetzt.

Wenn Sie nun also die Webseite www.viomatrix.de aufrufen möchten, müssen Sie nur auf das gerade eingefügte Icon in Ihrer Taskleiste klicken.

Die Aufgaben

Das folgende gilt nur wenn Sie Windows 7 oder Windows 8 jeweils mit Internet Explorer 10 verwenden. Bei Verwendung vom Internet Explorer 9 ist das beschriebene nicht möglich.

Wenn Sie das Icon in der Taskleiste mit der rechten Maustaste anklicken, dann sehen Sie linksstehendes Menü. Der Abschnitt "Aufgaben" wird von Microsoft als Task-Liste bezeichnet. Hierbei handelt es sich um Tasks, die die Webseite dem Icon als Optionen mitgegeben hat. Klicken Sie eines dieser Icons, z.B. "FAQ" an und es öffnet sich in einem neuen Internet Explorer-Fenster die Seite mit der FAQ auf www.viomatrix.de.

Die weiteren Optionen sind Standard (und so auch bei Verwendung vom Internet Explorer 9 zu sehen). Der Punkt "VIO.Matrix Content-Management" ist ein Link auf die mit dem Icon selbst verknüpfte Webseite.

Einrichtung von angehefteten Seiten für den Internet Explorer

Der Internet Explorer erkennt anhand von bestimmten Quellcodes der Webseite, dass er eine Seite auf diese Art und Weise anheften soll. Ebenso erfährt er aus dem HTML-Code der Webseite, welche Aufgaben er hier verlinken soll. Hierzu muss man folgende HTML-Codes einbinden:

HTML-Code	Bedeutung	Hinweis
<meta content="VIO.Matrix Content-Management" name="application-name" />	Legt den Namen der Web-Applikation fest die bei Rechtsklick auf ein Icon der Taskbar angezeigt wird.	Hier sind keine Formatierungen möglich, es muss sich um puren Text im content-Attribut handeln.
<meta content="VIO.Matrix Content-Management" name="msapplication-tooltip" />	Gibt einen Quick-Info-Text vor der bei Mausberührung der Verlinkung zur Web-Applikation auf dem Desktop oder im Startmenü angezeigt wird.	Funktioniert nur unter Windows 8.
<meta name="msapplication-starturl" content="./" />	Legt die URL fest die beim Anklicken des Icons der Web-Applikation aufgerufen wird.	Die Angabe von "./" führt zur Speicherung der im Moment des Anheftens aufgerufenen Seite. Die Angabe von "/" führt zur Speicherung der Domain der im Moment des Anheftens aufgerufenen Seite als Linkziel. Weiterhin sind auch normale URL-Angaben mit "http://" und auch "https://" möglich.
<meta content="width=1024;height=768" name="msapplication-window" />	Legt die Fenstergröße des Browserfensters fest, welches beim Anklicken des Icons oder der Tasks der Web-Applikation aufgerufen wird.	Die Angaben erfolgen in Pixel.
<meta name="msapplication-navbutton-color" content="#FF3300" />	Legt eine Farbe für die Navigationsbuttons des Internet Explorer 10 fest.	Die Angabe muss in Hexadezimal oder mit einem Farbnamen erfolgen, der bei Microsoft nachzulesen ist. Funktioniert nur bei Verwendung von Internet Explorer 10.
<meta content="name=FAQ;action-uri=/faq.html;icon-uri=/favicon.ico" name="msapplication-task" />	Legt einen Task mit anzuzeigendem Namen, Ziel-URL und anzuzeigendem Icon fest.	Das Icon muss eine Grafik vom ICO-Format sein und darf nur maximal 64x64 Pixel groß sein. Ideal sind Maße von 16x16 Pixel mit transparentem Hintergrund. Die Ziel-URL muss verfügbar sein sonst führt der Link zu einer Fehlerseite. Der Name des Tasks darf auch Sonder- und Leerzeichen beinhalten.

Am Beispiel von www.viomatrix.de sieht die Ausgabe so aus:

Und durch diese Angabe können Sie als Webseiten-Besucher in Ihrem Internet Explorer 9 oder 10 das machen was im obigen Abschnitt "Aus Sicht des Nutzers" beschrieben ist.

Weitere Möglichkeiten

Neben den o.g. Optionen kann man auch noch folgende Möglichkeiten nutzen:

Trennlinie zwischen 2 Tasks mittels einem meta-Element mit dem Namen "msapplication-task-separator" anzeigen
Verwendung von dynamischen Sprunglisten (z.B. um Suchanfragen direkt zu verlinken)

Statische URLs in Tasks ablegen

Bei einem VIO.Matrix-Web hat man als Webseiten-Betreiber natürlich das Interesse als Linkziele für Tasks eine URL festzulegen, die sich nicht so schnell ändert. Die Angabe einer dynamischen URL mit SitzungsID wäre ein potentielles Sicherheitsproblem. Außerdem läuft der Timeout der Sitzung irgendwann aus und die URL wäre nicht mehr gültig.

Aus dem Grund kann man bei VIO.Matrix-Webs auf #INSERT_SP_STATICSITENAME zurückgreifen. Damit würde auch im dynamischen Web eine statische URL als Ziel für einen Link ausgegeben werden können. Im Fall eines Tasks für eine Web-App sähe dies folgendermaßen aus:

Im dynamischen und statischen VIO.Matrix-Web wäre die Ausgabe folgende:

iPad/iPhone: eine Webapp erstellen

Auch auf einem iPad oder einem iPhone ist das Anheften einer Webseite bzw. (wie es von Apple genannt wird) die Installation einer Web-App möglich. Rufen Sie dazu eine Webseite im Browser des Gerätes auf und klicken Sie auf "zum Home-Bildschirm hinzufügen". Daraufhin wird die Webseite mit einem kleinen Vorschaubild als Icon auf dem Home-Bildschirm platziert und kann dort wie jede andere App verschoben werden. Tippt man dieses Icon nun an öffnet sich der Browser des Gerätes und zeigt die Webseite an.

Hier kann man nun als Webseitenbetreiber auch noch etwas erreichen: der Browser auf dem mobilen Geräte könnte nämlich völlig Fenster- und Rahmenlos starten. Fügen Sie dazu die folgenden 2 Zeilen in Ihrem HTML-Code ein:

Und schon wird jemand, der Ihre Webseite als Web-App installiert, einen rahmenlosen Browser haben wenn er die Webseite über das Icon aufruft.

Nachteile

Neue Techniken bieten neben den vielen Vorzügen leider auch Nachteile. Der größte Nachteil von den in diesem Fachbeitrag beschriebenen Möglichkeiten ist, dass kaum ein Anwender von diesen Möglichkeiten seines Browsers weiß. Die wenigstens Nutzer werden sich unter Windows 7 ein Browserfenster auf die Taskleiste ziehen. So etwas gab es noch nie, hat man früher nie gemacht, wieso sollte es also jetzt funktionieren. Die Anwender müssten erst darauf aufmerksam gemacht werden, doch das ist innerhalb der eigenen Webseite nicht so leicht möglich und würde zudem das eigene Design und die Inhalte beeinträchtigen bzw. in den Hintergrund rücken lassen.

Das selbe gilt auch für die iPad-/iPhone-Nutzer. Wer wählt sich schon eine Webseite als Home-Icon aus. In allen beteiligten Browsern ist die Option dafür einfach zu gut versteckt bzw. nicht hervorgehoben.

Einzig Windows 8 Nutzer dürften von dem hier beschriebenen einen Vorteil haben. Sie könnten sich eine Webseite als Web-App auf den Desktop legen und währen schnell am Ziel, wenn sie die Seite wieder aufrufen möchten. Für Webseiten-Betreiber bleibt also abzuwägen, ob sich der Aufwand eine Handvoll Zeilen für eine kleine Anzahl Nutzer, die noch dazu von ihrem Glück nichts wissen, einzufügen lohnt oder nicht.

Nutzer anderer Browser können aktuell keine der beschriebenen Funktionen sehen oder nutzen.

Weiterführende Links: