| Главная » Статьи » Техника, технологии » Интернет | [ Добавить статью ] |
3D Облако тегов на UcoZ (как создать 3D облако на UcoZ)
Создание тегов – это процесс создания ключевых слов и связывания их с данными. Основная идея облака тегов заключается в отображении тегов в соответствии с их значением, их весом и частотой употребления по сравнению с другими тегами. Для этого используются такие элементы дизайна, как размер шрифта и цвет. Чем более важен какой-либо тег, тем большим размером шрифта и более ярким цветом он выделяется среди остальных тегов (по крайней мере, именно так должно быть). Облака тегов часто считают одним из традиционных элементов дизайна в Web 2.0. "Облака тегов" предлагают очень интересную модель навигации; и хотя эта техника иногда рассматривается как "альтернативная", ее не следует использовать в качестве замены традиционной навигационной модели, а лишь в качестве дополнительной возможности, предоставляющей посетителям возможность быстрее сориентироваться в структуре и содержимом сайта. Благодаря своей форме, напоминающей облака, дизайн тегов четко отделяет их от остальных элементов дизайна, размещенных на странице. Иными словами, можно рассматривать технологию тегов как независимую каталогизацию информации, которая связывает разные типы и виды информации, позволяет через теги находить связанные по смыслу (по тегам) документы. Согласен, идея прекрасная и действительно удобная и, видимо, появилась как попытка установления связей на сайтах с большим объемом разнородных документов. Есть даже термин для этого - Фолксономия
Итак приступим к созданию облака или списка тегов. Следует заметить, что не стоит создавать Облако, если у вас очень мало материалов с метками, т.к. это тогда будет бессмысленно. 1. Перед началом стоит активировать модуль "Поиск по сайту", т.к. ваши теги прямым образом будут связаны с этим модулем. 2. Постарайтесь как можно большему количеству материалов присвоить метки. Для этого в панельке управления материалом Помните: чем больше у вас будет меток, тем эффектнее будет ваше облако! 3. Далее создаем информер (Панель управления ==> Инструменты ==> Информеры). Выбираем раздел информеров "Теги", а далее указываем настройки: способ вывода - Облако тегов или Список тегов (см. ниже различия), модули, для которых будет строиться облако тегов, имаксимальное количество тегов. 4. Нажимаем кнопку "Создать" и вставляем полученный код (например, $MYINF_1$) в нужный шаблон в нужное место. 5. Вот и все! Список тегов создан. По мере увеличения количества меток материалов будет изменяться картина этого списка.   Установка: 1. Создайте информер по образцу, написанному выше, и способ вывода выберите "Облако тегов" 2. Скачайте архив:
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> Пояснения: Применяя условный оператор для $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); Настройка: В строке: Quote swfobject.embedSWF('ссылка_на_файл_tagcloud.swf', 'yoblako', '250', '200', '9.0.0', false, flashvars, params, attributes); *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"> Вопрос-ответ: В: Почему, когда я смотрю сайт в Internet Explorer 6, то мне вместо флеш-облака тегов показывается обычное? О: Так и должно быть. С помощью строки: Code $MYINF_4$ В: Когда я щелкаю на один из тегов, в большинстве случаев страница отображается коряво, а именно: смещается куда-нибудь второй контейнер, как правило вниз. Место на котором раньше находился контейнер становится занято найденными краткими описаниями статей и т.д. О: Это связано с ограничением количества выводимых символов в результатах поиска. Например, иногда материал обрывается на полуслове или происходит прерывание таблицы (если материал добавлялся в виде таблицы), в результате вышестоящая (относящаяся к дизайну) таблица, преждевременно закрывается. Старайтесь вставлять материалы используя контейнеры <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 | |
| Просмотров: 4418 | | |
щелкните на значке "Теги материала", в появившемся AJAX-окне через запятую введите ключевые слова, относящиеся к данному материалу 
| Всего комментариев: 0 | |
