Облако тегов — это форма визуализации данных, представляет собой набор ключевых слов и словосочетаний, написанных разными размерами шрифта и, иногда цвета. Чем крупнее шрифт, тем чаще ключевое слово употребляется в текстах статьей на сайте. Из-за того, что облако тегов смотрится изящно и работа с ним удобна, такие облака часто используются на блогах и тематических сайтах.
Облако тегов может быть реализовано в виде: трёхмерного Flash-ролика или последовательности слов (гиперссылок) различного размера. В этой статье будет рассмотрено, как сделать облако тегов на простом html сайте и как сделать красивое flash облако тегов.
Облако тегов располагается, как правило, сбоку сайта, иногда его можно найти под навигацией. Такое меню очень популярно на блогах, где с его помощью можно вытащить публикации с определенными тегами или на какую-то конкретную тематику. Тем не менее, несмотря на свое удобство, такая система не может заменить полноценной постраничной навигации. Облако тегов можно использовать разве что для облегчения поиска по сайту.
Некоторые ссылки в облаке тегов могут быть крупнее, некоторые – мельче, некоторые – цветные, некоторые того цвета, что и сам сайт или черные. Это зависит от популярности темы. Чем востребованнее тема, тем крупнее сам тег в облаке.
Облако меток дает пользователю визуальное представление о той информации и материалах, которые размещены на сайте. Облаком, подобный список тегов называется по той причине, что чаще всего оно изображается в виде сферы, которая визуально похожа на облако. С помощью этого нехитрого приема навигация на сайте становится проще и интересней.
Сделать облако тегов для сайта можно несколькими способами. Очень красивым оно получится, если будет сделанным с помощью flash. Изящный трехмерный ролик будет отлично смотреться на блоге. Ссылки такого меню постоянно находятся в движении, а еще ими можно управлять при помощи курсора.
Чтобы установить красивое облако, можно использовать PHP-скрипт. Полноценную навигацию облако тегов никогда не заменит. Поэтому, в первую очередь, лучше позаботиться о хорошем меню на сайте для пользователей.
Если речь идет о блоге, то здесь следует продумать несколько систем, чтобы ориентироваться в материалах. Помимо обычной системы категорий, нужно оформить меню для самых читаемых материалов, а также для новых статей. Если страница очень длинная, то есть смысл поставить кнопку, которая будет переносить читателя сразу наверх сайта. Удобная навигация служит одним из факторов привлечения пользователей. Если сайт имеет хорошее и понятное меню, то посетители могут на нем задержаться надолго. При условии, разумеется, что на веб-ресурсе содержится полезная информация.
Создать красивое облако тегов можно как вручную, так и прибегнув к помощи специальных генераторов — программ, создающих облака на любой вкус и запрос. Реализовать облако меток можно с помощью flash-технологий или в виде гиперссылки html. Также существуют специальные плагины для установки облака меток на сайт или блог, в разных CMS — различные. Вы всегда можете задать необходимое именно вам количество отображаемых меток, а также поэкспериментировать с размером и цветом шрифта и оформлением облака.
В этой статье рассмотрено создание очень красивого 3D облака тегов, на примере сайта управляемого CMS Ucoz, с использованием flash. В сети достаточно много материалов, посвященных этой теме, но все они, обычно, несколько сложны для новичков. Здесь все написано подробно и простым языком, у начинающих никаких проблем не возникнет.
Итак, начнем.
1. В корневом каталоге сайта создаем при помощи файлового менеджера папку с названием tagcloud. Можно назвать и по-другому, но в скриптах прописаны адреса именно до этой папки и, чтобы не изменять файлы назовем папку именно так.
2. Закачиваем в эту папку файлы swfobject.js и tagcloud.swf (для того, чтобы получить эти файлы кликните по соответствующей ссылке правой кнопкой мыши и в появившемся меню выберите пункт “Сохранить”).
3. В нужное место страницы сайта, там, где Вы хотите разместить облако тегов, вставьте HTML код.
<table style=”border-collapse: collapse;” height=”158″ width=”158″><tbody><tr><td style=”border: 0px solid rgb(0, 0, 0);”>
<script type=”text/javascript” src=”http://ваш сайт.ru/tagcloud/swfobject.js”></script>
<div id=”3dcloud_block” style=”text-align:center;font-size:12pt;”>
Для отображения блока требуется <noindex><a href=”http://get.adobe.com/flashplayer” rel=”nofollow” target=”_blank” title=”Скачать Flash Player бесплатно”>Flash Player</a></noindex><br><br>$MYINF_0$
</div>
<script type=”text/javascript”>
var rnumber = Math.floor(Math.random()*9999999);
var so = new SWFObject(“http://ваш сайт.ru/tagcloud/tagcloud.swf?r=”+rnumber, “tagcloudflash”, “560”, “400”, “9”);
var tags = new String(‘$MYINF_990$’);
tags = tags.replace(/”/g,”‘”);
tags = tags.replace(/<noindex>/gi,””);
tags = tags.replace(/<\/noindex>/gi,””);
tags = “<tags>” + tags + “</tags>”;
so.addParam(“wmode”, “transparent”);
so.addParam(“allowScriptAccess”, “always”);
so.addVariable(“minFontSize”, “1.1”);
so.addVariable(“maxFontSize”, “3”);
so.addVariable(“tcolor”, “0xCC0033”);
so.addVariable(“tcolor2”, “0xCC0033”);
so.addVariable(“hicolor”, “0xCC0033”);
so.addVariable(“tspeed”, “100”);
so.addVariable(“distr”, “true”);
so.addVariable(“mode”, “tags”);
so.addVariable(“tagcloud”, tags);
so.write(“3dcloud_block”);
</script>
</td></tr></tbody></table>
4. Измените в этом коде в двух местах выделенный жирным текст “ваш сайт.ru“, заменив его на домен вашего сайта.
5. В этом коде можно так же изменить следующие опции:
“560” – ширина облака тегов, в пикселях,
“400” – высота облака тегов, в пикселях,
“minFontSize”, “1.1” – размер самого маленького шрифта в облаке, задается в пунктах,
“maxFontSize”, “3” – размер самого крупного шрифта в облаке, задается в пунктах,
“tcolor”, “0xCC0033” – цвет самого частого текста в облаке тегов в RGB формате, частота текста определяется по свойству ссылки style, 0x не меняем,
“tcolor2”, “0xCC0033” – цвет самого редкого текста в облаке тегов в RGB формате, частота текста определяется по свойству ссылки style, 0x не меняем,
“hicolor”, “0xCC0033” – цвет текста при наведении на него курсора. 0x не меняем,
“tspeed”, “100” – скорость вращения облака,
“distr”, “true” – тип вращения 3D облака, принимает значение “true” или “false”.
Для размещения облака тегов на обычном html сайте необходимо выполнить всего один шаг.
Код, который Вы видите внизу, вставить между тегами <body> и </body> в то место, где будет располагаться ваше “облако тегов”.
Проставьте свои названия и адреса ссылок. Можете добавлять сколько угодно ссылок. Можно поэкспериментировать с настройками: изменением величин поля облака, сейчас его размеры “380×150”, скорости вращения, размером шрифта и цветом. Получается очень красивое облако тегов, которое можно вставить на простую html страницу.
