Делать презентации не было чем-то новым. Но на этот раз это должно было быть особенным, у нас было соревнование. Презентации — это способ создать общее впечатление. И чтобы создать впечатление, нам нужно что-то другое и впечатляющее. В отличие от традиционных способов проведения презентаций (PowerPoint и т. Д.), В этот раз мы решили сделать это по-другому. Это было, когда мы врезались в выявление .js .
reve.js — это фреймворк для создания красивых презентаций с использованием HTML. Он имеет ряд удобных функций, таких как контент Markdown, вложенные слайды, экспорт PDF и JavaScript API для управления навигацией по слайдам. Презентации с использованием reve.js пишутся с использованием HTML. Есть также интерфейс для тех, кто не очень разбирается в технологиях .
Настройка reve.js
Перед использованием show.js на вашем компьютере должны быть установлены и Node.js, и Grunt . Следующие шаги — клонировать репозиторий reve.js из GitHub, установить все зависимости и запустить сервер отображения . Следующий список команд используется для выполнения этих шагов.
git clone https://github.com/hakimel/reveal.js.git
cd reveal.js
npm install
grunt serve Затем перейдите в браузер по http://localhost:8000/
Создание презентации
Следующий листинг кода представляет собой открытую HTML-страницу. До конца тега body Есть ряд опций, которые мы можем настроить. Например, мы можем при желании показать ход презентации, включить переходы и установить тему для нашей презентации. Мы углубимся в это, как только начнем добавлять слайды в нашу презентацию.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reveal.js - The HTML Presentation Framework</title>
<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
<meta name="author" content="Hakim El Hattab">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/default.css" id="theme">
<!-- For syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- If the query includes 'print-pdf', include the PDF print sheet -->
<script>
if (window.location.search.match(/print-pdf/gi)) {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'css/print/pdf.css';
document.getElementsByTagName('head')[0].appendChild(link);
}
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<!-- Slides content to be added here -->
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
// Parallax scrolling
// parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg',
// parallaxBackgroundSize: '2100px 900px',
// Optional libraries used to extend on reveal.js
dependencies: [{
src: 'lib/js/classList.js',
condition: function () {
return !document.body.classList;
}
}, {
src: 'plugin/markdown/marked.js',
condition: function () {
return !!document.querySelector('[data-markdown]');
}
}, {
src: 'plugin/markdown/markdown.js',
condition: function () {
return !!document.querySelector('[data-markdown]');
}
}, {
src: 'plugin/highlight/highlight.js',
async: true,
callback: function () {
hljs.initHighlightingOnLoad();
}
}, {
src: 'plugin/zoom-js/zoom.js',
async: true,
condition: function () {
return !!document.body.classList;
}
}, {
src: 'plugin/notes/notes.js',
async: true,
condition: function () {
return !!document.body.classList;
}
}]
});
</script>
</body>
</html>
Слайды
Теперь мы начнем добавлять слайды в нашу пустую презентацию. Давайте добавим наш первый слайд, используя следующий HTML. элементы section Мы можем даже вкладывать слайды в другие слайды, как показано вложенным section
<div class="reveal">
<div class="slides">
<section>
Welcome to Reveal.js Demo
</section>
<section>
Theme Changes to Solarized. Isn't it Nice 😉
</section>
<section>
<section>
LalaLand Floor 1
</section>
<section>
LalaLand Floor 2
</section>
</section>
</div>
</div>
Сохраните файл и перезапустите сервер, используя команду grunt serve Вы должны увидеть наши недавно созданные слайды. Обратите внимание, что слайдами можно управлять с помощью клавиш со стрелками. Хотя эта функция включена по умолчанию, вы можете настроить поведение с помощью keyboard: trueReveal.initialize()
Темы
Есть несколько доступных тем, таких как beigesolarizedskycss/theme Чтобы использовать их, вам просто нужно изменить стиль по умолчанию на вашей странице, как показано в следующем примере.
<link rel="stylesheet" href="css/theme/default.css" id="theme">
Переходы
Стиль и скорость перехода можно настроить в Reveal.initialize()transitiontransitionSpeed Пример этого показан ниже.
transitionSpeed: 'default', // default / fast / slow
backgroundTransition: 'default', // default / none / slide / concave / convex / zoom
Содержание слайдов уценки
Если вы являетесь поклонником Markdown, то написание слайдов с использованием Markdown должно вас заинтересовать. Просто добавьте атрибут data-markdownsection тег, как показано ниже.
Отображение исходного кода
reve.js использует highlight.js для подсветки синтаксиса. Чтобы отобразить исходный код внутри слайдов, добавьте свой код в теги <section data-markdown>
<script type="text/template">
## Here comes Markdown
</script>
</section>
<pre><code>
Создание заметок докладчика
reve.js имеет плагин для отображения заметок на слайде. Заметки докладчиков можно добавлять к слайду с помощью тега « <section> Для просмотра заметок просто нажмите клавишу
jQuery Code Sample
<pre><code>
$(function () {
$('a').click(function(event) {
alert('Thanks for visiting!'');
});
});
</code></pre>
</section>aside
sв<section> Hello I have Notes. Press 's' to view <aside class="notes"> I'm your Notes 🙂 </aside> </section>
Отображение математики
Математические уравнения также могут быть отображены на слайдах show.js. Нам просто нужно добавить зависимость от библиотеки MathJax . В следующем примере показано, как это сделать в Reveal.initalize()
Reveal.initialize({
// other options ...
math: {
mathjax: 'http://cdn.mathjax.org/mathjax/latest/MathJax.js',
config: 'TeX-AMS_HTML-full' // See http://docs.mathjax.org/en/latest/config-files.html
},
dependencies: [{
src: 'plugin/math/math.js',
async: true
}]
});
Как видите, MathJax загружается с удаленного сервера. Убедитесь, что у вас есть подключение к Интернету, или разместите библиотеку на локальном компьютере. Как только библиотека будет включена, мы можем создать математическую формулу, как показано ниже. Обратите внимание, что символ $
<section>
<p>Math Formula</p>
$\cos (2\theta) = \cos^2 \theta - \sin^2 \theta$
</section>
Развертывание в Heroku
Далее мы узнаем, как разместить нашу презентацию на Heroku . Создайте файл с именем web.js Обратите внимание, что использование промежуточного программного обеспечения express.staticpackage.json Если безопасность важна, вы должны разместить свою презентацию в подкаталоге проекта.
var express = require('express');
var app = express();
var port = process.env.PORT || 5000;
app.use(express.logger());
app.use('/', express.static(__dirname));
app.listen(port, function() {
console.log('Server started on ' + port);
});
Также создайте файл с именем Procfile
web: node web.js
Затем откройте package.jsonexpress Убедитесь, что версия 3.x.x Наконец, разверните в Heroku с помощью следующих команд.
git init
git add .
git commit -m "first"
heroku create
git push heroku master
Вывод
reve.js - один из самых популярных вариантов создания презентаций с использованием HTML. Мы рассмотрели некоторые из его основных функций в этой статье, но есть еще много доступных. Предлагаю взглянуть на официальную документацию, чтобы узнать, что еще возможно. Код из этой статьи доступен на GitHub , а на Heroku запущена демоверсия.