303 lines
17 KiB
TeX
303 lines
17 KiB
TeX
\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} |