Создание и публикация web-сайтов

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

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

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

2. ОСНОВНЫЕ ПРАВИЛА И ЭТАПЫ СОЗДАНИЕ САЙТА

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

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

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

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

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

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

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

2.1. Влияние дисплеев на 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) дисплеями, то необходимо применение высококонтрастной графики. Когда цвета конвертируются во множество оттенков серого цвета (или смешиваются с черными и белыми пикселами), имеет значение только яркость цветов. Представьте себе пурпурный текст на темно-серо-зеленом фоне. Хотя это цвета контрастных тонов, по общей яркости они достаточно близки, так что текст становится неразличимым при просмотре на полутоновом дисплее.

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

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

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

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

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

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

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

3. ВЫБОР СТРУКТУРЫ WEB-СТРАНИЦЫ

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

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

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

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

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

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

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

Недостатки:

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

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

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

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

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