Examples¶
Important
All plataform files (such as deck.js or jmpress.js) are supposed to be already downloaded
at css
and javascript
directories.
1. simple.rst¶
A simple presentation with 4 slides. One of them has a subtitle and another one doesn’t have a title.
Slide 1
=======
Slide contents
Slide 2
=======
Subtitle
--------
* item A
* item B
----
No title here
Final Slide
===========
This is the last one
To convert it to a deck presentation, there is no additional adjustments needed since deck.js follows a linear flow. The command to build it is shown below:
rst2html5slides \
--template templates/deck-template.html \
simple.rst simple_deck.html
You can see the result here.
To build a jmpress/impress presentation,
it is necessary to define some sort of positional distribution.
Fortunately, rst2html5slides
provides a few default functions.
The command to build a jmpress presentation from the same previous simple presentation is:
rst2html5slides \
--template templates/jmpress_template.html \
--stylesheet 'css/simple.css' \
--deck-selector 'div#jmpress' \
--slide-selector 'div.step' \
--distribution linear \
simple.rst simple_jmpress.html
See the result: simple_jmpress.html.
2. jmpress.rst¶
Impress.js has a nice demo presentation that shows how it works. Jmpress.js also has the same presentation. Now, rst2html5slides shows how to produce that presentation from a reStructuredText file:
.. title:: impress example | jmpress.js | rst2html5slides
.. meta::
:viewport: width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=yes
.. presentation::
:deck-selector: div#jmpress
:slide-selector: div.step
:data-x: -1000
:data-y: -1500
:id: bored
:class: slide
Aren't you just **bored** with all those slides-based presentations?
:data-x: 0
:class: slide
Don't you think that presentations given in **modern browsers** shouldn't
**copy the limits** of 'classic' slide decks?
:data-x: 1000
:class: slide
Would you like to **impress your audience** with
**stunning visualization** of your talk?
:data-x: 0
:data-y: 0
:data-scale: 4
:id: title
.. role:: try
.. role:: footnote
.. role:: title
:try:`then you should try`
:title:`impress.js` :sup:`*`
:footnote:`* no rhyme intended`
:data-x: 850
:data-y: 3000
:data-rotate: 90
:data-scale: 5
:id: its
It's a **presentation tool**
inspired by the idea behind `prezi.com <http://prezi.com>`_
and based on the **power of CSS3 transforms and transitions** in modern browsers.
:data-x: 3500
:data-y: 2100
:data-rotate: 180
:data-scale: 6
:id: big
.. role:: thoughts
visualize your **big** :thoughts:`thoughts`
:id: tiny
:data-x: 2825
:data-y: 2325
:data-z: -3000
:data-rotate: 300
:data-scale: 1
and **tiny** ideas
:id: ing
:data-x: 3500
:data-y: -850
:data-z: 0
:data-rotate: 270
:data-scale: 6
.. role:: positioning
.. role:: rotating
.. role:: scaling
by :positioning:`positioning`, :rotating:`rotating` and :scaling:`scaling`
them on an infinite canvas
:id: imagination
:data-x: 6700
:data-y: -300
:data-scale: 6
:data-rotate: 0
:data-z: 0
.. role:: imagination
the only **limit** is your :imagination:`imagination`
:id: source
:data-x: 6300
:data-y: 2000
:data-rotate: 20
:data-scale: 4
want to know more?
`use the source <http://github.com/bartaz/impress.js>`_, Luke!
:id: one-more-thing
:data-x: 6000
:data-y: 4000
:data-rotate: 0
:data-scale: 2
one more thing...
:id: its-in-3d
:data-x: 6200
:data-y: 4300
:data-z: -100
:data-rotate-x: -40
:data-rotate-y: 10
:data-scale: 2
.. role:: have
.. role:: you
.. role:: noticed
.. role:: its
.. role:: in
.. role:: footnote
:have:`have` :you:`you` :noticed:`noticed` :its:`it's` in **3D**:sup:`*`?
:footnote:`* beat that, prezi :)`
:id: overview
:data-x: 3000
:data-y: 1500
:data-scale: 10
:data-rotate-x: 0
:data-rotate-y: 0
:data-rotate-z: 0
.. empty slide
You can build it using a template:
rst2html5slides \
--template templates/jmpress_template.html \
jmpress.rst jmpress_via_template.html
or via parameters:
rst2html5slides \
--stylesheet "http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" \
--stylesheet css/impress.css \
--script http://code.jquery.com/jquery-latest.min.js \
--script js/jmpress/jmpress.js \
--script-defer js/jmpress/jmpress_init.js \
jmpress.rst jmpress_via_parameters.html
The first and the second generated files are equivalent and pretty close to the originals, aren’t they?