Статьи

Случайное вращение контента стало проще

После прочтения Дэн Бенджамином случайного поворота изображения я решил поделиться методом, который я недавно использовал для поворота «Истории успеха» на моем сайте. Концепции и сценарий, которые я представлю в этой статье, можно использовать так же, как и у Дэна, чтобы страница не становилась скучной для повторных посетителей.

Концепция похожа, но не одинакова; скрипт, о котором мы здесь поговорим, может быть использован для создания случайного поворота любого (X) HTML-кода, который вы выберете. Он основан на сервере и не зависит от JavaScript.

обзор

Вы создаете несколько <div> с. Вы импортируете таблицу стилей, созданную сценарием Perl. Таблица стилей устанавливает все display:none <div> кроме одного display:none . Ваш дизайн выглядит свежо, поисковые системы выбирают весь контент (так что любые ссылки в случайном контенте видны каждый раз), и пользователи программы чтения с экрана тоже все это получают *, сохраняя ваш контент доступным. Сценарий простой, но полезный.

* Как отметил Джо Кларк , некоторые программы чтения с экрана уважают display:none , так что это не относится к этим правонарушителям. Вы можете использовать что-то, кроме display:none если хотите.

Установка скрипта

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

Пример

В качестве примера мы будем использовать 3 «Истории успеха»; каждый содержит страницу содержания:

 success1.html  success2.html  success3.html 

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

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

 <div id="success1" class="success-story">  <p><a href="/success1.html"><img src="/images/success1.jpg" alt="Foo Ltd." border="0" />Foo Ltd. has been invaluable in bringing our product to market successfully.....</a></p>  </div>   <div id="success2" class="success-story">  <p><a href="/success2.html"><img src="/images/success2.jpg" alt="Foo Ltd." border="0" />Foo Ltd. delivered a highly professional service.....</a></p>  </div>   <div id="success3" class="success-story">  <p><a href="/success3.html"><img src="/images/success3.jpg" alt="Foo Ltd." border="0" />Foo Ltd. provided the project management skills we were looking for.....</a></p>  </div> 

В коде есть <div> для каждого раздела контента, который мы хотим включить в ротацию. Однако содержимое <div> не важно для сценария. Важной частью является идентификатор каждого <div> , который имеет два раздела: префикс и номер. Класс <div> может быть любым, что вам нужно для отображения CSS. Вы можете, конечно, использовать идентификатор, но если вы сделаете это, каждый идентификатор будет отображаться в вашем селекторе. Использование одного класса делает это проще.

Префикс

Первая часть идентификатора является префиксом. Префикс включает в себя все, что стоит перед номером. В этом примере префикс:

 success 

Мы передадим этот префикс в скрипт.

Число

Вторая часть идентификатора – это номер; Идентификаторы всегда должны начинаться с 1 и возрастать с шагом 1 (1,2,3 и т. д.). Вы можете иметь столько идентификаторов, сколько захотите.

Мы передадим наибольшее число в сценарий.

Сценарий

Концепция сценария проста. Скрипт генерирует таблицу стилей, которая будет скрывать все, кроме одного (случайного) <div> используя display:none . Мы добавляем его на нашу домашнюю страницу, используя стандартный элемент <link> :

 <link type="text/css" rel="stylesheet" href="/cgi-bin/random_content.pl?t=3&p=success" /> 

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

 /cgi-bin/random_content.pl?t=3&p=success 

Давайте разберем это и посмотрим на каждый раздел по очереди.

 /cgi-bin/random_content.pl? 

В этом разделе указывается местоположение скрипта на вашем сервере, за которым следует знак вопроса.

 t=3 
  t означает всего.  Вам следует заменить 3#ec#/ with the total number of content <div> s you used above. 3#ec#/ with the total number of content <div> s you used above. 
 & 

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

 p=success 
  p обозначает префикс.  Вы должны заменить success префиксом, который вы использовали для идентификаторов ваших дивов.

Это оно! Посетители, которые не используют CSS, такие как сканеры поисковых систем и программы чтения с экрана, которые игнорируют CSS, будут получать весь контент каждый раз. С небольшим воображением, есть много интересных вещей, которые вы можете сделать с помощью этого простого сценария. Это сработало очень хорошо для меня; Я надеюсь, что это тоже для вас!

Изменение CSS

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

 my $css = '{display:none;}'; 

Измените это на:

 my $css = '{position:absolute; left:-1000px; top:0px;}'; 

Это должно сделать неслучайный контент более доступным для программ чтения с экрана. Выбор ваш!

Прощальный комментарий

Благодаря великолепию Internet Explorer у вас могут возникнуть проблемы, если вы попытаетесь просмотреть вывод этого скрипта прямо в браузере. Проблемы возникают из-за того, что браузер не слушает MIME-тип, который выводится сценарием, когда вы пытаетесь просмотреть его напрямую (хотя он отлично работает, когда импортирует его в виде таблицы стилей).

Если вы хотите просмотреть вывод в этом браузере, вам нужно добавить &debug=1 к URL-адресу, который вы используете для доступа к сценарию. Это приводит к выводу сценария с использованием MIME-типа text / plain вместо text / css. Не используйте debug=1 при импорте в качестве таблицы стилей; добавляйте его только в том случае, если у вас возникли проблемы с просмотром вывода скрипта в браузере для тестирования.

Другой альтернативой является переименование скрипта «.css», который также должен решить эту проблему, не добавляя debug=1 , поскольку это заставляет браузер поверить, что он получает css.