Существует множество различных способов создания слайдов для презентации в Linux. Вы можете использовать OpenOffice, LibreOffice или даже Microsoft Office (через Wine). Ваша завершенная презентация будет представлять собой файл.odp (формат OpenDocument) или.ppt (формат Powerpoint), который вы используете для презентации через упомянутые выше пакеты (или приложение для просмотра). Без установки необходимого программного обеспечения презентацию невозможно просмотреть. Разве не было бы здорово, если бы вы могли создать презентацию, работающую в веб-браузере, презентацию, созданную с использованием HTML, Javascript и CSS? Благодаря impress.js это возможно!
impress.js — это мощная среда представления CSS и Javascript. Он предоставляет все библиотеки и файлы CSS, необходимые для создания сложных и визуально вдохновляющих презентаций с использованием HTML. Но прежде чем мы продолжим, следует сделать предупреждение: использование impress.js в его исходной форме заключается в создании файлов с помощью текстовых редакторов и написании HTML вручную. Здесь нет ни необычного графического интерфейса, ни WYSIWYG.
Примечание : Хотя показанное здесь руководство выполнено на платформе Linux, шаги одинаковы независимо от используемой вами платформы ОС. Impress.js — это веб-скрипт, совместимый с кроссплатформенностью.
Для начала скачайте impress.js с GitHub . Самый простой способ — запустить следующую команду из командной строки:
wget https://github.com/bartaz/impress.js/archive/master.zip
И разархивируйте его:
unzip master.zip
В папке «impress.js-master» есть две подпапки — CSS и JS, которые содержат файлы CSS и Javascript impress.js соответственно. Вам действительно не нужно копаться в папке Javascript, однако папка CSS содержит демонстрационный файл CSS, который вы, возможно, захотите изменить для своих собственных презентаций. Вы также найдете пример презентации impress.js в файле index.html. Используя Nautilus, откройте папку «impress.js-master» и дважды щелкните index.html. Откроется веб-браузер по умолчанию (надеюсь, Firefox или Chrome) и начнется презентация.
Вот как создать простую презентацию на основе примера CSS-файла («css/impress-demo.css»), поставляемого с impress.js. Создайте HTML-файл с помощью текстового редактора. Возможно, вы захотите использовать текстовый редактор, например gEdit, или создать его с помощью nano в командной строке, например:
nano demo1.html
Вставьте следующий код в файл, затем сохраните его и выйдите (CTRL-X).
<title>All about impress.js</title>
<link href="css/impress-demo.css" rel="stylesheet">
<div id="impress">
<div class="step slide" data-x="-1000" data-y="-1000">
<b>All about impress.js</b>
<q>impress.js is a powerful CSS and Javascript presentation framework.
</q></div>
<div class="step slide" data-x="0" data-y="0">
<b>All about impress.js</b>
<q>It provides all the libraries and CSS files needed
to create complex and visually inspiring presentations using HTML
</q></div>
<div class="step slide" data-x="1000" data-y="1000">
<b>All about impress.js</b>
<q>Find out more at http://bartaz.github.io/impress.js
</q></div>
</div>
<script src="js/impress.js"></script>
<script>impress().init();</script>
Все файлы HTML разделены на разделы, которые начинаются с открывающего тега (например,
) и закрываются тем же тегом, но с добавленной косой чертой (например,). Внутри раздела «» тег «» определяет, какой файл CSS следует использовать (например, css/impress-demo.css). По мере того, как вы будете более продвинуты в работе с impress.js, вам нужно будет создать свой собственный файл CSS.В разделе
есть разделКаждый слайд имеет атрибуты data-x и data-y, которые определяют положение слайдов. Значение y остается одинаковым для трех слайдов, но значение x меняется. Он начинается с -1000, затем переходит к 0 и, наконец, к 1000. В результате слайды будут перемещаться слева направо по мере продвижения презентации. Изменяя значения x и y, вы можете заставить слайды перемещаться в любом направлении.
В конце HTML-файла находятся две строки, которые загружают скрипт impress.js, а затем инициализируют библиотеку impress.js (например, impress().init).
Чтобы протестировать файл, дважды щелкните demo1.html в Nautilus.
Переходы
impress.js также могут включать поворот. Добавьте этот слайд в презентацию:
<div class="step slide" data-x="2000" data-y="3000" data-rotate="90"> <b>All about impress.js</b> <q>Rotation! </q></div>
Атрибут data-rotate сообщает impress.js о повороте области просмотра на 90 градусов во время перехода. Значение является абсолютным, поэтому другой слайд со значением 90 не будет поворачиваться, если у предыдущего слайда поворот данных был равен 90. Проверьте новую презентацию в своем веб-браузере.
Еще один интересный атрибут — масштаб данных (т. е. масштаб). Это может придать вашей презентации трехмерный стиль, увеличивая и уменьшая масштаб холста по мере продвижения презентации.
Чтобы увидеть эффект масштабирования, добавьте в презентацию следующий слайд:
<div class="step" data-x="5000" data-y="4000" data-rotate="0" data-scale="3"> <q>Zoom, plus this doesn't look like a slide </q></div>
По поводу последнего слайда стоит отметить несколько моментов. Во-первых, он опускает класс «слайд». Это означает, что слайд будет представлен без белого фона, как определено в примере файла CSS. Во-вторых, обратите внимание на значения поворота данных и масштабирования данных. Атрибут data-rotate возвращает холст на 0 градусов (по сравнению с поворотом на 90 градусов на предыдущем слайде). Атрибут data-scale заставляет impress.js выполнять масштабирование во время перехода. Чтобы увидеть, как это выглядит, проверьте презентацию в своем браузере.
Теперь, когда вы освоили несколько простых слайдов, попробуйте прочитать index.html и «css/impress-demo.css», чтобы увидеть, как устроена демонстрация. Файл index.html содержит множество комментариев, которые помогут вам разобраться с различными элементами и классами.
Если у вас есть какие-либо вопросы по поводу приведенных выше примеров, воспользуйтесь разделом комментариев ниже, и мы посмотрим, сможем ли вам помочь.
