Если задать подобный вопрос на каком-нибудь из форумов, то с высокой долей вероятности вы наткнётесь на две диаметрально противоположных рекомендации - "составлять" всё в чисто визуальном (то бишь WYSIWYG) редакторе типа DreamWeaver либо бежать от любых редакторов как от огня и всё делать исключительно в Блокноте/Vi/Emacs. Как это и свойственно любым крайностям, именно в них наиболее отчётливо проявляются те или иные недостатки метода - слабость контроля над получаемым кодом в первом случае, и чрезвычайно большая доля "дурной" работы в другом. Так что не мудрено, что ниша между этими двумя полюсами отнюдь не пустует, и разработчики занимающих её HTML-редакторов прилагают все силы, чтобы наиболее оптимальным образом "подружить мышь с клавиатурой". И именно удобство "ручного" набора HTML-кода без потери контроля над результатом и будет ключевым при сравнении трёх веб-редакторов, наиболее популярных в Linux, - Screem, Quanta Plus и Bluefish. Хотя и их функциональное наполнение тоже не будет оставлено без внимания. Для полноты картины немного коснёмся ещё и пары типичных WYSIWYG-редакторов - "эталонного" редактора Amaya широко известного в узких кругах Nvu.
Для тестирования использовался дистрибутив Ubuntu 6.06 LTS с Gnome 2.14.1, так что приложения, основанные на GTK, получали некоторую фору. Все редакторы устанавливались из репозитариев в режиме "как есть", никакие усилия по русификации, расширению функциональности за счёт плагинов и проч. не прилагались.
Рассматриваются:
Вне конкурса:
Равнение на W3C
Начнём наше рассмотрение с визуального редактора - Amaya. Не потому, что он такой замечательный, а потому что разрабатывается организацией W3C. Если быть точнее, то это в первую очередь браузер с очень развитыми функциями редактирования.
Им вполне можно пользоваться как редактором (есть возможность редактировать и непосредственно исходный код, правда, без особенных изысков), но вот только одна маленькая деталь всё портит - ну не желает он вводить отечественные символы, и всё. Отобразить из готового файла - пожалуйста, удалить - с радостью. А вводить - ни-ни. То есть абсолютно никакой реакции на клавиши при включённой русской раскладке. То ли морально устаревший интерфейс всему виной, то ли излишняя привязанность разработчиков к ASCII. Но так или иначе, а отечественным веб-кодерам в нём будет не слишком уютно.
Так что оставим ему роль "эталонного браузера" и приступим к рассмотрению основных претендентов на победу.
В нём можно посмотреть результат, но для редактирования он явно слаб...
У него есть все шансы стать идеальным к версии 1.0
Первое впечатление о Screem - "просто редактор>. Рабочее окно разбито на три поля - справа поле ввода, внизу выводятся ошибки и предупреждения, а слева несколько вкладок, позволяющих проще ориентироваться в документе, работать с файлами и т.д. Особенно полезной мне показалась вкладка Tree, отображающая древовидную структуру странички - двойной щелчок, скажем, по строке HEAD приведёт к выделению в поле редактирования всего кода, относящегося к заголовку.
От обычного текстового редактора его, очевидно, должна отличать продвинутая работа с HTML-тегами. В данном случае "продвинутость" заключается в подсветке синтаксиса, возможности ввести тот или иной тег, выбрав его в меню (очень удобно вставлять META-теги и DOCTYPE-строку буквально парой кликов) и в автодополнении/подсказке вводимых тегов (включая аргументы).
Ещё одна особенность - полуавтоматическое закрытие "парных" тегов. "Полу-", потому что вам придётся совершить некое действо, прежде чем появится закрывающий тег - а именно, набрать последовательность "".
А вот "горячие клавиши" для быстрого ввода тегов, к сожалению, не предусмотрены. Но в качестве компенсации - возможность выбрать слева на вкладке "Resources" и вставить двойным щелчком любой тег. А вкладка "Атрибуты" позволит вам окинуть взглядом все атрибуты, имеющиеся у выделенного тега, и изменить любой из них.
Довольно полезная функция - проверка HTML-синтаксиса (меню "Инструменты > Tidy > Tidy (HTML)"). Внизу, на вкладке "Ошибки", вы получите информацию о всех найденных ошибках (например, несуществующих в природе тегах) и предупреждениях. Под последнюю категорию, к сожалению, подпадают все кириллические символы с диагнозом "invalid character code", что несколько захламляет вывод.
Для ввода "сложных" тегов - таких как рисунки, ссылки, таблицы, формы - предусмотрены диалоги ввода параметров (именуемые "волшебниками"). Кстати, ими, оказывается, довольно удобно пользоваться для SSI-вставок, особенно когда склероз стирает из памяти некогда знакомые до боли сочетания буковок...
"Волшебником" удобно вставлять и изображения: выбираете в стандартном диалоге нужный файл, задаёте альтернативную подпись (атрибут alt) - и у вас появляется тег IMG с автоматически проставленными значениями height и width. Другие атрибуты, типа выравнивания, легко изменить с помощью упомянутой выше одноимённой вкладки. Также обратите внимание на "Color Wizard" - очень удобное средство выбора цвета.
Из сервисных функций - проверка орфографии, группировка нескольких страниц в проекты (здесь они именуются "сайтами"), поддержка CVS, публикация проекта с помощью FTP. Найденные на странице ссылки можно просмотреть на диаграмме (по или выбрав в меню "View > Link view") и сразу увидеть, какие из них внутренние, какие внешние, а какие вообще ведут в никуда. Аналогично, по , включается режим предварительного просмотра. При желании можно воспользоваться и просмотром во внешнем браузере.
Ну и довольно подробная и хорошо иллюстрированная справка позволит осваивать редактор не только методом "научного тыка".
Так что можно сказать, что этот "просто редактор" на самом деле - достаточно удобный и функциональный инструмент. Хотя отсутствие горячих клавиш для вставки тегов и странная реализация автоввода завершающих тегов вынуждают либо почти всё набирать вручную, либо прибегать к помощи мыши чаще, чем того хотелось бы при "быстром" вводе.
Русифицирован наполовину, а в остальном - очень хорош!
Отображение ссылок выглядит просто кошмарно... Но иногда без него не обойтись.
"Звезда" 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 и некоторые функции оказались неработоспособны) произвела очень хорошее впечатление. Её мощь, гибкость и настраиваемость способны удовлетворить требованиям самых привередливых веб-кодеров независимо от их уровня подготовки.
Почти не к чему придраться. И даже ярко выраженный дизайн "в стиле К" ему можно простить...
Атрибуты справа, свёртка кода слева... Разве можно желать большего?
Основной претендент на лидерство в категории "для Gnome"
Один из наиболее зрелых редакторов, основанных на GTK. Компоновка окна довольно стандартна - вверху панели инструментов, разделённые на несколько вкладок; слева три вкладки (дерево каталогов для работы с файлами, справка, закладки); справа основное поле редактирования. Помимо основного меню с традиционным набором пунктов есть пользовательское меню (под панелью инструментов), с помощью которого можно выполнять быструю вставку "шаблонных" фрагментов, таких как строка DOCTYPE, META-теги, комментарии, любые парные и одиночные теги (имя можно задать любое) и т.д. Помимо HTML, можно вставлять некоторые команды PHP, SQL, теги DocBook, пару стандартных фрагментов для настройки Apache (отвечающих за Basic-аутентификацию и запрет на открытие inc-файлов) и даже кое-что на C. То есть помимо html-файлов, Bluefish пытается также облегчить ваши страдания при написании типовой конфигурации.htaccess да при разработке простейших php-вставок. Выбрав "Меню пользователя " Редактировать меню", очень легко задать любые нужные вам шаблоны.
Помимо достаточно обширного меню "Тэги", позволяющего вставить почти любой тег, много интересного можно найти в соседних "Диалогах", куда вынесены операции, требующие ввода дополнительных параметров и позволяющие одним махом вставлять целые группы элементов. Например, "Общие " Заголовок документа" (или ) сразу вставит каркас будущей html-страницы - с заголовками, META-тегами и заготовкой под тело страницы. Аналогично можно вставить заготовку для таблицы, фреймов (именуемых здесь "врезками") и т.д.
Отдельного упоминания заслуживает вкладка CSS - хоть на ней вы и найдёте всего три кнопки. Вторая и третья - для быстрой вставки тегов SPAN и DIV. А вот первая позволяет создавать стилевые таблицы полностью. Даже если вы не помните и десятой части возможных параметров и их значений, не составит никакого труда выбрать нужный из выпадающего списка и просто вставить в создаваемую таблицу. Кнопка "Цвет" в диалоговом окне позволяет задавать цвет (там, где это требуется), просто щёлкая мышью на нужный.
Автодополнения ввода нет ни для тегов, ни для их параметров - только подсветка синтаксиса (и то, сначала нужно задать тип документа "html" в одноимённом пункте меню - по умолчанию редактор открывается в режиме plain-текста). Единственное, что выполняется автоматически - закрытие парных тегов (можно отключить, как и подсветку).
Для быстрого набора большинство тегов имеет неплохо запоминающиеся сочетания клавиш (хотя и не всегда удобные в использовании). Найти, где их можно изменить, мне не удалось, несмотря на обнадёживающий пункт в меню "Редактирование" - "Сохранить клавиши быстрого доступа".
Интересной показалась функция работы с миниатюрами изображений - выбираете файл, и, ориентируясь по предварительному просмотру, обычным "бегунком" выставляете нужный размер. Полезен будет также инструмент выбора цвета ("Диалоги " Общие " Выбор цвета") - ткните мышкой на оттенок, который вам понравится, и по закрытии диалога в код будет вставлено шестнадцатеричное представление оного.
Есть поддержка проектов, проверка орфографии, взаимодействие с внешними программами (make, компилятор javac, проверка HTML-синтаксиса, перекодировка символов завершения строки DOS2UNIX; в настройках довольно легко подключить собственный обработчик). Просмотр результата возможен только во внешнем браузере.
В общем и целом, сложилось впечатление некоторой недоделанности, хотя потенциал у редактора огромен. Особенно понравились возможности по наращиванию функционала за счёт внешних программ. Хорошее впечатление оставило меню пользователя, с помощью которого легко можно свести большую часть рутинных операций к нескольким щелчкам мышью. А вот новичкам будет очень не хватать автодополнения и подсказки параметров. Вердикт - хороший редактор для профессионалов, не привыкших к излишней роскоши, но жаждущих автоматизировать типовые действия.
Аккуратная подсветка и настраиваемые панели позволяют работать почти с любым кодом, который может понадобиться при разработке веб-сайта.
Диалог создания стилевой таблицы - результат добавится в поле редактирования.
Если выбрали этот WYSIWYG-редактор, забудьте о ручном редактировании
Это детище компании Linspire в качестве нормального использует визуальный режим, как и следовало ожидать от "юзер-ориентированной" программы. Однако вкладками в нижней части рабочей области очень легко переключить его в режим редактирования исходного кода. Здесь же - предпросмотр и режим, именуемый "HTML Tags", когда на страничке (как она будет выглядеть в браузере) на каждый элемент накладывается "этикетка", показывающая, какой тег за этот элемент отвечает. Довольно удобно для быстрого анализа чужого кода - другого применения этому режиму я не нашёл.
Работа в визуальном режиме мало чем отличается от таковой в обычном текстовом процессоре типа OOo Writer или AbiWord. Да и мы договорились ориентироваться преимущественно на "ручное" редактирование.
Как ни странно, но при переключении в ручной режим блокируются кнопки панели инструментов и пункты меню, отвечающие за те или иные теги. Никакого автодополнения, минимальная подсветка синтаксиса, не распространяющаяся на вновь вводимый текст... В общем, "взялся за гуж - не говори, что не дюж", и раз не нравится визуальный режим, так получайте обычный Блокнот. Как редактор исходного кода Nvu не блещет (да и не предназначен для этого), так что на сём его обзор и завершим...
Выбрать лучший HTML-редактор оказалось сложным делом. Bluefish в среде Gnome чувствует себя как рыба в воде (только не надо шуточек про цвет, ладно?), однако для безоговорочной победы ему пока недостаёт функциональности. Впрочем, для тех, кто привык работать в Блокноте, это будет выбор, близкий к идеальному - он совершенно ненавязчив (даже почти незаметен), но в то же время, всегда готов прийти к вам на помощь.
Screem, несмотря на небольшой номер версии, почти ни в чём не отстаёт от Bluefish, а кое-где даже опережает. Немного странно реализованное автозакрытие парных тегов порой мешает работать, а отсутствие горячих клавиш для тегов вообще повергнет в глубокое уныние тех, кто рассчитывал отбросить мышь подальше, но при этом не вводить всё руками.
Ну а Quanta Plus, даже оказавшись в неродной для себя среде, продемонстрировал наиболее гармоничное сочетание "помогающих" функций и удобства быстрой работы. Возможность настроить почти всё будет незаменима для любителей "ходить в обход", хотя и по умолчанию горячие клавиши и состав панели инструментов подобраны достаточно удобно. В общем, безусловным лидером на данный момент оказался "пришелец с планеты KDE" как наиболее зрелый и продуманный HTML-редактор, за что и получает лавры победителя.
Не можете решить, как вам лучше редактировать сайт - вручную или визуально? С Quanta Plus не нужно разрываться между двумя режимами работы!
У каждого из нас рано или поздно возникает желание донести свои мысли, чувства, переживания до других людей. И в век Интернета самым простым способом сделать это является, пожалуй, собственная веб-страничка. Вопрос только в том, с помощью чего её сделать?
[Сергей Супрунов (amsand at rambler dot ru)]
Если задать подобный вопрос на каком-нибудь из форумов, то с высокой долей вероятности вы наткнётесь на две диаметрально противоположных рекомендации - "составлять" всё в чисто визуальном (то бишь WYSIWYG) редакторе типа DreamWeaver либо бежать от любых редакторов как от огня и всё делать исключительно в Блокноте/Vi/Emacs.
Как это и свойственно любым крайностям, именно в них наиболее отчётливо проявляются те или иные недостатки метода - слабость контроля над получаемым кодом в первом случае, и чрезвычайно большая доля "дурной" работы в другом. Так что не мудрено, что ниша между этими двумя полюсами отнюдь не пустует, и разработчики занимающих её HTML-редакторов прилагают все силы, чтобы наиболее оптимальным образом "подружить мышь с клавиатурой".
И именно удобство "ручного" набора HTML-кода без потери контроля над результатом и будет ключевым при сравнении трёх веб-редакторов, наиболее популярных в Linux, - Screem, Quanta Plus и Bluefish. Хотя и их функциональное наполнение тоже не будет оставлено без внимания. Для полноты картины немного коснёмся ещё и пары типичных WYSIWYG-редакторов - "эталонного" редактора Amaya широко известного в узких кругах Nvu.
Для тестирования использовался дистрибутив Ubuntu 6.06 LTS с Gnome 2.14.1, так что приложения, основанные на GTK, получали некоторую фору. Все редакторы устанавливались из репозитариев в режиме "как есть", никакие усилия по русификации, расширению функциональности за счёт плагинов и проч. не прилагались.
Равнение на W3C
Начнём наше рассмотрение с визуального редактора - Amaya. Не потому, что он такой замечательный, а потому что разрабатывается организацией W3C. Если быть точнее, то это в первую очередь браузер с очень развитыми функциями редактирования.
Им вполне можно пользоваться как редактором (есть возможность редактировать и непосредственно исходный код, правда, без особенных изысков), но вот только одна маленькая деталь всё портит - ну не желает он вводить отечественные символы, и всё. Отобразить из готового файла - пожалуйста, удалить - с радостью. А вводить - ни-ни. То есть абсолютно никакой реакции на клавиши при включённой русской раскладке. То ли морально устаревший интерфейс всему виной, то ли излишняя привязанность разработчиков к ASCII. Но так или иначе, а отечественным веб-кодерам в нём будет не слишком уютно.
Так что оставим ему роль "эталонного браузера" и приступим к рассмотрению основных претендентов на победу.
> В нём можно посмотреть результат, но для редактирования он явно слаб...
У него есть все шансы стать идеальным к версии 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. Найденные на странице ссылки можно просмотреть на диаграмме (по или выбрав в меню "View > Link view") и сразу увидеть, какие из них внутренние, какие внешние, а какие вообще ведут в никуда. Аналогично, по , включается режим предварительного просмотра. При желании можно воспользоваться и просмотром во внешнем браузере.
Ну и довольно подробная и хорошо иллюстрированная справка позволит осваивать редактор не только методом "научного тыка".
Так что можно сказать, что этот "просто редактор" на самом деле - достаточно удобный и функциональный инструмент. Хотя отсутствие горячих клавиш для вставки тегов и странная реализация автоввода завершающих тегов вынуждают либо почти всё набирать вручную, либо прибегать к помощи мыши чаще, чем того хотелось бы при "быстром" вводе.
>Русифицирован наполовину, а в остальном - очень хорош!
>Отображение ссылок выглядит просто кошмарно... Но иногда без него не обойтись.
"Звезда" 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 и некоторые функции оказались неработоспособны) произвела очень хорошее впечатление. Её мощь, гибкость и настраиваемость способны удовлетворить требованиям самых привередливых веб-кодеров независимо от их уровня подготовки.
>Почти не к чему придраться. И даже ярко выраженный дизайн "в стиле К" ему можно простить...
>Атрибуты справа, свёртка кода слева... Разве можно желать большего?
Основной претендент на лидерство в категории "для Gnome"
Один из наиболее зрелых редакторов, основанных на GTK. Компоновка окна довольно стандартна - вверху панели инструментов, разделённые на несколько вкладок; слева три вкладки (дерево каталогов для работы с файлами, справка, закладки); справа основное поле редактирования. Помимо основного меню с традиционным набором пунктов есть пользовательское меню (под панелью инструментов), с помощью которого можно выполнять быструю вставку "шаблонных" фрагментов, таких как строка DOCTYPE, META-теги, комментарии, любые парные и одиночные теги (имя можно задать любое) и т.д. Помимо HTML, можно вставлять некоторые команды PHP, SQL, теги DocBook, пару стандартных фрагментов для настройки Apache (отвечающих за Basic-аутентификацию и запрет на открытие inc-файлов) и даже кое-что на C. То есть помимо html-файлов, Bluefish пытается также облегчить ваши страдания при написании типовой конфигурации.htaccess да при разработке простейших php-вставок. Выбрав "Меню пользователя " Редактировать меню", очень легко задать любые нужные вам шаблоны.
Помимо достаточно обширного меню "Тэги", позволяющего вставить почти любой тег, много интересного можно найти в соседних "Диалогах", куда вынесены операции, требующие ввода дополнительных параметров и позволяющие одним махом вставлять целые группы элементов. Например, "Общие " Заголовок документа" (или ) сразу вставит каркас будущей html-страницы - с заголовками, META-тегами и заготовкой под тело страницы. Аналогично можно вставить заготовку для таблицы, фреймов (именуемых здесь "врезками") и т.д.
Отдельного упоминания заслуживает вкладка CSS - хоть на ней вы и найдёте всего три кнопки. Вторая и третья - для быстрой вставки тегов SPAN и DIV. А вот первая позволяет создавать стилевые таблицы полностью. Даже если вы не помните и десятой части возможных параметров и их значений, не составит никакого труда выбрать нужный из выпадающего списка и просто вставить в создаваемую таблицу. Кнопка "Цвет" в диалоговом окне позволяет задавать цвет (там, где это требуется), просто щёлкая мышью на нужный.
Автодополнения ввода нет ни для тегов, ни для их параметров - только подсветка синтаксиса (и то, сначала нужно задать тип документа "html" в одноимённом пункте меню - по умолчанию редактор открывается в режиме plain-текста). Единственное, что выполняется автоматически - закрытие парных тегов (можно отключить, как и подсветку).
Для быстрого набора большинство тегов имеет неплохо запоминающиеся сочетания клавиш (хотя и не всегда удобные в использовании). Найти, где их можно изменить, мне не удалось, несмотря на обнадёживающий пункт в меню "Редактирование" - "Сохранить клавиши быстрого доступа".
Интересной показалась функция работы с миниатюрами изображений - выбираете файл, и, ориентируясь по предварительному просмотру, обычным "бегунком" выставляете нужный размер. Полезен будет также инструмент выбора цвета ("Диалоги " Общие " Выбор цвета") - ткните мышкой на оттенок, который вам понравится, и по закрытии диалога в код будет вставлено шестнадцатеричное представление оного.
Есть поддержка проектов, проверка орфографии, взаимодействие с внешними программами (make, компилятор javac, проверка HTML-синтаксиса, перекодировка символов завершения строки DOS2UNIX; в настройках довольно легко подключить собственный обработчик). Просмотр результата возможен только во внешнем браузере.
В общем и целом, сложилось впечатление некоторой недоделанности, хотя потенциал у редактора огромен. Особенно понравились возможности по наращиванию функционала за счёт внешних программ. Хорошее впечатление оставило меню пользователя, с помощью которого легко можно свести большую часть рутинных операций к нескольким щелчкам мышью. А вот новичкам будет очень не хватать автодополнения и подсказки параметров. Вердикт - хороший редактор для профессионалов, не привыкших к излишней роскоши, но жаждущих автоматизировать типовые действия.
>Аккуратная подсветка и настраиваемые панели позволяют работать почти с любым кодом, который может понадобиться при разработке веб-сайта.
> Диалог создания стилевой таблицы - результат добавится в поле редактирования.
Если выбрали этот WYSIWYG-редактор, забудьте о ручном редактировании
Это детище компании Linspire в качестве нормального использует визуальный режим, как и следовало ожидать от "юзер-ориентированной" программы. Однако вкладками в нижней части рабочей области очень легко переключить его в режим редактирования исходного кода. Здесь же - предпросмотр и режим, именуемый "HTML Tags", когда на страничке (как она будет выглядеть в браузере) на каждый элемент накладывается "этикетка", показывающая, какой тег за этот элемент отвечает. Довольно удобно для быстрого анализа чужого кода - другого применения этому режиму я не нашёл.
Работа в визуальном режиме мало чем отличается от таковой в обычном текстовом процессоре типа OOo Writer или AbiWord. Да и мы договорились ориентироваться преимущественно на "ручное" редактирование.
Как ни странно, но при переключении в ручной режим блокируются кнопки панели инструментов и пункты меню, отвечающие за те или иные теги. Никакого автодополнения, минимальная подсветка синтаксиса, не распространяющаяся на вновь вводимый текст... В общем, "взялся за гуж - не говори, что не дюж", и раз не нравится визуальный режим, так получайте обычный Блокнот. Как редактор исходного кода Nvu не блещет (да и не предназначен для этого), так что на сём его обзор и завершим...
Выбрать лучший HTML-редактор оказалось сложным делом. Bluefish в среде Gnome чувствует себя как рыба в воде (только не надо шуточек про цвет, ладно?), однако для безоговорочной победы ему пока недостаёт функциональности. Впрочем, для тех, кто привык работать в Блокноте, это будет выбор, близкий к идеальному - он совершенно ненавязчив (даже почти незаметен), но в то же время, всегда готов прийти к вам на помощь.
Screem, несмотря на небольшой номер версии, почти ни в чём не отстаёт от Bluefish, а кое-где даже опережает. Немного странно реализованное автозакрытие парных тегов порой мешает работать, а отсутствие горячих клавиш для тегов вообще повергнет в глубокое уныние тех, кто рассчитывал отбросить мышь подальше, но при этом не вводить всё руками.
Ну а Quanta Plus, даже оказавшись в неродной для себя среде, продемонстрировал наиболее гармоничное сочетание "помогающих" функций и удобства быстрой работы. Возможность настроить почти всё будет незаменима для любителей "ходить в обход", хотя и по умолчанию горячие клавиши и состав панели инструментов подобраны достаточно удобно. В общем, безусловным лидером на данный момент оказался "пришелец с планеты KDE" как наиболее зрелый и продуманный HTML-редактор, за что и получает лавры победителя.
> Не можете решить, как вам лучше редактировать сайт - вручную или визуально? С Quanta Plus не нужно разрываться между двумя режимами работы!
Примечания:
* - при помощи внешней программы, Cervisia
** - нередактируемые
Для того, чтобы выяснить насколько хорошо они справляются со своими обязанностями.
Эти приложения во многом схожи. Все три прежде всего редакторы кода с выделением синтаксиса, с умным форматированием и другими функциями, упрощающими набор и редактирование кода. Screem тесно связан с GNOME, в то время как Bluefish прекрасно себя чувствует как на KDE, так и на GNOME. Quanta Plus - KDE-приложение, которое распространяется вместе с KDE. Все они поддерживают визуальное редактирование, называемое WYSIWYG (what you see is what you get - что видишь, то и получаешь), в купе с расширенными возможностями редактирования кода. Эти редакторы могут работать с HTML , JavaScript , Cascading Style Sheets (CSS) и другими языками разметки и скриптов. Также имеется возможность для управления веб-сайтами и веб-проектами, включая поддержку CVS .
Мы видим, что эти программы очень похожи, поэтому нам предстоит выделить яркие особенности каждой. В этой статье я сосредоточился на том, как веб-редактор помогает в написании HTML-кода, CSS и DIV-тэгов. Каждая программа располагает дополнительными возможностями, которые могут подойти именно для ваших нужд.
Я протестировал каждую программу вместе с Adobe"s Spry Framework (выпущен под лицензией BSD), который позволяет добавить AJAX (Asynchronous JavaScript and XML) на веб-сайт. Spry Framework включает набор скриптов JavaScript и таблицы стилей. Использование и модифицирование Spry-виджетов требует простого редактирования HTML и CSS. Это и сделало Spry подходящим компаньоном для моих тестов. В этой тройке редакторов я уделял особое внимание тем функциям, которые я ценю в коммерческих приложениях для веб-дизайна, например, автоматическое закрывание тэгов, выбор параметров тэгов (вы набираете тэг, а редактор предлагает вам список возможных параметров и значений), поддержка прикрепленных CSS- и JavaScript-файлов.
Screem справляется с большей частью работы, связанной с созданием и редактированием веб-страницы. Когда вы создаёте новую страницу, Screem попросит вас ввести основную информацию, а затем поможет настроить главные элементы в тэгах head и body .
Меня порадовало то, как Screem упрощает редактирование. Например, когда я заменил открывающий тэг упорядоченного списка на неупорядоченный, закрывающий тэг автоматически изменился. При наборе кода, выскакивает список возможных параметров. После выбора того, что вам нужно, тэг автоматически закроется. Также имеется в наличии удобный помощник создания CSS, благодаря которому выбранные свойства можно вставить между тэгами стиля или же вынести на отдельную таблицу стилей.
Интерфейс Screem содержит 2 панели инструментов: главная панель для основных операций (открывание, печать и редактирование файлов) и панель помощников, на которой располагается 9 кнопок для девяти помощников. С ними вы можете легко добавить и настроить различные элементы: цвета, формы, ссылки, изображения и таблицы.
Слева также имеется боковая панель, которая может отображать 5 окошек:
Screem поддерживает 4 вида отображения веб-страницы:
Под простым интерфейсом Screem спрятан мощный HTML-редактор. Только хотелось бы, чтобы он легче устанавливался под KDE. Я тестировал Screem на Ubuntu LiveCD, чтобы избежать компиляции и загрузки GNOME-библиотек, необходимых для работы этого редактора на KDE. И всё равно, Screem - яркий пример приложения, которое отлично справляется с выбранной задачей, используя при этом минимум дополнительных функций. Если вы используете GNOME, то Screem может вам подойти. Если же вы используете KDE или другое окружение, то придётся загружать дополнительные библиотеки для того, чтобы работать с этим редактором.
Bluefish
Редактор Bluefish во многом сложней, чем Screem, но зато более универсален. Помимо HTML и CSS, он позволяет редактировать C, Java, Perl, Python, XML и несколько других языков. Для работы с HTML и CSS у этого редактора схожие с Screem возможности. Однако, в отличие от последнего, Bluefish не предлагает списка параметров тэга на выбор, а также не изменяет закрывающего тэга при изменении открывающего.
И тем не менее, Bluefish хорошо организован и прост в использовании. Через меню тэгов можно выбрать тэг и применить его к выделенному тексту или же просто вставить тэги, если текст не выделен. Тэги в меню разделены на 9 категорий: Заголовки, Особые, Форматирование, Контекстное Форматирование, Общее форматирование, Таблица, Список, Форма и Разное. Меню "Диалоги" предоставляет несколько диалогов (аналог помощников в Screem) для выполнения различных задач: добавление ссылки, таблицы, формы или CSS-стиля. В диалогах вы вводите или же выбираете из списка значения параметров для различных тэгов, которые Bluefish вставит в документ. Через диалоги также производится начальная настройка документа путём добавления мета-тэгов, ссылок на таблицы стилей и т.п. Меню не зависят от контекста, то есть если вы редактируете Python-файл, они всё равно будут предоставлять функции для работы с HTML.
У Bluefish имеется удобный мастер для создания эскизов. С его помощью можно легко создать превью любого изображения, удобно если вы хотите организовать онлайн-фотоальбом на вашем сайте. Этот мастер масштабирует размер изображения до указанного или же в процентном соотношении и автоматически добавляет изображение и тэги для ссылки.
Bluefish - очень способный HTML-редактор, особенно если вам приходится много писать на PHP, JavaScript, Java и других поддерживаемых языках. Всё редактирование в Bluefish по сути происходит через меню, что делает его не таким интерактивным как Screem, который делает всё то же самое, но динамически, в то время как я печатаю. Однако, возможности Bluefish уходят далеко за рамки простого HTML- и CSS-редактирования. Плюс ко всему, он без проблем устанавливается и запускается как под KDE, так и под GNOME.
Quanta Plus
По сути своей Quanta Plus - это редактор кода. У него есть некоторые WYSIWYG-возможности, но они не так полезны, как может показаться на первый взгляд. Стоило добавить таблицу на небольшую веб-страницу, как у меня перестало работать превью. Это меня несколько удивило, так в это же время была загружена более сложная страница, и её превью отображалось нормально. Но даже когда превью работает нормально, то присутствует достаточно странная поддержка WYSIWYG-редактирования. Например, при нажатии на клавишу "Enter" вставляется тэг разрыва строки, вместо тэга нового параграфа. То же самое происходит при редактировании списка, когда нажатие на клавишу "Enter" по идее должно создавать новый элемент списка. В общем, превью лучше использовать для просмотра результата, а не для прямого редактирования.
Если не учитывать всё выше сказанное, то Quanta Plus - поистине могучий редактор кода. Его интерфейс гораздо сложнее, чем у Bluefish, но главная задача Quanta Plus всё-таки веб-редактирование. Этот редактор поддерживает выделение синтаксиса, скрипты и языки разметки. Как и в Bluefish, если меню предназначено для работы с одним языком, то работа с этим меню не оказывает влияния на код, написанный на другом языке. Quanta Plus позволяет пользователям создавать собственные панели инструментов для работы с конкретным языком.
Опять же как и в Bluefish, создание новой страницы лучше начинать с меню тэгов, где можно найти диалог для создания основной структуры (мета-тэги, заголовок документа и т.п.). Через меню тэгов можно просто вставить тэг или же открыть диалог для настройки тэга с несколькими параметрами. На мой взгляд, самое главное то, что Quanta Plus предлагает выбрать параметры тэга и значения этих параметров в процессе набирания кода. В Bluefish эта функция отсутствует как таковая, а Screem предлагает выбрать только параметр, но не его значение.
Ещё одна удобная функция, когда вы вставляет тэг, который обычно содержит в себе связанные тэги, то Quanta Plus автоматически добавляет последние. Например, когда вы вставили тэг упорядоченного списка, редактор автоматически добавляет открывающий и закрывающий тэги для одного элемента списка и закрывающий тэг упорядоченного списка.
Управление CSS в Quanta Plus немного запутанно, так как осуществляется посредством двух диалоговых окон. Но если разобраться, то редактирование CSS станет очень простым. Для того чтобы создать CSS-стиль, для начала надо открыть диалог "CSS Selector", чтобы определить элемент, к которому будет применён стиль. Затем двойным щелчком по "CSS Selector" переходим в следующий диалог "CSS Editor", в котором уже можно указать все параметры стиля. В итоге получаем идеально отформатированный CSS-код.
Quanta Plus - самый сложный редактор из трёх рассматриваемых, но в то же время самый способный. Не может не радовать, возможность настроить интерфейс Quanta Plus под свои нужды. Этот редактор предлагает всё необходимое и даже больше, чтобы удовлетворить потребности пользователей, которые занимаются написанием и редактированием HTML- и CSS-кода. Для тех кто использует GNOME, для установки Quanta Plus потребуется скачать дополнительные библиотеки, но это того стоит. У пользователей KDE таких трудностей не возникнет, потому что этот редактор встроен в KDE.
Мой простой совет - используйте Quanta Plus для редактирования HTML- и CSS-файлов. Для тех кто не ищет лёгких путей, предлагаю следующие варианты:
Приятно, что существует по крайней мере три достойных приложения для веб-разработок под Линукс. Screem, Bluefish и Quanta Plus не настолько всеобъемлющие как лидер в этой области Adobe Dreamweaver , но подобрались достаточно близко к нему. Quanta Plus практически аналог Dreamweaver. С учётом того, что цена последнего достаточно высока, и он не поддерживает Линукс по умолчанию, вышеописанная тройка является отличным выбором. Помимо того что они бесплатны, эти редакторы к тому же награждают своих пользователей отличным результатом.
Под Linux существует огромное количество различных приложений для web-разработчиков . В этот раз я напишу про четыре удобных HTML-редактора, которые пользуются популярностью на данной платформе. Если будет интересно, то можно будет продолжить и писать про программы для разработчиков почаще.
Большинство редакторов, помимо ручного ввода кода, поддерживают технологию WYSIWYG . Сам я пробовал только два редактора (ибо всё таки ручками всё писать, с помощью gedit, как то привычней и удобней), но оба они были в официальных репозиториях Ubuntu и доступны из Центра приложений .
BlueFish – кроссплатформенный и очень лёгкий редактор, ориентированный на программистов и веб-разработчиков. Он поддерживает множество языков программирования и разметки, но фокусируется на создании динамических и статичных веб-сайтов. Это открытый проект, выпущенный под лицензией GNU GPL.
Возможности BlueFish:
(так же известный как Quanta ) - популярный редактор под KDE. У Quanta есть WYSIWYG-редактор, а также функция редактирования файлов по FTP.
Возможности Quanta Plus:
Это ещё один полезный инструмент для разработчика. Он поддерживает HTML, CSS, javascript, PHP, CSS и многое другое, вот только поддержки WYSIWYG у него нет.
