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:

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

Anonymous 2. October 2009, 21:08

Аноним writes:

у вас орфографическая ошибка, второй абзац "Собственно, справа вы как раз можете наблидать такое облако." слово наблидать....
;))

Anonymous 24. November 2009, 21:56

Аноним writes:

Ничего не понял...
А говорил, что элементарно...

Хотя я в своем крае 3-е место по веб-конструированию занял...

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.)

If you can't read the words, press the small reload icon.


Smilies

Download Opera, the fastest and most secure browser
January 2010
M T W T F S S
December 2009February 2010
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