13 лет назад 3 августа 2005 в 21:23 59

Появление визуальных продуктов для создания интернет-страниц встретило яростные нападки веб-дизайнеров старшего поколения, привыкших все делать вручную. Те, кто осмелился отдать предпочтение WYSIWYG-редакторам (What You See Is What You Get – “что видим, то и получаем”), поначалу подвергались изощренному остракизму.

Отчасти такие нападки были оправданны: нередко страницы, созданные, например, в MS FrontPage Express, некорректно отображались в альтернативных браузерах (до сих пор вспоминаются капризы ранних версий Netscape Communicator). Однако и сами профессионалы веб-дизайна стали роптать на подобные выходки старых браузеров, устав затачивать их код под Netscape, а тем временем качество генерирования кода визуальных редакторов заметно возросло.

Но при всей доступности освоения визуальных редакторов веб-мастер обязан владеть основами языка гипертекстовой разметки, поскольку ни один WYSIWYG-продукт не дает полной власти над кодом. Мы рассмотрим новые версии самых популярных HTML-редакторов, их возможности, недостатки и уникальные свойства.

MACROMEDIA DREAMWEAVER MX 2004
www.macromedia.com
Этот продукт представляет собой достойный пример единой среды для проектирования, разработки и администрирования профессиональных веб-сайтов и приложений. В Macromedia Dreamweaver MX удачно объединены средства визуальной разметки с мощными возможностями текстового редактора Macromedia HomeSite. Кроме того, продукт легко интегрируется с родственным Flash MX. Поддерживаются практически все индустриальные стандарты: HTML, XHTML, ASP, ASP.NET, JSP, PHP, Java/J2EE и XML. Поддержка последнего дает возможность создания, редактирования и проверки XML-кода, а также импорта XML-схем. О популярности этого приложения говорит и тот факт, что независимыми разработчиками создано множество свободно распространяемых расширений для Dreamweaver, доступных на сайте Macromedia.

По большому счету, это приложение заткнуло за пояс конкурентов еще несколько лет назад, в том числе благодаря чрезвычайно удобному инструменту Manage sites, позволяющему мгновенно запускать тот или иной веб-проект. При работе с несколькими ресурсами подобная функция существенно экономит рабочее время благодаря наглядной структуре файлов и папок веб-проекта в панели Files (F8). По желанию веб-мастера редактируемый сайт может быть представлен не только в виде обычного дерева каталогов, но и в форме тестирования на локальном сервере (например, при использовании Apache) или же как удаленный ресурс, для чего применяется встроенный FTP-клиент.

Разработчики предприняли попытку (и довольно удачную) примирить “текстовиков” и поклонников WYSIWYG: веб-мастер может выбрать для себя один из двух режимов интерфейса – Designer или Coder (Edit > Preferences > General > Change Workspace). Кроме того, главное окно позволяет превратить рабочую область в комбинированный режим Splite, когда окна чистого кода и визуальной среды отображаются друг над другом.

Еще одна особенность Dreamweaver MX – продуманная панель свойств объекта, где задаются не только все мыслимые параметры текста, таблиц и гиперссылок, но и выведен список текущих стилей оформления, что позволяет оперативно применять параметры CSS. Кстати, обе панели можно свернуть, освободив место для творчества.

Дополнительное сокращение рутинной работы (например, для вставки комментария) стало возможно за счет дублирования основных и часто используемых команд одноименными кнопками, а также за счет дополнительных вкладок для других объектов (например, команды создания слоев или фреймовой структуры).

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

Пока заклятые друзья Dreamweaver только учились ходить, продукт от Macromedia с элегантным изяществом создавал динамичные страницы благодаря встроенному инструменту Behaviors (Shift+F3). Так, несколькими щелчками мыши генерировался Java-script для всплывающего окна или функции редиректа. Причем программа еще несколько лет назад научилась оптимизировать этот Java-script для конкретного браузера. Есть даже утилита для оптимизации создаваемого кода посредством удаления непарных и пустых тэгов, а также того безобразия, что создается при сохранении DOC-файла в HTML-формат.

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

Помимо этого с помощью Dreamweaver MX можно создавать ColdFusion Components, что является наиболее существенным преимуществом данного продукта. В конечном итоге Dreamweaver MX предоставляет не только общепринятые элементы современных визуальных сред разработки (столь любимые обычными пользователями), но и поддержку доступа к базам данных, создание серверных компонентов и веб-сервисов. А вот недостаток приложения заключается в большой нагрузке на систему даже на самых современных машинах.

MS FRONTPAGE 2003
www.microsoft.com
Злые языки утверждают, что лучший способ получить отказ работодателя при устройстве на должность веб-дизайнера – указать в резюме владение этим визуальным редактором. Главная особенность FrontPage, привлекающая начинающих веб-дизайнеров, играет с ними злую шутку. Речь идет об интерфейсе, весьма напоминающем среду MS Word: практически те же меню и панели форматирования текста. За такое сомнительное удобство раньше приходилось расплачиваться весьма некорректным HTML-кодом, создаваемым первыми версиями приложения.

Новейшие версии помимо тесной интеграции с MS Office и облагороженного интерфейса могут похвастаться тремя режимами работы: Design, Splite и Code. Кроме того, появилась панель, отображающая структуру тэгов документа. Правда, очень трудно отделаться от мысли, что теми же возможностями давно обладает Dreamweaver (с той лишь разницей, что расположение переключателей режимов во FrontPage находится в нижней части окна, а панель тэгов – в верхней).
Хотя разработчики уверяют, что создание в среде FrontPage самых совершенных веб-узлов возможно, многие предлагаемые функции (меню Insert > Web Component) останутся бесполезными, если сервер не поддерживает расширения FrontPage – во всяком случае, в России далеко не каждый хостер предлагает такую услугу.

Средства точной разметки документа действительно выполнены на уровне, хотя, на наш взгляд, и менее аккуратно, чем в Dreamweaver. Возможность создания слоев теперь позволяет позиционировать элементы дизайна в произвольном месте документа. Инструмент Behaviors, известный по Dreamweaver, появился только в последней версии FrontPage, да и по своим возможностям он выглядит гораздо скуднее. Качество создаваемого кода заметно повысилось, ко всему прочему исчезли обязательные тэги . И, как ни странно, новая версия редактора обогатилась инструментом проверки совместимости корректности HTML-кода с различными типами браузеров. По каждой проблемной записи будет выдается подробнейший отчет.

Зато этот редактор может похвастать утилитой для очистки кода от ошибок и лишних тэгов, причем по некоторым параметрам этот инструмент превосходит свой аналог в Dreamweaver – например, можно убрать пробелы между строками и выровнять содержимое кода, что позволит несколько снизить объем документа. Из небольших, но приятных возможностей хотелось бы отметить создание интерактивных кнопок (не путать с Java-апплетами ранних версий программы): Insert > Interactive Button, для которых имеется большое число заготовок с поддержкой кириллицы.

FrontPage 2003 имеет еще два безусловных преимущества: первое – удобство сохранения фрагментов веб-страниц посредством копирования нужного участка в браузере и вставки содержимого буфера обмена в окно редактора в режиме Design; второе – демократичное потребление системных ресурсов.
Пожалуй, сегодня можно смело говорить о новом качестве некогда гонимого и нелюбимого многими дизайнерами FrontPage.

ADOBE GOLIVE CS
www.adobe.com
На фоне высокой функциональности Dreamweaver и доступности освоения FrontPage компании Adobe было непросто продвигать свой визуальный редактор на софтверном рынке – нужно было удивить покупателя исключительно оригинальными разработками. В первую очередь, была усилена интеграция GoLive CS с другими продуктами Adobe, что дало возможность без лишних движений размещать на сайтах материалы, созданные в средах Photoshop, Acrobat и Illustrator. Очевидно, посмеявшись над так называемыми веб-узлами во FrontPage, разработчики явили миру Adobe Web Workgroup Server, с помощью которого использование таких материалов стало эффективным, безопасным и действительно удобным для всей команды, работающей над веб-проектом. А для интеграции программ GoLive и Adobe Acrobat в редакторе предусмотрен Adobe GoLive PDF Module.

Adobe умудрился опередить конкурентов в еще одном чрезвычайно перспективном направлении: создании контента для просмотра на беспроводных устройствах. Например, для службы обмена сообщениями Multimedia Messaging Service (MMS) можно создавать слайд-шоу и другое информационное наполнение (поддерживаются мобильные устройства 2.5 и 3G). Причем среда создания подобного содержимого позволяет использовать такие уникальные возможности Adobe GoLive, как мощные функции управления сайтом и ссылками, структурные диаграммы сайтов, шаблоны, интеллектуальные объекты (Smart Objects) и средства оптимизации изображений посредством новой фирменной палитры Live Rendering. Проверка соответствия исходных текстов Adobe GoLive CS полностью удовлетворяет новейшим стандартам консорциума W3C.

Чтобы не отставать от конкурентов в обычных направлениях HTML-строительства, разработчики заложили в Adobe GoLive CS массу готовых к использованию Java-скриптов, позволяющих создавать динамические страницы. Встроенный редактор CSS и вовсе можно назвать самым функциональным из конкурирующей линейки. GoLive умеет работать с потоковыми форматами Quicktime, Windows Media и Real, причем видеоматериал можно “препарировать” и добавить нужный фрагмент в создаваемую страницу. Следует отметить системный демократизм редактора – возможен просмотр создаваемой страницы в Internet Explorer, в том числе и для MAC-платформы.

Недостатки? Ну разумеется, куда же без них. Например, по умолчанию кириллица в HTML-страницах отображается некорректно, что, впрочем, исправляется в программных настройках. Требовательность к ресурсам внушает оправданный пессимизм: GoLive требует под свои нужды почти 90 Мб оперативной памяти и мощный процессор. И при этом запуск программы все равно не отличается высокой скоростью. Недавнее поглощение компанией Adobe другого гиганта – Macromedia – на фоне конкуренции визуальных редакторов выглядит более чем пикантно. Как теперь сложится судьба Dreamweaver, остается только гадать…

NAMO WEB EDITOR 6
www.namo.com
Казалось бы, жесточайшая конкуренция на столь небольшом сегменте рынка не допустит появления нового игрока. Но программисты из южнокорейской компании SJ Namo Interactive Inc, взяв все лучшее из предшествующих визуальных редакторов, выпустили свой продукт, ничуть не уступающий по функциональности корифеям жанра, но необычайно демократичный по отношению к системным ресурсам (процессор частотой 266 МГц и 64 Мб памяти).

Мощный менеджер сайтов, посредством которого ведется каталогизация всех ресурсов в Namo WebEditor 6, не является редкостью – конкурирующие программы тоже содержат подобный инструмент. Но не каждый веб-редактор может похвастаться механизмом, создающим заготовку будущего сайта двумя щелчками мыши (Format > Theme). Все дело во встроенных библиотеках, содержащих не одну сотню вполне приличных заготовок для страниц (все темы разбиты на 11 разделов).

Точно так же не в каждый менеджер сайтов заложен инструмент для поиска и замены определенных фрагментов: теперь не нужно перебирать все страницы для исправления какой-либо ссылки. Еще одна фирменная полезность – для любой рутинной операции редактирования можно создать макрос, без труда сохраняемый командами раздела Key Macro меню Tools. Интегрированный FTP-клиент загрузит созданный ресурс на сервер, а отлаженный, простой и наглядный механизм создания динамических меню в сочетании с Мастером скриптов ставит этот продукт на один уровень с Macromedia Dreamweaver.

Как и предыдущие программы, Namo WebEditor содержит утилиту оптимизации создаваемого кода вместе с инструментом проверки кода на предмет совместимости с различными спецификациями языка HTML и браузерами Netscape. Namo умеет создавать HTML-фотоальбомы, причем редактор сам генерирует миниатюры для предварительного просмотра и средство перехода от одного изображения к другому (Tools > Create Photo Album).

В качестве бонуса к продукту прилагаются четыре программы: Namo Capture, Namo WebCanvas, Namo GIF Animator и Namo Image Slicer. Если первая утилита является обычным граббером экрана, то вторая – гораздо серьезнее. Это графический редактор с довольно приличными возможностями (создание многослойных изображений и всевозможные эффекты для графики) и панелью инструментов, очень похожей на аналог в Photoshop: выделение нужного участка пером, выделение прямоугольника и эллипса, пипетка для выбора цветовой гаммы, наложение текста и другое. GIF Animator пригодится всем, кто желает сделать анимированный баннер для своего сайта, а Image Slicer разрежет большое изображение на части и разместит его в ячейках таблицы для ускорения загрузки.

CUTESITE BUILDER 4.0
www.globalscape.com
Список визуальных редакторов отнюдь не исчерпывается именитыми брендами – малоизвестные разработчики нередко выпускают вполне добротные продукты, позиционируемые как оптимальные для начинающих веб-дизайнеров. В числе таких редакторов отметим CuteSITE Builder. Одним из главных его достоинств является большое количество шаблонов для оформления будущего веб-ресурса. При запуске программы на выбор предлагаются готовые варианты для корпоративного ресурса, персональной страницы и прочее. Но, несмотря на кажущийся аскетизм, в редакторе нашлось место и встроенному FTP-клиенту, и удобному инструменту для оперативной навигации по файлам проекта.
Очевидно, авторы приложения питают особую любовь к фреймовой структуре сайтов (все шаблоны построены по этому принципу). Качество HTML-кода находится на приличном уровне для программ такого рода, хотя интерфейс поначалу непривычен.

WEB PAGE MAKER 1.52
www.webpage-maker.com
Эта небольшая программа предлагает массу заготовок для навигационных меню. Редактор воистину является визуальным, поскольку все элементы страницы представлены в виде отдельных слоев, которые можно перемещать по всему полю страницы. Разработчики, видимо, презирают таблицы, поэтому неискушенный пользователь, решивший применить готовые шаблоны дизайна (к слову сказать, есть и весьма приличные), вынужден создавать страницы, перегруженные лишними тэгами.
По всей видимости, увлекшись таким подходом, разработчики редактора напрочь проигнорировали работу с CSS, не забыв о встроенном FTP-клиенте. Хотя, несмотря на недостатки этого продукта, его можно использовать для извлечения готовых элементов оформления страниц.

NVU 1.0
nvu.mozilla.ru
Бесплатный NVU является Open Source-проектом Linspire по созданию визуального кросс-платформенного HTML-редактора, поэтому можно смело говорить о динамичном развитии и вполне радужных перспективах этого новичка. Как и для Firefox с Thunderbird, основой для создания NVU послужила часть кода, выделенного из Mozilla – код известного многим Mozilla Composer (выросшего, в свою очередь, из Netscape Composer).

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

При эксплуатации NVU не забудьте задействовать опции Очистка разметки (оптимизируется расположение строк кода с одновременным удалением пустых блоков) и Проверка HTML (благодаря онлайн-сервису редактируемая страница будет проконтролирована на предмет соответствия HTML-кода требованиям современных стандартов). Теперь при создании русскоязычных страниц не придется изменять параметры кодировки по умолчанию для корректного отображения кириллицы – в метатэге уже прописано значение Windows-1251. Добавим, что разработчики пообещали поднять функциональность NVU до уровня Dreamweaver и FrontPage.

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

Грядущий новояз
Хотим мы того или нет, но старый добрый язык HTML постепенно сдает свои позиции. Судя по всему, в скором времени единственным языком, на котором будут разрабатываться все веб-ресурсы, станет XHTML (Extensible HTML или “расширяемый HTML”). В этом случае множество документов будут совместимы и доступны любому пользователю Сети, независимо от используемой платформы.
Кратко остановимся на некоторых отличительных особенностях XHTML.

– Все тэги и атрибуты должны быть записаны в нижнем регистре, то есть вместо a href=”index.html” текст_ссылки мы должны будем написать a href=”index.html” >текст_ссылки /a.
– Для незакрытых (пустых) тэгов теперь следует ставить косую черту. Например, популярный тэг разрыва вместо привычного
теперь должен выглядеть как
, а для вставки картинки вместо img src=”kartinka.gif” нужно писать <img src=” alt=”” /.
– Если для некоторых команд нынешнего HTML не требуются закрывающие тэги, то согласно спецификации XHTML все тэги должны быть закрыты. Другими словами, при использовании тэга
li не следует забывать про тэг li
.
– Ко всему прочему атрибуты должны иметь определенное значение. Если в спецификации HTML горизонтальная линия без тени описывалась тэгом

hr size=”1″ noshade=”noshade” /, то по новым правилам та же линия будет описана следующим образом: hr size=”1″ noshade=”noshade” /. Немаловажный момент: запись значений атрибутов в обязательном порядке берется в кавычки, то есть старый вид записи hr size=”1″ /должен быть преобразован в hr size=”1″ /.

Среда ColdFusion
ColdFusion MX является средой разработки веб-приложений. Пакет функционирует на платформах Windows и UNIX, а также взаимодействует практически со всеми базами данных и веб-серверами. ColdFusion работает совместно с веб-сервером для обслуживания запрашиваемых пользователем страниц. Но это не просто инструмент разработки веб-страниц, как Microsoft FrontPage или Macromedia Dreamweaver. Результаты работы ColdFusion больше напоминают страницы ASP (Active Server Pages). Язык CFML (ColdFusion Markup Language) ориентирован на тэги; он несколько проще сценариев ASP, обычно предполагающих знание языка Visual Basic. Кроме того, программа ColdFusion пишется для веб-сервера и кроме платформы Windows может исполняться на компьютерах UNIX или Linux, что нереально для программ ASP.

Хотя среды MS FrontPage или Dreamweaver позволяют успешно создавать статические интернет-страницы, серверы веб-приложений (такие как ColdFusion или ASP) помещают на сервер не страницу, а программу. Когда посетитель вводит URL такой программы, приложение исполняется на сервере, а пользователь получает динамически сгенерированный код HTML. В сравнении с предыдущими версиями Macromedia ColdFusion MX новая упрощает публикацию информационного содержимого на веб-сайте, обладает улучшенными средствами управления сайтами и более обширным набором приложений.