расставляй правильно приоритеты и не отвлекайся на мелочи

Трюк с юзабилити, используем якоря

По ходу публикаций всегда возникли ситуации, когда необходимо человека отослать к конкретному участку текста в статье, хорошо когда статья небольшая и текста не так много, но если обратное, отсылаемому приходится выискывать необходимый текст теряя время и вычитывая, как правило, ненужную ему информацию. Всем известно, что для этих целей в HTML существуют якоря (anchor), да, это удобный способ, и где-то в интернете (по моему у Артемия Лебедева, но могу ошибаться) я уже встречал совет, что полезно в тексте все параграфы метить якорями и видимым образом обозначать их, к примеру как #p1, #p2 и т.д., что-бы Ваш читатель видел наименование якоря и мог самостоятельно определить прямую ссылку к текущему параграфу.

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

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

Таким образом, если есть необходимость в таком юзабилити, мы должны следовать следующим правилам:
1. При формировании текста каждый параграф должен иметь уникальный title, который должен быть тем-же самым, что и якорь этого параграфа, для простоты я использую записи типа:

<p title=»p1″ id=»p1″>
….здесь текст….
</p>

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

2. Для выделения параграфа с якорем можно воспользоваться услугами JavaScript, к примеру, у меня получился вот такой код:

<script type=’text/javascript’>
/* Paragraph style element and value */
var anchStyleItem = ‘backgroundColor’;
var anchStyleItemVal = ‘#ffc’;
if (arr = /#(.*)/.exec(document.location)) {
pars = document.getElementsByTagName(‘p’)
for (i = 0, max = pars.length; i < max; i++)
if (pars[i].title == arr[1]) eval(‘pars[‘+i+’].style.’+anchStyleItem+’=»‘+anchStyleItemVal+'»‘);
}
</script>

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

var anchStyleItem = ‘textDecoration’;
var anchStyleItemVal = ‘underline’;

Все, теперь можем строить прямые ссылки на текст, и отылать к нему кого нам надо, к примеру:
Как правильно разослать письмо нескольким получателям
Где я это взял? Там внизу ссылка на источник

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

2 комментария на статью:
  1. how:

    Похожее видел здесь — http://autoplan.com.ua/faq.htm
    Там тоже можно указать на любой абзац и он подсвечивается.

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

  2. bridennis:

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

Ответить
Обязательные поля помечены *