Chmura znaczników to wizualne przedstawienie listy przedmiotów. Często będziesz widzieć chmury tagów na blogach. Stało się popularne wśród witryn takich jak Flickr.
Chmury znaczników to lista linków, które zmieniają swój rozmiar i wagę (czasem także kolor) w zależności od mierzalnego atrybutu. Większość chmur tagów jest budowana na podstawie popularności lub liczby stron oznaczonych tym tagiem. Ale możesz utworzyć chmurę znaczników z dowolnej listy elementów w swojej witrynie, które mają co najmniej dwa sposoby ich wyświetlania. Na przykład:
- Lista artykułów w porządku alfabetycznym ze stylami wskazującymi popularność artykułów.
- Lista stron internetowych w kolejności alfabetycznej ze stylami wskazującymi, które najbardziej ci się podobają.
- Lista edytorów internetowych wymienionych w porządku cenowym ze stylami wskazującymi, jak blisko każdego z nich znajduje się określony zestaw kryteriów.
- Lista znajomych ze stylami wskazującymi odległość od domu do ich.
Co jest potrzebne do zbudowania chmury tagów?
Łatwo jest zbudować chmurę znaczników, potrzebujesz tylko dwóch rzeczy:
- Lista przedmiotów (takich jak artykuły internetowe, strony internetowe lub znajomi)
- Pomiar każdego z elementów (np. Odsłony dziennie, ranking 1-10 lub odległość do domu).
Większość chmur znaczników to listy linków, więc pomaga, jeśli każdy element ma powiązany z nim adres URL. Ale nie jest to wymagane do stworzenia hierarchii wizualnej.
Kroki budowania chmury tagów popularnych linków
Nasza witryna zawiera artykuły, które codziennie zbierają wyświetlenia strony i jest to łatwy wskaźnik do wykorzystania w celu utworzenia chmury tagów. Tak więc dla tego przykładu utworzymy chmurę znaczników z listy artykułów, 25 najważniejszych artykułów w mojej witrynie w tygodniu 1 stycznia 2007 roku.
-
Określ, ile poziomów chcesz w swojej hierarchii.
Chociaż istnieje możliwość posiadania tylu poziomów w swojej chmurze, ile masz pozycji na liście, jest to nużące do kodowania, a różnice mogą być bardzo minimalne. Polecam mieć nie więcej niż 10 poziomów w twojej hierarchii.
-
Wybierz punkty odcięcia dla każdego poziomu.
Może to być tak proste, jak zmniejszenie liczby wyświetleń strony dziennie do 1/10 plasterków - np. jeśli największa strona w Twojej witrynie ma 100 odsłon dziennie, możesz ją pokroić na 100+, 90-100, 80-90, 70-80 itd. W ten sposób podciąłem moją stronę.
-
Wyświetlaj swoje pozycje w kolejności wyświetlania stron i nadaj im pozycję w oparciu o krok 2
Nie martw się, jeśli nie masz żadnych przedmiotów w niektórych automatach, to tylko sprawia, że chmura jest bardziej interesująca.
-
Ułóż swoją listę w porządku alfabetycznym (lub innym sortowaniu, którego chcesz użyć).
To właśnie sprawia, że chmura jest interesująca. Jeśli zostawisz to posortowane według rangi, będzie to po prostu lista z największymi przedmiotami od góry w dół do najmniejszego na dole.
-
Napisz swój kod HTML, aby ranga była numerem klasy.
class = "tag4"> Dodawanie strumieniowych plików audio
-
To jest to!
Po utworzeniu kodu HTML dla każdego elementu listy i kolejności, w jakiej chcesz je wyświetlić, musisz podjąć decyzję. Możesz umieścić linki w akapicie i skończysz. Ale nie byłoby to zaznaczone semantycznie, a każdy, kto nie ma CSS przychodzących do chmury tagów, zobaczyłby tylko duży akapit linków. Kod HTML tego typu listy wyglądałby tak:
Zamiast tego zalecamy utworzenie chmury tagów przy użyciu nieuporządkowanej listy. To jeszcze kilka linii kodu HTML i CSS, ale zapewnia, że treść będzie czytelna, bez względu na to, kto ją obejrzy. HTML wyglądałby tak:
Ale gdzie są style dla chmury tagów
Teraz przechodzimy do zabawnej części - stylów CSS. Podczas projektowania chmury tagów zazwyczaj zmienia się rozmiar czcionki i jej grubość. Możesz także zmienić kolor czcionki lub tła lub dowolnego innego atrybutu stylu, ale rozmiar i waga są tradycyjne.
Potrzebujesz 10 klas stylów, po jednej dla każdej kategorii tagów:
Chcemy uwzględnić kilka stylów wokół samej chmury: wyśrodkuj tekst chmury, ustaw wysokość linii, aby chmura była czytelna, i upewnij się, że znaczniki zakotwiczenia nie mają na nich dopełnienia:
Na koniec, jeśli używasz semantycznej metody stylizacji (tj. Listy nieuporządkowanej), musisz dodać dwa kolejne wiersze CSS, aby lista nie zawierała punktorów i nie była wcięta:
