Облако тегов - это просто
Tuesday, September 25, 2007 1:49:49 PM
Вы когда-нибдуь задумывались как работает облако тегов? Давайте помогу задуматься? Не бойтесь, тут нет ничего сложного. К сожалению, в рунете, как обычно, туго с информацией такого плана. Поверхностные поиски привели лишь на один интересный ресурс, где автор рассуждает на тему облака тегов. Ну, в РУнете нет, так в интернете будет - точно, википедия, как обычно, готова вам взахлеб рассказывать про 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. То облако, что справа - не моё.


Anonymous # Tuesday, September 25, 2007 3:47:12 PM
Anonymous # Tuesday, September 25, 2007 7:26:14 PM
Anonymous # Tuesday, September 25, 2007 8:15:52 PM
aLexusPro # Wednesday, September 26, 2007 8:21:22 AM
Anonymous # Wednesday, March 18, 2009 2:53:29 PM
Anonymous # Sunday, March 22, 2009 9:43:48 PM
Anonymous # Thursday, May 28, 2009 1:15:04 PM
Anonymous # Wednesday, June 10, 2009 8:08:14 PM
Anonymous # Friday, October 2, 2009 9:08:51 PM
Anonymous # Tuesday, November 24, 2009 9:56:47 PM
Anonymous # Tuesday, January 12, 2010 2:20:54 PM
Эдbolshoypupsik # Wednesday, January 13, 2010 4:45:25 PM
Anonymous # Monday, February 1, 2010 11:15:02 AM
Anonymous # Wednesday, April 28, 2010 3:29:06 AM
Anonymous # Friday, June 4, 2010 1:39:17 PM
Anonymous # Sunday, July 18, 2010 11:55:19 PM
Anonymous # Monday, August 2, 2010 9:36:52 PM
Anonymous # Wednesday, September 1, 2010 11:47:41 AM
Anonymous # Friday, October 8, 2010 1:13:18 AM
Anonymous # Wednesday, September 7, 2011 5:37:00 PM