Συνταγές CSS3 για webkit. Για κινητές συσκευές. Τι είναι κοινό σε κάθε λιμάνι webkit

Android και iPhone - Wars Browser

Μέρος 1. Η Webkit βρίσκεται σε μια βιασύνη για βοήθεια

Ανάπτυξη μιας αίτησης για ένα πρόγραμμα περιήγησης που είναι υπεύθυνο για την παρακολούθηση της κατάστασης του δικτύου

Σειρά περιεχομένου:

Σύνολο, οι πλατφόρμες iPhone και Android έχουν περισσότερες από 100.000 εφαρμογές διαθέσιμες για λήψη από διάφορες πηγές. Ταυτόχρονα, που σημαίνει "μητρική" εφαρμογές, δηλ. Εφαρμογές που αναπτύσσονται και συλλέγονται μέσω του αντίστοιχου SDK και στη συνέχεια εγκαθίστανται σε μια κινητή συσκευή. Παρόμοιες οι "μητρική" αιτήσεις καθιστούν δυνατή την αποτελεσματική εφαρμογή των τεχνικών δυνατοτήτων της κινητής συσκευής, συμπεριλαμβανομένης της υποστήριξης Ασύρματα δίκτυα, Αποθήκες Bluetooth και δεδομένων, χαρακτηριστικά επιταχυνσιομέτρου ή πυξίδας και άλλα τεχνολογικά θαύματα και νέα στοιχεία που κάνουν τις κινητές συσκευές τόσο ελκυστικές για τους χρήστες. Η δημοτικότητα των "εγγενών" εφαρμογών για τις πλατφόρμες iPhone και Android είναι εξαιρετικά μεγάλο, αλλά επιπλέον, οι κινητές συσκευές παρέχουν εκτεταμένες ευκαιρίες για την ανάπτυξη εφαρμογών ιστού. Οι κινητές τεχνολογίες έχουν περάσει από καιρό από την ηλικία των παιδιών και με αυτά έφθασαν σε ορισμένες ωριμότητες και κινητό διαδίκτυο.

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

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

• Προβλήματα εγκατάστασης: Η εγκατάσταση εφαρμογών Web δεν προκαλεί προβλήματα - απλά εγκαταστήστε ή αντιγράψτε τα στο διακομιστή και ενημερώστε τους στους πελάτες σας, ποια διεύθυνση URL θα πρέπει να καθοριστεί στο πρόγραμμα περιήγησης.
• Προβλήματα μεγέθυνσης: Οι εφαρμογές Web κλιμακώνονται εύκολα στην πισίνα του διακομιστή ενός διακομιστή δεδομένων υψηλής απόδοσης και τα εργαλεία υπηρεσίας εφαρμογής χρησιμοποιούνται για τη διατήρηση εφαρμογών.
• Προβλήματα αρχειοθέτησης και ανάκτησης δεδομένων: Οι εφαρμογές Web χρησιμοποιούν μια κεντρική αποθήκη δεδομένων, απλοποιώντας έτσι το καθήκον της ανάκτησης σε περίπτωση αποτυχιών.
• Ερωτήσεις διεπαφής χρήστη: Συνδυασμός HTML, Cascading Style Sheets (CSS), Javascript και γραφικές εικόνες σας επιτρέπει να δημιουργήσετε μια πολυλειτουργική διεπαφή χρήστη που υπερβαίνει σημαντικά τις δυνατότητές του και τις διεπαφές εμφάνισης που αναπτύχθηκε μέσω του "Native" SDK. Το τελευταίο, κατά κανόνα, δεν είναι σε θέση να παράσχει πλήρη επίδραση της παρουσίας για εφαρμογές παιχνιδιών και δεν εγγυάται την απαραίτητη λειτουργικότητα για τερματικούς σταθμούς διαδραστικών πληροφοριών.
• Εύκολο στη χρήση: Οι περισσότερες εφαρμογές απαιτούν απλά στοιχεία διασύνδεσης χρήστη που μπορούν εύκολα να εκτελέσουν καθημερινές λειτουργίες.

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

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

Το γεγονός είναι ότι η υποστήριξη για τα προγράμματα περιήγησης στο Web Κινητές συσκευέςΑχ ήταν πρακτικά απουσιάζει. Η κατάσταση έχει αλλάξει δραματικά με την έλευση της τεχνολογίας που ονομάζεται webkit, η οποία πήρε με αυτοπεποίθηση τη θέση του στον τομέα των κινητών συσκευών ακριβώς χάρη στο iPhone.

Σε λίγα χρόνια, η πλατφόρμα iPhone έχει γίνει ο αριθμός του Web Client ένας στον κόσμο. Γιατί; Επειδή η webkit σε συνδυασμό με αξιόπιστη λειτουργία της σύνδεσης στο Internet, επέτρεψε τη χρήση υπηρεσιών Web σε κινητές συσκευές πολύ πιο αποτελεσματικά από οποιοδήποτε άλλο σύγχρονο προγράμματος περιήγησης. Άλλοι παράγοντες της αγοράς κινητής αγοράς επέστησαν επίσης την προσοχή στη νέα τεχνολογία και τώρα ολόκληρη η αγορά μπορεί να χωριστεί σε εταιρείες που χρησιμοποιούν webkit, εταιρείες που θα χρησιμοποιήσουν webkit και εταιρείες επινοούν δικαιολογίες για να μην χρησιμοποιήσουν webkit.

Τι είναι λοιπόν webkit;

Webkit και html5

Το WebKit είναι ένας κινητήρας του προγράμματος περιήγησης που χρησιμοποιείται τόσο για να υποστηρίξει το πρόγραμμα περιήγησης Safari του κινητού Safari στην πλατφόρμα iPhone και στη στήριξη του προγράμματος περιήγησης στην πλατφόρμα Android. Φυσικά, η webkit χρησιμοποιείται επίσης σε άλλες κινητές συσκευές, αλλά στο πλαίσιο αυτού του άρθρου θα περιορίσουμε τον εαυτό μας στην εξέταση των πλατφορμών iPhone και Android.

Το WebKIT είναι ένα έργο ανοιχτού κώδικα, που προέρχεται από την ανάπτυξη του περιβάλλοντος K Desktop (KDE). Είναι το έργο webkit ότι οι σύγχρονες εφαρμογές ιστού για κινητές συσκευές απαιτούνται από την εμφάνισή τους. Τα τεχνολογικά και σχεδιαστικά χαρακτηριστικά της κινητής συσκευής, φυσικά, διαδραματίζουν σημαντικό ρόλο, αλλά οι χρήστες κινητής τηλεφωνίας ενδιαφέρονται κυρίως για το περιεχόμενο. Εάν η κινητή συσκευή παρέχει πρόσβαση μόνο στο μικρό μέρος του περιεχομένου του Διαδικτύου, είναι απίθανο ότι μπορεί να εισέλθει στην κορυφαία λίστα των πιο δημοφιλών συσκευών.

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

Αξίζει να σημειωθεί ότι η webkit χρησιμοποιείται επίσης στους επιτραπέζιους υπολογιστές, για παράδειγμα, στο πρόγραμμα περιήγησης Safari, το οποίο είναι το κύριο πρόγραμμα περιήγησης της πλατφόρμας Mac OS X. Ανεξάρτητα από το αν η έκδοση για τους επιτραπέζιους υπολογιστές ή ένας κινητήρας περιήγησης για το iPhone ή το Android, webkit παραμένει η πιο προηγμένη τεχνολογία, υποστηρίζοντας το HTML και το CSS. Στην πραγματικότητα, η webkit υποστηρίζει τα στυλ CSS, τα οποία δεν εμφανίζονται ακόμη από προγράμματα περιήγησης σε άλλους κινητήρες - ως παράδειγμα, μπορείτε να καθορίσετε έναν αριθμό ιδιοτήτων που ορίζονται από τις προδιαγραφές HTML5.

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

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

Εάν αποφασίσετε να κυριαρχήσετε τις τεχνολογίες ανάπτυξης ιστοσελίδων, τότε στη διάθεσή σας είναι μια πολύ περιορισμένη επιλογή κεφαλαίων. Πρώτα απ 'όλα, η εφαρμογή μπορεί να δημιουργηθεί απευθείας στο διακομιστή ως αρχείο που περιέχει τον κώδικα HTML, CSS και JavaScript. Ταυτόχρονα, το περιεχόμενο HTML μπορεί να παρασχεθεί με τη μορφή στατικών αρχείων HTML και μπορεί να δημιουργηθεί δυναμικά λόγω της χρήσης διαφόρων τεχνολογιών που λειτουργούν στην πλευρά του διακομιστή, όπως για παράδειγμα, όπως PHP, ASP.NET, Java Servlets, Κλπ. Τέλος πάντων, από το όραμα των θεμάτων που εξετάζονται σε αυτό το άρθρο, όλα καταδύονται στον κώδικα HTML και εδώ το πιο σημαντικό πράγμα για εμάς είναι το γεγονός ότι η τεχνολογία WebKit επιτρέπει στους προγράμματα περιήγησης να παίξουν HTML σε κινητές συσκευές.

Για να εκτελέσετε μια εφαρμογή ιστού σε μια κινητή συσκευή (iPhone ή Android), ο χρήστης πρέπει να ξεκινήσει το πρόγραμμα περιήγησης και να εισάγει τη διεύθυνση URL της σχετικής υπηρεσίας, για παράδειγμα: http://yourcompanyname.com/applicationurl.

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

Εμφάνιση τυποποιημένων ιστότοπων

Ο κινητήρας webkit σε συνδυασμό με ένα διαισθητικό και φιλικό προς το χρήστη περιβάλλον εργασίας των πλατφορμών iPhone και Android σας επιτρέπει να προβάλλετε σχεδόν οποιεσδήποτε ιστοσελίδες στην κινητή συσκευή σας. Οι ιστοσελίδες εμφανίζονται αρκετά σωστά, σε αντίθεση με την προηγούμενη γενιά των περιηγητή κινητού τηλεφώνου, τα οποία μεταφέρθηκαν τυχαία θραύσματα περιεχομένου ή δεν τις εμφανίστηκαν καθόλου. Κατά τη λήψη σελίδων σε ένα πρόγραμμα περιήγησης υποστήριξης webkit, τα περιεχόμενα της σελίδας συνήθως κλιμακώνονται. Ταυτόχρονα, η κλίμακα επιλέγεται με τέτοιο τρόπο ώστε ολόκληρη η σελίδα να είναι τοποθετημένη εξ ολοκλήρου στην οθόνη, αν και σε μια έντονα μειωμένη, συχνά μη εμπιστευτική μορφή, όπως φαίνεται στο σχήμα 1. Ωστόσο, η σελίδα μπορεί να μεταβληθεί, να αυξηθεί, να αυξηθεί, να αυξηθεί, Μετακίνηση, εξασφαλίζοντας άνετη πρόσβαση σε όλα τα στοιχεία περιεχομένου. Από προεπιλογή, το πρόγραμμα περιήγησης χρησιμοποιεί ένα παράθυρο 980 pixel πλάτος.

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

Οι ιστοσελίδες δημιουργήθηκαν λαμβάνοντας υπόψη τα κινητά χαρακτηριστικά

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

Παρά το γεγονός ότι η webkit σάς επιτρέπει να εμφανίσετε σωστά την ιστοσελίδα στην οθόνη κινητής συσκευής, υπάρχει μια συγκεκριμένη διαφορά μεταξύ των συσκευών χρησιμοποιώντας ένα ποντίκι, όπως φορητούς ή επιτραπέζιους υπολογιστές και συσκευές αφής, όπως iPhone ή Android smartphones. Οι αισθητικές συσκευές διακρίνονται από τις φυσικές διαστάσεις της περιοχής "Click", η έλλειψη της λειτουργίας του οδηγού δρομέα σε οποιοδήποτε στοιχείο και μια άλλη ακολουθία συμβάντων. Έτσι, αν θέλετε να δημιουργήσετε έναν ιστότοπο που θα ήταν βολικό τόσο για τους κανονικούς όσο και για χρήστες κινητών, πρέπει να εξετάσετε τα ακόλουθα χαρακτηριστικά των κινητών συσκευών:

• Τα προγράμματα περιήγησης iPhone και το Android είναι σε θέση να εμφανίζουν ολόκληρη την "αναγνώσιμη" ιστοσελίδα - η ποιότητα της προβολής αυτών των προγραμμάτων περιηγητή είναι σημαντικά υψηλότερη από αυτή των τυποποιημένων κινητών περιηγητή - έτσι μην βιαστούμε για να απλοποιήσετε το σχεδιασμό του ιστότοπού σας.
• Το μέγεθος των μαξιλαριών των δακτύλων υπερβαίνει σημαντικά το μέγεθος του δείκτη του ποντικιού. Εξετάστε αυτόν τον παράγοντα στην ανάπτυξη στοιχείων πλοήγησης ιστότοπου. Μην τοποθετείτε τους συνδέσμους πολύ κοντά ο ένας στον άλλο, διαφορετικά ο χρήστης δεν θα είναι σε θέση να κάνει κλικ στον ίδιο σύνδεσμο, που δεν έχει κολληθεί ταυτόχρονα παρακείμενα.
• Στοιχεία που εμφανίζονται όταν αιωρούνται ο δρομέας δεν θα λειτουργήσει σε κινητές συσκευές. Ο χρήστης απλά δεν μπορεί να "hover" ένα δάκτυλο σε οποιοδήποτε στοιχείο ακριβώς όπως ένα δρομέα ποντικιού.
• Εκδηλώσεις που ορίζονται πατώντας και κρατώντας το κουμπί του ποντικιού, σύροντας το ποντίκι κ.λπ., σε οθόνες αφής υλοποιούνται με άλλο τρόπο. Ορισμένα από αυτά τα γεγονότα θα είναι σε θέση να εργαστούν σε κινητές συσκευές, αλλά γενικά δεν θα πρέπει να υπολογίζουν ότι το πρόγραμμα περιήγησης για κινητά και το πρόγραμμα περιήγησης επιφάνειας εργασίας θα εκτελέσει τις ίδιες ακολουθίες ενεργειών.

Μπορείτε να βρείτε μια λεπτομερή συζήτηση αυτών των πτυχών στο άρθρο " iPhone σε δράση."(Βλ. Ενότητα). Στο άρθρο μας, θα περιορίσουμε τον εαυτό μας στην εξέταση των πλεονεκτημάτων webkit και όχι τα ελαττώματά του.

Εξετάστε το πιο προφανές πρόβλημα με το οποίο αντιμετωπίζονται οι χρήστες iPhone ή Android κατά την πρόσβαση σε ιστότοπους, δηλαδή το περιορισμένο μέγεθος οθόνης. Στην πραγματικότητα, η οθόνη μιας σύγχρονης κινητής συσκευής έχει μέγεθος 320x480 ή 480x320, υπό την προϋπόθεση ότι ο χρήστης προτιμά να προβάλλει περιεχόμενο ιστού στη διαμόρφωση του τοπίου. Όπως μπορεί να δει από το σχήμα 1, η webkit είναι σε θέση να εμφανίσει σωστά μια ιστοσελίδα που έχει σχεδιαστεί για τυποποιημένους επιτραπέζιους υπολογιστές. Ωστόσο, κατά την κλιμάκωση μιας ιστοσελίδας, το κείμενο του μπορεί να είναι πολύ μικρό για να διαβαστεί, οπότε ο χρήστης θα χρειαστεί να χρησιμοποιήσει τις λειτουργίες της κύλισης, της μετατόπισης και της αύξησης πριν μπορεί να διαβάσει το κείμενο. Πώς να αντιμετωπίσετε αυτόν τον περιορισμό;

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

Η ετικέτα Meta είναι μια ετικέτα HTML που τοποθετείται στην κεφαλίδα του εγγράφου HTML. Το ευκολότερο παράδειγμα χρήσης της ετικέτας προβολής μοιάζει με αυτό: . Κατά την προσθήκη αυτής της μετα-ετικέτας στη σελίδα HTML, η χαρτογράφηση του στο παράθυρο του προγράμματος περιήγησης για κινητά κλιμακώνεται με τον πιο βέλτιστο τρόπο (βλ. Εικόνα 2). Τα προγράμματα περιήγησης που δεν υποστηρίζουν την προβολή προβλημάτων απλά αγνοούν αυτήν την ετικέτα.

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

Για να προσδιορίσετε συγκεκριμένες παραμέτρους κλιμάκωσης, καθορίστε την ακριβή τιμή του περιεχομένου Meta Tag Viewport: . Με την αλλαγή της τιμής της παραμέτρου αρχικής κλίμακας, η εικόνα μπορεί να μειωθεί ή να αυξηθεί. Για πλατφόρμες iPhone και Android καλύτερα Χρησιμοποιήστε τιμές από 1,0 έως 1,3. Η ετικέτα Meta Viewport υποστηρίζει επίσης την ελάχιστη και μέγιστη κλίμακα, η οποία σας επιτρέπει να περιορίσετε την ικανότητα του χρήστη να τροποποιεί την κλίμακα σελίδας κατά τη λήψη του.

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

Η εμπειρία δείχνει ότι εκτός από τις εποικοδομητικές διαφορές που υπάρχουν μεταξύ διαφόρων κινητών συσκευών με βάση το Android, το ίδιο το Android λογισμικό προσπαθεί να ορίσει τις ρυθμίσεις της ιστοσελίδας που μπορείτε να κατεβάσετε ανάλογα με τις ιδιότητες του προγράμματος περιήγησης κινητής συσκευής. Εκτός από τη σταθερότητα, η πλατφόρμα Android χαρακτηρίζεται από ένα συνεχώς μεταβαλλόμενο σύνολο λειτουργιών και δυνατοτήτων. Οι ρυθμίσεις για τη συγκεκριμένη συσκευή με βάση το Android, πιθανότατα θα διαφέρουν από τις ρυθμίσεις του αναπτυξιακού σας περιβάλλοντος, ανάλογα με το Έκδοση sdk και τον κατασκευαστή της συσκευής. Το σχήμα 4 δείχνει την οθόνη ρύθμισης του προγράμματος περιήγησης στην έκδοση V1.6 Android Emulator. Οι ρυθμίσεις οθόνης παρέχουν στον χρήστη τη δυνατότητα να καθορίσει το επίπεδο κλιμάκωσης εικόνας στην οθόνη (μακριά, κοντά, μεσαίο) ή επιλέξτε τη λειτουργία αυτόματης κλιμάκωσης σελίδας.

Στον κόσμο των κινητών συσκευών, η πιο σταθερή αξία είναι η αλλαγή, έτσι ώστε να ληφθεί υπόψη η ανάπτυξη και η ενημέρωση της αγοράς κινητού λογισμικού. Για παράδειγμα, οι ρυθμίσεις του προγράμματος περιήγησης Sprint Hero περιλαμβάνουν ένα σύνολο επιλογών που είναι θεμελιωδώς διαφορετικές από τις τυπικές παραμέτρους που χρησιμοποιούνται κατά τη φόρτωση της ιστοσελίδας. Το πρόγραμμα περιήγησης Hero είναι χτισμένο στην πλατφόρμα Android V1.5 χρησιμοποιώντας μια σειρά τροποποιήσεων που έγιναν από την HTC. Ευτυχώς, όταν χρησιμοποιείτε το Meta Tag Viewport, οι συγκεκριμένες ρυθμίσεις του ήρωα θα αγνοηθούν.

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

Για κινητές συσκευές

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

Αυτή η σελίδα μοιάζει με το παράθυρο του προγράμματος περιήγησης Desktop:

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

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

Τώρα εξετάστε το παράθυρο προβολής ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ Κινητή έκδοση του Gmail. Δεδομένου ότι ο χώρος επί της οθόνης που διατίθεται στην εφαρμογή είναι πολύ περιορισμένη, το παράθυρο προβολής μηνυμάτων διαθέτει προαιρετικά κουμπιά και στοιχεία πλοήγησης. Σε αυτή την περίπτωση, τα εμφανιζόμενα στοιχεία πλοήγησης επικαλύπτουν το παράθυρο για να προβάλετε μηνύματα. Επιπλέον, δεν πρέπει να χρησιμοποιείτε πάρα πολλά πλαίσια ή div scroll στοιχεία εάν μπορεί να αποφευχθεί. Η έκδοση Mobile Gmail λύνει αυτό το πρόβλημα χρησιμοποιώντας ένα αναδυόμενο μενού που εμφανίζεται μόλις ο χρήστης ολοκληρώσει την κύλιση της σελίδας. Το αναδυόμενο μενού περιέχει 3 κουμπιά: Αρχείο., Διαγράφω. και Περισσότερο. Πατώντας το κουμπί Περισσότερο Εμφανίζονται πρόσθετα στοιχεία μενού (βλ. Εικόνα 7).

Αυτή είναι μια εφαρμογή που αναπτύχθηκε για κινητές συσκευές.

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

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

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

Πλατφόρμα ειδικής περιεχομένου

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

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

Οι εφαρμογές iPhone έχουν τη δική τους ειδική και διεπαφή. Δείξτε σε κάποιον στιγμιότυπο Οθόνης iPhone Και, εκτός αν αυτό το άτομο έπεσε κυριολεκτικά την άλλη μέρα από τη Σελήνη, θα λέει σχεδόν σίγουρα ότι αυτό είναι ένα iPhone. Δείξτε το ίδιο πρόσωπο μια εικόνα της οθόνης της κινητής συσκευής που βασίζεται στο Android και η απάντηση δεν θα είναι τόσο αδιαμφισβήτητη. Ποιός είναι ο λόγος? Υπάρχουν πολλές πιθανές εξηγήσεις. Πρώτον, το iPhone εμφανίστηκε στην αγορά πολύ παλαιότερες συσκευές που βασίζονται στο Android και κατάφερε να αποκτήσει έναν τεράστιο αριθμό οπαδών. Θυμηθείτε τους ανθρώπους που στέκονται στην ουρά για να πληρώσουν σημαντικά χρήματα για τα περιορισμένα χαρακτηριστικά του iPhone V1. Όπως και το iPhone ή όχι αυτό Προϊόν μήλου είναι σήμερα ο ηγέτης της αγοράς. Ποια είναι η περίπτωση με το Android;

Η πλατφόρμα Android είναι ένα σχετικά νέο προϊόν και σε πολλές πτυχές δρα ως αντιπρόθεση του iPhone, δεδομένου ότι έχει σχεδιαστεί κυρίως για την ανοικτή κοινότητα. Η πλατφόρμα Android χρησιμοποιείται στο μέγιστο Διαφορετικές συσκευές (τηλέφωνα και άλλες οικιακές συσκευές). Για ευκολία συζήτησης σε αυτό το άρθρο, θα περιορίσουμε τη χρήση του Android στα κινητά τηλέφωνα.

Με την πάροδο του χρόνου, ο αριθμός των συσκευών στον κόσμο που βασίζεται στο Android θα υπερβεί το ποσό του iPhone. Αυτό εξηγείται από το γεγονός ότι οι συσκευές πλατφόρμας Android εκδίδονται από μια σειρά εταιρειών και θα υποστηριχθούν από τα πιο διαφορετικά δίκτυα δεδομένων. Με έναν τόσο σημαντικό αριθμό παικτών στην αγορά κινητής τηλεφωνίας Android, είναι αναμφισβήτητα να αναμένεται ένας ορισμένος κατακερματισμός της αγοράς με βάση την εμφάνιση και τις παραμέτρους των συσκευών. Αυτή η τάση εντοπίζεται στο παράδειγμα της διεπαφής Senseui από την εταιρεία HTC. Αυτό το ελκυστικό εμφάνιση Και η διεπαφή δεν υποστηρίζεται από τις βασικές εκδόσεις του Android SDK και δεν είναι συμβατές με άλλες συσκευές βάσης δεδομένων Android. Η Motorola, η Google και η Verizon συγχωνεύθηκαν τις προσπάθειές τους να αναπτύξουν μια νέα συσκευή droid με βάση το Android. Αυτό είναι το πρώτο εμπορικό προϊόν στην πλατφόρμα Android Version 2.0.

Συγκρίνετε μια ποικιλία συστημάτων με βάση το Android με ομοιόμορφη εμφάνιση του iPhone. Το iPhone είναι μια ιδιαίτερα πολύτιμη ιδιοκτησία της Apple. Η εμφάνιση των εφαρμογών iPhone μπορεί να αλλάξει ελαφρά με το χρόνο, αλλά αυτές οι μικρές αλλαγές είναι απίθανο να συγκριθούν με Διάφορες εκδόσεις Συστήματα Android, ο αριθμός των οποίων είναι αρκετά μεγάλος, ακόμα και τώρα, όταν η πλατφόρμα βρίσκεται στην αρχή της ανάπτυξής της.

Έτσι, τι πρέπει να γίνει για να μεγιστοποιηθεί η εμφάνιση και μια διεπαφή εφαρμογής σε προγράμματα "μητρικής";

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

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

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

Ευτυχώς, δεν χρειάζεται να το κάνουμε. Στην εποχή της Webkit και CSS, η διαφορά στην εμφάνιση και τη διεπαφή διαφόρων κινητών συσκευών μπορεί να ξεπεραστεί χρησιμοποιώντας το στυλ των στυλ και τα ερωτήματα πολυμέσων (ερώτημα μέσων), επιτρέποντας τη χρήση διαφορετικών στυλ ανάλογα με τον συγκεκριμένο τύπο συσκευής. Η τεχνολογία αιτήματος πολυμέσων σας επιτρέπει να λαμβάνετε πληροφορίες σχετικά με τον πελάτη. Παραδοσιακά, το πρόγραμμα περιήγησης στέλνει ένα χρήσιμο το διακομιστή που επιτρέπει στον διακομιστή να αναγνωρίσει ένα συγκεκριμένο πρόγραμμα περιήγησης και να ορίσει περιεχόμενο που πρέπει να μεταδίδεται στον πελάτη. Χρησιμοποιώντας το ερώτημα πολυμέσων, το πρόγραμμα περιήγησης επιλέγει το στυλ της σελίδας με βάση τις δυνατότητές του. Το παρακάτω παράδειγμα καταδεικνύει την επιλογή του πίνακα στυλ σχεδιασμένο για smartphones: . Και αυτό το αίτημα καθορίζει τον πίνακα των στυλ για τους επιτραπέζιους υπολογιστές: .

Internet Explorer V6.

Κατά τη στιγμή της γραφής, ο Internet Explorer V6 κατέχει περίπου το 20-30% της κοινής αγοράς περιήγησης, αλλά η εξέταση των δυνατοτήτων IE V6 δεν περιλαμβάνεται στα καθήκοντα αυτού του άρθρου.

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

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

Πρόγραμμα παρακολούθησης δικτύου

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

Η εφαρμογή Netmon περιλαμβάνει μια λίστα διακομιστών των οποίων η εργασία πρέπει να παρακολουθείται. Για κάθε διακομιστή, συλλέγονται βασικοί δείκτες απόδοσης (KPI). Βασικοί δείκτες απόδοσης - το κύριο εργαλείο, το οποίο για πολλά χρόνια χρησιμοποιεί φοιτητές MBA για να αξιολογήσει την τρέχουσα επιχειρηματική κατάσταση. Από την άποψη της φιλοξενίας εφαρμογών Web, οι ακόλουθοι δείκτες μπορούν να χρησιμοποιηθούν ως KPI:

• Αριθμός συναλλαγών κατά την τελευταία χρονική περίοδο
  • Εντολές
  • Αιτήματα καταλόγου
  • Μηνύματα ηλεκτρονικού ταχυδρομείου
  • Αριθμός προβολών σελίδων
• Ο χρόνος πέρασε από την τελευταία συναλλαγή
  • Σειρά
  • Ανταλλαγή ηλεκτρονικών δεδομένων
  • Μηνύματα από επιχειρηματικό εταίρο
  • Κατεβάστε το αρχείο από τον προμηθευτή μέσω FTP
• Είναι η διαθέσιμη βάση δεδομένων
• Τελευταία ημερομηνία αντιγράφων ασφαλείας
• Μέση ποσότητα παραγγελίας (σε δολάρια)
• Ενταση ΗΧΟΥ ελεύθερος χώρος Στο δίσκο
• Εύρος ζώνης για την τελευταία ώρα, ημέρα, μήνα

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

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

• Ονομα ιστοσελίδας
• URL του ιστότοπου (αρχική σελίδα)
• URL για ενημερώσεις
• Κατάσταση: Εντάξει ή όχι
• Σύντομη περίληψη: Μια περιγραφή της κατάστασης διακομιστή, η οποία θα έχει είτε την τιμή του OK, είτε να περιέχει μια συμβολοσειρά κειμένου που υποδεικνύει το πιο σοβαρό πρόβλημα για αυτόν τον διακομιστή
• Στοιχεία: Πρόκειται για ένα σύνολο ζευγών ονόματος / τιμής που πρέπει να μεταδώσουμε τις τρέχουσες τιμές KPI για την αντίστοιχη τοποθεσία.

Η εφαρμογή μας θα εμφανίσει τους προκύπτοντες δείκτες απόδοσης σε μια βολική φόρμα για να περιηγηθείτε στη μέγιστη χρήση των δυνατοτήτων CSS, JQuery και WebKit, προκειμένου να προσελκύσει την προσοχή του χρήστη στις προβληματικές περιοχές. Όπως έχουμε ήδη αναφέρει, ο κύριος στόχος στην ανάπτυξη αυτής της εφαρμογής είναι η δυνατότητα να το εκτελέσετε στην πλατφόρμα iPhone, Android και στην επιφάνεια εργασίας του προγράμματος περιήγησης Safari.

Ανάπτυξη αίτησης παρακολούθησης δικτύου

Οι σύγχρονες ιστοσελίδες θα πρέπει να δημιουργηθούν σε μια δηλωτική μορφή που καθορίζει την οργανωτική δομή και το περιεχόμενο της σελίδας. Η τοποθέτηση και η μορφοποίηση μιας σελίδας εκτελείται χρησιμοποιώντας πίνακες cascading. Στυλ CSS. Και, στις περισσότερες περιπτώσεις, χρησιμοποιώντας το JavaScript. Στην πραγματικότητα, οι βιβλιοθήκες Javascript έγιναν τόσο δημοφιλείς ότι η χρήση τους σήμερα είναι μάλλον κανόνα παρά μια εξαίρεση. Στο προσάρτημα που εξετάζεται σε αυτό το άρθρο, θα χρησιμοποιήσουμε τη δημοφιλή βιβλιοθήκη JQuary JQuaScript. Η εφαρμογή μας θα πραγματοποιηθεί στην πλατφόρμα iPhone, Android και στην επιφάνεια εργασίας. Αυτό θα χρησιμοποιήσει τον ίδιο κώδικα HTML και όλες οι απαραίτητες διαφορές θα εφαρμοστούν σε στυλ. Πρέπει να σημειωθεί εδώ ότι συνειδητά δεν επιστήμε σημαντικές προσπάθειες για την ανάπτυξη μιας ελκυστικής εμφάνισης της εφαρμογής. Επιπλέον, οι τροχόσπιτες συνειδητοποίησαν ως φόντο, όχι αρμονικά μεταξύ τους με διαφορετικό χρώμα για να προσελκύσουν την πρόσθετη προσοχή του αναγνώστη στην οργάνωση των φύλλων στυλ. Στο Μέρος 2, θα βελτιώσουμε ελαφρώς την εμφάνιση της εφαρμογής, ενώ ο κώδικας HTML φαίνεται να εμφανίζεται στην καταχώριση 1.

Καταχώρηση 1. Εφαρμογή HTMLD

Οι διακομιστές μου

Ο πράκτορας του χρήστη.

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

• Ο κώδικας χρησιμοποιεί δύο εξωτερικά αρχεία Javascript: ένα αρχείο VQuery Library και ένα βοηθητικό αρχείο για την εφαρμογή μας.
• Για να κλιμακώσετε το περιεχόμενο που εμφανίζεται στον κώδικα χρησιμοποιώντας την ετικέτα Meta Viewport.
• Το κύριο φύλλο στυλ καθορίζεται από το αρχείο Netmon.css.
• Για να προσδιορίσετε το βοηθητικό φύλλο στυλ, χρησιμοποιήστε την παράμετρο Usergent. Ανάλογα με την αξία του, το φύλλο στυλ θα φορτωθεί για το iPhone, το Android ή για ένα πρόγραμμα περιήγησης επιφάνειας εργασίας.
• Στη διαδικασία φόρτωσης μιας σελίδας, η JQuery και η βοηθητική λειτουργία που ορίζεται στο αρχείο Netmon.js χρησιμοποιούνται για την εμφάνιση των δεδομένων.
• Στον κεντρικό κωδικό σελίδας, χρησιμοποιούνται αρκετές ετικέτες DIV.
• Τέλος, στον κώδικα υπάρχει ένας σύνδεσμος προς τη σελίδα που δείχνει τη συμβολοσειρά χρήσης. Αυτός ο σύνδεσμος δεν έχει καμία σχέση με την εφαρμογή της αίτησης και χρησιμοποιείται αποκλειστικά για την επίδειξη.

Πριν προχωρήσετε με τη λεπτομερή ανάλυση των φύλλων στυλ και του αρχείου Netmon.js, το οποίο, στην πραγματικότητα, καθορίζει την κύρια λειτουργία της εφαρμογής, ας ρίξουμε μια ματιά στην εφαρμογή μας στην τρέχουσα κατάσταση. Για άλλη μια φορά, σημειώστε ότι χρησιμοποιούμε τρία διαφορετικά φύλλα στυλ: ένα για κάθε μία από τις τρεις υποστηριζόμενες πλατφόρμες. Έτσι ώστε η διαδικασία ανάπτυξης εφαρμογών να ήταν πιο οπτική, κάθε τραπέζι καθορίζει το χρώμα του φόντου του. Στο Σχήμα 9, η σελίδα μας είναι ανοιχτή στο Desktop Safari Desktop Browser και έχει μπλε φόντο.

Το σχήμα 11 δείχνει την εμφάνιση της εφαρμογής στο παράθυρο του προγράμματος περιήγησης iPhone (χρώμα φόντου - πράσινο).

Ο κύριος πίνακας στυλ που είναι αποθηκευμένος στο αρχείο Netmon.js εμφανίζεται στην καταχώριση 2.

Καταχώρηση 2. Βασικό φύλλο στυλ

Σώμα (Χρώμα: # 888888; Γραμματοσειρά: Helvetica; Μέγεθος γραμματοσειράς: 14px; περιθώριο: 0px; padding: 0;) .details (περιθώριο: 0px; padding: 0px; φόντο; -Μύλη: 1px; -Webkit-Border-top-αριστερή-ακτίνα: 8px; -Webkit-Border-top-Radius: 8px; -Webkit-Border-αριστερά-ακτίνα: 8px; - Ακτίνα: 8px;) .OK (Χρώμα: # 000000;) .Bad (Χρώμα: # ff0000;) .dd (εικόνα: -Είναι -webkit-κλίση (γραμμική, αριστερά κορυφή, δεξιά, από (#CCC ), Να (# 999)) ·) .Even (εικόνα: -webkit-κλίση (γραμμική, αριστερά κορυφή, δεξί κάτω μέρος, από (# 999), σε (#CCC));).) .SerEntry a (Float:)). Σωστό, χρώμα: #FFFFFF;) .Servertems (Χρώμα: # 000;) # Επιδράσεις H1 (περιθώριο: 0; Padding: 0; Κείμενο-Ευθυγράμμιση: Κέντρο; Χρώμα: # 000;)

Η χρήση του πίνακα στυλ σας για κάθε πλατφόρμα σάς επιτρέπει να εφαρμόσετε τις ακόλουθες εργασίες:

1. Αλλάξτε την απόφαση χρώματος της σελίδας. Αυτό επιτρέπει, πρώτον, να αποδείξει σαφώς τον ρόλο του φύλλου στυλ και δεύτερον, να δείξει πόσο εύκολο είναι να επιλέξετε το επιθυμητό φύλλο στυλ ανάλογα με την τιμή της παραμέτρου του χρήστη.
2. Ορίστε διαφορετικό μέγεθος γραμματοσειράς για την πλατφόρμα κινητού και επιφάνειας εργασίας.
3. Ελέγξτε τις κατάλληλες λειτουργίες webkit. Θα ήταν απαραίτητο αν το πρόγραμμα περιήγησης χρησιμοποιήθηκε για να λειτουργήσει χωρίς υποστήριξη webkit, για παράδειγμα, ο Firefox.

Η λίστα 3 εμφανίζει το αρχείο κώδικα iPhone.css.

Καταχώρηση 3. Αρχείο iPhone.css

Σώμα (χρώμα-χρώμα: # 00FF00;) .SerEntry (-Webkit-Border-top-αριστερή ακτίνα: 8px; -Webkit-Border-top-Radius: 8px; -Webkit-Border-αριστερά-αριστερή ακτίνα: 8px; -Webkit-Border-Border-Right-Radius: 8px;) .Name (μέγεθος γραμματοσειράς: 2em;) .summary (μέγεθος γραμματοσειράς: 1.5em;).

Όπως βλέπουμε, ένα πράσινο χρώμα χρησιμοποιείται ως χρώμα φόντου της ετικέτας του σώματος (# 00FF00) και το μέγεθος γραμματοσειράς διαμορφώνεται για πιο βολική ανάγνωση από την οθόνη κινητής συσκευής. Τέλος, ας ρίξουμε μια ματιά στο αρχείο netmon.js, το οποίο ορίζει τη λίστα διακομιστών και μια λειτουργία που εξάγει κάθε διακομιστή (χρησιμοποιείται στην καταχώριση 4). Ένα μέρος του κώδικα αρχείου για συντομία, χάνεται, το πλήρες κείμενο του είναι διαθέσιμο στην ενότητα).

Καταχώρηση 4. Αρχείο Netmon.js

Var netmon \u003d (αρχικοποίηση: Λειτουργία () (), Πόροι: [Όνομα: "Msiservices.com", HomeURL: "http://msisisvices.com", pingurl: "http://msisisisvices.com/netmon.php" , Κατάσταση: "OK", Περίληψη: "OK", αντικείμενα: [Όνομα: "Diskspace", Αξία: "22.13 GB"), (Όνομα: "Βάση δεδομένων επάνω;", Αξία: "Ναι")]) (Όνομα: "Server 2", HomeURL: "http: // someurl", pingurl: "http: //someurl/netmon.jsp", κατάσταση: "OK", σύνοψη: "OK", αντικείμενα: [όνομα: "diskspace", Αξία: "100,8 GB"), (Όνομα: "Βάση δεδομένων επάνω;", Αξία: "Ναι")]), // Πρόσθετες καταχωρήσεις περικλείονται για συντομία], καθιστούν: λειτουργία (δείκτης, ITM) (δοκιμάστε var ret \u003d "; Ret + \u003d "

"Ret + \u003d" "+ ITM.Name +" Προβολή.
"Εάν (Itm.status! \u003d" OK ") (Ret + \u003d" - "+ ITM.Summary +"
";) RET + \u003d"

"JQuery.each (ITM.ITEMS, λειτουργία (J, ItemDetail) (Ret +"\u003e "+ itemdetail.Name +" \u003d + itemdetail.Value + "
";)); Ret + \u003d"

"Ret + \u003d"

"; Ret επιστροφής;) Catch (E) (E) (Επιστροφή

Σφάλμα rendering στοιχείο ["+ itm.name +]" + e + "

"; } } };

Εάν η γραμμή κατάστασης ενός διακομιστή δεν είναι ίση με το OK, τότε η αντίστοιχη εγγραφή διακομιστή εμφανίζεται με κόκκινο χρώμα, όπως φαίνεται από τον ορισμό της τάξης στο αρχείο CSS. Επιπλέον, εάν ο έλεγχος κατάστασης του διακομιστή αποκάλυψε ορισμένα προβλήματα (η κατάσταση δεν είναι ίση με το OK), επιπλέον έξοδος Σύντομη περιγραφή Προβλήματα. Τα Σχήματα 9-11 δείχνουν ότι ο διακομιστής 4 δεν διαθέτει ελεύθερο χώρο στο δίσκο. Όταν κάνετε κλικ στη συμβολοσειρά αυτού του διακομιστή, εμφανίζεται ένα λεπτομερές μήνυμα στην οθόνη (βλ. Εικόνα 12).

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

Έτσι, αν κατορθώσουμε να ξεκινήσουμε με επιτυχία το Netmon στην κινητή συσκευή σας, το έργο της υποστήριξης διακομιστή δεν πρέπει να προκαλέσει προβλήματα.

συμπέρασμα

Αυτό το άρθρο εισάγει τις αρχές της ανάπτυξης εφαρμογών ιστού για το iPhone και το Android χρησιμοποιώντας την τεχνολογία webkit. Στο Μέρος 2, θα επεκτατήσουμε τις δυνατότητες της εφαρμογής μας προσθέτοντας τη λειτουργία ενημέρωσης δεδομένων χρησιμοποιώντας κλήσεις Ajax.

Για πολλούς από εμάς, προγραμματιστές, Webkit - μαύρο κουτί. Ρίχνουμε σε αυτό html, css, js και μια δέσμη των εικόνων, και webkit, με κάποιο τρόπο ... μαγικά, μας δίνει μια ιστοσελίδα που μοιάζει και λειτουργεί καλά.
Αλλά πραγματικά όπως λέει ο συνάδελφός μου Ilya Grigoric :

Web kit. δεν είναι μαύρο κουτί. Αυτό είναι ένα λευκό κουτί. Και όχι μόνο λευκό, αλλά και Άνοιξε κουτί.

Έτσι, ας προσπαθήσουμε να καταλάβουμε σε κάποια πράγματα:

• Τι είναι webkit;
• Ποια είναι η webkit;
• Πώς χρησιμοποιεί webkit webkit browsers;
• Γιατί οι webkit-s δεν είναι οι ίδιες;

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

Τυπικά στοιχεία του προγράμματος περιήγησης στο Web

Ας καταγράψουμε πολλά εξαρτήματα των σύγχρονων προγραμμάτων περιήγησης:

• Ανάλυση (HTML, XML, CSS, ανάλυση JavaScript)
• Σχέδιο)
• Απόδοση κειμένου και γραφικών
• Αποκωδικοποίηση εικόνων
• Αλληλεπίδραση με την GPU.
• Πρόσβαση στο δίκτυο
• Επιτάχυνση υλικού

Ποιο από αυτά είναι κοινό σε όλα τα προγράμματα περιήγησης webkit; Σε μεγάλο βαθμό, μόνο τα δύο πρώτα.

Τα υπόλοιπα εξαρτήματα κάθε webkit "λιμάνι" εφαρμόζει με τον δικό του τρόπο. Ας ασχοληθούμε με αυτό που σημαίνει.

Webkit θύρες

Υπάρχουν πολλά WebKit "λιμάνια" και παρέχω Aria Hidatyat, webkit hacker και αυτά. Διευθυντής στο Sencha Δικαίωμα να το πει:

Η πιο δημοφιλής ένωση για webkit είναι συνήθως η άποψη της webkit-a από την Apple, η οποία τρέχει στην Mac OS X (πρώτη και αρχική βιβλιοθήκη webkit). Όπως μπορείτε να μαντέψετε, εφαρμόζονται διάφορες διεπαφές χρησιμοποιώντας διάφορες βιβλιοθήκες Mac OS X, επικεντρωμένες κυρίως στο στοιχείο Corefoundation. Για παράδειγμα, αν ορίσετε ένα πλήκτρο χρώματος, με μια ειδική ακτίνα κυκλώματος, webkit ξέρει πού και πώς να σχεδιάσετε αυτό το κουμπί. Ταυτόχρονα, το τελικό σχέδιο του κουμπιού (με τη μορφή εικονοστοιχείων στην οθόνη χρήστη) στο κρεβάτι στους ώμους της CANGRAPHICS.

Όπως ανέφερα παραπάνω, η πυρήνα που χρησιμοποιήθηκε είναι μοναδική για κάθε webkit λιμένα. Το Chrome για Mac-A, για παράδειγμα, χρησιμοποιεί τη Σκιά.

Σε κάποιο σημείο, η Webkit "μεταφέρεται" για διαφορετικές πλατφόρμες, τόσο επιτραπέζια και κινητά. Αυτή η παραλλαγή ονομάζεται συνήθως "θύρα webkit". Για τα Windows Safari, η Apple μεταφέρθηκε επίσης ανεξάρτητα το Webkit για να τρέξει κάτω από τα Windows χρησιμοποιώντας τη βιβλιοθήκη Corefoundation Corefoundation.

... Παρά το γεγονός ότι το Safari κάτω από τα Windows είναι πλέον νεκρή.

Επιπλέον, υπήρχαν και πολλές άλλες "θύρες" (βλ. Πλήρης κατάλογος). Η Google δημιούργησε και κόβει για να υποστηρίξει τη θύρα του χρωμίου. Υπάρχει επίσης ένα webkitgtk βασισμένο σε GTK +. Η Nokia (και τώρα Trolltech, ο οποίος το στριμώχτηκε) υποστηρίζει τη θύρα Webkit QT, η οποία έχει γίνει δημοφιλής ως μονάδα QTWebkit.

Ορισμένα λιμάνια webkit

• Σαφάρι.
  - Το Safari στο OS X και το Safari κάτω από τα Windows δύο διαφορετικές θύρες
  - Η νυχτερινή συναρμολόγηση Webkit είναι μια συναρμολόγηση του πηγαίου κώδικα του Mac "Port", το οποίο χρησιμοποιείται για το Safari, μόνο νεώτερα
• Κινητό σαφάρι.
  - Αναπτύχθηκε σε ένα ιδιωτικό κλάδο, αλλά αργότερα άνοιξε.
  - Chrome κάτω από Ίος (χρησιμοποιεί το webview της Apple, λίγο αργότερα για τη διαφορά)
• Chrome (Chromium)
  - Chrome κάτω από το Android (χρησιμοποιεί άμεσα "Port" Chromium)
  - Το Chromium είναι επίσης η βάση για τα προγράμματα περιήγησης: Yandex ,, Σογού και σύντομα, όπερα.
• Android Browser
  - Χρησιμοποιεί τον τελευταίο πηγαίο κώδικα webkit που διαθέτει τη στιγμή της απελευθέρωσης.
• Ακόμη περισσότερες θύρες: Amazon μετάξι, δελφίνι, βατόμουρο, qtwebkit, webkitgtk +, το λιμάνι EFL (tizen), wxwebkit, webkitwinines κ.λπ.

Οι διαφορετικές θύρες μπορούν να επικεντρωθούν σε διαφορετικές εργασίες. Focus Counter Count - Διαχωρισμός μεταξύ του προγράμματος περιήγησης και του λειτουργικού συστήματος και την παροχή σύνδεσης OBJ-C και C ++ για την ενσωμάτωση της απόδοσης του κινητήρα σε εγγενείς εφαρμογές. Το Focus Cormium Port είναι πλήρως στο πρόγραμμα περιήγησης. Το QTWebkit προσφέρει το λιμάνι του να χρησιμοποιήσει μαζί με την αρχιτεκτονική εφαρμογής της εγκάρσιας πλατφόρμας, ως κινητήρας απόδοσης.

Τι είναι κοινό σε όλα τα προγράμματα περιήγησης webkit

Πρώτον, ας δούμε τις γενικές λειτουργίες που χρησιμοποιούνται σε όλα τα προγράμματα περιήγησης webkit:

Ξέρετε ότι είναι αστείο, έκανα μερικές προσπάθειες να γράψω αυτή την παράγραφο. Και κάθε φορά που τα μέλη της ομάδας Chrome μου διορθώνουν όπως βλέπετε ...

1. Και έτσι, πρώτον, η webkit αποσυναρμολογεί ίσως το HTML. Λοιπόν, εκτός από το ότι το χρώμιο είναι το μόνο λιμάνι αυτή τη στιγμή, όπου είναι ενεργοποιημένη η υποστήριξη για την ανάλυση HTML.
2. ... καλό, αλλά μετά την ανάλυση HTML, το DOM έχει σχεδιαστεί εξίσου. Λοιπόν, στην πραγματικότητα, η Shadow Dom περιλαμβάνεται μόνο για λιμάνι χρωμίου, δηλαδή η κατασκευή του Dom-A ποικίλλει. Επίσης για προσαρμοσμένα στοιχεία.
3. ... καλά, webkit δημιουργεί παράθυρο και αντικείμενα εγγράφων για όλους εξίσου. Αληθινή, αν και οι ιδιότητες και η μετατροπή που παρέχουν μπορεί να εξαρτώνται από τη χρήση διακόπτες χαρακτηριστικών (σημαίες χαρακτηριστικών).
4. ... ανάλυση css το ίδιο. Το φαγητό του CSS και η μετατροπή του στο CSSOM είναι αρκετά πρότυπο. Ναι, αν και το Chrome υποστηρίζει μόνο - προθέματαWebkit προθέματα όταν η Apple και άλλα προγράμματα περιήγησης υποστηρίζουν ξεπερασμένα - πρόθεση-KHTML- και--Apple -App.
5. ... Layout ... Τοποθέτηση; Είναι σαν το ψωμί με βούτυρο. Παντού το ίδιο, σωστά; Καλά, ήδη! Η διαμόρφωση του τμήματος και η κορεσμένη αριθμητική ντάμπινγκ αποτελεί μέρος της webkit, αλλά διαφέρει από τη θύρα προς τη θύρα.
6. Σούπερ.

Έτσι, είναι δύσκολο.

Τώρα, ας προσπαθήσουμε να συνοψίσουμε τι είναι κοινό στον κόσμο της webkit ...

Τι είναι κοινό σε κάθε λιμάνι webkit.

• Dom, παράθυρο, έγγραφο
  Περισσότερο ή λιγότερο
• Cssom
• Συνεργασία CSS, Ακίνητα / Αξία
  Διαφορές στα προθέματα των κατασκευαστών
• HTML ανάλυση και οικοδόμηση DOM
  Εξίσου, αν ξεχάσουμε τα εξαρτήματα Web.
• Διάταξη και τοποθέτηση
  FlexBox, πλωτήρες, μπλοκ σχηματίζοντας το πλαίσιο ... Όλα τα σύνολα
• Εργαλεία διεπαφής χρήστη και εργαλεία προγραμματιστή, τύπου Chrome Devtools είναι επιθεωρητής webkit.
  Αν και από τον περασμένο Απρίλιο, το Safari χρησιμοποιεί το δικό του επιθεωρητή σαφάρι, μη webkit, με κλειστές πηγές.
• Χαρακτηριστικά όπως η περιεκτικότητα, το Pushstate, το API File, τα περισσότερα SVG, Mathematics CSS Μετασχηματισμοί, API Audio Web, VictionStorage
  Αν και η εφαρμογή μπορεί να διαφέρει. Κάθε θύρα μπορεί να χρησιμοποιήσει το δικό της σύστημα αποθήκευσης για τοπική τάση και μπορεί να χρησιμοποιήσει διαφορετικό API ήχου για το API Audio Web.

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

Τώρα που δεν είναι κοινό στους λιμένες webkit:

• Όλα συνδέονται με το GPU
  - 3D μετασχηματισμό
  - webgl.
  - Αποκωδικοποίηση βίντεο
• Καταργήστε το 2D στην οθόνη
  - Τεχνολογία εξομάλυνσης
  - Κατασκευή βαθμίδων SVG και CSS
• Απόδοση κειμένου και μεταφορές
• Τεχνολογίες δικτύου (Spdy, προ-απόδοση, μεταφορά ιστοσελίδων)
• Javascript Engine
  - Ο κινητήρας JavaScriptcore βρίσκεται στο αποθετήριο webkit. Αλλά υπάρχουν δεσμεύσεις στο webkit και γι 'αυτόν και για v8.
• Απόδοση των στοιχείων της φόρμας
• Η συμπεριφορά των κωδικοποιητών βίντεο και του ήχου και υποστήριξης
• Αποκωδικοποίηση εικόνων
• Πλοήγηση πίσω / προς τα εμπρός
  - Pushstate μέρος ()
• SSL λειτουργίες όπως η αυστηρή ασφάλεια των μεταφορών και οι πείροι δημόσιων κλειδιών

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

Ή αν μπείτε σε λεπτομέρειες, η πρόσφατα προστιθέμενη λειτουργία: css.supports () ενεργοποιήθηκε για όλες τις θύρες, με εξαίρεση τη νίκη και το Wincairo, για το οποίο περιλαμβάνονται τα χαρακτηριστικά του CSS3 CSS3.

Τώρα, είμαστε σε τεχνικές λεπτομέρειες ... χρόνο για να γίνει παιδεικός. Ακόμα και τα παραπάνω δεν είναι απολύτως σωστά. Στην πραγματικότητα, είναι webcore, είναι ένα κοινό στοιχείο. Το Webcore είναι μια διάταξη, η απόδοση και μια βιβλιοθήκη DOM για HTML και SVG, και κυρίως τι σκέφτονται οι άνθρωποι όταν λένε webkit. Στην πραγματικότητα, η τεχνική "webkit" είναι τεχνικά ένα στρώμα δεσμευτικής μεταξύ webcore και "λιμένων", αν και στη συνήθη συνομιλία, αυτή η διαφορά δεν είναι κυρίως σημαντική.

Το διάγραμμα πρέπει να βοηθήσει:

Πολλά από τα εξαρτήματα webkit είναι μεταβατικά (εμφανίζονται με γκρι).

Για παράδειγμα, το Javascript, ο κινητήρας Webkit-A, JavaScrice, είναι ο προεπιλεγμένος κινητήρας στην WebKit. (Αρχικά, βασίζεται στο KJS (από το KDE) από τις ημέρες: Όταν η webkit ξεκίνησε ως υποκατάστημα KHTML. Ταυτόχρονα, η θύρα χρωμίου, μεταβαίνει στον κινητήρα V8 και χρησιμοποιεί μοναδικές δεσμεύσεις DOM.

Οι γραμματοσειρές και η απόδοση του κειμένου είναι ένα πολύ μεγάλο μέρος της πλατφόρμας. Υπάρχουν 2 ξεχωριστές διαδρομές για κείμενο σε webkit: Γρήγορη και περίπλοκη. Και οι δύο απαιτούν στήριξη ειδικά στην πλατφόρμα (που εφαρμόζονται στην πλευρά της θύρας), αλλά γρήγορα θα πρέπει να γνωρίζουν μόνο πώς να αποφεύγουν τα glyphs (που τα webkit caches για την πλατφόρμα), όταν το σύνθετο μεταφέρει εντελώς μεταφέρει τις χορδές που αποδίδουν στο επίπεδο της πλατφόρμας και απλά λέει αυτό , σας παρακαλούμε."

"Η webkit είναι σαν ένα σάντουιτς. Σε άλλα θέματα, στην περίπτωση του χρωμίου, είναι περισσότερο σαν αυτό. Νόστιμα tacos τεχνολογιών ιστού.
Dmitri Glazkov, Chrome Webkit Hacker. Πρωταθλητής κατασκευαστών ιστού και σκιά Dom.

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

	Chrome (OS X)	Safari (OS X)	Qtwebkit.	Το πρόγραμμα περιήγησης Android.	Chrome για Ίο.
Απόδοση.	Σκιά	Coregraphics.	Qtgui.	Android Stack / Σκιά	Coregraphics.
Δικτύωση.	Χρόνος δικτύου χρωμίου	Cfnetwork.	Qtnetwork.	Πιρούνι της στοίβας δικτύου του χρωμίου	Χρόνος χρωμίου
Γραμματοσειρές.	Coretext μέσω της Σκιά	Coretext.	Qt εσωτερικές διαδοχές.	Android Stack	Coretext.
JavaScript.	V8.	JavaScriptcore.	Το JSC (V8 χρησιμοποιείται αλλού στο QT)	V8.	Javascrictor (χωρίς κτύπημα) *

* Υποσημείωση σχετικά με το Chrome για Ίο. Χρησιμοποιεί uiwebview, όπως πιθανόν να γνωρίζετε. Σύμφωνα με τις δυνατότητες της UiWebView, αυτό σημαίνει ότι μπορεί να χρησιμοποιήσει μόνο την ίδια απόδοση του κινητήρα, καθώς και το κινητό σαφάρι, JavaScrictore (και όχι V8) και μοντέλο με ένα μόνο σπείρωμα. Τώρα, κάποιος κώδικας δανείζεται από το χρώμιο, όπως ένα υποσύστημα για την συνεργασία με ένα δίκτυο, οι σελιδοδείκτες υποδομής συγχρονισμού, omnibox, μετρήσεις και αναφορές αποτυχίας (αναφορά σύγκρουσης). (Επίσης, η JavaScript είναι τόσο σπάνια μια συμφόρηση σε κινητές συσκευές που η απουσία του μεταγλωττιστή περικοπής έχει ελάχιστη επίδραση.)

Συχνά βλέπω τις ιδιότητες σε ιστότοπους για κάποιο συγκεκριμένο πρόγραμμα περιήγησης. Για παράδειγμα, το ακίνητο " -Μεζο-σύνορα-αριστερά χρώματα", υποδεικνύοντας το χρώμα του αριστερού πλαισίου στο στοιχείο για Firefox.. Ας αναρωτηθούμε γιατί δεν πρέπει να το κάνετε αυτό, καθώς και θα δείξω μόνο τη μόνη περίπτωση όταν -Moz, -ms, -Webkit και ανάλογα Μπορείς να χρησιμοποιήσεις.

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

Είναι καλύτερα να καταστήσουμε τους λόγους για τους οποίους χρησιμοποιούν αυτές οι ιδιότητες. Και οι λόγοι εδώ είναι δύο:

1. Καμία διασταύρωση. Μπορώ να πω με ασφάλεια ότι το πρόβλημα του cross browser είναι ήδη στο παρελθόν. Μόνο το πρόβλημα της διάταξης κακής ποιότητας παρέμεινε. Όλα τα σύγχρονα προγράμματα περιήγησης χειρίζονται επαρκώς τα πάντα. Ελάχιστες παρεξηγήσεις (για παράδειγμα, Ακτίνα των συνόρων στην είσοδο στην όπερα) επιλύονται εύκολα από μια εναλλακτική προσέγγιση στην εργασία, όταν όλα τα προγράμματα περιήγησης είναι καλά για να εμφανιστούν σελίδα χωρίς κανένα " hakov"Και αυτό το πρόβλημα δεν είναι ένας λόγος για να χρησιμοποιήσετε τις ιδιότητες" αριστερά ".
2. Υποστήριξη για παλαιότερα προγράμματα περιήγησης. Και καθορίζει περισσότερο", όχι μόνο παλιά. Στα παλιά προγράμματα περιήγησης δεν υπήρχαν αυτές οι ιδιότητες και δεν υπήρχε αγγελιοφόρος. Για να κατανοήσουμε την σημασία αυτό, αξίζει να προβάλλετε τα στατιστικά στοιχεία των προγραμμάτων περιήγησης. Κάπου 95% Το κοινό βρίσκεται στα σύγχρονα προγράμματα περιήγησης. Το υπόλοιπο 5% Απολαύστε ότι δεν είναι σαφές τι. Τοποθέτηση του κώδικα, θα πάρετε μια καλή εικόνα της αντοχής 1% προγράμματα περιήγησης. Επομένως, είναι πλέον καλύτερο ή αποσύρετε ένα μήνυμα που αξίζει να αλλάξετε το πρόγραμμα περιήγησης ( jquery. Υπάρχει plugin jejreject.που το κάνει), ή απλά αγνοεί. Επιπλέον, αμφιβάλλω έντονα ότι μεταξύ αυτών 5% Πολλοί άνθρωποι είναι πιθανότατα η πλειοψηφία υπάρχουν bots που δίνουν αυθαίρετα πρωτοσέλιδα για τον πελάτη. Και οι παλιοί bots μπορούν να δώσουν το ίδιο IE6.. Το ίδιο περιλαμβάνει εδώ όσους συνεχίζουν να δοκιμάζουν τις τοποθεσίες τους σε παλιά προγράμματα περιήγησης.

Ως εκ τούτου, η χρήση CSS3., όλες οι δυνατότητες είναι ήδη εκεί, και μπορεί να φανεί μόνο 95% κοινό.

Ωστόσο, υποσχέθηκα να πω πότε οι ιδιότητες -moz, -ms, -webkit και άλλα, μπορεί να χρησιμοποιηθεί. Είναι απαραίτητο αν θέλετε να κάνετε, ένα μικρό διαφορετικό σχέδιο για Διαφορετικά προγράμματα περιήγησης. Και καθορίζει Λίγο", και αν χρειαστεί να αλλάξετε πλήρως τα πάντα, είναι ευκολότερο JavaScript. Προσδιορίστε το πρόγραμμα περιήγησης και συνδέστε ένα ξεχωριστό αρχείο στυλ. Ειλικρινά, δεν έφυγα ένα τέτοιο έργο, αλλά αυτό είναι το μόνο πράγμα που μου συνέβη για να δικαιολογήσει κατά κάποιον τρόπο Λυλάκι"Ιδιότητες CSS..

Στο Safari στο iOS 11, η Apple πρόσθεσε πολλά νέα χαρακτηριστικά που θα επιτρέψουν στο πρόγραμμα περιήγησης να εμφανίζει καλύτερα διάφορα περιεχόμενα στον ιστότοπο, καθώς και να επιταχύνει το έργο του. Ενεργοποιήστε τους απλά - πρέπει να μεταβείτε στις ρυθμίσεις\u003e Safari\u003e add-ons\u003e Πειραματικά χαρακτηριστικά:

Φυσικά, είναι άμεσα ακατανόητο, για το οποίο κάθε στοιχείο είναι υπεύθυνο. Θα τα αναλύσουμε λεπτομερέστερα:

• Σταθερές ιδιότητες. - Δεν σας επιτρέπει να αλλάξετε τις ρυθμίσεις σε ιστοσελίδες με διαφορετικές ρυθμίσεις. Με άλλα λόγια, εμποδίζεται αλλαγή της ιστοσελίδας ή αλλάζοντας τις ιδιότητές του μετά τη λήψη του.
• Ένδειξη CSS: Περιεχόμενα - Σας επιτρέπει να διαχειριστείτε τη δημιουργία του πεδίου στοιχείων. Για παράδειγμα, με αυτό, μπορείτε να κάνετε ομοιόμορφες περιπτώσεις ανάμεσα σε διαφορετικά στοιχεία στην περιοχή χωρίς "πατερίτσες".
• CSS Spring Animation - Φυσικά, καμία σχέση με την άνοιξη έχει, αλλά μόνο σας επιτρέπει να κάνετε μια κινούμενη εικόνα στοιχείων σε τοποθεσίες από την άποψη της φυσικής.
• Προφόρτιση σύνδεσης - Όχι, δεν έχει σχέση με τους συνδέσμους προ-φορτίου, το χαρακτηριστικό αυτό έχει σχεδιαστεί κυρίως για να αποφευχθεί η πρόληψη των προ-φορτωμένων πόρων μετά τη συντακτική ανάλυση.
• Αφαιρέστε το Legacy WebRTC API- Γενικά, είναι επίσης σαφές, διαγράφει το παλιό WebRTC (λειτουργία για τη μετάδοση δεδομένων μεταξύ του προγράμματος περιήγησης και της εφαρμογής προσάρτησης. Παράδειγμα - ανοίγετε τον σύνδεσμο στην εφαρμογή VK - ανοίγει στα αντίγραφα του Safari χρησιμοποιώντας την τεχνολογία WebRTC ).
• Ασφαλίστε το API Contexts - τη λειτουργία, η ουσία του οποίου - βεβαιωθείτε ότι τα δεδομένα στη συσκευή παραδόθηκαν σε ένα ασφαλές πρωτόκολλο (HTTPS) και δεν παρεμποδίστηκαν από εισβολείς.
• Υπόστρευση. - Ένα άλλο χαρακτηριστικό για την ασφάλεια. Η ουσία του - ο ιδιοκτήτης του πόρου μπορεί να υποδείξει το κρυπτογραφικό της κατακερματισμό, ο οποίος στη συνέχεια ελέγχεται με hash, υπολογίζεται μετά τη φόρτωση του πόρου στη συσκευή.
• Κατάλληλη θέση. - Επιτρέπει στους ιστότοπους να αλλάζουν το μέγεθος των γραφικών στοιχείων για το φυσικό μέγεθος της οθόνης της συσκευής (δηλαδή στη θεωρία εάν ο ιστότοπος υποστηρίζει αυτό, δεν θα αναζητηθεί για τις άκρες των στοιχείων τους).
• Web animations. - Όλα είναι προφανή εδώ, η συμπερίληψη της κινούμενης εικόνας σε ιστότοπους. Όταν αποσυνδεθεί, μπορεί να χρειαστεί λίγη παραγωγικότητα.
• Webgpu. - Σας επιτρέπει να χρησιμοποιήσετε έναν επεξεργαστή γραφικών για επεξεργασία πληροφοριών σε ιστότοπους. Μπορεί να επιταχύνει την εργασία του προγράμματος περιήγησης με κορεσμένα χρονοδιαγράμματα, αλλά θα προκαλέσει αυξημένη θέρμανση συσκευής και να μειώσει τη διάρκεια ζωής της μπαταρίας.
• Async πλαίσιο κύλισης - κύλιση, που δεν επηρεάζεται από τη συχνότητα ενημέρωσης οθόνης. Προφανώς είναι απαραίτητο για νέες συσκευές από την οθόνη 120 Hz για να αποφευχθούν οι υστερικές περιοχές στις τοποθεσίες όπου δεν μπορούν να δώσουν 120 fps. Στις παλιές οθόνες 60 Hz η διαφορά δεν είναι αισθητή.

Κάντε αμέσως μια κράτηση - η ακριβής περιγραφή κάποιων Λειτουργίες της Apple Δεν έδωσα και πήρα μια περιγραφή από άλλα προγράμματα περιήγησης, οπότε ίσως να μην προσεγγίσει συγκεκριμένα στο σαφάρι.

Τη στιγμή της γραφής αυτού του άρθρου, το Safari στο iOS ήταν το πιο δύσκολο πρόγραμμα περιήγησης. Όπως ήδη σημειωθεί στο Κεφάλαιο 7, ξεκινώντας από την έκδοση 2.0, η iOS υποστηρίζει μια μεγάλη (και παράξενη) ομάδα επέκτασης CSS που μας επιτρέπουν να χρησιμοποιήσουμε animation, μεταβάσεις και ακόμη και 3D εφέ. Ορισμένες από αυτές τις επεκτάσεις, ανάλογα με την έκδοση του λειτουργικού συστήματος, επίσης λειτουργούν με τα προγράμματα περιήγησης Android και WebOS.

Λειτουργίες webkit

Πολλές ιδιότητες CSS ως παράμετρο αντιλαμβάνονται λειτουργίες. Αυτές οι λειτουργίες είναι η επέκταση webkit που επιταχύνεται από το υλικό.

Οι λειτουργίες που σχετίζονται με τη λειτουργία κλίσης στην Ίο δεν υποστηρίζονται επίσημα (σύμφωνα με τη βιβλιοθήκη αναφοράς Safari). Παρ 'όλα αυτά, εργάζονται με OS 3.0 και παλαιότερες συσκευές όπου χρησιμοποιούν ένα απλό υπόβαθρο.

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

Τραπέζι. 9.7. Χαρακτηριστικά του πίνακα CSS διαθέσιμα στο Safari στο iOS

Λειτουργία	Περιγραφή
cubic-Beizer (P1X, P1Y, P2X, P2Y)	Ορίζει την καμπύλη Bezier για τη λειτουργία χρονισμού.
matrix (M11, M12, M21, M22, TX, TY)	Καθορίζει τη μήτρα μετασχηματισμού έξι τιμών με δύο μετατοπίσεις.
matrix3d \u200b\u200b(m00, m01, m02, m03, m10, m20, m21, m22, m23, m21, m22, m23, m30, m31, m31, m33)	Προσδιορίστε τη μετασχηματιστική 3D Matrix 4 × 4.
Προοπτική (βάθος)	Κούβα που βλέπουν κάρτες στην πυραμίδα, το ίδρυμα του οποίου απέχει πολύ από τον θεατή.
Περιστροφή (γωνία)	Καθορίζει την 2D περιστροφή γύρω από την προέλευση των συντεταγμένων στοιχείων.
Περιστροφή3d (x, y, z, γωνία)	Προσδιορίζει την περιστροφή 3D με την κατεύθυνση του φορέα περιστροφής.
rotatex (γωνία)	Υποδεικνύει περιστροφή δεξιόστροφα γύρω από τον άξονα X.
Περιστροφή (γωνία)	Υποδεικνύει περιστροφή δεξιόστροφα γύρω από τον άξονα Υ.
rotatez (γωνία)	Υποδεικνύει την περιστροφή δεξιόστροφα γύρω από τον άξονα Ζ.
Κλίμακα (scalex,)	Εκτελεί τη λειτουργία κλιμάκωσης 2D.
scale3D (Scalex, Sevely, Sevelz)	Εκτελεί λειτουργία κλιμάκωσης 3D.
scalex (τιμή)	Κλίμακα κατά μήκος του άξονα Χ
salvey (τιμή)	Κλιμάκωση κατά μήκος του άξονα Υ.
scalitz (τιμή)	Κλιμάκωση κατά μήκος του άξονα z.
skewx (γωνία)	Εκτέλεση λοξού μετασχηματισμού κατά μήκος του άξονα Χ
skewy (γωνία)	Εκτέλεση λοξού μετασχηματισμού κατά μήκος του άξονα Υ.
Μετάφραση (Deltax,)	Καθορίζει το φορέα 2D offset.
translate3d (Deltax, Deltay, Deltaz)	Καθορίζει το 3D φορέα offset.
translatex (τιμή)	Δική του μετατοπισμένη γύρω από τον άξονα Χ.
translatey (αξία)	Εμφανίζεται γύρω από τον άξονα Υ.
translatez (αξία)	Εμφανίζεται γύρω από τον άξονα Ζ.
Από (χρώμα)	Καθορίζει το αρχικό χρώμα στην ακολουθία.
Να χρωματίσω)	Καθορίζει το τελικό χρώμα στην ακολουθία.
Χρώμα διακοπής (Stop_percelage, χρώμα)	Καθορίζει το ενδιάμεσο χρώμα που χρησιμοποιείται στην ακολουθία στην τιμή Stop_percenage.
-Webkit-κλίση (γραμμική, start_function, end_function,)	Καθορίζει μια γραμμική κλίση χρησιμοποιώντας το σημείο εκκίνησης, το τελικό σημείο και πρόσθετα ενδιάμεσα σημεία. Μπορεί να χρησιμοποιηθεί αντί οποιασδήποτε εικόνας στο CSS. Διατίθεται από το iOS 3.0.
-Webkit-κλίση (ακτινική, inner_center, inner_radius, outer_center, outer_radius,)	Καθορίζει μια ακτινική κλίση με ένα κεντρικό (εσωτερικό) σημείο και ένα άλλο σημείο (εξωτερικό) με λουλούδια που καθορίζονται από τη σειρά της λειτουργίας χρωμάτων-διακοπής. Διατίθεται από το iOS 3.0.

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

Κλίση

Ξεκινώντας με το iOS 3.0 Safari υποστηρίζει τις επεκτάσεις της κλίσης CSS ως συνάρτηση για αυτές τις καταστάσεις όπου και αν χρησιμοποιήσαμε μια εικόνα (για παράδειγμα, για το φόντο). Για το φόντο, αντί της λειτουργίας URL, μπορείτε να χρησιμοποιήσετε τη λειτουργία-κλίση-κλίση, προκειμένου να προσδιορίσετε τη χρήση γραμμικών ή ακτινική κλίση Ως φόντο. Αυτή η μέθοδος μας επιτρέπει να χρησιμοποιήσουμε τον ελάχιστο κώδικα, κάνουμε πραγματικά καλό υπόβαθρο για πρωτοσέλιδα, δοχεία και κύτταρα. Για android Browser Εφαρμόστε ακριβώς τον ίδιο κωδικό.

Μερικά παραδείγματα του ορισμού της κλίσης:

/ * Η επίδραση του ήλιου από τη δεξιά άνω γωνία * / σώμα (φόντο: -webkit-κλίση (ακτινική, 50% -50, 0, 50% 0, 300, από (# 676767), σε (μαύρο)) μαύρο ·) Σώμα (φόντο: -webkit-κλίση (ακτινική, 100% -10, 50, 70% 0, 200, από (κίτρινο), έως (λευκό)) #ffc;) / * απλή γραμμική κλίση * / li (φόντο : -Webkit-κλίση (γραμμική, 0% 0%, 0% 100%, από (# 369), έως (# 3FF), έως (# 3FF)) # 369;) / * Simple 3D Effect * / H1 (φόντο: - κλίση-κλίση (φόντο: Γραμμική, 0% 0%, 0% 100%, από (# 369), έως (# 369), χρώμα-στάση (0,5, # 58b)).

Για τις τιμές θέσης, μπορούμε να χρησιμοποιήσουμε ενδιαφέρον, απόλυτες τιμές (χωρίς εικονοστοιχεία) ή πάνω, κάτω, δεξιά και αριστερή σταθερές. Για παράδειγμα, ως η δεύτερη παράμετρος της λειτουργίας CSS, μπορούμε να χρησιμοποιήσουμε την επάνω δεξιά πλευρά και όχι 0% 0%. Το σχήμα 9.1 δείχνει πώς μπορεί να δουν αυτές τις επιλογές στο πρόγραμμα περιήγησης.

Σύκο. 9.1. Χρησιμοποιώντας μόνο CSS μπορείτε να δημιουργήσετε διαφορετικά αποτελέσματα κλίσης για iPhone, iPod Touch, iPad και Android βάση δεδομένων.

Ο κινητός Internet Explorer ξεκινώντας με την έκδοση 6.0 υποστηρίζει φίλτρα και μεταβάσεις χρησιμοποιώντας επέκταση CSS με το στυλ φίλτρου. Μπορείτε να εφαρμόσετε άλλα εφέ.

Επιδράσεις ανάκλασης

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

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

Για να κάνετε την επίδραση της προβληματισμού στο Safari στο iOS, χρησιμοποιήστε το ακίνητο με την ακόλουθη σύνταξη:

Webkit-box-reflect: offset κατεύθυνσης ;

Η κατεύθυνση μπορεί να είναι πάνω, κάτω, αριστερά ή δεξιά. Offset - απόσταση (σε px ή%) από το στοιχείο πηγής, η αντανάκλαση των οποίων πρέπει να εμφανιστεί. πρόσθετος - Είναι συνήθως μια λειτουργία κλίσης που θα λειτουργήσει ως μάσκα για να αντικατοπτρίζει την εικόνα. Εάν η εικόνα της μάσκας δεν έχει καθοριστεί, θα χρησιμοποιηθεί ο συνήθης καθρέφτης.

Ο τύπος του εφέ αντανάκλασης, ο οποίος χρησιμοποιείται συνήθως σε ιστότοπους Web 2.0 τα ακόλουθα χαρακτηριστικά:

Webkit-box-αντανακλάται: κάτω από 3px -webkit-κλίση (γραμμική, αριστερά κορυφή, αριστερό πυθμένα, από (διαφανές), χρώμα-στάση (0,5, διαφανές), σε (λευκό)).

Μάσκες εικόνων

Ξεκινώντας από το iOS 3.0 Έχουμε πρόσβαση σε μια τυπική λειτουργία σχεδιαστή, η οποία απουσιάζει στην ανάπτυξη ιστοσελίδων για πολλά χρόνια: μάσκες εικόνας. Μάσκες εικόνας Μπορούμε να χρησιμοποιήσουμε για να εφαρμόσουμε οποιαδήποτε σωστή ή εσφαλμένη κοπή ή εάν χρησιμοποιείται μια μάσκα άλφα (ή μια λειτουργία κλίσης) για οποιαδήποτε εικόνα για να κάνει ένα δροσερό οπτικό αποτέλεσμα (για παράδειγμα, ασαφή σύνορα). Οι ιδιότητες της μάσκας είναι παρόμοιες με τις ιδιότητες του φόντου. Για να χρησιμοποιήσετε τη μάσκα, έχουμε μια συντομογραφία ιδιοκτησίας μιας συντόμευσης και συγκεκριμένες ιδιότητες για τον προσδιορισμό κάθε παραμέτρου.

Σύνταξη της έκδοσης συντόμευσης με προαιρετικές παραμέτρους:

Webkit-μάσκα: συνημμένο, κλιπ, προέλευση, εικόνα, επανάληψη, σύνθετη, εικόνα κουτί?

Φυσικά, έχουμε ξεχωριστή πρόσβαση σε όλες τις ιδιότητες (κ.λπ.). Υπάρχουν πολλές ευκαιρίες, αλλά συνήθως η εικόνα (άλφα ή όχι, PNG ή SVG) ή η λειτουργία της κλίσης χρησιμοποιούνται ως τιμή εικόνας. Παράδειγμα:

Μετάβαση

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

Θυμηθείτε ότι αυτές οι αντισταθμίσεις υλοποιούνται μόνο από CSS: Για να δημιουργήσετε ένα κινούμενο σχέδιο, δεν χρησιμοποιούμε το JavaScript ή οποιαδήποτε άλλη παρόμοια μέθοδο. Ίσως θα σας φαίνεται περίεργο, αλλά είναι απλό και, ταυτόχρονα, μια ισχυρή μέθοδος.

Το πλαίσιο μετάβασης είναι διαθέσιμο για τα προγράμματα περιήγησης Safari (ξεκινώντας από το iOS 2.0) και το Android και, επιπλέον, σε αυτές τις συσκευές, η απόδοση όταν εργάζεστε με μετάβαση παραπάνω.

Για την εφαρμογή της μετάβασης, πρέπει:

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

Αλήθεια, ακούγεται ακριβώς; Τώρα ας κάνουμε.

Ακίνητα κινούμενων εικόνων

Το Animation μπορεί να οριστεί χρησιμοποιώντας την ιδιότητα με την ακόλουθη σύνταξη:

WEBKIT-Μετάβαση: Διάρκεια ιδιοκτησίας Timing_function καθυστέρηση [, ...];

Μπορούμε επίσης να χρησιμοποιήσουμε τις συγκεκριμένες ιδιότητες που καθορίζονται στον Πίνακα 9.8.

Τραπέζι. 9.8. Πίνακας Ιδιότητες Μετάβαση για WebKit

Ιδιοκτησία	Περιγραφή
	Καθορίζει ποια ιδιότητα ή ιδιότητες θα χρησιμοποιηθούν για κινούμενα σχέδια. Μπορείτε να χρησιμοποιήσετε μια λίστα τιμών που χωρίζονται με κόμματα ή σταθερές τιμές.
	Καθορίζει τη διάρκεια της μετάβασης. Η τιμή μπορεί να είναι 0 (χωρίς κινούμενα σχέδια) ή μια θετική τιμή σε δευτερόλεπτα (S χρησιμοποιούνται ως μονάδα). Εάν για κάθε ιδιοκτησία θέλουμε να ορίσετε διαφορετικές στιγμές - μπορείτε να χρησιμοποιήσετε μια λίστα με τις τιμές διαίρεσης με την ίδια σειρά με τις τιμές για την ιδιοκτησία-ιδιοκτησίας-ιδιοκτησίας-ακινήτων.
	Καθορίζει τη λειτουργία που χρησιμοποιείται για τον υπολογισμό Ενδιάμεσες τιμές Μεταξύ των αρχικών και των τελικών τιμών του ακινήτου. Μπορείτε να χρησιμοποιήσετε τη λειτουργία Cubic-Bezier CSS ή οποιαδήποτε από τις ακόλουθες σταθερές: η ευκολία, η γραμμική, η ευκολία, η ευκολία και η ευκολία-in-in-out (πιο συχνά χρησιμοποιείται).

Χρησιμοποιώντας τον ακόλουθο κώδικα, εφαρμόζεται η κίνηση της εμφάνισης και της εξαφάνισης

Ξεθώριασμα.

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

Ολοκλήρωση της μετάβασης

Η ολοκλήρωση της μετάβασης, με τον ίδιο τρόπο όπως οποιοδήποτε άλλο συμβάν DOM μπορεί να εφαρμοστεί χρησιμοποιώντας το AddeVentEntListListener. Όταν βεβαιωθείτε ότι η κινούμενη εικόνα είναι πραγματικά πάνω, μπορείτε να ξεκινήσετε την αρχή της επόμενης μετάβασης ή οποιαδήποτε άλλη ενέργεια. Για να το κάνετε αυτό, πρέπει να πιάσουμε το συμβάν webkittranswend. Να το κάνετε μπορούμε με τον ακόλουθο κώδικα:

Box.addeventListener ("webkittranswornend", λειτουργία (συμβάν) (προειδοποίηση ("τελειωμένη μετάβαση"));

Κινουμένων σχεδίων

Η μετάβαση είναι ένα μεγάλο πράγμα και ο ευκολότερος τρόπος για να εφαρμόσετε κινούμενα σχέδια σε συσκευές iPhone και Android. Εάν χρειάζεστε ακριβή έλεγχο μέσω της κινούμενης εικόνας στο επίπεδο Keyframe, μπορείτε να χρησιμοποιήσετε το πλαίσιο CSS για κινούμενα σχέδια. Για να είμαι ειλικρινής, νομίζω ότι είναι ήδη και για την επεξεργασία μόνο μέσω του CSS, μιας μη στρατιωτικής και της γλώσσας "μη σήμανσης". Αλλά λειτουργεί καλά.

Στο Webkit, η κινούμενη εικόνα γίνεται χρησιμοποιώντας το ακίνητο και η σύνταξη θα είναι η εξής:

WebKit-Animation: Όνομα Διάρκεια Χρονοδιάγραμμα *

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

Τραπέζι. 9.9. Πίνακας κινούμενων εικόνων για webkit

Ιδιοκτησία	Περιγραφή
	Ορίζει το όνομα της κινούμενης εικόνας που θα χρησιμοποιηθεί από τα βασικά καρέ.
	Καθορίζει τη διάρκεια της κινούμενης εικόνας (σε δευτερόλεπτα ή χιλιοστά του δευτερολέπτου).
	Προσδιορίζει τη λειτουργία που χρησιμοποιείται για τον υπολογισμό των ενδιάμεσων τιμών μεταξύ των αρχικών και των τελικών τιμών μιας συγκεκριμένης ιδιότητας. Μπορείτε να χρησιμοποιήσετε τη λειτουργία CSS Cubic-Bezier () ή οποιαδήποτε από τις ακόλουθες σταθερές: η ευκολία, η γραμμική, η ευκολία, η ευκολία και η ευκολία-in-in-out (χρησιμοποιείται πιο συχνά).
	Καθορίζει την καθυστέρηση κινούμενων σχεδίων, η οποία αρχίζει από τη στιγμή που αλλάζει η ιδιοκτησία. Μπορεί να προσδιοριστεί σε δευτερόλεπτα ή miliseconds. Η προεπιλεγμένη τιμή είναι 0. Εάν χρησιμοποιείται αρνητική τιμή - η κινούμενη εικόνα ξεκινά αμέσως, αλλά κάποιο είδος θραύσματος κινουμένων σχεδίων θα χαθεί ήδη και, κατά συνέπεια, παραλείπονται.
	Καθορίζει πόσες φορές θα επαναληφθεί η κινούμενη εικόνα. Η προεπιλεγμένη τιμή εδώ είναι 1, καθώς μια τιμή μπορεί να είναι οποιοσδήποτε ακέραιος, ένας ειδικός άπειρος σταθερός ή οποιοσδήποτε έγκυρος αριθμός.
	Καθορίζει σε ποια κατεύθυνση θα αναπαραχθεί η κινούμενη εικόνα.

Έχοντας κατανοηθεί με αυτή τη λίστα, πρέπει να ρωτήσετε τον εαυτό σας ακριβώς πού καθορίζεται η κινούμενη εικόνα; Τι ενεργεί ως αντικείμενο κινούμενης εικόνας; Και να απαντήσετε σε αυτές τις ερωτήσεις θα βοηθήσουν τις επεκτάσεις webkit για το βασικό προσωπικό.

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

Οδηγία κλειδιού

Για να καθορίσετε τον τρόπο με τον οποίο θα λειτουργήσει η κινούμενη εικόνα και τι ακριβώς θα συμβεί, πρέπει να ορίσετε ένα ειδικό CSS αυτόν τον κανόνα που ονομάζεται. Αυτός ο κανόνας συνοδεύεται από το όνομα κινουμένων σχεδίων, το οποίο ορίζεται στο-webkit-animation-name.

Μέσα στην οδηγία Keyframe, θα πρέπει να καθορίσετε πόσο χρειάζεστε επιλογές ή ομάδες κινούμενων εικόνων ως βασικά πλαίσια. Ο επιλογέας καθορίζεται από την ποσοστιαία τιμή και τις σταθερές (ισοδύναμο με 0%) και σε (ισοδύναμο με 100%). Σε κάθε επιλογέα, ορίζουμε όλες τις ιδιότητες και τις τιμές για ένα συγκεκριμένο σημείο κινούμενης εικόνας. Με τη λειτουργία-timing-timing-timing-timing, μπορούμε να ορίσουμε συγχρονισμό για κάθε ομάδα κινούμενων σχεδίων.

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

Για παράδειγμα, με τη βοήθεια του επόμενου κώδικα, κινούμε κατά μήκος της τετράγωνης τροχιάς:

Πλατεία κίνηση τροχιάς

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

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

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

Εκδηλώσεις κινούμενων εικόνων

Όπως συμβαίνει με τις μεταβάσεις της αντιστάθμισης, μπορούμε να παρακολουθήσουμε το webkitanimationstart, την webkiteanimationitemation, τα γεγονότα webkitanimationend. Όταν ξεκινάτε, αυτά τα συμβάντα αποστέλλονται ως το αντικείμενο webkitanimationevent ως παράμετρος. Αλλά για κάθε αλλαγή στο βασικό πλαίσιο του συμβάντος δεν υπάρχει συμβάν.

Το αντικείμενο συμβάντος έχει ειδικές ιδιότητες του animationName και τη διόρθωση, των οποίων οι τιμές καθορίζονται σε δευτερόλεπτα.

Μεταμόρφωση

Η τελευταία ομάδα των επεκτάσεων WebKit CSS, η οποία θεωρούμε - τις λειτουργίες μετατροπής (μετασχηματισμό). Για να δημιουργήσετε οπτικά εφέ χωρίς τη χρήση εικόνων, καμβά ή SVG, μπορούμε να εφαρμόσουμε αυτές τις λειτουργίες σε οποιοδήποτε στοιχείο. Χαρακτηριστικά μετατροπής λειτουργούν σε προγράμματα περιήγησης Safari, Android και WebOS.

Η συνεργασία με αυτές τις λειτουργίες είναι πολύ απλή: χρησιμοποιούμε Ακίνητα CSS Χρησιμοποιώντας τη λειτουργία CSS ως η τιμή, με την οποία έχουμε ήδη συναντηθεί νωρίτερα σε αυτή την ενότητα, όπως περιστροφή, κλίμακα ή μεταφράστε3D (τελευταίο μόνο σαφάρι).

Απλοποιημένη έκδοση του πρότυπου Cardflip μοιάζει με αυτό:

Εάν αναλύσετε τον κώδικα, τότε θα δούμε δύο div στοιχεία που θα συνθέτουν την κάρτα μας - Element.card. Ένα div είναι η επιφάνεια "μπροστά", η άλλη είναι "πίσω". Και οι δύο επιφάνειες βρίσκονται στην ίδια θέση (ως απόλυτα στοιχεία) και η πίσω πλευρά ξεκινά όταν ο άξονας Υ είναι 180 μοίρες.

Όταν ο χρήστης κάνει κλικ στο δοχείο της κάρτας (με την εμφανιζόμενη εμπρόσθια ή πίσω οθόνη), εμείς javascript Βοήθεια Εφαρμόστε (ή δεν ισχύουν) CSS Class αναστροφή, οι οποίες περιστρέφουν ένα στοιχείο 180 μοίρες γύρω από τον άξονα Υ. Και Voila! Μπροστά (μπροστά) θα εμφανίζεται πάντα μόνο μία επιφάνεια και η άλλη θα κρυφτεί αυτόματα. Και θα το πάρω για να συμβεί με μια όμορφη ομαλή κινούμενη εικόνα που εσείς, δυστυχώς δεν μπορείτε να αξιολογήσετε πλήρως στο σχήμα 9.3.

Σύκο. 9.3. Με 3D στροφή μπορείτε να χρησιμοποιήσετε εξαιρετικά 3D εφέ για να εμφανίσετε την πίσω γραμμή του στοιχείου.