{"id":9148,"date":"2009-12-29T17:25:46","date_gmt":"2009-12-29T16:25:46","guid":{"rendered":"http:\/\/www.iphone-ticker.de\/2009\/12\/29\/offline-mit-icon-und-im-vollbild-tipps-fur-den-entwurf-eigener-web-applikationen\/"},"modified":"2009-12-29T17:25:46","modified_gmt":"2009-12-29T16:25:46","slug":"offline-mit-icon-und-im-vollbild-tipps-fur-den-entwurf-eigener-web-applikationen","status":"publish","type":"post","link":"https:\/\/www.iphone-ticker.de\/offline-mit-icon-und-im-vollbild-tipps-fur-den-entwurf-eigener-web-applikationen-9148\/","title":{"rendered":"Offline, mit Icon und im Vollbild: Tipps f\u00fcr den Entwurf eigener Web-Applikationen"},"content":{"rendered":"

Zwar stehen interessierten Web-Entwickler bereits zahlreiche, komplett kostenlose Frameworks f\u00fcr die Programmierung eigener, iPhone-kompatibler Web-Applikationen zur Verf\u00fcgung. Stellenweise bieten die Pakete (wie JQtouch<\/a> oder Webapp-Net<\/a>, um nur die beiden popul\u00e4rsten zu nennen) jedoch einen wesentlich gr\u00f6\u00dferen Funktionsumpfang, als vom Projekt ben\u00f6tigt. Hier helfen eine Hand voll Links und ein einfacher Texteditor. Denn: Gerade kleinere Web-Applikationen k\u00f6nnen problemlos auf die Integration eines umfangreichen Frameworks verzichten. Hier lassen sich Ladezeiten reduzieren – auf die Einarbeitung in fremden Code kann vollst\u00e4ndig verzichtet werden.<\/p>\n

Worauf wollen wir hinaus? Ein Beispiel:<\/strong>
\nF\u00fcr den Einsatz unterwegs, haben wir eine iPhone-kompatible Version des MB-Spiels Wort-T\u00fcftel<\/a> gesucht. Aus zuf\u00e4llig gew\u00fcrfelten Buchstaben, m\u00fcssen hier mindestens vier Zeichen lange W\u00f6rter gebildet werden. F\u00fcr jedes Wort gibt es einen Punkt. Doppelte Worte und Eigennamen z\u00e4hlen nicht. Nach der erfolglosen AppStore-Suche, bot sich der schnelle Entwurf einer Web-Applikation an. Und damit kommen wir zu den oben angek\u00fcndigten Links.<\/p>\n

<\/p>\n

\"wurfeln.jpg\"<\/p>\n

<\/a>
\nBildschirm-Ausrichtung, Zoom-Stufen und Co.:<\/strong> Hier von Apple beschrieben<\/a>, 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\u00f6\u00dfert darstellen? Der Support-Artikel „Configuring the Viewport<\/a>“ kl\u00e4rt auf.<\/p>\n

Unterst\u00fctzung f\u00fcr den Vollbild-Modus:<\/strong> Ebenfalls von Apple definiert, l\u00e4sst 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\u00f6nnen soll. Bradkellett erkl\u00e4rt den richtigen Einsatz<\/a> des Tags in seinem Blog – Ajaxian die zus\u00e4tzlich verf\u00fcgbaren Optionen<\/a>. Entscheidet man sich f\u00fcr den Vollbildmodus, muss die Applikation als Web-Clip auf dem Homescreen abgelegt werden um diesen auch zuzulassen.<\/p>\n

Das richtige Icon:<\/strong> 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\u00e4sst sich das zu verwendende Icon im Quelltext der Web-Applikation definieren. allinthehead beschreibt beide M\u00f6glichkeiten<\/a>.<\/p>\n

OnTouch statt OnClick:<\/strong> Wer mit Javascript arbeitet – der intelligente Kern fast aller Web-Applikationen – sollte sich die auf cubiq.org abgelegten Ausf\u00fchrungen<\/a> zum OnTouch-Event durchlesen. Das Javascript-Ereignis kann Verz\u00f6gerungen bei der Interaktion mit der Web-Applikation ausmerzen und l\u00e4sst sich relative einfach implementieren<\/p>\n

Auch offline verf\u00fcgbar:<\/strong> Bis zu 5MB an Daten lassen sich auf dem iPhone ablegen und erm\u00f6glichen 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\u00e4sst sich sowohl dynamisch als auch von Hand erstellen. Richtig gute Anleitungen zum Thema gibt es bei thecssninja<\/a> und auf kentbrewster.com<\/a>.<\/p>\n

Sicher. Unsere Tipps kratzen bislang nur an der Oberfl\u00e4che und sind weit entfernt von Web-Applikationen wie Pie Guy<\/a>– f\u00fcr die auch offline einsatzbereite Wort-T\u00fcftel Applikation, hat es jedoch gereicht. Empfehlenswerte Links, sind in den Kommentaren gern gesehen.<\/p>\n","protected":false},"excerpt":{"rendered":"\"wurfeln.jpg\"<\/a>

Zwar stehen interessierten Web-Entwickler bereits zahlreiche, komplett kostenlose Frameworks f\u00fcr die Programmierung eigener, iPhone-kompatibler Web-Applikationen zur Verf\u00fcgung. Stellenweise bieten die Pakete (wie JQtouch oder Webapp-Net, um nur die beiden popul\u00e4rsten zu nennen) jedoch einen wesentlich gr\u00f6\u00dferen Funktionsumpfang, als vom Projekt ben\u00f6tigt. Hier helfen eine Hand voll Links und ein einfacher Texteditor. Denn: Gerade kleinere Web-Applikationen […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[3917,211,430,141],"class_list":["post-9148","post","type-post","status-publish","format-standard","hentry","category-news","tag-entwickler","tag-tipps","tag-web-applikationen","tag-web-apps"],"aioseo_notices":[],"rest_api_enabler":[],"_links":{"self":[{"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/posts\/9148","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/comments?post=9148"}],"version-history":[{"count":0,"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/posts\/9148\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/media?parent=9148"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/categories?post=9148"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/tags?post=9148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}