WebWie?

Als kleine Ergänzung zur Aufgabe präsentiere ich hier noch einmal kurz die HTML5 Beispiele, die ich im Propädeutikum vorgeführt habe.

Outdoor Team Geisler: <video> Tag und HTML5 Kontaktformular

Zuerst ein kleines Beispiel für den Einsatz des neuen <video> Elements. Der Webauftritt von Outdoor Team Geisler beinhaltet einige Galerien, die gemischt aus Bildern und Videos bestehen. Die Seite wurde in HTML5 umgesetzt. Dabei wurden neue Tags mit semantischen Wert wie z.B <header>, <footer>, <article> und <aside> verwendet. Die angesprochenen Videos wurden mit dem neuen <video> Element eingebunden. Damit die Rückwärtskompatibilität zu älteren Browsern gesichert ist, wurde zur Absicherung eine Javascript-Bibliothek angewendet, die dafür sorgt, dass auf ein Flash-Plugin ausgewichen wird, wenn der Browser den <video> Tag nicht unterstützt. Ein Beispiel dafür findet sich hier: http://www.outdoor-geisler.at/de/outdoor-erleben/hochseilgarten

Ein weitere sehr praktische Neuheit sind die Erweiterungen für Formulare. Dabei wurde dem Umstand Rechnung getragen, dass oftmals die Formulare nicht nur serverseitig, sondern bereits vor dem Absenden clientseitig validiert werden, dh es wird z.B. überprüft, ob Pflichtfelder ausgefüllt wurden, ob ein Wert tatsächlich einer Zahl oder einer E-Mail Adresse entspricht, usw. Früher musste man das mit Javascript sicherstellen. HTML5 vereinheitlicht und erleichtert diese Funktionalität. Das Tolle daran ist, dass es vollständig rückwärtskompatibel ist: versteht ein Browser die neuen Eingabefelder bzw. Pflichtfeldmarkierungen nicht, wird das Feld als ganz normales Textfeld angezeigt und einfach nicht validiert. Beispiel: http://www.outdoor-geisler.at/de/kontakt

Da Vinci Ristorante: Pageflip-Effekt mit <canvas> Element

Das Da Vinci Ristorante wollte seine Speisekarte online zum Durchblättern anbieten. Bestehende Lösungen setzen leider durchgehend auf Flash-Implementierungen. Auf der Suche nach standardkonformen Alternativen bin ich auf die jPageFlip Library gestoßen, die ich in abgewandelter Form auch eingesetzt habe. jPageFlip verwendet das HTML5 <canvas> Element für den Pageflip-Effekt. Das Ergebnis kann hier betrachtet werden: http://www.davinci-ristorante.at/speisekarte

kl. Anmerkung: in der Zwischenzeit wurde eine neue, sehr vielversprechende und auf den ersten Blick bessere Library für diesen Zweck veröffentlicht: turn.js

Baronessa: Rich Snippets auf Basis von schema.org

Das abschließende Beispiel wurde ebenfalls in HTML5 implementiert. Das Hauptaugenmerk, auf das wir uns jetzt richten, gilt aber strenggenommen gar keinem HTML5-Bestandteil, passt jedoch trotzdem gut zum Thema: es geht um semantische Datenstrukturen - das Thema Semantik ist ja ebenfalls ein wichtiger Bestandteil in HTML5. Bei Baronessa habe ich die Datenstrukturen von schema.org intensiv eingesetzt.

schema.org ist das Ergebnis einer Zusammenarbeit der 3 großen Suchmaschinenhersteller Google, Yahoo und Microsoft und bietet ein einheitliches Vokabular für strukturierte Daten im Web. Darin werden z.B. für Adress- und Kontaktdaten von Personen und Organisationen, Veranstaltungen, Produkte, Rezepten, Bewertungen, uvm. Regeln definiert, wie man als Website-Betreiber diese Daten strukturieren muss, damit sie von den Suchmaschinen auch als solche erkannt werden. Belohnt wird man dafür mit einer gesonderten Darstellung im Suchergebnis, wie z.B. Ort und Zeit einer Veranstaltung inkl. Link zusätzlich zum normalen Suchergebnis. (1)

Auf der Baronessa Plattform werden u.a. Lokale und deren Events gelistet. Sowohl die Adress- und Kontaktdaten der Locations als auch die Events selbst werden schema.org konform angezeigt. Als Beispiel dient uns die Übersichtsseite der Events (Anmerkung: die Plattform befindet sich noch in der Entwicklungsphase): http://test.baronessa.at/deals

Mit menschlichen Auge betrachtet sieht man hier natürlich noch keinen Unterschied zu einer "normalen" Auflistung. Mit Hilfe des "Rich Snippet Testing Tools" von Google kann man jedoch gut einsehen, welche semantischen Strukturen Google an der Seite erkennt und wie die Seite im Suchergebnis angezeigt werden würde: Rich Snippets für Baronessa Deals

Quellen

1. golem.de: "Einheitliches Vokabular fürs semantische Web", Abruf: 2012-03-23