5 альтернатив Dreamweaver, которые вы должны знать

Компания Macromedia выпустила первую версию Dreamweaver в 1997 году для операционной системы Mac OS 8. Всего три месяца спустя — с версией 1.2 — вышла версия для Microsoft Windows. Десять лет спустя программа для разработки веб-сайтов была поглощена компанией Adobe и добавлена в Creative Suite (теперь заменена Creative Cloud), чтобы заменить редактор GoLive. Те, кто хочет использовать это обширное приложение для создания и проектирования отзывчивых веб-приложений, должны либо оформить подписку на один продукт, либо арендовать полный пакет Creative Cloud. Это означает, что программное обеспечение Dreamweaver в основном используется профессионалами.

В этом руководстве сначала объясняются особенности программы Adobe, а затем представлены интересные, в основном бесплатные альтернативы Dreamweaver.

Dreamweaver набирает очки благодаря типичному интерфейсу Adobe, с которым уже знакомы пользователи Photoshop, InDesign, Illustrator и других программ Creative Cloud. Набор функций редактора HTML, который является мерилом всех вещей с точки зрения WYSIWYG, значительно расширился с момента выхода Creative Cloud, превратив написание кода в детскую игру. Например, можно просматривать все изменения в режиме реального времени без перезагрузки страницы или редактировать код CSS прямо в HTML-файле с помощью встроенного редактора. Реализованный механизм кодирования также помогает писать чистый код, автоматически заполняя фрагменты с поддержкой Emmet, создавая автоматические отступы и выделяя цветом связанные элементы. Кроме того, Dreamweaver предлагает следующие возможности:

• Валидация кода

• Поддержка процессоров CSS (Sass, Less)

• Поддержка PHP (начиная с версии PHP 5.4)

• Несколько курсоров для одновременного написания и редактирования различных строк кода

• Интегрированный CSS-фреймворк bootstrap для отзывчивого веб-дизайна

• Доступ к безлицензионным фотографиям и векторной графике из Adobe Stock

• Легкий доступ к собственной графике, дизайну и другим ресурсам в Creative Cloud.

Если у вас есть доступ ко всем продуктам Creative Cloud и вы уже опробовали Dreamweaver, вы поймете, что в программном обеспечении Adobe нет ничего плохого. Но для разработчиков с ограниченным бюджетом существуют хорошие альтернативы Dreamweaver, которые можно использовать бесплатно. В следующих параграфах мы представим пять интересных вариантов, не только рассказав об их особенностях и специфике, но и обсудив различия и сходства с программным обеспечением Adobe. Удобство использования различных доступных инструментов будет подробно рассмотрено.

Преемник Composer/Nvu — BlueGriffon от Disruptive Innovations — использует движок рендеринга Gecko, написанный на C++ и используемый в основном в веб-браузере Firefox, как основу для реализованного WYSIWYG-редактора. Это дает возможность создавать и редактировать сайты на HTML 4, HTML 5 и XHTML, позволяя изучать их в процессе творчества, открывая предварительную версию. Пользовательский интерфейс доступен на 20 языках, включая английский, испанский, немецкий и французский. BlueGriffon работает на новых системах Windows (от Windows 7 и далее) и macOS (от 10.8), а также на дистрибутиве Linux Ubuntu (от 16.04) — чего нет у Dreamweaver. Веб-редактор также включает следующие функции:

• Простая интеграция HTML5-форм, видео- и аудиофайлов

• Редактор CSS (позволяет использовать методы 2D и 3D трансформации)

• SVG-редактор

• Менеджер шрифтов для FontSquirrel и Google Fonts

• Подсветка синтаксиса и автозаполнение

• Настраиваемые опции меню и сочетания клавиш

• Доступность через ARIA (доступные богатые интернет-приложения).

В дополнение к этим функциям, которые вы можете использовать бесплатно в бесплатной версии BlueGriffon, есть ряд первоклассных дополнений, которые можно приобрести, купив одноразовую лицензию: среди прочего, платная версия содержит улучшенный редактор CSS, включающий визуальный редактор CSS-селекторов, менеджер инструментария для интеграции нескольких JavaScript и CSS файлов одним щелчком мыши, а также доступ к более чем 2 500 готовым к использованию шаблонам. Компоненты BlueGriffon с открытым исходным кодом можно найти на GitHub, а также на официальной домашней странице. На официальном сайте вы также можете приобрести лицензионную версию, если вас интересуют дополнительные возможности.

Программа для разработки веб-страниц KompoZer возникла в проекте Mozilla Nvu и поэтому основана на движке Gecko. Сначала KompoZer обеспечивал небольшие оптимизации программного обеспечения Nvu, но в итоге стал самостоятельной программой для редактирования веб-страниц под свободными лицензиями GNU GPL (GNU General Public License), GNU LGPL (GNU Lesser General Public License) и MPL (Mozilla Public License). Команда из Mozilla прекратила разработку в 2010 году, но сейчас программа может использоваться на всех распространенных системах Windows и macOS, а также Ubuntu (версия 14.04 или выше). Сейчас для KompoZer существует более 20 различных языковых пакетов, включая немецкий, английский, французский, итальянский и испанский.

Даже если KompoZer не является одной из альтернатив Dreamweaver, которая может идти в ногу с набором функций и сложностью программы Adobe, приложение с открытым исходным кодом предлагает пользователям некоторые возможности, которые позволяют создавать профессиональные веб-страницы:

• Высокопроизводительный WYSIWYG-редактор, позволяющий легко переключаться с кода на предварительный просмотр

• Встроенный редактор CSS, включая функцию импорта ранее существующих таблиц стилей

• Настраиваемые опции меню

• Автокоррекция и подсветка синтаксиса

• Вкладки для одновременной работы над несколькими страницами

• Мастер форм

• Встроенный очиститель разметки, который проверяет проекты на соответствие требованиям W3C

• FTP-менеджеры сайтов, включая функцию drag-and-drop для медиафайлов (т.е. картинок).

Программа также имеет несколько полезных расширений — таких как, например, link checker, который можно использовать для проверки валидности интегрированных ссылок. Как возможная альтернатива Dreamweaver, KompoZer все еще не имеет поддержки PHP, а также новых веб-стандартов, таких как CSS3 и HTML5. Все загружаемые версии для различных платформ, а также подробную документацию можно найти на официальном сайте проекта. Там же вы можете сообщить об обнаруженных ошибках программы или внести предложения по новым функциям.

Brackets — это альтернатива Dreamweaver с открытым исходным кодом, которую сама компания Adobe запустила в 2011 году в качестве проекта сообщества. В официальном репозитории GitHub вы можете найти более 5500 форков этого программного обеспечения, лицензированного MIT, написанного на HTML, CSS и JavaScript. Веб-редактор доступен для Windows и Mac, а также для Linux (Ubuntu и Debian), но варианты для Linux не предлагают полной палитры функций. Brackets работает на основе среды выполнения JavaScript Node.js и может быть дополнен множеством расширений, включая WYSIWYG-редактор, который не входит в стандартную версию.

В этой альтернативе Dreamweaver вы можете видеть предварительные просмотры вашего кода в стандартной форме, а не в программе. У вас также есть возможность в любое время просмотреть предварительные результаты вашего веб-проекта в Google Chrome. Для этого необходимо сначала установить браузер Chrome, если у вас его еще нет. Три фундаментальные особенности Brackets повышают эффективность инструмента разработки для современных веб-редакторов:

• Быстрое редактирование: Brackets предлагает идеальную платформу для написания кода — вы открываете программу и просто начинаете работать. Вам не нужно переключаться между различными файлами для HTML, CSS и JavaScript, вместо этого вы используете интегрированные редакторы для таблиц стилей и скриптов непосредственно в документе HMTL. Вы выбираете нужный элемент, а затем открываете упомянутую маску обработки с помощью специальных сочетаний клавиш.

• Предварительный просмотр в реальном времени: Если вы используете функцию предварительного просмотра в Chrome, Brackets автоматически отправляет все изменения в HTML и CSS-коде в режиме реального времени, чтобы вы могли сразу проверить, работают ли нужные функции или нет. Корректировки, сделанные с помощью JavaScript, пока не интегрированы в живой предварительный просмотр, но соответствующая функция планируется, по словам производителя. В настоящее время уже можно увидеть изменения JavaScript в предварительном просмотре браузера, если предварительно сохранить проект Brackets.

• Поддержка препроцессоров: Редактирование кода в этой бесплатной альтернативе Dreamweaver не только быстрое, но и возможность использовать файлы Less и SCSS — благодаря поддержке препроцессоров CSS Less и Sass. Благодаря их упрощенному синтаксису, с которым Brackets умеет работать, вы можете писать и редактировать таблицы стилей еще быстрее.

Упомянутая выше расширяемость Brackets достигается в основном благодаря активному участию сообщества — новые плагины появляются практически еженедельно. Особенно популярны валидатор W3C, плагин Emmet и Beautify, инструмент для оптимизации HTML, JavaScript и CSS кодов. Простота и широкие возможности расширения платформы для разработчиков, несомненно, делают Brackets лучшей альтернативой Dreamweaver.

Aptana Studio — это бесплатная интегрированная среда разработки от компании Aptana, Inc. Платформа основана на Java-инструменте Eclipse и поддерживает JavaScript, HTML5 и CSS3, а также менее распространенные языки программирования, такие как PHP, Python и Ruby. Также возможно интегрировать Ajax-библиотеки, такие как jQuery, Prototype или script.aculo.us, непосредственно в приложение для использования в процессе разработки. Альтернатива Dreamweaver существует в виде отдельной версии для Windows (XP и выше), Linux (Ubuntu 9.04/Fedora 12 и выше) и macOS (OS X 10.5 и выше), а также в виде плагина для Eclipse (Eclipse 3.6 и выше). Команда разработчиков распространяет Aptana Studio по модели двойного лицензирования: Пользователи могут выбрать либо комбинацию лицензии GNU-GPL и исключения Aptana-GPL, либо альтернативную Aptana Public License (APL).

Помимо широкого спектра поддерживаемых языков программирования и платформ, веб-редактор также содержит следующие основные функции:

• Мастер кода: Мастер кода предоставляет предложения по возможным аргументам, свойствам или методам и отображает поддержку любых элементов HTML, CSS или JavaScript вашего веб-проекта в популярных веб-браузерах.

• Встроенный дебаггер: Отладчики JavaScript и Ruby on Rails уже реализованы и помогают выявить и исправить ошибки в вашем веб-приложении.

• Мастер развертывания: Благодаря мастеру развертывания, Aptana Studio предлагает инструмент, поддерживающий загрузку, скачивание и синхронизацию файлов веб-проекта через FTP, SFTP и FTPS.

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

• Встроенный инструмент командной строки: Встроенный терминал позволяет выполнять системные команды непосредственно в Aptana Studio.

• Гибкая среда разработки: Вы вольны настраивать Aptana Studio как угодно и расширять базовые возможности, добавляя скрипты для стандартных команд и ярлыки, чтобы достичь оптимального удобства.

Благодаря тесной связи с Dreamweaver эта бесплатная альтернатива также предлагает основные функции Eclipse. Среди них — визуальная подсветка синтаксиса, интеллектуальное завершение кода и автоматическое закрытие открытых тегов. Кроме того, в Aptana Studio реализована поддержка новейших веб-стандартов, таких как HTML5. Установочные файлы для всех платформ, а также плагин для Eclipse можно найти на официальной домашней странице. На GitHub доступен для загрузки исходный код основных компонентов, а также различных плагинов для веб-редактора.

GitHub, хостинг для проектов разработки всех видов, выпустил свою собственную версию веб-редактора в 2014 году под названием Atom. На базовом уровне кроссплатформенный фреймворк Electron (ранее Atom Shell) служит для объединения браузера Chromium со средой выполнения JavaScript Node.js, а также для переноса сценариев разработчиков GitHub. Изначально выпуская расширения и пакеты исключительно под лицензией с открытым исходным кодом, GitHub в итоге решил выпустить исходный код всего проекта, включая все стандартные «пакеты», такие как функциональные блоки редактора, под лицензией MIT. Функции веб-редактора доступны через отдельные API JavaScript, но разработчики рекомендуют использовать CoffeeScript вместо JavaScript. В качестве стандарта для CSS-контента в Atom используется упрощенный язык таблиц стилей Less.

Благодаря соответствующим плагинам веб-редактор поддерживает новейшие стандарты HTML, CSS и JavaScript (например, CoffeeScript), а также различные языки программирования, такие как, например, PHP, Ruby, Java, C++, Python и Perl. Некоторые из разнообразных функций, предлагаемых бесплатной альтернативой Dreamweaver, следующие:

• Интегрированный менеджер пакетов: Atom работает с собственным менеджером пакетов (метко названным Atom Package Manager), который позволяет легко интегрировать и устанавливать пакеты.

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

• Выделитель синтаксиса: Для установленных языков программирования альтернатива Dreamweaver предлагает подсветку синтаксиса для наиболее важных правил. Они будут автоматически выделены цветом, если вы решите использовать этот инструмент.

• Управление версиями: Atom, как приложение GitHub, реализует инструмент контроля версий Git, как и следовало ожидать. Это поможет вам отслеживать изменения в вашем веб-проекте. Например, вы можете настроить инструмент на автоматическое выделение всех измененных строк для визуального отслеживания.

• Браузер файловой системы: Браузер файловой системы позволяет легко находить и открывать отдельные файлы, полный проект или несколько проектов в одном окне.

• Палитра команд: С помощью простой комбинации клавиш вы можете получить доступ к поисковой маске для поиска доступных команд и легкого доступа к ним.

Помимо высокого удобства для пользователя, которое значительно упрощает кодирование, именно расширяемость Atom делает модульный веб-редактор лучшей альтернативой Dreamweaver. Более 90 пакетов, а также 13 тем пользовательского интерфейса (по состоянию на декабрь 2016 года) уже дают стандартной установке большой и разнообразный набор функций, включая упомянутую ранее отличную языковую совместимость. Если вам не хватает какой-то функции, вы можете заглянуть в каталог расширений на домашней странице Atom: Здесь вы получите доступ к тысячам пакетов и тем, разработанных и выпущенных сообществом пользователей. Например, вы можете найти пакет, который дополняет веб-редактор функцией предварительного просмотра HTML-кода в реальном времени.

Метрики и отчеты об исключениях — два спорных основных пакета. Первый передает данные в Google Analytics, а второй направляет необычные операции программы (сбои, ошибки и т.д.) команде разработчиков Atom через сайт bugsnag.com. Даже если оба пакета предназначены только для улучшения работы программы Atom, рекомендуется отключить их в настройках. Текущие и старые версии программы GitHub для Windows, macOS и Linux (64-битные Ubuntu, Debian, Fedora) можно скачать на официальной домашней странице или из реестра GitHub.

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

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

С другой стороны, вы не можете ожидать от бесплатного решения такого же уровня стабильности, который обещает продукт Adobe. Профессиональное программное обеспечение, такое как Dreamweaver, постоянно совершенствуется, что позволяет ему соответствовать современным веб-стандартам. Часто, как в случае с Dreamweaver, это программное обеспечение представляет собой комплексный пакет, который совершенствовался десятилетиями. Если у вас возникнут проблемы с программным обеспечением или потребуется помощь в работе над проектом, профессиональное программное обеспечение имеет компетентную поддержку наготове, как и некоторые сервисы с открытым исходным кодом, например, платная версия BlueGriffon. Но для бесплатных альтернативных решений вам нужно полагаться на помощь сообщества — просите ли вы помощи в решении технических проблем с программой или вам просто нужна помощь в общем развитии.