Cross-Application-Development (HTML5)

Inhalt

1 Einleitung
1.1 Definition mobiler Geräte
1.2 Die zunehmende Bedeutung von Smartphones

2 Ist-Zustand von Smartphones
2.1 Übersicht der Betriebssysteme und Marktanteile
2.2 Funktionsumfang auf Software- und Hardwareebene
2.3 Vertriebswege (App Store, Android Market, Marketplace)
2.4 Vor- und Nachteile nativer App-Entwicklung
2.5 Native Entwicklungstools
2.5.1 iPhone
2.5.2 Android
2.5.3 Windows Phone 7
2.5.4 SDKs im Hinblick auf die Entwicklung für mehrere Plattformen
2.6 Motive, die gegen eine native Entwicklung sprechen

3 HTML5, CSS3, JavaScript
3.1 Der Weg geht Richtung HTML5
3.2 Neues in HTML5
3.2.1 Was macht ein HTML-Dokument zu einem HTML5-Dokument?
3.2.2 Semantische und strukturelle HTML5-Elemente
3.2.3 Multimediale HTML5-Elemente
3.2.4 Elemente für den Einsatz in mobilen Endgeräten
3.2.5 Ersetzte und weggefallene Elemente
3.2.6 Fazit - HTML5-Elemente
3.3 CSS3
3.3.1 Farbverläufe
3.3.2 Rundungen
3.3.3 Schatten-Effekte
3.3.4 Fazit - CSS3
3.4 JavaScript
3.4.1 Neues in JavaScript
3.4.2 Persistieren von Daten
3.4.3 Fazit - JavaScript in HMTL5
3.5 Manifest - Web App im Offline-Modus
3.6 HTML5 - Mobile Frameworks
3.7 Browserunterstützung

4 Entwicklerwerkzeuge für HTML5
4.1 Entwicklungsumgebungen (Editoren)
4.2 Prototyp-Entwicklung mit Photoshop Templates
4.3 Debuggen einer HTML5-App
4.4 Weitere Webentwickler Tools
4.4.1 FTP-Software
4.4.2 Bildbearbeitung

5 Programme für HTML5
5.1 Smartphone Beispielanwendung
5.1.1 HTML5-Teil
5.1.2 JavaScript-Teil
5.1.3 Datenbank erstellen
5.1.4 Datenbankzugriffe
5.2 HTML5 Benchmark
5.3 Deployment - Bereitstellen der Anwendung
5.3.1 Installation
5.3.2 Lizenzierung
5.4 Fazit der Smartphone HTML5-App Entwicklung
5.4.1 iPhone
5.4.2 Android
5.4.3 Windows 7 Phone Edition
5.4.4 Alle anderen Systeme
5.5 HTML5 in einer nativen Anwendung

6 Einsatz von HTML5 aus Sicht eines Softwareunternehmens
6.1 Kostenvergleich nativ gegenüber HTML5

7 Fazit - Zusammenfassung der Forschungsergebnisse
Abkürzungsverzeichnis
Abbildungsverzeichnis
Tabellenverzeichnis
Anhang
Glossar
Literatur- und Quellenverzeichnis
Quellcode-Listings
Index

1 Einleitung

Diese Arbeit behandelt die Thematik der plattformübergreifenden Softwareentwicklung in HTML5. Der Schwerpunkt wird hierbei auf die besonderen Anforderungen in der Entwick- lung von Software für Smartphones wie das Apple iPhone, Google Android und Microsofts Windows 7 Phone gelegt. Durch das Konzept einer Web-Anwendung für Internetbrowser sind die in dieser Arbeit gewonnenen Erkenntnisse u.a. auch auf andere Plattformen wie Apples OS X, Microsoft Windows und Linux übertragbar. Mit einem Browser als Laufzeitum- gebung wird der Ansatz plattformübergreifender Applikationen auf einer gemeinsamen Codebasis für jede Art von Betriebssystem verfolgt.

Anwendungen, die plattformübergreifend lauffähig sind, nennt man im englischen auch Cross Applications. Das Wort Cross kann in diesem Zusammenhang mit überqueren oder übergreifen übersetzt werden. Application wird zu Deutsch mit Anwendung übersetzt. Eine Applikation ist spätestens seit der Einführung von Apples iPhone im Sprachgebrauch auch als App bekannt. Zusammengefasst ergibt es den Namen Cross-Apps, was den Titel dieser Diplomarbeit „Cross-Application-Development“ erläutert, der demnach die Entwicklung übergreifender Anwendungen im Sinne von plattformübergreifend beschreibt. Um eine Software für ein bestimmtes Betriebssystem zu entwickeln, werden Entwicklungs- umgebungen eingesetzt, die Anwendungen nur für dieses System kompilieren. Diese Anwendungen werden auch als native Anwendungen bezeichnet. Eine für OS X in Objective-C geschriebene Anwendung ist nicht auf einem Windows System, für das z.B. in C# programmiert wird, ausführbar und umgekehrt.

Eines haben jedoch alle Systeme gemeinsam: den Webbrowser. Dieser stellt ein- und den- selben Inhalt auf unterschiedlichen Systemen gleich dar. Lediglich die Schriftarten und eini- ge Steuerelemente können in ihrem Aussehen von System zu System leicht variieren. Aufgrund einer starken Erweiterung des HTML-Standards durch das W3C (World Wide Web Consortium) ist es möglich, browserbasierte Anwendungen so zu gestalten, dass sie vom Funktionsumfang nicht von einer nativen Anwendung zu unterscheiden sind. Dies wird u.a. durch das Speichern von Daten in lokalen Datenbanken, die Ausführung ohne Internet und spezielle, auf Smartphones ausgerichtete Erweiterungen des Standards ermöglicht. Dieser neue HTML-Standard wird mit HTML5 bezeichnet und ist noch nicht vollständig verabschie- det. Nachdem ein Thema ausreichend durch das W3C ausgearbeitet wurde, ist die Imple- mentierung Aufgabe der Browserhersteller.

Mittlerweile gibt es aber schon eine Reihe neuer Funktionen, die von führenden Web- browsern unterstützt werden. Die Entwicklung von offline arbeitenden, auf Datenbanken basierenden Web-Apps, kann bereits umgesetzt werden. Durch die übergreifende Implementierung der Standards in mobilen Browsern und das zusätzliche Bereitstellen neuer Schnittstellen zu speziellen Smartphone-Funktionen, wird dieses Thema immer interessanter für den Bereich mobil orientierter Anwendungen. HTML5 bildet dabei in Zusammenarbeit mit Cascading Style Sheets 3, kurz CSS3, die visuelle Oberfläche ab.

Programmfunktionalität und Logik werden über eine verbesserte Integration und Erweiterung von JavaScript in HTML5 ermöglicht. Welche Möglichkeiten es gibt, wo die Grenzen liegen und wie ein solches Programm entwickelt werden kann, wird in dieser Arbeit er- forscht. In erster Linie wird hierbei die einheitliche Entwicklung von Programmen für Smartphones beschrieben, die sich durch die verwendeten Betriebssysteme, auch Plattformen genannt, unterscheiden. Technisch gesehen ist die hier beschriebene Programmierung auf Basis von HTML5 auf allen Systemen, die einen Internetbrowser besitzen, möglich. In diesem ersten Kapitel wird zunächst die Definition mobiler Geräte erläutert und die zunehmende Bedeutung von Smartphones im Alltag beschrieben.

Das zweite Kapitel beginnt mit einer Übersicht der einzelnen Betriebssysteme und deren Marktanteile. Nachdem der grundsätzliche Funktionsumfang der drei wichtigsten Smartphones gegenübergestellt wurde, werden die möglichen Vertriebswege nativer An- wendungen und die jeweiligen Entwicklungsumgebungen erläutert. Nachdem das Kapitel mit möglichen Gründen, die gegen eine native Entwicklung sprechen abgeschlossen wurde, wird das dritte Kapitel mit aktuellen HTML5-Entwicklungen großer Unternehmen eingelei- tet.

Von diesem Kapitel an wird die neue Technologie untersucht. Es werden die maßgebenden Erweiterungen in HTML5 und in diesem Zusammenhang auch die von CSS3 und JavaScript analysiert. Vieles wird zu diesem Zweck an Hand von Quellcodes und Bildern verdeutlicht. Das Persistieren von Daten ist genauso ein Thema, wie die Möglichkeit eine HTML5-App ohne Internetverbindung offline auszuführen. Nachdem einige gängige Frameworks, d.h. bei der Programmentwicklung unterstützende Bibliotheken vorgestellt wurden, wird die bisher umgesetzte Unterstützung von HTML5 in aktuellen Browsern tabellarisch dargestellt. Da die technischen Vorrausetzungen abgehandelt wurden, beschäftigt sich das vierte Kapitel mit Werkzeugen, die für die Entwicklung von HTML5-Anwendungen und deren Bereitstellung erforderlich sind.

Die in den vorangegangen Kapiteln gesammelten Erkenntnisse werden in einer Beispiel-App für Smartphones im fünften Kapitel in der Praxis erprobt und durch Bilder und Quellcode- Listings erläutert. Dabei werden zwei mobile Frameworks genutzt, die in empirischen Erhe- bungen miteinander verglichen werden. Nach einem Teilfazit gegen Ende des Kapitels, wird das nötige Wissen für die Bereitstellung der Apps auf einem Webserver vermittelt. Abge- schlossen wird der praktische Teil mit einer Idee und einem Prototypen für ein natives HTML5-Framework.

Das sechste Kapitel erläutert die Vorteile HTML5-basierter Entwicklungen aus der Sicht eines Softwareunternehmens. Durch einen Kostenvergleich der Entwicklung nativer und HTML5-Anwendungen wird dieses Kapitel abgeschlossen.

Eine Zusammenfassung der Forschungsergebnisse mit einer kritischen Beurteilung beschließt diese Arbeit im siebten Kapitel.

1.1 Definition mobiler Geräte

Mobiltelefone werden immer mehr zu dem was PCs heute sind, nämlich leistungsfähige Rechnersysteme im Taschenformat. Mit mobilen Geräten wie sie in dieser Arbeit behandelt werden, sind Smartphones, iPad, iPod und Tablet-PCs gemeint. Ein Smartphone ist ein Mo- biltelefon, das über weit mehr Funktionen als die reine Kommunikation wie dem Telefonie- ren und dem Schreiben von SMS verfügt. Multimediafähigkeit, die sonst nur stationären PCs vorbehalten ist, wie z.B. das Verwalten von Email-Konten, die Installation von Anwen- dungen auf der integrierten Festplatte, das Abspielen von Medien wie Musik und Videos und ein Internetbrowser sind die Hauptmerkmale eines Smartphones. Amberg und Lang definieren die wesentlichen Merkmale eins Smartphones in dem Buch „Innovation durch Smartphone & Co“ als Geräte, die für eine intensive Internetnutzung entworfen wurden und das Installieren von Apps ermöglichen.¹ Grundsätzlich kann auch die Verwendung eines Touchscreens dazu gezählt werden, da sich diese Form der Bedienung bei allen gängigen Produkten durchgesetzt hat. Die Interaktion mit einem Tablet-PC findet ebenfalls über den Bildschirm statt, weshalb für Smartphones entwickelte Anwendungen ohne weiteres auf einem Tablet-PC sinnvollen Einsatz finden können. Wegen der größeren Bildschirmauflö- sung sollten Programme für einen Tablet-PC, wie das Apple iPad, oder windowsbasierte Systeme in der genutzten Programmoberfläche angepasst werden. Smartphones nehmen immer mehr an Bedeutung zu und sind schon lange nicht mehr nur zum Telefonieren da.

1.2 Die zunehmende Bedeutung von Smartphones

Das Telefonieren wird zur Nebensache. Eine Umfrage der Statista GmbH im Juni und Juli 2010 ergab, dass 65 Prozent der Befragten (fast) täglich das Internet über ihr Smartphone nutzen. Die gleiche Zahl nutzt die Adressbuch- und Email-Funktion. 63 Prozent greifen demnach auf das Internet über Apps zu. Beinahe jeder dritte hört täglich Musik über sein Smartphone. 15 Prozent machen (fast) täglich Fotos und 14 Prozent arbeiten in OfficeProgrammen auf mobilen Geräten.²

Durch die immer größer werdende Funktionsvielfalt der Smartphones sind sie bereits heute nicht mehr aus dem Alltag wegzudenken. Es ergeben sich teilweise die gleichen Möglichkei- ten wie auf dem heimischen PC mit dem Vorteil, dass sie stets und überall verfügbar sind. Teilweise erweitern und ersetzen die mobilen Endgeräte sogar die Software der Desktop PCs und andere Geräte wie z.B. Kameras oder machen bestimmte Anwendungsszenarien überhaupt erst möglich. Weitere Beispiele hierfür sind z.B. soziale Netzwerke wie Facebook die davon leben, dass an Ort und Stelle online Informationen zur Verfügung gestellt werden können.

Das Lesen und Schreiben von Emails ist aus der Privat-, wie auch aus der Geschäftswelt nicht mehr wegzudenken. Die Verwaltung von Kontakten, die auf Desktop PCs das Schrei- ben einer Email an einen Kontakt ermöglichen, erlangen auf Smartphones sinnvolle Erwei- terungen in der Versendung einer SMS (Short Message System), dem direkten Telefonanruf oder dem Erstellen einer Routenberechnung auf dem integrierten Navigationssystem. Mitt- lerweile gibt es Apps für alle Bedürfnisse. Auch das Vergleichen der Produktpreise im Han- del ist mit dem Auslesen des Barcodes und anschließender Recherche in einer Online- datenbank nur mit einem Smartphone sinnvoll und praktikabel. Dass die Bedeutung der Smartphones immer mehr zunimmt, kann dem Bericht „Media Democracy“ der Deloitte & Touche GmbH entnommen werden. Demnach verdoppelte sich 2010 die Zahl der Haushalte mit Smartphones innerhalb eines Jahres.³

Die mobile Internetnutzung wurde vom Statistischen Bundesamt Deutschland für 2010 mit durchschnittlich 16 Prozent beziffert, was im Vergleich zum Vorjahr einen Zuwachs von 78 Prozent ausmacht.⁴

Grund für diesen Zuwachs sind zum einen auch die sinkenden Kosten für mobile Internet- zugänge in Form von Flatrates und die steigende Zahl der Anwendungen, die einen deutli- chen Mehrwert im Alltag gegenüber der reinen Kommunikation eines Handys bietet. Note- books und die noch kleineren Netbooks können nicht mehr als Alternativen zu den voran- gegangen Beispielen gelten, da sie in punkto Mobilität und Verfügbarkeit weniger praktisch sind.

Aus Sicht der Entwickler lassen sich klare Tendenzen zu den bevorzugten Entwicklungsplatt- formen ablesen. Die Analysten von VisionMobile veröffentlichten ein 60-seitiges PDF- Dokument mit dem Titel „Developer Economics 2011“, das der digitalen Version dieser Arbeit beiliegt. Darin wird unter anderem hinterfragt, welche Gewinnmargen und Ver- triebswege die einzelnen Plattformen mit sich bringen, was besonders gut und was schlecht auf ihnen verwirklicht werden kann und welche stark genutzt oder Kandidaten für einen Absprung aus Benutzersicht sind.

Die klaren Favoriten unter den Entwicklern sind das iPhone mit 59 Prozent und Android- Systeme mit 67 Prozent der befragten Entwickler. Windows Phone 7 wird in dieser Studie an dritter Stelle platziert. Die Vorteile der Microsoft Plattform liegen in der großen Entwicklerzahl für die Xbox und windowsbasierte PCs. Außerdem wird ein starker Anstieg der Nachfrage durch die Zusammenarbeit mit Nokia und deren Kunden prognostiziert. Symbian- und Java-basierte Plattformen sind die Plattformen mit der höchsten Entwickler-absprungrate. Circa 40 Prozent der Symbian Entwickler und 35 Prozent der Java ME Programmierer planen die Plattformen zu verlassen.⁵ Wie sich die einzelnen Systeme auf dem aktuellen Markt verteilen, wird im nächsten Unterkapitel erläutert.

2 Ist-Zustand von Smartphones

2.1 Übersicht der Betriebssysteme und Marktanteile

Die folgende Tabelle enthält eine Übersicht der auf dem deutschen Markt gängigsten Betriebssysteme, deren Hersteller, die zum Erstellen von Apps benötigten Programmiersprachen und deren Gesamtanteil am deutschen Smartphone-Markt.

Abbildung in dieser Leseprobe nicht enthalten⁶

Tabelle 1: Übersicht der Betriebssysteme, Hersteller, verwendeten Programmiersprache für die native Entwicklung und deren Marktanteil (Stand Juni 2011)

Marktführer ist das iPhone. Es liegt mit einem Marktanteil von 81,86 Prozent weit vor den anderen Herstellern. Das iPhone hat jedoch auch einen immensen zeitlichen Vorsprung, weshalb diese Zahlen in Bezug auf Ihren PLZ (Produktlebenszyklus) nach Pracht und Bachert betrachtet werden.⁷ Das iPhone ist bereits aus der Reifephase heraus und es stellt sich nun die Sättigungsphase ein. Das bestätigen auch die Tendenzen der Webtrekk Studie, die für das iPhone ein Marktwachstum von 0,4 Prozent ermittelte. Android basierte Smartphones treten als direkte Konkurrenz gegen das iPhone an und verhindern so ein weiteres Wachs- tum. Googles Android befindet sich gerade in der Wachstumsphase und ist laut Studie um 1 Prozent im 2. Quartal gewachsen. Microsofts Windows Phone 7 ist zurzeit noch in der Ein- führungsphase anzusiedeln und technisch unausgereift. Der technische Rückstand könnte durch das für Herbst geplante Firmware-Update⁸ mit dem Namen Mango aufgeholt wer- den.

Nokia selber wird seine Geräte zukünftig mit Windows Phone 7-Betriebssystemen ausstatten, weshalb zu diesem Zeitpunkt schwer abzuschätzen ist, wie sich die Nokia-Anteile zukünftig entwickeln werden.⁹ Die Studie weist Nokia einen kontinuierlichen Abstieg nach. Der Marktanteil sank von 6 Prozent im ersten Quartal auf 2,6 Prozent im zweiten Quartal 2011. Wie es dazu kommt, dass bestimmte, lange Zeit marktführende Systeme wie Nokia vom Markt verdrängt werden, schildert das nächste Unterkapitel.

2.2 Funktionsumfang auf Software- und Hardwareebene

In der folgenden Tabelle werden die wichtigsten Funktionen und Merkmale der drei hier behandelten Systeme gegenübergestellt. Die Werte wurden dabei aus Statistiken auf Webseiten und den jeweiligen Produktbeschreibungen entnommen. ¹⁰

Abbildung in dieser Leseprobe nicht enthalten

Tabelle 2: Funktionsvergleich der Betriebssysteme und Hardware (Stand Juli 2011)

Für die hardwarespezifischen Angaben in Tabelle 2 wurden marktübliche Geräte, wie das HTC Sensation (Android) und das HTC Mozart (Windows Phone 7) dem iPhone 4 gegenüber gestellt. Im Hinblick auf diese Arbeit spielt der verwendete Browser eine entscheidende Rolle. Zu diesem Thema wird in Kapitel 3.7 die Unterstützung der einzelnen Browser im Hinblick auf ihre HTML5-Fähigkeit gesondert untersucht. Der Safari- und der Chrome- Browser beherrschen schon die meisten der neuen HTML5 Features, zu Deutsch Funktio- nen. Microsofts mobiler Internet Explorer wird erst mit dem angekündigten Mango-Update HTML5-fähig.

Die Funktionalität, das Smartphone als Hotspot für die Verbindung eines Laptops mit dem Internet zu nutzen, wird von iPhones bisher nicht unterstützt.

Das Gleiche gilt für das Multitasking. Mehrere Anwendungen können auf dem Android- Betriebssystem parallel laufen. Auch hier hat Microsoft Verbesserung mit dem kommenden Mango-Update angekündigt. Die darstellbaren Auflösungen weisen keinen signifikanten Unterschied auf und liegen in etwa gleich auf. Für die Akkulaufzeiten, die an Hand der Her- stellerangaben für die maximale Gesprächsdauer gelistet wurden, lässt sich jedoch ein kla- rer Vorsprung auf Seiten des iPhones nachweisen. Die maximale Gesprächsdauer liegt hier bei ca. 14 Stunden. Im Vergleich dazu bietet das HTC Mozart mit 6,3 Stunden weniger als die Hälfte an Gesprächszeit.

Die Prozessoren sind bei beiden Systemen gleich hoch getaktet, könnten aber durch die unterschiedliche Architektur im Zusammenspiel mit den Ressourcen, die das Betriebssys- tem verbraucht, den entscheidenden Unterschied ausmachen. Auf dem Windows 7 Phone läuft beispielsweise ein nicht geschlossener Browser auch nach dem Ausschalten des Geräts weiter. Im Falle der darauf vorinstallierten Facebook-App werden in regelmäßigen Abstän- den neue Nachrichten vom Server abgerufen, so dass der Akku bereits nach wenigen Stun- den aufgebraucht ist, obwohl das Gerät sich im Standby-Modus befindet. Die in dieser Tabelle mit BT abgekürzte Bluetooth-Schnittstelle ist auf allen Systemen vor- handen, kann auf dem iPhone und dem Windows Phone 7 jedoch nur für die Verbindung mit einer Freisprechanlage genutzt werden. Auf Android-Modellen lassen sich z.B. Daten wie Bilder über Bluetooth an ein anderes Smartphone verschicken. Da Googles Android eine Open-Source-Plattform ist, konnte hier dank einer großen Ent- wickler-Community die Anzahl der verfügbaren Apps gegenüber dem stärker kontrollierten App Store von Apple nahezu aufschließen. Alle wichtigen Apps sind mittlerweile auch auf dem Android Market zu erhalten. Lediglich das Windows 7 Phone hat hier auf Grund der kurzen Marktpräsenz Nachholbedarf.

All diese Smartphones bieten von der Funktionalität her den gleichen Umfang und ähneln sich stark in der Art, wie das Gerät bedient wird. Nokia hingegen setzte lange Zeit auf das hauseigene Symbian-Betriebssystem, das sich in puncto Bedienung und Aussehen nicht gegen die Vorgabe von Apple durchsetzen konnte. Ein weiterer Grund für die aktuelle Marktverteilung ist auch die Art und Weise wie Apps bezogen werden können, die im nächsten Unterkapitel untersucht wird.

2.3 Vertriebswege (App Store, Android Market, Marketplace)

Die Vertriebswege über die Anwendungen zum Kunden gelangen, gehen mittlerweile alle über sogenannte mobile Stores, zu Deutsch Geschäfte, die im Bereich M-Commerce anzu- siedeln sind.¹¹ Jede Plattform hat ihr eigenes Storemodel, über das der Smartphone- Besitzer direkt von seinem Gerät aus Anwendungen auswählen und installieren kann. Nokia hat den OVI-Store, der aber aus eigener Erfahrung nicht benutzerfreundlich ist und überwiegend z.B. Klingeltöne und neue Designs für den Hintergrund des Bildschirms anstel- le von aktuellen Apps bietet. Durch den drohenden Betriebssystemwechsel¹² werden Nokia Smartphones in dieser Arbeit nicht mehr behandelt. Die folgende Übersicht der gängigsten Stores zeigt die Vor- und Nachteile aus Kunden- und Entwicklersicht.

Abbildung in dieser Leseprobe nicht enthalten

Tabelle 3: Store-Vergleich in Bezug auf Releasezeitpunkte, Installation und Zahlungsweisen

Dass in allen Stores vor der Veröffentlichung erst eine Prüfung der Software erfolgen muss, kann als Vor- oder Nachteil für Entwickler und Anwender gewertet werden. Aus Entwickler- sicht ist es nachteilig, dass die fertige Anwendung erst bestimmte Prüfungen durchlaufen muss, bis sie im Store veröffentlicht wird. Die Dauer einer solchen Prüfung ist unterschied- lich und kann sich über mehrere Tage und Wochen erstrecken. Hinzu kommt das Risiko, dass sich Apple über straffe Geschäftsbedingungen vorbehält, ob eine App veröffentlicht wird. Apple kann ohne Angabe von Gründen eine App nicht zulassen oder die Löschung veranlassen.

Diese Prüfungen haben jedoch den Vorteil, dass die Anwender sich relativ sicher sein kön- nen, eine einwandfreie Software zu erhalten. Durch den Prüfungsprozess werden Anwen- dungen mit fragwürdigen Inhalten herausgefiltert. Nachteilig wird es für beide Seiten, wenn man an die Behebung eines Fehlers denkt. Eine neue Version muss ebenfalls den Prüfungs- prozess von vorne durchlaufen. Dies kann bei einer App, die sich im produktiven Einsatz befindet, einen kostenintensiven Arbeitsausfall und zur Verärgerung des Kunden gegenüber dem Entwickler führen.

Der Apple App Store ist der einzige Store, der eine 30 prozentige Beteiligung an jeder ver- kauften App und auch an Inhalten, die aus der App heraus verkauft werden, enthält. Als Beispiel kann hier die Kindle App von Amazon genannt werden. Die Anwendung ist kosten- los, aber für jedes verkaufte EBook bekommt Apple 30 Prozent des Kaufpreises.¹³ Eigene Erfahrungen haben gezeigt, dass die Veröffentlichung auf dem Android Market in der Regel schneller von statten geht. Zu den Veröffentlichungszeiten des Windows 7 Phone Marketplace kann zurzeit noch keine endgültige Aussage getroffen werden. Zum Zeitpunkt der Erstellung dieser Arbeit wurde eine Anwendung in Microsofts App HUB¹⁴ eingestellt und kurz darauf das App HUB-System aktualisiert. Dies zog einen neuen Registrierungs- prozess nach sich. Circa drei Wochen später erschien in dem Portal eine private Nachricht, dass der lokalisierte Titel für die englische Version fehlt.

Ein Alleinstellungsmerkmal hat das Android-System gegenüber allen anderen, nämlich dass die Installation der Software direkt von einem PC möglich ist. Dies kann wiederum als Vor- oder Nachteil gewertet werden. Die Qualität der Anwendungen leidet sicherlich darunter und es kann in Bezug auf die Datensicherheit und die verwendeten Inhalte zu unerwünsch- ten Effekten kommen. Weiterhin sind keine genauen Zahlen zu den reell verfügbaren Apps möglich.

Einen weiteren Vorteil bieten die kostenpflichtigen Apps auf dem Android. Werden diese nach einer Testphase von 15 Minuten wieder deinstalliert, werden die Kaufkosten erstattet. Diese Funktion gibt es in keinem anderen Storesystem. Die Zahlungsmöglichkeiten sind in etwa gleich, wobei das iPhone Jugendlichen ohne Kreditkarte, aber mit eigenem Konto ent- gegenkommt, da es die Bezahlung über einen Bankeinzug zur Verfügung stellt. Dies rührt sicherlich daher, dass lange vor dem iPhone schon Apple iPods¹⁵ existierten, die über iTunes¹⁶ bezahlte Musikinhalte herunterladen konnten. Diese iPods werden größtenteils von Jugendlichen genutzt und ohne die Option, über einen Bankeinzug zu zahlen, würde Apple seine Hauptkonsumenten nicht erreichen können. Die Bezahlung erfolgt auf der App- le-Seite über die in iTunes eingetragene Kreditkarte und auf der Android-Seite über ein System, das sich Google Checkout nennt. Das Windows 7 Phone nutzt die Zune-Software zum Synchronisieren von Anwendungen und Spielen zwischen PC und Smartphone und ermöglicht, wie in Nokias OVI-Store, die Zahlung über die Handyrechnung. Doch nicht nur die Stores unterscheiden sich. Welche Vor- und Nachteile man in der Entwicklung nativer Apps sehen kann, schildert das nächste Unterkapitel.

2.4 Vor- und Nachteile nativer App-Entwicklung

Alle in den Stores angebotenen Apps sind native Anwendungen. Es ist somit nicht möglich eine für das iPhone entwickelte App gleichzeitig in mehreren Stores zu platzieren. Die unterschiedlichen Betriebssysteme beinhalten alle ein eigenes Framework mit dem durch unterschiedliche Programmiersprachen und eigens dafür entwickelte Entwicklungsumgebungen Programme erzeugt werden können.

Auf dem iPhone werden diese Anwendungen in Objective-C mit der Cocoa Touch API (App- lication Programing Interface)¹⁷ programmiert und bedürfen einer Entwicklerlizenz, die bei Apple beantragt werden muss. Diese ist zunächst kostenlos, wird aber kostenpflichtig so- bald man seine Apps im App Store zur Verfügung stellen möchte. Die Kosten belaufen sich momentan auf 90€ pro Jahr. Außerdem fällt bei den verkauften Apps die bereits angespro- chene Beteiligung durch Apple an. Das Bereitstellen von Web-Apps, über den Android Mar- ket, ist durch die Zahlung einer einmaligen Registrierungsgebühr von 25$ möglich.¹⁸

Auch Microsoft verlangt für das Bereitstellen durch seinen Marketplace eine Jahresgebühr von 99€. In Tabelle 4 werden die bisher erläuterten Vor- und Nachteile zusammengefasst.

Abbildung in dieser Leseprobe nicht enthalten

Tabelle 4: Vor- und Nachteile nativer App-Entwicklungen

¹⁹

Um die Vorgehensweise der nativen App Entwicklung zu verstehen und Vergleiche gegenüber der HTML5 Vorgehensweise ziehen zu können, werden im nächsten Unterkapitel die Stärken nativer Entwicklungsumgebungen geschildert.

2.5 Native Entwicklungstools

Die unterschiedlichen Entwicklungsumgebungen, im englischen SDKs (Software Development Kit) genannt, sind speziell auf das jeweilige Gerät ausgerichtet und unterstützen Entwickler mit hilfreichen Funktionen wie z.B. dem Testen des Programms in einem Emulator. Ein Emulator ist eine virtuelle Software-Variante der eigentlichen Hardware, die je nach Emulationsgrad den Prozessor, Aussehen, Displaygröße, Betriebssystem und die Knöpfe emuliert und ein direktes Testen aus der SDK heraus ermöglicht. Ohne Emulator müsste die App für einen Test erst auf das Gerät übertragen werden. Emulatoren bieten auch den großen Vorteil, dass Apps auf verschiedenen virtuellen Versionen des Geräts getestet werden können, die physikalisch gar nicht vorhanden sind.

Eine weitere Funktion von SDKs ist der Debugger zum Auffinden von Fehlern und zur Kon- trolle des Programmablaufs. In einem Debugger können sogenannte Breakpoints, zu Deutsch Haltepunkte, gesetzt werden, an deren Stelle der Programmcode während der Ausführung anhält. An der gestoppten Stelle kann eine Analyse der Objekt- und Variablen- Werte erfolgen. Durch zeilenweises Durchlaufen des Codes kann zudem der Programmab- lauf überprüft werden. Alle APIs und die Syntax sind der SDK bekannt, wodurch der Code interpretiert und kompiliert werden kann. Hierdurch werden Funktionen wie eine Autover- vollständigung ermöglicht. Schreibt der Entwickler z.B. einen Befehl, kann er bereits nach wenigen Buchstaben aus einer Liste möglicher Kombinationen auswählen. Auf Objektebene können Eigenschaften direkt aus einer Liste gewählt werden. Die SDK übernimmt auch die Formatierung des Quellcodes, indem sie Objekte, Variablen und Werte farbig hervorhebt und den Code sinnvoll in verschiedene Ebenen einrückt. Die folgenden SDKs beherrschen alle diese Eigenschaften.

2.5.1 iPhone

Für iOS gibt es eine Entwicklungsumgebung namens Xcode, die aktuell in der Version 4 zum kostenlosen Download bereitsteht.

Download-Link Xcode 4: http://developer.apple.com/xcode/index.php Xcode ist eine Entwicklungsumgebung zum Erstellen von Apps für Macintosh- Betriebssysteme. OS X ist u.a. das Betriebssystem für iMacs, MacBooks und Mac mini. iOS ist das Betriebssystem für iPad, iPod und das iPhone. Die SDK ist nur auf einem Apple- Betriebssystem lauffähig und kann nicht auf einem windowsbasierten PC installiert werden. Die Software beinhaltet neben den angesprochenen Standardfunktionalitäten einen iPhone-, iPad, und iPod-Emulator zum Testen der Apps, eine Versionskontrolle und einen Interface Builder zum Erstellen von grafischen Oberflächen. Unterstützt werden die Pro- grammiersprache C, C++ und Objective-C.

2.5.2 Android

Android-Apps werden in Java programmiert. Die bevorzugte Entwicklungsumgebung für Java-Programme ist Eclipse. Die neuste Version Eclipse Indigor kann unter folgendem Link kostenlos heruntergeladen werden.

Download Eclipse: http://www.eclipse.org/downloads/packages/eclipse-ide-java-ee- developers/indigor

Um die zunächst auf reine Java-Anwendungen ausgelegte Entwicklungsumgebung mit Android-Bibliotheken und einem Android-Emulator auszustatten, muss ein Android Software Development Kit installiert und unter Eclipse konfiguriert werden. Dieses beinhal- tet auch einen Android-Emulator. Die SDK und eine Anleitung findet man unter folgendem Link:

Android SDK: http://developer.android.com/sdk/adding-components.html

2.5.3 Windows Phone 7

Das Windows Phone 7-Betriebssystem stammt von Microsoft und setzt auf die hauseigene Entwicklungsumgebung Visual Studio. Die aktuelle Version ist Visual Studio 2010. Eine kostenlose Express Version kann auf der Microsoft Website heruntergeladen werden.

VS2010 Express: http://www.microsoft.com/germany/express/

Zusätzlich werden Windows Phone Developer Tools benötigt, die mit integrierten Projektvorlagen und einem Windows Phone Emulator aufwarten.

Developer Tools: http://www.microsoft.com/germany/express/products/phone.aspx

Entwickelt wird entweder als XNA Game Studio- oder als Silverlight-Projekt. Die Programmiersprache in beiden Versionen ist C#.

2.5.4 SDKs im Hinblick auf die Entwicklung für mehrere Plattformen

Um ein Programm für eine der hier behandelten Plattformen nativ zu schreiben, bedarf es einer Menge Einarbeitungszeit, um sich an die speziellen Bedürfnisse des Geräts und vor allem in die oft sehr spezielle Programmiersprache einzuarbeiten. Soll eine Software auf mehreren Plattformen lauffähig sein, muss öfters umgedacht werden, denn nicht nur die Syntax ist anders, sondern auch die Entwicklungsumgebungen unterscheiden sich in kleinen Details, die einen reibungslosen Übergang von der einen zur anderen Plattform verhindern. Quellcodes müssen angepasst oder komplett neugeschrieben werden, was einer der größ- ten Nachteile in der Entwicklung nativer Anwendungen für mehrere Plattformen darstellt. Wartungen am Programmcode und das Bereitstellen von Updates müssen für jede Platt- form gesondert durchgeführt werden und halten die laufenden Kosten hoch. Deswegen spezialisieren sich die meisten Unternehmen auf eine der Plattformen.

Diese Spezialisierung ist durch die ständige Verschiebung der Marktanteile, wie am Beispiel von Nokia gezeigt, wirtschaftlich riskant.²⁰ Der Markt muss ständig beobachtet und Tendenzen frühzeitig erkannt werden. Weitere Motive, die gegen eine native Entwicklung sprechen, zeigt das nächste Unterkapitel.

2.6 Motive, die gegen eine native Entwicklung sprechen

Die bisher dargestellten Nachteile von nativen Apps auf dem Mobilfunkmarkt und die Ge- genüberstellungen der unterschiedlichen Betriebssysteme und der damit verbundenen unterschiedlichen Programmierung sind genug Motivation eine Alternative zu suchen. Eine Alternative ist das Entwickeln von plattformübergreifenden Anwendungen als Web-Apps. Das sind Anwendungen, die in einem Webbrowser laufen und von einem Server bereitge- stellt werden. Die Nachteile waren bisher, dass Web-Anwendungen nur online zur Verfü- gung standen. Sie werden über eine URL im Browser aufgerufen und setzen eine aktive Internetverbindung voraus. Sie haben keinen Zugriff auf spezielle Smartphone-Funktionen, wie z.B. Kontakte, das Dateisystem, lokale Datenbanken, Sensoren oder die Kamera. Her- kömmliche Web-Apps sind mit Medien wie Video- und Audio-Dateien oder Flash- Animationen versehen, die Plug-Ins erfordern. Diese Plug-Ins müssen manuell vom Benut- zer installiert werden. Es ist daher nicht gewährleistet, dass eine Webanwendung in jedem Browser auf Anhieb läuft. Auf dem iPhone ist es z.B. nicht möglich einen Flash-Player zu installieren. Anspruchsvolle 2D- und 3D-Animationen wurden bisher über Flash, Java- Applets oder Silverlight realisiert.

Durch die Notwendigkeit und die vielseitigen Möglichkeiten, Internetseiten auf unter- schiedliche Art und Weise zu gestalten, kommt es zu Inkompatibilitäten in Browsern. Aus diesem Grund ist es wichtig, Richtlinien und Standards von einer zentralen Gruppe entwickeln zu lassen. Diese Gruppe nennt sich W3C und besteht aus einem Zusammenschluss von Entwicklern und Browserherstellern, die in regelmäßigen Meetings neue Standards verabschieden. Das aktuelle Projekt des W3C ist HTML5.

Die beschriebenen Mängel in der Entwicklung von Internetseiten werden durch die neueste Version des HTML-Standards schon zu einem großen Teil beseitigt. Anwendungen in HTML5 müssen nicht mehr online sein. Auf dem iPhone ist es möglich, HTML5-Apps wie eine native Anwendung über ein Icon aufzurufen. HTML-Apps können eine relationale Datenbank lokal speichern und über das Canvas-Element sind anspruchsvolle 3D-Anwendungen möglich. Der Nachteil der Wartezeiten bis zur Veröffentlichung in den Stores erübrigt sich, wenn man eine webbasierte Anwendung schreibt. Durch die Möglichkeit, bei jedem Programm- start auf neue Updates zu prüfen, werden fertige Mechanismen zur Verfügung gestellt, die vielen nativen Anwendungen sogar voraus sind.

Die nächsten Kapitel zeigen, wie das mit HTML5 in Kombination mit neuen JavaScript- und CSS3-Funktionen möglich ist.

3 HTML5, CSS3, JavaScript

3.1 Der Weg geht Richtung HTML5

Auf einem iPhone lassen sich keine Java-Anwendungen schreiben, Flash wird genauso we- nig unterstützt. Windows kann beispielweise keine in Objective-C geschriebene Anwendung ausführen. Genauso wenig ist es möglich auf einem OS X-System (Apple) ein in C# kompi- liertes Programm zu starten. Die einzige Komponente, die auf allen Plattformen die gleiche Syntax versteht, ist der Browser. Durch die Erweiterungen des Leistungsumfangs von HTML in Richtung nativer Konzepte und Funktionalität liegt es nahe, Anwendungen mit HTML5, CSS3 und JavaScript zu verwirklichen. Die befragten Entwickler der VisionMobile-Studie „Developer Economics“ sehen mobile Web-Applikationen als erste Wahl, wenn es darum geht, plattformübergreifende Programme zu entwickeln.²¹ Die ersten Entwicklungen in HTML5 haben bereits begonnen.

Im offiziellen Google Enterprise Blog verkündete der Produktmanager Benoît de Boursetty, dass Google Mail seit dem 31. August 2011 offlinefähig ist und Google Kalender und Google Text & Tabellen in der darauf folgenden Woche folgen werden.²²

Andrei Popescu und andere Google Entwickler arbeiten zurzeit an der Portierung der Chrome Engine²³ mit dem Namen WebKit für den Android-Browser.²⁴ Damit ist dann auch der Grundstein für die Integration der 3D-Engine WebGL²⁵ in den mobilen Browser gelegt. Amazon hat in HTML5 eine Chance gesehen, die Apple App Store Geschäftsbedingungen zu umgehen²⁶ und seine Kindle-App, zum Lesen und Kaufen von E-Books, in HTML5 program- miert. Zurzeit wird diese App vom Chrome- und Safari-Browser unterstützt. Eine speziell für das iPad optimierte Version der „kindle cloudreader“-App ist zusammen mit der Browser- Version unter https://read.amazon.com/?ref_=kcr_app_surl_cloudreader erhältlich.

Die Firma Adobe, die bisher in Sachen Animationen auf Flash setzte, ermöglicht mit der Preview von Edge eine Vorschau auf eine alternative Erstellung von Animationen durch den Einsatz von HTML5, CSS3 und JavaScript.²⁷

Erik Möller, ein Opera-Entwickler, ist gerade dabei, das ursprünglich in C++ entwickelte Spiel Emberwind auf HTML5 zu portieren. Die aktuelle Version des Spiels kann unter http://operasoftware.github.com/Emberwind/ getestet werden und zeigt bereits ein- drucksvoll wie leistungsstark HTML5 sein kann.

Auch Microsoft, die für Web-Applikationen bisher die hauseigene Silverlight-Technologie einsetzten, zeigte mit der ersten Vorstellung des neuen Betriebssystems Windows 8 am 1. Juli 2011, dass die Tendenz in Richtung HTML5 geht. Viele Teile der neuen UI (User Inter- face)²⁸, die an das „Kacheldesign“ von Windows Phone 7 erinnert, werden auf HTML5 und JavaScript basieren.

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 1: Windows 8 Startbildschirm - Quelle: Microsoft

»Windows 8 apps use the power of HTML5, tapping into the native capabilities of Windows using standard JavaScript and HTML to deliver new kinds of experiences.« ²⁹

Windows 8-Programme nutzen die Leistung von HTML5 und knüpfen an die nativen Möglichkeiten von Windows mit Hilfe von Standard JavaScript und HTML an, um eine neue Art der Erfahrung zu liefern, heißt es in diesem Auszug.

Diese UI aus Abbildung 1 ersetzt hierbei das bisherige Startmenü von Windows und bringt aktuelle Informationen und Funktionen direkt an die Oberfläche.

All diese Programme und Funktionen sind erst durch HTML5 möglich. Wie Smartphones, Tablet-PCs und Desktop-PCs von den Neuerungen in HTML5 profitieren können und was zur Erstellung einer solchen App notwendig ist, wird in den folgenden Kapiteln erläutert.

3.2 Neues in HTML5

HTML5 befindet sich seit 2007 in der Entwicklung und wird als Document-Object-Model (DOM) definiert, wodurch die Sprache besser für die Programmierung geeignet ist. Im Zuge der Überarbeitung werden zahlreiche Neuerungen implementiert.³⁰

Das DOM beinhaltet die komplette Struktur der Webseite in Form eines Objekts. Dieses Objekt bietet u.a. die Möglichkeit auf einzelne Elemente zuzugreifen, deren Werte zu ändern oder neue zu erzeugen.

Das komplette Konzept zu HTML5 ist im sogenannten W3C Editors Draft auf http://dev.w3.org/html5/spec/Overview.html online verfügbar. Extra für Webentwickler wurde eine kompaktere Version zum Nachschlagen unter http://dev.w3.org/html5/spec-author-view/spec.html veröffentlicht. Eine PDF des Doku- ments liegt der digitalen Version dieser Arbeit bei (W3C HTML5 Edition for Web Authors.pdf).

Im Folgenden werden die sogenannten Tags, zu Deutsch Markierungen, aufgelistet und beschrieben. Als Synonym für Tag findet in dieser Arbeit auch das Wort Element Verwen- dung. Hierzu werden die Elemente nach Anwendungsszenarien getrennt voneinander in Unterkapiteln abgehandelt. Als Basis für die Zusammenstellung, sofern in den Fußnoten nicht explizit angegeben, dient die HTML5 Edition for Web Authors des W3Cs.

3.2.1 Was macht ein HTML-Dokument zu einem HTML5-Dokument?

Das erste Element einer jeden HTML-Seite ist der sogenannte Dokumententyp, der dem Browser mitteilt, um was für eine Art Dokument es sich handelt und wie er dieses anzuzei- gen hat.

Das Dokumententyp-Element bedarf in HTML5 folgender Syntax: <!doctype html>

Im Unterschied zu HTML4 gibt es nur diese eine Schreibweise. Im Vergleich dazu gibt es in HTML4 die in Listing 1 gezeigten Formen.

Abbildung in dieser Leseprobe nicht enthalten

Listing 1: HTML4-typische Doctype-Definitionen

Durch diese Schreibweisen wurde das Dokument durch die Angabe der dtd (document type definition) näher in den verwendeten Elementen beschrieben.³¹ Das Dokumententyp- Element bedarf keines abschließenden Tags.

Die folgenden Elemente werden oft nur an Hand der einleitenden Tags beschrieben, setzen aber ein abschließendes Tag in der Form </Tagname> voraus. Es folgt eine Auswertung neuer und geänderter Elemente, die deren Bedeutung näher beschreiben.

3.2.2 Semantische und strukturelle HTML5-Elemente

Oft gefordert, aber bisher kaum möglich, ist die maschinelle Auswertung einer Webseite in Bezug auf die Semantik, also deren Bedeutung³². Der Inhalt der Seite wird im englischen als Content bezeichnet. Um was für eine Art von Content es sich dabei handelt, konnte vor HTML5 nur begrenzt maschinell ausgewertet werden. Mit einer Maschine ist in diesem Zusammenhang eine Software wie z.B. eine Suchmaschine gemeint. Durch die Einführung von HTML5 werden einige Elemente in Bezug auf ihre Bedeutung geändert oder hinzugefügt. Bisher wurde z.B. ein Artikel von einem <div>-Element eingeschlossen. Das bedeutet für eine Suchmaschine nichts anderes als ein Block-Element zum Umschließen irgendeines Inhalts. Der Inhalt kann jedes in HTML mögliche Element sein.

Durch die Einführung des <article>-Elements ist der Inhalt eindeutig für eine Maschine in seiner Bedeutung auswertbar. Mit einem Artikel ist hier ein in sich abgeschlossener Text, wie z.B. ein Eintrag in einem Forum, ein Artikel in einem Blog oder ein Kommentar gemeint. Weitere Strukturierungselemente sind z.B. das <aside>-Tag, das im Zusammenhang mit einem <article>-Tag genutzt werden sollte. Es steht etwas abseits vom eigentlichen Arti- kel und kann beispielsweise in einer Sidebar zur näheren Erläuterung positioniert werden. Durch die Verwendung des <header>-Tags kann eine Einleitung oder eine Gruppe von Navigationselementen in Form eines Menüs markiert werden. Die Einleitung kann für den Kopf der Website, aber auch innerhalb eines Artikels verwendet werden. Navigationselemente kann es überall auf der Seite geben, nicht nur in einem Header als typisches Navigationsmenü. Maschinell erkennbar ist eine Navigation, die aus einem oder mehreren verlinkten Inhalten besteht, durch folgende Struktur: <nav> …Elemente…</nav>³³ Das <hgroup>-Tag wird zum Gruppieren von Überschriften eingesetzt. Ein Beispiel hierfür ist die Anordnung einer Hauptüberschrift mit dazugehörigen Untertiteln aus Listing 2.

Abbildung in dieser Leseprobe nicht enthalten

Listing 2: hgroup-Tag zum Gruppieren von Überschriften

Hierbei ist <h1> die Hauptüberschrift und <h2> signalisiert den Untertitel. Die Überschriften umfassen den Bereich von h1 bis h6.³⁴

Artikel enthalten üblicherweise die Angabe des Erstellungsdatums. Dieses kann durch das neue <time>-Tag erfolgen. Attribute dieses Tags sind datetime für das maschinenlesbare Datum und ein optionales Typ-Attribut, das in diesem Fall mit pubdate definiert wird. Hier- durch erkennt eine Maschine, dass es sich hierbei um das Veröffentlichungsdatum handelt. Als Text zwischen Start- und End-Tag wird das für den Benutzer sichtbare Datum geschrie- ben.³⁵

Ein Beispiel ist: <time datetime="2011-08-31" pubdate>31 August 2011</time>

Um einen Bereich oder ein ganzes Dokument mit Adressinformationen zum Autor und einem Datum abzuschließen, kann in HTML5 das <footer>-Element verwendet werden. Footer wird ins deutsche mit Fußzeile oder Fußnote übersetzt und wird auch für den kompletten Fußbereich einer Webseite eingesetzt.

Um eine Website oder einen Artikel in einzelne, in sich abgeschlossene Bereiche aufzuteilen, sollte vom <section>-Tag gebraucht gemacht werden.

Um einen Text hervorzuheben gibt es das <mark>-Element. All diese Elemente können über die CSS-Definition entsprechend positioniert und gestaltet werden. Im Beispiel des <mark>Elements wäre z.B. ein Fettdruck denkbar.

Sitemaps.org, Bing, Yahoo und Google erarbeiten zusammen neue semantische Elemente. Diese stehen für Entwickler auf der Website http://schema.org zusammen mit bereits ver- öffentlichten HTML5-Spezifikationen bereit. Im Zusammenhang mit dem <article>Element wird seit kurzem das rel-Attribut, das den Autor eines Artikels beinhaltet, mit in die Suchergebnisanzeige von Google aufgenommen.³⁶

Artikel lassen sich laut Schema.org auch in ihrer Art als Nachrichten (newsarticle), Artikel in einem Blog (blogposting) und als wissenschaftliche Artikel (scholarlyarticle) defi- nieren.

Die Einführung bzw. Erweiterung semantischer Elemente ist auch für ein barrierefreies In- ternet zwingend erforderlich. Mit barrierefrei ist hier die Möglichkeit der Internetnutzung durch alle Menschen, unabhängig von deren Alter und evtl. Behinderungen gemeint. Nach Seibert und Hoffmann dürfen auch technische Gegebenheiten wie z.B. ältere Browserversi- onen, fehlende Plug-Ins, deaktivierte Erweiterungen, verschiedene Ausgabegeräte und die Geschwindigkeit des Internetzugangs keine Hürde für das Nutzen einer Webseite darstel- len.³⁷ Mit älteren Browserversionen wird es bei HTML5 schwierig, aber die anderen Punkte sollten durch HTML5 zukünftig lösbar sein. Plug-Ins wie z.B. Flash werden durch das Canvas- Element in HTML5 ersetzt und sind auf jedem Browser verfügbar. Verschiedene Ausgabege- räte sind ein Teil dieser Arbeit und werden durch die neuen HTML5-Standards angestrebt. Durch die Verwendung von CSS3-Befehlen werden grafische Elemente teilweise nicht mehr benötigt, was auch langsameren Internetverbindungen zu Gute kommt. Durch den durch- gängigen Einsatz semantischer Elemente kann z.B. eine Screenreader-Software, die Text in eine Sprachausgabe umsetzt, Inhalte besser auswerten und die Sprachausgabe optimieren.

Screenreader werden z.B. von sehbehinderten Menschen eingesetzt, um Dokumente wie Internetinhalte nutzen zu können. Es wäre z.B. denkbar, dass in Zukunft Bücher oder Artikel, wenn sie von einer weiblichen Person verfasst wurden, auch von einer weiblichen Stimme vorgelesen werden. Dies wird durch eine Auswertung des Autors im rel-Attribut möglich. Ein weiteres Element erlaubt es, die Betonung des Texts zu steuern. Das <u>-Element leitet einen unbetonten Text ein und kann beispielsweise zur Kennzeichnung von Eigennamen verwendet werden.

Durch die Zusatzinformationen des <aside>-Tags ist es z.B. möglich, diese auf einer soge- nannten Braillezeile einem separaten Knopf zuzuweisen. Eine Braillezeile ist ein Gerät, das den Text einer Webseite oder eines Dokuments mechanisch in fühlbare Blindenschrift um- setzt.

Durch die Unterteilung in Sektionen ist es einer Software möglich, Inhalte zusammenzufas- sen oder voneinander abzugrenzen. Dieser Umstand könnte von Suchmaschinen genutzt werden, indem die Sektionen einer Seite in der Suchergebnisanzeige unter dem Seitentitel erscheinen.

Abschließend kann gesagt werden, dass die Einführung neuer HTML-Elemente auch ein großer Schritt Richtung barrierefreies Internet bedeutet.

3.2.3 Multimediale HTML5-Elemente

HTML5 enthält eigene Elemente, die den Einsatz von Audio und Videos implementieren. Im Zusammenhang mit der neuen Canvas-Zeichenfläche wird der Einsatz von Flash in Zukunft nicht unbedingt nötig sein.³⁸ Wie diese Elemente eingebunden werden und was sie können, wird im Folgenden an Hand von Beispielen und Bildern dargestellt.

Das <command>-Tag definiert Schaltflächen wie Buttons, Radio-Buttons und Checkboxen, wird aber bisher nur vom IE8 (Internet Explorer 8) und dem Safari-Browser unterstützt. Um in HTML5 kenntlich zu machen, dass ein Plug-In folgt, wird das <embed>-Tag genutzt, dass durch die Attribute height, type, src und width näher beschrieben wird. Es können der Reihe nach die Höhe in Pixeln, der MIME Typ, die Quelle in Form einer URL und die Breite angegeben werden. MIME steht für Multipurpose Internet Mail Extension und definiert einen Dateityp wie z.B. image/jpeg für ein Bild.

Das <audio>-Tag ermöglicht das Einbinden von Musik und anderen Audiostreams wie z.B. MP3- und Ogg-Dateien.

Listing 3 zeigt den Aufbau des HTML-Codes zur Einbettung einer MP3-Datei.

Abbildung in dieser Leseprobe nicht enthalten

Listing 3: HTML5 Video-Tag mit MP3-Source und alternativem Text

Durch die Verwendung des controls-Attributs wird im Browser ein Player angezeigt, der dem Benutzer das Starten, Stoppen und Spulen, in diesem Fall der Datei EinLied.mp3, er- möglicht. Durch die Angabe mehrerer Audio Quellen, durch weitere <source>-Tags, kön- nen unterschiedliche, alternative Dateitypen angegeben werden, da nicht jeder Browser MP3-Dateien unterstützt.³⁹ Der Safari-Browser zeigt zu obigem Beispiel den in Abbildung 2 abgebildeten Player an.

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 2: HTML5 Player im Safari-Browser

Innerhalb des Audio-Tags kann durch das Hinzufügen zusätzlicher Attribute auf weitere

Eigenschaften des Players eingegangen werden. Durch den Parameter loop="loop" wird die Datei erneut gestartet, nachdem sie durchgelaufen ist. Weitere Attribute des Tags sind das automatische Abspielen der Datei durch das Hinzufügen von autoplay="autoplay" im <audio>-Tag. Durch das preload-Attribut wird die Datei mit dem Aufruf der Websei- te vorab in den Speicher geladen. Anderenfalls würde die Datei erst mit dem Klick auf die Play-Taste nachgeladen.

Das <video>-Tag ermöglicht das Anzeigen von Videos in einem Browser und verhält sich im Aufbau ähnlich zum <audio>-Tag.

Abbildung in dieser Leseprobe nicht enthalten

Listing 4: HTML5 Video-Tag mit Beispielen

Durch die Einbettung des Codes aus Listing 4 wird ein 320 Pixel x 240 Pixel großer Video- Player angezeigt. Das Attribut controls mit dem Wert controls blendet wieder einen Player ein, der aber diesmal Bild und Ton wiedergeben kann. Neu ist das poster-Attribut über das ein Bild im Fenster des Players angezeigt werden kann, wenn dieser noch nicht geladen oder gestartet wurde. Für das Attribut preload können die Werte auto, metadata oder none angegeben werden. auto bewirkt ein Laden mit dem Aufbau der Webseite. Der Wert metadata bezweckt, dass nur die Metadaten des Films vorgeladen werden und none verhindert ein vorheriges Laden in den Puffer des Players. Die eingege- benen Texte innerhalb der <audio>- und <video>-Tags erscheinen nur, wenn der Browser diese Funktion nicht bietet. Hierdurch kann dem Anwender angezeigt werden, dass sein Browser dieses Element nicht unterstützt.

Bei den Quellen, die über das src-Attribut angegeben werden ist darauf zu achten, dass nicht alle Browser das gleiche Dateiformat unterstützen. Der iOS (iPhone) Safari-Browser und der Android-Browser unterstützen beide das MPEG-4-Format.

Die Datei mit der Endung OGG ist für den Firefox, Opera und Internet Explorer 9 zu verwenden.⁴⁰ Eigene Tests haben gezeigt, dass alle hier behandelten Smartphones das Abspielen einer Musikdatei im MP3-Format unterstützen.

Das Canvas-Element, zu Deutsch Leinwand, dient als Zeichenfläche für Grafiken. Es kann für die Implementierung von durch JavaScript erzeugten 2D- und 3D-Grafiken, Animationen und ganzer interaktiver Anwendungen genutzt werden. Ein Beispiel aus dem Buch HTML5- Apps verdeutlicht das Timer-gesteuerte Zeichnen von Bézierkurven.⁴¹

Abbildung in dieser Leseprobe nicht enthalten

Listing 5: JavaScript zum Zeichnen von übereinander liegenden Kurven

Die Funktion mit dem Namen beziercurveto aus Listing 5 wird in einer Init-Funktion

nach dem Laden der Webseite aufgerufen. In dieser Funktion wird das <canvas>-Element über die id referenziert: canvas = document.getElementById('myCanvas'); Anschließend wird die Variable ctx über die Zuweisung ctx = canvas.getContext('2d'); als 2D Werkzeug initialisiert. Dieses Werkzeug wird in den Zeilen 3 bis 13 zum Zeichnen einer Bézierkurve genutzt und zwar alle 500 Millisekunden. Dies geschieht solange wie die Variable i kleiner 300 ist. Das Ergebnis beginnt mit einer Kurve und endet im rechten Bild aus Abbildung 3.

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 3: Animierte Bézierkurve im Canvas Element

Spiering und Haiges raten von einer extensiven Nutzung des Canvas-Elements in mobilen Browsern ab, da die mobilen Geräte nicht leistungsfähig genug sind.⁴² Eigene Tests haben ergeben, dass der mobile Browser des iPhone 2G circa 4-mal so lang- sam ist wie der Safari Browser eines Intel Core DUO 3,16GHz mit 4GB Arbeitsspeicher. Dazu wurde ein eigenes Benchmark-Tool geschrieben, dass im Kapitel 5.2 näher beschrieben wird.

Neben der hier vorgestellten Methode 2D-Grafiken in einem Canvas-Element anzuzeigen, gibt es mit WebGL (Web-based Graphics Library) die Möglichkeiten, 3D-Grafiken und 3D- Animationen zu erzeugen. Über JavaScript wird hierbei die OpenGL ES 2.0 API angespro- chen, die komplexe 3D-Anwendungen in einem Canvas-Element ermöglicht. Durch die Kombination von HTML5-Websockets zur Kommunikation zwischen Server und Clients und den angesprochenen Audio Funktionalitäten wurden bereits erfolgreich 3D Spiele umge- setzt, die Online mit mehreren Anwendern zugleich spielbar sind. Die Portierung des 3D- Spiels Quake 2 zeigt eindrucksvoll, dass durch HTML5 bereits anspruchsvolle, recheninten- sive Anwendungen möglich sind.⁴³ Die WebGL-Bibliothek ist kostenlos und wird von der Firma Khronos⁴⁴ entwickelt. Abbildung 4 zeigt Bilder eines rotierenden Würfels, der für diese Arbeit in WebGL programmiert wurde. Dieses Beispiel ist angelehnt an das Tutorial der Khronos Website.⁴⁵

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 4: Bild einer WebGL-Demo, die einen rotierenden 3D Würfel zeigt

3.2.4 Elemente für den Einsatz in mobilen Endgeräten

Für mobile Anwendungen können Zugriffe auf telefonspezifische Funktionen wie Kontakte, Emails, Bewegungssensoren und die Kamera wichtig sein. Geplant ist vom W3C, all diese Funktionen in die HTML5-Spezifikationen aufzunehmen. Über entsprechende Aufrufe kann bereits heute das Schreiben einer SMS oder Email, die Anwahl einer bestimmten Nummer oder der Aufruf von Google Maps über die Google Maps API bewerkstelligt werden. Das Schreiben von Emails ist bereits seit langem möglich. Die Eingabe einer Email-Adresse mit vorangestelltem mailto: im href-Attribut eines Links bewirkt den Aufruf des Standard- Mail-Programms. Klickt man auf einen solchen Link, wird eine neue Email mit bereits ausge- füllter Email-Adresse geöffnet. Das gleiche Vorgehen wurde um einige neue Attributwerte ergänzt.

Um eine SMS an eine bestimmte Telefonnummer zu schreiben, wird mailto: durch sms: ersetzt und die Email-Adresse durch die entsprechende Telefonnummer. Es entsteht fol- gender HTML-Text: <a href="sms:0123456789">SMS schreiben</a> Ersetzt man das Wort sms durch tel, wird das Smartphone angewiesen, die hinterlegte Nummer zu wählen. Ein Beispiel wäre: <a href="tel:0123456789">Anrufen</a>

Es gibt bereits eine sehr umfassende Google Maps API, über die der aktuelle Standort aus- gelesen oder eine Route berechnet werden kann. Diese Funktionalität wird über JavaScript und die Google Maps API realisiert. Ein Beispiel für die Positionserkennung wird im prakti- schen Teil dieser Arbeit im Unterkapitel 3.4.1 erläutert. Über das in den vorangegangenen Beispielen genutzte Link-Element ist es aber auch auf HTML-Ebene möglich, einen Ort in Google Maps anzuzeigen. Auch hier wird der Aufruf über den Wert des href-Attributs ge- steuert.

Abbildung in dieser Leseprobe nicht enthalten

Listing 6: Geo Location API in HTML5

Dieser Link zeigt nach dem Aufruf die Sinthererstrasse 1 in Köln auf Google Maps an, unabhängig auf welcher Plattform er ausgeführt wird. Die Funktionen „SMS“ oder „Anrufe“ ohne das Wissen des Besitzers zu erlauben, würde ein großes Sicherheitsrisiko darstellen. Anwendungen könnten versuchen, im Hintergrund Informationen zu versenden und zu sammeln. Aus diesem Grund wird im Falle eines SMS- oder Tel-Links eine Bestätigung des Smartphone-Besitzers erwartet. Auf dem iPhone erscheint ein Dialog mit dem Inhalt der Nummer und darunter einer Abbrechen- und einer Anruf-Schaltfläche.

Dieser Schutz wird von der browserseitigen Implementierung der sms- und tel-Attribute bereitgestellt. Eine nicht autorisierte Ausführung dieses Befehls auf HTML- oder API-Ebene ist nicht möglich. Gleichermaßen geschützt ist die Standortermittlung über das Smartphone, nicht zu verwechseln mit der reinen Standortanzeige über das Link-Element des letzten Beispiels.

3.2.5 Ersetzte und weggefallene Elemente

Es folgen Elemente, die in HTML5 weggefallen sind oder durch andere ersetzt wurden. Abkürzungen, die bisher durch <acronym> beschrieben wurden, ersetzen zukünftig das <abbr>-Element. <abbr> ist die Abkürzung für Abbreviation, zu Deutsch Abkürzung. Um ein Java-Applet hinzuzufügen, wurde in früheren HTML-Versionen das <applet>-Tag eingefügt. Dieses wurde in HTML5 durch das <object>-Tag ersetzt. Das <basefont>- und <font>-Tag zum Festlegen der Schriftart, Farbe und Größe im gesamten Dokument wird nicht mehr unterstützt und soll, entsprechend der klaren Trennung von Inhalt und Design, über CSS-Definitionen in der Stylesheet-Datei erfolgen. Gleiches gilt für das <big>-Tag, das einen größeren Text ermöglicht und das <center>-Tag zum Zentrieren von Elementen. Zum Beschriften einer Tabelle dient das <caption>-Tag. In HTML5 fällt darin die align- Eigenschaft weg, die über CSS vorgenommen werden kann.

Satzbeschreibungs-Tags wie <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, <var>, <cite> bleiben zwar erhalten, haben aber teilweise eine andere bzw. größere Gewichtung. Die Verwendung des <strong>-Elements z.B. bedeutet nun, dass ein wichtiger Text folgt und nicht mehr, dass dieser stark betont wird.⁴⁶ Ein Beispiel für einen stark betonten Satz ist ein Ausruf, der mit einem Ausrufezeichen beendet wird. Das <button>-Tag hat neue Attribute. Der Button, zu Deutsch Schaltfläche, lässt sich direkt nach dem Seitenaufbau fokussieren, blockieren und erhält über diverse Form-Attribute eine direkte Verbindung zum dazugehörigen Formular.⁴⁷

3.2.6 Fazit - HTML5-Elemente

Einige Elemente sind weggefallen, andere wurden schlanker und zu Gunsten der klaren Trennung zwischen Inhalt und Design in Stylesheets überführt. Es wurde eine Reihe neuer Elemente definiert, die zum einen dem Ziel des barrierefreien Internets entgegenkommen und zum anderen Web-Anwendungen nativen Anwendungen ein ganzes Stück näher bringen. WebGL ist ein Beispiel für den Schritt in Richtung native Funktionen, aber es gibt noch mehr grafische Neuerungen, die im folgenden CSS3-Teil gezeigt werden.

3.3 CSS3

Durch CSS wird größtenteils das Aussehen einer Webseite bestimmt. Schriftarten, Hinter- gründe, Farben, Positionen, Größe und Formen der HTML-Elemente entstammen, im Ideal- fall, der Datei mit der Endung .css. Das Prinzip wurde in HTML5 noch weiter ausgebaut, in dem so gut wie alles, was mit Design zu tun hat, zukünftig über CSS-Dateien gesteuert wer- den kann.

CSS 3.0 wird seit 1999 entwickelt und bringt unter anderem Verbesserungen in der Ver- wendung von serverseitigen Schriftarten und automatisch generierten Inhalten mit sich.⁴⁸ Durch CSS3 werden neue grafische Funktionen eingeführt, für die in älteren Versionen mit einer Grafikdatei gearbeitet werden musste. Enthält eine Webseite viele Dateien in Form von z.B. Bildern, verringert sich die Geschwindigkeit des Seitenaufbaus entsprechend zur Größe der Dateien. Auf Seiten des Webservers ist die Last ebenfalls höher, wenn dieser viele Dateien zur Verfügung stellen muss. Durch den Einsatz der folgenden Elemente kommt es zu einer Win-win-Situation zwischen Browser und Server, da der Aufbau im Browser beschleunigt und die Serverlast verringert wird. Es ist durch CSS3 beispielsweise möglich, über die Syntax Farbverläufe, Rundungen an Kanten, Schatten an Boxen und an Schriften zu zeichnen. Bisher wurden solche Effekte mit Bildbearbeitungsprogrammen er- stellt und als Datei in die Webseite eingebaut. Die neuen Effekte werden in den folgenden Unterkapiteln beschrieben.

3.3.1 Farbverläufe

In CSS3 können Farbverläufe linear oder kreisförmig über eine Anweisung (z.B. als Hintergrund) definiert werden. Ein linearer Verlauf von weiß nach schwarz und von oben nach unten wird vom W3C wie folgt definiert: linear-gradient(top, #fff, #000);⁴⁹ In den einzelnen Browsern wurde er bereits, leicht verändert, umgesetzt. Auf WebKit basierenden Browsern wie Google Chrome oder Apples Safari stellt man dem Befehl -webkit- voran und erhält: -webkit-linear-gradient(top, #fff, #000); Bei den anderen Browsern wird gleichermaßen verfahren und jeweils ein Präfix vor den Vorschlag des W3Cs gesetzt. Mozilla setzt anstelle des -webkit- -moz-, Microsofts Inter- net Explorer -ms- und der Opera-Browser benötigt ein -o- vor die Zeichenkette. Das gleiche Vorgehen ist bei radialen, d.h. kreisförmigen Farbverläufen zu erkennen. Der Parameter linear wird lediglich durch radial ersetzt und die Positionsangabe wird in cen- ter umbenannt. Um einen kreisförmigen Farbverlauf von weiß nach schwarz und von innen nach außen zu bewirken, hat das W3C folgende Vorgabe gemacht, die mit denselben Präfi- xen versehen werden muss: radial-gradient(center, #fff, #000);⁵⁰

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 5: Linearer Farbverlauf

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 6: Radialer Farbverlauf

3.3.2 Rundungen

Abgerundete Ecken wurden in vorherigen CSS Versionen ebenfalls über Grafiken realisiert. Diese werden in CSS3 durch das Schreiben eines einfachen CSS-Codes realisiert. Das W3C hat folgende Schreibweise definiert: border-radius:9px 9px 0 0;⁵¹ Durch die vier Parameter kann jede Ecke einzeln definiert werden. Angefangen wird mit der Ecke oben links. Die folgenden Parameter gehen im Uhrzeigersinn weiter. Mit den entspre- chenden Präfixen kann in einem <div> mit Rahmen der Effekt aus Abbildung 7 erzielt wer- den.

3.3.3 Schatten-Effekte

Abbildung in dieser Leseprobe nicht enthalten

Die letzte hier behandelte CSS3 Funktion zielt ebenfalls auf den Verzicht von Grafiken ab und erlaubt das Hinterlegen von Schatten, die von Texten und Bereichen wie z.B. einem Div geworfen werden. Der Schatteneffekt kann beispielsweise dem Quadrat aus Abbildung 7 zugeordnet werden. Die Vorgabe wurde auch hier wieder von den Browserherstellern mit den entsprechenden Präfixen versehen, die vor folgenden String geschrieben werden und zum Ergebnis in Abbildung 8 führen: box-shadow:4px 5px 6px 0px #fab2c3;

Die Parameter von links nach rechts bedeuten: eine Verschiebung des Schattens auf der X-Achse um 4 Pixel, eine Verschiebung auf der Y-Achse um 5 Pixel, einen 6 Pixel breiten Schatten mit einer Schattenhärte von 0 Pixeln und einer rosa Farbe. Um die Lichtquelle zu drehen, sind für die X- und Y-Achse auch negative Werte erlaubt. Es können auch mehrere Schatten durch ein Komma getrennt angegeben werden, die sich dann teilweise farblich überlagern.

Wird den Pixel-Angaben als zusätzlicher Parameter inset vorangestellt, wird der Schatten nach innen geworfen. Abbildung 9 zeigt die Verwendung des inset-Parameters in Verbindung mit mehreren Schatten. Mit der Schattenfunktion kann man nicht nur äußerst realistische Schatten erzeugen, sondern auch Neon-Beleuchtungseffekte, wie sie in Abbildung 8 zu sehen sind. Eingesetzt werden können diese Effekte z.B. für die Schaltflächen einer Menüleiste wie in Abbildung 10 dargestellt.

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 10: Beispiel für den Einsatz von Rundungen und Farbverläufen in Schaltflächen

Einen Text kann man auf ähnliche Art und Weise mit einem Schatten versehen. Setzt man als Style in einem Div text-shadow:8px 7px 3px #A6A7A7 erhält man für den angezeigten Text den Schatteneffekt aus Abbildung 11. Die Attribute stehen hierbei, ähnlich wie beim box-shadow, für die im Folgenden genannten Eigenschaften. Mit dem ersten Wert wird der Schatten um 8 Pixel entlang der X-Achse nach rechts verschoben. Der zweite Wert ver- schiebt den Schatten um 7 Pixel nach unten entlang der Y-Achse. Eine Stärke von 3 Pixeln und die hellgraue Farbe werden durch die letzten Parameter festgelegt. Die Stärke des Schattens wird umso weicher, je höher der Wert ist. Ab einem Wert von 10 ist dieser bereits so stark verschwommen wie in Abbildung 12.

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 11: Text-Shadow in CSS3

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 12: Schattenstärke auf 10 Pixel

3.3.4 Fazit - CSS3

Durch die Verwendung von Farbverläufen, abgerundeten Ecken und Schatten können viele Grafiken auf modernen Webseiten ersetzt werden, was den Aufbau der Seiten beschleunigt und den Traffic⁵² verringert. Der Einsatz dieser Designerwerkzeuge ist heutzutage stark verbreitet. Nahezu jede moderne Anwendung hat etliche Farbverläufe und runde Ecken. Abschließend kann gesagt werden, dass CSS3 in großen Teilen das Look&Feel der Web- seiten bestimmt. Der Look, zu Deutsch Aussehen, wird durch die Bereitstellung dieser mo- dernen Designmerkmale verbessert und das Feel, zu Deutsch Fühlen, durch den schnelleren Aufbau der Webseiten angenehmer. Nach Graham gibt es keine eindeutige Definition des Begriffs oder ein Copyright, aber auch er beschreibt Look&Feel in der Kombination von Farben, Designs, Präsentationsformaten und vielen anderen visuellen Elementen.⁵³ Gerade im Hinblick auf mobile Geräte und die Offline-Fähigkeiten ist es wichtig, möglichst viele grafische Elemente durch Quellcode zu erzeugen.

In dieser Arbeit wird auch bei HTML- und CSS-Inhalten von Code gesprochen, was eigentlich nicht richtig ist. Es sind genaugenommen keine Programmiersprachen, sondern reine Meta- bzw. Beschreibungssprachen, wie z.B. XML (Extensible Markup Language). Es gibt aber einen Teil, der neben CSS3 zu HTML5 gehört und die Anforderungen einer hö- heren Programmiersprache mit Objekten und Kontrollstrukturen erfüllt: JavaScript.

3.4 JavaScript

JavaScript wurde 1996 von Netscape eingeführt und ermöglicht u.a. auf Elemente im DOM zuzugreifen, diese zu manipulieren, dynamisch zu erzeugen und Funktionen wie eine Validierung oder das Behandeln von Ereignissen zu implementieren.

Das bekannteste JavaScript-Objekt, das in fast allen professionellen Webseiten eingesetzt wird, ist XMLHTTPRequest, auch als Ajax bekannt.

Mit Hilfe von Ajax (Asynchronous JavaScript and XML) kann die Webseite im Hintergrund mit dem Webserver kommunizieren, während sie im Browser angezeigt wird.⁵⁴ Durch den Einsatz von Ajax ist es möglich, nur bestimmte Teile einer Webseite neu zu laden.

3.4.1 Neues in JavaScript

Neben der bereits behandelten WebGL-Schnittstelle für das <canvas>-Element gibt es noch einige neue APIs, die in dieser Arbeit behandelt werden sollen.

Mit zu den wichtigsten Neuerungen in HTML5 gehört die Fähigkeit, Dateien in einem Manifest aufzulisten und lokal zu speichern, damit die Seite ohne aktive Internetverbindung lauffähig ist. Diese Funktionalität wird in dieser Arbeit auch als Offline-Modus bezeichnet. Durch die Application cache API ist es möglich, den Vorgang während des Abgleichs und die Manifest-Fähigkeit des Browsers abzufragen. Für letzteres kann die JavaScript Bibliothek „Modernizr“, erhältlich unter http://www.modernizr.com/ verwendet werden. Über den Aufruf von Modernizr.applicationcache kann geprüft werden, ob der Application Cache vorhanden ist oder nicht vom Browser unterstützt wird. In einem gesonderten Unterkapitel auf Seite 34 werden die erforderlichen Schritte erklärt, die eine Webserver-basierte An- wendung in den Offline-Modus überführen. Um den Ablauf der Manifestierung als Informa- tion in der UI anzuzeigen, kann ein Objekt vom Typ applicationCache erzeugt werden. Dem cache-Objekt lassen sich mehrere Eventlistener⁵⁵ anhängen, die einen Typ, eine auf- zurufende Funktion und den Wert für das Capturing als Übergabeparameter erhalten. Der letzte Parameter wird vom Internet Explorer nicht unterstützt und kann ignoriert werden. Das Erzeugen des Objekts und das anschließende Anhängen an ein Event, das während des Downloads ausgelöst wird, enthält der Code in Listing 7.

Abbildung in dieser Leseprobe nicht enthalten

Listing 7: Application Cache-Objekt erstellen und auf Update-Event reagieren

Weitere Events des cache -Objekts sind 'cached', wenn eine Datei heruntergeladen wurde 'checking' während das Manifest gelesen wird, 'error', 'noupdate', wenn es keine Veränderungen gibt, 'progress, das während des Dateidownloads eintritt, 'obsolete', wenn das Manifest entfernt wurde und 'updateready', wenn der komplette Updatevorgang abgeschlossen ist. In der übergebenen Funktion kann auf die Ereignisse reagiert werden und beispielsweise mit einer Anzeige in der UI protokoliert werden.⁵⁶

Für die Entwicklung komplexer, offline arbeitenden Anwendungen ist der Zugriff auf eine Datenbank erforderlich. Die Schnittstelle ist in der Web SQL Database API definiert und wird im Kapitel 5.1.3 und 5.1.4 praktisch eingesetzt und erläutert.

Am Element für die Anzeige eines Videos wird nun ein weiteres Beispiel zur Integration von JavaScript in HTML5 aufgezeigt. Die Syntax des <video>-Elements wurde bereits auf der HTML-Ebene erläutert. <audio>- und <video>-Elemente sind ebenfalls Teil einer eigenen API-Referenz und können durch JavaScript gesteuert werden. Das folgende Code-Beispiel aus Listing 8 und Listing 9 wurde dem W3C Editors Draft zur Verdeutlichung der Verbindung zwischen HTML-Element und JavaScript entnommen. Für diese Arbeit wurde lediglich die Ausgabe ins Deutsche übersetzt. Das Beispiel zeigt eine Möglichkeit für die Fehlerbehand- lung eines <video>-Elements. Zu diesem Zweck wird im <video>-Tag das in Listing 8, farb- lich hervorgehobene Attribut, hinzugefügt.

Abbildung in dieser Leseprobe nicht enthalten

Listing 8: HTML5-Video-Tag mit on Error-Attribut

Kommt es bei der Ausführung zu einem Fehler, wird die Funktion failed(e) aufgerufen. Darin wird in einer Switch-Anweisung der jeweilige Fehlercode ausgewertet und mit einer Meldung im Browser ausgegeben, siehe Listing 9.

Abbildung in dieser Leseprobe nicht enthalten

Listing 9: JavaScript zum Auswerten von onerror im HTML5 Video-Element

[...]

---

¹ Vgl. Amberg, Lang (2011), Seite 308

² Vgl. Statista GmbH: Smartphone-Funktionen – Nutzung 2010, 01.10.2010, http://de.statista.com/statistik/daten/studie/166150/umfrage/nutzung-von-smartphone- funktionen-in-deutschland/ (09.07.2011, 10:51)

³ Vgl. Deloitte & Touche GmbH: Media Democracy , 01.02.2011, http://www.deloitte.com/view/de_DE/de/presse/pressemitteilungen/565bca8b600ed210VgnVCM1 000001a56f00aRCRD.htm (08.07.2011, 22:13)

⁴ Vgl. Statistisches Bundesamt Deutschland: Internetnutzung über das Handy 2010 stark gestiegen, 14.02.2011,http://www.destatis.de/jetspeed/portal/cms/Sites/destatis/Internet/DE/Presse/pm/201 1/02/PD11__060__63931,templateId=renderPrint.psml (08.07.2011, 23:24)

⁵ Vgl. VisionMobile: Developer Economics 2011, Juni 2011, http://www.visionmobile.com/rsc/researchreports/VisionMobile-Developer_Economics_2011.pdf, Seite 3

⁶ Vgl. Webtrekk: Studie Q2 2011, 30.06.2011, http://www.frische-fische.de/pdf/1318.pdf, (08.07.2011, 23:46)

⁷ Vgl. Pracht, Bachert (2005), Seite 62

⁸ Ein Firmware-Update ist eine neue Betriebssystemversion, die im Falle von Mango z.B. Multitas- king, einen verbesserten Browser und ein schnelleres Laufzeitverhalten des Betriebssystems ver- spricht.

⁹ Vgl. Nokia Conversations: Open Letter from CEO Stephen Elop, Nokia and CEO Steve Ballmer, Mic- rosoft, 11.02.2011, http://conversations.nokia.com/2011/02/11/open-letter-from-ceo-stephen-elop- nokia-and-ceo-steve-ballmer-microsoft/ (13.08.2011, 21:56)

¹⁰ Vgl. Business Insider: Charts oft he Week: All Those iPad Competitors Are Toast, März 2011, http://www.businessinsider.com/charts-of-the-week-ipad-competition-is-toast-2011-3#google-is- closing-the-gap-on-apples-app-store-3 (02.09.2011, 11:42)

¹¹ Vgl. Bäumer (2011), Seite 13

¹² Vgl. dazu Kapitel 2.2 Funktionsumfang auf Software- und Hardwareebene

¹³ Vgl. dazu Kapitel 3.1 Der Weg geht Richtung HTML5

¹⁴ Microsoft: Entwickler-Portal zum Einstellen von Software für Windows 7 Phone App http://create.msdn.com/en-US/

¹⁵ Das iPod war anfänglich ein reiner mobiler Musik-Player, der mittlwerweile wie ein iPhone aussieht und Apps abspielt. Der Unterschied liegt in der fehlenden Telefonfunktion.

¹⁶ iTunes ist eine Synchronisations-Software, die iPods, iPads und iPhones mit einem PC verbindet und den Austausch von Daten und das Aufspielen neuer Betriebssystem-Versionen ermöglicht.

¹⁷ API (Application Programing Interface) bezeichnet eine Schnittstelle zu einer in sich abgeschlossenen Software, die Entwicklern Funktionen zur Verfügung stellt, durch die Teile des Programms gesteuert werden können.

¹⁸ Android Market: Erste Schritte, https://market.android.com/publish/signup (06.08.2011, 18:36)

¹⁹ Ein Patch, zu Deutsch Nachbesserung, ist ein Software-Update das eine Erweiterung an der bestehenden Software vornimmt.

²⁰ Vgl. dazu Kapitel 2.1 Übersicht der Betriebssysteme und Marktanteile

²¹ Vgl. VisionMobile: Developer Economics 2011, Juni 2011 http://www.visionmobile.com/rsc/researchreports/VisionMobile-Developer_Economics_2011.pdf, Seite 16

²² Vgl. Google: Using Gmail, Calendar and Docs without an Internet connection, http://googleenterprise.blogspot.com/2011/08/using-gmail-calendar-and-docs-without.html (02.09.2011, 23:11)

²³ Eine Engine, zu Deutsch Motor, ist der Kern einer Anwendung, die in diesem Fall z.B. Funktionen zum Rendern von Grafiken bereit hält.

²⁴ Vgl. WebKit: WebKit and Android, https://lists.webkit.org/pipermail/webkit-dev/2011- August/017738.html (24.08.2011, 13:36)

²⁵ Vgl. dazu 3.2 Neues in HTML5, Abschnitt Canvas

²⁶ Hiermit ist die Beteiligung durch Apple von je 30% pro verkauftem E-Book gemeint.

²⁷ Adobe: Edge Produktbeschreibung, 07.09.2011, http://labs.adobe.com/technologies/edge/ (08.09.2011, 22:54)

²⁸ UI ist die Abkürzung für User Interface, zu Deutsch Benutzerschnittstelle. Damit ist die Programmoberfläche einer Software gemeint.

²⁹ Microsoft News Center: Previewing ‘Windows 8‘, 01.06.2011, http://www.microsoft.com/presspass/features/2011/jun11/06-01corporatenews.aspx (07.08.2011, 20:36)

³⁰ Vgl. Spiering, Haiges (2011), Seite 20

³¹ Vgl. W3C: The global structure of an HTML document, http://www.w3.org/TR/html4/struct/global.html (21.08.2011, 16:03)

³² Vgl. Ziegler (2002), Seite 45

³³ Vgl. W3C: HTML5 Edition for Web Authors, Seite 67 f., 70 u. 86

³⁴ Vgl. W3C: HTML5 Edition for Web Authors, Seite 43

³⁵ Vgl. W3C: HTML5 Edition for Web Authors, Seite 91 ff.

³⁶ Vgl. Google: Authorship markup and web search, 07.06.2011, http://insidesearch.blogspot.com/2011/06/authorship-markup-and-web-search.html (11.07.2011, 13:24)

³⁷ Vgl. Seibert, Hoffmann (2006), Seite 179

³⁸ Vgl. Münz, Gull (2010), Seite 25

³⁹ Vgl. dazu Kapitel 3.7 Browserunterstützung

⁴⁰ Vgl. Spiering, Haiges (2010), Seite 129

⁴¹ Vgl. Spiering, Haiges (2010), Seite 100

⁴² Vgl. Spiering, Haiges (2010), Seite 101

⁴³ code.google.com: Quake II GWT Port, http://code.google.com/p/quake2-gwt-port/ (14.08.2011, 11:16)

⁴⁴ Khronos Homepage, http://www.khronos.org

⁴⁵ Vgl. Khronos: Tutorial, 30.03.2011, http://www.khronos.org/webgl/wiki/Tutorial (02.08.2011, 00:43)

⁴⁶ Vgl. W3C: HTML5 Edition for Web Authors, Seite 247-252

⁴⁷ Vgl. W3C: HTML5 Edition for Web Authors, Seite 176 ff.

⁴⁸ Vgl. Münz, Gull (2010), Seite 23

⁴⁹ Vgl. W3C: Linear Gradients, 02.09.2011, http://dev.w3.org/csswg/css3-images/ (16.09.2011, 21:34)

⁵⁰ Vgl. W3C: Radial Gradient Examples, 02.09.2011 http://dev.w3.org/csswg/css3-images/ (16.09.2011, 21:36)

⁵¹ Vgl. W3C: CSS3 Background, 15.02.2011, http://www.w3.org/TR/css3-background/ (16.09.2011, 21:50)

⁵² Mit Traffic, zu Deutsch Verkehr, ist der Datenverkehr zwischen Webserver und Browser.

⁵³ Vgl. Graham (1999), Seite 53

⁵⁴ Vgl. Münz, Gull (2010), Seite 24

⁵⁵ Ein Eventlistener ermöglicht die Verknüpfung eines Ereignisses mit einer Funktion.

⁵⁶ Vgl. Spiering,Haiges (2010), Seite 233 bis 236