BMSTU/03-mmt-lab-02-report.tex

303 lines
17 KiB
TeX
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

\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}