## In this presentation, you'll find - An example title slide - Examples of section slides (#) and normal slides (##) - Examples of custom classes and how to put them on some element - Examples of incremental apparition of bullet points - **NB: Use left/right arrows to navigate** # {*no-status title-slide} // comment - - ## Overview {#the-overview} - we could have written something - in this overview - but the goal is to illustrate the fact that - you can: 1. give an identifier to any element (or a slide) 1. easily copy a slide with @copy (this will be illustrated at the end) ## One can type slides in markdown - Most of this demo is like that that ## You can mix HTML too, if you need very specific things
## Adding classes and incremental display - This has a css class that makes it hightlighted in red {in-red} - This is normal - this is nested - also this one in highlighted {in-red} - The slide class can be added to make incremental display - This one should only appear later {slide} - this one appears with its parent - and later {slide} - and later {slide} - This one is there from the beginning ## Adding images etc - One can use plain html - As here: - Or there: NB: these ones are online but you can use local images as well ## Including SVG images @svg: Test.svg 700 200 - One can use the special @svg annotation - SVG images loaded this way can be styled and animated - For this, one can use the @anim annotation (see next slide) ## Animating SVG images - 1st: make something appear, with @anim: #use47 - @anim: #use47 - 3 next steps: with @anim: #use49 | #use51 | #use53 - @anim: #use49 | #use51 | #use53 - disappearing and doing multiple things per step, with
@anim: -#use49 | - #use51,#use53 | #use51,#use53 + #use49 + -#use47 - @anim: -#use49 | - #use51,#use53 | #use51,#use53 + #use49 + -#use47 - adding a class (also works on non-SVG), with
@anim: %+class:in-red: #tspan3448 - @anim: %+class:in-red: #tspan3448 @svg: Test.svg 700 200 ## Global Effects - One can also have effects that affects not only the slide but the container - This can be done, e.g., in the next 4 steps with - @anim: %+class:/bgred - @anim: %+class:/zoomed-out - @anim: %-class:/bgred - @anim: %-class:/zoomed-out - @anim: %+class:/bgred - @anim: %+class:/zoomed-out - @anim: %-class:/bgred - @anim: %-class:/zoomed-out ## Useful [shortcuts](http://home.heeere.com/tech-deckjs-ext.html#keys) - 'g' to open the "goto slide" panel - 'm' to view the slide selector - 'c' to clone the view (the original becomes the presenter view) - left/right to step forward and backward - down/up to move slide by slide (when presenting, e.g., down will go to the beginning of the next slide, before any animation/incremental display takes place) - 'z'/'a' to browse slide by slide (when browsing, e.g., 'z' will go the end of the next slide) ## Writing Maths - One can write math equations using the latex syntax, opening and closing with a dollar sign - Examples below - $\left[\begin{array}{cc} \sqrt{x} & 2 \\\\ 3 & x^4 \end{array}\right]$ or $\left$$\frac{x^2}{y^3}\right$$$ is made of $x^2$ and $y^3$ - $\mathcal{L} = \sum_d \sum_w \sum_{t_a} n(w,t_a,d) log \sum_z \sum_{t_s} p(w,t_r|z) p(z,t_s|d)$ {center} $a^2 + \frac{1}{\sqrt{a^2 + \frac{1}{\sqrt{a^2 + \frac{1}{\sqrt{a^2 + b^{\infty}}}}}}}$ *$a^2 + \frac{1}{\sqrt{a^2 + \frac{1}{\sqrt{a^2 + \frac{1}{\sqrt{a^2 + b^{\infty}}}}}}}$ {in-red}* (classy) ## Highlighting source code - Some python python def main(): a = 12 print(a+a) return a+1 main() {auto}  - Some shell bash echo "hello \${world}" {auto}  ## Highlighting source code - With the dense class (custom css for this page) python def magic(a): return a*a+1 {auto dense}  - and more python def magic(a): return a*a+1 {dense}  # More stuff about different extensions at [http://home.heeere.com/tech-deckjs-ext.html](http://home.heeere.com/tech-deckjs-ext.html) # That's it, let's bring back our overview # @copy: #the-overview # Once more our overview, with some "animation" # @copy: #the-overview: %+class:in-red: ol ## random END image {/no-status /blackbg image-full bottom-right darkened} # fake end (check the slide number and go to the next slide) {deck-status-fake-end} ## supplementary slides - One can “hide” slides by putting them after a slide with class deck-status-fake-end ## more supplementary ## Obtaining a standalone file? - click on **THAT{save-dom-button}** (anything with the save-dom-button class) - or press 'd'