Презентация - "Сравнительный анализ редакторов кода html+css"

Сравнительный анализ редакторов кода html+css
Автор:

Преподаватель информатики/разработки кода ИС
Гнеушев С.А.

Введение
В настоящее время существуют редакторы двух типов:
         WYSIWYG-редактор
         Текстовой HTML редактор

Другое название WYSIWYGредакторов – визуальные редакторы HTML. Фактически, задача этого типа редакторов – предоставить интерфейс редактирования, в котором можно сразу увидеть, как будет выглядеть реализация кода на действующей странице сайта в браузере. Для простейшей работы в редакторе этого типа не нужно знание HTML. С работы в таком редакторе проще стартовать начинающему пользователю, не имеющему опыта написания кода.
Такой тип редакторов часто встраивают в веб сайты, для упрощения настройки внешнего вида сайта по некоторым заранее написанным шаблонам или для редактирования  контента сайта.
Текстовой HTML редактор —этот тип HTML редакторов ориентирован непосредственно на работу с текстом (кодом) [2]. Чтобы использовать такой редактор, вам нужны будут знания как минимум языка HTML. В процессе использования такого редактора вы не сможете постоянно наблюдать готовую реализацию страницы разрабатываемого вами вебсайта.
Однако, применение текстового редактора дает разработчику значительно больше свободы, возможностей оптимизации кода и др.

Visual Studio Code
Выпущен компанией Microsoft на основе кода Atom, Visual Studio Code имеет часть функционала IDE (Integrated development environment) - интегрированной среды разработки – мощной программы, содержащей, кроме текстового редактора кода, еще ряд механизмов, позволяющих проводить анализ кода, запуск его и отладку.
Часто именно этот инструмент представляют, когда говорят о том, какой функционал должна иметь IDE для web разработки (рисунок 1). Во многих рейтингах бесплатных HTML редакторов именно Visual Studio Code занимает первое место, используясь разработчиками все чаще, и чаще. Так, к примеру, по данным Stack Overflow, этот редактор в 2017 году использовали 24% веб-разработчиков, а в 2018 году – уже 38,7. 
Основные характеристики программы представлены в таблице 1.

Таблица 1 – Характеристики Visual Studio Code

Рисунок 1 – Главное окно Visual Studio Code

Adobe Dreamweaver CC
Программа Adobe Dreamweaver CC, разработанная и управляемая технологическим гигантом Adobe Inc, является мощным и универсальным инструментом премиум-класса. Она обслуживает как back-end, так и front-end разработку. Являясь программным обеспечением с закрытым исходным кодом, Dreamweaver предназначен для работы в экосистеме Adobe. Adobe также предоставляет поддержку, плагины и функции, чтобы вы всегда могли без проблем писать код.
Dreamweaver - это один из редакторов, которые поддерживают как текстовые, так и WYSIWYG методы работы с кодом. Многие пользователи этой программы считают Dreamweaver самым лучшим визуальным редактором кода. Таким образом, вы можете выбирать, хотите ли вы работать с визуальным представлением страницы или идти классическим путем редактирования текста.

Таблица 2 – Характеристики Adobe Dreamweaver CC

Рисунок 2 – Главное окно Adobe Dreamweaver CC

NVU 
Отличная альтернатива аналоговым WYSIWYG-редакторам, таким как Adobe-Dreamweaver, Web-Page-Maker, FrontPage. Для создания собственного веб-проекта разработчику достаточно знаний разметки, которая является ключевой составляющей для реализации дизайнерского замысла. Не смотря на то, что изначально редактор создавался специально для начинающих веб-мастеров, он пользуется популярностью и профессионалов, стремящихся сэкономить время, отведенное для создания сайта.
Для пользователей имеющим базовые знания в веб-программировании, разработчиком NVU предусмотрен механизм использования расширений, благодаря которому можно на основе Java-сценириев создавать собственные, чтобы впоследствии интегрировать их в NVU-редактор. В программе реализованы практически все инструменты характерные для HTML редакторов.

Таблица 3 – Характеристики NVU

Рисунок 3 – Главное окно NVU

AdobeHomeSite
- это HTML-редактор для профессиональных разработчиков. Web-разработчики, которые пишут код HTML и используют различные скриптовые языки для создания Web-страниц, высоко оценили HomeSite [9]. Этот кодовый редактор, имеющий массу настроек, прекрасно работает с другими приложениями Macromedia.
В новых версиях HomeSite реализован весьма универсальный и полезный подход к построению утилиты проверки орфографии в документе. HomeSite отличает большой набор документации и файлов поддержки по работе с HTML. Для работы с собственно HTML предлагается несколько разных инструментов. Во-первых - TagChooser («выбиратель тегов»). В небольшом окне отображен древовидный список тегов, причем теги скомпонованы не только по назначению, но и по степени «свежести» - теги устаревшие, а также поддерживаемые не всеми браузерами приведены в отдельных подрубриках

Таблица 4 – Характеристики AdobeHomeSite

Рисунок 4 – Главное окно  AdobeHomeSite

CuteSite Builder  
Хорошая программа для начинающих пользователей [3]. Она позволяет легко и быстро создавать Web-сайты профессионального уровня, выбирать определенный дизайн на основе готовых темплейтов. Пользователь может добавить свой контент и опубликовать сайт одним щелчком мыши, при обновлении сайта идет загрузка только модифицированных страниц. Функция Custom Form Wizard Fields позволяет сформировать до 12 полей в формах обратной связи. Автоматически генерируемые формы удобно использовать для получения информации от посетителей вашего сайта. Функция визуального редактирования (WYSIWYG Editing) обеспечивает просмотр текстового форматирования и картинок в том виде, в каком они отображаются на сайте. Мощный редактор таблиц позволяет легко выбирать размеры ячеек, фон и другие параметры таблиц.

Таблица 5 – Характеристики CuteSite Builder  

Рисунок 5 – Главное окно CuteSite Builder  

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

Таблица 6 - Сравнение HTML-редакторов

Рисунок 6 – Результат сравнения HTML-редакторов

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