Web-дизайн

Федеральное агентство по образованию Байкальский государственный университет экономики и права РЕФЕРАТ на тему

WEB-дизайн Выполнил: студент группы ИС-08−1

Золдак Зинаида Сергеевна Проверил: Ступин Виталий Валерьевич Иркутск 2008 г.

Введение

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

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

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

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

Кто создает Web-страницы? Бизнесмены, студенты, домохозяйки и т. д. Прежде чем начинать, посмотрите, что делают другие. Для этого можно провести поиск по ключевым словам personal, web и page. Документ должен создаваться в формате HTML (Hyper Text Markup Language — Язык разметки гипертекста). Язык разметки гипертекста — это способ форматирования Web-страниц. Названный язык устанавливает, как будут выводиться текст и графика, какие шрифты используются, какие поля данных выводятся, и какие команды перехода к другим Web-страницам определяются. HTML позволяет создать Web-страницу. Но сегодня совсем нет необходимости изучать этот язык, так как выпускается большое количество инструментальных средств, которые позволяют преобразовывать существующие документы в формат HTML или с самого начала создавать новые документы в данном формате. Чтобы создать Web-страницу, нужны две вещи: содержимое страницы и программа для создания страницы.

С чего начинается сайт?

По сравнению с другими СМИ сайт имеет серьезные преимущества.

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

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

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

Однако все эти преимущества имеют и оборотную сторону.

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

· Отсутствие цензуры налагает серьезную ответственность на владельца сайта за содержание материалов.

· Техническая доступность сайтов приводит к появлению в сети колоссального количества некачественных непрофессионально выполненных проектов, что, естественно, отталкивает посетителей.

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

Однако Интернет-сайт — это не только обычное СМИ, сродни печатному, теле — или радиоизданию.

Программы разработки Web-страниц должны содержать следующее:

функции обработки текста: орфографический контроль, тезаурус (полный, систематизированный набор данных о какой-либо области знания, позволяющий человеку или ВМ ориентироваться), макрокоманды, поиск/замена и редактирование таблиц в режиме WYSIWYG (What You See Is What You Get — режим работы системы подготовки текстов, при котором изображение на экране максимально приближено к печатному тексту, являющемуся результатом работы);

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

настраиваемые формы, позволяющие компаниям принимать заказы от покупателей и обмениваться информацией;

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

Современные текстовые процессоры, например Microsoft Word 97/2000, предоставляют такие возможности. Сначала необходимо создать текстовый документ, включить в него картинки и таблички, а затем перейти к добавлению в него гипертекстовых ссылок, используя кнопку или используя панель инструментов Web. Другой способ создания Web-страниц средствами Word — использование шаблонов. В этом случае нет необходимости тратить время на продумывание расположения материала, организаций ссылок и т. п. Документы, которые используются как Web-страницы, сохраняются в формате HTML.

В состав Netscape Communicator входит редактор Composer, также позволяющий создавать и редактировать Web-странички. Запуск редактора осуществляется командой Communicator/Page Composer.

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

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

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

web дизайн сайт экран

Разрешение экрана и разметка страниц

Один из самых задаваемых вопросов на курсах по «Вебу» — «Под какое разрешение нам стоит делать свои дизайны?» Полный ответ будет немного мудреным, но основные советы очевидны:

· Оптимизируйте под 1024×768 — это самый распространённый размер экрана. Несомненно, ориентироваться нужно на разрешение экранов вашей целевой аудитории, и в будущем размер будет меняться. Размер уже может быть другим, если, скажем, Вы создаёте Интернет для компании, которая выдает своим сотрудникам большие мониторы.

· Не надо создавать сайты только под определённый размер экрана, так как размеры экранов пользователей различаются. Самих различий очень много, так как пользователи не всегда «максимизируют» свои браузеры (особенно если у них большие экраны).

· Используйте «плавающие» дизайны, которые растягиваются под конкретный размер окна пользователя (избегайте статичных дизайнов, которые всегда одного размера).

На сегодняшний день около 60% всех мониторов настроены под разрешение в 1024×768 пикселей. Для сравнения — около 17% выставляют 800×600, поэтому вполне очевидно, что не так важно нацеливаться именно на пользователей с маленькими дисплеями. Также очевидно, что нельзя игнорировать эти 17% и предоставлять своим пользователям такую разметку страницы, которая требует больше свободного пространства, чем есть у пользователя на самом деле.

Оптимизация под 1024×768

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

Три самых главных критерия для оптимизации Интернет-страниц под определённый размер экрана:

· Изначальный обзор: видна ли пользователям вся ключевая информация без прокрутки страницы? Это является компромиссом между количеством показанных предметов и насколько детально показан каждый предмет.

· Удобочитаемость: насколько легко прочитать текст в разных колонках с определённой шириной?

· Эстетика: насколько хорошо выглядит ваша страница, когда у всех элементов правильный размеры и правильное расположение? Все ли элементы правильно выстраиваются — например, находится ли подпись рядом с фотографией, и т. д.

Вам необходимо держать в голове эти три критерия при всех возможных разрешениях, постоянно изменяя размер окна браузера от 800×600 до 1280×1204. Всё должно выглядеть на высоком уровне при всех разрешениях.

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

Как говорит первый критерий — нужно всегда брать во внимание прокрутку страницы. Обычно пользователям не нравиться прокрутка. Итак, когда Вы делаете дизайн, Вы должны учитывать, сколько информации увидят пользователи, если прокрутят один или два полных экрана.

Прокрутка и изначальный обзор зависят от размера экрана: чем больше экран, тем больше информации он показывает и тем меньше нужно делать прокруток. Здесь Вы и должны заниматься оптимизацией для 1024×768: показать самый важный материал, не прибегая к прокрутке (вместе с этим необходимо убедиться, что критическая информация останется видимой при разрешении 800×600).

Итак, как на счёт крошечных экранов, например мобильные устройства. «Плавающий» дизайн должен изменить свой масштаб под мобильный телефон, но не думайте, что так надо делать сайт вашей компании. Среда мобильных телефонов имеет свою специфику; чтобы оптимизировать сайт под мобильное устройство, необходимо создать отдельный сервис, который будет предоставлять меньше функций, будет написан более сжато, и, который будет ориентирован на содержание сайта.

Большие экраны

У многих пользователей большие экраны. В настоящий момент около 18% используют как минимум разрешение равное 1280×1024 пикселям. Процент пользователей с большими экранами растёт, но не так как бы нам этого хотелось.

Большие мониторы — самый простой способ повысить производительность, и любой, кто зарабатывает минимум $ 50,000 в год, должен иметь разрешение экрана не менее 1600×1200. Плоский дисплей с таким разрешением стоит меньше $ 500. Поэтому пока большие дисплеи повышают производительность как минимум на 0.5%, Вы окупите своё вложение меньше чем за год (типичные корпоративные накладные удваивают издержки компании на сотрудника; всегда помните, что в любом подсчёте производительности необходимо использовать стоимость работ, а не зарплату).

Apple и Microsoft опубликовали отчёты, цель которых была подсчитать рост производительности от больших мониторов. К сожалению, результаты не дали хороших цифр потому, что присутствовали методологические ошибки. Мой опыт показывает, что когда пользователи делают свои работу на больших мониторах, то примерный рост производительности равняется 5−10%. Эти проценты переводятся в рост производительности примерно в 0.5−1% на одного человека, который делает работу, ориентированную на использование монитора 10% от одного дня. Нет сомнений, что большой монитор стоит своих денег.

Начиная с 1600×1200, пользователи редко растягивают свои браузеры во весь экран потому, что мало Интернет-сайтов хорошо работают на таких разрешениях. Большие окна — это волшебство во время работы с таблицами, с графическим дизайном, и со многими другими задачами, но не с настоящей парадигмой Интернет-сайтов. Сегодня, Интернет-пользователи с большими экранами утилизируют дополнительное свободное пространство несколькими окнами и параллельным серфингом в Интернете.

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

В любом случае, нужда в новой парадигме не изменит настоящих рекомендаций: оптимизируйте под 1024×768, но не создавайте дизайн только для этого размера. Ваши страницы должны работать на любом разрешении, от 800×600 до 1280×1024 и более.

Руководство по дизайну

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

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

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

· Меньше колонок Несколько лет назад дизайн в три колонки был нормой, а частенько встречались даже четыре. Сегодня две колонки никого не удивляют, а три — общепринятый максимум.

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

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

· Простая навигация Меню навигации, которое отображается на каждой странице сайта, должно быть большим, понятным и простым. Что касается гиперссылок, то они должны четко отличаться от всего остального контента на странице.

· Увеличенный кегль На сайтах Веб 2.0 размер шрифта обычно больше, чем на сайтах прошлого поколения. Это правило вытекает из принципов простоты и функционального дизайна.

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

· Четкий логотип Ясный, мощный и сильный бренд создается с помощью заметного и запоминающегося логотипа.

· Кроме всех вышеперечисленных, упоминаются еще шесть дизайнерских приемов, которые встречаются не так часто: использование насыщенных цветов; гламурные поверхности (rich surfaces); градиенты; отражения; изящные пиктограммы и даже многоугольные звездочки.

Главные ошибки WEB-дизайна

Якоб Нильсен в одном из журналов опубликовал статью Статья называлась «Top Ten Web Design Mistakes of 2005», в которой рассказывал о наиболее распространенных ошибках web-дизайна 2005;ого года. Вот некоторые из них:

1. Проблема с читаемостью

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

2. Нестандартные ссылки

Вот пять главных правил для ссылок:

Ясно указывайте на странице, что является ссылкой: если это текст, пусть он будет цветным и подчеркнутым (не используйте подчеркивание для обычного текста) Не скрывайте различие между посещенными и непосещенными ссылками.

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

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

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

Flash

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

Flash является программной средой и ее надо использовать так, чтобы пользователи получали дополнительные функции и возможности, которые им не могут дать статические страницы. Flash не следует использовать только лишь для того, чтобы на странице что-то бегало и прыгало. Если контент вашей страницы скучен, перепишите текст, чтобы он стал лучше, наймите профессионального фотографа, чтобы тот сделал более качественные фотографии. Не заставляйте свою страницу выплясывать ча-ча-ча. Это не привлечет внимания пользователя, наоборот — он уйдет с вашей страницы; большинство людей приравнивают анимацию к бесполезному контенту.

Использование Flash-а в навигации почти всегда является ошибкой. Люди предпочитают предсказуемую навигацию и статические меню.

Контент, не написанный специально для Web-а

Писать для web-а значит:

· писать коротко

· писать так, чтобы текст удобно было просматривать

· писать точно в тему (а не заполнять пространство рекламным шумом) Текст для Web-а должен:

· отвечать на вопросы пользователей

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

Плохой поиск

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

Несовместимость браузеров

Сегодня достаточно много людей пользуется браузером Firefox (и другими не такими распространенными продуктами, как Opera и Safari), что требование поддержки разных браузеров вновь в повестке дня: не отпугивайте своих клиентов только потому, что они предпочитают работать на другой платформе.

Громоздкие формы

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

· Удалите все лишние вопросы. Например, так уж вам нужно знать, как следует обращаться к пользователю: мистер, миссис или мисс?

· Сделайте обязательными лишь те поля, которые вам точно нужны.

· Поддерживайте функцию автозаполнения в браузере. Для этого выбирайте для полей в html-коде обычные имена (просто name, address и т. п.)

· Устанавливайте курсор автоматически на первом поле формы. Так экономится один щелчок мышкой.

· Гибко поддерживайте формат телефонных номеров, номеров кредитных карточек и проч. Ведь очень просто запрограммировать компьютер, чтобы он сам удалял лишние скобки и пробелы в номерах. Это особенно важно в случаях с пожилыми людьми, когда сайты требуют от них данные в непривычном для них формате. Зачем терять заказ только из-за того, что покупатель предпочитает красиво группировать цифры по четыре в номере своей кредитной карточки, а не вводить их сплошным потоком из 14 цифр?

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

8. Отсутствие контактной информации или прочей информации о компании

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

Рисунок Пример номера телефона в левом верхнем углу экрана

Макеты страниц с фиксированной шириной

Здесь жалобы делились на две категории:

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

· Правая часть фиксированной страницы оказывалась обрезанной. Это особенно раздражало европейцев, которые используют более узкий формат бумаги (А4), чем тот, что используется в США Здесь мы также напомним о размерах текста. Предположим, что Ваш сайт не допустил ошибку № 1, и Вы не зафиксировали размер шрифта.

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

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

Неверное увеличение фотографии

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

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

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

Хуже всего, когда пользователь, щелкая по кнопке «увеличить фотографию», видит ту же самую фотографию. Элементы, которые ничего не делают, всегда являются ошибкой. Такие ссылки и кнопки зря занимают место, зря тратят время пользователя и путают пользователя: «Что случилось? Я что-то не так сделал?» (И даже еще более распространенной ошибкой является ссылка, на главной странице, которая ведет — на главную же страницу. Это был пункт № 10 в нашем списке самых распространенных ошибок при создании страниц сайта.)

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

Рисунок 3 Главная страница сайта

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

Сетевые графические форматы Как говорили И. Ильф и Е. Петров, статистика знает все. Эта самая всезнающая статистика утверждает, что большинство пользователей Интернета на нашей планете применяют для связи с Всемирной сетью соединение по коммутируемым телефонным каналам при помощи модема. Поскольку это весьма медленный способ связи, время загрузки графического изображения в клиентский браузер в данном случае должно быть как можно меньшим. Действительно, длительное ожидание, когда закончится считывание картинки с сервера, занятие не из приятных. Именно поэтому два наиболее популярных стандарта, в которых хранится 90% всей графики, представленной ныне в Интернете, это GIF и JPEG. В них заложены различные алгоритмы сжатия изображения с потерей качества, благодаря использованию которых удается значительно уменьшить размер целевого файла.

GIF

Благодаря возможностям алгоритма LZW (созданный американским программистом Терри Уэлчем) стандарт GIF позволяет значительно сокращать объем итогового графического файла по сравнению с исходным изображением. Достигается это методом смешения сходных оттенков в один. Информация об изображении в файле стандарта GIF записывается построчно, то есть представляет собой массив описаний строк высотой в один пиксел. Именно это свойство GIF, а также то, что данный формат оперирует фиксированной, так называемой индексированной палитрой, причем число цветов в этой палитре не превышает 256, явилось основой для появления двух простых правил, применяющихся в современном web-дизайне.

· Стандарт GIF используется в документах HTML только для отображения так называемой бизнес-графики: диаграмм, логотипов, кнопок, разделительных линий, других элементов оформления страницы. Для размещения на web-сайте фотографий, репродукций картин и изображений с большим количеством цветов и цветовых переходов используется стандарт JPEG.

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

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

Это правило продиктовано тем, что алгоритм замещения схожих оттенков одним в формате GIF работает некорректно почти всегда. Поэтому участки со множеством различных оттенков на небольшом физическом пространстве рисунка после сохранения изображения в индексированной палитре будут выглядеть смазанными и грязными. Этого можно избежать, применяя в своей иллюстрации по возможности однотонные и контрастные цвета. Одно из замечательных свойств стандарта GIF — его уникальная особенность, названная разработчиками interlace, или, по-русски, черессторность. Она позволяет загружать картинку с сервера в клиентский браузер не целиком, а частями, причем процедура считывания файла выглядит следующим образом: сначала на экране отображаются первая, пятая и десятая строки, составляющие изображение, затем — вторая, шестая и одиннадцатая и т. д. Таким образом, для пользователя создается иллюзия постепенной загрузки графического элемента: картинка как бы медленно проявляется на странице, что иногда бывает очень полезно при включении в документ изображений большого размера —психологически зрителю легче дождаться полной прорисовки иллюстрации, чем несколько минут скучать перед пустым экраном. К тому же еще до полной загрузки файла пользователь может оценить приблизительное содержимое картинки и решить, стоит ли ему дожидаться ее полной прорисовки или нет.

Через несколько лет после создания стандарта GIF, в 1989 году, была выпущена новая версия этого графического формата, получившая название GIF89a. Данная модификация включает в себя еще две уникальные особенности, широко использующиеся в современном Интернете. Первая называется transparency и подразумевает создание для изображения прозрачного фона методом сохранения вместе с файлом так называемого альфа-канала, представляющего собой маску прозрачности рисунка. Цвета, помеченные в альфа-канале как прозрачные, станут невидимы в браузерах и большинстве других программ, предназначенных для просмотра изображений. Эта функция необходима, например, при размещении картинок неправильной геометрической формы на странице со сложным фоновым рисунком, когда корректно подогнать части изображений друг к другу не представляется возможным.

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

JPEG

JPEG (Joint Photographic Experts Group) — графический стандарт, созданный на основе одноименного алгоритма сжатия изображений с потерей качества, кодирующего не идентичные элементы, а межпиксельные интервалы. JPEG оптимален для передачи фотографических изображений, а также картинок с большим количеством полутонов и цветовых переходов. Максимальное число цветов, которое может содержать изображение в формате JPEG, достигает 16 миллионов. Очевидно также, что чем выше степень компрессии такого изображения, тем ниже его качество. Web-мастеру, создающему для сайта иллюстрации в формате JPEG, необходимо помнить следующее правило:

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

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

· При работе со стандартом JPEG следует учитывать, что сжатию с наименьшей потерей качества поддаются изображения, сохраненные с высоким разрешением, от 150 до 300 dpi. В процессе обработки иллюстраций лучше всего сохранять картинку в формате TIFF и переводить в JPEG лишь готовый результат, поскольку каждое промежуточное сохранение файла JPEG на диск приводит к удалению второстепенной информации и ухудшению качества рисунка.

PNG

Во второй половине девяностых годов была создана инициативная группа программистов и исследователей, которую возглавил американский специалист по электронным технологиям Том Боутелл (Thomas Bowtell). Перед инициативной группой стояла нелегкая задача: разработать стандарт, который не только включал бы в себя все лучшие качества GIF, но и превосходил бы его по всем характеристикам, оставаясь при этом совершенно бесплатным для пользователей. Основной областью применения данного формата должен был стать Интернет. Такой стандарт был создан и получил название Portable Network Graphics — PNG, хотя многие пользователи Всемирной сети придумали этой аббревиатуре иную расшифровку: Picture is Not GIF.

PNG, как и GIF, поддерживает interlacing (чересстрочность), но в отличие от последнего не только по горизонтали, но и по вертикали. Палитра PNG не ограничивается 256 цветами, данный формат позволяет создавать изображения с глубиной цвета до 48 бит. Также дизайнер получил возможность создавать картинки с переменной прозрачностью, например, логотипы, фон которых плавно сливается с фоновым цветом html-документа, каким бы тот ни был.

Поскольку данный формат появился на свет относительно недавно, его поддерживают далеко не все браузеры, в отличие от GIF и JPEG, которые распознаются без проблем любыми программами, предназначенными для отображения графики. PNG поддерживается Microsoft Internet Explorer, начиная с версии 4.0, и Netscape Communicator версий 4.04 и выше. Старые браузеры отобразить картинку в формате PNG не смогут.

1. Компьютерные информационные технологи: Учебное пособие/А.В. Бурдуковская [и др.] - Издательство БГУЭП, 2002. — 62 с

2. Библиотека I2R