Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

t3n 14

Teil 2 – Eigene Webapplikation für das iPhone mit iUI entwickeln: Webentwicklung für das iPhone

    Teil 2 - Eigene Webapplikation für das iPhone mit iUI entwickeln: Webentwicklung für das iPhone

Der erste Teil dieser Serie hat gezeigt, wie Sie eine bestehende Website für das iPhone optimieren können. Diesmal geht es darum, eine Website explizit für das iPhone zu entwickeln. Das ist besonders sinnvoll bei Webdiensten, die häufig von unterwegs aus angesurft werden, zum Beispiel der Abfahrtsplan der Nahverkehrsbetriebe oder die Website eines Taxiunternehmens. Aber auch „gewöhnliche“ Websites erleichtern ihren Besuchern die Navigation, wenn sie für das iPhone optimiert sind. Wir zeigen, wie Sie Ihrer Website mit iUI eine Benutzeroberfläche verpassen, die an native iPhone-Applikationen erinnert.

Das iPhone besitzt ein neuartiges Bedienkonzept und bietet dank kapazitivem Touchscreen eine außergewöhnliche Benutzeroberfläche. Viele Applikationen aus dem AppStore halten sich an die Designparadigmen aus Cuppertino. Warum also nicht auch Webapplikationen? Schließlich führt einen Besucher nichts besser durch eine Website als vertraute Mechanismen. Das heißt nicht, dass das eigene GUI-Design keine Individualität besitzen soll. Vielmehr geht es darum, den Besucher mit gewohnten Navigationskonzepten zu unterstützen. Wir zeigen, wie Sie einer Website mit der Bibliothek iUI das Look&Feel einer nativen iPhone-Applikation verpassen.

Neu eingekleidet

Am Anfang der Entwicklung steht das Design. Grundsätzlich stehen dabei zwei Ansätze zur Wahl: ein komplett eigenes Design oder ein Design, das sich am Look & Feel des iPhone-Betriebssystems orientiert. Für ersteres spricht sicherlich die bessere Integration der Firmen-CI. Der zweite Ansatz lockt mit einer einfacheren Bedienung, da die Nutzer diese schon gewohnt sind. Kombiniert mit eigenen Designelementen wie Farbe oder Logo, kann sich auch dieser Ansatz in das Firmen-CI einpassen.

###WORKAROUND###

Die in der Regel graue Hintergrundfarbe lässt sich leicht gegen die Hausfarbe tauschen, die Listenmenüs mit einem dezenten Hintergrundlogo aufhübschen und Buttons individuell gestalten. Doch wie immer sollte man genau abwägen, wie weit man geht – weniger ist hier oft mehr. Denn wenn der Besucher durch allerlei optische Spielereien den Überblick verliert, hilft es wenig, wenn die Bedienung ansonsten einer normalen Applikation ähnelt.

Mit dem Ziel, auf Basis von Standard-HTML iPhone-optimierte Navigationen und Oberflächen entwickeln zu können, wurde das Projekt iUI [1] von Joe Hewitt (Entwickler von Firebug und DOM Inspector) aus der Taufe gehoben. Dieses Framework bietet alles, was zur Gestaltung einer Website im iPhone-Style notwendig ist. Dazu gehören auch Animationen bei Seitenübergängen in Menüs. Mit der Einbindung von iUI ist es ein Leichtes, eine Website im iPhone-Style zu kreieren, da lediglich die Seitenstruktur und die Inhalte erstellt werden müssen. Um alles Weitere kümmert sich iUI.

  • Seite:
  • 1
  • 2
  • 3
  • 4
  • 8

Finde einen Job, den du liebst

Bitte beachte unsere Community-Richtlinien

3 Reaktionen
Alex Ebner

Hmm, das ist sonderbar. Normalerweise sollte sich der mobile Safari bei Links genaus verhalten wie jeder andere Browser. Sprich das aktuelle Fenster/Tab als Target wählen. Sind das relative oder absolute Pfade? Wenn es letztere sind, würde ich zum testen mal auf relative Pfade umstellen. Eventuell grätscht auch noch eine BaseURL rein. Ich hatte so ein ähnliches Problem, als ich die WebApp mit http://domain.de aufgerufen habe, und die BaseURL mit http://www.domain.de drin war. Mehr fällt mir im Augenblick auch nicht dazu ein.

macwoern

Mist! Da wurde oben der Meta-Tag ausgeblendet... ich lass mal die eckigen Klammern weg... müsste ihr euch dazudenken:

meta name="apple-mobile-web-app-capable" content="yes"

macwoern

Hallo Ihr Beiden,

ich hätte da mal eine Frage an Euch:
Folgende Situation. Wir haben einen Web-Shop und dafür auch eine abgespeckte Form für mobile Geräte. Da für die Entwicklung für eine richtige App von unseren Gesellschaftern noch kein Geld zur Verfügung gestellt wird, denken wir drüber nach die abgespeckte Variante etwas "aufzuhübschen" damit sie wenigsten so aussieht, als wäre es eine App.

Nun soll dabei auch die Titelleiste und die Fußleiste nicht zu sehen sein. Das geht, in dem man im HEAD den Eintrag hinzufügt und die Webseite dann als Icon auf dem Homescreen abspeichert.

Alles schön und gut. Aber jetzt hab ich festgestellt, daß wenn man auf einen Link auf dieser Seite klickt, bleibt die Anwendung nicht in der WebApp sondern macht Safari separat auf und öffnet dort die Seite - hat dann natürlich wieder die Titel- und Fußleiste.

Ich hoffe, Ihr bekommt das noch mit, da der Artikel ja schon recht alt ist....

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden