Text Transfer Protocol протокол передачи гипертекста. Когда запускатеся программа

Вид материала

Содержание

Особенности web-дизайна
Об эффективном расположении элементов графики и текста на экране
Элементы восприятия и цвета
Цветовые модели
Цветовая модель RGB
Цветовая модель HSB
Насыщенность (Saturation)
Цветовая модель CMYK
Секреты web-графики
Палитра цветов
Shockwave Flash
Уменьшение количества цветов
Оптимизация палитры изображения
Стилизация изображения
Искажение размеров изображения
Фрагментарная оптимизация
Оптимизация "прозрачных" изображений
Использование чересстрочной развертки
Что такое cookies
Как включить куки
...
Полное содержание

Подобный материал:

1 2 3 4 5 6

Лекция 6

Словарь World Wide Web

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

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

HTTP (HyperText Transfer Protocol) – протокол передачи гипертекста.

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

Описанный выше процесс формализован протоколом HTTP. Данный протокол позволяет браузеру не только запрашивать документы с сервера, но и осуществлять поиск в документах, манипулировать документами и взаимодействовать с разнообразными процессами на сервере.

Hypertext (гипертекст) – способ представления информации при помощи связей между документами. В документа Web связь представляет собой URL, указывающий на другую Web-страницу или другой информационный ресурс.

HTML (HyperText Markup Language – язык разметки гипертекста) – файл, содержащий набор управляющих послдеовательностей, содержащихся в HTML-документе и определяющих те действия, которые программа просмотра дорлжна выполнить при загрузке этого документа

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

Web-Site (web-сайт) – группа HTML-документов, объединенных по смыслу и имеющих одинаковое дизайнерское решение.

URL (Uniform Resource Locator – универсальный указатель ресурсов) – указывает местонахождение документов.Выглядит следующим образом:

протокол://тип_ресурса.адрес_сервера/имя_каталога/имя_файла

Web-Server – это специальное программное обеспечение для управления правами доступа к web-сайтам.

Home Page (домашняя страница) – головная, начальная страница, локальный архив. Первая страница какого-либо Web-сервера или логически связанной группы HTML-документов.

.

VRML (Virtual Reality Modeling Language – язык моделирования виртуальной реальности) –

CGI (Common Gateway Interface) – стандарт, позволяющий Web-серверам запускать внешние прикладные программы, например, программы обработки информации из заполненных форм.

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

Если программа CGI выполняется на сервере по запросу клиента, то Java позволяет выполнять разнообразные действия непосредственно на клиентском компьютере. Интерпретатор Java, встроенный в браузер (программу просмотра), при подключении к web-site загружает перекомпилированную программу (applet), которая может устанавливать связь с другими такими же программками в сети, а также производить всякие опреациина вашей машине.

Web Browser (браузер) – программное обеспечение навигации и просмотра, выдающее запросы и визуализирующее HTML-документы и другие информационные ресурсы Интернет.

Особенности web-дизайна

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

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

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

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

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

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

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

Ниже приводятся рекомендуемые к использованию типы графических вставок в web-страницы.

Навигационные кнопки используются для содействия посетителям в перемещениях по сайту. Хорошо оформленные, они воспринимаются легче, чем текстовые линки.
Логотип используется для идентификации корпоративного стиля. Логотип может существенно увеличить узнаваемость бренда или торговой марки.
Маркеры списков используются для привлечения внимания посетителей к узловым точкам документов. Также часто используются для разделения параграфов и абзацев в документе.
Титульная графика (мастхед) предоставляет посетителям информацию по web-ресурсу. Также улучшает визуальное восприятие.
Разделительные линии обычно используются для разделения текстов и облегчения их восприятия.
Фоновые рисунки улучшают внешний вид страниц. Наиболее часто используется горизонтальная двухцветная полоска.
Графический заголовок позволяет использовать независящие от установленных на клиентском компьютере шрифты.
Фотографии обычно используются для придания более доброжелательного внешнего вида странице. Взгляд посетителей естественным образом притягивается к фотоизображениям.

Все графические изображения на сайте должны соответствовать выбранной цветовой гамме, используемым шрифтам и примененным эффектам. Для профессионального web-сайта минимальный набор графики составляет, как правило, навигацию, логотип, маркеры списков и мастхеды. Если эта графика не увеличивает существенно время загрузки страницы, можно добавлять прочие элементы. Оптимальный суммарный размер web-страницы составляет 40-60 Кб. Любая добавочная графика на странице должна служить функциям, напрямую связанным с тематикой и контентом сайта.

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

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

Об эффективном расположении элементов графики и текста на экране

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

Если логотип вашего сайта хорошо известен посетителям, то он будет хорошо работать на вас слева сверху (для примера: логотип Intel Inside). Если же логотип вашего сайта малоизвестен, то имеет смысл разместить его справа сверху (это будет способствовать его запоминанию посетителями).

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

Аудиальные компоненты обычно мало важны, если это не сайт посвященный музыке.

Расположение в средней части экрана. Слева Известные, Справа малоизвестные. Возможно из аудиальных компонентов разместить Слоган (Пример: Имидж ничто, жажда все или Эффективная коммуникация ключ к успеху).

Снизу экрана желательно выделить две зоны:

Справа внизу- где лучше дать числовую, количественную информацию и т.д. (Пример - Адрес или цены).

Слева внизу - Вот здесь нужно, что бы те фразы, которые там написаны, вызывали у посетителя Вкус, Чувства, Ощущения. Картинки должны быть в том же духе. (Пример: Кружка Пива, и надпись: Почувствуй себя настоящим студентом.)

Элементы восприятия и цвета

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

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

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

Мы будем использовать оттенки синего, голубого, насыщ. желтого, оранжевого, белого, зеленого.

На некоторые цвета у большого количества людей преобладает негативная реакция:

Черный, Красный, Серый, Коричневый, эти цвета при доминировании на сайте вызовут отрицательную оценку сайта.

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

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

Помните, что во многом отношение к сайту зависит от тех цветов, которые вы используете при его оформлении.

Элементы восприятия играют также большую роль при оформлении сайта.

Считается, что одновременно глаз человека может воспринимать около 72 однотипных элементов.

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

Цветовые модели

В 1676 году сэр Исаак Ньютон с помощью трёхгранной призмы разложил белый солнечный свет на цветовой спектр. Подобный спектр содержал все цвета за исключением пурпурного. Ньютон ставил свой опыт следующим образом :

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

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

Деление спектра на семь цветов, введенное Ньютоном - чистая условность. Леонардо да Винчи считал, что основных цветов пять, Михайло Ломоносов положил начало трехкомпонентной теории цветового деления. В соответствии с ней световые волны, длина которых соответствует красному, зеленому и синему цветам, составляют основу всех цветов в природе, поэтому красный (Red), зеленый (Green) и синий (Blue) - основные, первичные цвета. При наложении попарно трех первичных цветов, образуются вторичные цвета: голубой (Cyan), пурпурный (Magneta), желтый (Yellow). Так, например, вторичный желтый цвет образуется путем сложения первичных красного и зеленого, а синий в формировании желтого не участвует. Если объединить красный, зеленый и синий свет, то длины волн суммируются и в результате получится луч белого света. А если объединить первичный синий и вторичный желтый, то так же получится белый свет. Такие цвета (желтый - синий, красный - голубой ... ) называются комплементарными или взаимодополняющими, комплементарные цвета располагаются друг против друга на цветовом круге. Цвета при смешении которых образуется белый свет называются аддитивными (суммирующими).

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

Цветовая модель RGB

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

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

Черный цвет получается, когда интенсивность всех трех составляющих равна нулю, белый - при сложении всех цветов максимальной интенсивности. Это называется аддитивной (суммирующей) моделью Red (красный), Green (зеленый), Blue (синий).
В современных компьютерах воспроизводится 256 (от 0 до 255) значений каждого из трех цветов, следовательно общее количество возможных цветов на мониторе = 256 в третьей степени = 16,7 млн. Суммарный цвет зависит от того, какое количество каждой из цветовых компонент присутствует в изображении. Красный: R = 255, G = 0, B = 0; желтый: R = 255, G = 255, B = 0; оттенки серого (от черного к белому) при равных значениях всех трех составляющих. Белый цвет, если все значения равны 255.

Цветовая модель HSB

В основе модели Hue (тон), Saturation (насыщенность), Brightness (яркость) лежит модель RGB. Модель HSB призвана упростить работу с цветами, так как она максимально приближена к принципу восприятия цвета человеческим глазом.

Тон - спектральные цвета (чистые цвета солнечного спектра) или цветовые тона (Hue) располагаются по цветовому кругу и характеризуются положением на нем, которое определяется величиной угла в диапазоне от 0 до 360°:
- 0° соответствует красному
- 120° - зеленому
- 240° - синему
Эти цвета обладают максимальной насыщенностью и яркостью (100%).
Насыщенность (Saturation) изменяется в горизонтальной плоскости от 0 до 100%. При значении насыщенности 0% любой цвет становится белым.
Яркость (Brightness) - параметр определяющий затеммненность или освещенность тона, изменяется в вертикальной плоскости. При значении яркости 0% любой цвет становится черным.

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

Цветовая модель CMYK

При печати на бумагу наносится краска - материал, который поглощает и отражает световые волны различной длины; иными словами краску можно рассматривать как фильтр, который пропускает строго определенные лучи света, вычитая их, и отражая все остальные. При выводе цветного изображения на печать используется субтрактивная цветовая модель CMY: Cyan (голубой), Magneta (пурпурный), Yellow (желтый). В этой модели основные цвета образуются путем вычитания из белого цвета основных аддитивных цветов модели RGB. В таком случае и основных субтрактивных цветов тоже будет три: голубой - Cyan (белый минус красный), пурпурный - Magneta (белый минус зеленый), желтый - Yellow (белый минус синий).

Таким образом модель CMY обратна модели RGB и при нулевых значениях составляющих (отсутствии краски) образуется белый цвет. Смешение равных значений трех компонентов даст оттенки серого. При смешении максимальных значений трех составляющих (Cyan+Magneta+Yellow) должен получиться черный цвет. Но в природе не существует чистых красок (в них присутствуют примеси) и при смешении основных субтрактивных цветов получается грязно-коричневый цвет, поэтому для получения черного цвета и оттенков серого необходимо добавлять черную краску. Именно она добавила последнюю букву в название модели CMYK. Черный компонент сокращается до буквы K (blacK), чтобы не перепутать с синим (Blue).

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

Секреты web-графики

Как известно, 70% информации об окружающем мире человек получает через зрение. Естественно, что с появлением графических броузеров, обретя возможность добавлять к тексту изображение, Интернет получил мощнейший инструмент воздействия на своих пользователей. Являясь по своей сути той же компьютерной графикой, изображения в Web все-таки имеют ряд особенностей, на которые (и не только на них) стоит обратить внимание.

Известно, что для получения любого цвета достаточно смешать в соответствующих пропорциях всего три: красный (Red), зеленый (Green) и синий (Blue) — в английской аббревиатуре RGB. Этот принцип широко применяется в цветных фотопленках, где, изменяя степень засветки красного, зеленого и синего слоев, получают тот или иной цвет. Из цветного кино принцип RGB перешел в цветное телевидение, где цвета получаются при совмещении красного, зеленого и синего лучей разной интенсивности. Естественно, что с экранов телевизоров он перекочевал на экраны компьютерных мониторов. Так как конечный цвет является результатом суммирования, то и называется он аддитивным (additive color).

Однако при подготовке изображений на компьютере используется и противоположный способ смешивания — вычитания (subtractive color). При этом происходит удаление из белого, соответственно, негативов вышеназванных цветов — голубого (Cyan), пурпурного (Magenta), желтого (Yellow) и, для получения лучшего контраста, негатива белого — черного (blaK). В английской аббревиатуре — CMYK. Данный способ используется, прежде всего, для подготовки изображения к печати на бумаге и в Web практически не применяется. Нас же он интересует постольку, поскольку он вообще существует.

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

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

Глубина цвета определяется количеством используемых битов на пиксель (единичный элемент, можно сказать, "атом" изображения). В принципе, глубина цвета, а соответственно, и количество цветов в палитре, может быть сколь угодно большим. Но не стоит забывать, что "все хорошо в меру!". Человеческий глаз хоть и уникальный инструмент для работы с цветовой гаммой, но имеет конечную разрешающую способность (возможность различать) по цветам. Кроме того, необходимо учитывать и скорость обсчета большого объема изображения (я не говорю о больших размерах файлов — об этом немного позже) компьютером, и возможности монитора при большой глубине цвета. Отсюда приходим к максимуму — 24 бита на пиксель (8 бит на каждый цвет в RGB) или 224=16,8 млн. цветов в палитре. Однако не всегда целесообразно использовать "полную" палитру (true color) при подготовке изображения для Web.

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

Как уже отмечалось, не всегда целесообразно, использовать большое количество цветов в изображении. В режиме индексированных цветов (index color) цвета формируются не традиционным смешиванием трех "чистых" — каждому пикселю изображения присваивается индекс (отсюда и название) цвета в палитре. Причем количество их может быть разным, но не более 256. Естественно, чем меньше цветов в палитре, тем меньше и объем файла изображения.

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

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

Принцип построения растровых изображений основан на конечности разрешающей способности глаза, когда при сближении двух точек, глаз перестает их различать. Вспомните рисунки, создаваемые на заре компьютерных технологий с помощью ASCII-символов, которые можно было рассмотреть только с некоторого расстояния. Растровое изображение можно представить как массив пикселей, каждый из которых имеет свой цвет. Соответственно, растр — представление изображения (компьютер передает так любую информацию), выражаясь языком математики, методом дифференцирования (деления непрерывности на элементарные отрезки). Именно из принципа представления растрового изображения и проистекают его недостатки. Так, для изображения 300x200 пикселей при трех байтах на пиксель для RGB размер файла будет 300*200*3=180 Кбайт. Согласитесь, не каждый захочет ждать загрузки такого изображения, тем более если оно не одно. Кроме того, любая элементарная единица, будь то атом в понимании древних греков или пиксель в нашем понимании, в принципе, неделима. Отсюда невозможность масштабирования растрового изображения. Попробовав увеличить такую картинку раз этак в 10, единственное, что можно будет увидеть, — нагромождение цветных квадратиков в стиле раннего авангарда, понять смысл которого можно будет только шагов с пяти (вспомните пример с ASCII-символами) и то, если позволит экран монитора.

Достоинства растра — это прямое продолжение его недостатков. Только в нем можно получить полный доступ к каждому пикселю изображения, изменить его яркость, тон или насыщенность, поменять белое на черное. Именно на этом основаны многочисленные графические фильтры, позволяющие сделать изображение размытым или, наоборот, более резким, более или менее контрастным, тонировать. Растровые форматы используются при сканировании и захвате изображения с экрана. Растровые графические редакторы гораздо чаще используются для редактирования изображений, чем для их создания, поэтому довольно мирно уживаются Corel Draw и PhotoShop. Еще как немаловажную особенность надо отметить, что практически все графические броузеры понимают растровые изображения без подключаемых модулей (plug-in). Кроме того, практически любой векторный рисунок быстро и без искажений можно перевести в растр. Обратной же силы этот закон не имеет.

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

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

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

Но при всем многообразии графических форматов для представления изображений в Web используeтся малое их количество. Основным ограничителем здесь выступает размер файла. А потому выбор формата при подготовке изображения для Web определяется оптимальным соотношением двух взаимоисключающих параметров: размеров изображения и объема файла. Однако из теории вероятности известно, что большинство схем представления информации обладают той или иной степенью избыточности. К примеру, составляя конспект на лекциях, мы пользуемся некой системой сокращений слов и фраз, не теряя при этом смысла содержания. Этот принцип положен в основу большинства систем сжатия информации, в том числе и форматов графических файлов, используемых в Web. Однако при одинаковом принципе алгоритмы его реализации разрабатываются разными людьми, а потому имеют весьма существенные различия между собой. Более того, не стоит забывать, что каждый формат имеет и другие особенности, поэтому при его выборе следует учитывать прежде всего исполнение рисунка.

GIF (Graphics Interchange Format, формат взаимообмена графикой) разработан CompuServe Incorporated, последняя версия GIF-89a. Первоначально, как можно понять из названия, этот формат разрабатывался для передачи графической информации в потоке данных, а потому, в отличие от остальных, представляет собой последовательную организацию, а не произвольную, что позволяет использовать минимум ресурсов процессора при его распаковке. Для компрессии файлов GIF использует LZW-алгоритм сжатия, или, как его еще называют, сжатие без потерь, при этом он наиболее эффективен при больших однотонных областях с четкими границами. А так как сканирование изображения происходит по горизонтали, то и сжатие будет более эффективно при больших горизонталях таких областей. Однако GIF не способен хранить неиндексированные изображения, то есть может отображать не более 256 цветов. Эта ограниченность формата не позволяет добиться плавного перехода от одного цвета к другому, что особенно заметно при использовании градиентов и размывок. Можно, конечно, использовать прием "диффузия", но эффект "зернистости", получаемый при этом, выглядит, скорее, как стилизация, а потому не всегда оправдан в общем контексте сайта. Кроме того, при использовании диффузии увеличивается неоднородность изображения, что ведет к снижению эффективности компрессии. Обратной стороной ограниченности палитры в GIF может служить ее гибкость. Изменяя размер таблицы, а, следовательно, и количество цветов в ней, web-дизайнер получает в свои руки прекрасный инструмент для регулировки соотношения качество изображения / размер файла. Так, уменьшая в изображении размером 100x100 пикселей количество цветов с 256 (8 бит на пиксель) до 128 (7 бит на пиксель), получаем 100*100*8 — 100*100*7 = 10 000 бит экономии. Еще одной особенностью, введенной в последнюю версию формата, является создание прозрачных областей в изображениях, открывающее интересные возможности в web-дизайне. "Потоковая" природа GIF, относительно малые размеры его файлов, возможность компрессии за счет использования прозрачных областей в кадрах сделали его прекрасным инструментом для создания анимации в Web. Использование GIF целесообразно, прежде всего, для так называемых плоскоцветных изображений с четко обозначенными границами переходов между цветами, а также малоразмерных изображений типа кнопок, превьюшных картинок и т. п.

JPEG (Joint Photographic Experts Group). Разработан группой экспертов по фотографии (что видно из названия) под эгидой ISO (Международная организация по стандартам). Вообще этот формат довольно уникален тем, что использует алгоритм сжатия, отличающийся от применяемых во всех остальных графических форматах, — сжатие с потерями. Этот алгоритм ранее использовался на телевидении в схеме телевизионной трансляции США (NTSC). Основан он на все той же ограниченности человеческого зрения, неспособности глаза не замечать некоторые искажения в восстановленном изображении. На сегодня этот алгоритм является одним из самых эффективных (коэффициент сжатия достигает 1:100), однако он не очень хорошо обрабатывает изображения с малым количеством цветов и резкими границами. Вообще JPEG можно назвать противоположностью GIF. Он позволяет отображать 24-битную палитру, т. е. все 16,8 млн. цветов, что дает возможность отображать градиенты с фотографической точностью, но при этом не может иметь прозрачных областей. Однако этот формат таит в себе одну особенность, которую нельзя не учитывать. При повторном сохранении изображения в JPEG он повторно запускает алгоритм сжатия, естественно, с ухудшением качества. Поэтому сохранять изображение в нем следует только после окончательной обработки.

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

Однако и векторные форматы все чаще обращают на себя внимание web-дизайнеров. В последнее время весьма популярным стал формат Shockwave Flash, разработанный фирмой Macromedia. Обладая такими преимуществами векторных форматов, как масштабируемость и относительно небольшой объем файла, он все-таки не является чисто графическим. Инструментарий для рисования в программе Macromedia Flash Direct ближе к растровым редакторам, нежели к векторным, а способность создавать анимации, озвучивать их, заставлять реагировать на перемещение мыши и способность работать с гиперссылками делают Flash похожим на мультимедийный формат. В качестве отдельных элементов сайта Flash-заставки используются в основном как интерактивные баннеры в некоторых рекламных сетях. Такого вида баннерам пророчат большое будущее из-за их большей возможности влиять на пользователей Сети, нежели классических, выполненных в GIF. Однако гораздо чаще этот формат находит применение для создания целой страницы или большей ее части (классическим примером, на мой взгляд, является "Диснеевский" сайт y.com/).

Камнем преткновения для Flash является наличие дополнительного модуля для его просмотра, который хоть и распространяется бесплатно, но при весе 0,24 М и необходимости загрузки через Сеть может отбить желание просматривать Flash-заставки. Но появление встроенного модуля уже в 4.5 версии "Коммуникатора" и обещания Microsoft сделать аналогичное и в IE 5.0+ может вполне выдвинуть Flash в лидеры среди графических форматов для Internet и несколько изменить само представление о web-дизайне.

Не остались забытыми и трехмерные объекты. Для их создания в Интернете в ноябре 1994 года состоялась презентация VRML 1.0 (Virtual Reality Modeling Language — язык моделирования виртуальной реальности). Последняя версия VRML 2.0 позволяет создавать сложные виртуальные миры со звуковыми эффектами. Для написания файлов этого формата может быть достаточно простого текстового редактора (подобно HTML, они не требуют дальнейшей компиляции), но существуют также специальные программы, помогающие этот процесс визуализировать и автоматизировать. Кроме того, некоторые 3D-пакеты поддерживают формат VRML 2.0. Для просмотра виртуальных миров необходимы дополнительные модули, включенные в состав последних версий NC и IE. Но при всей своей привлекательности 3D-миры пока еще не нашли широкого применения. Основными недостатками являются невозможность встраивания таких миров в HTML-страницу и, соответственно, "переплетение" с общим дизайном сайта, в отличие, например, от Flash. Другой неприятной особенностью является довольно большое количество вычислительных ресурсов компьютера для качественного рендеринга (визуализации) трехмерной сцены.

Говоря о графике в Web, обычно не упоминают о шрифтах как графических объектах. Связано это прежде всего с тем, что до недавнего времени в HTML-страницах предполагалась весьма ограниченная возможность управления параметрами шрифтов. Но уже в спецификации CSS level2 вводится понятие встраивания шрифтов, открывающее возможность использовать не только стандартные. Существующие программы позволяют создавать даже символьные шрифты, получая вместо букв монохромные масштабируемые изображения. Но и эту идею не обошла "война броузеров". Разная реализация "подгружаемых" шрифтов в NC и IE, к сожалению, не позволяет использовать эти возможности в полной мере.

Оптимизация изображений в формате GIF

Формат GIF сильно отличается от JPG и использует совершенно другие методы оптимизации. Он предназначен для хранения изображений с количеством цветов не более 256, поддерживает палитру и использует сжатие без потерь по методу LZW.

Методы оптимизации можно разделить на следующие типы (исключая оптимизацию анимированных GIFов):

уменьшение количества цветов
оптимизация палитры изображения
стилизация изображения
искажение размеров изображения
фрагментарная оптимизация
оптимизация "прозрачных" изображений
использование чересстрочной развертки

Теперь разберемся по-порядку с этими методами и приемами оптимизации.

Уменьшение количества цветов

Для большинства изображений, не являющихся фотографиями, количество необходимых для воспроизведения цветов часто меньше 256. Лишние цвета можно убрать из изображения, тем самым уменьшив его размер. Это возможно потому, что GIF поддерживает размер палитры меньше 256 цветов. Теоретически, мы можем задать любое число цветов палитры в диапазоне 2-256, например, 37 цветов или 101. Практически же, количество цветов в изображении выбирается из ряда: 2, 4, 8, 16, 32, 64, 128, 256. Это связано с тем, что для представления цвета используется всегда целое число бит, а приведенный выше ряд является рядом максимального количества цветов при использовании от 1 до 8 бит на пиксель (1bpp-8bpp). В случае, если мы используем, допустим, только 101 цвет в рисунке, для сохранения пикселя все равно будет использовано 7 бит. Поэтому при оптимизации количества цветов нужно ориентироваться на приведенный выше ряд. Это позволит получить более качественную картинку.

Оптимизация палитры изображения

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

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

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

При оптимизации конкретного изображения задача состоит в том, чтобы выбрать наиболее оптимальное количество цветов в палитре. Тут уместно сказать о способе увеличения количества используемых цветов при их недостатке, т.н. дизеринг (Dithering). Например, у нас есть 16 стандартных чистых цветов, а нам нужен отсутствующий оранжевый цвет. В таком случае, мы можем составить его из красных и желтых точек, разместив их в шахматном порядке. Издалека нашим глазам покажется, что это сплошной оранжевый цвет. Это классический пример дизеринга; его использование при преобразовании изображений может дать очень хорошие результаты. Но с точки зрения оптимизации размеров файла происходит совсем обратное. Дизеринг может увеличить размер файла, причем довольно существенно (он может стать больше, чем до оптимизации :). А все дело в методе хранения изображения форматом GIF. Изображение перед сохранением на диске подвергается сжатию методом LZW, а основная особенность этого метода заключается в том, что сжатию лучше всего поддаются области, заполненные однородным цветом, и хуже всего - области, состоящие из набора разноцветных точек. Дизеринг же как раз и основан на том, что получает недостающие цвета путем "перемешивания" точек разных цветов. Поэтому к оптимизации при помощи дизеринга нужно относиться очень аккуратно и по-возможности не использовать.

Стилизация изображения

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

Искажение размеров изображения

Следующий метод оптимизации основан на искажении размеров рисунка. Его нельзя применять к обычным рисункам, но он очень хорошо подходит для рисунков, состоящих из элементов типа линий и однородных областей. Допустим, нам понадобился рисунок, представляющий из себя черный квадрат (Малевича ;) размером 100x100 пикселей. Для уменьшения размера файла сделаем т.н. однопиксельный (т.е. размером 1x1 пиксель) GIF черного цвета. Как обычно, вставим его в HTML-файл, но размеры картинки укажем те, что нужны нам (100x100). Броузер сам растянет наш пиксель до нужных размеров, а мы получим большую экономию :). Подобным же образом можно использовать однопиксельные GIFы других цветов, но наибольшую пользу может принести прозрачный однопиксельный GIF. При помощи него удобно задавать пустышки на страницах, абзацные отступы, фиксировать минимальную ширину (высоту) таблицы и делать другие полезные вещи.

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

Фрагментарная оптимизация

Фрагментарная оптимизация применяется в случае, если у нас есть некоторое большое изображение, содержащее сильно отличающиеся по количеству цветов области. В этом случае изображение можно разрезать на фрагменты и поместить их в таблицу, тогда в броузере оно будет выглядеть как единое целое. Теперь каждый фрагмент исходного рисунка мы оптимизируем отдельно. Для фрагментов, содержащих мало цветов, вполне может хватить палитры в 8 или 16 цветов, а для богатых цветами фрагментов можно использовать полную палитру в 256 цветов или сохранить в формате JPG. Этот способ позволяет уменьшить объем, занимаемый исходным файлом, примерно раза в 2-3 (в зависимости от конкретного изображения); кроме того, изображение будет загружаться более равномерно, т.к. все фрагменты будут качаться параллельно. Хотя, если количество фрагментов превысит 10, то возможного выигрыша и не получится, т.к. каждый фрагмент должен будет хранить свою копию палитры и служебной информации.

Оптимизация "прозрачных" изображений

Формат GIF позволяет сохранять т.н. "прозрачные" изображения. На самом деле, GIF не поддерживает прозрачность в изображениях (т.н. альфа-канал), он лишь позволяет назначить одному любому цвету в палитре атрибут прозрачности. Когда броузер рисует на экране такой GIF, то, встречая "прозрачный" пиксель, он просто игнорирует его и не печатает на экране. Само по себе это хорошо, но в случае использования метода сглаживания краев изображения (anti-aliasing) и последующего сохранения в формате GIF возникает проблема появления ореола вокруг прозрачного изображения в случае, если GIF показывается на фоне, отличном от того, на котором происходил anti-aliasing. Это прямое следствие отсутствия поддержки канала прозрачности форматом GIF. Единственным способом уменьшения проявления этого эффекта является назначение прозрачным пикселя по цвету, близкому к фону, на котором будет использоваться GIF, и проведение anti-aliasing"а на этом же фоне.

Использование чересстрочной развертки

И, наконец, еще об одной особенности формата. Версия GIF89a позволяет сохранять файлы с использованием чересстрочной развертки. При использовании этого способа строчки, составляющие изображение, перемежаются, и при загрузке броузер вначале показывает каждую 8-ую строчку, потом каждую 4-ую, каждую 2-ую, и, наконец, загружается полное изображение. Это немножко похоже на жалюзи :). При этом посетитель вашей странички сможет понять, что же нарисовано на данной картинке, не дожидаясь ее полной загрузки, что очень удобно. Так что, если у Вас нет на то иных причин, записывайте все GIF-файлы с использованием чересстрочной развертки.

Что такое cookies

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

Как включить куки

Internet Explorer 4:

В меню View (Вид) выберите пункт Internet Options (Свойства обозревателя) и откройте вкладку Advanced (Дополнительно). Установите Always accept cookies (Всегда принимать cookies).

Internet Explorer 5:

В меню Tools (Инструменты) выберите пункт Internet Options (Настройки интернета) и откройте вкладку Security (Безопасность). Выберите зону Internet (Интернет) и нажмите Custom Level (Персональные настройки). Установите для Allow cookies that are stored on your computer (Все cookies сохраняются на вашем компьютере) флажок Enabled (Включить).

Internet Explorer версии 5.ххх:

В меню Tools (Сервис) — Internet Options (Свойства обозревателя) выберите вкладку Security (Безопасность), в поле «Уровень безопасности» нажмите на кнопку Custom Level (Другой) и найдите пункт Allow cookies that are stored on your computer (Разрешить использование файлов cookie) и Allow per-session cookies и установите флажки Enable (Включить).

Internet Explorer 6:

В меню Tools (Сервис) выберите Internet Options (Свойства обозревателя), откройте вкладку Privacy (Конфиденциальность), и нажмите на кнопку Advanced (Дополнительно). Установите флажок Override automatic cookie handling (Перекрыть автоматическую обработку файлов cookie) и оба флажка Accept (Принимать).

Mozilla 1.6 и выше:

В меню Edit (Редактирование) выберите пункт Preferences (Настройки ) / Privacy & Security (Конфиденциальность и безопасность) и в разделе Cookies (Временные настройки) нужно отметить Enable All Cookies (Загружать все временные файлы) или Enable cookies based on privacy settings.

Firefox 1.0 и выше:

В меню Tools (Инструменты) выберите пункт Options (Настройки ) / Privacy (Конфиденциальность), раздел Cookies (Временные настройки). Отметьте Allow sites to set cookies.

Opera 7.53 и выше:

В меню Tools (Инструменты) выберите пункт Preferences (Настройки), раздел Advanced (Дополнительно). Зайдите в пункт Cookies (Временные настройки) и выберите Accept all normal cookies (Принимать все cookies).

Netscape:

В меню Edit (Редактирование) выберите пункт Preferences (Настройки). Зайдите в Advanced (Расширенные настройки) и в разделе Cookies (Временные настройки) отметьте Accept All Cookies (Загружать все временные файлы).

Blog