x
 
Олег Кирилюк
20 сентября 2007

Понравилась ваша идея инфоскроллера. В текстовом редакторе он пришелся бы очень кстати. Но что же делать с браузером? Ведь превалирующее большинство веб-страниц на сегодняшний день заверстано таблицами. Что изображать на инфоскроллере, чтобы он был действительно информативным, а не механически показывал, что перед вами таблица (пусть и с border=0)? Взгляните на главную Яндекса и скажите, что должно быть изображено на полосе прокруски. Таблица, заголовки, текст?.. Уважаемые читатели, помогите найти рациональное решение.

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



На главной странице Яндекса инфоскроллер не нужен — там и вопрос прокрутки, кажется, не возникает.

Инфоскроллер полезен для длинных страниц с разнообразным материалом: таблицами, иллюстрациями, подзаголовками, как например, обсуждение инфографики Эсквайра.

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

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

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

Может быть, кто-то из технологов посоветует третий путь?


Поделиться
Отправить

Комментарии

Роман Добровенский
20 сентября 2007

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

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

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

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

Степан Столяров
20 сентября 2007

Простейший вариант — поместить на инфоскроллер сплющенный скриншот всей страницы.

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

Другие очевидные претенденты на место в инфоскроллере — формы и иллюстрации.

Можно даже применить некоторые эвристики, чтобы распознавать элементы страницы. (Например, вполне уверенно можно говорить, что <div id=‘header’> и <div id=‘footer’> названы так отнюдь не случайно.) Но можно, конечно, ввести и дополнительные механизмы разметки — добавить понятные инфоскроллеру атрибуты HTML и селекторы CSS и ждать, пока ими начнут пользоваться.

Антон Вернигор
21 сентября 2007

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

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

Артем Зуров
21 сентября 2007

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

Антон Гулега
23 сентября 2007

Идея инфоскроллера уже используется в программе Beyond Compare.

Иван Петропольский
28 сентября 2007

Если страница не фиксирована, то при изменении размеров окна или шрифта расположение элементов может здорово измениться, вместе с ним должен обновляться и инфоскроллер.

Роман Добровенский: «Второй подход — отображать схематически отмасштабированную страницу.»

Можно сделать дубликат кода страницы и набор стилей, приводящих его к нужному виду. Так мы избавляемся от сложных скриптов, анализирующих код и CSS либо необходимости «авторски» размечать каждую страницу. Устраняется и проблема возможных пересчетов (которых может быть очень много, особенно если страница тянется плавно).

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

Алексей А. Евдокимов
4 октября 2007

Элемент, похожий на «инфоскроллер», давным-давно уже стал общепринятым в различных IDE.

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

Во-вторых, в редакторах исходного кода — потенциальные ошибки синтаксиса и семантики, а также участки свернутого кода.

В-третьих, в режиме отладчика — положение точек останова программы.

См. сравнивалку версий в Oracle JDeveloper для примера.


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

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

5 4 3




Недавно всплыло

Как вы проверяете соответствие вёрстки макету 2 Иногда я спрашиваю о скидке для тренировки и потому что не против шанса сэкономить 1 3 10