МИНИСТЕРСТВО ОБРАЗОВАНИЯ, НАУКИ И МОЛОДЕЖИ РЕСПУБЛИКИ КРЫМ

ГБОУВО РК «КРЫМСКИЙ ИНЖЕНЕРНО-ПЕДАГОГИЧЕСКИЙ УНИВЕРСИТЕТ

ИМЕНИ ФЕВЗИ ЯКУБОВА»

Факультет экономики, менеджмента и информационных технологий

Кафедра прикладной информатики

Направление подготовки 09.03.03 Прикладная информатика

Профиль «Прикладная информатика в информационной сфере»

КУРСОВОЙ ПРОЕКТ
по дисциплине «Программирование и поддержка веб-приложений»

НА ТЕМУ

«Разработка веб-сайта с видеоуроками по vue.js»

Студента IV курса
группы И-1-16
очной формы обучения
Алменова Руслана Рустамовича
__________________________
(подпись)
Руководитель:
преп. Абдулаева Усние
Бахтияровна
___________________________
(подпись)

Симферополь – 2020
 2

СОДЕРЖАНИЕ

ГЛАВА 1. ТЕОРЕТИЧЕСКИЕ АСПЕКТЫ В ОБЛАСТИ СОЗДАНИЯ WEB-

САЙТОВ...................................................................................................................5
1.1 Web-страницы и Web-сайты......................................................................5
1.2 Основные виды сайтов...............................................................................6
1.3. Этапы создания web-сайта........................................................................7
1.4 Основные программные средства для создания web-сайта....................8
Вывод по первой главе..........................................................................................13
ГЛАВА 2. РАЗРАБОТКА ВЕБ-САЙТА С ВИДЕОУРОКАМИ ПО VUE.JS...15
2.1 Структура сайта.........................................................................................15
2.2 Описание интерфейса сайта.....................................................................15
2.3. Разработка проекта..................................................................................17
Выводы по второй главе.......................................................................................33
ЗАКЛЮЧЕНИЕ.....................................................................................................34
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ............................................35
 3

ВВЕДЕНИЕ
Актуальность темы. Internet развивается довольно стремительно.
Быстро растет количество изданий, посвященных Сети, что предвещает
широкое ее распространение даже в далеких от техники областях. Internet
превращается из большой игрушки для интеллектуалов в полноценный
источник разнообразной полезной информации для любой категории
пользователей.
Через десять лет, по прогнозам специалистов, около 50 процентов
семей (безусловно, пока лишь в развитых странах) будут использовать его
ежедневно. Телевидение и радиоприемники не будут заменены
компьютерами, но будут иметь мощный процессор, большую память и
фактически сами станут в некотором отношении компьютерами.
Это будет время, когда любой человек, владеющий компьютером,
сможет "скачать" с его помощью статьи, иллюстрации, видео- или
аудиоинформацию по любой интересующей его теме. Он сможет получить
эту информацию тогда, когда он этого пожелает. Через какое-то время
системы искусственного интеллекта – параллельный машинный перевод, а
 4

также идентификация и распознавание голоса сломают последние

национальные и языковые барьеры и сделают возможным свободный
транснациональный обмен информацией.
Каждый из нас уже сейчас может сделать свой вклад в развитие
Internet. Для этого достаточно создать свой веб-сайт и разместить его в Сети.
Сегодня, путешествуя по Internet, можно найти много очень хорошо
выполненных сайтов, которые быстро загружаются, привлекательны на вид,
имеют четко разграниченную по разделам информацию и удобные функции
навигации. Такие сайты просто приглашают вас посетить их, расслабиться,
задержаться на некоторое время, развлечься и узнать что-то новое.
При создании таких «хороших сайтов» необходимо использовать
фреймворки. Одним из популярнейших является vue.js. В процессе
написания данного курсового проекта будет создан сайт с видеоуроками по
vue.js. Такой сайт будет полезен тем пользователям, которые действительно
хотят многому научиться в программировании. А данная отрасль
информатики сейчас развивается колоссальными темпами, поэтому сайт с
видеоуроками по vue.js будет актуальным еще многие годы.
Целью данного курсового проекта является разработка сайта с
видеоуроками по vue.js.
Объектом исследования курсового проекта является процесс
разработки web-сайта.
Предметом исследования данного курсового проекта является
технология разработки сайта с видеоуроками по vue.js.
Для достижения цели были поставлены следующие задачи:
 рассмотреть характеристики, классификацию веб-сайтов;
 рассмотреть основные средства разработки web-сайта;
 реализовать сайт с видео уроками по vue.js с использованием
актуальных технологий разработки.
Структура курсового проекта. Курсовой проект состоит из введения,
двух глав, выводов к главам, заключения, списка использованных
 5

источников. Общий объем курсового проекта: 37 страниц печатного текста,

основной объем – 34 страницы, на которых представлено 5 рисунков и 2
листинга.

ГЛАВА 1. ТЕОРЕТИЧЕСКИЕ АСПЕКТЫ В ОБЛАСТИ

СОЗДАНИЯ WEB-САЙТОВ
1.1 Web-страницы и Web-сайты
 6

Что такое Web-страница'? Ответить на этот вопрос могут многие. Это

интернет-документ, предназначенный для распространения через Интернет
по средством сервиса WWW. А если уж говорить по-простонародному, это
то, что показывает в своем окне программа-клиент для просмотра Web-
страниц — Web-обозреватель [2].
С технической точки зрения Web-страница — это обычный текстовый
файл, который можно создать в любом текстовом редакторе, том же
Блокноте, стандартно поставляемом в составе Windows. Этот файл содержит
собственно текст Web-страницы и различные команды форматирования этого
самого текста. Команды форматирования называются тегами, а описывает их
особый язык HTML (HyperText Markup Language, язык гипертекстовой
разметки).
Файлы, содержащие Web-страницы, должны иметь расширение htm[l].
Они сохраняются на жестких дисках серверного компьютера. Получив от
Web-обозревателя запрос по протоколу HTTP, Web-сервер (серверная
программа, обеспечивающая работу сервиса WWW) загружает эти файлы и
отправляет Web-обозревателю [3].
Но как Web-обозреватель дает понять Web-серверу, какая Web-
страница ему нужна? Очень просто — он пересылает в составе клиентского
запроса имя и полный путь файла, в котором она сохранена. Скажем, вот так:
http://comp45.buh.department.ru/somepage.html
Этот запрос заставит Web-сервер извлечь и отправить Web-
обозревателю файл somepage.html.
А что такое Web-сайт? Это набор Web-страниц, подчиненных общей
тематике и объединенных в единое целое. Web-сайт также сохраняется на
жестких дисках серверного компьютера. Технических отличий у Web-
страницы и Web-сайта не слишком много.
 7

1.2 Основные виды сайтов

Блог (от английского blog, от web log – Internet-дневник, Internet-
журнал, онлайн-журнал) – веб-сайт, главным содержимым которого
представлены записи (посты), постоянно добавляемые и включающие
мультимедийные компоненты.
Форум (на древнеримском градостроительстве – основная городская
площадь, в которой проводились переговоры, заключались сделки, шла
общественная жизнедеятельность) – образует взаимодействие пользователей,
информация в интернет-форуме структурирована, подразумевается
присутствие единой темы и разных тем для обсуждения. [2]
Wiki-ресурс – справочный источник, заполнение которого исполняется
юзерами. Помимо этого, пользователи могут менять структуру, а также
содержание wiki-ресурсов.
Flash-сайт – интернет-источник, сформированный с применением
платформы Adobe Flash. На веб-сайтах подобного типа могут быть
реализованы необычные методы представления данных.
Доска объявлений – источник, в котором организуется принятие и
размещение объявлений от пользователей.
Визитка – веб-сайт, включающий только нужную информацию о
компании, предпринимателе, сокращенное представление деятельности и
контакты. Порой на веб-сайтах такого типа располагается портфолио работ.
Сервис – веб-сайты, предоставляющие определенную статистику;
разрешающие исследовать конкретные показатели; почтовые и поисковые
сервисы [6].
Портал (с англ. Portal – главный вход) – интернет-сайт,
обеспечивающий пользователю различные интернет-сервисы,
функционирующие в границах этого веб-сайта. Порталы являются большими
веб-сайтами и подразумевают присутствие широкой аудитории.
 8

Интернет-магазин – веб-сайт, продающий продукты онлайн. По сути,

он считается совокупностью программ, позволяющих потребителю удаленно
подобрать продукт из каталога, а еще оформить заказ на него.
Биржа – источник представляет роль посредника между заказчиком и
клиентом. Тема сайта-биржи может являться разнообразной. Образцом
подобного веб-сайта возможно назвать биржу статей ADVEGO.
Простой сайт – веб-сайт, не принадлежащий к перечисленным выше.
К примеру, веб-сайт члена известной музыкальной группы, содержащий
несколько разделов и содержащий, в ключевом, информативную функцию.
[2]
1.3. Этапы создания web-сайта
Несмотря на общепринятое мнение, основное место в ходе дизайна и
разработки интернет-сайтов не всегда занимает стадия написания кода. В
главную очередь приходящие на ум технологии, такие как HTML, CSS, а
также JavaScript, и в самом деле формируют образ сети, к какому мы
привыкли и определяют методы нашего взаимодействия с данными. Что как
правило остается за пределами поля зрения, однако в тот же момент является
едва ли не наиболее значимой составляющей процесса разработки, так это
стадии предварительного сбора данных, кропотливого планирования, а также
поддержки уже после запуска веб-сайта. Можно отметить следующие этапы
в разработке интернет-приложений:
Сбор данных – предварительное изучение и сбор информации
определяет то, как будут проходить все дальнейшие стадии разработки.
Наиболее существенное на этом этапе — получить четкое и полное
представление того, каким будет назначение вашего предстоящего веб-сайта,
каких целей вы желаете достигнуть с его помощью, а кроме того какая
целевая публика, которую вы желаете в него привлечь. [3]
Планирование – На данной стадии разработки заказчик уже может
получить понимание о том, каким будет предстоящий веб-сайт. На основе
данных, собранных на предыдущей стадии, формируется карта сайта. Карта
 9

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

помогает понять, насколько удобным в применении он будет.
Дизайн – на этом этапе веб-сайт становится еще ближе к своей
конечной форме. Весь визуальный контент, такой как рисунки, фото и
видеоматериал, создается именно сейчас. И опять-таки вся информация,
которая была собрана на самой 1 стадии проекта, весьма значима на данном
шаге. Интересы клиента, а также целевая аудитория должны учитываться в
первую очередь во время работы над дизайном. [3]
Создание контента – Процедура создания контента как правило
проходит одновременно с прочими стадиями разработки и его значимость не
стоит недооценивать. На данном шаге следует описать самую суть того, что
вы желаете сообщить до аудитории собственного веб-сайта. [3]
Верстка и разработка – Теперь вы наконец-то можете переключиться
непосредственно к верстке сайта. Все графические компоненты,
разработанные прежде, применяются в данной стадии. Обычно в главную
очередь формируется домашняя страничка, а потом к ней дополняются
остальные странички в соответствии с иерархией, разработанной на стадии
создания карты сайта. [3]
Тестирование и запуск – Тестирование является, наиболее рутинной
составляющей разработки. Каждая ссылка обязана быть проверена, каждая
форма и script обязаны быть протестированы. Текст обязан быть проверен
программой проверки правописания для выявления возможных опечаток и
ошибок. [3]
Поддержка – Немаловажно понимать, то что веб-сайт предполагает из
себя скорее сервис, нежели продукт. Недостаточно попросту «доставить» его
потребителю. Также немаловажно быть уверенным в том, что все
функционирует, как и было задумано, а пользователи удовлетворены
окончательным продуктом. [3]
 10

1.4 Основные программные средства для создания web-сайта

Создание web-сайтов, их поддержка и развитие осуществляется с
помощью специализированного ПО. HTML-документ, можно создавать в
любом текстовом редакторе, например, в "блокноте" (MS NotePAD в составе
Windows). HTML-документ, можно конвертировать из многих программ,
(например, Microsoft Word). После конвертации одна страница текста может
превратиться в огромный HTML-файл размером более 100кб. HTML-
документ, можно создавать с помощью визуальных пакетов (WYSIWYG
-What You See Is What You Get), таких, например, как Microsoft FrontPage.
WYSIWYG-редакторы сами вырабатывают html-код документа, в то время
как разработчик лишь выбирает нужные ему опции из меню. Разработчик
сайта должен использовать разумное сочетание всех методов создания
HTML-документов. При использовании этих методов следует учесть
следующее:
 создание различных эффектов в простом текстовом редакторе -
громоздкая и сложная задача;
 документ, подготовленный с помощью какой-либо программы
проще конвертировать, чем создавать заново;
 текстовые редакторы можно использовать для очистки от
"мусора" HTML-документов, созданных с помощью специализированных
программ;
 при создании эффектов с помощью специальных программ
(например, Microsoft FrontPage) следует предусмотреть поддержку этих
эффектов на web-сервере.
Одним из лидеров в области разработки программного обеспечения для
подготовки web-публикаций является компания Macromedia. Очень
популярны пакеты Macromedia: Dreamweaver, HomeSite (до версии 5 этот
пакет выходил под названием Allaire HomeSite), а также специализированные
пакеты для создания компьютерной графики и анимации [7].
Macromedia Dreamweaver
 11

Macromedia Dreamweaver 8 (в переводе – ткач мечты) – HTML-

редактор, разработанный компанией Macromedia. Богатый инструментарий,
удобный интерфейс, открытость приложения для всевозможных настроек и
другие особенности делают Dreamweawer одним из самых популярных
HTML-редакторов в мире.
Возможности Macromedia Dreamweaver 8 значительно шире, чем
возможности обычных редакторов для создания веб-страниц. Однако вместе
с этим программа благодаря легко настраиваемому и простому
пользовательскому интерфейсу подходит как для профессионалов, так и
начинающих создателей веб-проектов любой сложности.
Основной упор в данном продукте сделан на визуализацию разработки
веб-страницы. Работа проходит в режиме WYSIWYG (What You See Is What
You Get – что видишь, то и получаешь), то есть Dreamweaver объединяет в
себе средство для визуального расположения элементов, управления их
свойствами на уровне языка HTML и средства поддержки Dynamic HTML.
Macromedia Dreamweaver обеспечивает:
 генерацию свободного от ошибок HTML-кода;
 динамическое отображение создаваемой страницы в выбранном
браузере;
 сохранение расположения для ранее созданных документов и
документов, созданных другими средствами;
 средства наглядного дизайна таблиц и фреймов;
 генерацию Dynamic HTML для различных браузеров;
 расширяемую коллекцию скриптовых программ JavaScript;
 поддержку анимации, схожую с инструментами Macromedia
Director.
Кроме этого:
 Macromedia Dreamweaver 8 – это и разработчик дизайна, и
редактор кода в одном инструменте;
 12

 Dreamweaver 8 позволяет с легкостью использовать новые

технологии дизайна и кодирования;
 с помощью Dreamweaver 8 и Flash Video поместить видео на сайт
не составит никакого труда;
 мощная CSS-панель предоставляет возможность произвести
изменения, не набирая код вручную;
 Dreamweaver взаимодействует с XML.
Использование подходящего редактора кода — это отличный способ
обеспечить эффективный и продуктивный процесс разработки. Современные
редакторы не только ускоряют работу. Они также предоставляют широкий
ассортимент инструментов, которые уменьшают количество шагов,
необходимых для выполнения определенных задач. Далее мы рассмотрим
наиболее популярные редакторы для веб-программистов.
Visual Studio Code – редактор исходного кода, разработанный Microsoft
для Windows, Linux и macOS. Позиционируется как «лёгкий» редактор кода
для кроссплатформенной разработки веб- и облачных приложений. Включает
в себя отладчик, инструменты для работы с Git, подсветку синтаксиса,
IntelliSense и средства для рефакторинга. Имеет широкие возможности для
кастомизации: пользовательские темы, сочетания клавиш и файлы
конфигурации. Распространяется бесплатно, разрабатывается как
программное обеспечение с открытым исходным кодом, но готовые сборки
распространяются под проприетарной лицензией. [4]
Atom – бесплатный текстовый редактор с открытым исходным кодом
для Linux, macOS, Windows с поддержкой плагинов, написанных на Node.js,
и встраиваемых под управлением Git. Большинство плагинов имеют статус
свободного программного обеспечения, разрабатываются и поддерживаются
сообществом.
Atom основан на Electron (ранее известный как Atom Shell) –
фреймворке кроссплатформенной разработки с использованием Chromium и
io.js. Редактор написан на CoffeeScript и LESS. Версия 1.0 была выпущена 25
 13

июня 2015 г. [5]

Sublime Text 3 - один из самых распространенных текстовых
редакторов для программистов. Он предоставляет своим пользователям
уникальные возможности, которых нет больше нигде. Одни из самых
главных достоинств - кроссплатформенность и расширяемость.
Некоторые возможности:
 Быстрая навигация (Goto Anything)
 Командная палитра (Command Palette)
 API плагинов на Python
 Одновременное редактирование (Split Editing)
 Высокая степень настраиваемости (Customize Anything)
Sublime Text 3 имеет бесплатную и премиум-версию. Это
кроссплатформенный редактор кода. Он не только легковесный и очень
шустрый в работе, но также и расширяемый. Эту программу можно скачать
совершенно бесплатно на официальном сайте и пользоваться ею сколько
угодно в пробном режиме. Затем вы можете приобрести премиум-версию за
$80.
По умолчанию Sublime Text 3 предоставляет базовое авто дополнение,
подсветку синтаксиса и функционал сворачивания. Но используя Package
Control в Sublime Text, вы можете расширить последний и добавить больше
«примочек»: инструменты отладки, новые теми, поддержку intellisense и т. п.
[5].
Для реализации был выбран текстовый редактор Atom так как он
является бесплатным, а та же имеет легко понимаемый интерфейс.
Sublime Text поддерживает большое количество языков
программирования и имеет возможность подсветки синтаксиса для C, C+
+, C#, CSS, D, Dylan, Erlang, HTML, Groovy, Haskell, Java, JavaScript, LaTeX, 
Lisp, Lua, Markdown, MATLAB, OCaml, Perl, PHP, Python, R, Ruby, SQL, TCL 
и XML.
 14

В дополнение к тем языкам программирования, которые включены по

умолчанию, пользователи имеют возможность загружать плагины для
поддержки других языков.
Sublime Text может быть оснащён менеджером пакетов, который
позволяет пользователю находить, устанавливать, обновлять и удалять
пакеты без перезагрузки программы. Менеджер поддерживает
установленные пакеты в актуальном состоянии, загружая новые версии из
репозиториев. Кроме того, он предоставляет команды для активации и
деактивации установленных пакетов.
Avocode
Avocode – это графический редактор, позволяющий работать с .psd
макетами, не переходя от дизайна к коду. А именно -  верстальщик может
получать код элементов прямо с макета. Кроме того, у него и другие
полезные функции, но обо всем по порядку.
Интерфейс программы лаконичен и приятен. 
Дело в том, что в Photoshop большинство функций для верстальщика просто
не нужны и лишь перегружают интерфейс.
Здесь же только необходимое:
 рука для перетаскивания,
 выделение слоя,
 линейка,
 пипетка,
 нарезка.
Однако работают некоторые из них удобнее чем в Photoshop.
Например, линейкой мы отмеряем не просто расстояние между двумя
точками, а выделяем элемент, и наводя курсором на другие элементы, можем
видеть расстояние до них. А пипетка позволяет задать набор цветов, которые
мы можем копировать. Одна из главных причин любить Avocode – это то, что
при выделении элемента в правой части экрана видим уже готовый CSS-код.
 15

Вывод по первой главе

В первой главе описывается, что такое интернет-каталог, в чем его
преимущества. Описываются основные характеристики интернет-каталогов и
востребованность их в современном мире. Также были рассмотрены языки
веб-программирования, локальные сервера, а также среды разработки. Для
написания курсового проекта «Разработка веб-сайта с уроками по vue.js»
были выбраны следующие языки программирования: PHP, HTML, CSS. В
качестве локального сервера был выбран Open Server и для удобного
написания кода Sublime Text 3.
 16

ГЛАВА 2. РАЗРАБОТКА ВЕБ-САЙТА С ВИДЕОУРОКАМИ ПО VUE.JS

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

В процессе выполнения курсового проекта будет создан несложный
веб-сайт с видеоуроками, главной задачей которого будет обучить
пользователя работать с vue.js. Просмотрев видеоуроки, пользователь узнает
много нового, закрепит то, что уже знал.
2.2 Описание интерфейса сайта
Сразу после того как пользователь зашел на сайт ему будут
предложены дальнейшие варианты развития событий: перед пользователем
сразу предоставляются две страницы это Главная и уроки(Рис.2.1). Кликнув
на любой из вариантов пользователь будет отправлен на соответствующую
страницу для дальнейшего ознакомления.
 17

Рис.2.1. Главные страница сайта

Спустившись вниз по главной странице, пользователь имеет

возможность прослушать первый аудиоурок по vue.js. Это будет введением
пользователя в данную отрасль программирования (рис. 2.2).

Рис.2.2. Аудиоурок «Введение»

Спустившись еще ниже, пользователю будет предоставлена краткая

информация про vue.js., а также ссылка на плеймаркет, куда загружена
мобильная версия сайта (рис. 2.3.).
 18

Рис.2.3. Самоучитель vue.js

И последним элементом на главной странице сайта являются

последние выпущенные аудиоуроки, прослушать которые мы можем прям на
этой же странице (рис. 2.4).

Рис. 2.4 Последние выпуски

Перейдя на вкладку Уроки нам предоставляются как видеоуроки, так и
аудиоуроки к ним. Это очень удобно, так как если нет возможности
просмотреть видео, можно его просто прослушать (рис. 2.5).
 19

Рис. 2.5. Вкладка «Уроки»

2.3. Разработка проекта

Сайт создавался с использованием технологий HTML5, CSS3 и
JavaScript. Структура сайта создавалась с помощью HTML5, все стили были
разработаны на языке каскадных стилей CSS3, за всю логику отвечает язык
программирования JavaScript.
В первую очередь был создан файл index.html, а также был задан
заголовок страницы и были подключены файлы стилей (листинг 2.1).
Листинг 2.1. Файл index.html
<!DOCTYPE html>
<html>
<head>
<title>Главная</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Music template project">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="styles/bootstrap-4.1.2/bootstrap.min.css">
<link href="plugins/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"
type="text/css">
<link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-
2.3.4/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-
2.3.4/owl.theme.default.css">
<link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.3.4/animate.css">
<link rel="stylesheet" type="text/css" href="styles/main_styles.css">
<link rel="stylesheet" type="text/css" href="styles/responsive.css">
</head>
<body>
 20

<div class="super_container">

<!-- Header -->

<header class="header">
<div class="container">
<div class="row">
<div class="col">
<div class="header_content d-flex flex-row align-
items-center justify-content-center">

<!-- Logo -->

<div class="logo">
<a href="#" class="d-flex flex-row
align-items-end justify-content-start">
<span class="logo_bars d-flex
flex-row align-items-end justify-content-
between"><span></span><span></span><span></span><span></span><span></span></span>
<span
class="logo_text">vue.js</span>
</a>
</div>

<!-- Main Navigation -->

<nav class="main_nav">
<ul class="d-flex flex-row align-
items-center justify-content-start">
<li class="active"><a
href="index.html">Главная</a></li>
<li><a
href="lesson.html">Уроки</a></li>

</ul>
</nav>

<!-- User area -->

</div>
</div>
</div>
</div>
</header>

<!-- Menu -->

<div class="menu">
<div class="menu_container">
<div class="menu_background"></div>
<div class="menu_close"><i class="fa fa-times" aria-
hidden="true"></i></div>
 21

<div class="menu_content d-flex flex-column align-items-center

justify-content-start">
<nav class="menu_nav">
<ul class="d-flex flex-column align-items-center
justify-content-start">
<li><a href="index.html">Главная</a></li>
<li><a href="lesson.html">Уроки</a></li>
</ul>
</nav>
</div>
</div>
</div>

<!-- Home -->

<div class="home">

<!-- Home Slider -->

<div class="home_slider_container">
<div class="owl-carousel owl-theme home_slider">

<!-- Slide -->

<div class="slide">
<div class="background_image" style="background-
image:url(images/index.jpg)"></div>
<div class="home_container">
<div class="container">
<div class="row">
<div class="col">
<div
class="home_content">
<div
class="home_title_container text-center">
<div
class="home_title islive text-center"><h1>vue.<span>js</span></h1></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

</div>
 22

</div>
</div>

<!-- Song -->

<div class="song">
<div class="parallax_background parallax-window" data-parallax="scroll"
data-image-src="images/song.jpg" data-speed="0.8"></div>
<div class="container">
<div class="row">
<div class="col">
<div class="song_content">

<!-- Player -->

<div class="single_player_container">
<div class="single_player d-flex flex-
row align-items-center justify-content-start">
<div id="jplayer_1" class="jp-
jplayer"></div>
<div id="jp_container_1"
class="jp-audio" role="application" aria-label="media player">
<div class="jp-gui jp-
interface d-flex flex-lg-row flex-column align-items-start justify-content-start">

<!-- Player
Controls -->
<div
class="player_controls_box d-flex flex-row align-items-start justify-content-start">
<div
class="order-lg-1 order-2">

<div class="jp-controls-holder player_controls ml-auto d-flex flex-row align-items-start

justify-content-start">

<button class="jp-play player_button" tabindex="0"></button>

<button class="jp-stop player_button" tabindex="0"></button>

</div>
</div>
<div
class="song_image ml-lg-auto order-lg-2 order-1"><img src="images/lesson1.jpg"
alt=""></div>
</div>

<!-- Progress
Bar -->
<div
class="player_bars d-flex flex-row align-items-start justify-content-start">
 23

<div
class="player_progress_box">

<div class="jp-current-time" role="timer" aria-label="time">00:00</div>

<div class="song_info">

<div class="jp-artist" aria-label="title">Введение</div>

<div class="jp-title" aria-label="title"></div>

</div>

<div class="jp-progress">

<div class="jp-seek-bar">

<div>

<div class="jp-play-bar"><span></span></div>

</div>

</div>

</div>

<div class="jp-duration ml-auto" role="timer" aria-label="duration">02:33</div>

</div>

<!--
Volume Controls -->
<div
class="jp-volume-controls ml-lg-auto">

<div class="mute_button">

<button class="jp-mute" tabindex="0"></button>

</div>

<div class="d-flex flex-row align-items-center justify-content-start">

<div class="jp-volume-bar">

<div>

<div class="jp-volume-bar-value"></div>

</div>

</div>
 24

</div>
</div>
</div>

</div>
<div class="jp-no-
solution">
<span>Update
Required</span>
To play the
media you will need to either update your browser to a recent version or update your <a
href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>
</div>
</div>
</div>
</div>

</div>
</div>
</div>
</div>
</div>

<!-- App -->

<div class="app">
<div class="container">
<div class="row row-lg-eq-height">

<!-- App Image -->

<div class="col-lg-6 order-lg-1 order-2 app_col">
<div class="app_image">
<img src="images/samo.webp" alt="">
</div>
</div>

<!-- App Content -->

<div class="col-lg-6 order-lg-2 order-1">
<div class="app_content d-flex flex-column align-
items-start justify-content-center">
<div
class="section_title"><h1>Самоучитель Vue.js</h1></div>
<div class="app_text">
<p>JavaScript-фреймворк с
открытым исходным кодом для создания пользовательских интерфейсов. Легко
интегрируется в проекты с использованием других JavaScript-библиотек. Может
функционировать как веб-фреймворк для разработки одностраничных приложений в
реактивном стиле.<br>
 25

Также вы можете скачать

самоучитель фреймворку на Google Play.</p>
</div>
<div class="stores d-flex flex-row align-
items-start justify-content-start flex-wrap">
<div class="store"><a
href="https://play.google.com/store/apps/details?id=com.smartstart.learnvuejs&hl=ru"><img
src="images/googleplay.png" alt=""></a></div>
</div>
</div>
</div>

</div>
</div>
</div>

<!-- Featured -->

<div class="featured">
<div class="container">
<div class="row">
<div class="col">
<div class="section_title text-
center"><h1>Последние выпуски</h1></div>
<div class="featured_list">
<div id="jplayer_2" class="jp-
jplayer"></div>
<div id="jp_container_2" class="jp-audio"
role="application" aria-label="media player">
<div class="jp-type-playlist">
<div class="jp-playlist">
<ul class="d-flex flex-
row align-items-start justify-content-start flex-wrap">
<li></li>
</ul>
</div>
<div class="jp-no-solution">
<span>Update
Required</span>
To play the media you
will need to either update your browser to a recent version or update your <a
href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
 26

<!-- Footer -->

<footer class="footer">
<div class="background_image" style="background-
image:url(images/footer.jpg)"></div>
<div class="footer_content">
<div class="container">
<div class="row">
<div class="col text-center">

<!-- Logo -->

<div class="logo">
<a href="#" class="d-flex flex-row
align-items-end justify-content-start">
<span class="logo_bars d-flex
flex-row align-items-end justify-content-
between"><span></span><span></span><span></span><span></span><span></span></span>
<span
class="logo_text">almenov</span>
</a>
</div>

</div>
</div>
</div>
</div>

</footer>
</div>

<script src="js/jquery-3.3.1.min.js"></script>
<script src="styles/bootstrap-4.1.2/popper.js"></script>
<script src="styles/bootstrap-4.1.2/bootstrap.min.js"></script>
<script src="plugins/greensock/TweenMax.min.js"></script>
<script src="plugins/greensock/TimelineMax.min.js"></script>
<script src="plugins/scrollmagic/ScrollMagic.min.js"></script>
<script src="plugins/greensock/animation.gsap.min.js"></script>
<script src="plugins/greensock/ScrollToPlugin.min.js"></script>
<script src="plugins/OwlCarousel2-2.3.4/owl.carousel.js"></script>
<script src="plugins/jPlayer/jquery.jplayer.min.js"></script>
<script src="plugins/jPlayer/jplayer.playlist.min.js"></script>
<script src="plugins/easing/easing.js"></script>
<script src="plugins/progressbar/progressbar.min.js"></script>
<script src="plugins/parallax-js-master/parallax.min.js"></script>
<script src="plugins/scrollTo/jquery.scrollTo.min.js"></script>
<script src="js/custom.js"></script>
</body>
 27

</html>

С помощью данного листинга, мы создали главную страницу сайта,

куда поместили:
 описание vue.js;
 ссылку для скачивания мобильной версии;
 последние выпущенные аудиоуроки.
Далее для того, чтобы создать вкладку «Уроки» был создан такой
листинг (листинг 2.2).
Листинг 2.2. Фрагмент файла lessons.html
<!DOCTYPE html>
<html>
<head>
<title>Уроки</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Music template project">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="styles/bootstrap-4.1.2/bootstrap.min.css">
<link href="plugins/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"
type="text/css">
<link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.3.4/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-
2.3.4/owl.theme.default.css">
<link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.3.4/animate.css">
<link rel="stylesheet" type="text/css" href="styles/artists.css">
<link rel="stylesheet" type="text/css" href="styles/artists_responsive.css">
</head>
<body>

<div class="super_container">

<!-- Header -->

<header class="header">
<div class="container">
<div class="row">
<div class="col">
<div class="header_content d-flex flex-row align-items-
center justify-content-center">

<!-- Logo -->

<div class="logo">
<a href="#" class="d-flex flex-row align-
items-end justify-content-start">
 28

<span class="logo_bars d-flex flex-

row align-items-end justify-content-
between"><span></span><span></span><span></span><span></span><span></span></span>
<span
class="logo_text">vue.js</span>
</a>
</div>

<!-- Main Navigation -->

<nav class="main_nav">
<ul class="d-flex flex-row align-items-center
justify-content-start">
<li><a
href="index.html">Главная</a></li>
<li class="active"><a
href="lesson.html">Уроки</a></li>

</ul>
</nav>

<!-- User area -->

</div>
</div>
</div>
</div>
</header>

<!-- Menu -->

<div class="menu">
<div class="menu_container">
<div class="menu_background"></div>
<div class="menu_close"><i class="fa fa-times" aria-
hidden="true"></i></div>
<div class="menu_content d-flex flex-column align-items-center justify-
content-start">
<nav class="menu_nav">
<ul class="d-flex flex-column align-items-center justify-
content-start">
<li><a href="index.html">Главная</a></li>
<li><a href="lesson.html">Уроки</a></li>
</ul>
</nav>
</div>
</div>
</div>

<!-- Home -->

<div class="home">
 29

<div class="parallax_background parallax-window" data-parallax="scroll" data-

image-src="images/artists.jpg" data-speed="0.8"></div>
<div class="home_container">
<div class="container">
<div class="row">
<div class="col">
<div class="home_content text-center">
<div class="home_title">Уроки</div>
</div>
</div>
</div>
</div>
</div>
</div>

<!-- Search -->

<!-- Artists -->

<div class="artists">

<div class="artists_container">
<div class="container">
<div class="row">
<div class="col">

<!-- Artist -->

<div class="artist">
<div class="row">

<!-- Artist Image -->

<div class="col-lg-6">
<iframe width="400"
height="300" src="https://www.youtube.com/embed/qHBSc_LuHnU" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>

<!-- Artist Content -->

<div class="col-lg-6 artist_col">
<div class="artist_content">
<div
class="artist_info">
<div
class="artist_name"><h1><a href="artist.html">Урок 1. Введение</a></h1></div>
<div
class="artist_text">

</div>
</div>
 30

<!-- Player -->

<div
class="single_player_container">
<div
class="single_player">
<div
class="jp-jplayer jplayer" data-title="WebForMySelf" data-artist="Bensound" data-
ancestor=".jp_container_1" data-url="files/lesson1.mp3"></div>
<div
class="jp-audio jp_container_1" role="application" aria-label="media player">

<div class="jp-gui jp-interface single_player_inner d-flex flex-row align-items-center

justify-content-start">

<!-- Player Controls -->

<div class="player_controls_box">

<div class="jp-controls-holder player_controls d-flex flex-row align-items-start

justify-content-start">

<button class="jp-play player_button" tabindex="0"></button>

<button class="jp-stop player_button" tabindex="0"></button>

</div>

</div>

<!-- Progress Bar -->

<div class="player_bars d-flex flex-row align-items-start justify-content-start">

<div class="player_progress_box">

<div class="jp-current-time" role="timer" aria-label="time">00:00</div>

<div class="song_info">

<div class="jp-title" aria-label="title"></div>

</div>

<div class="jp-progress">

<div class="jp-seek-bar">

<div>

<div class="jp-play-bar"><span></span></div>
 31

</div>

</div>

</div>

<div class="jp-duration ml-auto" role="timer" aria-

label="duration">00:00</div>

</div>

<!-- Volume Controls -->

<div class="jp-volume-controls ml-auto">

<div class="mute_button">

<button class="jp-mute" tabindex="0"></button>

</div>

<div class="d-flex flex-row align-items-center justify-content-start">

<div class="jp-volume-bar">

<div>

<div class="jp-volume-bar-value"></div>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="jp-no-solution">

<span>Update Required</span>

To play the media you will need to either update your browser to a recent version or
update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>

</div>
 32

</div>
</div>
</div>
</div>
</div>

</div>
</div>

<!-- Artist -->

<div class="artist">
<div class="row">

<!-- Artist Image -->

<div class="col-lg-6">
<iframe width="400"
height="300" src="https://www.youtube.com/embed/gcFgeyB6SQc" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>

<!-- Artist Content -->

<div class="col-lg-6 artist_col">
<div class="artist_content">
<div
class="artist_info">
<div
class="artist_name"><h1><a href="artist.html">Урок 2. Создание макета</a></h1></div>
<div
class="artist_text">

</div>

</div>

<!-- Player -->

<div
class="single_player_container">
<div
class="single_player">
<div
class="jp-jplayer jplayer" data-title="WebForMySelf" data-artist="Bensound" data-
ancestor=".jp_container_2" data-url="files/lesson2.mp3"></div>
<div
class="jp-audio jp_container_2" role="application" aria-label="media player">

<div class="jp-gui jp-interface single_player_inner d-flex flex-row align-items-center

justify-content-start">

<!-- Player Controls -->

 33

<div class="player_controls_box">

<div class="jp-controls-holder player_controls d-flex flex-row align-items-start

justify-content-start">

<button class="jp-play player_button" tabindex="0"></button>

<button class="jp-stop player_button" tabindex="0"></button>

</div>

</div>

<!-- Progress Bar -->

<div class="player_bars d-flex flex-row align-items-start justify-content-start">

<div class="player_progress_box">

<div class="jp-current-time" role="timer" aria-label="time">00:00</div>

<div class="song_info">

<div class="jp-title" aria-label="title"></div>

</div>

<div class="jp-progress">

<div class="jp-seek-bar">

<div>

<div class="jp-play-bar"><span></span></div>

</div>

</div>

</div>

<div class="jp-duration ml-auto" role="timer" aria-

label="duration">00:00</div>

</div>

<!-- Volume Controls -->

<div class="jp-volume-controls ml-auto">

 34

<div class="mute_button">

<button class="jp-mute" tabindex="0"></button>

</div>

<div class="d-flex flex-row align-items-center justify-content-start">

<div class="jp-volume-bar">

<div>

<div class="jp-volume-bar-value"></div>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="jp-no-solution">

<span>Update Required</span>

To play the media you will need to either update your browser to a recent version or
update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>

</div>
</div>
</div>
</div>
</div>

</div>

</div>
</div>
 35

Итак, после проделанной работы был создан веб-сайт с видеоурокми по

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

ЗАКЛЮЧЕНИЕ

В ходе выполнения курсового проекта была разработан веб-сайт с

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

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

CSS3 и язык программирования JavaScript, в связи с тем, что данный набор
инструментов является наиболее используемой и популярной для разработки
WEB сайтов. Было выполнено подробное описание WEB продукта, а также
были описаны особенности использования веб-сайтом. В заключении первой
главы были описаны основные технологии, используемые в разработке
данного сайта.
На втором этапе исполнения плана было представлено использования
ресурсы исследования, выполнены главные методы логики Интернет-ресурса
с детальным представление листингов программный код, изобретен
доступный также практичный обще пользовательский сокет интернет-плана,
что был разобран согласно фрагментам, также понятием ко любому блоку,
что отражается пользователю, html-разметка с представление исполнения
также взаимодействием со JavaScript кодом. При выполнении проекта были
проанализированы понятия и основы проектирования веб сайта; разработаны
основные функции веб-сайта с видеоуроками по vue.js.

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

1. Олищук, А.В. Разработка Web-приложений на PHP 5.

Профессиональная работа. — М.: Вильямс, 2006. — 352 с.
2. Берд, Дж. Веб-дизайн. Руководство разработчика – 2-е изд. — П.:
Питер, 2012. — 224 с.
3. Лабберс, П. HTML5 для профессионалов: мощные инструменты
для разработки современных веб-приложений / Б. Олберс, Ф. Салим. — М.:
Вильямс, 2011. — 272 с
 37

4. Котеров, Д.В. Самоучитель PHP / А. Костарев. — СПб.: БХВ-

Петербург, 2005. — 1120 с.
5. Зервас, К. Web 2.0: создание приложений на PHP. — М.:
«Вильямс», 2009. — 544 с.
6. Кузнецов, М.В. Объектно-ориентированное программирование
на PHP / И.В. Симдянов. — СПб.: БХВ-Петербург, 2007. — 608 с.
7. Маклафлин, Б. Изучаем Ajax. — СПб.: Питер, 2007 – 448 с.
8. Крейн, Д. AJAX в действии: технология — Asynchronous
JavaScript and XML / Э. Паскарелло, Д. Даррен. — М.: Вильямс, 2006. — 640
с.
9. Браун, И. Веб-разработка с применением Node и Express.
Полноценное использование стека. — Санкт-Петербург: Питер, 2017. — 336
с
10. Фримен, А. jQuery для профессионалов. — М.: Вильямс, 2012. —
960 с.
11. Чедвик, Д. ASP.NET MVC 4: разработка реальных веб-
приложений с помощью ASP.NET MVC. — М.: Вильямс, 2013. — 432 с.
12. Эспозито, Д. Разработка современных веб-приложений: анализ
предметных областей и технологий. — М.: Вильямс, 2016. — 646 с.
13. Уэнц, К. PHP и MySQL. Карманный справочник. — М.: Вильямс,
2015. — 232 с.
14. Никхил, А. Веб-программирование для чайников. — М.:
Вильямс, 2019. — 304 с.
15. Кошик, А. Веб-аналитика 2.0 на практике. Тонкости и лучшие
методики. — М.: Диалектика, 2019. — 528 с.
16. Вейтман, В. Программирование для Web. — М.: Диалектика,
2001. — 288 с.
38
39