Разумеется, не предполагается, что web-сайты будут удовлетворять абсолютно всем этим требованиям на 100%. Технология, которую имеет пользователь, также должна сделать часть работы. Например, ожидается, что screen reader будет читать страницы людям, которым это требуется, а не каждый web-сайт будет предоставлять аудио-версию своего контента. Однако в то же время ожидается, что web-сайт предоставит страницы, которые можно прочитать с помощью обычной программы чтения экрана.

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

Документ «стандарта» WCAG 2.0 ( http://www.w3.org/TR/WCAG20/) даст понимание, а «технический» документ ( http://www.w3.org/TR/WCAG20-TECHS/) предоставит разработчику надёжные реализуемые фрагменты информации. Всё это разбивается на «общие» методы (технологически неопределённые) и специфические для отдельных технологий «W3C».

Для перехода с WCAG 1.0 на 2.0 «Web Accessibility Initiative» разработало соответствующее руководство - «Comparison of WCAG 1.0 Checkpoints to WCAG 2.0, in Numerical Order» ( http://www.w3.org/WAI/WCAG20/from10/comparison/).

Официальная английская версия WCAG 2.0: http://www.w3.org/TR/WCAG20/.

Готовящаяся официальная русская версия WCAG 2.0: http://www.wcag.ru/guidelines/wcag20.

WAI-ARIA, версия 1.0.

Ещё одним важным стандартом, разработанным консорциумом W3C, в 2008-2009 годах является стандарт WAI-ARIA 1.0, что расшифровывается как «Web Accessibility Initiative - Accessible Rich Internet Applications (Инициатива доступности web - доступность высокотехнологичных Интернет-приложений). Это пакет документов, который определяет, как сделать доступными сложные динамические web-приложения, которые используют такие технологии, как HTML, JavaScript и AJAX. Этот стандарт официально поддерживается ведущими Интернет-браузерами: Firefox 3.x и выше, Internet Explorer 8 и выше, Opera 9.5 и выше, а также некоторыми другими.

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

Основная документация WAI-ARIA 1.0 (англ.): http://www.w3.org/TR/wai-aria/.

Примеры использования WAI-ARIA 1.0 (англ.): http://www.w3.org/TR/wai-aria-primer/.

Документация по авторингу WAI-ARIA 1.0 (англ.): http://www.w3.org/TR/wai-aria-practices/

ГОСТ Р 52872-2007 Интернет-ресурсы. Требования доступности для инвалидов по зрению.

1 января 2009 года в Российской Федерации вступил в действие национальный стандарт ГОСТ Р 52872-2007 «Интернет-ресурсы. Требования доступности для инвалидов по зрению» (англ. The Internet resources. Requirements of accessibility for invalids on sight). Данный документ был разработан ФГУП «СТАНДАРТИНФОРМ» и НУ ИПРПП ВОС «Реакомп» по заказу Федерального агентства по здравоохранению и социальному развитию в рамках федеральной целевой программы «Социальная поддержка инвалидов на 2006-2010 годы», утверждённой постановлением правительства Российской Федерации от 29 декабря 2005 года. Данный документ стандартизует русскоязычные Интернет-ресурсы и призван установить общие требования их доступности для людей с нарушениями зрения.

В ГОСТе Р 52872-2007 требования доступности ресурса выражаются в виде набора из нескольких десятков рекомендаций, касающихся общего дизайна сайта, обязательного использования некоторых HTML-конструкций, структуры и особенностей вёрстки Интернет-страниц.

Однако данный документ не лишён ряда ощутимых недостатков и вызывает немало вопросов. Например, сайт, созданный с безусловным соблюдением пункта 5.2 «Графические файлы»:

Каждый графический файл должен быть снабжен поясняющим текстом. Для этого при включении в веб-страницу ссылки на графический файл (язык HTML) необходимо указать данный поясняющий текст в атрибуте ALT может быть неудобным для посетителя ресурса, так как при этом на странице будет присутствовать информация не только о графических элементах, несущих конкретную смысловую нагрузку, например, «Картина К. Малевича - Чёрный квадрат» или «Логотип компании с изображением глобуса», но и простых элементов визуального дизайна, например, «Голубая волнистая линия» или «узор с цветочками», что будет только мешать работе незрячего пользователя.

Требование пункта 5.1 «Объем контента»:

Частопосещаемые страницы по своему объему должны быть не более 2-3 экранов текста. Число ссылок на странице должно быть не более 15 также вызывает вопросы, например, «Что делать сайтам, у которых только меню уже насчитывает более 15 гиперссылок или сайтам типа wiki?», а главное не ясны мотивы ограничения числа ссылок с точки зрения доступности для инвалидов по зрению.

Однако имеет смысл отметить тот факт, что Федеральным законом «О техническом регулировании» №184-ФЗ от 27 декабря 2002 года разделены понятия «технический регламент» и «стандарт», в связи с чем все ГОСТы утрачивают обязательный характер и применяются добровольно, за исключением некоторых категорий, к которым ГОСТ Р 52872-2007 не относится. То есть данный документ носит лишь рекомендательный характер и несоблюдение его норм не влечёт никаких последствий для Интернет-ресурсов, в том числе и государственных, что делает его по сути бесполезным. К тому же раде справедливости стоит заметить, что не сайт института «Реакомп», как разработчика, не сайт Федерального агентства по техническому регулированию и метрологии, как учреждения отвечающего за распространение этого документа, не соответствуют данному ГОСТу. Причём на сайте Федерального агентства по техническому регулированию и метрологии сам данный документ выложен с нарушением себя самого, так как представлен в графическом формате с низким разрешением без текстовой альтернативы (несоответствие пункту 4.2.1 данного ГОСТа).

Таким образом, ГОСТ Р 52872-2007 не несёт никакой практической пользы по улучшению доступности Интернет-ресурсов для инвалидов по зрению и по сути является очередной «потёмкинской деревней». В данном же обзоре он рассматривается отдельно только потому, что имеет непосредственное отношение к русскоязычной части Интернета. Однако для web-разработчиков, озабоченных вопросом доступности их ресурсов, намного более полезно обратить внимание на стандарты Section 508 и, главным образом, на WCAG 2.0.

Официальная версия ГОСТа Р 52872-2007 в графическом варианте: http://protect.gost.ru/v.aspx?control=8&baseC=6&page=0&month=7&year=2010&search=ГОСТ Р 52872-2007&RegNum=1&DocOnPageCount=15&id=165452

Неофициальная версия ГОСТа Р 52872-2007 в текстовом варианте: http://tiflocomp.ru/docs/gost_r52872-2007.php

Прочие стандарты.

Существует множество других стандартов web-доступности, принятых в различных странах мира, например, немецкий BITV 1.0 Level 2 или итальянский Stanca Act. Однако они носят локальный характер и актуальны только для сайтов, активно работающих в странах, в которых они приняты. Если же отбросить юридический аспект доступности, то есть руководствоваться в первую очередь созданием доступного сайта с функциональной, а не формальной точки зрения, то соблюдение директив «W3C» даёт всё необходимое, а именно стандарты WCAG и WAI-ARIA последних, на момент создания сайта, версий.

Политика в области web-доступности (англ.): http://www.w3.org/WAI/Policy/

2.3 Тестирование web-доступности

После того, как сайт был создан, и при этом разработчик честно пытался следовать всем рекомендациям по обеспечению доступности web-контента, имеет смысл проверить, действительно ли ресурс соответствует заявленному accessibility-статусу.

Сразу следует отметить тот факт, что начать тестирование вашего ресурса желательно с проверки его ключевых страниц общими валидаторами HTML и CSS. Так как даже если ваш сайт был создан с учётом основных стандартов доступности, вряд ли он может считаться качественным продуктом, если, при всём этом, не соответствует базовым спецификациям. К тому же валидный HTML- и CSS-код - это уже половина успеха на пути создания доступного ресурса. Для осуществления подобной проверки существуют инструменты, предоставляемые консорциумом «W3C»:

HTML-валидатор W3C: http://validator.w3.org

CSS-валидатор W3C: http://jigsaw.w3.org/css-validator/

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

Автоматизированное тестирование.

Как уже было отмечено выше, существует достаточно много стандартов доступности сайтов. Разумеется, автоматизированные системы проверки созданы далеко не для всех. Однако с проверкой самых основных проблем не возникнет.

Если разработчик при создании своего сайта придерживался стандарта WCAG 1.0 или Section 508, то ему следует воспользоваться сервисом «Cynthia Says», доступным по адресу: http://www.cynthiasays.com. Здесь следует указать URL-адрес проверяемой страницы и задать стандарт, в соответствии с которым следует выполнять проверку. Причём для WCAG 1.0 можно выбрать один из трёх возможных уровней: 1A, 2A или 3A. При необходимости, можно задать дополнительные настройки. Например, для проверки доступности динамического контента имеет смысл провести тестирование несколько раз в режимах совместимости с разными браузерами, так как на разных Интернет-обозревателях он может выглядеть по-разному.

Если же разработчиком был использован стандарт WCAG 2.0, то «Cynthia Says» в данном случае будет бессилен. Для проверки соответствия стандарту WCAG версии 2.0 следует воспользоваться сервисом «ATRC Web Accessibility Checker», доступным по адресу: http://checker.atrc.utoronto.ca. Здесь также следует указать URL-адрес страницы и нажать на кнопку «Check It», но помимо проверки по URL сервис также предоставляет возможность загрузить файл напрямую. Это может быть полезно в том случае, если ваш сайт ещё не размещён в Интернете. «ATRC Web Accessibility Checker» также пригоден для проверки соответствия не только международному стандарту WCAG 2.0, но и некоторым региональным, например, уже упоминавшимся BITV 1.0 Level 2 или Stanca Act.

Однако всегда следует помнить, что современные системы искусственного интеллекта далеки от совершенства. Поэтому подобные методы тестирования доступности не являются абсолютно автоматизированными. Программист ресурса всё равно должен вручную просмотреть результат проверки и самостоятельно решить, является ли помеченное место проблемным в отношении доступности. Например, если система «Cynthia Says» встречает в коде страницы конструкцию типа <img alt=« «>, то она всегда выдаёт предупреждение, призывая проверить, что это изображение используется только для дизайнерских целей и не несёт конкретной смысловой нагрузки. Подробнее подобная ситуация уже рассматривалась в обзоре ГОСТа Р 52872-2007, разработчики которого не учли всех её нюансов.

Однако проблема доступности может заключаться не только в отдельных HTML-конструкциях или несовершенных полностью автоматизированных публичных тестах Тьюринга для различия компьютеров и людей (CAPTCHA), но и в не оптимальной цветовой схеме сайта. Например, его цветовая палитра может быть недостаточно контрастной. Помочь подобрать оптимальное сочетание цветов может сервис «Color Scheme Designer», доступный по адресу: http://colorschemedesigner.com. Если же требуется проверить уровень контрастности уже существующей страницы, то выполнить это можно при помощи сервиса «Contrast Analyser», доступного по адресу: http://www.paciellogroup.com/resources/contrast-analyser.html. Он определяет контраст между цветами фона и переднего плана.

Также в аспекте цветовой web-доступности имеет смысл затронуть такое понятие, как «безопасные цвета web», хотя данная тема и не имеет прямого отношения к автоматизированному тестированию доступности. Это наследие тех времён, когда компьютерные мониторы могли гарантировано выводить только 216 цветов (так называемая палитра 6Ч6Ч6). Эти 216 цветов должны были выглядеть одинаково на всех компьютерных платформах и браузерах, которые содержала 256-цветная (8-битная) компьютерная система, поэтому они были названы безопасными для использования на различных платформах, так как их применение при любых условиях не влекло никаких проблем совместимости. В системе RGB они кодируются в каждом из трёх потоков как 00, 33, 66, 99, CC и FF. Однако современные браузеры способны работать с 32-битным цветом, который создаёт палитру из 4294967296 различных цветов. Поэтому сейчас концепция безопасных цветов web не является особо актуальной, однако об этом не помешает знать любому web-разработчику.

Пользовательское тестирование.

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

Тестеров можно найти среди своих знакомых или в соответствующих Интернет-сообществах, которые есть на всех языках, в том числе и на русском. Также можно обратиться в рекрутинговые агентства, но на постсоветском пространстве это вряд ли даст ощутимые результаты, так как на таком уровне данная сфера развита только в Западной Европе и отдельных странах Северной и Южной Америки. Для русскоязычного проекта оптимальным вариантом будет являться связь с представителями соответствующего сетевого сообщества.

Доступность является важным понятием, как по экономическим, так и по социальным причинам. Это не только функциональное свойство web-сайта, а ещё и показатель качества, с которым он был создан. Если учитывать аудиторию сайта со всеми её особенностями во время его создания, то вы создадите более доступные страницы со всеми преимуществами, которые это приносит.

2.4 Доступ к Интернет-сайту незрячего или слабовидящего пользователя

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

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

Для того чтобы обеспечить доступ к компьютеру незрячего или слабовидящего пользователя, необходимо установить следующие программы:

Синтезатор речи;

Программу экранного доступа (программу чтения экрана, screen reader);

Программу, увеличивающую изображение на экране (для слабовидящих);

Программу оптического распознавания текста (+ сканер).

Последний пункт является желательным, но не таким уж необходимым. О программах экранного доступа подробно рассказывается на страницах одноименного сайта Программы экранного доступа. Таких программ не очень много, но, чтобы сделать выбор, вам придется прочитать информацию о каждой из них. Вам необходимо понимать, для чего незрячий человек, которому вы помогаете, хочет использовать компьютер. Кроме того, вы сами должны иметь опыт работы на компьютере, чтобы всегда прийти на помощь товарищу в трудной ситуации. Здесь, конечно же, возникнет проблема взаимопонимания между вами. Будьте, пожалуйста, терпеливы. Поймите, что нелегко человеку, лишенному зрения с детства, представить, что такое «список выбора» или «полоса прокрутки» (ListBox и ScrollBar). То, что, по уверениям разработчиков, выглядит «интуитивно понятно» в словесном изложении теряет практически всю свою «интуитивность».

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

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

Загрузить и установить систему поддержки речи MicrosoftSpeech API (SAPI) версии 4 и бесплатный синтезатор русской речи. L&H

Взять эти компоненты можно здесь: SAPI (827 Кб) и синтезатор (~2.8 Мб). Это исполняемые файлы (.exe), которые при запуске установят все необходимые компоненты в операционную систему. Следует сказать, что в Microsoft Windows XP встроен SAPI 5, однако для него нет бесплатных синтезаторов русской речи.

После установки Microsoft SAPI версии 4 и синтезатора русской речи вы можете проверить их работу, воспользовавшись кнопкой «Проба голоса», которая расположена в конце статьи. Для проверки необходимо, чтобы у вас была программа просмотра web-страниц InternetExplorer; должна быть разрешена работа сценариев JavaScript и обращение к элементам ActiveX (если что-либо не так, то появится сообщение об ошибке).

Скачать и установить так называемую «говорилку» - программу, читающую текст и использующую вышеназванные компоненты. Одну из таких программ - Буксир (BookSeer) - можно загрузить (~1.1 Мб) либо с сайта разработчика www.msolt.chat.ru, либо с нашего сайта.

Запустить читающую программу. Как правило, она может самостоятельно определить, какой синтезатор установлен в системе. В Буксире, например, сразу открывается каталог с выбранными книгами. Сначала он будет пустым (или будет содержать пример записи). Заполните его необходимыми текстами. Для того чтобы включить озвучивание списка книг, нажмите F9 (для отключения этого режима нажмите F9 еще раз). Выбор текста осуществляется нажатием Enter. Теперь вы находитесь в окне текста, в котором можно нажать F9 для чтения текста (остановка чтения - повторное нажатие F9). Программа Буксир имеет файл помощи с подробным описанием. В других программах последовательность действий может быть иной. Теперь вы можете объяснить своему товарищу, какие клавиши нужно нажимать, чтобы он мог самостоятельно загружать текст для чтения. К сожалению, кроме текста такие «говорилки», как правило, ничего не озвучивают, поэтому интерфейс программы (кнопки, меню и т.п.) остается немым. По этой причине последовательность нажатий клавиш лучше записать. Также рекомендуется использовать ярлыки на Рабочем столе Windows для запуска нужных программ при помощи комбинаций клавиш.

Для пользователей Windows 2000 / XP.

Представленная выше последовательность действий будет успешной и в операционных системах Windows 2000 и XP. Кроме того, эти операционные системы уже содержат в своем составе программу экранного доступа, называемую «Экранный диктор». Эта программа озвучивает большинство стандартных диалогов и элементов управления (меню, кнопки, списки и т.п.), что позволяет выполнять различные действия: запускать программы, работать с файлами и документами. К сожалению, возможности Экранного диктора ограничены и многие приложения остаются недоступными для незрячих и слабовидящих. Однако на первых порах Экранный диктор позволяет в определенной мере узнать компьютер, освоить клавиатуру, познакомиться с операционной системой и некоторыми программами.

Для того чтобы загрузить Экранный диктор, надо открыть меню кнопки «Пуск», затем открыть меню «Все программы» -> Стандартные -> Специальные возможности -> Диспетчер служебных программ.

При появлении окна Диспетчера служебных программ, как правило, автоматически загружается Экранный диктор и звучит речевое сообщение об этом. Если этого не происходит, то в списке служебных программ следует выбрать Экранный диктор и запустить его. По ходу дела заметим, что в списке служебных программ присутствует Экранная лупа, позволяющая работать на компьютере людям с ослабленным зрением. Если Экранный диктор загружается, но нет речевого сообщения, то это означает, что у вас не установлена поддержка синтеза речи (SAPI версии 4 для Windows 2000 и SAPI 5 для Windows XP).

К сожалению, Экранный диктор, входящий в состав Windows XP и работающий исключительно с SAPI 5, по какой-то причине не позволяет изменить англоязычный синтезатор речи на русскоязычный. В то же время Экранный диктор, входящий в состав Windows 2000 и работающий с SAPI 4, позволяет без сложностей выбрать нужный синтезатор из установленных на вашем компьютере. Единственный выход для пользователей русскоязычной Windows XP - это использовать Экранный диктор от Windows 2000, который без конфликтов работает в любой из названных операционных систем. Взять эту программу можно здесь. Экранный диктор от Windows 2000 требует, чтобы на вашем компьютере был установлен SAPI 4 и русскоязычный синтезатор речи. О том, как это сделать, было рассказано выше.

Справку по работе с Экранным диктором можно получить, набрав в диалоге «Выполнить» (меню кнопки «Пуск» -> Выполнить.) строку: hh reader.chm

Программа Max-Reader.

Программа Max-Reader относится к класу так называемых «читалок», то есть программ , озвучивающих текст и использующих для этого внешние синтезаторы (в данном случае - синтезаторы, совместимые с SAPI 4). Однако Max-Reader обладает весьма широким набором полезных функций, что выгодно отличает его от обычных «читалок». Эта программа доступна для начинающего пользователя и, кроме чтения текстов, может: переключать синтезатор, если встречается текст на английском языке, что позволяет прослушивать английские слова без искажений и акцента; воспроизводить музыку; записывать речь в звуковые файлы формата .mp3; корректировать ошибки произношения; взаимодействовать с программами «Библиоман», «Миди Эксплорэр», WinAmp , PROMT XT. Программа разработана специально для незрячих и неопытных пользователей. Все действия полностью озвучиваются без каких-либо программ экранного доступа. Не требует знания интерфейса Windows. Программа снабжена путеводителем по клавиатуре и поддерживает режим изучения функций клавиш. На этапе начального освоения компьютера Max-Reader может служить своеобразной рабочей средой для незрячего, так как позволяет редактировать тексты, работать с файлами, извлекать музыку с Audio CD и компрессировать ее в mp3.

Подробно ознакомиться с программой Max-Reader и скачать необходимые для работы файлы можно на сайте разработчиков.

2.5 Основные правила и этапы создания сайта

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

Все предугадать невозможно, но на начальном этапе можно придерживаться следующих правил:

- если разрабатывается сайт научного или академического содержания, особое внимание следует обратить на то, как сайт работает в Lynx (или в другом неграфическом браузере);

- если сайт предназначен для потребителей - например, сайт, который предлагает обучающие игрушки для детей, - внимание обращается на скорость загрузки и внешний вид сайта для AOL-браузеров;

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

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

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

Влияние дисплеев на Web-дизайн.

Каким образом множество типов дисплеев и условий просмотра влияет на принятие решений при разработке страницы? Большая часть вашей аудитории различает дисплеи лишь по размерам дисплея (или, если быть более точным, по разрешению) и по цветовым возможностям. Тем не менее важно помнить, что различия на этом не заканчиваются. Некоторые пользователи могут смотреть сайт на экране телевизора. В то же время другие будут просматривать Web на своей ладони, с экрана PDA (Personal Digital Assistant, персональный цифровой секретарь) или сотового телефона. Пользователи с ограничениями по зрению, вероятно, будут слушать, а не смотреть вашу страницу.

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

Минимальное рабочее пространство окна измеряется со всеми возможными видимыми инструментами браузера (такими как кнопки, панели расположения и полосы прокрутки). Максимальное рабочее пространство измеряется при скрытии всех необязательных элементов, это делало окно браузера максимально большим для данного разрешения.

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

Особенности цветов дисплея. Мониторы, если они цветные, различаются по числу воспроизводимых цветов. Это еще один фактор, который влияет на решения разработчика. Мониторы обычно воспроизводят 24-раз-рядные (16,77 млн цветов), 16-разрядные (65 536 цветов) или 8-разрядные (256 цветов).

Цвета, полученные в «истинном», 24-разрядном пространстве цветов будут искажаться (выводиться с пятнами и крапинками) при обработке браузерами на 8-разрядных дисплеях.

Существует, однако, набор из 216 цветов, составленный из цветов системных палитр МасOS и Windows, который не будет искажаться на 8-разрядных дисплеях. Одно из названий этого множества цветов - Web-палитра (Web Palette). Многие дизайнеры предпочитают пользоваться этой палитрой при создании Web-графики и элементов HTML, так чтобы страница выглядела одинаково для всех пользователей.

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

Стандартные размеры и разрешения дисплеев.

Первым шагом при определении вероятного размера вашей Web-страницы должно стать определение максимального пространства, обеспечиваемое дисплеем. Компьютерные дисплеи имеют различные стандартные размеры и обычно измеряются в дюймах. Можно привести некоторые типичные размеры дисплеев - 14», 15», 17», 19» и 21».

Более значимой характеристикой является разрешение дисплея - общее число пикселов (picture's element - элемент картинки) на экране. Чем выше разрешение, тем более детальным может быть изображение. Зная возможное число пикселов, вы можете создавать в соответствии с ним изображения (также измеряемые в пикселах) и элементы страницы.

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

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

Альтернативные дисплеи.

Теперь Web предназначен не только для персональных компьютеров. Web-браузеры уверенно входят в жилые комнаты, портфели и машины в виде WebTV, карманных PDA-устройств и даже сотовых телефонов. С необычно малыми размерами их дисплеев связаны новые заботы дизайнеров.

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

В качестве устройства отображения WebTV использует телевизор. Рабочее пространство WebTV составляет 544x378 пикселов. Браузер позволяет вертикально перелистывать страницы, но не имеет горизонтальной прокрутки, так что более широкая графика будет частично невидима и недоступна. Принципы дизайна, соответствующего стандартам телевидения, заключаются в том, чтобы создавать светлый текст на темном фоне, а не наоборот, а также не использовать элементы шириной менее 2 пикселов.

WebTV публикует рекомендации для дизайнеров на сайте под названием Primetime. Более детальную информацию о требованиях WebTV можно найти на сайте http://www.Webtv.net/primetime.

Карманные устройства. Возросшая популярность Web в совокупности с расширяющимся использованием карманных устройств связи, таких как карманные компьютеры, PDA и сотовые телефоны, привела к тому, что Web-браузеры сжались до невероятно малых размеров. Многие из этих устройств для отображения содержания сайта используют браузеры типа «тонкий» клиент (thin client) - клиент-терминал. Этот вид браузера работает с минимальными требованиями к процессору на стороне клиента, оставляя весь огромный объем работы серверу.

Например, браузер HitchHiker специально разработан для работы на монохромном квадратном дисплее сотового телефона со стороной 2 дюйма. Браузер ProxiWeb являет собой пример другого клиента, который обеспечивает доступ к популярному PDA PalmPilot (а также к IBM WorkPad и новому Palm III). Он работает с использованием прокси-сервера, который обрабатывает Web-страницы, предназначенные для отображения на портативных устройствах. ProxiWeb даже преобразует графику в монохромные битовые карты, так что до некоторой степени сохраняется первоначальный вид страницы (это наиболее полезно для графических заголовков), подробнее -на странице http://www.proxinet.com.

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

2.6 Создание фиксированных и гибких Web-страниц

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

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

Достоинства:

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

- заполнено все пространство дисплея, отсутствует нежелательное свободное место, наличие которого часто планируется разработчиками страниц с фиксированными размерами;

- дизайн гибких страниц по духу и по природе более близок к золотой середине. Согласно таким стандартам, «хорошей» считается страница, которая доступна для большинства пользователей.

Недостатки:

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

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

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

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

Достоинства:

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

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

Недостатки:

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

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

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

2.7 Разработка комбинированных Web-страниц

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

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

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

Macromedia Flash.

Реально ли уместить страничку, содержащую приличное количество анимации, звука и удивительных способов интерактивности в файл порядка 100 Кбайт? Сделать так, чтобы эта страница работала одинаково как в Netscape Navigator, так и в Internet Explorer Internet Explorer? Компания Macromedia решила большинство проблем совместимости и производительности, выпустив Flash, который к сегодняшнему дню весьма эволюционировал и является полноценной частью инструментов-техник Web-дизайна.

Коротко и ясно о том, что это такое. Существуют plug-in'ы (подключаемые модули), которые встраиваются в браузер, и служат для просмотра Flash страниц. Называются они Flash Player. Причем в последних версиях Netscape Navigator и Internet Explorer эти модули уже встроены (если нет, то их можно бесплатно скачать с сайта Macromedia). И существует программа Flash, с помощью которой эти страницы создаются.

В пользу Flash приведу его основные достоинства и статистку использования Macromedia профессиональными разработчиками:

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

- устранение проблем совместимости между браузерами. В отличие от HTML, Flash одинаково работает как в Internet Explorer, так и в Netscape Navigator. Имеется даже специальный вариант примочки-проигрывателя для браузеров, поддерживающих Java (Flash Java Player);

- мощный событийно-управляемый язык. В Macromedia Flash используется специальный язык, при помощи которого можно создавать «интеллект» для своей страницы. Причем если в Flash 4 это был, скорее, некий скрипт (script), имеющий всего несколько основных функций, то в Flash 5 (несмотря на название «ActionScript») - это почти полноценный язык программирования, с поддержкой условий, циклов, массивов, функций и классов, которые можно наследовать;

- Flash имеет автоматическую поддержку anti-aliasing (сглаживание контуров с помощью смешения соседних цветов). В результате даже простая линия или кружочек, нарисованные во Flash, выглядят приятно для глаз. Что же тут говорить о рисунках, нарисованных профессионалами;

- создавать страницы во Flash под силу даже ребенку, и, признаюсь, это весьма приятное занятие. А если обладать элементарными навыками дизайна и рисования, открывается весь простор для Вашей фантазии, предоставляемый Flash.

- Flash потихоньку становится стандартом де-факто. В случаях, где необходима широкая интерактивность, графика, звук, и маленький размер, Flash незаменим.

На сегодняшний день Flash Player используют 222 миллиона человек, и каждый день его скачивает еще 1.4 миллиона. По данным Macromedia это позволяет 90% пользователям Сети просматривать страницы с Flash содержимым.

Подключаемые модули распространяются бесплатно, в то время как за программу создания Flash файлов приходится платить. Последняя, 5-я версия продукта стоит $399. Пользователям старых версий это удовольствие достанется за $149.

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

Здесь делается основной упор на то, что интерфейсы нестандартны. Что имеется в виду, зачем это нужно и к чему это ведет?

«Нестандартные» интерфейсы имеют ряд отличий от «стандартных» (под «стандартными» подразумеваются привычные интерфейсы HTML):

1. Специальные управляющие объекты (кнопки, панели, блоки). Для примера, рулетка в Microsoft Word - нестандартный объект. Ее практически невозможно реализовать в HTML, только картинку, но не интерактивную функциональность.

2. Независимое размещение объектов, другими словами, не размещение объектов относительно друг друга, а расположение по координатам и уровням. В DHTML такая возможность существует, но в DHTML надежно реализовать можно только совсем простые вещи.

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

В результате подобной «нестандартности» появляется полная свобода в создании интерактивного интерфейса, более удобного, более наглядного, более функционального. Это реально повышает уровень предоставляемого сервиса. А значит, достигается «customer satisfaction» (удовлетворение требований клиента), и, в конечном итоге, система становится более конкурентоспособной.

И именно Flash 5 дает возможность делать такие интерфейсы принципиально проще, чем любой другой инструмент, который можно всерьез рассматривать как сколько-нибудь значимую рыночную технологию.

Разработчики, попробовавшие программировать в среде Flash 5, подтвердят мои слова: Flash - уже не просто технология для создания анимационных роликов. Другими словами, Flash стал применим для создания интерактивных приложений.

Когда следует использовать Macromedia Flash. Резонно задаться вопросом: а оно надо? Есть ли смысл использовать Flash 5 там, где он никогда не использовался? Ведь «несть числа» всевозможным языкам программирования, описывающим клиентскую часть. А Flash, к тому же, - один из самых медленных.

Здесь важно понять, что существует два принципиальных условия применения Flash:

1. Надо аккуратно выбирать область применения Flash за пределами анимации.

2. Этим инструментом надо уметь грамотно пользоваться.

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

Чем определяется «грамотность» применения Flash 5? Необходимо определиться, каковы преимущества использования именно Flash в конкретном проекте, и с какими «подводными камнями» придется столкнуться.

Основные плюсы программирования в среде Flash 5 - в процессе разработки:

1. Почти каждая аккуратно запрограммированная функция сразу очевидно полезна во многих местах.

2. Возможно построение универсального сервера.

3. Легко переносится часть логики с серверной на клиентскую часть.

4. Свобода в верстке и в наборе control-элементов (кнопок, меню, списков, таблиц).

Есть, однако, и недостатки, что-то работает не лучшим образом, а потому, если в системе важны определенные компоненты, Flash использовать пока нецелесообразно. Собственно, список тех компонентов, которые на данный момент «не дружат» с Flash:

1. Сложные математические операции на клиентской части.

2. Работа с очень сложными структурами данных на клиентской части.

3. Мелкие тексты, написанные по-русски, из-за проблемы с кодировкой.

4. Сайты со сверхсложной бизнес-логикой, требующие мгновенной загрузки.

5. Механизмы, требующие работы с файловой системой клиента или его устройствами (например, Web-камерой или микрофоном).

Вот, пожалуй, и все трудности. Но! Если в столь ожидаемом многими Flash 6 добавится некоторый набор усовершенствований, эти проблемы станут неактуальны. Это набор довольно простых вещей, которые очевидно не сложно сделать:

1. Кэширование растрированных векторов.

2. Поддержка Unicode.

3. Усовершенствование механизма наследования объектов.

4. Внедрение методов проектной/командной работы.

5. Отладка Performance and Memory-Use на XML, Math/Data Functions.

6. Окончательное разделение программирования и дизайна.

Это не так много, разница между Flash 4 и Flash 5 гораздо больше, чем эти изменения. Конечно, и после этого Flash не надо будет применять везде - он все равно останется для «своей» области.

Производительность, поддержка кодировок - эти вопросы уже скоро будут решены. Инструмент будет более четко разделен, а концепция языка скорректирована. Разумеется, Flash 6 по-прежнему будет поддерживать разработанные на Flash 5 продукты.

Многие описанные проблемы решаются уже сегодня:

1. Проблема с текстом решается подгрузкой шрифта, как внешней библиотеки. Он становится четким и быстрым. Единственное, его надо подгрузить один раз - 30 Кбайт.

2. Проблемы в разработке решаются путем четкого структурирования, как данных, так и графики.

3. Применение объектно-ориентированных подходов в программировании позволяет устранить сложность с псевдо-многопоточностью.

4. Специализированные метки позволяют работать даже с невидимыми символами.

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

Стратегия разработки.

Определив, какие браузеры использует большинство посетителей вашего сайта, вы сможете решить, какие теги HTML и Web-технологии целесообразно использовать в вашей разработке. Точно так же можно определить, какую часть пользователей вы рискуете проигнорировать при использовании таких средств, как Java или JavaScript.

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

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

Разработка для последней версии. Еще одна группа разработчиков придерживается другой крайней точки зрения. Они создают страницы только для самой последней, новейшей версии популярных браузеров. Их не волнует, что страница не будет доступна для пользователей, использующих другие браузеры. Утверждение «посоветуйте им поставить новую версию - это бесплатно» очень часто звучит как оправдание такой тактики. Кроме того, существуют авторы, которые работают только с последней версией одного конкретного браузера. Заметим, что такой подход может быть вполне разумным в рамках сетей интранет.

Разделение различий. Большинство дизайнеров предпочитают идти на компромисс. В дизайнерских кругах распространена фраза о Web-страницах, которые «изящно деградируют» («degrade gracefully»), что означает использование новейших технологий, подобных DHTML или JavaScript, таким образом, чтобы обеспечивать функционирование страницы и на более ранних версиях браузерах.

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

Еще более один подход - автоматический запуск версии, соответствующей типу браузера, который делает запрос. JavaScript может задавать действия в зависимости от используемого браузера. Кроме того, страницы могут быть скомпонованы в процессе работы для конкретного браузера серверными включениями (Server Side Includes).

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

WebSiteGarage http://www.Websitegarage.com;

NetMechanic http ://www .netmechanic.com;

Doctor HTML http://www.imagiware.сom.

Проверка с использованием редакторов HTML. Базы данных совместимости браузеров и средства проверки HTML начинают прокладывать путь к авторскому инструментарию HTML. Так, GoLive Cyberstudio (только для Мас: http://www.golive.com/) предоставляет полную базу всех тегов HTML, а также информацию об их поддержке браузерами. Еще более полезно средство «Check Target Browsers» инструмента Macromedia Dreamweaver. Авторы задают типы браузеров, для которых они разрабатывают сайт (Netscape 2.0, 3.0 и 4.0 и Internet Explorer 2.0, 3.0, 4.0, 5.0), a Dreamweaver проверяет, все ли теги и атрибуты поддерживаются выбранными браузерами.

...