Компьютерная графика и web дизайн Конспект лекций Днепропетровск


НазваниеКомпьютерная графика и web дизайн Конспект лекций Днепропетровск
страница14/16
Дата публикации16.03.2013
Размер1.78 Mb.
ТипКонспект
userdocs.ru > Информатика > Конспект
1   ...   8   9   10   11   12   13   14   15   16

^ Сетевые графические форматы

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

  GIF

В далеком 1978 году двое израильских исследователей  Якоб Зив (Jacob Ziv)и Абрахам Лемпел (Abraham Lempel) разработали принципиально новый для того времени алгоритм сжатия информации без потери данных, которому, немудрствуя лукаво, дали полученное из сокращения собственных фамилий и даты завершения своего проекта название: LZ78. Информация о принципах построения этого алгоритма была общедоступной, и спустя несколько лет американский программист Терри Уэлч (Terry Welch) усовершенствовал его, добавил в обозначение первую букву своей фамилии и запатентовал новый алгоритм под названием LZW, также предоставив свою разработку для использования всем желающим.

Одним из таких «желающих» оказался сотрудник компании CompuServe Inc.Боб Берри (Bob Berry), взявший LZW в качестве основы для созданного им в 1987 году принципиально нового графического формата GIF (Graphic Interchange Format). Созданная Терри Уэлчем компания Unisys, которой и принадлежали авторские права на алгоритм LZW, взимала плату за его использование только с производителей аппаратного обеспечения для компьютеров, в котором применялся данный стандарт, например, с изготовителей модемов. Разработчики программного обеспечения «комиссионными сборами» не облагались.

Однако зимой 1994 года компания Unisys, начавшая испытывать финансовые проблемы, объявила LZW коммерческим стандартом, использование которого требует оплаты. Это автоматически сделало GIF единственным в мире «платным» графическим форматом, что вызвало волну недовольства среди пользователей Интернета, поскольку практически на всех современных web-сайтах так или иначе применяются элементы GIF. Тем не менее GIF чрезвычайно широко используется в Интернете и сейчас, причем пользователи не обязаны оплачивать кому бы то ни было возможность разместить на своей страничке изображение в данном формате, так как упомянутые выше финансовые претензии касаются, в первую очередь, производителей работающего с GIF программного обеспечения. Ситуация с дальнейшей судьбой этого стандарта до сих пор остается не разрешенной.

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

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

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

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

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

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

СОВЕТ Убрать ненужный фон из файла GIF можно, воспользовавшись встроенной процедурой графического редактора Adobe Photoshop. Для этого вменю «файл» необходимо выбрать пункт «экспорт», среди предложенных вариантов отметить «GIF89a» и в появившемся окне с помощью инструмента «пипетка» указать цвета, в которых вы больше не нуждаетесь.

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

  JPEG

JPEG (Joint Photographic Experts Group) — графический стандарт, созданный на основе одноименного алгоритма сжатия изображений с потерей качества, кодирующего не идентичные элементы, как алгоритм LZW, а межпиксельные интервалы. В упрощенном виде механизм сжатия изображения в файл формата JPEG выглядит следующим образом. Первой ступенью компрессии является преобразование изображения в цветовой образ LAB, раскладывающий картинку на три независимых канала, один из которых (Lightness) выделен для сохранения значений интенсивности цветов, а два других (А и В) — для запоминания непосредственно цветовой информации. Причем данные о цветах сохраняются в виде шкалы, организованной по принципу непрерывного спектра. Вторя ступень — собственно компрессия: из получившейся цветовой модели удаляются приблизительно три четверти информации о цвете, затем образ дробится на участки размером 8x8 точек и преобразуется в числовой массив данных. Заголовок каждого блока описывает доминирующий цвет участка, остальная информация — менее заметные оттенки. На третьей ступени сжатия из массива данных удаляется определенная часть информации, описывающей второстепенные оттенки, причем количество изымаемых данных зависит от выбранного пользователем качества результирующего изображения. И наконец, готовый файл сжимается согласно алгоритму Хаффмана, который предусматривает замену наиболее часто встречающихся в массиве данных знаков более компактной двух битной кодировкой. Декомпрессия файла JPEG происходит в обратном порядке.

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

ВНИМАНИЕ При изготовлении иллюстраций в формате JPEG рекомендуется избегать использования больших участков, заполненных одним цветом, во избежание появления на изображении постороннего цветового «шума» и «грязи».

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

Существует несколько разновидностей стандарта JPEG. Среди них — формат JPEG Baseline Optimized, основанный на более совершенном алгоритме компрессии изображений. Недостатком данной реализации JPEG является то, что она не распознается целым рядом часто используемых приложений. Так называемый Progressive JPEG был оптимизирован специально для представления графики во Всемирной сети, изображения в этом формате сжимаются чуть лучше, чем в стандартном JPEG, но хуже, чем в JPEG Baseline Optimized. Отличительная особенность Progressive JPEG — возможность сохранять графику в чересстрочном режиме, как это реализовано в стандарте GIF.

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

  PNG

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

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

Помимо альфа-канала изображения PNG содержат так называемый блок описания гамма-коррекции. Под переменной «гамма» в данном случае подразумевается некая величина, выражающая зависимость яркости свечения каждой точки экрана пользователя от напряжения на электродах кинескопа, которое берется из файлов управления видеоподсистемой компьютера. Таким образом, при открытии изображения, созданного с помощью IBM-совместимой машины, на компьютере другого производителя, например на Apple Macintosh, в яркость цветопередачи вводится соответствующая поправка, и картинка отображается совершенно идентично на разных типах оборудования. Этим стандарт PNG еще более приблизился к основной идее Интернета единообразию отображения   web-страниц на компьютерах от различных производителей.

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

^ Обслуживание web-страницы, сайта
Понятие поддержки web-сайта включает в себя перечисленные ниже процедуры, которые проводятся, как правило, регулярно и с различной периодичностью. Частота обслуживания web-страницы зависит от ее объема, содержания, направленности и специализации. Большие информационные, новостные и коммерческие порталы обновляются и обслуживаются ежедневно, иногда — по нескольку раз в сутки, корпоративные сайты и частные серверы — приблизительно раз в неделю или чаще. Полное обслуживание домашних страничек индивидуальных пользователей достаточно проводить раз в месяц. Итак, поддержка web-сайта — это:

  • Проверка целостности внутренних и внешних гиперсвязей ресурса.

  • Проверка наличия на сервере и корректности отображения всех web-страниц сайта.

  • Проверка работоспособности всех интерактивных форм.

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

  • Создание новых и расширение существующих разделов ресурса.

  • Рассмотрим каждый из перечисленных пунктов более подробно.

  Проверка целостности гиперсвязей и работоспособности интерактивных форм

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

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

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

 
1   ...   8   9   10   11   12   13   14   15   16

Похожие:

Компьютерная графика и web дизайн Конспект лекций Днепропетровск iconИстория науки и техники конспект лекций Омск
Конспект лекций предназначен для студентов специальности 070601 «Дизайн», 032401 «Реклама» очной, заочной и дистанционной формы обучения....
Компьютерная графика и web дизайн Конспект лекций Днепропетровск iconКонспект лекций по дисциплине “ Информационные системы ” Днепропетровск
Классификация информационных систем в зависимости от степени автоматизации
Компьютерная графика и web дизайн Конспект лекций Днепропетровск iconКонспект лекций «Ильин А. А. Акушерство и гинекология. Конспект лекций»
Конспект лекций предназначен для подготовки студентов медицинских вузов к сдаче зачетов и экзаменов. Книга включает в себя полный...
Компьютерная графика и web дизайн Конспект лекций Днепропетровск iconКонспект лекций для студентов направления 070104 «Морской и речной транспорт»
Конспект лекций рассмотрены и одобрены на заседании кафедры «Судовождение» кгмту
Компьютерная графика и web дизайн Конспект лекций Днепропетровск iconИнженерная и компьютерная графика, лекция

Компьютерная графика и web дизайн Конспект лекций Днепропетровск iconКраткий конспект лекций для студентов дневного и заочного отделения...
Психология труда. Краткий конспект лекций /Сост. М. Д. Лапина – Мариуполь, 2004, 34 с
Компьютерная графика и web дизайн Конспект лекций Днепропетровск iconКомпьютерная фирма vip-computer. Ru
Компьютерные и ит-услуги, разработка web-сайтов и программного обеспечения на заказ
Компьютерная графика и web дизайн Конспект лекций Днепропетровск iconКомпьютерная графика
Графическое изображение должно создаваться определенными программными средствами
Компьютерная графика и web дизайн Конспект лекций Днепропетровск iconКонспект лекций по дисциплине "инвестирование"
Конспект лекций по дисциплине «Инвестирование» для студентов экономических специальностей всех форм обучения Сост.: В. М. Гридасов...
Компьютерная графика и web дизайн Конспект лекций Днепропетровск iconКонспект лекций Киров 2010 удк 681. 332
Теория автоматов (часть I). Конспект лекций /Киров, Вятский государственный университет, 2010, 56с
Вы можете разместить ссылку на наш сайт:
Школьные материалы


При копировании материала укажите ссылку © 2015
контакты
userdocs.ru
Главная страница