wiki/HowtoReveal.js.md

# Howto reveal.js

## Pour faire des slides verticaux, il suffit d'englober plusieurs sections dans une même section :

~~~{.html}
<section>
    <section>
	<h2>Vertical Slides</h2>
	<p>
            Slides can be nested inside of each other.
        </p>
    </section>
    <section>
        <h2>Basement Level 1</h2>
	<p>
            Nested slides are useful for adding additional detail underneath a high level horizontal slide.
        </p>
    </section>
</section>
~~~

## Pour intégrer image/gif en background sur un slide en particulier, il faut ajouter l'attribut data-background à la section : 

~~~{.html}
<section data-background="url-de-l-image.png">
    <h2>A slide with a image</h2>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
</section>
~~~

Idem pour un background color :

~~~{.html}
<section data-background="#87CBE7">
    <h2>A slide with a different background-color</h2>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
</section>
~~~

## Pour intégrer une video en background sur un slide en particulier, l'attribut a ajouter est data-background-video : 

~~~{.html}
<section data-background="url-de-la-video.webm">
    <h2>A slide with a video</h2>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
</section>
~~~

## Pour afficher du texte ou des images de façon fragmentée grâce à la class "fragment" :

~~~{.html}
<section>
    <h2>A slide with a image</h2>
    <p class="fragment">Lorem ipsum dolor sit amet...</p>
    <p class="fragment"> ...consectetur adipiscing elit...</p> 
    <p class="fragment">...sed do eiusmod tempor incididunt ut...</p>
    </p>...labore et dolore magna aliqua.</p>
    <img class="fragment" data-src="url-de-l-image.png">
</section>
~~~

## Transformer une présentation en .pdf :

~~~
$ ~/GIT/$ git clone https://github.com/astefanutti/decktape.git
$ ~/GIT/decktape$ curl -L https://github.com/astefanutti/decktape/releases/download/v1.0.0/phantomjs-linux-x86-64 -o phantomjs; chmod +x phantomjs
$ ~/GIT/decktape$ ./phantomjs decktape.js file:///tmp/foo.html foo.pdf
~~~

Note : cette méthode ne marche plus avec les dernières version de phantomjs et/ou decktape.

### Alternative en utilisant Docker

Si vous avez Docker sur votre machine :

~~~
$ docker run -t -v ~:/home/user astefanutti/decktape <fichier HTML> slides.pdf
$ docker cp `docker ps -lq`:slides/slides.pdf .
$ docker rm `docker ps -lq`
~~~

### Alternative en utilisant NodeJS

Débrouillez vous pour obtenir un nodejs et npm suffisamment récent puis suivre la procédure officielle : https://github.com/astefanutti/decktape#install (non testé).