Инструментарий

Вводная часть

4. Смешанная клиентско-серверная технология AJAX, при исполь­зовании которой клиент (браузер) и сервер обмениваются данны­ми без перезагрузки страницы (в отличие от языков серверных сценариев), что ускоряет работу.

5. Встраиваемая растровая графика. Современные браузеры воспри­нимают изображения в форматах JPG, GIF и PNG. Поддержка формата BMP, похоже, ушла в прошлое. Сочетание (X)HTML - и CSS-разметок с графикой и составляет основу верстки и дизай­на большинства страниц.

6. Технология Flash (+ язык ActionScript). Используется как для ани­мированных векторных графических вставок в отдельных фраг­ментах веб-страниц, так и для построения целых сайтов. (Когда готовилась книга, компания Microsoft выпустила функционально подобную технологию Silverlight.) Собственно векторная графика на сайтах (например, формат SVG) поддерживается ограниченно.

7. Технология апплетов Java. Была популярной, поскольку позволя­ла создавать интересные визуальные эффекты. Ныне использует­ся редко, например, для интерактивных карт.

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

Любая из этих технологий — это медаль с двумя сторонами. Можно ужасно писать HTML-код. Заставлять при помощи активных сценариев текст моргать и прыгать по странице. С помощью серверных языков делать спам-рассылки. Ставить на страницы картинки, оптимизированные ско­рее для печати в глянцевом журнале (по весу), и побольше Java-апплетов, которые в половине браузеров не будут загружаться. Делать сайт целиком на ААХ’е, чтобы навигация по нему была ужасной. Флэш-ролики (толь­ко последней версии Flash) делать не меньше двух мегабайтов только ради того, чтобы по экрану изредка проезжал автомобиль. Наконец, ставить на компьютер посетителя вредоносные программы.

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

12

Инструментарий

0.2

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

Для написания кода существует, наверное, наибольшее коли­чество редакторов. Среди общеизвестных монстров — Adobe GoLive, Microsoft FrontPage, Macromedia Dreamweaver и Homesite (все коммер­ческого типа). Общий их плюс для начинающих творцов и одновремен­но общий минус в том, что они автоматически генерируют код, явля­ясь редакторами визуального типа (или типа WYSIWYG, сокращение от «What you see is what you get» — «Что видишь, то и получаешь»). Тек­стовые блоки, иллюстрации и иные компоненты веб-страницы мож­но перетаскивать по рабочей области, работая, как в графическом ре­дакторе. Как результат — автоматически генерируется код, чаще всего пригодный для очень ограниченного набора браузеров (так, сложная верстка в Microsoft FrontPage позволяет генерировать код, корректно обрабатываемый только браузером Microsoft же Internet Explorer). Кро­ме того, чаще получается только один тип верстки — жесткий, или фик­сированный, а это далеко не всегда приемлемо.

Для профессионального веб-дизайнера намного важнее, чтобы программа позволяла писать код вручную, выполняя только рутинные и вспомогательные операции, например, автозамену, подсветку разных компонентов кода разными цветами, нумерацию строк кода, свертку блоков, отладку сценариев, сообщения об ошибках и т. п. В этом слу­чае кодер получает намного больше контроля за конечным результатом, поскольку программа не «решает» за него. Отличие таких редакторов «блокнотного типа» от визуальных не только в том, что основной ком­понент программы — это поле для ввода текста, но и в том, что в них нет встроенного интерпретатора кода. Например, Homesite и Dreamwever генерируют внешний вид страницы, основываясь на внутренних ин­терпретаторах (средствах отрисовки страниц), а текстовый редактор EditPlus Text Editor (тоже коммерческий) при установке в систему поз­воляет открывать написанные страницы в тех браузерах, которые поль­зователь укажет в настройках.

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

Вводная часть

Точными средствами визуального редактирования). Остальные разли­чия кроются в наборах функций.

Так, упоминавшийся EditPlus (его я считаю самым удобным, но это субъективно) позволяет, не выходя из программы, создавать и редак­тировать системные файлы для работы с любым языком программиро­вания, даже созданным по ходу дела. AceHTML обладает встроенными справочниками по основным языкам разметки и сценариев и по тех­нологии серверных вставок SSI, а также позволяет работать не только с внутренним интерпретатором для отрисовки результата выполнения кода, но и с внешними браузерами, и хранит множество DHTML-заго­товок. Cool Page обладает большим количеством встроенных шаблонов. А вот захотите ли вы пользоваться симпатичным и простым, но функ­циональным Kiss HTML Editor’ом, если узнаете, что его название ни­как не связано с романтикой поцелуев, а расшифровывается как Keep It Simple Stupid («Делай проще, глупый»)? Из бесплатных популярных ре­дакторов текстового и смешанного типа стоит также отметить CoffeCup Free HTML Editor («сайт за чашкой кофе») и 1st Page («первая страни­ца»). Из менее известных визуальных редакторов можно отметить, на­пример, Namu6, PersonalWebKit, Web Office и MoreMotion Web Express (по описанию — редактор, позволяющий разрабатывать сайты и их страницы даже тем пользователям, которые не знакомы с HTML, что уже нонсенс). Вред и польза таких редакторов в том, что они позволя­ют делать продукты разной степени полезности без знания собственно механизмов создания этих продуктов. Вред — потому что из поля зре­ния уплывает множество важных факторов, а польза — в возможности не тратиться на дорогих и циничных веб-дизайнеров при необходимос­ти быстро разместить нужную информацию в сети. Шаблоны веб-стра­ниц в этих программах аккуратны, но слишком просты и годятся только для непритязательных разработчиков и их заказчиков.

Чаще всего подобные редакторы, кроме чисто визуальных, спо­собны работать с несколькими языками (зачастую в одном файле). Од­нако есть редакторы, предназначенные только для создания и редакти­рования таблиц стилей (CSS, например, Top Style или CSS Magic) или обработки XML-документов (к примеру, Microsoft XML Notepad). С од­ной стороны, удобно работать с минимальным набором многофункци­ональных инструментов, не загромождая рабочее пространство, с дру­гой — если во главу угла ставится, к примеру, только программирование на PHP, то, возможно, стоит установить специализированный редактор именно для работы с этим языком.

Отдельно стоит отметить, что редакторы не со встроенными бра­узерами удобны более корректной работой с активными сценариями. Дело в том, что у каждого браузера достаточно много особенностей в интерпретации сценариев на JavaScript, а язык VBScript поддерживается преимущественно одним браузером — Internet Explorer. Таким образом,

14

Инструментарий

0.2

Если разработчик хочет, чтобы сценарии были совместимы со всеми распространенными браузерами, ему нельзя полагаться на встроенный интерпретатор какой-либо программы. Логичным выводом является необходимое условие: «зоопарк браузеров» на компьютере разработчи­ка (помимо собственно редакторов). О конфликтах браузеров и их про­изводителей будет рассказано в следующих главах.

Если редактор кода веб-мастер волен выбирать по своему вкусу, то браузеры для тестов выбирать не приходится: выбирают пользователи. А поскольку разработчик только в очень редких случаях может преду­гадать, какими программами просмотра будут пользоваться посетители сайта, ему нужно тестировать страницы во всех возможных браузерах. Под операционной системой Windows нужно обязательно проверять сайт в браузерах Internet Explorer (на момент написания книги послед­ней версией является седьмая, а наиболее популярной шестая, обе обна­руживают достаточные отличия в интерпретации веб-страниц от пятой и тем более шестой версии; изредка посетители заходят на сайт из-под третьего Internet Explorer), Mozilla Firefox (1, 1.5 и 2 версии), прос­то Mozilla (и других браузерах на основе механизма Gecko, например, K-Meleon), Netscape (3 и 4 версии работали на одном «движке», а на­чиная с 6 — на основе того же Gecko, различия в отображении страниц гигантские) и в браузере Opera (последние и наиболее корректно интер­претирующие код версии — 8 и 9; глобальные различия в прорисовке страниц есть с шестой версией). В тех же браузерах, но под другими опе­рационными системами страницы могут выглядеть по-другому из-за различной работы со шрифтами и из-за разницы в исходном коде бра­узеров. Например, Internet Explorer 5 для Windows и Internet Explorer 5 для MacOS — это два разных браузера. Firefox и Opera, правда, дают не столь различающиеся результаты. Для MacOS (начиная с 10 версии) ха­рактерно наличие еще двух браузеров — Safari (браузер по умолчанию, версии 1-2, и планируется третья) и Camino. Safari базируется на том же коде, что и браузер Konqueror для семейства операционных систем Linux, стремительно набирающих популярность (однако «линуксоиды» реже пользуются им, чем браузером Firefox). Безусловно, вне студийных условий трудно тестировать сайт на разных системах, но для этого су­ществуют онлайновые сервисы (список в конце книги прилагается).

Для работы с языками серверных сценариев (ЯСС) необходимы серверы. Серверы — это не только металлические ящики с дисковыми массивами, но и программы, определенным образом организующие работу с данными для многих пользователей и имеющие средства ин­терпретации ЯСС. Например, для работы с сайтами на PHP (а имен­но на этом языке работает очень много готовых веб-архитектур, или «движков») требуется сервер Apache (как наиболее подходящий), сам PHP (ведь язык — это тоже программа) и — желательно — база данных, например, MySQL. А для работы с БД существует удобное средство, на-

Вводная часть

Писанное на языке PHP — программа PHPMyAdmin. Все это нужно де­ржать под рукой и правильно настроить. А для языка ASP (точнее, это не язык, а средство разработки, поскольку включает сценарии на других языках) больше подходит сервер IIS. Правда, есть мощные отладочные пакеты, например, «Денвер» от российских программистов. Компак­тный дистрибутив (работающий под Windows, тогда как традиционно Apache ставится на Linux или другую Unix-подробную систему) вклю­чает собственно сервер Apache с большинством необходимых модулей, поддержку языков PHP, Perl и Parser (последний не в основном дист­рибутиве) и базы данных MySQL с инструментом PHPMyAdmin, что делает его незаменимым отладочным средством: кусочек Linux^ в сис­теме Windows. Тем не менее, если требуются специфические настройки сервера, особые расширения, а также тест дополнительных программ, которые будут запускаться на сервере, то стоит не просто установить сервер, язык и БД по отдельности, но и воссоздать условия их функцио­нирования на рабочем сервере, где будет располагаться сайт, — нужная операционная система нужной версии, утилиты, модули и т. п. Для на­писания кода на ЯСС пригодятся специализированные текстовые ре­дакторы (в том числе из перечислявшихся выше). Например, для PHP подойдут PHP Expert Editor, HTML Expert, CatsHtml KissCool. А ре­дакторы EditPlus Text Editor, PHP Edit, Aditor, Web Development Studio и некоторые другие позволяют работать с языками HTML, ASP, PHP, Perl, Java, JavaScript, VBScript, CSS, XML, C/C++, Python, WML, qBasic, Pascal, Lisp, ActionScript, ColdFusion, Parser, и их можно «научить» рабо­тать и с остальными языками.

Растровая графика — один из важнейших компонентов веб-стра­ниц. Сложно (но все-таки возможно) встретить современный сайт, где разработчики обошлись без картинок в форматах JPG, GIF или PNG. (Замечу в скобках, в чем коренное различие этих форматов. JPG приго­ден для фотоизображений и обеспечивает весьма разнообразные степени сжатия; GIF предпочтителен для изображений с большими однородны­ми областями одного цвета, поддерживает прозрачные области и анима­цию; PNG обеспечивает хорошее сжатие данных и также поддерживает прозрачные области и даже полупрозрачность, но не во всех браузерах корректно, а в старых браузерах — например, в Netscape 4 — изображе­ния формата PNG вообще игнорируются.) Изображения используются как иллюстрации (фотографии, схемы и прочие материалы визуального представления данных), строительный и декоративный материал (фон страницы, «однопиксельные распорки» — о них пойдет речь в разделе про верстку, элементы оформления таблиц и страниц в целом) и фун­кциональный материал (рисованные кнопки, пиктограммы и прочие элементы интерфейса). При создании и обработке изображений сле­дует всегда держать баланс между качеством изображения и его разме­ром. Огромный процент посетителей интернета пользуется модемами

16

Инструментарий

0.2

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

Растровые графические редакторы можно разделить на две груп­пы: выполняющие ограниченное количество функций (условно «про­стые», потому что по количеству исходного кода и размеру системных файлов их не всегда можно назвать простыми) и полнофункциональ­ные, зачастую включающие такие операции, которые могут пригодить­ся всего несколько раз («сложные»).

«Простые» графические редакторы (например, разные варианты ACDSee, i. Mage, Photo Razor, Image Enhance, Image Explorer, NeoPaint и другие) являются одновременно программами просмотра и основ­ного редактирования: позволяют кадрировать изображения, изменять их размер и иногда степень сжатия, применять простейшие фильтры и изменять яркость, контрастность и насыщенность цветов. Некоторые из них умеют создавать уменьшенные копии изображения (thumbnails в принятой англоязычной терминологии). Такая обработка достаточно удобна, если требуется быстро обработать одну или несколько фотогра­фий для размещения в виртуальной фотогалерее в короткий срок. Оче­видно, что для веб-дизайна такие программы могут пригождаться огра­ниченно: они вряд ли помогут в создании коллажей или оригинальной графики, и их ценность сводится к быстрому редактированию и пакет­ной обработке (удобно реализовано в Photo Razor).

Более мощные редакторы (полноценные с огромным количеством функций — Adobe PhotoShop, Corel PhotoPaint, Macromedia Fireworks, Ulead PhotoImpact, The Gimp, Jasc Paint Shop Pro — и более ограничен­ные в возможностях Photobie, PhotoFiltre, Pixia, Project Dogwaffle, VCW VicMan’s Photo Editor и другие), во-первых, поддерживают технологии слоев и работу с множеством объектов на рабочем поле, что позволяет комбинировать изображения, а во-вторых, обладают большим арсена­лом инструментов (кисти, фигуры, инструменты клонирования, выделе­ние и редактирование фрагментов, наборы фильтров и эффектов и т. п.), что дает возможность создавать изображения с нуля. А эти два факта в сочетании с богатыми возможностями коррекции уже существующих

Вводная часть

Изображений позволяют подготавливать графику для веб-страниц без каких-либо ограничений. Из указанных редакторов Adobe Photoshop наиболее сильно сжимает изображения при подготовке для веб-стра­ниц без существенной потери качества. В остальных редакторах нужно вручную проставлять нужное разрешение (72 dpi вместо 300), нужный размер изображения и степень сжатия, а после этого еще использовать утилиты вроде JPGCleaner или PureJPG для того, чтобы из изображения была вычищена вспомогательная информация.

Нужно добавить, что есть совсем уж узкоспециализированные программы: например, MicroArt предназначена только для создания иконок для сайтов и программ в формате. ico, а программы Zx Color Spy или EyeDropper нужны только для выбора нужного цвета и определения его кодов в разных цветовых моделях.

Создание анимации в формате GIF поддерживают далеко не все редакторы. Удобные инструменты для этого — программы Adobe Image­Ready и Ulead Gif Animator. Сохраняя графику в рабочем формате, они способны на выходе давать оптимизированное для веба изображение с поддержкой анимации. Кроме того, создавать анимированные изоб­ражения позволяют программы Atani, Babarosa Gif Animator, Pivot Stickfigure Animator,

В процессе подготовки изображений не стоит недооценивать и роль векторных редакторов (из которых наиболее популярны Adobe Illustrator, CorelDraw и Macromedia Freehand, а менее известными, но не менее функциональными аналогами со своими особенностями яв­ляются Xara и Creature House Expression, новые версии которой ныне выпускаются компанией Microsoft). Дело в том, что для свободного рисования линиями, для создания нефотореалистичной графики они подходят даже больше, чем растровые, и при этом все умеют экспор­тировать изображение в большинство популярных растровых форматов, в том числе пригодных и для публикации на веб-страницах.

Векторная графика на сайтах пока используется ограниченно, и, несмотря на то, что стандарт SVG для описания векторных фигур по­явился достаточно давно, он не поддерживается большинством брау­зеров без дополнительных модулей. Единственный векторный формат, используемый на вебе — это Flash (файлы в формате. swf), дитя компа­нии Macromedia, ныне принадлежащий Adobe. Он позволяет создавать анимированные интерактивные ролики, которые используются как встраиваемая графика, как меню и прочие элементы на веб-страницах, но которые также могут являться практически самостоятельными сай­тами (практически — потому что для помещения ролика на страницу нужен небольшой HTML-код). В последнем случае ролик включает навигацию, способен подгружать вспомогательные ролики, текстовые файлы, сценарии, изображения и аудиофайлы. Подробнее о таком под­ходе будет рассказано далее.

18