Разработка пользовательского интерфейса

Оглавление

Введение

.        Анализ предметной области

.1      Сравнительный анализ аналогов

.1.1   Обзор десктопных видео редакторов

.1.2   Сравнительный анализ функциональных возможностей десктопных видео редакторов

.1.3   Обзор онлайн видео-редакторов

.1.4   Сравнительный анализ функциональных возможностей онлайн видео редакторов

.2      Функциональные возможности разрабатываемого Web-приложения

.3      Выводы

.        Проектирование Web-приложения

.1      Структура сайта

.2      Описание процессов взаимодействия пользователя и системы

.2.1   Описание групп пользователей

.2.2   Описание процесса регистрации

.2.3   Описание процесса создания проекта

.2.4   Описание процесса редактирования видео

.2.5   Процесс сохранения проекта

.3      Макеты разрабатываемого онлайн видео редактора

.4      Выводы

.        Выбор инструментов разработки

.1      Пользовательская часть

.2      Серверная часть

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

.4      Выбор библиотек для обработки видео

.5      Выводы

.        Разработка Web-приложения

.1      Установка необходимых фреймворков и модулей

.2      Создание локального сервера

.3      Обработка POST и GET запросов

.4      Работа с Mongodb

.5      Вёрстка страниц

.6      Разработка пользовательского интерфейса видео редактора

.7      Структура проекта

.8      Запуск и отладка сервера

.9      Итоги

.10    Тестирование приложения

.11    Оценка экономической эффективности

.12    Выводы

Заключение

Список использованной литературы

Приложение 1. Код «app.js»

Приложение 2. Код «routes.js»

Приложение 3. Код «home.ejs»

Приложение 4. Код «home.js»

Приложение 5. Код «package.json»

Приложение 6. Код «videdit.ejs»

Приложение 7. Код «editer.js»

 

Введение

В настоящее время, интернет входит в самые удаленные уголки нашей планеты. Развитие и широкое распространение интернета меняет расстановку сил между десктопными и Web-приложениями.

Такие недостатки, возникающие при использовании Web-приложений как: недоступность интернета, дорогой трафик и низкая скорость передачи данных уходят в прошлое. А достоинства: отсутствие необходимости установки на компьютере пользователя программного обеспечения, его настройки и обновления, отсутствие требований к ресурсам компьютера и к аппаратной платформе, возможность удаленного доступа к данным, хранящимся на серверах из любой точки мира, становятся все более очевидными.

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

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

В ходе реализации данной работы решались следующие задачи:

●       анализ функциональных возможностей существующих приложений по обработке видео;

●       проектирование Web-приложения;

●       выбор инструментов разработки;

●       разработка и тестирование Web-приложения;

●       оценка экономической эффективности проекта.

1      

1.  Анализ предметной области

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

1.1    Сравнительный анализ аналогов

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

На данный момент видео редакторы существуют как в виде десктопных приложений, так и в виде Web-приложений. В рамках данной работы необходимо провести сравнительный анализ существующих аналогов обоих типов видео редакторов их достоинства и недостатки, функциональные возможности и определить какими функциями и возможностями должно обладать разрабатываемое Web-приложение по редактированию видео.

1.1.1          Обзор десктопных видео редакторов

За последние 20 лет появилось достаточно большое количество десктопных видео редакторов и рассмотреть их все не представляется возможным. Поэтому в данном разделе будут рассмотрены только те, которые являются наиболее удачными и широко используемыми:

●       Adobe Premiere;

●       Pinnacle Studio;

●       Corel VideoStudio;

●       Sony Vegas Movie.Premiere. Программа для нелинейного видеомонтажа от компании Adobe System. Программа является одной из самых популярных среди профессионалов по работе с видео, её используют ведущие производители клипов и рекламных роликов

Данная программа позволяет импортировать и обрабатывать самые разные видеозаписи. На сайте производителя дано следующее описание: «С помощью ведущего в отрасли набора инструментов для видеомонтажа вы сможете редактировать любые типы мультимедийного контента в исходном формате на настольных ПК и мобильных устройствах. Создавайте профессиональные видеоматериалы с насыщенной цветовой гаммой для киноэкранов, телевидения и Интернета» [3].

Основные преимущества, отмечаемые производителем: интуитивная рабочая среда, поддержка различных форматов, что позволяет работать практически с любыми типами мультимедийного контента, возможность корректировки цвета и использования сложных цветовых стилей, поддержка касаний и жестов, что делает редактирование на устройствах Microsoft Surface Pro, планшетах Windows или трекпадах Apple простым и удобным [3].

Существенным преимуществом Adobe Premiere является интеграция с другими продуктами Adobe, а так же справка и руководство на русском языке. Adobe Studio предлагает пробную бесплатную версию и различные варианты подписки.

Pinnacle Studio. Программа для нелинейного видеомонтажа, разработанная компанией Pinnacle Systems (Avid Technology <https://ru.wikipedia.org/wiki/Avid_Technology>) на данный момент принадлежит компании Corel. Основные преимущества согласно сайту производителя: высокая производительность, профессиональные возможности редактирования видеофайлов, видеосъемка с экрана, простое удаление шумов, доступ к облачным службам и бесплатному хранилищу, новейшие технологии и форматы [4]. Программа позволяет использовать свыше 2 000 двух- и трехмерных эффектов, работать с шестью дорожками, импортировать VFR-видео из iPhone. Особенно удобна эта программа, при монтаже клипа с двух камер, т.к. реализована возможность просмотра двух импортированных видеозаписей параллельно и выбора кадров из любой. Среди интересных опций - стабилизация и цветовая коррекция, позволяющая исправить ошибки, возникшие при записи видеоматериала. Программа обычно имеет 3 версии: Базовую (Studio или HD), Расширенную (Plus), и Максимальную (Ultimate).Vegas. Данный программный продукт является представителем семейства профессиональных видео редакторов, разработчиком которого является компания Sony. Большое количество профессиональных возможностей и удобный интерфейс сделали видео редактор достаточно популярным среди профессиональных пользователей. Основные достоинства: мощные эффекты, возможность импорта многослойных файлов Photoshop, превосходное управление звуком, широкий выбор функций захвата и экспорта, большие возможности работы с временной шкалой, позволяющие упростить процесс монтажа [5].

Программа имеет подсказки при нарезке и склеивании фрагментов, позволяет создавать видео с выбором ракурса съемки, многоязычным звуковым сопровождением, субтитрами и комментариями, поддерживает любой из существующих видео форматов. Доступна бесплатная, пробная версия SONY Vegas Pro, на 30-ти дневный срок.VideoStudio. Программное обеспечение для редактирования видео от компании Corel, позволяющее достичь превосходных результатов при работе с проектами любого уровня сложности - от базового до профессионального. Основные достоинства, декларируемые производителем: подходит для всех уровней подготовки, обеспечивает инструментами мульти камерного редактирования, позволяющими работать с несколькими ракурсами съемки одновременно, профессиональные аудио инструменты, более 1500 настраиваемых фильтров, эффектов, переходов и титров, 11 приложений премиум-класса для работы с эффектами [6].

Пользователь может так же применять фильтры или создавать собственные шаблоны для последующих проектов. Для опытным пользователям программу освоить будет просто, а для новичков существует бесплатный доступ к обучающему ресурсу StudioBacklot.tv.

1.1.2          Сравнительный анализ функциональных возможностей десктопных видео редакторов

Возможности и функции описанных выше программ отличаются в зависимости от версии и комплектации (платная или бесплатная версия). Рассмотрим наиболее поздние и полные версии данных продуктов.

●       Adobe Premiere Pro;

●       Pinnacle Studio 12 Ultimate;

●       Corel VideoStudio Pro X2;

●       Sony Vegas Movie Studio 9.

Безусловно, все перечисленные программы позволяют осуществлять базовые операции по обработке видео и аудио файлов: создавать спецэффекты <https://ru.wikipedia.org/wiki/%D0%A1%D0%BF%D0%B5%D1%86%D1%8D%D1%84%D1%84%D0%B5%D0%BA%D1%82>, создавать и накладывать титры <https://ru.wikipedia.org/wiki/%D0%A2%D0%B8%D1%82%D1%80%D1%8B>, осуществлять цветовую коррекцию изображения <https://ru.wikipedia.org/wiki/%D0%98%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5>, микшировать <https://ru.wikipedia.org/wiki/%D0%9C%D0%B8%D0%BA%D1%88%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5> звук. Программы поддерживают все основные видео/аудио форматы. В таблице 1 приведено сравнение некоторых функциональных возможностей перечисленных редакторов.

Таблица 1.

Сравнение десктопных видео редакторов

Программы Возможности	Pinnacle Studio	Corel VideoStudio	Adobe Premiere	Sony Vegas Movie
Пакетный захват	-	+	-	+
Дорожки	7	11	99	99
Переходы и эффекты	266	312	204	211
Стабилизация изображения	+	+	-	+
Smart Render	+	+	-	+
DivX	+	-	-	-
MOV/WMV/RM/FLV	+/+/+/+	+/+/-/+	+/+/-/+	+/+/+/-

В результате анализа можно сделать вывод, что современные десктопные видео редакторы обладают всеми необходимыми функциями, а так же большим количеством дополнительных возможностей. Таким образом, при создании Web-приложения для редактирования видео целесообразно ориентироваться на функционал десктопных видео редакторов.

пользователь редактор приложение сервер

1.1.3          Обзор онлайн видео-редакторов

Использование Web-приложений для редактирования видео началось не так давно. Ещё несколько лет назад идея редактирования видео онлайн была невостребованной. Развитие интернет технологий изменило ситуацию. Однако до сих пор у онлайн видео редакторов функциональные возможности более ограничены по сравнению с десктопными видео редакторами. Кроме того, подобных Web-приложений намного меньше чем десктопных приложений. При этом каждое из этих приложений имеет свои функциональные возможности.

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

●       обрезка видео;

●       склейка нескольких роликов;

●       возможность вставки субтитров;

●       функция, позволяющая сделать зацикливание воспроизведения;

●       экспорт во всех виде\аудио форматах;

●       наложение эффектов;

●       наложение изображений.

Рассмотрим ряд наиболее популярных Web-приложений, позволяющих обрабатывать видео.. После загрузки видео на Youtube, возможно повысить его качество с помощью видео редактора Youtube. Он позволяет провести ряд элементарных операций с видео:

●       объединить несколько видео и изображений (в одном проекте можно использовать не больше 50 роликов и 500 картинок);

●       обрезать или удлинить видео до нужной продолжительности, вырезать фрагменты;

●       вставить звуковое сопровождение и настроить громкость;

●       добавить эффекты с помощью специальных инструментов:

○       наложить текст;

○       изменить скорость воспроизведения;

○       откорректировать цвет, стабилизировать изображение, применить фильтры и эффекты;

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

●       добавление музыки;

●       добавление титров;

●       добавление базовых эффектов и переходов;

●       поддержка нескольких дорожек.. Бесплатный и крайне простой видео редактор с удобным интерфейсом и стандартным набором функций:

●       изменение размера и оптимизация видео для использования на мобильных устройствах;

●       добавление эффектов;

●       добавление звука;

●       наложение видео;

●       обрезка и склеивание нескольких роликов;

●       конвертация видео во все распространенные форматы.. Простое, но функциональное Web-приложение, для редактирования видео. Интерфейс достаточно стандартен и удобен, не требует наличия у пользователя специальных навыков и знаний.

Функционала приложения достаточно чтоб из любительского видео, снятого на мобильный телефон сделать красивое видео [7]. Позволяет:

●       разбить видео на сцены;

●       вставить титры и надписи;

●       добавить видео эффекты;

●       добавить звуковое сопровождение;

●       использовать встроенные темы и шаблоны для редактирования видео.

К сожалению, при использовании бесплатной версии, созданное видео возможно загрузить только на сервис WeVideo. На другие сайты загрузить видео проект возможно только в платных аккаунтах. Так же при бесплатном использовании приложения, размер для хранения данных ограничен 5 Гб.

1.1.4          Сравнительный анализ функциональных возможностей онлайн видео редакторов

По результатам рассмотрения были выделены функции характерные большинства из рассмотренных редакторов:

●       обрезка видео;

●       склейка роликов;

●       наложение эффектов;

●       наложение титров;

●       наличие звуковой дорожки.

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

Таблица 2.

Сравнение онлайн видео редакторов

Приложения Возможности	Youtube	Moviemasher	Cellsea	Wevideo
Форматы экспорта	нет экспорта	экспорт в бесплатной версии недоступен	3GP, AVI, MOV, MP4, FLV	mp4
Язык	Ru/Eng	Eng	Eng	Eng
Склейка роликов	+	+	есть, но не работает	+
Обрезка изображения	-	-	+	-
Наложение эффектов\фильтров	+	-	-	+
Пакетный захват	+	-	-	+
Несколько дорожек	-	+	-	-
Наложение звука	+	+	-	+
Работа со звуком	+	+	-	-
Хранение проектов	+	-	-	+
Интерфейс	+	-	-	-
Удобство управления	-	-	+	+

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

1.2    Функциональные возможности разрабатываемого Web-приложения

Прежде чем приступить к разработке макета приложения, необходимо окончательно определиться какими функциональными возможностями будет обладать разрабатываемый видео редактор. В предыдущей главе были рассмотрены существующие аналоги и проведён сравнительных анализ Web-приложений. На основании данного анализа можно сформировать список возможностей, которыми должно обладать Web-приложение, способное конкурировать с существующими онлайн видео редакторами. Основными из них являются:

●       возможность обрезки видео;

●       возможность склейки нескольких видеороликов;

●       возможность изменения параметров видео:

○       кодировки;

○       формата видео;

○       разрешения;

○       частоты кадров;

●       возможность наложения:

○       изображений;

○       текста;

○       аудио.

●       возможность наложения эффектов\фильтров.

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

●       наличие нескольких аудио\ видео дорожек;

●       возможность наложения одного видео на другое;

●       зависимость размера видео на тайм-лайне от длительности видео;

●       масштабирование тайм-лайна;

●       быстрый предварительный просмотр в окне редактирования;

●       возможность хранить проекты;

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

Для обеспечения поддержки пользователя, Web-приложение должно содержать исчерпывающую информацию по использованию данного видео редактора в виде страницы со справочной информацией.

1.3    Выводы

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

На основании анализа функциональных возможностей рассмотренных видео редакторов, определены необходимые функциональные возможности разрабатываемого Web-приложения.

2      

2.  Проектирование Web-приложения

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

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

2.1 Структура сайта

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

Исходя из функций, которые должно выполнять разрабатываемое Web-приложение, сайт должен содержать следующие страницы:

1)      главную страницу;

2)      страницу проектов пользователя;

)        страницу видео-редактора;

)        страницу с информацией.

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

Рис. 1. Структура сайта для зарегистрированного пользователя

Рис. 2 Структура сайта для незарегистрированного пользователя

2.2    Описание процессов взаимодействия пользователя и системы

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

 

.2.1 Описание групп пользователей

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

Таким образом, пользователей можно поделить на 2-е группы: зарегистрированный и не зарегистрированный. Возможности пользователя должны зависеть от того к какой группе он принадлежит.

Незарегистрированный пользователь (Гость) должен иметь возможность:

●       читать информацию;

●       редактировать видео (склеивать, обрезать, накладывать эффекты и т.д.);

●       экспортировать готовое видео;

●       создать учётную запись.

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

2.2.2          Описание процесса регистрации

Процесс регистрации позволяет Гостю сайта перейти из группы гостей в группу зарегистрированных пользователей, и в полной мере пользоваться всеми возможностями Web-приложения.

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

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

●       поле ввода логина;

●       поле ввода пароля;

●       поле ввода почты.

А так же “чек бокс” - «У меня уже есть аккаунт», переключающий форму регистрации, в режим входа в существующую учётную запись, который в свою очередь будет содержать только 2 поля:

●       поле ввода логина;

●       поле ввода пароля.

На рисунке 3 изображен макет регистрационной формы и формы для входа в учетную запись.

Рис. 3. Макет регистрационной формы и формы входа в учетную запись

2.2.3          Описание процесса создания проекта

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

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

2)      Проект создается автоматически при нажатии Пользователем на пункт основного меню «Редактирование», после чего открывается окно редактирования видео, в котором Пользователь может добавлять необходимый для проекта контент и работать с ним. В любой момент зарегистрированный пользователь может сохранить проект.

Если пользователь не зарегистрирован, то он может воспользоваться только вторым вариантом, т.к. его меню не имеет пункта «Проекты». При выборе пункта меню «Редактирование» появляется предупреждение: «Вы не являетесь зарегистрированным пользователем и не сможете сохранить проект. Хотите зарегистрироваться?» и предлагается выбор: «Да»/«Нет». При выборе «Да» - отрывается окно регистрации. После регистрации Пользователь может работать с проектом и сохранять его. При выборе «Нет» - Гость может работать с проектом, без возможности сохранения.

При этом реализована так же функция авто сохранения, более подробно описанная в п.2.2.5 .

2.2.4          Описание процесса редактирования видео

Процесс редактирования видео одинаков и для Гостя и для Пользователя. Для начала работы пользователь в соответствующей вкладке загружает с компьютера видео, аудио, картинки которые собирается редактировать, после чего располагает их на тайм-лайне в нужной последовательности. После этого, пользователь может работать с загруженным контентом:

●       обрезать видео/аудио;

●       накладывать изображение;

●       накладывать эффекты;

●       накладывать титры;

●       накладывать звук;

●       накладывать видео;

●       менять характеристики итогового видео: разрешение, частоту кадров, кодировку и т.д.

Пользователь в процессе редактирования имеет возможность просмотреть предварительный результат.

После завершения обработки видео и просмотра итогового варианта пользователь может посмотреть и скачать готовое видео или продолжить редактирование. Скачивание осуществляется нажатием кнопки «Скачать как», после чего открывается окно выбора параметров скачиваемого видео. Пользователь должен выбрать следующие параметры:

●       формат видео;

●       частота кадров;

●       бит рейд.

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

На рисунке 4 представлена диаграмма активности, демонстрирующая порядок передачи информации между пользователем, клиентским и серверным приложениями.

Рис. 4. Диаграмма активности

2.2.5          Процесс сохранения проекта

Как уже было описано, в разделе 2.2.3 проекты может сохранять только зарегистрированный Пользователь. Сохранение происходит после выбора пункта «Сохранить как» в выпадающем меню. Если проекту не было присвоено ранее имя, то Пользователю предлагается ввести имя проекта.

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

2.3    Макеты разрабатываемого онлайн видео редактора

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

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

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

1)    Wireframe - позволяет очень быстро сформировать схематичный эскиз страниц сайта, определить необходимые элементы и их расположение на странице. Данный инструмент использовался при начальном проектировании и позволил определить приблизительный вид будущего сайта исходя из планируемой функциональности. Полученные с помощью Wireframe макеты приведены ниже, в данном разделе.

2)  Photoshop - один из наиболее популярных продуктов для разработки PSD макетов web - сайтов. Позволяет разработать наглядные макеты страниц сайта. В данном проекте Photoshop использовался для разработки дизайна сайта и генерирования ряда графических psd элементов, использованных при верстке сайта. Разработанные с помощью Photoshop макеты приведены в разделе 4.5 .

Рассмотрим макеты, созданные с помощью Wireframe.

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

Основное меню должно содержать следующие пункты:

●       Главная;

●       Редактор;

●       Проекты (для зарегистрированных пользователей);

●       Информация;

●       Вход/Имя пользователя (в случае входа на сайт).

На рисунках 5 и 6 представлен макет главной страницы разрабатываемого приложения.

Рис. 5. Макет главной страницы для Гостя

После регистрации или входа зарегистрированного пользователя содержание основного меню главной страницы меняется: появляется пункт меню «Проекты» и пункт «Вход» меняется на имя пользователя.

Рис. 6. Макет главной страницы зарегистрированного пользователя

При нажатии не кнопку «Вход» в учётную запись появляется окно регистрации, содержащие элементы, описанные ранее в разделе 2.2.2 .

Рис. 7. Макет главной страницы с всплывающим окном регистрации

При выборе пункта меню «Проекты» зарегистрированный пользователь переходит на страницу проектов, макет которой изображен на рисунке 8.

Рис. 8. Макет страницы проектов

Окно содержит: заголовок с именем и логотипом, кнопку выпадающего меню, имя Пользователя, окно с существующими проектами Пользователя и кнопку для создания нового проекта.

Из данного окна Пользователь может перейти в окно редактирования видео (см. рисунок 10), открыв один из существующих проектов, или во всплывающем окне создания нового проекта (см. рисунок 9), нажав на кнопку «Новый проект».

Рис. 9. Макет всплывающего окна создания нового проекта

Одной из самых важных и функциональных страниц сайта является страница редактирования видео. Как уже было описано ранее, переход на неё осуществляется из основного меню и в результате создания нового проекта.

Основными элементами страницы редактирования видео являются:

●       окно проигрывания видео;

●       окно загрузки файлов, с закладками по типу контента;

●       панель инструментов (tool bar), содержащая:

○       кнопка воспроизведения с текущего момента;

○       кнопка воспроизведения с начала;

○       кнопка масштабирования элементов на дорожке;

○       кнопка экспорта;

○       кнопка сохранения проекта.

●       видео\аудио дорожки.

Рис. 10. Макет страницы редактирования видео

С целью экономии пространства, основное меню для перехода на другие страницы сайта сделано выпадающим.

Как было сказано в разделе 1.2 , приложение должно содержать справочную информацию по использованию данного редактора. Переход на страницу со справочной информацией осуществляется из основного меню, выбором пункта «Информация». Страница информации помимо стандартного заголовка содержит оглавление, позволяющее осуществлять навигацию по справке и текст справки (см. рисунок 11).

Рис. 11. Макет страницы справочной информации

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

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

Для ускорения перехода к редактированию на экран может быть вынесена кнопка “Начать редактирование” (см. рисунок 12, б).

Окно регистрации может быть оставлено без изменений (см. рисунок 12, в).

На рисунке 12 представлены макеты главной страницы для мобильных устройств.

а)б)в)

Рис. 12. Макеты главной страницы для мобильных устройств

Макет страницы редактирования видео для мобильного устройства представлен на рисунке 13.

Рис. 13. Макет страницы редактирования видео для мобильного устройства

2.4    Выводы

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

3.  Выбор инструментов разработки

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

3.1 Пользовательская часть

Для написания пользовательского интерфейса использовались стандартные языки web программирования. Такие как: HTML, CSS, JavaScript. Кроме того были использованы библиотеки Jquery, набор инструментов Bootstrap, а так же ряд библиотек, перечисленных ниже.

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

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

Помимо этого, при разработке web-приложения были использованы такие библиотеки как:

●       Owl.carousel- адаптивный слайдер позволяющий быстро и легко добавить в свой сайт красочную презентацию.

●       Socket.io- JavaScript библиотека для web-приложений и обмена данными в реальном времени. Состоит из двух частей: клиентской, которая запускается в браузере и серверной для node.js.

●       LocalStorage- локальное хранилище данных на стороне пользователя, которое позволяет хранить данные не ограничено по времени, т.к. они не удаляются после закрытия браузера.

 

3.1.1 Серверная часть

Серверная часть была написана с помощью фреймворка Node.js, что позволило написать сервер на JavaScript, а так же дало свободу в разработке. Данный фреймворк обладает достаточно большим количеством преимуществ: хорошо работает с большим потоком трафика, дает возможность одновременной обработки большого количества запросов с низким временем отклика, использует движок V8. Механизмы запросов построены на событиях, что делает невозможным заблокировать работающий движок - это огромное преимущество для операций ввода-вывода, подключения к базам данных, чтения дисков и др., обеспечивается высокая производительность, т.к. используется модель event-driven non-blocking IO, в которой есть только один поток обслуживающий клиентские запросы.

Помимо этого, Node.js обладает большим количеством модулей различного назначения, что позволяет использовать готовые решения, но при этом дает свободу при разработке. В проекте были использованы следующие Node.js модули:

●       nodemon - модуль, применяемый для отслеживания изменений файлов в каталоге, в котором Node был запущен. В случае их изменений, он автоматически перезапускает Node приложение;

●       express - минималистичный и гибкий web-фреймворк для приложений Node.js, предоставляющий обширный набор функций для web-приложений.[8]. Express является базовым пакетом, для создания http-серверов, позволяющий быстро и удобно создать сервер, содержит огромное количество утилит, упрощающих работу по созданию web-приложения.

●       ejs - удобный JavaScript шаблонизатор, движок рендеринга, который поддерживает наследование шаблонов [9]. Для использования данного шаблонизатора файлы разметки страницы html или xml необходимо создавать с разрешением .ejs, в данном файле могут присутствовать фрагменты кода на языке JavaScript внутри тегов <% и >%. В результате обработки JavaScript-кода библиотекой ejs, код исполняется и заменяется кодом на языке HTML/XML.

●       MongoDB - документо-ориентированная система управления базами данных (СУБД) с открытым исходным кодом, не требующая описания схемы таблиц. Написана на языке C++;

●       mongoose - фреймворк, для удобной работы с MongoDB;

●       Multer- модуль загрузки данных для загрузки файлов.

●       fluent-ffmpeg - библиотека абстрагирующая комплексное использование командной строки FFmpeg в простой в использовании модуль Node.js.

 

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

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

В качестве базы данных для разрабатываемого Web-приложения была выбрана документо-ориентированная система управления базами данных MongoDB. Данная система обладает рядом преимуществ перед обычными SQL базами данных, прежде всего благодаря тому, что MongoDB является NoSQL базой данных, что означает, что она не требует описания схемы таблиц. В NoSQL отсутствуют такие ограничения свойственные реляционной модели как недостаточная производительность, обеспечены более легкие средства доступа к данным и их хранения. Основное отличие от MySQL заключается в том, что в MongoDB запросы пишутся на BSON (бинарный JSON), а не на языке SQL, что означает, что работа с этой системой может осуществляться через JavaScript выражения. Помимо этого, MongoDB может работать практически на всех системах - Linux, Windows, OSX. MongoDB активно развивается: постоянно появляются обновления. Разработчики так же предоставляют хорошую документацию для начинающих.хорошо подходит в случаях, когда таблицы можно представить в виде коллекции объектов, как в случае разрабатываемого приложения, где необходимо хранить исключительно список пользователей и их проектов.

Так же не маловажным аргументом является факт, что для Node.js существует модуль mongodb, позволяющий достаточно быстро добавлять базу данных в проект, а так же и модуль mongoose, позволяющий удобно и без особых сложностей управлять базой данных в проекте.

3.3 Выбор библиотек для обработки видео

Для обработки видео можно использовать различные библиотеки, такие как: мультимедийный фреймворк FFmpeg, библиотеку для кодирования и декодирования Libav, кроссплатформенный мультимедийный фреймворк GStreamer и др. Все они обладают незначительными отличиями при обработке аудио и видео.

В рамках данного проекта для обработки видео была выбрана кроссплатформенная open-source библиотека FFmpeg.

FFmpeg - содержит множество свободных библиотек и приложений, позволяющих осуществлять кодирование и декодирование, запись и проигрывание аудио <https://ru.wikipedia.org/wiki/%D0%A6%D0%B8%D1%84%D1%80%D0%BE%D0%B2%D0%BE%D0%B9_%D0%B7%D0%B2%D1%83%D0%BA> и видеозаписей. FFmpeg поддерживает большинство распространенных форматов.

В состав FFmpeg входят такие библиотеки как:

●       libavcodec - библиотека, содержащая множество аудио и видео кодеков;

●       libavformat - библиотека мультиплексирования/ демультиплексирования;

●       libswscale - библиотека для масштабирования видео;

●       libpostproc - библиотека стандартных подпрограмм по обработке видео.

Таким образом, возможности FFmpeg достаточно обширны и хорошо подходят для разработки данного приложения. Библиотеку легко добавить в проект благодаря модулю Fluent-ffmpeg.

3.4 Выводы

В данной главе рассмотрены инструменты, методы, фреймворки и библиотеки необходимые для разработки Web- приложения.

Для разработки пользовательского интерфейса было решено использовать: Jquery, Ajax, Bootstrap, CSS3. Для разработке серверной части приложения использовать: Node.js, Socket.io, MongoDB, Ffmpeg.

Данные инструменты позволяют в полной мере реализовать необходимую функциональность разрабатываемого Web-приложения.

4.      Разработка Web-приложения

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

4.1 Установка необходимых фреймворков и модулей

Прежде всего, необходимо установить Node.js. Сделать это можно скачав дистрибутив для своей операционной системы с официального сайта [10]. После скачивания запустить установку и следовать инструкциям по установке. Вместе с Node будет установлен стандартный пакетный менеджер npm, с помощью которого можно будет легко и быстро устанавливать Node модули.

После установки необходимо создать рабочий каталог, далее с помощью команды npm init создать в этом каталоге файл package.json. В процессе создания будет предложен ряд вопросов, в зависимости от ответов на которые, будет сформирован файл.

После этого можно будет приступить к установке модулей. Первым модулем необходимо установить express, который позволит нам создать http сервер без особых сложностей. Сделать это можно с помощью команды:install express --save.

Ключ --save означает, что нужно добавить данный модуль в раздел dependencies файла package.json. Таким же образом необходимо установить другие необходимые модули, такие как: body-parser, ejs, mongodb, fluent-ffmpeg, multer, socket.io. Данные модули по умолчанию будут устанавливаться в папку под названием node_modules и именно там Node будет их искать при использовании в проекте.

Так же для удобства разработки и отладки, необходимо установить модуль nodemon, который позволит не перезапускать разрабатываемое приложение при каждом изменении. Данный модуль следит за файлами в директории проекта и перезапускает Node приложения, если произошли какие-то изменения. Для работы с данным модулем необходимо установить его глобально (npm дает возможность установить модуль глобально, т.е. данный модуль будет доступен из любого места.). Для установки модуля глобально необходимо использовать ключ -g в команде установки:install -g nodemon

Далее в папке с проектом создадим папки public и views, в которых будут храниться статические файлы и файлы с разметкой страниц соответственно.

4.2 Создание локального сервера

Действия, описанные в предыдущей главе, являлись подготовкой к началу разработки. Теперь необходимо создать сам сервер. Для этого, в корне папки с проектом необходимо создать файл app.js, который в дальнейшем будет запускаться для включения сервера. В данном файле необходимо подключит модули express и body-parser. Сделаем это с помощью функции require, указав необходимые модули в качестве аргумента:

далее создадим сервер следующим способом:

В данном случае будет создан локальный сервер, прослушивающий локальный порт 3000.

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

Сделать это можно следующим образом:

Затем в app.js подключим файл routes.js, в котором укажем правила, по которым будут обрабатываться Post и Get запросы. В качестве аргументов необходимо указать переменные app и server.

В итоге получим код, приведенный в Приложении 1.

4.3 Обработка POST и GET запросов

В предыдущей главе было описано создание “статического” сервера. Далее, в рамках разработки приложения, необходимо описать правила обработки Post и Get запросов.

Обычно Get запросы используются для запроса содержимого указанного ресурса. По стандарту HTTP, запросы типа Get являются идемпотентными, это означает, что повторное применение одного Get запроса даст тот же результат, что и при первом применении. В связи, с этим Get запросы в данном проекте будут использованы исключительно с целью запроса пользователем определённых страниц и файлов.запросы обычно применяются для передачи пользовательских данных на сервер. Метод Post не является идемпотентным, это означает, что многократное повторение тех же запросов Post, возвращает разные результаты. В данном проекте Post запросы будут использованы для загрузки файлов на сервер и работы с базой данных.

Для удобства, обработка запросов будет описана в отдельном файле/модуле routes.js. Для того чтобы данный файл являлся модулем и мог быть подключен в app.js, необходимо написать в routes.js функцию module.exports = function(app){*} и весь код писать внутри данной функции.

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

Функция get принимает в качестве параметров имя запроса и функцию с параметрами request, response. Данная конструкция означает, что код внутри функции будет выполнен, когда на сервер придёт Get запрос с заголовком /home. Далее необходимо сделать так, что бы при запросе /home пользователь получал страницу home.html для этого внутри функции с параметрами res и req необходимо написать:

В итоге при Get запросе /home сервер обработает страницу согласно разметке в home.ejs и пользователю будет отправлен html разметка данной страницы.

Аналогично необходимо написать обработчики остальных Get запросов: /videdit - страницы видео редактора, /about - информационная страница и /projwin - страницы проектов. Обработка данных запросов будет реализована аналогично описанному выше, кроме страницы проектов.

Так как вид страницы проектов зависит от того, какие проекты уже были созданы, то есть от базы данных, то необходимо воспользоваться возможностями ejs шаблонизатора. В этом случае функция render будет выглядеть следующим образом:

Где projects переменная, содержащая массив названий проектов, projscr переменная, содержащая массив ссылок на проекты, а projprev переменная, содержащая массив ссылок на изображения.

Обработка Post запросов осуществляется аналогично обработке Get запросов и выглядит следующим образом:

Функция app.post так же принимает заголовок и функцию в качестве параметров. В данном проекте была реализованная обработка следующих Post запросов: /newprojcreate - запрос на создание нового проекта (добавление его в базу данных), /login - запрос на авторизацию/регистрацию, /registr - запрос на регистрацию нового пользователя, /upload - запрос на загрузку файла на сервер.

Функция redirect перенаправляет указанный запрос, что позволяет не повторять один и тот же код несколько раз:

В итоге получим код, приведенный в Приложении 2.

4.4 Работа с Mongodb

Как было описано ранее MongoDB является NoSQL базой данный и не требует описания схемы таблиц, а данные хранятся в качестве документов, представляющих собой JSON-подобную структуры, которые объединяются в коллекции. Поэтому сначала необходимо определиться какие данные необходимо хранить, и какие коллекции эти данные будут образовывать. Так как база данных нам необходима исключительно для хранения списка пользователей и их проектов, нам будет достаточно одной коллекции users.

Экземпляр коллекции users должен обладать следующими атрибутами:

●       имя пользователя (name);

●       пароль (password);

●       электронный адрес (e-mail);

●       состояние подтверждения (accept);

●       проекты (projects).

В свою очередь, массив объектов “проекты” содержит объекты со следующими атрибутами:

●       имя проекта;

●       дата создания/изменения;

●       ссылка на обложку;

●       содержание (xml код страницы).

На рисунке 14 представлена структура базы данных.

Рис. 14. Структура базы данных

Для начала использования необходимо установить MongoDB.

После чего создать директорию data для данных.

Теперь можно запустить базу данных, для этого необходимо запустить mongod, который обычно находится в папке: C:\Program Files\MongoDB\Server\3.2\bin.

Далее, не закрывая консоль с mongod, в новой командной строке запустить mongo и создать коллекцию users с помощью команды:.createCollection("users")

и сделать её используемой:users.

Посмотреть уже созданные коллекции можно с помощью команды:dbs

и вывести содержимое коллекции:.collecton.find()

где collecton - имя коллекции (в нашем случае users).

Внутри функции find() можно задавать параметры поиска (фильтры).

Например, в результате выполнения команды:

db.users.find({name: “Alex”})

будет выведен только пользователь с именем Alex.

Для использования базы данных в проекте, необходимо подключить модули mongodb и mongosed, как было показано ранее с другими модулями. Работа с базой данных осуществляется при поступлении определённых Post запросов, поэтому данные модули понадобятся в routeres.js.

После подключения модулей создадим переменные MongoClient и url:

При запросе на регистрацию необходимо создать новый экземпляр коллекции. Для этого, внутри функции обрабатывающей Post запрос /registration напишем:

Сначала объявим переменные: имя пользователя, пароль, е-мейл и присвоим им данные, которые возьмём из формы (строка 1-3). Далее, создадим соединение с базой данных (строка 4). Функция connect в качестве параметров принимает url, и функцию с параметрами err и db внутри которой можно работать с базой данных. Далее с помощью функции find будем искать пользователя с указанным именем (строка 6), выполним проверку успешности поиска (строка 7). Если объект найден, то это означает, что пользователь с таким именем уже существует, о чем отправим сообщение (строка 8). В случае неуспеха при поиске, добавляем в базу данных пользователя с заданными параметрами (строка 11) и перезапускаем страницу (регистрация завершена).

Добавим новый проект текущему пользователю в базу данных следующем образом:

Сначала объявляются переменные: имя проекта, текущая дата (строка 1-2). Далее создается соединение с базой данных (строка 3). Функция connect в качестве параметров принимает url, и функцию с параметрами err и db внутри которой можно работать с базой данных. Далее с помощью функции find находим пользователя с указанным именем (строка 5), далее добавляем в массив проектов данного пользователя новый проект (строка 6) после чего переходим на странице редактирования (строка 9).

a.      

4.5 Вёрстка страниц

Прежде чем приступить к вёрстке страниц, необходимо сделать полноценные макеты. В рамках данного проекта с помощью Adobe Photoshop были созданы psd макеты, на основе которых была осуществлена вёрстка страниц. На рисунке 15 приведен макет главной страницы, разрабатываемого приложения.

Рис. 15 PSD макет главной страницы

Страницы Web- приложения были созданы с помощью стандартных языков разметки страниц HTML и CSS.

При вёрстке страниц использовался шаблонизатор ejs, который дал некоторые возможности при вставке информации из базы данных. Тем не менее, разметка страниц (файлы разметки) почти не отличается от стандартных файлов разметки на языке HTML. Стили так же были описаны на стандартном языке CSS.

Возможности шаблонизатора использовались исключительно при создании страницы с проектами. Для отображения проектов, данные о них брались из базы данных.

С помощью вставок JavaScript кода необходимо создать список объектов в зависимости от количество созданных проектов.

Для простоты разработки использовались различные Bootstrap значки и элементы, такие как выпадающие меню. В соответствии с описанием на сайте Bootstrap: для использования Bootstrap значков необходимо создать тег span с классом, соответствующим названию иконки (названия можно увидеть на сайте Bootstrap [11]).

Пример вставки значка “плюс”:

Пример вставки выпадающего меню:

В результате вёрстки были получены шаблоны страниц (папка views):

●       home.ejs;

●       projwin.ejs;

●       videdit.ejs;

●       info.ejs.

А так же файлы стилей(public/css):

●       home.css;

●       projwin.css;

●       videdit.css;

●       info.css;

●       main.css;

●       font.css;

●       media.css.

 

.6 Разработка пользовательского интерфейса видео редактора

При реализации пользовательского функционала видео редактора был создан ряд скриптов, написанных на JavaScript с использованием следующих библиотек:

●       JQuery;

●       Ajax;

●       Iutil;

●       Socket.io.

В соответствии с разработанными ранее требованиями, к функциональным возможностям, макетам интерфейса и свёрстанным страницам были реализованы следующие функции:

●       перетаскивания видео\аудио на тайм-лайн;

●       масштабирования элементов на тайм-лайне;

●       удаления элементов и тайм-лайнов;

●       загрузки файлов;

●       воспроизведения\остановки видео;

При этом были использованы разнообразные функции вышеперечисленных библиотек.

4.7 Структура проекта

Готовый проект представляет собой наборы:

●       серверных и пользовательских скриптов;

●       файлов разметки и стилей страниц сайта;

●       использованных модулей и библиотек;

●       файлов базы данных.

В результате разработки был получен проект, имеющий следующую структуру:

●       node_modules - содержит модули, используемые в проекте;

●       public - содержит публичные файлы;

○       css - содержит файлы стилей;

○       js - пользовательские скрипты;

○       img - содержит изображения;

○       fonts - содержит шрифты;

●       views - содержат шаблоны с разметкой страниц;

○       home.ejs - шаблон главной страницы;

○       projwin.ejs - шаблон страницы проектов;

○       videdit.ejs - шаблон страницы редактора;

○       info.ejs - шаблон информационной страницы;

●       upload - папка с файлами загружаемые пользователя;

●       data - папка с файлами базы данных;

●       app.js - файл сервера;

●       package.json - конфигурационный файл;

●       routes.js - модуль обработки Post\Get запросов.

 

.8 Запуск и отладка сервера

Запускать сервер необходимо через консоль (командную строку) следующей командой:app.js

После чего можно увидеть как приложение работает, введя в строку поиска браузера #"897503.files/image034.jpg">

Рис. 16. Фрагмент главной страницы сайта

При нажатии на кнопку «Войти» поверх текущей страницы откроется окно регистрации, в котором пользователь сможет создать новый аккаунт, а при нажатии на чек-бокс «у меня есть аккаунт» окно регистрации изменится на окно входа в аккаунт (см. рисунок 17).

Рис. 17. Окно регистрации/входа в аккаунт

После входа или создания нового аккаунта, главная страница автоматически обновляется, после чего кнопка входа изменяется на имя пользователя. А так же в меню появляется новый пункт «ПРОЕКТЫ» (см. рисунок 18).

Рис. 18. Фрагмент главной страницы сайта зарегистрированного пользователя

Выбор пункта меню «Проекты» откроет окно, в котором можно создать новый проект или открыть уже созданный.

При выборе в меню пункта «FAQ», открывается информационная страница, содержащая краткое описание данного Web-приложения. Справа находится меню навигации по странице. При нажатии на пункт меню навигации осуществляется переход к выбранному пункту (см. рисунок 19). Так же как и на всех страницах кроме главной, сверху находится кнопка с выпадающим меню, в котором содержатся кнопки для перехода на другие страницы сайта.

Рис. 19. Фрагмент информационной страницы сайта

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

Загрузка файлов осуществляется нажатием на значок папки в окне загрузки файлов. Для добавления видео на таймлайн необходимо перетащить значок видео на таймлайн.

Рис. 20. Страница редактора

Панель инструментов содержит следующие кнопки:

·        добавления таймлайна;

·        проигрывания;

·        паузы;

·        масштабирования элементов таймлайнов;

·        сохранения проекта;

·        экспорта видео.

4.10 Тестирование приложения

По итогам разработки было проведено функциональное тестирование разработанного web-приложения. В ходе тестирования была проведена проверка:

●       внутренних ссылок;

●       тестирование интерфейса:

○       адаптивности;

○       функциональности;

●       навигации (поведение при нажатии на кнопки назад\вперёд\перезагрузить);

●       кроссбраузерности.

В ходе тестирования были выявлены и устранены незначительные недостатки в адаптивности и кроссбраузерности. Данные недостатки были устранены.

4.11 Оценка экономической эффективности

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

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

Так же были проанализированы возможные способы дохода. Сайты по обработке видео, применяют прямые методы получения дохода, т.е. сайт сам является источником дохода. В этом случае, существуют следующие основные способы получения дохода:

●       реклама (контекстная/прямая, за клики/за показы);

●       платный доступ к контенту;

●       спонсирование, пожертвования.

Рассмотрим способы получения доход одного из аналогичных сайтов. Онлайн видео редактор WeVideo даёт возможность бесплатного использования для личных целей, с ограниченными возможностями. Помимо этого, существует возможность коммерческого использования при оплате лицензии. При этом пользователь оплативший лицензию получает более широкие возможности, чем при бесплатном использовании. Для коммерческого использования существует 4-е тарифа flex (10 долл./год), personal (39 долл./год), unlimited (69 долл./год), business. В зависимости от выбранного тарифа увеличивается стоимость годового “обслуживания” а так же максимальная длительность итогового видео, размер хранилища, и качество итогового видео.

Так же есть учебные тарифы позволяющие купить лицензии оптом.

Необходимо заметить, что в данном видео редакторе полностью отсутствует реклама.

Рассмотрим основные, текущие затраты на поддержание и развитие сайта:

●       Регистрация домена 595 руб. (в доменной зоне RU) [12];

●       Продление домена - 413 руб./год.

●       Услуги хостинга - 1300 руб./мес. (15600 руб./год) [13].

Итого: 16195 руб./год - первый год (16013 руб./год последующие года).

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

Стоимость рекламы в интернете сильно варьируется от рекламодателя, популярности веб-ресурса и других факторов. Так например, средняя цена рекламы «за клик» варьируется от 30 копеек до 5 руб. за клик. Поэтому на данном этапе четко определить величину возможных доходов представляется затруднительным.

Предположим, что выручка от разного типа рекламы составит 300 руб./месяц. Рассмотрим, когда можно достичь точки окупаемости, если использовать только и запланировать, что ежемесячно доход будет увеличиваться на 10%.

В таблице 3 приведен расчет точки окупаемости, а на рисунке 21 представлен график окупаемости.

Таблица 3.

Расчет точки окупаемости

Месяцы	Расходы, руб./месяц	Расходы нарастающим итогом, руб.	Планируемые доходы, руб./месяц	Доходы нарастающим итогом, руб.
1	1350	1350	300	300
2	1350	2699	330	630
3	1350	4049	363	993
4	1350	5398	399	1392
5	1350	6748	439	1832
6	1350	8098	483	2315
7	1350	9447	531	2846
8	1350	10797	585	3431
9	1350	12146	643	4074
10	1350	13496	707	4781
11	1350	14845	778	5559
12	1350	16195	856	6415
13	1334	17529	942	7357
14	1334	18864	1036	8392
15	1334	20198	1139	9532
16	1334	21533	1253	10785
17	1334	22867	1378	12163
18	1334	24202	1516	13680
19	1334	25536	1668	15348
20	1334	26870	1835	17182
21	1334	28205	2018	19201
22	1334	29539	21421
23	1334	30874	2442	23863
24	1334	32208	2686	26549
25	1334	33542	2955	29504
26	1334	34877	3250	32755
27	1334	36211	3575	36330

Рис. 21. График окупаемости

Таким образом, мы видим, что при данных предположениях, точка окупаемости наступит на 27 месяц, т.е. более чем через 2 года.

4.12 Выводы

В данной главе описана последовательность разработки Web-приложения, начиная с установки необходимых модулей, фреймворков и установки локального сервера. Описаны правила обработки Post и Get запросов, а так же работа с NoSQL базой - MongoDB. С помощью Photoshop разработаны полноценные макеты и сверстаны страницы. Для реализации пользовательского функционала видео редактора были написаны скрипты на JavaScript, с использованием библиотек JQuery, Ajax, Iutil, Socket.io.

Проведенное функциональное тестирование, показало работоспособность разработанного приложения.

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

 

Заключение

Современные интернет технологии развиваются стремительными темпами. Увеличивается количество Web- приложений и их востребованность среди пользователей. В связи с этим, разработка новых Web-приложений является весьма актуальной темой.

В результате проведенной работы была достигнута основная цель: разработано Web-приложение, позволяющее пользователю редактировать видео. Для достижения поставленной цели были осуществлены все необходимые этапы проектирования и разработки приложения:

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

●       осуществлено проектирование Web-приложения, в результате которого определены общие методы работы системы такие как: взаимодействие системы с пользователем, алгоритмы обмена данными между серверным и клиентским частями приложения, а так же разработано графическое представление будущего сайта;

●       выбраны инструменты и методы разработки, позволяющие наиболее эффективно реализовать Web-приложение;

●       на основании проведенного проектирования осуществлена разработка Web-приложения и проведено функциональное тестирование. Тестирование показало работоспособность приложения и соответствие установленным требованиям к нему.

Полученное в результате разработки Web-приложение соответствует всем поставленным требованиям и не уступает существующим аналогичным онлайн приложениям.

Дальнейшее развитие функционала данного приложения является весьма перспективным и позволит увеличить конкурентные преимущества на рынке онлайн видео редакторов.

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

 

Список использованной литературы

1.      ДРОНОВ, В. JavaScript в Web-дизайне/В. Дронов. - СПб.: БХВ-Петербург, 2005.

.        КРАМЕР, Э. HTML: наглядный курс Web-дизайна.: Пер. с англ.: учеб. пособ./Э. Крамер. - М.: Издательский дом «Вильямс.

3.      Официальный сайт Photoshop. URL:<http://www.adobe.com/ru/products/premiere.html>

.        Официальный сайт Corel Corporation
URL:<http://corel.ru/product/ps19/>

.        Официальный сайт Sony URL:http://www.sony.ru/pro/product/broadcast-products-creative-software/vegas-pro-12/overview/#overview <http://www.sony.ru/pro/product/broadcast-products-creative-software/vegas-pro-12/overview/>

.        Официальный сайт Corel. «Описание videostudio» URL:<http://www.videostudiopro.com/ru/products/videostudio/>

.        Официальный сайт Wevideo URL:<https://www.wevideo.com/>

.        Официальный сайт модуля expres URL:<http://expressjs.com/ru/>

.        Александр Барчук «Основные принципы Material Design». URL:<https://habrahabr.ru/post/248653/>

.        Официальный сайт Node. URL:<https://nodejs.org/en/>;

.        Официальный сайт bootstrap. URL:<http://bootstrap-3.ru/components.php>;

.        Сайт masterhost. «Цены на регистрацию доменов». URL:<https://masterhost.ru/service/domain/price/>

.        <https://www.digitalocean.com/pricing/>

.        Сайт trafcom. «Стоимость рекламы в интернете» URL:<http://www.trafcom.ru/ru/internet-reklama/internet-reklama-cena.htm>l

 

Приложение 1. Код «app.js»

1.      var bodyParser= require('body-parser');

2.      var express = require('express');

.        var app=express();

.        app.use(bodyParser.urlencoded({extended:true}));

.        app.use(express.static(__dirname + '/public'));

.        app.use(express.static(__dirname + '/uploads'));

.        var server = app.listen(3000,function(){

8.      console.log("listen 3000");

.        });

require('./routes.js')(app, server);

 

Приложение 2. Код «routes.js»

1.      module.exports = function(app, server){

2.      var multer = require('multer');

3.      var upload = multer({ dest: './uploads/'});

4.      var mongodb = require('mongodb');

.        var mongoose = require('mongoose');

6.      var io = require('socket.io');

7.      var ejs = require('ejs');

.        var MongoClient = mongodb.MongoClient;

9.      var url ='mongodb://localhost:27017/users';

.        var io = io.listen(server);

11.    var dbprojects;

.        var username="ВОЙТИ";

13.    var LocalStorage = require('node-localstorage').LocalStorage;

.        localStorage = new LocalStorage('./scratch');

.        app.post('/login', function(req, res, next) {

.        var user = req.body.login;

.        var password = req.body.pass;

.        MongoClient.connect(url, function(err, db) {

.        var collection = db.collection('users');

.        collection.find({"name" : user}).toArray(function(err, docs) {

21.    if(docs!=""){

22.    collection.find({"name" : user, "password" : password}).toArray(function(err, docs) {

23.    if(docs!=""){

24.    dbprojects= collection.find({"name" : user, "password" : password}).toArray(function(err, docs) {});

.        res.render('home', {data: username});

26.    }else{

.        io.emit('loginerr', " Неверный пароль");

.        }

.        });

.        }

.        else{

.        io.emit('loginerr', " Имя пользователя не существует");

.        }

.        });

.        });

.        });

37.    app.post('/registr', function(req, res, next) {

.        var user = req.body.login;

.        var password = req.body.pass;

.        var mail = req.body.mail;

.        MongoClient.connect(url, function(err, db) {

.        var collection = db.collection('users');

.        collection.find({"name" : user}).toArray(function(err, docs) {

44.    if(docs!=""){

.        io.emit('regerr', "Неверный пароль");

.        }

.        else{

48.    collection.insert({'name': user, "password": password, "mail": mail, "accept": 0, "projects" : []});

49.    res.redirect('/');

.        }

.        });

.        });

.        });

54.    app.post('/newprojcreate', function(req, res, next) {

.        var user1=localStorage.getItem("curuser");

.        var projname = req.body.projname;

.        MongoClient.connect(url, function(err, db) {

.        var collection = db.collection('users');

.        collection.find({"name" : user1}).toArray(function(err, docs) {

.        collection.update( { name: user1 } , { $push: { projects: { name: projname, content: "" } } } );

61.    });

.        });

.        res.redirect('/videdit');

.        });

65.    app.get('/', function(req, res){

66.    res.render('home');

.        });

68.    app.get('/videdit', function(req, res){

69.    res.render('videdit');

.        });

71.    app.get('/info', function(req, res){

72.    res.render('info');

.        });

74.    app.post('/projwin', function(req, res){

.        var user1=localStorage.getItem("curuser");

.        MongoClient.connect(url, function(err, db) {

.        var collection = db.collection('users');

.        var usr = collection.find({"name" : user1}, function(err, cursor) {

.        var ac=cursor.toArray(function(err, items) {

80.    dbprojects=items;

.        });

.        });

.        });

84.    res.render('projwin', {projects: dbprojects} );

85.    });

86.    app.use(multer({ dest: './public/',

87.    rename: function (fieldname, filename) {

.        return filename;

.        },

.        onFileUploadStart: function (file) {

91.    console.log(file.originalname + ' is starting ...');

92.    },

.        onFileUploadComplete: function (file) {

94.    console.log(file.fieldname + ' uploaded to ' + file.path)

95.    }

.        }));

97.    app.post('/upload',function(req,res){

.        upload(req,res,function(err) {

99.    if(err) {

100.  return res.end("Error uploading file.");

101.  }

.        res.redirect('/videdit');

.        });

.        });

105.  io.on('editdata', function (data) {

.        require('./edit.js')(data);

107.  });

108.  io.on('connection', function (socket) {

.        socket.emit('news', "how a u");

.        socket.on('editdata', function (data) {});

111.  });

112.  io.on('connection', function (socket) {

113.  socket.emit('savereq', "savereq");

114.  socket.on('saveproj', function (data) {

.        MongoClient.connect(url, function(err, db) {

.        var user1=localStorage.getItem("curuser");

.        var collection = db.collection('users');

.        collection.update( { "projects.name": "qwe" } , { $set: { "qwe.$.content": data } } );

119.  });

.        });

.        });

.        }

 

Приложение 3. Код «home.ejs»

1.      <!DOCTYPE html>

.        <html lang="ru">

.        <head>

.        <meta charset="utf-8" />

.        <title>VideoCooker</title>

6.      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

.        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

.        <link rel="stylesheet" href="css/main.css" />

.        <link rel="stylesheet" href="css/home.css" />

.        <link rel="stylesheet" href="css/owl.carousel.css" />

.        <link rel="stylesheet" href="css/owl.theme.css" />

12.    </head>

.        <body id="homebody">

.        <div id="authwind">

15.    <button id="authclouse" type="button" value="закрыть" onClick="authclouse();"></button>

16.    <p id="test1"> Регистрация </p>

17.    <p style="color: #e67835;"><input type="checkbox" id="authcheck" value="a2"> у меня есть акаунт </p>

.        <form id="formreg" action="/registr" method="POST">

.        <br><p id="regerrtext"></p><br>

20.    <div>

21.    <span>

.        <input name="login">

23.    </div><br>

.        <div>

25.    <span>

.        <input name="pass">

27.    </div><br>

.        <div>

29.    <span>

.        <input name="mail">

31.    </div><br>

32.    <input value="Создать акаунт" name="submit" id="auth_submit_button" type="submit" />

33.    </form>

34.    <form id="formauth" action="/login" method="POST">

.        <br><p id="errtext"></p><br>

36.    <div>

37.    <span>

.        <input name="login">

39.    </div><br><br>

.        <div>

41.    <span>

.        <input name="pass">

43.    </div>

44.    <input value="Войти" name="submit" id="auth_submit_button" type="submit" />

45.    </form>

.        </div>

.        <div id="header">

.        <div id="logo"></div>

.        <div>

.        <div id="title">

.        VIDEO - COOKER

.        </div>

.        <div id="slogan">

.        MAKE UP, CREATE, ENJOY

.        </div>

.        </div>

.        </div>

58.    <form action="/projwin" id="form1" method="post" style="display:none"><input name="susername" type="text" id="susername"/></form>

59.    <div id="menubar">

.        <ul id="menubut">

61.    <li id="menubutsel"><a href="#">Домашняя</a></li>

.        <li id="menubutsel"><a href="/videdit">Редактор </a></li>

.        <li id="menubutsel"><a id="proja" style="display: none;" href="#" onClick="gotopro();">Проекты</a></li>

.        <li id="menubutsel"><a href="/info">FAQ</a></li>

65.    <li id="menubutsel">

66.    <a href="#" onClick="gotoedit();" id="loginfild" name="loginfild">

.        <i>

68.    </a>

.        </li>

.        </ul>

.        </div>

.        <div id="stataria">

.        <ul id="statfor">

74.    <li><img src="img/circl.png"></li>

.        <li><img src="img/circl.png"></li>

.        <li><img src="img/circl.png"></li>

77.    </ul>

.        <ul id="statpos">

79.    <li><img src="img/circl.png"></li>

.        <li><img src="img/circl.png"></li>

.        <li><img src="img/circl.png"></li>

82.    </ul>

.        </div>

.        <div id="divline">

.        <div id="divtext">

.        OUR CAPACITY

.        </div>

.        </div>

.        <div id="carouselbox">

90.    <div id="carousel">

.        <div><img src="img/slid1.png"></div>

.        <div><img src="img/slid2.png"></div>

.        <div><img src="img/slid3.png"></div>

.        <div><img src="img/slid4.png"></div>

.        <div><img src="img/slid5.png"></div>

.        <div><img src="img/slid6.png"></div>

97.    </div>

.        </div>

.        <div id="footer">

100.  Выпускная квалификационная работа Завьялова Алексея Валерьевича. Группа БИВ122

.        </div>

102.  <script src="js/jquery-1.11.1.min.js"></script>

.        <script src="js/owl.carousel.min.js"></script>

.        <script src="js/owl.carousel.js"></script>

.        <script src="js/socket.io.js"></script>

.        <script src="js/home.js"></script>

107.  </body>

</html>

 

Приложение 4. Код «home.js»

1.      $(document).ready(function(){

2.      if (localStorage.getItem("username")!="LOGIN") {

3.      $('#proja').show();

.        }

5.      $('#nofus').text(localStorage.getItem("username"));

6.      var owl = $("#carousel");

.        $('.owl-carousel').owlCarousel({

.        nav: true,

.        navText: ["<img src='img/scrolleft.png'>","<img src= '../img/scrolrig.png'>"],

.        items:1,

.        loop:true,

.        autoPlay: 1000,

.        });

.        });

15.    $('#login').on('input', function() {

.        localStorage.setItem('username',$('#login').val());

17.    });

18.    $('#reglogin').on('input', function() {

.        localStorage.setItem('username',$('#login').val());

20.    });

.        $('#formauth').submit(function() {

.        var logind = $("#login").val();

.        var pass = $("#pass").val();

.        });

.        function gotoedit(){

26.    document.getElementById('authwind').style.display='block';

.        $('#homebody *[id != "authwind"]').css("opacity", "0.4");

.        $('#authwind *').css("opacity", "1");

29.    }

.        function authclouse(){

31.    document.getElementById('authwind').style.display='none';

32.    $('body *').css("opacity", "1");

.        localStorage.setItem('username',"LOGIN");

.        }

.        $('#authcheck').change(function () {

.        $('#formauth').toggle();

.        $('#formreg').toggle();

.        if ($("#authcheck").prop("checked")) {

.        $("#test1").text("Р’С…РѕРґ РІ акаунт");

.        }else{

.        $("#test1").text("Регистрация");

.        }

.        });

.        function gotopro(){

.        $("#form1").submit();

.        $("#susername").text($("#loginfild").text());

.        }

48.    var socket = io.connect('http://localhost:3000');

49.    $('#formauth').submit(function() {

50.    socket.emit('my other event', localStorage.getItem("username"));

51.    });

52.    socket.on('loginerr', function (data) {

53.    $('#errtext').text(data);

.        });

 

Приложение 5. Код «package.json»

1.      {

.        "version": "2.0.0",

.        "description": "",

.        "main": "app.js",

.        "scripts": {

7.      "test": "echo \"Error: no test specified\" && exit 1"

8.      },

.        "author": "alex zavyalov",

.        "license": "ISC",

.        "dependencies": {

.        "assert": "^1.3.0",

.        "body-parser": "^1.15.0",

.        "egs": "^0.3.1",

.        "ejs": "^2.3.4",

.        "express": "^4.13.3",

.        "fluent-ffmpeg": "^2.0.1",

.        "mongodb": "^2.1.7",

.        "mongoose": "^4.4.4",

.        "multer": "~0.1.6",

.        "node-localstorage": "^1.1.2",

.        "socket.io": "^1.4.5",

.        "util": "^0.10.3"

.        },

.        "devDependencies": {

.        "should": "~7.1.0",

.        "mocha": "~2.3.3",

.        "supertest": "~1.1.0"

29.    }

.        }

 

Приложение 6. Код «videdit.ejs»

1.      <!DOCTYPE html>

2.      <html lang="ru" id="projectcontent">

3.      <head>

.        <meta charset="utf-8" />

.        <title>VideoCooker</title>

6.      <meta http-equiv="X-UA-Compatible" content="IE=edge" />

.        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

.        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

.        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

.        <link rel="stylesheet" href="css/main.css" />

.        <link rel="stylesheet" href="css/videdit.css" />

.        <link rel="stylesheet" href="css/fonts.css" />

.        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

14.    </head>

.        <body id="editorbody">

.        <div id="smoleditwin">

17.    <button id="authclouse" type="button" value="закрыть" onClick="closesmoleditwin();"></button>

.        <video id="videofocat" src="" controls="controls"></video><br>

.        <span>

.        <p><input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;"></p>

.        <div id="slider-range"></div>

.        <button id="butcat">

.        <span>

24.    </button>

.        </div>

.        <div id="smolhad">

.        <div>

28.    <button id="butdropdown">

.        <span>

30.    </button>

.        <ul>

32.    <li><a href="/">Домашняя</a></li>

.        <li><a href="/info">Информационная</a></li>

.        <li><a href="#" onClick="gotopro();">Проекты</a></li>

.        <li onclick="saveproj()"><a href="#">Сохранить проект</a></li>

36.    <li><a href="#">Экспортировать видео </a></li>

37.    </ul>

.        </div>

.        <div id="slogo"></div>

40.    <div id="stitle">VideoCooker</div>

41.    <div id="username"></div>

.        </div>

.        <div>

44.    <div>

.        <video onended="chengevid(this);" style="width: 100%;" src="" id="videoPlayer" ontimeupdate="runnerupdate(this)"></video>

46.    </div>

47.    <div>

48.    <div id='filecont'>

.        <div>

.        <ul>

51.    <li>Видео</li>

.        <li>Аудио</li>

.        <li>Изображения</li>

54.    </ul>

55.    <div>

.        <form>

.        <div id="upload-file-container">

.        <input id="vfilefild" type="file" accept="video/*" name="userPhoto" onchange="FileSelct();" />

59.    </div>

60.    <div id="upload-file-button" style="display:none;">

.        <input type="submit" value="Upload" name="submit" id="vfilesubm">

62.    </div>

.        </form>

.        </div>

65.    <div>

.        <form id="auploadForm" enctype="multipart/form-data" action="/upload" method="post">

.        <div id="upload-file-container">

.        <input id="afilefild" type="file" accept="audio/*" name="userPhoto" onchange="FileSelct();" />

69.    </div>

70.    <div id="upload-file-button" style="display:none;">

.        <input type="submit" value="Upload" name="submit" id="afilesubm">

72.    </div>

.        </form>

.        </div>

75.    <div>

.        <form>

.        <div id="upload-file-container">

.        <input id="ifilefild" type="file" accept="image/*" name="userPhoto" onchange="FileSelct();" />

79.    </div>

80.    <div id="upload-file-button" style="display:none;">

.        <input type="submit" value="Upload" name="submit" id="ifilesubm">

82.    </div>

.        </form>

.        </div>

.        </div>

.        </div>

.        </div>

.        </div>

.        <div id="controlbar">

90.    <div>

.        <button type="button">

.        <span>

93.    </button>

94.    <ul>

95.    <li id="addbutlist">

96.    <button type="button">

.        <span>

98.    </button>

99.    <button type="button">

.        <span>

101.  </button>

102.  <button type="button">

.        <span>

104.  </button>

105.  <button type="button">

.        <span>

107.  </button></li>

.        </ul>

.        </div>

.        <div id="playbutgrup">

111.  <button type="button">

.        <span>

113.  </button>

114.  <button type="button">

.        <span>

116.  </button>

.        </div>

118.  <button type="button">

.        <span>

120.  </button>

121.  <button type="button">

.        <span>

123.  </button>

124.  <button type="button">

.        <span>

126.  </button>

.        <a href="/reopen"></a>

.        </div>

.        <div>

.        <div id="runner"></div>

.        <div id="line"></div>

132.  <div>

.        <div>

.        <button type="button">

.        <span>

136.  </button>

.        </div>

138.  <ul id="v1">

139.  </div>

.        </div>

141.  <script src="js/jquery-1.11.1.min.js" ></script>

.        <script src="js/iutil.js"></script>

.        <script src="js/jquery.form.min.js" ></script>

.        <script src="js/socket.io.js"></script>

.        <script type="text/javascript" src="js/jquery.json-2.3.js"></script>

.        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

.        <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

.        <script src="js/upload.js" ></script>

.        <script src="js/editer.js" ></script>

150.  </body>

.        </html>

 

Приложение 7. Код «editer.js»

1.      var arr = [];

.        var arrpostrec = [];

.        var sarrpostrec = [];

.        var count = [];

.        var ncurfile=1;

.        var curvidtrec=1;

.        var leftallprev=0;

.        var counttimelines=1;

.        var boolmastab=false;

.        var curentreac;

.        function FileSelct(){

12.    $('#upload-file-container').hide();

.        $('#upload-file-button').show();

14.    }

.        function allowDrop(ev) {

.        ev.preventDefault();

.        }

.        function drag(ev) {

19.    ev.dataTransfer.setData("text", ev.target.id);

20.    }

.        function setwidth(tlid,width){

.        if (boolmastab==true) {

23.    $('#bolck'+count[tlid]+"tl"+tlid).css('width', width);

24.    }else{

25.    $('#bolck'+count[tlid]+"tl"+tlid).css('width', "80px");

26.    }

.        $(".dragaox").draggable({

.        containment:'parent',

.        axis: "x"

.        });

.        }

.        function drop(ev,elem) {

33.    var fulid=$(elem).attr('id');

34.    var tatl=fulid.charAt(0);

35.    var tlid=parseInt(fulid.charAt(1));

36.    count[tlid]++;

.        ev.preventDefault();

38.    var data = ev.dataTransfer.getData("text");

.       

40.    if (tatl=="v") {

.        var nof=$("#"+data).text();

42.    var newLi = document.createElement('li');

43.    if (tlid==1) {

44.    newLi.className = "ui-state-default";

45.    }else{

.        newLi.className = "dragaox";

.        }

48.    newLi.style="height: 45px; width:100px; margin-top: 1px; background-color: grey; border-radius: 10px; ";

.        newLi.id="bolck"+count[tlid]+"tl"+tlid;

50.    ev.target.appendChild(newLi);

51.    newLi.innerHTML = "<video>

.        "<button type='button' id='se"+tlid+count[tlid]+"'>

.        "<span>

.        "<button type='button' id='de"+tlid+count[tlid]+"'>

.        "<span>

56.    setTimeout(function () {

57.    var vide= document.getElementById("v"+count[tlid]+"tl"+tlid);

58.    var width = vide.duration;

.        setwidth(tlid,width);

.        }, 500);

.        }else if (tatl=="a") {

.        var nof=$("#"+data).text();

63.    var audioElement = document.createElement('audio');

64.    audioElement.setAttribute('src', nof);

65.    var newLi = document.createElement('li');

66.    newLi.className = "dragaox";

67.    newLi.style="height: 45px; width:"+duration+"px; margin-top: 1px; background-color: grey; border-radius: 10px; ";

.        newLi.id="bolck"+count[tlid]+"tl"+tlid;

69.    ev.target.appendChild(newLi);

70.    newLi.innerHTML = "<video>

.        "<button type='button' id='se"+tlid+count[tlid]+"'>

.        "<span>

.        "<button type='button' id='de"+tlid+count[tlid]+"'>

.        "<span>

75.    setTimeout(function () {

.        var width = audioElement.duration;

.        setwidth(tlid,width);

.        }, 5000);

.        }else if (tatl=="i") {

80.    var newLi = document.createElement('li');

81.    newLi.className = "dragaox";

82.    newLi.style="height: 45px; width:100px; margin-top: 1px; background-color: grey; border-radius: 10px; ";

.        newLi.id="bolck"+count[tlid]+"tl"+tlid;

84.    ev.target.appendChild(newLi);

85.    newLi.innerHTML = "<img src='"+data+"'></img>"+

.        "<button type='button' id='se"+tlid+count[tlid]+"'>

.        "<span>

.        "<button type='button' id='de"+tlid+count[tlid]+"'>

.        "<span>

.        $('#bolck'+count[tlid]+"tl"+tlid).css('width', "100px");

91.    $(".dragaox").draggable({

.        containment:'parent',

.        axis: "x"

.        });

.        }

.        }

.        $('#mashbut').click(function () {

.        if (boolmastab==false) {

99.    for (var j = 1; j < ((counttimelines)+2); j++) {

100.  var c=count[j]+1;

101.  for (var i = 1; i < c ; i++) {

.        var vide= document.getElementById("v"+i+"tl"+j);

103.  var width = vide.duration;

104.  $('#bolck'+i+"tl"+j).css('width', width);

105.  }

.        }

.        boolmastab=true;

.        }else{

109.  for (var j = 1; j < ((counttimelines)+2); j++) {

110.  var c=count[j]+1;

111.  for (var i = 1; i < c; i++) {

.        $('#bolck'+i+"tl"+j).css('width', '80px');

113.  }

.        }

.        boolmastab=false;

.        }

.        });

.        function opensmoleditwin(elem){

119.  var idtonumtl=parseInt(($(elem).attr('id')).charAt(2));

.        var idtonumel=parseInt(($(elem).attr('id')).charAt(3));

.        var src = $("#v"+idtonumel+"tl"+idtonumtl).attr('src');

122.  $('#smoleditwin').toggle();

123.  $('#videofocat').attr('src', src);

124.  }

.        function closesmoleditwin(){

126.  document.getElementById('smoleditwin').style.display='none';

127.  }

.        function delroll(elem){

129.  var idtonumtl=parseInt(($(elem).attr('id')).charAt(2));

.        var idtonumel=parseInt(($(elem).attr('id')).charAt(3));

.        $("#bolck"+idtonumel+"tl"+idtonumtl).remove();

.        document.getElementById('smoleditwin').style.display='none';

133.  }

.        function deltreack(elem){

135.  var idtonum=parseInt(($(elem).attr('id')).charAt(1));

136.  console.log(idtonum);

.        $("#tl"+idtonum).remove();

138.  $("#contaner"+idtonum).remove();

.        startnumoftl++;

.        }

.        function playtreack() {

.        curentreac=0;

.        setvideosrc();

.        leftallprev=0;

.        }

146. 

.        function chengevid(event) { °

.        leftallprev=leftallprev+event.duration;

149.  curentreac++;

.        setvideosrc();

.        }

.        function setvideosrc(){

153.  for (var i = 1; i < (count[1]+1); i++) {

.        var index = parseInt($("#bolck"+i+"tl"+"1").index(".ui-state-default"), 10);

155.  console.log(index+"--"+curentreac);

.        if (index==((curentreac)+2)) {

157.  var src = $("#v"+i+"tl"+"1").attr('src');

158.  console.log("bigvid"+src);

159.  $('#videoPlayer').attr('src', src);

160.  $('#videoPlayer')[0].play();

.        }

.        }

.        }

.        function pausetreack() {

.        $('#videoPlayer')[0].pause();

166.  for (var i = 2; i <((counttimelines)+1); i++) {

167.  $("#videowindow"+i)[0].pause();

.        }

.        }

.        function addvideotaimline() {

.        count[count.length]=0;

173.  var newLi = document.createElement('div');

174.  newLi.className='timeline';

.        newLi.id="tl"+counttimelines;

.        $('.timelines').append(newLi);

.       

178.  newLi.innerHTML = "<div>

.        "<button type='button'>

.        "<span>

.        "</div><ul id='v"+counttimelines+"' ondrop='drop(event,this)'>

.        "<button type='button' id='d"+counttimelines+"'>

.        "<span>

.        var newcon = document.createElement('div');

185.  $('#videocolum').append(newcon);

.        newcon.id="contaner"+counttimelines;

187.  newcon.className = "vcon ui-widget-content";

.        var newwin = document.createElement('video');

.        $('#contaner'+counttimelines).append(newwin);

190.  newwin.id="videowindow"+counttimelines;

.        newwin.className = "classvideowindow";

192.  $("#contaner"+counttimelines).draggable({

.        containment:'parent'

.        });

.        $( "#contaner"+counttimelines).resizable({

.        aspectRatio: 16 / 9

.        });

198.  }

.        $('.delitrek').click(function(){

200.  var index = parseInt($(this).index(".delitrek"), 10);

201.  console.log(index);

.        });

.        function runnerupdate(event){

204.  var leftpos=53+leftallprev+event.currentTime;

.        $('#runner').css('left', leftpos+'px');

.        for (var j = startnumoftl; j < ((counttimelines)+1); j++) {

207.  var c=count[j]+1;

208.  for (var i = 1; i < c ; i++) {

.        var posinparel=parseInt($('#bolck'+i+"tl"+j).position().left, 10);

.        var runnerposleft=parseInt($('#runner').position().left, 10);

211.  if (posinparel==runnerposleft) {

.        console.log(posinparel);

.        console.log(runnerposleft);

214.  var src = $("#v"+i+"tl"+j).attr('src');

.        $('#videowindow'+counttimelines).attr('src', src);

216.  $('#videowindow'+counttimelines)[0].play();

.        }

.        }

219.  }

.        }

.        //EXPORT

.        function exporteditdata(event){

.        var editlist="";

224.  for (var j = 1; j < ((counttimelines)+2); j++) {

225.  var c=count[j]+1;

226.  for (var i = 2; i < c ; i++) {

.        editlist = editlist+" -i "+$("#v"+i+"tl"+j).attr('src');

228.  }

.        }

230.  var socket = io.connect('http://localhost:3000');

.        socket.on('news', function (data) {

232.  socket.emit('editdata', editlist);

.        });

.        }

.        function saveproj(){

236.  var socket = io.connect('http://localhost:3000');

237.  var page=$("#editorbody").html();

.        var jsonpage=$.toJSON(page);

.        console.log("save");

240.  socket.on('savereq', function (data) {

241.  socket.emit('saveproj', page);

.        });

.        }

.        (function($) {

.        $(function() {

246.  $('ul.tabs__caption').on('click', 'li:not(.active)', function() {

247.  $(this)

248.  .addClass('active').siblings().removeClass('active')

. .closest('div.tabs').find('div.tabs__content').removeClass('active').eq($(this).index()).addClass('active');

250.  });

.        });

.        })(jQuery);

.        function addaudiotaimline() {

.        count[count.length]=0;

255.  counttimelines++;

256.  var newLi = document.createElement('div');

257.  newLi.className='timeline';

.        newLi.id="tl"+counttimelines;

.        $('.timelines').append(newLi);

260.  newLi.innerHTML = "<div>

.        "<button type='button'>

.        "<span>

.        "</div><ul id='a"+counttimelines+"' ondrop='drop(event,this)'>

.        "<button type='button' id='d"+counttimelines+"'>

.        "<span>

266.  }

.       

.        function addimgtaimline() {

.        count[count.length]=0;

270.  counttimelines++;

271.  var newLi = document.createElement('div');

272.  newLi.className='timeline';

.        newLi.id="tl"+counttimelines;

274.  $('.timelines').append(newLi);

275.  newLi.innerHTML = "<div>

.        "<button type='button'>

.        "<span>

.        "</div><ul id='i"+counttimelines+"' ondrop='drop(event,this)'>

.        "<button type='button' id='d"+counttimelines+"'>

.        "<span>

.        var newcon = document.createElement('div');

282.  $('#videocolum').append(newcon);

.        newcon.id="contaner"+counttimelines;

284.  newcon.className = "icon ui-widget-content";

.        var newwin = document.createElement('img');

.        $('#contaner'+counttimelines).append(newwin);

287.  newwin.id="imgwindow"+counttimelines;

.        newwin.className = "classimgwindow";

.        $("#contaner"+counttimelines).draggable({

.        containment:'parent'

.        });

.        $( "#contaner"+counttimelines).resizable({});

.        }

.        function cattreack(){

295.  var vid = document.getElementById("videofocat");

296.  var duration = vid.duration;

297.  var startime=(duration/500)*($("#slider-range").slider("values", 0));

.        var endtime=(duration/500)*($("#slider-range").slider("values", 1));

299.  }

.       

.       

.        $(function() {

303.  var vid = document.getElementById("videofocat");

304.  var vidrat = vid.duration;

.        var befomuvmax;

306.  var befomuvmin;

.        $( "#slider-range" ).slider({

308.  range: true,

.        min: 0,

.        max: 500,

.        values: [ 0, 500 ],

312.  grid: true,

.        slide: function( event, ui ) {

314.  $( "#amount" ).val(ui.values[ 0 ]+"--"+ui.values[ 1 ]);

315.  if (befomuvmax==ui.values[ 1 ]) {

316.  vid.currentTime=(ui.values[ 0 ])*(vid.duration/500);

317.  }

318.  if (befomuvmin==ui.values[ 0 ]) {

319.  vid.currentTime=(ui.values[ 1 ])*(vid.duration/500);

320.  }

.        },

.        stop: function(event, ui) {

.        befomuvmax=ui.values[ 1 ];

.        befomuvmin=ui.values[ 0 ];

.        },

.        });

.        });

.        function addtexttaimline() {

.        count[count.length]=0;

.        counttimelines++;

331.  var newLi = document.createElement('div');

332.  newLi.className='timeline';

.        newLi.id="tl"+counttimelines;

.        $('.timelines').append(newLi);

335.  newLi.innerHTML = "<div>

.        "<button type='button'>

.        "<span>

.        "<ul id='t"+counttimelines+"' ondrop='drop(event,this)'>

.        "<span>

.        "<button type='button' id='d"+counttimelines+"'>

.        "<span>

342.  }

.        function addtext(elem){

344.  var fulid=$(elem).attr('id');

345.  var tlid=fulid.charAt(0);

.        count[tlid]++;

347.  var newLi = document.createElement('li');

348.  newLi.className = "dragaox";

349.  newLi.style="height: 45px; width:100px; margin-top: 1px; background-color: grey; border-radius: 10px; ";

.        newLi.id="bolck"+count[tlid]+"tl"+count[tlid];

351.  $("#t"+tlid).append(newLi);

352.  newLi.innerHTML = "<input type='text' id='"+count[tlid]+count[tlid]+"text'/><br>"+

.        "<button type='button' id='se"+tlid+count[tlid]+"'>

.        "<span>

.        "<button type='button' id='de"+tlid+count[tlid]+"'>

.        "<span>

.        $('#bolck'+count[tlid]+"tl"+tlid).css('width', "100px");

358.  $(".dragaox").draggable({

.        containment:'parent',

.        axis: "x"

361.  });

.        }