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

Тип:
Добавлен:

Оглавление

Введение

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

.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 StudioCorel VideoStudioAdobe PremiereSony Vegas MovieПакетный захват-+-+Дорожки7119999Переходы и эффекты266312204211Стабилизация изображения++-+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.

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

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

В результате проведенного сравнения можно сделать вывод, что современные 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), содержащая:

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

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

кнопка пауза;

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

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

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

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

Copyright © 2018 WorldReferat.ru All rights reserved.