Последнее время на множестве сайтов наравне с меню стало
применяться "Облако тегов" которое дает возможность дать посетителю быстрый
доступ к наиболее популярным статьям или разделам сайта. Мой сайт проработал
несколько лет и мне тоже захотелось "украсить" его и помочь посетителям.
Здесь я расскажу о создании и установки облака тегов для сайта
выполненного в html формате и имеющего
ftp доступ для закачки файлов на него.
Облако тегов, Облако меток, или Облако ключевых слов (англ.
tag cloud, wordle)— визуальное представление
списка ярлыков (или категорий). Частота упоминаний, поисков, ссылок в интернете
с определённого сайта неких слов, терминов, имён отображается в специальной
области в виде изображения этих слов в формате гиперссылок. Размер изображения
тем больше, чем чаще использовался данный тег (слово, термин или имя).
Как видим из названия, и по практике использования - "Облако тегов" это выборка наиболее
повторяемых ключевых слов содержащихся в запросах с внешних ресурсов к сайту,
это своего рода рейтинг обращений к сайту. Облако тегов используется в качестве
меню для быстрого доступа к наиболее популярным сайтам.
Для создания облака тегов на сайте созданном с помощью
html и имеющем ftp доступ,
необходимо:
-
определиться с источником ключевых слов,
-
выбрать скрипт,
-
подготовить файл ссылок,
-
внести в Ваш html файл страницы,
где будет установлено облако тегов, скрипт для включения облака,
-
установить файлы обеспечивающие работу скрипта в папку
сайта.
Источник ключевых слов
Где взять ключевые слова?
Если не говорить о специальных скриптах или модулях устанавливаемых на
сайтах, которые позволяют получать список наиболее употребляемых ключевых слов
при обращении к нему из поисковых систем из 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
В таком виде облако начинает нормально работать. Посмотреть это
уже нельзя оно удалено!
Успехов Вам и красивого сайта!
Ссылки:
-
Красивое облако тегов для сайта,
http://www.wellsait.ru/oblako_tegov.php
А.Сорокин, 2012