HTML-Kit в море Интернета№50(169)/17.12.2001

(c) Петр «Roxton» СЕМИЛЕТОВ
Пару лет назад я снес с жесткого диска одну из ранних версий
HTML-Kit (далее HK) и начал работать в HomeSite. Этот редактор
HTML-кода показался мне удобнее и практичнее. HK же остался в моей
памяти как небольшая, быстрая, эргономичная, а к тому же бесплатная
среда верстки web-страниц, но... HomeSite был лучше. Так бы и
казалось мне до сих пор.
При чистке на винте залежей старого софта я нашел древний
дистрибутив HK, зачем-то установил его, а затем сходил на сайт
разработчика — http://www.chami.com/html-kit. И был поражен
масштабами увиденного! За несколько лет HK развился настолько, что
HomeSite по сравнению с ним — все равно что столяр с рубанком против
искусного резчика по дереву. HK вобрал в себя все, что можно себе
представить. А что нельзя — то реализуют плагины, которые так же
фриварны, как и основной продукт, и занимают очень мало места на
диске.
Разумеется, прочитав о вкусностях новой версии HK, я немедленно ее
скачал (http://tucows.bealenet.com/files5/HKSetup.exe) и
инсталлировал. На HomeSite теперь можно «забить». Отслужил свое,
равно как другие редакторы, предназначенные для работы
непосредственно с HTML-кодом. Некоторые считают, что профи пишет код
ТОЛЬКО В БЛОКНОТЕ. Неверно. Профи пишет в том, что удобнее всего. И
если пользуется чем-то вроде блокнота, то это будет меленький
редактор с чудным названием BRED (http://www.astonshell.com/rus),
который поддерживает несколько кодировок, файлы размером более 64
килобайтов и имеет многие другие фичи. Но это так, для работы «на
коленке».
При создании же крупных проектов профи понадобится тот продукт,
который позволяет в кратчайшие сроки добиться результата. Нужно,
чтобы среда разработки (читай — редактор) предоставляла средства
быстрого доступа к установленным в системе браузерам, всевозможные
шаблоны, валидаторы (утилиты проверки кода), а главное, чтобы такая
среда была гибкой в настройке. Каждый человек подстраивает программу
под себя, для своих нужд.
Во всем вышеперечисленном HK дает фору любым другим редакторам.
Впрочем, судите сами. Ниже я буду, описывая эту программу,
сравнивать ее с HomeSite — у них примерно одна весовая категория,
это продукты одного класса. HomeSite заслуженно пользуется огромной
популярностью среди тех, кто предпочитает создавать страницы
«руками». На это есть две причины: HomeSite действительно хороший
продукт, и он раскручен лучше, чем HK. Но давайте посмотрим, в чем
последний превосходит, а в чем отстает от HomeSite. Итак...
Расширяемость. HomeSite как откомпилирован, так и работает. Выше его
головы не прыгнешь. HK — это поддержка плагинов, а также скриптов на
HKScript’е. Можете использовать уже готовые дополнения или писать их
самостоятельно, — благо, на сайте разработчика лежат документация,
примеры и даже утилита для упрощения создания плагинов, Plugin
Generator. Плагины выложены по этому адресу:
http://www.chami.com/html-kit/plugins. Я расскажу о наиболее
полезных, но прямых ссылок на файлы не дам — по той причине, что
скачивание с сайта идет через java-скрипт, а попытки загрузить
файлы, вручную вводя выдаваемые на-гора адреса в Download
Accelerator Plus, закончились неудачей. Поэтому пришлось брать файлы
штатными средствами Оперы, да и другой браузер с этим справится не
хуже.
Итак, какие плагины скачать в первую очередь?
TWJS (вес аж 51 килобайт! :-)) — TW Javascript. Нечто подобное
инструментальной панели Script в HomeSite. Служит для быстрой
вставки в текст шаблонов скриптов (проверка нажатых радиокнопок,
буферизированная загрузка изображения и так далее), синтаксических
конструкций и уже «встроенных» скриптов вроде пресловутого Last
Modified.
hkSVG (41 Кб) — менюшка/панель для вставки SVG-тэгов. SVG
расшифровывается как W3C’s Scalable Vector Graphics (
http://www.w3.org/Graphics/SVG). Это формат векторной графики,
которую можно тэгами прописывать в коде HTML-страницы или отдельном
файле. Увы, большинство популярных браузеров не поддерживают SVG.
Зато Amaya (http://www.w3.org/Amaya), который можно считать
«официальным» браузером самой W3C, такие тэги отображает безо всяких
вопросов. SVG, конечно же, далеко до возможностей Flash, но страницу
украсить можно.
HTML Tidy Beta — бета-версия нового валидатора/конвертера. В
дистрибутив HK включена старая версия, еще за 2000 год. Поставьте
новую бету, а «древний» HTMLTidy.dll просто удалите. HTML Tidy умеет
проверять код на его соответствие стандартам, конвертировать HTML в
XML и XHTML, убивать «мусор» в сгенерированных Word’ом страницах, и
вообще способен на многое. Чтобы валидатор не тянул лапы к кодировке
вашей страницы, то в Edit > Preferences > Tidy > Character Encoding
ставьте RAW, и в списке Switches должна быть включена опция Do not
convert characters > 127 to entities.
hkListLinks (2.9 Кб) — делает из ссылок в выделенном тексте элемент
управления «комбобокс» (выпадающий список), заполненный этими
ссылками, и кнопку GO. Вы наверняка видели такое на многих сайтах.
ExtChars (5.2 Кб) — служит для вставки тэгов специальных символов
вроде амперсанда, копирайта и так далее.
cmCodeCrusher (1.7 Кб) — сокращает размер кода. Клинические
исследования показали, что он портит страницы, где много скриптов. В
остальном же нормально.
cmSlugs — очень полезная утилита для подбора цветов. Цвет выбирается
в модели HSL, но разумеется, может быть вставлен в страницу в
формате RGB. Имеется несколько интересных вещей, например, взятие
образца цвета из нужной вам точки на экране.
На этом о плагинах заканчиваю — смотрите сами, качайте сами. Есть
плагины для упрощения работы с JSP, ColdFusion, PHP, Java, Perl,
существуют утилиты для создания списков файлов, поиска файлов и в
файлах, документация, примеры, короче говоря, очень много вещей.
Каждый человек может найти себе то, что нужно.
Интеграция с другими программами
Браузеры. Подключайте, какие хотите. В отличие от HomeSite, который
самостоятельно определяет наличие только Netscape, IE и Opera, HK
нашел у меня также Amaya. К тому же HK позволяет вручную задавать
параметры DDE (протокол динамического обмена данными между
программами). Без напряга я подключил такие досовые браузеры, как
графический Arachne и текстовый Lynx, — web-дизайнер должен быть во
всеоружии, чтобы его сайт выглядел прилично в как можно большем
количестве браузеров.
Далее вспомним, с чем интегрируется HomeSite? С WYSIWYG-редактором
DreamWeaver и CSS-редактором TopStyle, lite-версию которого HomeSite
использует в качестве редактора каскадных стилей. HK тоже использует
TopStyle, lite или full по тому же назначению, а вдобавок «видит»
установленные в системе утилиты, полезные для разработчика.
Например, на моей машине HK обнаружил HomeSite (привычка, жалко
удалять!), TopStyle (полная версия, разумеется), Ultraedit
Professional Text/HEX Editor, Word 2000, Microsoft Developer Studio
и Visual Studio. В качестве графического редактора у меня к HK
подключен шестой Photoshop. Я могу установить в тексте курсор на имя
файла с картинкой и выбрать из контекстного меню пункт Edit.
Изображение открывается в Photoshop’е. А хочу — выберу в том же меню
View, и HK откроет и покажет мне файл с изображением.
Вспомогательные средства
К вспомогательным средствам я отношу различных визардов, мастеров,
палитры — короче говоря все, что позволяет получить работающий код
парой щелчков мыши вместо того, чтобы вручную заполнять параметры
тэгов, прописывать пути и так далее. В HomeSite есть чудесная
утилита Thumbnails, которая отображает внизу экрана уменьшенные
копии находящихся в текущей папке картинок. Хотите поместить
картинку как <img src=«picture.jpg»> — перетащите оттуда изображение
на страницу. В HK такого нет. Правда, вы можете просто тащить в окно
редактора изображение из той же ACDSee и достигнете того же
результата, что в HomeSite. В последнем есть еще удобнейшая штучка
для создания image-maps. В HK ее нет, и плагина для этих целей я не
нашел.
Зато в HK имеется хороший тэг-визард. Он сильно похож на инспектора
объектов в Delphi — вы получаете доступ ко всем свойствам и событиям
тэга. Все изменения мгновенно отображаются в окошке превьюва.
Тэг-визард — средство универсальное. Например, для тэга <img> он
позволит выбрать картинку, причем отобразит ее в окне превьюва. Если
это GIF-анимация, то покажет и ее, — а вот в HomeSite аналогичный
визард показывает GIF’ы только статично.
Хотите использовать CSS? Нажмите кнопочку, и откроется CSS-редактор.
Более того, при выборе тэга или его свойства в заголовке окна
визарда сразу же указывается, в каком браузере и стандарте этот тэг
или свойство поддерживается.
Редактор
Тут HK — во всей красе. Чего только стоит «ассистент набора»!
Например, написали вы тэг <map>. Нажали пробел после буквы «p»,
чтобы с параметрами теперь повозиться. HK сразу выдает древо
параметров, доступ к редактору CSS, а еще кнопочки информационные.
Нажмете, к примеру, на кнопку с буквой «I» (information), и HK
расскажет, какие стандарты определяют этот тэг, и какие браузеры его
поддерживают.
Многочисленные утилиты обработки текста избавят от занудной работы.
Например, нужно в конце каждой строки некоего фрагмента текста
поставить тэг <BR>. Выделяете текст и используете функцию Actions >
Text > Add <br> to end-of-lines. Подобный способ «массовой»
обработки строк используется для создания списков элементов (<li> и
т. д.), таблиц и прочего. Можно конвертировать текст из верхнего
регистра в нижний и, наоборот, осуществлять всевозможное
форматирование. Имеется базовый WYSIWYG-редактор Prototype Pad, в
котором вы редактируете текст средствами обычного RTF-редактора, а
потом результат переводите в HTML.
Есть закладки, разумеется, настраиваемая подсветка синтаксиса и
мощная система поиска и замены. Отметим разумность поведения — можно
выделить декларацию стиля, затем из контекстного меню выбрать Edit
Selection As Style Block и редактировать стиль уже в CSS-редакторе
(TopStyle). Таким приятными неожиданностями наполнен весь продукт.
Наконец, клавиатурные сокращения — гибкость Corel Draw, что тут
говорить! Можете присвоить сочетания клавиш любому пункту главного
меню (а значит, и плагинам). Кстати, загляните в Help > Keyboard
Shortcuts. Там описаны базовые комбинации клавиш. Например,
Ctrl+Enter вставляет в текст <BR>, а Ctrl+K позволяет выбрать файл и
преобразовать его имя в формат ссылки.
Окно редактора состоит из трех страниц. Editor — в ней вы
редактируете текст. Preview — просмотр во встроенном браузере (IE),
Output — сюда выводятся результаты работы, например, HTML-Tidy (чтоб
не портился оригинал); Split-View — отображение и Editor, и Output
одновременно. Вам не хватает Design, как в HomeSite? А ведь HK не
является визуальным редактором. Это не FrontPage и не Dreamweaver...

Некоторые другие возможности
Что еще умеет HK? Первое, что приходит на ум, это Window > Workspace
Window. Выберите этот пункт меню. Должно появиться (если раньше его
не было) плавающее окно, которое обеспечивает доступ к избранным
вами папкам. Причем последние могут находиться не только на
локальной машине, но и на удаленном сервере. Да, HK поддерживает
«заливку» файлов. Без отрыва от производства.
Далее Actions > Online (или выберите соответствующую закладку на
тулбаре). Это средство доступа к онлайновым валидаторам: W3C CSS,
WDG HTML Validator и CSSCheckUp. Кстати, приложив некоторые усилия,
вы сможете использовать валидатор W3C CSS в локальном варианте. Как?
Скачивайте плагин HKW3CSSV для HK и читайте к нему информацию — там
подробно описано, что нужно делать. Валидатор написан на Java,
поэтому если у вас по какой-то причине нет ее интерпретатора,
возьмите его (опять же в сопроводиловке к плагину об этом
рассказано).
Нельзя объять необъятное. Если бы я писал эту статью о HomeSite, то
информация рано или поздно исчерпались бы, и материал можно было
изложить в одной статье. HomeSite — ограничен своей архитектурой. HK
— бесплатный продукт отличного качества, а вокруг таких всегда
образуются «субкультуры», помогающие его развитию. Постоянно
создаются новые плагины, утилиты, наборы иконок. Даже серии статей
не хватило бы на описание HK, окруженного войском плагинов.
Предназначение этого обзора заключается лишь в том, чтобы указать
вам на наиболее совершенный HTML-редактор. Никакие Hot Dog,
HomeSite, Quanta Plus, HTML Pad или Aditor не предоставят вам тех
широких возможностей, той свободы в действиях, которая появляется
при работе в HK.
Я намеренно не касался визуальных редакторов (FrontPage,
Dreamweaver, Hot Metal и т. д.), поскольку они все же относятся к
другой категории средств разработки. На мой взгляд, тех элементов
WYSIWYG, которые присутствуют в обычных редакторах кода, а речь идет
о мастерах таблиц, выборе шрифтов и тому подобному, вполне
достаточно. А работа над сложными страницами в режиме WYSIWYG без
осознанного использования HTML-кода и скриптов вообще представляется
мне затруднительной.

Перейти на главную страничку раздела "Интернет"