Автоматизация процесса создания веб-сайтов с элементами скроллинг анимации Текст научной статьи по специальности «Компьютерные и информационные науки»

АВТОМАТИЗАЦИЯ ПРОЦЕССА СОЗДАНИЯ ВЕБ-САЙТОВ С ЭЛЕМЕНТАМИ СКРОЛЛИНГ АНИМАЦИИ Харченко А.В. Email: Kharchenko631@scientifictext.ru

Харченко Александр Викторович - креативный директор, ООО «Таймлайн», г. Кемерово

Аннотация: в данной статье проводится анализ инновационного проекта по созданию веб-сайтов - Just Scroll Me. Рассматриваются проблемы, с которыми сталкиваются разработчики веб-приложений, имеющих анимационные элементы, реагирующие на прокрутку сайта. Исследуется рынок на предмет существования продуктов, решающих схожие задачи. Рассматриваются основные направления работы данного инструмента, выявляются положительные и отрицательные стороны инструмента, а также делаются выводы по проведенной научно-исследовательской работе.

Ключевые слова: создание сайтов, анимация, дизайн, программирование.

AUTOMATING THE PROCESS OF CREATING WEB SITES WITH THE ITEMS SCROLLING ANIMATION Kharchenko A.V.

Harchenko Alexander Viktorovich - Creative Director, LLC "TIMELINE", KEMEROVO

Abstract: in this article, an analysis of the innovative project for the creation of websites - Just Scroll Me. The problems encountered by developers of web applications that have animation elements that react to scrolling the site are discussed. The market is investigated for the existence of products that solve similar problems. The main directions of the work of this tool are considered, the positive and negative aspects of the instrument are revealed, and conclusions are drawn on the conducted research work. Keywords: web-sites, animation, design, programming.

УДК 004.4'275

Разработка сайтов - это огромная сфера деятельности в информационных технологиях, развитие которой происходит ежедневно. При этом трудно не отметить, что разработка сайта - это также трудозатратный процесс, который затрагивает различные пласты, начиная от работы дизайнера, заканчивая работой разработчика [1, с. 15].

Особое внимание было уделено изучению процесса создания сайтов с динамической анимацией. Выявлены следующие проблемы, с которыми сталкиваются группы разработки:

• Сложность проектирования и создания дизайн-макетов с динамикой ввиду статичности большинства инструментов для дизайнеров.

• Сложность передачи информации о scrolling-динамике от дизайнера программисту.

• Множество рутинной работы у frontend разработчика при реализации scrolling-динамики.

Была поставлена цель создать инструмент, который сделает работу по созданию сайтов с динамической анимацией менее трудоемкой и затратной. Таким инструментом стал Just Scroll Me.

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

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

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

Тем не менее, решения, позволяющие автоматизировать создание полноценных скроллинг-сайтов, на рынке отсутствуют. Разрабатываемый же конструктор «Just Scroll Me» решает эту проблему.

С целью создания качественного кода с минимальным числом ошибок было принято решение помимо production-сервера использовать development-сервер для промежуточных сборок кода, а также тестирования.

В качестве сервера контроля версий выбран облачный сервис Github.com

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

Для построения динамических web-страниц было решено использовать следующие базовые структуры с заданными начальными характеристиками:

• Текст: координаты, шрифт, высота.

• Изображение: координаты верхнего левого угла, ширина, высота.

• Embedded-объект: координаты верхнего левого угла, ширина, высота.

• Слой: координаты верхнего левого угла, ширина, высота.

Доступны для изменения следующие анимационные свойства объектов:

• Масштаб.

• Поворот.

• Прозрачность.

Для хранения информации о вышеуказанных свойствах объектов были созданы оригинальные структуры в JSON-нотации.

События, приводящие к активации анимации объектов (действия пользователя):

• Перемещение мыши в окне браузера.

• Перемещение мыши над объектом.

• Вращение колеса мыши.

• Нажатие клавиши клавиатуры.

• Клик левой клавишей мыши.

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

В результате проведенного тестирования были выявлены следующие проблемы созданного продукта:

• Использованный в биллинге агрегатор платежей обладает бедным набором доступных средств оплаты.

• Нет интеграции с популярными инструментами разработки.

• Нет инструментов гибкой работы с встраиваемым видео (например -автоматическое проигрывание по событию).

• Нет шаблонов для создания сайта не «с нуля».

• Ошибки Usabiliuty.

• Javascript-ошибки.

В результате двух лет научно-исследовательской работы был создан и протестирован рабочий прототип продукта. Проведено Usability-исследование на тестовой группе пользователей. Разработаны дополнительные инструменты, упрощающие работу дизайнеров и программистов с данным продуктом.

Список литературы /References

1. Косухин А.С. Разработка сайтов и ее проблематика // М., 2015. С. 15-32.

2. Купчинский С.В. Сайты и их разработка // СПб.: МАДИ, 2014.С. 29-658.

3. МакдональдМэтью. Разработка сайта // СПб.: БХВ-Петербург, 2014. С. 1-358.