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

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

Ποιο είναι το χρώμα;

ColorZilla

Αρχικά δημιουργήθηκε για τον Firefox, το ColorZilla έχει πλέον διατεθεί στο Chrome και στα σχετικά προγράμματα περιήγησης.

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

Ποια είναι η γραμματοσειρά;

WhatFont; (Χρώμιο)

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

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

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

Αναζήτηση γραμματοσειράς (Firefox)

Μια αποκλειστική επέκταση του Firefox στο ίδιο πνεύμα με το WhatFont του Chrome;

Εγκαταστήστε την επέκταση και θα έχετε μια νέα επιλογή στο μενού δεξί κλικ.

Όταν βρείτε κάτι που θέλετε να ταυτιστεί, επισημάνετε το και στη συνέχεια να εμφανίσετε τις επιλογές που έχετε στη διάθεσή σας. Το "Analyze Selection" θα σας πει όλα όσα θέλατε να μάθετε.

Η λεπτομέρεια που παρέχει δεν είναι τίποτα λιγότερο από τη σιαγόνα. Αν το κείμενο έχει επισημανθεί ως "(stack)" τότε θα επιλέξει την πρώτη γραμματοσειρά στη στοίβα που έχετε εγκαταστήσει. Οι στοίβες συνήθως τελειώνουν με έναν γενικό όρο, όπως το "sans-serif" στο παραπάνω παράδειγμα. Στην απίθανη περίπτωση που δεν έχει εγκατασταθεί μία από τις άλλες γραμματοσειρές στη στοίβα, θα πέσει πίσω στο προεπιλεγμένο πρόσωπο sans-serif του συστήματός σας.

Μπορείτε επίσης να προσαρμόσετε τα στοιχεία μέσω της επιλογής "Προσαρμογή στοιχείου". Μόλις η επέκταση σας ζητήσει να εισαγάγετε μια οικογένεια γραμματοσειρών, μπορείτε να πάτε άγρια. Στο παράδειγμά μας αλλάξαμε σχεδόν κάθε γραμματοσειρά στη Wikipedia σε κάτι διαφορετικό, δημιουργώντας το παράξενο mash-up που εμφανίζεται. Αυτές οι αλλαγές δεν είναι μόνιμες και εξαφανίζονται όταν φορτώνετε ξανά τη σελίδα.

Η επιλογή "Replace font (whole DOM)" σάς επιτρέπει να αλλάξετε κάθε εμφάνιση γραμματοσειράς στη σελίδα. Δεν είναι οπαδός του Roboto (ο οποίος χρησιμοποιούμε ως κύριο sans-serif); Επισημάνετε αυτήν την επιλογή, κάντε κλικ στο "Roboto" από τη λίστα των γραμματοσειρών που υπάρχουν στη σελίδα και εισαγάγετε το όνομα της γραμματοσειράς που προτιμάτε να δείτε. Και πάλι, δεν είναι μόνιμο, αλλά σας επιτρέπει να παίξετε με το σχεδιασμό των αγαπημένων σας ιστοσελίδων, έστω και προσωρινά.

Μέτρηση ιστότοπου

Χάρακας σελίδας (Chrome)

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

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

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

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

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

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

MeasureIt (Firefox και Chrome)

MeasureIt κάνει την ίδια εργασία με το Page Ruler και είναι διαθέσιμη τόσο για τον Firefox όσο και για το Chrome.

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

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

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

συμπέρασμα

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

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