Простое облако тегов на Вашем сайте

если Ваш сайт построен на html

на страницах сайта

www.electrosad.ru

Последнее время на множестве сайтов наравне с меню стало применяться "Облако тегов" которое дает возможность дать посетителю быстрый доступ к наиболее популярным статьям или разделам сайта. Мой сайт проработал несколько лет и мне тоже захотелось "украсить" его и помочь посетителям. Здесь я расскажу о создании и установки облака тегов для сайта выполненного в html формате и имеющего ftp  доступ для закачки файлов на него.

 
 

Облако тегов, Облако меток, или Облако ключевых слов (англ. tag cloud, wordle)визуальное представление списка ярлыков (или категорий). Частота упоминаний, поисков, ссылок в интернете с определённого сайта неких слов, терминов, имён отображается в специальной области в виде изображения этих слов в формате гиперссылок. Размер изображения тем больше, чем чаще использовался данный тег (слово, термин или имя).

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

Для создания облака тегов на сайте созданном с помощью html и имеющем ftp доступ, необходимо:

  1. определиться с источником ключевых слов,

  2. выбрать скрипт,

  3. подготовить файл ссылок,

  4. внести в Ваш html файл страницы, где будет установлено облако тегов, скрипт для включения облака,

  5. установить файлы обеспечивающие работу скрипта в папку сайта.

 

Источник ключевых слов

Где взять ключевые слова?

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

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

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

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

Для корректности следует брать поисковые запросы за достаточно большой интервал времени - неделю месяц или неделю.

Пример:

Для этого сайта поисковые запросы Ретинг@mail.ru за

 

Поисковые запросы / сайта "Этот загадочный компьютер"
За месяц
За неделю
Просмотров Запросы
92 песочница программа
40 как настроить монитор чтобы не уставали глаза
39 новые процессоры intel 2012
31 охлаждение компьютера
29 песочница
28 не устанавливается windows xp
19 ni-mh аккумуляторы
18 настройка монитора
15 программа песочница
13 nimh аккумуляторы
13 совместимость цветов
13 чистка компьютера
12 как настроить монитор компьютера
12 как чистить системный блок
11 как настроить монитор
11 таблица совместимости цветов
11 чистка компьютера от пыли
10 avz антивирус
10 настройка монитора для глаз
10 помехи от компьютера
Всего 3,851 просмотров по 2,871 запросам

Таблица 1

Просмотров Запросы
28 как настроить монитор чтобы не уставали глаза
27 песочница программа
17 новые процессоры intel 2012
16 песочница
14 охлаждение компьютера
9 как настроить монитор компьютера
9 настройка монитора
8 ni-mh аккумуляторы
8 как чистить системный блок
8 не устанавливается windows xp
7 описание патента по ПКД
7 программа песочница
7 таблица совместимости цветов
6 nimh аккумуляторы
6 тепловые трубки купить
5 как поставить avz на русском
5 аккумуляторы ni-mh
5 как настроить монитор
5 настройка монитора для глаз
5 окно компоновщик
Всего 1,874 просмотров по 1,512 запросам

Таблица 2

Вся разница между табл.1 и табл.2 только в том что рейтинг за неделю более динамичен.

Сервис составляет рейтинг запросов исходя из страниц где установлен счетчик.

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

 

И опять для этого сайта поисковые запросы по данным AwStats за первую половину октября:

 

За 15 дней октября 2012 г.
Запросы Просмотры
терморезистор 167
песочница 138
как настроить монитор чтобы не уставали глаза 54
новые процессоры intel 2012 51
охлаждение компьютера 45
строение земли 32
мощность компьютера 31
не устанавливается windows xp 27
суперконденсатор 26
настройка монитора 24
электробезопасность в вопросах и ответах 21
таблица совместимости цветов 21
холодный ядерный синтез 21
колебательный контур 20
ni-mh аккумуляторы 19

Таблица 3

 

Просматривается высокая корреляция статистики запросов.

Но данные таблицы 3 наиболее полные, потому что выборка берется из log файла сервера на котором расположен сайт из всей массы запросов, а данные Ретинг@mail.ru (Таб.1, Таб.2) по статистике просмотров страниц, где установлены счетчики. Поэтому данные log - файла сервера на котором расположен сайт более предпочтительные для создания облака тегов.

 

Скрипт для облака

Облако тегов впервые начало появляться на web сайтах сделанных при помощи Word Press [С.1]. Суть этого облака сводилась к следующему: чем больше «вес» ссылки, тем крупнее шрифт отображаемого тега в облаке. Первые облака тегов имели линейный вид в одной плоскости.
Затем облако приобрело пространственный вид, а разноцветные теги в нем стали двигаться по орбите при приближении указателя мыши. Такое облако, выполненно при помощи Flash (флэш) анимации, наглядное и живое придает динамизм странице и поэтому предпочтительнее.

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

  • Размер облака
  • Размер шрифта тега
  • Цвет тегов
  • Количество тегов в облаке
  • Общий фон облака тегов

Этих параметров вполне достаточно, что бы данное облако тегов красиво и изящно смотрелось на странице Вашего web сайта.

Я использовал Flash облако тегов приведенное в статье "Красивое облако тегов для сайта" (к сожалению автор не указан) архивный файл которого скачал по ссылке .

Скачиваемый файл tagcloud.zip содержит:

 

Файлы Назначение
tagcloud.xml xml файл содержащий теги и все настройки
index.html скрипт для индексного файла в котором он должен быть запущен, определяющий цвет фона окна и его размер
tagcloud.swf Flash файл в котором будут проигрываться данные xml файла
Scripts/AC_RunActiveContent.js предназначен для обеспечения устойчивой работы Flash Player в разных браузерах.

Таблица 4

 

Подготовка файла ссылок tagcloud.xml

Файл tagcloud.xml приведен ниже.

Это текстовый файл XML (англ. eXtensible Markup Language — расширяемый язык разметки) XML — текстовый формат, предназначенный для хранения структурированных данных (взамен существующих файлов баз данных), для обмена информацией между программами.

Поэтому работать с ним можно в любом текстовом редакторе не искажающем структуру файла, например в "Блокноте".

 

<tags>
<a href="http://electrosad.ru/indexCool.htm" class="tag-link-100" title="Охлаждение компьютера" rel="tag" style="font-size: 12pt;" color="0xFF0000">Все об охлаждении</a>
<a href="http://electrosad.ru/OS/Com.htm" class="tag-link-209" title="Команды Linux" rel="tag" style="font-size: 12pt;" color="0x003E00">Команды Linux</a>
<a href="http://electrosad.ru/Proekt/Earth1.htm" class="tag-link-354" title="Строение Земли" rel="tag" style="font-size: 10pt;" color="0xD14001">Строение Земли</a>
<a href="http://electrosad.ru/Jornal/NoXP.htm" class="tag-link-182" title="Не устанавливается Windows Xp" rel="tag" style="font-size: 10pt;" color="0x396EE1">Не устанавливается Windows Xp</a>
<a href="http://electrosad.ru/Electronics/termSpr.htm" class="tag-link-125" title="Терморезисторы справочник" rel="tag" style="font-size: 11pt;">Терморезисторы справочник</a>
<a href="http://electrosad.ru/Ohlajd/Cool0.htm" class="tag-link-227" title="Охладить компьютер" rel="tag" style="font-size: 9pt;" color="0x3DAFD7">Охладить компьютер</a>
<a href="http://electrosad.ru/Sovet/Chistka.htm" class="tag-link-29" title="Чистка ПК" rel="tag" style="font-size: 8pt;">Чистка ПК</a>
<a href="http://electrosad.ru/Ohlajd/Extrim6.htm" class="tag-link-143" title="Доработка корпуса" rel="tag" style="font-size: 11pt;" hicolor="0x727272">Доработка корпуса</a>
<a href="http://electrosad.ru/Jornal/Monitor.htm" class="tag-link-324" title="Настройка монитора" rel="tag" style="font-size: 9pt;" color="0x086A08">Настройка монитора</a>
<a href="http://electrosad.ru/Ohlajd/MetRR.htm" class="tag-link-48" title="Расчет радиатора" rel="tag" style="font-size: 8pt;">Расчет радиатора</a>
<a href="http://electrosad.ru/Ohlajd/Cooltt1.htm" class="tag-link-260" title="Тепловые трубки" rel="tag" style="font-size: 8pt;" color="0xff0099">Тепловые трубки</a>
<a href="http://electrosad.ru/Jornal/sandbox.htm" class="tag-link-5" title="Песочница" rel="tag" style="font-size: 11pt;">Песочница</a>
<a href="http://electrosad.ru/Ohlajd/VentOsn.htm" class="tag-link-18" title="Вентиляция компьютера" rel="tag" style="font-size: 8pt;" color="0x666B1E">Вентиляция компьютера</a>
<a href="http://electrosad.ru/Proekt/NuclFusion1.htm" class="tag-link-404" title="Холодный синтез" rel="tag" style="font-size: 9pt;" color="0xFE8805">Холодный синтез</a>
<a href="http://electrosad.ru/Electronics/SFRadiohob.htm" class="tag-link-450" title="Электроника, формулы" rel="tag" style="font-size: 7pt;" color="0x2828EF">Электроника, формулы</a>
<a href="http://www.electrosad.ru/Jornal/avz1.htm" class="tag-link-480" title="Антивирусная утилита AVZ" rel="tag" style="font-size: 10pt;" color="0x2828EF">AVZ</a>
</tags>

 

На основе первой строки этого файла рассмотрим правила его написания.

<a href="http://electrosad.ru/indexCool.htm" class="tag-link-100" title="Охлаждение компьютера" rel="tag" style="font-size: 12pt;" color="0xFF0000">Все об охлаждении</a>

Строка представляет собой ссылку заключенную в соответствующий ей тег <a></a>

Внутри ссылки находятся набор свойств соответствующий данной ссылке.

 

Свойство Пояснение
a href="http://electrosad.ru/indexCool.htm" ссылка на файл открываемый по клику на нем кнопкой мыши
class="tag-link-100" класс, величина значения определяет относительное положение между ссылками, должно иметь равномерный шаг по ссылкам (Вы можете подобрать экспериментально)
title="Охлаждение компьютера" титул (как в html)
rel="tag" расположение - внутри Flash
style="font-size: 12pt;" color="0xFF0000" стиль ссылки (размер шрифта, и его цвет), выбирается в соответствии с весом запроса
Все об охлаждении Видимый в облаке текст соответствующий данной ссылке

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

 

Скрипт для размещения облака на странице сайта

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

 

Вставка в файл index.htm

<table border="1" width="300px" height="300px">
<tr>
<td style="background-color: #FFFFFF">

<noindex>
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','300','height','300','title','облако тегов','src','tagcloud','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','bgcolor','#FFFFFF','movie','tagcloud' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="300" height="300"
title="облако тегов">
<param name="movie" value="tagcloud.swf">
<param name="quality" value="high">
<param name="BGCOLOR" value="#FFFFFF">
<embed src="tagcloud.swf" width="300px" height="300px" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" bgcolor="#ffffff"></embed>
</object></noscript></noindex>
</td>
</tr>
</table>

 

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

В тексте определены:

Размер окна Flash - width="300" height="300;

Цвет фона - <param name="BGCOLOR" value="#FFFFFF"> и bgcolor="#ffffff"

Все это взято в тег <noindex></noindex> для исключения индексирования ссылок поисковыми роботами.

 

Установить файлы обеспечивающие работу скрипта в папку сайта

Подготовленный, как описано выше, файл tagcloud.xml и файл tagcloud.swf помещается в корневую папку сайта (при этом файл index.htm должен иметь описанную выше вставку).

Туда же помещается папка Scripts со скриптом AC_RunActiveContent.js

В таком виде облако начинает нормально работать. Посмотреть как оно работает можно здесь.

 

Успехов Вам и красивого сайта!

Ссылки:

  1. Красивое облако тегов для сайта, http://www.wellsait.ru/oblako_tegov.php

А.Сорокин, 2012

Яндекс.Метрика

<<назад>> <<в начало>> <<на главную>>

Попасть прямо в разделы сайта можно здесь:

При полном или частичном использовании материалов ссылка на "www.electrosad.ru" обязательна.
Ваши замечания, предложения, вопросы можно отправить автору через
гостевую книгу или
почтой.

Copyright © Sorokin A.D.©

2002-2012 год