9 лет назад 10 ноября 2009 в 0:36 51

БЕСПЛАТНЫЕ ВИЗУАЛЬНЫЕ ВЕБ-РЕДАКТОРЫ

Автор: Михаил Демидов

Создать более-менее вменяемый веб-сайт сегодня под силу любому. А все благодаря широкому распространению визуальных редакторов HTML. С их же помощью можно редактировать CSS-файлы, скрипты, подобрать красивый шаблон, а также загрузить все результаты творчества по FTP на площадку сайта.

Сегодня WYSWYG-редакторы должны удовлетворять целому ряду требований. Во-первых, они должны поддерживать Windows, желательно Windows Vista (про поддержку Windows 7 мы будем говорить отдельно). Начинающий веб-мастер, скорее всего, работает на XP или Vista, а не на Mac OS или тем более Linux. Однако ряд Windows HTML-редакторов представляют собой портированные с Linux версии, которые не всегда работают так же (быстро и стабильно), как в нативной среде. Во-вторых, WYSWYG-редактор обязательно должен иметь расширенную поддержку Unicode и non-Unicode, что связано с тем, что создаваемые на нем сайты будут содержать кириллицу. В-третьих, само приложение должно иметь соответствующий уровень юзабилити для начинающего пользователя: по возможности расширенное руководство с примерами, простой и удобный интерфейс и, конечно же, либо встроенную библиотеку шаблонов, либо возможность импорта в него шаблонов для создания сайтов. В-четвертых, мы отбираем только бесплатные (freeware) редакторы.

Amaya/xStandard

w3.org/Amaya

xstandard.com

Консорциум W3C, ратующий за соблюдение правильного HTML-кодирования, с 1996 года выпускает собственный редактор HTML под Linux и Mac OS (под Windows приложение выпускается с 1997 года). Тем не менее версия под Windows стала приобретать черты более-менее удобного продукта сравнительно недавно.

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

В Amaya поддерживаются все актуальные на сегодняшний день веб-технологии (HTML 5, CSS 2.1, SVG), а также есть фирменный валидатор кода. Визуальный редактор поддерживает работу с вкладками и обрабатывает их на движке, очень сильно напоминающем WebKit (используется в браузерах Google Chrome, Safari). В этом плане Amaya работает очень быстро и стабильно. У Amaya есть редактор-двойник – Xstandard, построенный на той же платформе, но имеющий ряд дополнительных функций в платной версии (например, прямое перетаскивание файлов в редактор).

Evrsoft First Page 2006

evrsoft.com

Несмотря на упоминание в названии программы 2006 года, она не кажется старомодной или устаревшей функционально (поддерживается HTML 4.0 и CSS 2.0). При первом старте пользователю предлагается большой выбор шаблонов для разных веб-документов. Главный же экран редактора – это удобно расположенные панели инструментов (крупные кнопки создания якорных гиперссылок, изменения шрифтов, свойств страницы, вставки изображений, построения таблиц, проверки правописания, публикации страницы на сервере, а также нескольких дополнительных инструментов) плюс компактный браузер с удобным доступом к справочникам по HTML/CSS, некоторым PHP/JavaScript-элементам, а также инспектор по тэгам и объектам веб-документа. В меню HTML-объектов, которое располагается слева вертикально от границы окна редактора, можно увидеть конструкторы форм, кнопок и интерактивных меню.

Заметим, что в Evrsoft First Page 2006 поддерживаются несколько режимов отображения панелей. По умолчанию открывается Easy/Normal Mode (меньшее количество опций в меню, простая компоновка интерфейса редактора, отсутствие некоторых возможностей, например работы со скриптами), но можно переключиться в Advanced и Hardcore Mode, когда появляются возможности использования, например, SSI.

Для удобства есть автоматическое сохранение наиболее часто используемых настроек (например, параметров изображений или таблиц) для последующей быстрой вставки в документ (SmartHistory), несколько полезных инструментов для конвертации HTML-XHTML, HTML-CSS, очистки и валидации кода, встроенная галерея динамических скриптов iScriptz (например, для создания меню), встроенный редактор изображений с возможностью установки действий при клике на разные участки картинки, мастер по созданию линеек прокрутки, генераторы карты сайта и фотогалерей. Стоит также отметить наличие FTP-клиента.

Созданные веб-документы можно просматривать в двух движках: на базе IE (правда, старых версий, что на самом деле не очень хорошо) и на базе Gecko (Mozilla Firefox и “покойный” Netscape опять же старых версий). Тем не менее продукт работает достаточно быстро. Еще один недостаток решения – отсутствие поддержки работы с вкладками, то есть в нем всегда активна только одна страница в режиме правки.

KompoZer/NVU/SeaMonkey

kompozer.net

nvu.mozilla-russia.org

mozilla-russia.org/products/seamonkey

Этот HTML-редактор собран на основе выделенного из проекта Mozilla Application Suite Mozilla Composer – небольшого средства для верстки веб-сайтов. Естественно, как Open Source-проект, изначально данное решение создавалось под Unix-подобные системы (Linux и т. д.), после чего в целях популяризации портировалось на Windows. Поэтому мы вынуждены сразу признать тот факт, что в нативной среде этот редактор работает быстрее и стабильнее.

В отличие от очень простого Evrsoft First Page 2006 в KompoZer пользователь сразу же попадает в окно редактора (то есть при запуске выбор шаблона не предусмотрен). Но поскольку этот HTML-редактор умеет работать с HTML/CSS, найти нужный шаблон в интернете и переделать его под свои цели нетрудно. В нашем примере мы так и поступили, открыв уже сверстанную HTML-страницу.

KompoZer позволяет работать с базовыми объектами HTML (шрифты, изображения, таблицы) и некоторыми дополнительными (конструктор форм). Инспектора тэгов мы здесь не увидели, зато есть остальной джентльменский набор инструментов: валидатор кода, встроенный FTP-менеджер, редактор CSS, консоль сценариев JavaScript (а вот каталога примеров таких кодов нет), проверка правописания и “очистка” кода.

В целом аскетичный интерфейс панелей инструментов позволяет создавать только простые документы или вносить правки в уже существующие. WYSWYG-редактор (движок как у Mozilla Firefox) работает с некоторым замедлением при открытии “тяжелых” страниц, однако, что радует, поддерживает работу с вкладками. Огорчает не очень удобная реализация окон синхронного просмотра кода и дизайна страницы – для этого потребуется переключаться в меню View (причем “горячих” клавиш в этих режимах нет, в отличие, например, от запуска редактора CSS).

Yahoo SiteBuilder

sitebuilder.yahoo.com

В начале 21 века домашние страницы многих пользователей размещались на веб-хостинге Geosities. В прошлом году его владелец, компания Yahoo!, в связи с финансовыми проблемами закрыла его. Но нам интересен не этот факт, а специальная утилита для работы с ним, нацеленная на начинающих пользователей – Yahoo SiteBuilder. Датированный осенью 2008 года дистрибутив содержит, как это ни странно, полупрофессиональный HTML-редактор с очень продуманным WYSWYG-движком.

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

Об эпохе доткомов, когда активно развивались сайты электронной коммерции, напоминают дополнительные инструменты в редакторе – например, мастер по созданию витрины интернет-магазина или вставка кнопок оплаты товаров по PayPal. Впрочем, если отбросить все эти “экономические пережитки”, то в этом приложении можно создавать пускай и не самые современные, но довольно приличные веб-сайты, даже с мультимедиа. На старомодность намекают лишь известные по началу 2000-х годов скрипты DHTML, позволяющие при загрузке страницы проигрывать музыку в MIDI, использовать спецэффекты для старых версий IE, вроде подпрыгивающих изображений или бегущей строки в браузере. Плохо только, что CSS данный продукт не поддерживает ни в каком виде, а закачивать данные по FTP он может напрямую только на веб-хостинг от Yahoo!

Среди современных бесплатных продуктов для создания и визуального редактирования веб-документов лично нам очень понравился Evrsoft First Page 2006. Столь продвинутая функциональность бесплатного решения (не Open Source) наводит нас на размышления об экономической целесообразности выпуска такого продукта. И действительно, в 2006 году эта разработка была коммерческой, но сейчас она доступна в полнофункциональной версии без ограничений (впрочем, в самой программе остались пункты меню для регистрации).

Очень близко к Evrsoft First Page 2006 приближается KompoZer при условии, что начинающий веб-мастер все-таки будет изучать HTML (в продукте не очень удобно организован интерфейс для правки исходного кода).

Yahoo SiteBuilder и продукты Amaya и xStandard находятся в равной весовой категории – у первого решения чрезвычайно простой и практичный интерфейс с шаблонами, мастерами и прочими вспомогательными инструментами для создания сайта за пять минут, но полностью отсутствуют поддержка современных технологий (CSS, PHP и прочее) и перспектива развития из-за политики вендора, а у второго продукта очень быстрый и приятный интерфейс, большой потенциал, но, как нам кажется, некоторая недоработка в плане юзабилити.