Πώς να σχεδιάσετε ένα Cloud Tag

Χρησιμοποιήστε το CSS για να κάνετε στυλ σε ένα σύννεφο ετικετών

Το cloud tag είναι μια οπτική απεικόνιση μιας λίστας αντικειμένων. Θα δείτε συχνά σύννεφα ετικετών σε ιστολόγια. Έγινε δημοφιλής από ιστότοπους όπως το Flickr.

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

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

Τι χρειάζεστε για να δημιουργήσετε ένα σύννεφο ετικετών;

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

• Μια λίστα στοιχείων (όπως τα άρθρα στο Web, οι ιστότοποι ή οι φίλοι σας)
• Μια μέτρηση για κάθε στοιχείο (όπως προβολές σελίδας ανά ημέρα, κατάταξη 1-10 ή απόσταση από το σπίτι σας).

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

Βήματα για τη δημιουργία ενός νέφους ετικετών δημοφιλών συνδέσεων

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

1. Καθορίστε πόσα επίπεδα θέλετε στην ιεραρχία σας.
   1. Ενώ είναι δυνατόν να έχετε τόσα πολλά επίπεδα στο σύννεφό σας, καθώς έχετε στοιχεία στη λίστα σας, αυτό γίνεται κουραστικό για τον κώδικα και οι διαφορές μπορεί να είναι πολύ ελάχιστες. Σας προτείνω να έχετε πάνω από 10 επίπεδα στην ιεραρχία σας.
2. Αποφασίστε για τα σημεία αποκοπής για κάθε επίπεδο.
   1. Μπορεί να είναι τόσο απλό όσο να κόβετε τις προβολές της σελίδας σας ανά ημέρα σε 1/10 φέτες - δηλαδή. αν η μεγαλύτερη σελίδα στον ιστότοπό σας έχει 100 προβολές σελίδων ημερησίως, θα μπορούσατε να το φέρετε ως 100+, 90-100, 80-90, 70-80, κλπ. Έκοψα τις προβολές της σελίδας μου με αυτόν τον τρόπο.
3. Καταχωρίστε τα στοιχεία σας στη σειρά προβολής σελίδας και δώστε τους μια κατάταξη με βάση το βήμα 2
   1. Μην ανησυχείτε αν δεν έχετε κάποια στοιχεία σε μερικά από τα slots, που κάνει το σύννεφο πιο ενδιαφέρον.
4. Περιορίστε τη λίστα σας με αλφαβητική σειρά (ή ό, τι δεύτερο είδος θέλετε να χρησιμοποιήσετε).
   1. Αυτό κάνει το σύννεφο ενδιαφέρον. Εάν το αφήσετε ταξινομημένο κατά βαθμό, τότε θα είναι απλά ένας κατάλογος με τα μεγαλύτερα αντικείμενα στην κορυφή προς τα κάτω στο μικρότερο στο κάτω μέρος.
5. Γράψτε τον κώδικα HTML έτσι ώστε η κατάταξη να είναι ένας αριθμός κλάσης. class = "tag4"> Προσθέτοντας Streaming Audio Files

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

Προσθήκη αρχείων ροής ήχου Βασικές ετικέτες για έναν ιστότοπο Best Software Design Δημιουργία ιστοσελίδας για το Total Lost Σύμβολο χρώματος a>

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

• Προσθήκη αρχείων συνεχούς ροής
• Καλύτερο Λογισμικό Σχεδιασμού Ιστού
• Δημιουργία ιστοσελίδας για το Πλήρως Χαμένο
• Σύμβολο χρώματος

  Αλλά πού είναι τα στυλ για το Cloud Tag

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

  Χρειάζεστε 10 τάξεις στυλ, ένα για κάθε τάξη ετικετών:

  #cloud a.tag1 {γραμματοσειρά: 0,7εμ. γραμματοσειράς-βάρους: 100; } #cloud a.tag2 {μέγεθος γραμματοσειράς: 0,8εμ. γραμματοσειράς: 200; } #cloud a.tag3 {μέγεθος γραμματοσειράς: 0,9em; γραμμικό βάρος: 300; } #cloud a.tag4 {font-size: 1.0em; γραμματοσειράς-βάρος: 400; } #cloud a.tag5 {font-size: 1.2em; γραμματοσειρά-βάρος: 500; } #cloud a.tag6 {γραμματοσειρά: 1.4μ; γραμματοσειράς-βάρος: 600; } #cloud a.tag7 {μέγεθος γραμματοσειράς: 1.6em; γραμματοσειρά-βάρος: 700; } #cloud a.tag8 {γραμματοσειρά-μέγεθος: 1.8εμ. γραμματοσειράς-βάρος: 800; } #cloud a.tag9 {font-size: 2.2em; γραμματοσειράς-βάρος: 900; } #cloud a.tag10 {font-size: 2.5em; γραμματοσειράς-βάρος: 900; }}

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

  #cloud {padding: 2px; γραμμή-ύψος: 3em; κείμενο-ευθυγράμμιση: κέντρο; } #cloud α {padding: 0px; }}

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

  #cloud {margin: 0; } #cloud li {εμφάνιση: inline; }}