Карты-меню для узлов WWW

Закулисные механизмы перемещения по WWW

Самая популярная часть Internet - "Всемирная паутина" - WWW. Не в последнюю очередь это происходит из-за того, что она поддерживает внешне привлекательные страницы, по которым можно путешествовать, как по CD-ROM - скажем, щелкая по ярким кнопкам, нарисованным дизайнером. Общепринятым приспособлением для перемещения по страницам WWW является специальное изображение, которое называется "карта-меню" (Image Map). Оно может иметь вид набора кнопок и значков или списка текстовых пунктов меню, а иногда действительно выглядит как настоящая карта: щелкните по кружочку, обозначающему город, и отправляйтесь на виртуальную экскурсию по нему.

Все карты-меню появляются одинаково: вы создаете изображение, содержащее кнопки или иные приспособления для перемещения, а затем с помощью программы создания карт-меню размечаете на этом изображении активные области (hot spots), связывая с каждой областью некоторую Web-страницу.

Так обстоит дело вкратце. Более полная картина несколько сложнее: существует ряд тонкостей, влияющих на производительность WWW-узла. В этой статье будет подробно рассказано о достоинствах и недостатках карт-меню. Ссылки на все упоминаемые в тексте узлы, а также адреса, по которым можно получить рассматриваемые бесплатные и условно-бесплатные программы, имеются на моем WWW-узле (http://www.heidsite.com).

Как работают карты-меню

Карты-меню - это живое воплощение неуклюжего выражения "клиент-серверная архитектура": они соединяют клиентскую программу (WWW-браузер) с WWW-сервером. Когда посетитель узла щелкает по карте-меню, браузер посылает на сервер пару координат. Эти координаты еще не определяют выбор пользователя - только точку на карте. Сообщение гласит не "Щелчок по кнопке "Домой"", а "Щелчок в момент, когда курсор мыши находился на 30 пикселов правее и на 50 пикселов ниже левого верхнего угла карты".

Преобразование координат в адрес (URL) нужной сраницы - дело сервера. Для этой цели на серверах обычно служит программа интерфейса CGI (Common Gateway Interface - стандартный интерфейс шлюза). Такие программы выполняют на WWW-сервере различную специальную обработку запросов или действуют в качестве посредников между сервером и какой-то другой программой. Когда, к примеру, вы заполняете экранную форму, чтобы произвести поиск, CGI-программа принимает введенную вами информацию и передает ее в базу данных или поисковую систему.

При щелчке по карте-меню браузер посылает координаты точки щелчка CGI-программе, которая сравнивает их с файлом определения карты (map-definition file) - стандартным текстовым файлом, определяющим форму, положение и URL для активных областей карты-меню.

Установив URL, программа передает его серверу, сервер-браузеру, а браузер переходит на нужный адрес.

Изнанка карты-меню

Один из недостатков карт-меню состоит в том, что они замедляют работу сервера. Конечно, заглянуть в файл карты и извлечь оттуда URL - не Бог весть какая сложная операция, но и на это требуется время, которое можно было бы потратить на раздачу клиентам WWW-страниц. Умножьте число карт-меню на число посетителей, которые по ним щелкают, и на время обработки.

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

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

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

И наконец, карты-меню трудно тестировать. Невозможно проверить работу карты, просто открыв в браузере HTML-файл, который ее содержит, - карта и связанный с ней файл определения должны быть загружены на сервер, где находится и CGI-программа для ее обработки. Если этот сервер не ваш собственный, потребуется много времени на пересылку карт для отладки.

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

Если заглянуть за карту...

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

Сцена

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

Активные области

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

Определение и файл

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

Существуют два формата файлов определения карты - NSCA и CERN. Они очень похожи друг на друга и отличаются только порядком размещения атрибутов - формы и URL. Большинство CGI-программ для Mac используют формат NSCA. Не забудьте установить правильный формат в диалоговом окне Preferences (предпочтения) или Save As (сохранить как) той утилиты разметки, которой вы будете пользоваться.

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

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

Операторы HTML

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

CGI дает спектакль

Позади карты, преобразуя получаемые координаты в URL, стоит CGI-программа. О некоторых таких программах можно прочесть на врезке "Программы для обработки карт-меню". Если же WWW-сервер - не ваш собственный, проконсультируйтесь у своего поставщика услуг Internet, каким образом должна быть реализована карта.

Это изображение - его можно увидеть на WWW-узле Macworld - было создано с помощью программ Fractal Design Painter и Adobe Photoshop.

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

Программы для обработки карт-меню

Для WWW-серверов на базе Macintosh (с MacHTTP или WebStar фирм Quarterdeck/StarNine) существуют две отличные программы обработки карт.

MapServe Келли Кэмпбелла (условно-бесплатная, 20 долл.) отличается высокой скоростью и отлично работает на Power Mac. Ее можно найти по адресу http://www.spub.ksu.edu/other/machttp_tools/mapserve.

По мнению знатоков WWW, написанная Лутцем Вайманном CGI-программа Mac-ImageMap работает несколько медленнее. Зато она бесплатна. Обращайтесь за ней по адресу http://weyl.zib-berlin.de/imagemap/mac-imagemap.html.

Страница HTML. Ссылочный элемент ограничен метками. Элемент HREF указывает на CGI-программу, а элемент IMG - на изображение, соответствующее карте. Атрибут ISMAP при элементе IMG сообщает браузеру, что изображение является картой-меню.

Файл определения карты. Элемент rect (A) определяет, что активная область имеет форму прямоугольника. За ним следует URL, который указывает на нужную страницу (B). Две пары координат означают, что левый верхний угол прямоугольника расположен на 284 пиксела правее и на 211 пикселов ниже левого верхнего угла карты, а правый нижний угол - на 429 пикселов правее и на 331 пиксел ниже левого верхнего угла карты.

Как надо и как не надо делать карты-меню

Красиво, но неудобно

Карта-меню с базовой страницы Publisher"s Depot (http://www.publishersdepot.com) выглядит, может быть, и превосходно, но нарушает ряд принципов проектирования пользовательского интерфейса. Активные области имеют разный размер (это подразумевает, что одни из них важнее, чем другие), и им не хватает единообразия. Они хаотически разбросаны по всей карте, никак не организованы. Посетители узла, не зная, где именно щелкать, вполне могут попадать в мертвые области - это будет злить их и вдобавок замедлять работу сервера.

Просто, но эффективно

Карта-меню с узла I can"t Believe It"s Not Butter (http://www.tasteyoulove.com/index. html), возможно, менее эффектна, зато намного более эффективна. Сердечки однозначно опознаются как активные области и имеют текстовые подписи.

Примерно пять процентов пользователей Web все еще работают с текстовыми браузерами, такими как Lynx. Еще больше людей работают с модемами на 14,4 кбит/с и отключают в браузере загрузку изображений. Для этих категорий посетителей узла хорошо предусмотреть текстовый вариант меню, такой как строка под картой, изображенной на рисунке.

Клиентские карты-меню

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

В HTML 2.0 нельзя описать форму, положение и связи активных областей изображения прямо в документе - такая возможность предусмотрена только стандартом HTML 3.0, находящимся сейчас в стадии разработки. Однако расширение HTML, позволяющее это сделать (несколько иначе, чем в HTML 3.0), поддерживается некоторыми браузерами, в том числе Microsoft Internet Explorer, Netscape Navigator, Mosaic и всеми браузерами на основе лицензированной технологии SpyGlass (например, Enhanced Mosaic).

Для описания активных областей изображения служит элемент

......

Число областей может быть любым. Правила отсчета координат и выбора ссылки в случае пересечения областей такие же, как и для карт на сервере. Согласно электронному справочнику HTML Library Стефена Ле Хьюнта, реализована только одна форма - прямоугольник (SHAPE=RECT), но при работе с Netscape Navigator 2.0 я не обнаружила такого ограничения. Чтобы сделать какую-то область карты неактивной, нужно вместо HREF=... написать NOHREF:

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

Изображение, задаваемое элементом , связывается с описанием карты с помощью атрибута USEMAP:

Здесь предполагается, что элементы MAP и IMG HEIGHT=24 WIDTH=22 находятся в одном и том же файле. Их действительно часто хранят вместе, но это необязательно. Так что если вы, например, хотите в конце каждой страницы помещать кнопочную панель с перечнем возможных переходов, ничто не мешает вынести раскладку активных областей такой панели в отдельный файл. Заметьте, что ссылки в пределах сервера отсчитываются от того каталога, в котором находится файл с элементом

Атрибут USEMAP можно использовать вместе с атрибутом ISMAP, указывающим на наличие карты-меню на сервере:

 HREF="" HTTP://www.macworld.com/imagemap/cgi$mainmap" 

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