К списку статей
Автор: Сергей Супрунов (amsand at rambler dot ru)
Обложка статьи

HTML-редакторы

Если задать подобный вопрос на каком-нибудь из форумов, то с высокой долей вероятности вы наткнётесь на две диаметрально противоположных рекомендации - "составлять" всё в чисто визуальном (то бишь WYSIWYG) редакторе типа DreamWeaver либо бежать от любых редакторов как от огня и всё делать исключительно в Блокноте/Vi/Emacs.

Как это и свойственно любым крайностям, именно в них наиболее отчётливо проявляются те или иные недостатки метода - слабость контроля над получаемым кодом в первом случае, и чрезвычайно большая доля "дурной" работы в другом. Так что не мудрено, что ниша между этими двумя полюсами отнюдь не пустует, и разработчики занимающих её HTML-редакторов прилагают все силы, чтобы наиболее оптимальным образом "подружить мышь с клавиатурой".

И именно удобство "ручного" набора HTML-кода без потери контроля над результатом и будет ключевым при сравнении трёх веб-редакторов, наиболее популярных в Linux, - Screem, Quanta Plus и Bluefish. Хотя и их функциональное наполнение тоже не будет оставлено без внимания. Для полноты картины немного коснёмся ещё и пары типичных WYSIWYG-редакторов - "эталонного" редактора Amaya широко известного в узких кругах Nvu.

Для тестирования использовался дистрибутив Ubuntu 6.06 LTS с Gnome 2.14.1, так что приложения, основанные на GTK, получали некоторую фору. Все редакторы устанавливались из репозитариев в режиме "как есть", никакие усилия по русификации, расширению функциональности за счёт плагинов и проч. не прилагались.

Рассматриваются:

  • Bluefish 1.0.5
  • Quanta Plus 3.5.2
  • Screem 0.16.1

Вне конкурса:

  • Amaya 8.5
  • Nvu 1.0 (20060508)

Amaya

Равнение на W3C

Начнём наше рассмотрение с визуального редактора - Amaya. Не потому, что он такой замечательный, а потому что разрабатывается организацией W3C. Если быть точнее, то это в первую очередь браузер с очень развитыми функциями редактирования.

Им вполне можно пользоваться как редактором (есть возможность редактировать и непосредственно исходный код, правда, без особенных изысков), но вот только одна маленькая деталь всё портит - ну не желает он вводить отечественные символы, и всё. Отобразить из готового файла - пожалуйста, удалить - с радостью. А вводить - ни-ни. То есть абсолютно никакой реакции на клавиши при включённой русской раскладке. То ли морально устаревший интерфейс всему виной, то ли излишняя привязанность разработчиков к ASCII. Но так или иначе, а отечественным веб-кодерам в нём будет не слишком уютно.

Так что оставим ему роль "эталонного браузера" и приступим к рассмотрению основных претендентов на победу.


В нём можно посмотреть результат, но для редактирования он явно слаб...

Screem

У него есть все шансы стать идеальным к версии 1.0

Первое впечатление о Screem - "просто редактор>. Рабочее окно разбито на три поля - справа поле ввода, внизу выводятся ошибки и предупреждения, а слева несколько вкладок, позволяющих проще ориентироваться в документе, работать с файлами и т.д. Особенно полезной мне показалась вкладка Tree, отображающая древовидную структуру странички - двойной щелчок, скажем, по строке HEAD приведёт к выделению в поле редактирования всего кода, относящегося к заголовку.

От обычного текстового редактора его, очевидно, должна отличать продвинутая работа с HTML-тегами. В данном случае "продвинутость" заключается в подсветке синтаксиса, возможности ввести тот или иной тег, выбрав его в меню (очень удобно вставлять META-теги и DOCTYPE-строку буквально парой кликов) и в автодополнении/подсказке вводимых тегов (включая аргументы).

Ещё одна особенность - полуавтоматическое закрытие "парных" тегов. "Полу-", потому что вам придётся совершить некое действо, прежде чем появится закрывающий тег - а именно, набрать последовательность "", вводимый на автопилоте, неожиданно превращается в "TITLE>".

А вот "горячие клавиши" для быстрого ввода тегов, к сожалению, не предусмотрены. Но в качестве компенсации - возможность выбрать слева на вкладке "Resources" и вставить двойным щелчком любой тег. А вкладка "Атрибуты" позволит вам окинуть взглядом все атрибуты, имеющиеся у выделенного тега, и изменить любой из них.

Довольно полезная функция - проверка HTML-синтаксиса (меню "Инструменты > Tidy > Tidy (HTML)"). Внизу, на вкладке "Ошибки", вы получите информацию о всех найденных ошибках (например, несуществующих в природе тегах) и предупреждениях. Под последнюю категорию, к сожалению, подпадают все кириллические символы с диагнозом "invalid character code", что несколько захламляет вывод.

Для ввода "сложных" тегов - таких как рисунки, ссылки, таблицы, формы - предусмотрены диалоги ввода параметров (именуемые "волшебниками"). Кстати, ими, оказывается, довольно удобно пользоваться для SSI-вставок, особенно когда склероз стирает из памяти некогда знакомые до боли сочетания буковок...

"Волшебником" удобно вставлять и изображения: выбираете в стандартном диалоге нужный файл, задаёте альтернативную подпись (атрибут alt) - и у вас появляется тег IMG с автоматически проставленными значениями height и width. Другие атрибуты, типа выравнивания, легко изменить с помощью упомянутой выше одноимённой вкладки. Также обратите внимание на "Color Wizard" - очень удобное средство выбора цвета.

Из сервисных функций - проверка орфографии, группировка нескольких страниц в проекты (здесь они именуются "сайтами"), поддержка CVS, публикация проекта с помощью FTP. Найденные на странице ссылки можно просмотреть на диаграмме (по [Ctrl+3] или выбрав в меню "View > Link view") и сразу увидеть, какие из них внутренние, какие внешние, а какие вообще ведут в никуда. Аналогично, по [Ctrl+2], включается режим предварительного просмотра. При желании можно воспользоваться и просмотром во внешнем браузере.

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

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


>Русифицирован наполовину, а в остальном - очень хорош!


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

Quanta Plus

"Звезда" KDE, честно пытающаяся работать и в Gnome...

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

Горячие клавиши по умолчанию присвоены не всем тегам, но, как и следует ожидать от типичного KDE-приложения, полностью настраиваемы. Автодополнение (как и в Screem, реагирующее только на символы в верхнем регистре) и подсказки параметров работают на "ура". В отличие от Screem, очень удачно реализовано автоматическое закрытие тегов - закрывающий тег вставляется сразу же после открывающего, а курсор устанавливается между тегами. Аналогично редактор ведёт себя при вставке тега по горячей клавише, что позволяет практически не отвлекаться на позиционирование курсора в процессе набора. Единственный спорный момент - при наличии у тега обязательных атрибутов, по горячей клавише открывается диалоговое окно для ввода оных. При быстром наборе это отвлекает, и приходится полностью отказываться от использования горячих клавиш для таких тегов.

Хотя в некоторых случаях диалоги оказываются полезны - особенно "Quick Start Dialog", создающий новый документ и вставляющий в него стандартный шаблон html-страницы. Для таблиц предусмотрено два варианта создания (окромя чисто ручного ввода и полностью визуального составления) - "Редактор таблиц", позволяющий заполнить таблицу прямо в диалоговом окне, и ввод по тегам.

Очень удобна работа со стилями отдельных элементов (кнопка CSS на вкладке Style). А вот функции для создания CSS-таблиц, подобной таковой в Screem или Bluefish, я в "умолчальной" поставке, к сожалению, не нашёл.

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

Справа и слева от поля редактирования можно найти вспомогательные панели инструментов. Правая отвечает за вызов справки и за поле атрибутов html-тегов, выполняющее функции, аналогичные вкладке "Атрибуты" в Screem - т.е. позволяющее увидеть список атрибутов любого тега, на который установлен курсор, и изменить значение любого из них.

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

В меню "Plugins" вы найдёте ряд полезных программ, связанных с редактированием html-кода: проверку работоспособности ссылок, инструмент для работы с картами изображений, CVS-инструментарий. Правда, учитывая ориентированность Quanta Plus на среду KDE, в Gnome мало что из этого будет работать.

Настраиваемость редактора просто потрясающая - достаточно взглянуть на состав меню "Settings". Вы можете подстраивать под себя практически всё: панели инструментов, внешние программы, горячие клавиши, внешний вид самого редактора, режимы предпросмотра... В общем, в Quanta Plus довольно сложно найти что-то такое, что по умолчанию было бы неудобным, да ещё чтобы это нельзя было изменить в соответствии со своими привычками и предпочтениями.

Итак, Quanta Plus (даже учитывая то, что тестирование проводилось в среде Gnome и некоторые функции оказались неработоспособны) произвела очень хорошее впечатление. Её мощь, гибкость и настраиваемость способны удовлетворить требованиям самых привередливых веб-кодеров независимо от их уровня подготовки.


>Почти не к чему придраться. И даже ярко выраженный дизайн "в стиле К" ему можно простить...


>Атрибуты справа, свёртка кода слева... Разве можно желать большего?

Bluefish

Основной претендент на лидерство в категории "для Gnome"

Один из наиболее зрелых редакторов, основанных на GTK. Компоновка окна довольно стандартна - вверху панели инструментов, разделённые на несколько вкладок; слева три вкладки (дерево каталогов для работы с файлами, справка, закладки); справа основное поле редактирования. Помимо основного меню с традиционным набором пунктов есть пользовательское меню (под панелью инструментов), с помощью которого можно выполнять быструю вставку "шаблонных" фрагментов, таких как строка DOCTYPE, META-теги, комментарии, любые парные и одиночные теги (имя можно задать любое) и т.д. Помимо HTML, можно вставлять некоторые команды PHP, SQL, теги DocBook, пару стандартных фрагментов для настройки Apache (отвечающих за Basic-аутентификацию и запрет на открытие inc-файлов) и даже кое-что на C. То есть помимо html-файлов, Bluefish пытается также облегчить ваши страдания при написании типовой конфигурации .htaccess да при разработке простейших php-вставок. Выбрав "Меню пользователя " Редактировать меню", очень легко задать любые нужные вам шаблоны.

Помимо достаточно обширного меню "Тэги", позволяющего вставить почти любой тег, много интересного можно найти в соседних "Диалогах", куда вынесены операции, требующие ввода дополнительных параметров и позволяющие одним махом вставлять целые группы элементов. Например, "Общие " Заголовок документа" (или [Shift+Alt+Q]) сразу вставит каркас будущей html-страницы - с заголовками, META-тегами и заготовкой под тело страницы. Аналогично можно вставить заготовку для таблицы, фреймов (именуемых здесь "врезками") и т.д.

Отдельного упоминания заслуживает вкладка CSS - хоть на ней вы и найдёте всего три кнопки. Вторая и третья - для быстрой вставки тегов SPAN и DIV. А вот первая позволяет создавать стилевые таблицы полностью. Даже если вы не помните и десятой части возможных параметров и их значений, не составит никакого труда выбрать нужный из выпадающего списка и просто вставить в создаваемую таблицу. Кнопка "Цвет" в диалоговом окне позволяет задавать цвет (там, где это требуется), просто щёлкая мышью на нужный.

Автодополнения ввода нет ни для тегов, ни для их параметров - только подсветка синтаксиса (и то, сначала нужно задать тип документа "html" в одноимённом пункте меню - по умолчанию редактор открывается в режиме plain-текста). Единственное, что выполняется автоматически - закрытие парных тегов (можно отключить, как и подсветку).

Для быстрого набора большинство тегов имеет неплохо запоминающиеся сочетания клавиш (хотя и не всегда удобные в использовании). Найти, где их можно изменить, мне не удалось, несмотря на обнадёживающий пункт в меню "Редактирование" - "Сохранить клавиши быстрого доступа".

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

Есть поддержка проектов, проверка орфографии, взаимодействие с внешними программами (make, компилятор javac, проверка HTML-синтаксиса, перекодировка символов завершения строки DOS2UNIX; в настройках довольно легко подключить собственный обработчик). Просмотр результата возможен только во внешнем браузере.

В общем и целом, сложилось впечатление некоторой недоделанности, хотя потенциал у редактора огромен. Особенно понравились возможности по наращиванию функционала за счёт внешних программ. Хорошее впечатление оставило меню пользователя, с помощью которого легко можно свести большую часть рутинных операций к нескольким щелчкам мышью. А вот новичкам будет очень не хватать автодополнения и подсказки параметров. Вердикт - хороший редактор для профессионалов, не привыкших к излишней роскоши, но жаждущих автоматизировать типовые действия.


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


Диалог создания стилевой таблицы - результат добавится в поле редактирования.

Nvu

Если выбрали этот WYSIWYG-редактор, забудьте о ручном редактировании

Это детище компании Linspire в качестве нормального использует визуальный режим, как и следовало ожидать от "юзер-ориентированной" программы. Однако вкладками в нижней части рабочей области очень легко переключить его в режим редактирования исходного кода. Здесь же - предпросмотр и режим, именуемый "HTML Tags", когда на страничке (как она будет выглядеть в браузере) на каждый элемент накладывается "этикетка", показывающая, какой тег за этот элемент отвечает. Довольно удобно для быстрого анализа чужого кода - другого применения этому режиму я не нашёл.

Работа в визуальном режиме мало чем отличается от таковой в обычном текстовом процессоре типа OOo Writer или AbiWord. Да и мы договорились ориентироваться преимущественно на "ручное" редактирование.

Как ни странно, но при переключении в ручной режим блокируются кнопки панели инструментов и пункты меню, отвечающие за те или иные теги. Никакого автодополнения, минимальная подсветка синтаксиса, не распространяющаяся на вновь вводимый текст... В общем, "взялся за гуж - не говори, что не дюж", и раз не нравится визуальный режим, так получайте обычный Блокнот. Как редактор исходного кода Nvu не блещет (да и не предназначен для этого), так что на сём его обзор и завершим...

Итоги

Выбрать лучший HTML-редактор оказалось сложным делом. Bluefish в среде Gnome чувствует себя как рыба в воде (только не надо шуточек про цвет, ладно?), однако для безоговорочной победы ему пока недостаёт функциональности. Впрочем, для тех, кто привык работать в Блокноте, это будет выбор, близкий к идеальному - он совершенно ненавязчив (даже почти незаметен), но в то же время, всегда готов прийти к вам на помощь.

Screem, несмотря на небольшой номер версии, почти ни в чём не отстаёт от Bluefish, а кое-где даже опережает. Немного странно реализованное автозакрытие парных тегов порой мешает работать, а отсутствие горячих клавиш для тегов вообще повергнет в глубокое уныние тех, кто рассчитывал отбросить мышь подальше, но при этом не вводить всё руками.

Ну а Quanta Plus, даже оказавшись в неродной для себя среде, продемонстрировал наиболее гармоничное сочетание "помогающих" функций и удобства быстрой работы. Возможность настроить почти всё будет незаменима для любителей "ходить в обход", хотя и по умолчанию горячие клавиши и состав панели инструментов подобраны достаточно удобно. В общем, безусловным лидером на данный момент оказался "пришелец с планеты KDE" как наиболее зрелый и продуманный HTML-редактор, за что и получает лавры победителя.


Не можете решить, как вам лучше редактировать сайт - вручную или визуально? С Quanta Plus не нужно разрываться между двумя режимами работы!

Сводная таблица функций

 Работа с разными кодировкамиПроектыCVSFTPАвтодополнениеШаблоныГорячие клавишиВстроенный просмотрВизуальный режим
BluefishДаДа    Да**  
Quanta PlusДаДаДа* ДаДаДаДаДа
ScreemДаДаДаДаДаДа Да 

Примечания:
* - при помощи внешней программы, Cervisia
** - нередактируемые

  • Обложка статьи FreeBSD. Настраиваем файловые системы

    FreeBSD. Настраиваем файловые системы

    FreeBSD. Свободные записки о свободной системе. В качестве объекта для изучения был избран однодисковый вариант FreeBSD стабильной версии - 4.2

    Читать далее
  • Обложка статьи Поддерживаю РФ: Кириллические домены должны поддерживаться в российском ПО и сервисах

    Поддерживаю РФ: Кириллические домены должны поддерживаться в российском ПО и сервисах

    Поддержка российским ПО и отечественными сервисами кириллических доменов и адресов электронной почты станет ключевой задачей проекта Поддерживаю.РФ в 2021 году. По словам директора Координационного центра доменов .RU/.РФ Андрея Воробьева, национальный дом

    Читать далее
  • Обложка статьи Защищаем Apache 2. Шаг за шагом

    Защищаем Apache 2. Шаг за шагом

    В этой статье мы расскажем о пошаговой установке и конфигурировании Apache 2.0, чтобы снизить риск неавторизованного доступа или успешного взлома в случае применения новой уязвимости, обнаруженной в Apache Web сервере. В результате, можно будет пользовать

    Читать далее
  • Обложка статьи Защита ваших данных. PGP & Linux

    Защита ваших данных. PGP & Linux

    Эта статья написана для тех, кому необходимо сохранить некоторую информацию в секрете и кто пока не решил как это сделать....

    Читать далее
  • Обложка статьи DragonFlyBSD: загрузка и инициализация

    DragonFlyBSD: загрузка и инициализация

    В этом цикле статей я хочу рассказать об операционной системе, родившейся прямо на наших глазах - летом 2004 года. Имя ей - DragonFlyBSD, и являет она собой представителя славного племени BSD-систем. В сущности, исходно это fork (порождение) FreeBSD 4-й в

    Читать далее

Специальные предложения
интернет-магазина

  • Чехол для переноски Portable Hard Shell для Oculus Quest 2 VR
    3300 руб

    Чехол для переноски Portable Hard Shell для Oculus Quest 2 VR

  • Книга: Дронов В.А. "Laravel 9. Быстрая разработка веб-сайтов на PHP"
    1550 руб

    Книга: Дронов В.А. "Laravel 9. Быстрая разработка веб-сайтов на PHP"

  • Электронный конструктор Эвольвектор: Уровень 1. Стартовый набор
    4052 руб

    Электронный конструктор Эвольвектор: Уровень 1. Стартовый набор

  • №18 Патрон с впаянной лампой 2,5 V/ 0,3A
    212 руб

    №18 Патрон с впаянной лампой 2,5 V/ 0,3A

  • Книга: Аль-Халили Джим "Мир физики и физика мира. Простые законы мироздания"
    1000 руб

    Книга: Аль-Халили Джим "Мир физики и физика мира. Простые законы мироздания"