Uma nuvem de tags é uma representação visual de uma lista de itens. Você frequentemente verá nuvens de tags em blogs. Foi popularizado por sites como o Flickr.
As nuvens de tags são uma lista de links que mudam de tamanho e peso (às vezes, cor também) dependendo de algum atributo mensurável. A maioria das nuvens de tags é criada com base na popularidade ou no número de páginas marcadas com essa tag específica. Mas você pode criar uma nuvem de tags a partir de qualquer lista de itens em seu site que tenha pelo menos duas maneiras de exibi-los. Por exemplo:
- Uma lista de artigos em ordem alfabética com os estilos indicando a popularidade dos artigos.
- Uma lista de sites da Web em ordem alfabética com os estilos que indicam quais você gosta mais.
- Uma lista de editores da Web listados em ordem de preço com os estilos indicando como cada um deles chega a um conjunto predefinido de critérios.
- Uma lista de amigos com os estilos indicando a distância da sua casa até a deles.
O que você precisa para construir uma nuvem de tags?
É fácil criar uma nuvem de tags, você só precisa de duas coisas:
- Uma lista de itens (como artigos da Web, sites da Web ou seus amigos)
- Uma medida para cada um dos itens (como visualizações de página por dia, sua classificação de 1 a 10 ou a distância até sua casa).
A maioria das nuvens de tags são listas de links, portanto, é útil se cada item tiver um URL associado a ele. Mas isso não é necessário para criar uma hierarquia visual.
Passos para construir uma nuvem de tags de links populares
Nosso site tem artigos que recebem exibições de página todos os dias, e essa é uma métrica fácil de usar para criar uma nuvem de tags. Portanto, para este exemplo, criaremos uma nuvem de tags a partir de uma lista de artigos, os 25 principais artigos do meu site na semana de 1º de janeiro de 2007.
-
Determine quantos níveis você deseja em sua hierarquia.
Embora seja possível ter tantos níveis em sua nuvem quanto itens na sua lista, isso é tedioso para o código, e as diferenças podem ser mínimas. Eu recomendo não ter mais de 10 níveis em sua hierarquia.
-
Decida os pontos de corte para cada nível.
Pode ser tão simples quanto cortar as exibições de página por dia em fatias de 1/10 - ou seja, Se a maior página do seu site receber 100 exibições de página por dia, você pode segmentá-la como 100+, 90-100, 80-90, 70-80 etc. Eu cortei minhas visualizações de página dessa maneira.
-
Listar seus itens na ordem de exibição da página e dar a eles uma classificação com base na etapa 2
Não se preocupe se você não tiver nenhum item em alguns dos slots, isso só torna a nuvem mais interessante.
-
Recorra sua lista em ordem alfabética (ou qualquer segundo tipo que você deseja usar).
É isso que torna a nuvem interessante. Se você deixá-lo classificado por classificação, será apenas uma lista com os maiores itens na parte superior até o menor na parte inferior.
-
Escreva seu HTML para que a classificação seja um número de classe.
class = "tag4"> Adicionando arquivos de áudio streaming
-
É isso aí!
Depois de ter o HTML para cada item da lista individual e a ordem em que você deseja exibi-los, será necessário tomar uma decisão. Você pode colocar os links em um parágrafo e você estaria pronto. Mas isso não seria semanticamente marcado, e qualquer pessoa sem CSS que chegasse à sua nuvem de tags só veria um grande parágrafo de links. O HTML para esse tipo de lista ficaria assim:
Em vez disso, recomendamos que você crie sua nuvem de tags usando uma lista não ordenada. São mais algumas linhas de código HTML e CSS, mas garante que o conteúdo seja legível, independentemente de quem venha a visualizá-lo. O HTML ficaria assim:
Mas onde estão os estilos para a nuvem de tags?
Agora chegamos à parte divertida - os estilos CSS. Quando você estiliza uma nuvem de tags, normalmente você altera o tamanho da fonte e o peso da fonte. Você também pode alterar a cor da fonte ou do plano de fundo ou qualquer outro atributo de estilo, mas o tamanho e o peso são tradicionais.
Você precisa de 10 classes de estilo, uma para cada classificação de tag:
Gostamos de incluir alguns estilos em torno da própria nuvem: centralize o texto da nuvem, defina uma altura de linha para que a nuvem seja legível e verifique se as tags de âncora não têm preenchimento nelas:
Finalmente, se você estiver usando o método de estilo semântico (ou seja, a lista não ordenada), você precisará adicionar mais duas linhas de CSS para que a lista não tenha marcadores e não seja recuada:
