Een tagwolk is een visuele weergave van een lijst met items. Je zult vaak tag clouds zien op blogs. Het werd populair gemaakt door sites zoals Flickr.
Tagwolken zijn een lijst met links die in grootte en gewicht veranderen (soms ook in kleur), afhankelijk van een meetbaar attribuut. De meeste tag clouds worden gebouwd op basis van populariteit of het aantal pagina's dat is getagd met die bepaalde tag. U kunt echter een tagwolk maken uit elke lijst met items op uw site die minimaal twee manieren heeft om ze weer te geven. Bijvoorbeeld:
- Een lijst met artikelen in alfabetische volgorde met de stijlen die de populariteit van de artikelen aangeven.
- Een lijst met websites in alfabetische volgorde met de stijlen die aangeven welke u het beste bevalt.
- Een lijst met Web-editors die in prijsvolgorde worden vermeld, met de stijlen die aangeven hoe dicht ze bij elk van de vooraf gedefinieerde set criteria komen.
- Een lijst met vrienden met de stijlen die de afstand van uw huis tot die van hen aangeeft.
Wat heb je nodig om een Tag Cloud te bouwen?
Het is gemakkelijk om een tagwolk te bouwen, je hebt slechts twee dingen nodig:
- Een lijst met items (zoals webartikelen, websites of uw vrienden)
- Een meting voor elk van de items (zoals paginaweergaven per dag, uw positie 1-10 of de afstand tot uw huis).
De meeste tag clouds zijn lijsten met links, dus het helpt als aan elk item een URL is gekoppeld. Maar dat is niet vereist om een visuele hiërarchie te creëren.
Stappen voor het bouwen van een tag Cloud met populaire links
Onze site bevat artikelen die elke dag pageviews krijgen, en dit is een eenvoudige statistiek waarmee we een tagwolk kunnen maken. Dus voor dit voorbeeld maken we een tagwolk uit een lijst met artikelen, de 25 beste artikelen op mijn site voor de week van 1 januari 2007.
-
Bepaal hoeveel niveaus u in uw hiërarchie wilt.
Hoewel het mogelijk is om evenveel niveaus in uw cloud te hebben als items in uw lijst, wordt dit vervelend om te coderen en kunnen de verschillen zeer minimaal zijn. Ik raad aan om niet meer dan 10 niveaus in je hiërarchie te hebben.
-
Bepaal de afkappunten voor elk niveau.
Het is misschien zo simpel als het knippen van uw pageviews per dag in 1/10 plakjes - dat wil zeggen. als de grootste pagina van uw site 100 paginaweergaves per dag krijgt, kunt u deze splitsen als 100+, 90-100, 80-90, 70-80, enz. Ik heb mijn pageviews op die manier ingekort.
-
Vermeld uw items in paginavolgorde en geef ze een rangorde op basis van stap 2
Maakt u zich geen zorgen als u geen items in een van de slots heeft, dat maakt de cloud alleen maar interessanter.
-
Plaats uw lijst in alfabetische volgorde (of welke tweede soort u ook wilt gebruiken).
Dit maakt de cloud interessant. Als je het gesorteerd op rang laat staan, dan is het gewoon een lijst met de grootste items bovenaan en onderaan de kleinste.
-
Schrijf uw HTML zodat de rang een klassenummer is.
class = "tag4"> Streaming-audiobestanden toevoegen
-
Dat is het!
Zodra u de HTML hebt voor elk afzonderlijk item in de lijst en de volgorde waarin u ze wilt weergeven, moet u een beslissing nemen. Je kunt de links in een alinea plaatsen en je bent klaar. Maar dit zou niet semantisch worden gemarkeerd en iedereen zonder CSS die naar uw tagwolk zou komen, zou gewoon een grote paragraaf met koppelingen zien. De HTML voor dit type lijst ziet er als volgt uit:
In plaats daarvan raden we u aan uw tagwolk te maken met een ongeordende lijst. Het is nog een paar regels HTML- en CSS-code, maar het zorgt ervoor dat de inhoud leesbaar is, ongeacht wie hem te zien krijgt. De HTML zou er als volgt uitzien:
Maar waar zijn de stijlen voor de Tag Cloud
Nu komen we bij het leuke gedeelte - de CSS-stijlen. Wanneer u een tagwolk opmaakt, wijzigt u meestal de tekengrootte en het lettertypegewicht. U kunt ook de kleur van het lettertype of de achtergrond of een ander stijlkenmerk wijzigen, maar de grootte en het gewicht zijn traditioneel.
U hebt 10 stijlklassen nodig, één voor elke tagrang:
We willen graag enkele stijlen rond de cloud zelf opnemen: centreren de wolkentekst, stellen een regelhoogte in zodat de wolk leesbaar is en zorgen ervoor dat de ankertags geen opvulling bevatten:
Ten slotte, als u de semantische stijlmethode gebruikt (dwz de ongeordende lijst), moet u nog twee regels CSS toevoegen, zodat de lijst geen opsommingstekens bevat en niet inspringt:
