Anzeige
Smartes Hosting für anspruchsvolle Projekte.
↬ Loslegen und vServer testen ↬ Jetzt testen!
Denis Potschien 28. Februar 2013

So geht’s: Web Apps als Kacheln auf dem Windows 8 Startbildschirm hinterlegen

Die neue Oberfläche von Windows 8 ist durchaus gewöhnungsbedürftig. Mit der Einführung der sogenannten Tiles, wie die Windows-Kacheln heißen, die jetzt das Hauptbedienkonzept stellen sollen, erhalten Anwendungen auf dem ebenfalls neuen Startbildschirm nicht nur ein Icon, sondern zusätzlich Raum für Benachrichtigungen. Es können jedoch nicht nur Apps, sondern auch Verknüpfungen zu Websites hinterlegt werden. Spezielle Meta-Angaben ermöglichen das Anpassen der jeweiligen Verknüpfung beziehungsweise der dazugehörigen Kachel.

windows8tiles
Window-8-Kacheln mit Apps und Website-Verknüpfungen

Name, Grafik und Kachelfarbe definieren

Drei verschiedene Meta-Angaben hat Windows eingeführt, um das Aussehen einer Verknüpfungskachel individuell zu gestalten. Neben einem eigenen Namen bekommt die Kachel eine eigene Grafik sowie eine Hintergrundfarbe verpasst:

<meta name="application-name" content="drweb.de"> 
<meta name="msapplication-TileImage" content="drweb.png">
<meta name="msapplication-TileColor" content="#3da3b6">

Bei der über msapplication-TileImage eingebundenen Datei muss es sich um ein PNG mit 144 mal 144 Pixel handeln. Es bietet sich an, eine Grafik mit transparentem Hintergrund zu wählen. Die Hintergrundfarbe, die über msapplication-TileColor definiert wird, muss als Hexadezimalwert übergeben werden. Grafik und Name sind dann innerhalb der Kachel untereinander dargestellt.

Um eine Website an die Startseite anzuheften, muss der Internet Explorer im Windows-8-Modus ausgeführt werden. In der Toolbar gibt es eine eigene Anhefte-Funktion, die die Verknüpfung auf den Startbildschirm bringt.

Sind keine Meta-Angaben zum Kachelaussehen hinterlegt, übernimmt Windows das Favicon der Website und wählt eine dazu passende Hintergrundfarbe aus.

Benachrichtigungen in der Kachel ausgeben

Wer Windows 8 nutzt, kennt die Benachrichtigungen, die in der unteren rechten Ecke von Kacheln angezeigt werden. So informiert die Mail-App über die Anzahl der neuen Nachrichten und die Store-App über die Anzahl der Updates, die zu installieren sind. Auch für Websites sind solche Benachrichtigungen machbar.

Dazu muss zunächst eine XML-Datei, die sogenannte Signalbeschreibungsdatei, angelegt werden. Die XML-Datei enthält nur ein einziges Element, welches die Anzahl der Benachrichtigungen oder die Art der Benachrichtigung beinhaltet:

<badge value="15" />

Ist der Wert eine Zahl zwischen 1 und 99, beschreibt badge die Anzahl der Benachrichtigungen. Alternativ kann auch ein bestimmter Benachrichtigungstyp angegeben werden. Der Typ newMessage signalisiert beispielsweise über ein Mail-Icon, dass auf der Website eine neue Nachricht wartet. Es stehen elf verschiedene Typen zur Auswahl (siehe Link unten), die jeweils über die Art der Benachrichtigung informieren.

Die XML-Datei, die idealerweise dynamisch generiert wird, bindet man noch über eine Meta-Angabe in das HTML-Dokument ein:

<meta name="msapplication-badge" content="frequency=30; polling-uri=http://www.drweb.de/benachrichtigungen.xml"/>

Die Angabe frequency gibt in Minuten an, in welchem Zeitintervall auf neue Benachrichtigungen geprüft werden soll.

Fazit: Mit den Meta-Angaben kann eine Website-Verknüpfung im Windows-Kachel-Stil auf dem Startbildschirm abgelegt werden. Die Website www.buildmypinnedsite.com stellt zudem einen Service zur Verfügung, der beim Erstellen des entsprechenden Quelltextes hilft.

Links zum Beitrag

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

5 Kommentare

  1. Microsoft fand die Kacheln auch so toll, dass sie mit Windows 10 wieder teilweise eine Rolle rückwärts gemacht haben :)! Aber stimmt, ich habe die Kacheln auf meinem Laptop auch noch überhaupt nicht genutzt.

  2. Also ich hab WIN 8 nun seit ein paar Tagen inkl neuen Lappy , muss gestehen das mir die Kacheln “ Apps “ anfangs auch etwas überflüssig erschienen aber wenn man sich das ganze individuell zu recht legt hat man einen doch recht schnellen Zugriff auf seine gewählte APP bzw das jeweilige Programm oder gar Website. Fazit nicht überflüssig , gewöhnungsbedürftig aber kein MUST HAVE !

  3. Der hier genannte „Windows-8-Modus“ ist im Grunde die Festlegung des IEs unter Windows 8 als Standardapplikation für das Öffnen von Webseiten und Links sowie die Festlegung im IE unter Internetoptionen > Programme, dass Links „Immer mit Internet Explorer“ geöffnet werden und z.B. nicht als „Immer mit Internet Explorer auf dem Desktop“. Erst dann erscheint die eigene „Anheft“ Funktion (An „Start“ anheften)

  4. Bis jetzt ist mir noch keiner begegnet, der die Kacheln auf dem Desktop nutzt. Auch die Leute nicht, die Win8 mit der Hardware aufgedrängt bekamen.

    • es ist definitiv gewöhnungsbedürftig , mitlerweile nutz ich die Kacheln sogar ;) zumindest versuch ich es mir so einzurichten das man doch einen Sinn darin sehen kann und auch ein Nutzen davon tragen kann.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.