Почему старое 3D-облако перестало работать

В старых решениях использовались файл tagcloud.swf, загрузчик swfobject.js и плагин браузера. Adobe прекратила поддержку Flash Player после 31 декабря 2020 года и заблокировала воспроизведение Flash-контента с 12 января 2021 года. Компания рекомендует удалить плеер; подробности приведены в официальном уведомлении Adobe. Возвращать эту технологию в обычную навигацию сайта не нужно.

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

Подготовьте темы и страницы назначения

Выберите ограниченный набор понятных тем, по которым действительно есть материалы. Объедините случайные варианты написания, исправьте опечатки и проверьте смысл близких меток. Если «контекст» и «контекстная реклама» открывают почти одинаковые подборки, сначала решите, нужны ли обе. Не создавайте сотни пустых страниц только потому, что генератор нашёл соответствующие слова в тексте.

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

Базовый вариант на HTML

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

<nav aria-label="Темы статей">
  <ul class="topic-cloud">
    <li><a href="/topics/seo/">SEO</a></li>
    <li><a href="/topics/analytics/">Аналитика</a></li>
  </ul>
</nav>

В CMS сформируйте такой список средствами шаблона или поддерживаемого компонента. Сохраняйте экранирование названий меток и проверяйте допустимость адресов. Не вставляйте непроверенные данные непосредственно в HTML или строку JavaScript. Для старого сайта на uCoz сначала выясните доступные средства текущего шаблона: служебные подстановки из архивного примера нельзя механически переносить в другую CMS.

Оформление без вращения

Для компактного облака достаточно переноса строк, промежутков и хорошо различимых ссылок. Например, у списка можно задать display: flex, flex-wrap: wrap и gap, убрать маркеры и стандартные отступы. У ссылок предусмотрите внутренние поля, границу и видимое состояние фокуса. Не делайте мелкие слова настолько маленькими, что по ним трудно попасть пальцем или прочитать их без увеличения.

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

Если всё-таки требуется вращающееся 3D-облако

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

Предусмотрите остановку движения и статичный режим. Настройка prefers-reduced-motion сообщает о предпочтении уменьшить несущественную анимацию. Если вращение реализовано JavaScript, недостаточно отключить только CSS-переходы: сам код должен учитывать режим. Проверьте также отказ загрузки скрипта. Посетитель должен получить пригодный список тем, даже когда декоративная часть не запустилась.

Что проверить перед заменой на сайте

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

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