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

Größe: px
Ab Seite anzeigen:

Download "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

16 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

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

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

Scholz (Hrsg.) / Krämer / Schollmayer / Völcker. Android-Apps. Konzeption, Programmierung und Vermarktung

Scholz (Hrsg.) / Krämer / Schollmayer / Völcker. Android-Apps. Konzeption, Programmierung und Vermarktung Scholz (Hrsg.) / Krämer / Schollmayer / Völcker Android-Apps entwickeln Konzeption, Programmierung und Vermarktung Vom Entwurf bis zum Einstellen bei Google Play und Co. So entwickeln Sie native Apps für

Mehr

Anonym im Internet mit Tor und Tails

Anonym im Internet mit Tor und Tails Hacking mit Franzis Ohne Vorkenntnisse Schritt für Schritt zum sicheren Linux auf dem USB-Stick Peter Loshin Anonym im Internet mit Tor und Tails Nutze die Methoden von Snowden und hinterlasse keine Spuren

Mehr

App Entwicklung mit Hilfe von Phonegap. Web Advanced II - SS 2012 Jennifer Beckmann

App Entwicklung mit Hilfe von Phonegap. Web Advanced II - SS 2012 Jennifer Beckmann App Entwicklung mit Hilfe von Phonegap Web Advanced II - SS 2012 Jennifer Beckmann http://www.focus.de/digital/internet/netzoekonomie-blog/smartphone-googles-android-laeuft-konkurrenz-in-deutschland-davon_aid_723544.html

Mehr

Einführung in die Cross-Plattform Entwicklung Das Intel XDK

Einführung in die Cross-Plattform Entwicklung Das Intel XDK Einführung in die Cross-Plattform Entwicklung Das Intel XDK Einführung Dieses Hands-on-Lab (HOL) macht den Leser mit dem Intel XDK vertraut. Es wird Schritt für Schritt die erste eigene Hybrid-App entwickelt

Mehr

Handbuch zur Integration der Verwaltungssuchmaschine NRW (VSM) in TYPO3 mit der Extension dnrw_vsm

Handbuch zur Integration der Verwaltungssuchmaschine NRW (VSM) in TYPO3 mit der Extension dnrw_vsm Handbuch zur Integration der Verwaltungssuchmaschine NRW (VSM) in TYPO3 mit der Extension dnrw_vsm Stand: 21.11.2014 Systemvoraussetzungen TYPO3 in der Version 6.0 6.2.xx Installation Installieren Sie

Mehr

WEBAPPS MEDIEN ZWISCHEN TECHNOLOGIE UND GESELLSCHAFT PROF. DR. MANFRED THALLER JONAS SCHOPHAUS UNI KÖLN WS 2012

WEBAPPS MEDIEN ZWISCHEN TECHNOLOGIE UND GESELLSCHAFT PROF. DR. MANFRED THALLER JONAS SCHOPHAUS UNI KÖLN WS 2012 WEBAPPS MEDIEN ZWISCHEN TECHNOLOGIE UND GESELLSCHAFT PROF. DR. MANFRED THALLER JONAS SCHOPHAUS UNI KÖLN WS 2012 AGENDA 1. Native versus webbasierte Apps 2. HTML5 & CSS3 1. Media Queries 2. Geolocation

Mehr

Mobile: Die Königsfrage

Mobile: Die Königsfrage Mobile: Die Königsfrage - Native App,Mobile Website oder doch Responsive Design? - Native App oder Mobile Website? Wer am Boom der mobilen Anwendungen teilhaben möchte, hat im Prinzip zwei Möglichkeiten:

Mehr

Eine App, viele Plattformen

Eine App, viele Plattformen Eine App, viele Plattformen Anwendungsentwicklung für Mobile Heiko Lewandowski 23.04.2013 EINLEITUNG Festlegung App-Strategie: Welche Ziele möchte ich erreichen? Die Vielzahl der Plattformen und Geräte(hersteller)

Mehr

Christian Immler. Der Crashkurs für Android, und Windows Phone. Mit 309 Abbildungen

Christian Immler. Der Crashkurs für Android, und Windows Phone. Mit 309 Abbildungen Christian Immler Der Crashkurs für Android, und Windows Phone Mit 309 Abbildungen Inhaltsverzeichnis 1 - die Großen Drei 9 1.1 Kultspielzeuge für jedermann 10 1.2 Android: der Herausforderer 11 1.2.1 Die

Mehr

Cross-Platform Apps mit HTML5/JS/CSS/PhoneGap

Cross-Platform Apps mit HTML5/JS/CSS/PhoneGap Cross-Platform Apps mit HTML5/JS/CSS/PhoneGap Proseminar Objektorientiertes Programmieren mit.net und C# Florian Schulz Institut für Informatik Software & Systems Engineering Einführung Was hat Cross-Plattform

Mehr

JavaScript Frameworks für Mobile

JavaScript Frameworks für Mobile JavaScript Frameworks für Mobile MoBI Expertenrunde Usability, 1. März 2012 doctima GmbH JavaScript Frameworks für Mobile MoBI 1.3.2012 Edgar Hellfritsch Inhalt Native App-Entwicklung Klassische Web-Entwicklung

Mehr

Apps entwickeln mit HTML und Javascript

Apps entwickeln mit HTML und Javascript Apps entwickeln mit HTML und Javascript Framework "PhoneGap" (Apache Cordova) Apps für diverse Mobil-Plattformen (Android, ios, etc.) Apps als Web-Anwendung Vor- und Nachteile zu nativen Apps. Frank Bartels

Mehr

App Entwicklung für Android F O R T G E S C H R I T T E N E P R O G R A M M I E R U N G I N J A V A

App Entwicklung für Android F O R T G E S C H R I T T E N E P R O G R A M M I E R U N G I N J A V A App Entwicklung für Android F O R T G E S C H R I T T E N E P R O G R A M M I E R U N G I N J A V A D O Z E N T : R E F E R E N T : P R O F. D R. K L I N K E R R I C O L O S C H W I T Z Aufbau der Präsentation

Mehr

d e S I G n & d e v e L O P M e n T TYPO3 AdvAnced

d e S I G n & d e v e L O P M e n T TYPO3 AdvAnced DESIGN & DEVELOPMENT TYPO3 Advanced 1 Einleitung / Inhalt 2 / 13 Einleitung Dieses Dokument weist Sie durch die Funktion des Open Source CMS TYPO3. In wenigen, einfachen Schritten wird Ihnen bebildert

Mehr

Entwicklungswerkzeuge & - methoden

Entwicklungswerkzeuge & - methoden Entwicklungswerkzeuge & - methoden Debugging und Logging von mobile Apps Jürgen Menge Sales Consultant, Oracle Deutschland E-Mail: juergen.menge@oracle.com +++ Bitte nutzen Sie die bevorzugte Telefonnummer

Mehr

Programmieren für mobile Endgeräte SS 2013/2014. Dozenten: Patrick Förster, Michael Hasseler

Programmieren für mobile Endgeräte SS 2013/2014. Dozenten: Patrick Förster, Michael Hasseler Programmieren für mobile Endgeräte SS 2013/2014 Programmieren für mobile Endgeräte 2 Organisatorisches Anmelden im Web: ZIV Lehre Anmelden Anwesenheitsliste Anwesenheitsschein bei 75% Anwesenheit Allgemeine

Mehr

U.motion. U.motion Control. Technisches Handbuch. Control-App für ios-geräte. 04/2014 Version 1.0.1. www.merten.com

U.motion. U.motion Control. Technisches Handbuch. Control-App für ios-geräte. 04/2014 Version 1.0.1. www.merten.com U.motion U.motion Control Control-App für ios-geräte 04/2014 Version 1.0.1 www.merten.com ALLGEMEINE INFORMATIONEN Schneider Electric GmbH c/o Merten Gothaer Straße 29, 40880 Ratingen www.merten.de www.merten-austria.at

Mehr

Top-Themen. Workshop: Drucken mit iphone und ipad... 2. Seite 1 von 15

Top-Themen. Workshop: Drucken mit iphone und ipad... 2. Seite 1 von 15 Top-Themen Workshop: Drucken mit iphone und ipad... 2 Seite 1 von 15 AirPrint in der Praxis Workshop: Drucken mit iphone und ipad von Thomas Joos, Malte Jeschke Seite 2 von 15 Inhalt Drucken mit iphone

Mehr

JDroidLib mit Eclipse (Mac/Linux/Windows)

JDroidLib mit Eclipse (Mac/Linux/Windows) JDroidLib mit Eclipse (Mac/Linux/Windows) Version 1.3, 25. März 2013 (Unter Windows besser die ADT-Bundle Version installieren, siehe entsprechende Anleitung) Vorbereitungen: 1. JDK SE neuste Version installieren,

Mehr

Entwicklung und Integration mobiler Anwendungen. Oracle Deutschland B.V. & Co. KG

Entwicklung und Integration mobiler Anwendungen. <Speaker> Oracle Deutschland B.V. & Co. KG Entwicklung und Integration mobiler Anwendungen Oracle Deutschland B.V. & Co. KG Global Users (Millions) Der Trend ist eindeutig. Trend zu mobilen Endgeräten Wachstum des mobilen Datenverkehrs

Mehr

Die Sache mit den Bildern

Die Sache mit den Bildern Die Sache mit den Bildern S Grafiken im mobilen Webdesign S S Contao NRW Day 2014 S 1 Janosch Oltmanns seit 2011 bei DMA Interaction Developer Desktop & Mobile Buchautor: Web-Apps erstellen mit CMS-Daten

Mehr

Programmierung mobiler Geräte

Programmierung mobiler Geräte Programmierung mobiler Geräte SoSe 2015 Hybride Apps Markus Berg Hochschule Wismar Fakultät für Ingenieurwissenschaften Bereich Elektrotechnik und Informatik http://mmberg.net 2 Letzte Woche: Webapps Nativ

Mehr

Einrichten eines News-Systems in Typo3

Einrichten eines News-Systems in Typo3 Einrichten eines News-Systems in Typo3 Generelles: tt_news ist eine der beliebtesten Erweiterungen für Typo3 und wir bereits auf vielen Sites Vorarlberger Schulen verwendet: Beispiele: http://www.vobs.at/hsl

Mehr

Inhaltsverzeichnis. Ralph Steyer. Apps mit PhoneGap entwickeln. Universelle Web-Apps plattformneutral programmieren. ISBN (Buch): 978-3-446-43510-0

Inhaltsverzeichnis. Ralph Steyer. Apps mit PhoneGap entwickeln. Universelle Web-Apps plattformneutral programmieren. ISBN (Buch): 978-3-446-43510-0 sverzeichnis Ralph Steyer Apps mit PhoneGap entwickeln Universelle Web-Apps plattformneutral programmieren ISBN (Buch): 978-3-446-43510-0 ISBN (E-Book): 978-3-446-43543-8 Weitere Informationen oder Bestellungen

Mehr

In 10 Schritten selber eine eigene Homepage erstellen

In 10 Schritten selber eine eigene Homepage erstellen In 10 Schritten selber eine eigene Homepage erstellen Anhand dieser Anleitung können Sie einfach eine eigene Homepage selber erstellen. Registrieren Sie sich bei wordpress.com und schon können Sie loslegen.

Mehr

7 Plugins einbinden. 7.1 Beispiel»Die Taschenlampe«

7 Plugins einbinden. 7.1 Beispiel»Die Taschenlampe« 201 PhoneGap bringt einen standardisierten Hardwarezugriff für Smartphones mit. Aber was passiert, wenn Sie mehr wollen: Wenn Sie eine Hardware per Bluetooth ansprechen wollen oder Features der jeweiligen

Mehr

Komfortable Bedien-App Metz mecacontrol. Beschreibung der App zur Steuerung von Metz TV-Geräten via Android bzw. ios

Komfortable Bedien-App Metz mecacontrol. Beschreibung der App zur Steuerung von Metz TV-Geräten via Android bzw. ios Komfortable Bedien-App Metz mecacontrol Beschreibung der App zur Steuerung von Metz TV-Geräten via Android bzw. ios Sehr geehrte Kundin, sehr geehrter Kunde, vielen Dank für Ihr Interesse an unserer mecacontrol

Mehr

Einführung in die Cross-Plattform Entwicklung Das Intel App Framework

Einführung in die Cross-Plattform Entwicklung Das Intel App Framework Einführung in die Cross-Plattform Entwicklung Das Intel App Framework Einführung Dieses Hands-on-Lab (HOL) macht den Leser mit dem Intel App Framework vom Intel XDK vertraut. Es wird Schritt für Schritt

Mehr

Manual WordPress - ContentManagementSystem

Manual WordPress - ContentManagementSystem Was ist WordPress? WordPress ist ein ContentManagementSystem (CMS) zur Verwaltung der Inhalte einer Website. Es bietet sich besonders zum Aufbau und Pflege eines Weblogs (Online-Tagebuch) an. Funktionsschema

Mehr

Mobile Application Development

Mobile Application Development Mobile Application Development Android: Einführung Jürg Luthiger University of Applied Sciences Northwestern Switzerland Institute for Mobile and Distributed Systems Lernziele Der/die Kursbesucher/in kann

Mehr

Architekturen mobiler Multi Plattform Apps

Architekturen mobiler Multi Plattform Apps Architekturen mobiler Multi Plattform Apps Wolfgang Maison & Felix Willnecker 06. Dezember 2011 1 Warum Multi- Plattform- Architekturen? Markt. Apps für Smartphones gehören zum Standardinventar jeder guten

Mehr

Einführung in die Cross-Plattform Entwicklung Responsive Webdesign mit dem Intel XDK

Einführung in die Cross-Plattform Entwicklung Responsive Webdesign mit dem Intel XDK Einführung in die Cross-Plattform Entwicklung Responsive Webdesign mit dem Intel XDK Einführung Dieses Hands-on-Lab (HOL) macht den Leser mit dem Intel XDK und dem Responsive Webdesign vertraut. Es wird

Mehr

Plattformen mobiler Endgeräte Windows Phone, ios, Android

Plattformen mobiler Endgeräte Windows Phone, ios, Android Plattformen mobiler Endgeräte Windows Phone, ios, Android 13.12.2012 Inhaltsverzeichnis 1. Einführung 2. Ecosystem Smartphone OS 3. Mobile Software Platform 4. Android App Entwicklung 5. Zusammenfassung

Mehr

Homepageerstellung mit WordPress

Homepageerstellung mit WordPress Homepageerstellung mit WordPress Eine kurze Einführung in die Installation und Einrichtung von WordPress als Homepage-System. Inhalt 1.WordPress installieren... 2 1.1Download... 2 1.2lokal... 2 1.2.1 lokaler

Mehr

Apps-Entwicklung mit Eclipse

Apps-Entwicklung mit Eclipse JDroid mit Eclipse Seite 1 Apps-Entwicklung mit Eclipse Version 1.1, 30. April 2013 Vorbereitungen: 1. JDK installieren JDK SE neuste Version (64 oder 32 Bit) herunterladen und installieren (http://www.oracle.com/technetwork/java/javase/downloads/index.html)

Mehr

Bin ich fit für myconvento?

Bin ich fit für myconvento? Bin ich fit für myconvento? Sie planen den Einsatz unserer innovativen Kommunikationslösung myconvento und fragen sich gerade, ob Ihr Rechner die Anforderungen erfüllt? Hier erfahren Sie mehr. Inhalt Was

Mehr

Süddeutsche Zeitung als digitale Ausgabe

Süddeutsche Zeitung als digitale Ausgabe Süddeutsche Zeitung als digitale Ausgabe Technische Spezifikationen für SZ Digital- Anzeigen, Stand: 06.06.2014 Inhaltsübersicht 1. Einleitung und Anlieferungstermine S. 1 2. Anzeigen 2.1. Bildanzeigen

Mehr

Vodafone Cloud. Einfach A1. A1.net/cloud

Vodafone Cloud. Einfach A1. A1.net/cloud Einfach A1. A1.net/cloud Ihr sicherer Online-Speicher für Ihre wichtigsten Daten auf Handy und PC Die Vodafone Cloud ist Ihr sicherer Online-Speicher für Ihre Bilder, Videos, Musik und andere Daten. Der

Mehr

Contao 3. Keynote Contao-Konferenz 2012

Contao 3. Keynote Contao-Konferenz 2012 Contao 3 Keynote Contao-Konferenz 2012 Neue Dateistruktur Das Stammverzeichnis Keynote Contao-Konferenz 2012 Seite 3 Neue Dateistruktur Der Plugins-Ordner Keynote Contao-Konferenz 2012 Seite 4 Neue Dateistruktur

Mehr

Die Unternehmensseite im Internet - pflegen ohne Programmierkenntnisse. Felix Kopp

Die Unternehmensseite im Internet - pflegen ohne Programmierkenntnisse. Felix Kopp Die Unternehmensseite im Internet - pflegen ohne Programmierkenntnisse Felix Kopp Orientierung Veröffentlichen und Aktualisieren ohne Programmierkenntnisse Bestehende Internet-Seite aktualisieren. oder

Mehr

DOK. ART GD1. Citrix Portal

DOK. ART GD1. Citrix Portal Status Vorname Name Funktion Erstellt: Datum DD-MMM-YYYY Unterschrift Handwritten signature or electronic signature (time (CET) and name) 1 Zweck Dieses Dokument beschreibt wie das auf einem beliebigem

Mehr

3 Die Zielplattformen

3 Die Zielplattformen 21 In diesem Kapitel werden Sie das Aufsetzen der Entwicklungsumgebungen der verschiedenen Smartphone-Systeme kennenlernen. Jede Smartphone-Plattform stelle ich Ihnen dabei in einem eigenen Unterkapitel

Mehr

Ziele dieses Buches 2 Was können Sie von diesem Buch erwarten? 3 Und nach dem Buch? 5

Ziele dieses Buches 2 Was können Sie von diesem Buch erwarten? 3 Und nach dem Buch? 5 Inhaltsverzeichnis Einleitung 1 Ziele dieses Buches 2 Was können Sie von diesem Buch erwarten? 3 Und nach dem Buch? 5 Über mich 7 Kapitel 1 Konzeption und Planung der Website 11 1.1 Grundüberlegungen 12

Mehr

Responsive Design & ecommerce

Responsive Design & ecommerce Responsive Design & ecommerce Kassel, 15.02.2014 web n sale GmbH Jan Philipp Peter Was bisher geschah Was bisher geschah oder: Die mobile Evolution früher : - Lokale Nutzung - Zuhause oder im Büro - Wenige

Mehr

AM BeIsPIel Der DAsInvestMent.coM MoBIl WeB APP

AM BeIsPIel Der DAsInvestMent.coM MoBIl WeB APP AM BeIsPIel Der DAsInvestMent.coM MoBIl WeB APP 2 Inhalt Warum ist es sinnvoll eine spezielle Applikation für mobile Geräte zu entwickeln? Seite 5 Welche Möglichkeiten der Umsetzung gibt es? 6 Mobile Applikation

Mehr

Homepage erstellen aber wie

Homepage erstellen aber wie Homepage erstellen aber wie Viele Möglichkeiten einen Webauftritt zu gestalten Ein kleiner Leitfaden durch den Dschungel Wege zur Internetpräsenz Idee, etwas der Öffentlichkeit mitzuteilen Webseite erstellen

Mehr

Workshop I. Technische Differenzierung mobiler Kommunikationslösungen am Beispiel NPO/NGO Kommunikation. 7. Juni 2011

Workshop I. Technische Differenzierung mobiler Kommunikationslösungen am Beispiel NPO/NGO Kommunikation. 7. Juni 2011 Workshop I Technische Differenzierung mobiler Kommunikationslösungen am Beispiel NPO/NGO Kommunikation 7. Juni 2011 Übersicht è Native Apps è Web-Apps è Mobile Websites è Responsive Design Mobile Kommunikation

Mehr

Nadine Edelmann // Klaudia Fernowka // Magdalena Kierat // Anne Schwertfeger

Nadine Edelmann // Klaudia Fernowka // Magdalena Kierat // Anne Schwertfeger Tutoring Projekt II // Master Druck- und Medientechnik // Beuth Hochschule für Technik Berlin // Berlin, 23.11.2013 Vorstellungsrunde Wer sind wir? Was machen wir? Webseite zum Kurs: http://beuthworkshop.wordpress.com

Mehr

Benutzerleitfaden MobDat-CSG (Nutzung des Heimrechners für dienstliche Zwecke)

Benutzerleitfaden MobDat-CSG (Nutzung des Heimrechners für dienstliche Zwecke) Benutzerleitfaden MobDat-CSG (Nutzung des Heimrechners für dienstliche Zwecke) Verfasser/Referent: IT-Serviceline Hardware und Infrastruktur, DW 66890 Inhaltsverzeichnis 1 Allgemeines... 3 2 Windows XP

Mehr

Apps-Entwicklung mit Netbeans

Apps-Entwicklung mit Netbeans JDroid mit Netbeans Seite 1 Apps-Entwicklung mit Netbeans Version 2.2, 30. April 2013 Vorbereitungen: 1. JDK SE neuste Version installieren, (http://www.oracle.com/technetwork/java/javase/downloads/index.html)

Mehr

WordPress installieren und erste Einblicke ins Dashboard

WordPress installieren und erste Einblicke ins Dashboard WordPress installieren und erste Einblicke ins Dashboard Von: Chris am 16. Dezember 2013 In diesem Tutorial zeige ich euch wie ihr WordPress in der aktuellen Version 3.7.1 auf eurem Webspace installieren

Mehr

Ihr IT-Dienstleister aus Bonn

Ihr IT-Dienstleister aus Bonn Ihr IT-Dienstleister aus Bonn Wer wir sind Sie sind auf der Suche nach einem Partner, der Sie bei der technischen Umsetzung Ihrer Online-Projekte zuverlässig und kompetent unterstützt? Wer wir sind Die

Mehr

DESIGN & DEVELOPMENT. TYPO3 Basics

DESIGN & DEVELOPMENT. TYPO3 Basics DESIGN & DEVELOPMENT TYPO3 Basics 1 Einleitung / Inhalt 2 / 21 Einleitung Dieses Dokument weist Sie durch die Funktion des Open Source CMS TYPO3. In wenigen, einfachen Schritten wird Ihnen bebildert erklärt,

Mehr

Smartphone Entwicklung mit Android und Java

Smartphone Entwicklung mit Android und Java Smartphone Entwicklung mit Android und Java predic8 GmbH Moltkestr. 40 53173 Bonn Tel: (0228)5552576-0 www.predic8.de info@predic8.de Was ist Android Offene Plattform für mobile Geräte Software Kompletter

Mehr

Sigrid Born Jari-Hermann Ernst. Content Management mit TYPO3 CMS. Inklusive CD-ROM

Sigrid Born Jari-Hermann Ernst. Content Management mit TYPO3 CMS. Inklusive CD-ROM Sigrid Born Jari-Hermann Ernst Content Management mit TYPO3 CMS Inklusive CD-ROM Willkommen bei TYPO3 CMS für Kids! Vor wort Willkommen bei TYPO3 CMS für Kids! Auch wenn die Zahl von 500.000 Webseiten-Installationen

Mehr

Fork Leitfaden. BibApp Android

Fork Leitfaden. BibApp Android Fork Leitfaden BibApp Android letzte Aktualisierung: 24. April 2013 Inhaltsverzeichnis Inhaltsverzeichnis 1 Einleitung 2 2 Eclipse Projekt 2 3 Abhängigkeiten 2 4 Konfiguration 3 4.0.1 Paketname...............................

Mehr

Einige Tipps zur Optimierung Ihrer WordPress-Installation!

Einige Tipps zur Optimierung Ihrer WordPress-Installation! Einige Tipps zur Optimierung Ihrer WordPress-Installation! Quelle: www.rohinie.eu Die meisten Blogger glauben, dass es reicht, regelmäßig interessante Beiträge zu veröffentlichen um ein aktives Stammpublikum

Mehr

Designänderungen mit CSS und jquery

Designänderungen mit CSS und jquery Designänderungen mit CSS und jquery In der epages-administration gibt es in den Menüpunkten "Schnelldesign" und "Erweitertes Design" umfangreiche Möglichkeiten, das Design der Webseite anzupassen. Erfahrene

Mehr

CouchCommerce Online-Shops für Tablet Besucher optimieren, aber wie?

CouchCommerce Online-Shops für Tablet Besucher optimieren, aber wie? CouchCommerce Online-Shops für Tablet Besucher optimieren, aber wie? Wie Tablets die Post PC Commerce Ära einleiten Sie finden ein Video dieser Präsentation unter http://blog.couchcommerce.com/2012/06/03/couchcommerce-impressions-andvideo-from-the-shopware-community-day-2012/

Mehr

Quickstart IMS Custom-Player Pro

Quickstart IMS Custom-Player Pro Quickstart IMS Custom-Player Pro Jedes IMS-MDN (Media Delivery Network) Konto bietet zum Abspielen von Flash Videos den Standard IMS Custom Player. Dieser Player wird von uns auf einem hoch performanten

Mehr

FAQ: Digitale Produkte

FAQ: Digitale Produkte FAQ: Digitale Produkte Allgemein Für welche Geräte bietet der Berliner KURIER digitale Anwendungen? Der Berliner KURIER hat Apps für ios ipad und Android. Ausserdem gibt es ein Web-E-Paper, dass sich mit

Mehr

4.1 Download der App über den Play Store

4.1 Download der App über den Play Store 4 4.1 Download der App über den Play Store Die App TopSec Phone kann über den Play Store auf dem Smartphone oder über das Internet an Ihrem Computer heruntergeladen werden. Um Inhalte laden zu können,

Mehr

Das WordPress-Paket von sagner-heinze

Das WordPress-Paket von sagner-heinze Content-Management-System Das WordPress-Paket von sagner-heinze Was ist ein Content-Management-System (CMS)? Grundsätzlich gibt es zwei Möglichkeiten eine Internetseite aufzubauen. Bei kleinen Projekten

Mehr

Mobile Applications. Adrian Nägeli, CTO bitforge AG

Mobile Applications. Adrian Nägeli, CTO bitforge AG Mobile Applications Adrian Nägeli, CTO bitforge AG Inhalt Vorstellung Marktübersicht Entwicklung Adrian Nägeli Dipl. Inf.-Ing FH Seit 2005 bei bitforge bitforge AG Standort Rapperswil-Jona Gründung 2004

Mehr

Was ist MODX Revolution?

Was ist MODX Revolution? FACT SHEET 1 Was ist MODX Revolution? MODX ist ein Content Management System (CMS) und ein Applikations-Framework. MODX ist schon seit der Version Evolution ein Open Source Projekt und wird dank einer

Mehr

2. ERSTELLEN VON APPS MIT DEM ADT PLUGIN VON ECLIPSE

2. ERSTELLEN VON APPS MIT DEM ADT PLUGIN VON ECLIPSE 2. ERSTELLEN VON APPS MIT DEM ADT PLUGIN VON ECLIPSE 2.1 Die Einrichtung der Benutzeroberfläche Das Einrichten einer Android-Eclipse-Entwicklungsumgebung zur Android-Entwicklung ist grundsätzlich nicht

Mehr

Handbuch TweetMeetsMage

Handbuch TweetMeetsMage Handbuch TweetMeetsMage für Version 0.1.0 Handbuch Version 0.1 Zuletzt geändert 21.01.2012 Inhaltsverzeichnis 1 Einleitung... 3 1.1 Voraussetzungen... 3 1.2 Funktionsübersicht... 3 2 Installation... 4

Mehr

Unternehmensportfolio

Unternehmensportfolio Unternehmensportfolio Was wir machen: Cross Plattform Mobile Applications Beispiel ansehen Was wir machen: HTML5 & CSS3 basierte Web Applikationen Beispiel ansehen Was wir machen: Windows 8 & Windows Mobile

Mehr

MOBILE ENTERPRISE APPLICATION PLATFORM (MEAP)

MOBILE ENTERPRISE APPLICATION PLATFORM (MEAP) MOBILE ENTERPRISE APPLICATION PLATFORM (MEAP) Oliver Steinhauer Markus Urban.mobile PROFI Mobile Business Agenda MOBILE ENTERPRISE APPLICATION PLATFORM AGENDA 01 Mobile Enterprise Application Platform

Mehr

Microsoft PowerPoint 2013 YouTube-Video einfügen

Microsoft PowerPoint 2013 YouTube-Video einfügen Hochschulrechenzentrum Justus-Liebig-Universität Gießen Microsoft PowerPoint 2013 YouTube-Video einfügen YouTube-Video einfügen in PowerPoint 2013 Seite 1 von 6 Inhaltsverzeichnis Einleitung... 2 Vorbereitungen...

Mehr

Mobile Doku mit altbekannten Werkzeugen. Prof. Sissi Closs

Mobile Doku mit altbekannten Werkzeugen. Prof. Sissi Closs Mobile Doku mit altbekannten Werkzeugen Mobile Doku? Ein neues Buzz-Wort. Dazu später noch der neue tekom Leitfaden. Warum keine klassische Web-Help/Seite am mobilen Gerät? kein schönes Bedienerlebnis

Mehr

Smarte Phone-Strategie

Smarte Phone-Strategie Seite 1 / 5 Das mobile WEB.DE Smarte Phone-Strategie Als Jan Oetjen im Oktober 2008 im 1&1 Konzern das Ruder der Portalmarke WEB.DE übernahm, war der Weg ins mobile Internet bereits ins Auge gefasst. Schon

Mehr

CloudMatic V1.0. Inhalt

CloudMatic V1.0. Inhalt CloudMatic V1.0 Inhalt Einleitung... 2 CCUs hinzufügen... 3 meine-homematic.de... 4 Eigenes VPN... 4 View Editor... 5 Übersicht... 5 Allgemeine Einstellungen... 6 Kanäle hinzufügen... 6 Spezielle Kanäle...

Mehr

Anleitung TYPO3 Version 4.0

Anleitung TYPO3 Version 4.0 Publizieren im Internet mit dem Content Management System TYPO3: (Referenzprojekte unter www.aloco.ch/referenzen/ ). Anleitung TYPO3 Version 4.0 Fragen beantworten wir gerne: ALOCO GmbH Hirschengraben

Mehr

Bedienungsanleitung GOZ-Handbuch der Landeszahnärztekammer Baden-Württemberg

Bedienungsanleitung GOZ-Handbuch der Landeszahnärztekammer Baden-Württemberg Bedienungsanleitung GOZ-Handbuch der Landeszahnärztekammer Baden-Württemberg LZK BW 12/2009 Bedienungsanleitung GOZ-Handbuch Seite 1 Lieferumfang Zum Lieferumfang gehören: Eine CD-Rom GOZ-Handbuch Diese

Mehr

Autorensysteme für mobile Anwendungen - Totgesagte leben länger. Prof. Dr. Michael Bauer 25.10. 2012 Autorensysteme

Autorensysteme für mobile Anwendungen - Totgesagte leben länger. Prof. Dr. Michael Bauer 25.10. 2012 Autorensysteme Autorensysteme für mobile Anwendungen - Totgesagte leben länger Was ist, was will ein Autor? Produzent interaktiver, multimedialer Inhalte geschlossene Einheiten (Apps) keine Grenzen für Kreativität Entwicklungs-

Mehr

LaVida. Mobile Endgeräte. Andreas Neupert

LaVida. Mobile Endgeräte. Andreas Neupert LaVida Mobile Endgeräte Andreas Neupert Einleitung 1 33 Was? 1) Android a. Hardware b. Entwickeln i. Tools ii. Architektur & Konzepte iii. Google App Inventor c. Benutzen versus 2) WP 7 a. Hardware b.

Mehr

Einleitung. 1.1 Für wen ist dieses Buch geeignet? 4 1.2 Für wen ist dieses Buch eher nicht geeignet? 5 1.3 Was erwartet Sie in diesem Buch?

Einleitung. 1.1 Für wen ist dieses Buch geeignet? 4 1.2 Für wen ist dieses Buch eher nicht geeignet? 5 1.3 Was erwartet Sie in diesem Buch? Einleitung 1.1 Für wen ist dieses Buch geeignet? 4 1.2 Für wen ist dieses Buch eher nicht geeignet? 5 1.3 Was erwartet Sie in diesem Buch? 6 2 1 Einleitung Digitale Magazine gibt es schon seit ein paar

Mehr

SEO für TYPO3 Redakteure

SEO für TYPO3 Redakteure SEO für TYPO3 Redakteure Dass Suchmaschinen-Optimierung - kurz SEO - mittlerweile fester Bestandteil einer guten Webseite ist, steht sicherlich außer Frage. Leider sprechen SEO-Experten oft eine kryptische

Mehr

KOMMUNIKATION IST ALLES

KOMMUNIKATION IST ALLES KOMMUNIKATION IST ALLES ÜBER UNS Wir sind eine Full-Service Agentur aus Mannheim, die deutschlandweit tätig ist. Unser Schwerpunkt liegt in der Entwicklung, Realisierung und Betreuung von Internetprojekten

Mehr

Zeiterfassung-Konnektor Handbuch

Zeiterfassung-Konnektor Handbuch Zeiterfassung-Konnektor Handbuch Inhalt In diesem Handbuch werden Sie den Konnektor kennen sowie verstehen lernen. Es wird beschrieben wie Sie den Konnektor einstellen und wie das System funktioniert,

Mehr

Benutzerhandbuch WordPress

Benutzerhandbuch WordPress Benutzerhandbuch WordPress Handbuch zur Erstellung eines Weblogs Copyright 2008 by Eva-Maria Wahl & Dennis Klehr Inhaltsverzeichnis 1. Einführung 3 1.1 Blog 3 1.2 Web 2.0 3 1.3 Content Management System

Mehr

Hinweise zu Java auf dem Mac:

Hinweise zu Java auf dem Mac: Hinweise zu Java auf dem Mac: 1. Möglichkeit zum Überprüfen der Java-Installation / Version 2. Installiert, aber im Browser nicht AKTIVIERT 3. Einstellungen in der Java-KONSOLE auf Deinem MAC 4. Java Hilfe

Mehr

Inhaltsverzeichnis. 1. Remote Access mit SSL VPN 1 1 1 1 2-3 3 4 4 4 5 5 6

Inhaltsverzeichnis. 1. Remote Access mit SSL VPN 1 1 1 1 2-3 3 4 4 4 5 5 6 Inhaltsverzeichnis. Remote Access mit SSL VPN a. An wen richtet sich das Angebot b. Wie funktioniert es c. Unterstützte Plattform d. Wie kann man darauf zugreifen (Windows, Mac OS X, Linux) 2. Aktive WSAM

Mehr

. TYPO3-Plug-in u:cris

. TYPO3-Plug-in u:cris . TYPO3-Plug-in u:cris Zentraler Informatikdienst der Universität Wien Stand: Jänner 2014 TYPO3-Version 4.5 Dieses Handbuch ist eine Übersicht zum Einsatz des TYPO3-Plug-ins u:cris. Naturgemäß würde die

Mehr

Mobile Lernstrategien mit Moodle

Mobile Lernstrategien mit Moodle Mobile Lernstrategien mit Moodle Tobias Hauser Thomas Kraehe Arrabiata Solutions GmbH Arrabiata Solutions GmbH 1 UNSER HINTERGRUND Arrabiata Solutions GmbH Full Service E-Learning Agentur 8 Jahre Moodle

Mehr

MOBILE ENTERPRISE APPLICATION PLATFORM (MEAP)

MOBILE ENTERPRISE APPLICATION PLATFORM (MEAP) MOBILE ENTERPRISE APPLICATION PLATFORM (MEAP) Oliver Steinhauer.mobile PROFI Mobile Business Agenda MOBILE ENTERPRISE APPLICATION PLATFORM AGENDA 01 Mobile Enterprise Application Platform 02 PROFI News

Mehr

1. Software-Plattform Android Android. Was ist Android? Managed Code, Angepasste Java Virtual Machine

1. Software-Plattform Android Android. Was ist Android? Managed Code, Angepasste Java Virtual Machine 1. Software-Plattform Android Android Was ist Android? Plattform und Betriebssystem für mobile Geräte (Smartphones, Mobiltelefone, Netbooks), Open-Source Linux-Kernel ab 2.6, aktuell 3.8 Managed Code,

Mehr

Sigrid Born Jari-Hermann Ernst. Content Management mit TYPO3 CMS. Inklusive CD-ROM

Sigrid Born Jari-Hermann Ernst. Content Management mit TYPO3 CMS. Inklusive CD-ROM Sigrid Born Jari-Hermann Ernst Content Management mit TYPO3 CMS Inklusive CD-ROM Vorwort 11 Willkommen bei TYPO3 CMS für Kids! 11 Warum TYPO3 CMS? 12 Wie dieses Buch aufgebaut ist 14 Brauchst du Voraussetzungen?

Mehr

Loslegen mit Contrexx: In 10 Schritten zur professionellen Webseite.

Loslegen mit Contrexx: In 10 Schritten zur professionellen Webseite. Loslegen mit Contrexx: In 10 Schritten zur professionellen Webseite. Autor: Nicolas Müller Juli 2012 www.contrexx.com 1 Einleitung Diese Anleitung soll Ihnen helfen eine professionelle Webseite zu erstellen

Mehr

HTML5. Grundlagen der Erstellung von Webseiten. Linda York, Tina Wegener. 1. Ausgabe, Dezember 2011 HTML5

HTML5. Grundlagen der Erstellung von Webseiten. Linda York, Tina Wegener. 1. Ausgabe, Dezember 2011 HTML5 Linda York, Tina Wegener HTML5 Grundlagen der Erstellung von Webseiten 1. Ausgabe, Dezember 2011 HTML5 2 HTML5 - Grundlagen der Erstellung von Webseiten 2 Die erste Webseite mit HTML erstellen In diesem

Mehr

Leistungen und Referenzen. 30. September 2013

Leistungen und Referenzen. 30. September 2013 Leistungen und Referenzen 30. September 2013 Seite 2 Agentur für digitale Lösungen Konzepte und Entwicklung Unsere vielfältigen Erfahrungen haben gezeigt, dass es unseren Kunden an neuen Ideen nicht mangelt.

Mehr

MEHR FUNKTIONEN, MEHR E-COMMERCE:

MEHR FUNKTIONEN, MEHR E-COMMERCE: MEHR FUNKTIONEN, MEHR E-COMMERCE: XT:COMMERCE PLUGIN BB ENRICHED SITEMAP XT:COMMERCE PLUGIN BB ENRICHED SITEMAP Das Plugin Blackbit Enriched Sitemap reichert den Export-Feed für die Google-Sitemap mit

Mehr

Mobile Apps mit DSLs. und entfernter Codegenerierung. Codierst Du noch oder generierst Du schon? Powered by

Mobile Apps mit DSLs. und entfernter Codegenerierung. Codierst Du noch oder generierst Du schon? Powered by Mobile Apps mit DSLs C1 und entfernter Codegenerierung Codierst Du noch oder generierst Du schon? Generative Software GmbH Freiburg Inhalt Plattformabhängige Entwicklung JavaScript Firefox OS Java Android

Mehr

Bring Your Own Device in der Industrie

Bring Your Own Device in der Industrie Bring Your Own Device in der Industrie Geht das wirklich? 27.05.2014 Thomas Sorg BERNER & MATTNER Überblick BERNER & MATTNER Systemtechnik GmbH ASSYSTEM Founded: 1979 Employees: 450 Headquarters: Munich,

Mehr

Nutzung der VDI Umgebung

Nutzung der VDI Umgebung Nutzung der VDI Umgebung Inhalt 1 Inhalt des Dokuments... 2 2 Verbinden mit der VDI Umgebung... 2 3 Windows 7... 2 3.1 Info für erfahrene Benutzer... 2 3.2 Erklärungen... 2 3.2.1 Browser... 2 3.2.2 Vertrauenswürdige

Mehr

Neue Oberfläche April 2013. am Montag, den 15. April 2013. Folie 1

Neue Oberfläche April 2013. am Montag, den 15. April 2013. Folie 1 Neue Oberfläche April 2013 am Montag, den 15. April 2013 Folie 1 Erklärung der Icons Die Icons, welche in jeder Update-Kommunikation verwendet werden, haben folgende Bedeutung: Neuerung (aktiv) Direkt

Mehr