Как стать автором
Обновить

Вебные хитрости: Индикатор новых сообщений

Время на прочтение 4 мин
Количество просмотров 1.3K
image

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

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

Итак, представьте себе, что у нас есть страница с адресом относительно корня, скажем, /latest/, на которой отображаются некие новые материалы в обратном хронологическом порядке. Для простоты изложения примем, что все записи относятся к одному типу, и их можно выводить в виде краткого анонса — ну, примерно как у нас на Хабре.

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

Теперь постояные посетители могут не лазить по всем разделам в поисках чего-то новенького (и ведь не факт, что обязательно смогут найти!), а прямиком идти на страницу «Новые сообщения», чтобы иметь возможность окинуть одним взглядом все, что появилось на сайте с момента прошлого посещения. А уж для администрации и модераторов сайта удобство такой ленты просто трудно переоценить!

Чтобы обеспечить доступ к ленте в один клик из любых навигационных глубин, удобно предусмотреть в шаблоне сайта соответствующую ссылку, поместив ее где-нибудь на видном месте. Записываем:

<a href="/latest/" class="latest">Новые сообщения</a>

Попутно замечаем, что ссылке присвоено некое имя класса (в данном случае «latest»), что позволит нам в дальнейшем легко модифицировать внешний вид и динамическое поведение ссылки средствами CSS.

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

А вот если задуматься? Нет ли здесь какого-то простого решения? Забегая вперед, скажу: есть! Решение имеется, причем настолько же простое и изящное, насколько и древнее: с его помощью вебмастера 90-х снабжали свои доски объявлений индикаторами новых поступлений в ту пору, когда никаких навороченных движков еще не было и в помине.

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

<a href="/latest/?12345" class="latest">Новые сообщения</a>

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

a.latest:link {
color: red;
}

a.latest:visited, a.latest:link:visited {
color: black;
}


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

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

a.latest:link {
background: transparent url('/img/blinker.gif') scroll no-repeat 0px 50%;
padding-left: 20px;
}

a.latest:visited, a.latest:link:visited {
background-image: none;
}


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

Ибо удобно!
Теги:
Хабы:
0
Комментарии 12
Комментарии Комментарии 12

Публикации

Истории

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн
PG Bootcamp 2024
Дата 16 апреля
Время 09:30 – 21:00
Место
Минск Онлайн
EvaConf 2024
Дата 16 апреля
Время 11:00 – 16:00
Место
Москва Онлайн