Janosch Skuplik Web-Apps erstellen mit CMS-Daten Das Zusammenspiel von Content-Management-System und Web-App jqtouch und jquery mobile im Einsatz Web-App-Erstellung am Beispiel von WordPress und Contao
Janosch Skuplik Web-Apps erstellen mit CMS-Daten
Janosch Skuplik Web-Apps erstellen mit CMS-Daten Das Zusammenspiel von Content-Management-System und Web-App jqtouch und jquery mobile im Einsatz Web-App-Erstellung am Beispiel von WordPress und Contao
Bibliografische Information der Deutschen Bibliothek Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte Daten sind im Internet über http://dnb.ddb.de abrufbar. Alle Angaben in diesem Buch wurden vom Autor mit größter Sorgfalt erarbeitet bzw. zusammengestellt und unter Einschaltung wirksamer Kontrollmaßnahmen reproduziert. Trotzdem sind Fehler nicht ganz auszuschließen. Der Verlag und der Autor sehen sich deshalb gezwungen, darauf hinzuweisen, dass sie weder eine Garantie noch die juristische Verantwortung oder irgendeine Haftung für Folgen, die auf fehlerhafte Angaben zurückgehen, übernehmen können. Für die Mitteilung etwaiger Fehler sind Verlag und Autor jederzeit dankbar. Internetadressen oder Versionsnummern stellen den bei Redaktionsschluss verfügbaren Informationsstand dar. Verlag und Autor übernehmen keinerlei Verantwortung oder Haftung für Veränderungen, die sich aus nicht von ihnen zu vertretenden Umständen ergeben. Evtl. beigefügte oder zum Download angebotene Dateien und Informationen dienen ausschließlich der nicht gewerblichen Nutzung. Eine gewerbliche Nutzung ist nur mit Zustimmung des Lizenzinhabers möglich. 2012 Franzis Verlag GmbH, 85540 Haar bei München Alle Rechte vorbehalten, auch die der fotomechanischen Wiedergabe und der Speicherung in elektronischen Medien. Das Erstellen und Verbreiten von Kopien auf Papier, auf Datenträgern oder im Internet, insbesondere als PDF, ist nur mit ausdrücklicher Genehmigung des Verlags gestattet und wird widrigenfalls strafrechtlich verfolgt. Die meisten Produktbezeichnungen von Hard- und Software sowie Firmennamen und Firmenlogos, die in diesem Werk genannt werden, sind in der Regel gleichzeitig auch eingetragene Warenzeichen und sollten als solche betrachtet werden. Der Verlag folgt bei den Produktbezeichnungen im Wesentlichen den Schreibweisen der Hersteller. Satz: DTP-Satz A. Kugge, München art & design: www.ideehoch2.de Druck: C.H. Beck, Nördlingen Printed in Germany ISBN 978-3-645-60214-3
5 Inhaltsverzeichnis 1 Einführung...9 1.1 Darum geht es in diesem Buch...9 1.2 Für wen dieses Buch geschrieben ist...10 1.3 Das benötigen Sie...10 1.3.1 Testen von Web-Apps...11 1.3.2 Remote Debugging...12 1.4 Danksagung...14 2 Web-Apps...15 2.1 Was ist eine Web-App?...15 2.2 Web-App versus native App...17 2.3 HTML5...19 2.3.1 Dokumententyp...19 2.3.2 Input-Typen...19 2.3.3 Audio und Video...22 2.3.4 Geolocation-API...25 2.3.5 Web-Storage...26 2.3.6 Datenbank-API...28 2.3.7 Offline Web Applications...35 2.4 Meta-Elemente...37 2.5 JS/CSS-Frameworks...38 2.5.1 jquery mobile...38 2.5.2 jqtouch...45 2.5.3 Weitere Frameworks...58 2.6 ios-spezifische Elemente...58 2.7 Responsive Webdesign...60 2.7.1 CSS Media-Queries...61 2.7.2 Grafiken im Responsive Webdesign...62 3 CMS und Web-App...67 3.1 Rolle eines CMS...67 3.2 Content-Management-Systeme im Vergleich...68 3.2.1 WordPress...68
6 Inhaltsverzeichnis 3.2.2 TYPO3...74 3.2.3 Joomla!...84 3.2.4 Contao...93 4 Webservice einrichten und nutzen...101 4.1 Daten von einem Webservice verarbeiten...101 4.1.1 Verwendung von JavaScript-Bibliotheken...107 4.1.2 Daten einer externen Domain nutzen...114 4.1.3 Verarbeitung von XML-Daten...119 4.2 Generierung der Daten mit einem Content-Management- System...121 4.2.1 Joomla!...121 4.2.2 WordPress...128 4.2.3 Contao...132 5 Blog-App mit WordPress...139 5.1 Ein eigenes mobiles Theme...140 5.1.1 jquery mobile einbinden...140 5.1.2 Templating...143 5.2 Die Device-Weiche...173 6 Web-App auf Basis von Contao...177 6.1 Mobile-fähige Erweiterungen für Contao...177 6.1.1 templateselection...178 6.1.2 mobilecore...179 6.1.3 redirect...180 6.1.4 ulforms...181 6.1.5 html5_input...185 6.1.6 dma_elementgenerator...186 6.1.7 jqtouch...193 6.2 Contao als Web-App-Basis nutzen...193 6.2.1 Anlegen der Seitenstruktur...195 6.2.2 Anlegen der Seitenlayouts...197 6.2.3 Formulare...216 6.2.4 Multipagelayout mit Contao und jqtouch...227 6.2.5 Contao und jquery mobile...230
Inhaltsverzeichnis 7 7 Von der Web-App zur nativen App...231 7.1 Vorteile der nativen App auf Web-App-Basis...232 7.2 Was zu beachten ist...232 7.3 PhoneGap...233 7.4 Android-App mit PhoneGap...235 7.5 ios-app mit PhoneGap...259 8 Anhang...281 8.1 Listings...281 8.1.1 JSONP-Aufruf mit jquery...281 8.1.2 Verarbeitung von XML-Daten...282 8.1.3 home.php der Web-App auf Basis von WordPress...283 8.1.4 index.php der Web-App auf Basis von WordPress...285 Stichwortverzeichnis...287
9 1 Einführung Im Laufe der letzten beiden Jahre haben sich Smartphones immer rasanter verbreitet. Gleichzeitig ist auch die Nachfrage nach Programmen und Websites gestiegen, die speziell für diese Geräte optimiert sind. Apps und Spiele werden teilweise ausschließlich für die verschiedenen mobilen Plattformen erstellt. Auch für Websites wird es aus diesem Grund immer wichtiger, dass sie auf mobilen Geräten darstellbar sind. Immer mehr User nutzen ihr Smartphone, um»mal eben«etwas nachzuschlagen oder sich ein bisschen die Zeit zu vertreiben. Die Programme, die inzwischen für Smartphones zur Verfügung stehen, werden immer interessanter und vielseitiger. Neben den bekannten nativen Apps gibt es auch die Möglichkeit, Apps auf Basis von HTML, CSS und JavaScript zu erstellen. Genau auf dieses Thema geht das Buch genauer ein. 1.1 Darum geht es in diesem Buch Der Titel dieses Buches»Web-Apps erstellen mit CMS-Daten«enthält zwei Begriffe: Web-App und Content-Management-System (CMS). Genau diese beiden Begriffe sollen im Folgenden auf möglichst verständliche Weise zusammengebracht werden. In dem vorliegenden Buch wird es nicht darum gehen, die konventionelle Umsetzung einer Web-App zu beschreiben. Zu diesem Thema existieren bereits zahlreiche Tutorials im Internet. Auch einige Fachbücher beschäftigen sich bereits mit dem Thema Web-App. In diesem Buch soll es vielmehr darum gehen zu demonstrieren, wie Web-Apps auf Basis von Daten aus einem Content-Management-System konzipiert und umgesetzt werden können. Diese Umsetzungen greifen auch auf die Features, die auf Smartphones über HTML5 zur Verfügung stehen, zurück. Im ersten Teil des Buches erhalten Sie Basiswissen über die Erstellung von Web-Apps, die Besonderheiten, die es in diesem Zusammenhang zu beachten gibt, und darüber, welche Frameworks Ihnen dabei die Arbeit erleichtern. Im zweiten Teil des Buches geht es um die Nutzung von Content- Management-Systemen als Basis für Web-Apps. Sie können die Daten aus einem Content-Management-System entweder über eine Schnittstelle nutzen oder Ihre komplette Web-App durch das Content-Management-System generieren lassen. Anhand von Beispielen werden Sie ein paar Möglichkeiten verschiedener Content- Management-Systeme kennenlernen. Zum Schluss bekommen Sie noch einen Ausblick darauf, welche Möglichkeiten bestehen, eine Web-App, die sich an Daten eines Content- Management-Systems bedient, in eine native App umzuwandeln. Im Zuge dessen werde ich auch ein paar der möglichen Probleme, die bei einer solchen Umsetzung auftreten können, näher erläutern. Diese Einblicke sollten Sie in die Lage versetzen, Web-Apps zu erstellen, die sich der Daten aus einem Content-Management-System bedienen.
10 Kapitel 1: Einführung 1.2 Für wen dieses Buch geschrieben ist Dieses Buch ist für all diejenigen geschrieben, die sich mit der Entwicklung einer Web- App beschäftigen möchten, die als Datengrundlage ein Content-Management-System verwendet. Somit richtet sich dieses Buch in erster Linie an Webentwickler oder Frontendentwickler, die bereits Grundkenntnisse über die Erstellung einer»normalen«website besitzen. Grundkenntnisse von HTML und CSS werden vorausgesetzt. Auch sollten Sie erste Erfahrungen mit JavaScript gemacht haben. Einzelne Funktionen müssen allerdings nicht im Detail bekannt sein. Alle Code-Blöcke versuche ich verständlich zu erläutern, sodass Sie dieses Buch gleichzeitig dazu nutzen können, Ihr Wissen in einem dieser Bereiche aufzufrischen beziehungsweise zu erweitern. Darüber hinaus sollten Grundkenntnisse zu einem Content-Management-System und dessen Bedienung vorhanden sein. Die Beispiele zu den Content-Management-Systemen sind allerdings so geschrieben, dass Sie auch von Einsteigern der jeweiligen Content-Management- Systeme nachvollzogen und umgesetzt werden können. In diesem Buch wird auf viele der Besonderheiten von HTML5 nicht im Detail eingegangen. Viele Aspekte werden kurz angerissen und mit entsprechenden Tipps zum Weiterlesen versehen, falls Sie sich mit einem der Features näher befassen möchten und detailliertere Informationen wünschen. Die HTML5-Features, die in Web-Apps genutzt werden können, werden beispielsweise in dem Buch»HTML5-Apps für iphone und Android«von Markus Spiering und Sven Haiges im Detail beschrieben. 1.3 Das benötigen Sie Für die eigentliche Erstellung beziehungsweise Entwicklung einer Web-App brauchen Sie nichts weiter als ein ausgereiftes Konzept und einen Code-Editor. Welchen Editor Sie benutzen, ist im Grunde egal jeder Entwickler oder Coder hat seinen eigenen Lieblingseditor. Wenn Sie noch nicht wissen, welchen Editor Sie bevorzugen, rate ich Ihnen, ein bisschen Zeit darauf zu verwenden, sich mit verschiedenen Programmen auseinanderzusetzen, um einen Editor zu finden, mit dem Sie gut arbeiten können. Aus eigener Erfahrung kann ich Coda für den Mac oder PSPad für Windows-Benutzer empfehlen. Falls Sie eine komplette Entwicklungsumgebung (IDE) bevorzugen, so ist die Entwicklung einer Web-App auch mit einer solchen möglich. Grundsätzlich empfiehlt sich für die Entwicklung einer Web-App ein Editor mit Syntax-Highlighting für die Programmier- oder Auszeichnungssprachen, also für HTML, CSS und JavaScript. Im letzten Kapitel dieses Buches geht es darum, eine native App für ios oder Android auf Basis einer Web-App zu erstellen. Wenn Sie eine native App für ios erstellen möchten, so geht dies nur mit Xcode, das allerdings nur für Mac verfügbar ist. Für die Erstellung einer Android-App benötigen Sie Eclipse, das es für Windows und Linux und OS X gibt.
1.3 Das benötigen Sie 11 1.3.1 Testen von Web-Apps Sehr wahrscheinlich werden Sie auch die Möglichkeit nutzen, Ergebnisse und einzelne Schritte während der Umsetzung zu testen und gegebenenfalls zu debuggen. Hierzu haben Sie viele verschiedene Möglichkeiten: Sie können eine Web-App in einem Browser auf einem Rechner debuggen oder über eine Remote-Verbindung direkt auf einem entsprechenden Gerät. Testen können Sie Ihre Web-App wiederum im normalen Browser, aber auch über einen Simulator oder ein echtes Gerät. Wie Sie sehen, sind viele Möglichkeiten vorhanden, die ich Ihnen nun näher vorstellen möchte. Debuggen im Browser Um Ihre Ergebnisse schnell und direkt während der Umsetzung zu überprüfen, reicht für die ersten Schritte ein normaler Browser aus. Da sowohl Android als auch ios Browser verwenden, die auf der Webkit-Engine basieren, bieten sich insbesondere die Browser Safari und Chrome an. Diese beiden Browser haben auch entsprechende Entwickler-Tools integriert, über die man die HTML-Struktur, CSS-Deklarationen und JavaScript-Funktionen debuggen und einsehen kann. Auf Windows-Rechnern können Sie die Entwicklertools in der Regel mit F12 einschalten, auf Mac-Rechnern erreichen Sie sie über alt + cmd + i. Entwickler-Tools im Chrome Entwickler-Tools im Safari Debuggen auf Android- und ios-geräten Um die App ausführlich zu testen und ein Gefühl für die User Experience zu bekommen, ist der Test auf Smartphones unerlässlich. Da Android-Phones (die in ver-
12 Kapitel 1: Einführung schiedensten Variationen vorkommen) und iphones sehr unterschiedlich reagieren und die Ergebnisse auch unterschiedlich darstellen, sollten Sie Ihre Web-App nach Möglichkeit auf beiden Betriebssystemen testen. Auch die Simulatoren, die es für Android- Phones und für iphones gibt, sind ein gutes Mittel um auf die Schnelle eine Darstellung zu überprüfen. Allerdings reagieren die Simulatoren mitunter etwas anders als die eigentlichen Geräte. So sucht man beispielsweise die Gesten, die auf den Smartphones zur Verfügung stehen, bei den Simulatoren vergeblich, da es sich nicht um Touch- Devices handelt. Insofern können Sie die Simulatoren nutzen, um die Darstellung und Positionierung von Elementen zu überprüfen. Um dagegen ein Gefühl für die Usability zu bekommen, ist der Test auf entsprechenden Geräten empfehlenswert. Um ein Android-Handy zu simulieren, haben Sie die Möglichkeit, mit dem Android Virtual Device Manager (AVD Manager) ein virtuelles Android-Gerät anzulegen. Wenn Sie ohnehin planen, Ihre Web-App am Ende in eine native Android-App zu integrieren, sollten Sie den AVD Manager zusammen mit den Entwickler-Tools für Android installieren. Andernfalls genügt es, wenn Sie den AVD Manager über die Android-Seite herunterladen und installieren. Über den AVD Manager können Sie anschließend beliebig viele virtuelle Geräte mit unterschiedlichen Konfigurationen anlegen. Alle diese Geräte haben einen integrierten Browser, über den Sie die URL Ihrer Web-App zum Testen aufrufen können. Analog können Sie den iphone-simulator dazu verwenden, die erwartete Darstellung auf iphones zu testen. Der iphone-simulator wird zusammen mit Xcode installiert, das Sie als Mac-User kostenlos direkt über den App-Store erhalten. In Xcode finden Sie den Simulator über Xcode/Open Developer Tools/iOS Simulator. Auch im ios-simulator haben Sie die Möglichkeit, den mobilen Safari zu verwenden, über den Sie Ihre Web- App aufrufen können. 1.3.2 Remote Debugging Was aber, wenn Sie eine Darstellung auf einem der mobilen Geräte debuggen müssen und schnell die Reaktion auf einzelne, unterschiedliche CSS-Anweisungen testen möchten? In diesem Fall müssen Sie auf das Remote-Debugging zurückgreifen, bei dem das Gerät jeweils über eine USB-Verbindung mit Ihrem Rechner verbunden ist. Die Debugging-Tools werden dann auch auf dem Rechner gestartet, von wo aus sie auf die mobilen Geräte zugreifen. Diese Möglichkeit haben Sie sowohl für aktuelle ios-geräte als auch für aktuelle Chrome-Versionen auf Android-Geräten. Auf ios-geräten haben Sie die Möglichkeit, die Inhalte des mobilen Safari über einen verbundenen Mac zu debuggen. Zunächst müssen Sie diese Funktion auf Ihrem iphone über Einstellungen/Safari/Erweitert/Webinformationen aktivieren. Sobald Sie anschließend Ihr iphone (oder ein anderes kompatibles Gerät) an Ihren Mac anschließen, finden Sie im normalen Safari im Menü Entwickler das angeschlossene Gerät. Wenn Sie in diesem Menü die zu debuggende Seite des angeschlossenen Gerätes ausgewählt haben, öffnen sich auf Ihrem Rechner die Entwicklertools des Safari, allerdings mit den Inhal-
1.3 Das benötigen Sie 13 ten des mobilen Safari. Hier stehen Ihnen nun alle Möglichkeiten zur Verfügung, die Sie auch für normale Webseiten im normalen Safari haben. Auch Inhalte, die mit Chrome auf Android-Geräten angezeigt werden, lassen sich seit kurzem über Chrome vom Rechner aus debuggen. Hierzu benötigen Sie neben Chrome (sowohl auf dem mobilen Gerät als auch auf dem Rechner) die Android Debug Bridge (ADB). Diese ist Teil der Android Platform-tools, die in der Regel zusammen mit einem Android SDK installiert werden. Wie Sie das Android SDK installieren, erfahren Sie in Kapitel 7. Auf dem Gerät, dessen Inhalt Sie debuggen möchten, müssen Sie zunächst über Einstellungen/Entwickler-Optionen USB-Debugging aktivieren. Wenn Sie nun sowohl die ADB installiert als auch das USB-Debugging aktiviert haben, sollten Sie nach der Verbindung des Gerätes mit dem Rechner über die Konsole mit dem Befehl adb devices prüfen, ob Ihr angeschlossenes Gerät auch erkannt wurde. Als Nächstes müssen Sie im Chrome auf dem Gerät noch die Option USB-Debugging aktivieren. Anschließend müssen Sie über die Konsole noch einen Befehl ausführen, damit die beiden Chrome-Instanzen untereinander kommunizieren können: adb forward tcp:9222 localabsctract:chrome_devtools_remote. Nun können Sie in Ihrem Chrome auf dem Rechner über die URL localhost:9222 auf die Tabs zugreifen, die im Chrome auf dem Gerät geöffnet sind. Wie Sie sehen, gibt es mittlerweile viele verschiedene Möglichkeiten, Websites und somit auch Web-Apps auf mobilen Geräten zu debuggen und eine optimale Darstellung und ein optimales Verhalten zu erreichen. Da ios und Android grundsätzlich einige Sachen unterschiedlich darstellen, empfiehlt es sich, wenn man mit einer Web-App beide Geräte unterstützen möchte, die Web-App auch auf beiden Geräten intensiv zu testen.
14 Kapitel 1: Einführung 1.4 Danksagung Zum Abschluss der Einleitung möchte ich ein paar Zeilen dazu nutzen, mich bei den Menschen zu bedanken, die mit dafür verantwortlich sind, dass dieses Buch entstanden ist. Ich danke Janne für Ihre Unterstützung beim Schreiben des Buches. Ich danke ihr auch für das Drängen, dann und wann doch mal ein bisschen konzentrierter und zielorientierter weiterzuschreiben. Vielen Dank. Des Weiteren bedanke ich mich bei dem Lektor dieses Buches und allen Mitarbeitern des Verlages für ihre Mühe und ihre Geduld. Zu guter Letzt danke ich noch allen, die irgendwie dazu beigetragen haben, dieses Buch zu schreiben, sei es durch interessante Gespräche, nützliche Erweiterungen, hilfreiche Artikel oder andere Möglichkeiten, mich mit diesem spannenden Thema so umfangreich auseinanderzusetzen. Danke an Alexander, Andreas, Arne, Carsten, Fabian, Jan, Leo, Patrick, Ruud und Stephan. Nun bleibt mir nur noch übrig, Ihnen viel Spaß und Erfolg bei der Lektüre dieses Buches zu wünschen.
15 2 Web-Apps In diesem Kapitel möchte ich Ihnen ein wenig Grundlagenwissen über Web-Apps vermitteln. Zunächst wird der Begriff Web-App geklärt, ehe ich dann auf die Unterschiede zu einer nativen App eingehe. Anschließend erhalten Sie einen kleinen Einblick in die Fähigkeiten von HTML5 und die Verwendung von mobilen Frameworks zur Erstellung einer Web-App. Ich hoffe, dass Ihnen dieses Kapitel einen ersten Einblick in die Möglichkeiten von Web-Apps gibt. 2.1 Was ist eine Web-App? Zunächst stellt sich die Frage: Was ist eine Web-App? Auf diese Frage habe ich bisher keine eindeutige Antwort gefunden. Daher lege ich diesem Buch eine eigene Definition zu Grunde, die nach meiner Erfahrung eine Web-App zutreffend beschreibt: Eine Web-App ist eine mobile Internetanwendung, die auf der Basis von HTML, CSS und JavaScript umgesetzt wurde, in der Regel nur einen Hauptnutzen hat und sich dabei wie eine native App anfühlt. Ich denke, dass es an dieser Stelle wichtig ist, zwischen einer Website, die für die mobile Darstellung optimiert wurde, und einer Web-App zu unterscheiden. Eine mobil optimierte Website kann mehrere Zwecke haben eine Web-App sollte nur einen Zweck haben, den sie aber auch möglichst gut erfüllen sollte. Sie stellt somit nicht die»eierlegende Wollmilchsau«dar, sondern das spezialisierte Werkzeug, das nur dann zum Einsatz kommt, wenn genau dieses gebraucht wird. Sie dient weniger dazu, ein Unternehmen möglichst gut darzustellen, kann dessen Außenwirkung aber nachhaltig unterstützen. Für die Darstellung eines Unternehmens, genauer genommen die mobile Darstellung eines Unternehmens, empfiehlt es sich durchaus, eine optimierte Version der Website anzubieten allerdings ist der Begriff Web-App in diesem Zusammenhang nicht mehr korrekt. Eine mobile Website darf die gleichen Inhalte haben wie eine normale Website. Allerdings sollten die Inhalte in optimierter Form ausgegeben werden. An vielen Stellen ist es sinnvoll, die Inhalte der mobilen Website zu reduzieren, da die Bildschirme, auf denen die Seiten betrachtet werden, um einiges kleiner sind als normale Bildschirme. Auch auf ein entsprechendes Layout sollte bei der mobilen Website geachtet werden: Mehrspaltige Texte lassen sich meist nur schwer lesen, und große Bilder verlangsamen in der Regel den Seitenaufbau unverhältnismäßig stark. Natürlich ist es möglich, dem Benutzer auf seinem Smartphone genau das Gleiche wie dem Desktop-Benutzer anzuzeigen dies
16 Kapitel 2: Web-Apps dann nur entsprechend verkleinert und mit der Möglichkeit, einzelne Bereiche zu zoomen. Allerdings ist es der schönere Weg, dem Benutzer eine optimierte Version anzuzeigen, in der er nicht in die einzelnen Bereiche zoomen muss, um die Texte lesen zu können: Desktop-Ansicht auf dem Smartphone Für das Smartphone optimierte Ansicht Bei der optimierten Version kann der Benutzer ganz normal die Inhalte überfliegen, er bekommt sie in passender, lesbarer Größe angezeigt und die überflüssigen Inhalte werden weggelassen. Um diese Optimierung zu erreichen, können Sie entweder serverseitig die Ausgabe an das jeweilige Device anpassen, oder Sie setzen CSS Media Queries ein, um spezielle CSS-Definitionen für die unterschiedlichen Devices zu hinterlegen. Weitere Informationen über den Einsatz von CSS Media Queries erhalten Sie im Abschnitt 2.7 Responsive Webdesign. Eine Web-App sollte im Gegensatz zur mobilen Website, um dem Begriff App (Applikation) gerecht zu werden, einen Hauptnutzen haben. Dies kann entweder eine Informationsmöglichkeit, eine Suchmöglichkeit oder die Möglichkeit, Informationen zu speichern, sein. Somit sollte eine Web-App keine Kopie einer bestehenden Website sein, welche für die mobile Darstellung aufbereitet wurde. An dieser Stelle ist meiner Meinung nach der Begriff Web-App nicht mehr passend. Ebenso wie eine normale Website kann eine Web-App auch auf HTML, CSS und JavaScript basieren. Mit ein paar kleinen Hilfsmitteln und speziell eingesetzten Elementen lässt sich für ios außerdem erreichen, dass eine Web-App sich fast analog zu einer nativen App verhält. Sie kann auf dem Home-Bildschirm abgespeichert werden und Daten lokal speichern. Auch lässt sich
2.2 Web-App versus native App 17 eine Web-App dahingehend anpassen, dass sie offline verfügbar ist. In einem weiteren Schritt kann eine Web-App auch mit einem Wrapper versehen werden, der dafür sorgt, dass sie in die entsprechenden App-Stores eingestellt werden kann und dem Benutzer dort genau wie eine native App zur Verfügung steht. Wie Sie sehen, gibt es für die Begriffe mobile Website und Web-App zwar keine technischen, aber konzeptionelle Unterschiede. Beide lassen sich mit HTML, CSS und JavaScript umsetzen, allerdings ist für die Web-App zunächst die konzeptionelle Arbeit wichtig, die dafür sorgt, dass die Web-App einen Hauptnutzen hat und nicht als Kopie der normalen Website dient. 2.2 Web-App versus native App Stellt man sich die Frage, ob man eine App-Idee als native App oder als Web-App umsetzen soll, so gilt es, zahlreiche Punkte zu berücksichtigen. Einige der Vor- und Nachteile von Web-Apps versuche ich, Ihnen im Folgenden etwas näher zu bringen. In diesem Zusammenhang werde ich einige Vergleiche zwischen Web-Apps und nativen Apps aufstellen, die einerseits die Funktionalität und andererseits die Umsetzung berücksichtigen. Wenn man sich Web-Apps und native Apps genauer ansieht und sie miteinander vergleicht, so lässt sich feststellen, dass auf beiden Seiten Vor- und Nachteile zu finden sind. Einer der am häufigsten genannten Nachteile einer Web-App ist sicherlich der eingeschränkte Hardwarezugriff. Mit einer Web-App haben Sie zum Beispiel keinen Zugriff auf die Kontakte des jeweiligen Smartphones. Auch ein Zugriff auf die Kamera mit Web-Apps ist noch nicht in allen mobilen Betriebssystemen möglich. Derzeit lassen sich diese Zugriffe allerdings mit Hilfe von nativen Wrappern erreichen. Wie dies funktionieren kann, werden Sie im letzten Kapitel dieses Buches erfahren, in dem Sie die Möglichkeit bekommen, Ihrer Web-App mit Hilfe von PhoneGap einen nativen Wrapper zu geben und sie für die einzelnen App-Stores vorzubereiten. Ein weiterer Nachteil einer reinen Web-App ist sicherlich die fehlende Vermarktungsmöglichkeit über die App-Stores. Eine reine Web-App können Sie lediglich selber vermarkten, ein Icon innerhalb der entsprechenden App-Stores werden Sie nicht erhalten. Hierzu ist es nötig, Ihre Web-App beispielsweise mit PhoneGap in eine native App umzuwandeln, die Sie dann entsprechend in die App-Stores laden können. Sollten Sie eine reine Web-App erstellen, so müssen Sie sich um deren Verbreitung und Vermarktung selber kümmern. Neben den genannten Nachteilen bietet Ihnen eine Web-App und insbesondere die Erstellung einer Web-App aber auch zahlreiche Vorteile. Zunächst einmal können Sie als Webentwickler auf die von Ihnen bereits beherrschten Techniken zurückgreifen. Eine Web-App besteht aus HTML, CSS und in den meisten Fällen auch noch aus JavaScript. Weitere Programmiersprachen wie Objective-C (ios) oder Java (Android) werden für die Umsetzung einer reinen Web-App nicht benötigt.
18 Kapitel 2: Web-Apps Somit halten sich Ihre Kosten bei der Erstellung einer Web-App im Vergleich zu denen einer nativen App, die Sie im Zweifelsfall auch noch für die verschiedenen Betriebssysteme umsetzen müssen, in Grenzen. Web-Apps eignen sich darüber hinaus hervorragend für Inhalte, die sich in Ihren Strukturen oder den gesamten Inhalten häufig ändern bzw. redaktionell gepflegt werden sollen. Sobald sich an den Inhalten, die auf Ihrem Server liegen, etwas ändert, ist diese Änderung unmittelbar beim nächsten Aufruf der Web-App auch beim Benutzer angelangt. Hierzu müssen Sie allerdings ein paar Dinge bezüglich des Offline-Cachings beachten. Als einer der größten Vorteile von Web-Apps ist die Möglichkeit anzuführen, dass verschiedene Betriebssysteme, theoretisch sogar alle gebräuchlichen Betriebssysteme, mit einer einzigen App unterstützt werden können. Eine Web-App nutzt lediglich den integrierten Browser des jeweiligen Smartphones. Alle mobilen Betriebssysteme haben einen mehr oder weniger aktuellen Browser integriert, auf dessen Grundlage Ihre Web- App dann dargestellt wird. Das heißt, im Idealfall müssen Sie Ihre Web-App nur für die verschiedenen Betriebssysteme optimieren, eine Arbeit, die ungefähr dem Vorgehen bei der Optimierung einer Website für verschiedene Browser entspricht. Auch sind Sie mit einer reinen Web-App unabhängig von App-Stores. Auf der einen Seite wurde dieser Punkt gerade bei den Nachteilen einer Web-App aufgezählt. Auf der anderen stellt die Tatsache, dass Sie damit auch von eventuellen Freigabeprozessen Ihrer App durch die App-Store-Betreiber befreit sind, einen (nicht zu unterschätzenden) Vorteil dar. Sie selber können bestimmen, welche Inhalte und Funktionen Sie in Ihrer Web-App zur Verfügung stellen. Auch für Updates bedeutet dies einen zeitlichen Vorteil. Um eine native ios-app zu updaten, müssen Sie sie zunächst von Apple begutachten lassen eine Aufgabe, die teilweise bis zu 14 Tagen dauern kann. Ihre Web-App können Sie jederzeit auf einen neuen Stand bringen, indem Sie einfach die entsprechenden Dateien auf Ihrem Server austauschen. Als letzten Vorteil einer Web-App möchte ich noch die Möglichkeit der eigenen Analyse nennen. Da es sich bei Ihrer Web-App um nichts anderes als eine optimierte Website handelt, haben Sie auch die gleichen Analysemöglichkeiten, die Sie mit einer Website haben. Sie können das Analysetool Ihrer Wahl integrieren und erhalten die Standardanalysedaten bereits über die Log-Dateien Ihres Servers. So können Sie entweder die Analysemöglichkeiten selber integrieren, indem Sie einzelne Dateiaufrufe entsprechend loggen, oder Sie setzen ein Analysetool Ihrer Wahl, wie zum Beispiel das Open-Source- Programm Piwik (http://piwik.org), ein. Wie Sie sehen, bietet Ihnen die Erstellung einer App, die auf Webtechnologien basiert, einige Vorteile gegenüber der Erstellung einer (oder mehrerer) nativer Apps. Die Nachteile, die Sie gegenüber einer nativen App hinnehmen müssen, lassen sich zum Beispiel dadurch kompensieren, dass Sie Ihre Web-App mit Hilfe von PhoneGap App-Storetauglich machen. Eine weitere hervorragende Möglichkeit, die Features einer Web-App zu nutzen und gleichzeitig in den App-Stores vertreten zu sein, bietet eine sogenannte Hybrid-App. In
2.3 HTML5 19 einer Hybrid-App setzen Sie die Hauptfunktionen einer App nativ um, binden aber an den gewünschten Stellen Webviews ein, in denen der Webteil geladen wird. Dieser kann mit einem entsprechenden Framework umgesetzt sein und zusätzlich auch auf einem Content-Management-System Ihrer Wahl basieren. Mit ein wenig Übung und einer engen Zusammenarbeit mit den Entwicklern des nativen Codes merkt der Benutzer einer solchen App nichts (oder nur wenig) von dem Wechsel aus der nativen App in den Web-App-Teil. 2.3 HTML5 Für die Erstellung einer Web-App sollten Sie in jedem Fall HTML5 verwenden, da Ihnen hierüber viele nützliche Features zur Verfügung stehen, die einerseits die Entwicklung erleichtern und andererseits für eine höhere Usability seitens der Benutzer sorgen. Einige der spannendsten und nützlichsten Features möchte ich Ihnen kurz vorstellen. Ein Grundverständnis dieser Möglichkeiten sollte auch für die Arbeit mit Content- Management-Systemen in Bezug auf Web-Apps vorhanden sein. Sollten Sie mehr über die Möglichkeiten von HTML5 und die Verwendung in Web-Apps erfahren wollen, so empfehle ich Ihnen das Buch»HTML5-Apps für iphone und Android«von Markus Spiering und Sven Haiges. Darin werden Ihnen auf ca. 250 Seiten die einzelnen Features im Detail und anhand vieler Beispiele gut verständlich erläutert. 2.3.1 Dokumententyp Um dem Browser mitzuteilen, dass es sich bei der von Ihnen erstellten Seite um eine HTML5-Seite handelt, reicht es, wenn Sie den folgenden Doctype angeben: <!DOCTYPE HTML> Die teilweise relativ lange Doctype-Anweisung für HTML4-Dokumente ist somit nicht mehr erforderlich. 2.3.2 Input-Typen Mit HTML5 stehen Ihnen zahlreiche neue Input-Typen zur Verfügung. Bei dem Ausfüllen eines dieser Felder wird im Idealfall eine zum Feld passende Tastatur oder Eingabemöglichkeit eingeblendet. Wenn Sie Ihre Web-App auf Basis eines Content-Management-Systems erstellen, so sollten Sie dies entweder direkt beim Templating beachten oder dafür sorgen, dass entsprechende Erweiterungen oder Plugins, die dieses Feature in das Content-Management-System Ihrer Wahl integrieren, genutzt werden. Nach den aktuellen HTML5-Spezifikationen sind zahlreiche neue Input-Typen möglich, allerdings werden aktuell noch nicht alle von den mobilen Browsern unterstützt. Die folgende Auswahl gibt Ihnen einen kleinen Überblick über die gebräuchlichsten und derzeit am besten unterstützten Input-Typen:
20 Kapitel 2: Web-Apps Input-Typ Syntax Beschreibung Screenshot number <input type="number" /> Verwendung der Nummerntastatur. date <input type="date" /> Datumsauswahl, die nur die Auswahl eines Datums erlaubt. datetime <input type="datetime" /> Datumsauswahl, welche die Auswahl eines Datums und einer Uhrzeit erlaubt.