Текст книги "Искусство оформления сайта. Практическое пособие"

Глава 2. Веб-дизайн как технология

2.1. Собираем инструментарий

Живописцу для плодотворной работы нужны правильно подобранные кисти, веб-дизайнеру – «железо» и «софт». Начнем с описания аппаратного обеспечения для ПК, отвечающего задачам веб-дизайна. Прежде всего, поговорим о «мозге» компьютера, то есть о центральном процессоре. Как вы помните, он находится в системном блоке и управляет всеми устройствами, к системному блоку подсоединяемыми (так называемая периферия), по программе, написанной людьми. Проверьте технические параметры вашей ПЭВМ: скорость действия безупречного процессора должна составлять 1,5–1,7 ГГц (скорость электронных устройств измеряется в герцах, поскольку выражается через частоту передачи данных). Подобную скорость развивают в первую очередь Pentium 4 и Athlon.

При использовании нескольких «тяжелых» графических пакетов показано применять процессор Pentium 4 со скоростью 2,0 ГГц. То есть такая высокая скорость целесообразна при создании сложных, объемных рисунков (3D графика). Но в целом веб-дизайн – не место для 3D, вряд ли вам предстоит столкнуться с ней на практике. Когда вы станете мастером, то будете бежать от объема без оглядки и отговаривать своих клиентов от использования объемных картинок. Почему? Во-первых, подобные рисунки отягощают сайт, замедляют его загрузку и, как следствие, делают непривлекательным для визитеров. Во-вторых, изображение на экране все равно плоское, двухмерное. Трехмерные картинки возможны лишь в голографических технологиях лазерной живописи, а значит, 3D – это оптическая иллюзия. И такая иллюзия по-разному выглядит на разных мониторах, причем иногда принимает совершенно нелепый вид и даже мешает гостю пользоваться интерфейсом.

Ничуть не менее важен объем оперативной памяти RAM и свободной памяти (емкости) винчестера. Оперативной называется краткосрочная память ПК, которая представляет собой способность «держать в уме» сведения, находящиеся непосредственно в процессе обработки. Если сравнивать машину с человеком, то Юлий Цезарь обладал колоссальной оперативной памятью, поскольку якобы умел делать семь дел одновременно. Кто-то может делать только два дела одновременно: обрабатывать картинку в Фотошопе и строить планы на выходные. Кое-кто не умеет даже этого, у таких людей «оперативная память» хуже. Свободная память винчестера – это весь объем сведений, хранящихся на ПК (винчестер в данном случае – не американская винтовка, а жесткий магнитный диск). У человека винчестеру соответствует долгосрочная память, куда откладываются воспоминания обо всех событиях в жизни, обо всех прочитанных книгах, обо всех скачанных с Интернета файлах и т. д.

Минимальные требования к вашему компьютеру – более 250 МБ оперативной памяти и свыше 1 ГБ свободного места на диске. Откуда узнать такие вещи? Из бумажек, которыми вас снабдили в магазине. Или можно спросить у самого ПК. Запустим компьютер, а когда он загрузится, через меню «Пуск» выйдем к «Панели управления», на которой кликаем на надпись «Система и ее обслуживание» (названия на разных машинах могут немного разнится, но не думаю, что принципиально). Здесь записывается марка процессора, его быстродействие и объем RAM. О количестве свободного места сообщит Проводник: откройте его и наведите курсор сначала на диск С, а потом на диск D – появятся поочередно таблички с указанием емкости этих двух секторов винчестера.

Заметим, что иногда полезно осведомляться о памяти у самого ПК, поскольку продавцы при заполнении бумажек могут либо сделать какую-нибудь ошибку, либо просто соврать. Причем не из своекорыстных намерений, а просто по невежеству. К сожалению, до сих пор великое множество людей, работающих с ПК, никак не могут привыкнуть к тому факту, что двоичная система счисления, основанная на нуликах и единичках, принципиально отличается от десятичной. Заполняя технические бумажки, продавец думает, будто гигабайт памяти равен не 1024 × 1024 × 1024 = 1 073 741 824 байтам, как оно есть на самом деле, а ровно миллиарду (10⁹) байтов. Отсюда берутся неточные цифры в технической документации, вводящие юзера в заблуждение.

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

Сразу отвечу на вопрос почему. Дело в том, что веб-дизайнеру не столь важен визуальный контроль цвета. На разных мониторах цвета всегда передаются по-разному, вот почему вашу страничку другие пользователи все равно не смогут увидеть такой, как вам хотелось бы. Решить эту проблему хотя бы частично позволяет не настройка экрана и не калибровка, а использование при обработке рисунков GIF и JPEG режима «for Web», когда используемые цвета изображения кодируются так, чтобы мало-мальски прилично отображаться на любом дисплее. Так, рекомендуется пользоваться цветовыми палитрами Safe Web Color Pallete, считающимися безопасными для web. Кроме того, в наиболее популярном графическом редакторе Фотошоп (Adobe Photoshop), кажется, начиная с версии 7.01, существует режим сохранения обработанной картинки Save for Web («Сохранить для Интернета»; находится юзером через меню File – «Файл», см. рис. 9). Впрочем, это мало влияет на цвет, в большей степени на сжатие рисунка.

Рис. 9. Сохранение рисунка для Web

В случае покупки монитора с кинескопом нелишне будет обратить внимание на тип трубки и размер маски. Предпочтением пользуются типы кинескопов вроде Black Matrix, Black Planar и Black Trinitron. В последнее время среди продавцов появилась мода рекламировать сверхплоские экраны указанных марок. Нужно знать, что плоский экран для трубки – недостаток, небольшая кривизна физически необходима электронному лучу для создания наиболее качественного изображения. Поэтому покупаться на такую рекламу нельзя. Зато сверхчерные кинескопы (Black) действительно обеспечивают высокое качество изображения. Теперь о теневой маске. Это конструкционный элемент электронно-лучевой трубки, обеспечивающий нормирование растра. Сегодня невыгодно пользоваться кинескопами с размером маски свыше 0,28 мм. В оптимуме нужно брать дисплей с маской кинескопа 0,26-0,28 мм.

Экран любого – как жидкокристаллического, так и классического – дисплея может иметь разное разрешение, измеряемое в пикселах[10]10
  Пиксел (пкс) – точка изображения, кодирующая какой-то один цвет


[Закрыть] и задаваемое свойствами маски и люминофорного покрытия. Наиболее часто встречаются разрешения 640 × 480, 800 × 600, 1024 × 768, 1260 (1200) × 800, 1280 × 1024. Сразу скажем, что 640 × 480 и 800 × 600 безнадежно устаревают, полноценная работа с подобным разрешением экрана невозможна. Умный веб-дизайнер вынужден приобретать дисплей с максимально возможным разрешением и научиться копаться в настройках своего ПК, чтобы периодически менять показатель разрешения: с максимума понижать до минимума. Это позволит увидеть готовый сайт глазами других пользователей – как самых «продвинутых», так и безнадежно «отсталых».

Перейдем к CD- и DVD-ROMам. Человек, который сделал веб-дизайн своим бизнесом, обязан вложить деньги в ПК и приобрести для него два накопителя – и CD-, и DVD-ROM. Дело в том, что на оба будут приходиться высокие нагрузки, так что если использовать только DVD, то устройство долго не протянет. DVD понадобится для работы с тяжелыми файлами, в особенности видео, для создания коллекций и хранения наработанных материалов, от которых приходится периодически очищать винчестер. СD полезен в повседневной рутине: записи готовых проектов заказчику, инсталляции программок и т. д.

Выбор мышки и ее коврика – тоже занятие непростое. Здесь важно учесть ряд специфических моментов, одним из которых является баллистический эффект, как называется зависимость между точностью позиционирования и скоростью движения устройства. Большинство современных мышей обладают баллистическим эффектом в пределах от 200 до 900 DPI, причем «вебист» должен отдавать предпочтение мышам с наиболее высоким DPI. При создании игровых сайтов, например он-лайн казино, показано использовать мыши со значением баллистического эффекта 900-1000 DPI и выше.

Далее стоит принять во внимание разницу между оптическими и «шариковыми» (оптико-механическими) мышами. Механические мыши неудобны тем, что их нужно периодически открывать и чистить. Оптические– тем, что для их эксплуатации желательно использовать специальный коврик (с другим они станут работать хуже). Повреждение коврика для оптической мыши означает появление неполадок в ее работе. Впрочем, и механическим мышам желательно покупать особые коврики – «махровые», поскольку такие увеличивают сроки службы устройства. Вместе с тем оптическая мышь обладает большими достоверностью и надежностью.

Добавим к сказанному, что в последнее время стало модным снабжать продаваемых мышат комплектом экзотических драйверов (программок), расширяющих возможности устройства. Во-первых, такие драйверы не всегда совместимы с «родным» программным обеспечением ПК. Во-вторых, они занимают большой объем памяти, который лучше забить чем-то более полезным. А в-третьих, драйвер мыши по-настоящему исправно работает, если является резидентской («родной») программой.

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

> когда он не используется, на его схему все равно подается напряжение, что приводит к износу устройства;

> он лишен светодиодных индикаторов LED, что снижает возможности контроля за его состоянием;

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

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

2.2. Основное программное обеспечение

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

Операционная система (ОС). Так называется пакет программ, создающих среду для работы на ПЭВМ в целом. Для профессионального веб-дизайна желательно использовать Windows-XP или Windows Vista, хотя допустимо использовать также Windows-2000, в особенности на начальном этапе изучения дизайнерских технологий. Более древние ОС, вроде Windows-98, могут создавать проблемы.

Блокнот. Другой наш верный друг и соратник – это Блокнот. Многие юзеры, далекие от работы с сайтами, незаслуженно презирают его, как «никчемную» программу. Разумеется, он не обладает такими возможностями в работе с текстом, как знаменитый Microsoft Word, однако для веб-дизайнера служит отличным вспомогательным инструментом. Ни от какой другой программы такой помощи, как от Блокнота, особенно при быстром внесении правки в уже сверстанные веб-странички и при прочтении html-кода чужих веб-страничек. Подробнее мы поговорим об этом чуть позже.

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

Архиваторы и распаковщики. Эти программы сжимают тяжелые файлы в легкие архивы, а затем эти архивы распаковывают. Настоятельно рекомендую WinRAR или Dragon UnPacker, хотя слышал и о прочих хороших архиваторах. Напомню, что при архивации файлов для стороннего пользования желательно выбирать формат *.zip, поскольку он имеет наиболее широкое распространение и определенно окажется по зубам компьютеру вашего гостя. На сайте архивы представляют книги и прочие материалы, подготовленные для скачивания.

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

2.3. Дизайнерские программы

А теперь перейдем к знакомству с программами, непосредственно связанными с конструированием сайтов. Наш добрый знакомый Web Page Maker, над которым нам еще придется немало повозиться, относится к семейству визуальных редакторов, или W.Y.S.I.W.Y.G., то есть «Что видишь – то и получаешь» (What You See Is What You Get). Подобные программки наилучшим образом подходят новичку, поскольку он явно видит перед собой, что представляет собой его будущий сайт. Мной был выбран Web Page Maker как наиболее наглядный и удобный. Однако кроме него есть еще, например, Studio Line Web. Если он оказался на вашем диске, загрузите его и попробуйте работать с ним. Но лучше все-таки не держаться старого курса. Web Page Maker предельно удобен потому, что позволяет оперировать рабочим пространством странички таким образом, словно мы рисуем в Paint или CorelDraw.

W.Y.S.I.W.Y.G. имеют много минусов, но на начальном этапе следует пользоваться ими, потому что W.Y.S.I.W.Y.G. – это быстро, эффективно, наглядно. С редактором W.Y.S.I.W.Y.G. вы растете как веб-художник.

Программки из семейства W.Y.S.I.W.Y.G. превосходят по потенциалу такие средства для создания и редактирования веб-страничек и даже веб-узлов, как старая добрая Microsoft FrontPage и созданная на ее основе, а потому гораздо более совершенная Microsoft Expression Web. Со временем, когда ваше мастерство значительно возрастет, программки типа W.Y.S.I.W.Y.G. будут нужны вам лишь для того, чтобы делать шаблоны, заготовки страничек. Дорабатывать эти заготовки, доводя страничку до совершенства, вы будете с помощью Microsoft Expression Web или невероятно популярной и, пожалуй, наиболее продвинутой из всех Macromedia Dreamweaver.

По мере дальнейшего роста дизайнер переключается на редакторы HTML, где визуализация почти полностью исключается. Здесь приходится работать только с кодами и скриптами, что имеет несомненный плюс. Дело в том, что на разных компьютерах странички вашего сайта будут открываться по-разному, а потому «что видите» на домашней машине, того «никогда не получите» на чужом ПК. Есть и другая причина реже использовать программы типа W.Y.S.I.W.Y.G.: такого рода конструкторы пишут подчас много лишней информации, чем утяжеляют файл и затрудняют его последующую обработку вручную. И наконец, наделить сайт определенными свойствами и добиться максимальной унифицированности его оформления посредством Web Page Maker и многих аналогичных программок оказывается просто нереально.

Благодаря виртуальным редакторам любой скромный маркетолог, имеющий художественное или дизайнерское образование, сможет создать настолько привлекательный сайт, какого никогда не добьются все «вебисты» вместе взятые, несмотря на блестящее знание ими языка HTML и прочих «прибамбасов». Здесь не утверждается вторичность техники: сначала идеи, экспериментирование, смелость духа, дерзание и немедленное воплощение замыслов в жизнь. А уж потом занудная техническая шлифовка. Гость вашего ресурса, если только он не из братии вездесущих «вебистов», все равно не узнает и не захочет узнать, насколько глубоки ваши познания в программировании.

Чем пользуюсь лично я? Всегда и только – комбинацией программ. Для достижения большой скорости работы начальная верстка выполняется в Web Page Maker или, при высоких требованиях к проекту, – в Microsoft Expression Web. Для экспериментирования, опробирования новых тем, тренировки своего вкуса удобно применять Page Mill, Studio Line, Front Page и некоторые аналогичные программки. Доработка html-кода выполняется в любом приличном редакторе, мне более всего нравятся HTML Pad, Ace HTML Pro и HTML Builder. При этом Ace HTML Pro обеспечивает визуализацию логических связей в языке HTML и облегчает восприятие команд. HTML Builder создает по указке первоклассные шаблоны под команды, которые нужно не исправлять, вбивая свои данные, а заполнять (места для ваших данных подсвечены). HTML Pad скромен, в нем ничто не отвлекает внимания от кода. Перед завершением проекта полезно свежим взглядом просмотреть код страничек в Блокноте.

Одним словом, выбор программы всегда определяется двумя факторами – спецификой проекта и персональными привычками мастера. Завершая обзор «софта», скажем несколько слов о флэш-технологиях. Под этим термином значится технология создания высокодинамичных элементов сайта, в особенности элементов управления, в том числе меню. Так, меню из подвижных картинок есть продукт флэш-«софта». Наибольшей популярностью среди «вебистов» пользуется Macromedia Flash, признанная лучшим на сегодняшний день пакетом программ для реализации проектов Flash. Программа работает с форматами HTML, музыкой MP3, видео в форматах MPEG, DV (Digital Video), MOV и AVI.

Наряду с ней есть программы попроще, которые помогут новичкам быстро освоить некоторые простые флэш-эффекты. Такова Cool Button Tool, предназначенная для разработки милых кнопочек, навигационных панелей и меню (кстати, при острой потребности предельно быстро создать комплект кнопок идеально подходит Liatro Button Maker). Продвинутым дизайнерам не помешает изучить 3D Flash Animator, который предназначен для создания 3D-моделей и анимации во флэш. Простым, но вместе с тем полноценным аналогом Macromedia считается Adobe Live Motion, с которой следует познакомиться поближе, когда вы надумаете написать Web-игру. Для быстрого создания Flash-эффектов на сайты рассчитана Coffee Cup Firestarter, в которой удобно и легко конструировать Flash-заставки, меню, логотипы и многое другое. Программа располагает полсотней встроенных эффектов. И конечно, новичку стоит опробовать Insane Flash Animator – очень легкую и забавную программку, для работы в которой не нужно быть ни программистом, ни художником.

2.4. Программы для работы с изображениями

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

Редакторы различаются на векторные и растровые, в зависимости от типа графики. Веб-странички может украшать только растровая графика, в которой изображение строится из множества точек, как в газетном фото (в векторной – из геометрических линий). Несмотря на это, веб-разработчику не раз приходится иметь дело с графическими редакторами вроде популярного CorelDraw, например, для предварительного выполнения рисунка либо для составления эскиза страницы. Рисунок, выполненный в Кореле, легко экспортировать в формат растровой графики, причем желательно не GIF, а JPEG…

Названные форматы являются рабочими для веба. Формат JPEG (Joint Pictures Encoding Group – группа кодирования неподвижных изображений) кодирует в пределе до 2²⁴ = 16 777 216 цветов! Но, конечно, и весит он очень много. Вот почему когда цвета однообразны и немногочисленны, выгоднее использовать формат GIF (Graphic Interchange Format – формат обмена графикой), палитра которого включает лишь 256 цветов.

Из растровых редакторов самым мощным надо назвать упоминавшийся ранее Adobe Photoshop (Фотошоп). Эта программа удобна для обработки рисунков в формате *.jpg с их последующим экспортом в GIF при необходимости. Приложение к Фотошопу ImageReady позволяет не просто создавать гифы, но еще и делать их подвижными. Впрочем, число аниматоров растет день ото дня, так что юзер имеет широкий выбор. Некоторые создатели-аниматоры делают ставку на простоту и интуитивность интерфейса (Babarosa Gif Animator), другие – на расширенные возможности при работе с палитрой (Gifanim), третьи – на приспособленность анимации именно к веб-проектам (GIF Construction Set Professional), четвертые – на изготовление отдельных гиф-элементов сайта, например кнопочек (Active GIF Creator). Одной из смелых программ является CyD GIF Studio Pro, которая не только оптимизирует графическую палитру в ходе создания gif-анимации, но и умеет работать со сканером, а заодно свободно переводит в гифы большинство известных графических форматов: BMP, JPEG, PIC, PCX, TRGA, RGB, CEL, TIFF, PCD, PSD, PDD.

Из прочих программок нужно назвать «2D And 3D Animator», посредством которого создаются 2D фоновые рисунки и 3D (объемные) баннеры и кнопки для Web-страниц. Другая ценная программа, в которой, кстати, успешно совмещаются векторная и растровая графика, – Corel Paint Shop. Она легко устанавливается и еще легче эксплуатируется. В этой программке быстро и просто создаются за счет многочисленных шаблонов и инструментов весьма оригинальные картинки, которые могут с успехом украсить немало сайтов.