Υπάρχουν 6,8 δισεκατομμύρια άνθρωποι στον πλανήτη, εκ των οποίων 5,1 δισεκατομμύρια διαθέτουν κινητό τηλέφωνο. Και σήμερα, ένα συνεχώς αυξανόμενο ποσοστό αυτών των συσκευών είναι smartphone. Σύμφωνα με ένα πρόσφατο Μελέτη Pew Research Center , ο αριθμός των χρηστών που έχουν πρόσβαση στο Διαδίκτυο στα smartphone τους έχει υπερδιπλασιαστεί τα τελευταία 5 χρόνια, όπως και ο αριθμός των χρηστών που κάνουν λήψη και χρήση εφαρμογές για κινητά . Από όσους χρησιμοποιούν το Διαδίκτυο ή το email στα τηλέφωνά τους, περισσότερο από το ένα τρίτο πηγαίνει στο διαδίκτυο κυρίως μέσω των φορητών συσκευών τους.

Πράγματι, ο φορητός υπολογιστής γίνεται όλο και πιο πανταχού παρών… και είναι φοβερό.

Εκτός, φυσικά, όταν δεν είναι.

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

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

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

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

Εφαρμογή ιστού για κινητές συσκευές έναντι εγγενών εφαρμογών έναντι υβριδικής εφαρμογής

Όπως συμβαίνει με τις περισσότερες επιλογές τεχνολογίας, δεν υπάρχει απάντηση που να ταιριάζει σε όλες τις περιπτώσεις όσον αφορά τον τύπο της εφαρμογής για κινητά που θα αναπτυχθεί. Υπάρχουν πολλές βέλτιστες πρακτικές εφαρμογών ιστού που πρέπει να λάβετε υπόψη, δεν είναι όλες τεχνικές. Ποιο είναι το κοινό-στόχος σας; Είναι πιο πιθανό να προτιμήσουν έναν ιστό για κινητά ή μια εγγενή εφαρμογή; Ποια είναι η διαφορά μεταξύ εγγενών και υβριδικών εφαρμογών; Ποιοι πόροι ανάπτυξης έχετε και με ποιες τεχνολογίες κινητής τηλεφωνίας είναι πιο εξοικειωμένοι; Ποιο είναι το μοντέλο αδειοδότησης και πωλήσεων που οραματίζεστε για το προϊόν σας;

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

Και πέρα ​​από την ερώτηση των παλιών εφαρμογών ιστού έναντι εγγενών εφαρμογών, μια υβριδική εφαρμογή για κινητά μπορεί να είναι η σωστή απάντηση για εσάς, ανάλογα με τις απαιτήσεις και τους περιορισμούς πόρων. Οι υβριδικές εφαρμογές, όπως οι εγγενείς εφαρμογές, εκτελούνται στην ίδια τη συσκευή (σε αντίθεση με το εσωτερικό ενός προγράμματος περιήγησης), αλλά είναι γραμμένες με τεχνολογίες ιστού (HTML5, CSS και JavaScript) και συνήθως υποστηρίζονται από ένα υβριδικό πλαίσιο εφαρμογών. Πιο συγκεκριμένα, οι υβριδικές εφαρμογές εκτελούνται μέσα σε ένα εγγενές κοντέινερ και αξιοποιούν τη μηχανή του προγράμματος περιήγησης της συσκευής (αλλά όχι το πρόγραμμα περιήγησης) για την απόδοση του HTML και την επεξεργασία του JavaScript τοπικά. Ένα επίπεδο αφαίρεσης Ιστού προς εγγενή επιτρέπει την πρόσβαση σε δυνατότητες συσκευών που δεν είναι προσβάσιμες σε εφαρμογές ιστού για κινητά, όπως το επιταχυνσιόμετρο, η κάμερα και η τοπική αποθήκευση.

Ωστόσο, όποια και αν είναι η επιλογή σας - είτε πρόκειται για μια εφαρμογή ιστού για κινητά, μια εγγενή ή υβριδική εφαρμογή - προσέξτε να ερευνήσετε επαρκώς και να επιβεβαιώσετε τις υποθέσεις σας. Για παράδειγμα, για τους σκοπούς αυτού του οδηγού ανάπτυξης εφαρμογών ιστού για κινητά, ίσως έχετε αποφασίσει να αναπτύξετε μια εγγενή εφαρμογή για κινητά για το ηλεκτρονικό εμπόριο για την πώληση των προϊόντων σας. Όμως, σύμφωνα με Hubspot , Το 73% των χρηστών smartphone δηλώνουν ότι χρησιμοποιούν τον ιστό για κινητά περισσότερο από τις εγγενείς εφαρμογές για να κάνουν τις αγορές τους… Έτσι, σε αυτήν την περίπτωση, μπορεί να στοιχηματίσετε σε λάθος άλογο.

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

Και, φυσικά, υπάρχουν οι πρακτικές εκτιμήσεις του χρόνου και του προϋπολογισμού. Καθώς ένα από τα αγαπημένα μου λόγια πηγαίνει, 'Γρηγορότερα, καλύτερα, φθηνότερα ... διαλέξτε δύο' . Ενώ οι περιορισμοί χρόνου και αγοράς και κόστους είναι υψίστης σημασίας για την ανάπτυξη εφαρμογών ιστού, είναι ζωτικής σημασίας να μην συμβιβαστούμε πολύ στην ποιότητα της διαδικασίας. Είναι αρκετά δύσκολο να ανακτήσουμε την εμπιστοσύνη ενός χρήστη που είχε μια κακή πρώτη εμπειρία.

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

Η ανάπτυξη εφαρμογών για κινητά Web απαιτεί λεπτομερή σχεδιασμό

Ο προσδιορισμός των απαιτήσεών σας (ή του πελάτη σας) είναι μία από τις πιο βασικές βέλτιστες πρακτικές στην ανάπτυξη εφαρμογών, σε κινητές συσκευές ή με άλλο τρόπο. Εξετάστε προσεκτικά τις στοχευμένες δυνατότητες για να διαπιστώσετε εάν είναι εφικτές στην εφαρμογή ιστού για κινητά. Είναι πολύ απογοητευτικό και εξαιρετικά μη παραγωγικό, το να συνειδητοποιούμε ότι μία ή περισσότερες από τις βασικές λειτουργίες του πελάτη σας δεν υποστηρίζονται, όταν έχετε ήδη επενδύσει το χρόνο και τους πόρους για να σχεδιάσετε τη διεπαφή που βασίζεται στον ιστό και να υποστηρίξετε υποδομή.

Ένα άλλο συνηθισμένο gotcha για αρχάριους προγραμματιστές εφαρμογών ιστού για κινητά είναι να υποθέσουμε ότι ο κώδικας που βασίζεται στον ιστό για ένα πρόγραμμα περιήγησης επιτραπέζιου υπολογιστή θα λειτουργεί «ως έχει» σε ένα πρόγραμμα περιήγησης για κινητά. Δεν. Εκεί σίγουρα είναι διαφορές και, αν δεν τις γνωρίζετε, μπορούν σίγουρα να σας δαγκώσουν. Η λειτουργία αυτόματης αναπαραγωγής του HTML5tag, για παράδειγμα, δεν λειτουργεί σε προγράμματα περιήγησης για κινητά. Ομοίως, το CSS transition και opacity Οι ιδιότητες δεν υποστηρίζονται (ή τουλάχιστον δεν υποστηρίζονται με συνέπεια) στα περισσότερα προγράμματα περιήγησης για κινητά σήμερα. Θα αντιμετωπίσετε επίσης προβλήματα με ορισμένες μεθόδους API Ιστού σε μια πλατφόρμα για κινητά, όπως το API ροής μουσικής SoundCloud που απαιτεί Adobe Flash που δεν υποστηρίζεται στις περισσότερες φορητές συσκευές.

Ένα κοινό gotcha για αρχάριους προγραμματιστές εφαρμογών ιστού για κινητά είναι να με βεβαιώσετε ότι ο κώδικας που βασίζεται στον ιστό για ένα πρόγραμμα περιήγησης για επιτραπέζιους υπολογιστές θα λειτουργεί 'ως έχει' σε ένα πρόγραμμα περιήγησης για κινητά.

Ένας ιδιαίτερα περίπλοκος παράγοντας στην ανάπτυξη εφαρμογών ιστού για κινητές συσκευές είναι ότι η διάρκεια ζωής των κινητών συσκευών τείνει να είναι πολύ μικρότερη από αυτή των επιτραπέζιων υπολογιστών (η μέση διάρκεια ζωής ενός κινητού τηλεφώνου στις ΗΠΑ είναι περίπου 21 μήνες). Αυτά τα μικρότερα χρονικά διαστήματα συσκευών, συνοδευόμενα από συνεχείς εκδόσεις νέων κινητών συσκευών και τεχνολογιών, αποδίδουν ένα συνεχώς μεταβαλλόμενο τοπίο συσκευών που πρέπει να στοχεύονται. Ενώ εργάζεστε σε ένα πρόγραμμα περιήγησης ανακουφίζει κάπως αυτό το ζήτημα προστατεύοντάς σας από ορισμένα ζητήματα που αφορούν συγκεκριμένες συσκευές, θα χρειαστεί να σχεδιάσετε μια προβολή βάσει προγράμματος περιήγησης που υποστηρίζει πολλές διαφορετικές αναλύσεις οθόνης (καθώς και κατάλληλη προσαρμογή για προσανατολισμούς τοπίου και κατακόρυφου προσανατολισμού) ).

Πρέπει επίσης να σκεφτεί κανείς για να υποστηρίξει τις οθόνες Retina της Apple (οθόνες υγρών κρυστάλλων που έχουν πυκνότητα pixel αρκετά υψηλή ώστε το ανθρώπινο μάτι να μην μπορεί να διακρίνει μεμονωμένα pixel σε μια τυπική απόσταση προβολής). Πολλά προϊόντα της Apple - συμπεριλαμβανομένων των iPhone, iPod Touch, iPad, MacBook Pro, iPad Mini και iPad Air - προσφέρουν οθόνες Retina. Ειδικότερα για μια εφαρμογή ιστού για κινητά, είναι σημαντικό να γνωρίζετε ότι μια οθόνη Retina κάνει εικόνες χαμηλής ανάλυσης (οι οποίες συνήθως προβάλλονται σε κινητές συσκευές) να φαίνονται ασαφείς και pixelation μπορεί να συμβεί. Η καλύτερη λύση ανάπτυξης εφαρμογών σε αυτές τις περιπτώσεις είναι να αναγνωρίσει ο διακομιστής ότι το αίτημα προέρχεται από μια συσκευή Retina και στη συνέχεια να παρέχει μια εναλλακτική εικόνα υψηλότερης ανάλυσης στον πελάτη.

Εάν θέλετε να χρησιμοποιήσετε μερικά από τα δροσερά στοιχεία HTML5, θυμηθείτε να επαληθεύσετε εκ των προτέρων ότι η λειτουργικότητα που αναζητάτε υποστηρίζεται σε ολόκληρο το τοπίο της συσκευής που είναι πιθανό να χρησιμοποιούν οι πελάτες σας. Για παράδειγμα, στο iOS 6 και παραπάνω, δεν υπάρχει υποστήριξη για τον πλοηγό getUserMedia λειτουργικότητα, καθώς η κάμερα είναι προσβάσιμη μόνο μέσω εγγενών εφαρμογών. Δύο εξαιρετικοί πόροι για τον έλεγχο του τι υποστηρίζεται σε συγκεκριμένες συσκευές και προγράμματα περιήγησης caniuse.com και html5test.com .

Θυμηθείτε να επαληθεύσετε εκ των προτέρων ότι η λειτουργικότητα που αναζητάτε υποστηρίζεται σε όλο το τοπίο της συσκευής που είναι πιθανό να χρησιμοποιούν οι πελάτες σας.

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

/* For lower than 700px resolutions */ @media (max-width: 700px) { ... } /* Same as last but with the device orientation on land scape */ @media (max-width: 700px) and (orientation: landscape) { ... } /* Including width and orientation you can add a media type clause, in this case 'tv' */ @media tv and (min-width: 700px) and (orientation: landscape) { ... } /* for low resolution display with background-image */ .image { background-image: url(/path/to/my/image.png); background-size: 200px 300px; height: 300px; width: 200px; } /* for high resolution (Retina) display with background-image */ @media only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { -repeat; background-size: 200px 400px; /* rest of your styles... */ } }

Βελτιστοποίηση της εφαρμογής Web για κινητές συσκευές για απόδοση

'ΩΜ, αυτό το πράγμα είναι τόσο αργό!' Ως προγραμματιστής εφαρμογών ιστού για κινητά, αυτές είναι πιθανώς οι τελευταίες λέξεις που θέλετε να ακούσετε από έναν από τους χρήστες σας. Επομένως, πρέπει να σκεφτείτε προσεκτικά πώς να μειώσετε και να βελτιστοποιήσετε κάθε byte και μεταφορά διακομιστή για να μειώσετε τον χρόνο αναμονής του χρήστη. Δεν είναι ρεαλιστικό να περιμένετε ότι οι μεταφορές θα γίνονται πάντα μέσω ενός δικτύου WiFi και θα πρέπει να το γνωρίζετε 60% των χρηστών ιστού για κινητά ας πούμε ότι περιμένουν έναν ιστότοπο να φορτώσει στο κινητό τους τηλέφωνο σε 3 δευτερόλεπτα ή λιγότερο (πηγή). Ομοίως, η Google διαπίστωσε ότι, για κάθε επιπλέον πέντε δευτερόλεπτα του χρόνου φόρτωσης, η επισκεψιμότητα μειώθηκε κατά 20% (και αξίζει επίσης να σημειωθεί ότι οι μηχανές αναζήτησης βλέπουν τους χρόνους φόρτωσης ως μέρος του υπολογισμού της βαθμολογίας ποιότητας σελίδας).

Το 60% των χρηστών ιστού για κινητά δηλώνουν ότι αναμένουν φόρτωση ενός ιστότοπου στο κινητό τους σε 3 δευτερόλεπτα ή λιγότερο.

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

• Βελτιστοποίηση εικόνας. Ο χρόνος φόρτωσης εικόνας είναι γνωστό ότι είναι ένα από τα μεγαλύτερα προβλήματα απόδοσης που επηρεάζουν τη φόρτωση σελίδας σε κινητές συσκευές. Χρήση διαδικτυακών βελτιστοποιητών εικόνας, όπως smushit.com , μπορεί να είναι χρήσιμο στην αντιμετώπιση αυτού του ζητήματος.
• Συμπίεση κώδικα. Η συμπίεση των αρχείων JavaScript και CSS, ανάλογα με την ποσότητα του κώδικα που έχετε, μπορεί ενδεχομένως να έχει σημαντικό αντίκτυπο στην απόδοση.
• Ερωτήματα βάσης δεδομένων.
  • Ορισμένα προγράμματα περιήγησης κινητής συσκευής δεν δέχονται τόσα cookie όσο τα προγράμματα περιήγησης επιτραπέζιων υπολογιστών, γεγονός που μπορεί να οδηγήσει στην ανάγκη εκτέλεσης ακόμη περισσότερων ερωτημάτων από το συνηθισμένο. Η προσωρινή αποθήκευση από την πλευρά του διακομιστή είναι επομένως ιδιαίτερα σημαντική κατά την υποστήριξη πελατών εφαρμογών ιστού για κινητά.
  • Θυμηθείτε να χρησιμοποιήσετε τα κατάλληλα φίλτρα για να αποκλείσετε την εισαγωγή ερωτημάτων SQL που διαφορετικά θα μπορούσαν να θέσουν σε κίνδυνο την ασφάλεια του ιστότοπου και του διακομιστή σας.
• Δίκτυα παράδοσης περιεχομένου (CDN). Εάν σκοπεύετε να παρέχετε πολλά βίντεο, εικόνες, αρχεία ήχου ή άλλους τύπους μέσων, συνιστάται η χρήση ενός CDN. Μερικά από τα πιο κοινά εμπορικά CDN περιλαμβάνουν Amazon S3 , Microsoft Windows Azure , και MaxCDN . Τα πλεονεκτήματα της χρήσης ενός CDN είναι πολυάριθμα και περιλαμβάνουν:
  • Βελτιωμένη απόδοση λήψης. Η αξιοποίηση των πόρων ενός CDN σάς επιτρέπει να διανέμετε φορτίο, να εξοικονομείτε εύρος ζώνης και να αυξάνετε την απόδοση. Τα καλύτερα CDN προσφέρουν υψηλότερη διαθεσιμότητα, χαμηλότερη καθυστέρηση δικτύου και χαμηλότερη απώλεια πακέτων. Επιπλέον, πολλά CDN παρέχουν μια παγκοσμίως κατανεμημένη επιλογή κέντρων δεδομένων, επιτρέποντας τη λήψη λήψεων από έναν διακομιστή πιο κοντά στην τοποθεσία του χρήστη (με αποτέλεσμα λιγότερους λυκίσκους δικτύου και γρηγορότερες λήψεις).
  • Περισσότερες ταυτόχρονες λήψεις. Τα προγράμματα περιήγησης συνήθως περιορίζουν τον αριθμό των ταυτόχρονων συνδέσεων σε έναν μόνο τομέα, μετά τον οποίο αποκλείονται πρόσθετες λήψεις έως ότου ολοκληρωθεί μία από τις προηγούμενες λήψεις. Συχνά μπορείτε να δείτε αυτό το όριο σε δράση κατά τη λήψη πολλών μεγάλων αρχείων από τον ίδιο ιστότοπο. Κάθε επιπλέον CDN (σε διαφορετικό τομέα) επιτρέπει επιπλέον ταυτόχρονες λήψεις.
  • Βελτιωμένα αναλυτικά στοιχεία. Πολλά εμπορικά CDN παρέχουν αναφορές χρήσης που μπορούν να συμπληρώσουν τις δικές σας αναλύσεις ιστότοπων και οι οποίες μπορεί να προσφέρουν καλύτερη ποσοτικοποίηση των προβολών βίντεο και των λήψεων. GTmetrix , για παράδειγμα, έχει ένα εξαιρετικό εργαλείο αναφοράς ιστότοπων για την παρακολούθηση και βελτιστοποίηση των πηγών που φορτώνονται στον ιστότοπό σας.

Εργαλεία ανάπτυξης εφαρμογών ιστού για κινητά

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

Επιλογή του σωστού πλαισίου εφαρμογών ιστού JavaScript για κινητά

Καθώς η ανάπτυξη εφαρμογών ιστού για κινητά τείνει να δημιουργεί πολλές από τις ίδιες κοινές προκλήσεις - όπως συμβατότητα μεταξύ προγραμμάτων περιήγησης και ασυνεπή HTML και CSS σε προγράμματα περιήγησης για κινητά - έχουν αναπτυχθεί πλαίσια (βάσει HTML5 και CSS3) που έχουν σχεδιαστεί ειδικά για την αντιμετώπιση αυτών των ζητημάτων και να λειτουργεί όσο το δυνατόν άψογα σε μια ευρεία γκάμα έξυπνων τηλεφώνων και tablet. Τα περισσότερα από αυτά τα πλαίσια εφαρμογών ιστού για κινητά είναι ελαφριά, γεγονός που διευκολύνει τη γρήγορη περιήγηση στον ιστό για κινητά χωρίς να διακυβεύεται η εμφάνιση και η αίσθηση του ιστότοπού σας.

Διεύρυνση της άποψής μας πέρα ​​από το τοπίο για κινητά, αν υπάρχει ένα μόνο δημοφιλές πλαίσιο JavaScript που αξίζει να αναφερθεί, είναι jQuery . Εάν είστε εξοικειωμένοι με την έκδοση για υπολογιστές, σας συνιστούμε να δοκιμάσετε jQuery Mobile για την εφαρμογή ιστού για κινητά. Διαθέτει βιβλιοθήκη widget που μετατρέπει τη σημασιολογική σήμανση σε φιλική προς την κίνηση μορφή, διευκολύνοντας τις λειτουργίες στις οθόνες αφής. Η τελευταία έκδοση αποτελείται από μια πραγματικά ελαφριά βάση κώδικα που συσκευάζει μια γροθιά με πολλά γραφικά στοιχεία που μπορούν πραγματικά να βελτιώσουν τη διεπαφή χρήστη σας.

Μια άλλη εναλλακτική λύση, Sencha Touch , κερδίζει γρήγορα μερίδιο αγοράς. Προσφέρει συνολικά εξαιρετική απόδοση και συμβάλλει στην παραγωγή μιας διεπαφής χρήστη ιστού για κινητά που μοιάζει σε μεγάλο βαθμό και μοιάζει με εγγενή. Η πλήρης βιβλιοθήκη widget που διαθέτει βασίζεται στο Sencha's ExtJS Βιβλιοθήκη JavaScript.

Ακολουθούν ορισμένες βασικές διαφορές που πρέπει να λάβετε υπόψη κατά τη σύγκριση του jQuery Mobile και του Sencha Touch:

• Κοίτα και νιώσε. Σε γενικές γραμμές, η εμφάνιση και η αίσθηση μιας εφαρμογής Sencha Touch είναι πιο ευκρινή και ανώτερη από αυτήν μιας εφαρμογής για κινητά jQuery, αλλά είναι σημαντικό να θυμόμαστε ότι τέτοιες αντιδράσεις τείνουν να είναι εξαιρετικά υποκειμενικές.
• Εκτατο. Το jQuery Mobile προσφέρει πολλές επεκτάσεις τρίτων μερών και είναι εγγενώς σχεδιασμένο να είναι εξαιρετικά επεκτάσιμο, ενώ το Sencha Touch είναι επί του παρόντος πολύ περισσότερο από ένα «κλειστό» πλαίσιο.
• Υποστήριξη συσκευής. Το jQuery Mobile στοχεύει αυτήν τη στιγμή μεγαλύτερη διατομή συσκευών από το Sencha Touch.
• HTML 'εναντίον' JavaScript. Το jQuery είναι σε μεγάλο βαθμό κεντρικό σε HTML (δηλαδή, επεκτείνει και χειρίζεται το υπάρχον HTML σε JavaScript), ενώ η κωδικοποίηση Sencha Touch βασίζεται εξ ολοκλήρου σε JavaScript. (Αυτό είναι ένα παράδειγμα, παρεμπιπτόντως, του συνόλου δεξιοτήτων της ομάδας ανάπτυξης που πρέπει να λάβετε υπόψη όταν κάνετε τις τεχνολογικές σας επιλογές.)
• Εξωτερικές εξαρτήσεις. Το jQuery mobile απαιτεί jQuery και jQuery UI για χειρισμό DOM, ενώ το Sencha Touch δεν έχει εξωτερικές εξαρτήσεις.
• Καμπύλη εκμάθησης. Οι περισσότεροι προγραμματιστές θεωρούν ότι ο χρόνος αύξησης με το jQuery είναι μικρότερος από αυτόν του Sencha Touch, ίσως τροφοδοτείται από το μεγάλο ποσοστό των προγραμματιστών ιστού που είναι ήδη εξοικειωμένοι με τις τυπικές βιβλιοθήκες jQuery.

Αποκριτικά Πλαίσια και Εφαρμογές Ιστού για Κινητά

Ένας αυξανόμενος αριθμός ανταποκρινόμενων πλαισίων έχει αρχίσει να εμφανίζεται τα τελευταία χρόνια, με δύο από τα πιο δημοφιλή σήμερα Μπότα και θεμέλιο . Εν ολίγοις, τα ανταποκρινόμενα πλαίσια απλοποιούν και απλοποιούν Σχεδιασμός διεπαφής χρήστη που βασίζεται στον Ιστό και εφαρμογή, ενθυλάκωση των πιο κοινών διατάξεων και παραδειγμάτων διεπαφής χρήστη σε ένα επαναχρησιμοποιήσιμο, βελτιστοποιημένο για την απόδοση πλαίσιο. Κυρίως με βάση CSS και JavaScript, πολλά από αυτά τα πλαίσια είναι ανοιχτού κώδικα, δωρεάν για λήψη και εύκολα προσαρμόσιμα. Εκτός αν έχετε ένα ιδιαίτερα περίεργο σύνολο απαιτήσεων, είναι πιθανό η χρήση ενός από αυτά τα πλαίσια να μειώσει το επίπεδο προσπάθειας για το σχεδιασμό και την εφαρμογή της εφαρμογής ιστού για κινητά.

Εξετάζοντας τις δύο κορυφαίες επιλογές, το Bootstrap και το Foundation, μερικές από τις βασικές διαφορές που πρέπει να λάβετε υπόψη περιλαμβάνουν:

• Στοχευμένες πλατφόρμες. Ενώ το Bootstrap υποστηρίζει κινητές συσκευές, tablet και επιτραπέζιους υπολογιστές, προσανατολίζεται κυρίως στη χρήση επιτραπέζιου υπολογιστή. Το Foundation, από την άλλη πλευρά, έχει σχεδιαστεί για ουσιαστικά όλα τα μεγέθη και τους τύπους οθόνης.
• Συμβατότητα προγράμματος περιήγησης. Το Bootstrap είναι συμβατό με IE7 ή νεότερο, ενώ το Foundation είναι συμβατό μόνο με IE9 ή νεότερο.
• Ποικιλία διατάξεων και στοιχείων. Το Bootstrap έχει μια πολύ μεγαλύτερη συλλογή στοιχείων UI από ό, τι προσφέρεται από το Foundation.
• Αυτόματη αλλαγή μεγέθους. Με το Foundation, το πλέγμα συρρικνώνεται και τεντώνεται σύμφωνα με το τρέχον ύψος και πλάτος του προγράμματος περιήγησης, ενώ το Bootstrap υποστηρίζει μόνο ένα προκαθορισμένο σύνολο μεγεθών πλέγματος βάσει ενός τυπικού συνόλου μεγεθών οθόνης.

Εντοπισμός σφαλμάτων και δοκιμή εφαρμογών ιστού για κινητά

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

Σε αυτό το πλαίσιο, ένα σαφές πλεονέκτημα της ανάπτυξης ιστού για κινητά (σε σύγκριση με την εγγενή ανάπτυξη εφαρμογών) είναι ότι μπορείτε να χρησιμοποιήσετε τυπικά εργαλεία προγραμματιστών που βασίζονται σε προγράμματα περιήγησης για να εντοπίσετε σφάλματα στην εφαρμογή σας. Με βάση την προσωπική μου προτίμηση για απομακρυσμένο εντοπισμό σφαλμάτων, αυτό που προτείνω σε αυτόν τον οδηγό ανάπτυξης εφαρμογών είναι το Chrome με τα DevTools του. Άλλες τυπικές επιλογές περιλαμβάνουν το Firefox με Firebug ή τα εργαλεία Dragonfly της Opera.

Μερικοί από τους λόγους που προτιμώ Chrome με τα DevTools του περιλαμβάνω:

• Κινητός εξομοιωτής στα DevTools του Chrome. Αυτός είναι ίσως ο μόνος επαρκής λόγος για να επιλέξετε το Chrome για εντοπισμό σφαλμάτων εφαρμογών ιστού για κινητά. Τα βασικά χαρακτηριστικά περιλαμβάνουν προσομοίωση συμβάντων αφής, πλαστογράφηση παράγοντα χρήστη, περιορισμός εύρους ζώνης δικτύου, παρακάμψεις γεωγραφικής θέσης, παρακάμψεις προσανατολισμού συσκευών και εξομοίωση τύπων μέσων CSS.
• Διαδραστικό πρόγραμμα επεξεργασίας. Δυνατότητα επεξεργασίας JavaScript ή CSS on-the-fly.
• Superior πρόγραμμα εντοπισμού σφαλμάτων JavaScript. Επιτρέπει για σημεία διακοπής DOM και παρέχει τη δυνατότητα προφίλ του χρόνου εκτέλεσης κώδικα JavaScript.
• Ενσωματωμένα προγράμματα προβολής JSON και XML. Αποφεύγει την ανάγκη οποιουδήποτε πρόσθετου να ελέγχει τις απαντήσεις του διακομιστή.
• Υποστήριξη για το πρωτόκολλο Android Debug Bridge (ADB) απευθείας μέσω USB. Διευκολύνει την εύκολη εμφάνιση μιας περιόδου λειτουργίας απομακρυσμένου εντοπισμού σφαλμάτων. ( Εδώ είναι ένα καλό σεμινάριο από την Google για το πώς να ξεκινήσετε τον απομακρυσμένο εντοπισμό σφαλμάτων στο Chrome.)
• Δυναμική επιθεώρηση πόρων. Σας επιτρέπει να ελέγχετε τις τοπικές πηγές δεδομένων της εφαρμογής σας, συμπεριλαμβανομένων βάσεων δεδομένων IndexedDB ή Web SQL, τοπικού χώρου αποθήκευσης και συνεδρίας, cookie και πόρων εφαρμογής Cache. Μπορείτε επίσης να ελέγξετε γρήγορα τους οπτικούς πόρους της εφαρμογής σας, συμπεριλαμβανομένων εικόνων, γραμματοσειρών και φύλλων στυλ.

Για να ελέγξετε τη διάταξη και τη συμβατότητα μεταξύ της περιήγησης στην εφαρμογή ιστού σας, μπορείτε επίσης να χρησιμοποιήσετε ορισμένα χρήσιμα διαδικτυακά εργαλεία, όπως Πρόγραμμα περιήγησης . Απλώς εισαγάγετε τη διεύθυνση URL για την εφαρμογή σας, επιλέξτε το πρόγραμμα περιήγησης, την έκδοση και το λειτουργικό σύστημα και θα λάβετε τη μιμημένη προβολή (και ταχύτητα φόρτωσης) του ιστότοπού σας σε αυτό το περιβάλλον. Ένα άλλο χρήσιμο εργαλείο για τους σκοπούς αυτούς είναι Δοκιμή CrossBrowser .

Τύλιξε

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

Πολλοί παράγοντες πρέπει να λαμβάνονται υπόψη κατά την επιλογή μεταξύ ιστού, εγγενών και υβριδικών επιλογών εφαρμογών για κινητά για κινητές συσκευές. Ο καθένας έχει τα δικά του πλεονεκτήματα, αλλά οι εφαρμογές ιστού για κινητά θα αντιπροσωπεύουν συχνά την πιο αποτελεσματική σας επιλογή ανάπτυξης (και επομένως από το χρόνο στην αγορά). Εάν επιλέξετε να ακολουθήσετε αυτήν την πορεία, ελπίζω ότι αυτός ο οδηγός ανάπτυξης εφαρμογών ιστού για κινητά θα σας βοηθήσει να φτάσετε πιο άμεσα και με επιτυχία στον προορισμό σας.

Σχετίζεται με: Κάντε την εφαρμογή σας κερδοφόρα — Αξιοποιήστε το Analytics για κινητά

Κατανόηση των βασικών

Τι είναι μια εφαρμογή ιστού για κινητά;

Οι εφαρμογές ιστού για κινητά είναι εφαρμογές ιστού βελτιστοποιημένες για μια καλή εμπειρία τηλεφώνου. Δεν είναι εφαρμογές για κινητά, αλλά ιστότοποι γραμμένοι σε HTML / CSS και λειτουργούν από πρόγραμμα περιήγησης. Παρόλο που μπορεί να έχουν σχεδιαστεί για να μοιάζουν με την αίσθηση των εφαρμογών smartphone, δεν έχουν πολλά κοινά.

Τι είναι η εγγενής εφαρμογή;

Μια εγγενής εφαρμογή είναι μια εφαρμογή γραμμένη για μια συγκεκριμένη πλατφόρμα, χρησιμοποιώντας API ειδικά για πλατφόρμα.

Τι είναι μια υβριδική εφαρμογή;

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

Ποια είναι η τεχνική διαφορά μεταξύ εγγενών και υβριδικών εφαρμογών;

Οι εγγενείς εφαρμογές γράφονται σε γλώσσες συγκεκριμένης πλατφόρμας χρησιμοποιώντας API πλατφόρμας, όπως Java ή Kotlin για Android και Objective C ή Swift για iOS. Οι υβριδικές εφαρμογές γράφονται χρησιμοποιώντας τεχνολογίες ιστού όπως HTML5 / CSS και Javascript

Εγγενής εφαρμογή έναντι εφαρμογής ιστού: Ποιος είναι ο αντίκτυπος στην εμπειρία χρήστη;

Μια εφαρμογή ιστού για κινητά είναι ένας ιστότοπος βελτιστοποιημένος για χρήση σε κινητό. Εάν γίνει καλά, η εμπειρία είναι αξιοθαύμαστα σαν μια εγγενής ή υβριδική εφαρμογή. Για παράδειγμα, ανατρέξτε στη διεύθυνση https://paperplanes.world/.

Γιατί οι εγγενείς εφαρμογές προσφέρουν συνήθως ανώτερη απόδοση;

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