Mittendrin.

Zurück

Flurfunk der eXperts.

Hier erfahren Sie mehr über eXperts, Technologien und das wahre Leben in der SDX.

Windows 8.1: Live Tiles für Webseiten

04.07.201308:00 Uhr , Matthias Jauernig

Windows 8.1 bringt die Möglichkeit mit sich, Live Tiles von Webseiten darzustellen. Dort können u.a. neue Beiträge eines Blogs angezeigt werden. Dieser Artikel zeigt anhand der Preview-Version von Windows 8.1, wie’s geht.

Was unter Windows 8 bereits möglich war

Benutzer können unter Windows 8 aus dem Internet Explorer sehr einfach Seiten an den Startbildschirm von Windows anpinnen, sodass diese dort als Kachel auftauchen. Normalerweise wird dabei als Kachel-Symbol das IE-Logo dargestellt. Webseiten-Betreiber haben allerdings die Möglichkeit, über die Meta-Tags msapplication-TileImage und msapplication-TileColor ein Bild und eine Hintergrundfarbe der Kachel festzulegen:

<meta name='msapplication-TileColor' content='#FF9900' />
<meta name='msapplication-TileImage' content='square_tile.png' />

Dies führt beim Anpinnen des SDX Flurfunks unter Windows 8 zu folgender Kachel:

Flurfunk_Win8_Tile

Weiterhin war es unter Windows 8 möglich, ein wenig Live-Tile-Funktionalität dazu ins Spiel zu bringen, indem man als "Badge" anzeigen konnte, wenn neue Beiträge eingetroffen sind – hier steht, wie’s geht. Im Prinzip muss dabei dynamisch eine XML-Datei auf dem Web Server generiert werden, in der Änderungen an den Blogbeiträgen bzw. der Webseite beschrieben werden. Windows ruft diese XML-Datei dann periodisch ab, je nachdem, was vom Webseiten-Betreiber in den Meta-Informationen der Webseite (<meta name="msapplication-badge" … />) eingetragen wurde.

Lebendige Webseiten mit Windows 8.1!

Unter Windows 8.1 wurde das Kachelkonzept für Webseiten deutlich erweitert. Zum einen ist es nun möglich, über folgende Meta-Tags für jede der neuen Kachel-Größen ein eigenes Bild zu hinterlegen: ​msapplication-square70x70logo, msapplication-square150x150logo, msapplication-wide310x150logo und msapplication-square310x310logo.

Zum anderen können Webseiten nun noch viel besser als zuvor Live-Informationen auf der angepinnten Webseiten-Kachel darstellen. Dafür gibt es das neue Meta-Tag msapplication-notification, über das die letzten Blogbeiträge als rotierende Live-Informationen auf der Kachel angezeigt werden können.

Das sieht auf dem Wide Tile z.B. so aus:

Win81_Flurfunk_Wide

Bilder werden dabei (falls vorhanden) von Windows automatisch aus den letzten Beiträgen extrahiert und auf dem Tile angezeigt. Die neue große Kachel kann noch mehr Informationen darstellen – hier ist eine Liste der letzten Beiträge zu sehen:

Win81_Flurfunk_Big

Interessant ist nun noch, welche Informationen im Meta-Tag msapplication-notification angegeben werden müssen. Es können hier bis zu 5 URLs abgelegt werden, die gepollt werden, um im Live Tile angezeigt zu werden (Link).

Die Polling-URIs müssen ähnlich wie bei msapplication-badge jeweils auf eine XML-Datei in einem definierten Format verweisen. Nun will der geneigte Webseitenbetreiber natürlich keine separate XML-Datei erzeugen müssen, die dann auch noch dynamisch generiert wird. Muss er auch nicht, denn Microsoft stellt unter Build My Pinned Site einen Cloud-Dienst bereit, der diese Aufgabe übernimmt. Dieser Dienst generiert ein HTML-Fragment mit Meta-Tags, das dann nur noch in die Webseite eingebunden werden muss, um das Live Tile zu aktivieren:

<meta name='msapplication-square70x70logo' content='tiny_tile.png' />
<meta name='msapplication-square150x150logo' content='square_tile.png' />
<meta name='msapplication-wide310x150logo' content='wide_tile.png' />
<meta name='msapplication-square310x310logo' content='large_tile.png' />
<meta name='msapplication-notification' content='frequency=30; cycle=1;
    polling-uri=http://notifications.buildmypinnedsite.com/?feed=https://www.sdx-ag.de/feeds/posts/default?alt=rss&id=1;
    polling-uri2=http://notifications.buildmypinnedsite.com/?feed=https://www.sdx-ag.de/feeds/posts/default?alt=rss&id=2;
    polling-uri3=http://notifications.buildmypinnedsite.com/?feed=https://www.sdx-ag.de/feeds/posts/default?alt=rss&id=3;
    polling-uri4=http://notifications.buildmypinnedsite.com/?feed=https://www.sdx-ag.de/feeds/posts/default?alt=rss&id=4;
    polling-uri5=http://notifications.buildmypinnedsite.com/?feed=https://www.sdx-ag.de/feeds/posts/default?alt=rss&id=5;' />

Et voilà Smiley

0 Kommentare
Dein Kommentar wartet auf Freischaltung.

Artikel kommentieren

Zurück

Tag Cloud