Hoe te bouwen HTML5 iPad Apps

Met behulp van HTML5, kunt u uw eigen Web-app voor de Apple iPad. Web apps gebruik van de iPad ingebouwde Safari webbrowser te bedienen van de app. HTML5 in combinatie met de CSS en JavaScript kan worden gebruikt om een eindeloze verscheidenheid van apps, waaronder games. Gebruikers kunnen de app op hun home page met uw app pictogram opslaan. Ze kunnen ook toegang tot de app offline als u de app om de bestanden in het geheugen van de iPad in de cache-code.

Instructies

Onderzoek en voorbereiding

1

Selecteer een programma te gebruiken voor het bouwen van de app. Hoewel u geavanceerde Web ontwerp-programma's zoals Adobe Dreamweaver gebruiken kunt, kunt u ook een elementaire teksteditor zoals Kladblok om HTML en CSS-bestanden te maken wordt.

2

Onderzoek van Apple Safari Developer Library voor tutorials en voorbeeldcode. Code is beschikbaar voor veel van de functies van de iPad, zoals "SlideMe," alsmede andere HTML, CSS en JavaScript codes specifiek voor Apple iOS apparaten en voor Safari in het algemeen.

3

Uzelf vertrouwd met de normen en de mogelijkheden van HTML5, CSS en JavaScript voor de iPad. Tutorials en monster codes zijn beschikbaar in boeken uit de bibliotheek ook vanaf ervaren ontwikkelaars in blogs en fora.

Ontwerpen van de App

4

Een aparte HTML-pagina voor elke pagina op uw app. Gebruik HTML-koppelingen om gebruikers te verplaatsen van de ene pagina naar de andere te laten maken.

5

Touch-gebeurtenissen gebruiken in plaats van muisgebeurtenissen op app's voor de iPad touch-screen interface. Gebruik bijvoorbeeld "touchstart," "touchend", "touchmove" en "touchcancel", eerder dan het gebruiken van muisgebeurtenissen.

6

Gebruik "textarea" stijlkenmerken voor gebieden waar de gebruiker tekst in de app invoeren moet. De iPad biedt geen ondersteuning voor het kenmerk "contenteditable" die computer webbrowsers gebruiken.

7

Omvatten de "< HTML-manifest="cache.manifest ">" attribuut op elke pagina als u wilt dat de app beschikbaar te zijn off line. Merk op dat u ook nodig een "htaccess" en "manifest" bestand in de hoofdmap van de app gebruik van HTML5 cache capaciteiten.

Pictogram ontwerp

8

Selecteer een opname die representatief is voor uw app, of maak een nieuwe afbeelding met elk grafisch ontwerpprogramma, zoals GIMP of Photoshop. Wanneer gebruikers de app vanuit Safari opslaat, verschijnt uw pictogram op het huisscherm.

9

De afbeelding opslaan als een PNG bestand dat 114 door 114 pixels in grootte met de naam "apple-touch-icon.png." Plaats het afbeeldingsbestand in de root directory voor de iPad app. De iPad gestileerd glans en afgeronde hoeken worden toegepast op het pictogram wanneer het wordt opgeslagen op het apparaat.

10

Opnemen van een link naar het pictogram in de koptekst van de Web app pagina's met behulp van de "< link rel ="apple-touch-pictogram"href =". / apple-touch-icon.png "/ >" formaat. Deze link leidt de iPad, of een ander Apple iOS apparaat, tot waar het pictogram is opgeslagen.

Testen op uw Computer

11

Safari Web browser van Apple van apple.com/safari downloaden en installeren op uw computer. Deze browser zal toestaan u om te testen uw app vanaf uw computer terwijl u bouwen.

12

Start Safari. Selecteer "Voorkeuren" in het menu "Bestand" en selecteer "Geavanceerd." Klik op "Toon ontwikkelen in menubalk" optie. Het "Develop"-menu wordt weergegeven aan de bovenkant van het venster.

13

Klik op de "Develop"-menu. Selecteer "useragent" en vervolgens "Andere." Er wordt een dialoogvenster geopend. Dubbelklik op de inhoud en druk op "Delete". Plakken "Mozilla/5.0 (iPad; U; CPU OS 3_2 zoals Mac OS X; nl-ons) AppleWebKit/531.21.10 (KHTML, zoals Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10 "in het tekstveld. Safari zal nu uitvoeren zoals de iPad versie.