Internet Zone >>

Бесплатные программы, полезные ресурсы, свежие номера журнала.   Нажимай!

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

Трошин Сергей
stnvidnoye@chat.ru
http://stnvidnoye.chat.ru/

Российская часть всемирной Сети растет последние год-два буквально как на дрожжах. Уже можно иметь сомнительное удовольствие лицезреть рекламу развлекательных и информационных сайтов в газетах, метро и даже на ненавистном лично мне телеэкране (слава Богу, пока еще порносайты не рекламируют). Но вряд ли интернет стал бы в России такой культовой вещью, если бы состоял только из коммерческих ресурсов да страничек всевозможных ООО, ТОО, ЗАО, ХЗЧ с биографией генерального директора, прайс-листами и красочными фотографиями их продукции и любимой секретутки начальника. То, что на заказ делают для них профессиональные веб-дизайнерские студии, конечно же, кому-то нужно, приносит и заказчикам, и исполнителям совсем нелишнюю прибыль, а иногда даже и интересно случайно забредшим посетителям. Вот только частота появления таких страниц в "Избранном" не соответствует средствам, вложенным в их создание, регистрацию домена и раскрутку сайта.

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

Оптимизаторы

Те, кто рисует и компонует свои странички в визуальных HTML-редакторах, хорошо знают, что после сохранения финального результата на диск конечный файл вполне можно ужать в размерах раза в полтора-два - причем это болезнь не только суррогатного HTML-редактора MS Word, но и таких специализированных программ, как FrontPage и DreamWeaver. Дело в том, что, во-первых, все эти программы чрезмерно насыщают HTML-код пробелами, сортируя теги для удобства его восприятия программистом. Во-вторых, они, в отличие от человека, не способны “увидеть” весь свой продукт целиком, работая с отдельными его частями, что в итоге и приводит к далеко не оптимальному, с точки зрения размера, коду. Частично эту проблему помогают исправить очень похожие друг на друга микропрограммы HTML-Shrinker, Оптимизатор HTML-файлов и Advanced HTML Optimizer.

По своим возможностям эти программы практически идентичны - они удалят за вас все ненужные кавычки в параметрах, пробелы, комментарии, пустые строки, заменят некоторые теги, и т. д. Словом, все, без чего вполне можно обойтись, если вы привыкли работать в Блокноте, другими словами, почти все, что вам понадобится для безболезненного перехода к XML, когда он станет-таки стандартом. О результатах проделанной работы вы прочтете в отчете, из которого узнаете, насколько оправдано было использование программы, что удалено и сколько байт сэкономлено.

Отечественный "Оптимизатор HTML-файлов" на фоне конкурентов имеет одну очень удачную особенность, поднимающую его на голову выше их: он позволяет вам самим задать собственную таблицу замен / удалений тегов. Благодаря этому, вы сможете настолько тонко его настроить, что первоначальный файл и тот, который прошел максимальную оптимизацию, в браузере будут выглядеть совершенно одинаково - что в таких программах, собственно, и является главным требованием.

HTML-Shrinker выделяется среди прочих тем, что имеет встроенную возможность удалять картинки, скрипты, стили - это пригодится, если вы просто скачиваете из Сети интересную текстовую информацию, и вам мешают “посадочные места” картинок на сохраненных без графики страничках. Конечно, чтобы определить, что надо удалять, а что не надо, придется немного поэкспериментировать с настройками всех программ, иначе вы рискуете потерять тщательно продуманный дизайн сайта, когда вдруг, по вашей невнимательности, все шрифты, например, вернутся к default-варианту. Для такого несчастного случая программы создают резервную копию обрабатываемого файла, к которому вам и придется перейти для продолжения экспериментов.

Проверяльщики

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

Тут можно выбирать из достаточно несложных программ, таких, например, как Check Web Links или Link Test, которые честно проверят все ссылки на вашем сайте и сгенерируют отчет о каждой нерабочей из них, с указанием кода ошибки, полученного от DNS-сервера. Из чего станет ясно, пропала ли одна из ваших любимых страничек навечно или только сменила адрес. Причем достаточно просто задать URL заглавной страницы, чтобы программа проверила все ссылки на всем вашем ресурсе. Хотя, конечно, можно, изменив кое-какие параметры, проверить и отдельно взятый документ.

Из этой же категории программ и “навороченный”, а потому небесплатный, LinkBot Pro. Эта утилита имеет настолько большой диалог настройки (даже не один, а целых три), что необходимость понять значение всех опций приводит в настоящий ужас и вызывает желание вернуться опять к простенькому и надежному Check Web Links. Однако если вы все-таки рискнете в нем немного разобраться, то будете в восторге от той статистики, которую может предоставить LinkBot Pro. Правда, если вы тестируете свой же сайт, то не очень-то и нужно знать, например, когда была обновлена та или иная страница, или у какой страницы размер превышает разумный предел, но, тем не менее, ее настройки и возможности впечатляют. Она “отловит” гораздо больше ошибок web-мастера (а не только “сломанные” ссылки, как первые две утилиты). Эта программа даже может обнаруживать внутри сайта документы, на которые не ведет ни одна ссылка. Более того, не выходя из программы, можно исправить ошибки в HTML-коде, если, конечно, задать заранее пароль доступа к вашему ftp-серверу, на котором и находятся все файлы сайта.

Функций у программы настолько много, что в системе помощи к LinkBot Pro, чуть-чуть не дотягивающей до размеров “хелпа” Windows Resource Kit Book Online, придется разбираться не один день, и потратить на это не одну бутылочку (или бочечку) пива. Но зато результат ее использования вас не разочарует. Впрочем, все остальные программы сделаны тоже довольно грамотно, так что тестирование сайта производится несколькими потоками – одновременно опрашивается с десяток “линков”. Но будьте готовы, что Check Web Links, например, не будет откликаться несколько минут на нажатие кнопок мыши – это нормально, просто он “тормозит” вместе с каким-то из серверов.

Сабмиттеры

После создания своего ресурса каждый веб-дизайнер - от школьника до гения, окончившего одновременно МГУ и Суриковский Институт - хочет, чтобы его творение оценило как можно больше народа. Поэтому все навешивают на заглавные страницы кучу счетчиков, регистрируются в баннерных сетях и пытаются оставить информацию о своем сайте во всех мыслимых поисковых системах. Работа эта долгая и совершенно уже не творческая, но, к счастью, тут тоже есть полезные программы, избавляющие нас от рутины: WebSubmitter и Major Submit.

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

На его фоне импортный Major Submit со своим хилым десятком поисковых систем выглядит совсем бледно, хотя, возможно, я просто недоглядел у него каких-то супер-функций и возможностей. Есть, правда, и сайт в интернете, с которого можно безо всяких программ отослать информацию о своем творении в наиболее популярные поисковые системы: www.design.ru/free/tau - можно попробовать воспользоваться им, а не искать какие-то дополнительные утилиты.

Графические утилиты

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

Например, чтобы сделать для ваших страниц графический фон – небольшую картинку, которая, будучи выложена плиткой по поверхности страницы, превратится в сплошной бесшовный ковер, лучше воспользоваться утилитой TeraLogic Texture Maker. Эта программа обладает способностью делать небольшие картинки, соединяющиеся сами с собой абсолютно незаметно, без единого шва, образуя иногда причудливые узоры как в калейдоскопе, или что-то тонкое, незаметно-воздушное, едва проглядывающее из-под текста на странице. К сожалению, программа с первого взгляда сложна для понимания - но если вы снизойдете до прочтения (особых знаний английского не потребуется – “хелп” недалеко ушел от комиксов) руководства к ней, то прямо по ходу его изучения сделаете свою первую оригинальную текстуру для странички. А когда изучите все эффекты, заложенные в программу, то, глядишь, и научитесь предугадывать результат своих художеств. Возможно, именно такой изюминки, как интересный фон, и не хватает некоторым сайтам до формирования запоминающегося стиля.

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

Незамысловатая Just Buttons рисует кнопки с надписями, сглаживает используемый шрифт, делает градиент цвета и применяет еще несколько фоновых эффектов, а программа 3D GIF Designer, как видно из названия, работает над приданием различных объемных спецэффектов буквам и изображениям. Конечно, по мощи с Ulead Cool3D все это несравнимо, но во многих случаях гораздо удобнее.

Менее известна другая, очень мощная программа, одна из самых интересных на рынке ПО, которая даже грузится в первый раз дольше, чем какой-нибудь Unreal или Sin - 3D Font FX. Она просто незаменима для создания объемных надписей, всевозможных логотипов, баннеров и прочих украшательств. Благодаря удобным мастерам, процесс создания желаемой кнопки или картинки упрощается до уровня детской обучающей программы - и ничуть не в ущерб качеству получаемого продукта. В эту программу встроены свои собственные очень оригинальные шрифты, имеется большой выбор готовых шаблонов и эффектов обработки изображения на все вкусы. Полученную картинку можно как угодно вертеть по всем осям, задавать буквам тип материала, текстуру, перемещать источники освещения, делать анимационные эффекты, вплоть до раздельного движения каждой буквы, и многое другое - как в полноценном 3D-редакторе. То, что получилось, можно сохранить в виде самых разных файлов, от клипа AVI и анимированного GIF до файлов PaintShop Pro и JPEG.

Просто полезные программы

Для составления "списка лучших ссылок", в который будет импортировано содержание вашей папки “Избранное”, лучше воспользоваться программой Bookmark Wizard – ведь не вносить же вручную две-три сотни “линков” в Dreamweaver – к концу первой сотни можно без мыши остаться или указательный палец накачать до размеров с руку. Гораздо умнее автоматизировать этот процесс, доверив производство страницы со ссылками утилите Bookmark Wizard. Готовый документ с полным комплектом гиперссылок и сохраненнной структурой папок вы получите уже через минуту, останется только внести в него необходимые комментарии и привести в соответствие с общей концепцией дизайна сайта.

Если же вы занимаетесь коллекционированием шрифтов, то выбрать из них именно тот, который больше соответствует вашим замыслам, и придать ему объем в программе 3D Font FX помогут утилиты - "просматривалки" шрифтов. Очень неплохи в данном случае программы Font Viewer и FontLister. Используя эти небольшие утилиты, вы получите целую кучу самой разной информации, о существовании которой даже и не подозревали, а также все обычные данные о шрифте: размеры литер, их начертание, поддержка различных языков - в общем, все то, что нужно для быстрого подбора оптимального варианта для вашей концепции дизайна сайта.

На этом, конечно, список интересных программ, которые могут как-то пригодиться веб-дизайнерам, или вообще рассчитаны только на них, не ограничивается. Например, уникальную возможность создавать за два-три клика мышкой простой текст, но с цветовым градиентом даст вам утилита HTML Font Colorizer. Вручную такого эффекта на страничке добиться просто нереально! Программа SpyCam будет отправлять кадры с вашей видекамеры прямо на сайт в интернете – вы получите собственную web-камеру на обычной домашней страничке (не забудьте надеть трусы). LinkLaunch сделает вам на сайте выпадающие навигационные меню на основе Java- и CGI-скриптов. А программа TagGen поможет правильно создать описания в разделе заголовков HTML-страниц (с помощью метатегов) для наилучшего отображения вашего ресурса в как можно большем числе поисковых систем. В общем, средств для ускорения веб-дизайнерского творческого процесса предостаточно – было бы желание.

Источник: http://www.computery.ru/upgrade/

 


Copyright © 2000г. "Internet Zone" & Nik Romanov, info@izcity.com
Копирование и использование данных материалов разрешается только в случае указания на журнал "Internet Zone", как на источник получения информации. При этом во всех ссылках обязательно явное указание адреса вэб-сайта http://www.izcity.com/. При наличии у копируемого материала авторов и источника информации - их также нужно указывать, наряду со ссылкой на нас.