Anzeige
Tutorialbeschreibung

Web-Apps erstellen (Teil 01): Native vs. Web-Apps

Web-Apps erstellen (Teil 01): Native vs. Web-Apps

Es sind immer mehr Smartphones und Tablets im Umlauf. Das ist sicherlich kein Geheimnis. Ebenso wenig dürfte es vor diesem Hintergrund verwundern, dass Webseiten eben auch immer häufiger per Smartphone aufgerufen werden. Genau an diesem Punkt setzt dieses Video-Training an. Ihr werdet sehen, wie ihr eure Webseite so gestalten könnt, dass diese wie eine echte App wirkt. Und damit es an dieser Stelle nicht zu Missverständnissen kommt: Es handelt sich bei den hier erstellten Web-Apps nicht um eine mobile Version der Webseite bzw. ein responsives Design.

... übrigens findest du die komplette Serie hier: Web-Apps programmieren - das Training - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Natürlich kann man seine Webseite so gestalten, dass sie am Desktop und auf dem Smartphone nutzbar ist. Darum geht es in dieser Tutorial-Reihe jedoch explizit nicht. Hier stehen vielmehr die sogenannten Web-Apps im Vordergrund. Dabei handelt es sich um Apps, die aus einer Kombination von HTML, CSS und JavaScript erstellt werden.

Bilder



Diese Web-Apps sehen tatsächlich wie echte Apps aus und bieten durchaus Funktionen, die man so auch von herkömmlichen Apps kennt. So könnt ihr beispielsweise den aktuellen Standort erkennen und auf Bewegungen des Smartphones reagieren.

 
Bevor die Web-Apps vorgestellt werden, zunächst noch einige Begriffsdefinitionen. Denn im Umfeld der App-Entwicklung werden euch ganz unterschiedliche Begriffe begegnen, deren Bedeutung möglicherweise nicht jedem klar sein wird.

Zunächst einmal wären da die nativen Apps. Das sind die klassischen Apps, die man auf seinem Smartphone installiert.

Bilder



Diese Apps haben natürlich durchaus ihre Stärken. So kann man damit tatsächlich auf die wichtigsten Funktionen der Smartphones zugreifen, also beispielsweise auch auf die Kamera, Sprache und die verschiedensten Sensoren. Ihr kennt Apps natürlich und wisst, wie leistungsfähig sie sein können. Das Problem dabei: Diese Leistungsfähigkeit muss natürlich von euch per Programmierung umgesetzt werden. Und das setzt zweifellos einiges an Know-how voraus.

 
Wer das nicht hat, muss die Entwicklung der App in andere (externe) Hände legen. Hier könnt ihr von Investitionskosten für eine sehr, sehr einfache App von mindestens 1.000 Euro ausgehen. Das ist aber tatsächlich nur die unterste Grenze. Komplexe Apps kosten schnell mehrere Zehntausend, teilweise auch mehr als 500.000 Euro.

Erschwerend kommt hinzu, dass eine App dann immer exakt für eine Zielplattform entwickelt wird. Wollt ihr also eure App beispielsweise für Android und iOS veröffentlichen, müsst ihr quasi zwei Eigenentwicklungen machen.

Hier mal eine Auswahl möglicher Shops und Zielplattformen.

• App Store von Apple
• Play Store
• Windows Phone Marketplace
• RIM
• Ovi Store
• Play Now

Ihr seht schon, dass es für „Einzelkämpfer“ ohne größeren finanziellen Background schwierig ist, all diese Stores abzudecken. Zumal man auch die Gebühren nicht vergessen darf, die von den einzelnen Plattformen erhoben werden. So werden beispielsweise für das iOS Developer Program Jahresgebühren von 99 US-Dollar fällig.

Zudem entscheidet beispielsweise Apple selbst, ob eure App tatsächlich im App-Store veröffentlicht wird. Dazu wird eure App einer entsprechenden Prüfung unterzogen. Stellt sich dabei heraus, dass die App nicht mit den Richtlinien von Apple übereinstimmt, wird sie nicht für den App-Store zugelassen.


 

Web-Apps als Alternative

Genau an diesem Punkt kommen die sogenannten Web-Apps ins Spiel. Denn diese kann zunächst einmal jeder erstellen, der auch klassische Webseiten entwickeln kann. Ein bisschen HTML, CSS und JavaScript (vor allem Frameworks wie jQuery mobile usw.) genügen, um wirklich ansprechende Ergebnisse zu erzielen.

Bilder



 
Der größte Vorteil dieser Web-Apps ist aber zweifellos ihre plattformübergreifende Nutzbarkeit. Ihr braucht tatsächlich nur eine Web-App zu erstellen. Diese kann dann von iOS-Anwendern ebenso wie von Android-Nutzern verwendet werden. Ihr macht euch somit unabhängig von den App-Store-Betreibern. Zudem braucht ihr für die Entwicklung von Web-Apps keine aufwendigen Entwicklungsumgebungen. Ihr könnt ganz normal, wie ihr das von der Web-Entwicklung her gewohnt seid, mit HTML-Editoren wie Dreamweaver, UltraEdit usw. arbeiten. Auch das ist sicherlich ein riesiger Vorteil.

Bilder



Schöne heile Web-App-Welt also? Größtenteils ja, es gibt aber auch einige Nachteile, die hier nicht verschwiegen werden sollen. Zunächst einmal könnt ihr nur in begrenztem Umfang auf die Funktionen der Smartphones zugreifen. (Aus Sicherheitsaspekten ist das natürlich absolut nachvollziehbar). Das ist ein Nachteil, der aber nicht unbedingt schwer wiegen muss. Denn bei einer klassischen Web-App benötigt man die fraglichen Funktionen ohnehin meistens nicht.

Ein weiterer Nachteil ist die Offlinefähigkeit der Web-Apps. Klassische Apps funktionieren zumeist auch, wenn keine Onlineverbindung besteht. Das ist bei einer Web-App zunächst einmal nicht der Fall. Allerdings kann man auch Web-Apps so entwickeln, dass sie offline lauffähig sind. Auch dieser Aspekt wird natürlich in einem der folgenden Tutorials genauer unter die Lupe genommen.

Und dann kommt noch ein weiterer Punkt hinzu: Die Benutzeroberflächen lassen sich nur schwer mit den bekannten visuellen Effekten ausstatten, die einen Großteil der Faszination nativer Apps ausmachen. Mittlerweile holen die Web-Apps aber auch auf diesem Gebiet auf. Das verdanken diese Apps zunächst einmal den neuen Möglichkeiten, die HTML5 und CSS3 zu bieten haben. Noch wichtiger sind aber die verschiedenen Frameworks wie jQuery mobile, die beim Betrachten von Web-Apps tatsächlich das Gefühl aufkommen lassen, dass man eine native App nutzt. Kein Wunder also, dass diese Frameworks einen recht großen Teil dieser Tutorial-Reihe einnehmen werden.

Bilder



Und übrigens: Wer seine Web-App dann tatsächlich in den jeweiligen App-Stores veröffentlichen will, kann das ebenfalls erledigen. Dazu muss die App allerdings in eine native App umgewandelt werden. Dafür gibt es mittlerweile entsprechende Tools und sogar Online-Dienste. Wenn ihr also eine Web-App erstellt, bleibt es schlussendlich euch überlassen, ob ihr diese dann auch zusätzlich in den App-Stores veröffentlicht.


 

Das Ziel dieser Tutorial-Reihe

Worum geht es also in dieser Tutorial-Reihe? Ihr werdet sehen, wie ihr aus eurer Webseite eine Web-App macht. Ruft ein Besucher dann eure Webseite über die entsprechende Domain auf, gibt es eine Browserweiche. Erfolgte der Aufruf mit einem Desktop-Rechner, wird die klassische Webseite unverändert angezeigt. Sollte der Zugriff allerdings mit einem Smartphone geschehen, wird die Web-App angezeigt.

Bilder

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Balu..der..Bär
Portrait von alesiste
  • 04.11.2014 - 15:48

Besten Dank
Die Einleitung klingt schon sehr interessant!

Portrait von _soli_patient_
  • 27.06.2014 - 14:31

Besten Danke für das Tut sehr interessant...

Portrait von Kundentest
  • 14.06.2014 - 17:28

Herzlichen Dank für das Tutorial.

Portrait von Steve007
  • 14.06.2014 - 11:55

Vielen Dank für diesen weiteren Teil Deiner interessanten Reihe.

Portrait von MicroSmurf
  • 03.06.2014 - 19:14

Danke für die Textversion

Portrait von Caesarion2004
  • 31.05.2014 - 17:06

Vielen Dank für das infromative Texttutorial.

Portrait von johen
  • 31.05.2014 - 15:05

Vielen Dank für das Tutorial in Textversion .

Portrait von BOPsWelt
  • 31.05.2014 - 15:02

Vielen Dank für diese Version, freue mich schon auf die nächsten Teile. :)

Portrait von johanna52
  • 31.05.2014 - 13:36

besten danke für das Tut in Textversion

Portrait von Dineria
  • 31.05.2014 - 12:49

Danke für die Textversion der Reihe - sollte man mal selbst solch eine App erstellen müssen, sind sie zum Nachgucken und -arbeiten besser geeignet (finde ich für mich selbst zumindest)! :-)

Portrait von Steve007
  • 24.04.2014 - 15:06

Vielen Dank für Dein anschauliches Video - Training.

Portrait von Uwe367
  • 21.04.2014 - 12:15

Vielen Dank. Das war schonmal sehr informaitv. Ich bin gespannt wie es weiter geht :)

Portrait von MicroSmurf
  • 19.04.2014 - 17:10

Na, mal sehen, was noch kommt...

Portrait von fneurieser
  • 19.04.2014 - 12:07

Danke für die Einführung - klingt spannend und ich warte schon auf die nächsten Folgen

Portrait von Caesarion2004
  • 19.04.2014 - 10:58

Vielen Dank für das informative Tutorial.

Portrait von johanna52
  • 19.04.2014 - 09:53

Erstmal ein Infovideo - interessant - warte nun auf die folgenden Videos und Tuts

x
×
×