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 — всемерно поддерживать разработку стандартов по большому спектру продуктов и технологий в разных странах.