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

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

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

Web Developer

Κατασκοπεία οθόνης για προγραμματιστές ιστού Αν και ονομάζεται Web Developer , αυτό το πρόσθετο του Firefox είναι απολύτως ανεκτίμητο για τους σχεδιαστές ιστοσελίδων. Εάν επρόκειτο να κατεβάσετε και να εγκαταστήσετε μόνο ένα πρόσθετο Firefox, αυτό είναι αυτό που θα σας συνιστούσα. Ο λόγος είναι ότι αυτό το πρόσθετο παρέχει μια ποικιλία διαφορετικών χρήσιμων χαρακτηριστικών και θα μπορούσε να χαρακτηριστεί ως το πρόσθετο του Swiss Army Knife των Firefox .

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

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

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

Firebug

Ενώ ο Web Developer είναι το πρώτο add-on θα συνιστούσα σε κάθε σχεδιαστή, Firebug τρέχει ένα δευτερόλεπτο από την άποψη της χρησιμότητας για τους σχεδιαστές.

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

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

Colorzilla

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

Αν θέλετε έναν γρήγορο και αποτελεσματικό τρόπο για να μάθετε την ακριβή τιμή HSV και RGB για το συγκεκριμένο εργαλείο, θα πρέπει να εγκαταστήσετε το ColorZilla πρόσθετο.

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

FireShot

FireShot Screenshot

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

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

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

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

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

Validator CSS / Validator HTML

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

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

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

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

Ρυθμιστής παραθύρων του προγράμματος περιήγησης

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

Επειδή δεν γνωρίζετε αν ο επισκέπτης πρόκειται να δει την εργασία σας στα 640 × 480, 800 × 600, 1024 × 768, 1280 × 1024 ή 1600 × 1200, είναι δική σας ευθύνη να δημιουργήσετε σχέδια που να λειτουργούν σε όλες αυτές τις αναλύσεις .

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

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

Μάθετε για οποιεσδήποτε άλλες καλές επεκτάσεις για τους σχεδιαστές; Διστάσετε να σχολιάσετε και να μας αφήσετε σχόλια.