Урок 3. Удаление тегов. Трехмерное облако тегов


Содержание материала:

Трехмерное облако тегов

Скрипты

Для отображения блока требуется Flash Player 10

Предлагаю Вашему вниманию описание установки 3-х мерного облака тегов на сайт. Многие из Вас видели на некоторых сайтах красивое облако тегов в 3D формате. Когда подводишь к нему курсор, он начинает вертеться. Стороны шара такого облака созданы из ссылок на определенные страницы сайта. Вот такое облако и будем ставить на сайт. Этот способ установки позволяет видеть ссылки облака не только тем, у кого установлен флеш и включен запуск JavaScript, но и тем, у кого это все отключено.

Это облако может работать с русским текстом (кириллицы) в строке адреса. Спасибо пользователю Mishgan за помощь в этом решении!

Для размещения облака на сайте нужен будет следующий код:

Для отображения блока требуется Flash Player 10

Код целиком готов к использованию. Достаточно подшлифовать облако под Ваш дизайн. Следующие параметры нужно изменить, чтобы облако выглядело на Вашем сайте как родное.

  • «400» — ширина будущего облака тегов в пикселях.
  • «300» — высота будущего облака тегов.
  • «9» — максимальная версия флеш-плеера, которая нужна для отображения облака.
  • «wmode», «transparent» — устанавливаем фон облака прозрачным. Если убрать эту строку, то можно будет самим задавать цвет фона.
  • «minFontSize», «8» — размер самого маленького шрифта в облаке. Размер задается в пунктах.
  • «maxFontSize», «14» — размер самого крупного шрифта в облаке. Размер задается в пунктах.
  • «tcolor», «0x009CFF» — цвет самого частого текста в облаке тегов в RGB формате. Частота текста определяется по свойству ссылки style. 0x не меняем.
  • «tcolor2», «0x009CFF» — цвет самого редкого текста в облаке тегов в RGB формате. Частота текста определяется по свойству ссылки style. 0x не меняем.
  • «hicolor», «0x009CCF» — цвет текста при наведении на него курсора. 0x не меняем.
  • «tspeed», «150» — скорость вращения.
  • «distr», «true» — тип вращения облака, может принимать значение «true» или «false».
  • «tagcloud», » $MYINF_31$ » — список тегов, которые будем выводить в облако. Формат должен быть следующий: «Текст». Если вы владелец сайта на UCOZ, то можете воспользоваться информерами: создайте информер, который будет отображать материалы, и напишите в его шаблоне «$TITLE$ $VERSION$» без кавычек. Незабудьте поменять «$MYINF_31$» на свой код.

После этих изменений можно сохранить текст и посмотреть, как он работает. Приятного использования.

Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.

Урок 3. Удаление тегов. Трехмерное облако тегов

Способ 1: Удаление тегов при помощи программы MP3TAG

— Скачиваете программу MP3TAG,

— открываете в ней Вашу флешку

— выделяете все музыкальные файлы (ctrl+A)

— правой кнопкой мыши выбираете «Удалить Тег»

Способ 2: Групповое удаление тегов стандартными сдерствами Windows

В определенный момент у меня возникла необходимость массово удалить свойства группы mp3 файлов в папке (так называемые ID3v1, ID3v2 теги: Исполнитель, Альбом, Год, Жанр и т. п.). В определенных случаях это нужно для того, чтобы проигрыватель не брал информацию о названии песни из ее тега, а отображал сам заголовок файла – именно так, как он подписан.Прежде всего я попробовал использовать для этой цели AIMP Advanced Tag Editor (опция «Удалить Тег»), однако программа очень долго сохраняла файлы, а в итоге ничего не изменилось. Недолго думая, я просто выделил в стандартном Проводнике Windows 7 все файлы и вызвал свойства. Так и родилось решение проблемы. Обратите внимание на надпись внизу окошка: «Удаление свойств и личной информации»:

Окно свойств mp3 группы файлов

Нажимаем на нее и получаем то заветное окошко, которое позволит нам выполнить нужные действия. Выбираем в нем «Удалить следующие свойства для этого файла» и ставим галочки напротив свойств, которые нужно удалить:

Окно удаления свойств файлов

Нажимаем ОК и дожидаемся окончания процесса:

Процесс удаления mp3 тегов группы файлов

Все готово. В проводнике теперь можно убедиться в отсутствии тегов mp3, выбрав отображение файлов таблицей.

#Инфографика в примерах

Визуализация информации в теории и на практике (96%)

вторник, 10 января 2012 г.

5 инструментов для создания облака тегов

  • WordCloud от Джейсона Девиса. Хороший сервис, не имеет проблем с кириллическими шрифтами и не требует регистрации. Для более менее приличной картинки измените параметры разброса наклона для слов (1 orientations from 0 to 60, например)

  • Many Eyes — крупный сервис от IBM для различных видов визуализации, про который также упоминалось. ( upd 2020 года: сервис IBM закрыт, теперь есть платный сервис Analytics с более расширенным функционалом аналитики).

Групповое удаление тегов mp3 стандартными средствами windows

В определенный момент у меня возникла необходимость массово удалить свойства группы mp3 файлов в папке (так называемые > Прежде всего я попробовал использовать для этой цели AIMP Advanced Tag Editor (опция «Удалить Тег»), однако программа очень долго сохраняла файлы, а в итоге ничего не изменилось. Недолго думая, я просто выделил в стандартном Проводнике Windows 7 все файлы и вызвал свойства. Так и родилось решение проблемы. Обратите внимание на надпись внизу окошка: «Удаление свойств и личной информации»:

Топ-пост этого месяца:  30 лучших техник CSS для начинающих

Окно свойств mp3 группы файлов

Нажимаем на нее и получаем то заветное окошко, которое позволит нам выполнить нужные действия. Выбираем в нем «Удалить следующие свойства для этого файла» и ставим галочки напротив свойств, которые нужно удалить:

Окно удаления свойств файлов

Нажимаем ОК и дожидаемся окончания процесса:

процесс удаления mp3 тегов группы файлов

Все готово. В проводнике теперь можно убедиться в отсутствии тегов mp3, выбрав отображение файлов таблицей.

Сделать красивое облако тегов на сайте.

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

Облако тегов может быть реализовано в виде: трёхмерного Flash-ролика или последовательности слов (гиперссылок) различного размера. В этой статье будет рассмотрено, как сделать облако тегов на простом html сайте и как сделать красивое flash облако тегов.

Облако тегов располагается, как правило, сбоку сайта, иногда его можно найти под навигацией. Такое меню очень популярно на блогах, где с его помощью можно вытащить публикации с определенными тегами или на какую-то конкретную тематику. Тем не менее, несмотря на свое удобство, такая система не может заменить полноценной постраничной навигации. Облако тегов можно использовать разве что для облегчения поиска по сайту.

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

Сделать облако тегов для сайта можно несколькими способами. Очень красивым оно получится, если будет сделанным с помощью flash. Изящный трехмерный ролик будет отлично смотреться на блоге. Ссылки такого меню постоянно находятся в движении, а еще ими можно управлять при помощи курсора.

Чтобы установить красивое облако, можно использовать PHP-скрипт. Полноценную навигацию облако тегов никогда не заменит. Поэтому, в первую очередь, лучше позаботиться о хорошем меню на сайте для пользователей.

Если речь идет о блоге, то здесь следует продумать несколько систем, чтобы ориентироваться в материалах. Помимо обычной системы категорий, нужно оформить меню для самых читаемых материалов, а также для новых статей. Если страница очень длинная, то есть смысл поставить кнопку, которая будет переносить читателя сразу наверх сайта. Удобная навигация служит одним из факторов привлечения пользователей. Если сайт имеет хорошее и понятное меню, то посетители могут на нем задержаться надолго. При условии, разумеется, что на веб-ресурсе содержится полезная информация.

Создать красивое облако тегов можно как вручную, так и прибегнув к помощи специальных генераторов — программ, создающих облака на любой вкус и запрос. Реализовать облако меток можно с помощью flash-технологий или в виде гиперссылки html. Также существуют специальные плагины для установки облака меток на сайт или блог, в разных CMS — различные. Вы всегда можете задать необходимое именно вам количество отображаемых меток, а также поэкспериментировать с размером и цветом шрифта и оформлением облака.

Создание 3D облака тегов для сайта с использованием flash.

В этой статье рассмотрено создание очень красивого 3D облака тегов, на примере сайта управляемого CMS Ucoz, с использованием flash. В сети достаточно много материалов, посвященных этой теме, но все они, обычно, несколько сложны для новичков. Здесь все написано подробно и простым языком, у начинающих никаких проблем не возникнет.

1. В корневом каталоге сайта создаем при помощи файлового менеджера папку с названием tagcloud. Можно назвать и по-другому, но в скриптах прописаны адреса именно до этой папки и, чтобы не изменять файлы назовем папку именно так.

2. Закачиваем в эту папку файлы swfobject.js и tagcloud.swf (для того, чтобы получить эти файлы кликните по соответствующей ссылке правой кнопкой мыши и в появившемся меню выберите пункт “Сохранить”).

3. В нужное место страницы сайта, там, где Вы хотите разместить облако тегов, вставьте HTML код.

Для отображения блока требуется Flash Player

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 сайте.

Для размещения облака тегов на обычном html сайте необходимо выполнить всего один шаг.

Код, который Вы видите внизу, вставить между тегами и

Алгоритм облака тегов

17.03.2014, 00:13

Облака тегов
Есть смысл? или так просто примочка.

Эффективность использования облака тегов или модулей подобных «Нас нашли»?
Приветствую. Недавно возник вопрос: насколько эффективно использования облака тегов? Получается.

Топ-пост этого месяца:  Новый SEMBOOK от Ingate стал бесплатным

Алгоритм поиска тегов
Есть открывающий тег и закрывающий, нужно найти тег индекс вхождения соответсвующий данному в.

Простое облако тегов средствами PHP

В данном уроке мы будем делать простое облако тегов для материалов, которые мы будем заносить в нашу базу. Конечно уже есть большое количество готовых скриптов, но лучше попробовать написать своими руками, чтобы несколько закрепить материал, и возможно узнать что-то новое.

В уроках Евгения очень много материала по тому, как добавлять в базу данные, поэтому мы не будем акцентировать на этом внимание и сразу приступим к самому облаку тегов. Допустим у нас есть следующие таблицы в базе:

Следующий фрагмент кода необходимо вставить перед занесением основных данных в базу:

Здесь мы проверяем наличие введенных пользователем ключевых слов при создании материала, если они есть, то разбиваем их функцией explode() через селекторы «,» (запятая, но вы можете использовать любые другие селекторы для того, чтобы в базу можно было заносить словосочетания в которых может содержаться запятая) и заносим все полученные слова в единый массив $chars. Создаем переменную $i и приравниваем ее к 0.

Запускаем цикл, где мы в таблицу базы tags добавляем полученные функцией explode() ключевые слова.

В $result_chars заносим избавленное от пробелов по краям значение $chars[$i], чтобы у нас не получались в базе на первый взгляд дублированные теги. В случае если такое ключевое слово уже было, то мы увеличиваем показатель count в базе на 1, если не было ключевого слова, то добавляем его в базу с показателем count =1. Переменную $i увеличиваем на 1. Данный цикл мы выполняем до тех пор пока $chars[$i] не станет равной пустой записи.


Закрываем внешний цикл:

Теперь там где нам необходимо вывести наше облако тегов вставляем такой код:

Тут мы формируем простой список, для каждого элемента списка создаем стиль font-size куда мы будем передавать расчет размера текста, в зависимости от значения count в таблице tags. Можете попробовать подставить свои значения, чтобы подобрать более удобные размеры шрифта. Я остановился на исходном 11 размере.

Чтобы все это прилично смотрелось можно добавить немного стилей:

В стилях мы ставим для каждого элемента li обтекание слева, а само облако делаем шириной 210 пикселей. Отлично облако готово, теперь необходимо заставить работать вывод материалов при клике на элементы облака.

Проверяем наличие переданной переменной $tag, эта переменная у нас будет частью регулярной функции, по которой скрипт будет искать наличие вхождения тега в поле keywords в таблице базы materials. Если совпадение произошло, то выводится краткий дескрипт материала, если нет, то материал соответственно невидим.

Таким же способом можно удалять теги в случае, если материал был удален из базы. Точно так же используем функцию explode() и далее, либо отнимаем 1 у каждого тега материала, либо полностью удаляем тег. Как вариант, тег можно оставить в базе, но приравнять его к 0, а в само облако не выводить теги, которые равны 0.

Вариант достаточно гибкий и его можно перевести на рельсы AJAX для повышения производительности сайта, ведь если у вас не 10 материалов как в примере, а сотни, то перезагрузка страницы может занять достаточно долгий период времени.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.ruseller.com
Автор: Павлов Александр
Урок создан: 24 Февраля 2011
Просмотров: 34296
Правила перепечатки

5 последних уроков рубрики «PHP»

Фильтрация данных с помощью zend-filter

Когда речь идёт о безопасности веб-сайта, то фраза «фильтруйте всё, экранируйте всё» всегда будет актуальна. Сегодня поговорим о фильтрации данных.

Контекстное экранирование с помощью zend-escaper

Обеспечение безопасности веб-сайта — это не только защита от SQL инъекций, но и протекция от межсайтового скриптинга (XSS), межсайтовой подделки запросов (CSRF) и от других видов атак. В частности, вам нужно очень осторожно подходить к формированию HTML, CSS и JavaScript кода.

Подключение Zend модулей к Expressive

Expressive 2 поддерживает возможность подключения других ZF компонент по специальной схеме. Не всем нравится данное решение. В этой статье мы расскажем как улучшили процесс подключение нескольких модулей.

Совет: отправка информации в Google Analytics через API

Предположим, что вам необходимо отправить какую-то информацию в Google Analytics из серверного скрипта. Как это сделать. Ответ в этой заметке.

Подборка PHP песочниц

Подборка из нескольких видов PHP песочниц. На некоторых вы в режиме online сможете потестить свой код, но есть так же решения, которые можно внедрить на свой сайт.

Какой программой можно удалить абсолютно все теги в mp3 файлах?

Используя Pistonsoft MP3 Tags Editor, вы можете быстро редактировать теги, переименовывать аудио файлы и папки, экспортировать данные в разные форматы, сохранять плейлисты и многое другое. Пакетный режим поможет вам изменить одинаковые поля тегов, одновременно в большом количестве выбранных вами музыкальных файлов.

Благодаря использованию технологии электронных таблиц в Pistonsoft MP3 Tags Editor, вы можете редактировать аудио теги прямо ячейках сетки. Это делает редактирование тегов MP3, OGG, ASF и WMA файлов, таким же простым как работа с таблицами.

С помощью Pistonsoft MP3 Tags Editor вы можете легко вставить картинку или изображение обложки альбома в музыкальный файл. Практически все аудио проигрыватели будут отображать это изображение при воспроизведении.

Недостающие поля тегов вы можете попробовать получить через Интернет используя онлайн музыкальную базу данных FreeDB. Наш Pistonsoft MP3 Tags Editor попытается автоматически подобрать подходящие данные, основываясь на количестве песен и их продолжительности. А вам останется только выбрать подходящий альбом из списка, и все теги будут автоматически заполнены во всех музыкальных файлах.

Упорядочьте свою коллекцию музыкальных файлов наконец-то!

Генератор облака тегов из слов и текста

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

Топ-пост этого месяца:  Модули в Joomla — просмотр позиции, настройка и вывод, а так же назначение суффиксов класса

Для установки угла поворота можно перетаскивать стрелки на угловой диаграмме. Можно указать ваш шрифт, изменить способ масштабирования. Можно установить разные типы спиралей, начальный и конечный угол поворота. Текст для облака можно вводить построчно. Не используйте союзы и короткие слова. Чем больше слов — тем красивее получится облако. Чем чаще встречается слово в тексте — тем больше его размер в облаке.

Создание управляемого облака тегов стандартными средствами Joomla.

Некоторое время назад один из заказчиков поставил передо мной следующую задачу:

  • На сайте нужно добавить облако тегов в примерно том виде, как показано на вступительном рисунке
  • Данное облако должно иметь ручное управление, т.е. все ссылки и размеры отдельных тегов настраиваются вручную

Задача весьма актуальная для многих сайтов, поскольку позволяет создать в ненавязчивом виде список ссылок с главной страницы на другие важные страницы сайта.

Как бы ВЫ решили данную задачу? Мое решение приведено в статье.

Следует помнить, что необходимо не просто реализовать подобное облако на сайте, но и дать возможность управления им через админку. Полного управления. Изменения текстов, гиперссылок, порядка размещения тегов, их размеров.

Облако тегов. Поиск подходящего расширения?

Первой мыслью, которая у меня появилась, был переход в каталог расширений Joomla и поиск чего-нибудь подходящего. Беглый осмотр каталога результатов не дал. Все расширения, представленные в разделе тегов, не имеют ручного управления, а формируют облако автоматически, на основе ключевых слов страниц сайта или стандартного функционала тегов Joomla.

Вторая мысль: написать самостоятельно. Прикидываю в голове трудозатраты, возможную оплату, и понимаю, нет – слишком долго и дорого для заказчика.

Третья мысль: SEBLOD. Для такой задачи слишком велик. Отпадает.

Четвертая мысль: стандартный компонент Joomla «Ссылки». Не подходит. Функционала недостаточно.

Далее начинается мозговой штурм. Вот вроде простая задача, а как-то все идеи мимо. И тут, наконец, в голову приходит, на мой взгляд, нечто необычное.

Облако тегов. Нестандартное применение стандартных возможностей Joomla.

Идея была следующей: а почему бы не использовать для создания управляемого облака тегов… меню Joomla?

  • Можно создавать через админку любое количество пунктов меню и устанавливать для них произвольные URL
  • Можно менять порядок пунктов меню
  • Можно вывести пункты меню на сайте в оформлении тегов

Вроде все отлично. Оставалась только одна загвоздка. Стандартный функционал меню Joomla не позволяет произвольно изменять размер шрифта отдельных пунктов. Но, как оказалось, эта проблема легко решается.

Облако тегов. Реализация.

Для всех желающих самостоятельно создать управляемое облако тегов, описываю реализацию.

Шаг 1. Создаем меню и пункты меню.

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

Переходим в менеджер меню Joomla и создаем новое меню.

В новом меню создаем пункты, являющиеся произвольными URL:

В настройках каждого пункта меню указываем текст тега и ссылку на страницу, которую он должен открывать:

Шаг 2. Создаем модуль меню и выводим его в заданную позицию.

После того как меню создано и наполнено будущими тегами, необходимо вывести его на сайте. Для этого переходим в Менеджер модулей Joomla, создаем новый модуль типа Меню, ивыбираем для его публикации удобную позицию.

Если все сделано правильно, после сохранения модуля, на сайте должно появиться что-то вроде этого:

Да, неплохо, но пока совсем не похоже на облако тегов.

Шаг 3. CSS-оформление меню под облако тегов.

Добавим чуточку CSS-магии.

Для начала вернемся в настройки нашего модуля меню, найдем там опцию Суффикс CSS-класса модуля и добавим в нее CSS-класс, в котором будет формироваться все оформление облака тегов. Я использовал текст « footer_tags». Текст пишем без кавычек. Также обратите внимание на пробел перед текстом. Он обязательно должен присутствовать.

После того как CSS-суффикс добавлен, нам необходимо добавить CSS-стили в CSS-файл шаблона. Как найти этот файл? Очень просто. Откройте исходный html-код страницы в браузере, найдите поиском все файлы, оканчивающиеся на «.css». Выберите из них тот файл, который находится в папке css используемого вами шаблона Joomla. В него и вносите все изменения.

Добавляем в CSS-файл следующие строки:

В результате CSS-манипуляций получается что-то вроде:

Неплохо, но немного не то. Не хватает разных размеров для каждого отдельного тега.

С заданием уникальных, изменяемых через админку, размеров каждого отдельного тега нам поможет опция CSS-класс ссылки, которая есть в настройках каждого пункта меню.

Что с ней делать? Добавим дополнительно в наш CSS-файл вот такие стили:

Этим действие мы создаем 6 предопределенных размеров шрифтов, которые в дальнейшем могут быть применены к любому из тегов. Если 6 размеров недостаточно, никто не мешает создать их 10, 20, да хоть 100.

Теперь в админке мы можем зайти в настройки пункта меню любого тега и вписать в поле CSS-класс ссылки, например, font6. После этого размер тега на сайте автоматически увеличится.

Облако тегов. Итоги.

В результате выполнения всех вышеописанных действий, мы получили полностью управляемое облако тегов, которое показано ниже:

Также можно посмотреть «живой» пример на сайте (в подвале).

В этом облаке мы можем:

  • Менять количество тегов и ссылки страниц, на которые они ведут
  • Менять порядок тегов в облаке
  • Менять размеры каждого отдельного тега

Если по аналогии со стилями размеров добавить еще и стили цветов, то мы сможем также задавать цвет каждого отдельного тега.

У меня есть ощущение, что людям, занимающимся продвижением своего сайта, такое облако тегов будет гораздо полезнее, чем любое из тех, которые представлены в каталоге расширений Joomla, ведь оно не только улучшает юзабилити сайта, но и позволяет лучше оптимизировать сайт под поисковые системы. Надеюсь, оно окажется полезным и Вам!

Добавить комментарий