iPhone App mit HTML5 programmieren
Mit HTML5, das auf allen mobilen Endgeräten zur Verfügung steht, CSS und JavaScript lassen sich Web-Apps erstellen, die genau wie native Apps aussehen. Das funtkioniert für Apples iPhone, iPod und iPad ebenso wie alle anderen mobilen SmartPhones, die eine Displaygröße haben, auf der das Lesen einer Website Sinn macht.
Durch die Umwandlung einer Web App in eine native App – wozu es separate Software gibt – ist es sogar möglich, Web-Apps über den Apple App Store zu verkaufen – höchste Zeit also, sich mit den Techniken zur Programmierung von Apps zu beschäftigen.
Welche Möglichkeiten gibt es, Apps zu programmieren?
Grundsätzlich kann man Apps im Hinblick auf die Art und Weise der Programmierung in 3 Klassen unterteilen:
- Native Apps: müssen in der nativen Programmiersprache des jeweiligen Betriebssystems geschrieben werden. Native Apps eignen sich besonders für komplexe oder rechenintensive Anwendungen und solche, mit denen auf die Hardware des Endgerätes zugegriffen werden soll
- WebApps: Bedienen sich HTML5, um damit viele Eigenschaften nativer Apps über die Funktionen moderner Browser zu erledigen. So ist es möglich, die WebApp lokal zu speichern und offline verfügbar zu machen, Daten auf einer client-seitigen Datenbank zu speichern und vieles mehr. WebApps sind einfacher zu programmieren und flexibler als native Apps, können jedoch nicht auf Hardwarefunktionen des iPhones oder Smartphones zugreifen
- Hybride Apps: Sind WebApps, die durch ein Framework wie Phonegap in native Apps „verwandelt“ werden. Auf diese weise lassen sich funktionsstarke Apps mit geringer bis mittlerer Komplexität programmieren.
Wir beschäftigen uns in diesem Tutorial zunächst mit der Programmierung einer WebApp, die wir im Anschluss mittels PhoneGap in eine hybride App verwandeln.
In 12 Schritten eine eigene Web App programmieren
- 1. Apps mit HTML5 programmieren – Die Grundlagen
- 2. Web-Apps – Das CSS Stylesheet einbinden
- 3. Das Stylesheet fürs iPhone
- 4. Den Look and Feel des iPhones umsetzen
- 5. Mit jQuery die Menus dynamisieren
- 6. Full Screen Mode – Die Web App sieht ab jetzt „echt“ aus
- 7. Ein Icon für den Homescreen für echtes App Feeling
- 8. Offline Datenspeicherung mit localStorage
- 9. Die Web App offline verfügbar machen
Themen in Vorbereitung:
- lokale Datenspeicherung per SQL Database
- Web-Apps in native Apps umwandeln
- Apps über iTunes vertreiben
- Marketing Tipps für Apps
Wenn Sie über das Erscheinen kommender Artikel in der Kategorie „App Programmierung“ informiert werden möchten, können Sie sich in unseren Newsletter (rechts) eintragen.
Hallo, schön, das jetzt die ersten deutschen Blogs zum Thema HTML5 kommen, finde die Inhalte auch gut aufbereitet. P.S.: Zingiri hat sich im Footer verewigt, daß ist meiner Meinung nach echt ein widerliches Plugin, was auch nach Deinstallation die Datenbank weiter mit Einträgen zumüllt 😉 Aber vielleicht wird’s ja noch gebraucht?
Hallo,
Freue mich schon auf die Themen: Web-Apps Offline verfügbar machen
Web-Apps in native Apps umwandeln
Apps über iTunes vertreiben
mfg. Philip
So langsam haelt Html5 ja wirklich Einzug ins Web, wird auch Zeit 😉
Pingback: HTML 5 Publisher - Web to Date Forum
ich warte schon ungedultdig auf die themen:
Datenspeicherung – Client Side
Web-Apps Offline verfügbar machen
Web-Apps in native Apps umwandeln
weiß man schon wann dazu etwas veröffentlicht wird?
Ich wollte mal fragen ob schon feststeht wie und ob es weiter geht 🙂
ansonsten find ich es bislang großartig die letzten beiden punkte würden mich halt noch interessieren
Web-Apps in native Apps umwandeln
Apps über iTunes vertreiben
das kann ich mir irgendwie nicht vorstellen das es wirklich geht.
Im August veröffentlichen wir das Kapitel „Offline Datenspeicherung“ und Umwandeln der App in eine native App.
perfekt, da freue ich mich schon drauf, top arbeit bitte mach weiter so 🙂
Verfolge auch schon seit einiger Zeit Eure Tutorials… und entdeckt immer wieder Dinge, die ich noch nicht wusste! Weiter so (das Offline Thema würde mich auch interessieren!).
Kommen den reine Web-Apps durch den Apple Review-Prozess? Apps – so war es früher, die nur Webinhalte beinhaltet haben, kamen nie durch den Prozess. Hat sich hier was verändert?
Zu der Frage gibte es zwei Seiten, die technische und die inhaltliche.
Technich kannst du in den App Store nur native Apps hochladen (.ipa). Wenn du aber deine HTML5 App per PhoneGap (oder sonstigesm Framework) zu einer nativen App machst, spräche nichts gegen eine Veröffentlichung im App Store.
Inhaltlich ist die Gefahr groß abgelehnt zu werden, wenn es sich bei der App um reine „banale“ Webinhalte handelt. Abgesehen davon, dass es auch für den User überhaupt keinen Sinn macht, kann man es sich daher sparen, die eigene Website als App veröffentlichen zu wollen.
Pingback: Grundlagen App Programmierung
Danke für die Anleitung, richtig gut erklärt.
Deine Seite werden wir bei uns in der Programmierecke weiterempfehlen. 😉
Pingback: Apps programmieren | MIXMAX
Hallo,
Könnte man hier auch einmal erläutern wie man eine WebApp im App Store von Apple eintragen oder hochladen kann.
Grüsse Dan
Das geht leider nicht auf direktem Wege. Um die WebApp in einen App Store hochzuladen ist es notwendig, diese in eine naive App zu wrappern oder den Umweg über Phonegap zu machen.