Теперь больше, чем конструктор сайтов… WIX внедрил редактор кода.

Популярный в среде интернет-разработчиков конструктор Wix продолжает давать ответы на вечный вопрос - как создать свой сайт и радовать функциональными новинками. Недавно разработчики презентовали бета-версию модуля Wix Code – программного решения, серьёзно расширяющего возможности редактирования веб-страниц. Wix Code позволяет пользователям вмешиваться в код сайта самостоятельно, настраивая страницы под самые разные задачи и помогая серьёзно разнообразить дизайн. Новый фирменный инструмент по сути приближает Wix к полноценной CMS, что в особенности порадует тех, кто уже успел раскрутить сайт на базе этой платформы. Давайте рассмотрим Wix Code более детально, обозначив все его плюсы и минусы.

Основные преимущества Wix Code

Разработчики анонсировали в готовой версии пять главных функций, воспользоваться которыми можно будет сразу же после официального релиза:

• Динамические страницы – создаваемые на основе одного шаблона индивидуальные по содержанию и внутренним формам страницы. Несмотря на общий шаблон каждая из выводимых в браузере динамических страниц имеет индивидуальный URL.
• Коллекции данных – серьёзное дополнение для такой, казалось бы, простейшей системы как Wix. Эта функция по сути даёт возможность формировать объёмные базы данных. Особенно полезна она будет для сайтов, которым приходится иметь дело с большими массивами информации, – для туристических порталов, для инфо-сайтов, агрегаторов, интернет-магазинов и т. д.
• Пользовательские формы – хорошее дополнение к функциональным базам данных. С помощью этого инструмента веб-мастера могут без проблем создавать анкеты, опросники, тесты, отзывы по категориям продуктов, структурируя их и сразу отправляя в базу.

• Интерактивное взаимодействие – разного рода спецэффекты позволяют усилить подачу контента, улучшая тем самым поведенческие факторы. Добавление слайдеров и переключателей, кнопок, плавный «выезд» текста, сокрытие ненужных элементов – всё это, безусловно, только улучшает коммуникацию пользователей с сайтом.
• Внутренние API – этот инструмент потребует от владельца сайта базовых знаний в кодировании и в языке JavaScript, однако, разобраться во всех нюансах для подключения модулей API проблем не составит.

Wix Code – подключение новых инструментов

Поскольку новый функционал пока что находится в версии бета, зарегистрироваться и оставить заявку на пользование можно через официальную страницу платформы Wix Code. После одобрения заявки от пользователя потребуется подключить одноимённый блок в панели инструментов Wix, – появятся несколько новых меню:

• Свойства.
• Структура сайта (появляется в левой части редактора).
• Коды (отображается в нижней части редактора).
• В меню «Добавить» отображаются новые элементы – «Базы данных», «Динамические страницы», «Пользовательские формы» и т. д.

Рассмотрим детально последовательность действий для активации функционала Wix Code.

1.Базы данных

Это основной инструмент модуля, подключение которого происходит в несколько этапов:

• После клика на значок «+» в разделе «Базы данных» боковой панели «Структура сайта» необходимо выбрать команду «Новая коллекция».
• После открытия специального окошка с надписью «Создать коллекцию базы данных» можно присвоить ей любое имя.
• При выпадении на экран следующего меню пользователь выбирает нужную ему операцию: ввод, чтение, изменение и удаление данных.
• В момент нажатия кнопки «Создать коллекцию» открывается непосредственно табличная база данных, готовая к добавлению или просмотру уже загруженной информации.

Пользовательскую часть интерфейса можно сформировать через меню «Редактор» (опция «Добавить»). Отсюда открываются возможности для добавления информации о пользователе (имя, логин), текстового блока, загрузочных полей для файлов, флажков, чекбоксов и т. д. Все элементы привязываются к определённому действию – их алгоритмы активируются через раздел «Настройки» (в подразделе «Опции»), Коммуникация между формами и базами данных настраивается в меню параметров сборщика данных. Для подключения этой функции в разделе «Добавить пункт База данных» необходимо кликнуть по кнопке «Набор данных». В открывшемся на экране окне настроек от пользователя потребуется поставить галочку напротив пункта «Соединение с коллекцией» (в режиме «Только запись – write-only»). Для связывания всех элементов с выбранными полями сборщика данных в разделе «Соединиться с базой данных» потребуется выбрать непосредственно то поле, куда будет производиться запись введённых пользователями данных. Для закрепления всех произведённых действий нужно кликнуть по кнопке «Отправить», что активирует передачу информации в базу.

2. Динамические страницы

Как уже было отмечено выше, в основе работы динамических страниц лежит использование различных подстраиваемых под запросы пользователей элементов. Сами разработчики Wix Code приводят в качестве демонстрационного примера процесса создания вузовского расписания с назначением и наполнением страниц определённых курсов. Создание динамической страницы Wix стартует в момент создания базы данных: заполнение основных полей с названиями курсов, кратким описанием, ФИО лектора и т.д. – всё это нужно собрать в рамках первичного этапа учёта данных. После чего через левое меню редактора «Структура сайта», в подразделе «Базы данных» нужно активировать параметры настроек, выбрав опцию «Создать динамическую страницу». Прежде чем заполнять контентом определённую динамическую страницу требуется прописать для неё уникальный адрес. Содержание самих страниц привязывается к базе данных сайта. К примеру, заголовочное поле «соединяется» с полем Title в созданной базе. Для прочих полей (описание курса, ФИО лектора, время занятий и т. д.) также имеются соответствующие элементы в базе данных, разобраться в функциональности которых можно только используя Wix Code практически. Процесс формирования динамических страниц завершается по клику кнопки «Опубликовать» в соответствующем меню. После запуска в работу такого рода страниц нельзя забывать о синхронизации актуальной части базы данных с той, что преподносится пользователям в виде полезного контента.

3. Интерактивность

С помощью Wix Code настраивается без проблем и интерактивность на страницах любого сайта. Например, можно запрограммировать алгоритм запуска определённых действий на сайте только после совершения пользователем каких-то особых действий. Для того, чтобы настроить показ изображений после нажатия на кнопку от веб-мастера потребуется:

• Выбрать в редакторе опцию «Картинка и кнопка».
• Далее – в разделе «Свойства для элемента Кнопка» необходимо активировать опцию «При нажатии (onclick)», что автоматически прописывает в исполняемом коде необходимую часть.
• Для сокрытия изображения до момента вызова его со стороны пользователя потребуется кликнуть по меню «Скрыть до загрузки» (Hidden on load).

Стоит отметить, что каждая картинка имеет свой индивидуально прописываемый id, который желательно запомнить, а лучше всего – записать.

• После этого нужно ввести конструкцию вида $w с последующим нажатием сочетания клавиш «Ctrl+Пробел». В появившемся на экране окошке выбирается необходимый id из выведенного списка.
• Наконец, после нажатия на меню «Период» (Period) в отобразившемся списке функций выбирается команда show(animationName), и код автоматически принимает законченный вид.

Вместо словосочетания animationName от веб-мастера потребуется прописать один из способов отображения рисунка на странице: плавное или резкое появление (FadeIn или DropIn), появление вращением (SpinIn) или же отображение при помощи вылета (FlyIn).

Выводы

Специализированное дополнение Wix Code значительно апгрейдирует аппаратную часть этой полюбившейся многим российским пользователям CMS. Изучить все функции нового инструмента не составит труда как опытным кодерам, так и людям, которые даже теоретическую базу сайтостроения изучили поверхностно. Нужно отметить, что Wix Code значительно повышает функциональность веб-страниц и положительно влияет на дизайн, дружественность интерфейса.