Главная » Статьи » Техника, технологии » Интернет [ Добавить статью ]

3D Облако тегов на UcoZ (как создать 3D облако на UcoZ)
Многие мечтали, многие пытались что-то сделать ручками и вот оно ... с последним обновлением системы uCoz нам выпала возможность реализовать данную функцию у себя на сайте без особых проблем.

Создание тегов – это процесс создания ключевых слов и связывания их с данными. Основная идея облака тегов заключается в отображении тегов в соответствии с их значением, их весом и частотой употребления по сравнению с другими тегами. Для этого используются такие элементы дизайна, как размер шрифта и цвет. Чем более важен какой-либо тег, тем большим размером шрифта и более ярким цветом он выделяется среди остальных тегов (по крайней мере, именно так должно быть).

Облака тегов часто считают одним из традиционных элементов дизайна в Web 2.0.

"Облака тегов" предлагают очень интересную модель навигации; и хотя эта техника иногда рассматривается как "альтернативная", ее не следует использовать в качестве замены традиционной навигационной модели, а лишь в качестве дополнительной возможности, предоставляющей посетителям возможность быстрее сориентироваться в структуре и содержимом сайта. Благодаря своей форме, напоминающей облака, дизайн тегов четко отделяет их от остальных элементов дизайна, размещенных на странице.

Иными словами, можно рассматривать технологию тегов как независимую каталогизацию информации, которая связывает разные типы и виды информации, позволяет через теги находить связанные по смыслу (по тегам) документы. Согласен, идея прекрасная и действительно удобная и, видимо, появилась как попытка установления связей на сайтах с большим объемом разнородных документов.

Есть даже термин для этого - Фолксономия
http://ru.wikipedia.org/wiki....8%D1%8F


Итак приступим к созданию облака или списка тегов. Следует заметить, что не стоит создавать Облако, если у вас очень мало материалов с метками, т.к. это тогда будет бессмысленно.

1. Перед началом стоит активировать модуль "Поиск по сайту", т.к. ваши теги прямым образом будут связаны с этим модулем.

2. Постарайтесь как можно большему количеству материалов присвоить метки. Для этого в панельке управления материалом щелкните на значке "Теги материала", в появившемся AJAX-окне через запятую введите ключевые слова, относящиеся к данному материалу

Помните: чем больше у вас будет меток, тем эффектнее будет ваше облако!

3. Далее создаем информер (Панель управления ==> Инструменты ==> Информеры). Выбираем раздел информеров "Теги", а далее указываем настройки: способ вывода - Облако тегов или Список тегов (см. ниже различия), модули, для которых будет строиться облако тегов, имаксимальное количество тегов.

4. Нажимаем кнопку "Создать" и вставляем полученный код (например, $MYINF_1$) в нужный шаблон в нужное место.

5. Вот и все! Список тегов создан. По мере увеличения количества меток материалов будет изменяться картина этого списка.




Установка:

1. Создайте информер по образцу, написанному выше, и способ вывода выберите "Облако тегов"
2. Скачайте архив: 3. Распакуйте архив и закачайте его содержимое (swfobject.js и tagcloud.swf) на свой сайт (можно в любую папку).
4. Затем, в том месте, где будет flash-облако тегов, вставьте код:
Code

$MYINF_4$

<div id="yoblako" align="center">$MYINF_4$</div>
<script type="text/javascript" src="ссылка_на_файл_swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.mode = 'tags';
flashvars.minFontSize = '8';
flashvars.maxFontSize = '14';
flashvars.tcolor = '0x1D3D61';
flashvars.tcolor2 = '0x4D6D91';
flashvars.hicolor = '0xd193978';
flashvars.distr = 'true';
flashvars.tspeed = '100';
eTagz = document.getElementById('yoblako').getElementsByTagName('A');
flashvars.tagcloud = '<tags>';
for (var i=0; eTagz[i]; ++i) flashvars.tagcloud += '<a href=\'' + eTagz[i].getAttribute('href')
+ '\' style=\'' + parseInt(eTagz[i].style.fontSize)
+ '\'>' + eTagz[i].innerHTML.replace(/&/i, '%26') + '</a>';
delete eTagz;
flashvars.tagcloud += '</tags>';
var params = {};
params.wmode = 'transparent';
params.bgcolor = '#FFFFFF';
params.allowscriptaccess = 'always';
var attributes = {};
attributes.id = 'yoblako';
attributes.name = 'tagcloud';
swfobject.embedSWF('ссылка_на_файл_tagcloud.swf', 'yoblako', '250', '200', '9.0.0', false, flashvars, params, attributes);
</script>
Этот код нельзя вставлять в другие информеры (информеры нельзя вкладывать друг в друга, то есть нельзя вставлять содержимое информера $MYINF_4$ внутрь содержимого $MYINF_5$ и т.п.)
Пояснения:

Применяя условный оператор для $USER_AGENT$='ie' && $USER_AGENT_VER$<7 - запрещаем выводить flash-облако для версии IE ниже 7 (для этих пользователей будет отображаться обычное текстовое облако)

id="yoblako" - это идентификатор контейнера с облаком, в который будет помещён флеш-объект. Для идентификатора можно задать стили в CSS В таблицу стилей (CSS) добавьте параметр: #yoblako{outline:0;}
Параметр запрещает отображение пунктирной рамки вокруг всего flash-объекта при нажатии на него. Можно выровнять контейнер по центру, добавляя align="center" внутрь тега div.

$MYINF_4$ - это код Вашего информера, соответствующего облаку тегов юКоза, измените цифру, если необходимо. (В настройках информера "Теги" укажите число выводимых тегов: 50. Проверьте, что способ вывода установлен на "Облако тегов" )
В строках
Quote
<script type="text/javascript" src="ссылка_на_файл_swfobject.js"></script> ... swfobject.embedSWF('ссылка_на_файл_tagcloud.swf', 'yoblako', '250', '200', '9.0.0', false, flashvars, params, attributes);
Вместо "ссылка_на_файл_swfobject.js" и "ссылка_на_файл_tagcloud.swf" вставьте соответствующие ссылки.

Настройка:

В строке:
Quote
swfobject.embedSWF('ссылка_на_файл_tagcloud.swf', 'yoblako', '250', '200', '9.0.0', false, flashvars, params, attributes);
250 - ширина облака в пикселях; 200 - высота облака в пикселях.

*flashvars.minFontSize = "8"; - минимальный размер шрифта.
*flashvars.maxFontSize = "14"; - максимальный размер шрифта.
*flashvars.tcolor = "0xffffff"; - цвет самого редкого ярлыка.
*flashvars.tcolor2 = "0x0be4f8"; - цвет самого популярного ярлыка. Для остальных ярлыков будет выбран цвет между этими двумя.
*flashvars.hicolor = "0xd95800"; - цвет текста при наведении курсора на ярлык.
*flashvars.tspeed = "100"; - скорость вращения Flash-Облака тегов
*params.wmode = "transparent"; - этот параметр обозначает прозрачный фон.
*params.bgcolor = "#333333"; - цвет фона Flash-Облака тегов.

Дополнения:


Если требуется поддержка символов расширенной латиницы (например, символов ĀāČčĒēĢģĪīĶķĻļŅņŠšŪūŽž), то скачивать и устанавливать этот архив
Была решена проблема с символов & при помощи замены его используя аналог обозначения & в 16-ричной системе %26.
eTagz[i].innerHTML.replace(/&/i, '%26')


Чтобы удалить битые теги (которые остались в облаке, но материалы с ними удалены):

1. Заходим на страницу любого пользователя, кроме тех, которые имеют материалы. (можно создать локального пользователя для этого дела, например, с именем MrProper)
2. Находим модер-панель и кнопку "Удаление записей пользователя" (вот такой значок - )
3. Выбираем любой модуль, который может содержать теги (например, модуль Новости сайта). Ставим галочку.
4. Включаем мозг. Думаем. Есть ли материалы у этого пользователя в этом модуле. Если пользователь создан Вами, как "мистер Пропер", то он не добавлял материалы, значит и ничего не удалится. Можно смело удалять несуществующие материалы.
5. Вводим код проверки и жмём "удалить".

- Это ещё более изящный метод тыка, придуманный разработчиками для очистки битых тегов, но он работает.
- Будьте осторожны с этими манипуляциями: не удалите случайно материалы пользователей.
- Перед чисткой убедитесь, что у пользователя нет материалов.
- Время самостоятельного обновления информеров - 15 минут.

Чтобы не ждать 15 минут, а обновить сразу же информер с тегами, делаем по методу webanet:

1. Надо пройти в Панель Управления сайтом >> Информеры - найти Ваш информер с тегами - нажать на значок гаечного ключа () - всплывет окно для редактирования.
2. Вы ничего не меняете, а просто жмёте сохранить. 3. Идете на страницу с облаком, перезагружаете её и не находите битых тегов.

Как добавить логотип внутрь облака (это оптическая иллюзия, на самом деле, логотип сзади):

Если поступить просто, то нужно всего лишь присвоить контейнеру стиль с фоновым изображением. Например для ячейки таблицы:
Quote
<td style="background: url('images/logobgoblako.png') center center no-repeat;padding:0px 0px 0px 0px;"> Код для вставки облака </td>
Или контейнера
Quote
<div style="background: url('images/logobgoblako.png') center center no-repeat;padding:0px 0px 0px 0px;"> Код для вставки облака </div>

Если поступить сложнее, то:
В Таблице стилей (CSS) создать отдельный класс для контейнера облака. В случае с ячейкой таблицы:
Quote
td.backoblako { background-image: url('images/logobgoblako.png'); /* Путь к фоновому рисунку */
background-position: center center; /* Положение фона Синтаксис
background-position: [проценты | значение] | [left | center | right] || [top | center | bottom] */
background-repeat: no-repeat; /* Отменяем повторение фона */ }

images/logobgoblako.png - ссылка на логотип. На страницах сайта, там где вставляется код облака, для ячейки присваиваем класс backoblako
Quote
<td class="backoblako"> Код для вставки облака </td>

Если требуется сделать объект на всю ширину (или высоту) ячейки таблицы.
Поможет вот что:
Code
<table border="0" width="100%" cellpadding="0" cellspacing="0" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
А в теле ячейки (td) нужно удалить все style="padding-left:15px;" и прочее, тогда отступов от границ таблицы не будет.

Вопрос-ответ:

В: Почему, когда я смотрю сайт в Internet Explorer 6, то мне вместо флеш-облака тегов показывается обычное?
О: Так и должно быть. С помощью строки:
Code
    
$MYINF_4$    
Мы для пользователей ИЕ версии меньше 7 показываем обычное облако, иначе при нажатии на тег во флеш-облаке, будет выводиться страница с символами типа едактор.
В: Когда я щелкаю на один из тегов, в большинстве случаев страница
отображается коряво, а именно: смещается куда-нибудь второй контейнер, как правило вниз. Место на котором раньше находился контейнер становится занято найденными краткими описаниями статей и т.д.
О: Это связано с ограничением количества выводимых символов в результатах поиска. Например, иногда материал обрывается на полуслове или происходит прерывание таблицы (если материал добавлялся в виде таблицы), в результате вышестоящая (относящаяся к дизайну) таблица, преждевременно закрывается. Старайтесь вставлять материалы используя контейнеры <div>. Это у всех так,и это нельзя исправить.
В: Все сделал, но флеш-облако не отображается.
О: Посмотрите, прописаны ли теги к материалу, проверьте, чтобы теги материалов не содержали спецсимволы типа ', &, " . Также, посмотрите, не заблокировал ли Ваш фаерволл все флеш-объекты с сайта.
О: Если облако сделано с помощью виджета, то между его вставкой и появлением на странице может пройти некоторое время. Пока облако не появится будет просто пустой блок.
О: Если скриптовое облако вставлено на сайте, где используется конструктор, то есть не через дизайн, то облако может не отображаться из-за того, что могло произойти вложение блоков друг в друга.
O: Возможно не отображение облака на сайтах, работающих через дизайн. Когда код скрипта вставлялся в глобальный блок средствами бб кодов. Javascript нужно вставлять исключительно в html! Панель бб кодов делает скрипт нерабочим.
В: Я создал флеш-облако тегов, но там всего отображается 10 тегов, хотя прописано больше.
О: Возможно, Вы использовали виджет "Облако тегов", а там 10 - максимальное количество тегов. Для того, чтобы сделать больше, поставьте флеш-облако тегов согласно инструкции.
В: Теги выводятся по умолчанию через /search/tag1... но дело в том, что директория /search сначала была запрещена в robots.txt, потом в файле я снял это ограничение. Но при выводе самого информера облака тегов все теги выводятся в noindex, что собственно мне и нужно убрать, чтобы ссылки на теги были открыты для Яндекса.
О: Это сделано специально, т.к. открытие для поисковиков страниц с результатами поиска может привести к частичному выкидыванию сайта из индекса поисковиков. Подробнее в письме от Платона Щукина
В: Где можно посмотреть обозначения цветов в 16-ричной системе?
О: http://www.artlebedev.ru/tools/colors/ Цвет тегов нужно прописывать так: '0xцвет' , т. е. с одинарными верхними кавычками и через 0х , где 0 - цифра.
В: Создал облако тегов. При добавлении новых тегов, они не появляются в облаке.
О: Подождите. Время обновления информеров = 15 минут.



Источник: http://forum.ucoz.ru/forum/33-28742-1#482826
Категория: Интернет | Дата: (07.03.2012)
Просмотров: 4060 | Теги: тегов, Облако, 3D облако фотографий, 3D облако тегов | Рейтинг: 3.7/3
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]



Популярные статьи
Мегабит и мегабайт, в чем разница?

Мегаба́йт (МБ, Мбайт) — единица измерения количества информации, равная, в зависимости от контекста, 1 000 000 (106) или 1 048 576 (220) байтам...

...Читать далее>
Компьютерный магазин "Белый ветер" в Караганде или как я купил клавиатуру
В этой статье дорогие друзья, я бы хотел оставить отрицательный отзыв или если хотите жалобу на магазин компьютерной техники в Караганде "Белый ветер"......Читать далее>
Облако тегов
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Рейтинг@Mail.ru
Besucherzahler mail order russian brides
счетчик для сайта