Ахроматическая схема цветов
Хотя они и не присутствуют на цветовом круге, не забывайте о черном и белом цветах, а также множестве серых оттенков, которые могут применяться для выделения или подчеркивания содержимого страницы. Эти ахроматические тона могут создавать большой контраст или незначительное затенение.
| Заголовок | серый 50% | #818181 | 255,117,117 |
| Столбец | серый 25% | #C1C1C1 | 193,193,193 |
| Фон | серый 5% | #F6F6F6 | 246,246,246 |
Цвет текста
Для разнообразия текста можно использовать цвет. Как и в случае с графическими изображениями, выбирайте небольшое количество согласованных цветов и будьте последовательны в их использовании. Читатели обычно рассматривают цвет, как и размер текста, в качестве визуальных указателей с логичным смыслом. Например, обычно шрифт разного размера используют для различения уровней заголовков. Размер шрифта предполагает некоторый тип изменения темы содержимого. Точно так же цвет предполагает некоторое ожидаемое значение. Будьте последовательны в цветовых сигналах, подаваемых читателю.
Одним из способов введения нестандартных шрифтов на странице Web является использование графических изображений отдельных букв, таких, как символ "D" в предыдущем заголовке. Эта техника гарантирует, что шрифт будет выводиться независимо от установленных шрифтов посетителя и внесет на страницу разнообразие. Однако используйте графические буквы с осторожностью, так как они увеличивают время загрузки страницы и увеличивают риск перегрузить страницу трудночитаемыми символами.
Цвета страницы
Цвета привлекают внимание к странице Web. Они создают интерес к элементам страницы и помогают выделить важную информацию. Цвета могут также рассеивать внимание. При неправильном использовании они могут привлекать внимание к себе и отвлекать от основного контента страницы. Одним из наиболее важных выборов, который делает дизайнер страницы, является цветовая схема для дополнения или улучшения представления информации на страницах Web.
Цветовой круг
Цветовой круг является диаграммой, которая показывает, как связаны различные цвета, чтобы облегчить выбор гармоничных цветовых сочетаний, которые привлекают внимание к содержимому страницы. Цветовой круг делится на три категории цветов.
Рис. 12.7. Цветовой круг
Рис. 12.8. Осветление (tint) и затенение (shade) тона (hue)
Первичными цветами являются красный, желтый и синий. Это основные цвета, из которых получают все остальные. Они называются первичными цветами, потому что эти цвета невозможно получить смешением никаких других цветов. Они равномерно распределены по цветовому кругу.
Вторичные цвета получают смешиванием двух первичных цветов. Тремя вторичными цветами являются оранжевый (красный + желтый), зеленый (желтый + синий) и фиолетовый (красный + синий).
Третичные цвета создают смешиванием первичного цвета и смежного вторичного цвета. Шестью третичными цветами являются красно-оранжевый, красно-фиолетовый, желто-зеленый, желто-оранжевый, сине-зеленый и сине-фиолетовый.
Самое чистое значение цвета - это его тон (hue). Осветление цвета (tint) является более светлым значением тона, получаемое добавлением белого цвета; затенение цвета (shade) является более темным значением тона, получаемым добавлением черного цвета.
Доступность
Технологии Web постоянно продвигаются вперед. Каждый день приносит новые устройства и поразительные возможности для путешествий в Сети, открывая горы электронной информации и развлечений все с большей скоростью для тех, кто имеет все необходимое для доступа. Однако многие пользователи Web не обладают возможностью все это использовать в связи с техническими и физическими недостатками и не могут воспринять содержимое в том виде, как это задумано и представлено.
Вопросы доступа к Web относятся к проектированию страницы для пользователей, которые:
- не могут видеть, слышать, двигаться или не могут легко или вообще как-либо обрабатывать некоторые типы информации;
- могут иметь трудности с чтением или пониманием текста;
- не могут использовать клавиатуру или мышь;
- могут использовать экран только с текстовым выводом, маленький экран или медленное соединение с Интернет;
- не могут легко понимать язык, на котором написан документ;
- могут находиться в ситуации, где их глаза, уши или руки заняты либо им что-то мешает (например, за рулем машины, работа в громком окружении, и т.д.);
- могут иметь более раннюю версию браузера, совершенно другой браузер, голосовой браузер или отличающуюся операционную систему.
Разработчики Web должны рассматривать такие ситуации во время проектирования страницы. Конечно, могут быть ситуации, когда нецелесообразно или неразумно ограничивать дизайн по соображениям доступности. Сайт Web, который использует малодоступные технологии, не должен извиняться за отсутствие альтернативных представлений, если отсутствуют возможности продублировать получаемый результат другим образом. Существуют также вопросы стоимости и маркетинга. Может существовать ограничение по ресурсам для создания параллельного сайта для небольшой группы пользователей и конкурентные убытки в связи с задержкой доступного представления до полного завершения.
Тем не менее, поиск альтернативных представлений должен продолжаться. В некоторых случаях существуют технические решения проблем доступности. В других случаях существуют средства кодирования страницы.
Введение 2. ARPANET a. Начало
| 1. Введение 2. ARPANET a. Начало ARPA b. Назначение ARPANET c. Распределенная коммутация пакетов (Леонард Кляйнрок) d. Рост сети ARPA e. TCP/IP 3. NSFNET a. Начало и назначение b. Роль прекращения финансирования c. Определение Интернет 4. WWW a. Концепция гипертекста (Тед Нельсон) b. Начало Всемирной паутины WWW(Тим Бернерс-Ли) c. Разработка браузера 5. Техническая конвергенция a. Протоколы b. Язык форматирования 6. Статистика использования Интернет a. Использование Интернет по странам b. Региональное распределение использования 7. Технологии Интернет a. Скорости соединения b. Версия браузера c. Разрешение экрана d. Глубина цвета |
| Листинг 12.1. Конспект первой главы учебника по XHTML |
| Закрыть окно |
Графическая блок-схема
При разработке структурной компоновки сайта Web начинается также раскладка его содержимого на отдельные страницы Web с указанием между ними ссылок. Обычный способ моделирования содержимого и ссылок между страницами Web называется графической блок-схемой (storyboarding). Эта техника визуально отображает контент Web на страницы Web и описывает ссылки, которые реализуют логические отношения между темами. Графическая блок-схема заставляет конкретизировать темы и уточнять их взаимоотношения.
Иерархическая структура
Иерархическая, или древовидная структура предметов обсуждения является наиболее распространенной организацией страниц Web. Древовидная структура организует темы от более общих к более конкретным - или от краткого изложения к деталям - сверху вниз по иерархии.
Рис. 12.1. Иерархическая организация страниц Web
Верхняя страница в иерархии является обычно "домашней" страницей, предоставляющей обзор сайта, со ссылками на основные тематические подразделения. Каждое из этих подразделений, в свою очередь, соединяется со страницами, содержащими дополнительные подробности по теме. Навигация поэтому направлена обычно вниз по иерархии со ссылками возврата вверх по иерархии, которые проходят по тем же самым направленным вниз маршрутам, только в обратном направлении. Могут существовать редкие перекрестные ссылки между темами на одном уровне дерева, но не часто. Такая структура задает логическую организацию сайта и позволяет посетителям найти информацию рациональным, направленным от общего к частному образом.
История Интернет и его использование
1. Введение 2. ARPANET a. Начало ARPA b. Назначение ARPANET c. Распределенная коммутация пакетов (Леонард Кляйнрок) d. Рост сети ARPA e. TCP/IP 3. NSFNET a. Начало и назначение b. Роль прекращения финансирования c. Определение Интернет 4. WWW a. Концепция гипертекста (Тед Нельсон) b. Начало Всемирной паутины WWW(Тим Бернерс-Ли) c. Разработка браузера 5. Техническая конвергенция a. Протоколы b. Язык форматирования 6. Статистика использования Интернет a. Использование Интернет по странам b. Региональное распределение использования 7. Технологии Интернет a. Скорости соединения b. Версия браузера c. Разрешение экрана d. Глубина цвета
Листинг 12.1. Конспект первой главы учебника по XHTML (html, txt)
Так как страница Web может обладать, кроме текстового, и визуальным содержимым, то некоторые авторы Web используют графические блок-схемы в дополнение к текстовым конспектам для указания содержимого страницы. Такая техника создает эскиз основных характеристик форматирования страницы, а также организует содержимое. Следующая иллюстрация является одним из способов графически охарактеризовать первую часть открывающей страницы сайта.
Рис. 12.5. Блок-схема страницы Web
Хотя здесь это показано в виде графического изображения, блок-схема страницы может быть чертежом от руки или компоновкой страницы на XHTML. Можно использовать редакторы WYSIWYG, такие, как FrontPage или Dreamweaver, для создания компоновок "на скорую руку". Задача не в том, чтобы создать определенное содержимое, но в том, чтобы указать некоторый начальные соображения о дизайне страницы. Можно отметить основные заголовки, которые появятся на странице, всю графику или таблицы, которые необходимо включить, примерную оценку пространства страницы для различных тем и все ссылки на внутренние страницы или внешние сайты.
Необходимо, однако, в этом месте начать укреплять основание, общий дизайн, который будет использоваться на всех страницах, чтобы визуально и операционально связать страницы с помощью общего "вида и функций", которые подходят для принятия решений о проектных решениях, таких, как поля страницы или стили параграфов, цветовые схемы, размеры и цвета заголовков, шрифты и размеры текста, форматы ссылок и другие общие характеристики проекта, которые будут общими на страницах.
Одним из преимуществ применения редакторов HTML в этом месте является то, что можно экспериментировать с различными вариантами дизайна. После определения этих общих вопросов проекта можно также начинать проектировать каскадные таблицы стилей, которые будут применяться к страницам. Используйте внешние таблицы стилей для общего дизайна и форматирования, а встроенные и линейные таблицы стилей - для изменения или улучшения стилей конкретных страниц.
Контурные шрифты
Рис. 12.17. Растровое изображение контура шрифта
Большинство цифровых шрифтов - таких, как Microsoft TrueType и Adobe PostScript, - хранятся как контуры символов с помощью математических описаний символов. Использование этих контурных шрифтов означает, что требуется только один контур для символа, чтобы создать все размеры этого символа; его можно масштабировать до различных размеров и даже перекашивать и вращать, не теряя его характерной формы. Для вывода на экране компьютера или на печатной бумаге, контуры необходимо "заполнить", то есть создать растровое изображение из пиксельных точек. Программа создания растрового изображения выполняет эту функцию, как показано на сопровождающей иллюстрации.
Линейная структура
Линейная, или последовательная структура страниц Web в наибольшей степени подходит там, где тематическая информация должна быть доступна в определенном порядке.
Рис. 12.2. Линейная организация страниц Web
Для представления истории, последовательности событий во времени или шагов процесса линейная последовательность страниц Web работает, вероятно, лучше всего. Ссылки идут с одной страницы на следующую со ссылками возврата, повторяющими эту последовательность. Если необходимо, то можно сделать дополнительные ссылки между начальной страницей и страницей с деталями для перехода в произвольное место последовательности и возврата. Тем не менее, основная структура остается линейной.
Мифология дизайна
Можно встретить руководства по проектированию страниц, которые рекомендуют использовать страницы без прокрутки во всех случаях - все страницы должны умещаться в окне браузера даже без вертикальной прокрутки. Такая рекомендация не только создает для дизайнера трудности с поиском физических разрывов страницы там, где они могут логически не существовать, но создает избыточное количество переходов по ссылкам, что может разорвать поток мысли читателя. Лучше никогда не позволять физическим контейнерам определять структуру их содержимого. С помощью здравого смысла всегда можно определить наилучшее распределение информации.
Монохроматическая схема цветов
Рис. 12.9. Монохроматические цвета
Монохроматическая схема цветов использует один цветовой тон с различными значениями осветления и затенения для контраста. Обычно выбирают более темные цвета для представления текста и более светлые цвета для фона. Различные осветления и затенения могут принимать значения от сильных до едва заметных, и необходимо выбрать комбинацию, хорошо подходящую для сообщения, которые вы собираетесь донести, и настроения, которое пытаетесь создать.
| Заголовок | красный (темный) | #CC6666 | 204,102,102 |
| Столбец | красный (светлый) | #FAC8C8 | 250,200,200 |
| Фон | красный (светлый) | #F6E1E1 | 246,225,225 |
Организация страницы
Надо понимать, что первое впечатление на читателя создается тем, что он видит вверху страницы, когда она впервые загружается. На языке газетчиков это область страницы "над первой полосой", которая дает первые указания на содержание страницы. Это наиболее важное пространство на странице, когда речь идет об обслуживании потребностей посетителей.
Посетители приходят на страницу Web в поисках информации. Начальное содержание страницы должно либо предоставить эту информацию, либо быстро направить к ней посетителей. Типичный дизайн верхней части каждой страницы включает:
- общую идентификацию - баннер, логотип и/или заголовки - чтобы связать страницу визуально с другими страницами сайта;
- наиболее важную информацию на странице или сводку, возможно, со ссылками вниз на разделы страницы с подробной информацией;
- общее меню ссылок на другие важные разделы сайта;
- меню ссылок, имеющих отношение к контенту страницы.
Читатели должны с первого взгляда понимать, содержит ли эта страница информацию, которую они ищут. Если это так, то они могут спуститься вниз, чтобы ее найти; если нет, они могут сразу перейти к другим страницам.
Рабочие чертежи
Не нужно уделять большого внимания формату и символам, используемым на высокоуровневой блок-схеме на рисунке 12.4. Не существует формальных графических стандартов для блок-схем. Можно, фактически, нарисовать компоновку карандашом на листе бумаги и также прекрасно выполнить свою задачу. Иногда профессиональные разработчики становятся слишком преданными использованию формальных графических инструментов для выполнения рабочих чертежей и теряют из виду свою цель, которая состоит в создании мысленных или абстрактных моделей проекта, позволяющих с ними работать. Задача не в том, чтобы создать красивые чертежи. Выберите те символы и методы, которые лучше всего вам подходят. Конечно, если вы профессионально работаете как дизайнер сайтов, могут существовать внутренние стандарты оформления рабочих чертежей. Однако всегда можно воспроизвести свои концептуальные чертежи как конструкторскую документацию, когда в этом возникнет необходимость.
Имея структурную компоновку, можно переходить к следующему этапу разработки контента, который появится на каждой странице. Одним из способов для этого является создание текстового конспекта тем, подтем и "обсуждаемых вопросов", так же, как это делается для письменного отчета. Например, первую страницу учебника по XHTML можно было бы представить в следующем виде.
Распределение содержимого по страницам
Рассмотрим следующую иллюстрацию части структуры сайта Web, посвященного учебнику по XHTML. Эта диаграмма представляет компоновку первого раздела учебника с темами, определенными вместе с меню ссылок на соответствующие страницы.
Рис. 12.4. Структура части учебника по XHTML
Так как страницы выводятся во фреймах, то обратные ссылки не требуются. Меню всегда доступно для прямого соединения с любой страницей. Хотя дополнительные линейные ссылки между страницами могут существовать, эти дополнительные ссылки будут избыточными.
Размер шрифта
Легкость чтения зависит от размера шрифтов. Шрифт обычно измеряют в пунктах, который равен 1/72 дюйма (на бумаге). Однако компьютерные экраны используют пиксели, а не пункты, поэтому программы визуализации должны преобразовывать размеры в пунктах в пиксели, принимая в расчет разрешение экрана. По двум строкам ниже можно видеть, что шрифт размером 12 пунктов соответствует примерно 16-пиксельному размеру шрифта на экране.
Рис. 12.20. Размеры шрифта в пунктах и пикселях
Размер шрифта в 10 или 12 пунктов удобен для чтения большинству людей. Если требуются меньшие размеры, то выбирайте шрифты с большим расстоянием между символами и большим значением высоты строчных символов. Следующие две строки выводятся шрифтами Arial и Verdana размером 8 пунктов. Вторая строчка не такая плотная и поэтому более разборчива.
Рис. 12.21. Сравнение типов и размеров шрифтов
В связи с этим шрифт Verdana становится популярным шрифтом Web, так как он создан для точного отображения позиции в пикселях на экране. Также шрифты sans-serif , такие, как Arial или Verdana, легче читать на экране, в то время как шрифты serif , например, Times New Roman, легче читать на бумаге.
Размер строки
Удобство чтения зависит также от высоты и длины строки. Обычно используемый по умолчанию интервал в браузере создает удобное расстояние между строками. Длина строки примерно в 60-80 символов позволяет хорошо прослеживать глазами от конца одной строки до начала следующей. Следующие строки содержат примерно по 75 символов шрифтом Verdana c размером 9 пунктов.
Рис. 12.22. Типичный размер шрифта, длина строки и межстрочный интервал
Размеры страниц
Один из основных вопросов дизайна связан с подходящим размером страницы Web. Ширина страницы должна принимать в расчет ширину окна браузера, которая, в свою очередь, определяется разрешением экрана пользователя. Тремя распространенными вертикальными и горизонтальными разрешениями экрана являются 640 x 480, 800 x 600, и 1024 x 768 пикселей.
В настоящее время наиболее распространенным разрешением экрана является 800 x 600 пикселей. Если нет причин сделать по-другому - зная, например, что популяция предполагаемых посетителей использует другое разрешение, - то имеет смысл ориентировать страницы на экран с этим разрешением.
Окно браузера, однако, содержит границы, панели меню, строки состояния, полосы прокрутки и другие элементы, которые сокращают площадь пространства, в пределах которого выводится страница Web. Следующая таблица задает эффективные размеры окна вывода браузера для различных разрешений экрана.
| 640 x 480 | 600 x 300 |
| 800 x 600 | 760 x 420 |
| 1024 x 768 | 955 x 600 |
Рекомендации W3C по доступности
Консорциум WWW (W3C) создает множество Рекомендаций по доступности содержимого Web (http://www.w3.org/TR/WCAG10/"), как сделать содержимое Web доступным для людей с физическими недостатками. Следуя этим рекомендациям, разработчики содержимого могут создавать страницы, которые будут доступны несмотря на ограничения из-за физических, сенсорных и когнитивных недостатков. Некоторые общие рекомендации по созданию таких страниц включают следующее.
- Разделяйте структуру и представление. Помните, что информационное содержание страницы Web отличается и обычно отделено от ее визуального оформления.
- Предоставляйте текстовые альтернативы для аудио- и видеоконтента. Текст можно выводить таким образом, что он будет доступен почти всем устройствам просмотра Web и почти всем пользователям.
- Создавайте документы, которые не полагаются на оборудование одного типа. Страницы должны быть доступны людям без мыши, с маленькими экранами, с экранами низкого разрешения, с черно-белыми экранами, без экранов и только с голосовым или текстовым выводом.
W3C предоставляет четырнадцать рекомендаций с тремя уровнями приоритета в соответствии с их влиянием на доступность. Некоторые из этих рекомендаций относятся к технологиям или методикам, которые не рассматриваются в этом учебнике.
Рекомендации приоритета 1 должны быть удовлетворены; иначе одна или несколько групп пользователей не смогут получить доступ к информации документа.
Рекомендации приоритета 2 желательно удовлетворить; иначе одна или несколько групп пользователей будут испытывать трудности при доступе к информации документа.
Рекомендации приоритета 3 могут быть удовлетворены; иначе одна или несколько групп пользователей будут испытывать неудобство при доступе к информации документа.
Следующее обсуждение суммирует эти рекомендации. Все подробности можно найти на сайте доступности консорциума W3C.
Рекомендация 1. Предоставляйте эквивалентные возможности для слухового и визуального контента
Эта рекомендация подчеркивает важность предоставления текстовых эквивалентов для нетекстового содержимого (изображений, предварительно записанного аудио, видео). Достоинство текстовых эквивалентов состоит в том, что они могут выводиться различными способами, которые доступны людям с различными недостатками, использующими различные технологии. Текст можно легко выводить через синтезатор речи и устройства отображения шрифта Брайля, символы могут быть представлены визуально различным размером на экране компьютера и бумаге.
Существующие практики кодирования:
- Предоставляйте текстовые эквиваленты для каждого нетекстового элемента. Например, используйте текст alt для тега <img>quot;. Для сложного содержимого, где текст alt не предоставляет полного текстового эквивалента, предоставьте ссылку на текстовое описание. Для карт ссылок применяйте атрибут alt с тегами <area>. [Приоритет 1]
- Пока агенты пользователя не смогут автоматически читать вслух текстовый эквивалент визуального трека, предоставляйте акустическое описание важной информации визуального трека мультимедийного представления. [Приоритет 1]
- Для любого представления мультимедиа с разверткой во времени (например, фильм или анимация) синхронизируйте вместе с представлением эквивалентные альтернативы (например, заголовки или акустические описания визуального трека). [Приоритет 1]
- Пока агенты пользователя не станут изображать текстовые эквиваленты для карт ссылок, предоставляйте избыточные текстовые ссылки для каждой активной области клиентской карты ссылок. [Приоритет 3]
Рекомендация 2. Не полагайтесь только на цвет
Проверьте, что текст и графика понятны при просмотре без цвета. Если используется только цвет для передачи информации, то люди, не различающие определенные цвета, и пользователи с устройствами, которые не имеют цветных или визуальных дисплеев, не получат эту информацию. Когда цвета фона и переднего плана слишком близки к одному оттенку, они могут не обеспечивать достаточной контрастности при просмотре на монохромных дисплеях или для людей с различными недостатками восприятия цвета.
Существующие практики кодирования:
- Проверьте, что вся информация, передаваемая с помощью цвета, доступна также без цвета, например, из текстового контекста или разметки. [Приоритет 1]
- Проверьте, что комбинация цветов фона и переднего плана создает достаточный контраст при просмотре для человека с недостатком восприятия цвета или при просмотре на черно-белом экране. [Приоритет 2]
Рекомендация 3. Правильно используйте разметку и таблицы стилей
При разметке документов правильно и должным образом используйте элементы XHTML - как средство структуризации информации, а не как способ оформления. Управляйте представлением с помощью таблиц стилей, а не с помощью атрибутов. Ненадлежащее использование разметки ограничивает доступность.
Существующие практики кодирования:
- Когда имеется подходящий элемент языка разметки, используйте для передачи информации разметку, а не изображение. Избегайте использования изображений для представления текста - используйте вместо этого текст и таблицы стилей. [Приоритет 2]
- Создавайте документы, которые соответствуют опубликованным стандартам XHTML. [Приоритет 2]
- Используйте таблицы стилей, а не исключенные атрибуты для управления компоновкой и представлением. [Приоритет 2]
- Используйте относительные единицы измерения (проценты), а не абсолютные единицы (пиксели) в значениях атрибутов разметки и значениях свойств таблицы стилей. [Приоритет 2]
- Используйте элементы заголовков для передачи структуры документа, а не для эффектов оформления. Например, используйте H2, чтобы указать на подраздел H1, а не в связи с различием размеров применяемых шрифтов. [Приоритет 2]
- Правильно вкладывайте друг в друга элементы списка OL, UL и DL. [Приоритет 2]
Рекомендация 4. Уточняйте использование естественного языка
Используйте разметку, которая облегчает произношение или интерпретацию сокращенного или иностранного текста. Когда разработчики контента кодируют в документе естественный язык, синтезаторы речи и устройства с азбукой Брайля могут автоматически переключаться на новый язык, делая документ более доступным для многоязычных пользователей. Разметка естественного языка позволяет также процессорам поиска находить ключевые слова и идентифицировать документы на требуемом языке.
Существующие практики кодирования:
- Четко определяйте изменения естественного языка текста документа и заголовков. Например, используйте "xml:lang" в прологах страницы. [Приоритет 1]
- Определяйте расширение каждого сокращения или акронима в документе, где он впервые появляется. [Приоритет 3]
Рекомендация 5. Создавайте таблицы, которые аккуратно трансформируются
Проверьте, что таблицы имеют необходимую разметку, чтобы трансформироваться браузерами доступа и другими агентами пользователей. Таблицы должны использоваться для разметки действительно табличной информации ("таблицы данных") и не должны, по возможности, применяться при компоновке страниц ("таблицы компоновки"). Таблицы любого применения представляют особые проблемы для пользователей считывателей экрана.
Существующие практики кодирования:
- Для таблиц данных определяйте заголовки строк и столбцов. Используйте <td> для идентификации ячеек данных и <th> для идентификации заголовков. [Приоритет 1]
- Для таблиц данных, которые имеют два или больше логических уровней заголовков строк или столбцов, применяйте разметку для соединения ячеек данных и ячеек заголовков. Используйте <thead>, <tbody>, и <tfoot> для объединения в группы строк и <col/> и <colgroup> для объединения в группы столбцов. [Приоритет 1]
- Не используйте таблицы для компоновки, если только таблица не теряет смысл, когда представлена в линейном виде (вдоль строк и вниз по столбцам). Иначе создайте альтернативное представление. [Приоритет 2]
- Если таблица используется для компоновки, не применяйте никакой структурной разметки для целей визуального форматирования - не используйте элемент <th> для вывода содержимого ячейки (не табличного заголовка) выровненным по центру и полужирным шрифтом. [Приоритет 2]
- Создавайте текстовые сводки для таблиц, где это имеет смысл. [Приоритет 3]
Рекомендация 6. Проверьте, что страницы, использующие новые технологии, трансформируются аккуратно
Проверьте, что страницы доступны, даже когда более новые технологии не поддерживаются или отключены. Хотя разработчиков контента поддерживают в использовании новых технологий, они должны знать, как сделать свои страницы работающими со старыми браузерами и для людей, которые решили отключить такие свойства.
Существующие практики кодирования:
- Организуйте документы таким образом, чтобы они могли читаться без таблиц стилей. Например, когда документ HTML изображается без связанных таблиц стилей, все равно должна быть возможность прочитать этот документ. [Приоритет 1]
- Проверяйте, что эквиваленты динамического содержимого обновляются при изменении динамического содержимого. [Приоритет 1]
- Проверяйте, что страницы можно использовать, когда сценарии, апплеты или другие программные объекты отключены или не поддерживаются. Если это невозможно, предоставьте эквивалентную информацию на альтернативной доступной странице. [Приоритет 1]
- Проверяйте, что динамическое содержание доступно или предоставляет альтернативное представление или страницу. [Приоритет 2]
Рекомендация 7. Обеспечьте пользователю возможность управления изменяющимся во времени контентом
Проверьте, что движущиеся, мигающие, прокручивающиеся или автоматически обновляемые объекты или страницы могут быть приостановлены или остановлены вообще. Некоторые люди с когнитивными или визуальными недостатками не могут быстро или вообще читать движущийся текст. Движение может вызывать такое отвлекающее влияние, что остальная страница становится нечитаемой для людей с когнитивными недостатками. Считыватели экрана не могут читать движущийся текст. Люди с физическими недостатками могут оказаться неспособными двигаться достаточно быстро или аккуратно для взаимодействия с движущимися объектами.
Существующие практики кодирования:
- Пока агенты пользователя не позволят управлять мерцанием, избегайте использования мерцания экрана. [Приоритет 1]
- Пока агенты пользователя не позволят управлять миганием, избегайте использования мерцания содержимого. [Приоритет 2]
- Пока агенты пользователя не позволят останавливать движущееся содержание, избегайте на страницах движения. [Приоритет 2]
- Пока агенты пользователя не предоставят возможность останавливать обновление, не создавайте автоматически обновляемые страницы. [Приоритет 2]
- Пока агенты пользователя не предоставят возможность останавливать автоматическое перенаправление, не используйте разметку для автоматического перенаправления страниц. [Приоритет 2]
Рекомендация 8. Обеспечьте прямую доступность встроенных интерфейсов пользователя
Проверьте, что интерфейс пользователя следует принципам проектирования доступности: независимый от устройств доступ к функциям, работа с клавиатуры, самоозвучивание и т.д. Когда встроенный объект имеет свой "собственный интерфейс", то этот интерфейс - как и интерфейс самого браузера - должен быть доступен. Если интерфейс встроенного объекта нельзя сделать доступным, должно быть предоставлено альтернативное решение доступности.
Существующие практики кодирования:
- Делайте программные элементы, такие, как сценарии, непосредственно доступными или совместимыми со вспомогательными технологиями [Приоритет 1, если функции важны и не представлены другим образом, иначе Приоритет 2.]
Рекомендация 9. Проектируйте независимость от устройств
Используйте свойства, которые позволяют активировать элементы страницы с помощью различных устройств ввода. Не зависимый от устройств доступ означает, что пользователь может взаимодействовать с агентом пользователя или документом с помощью предпочтительного устройства ввода (или вывода) - мыши, клавиатуры, голоса или чего-то еще.
Существующие практики кодирования:
- Создавайте карты ссылок на стороне клиента вместо карт ссылок на сервере, за исключением случаев, когда области невозможно определить с помощью доступной геометрической формы. [Приоритет 1]
- Проверьте, что любой элемент, который имеет свой собственный интерфейс, может действовать независимым от устройства образом. [Приоритет 1]
- Для сценариев определяйте логические обработчики событий вместо зависимых от устройств обработчиков событий. [Приоритет 2]
- Создавайте логическую последовательность обхода с помощью ссылок, элементов управления формы и объектов. [Приоритет 3]
- Предоставьте клавиатурные комбинации вызова для важных ссылок, элементов управления формы и групп элементов управления формы. [Приоритет 3]
Рекомендация 10. Используйте промежуточные решения
Используйте промежуточные решения доступности, так, чтобы вспомогательные технологии и более старые браузеры действовали правильно. Например, изменение текущего окна или раскрытие новых окон может быть крайне дезориентирующим для пользователей, которые не могут видеть, что это произошло.
Примечание. Применяйте следующие контрольные пункты, пока агенты пользователей (включая вспомогательные технологии) не решат эти вопросы. Эти контрольные пункты классифицируются как "промежуточные", отмечая тем самым, что Рабочая группа по рекомендациям контента Web (Web Content Guidelines Working Group) считает их действительными и необходимыми для доступности Web во время публикации этого документа. Однако Рабочая группа не ожидает, что эти контрольные точки понадобятся в будущем, когда технологии Web реализуют ожидаемые свойства или возможности.
Существующие практики кодирования:
- Пока агенты пользователя не позволяют отключать порождаемые окна, не позволяйте появляться всплывающим и другим окнам и не изменяйте текущее окно, не информируя об этом пользователя. [Приоритет 2]
- Пока агенты пользователя не поддерживают явные связи между метками и элементами управления формы, для всех элементов управления формы с неявно связанными метками реализуйте правильное позиционирование метки непосредственно перед ее элементом управления на той же строке. [Приоритет 2]
- Пока агенты пользователя (включая вспомогательные технологии) не выводят правильно примыкающий друг к другу текст, создавайте линейную текстовую альтернативу (на текущей странице или на другой) для всех таблиц, которые выводят текст в параллельных столбцах с переносом строк. [Приоритет 3]
- Если агенты пользователя обрабатывают пустые элементы управления правильно, включайте используемые по умолчанию символы заполнители в текстовых полях и областях. [Приоритет 3]
- Если агенты пользователя (включая вспомогательные технологии) выводят смежные ссылки раздельно, включайте не являющиеся ссылками печатные символы (окруженные пробелами) между смежными ссылками. [Приоритет 3]
Рекомендация 11. Используйте технологии и рекомендации W3C
Используйте технологии W3C и следуйте рекомендациям по доступности. Где невозможно использовать технологию W3C или где ее использование создает материал, который преобразуется неаккуратно, создавайте альтернативную версию содержимого, которая будет доступна.
Существующие практики кодирования:
- Используйте технологии W3C, когда они доступны и подходят для задачи, и выбирайте самые последние версии, которые поддерживаются. [Приоритет 2]
- Избегайте дублирующих средств технологий W3C . [Приоритет 2]
- Предоставляйте информацию, чтобы пользователи могли получать документы в соответствии со своими предпочтениями (например, язык, тип контента, и т.д.) [Приоритет 3]
- Если, применив все возможности, невозможно создать доступную страницу, предоставьте ссылку на альтернативную страницу, которая использует технологии W3C, является доступной, содержит эквивалентную информацию (или функции) и обновляется так же часто, как и недоступная (исходная) страница [Приоритет 1]
Рекомендация 12. Предоставляйте контекстную и ориентировочную информацию
Предоставляйте контекстную и ориентировочную информацию, чтобы помочь пользователям понять сложные страницы или элементы. Объединение элементов и предоставление контекстной информации об отношениях между элементами может быть полезно для всех пользователей. Сложные отношения между частями страницы могут быть трудны для интерпретации людям с когнитивными недостатками и людям с недостатками зрения.
Существующие практики кодирования:
- Давайте заголовок каждому фрейму для облегчения идентификации фреймов и навигации. [Приоритет 1]
- Описывайте назначение фреймов и связи фреймов друг с другом, если это не очевидно из их заголовков. [Приоритет 2]
- Делите большие блоки информации на более контролируемые группы, где это будет уместно и естественно. [Приоритет 2]
- Явно связывайте метки с их элементами управления. [Приоритет 2]
Рекомендация 13. Предоставляйте четкие механизмы навигации
Предоставляйте четкие и согласованные механизмы навигации - ориентировочную информацию, навигационные панели, карты сайта и т.д. - для увеличения вероятности, что посетитель найдет на сайте то, что ищет. Четкие и согласованные механизмы навигации важны для людей с когнитивными недостатками или слепотой и помогут всем пользователям.
Существующие практики кодирования:
- Четко определяйте объект каждой ссылки. Текст ссылки должен быть достаточно содержателен, чтобы он имел смысл при чтении из контекста -- либо из собственного, или как части последовательности ссылок. Текст ссылки должен также быть кратким. [Приоритет 2]
- Используйте метаданные для добавления на страницы и сайты семантической информации. Например, укажите автора документа, тип контента и т.д. [Приоритет 2]
- Предоставляйте информацию об общей компоновке сайта (например, карту сайта или оглавление). [Приоритет 2]
- Используйте механизмы навигации согласованным образом. [Приоритет 2]
- Предоставляйте навигационные панели для выделения и предоставления доступа к навигационному механизму. [Приоритет 3]
- Объединяйте в группы связанные ссылки, идентифицируйте группу (для агентов пользователя), и, если агенты пользователя позволяют, предоставляйте способ обойти группу. [Приоритет 3]
- Если предоставляются функции поиска, включите различные типы поиска для различных уровней подготовки и предпочтений. [Приоритет 3]
- Помещайте различимую информацию в начале заголовков, параграфов, списков и т.д. [Приоритет 3]
- Предоставляйте информацию о совокупностях документов (например, документах, содержащих несколько страниц.) Другим способом создания совокупности является создание упакованного архива нескольких страниц. [Приоритет 3]
- Предоставляйте средства для пропуска многострочных изображений из символов ASCII. [Приоритет 3]
Рекомендация 14. Создавайте документы четкими и простыми
Создавайте документы четкими и простыми, чтобы их было легче понимать. Согласованная компоновка страницы, узнаваемая графика и легко понятный язык будут полезны всем пользователям. Это помогает людям с когнитивными недостатками или имеющим трудности с чтением. Проверьте, что изображения имеют текстовые эквиваленты для людей слепых, имеющих слабое зрение или для всех пользователей, которые не могут или решили не выводить графику.
Существующие практики кодирования:
- Используйте самый четкий и простой язык, подходящий для содержимого сайта. [Приоритет 1]
- Дополняйте текст графическим и звуковым представлением, которое облегчает понимание страницы. [Приоритет 3]
- Создавайте стиль представления, который согласован между страницами. [Приоритет 3]
В этом учебнике невозможно дать примеры всех упомянутых выше методов кодирования, помогающих повысить доступность страницы Web. Однако исчерпывающее множество примеров кода XHTML имеется на сайте Web консорциума W3C, посвященном методам реализации рекомендаций по доступности контента Web (http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/).
Существует ряд сайтов Web, содержащих программное обеспечение для тестирования страниц на соответствие рекомендациям по доступности. Например, bobby.watchfire.com позволяет ввести адрес URL страницы и получить отчет о ее совместимости с рекомендациями W3C и другими.
Семейства шрифтов
Важно помнить, что страница Web может выводить только те шрифты, которые установлены на ПК пользователя. Поэтому необходимо избегать нестандартных шрифтов. Базовые шрифты, которые установлены на компьютерах Windows, вместе с дополнительными шрифтами, установленными в Windows XP и Office, которые могут выводиться в браузере, показаны в следующей таблице.
увеличить изображение
Рис. 12.18. Типичные базовые шрифты, установленные на настольных компьютерах
Конечно, большинство пользователей имеет другое программное обеспечение, установленное в своих системах, которое поставляется с дополнительными шрифтами для поддержки этих приложений. Эти шрифты могут быть доступны или нет для вывода в браузере.
Шрифты можно классифицировать как имеющие "засечки" (serif) и не имеющие таких засечек (sans-serif). "Засечки" (serif) являются небольшими "штрихами" на элементах символов. Это различие можно видеть в показанных ниже шрифтах Times New Roman (serif) и Arial (sans-serif).
Рис. 12.19. Типы шрифтов serif и sans-serif
Обычно один шрифт serif для текста и один sans-serif для заголовков (или наоборот) являются хорошей комбинацией. Страница должна содержать не более двух различных типов шрифта или четырех различных вариаций, таких, как размер шрифта и начертание bold или italic.
Схема аналогичных цветов
Рис. 12.10. Аналогичные цвета
Схема аналогичных цветов использует смежные тона и их осветления и затенения. Все цвета имеют общий тон, например, красно-фиолетовый, красный и красно-оранжевый. Представление и ощущение аналогично монохроматической схеме с более широким ассортиментом оттенков для выбора.
| Заголовок | красно-фиолетовый (темный) | #C4028F | 196,2,143 |
| Столбец | красно-оранжевый (светлый) | #FEB7B3 | 254,183,179 |
| Фон | красный (светлый) | #FFCCCC | 255,204,204 |
Схема дополнительных цветов
Рис. 12.11. Дополнительные цвета
Схема дополнительных цветов применяет тон с противоположной стороны цветового круга относительно доминирующего цвета. Такая комбинация цветов создает наибольший контраст и делает оба цвета более интенсивными и яркими, чем при использовании по одиночке.
| Заголовок | красный (темный) | #C4028F | 196,2,143 |
| Столбец | зеленый (темный) | #02D0BF | 2,208,191 |
| Фон | зеленый (светлый) | #D0F2E0 | 208,242,224 |
Схема раздельно-дополнительных цветов
Схема раздельно-дополнительных цветов использует тон вместе с двумя цветами, которые являются смежными для его дополнительного цвета. Например, если доминирующим цветом является красный, то раздельно-дополнительными тонами будут желто-зеленый и сине-зеленый.
Рис. 12.12. Раздельно-дополнительные цвета
| Заголовок | красный (светлый) | #C4028F | 196,2,143 |
| Столбец | сине-зеленый (темный) | #02D0BF | 2,208,191 |
| Фон | желто-зеленый (светлый) | #D0F2E0 | 208,242,224 |
Шрифтовое оформление
Обычно страницы Web предназначены для чтения, а не для просмотра. Это означает, что необходимо создать оформление текста, соответствующее другим проектным решениям, которое сделает страницы Web более разборчивыми и легкочитаемыми. Шрифтовое оформление является взаиморасположением элементов алфавитных символов на странице, играющее двойственную роль в визуальном дизайне страницы и в улучшении ее читаемости.
Термин "шрифт" стал всеобъемлющим термином для обозначения используемых на странице характеристик текста. Более точно, термин "гарнитура шрифта" относится к единому согласованному визуальному дизайну символов алфавита; семейство шрифтов является связанным множеством гарнитур, включая их начертания bold, italic и другие типографские варианты. Следующая иллюстрация показывает часть общей терминологии, используемой при описании оформления текста.
Рис. 12.16. Типографская терминология
Смешанная структура
Скорее всего, сайт Web не является исключительно иерархическим или линейным, хотя одна из структур может доминировать. Обычно встречается общая иерархическая структура с линейными последовательностями страниц на уровне детализации.
Рис. 12.3. Смешанная организация страниц Web
Приведенные выше организационные структуры не подразумевают, что содержание Web должно быть организовано только таким образом. Они представлены только как концептуальные схемы; необходимо определить лучшую структурную организацию совокупности страниц, представляя содержимое некоторым организованным образом. Однако, помня об этих структурах, надо подумать о структурной организации самой информации и создать совместимую структуру связей для представления ее наиболее четким и логически организованным образом.
Содержимое сайта Web
Определение предназначения сайта Web помогает также определить тип контента для представления и его организацию. Процесс структуризации содержимого сайта Web в чем-то похож на процесс проектирования базы данных. Можно, фактически, считать сайт Web базой данных информации, в составе которой - страницы контента, организованные их отношениями связей. На языке базы данных задача состоит в создании моделей "сущность-отношение" представляемой информации; на языке разработки Web задача состоит в создании моделей информации "содержимое-связь".
Хорошая формулировка назначения сайта Web поможет определить элементы контента, подходящие для сайта. Таким же образом, как создатели баз данных определяют основные сущности - объекты информационного интереса - которые будут включены в базу данных, необходимо определить основные объекты информационного интереса сайта Web.
Например, для персонального сайта по выполнению заданий, связанных с курсом изучения приложений Web, основными объектами интереса могут быть
конспекты учебников;конспекты лекций;решения заданий;проекты;оценки;календарь.
Хотя можно придумать и другие информационные объекты, связанные с обучением, этот список представляет хорошую начальную точку для разбиения сформулированной цели сайта на эти области содержимого, связанные с его целью, - и только эти области связаны с его целью.
В данный момент не требуется знать все информационные детали о сайте. Важно только определить основные темы, вокруг которых будет развиваться сайт. Аналогично подготовке отчета, необходимо создать общий план, чтобы определить основные заголовки, которые будут расширены в дальнейшем в параграфы, предложения и слова.
Структура сайта
В любом случае, будут ли страницы Web разрабатываться для персонального использования или создается коммерческое предприятие в Web, наступает момент, когда необходимо задуматься о проектировании сайта Web. Необходимо внести организацию и логику в быстро разрастающееся множество страниц. Проектирование сайтов не является точной наукой; тем не менее, существуют принципы организации и стратегии проектирования, которые могут помочь создать более управляемый сайт, облегчающий посетителям перемещение по своим страницам в поисках требуемой информации или предлагающий свои услуги.
Структура сайта Web
Темы, или информационные сущности, которые составляют сайт Web, логически связаны некоторым образом. По крайней мере, они должны быть связаны, так как они проистекают из общей цели. В дальнейшем эти темы, в конечном счете, необходимо физически организовать как страницы Web со связями между ними, и также физическая организация страниц и ссылок должна отражать их логические отношения.
Существует три основных способа организации тем и соответствующих страниц Web - иерархическая, линейная и смешанная. Любая из этих структур или их комбинация может использоваться для того, чтобы сделать содержимое доступным в Web.
Свободное пространство
Частой ошибкой авторов страниц является размещение слишком большого количества материала с крошечными полями. Будет скучно и утомительно читать текст строку за строкой от границы до границы без перерыва. Оставляйте для полей достаточно свободного пространства и создавайте достаточное количество заголовков и визуальных образов, чтобы разорвать монотонность страницы.
Согласно федеральному закону агентства США,
Согласно федеральному закону агентства США, авторы должны создавать свои сайты доступными для людей с недостатками зрения и слуха, с ограниченной подвижностью и с другими физическими недостатками. Раздел 508, дополнение к Акту о реабилитации 1973 г., требует, чтобы людям с физическими недостатками был предоставлен доступ к имеющейся в Web правительственной информации, сравнимый с доступом для других пользователей; Акт также распространяется на организации, которые получают финансирование федерального правительства.
В стандартах Раздела 508 существует шестнадцать общих правил доступных страниц Web. Вкратце этими правилами доступных страниц Web являются:
Текстовые теги. Для каждого нетекстового элемента должен предоставляться текстовый эквивалент.
Мультимедийные представления. Для любого мультимедийного представления эквивалентные альтернативы должны синхронизироваться с представлением.
Цвет. Страницы Web должны создаваться таким образом, чтобы вся передаваемая цветом информация была доступна без цвета, например, из контекста или разметки.
Удобство чтения. Документы должны быть организованы таким образом, чтобы их можно было читать, не требуя связанной таблицы стилей.
Серверные карты ссылок. Должны предоставляться избыточные текстовые ссылки для каждой активной области серверной карты ссылок.
Карты ссылок на стороне клиента. Должны предоставляться карты ссылок на стороне клиента вместо серверных карт ссылок, за исключением областей, которые невозможно определить с помощью доступной геометрической формы.
Таблицы данных 1. Для таблиц данных должны быть определены заголовки строк и столбцов.
Таблицы данных 2. Для таблиц данных, которые имеют два или несколько логических уровней заголовков строк или столбцов, должна использоваться разметка для соединения ячеек данных и ячеек заголовков.
Фреймы. Фреймы должны иметь текстовые заголовки, которые облегчают идентификацию фреймов и навигацию.
Частота мерцания. Страницы должны проектироваться таким образом, чтобы избежать мерцания экрана с частотой больше 2 гц и меньше 55 гц.
Только текстовые альтернативы. Должна быть предоставлена только текстовая страница с эквивалентной информацией или функциями, чтобы сайт Web соответствовал требованиям этого Раздела, когда совместимость невозможно обеспечить другим образом. Содержимое только текстовой страницы должно обновляться всякий раз при изменении основной страницы.
Сценарии. Когда страницы используют языки сценариев для вывода содержимого, или для создания элементов интерфейса, предоставляемая сценарием информация должна определяться с помощью функционального текста, который можно прочитать с помощью вспомогательной технологии.
Апплеты и подключаемые модули. Когда страница Web требует, чтобы апплет, подключаемый модуль или другое приложение были представлены в системе клиента для интерпретации содержимого страницы, страница должна предоставлять ссылку на подключаемый модуль или апплет.
Формы. Когда создаются электронные формы для заполнения онлайн, форма должна позволять людям, использующим вспомогательные технологии, получить доступ к информации, элементам полей, и функциям, которые требуются для заполнения и отправки формы, включая все направления и сигналы.
Навигационные ссылки. Должен предоставляться метод, который позволяет пользователям пропустить повторяющиеся навигационные ссылки.
Время. Когда требуется ответ по времени, пользователь должен быть об этом предупрежден и ему должно быть дано достаточно времени, чтобы сказать, что требуется дополнительное время.
Подробнее с этими рекомендациями вместе со ссылками на другие ресурсы по совместимости с Разделом 508 можно ознакомиться на сайте федерального правительства www.section508.gov/.
Центр обучения и технической помощи по информационным технологиям (ITTATC - Information Technology Technical Assistance and Training Center) является центром обмена информацией, связанной с Разделом 508, с сайтом www.ittatc.org. Эта организация финансируется Национальным институтом исследований по инвалидности и реабилитации (NIDDR - National Institute on Disability and Rehabilitation Research) и располагается в Институте технологии в Джорджии (Georgia Institute of Technology).
Тройственная схема цветов
Рис. 12.13. Тройственные цвета
Тройственная схема цветов использует три тона, которые равномерно удалены друг от друга на цветовом круге. Например, если доминирующим цветом является красный, то синий и желтый оттенки являются тройственными дополнениями. Подобно схеме дополнительных цветов, эта схема также выделяет цвета на основе их контраста.
| Заголовок | красный (светлый) | #FF7575 | 255,117,117 |
| Столбец | синий (светлый) | #7676FB | 118,118,251 |
| Фон | желтый | #FFFF99 | 255,255,153 |
Вспомогательные технологии
Вспомогательные технологии предоставляют механические и программные средства для преодоления физических или когнитивных недостатков. Примерами являются:
- Мышь, управляемая движением глаз. Встроенная в монитор компьютера камера сфокусирована на глазах пользователя. Курсор мыши перемещается в то место, куда смотрит пользователь, а щелчок мыши выполняется при моргании глаз.
- Мышь, управляемая ногами. Управление мыши ногами использует две педали, одну - для движения курсора и другую - для щелчка мышью.
- Мышь, отслеживающая движения головы. Устройство на верху компьютерного монитора отслеживает рефлектор, помещенный на голове или очках пользователя. Движения головы пользователя управляют направлением и расстоянием движения курсора.
- Сенсорно-тактильная клавиатура/мышь. Клавиатура работает при слабейших прикосновениях указки, удерживаемой в руках или во рту, не требуя никаких усилий для надавливания. Функция мыши работает как стандартная мышь, но не требует усилий руки.
- Управляемый ртом джойстик. Джойстик управляет движением курсора на экране; "втягивание" или "выдувание" удерживаемого во рту указателя симулирует щелчок мышью.
- Сенсорный экран. Поверхность экрана, чувствительная к прикосновениям пальцев и указки, управляет движением курсора и активирует щелчок мыши.
- Устройства чтения экрана и текста. Программное обеспечение читает вслух или преобразует в шрифт Брайля информацию, появляющуюся на экране монитора, либо произносит текст, введенный с клавиатуры или появляющийся в документах, таких, как текстовые файлы, сообщения email или документы текстового процессора.
- Экранная лупа. Программа, увеличивающая выводимое на экране изображение.
- Коммуникатор языка жестов. Преобразует текст или речь в видеоязык жестов или синтезированный компьютером голос.
- Распознавание речи. Устройства и программное обеспечение для управления компьютерами с помощью произносимых слов и фраз; вспомогательное устройство вывода, преобразующее речь в текст без использования карандаша и бумаги.
- Когнитивный планировщик/напоминатель. Помогает пользователям в доступе и запоминании информации; выводит на экране сигналы и осуществляет помощь в планировании для людей с расстройствами памяти и внимания, напоминая о графике работ с помощью графического вывода, меню выбора, и персонализированных вербальных и аудиосигналов.
Большинство этих решений находится на стороне конечного пользователя. Они должны покупаться и устанавливаться на индивидуальных компьютерах. Разработчик Web может лишь минимально или вовсе не может влиять на то, доступно ли содержание Web для этих методов. Разработчик может, однако, содействовать многим этим вспомогательным технологиям, следуя при создании страниц Web методам проектирования и кодирования, сайта совместимых с ними.
Выбор цветов
При выборе цветов для сайта Web лучше выбирать только несколько цветов. Было бы нежелательно переусердствовать и отвлечь внимание от информационного содержания страницы; надо только дополнить или выделить его. Обычно выбирается доминирующий цвет вместе с другими цветами, которые либо похожи на него, либо контрастируют с ним. Существуют стандартные схемы подходящих цветов, которым можно следовать при выборе этих цветов.
Выбор цветовой палитры
Обычно примерно полдесятка цветов являются хорошей начальной точкой для создания палитры аналогичных или дополнительных цветов для цветовой схемы страницы. В некоторых случаях цвета выбирают на основе предпочтений или существующих стандартов.
Рис. 12.14. Выбор тройственной цветовой схемы
Рис. 12.15. Выбор чистых оттенков
При работе с параграфами хорошей начальной точкой является выбор цветов на основе имеющихся на изображении. В сопровождающей иллюстрации палитра из пяти цветов плюс черный и белый цвета были выбраны на основе изображения. Различные оттенки красного и синего - часть тройственной цветовой схемы - создают небольшой контраст, необходимый между текстом и фоном. Намерение состоит в том, чтобы немного скрыть текст и привлечь внимание к изображению. Эти цвета были взяты с фотографии с помощью инструмента Photoshop eyedropper.
Как общее правило, вероятно, лучше не использовать чистые тона, как на второй иллюстрации. Чистые цвета оказываются слишком яркими, высококонтрастными, что может создавать трудности с восприятием. В этом случае толщина шрифта текста позволяет отвлечь внимание от изображения к верхней и нижней частям иллюстрации. Если такое эффект и предполагался, то отлично, хотя существуют лучшие способы выделить текст без высококонтрастных цветов.
При наличии 16 миллионов цветов на выбор, может оказаться трудно выбрать полдесятка цветов для страницы. Эффективным способом выбора цветов является использование различных типов существующих программ, применяющих цветовой круг. Например, посетив сайт www.colormatch.dk, можно интерактивно проверить цветовые комбинации и выбрать палитру цветов для своего сайта.
Задачи создания сайта Web
Совершенно очевидно, что любой сайт Web должен иметь некоторый общий замысел. В Web нет ничего более раздражающего, чем блуждание по сайту, который является мешаниной страниц без определенной общей картины. Можно столкнуться с сайтами, которые содержат одну очень длинную страницу Web - смесь содержимого и ссылок, на вид мало связанных друг с другом, или же встретить сайты с другой крайностью, с крошечными страницами контента в лабиринте ссылок, которые покидают вас в изоляции в конечной точке, глазеющим на никому не нужный контент и без явного способа вернуться в исходную точку.
Обе эти крайности демонстрируют отсутствие предвидения и планирования. Создатель сайта, вероятно, не имел другого желания, кроме как продекларировать свое присутствие в Web. Поэтому сайт превратился в какую-то неразбериху, производящую на посетителей неприятное впечатление.
Ключевым фактором при создании сайта является поэтому четкое понимание его назначения. Это может быть небольшая цель или тщательно проработанная задача. В любом случае назначение должно быть сформулировано в устной форме или в письменном виде. Даже для персонального сайта Web полезно сформулировать намерение. Рассмотрим, например, следующие утверждения о намерении:
- Представить персональное резюме об образовании, опыте работы, и выполненных работах для информирования потенциальных работодателей.
- Создать семейный сайт Web для представления текущей деятельности членов семьи.
- Создать сайт Web с описанием совершенных во время отпуска путешествий.
- Создать генеалогию семьи.
- Для выполнения заданий, связанных с курсом изучения приложений Web.
Каждое из этих утверждений четко очерчивает задачи сайта, позволяя ему в то же время развиваться в разумных границах. Тем самым исключается риск создания одного сайта, который пытается соединить все аспекты вашей личной жизни в конгломерате несвязанных страниц и ссылок.
Если вы являетесь, или станете, профессиональным разработчиком Web, то утверждение о цели обычно сформулировать легче. Оно часто вытекает из утверждения о намерении организации или направляющей цели организации. В коммерческом предприятии, например, распространенными целями сайта Web являются:
- продвигать на рынок и продавать основную линию продуктов компании;
- предоставлять заказчикам услуги по технической поддержке;
- увеличить публичную известность компании и ее продуктов;
- снизить расходы компании с помощью электронных транзакций с поставщиками и дистрибьюторами;
- улучшить внутреннюю коммуникацию направлений и деятельности компании.
Подобно персональным задачам, описанным выше, эти цели определяют границы сайта. Становится понятнее, будет или нет определенный контент или ссылки соответствовать этой цели.
Задание горизонтальных размеров
Браузер переносит по словам текст на странице, так что он всегда остается в пределах полей страницы. Однако другие элементы страницы - такие, как графические или текстовые контейнеры, которые имеют фиксированные размеры, - могут не укладываться в эти границы. При этом возникает проблема горизонтальной полосы прокрутки в окне браузера, присутствие которой нежелательно на любой странице Web. Трудно найти что-то более раздражающее или непродуктивное, чем постоянное прокручивание страницы Web туда и обратно, чтобы просмотреть содержимое.
Следующее окно браузера иллюстрирует проблему и решение. Первый затененный раздел имеет заданную ширину в 760 пикселей, подходящую для разрешения экрана 800 x 600. Однако при выводе в браузере на экране 640 x 480 раздел выходит за поля страницы и создает горизонтальную полосу прокрутки для просмотра его на всю ширину.
Рис. 12.6. Управление шириной страницы
Лучшим решением для задания размеров блоков текста является использование измерений в процентах, как делается во втором разделе. Показанная здесь ширина равна 100%. Поэтому раздел будет расширяться только до ширины полей страницы, независимо от разрешения экрана.
При выводе графических изображений задание горизонтального размера немного сложнее, так как настройка ширины может искажать картинку или вызывать пикселизацию, когда изображение увеличивается до ширины, которая больше исходного размера. Всегда лучше задавать размер самого изображения, чем подстраивать его с помощью задания стилей. Выберите размер, который умещается в окне 600 x 400, чтобы гарантировать, что оно правильно будет помещаться в любом другом окне браузера.
Задание вертикальных размеров
Очевидно, что не слишком много можно сделать в отношении вертикальных размеров страниц Web. Они расширяются, чтобы охватить весь объем контента. Конечно, всегда можно разделить содержимое на отдельные, более короткие страницы со ссылками между ними. Компромисс состоит в использовании вертикальной прокрутки или щелканья по ссылкам, но ни один из этих способов не имеет определенного преимущества с точки зрения удобства пользователей.
