Wie bauen HTML5 iPad Apps

September 2

Mit HTML5, erstellen Sie Ihre eigene Web-app für das Apple iPad. Web-apps-verwenden Sie das iPad integrierte Safari Web-Browser der HTML5, ca. betreiben in Verbindung mit CSS und JavaScript verwendet werden kann, eine unendliche Vielfalt von Anwendungen, darunter Spiele erstellen. Benutzer können die app auf ihre Homepage mit Ihrer app-Symbol speichern. Sie können auch die app offline zugreifen, wenn Sie die app zum Zwischenspeichern von Dateien in das iPad Speicher programmieren.

Anweisungen

Forschung und Vorbereitung

1 Wählen Sie ein Programm zum Erstellen der app verwenden. Obwohl Sie anspruchsvolle Web-Design-Programme wie Adobe Dreamweaver verwenden können, auch können einen einfachen Texteditor wie Notepad Sie um HTML- und CSS-Dateien zu erstellen.

2 Die Forschung von Apples Safari Developer Library für Lernprogramme und Beispielcode. Code ist im Allgemeinen für viele iPad-Funktionen, z. B. "SlideMe", sowie andere HTML, CSS und JavaScript-Codes speziell für Apple iOS Geräte und Safari zur Verfügung.

3 Vertrautmachen Sie mit den Standards und Funktionen von HTML5, CSS und JavaScript für das iPad. Tutorials und Beispielcodes sind erhältlich in Bücher aus der Bibliothek als auch erfahrene Entwickler in Blogs und Foren.

Entwerfen der App

4 Erstellen Sie eine separate HTML-Seite für jede Seite auf Ihre APP verwenden HTML-Links haben Benutzer von einer Seite auf einen anderen verschieben.

5 Verwenden Sie Touch-Ereignissen statt Mausereignisse auf app-Seiten, um Platz für das iPad-Screen-Oberfläche berühren. Z. B. "Touchstart", "Touchend,", "TouchMoveUIElement" und "Touchcancel", anstatt mit Mausereignissen.

6 Verwenden Sie "Textarea" Stilattribute für Bereiche wo der Benutzer Text in der app eingeben sollten. Das iPad unterstützt nicht das Attribut "Contenteditable", das Computer-Web-Browser zu verwenden.

7 Gehören die "< html-manifest="cache.manifest ">" Attribut auf jeder Seite, wenn Sie die app zur Verfügung stehen offline möchten. Denk daran dass Sie auch eine "Htaccess" und "" Manifestdatei im Root-Verzeichnis der Webanwendung benötigt um HTML5s Cache-Fähigkeiten zu nutzen.

Icondesign

8 Wählen Sie ein Bild, das für Ihre app repräsentativ ist, oder erstellen Sie ein neues Bild mit einem anderen Grafik-Design-Programm wie GIMP oder Photoshop. Wenn Benutzer die app von der Safari speichern, erscheint Ihr Symbol auf dem home-Bildschirm.

9 Speichern das Bild als eine PNG Datei d.h. 114 von 114 Pixel in der Größe mit dem Namen "Apple-Touch-icon.png." Setzen Sie die Image-Datei im Root-Verzeichnis für die iPad-app. Das iPad stilisierte Glanz und abgerundete Ecken auf das Symbol angewendet werden, wenn es auf dem Gerät gespeichert wird.

10 Enthalten einen Link auf das Symbol in der Kopfzeile der Web-app-Seiten mit den "< link Rel ="Touch-Apfel-Symbol"Href =". / Apple-Touch-icon.png "/ >" Format. Dieser Link weist das iPad oder ein anderes Apple-iOS-Gerät an, in dem das Symbol gespeichert wird.

Tests auf Ihrem Computer

11 Apples Safari Web-Browser von apple.com/safari herunterladen und auf Ihrem Computer installieren. Diese Browser können Sie Ihre app von Ihrem Computer zu testen, während Sie es erstellen.

12 Starten Sie Safari. Wählen Sie "Preferences" im Menü "Datei", und wählen Sie "Erweitert". Klicken Sie auf "Show entwickeln im Menü Menüleiste" Option. Menü "Develop" wird am oberen Rand des Fensters.

13 Klicken Sie im Menü "Develop". Wählen Sie "User-Agent" und dann "Andere." Ein Dialogfeld wird geöffnet. Doppelklicken Sie auf den Inhalt, und drücken Sie "Löschen". Fügen Sie "Mozilla/5.0 (iPad; U; CPU-OS 3_2 wie Mac OS X; de-uns) AppleWebKit/531.21.10 (KHTML, wie Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10 "in das Textfeld ein. Safari wird nun wie die iPad-Version durchführen.