• Μετάφραση

Για πολλούς από εμάς τους προγραμματιστές, το WebKit είναι ένα μαύρο κουτί. Του ρίχνουμε HTML, CSS, JS και ένα σωρό εικόνες, και το WebKit, κατά κάποιο τρόπο... μαγικά, μας δίνει μια ιστοσελίδα που φαίνεται και λειτουργεί καλά.
Αλλά στην πραγματικότητα πώς λέει ο συνάδελφός μου Ilya Grigorik :

Ένα διαδικτυακό κιτ δεν είναι μαύρο κουτί. Αυτό είναι ένα λευκό κουτί. Και όχι μόνο λευκό, αλλά και ανοιχτό κουτί.
Λοιπόν, ας προσπαθήσουμε να καταλάβουμε κάποια πράγματα:

• Τι είναι το WebKit;
• Τι δεν είναι το WebKit;
• Πώς χρησιμοποιείται το WebKit από τα προγράμματα περιήγησης WebKit;
• Γιατί πολλά WebKit δεν είναι ίδια;

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

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

Ποια είναι κοινά σε όλα τα προγράμματα περιήγησης WebKit; Σχεδόν μόνο τα δύο πρώτα.

Κάθε "θύρα" WebKit υλοποιεί τα υπόλοιπα στοιχεία με διαφορετικό τρόπο. Ας καταλάβουμε τι σημαίνει αυτό.

Θύρες WebKit

Υπάρχουν πολλές "θύρες" WebKit και παρέχω Ariya Hidayat, χάκερ WebKit και τεχνολογία. Ο διευθυντής της Sencha έχει το δικαίωμα να μιλήσει για αυτό:

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

Όπως ανέφερα παραπάνω, το CoreGraphics που χρησιμοποιείται είναι μοναδικό για κάθε θύρα WebKit. Το Chrome για Mac, για παράδειγμα, χρησιμοποιεί το Skia.

Κάποια στιγμή, το WebKit «μεταφέρθηκε» σε διαφορετικές πλατφόρμες, τόσο για επιτραπέζιους όσο και για φορητές συσκευές. Αυτή η παραλλαγή συνήθως ονομάζεται "θύρα WebKit". Για το Safari Windows, η Apple επίσης "μετέφερε ανεξάρτητα το WebKit" για να εκτελείται σε Windows χρησιμοποιώντας τη βιβλιοθήκη CoreFoundation (περιορισμένης υλοποίησης).

...παρά το γεγονός ότι το Safari στα Windows είναι πλέον νεκρό, εκτός από αυτό, υπήρχαν και πολλά άλλα "ports" (δείτε την πλήρη λίστα). Η Google έχει δημιουργήσει και συνεχίζει να υποστηρίζει τη θύρα Chromium. Υπάρχει επίσης το WebKitGtk, το οποίο βασίζεται στο Gtk+. Η Nokia (και τώρα η Trolltech, που την αγόρασε) υποστηρίζει τη θύρα WebKit Qt, η οποία έχει γίνει δημοφιλής ως μονάδα QtWebKit.
Μερικές θύρες WebKit

• Σαφάρι
  - Το Safari για OS X και το Safari για Windows είναι δύο διαφορετικές θύρες
  - Η νυχτερινή έκδοση WebKit είναι μια έκδοση της "θύρας" πηγαίου κώδικα Mac που χρησιμοποιείται για το Safari, μόνο νεότερη
• Mobile Safari
  - Αναπτύχθηκε σε ιδιωτικό υποκατάστημα, αλλά άνοιξε αργότερα.
  - Chrome για iOS (χρησιμοποιεί το WebView της Apple, περισσότερα για τη διαφορά αργότερα)
• Chrome (Chromium)
  - Chrome για Android (χρησιμοποιεί απευθείας τη "θύρα" του Chromium)
  - Το Chromium είναι επίσης η βάση για προγράμματα περιήγησης: Yandex, Sogou και σύντομα Opera.
• Πρόγραμμα περιήγησης Android
  - Χρησιμοποιεί τον πιο πρόσφατο πηγαίο κώδικα WebKit που είναι διαθέσιμος τη στιγμή της κυκλοφορίας.
• Ακόμη περισσότερες θύρες: Amazon Silk, Dolphin, Blackberry, QtWebKit, WebKitGTK+, The EFL port (Tizen), wxWebKit, WebKitWinCE, κ.λπ.

Διαφορετικές θύρες μπορούν να επικεντρωθούν σε διαφορετικές εργασίες. Το επίκεντρο της θύρας Mac είναι ο διαχωρισμός μεταξύ του προγράμματος περιήγησης και του λειτουργικού συστήματος και η παροχή συνδέσεων Obj-C και C++ για την ενσωμάτωση της μηχανής απόδοσης σε εγγενείς εφαρμογές. Η εστίαση της θύρας Chromium είναι αποκλειστικά στο πρόγραμμα περιήγησης. Το QtWebKit προσφέρει τη θύρα του για χρήση μαζί με την αρχιτεκτονική εφαρμογών πολλαπλών πλατφορμών ως μηχανή απόδοσης Τι είναι κοινό σε όλα τα προγράμματα περιήγησης WebKit

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

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

Και έτσι, πρώτα απ 'όλα, το WebKit αναλύει την HTML με τον ίδιο τρόπο. Λοιπόν, εκτός από το ότι το Chromium είναι η μόνη θύρα αυτή τη στιγμή που περιλαμβάνει υποστήριξη για νήματα για ανάλυση HTML.

... Εντάξει, αλλά μετά την ανάλυση του HTML, το δέντρο DOM κατασκευάζεται με τον ίδιο τρόπο. Λοιπόν, στην πραγματικότητα το Shadow DOM είναι ενεργοποιημένο μόνο για τη θύρα Chromium, που σημαίνει ότι η κατασκευή του DOM ποικίλλει. Επίσης για προσαρμοσμένα στοιχεία.

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

... Η ανάλυση CSS είναι η ίδια. Η κατανάλωση του CSS και η μετατροπή του σε CSSOM είναι αρκετά τυπικό. Ναι, αν και το Chrome υποστηρίζει μόνο προθέματα -webkit- όταν η Apple και άλλα προγράμματα περιήγησης υποστηρίζουν τα προθέματα παλαιού τύπου -khtml- και -apple-.

...Διάταξη...τοποθέτηση; Είναι σαν το ψωμί και το βούτυρο. Παντού το ίδιο, σωστά; Λοιπόν ήδη! Η διάταξη υποπίξελ και η αριθμητική εμπλουτισμένη διάταξη αποτελούν μέρος του WebKit, αλλά διαφέρουν από θύρα σε θύρα.

Σούπερ.

Άρα, είναι δύσκολο.

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

Τι είναι κοινό σε κάθε θύρα WebKit.

• DOM, παράθυρο, έγγραφο
  Περισσότερο ή λιγότερο
• CSSOM
• Ανάλυση CSS, Ιδιότητα/Τιμή
  διαφορές στα προθέματα κατασκευαστή
• Ανάλυση HTML και δημιουργία του DOM
  Είναι το ίδιο αν ξεχάσουμε τα Web Components.
• Διάταξη και τοποθέτηση
  Flexbox, Floats, πλαίσιο μορφοποίησης μπλοκ... όλα είναι κοινά
• Εργαλεία διεπαφής χρήστη και εργαλεία προγραμματιστή, όπως το Chrome DevTools γνωστό και ως επιθεωρητής WebKit.
  Αν και από τον περασμένο Απρίλιο, η Safari χρησιμοποιεί το δικό της Safari Inspector, ένα μη WebKit, κλειστού κώδικα.
• Λειτουργίες όπως contenteditable, pushState, File API, περισσότερα SVG, CSS μαθηματικά μετασχηματισμού, Web Audio API, localStorage
  Αν και η εφαρμογή μπορεί να διαφέρει. Κάθε θύρα μπορεί να χρησιμοποιήσει το δικό της σύστημα αποθήκευσης για το localStorage και μπορεί να χρησιμοποιήσει διαφορετικό API ήχου για το Web Audio API.

Γίνεται λίγο μπερδεμένο, οπότε ας προσπαθήσουμε να δούμε μερικές από τις διαφορές. Τώρα, τι δεν είναι κοινό στις θύρες WebKit:

• Όλα όσα σχετίζονται με GPU
  - Τρισδιάστατη μεταμόρφωση
  - WebGL
  - Αποκωδικοποίηση βίντεο
• Απόδοση 2D στην οθόνη
  - Τεχνολογίες κατά της παραμόρφωσης
  - Απόδοση διαβαθμίσεων SVG και CSS
• Απόδοση κειμένου και παύλα
• Τεχνολογίες δικτύου (SPDY, προ-απόδοση, μεταφορά WebSocket)
• Μηχανή JavaScript
  - Η μηχανή JavaScriptCore βρίσκεται στο αποθετήριο WebKit. Αλλά υπάρχουν δεσμεύσεις στο WebKit τόσο για αυτό όσο και για το V8.
• Απόδοση στοιχείων φόρμας
• Συμπεριφορά ετικετών βίντεο και ήχου και υποστήριξη κωδικοποιητή
• Αποκωδικοποίηση εικόνας
• Πλοήγηση πίσω/εμπρός
  - Μέρος pushState()
• Λειτουργίες SSL όπως η αυστηρή ασφάλεια μεταφοράς και οι ακίδες δημόσιου κλειδιού

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

Ή για να μπούμε σε περισσότερες λεπτομέρειες, ένα χαρακτηριστικό που προστέθηκε πρόσφατα: το CSS.supports() έχει ενεργοποιηθεί για όλες τις θύρες εκτός από τα win και wincairo, τα οποία δεν έχουν ενεργοποιημένες τις λειτουργίες υπό όρους css3.

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

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

Πολλά από τα στοιχεία του WebKit είναι εναλλάξιμα (εμφανίζονται με γκρι).

Για παράδειγμα, η μηχανή JavaScript του WebKit, JavaScriptCore, είναι η προεπιλεγμένη μηχανή στο WebKit. Αρχικά βασίζεται στο KJS (από το KDE) από την εποχή που το WebKit ξεκίνησε ως ένα fork του KHTML. Ταυτόχρονα, η θύρα Chromium μεταβαίνει στον κινητήρα V8 και χρησιμοποιεί μοναδικές συνδέσεις DOM.

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

«Το WebKit είναι σαν σάντουιτς. Διαφορετικά, στην περίπτωση του Chromium, είναι περισσότερο σαν taco. Νόστιμο taco από τεχνολογίες ιστού.
Dmitri Glazkov, χάκερ Chrome WebKit. Champion of Web Components, και shadow dom.

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

Chrome (OS X) Safari (OS X) QtWebKit Android Browser Chrome για iOSΑπόδοση Δικτύωση Γραμματοσειρές JavaScript

Σκιά	CoreGraphics	QtGui	Android stack/Skia	CoreGraphics
Στοίβα δικτύου Chromium	CFNetwork	QtNetwork	Fork της στοίβας δικτύου του Chromium	Στοίβα χρωμίου
CoreText μέσω Skia	CoreText	Qt εσωτερικά	Στοίβα Android	CoreText
V8	JavaScriptCore	JSC (Το V8 χρησιμοποιείται αλλού στο Qt)	V8	JavaScriptCore (χωρίς JITtting) *

* Υποσημείωση σχετικά με το Chrome για iOS. Χρησιμοποιεί το UIWebView, όπως πιθανότατα γνωρίζετε. Σύμφωνα με τις δυνατότητες του UIWebView, αυτό σημαίνει ότι μπορεί να χρησιμοποιήσει μόνο την ίδια μηχανή απόδοσης με το Mobile Safari, το JavaScriptCore (όχι το V8) και ένα μοντέλο με ένα νήμα. Ωστόσο, κάποιος κώδικας δανείζεται από το Chromium, όπως το υποσύστημα δικτύωσης, η υποδομή συγχρονισμού σελιδοδεικτών, το κύριο πλαίσιο, οι μετρήσεις και η αναφορά σφαλμάτων. (Επίσης, η JavaScript είναι τόσο σπάνια ένα σημείο συμφόρησης σε κινητές συσκευές που η έλλειψη μεταγλωττιστή JITtting έχει ελάχιστο αντίκτυπο.)

Εντάξει, από πού ήρθαμε; Και έτσι, όλα τα WebKit είναι εντελώς διαφορετικά τώρα. Φοβάμαι.

Δεν αξίζει τον κόπο! Η κάλυψη των δοκιμών "layoutTest" του WebKit είναι τεράστια. (28.000 δοκιμές σε τελευταία μέτρηση) και όχι μόνο για υπάρχουσες συναρτήσεις, αλλά και για όλες τις παλινδρομήσεις που βρέθηκαν. Στην πραγματικότητα, κάθε φορά που μαθαίνετε νέες ή «μυστικές» δυνατότητες DOM/CSS/HTML-5, οι δοκιμαστικές σουίτες «layoutTest» έχουν συνήθως μια εξαιρετική ελάχιστη επίδειξη.

Επιπλέον, το W3C καταβάλλει προσπάθειες για την τυποποίηση της δοκιμαστικής σουίτας. Αυτό σημαίνει ότι μπορούμε να περιμένουμε ότι τόσο οι θύρες WebKit όσο και όλα τα άλλα προγράμματα περιήγησης θα δοκιμαστούν με τις ίδιες δοκιμαστικές σουίτες, κάτι που θα μας οδηγήσει σε λιγότερες παραξενιές και σε έναν πιο διαλειτουργικό ιστό. Σε όλους όσους κατέβαλαν προσπάθεια παρακολουθώντας την εκδήλωση Test The Web Forward...ευχαριστούμε!

Η Opera μόλις μετακόμισε στο WebKit. Τι θα βγει από αυτό; Ο Robert Nyman και ο Rob Hawkes έχουν ήδη θίξει αυτό το θέμα, αλλά θα προσθέσω ότι ένα από τα σημαντικά σημεία της ανακοίνωσης ήταν ότι η Opera μετακομίζει στο Chromium. Αυτό σημαίνει ότι οι φόρμες WebGL, Canvas, HTML5, υλοποίηση 2D γραφικών, όλα αυτά τα πράγματα θα είναι τα ίδια στο Chrome και την Opera τώρα. Ίδιο API και υλοποίηση χαμηλού επιπέδου. Δεδομένου ότι το Opera βασίζεται στο Chromium, μπορεί να αισθάνεστε ότι μειώνετε τον φόρτο εργασίας σας για να ελέγξετε τη συμβατότητα μεταξύ Opera και Chrome.
Θα πρέπει επίσης να σημειώσω ότι όλα τα προγράμματα περιήγησης Opera θα μετεγκατασταθούν στο Chromium. Δηλαδή, Opera για Windows, Mac, Linux και Opera Mobile (ένα πλήρες πρόγραμμα περιήγησης για κινητά). Ακόμη και το Opera Mini, το thin client, θα αλλάξει από την τρέχουσα φάρμα απόδοσης που βασίζεται σε Presto σε ένα που βασίζεται στο Chromium... και μια νυχτερινή έκδοση του WebKit. Τι είναι αυτό? Αυτό είναι το WebKit, που εκτελείται με τον ίδιο κώδικα με το Safari (αν και ορισμένες εσωτερικές βιβλιοθήκες έχουν αλλάξει). Διαχειρίζεται σε μεγάλο βαθμό από την Apple, επομένως η συμπεριφορά και το σύνολο χαρακτηριστικών είναι συνεπή με αυτό που θα βρείτε στο Safari. Σε πολλές περιπτώσεις, η Apple είναι συντηρητική όταν πρόκειται να συμπεριλάβει λειτουργίες που εφαρμόζουν ή πειραματίζονται άλλες θύρες. Τέλος πάντων, για να χρησιμοποιήσουμε μια αναλογία, σκεφτείτε το ότι... μια νυχτερινή κατασκευή του WebKit για Safari είναι σαν το Chromium για το Chrome. Προσθέστε ετικέτες

Σε αυτό το άρθρο θα δούμε τρία προγράμματα περιήγησης που βασίζονται στη δημοφιλή μηχανή WebKit. Όταν πρόκειται για την επιλογή ενός προγράμματος περιήγησης ιστού, οι χρήστες τείνουν να κοιτάζουν προς τα πιο διάσημα προγράμματα: Google Chrome, Opera, Mozilla Firefox, Internet Explorer. Ταυτόχρονα, πολλοί άνθρωποι ξεχνούν ή δεν γνωρίζουν ότι ο Firefox, ο Chrome και, πιο πρόσφατα, η Opera δημιουργούνται με βάση έργα ανοιχτού κώδικα, πράγμα που σημαίνει ότι αυτά τα προγράμματα μπορούν να τροποποιηθούν.

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

Διανέμεται δωρεάν, έχει ρωσική διεπαφή, λειτουργεί σε Windows, Android, Mac, iOS. Αυτό το πρόγραμμα περιήγησης πριν από δέκα χρόνια ήταν γνωστό ως MyIE2 και ήταν μια προσθήκη στον Internet Explorer, αλλά πολλά έχουν αλλάξει από τότε και τώρα το πρόγραμμα χρησιμοποιεί τη μηχανή Webkit από προεπιλογή.

Στην τελευταία, 4η έκδοση, το πρόγραμμα περιήγησης προσφέρει πολλές χρήσιμες λειτουργίες, μεταξύ των οποίων η πιο ενδιαφέρουσα είναι η δυνατότητα αποθήκευσης πληροφοριών στο cloud. Αυτό σας επιτρέπει να χρησιμοποιείτε τον λογαριασμό σας στο πρόγραμμα για να μεταφέρετε πληροφορίες μεταξύ διαφορετικών συσκευών, είτε πρόκειται για gadget Android, προϊόν καμπάνιας Apple ή επιτραπέζιο υπολογιστή.

Η διεπαφή του Maxthon Cloud Browser, αν και είναι κατασκευασμένη στο στυλ του Chrome, έχει πολύ περισσότερες δυνατότητες. Η πλαϊνή γραμμή εμφανίζει εικονίδια για πρόσβαση σε επεκτάσεις. Είναι βολικό ότι με ένα κλικ μπορείτε να απενεργοποιήσετε ή να ενεργοποιήσετε όλα τα εγκατεστημένα πρόσθετα και να κάνετε λήψη νέων από έναν ειδικό ιστότοπο.

Διανέμεται δωρεάν, έχει ρωσική διεπαφή και τρέχει σε Windows. Ένα προϊόν της Comodo, η οποία είναι περισσότερο γνωστή ως προγραμματιστής λογισμικού ασφαλείας. Το Comodo Dragon δεν είναι πλέον μια εξέλιξη, αλλά μια κατασκευή, αφού η λειτουργικότητά του δεν διαφέρει πολύ από το Chrome.

Δεν υπάρχουν πολλές διαφορές από το αρχικό πρόγραμμα περιήγησης και όλες σχετίζονται με ζητήματα ασφαλείας. Η πρώτη βασική διαφορά από το Google Chrome είναι η πραγματική κατάσταση ανώνυμης περιήγησης, το Comodo Dragon δεν χρησιμοποιεί μοναδικό αναγνωριστικό χρήστη και HTTP-REFERRER, που δεν σας επιτρέπει να παρακολουθείτε τον χρήστη στο διαδίκτυο.

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

Διανέμεται δωρεάν, έχει ρωσική διεπαφή και τρέχει σε Windows. Το "Yandex.Browser" είναι ένα πρόγραμμα περιήγησης που κυκλοφόρησε πρόσφατα με βάση το Chromium από τη ρωσική εταιρεία Yandex. Σε αυτό το προϊόν, οι προγραμματιστές απλώς πρόσθεσαν τις υπηρεσίες Yandex στον πίνακα γρήγορων συνδέσμων. Προστέθηκε και βελτιώθηκε επίσης η λειτουργία "Turbo", η οποία βρίσκεται στην Opera. Συνολικά, δεν είναι ένα κακό πρόγραμμα περιήγησης που απευθύνεται σε χρήστες Yandex.

Android και iPhone - πόλεμοι προγράμματος περιήγησης

Μέρος 1. WebKit για διάσωση

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

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

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

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

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

• Ζητήματα εγκατάστασης: Η εγκατάσταση εφαρμογών Web είναι χωρίς προβλήματα—απλώς εγκαταστήστε ή αντιγράψτε τις στον διακομιστή και πείτε στους πελάτες σας σε ποια διεύθυνση URL να δείχνουν στο πρόγραμμα περιήγησης.
• Ζητήματα κλιμάκωσης: Οι εφαρμογές Ιστού προσαρμόζονται εύκολα σε μια ομάδα διακομιστών σε ένα κέντρο δεδομένων υψηλής απόδοσης και χρησιμοποιούνται έτοιμα εργαλεία διαχείρισης τοποθεσιών Web για την εξυπηρέτηση των εφαρμογών.
• Ζητήματα αρχειοθέτησης και ανάκτησης δεδομένων: Οι εφαρμογές Ιστού χρησιμοποιούν κεντρική αποθήκευση δεδομένων, απλοποιώντας έτσι την εργασία ανάκτησης σε περίπτωση αποτυχίας.
• Θέματα διεπαφής χρήστη: Ο συνδυασμός HTML, Cascading Style Sheets (CSS), JavaScript και γραφικών σάς επιτρέπει να δημιουργήσετε μια πλούσια διεπαφή χρήστη που είναι σημαντικά ανώτερη σε λειτουργικότητα και εμφάνιση σε σχέση με τις διεπαφές που έχουν αναπτυχθεί με χρήση εγγενών SDK. Τα τελευταία, κατά κανόνα, δεν είναι σε θέση να παρέχουν ένα πλήρες εφέ παρουσίας για εφαρμογές παιχνιδιών και δεν εγγυώνται την απαραίτητη λειτουργικότητα για διαδραστικά τερματικά πληροφοριών.
• Ευκολία χρήσης: Οι περισσότερες εφαρμογές απαιτούν στοιχεία διεπαφής χρήστη που είναι απλά και εύχρηστα, επιτρέποντάς σας να εκτελείτε εύκολα καθημερινές λειτουργίες.

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

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

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

Μέσα σε λίγα μόλις χρόνια, η πλατφόρμα iPhone έγινε ο νούμερο ένα πελάτης Web στον κόσμο. Γιατί; Επειδή το WebKit, σε συνδυασμό με μια αξιόπιστη σύνδεση στο Διαδίκτυο, κατέστησε δυνατή τη χρήση των υπηρεσιών Ιστού σε κινητές συσκευές πολύ πιο αποτελεσματικά από ό,τι σε οποιοδήποτε άλλο σύγχρονο πρόγραμμα περιήγησης. Άλλοι παίκτες στην αγορά κινητών συσκευών έχουν επίσης λάβει γνώση της νέας τεχνολογίας και ολόκληρη η αγορά μπορεί πλέον να χωριστεί σε εταιρείες που χρησιμοποιούν WebKit, εταιρείες που πρόκειται να χρησιμοποιήσουν το WebKit και εταιρείες που επινοούν δικαιολογίες για να μην χρησιμοποιούν το WebKit .

Τι είναι λοιπόν το WebKit;

WebKit και HTML5

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

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

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

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

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

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

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

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

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

Εμφάνιση τυπικών τοποθεσιών

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

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

Ιστοσελίδες σχεδιασμένες με γνώμονα τις κινητές συσκευές

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

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

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

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

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

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

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

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

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

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

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

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

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

Φτιαγμένο για φορητές συσκευές

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

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

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

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

Τώρα ας δούμε το παράθυρο προβολής email της έκδοσης του Gmail για κινητά. Επειδή ο διαθέσιμος χώρος οθόνης στην εφαρμογή είναι πολύ περιορισμένος, το πρόγραμμα προβολής μηνυμάτων διαθέτει πρόσθετα κουμπιά και στοιχεία πλοήγησης. Σε αυτήν την περίπτωση, τα εμφανιζόμενα στοιχεία πλοήγησης επικαλύπτουν το παράθυρο για την προβολή μηνυμάτων. Επίσης, μην χρησιμοποιείτε πάρα πολλά καρέ ή scrolling div, αν μπορείτε να το αποφύγετε. Η έκδοση του Gmail για κινητά επιλύει αυτό το πρόβλημα χρησιμοποιώντας ένα αναδυόμενο μενού που εμφανίζεται μόλις ο χρήστης ολοκληρώσει την κύλιση της σελίδας. Το αναδυόμενο μενού περιέχει 3 κουμπιά: Αρχειοθέτηση, Διαγραφή και Περισσότερα. Όταν κάνετε κλικ στο κουμπί Περισσότερα, εμφανίζονται πρόσθετα στοιχεία μενού (βλ. Εικόνα 7).

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

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

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

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

Περιεχόμενο για συγκεκριμένη πλατφόρμα

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

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

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

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

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

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

Τι πρέπει λοιπόν να γίνει για να φέρουμε την εμφάνιση και τη διεπαφή της εφαρμογής όσο το δυνατόν πιο κοντά στα «εγγενή» προγράμματα;

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

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

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

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

Internet Explorer V6

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

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

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

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

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

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

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

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

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

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

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

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

Οι σύγχρονες ιστοσελίδες πρέπει να δημιουργούνται σε δηλωτική μορφή που να καθορίζει την οργανωτική δομή και το περιεχόμενο της σελίδας. Η τοποθέτηση και η μορφοποίηση της σελίδας γίνεται χρησιμοποιώντας Cascading Style Sheets (CSS) και, στις περισσότερες περιπτώσεις, JavaScript. Στην πραγματικότητα, οι βιβλιοθήκες JavaScript έχουν γίνει τόσο δημοφιλείς που η χρήση τους σήμερα είναι ο κανόνας και όχι η εξαίρεση. Στην εφαρμογή που συζητείται σε αυτό το άρθρο, θα χρησιμοποιήσουμε τη δημοφιλή βιβλιοθήκη JavaScript jQuery. Η εφαρμογή μας θα τρέχει σε πλατφόρμες iPhone, Android και επιτραπέζιους υπολογιστές. Θα χρησιμοποιηθεί ο ίδιος κώδικας HTML και τυχόν απαραίτητες διαφορές θα εφαρμοστούν σε φύλλα στυλ. Πρέπει να σημειωθεί εδώ ότι δεν έχουμε καταβάλει συνειδητά καμία σημαντική προσπάθεια για να σχεδιάσουμε μια ελκυστική εμφάνιση για την εφαρμογή. Επιπλέον, εντυπωσιακά χρώματα που δεν εναρμονίζονται μεταξύ τους επιλέχθηκαν σκόπιμα ως φόντο προκειμένου να προσελκύσουν επιπλέον την προσοχή του αναγνώστη στην οργάνωση των φύλλων στυλ. Στο Μέρος 2 θα βελτιώσουμε ελαφρώς την εμφάνιση της εφαρμογής, αλλά προς το παρόν ο κώδικας HTML μοιάζει με αυτόν που εμφανίζεται στη Λίστα 1.

Καταχώριση 1. Κώδικας HTML εφαρμογής εάν (navigator.userAgent.indexOf("iPhone") != -1) (document.write(""); ) other if (navigator.userAgent.indexOf("Android") != -1 ) ( document.write(""); ) else (document.write(""); ) συνάρτηση setupTestData() ( try ( netmon.initialize(); if (netmon.resources.length > 0) ( jQuery.each( netmon .resources,function (index, value) ($("#mainContent").append(netmon.render(index,value)); )); $(".serverentry").κάντε κλικ (function() ( $(this ).find(".serveritems").toggle();)); $(".serveritems").hide(); ) ) catch (e) ( alert(e); ) ) Οι πόροι του δικτύου μου Διακομιστές My User Agent

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

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

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

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

Το κύριο φύλλο στυλ που είναι αποθηκευμένο στο αρχείο netmon.js εμφανίζεται στη Λίστα 2.

Καταχώριση 2. Κύριο σώμα φύλλου στυλ ( χρώμα: #888888, οικογένεια γραμματοσειράς: Helvetica, μέγεθος γραμματοσειράς: 14 εικονοστοιχεία, περιθώριο: 0 εικονοστοιχεία, συμπλήρωση: 0; ) .λεπτομέρειες ( περιθώριο: 0 εικονοστοιχεία, επένδυση: 0 εικονοστοιχεία, χρώμα φόντου: λευκό ; περίγραμμα: συμπαγές, πλάτος περιγράμματος: 1 εικονοστοιχεία; -κιτ ιστοσελίδων-περιγράμματα-πάνω-αριστερά-ακτίνα: 8 εικονοστοιχεία; webkit-border-bottom-right-radius: 8px; ) .OK ( color: #000000; ) .BAD ( color: #ff0000; ) .odd ( background-image: -webkit-gradient(γραμμικό, αριστερό πάνω, δεξιά κάτω ,from(#cccc) ,to(#999)); ) .even (background-image: -webkit-gradient(γραμμικό, αριστερό επάνω, δεξιά κάτω,από(#999) ,to(#ccc)); ) . serverentry a ( float: δεξιά; χρώμα: #ffffff; ) .serveritems( color: #000; ) #header h1 (περιθώριο: 0; padding: 0; text-align: center; color: #000; )

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

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

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

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

Η λίστα 3 δείχνει τον κωδικό για το αρχείο iphone.css.

Καταχώριση 3. Σώμα αρχείου iphone.css ( χρώμα φόντου: #00ff00; ) .serverentry ( -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px; -webkit-border -bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px;) .name ( μεγέθους γραμματοσειράς: 2em; ) .summary( font-size: 1,5em; ) .serverentry a ( font- μέγεθος: 1,5em;)

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

Καταχώριση 4. Αρχείο Netmon.js var netmon = ( αρχικοποίηση: συνάρτηση () ( ), πόροι: [ ( όνομα: "msiservices.com", homeurl: "http://msiservices.com", pingurl: "http:// msiservices.com/netmon.php", κατάσταση: "OK", σύνοψη: "OK", στοιχεία: [ (όνομα: "DiskSpace", τιμή: "22.13 GB"), (όνομα: "Base Data Up?", τιμή: "Yes") ] ), (όνομα: "server 2", homeurl: "http://someurl", pingurl: "http://someurl/netmon.jsp", κατάσταση: "OK", σύνοψη: "OK" , στοιχεία: [ (όνομα: "DiskSpace", τιμή: "100,8 GB"), (όνομα: "Βάση δεδομένων επάνω?", τιμή: "Ναι") ] ), // πρόσθετες εγγραφές κομμένες για συντομία ], απόδοση: λειτουργία( index,itm) ( δοκιμάστε ( var ret = "; ret += ""; ret += "" + itm.name + " Εμφάνιση
"; if (itm.status != "OK") ( ret += "-" + itm.summary + "
"; ) ret += ""; jQuery.each(itm.items,function (j,itemdetail) ( ret += ">" + itemdetail.name + "=" + itemdetail.value + "
"; )); ret += ""; ret += ""; επιστροφή ret; ) catch (e) (επιστροφή "Σφάλμα απόδοσης του στοιχείου [" + itm.name + "] " + e + ""; ) ) ) ;

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

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

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

συμπέρασμα

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

Τι είναι το Webkit;

Με βάση τον κινητήρα δημιουργήθηκαν προγράμματα περιήγησης όπως τα Midori, Maxthon, Konqueror, Arora και άλλα. Αλλά δεν είναι μόνο τα ελάχιστα γνωστά προγράμματα περιήγησης που επιλέγουν το Webkit. Παρουσιάζουμε στην προσοχή σας δύο «γίγαντες» στον κόσμο των προγραμμάτων περιήγησης - το Safari από την Apple και το Chrome από την Google (αυτά τα προγράμματα περιήγησης). Είναι απίθανο κάποιος να υποστηρίξει ότι αυτά τα προγράμματα περιήγησης έχουν μικρή λειτουργικότητα και χαμηλή ταχύτητα λειτουργίας. Εκτός από τα προγράμματα περιήγησης για επιτραπέζιους υπολογιστές, το Webkit έχει διεισδύσει και σε κινητές πλατφόρμες, γεγονός που επιβεβαιώνει για άλλη μια φορά τα πλεονεκτήματα του ελεύθερου λογισμικού. Το ίδιο Safari Mobile, που αναπτύχθηκε για iOS, χρησιμοποιεί με επιτυχία αυτήν τη μηχανή. Τα τυπικά προγράμματα περιήγησης για τις πλατφόρμες Android, HP WebOS και Samsung Bada είναι επίσης ενσωματωμένα στο Webkit.

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

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

Ιστορία του Webkit

Ίσως έχετε αναρωτηθεί: "Γιατί ελεύθερο λογισμικό;" Ας δούμε την ιστορία της δημιουργίας του. Η μητρική του Webkit είναι επίσης μια μηχανή που διανέμεται ελεύθερα, η οποία αναπτύσσεται για το γραφικό περιβάλλον των συστημάτων της οικογένειας Unix. Αυτή η μηχανή ονομάζεται KDE. Πίσω στο 1998, μια ομάδα προγραμματιστών που εργάζονταν στο KDE αποφάσισε να κυκλοφορήσει το δικό της πρόγραμμα περιήγησης για αυτό το γραφικό περιβάλλον.

Ένα τέτοιο πρόγραμμα περιήγησης κυκλοφόρησε και ονομάστηκε από τους δημιουργούς του Konqueror. Η μηχανή που βρίσκεται κάτω από αυτό το πρόγραμμα περιήγησης ονομαζόταν KHTML. 3 χρόνια αργότερα, το 2001, η Apple αποφάσισε να δημιουργήσει το δικό της πρόγραμμα περιήγησης, για το οποίο χρησιμοποίησε πηγές KHTML, καθώς και τη μηχανή JavaScript KJS. Ως αποτέλεσμα αυτής της σύνθεσης, το έργο Webkit δημιουργήθηκε κάτω από το «φτερό» της Apple. Στη βάση του, στις αρχές του 2003, κυκλοφόρησε η πρώτη έκδοση του προγράμματος περιήγησης από την Apple - .

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

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

Μια δημοφιλής μηχανή επεξεργασίας ιστοσελίδων που τροφοδοτεί το Apple Safari και το Google Chrome. Είναι ελεύθερο λογισμικό. Χαρακτηρίζεται από υψηλή ταχύτητα και εξαιρετική υποστήριξη για πρότυπα web.

Το WebKit είναι η μηχανή επεξεργασίας Ιστού που τροφοδοτεί πολλά προγράμματα περιήγησης. Ανάμεσά τους είναι δύο από τα "Big Five" - ​​και επίσης λιγότερο δημοφιλή - Maxthon 3, Rekonq, Epiphany, RockMelt. Konqueror, Midori και Arora. Οι προγραμματιστές προγραμμάτων περιήγησης για κινητά χρησιμοποιούν επίσης αυτή τη μηχανή στα προϊόντα τους, ιδίως το Safari Mobile για το λειτουργικό σύστημα iOS και τα προγράμματα περιήγησης που είναι ενσωματωμένα στις κινητές πλατφόρμες Android, Samsung Bada και HP WebOS.

Αυτή η ποικιλία προγραμμάτων περιήγησης οφείλεται στο γεγονός ότι το WebKit είναι δωρεάν λογισμικό και μπορεί να χρησιμοποιηθεί από οποιονδήποτε τηρεί ορισμένες προϋποθέσεις.

Το WebKit προέρχεται από μια δωρεάν μηχανή επεξεργασίας ιστοσελίδων που αναπτύχθηκε στο δημοφιλές γραφικό περιβάλλον για λειτουργικά συστήματα της οικογένειας *nix - KDE. Το 1998, οι προγραμματιστές του KDE αποφάσισαν να δημιουργήσουν ένα πρόγραμμα περιήγησης ειδικά για αυτό το γραφικό περιβάλλον.

Το πρόγραμμα περιήγησης ονομάζεται Konqueror και η μηχανή του είναι KHTML. Το 2001, η Apple άρχισε να σκέφτεται να δημιουργήσει το δικό της πρόγραμμα περιήγησης και πήρε τον πηγαίο κώδικα του KHTML και τη μηχανή επεξεργασίας κώδικα JavaScript KJS για να λειτουργήσει στο νέο έργο. Το έργο ονομάστηκε WebKit.

Τον Ιανουάριο του 2003, η Apple παρουσίασε την πρώτη έκδοση του προγράμματος περιήγησης Safari, που χρησιμοποιεί τη μηχανή WebKit. Με την πάροδο του χρόνου, οι προγραμματιστές του Konqueror συμπεριέλαβαν τη δυνατότητα χρήσης WebKit μαζί με το KHTML. Παρά το γεγονός ότι το KHTML βρίσκεται ήδη πίσω από το WebKit όσον αφορά τις δυνατότητες, οι προγραμματιστές συνεχίζουν να εργάζονται σε αυτό.

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