Skip navigation.

Pro memoria

Дневник, короче говоря...

Облако тегов - это просто

, , ,

Вы когда-нибдуь задумывались как работает облако тегов? Давайте помогу задуматься? Не бойтесь, тут нет ничего сложного. К сожалению, в рунете, как обычно, туго с информацией такого плана. Поверхностные поиски привели лишь на один интересный ресурс, где автор рассуждает на тему облака тегов. Ну, в РУнете нет, так в интернете будет - точно, википедия, как обычно, готова вам взахлеб рассказывать про tag cloud. Собственно, там есть линки, описание и всё подобное, я же на пальцах расскажу как это сделать.

Что по сути есть облако тегов? По сути это более наглядный список неких категорий, применительно к блогам - тем, которые освещены в рамках сайта. Собственно, справа вы как раз можете наблидать такое облако. Так как же сделать такое самому? Да очень просто!

Первое что надо понять - облако тегов такой же нормальный текст как и список, разница лишь в оформлении. Часто употребимое - большое и заметно, редкоупотребимое - мелкое. Тут поднимается первая задача: определить частоту использования. Это просто.

Выбираем все теги (из БД/файлов или как угодно еще), у меня из БД:
$result = mysql_query("SELECT `tags` FROM `$tb_dump` 
            ORDER BY `date_modified` DESC");
Если получается массив, как в моем случае, то собираем это в строку через некий знак, допустим, запятую:
while ($item = mysql_fetch_array($result))
   $dump_string .= $item["tags"].",";
Теперь у нас есть строка всех тегов, осталось их посчитать:
$dump_mas = explode(",", $dump_string);
while (list($key, $val) = each($dump_mas))
{  if (isset($mas[trim($val)]))
      $mas[$val]++;
   else
      $mas[$val] = 1;
}
Всё, у нас есть ассоциативный массив в котором ключ - это тег, а значение элемента - количество повторений. Чтобы вывести такое облако достаточно вывести массив. Для простоты я буду использовать высоту шрифта для индикации количества повторений:
while (list($key, $val) = each($mas))
   echo "<span style\"font-size:$val\">$key</span>";
Вот и всё облако. Ничего сложного, правда?

Остался только десяток-другой ньюансов :) Например, производительность: собирать строку из массива, чтобы потом опять разбирать в массив явно не самое элегантное решение, согласитесь. Зато достаточно общий и весьма показательный вариант, на деле можно будет из первого массива сразу собирать последний. Дальше, неплохо бы пронормировать результат, что если тег встретиться 120 раз? Шрифт высотой в 120 пикселей - не самое приятное зрелище, по идее надо выводить не $val, а что-то типа 30*$val/max($mas). Третье - хорошо бы менять не только размер шрифта. Тут нам помогут стили, сделайте сколько удобно и вызывайте согласно частоте. Моя цель - показать, а не сделать идеальный генератор облака.

Чуть более интересные ньюансы. Если вы полистали линки, что приведены выше, то вероятно наткнулись на двумерное облако. Там решено было цветом выделять последнее, хорошая мысль. В моем примере облако постоянно дрейфует за счет выборки в порядке модификации (см. запрос выборки тегов), т.е. более новые выше, более старые в конце. Если вам нравится располагать алфавитно, то надо лишь дописать перед выводом:
ksort($mas);


Как видите, всё достаточно просто, CSS с набором стилей можно вообще утащить у кого понравится, механизм отображения практически целиком перед вами. Я не стал перегружать примеры всякими проверками, инциализациями и прочей вспомогательной атрибутикой, а также красивостями, с этим вы наверняка и сами справитесь ;)

P.S. То облако, что справа - не моё.

OLFSL 2007 #10Облако тэгов - это...

Comments

Anonymous 25. September 2007, 15:47

Nudnik.ru writes:

1. Про производительность. Движки, которые выводят облако тэгов, не кэшируя его - ущербны.

...Начал писать комментарий, допишу у себя в блоге. =)

Anonymous 25. September 2007, 19:26

Alexey writes:

Расписал-то... Все же элементарно...
А фишка твоего скрипта (с explode/implode) по сути является следствием не совсем правильного, с точки зрения нормализации таблиц в БД, способа хранения тэгов. Я же правильно понял? Ты в каждой строке таблицы «dump» в поле «tags» хранишь список тэгов через запятую. Впрочем, мы с тобой это, вроде, уже обсуждали :)

Anonymous 25. September 2007, 20:15

SazonPRO writes:

Спс ...

aLexusPro 26. September 2007, 08:21

Думал рассказать какие клёвые я кроссовки купил. Ладно, сел писать вторую серию :smile:

Anonymous 18. March 2009, 14:53

DANCECORE PROJECT writes:

Как собирать теги в кучу всё просто, сложнее организовать правельное хранение и систему ввода =) Ну это всё уже выше написанно =) Было бы прикольно сделать предположим облако так, чтобы оно печаталось не в строку, а размещалось так, чтоб небыло свободного места =) В высоту одного жирного чтобы вмещалось и или полтора маленьких ) Тогда больше на облако будет похоже =)

Anonymous 22. March 2009, 21:43

Аноним writes:

Щас прикольные облака тегов на сайтах появляются в стиле 3д, походу на базе flash где такой взять можно?

Anonymous 28. May 2009, 13:15

Skyman writes:

Присоединяюсь к предыдущему оратору.
Есть ли варант облака со флешем + XML-ка в кач-ве входящих данных?

ЗЫ, А статейка - для новичков сойдет.

Anonymous 10. June 2009, 20:08

Сергей writes:

С флешем никакого смысла - поисковики просто проигнорируют.

How to use Quote function:

  1. Select some text
  2. Click on the Quote link

Write a comment

Comment
(BBcode and HTML is turned off for anonymous user comments.)

Type the two words displayed in the image below:


Smilies

Download Opera, the fastest and most secure browser
July 2009
M T W T F S S
June 2009August 2009
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31