Anzeige
Tutorialbeschreibung

Web-Apps erstellen (Teil 05): iWebKit für den speziellen iOS-Look (1)

Web-Apps erstellen (Teil 05): iWebKit für den speziellen iOS-Look (1)

Es gibt ganz unterschiedliche Möglichkeiten, um Apps zu erstellen. Zunächst einmal könnt ihr natürlich auf klassisches HTML5 und CSS3 setzen. Ein paar Formatierungen hier, einige App-spezifische Dinge da, und schon entsteht die App. Das Problem dabei: Damit sich das Ganze dann auch tatsächlich wie eine App anfühlt, braucht man schon einiges an Know-how in Sachen Web-Entwicklung. Nun ist nicht jeder, der eine App haben will, Web-Entwickler bzw. -Designer. Für all diejenigen gibt es diverse Frameworks. Eines davon ist iWebKit, das ich euch jetzt vorstellen werde.

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


Bevor ich zeige, wie man eine Web-App auf Basis von iWebKit erstellt, wird euch zunächst natürlich das mögliche Ergebnis interessieren. Werft dazu einen Blick auf die Seite http://snippetspace.com/iwebkit/demo/.

Bilder



 
So könnte eure App also aussehen. Wenn ihr euch die Beispiel-App anseht, wird euch eines direkt auffallen: Das Ganze orientiert sich stark am typischen iPhone-Stil. Und tatsächlich ist das genau das Ziel von iWebKit. Dieses Framework ermöglicht u.a. die Definition von Anwendungen, die wie klassische iPhone-Listen aussehen.

Bilder



 
Darüber hinaus werden aber auch Dinge wie App-Store-Listen, iTunes und iPod unterstützt.

Bilder



 
Wenn ihr eure App also in einem dieser Stile entwickeln wollt, dann ist iWebKit perfekt für euch geeignet.

Das Framework bietet eine Grundlage, auf deren Basis sich Apps entwickeln lassen. Von einem WYSIWYG-Editor o.Ä. kann allerdings keine Rede sein. (Wenngleich ihr einen WYSIWYG-Editor wie Dreamweaver nutzen könnt, um die eigentliche App auf Basis von iWebKit umzusetzen). Dennoch ist das Framework natürlich äußerst hilfreich.

Wer bislang noch nicht mit einem Framework gearbeitet hat, fragt sich an dieser Stelle möglicherweise, was sich hinter diesem etwas sperrig klingenden Begriff verbirgt. Ein solches Framework bietet euch einen Rahmen, in dessen "Grenzen" ihr eigene Anwendungen erstellen könnt. Letztendlich bekommt ihr ein Grundgerüst geliefert, mit dessen Hilfe ihr eigene Apps im iPhone-Stil erstellen könnt. Um besondere Design- und Funktions-Aspekte müsst ihr euch dabei nicht kümmern, das wird euch von iWebKit abgenommen.

Zunächst ein Blick auf eine Auswahl der wichtigsten Features:

• Vollbildmodus
• Pop-ups im iPhone-Stil
• Zugriff auf iPhone-Funktionen wie SMS, Telefon, Mail und iTunes
• RSS-Feeds
• Design-Anpassungen durch Themes
• HTML-Kenntnisse kaum nötig

Ihr seht, das Framework hat durchaus interessante Funktionen zu bieten. Wollte man die alle selbst entwickeln, müsste man zumindest gute Kenntnisse in HTML und CSS besitzen. Beim Einsatz von iWebKit sind diese hingegen nicht zwingend nötig.

 
Die offizielle Webseite von iWebKit findet ihr unter http://snippetspace.com/portfolio/iwebkit/.

Bilder



Von dort kann man das Framework dann auch direkt herunterladen. Angeboten wird es in zwei Varianten, nämlich kostenlos und kommerziell.

• Kostenlos – iWebKit wird unter der GNU LESSER GENERAL PUBLIC LICENSE vertrieben, wodurch es prinzipiell kostenlos verwendet werden kann.
• Kommerziell – Hier werden Unterschiede zwischen kleinen und größeren Projekten gemacht. Prinzipiell muss man für iWebKit zahlen, wenn man es in einem Tool verwenden will, für das wiederum andere Leute bezahlen müssen. Unternehmen, die ihre Produkte für weniger als 60 Euro bzw. weniger als 5 Euro pro Monat anbieten, bekommen die Lizenz für 19,99 Euro. Alles, was darüber hinausgeht, muss mit dem Entwickler über die Kontakt-Webseite individuell vereinbart werden.

 
Ich werde an dieser Stelle von der kostenlosen Variante ausgehen. Diese Version reicht nämlich für einen ersten Test allemal. So könnt ihr euch einen guten Eindruck davon verschaffen, ob das Framework tatsächlich das leistet, was ihr euch vorstellt. Später könnt ihr dann natürlich problemlos auf die kommerzielle Version wechseln.

Ladet euch also das Framework über den Free-Download-Button herunter.

Bilder



 
iWebKit kommt in einem Zip-Archiv daher, in dem verschiedene Dinge enthalten sind.

Framework – Das sind die eigentlichen Framework-Dateien.
iWebKit demo – Dieses Verzeichnis enthält eine Demo-Anwendung.
changelog.pdf – Darin sind die Änderungen zu sehen, die in der aktuellen Framework-Version neu hinzugekommen sind.
license.pdf – Die Lizenzbestimmungen sind darin enthalten.
Userguide.pdf – Dieses Dokument beschreibt (denkbar kurz), wie sich das Framework einsetzen lässt. Leider handelt es sich dabei mitnichten um eine echte Dokumentation.

Um mit dem Framework zu arbeiten, entpackt ihr das Archiv zunächst.

Ich werde die Arbeit mit dem Framework anhand eines konkreten Beispiels zeigen. Um dieses nachvollziehen zu können, legt ihr euch am besten ein neues Verzeichnis (z.B. app) an. Kopiert in dieses Verzeichnis die folgenden Dinge aus dem iWebKit-Framework-Verzeichnis.

css
images
javascript
php
thumbs

Ihr müsst die App nicht von Grund auf selbst erstellen. Besser ist es, wenn ihr auf eine gesunde Basis zurückgreift. Eine solche Basis könnt die im Framework-Verzeichnis liegende "index.html" sein. Kopiert diese also in euer neues app-Verzeichnis. Die Verzeichnisstruktur sollte dann insgesamt folgendermaßen aussehen:

css
images
javascript
php
thumbs
index.html

 
Damit sind die Vorarbeiten abgeschlossen und ihr könnt direkt mit der Entwicklung eurer eigenen App loslegen. Öffnet dazu die "index.html" im Editor eurer Wahl.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta content="yes" name="apple-mobile-web-app-capable" />
 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
 <meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, 

 user-scalable=no" name="viewport" />
 <link href="css/style.css" rel="stylesheet" media="screen" type="text/css" />
 <script src="javascript/functions.js" type="text/javascript"></script>
 <title>Title of your page</title>
 <meta content="keyword1,keyword2,keyword3" name="keywords" />
 <meta content="Description of your page" name="description" />
 </head>
 <body>
 <div id="topbar">
 </div>
 <div id="content">
 </div>
 <div id="footer">
 <!-- Support iWebKit by sending us traffic; please keep this 
  footer on your page, consider it a thank you for my work :-) -->
 <a class="noeffect" href="http://snippetspace.com">iPhone site powered by
 iWebKit</a></div>
 </body>
 </html>

Das bildet den Rahmen für eure App.

 
Wenn ihr die Seite im Browser aufruft, ist zunächst einmal nichts Spektakuläres zu sehen.

Bilder



Aber immerhin lässt sich schon mal erahnen, in welche Richtung sich die App entwickeln wird. Denn ohne eigenes Zutun besitzt eure App jetzt schon mal eine typische Kopfzeile. Zudem erinnert das gewählte Blau an eine typische iPhone-Anwendung.

Das war es an dieser Stelle. Im nächsten Tutorial wird die App Schritt für Schritt ausgebaut. Dabei lernt ihr dann – quasi nebenher – den Umgang mit iWebKit ausführlich kennen.

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 16.10.2016 - 15:15

Herzlichen Dank für das Video.

Portrait von Kundentest
  • 14.06.2014 - 17:39

Herzlichen Dank für das Tutorial.

Portrait von Kundentest
  • 14.06.2014 - 17:35

Herzlichen Dank für das Video.

Portrait von MicroSmurf
  • 11.06.2014 - 22:26

Vielen Dank für den weiteren Teil.

Portrait von Caesarion2004
  • 11.06.2014 - 16:27

Vielen Dank für diesen informativen Teil der Reihe in Textformat.

Portrait von johen
  • 11.06.2014 - 14:43

Danke für die Textversion der Reihe.

Portrait von BOPsWelt
  • 11.06.2014 - 13:49

Vielen Dank für diesen Teil, interessante Reihe. :)

Portrait von Domingo
  • 11.06.2014 - 12:25

Bin gespannt wie es weiter geht.

Portrait von Steve007
  • 18.05.2014 - 13:45

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

Portrait von MicroSmurf
  • 14.05.2014 - 23:14

Sehr interessant. Vielen Dank.

Portrait von Caesarion2004
  • 14.05.2014 - 20:46

Vielen Dank für das informative Tutorial. Mal was ganz Neues.

x
×
×