Artikel Offline, mit Icon und im Vollbild: Tipps für den Entwurf eigener Web-Applikationen
Facebook
Twitter
Kommentieren (13)

Offline, mit Icon und im Vollbild: Tipps für den Entwurf eigener Web-Applikationen

13 Kommentare

Zwar stehen interessierten Web-Entwickler bereits zahlreiche, komplett kostenlose Frameworks für die Programmierung eigener, iPhone-kompatibler Web-Applikationen zur Verfügung. Stellenweise bieten die Pakete (wie JQtouch oder Webapp-Net, um nur die beiden populärsten zu nennen) jedoch einen wesentlich größeren Funktionsumpfang, als vom Projekt benötigt. Hier helfen eine Hand voll Links und ein einfacher Texteditor. Denn: Gerade kleinere Web-Applikationen können problemlos auf die Integration eines umfangreichen Frameworks verzichten. Hier lassen sich Ladezeiten reduzieren – auf die Einarbeitung in fremden Code kann vollständig verzichtet werden.

Worauf wollen wir hinaus? Ein Beispiel:
Für den Einsatz unterwegs, haben wir eine iPhone-kompatible Version des MB-Spiels Wort-Tüftel gesucht. Aus zufällig gewürfelten Buchstaben, müssen hier mindestens vier Zeichen lange Wörter gebildet werden. Für jedes Wort gibt es einen Punkt. Doppelte Worte und Eigennamen zählen nicht. Nach der erfolglosen AppStore-Suche, bot sich der schnelle Entwurf einer Web-Applikation an. Und damit kommen wir zu den oben angekündigten Links.

wurfeln.jpg


Bildschirm-Ausrichtung, Zoom-Stufen und Co.: Hier von Apple beschrieben, erlaubt der HTML-Tag “Viewport” das Setzen einer Hand voll Grundeinstellungen. Wie breit soll die Web-Applikation beim ersten Aufruf dargestellt werden? Darf der Besucher zoomen? Soll die Web-Applikation einen bestimmten Bereich bereits vergrößert darstellen? Der Support-Artikel “Configuring the Viewport” klärt auf.

Unterstützung für den Vollbild-Modus: Ebenfalls von Apple definiert, lässt sich mit dem HTML-Tag “apple-mobile-web-app-capable” festlegen, ob die Web-Anwendung auch im Vollbild, also ohne die MobileSafari-Adresszeile und ohne die sonst angezeigten Bedienelemete des Browsers, arbeiten können soll. Bradkellett erklärt den richtigen Einsatz des Tags in seinem Blog – Ajaxian die zusätzlich verfügbaren Optionen. Entscheidet man sich für den Vollbildmodus, muss die Applikation als Web-Clip auf dem Homescreen abgelegt werden um diesen auch zuzulassen.

Das richtige Icon: Soll die auf dem Homescreen abgelegte Web-Applikation mit einem eigenen Icon ausgestattet werden, hilft auch hier das passende HTML-Tag bzw. ein richtig benanntes Bild. Liegt eine “apple-touch-icon.png”-benannte Grafik-Datei im Root-Verzeichnis des Web-Servers greift das iPhone automatisch darauf zu und benutzt das Bild als Icon. Alternativ lässt sich das zu verwendende Icon im Quelltext der Web-Applikation definieren. allinthehead beschreibt beide Möglichkeiten.

OnTouch statt OnClick: Wer mit Javascript arbeitet – der intelligente Kern fast aller Web-Applikationen – sollte sich die auf cubiq.org abgelegten Ausführungen zum OnTouch-Event durchlesen. Das Javascript-Ereignis kann Verzögerungen bei der Interaktion mit der Web-Applikation ausmerzen und lässt sich relative einfach implementieren

Auch offline verfügbar: Bis zu 5MB an Daten lassen sich auf dem iPhone ablegen und ermöglichen euren Web-Applikationen, so auch im Flugmodus weiter zu arbeiten. Eine “Cache Manifest” genannte Text-Datei definiert hier, welche Dateien auf dem iPhone gespeichert werden sollen und lässt sich sowohl dynamisch als auch von Hand erstellen. Richtig gute Anleitungen zum Thema gibt es bei thecssninja und auf kentbrewster.com.

Sicher. Unsere Tipps kratzen bislang nur an der Oberfläche und sind weit entfernt von Web-Applikationen wie Pie Guy- für die auch offline einsatzbereite Wort-Tüftel Applikation, hat es jedoch gereicht. Empfehlenswerte Links, sind in den Kommentaren gern gesehen.

Diskussion 13 Kommentare.
Dieser Unterhaltung fehlt Deine Stimme.
  1. Vielen Dank für die Links ;)

    Ich habe leider festgestellt das sich ein Radiostream, den man aus einer fullscreen geöffneten Seite öffnet, nicht im Hintergrund ausführen lässt.

    Anders als es direkt aus dem Safari möglich ist.

    Somit war meine Webapp gestorben^^

    gruß

    — Sebastian
    • Wie wäre es mit http://iphonetuner.de/ ???

      Läuft übrigens in der Regel stabiler als die Apps der einzelnen Radiostationen!

      Radio läuft im Hintergrund, kannste andere Sachen gleichzeitig auf deinem iPhone erledigen!

      — Expertenmeinung
      • Ja iphonetuner kenne ich auch^^

        nur wollte ich eine kleine webapp für ein bestimmtes Radio basteln;)

        und nicht so eine ganze Sammlung.

        Falls jemand zufällig weiß wie man soetwas löst, bitte hier antworten.

        — Sebastian
      • Schreib den Macher der App an, er wird deine Stream-Adresse gerne einpflegen. So würde ich das zumindest machen – geht wohl schneller… welchen Sender meinst du denn?

        — Expertenmeinung
    • Ich relativ schwer :)

      Wer du damit bisher gar nichts am Hut hattest, solltest du dich erst gar nicht damit beschäftigen. So nebenbei in 5min kann man auch mit den angesprochenen Hilfen als Laie (dazu zähle ich mich auf diesem Gebiet natürlich trotz einiger Bemühungen auch) keine tollen Anwendungen zaubern, die zu ewigem Reichtum, Ruhm, Girls usw… führen wird.

      Mindestens in HTML-Programmierung solltest du den Durchblick haben!

      — Expertenmeinung
      • HTML ist keine Programmiersprache!!!
        HTML ist eine Codiersprache. Javascript wäre die Programmiersprache.

        — mraero
      • Das ist sicherlich richtig – ich habe mich nur ungenau ausgedrückt und werde mich natürlich deswegen gleich selbst auspeitschen – nur, damit die Anwendung halbwegs nach was aussieht, sind wohl HTML-KENNTNISSE (besser so, Meister?) nicht verboten, oder? :)

        — Expertenmeinung
  2. Hmm, die nötigen Kenntnisse habe ich. Nur was soll ich denn entwickeln? Ich wüsste nichts. Würde sowas aber gerne mal machen.

    — Nicolas

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Der iPhone-Ticker ist Deutschlands führendes Online-Magazin rund um das iPhone. Seit 2007 informieren wir täglich
über das Apple-Telefon und damit in Verbindung stehende Soft- und Hardwareprodukte.
Insgesamt haben wir 14301 Artikel in den vergangenen 2617 Tagen veröffentlicht. Und es werden täglich mehr.


ifun - Love it or leave it   ·   Copyright © 2014 aketo GmbH - Alle Rechte vorbehalten   ·   Impressum   ·   Auf dieser Seite werben   ·   RSS