Навигация по заголовкам и картинкам

29.07.2010

Я уже писал про это, кажется, но хочу повторится, потому что уже окончательно сформировалось в голове правильное видение.

Кратко о проблеме

  1. Злой Никодим Известный разгильдяй и SEOшник Никодим ежедневно находит и просматривает не менее десятка русских и полусотни буржуйских SEO-блоггов. Он не любит многабукаф и очень чертыхается, ища крупицы действительно ценной информации. Никодим прокручивает экраны так яростно, что его домашний скорпиончик тоже начинает волноваться, менять цвет и отбрасывать лапки. Неплохо бы спасти скорпиончика, мне лично его очень жаль :(
  2. Домохозяйка Глафира Ивановна вечерами любит просматривать местный сайт с приколами, особенно фотографии «милых котиков». У Глафиры нередкое заболевание — перфекционизм глазного нерва в сочетании с параличом среднего пальца (наследие тяжёлого детства), а ещё у неё в холодильнике есть литровая банка йогурта. Первый факт приносит ей косвенные страдания, потому вторым Глафира Ивановна обильно утешает себя. Страдает наша домохозяйка от того, что на каждого котика приходится проделывать множество манипуляций колёсиком мыши прежде чем верхний край изображения окажется ровно наверху окошка браузера. Как же помочь котикам правильно позиционироваться?

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

Было бы здорово, если бы появился User-JS или плагин, который умел бы:

Это было бы офигительно удобно! Для навигации можно было бы сделать панельку, но всё должно работать и просто с клавиатурными сочетаниями (пусть настраиваются). В базовой поставке сочетания могут быть примерно такими:

i Перейти к следующей картинке.
I Перейти к предыдущей картинке.
h Перейти к следующему заголовку.
H К предыдущему заголовку.
hh Показать/скрыть оглавление (все заголовки).
ii Показать/скрыть изображения (все картинки).

Касаемо последних двух пунктов: это уже модификация дерева элементов, то есть при оглавлении должны остаться действительно только заголовки (кажется, где-то я уже видел нечто подобное). А с картинками ещё интересней! При входе в режим просмотра картинок показывается первая, но с повышенным индексом слоя (CSS z-index), на единичку меньше ставится подложка (затемняющая или осветляющая, CSS opacity). Кроме того, слева (или справа) появляется колонка с уменьшенными копиями всех изображений (CSS max-width, opacity) и они будут тусклыми кроме активного в данный момент.

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

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

P.S. Если я снова изобретаю велосипед, покажите мне решения.

P.P.S. Читаю сейчас книгу Джоела Спольски, именно поэтому решил разбавить сухой текст Глафирой и Никодимом :) Позже ещё напишу про эту книгу, она весьма недурна.

Комментарии

  1. # Never Lex

    Удобно для какого-то популярного журнала. Для блога имхо не нужно.

  2. # Тормоз

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

  3. # Content Provider: 

    Я пользуюсь вот этим: addons.mozilla.org/e…

    Не совсем то, что ты описал, но все же сильно улучшает читаемость.

  4. # Тормоз

    Про эту штуку я давно знаю. Совсем не то.

  5. # Сергей М.

    Для изображения и видео – www.cooliris.com/

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

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

  6. # Бутылк.Ус

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

  7. # Тормоз

    Бутылк.Ус, зри в корень. Какие поисковики? Речь ПРО БРАУЗЕР.

  8. # phpdude

    интересная идея и возможно даже несложно реалзиуемая в виде жс снипета/плагина/юзер жса

  9. # Тормоз

    Да там точно особых сложностей нет. Проставить идентификаторы да обработчик клавиатурных сочетаний сделать.

  10. # phpdude

    единственная сложность – понять что заголовок (можно на h1-h6 тупо ориентироваться, но часто сайты верстаны через задний проход и на эот полагаться не стоит 100%) ну и что картинка (ведь она должна быть немаленькй и находиться в контентной области), это непростые аналитические задачи, которые вызовут немало отладки 50 строчного куска кода

  11. # Тормоз

    Сайты через жопу идут туда же :) Не усложняй задачу, нефиг тут громоздить монстрячные анализаторы, задача простая, пусть решение работает для нормальных сайтов и всё.

    Это, кстати, если плагин приобретёт популярность, будет способствовать глобальному улучшению качества HTML-кода в сети.

    С картинками тоже — нормальные сайты все оформительские картинки выносят в CSS.

    P.S. Под «нормальными сайтами» имею в виду соответствующие стандартам. Учитывая большое распространение популярных CMSок, постепенно это становится нормой.

  12. # Денис aka KRoN

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

  13. # самбади: 

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

  14. # самбади: 

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

  15. # anonymous: 

    пробелл и поиск внутри страницы спасут отца демократии.

  16. # kikaha

    По поводу идеи:
    1. клевая
    2. уже реализована. правда не в браузере (хотя и частично в нем работает, но нужны плагины)
    3. это RSS
    4. мой любимый плагин – RSS-reader

    список заголовков, если фид правильно создан – то и картинка сразу выдается.

    5. упс. самбади по сути то же самое сказал :)

  17. # Тормоз

    Глафире Ивановне понадобится вторая банка сгущёнки, если рассказать ей про RSS. А у неё диабет :(

Комментирование этой статьи закрыто.

Интересное Покупки ТехникаРазное Отдых Статьи Строительство Услуги Общество Хобби Культура Советы Уют