Прибамбасы для веб-дизайна

Май 2000 г.

Российская часть всемирной Сети растёт последние год-два буквально как на дрожжах. Уже можно иметь сомнительное удовольствие лицезреть рекламу развлекательных и информационных сайтов в газетах, метро и даже на ненавистном лично мне телеэкране (слава богу, мы ещё не докатились до рекламы порносайтов в школах!). Но вряд ли Интернет стал бы в России такой культовой вещью, если бы состоял только из коммерческих сайтов да страничек всевозможных ООО, ТОО, ЗАО, ХЗЧ с биографией генерального директора, прайс-листами и красочными фотографиями их продукции и любимой секретутки начальника. То, что на заказ делают для них профессиональные веб-дизайнерские студии, конечно же, кому-то нужно, приносит и заказчикам и исполнителям совсем нелишнюю прибыль, а иногда даже и интересно случайно забредшим посетителям, вот только частота появления таких страниц в избранных закладках не соответствует средствам, вложенным в их создание, регистрацию домена и раскрутку сайта. А вот то, что делают любители, размещая продукты своих творческих поисков на бесплатных серверах, иногда перерастает в простое графоманство и вызывает желание запустить какой-нибудь Teleport и закачать себе на диск всё творение безвестного мастера, чтобы на свежую голову, днём, в спокойной обстановке изучить всё от корки до корки, или, вернее, от тега до тега. Некоторые лидеры посещаемости в Рунете выросли именно из таких, почти любительских проектов. Полная свобода излагать свои мысли и самовыражаться в раскрытии личных талантов перед всем миром подвигает всё новых и новых пользователей изучать языки HTML, Java, Perl и программы, предельно облегчающие и ускоряющие создание собственных сайтов. Большинство начинающих веб-дизайнеров неплохо изучили замечательный визуальный HTML-редактор Dreamweaver, пытались экспериментировать с мощными графическими пакетами типа Photoshop или Paint Shop Pro, но помимо этих всемирно известных и чрезвычайно популярных программ, существует целый ряд небольших утилит, прекрасно их дополняющих и значительно расширяющих творческие возможности создателя сайта. Эти утилиты от небольших софтверных компаний, а то и вовсе от одиноких рыцарей С++, избавляют настоящего ХУДОжника от выполнения каких-либо рутинных действий, делают что-то очень нужное и интересное, что, как часто бывает, не догадались вложить в свои чрезмерно серьёзные разработки монстры типа Microsoft или Macromedia, а иногда вообще только такие мелкие программульки делают вещи, непосильные ни опытным рукам, работающим исключительно в Блокноте и Фотошопе, ни ленивым поклонникам программ типа Dreamweaver, почти полностью уже заменившим труд человека, как в мечтах Сыроежкина из старого детского фильма («До чего дошёл прогресс…»).

Те, кто рисует и компонует свои странички в визуальных HTML-редакторах, хорошо знают, что после сохранения финального результата на диск конечный файл вполне можно ужать в размерах раза в полтора-два, причём это болезнь не только суррогатного HTML-редактора MS-Word, но и таких специализированных программ, как FrontPage и Dreamweaver. Дело в том, что все эти программы чрезмерно насыщают HTML-код пробелами, сортируя теги для удобства его восприятия программистом, а также делают иногда ошибки, связанные с тем, что они, в отличие от человека, не способны «увидеть» весь свой продукт целиком, работая, в основном, с отдельными его частями, что в итоге и приводит к далеко не оптимальному, с точки зрения его размера, коду. Частично эту проблему помогают исправить очень похожие друг на друга микро-программы HTML-Shrinker [1], Оптимизатор HTML-файлов [2], Advanced HTML Optimizer [3]. По своим возможностям программы практически идентичны, они удалят за вас все ненужные кавычки в параметрах, пробелы, комментарии, пустые строки, заменят некоторые теги, и т.д. Словом, всё, без чего вполне можно обойтись, если вы привыкли работать в Блокноте. О результатах проделанной работы вы прочтёте в отчёте, из которого узнаете, насколько оправданным было использование программы, что удалено и сколько байт сэкономлено. Но отечественный Оптимизатор HTML-файлов на фоне конкурентов имеет одну очень удачную особенность, поднимающую его на голову выше их: он позволяет вам самим задать собственную таблицу замен/удалений тегов. Благодаря этому вы сможете настолько тонко его настроить, что файл, прошедший максимальную оптимизацию, невозможно будет отличить от исходного оригинала, что в таких программах, собственно, и является главным требованием. HTML-Shrinker тоже немного выделяется тем, что имеет уже встроенную возможность удалять картинки, скрипты, стили, что пригодится, если вы просто скачиваете из Сети интересную текстовую информацию Телепортом, и на сохраненных без графики страничках вам мешаются «посадочные места» картинок. Конечно, чтобы определить, что надо удалять, а что не надо, придётся немного поэкспериментировать с настройками всех программ, иначе вы рискуете потерять тщательно продуманный дизайн сайта, когда вдруг, по вашей невнимательности, все шрифты, например, вернутся к «Default»-варианту. Для такого несчастного случая программы создают резервную копию обрабатываемого файла, к которому вам и придётся вернуться для продолжения экспериментов.

Следующая категория очень нужных утилит предназначена для выявления ошибок в структуре сайта, испорченных, никуда не ведущих ссылок или ссылок на неожиданно пропавшие из Интернета странички. Эти программы постоянно используются теми, кто имеет свои сайты в Сети, а не только на стадии их разработки, так как необходимо регулярно уточнять информацию о сайтах, на которые ведут ваши ссылки — даже некоторые из самых стабильных ресурсов Интернета переезжают с места на место, другие вообще закрываются, и надо отслеживать этот процесс, чтобы в один прекрасный день страница с вашей коллекцией лучших «линков» Рунета не превратилась в кладбище мёртвых ссылок. Тут можно выбирать из достаточно несложных программ, таких, например, как Check Web Links [4] или Link Test [5], которые честно проверят все ссылки на вашем сайте и сгенерируют отчёт о каждой нерабочей, с указанием кода ошибки, полученного от DNS-сервера, из чего станет ясно, пропала ли одна из ваших любимых страничек навечно или только сменила адрес. Причём достаточно задать URL заглавной страницы, чтобы программа проверила все ссылки на всём вашем сайте. Хотя, конечно, можно, изменив кое-какие параметры, проверить и отдельно взятый документ. Или попробуйте «навороченный», а потому и небесплатный, LinkBot Pro [6]. Эта программа имеет настолько большой диалог её настройки (да и не один, а три!), что необходимость понять значение всех опций приводит в настоящий ужас и вызывает желание вернуться опять к простенькому и надёжному Check Web Links. Однако, если вы всё-таки рискнёте в нём немного разобраться, то будете в восторге от той статистики, которую может предоставить LinkBot Pro. Правда, если вы тестируете свой же сайт, то не очень то и нужно знать, например, когда была обновлена та или иная страница, или у какой размер превышает разумный предел, но, тем не менее, её настройки и возможности впечатляют! Она «отловит» гораздо больше типов ошибок вебмастера, а не только «сломанные» ссылки, чем первые две утилиты. Эта программа даже может обнаруживать внутри сайта документы, на которые не ведёт ни одна ссылка! Более того, не выходя из программы, можно исправить ошибки в HTML-коде, если, конечно, задать заранее пароль доступа к вашему FTP-серверу, на котором и находятся все файлы сайта. Функций у программы настолько много, что в системе помощи к LinkBot Pro, чуть-чуть не дотягивающей до размеров «хелпа» Windows Resource Kit Book Online, придётся разбираться не один день и потратить на это не одну бутылочку (или бочечку) пива. Но зато результат её использования вас не разочарует! Все программы сделаны довольно грамотно, так что тестирование сайта производится несколькими потоками — одновременно опрашивается с десяток «линков», но будьте готовы, что Check Web Links, например, не будет откликаться несколько минут на нажатия кнопок мыши — это нормально, просто он «тормозит» вместе с каким-то из серверов.

А вот для составления собственно самого списка лучших ссылок, в который будет импортировано содержание вашей папки «Избранное», воспользуйтесь программой Bookmark Wizard [7] — ведь не вносить же вручную две-три сотни «линков» в Dreamweaver — к концу первой сотни можно без мыши остаться или указательный палец накачать размером с руку. Гораздо лучше автоматизировать этот процесс, доверив производство страницы со ссылками утилите Bookmark Wizard. Готовый документ с полным комплектом гиперссылок и сохранением структуры папок вы получите уже через минуту, останется только внести в него необходимые комментарии и привести в соответствие с общей концепцией дизайна сайта.

После создания своего сайта каждый веб-дизайнер, от школьника до окончившего одновременно и МГУ и Суриковский Институт гения, хочет, чтобы его творение оценило как можно больше народа. Поэтому все навешивают на заглавные страницы кучу счётчиков, регистрируются в баннерных сетях и пытаются оставить информацию о своём ресурсе во всех мыслимых поисковых системах. Работа эта долгая и совершенно уже не творческая, но, к счастью, тут тоже есть полезные программы, избавляющие нас от рутины: WebSubmitter [8] и Major Submit [9]. И опять отечественный продукт переплюнул буржуйскую разработку. После того, как вы заполните все требуемые поисковыми машинами поля в программе, поломав при этом голову над вопросом, как же можно охарактеризовать свой сайт для завлечения максимального числа интернет-маньяков, родной WebSubmitter отправит всю эту информацию в 25 систем, если вы ещё не оплатили его приобретение, и в 500 (так написано в руководстве к программе — я не проверил из-за наличия отсутствия зелёной наличности), если вы его зарегистрировали. О вас и о вашем творении узнают не только соотечественники, но и весь мир, если, конечно, вы сможете без особых ошибок чуть-чуть написать о своём сайте по-английски. После завершения процедуры регистрации полезно просмотреть отчёт, чтобы уже вручную заполнить все формы на тех сайтах, которые всё-таки не захотели принять данные о вас через посредника — WebSubmitter. На его фоне импортный Major Submit со своим хилым десятком поисковых систем выглядит совсем бледно, хотя, возможно, я просто недоглядел у него каких-то суперфункций и возможностей 🙂. Есть, правда, сайт в Интернете, на котором можно безо всяких программ отослать информацию о своём творении в наиболее популярные поисковые системы: www.design.ru/free/tau/ [10], можно попробовать воспользоваться им, а не искать какие-то дополнительные утилиты.

Веб-дизайн не ограничивается только программированием HTML-кода, важно, чтобы и графика на сайте была на должном уровне, и при этом совсем не лишним был бы оригинальный и неповторимый стиль оформления ваших страничек. Профессиональные графические пакеты обладают просто уникальными возможностями, а функция подключения к такой популярной программе, как Photoshop, «плагинов» от независимых разработчиков, даёт дизайнеру в руки просто ключи от мира. Но и тут остались неохваченными, забытыми некоторые мелкие задачи веб-дизайна. Например, чтобы сделать для ваших страниц графический фон — небольшую картинку, которая, будучи выложена плиткой по поверхности страницы, превратится в сплошной бесшовный ковёр, лучше воспользоваться утилитой TeraLogic Texture Maker [11]. Эта программа обладает способностью делать небольшие картинки, соединяющиеся сами с собой абсолютно незаметно, без единого шва, образуя иногда причудливые узоры, как в калейдоскопе, или что-то тонкое, незаметно-воздушное, едва проглядывающее из-под текста на странице. К сожалению, программа с первого взгляда сложна для понимания, но, если вы снизойдёте до прочтения (особых знаний английского не потребуется — «хелп» недалеко ушёл от комиксов) руководства к ней, то прямо по ходу его изучения сделаете свою первую оригинальную текстуру для странички. А когда изучите все эффекты, заложенные в программу, то, глядишь, научитесь и предугадывать результат своих художеств. Возможно, именно такой изюминки, как интересный фон, и не хватает некоторым сайтам до формирования запоминающегося стиля.

Иногда бывает проще и быстрее воспользоваться небольшой специализированной утилитой для рисования одного из многочисленных стандартных элементов оформления сайта, чем открывать для этого тяжеленный Фотошоп и составлять нужную картинку попиксельно. Создание стандартного изображения, например, кнопки, очень хорошо поддаётся автоматизации и совершенно не требует каких-то сверхособых графических изысков. Поэтому программы для рисования кнопок пишут, наверное, все, кому не лень. Одни из них сложнее, другие проще, и каждому придётся самостоятельно выбирать то, что подходит по своей функциональности именно ему. Незамысловатая Just Buttons [12] рисует кнопки с надписями, сглаживает используемый шрифт, делает градиент цвета и ещё несколько фоновых эффектов, а программа 3D GIF Designer [13], как видно из названия, работает над приданием различных объёмных спецэффектов буквам и изображениям, он, конечно, не сравнится по мощи с Ulead Cool3D [14], но во многих случаях окажется гораздо удобнее. Менее известна другая, очень мощная программа, одна из самых интересных на рынке ПО, которая даже грузится в первый раз дольше, чем какой-нибудь Unreal или Sin: 3D Font FX. Она просто незаменима для создания объёмных надписей, всевозможных логотипов, баннеров и прочих украшательств. Благодаря удобным мастерам, процесс создания желаемой кнопки или картинки упрощается до уровня детской обучающей программы, ничуть не в ущерб качеству получаемого продукта. В этой программе встроены свои собственные очень оригинальные шрифты, имеется большой выбор готовых шаблонов и эффектов обработки изображения на все вкусы. Полученную картинку можно как угодно вертеть по всем осям, задавать буквам тип материала, текстуру, перемещать источники освещения, делать анимационные эффекты, вплоть до раздельного движения каждой буквы, и многое другое, как в полноценном 3D-редакторе. То, что получилось, можно сохранить в виде самых разных файлов, от клипа AVI и анимированного GIF, до файлов PaintShop Pro и JPEG. Если же вы занимаетесь коллекционированием шрифтов, то выбрать из них именно тот, что больше соответствует вашим замыслам, и придать ему объём в программе 3D Font FX помогут утилиты-просмотровщики шрифтов. Очень неплохи в данном случае программы Font Viewer [15] и FontLister [16]. Используя эти небольшие утилиты, вы получите целую кучу самой разной информации, о существовании которой даже и не подозревали, а также все обычные данные о шрифте, о размерах литер и их начертании, о поддержке различных языков, в общем, всё то, что нужно для быстрого подбора оптимального варианта для вашей концепции дизайна сайта.

На этом, конечно, список интересных программ, которые могут как-то пригодиться веб-дизайнерам или вообще рассчитаны только для них, не ограничивается, например, уникальную возможность создавать за два-три клика мышкой простой текст, но с цветовым градиентом даст вам утилита HTML Font Colorizer [17]. Вручную такого эффекта на страничке добиться просто нереально! Программа SpyCam [18], будет отправлять кадры с вашей видекамеры прямо на сайт в Интернете — вы получите собственную Web-камеру на обычной домашней страничке (не забудь надеть трусы!)! LinkLaunch [19] сделает вам на сайте выпадающие навигационные меню на основе Java- и CGI-скриптов. А программа TagGen [20] поможет правильно создать МЕTA-описания в разделе заголовков HTML-страниц для наилучшего отображения вашего сайта в как можно большем числе поисковых систем. В общем, средств для ускорения веб-дизайнерского творческого процесса предостаточно — было бы желание!