Selecteer een programma om te gebruiken voor de bouw van de app . Hoewel u kunt gebruik maken van geavanceerde Web design programma's zoals Adobe Dreamweaver , kunt u ook gebruik maken van een eenvoudige tekst- editor zoals Notepad om HTML -en CSS-bestanden te creëren .

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

vertrouwd te maken met de normen en de mogelijkheden van HTML5 , CSS en JavaScript voor de iPad . Tutorials en sample codes zijn beschikbaar in boeken uit de bibliotheek als van ervaren ontwikkelaars in blogs en ​​forums .
Het ontwerpen van de App
4

Maak een aparte HTML- pagina voor elke pagina op uw app . Gebruik HTML links naar moeten gebruikers om van de ene pagina naar de andere .
5

Gebruik aanraakgebeurtenissen plaats van muis events op app pagina's naar de iPad touch screen interface tegemoet . Gebruik bijvoorbeeld " TouchStart , " " touchEnd , " " touchMove " en " touchcancel , " in plaats van de muis evenementen .

Gebruik " textarea " stijlkenmerken 6 voor gebieden waar de gebruiker tekst moet invoeren in de app . De iPad ondersteunt de " contenteditable " eigenschap die computer webbrowsers gebruiken .
7

Neem de " " attribuut op elke pagina als je wilt de app offline beschikbaar zijn . Merk op dat u ook zal vereisen een " htaccess " en " manifest" bestand in de app root directory om HTML5 's cache vaardigheden te gebruiken .
Icon Design
8

Selecteer een beeld dat representatief is voor uw toepassing , of maak een nieuw beeld met behulp van een grafisch ontwerp programma zoals GIMP of Photoshop . Wanneer gebruikers sparen de app van Safari , zal uw icoon op het startscherm .
9

Sla de afbeelding op als PNG-bestand dat is 114 bij 114 pixels groot met de naam "apple - touch- icon.png . " Leg het image-bestand in de root directory van de iPad app . De iPad gestileerd glans en afgeronde hoeken worden toegepast op het pictogram wanneer het is opgeslagen op het apparaat .
10

Voeg een link naar het pictogram in de kop van de webapp 's met behulp van de " < koppeling rel = " apple - touch- icon " href = " . /apple - touch- icon.png " /> "formaat. Deze koppeling leidt de iPad , of een ander Apple iOS -apparaat , waar het pictogram wordt opgeslagen .
Testen op uw computer

Download Apple 's 11 Safari webbrowser van Apple com /safari , en installeer het op uw computer . Deze browser zal u toelaten om uw app te testen van de computer terwijl u bouwt het.
12

Launch Safari . Selecteer " Preferences " uit het menu " File " en selecteer " Geavanceerd . " Klik op " Toon Ontwikkel -menu in menubalk " optie . Het menu " Ontwikkelen " verschijnt aan de bovenkant van het venster .
13

Klik op het menu " Ontwikkelen " . Selecteer "User Agent , " dan " Andere . " Er wordt een dialoogvenster geopend. Dubbelklik op de inhoud , en druk op " Verwijderen. " Plakken " Mozilla/5.0 ( iPad ; U; CPU OS 3_2 zoals Mac OS X , en- us ) AppleWebKit/531.21.10 ( KHTML , zoals Gecko ) Version/4.0.4 Mobile/7B334b Safari/531.21.10 " in het tekstveld . Safari zal nu voeren, zoals de iPad -versie .