Come costruire HTML5 iPad Apps

March 28

Utilizzando HTML5, è possibile creare il proprio app Web per l'iPad di Apple. applicazioni Web utilizzano browser Safari integrato dell'iPad per operare il app. HTML5 può essere utilizzato in combinazione con i CSS e JavaScript per creare una varietà infinita di applicazioni, tra cui giochi. Gli utenti possono salvare l'applicazione sulla loro home page con l'icona della app. Essi possono anche accedere alla linea app se si codifica l'applicazione per memorizzare nella cache i file nella memoria del iPad.

istruzione

Ricerca e la preparazione

1 Selezionare un programma da utilizzare per la costruzione della app. Sebbene sia possibile utilizzare sofisticati programmi di progettazione Web come Adobe Dreamweaver, è anche possibile utilizzare un editor di testo di base come Blocco note per creare file HTML e CSS.

2 La ricerca Safari Developer di Apple Library per tutorial e codice di esempio. Codice è disponibile per molte delle caratteristiche di iPad, come ad esempio "SlideMe," così come altri HTML, CSS e codici JavaScript appositamente per i dispositivi di Apple iOS e per Safari in generale.

3 Familiarizzare con le norme e le capacità di HTML5, CSS e JavaScript per l'iPad. Tutorial e codici di esempio sono disponibili in libri dalla biblioteca e da sviluppatori esperti in blog e forum.

Progettare l'App

4 Creare una pagina HTML separata per ogni pagina del tuo app. Usa i link HTML che gli utenti di spostarsi da una pagina all'altra.

5 Utilizzare eventi touch piuttosto che eventi del mouse sulle pagine di app per accogliere l'interfaccia touch screen iPad. Ad esempio, utilizzare "TouchStart," "touchend", "touchmove" e "touchcancel," invece di usare gli eventi del mouse.

6 Utilizzare gli attributi di stile "textarea" per le aree in cui l'utente deve inserire il testo in app. L'iPad non supporta il "contenteditable" attributo che i browser Web utilizzano calcolatore.

7 Includere il "<html manifesto =" cache.manifest ">" attributo su ogni pagina se si desidera che l'applicazione sia disponibile non in linea. Si noti che è anche necessario un file "manifest" ".htaccess" e nella directory principale dell'applicazione, al fine di utilizzare le capacità di cache di HTML5.

icona di design

8 Selezionare un'immagine rappresentativa della vostra applicazione, o di creare una nuova immagine utilizzando qualsiasi programma di grafica come GIMP o Photoshop. Quando gli utenti salvano l'applicazione da Safari, verrà visualizzata l'icona nella schermata iniziale.

9 Salvare l'immagine come file PNG che è di 114 per 114 pixel di dimensioni con il nome "mela-touch-icon.png." Inserire il file immagine nella directory principale per l'applicazione iPad. La lucentezza stilizzata iPad e gli angoli arrotondati vengono applicati all'icona quando viene salvato sul dispositivo.

10 Includere un link all'icona nell'intestazione delle pagine web app utilizzando il "<link rel =" Apple-touch-icon "href =" ./ "/ apple-touch-icon.png>" formato. Questo link indirizza la iPad o qualsiasi altro dispositivo Apple iOS, al punto in cui l'icona è salvato.

Test sul computer

11 Scarica il browser Web di Apple Safari dal apple.com/safari, e installarlo sul proprio computer. Questo browser vi permetterà di testare la vostra applicazione dal computer mentre si sta costruendo essa.

12 Avviare Safari. Selezionare "Preferenze" dal menu "File" e selezionare "Avanzate." Fare clic su "Mostra Sviluppare Menu nella barra dei menu" opzione. Il menu "Sviluppo" appare nella parte superiore della finestra.

13 Fare clic sul menu "Sviluppo". Selezionare "User Agent", quindi "Altro". Si apre una finestra di dialogo. Fare doppio clic il contenuto, e premere "Elimina." Incolla "Mozilla / 5.0 (iPad; U; CPU OS 3_2 come Mac OS X; en-us) AppleWebKit / 531.21.10 (KHTML, come Gecko) Version / 4.0.4 mobile / 7B334b Safari / 531.21.10 "nel campo di testo. Safari ora eseguirà come la versione per iPad.