Как сделать облако тегов на PHP.
10 Июн 2008«Облако тегов» или «Облако меток» (англ. tag cloud) — визуальное представление списка ярлыков. Частота упоминаний, поисков, ссылок в интернете с определенного сайта неких слов, терминов, имен, отображается в виде изображения этих слов в формате гиперссылок. Размер изображения тем больше, чем выше релевантность данного слова.
Теги для многих удобнее категорий, и, наверное, поэтому без них сейчас не обходится ни один проект в концепциях Web 2.0. Для многих CMS есть модули или плагины, выводящие облако тегов. WordPress поддерживает такую функцию начиная с версии 2.3.
Но мне захотелось вывести такую штуку на самописном движке сайта «Коллеги: 1000 IT-блогов«. Реализация оказалась проще, чем я думал.
- 1. Создал таблицу соответствий «Тег — Число».
- 2. Заполнил её (несложная функция, подсчитывающая число вхождений тега в таблице блогов).
- 3. Рассчитал максимальное значение и исходя из него — популярность каждого тега в процентах.
- 4. Разделил теги на группы по популярности и назначил им CSS-классы.
- 5. Подготовил соответствующие CSS-классы для отображения.
- 6. Вывел облако на страницу блоком.
TagCloud.phps - формирование облака тегов.
В тексте исходника — все инструкции, дамп таблицы и CSS-классы. Посмотреть этот код в действии можно в «Коллегах».
Спасибо попробую, в свое время для вывода облака использовал вот этот код:
http://www.hawkee.com/snippet/1485/
Тоже вариант =)
В целом у меня гораздо более коряво :D
Но довольно похоже, что меня, как псевдопрограммера радует :D
Еще бы была расписана отдельно тэговыковыривалка, которая в моем случае расписана аж на 25 строк
Создание жестких CSS — гуд, я не заморочился и долго игрался с расчетами размеров тэга посредством натуральных логарифмов :D
К теговыковыривалке есть два подхода — грамотный и мой :-)
Грамотный в плане хранения данных — хранить соответствие Тег — Элемент в отдельной множественной таблице.
Тогда подсчёт тегов будет элементарный — селектом с одним условием равенства.
Я использую более простой, но более медленный способ — теги хранятся в поле таблицы блогов, при необходимости их получить делается explode(), но эта необходимость есть только для пересчёта таблицы тегов. А выборка блогов по тегу делается через %LIKE%. Знаю, что медленно, но меня пока устраивает. Подробнее рассказывать? :-)
Не надо :)
У меня так и работает :D
«рассчёт» правильнее писать с одной с :)
У меня новая жуткая клавиатура. К ней в комплекте должен идти бесплатный спеллчекер… =(
Меня больше интересует в «Коллегах» возможность повторной проверки сайта чем облака, а то у меня rss-feed неправильный.. Да и что случается если у сайта 404?
С повторной проверкой не всё так просто. У тебя, например, 6 фидов на странице, я даже представить себе не могу как скрипт мог угадать нужный :-)
И с иконками такая же ерунда — у каждого свои представления о формате…
Фид поправил.
Если 404 — происходит обработка следующего фида. Если постоянно 404 — я удаляю фид из матрицы =)
Без PRIMARY KEY :-/
Спасибо за рекомендации, облако тегов — шутка полезная. )
Вот тоже вариант, тоже как-то укуренно, но тоже работает ;-)
http://bolzamo.org.ru/175/#more
Одна из нормальных рекомендаций, буду пользоваться. Хотя преимуществ (выше ссылка была) , не углядел.
Мда, код написан. Работает. Но вот я не понимаю зачем сначала Вы кладете данные в массив, а потом в цикле их обрабатываете? Можно сделать все в одном цикле.
А второе замечание — поиск максимального элемента в таблице можно сделать средствами MySQL.
И думаю тогда будет все отлично!
Блин, написал комментарий, а он не отображается.. :(
Похоже какая-то беда с опен ИД была… Просто только что его зарегистрировал. =)
Отображается =) Просто первый комментарий пользователя идёт на премодерацию.
Почему 2 цикла… Ну тут у меня скорее логическое разделение на случай выполнения в разных местах. Можно и одним циклом, согласен.
А вот на счёт максимума через mysql … Это идея, надо её подумать =)
просто я сейчас начал делать нечто подобное fotki.yandex.ru, и если будет много меток (а их там будет МНОГО), то все будет тормозить. поэтому необходима правильно-спроектированная структура БД, со всеми ключами. Так что замечание Воффки тоже уместно..
Покажи потом чего получится если не сложно =)
Воффка правильно говорит, не вижу препятствий — теги же уникальны по определению.
И еще бы все это дело обернуть в класс, передавать туда имя таблицы, наименование поля с весом тега, и, массив стилей — будет вообще конфетка :)
На Яндексе ещё, по-моему используются управляемые элементы, то есть там не все теги, а те, что доктор прописал. Тоже нужно обыграть.
ага, дизайн нарисовал я… БД сделали, а больше пока показывать нечего.. Дизайн, должен признать, 90%-ная копия fotki.yandex.ru
Просто я долго сидел, думал, пытался что-то сделать свое, уникальное… Но смотря на ТЗ, и видя тот же функционал, те же блоки, почти тоже-самое и вышло… :(
Одно радует, ОПЫТ, полученный при разработке незаменим :)
всмысле? по-поводу тегов? можно по-подробнее.. Там вроде, как я понял, используется просто таблица уникальных тегов и таблица связей между тегами.
Причем каждая связь имеет тоже свой вес.
У нас будет как бы метки пользователей, и вдобавок ко всему — свои метки, т.е. модерируемые.
Я не уверен, но думаю, что на ЯФ выводятся отмодерированные теги. Если бы выводились сырые — было бы много, если бы выводились самые популярные — были бы другие. Там логичные и синтаксически правильные теги, значит это премодерация.
Ну м.б. просто меток с матом там не много, т.к. их чистят, или вовсе удаляют. А для генерации дерева меток ( оно на yandex слева ) используются только отмодерированные фото. И тогда, думаю все должно быть ок..
я когда просматривал yandex fotki, не нашел фоток с тупыми метками. Но данный способ вывода меток, возможен только при наличии большого количества фоток. А первоночально, возможно у них и были все разделы(метки) модерируемые.. хз-хз..
Присмотрелся. «Все метки» — это похоже на правду. А «Популярные метки» — премодерация всё-таки. Как бы там не было, метка «Я» отсутствует — не попадает под формат, а она очень популярна. И не только =)
Так что в ТЗ класса можно добавить: получение массива меток на входе ;-)
да хто его знает. Может там просто поп. метки от 2-х символов? =)
Ну, мы уже нашли как минимум три логичных способа нормальной реализации, какая разница как у них :-)
Кста, еще давно заметил, что у них в поп. метках присутствует город, а он берется по IP посетителя :)
И, возвращаясь к нашим баранам, во че нашел: http://chir.ag/tags/
Генерация облачков + неплохой слайдер на JS (не глючит, если при нажатой клавиши мыши вывести курсор за пределы браузера и там отпустить. maps.google есть чему поучиться! =) )
Красивая штука. Только нужны ли метки в разрезе времени? Мне кажется имеет смысл только сиюминутный срез, в этом и соль.
ну да. по времени нафиг. Хотя тому же yandex не помешалобы по времени разделить, ведь они выводят последние поп. за неделю. Хотя, не. Это уже излишество..
а, и еще, по поводу скрипта, можно же не использовать так много if — else при «определении класса для тега из его популярности», а заменить на switch — case. Хотя ща посмотрел готовые скрипты, везде if — else. :)
Switch кодеры по какой-то причине побаиваются — я давно заметил. Некоторые не умеют готовить, а некоторые утверждают, что влияет на скорость. Тут вполне можно и switch =)
а насчет поп. меток, скрипт http://chir.ag/tags/ просто-напросто, использует список стоп слов. И модерировать метки не придется. =)
ИМХО, будет лучше выглядеть, если в качестве меры популярности использовать логарифм от числа заметок. Конструкцию if можно переписать в таком виде:
$classlist = array(‘smallest’,’small’,’medium’,’large’,’largest’);
$i = intval($percent/100*count($classlist));
$i = ($i=count($classlist))?(count($classlist)-1):$i);
echo $class = $classlist[$i];
Кусок третьей строчки съелся. Имел в виду следующее:
$i = ($i<0)?0:( ($i>=count($classlist))?(count($classlist)-1):$i);
В виде класса все смотрелось бы получше.
Ну это же просто концепт, а не готовый солюшен =)
Принцип понятен, а дальше можно накрутить что угодно =)
Очень полезная статья,я вот как раз собирался заняться этим .
Видел кто-нибудь облако тегов в виде планеты? Если да, то как этот плагин называется для WP?