Πώς να χρησιμοποιήσετε το AJAX για να κάνετε μια εφαρμογή για HTML5 και CSS3 Προγραμματισμός

Όλοι θέλουν να κάνουν τις κινητές εφαρμογές αυτές τις μέρες. Εδώ είναι το μεγάλο μυστικό. Πολλές εφαρμογές είναι πραγματικά γραμμένες σε HTML5, CSS και JavaScript. Γνωρίζετε ήδη όλα όσα χρειάζεστε για να δημιουργήσετε εφαρμογές που λειτουργούν σε κινητές συσκευές. Καλύτερα, δεν χρειάζεται να μάθετε μια νέα γλώσσα ή να πάρετε άδεια από το κατάστημα εφαρμογών ή να αγοράσετε μια άδεια, όπως κάνετε για τις εγγενείς εφαρμογές.

Υπάρχουν μερικά υπέροχα κόλπα που μπορείτε να κάνετε για τους χρήστες του iOS. Μπορείτε να σχεδιάσετε το πρόγραμμά σας έτσι ώστε ο χρήστης να μπορεί να προσθέσει ένα εικονίδιο απευθείας στην επιφάνεια εργασίας. Ο χρήστης μπορεί στη συνέχεια να ξεκινήσει το πρόγραμμα όπως οποιαδήποτε άλλη εφαρμογή. Μπορείτε επίσης να κάνετε το πρόγραμμα περιήγησης να αποκρύπτει τα κανονικά χαρακτηριστικά του προγράμματος περιήγησης, ώστε το πρόγραμμά σας να μην φαίνεται να εκτελείται σε ένα πρόγραμμα περιήγησης!

Αποδεικνύεται ότι αυτά τα αποτελέσματα είναι αρκετά εύκολο να γίνει.

Προσθέστε ένα εικονίδιο στο πρόγραμμά σας

Οι σύγχρονες εκδόσεις του iOS (το λειτουργικό σύστημα iPhone / iPad) έχουν ήδη τη δυνατότητα να αποθηκεύουν οποιαδήποτε ιστοσελίδα στην επιφάνεια εργασίας. Απλά δείτε την ιστοσελίδα στο Safari και κάντε κλικ στο κουμπί Share. Θα βρείτε μια επιλογή αποθήκευσης της ιστοσελίδας στην επιφάνεια εργασίας. Μπορείτε να δώσετε εντολή στους χρήστες σας να το κάνουν αυτό και θα μπορούν να ξεκινήσουν το πρόγραμμά σας σαν κανονική εφαρμογή.

Ωστόσο, το προεπιλεγμένο εικονίδιο για μια αποθηκευμένη εφαρμογή είναι αρκετά άσχημο. Εάν θέλετε ένα ωραίο εικονίδιο, μπορείτε να αποθηκεύσετε μια μικρή εικόνα ως a. png και τοποθετήστε τον στον ίδιο κατάλογο με το πρόγραμμά σας. Στη συνέχεια, μπορείτε να προσθέσετε αυτήν τη γραμμή στη σελίδα σας (στην κεφαλίδα) και αυτή η εικόνα θα εμφανιστεί στην επιφάνεια εργασίας όταν ο χρήστης αποθηκεύει το πρόγραμμά σας:

Ως πρόσθετο μπόνους, το iPhone ή iPad ρυθμίζει αυτόματα την εικόνα να μοιάζει με Εικονίδιο της Apple, προσθέτοντας τα κατάλληλα αποτελέσματα για την εγκατεστημένη έκδοση του iOS (στρογγυλεμένη και γυαλιστική στο iOS6, επίπεδη στο iOS7.)

Φυσικά, αυτό το τέχνασμα εικονιδίων είναι ένας μηχανισμός μόνο για την Apple. Με τις περισσότερες εκδόσεις του Android, οποιοσδήποτε σελιδοδείκτης που έχετε ορίσει με το κύριο πρόγραμμα περιήγησης μπορεί να προστεθεί στην επιφάνεια εργασίας, αλλά δεν υπάρχει επιλογή προσαρμοσμένου εικονιδίου. Η οδηγία Apple-touch-icon απλά θα αγνοηθεί αν χρησιμοποιείτε κάποιο άλλο λειτουργικό σύστημα.

Αφαιρέστε τη γραμμή εργαλείων Safari

Παρόλο που το πρόγραμμά σας φαίνεται καλό από την κύρια οθόνη, όταν ο χρήστης ενεργοποιήσει το πρόγραμμα, είναι προφανές ότι το πρόγραμμα είναι μέρος του προγράμματος περιήγησης στο Web. Μπορείτε εύκολα να κρύψετε τη γραμμή εργαλείων του προγράμματος περιήγησης με μια άλλη γραμμή στην κεφαλίδα:

Αυτός ο κώδικας δεν θα κάνει τίποτα διαφορετικό, εκτός εάν το πρόγραμμα καλείται από την επιφάνεια εργασίας. Ωστόσο, σε αυτήν την περίπτωση, κρύβει τη γραμμή εργαλείων, κάνοντας το πρόγραμμα να φαίνεται και να αισθάνεται σαν μια πλήρης εφαρμογή. Ως πρόσθετο επίδομα, αυτό εκτελεί το πρόγραμμα σε λειτουργία πλήρους οθόνης, δίνοντάς σας λίγο μεγαλύτερο περιθώριο παιχνιδιού.

Και πάλι, αυτή είναι μια λύση ειδικά για την Apple. Δεν υπάρχει εύκολος τρόπος για να επιτύχετε το ίδιο αποτέλεσμα στις συσκευές Android.

Αποθηκεύστε το πρόγραμμα εκτός σύνδεσης

Τώρα το πρόγραμμά σας μοιάζει πολύ με μια εφαρμογή, εκτός από την περίπτωση που εκτελείται μόνο όταν είστε συνδεδεμένοι στο Internet. Το HTML5 έχει μια υπέροχη λειτουργία που σας επιτρέπει να αποθηκεύσετε μια ολόκληρη ιστοσελίδα τοπικά την πρώτη φορά που τρέχει.

Στη συνέχεια, αν ο χρήστης προσπαθήσει να αποκτήσει πρόσβαση στο πρόγραμμα και το σύστημα δεν μπορεί να συνδεθεί στο διαδίκτυο, αντί να τρέξει το τοπικό αντίγραφο του παιχνιδιού. Στην ουσία, το πρόγραμμα μεταφορτώνεται την πρώτη φορά που ενεργοποιείται και παραμένει στην τοπική συσκευή.

Αυτό είναι ένα σχετικά εύκολο αποτέλεσμα:

• Κάντε το πρόγραμμα σας σταθερό: Για να χρησιμοποιήσετε τον μηχανισμό αποθήκευσης εκτός σύνδεσης, θα πρέπει να βεβαιωθείτε ότι το πρόγραμμά σας είναι κοντά στο έτοιμο για απελευθέρωση. Τουλάχιστον, θα πρέπει να βεβαιωθείτε ότι γνωρίζετε όλα τα εξωτερικά αρχεία που απαιτούνται από το παιχνίδι.

• Χρησιμοποιήστε μόνο τοπικούς πόρους: Για αυτό το είδος έργου, δεν μπορείτε να βασιστείτε στο εξωτερικό Internet, επομένως θα χρειαστεί να έχετε όλα τα αρχεία σας τοπικά. Αυτό σημαίνει ότι δεν μπορείτε πραγματικά να χρησιμοποιήσετε PHP ή εξωτερικά αρχεία. Θα χρειαστεί να έχετε ένα τοπικό αντίγραφο όλων των στοιχείων του διακομιστή.

• Δημιουργήστε ένα cahce. Πρόχειρο αρχείο: Ανατρέξτε στον κατάλογο που περιέχει το παιχνίδι σας και δημιουργήστε ένα νέο αρχείο κειμένου που ονομάζεται.

• Γράψτε την πρώτη γραμμή: Η πρώτη γραμμή της προσωρινής μνήμης. το πρόδηλο αρχείο θα πρέπει να περιέχει μόνο το κείμενο CACHE MANIFEST (όλα με κεφαλαία γράμματα).

• Δημιουργήστε μια λίστα με κάθε αρχείο στον κατάλογο: Γράψτε το όνομα κάθε αρχείου στον κατάλογο, ένα αρχείο ανά γραμμή. Να είστε προσεκτικοί με την κεφαλαιοποίηση και την ορθογραφία.

• Προσθέστε το χαρακτηριστικό του φαινομένου: Η ετικέτα έχει ένα νέο χαρακτηριστικό που ονομάζεται manifest. Χρησιμοποιήστε αυτό για να περιγράψετε στο διακομιστή όπου μπορεί να βρεθεί το δηλωτικό μνήμης cache:

• Φορτώστε κανονικά τη σελίδα: Θα χρειαστεί να φορτώσετε την ιστοσελίδα μια φορά κανονικά. Εάν όλα έχουν ρυθμιστεί σωστά, το πρόγραμμα περιήγησης θα κάνει ήσυχα ένα αντίγραφο του αρχείου.

• Δοκιμή offline: Ο καλύτερος τρόπος για να ελέγξετε την αποθήκευση εκτός σύνδεσης είναι να απενεργοποιήσετε προσωρινά την ασύρματη πρόσβαση στο μηχάνημά σας και στη συνέχεια να προσπαθήσετε να αποκτήσετε πρόσβαση στο αρχείο. Εάν τα πράγματα εξελίχθηκαν, θα πρέπει να μπορείτε να βλέπετε τη σελίδα σας σαν να είστε ακόμα συνδεδεμένος στο διαδίκτυο.

• Ελέγξτε τις ρυθμίσεις του διακομιστή: Αν η αποθήκευση εκτός σύνδεσης δεν λειτουργεί, ίσως χρειαστεί να ελέγξετε με τη διαχείριση του διακομιστή σας. Ο τύπος MIME τύπου / πρότυπο πρέπει να ρυθμιστεί στο διακομιστή. Ίσως χρειαστεί να ζητήσετε από τον διαχειριστή του διακομιστή σας να ρυθμίσει αυτήν την επιλογή στο. αρχείο htaccess για το λογαριασμό σας:

  addtype text / cache-manifest. εκδήλωση
  

Σημειώστε ότι μπορεί να πάρει αρκετούς ώρες για να αναγνωρίσει τις αλλαγές τις αλλαγές στον ιστότοπο της προσωρινής μνήμης, οπότε όταν κάνετε αλλαγές στη σελίδα σας, αυτές οι αλλαγές δεν ενημερώνονται αυτόματα στο τοπικό πρόγραμμα περιήγησης. Γι 'αυτό είναι καλύτερο να εξοικονομήσετε off-line αρχειοθέτηση για σχεδόν το τέλος του κύκλου ανάπτυξης του έργου σας.