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

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

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

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

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

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

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

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

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

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

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

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

Вместо словосочетания ani­ma­tion­Name от веб-мастера потребуется прописать один из способов отображения рисунка на странице: плавное или резкое появление (FadeIn или DropIn), появление вращением (SpinIn) или же отображение при помощи вылета (Fly­In). Специализированное дополнение Wix Code значительно апгрейдирует аппаратную часть этой полюбившейся многим российским пользователям CMS. Изучить все функции нового инструмента не составит труда как опытным кодерам, так и людям, которые даже теоретическую базу сайтостроения изучили поверхностно. Нужно отметить, что Wix Code значительно повышает функциональность веб-страниц и положительно влияет на дизайн, дружественность интерфейса.

0 0 vote
Рейтинг

emagnat

Публикации онлайн журнала об интернет-торговле Emagnat Авторы: Игорь Зельманов, Евгения Власова, Екатерина Яковлева, Василий Эдмунт, Анна Зябрева, Юрий Москвин, Юрий Кудренко, Ольга Шостак, Алена Яркова, Иван Серебренников

Подписаться
Уведомление о
0 Комментарий
Inline Feedbacks
View all comments