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 Tuesday, September 25, 2007 3:47:12 PM

Nudnik.ru writes: 1. Про производительность. Движки, которые выводят облако тэгов, не кэшируя его - ущербны. ...Начал писать комментарий, допишу у себя в блоге. =)

Anonymous Tuesday, September 25, 2007 7:26:14 PM

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

Anonymous Tuesday, September 25, 2007 8:15:52 PM

SazonPRO writes: Спс ...

aLexusPro Wednesday, September 26, 2007 8:21:22 AM

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

Anonymous Wednesday, March 18, 2009 2:53:29 PM

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

Anonymous Sunday, March 22, 2009 9:43:48 PM

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

Anonymous Thursday, May 28, 2009 1:15:04 PM

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

Anonymous Wednesday, June 10, 2009 8:08:14 PM

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

Anonymous Friday, October 2, 2009 9:08:51 PM

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

Anonymous Tuesday, November 24, 2009 9:56:47 PM

Аноним writes: Ничего не понял... А говорил, что элементарно... Хотя я в своем крае 3-е место по веб-конструированию занял...

Anonymous Tuesday, January 12, 2010 2:20:54 PM

Аноним writes: Судя по тому, что у предыдущих ораторов объяснения не вызвали трудностей, твой край очень далекий, начальника...

Эдbolshoypupsik Wednesday, January 13, 2010 4:45:25 PM

нифига не понял

Anonymous Monday, February 1, 2010 11:15:02 AM

Zarty writes: то что автор предлагает - ну минимум странно, что будет если у него 1000 записей с тегами, а если 1000000?

Anonymous Wednesday, April 28, 2010 3:29:06 AM

Ðноним writes: дааа, скрины поставил какие то...и всё, ты лучше поэтапно всё распиши, где, что и как делается это добро. Не все же как ты. Буду благодарен.

Anonymous Friday, June 4, 2010 1:39:17 PM

Kanaris writes: Всё доступно описано. Спасибо.

Anonymous Sunday, July 18, 2010 11:55:19 PM

Аноним writes: да, привязывать к размеру шрифта было опрометчиво.. на крайняк, можно было бы задать пару-тройку ифов.. на пример: if($val>50 || $val

Anonymous Monday, August 2, 2010 9:36:52 PM

vitcom writes: твоим способом не получается вывести 500000 записей - не хватает оперативки, не говоря уже про скорость

Anonymous Wednesday, September 1, 2010 11:47:41 AM

АнонимПро writes: А зачем вам выводить облако с таким количеством? По-моему 20 тегов вполне достаточно, притом можно создать, как бы говоря "viewport", если присвоить праметру MySQl-запроса LIMIT два псевдослучайных числа, и тогда будут выводится любые 20 тегов допустим из 100000. И думаю не стоит собирать и разбирать тэги в массив(если конечно без этого можно обойтись). А так статья отличная)

Anonymous Friday, October 8, 2010 1:13:18 AM

Анонімний writes: недорогая реклама в прессе , СМИ, на тв Киеве

Anonymous Wednesday, September 7, 2011 5:37:00 PM

Анонімний writes: I received my first credit loans when I was not very old and that supported my relatives a lot. However, I need the term loan also.

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

February 2012
M T W T F S S
January 2012March 2012
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