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

• 1 слайд

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

• 2 слайд

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

• 3 слайд

  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.
  

• 4 слайд

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

• 5 слайд

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

• 6 слайд

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

• 7 слайд

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

• 8 слайд

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

• 9 слайд

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

• 10 слайд

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

• 11 слайд

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

• 12 слайд

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

• 13 слайд

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

• 14 слайд

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

• 15 слайд

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

• 16 слайд

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

• 17 слайд

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

• 18 слайд

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

• 19 слайд

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

• 20 слайд

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

• 21 слайд

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