En tag cloud er en visuel illustration af en liste over elementer. Du vil ofte se tag clouds på blogs. Det blev gjort populært af steder som Flickr.
Tag clouds er en liste over links, der ændrer sig i størrelse og vægt (også i nogle farver) afhængigt af nogle målbare attributter. De fleste tag clouds er bygget baseret på popularitet eller antallet af sider, der er tagget med det pågældende tag. Men du kan oprette en tag-sky ud af en liste over elementer på dit websted, der har mindst to måder at vise dem på. For eksempel:
- En liste over artikler i alfabetisk rækkefølge med de stilarter, der angiver artiklernes popularitet.
- En liste over websteder i alfabetisk rækkefølge med de stilarter, der angiver, hvilke du kan lide det bedste.
- En liste over webredaktører angivet i prisordre med stilarterne, der angiver, hvor tæt hver kommer til et foruddefineret sæt kriterier.
- En liste over venner med stilarterne, der angiver afstanden fra dit hus til deres.
Hvad skal du opbygge en tag Cloud?
Det er nemt at opbygge en tag cloud, du har kun brug for to ting:
- En liste over emner (som Web-artikler, websteder eller dine venner)
- En måling for hver af de elementer (som sidevisninger pr. Dag, din rangering 1-10, eller afstanden til dit hus).
De fleste tag clouds er lister over links, så det hjælper, hvis hvert element har en webadresse tilknyttet den. Men det er ikke nødvendigt at skabe et visuelt hierarki.
Skridt til at opbygge en Tag Cloud af populære links
Vores websted har artikler, der får sidevisninger hver dag, og det er en nem måling, som vi kan bruge til at oprette en tagsky. Så for dette eksempel opretter vi en tag-sky fra en liste over artikler, de 25 bedste artikler på mit websted for ugen den 1. januar 2007.
-
Bestem, hvor mange niveauer du vil have i dit hierarki.
Mens det er muligt at have så mange niveauer i din sky som du har elementer i din liste, bliver det kedeligt at kode, og forskellene kan være meget minimal. Jeg anbefaler at have ikke mere end 10 niveauer i dit hierarki.
-
Bestem på afkrydsningspunkterne for hvert niveau.
Det kan være lige så enkelt som at skære dine sidevisninger om dagen i 1/10 skiver - dvs. hvis den største side på dit websted får 100 sidevisninger om dagen, kan du skære det som 100+, 90-100, 80-90, 70-80 osv. Jeg hakede mine sidevisninger op på den måde.
-
Skriv dine varer i sidevisning, og giv dem en rang baseret på trin 2
Bare rolig, hvis du ikke har nogle ting i nogle af slots, der bare gør skyen mere interessant.
-
Angiv din liste i alfabetisk rækkefølge (eller hvilken anden slags du vil bruge).
Det er det der gør skyen interessant. Hvis du forlader det sorteret efter rang, så vil det bare være en liste med de største genstande øverst ned til den mindste nederst.
-
Skriv din HTML, så rankingen er et klassenummer.
class = "tag4"> Tilføjelse af streaming lydfiler
-
Det er det!
Når du har HTML for hver enkelt liste, og den rækkefølge, du vil vise dem, skal du træffe en beslutning. Du kan placere linksne i et afsnit, og du ville være færdig. Men dette ville ikke være semantisk markeret, og alle uden CSS, der kom til din tag cloud, ville bare se et stort stykke links. HTML'en for denne type liste vil se sådan ud:
I stedet anbefaler vi, at du opretter din tagsky ved hjælp af en uordnet liste. Det er nogle få linjer af HTML og CSS kode, men det sikrer, at indholdet bliver læseligt, uanset hvem der kommer til at se det. HTML'en vil se sådan ud:
Men hvor er stilen til tag clouden
Nu kommer vi til den sjove del - CSS stilarterne. Når du skriver en tag-sky, ændrer du normalt skriftstørrelsen og skrifttypens vægt. Du kan også ændre farven på skrifttypen eller baggrunden eller en anden stilattribut, men størrelse og vægt er traditionelle.
Du har brug for 10 stilklasser, en for hver tagplacering:
Vi kan godt lide at inkludere nogle stilarter omkring selve skyen: centrere skyteksten, indstil en linjestørrelse, så skyen er læsbar, og sørg for, at ankeretiketterne ikke har polstring på dem:
Endelig, hvis du bruger den semantiske styling metode (dvs. den uordnede liste), skal du tilføje to flere linjer af CSS, så listen ikke har kugler og ikke er indrykket:
