Web-страницы и сайты

7.2. WEB-СТРАНИЦЫ И САЙТЫ

С развитием Интернета появилось множество новых областей деятельности и даже профессии, одна из которых — Web-дизайнер. Так называют специалиста, со­здающего основной вид информационных ресурсов сети — Web-страницы, а точнее, их системы. Страницы объединяются с помощью гипертекстовых ссылок (связей) и образуют тематические Web-узлы и сайты (граница между этими категориями весь­ма условна и касается только масштабности творения или претенциозности автора;

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

портал - это Web-узел, предоставляющий посетителю персонализированную на­чальную страницу, бесплатные услуги электронной почты, новостной и развлекатель­ный сервисы; как правило, портал является точкой входа пользователей в Интернет.

Поскольку и порталы, и сайты состоят из страниц, то именно о них и пойдет речь далее.

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

Итак, интерфейс большинства Web-страниц определяют следующие компоненты:

• пассивные элементы страницы (фон, текст, графика, таблицы, разделители, фреймы);

• интерактивные элементы (списки, кнопки, сенсорные карты, формы);

Рекомендуемые материалы

• элементы эстетического оформления (фоновые изображения, звуковое со­провождение, анимационные эффекты);

• средства навигации по странице (документу) и в системе страниц;

• ссылки на внешние ресурсы Интернет.

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

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

ПАССИВНЫЕ ЭЛЕМЕНТЫ

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

Если вы испытываете затруднение в выборе цвета, воспользуйтесь личными пред­почтениями пользователя и задайте для своей страницы установки цветов по умол­чанию (default). В этом случае при отображении документа будут использоваться настройки броузера или операционной системы на компьютере пользователя.

ИНТЕРАКТИВНЫЕ ЭЛЕМЕНТЫ

Несомненно, наиболее важным элементом, обеспечивающим интерактивность Web-документов, являются гиперссылки, но именно по этой причине мы выделили их в особый класс и рассмотрим чуть ниже. Здесь речь пойдет о более привычных для пользо­вателей современных персональных компьютеров элементах интерфейса, рассмотрен­ных в предыдущих главах. Главный принцип разработчика должен быть тем же, что и при создании локальных приложений: никаких неожиданностей для пользователя. Продиктован он, как вы понимаете, требованием согласованности интерфейса. Его ре­ализация частично возлагается на броузер, обязанностью которого является обеспече­ние привычного вида и поведения таких элементов (кнопок, списков и т.п.), а частично -на Web-дизайнера, задача которого — не переусердствовать в изобретении образов тех же кнопок, представленных на странице, например, в виде сенсорных карт.

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

• Ввод информации для ее пересылки на сервер (на основе заполнения форм);

• Выбор информации из имеющегося перечня (работа со списками);

• Навигация по сети или внутри данного сайта (работа с гиперссылками и сенсорными картами);

• Настройка визуальных атрибутов и содержимого страницы (списки или пере­ключатели вариантов оформления).

ФОРМЫ НА WEB-СТРАНИЦАХ

Читатель, вероятно, помнит, что заполнение готовых форм — это один из вари­антов ведения диалога с пользователем. Во времена текстовых интерфейсов он пре­красно себя зарекомендовал, так как сочетает высокую наглядность, поддержку пользователя и более эффективное использование ресурсов компьютера, чем, на­пример, диалог в форме «вопрос-ответ». Современные графические интерфейсы несколько повысили наглядность форм, добавив флажки, переключатели и заме­нив текстовые указания типа «После заполнения всех полей нажмите клавишу [Enter]» кнопками с требуемым текстовым комментарием. Заполнение таких форм осуществляется заметно быстрее за счет применения мыши и техники прямого ма­нипулирования. Да и сами формы практически ничем не отличаются от диалого­вых панелей, работа с которыми понятна каждому пользователю современного ПК.

СЕНСОРНЫЕ КАРТЫ

Сенсорные карты — это графические объекты, содержащие специальные области, так называемые активные зоны (hotspots), которые позволяют пользователю перемещаться на связанный (ассоциированный) с картой URL или на другую стра­ницу в пределах того же LJRL посредством щелчка ЛКМ на выбранной зоне. Сен­сорная карта может иметь несколько активных зон, с каждой из которых связан собственный URL. Хотя в большинстве случаев сенсорные карты используются для перехода на другую страницу или на другой URL, с их помощью можно также вызы­вать файлы произвольного типа (например, звуковые).

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

Графическое изображение сенсорной карты должно обеспечивать:

1. Наглядное представление структуры узла (или системы взаимосвязанных узлов);

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

• краткая характеристика содержащейся информации;

• относительный объем информации;

• периодичность (или последняя дата) обновления информации.

Пример возможного варианта реализации сенсорной карты показан на рис. 7.1.

Карта сайта "форт-техиология"

Рис. 7.1. Вариант реализации сенсорной карты

НАСТРОЙКА ВИЗУАЛЬНЫХ АТРИБУТОВ ОТОБРАЖАЕМОЙ

ИНФОРМАЦИИ

Забота об удобстве пользователя должна стать одним из основных приоритетов Web-дизайнеров (сейчас, к сожалению, на первом месте чаще оказывается демонстрация собственных прикладных навыков или шокирующих эстетических изысков; но будем считать это «болезнью роста», в преодоление которой мы тоже пытаемся внести свою лепту).

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

Существует несколько веских причин «собственноручной» настройки страниц пользователем:

• необходимость учета характеристик аппаратуры и соединения с Интернетом;

• необходимость учета особенностей применяемого пользователем программ­ного обеспечения;

• языковые предпочтения и индивидуальные психофизиологические характе­ристики людей, для которых эти страницы созданы.

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

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

Рекомендация вторая. Если страница содержит много графики (которая заг­ружается значительно медленнее текста и потому появляется на странице в пос­леднюю очередь), следует предусмотреть текстовый вариант переключателя, ре­ализуемого в форме меню или списка. Таким образом, оформляются, например, переключатели используемого языка и кодировки символов текста страницы. В некоторых случаях переключатели языка имеют вид небольших изображений с символикой соответствующих национальностей (например, флага государства). Этот вариант хорош своей наглядностью и компактностью, но предполагает оп­ределенный уровень образованности и сообразительности пользователя. Если в броузере отключен вывод графики, предлагаемый вариант должен предусмат­ривать вывод альтернативного текста, что легко реализуемо в языке HTML (Hyper Text Markup Language - язык гипертекстовой разметки), но использует­ся не всегда. На рис. 7.2 приведены некоторые варианты оформления переклю­чателей вида страницы.

Б) Переключатель языка в виде                        RUS | USA

текстовых гиперссылок

Г) Переключатели кодировок в виде      WIN-1251 | KOI-8 | MAC

Рис. 7.2. Примеры оформления переключателей для настройки страницы

УПРАВЛЕНИЕ СОСТАВОМ ОТОБРАЖАЕМОЙ ИНФОРМАЦИИ

Интересы пользователей, посещающих те или иные информационные ресурсы Интернета, достаточно разнообразны, и не всегда совпадают с тематикой и широтой охвата, предлагаемыми разработчиком, Идеальной можно считать ситуацию, когда пользователь, посетив тот или иной сайт, получил все необходимые ему сведения и ни разу не отвлекся на что-то лишнее, избыточное или не относящееся к делу. К сожалению, реальность еще очень далека от идеала. В стремлении наиболее полно удовлетворить информационные потребности потенциальных пользователей, а ча­сто просто в наивной надежде объять необъятное, некоторые разработчики напол­няют свои сайты всевозможными сведениями, разобраться в которых бывает дос­таточно сложно. Существующие на данный момент инструменты не позволяют непосредственно встроить в Web-страницу средства фильтрации предоставляемой информации на основе предпочтений конкретного пользователя. В этой связи уме­стно еще раз привести в качестве примера программный продукт Learn Sesame, вы­полняющий индивидуальную настройку узла по набору характеристик пользовате­ля. Правда, для уяснения интересов пользователя требуется достаточно длительное время (либо неоднократное посещение узла пользователем). Этого недостатка ли­шены так называемые групповые фильтры, которые обеспечивают практически мгновенную настройку узла на определенный класс (группу) посетителей, имею­щих сходные характеристики. Примером такого фильтра является программа GroupLens фирмы Net Perceptions. Как групповые фильтры, так и инструменты типа Learn Sesame достаточно сложны, имеют высокую стоимость (порядка $30 000) и ориентированы на применение на крупных Web-узлах. Поэтому для многих Web-дизайнеров одним из наиболее доступных средств индивидуализации предоставляемой информации являются рассмотренные выше сенсорные карты, помогаю­щие пользователю выбрать собственный маршрут перемещения по узлу.

ПОИСКОВЫЕ СИСТЕМЫ

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

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

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

Удобство формирования информационных запросов обеспечивается:

• полнотой и наглядностью языка запросов;

• удобством ввода и редактирования запросов;

• доступностью и качеством составления справочной информации. Удобство просмотра и анализа результатов поиска определяется:

• структурой отчета о результатах поиска;

• удобством навигации (перемещения) по этому документу;

• составом и объемом сведений о найденных документах, включаемых в отчет. Удобство доступа к найденным документам зависит от:

• полноты и качества описания документов в соответствующих пунктах отчета;

• наличия и корректности ссылок на документы;

• корректности реакции на ситуации, связанные с недоступностью документа (отклю­чен сервер, изменен или удален документ с момента последнего индексирования и т.д.)

В качестве примера, иллюстрирующего принципы построения и функциониро­вания поисковых машин, рассмотрим систему отечественного производства под названием Яндекс (или Япаех).

Пользовательский интерфейс Яндекс в целом соответствует известному стан­дарту CUA фирмы IBM, определяющему общие принципы организации текстовых и оконных интерфейсов большинства современных программ. Поэтому его изуче­ние и использование не представляет трудностей для людей, знакомых с современ­ным программным обеспечением персональных ЭВМ.

Общий вид первой поисковой страницы сервера www.yandex.ru приведен на рис. 7.3.

Рис. 7.3. Первая страница поисковои машины Яндекс

От одного обращения к другому вид экрана может изменяться вследствие обнов­ления рекламной и текущей информации, но это не должно смущать посетителей Интернета, привыкших к такой динамике. Главное - это общая структура экрана, а она в Яндекс достаточно проста и наглядна; страница не перегружена информацией, но содержит практически все необходимое для начала плодотворной работы.

В процессе поиска Яндекс вычисляет для каждого найденного документа вели­чину релевантности (соответствия) содержания этого документа поисковому зап­росу. Список найденных документов перед выдачей пользователю сортируется по этой величине в порядке убывания. Релевантность документа зависит от ряда фак­торов, в том числе от частотных характеристик искомых слов, веса слова или выра­жения, близости искомых слов в тексте документа друг к другу и т.д.

Пользователь может повлиять на порядок сортировки, используя операторы веса и уточнения запроса.

В отличие от некоторых словарных поисковых систем, обрабатывающих (индекси­рующих) только вполне определенные части исходных документов, например, заголов­ки или первые 100-200 строк, Яндекс является средством полнотекстового поиска ин­формации, то есть работает с каждым документом от начала до конца. Важным свойством Яндекс является то, что эта система работает с учетом морфологии (законов формообра­зования слов) русского языка. Это свойство означает, что если в запросе есть слово «идти», то в результате поиска будут найдены ссылки на документы, содержащие слова «идти», «идет», «шел», «шла» и т.д. Учет морфологии существенно повышает удобство и эффективность использования поисковой системы, освобождая пользователей от необ­ходимости составления сложных запросов. Помимо этого сокращается объем индекс­ных файлов, так как слова в них хранятся в одной — «нормализованной» форме, что, помимо экономии ресурсов сервера, сокращает время поиска информации.

ЭЛЕКТРОННЫЕ МАГАЗИНЫ

С распространением в Интернете электронной коммерции все более актуальной становится задача побуждения посетителей к повторному визиту. В связи с этим для порталов, реализующих функции электронных магазинов, на первое место выходит необходимость реализации на них средств коллективной фильтрации, ранжирова­ния и ускорения выдачи результатов поиска. Таким образом, эффективность элект­ронной коммерции опять-таки зависит от умения приспосабливаться к интересам пользователей. Своевременно осознав это, фирмы DejaNews и HotBot разрабатыва­ют механизмы коллективной фильтрации, через которые будут собираться отзывы пользователей о просмотренных ими материалах. Тем не менее, даже не имея в своем распоряжении таких инструментов, разработчик электронного магазина может дос­тичь требуемого уровня его посещаемости, используя следующие рекомендации:

• предоставьте потенциальному покупателю несколько способов поиска нуж­ных ему товаров;

• продумайте классификацию предлагаемых товаров, сопроводив каждую группу товаров краткой характеристикой;

• при использовании графических иллюстраций учитывайте скорость их загрузки;

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

• обеспечьте посетителям легкий и удобный доступ к дополнительной инфор­мации по заинтересовавшему их товару;

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

ТАБЛИЦЫ СТИЛЕЙ

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

Решение указанных проблем было найдено в 1996 году, когда Консорциумом 3W (WWW Consortium - W3C) была стандартизована технология иерархических таб­лиц стилей (Cascading Style Sheets - CSS). Суть технологии CSS заключается в том, что она позволяет добавлять в HTML-код описание «стиля страницы», содержащее такие атрибуты, как тип шрифта, цвет, отступы, способ выравнивания элементов теки т.д. Другими словами, таблицы стилей по своему предназначению аналогичны шаблонам текстовых документов, используемым, например, в редакторе MS Word.

Используя CSS, Web-дизайнер может создать один файл с таблицей стиля и затем применить его ко всем страницам узла. Соответственно, любое изменение в таком фай­ле приведет к автоматической корректировке всех использующих его страниц.

Иерархия таблиц стилей имеет два аспекта.

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

Во-вторых, иерархию образуют таблицы стилей, созданные автором узла (стра­ницы) и посетителем: если созданные ими стили конфликтуют, то приоритет отда­ется авторскому стилю (хотя, следуя золотому правилу «клиент всегда прав», броузеры позволяют изменить иерархию на противоположную).

ЕЩЕ РАЗ О СТАНДАРТИЗАЦИИ

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

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

Вместе с этой лекцией читают "Осушка газа".

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

World Wide Web Consortium (W3C).

Консорциум, созданный в 1994 году, насчитывает около 200 членов, представля­ет интересы конечных пользователей, научных учреждений и компьютерных фирм и имеет солидную международную репутацию. Его представительства есть в лабо­ратории компьютерных наук Массачусетского технологического института, Национальном институте информатики и автоматики во Франции и в университете Keio University Shonan Fujisawa Campus в Токио.

W3C занимается тем, что предлагает и поддерживает Web-технологии, а также пуб­ликует коды эталонных реализации. W3C работает с технологиями броузеров, такими как HTML и XML, и рядом стандартов, включая HTTP адреса URL и цифровые серти­фикаты. Одна из основных заслуг этой организации состоит в том, что ей удалось определить некие общие рамки, позволившие объединить идеи двух конкурирующих компаний — Microsoft и Netscape - относительно применения указанных технологий.

Internet Engineering Task Force (IETF) определяет себя как «самоорганизованная группа людей», которая представляет на рассмотрение и оценивает новые Интернет-технологии. В IETF нет официального членства, но группа собирается регу­лярно, три раза в год. Она взаимодействует с Internet Society, Internet Engineering Steering Group и Internet Architecture Board. В компетенцию IETF входят проблемы архитектуры Интернета и разработка технологий, обеспечивающих работу в Сети, таких как Electronic Data Interchange, каталоги, календари и планировщики, а так­же приложения электронной почты.

International Organization for Standardization (ISO) — Международная организация по стандартизации -имеет статус федерации национальных организаций по стандартизации. ISO основана в 1947 году, в нее входит порядка 100 стран. Миссия ISO — всемерно поддерживать разработку стандартов по большому спектру про­дуктов и технологий в разных странах.