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

303 lines
17 KiB
TeX
Raw Normal View History

\documentclass[a4paper]{article}
\input{../common-preamble}
\input{../bmstu-preamble}
\input{../fancy-listings-preamble}
\numerationTop
\begin{document}
\fontsize{14pt}{14pt}\selectfont % Вполне очевидно, что мы хотим 14й шрифт, все его хотят
\thispagestyle{empty}
\makeBMSTUHeader
2022-12-13 12:08:18 +03:00
\makeReportTitle{лабораторной}{2}{Мультимедийная веб-презентация}{Мультимедиа технологии}{}{Д.А. Видьманов}
\newpage
\pagestyle{fancy}
\sloppy
\section{Цель}
2022-12-13 12:08:18 +03:00
Целью работы является приобретение навыков создания мультимедийной веб-презентации, ознакомление с основными правилами и требованиями к созданию веб-презентаций. Создать мультимедийную веб-презентацию в соответствии с изученными требованиями по заданной теме.
\section{Задачи}
2022-12-19 14:11:07 +03:00
\begin{enumerate}
2022-12-19 14:11:07 +03:00
\item Установить node.js;
2022-12-13 12:08:18 +03:00
\item Создать мультимедиа веб-презентацию, используя инструкции и рекомендации методического указания;
\item Проверить ещё раз все требовании к презентации и создать отчет.
\end{enumerate}
2022-12-13 12:08:18 +03:00
\section{Методика и порядок выполнения}
Технология создания мультимедийной веб-презентации к состоит из трёх этапов:
\textbf{Первый этап.} Планирование презентации. Планирование включает:
\begin{enumerate}
\item подготовку инструментария;
\item определение цели;
\item определение задач презентации;
\item подбор необходимой информации;
\item планирование выступления и определение необходимого времени;
\item формирование структуры презентации;
\item проверку логики подачи материала;
\item подготовку заключения.
\end{enumerate}
2022-12-07 22:33:10 +03:00
2022-12-13 12:08:18 +03:00
\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}
2022-12-19 14:11:07 +03:00
\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}
2022-12-13 12:08:18 +03:00
\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{Выводы}
2022-12-13 12:08:18 +03:00
В ходе выполнения лабораторной работы были приобретены навыки создания мультимедийной веб-презентации, произошло ознакомление с основными правилами и требованиями к созданию веб-презентаций а также инструментарием по созданию веб-презентаций Shower. Была создана мультимедийная презентацию в соответствии с изученными требованиями по заданной теме.
\newpage
\appendix
\setcounter{secnumdepth}{0}
2022-12-13 12:08:18 +03:00
\section*{Приложения}
\addcontentsline{toc}{section}{Приложения}
\renewcommand{\thesubsection}{\Asbuk{subsection}}
2022-12-13 12:08:18 +03:00
\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);
}
2022-12-13 12:08:18 +03:00
</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}
2022-12-13 12:08:18 +03:00
\end{document}