Pinegrow Web Editor

Комбинир. редакторы


Содержание сайта
Комбинированные редакторы
Обзор  л.3
Pinegrow Web Editor




На рисунке - Pinegrow Web Editor v 2.71 (2016 г., март). Интерфейс и справка на англ. языке. Вес 138 Мб.
Цены: Pinegrow Web Editor  - 49 долл.  Pinegrow Web Editor Pro - 99 долл.
Или: Ежемесячная подписка: 8 и 12 долл. в месяц соответственно.
Работает в Windows, Mac и Linux.
Автор: Pinegrow Pte. Ltd (Сингапур)

Последние версии программы:
Pinegrow Web Editor v 2.81 (2016 г., апрель).
Pinegrow Web Editor v 2.9 (2016 г., май).
Pinegrow Web Editor v 3.0 (2017 г, июнь).
Pinegrow Web Editor v 4.0 (2018 г, февраль).
Pinegrow Web Editor v 4.6 (2018 г, март).
Pinegrow Web Editor v 4.9 (2018 г, сентябрь).
Pinegrow Web Editor v 5.0 (2018 г, ноябрь). Новое в работе со стилями и другое.

Назначение программы - создание веб-сайтов, в том числе создание сайтов для разных экранов.
Работа со страницами HTML, темами WordPress, Bootstrap или Foundation.

В редакторе возможно создавать веб-страницы визуально или путем написания кода.
При этом окно редактирования может занимать или дизайн, или код, или окно делится на две части - дизайн и код (как показано на рисунке выше).

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

Интерфейс программы отличается от привычного интерфейса большинства веб-редакторов.

На левой панели есть несколько вкладок: LIB (Library - библиотека)  PROP (Properties - свойства), CSS (работа с CSS) и другие. В зависимости от задачи открывается та или иная вкладка.

Вкладка LIB (библиотека) содержит список элементов, которые можно вставить на веб-страницу.    Фактический список элементов в группе Lib зависит от используемых расширений. Например, плагин Pinegrow Web Editor для Bootstrap добавляет компоненты Bootstrap к группе Lib.
Вы можете также добавить собственные элементы HTML5 в библиотеку.

Из элементов - текст (в т.ч. заголовки), ссылки, закладки (якоря), изображения, таблицы, различные кнопки, списки, веб-формы, различные навигационные панели, медиа, JavaScript и др.

Вкладка PROP служит для определения свойств вставленного объекта (элемента страницы).

Панель справа (Outline tree) - полезный инструмент, содержит схему всего кода страницы в виде дерева. Отражается код области HEAD и BODY.

Элемент на страницу вставляется перетаскиванием. Его можно отпустить как на страницу (в режиме визуального редактирования - дизайна), так и на правую панель в нужное место в коде.

Элементы можно дублировать, удалять, перемещать. Выделив любой элемент на странице (в режиме дизайна), можно отредактировать его код.

Ориентация на странице сделана просто - выделив элемент в режиме дизайна, его место в коде будет показано на правой панели в коде (в "дереве тегов"). И наоборот, щелкнув по фрагменту кода на правой панели, будет выделен соответствующий элемент в окне редактирования.

Редактор создает сайты для экранов разных размеров, применяя при этом "отзывчивое расположение" (Creating responsive layouts) и контрольные точки..

Сохранение страницы - сохранит файл HTML, и также создаст все другие активы, которые являются частью страницы. Например, у страниц Bootstrap есть различный Bootstrap CSS, JavaScript и файлы шрифта.


Из авторской характеристики:

У Pinegrow Web Editor есть уникальные особенности, такие как редактирование многократных страниц одновременно, полный диапазон компонентов Bootstrap и Foundation.

Нет никаких предварительных просмотров. Вы можете отредактировать и проверить свою страницу одновременно, даже если Вы используете динамические элементы JavaScript.

У Pinegrow Web Editor есть полная поддержка Bootstrap или Foundation.
Компоненты перетаскиваются на страницу и настраивают их свойства через UI.
Pinegrow автоматически устанавливает признаки, добавляет классы или даже регулирует код HTML.

Создание темы WordPress - откройте или создайте страницу HTML в Pinegrow Web Editor. Добавьте действия WordPress к элементам HTML и установите их параметры. Экспортируйте тему WordPress. Pinegrow Web Editor производит код PHP и др.

Многостраничное редактирование

Отредактируйте страницы визуально и через код одновременно. Изменения, сделанные через визуальный UI, будут немедленно отражены в кодовом представлении. Код редактируется, даже если он создан во внешнем редакторе кода.

Сильный редактор CSS - отредактируйте правила CSS визуально или через код. Добавьте переменные и выражения, чтобы создать легко настраиваемые темы. Используйте менеджера Stylesheet.

Сделайте свои страницы отзывчивыми - добавьте свои контрольные точки или позвольте PG обнаруживать их, анализируя stylesheets. Используйте многостраничное редактирование, чтобы отредактировать страницу для использования на разных экранах.

Быстро постройте вебсайты с блоками - используйте коллекцию готовых блоков вебсайта. Блоки перетаскиваются на страницу, настраивается содержание, разрабатываются правила CSS, если Вы хотите - и Ваш вебсайт создан. Вы можете даже создать полностью настраиваемые темы WordPress с блоками.

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

Используйте Pinegrow Web Editor совместно с Вашим любимым редактором кода, с умным обновлением (обновляется не вся страница, а только то, что изменено).

Отредактируйте шаблоны HTML PHP - щелкните два раза на любом элементе, который содержит блоки PHP, чтобы отредактировать код.

Дополнительно в Pinegrow Web Editor Pro

В расширенной версии редактора Pinegrow Web Editor Pro имеются дополнительные функции - работа с проектом сайта, создание Master pages (шаблона для других страниц сайта), умные компоненты Smart components (содержат редактируемые области), дополнительные возможности при работе с библиотекой и др.



Заключение:

Работа в Pinegrow Web Editor над страницей в визуальном режиме менее удобна, чем в хорошем визуальном редакторе.
Работа с кодом также не имеет особых преимуществ по сравнению с работой в хорошем редакторе кода.
Но это характерно не только для Pinegrow Web Editor, но для всех комбинированных редакторов.
Единственная ценность комбинированных редакторов - это возможность работать как визуально, так и редактировать код.
Этой ценностью в полной мере и обладает Pinegrow Web Editor.


Новое в Pinegrow Web Editor v 2.9
Осуществлена совместная работа с редактором кода Atom. Все изменения  синхронизируются между Atom и Pinegrow в то время как Вы печатаете, не имея необходимость сохранять изменения. И элементы, отобранные в Pinegrow, выдвинуты на первый план в Атоме, и наоборот. Поэтому Вы можете создавать код тогда, когда это легче сделать в Atom, и использовать инструменты Пинегроw, чтобы работать со структурой HTML,

Новое в Pinegrow Web Editor v 3.0
Просмотр и редактирование нескольких видов одной и той же страницы (для рабочего стола, для мобильного телефона)  Все изменения вносятся в базовую страницу и синхронизируются между всеми видами. Подробнее (видео)
Pinegrow Web Editor v 3 имеет абсолютно новый редактор CSS с визуальными элементами управления для большинства свойств CSS, в том числе: тени, преобразования, переходы и адаптируемых блоков.
Абсолютно новый редактор CSS/САСС/LESS с богатыми визуальными элементами управления, мощный редактор списка CSS, Переработанный пользовательский интерфейс , Редактирование нескольких элементов одновременно. Точное и интеллектуальное перетаскивание, Редактируемое дерево документа и многое другое.


Новое в Pinegrow Web Editor v 4.0
Теперь вы можете использовать новый браузер изображений, чтобы включить почти 500.000 бесплатных изображений высокого качества от Unsplash.com в ваших проектах. Требуется регистрация на сайте.
WordPress навигация и разбиение на страницы теперь поддерживает Bootstrap 4 и CSS. Визуальный редактор включает в себя элементы управления для объекта подгонки и объекта позиции.


Новое в Pinegrow Web Editor v 4.6
Значительно улучшен  Theme Builder (редактор тем Wordpress).
До сих пор большие знания о WordPress не требовалось, чтобы использовать Pinegrow. Это больше не так. С новыми Smart Actions для WordPress вы можете сразу начать создавать темы WordPress - и узнать о том, как WordPress работает на этом пути. Smart Actions также экономят время для профессионалов WordPress.
Набор из 14 Smart Actions WordPress позволяет создавать даже сложные поведения, такие как пользовательские поля WP_Queries и Customizer, всего за пару кликов.
Подробнее о новом конструкторе WordPress
Подробнее о Theme Builder
Создание WordPress темы без PHP кодирования (видео)

Новое в Pinegrow Web Editor v 4.8 и 4.9
Визуальный контроль градиентов CSS и библиотека предустановок градиентов
Улучшенный редактор визуальных CSS-таблиц
Bootstrap 4.1.3
Автоматическое сохранение файла CSS при изменении исходного файла SASS или LESS за пределами Pinegrow
Визуальный редактор CSS сетки. Редактор CSS сетки может помочь Вам с:
    Редактирование макета сетки
    Управление именованными областями и именованными дорожками
    Перемещение и изменение размера элементов сетки
    Удаление элементов непосредственно в сетку
    Адаптивность макетов сетки. Подробнее о создании CSS-сетки.
    Создание резервных копий для старых браузеров
Starter Theme 2-это готовый к использованию проект Pinegrow, который Вы можете использовать в качестве отправной точки для создания пользовательских тем WordPress.
    Несколько шаблонов
    Элементы управления настройщика
    Интеграция WooCommerce и многое другое.
Устранение ошибок

Новое в Pinegrow Web Editor v 5.0
Внимание на отдельные элементы в отрыве от остальной части страницы
    Умная обработка встроенных стилей
    Легко скрыть таблицы стилей и их правила в активной панели стилей
    Перетащите изображения, таблицы стилей и скрипты из панели проекта на страницу
    Фильтр отображения панели дерева для элементов со встроенными стилями, ссылками, текстами, компонентами и действиями WP
И другое.

Авторская справка в Интернете
Авторское обучение (видео + текст - англ. язык)

Скачать Pinegrow Web Editor

Примечания:
1. Срок испытания до покупки - 7 дней.
2. Имеется расширение для редактора - AnimatorPro (19 долл) - Посмотреть


Вернуться к обзору
Последнее обновление: декабрь 2018 г.