01 του 06
Ενεργοποιήστε και χρησιμοποιήστε την ευαίσθητη λειτουργία σχεδίασης στο Safari 9
Το να είσαι Web developer στον σημερινό κόσμο σημαίνει να υποστηρίξεις μια σειρά από συσκευές και πλατφόρμες, που μερικές φορές μπορεί να αποδειχτεί ένα αποθαρρυντικό έργο. Ακόμη και με τον πιο καλά σχεδιασμένο κώδικα που συμμορφώνεται με τα πιο πρόσφατα πρότυπα του ιστού, μπορείτε να διαπιστώσετε ότι τμήματα του ιστότοπού σας ενδέχεται να μην φαίνονται ή να ενεργούν όπως θέλετε σε ορισμένες συσκευές ή αναλύσεις. Όταν αντιμετωπίζετε την πρόκληση να υποστηρίξετε ένα τόσο ευρύ φάσμα σεναρίων, το να έχετε τα κατάλληλα εργαλεία προσομοίωσης στη διάθεσή σας μπορεί να είναι ανεκτίμητο.
Εάν είστε ένας από τους πολλούς προγραμματιστές που χρησιμοποιεί ένα Mac, το κιτ εργαλείων προγραμματισμού του Safari έχει έρθει πάντα βολικό. Με την κυκλοφορία του Safari 9 το εύρος αυτής της λειτουργικότητας έχει επεκταθεί σημαντικά, κυρίως λόγω της ευέλικτης σχεδίασης σχεδιασμού, η οποία σας επιτρέπει να δείτε πώς θα προβάλλεται ο ιστότοπός σας σε διάφορες αναλύσεις οθόνης καθώς και σε διαφορετικά iPad, iPhone και iPod touch builds.
Αυτό το σεμινάριο περιγράφει λεπτομερώς τον τρόπο ενεργοποίησης του τρόπου ανταπόκρισης σχεδίασης καθώς και τον τρόπο χρήσης του για τις αναπτυξιακές σας ανάγκες.
Αρχικά, ανοίξτε το πρόγραμμα περιήγησης Safari.
02 του 06
Προτιμήσεις για σαφάρι
Κάντε κλικ στο Safari στο μενού του προγράμματος περιήγησης που βρίσκεται στο επάνω μέρος της οθόνης. Όταν εμφανιστεί το αναπτυσσόμενο μενού, επιλέξτε την επιλογή Προτιμήσεις_ που περιγράφεται στο παραπάνω παράδειγμα.
Σημειώστε ότι μπορείτε να χρησιμοποιήσετε την ακόλουθη συντόμευση πληκτρολογίου αντί του προαναφερθέντος στοιχείου μενού: COMMAND + COMMA (,)
03 του 06
Εμφάνιση αναπτυσσόμενου μενού
Το παράθυρο "Προτιμήσεις" του Safari πρέπει τώρα να εμφανίζεται, επικαλύπτοντας το παράθυρο του προγράμματος περιήγησης. Πρώτα, κάντε κλικ στο εικονίδιο Advanced_ που αντιπροσωπεύεται από μια ταχύτητα και βρίσκεται στην επάνω δεξιά γωνία του παραθύρου.
Οι Προχωρημένες προτιμήσεις του προγράμματος περιήγησης πρέπει τώρα να είναι ορατές. Στο κάτω μέρος υπάρχει μια επιλογή που συνοδεύεται από ένα πλαίσιο ελέγχου, με την επωνυμία Show Development menu στη γραμμή μενού και περιγράφεται στο παραπάνω παράδειγμα. Κάντε κλικ στο πλαίσιο ελέγχου μία φορά για να ενεργοποιήσετε αυτό το μενού.
04 του 06
Εισαγάγετε τη λειτουργία υπεύθυνης σχεδίασης
Μια νέα επιλογή θα πρέπει τώρα να είναι διαθέσιμη στο μενού Safari, το οποίο βρίσκεται στο επάνω μέρος της οθόνης και φέρει την ένδειξη Develop . Κάντε κλικ σε αυτήν την επιλογή. Όταν εμφανιστεί το αναπτυσσόμενο μενού, επιλέξτε Enter Respirable Design Mode _ που περιγράφεται στο παραπάνω παράδειγμα.
Σημειώστε ότι μπορείτε να χρησιμοποιήσετε την ακόλουθη συντόμευση πληκτρολογίου αντί του προαναφερθέντος στοιχείου μενού: OPTION + COMMAND + R
05 του 06
Λειτουργία σχεδίασης
Η ενεργή ιστοσελίδα θα πρέπει τώρα να εμφανίζεται στη λειτουργία ανταποκρινούς σχεδιασμού, όπως φαίνεται στο παραπάνω παράδειγμα. Επιλέγοντας μία από τις συσκευές iOS που αναφέρονται, όπως το iPhone 6 ή μία από τις διαθέσιμες αναλύσεις οθόνης, όπως 800 x 600, μπορείτε να δείτε αμέσως πώς θα εμφανιστεί η σελίδα στη συγκεκριμένη συσκευή ή σε αυτή την ανάλυση οθόνης.
Εκτός από τις συσκευές και τις αναλύσεις που εμφανίζονται, μπορείτε επίσης να δώσετε εντολή στο Safari να προσομοιώνει έναν διαφορετικό πράκτορα χρήστη - όπως κάποιον από διαφορετικό πρόγραμμα περιήγησης - κάνοντας κλικ στο αναπτυσσόμενο μενού που εμφανίζεται ακριβώς πάνω από τα εικονίδια της ανάλυσης.
06 του 06
Μενού ανάπτυξης: Άλλες επιλογές
Εκτός από τη Λειτουργία Ανταπόκριτου Σχεδιασμού, το μενού Ανάπτυξης του Safari 9 προσφέρει πολλές άλλες χρήσιμες επιλογές, μερικές από τις οποίες παρατίθενται παρακάτω.
- Άνοιγμα σελίδας με: Σας επιτρέπει να ανοίξετε την ενεργή ιστοσελίδα σε οποιοδήποτε άλλο πρόγραμμα περιήγησης που είναι εγκατεστημένο στο Mac σας.
- Agent χρήστη: Η αλλαγή του παράγοντα χρήστη αναγκάζει τους διακομιστές Web να αναγνωρίζουν το πρόγραμμα περιήγησης ως κάτι άλλο από το Safari 9.
- Connect Web Inspector: Ο Επιθεωρητής Ιστού του Safari 9 εμφανίζει όλους τους πόρους μιας ιστοσελίδας, παρέχοντας τη δυνατότητα να διαβάσει τις πληροφορίες CSS, τις μετρήσεις DOM και τη δομή, καθώς και τον εγγενή πηγαίο κώδικα.
- Εμφάνιση κονσόλας σφαλμάτων: Μια από τις πιο ευρέως χρησιμοποιούμενες επιλογές στο αναπτυσσόμενο μενού, αυτή η κονσόλα εμφανίζει σφάλματα και προειδοποιήσεις JavaScript, HTML και XML και XML.
- Εμφάνιση σελίδας προέλευσης: Σας επιτρέπει να προβάλετε και να αναζητήσετε τον πηγαίο κώδικα της ενεργής ιστοσελίδας.
- Εμφάνιση πόρων σελίδας: Η επιλογή αυτής της επιλογής εμφανίζει έγγραφα, σενάρια, CSS και άλλους πόρους από την τρέχουσα σελίδα.
- Εμφάνιση του επεξεργαστή αποσπάσματος: Παρέχει τη δυνατότητα επεξεργασίας και εκτέλεσης τμημάτων κώδικα, σε αντίθεση με μια πλήρη σελίδα. Αυτή η λειτουργία είναι πολύ χρήσιμη από την άποψη των δοκιμών.
- Εμφάνιση του Εργαλείου δημιουργίας επεκτάσεων: Σας επιτρέπει να δημιουργείτε τις δικές σας επεκτάσεις Safari, συσκευάζοντας τον κώδικα σας και προσαρτώντας τα μεταδεδομένα.
- Έναρξη καταγραφής χρονοδιαγράμματος: Καταγράφει μια σειρά στοιχείων, συμπεριλαμβανομένων των αιτημάτων δικτύου, εκτέλεσης JavaScript, απόδοση σελίδας και άλλα συμβάντα για μια περίοδο καθορισμένη από τον χρήστη, όλα όσα μπορούν να προβληθούν στο πλαίσιο του επιθεωρητή WebKit.
- Empty Caches: Κάνοντας κλικ σε αυτήν την επιλογή διαγράφονται όλες οι αποθηκευμένες cache μέσα στο Safari, όχι μόνο τα τυπικά αρχεία cache του ιστότοπου.
- Απενεργοποίηση προσωρινών αποθηκευτικών χώρων: Με την απενεργοποίηση προσωρινής αποθήκευσης, οι πηγές μεταφορτώνονται από έναν ιστότοπο κάθε φορά που γίνεται μια αίτηση πρόσβασης σε αντίθεση με τη χρήση της τοπικής μνήμης cache.
- Να επιτρέπεται η JavaScript από το πεδίο έξυπνης αναζήτησης: Απενεργοποιημένη από προεπιλογή για λόγους ασφαλείας, αυτή η λειτουργία σάς επιτρέπει να εισάγετε διευθύνσεις URL που περιέχουν javascript: στη γραμμή διευθύνσεων του Safari.
- Αντιμετώπιση των πιστοποιητικών SHA-1 ως μη ασφαλή: Σύντομη για τον ασφαλή αλγόριθμο ασφάλειας, η λειτουργία hash SHA-1 έχει αποδειχθεί ότι είναι λιγότερο ασφαλής από ό, τι αρχικά νόμιζε, εξ ου και η προσθήκη αυτής της επιλογής στο Safari 9.
Σχετική ανάγνωση
Αν βρήκατε χρήσιμο αυτό το σεμινάριο, φροντίστε να ελέγξετε τις άλλες ανασκοπήσεις του Safari 9.
- Πώς να διαχειριστείτε τις ειδοποιήσεις προώθησης ιστότοπου
- Πώς να εξάγετε μια ιστοσελίδα σε ένα αρχείο PDF
- Πώς να ρυθμίσετε τις παραμέτρους του Safari 9 για αυτόματη ενημέρωση
- Πώς να χρησιμοποιήσετε τη λειτουργία Pinned Sites