• Страница 1 из 12
  • 1
  • 2
  • 3
  • 11
  • 12
  • »
Модератор форума: Yuri_G  
Теги
Модератор форума
Сообщение # 1 | 21:55:12
Многие мечтали, многие пытались что-то сделать ручками и вот оно ... с последним обновлением системы uCoz нам выпала возможность реализовать данную функцию у себя на сайте без особых проблем.

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

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

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

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

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


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

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

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

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

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

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

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

Прикрепления: 6104946.jpg (1.5 Kb) · 6139393.jpg (21.9 Kb) · 8529558.jpg (9.1 Kb) · 0607483.jpg (8.4 Kb)
Сообщение отредактировал SkyWalker - Пятница, 03 Апр 2009, 22:03:16
Victor
Сообщений: 1141
Репутация: 576

Сообщение # 2 | 16:15:55
Делаем flash-облако тегов.

Установка:

1. Создайте информер по образцу, написанному выше, и способ вывода выберите "Облако тегов"
2. Скачайте архив: 3. Распакуйте архив и закачайте его содержимое (swfobject.js и tagcloud.swf) на свой сайт (можно в любую папку).
4. Затем, в том месте, где будет flash-облако тегов, вставьте код:
Code
<?if($USER_AGENT$='ie' && $USER_AGENT_VER$<7)?>
$MYINF_4$
<?else?>
<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>
<?endif?>
Этот код нельзя вставлять в другие информеры (информеры нельзя вкладывать друг в друга, то есть нельзя вставлять содержимое информера $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
<?if($USER_AGENT$='ie' && $USER_AGENT_VER$<7)?>      
$MYINF_4$      
<?else?>
Мы для пользователей ИЕ версии меньше 7 показываем обычное облако, иначе при нажатии на тег во флеш-облаке, будет выводиться страница с символами типа едактор.
В: Когда я щелкаю на один из тегов, в большинстве случаев страница
отображается коряво, а именно: смещается куда-нибудь второй контейнер, как правило вниз. Место на котором раньше находился контейнер становится занято найденными краткими описаниями статей и т.д.
О: Это связано с ограничением количества выводимых символов в результатах поиска. Например, иногда материал обрывается на полуслове или происходит прерывание таблицы (если материал добавлялся в виде таблицы), в результате вышестоящая (относящаяся к дизайну) таблица, преждевременно закрывается. Старайтесь вставлять материалы используя контейнеры <div>. Это у всех так,и это нельзя исправить.
В: Все сделал, но флеш-облако не отображается.
О: Посмотрите, прописаны ли теги к материалу, проверьте, чтобы теги материалов не содержали спецсимволы типа ', &, " . Также, посмотрите, не заблокировал ли Ваш фаерволл все флеш-объекты с сайта.
О: Если облако сделано с помощью виджета 3D облака тегов , то между его вставкой и появлением на странице может пройти некоторое время. Пока облако не появится будет просто пустой блок.
О: Если скриптовое облако вставлено на сайте, где используется конструктор, то есть не через дизайн, то облако может не отображаться из-за того, что могло произойти вложение блоков друг в друга.
O: Возможно не отображение облака на сайтах, работающих через дизайн. Когда код скрипта вставлялся в глобальный блок средствами бб кодов. Javascript нужно вставлять исключительно в html! Панель бб кодов делает скрипт нерабочим.
В: Я создал флеш-облако тегов, но там всего отображается 35 тегов, хотя прописано больше.
О: Возможно, Вы использовали виджет 3D облако тегов, а там 35 - максимальное количество тегов. Для того, чтобы сделать больше, поставьте флеш-облако тегов согласно инструкции.
В: Теги выводятся по умолчанию через /search/tag1... но дело в том, что директория /search сначала была запрещена в robots.txt, потом в файле я снял это ограничение. Но при выводе самого информера облака тегов все теги выводятся в noindex, что собственно мне и нужно убрать, чтобы ссылки на теги были открыты для Яндекса.
О: Это сделано специально, т.к. открытие для поисковиков страниц с результатами поиска может привести к частичному выкидыванию сайта из индекса поисковиков. Подробнее в письме от Платона Щукина
В: Где можно посмотреть обозначения цветов в 16-ричной системе?
О: http://www.artlebedev.ru/tools/colors/ Цвет тегов нужно прописывать так: '0xцвет' , т. е. с одинарными верхними кавычками и через 0х , где 0 - цифра.
В: Создал облако тегов. При добавлении новых тегов, они не появляются в облаке.
О: Подождите. Время обновления информеров = 15 минут.
Благодарности:
  • Спасибо -RomB-, за хирургическое извлечение ссылок облака и его html-код для вставки облака на страницу
  • Отдельная благодарность minimus'у за решение проблемы кодировки URL
  • Ну и конечно же мега-респект Рою Танку, за его плагин для Вордпресс - флеш облако тегов
  • Большая благодарность webanet, за помощь в настройке и интеграции с системой юКоз
  • Огромное спасибо -F13- за сбор всей этой информации.
Прикрепления: cumulus.zip (48.4 Kb) · oval_vertical.zip (48.4 Kb) · extended_latin.zip (62.8 Kb)
Victor
Сообщений: 1141
Репутация: 576

Сообщение # 3 | 17:37:42
Делаем flash-облако ссылок

Помимо флеш-облака тегов, можно сделать флеш-облако ссылок (Для тех, кто хочет добавить "как бы теги" для страниц)
Информация будет браться из файла xml, в котором будут лежать любые ссылки с присвоенными стилями, размерами, цветами и т.д.
Допустим, есть файл site.ru/papka/tagcloud.swf
И он забирает информацию о ссылках и тегах из файла site.ru/papka/tagcloud.xml
В этом файле указываются ссылки и их параметры в формате:
Quote
<a href="адрес страницы" class="tag-link-12" rel="tag" style="font-size: 18pt;"
color="0xff0099" hicolor="0x000099">Я ссылка</a>

href="адрес страницы" - страница, на которую Вы попадете при нажатии на ссылку "Я ссылка"
class="tag-link-12" - класс для ссылки "Я ссылка"
style="font-size: 18pt;" - размер ссылки "Я ссылка"
color="0xff0099" - цвет ссылки "Я ссылка", где ff0099 - значение цвета в 16-ричной системе
hicolor="0x000099" - цвет ссылки "Я ссылка", при наведении на нее, где 000099 - значение цвета в 16-ричной системе
Я ссылка - Название ссылки, которая будет во флеш-облаке.

Соответственно, можно вручную указать размер каждой ссылки.
Ни один параметр не является обязательным, можно, вообще, только ссылку указывать.
Обратите внимание, что при каждом обновлении флеш-облака, ссылки располагаются в случайном порядке.
Файл tagcloud.swf в данном случае на выводимую информацию мало влияет.

Чтобы применить это себе, создайте файл tagcloud.xml в блокноте по образцу:

Code
<tags>
<a href="ссылка на любой объект" class="tag-link-31" rel="tag" style="font-size: 18pt;" color="0x0000AA" hicolor="0x0000FF">Я ссылка</a>      
</tags>
Загрузите в любую папку, сохраняя имя файла, главное, чтобы файл "tagcloud.xml" лежал в той же папке, что и tagcloud.swf.
На страницу добавлять так называемое флеш-облако ссылок, вводимых вручную, используя код:
Quote
<embed src="ссылка_на_файл_tagcloud.swf" play="true" loop="true" wmode="Opaque" quality="high" bgcolor="" align="" width="200" height="200">
width="200" - ширина в пикселях
height="200" - высота в пикселях
Не забудьте ссылка_на_файл_tagcloud.swf изменить на свою ссылку.
Прикрепления: tagcloud.swf (44.6 Kb)
SINOPTIK4895
Сообщений: 37
Репутация: 0

Сообщение # 4 | 18:06:51
Вопрос собственно не конкретно про теги, а скорей что при нажатий на этот тег потом. Я про сортировку, где можно отсортировать выводимые материалы? Например, в облаке тегов есть тег "новости" нажимаем- то что нашлось, но новость самая старая по дате вверху, надо сделать наоборот - вверху новые по дате.

webanet
Сообщений: 24067
Репутация: 4985

Сообщение # 5 | 18:16:09
SINOPTIK4895, нигде. системными средствами это не предусмотрено

ТУТ можно оставить своё мнение по любому вопросу
https://webanetlabs.net/
SINOPTIK4895
Сообщений: 37
Репутация: 0

Сообщение # 6 | 18:25:32
Вах, как жаль... sad

Lordar
Сообщений: 5
Репутация: 0

Сообщение # 7 | 15:19:14
Добрый день!
Вопрос такой. Я б хотел вывести тэги со "страницы материала и комментарии к нему", чтобы отображалось на странице "вид материала".
Вот сайт http://lordaron.ucoz.ru/load/
Прикрепления: 1180937.jpg (35.2 Kb) · 5357638.jpg (93.4 Kb)
Сообщение отредактировал Lordar - Пятница, 26 Апр 2013, 15:22:13
webanet
Сообщений: 24067
Репутация: 4985

Сообщение # 8 | 16:06:20
Lordar, аналогичные теги вставить невозможно, так как системный код $TAGS$, выводящий теги в виде материалов не работает

ТУТ можно оставить своё мнение по любому вопросу
https://webanetlabs.net/
Lordar
Сообщений: 5
Репутация: 0

Сообщение # 9 | 21:11:13
Цитата (webanet)
Lordar, аналогичные теги вставить невозможно, так как системный код $TAGS$, выводящий теги в виде материалов не работает
а каким способом можно вывести тэги, можете объяснить пжл, может через информер
сАнЁк3398
Сообщений: 11
Репутация: 2

Сообщение # 10 | 14:35:05
Добрый день. Подскажите пожалуйста.
Можно ли удалять из ПУ теги к материалу которые отображаются на страницы материала и комментария к нему ($TAGS$). Просто они там смотрятся как-то не в тему, навредит ли удаление поисковикам?
webanet
Сообщений: 24067
Репутация: 4985

Сообщение # 11 | 14:37:01
сАнЁк3398, вы можете удалить код выводящий теги $TAGS$ из шаблона
на поисковиках не скажется, так как теги закрыты от индексации и имеют поисковые урлы

ТУТ можно оставить своё мнение по любому вопросу
https://webanetlabs.net/
quelgun
Сообщений: 11
Репутация: 2

Сообщение # 12 | 18:18:16
Здравствуйте.
А данные теги влияют на индексацию поисковиками или же они только для фильтрации материалов на сайте?
Спасибо
webanet
Сообщений: 24067
Репутация: 4985

Сообщение # 13 | 18:21:48
quelgun, только для фильтрации материалов. от поиска они закрыты вообще и являются поисковыми ссылками.

итого: на индексацию не влияют

ТУТ можно оставить своё мнение по любому вопросу
https://webanetlabs.net/
Farid-Gorbushka
Сообщений: 36
Репутация: 0

Сообщение # 14 | 19:38:17
Можно ли визуально улучшить отображение $TAGS$, то есть в странице материала и комментариев к нему после новости теги отображаются просто списком через запятую. Возможно ли сделать что-то типа - маленькая иконка затем тег, запятая, потом опять иконка - тег и т.д., то есть чтобы перед каждым отображаемым тегом была иконка, и есть ли параметр указывающий сколько их там выводить можно максимум.
Если есть такой вариант, то где это можно задать
fflesh
Сообщений: 1784
Репутация: 1314

Сообщение # 15 | 20:43:20
Farid-Gorbushka,
Цитата (Farid-Gorbushka)
Можно ли визуально улучшить отображение $TAGS$, то есть в странице материала и комментариев к нему после новости теги отображаются просто списком через запятую. Возможно ли сделать что-то типа - маленькая иконка затем тег, запятая, потом опять иконка - тег и т.д., то есть чтобы перед каждым отображаемым тегом была иконка

Можно.

Цитата (Farid-Gorbushka)
и есть ли параметр указывающий сколько их там выводить можно максимум.

Нет, такого параметра нет - сколько добавили, столько и выведет.
Есть ограничение на кол-во добавляемых, посимвольное - max - 150 символов на все теги материала.

Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8
  • Страница 1 из 12
  • 1
  • 2
  • 3
  • 11
  • 12
  • »
Поиск: