Compare commits
5 Commits
75298997f0
...
0f1413933f
| Author | SHA1 | Date |
|---|---|---|
 Ivan I. Ovchinnikov
|
0f1413933f | |
Dmitry Nazarov
|
6d9d59f6d8 | |
Vadim Makeev
|
67a5486b46 | |
|
Vadim Makeev
|
19b8d8185c | |
|
Vadim Makeev
|
54bef8ddb7 |
|
|
@ -1,4 +1,4 @@
|
|||
node_modules
|
||||
prepared
|
||||
bundled
|
||||
presentation.zip
|
||||
index.pdf
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
||||
npm run prepare
|
||||
npm run bundle
|
||||
|
||||
You’ll find your presentation in `prepared` folder. You can also run `npm run archive` to get the same files in `presentation.zip`.
|
||||
You’ll find your presentation in `bundled` folder. You can also run `npm run archive` to get the same files in `presentation.zip`.
|
||||
|
||||
Publish your presentation online by running:
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
<pre><code>function <mark>action()</mark> {
|
||||
<span class="comment">// TODO<span>
|
||||
<span class="comment">// TODO</span>
|
||||
return <mark class="important">true</mark>;
|
||||
}</code></pre>
|
||||
|
||||
|
|
|
|||
232
index.html
232
index.html
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Shower Presentation Engine</title>
|
||||
<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">
|
||||
|
|
@ -14,13 +14,13 @@
|
|||
<body class="shower list">
|
||||
|
||||
<header class="caption">
|
||||
<h1>Shower Presentation Engine</h1>
|
||||
<p>Yours Truly, Famous Inc.</p>
|
||||
<h1>Мультимедиа технологии в корпоративных информационных системах</h1>
|
||||
<p>[ИУ3-31М] И.И.Овчинников</p>
|
||||
</header>
|
||||
|
||||
<section class="slide" id="cover">
|
||||
<h2>Shower Presentation Engine</h2>
|
||||
<p>Brought to you by <a href="https://pepelsbey.net">Vadim Makeev</a></p>
|
||||
<h2>Мультимедиа технологии в корпоративных информационных системах</h2>
|
||||
<p>[ИУ3-31М] И.И.Овчинников</p>
|
||||
<figure>
|
||||
<img class="cover" src="pictures/cover.jpg" alt="Hands on the orange typewriter in a park">
|
||||
<figcaption class="copyright right white">
|
||||
|
|
@ -49,162 +49,120 @@
|
|||
</style>
|
||||
</section>
|
||||
|
||||
<section class="slide">
|
||||
<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><culpa></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>
|
||||
<section class="slide">
|
||||
<h2>Мультимедиа</h2>
|
||||
<figure>
|
||||
<blockquote>
|
||||
<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>
|
||||
<p> Мультимедиа (англ. multimedia) — данные, или содержание, которые представляются одновременно в разных формах: звук, анимированная компьютерная графика, видеоряд.</p>
|
||||
</blockquote>
|
||||
<figcaption>Marcus Tullius Cicero</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<section class="slide">
|
||||
<h2>Code samples</h2>
|
||||
<pre>
|
||||
<code><!DOCTYPE html></code>
|
||||
<code class="mark"><html lang="en"></code>
|
||||
<code><mark><head></mark> <span class="comment"><!--Comment--></span></code>
|
||||
<code> <title>Shower</title></code>
|
||||
<code> <meta charset="<mark class="important">UTF-8</mark>"></code>
|
||||
<code> <link rel="stylesheet" href="screen.css"></code>
|
||||
<code><mark></head></mark></code>
|
||||
</pre>
|
||||
</section>
|
||||
|
||||
<section class="slide">
|
||||
<h2>Even tables</h2>
|
||||
<table>
|
||||
<tr>
|
||||
<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 class="slide" id="picture">
|
||||
<h2>Pictures</h2>
|
||||
<section class="slide">
|
||||
<h2>Корпоративная Информационная Система</h2>
|
||||
<figure>
|
||||
<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>
|
||||
<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>
|
||||
<style>
|
||||
#picture h2 {
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</section>
|
||||
|
||||
<section class="slide">
|
||||
<h2 class="shout shrink">You can even shout this way</h2>
|
||||
<h2>Величина рынка развития мультимедиа в корпоративном секторе</h2>
|
||||
<figure>
|
||||
<blockquote>
|
||||
<p>В ближайшие три года мы ожидаем взрывной рост объёма российского рынка ПО для бизнес-коммуникаций. Таким образом, общий объём рынка может достичь 100 млрд рублей</p>
|
||||
</blockquote>
|
||||
<figcaption>Генеральный директор tada.team Андрей Демин, в интерьвью журналу Forbes</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<section class="slide">
|
||||
<h2>Inner navigation</h2>
|
||||
<ol>
|
||||
<li>Lets you reveal list items one by one</li>
|
||||
<li class="next">To keep some key points</li>
|
||||
<li class="next">In secret from audience</li>
|
||||
<li class="next">But it will work only once</li>
|
||||
<li class="next">Nobody wants to see the same joke twice</li>
|
||||
</ol>
|
||||
<section class="slide">
|
||||
<h2>Применение AR/VR в КИС и медицине</h2>
|
||||
<figure>
|
||||
<img src="pictures/learn-dynamics.png" class="place bottom" height="65%" alt="EDMS example" />
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<section class="slide" id="see-more">
|
||||
<h2 class="shout">
|
||||
<img src="pictures/logo.svg" alt="Shower logo">
|
||||
<a href="https://github.com/shower/shower">See more on GitHub</a>
|
||||
</h2>
|
||||
<style>
|
||||
#see-more h2 {
|
||||
font-size: 100px
|
||||
}
|
||||
<section class="slide">
|
||||
<h2>Применение систем для контроля логистики</h2>
|
||||
<figure>
|
||||
<img src="pictures/logistic.png" class="place bottom" height="65%" alt="EDMS example" />
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
#see-more img {
|
||||
width: 0.72em;
|
||||
height: 0.72em;
|
||||
}
|
||||
</style>
|
||||
<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://github.com/shower/shower">Fork me on GitHub</a>
|
||||
<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>
|
||||
<!-- Copyright © 3000 Yours Truly, Famous Inc. -->
|
||||
<!-- https://docs.google.com/presentation/d/1sJmLJiJjnHjDl-TRpNyYnCTvn5zUDgE2x3ndvHampR0/edit?usp=sharing -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
[build]
|
||||
publish = "prepared"
|
||||
command = "npm run prepare"
|
||||
|
||||
publish = "bundled"
|
||||
command = "npm run bundle"
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
20
package.json
20
package.json
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "@shower/shower",
|
||||
"description": "Shower HTML presentation engine",
|
||||
"version": "3.2.3",
|
||||
"version": "3.3.0",
|
||||
"author": {
|
||||
"name": "Vadim Makeev",
|
||||
"url": "https://pepelsbey.net/"
|
||||
|
|
@ -27,20 +27,20 @@
|
|||
"README.md"
|
||||
],
|
||||
"dependencies": {
|
||||
"@shower/core": "^3.2.0",
|
||||
"@shower/material": "^2.4.4",
|
||||
"@shower/ribbon": "^3.4.3"
|
||||
"@shower/core": "^3.3.0",
|
||||
"@shower/material": "^2.5.0",
|
||||
"@shower/ribbon": "^3.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@shower/cli": "^0.3.0",
|
||||
"path-exists-cli": "^1.0.0"
|
||||
"@shower/cli": "^0.3.1",
|
||||
"path-exists-cli": "^2.0.0"
|
||||
},
|
||||
"scripts": {
|
||||
"pdf": "shower pdf",
|
||||
"start": "shower serve",
|
||||
"prepare": "shower prepare --files '**' --files '!{docs,node_modules,prepared}{,/**}' --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,prepared}{,/**}' --files '!*.{md,toml,json}'",
|
||||
"test": "npm run prepare && ls prepared && npm run archive && path-exists presentation.zip"
|
||||
"bundle": "shower bundle --files '**' --files '!{docs,node_modules,bundled}{,/**}' --files '!*.{md,toml,json}'",
|
||||
"archive": "shower archive --files '**' --files '!{docs,node_modules,bundled}{,/**}' --files '!*.{md,toml,json}'",
|
||||
"publish": "shower publish --files '**' --files '!{docs,node_modules,bundled}{,/**}' --files '!*.{md,toml,json}'",
|
||||
"test": "npm run bundle && ls bundled && npm run archive && path-exists presentation.zip"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 462 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 318 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 185 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
Loading…
Reference in New Issue