Warum HTML5 die HMI-Technologie der Zukunft ist
Kommentare

Multimedia
HTML5 bietet nun nichtproprietäre Spezifikationen an, die alle Content-Erzeuger-Tools und Browser unterstützen sollten, um die Abhängigkeit von den Plug-ins zu beenden. Mit den neuen Tags

Multimedia

HTML5 bietet nun nichtproprietäre Spezifikationen an, die alle Content-Erzeuger-Tools und Browser unterstützen sollten, um die Abhängigkeit von den Plug-ins zu beenden. Mit den neuen Tags und können Entwickler Multimediainhalte direkt in eine Seite einbauen, wie es bislang z. B. bei Bildern schon möglich war. Und die Anwender werden nicht ständig damit konfrontiert, ihren Flash Player, QuickTime oder Silverlight aktualisieren zu müssen. Innerhalb dieser Tags soll alles einfach nur funktionieren, vorausgesetzt, das System bietet Support für den entsprechenden Codec. Wenn auch erwartet wird, dass der größte Teil der Audioverarbeitung durch Lower-Level-Code, z. B. C oder C++ geschieht, so bietet HTML5 auch die Möglichkeit, die Audioverarbeitung direkt in JavaScript durchzuführen [5].

Gibt man den Entwicklern direkten Zugriff auf die Audioverarbeitung, vereinfacht sich die Entwicklung enorm, und die Effizient der Entwickler steigt. Die Geschwindigkeit von JavaScript wird zwar nie an kompilierten Code heranreichen, aber abhängig von der verwendeten Plattform, dem Audiofile und der Komplexität der Verarbeitung wird es für viele Fälle eine durchaus brauchbare Alternative sein.

Leider sind die Videospezifikationen in HTML5 noch nicht so weit wie die für Audio. Das W3C hat zwar die Elemente und Attribute festgelegt (es gibt eine unterhaltsame Demo mit einem „Big Buck Bunny“-Film [6]), aber nachdem viele Browser in unterschiedlichste Richtungen tendieren, gibt es noch keinen Konsens bezüglich des Standard-Codecs für Videos. Die aussichtsreichsten Kandidaten scheinen H.264, Ogg und WebM zu sein. Aber diese Debatte ist längst noch nicht vorüber, und es scheint eine Menge unterschiedlicher Meinungen dazu zu geben.

Sprachinterface

Die „HTML5 Speech Incubator Group“ hat eine standardisierte Schnittstelle vorgeschlagen, die es JavaScript erlaubt, mit einer zugrunde liegenden Sprach-Engine zu kommunizieren. Die Schnittstelle unterstützt sowohl Spracherkennung als auch synthetisierte Sprachausgabe und ist so konzipiert, dass „der Autor einer Webseite (…) eine Webanwendung um Sprachfunktionalität erweitern kann“ [7]. Angenommen, das zugrunde liegende System unterstützt eine Sprach-Engine, so müsste ein Designer, der eine HMI mit Spracherkennung und Sprachausgabe entwickelt, nur die HTML5-Schnittstelle kennen.

Geräteinteraktion

Im Zuge der Migration von HTML-Implementierungen auf mobile Plattformen – von Smartphones bis zu Fahrzeugsystemen – bietet HTML5 APIs für den Zugriff auf Geräteinformationen, wie z. B. Orientierung (hoch/quer) oder Position. Damit kann man beispielsweise das HMI der Bildschirmorientierung anpassen, die Position eines Taxis über das Navigationssystem verfolgen oder die Zeitzone eines Handys automatisch anpassen – vorausgesetzt natürlich, das Gerät hat die benötigten GPS- und Beschleunigungssensoren.

Rendering

Einer der großen Vorteile von HTML-Inhalten und Browsern ist, dass sie so gut wie möglich darstellen, was ihnen vorgesetzt wird – und das ignorieren, was sie nicht verstehen. Wenn ein Font nicht verfügbar ist, nimmt man einfach einen anderen. Wenn ein Element oder Attribut unbekannt ist, wird es weggelassen. Der Nachteil dieser Toleranz ist, dass kaum zwei Browser Inhalte exakt gleich darstellen. Das ist bei traditionellen Inhalten wie Text, Bildern, Formularen und eingebettetem Video- oder Audiomaterial nicht weiter tragisch. Aber es ist eine gewaltige Hürde für HTML bei Darstellungen, die exakte Präzision erfordern. Die Position eines Balls in einem Videospiel muss exakt kontrollierbar sein. Man kann es nicht dem Browser überlassen, das Objekt mehr oder weniger an der Stelle darzustellen, die der Entwickler vorgibt. Auch Karten müssen exakt stimmen, ebenso wie z. B. die 3-D-Darstellung einer Mammografie.

Mit HTML5 kommt eine Reihe neuer Features, die es HMI-Entwicklern erlauben, Bilder exakt zu zeichnen und Displays pixelgenau ansprechen zu können. Neben der Präzision hat man häufig auch den Vorteil, Hardwarebeschleuniger verwenden zu können.

Canvas

Das HTML5-Element definiert einen oder mehrere Bildschirmbereiche, in denen man mit JavaScript präzise Formen und Bilder zeichnen kann. Bei diesem Element benötigt man keine Browsererkennung, um den passenden Code für eine spezifische Browserversion bereitstellen zu können. Somit erlebt man keine unliebsamen Überraschungen. Solange der Browser HTML5-konform ist, werden Bitmaps innerhalb des Bereichs, der mit den Canvas-Attributen height und width festgelegt wird, exakt wie spezifiziert gezeichnet. In unserem Spiel wird der Ball genau dahin fallen, wo er auftreffen soll. Er wird also nicht auf dem linken Fuß auftreffen, wenn er eigentlich rechts landen sollte, nur weil Browser sich etwas unterschiedlich verhalten (siehe auch [8] für ein schönes Beispiel zur Canvas-Programmierung).

Anzumerken ist aber, dass das -Element auch Ansprüche an den Entwurf stellt: Wenn die Ausgabe eines Programms auf ein anderes Gerät wandert (beispielsweise vom einem Tablet auf ein In-Vehicle-Infotainment-System), dann wird der Browser eine Darstellung in einem Canvas nicht automatisch einer geänderten Auflösung anpassen – das muss der Entwickler bedenken und ggf. entsprechend implementieren.

WebGL und SVG

SVG (Scalable Vector Graphics) bietet eine einfach anzuwendende Unterstützung für 2-D-Grafik. Designer können JavaScript mit WebGL verwenden, um mit OpenGL ES 2.0 sogar 3-D-Renderings erzeugen zu können. Mit HTML5 und JavaScript kann somit praktisch jede gewünschte Animation oder Grafik generiert werden.


Themen der letzten Seite:

  • Die Sandbox
  • Besseres Programmiermodell
  • Semantische Tags
  • Das Document Object Model (DOM)
  • Cascading Style Sheets (CSS3)
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -