En tagsky er en visuell fremstilling av en liste over elementer. Du vil ofte se taggskyger på blogger. Det ble gjort populært av nettsteder som Flickr.
Merkeskyer er en liste over lenker som endres i størrelse og vekt (noen ganger også farge) avhengig av noen målbare attributter. De fleste merkeskyer er bygget basert på popularitet eller antall sider som er merket med den aktuelle taggen. Men du kan lage en taggsky ut av en liste over elementer på nettstedet ditt som har minst to måter å vise dem på. For eksempel:
- En liste over artikler i alfabetisk rekkefølge med stilene som viser populariteten til artiklene.
- En liste over nettsteder i alfabetisk rekkefølge med stilene som indikerer hvilke du liker best.
- En liste over webredaktører oppført i prisordre med stilene som indikerer hvor nær hver kommer til et forhåndsdefinert sett med kriterier.
- En liste over venner med stilene som viser avstanden fra huset ditt til deres.
Hva trenger du å bygge en Tag Cloud?
Det er lett å bygge en tag-sky, du trenger bare to ting:
- En liste over elementer (som Web-artikler, nettsteder eller dine venner)
- En måling for hver av elementene (som sidevisninger per dag, rangering 1-10 din, eller avstanden til huset ditt).
De fleste taggskyger er lister over lenker, så det hjelper hvis hvert element har en nettadresse som er tilknyttet den. Men det er ikke nødvendig å lage et visuelt hierarki.
Trinn for å bygge en Tag Cloud av populære linker
Vår side har artikler som får sidevisninger hver dag, og dette er en enkel måling for oss å bruke til å lage en taggsky. Så for dette eksempelet vil vi opprette en taggsky fra en liste over artikler, de 25 beste artiklene på nettstedet mitt for uken 1. januar 2007.
-
Bestem hvor mange nivåer du vil ha i ditt hierarki.
Mens det er mulig å ha så mange nivåer i skyen som du har elementer i listen din, blir det kjedelig å kode, og forskjellene kan være svært små. Jeg anbefaler at du ikke har mer enn 10 nivåer i ditt hierarki.
-
Bestem på avkryssingspunkter for hvert nivå.
Det kan være så enkelt som å kutte sidevisninger per dag i 1/10 skiver - dvs. Hvis den største siden på nettstedet ditt får 100 sidevisninger om dagen, kan du kutte det som 100+, 90-100, 80-90, 70-80 osv. Jeg hakket sidevisninger opp på den måten.
-
Legg opp elementene dine i sidevisning, og gi dem en rangering basert på trinn 2
Ikke bekymre deg hvis du ikke har noen elementer i noen av sporene, som bare gjør skyen mer interessant.
-
Legg ut listen din i alfabetisk rekkefølge (eller hvilken som helst annen type du vil bruke).
Dette er det som gjør skyen interessant. Hvis du lar det sorteres etter rang, så vil det bare være en liste med de største elementene øverst ned til det minste nederst.
-
Skriv din HTML slik at rangen er et klassenummer.
class = "tag4"> Legge til streaming lydfiler
-
Det er det!
Når du har HTML for hvert enkelt listeelement, og bestillingen du vil vise dem, må du ta en avgjørelse. Du kan plassere linkene i et avsnitt, og du vil bli gjort. Men dette ville ikke være semantisk merket, og alle uten CSS som kom til taggskyen din, ville bare se et stort avsnitt med lenker. HTML for denne typen liste ser slik ut:
I stedet anbefaler vi at du oppretter taggskyven din ved hjelp av en uordnet liste. Det er noen få linjer med HTML- og CSS-kode, men det sikrer at innholdet blir lesbart uansett hvem som kommer til å se det. HTML-en vil se slik ut:
Men hvor er stilene for Tag Cloud
Nå kommer vi til den morsomme delen - CSS-stilene. Når du stiler en taggsky, endrer du vanligvis skriftstørrelsen og skriftvekten. Du kan også endre fargen på skrifttypen eller bakgrunnen eller et annet stilattributt, men størrelse og vekt er tradisjonelle.
Du trenger 10 stilklasser, en for hver tagrangering:
Vi liker å inkludere noen stiler rundt selve skyen: sentrere skyteksten, sett en linjehøyde slik at skyen er lesbar, og sørg for at ankeretikettene ikke har polstring på dem:
Til slutt, hvis du bruker den semantiske stylingsmetoden (dvs. den uordnede listen), må du legge til to flere linjer med CSS slik at listen ikke har kuler og ikke er innrykket:
