Einfach eintauchen!

Was ist HTML5?

Abgesehen davon, dass es ein aktuelles Hype-Wort ist:

HTML5 ist der neue Rahmen für verschiedenste Erweiterungen früherer HTML-Standards. Dabei ist zu erwarten, dass HTML so dynamisch bleiben wird wie bisher. Es gibt ein paar wenige Empfehlungen durch das W3C, WhatWG und andere Organisationen und nach wie vor viel Freiraum für Browser-Spezifisches.

Dieser Artikel beschreibt ein paar neuere Entwicklungen in den Bereichen Grafik-Elemente, Touch-Eingaben und Bewegungserkennung, die für die Entwicklung des Panorado JS-Viewers von Bedeutung sind. Dabei geht es auch um den aktuellen Stand der Technik bei verschiedenen Browsern.

Das Canvas-Element

Canvas (auf deutsch: "Leinwand") ist ein HTML-Element, auf dem per JavaScript-Programmierung gesteuerte Zeichenoperationen möglich sind.

Die Zeichenfläche kann neben einfachen Grafik-Elementen auch Bitmap-Elemente darstellen, beispielsweise Ausschnitte aus größeren Panorama-Bildern.

Canvas-Implementierungen bieten derzeit 2 grundverschiedene sog. Kontexte an:

2D: Unterstützt einfache 2-dimensionale Grafikausgaben und Transformationen. Wird von allen HTML5-Browsern implementiert.
WebGL: Unterstützt 3-dimensionale Grafikausgaben. Verwendet Hardware-Grafik nach dem von der Khronos Group definierten WebGL-Standard und kann dadurch besonders schnell sein. Wird derzeit von den meisten HTML-Browsern in brauchbarer Qualität implementiert.

Touchscreen-Eingaben

Dies ist ein aktuelles Thema für Tablet-Computer, mobile Tablets und Smartphones. Verglichen mit Maus-Eingaben traditioneller Computer sind Touch-Eingaben stark interpretationsbedürftig: Sie können sich auf ein bestimmtes auf dem Bildschirm sichtbares Element beziehen, aber auch als Gesten beispielsweise zum Blättern, Scrollen oder Zoomen der Seite gemeint sein.

Praktisch alle Browser für Mobilgeräte erkennen Touch-Eingaben. Weniger praktisch ist, dass einige Browser proprietäre Schnittstellen implementiert haben, die von den Empfehlungen des W3C deutlich abweichen. Zudem scheint die parallele Verarbeitung von Eingaben und rechenintensiven Ausgaben für einige Browser auf leistungsschwächeren Mobilgeräten noch schwierig zu sein.

Bewegungen

Die meisten aktuellen Mobilgeräte verfügen über Beschleunigungssensoren und Gyroskop/Magnetometer. Die daraus gewonnenen Daten könnten theoretisch zur Steuerung von räumlich orientierten Website-Inhalten herangezogen werden. Praktisch zeigten unsere Android-Tests, dass das deviceOrietation-API zusammen mit dem Fensterausrichtungs-API mehr oder weniger brauchbar sind, das deviceMotion-API dagegen weniger. Hier hat es seit den Zeiten früherer Android-Versionen Verbesserungen bei der Hard- und Software gegeben.

Noch nicht zufriedenstellend ist aus unserer Sicht manchmal die Qualität der Magnetometer-Daten (Kompass) und der Versuche, Sensor-Fehler per Software zu kompensieren.

Immerhin verwenden die getesteten Browser einheitliche W3C-Schnittstellendefinitionen.

Für einen subjektiv realistischen Eindruck etwa per VR-Brille reichen die im Browser verfügbaren Bewegungsdaten inzwischen - schauen Sie sich die Bilder aus der Panorama-Galerie mal mit einer Smartphone/VR-Brillen-Kombination an!

Mobilgeräte

Aktuell ist eine deutliche Verschiebung der Benutzergewohnheiten im Gange: Weg von traditionellen Computern (Desktop, Notebook), hin zu kleineren Mobilgeräten (Smartphone, Tablet). Darauf müssen sich auch Web-Anbieter einrichten. Aus Entwicklersicht gibt es ein paar signifikante Unterschiede:

Traditionelle PCs: Abgesehen von älteren Netbooks, verfügen diese über leistungsstarke Prozessoren und zusätzlich schnelle Grafik-Hardware. In der Regel werden sie per Tastatur, Maus oder Touchpad (als Maus-Ersatz) gesteuert, nicht per Touchscreen-Eingabe. Die Performance und Stabilität der verfügbaren Browser sind recht gut.
Mobilgeräte: Diese werden durchweg per Touchscreen gesteuert. Die Qualität und Performance neuerer Geräte ist durchaus mit Desktop-PCs vergleichbar. Ältere Geräte sind gelegentlich noch mit langsameren Prozessoren ausgestattet, und bei einigen Browsern sind WebGL- und Touch-Unterstützung noch nicht ausgereift.

Browser-Kompatibilität

In dieser Tabelle sind die aktuellen Testergebnisse mit 14 verschiedenen Kombinationen von Betriebssystemen und Browsern zusammengestellt.

Es muss betont werden, dass die Auswahl an Konfigurationen nicht vollständig sein kann, und dass die Ergebnisse nur eine Momentaufnahme darstellen. Ergebnisse haben sich bei neuen Browser-Versionen der letzten Zeit häufig geändert, und sie werden sich sicher weiterhin ändern.

In aktuellen Tests haben sich folgende OS/Browser-Kombinationen als brauchbar für Panorado JS erwiesen:

Windows 7+:Microsoft Internet Explorer 9+, Microsoft Edge, Mozilla Firefox, Chrome, Opera
Android 5+:Chrome, Opera

Was bringt die Zukunft?

Wir erwarten weitere Fortschritte bei der Qualität, Stabilität und Performance von Mobil-Browsern in naher Zukunft, wie auch bei der Hardware-Performance von neueren Mobilgeräten.

Da die Entwicklung von Betriebssystem-spezifischen Apps aufwändig ist und das WWW ohnehin die gemeinsame Plattform für fast alle Anwender ist, ist es nur folgerichtig, für grafisch orientierte, interaktive Anwendungen wie Panorado JS die neuen Möglichkeiten von HTML5 zu nutzen.

Kontakt Impressum Datenschutzerklärung