Πώς να χτίσει HTML5 iPad Apps

Χρησιμοποιώντας HTML5 , μπορείτε να δημιουργήσετε το δικό σας Web app για το iPad της Apple . Web εφαρμογές χρησιμοποιούν ενσωματωμένο πρόγραμμα περιήγησης Web Safari του iPad για τη λειτουργία του app . HTML5 μπορεί να χρησιμοποιηθεί σε συνδυασμό με το CSS και Javascript για να δημιουργήσετε μια ατελείωτη ποικιλία από εφαρμογές , συμπεριλαμβανομένων των παιχνιδιών . Οι χρήστες μπορούν να σώσουν το app στην αρχική σελίδα τους με το εικονίδιο της εφαρμογής σας . Μπορούν επίσης να έχουν πρόσβαση στο offline app αν κωδικοποιήσει το app για να αποθηκεύονται τα αρχεία στη μνήμη του iPad . Οδηγίες
Έρευνας και Προετοιμασία

1

Επιλέξτε ένα πρόγραμμα που θα χρησιμοποιηθεί για την κατασκευή του app . Παρόλο που μπορείτε να χρησιμοποιήσετε εξελιγμένα προγράμματα σχεδιασμού Web , όπως το Adobe Dreamweaver , μπορείτε επίσης να χρησιμοποιήσετε ένα βασικό πρόγραμμα επεξεργασίας κειμένου , όπως το Σημειωματάριο για να δημιουργήσετε αρχεία HTML και CSS . 2

Safari Developer Ερευνητική Βιβλιοθήκη της Apple για σεμινάρια και δείγμα κώδικα . Κώδικας είναι διαθέσιμος για πολλά από τα χαρακτηριστικά iPad , όπως το " SlideMe , " καθώς και άλλα HTML , CSS και JavaScript κωδικούς ειδικά για τις συσκευές της Apple iOS και Safari σε γενικές γραμμές .
Εικόνων 3

εξοικειωθείτε με τα πρότυπα και τις δυνατότητες της HTML5 , CSS και JavaScript για το iPad . Σεμινάρια και κώδικες του δείγματος είναι διαθέσιμα σε βιβλία από τη βιβλιοθήκη , καθώς και από έμπειρους προγραμματιστές σε blogs και forums .
Εικόνων Σχεδιάζοντας το App
Η 4

Δημιουργήστε μια ξεχωριστή σελίδα HTML για κάθε σελίδα για app σας . Χρησιμοποιήστε HTML συνδέσμους για να έχουν οι χρήστες για να μετακινηθείτε από τη μία σελίδα στην άλλη .
5

Χρησιμοποιήστε αφής γεγονότα και όχι τα γεγονότα του ποντικιού στις σελίδες app για να φιλοξενήσει τη διεπαφή οθόνης αφής iPad . Για παράδειγμα, χρησιμοποιήστε " touchstart ", " touchend , " " touchmove " και " touchcancel , " αντί να χρησιμοποιούν τα γεγονότα του ποντικιού .
Η 6

Χρησιμοποιήστε " textarea " style χαρακτηριστικά για τις περιοχές όπου ο χρήστης θα πρέπει να εισάγετε κείμενο στο app . Το iPad δεν υποστηρίζει το " contenteditable " αποδίδουν ότι ο υπολογιστής χρησιμοποιεί προγράμματα περιήγησης στο Web .
Η 7

Συμπεριλάβετε την " " χαρακτηριστικό σε κάθε σελίδα , αν θέλετε η εφαρμογή να είναι διαθέσιμα χωρίς σύνδεση . Σημειώστε ότι θα χρειαστεί , επίσης, ένα " htaccess " και " προφανή " το αρχείο στον κατάλογο του app root για να χρησιμοποιήσετε τις ικανότητές cache του HTML5 .
Εικόνων Icon Σχεδιασμός
8

Επιλέξτε μια εικόνα που είναι αντιπροσωπευτική της εφαρμογής σας , ή να δημιουργήσετε μια νέα εικόνα χρησιμοποιώντας οποιοδήποτε σχεδιαστικό πρόγραμμα όπως το Photoshop ή το GIMP . Όταν οι χρήστες να αποθηκεύσετε το app από το Safari , το εικονίδιο θα εμφανιστεί στην αρχική οθόνη .
Η 9

Αποθηκεύστε την εικόνα ως αρχείο PNG που είναι 114 με 114 pixels σε μέγεθος με την επωνυμία « μήλο - touch - icon.png . " Τοποθετήστε το αρχείο εικόνας στον ριζικό κατάλογο για το iPad app . Το iPad τυποποιημένο λάμψη και στρογγυλεμένες γωνίες που εφαρμόζονται στο εικονίδιο όταν αποθηκεύεται στη συσκευή .
Η 10

Συμπεριλάβετε έναν σύνδεσμο στο εικονίδιο στην κεφαλίδα των σελίδων app Web χρησιμοποιώντας το <σύνδεσμο " rel = " μήλο - touch - icon " href = " . /apple- touch - icon.png " /> "μορφή . Αυτός ο σύνδεσμος κατευθύνει το iPad , ή οποιαδήποτε άλλη συσκευή της Apple iOS , όπου είναι αποθηκευμένο το εικονίδιο .
Εικόνων Δοκιμές στον υπολογιστή σας

11

Κατεβάστε το πρόγραμμα περιήγησης Web Safari της Apple από την Apple com /σαφάρι , και να το εγκαταστήσετε στον υπολογιστή σας . Αυτό το πρόγραμμα περιήγησης θα σας επιτρέψει να ελέγξετε την εφαρμογή σας από τον υπολογιστή σας, ενώ είστε το κτίριο .
Η 12

Εκκίνηση Safari . Επιλέξτε " Προτιμήσεις" από το μενού "Αρχείο" και επιλέξτε "Advanced ". Κάντε κλικ στο " Εμφάνιση Ανάπτυξη Menu στο Menu Bar " επιλογή . Το μενού « Ανάπτυξη » εμφανίζεται στο πάνω μέρος του παραθύρου .
Η 13

Κάντε κλικ στο μενού " Ανάπτυξη " . Επιλέξτε " Παράγοντας του χρήστη , " τότε "Άλλα ". Ανοίγει ένα παράθυρο διαλόγου . " . Διαγραφή" Κάντε διπλό κλικ το περιεχόμενο και πατήστε Επικόλληση " Mozilla/5.0 ( iPad ? U ? CPU OS 3_2 όπως το Mac OS X ? En -us ) AppleWebKit/531.21.10 ( KHTML , like Gecko ) Version/4.0.4 Mobile/7B334b Safari/531.21.10 " στο πεδίο κειμένου . Safari θα εκτελέσει τώρα , όπως το iPad έκδοση .
Η
εικόνων