Если вы всерьез занимались версткой какого-нибудь сайта, вам наверняка доводилось сталкиваться с несовместимостью сайта с некоторыми браузерами. Особенно сильно этим грешат браузеры от Microsoft — чем ниже версия Internet Explorer'a, тем больше проблем возникает.

Пародоксально, что до сих пор так много людей использует Internet Explorer 6, который вышел в 2001 году.

Вы можете поступить как Google и отказаться от поддержки старых браузеров, но это не всегда возможно и врят ли устроит ваших корпоративных клиентов. Им ведь все равно, сколько сил вы тратите на обеспечение совместимости с одним браузером — они платят деньги.

Браузер

Сложнее всего с самим браузером. Это не Опера, разные версии которой можно установить в разные директории и использовать одновременно.

В интернете есть несколько решений, но я не нахожу их приемлимыми:

• готовые образы виртуальных машин с нужными браузерами от Microsoft (ограниченный срок работы, большой размер для загрузки)
• Multiple IE — программный пакет с несколькими версиями браузера (не всегда запускается, нет IE 7)
• плагин IE Tab для Firefox (очень ограниченная функциональность, практически нет отладки)
• режимы совместимости в IE 8 (помогает совсем немного)

Лично я установил VMware, создал две виртуальных машины с Windows XP и разными версиями Internet Explorer'a на них. Это оказалось наиболее практичным вариантом для меня.

Но можно поступить и проще. Я недавно узнал о существовании прекрасной программы — IE Tester.

Программа позволяет в одном окне в разных вкладках запускать различные версии Эксплорера (от 5.5 до 8). На моем Windows 7 все работало без каких-либо проблем.

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

Инструменты

Единственный недостаток программы — на нее нельзя устанавливать дополнительные панели, как на обычный браузер. То есть, неплохое, как для IE, средство отладки - Internet Explorer Developer Toolbar использовать не получится.

Взамен, с сайта IE Tester можно скачать другую панель для отладки — DebugBar. Отображение DOM структуры, стилей, HTTP-запросов; есть JavaScript консоль. В целом неплохо, но я не нашел способа удобно модифицировать стилевые свойства или добавлять атрибуты. Впрочем, уже существующие атрибуты у элементов можно изменять.

Если DebugBar вам не понравился, можно попробовать Firebug Lite. Это более простая версия версия известного расширения для отладки на Firefox. Решение базируется на JavaScript — все, что вам нужно сделать — это вставить несколько строчек в код страницы.

Плюс в том, что можно добавлять свой CSS код на лету, чего я не нашел в DebugBar.

P.S.

На последок: интересный случай, который произошел со мной, пока я занимался одним сайтом.

Сайт в IE 6 выглядел просто ужасно. В IE 7 пару элементов «распались» — я исправил это в течении 15 минут. Но IE 6... На сайте не узнавались даже общие элементы. Вздохнув, я начал переделывать все с самых верхних элементов, постепенно вынося правки в коде в отдельный файл для IE6.

Через какое-то время, мне понадобился один стиль не из начала css файла, а где-то чуть после середины. Я с удивлением обнаружил, что он просто не работает, как будто его там нет, но начинает работать, если перенести его в отдельный документ.

Я потратил еще довольно много времени на выяснение причин — проверял мета теги, проходил валидацию. Все оказалось довольно просто. Приблизительно посередине css файла был комментарий.

Что-то вроде:

/* Кнопочки пыщь пыщь пыщь */

Все, что было до этого комментария, работало, все, что после — нет. Половина дня, чтобы узнать, что IE 6, видимо, не поддерживает русские комментарии в CSS.

>_<

Также посмотрите:

• Windows 7. Обновление с беты до release
• Старый добрый пинбол
• Как начать программировать?
• BitLocker популярно

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

Кто круче?

.classname .classname2 div

или

Specificity

Разобраться в этом, поможет такая табличка.

Приоритет (или специфичность, как это правильно называть) расчитывается следующим образом:

• Если это инлайн стиль (style="color: red;"), A начисляется единица.
• За каждый идентификатор в селекторе В начисляется единица.
• За каждый класс, псевдокласс (:hover) и другой атрибут (например, [type=text] для input) начисляется единица С.
• Тоже самое происходит с элементами html и псевдоэлементами (:before) для D.

Потом все эти цифры объединяются вместе, и у кого больше, тот и победил

Примеры

а Просто один html элемент. А=0, B=0, C=0, D=1
а.big Большая специфичность за счет класса. А=0, B=0, C=1, D=1
a:hover Элемент и атрибут. Специфичность такая же, играет роль только порядок записей. А=0, B=0, C=1, D=1
.classname .classname2 div Класс в классе и 1 элемент. А=0, B=0, C=2, D=1.
#id_name Идентификатор побеждает всех. А=0, B=1, C=0, D=0.
style="" Инлайн-запись побеждает даже идентификатор. А=1, B=0, C=0, D=0.

Следует понимать, что цифры не просто конкатенируются:

0 1 0 0 все равно круче чем 0 0 10 0, потому что учитывается каждая отдельная буква.

Правила

На основании этой таблички легко разработать следующие простые правила:

1. Применяйте самые общие стили к html элементам, менее общие — к классам и атрибутам, и совсем уникальные — к идентификаторам.
2. Инлайн стиль победит всех. Используйте осторожно.
3. В целом, чем более сложный и «глубокий» селектор, тем больше у него приоритет.
4. Спецификации предусматривают, что id следует применять к одиночному элементу html, а классы — к повторяющимся.
5. Однако к глобальным элементам, таким как какой-нибудь wrapper div лучше применять класс, а не идентификатор, даже если он всего один, потому что потом стиль элемента можно будет легко изменить программно, добавив еще один класс.

Также посмотрите:

• 6 способов привлечь внимание людей
• F-образный принцип чтения веб-страниц
• “Говорящие головы” в онлайн видео – это скуучно
• Яркое оформление, красивые слова => выглядит как реклама => игнорировать

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

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

Есть у кого поучиться

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

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

Давайте подумаем, кто занимается похожими задачами?  Захватить и удержать внимание?

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

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

У телевизионного канала немного другая задача. Существует мало способов заставить человека переключиться на нужный канал. Обычно люди попадают на канал, просто «щелкая» каналы в поисках интересной передачи. Единственное, что могут сделать люди на ТВ — это постараться удержать зрителя как можно дольше на своем канале.

Как они это делают? Интересное содержимое, конечно, важно, но есть и некоторые другие методы, о которых мы поговорим позже.

А пока поговорим о том, что нужно сделать нашему сайту. У ТВ зрителя есть свобода выбирать, что ему смотреть, но в определенных рамках. У него есть свобода выбирать между тем, что ему предлагают, между тем, что сейчас «идет». Более того, остановившись на какой-то программе, зритель лишается возможности выбирать, что ему смотреть. Он смотрит то, что ему покажут.

У пользователя Сети свобода абсолютна. Пользователь Сети смотрит исключительно то, что его интересует. Он самостоятельно определяет, сайты какой тематики ему смотреть. Более того, как только просматриваемый сайт становится скучен, он сразу же закрывается.

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

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

Вы это знали

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

0. Содержание

Ну, тут все понятно. Чтобы привлечь внимание людей к чему-то, надо чтобы это что-то было. Мы предполагаем, что хороший контент у вас есть, а мы лишь помогаем донести его до читателя.

1. Форматирование текста

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

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

Чтобы добиться лучшей «читаемости» текста используйте:

• абзацы
• заголовки
• выделение ключевых фраз жирным и курсивом
• таблицы
• списки

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

Иногда, можно сделать текст интересным используя только форматирование. Вот, к примеру, 2 страницы из «Космополитен». Какая страница вам больше нравится?

Кстати, привлекающее внимание форматирование текста — это не большие красные буквы.

2.Картинки

Форматированный текст лучше сплошного, а форматированный текст с картинками лучше их обоих. Картинка сразу же привлекает внимание и разбавляет текст, делая его более интересным.

Вот, к примеру, новостной сайт — Лента.Ру. Посмотрите, заголовки статей иллюстрированны картинками. По-сути, картинки не несут особой смысловой нагрузки, иногда они только немного подходят по теме к статье, но какую важную роль они играют.

Для сравнения, оцените другой новостной сайт — Корреспондент.net. Все заголовки в колонке «Последние новости» абсолютно нечитаемы, потому что идут ровными стройными рядами. Это скучно. Хочется смотреть, куда угодно, но только не на эти заголовки.

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

3. Анонс и начало

Как мы уже выяснили, основная задача телевизионщиков — удерживать внимание зрителя. Больше внимания зрителей приходится на начало передачи — всегда интересно узнать, что сейчас будут показывать, тему передачи, название фильма.

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

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

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

Аттракторы

В англоязычной литературе есть такое слово — attractor. Им обозначают все, что привлекает внимание. Устоявшегося русского аналога я не знаю, а транслитерированное слово звучит странно. Но речь пойдет именно о них, об атракторах.

Вот несколько обложек «Космополитена» (да, да, я люблю этот журнал ).  Прежде чем читать дальше, попробуйте найти общие элементы.

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

Какие приемы можно было бы использовать в этих случаях?

4. Особые слова

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

Есть некоторый класс слов, которые хорошо привлекают внимание людей. Слово «секс» — одно из таких слов, спасибо основному инстинкту. Если постараться, можно вспомнить еще несколько подобных примеров. В частности, по многим причинам FAQ является как раз таким словом. Попробуйте сами найти объяснение этому.

В последнее время, судя по всему, становится популярным играть на страхе людей — слово «кризис» появляется в самых разных местах. «Антикризисное предложение», «компания, которой не страшен кризис», «антикризисная дисконтная карта» и даже «антикризисный концерт» — я все это видел своими глазами. Очевидно, кто-то зачислил слово «кризис» в класс слов, которые хорошо привлекают внимание.

Кстати, не стоит перебарщивать. Благодаря рекламным баннерам вида «ШОК! С Жанны Фриске сполз лифчик», некоторые слова вида «шок», «скандал», «ужас» могут не только не привлечь нужного внимания, но и, наоборот, отпугнуть внимание людей.

5. Люди, лица

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

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

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

Лица счастливых людей можно часто увидеть к месту и не к месту в городское рекламе.

6. Цифры

Менее заметная одинаковая черта всех обложек — использование цифр. 7 способов, 40 причин, 6 секретов. Иногда доходит до абсурда — на обложке одного журнала упомянутое число зашкаливало за 300.

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

Вот, считай, идеальная реклама в метро. И цифры, и лица.

Если у вас есть выбор, написать «семь способов» или «7 способов», выберите второй. Считается, что пробегая страницу взглядом человек на самом деле читает только первые три цифры. Поэтому «чуть более 300 тысяч» может быть лучше «300 125».

К читателям

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

Думаю, теперь вам будет куда интересней ходить по городу, а особенно смотреть рекламу в общественном транспорте. Если обнаружите что-то новое, не забудьте написать мне об этом.

Также посмотрите:

• Приоритет в CSS
• Яркое оформление, красивые слова => выглядит как реклама => игнорировать
• F-образный принцип чтения веб-страниц
• Реалии украинского рекламного бизнеса

Данные собранные во время наблюдений за движением взгляда пользователей показывают, что довольно простой способ потерять внимание посетителя сайта — показать ему видео с «говорящей головой», которое к тому же изначально создавалось для телевидения.

Этот пост — часть серии Куда смотрит пользователь?
Оригинал статьи: http://www.useit.com/alertbox/video.html

«Говорящими головами» называют дикторов, ведущих и вообще любых людей, которые подолгу находятся в кадре и что-то рассказывают. Хотя в этой же степени термин применим не только к видео, но и к компьютерным играм. В Fallout'e, Oblivion'e и многих других играх тоже приходится иметь дело с «говорящими головами».

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

В 1997 Джейкоб Нильсен, автор оригинальной статьи, написал статью о сравнительном анализе ТВ и компьютеров, которая по-прежднему не утратила своей актуальности. Телевиденье — это способ отдыха: зритель откидывается в своем кресле и погружается в те программы, которые ему показывают. «Пользователей» телевиденья не зря называют «зрителями», подчеркивая их пассивную роль участия. В противовес им выступают пользователи компьютеров, сами выбирают, что им смотреть и читать посредством серии выборов и кликов.

Из-за этого фундаментального отличия, видео созданные для ТВ, становятся ужасно скучными в онлайне. Во время просмотра нечего делать, у пользователя нет никакого выбора, он ничем не управляет.

Наблюдение за пользователями

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

Следующий рисунок показывает тепловую карту фиксаций взглядов пользователей во время просмотра онлайн видео на новостном сайте. Красный цвет — для участков, которые привлекли больше всего внимания, синие — меньше всего внимания.

Показанный видеоклип был продолжительностью в 24 секунды. Камера не меняла своего положения — фактически демонстрировались одни и те же элементы на одном и том же фоне. Вы можете посмотреть 24-х секундное видео, как перемещался взгляд пользователя на оригинальном сайте (ссылка вверху).

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

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

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

Вне видео взгляд чаще всего останавливался на таких вещах, как различные дополнительные заголовки и элементы управления проигрывателем.

Эти данные четко показывают, что «говорящая голова» — это скучно, даже в течении 24 секунд. В сети 24 секунды — это довольно много, слишком много, чтобы тратить внимание на что-нибудь настолько монотонное.

Рекомендации

На данный момент, рекомендация касательно видео — делать его коротким. Типичное видео для Сети должно быть менее минуты.

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

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

Кроме того, вспомните о баннерах. Двоякая ситуация. Если вы заинтересованы в том, чтобы пользователь просмотрел и прочитал баннер, разместите этот баннер рядом с видео. Если вы наоборот, не хотите, чтобы пользователь отвлекался, баннер лучше убрать. Размещение баннера в самом видео — плохая идея; навязчивая реклама еще никому не делала лучше.

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

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

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

Другие статьи на тему, куда смотрит пользователь, доступны в одноименном разделе. Если у вас есть, чем доволнить статью, пишите. Комментарии приветствуются.

Также посмотрите:

• Яркое оформление, красивые слова => выглядит как реклама => игнорировать
• F-образный принцип чтения веб-страниц
• Приоритет в CSS
• 6 способов привлечь внимание людей

Думаете, если написать что-то на сайте написать большими красными буквами, все обратят на это внимание? Не совсем так. Иногда у посетителей сайта начинается слепота в отношении всего, что выглядит как реклама.

Этот пост — часть серии Куда смотрит пользователь?
Оригинал статьи: http://www.useit.com/alertbox/fancy-formatting.html

Размещая ответ на какой-нибудь типичный вопрос пользователей большими красными буквами вверху страницы, вы гарантируете, что максимальное число пользователей прочитает ответ на него, верно? Не верно. По крайней мере не верно для сайта Бюро переписи США, на котором 86% пользователей не смогли обнаружить численность населения страны написанную большими красными цифрами.

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

Следующая тепловая карта одного из проведенных исследований показывает, как пользователи просматривали эту страницу. Их задача была узнать текущую численность населения США.

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

На первый взгляд, все выглядит нормально:

• Пользователь пробегает глазами основные части страницы
• Система категорий работает достаточно хорошо
• Пользователи уделяют значительное внимание счетчику населения (Population Clock) и Population Finder, расположенному ниже.

При более детальном рассмотрении обнаруживается, что пользователи задерживали взгляд только на первых трех цифрах из всех, что отображают текущее население. Другими словами, люди просто просматривали эту часть сайта, но на самом деле не читали число. (Только незначительное количество посетителей — что показано синим цветом — посмотрело на остальные 2/3 числа).

Куда смотрели люди

Как показывает следующая диаграмма, только 14% посетителей использовали Population Clock, чтобы ответить на поставленный вопрос. Из всех остальных правильное число не назвал никто, хотя большинство сумело найти численность населения за предыдущие годы где-то внутри сайта.

Только 14% участников теста использовали Population Clock, чтобы ответить на вопрос о текущем населении. Большинство людей видело Population Clock, но не использовало его.

Хотя это не основная причина, почему дизайн этой страницы неудачен, слепота в отношении баннеров сыграла здесь свою роль. Пользователи склонны игнорировать перенасыщенные оформлением участки сайта, потому что они визуально похожи на рекламу. Поэтому, около 1/3 пользователей даже не обратило внимания на Population Clock; они просто не видели счетчика, хотя он содержал именно ту информацию, что была им необходима.

Помимо слепоты в отношении рекламы, главной причиной, почему эта веб страница не справляется со своими обязанностями — использование выдуманных коммерческих словечек вместо простого языка. Такие термины как «Population Clock,» «Population Finder,» и «QuickFacts» не говорят сами за себя, в отличие от обычной строчки текста:

Население США: 302,740,627 (31 августа 2007)

Модели поведения пользователей

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

Давайте проанализируем их отдельно:

Каждая схема отображает перемещения взгляда одного пользователя: синие точки отображают фиксацию взгляда; чем больше точка, тем дольше пользователь смотрел на это место.

График А, показывает классического пользователя нацеленного на поиск. Пользователь быстро осмотрел страницу и затем перешел прямо к поиску. В этом исследовании такие пользователи преобладали — 57%. Конкретный пользователь с графика А вобще не посмотрел на Population Clock; другие пользователи нацеленные на поиск иногда останавливали свой взгляд в этом месте, но затем быстро переходили к строке поиска.

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

График B — пользователь нацеленный на навигацию. Этот пользователь посмотрел на ссылки в центре страницы и «прошелся» взглядом до самого низа меню слева, после чего нажал на ссылку, которую посчитал перспективной.

Ориентированные на навигацию пользователи были в меньшинстве в этом исследовании, они чаще встречаются на сайтах, где нет интерактивных элементов (вроде тех, что привлекли внимание пользователей с графиков С и D).

График С — пользователь предпочитающий интерактивность. Внимание таких пользователей сразу привлекают выпадающие меню, поля ввода и другие элементы, с которыми можно что-то сделать.

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

Графике D — модель поведения успешного пользователя, который таки использовал Population Clock, чтобы ответить на заданный вопрос. Этот конкретный пользователь с графика D на самом деле пользователь нацеленный на поиск, что подтверждается множеством фиксаций взгляда в строке поиска. Но, как раз прежде чем начать поиск, пользователь обратил внимание на Population Clock и оставался взглядом в этой зоне достаточно долго, чтобы понять, что она содержит нужную для него информацию.

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

Выводы

На этом сайте ни поиск, ни навигация, ни Population Finder не привели большинство пользователей к правильному ответу. Поиск был особенно плох здесь. Один пользователь сказал: «Я знаю, где я смогу найти ответ быстрее — в Гугле», ушел с сайта Бюро и смог найти более менее правильный, хотя и не такой точный ответ на другом сайте.

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

Если брать рекомендации от авторов оригинального сайта, то сайт Бюро переписи США в вопросе больших красных цифр выполнил следующие правила:

• Выделил самое основное, что может понадобится посетителю на сайте, так что чтобы пользователь знал, с чего начать.
• Использовал примеры, чтобы описать содержимое сайта. Вместо того, чтобы просто описывать, что на этом сайте имеется такая-то статистика, сайт Бюро сразу же привел действительные числа насления США.
• Использовал интерактивность для основных задач сайта. Population Finder и является примером такой интерактивности.

Что касается нарушенных правил, то вот они:

• Не использовать заумных фраз и маркетинговых терминов.
• Ограничить изменение стилей шрифтов и другого текстового форматирования.
• Содержимое не должно выглядеть как реклама.

Возможно, пример кажется несколько утрированным — всего-то 14% (хотя кто знает этих американцев ) — но общая идея очень даже правильная. Замечу, что этот же принцип можно применить и в обратную сторону, чтобы обращать внимание посетителей на рекламу.

Остальные посты на тему наблюдений за взглядом пользователя доступны в соответствующем разделе. У вас были случаи подобной слепоты? Комментарии приветствуются.

Также посмотрите:

• 6 способов привлечь внимание людей
• “Говорящие головы” в онлайн видео – это скуучно
• F-образный принцип чтения веб-страниц
• Приоритет в CSS

Наблюдение

Этот пост — часть серии Куда смотрит пользователь?
Оригинал статьи: http://www.useit.com/alertbox/reading_pattern.html

F — это от английского fast. Именно так, быстро, пользователи просматривают ваши веб-страницы. За несколько секунд их глаза с огромной скоростью успевают «пробежать» по словам на вашем сайте. Такой способ восприятия совсем отличается от привычного способа, который можно наблюдать у человека, читающего книгу.

В исследовании, проведенном на оригинальном сайте, наблюдали за тем, как 232 пользователя просматривали тысячи страниц в Сети. Было обнаружено, что принцип чтения у большинства пользователей в целом повторялся от сайта к сайту, независимо от тематики сайта или задач пользователя. Этот основной принцип чтения, если представить его на теплокарте, напоминает английскую букву F и состоит из трех этапов:

• Сначала, пользователь читает в горизонтальном направлении, обычно что-нибудь в верхней части контента страницы. Это составляет верхушку буквы F.
• Далее пользователь опускается взглядом немного ниже и второй раз читает в горизонтальном направлении. На этот раз чтение, обычно, короче. Этот шаг составляет вторую планку буквы F.
• В конце концов, пользователь просматривает начало абзацев содержимого двигаясь взглядом вертикально вниз. Иногда пользователь делает это довольно тщательно и медленно, что отображается непрерывной полосой на теплокарте. В других случаях, он быстро пробегает контент глазами, оставляя лишь пятна на теплокарте. Этот шаг составляет вертикальную черточку буквы F и завершает ее...

Конечно, схема чтения не всегда состоит именно из трех частей. Иногда, пользователь продолжает горизонтальное чтение и на третьем этапе, что делает теплокарту больше похожей на Е, чем на F. Еще бывает, что пользователь просматривает контент поперек только один раз, из-за чего теплокарта выглядит скорее как Г. Но в целом, принцип чтения обычно выглядит именно как буква F.

Теплокарта взглядов пользователей на трех разных сайтах. Красным обозначены места, куда пользователь смотрел чаще всего; желтым - реже и синим - совсем редко. На серых участках взгляд пользователя вобще не задерживался.

Теплокарты выше показывают как пользователи читали три веб-страницы разных типов:

• Статью «О компании» на корпоративном сайте (слева)
• Страницу с описанием товара на сайте интернет-магазина (по центру)
• Выдачу результатов поиска на сайте поисковой системы (справа)

Если вы обратите внимание на красные участки, то увидите, что они отображают ожидаемый принцип чтения в виде буквы F. Конечно, есть отличия, но ведь и этот принцип буквы F — скорее грубая, примерная форма, чем полноценная модель.

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

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

Практические выводы

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

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

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

P.S.

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

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

Если в течении довольно незначительного времени, ничего интересного не найдено, страница закрывается и только. Пользователь будет читать длинющие пространные вступления к статьям, только если он действительно заинтересован в теме этой статьи. Типичные маркетинговые тексты в Вебе — вобще гиблое дело.

Я собираюсь перевести еще несколько статей на эту же тему — они будут доступны в разделе Куда смотрит пользователь? Если вам понравилась статья, оставьте комментарий или поделитесь ссылкой на эту статью.

Также посмотрите:

• Приоритет в CSS
• 6 способов привлечь внимание людей
• “Говорящие головы” в онлайн видео – это скуучно
• Яркое оформление, красивые слова => выглядит как реклама => игнорировать

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

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

Архитектура Sitemap

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

<?xml version="1.0" encoding="UTF-8"?><br />
<?xml-stylesheet type="text/xsl" href="http://blog.undsoft.com/wp-content/plugins/google-sitemap-generator/sitemap.xsl"?><br />
<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"><br />
 <url><br />
   <loc>http://blog.undsoft.com/</loc><br />
   <lastmod>2009-01-14T16:49:53+00:00</lastmod><br />
   <changefreq>weekly</changefreq><br />
   <priority>1.0</priority><br />
 </url><br />
</urlset><br />

Как вы видите, все не так сложно. Сначала идет обычный для любого xml документа заголовок, затем с этим документом связывается xsl. В третьей сточке указывается xmlns — простанство имен для xml документа.

Что это все за буковки? Что ж, если в целом, то xml — это документ, которые содержит данные в определенном формате. Данные могут быть абсолютно любыми, в данном случае — это информация о страницах сайта. Xsl для xml — это как таблица стилей для веб-страницы. Xml содержит исключительно данные и это вполне подходит для программ, но если пользователь попытается открыть xml документ, не все браузеры смогут его отобразить, поскольку он, опять же, содержит только данные. Xsl — это то, что и определяет как пользователь увидит эти данные. Xsl — предаставление данных в xml. Это совсем не обязательно и нужно только для usability.

Xmlns уже более необходим. Как я уже говорил, данные в xml документы представлены в определенном формате. В зависимости от сферы применения документа, такой формат может быть разным. Xmlns и определяет этот формат. Другими словами, это набор правил для каждого xml, чтобы они были составлены одинаково — какие ключевые слова за что отвечают и как их следует интерпретировать.

Если все понятно, то двигаемся дальше. Дальше идет перечисление страниц сайта с указанием параметров:

• loc — полный путь к  странице. Допускается использовать адреса только с того же домена.
• lastmod — время последнего изменения страницы
• changefreq — частота изменения страницы. Возможные значения: always, never, hourly, daily, weekly, monthly, yearly. Значение always означает, что это динамическая страница, которая изменяется при каждом запросе. Never следует использовать для архивных страниц.
• priority — относительный «вес» страницы в сравнении с другими страницами вашего сайта. Принимает значения от 0 до 1. Вероятно, все, на что влияет данный параметр — это то, какую страницу поисковый бот просмотрит раньше, если изменилось несколько с разным значением priority.

Перечисляем все нужные URL и Sitemap готов. В одном Sitemap может быть до 50,000 адресов и он сам может весить не более 10 мегабайт. Если вам нужно больше — создайте еще один сайтмап и объедините их в Sitemap index.

Готовый Sitemap рекомендуется размещать в корне домена, а в robots.txt включать указание на него в виде строчки: Sitemap: <полный путь к Сайтмапу>.

Также вам следует понимать, что Sitemap — это просто способ указать поисковой системе как лучше кравлить ваш сайт. Другими словами, Sitemap носит рекомендательный характер. Это не означает, что бот будет кравлить ваш сайт так часто, как вы указали, или что он вобще будет кравлить все указанные страницы. Точно так же, нет никакого смысла указывать всем страницам приоритет равный 1, так как этот параметр относительный.

Даем знать поисковикам

Поисковые системы узнают о Sitemap по строчке в robots.txt, однако некоторым из них можно сообщить вручную. Например, у Google есть Webmaster Tools, которые и позволяют вам добавить сайтмап, узнать какие другие сайты ссылаются на ваш, были ли ошибки при индексировании и тому подобное. Похожими возможностями обладает сервис от Яндекса.

Когда что-нибудь меняется у вас на сайте, а значит должен поменяться и Sitemap, вы можете просто дождаться очередной переиндексации, а можете и самостоятельно известить поисковую систему о том, что Sitemap изменился. У Гугла это можно сделать с помощью специальной кнопки в Webmaster Tools или с помощью специального запроса:

http://www.google.com/webmasters/tools/ping?sitemap=адрес_сайтмап

В ответ вы дожны получить код HTTP 200. Помните, что адрес сайтмап должен быть URL-кодирован.

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

После извещения, поисковый бот заново загрузит Sitemap, посмотрит, что в нем изменилось и в зависимости от этого переиндексирует или проиндексирует нужные страницы. Свежие страницы появляются в базе довольно быстро — значительно быстрее, чем без Sitemap.

Software

Никто не заставляет вас писать Sitemap самому. Во-первых, существуют специальные специальные сайты, которые за вас создадут Sitemap, такие как xml-sitemaps.com. Во-вторых, специальные скрипты для сервера. Вот тут есть скрипт на python от Google.

Но самое удачное на мой взгляд — интегрировать систему, которая будет создавать Sitemap, с вашим сайтом. Вы можете самостоятельно написать скрипт, который будет создавать Sitemap. Если вы используете какие-то CMS-решения, вполне возможно, что кто-то уже написал соответствующий plugin.

Для Wordpress существует хороший plugin — Google (XML) Sitemaps Generator. Он умеет самостоятельно создавать Sitemap после написания нового поста, расчитывать приоритет в зависимости от количества комментариев, извещать поисковые системы о том, что Sitemap изменился. Кроме того, он за вас пропишет путь к Sitemap в robots.txt. Очень удобно.

Пользуйтесь.

Также посмотрите:

• Приоритет в CSS
• 6 способов привлечь внимание людей
• “Говорящие головы” в онлайн видео – это скуучно
• Яркое оформление, красивые слова => выглядит как реклама => игнорировать

Как это все работает?

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

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

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

Но как сервисы статистики узнают, откуда пришел пользователь?

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

Так же большинство браузеров в HTTP заголовке, который называется Referer, посылают полный адресс страницы, с которой они пришли. Так можно узнать, какие страницы поставили ссылки на ваш сайт. Если реферер равен скажем

http://yandex.ru/yandsearch?text=%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B0%20%D1%81%D0%B3%D0%BB%D0%B0%D0%B6%D0%B8%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%D0%BC%20cleartype%20vista&stpar2=%2Fh0%2Ftm18%2Fs1&stpar4=%2Fs1

то пользователь пришел с Яндекса — это видно. Все эти странные символы — это то, что искал пользователь на Яндексе. Сервис статистики декодирует все это и покажет вам ключевые слова. В данном случае, пользователь на Яндексе искал: программа сглаживания cleartype vista.

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

Терминология

Зарегистрировавшись на любом сайте статистики вы неизбежно столкнетесь с характерной терминологией. Вот 3 термина, которые вы просто обязаны понимать:

1. Хост. Хост — это уникальный обладатель IP-адреса, который зашел к вам на сайт, то есть один уникальный элемент Сети: компьютер, мобильное устройство, etc. Хосты обычно ценятся больше, чем посетители.
2. Посетитель. Дело в том, что далеко не всегда один IP-адрес соответствует одному физическому устройству. Скажем, на все общежития моего университета приходятся три IP-адреса. Даже, если все общажные студенты ринуться на мой сайт, сервис статистики засчиает +3 хоста и +много-много посетителей.
   Такая ситуация с IP-адресами не редкость. Далеко не все провайдеры выдают каждому пользователю уникальный IP-адрес.
   Тут есть и обратная сторона. Дело в том, что подсчет посетителей в отличие от хостов производится с помощью cookies. Но это значит, что вы можете открыть еще один браузер на своем компьютере, зайти на сайт и получить +1 посетителя. В данном случае, нет никакого способа правильно их считать.
3. Хит. Один просмотр станицы вашего сайта. Большинство посетителей сайта делают именно один такой просмотр. Большее количество хитов на посетителя может говорить об интересности информации на вашем сайте и о том, что на нем есть хорошая связь между отдельными страницами.

Hit.ua

Нажмите на картинку для увеличения

Один из лучших сервисов статистики, что я видел. Не слишком известный впрочем — возможно, это и к лучшему. Тут есть вся необходимая информация, которая может вам понадобиться, но самое главное — сервисом пользоваться удобно. В отличие от многих других сайтов со статистикой, этот не показывает рекламы, всяких ненужных новостей и работает быстро. Еще одно преимущество hit.ua — невидимый счетчик. Рекомендую. Адрес сайта, как вы наверно уже догадались — http://hit.ua.

Google Analytics

Нажмите на картинку для увеличения

Да, у Гугла есть сервис статистики. Надо сказать, что подход к статистике у Google приблизительно такой же, как и ко всему остальному. Этот сервис статистики может все: самые разнообразные графики, выбор любого временного периода, сравнение двух временных периодов, возможность пользоваться сервисом нескольким пользователям с разными правами. Счетчик исключительно невидимый.

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

Все это добро совершенно бесплатное. Как по мне, антимонопольный комитет США должен обратить внимание на этот сайт, он явно оставляет без работы аналогичные, но платные сервисы. Адрес сайта — http://www.google.com/analytics/.

Единственный недостаток сайта — некоторая тяжеловесность. Обилие разнообразных возможностей не позволяет быстро к ним добраться и легко в них ориентироваться.

Как установить счетчик себе в блог

После регистрации на каком-нибудь из сайтов статистики, вам обязательно придется вставить на каждую страницу сайта код счетчика, иначе сервис статистики не будет работать. Если у вас блог на Wordpress, сделать это довольно просто.

В административной панели, в разделе Appearance есть редактор файлов, который позволяет вносить правки в файлы тем. Выберите свою тему и выберите файл footer.php. Найдите закрывающий тег </body> и вставьте необходимый код перед этим тегом. Важно вставить код перед тегом, ибо код вставленный после тега работать не будет.

Если по какой-то причине, вы не можете внести изменения в файл с помощью встроенного в WordPress редактора, вы всегда можете сделать это через панель управления хостингом или по FTP. Вам потребуется изменить файл footer.php, который находится в: директория блога/wp-content/themes/имя темы.

Если все пройдет как надо, вы начнете получать статистику по вашим посетителям.

Также посмотрите:

• Отладка сайтов в старых IE
• Как продолжить загрузку Оперой
• Sitemaps: помогаем поисковым системам индексировать ваш сайт
• Как убрать строку меню из Opera?

Если вы попали на эту странице, набрав ссылку с картинки — что ж... Добро пожаловать! Почитайте сайт в его первоисточнике. Думаю страница Навигации поможет вам в этом.

Хотлинкинг — это вставка вашего содержимого (картинки, например) на чужую страницу без вашего ведома и разрешения. При этом само содержимое не копируется на новый сервер, а как было на вашем так и остается. Скажем, во время вставки картинки на свой сайт, нашему старому знакомому Плохому Вебмастеру достаточно прописать абсолютный путь в параметре src, тег img:

<img src="http://blog.undsoft.com/wp-content/uploads/see_through.png">

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

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

Htaccess vs. Hotlinking

Создайте в директории, где находятся ваши картинки, .htaccess файл и пропишите в нем следующее:

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?yandex\.ru/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?undsoft\.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?yandex\.net/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?feedburner\.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?mail\.ru/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?poisk\.ru/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^$ [NC]
RewriteRule .*\.(jpe?g|gif|bmp|png)$ nohotlink.png [L]

Для работы этого серверного правила потребуется специальный установленный модуль для преобразований URL — mod_rewrite. Идея в том, что когда браузер запрашивает у сервера картинку, он посылает в специальном http-заголовке информацию о том, с какой страницы пользователь попал на эту картинку. Этот заголовок называется реферером (от англ. refer — напрявлять, отсылать).

Если реферер на совпадает с адресом вашего сайта (в примере — с адресом моего сайта), вместо файлов з разрешением jpe?g|gif|bmp|png будет показана картинка nohotlink.png. Вопросительный знак jpe?g означает, что буквы e может не быть, то есть это блокирует как jpg, так и jpeg.

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

В правила придется добавлять исключения для некоторых поисковых систем и сайтов. Да, знаю, это не слишком изящное решение, но лучшего я пока не придумал. Строка RewriteCond %{HTTP_REFERER} !^$ [NC] пропустит запрос пользователя, если referrer'a нет.

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

Конечно, такой метод все равно расходует ваш трафик, но в теории может привнести и дополнительных посетителей. Поменяйте последнюю строчку на

RewriteRule .*\.(jpe?g|gif|bmp|png)$ - [F]

и тогда сервер будет выдавать ошибку 403 (Forbidden) вместо содержимого.

P.S.

А почему бы при этом не сделать редирект не на картинку, а на специальный рhp-скрипт, который сначала запишет в лог этот параметр HTTP_REFERER, а уже потом выдаст картинку? Таким образом вы всегда будете знать, какой сайт пытается использовать ваше содержимое.

Также посмотрите:

• Воровство постов с блога и почему это плохо

Random Posts

• Разные фичи в Google Earth
• Самодисциплина?
• Как убрать строку меню из Opera?
• Темы для Windows Vista