Лекция 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. Однако гораздо чаще этот формат находит применение для создания целой страницы или большей ее части (классическим примером, на мой взгляд, является "Диснеевский" сайт http://www.disney.com/).Камнем преткновения для Flash является наличие дополнительного модуля для его просмотра, который хоть и распространяется бесплатно, но при весе 0,24 М и необходимости загрузки через Сеть может отбить желание просматривать F ^ Обзор редакторов для верстки веб-страниц Существует много инструментов для верстки веб-страниц, с каким из них будете работать вы - выбирать вам же. Я рекомендую вам опробовать разные редакторы, и только тогда уже решать, с каким вам лучше работать. В этой статье я дам краткий обзор по наиболее популярным редакторам, чтобы помочь вам сориентироваться. Кроме того я приведу полезные ссылки по каждой программе: сайт разработчика, где можно приобрести/скачать в интернет этот редактор, ссылки на обучающие программы и инструкции по работе с редактором. Редакторы для верстки веб-страниц бываю двух типов: визуальные и текстовые. Визуальные редакторы не требуют от вас знаний html, css и прочих технологий для разметки страниц. В визуальном редакторе вы располагаете различные элементы вашего сайта, как будто на листе бумаги, а редактор пишет за вас код самостоятельно. Именно