Inhaltsverzeichnis

1Einführung

1.1Darum geht es in diesem Buch

1.2Für wen dieses Buch geschrieben ist

1.3Das benötigen Sie

1.3.1Testen von Web-Apps

1.3.2Remote Debugging

1.4Danksagung

2Web-Apps

2.1Was ist eine Web-App?

2.2Web-App versus native App

2.3HTML5

2.3.1Dokumententyp

2.3.2Input-Typen

2.3.3Audio und Video

2.3.4Geolocation-API

2.3.5Web-Storage

2.3.6Datenbank-API

2.3.7Offline Web Applications

2.4Meta-Elemente

2.5JS/CSS-Frameworks

2.5.1jQuery mobile

2.5.2jQTouch

2.5.3Weitere Frameworks

2.6iOS-spezifische Elemente

2.7Responsive Webdesign

2.7.1CSS Media-Queries

2.7.2Grafiken im Responsive Webdesign

3CMS und Web-App

3.1Rolle eines CMS

3.2Content-Management-Systeme im Vergleich

3.2.1WordPress

3.2.2TYPO3

3.2.3Joomla!

3.2.4Contao

4Webservice einrichten und nutzen

4.1Daten von einem Webservice verarbeiten

4.1.1Verwendung von JavaScript-Bibliotheken

4.1.2Daten einer externen Domain nutzen

4.1.3Verarbeitung von XML-Daten

4.2Generierung der Daten mit einem Content-Management-System

4.2.1Joomla!

4.2.2WordPress

4.2.3Contao

5Blog-App mit WordPress

5.1Ein eigenes mobiles Theme

5.1.1jQuery mobile einbinden

5.1.2Templating

5.2Die Device-Weiche

6Web-App auf Basis von Contao

6.1Mobile-fähige Erweiterungen für Contao

6.1.1templateSelection

6.1.2mobilecore

6.1.3redirect

6.1.4ulForms

6.1.5html5_input

6.1.6dma_elementgenerator

6.1.7jQTouch

6.2Contao als Web-App-Basis nutzen

6.2.1Anlegen der Seitenstruktur

6.2.2Anlegen der Seitenlayouts

6.2.3Formulare

6.2.4Multipagelayout mit Contao und jQTouch

6.2.5Contao und jQuery mobile

7Von der Web-App zur nativen App

7.1Vorteile der nativen App auf Web-App-Basis

7.2Was zu beachten ist

7.3PhoneGap

7.4Android-App mit PhoneGap

7.5iOS-App mit PhoneGap

8Anhang

8.1Listings

8.1.1JSONP-Aufruf mit jQuery

8.1.2Verarbeitung von XML-Daten

8.1.3home.php der Web-App auf Basis von WordPress

8.1.4index.php der Web-App auf Basis von WordPress

Stichwortverzeichnis

1Einfü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.1Darum 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.

1.2Fü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.3Das 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.1Testen 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 verschiedensten 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.2Remote 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 Inhalten 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.

1.4Danksagung

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.

2Web-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.1Was 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 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 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.

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!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!