Web-Apps. CMS-Daten. erstellen mit. Janosch Skuplik

Transkript

1 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

2 Janosch Skuplik Web-Apps erstellen mit CMS-Daten

3 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

4 Bibliografische Information der Deutschen Bibliothek Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte Daten sind im Internet über 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 Franzis Verlag GmbH, 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: Druck: C.H. Beck, Nördlingen Printed in Germany ISBN

5 5 Inhaltsverzeichnis 1 Einführung Darum geht es in diesem Buch Für wen dieses Buch geschrieben ist Das benötigen Sie Testen von Web-Apps Remote Debugging Danksagung Web-Apps Was ist eine Web-App? Web-App versus native App HTML Dokumententyp Input-Typen Audio und Video Geolocation-API Web-Storage Datenbank-API Offline Web Applications Meta-Elemente JS/CSS-Frameworks jquery mobile jqtouch Weitere Frameworks ios-spezifische Elemente Responsive Webdesign CSS Media-Queries Grafiken im Responsive Webdesign CMS und Web-App Rolle eines CMS Content-Management-Systeme im Vergleich WordPress...68

6 6 Inhaltsverzeichnis TYPO Joomla! Contao Webservice einrichten und nutzen Daten von einem Webservice verarbeiten Verwendung von JavaScript-Bibliotheken Daten einer externen Domain nutzen Verarbeitung von XML-Daten Generierung der Daten mit einem Content-Management- System Joomla! WordPress Contao Blog-App mit WordPress Ein eigenes mobiles Theme jquery mobile einbinden Templating Die Device-Weiche Web-App auf Basis von Contao Mobile-fähige Erweiterungen für Contao templateselection mobilecore redirect ulforms html5_input dma_elementgenerator jqtouch Contao als Web-App-Basis nutzen Anlegen der Seitenstruktur Anlegen der Seitenlayouts Formulare Multipagelayout mit Contao und jqtouch Contao und jquery mobile...230

7 Inhaltsverzeichnis 7 7 Von der Web-App zur nativen App Vorteile der nativen App auf Web-App-Basis Was zu beachten ist PhoneGap Android-App mit PhoneGap ios-app mit PhoneGap Anhang Listings JSONP-Aufruf mit jquery Verarbeitung von XML-Daten home.php der Web-App auf Basis von WordPress index.php der Web-App auf Basis von WordPress Stichwortverzeichnis...287

8

9 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 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.

11 1.3 Das benötigen Sie 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 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 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-

13 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 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 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