Einführung

Mit der Einführung des iPhone 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 eine oder einige wenige 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 hat ein Verkaufsmodell für mobile Anwendungen geschaffen, das Hunderttausende von Anwendungen für die iOS-Plattform hervorgebracht hat und Entwickler begeistert. Microsoft war mittlerweile schon in der mobilen Bedeutungslosigkeit verschwunden, hat aber mit Windows Phone 7 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 kann diese nicht mehr mit den modernen, mobilen Plattformen mithalten. Bevor Nokia sich entschied, mit Microsoft und Windows Phone 7 eine Ehe einzugehen, plante der Konzern die mit Intel zusammen entwickelte MeeGo-Plattform zu verwenden. BlackBerry hat keine andere Plattform lizenziert, sondern setzt weiterhin auf sein eigenes System. Palm, mittlerweile von HP gekauft, schon vor einigen Jahren tot geglaubt, hat zahlreiche Apple-Designer und Techniker abgeworben und mit webOS ein unglaublich performantes und zukunftsweisendes mobiles Betriebssystem auf den Markt gebracht. Die webOS-Plattform wird derzeit auf Mobiltelefonen und Tablet-Computern von HP selbst benutzt und es bleibt abzuwarten, wie sich diese Plattform entwickeln kann. 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 wird demnächst auf den weltweit meisten Telefonen zu finden sein.

Ohne die hausgemachten Systeme von Samsung, LG und anderen Herstellern, besonders aus dem asiatischen Raum, zu erwähnen, kommen wir mit dem Apple iOS, Android, Windows Phone 7, BlackBerry, Symbian, MeeGo, webOS 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 dem eines Browsers auf dem PC in nichts nachsteht, und mit dem App-Modell und der iTunes-Anbindung hat das iPhone den angestaubten 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, welche Art von Diensten man auf dem Gerät bzw. der Plattform nutzen kann. Kann man das Telefon mit iTunes verbinden und 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 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. Waren Softwareentwickler für mobile Plattformen 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 oder für Windows Phone 7 wiederverwendet werden. Die Entwicklung von mobilen Diensten ist für Firmen notwendig, da 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 an die 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 HTML 4-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 die aktuelle Position des Benutzers ist ebenfalls 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.

Mit den genannten Problemen und der starken Fragmentierung des mobilen Markts, aber auch durch die herausragenden Möglichkeiten, die moderne, mobile Webbrowser und der HTML5-Standard bieten können, muss man annehmen, dass insbesondere im mobilen Bereich HTML5 einen enormen Einfluss nehmen wird.

Für Dienstanbieter ist dies 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 Android Market programmieren zu lassen. Und das ist auch gar nicht schwer: Mittlerweise 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 im Handumdrehen richtige Anwendungen erstellen, die sich nicht nur in den App Stores verkaufen, sondern 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ätzen möchten wir Ihnen auf den nächsten gut 380 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 Android Market zu veröffentlichen.

Worum geht es hier?

Dieses Buch ist kein Programmierbuch im klassischen Sinn. 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 »iPhone-Look & Feel« 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 an vielen Beispielen. Der letzte Teil des Buchs beschreibt Schritt für Schritt, wie Sie eine HTML5-Webanwendung in echte iPhone- oder Android-Anwendungen 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 dann auch in den Apple Store und in den Android Market bekommen.

Die Twitter-Updates zum Buch

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

HTML5 – die Spezifikation und der aktuelle Stand

Streng genommen ist HTML5 die noch in Entwicklung befindliche neue Version des HTML-Standards. Wie auch HTML 4.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 reichen. 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 die 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 »Working Draft«-Phase, einem Stadium, 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 HTML4-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 bereits größtenteils von den führenden mobilen Plattformen implementiert, ganz vorn dabei natürlich iOS und Android, aber auch BlackBerry OS 6.

Lesezeichen

http://dev.w3.org/html5/spec/

Offizielle HTML5-Spezifikation: In diesem Buch wird die offizielle HTML5-Spezifikation immer in einem mobilen Umfeld betrachtet. Falls Sie sich für die komplette Spezifikation interessieren, 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 ist. 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 durchlaufen. 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 nicht sehr detailliert begründet. Wie bereits gesagt, ist eine Überprüfung sogar bei jeder neuen Programmversion erforderlich. Wenn Ihre Anwendung beispielsweise einen Fehler enthält, kann er 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 Windows Phone 7-App ist es ähnlich: 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 sie ein iPhone, ein Android-Handy, ein webOS-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 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 geeignetem 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, und zeigt Ihnen gleichzeitig, wie Sie aus dieser Web App eine richtige »native« Anwendung für den App-Store und den Android Market bauen können.

Das gibt Ihnen die Freiheit, Dienste zu erstellen, die von jedermann erreichbar sind. Ihnen ist aber die Chance nicht verbaut, 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 (und ohne umständliche Genehmigungen) aktualisieren und ausbauen und von der Sie einen Teil der Webanwendung als native App in die verschiedenen 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 richtet es 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 auch ihre Freude haben, da es zum einen Verständnis für den mobilen Markt außerhalb der Technik vermittelt und zum anderen geballte HTML5-Beispiele auflistet, die helfen, mobile Seiten mit einer Funktionsfülle auszustatten, die bisher nur von »richtigen« Anwendungen bekannt war.

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 dieses Buch zu lesen.

Das Ziel dieses Buchs ist, 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 es machen können. Es vermittelt Ihnen einen Überblick über den mobilen Markt mit seinen Schwierigkeiten und Vorzügen und 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 Android Market vertreten sein können.

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

Lesezeichen

http://bit.ly/d8467s

Webseitenlayout mit CSS: Das aktuelle CSS-Buch aus dem Franzis Verlag führt den Leser an CSS heran und berücksichtigt die neueste CSS 3-Spezifikation.

Lesezeichen

http://bit.ly/doTIti

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 behandelt den Einsatz von CSS in der mobilen Webentwicklung.

Lesezeichen

http://bit.ly/a5S2Ky

JavaScript und Ajax: Wenn Sie tiefer in die JavaScript-Materie eintauchen wollen, sei Ihnen dieses Buch empfohlen. Anhand konkreter Programmierbeispiele erlernen Sie die Grundlagen bis hin zu den fortgeschrittenen Techniken von JavaScript und AJAX.

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 unseren Frauen Stefanie und Sandra –, die von uns während der Monate vor dem Rechner nicht viel hatten und uns dennoch unterstützten und uns mit viel Espresso wach hielten. Des Weiteren geht unser Dank an:

Ross Harmes, der das wunderbare Flickr-Geo-Fotobeispiel zum Buch beigesteuert hat, unserem 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, und 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 dies 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ühlt«, kommen Sie um ein Handy zum Testen nicht herum. Den größten Unterschied werden Sie wahrscheinlich in der Geschwindigkeit merken: Ist auf dem Desktop-Rechner dank Hochgeschwindigkeitsinternet und Rechenpower alles superschnell, muss man beim Design und 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 zwar 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 auch 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 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. Alternativ können Sie einen Mac oder einen Rechner mit Linux-Betriebssystem benutzen.

Welcher Browser?

Nicht nur der mobile Browsermarkt, sondern auch das Desktop-Browserangebot 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 auf Erweitert und 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 dann die entsprechenden Optionen unter dem Punkt User Agent. Aber auch andere hilfreiche Funktionen, wie beispielsweise der Safari Web Inspector (Webinformationen einblenden), auf die wir später noch zurückkommen, sind dort versteckt.

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 aber auch um andere mobile Betriebssysteme geht, sollten Sie auf jeden Fall Firefox installieren und zum Testen benutzen.

Ein weiterer Vorteil von Firefox ist die Menge an erhältlichen Erweiterungen. Was Sie im Safari-Browser über das Entwickler-Menü bewerkstelligen können, ist bei Firefox über die sogenannten Add-ons – https://addons.mozilla.org/de/firefox/ – möglich. Zwei Erweiterungen, die ich zumindest schon nennen, später aber noch näher vorstellen möchte, sind »User Agent Switcher« und »Firebug«. Safari bietet in der neuesten 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 besitzt wie Safari zahlreiche Funktionen, die das Entwicklerleben einfacher machen.

Internet Explorer

Ein Browser, der schon fast traditionell den neuesten Entwicklungen hinterherhinkt, ist der Internet Explorer. Falls Sie noch die alte Version 6 des Internet Explorer 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 Version 8, abraten. Der Internet Explorer 9 versteht allerdings 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 es 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 auch 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 direkt auf dem Webserver wieder gespeichert werden.

Welches FTP-Programm?

Falls Sie Ihre Webseiten auf einem Telefon testen oder auch veröffentlichen möchten, muss Ihr frisch geschriebener Code von Ihrem Computer in das Internet, sprich auf Ihren 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. In der Regel sind FTP-Programme so aufgebaut, dass Sie auf der einen Seite ein Fenster mit dem Inhalt Ihrer Festplatte und auf der anderen Seite den Inhalt Ihres Webservers ebenfalls als Dateistruktur sehen. Dateien können dann einfach 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 und dürfte für 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 – www.cyberduck.de – empfohlen.

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

Upload complete – mit dem kostenlosen Programm Growl – www.growl.info – sehen Sie über eine kleine Bildschirmmeldung auf einen Blick, dass die Dateien auf den Server hochgeladen sind und Sie mit dem Testen beginnen können.

Download der Beispiele

Wir haben zahlreiche Beispiele für Sie erstellt – von der einfachen HTML-Seite bis hin 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 aller im Buch besprochenen Beispiele. Von hier aus lassen sich die mobilen Web Apps auch auf Ihrem iPhone, iPod, Android-Telefon oder webOS-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 als das Webdesign einer Desktopseite angesehen werden. Auf folgende Herausforderungen werden Sie stoßen, wenn Sie mobile Programme erstellen möchten:

Der Bildschirm ist wesentlich kleiner.

Der Benutzer bedient die Anwendung mit dem Finger, 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 und anderer Technologien ist das mobile Internet nicht beständig schnell, ein Nutzer kann sogar in Gebiete ohne Empfang kommen.

Um diese Probleme so gut wie möglich zu lösen, sollten Sie bei dem 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!