\documentclass[a4paper]{article}

\input{../common-preamble}
\input{../bmstu-preamble}
\input{../fancy-listings-preamble}

\numerationTop

\begin{document}
\fontsize{14pt}{14pt}\selectfont % Вполне очевидно, что мы хотим 14й шрифт, все его хотят
\thispagestyle{empty}
\makeBMSTUHeader

\makeReportTitle{лабораторной}{2}{Мультимедийная веб-презентация}{Мультимедиа технологии}{}{Д.А. Видьманов}
\newpage
\pagestyle{fancy}
\sloppy
\section{Цель}
Целью работы является приобретение навыков создания мультимедийной веб-презентации, ознакомление с основными правилами и требованиями к созданию веб-презентаций. Создать мультимедийную веб-презентацию в соответствии с изученными требованиями по заданной теме.

\section{Задачи}

\begin{enumerate}
\item Установить node.js;
\item Создать мультимедиа веб-презентацию, используя инструкции и рекомендации методического указания;  
\item Проверить ещё раз все требовании к презентации и создать отчет.
\end{enumerate}

\section{Методика и порядок выполнения}
Технология создания мультимедийной веб-презентации к состоит из трёх этапов: 
\textbf{Первый этап.} Планирование презентации. Планирование включает: 
\begin{enumerate}
\item подготовку инструментария;
\item определение цели;
\item определение задач презентации;
\item подбор необходимой информации;
\item планирование выступления и определение необходимого времени;
\item формирование структуры презентации;
\item проверку логики подачи материала;
\item подготовку заключения. 
\end{enumerate}

\textbf{Второй этап.} Разработка презентации. Разработка презентации включает: 
\begin{enumerate}
\item поиск соответствия методологических требований подготовки слайдов с проектируемыми слайдами презентации;
\item обеспечение вертикальной и горизонтальной логики содержания;
\item разработку дизайна;
\item Выбор оптимального соотношения текста и графической информации. 
\end{enumerate}

\textbf{Третий этап.} Отладка и проверка презентации.

\section{Выполнение работы}
\subsection{Создание основной презентации}
В редакторе файлов гипертекстовой разметки создадим презентацию по теме «Мультимедиа технологии в корпоративных информационных системах», подберем оформление слайдов в соответствии с темой презентации. Первым слайдом презентации должен быть титульный слайд, на который выносятся тема и имя автора. В случае, если авторов несколько, имя докладчика подчеркивается. Слайд с содержанием представлен на рис. \hrf{pic:title}.

\begin{figure}[H]
  \centering
  \includegraphics[width=12cm]{03-mmt-lab-02-title.png}
  \caption{Титульный слайд}
  \label{pic:title}
\end{figure}

На втором слайде приводится краткий план презентации (рис. \hrf{pic:toc}).
\begin{figure}[H]
  \centering
  \includegraphics[width=12cm]{03-mmt-lab-02-toc.png}
  \caption{Содержание презентации}
  \label{pic:toc}
\end{figure}

\subsection{Использование мультимедиа}
Подбор материала для слайда необходимо вести таким образом, чтобы не перегружать его: один слайд, как правило, не должен оставаться на экране дольше одной минуты. Также не следует стремиться к слишком частой смене слайдов (рис. \hrf{pic:pic}).
\begin{figure}[H]
  \centering
  \includegraphics[width=12cm]{03-mmt-lab-02-pic.png}
  \caption{Изображения в презентации}
  \label{pic:pic}
\end{figure}

Использование эффектов анимации (звука, видео) должно быть направлено исключительно на акцентирование внимания зрителя на каких-либо моментах доклада (например, рис. \hrf{pic:vid}).
\begin{figure}[H]
  \centering
  \includegraphics[width=12cm]{03-mmt-lab-02-vid.png}
  \caption{Видео в презентации}
  \label{pic:vid}
\end{figure}

\section{Запуск веб-презентации}
Фреймворк для создания веб-презентаций Shower работает с использованием технологии node.js, поэтому каждая презентация выглядит как отдельное веб-приложение, запускаемое на сервере или локальном компьютере, и предоставляющее endpoint по адресу \code{http://localhost:8080}

\begin{figure}[H]
  \centering
  \includegraphics[width=80mm]{03-mmt-lab-02-launch.png}
  \caption{Запуск приложения}
  \label{pic:vid}
\end{figure}

\section{Контрольные вопросы}
\begin{enumerate}
\item \textbf{Для чего использовался npm? Что это такое и какие команды вы знаете?} Для запуска интерактивности веб-страницы с презентацией. npm - это пакетный менеджер и проектов для node.js.
\item \textbf{Что такое git? Кратко объясните его суть?} Это система контроля версий. Его суть в распределении хранения исходных кодов проекта.
\item \textbf{Для чего в проекте нужен git?} Для версионирования исходной презентации.
\item \textbf{В чём преимущество веб-презентации в сравнении с простой презентацией Powerpoint?} В отсутствии необходимости использовать локальный инструмент и возможности распределения работы над презентацией среди множества исполнителей.
\item \textbf{Какие есть недостатки веб-презентаций?} Необходимость устанавливать дополнительное нестандартное программное обеспечение и изучать язык разметки.
\item \textbf{Какие трудности возникают в процессе разработки веб-презентаций?} Не обнаружено.
\end{enumerate}

\section{Выводы}
В ходе выполнения лабораторной работы были приобретены навыки создания мультимедийной веб-презентации, произошло ознакомление с основными правилами и требованиями к созданию веб-презентаций а также инструментарием по созданию веб-презентаций Shower. Была создана мультимедийная презентацию в соответствии с изученными требованиями по заданной теме.

\newpage
\appendix
\setcounter{secnumdepth}{0}
\section*{Приложения}
\addcontentsline{toc}{section}{Приложения}
\renewcommand{\thesubsection}{\Asbuk{subsection}}

\subsection{Полный листинг разметки презентации}
\begin{lstlisting}[language=HTML,style=CCodeStyle]
<!DOCTYPE html>
<html lang="en">
<head>
    <title>МТвКИС</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <link rel="stylesheet" href="node_modules/@shower/ribbon/styles/styles.css">
    <style>
        .shower {
            --slide-ratio: calc(16 / 9);
        }
    </style>
</head>
<body class="shower list">

    <header class="caption">
        <h1>Мультимедиа технологии в корпоративных информационных системах</h1>
        <p>[ИУ3-31М] И.И.Овчинников</p>
    </header>

    <section class="slide" id="cover">
        <h2>Мультимедиа технологии в корпоративных информационных системах</h2>
        <p>[ИУ3-31М] И.И.Овчинников</p>
        <figure>
            <img class="cover" src="pictures/bg.jpg" alt="Background">
            <figcaption class="copyright right white">
                <a href="https://fiftyfootshadows.net">© John Carey</a>
            </figcaption>
        </figure>
        <style>
            #cover h2 {
                margin: 30px 0 0;
                color: white;
                text-align: center;
                font-size: 70px;
            }

            #cover p {
                margin: 10px 0 0;
                text-align: center;
                color: white;
                font-style: italic;
                font-size: 20px;
            }

            #cover p a {
                color: white;
            }
        </style>
    </section>
	
	<section class="slide">
        <h2>В ближайшие 15 минут</h2>
		<ul>
			<li>Что такое мультимедиа и корпоративная система?</li>
			<li>Что можно хранить, как можно использовать и как это передавать?</li>
			<li>Рынок и развитие.</li>
			<li>Гипотезы и будущее.</li>
		</ul>
    </section>


	<section class="slide">
        <h2>Мультимедиа</h2>
        <figure>
            <blockquote>
                <p> Мультимедиа (англ. multimedia) — данные, или содержание, которые представляются одновременно в разных формах: звук, анимированная компьютерная графика, видеоряд.</p>
            </blockquote>
        </figure>
    </section>

	<section class="slide">
        <h2>Корпоративная Информационная Система</h2>
        <figure>
            <blockquote>
                <p>Корпоративная Информационная Система — это автоматизированная система, предназначенная для комплексной автоматизации всех видов хозяйственной деятельности компаний, а также корпораций, требующих единого управления EMS, CMS, LMS, CRM, PLM, etc... </p>
            </blockquote>
        </figure>
    </section>

	<section class="slide">
        <h2>Системы ведения электронных архивов EDMS (Electronic Document Management System)</h2>
        <figure>
                <img src="pictures/notion.png" class="place bottom" height="50%" alt="EDMS example" />
        </figure>
    </section>

	<section class="slide">
        <h2>Передача мультимедийных данных</h2>
        <figure>
                <img src="pictures/transport.png" class="place bottom" height="70%" alt="EDMS example" />
        </figure>
    </section>
	
	<section class="slide">
        <h2>Системы видео-конференцсвязи</h2>
		<ul>
			<li>В работе компаний, которые имеют разветвленную сеть филиалов - в собрании могут принимать участие сотрудники из других городов;</li>
			<li>Для проведения переговоров с клиентами из разных стран;</li>
			<li>В дистанционном обучении;</li>
			<li>В телемедицине;</li>
			<li>В СМИ для передачи информации с места событий и др.</li>
		</ul>
    </section>

	<section class="slide">
        <h2>Примеры приложений для ВКС</h2>
		<ul>
			<li><b>TrueConf</b> – используется для государственных и частных организаций;</li>
			<li><b>Zoom</b> – публичный сервис для видеосвязи корпоративная платформа, совмещающая в себе чат и Microsoft Teams;</li>
			<li><b>Microsoft Teams</b> видеозвонки. Microsoft Teams является частью пакета Office 365 и распространяется по корпоративной подписке.</li>
		</ul>
    </section>

	<section class="slide">
        <h2>Интерактивные и мультимедийные системы обучения</h2>
        <figure>
                <img src="pictures/learn-dynamics.png" class="place bottom" height="65%" alt="EDMS example" />
        </figure>
    </section>

    <section class="slide">
        <h2>Величина рынка развития мультимедиа в корпоративном секторе</h2>
        <figure>
            <blockquote>
                <p>В ближайшие три года мы ожидаем взрывной рост объёма российского рынка ПО для бизнес-коммуникаций. Таким образом, общий объём рынка может достичь 100 млрд рублей</p>
            </blockquote>
            <figcaption>Генеральный директор tada.team Андрей Демин, в интерьвью журналу Forbes</figcaption>
        </figure>
    </section>

	<section class="slide">
        <h2>Применение AR/VR в КИС и медицине</h2>
        <figure>
                <img src="pictures/beat.gif" class="place bottom left" height="45%" alt="EDMS example" />
                <img src="pictures/draw.gif" class="place center" height="45%" alt="EDMS example" />
                <img src="pictures/heart.gif" class="place bottom right" height="45%" alt="EDMS example" />
        </figure>
    </section>

	<section class="slide">
        <h2>Применение систем для контроля логистики</h2>
        <figure>
                <img src="pictures/logistic.png" class="place bottom" height="65%" alt="EDMS example" />
        </figure>
    </section>

	<section class="slide">
        <h2>Интеграция КИС и интернета вещей</h2>
        <figure>
                <img src="pictures/iot.png" class="place bottom" height="65%" alt="EDMS example" />
        </figure>
    </section>

	<section class="slide">
        <h2>Выводы</h2>
		<ul>
			<li>Мультимедиа охватывают все области интеллектуальной деятельности: науку, технику, образование, бизнес, культуру</li>
            <li>Корпоративные системы это не только про бизнес, но и про некоммерческие организации</li>
            <li>Интеграция в жизнь людей усиливается, повсеместное использование.</li>
		</ul>
    </section>

	<section class="slide">
        <h2>Спасибо за внимание</h2>
        <figure>
            <img src="pictures/ty.png" class="place right" height="65%" alt="EDMS example" />
        </figure>
    </section>

    <footer class="badge">
        <a href="https://t.me/ivanigorevichfeed">Follow me on Telegram</a>
    </footer>

    <div class="progress"></div>

    <script src="node_modules/@shower/core/dist/shower.js"></script>
    <!-- https://docs.google.com/presentation/d/1sJmLJiJjnHjDl-TRpNyYnCTvn5zUDgE2x3ndvHampR0/edit?usp=sharing -->

</body>
</html>
\end{lstlisting}
\end{document}