| 1Bot |
Отправлено: 23 августа 2009 — 08:27 
|
Super Member
Покинул форум
Сообщений всего: 773
Дата рег-ции: Апр. 2009
Откуда: Днепропетровск
Репутация: 69
|
mastersound
Victor
не забываем голосовать =))
Victor пишет:в чем ее полезность при наличии поиска?
в красоте, в компактности
Какой JavaScript-движок у Мозилы? (Можно поставить от Sun Microsystems) Java Script использует в виджете SWF FlashPlayer
Красивое облако тегов выводится с помощью Flash и JS.
Основные составляющие:
1. Во первых нужен небольшой флеш файлик (весит ~40кб);
2. Во вторых небольшой JS файл (~5кб), этот файл подключаем к странице между тегами <head> </head>:CODE:<script type="text/javascript" src="swfobject.js"></script>
3. И сам код с помощью которого это облако формируется, о нем далее...
Спойлер (Отобразить)Обязательно потребуется создать DIV с ID в котором будет располагаться это облако, например так: CODE:<div id="tags"> </div> Далее в этом слое формируем теги-ссылки, которые будут выводиться в облаке, и поместим их в переменную PHP. Нам нужно будет кодировать теги-ссылки в безопасное представление, у PHP имеется для этого замечательная функция, именно поэтому мы помещаем их в переменную PHP. Еще эти ссылки должны быть обрамлены тегами <tags> </tags>: CODE:<?php
$tags = '<tags>
<a href="http://Wincert.ru" style="font-size: 15pt">Wincert</a>
<a href="http://W-blog.ru" style="font-size: 15pt">Мой блог</a>
<a href="http://cssor.ru" style="font-size: 15pt">Крутой сайт о CSS</a>
<a href="http://Wincert.ru" style="font-size: 15pt">Веб разработчик</a>
<a href="http://W-blog.ru" style="font-size: 15pt">Интересное</a>
</tags>';
?>
style="font-size: 15pt" является обязательным, определяет высоту текста в облаке.
Для того чтобы посетители у которых не установлен flash или отключен JS в браузере увидели что там находится облако тегов можно вставить код вывода облака тегов в начало нашего слоя (div id="tags"): CODE:<?php
echo $tags;
?> Или же просто написать сообщение типа "Для корректного отображения этого элемента вам необходимо установить FlashPlayer и включить в браузере Java Script". Как раз фишка заключается в том что если у пользователя установлен FlashPlayer и включен JS в браузере, то ему выведется это красивое облако тегов, а если нет, то это предупреждающее сообщение.
Теперь самая главная и сложная строчка для вывода тегов: CODE:<script type="text/javascript">
var rnumber = Math.floor(Math.random()*9999999);
var widget_so = new SWFObject("tagcloud.swf?r="+rnumber, "tagcloudflash", "230", "140", "9", "#ffffff");
widget_so.addParam("allowScriptAccess", "always");
widget_so.addVariable("tcolor", "0x333333");
widget_so.addVariable("tspeed", "115");
widget_so.addVariable("distr", "true");
widget_so.addVariable("mode", "tags");
widget_so.addVariable("tagcloud", "<?php echo urlencode($tags); ?>");
widget_so.write("tags");
</script>
Где:
var widget_so = new SWFObject("tagcloud.swf?r="+rnumber, "tagcloudflash", "230", "140", "9", "#ffffff"); - Основные параметры облака, "tagcloud.swf" – путь к флеш файлу, "230" – ширина, "140" – высота, "9" – не знаю за что отвечает эта цифра, "#ffffff" – цвет фона облака;
widget_so.addVariable("tspeed", "115"); - Определяет скорость вращения облака, менять надо только цифру 115;
widget_so.addVariable("distr", "true"); - Если true заменить на false, облако примет немного другой вид;
widget_so.addVariable("tagcloud", "<?php echo urlencode($tags); ?>"); - Указываем ссылки которые мы сформировали в переменно $tags и кодируем их в безопасное представление с помощью PHP функции urlencode();
widget_so.write("tags"); - Указываем ID слоя в котором будет располагаться наше облако тегов, в нашем случае это tags.
widget_so.addVariable("tcolor", "0x333333"); - Определяет цвет тегов в облаке.
И вот теперь полный рабочий код облака тегов, остальное можно было не читать ::smile24.gif:: CODE:<html>
<head><title>Красивое облао тегов</title>
<script type="text/javascript" src="swfobject.js"></script>
</head>
<body><div id="tags">
<?php
$tags = '<tags><a href="http://Wincert.ru" style="font-size: 15pt">Wincert</a>
<a href="http://W-blog.ru" style="font-size: 15pt">Мой блог</a>
<a href="http://cssor.ru" style="font-size: 15pt">Крутой сайт о CSS</a>
<a href="http://Wincert.ru" style="font-size: 15pt">Веб разработчик</a>
<a href="http://W-blog.ru" style="font-size: 15pt">Интересное</a>
</tags>';
?>
Для корректного отображения этого элемента вам необходимо установить FlashPlayer и включить в браузере Java Script.
<script type="text/javascript">
var rnumber = Math.floor(Math.random()*9999999);
var widget_so = new SWFObject("tagcloud.swf?r="+rnumber, "tagcloudflash", "230", "140", "9", "#ffffff");
widget_so.addParam("allowScriptAccess", "always");
widget_so.addVariable("tcolor", "0x333333");
widget_so.addVariable("tspeed", "115");
widget_so.addVariable("distr", "true");
widget_so.addVariable("mode", "tags");
widget_so.addVariable("tagcloud", "<?php echo urlencode($tags); ?>");
widget_so.write("tags");
</script>
</div></body>
</html>
Сохранить надо это как php файл (с расширением .php) и запускать на своем локальном денвере или на хостинге. Вот что получается
По материалам блога http://w-blog.ru/node/22
(Отредактировано автором: 23 августа 2009 — 10:45) |
| |
|
|
Отправлено: 24 августа 2009 — 08:48
|
Покинул форум
Сообщений всего: 0
Дата рег-ции: N/A
Репутация: 0
|
4 марта 2011 года добавлен вариант мода с кешированием, что снизит нагрузку на сервер при большом количестве посетителей. Описание настройки - там же.
ПОСТ исправлен 18.09.2009. Ниже добавлена инструкция по "скрещиванию" "облака" с модом Ссылки на последние темы форума на Вашем сайте. Исходная реализация, описание и необходимые файлы - см. тут (в архиве файлы tagcloud.swf и swfobject.js) и берём вложение из этого поста (файл lastforum2.php).
Можно очень просто скрестить форум с этим "облаком". Добавление "облака" к форуму (сайту). Делается так:
1. Копируем swfobject.js в папку /javascript форума, tagcloud.swf и lastforum2.php - в корень форума,
2. Отрываем /templates/ваш_скин/all_header.tpl, в нём находим строку:
CODE:<script type="text/javascript" language="JavaScript" src="javascript/JsHttpRequest/JsHttpRequest.js"></script>{$GLOBALS['fm']->_Link}
Сразу за ней вставляем:
CODE:<script type="text/javascript" language="JavaScript" src="javascript/swfobject.js"></script>
Сохраняем.
3. Открываем /templates/ваш_скин/logos.tpl, вверху ищем строку:
и перед ней вставляем строку:
CODE:require_once("lastforum2.php");
4. Далее в этом же файле вставляем java-скрипт в том месте, где должно появиться "облако". Например, ищем строки:
CODE:<tr>
<td width="468" align="center" rowspan="2">{$fm->_Banner}</td>
<td valign="top" align="right"><span style="margin-right:15px;">{$fm->exbb['boarddesc']}</span></td>
</tr>
и сразу за ними вставляем:
CODE:<div align=center id="tags">
Для корректного отображения этого элемента вам необходимо установить FlashPlayer и включить в браузере Java Script.
<script type="text/javascript">
var rnumber = Math.floor(Math.random()*9999999);
var widget_so = new SWFObject("tagcloud.swf?r="+rnumber, "tagcloudflash", "640", "90", "9", "#ffffff");
widget_so.addParam("allowScriptAccess", "always");
widget_so.addVariable("tcolor", "0x333333");
widget_so.addVariable("tspeed", "100");
widget_so.addVariable("distr", "true");
widget_so.addVariable("mode", "tags");
widget_so.addVariable("tagcloud", "$tags");
widget_so.write("tags");
</script>
</div>
Сохраняем.
На "морду" сайта выносится аналогично, нужно только поправить пути к файлам (добавить папку форума, в которой все файлы лежат).
(Отредактировано автором: 4 марта 2011 — 02:45) |
| |
|
| yura3d |
Отправлено: 24 августа 2009 — 15:36
|
ExBB Team
ExBB Developer
ExBB Mods Author
Покинул форум
Сообщений всего: 3394
Дата рег-ции: Февр. 2009
Откуда: Минск, Беларусь
Репутация: 353
|
1Bot пишет:Какой JavaScript-движок у Мозилы? (Можно поставить от Sun Microsystems)
Sun Microsystems не имеет никакого отношения к JavaScript. Возможно, Вы путаете JavaScript с Java
Сразу скажу, что реализация подобного мода для всех сообщений форума (т.е. выделение популярных слов со всех сообщений) довольно ресурсоёмкая задача в плане нагрузки на сервер, даже при условии использования базы данных поисковой индексации. Да и получится неважно (например, в облако тегов могут войти часто встречаемые слова "который", а также существительные, отличные от именительного падежа, вырванные из контекста глаголы и т п), а всё потому, что смысл облака тегов не в выделении популярных слов. Их смысл в определении направлений (категорий), которые освещает сайт. Когда для сайта определён список направлений (например, для данного сайта можно определить такие, как ExBB, обновления, исправления, модификации и дополнения, темы оформления, локализации и т п), то каждая новость на сайте отмечается соответствующими тегами, и в дальнейшем при клике на тег можно вывести список новостей, которые он покрывает
В качестве примера приведу один из ведущих белорусских сайтов в области телекоммуникаций onliner.by (портал этого сайта основан на phpBB2)
Вот пример новости: Onliner.by провел тестирование 3G от life:). Снизу текста новости есть список тегов:
которые показывают, что данная новость имеет отношение к 3G (третье поколение мобильной связи) и оператору life:). Кликая по этим тегам, мы можем просмотреть все новости внедрения 3G в Беларуси (тег 3G) либо новости оператора life:) (тег life:)). Комбинация этих тегов (3G + life:)) выведет только новости, касающиеся внедрения технологии 3G оператором life:). Ну и соответственно в основное облако тегов (пример которого приводил 1Bot выше) мы выводим только те теги, которые покрывают наиболее популярные новости
Такой вариант облака тегов гораздо логичнее, и его проще применять для группировки той или иной информации, чем просто выдёргивание слов из контекста. Как это лучше применить на форуме, пока не знаю, если есть какие-то варианты, предлагайте |
| |
|
| 1Bot |
Отправлено: 24 августа 2009 — 16:55
|
Super Member
Покинул форум
Сообщений всего: 773
Дата рег-ции: Апр. 2009
Откуда: Днепропетровск
Репутация: 69
|
Zeg пишет:Да можно очень просто скрестить форум с этим облаком. Темы "тянуть" либо по последнему посту (скрестив вот или вот), либо по популярности
Очень хорошая идея!  Можно еще размеры названий менять по порядку постов. |
| |
|
|
Отправлено: 24 августа 2009 — 22:06
|
Покинул форум
Сообщений всего: 0
Дата рег-ции: N/A
Репутация: 0
|
Эх, yura3d чуть опередил. 
Да, если конкретно нужны именно ключевые слова темы (сообщения), то лучше и логичнее вариант, который предложил Юра. Как вариант - эти ключевики можно генерить для страницы (темы) - вот пример (кликните в любую статью, там внизу есть строчка Теги:...).
Если же нужно просто красивое меню навигации на морде сайта или форума - можно сотворить это флэшевое облако, которое описано в первых постах темы, но в него пихать не ключевики, ибо
yura3d пишет:Сразу скажу, что реализация подобного мода для всех сообщений форума (т.е. выделение популярных слов со всех сообщений) довольно ресурсоёмкая задача в плане нагрузки на сервер, даже при условии использования базы данных поисковой индексации.
а как выше сказал - или последние посты, или самые популярные, благо тут никокой практически нагрузки на сервер не будет, ссылки добыть можно прямо средствами самого форума. |
| |
|
|
Отправлено: 24 августа 2009 — 23:02
|
Покинул форум
Сообщений всего: 0
Дата рег-ции: N/A
Репутация: 0
|
Файл перезалит 14.09.2009! Рекомендую заменить, подробности тут!
Так, вот накропал за 10 минут. Собрано на коленке, сильно не пинайте, это пример. Кому надо - доработаете напильником  .
За основу взял свою функцию вывода последних постов, подробности по работе и настроке - тут. Что менял:
1. Уменьшил количество одновременно показанных тем до 10-ти:
2. Ссылки сгенерил в формате, который приведен в примере, т.е.:
CODE:$allname .= "<a href=\"".$url."topic.php?forum=".$forumid."&topic=".$topicid."&postid=".$postkey."#".$postkey."\" style=\"font-size: 16pt\">".$topicname.$posts."</a>\n";
3. При выводе оказалось, что текстА должны быть в utf-8, а у нас windows-1251.
Универсальной конвертилки-функции с ходу не вспомнил (iconv не везде работает), потому добавил функцию преобразования кодировки из windows-1251 в utf-8, не такая уж она большая:
CODE:function CP1251toUTF8($string){
$out = '';
for ($i = 0; $i<strlen($string); ++$i){
$ch = ord($string{$i});
if ($ch < 0x80) $out .= chr($ch);
else
if ($ch >= 0xC0)
if ($ch < 0xF0)
$out .= "\xD0".chr(0x90 + $ch - 0xC0); // А-Я, а-п (A-YA, a-p)
else $out .= "\xD1".chr(0x80 + $ch - 0xF0); // р-я (r-ya)
else
switch($ch){
case 0xA8: $out .= "\xD0\x81"; break; // YO
case 0xB8: $out .= "\xD1\x91"; break; // yo
// belorussian and ukrainian
case 0xA1: $out .= "\xD0\x8E"; break; // Ў (U)
case 0xA2: $out .= "\xD1\x9E"; break; // ў (u)
case 0xAA: $out .= "\xD0\x84"; break; // Є (e)
case 0xAF: $out .= "\xD0\x87"; break; // Ї (I..)
case 0xB2: $out .= "\xD0\x86"; break; // I (I)
case 0xB3: $out .= "\xD1\x96"; break; // i (i)
case 0xBA: $out .= "\xD1\x94"; break; // є (e)
case 0xBF: $out .= "\xD1\x97"; break; // ї (i..)
}
}
return $out;
}
4. Вывод выглядит так:
CODE:<?php
$tags = "<tags>".CP1251toUTF8($allname).'</tags>';
?>
Кому интересно или что-то не понятно, цепляю готовый пример на php. Под свои нужды доработать не сложно.
В архиве версия под локальный сервер (Денвер), для нормальной работы нужно вписать путь к папке с форумом на сервере (ВНИМАНИЕ! Архив перезалил).
Прикрутил для пробы на свой форум, кому интересно, как выглядит - см. ссылку в подписи .
(Отредактировано автором: 13 сентября 2009 — 21:13) |
| |
|
|
Сайт проекта ExBB
Чат на форуме
Помощь
Поиск
BanList
Без описания
всё отлично работает!!!
