Ett taggmoln är en visuell bild av en lista med objekt. Du ser ofta taggmoln på bloggar. Den blev populär bland webbplatser som Flickr.
Taggmoln är en lista med länkar som ändras i storlek och vikt (ibland även färg) beroende på vissa mätbara attribut. De flesta taggmoln bygger på popularitet eller antalet sidor som taggats med den vissa taggen. Men du kan skapa ett taggmoln ur någon lista över objekt på din webbplats som har minst två sätt att visa dem. Till exempel:
- En lista med artiklar i alfabetisk ordning med stilar som indikerar artiklarnas popularitet.
- En lista över webbplatser i alfabetisk ordning med stilar som indikerar vilka som du gillar bäst.
- En lista över webbredaktörer listade i prisordning med stilar som anger hur nära var och en kommer till en fördefinierad uppsättning kriterier.
- En lista över vänner med stilar som anger avståndet från ditt hus till deras.
Vad behöver du för att bygga ett tag Cloud?
Det är lätt att bygga ett taggmoln, du behöver bara två saker:
- En lista över objekt (som webbartiklar, webbplatser eller dina vänner)
- En mätning för var och en av föremålen (som sidvisningar per dag, din rankning 1-10, eller avståndet till ditt hus).
De flesta taggmoln är listor med länkar, så det hjälper om varje objekt har en webbadress som är associerad med den. Men det är inte nödvändigt att skapa en visuell hierarki.
Steg för att bygga ett tagg Cloud av populära länkar
Vår webbplats har artiklar som får sidvisningar varje dag, och det här är en enkel metod för att vi ska kunna använda för att skapa ett taggmoln. Så för det här exemplet skapar vi ett taggmoln från en lista med artiklar, de 25 bästa artiklarna på min webbplats för veckan den 1 januari 2007.
-
Bestäm hur många nivåer du vill ha i din hierarki.
Även om det är möjligt att ha så många nivåer i ditt moln som du har saker i din lista, blir det tråkigt att koda, och skillnaderna kan vara mycket minimala. Jag rekommenderar att du inte har mer än 10 nivåer i din hierarki.
-
Bestäm avgränsningspunkterna för varje nivå.
Det kan vara så enkelt att klippa dina sidvisningar per dag i 1/10 skivor - dvs. Om den största sidan på din webbplats får 100 sidvisningar per dag kan du skära den som 100+, 90-100, 80-90, 70-80 etc. Jag hackade min sidvisningar upp på det sättet.
-
Lista dina objekt i sidvisningsordning och ge dem en rang baserat på steg 2
Oroa dig inte om du inte har några föremål i några slots, vilket bara gör molnet mer intressant.
-
Ange din lista i alfabetisk ordning (eller vilken annan typ du vill använda).
Det här är det som gör molnet intressant. Om du lämnar den sorterad efter rank, så blir det bara en lista med de största objekten längst ner till den minsta längst ner.
-
Skriv din HTML så att rankningen är ett klassnummer.
class = "tag4"> Lägga till streaming ljudfiler
-
Det är allt!
När du har HTML för varje enskild listobjekt, och den ordning du vill visa dem, måste du fatta ett beslut. Du kan placera länkarna i ett stycke och du skulle göra det. Men detta skulle inte vara semantiskt markerat, och alla utan CSS som kommer till ditt taggmoln skulle bara se ett stort stycke länkar. HTML för den här typen av lista skulle se ut så här:
Istället rekommenderar vi att du skapar ditt taggmoln med en oorderad lista. Det är några få rader av HTML- och CSS-kod, men det säkerställer att innehållet kommer att läsas oavsett vem som kommer att se det. HTML skulle se ut så här:
Men var är stilerna för taggmoln
Nu kommer vi till den roliga delen - CSS-stilar. När du utformar ett taggmoln ändrar du vanligtvis teckensnittstorleken och typsnittets vikt. Du kan också ändra färg på teckensnittet eller bakgrunden eller något annat stilattribut, men storlek och vikt är traditionella.
Du behöver 10 stilklasser, en för varje tagrankning:
Vi gillar att inkludera vissa stilar runt molnet själv: centrera molntexten, sätt in en linjemängd så att molnet är läsbart och se till att ankarkorgen inte har någon fyllning på dem:
Slutligen, om du använder den semantiska stylingmetoden (dvs. den oordnade listan) måste du lägga till två rader av CSS så att listan inte har kulor och inte är indragad:
