Servisneva.ru

Сервис Нева
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

5 способов поиска в Интернете с помощью облаков тегов

5 способов поиска в Интернете с помощью облаков тегов

5 способов поиска в Интернете с помощью облаков тегов

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

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

Tagxedo

облако слов

Этот сервис также позволяет создать облако тегов без регистрации. В настройках пользователь может изменить цветовую схему, пространственную ориентацию и параметры текста. Создать облако слов можно различной формы, выбрав подходящий вариант из имеющейся библиотеки. Текст для анализа можно загрузить на сайт либо указать ссылку на него. Кириллица в данном сервисе отображается корректно. После создания готового объекта, его можно загрузить на свой компьютер в виде изображения в формате png или jpg. При этом можно указать параметры качества.

Параметры функции wp_tag_cloud

Выводить облако меток WordPress можно через файлы шаблонов с помощью соответствующей функции. Код добавляете, например, в сайдбар (sidebar.php):

Чтобы понять какой результат получится в ходе выполнения данной строки, привожу список всех параметров wp_tag_cloud (величина по умолчанию — указана в скобках):

  • smallest (8) — минимальный размер шрифта для наименее используемых тегов;
  • largest (22) — максимальная величина шрифта у популярных меток;
  • unit (pt) — определение единицы измерения размера шрифта: pt, px, em, % (я обычно ставлю в пикселях px);
  • number (45) — отображаемое количество элементов/тегов;
  • format (flat) — формат вывода ссылок: flat — разделенные пробелом, list — список UL, array — как PHP массив;
  • separator (пробел, «n») — символ-разделитель между линками;
  • orderby (name) — сортировка: name — по названию, count — по популярности;
  • order (ASC) — порядок сортировки: возрастающая — ASC, по спадающей — DESC, случайным образом — RAND;
  • exclude — исключенные метки из блока TagCloud;
  • include — теги для включения в облако (показываются только они);
  • topic_count_text_callback — функция выводит текст с количеством элементов у меток;
  • link (view) — линки ведут на страницу просмотра (view) либо на редактирование (edit);
  • taxonomy (post_tag) — задает какие таксономии там будут: post_tag, category, link_category или другие.
  • show_count (false) — показывать ли число объектов;
  • echo (true) — выводить результат на сайте или нет.

Сохраняем и проверяем, что в итоге вышло. Как правило, я также делаю выравнивание содержимого посредине. Добавляйте в файл стилей style.css код:

О компании

Mvote.ru — это сервис интерактивных продуктов и SMS-услуг.

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

    для голосования (опроса) (веб-сервис для мероприятия)
  • голосование с пультами (аренда пультов)
  • задать вопрос/передать сообщение с выводом на экран в зале (SMS-диалог, приложение для конференций).

SMS-сервисы для широкого круга задач: SMS-акция (промо-акция), сервисы оплаты через SMS и т.д.

Также мы разрабатываем веб и мобильные приложения, высоконагруженные системы.

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

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

Технологичное решение для проведения интернет-голосований (смс-голосование на сайте) и для объективного голосования в социальных сетях (Вконтакте, Одноклассники, Facebook и т.д.).

Мы готовы к работам в сжатые сроки и оперативному отклику. Отправить запрос.

Способ 2. Вставить код в нужное место

После точки с запятой параметры ширины, высоты и цвета. Замените эти значения на свои или оставьте как есть.

Облаго тегов будет полезна на порталах и кино-сайтах созданных в системе uCoz. Облако показывает более используемые теги большим размером. По клику на тег будет осуществлен переход на страницу поиска по сайту.

Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!

Шаги по созданию облака тегов популярных ссылок

Наш сайт имеет статьи, которые ежедневно просматривают просмотры страниц, и это простой показатель, который мы можем использовать для создания облака тегов. Итак, для этого примера мы создадим облако тегов из списка статей, 25 лучших статей на моем сайте за неделю с 1 января 2007 года.

Читать еще:  FlashGot для Firefox - обзор расширения, аналоги для Chrome, Opera, Яндекс.Браузера

Определите, сколько уровней вы хотите в своей иерархии.

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

Определите точки отсечки для каждого уровня.

Это может быть так же просто, как сокращение просмотров страниц в день на 1/10 ломтиков — т.е. если самая большая страница на вашем сайте получает 100 просмотров страниц в день, вы можете нарезать ее как 100 +, 90-100, 80-90, 70-80 и т. д. Я прервал мои просмотры страниц таким образом.

Перечислите свои позиции в порядке просмотра страниц и дайте им ранг, основанный на шаге 2

Не беспокойтесь, если у вас нет предметов в некоторых слотах, что делает облако более интересным.

Назовите свой список в алфавитном порядке (или любой другой вид, который вы хотите использовать).

Это то, что делает облако интересным. Если вы оставите его отсортированным по рангу, тогда это будет список с наибольшими элементами сверху вниз до самого маленького в нижней части.

Напишите свой HTML так, чтобы ранг был номером класса.

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

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

Создание облака тегов при помощи jQuery

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

tag cloud

При создании облака тегов легко напортачить как с дизайном, так и с кодом. Благодаря jQuery также легко и сделать все как надо. Мы будем использовать новейшую версию 1.3 jQuery для нашего примера и работать с PHP и MySql для поставки наших тегов в формате JSON (* JavaScript Object Notation – текстовый формат обмена данными, основанный на JavaScript. Тут и далее примеч. пер.). Изначальное наполнение базы данных тегами в данном руководстве не рассматривается, но их получение и передача ожидающей странице при помощи AJAX (* Asynchronous JavaScript And XML – асинхронный JavaScript + XML) представляют из себя довольно плевое дело.

Начало работы

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

Сохраните его как tagcloud.html. На данном этапе у нас почти ничего нет на странице, всего лишь простой контейнер для облака тегов и заголовок второго уровня внутри него. Все остальные необходимые нам элементы могут быть созданы, когда нам понадобятся. Мы подключаем таблицу стилей в заголовке для добавления определенного стилевого оформления, код которого напишем позже, и в конце тела мы подключаем jQuery. Мы выполняем запрос для получения ответа в виде JSON-файла в блоке кода скрипта, что идет после ссылки на jQuery.

getJSON

Мы используем псевдоним $ (* основной метод – jQuery()) для вызова метода jQuery getJSON, который представляет из себя высокоуровневую абстракцию метода ajax; обычно методы jQuery() вызываются для объектов, которые являются ссылками на элементы, однако поскольку мы не ссылаемся ни на какой элемент, то можем использовать вместо них псевдоним jQuery(). Также это означает, что объект jQuery не будет возвращен этим методом. Вместо этого возвращается xmlHTTPRequest.
Метод getJSON принимает два аргумента в нашем примере (хотя при необходимости могут быть использованы дополнительные); первым параметром является URL-адрес, по которому мы выполняем запрос. Поскольку мы будем получать JSON-объект, то имеет смысл воспользоваться getJSON. Мы бы могли воспользоваться методом ajax, но тогда нам необходимо было бы задать значения для большего количества свойств запроса (например dataType), так что за счет использования метода getJSON мы сократили некоторое количество кода и сберегли немного времени. В конце URL мы указываем функцию обратного вызова JSONP (* JSON with Padding, или JSON-P – JSON с набивкой; дополнение к базовому формату JSON. Он предоставляет способ для запроса данных с сервера, находящегося в другом домене — операцию, запрещённую в типичных веб-браузерах из-за политики ограничения домена) – ?callback=? – за счет которого браузер сможет непосредственно манипулировать объектом JSON, даже если он присылается с другого домена, без необходимости какого-либо участия со стороны сервера.

Читать еще:  Как очистить кэш браузера Internet Explorer

Функция обратного вызова

Второй аргумент – это функция обратного вызов, которую мы хотим вызвать сразу после возвращения объекта странице. Пока что мы не написали в этой функции никакого кода, поскольку у нас нет объекта JSON для работы. Скоро мы вернемся к этой странице, как только мы напишем код PHP. Чуть ранее я сказал, что нет необходимости в каком-либо участии сервера при работе с функциями обратного вызова JSONP, но все же сейчас мы переключимся и напишем немного кода PHP. Это так только потому, что нет поставщика необходимых нам данных. Так что нам придется создать его самостоятельно. Если бы имелся поставщик популярных тегов в формате JSON, то мы по-прежнему могли бы воспользоваться тем же самым кодом для его запроса и обработки.

Добавляем код PHP

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

Сохраните ее как tagcloud.php. В этом руководстве предполагается, что у вас установлена и настроена MySql и создана база данных под названием tagcloud. Также предполагается, что внутри этой базы имеется таблица под названием tags. В этой таблице будут содержаться строки с тегами и частотой их встречаемости. Хочу подчеркнуть, что код этого руководства не предназначен для предоставления в публичный доступ, поскольку вопросы безопасности не учитывались при его создании; нам необходим поставщик AJAX-ответа для нашего примера, и этот код им и является.

Давайте кратко рассмотрим, что у нас получилось.

В начале мы указываем информацию, которая будет нам необходима для подключения к базе данных. Проверьте, что вы заменили your_password_here собственно паролем, который вы задали для получения доступа к MySql. Затем мы подключаемся к базе данных и указываем запрос, который будем использовать для доступа к данным из таблицы tags.

Далее мы создаем строку, с которой будет начинаться JSON-объект, до перебора каждой строки в таблице и выполнения запроса. Мы продолжаем наращивать JSON-строку внутри цикла for, добавляя данные из обоих полей текущей строки в качестве свойств и значений.

Мы выполняем простую проверку при каждой итерации цикла при помощи условного оператора if, чтобы понять, работаем ли мы с последней строкой таблицы; если нет, то мы используем запятую для отделения каждого объекта, в ином случае мы закрываем объект. JSON-объект будет оформлен в виде объектов для отдельных записей, содержащихся внутри единственного массива, который обернут в объект.

Далее мы отвечаем на запрос, используя данные из пришедшего запроса по методу GET; это необходимо для того, чтобы воспользоваться функцией обратного вызова jsonp на нашей главной странице. Нам необходимо указать имя параметра URL, который следует за URL-адресом в JavaScript, которым в нашем примере является просто callback. Однако мы не можем указать имя функции, в которую хотим передать ответ, поскольку эта функция анонимная. jQuery разберется с этим и обеспечит доставку данных в нужную функцию.

По завершении мы закрываем соединение. На данном этапе мы по-прежнему ничего не видим на странице, но если вы запустите этот код из папки для размещения контента вашего веб-сервера и воспользуетесь вкладкой NET Firebug, то увидите данные, возвращенные странице:

tag cloudtag cloud tag cloud

Обрабатываем json-файл

Теперь, когда у нас имеется кое-какие данные в формате JSON, давайте вернемся к HTML-странице и поработаем с ней. Первым делом добавим возможность извлечения данных; в tagcloud.html удалите комментарий, который мы оставили внутри функции обратного вызова, и добавьте следующий код:

Сначала мы создаем новый элемент для списка, задаем значение его атрибута id и добавляем его в наш контейнер на странице. Поскольку данные в JSON-объекте расположены хаотично, то нам подходит неупорядоченный список. Затем мы используем метод jQuery each() для перебора всех элементов массива, заключенного внутри нашего объекта JSON. При каждой итерации мы создаем новый элемент списка и новую ссылку.

Читать еще:  Telegram для Android

Мы задаем в качестве текста каждой ссылки значение свойства tag текущего объекта из нашего JSON-объекта, а также устанавливаем значения атрибутов title и href. Выбор используемой ссылки будет главным образом зависеть от способа, которым будут сгенерированы страницы, на которых отображаются теги; мы бы могли довольно просто сгенерировать страницу, оформленную в виде страницы с результатами поиска, на которой были бы перечислены все страницы, на которых встречается какой угодно выбранный тег, при помощи PHP или .NET (создание страницы с результатами в этом руководстве не рассматривается). Ссылка затем добавляется в элемент списка, и оба элемента добавляются к <ul>.

На данном этапе наша страница должна выглядеть следующим образом:

tag cloud

Это, безусловно, список ссылок, однако еще не облако тегов. Мы можем запросто подкорректировать внешний вид виджета, добавив немного кода CSS. Давайте это и сделаем. В новой странице вашего текстового редактора добавьте следующий код:

Сохраните ее как tagcloud.css. Используемое стилевое оформление – смесь правил, которые определяют его эстетические и функциональные характеристики, например для указания, где должны плавать элементы списка, и установления их размеров, что используется для контролирования работы виджета. Я задал как можно меньше правил стилевого оформления, поскольку нет сомнений, что вам придется изменить большинство правил, используемых для определения чисто визуальных эффектов, для согласования с темой имеющегося у вас сайта.

Один момент, на который стоит обратить внимание, – используемый нами размер шрифта; размер шрифта 70% задан для внешнего контейнера; это наименьший размер текста, который будет в нашем облаке тегов. Мы будем подстраивать размер шрифта некоторых тегов при помощи единиц измерения em (* единица длины относительно размера шрифта элемента) в конечной части скрипта. Так что установление исходного размера шрифта важно для обеспечения его соразмерности.

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

tag cloud

Завершаем код скрипта

Одна из отличительных черт тегов в облаке – то, что размер отдельных тегов устанавливается в зависимости от частоты их встречаемости; чем более популярен тег, тем больше его размер. Мы запросто можем воспользоваться свойством freq нашего объекта JSON для изменения размера каждой ссылки в соответствии с популярностью соответственного тега. Добавьте следующий код между кодом для создания новой ссылки и ее добавления к неупорядоченному списку:

Вообще-то, этот метод css () мог бы запросто быть «прицеплен» прямо к объекту jQuery после того, как мы задали значение для атрибута title ссылки, однако мы задаем значения двух атрибутов по отдельности для лучшей читабельности кода. В методе css () мы задаем значение атрибута для стилевого оформления fontSize и используем стандартный тернарный условный оператор JavaScript (* от лат. ternarius — «тройной», единственный оператор в JavaScript, принимающий три операнда), чтобы проверить, меньше ли 1 текущее значение свойства freq, поделенное на 10. Если да, то мы добавляем 1 к арифметическому расчету и затем выполняем конкатенацию строки ’em’ в конце. За счет этого будет гарантировано, что значение размера шрифта всех тегов не меньше 1em, что эквивалентно значению 70%, заданному в стилевом правиле для контейнера.

Однако, если значение свойства freq, поделенное на 10, больше 1, то мы затем проверяем (используя другой тернарный оператор, что эквивалентно наследованию циклов for), больше ли 2 оно; если да, то мы просто используем в качестве значения свойства font-size 2em. Любой элемент со значением размера шрифта 2em по размеру будет в два раза больше изначально заданного значения 70%, что, вероятно, составляет размер, которого должен был бы быть любой тег данного типа виджета. Любые значения больше 1, но меньше 2, используются в форме их дроби для установления в качестве значения размера шрифта значений между 1 и 2 em. В конечном итоге страница теперь должна выглядеть в браузере так, как показано ниже на скриншоте:

tag cloud

Резюме

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

голоса
Рейтинг статьи
Ссылка на основную публикацию
ВсеИнструменты
Adblock
detector