Hvordan bygge HTML5 iPad Apps
Ved hjelp av HTML5, kan du lage din egen web app for Apple iPad. Web apps bruke iPad innebygde Safari-nettleseren for å bruke programmet. HTML5 kan brukes i forbindelse med CSS og Javascript for å skape en endeløs rekke programmer, inkludert spill. Brukere kan lagre programmet på deres hjemmeside med appens ikon. De kan også få tilgang til app offline hvis du koden appen cache filene i iPad minne.
Bruksanvisning
Forskning og klargjøring
1 Velg et program som skal brukes til å bygge programmet. Selv om du kan bruke avanserte web design programmer som Adobe Dreamweaver, kan du også bruke en vanlig tekstredigeringsprogram som Notisblokk til å lage HTML og CSS-filer.
2 Forskning Apples Safari Developer Library for opplæring og eksempelkode. Code er tilgjengelig for mange av iPad funksjoner, for eksempel "SlideMe," samt andre HTML, CSS og Javascript-koder spesifikt for Apple iOS-enheter og for Safari generelt.
3 Gjør deg kjent med de standarder og egenskapene til HTML5, CSS og Javascript for iPad. Guider og sample koder er tilgjengelig i bøker fra biblioteket, samt fra erfarne utviklere i blogger og fora.
Designing App
4 Opprett en egen HTML-side for hver side i appen. Bruk HTML-koblinger for å få brukerne til å gå fra en side til en annen.
5 Bruk berørings hendelser snarere enn mus hendelser på appsider å imøtekomme iPad berøringsskjerm. Bruk for eksempel "touchstart", "touchend", "touchmove" og "touchcancel," heller enn å bruke mus hendelser.
6 Bruk "textarea" style attributter for områder hvor brukeren skal skrive inn tekst i programmet. Den iPad støtter ikke "contenteditable" attributt som datamaskinen nettlesere bruke.
7 Inkludere "<html manifest =" cache.manifest ">" attributt på hver side hvis du vil at programmet skal være tilgjengelig offline. Merk at du også vil kreve en ".htaccess" og "manifest" -filen i appens rotkatalogen for å bruke HTML5 sin cache evner.
Ikon design
8 Velg et bilde som er representativt for din app, eller opprette et nytt bilde ved hjelp av en grafisk design program som GIMP eller Photoshop. Når brukere lagre app fra Safari, vil ikonet vises på startskjermen.
9 Lagre bildet som en PNG-fil som er 114 av 114 piksler i størrelse med navnet "eple-touch-icon.png." Plasser bildefilen i rotkatalogen for iPad app. IPad stiliserte glans og avrundede hjørner brukes på ikonet når det er lagret på enheten.
10 Inkluder en lenke til ikonet i overskriften på web app sider ved hjelp av "<link rel =" Apple-touch-ikonet "href =" ./ eple-touch-icon.png "/>" format. Denne linken dirigerer iPad, eller andre Apple iOS-enhet, hvor ikonet er lagret.
Testing på datamaskinen
11 Last ned Apples Safari nettleser fra apple.com/safari, og installere det på datamaskinen. Denne nettleseren vil tillate deg å teste appen fra datamaskinen mens du bygger den.
12 Start Safari. Velg "Innstillinger" fra "Fil" -menyen, og velg "Avansert". Klikk "Vis Utvikle-menyen i menylinjen" alternativet. Den "Utvikle" -menyen øverst i vinduet.
1. 3 Klikk på "Utvikle" -menyen. Velg "User Agent" og deretter "Annet". En dialogboks åpnes. Dobbeltklikk innholdet, og trykk "Slett." Lim inn "Mozilla / 5.0 (iPad, U, CPU OS 3_2 som Mac OS X; en-us) AppleWebKit / 531.21.10 (KHTML, som Gecko) Versjon / 4.0.4 Mobile / 7B334b Safari / 531.21.10 "i tekstfeltet. Safari vil nå fungere som iPad-versjonen.