Inhaltsverzeichnis

Einführung

Worum geht es?

HTML5 – die Spezifikation und der aktuelle Stand

Webanwendung vs. native Anwendung

Native Anwendung

Webanwendung

Warum nicht beides?

Wer sollte das Buch lesen?

Danksagung

Was wird benötigt?

Welcher Browser?

Welcher Texteditor?

Welches FTP-Programm?

Download der Beispiele

1    Mobile Designprinzipien

1.1      Mobiles Web- und Anwendungsdesign

1.1.1   Application Prototyping

1.1.2   Dashcode und andere Programme

1.2      iPhone-typisches Design in der Praxis

1.3      Erkennung von mobilen Browsern und Desktopbrowsern

1.3.1   Geltungsbereiche der .htaccess-Datei auf dem Webserver

1.3.2   Einen falschen User-Agent vorgeben

1.4      CSS- und JavaScript-Frameworks

1.4.1   iWebKit 5 – das CSS-Framework

1.4.2   Verwendete Ressourcen speichern

1.4.3   Safari Web Inspector, Google Chrome Developer Tools und Firebug

1.4.4   jQuery und jQuery Mobile

1.5      HTML und Telefonfunktionen

1.5.1   Telefonnummer benutzen

1.5.2   SMS-Anwendung aufrufen

1.5.3   E-Mails versenden

1.5.4   Google Maps aufrufen

1.6      iPhone-spezifisch: Web-Apps, die den Browser verbergen

1.6.1   CSS-Gestaltung für Hoch- und Querformat

2    HTML5 in der mobilen Webentwicklung

2.1      Von HTML4 nach HTML5

2.1.1   Syntaktische Unterschiede

2.1.2   Character Encoding

2.1.3   Der !doctype html

2.2      Sprachliche Unterschiede

2.2.1   Neue über JavaScript zugängliche APIs

2.2.2   Neue Input-Typen, Auto-Korrektur und Auto-Großschreibung

2.3      Das canvas-Element

2.3.1   Formen und Pfade

2.3.2   Bilder

2.3.3   Text

2.3.4   Füllstil, Strichstil, Linienstil

2.3.5   Verläufe, Muster, Schatten

2.3.6   Unterstützte Transformationen

2.3.7   Mögliche Zeichenoperationen

2.3.8   Diagramme mit Flot

2.4      SVG – skalierbare Vektorgrafik

2.4.1   Unterschied SVG und Canvas

2.4.2   Aufbau des ersten SVG-Bilds

2.4.3   Elemente zum Zeichnen in SVG

2.4.4   Animationen in SVG

2.5      Audio und Video

2.5.1   Audiowiedergabe

2.5.2   MIME-Types

2.5.3   Aufbau einer Videodatei

2.5.4   Auf den Videocodec kommt es an

2.5.5   Fehlerbehandlung mit der JavaScript-API

2.5.6   Videoimplementierung mit der JavaScript-API

2.5.7   Eigene Videos konvertieren

2.5.8   2-pass Encoding – was ist das?

2.6      Geolocation-API

2.6.1   Privatsphäre und Sicherheit

2.6.2   Feature-Detection: Geolocation-API

2.6.3   Arten der Positionsbestimmung

2.6.4   Google-Maps-API

2.6.5   One-Shot-Positionsanfragen

2.6.6   Ortungsmethoden

2.6.7   PositionOptions genauer betrachtet

2.6.8   Error-Callbacks

2.6.9   WatchPosition – ständige Positionsupdates

2.6.10 Reverse Geocoding mit Google Maps-API

2.6.11 Georeferenzierte Fotos von Flickr einbinden

2.6.12 Weitere georelevante API-Methoden bei Flickr

2.6.13 Zusammenfassung und Ausblick

2.7      Web Storage

2.7.1   Feature-Detection: Darf Web Storage benutzt werden?

2.7.2   sessionStorage und localStorage

2.7.3   Beispiele zu localStorage und sessionStorage

2.7.4   Storage-Event

2.8      Web SQL Database

2.8.1   Grundlagen relationaler Datenbanken

2.8.2   SQL-Basics

2.8.3   Transaktionen

2.8.4   Database-API

2.8.5   Neue Datenbank in den iPhone-Einstellungen

2.8.6   Daten speichern

2.8.7   SQL Injection

2.8.8   Daten aktualisieren

2.8.9   Datenbank-Queries

2.8.10 Daten löschen

2.8.11 Schemamigration

2.8.12 Web SQL Database: Notes-Beispielanwendung

2.8.13 Datenbanken im Safari Web Inspector und in Google Chrome

2.9      Offline Web Applications

2.9.1   Grundlagen der Cache-Manifestdatei

2.9.2   Feststellen, ob der Browser online ist

2.9.3   Online-Whitelist und Fallback-Sektion

2.9.4   Dynamische Erzeugung des Cache-Manifests

2.9.5   Die ApplicationCache-API

2.10   Zusammenfassung

3    Native Anwendungen erstellen

3.1      Titanium versus PhoneGap

3.2      Das Titanium-Modell

3.3      Das PhoneGap-Modell

3.4      SDKs, IDEs und ADTs

3.4.1   Entwicklungsumgebung für die iOS-Entwicklung einrichten

3.4.2   Entwicklungsumgebung für die Android-Entwicklung einrichten

3.4.3   PhoneGap installieren

3.5      iOS-Apps mit PhoneGap entwickeln

3.5.1   Den Projektaufbau erklären

3.5.2   App-Icon, App-Name, Splashscreen & Co.

3.5.3   jQuery Mobile einbinden

3.5.4   Mit PhoneGap und Xcode direkt auf einem iOS-Gerät testen

3.5.5   Native Funktionen mit PhoneGap ansprechen

3.6      Android-Apps mit PhoneGap entwickeln

3.6.1   App-Name, App-Icon & Co. ändern

3.6.2   jQuery Mobile einbinden

3.6.3   Native Funktionen von Android ansprechen

3.6.4   Abweichungen von iOS

4    Webanwendungen und native Apps veröffentlichen

4.1      Vertriebsmöglichkeiten für Web-Apps

4.2      iTunes App Store

4.2.1   Die App mit Xcode für den App Store vorbereiten

4.3      Google Play Store

4.3.1   App außerhalb des Google Play Store vertreiben

4.3.2   App im Google Play Store veröffentlichen

4.3.3   App im Google Play Store verkaufen

4.3.4   Andere Marktplätze

Stichwortverzeichnis

Einführung

Mit der Einführung des iPhones im Jahr 2007 hat sich die mobile Welt komplett geändert: Internetdienste werden von einer großen Masse wie selbstverständlich genutzt, und der mobile Markt hat sich, anstatt sich auf einer oder einigen wenigen Plattformen zu konsolidieren, in Höchstgeschwindigkeit weiter fragmentiert. Apple hat mit dem iPhone und iPhone OS ein Erfolgsmodell geschaffen und ein unvergleichliches Wettrennen der mobilen Plattformen ausgelöst.

Einige Jahre nach dem ersten iPhone haben wir folgende Situation: Die Verbindung von iPhone und iTunes hatte ein Verkaufsmodell für mobile Anwendungen geschaffen, das Hunderttausende von Anwendungen für die iOS-Plattform hervorgebracht hat und Entwickler begeistert. Microsoft, zwischenzeitlich schon in der mobilen Bedeutungslosigkeit verschwunden, hat nun mit Windows Phone 8 ein interessantes Betriebssystem auf den Markt gebracht, das sich bald auf allen Nokia-Geräten finden wird. Handy-Weltmarktführer Nokia hatte sich jahrelang auf seine Symbian-Plattform verlassen, die sich auch heute noch weltweit auf den meisten Handys befindet, jedoch nicht mehr mit den modernen mobilen Plattformen mithalten kann. Bevor sich Nokia entschied, mit Microsoft und Windows Phone 8 eine Ehe einzugehen, plante der Konzern, die mit Intel zusammen entwickelte MeeGo-Platform zu verwenden.

BlackBerry hat keine andere Plattform lizenziert, sondern setzt weiterhin auf sein eigenes System. Palm, mittlerweile von HP gekauft und schon vor einigen Jahren tot geglaubt, hat zahlreiche Apple-Designer und -Techniker abgeworden und mit Web OS ein unglaublich performantes und zukunftsweisendes mobiles Betriebssystem auf den Markt gebracht. Die Web-OS-Plattform wird derzeit auf Mobiltelefonen sowie Tablet-Computern von HP selbst benutzt, und es bleibt abzuwarten, wie sich diese Plattform entwickelt. Trotz dieser Plattformvielfalt gab Google im November 2007 bekannt, gemeinsam mit 33 Mitgliedern, der sogenannten Open Handset Alliance, ein weiteres mobiles Betriebssystem namens Android zu entwickeln. Ohne Zweifel ist Android das derzeit am schnellsten wachsende Betriebssystem und weltweit auf den meisten Telefonen zu finden.

Ohne die hausgemachten Systeme von Samsung, LG und anderen Herstellern, besonders aus dem asiatischen Raum, zu erwähnen, kommen wir mit Apple iOS, Android, Windows Phone 8, BlackBerry, Symbian, MeeGo, Web OS und mobilen Linux-Versionen auf acht verschiedene nennenswerte Handyplattformen.

Zur gleichen Zeit hat sich mit dem iPhone die Handynutzung verändert: Während man Telefone größtenteils zum Telefonieren, Verfassen von Textnachrichten oder zum Checken von E-Mails verwendete, wurde das iPhone als erstes Telefon serienmäßig mit einem Browser ausgeliefert, der einem Browser auf dem PC in nichts nachsteht. Mit dem App-Modell, aber auch der iTunes-Anbindung wurde der eingestaubte Markt von mobilen Anwendungen auf den Kopf gestellt. Ein Verkaufsargument für Handys ist heute nicht mehr nur der bessere Bildschirm oder die bessere Kamera, sondern auch die Art von Diensten, die ich auf dem Gerät bzw. der Plattform nutzen kann. Kann ich das Telefon mit iTunes verbinden und meine Musik synchronisieren? Kann ich meinen Facebook-Status aktualisieren, meine Fotos direkt auf Flickr laden und mit meinen Freunden und Bekannten direkt vom Telefon aus teilen? Wie viele Programme und auch Spiele gibt es eigentlich für mein Telefon?

Und hier beginnt genau das Problem für Handyhersteller, für Anwender und auch für Anbieter von Programmen und Diensten. Alle Plattformen außer derzeit iOS von Apple und Android von Google haben Probleme, im großen Rahmen Entwickler für ihre Plattform zu finden und zu begeistern. Wurden mobile Softwareentwickler vor ein paar Jahren noch kaum beachtet, so sind sie jetzt heiß umworbene Dienstleister. Alle Plattformanbieter betreiben einen riesigen Aufwand, um Entwickler davon zu überzeugen, mit ihrem System zu arbeiten und Programme und Dienste zu schreiben.

Gleichzeitig müssen sich Anbieter von Diensten und Programmierer die Frage stellen, auf welche Plattformen sie sich konzentrieren sollten. Alle Plattformen sind grundverschieden, und Code, der für das iPhone geschrieben wird, kann nicht einfach für Android, BlackBerry oder für Windows Phone 8 wiederverwendet werden. Die Entwicklung von mobilen Diensten ist für Firmen notwendig, auch wenn der mobile Markt viel verspricht, aber bislang nur wenig abwirft. Gleichzeitig ist die Entwicklung von mobilen Programmen sehr teuer, sollte von mobilen Softwarespezialisten vorgenommen werden und verursacht allein durch das Testen auf verschiedenen Telefonen hohe Kosten. Keine Firma wird so einfach bereit sein, gleichzeitig in alle acht Plattformen zu investieren, sondern sich höchstens zwei oder maximal drei unterschiedliche Versionen leisten. Doch es gibt Hoffnung: Neben großen, hochauflösenden Bildschirmen und tollen Kameras werden alle Handys in naher Zukunft eine Gemeinsamkeit aufweisen: unwahrscheinlich gute Webbrowser, die sich nach den neuesten Standards richten. Der neueste Webstandard, der mehr und mehr von den gängigen Webbrowsern unterstützt wird, ist HTML5.

Glücklicherweise wird sich HTML5 von der HTML4-Spezifikation insbesondere dadurch unterscheiden, dass sich mit der neuen Version Webdienste erstellen lassen, die nicht nur wie richtige Programme aussehen, sondern sich auch wie Programme verhalten können. Auf Inhalte einer Webseite kann auch dann zugegriffen werden, wenn keine Internetverbindung vorhanden ist, auf das Dateisystem kann vom Internetbrowser aus zugegriffen werden, und auch die aktuelle Position des Benutzers ist ab sofort für eine Internetseite kein Geheimnis mehr. Alle diese Funktionen konnten früher nur von richtigen Programmen, aber nie von Internetseiten verwendet werden.

Aufgrund der genannten Probleme und der starken Fragmentierung des mobilen Markts, jedoch auch wegen der herausragenden Möglichkeiten, die moderne mobile Webbrowser und der HTML5-Standard bieten, muss man annehmen, dass HTML5 insbesondere im mobilen Bereich einen enormen Einfluss nehmen wird.

Für Dienstanbieter ist das ein Glücksfall: Sie können auf vorhandene Webprogrammierer zurückgreifen, mit einer mobilen Webanwendung in HTML5 sicherstellen, dass sie einen sehr guten Dienst auf allen mobilen Plattformen anbieten, und sie können sich immer noch entscheiden, eine native Anwendung für beispielsweise den iPhone App Store oder den Google Play Store programmieren zu lassen. Das ist auch gar nicht schwer: Mittlerweile gibt es mit dem PhoneGap (www.phonegap.com) und dem Appcelerator Titanium Mobile (www.appcelerator.com) Technologien, die aus HTML5-Webanwendungen native Anwendungen für die gängigsten mobilen Plattformen bauen.

Insbesondere mit PhoneGap lassen sich im Handumdrehen richtige Anwendungen erstellen, die nicht nur in den App-Stores verkauft werden, sondern sich auch mit Funktionen bereichern lassen, die im Browser gar nicht zur Verfügung stehen. Die Bewegungssensoren, die Kamera, der Vibrationsalarm, der Kompass, das Adressbuch und vieles mehr lassen sich über ein paar simple JavaScript-APIs direkt vom PhoneGap-, HTML-, CSS- und JavaScript-Code aus steuern.

All diese Technologien und Ansätze möchten wir Ihnen auf den nächsten gut 300 Seiten vorstellen. Am Ende des Buchs haben Sie nicht nur ein umfassendes Wissen über HTML5, sondern auch das Zeug, Ihre erste iPhone-App oder Android-Anwendung in iTunes bzw. dem Google Play Store zu veröffentlichen.

Worum geht es?

Dieses Buch ist kein Programmierbuch im klassischen Sinne. Es gibt Ihnen einen Einblick in Designkonzepte von mobilen Webdiensten und hilft Ihnen, erste Webanwendungen mittels HTML, CSS und JavaScript zu erstellen. Diese Webanwendungen werden bereits ein richtiges »Look-and-feel«, wie man es auf Smartphones kennt, besitzen. Ein großer Teil des Buchs beschäftigt sich mit den neuen Funktionen und Möglichkeiten von HTML5 und zeigt diese im mobilen Kontext eindrucksvoll und verständlich anhand vieler Beispiele. Der letzte Teil des Buchs beschreibt Schritt für Schritt, wie Sie eine HTML5-Webanwendung in eine echte iPhone- oder Android-Anwendung umwandeln und dabei Telefonhardwarefunktionen wie die Kamera oder den Bewegungssensor eines iPhones oder Android-Smartphones ausnutzen. Abschließend erfahren Sie, wie Sie Ihre frisch gebaute Anwendung in den Apple Store und in den Google Play Store bekommen.

Die Twitter-Updates zum Buch

Folgen Sie @html5togo auf Twitter – http://twitter.com/html5togo –, um direkt von den Autoren des Buchs neueste Updates und interessante Artikel zum Thema HTML5 und Mobile zu erhalten und mit ihnen in Kontakt zu treten.

HTML5 – die Spezifikation und der aktuelle Stand

Streng genommen ist HTML5, das sich noch in der Entwicklung befindet, eine neue Version des HTML-Standards. Wie auch HTML4.1 und XHTML 1.1 ist HTML5 eine standardisierte Markup-Sprache, die dazu dient, Webinhalte zu strukturieren und zu präsentieren. Rein technisch gesehen, ist HTML5 aber eben HTML und nicht JavaScript und auch nicht CSS.

Doch die Masse versteht unter HTML5, speziell unter dem Begriff »HTML5 Web Apps«, etwas anderes. HTML5 ist zum Schlagwort einer (begrüßenswerten) Entwicklung geworden und beschreibt Anwendungen, die mit Webstandards, also HTML, CSS und JavaScript, geschrieben werden und in den Browsern auf unterschiedlichen Plattformen laufen. HTML5 steht für Webseiten, die sich wie Anwendungen anfühlen, wie Anwendungen gestartet werden können und weit in den Bereich nativer Anwendungen vordringen. Wir versuchen in diesem Buch, die richtige Balance zu finden zwischen neuen Funktionen, die sich wirklich auf HTML5 als Markup-Sprache beziehen, und den Möglichkeiten, die durch eine Vermischung von HTML, JavaScript und CSS entstehen und eben auch als »HTML5« bezeichnet werden.

Auch wenn Sie überall schon von HTML5 hören, heißt das noch nicht, dass die neue Version des HTML-Standards bereits fertig ist. Im Gegenteil: HTML5 ist derzeit noch in der Phase des »Working Draft« – also des Stadiums, in dem immer noch aktiv an der Definition der Sprache gearbeitet wird. Allerdings werden nicht alle Komponenten, also nicht alle Tags gleichzeitig bearbeitet, und bestimmte Teile der Sprache sind bereits weiter vorangeschritten als andere. Komponenten wie beispielsweise das canvas-Tag sind sehr stabil und nahezu »fertig«, während andere Teile der Sprache noch gar nicht definiert wurden.

Der Entwicklungszyklus einer neuen HTML-Definition bewegt sich im Bereich von 20 Jahren. Mit der HTML5-Spezifizierung wurde 2004 unter dem Namen »Web Applications 1.0« begonnen, und es wird derzeit erwartet, dass die Sprache im Jahr 2022 die offizielle W3C-Empfehlung erhalten wird. Zum Vergleich: Die derzeit gültige HTML5-Spezifikation wurde Mitte der 90er-Jahre begonnen.

Nun sollten Sie auf keinen Fall bis 2022 warten, sondern die Möglichkeiten von HTML5 und den oft in einem Atemzug genannten Technologien JavaScript und CSS schon heute nutzen. HTML5 ist bereits da, wird aber in der Zukunft noch wesentlich umfangreicher und von mehr Plattformen und Browsern unterstützt werden, als es heute der Fall ist. Die hier im Buch vorgestellten HTML5-Methoden sind schon größtenteils von den führenden mobilen Plattformen implementiert, ganz vorn sind natürlich iOS und Android, mit dabei sind auch BlackBerry OS 6 und Windows Phone 8.

Lesezeichen

http://dev.w3.org/html5/spec/
Offizielle HTML5-Spezifikation: In diesem Buch wird die offizielle HTML5-Spezifikation immer in einem mobilen Umfeld betrachtet. Interessieren Sie sich für die komplette Spezifikation, finden Sie sie hier.

Webanwendung vs. native Anwendung

Bereits weiter oben wurde häufig von einer Webanwendung und einer »richtigen« nativen Anwendung gesprochen. Auch wenn HTML5 die Grenzen und Möglichkeiten zwischen einem richtig programmierten Programm und einer Webseite verschwimmen lässt, so gibt es doch einige nennenswerte Unterschiede, die zu bedenken sind.

Native Anwendung

Unter einer nativen Anwendung versteht man ein Programm, das nicht im Browser des Telefons (oder eines Computers) läuft, sondern als eigenständiges Programm auf das Gerät geladen wurde und ein richtiges Computerprogramm darstellt. Native Anwendungen haben in der Regel einen besseren Zugriff auf Systemfunktionen, wie beispielsweise die Kamera eines Handys oder Bewegungssensoren, können Rechenoperationen viel schneller ausführen und die Grafikmöglichkeiten eines Systems wesentlich besser ausnutzen. Sämtliche Spiele, die auf schnelle Grafikroutinen angewiesen sind, werden als native Anwendungen erstellt.

Diese Anwendungen haben gegenüber Webanwendungen nicht nur auf der technischen Seite Vorzüge, sondern bieten einen riesigen Vorteil: Man kann sie in die App-Stores der verschiedenen Plattformanbieter einstellen. Distribution ist das Zauberwort!

Eine native Anwendung kann beispielsweise im iPhone App Store eingestellt, beworben und vertrieben werden. Benutzer müssen nicht umständlich im Internet nach ihrer mobilen Webseite suchen, sondern finden ein fertiges Programm zum Installieren in iTunes oder im App Store des iPhones. Die Wahrscheinlichkeit, dass ein Kunde Ihren Dienst in einem App Store entdeckt, ist wesentlich höher, als wenn er bei Google oder Yahoo! danach sucht. Ein zusätzlicher Bonus: Nach dem Hinzufügen ist das Programm direkt auf dem Home-Bildschirm des iPhones oder Android-Handys verewigt.

Dies alles klingt gut, und Sie werden sich jetzt vielleicht fragen, warum Sie sich kein Buch zur iPhone-Programmierung mit Objective-C gekauft haben, doch leider ist nicht alles so einfach:

•   Der Aufwand, eine native Anwendung zu erstellen, ist pro Plattform immens hoch. Zwar kann es Ihnen gelingen, auf einer Plattform eine hohe Reichweite Ihrer Anwendung und Ihres Angebots zu erreichen, allerdings bedienen Sie nur eine von vielen Plattformen.

•   Bevor Ihre Anwendung in einem der bekannten App-Stores erscheint, muss sie einen Genehmigungsprozess bestehen. Dies gilt nicht nur, wenn Ihre Anwendung erstmalig eingestellt wird, sondern der Prozess muss bei jeder Aktualisierung wiederholt werden.

Der Genehmigungsprozess, insbesondere um in den iPhone App Store zu kommen, wurde in der Presse schon oft heiß diskutiert. Selbst Internetgrößen wie Google wurde der Eintritt in den Store beispielsweise mit der Google-Voice-Anwendung verwehrt. Interessanterweise hat sich Google damit beholfen, eine Webanwendung mit HTML5 – www.youtube.com/watch?v=neiOa38DuqI – zu erstellen, die fast identische Funktionen wie die eigentliche native Anwendung auf das iPhone bringt.

Warum eine App bei Apple abgelehnt wurde, wird in der Regel auch nicht sehr detailliert begründet. Wie bereits gesagt, eine Überprüfung ist sogar bei jeder neuen Programmversion erforderlich. Wenn Ihre Anwendung beispielsweise einen Fehler enthält, kann dieser nicht einfach wie bei einer Webseite sofort behoben werden, stattdessen müssen Sie ein neues Anwendungspaket bauen, dieses Paket auf verschiedenen Telefonen testen, es an Apple oder einen anderen Betreiber des App Store übermitteln, auf das Testergebnis warten, gegebenenfalls nachbessern und dann hoffen, dass die Anwendung zum Verkauf bzw. Download freigegeben wird.

Eine weitere Einschränkung, insbesondere wenn Sie eine native iPhone-Anwendung erstellen möchten: Sie müssen einen Apple-Rechner besitzen, Objective-C lernen und Apple für die Aufnahme als Entwickler bezahlen. Bei der Entwicklung einer App für Windows Phone 8 ist es genau andersherum: Ohne PC mit Windows geht ebenfalls nichts.

Webanwendung

Im Gegensatz zu einer nativen Anwendung braucht eine Webanwendung ein anderes Programm zur Ausführung: den Browser. Daher ist die Webanwendung auch nur so gut wie der Browser, in dem sie läuft. Funktionen, die der Browser nicht weitergeben kann, beispielsweise den Zugriff auf die Kamera eines Handys, kann demzufolge eine reine Webanwendung auch (noch) nicht nutzen.

Den Vorteil, dass eine Webanwendung über einen App-Store verbreitet und sichtbar gemacht werden kann, besitzt leider auch die native Anwendung. Insbesondere wenn Sie einen kostenpflichtigen Dienst bzw. eine Anwendung anbieten möchten, müssen Sie bei einer Webanwendung eine für Sie und den zukünftigen Kunden recht umständliche Zahlungsabwicklung implementieren, während die Kreditkarte des Kunden bei iTunes und einer nativen Anwendung quasi einen Klick entfernt ist.

Dennoch: Mit immer mehr Browsern, unabhängig vom Betriebssystem, die die neuesten Standards, wie beispielsweise HTML5 und CSS 3 unterstützen, kann eine Webanwendung auf allen mobilen Plattformen laufen und Nutzer erreichen, egal ob diese ein iPhone, ein Android-Handy, ein Web-OS-Tablet oder ein Nokia-Telefon benutzen. Webseiten sind in der Regel viel einfacher und günstiger zu programmieren als native Programme. Viele Firmen beschäftigen bereits Heerscharen von Webentwicklern, die HTML, CSS und JavaScript beherrschen.

Wie jede andere Webseite im Internet muss eine Webanwendung auch keine Genehmigungsprozedur durchlaufen, bevor sie auf einem mobilen Gerät angewendet werden kann. Der Webseitencode wird in das Internet gestellt und ist sofort weltweit auf jedem Gerät mit einem geeigneten Browser verfügbar. Sie müssen keine Zertifizierungsgebühr bezahlen, keine zusätzliche Software kaufen, keine komplette Entwicklungsumgebung erlernen und können Aktualisierungen Ihrer Webanwendung in Sekundenschnelle weltweit veröffentlichen.

Warum nicht beides?

Dieses Buch zeigt Ihnen auf, wie Sie eine moderne mobile Webanwendung mit HTML5, CSS und JavaScript erstellen, die sich in vielen Punkten bereits im Browser wie eine richtige »native« Anwendung verhalten kann. Gleichzeitig wird Ihnen gezeigt, wie Sie aus dieser Web-App eine richtige »native« Anwendung für den iPhone App Store und den Google Play Store bauen können.

Das gibt Ihnen die Freiheit, Dienste zu erstellen, die für jedermann erreichbar sind, verbaut Ihnen aber nicht die Chance, mit der gleichen Anwendung auch in einen der App-Stores zu gelangen und dort bekannt zu werden. Idealerweise können Sie eine umfassende Webanwendung bauen, die Sie ständig (ohne umständliche Genehmigungen) aktualisieren, ausbauen und einen Teil als native App in verschiedene Stores stellen können.

Wer sollte das Buch lesen?

Das Buch richtet sich an alle, die sich für neuartige Webanwendungen für den mobilen Markt interessieren oder sich dort bereits bewegen und aus mobilen Webseiten leistungsfähige native Anwendungen erstellen möchten. Sie finden im Buch allerhand Codebeispiele, doch es richtet sich nicht nur an Entwickler, sondern auch an Produktmanager, Designer, Vordenker, Entrepreneurs und alle anderen, die sich mit dem neuesten Trend im mobilen Bereich auseinandersetzen möchten. Entwickler werden an dem Buch ebenfalls ihre Freude haben, da es einerseits ein Verständnis für den mobilen Markt außerhalb der Technik vermittelt und andererseits geballte HTML5-Beispiele auflistet, die helfen, mobile Seiten mit einer Funktionsfülle auszustatten, die bisher nur von »richtigen« Anwendungen bekannt waren.

Besonders tiefe Vorkenntnisse im Bereich der Programmierung setzt dieses Buch nicht voraus. Natürlich sollten Sie wissen, wie man einfache Webseiten baut und woraus sie bestehen. Begriffe wie HTML, CSS und JavaScript sollten Ihnen geläufig sein – Sie müssen sie aber nicht bis ins letzte Detail verstehen, um das Buch zu lesen.

Das Ziel des Buchs ist es, Ihnen die verschiedenen Möglichkeiten aufzuzeigen, die heutzutage mit HTML5 auf mobilen Geräten machbar sind und, falls Sie das auch noch interessiert, wie Sie sie nutzen können. Es vermittelt Ihnen einen Überblick über den mobilen Markt mit seinen Schwierigkeiten und Vorzügen, es zeigt Ihnen auf interessante Art und Weise, wie Sie möglichst viele mobile Plattformen mit wenig Aufwand abdecken und dazu noch in den wichtigen App-Stores wie dem iPhone App Store und dem Google Play Store vertreten sein können.

Wenn Sie noch tiefer in die Welt von HTML, CSS und JavaScript vordringen oder sich eingehender mit der nativen App-Entwicklung für mobile Plattformen oder mit mobilen Konzepten beschäftigen wollen, empfehlen wir Ihnen die Lektüre der folgenden Bücher, Blogs und Podcasts.

Lesezeichen

http://bit.ly/d8467s
Webseitenlayout mit CSS: Das neue und sehr aktuelle CSS-Buch aus dem Franzis Verlag führt den Leser an CSS heran und berücksichtigt die neueste CSS-3-Spezifikation.

Lesezeichen

http://www.franzis.de
HTML-Handbuch: Ganze Generationen von Webentwicklern sind mit der fabelhaften Webseite selfhtml.org aufgewachsen. Die Standardreferenz im Internet ist auch als Buch erhältlich.

Lesezeichen

http://css-tricks.com/
Das englischsprachige Blog berichtet in regelmäßigen Abständen über CSS-Tipps und zeigt diese anhand von Live-Beispielen und Videos. Ein großer Teil der dort vorgestellten Themen dreht sich um den Einsatz von CSS in der mobilen Webentwicklung.

Danksagung

Bevor es jetzt richtig losgeht, möchten wir uns als Autoren bei einigen Menschen bedanken, ohne die dieses Buch nicht entstanden wäre: zuallererst bei unseren Familien – insbesondere bei meiner Frau Alexandra, die von mir während der Monate vor dem Rechner nicht viel hatte und mich dennoch unterstützt hat. Des Weiteren geht unser Dank an die beiden Vorautoren Markus Spiering und Sven Haiges, die mir eine unglaublich gute Basis für diese dritte Auflage erstellt hatten, Ross Harmes, der das wunderbare Flickr-Geo-Fotobeispiel zum Buch beigesteuert hat, an unseren Verleger für die aufgebrachte Geduld, die netten Kollegen vom Yahoo! Editorial Board, die ebenfalls an der Entstehung des Buchs mitarbeiteten, an Matteo Spinelli von cubiq.org, mit dem wir an einigen CSS-/JavaScript-Beispielen im Buch gearbeitet haben, sowie an jeden, der uns geholfen hat, die Beispiele im Buch zu testen, und die zeitlichen Möglichkeiten gegeben hat, dieses Buch zu schreiben.

Was wird benötigt?

Außer dem Buch, das Sie glücklicherweise schon in Ihren Händen halten, brauchen Sie nicht viel: etwas Zeit, einen Texteditor und einen modernen Browser. Das ist wirklich die Mindestausstattung. Obwohl das ein Buch über mobile Technologien ist, brauchen Sie theoretisch nicht unbedingt ein internetfähiges Telefon. Wie gesagt, »theoretisch« – denn eigentlich würden wir Ihnen entweder ein iPhone, iPad, iPod touch oder ein Smartphone mit Android-Betriebssystem zum Testen Ihrer mobilen Webseiten oder ein anderes Mobiltelefon mit einem halbwegs guten Browser empfehlen.

Wie gesagt: Alle Schritte lassen sich auch auf einem normalen Computer abbilden – ein Telefon ist nicht vonnöten! Wenn Sie aber wissen wollen, wie sich Ihre Webseite und dann auch Ihre mobile Anwendung wirklich »anfühlen«, kommen Sie um ein Handy zum Testen nicht herum. Den größten Unterschied werden Sie wahrscheinlich in der Geschwindigkeit merken: Ist auf dem Desktoprechner dank Hochgeschwindigkeitsinternet und Rechenpower alles superschnell, muss man beim Design sowie der Programmierung von mobilen Seiten sehr auf die Datengrößen achten, ansonsten kann es auf einem Telefon oft zu langwierigen und für den Benutzer sehr unschönen Ladezeiten kommen.

Eine mobile Webseite können Sie auf Ihrem Computer erstellen und dort auch testen. Möchten Sie jedoch die Seite auf einem Telefon testen bzw. Ihre Webseite gegebenenfalls auch ins Internet stellen, kommen Sie um etwas Speicherplatz im Internet, sogenannten Webspace, nicht herum. Eine Suche bei Google oder Yahoo! nach »Webspace Anbieter« wird Ihnen eine ganze Liste offenbaren. Wir haben viel mit dem Anbieter 1&1 (www.1und1.de) in Deutschland gearbeitet und können ihn sehr empfehlen.

Für eine iPhone-, iPod touch- oder iPad-Anwendung

Wenn Sie aus Ihren mobilen Webseiten eine iOS-Anwendung für den App Store erstellen möchten, benötigen Sie einen Mac, also einen Rechner von Apple mit dem Mac-OS-X-Betriebssystem. Das ist nicht etwa der Sonderbehandlung geschuldet, dass wir aus einer Webseite eine Anwendung generieren – selbst wenn Sie über den herkömmlichen Weg unter Benutzung von Xcode und dem iPhone-SDK eine iPhone-Anwendung programmieren möchten, müssen Sie das immer auf einem Mac tun.

Für eine Android-Anwendung

Eine Android-Anwendung für Telefone mit diesem Betriebssystem können Sie auch auf einem PC mit Windows-Betriebssystem erstellen. Sie haben auch die Möglichkeit, einen Mac oder einen Rechner mit Linux-Betriebssystem zu benutzen.

Welcher Browser?

Nicht nur der mobile Browsermarkt, sondern auch das Desktopbrowserangebot ist sehr reichhaltig. Da HTML5 zum Erscheinungszeitpunkt dieses Buchs wirklich eine brandneue Technologie ist, haben einige Browser noch nicht alle Bestandteile des neuen HTML-Standards integriert.

Safari

Sehr empfehlenswert für das Testen von mobilen Seiten ist die Installation von Safari – dem Browser aus dem Hause Apple. Apple hat in Bezug auf HTML5-Kompatibilität Standards gesetzt und auch aktiv an HTML5 und CSS mitgearbeitet.

Das iPhone nutzt exakt die gleiche Safari-Technologie auf dem Telefon, wie sie auch in der Desktopversion des Browsers verwendet wird. Es kommt aber noch besser: In Safari kann man über die Programmeinstellungen ein Extramenü für Entwickler freischalten und sogar den User-Agent (quasi den Erkennungscode des Browsers) auf den eines iPhones oder iPods umschalten.

Die versteckte, aber nützliche Entwickler-Option in Safari unter Einstellungen/Erweitert.

Gehen Sie dazu in das Safari-Menü, rufen Sie dort das Dialogfenster Einstellungen auf und klicken Sie erst auf Erweitert und dann auf das Zahnradsymbol. Im darauffolgenden Fenster sehen Sie die Option Menü »Entwickler« in der Menüleiste anzeigen, die Sie einfach markieren. Im Menü Entwickler finden Sie die entsprechenden Optionen unter dem Punkt User Agent. Aber auch andere hilfreiche Funktionen, wie beispielsweise der Safari Web Inspector (Webinformationen einblenden), sind dort versteckt, auf die wir später noch zurückkommen.

Firefox

Wesentlich verbreiteter als Safari ist Firefox, ein ebenfalls kostenloser Browser, der der Open-Source-Gemeinde entstammt und nach dem Internet Explorer der meistgenutzte Browser in Deutschland ist. Wie Safari ist Firefox führend in der Aktualität, wenn es um die neuen HTML5-Funktionen geht. Wenn Sie sich ausschließlich um das iPhone sorgen, sind Sie mit Safari besser bedient – falls es Ihnen auch um andere mobile Betriebssysteme geht, sollten Sie sich auf jeden Fall Firefox installieren und zum Testen benutzen.

Ein weiterer Vorteil von Firefox ist die Menge an erhältlichen Erweiterungen. Was im Safari-Browser über das Entwickler-Menü bewerkstelligt werden kann, ist bei Firefox über die sogenannten Add-ons – https://addons.mozilla.org/de/firefox/ – möglich. Zwei Erweiterungen, die ich zumindest schon einmal nenne, später auch noch näher vorstellen möchte, sind »User Agent Switcher« und »Firebug«. Safari bietet seit der Version 5 sogenannte Extensions und ist somit ähnlich erweiterbar wie Firefox, doch das Angebot der Safari-Extensions ist gegenüber Firefox noch erheblich eingeschränkt.

Google Chrome

Die meisten Dinge, die wir über Safari und Firefox gesagt haben, gelten auch für Google Chrome: Der Browser ist in Sachen HTML5-Unterstützung up to date und bietet wie Safari zahlreiche Funktionen, die das Entwicklerleben einfacher machen.

Internet Explorer

Ein Browser, der schon fast traditionell den neuesten Entwicklungen hinterherhängt, ist der Internet Explorer. Falls Sie noch die alte Version 6 des Internet Explorers besitzen, sollten Sie schnellstmöglich zur Microsoft-Seite eilen und sich die neueste Version besorgen. Viele Firmen, unter anderem Google, haben bereits die offizielle Unterstützung für diese Browserversion beendet. Für den Kontext dieses Buchs und derzeit für mobile Webentwicklung im Allgemeinen möchten wir vom Internet Explorer bis zur der Version 8 abraten. Der Internet Explorer 9 versteht dagegen bereits Elemente von HTML5 und unterstützt CSS 3.

Welcher Texteditor?

Neben einem guten Browser ist ein Texteditor das wichtigste Werkzeug in der Webentwicklung. Vor dem Texteditor werden Sie die meiste Zeit verbringen, und ein guter Editor kann Ihnen helfen, den Überblick über Ihren Code zu behalten. Allerdings heißt es hier wie so oft: Weniger ist mehr. Texteditoren, die Ihnen erlauben, den Text schön zu formatieren, wie beispielsweise Microsoft Word, erzeugen Dateien, die Sie nicht für Webseiten nutzen können.

Für Windows-User gibt es eine ganze Schar an guten und kostenlosen Programmen, die sich hervorragend zur Webentwicklung eignen. Ich möchte den auch in Deutsch erhältlichen Editor ConTEXT (www.contexteditor.org) hervorheben, der HTML, CSS und JavaScript versteht, Sie auf Syntaxfehler aufmerksam macht und den Code übersichtlich darstellt.

Für Mac-Benutzer empfiehlt sich der kostenlose Editor TextWrangler (www.barebones.com/products/textwrangler). Das Programm ist sehr stabil, hilft bei der Codeformatierung und kann Änderungen am Webseitencode auch gleich auf Ihren Webserver speichern.

Mein Lieblingseditor und auch der fast aller Webentwicklerkollegen ist TextMate auf dem Mac. Das Programm ist simpel gehalten, hilft bei der Darstellung der verschiedenen HTML-Tags und lässt sich sogar in die Apple-Entwicklungsumgebung Xcode integrieren. TextMate (www.macromates.com) kann 30 Tage kostenlos getestet werden, kostet dann allerdings knapp 40 Euro. TextMate arbeitet auch vorzüglich mit dem FTP-Programm Cyberduck zusammen. Dateien können direkt aus Cyberduck heraus mit TextMate bearbeitet und wieder auf den Webserver gespeichert werden.

Welches FTP-Programm?

Falls Sie Ihre Webseiten auf einem Telefon testen oder veröffentlichen möchten, muss Ihr frisch geschriebener Code von Ihrem Computer in das Internet, sprich auf den Webserver oder Webspace, gelangen. Das gelingt Ihnen in der Regel mit einem sogenannten FTP-Programm, einer Software, die Dateien von Ihrem lokalen Rechner in das Internet über das File Transfer Protocol verschieben kann. Meistens sind FTP-Programme so aufgebaut, dass Sie auf der einen Seite ein Fenster mit dem Inhalt Ihrer Festplatte sehen und auf der anderen Seite den Inhalt des Webservers, ebenfalls als Dateistruktur. Dateien können so dann ganz einfach und unkompliziert hin- und hergeschoben werden.

Für Windows-Benutzer empfiehlt sich die kostenlose Software WinSCP – www.winscp.net/eng/docs/lang:de. Das Programm ähnelt sehr der Oberfläche des Windows Explorers. Es dürfte auf die meisten Windows-Benutzer daher sehr vertraut wirken. Mac-Anwender, die TextWrangler benutzen, brauchen sich um keine zusätzliche Software zu sorgen, da die FTP-Funktion bereits im Programm eingebaut ist. Wer einen anderen Texteditor auf dem Mac benutzt, dem sei das Sharewareprogramm Cyberduck – http://cyberduck.ch/ – empfohlen.

Aus Cyberduck heraus können HTML-Dateien direkt mit TextWrangler bearbeitet und unmittelbar auf den Server zurückgespeichert werden.

Download der Beispiele

Wir haben zahlreiche Beispiele für Sie erstellt – von der einfachen HTML-Seite bis zu komplexeren Web-Apps – und den Code im Buch veröffentlicht. Doch keine Sorge: Das Abtippen des Codes können Sie sich sparen, da alle Beispiele auf der unten aufgeführten Website zum Download zur Verfügung stehen.

Download

http://www.buch.cd
Hier finden Sie den Code zu allen im Buch besprochenen Beispielen. Von hier aus lassen sich die mobilen Web-Apps auch auf Ihrem iPhone, iPod, Android-Telefon oder Web OS-Palm ausprobieren.

1   Mobile Designprinzipien

Bevor wir uns an das Programmieren einer mobilen Webseite machen, möchten wir auf einige Designgrundlagen für das mobile Anwendungs- und Webdesign aufmerksam machen. Das Design einer mobilen Seite oder Anwendung kann in vielen Punkten als komplexer angesehen werden als das Webdesign einer Desktopseite. Auf folgende Herausforderungen werden Sie stoßen, wenn Sie mobile Produkte erstellen:

•   Der Bildschirm ist wesentlich kleiner.

•   Der Benutzer bedient die Anwendung mit dem Finger bzw. einem Stift, nicht mit der Maus.

•   Die Texteingabe ist selbst bei High-End-Telefonen immer noch keine Freude.

•   Der Benutzer hat unterwegs andere Anforderungen an eine Anwendung oder Webseite als zu Hause oder bei der Arbeit am PC.

•   Trotz UMTS, LTE und anderer Technologien ist das mobile Internet nicht beständig schnell, ein Nutzer kann sogar in Gebiete ohne Netzempfang kommen.

Um diese Probleme so gut wie möglich zu lösen, sollten Sie beim Anwendungsdesign einer mobilen Anwendung auf folgende Dinge achten:

•   Machen Sie sich am Anfang Ihres Konzepts klar, was Ihr zukünftiger Benutzer für Vorteile hat, wenn er Ihre Anwendung unterwegs benutzt. Was könnte die Hauptnutzung, der hauptsächliche sogenannte »Use Case«, Ihrer Anwendung sein?

•   Eine mobile Anwendung wird wahrscheinlich nicht erfolgreich sein, wenn sie unterwegs keinen Sinn ergibt oder die Funktionen, die für die Benutzung unterwegs wenig sinnvoll sind, gegenüber anderen Funktionen heraushebt.

•   Nicht alle Inhalte eignen sich für die mobile Nutzung: Große Grafiken oder extrem lange Texte sind ungeeignet, verursachen lange Ladezeiten oder passen nicht in das Design für kleine Bildschirme. Versuchen Sie, angepasste Inhalte zu verwenden.

•   Wenn nicht der falsche Use Case oder Designansatz den Erfolg einer mobilen Anwendung »killt«, dann ist es die fehlende Geschwindigkeit. Der mobile Benutzer ist in der Regel viel ungeduldiger und erwartet – insbesondere von einer Seite oder Anwendung, die für die mobile Nutzung optimiert ist – auch eine optimierte Geschwindigkeit.

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!