ivan-igorevich
/
bmstu-mt-wp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: ivan-igorevich:0f1413933fda21c39210b02cc469c7d8b8e07883
Branches Tags
ivan-igorevich:main
..
compare: ivan-igorevich:75298997f07e9052040ef84e00d968a75d2c8322
Branches Tags
ivan-igorevich:main

No commits in common. "0f1413933fda21c39210b02cc469c7d8b8e07883" and "75298997f07e9052040ef84e00d968a75d2c8322" have entirely different histories.
0f1413933f ... 75298997f0

13 changed files with 1427 additions and 7844 deletions
Show Stats Expand all files Collapse all files

2
.gitignore vendored
View File

@ -1,4 +1,4 @@
node_modules node_modules
bundled prepared
presentation.zip presentation.zip
index.pdf index.pdf

4
README.md
View File

@ -43,9 +43,9 @@ You’ll need [Node.js](https://nodejs.org/) installed on your computer.
Once you’re done you can build a clean copy of your slides: Once you’re done you can build a clean copy of your slides:
npm run bundle npm run prepare
You’ll find your presentation in `bundled` folder. You can also run `npm run archive` to get the same files in `presentation.zip`. You’ll find your presentation in `prepared` folder. You can also run `npm run archive` to get the same files in `presentation.zip`.
Publish your presentation online by running: Publish your presentation online by running:

2
docs/features.md
View File

@ -310,7 +310,7 @@ When necessary emphasize that code is commented, you need to use span element wi
If you want to color part of code, wrap this part with `mark` to add yellow background and `mark` with `important` class to add red background; If you want to color part of code, wrap this part with `mark` to add yellow background and `mark` with `important` class to add red background;
<pre><code>function <mark>action()</mark> { <pre><code>function <mark>action()</mark> {
<span class="comment">// TODO</span> <span class="comment">// TODO<span>
return <mark class="important">true</mark>; return <mark class="important">true</mark>;
}</code></pre> }</code></pre>

226
index.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>МТвКИС</title> <title>Shower Presentation Engine</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel="stylesheet" href="node_modules/@shower/ribbon/styles/styles.css"> <link rel="stylesheet" href="node_modules/@shower/ribbon/styles/styles.css">
@ -14,13 +14,13 @@
<body class="shower list"> <body class="shower list">
<header class="caption"> <header class="caption">
<h1>Мультимедиа технологии в корпоративных информационных системах</h1> <h1>Shower Presentation Engine</h1>
<p>[ИУ3-31М] И.И.Овчинников</p> <p>Yours Truly, Famous Inc.</p>
</header> </header>
<section class="slide" id="cover"> <section class="slide" id="cover">
<h2>Мультимедиа технологии в корпоративных информационных системах</h2> <h2>Shower Presentation Engine</h2>
<p>[ИУ3-31М] И.И.Овчинников</p> <p>Brought to you by <a href="https://pepelsbey.net">Vadim Makeev</a></p>
<figure> <figure>
<img class="cover" src="pictures/cover.jpg" alt="Hands on the orange typewriter in a park"> <img class="cover" src="pictures/cover.jpg" alt="Hands on the orange typewriter in a park">
<figcaption class="copyright right white"> <figcaption class="copyright right white">
@ -49,120 +49,162 @@
</style> </style>
</section> </section>
<section class="slide"> <section class="slide">
<h2>Мультимедиа</h2> <h2>Shower key features</h2>
<ol>
<li>Built on HTML, CSS and JavaScript</li>
<li>Works in all modern browsers</li>
<li>Themes are separated from engine</li>
<li>Fully keyboard accessible</li>
<li>Printable to PDF</li>
</ol>
<p class="note">Shower ['ʃəuə] noun. A person or thing that shows.</p>
</section>
<section class="slide">
<h2>Plain text on your slides</h2>
<p>Lorem ipsum dolor sit amet, consectetur <a href="#4">adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <em>quis nostrud</em> exercitation ullamco laboris <strong>nisi ut aliquip</strong> ex ea commodo consequat. Duis aute irure <i>dolor</i> in reprehenderit in voluptate velit esse cillum <b>dolore</b> eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in <code>&lt;culpa&gt;</code> qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="slide">
<h2>Two columns if you like</h2>
<div class="columns two">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.</p>
</div>
</section>
<section class="slide">
<h2>All kind of lists</h2>
<ol>
<li>Simple lists are marked with bullets</li>
<li>Ordered lists begin with a number</li>
<li>You can even nest lists one inside another
<ul>
<li>Or mix their types</li>
<li>But do not go too far</li>
<li>Otherwise audience will be bored</li>
</ul>
</li>
<li>Look, seven rows exactly!</li>
</ol>
</section>
<section class="slide">
<h2>Serious citations</h2>
<figure> <figure>
<blockquote> <blockquote>
<p> Мультимедиа (англ. multimedia) — данные, или содержание, которые представляются одновременно в разных формах: звук, анимированная компьютерная графика, видеоряд.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.</p>
</blockquote> </blockquote>
</figure> <figcaption>Marcus Tullius Cicero</figcaption>
</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> </figure>
</section> </section>
<section class="slide"> <section class="slide">
<h2>Величина рынка развития мультимедиа в корпоративном секторе</h2> <h2>Code samples</h2>
<figure> <pre>
<blockquote> <code>&lt;!DOCTYPE html&gt;</code>
<p>В ближайшие три года мы ожидаем взрывной рост объёма российского рынка ПО для бизнес-коммуникаций. Таким образом, общий объём рынка может достичь 100 млрд рублей</p> <code class="mark">&lt;html lang="en"&gt;</code>
</blockquote> <code><mark>&lt;head&gt;</mark> <span class="comment">&lt;!--Comment--&gt;</span></code>
<figcaption>Генеральный директор tada.team Андрей Демин, в интерьвью журналу Forbes</figcaption> <code> &lt;title&gt;Shower&lt;/title&gt;</code>
</figure> <code> &lt;meta charset="<mark class="important">UTF-8</mark>"&gt;</code>
<code> &lt;link rel="stylesheet" href="screen.css"&gt;</code>
<code><mark>&lt;/head&gt;</mark></code>
</pre>
</section> </section>
<section class="slide"> <section class="slide">
<h2>Применение AR/VR в КИС и медицине</h2> <h2>Even tables</h2>
<figure> <table>
<img src="pictures/learn-dynamics.png" class="place bottom" height="65%" alt="EDMS example" /> <tr>
</figure> <th scope="col">Locavore</th>
<th>Umami</th>
<th>Helvetica</th>
<th>Vegan</th>
</tr>
<tr>
<th scope="row">Fingerstache</th>
<td>Kale</td>
<td>Chips</td>
<td>Keytar</td>
</tr>
<tr>
<th scope="row">Sriracha</th>
<td>Gluten-free</td>
<td>Ennui</td>
<td>Keffiyeh</td>
</tr>
<tr>
<th scope="row">Thundercats</th>
<td>Jean</td>
<td>Shorts</td>
<td>Biodiesel</td>
</tr>
<tr>
<th scope="row">Terry</th>
<td>Richardson</td>
<td>Swag</td>
<td>Blog</td>
</tr>
</table>
<p>It’s good to have information organized.</p>
</section> </section>
<section class="slide"> <section class="slide" id="picture">
<h2>Применение систем для контроля логистики</h2> <h2>Pictures</h2>
<figure> <figure>
<img src="pictures/logistic.png" class="place bottom" height="65%" alt="EDMS example" /> <img class="cover" src="pictures/picture.jpg" alt="Orange typewriter on a wooden table close-up">
<figcaption class="copyright right white">
<a href="https://fiftyfootshadows.net">© John Carey</a>
</figcaption>
</figure> </figure>
<style>
#picture h2 {
color: white;
}
</style>
</section> </section>
<section class="slide"> <section class="slide">
<h2>Интеграция КИС и интернета вещей</h2> <h2 class="shout shrink">You can even shout this way</h2>
<figure>
<img src="pictures/iot.png" class="place bottom" height="65%" alt="EDMS example" />
</figure>
</section> </section>
<section class="slide"> <section class="slide">
<h2>Выводы</h2> <h2>Inner navigation</h2>
<ul> <ol>
<li>Мультимедиа охватывают все области интеллектуальной деятельности: науку, технику, образование, бизнес, культуру</li> <li>Lets you reveal list items one by one</li>
<li>Корпоративные системы это не только про бизнес, но и про некоммерческие организации</li> <li class="next">To keep some key points</li>
<li>Интеграция в жизнь людей усиливается, повсеместное использование.</li> <li class="next">In secret from audience</li>
</ul> <li class="next">But it will work only once</li>
<li class="next">Nobody wants to see the same joke twice</li>
</ol>
</section> </section>
<section class="slide"> <section class="slide" id="see-more">
<h2>Спасибо за внимание</h2> <h2 class="shout">
<figure> <img src="pictures/logo.svg" alt="Shower logo">
<img src="pictures/ty.png" class="place right" height="65%" alt="EDMS example" /> <a href="https://github.com/shower/shower">See more on GitHub</a>
</figure> </h2>
<style>
#see-more h2 {
font-size: 100px
}
#see-more img {
width: 0.72em;
height: 0.72em;
}
</style>
</section> </section>
<footer class="badge"> <footer class="badge">
<a href="https://t.me/ivanigorevichfeed">Follow me on Telegram</a> <a href="https://github.com/shower/shower">Fork me on GitHub</a>
</footer> </footer>
<div class="progress"></div> <div class="progress"></div>
<script src="node_modules/@shower/core/dist/shower.js"></script> <script src="node_modules/@shower/core/dist/shower.js"></script>
<!-- https://docs.google.com/presentation/d/1sJmLJiJjnHjDl-TRpNyYnCTvn5zUDgE2x3ndvHampR0/edit?usp=sharing --> <!-- Copyright © 3000 Yours Truly, Famous Inc. -->
</body> </body>
</html> </html>

5
netlify.toml
View File

@ -1,3 +1,4 @@
[build] [build]
publish = "bundled" publish = "prepared"
command = "npm run bundle" command = "npm run prepare"

9010
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

20
package.json
View File

@ -1,7 +1,7 @@
{ {
"name": "@shower/shower", "name": "@shower/shower",
"description": "Shower HTML presentation engine", "description": "Shower HTML presentation engine",
"version": "3.3.0", "version": "3.2.3",
"author": { "author": {
"name": "Vadim Makeev", "name": "Vadim Makeev",
"url": "https://pepelsbey.net/" "url": "https://pepelsbey.net/"
@ -27,20 +27,20 @@
"README.md" "README.md"
], ],
"dependencies": { "dependencies": {
"@shower/core": "^3.3.0", "@shower/core": "^3.2.0",
"@shower/material": "^2.5.0", "@shower/material": "^2.4.4",
"@shower/ribbon": "^3.5.0" "@shower/ribbon": "^3.4.3"
}, },
"devDependencies": { "devDependencies": {
"@shower/cli": "^0.3.1", "@shower/cli": "^0.3.0",
"path-exists-cli": "^2.0.0" "path-exists-cli": "^1.0.0"
}, },
"scripts": { "scripts": {
"pdf": "shower pdf", "pdf": "shower pdf",
"start": "shower serve", "start": "shower serve",
"bundle": "shower bundle --files '**' --files '!{docs,node_modules,bundled}{,/**}' --files '!*.{md,toml,json}'", "prepare": "shower prepare --files '**' --files '!{docs,node_modules,prepared}{,/**}' --files '!*.{md,toml,json}'",
"archive": "shower archive --files '**' --files '!{docs,node_modules,bundled}{,/**}' --files '!*.{md,toml,json}'", "archive": "shower archive --files '**' --files '!{docs,node_modules,prepared}{,/**}' --files '!*.{md,toml,json}'",
"publish": "shower publish --files '**' --files '!{docs,node_modules,bundled}{,/**}' --files '!*.{md,toml,json}'", "publish": "shower publish --files '**' --files '!{docs,node_modules,prepared}{,/**}' --files '!*.{md,toml,json}'",
"test": "npm run bundle && ls bundled && npm run archive && path-exists presentation.zip" "test": "npm run prepare && ls prepared && npm run archive && path-exists presentation.zip"
} }
} }

BIN
pictures/iot.PNG
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 462 KiB

BIN
pictures/learn-dynamics.PNG
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 44 KiB

BIN
pictures/logistic.PNG
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 318 KiB

BIN
pictures/notion.PNG
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 185 KiB

BIN
pictures/transport.PNG
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 46 KiB

BIN
pictures/ty.PNG
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 134 KiB