Google Web Designer

Google Web Designer — программа для создания веб-контента (рекламные баннеры, объявления, интерактивные веб-элементы, анимация и т.д.) в формате HTML5, имеет встроенный редактор кода CSS, JavaScript и XML с поддержкой WYSIWYG . Приложение распространяется бесплатно, интерфейс переведен на русский язык (не полностью). Программа Google Web Designer работает в среде ОС Windows 7/8/10 (32-bit/64-bit), для запуска требуется как минимум 2 Гб ОЗУ (желательно 4 Гб) и подключение к интернету (обязательно).

Зачем нужна прорамма Google Web Designer?

Судя по представленным в самой программе вариантам создаваемых файлов, приложение Google Web Designer предназначено, в первую очередь, для создания веб-объявлений. Пользователь может выбрать один из многочисленных готовых шаблонов, подготовленных веб-дизайнерами из Google, либо создать свой собственный проект с нуля.

Шаблоны интересны тем, что с их помощью можно в кратчайшие сроки и с минимальными навыками в веб-дизайне/программировании можно генерировать (причем массово) давно ставшие стандартными веб-элементы различного назначения, например:

• Баннеры, в которых будут проигрываться VR (Virtual Reality) видеоролики с YouTube и других источников с обзором 360 градусов.
• Баннеры с 3D-содержимым.
• Встраиваемые в сайт слайд-шоу.
• Карты Google Maps.
• Раскрывающиеся, расширяющиеся, "парящие", перемещающиеся баннеры.
• Проигрыватели стриминг-контента (потокового онлайн-видео) и т.д.

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

Более опытные пользователи могут пойти другим путем — создать анимированный/ интерактивный веб-элемент или даже целый сайт с нуля (ну, или почти с нуля). Программа Google Web Designer предлагает создание следующих вариантов веб-файлов:

• Анимированные баннеры, рассчитанные на открытие в десктопных браузерах, т.е. на компьютере.
• Анимированные AMPHTML-баннеры для мобильных браузеров.
• Раскрывающиеся объявления.
• Межстраничные (объявляются один раз, затем отображаются на всех страницах сайта) объявления.
• Одностраничные и многостраничные HTML-документы.
• CSS-документ (каскадные таблицы стилей .CSS).
• JavaScript-документ (веб-скрипты .JS).
• И XML-документ (файлы расширяемой разметки .XML)

Функции Google Web Designer

Все функциональные возможности Google Web Designer можно разделить на две большие категории — это функции создания анимированных, интерактивных и т.д. веб-элементов (объявлений) и функции кодового редактора.

Инструменты создания анимации

Редактор Google Web Designer устроен таким образом, что пользователь добавляет в рабочую область определенный веб-элемент, настраивает его параметры, а затем создает анимацию. В качестве таких веб-элементов можно использовать любые стандартные HTML-объекты, начиная блоками (div), таблицами (table) и списками (ul), заканчивая изображениями и различными плеерами (проигрывающие видео или, к примеру, HTML5-анимацию). Также имеется возможность:

• Рисования геометрических фигур, кривых и текста.
• Создания прямоугольных, овальных и многоугольных слоев-масок.
• Раскрашивания любых веб-элементов с использованием обычной заливки и/или градиента.
• Преобразования элемента в 3D-объект с последующим его разворотом и т.д.

Другими словами, в Google Web Designer имеется масса возможностей для реализации творческих идей в области веб-дизайна.

Что касается анимирования объектов. В Google Web Designer используется техника анимации по ключевым кадрам:

• Пользователь создает как минимум 2 ключевых кадра, на первый — исходный — помещается объект в первоначальной позиции, на второй — его конечная позиция. Объект можно не только переместить, но и выполнить, например, его поворот в трехмерном пространстве или изменить размер.
• Устанавливается время перехода от кадра 1 до кадра 2, от кадра 2 до кадра 3 и т.д.
• Задается динамика перехода между кадрами. Например, при выборе «Linear» анимация будет протекать с постоянной скоростью, «Ease-in» — низкая скорость вначале и быстрая в конце. Помимо имеющихся вариантов динамики, пользователь может создавать и свои собственные.

Анимация — это только половина возможностей Google Web Designer. Программа также позволяет задать действие любому веб-элементу, срабатывающее при возникновении определенного события (действие пользователей компьютерной мышью или касание экрана телефона):

• Пользователь выбирает одно из доступных событий, например — клик мышью по элементу.
• Задает действие (реакцию) объекта на клик. Здесь 4 категории действий: CSS (изменяется стиль элемента — цвет, размер и т.п.), временная шкала (начать/остановить и другие действия с анимацией), группа страниц (переход на указанную/следующую/предыдущую страницу) и специальное действие (любой код JavaScript).
• Задает конфигурацию (если того требует выбранное действие).
• Готово.

В процессе создания веб-элементов, их анимации и применения к ним действий пользователь в любой момент может просмотреть результат работы в браузере. Достаточно лишь кликнуть по кнопке «Предпросмотр», и созданный баннер, объявление, интерактивный веб-элемент и т.д. моментально отобразится в браузере.

И все это — лишь поверхностное описание возможностей Google Web Designer в плане создания анимированных и интерактивных веб-элементов.

Редактор кода Google Web Designer

По мере работы с графическими объектами программа автоматически генерирует HTML, CSS, XML и JavaScript файлы (в зависимости от того, что конкретно делает пользователь), размещая и структурируя их в папке проекта. В любой момент пользователь может переключиться с режима просмотра «Макет» (основная рабочая область) в режим «Код», в котором работать уже предстоит не с графической составляющей проекта, а с его исходным кодом. Создаваемые CSS, XML и JavaScript отрываются только в режиме редактирования кода.

Что касается возможностей самого редактора кода, то здесь предусмотрено все необходимое для удобного его написания/редактирования:

• Автодополнение, подсветка и автоматическая проверка правильности синтаксиса.
• Автоформатирование кода с возможностью настройки параметров форматирования (отступы, выравнивание скобок, правила переноса строк и т.д.).
• Поиск и замена текста с использованием регулярных выражений.

Файловый менеджер для быстрого переключения между редактируемыми файлами проекта и др.