|
|
|
|
@@ -142,7 +142,7 @@
|
|
|
|
|
<h1>A slide with text</h1>
|
|
|
|
|
<p>This slide has a few paragraphs <br />(p element) of normal text.</p>
|
|
|
|
|
<p>Personally I like centered or even justified text, as it looks less boring. This can of course be set in <a href="css/classic-slides.css">the css file</a>.</p>
|
|
|
|
|
<p>I really like the style on links in these presentations. I modified the border to be beveled, but it's mostly from <a href="http://henrikingo.github.io/impress.js/">@bartaz' original demo</a>. <a href="https://twitter.com/bartaz">@bartaz</a> is the creator of impress.js.</p>
|
|
|
|
|
<p>I really like the style on links in these presentations. I modified the border to be beveled, but it's mostly from <a href="http://impress.github.io/impress.js/">@bartaz' original demo</a>. <a href="https://twitter.com/bartaz">@bartaz</a> is the creator of impress.js.</p>
|
|
|
|
|
|
|
|
|
|
<div class="notes">
|
|
|
|
|
In this slide, we don't even specify the relative position, rather
|
|
|
|
|
@@ -243,13 +243,13 @@
|
|
|
|
|
<div class="step slide" data-rel-x="-800" data-rel-y="800" data-rotate="150" data-autoplay="3">
|
|
|
|
|
<h1>Impress.js plugins</h1>
|
|
|
|
|
<ul>
|
|
|
|
|
<li>A new <a href="https://github.com/henrikingo/impress.js/blob/myfork/src/plugins/README.md">plugin framework</a> allows for rich extensibility,
|
|
|
|
|
<li>A new <a href="https://github.com/impress/impress.js/blob/master/src/plugins/README.md">plugin framework</a> allows for rich extensibility,
|
|
|
|
|
without bloating the core rendering library.
|
|
|
|
|
<ul>
|
|
|
|
|
<li class="substep">Press 'P' to open a presenter console.</li>
|
|
|
|
|
<li class="substep">When you move the mouse, navigation controls are visible on your bottom left</li>
|
|
|
|
|
<li class="substep">Autoplay makes the slides advance after a timeout</li>
|
|
|
|
|
<li class="substep">Relative positioning plugin is often a more convenient way to position your slides when editing. (<a href="https://github.com/henrikingo/impress.js/blob/myfork/examples/classic-slides/index.html">See html for this presentation.</a>)</li>
|
|
|
|
|
<li class="substep">Relative positioning plugin is often a more convenient way to position your slides when editing. (<a href="https://github.com/impress/impress.js/blob/master/examples/classic-slides/index.html">See html for this presentation.</a>)</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
@@ -283,7 +283,7 @@
|
|
|
|
|
<div class="notes">
|
|
|
|
|
<p>The Highlight.js library provides really nice color coding of source code.
|
|
|
|
|
It automatically applies to any code inside a <pre><code> element.</p>
|
|
|
|
|
<p>Highlight.js is found under the <a href="https://github.com/henrikingo/impress.js/tree/myfork/extras">extras/</a>
|
|
|
|
|
<p>Highlight.js is found under the <a href="https://github.com/impress/impress.js/tree/master/extras">extras/</a>
|
|
|
|
|
directory, since it is an independent third party plugin, not really an impress.js plugin. You have
|
|
|
|
|
to include it via it's own <link> and <script> tags.</p>
|
|
|
|
|
</div>
|
|
|
|
|
@@ -310,7 +310,7 @@
|
|
|
|
|
<h1><a href="http://docs.mathjax.org/en/latest/start.html">MathJax.js</a></h1>
|
|
|
|
|
<p>Use \(\LaTeX\), MathML or AsciiMath to properly show mathematical formula.</p>
|
|
|
|
|
<div class="notes">
|
|
|
|
|
Mermaid.js, likewise in a href="https://github.com/henrikingo/impress.js/tree/myfork/extras">extras/</a>
|
|
|
|
|
Mermaid.js, likewise in a href="https://github.com/impress/impress.js/tree/master/extras">extras/</a>
|
|
|
|
|
directory, draws SVG diagrams from a MarkDown-like syntax. To learn
|
|
|
|
|
more about it <a href="http://knsv.github.io/mermaid/index.html#usage">read the fine manual</a>.
|
|
|
|
|
</div>
|
|
|
|
|
@@ -401,22 +401,22 @@
|
|
|
|
|
<div id="moreinfo" class="step slide" data-x="2020" data-y="700" data-rotate="720" data-transition-duration="2000">
|
|
|
|
|
<h1>More info</h1>
|
|
|
|
|
<ul>
|
|
|
|
|
<li><a href="https://github.com/henrikingo/impress.js/blob/myfork/DOCUMENTATION.md">DOCUMENTATION.md</a> is the API reference.
|
|
|
|
|
<li><a href="https://github.com/impress/impress.js/blob/master/DOCUMENTATION.md">DOCUMENTATION.md</a> is the API reference.
|
|
|
|
|
</li>
|
|
|
|
|
<li><a href="https://github.com/henrikingo/impress.js/blob/myfork/examples/classic-slides/index.html">Source of this presentation itself</a> is commented</li>
|
|
|
|
|
<li><a href="http://henrikingo.github.io/impress.js/">Advanced Impress.js demo</a> by <a href="http://twitter.com/bartaz">@bartaz</a>
|
|
|
|
|
<li><a href="https://github.com/impress/impress.js/blob/master/examples/classic-slides/index.html">Source of this presentation itself</a> is commented</li>
|
|
|
|
|
<li><a href="http://impress.github.io/impress.js/">Advanced Impress.js demo</a> by <a href="http://twitter.com/bartaz">@bartaz</a>
|
|
|
|
|
<ul>
|
|
|
|
|
<li>Again, the <a href="http://github.com/henrikingo/impress.js/blob/myfork/index.html">html</a>
|
|
|
|
|
and <a href="https://github.com/henrikingo/impress.js/blob/myfork/css/impress-demo.css">css</a> source is well commented.</li>
|
|
|
|
|
<li>Again, the <a href="http://github.com/impress/impress.js/blob/master/index.html">html</a>
|
|
|
|
|
and <a href="https://github.com/impress/impress.js/blob/master/css/impress-demo.css">css</a> source is well commented.</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</li>
|
|
|
|
|
<li>More examples and demos:
|
|
|
|
|
<ul>
|
|
|
|
|
<li><a href="https://github.com/henrikingo/impress.js/tree/myfork/examples">examples/</a> in this repository</li>
|
|
|
|
|
<li><a href="https://github.com/impress/impress.js/tree/master/examples">examples/</a> in this repository</li>
|
|
|
|
|
<li><a href="https://github.com/impress/impress.js/wiki/Examples-and-demos">on the impress.js wiki</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</li>
|
|
|
|
|
<li>Check out <a href="https://github.com/henrikingo/impressionist">Impressionist</a>: a 3D GUI to create impress.js presentations</li>
|
|
|
|
|
<li>Check out <a href="https://github.com/impress/impressionist">Impressionist</a>: a 3D GUI to create impress.js presentations</li>
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
<div class="notes">
|
|
|
|
|
|
Henrik Ingo