1.5 Обзор и сравнительный анализ html-редакторов

Все популярные ныне текстовые процессоры оснащены множеством самых разнообразных средств для создания и редактирования HTML-документов, причем их арсенал постоянно растет и совершенствуется. В мире персональных компьютеров существует стандартный подход к изготовлению документов: в среде, реализующей принцип WYSIWYG. Веб-страницы кодируются на языке гипертекстовой разметки HTML. В настоящее время существует множество специализированных редакторов, позволяющих создавать HTML-документы. Эти программы сразу же завоевали популярность, несмотря на то что гипертекстовую структуру можно получить и в самом обычном редакторе, работающем с текстом в MS-DOS. Редактор гипертекста необходим, в первую очередь, для начинающих пользователей, так как позволяет обойтись (конечно, только на первых порах) поверхностными знаниями о структуре гипертекстового документа и синтаксисе HTML. Поскольку элементы гипертекста создаются в режиме диалога, пользователь может изучать язык параллельно с созданием Web-страницы.

Самый простой вариант это редактор Notepad (Блокнот), входящий в стандартную поставку Windows. Собственно говоря, это именно то, что нужно, простейшая программа, сохраняющая написанный текст именно в том виде, в котором он был введен, и ничего лишнего. Однако в очень простых текстовых редакторах типа Блокнота весь HTML-текст приходится писать вручную, а многим хотелось бы какую-то часть работы автоматизировать. Учитывая это желание, разработчики создали специализированные средства, призванные облегчить труд веб-программиста. Существует несколько простых программ, среди которых наиболее распространенной является TextPad.

Эта программа похожа на Блокнот, однако разработчики специально предусмотрели некоторые удобства для того, чтобы писать код HTML (а также языков Java, С, C++, Perl и еще некоторых). Это выражается в том, что при написании HTML -документа все теги автоматически подсвечиваются синим цветом, их атрибуты -- темно-синим, а значения атрибутов -- зеленым (цвета можно настроить по собственному желанию, так же, как и шрифт). В отличие от Блокнота, TextPad -- редактор многооконный. В нем можно открыть сразу несколько документов и работать, легко переключаясь между ними с помощью списка в левой части окна или вкладок в нижней части.

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

Визуальные редакторы

В основе визуальных редакторов лежит принцип WYSIWYG - what you see is what you get (что вы видите, то и получите). Это означает, что электронный документ с помощью средств компьютерной графики на экране дисплея отображается как виртуальный образ общепринятого реального или привычного нам бумажного документа или фотодокумента со всеми необходимыми реквизитами, а экран дисплея рассматривается как рабочий стол на котором работают с документами.

Основные требования, предъявляемые к таким программам:

• Полная поддержка кодировок русского языка

• Возможность создания электронных документов не только любительского, но и профессионального уровня.

• Визуальный режим работы - возможность верстать электронные документы в режиме «что вижу, то и получаю».

Выбор визуальных редакторов HTML-кода очень велик, однако самые распространенные Microsoft Office SharePoint Designer 2007, Adobe Dreamweaver CS3 и Adobe Homesite Tool 5.5.

Также специалисты выделяют следующие веб-редакторы:

SiteEdit. Программа SiteEdit создана российской компанией EdgeStile и позиционируется разработчиками как система управления сайтом. SiteEdit относится к так называемым визуальным средствам разработки - WYSIWYG-редакторам. Структура всего узла представлена в виде различных страниц, содержащих в себе несколько разделов. Раздел, в свою очередь, может содержать в себе несколько записей или объектов. Перейдя в режим редактирования, появляется возможность редактировать существующие разделы и добавлять новые, изменить текст имеющейся записи или добавить новую запись. Для более кардинального изменения дизайна существует редактор дизайна, предоставляющий широчайшие возможности для изменения всех элементов, присутствующих на странице. Плюсы. Простой интерфейс - не требуется практически никаких знаний HTML, функциональность, небольшой вес дистрибутива, русский язык интерфейса, бесплатность стартовой версии.

Минусы. Невозможность сохранения файлов напрямую из программы, орфографические ошибки.

HTML Source. Еще одна Freeware-программа - это HTML Source. Интерфейс программы напоминает таковой у HomeSite, но инструментов и возможностей, конечно, гораздо меньше. HTML Source, как видно из названия, призван лишь облегчить труд кодера, а не полностью заменить его. В программе отсутствует возможность визуальной разработки страниц, т.е. для тех, кто не знаком с азами языка гипертекстовой разметки, данный продукт не подойдет. Однако тем, кто предпочитает разрабатывать веб-документы вручную, HTML Source готов предложить неплохой набор инструментов для ускорения процесса кодирования. Нельзя не отметить справочную систему программы HTML Source, включающую в себя полное описание возможностей программы, а также спецификации языка HTML, включая CSS.

Плюсы: Компактный размер дистрибутива, оригинальные возможности, продвинутая справочная система.

Минусы: Отсутствие возможностей для визуальной разработки документов, скромные возможности по настройке программы, отсутствие русификации.

Magic HTML Studio. Следующая программа - Magic HTML Studio, разработанная компанией AG FreeSoft. Кому-то подобный интерфейс может и придется по душе, но, на мой взгляд, не совсем удачное решение для программы подобной направленности. Программа содержит средства и инструменты, уникальные именно для Magic HTML Studio. Java Constructor представляет собой мощное, и одновременно простое средство создания скриптов на языке JavaScript, причем для этого пользователю совершенно не нужны знания данного языка программирования.

Плюсы: продвинутые конструкторы JavaScript и CGI-скриптов, широкие возможности для добавления динамических элементов, справочная система на русском языке.

Минусы: не совсем удачный дизайн, отсутствие подсветки синтаксиса, отсутствие визуальных средств разработки.

Adobe Homesite Tool 5.5 - это удобное и функциональное решение для быстрого создания первоклассных сайтов. Средства автоматизации и расширяемый пользовательский интерфейс помогут настроить приложение с учетом ваших предпочтений. Мощные средства управления проектами, проверки качества и контроля над процессом развертывания помогут вам создавать высококачественные сайты, а также выполнять их развертывание и обслуживание. Для повышения продуктивности разработчиков в состав пакета HomeSite вошли различные программы-помощники, которые обеспечат быстрое создание страниц, таблиц, фреймов и элементов JavaScript. Функциональные возможности продукта HomeSite и его пользовательский интерфейс предусматривают широчайшие возможности настройки в полном соответствии с вашими предпочтениями.

FrontPage : WYSIWYG-редактор HTML, входящий в состав пакета приложений Microsoft Office.

Данное приложение при разработке страниц веб-узла пользуется движком Internet Explorer . В браузерах, использующих другие движки (например, Gecko), страницы, созданные с помощью FrontPage могут отображаться по-другому. Тем не менее, при правильном использовании режимов совместимости, FrontPage позволяет создавать сайты, отображающиеся одинаково в любом браузере.

Программа обладает широким спектром возможностей, в частности, может автоматически отправлять изменения, внесённые разработчиком сайта в исходные тексты, в режиме реального времени.

В Microsoft Office 2007 программа FrontPage была заменена на SharePoint Designer

Office SharePoint Designer 2007 представляет инструменты для автоматизации бизнес-процессов, построения эффективных приложений на платформе Microsoft SharePoint и адаптации узлов SharePoint в соответствии с потребностями организации - и все это в среде, управляемой информационными технологиями.

Быстрое создание приложений для повышения производительности труда рабочих групп С Office SharePoint Designer 2007 вам не потребуется программировать для создания и развертывания интерактивных решений на платформе SharePoint.

Разработка привлекательных узлов SharePoint, адаптированных в соответствии с потребностями организации Office SharePoint Designer 2007 предлагает профессиональные средства разработки, необходимые для создания интересных страниц SharePoint, совместимых со многими веб-обозревателями. Используйте интуитивно понятный интерфейс редактора WYSIWYG, быстро форматируйте страницы SharePoint с помощью таблиц стилей CSS и изменяйте разметку и форм

Adobe Dreamweaver CS3. Dreamweaver -- HTML-редактор. Разработан и поддерживался компанией Macromedia в версиях до MX (6 версия, 2005 год). Богатый инструментарий, открытость приложения для всевозможных настроек, удобный интерфейс и другие особенности сделали Dreamweaver одним из наиболее популярных HTML-редакторов в мире. Популярность программа получила, начиная с версии MX. Эта версия была выпущена компанией Macromedia в 2002 году. До этого момента были выпущены версии 1, 2, 3, 4. 5-ю версию компания пропустила. После 4-й версии, Macromedia выпустили 6-ю версию под названием Dreamweaver MX. 7-я версия программы получила название Dreamweaver MX 2004. Затем в 2005 году была выпущена Dreamweaver 8. 20 апреля 2007 уже компания Adobe выпустила более свежую версию под названием Dreamweaver CS3.

Dreamweaver CS3 включает самые прогрессивные возможности и технологии. Тут присутствует полная поддержка формата CSS, с функцией проверки его совместимости с различными браузерами, функциональный редактор кода веб-страниц и возможность работать с такими технологиями, как: XML, JavaScript, PHP, Adobe ColdFusion, ASP и ASP.NET. В новой версии появилась среда для разработки Ajax-приложений, которые могут выполнять самые разные функции (получение информации из RSS каналов и баз данных, создание визуальных эффектов и многое другое), добавлена возможность создания сайтов на основе тегов DIV, реализована тесная интеграция с другими программами Adobe, например, с программой Adobe Device Central CS3, которая поможет создать и протестировать работу веб-сайта для мобильных устройств, а также внесены многие другие нововведения и улучшения.

Выводы

1) Рассмотрев предложенные классификации сайтов, были выделены следующие их виды: отвлеченные классификации и визуальные классификации. Отвлеченная классификация предполагает, что существует переход от более документо - или печатно-ориентированных веб-сайтов к более интерактивным программным веб-сайтам. Группируя веб-сайты по визуальному признаку выделяют веб-сайты, которые основываются на текстовом содержимом или фокусируются на графическом представлении или изображениях.

2) При изучении технологии создания веб-сайтов дана характеристика популярных серверных языков. Среди них наиболее распространенными являются PHP, Perl, ColdFusion, ASP.

3) Все программы создания Web-сайтов делятся на текстовые редакторы, типа Блокнота, и визуальные редакторы, самые распространенные из которых Microsoft Office SharePoint Designer 2007, Adobe Dreamweaver CS3 и Adobe Homesite Tool 5.5. Последние являются наиболее мощными.

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

5) В связи с выше сказанным, считаем необходимым провести сравнительный анализ наиболее мощных визуальных редакторов создания Web-страниц во 2 главе.

Практическое сравнение наиболее популярных WYSIWYG - редакторов Web-страниц

Microsoft SharePoint Designer 2007

Редактор Microsoft Office SharePoint Designer 2007 -- это новый продукт, созданный на основе технологий Microsoft Office FrontPage 2003 и включающий набор средств, позволяющих непрофессиональными пользователями автоматизировать бизнес-процессы, создавать эффективные приложения. Office SharePoint Designer 2007 позволяет быстро разрабатывать приложения и инструменты отчетности с поддержкой рабочих процессов на платформе SharePoint. Достоинствами этого редактора являются:

• Простота создания Web-узла.

• Простота обновления Web-узла.

• Тесное взаимодействие с Microsoft Office.

Интерфейс программы разработан по схеме большинства программ Microsoft Office и это очень удобно т.к, унификация внешнего вида поможет новичкам быстрее освоить основные её возможности.

Данный визуальный редактор позволяет создавать функционально насыщенные и профессионально оформленные Web-узлы. Мы как пользователи можем точно позиционировать элементы Web-страницы, импортировать и редактировать HTML-файлы, а также применять новейшие Web-технологии. Office SharePoint Designer 2007 включает профессиональные средства разработки, необходимые для создания эффектных страниц SharePoint, среди которых высококачественный редактор WYSIWYG и полная поддержка технологии ASP. В пакет включены средства верстки Web-страниц и их оформления с помощью согласующихся по цвету элементов. При этом активно используются такие технологии, как Dynamic HTML и Cascading Style Sheets, делающие страницы "живыми" и красивыми. Помимо WYSIWYG-редактора с генератором HTML-кода в продукт входит мощный HTML-редактор. Благодаря этому те пользователи, которые привыкли работать непосредственно с HTML-кодом, могут делать это еще продуктивнее.

Одно из достоинств Office SharePoint Designer 2007 является упрощение построения запросов к базам данных и встраивание их в Web-страницы. Можно создавать Web-страницы, в которых информация обновляется всякий раз, когда пользователь открывает или обновляет их в окне браузера, а также создавать Web-узлы, содержащие помимо простых HTML-страниц, различные функциональные компоненты.

Основными достоинствами Office SharePoint Designer 2007 являются:

• Автоматизация бизнес-процессов, таких как утверждение документов, уведомление о событиях и других совместных задач с помощью Workflow Designer. Workflow Designer позволяет, в частности, автоматизировать назначения задачи и уведомления, связанные со списками SharePoint и библиотеками документов.

• Создание приложений, отчетов и сбор информации из внешних источников (за пределами Web-узла), а также из списков SharePoint и библиотек документов, расположенных на Web-узле.

• Создаваемые Web-страницы SharePoint позволяют представлять и редактировать данные, взятые из списков и библиотек документов SharePoint, XML-файлов, баз данных Microsoft SQL Server, Web-служб и корпоративных систем.

• Создание улучшенных интерактивных страниц Microsoft ASP.NET. Office SharePoint Designer 2007 поддерживается создание Web-страниц, которые основаны на таких Web-стандартах, как XHTML и таблицы каскадных стилей.

• Возможность вставки и редактирования элементов управления с помощью мощных меню операций и сетки управления свойствами, ранее доступных. Для изменения формата и разметки сразу всех узлов SharePoint достаточно отредактировать главную страницу и изменить таблицы каскадных стилей SharePoint.

• Office SharePoint Designer 2007 автоматически выполняет такие рутинные операции, как автоматическое исправление всех ссылок на страницы или файлы при переименовании или перемещении этих объектов.

• С помощью Office SharePoint Designer 2007 можно открывать, редактировать и улучшать Web-страницы, созданные в любой версии FrontPage.

Office SharePoint Designer 2007 интегрирует средства редактирования HTML во все приложения Office и автоматически поддерживает гиперссылки во всех документах Office.

Поддержка формата XML, реализованная в Office SharePoint Designer 2007, позволяет разработчикам создавать настраиваемые теги, обеспечивающие гибкость организации и представления информации.

Минусы: Тесное взаимодействие с Microsoft Office ограничивает взаимодействие с другими программными средствами.

Dreamweaver CS3 - это программа для облегчения написания HTML кода ("веб-страничек"). Как и многие другие программы визуального написания HTML, он имеет для этого довольно мощные средства.

Нажимаем кнопку и получаем готовый кусок кода; переносим выделенные элементы в другое место одним движением мыши и получаем серию изменений, которая, при попытке произвести ее вручную, заняла бы не одни сутки.

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

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

Dreamweaver CS3 автоматически найдет код в ведущих браузерах и подскажет причину и решение потенциальной проблемы. Также, редактор дает возможность получить решение наших CSS-проблем при помощи нового ресурса Adobe - CSS Advisor: сообщества разработчиков и дизайнеров. Данный редактор кода проверяет код по XHTML- и CSS-стандартам. Dreamweaver CS3 - это первый инструмент, позволяющий автоматизировать нахождение и решение множества наиболее популярных CSS-ошибок, что позволяет вести браузерную разработку.

Одно из преимуществ - интеграция с Adobe Photoshop. Дизайнеры достаточно часто обрабатывают необходимые файлы в Photoshop. Используя Dreamweaver CS3 и Photoshop CS3 можно непосредственно копировать и вставлять изображения в Dreamweaver. Просто надо выбрать тип компрессии и файл, а также место вставки в документ. Dreamweaver CS3 запомнит источник файла, поэтому при необходимости с легкостью сможем отредактировать необходимый файл. Помимо копирования и вставки, мы можем импортировать в Dreamweaver CS3 непосредственно Photoshop CS3-документ, да Dreamweaver CS3 теперь понимает PSD-файлы преимущества использования CSS все очевидней, а потому многим необходим пример использования. Данный редактор предлагает на выбор воспользоваться шаблонами одно-, двух- или трехколоночными шаблонами, которые могут быть как фиксированной, так и «эластичной» ширины. У визуального редактора Dreamweaver CS3 помимо вышеперечисленных достоинств, есть одно общее - это удобство, наглядность и простота в освоении.

Минусы: Dreamweaver CS3 занимает довольно много ресурсов на компьютере.

Adobe Homesite Tool Разнообразные средства повышения производительности и поддержка web-стандартов обеспечивают быстрое создание первоклассных сайтов.

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

Заготовки кода (Code Snippets) позволяют инкапсулировать отдельные фрагменты исходных текстов и многократно использовать их при создании различных страниц, или же обмениваться ими с другими разработчиками.

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

Возможность создания и настройки клавиатурных комбинаций для быстрого вызова и автоматического выполнения различных функций. Заготовки кода и средства выполнения пользовательских сценариев позволят вам работать более быстро и продуктивно. Продукт HomeSite предусматривает возможность создания новых диалоговых окон Tag Editor и записи новых тэгов в списки Tag Insight. Благодаря поддержке этих функций можно создавать собственные тэги, после того как освоите соответствующие языки.

Adobe HomeSite, пожалуй, является одним из самых распространенных средств редактирования HTML-документов среди пользователей, предпочитающих кодировать страницы вручную. Вместе с тем, HomeSite позволяет значительно ускорить сам процесс создания и облегчить работу разработчика. Adobe HomeSite обеспечивают удобную подсветку синтаксиса не только HTML-страниц, но и файлов PHP, Perl, ASP, MySQL и других популярных средств разработки. HomeSite имеет мощную справочную систему, содержащую кроме описания возможностей программы спецификации языка HTML. Альтернативным способом ввода вручную всех атрибутов тега является, так называемый, Tag Editor - редактор тегов, с помощью которого можно существенно облегчить процесс присвоения значений различным атрибутам. Отдельно стоит отметить средства для создания и конфигурирования таблиц и фреймов - Table Wizard и Frame Wizard, позволяющие существенно облегчить жизнь разработчику при создании таблиц и фреймов сложной структуры.

Homesite содержит встроенный модуль проверки орфографии, проверяющий не только корректность использованных дескрипторов, но и непосредственно правильность самого текста, а также редактор файлов CSS - каскадных листов стилей под названием TopStyle.

К достоинствам программы можно отнести функциональность, универсальность, поддержку различных языков программирования, понятный интерфейс, широкие возможности и мощную справочную систему. Минусы: необходимо хотя бы поверхностное знание языка HTML для создания страничек.